From c7f2377284da8beb6f8ad15257c088b90737f601 Mon Sep 17 00:00:00 2001 From: NativeScript-Bot Date: Sat, 28 Oct 2023 08:04:09 +0000 Subject: [PATCH] chore(fetch): Sat Oct 28 08:04:09 UTC 2023 --- src/data/authors.json | 5771 +++++++++++++++++++-------------------- src/data/fuseIndex.json | 4571 ++++++++++++++++--------------- src/data/pluginData.dat | 2 +- src/data/plugins.json | 2759 +++++++++---------- 4 files changed, 6536 insertions(+), 6567 deletions(-) diff --git a/src/data/authors.json b/src/data/authors.json index 22644d54..ce297cc1 100644 --- a/src/data/authors.json +++ b/src/data/authors.json @@ -1436,9 +1436,9 @@ } ], "downloadStats": { - "lastDay": 4, - "lastWeek": 15, - "lastMonth": 965 + "lastDay": 13, + "lastWeek": 25, + "lastMonth": 970 } }, { @@ -1487,9 +1487,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 42, - "lastMonth": 295 + "lastDay": 2, + "lastWeek": 41, + "lastMonth": 285 } }, { @@ -1539,9 +1539,9 @@ } ], "downloadStats": { - "lastDay": 23, - "lastWeek": 273, - "lastMonth": 1210 + "lastDay": 34, + "lastWeek": 268, + "lastMonth": 1167 } }, { @@ -1578,8 +1578,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 135 } }, { @@ -3533,8 +3533,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 5, + "lastMonth": 20 } }, { @@ -3626,9 +3626,9 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 68, - "lastMonth": 398 + "lastDay": 11, + "lastWeek": 59, + "lastMonth": 380 } } ] @@ -3950,8 +3950,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 141 } }, { @@ -3989,9 +3989,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 4, + "lastWeek": 14, + "lastMonth": 151 } }, { @@ -4030,8 +4030,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 46 } }, { @@ -4071,8 +4071,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 30 } }, { @@ -4358,7 +4358,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 9, - "lastMonth": 1188 + "lastMonth": 1115 } } ] @@ -4701,9 +4701,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 87 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 88 } } ] @@ -4752,8 +4752,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 44 } }, { @@ -5054,9 +5054,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 10, - "lastMonth": 240 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 226 } }, { @@ -5096,8 +5096,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 8, - "lastMonth": 88 + "lastWeek": 7, + "lastMonth": 85 } }, { @@ -5137,8 +5137,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, - "lastMonth": 44 + "lastWeek": 4, + "lastMonth": 41 } }, { @@ -5178,7 +5178,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 4, "lastMonth": 90 } }, @@ -6125,10 +6125,10 @@ "username": "awarns", "plugins": [ { - "name": "@awarns/notifications", + "name": "@awarns/core", "scope": "awarns", - "version": "1.0.2", - "description": "AwarNS Framework package that allows to deliver notifications on demand", + "version": "1.1.0", + "description": "AwarNS framework core package. Use this package to develop new plugins for AwarNS", "keywords": [ "NativeScript", "JavaScript", @@ -6137,15 +6137,11 @@ "Context", "Awareness", "AwarNS", - "Notifications", - "EMA", - "EMI", - "ESM", - "notifications" + "core" ], - "date": "2023-04-10T18:33:55.486Z", + "date": "2022-10-04T09:49:45.718Z", "links": { - "npm": "https://www.npmjs.com/package/%40awarns%2Fnotifications", + "npm": "https://www.npmjs.com/package/%40awarns%2Fcore", "homepage": "http://github.com/GeoTecINIT/awarns-framework", "repository": "https://github.com/GeoTecINIT/awarns-framework", "bugs": "http://github.com/GeoTecINIT/awarns-framework/issues" @@ -6175,30 +6171,28 @@ } }, { - "name": "@awarns/core", + "name": "@awarns/phone-sensors", "scope": "awarns", - "version": "1.1.0", - "description": "AwarNS framework core package. Use this package to develop new plugins for AwarNS", + "version": "1.2.2", + "description": "Reliable and concurrent access to smartphone's sensors", "keywords": [ "NativeScript", - "JavaScript", "TypeScript", "Android", - "Context", - "Awareness", - "AwarNS", - "core" + "Sensors", + "phone", + "sensors" ], - "date": "2022-10-04T09:49:45.718Z", + "date": "2022-11-02T13:59:18.470Z", "links": { - "npm": "https://www.npmjs.com/package/%40awarns%2Fcore", + "npm": "https://www.npmjs.com/package/%40awarns%2Fphone-sensors", "homepage": "http://github.com/GeoTecINIT/awarns-framework", "repository": "https://github.com/GeoTecINIT/awarns-framework", "bugs": "http://github.com/GeoTecINIT/awarns-framework/issues" }, "publisher": { - "username": "albertogonper", - "email": "alberto.gonzalez95@gmail.com" + "username": "matey", + "email": "matey@uji.es" }, "maintainers": [ { @@ -6221,28 +6215,34 @@ } }, { - "name": "@awarns/phone-sensors", + "name": "@awarns/notifications", "scope": "awarns", - "version": "1.2.2", - "description": "Reliable and concurrent access to smartphone's sensors", + "version": "1.0.2", + "description": "AwarNS Framework package that allows to deliver notifications on demand", "keywords": [ "NativeScript", + "JavaScript", "TypeScript", "Android", - "Sensors", - "phone", - "sensors" + "Context", + "Awareness", + "AwarNS", + "Notifications", + "EMA", + "EMI", + "ESM", + "notifications" ], - "date": "2022-11-02T13:59:18.470Z", + "date": "2023-04-10T18:33:55.486Z", "links": { - "npm": "https://www.npmjs.com/package/%40awarns%2Fphone-sensors", + "npm": "https://www.npmjs.com/package/%40awarns%2Fnotifications", "homepage": "http://github.com/GeoTecINIT/awarns-framework", "repository": "https://github.com/GeoTecINIT/awarns-framework", "bugs": "http://github.com/GeoTecINIT/awarns-framework/issues" }, "publisher": { - "username": "matey", - "email": "matey@uji.es" + "username": "albertogonper", + "email": "alberto.gonzalez95@gmail.com" }, "maintainers": [ { @@ -7869,9 +7869,9 @@ } ], "downloadStats": { - "lastDay": 17, + "lastDay": 20, "lastWeek": 132, - "lastMonth": 607 + "lastMonth": 606 } }, { @@ -8151,9 +8151,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 177 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 178 } }, { @@ -8250,53 +8250,6 @@ "name": "Benedikt Veith", "username": "benediktveith", "plugins": [ - { - "name": "nativescript-microsoft-appcenter-v2", - "scope": "unscoped", - "version": "3.0.4", - "description": "Microsoft App Center plugin for NativeScript.", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "iOS", - "Microsoft", - "AppCenter", - "Analytics", - "CrashReport", - "Diagnostics", - "Push", - "nativescript", - "microsoft", - "appcenter", - "v2" - ], - "date": "2020-11-19T09:50:38.501Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-microsoft-appcenter-v2", - "homepage": "https://github.com/benediktveith/nativescript-microsoft-appcenter", - "bugs": "https://github.com/benediktveith/nativescript-microsoft-appcenter/issues" - }, - "author": { - "name": "Benedikt Veith", - "username": "benediktveith" - }, - "publisher": { - "username": "benediktveith", - "email": "benedikt.veith@scherer-software.de" - }, - "maintainers": [ - { - "username": "benediktveith", - "email": "benedikt.veith@scherer-software.de" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-textinputlayout-v2", "scope": "unscoped", @@ -8477,9 +8430,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 15, - "lastMonth": 132 + "lastDay": 7, + "lastWeek": 22, + "lastMonth": 139 } }, { @@ -9763,9 +9716,9 @@ } ], "downloadStats": { - "lastDay": 92, - "lastWeek": 370, - "lastMonth": 1437 + "lastDay": 43, + "lastWeek": 328, + "lastMonth": 1388 } }, { @@ -9802,8 +9755,8 @@ ], "downloadStats": { "lastDay": 85, - "lastWeek": 426, - "lastMonth": 1695 + "lastWeek": 442, + "lastMonth": 1685 } }, { @@ -9860,9 +9813,9 @@ } ], "downloadStats": { - "lastDay": 175, - "lastWeek": 779, - "lastMonth": 3433 + "lastDay": 52, + "lastWeek": 733, + "lastMonth": 3372 } }, { @@ -9906,7 +9859,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 23, - "lastMonth": 141 + "lastMonth": 137 } }, { @@ -9950,9 +9903,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 32, + "lastMonth": 174 } }, { @@ -9998,8 +9951,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 8 } }, { @@ -11298,9 +11251,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 126 } } ] @@ -12869,8 +12822,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 7, + "lastMonth": 38 } } ] @@ -13261,9 +13214,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 5, - "lastMonth": 132 + "lastDay": 2, + "lastWeek": 7, + "lastMonth": 85 } }, { @@ -13914,8 +13867,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 57, - "lastMonth": 240 + "lastWeek": 59, + "lastMonth": 235 } } ] @@ -14703,7 +14656,7 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 3, "lastWeek": 0, "lastMonth": 0 } @@ -15016,8 +14969,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 67 } }, { @@ -15058,8 +15011,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 70 } }, { @@ -15192,7 +15145,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 24 } } ] @@ -15544,8 +15497,8 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 197, + "lastDay": 0, + "lastWeek": 101, "lastMonth": 304 } }, @@ -16066,7 +16019,7 @@ "username": "daravind" }, "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 3, "lastMonth": 28 } @@ -18111,6 +18064,55 @@ "lastMonth": 0 } }, + { + "name": "nativescript-audio-v2", + "scope": "unscoped", + "version": "5.0.4", + "description": "NativeScript plugin to record and play audio.", + "keywords": [ + "NativeScript", + "JavaScript", + "TypeScript", + "Android", + "iOS", + "music", + "microphone", + "recorder", + "audio", + "nStudio", + "bradmartin", + "nathanwalker", + "nativescript", + "audio", + "v2" + ], + "date": "2019-08-30T09:52:59.094Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-audio-v2", + "homepage": "https://github.com/bradmartin/nativescript-audio", + "repository": "https://github.com/bradmartin/nativescript-audio", + "bugs": "https://github.com/bradmartin/nativescript-audio/issues" + }, + "author": { + "name": "dieyne", + "username": "dieyne" + }, + "publisher": { + "username": "dieyne", + "email": "dieynedrame@gmail.com" + }, + "maintainers": [ + { + "username": "dieyne", + "email": "dieynedrame@gmail.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-wifi-settings", "scope": "unscoped", @@ -18611,8 +18613,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 12 } }, { @@ -18657,7 +18659,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, + "lastWeek": 1, "lastMonth": 0 } } @@ -18761,7 +18763,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 9, + "lastWeek": 8, "lastMonth": 26 } }, @@ -19596,7 +19598,7 @@ } ], "downloadStats": { - "lastDay": 12, + "lastDay": 3, "lastWeek": 109, "lastMonth": 370 } @@ -20193,8 +20195,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 40 } }, { @@ -20376,8 +20378,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 7, + "lastMonth": 35 } }, { @@ -20465,9 +20467,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 3, + "lastMonth": 53 } } ] @@ -20532,9 +20534,9 @@ } ], "downloadStats": { - "lastDay": 27, - "lastWeek": 257, - "lastMonth": 701 + "lastDay": 32, + "lastWeek": 268, + "lastMonth": 719 } }, { @@ -20575,9 +20577,9 @@ } ], "downloadStats": { - "lastDay": 80, - "lastWeek": 436, - "lastMonth": 1668 + "lastDay": 88, + "lastWeek": 454, + "lastMonth": 1689 } }, { @@ -20622,9 +20624,9 @@ } ], "downloadStats": { - "lastDay": 119, - "lastWeek": 540, - "lastMonth": 2210 + "lastDay": 98, + "lastWeek": 527, + "lastMonth": 2179 } }, { @@ -20664,9 +20666,9 @@ } ], "downloadStats": { - "lastDay": 187, - "lastWeek": 825, - "lastMonth": 3194 + "lastDay": 136, + "lastWeek": 832, + "lastMonth": 3159 } }, { @@ -20723,7 +20725,7 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 10, + "lastWeek": 12, "lastMonth": 33 } }, @@ -20763,10 +20765,55 @@ "email": "eddyverbruggen@gmail.com" } ], + "downloadStats": { + "lastDay": 8, + "lastWeek": 123, + "lastMonth": 450 + } + }, + { + "name": "nativescript-email", + "scope": "unscoped", + "version": "1.6.0", + "description": "Email plugin for your NativeScript app", + "keywords": [ + "ecosystem:NativeScript", + "NativeScript", + "Mail", + "Email", + "E-mail", + "Draft", + "Compose", + "MailComposer", + "Attachment", + "nativescript", + "email" + ], + "date": "2020-03-02T14:00:05.402Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-email", + "homepage": "https://github.com/eddyverbruggen/nativescript-email", + "repository": "https://github.com/EddyVerbruggen/nativescript-email", + "bugs": "https://github.com/eddyverbruggen/nativescript-email/issues" + }, + "author": { + "name": "Eddy Verbruggen", + "username": "eddyverbruggen" + }, + "publisher": { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + "maintainers": [ + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + } + ], "downloadStats": { "lastDay": 10, - "lastWeek": 130, - "lastMonth": 467 + "lastWeek": 58, + "lastMonth": 214 } }, { @@ -20811,8 +20858,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 18, - "lastMonth": 68 + "lastWeek": 4, + "lastMonth": 69 } }, { @@ -20852,9 +20899,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 36, - "lastMonth": 188 + "lastDay": 18, + "lastWeek": 49, + "lastMonth": 194 } }, { @@ -20918,9 +20965,9 @@ } ], "downloadStats": { - "lastDay": 26, - "lastWeek": 349, - "lastMonth": 1479 + "lastDay": 13, + "lastWeek": 325, + "lastMonth": 1425 } }, { @@ -20968,9 +21015,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 60, - "lastMonth": 265 + "lastDay": 6, + "lastWeek": 55, + "lastMonth": 263 } }, { @@ -21014,9 +21061,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 83, - "lastMonth": 548 + "lastDay": 26, + "lastWeek": 87, + "lastMonth": 546 } }, { @@ -21061,7 +21108,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 10, - "lastMonth": 80 + "lastMonth": 79 } }, { @@ -21102,9 +21149,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 11, - "lastMonth": 36 + "lastDay": 0, + "lastWeek": 9, + "lastMonth": 35 } }, { @@ -21146,7 +21193,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 8, + "lastWeek": 7, "lastMonth": 29 } }, @@ -21185,9 +21232,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 7, + "lastWeek": 28, + "lastMonth": 108 } }, { @@ -21226,6 +21273,48 @@ "email": "eddyverbruggen@gmail.com" } ], + "downloadStats": { + "lastDay": 3, + "lastWeek": 8, + "lastMonth": 103 + } + }, + { + "name": "nativescript-insomnia", + "scope": "unscoped", + "version": "2.0.0", + "description": "Make the screen not dim (and eventually lock the device) while Insomnia is active", + "keywords": [ + "NativeScript", + "Insomnia", + "Screen dim", + "dim", + "lock", + "sleep", + "nativescript", + "insomnia" + ], + "date": "2020-09-16T07:19:58.866Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-insomnia", + "homepage": "https://github.com/eddyverbruggen/nativescript-insomnia", + "repository": "https://github.com/eddyverbruggen/nativescript-insomnia", + "bugs": "https://github.com/eddyverbruggen/nativescript-insomnia/issues" + }, + "author": { + "name": "Eddy Verbruggen", + "username": "eddyverbruggen" + }, + "publisher": { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + "maintainers": [ + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + } + ], "downloadStats": { "lastDay": 0, "lastWeek": 0, @@ -22724,9 +22813,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 77, + "lastWeek": 509, + "lastMonth": 2183 } }, { @@ -24130,10 +24219,10 @@ "username": "essent", "plugins": [ { - "name": "@essent/nativescript-iadvize", + "name": "@essent/nativescript-webview-ext", "scope": "essent", - "version": "2.13.1", - "description": "iAdvize plugin for NativeScript.", + "version": "9.0.1", + "description": "Extended WebView for NativeScript which adds 'x-local' scheme for local-files. events between WebView and native-layer, javascript execution, injecting CSS and JS-files.", "keywords": [ "NativeScript", "JavaScript", @@ -24141,11 +24230,12 @@ "iOS", "Android", "nativescript", - "iadvize" + "webview", + "ext" ], - "date": "2023-10-24T14:21:55.354Z", + "date": "2023-07-05T18:29:35.405Z", "links": { - "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-iadvize", + "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-webview-ext", "homepage": "https://github.com/Essent/nativescript-plugins", "repository": "https://github.com/Essent/nativescript-plugins", "bugs": "https://github.com/Essent/nativescript-plugins/issues" @@ -24155,8 +24245,8 @@ "username": "essent" }, "publisher": { - "username": "cdebruin", - "email": "corne1988@gmail.com" + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" }, "maintainers": [ { @@ -24461,16 +24551,16 @@ } ], "downloadStats": { - "lastDay": 64, - "lastWeek": 211, - "lastMonth": 1435 + "lastDay": 10, + "lastWeek": 57, + "lastMonth": 419 } }, { - "name": "@essent/nativescript-webview-ext", + "name": "@essent/nativescript-appdynamics", "scope": "essent", - "version": "9.0.1", - "description": "Extended WebView for NativeScript which adds 'x-local' scheme for local-files. events between WebView and native-layer, javascript execution, injecting CSS and JS-files.", + "version": "22.8.4", + "description": "Add a plugin description", "keywords": [ "NativeScript", "JavaScript", @@ -24478,12 +24568,11 @@ "iOS", "Android", "nativescript", - "webview", - "ext" + "appdynamics" ], - "date": "2023-07-05T18:29:35.405Z", + "date": "2023-02-01T13:43:07.308Z", "links": { - "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-webview-ext", + "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-appdynamics", "homepage": "https://github.com/Essent/nativescript-plugins", "repository": "https://github.com/Essent/nativescript-plugins", "bugs": "https://github.com/Essent/nativescript-plugins/issues" @@ -24493,8 +24582,8 @@ "username": "essent" }, "publisher": { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" + "username": "cdebruin", + "email": "corne1988@gmail.com" }, "maintainers": [ { @@ -24799,39 +24888,42 @@ } ], "downloadStats": { - "lastDay": 6, - "lastWeek": 48, - "lastMonth": 422 + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 } }, { - "name": "@essent/nativescript-appdynamics", + "name": "@essent/nativescript-adobe-experience-cloud", "scope": "essent", - "version": "22.8.4", - "description": "Add a plugin description", + "version": "3.0.0", + "description": "Nativescript Adobe experience cloud integration plugin", "keywords": [ "NativeScript", "JavaScript", - "TypeScript", - "iOS", "Android", + "iOS", + "Adobe", + "Adobe Mobile SDK", "nativescript", - "appdynamics" + "adobe", + "experience", + "cloud" ], - "date": "2023-02-01T13:43:07.308Z", + "date": "2022-02-10T17:29:39.990Z", "links": { - "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-appdynamics", - "homepage": "https://github.com/Essent/nativescript-plugins", - "repository": "https://github.com/Essent/nativescript-plugins", - "bugs": "https://github.com/Essent/nativescript-plugins/issues" + "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-adobe-experience-cloud", + "homepage": "https://github.com/Essent/nativescript-adobe-marketing-cloud", + "repository": "https://github.com/Essent/nativescript-adobe-marketing-cloud", + "bugs": "https://github.com/Essent/nativescript-adobe-marketing-cloud/issues" }, "author": { "name": "essent", "username": "essent" }, "publisher": { - "username": "cdebruin", - "email": "corne1988@gmail.com" + "username": "natasa", + "email": "n.vukovic@levi9.com" }, "maintainers": [ { @@ -25142,36 +25234,33 @@ } }, { - "name": "@essent/nativescript-adobe-experience-cloud", + "name": "@essent/nativescript-iadvize", "scope": "essent", - "version": "3.0.0", - "description": "Nativescript Adobe experience cloud integration plugin", + "version": "2.13.1", + "description": "iAdvize plugin for NativeScript.", "keywords": [ "NativeScript", "JavaScript", - "Android", + "TypeScript", "iOS", - "Adobe", - "Adobe Mobile SDK", + "Android", "nativescript", - "adobe", - "experience", - "cloud" + "iadvize" ], - "date": "2022-02-10T17:29:39.990Z", + "date": "2023-10-24T14:21:55.354Z", "links": { - "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-adobe-experience-cloud", - "homepage": "https://github.com/Essent/nativescript-adobe-marketing-cloud", - "repository": "https://github.com/Essent/nativescript-adobe-marketing-cloud", - "bugs": "https://github.com/Essent/nativescript-adobe-marketing-cloud/issues" + "npm": "https://www.npmjs.com/package/%40essent%2Fnativescript-iadvize", + "homepage": "https://github.com/Essent/nativescript-plugins", + "repository": "https://github.com/Essent/nativescript-plugins", + "bugs": "https://github.com/Essent/nativescript-plugins/issues" }, "author": { "name": "essent", "username": "essent" }, "publisher": { - "username": "natasa", - "email": "n.vukovic@levi9.com" + "username": "cdebruin", + "email": "corne1988@gmail.com" }, "maintainers": [ { @@ -30912,9 +31001,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 113, - "lastMonth": 924 + "lastDay": 7, + "lastWeek": 118, + "lastMonth": 926 } }, { @@ -32091,9 +32180,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 2, - "lastMonth": 41 + "lastMonth": 40 } }, { @@ -33056,9 +33145,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 3, - "lastMonth": 106 + "lastMonth": 95 } }, { @@ -33182,7 +33271,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 1, - "lastMonth": 0 + "lastMonth": 24 } }, { @@ -33480,8 +33569,8 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 48, + "lastDay": 0, + "lastWeek": 42, "lastMonth": 152 } } @@ -33973,9 +34062,9 @@ } ], "downloadStats": { - "lastDay": 33, - "lastWeek": 270, - "lastMonth": 1337 + "lastDay": 24, + "lastWeek": 259, + "lastMonth": 1294 } }, { @@ -34653,9 +34742,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 7, + "lastWeek": 27, + "lastMonth": 210 } }, { @@ -34799,8 +34888,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, - "lastMonth": 24 + "lastWeek": 2, + "lastMonth": 22 } }, { @@ -35481,8 +35570,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 31 } }, { @@ -35781,9 +35870,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 50, - "lastMonth": 151 + "lastDay": 1, + "lastWeek": 51, + "lastMonth": 152 } }, { @@ -36593,7 +36682,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 5, - "lastMonth": 157 + "lastMonth": 156 } }, { @@ -36895,9 +36984,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 11, - "lastMonth": 30 + "lastDay": 3, + "lastWeek": 3, + "lastMonth": 33 } }, { @@ -37073,13 +37162,13 @@ "username": "infinitebrahmanuniverse", "plugins": [ { - "name": "@infinitebrahmanuniverse/nolb-nativescript-c", + "name": "@infinitebrahmanuniverse/nolb-nativescript-a", "scope": "infinitebrahmanuniverse", "version": "2023.1.28", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-29T18:48:27.638Z", + "date": "2023-01-29T18:48:36.531Z", "links": { - "npm": "https://www.npmjs.com/package/%40infinitebrahmanuniverse%2Fnolb-nativescript-c" + "npm": "https://www.npmjs.com/package/%40infinitebrahmanuniverse%2Fnolb-nativescript-a" }, "publisher": { "username": "infinitebrahmanuniverse", @@ -37094,7 +37183,7 @@ "keywords": [ "nolb", "nativescript", - "c" + "a" ], "author": { "name": "infinitebrahmanuniverse", @@ -37107,13 +37196,13 @@ } }, { - "name": "@infinitebrahmanuniverse/nolb-nativescript-a", + "name": "@infinitebrahmanuniverse/nolb-nativescript-c", "scope": "infinitebrahmanuniverse", "version": "2023.1.28", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-29T18:48:36.531Z", + "date": "2023-01-29T18:48:27.638Z", "links": { - "npm": "https://www.npmjs.com/package/%40infinitebrahmanuniverse%2Fnolb-nativescript-a" + "npm": "https://www.npmjs.com/package/%40infinitebrahmanuniverse%2Fnolb-nativescript-c" }, "publisher": { "username": "infinitebrahmanuniverse", @@ -37128,7 +37217,7 @@ "keywords": [ "nolb", "nativescript", - "a" + "c" ], "author": { "name": "infinitebrahmanuniverse", @@ -38316,7 +38405,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 7 } } @@ -39099,8 +39188,8 @@ }, "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 17 } } ] @@ -39285,8 +39374,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 20, + "lastMonth": 60 } } ] @@ -40264,6 +40353,52 @@ } ] }, + { + "name": "jorwoody", + "username": "jorwoody", + "plugins": [ + { + "name": "@jorwoody/nativescript-contacts", + "scope": "jorwoody", + "version": "1.1.0", + "description": "A temporary fork of 'nativescript-contacts' plugin by Ryan Lebel. Allows adding of contacts without 'Account' on Android.", + "keywords": [ + "NativeScript", + "Contacts", + "Address Book", + "Contact Directory", + "nativescript", + "contacts" + ], + "date": "2019-04-08T15:36:16.662Z", + "links": { + "npm": "https://www.npmjs.com/package/%40jorwoody%2Fnativescript-contacts", + "homepage": "https://github.com/jorwoody/nativescript-contacts", + "repository": "https://github.com/jorwoody/nativescript-contacts", + "bugs": "https://github.com/jorwoody/nativescript-contacts/issues" + }, + "author": { + "name": "jorwoody", + "username": "jorwoody" + }, + "publisher": { + "username": "jorwoody", + "email": "jordan.wood@johnstongroup.ca" + }, + "maintainers": [ + { + "username": "jorwoody", + "email": "jordan.wood@johnstongroup.ca" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + } + ] + }, { "name": "Josh Sommer", "username": "joshdsommer", @@ -40303,9 +40438,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 54, - "lastMonth": 109 + "lastDay": 7, + "lastWeek": 50, + "lastMonth": 115 } }, { @@ -40357,7 +40492,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 52, - "lastMonth": 171 + "lastMonth": 169 } }, { @@ -40401,7 +40536,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 29, + "lastWeek": 26, "lastMonth": 78 } }, @@ -41867,9 +42002,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 2, - "lastMonth": 149 + "lastMonth": 140 } }, { @@ -41908,9 +42043,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 9, + "lastWeek": 18, + "lastMonth": 181 } }, { @@ -42175,9 +42310,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 129, - "lastMonth": 1341 + "lastDay": 28, + "lastWeek": 137, + "lastMonth": 1296 } }, { @@ -42667,8 +42802,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 9, + "lastMonth": 20 } } ] @@ -43207,9 +43342,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 15, - "lastMonth": 71 + "lastDay": 4, + "lastWeek": 17, + "lastMonth": 72 } }, { @@ -44180,8 +44315,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 55 } } ] @@ -44478,7 +44613,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 4, "lastMonth": 19 } @@ -44516,7 +44651,7 @@ } ], "downloadStats": { - "lastDay": 3, + "lastDay": 0, "lastWeek": 18, "lastMonth": 49 } @@ -44559,8 +44694,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 13 } } ] @@ -44616,48 +44751,6 @@ "name": "luciditysoftware", "username": "luciditysoftware", "plugins": [ - { - "name": "nativescript-acs-bluetooth", - "scope": "unscoped", - "version": "2.2.9", - "description": "NativeScript ASB bluetooth card reader interface", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "ACS", - "Bluetooth", - "nativescript", - "acs", - "bluetooth" - ], - "date": "2020-03-06T01:18:30.316Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-acs-bluetooth", - "homepage": "https://github.com/luciditysoftware/ACSBluetooth", - "repository": "https://github.com/luciditysoftware/ACSBluetooth", - "bugs": "https://github.com/luciditysoftware/ACSBluetooth/issues" - }, - "author": { - "name": "luciditysoftware", - "username": "luciditysoftware" - }, - "publisher": { - "username": "luciditysoftware", - "email": "software@luciditysoftware.com.au" - }, - "maintainers": [ - { - "username": "luciditysoftware", - "email": "software@luciditysoftware.com.au" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-acs-usb", "scope": "unscoped", @@ -45623,9 +45716,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 18, + "lastWeek": 179, + "lastMonth": 684 } } ] @@ -45760,9 +45853,9 @@ } ], "downloadStats": { - "lastDay": 19, - "lastWeek": 78, - "lastMonth": 394 + "lastDay": 37, + "lastWeek": 113, + "lastMonth": 418 } }, { @@ -45809,7 +45902,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 16, - "lastMonth": 90 + "lastMonth": 91 } }, { @@ -45854,9 +45947,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 103 } } ] @@ -47316,55 +47409,6 @@ } ] }, - { - "name": "matty0005", - "username": "matty0005", - "plugins": [ - { - "name": "@matty0005/nativescript-camera-plus", - "scope": "matty0005", - "version": "4.1.3", - "description": "An advanced, embeddable camera for NativeScript.", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "iOS", - "Camera", - "Camera Plus", - "nativescript", - "camera", - "plus" - ], - "date": "2022-05-26T02:48:15.708Z", - "links": { - "npm": "https://www.npmjs.com/package/%40matty0005%2Fnativescript-camera-plus", - "homepage": "https://github.com/matty0005/nativescript-plugins", - "repository": "https://github.com/matty0005/nativescript-plugins", - "bugs": "https://github.com/matty0005/nativescript-plugins/issues" - }, - "author": { - "name": "matty0005", - "username": "matty0005" - }, - "publisher": { - "username": "matty0005", - "email": "matt@matthewgilpin.com" - }, - "maintainers": [ - { - "username": "matty0005", - "email": "matt@matthewgilpin.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - } - ] - }, { "name": "Massimiliano Baki", "username": "maxbaki", @@ -48671,9 +48715,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 28, + "lastMonth": 125 } } ] @@ -48782,52 +48826,6 @@ } ] }, - { - "name": "mikykonst", - "username": "mikykonst", - "plugins": [ - { - "name": "nativescript-appurl-handler", - "scope": "unscoped", - "version": "1.6.1", - "description": "Register custom URLs for your NativeScript app (IOS fix included)", - "keywords": [ - "NativeScript", - "URL-Handler", - "Deep links", - "nativescript", - "appurl", - "handler" - ], - "date": "2020-08-13T18:29:41.549Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-appurl-handler", - "homepage": "https://github.com/mikykonst/nativescript-appurl-handler", - "repository": "https://github.com/mikykonst/nativescript-appurl-handler", - "bugs": "https://github.com/mikykonst/nativescript-appurl-handler/issues" - }, - "author": { - "name": "mikykonst", - "username": "mikykonst" - }, - "publisher": { - "username": "mikykonst", - "email": "mikykonst66@gmail.com" - }, - "maintainers": [ - { - "username": "mikykonst", - "email": "mikykonst66@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - } - ] - }, { "name": "milad.sadinam", "username": "milad.sadinam", @@ -49055,9 +49053,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 123, - "lastMonth": 379 + "lastDay": 5, + "lastWeek": 118, + "lastMonth": 374 } }, { @@ -49158,7 +49156,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 61, + "lastWeek": 60, "lastMonth": 190 } }, @@ -49205,8 +49203,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 10, + "lastMonth": 45 } }, { @@ -49245,9 +49243,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 32, + "lastMonth": 100 } }, { @@ -49288,8 +49286,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 23 } }, { @@ -49757,9 +49755,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 6, + "lastMonth": 130 } }, { @@ -49800,8 +49798,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 24, + "lastMonth": 76 } }, { @@ -50444,8 +50442,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 40, + "lastMonth": 127 } }, { @@ -50915,9 +50913,9 @@ } ], "downloadStats": { - "lastDay": 260, - "lastWeek": 1358, - "lastMonth": 5340 + "lastDay": 109, + "lastWeek": 1260, + "lastMonth": 5253 } } ] @@ -52977,9 +52975,9 @@ } ], "downloadStats": { - "lastDay": 105, - "lastWeek": 626, - "lastMonth": 1793 + "lastDay": 151, + "lastWeek": 705, + "lastMonth": 1868 } }, { @@ -53271,9 +53269,9 @@ } ], "downloadStats": { - "lastDay": 503, - "lastWeek": 4557, - "lastMonth": 28346 + "lastDay": 2288, + "lastWeek": 5111, + "lastMonth": 30133 } }, { @@ -53341,9 +53339,9 @@ } ], "downloadStats": { - "lastDay": 374, - "lastWeek": 1438, - "lastMonth": 6999 + "lastDay": 84, + "lastWeek": 1348, + "lastMonth": 6909 } }, { @@ -53450,9 +53448,9 @@ } ], "downloadStats": { - "lastDay": 364, - "lastWeek": 1778, - "lastMonth": 8118 + "lastDay": 167, + "lastWeek": 1694, + "lastMonth": 7985 } }, { @@ -53522,9 +53520,9 @@ } ], "downloadStats": { - "lastDay": 373, - "lastWeek": 1424, - "lastMonth": 6962 + "lastDay": 70, + "lastWeek": 1317, + "lastMonth": 6857 } }, { @@ -53595,9 +53593,9 @@ } ], "downloadStats": { - "lastDay": 539, - "lastWeek": 2152, - "lastMonth": 10485 + "lastDay": 246, + "lastWeek": 2110, + "lastMonth": 10363 } }, { @@ -53673,9 +53671,9 @@ } ], "downloadStats": { - "lastDay": 462, - "lastWeek": 2073, - "lastMonth": 8284 + "lastDay": 240, + "lastWeek": 1988, + "lastMonth": 8113 } }, { @@ -53751,9 +53749,9 @@ } ], "downloadStats": { - "lastDay": 258, - "lastWeek": 1398, - "lastMonth": 5681 + "lastDay": 252, + "lastWeek": 1414, + "lastMonth": 5651 } }, { @@ -53821,31 +53819,27 @@ } ], "downloadStats": { - "lastDay": 283, - "lastWeek": 1356, - "lastMonth": 6157 + "lastDay": 107, + "lastWeek": 1242, + "lastMonth": 6027 } }, { - "name": "@nativescript/local-notifications", + "name": "@nativescript/angular", "scope": "nativescript", - "version": "6.1.1", - "description": "The Local Notifications plugin allows your app to show notifications when the app is not running.", + "version": "16.0.1", + "description": "For usage with NativeScript for Angular 12+ (13, etc.) projects.", "keywords": [ - "ecosystem:NativeScript", "NativeScript", - "Alarm", - "Notification", - "Local Notification", - "local", - "notifications" + "Angular", + "angular" ], - "date": "2023-04-10T17:12:55.115Z", + "date": "2023-10-10T15:38:05.322Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Flocal-notifications", - "homepage": "https://github.com/nativescript/plugins", - "repository": "https://github.com/NativeScript/plugins/tree/master", - "bugs": "https://github.com/nativescript/plugins/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Fangular", + "homepage": "https://nativescript.org/", + "repository": "https://github.com/NativeScript/angular", + "bugs": "https://github.com/NativeScript/angular/issues" }, "author": { "name": "NativeScript Team", @@ -53855,6 +53849,70 @@ "username": "nativescript-bot", "email": "oss@nativescript.org" }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + } + ], + "downloadStats": { + "lastDay": 360, + "lastWeek": 2583, + "lastMonth": 13357 + } + }, + { + "name": "@nativescript/types", + "scope": "nativescript", + "version": "8.6.1", + "description": "NativeScript Types for all supported platforms.", + "date": "2023-10-09T19:32:17.213Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript%2Ftypes", + "homepage": "https://nativescript.org", + "repository": "https://github.com/NativeScript/NativeScript", + "bugs": "https://github.com/NativeScript/NativeScript/issues" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, "maintainers": [ { "username": "nativescript-user", @@ -53929,28 +53987,38 @@ "email": "stanimira.vlaeva@gmail.com" } ], + "keywords": [ + "types" + ], + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, "downloadStats": { - "lastDay": 228, - "lastWeek": 1100, - "lastMonth": 4970 + "lastDay": 622, + "lastWeek": 3767, + "lastMonth": 15376 } }, { - "name": "@nativescript/angular", + "name": "@nativescript/core", "scope": "nativescript", - "version": "16.0.1", - "description": "For usage with NativeScript for Angular 12+ (13, etc.) projects.", + "version": "8.6.0", + "description": "A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.", "keywords": [ "NativeScript", - "Angular", - "angular" + "JavaScript", + "Android", + "iOS", + "TypeScript", + "core" ], - "date": "2023-10-10T15:38:05.322Z", + "date": "2023-10-10T18:56:34.047Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fangular", - "homepage": "https://nativescript.org/", - "repository": "https://github.com/NativeScript/angular", - "bugs": "https://github.com/NativeScript/angular/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Fcore", + "homepage": "https://nativescript.org", + "repository": "https://github.com/NativeScript/NativeScript", + "bugs": "https://github.com/NativeScript/NativeScript/issues" }, "author": { "name": "NativeScript Team", @@ -54003,44 +54071,36 @@ } ], "downloadStats": { - "lastDay": 572, - "lastWeek": 2621, - "lastMonth": 13469 + "lastDay": 1104, + "lastWeek": 7403, + "lastMonth": 50837 } }, { - "name": "@nativescript/types", - "scope": "nativescript", - "version": "8.6.1", - "description": "NativeScript Types for all supported platforms.", - "date": "2023-10-09T19:32:17.213Z", + "name": "nativescript-theme-core", + "scope": "unscoped", + "version": "2.0.24", + "description": "Telerik NativeScript Core Theme", + "date": "2019-10-10T13:30:20.636Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ftypes", - "homepage": "https://nativescript.org", - "repository": "https://github.com/NativeScript/NativeScript", - "bugs": "https://github.com/NativeScript/NativeScript/issues" + "npm": "https://www.npmjs.com/package/nativescript-theme-core", + "homepage": "https://www.nativescript.org", + "repository": "https://github.com/NativeScript/theme", + "bugs": "https://github.com/NativeScript/theme/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" }, "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" + "username": "tns-bot", + "email": "nativescript@telerik.com" }, "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, { "username": "tns-bot", "email": "nativescript@telerik.com" }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, { "username": "rosen-vladimirov", "email": "vladimirov@progress.com" @@ -54050,21 +54110,13 @@ "email": "s.toskov@gmail.com" }, { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" + "username": "lini", + "email": "bit@gbg.bg" }, { "username": "walkerrunpdx", "email": "walkerrunpdx@gmail.com" }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, { "username": "rigor789", "email": "shout@igor-randjelovic.com" @@ -54074,20 +54126,8 @@ "email": "oss@nativescript.org" }, { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" }, { "username": "tdermendjiev", @@ -54096,40 +54136,47 @@ { "username": "sis0k0", "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "tjvantoll", + "email": "tj.vantoll@gmail.com" + }, + { + "username": "vakrilov", + "email": "alexander.vakrilov@gmail.com" } ], "keywords": [ - "types" + "nativescript", + "theme", + "core" ], - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, "downloadStats": { - "lastDay": 829, - "lastWeek": 3712, - "lastMonth": 15468 + "lastDay": 206, + "lastWeek": 1923, + "lastMonth": 8411 } }, { - "name": "@nativescript/core", + "name": "@nativescript/local-notifications", "scope": "nativescript", - "version": "8.6.0", - "description": "A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.", + "version": "6.1.1", + "description": "The Local Notifications plugin allows your app to show notifications when the app is not running.", "keywords": [ + "ecosystem:NativeScript", "NativeScript", - "JavaScript", - "Android", - "iOS", - "TypeScript", - "core" + "Alarm", + "Notification", + "Local Notification", + "local", + "notifications" ], - "date": "2023-10-10T18:56:34.047Z", + "date": "2023-04-10T17:12:55.115Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fcore", - "homepage": "https://nativescript.org", - "repository": "https://github.com/NativeScript/NativeScript", - "bugs": "https://github.com/NativeScript/NativeScript/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Flocal-notifications", + "homepage": "https://github.com/nativescript/plugins", + "repository": "https://github.com/NativeScript/plugins/tree/master", + "bugs": "https://github.com/nativescript/plugins/issues" }, "author": { "name": "NativeScript Team", @@ -54140,10 +54187,22 @@ "email": "oss@nativescript.org" }, "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, { "username": "tns-bot", "email": "nativescript@telerik.com" }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, { "username": "rosen-vladimirov", "email": "vladimirov@progress.com" @@ -54153,92 +54212,44 @@ "email": "s.toskov@gmail.com" }, { - "username": "lini", - "email": "bit@gbg.bg" + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" }, { "username": "walkerrunpdx", "email": "walkerrunpdx@gmail.com" }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, { "username": "bradmartin", "email": "bradwaynemartin@gmail.com" }, { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 2108, - "lastWeek": 7194, - "lastMonth": 50795 - } - }, - { - "name": "nativescript-theme-core", - "scope": "unscoped", - "version": "2.0.24", - "description": "Telerik NativeScript Core Theme", - "date": "2019-10-10T13:30:20.636Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-theme-core", - "homepage": "https://www.nativescript.org", - "repository": "https://github.com/NativeScript/theme", - "bugs": "https://github.com/NativeScript/theme/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" + "username": "davecoffin", + "email": "dave@davecoffin.com" }, { - "username": "stoskov", - "email": "s.toskov@gmail.com" + "username": "rigor789", + "email": "shout@igor-randjelovic.com" }, { - "username": "lini", - "email": "bit@gbg.bg" + "username": "nativescript-bot", + "email": "oss@nativescript.org" }, { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" + "username": "multishiv19", + "email": "sp@shiv19.com" }, { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" }, { - "username": "nativescript-bot", - "email": "oss@nativescript.org" + "username": "edusperoni", + "email": "edusperoni@gmail.com" }, { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" }, { "username": "tdermendjiev", @@ -54247,25 +54258,12 @@ { "username": "sis0k0", "email": "stanimira.vlaeva@gmail.com" - }, - { - "username": "tjvantoll", - "email": "tj.vantoll@gmail.com" - }, - { - "username": "vakrilov", - "email": "alexander.vakrilov@gmail.com" } ], - "keywords": [ - "nativescript", - "theme", - "core" - ], "downloadStats": { - "lastDay": 457, - "lastWeek": 2012, - "lastMonth": 8616 + "lastDay": 209, + "lastWeek": 1085, + "lastMonth": 4899 } }, { @@ -54371,9 +54369,9 @@ } ], "downloadStats": { - "lastDay": 509, - "lastWeek": 2429, - "lastMonth": 9906 + "lastDay": 219, + "lastWeek": 2284, + "lastMonth": 9759 } }, { @@ -54445,9 +54443,9 @@ } ], "downloadStats": { - "lastDay": 527, - "lastWeek": 2165, - "lastMonth": 10360 + "lastDay": 316, + "lastWeek": 2200, + "lastMonth": 10273 } }, { @@ -54525,9 +54523,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 96, - "lastMonth": 391 + "lastDay": 8, + "lastWeek": 94, + "lastMonth": 364 } }, { @@ -54628,9 +54626,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 935, - "lastWeek": 4064, - "lastMonth": 18447 + "lastDay": 628, + "lastWeek": 4101, + "lastMonth": 18067 } }, { @@ -54699,9 +54697,9 @@ } ], "downloadStats": { - "lastDay": 34, - "lastWeek": 213, - "lastMonth": 1782 + "lastDay": 26, + "lastWeek": 189, + "lastMonth": 1781 } }, { @@ -54808,9 +54806,9 @@ } ], "downloadStats": { - "lastDay": 150, - "lastWeek": 714, - "lastMonth": 2497 + "lastDay": 211, + "lastWeek": 857, + "lastMonth": 2608 } }, { @@ -54922,9 +54920,9 @@ } ], "downloadStats": { - "lastDay": 190, - "lastWeek": 1083, - "lastMonth": 5528 + "lastDay": 204, + "lastWeek": 1087, + "lastMonth": 5493 } }, { @@ -55026,9 +55024,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 835, - "lastWeek": 3726, - "lastMonth": 15552 + "lastDay": 633, + "lastWeek": 3791, + "lastMonth": 15469 } }, { @@ -55130,9 +55128,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 829, - "lastWeek": 3718, - "lastMonth": 15521 + "lastDay": 632, + "lastWeek": 3779, + "lastMonth": 15439 } }, { @@ -55208,9 +55206,9 @@ } ], "downloadStats": { - "lastDay": 772, - "lastWeek": 3465, - "lastMonth": 13730 + "lastDay": 582, + "lastWeek": 3496, + "lastMonth": 13689 } }, { @@ -55281,9 +55279,9 @@ } ], "downloadStats": { - "lastDay": 283, - "lastWeek": 618, - "lastMonth": 5398 + "lastDay": 58, + "lastWeek": 646, + "lastMonth": 5386 } }, { @@ -55396,31 +55394,27 @@ ], "downloadStats": { "lastDay": 9, - "lastWeek": 157, + "lastWeek": 158, "lastMonth": 784 } }, { - "name": "nativescript-ui-calendar", - "scope": "unscoped", - "version": "15.2.3", - "description": "Month, year, week and day views. Single, multiple and range date Selection. Special and disabled dates.", + "name": "@nativescript/capacitor", + "scope": "nativescript", + "version": "5.0.2", + "description": "NativeScript for Capacitor", "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "nativescript", - "ui", - "calendar" + "capacitor", + "plugin", + "native", + "capacitor" ], - "date": "2023-03-28T20:35:33.158Z", + "date": "2023-09-01T04:43:53.901Z", "links": { - "npm": "https://www.npmjs.com/package/nativescript-ui-calendar", - "homepage": "https://github.com/NativeScript/plugins", - "repository": "https://github.com/NativeScript/plugins", - "bugs": "https://github.com/NativeScript/plugins/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Fcapacitor", + "homepage": "https://github.com/NativeScript/capacitor#readme", + "repository": "https://github.com/NativeScript/capacitor", + "bugs": "https://github.com/NativeScript/capacitor/issues" }, "author": { "name": "NativeScript Team", @@ -55431,10 +55425,22 @@ "email": "oss@nativescript.org" }, "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, { "username": "tns-bot", "email": "nativescript@telerik.com" }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, { "username": "rosen-vladimirov", "email": "vladimirov@progress.com" @@ -55444,13 +55450,21 @@ "email": "s.toskov@gmail.com" }, { - "username": "lini", - "email": "bit@gbg.bg" + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" }, { "username": "walkerrunpdx", "email": "walkerrunpdx@gmail.com" }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, { "username": "rigor789", "email": "shout@igor-randjelovic.com" @@ -55460,8 +55474,20 @@ "email": "oss@nativescript.org" }, { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" }, { "username": "tdermendjiev", @@ -55473,28 +55499,32 @@ } ], "downloadStats": { - "lastDay": 246, - "lastWeek": 1137, - "lastMonth": 4355 + "lastDay": 44, + "lastWeek": 467, + "lastMonth": 2483 } }, { - "name": "@nativescript/capacitor", - "scope": "nativescript", - "version": "5.0.2", - "description": "NativeScript for Capacitor", + "name": "nativescript-ui-calendar", + "scope": "unscoped", + "version": "15.2.3", + "description": "Month, year, week and day views. Single, multiple and range date Selection. Special and disabled dates.", "keywords": [ - "capacitor", - "plugin", - "native", - "capacitor" + "NativeScript", + "JavaScript", + "TypeScript", + "iOS", + "Android", + "nativescript", + "ui", + "calendar" ], - "date": "2023-09-01T04:43:53.901Z", + "date": "2023-03-28T20:35:33.158Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fcapacitor", - "homepage": "https://github.com/NativeScript/capacitor#readme", - "repository": "https://github.com/NativeScript/capacitor", - "bugs": "https://github.com/NativeScript/capacitor/issues" + "npm": "https://www.npmjs.com/package/nativescript-ui-calendar", + "homepage": "https://github.com/NativeScript/plugins", + "repository": "https://github.com/NativeScript/plugins", + "bugs": "https://github.com/NativeScript/plugins/issues" }, "author": { "name": "NativeScript Team", @@ -55505,22 +55535,10 @@ "email": "oss@nativescript.org" }, "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, { "username": "tns-bot", "email": "nativescript@telerik.com" }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, { "username": "rosen-vladimirov", "email": "vladimirov@progress.com" @@ -55530,21 +55548,13 @@ "email": "s.toskov@gmail.com" }, { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" + "username": "lini", + "email": "bit@gbg.bg" }, { "username": "walkerrunpdx", "email": "walkerrunpdx@gmail.com" }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, { "username": "rigor789", "email": "shout@igor-randjelovic.com" @@ -55554,20 +55564,8 @@ "email": "oss@nativescript.org" }, { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" }, { "username": "tdermendjiev", @@ -55579,9 +55577,9 @@ } ], "downloadStats": { - "lastDay": 240, - "lastWeek": 482, - "lastMonth": 2488 + "lastDay": 108, + "lastWeek": 1106, + "lastMonth": 4295 } }, { @@ -55708,9 +55706,9 @@ } ], "downloadStats": { - "lastDay": 204, - "lastWeek": 1217, - "lastMonth": 7185 + "lastDay": 229, + "lastWeek": 1219, + "lastMonth": 7121 } }, { @@ -55821,9 +55819,9 @@ } ], "downloadStats": { - "lastDay": 141, - "lastWeek": 714, - "lastMonth": 5047 + "lastDay": 156, + "lastWeek": 749, + "lastMonth": 4994 } }, { @@ -55930,9 +55928,9 @@ } ], "downloadStats": { - "lastDay": 199, - "lastWeek": 1038, - "lastMonth": 4397 + "lastDay": 63, + "lastWeek": 942, + "lastMonth": 4272 } }, { @@ -56042,9 +56040,9 @@ } ], "downloadStats": { - "lastDay": 194, - "lastWeek": 950, - "lastMonth": 3933 + "lastDay": 81, + "lastWeek": 893, + "lastMonth": 3852 } }, { @@ -56115,9 +56113,9 @@ } ], "downloadStats": { - "lastDay": 246, - "lastWeek": 1043, - "lastMonth": 4545 + "lastDay": 73, + "lastWeek": 947, + "lastMonth": 4420 } }, { @@ -56231,9 +56229,9 @@ } ], "downloadStats": { - "lastDay": 55, - "lastWeek": 372, - "lastMonth": 3102 + "lastDay": 67, + "lastWeek": 368, + "lastMonth": 3083 } }, { @@ -56311,46 +56309,143 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 128, - "lastMonth": 537 + "lastDay": 10, + "lastWeek": 120, + "lastMonth": 516 + } + }, + { + "name": "nativescript-background-http", + "scope": "unscoped", + "version": "4.2.1", + "description": "A cross platform plugin for [the NativeScript framework](http://www.nativescript.org), that provides background upload for iOS and Android.", + "keywords": [ + "background", + "http", + "upload", + "download", + "NativeScript", + "nativescript", + "background", + "http" + ], + "date": "2019-11-01T10:49:56.184Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-background-http", + "homepage": "https://github.com/NativeScript/nativescript-background-http/issues", + "repository": "https://github.com/NativeScript/nativescript-background-http", + "bugs": "https://github.com/NativeScript/nativescript-background-http/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "panayot.cankov", + "email": "panayot.cankov@telerik.com" + } + ], + "downloadStats": { + "lastDay": 4, + "lastWeek": 46, + "lastMonth": 324 } }, { - "name": "nativescript-background-http", - "scope": "unscoped", - "version": "4.2.1", - "description": "A cross platform plugin for [the NativeScript framework](http://www.nativescript.org), that provides background upload for iOS and Android.", + "name": "@nativescript/firebase-performance", + "scope": "nativescript", + "version": "3.2.0", + "description": "NativeScript Firebase - Performancee", "keywords": [ - "background", - "http", - "upload", - "download", "NativeScript", - "nativescript", - "background", - "http" + "JavaScript", + "TypeScript", + "iOS", + "Android", + "Firebase", + "Performance", + "Monitoring", + "Tracking", + "firebase", + "performance" ], - "date": "2019-11-01T10:49:56.184Z", + "date": "2023-09-24T03:32:52.660Z", "links": { - "npm": "https://www.npmjs.com/package/nativescript-background-http", - "homepage": "https://github.com/NativeScript/nativescript-background-http/issues", - "repository": "https://github.com/NativeScript/nativescript-background-http", - "bugs": "https://github.com/NativeScript/nativescript-background-http/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-performance", + "homepage": "https://github.com/NativeScript/firebase", + "repository": "https://github.com/NativeScript/firebase", + "bugs": "https://github.com/NativeScript/firebase/issues" }, "author": { "name": "NativeScript Team", "username": "nativescript" }, "publisher": { - "username": "tns-bot", - "email": "nativescript@telerik.com" + "username": "nativescript-bot", + "email": "oss@nativescript.org" }, "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, { "username": "tns-bot", "email": "nativescript@telerik.com" }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, { "username": "rosen-vladimirov", "email": "vladimirov@progress.com" @@ -56360,13 +56455,21 @@ "email": "s.toskov@gmail.com" }, { - "username": "lini", - "email": "bit@gbg.bg" + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" }, { "username": "walkerrunpdx", "email": "walkerrunpdx@gmail.com" }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, { "username": "rigor789", "email": "shout@igor-randjelovic.com" @@ -56376,8 +56479,20 @@ "email": "oss@nativescript.org" }, { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" }, { "username": "tdermendjiev", @@ -56386,23 +56501,19 @@ { "username": "sis0k0", "email": "stanimira.vlaeva@gmail.com" - }, - { - "username": "panayot.cankov", - "email": "panayot.cankov@telerik.com" } ], "downloadStats": { - "lastDay": 4, - "lastWeek": 50, - "lastMonth": 329 + "lastDay": 28, + "lastWeek": 121, + "lastMonth": 2000 } }, { - "name": "@nativescript/firebase-performance", + "name": "@nativescript/firebase-firestore", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Performancee", + "description": "NativeScript Firebase - Firestore", "keywords": [ "NativeScript", "JavaScript", @@ -56410,15 +56521,21 @@ "iOS", "Android", "Firebase", - "Performance", - "Monitoring", - "Tracking", + "Firestore", + "Database", + "Realtime", + "Offline", + "NoSQL", + "Query", + "Sync", + "Document", + "Collection", "firebase", - "performance" + "firestore" ], - "date": "2023-09-24T03:32:52.660Z", + "date": "2023-09-24T03:32:37.157Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-performance", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-firestore", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -56506,16 +56623,16 @@ } ], "downloadStats": { - "lastDay": 34, - "lastWeek": 104, - "lastMonth": 2003 + "lastDay": 23, + "lastWeek": 53, + "lastMonth": 1897 } }, { - "name": "@nativescript/firebase-firestore", + "name": "@nativescript/firebase-installations", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Firestore", + "description": "NativeScript Firebase - Installations", "keywords": [ "NativeScript", "JavaScript", @@ -56523,21 +56640,13 @@ "iOS", "Android", "Firebase", - "Firestore", - "Database", - "Realtime", - "Offline", - "NoSQL", - "Query", - "Sync", - "Document", - "Collection", + "Installations", "firebase", - "firestore" + "installations" ], - "date": "2023-09-24T03:32:37.157Z", + "date": "2023-09-24T03:32:44.404Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-firestore", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-installations", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -56625,16 +56734,16 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 44, - "lastMonth": 1893 + "lastDay": 6, + "lastWeek": 21, + "lastMonth": 1690 } }, { - "name": "@nativescript/firebase-installations", + "name": "@nativescript/firebase-admob", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Installations", + "description": "NativeScript Firebase - Admob", "keywords": [ "NativeScript", "JavaScript", @@ -56642,13 +56751,14 @@ "iOS", "Android", "Firebase", - "Installations", + "Ads", + "AdMob", "firebase", - "installations" + "admob" ], - "date": "2023-09-24T03:32:44.404Z", + "date": "2023-09-24T03:32:14.511Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-installations", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-admob", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -56736,34 +56846,113 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 18, - "lastMonth": 1711 + "lastDay": 10, + "lastWeek": 20, + "lastMonth": 1760 } }, { - "name": "@nativescript/firebase-admob", - "scope": "nativescript", - "version": "3.2.0", - "description": "NativeScript Firebase - Admob", + "name": "nativescript-ui-dataform", + "scope": "unscoped", + "version": "15.2.3", + "description": "Display and edit data object's properties with standard or custom editors in a data fill-in form.", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "Firebase", - "Ads", - "AdMob", - "firebase", - "admob" + "nativescript", + "ui", + "dataform" ], - "date": "2023-09-24T03:32:14.511Z", + "date": "2023-03-28T20:35:51.583Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-admob", - "homepage": "https://github.com/NativeScript/firebase", - "repository": "https://github.com/NativeScript/firebase", - "bugs": "https://github.com/NativeScript/firebase/issues" + "npm": "https://www.npmjs.com/package/nativescript-ui-dataform", + "homepage": "https://github.com/NativeScript/plugins", + "repository": "https://github.com/NativeScript/plugins", + "bugs": "https://github.com/NativeScript/plugins/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + } + ], + "downloadStats": { + "lastDay": 7, + "lastWeek": 102, + "lastMonth": 474 + } + }, + { + "name": "@nativescript/template-blank-ng", + "scope": "nativescript", + "version": "8.6.0", + "description": "Blank template for NativeScript apps using Angular", + "keywords": [ + "nstudio", + "nativescript", + "mobile", + "angular", + "{N}", + "tns", + "template", + "category-general", + "template", + "blank", + "ng" + ], + "date": "2023-10-10T19:04:34.772Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript%2Ftemplate-blank-ng", + "homepage": "https://github.com/NativeScript/nativescript-app-templates", + "repository": "https://github.com/NativeScript/nativescript-app-templates", + "bugs": "https://github.com/NativeScript/NativeScript/issues" }, "author": { "name": "NativeScript Team", @@ -56848,16 +57037,16 @@ } ], "downloadStats": { - "lastDay": 4, - "lastWeek": 11, - "lastMonth": 1761 + "lastDay": 0, + "lastWeek": 5, + "lastMonth": 597 } }, { - "name": "nativescript-ui-dataform", + "name": "nativescript-ui-autocomplete", "scope": "unscoped", "version": "15.2.3", - "description": "Display and edit data object's properties with standard or custom editors in a data fill-in form.", + "description": "Improve data entry speed and accuracy by triggering auto-completion for text entries.", "keywords": [ "NativeScript", "JavaScript", @@ -56866,11 +57055,11 @@ "Android", "nativescript", "ui", - "dataform" + "autocomplete" ], - "date": "2023-03-28T20:35:51.583Z", + "date": "2023-03-28T20:35:27.386Z", "links": { - "npm": "https://www.npmjs.com/package/nativescript-ui-dataform", + "npm": "https://www.npmjs.com/package/nativescript-ui-autocomplete", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -56926,35 +57115,34 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 104, - "lastMonth": 486 + "lastDay": 17, + "lastWeek": 196, + "lastMonth": 962 } }, { - "name": "@nativescript/template-blank-ng", + "name": "@nativescript/firebase-functions", "scope": "nativescript", - "version": "8.6.0", - "description": "Blank template for NativeScript apps using Angular", + "version": "3.2.0", + "description": "NativeScript Firebase - Functions", "keywords": [ - "nstudio", - "nativescript", - "mobile", - "angular", - "{N}", - "tns", - "template", - "category-general", - "template", - "blank", - "ng" + "NativeScript", + "JavaScript", + "TypeScript", + "iOS", + "Android", + "Firebase", + "Cloud Functions", + "Functions", + "firebase", + "functions" ], - "date": "2023-10-10T19:04:34.772Z", + "date": "2023-09-24T03:32:39.596Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ftemplate-blank-ng", - "homepage": "https://github.com/NativeScript/nativescript-app-templates", - "repository": "https://github.com/NativeScript/nativescript-app-templates", - "bugs": "https://github.com/NativeScript/NativeScript/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-functions", + "homepage": "https://github.com/NativeScript/firebase", + "repository": "https://github.com/NativeScript/firebase", + "bugs": "https://github.com/NativeScript/firebase/issues" }, "author": { "name": "NativeScript Team", @@ -57039,94 +57227,16 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 6, - "lastMonth": 598 - } - }, - { - "name": "nativescript-ui-autocomplete", - "scope": "unscoped", - "version": "15.2.3", - "description": "Improve data entry speed and accuracy by triggering auto-completion for text entries.", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "nativescript", - "ui", - "autocomplete" - ], - "date": "2023-03-28T20:35:27.386Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-ui-autocomplete", - "homepage": "https://github.com/NativeScript/plugins", - "repository": "https://github.com/NativeScript/plugins", - "bugs": "https://github.com/NativeScript/plugins/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 26, - "lastWeek": 211, - "lastMonth": 1004 + "lastDay": 5, + "lastWeek": 9, + "lastMonth": 1585 } }, { - "name": "@nativescript/firebase-functions", + "name": "@nativescript/firebase-dynamic-links", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Functions", + "description": "NativeScript Firebase - Dynamic Links", "keywords": [ "NativeScript", "JavaScript", @@ -57134,14 +57244,16 @@ "iOS", "Android", "Firebase", - "Cloud Functions", - "Functions", + "Dynamic Links", + "Deep Links", + "Routing", "firebase", - "functions" + "dynamic", + "links" ], - "date": "2023-09-24T03:32:39.596Z", + "date": "2023-09-24T03:32:34.529Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-functions", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-dynamic-links", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -57229,16 +57341,16 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 9, - "lastMonth": 1586 + "lastDay": 24, + "lastWeek": 235, + "lastMonth": 2641 } }, { - "name": "@nativescript/firebase-dynamic-links", + "name": "@nativescript/firebase-storage", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Dynamic Links", + "description": "NativeScript Firebase - Storage", "keywords": [ "NativeScript", "JavaScript", @@ -57246,16 +57358,23 @@ "iOS", "Android", "Firebase", - "Dynamic Links", - "Deep Links", - "Routing", + "File", + "Storage", + "Cloud", + "Server", + "Object Storage", + "Upload", + "Download", + "Image", + "Audio", + "Video", + "Files", "firebase", - "dynamic", - "links" + "storage" ], - "date": "2023-09-24T03:32:34.529Z", + "date": "2023-09-24T03:32:57.413Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-dynamic-links", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-storage", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -57343,16 +57462,16 @@ } ], "downloadStats": { - "lastDay": 40, - "lastWeek": 246, - "lastMonth": 2715 + "lastDay": 6, + "lastWeek": 14, + "lastMonth": 1863 } }, { - "name": "@nativescript/firebase-storage", + "name": "@nativescript/firebase-database", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Storage", + "description": "NativeScript Firebase - Database", "keywords": [ "NativeScript", "JavaScript", @@ -57360,23 +57479,18 @@ "iOS", "Android", "Firebase", - "File", - "Storage", - "Cloud", - "Server", - "Object Storage", - "Upload", - "Download", - "Image", - "Audio", - "Video", - "Files", + "Database", + "Realtime", + "Offline", + "NoSQL", + "Query", + "Sync", "firebase", - "storage" + "database" ], - "date": "2023-09-24T03:32:57.413Z", + "date": "2023-09-24T03:32:31.934Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-storage", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-database", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -57464,16 +57578,16 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 14, - "lastMonth": 1876 + "lastDay": 6, + "lastWeek": 13, + "lastMonth": 1619 } }, { - "name": "@nativescript/firebase-database", + "name": "@nativescript/firebase-auth", "scope": "nativescript", "version": "3.2.0", - "description": "NativeScript Firebase - Database", + "description": "NativeScript Firebase - Auth", "keywords": [ "NativeScript", "JavaScript", @@ -57481,18 +57595,25 @@ "iOS", "Android", "Firebase", - "Database", - "Realtime", - "Offline", - "NoSQL", - "Query", - "Sync", + "Auth", + "Authentication", + "Login", + "Log-in", + "Sign in", + "Sign-in", + "User", + "Apple", + "Facebook", + "Twitter", + "GitHub", + "Google", + "Phone Number", "firebase", - "database" + "auth" ], - "date": "2023-09-24T03:32:31.934Z", + "date": "2023-09-24T03:32:24.602Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-database", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-auth", "homepage": "https://github.com/NativeScript/firebase", "repository": "https://github.com/NativeScript/firebase", "bugs": "https://github.com/NativeScript/firebase/issues" @@ -57580,53 +57701,34 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 13, - "lastMonth": 1620 + "lastDay": 24, + "lastWeek": 57, + "lastMonth": 1884 } }, { - "name": "@nativescript/firebase-auth", + "name": "@nativescript/eslint-plugin", "scope": "nativescript", - "version": "3.2.0", - "description": "NativeScript Firebase - Auth", + "version": "0.0.4", + "description": "A set of ESLint rules for NativeScript projects.", "keywords": [ "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "Firebase", - "Auth", - "Authentication", - "Login", - "Log-in", - "Sign in", - "Sign-in", - "User", - "Apple", - "Facebook", - "Twitter", - "GitHub", - "Google", - "Phone Number", - "firebase", - "auth" + "eslint-plugin", + "eslint", + "eslint", + "plugin" ], - "date": "2023-09-24T03:32:24.602Z", + "date": "2021-04-01T09:59:45.590Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffirebase-auth", - "homepage": "https://github.com/NativeScript/firebase", - "repository": "https://github.com/NativeScript/firebase", - "bugs": "https://github.com/NativeScript/firebase/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Feslint-plugin" }, "author": { "name": "NativeScript Team", "username": "nativescript" }, "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" }, "maintainers": [ { @@ -57703,9 +57805,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 45, - "lastMonth": 1890 + "lastDay": 44, + "lastWeek": 274, + "lastMonth": 1513 } }, { @@ -57807,9 +57909,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 1, - "lastWeek": 12, - "lastMonth": 353 + "lastDay": 4, + "lastWeek": 14, + "lastMonth": 355 } }, { @@ -57921,111 +58023,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 9, - "lastMonth": 448 - } - }, - { - "name": "@nativescript/eslint-plugin", - "scope": "nativescript", - "version": "0.0.4", - "description": "A set of ESLint rules for NativeScript projects.", - "keywords": [ - "NativeScript", - "eslint-plugin", - "eslint", - "eslint", - "plugin" - ], - "date": "2021-04-01T09:59:45.590Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Feslint-plugin" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 62, - "lastWeek": 314, - "lastMonth": 1555 + "lastMonth": 447 } }, { @@ -58134,9 +58132,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 66, - "lastMonth": 697 + "lastDay": 10, + "lastWeek": 71, + "lastMonth": 702 } }, { @@ -58243,9 +58241,9 @@ } ], "downloadStats": { - "lastDay": 14, + "lastDay": 7, "lastWeek": 53, - "lastMonth": 696 + "lastMonth": 668 } }, { @@ -58335,8 +58333,8 @@ ], "downloadStats": { "lastDay": 11, - "lastWeek": 94, - "lastMonth": 601 + "lastWeek": 92, + "lastMonth": 563 } }, { @@ -58449,9 +58447,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 17, - "lastMonth": 1687 + "lastDay": 1, + "lastWeek": 15, + "lastMonth": 1683 } }, { @@ -58566,9 +58564,9 @@ } ], "downloadStats": { - "lastDay": 24, - "lastWeek": 120, - "lastMonth": 2150 + "lastDay": 19, + "lastWeek": 129, + "lastMonth": 2144 } }, { @@ -58682,9 +58680,9 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 33, - "lastMonth": 594 + "lastDay": 4, + "lastWeek": 32, + "lastMonth": 591 } }, { @@ -58792,9 +58790,9 @@ } ], "downloadStats": { - "lastDay": 5, + "lastDay": 3, "lastWeek": 31, - "lastMonth": 586 + "lastMonth": 584 } }, { @@ -58908,9 +58906,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 53, - "lastMonth": 1653 + "lastDay": 11, + "lastWeek": 61, + "lastMonth": 1654 } }, { @@ -59017,7 +59015,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 160 } }, @@ -59128,118 +59126,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 4, - "lastMonth": 480 - } - }, - { - "name": "@nativescript/rive", - "scope": "nativescript", - "version": "1.0.1", - "description": "Rive for NativeScript", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "Rive", - "rive" - ], - "date": "2023-08-13T16:08:23.553Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Frive", - "homepage": "https://github.com/NativeScript/ui-kit", - "repository": "https://github.com/NativeScript/ui-kit", - "bugs": "https://github.com/NativeScript/ui-kit/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 2, - "lastMonth": 38 + "lastMonth": 481 } }, { @@ -59322,9 +59211,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 25, - "lastMonth": 433 + "lastDay": 2, + "lastWeek": 26, + "lastMonth": 428 } }, { @@ -59432,8 +59321,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 20, - "lastMonth": 142 + "lastWeek": 13, + "lastMonth": 144 } }, { @@ -59545,9 +59434,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 36, - "lastMonth": 316 + "lastDay": 9, + "lastWeek": 35, + "lastMonth": 319 } }, { @@ -59658,9 +59547,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 72, - "lastMonth": 1003 + "lastDay": 6, + "lastWeek": 68, + "lastMonth": 986 } }, { @@ -59785,9 +59674,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 2, "lastWeek": 3, - "lastMonth": 147 + "lastMonth": 146 } }, { @@ -59863,9 +59752,9 @@ } ], "downloadStats": { - "lastDay": 52, - "lastWeek": 1007, - "lastMonth": 3869 + "lastDay": 49, + "lastWeek": 1006, + "lastMonth": 3836 } }, { @@ -59979,9 +59868,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 828 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 826 } }, { @@ -60090,9 +59979,9 @@ } ], "downloadStats": { - "lastDay": 17, - "lastWeek": 97, - "lastMonth": 1133 + "lastDay": 18, + "lastWeek": 104, + "lastMonth": 1142 } }, { @@ -60203,7 +60092,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 3, "lastMonth": 98 } }, @@ -60312,8 +60201,8 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 6, + "lastDay": 0, + "lastWeek": 4, "lastMonth": 66 } }, @@ -60427,8 +60316,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 13, - "lastMonth": 498 + "lastWeek": 14, + "lastMonth": 499 } }, { @@ -60496,7 +60385,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 2, "lastMonth": 37 } }, @@ -60613,8 +60502,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 11, - "lastMonth": 479 + "lastWeek": 12, + "lastMonth": 469 } }, { @@ -60726,9 +60615,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 11, - "lastMonth": 469 + "lastMonth": 471 } }, { @@ -60798,7 +60687,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 6, + "lastWeek": 3, "lastMonth": 42 } }, @@ -60914,9 +60803,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 6, - "lastMonth": 458 + "lastDay": 3, + "lastWeek": 8, + "lastMonth": 460 } }, { @@ -60985,7 +60874,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 2, "lastMonth": 179 } }, @@ -61099,9 +60988,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 8, - "lastMonth": 484 + "lastDay": 3, + "lastWeek": 10, + "lastMonth": 487 } }, { @@ -61214,9 +61103,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 10, - "lastMonth": 477 + "lastMonth": 479 } }, { @@ -61333,7 +61222,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 5, - "lastMonth": 381 + "lastMonth": 382 } }, { @@ -61445,9 +61334,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 5, - "lastMonth": 368 + "lastDay": 3, + "lastWeek": 7, + "lastMonth": 371 } }, { @@ -61523,9 +61412,9 @@ } ], "downloadStats": { - "lastDay": 238, - "lastWeek": 1119, - "lastMonth": 4557 + "lastDay": 158, + "lastWeek": 1007, + "lastMonth": 4489 } }, { @@ -61593,120 +61482,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 14, - "lastMonth": 111 - } - }, - { - "name": "@nativescript/ionic-portals", - "scope": "nativescript", - "version": "1.2.1", - "description": "Ionic Portals - Supercharged Web Views for iOS and Android", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "Ionic", - "Capacitor", - "ionic", - "portals" - ], - "date": "2023-04-10T16:56:23.096Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fionic-portals", - "homepage": "https://github.com/NativeScript/plugins", - "repository": "https://github.com/NativeScript/plugins", - "bugs": "https://github.com/NativeScript/plugins/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 34, - "lastWeek": 99, - "lastMonth": 561 + "lastDay": 3, + "lastWeek": 11, + "lastMonth": 112 } }, { @@ -61821,122 +61599,122 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, - "lastMonth": 487 - } - }, - { - "name": "@nativescript/template-master-detail-ts", - "scope": "nativescript", - "version": "8.6.0", - "description": "Master-detail interface to display collection of items from json collection and inspect and edit selected item properties.", - "keywords": [ - "nstudio", - "nativescript", - "mobile", - "{N}", - "tns", - "template", - "master-detail", - "category-general", - "template", - "master", - "detail", - "ts" - ], - "date": "2023-10-10T19:05:36.979Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ftemplate-master-detail-ts", - "homepage": "https://github.com/NativeScript/nativescript-app-templates", - "repository": "https://github.com/NativeScript/nativescript-app-templates", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, + "lastWeek": 4, + "lastMonth": 487 + } + }, + { + "name": "@nativescript/template-master-detail-ts", + "scope": "nativescript", + "version": "8.6.0", + "description": "Master-detail interface to display collection of items from json collection and inspect and edit selected item properties.", + "keywords": [ + "nstudio", + "nativescript", + "mobile", + "{N}", + "tns", + "template", + "master-detail", + "category-general", + "template", + "master", + "detail", + "ts" + ], + "date": "2023-10-10T19:05:36.979Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript%2Ftemplate-master-detail-ts", + "homepage": "https://github.com/NativeScript/nativescript-app-templates", + "repository": "https://github.com/NativeScript/nativescript-app-templates", + "bugs": "https://github.com/NativeScript/NativeScript/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + } + ], + "downloadStats": { + "lastDay": 1, "lastWeek": 3, - "lastMonth": 371 + "lastMonth": 372 } }, { @@ -62006,8 +61784,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, - "lastMonth": 69 + "lastWeek": 2, + "lastMonth": 68 } }, { @@ -62121,9 +61899,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 13, - "lastMonth": 637 + "lastDay": 0, + "lastWeek": 10, + "lastMonth": 636 } }, { @@ -62168,9 +61946,9 @@ } ], "downloadStats": { - "lastDay": 123, - "lastWeek": 656, - "lastMonth": 3208 + "lastDay": 86, + "lastWeek": 612, + "lastMonth": 3106 } }, { @@ -62285,8 +62063,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 12, - "lastMonth": 0 + "lastWeek": 8, + "lastMonth": 616 } }, { @@ -62356,8 +62134,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 48 } }, { @@ -62433,9 +62211,9 @@ } ], "downloadStats": { - "lastDay": 97, - "lastWeek": 381, - "lastMonth": 1445 + "lastDay": 39, + "lastWeek": 339, + "lastMonth": 1402 } }, { @@ -62504,8 +62282,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 22 } }, { @@ -62614,135 +62392,30 @@ } ], "downloadStats": { - "lastDay": 281, - "lastWeek": 0, - "lastMonth": 0 - } - }, - { - "name": "@nativescript/geolocation", - "scope": "nativescript", - "version": "8.3.1", - "description": "Provides API for getting and monitoring location for NativeScript app.", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "geolocation" - ], - "date": "2023-10-23T21:09:39.215Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fgeolocation", - "homepage": "https://github.com/NativeScript/plugins", - "repository": "https://github.com/NativeScript/plugins", - "bugs": "https://github.com/NativeScript/plugins/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 2064, - "lastMonth": 0 + "lastDay": 175, + "lastWeek": 1300, + "lastMonth": 5305 } }, { - "name": "@nativescript/facebook", + "name": "@nativescript/ionic-portals", "scope": "nativescript", - "version": "2.2.0", - "description": "Facebook for your NativeScript applications", + "version": "1.2.1", + "description": "Ionic Portals - Supercharged Web Views for iOS and Android", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "facebook" + "Ionic", + "Capacitor", + "ionic", + "portals" ], - "date": "2023-03-23T02:50:12.023Z", + "date": "2023-04-10T16:56:23.096Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffacebook", + "npm": "https://www.npmjs.com/package/%40nativescript%2Fionic-portals", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -62830,32 +62503,30 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 426 + "lastDay": 21, + "lastWeek": 93, + "lastMonth": 582 } }, { - "name": "@nativescript/mlkit-barcode-scanning", + "name": "@nativescript/geolocation", "scope": "nativescript", - "version": "2.0.0", - "description": "NativeScript MLKit Barcode Scanner module", + "version": "8.3.1", + "description": "Provides API for getting and monitoring location for NativeScript app.", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "mlkit", - "barcode", - "scanning" + "geolocation" ], - "date": "2023-03-28T16:26:06.403Z", + "date": "2023-10-23T21:09:39.215Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fmlkit-barcode-scanning", - "homepage": "https://github.com/NativeScript/mlkit", - "repository": "https://github.com/NativeScript/mlkit", - "bugs": "https://github.com/NativeScript/mlkit/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Fgeolocation", + "homepage": "https://github.com/NativeScript/plugins", + "repository": "https://github.com/NativeScript/plugins", + "bugs": "https://github.com/NativeScript/plugins/issues" }, "author": { "name": "NativeScript Team", @@ -62940,28 +62611,30 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 263, + "lastWeek": 2086, + "lastMonth": 7023 } }, { - "name": "@nativescript/doctor", + "name": "@nativescript/facebook", "scope": "nativescript", - "version": "2.0.11", - "description": "Library that helps identifying if the environment can be used for development of {N} apps.", + "version": "2.2.0", + "description": "Facebook for your NativeScript applications", "keywords": [ "NativeScript", - "doctor", - "tns", - "doctor" + "JavaScript", + "TypeScript", + "iOS", + "Android", + "facebook" ], - "date": "2023-03-28T19:16:11.362Z", + "date": "2023-03-23T02:50:12.023Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fdoctor", - "homepage": "https://github.com/NativeScript/nativescript-doctor#readme", - "repository": "https://github.com/NativeScript/nativescript-doctor", - "bugs": "https://github.com/NativeScript/nativescript-doctor/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffacebook", + "homepage": "https://github.com/NativeScript/plugins", + "repository": "https://github.com/NativeScript/plugins", + "bugs": "https://github.com/NativeScript/plugins/issues" }, "author": { "name": "NativeScript Team", @@ -63046,31 +62719,32 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 43, + "lastMonth": 408 } }, { - "name": "@nativescript/social-share", + "name": "@nativescript/mlkit-barcode-scanning", "scope": "nativescript", - "version": "2.3.0", - "description": "Social sharing widget handling for NativeScript", + "version": "2.0.0", + "description": "NativeScript MLKit Barcode Scanner module", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "social", - "share" + "mlkit", + "barcode", + "scanning" ], - "date": "2022-11-30T00:50:18.457Z", + "date": "2023-03-28T16:26:06.403Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fsocial-share", - "homepage": "https://github.com/NativeScript/plugins", - "repository": "https://github.com/NativeScript/plugins", - "bugs": "https://github.com/NativeScript/plugins/issues" + "npm": "https://www.npmjs.com/package/%40nativescript%2Fmlkit-barcode-scanning", + "homepage": "https://github.com/NativeScript/mlkit", + "repository": "https://github.com/NativeScript/mlkit", + "bugs": "https://github.com/NativeScript/mlkit/issues" }, "author": { "name": "NativeScript Team", @@ -63155,27 +62829,134 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 59, + "lastWeek": 934, + "lastMonth": 4230 } }, { - "name": "@nativescript/iqkeyboardmanager", + "name": "@nativescript/doctor", "scope": "nativescript", - "version": "2.1.1", - "description": "NativeScript wrapper of the popular IQKeyboardManager iOS library", + "version": "2.0.11", + "description": "Library that helps identifying if the environment can be used for development of {N} apps.", + "keywords": [ + "NativeScript", + "doctor", + "tns", + "doctor" + ], + "date": "2023-03-28T19:16:11.362Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript%2Fdoctor", + "homepage": "https://github.com/NativeScript/nativescript-doctor#readme", + "repository": "https://github.com/NativeScript/nativescript-doctor", + "bugs": "https://github.com/NativeScript/nativescript-doctor/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + } + ], + "downloadStats": { + "lastDay": 306, + "lastWeek": 1980, + "lastMonth": 9364 + } + }, + { + "name": "@nativescript/social-share", + "scope": "nativescript", + "version": "2.3.0", + "description": "Social sharing widget handling for NativeScript", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "iqkeyboardmanager" + "social", + "share" ], - "date": "2023-01-09T02:07:09.712Z", + "date": "2022-11-30T00:50:18.457Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fiqkeyboardmanager", + "npm": "https://www.npmjs.com/package/%40nativescript%2Fsocial-share", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -63263,29 +63044,27 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 87, + "lastWeek": 1024, + "lastMonth": 4399 } }, { - "name": "@nativescript/camera", + "name": "@nativescript/iqkeyboardmanager", "scope": "nativescript", - "version": "5.0.15", - "description": "Provides API for using device camera", + "version": "2.1.1", + "description": "NativeScript wrapper of the popular IQKeyboardManager iOS library", "keywords": [ "NativeScript", "JavaScript", - "Android", + "TypeScript", "iOS", - "camera", - "gallery", - "images", - "camera" + "Android", + "iqkeyboardmanager" ], - "date": "2022-12-06T14:45:06.631Z", + "date": "2023-01-09T02:07:09.712Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fcamera", + "npm": "https://www.npmjs.com/package/%40nativescript%2Fiqkeyboardmanager", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -63373,9 +63152,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 227, + "lastWeek": 1628, + "lastMonth": 7375 } }, { @@ -63453,9 +63232,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 17, + "lastWeek": 381, + "lastMonth": 1181 } }, { @@ -63564,9 +63343,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 14, + "lastMonth": 523 } }, { @@ -63674,9 +63453,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 4, + "lastWeek": 5, + "lastMonth": 328 } }, { @@ -63785,8 +63564,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 295 } }, { @@ -63895,8 +63674,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 332 } }, { @@ -64005,8 +63784,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 322 } }, { @@ -64115,8 +63894,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 329 } }, { @@ -64227,9 +64006,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 198, + "lastWeek": 1044, + "lastMonth": 6405 } }, { @@ -64338,8 +64117,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 305 } }, { @@ -64410,9 +64189,9 @@ "xcode" ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 401, + "lastWeek": 2304, + "lastMonth": 9977 } }, { @@ -64466,9 +64245,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 11, + "lastWeek": 87, + "lastMonth": 644 } }, { @@ -64572,8 +64351,8 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, + "lastDay": 533, + "lastWeek": 4158, "lastMonth": 0 } }, @@ -65446,6 +65225,116 @@ "lastMonth": 0 } }, + { + "name": "@nativescript/camera", + "scope": "nativescript", + "version": "5.0.15", + "description": "Provides API for using device camera", + "keywords": [ + "NativeScript", + "JavaScript", + "Android", + "iOS", + "camera", + "gallery", + "images", + "camera" + ], + "date": "2022-12-06T14:45:06.631Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript%2Fcamera", + "homepage": "https://github.com/NativeScript/plugins", + "repository": "https://github.com/NativeScript/plugins", + "bugs": "https://github.com/NativeScript/plugins/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + "maintainers": [ + { + "username": "nativescript-user", + "email": "nativescript@telerik.com" + }, + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "tachev", + "email": "nevermindd7@gmail.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "rosen_vladimirov", + "email": "rosen.vladimirov.91@gmail.com" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "facetious", + "email": "Ian.MacDonald.facetious@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "@triniwiz/nativescript-image-zoom", "scope": "triniwiz", @@ -66078,6 +65967,95 @@ "lastMonth": 0 } }, + { + "name": "tns-platform-declarations", + "scope": "unscoped", + "version": "6.5.15", + "description": "Platform-specific TypeScript declarations for NativeScript for accessing native objects", + "keywords": [ + "NativeScript", + "TypeScript", + "declarations", + "native", + "platform-specific", + "tns", + "ts", + "ns", + "tns", + "platform", + "declarations" + ], + "date": "2020-08-12T05:01:07.590Z", + "links": { + "npm": "https://www.npmjs.com/package/tns-platform-declarations", + "homepage": "https://github.com/NativeScript/NativeScript#readme", + "repository": "https://github.com/NativeScript/NativeScript", + "bugs": "https://github.com/NativeScript/NativeScript/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "hdeshev", + "email": "hristo@deshev.com" + }, + { + "username": "panayot.cankov", + "email": "panayot.cankov@telerik.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "@nstudio/nativescript-shimmer", "scope": "nstudio", @@ -66586,97 +66564,7 @@ } ], "keywords": [ - "theme" - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, - { - "name": "tns-core-modules-widgets", - "scope": "unscoped", - "version": "6.5.10", - "description": "Native widgets used in the NativeScript framework.", - "date": "2020-07-11T15:19:21.940Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-core-modules-widgets", - "homepage": "https://github.com/NativeScript/NativeScript#readme", - "repository": "https://github.com/NativeScript/NativeScript", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - }, - { - "username": "panayot.cankov", - "email": "panayot.cankov@telerik.com" - }, - { - "username": "vchimev", - "email": "Vasil.Chimev@telerik.com" - }, - { - "username": "vakrilov", - "email": "alexander.vakrilov@gmail.com" - }, - { - "username": "hhristov", - "email": "hristo.hristov@outlook.com" - } - ], - "keywords": [ - "tns", - "core", - "modules", - "widgets" + "theme" ], "downloadStats": { "lastDay": 0, @@ -66797,6 +66685,96 @@ "lastMonth": 0 } }, + { + "name": "tns-core-modules-widgets", + "scope": "unscoped", + "version": "6.5.10", + "description": "Native widgets used in the NativeScript framework.", + "date": "2020-07-11T15:19:21.940Z", + "links": { + "npm": "https://www.npmjs.com/package/tns-core-modules-widgets", + "homepage": "https://github.com/NativeScript/NativeScript#readme", + "repository": "https://github.com/NativeScript/NativeScript", + "bugs": "https://github.com/NativeScript/NativeScript/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "panayot.cankov", + "email": "panayot.cankov@telerik.com" + }, + { + "username": "vchimev", + "email": "Vasil.Chimev@telerik.com" + }, + { + "username": "vakrilov", + "email": "alexander.vakrilov@gmail.com" + }, + { + "username": "hhristov", + "email": "hristo.hristov@outlook.com" + } + ], + "keywords": [ + "tns", + "core", + "modules", + "widgets" + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "@nativescript/canvas-media", "scope": "nativescript", @@ -69341,62 +69319,50 @@ } }, { - "name": "@nativescript/canvas-babylon", - "scope": "nativescript", - "version": "1.1.0", - "description": "```javascript ns plugin add @nativescript/canvas-babylon ```", + "name": "@nstudio/nativescript-intercom", + "scope": "nstudio", + "version": "1.0.0", + "description": "Intercom SDK for NativeScript", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "canvas", - "babylon" + "nativescript", + "intercom" ], - "date": "2023-02-09T16:15:17.973Z", + "date": "2021-12-20T17:53:28.825Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fcanvas-babylon", - "homepage": "https://github.com/NativeScript/canvas", - "repository": "https://github.com/NativeScript/canvas", - "bugs": "https://github.com/NativeScript/canvas/issues" + "npm": "https://www.npmjs.com/package/%40nstudio%2Fnativescript-intercom", + "homepage": "https://github.com/nstudio/nativescript-plugins", + "repository": "https://github.com/nstudio/nativescript-plugins", + "bugs": "https://github.com/nstudio/nativescript-plugins/issues" }, "author": { "name": "NativeScript Team", "username": "nativescript" }, "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" }, "maintainers": [ { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" + "username": "nativescript-bot", + "email": "oss@nativescript.org" }, { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" + "username": "multishiv19", + "email": "sp@shiv19.com" }, { - "username": "stoskov", - "email": "s.toskov@gmail.com" + "username": "rigor789", + "email": "shout@igor-randjelovic.com" }, { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" + "username": "alexziskind1", + "email": "alex@nuvious.com" }, { "username": "walkerrunpdx", @@ -69411,36 +69377,8 @@ "email": "dave@davecoffin.com" }, { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" } ], "downloadStats": { @@ -70335,6 +70273,82 @@ "lastMonth": 0 } }, + { + "name": "tns-ios", + "scope": "unscoped", + "version": "6.5.6", + "description": "NativeScript Runtime for iOS", + "keywords": [ + "NativeScript", + "iOS", + "runtime", + "tns", + "ios" + ], + "date": "2022-09-22T09:36:42.897Z", + "links": { + "npm": "https://www.npmjs.com/package/tns-ios" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "hdeshev", + "email": "hristo@deshev.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "@nativescript/webpack", "scope": "nativescript", @@ -70849,82 +70863,6 @@ "lastMonth": 0 } }, - { - "name": "tns-ios", - "scope": "unscoped", - "version": "6.5.6", - "description": "NativeScript Runtime for iOS", - "keywords": [ - "NativeScript", - "iOS", - "runtime", - "tns", - "ios" - ], - "date": "2022-09-22T09:36:42.897Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-ios" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - }, - { - "username": "hdeshev", - "email": "hristo@deshev.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "@nativescript/detox", "scope": "nativescript", @@ -71215,22 +71153,21 @@ } }, { - "name": "@nativescript/fingerprint-auth", + "name": "@nativescript/storybook", "scope": "nativescript", - "version": "8.1.0", - "description": "A biometric authentication plugin for use in NativeScript apps", + "version": "1.0.0-alpha.0", + "description": "Storybook for NativeScript", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "fingerprint", - "auth" + "storybook" ], - "date": "2021-11-24T17:32:57.090Z", + "date": "2023-05-29T22:29:56.534Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Ffingerprint-auth", + "npm": "https://www.npmjs.com/package/%40nativescript%2Fstorybook", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -71324,21 +71261,22 @@ } }, { - "name": "@nativescript/storybook", + "name": "@nativescript/fingerprint-auth", "scope": "nativescript", - "version": "1.0.0-alpha.0", - "description": "Storybook for NativeScript", + "version": "8.1.0", + "description": "A biometric authentication plugin for use in NativeScript apps", "keywords": [ "NativeScript", "JavaScript", "TypeScript", "iOS", "Android", - "storybook" + "fingerprint", + "auth" ], - "date": "2023-05-29T22:29:56.534Z", + "date": "2021-11-24T17:32:57.090Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fstorybook", + "npm": "https://www.npmjs.com/package/%40nativescript%2Ffingerprint-auth", "homepage": "https://github.com/NativeScript/plugins", "repository": "https://github.com/NativeScript/plugins", "bugs": "https://github.com/NativeScript/plugins/issues" @@ -72654,34 +72592,37 @@ } }, { - "name": "nativescript-typedoc-theme", + "name": "tns-template-blank-ts", "scope": "unscoped", - "version": "1.1.0", - "description": "A TypeDoc theme for the API-Reference of NativeScript packages.", + "version": "6.5.4", + "description": "Blank template for Vanilla NativeScript apps using TypeScript", "keywords": [ - "NativeScript", - "tns-core-modules", - "api-ref", - "typedoc", - "theme", + "nstudio", "nativescript", - "typedoc", - "theme" + "mobile", + "{N}", + "tns", + "template", + "category-general", + "tns", + "template", + "blank", + "ts" ], - "date": "2021-09-19T19:10:43.410Z", + "date": "2020-06-07T16:19:25.571Z", "links": { - "npm": "https://www.npmjs.com/package/nativescript-typedoc-theme", - "homepage": "https://github.com/NativeScript/tns-core-modules-API-Ref#readme", - "repository": "https://github.com/NativeScript/tns-core-modules-API-Ref", - "bugs": "https://github.com/NativeScript/tns-core-modules-API-Ref/issues" + "npm": "https://www.npmjs.com/package/tns-template-blank-ts", + "homepage": "https://github.com/NativeScript/nativescript-app-templates", + "repository": "https://github.com/NativeScript/nativescript-app-templates", + "bugs": "https://github.com/NativeScript/NativeScript/issues" }, "author": { "name": "NativeScript Team", "username": "nativescript" }, "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" + "username": "rigor789", + "email": "shout@igor-randjelovic.com" }, "maintainers": [ { @@ -72723,10 +72664,6 @@ { "username": "sis0k0", "email": "stanimira.vlaeva@gmail.com" - }, - { - "username": "panayot.cankov", - "email": "panayot.cankov@telerik.com" } ], "downloadStats": { @@ -72736,37 +72673,34 @@ } }, { - "name": "tns-template-blank-ts", + "name": "nativescript-typedoc-theme", "scope": "unscoped", - "version": "6.5.4", - "description": "Blank template for Vanilla NativeScript apps using TypeScript", + "version": "1.1.0", + "description": "A TypeDoc theme for the API-Reference of NativeScript packages.", "keywords": [ - "nstudio", + "NativeScript", + "tns-core-modules", + "api-ref", + "typedoc", + "theme", "nativescript", - "mobile", - "{N}", - "tns", - "template", - "category-general", - "tns", - "template", - "blank", - "ts" + "typedoc", + "theme" ], - "date": "2020-06-07T16:19:25.571Z", + "date": "2021-09-19T19:10:43.410Z", "links": { - "npm": "https://www.npmjs.com/package/tns-template-blank-ts", - "homepage": "https://github.com/NativeScript/nativescript-app-templates", - "repository": "https://github.com/NativeScript/nativescript-app-templates", - "bugs": "https://github.com/NativeScript/NativeScript/issues" + "npm": "https://www.npmjs.com/package/nativescript-typedoc-theme", + "homepage": "https://github.com/NativeScript/tns-core-modules-API-Ref#readme", + "repository": "https://github.com/NativeScript/tns-core-modules-API-Ref", + "bugs": "https://github.com/NativeScript/tns-core-modules-API-Ref/issues" }, "author": { "name": "NativeScript Team", "username": "nativescript" }, "publisher": { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" + "username": "nativescript-bot", + "email": "oss@nativescript.org" }, "maintainers": [ { @@ -72808,6 +72742,10 @@ { "username": "sis0k0", "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "panayot.cankov", + "email": "panayot.cankov@telerik.com" } ], "downloadStats": { @@ -73577,88 +73515,6 @@ "lastMonth": 0 } }, - { - "name": "tns-template-blank-ng", - "scope": "unscoped", - "version": "6.5.4", - "description": "Blank template for NativeScript apps using Angular", - "keywords": [ - "nstudio", - "nativescript", - "mobile", - "angular", - "{N}", - "tns", - "template", - "category-general", - "tns", - "template", - "blank", - "ng" - ], - "date": "2020-06-07T16:19:25.906Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-template-blank-ng", - "homepage": "https://github.com/NativeScript/nativescript-app-templates", - "repository": "https://github.com/NativeScript/nativescript-app-templates", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "@nstudio/root-detection", "scope": "nstudio", @@ -77127,9 +76983,9 @@ } ], "downloadStats": { - "lastDay": 594, - "lastWeek": 2690, - "lastMonth": 11708 + "lastDay": 287, + "lastWeek": 2608, + "lastMonth": 11497 } }, { @@ -77238,9 +77094,9 @@ } ], "downloadStats": { - "lastDay": 218, - "lastWeek": 1068, - "lastMonth": 5508 + "lastDay": 69, + "lastWeek": 1004, + "lastMonth": 5404 } }, { @@ -77349,9 +77205,9 @@ } ], "downloadStats": { - "lastDay": 71, - "lastWeek": 371, - "lastMonth": 1711 + "lastDay": 73, + "lastWeek": 396, + "lastMonth": 1693 } }, { @@ -77479,9 +77335,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 446, - "lastMonth": 2448 + "lastDay": 28, + "lastWeek": 295, + "lastMonth": 2456 } }, { @@ -77592,9 +77448,9 @@ } ], "downloadStats": { - "lastDay": 70, - "lastWeek": 671, - "lastMonth": 3370 + "lastDay": 72, + "lastWeek": 632, + "lastMonth": 3339 } }, { @@ -77710,9 +77566,9 @@ } ], "downloadStats": { - "lastDay": 17, - "lastWeek": 110, - "lastMonth": 2414 + "lastDay": 37, + "lastWeek": 131, + "lastMonth": 2317 } }, { @@ -77823,9 +77679,9 @@ } ], "downloadStats": { - "lastDay": 90, - "lastWeek": 495, - "lastMonth": 2436 + "lastDay": 96, + "lastWeek": 481, + "lastMonth": 2466 } }, { @@ -77939,9 +77795,9 @@ } ], "downloadStats": { - "lastDay": 23, - "lastWeek": 302, - "lastMonth": 3794 + "lastDay": 15, + "lastWeek": 299, + "lastMonth": 3799 } }, { @@ -78055,9 +77911,9 @@ } ], "downloadStats": { - "lastDay": 42, - "lastWeek": 472, - "lastMonth": 5072 + "lastDay": 31, + "lastWeek": 449, + "lastMonth": 5043 } }, { @@ -78168,9 +78024,9 @@ } ], "downloadStats": { - "lastDay": 172, - "lastWeek": 766, - "lastMonth": 4246 + "lastDay": 36, + "lastWeek": 722, + "lastMonth": 4179 } }, { @@ -78279,9 +78135,9 @@ } ], "downloadStats": { - "lastDay": 153, - "lastWeek": 678, - "lastMonth": 2647 + "lastDay": 21, + "lastWeek": 617, + "lastMonth": 2593 } }, { @@ -78406,9 +78262,9 @@ } ], "downloadStats": { - "lastDay": 178, - "lastWeek": 784, - "lastMonth": 4160 + "lastDay": 43, + "lastWeek": 729, + "lastMonth": 4106 } }, { @@ -78519,9 +78375,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 242, - "lastMonth": 1521 + "lastDay": 5, + "lastWeek": 123, + "lastMonth": 1522 } }, { @@ -78635,9 +78491,9 @@ } ], "downloadStats": { - "lastDay": 192, - "lastWeek": 983, - "lastMonth": 4370 + "lastDay": 65, + "lastWeek": 903, + "lastMonth": 4292 } }, { @@ -78753,9 +78609,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 12, - "lastMonth": 890 + "lastDay": 10, + "lastWeek": 19, + "lastMonth": 802 } }, { @@ -78872,9 +78728,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 210, - "lastMonth": 1224 + "lastDay": 76, + "lastWeek": 267, + "lastMonth": 1297 } }, { @@ -78988,9 +78844,9 @@ } ], "downloadStats": { - "lastDay": 334, - "lastWeek": 1658, - "lastMonth": 8985 + "lastDay": 180, + "lastWeek": 1651, + "lastMonth": 8925 } }, { @@ -79102,8 +78958,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 117, - "lastMonth": 401 + "lastWeek": 54, + "lastMonth": 402 } }, { @@ -79219,37 +79075,35 @@ } ], "downloadStats": { - "lastDay": 44, - "lastWeek": 313, - "lastMonth": 1642 + "lastDay": 36, + "lastWeek": 284, + "lastMonth": 1613 } }, { - "name": "@nativescript-community/ui-image-colorfilter", + "name": "@nativescript-community/ble", "scope": "nativescript-community", - "version": "4.3.19", - "description": "color matrix filters for @nativescript-community/ui-image", + "version": "3.1.15", + "description": "Connect to and interact with Bluetooth LE peripherals.", "keywords": [ + "ecosystem:NativeScript", "NativeScript", - "JavaScript", - "Fresco", - "SDWebImage", - "cache", - "caching", - "Android", "iOS", + "Android", + "BLE", + "Bluetooth", + "Bluetooth LE", + "Bluetooth Smart", + "Bluetooth Low Energy", "Angular", - "Vue", - "ui", - "image", - "colorfilter" + "ble" ], - "date": "2023-10-10T19:16:56.617Z", + "date": "2023-02-07T08:43:36.112Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-image-colorfilter", - "homepage": "https://github.com/nativescript-community/ui-image#readme", - "repository": "https://github.com/nativescript-community/ui-image", - "bugs": "https://github.com/nativescript-community/ui-image/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fble", + "homepage": "https://nativescript-community.github.io/ble", + "repository": "https://github.com/nativescript-community/ble", + "bugs": "https://github.com/nativescript-community/ble/issues" }, "author": { "name": "NativeScript Community", @@ -79338,35 +79192,37 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 6, - "lastMonth": 955 + "lastDay": 22, + "lastWeek": 57, + "lastMonth": 874 } }, { - "name": "@nativescript-community/ble", + "name": "@nativescript-community/ui-image-colorfilter", "scope": "nativescript-community", - "version": "3.1.15", - "description": "Connect to and interact with Bluetooth LE peripherals.", + "version": "4.3.19", + "description": "color matrix filters for @nativescript-community/ui-image", "keywords": [ - "ecosystem:NativeScript", "NativeScript", - "iOS", + "JavaScript", + "Fresco", + "SDWebImage", + "cache", + "caching", "Android", - "BLE", - "Bluetooth", - "Bluetooth LE", - "Bluetooth Smart", - "Bluetooth Low Energy", + "iOS", "Angular", - "ble" + "Vue", + "ui", + "image", + "colorfilter" ], - "date": "2023-02-07T08:43:36.112Z", + "date": "2023-10-10T19:16:56.617Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fble", - "homepage": "https://nativescript-community.github.io/ble", - "repository": "https://github.com/nativescript-community/ble", - "bugs": "https://github.com/nativescript-community/ble/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-image-colorfilter", + "homepage": "https://github.com/nativescript-community/ui-image#readme", + "repository": "https://github.com/nativescript-community/ui-image", + "bugs": "https://github.com/nativescript-community/ui-image/issues" }, "author": { "name": "NativeScript Community", @@ -79455,9 +79311,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 44, - "lastMonth": 860 + "lastDay": 0, + "lastWeek": 4, + "lastMonth": 865 } }, { @@ -79566,9 +79422,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 7, - "lastMonth": 158 + "lastDay": 1, + "lastWeek": 6, + "lastMonth": 159 } }, { @@ -79696,9 +79552,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 13, - "lastMonth": 106 + "lastDay": 11, + "lastWeek": 23, + "lastMonth": 117 } }, { @@ -79810,9 +79666,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 234, - "lastMonth": 1537 + "lastDay": 10, + "lastWeek": 192, + "lastMonth": 1543 } }, { @@ -79919,9 +79775,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 237 + "lastDay": 8, + "lastWeek": 10, + "lastMonth": 245 } }, { @@ -80035,9 +79891,9 @@ } ], "downloadStats": { - "lastDay": 11, + "lastDay": 13, "lastWeek": 262, - "lastMonth": 3795 + "lastMonth": 3799 } }, { @@ -80151,9 +80007,9 @@ } ], "downloadStats": { - "lastDay": 103, - "lastWeek": 623, - "lastMonth": 5105 + "lastDay": 78, + "lastWeek": 654, + "lastMonth": 5090 } }, { @@ -80264,9 +80120,9 @@ } ], "downloadStats": { - "lastDay": 35, - "lastWeek": 171, - "lastMonth": 2262 + "lastDay": 24, + "lastWeek": 175, + "lastMonth": 2228 } }, { @@ -80380,9 +80236,9 @@ } ], "downloadStats": { - "lastDay": 86, - "lastWeek": 796, - "lastMonth": 5367 + "lastDay": 122, + "lastWeek": 831, + "lastMonth": 5395 } }, { @@ -80502,9 +80358,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 10, - "lastMonth": 308 + "lastDay": 8, + "lastWeek": 15, + "lastMonth": 311 } }, { @@ -80618,9 +80474,9 @@ } ], "downloadStats": { - "lastDay": 12, - "lastWeek": 256, - "lastMonth": 4183 + "lastDay": 5, + "lastWeek": 250, + "lastMonth": 4175 } }, { @@ -80734,9 +80590,9 @@ } ], "downloadStats": { - "lastDay": 21, - "lastWeek": 249, - "lastMonth": 4132 + "lastDay": 15, + "lastWeek": 255, + "lastMonth": 4138 } }, { @@ -80851,8 +80707,8 @@ ], "downloadStats": { "lastDay": 13, - "lastWeek": 264, - "lastMonth": 3997 + "lastWeek": 265, + "lastMonth": 3998 } }, { @@ -80964,7 +80820,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 297 } }, @@ -81079,9 +80935,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 277, - "lastMonth": 3843 + "lastDay": 15, + "lastWeek": 279, + "lastMonth": 3846 } }, { @@ -81194,7 +81050,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 118 } }, @@ -81309,9 +81165,9 @@ } ], "downloadStats": { - "lastDay": 16, - "lastWeek": 260, - "lastMonth": 3892 + "lastDay": 9, + "lastWeek": 258, + "lastMonth": 3893 } }, { @@ -81425,8 +81281,8 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 235, + "lastDay": 12, + "lastWeek": 232, "lastMonth": 3735 } }, @@ -81541,9 +81397,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 298, - "lastMonth": 3843 + "lastDay": 7, + "lastWeek": 295, + "lastMonth": 3848 } }, { @@ -81658,9 +81514,9 @@ } ], "downloadStats": { - "lastDay": 38, - "lastWeek": 167, - "lastMonth": 793 + "lastDay": 65, + "lastWeek": 230, + "lastMonth": 839 } }, { @@ -81780,9 +81636,9 @@ } ], "downloadStats": { - "lastDay": 204, - "lastWeek": 1217, - "lastMonth": 6720 + "lastDay": 212, + "lastWeek": 1265, + "lastMonth": 6708 } }, { @@ -81896,9 +81752,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 180, - "lastMonth": 2875 + "lastDay": 4, + "lastWeek": 177, + "lastMonth": 2870 } }, { @@ -82018,9 +81874,9 @@ } ], "downloadStats": { - "lastDay": 47, - "lastWeek": 400, - "lastMonth": 4336 + "lastDay": 66, + "lastWeek": 455, + "lastMonth": 4397 } }, { @@ -82146,9 +82002,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 18, - "lastMonth": 245 + "lastDay": 1, + "lastWeek": 16, + "lastMonth": 240 } }, { @@ -82257,9 +82113,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 21, - "lastMonth": 399 + "lastDay": 20, + "lastWeek": 38, + "lastMonth": 419 } }, { @@ -82373,9 +82229,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 32, - "lastMonth": 406 + "lastDay": 4, + "lastWeek": 26, + "lastMonth": 410 } }, { @@ -82485,7 +82341,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 480 } }, @@ -82604,7 +82460,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 3, "lastMonth": 546 } }, @@ -82721,9 +82577,9 @@ } ], "downloadStats": { - "lastDay": 290, - "lastWeek": 1355, - "lastMonth": 5591 + "lastDay": 137, + "lastWeek": 1297, + "lastMonth": 5520 } }, { @@ -82855,9 +82711,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 49, - "lastMonth": 340 + "lastDay": 6, + "lastWeek": 35, + "lastMonth": 335 } }, { @@ -82970,7 +82826,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 221 } }, @@ -83081,9 +82937,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 27, - "lastMonth": 313 + "lastDay": 12, + "lastWeek": 22, + "lastMonth": 323 } }, { @@ -83194,9 +83050,9 @@ } ], "downloadStats": { - "lastDay": 438, - "lastWeek": 2566, - "lastMonth": 12184 + "lastDay": 336, + "lastWeek": 2586, + "lastMonth": 12145 } }, { @@ -83321,9 +83177,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 80, - "lastMonth": 717 + "lastDay": 9, + "lastWeek": 82, + "lastMonth": 693 } }, { @@ -83446,9 +83302,9 @@ } ], "downloadStats": { - "lastDay": 48, - "lastWeek": 316, - "lastMonth": 1725 + "lastDay": 70, + "lastWeek": 353, + "lastMonth": 1783 } }, { @@ -83570,9 +83426,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 2, "lastWeek": 4, - "lastMonth": 36 + "lastMonth": 37 } }, { @@ -83695,8 +83551,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 7, - "lastMonth": 100 + "lastWeek": 5, + "lastMonth": 97 } }, { @@ -83803,9 +83659,9 @@ } ], "downloadStats": { - "lastDay": 74, - "lastWeek": 337, - "lastMonth": 1044 + "lastDay": 99, + "lastWeek": 403, + "lastMonth": 1083 } }, { @@ -83913,7 +83769,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 71 } }, @@ -84026,9 +83882,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 330, - "lastMonth": 1343 + "lastDay": 45, + "lastWeek": 312, + "lastMonth": 1358 } }, { @@ -84152,8 +84008,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 9, - "lastMonth": 148 + "lastWeek": 7, + "lastMonth": 149 } }, { @@ -84275,151 +84131,38 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, - "lastMonth": 102 - } - }, - { - "name": "@nativescript-community/ui-parallax", - "scope": "nativescript-community", - "version": "0.0.2", - "description": "NativeScript Parallax View Plugin.", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "iOS", - "Parallax", - "ui", - "parallax" - ], - "date": "2022-12-01T14:13:41.323Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-parallax", - "homepage": "https://github.com/nativescript-community/ui-parallax", - "repository": "https://github.com/nativescript-community/ui-parallax", - "bugs": "https://github.com/nativescript-community/ui-parallax/issues" - }, - "author": { - "name": "NativeScript Community", - "username": "nativescript-community" - }, - "publisher": { - "username": "mayerlench", - "email": "mlench@finitydevelopment.com" - }, - "maintainers": [ - { - "username": "dgmachado", - "email": "douglassmachado@live.com" - }, - { - "username": "classicoldsong", - "email": "syqlds@126.com" - }, - { - "username": "mayerlench", - "email": "mlench@finitydevelopment.com" - }, - { - "username": "jcassidyav", - "email": "jcassidyav@gmail.com" - }, - { - "username": "sebjean", - "email": "contact@sebjean.com" - }, - { - "username": "cjohn001", - "email": "christoph_john@gmx.de" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "asharghi", - "email": "a.sharghi.mail@gmail.com" - }, - { - "username": "farfromrefuge", - "email": "martin.guillon@akylas.fr" - }, - { - "username": "triniwiz", - "email": "fortune.osei@yahoo.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "dnr", - "email": "katsampasdr@gmail.com" - }, - { - "username": "keerl", - "email": "karlschmaltz@gmail.com" - }, - { - "username": "cvietor", - "email": "cv@chris-vietor.de" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "rdlabo", - "email": "sakakibara@rdlabo.jp" - }, - { - "username": "tralves", - "email": "tralves@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 38 + "lastWeek": 2, + "lastMonth": 102 } }, { - "name": "@nativescript-community/l", + "name": "@nativescript-community/ui-parallax", "scope": "nativescript-community", - "version": "4.2.26", - "description": "Native internationalization plugin for NativeScript using native capabilities of each platform", + "version": "0.0.2", + "description": "NativeScript Parallax View Plugin.", "keywords": [ - "nativescript", - "internationalization", - "i18n", - "translation", - "localization", - "l10n", - "angular", - "ios", - "android", - "l" + "NativeScript", + "JavaScript", + "Android", + "iOS", + "Parallax", + "ui", + "parallax" ], - "date": "2022-05-10T21:27:12.438Z", + "date": "2022-12-01T14:13:41.323Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fl" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-parallax", + "homepage": "https://github.com/nativescript-community/ui-parallax", + "repository": "https://github.com/nativescript-community/ui-parallax", + "bugs": "https://github.com/nativescript-community/ui-parallax/issues" }, "author": { "name": "NativeScript Community", "username": "nativescript-community" }, "publisher": { - "username": "farfromrefuge", - "email": "martin.guillon@akylas.fr" + "username": "mayerlench", + "email": "mlench@finitydevelopment.com" }, "maintainers": [ { @@ -84501,37 +84244,38 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 38 } }, { - "name": "@nativescript-community/fonts", + "name": "@nativescript-community/l", "scope": "nativescript-community", - "version": "1.0.5", - "description": "Process fonts in a nativescript package", + "version": "4.2.26", + "description": "Native internationalization plugin for NativeScript using native capabilities of each platform", "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "fonts" + "nativescript", + "internationalization", + "i18n", + "translation", + "localization", + "l10n", + "angular", + "ios", + "android", + "l" ], - "date": "2023-03-16T16:40:48.878Z", + "date": "2022-05-10T21:27:12.438Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Ffonts", - "homepage": "https://github.com/nativescript-community/fonts", - "repository": "https://github.com/nativescript-community/fonts", - "bugs": "https://github.com/nativescript-community/fonts/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fl" }, "author": { "name": "NativeScript Community", "username": "nativescript-community" }, "publisher": { - "username": "jcassidyav", - "email": "jcassidyav@gmail.com" + "username": "farfromrefuge", + "email": "martin.guillon@akylas.fr" }, "maintainers": [ { @@ -84612,9 +84356,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 8, + "lastWeek": 9, + "lastMonth": 44 } }, { @@ -84726,9 +84470,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 229, + "lastWeek": 1789, + "lastMonth": 7845 } }, { @@ -84836,8 +84580,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 66 } }, { @@ -84954,8 +84698,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 45 } }, { @@ -85077,9 +84821,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 68, + "lastMonth": 519 } }, { @@ -85191,9 +84935,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 23, + "lastWeek": 46, + "lastMonth": 395 } }, { @@ -85304,9 +85048,9 @@ "username": "nativescript-community" }, "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 107 } }, { @@ -85414,9 +85158,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 8, + "lastWeek": 13, + "lastMonth": 127 } }, { @@ -85529,9 +85273,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 56, + "lastWeek": 946, + "lastMonth": 4013 } }, { @@ -85642,8 +85386,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 41 } }, { @@ -85752,40 +85496,37 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 5, + "lastMonth": 209 } }, { - "name": "@nativescript-community/ui-share-file", + "name": "@nativescript-community/fonts", "scope": "nativescript-community", - "version": "1.3.1", - "description": "Send/share file to other apps.", + "version": "1.0.5", + "description": "Process fonts in a nativescript package", "keywords": [ "NativeScript", "JavaScript", - "Android", - "file", - "share", + "TypeScript", "iOS", - "ui", - "share", - "file" + "Android", + "fonts" ], - "date": "2023-02-27T15:06:33.252Z", + "date": "2023-03-16T16:40:48.878Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-share-file", - "homepage": "https://github.com/nativescript-community/ui-share-file", - "repository": "https://github.com/nativescript-community/ui-share-file", - "bugs": "https://github.com/nativescript-community/ui-share-file/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Ffonts", + "homepage": "https://github.com/nativescript-community/fonts", + "repository": "https://github.com/nativescript-community/fonts", + "bugs": "https://github.com/nativescript-community/fonts/issues" }, "author": { "name": "NativeScript Community", "username": "nativescript-community" }, "publisher": { - "username": "farfromrefuge", - "email": "martin.guillon@akylas.fr" + "username": "jcassidyav", + "email": "jcassidyav@gmail.com" }, "maintainers": [ { @@ -85866,9 +85607,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 2, + "lastMonth": 86 } }, { @@ -86206,32 +85947,147 @@ } }, { - "name": "@nativescript-community/insomnia", + "name": "@nativescript-community/insomnia", + "scope": "nativescript-community", + "version": "2.0.2", + "description": "Make the screen not dim (and eventually lock the device) while Insomnia is active.", + "keywords": [ + "NativeScript", + "Insomnia", + "Screen dim", + "dim", + "lock", + "sleep", + "insomnia" + ], + "date": "2021-01-24T12:37:45.346Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Finsomnia", + "homepage": "https://github.com/nativescript-community/insomnia", + "bugs": "https://github.com/nativescript-community/insomnia/issues" + }, + "author": { + "name": "NativeScript Community", + "username": "nativescript-community" + }, + "publisher": { + "username": "farfromrefuge", + "email": "martin.guillon@akylas.fr" + }, + "maintainers": [ + { + "username": "dgmachado", + "email": "douglassmachado@live.com" + }, + { + "username": "classicoldsong", + "email": "syqlds@126.com" + }, + { + "username": "mayerlench", + "email": "mlench@finitydevelopment.com" + }, + { + "username": "jcassidyav", + "email": "jcassidyav@gmail.com" + }, + { + "username": "sebjean", + "email": "contact@sebjean.com" + }, + { + "username": "cjohn001", + "email": "christoph_john@gmx.de" + }, + { + "username": "edusperoni", + "email": "edusperoni@gmail.com" + }, + { + "username": "asharghi", + "email": "a.sharghi.mail@gmail.com" + }, + { + "username": "farfromrefuge", + "email": "martin.guillon@akylas.fr" + }, + { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + }, + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "dnr", + "email": "katsampasdr@gmail.com" + }, + { + "username": "keerl", + "email": "karlschmaltz@gmail.com" + }, + { + "username": "cvietor", + "email": "cv@chris-vietor.de" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "rdlabo", + "email": "sakakibara@rdlabo.jp" + }, + { + "username": "tralves", + "email": "tralves@gmail.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, + { + "name": "@nativescript-community/solid-js", "scope": "nativescript-community", - "version": "2.0.2", - "description": "Make the screen not dim (and eventually lock the device) while Insomnia is active.", + "version": "0.0.4-alpha.5", + "description": "SolidJS to work with NativeScript", "keywords": [ + "{N}", + "DOM", + "DOMiNATIVE", + "Solid", + "SolidJS", "NativeScript", - "Insomnia", - "Screen dim", - "dim", - "lock", - "sleep", - "insomnia" + "native", + "solid", + "js" ], - "date": "2021-01-24T12:37:45.346Z", + "date": "2023-09-06T19:58:33.140Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Finsomnia", - "homepage": "https://github.com/nativescript-community/insomnia", - "bugs": "https://github.com/nativescript-community/insomnia/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fsolid-js", + "homepage": "https://github.com/nativescript-community/solid-js", + "repository": "https://github.com/nativescript-community/solid-js", + "bugs": "https://github.com/nativescript-community/solid-js/issues" }, "author": { "name": "NativeScript Community", "username": "nativescript-community" }, "publisher": { - "username": "farfromrefuge", - "email": "martin.guillon@akylas.fr" + "username": "classicoldsong", + "email": "syqlds@126.com" }, "maintainers": [ { @@ -86318,35 +86174,35 @@ } }, { - "name": "@nativescript-community/solid-js", + "name": "@nativescript-community/ui-share-file", "scope": "nativescript-community", - "version": "0.0.4-alpha.5", - "description": "SolidJS to work with NativeScript", + "version": "1.3.2", + "description": "Send/share file to other apps.", "keywords": [ - "{N}", - "DOM", - "DOMiNATIVE", - "Solid", - "SolidJS", "NativeScript", - "native", - "solid", - "js" + "JavaScript", + "Android", + "file", + "share", + "iOS", + "ui", + "share", + "file" ], - "date": "2023-09-06T19:58:33.140Z", + "date": "2023-10-27T14:58:42.475Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fsolid-js", - "homepage": "https://github.com/nativescript-community/solid-js", - "repository": "https://github.com/nativescript-community/solid-js", - "bugs": "https://github.com/nativescript-community/solid-js/issues" + "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-share-file", + "homepage": "https://github.com/nativescript-community/ui-share-file", + "repository": "https://github.com/nativescript-community/ui-share-file", + "bugs": "https://github.com/nativescript-community/ui-share-file/issues" }, "author": { "name": "NativeScript Community", "username": "nativescript-community" }, "publisher": { - "username": "classicoldsong", - "email": "syqlds@126.com" + "username": "farfromrefuge", + "email": "martin.guillon@akylas.fr" }, "maintainers": [ { @@ -88099,10 +87955,10 @@ "username": "nativescript-dom", "plugins": [ { - "name": "@nativescript-dom/vue-types", + "name": "@nativescript-dom/core-types", "scope": "nativescript-dom", - "version": "1.0.15", - "description": "TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for vue", + "version": "1.0.29", + "description": "Renderer agnostic typeScript definitions for @nativescript/core views exposed as HTML DOM elements", "keywords": [ "dom", "html", @@ -88112,15 +87968,13 @@ "elements", "ui", "views", - "vue", - "nativescript-vue", - "vue", + "core", "types" ], - "date": "2023-05-28T16:18:08.365Z", + "date": "2023-08-13T18:45:49.403Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fvue-types", - "homepage": "https://github.com/nativescript-dom/types/tree/main/vue", + "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fcore-types", + "homepage": "https://github.com/nativescript-dom/types/tree/main/core", "repository": "https://github.com/nativescript-dom/types", "bugs": "https://github.com/nativescript-dom/types/issues" }, @@ -88139,16 +87993,16 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 6, - "lastMonth": 272 + "lastDay": 1, + "lastWeek": 10, + "lastMonth": 534 } }, { - "name": "@nativescript-dom/angular-types", + "name": "@nativescript-dom/vue-types", "scope": "nativescript-dom", - "version": "1.0.7", - "description": "Typescript definitions for @nativescript/angular that expose @nativescript/core views as DOM elements in HTML templates", + "version": "1.0.15", + "description": "TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for vue", "keywords": [ "dom", "html", @@ -88158,16 +88012,15 @@ "elements", "ui", "views", - "angular", - "nativescript-angular", - "ng", - "angular", + "vue", + "nativescript-vue", + "vue", "types" ], - "date": "2023-05-28T16:09:35.280Z", + "date": "2023-05-28T16:18:08.365Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fangular-types", - "homepage": "https://github.com/nativescript-dom/types/tree/main/angular", + "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fvue-types", + "homepage": "https://github.com/nativescript-dom/types/tree/main/vue", "repository": "https://github.com/nativescript-dom/types", "bugs": "https://github.com/nativescript-dom/types/issues" }, @@ -88186,16 +88039,16 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 4, - "lastMonth": 164 + "lastDay": 1, + "lastWeek": 5, + "lastMonth": 273 } }, { - "name": "@nativescript-dom/core-types", + "name": "@nativescript-dom/angular-types", "scope": "nativescript-dom", - "version": "1.0.29", - "description": "Renderer agnostic typeScript definitions for @nativescript/core views exposed as HTML DOM elements", + "version": "1.0.7", + "description": "Typescript definitions for @nativescript/angular that expose @nativescript/core views as DOM elements in HTML templates", "keywords": [ "dom", "html", @@ -88205,13 +88058,16 @@ "elements", "ui", "views", - "core", + "angular", + "nativescript-angular", + "ng", + "angular", "types" ], - "date": "2023-08-13T18:45:49.403Z", + "date": "2023-05-28T16:09:35.280Z", "links": { - "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fcore-types", - "homepage": "https://github.com/nativescript-dom/types/tree/main/core", + "npm": "https://www.npmjs.com/package/%40nativescript-dom%2Fangular-types", + "homepage": "https://github.com/nativescript-dom/types/tree/main/angular", "repository": "https://github.com/nativescript-dom/types", "bugs": "https://github.com/nativescript-dom/types/issues" }, @@ -88231,8 +88087,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 11, - "lastMonth": 535 + "lastWeek": 2, + "lastMonth": 162 } }, { @@ -88277,7 +88133,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 2, "lastMonth": 78 } }, @@ -88323,7 +88179,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 2, "lastMonth": 108 } }, @@ -88946,7 +88802,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 112 } } @@ -89380,7 +89236,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 9, - "lastMonth": 3082 + "lastMonth": 3083 } } ] @@ -90369,9 +90225,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 5, - "lastMonth": 1607 + "lastDay": 0, + "lastWeek": 2, + "lastMonth": 1605 } }, { @@ -90543,9 +90399,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 7 } } ] @@ -91539,7 +91395,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 1, "lastMonth": 205 } }, @@ -91592,7 +91448,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 5, "lastMonth": 256 } @@ -91638,7 +91494,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 1, "lastMonth": 34 } } @@ -91991,9 +91847,9 @@ } ], "downloadStats": { - "lastDay": 155, - "lastWeek": 687, - "lastMonth": 3609 + "lastDay": 21, + "lastWeek": 630, + "lastMonth": 3554 } } ] @@ -92269,9 +92125,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 9, - "lastMonth": 112 + "lastDay": 2, + "lastWeek": 10, + "lastMonth": 114 } } ] @@ -92467,6 +92323,54 @@ } ] }, + { + "name": "Shamsuddin Dzhamalov", + "username": "packagedcat", + "plugins": [ + { + "name": "nativescript-gmaps", + "scope": "unscoped", + "version": "8.0.3", + "description": "Google Maps for NativeScript", + "keywords": [ + "Nativescript", + "Google", + "Maps", + "Google Maps", + "API", + "SDK", + "nativescript", + "gmaps" + ], + "date": "2022-07-02T00:54:48.705Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-gmaps", + "homepage": "https://github.com/PackagedCat/nativescript-google-maps", + "repository": "https://github.com/PackagedCat/nativescript-google-maps", + "bugs": "https://github.com/PackagedCat/nativescript-google-maps/issues" + }, + "author": { + "name": "Shamsuddin Dzhamalov", + "username": "packagedcat" + }, + "publisher": { + "username": "packagedcat", + "email": "packagedcat@outlook.com" + }, + "maintainers": [ + { + "username": "packagedcat", + "email": "packagedcat@outlook.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + } + ] + }, { "name": "panayot.cankov", "username": "panayot.cankov", @@ -93181,7 +93085,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 9, + "lastWeek": 7, "lastMonth": 27 } } @@ -94894,7 +94798,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 23 + "lastMonth": 20 } }, { @@ -94936,9 +94840,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 5, - "lastMonth": 17 + "lastMonth": 18 } }, { @@ -94977,9 +94881,53 @@ } ], "downloadStats": { - "lastDay": 120, - "lastWeek": 542, - "lastMonth": 2254 + "lastDay": 68, + "lastWeek": 502, + "lastMonth": 2178 + } + }, + { + "name": "nativescript-purchase", + "scope": "unscoped", + "version": "2.0.14", + "description": "A NativeScript plugin for making in-app purchases", + "keywords": [ + "NativeScript", + "iap", + "in-app purchase", + "in-app billing", + "vending", + "payment", + "subscription", + "tangra", + "nativescript", + "purchase" + ], + "date": "2020-09-04T10:11:06.953Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-purchase", + "homepage": "https://github.com/PeterStaev/nativescript-purchase#readme", + "repository": "https://github.com/PeterStaev/nativescript-purchase", + "bugs": "https://github.com/PeterStaev/nativescript-purchase/issues" + }, + "author": { + "name": "Peter Staev", + "username": "pstaev" + }, + "publisher": { + "username": "pstaev", + "email": "peter@tangrasoft.com" + }, + "maintainers": [ + { + "username": "pstaev", + "email": "peter@tangrasoft.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 31, + "lastMonth": 167 } }, { @@ -95020,8 +94968,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 49, + "lastMonth": 217 } }, { @@ -95059,9 +95007,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 39, + "lastMonth": 174 } }, { @@ -95640,9 +95588,9 @@ "push" ], "downloadStats": { - "lastDay": 0, - "lastWeek": 19, - "lastMonth": 107 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 108 } }, { @@ -97035,8 +96983,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 10, + "lastMonth": 52 } }, { @@ -97805,7 +97753,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 34, + "lastWeek": 26, "lastMonth": 110 } }, @@ -98291,9 +98239,9 @@ } ], "downloadStats": { - "lastDay": 313, - "lastWeek": 1511, - "lastMonth": 6185 + "lastDay": 296, + "lastWeek": 1611, + "lastMonth": 6221 } }, { @@ -100471,9 +100419,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 157, - "lastMonth": 517 + "lastDay": 7, + "lastWeek": 154, + "lastMonth": 505 } }, { @@ -101207,9 +101155,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 5077, + "lastWeek": 35219, + "lastMonth": 153838 } } ] @@ -101842,8 +101790,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 12, + "lastMonth": 38 } }, { @@ -102096,9 +102044,9 @@ "username": "seankelly369" }, "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 6 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 7 } } ] @@ -102183,9 +102131,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 24, + "lastMonth": 60 } }, { @@ -103129,9 +103077,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 22, - "lastMonth": 176 + "lastDay": 2, + "lastWeek": 21, + "lastMonth": 174 } }, { @@ -103168,8 +103116,8 @@ ], "downloadStats": { "lastDay": 5, - "lastWeek": 76, - "lastMonth": 321 + "lastWeek": 30, + "lastMonth": 323 } }, { @@ -103471,9 +103419,9 @@ } ], "downloadStats": { - "lastDay": 125, - "lastWeek": 531, - "lastMonth": 2084 + "lastDay": 58, + "lastWeek": 488, + "lastMonth": 2001 } }, { @@ -104908,8 +104856,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 8 } } ] @@ -106498,44 +106446,6 @@ "lastMonth": 0 } }, - { - "name": "tns-core-modules-xml", - "scope": "unscoped", - "version": "2.1.0", - "description": "Telerik NativeScript Core Modules", - "date": "2016-07-15T15:20:19.179Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-core-modules-xml", - "homepage": "https://www.nativescript.org", - "repository": "https://github.com/NativeScript/NativeScript", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "publisher": { - "username": "spike1292", - "email": "spike1292@gmail.com" - }, - "maintainers": [ - { - "username": "spike1292", - "email": "spike1292@gmail.com" - } - ], - "keywords": [ - "tns", - "core", - "modules", - "xml" - ], - "author": { - "name": "spike1292", - "username": "spike1292" - }, - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-unit-test-runner-essent", "scope": "unscoped", @@ -107909,7 +107819,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 5, "lastMonth": 194 } @@ -107950,7 +107860,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 1, "lastMonth": 19 } @@ -112531,9 +112441,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 102, - "lastMonth": 461 + "lastDay": 10, + "lastWeek": 104, + "lastMonth": 457 } }, { @@ -112571,8 +112481,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 36, - "lastMonth": 126 + "lastWeek": 6, + "lastMonth": 120 } }, { @@ -112620,8 +112530,8 @@ ], "downloadStats": { "lastDay": 8, - "lastWeek": 122, - "lastMonth": 432 + "lastWeek": 18, + "lastMonth": 425 } }, { @@ -112665,8 +112575,8 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 46, + "lastDay": 0, + "lastWeek": 6, "lastMonth": 148 } }, @@ -112706,9 +112616,9 @@ } ], "downloadStats": { - "lastDay": 25, - "lastWeek": 127, - "lastMonth": 543 + "lastDay": 27, + "lastWeek": 139, + "lastMonth": 553 } }, { @@ -112756,8 +112666,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 44, - "lastMonth": 150 + "lastWeek": 45, + "lastMonth": 151 } }, { @@ -112843,8 +112753,8 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 2, + "lastDay": 1, + "lastWeek": 1, "lastMonth": 26 } }, @@ -112887,9 +112797,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 15, - "lastMonth": 33 + "lastDay": 1, + "lastWeek": 16, + "lastMonth": 32 } }, { @@ -112929,7 +112839,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 16 } }, { @@ -112968,9 +112878,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 115, + "lastMonth": 412 } }, { @@ -113008,8 +112918,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 4, + "lastMonth": 15 } }, { @@ -113054,8 +112964,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 8, + "lastMonth": 36 } }, { @@ -115236,6 +115146,58 @@ "lastMonth": 0 } }, + { + "name": "nativescript-phaser", + "scope": "unscoped", + "version": "1.0.0-alpha2", + "description": "Build awesome 2D games with Phaser.js and NativeScript", + "keywords": [ + "NativeScript", + "JavaScript", + "Android", + "iOS", + "native", + "phaser-ce", + "phaser", + "game", + "gl", + "graphics", + "opengl", + "2d", + "pixi", + "pixi.js", + "sprite", + "flash", + "nativescript", + "phaser" + ], + "date": "2020-07-01T18:14:29.243Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-phaser", + "homepage": "https://github.com/triniwiz/nativescript-phaser", + "repository": "https://github.com/triniwiz/nativescript-phaser", + "bugs": "https://github.com/triniwiz/nativescript-phaser/issues" + }, + "author": { + "name": "Osei Fortune", + "username": "triniwiz" + }, + "publisher": { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + }, + "maintainers": [ + { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-phaser-ce", "scope": "unscoped", @@ -117087,9 +117049,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 111, - "lastMonth": 722 + "lastDay": 23, + "lastWeek": 120, + "lastMonth": 719 } }, { @@ -117144,9 +117106,9 @@ } ], "downloadStats": { - "lastDay": 175, - "lastWeek": 858, - "lastMonth": 3369 + "lastDay": 39, + "lastWeek": 777, + "lastMonth": 3283 } }, { @@ -117203,8 +117165,8 @@ ], "downloadStats": { "lastDay": 22, - "lastWeek": 166, - "lastMonth": 711 + "lastWeek": 150, + "lastMonth": 680 } }, { @@ -117261,9 +117223,9 @@ } ], "downloadStats": { - "lastDay": 32, - "lastWeek": 198, - "lastMonth": 799 + "lastDay": 21, + "lastWeek": 185, + "lastMonth": 760 } }, { @@ -117318,9 +117280,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 2, + "lastMonth": 33 } }, { @@ -117428,41 +117390,6 @@ "name": "vanphuc06t1", "username": "vanphuc06t1", "plugins": [ - { - "name": "nativescript-baidu-push-ins", - "scope": "unscoped", - "version": "1.4.9", - "description": "The code for the Push Plugin for NativeScript.", - "date": "2018-10-16T04:20:41.434Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-baidu-push-ins" - }, - "author": { - "name": "vanphuc06t1", - "username": "vanphuc06t1" - }, - "publisher": { - "username": "vanphuc06t1", - "email": "vanphuc06t1@gmail.com" - }, - "maintainers": [ - { - "username": "vanphuc06t1", - "email": "vanphuc06t1@gmail.com" - } - ], - "keywords": [ - "nativescript", - "baidu", - "push", - "ins" - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-beacon-ins", "scope": "unscoped", @@ -117687,7 +117614,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 5 } }, { @@ -117959,9 +117886,9 @@ "advanced" ], "downloadStats": { - "lastDay": 4, - "lastWeek": 29, - "lastMonth": 179 + "lastDay": 9, + "lastWeek": 35, + "lastMonth": 185 } }, { @@ -118623,9 +118550,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 1, - "lastMonth": 103 + "lastMonth": 104 } }, { @@ -118664,9 +118591,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 1, - "lastMonth": 55 + "lastMonth": 56 } }, { @@ -118706,9 +118633,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 5, - "lastMonth": 43 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 44 } }, { @@ -118748,9 +118675,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 2, - "lastMonth": 25 + "lastMonth": 26 } }, { @@ -118790,9 +118717,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 19 } } ] @@ -119030,9 +118957,9 @@ } ], "downloadStats": { - "lastDay": 199, - "lastWeek": 1012, - "lastMonth": 4031 + "lastDay": 67, + "lastWeek": 937, + "lastMonth": 3929 } }, { @@ -119072,8 +118999,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 59, + "lastMonth": 194 } }, { @@ -120620,8 +120547,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 20 } }, { @@ -120665,8 +120592,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 20 } } ] @@ -121304,9 +121231,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 68, - "lastMonth": 262 + "lastDay": 2, + "lastWeek": 69, + "lastMonth": 258 } } ] @@ -121355,9 +121282,9 @@ "username": "yerol" }, "downloadStats": { - "lastDay": 5, - "lastWeek": 40, - "lastMonth": 125 + "lastDay": 1, + "lastWeek": 39, + "lastMonth": 124 } }, { @@ -122257,13 +122184,13 @@ "username": "zalastax", "plugins": [ { - "name": "@zalastax/nolb-nativescript-f", + "name": "@zalastax/nolb-nativescript-j", "scope": "zalastax", "version": "2023.1.24", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-24T13:29:30.196Z", + "date": "2023-01-24T13:29:42.701Z", "links": { - "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-f" + "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-j" }, "publisher": { "username": "zalastax", @@ -122278,7 +122205,7 @@ "keywords": [ "nolb", "nativescript", - "f" + "j" ], "author": { "name": "zalastax", @@ -122291,13 +122218,13 @@ } }, { - "name": "@zalastax/nolb-nativescript-3", + "name": "@zalastax/nolb-nativescript-x", "scope": "zalastax", "version": "2023.1.24", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-24T13:28:52.193Z", + "date": "2023-01-24T13:30:40.312Z", "links": { - "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-3" + "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-x" }, "publisher": { "username": "zalastax", @@ -122312,7 +122239,7 @@ "keywords": [ "nolb", "nativescript", - "3" + "x" ], "author": { "name": "zalastax", @@ -122325,13 +122252,13 @@ } }, { - "name": "@zalastax/nolb-nativescript-x", + "name": "@zalastax/nolb-nativescript-f", "scope": "zalastax", "version": "2023.1.24", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-24T13:30:40.312Z", + "date": "2023-01-24T13:29:30.196Z", "links": { - "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-x" + "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-f" }, "publisher": { "username": "zalastax", @@ -122346,7 +122273,7 @@ "keywords": [ "nolb", "nativescript", - "x" + "f" ], "author": { "name": "zalastax", @@ -122359,13 +122286,13 @@ } }, { - "name": "@zalastax/nolb-nativescript-j", + "name": "@zalastax/nolb-nativescript-s", "scope": "zalastax", "version": "2023.1.24", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-24T13:29:42.701Z", + "date": "2023-01-24T13:30:18.890Z", "links": { - "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-j" + "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-s" }, "publisher": { "username": "zalastax", @@ -122380,7 +122307,7 @@ "keywords": [ "nolb", "nativescript", - "j" + "s" ], "author": { "name": "zalastax", @@ -122393,13 +122320,13 @@ } }, { - "name": "@zalastax/nolb-nativescript-s", + "name": "@zalastax/nolb-nativescript-3", "scope": "zalastax", "version": "2023.1.24", "description": "Subpackage of no-one-left-behind.", - "date": "2023-01-24T13:30:18.890Z", + "date": "2023-01-24T13:28:52.193Z", "links": { - "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-s" + "npm": "https://www.npmjs.com/package/%40zalastax%2Fnolb-nativescript-3" }, "publisher": { "username": "zalastax", @@ -122414,7 +122341,7 @@ "keywords": [ "nolb", "nativescript", - "s" + "3" ], "author": { "name": "zalastax", diff --git a/src/data/fuseIndex.json b/src/data/fuseIndex.json index 1757cef8..71004f15 100644 --- a/src/data/fuseIndex.json +++ b/src/data/fuseIndex.json @@ -13289,6 +13289,51 @@ }, { "i": 232, + "$": { + "0": { + "v": "@jorwoody/nativescript-contacts", + "n": 1 + }, + "1": [ + { + "v": "contacts", + "i": 5, + "n": 1 + }, + { + "v": "nativescript", + "i": 4, + "n": 1 + }, + { + "v": "Contact Directory", + "i": 3, + "n": 0.707 + }, + { + "v": "Address Book", + "i": 2, + "n": 0.707 + }, + { + "v": "Contacts", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "A temporary fork of 'nativescript-contacts' plugin by Ryan Lebel. Allows adding of contacts without 'Account' on Android.", + "n": 0.243 + } + } + }, + { + "i": 233, "$": { "0": { "v": "@juit/nativescript-barcodeview", @@ -13333,7 +13378,7 @@ } }, { - "i": 233, + "i": 234, "$": { "0": { "v": "@juit/nativescript-local-notifications", @@ -13383,7 +13428,7 @@ } }, { - "i": 234, + "i": 235, "$": { "0": { "v": "@kefah/nativescript-google-maps", @@ -13438,7 +13483,7 @@ } }, { - "i": 235, + "i": 236, "$": { "0": { "v": "@kefah/nativescript-otp", @@ -13523,7 +13568,7 @@ } }, { - "i": 236, + "i": 237, "$": { "0": { "v": "@kefah/nativescript-uuid", @@ -13573,7 +13618,7 @@ } }, { - "i": 237, + "i": 238, "$": { "0": { "v": "@klippa/nativescript-http", @@ -13618,7 +13663,7 @@ } }, { - "i": 238, + "i": 239, "$": { "0": { "v": "@klippa/nativescript-login", @@ -13663,7 +13708,7 @@ } }, { - "i": 239, + "i": 240, "$": { "0": { "v": "@knotes/nativescript-camera-plus", @@ -13723,7 +13768,7 @@ } }, { - "i": 240, + "i": 241, "$": { "0": { "v": "@knotes/nativescript-clipboard", @@ -13778,7 +13823,7 @@ } }, { - "i": 241, + "i": 242, "$": { "0": { "v": "@knotes/nativescript-cscreenshot", @@ -13838,7 +13883,7 @@ } }, { - "i": 242, + "i": 243, "$": { "0": { "v": "@knotes/nativescript-generate-pdf", @@ -13893,7 +13938,7 @@ } }, { - "i": 243, + "i": 244, "$": { "0": { "v": "@knotes/nativescript-share-file", @@ -13953,7 +13998,7 @@ } }, { - "i": 244, + "i": 245, "$": { "0": { "v": "@kopis/eamplugin", @@ -13998,7 +14043,7 @@ } }, { - "i": 245, + "i": 246, "$": { "0": { "v": "@la-corp/la-barcodescanner-lib-aar", @@ -14043,7 +14088,7 @@ } }, { - "i": 246, + "i": 247, "$": { "0": { "v": "@leena-ai/nativescript-sdk", @@ -14093,7 +14138,7 @@ } }, { - "i": 247, + "i": 248, "$": { "0": { "v": "@leena-ai/sdk", @@ -14138,7 +14183,7 @@ } }, { - "i": 248, + "i": 249, "$": { "0": { "v": "@leoantares/ns8-batch-notifications", @@ -14193,7 +14238,7 @@ } }, { - "i": 249, + "i": 250, "$": { "0": { "v": "@lmslopes/nativescript-stripe", @@ -14248,7 +14293,7 @@ } }, { - "i": 250, + "i": 251, "$": { "0": { "v": "@localization/l10n", @@ -14363,7 +14408,7 @@ } }, { - "i": 251, + "i": 252, "$": { "0": { "v": "@lupascudan/loopback-sdk-builder", @@ -14423,7 +14468,7 @@ } }, { - "i": 252, + "i": 253, "$": { "0": { "v": "@mabs.dk/nativescript-animejs", @@ -14488,7 +14533,7 @@ } }, { - "i": 253, + "i": 254, "$": { "0": { "v": "@manojdcoder/nativescript-pedometer", @@ -14538,7 +14583,7 @@ } }, { - "i": 254, + "i": 255, "$": { "0": { "v": "@mapo80/nativescript-ngx-shadow", @@ -14588,7 +14633,7 @@ } }, { - "i": 255, + "i": 256, "$": { "0": { "v": "@mapo80/nativescript-range-seek-bar", @@ -14643,7 +14688,7 @@ } }, { - "i": 256, + "i": 257, "$": { "0": { "v": "@martin-juul/nativescript-astreamer", @@ -14728,7 +14773,7 @@ } }, { - "i": 257, + "i": 258, "$": { "0": { "v": "@martinbuezas/nativescript-filepicker", @@ -14778,7 +14823,7 @@ } }, { - "i": 258, + "i": 259, "$": { "0": { "v": "@martinbuezas/nativescript-share-file", @@ -14838,7 +14883,7 @@ } }, { - "i": 259, + "i": 260, "$": { "0": { "v": "@martinbuezas/nativescript-social-login", @@ -14913,7 +14958,7 @@ } }, { - "i": 260, + "i": 261, "$": { "0": { "v": "@mashdog/nativescript-accordion", @@ -14963,7 +15008,7 @@ } }, { - "i": 261, + "i": 262, "$": { "0": { "v": "@mashdog/nativescript-photoviewer", @@ -15043,7 +15088,7 @@ } }, { - "i": 262, + "i": 263, "$": { "0": { "v": "@mastergui/in-app-review", @@ -15117,66 +15162,6 @@ } } }, - { - "i": 263, - "$": { - "0": { - "v": "@matty0005/nativescript-camera-plus", - "n": 1 - }, - "1": [ - { - "v": "plus", - "i": 8, - "n": 1 - }, - { - "v": "camera", - "i": 7, - "n": 1 - }, - { - "v": "nativescript", - "i": 6, - "n": 1 - }, - { - "v": "Camera Plus", - "i": 5, - "n": 0.707 - }, - { - "v": "Camera", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, - "n": 1 - }, - { - "v": "Android", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "An advanced, embeddable camera for NativeScript.", - "n": 0.408 - } - } - }, { "i": 264, "$": { @@ -23846,56 +23831,6 @@ }, { "i": 407, - "$": { - "0": { - "v": "@nativescript/canvas-babylon", - "n": 1 - }, - "1": [ - { - "v": "babylon", - "i": 6, - "n": 1 - }, - { - "v": "canvas", - "i": 5, - "n": 1 - }, - { - "v": "Android", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, - "n": 1 - }, - { - "v": "TypeScript", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "```javascript ns plugin add @nativescript/canvas-babylon ```", - "n": 0.408 - } - } - }, - { - "i": 408, "$": { "0": { "v": "@nativescript/canvas-media", @@ -23945,7 +23880,7 @@ } }, { - "i": 409, + "i": 408, "$": { "0": { "v": "@nativescript/canvas-phaser", @@ -23995,7 +23930,7 @@ } }, { - "i": 410, + "i": 409, "$": { "0": { "v": "@nativescript/canvas-phaser-ce", @@ -24050,7 +23985,7 @@ } }, { - "i": 411, + "i": 410, "$": { "0": { "v": "@nativescript/canvas-pixi", @@ -24100,7 +24035,7 @@ } }, { - "i": 412, + "i": 411, "$": { "0": { "v": "@nativescript/canvas-polyfill", @@ -24150,7 +24085,7 @@ } }, { - "i": 413, + "i": 412, "$": { "0": { "v": "@nativescript/canvas-three", @@ -24200,7 +24135,7 @@ } }, { - "i": 414, + "i": 413, "$": { "0": { "v": "@nativescript/capacitor", @@ -24235,7 +24170,7 @@ } }, { - "i": 415, + "i": 414, "$": { "0": { "v": "@nativescript/contacts", @@ -24295,7 +24230,7 @@ } }, { - "i": 416, + "i": 415, "$": { "0": { "v": "@nativescript/core", @@ -24340,7 +24275,7 @@ } }, { - "i": 417, + "i": 416, "$": { "0": { "v": "@nativescript/core-widgets", @@ -24365,7 +24300,7 @@ } }, { - "i": 418, + "i": 417, "$": { "0": { "v": "@nativescript/datetimepicker", @@ -24425,7 +24360,7 @@ } }, { - "i": 419, + "i": 418, "$": { "0": { "v": "@nativescript/debug-ios", @@ -24475,7 +24410,7 @@ } }, { - "i": 420, + "i": 419, "$": { "0": { "v": "@nativescript/detox", @@ -24540,7 +24475,7 @@ } }, { - "i": 421, + "i": 420, "$": { "0": { "v": "@nativescript/directions", @@ -24585,7 +24520,7 @@ } }, { - "i": 422, + "i": 421, "$": { "0": { "v": "@nativescript/doctor", @@ -24620,7 +24555,7 @@ } }, { - "i": 423, + "i": 422, "$": { "0": { "v": "@nativescript/email", @@ -24685,7 +24620,7 @@ } }, { - "i": 424, + "i": 423, "$": { "0": { "v": "@nativescript/eslint-plugin", @@ -24725,7 +24660,7 @@ } }, { - "i": 425, + "i": 424, "$": { "0": { "v": "@nativescript/facebook", @@ -24770,7 +24705,7 @@ } }, { - "i": 426, + "i": 425, "$": { "0": { "v": "@nativescript/fingerprint-auth", @@ -24820,7 +24755,7 @@ } }, { - "i": 427, + "i": 426, "$": { "0": { "v": "@nativescript/firebase-admob", @@ -24885,7 +24820,7 @@ } }, { - "i": 428, + "i": 427, "$": { "0": { "v": "@nativescript/firebase-analytics", @@ -24955,7 +24890,7 @@ } }, { - "i": 429, + "i": 428, "$": { "0": { "v": "@nativescript/firebase-app-check", @@ -25035,7 +24970,7 @@ } }, { - "i": 430, + "i": 429, "$": { "0": { "v": "@nativescript/firebase-app-check-debug", @@ -25120,7 +25055,7 @@ } }, { - "i": 431, + "i": 430, "$": { "0": { "v": "@nativescript/firebase-auth", @@ -25240,7 +25175,7 @@ } }, { - "i": 432, + "i": 431, "$": { "0": { "v": "@nativescript/firebase-core", @@ -25390,7 +25325,7 @@ } }, { - "i": 433, + "i": 432, "$": { "0": { "v": "@nativescript/firebase-crashlytics", @@ -25475,7 +25410,7 @@ } }, { - "i": 434, + "i": 433, "$": { "0": { "v": "@nativescript/firebase-database", @@ -25560,7 +25495,7 @@ } }, { - "i": 435, + "i": 434, "$": { "0": { "v": "@nativescript/firebase-dynamic-links", @@ -25635,7 +25570,7 @@ } }, { - "i": 436, + "i": 435, "$": { "0": { "v": "@nativescript/firebase-firestore", @@ -25735,7 +25670,7 @@ } }, { - "i": 437, + "i": 436, "$": { "0": { "v": "@nativescript/firebase-functions", @@ -25800,7 +25735,7 @@ } }, { - "i": 438, + "i": 437, "$": { "0": { "v": "@nativescript/firebase-in-app-messaging", @@ -25885,7 +25820,7 @@ } }, { - "i": 439, + "i": 438, "$": { "0": { "v": "@nativescript/firebase-installations", @@ -25945,7 +25880,7 @@ } }, { - "i": 440, + "i": 439, "$": { "0": { "v": "@nativescript/firebase-messaging", @@ -26015,7 +25950,7 @@ } }, { - "i": 441, + "i": 440, "$": { "0": { "v": "@nativescript/firebase-messaging-core", @@ -26090,7 +26025,7 @@ } }, { - "i": 442, + "i": 441, "$": { "0": { "v": "@nativescript/firebase-performance", @@ -26160,7 +26095,7 @@ } }, { - "i": 443, + "i": 442, "$": { "0": { "v": "@nativescript/firebase-remote-config", @@ -26250,7 +26185,7 @@ } }, { - "i": 444, + "i": 443, "$": { "0": { "v": "@nativescript/firebase-storage", @@ -26360,7 +26295,7 @@ } }, { - "i": 445, + "i": 444, "$": { "0": { "v": "@nativescript/firebase-ui", @@ -26500,7 +26435,7 @@ } }, { - "i": 446, + "i": 445, "$": { "0": { "v": "@nativescript/flutter", @@ -26555,7 +26490,7 @@ } }, { - "i": 447, + "i": 446, "$": { "0": { "v": "@nativescript/geolocation", @@ -26600,7 +26535,7 @@ } }, { - "i": 448, + "i": 447, "$": { "0": { "v": "@nativescript/google-maps", @@ -26670,7 +26605,7 @@ } }, { - "i": 449, + "i": 448, "$": { "0": { "v": "@nativescript/google-pay", @@ -26720,7 +26655,7 @@ } }, { - "i": 450, + "i": 449, "$": { "0": { "v": "@nativescript/google-signin", @@ -26770,7 +26705,7 @@ } }, { - "i": 451, + "i": 450, "$": { "0": { "v": "@nativescript/haptics", @@ -26825,7 +26760,7 @@ } }, { - "i": 452, + "i": 451, "$": { "0": { "v": "@nativescript/hook", @@ -26845,7 +26780,7 @@ } }, { - "i": 453, + "i": 452, "$": { "0": { "v": "@nativescript/imagepicker", @@ -26890,7 +26825,7 @@ } }, { - "i": 454, + "i": 453, "$": { "0": { "v": "@nativescript/ionic", @@ -26910,7 +26845,7 @@ } }, { - "i": 455, + "i": 454, "$": { "0": { "v": "@nativescript/ionic-portals", @@ -26970,7 +26905,7 @@ } }, { - "i": 456, + "i": 455, "$": { "0": { "v": "@nativescript/ios", @@ -27005,7 +26940,7 @@ } }, { - "i": 457, + "i": 456, "$": { "0": { "v": "@nativescript/ios-security", @@ -27055,7 +26990,7 @@ } }, { - "i": 458, + "i": 457, "$": { "0": { "v": "@nativescript/iqkeyboardmanager", @@ -27100,7 +27035,7 @@ } }, { - "i": 459, + "i": 458, "$": { "0": { "v": "@nativescript/jetpack-compose", @@ -27150,7 +27085,7 @@ } }, { - "i": 460, + "i": 459, "$": { "0": { "v": "@nativescript/keyboard-toolbar", @@ -27215,7 +27150,7 @@ } }, { - "i": 461, + "i": 460, "$": { "0": { "v": "@nativescript/local-notifications", @@ -27265,7 +27200,7 @@ } }, { - "i": 462, + "i": 461, "$": { "0": { "v": "@nativescript/localize", @@ -27310,7 +27245,7 @@ } }, { - "i": 463, + "i": 462, "$": { "0": { "v": "@nativescript/mlkit-barcode-scanning", @@ -27365,7 +27300,7 @@ } }, { - "i": 464, + "i": 463, "$": { "0": { "v": "@nativescript/mlkit-core", @@ -27415,7 +27350,7 @@ } }, { - "i": 465, + "i": 464, "$": { "0": { "v": "@nativescript/mlkit-digital-ink-recognition", @@ -27475,7 +27410,7 @@ } }, { - "i": 466, + "i": 465, "$": { "0": { "v": "@nativescript/mlkit-face-detection", @@ -27530,7 +27465,7 @@ } }, { - "i": 467, + "i": 466, "$": { "0": { "v": "@nativescript/mlkit-image-labeling", @@ -27585,7 +27520,7 @@ } }, { - "i": 468, + "i": 467, "$": { "0": { "v": "@nativescript/mlkit-object-detection", @@ -27640,7 +27575,7 @@ } }, { - "i": 469, + "i": 468, "$": { "0": { "v": "@nativescript/mlkit-pose-detection", @@ -27695,7 +27630,7 @@ } }, { - "i": 470, + "i": 469, "$": { "0": { "v": "@nativescript/mlkit-selfie-segmentation", @@ -27750,7 +27685,7 @@ } }, { - "i": 471, + "i": 470, "$": { "0": { "v": "@nativescript/mlkit-text-recognition", @@ -27805,7 +27740,7 @@ } }, { - "i": 472, + "i": 471, "$": { "0": { "v": "@nativescript/nx", @@ -27855,7 +27790,7 @@ } }, { - "i": 473, + "i": 472, "$": { "0": { "v": "@nativescript/payments", @@ -27930,7 +27865,7 @@ } }, { - "i": 474, + "i": 473, "$": { "0": { "v": "@nativescript/pdf", @@ -27980,7 +27915,7 @@ } }, { - "i": 475, + "i": 474, "$": { "0": { "v": "@nativescript/picker", @@ -28025,7 +27960,7 @@ } }, { - "i": 476, + "i": 475, "$": { "0": { "v": "@nativescript/plugin-tools", @@ -28065,7 +28000,7 @@ } }, { - "i": 477, + "i": 476, "$": { "0": { "v": "@nativescript/preview-cli", @@ -28086,57 +28021,7 @@ } }, { - "i": 478, - "$": { - "0": { - "v": "@nativescript/rive", - "n": 1 - }, - "1": [ - { - "v": "rive", - "i": 6, - "n": 1 - }, - { - "v": "Rive", - "i": 5, - "n": 1 - }, - { - "v": "Android", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, - "n": 1 - }, - { - "v": "TypeScript", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "Rive for NativeScript", - "n": 0.577 - } - } - }, - { - "i": 479, + "i": 477, "$": { "0": { "v": "@nativescript/schematics-executor", @@ -28181,7 +28066,7 @@ } }, { - "i": 480, + "i": 478, "$": { "0": { "v": "@nativescript/secure-storage", @@ -28231,7 +28116,7 @@ } }, { - "i": 481, + "i": 479, "$": { "0": { "v": "@nativescript/shared-notification-delegate", @@ -28281,7 +28166,7 @@ } }, { - "i": 482, + "i": 480, "$": { "0": { "v": "@nativescript/social-share", @@ -28331,7 +28216,7 @@ } }, { - "i": 483, + "i": 481, "$": { "0": { "v": "@nativescript/storybook", @@ -28376,7 +28261,7 @@ } }, { - "i": 484, + "i": 482, "$": { "0": { "v": "@nativescript/swift-ui", @@ -28426,7 +28311,7 @@ } }, { - "i": 485, + "i": 483, "$": { "0": { "v": "@nativescript/tailwind", @@ -28486,7 +28371,7 @@ } }, { - "i": 486, + "i": 484, "$": { "0": { "v": "@nativescript/template-blank", @@ -28551,7 +28436,7 @@ } }, { - "i": 487, + "i": 485, "$": { "0": { "v": "@nativescript/template-blank-ng", @@ -28621,7 +28506,7 @@ } }, { - "i": 488, + "i": 486, "$": { "0": { "v": "@nativescript/template-blank-react", @@ -28681,7 +28566,7 @@ } }, { - "i": 489, + "i": 487, "$": { "0": { "v": "@nativescript/template-blank-react-vision", @@ -28751,7 +28636,7 @@ } }, { - "i": 490, + "i": 488, "$": { "0": { "v": "@nativescript/template-blank-solid-vision", @@ -28821,7 +28706,7 @@ } }, { - "i": 491, + "i": 489, "$": { "0": { "v": "@nativescript/template-blank-svelte", @@ -28896,7 +28781,7 @@ } }, { - "i": 492, + "i": 490, "$": { "0": { "v": "@nativescript/template-blank-svelte-vision", @@ -28971,7 +28856,7 @@ } }, { - "i": 493, + "i": 491, "$": { "0": { "v": "@nativescript/template-blank-ts", @@ -29036,7 +28921,7 @@ } }, { - "i": 494, + "i": 492, "$": { "0": { "v": "@nativescript/template-blank-vue", @@ -29121,7 +29006,7 @@ } }, { - "i": 495, + "i": 493, "$": { "0": { "v": "@nativescript/template-blank-vue-ts", @@ -29211,7 +29096,7 @@ } }, { - "i": 496, + "i": 494, "$": { "0": { "v": "@nativescript/template-blank-vue-vision", @@ -29281,7 +29166,7 @@ } }, { - "i": 497, + "i": 495, "$": { "0": { "v": "@nativescript/template-drawer-navigation", @@ -29356,7 +29241,7 @@ } }, { - "i": 498, + "i": 496, "$": { "0": { "v": "@nativescript/template-drawer-navigation-ng", @@ -29441,7 +29326,7 @@ } }, { - "i": 499, + "i": 497, "$": { "0": { "v": "@nativescript/template-drawer-navigation-ts", @@ -29521,7 +29406,7 @@ } }, { - "i": 500, + "i": 498, "$": { "0": { "v": "@nativescript/template-drawer-navigation-vue", @@ -29611,7 +29496,7 @@ } }, { - "i": 501, + "i": 499, "$": { "0": { "v": "@nativescript/template-hello-world", @@ -29671,7 +29556,7 @@ } }, { - "i": 502, + "i": 500, "$": { "0": { "v": "@nativescript/template-hello-world-ng", @@ -29731,7 +29616,7 @@ } }, { - "i": 503, + "i": 501, "$": { "0": { "v": "@nativescript/template-hello-world-ng-vision", @@ -29801,7 +29686,7 @@ } }, { - "i": 504, + "i": 502, "$": { "0": { "v": "@nativescript/template-hello-world-ts", @@ -29856,7 +29741,7 @@ } }, { - "i": 505, + "i": 503, "$": { "0": { "v": "@nativescript/template-hello-world-ts-vision", @@ -29926,7 +29811,7 @@ } }, { - "i": 506, + "i": 504, "$": { "0": { "v": "@nativescript/template-master-detail", @@ -30001,7 +29886,7 @@ } }, { - "i": 507, + "i": 505, "$": { "0": { "v": "@nativescript/template-master-detail-ng", @@ -30086,7 +29971,7 @@ } }, { - "i": 508, + "i": 506, "$": { "0": { "v": "@nativescript/template-master-detail-ts", @@ -30161,7 +30046,7 @@ } }, { - "i": 509, + "i": 507, "$": { "0": { "v": "@nativescript/template-master-detail-vue", @@ -30251,7 +30136,7 @@ } }, { - "i": 510, + "i": 508, "$": { "0": { "v": "@nativescript/template-tab-navigation", @@ -30326,7 +30211,7 @@ } }, { - "i": 511, + "i": 509, "$": { "0": { "v": "@nativescript/template-tab-navigation-ng", @@ -30411,7 +30296,7 @@ } }, { - "i": 512, + "i": 510, "$": { "0": { "v": "@nativescript/template-tab-navigation-ts", @@ -30491,7 +30376,7 @@ } }, { - "i": 513, + "i": 511, "$": { "0": { "v": "@nativescript/template-tab-navigation-vue", @@ -30581,7 +30466,7 @@ } }, { - "i": 514, + "i": 512, "$": { "0": { "v": "@nativescript/theme", @@ -30601,7 +30486,7 @@ } }, { - "i": 515, + "i": 513, "$": { "0": { "v": "@nativescript/theme-switcher", @@ -30661,7 +30546,7 @@ } }, { - "i": 516, + "i": 514, "$": { "0": { "v": "@nativescript/tslint-rules", @@ -30701,7 +30586,7 @@ } }, { - "i": 517, + "i": 515, "$": { "0": { "v": "@nativescript/twitter", @@ -30746,7 +30631,7 @@ } }, { - "i": 518, + "i": 516, "$": { "0": { "v": "@nativescript/types", @@ -30766,7 +30651,7 @@ } }, { - "i": 519, + "i": 517, "$": { "0": { "v": "@nativescript/types-android", @@ -30791,7 +30676,7 @@ } }, { - "i": 520, + "i": 518, "$": { "0": { "v": "@nativescript/types-ios", @@ -30816,7 +30701,7 @@ } }, { - "i": 521, + "i": 519, "$": { "0": { "v": "@nativescript/types-minimal", @@ -30841,7 +30726,7 @@ } }, { - "i": 522, + "i": 520, "$": { "0": { "v": "@nativescript/ui-base", @@ -30866,7 +30751,7 @@ } }, { - "i": 523, + "i": 521, "$": { "0": { "v": "@nativescript/ui-charts", @@ -30921,7 +30806,7 @@ } }, { - "i": 524, + "i": 522, "$": { "0": { "v": "@nativescript/unit-test-runner", @@ -30951,7 +30836,7 @@ } }, { - "i": 525, + "i": 523, "$": { "0": { "v": "@nativescript/visionos", @@ -30986,7 +30871,7 @@ } }, { - "i": 526, + "i": 524, "$": { "0": { "v": "@nativescript/webpack", @@ -31006,7 +30891,7 @@ } }, { - "i": 527, + "i": 525, "$": { "0": { "v": "@nativescript/zip", @@ -31051,7 +30936,7 @@ } }, { - "i": 528, + "i": 526, "$": { "0": { "v": "@nativescript/zone-js", @@ -31076,7 +30961,7 @@ } }, { - "i": 529, + "i": 527, "$": { "0": { "v": "@navara/nativescript-adal", @@ -31121,7 +31006,7 @@ } }, { - "i": 530, + "i": 528, "$": { "0": { "v": "@nawah/nativescript", @@ -31141,7 +31026,7 @@ } }, { - "i": 531, + "i": 529, "$": { "0": { "v": "@ncenerar/nativescript-activelook-sdk", @@ -31196,7 +31081,7 @@ } }, { - "i": 532, + "i": 530, "$": { "0": { "v": "@ncenerar/nativescript-hello-world", @@ -31251,7 +31136,7 @@ } }, { - "i": 533, + "i": 531, "$": { "0": { "v": "@ngx-formly/nativescript", @@ -31271,7 +31156,7 @@ } }, { - "i": 534, + "i": 532, "$": { "0": { "v": "@nhuttm/nativescript-webrtc", @@ -31321,7 +31206,7 @@ } }, { - "i": 535, + "i": 533, "$": { "0": { "v": "@nickykln/nativescript-google-analytics", @@ -31391,7 +31276,7 @@ } }, { - "i": 536, + "i": 534, "$": { "0": { "v": "@nickykln/nativescript-masked-text-field", @@ -31461,7 +31346,7 @@ } }, { - "i": 537, + "i": 535, "$": { "0": { "v": "@nivinjoseph/n-mobile", @@ -31501,7 +31386,7 @@ } }, { - "i": 538, + "i": 536, "$": { "0": { "v": "@nota/nativescript-accessibility-ext", @@ -31571,7 +31456,7 @@ } }, { - "i": 539, + "i": 537, "$": { "0": { "v": "@nota/nativescript-audioplayer", @@ -31616,7 +31501,7 @@ } }, { - "i": 540, + "i": 538, "$": { "0": { "v": "@nota/nativescript-webview-ext", @@ -31676,7 +31561,7 @@ } }, { - "i": 541, + "i": 539, "$": { "0": { "v": "@nstudio/filterable-listpicker", @@ -31726,7 +31611,7 @@ } }, { - "i": 542, + "i": 540, "$": { "0": { "v": "@nstudio/nativescript", @@ -31781,7 +31666,7 @@ } }, { - "i": 543, + "i": 541, "$": { "0": { "v": "@nstudio/nativescript-airship", @@ -31831,7 +31716,7 @@ } }, { - "i": 544, + "i": 542, "$": { "0": { "v": "@nstudio/nativescript-airship-adm", @@ -31886,7 +31771,7 @@ } }, { - "i": 545, + "i": 543, "$": { "0": { "v": "@nstudio/nativescript-airship-fcm", @@ -31941,7 +31826,7 @@ } }, { - "i": 546, + "i": 544, "$": { "0": { "v": "@nstudio/nativescript-airship-hms", @@ -31996,7 +31881,7 @@ } }, { - "i": 547, + "i": 545, "$": { "0": { "v": "@nstudio/nativescript-angular", @@ -32061,7 +31946,7 @@ } }, { - "i": 548, + "i": 546, "$": { "0": { "v": "@nstudio/nativescript-appcues", @@ -32111,7 +31996,7 @@ } }, { - "i": 549, + "i": 547, "$": { "0": { "v": "@nstudio/nativescript-aptabase", @@ -32166,7 +32051,7 @@ } }, { - "i": 550, + "i": 548, "$": { "0": { "v": "@nstudio/nativescript-audio-recorder", @@ -32236,7 +32121,7 @@ } }, { - "i": 551, + "i": 549, "$": { "0": { "v": "@nstudio/nativescript-barcodescanner", @@ -32386,7 +32271,7 @@ } }, { - "i": 552, + "i": 550, "$": { "0": { "v": "@nstudio/nativescript-blur", @@ -32436,7 +32321,7 @@ } }, { - "i": 553, + "i": 551, "$": { "0": { "v": "@nstudio/nativescript-camera-plus", @@ -32496,7 +32381,7 @@ } }, { - "i": 554, + "i": 552, "$": { "0": { "v": "@nstudio/nativescript-cardview", @@ -32546,7 +32431,7 @@ } }, { - "i": 555, + "i": 553, "$": { "0": { "v": "@nstudio/nativescript-carousel", @@ -32616,7 +32501,7 @@ } }, { - "i": 556, + "i": 554, "$": { "0": { "v": "@nstudio/nativescript-checkbox", @@ -32676,7 +32561,7 @@ } }, { - "i": 557, + "i": 555, "$": { "0": { "v": "@nstudio/nativescript-coachmarks", @@ -32736,7 +32621,7 @@ } }, { - "i": 558, + "i": 556, "$": { "0": { "v": "@nstudio/nativescript-dialog", @@ -32801,7 +32686,7 @@ } }, { - "i": 559, + "i": 557, "$": { "0": { "v": "@nstudio/nativescript-dynatrace", @@ -32851,7 +32736,7 @@ } }, { - "i": 560, + "i": 558, "$": { "0": { "v": "@nstudio/nativescript-exoplayer", @@ -32921,7 +32806,7 @@ } }, { - "i": 561, + "i": 559, "$": { "0": { "v": "@nstudio/nativescript-fancyalert", @@ -32971,7 +32856,7 @@ } }, { - "i": 562, + "i": 560, "$": { "0": { "v": "@nstudio/nativescript-filterable-listpicker", @@ -33026,7 +32911,7 @@ } }, { - "i": 563, + "i": 561, "$": { "0": { "v": "@nstudio/nativescript-floatingactionbutton", @@ -33096,7 +32981,7 @@ } }, { - "i": 564, + "i": 562, "$": { "0": { "v": "@nstudio/nativescript-fluid-segmented-bar", @@ -33156,7 +33041,7 @@ } }, { - "i": 565, + "i": 563, "$": { "0": { "v": "@nstudio/nativescript-freshchat", @@ -33206,7 +33091,7 @@ } }, { - "i": 566, + "i": 564, "$": { "0": { "v": "@nstudio/nativescript-https", @@ -33296,7 +33181,7 @@ } }, { - "i": 567, + "i": 565, "$": { "0": { "v": "@nstudio/nativescript-input-mask", @@ -33351,20 +33236,15 @@ } }, { - "i": 568, + "i": 566, "$": { "0": { - "v": "@nstudio/nativescript-label-glitch", + "v": "@nstudio/nativescript-intercom", "n": 1 }, "1": [ { - "v": "glitch", - "i": 7, - "n": 1 - }, - { - "v": "label", + "v": "intercom", "i": 6, "n": 1 }, @@ -33400,21 +33280,21 @@ } ], "2": { - "v": "Label with a Glitch!", + "v": "Intercom SDK for NativeScript", "n": 0.5 } } }, { - "i": 569, + "i": 567, "$": { "0": { - "v": "@nstudio/nativescript-label-marquee", + "v": "@nstudio/nativescript-label-glitch", "n": 1 }, "1": [ { - "v": "marquee", + "v": "glitch", "i": 7, "n": 1 }, @@ -33455,26 +33335,26 @@ } ], "2": { - "v": "A Label which can scroll with a marquee effect when the text outgrows the available width.", - "n": 0.25 + "v": "Label with a Glitch!", + "n": 0.5 } } }, { - "i": 570, + "i": 568, "$": { "0": { - "v": "@nstudio/nativescript-loading-indicator", + "v": "@nstudio/nativescript-label-marquee", "n": 1 }, "1": [ { - "v": "indicator", + "v": "marquee", "i": 7, "n": 1 }, { - "v": "loading", + "v": "label", "i": 6, "n": 1 }, @@ -33510,76 +33390,76 @@ } ], "2": { - "v": "A NativeScript plugin for showing an overlayed loading indicator.", - "n": 0.333 + "v": "A Label which can scroll with a marquee effect when the text outgrows the available width.", + "n": 0.25 } } }, { - "i": 571, + "i": 569, "$": { "0": { - "v": "@nstudio/nativescript-mapbox", + "v": "@nstudio/nativescript-loading-indicator", "n": 1 }, "1": [ { - "v": "mapbox", + "v": "indicator", "i": 7, "n": 1 }, { - "v": "nativescript", + "v": "loading", "i": 6, "n": 1 }, { - "v": "Mapbox", + "v": "nativescript", "i": 5, "n": 1 }, { - "v": "Native Maps", + "v": "Android", "i": 4, - "n": 0.707 + "n": 1 }, { - "v": "Maps", + "v": "iOS", "i": 3, "n": 1 }, { - "v": "Map", + "v": "TypeScript", "i": 2, "n": 1 }, { - "v": "NativeScript", + "v": "JavaScript", "i": 1, "n": 1 }, { - "v": "ecosystem:nativescript", + "v": "NativeScript", "i": 0, "n": 1 } ], "2": { - "v": "A Nativescript plugin for Mapbox Native Maps.", - "n": 0.378 + "v": "A NativeScript plugin for showing an overlayed loading indicator.", + "n": 0.333 } } }, { - "i": 572, + "i": 570, "$": { "0": { - "v": "@nstudio/nativescript-mixpanel", + "v": "@nstudio/nativescript-mapbox", "n": 1 }, "1": [ { - "v": "mixpanel", + "v": "mapbox", "i": 7, "n": 1 }, @@ -33589,197 +33469,252 @@ "n": 1 }, { - "v": "TypeScript", + "v": "Mapbox", "i": 5, "n": 1 }, { - "v": "NativeScript", + "v": "Native Maps", "i": 4, - "n": 1 + "n": 0.707 }, { - "v": "Mixpanel", + "v": "Maps", "i": 3, "n": 1 }, { - "v": "JavaScript", + "v": "Map", "i": 2, "n": 1 }, { - "v": "iOS", + "v": "NativeScript", "i": 1, "n": 1 }, { - "v": "Android", + "v": "ecosystem:nativescript", "i": 0, "n": 1 } ], "2": { - "v": "A NativeScript plugin for Mixpanel tracking", - "n": 0.408 + "v": "A Nativescript plugin for Mapbox Native Maps.", + "n": 0.378 } } }, { - "i": 573, + "i": 571, "$": { "0": { - "v": "@nstudio/nativescript-onfido", + "v": "@nstudio/nativescript-mixpanel", "n": 1 }, "1": [ { - "v": "onfido", - "i": 6, + "v": "mixpanel", + "i": 7, "n": 1 }, { "v": "nativescript", - "i": 5, - "n": 1 - }, - { - "v": "Android", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, + "i": 6, "n": 1 }, { "v": "TypeScript", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "Onfido SDK for NativeScript", - "n": 0.5 - } - } - }, - { - "i": 574, - "$": { - "0": { - "v": "@nstudio/nativescript-paytm", - "n": 1 - }, - "1": [ - { - "v": "paytm", "i": 5, "n": 1 }, - { - "v": "nativescript", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, - "n": 1 - }, - { - "v": "Android", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, { "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "NativeScript plugin to integrate Paytm payments SDK to your app.", - "n": 0.316 - } - } - }, - { - "i": 575, - "$": { - "0": { - "v": "@nstudio/nativescript-plaid", - "n": 1 - }, - "1": [ - { - "v": "plaid", - "i": 6, - "n": 1 - }, - { - "v": "nativescript", - "i": 5, - "n": 1 - }, - { - "v": "Android", "i": 4, "n": 1 }, { - "v": "iOS", + "v": "Mixpanel", "i": 3, "n": 1 }, { - "v": "TypeScript", + "v": "JavaScript", "i": 2, "n": 1 }, { - "v": "JavaScript", + "v": "iOS", "i": 1, "n": 1 }, { - "v": "NativeScript", + "v": "Android", "i": 0, "n": 1 } ], "2": { - "v": "Plaid SDK for NativeScript", - "n": 0.5 + "v": "A NativeScript plugin for Mixpanel tracking", + "n": 0.408 } } }, { - "i": 576, + "i": 572, "$": { "0": { - "v": "@nstudio/nativescript-qr", + "v": "@nstudio/nativescript-onfido", "n": 1 }, "1": [ { - "v": "qr", + "v": "onfido", + "i": 6, + "n": 1 + }, + { + "v": "nativescript", + "i": 5, + "n": 1 + }, + { + "v": "Android", + "i": 4, + "n": 1 + }, + { + "v": "iOS", + "i": 3, + "n": 1 + }, + { + "v": "TypeScript", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Onfido SDK for NativeScript", + "n": 0.5 + } + } + }, + { + "i": 573, + "$": { + "0": { + "v": "@nstudio/nativescript-paytm", + "n": 1 + }, + "1": [ + { + "v": "paytm", + "i": 5, + "n": 1 + }, + { + "v": "nativescript", + "i": 4, + "n": 1 + }, + { + "v": "iOS", + "i": 3, + "n": 1 + }, + { + "v": "Android", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "NativeScript plugin to integrate Paytm payments SDK to your app.", + "n": 0.316 + } + } + }, + { + "i": 574, + "$": { + "0": { + "v": "@nstudio/nativescript-plaid", + "n": 1 + }, + "1": [ + { + "v": "plaid", + "i": 6, + "n": 1 + }, + { + "v": "nativescript", + "i": 5, + "n": 1 + }, + { + "v": "Android", + "i": 4, + "n": 1 + }, + { + "v": "iOS", + "i": 3, + "n": 1 + }, + { + "v": "TypeScript", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Plaid SDK for NativeScript", + "n": 0.5 + } + } + }, + { + "i": 575, + "$": { + "0": { + "v": "@nstudio/nativescript-qr", + "n": 1 + }, + "1": [ + { + "v": "qr", "i": 6, "n": 1 }, @@ -33821,7 +33756,7 @@ } }, { - "i": 577, + "i": 576, "$": { "0": { "v": "@nstudio/nativescript-rad-imagepicker", @@ -33881,7 +33816,7 @@ } }, { - "i": 578, + "i": 577, "$": { "0": { "v": "@nstudio/nativescript-shimmer", @@ -33931,7 +33866,7 @@ } }, { - "i": 579, + "i": 578, "$": { "0": { "v": "@nstudio/nativescript-smart-adserver", @@ -33981,7 +33916,7 @@ } }, { - "i": 580, + "i": 579, "$": { "0": { "v": "@nstudio/nativescript-smartlook", @@ -34041,7 +33976,7 @@ } }, { - "i": 581, + "i": 580, "$": { "0": { "v": "@nstudio/nativescript-snackbar", @@ -34101,7 +34036,7 @@ } }, { - "i": 582, + "i": 581, "$": { "0": { "v": "@nstudio/nativescript-tracking-transparency", @@ -34151,7 +34086,7 @@ } }, { - "i": 583, + "i": 582, "$": { "0": { "v": "@nstudio/nativescript-variable-blur-view", @@ -34211,7 +34146,7 @@ } }, { - "i": 584, + "i": 583, "$": { "0": { "v": "@nstudio/nativescript-xavier-passport", @@ -34276,7 +34211,7 @@ } }, { - "i": 585, + "i": 584, "$": { "0": { "v": "@nstudio/root-detection", @@ -34321,7 +34256,7 @@ } }, { - "i": 586, + "i": 585, "$": { "0": { "v": "@nstudio/schematics", @@ -34391,7 +34326,7 @@ } }, { - "i": 587, + "i": 586, "$": { "0": { "v": "@nstudio/ui-collectionview", @@ -34516,7 +34451,7 @@ } }, { - "i": 588, + "i": 587, "$": { "0": { "v": "@nstudio/xplat", @@ -34586,7 +34521,7 @@ } }, { - "i": 589, + "i": 588, "$": { "0": { "v": "@nstudio/xplat-utils", @@ -34661,7 +34596,7 @@ } }, { - "i": 590, + "i": 589, "$": { "0": { "v": "@nswitfy/jitsi-meet", @@ -34726,7 +34661,7 @@ } }, { - "i": 591, + "i": 590, "$": { "0": { "v": "@nswitfy/stomp-connector", @@ -34796,7 +34731,7 @@ } }, { - "i": 592, + "i": 591, "$": { "0": { "v": "@nuno-morais/nativescript-multiple-list-picker", @@ -34861,7 +34796,7 @@ } }, { - "i": 593, + "i": 592, "$": { "0": { "v": "@nuno-morais/nativescript-twilio", @@ -34911,7 +34846,7 @@ } }, { - "i": 594, + "i": 593, "$": { "0": { "v": "@nuxstep/nativescript-spotify", @@ -34966,7 +34901,7 @@ } }, { - "i": 595, + "i": 594, "$": { "0": { "v": "@olinger/nativescript-exoplayer", @@ -35036,7 +34971,7 @@ } }, { - "i": 596, + "i": 595, "$": { "0": { "v": "@oliverphaser/nativescript-bitmap-factory", @@ -35151,7 +35086,7 @@ } }, { - "i": 597, + "i": 596, "$": { "0": { "v": "@oliverphaser/nativescript-eventify", @@ -35206,7 +35141,7 @@ } }, { - "i": 598, + "i": 597, "$": { "0": { "v": "@oliverphaser/nativescript-printer", @@ -35276,7 +35211,7 @@ } }, { - "i": 599, + "i": 598, "$": { "0": { "v": "@ontrackms/nativescript-dotenv", @@ -35301,7 +35236,7 @@ } }, { - "i": 600, + "i": 599, "$": { "0": { "v": "@open-native/core", @@ -35356,7 +35291,7 @@ } }, { - "i": 601, + "i": 600, "$": { "0": { "v": "@oscarlodriguez/nativescript-fresco", @@ -35396,7 +35331,7 @@ } }, { - "i": 602, + "i": 601, "$": { "0": { "v": "@outloud/nativescript-ui-svg", @@ -35451,7 +35386,7 @@ } }, { - "i": 603, + "i": 602, "$": { "0": { "v": "@owen-it/nativescript-uuid", @@ -35491,7 +35426,7 @@ } }, { - "i": 604, + "i": 603, "$": { "0": { "v": "@ozymandiasthegreat/vad", @@ -35531,7 +35466,7 @@ } }, { - "i": 605, + "i": 604, "$": { "0": { "v": "@ozymandiasthegreat/wakeword-zero", @@ -35611,7 +35546,7 @@ } }, { - "i": 606, + "i": 605, "$": { "0": { "v": "@parempi/couchbase-lite", @@ -35706,7 +35641,7 @@ } }, { - "i": 607, + "i": 606, "$": { "0": { "v": "@patrick-nurt/nativescript-masked-text-field", @@ -35776,7 +35711,7 @@ } }, { - "i": 608, + "i": 607, "$": { "0": { "v": "@pekevski/typeorm", @@ -35821,7 +35756,7 @@ } }, { - "i": 609, + "i": 608, "$": { "0": { "v": "@pereirax/nativescript-twilio-video", @@ -35876,7 +35811,7 @@ } }, { - "i": 610, + "i": 609, "$": { "0": { "v": "@pereirax/ns-twilio-video", @@ -35931,7 +35866,7 @@ } }, { - "i": 611, + "i": 610, "$": { "0": { "v": "@planbook/nativescript-modal-datetimepicker", @@ -36026,7 +35961,7 @@ } }, { - "i": 612, + "i": 611, "$": { "0": { "v": "@planbook/nativescript-rater", @@ -36101,7 +36036,7 @@ } }, { - "i": 613, + "i": 612, "$": { "0": { "v": "@plantimer/nativescript-auth0", @@ -36151,7 +36086,7 @@ } }, { - "i": 614, + "i": 613, "$": { "0": { "v": "@plmservices/nativescript-easylink", @@ -36211,7 +36146,7 @@ } }, { - "i": 615, + "i": 614, "$": { "0": { "v": "@plmservices/nativescript-outline-label", @@ -36276,7 +36211,7 @@ } }, { - "i": 616, + "i": 615, "$": { "0": { "v": "@plmservices/nativescript-sha", @@ -36336,7 +36271,7 @@ } }, { - "i": 617, + "i": 616, "$": { "0": { "v": "@pluggableai/smartpush-sdk", @@ -36386,7 +36321,7 @@ } }, { - "i": 618, + "i": 617, "$": { "0": { "v": "@portalest/nativescript-gif-more", @@ -36441,7 +36376,7 @@ } }, { - "i": 619, + "i": 618, "$": { "0": { "v": "@prabudevarrajan/filepicker", @@ -36486,7 +36421,7 @@ } }, { - "i": 620, + "i": 619, "$": { "0": { "v": "@primeboard/nativescript-local-notifications", @@ -36541,7 +36476,7 @@ } }, { - "i": 621, + "i": 620, "$": { "0": { "v": "@primeboard/swipe-layout", @@ -36596,7 +36531,7 @@ } }, { - "i": 622, + "i": 621, "$": { "0": { "v": "@progress/jsdo-angular", @@ -36651,7 +36586,7 @@ } }, { - "i": 623, + "i": 622, "$": { "0": { "v": "@progress/jsdo-core", @@ -36696,7 +36631,7 @@ } }, { - "i": 624, + "i": 623, "$": { "0": { "v": "@progress/jsdo-nativescript", @@ -36761,7 +36696,7 @@ } }, { - "i": 625, + "i": 624, "$": { "0": { "v": "@progress/jsdo-node", @@ -36816,7 +36751,7 @@ } }, { - "i": 626, + "i": 625, "$": { "0": { "v": "@qlip/nativescript-badge", @@ -36866,7 +36801,7 @@ } }, { - "i": 627, + "i": 626, "$": { "0": { "v": "@qlip/nativescript-checkbox", @@ -36916,7 +36851,7 @@ } }, { - "i": 628, + "i": 627, "$": { "0": { "v": "@quadrant2/keyword-recognizer", @@ -36966,7 +36901,7 @@ } }, { - "i": 629, + "i": 628, "$": { "0": { "v": "@rachnerd/test-plugin", @@ -37011,7 +36946,7 @@ } }, { - "i": 630, + "i": 629, "$": { "0": { "v": "@radworks/nativescript-multi-select", @@ -37061,7 +36996,7 @@ } }, { - "i": 631, + "i": 630, "$": { "0": { "v": "@randock/ui-charts", @@ -37116,7 +37051,7 @@ } }, { - "i": 632, + "i": 631, "$": { "0": { "v": "@reazerdev/nativescript-virtual-joystick", @@ -37171,7 +37106,7 @@ } }, { - "i": 633, + "i": 632, "$": { "0": { "v": "@renatotan/basicform", @@ -37216,7 +37151,7 @@ } }, { - "i": 634, + "i": 633, "$": { "0": { "v": "@renatotan/simple-login", @@ -37266,7 +37201,7 @@ } }, { - "i": 635, + "i": 634, "$": { "0": { "v": "@res0/nativescript-google-maps-sdk-n7", @@ -37331,7 +37266,7 @@ } }, { - "i": 636, + "i": 635, "$": { "0": { "v": "@res0/nativescript-oauth2", @@ -37401,7 +37336,7 @@ } }, { - "i": 637, + "i": 636, "$": { "0": { "v": "@res0/ns8-facebook", @@ -37451,7 +37386,7 @@ } }, { - "i": 638, + "i": 637, "$": { "0": { "v": "@rgbvision/nativescript-indexed-repeater", @@ -37506,7 +37441,7 @@ } }, { - "i": 639, + "i": 638, "$": { "0": { "v": "@rob4226/ngrx-devtools-nativescript", @@ -37561,7 +37496,7 @@ } }, { - "i": 640, + "i": 639, "$": { "0": { "v": "@rob4226/nstudio-nativescript-snackbar", @@ -37626,7 +37561,7 @@ } }, { - "i": 641, + "i": 640, "$": { "0": { "v": "@roelandtsw/scanner-plugin-test", @@ -37681,7 +37616,7 @@ } }, { - "i": 642, + "i": 641, "$": { "0": { "v": "@rwigo/nativescript-onesignal", @@ -37731,7 +37666,7 @@ } }, { - "i": 643, + "i": 642, "$": { "0": { "v": "@sammoore/nativescript-image-swipe", @@ -37796,7 +37731,7 @@ } }, { - "i": 644, + "i": 643, "$": { "0": { "v": "@schoolsquirrel/emoji-picker", @@ -37846,7 +37781,7 @@ } }, { - "i": 645, + "i": 644, "$": { "0": { "v": "@schoolsquirrel/letter-avatar", @@ -37901,7 +37836,7 @@ } }, { - "i": 646, + "i": 645, "$": { "0": { "v": "@sczerniawski/nativescript-social-login", @@ -37966,7 +37901,7 @@ } }, { - "i": 647, + "i": 646, "$": { "0": { "v": "@sec-spec/lib-ng-oauth-mobile-service", @@ -38031,7 +37966,7 @@ } }, { - "i": 648, + "i": 647, "$": { "0": { "v": "@sec-spec/ns7-lib-ng-oauth-mobile-service", @@ -38101,7 +38036,7 @@ } }, { - "i": 649, + "i": 648, "$": { "0": { "v": "@sergeymell/nativescript-color-wheel", @@ -38156,7 +38091,7 @@ } }, { - "i": 650, + "i": 649, "$": { "0": { "v": "@sergeymell/nativescript-svg", @@ -38206,7 +38141,7 @@ } }, { - "i": 651, + "i": 650, "$": { "0": { "v": "@sfamc/nativescript-microsoft-appcenter", @@ -38261,7 +38196,7 @@ } }, { - "i": 652, + "i": 651, "$": { "0": { "v": "@shumih/nativescript-segmented-bar", @@ -38311,7 +38246,7 @@ } }, { - "i": 653, + "i": 652, "$": { "0": { "v": "@sirl-io/loopback-sdk-builder", @@ -38371,7 +38306,7 @@ } }, { - "i": 654, + "i": 653, "$": { "0": { "v": "@skhye05/app-center", @@ -38436,7 +38371,7 @@ } }, { - "i": 655, + "i": 654, "$": { "0": { "v": "@skhye05/app-dynamics", @@ -38486,7 +38421,7 @@ } }, { - "i": 656, + "i": 655, "$": { "0": { "v": "@skhye05/multi-select", @@ -38561,7 +38496,7 @@ } }, { - "i": 657, + "i": 656, "$": { "0": { "v": "@skhye05/photo-editor", @@ -38611,7 +38546,7 @@ } }, { - "i": 658, + "i": 657, "$": { "0": { "v": "@skhye05/plugin-badge", @@ -38661,7 +38596,7 @@ } }, { - "i": 659, + "i": 658, "$": { "0": { "v": "@softpak/jsdo-core", @@ -38706,7 +38641,7 @@ } }, { - "i": 660, + "i": 659, "$": { "0": { "v": "@soscler/nativescript-couchbase-plugin", @@ -38756,7 +38691,7 @@ } }, { - "i": 661, + "i": 660, "$": { "0": { "v": "@souriscloud/nativescript-bitmap-factory", @@ -38866,7 +38801,7 @@ } }, { - "i": 662, + "i": 661, "$": { "0": { "v": "@souriscloud/nativescript-google-maps-sdk", @@ -38926,7 +38861,7 @@ } }, { - "i": 663, + "i": 662, "$": { "0": { "v": "@spartadigital/nativescript-ns-wikitude", @@ -38981,7 +38916,7 @@ } }, { - "i": 664, + "i": 663, "$": { "0": { "v": "@speigg/nativescript-urlhandler", @@ -39016,7 +38951,7 @@ } }, { - "i": 665, + "i": 664, "$": { "0": { "v": "@spryteam/nativescript-oauth2", @@ -39091,7 +39026,7 @@ } }, { - "i": 666, + "i": 665, "$": { "0": { "v": "@squirrel-social/contacts", @@ -39136,7 +39071,7 @@ } }, { - "i": 667, + "i": 666, "$": { "0": { "v": "@swtc/brorand", @@ -39186,7 +39121,7 @@ } }, { - "i": 668, + "i": 667, "$": { "0": { "v": "@swtc/nativescript", @@ -39221,7 +39156,7 @@ } }, { - "i": 669, + "i": 668, "$": { "0": { "v": "@synerty/nativescript-camera", @@ -39281,7 +39216,7 @@ } }, { - "i": 670, + "i": 669, "$": { "0": { "v": "@synerty/ng2-balloon-msg-ns", @@ -39351,7 +39286,7 @@ } }, { - "i": 671, + "i": 670, "$": { "0": { "v": "@synerty/peek-ns-update", @@ -39406,7 +39341,7 @@ } }, { - "i": 672, + "i": 671, "$": { "0": { "v": "@synerty/peek-util-ns", @@ -39436,7 +39371,7 @@ } }, { - "i": 673, + "i": 672, "$": { "0": { "v": "@synerty/peek-web-ns", @@ -39466,7 +39401,7 @@ } }, { - "i": 674, + "i": 673, "$": { "0": { "v": "@tanco/login", @@ -39511,7 +39446,7 @@ } }, { - "i": 675, + "i": 674, "$": { "0": { "v": "@taybull/nativescript-contacts", @@ -39556,7 +39491,7 @@ } }, { - "i": 676, + "i": 675, "$": { "0": { "v": "@tbaluyan/loopback-sdk-builder", @@ -39616,7 +39551,7 @@ } }, { - "i": 677, + "i": 676, "$": { "0": { "v": "@tdallau/nativescript", @@ -39661,7 +39596,7 @@ } }, { - "i": 678, + "i": 677, "$": { "0": { "v": "@tealium/nativescript-plugin", @@ -39711,7 +39646,7 @@ } }, { - "i": 679, + "i": 678, "$": { "0": { "v": "@teammaestro/nativescript-svg", @@ -39761,7 +39696,7 @@ } }, { - "i": 680, + "i": 679, "$": { "0": { "v": "@testjg/nativescript-datetimeselector", @@ -39811,7 +39746,7 @@ } }, { - "i": 681, + "i": 680, "$": { "0": { "v": "@testjg/nativescript-filepicker", @@ -39861,7 +39796,7 @@ } }, { - "i": 682, + "i": 681, "$": { "0": { "v": "@testjg/nativescript-guid", @@ -39911,7 +39846,7 @@ } }, { - "i": 683, + "i": 682, "$": { "0": { "v": "@testjg/nativescript-http", @@ -39961,7 +39896,7 @@ } }, { - "i": 684, + "i": 683, "$": { "0": { "v": "@testjg/nativescript-nfc", @@ -40011,7 +39946,7 @@ } }, { - "i": 685, + "i": 684, "$": { "0": { "v": "@testjg/nativescript-sqlite", @@ -40061,7 +39996,7 @@ } }, { - "i": 686, + "i": 685, "$": { "0": { "v": "@ticnat/nativescript-image-cache", @@ -40116,7 +40051,7 @@ } }, { - "i": 687, + "i": 686, "$": { "0": { "v": "@ticnat/nativescript-intermec-printer", @@ -40171,7 +40106,7 @@ } }, { - "i": 688, + "i": 687, "$": { "0": { "v": "@ticnat/nativescript-searchable-select", @@ -40231,7 +40166,7 @@ } }, { - "i": 689, + "i": 688, "$": { "0": { "v": "@ticnat/nativescript-sewoo-printer", @@ -40286,7 +40221,7 @@ } }, { - "i": 690, + "i": 689, "$": { "0": { "v": "@ticnat/nativescript-socketmobile", @@ -40366,7 +40301,7 @@ } }, { - "i": 691, + "i": 690, "$": { "0": { "v": "@ticnat/nativescript-t3b-printer", @@ -40441,7 +40376,7 @@ } }, { - "i": 692, + "i": 691, "$": { "0": { "v": "@ticnat/nativescript-woosim-printer", @@ -40496,7 +40431,7 @@ } }, { - "i": 693, + "i": 692, "$": { "0": { "v": "@tjw-dev/nativescript-microsoft-appcenter", @@ -40576,7 +40511,7 @@ } }, { - "i": 694, + "i": 693, "$": { "0": { "v": "@tobydeh/nativescript-segment", @@ -40621,7 +40556,7 @@ } }, { - "i": 695, + "i": 694, "$": { "0": { "v": "@toolisticon/nativescript-buildhelper", @@ -40661,7 +40596,7 @@ } }, { - "i": 696, + "i": 695, "$": { "0": { "v": "@tralves/shadowed-label", @@ -40716,7 +40651,7 @@ } }, { - "i": 697, + "i": 696, "$": { "0": { "v": "@tremho/jove-app-template", @@ -40786,7 +40721,7 @@ } }, { - "i": 698, + "i": 697, "$": { "0": { "v": "@tremho/jove-cli", @@ -40891,7 +40826,7 @@ } }, { - "i": 699, + "i": 698, "$": { "0": { "v": "@tremho/jove-common", @@ -40971,7 +40906,7 @@ } }, { - "i": 700, + "i": 699, "$": { "0": { "v": "@tremho/jove-desktop", @@ -41051,7 +40986,7 @@ } }, { - "i": 701, + "i": 700, "$": { "0": { "v": "@tremho/jove-mobile", @@ -41131,7 +41066,7 @@ } }, { - "i": 702, + "i": 701, "$": { "0": { "v": "@tremho/jove-test", @@ -41216,7 +41151,7 @@ } }, { - "i": 703, + "i": 702, "$": { "0": { "v": "@triarensplugins/damage-reporting", @@ -41266,7 +41201,7 @@ } }, { - "i": 704, + "i": 703, "$": { "0": { "v": "@triarensplugins/drplugin", @@ -41311,7 +41246,7 @@ } }, { - "i": 705, + "i": 704, "$": { "0": { "v": "@triniwiz/nativescript-accelerometer", @@ -41361,7 +41296,7 @@ } }, { - "i": 706, + "i": 705, "$": { "0": { "v": "@triniwiz/nativescript-accordion", @@ -41411,7 +41346,7 @@ } }, { - "i": 707, + "i": 706, "$": { "0": { "v": "@triniwiz/nativescript-couchbase", @@ -41486,7 +41421,7 @@ } }, { - "i": 708, + "i": 707, "$": { "0": { "v": "@triniwiz/nativescript-downloader", @@ -41536,7 +41471,7 @@ } }, { - "i": 709, + "i": 708, "$": { "0": { "v": "@triniwiz/nativescript-ffmpeg", @@ -41586,7 +41521,7 @@ } }, { - "i": 710, + "i": 709, "$": { "0": { "v": "@triniwiz/nativescript-image-cache-it", @@ -41646,7 +41581,7 @@ } }, { - "i": 711, + "i": 710, "$": { "0": { "v": "@triniwiz/nativescript-image-zoom", @@ -41701,7 +41636,7 @@ } }, { - "i": 712, + "i": 711, "$": { "0": { "v": "@triniwiz/nativescript-masonkit", @@ -41751,7 +41686,7 @@ } }, { - "i": 713, + "i": 712, "$": { "0": { "v": "@triniwiz/nativescript-messenger", @@ -41831,7 +41766,7 @@ } }, { - "i": 714, + "i": 713, "$": { "0": { "v": "@triniwiz/nativescript-nested-scrollview", @@ -41886,7 +41821,7 @@ } }, { - "i": 715, + "i": 714, "$": { "0": { "v": "@triniwiz/nativescript-opentok", @@ -41936,7 +41871,7 @@ } }, { - "i": 716, + "i": 715, "$": { "0": { "v": "@triniwiz/nativescript-pager", @@ -42041,7 +41976,7 @@ } }, { - "i": 717, + "i": 716, "$": { "0": { "v": "@triniwiz/nativescript-popup", @@ -42091,7 +42026,7 @@ } }, { - "i": 718, + "i": 717, "$": { "0": { "v": "@triniwiz/nativescript-pusher-channels", @@ -42146,7 +42081,7 @@ } }, { - "i": 719, + "i": 718, "$": { "0": { "v": "@triniwiz/nativescript-socketio", @@ -42256,7 +42191,7 @@ } }, { - "i": 720, + "i": 719, "$": { "0": { "v": "@triniwiz/nativescript-star-ratings", @@ -42311,7 +42246,7 @@ } }, { - "i": 721, + "i": 720, "$": { "0": { "v": "@triniwiz/nativescript-stripe", @@ -42366,7 +42301,7 @@ } }, { - "i": 722, + "i": 721, "$": { "0": { "v": "@triniwiz/nativescript-supabase", @@ -42416,7 +42351,7 @@ } }, { - "i": 723, + "i": 722, "$": { "0": { "v": "@triniwiz/nativescript-supabase-gotrue", @@ -42471,7 +42406,7 @@ } }, { - "i": 724, + "i": 723, "$": { "0": { "v": "@triniwiz/nativescript-supabase-postgrest", @@ -42526,7 +42461,7 @@ } }, { - "i": 725, + "i": 724, "$": { "0": { "v": "@triniwiz/nativescript-supabase-realtime", @@ -42581,7 +42516,7 @@ } }, { - "i": 726, + "i": 725, "$": { "0": { "v": "@triniwiz/nativescript-supabase-storage", @@ -42636,7 +42571,7 @@ } }, { - "i": 727, + "i": 726, "$": { "0": { "v": "@triniwiz/nativescript-toasty", @@ -42691,7 +42626,7 @@ } }, { - "i": 728, + "i": 727, "$": { "0": { "v": "@triniwiz/nativescript-tooltip", @@ -42746,7 +42681,7 @@ } }, { - "i": 729, + "i": 728, "$": { "0": { "v": "@triniwiz/nativescript-videorecorder", @@ -42806,7 +42741,7 @@ } }, { - "i": 730, + "i": 729, "$": { "0": { "v": "@triniwiz/nativescript-yogalayout", @@ -42871,7 +42806,7 @@ } }, { - "i": 731, + "i": 730, "$": { "0": { "v": "@triniwiz/nativescript-youtubeplayer", @@ -42926,7 +42861,7 @@ } }, { - "i": 732, + "i": 731, "$": { "0": { "v": "@tylerkanz/nativescript-nfc", @@ -42981,7 +42916,7 @@ } }, { - "i": 733, + "i": 732, "$": { "0": { "v": "@tzkit/idscanner", @@ -43026,7 +42961,7 @@ } }, { - "i": 734, + "i": 733, "$": { "0": { "v": "@vallemar/dominative-vue", @@ -43076,7 +43011,7 @@ } }, { - "i": 735, + "i": 734, "$": { "0": { "v": "@vallemar/localize", @@ -43121,7 +43056,7 @@ } }, { - "i": 736, + "i": 735, "$": { "0": { "v": "@vallemar/nativescript-clipboard", @@ -43171,7 +43106,7 @@ } }, { - "i": 737, + "i": 736, "$": { "0": { "v": "@vallemar/nativescript-keyboard", @@ -43221,7 +43156,7 @@ } }, { - "i": 738, + "i": 737, "$": { "0": { "v": "@vallemar/nativescript-orientation", @@ -43271,7 +43206,7 @@ } }, { - "i": 739, + "i": 738, "$": { "0": { "v": "@vallemar/nativescript-vueuse", @@ -43296,7 +43231,7 @@ } }, { - "i": 740, + "i": 739, "$": { "0": { "v": "@vallemar/vue", @@ -43341,7 +43276,7 @@ } }, { - "i": 741, + "i": 740, "$": { "0": { "v": "@valor/nativescript-barcodescanner", @@ -43391,7 +43326,7 @@ } }, { - "i": 742, + "i": 741, "$": { "0": { "v": "@valor/nativescript-feedback", @@ -43441,7 +43376,7 @@ } }, { - "i": 743, + "i": 742, "$": { "0": { "v": "@valor/nativescript-in-app-review", @@ -43501,7 +43436,7 @@ } }, { - "i": 744, + "i": 743, "$": { "0": { "v": "@valor/nativescript-ngrx-devtools", @@ -43531,7 +43466,7 @@ } }, { - "i": 745, + "i": 744, "$": { "0": { "v": "@valor/nativescript-view-shot", @@ -43586,7 +43521,7 @@ } }, { - "i": 746, + "i": 745, "$": { "0": { "v": "@valor/nativescript-websockets", @@ -43636,7 +43571,7 @@ } }, { - "i": 747, + "i": 746, "$": { "0": { "v": "@van-hung/nativescript-segment", @@ -43681,7 +43616,7 @@ } }, { - "i": 748, + "i": 747, "$": { "0": { "v": "@viostec/nativescript-helloworld", @@ -43731,7 +43666,7 @@ } }, { - "i": 749, + "i": 748, "$": { "0": { "v": "@vishnuchd/nativescript-woocommerce-api", @@ -43811,7 +43746,7 @@ } }, { - "i": 750, + "i": 749, "$": { "0": { "v": "@voicethread/nativescript-audio-player", @@ -43866,7 +43801,7 @@ } }, { - "i": 751, + "i": 750, "$": { "0": { "v": "@voicethread/nativescript-audio-recorder", @@ -43921,7 +43856,7 @@ } }, { - "i": 752, + "i": 751, "$": { "0": { "v": "@voicethread/nativescript-custom-rotors", @@ -43976,7 +43911,7 @@ } }, { - "i": 753, + "i": 752, "$": { "0": { "v": "@voicethread/nativescript-downloader", @@ -44026,7 +43961,7 @@ } }, { - "i": 754, + "i": 753, "$": { "0": { "v": "@voicethread/nativescript-filepicker", @@ -44076,7 +44011,7 @@ } }, { - "i": 755, + "i": 754, "$": { "0": { "v": "@vulksoft/nativescript-firebase-env", @@ -44141,7 +44076,7 @@ } }, { - "i": 756, + "i": 755, "$": { "0": { "v": "@vulksoft/nativescript-hook-versioning", @@ -44206,7 +44141,7 @@ } }, { - "i": 757, + "i": 756, "$": { "0": { "v": "@vulksoft/nativescript-platform-css", @@ -44261,7 +44196,7 @@ } }, { - "i": 758, + "i": 757, "$": { "0": { "v": "@webileapps/nativescript-google-signin", @@ -44311,7 +44246,7 @@ } }, { - "i": 759, + "i": 758, "$": { "0": { "v": "@webileapps/nativescript-healthkit", @@ -44356,7 +44291,7 @@ } }, { - "i": 760, + "i": 759, "$": { "0": { "v": "@webileapps/nativescript-radiobutton", @@ -44396,7 +44331,7 @@ } }, { - "i": 761, + "i": 760, "$": { "0": { "v": "@wezyy1/nativescript-google-maps-sdk", @@ -44456,7 +44391,7 @@ } }, { - "i": 762, + "i": 761, "$": { "0": { "v": "@wwwalkerrun/nativescript-ngx-magic", @@ -44506,7 +44441,7 @@ } }, { - "i": 763, + "i": 762, "$": { "0": { "v": "@xmlking/nativescript-ngx-microsoftband", @@ -44586,7 +44521,7 @@ } }, { - "i": 764, + "i": 763, "$": { "0": { "v": "@xutodra/nativescript-mobile-pubnub", @@ -44641,7 +44576,7 @@ } }, { - "i": 765, + "i": 764, "$": { "0": { "v": "@xzwiex/nativescript-googleplay-referrer", @@ -44696,7 +44631,7 @@ } }, { - "i": 766, + "i": 765, "$": { "0": { "v": "@yoonit/nativescript-camera", @@ -44746,7 +44681,7 @@ } }, { - "i": 767, + "i": 766, "$": { "0": { "v": "@yoonit/nativescript-handshake", @@ -44796,7 +44731,7 @@ } }, { - "i": 768, + "i": 767, "$": { "0": { "v": "@yoonit/nativescript-websocket", @@ -44846,7 +44781,7 @@ } }, { - "i": 769, + "i": 768, "$": { "0": { "v": "@zalastax/nolb-nativescript-", @@ -44871,7 +44806,7 @@ } }, { - "i": 770, + "i": 769, "$": { "0": { "v": "@zalastax/nolb-nativescript-3", @@ -44901,7 +44836,7 @@ } }, { - "i": 771, + "i": 770, "$": { "0": { "v": "@zalastax/nolb-nativescript-f", @@ -44931,7 +44866,7 @@ } }, { - "i": 772, + "i": 771, "$": { "0": { "v": "@zalastax/nolb-nativescript-j", @@ -44961,7 +44896,7 @@ } }, { - "i": 773, + "i": 772, "$": { "0": { "v": "@zalastax/nolb-nativescript-s", @@ -44991,7 +44926,7 @@ } }, { - "i": 774, + "i": 773, "$": { "0": { "v": "@zalastax/nolb-nativescript-x", @@ -45021,7 +44956,7 @@ } }, { - "i": 775, + "i": 774, "$": { "0": { "v": "@zapsod/nativescript-pushwoosh", @@ -45066,7 +45001,7 @@ } }, { - "i": 776, + "i": 775, "$": { "0": { "v": "4dev-nativescript-admob", @@ -45136,7 +45071,7 @@ } }, { - "i": 777, + "i": 776, "$": { "0": { "v": "a2c-nativescript-inappbrowser", @@ -45246,7 +45181,7 @@ } }, { - "i": 778, + "i": 777, "$": { "0": { "v": "ably-nativescript", @@ -45301,7 +45236,7 @@ } }, { - "i": 779, + "i": 778, "$": { "0": { "v": "acorn-nativescript-geolocation", @@ -45351,7 +45286,7 @@ } }, { - "i": 780, + "i": 779, "$": { "0": { "v": "acs-bluetooth", @@ -45401,7 +45336,7 @@ } }, { - "i": 781, + "i": 780, "$": { "0": { "v": "akylas-nativescript-vue-template-compiler", @@ -45451,7 +45386,7 @@ } }, { - "i": 782, + "i": 781, "$": { "0": { "v": "angular-nativescript-yidong-kaifa", @@ -45486,7 +45421,7 @@ } }, { - "i": 783, + "i": 782, "$": { "0": { "v": "angular-nativescript-yidong-kaifa-jifan", @@ -45526,7 +45461,7 @@ } }, { - "i": 784, + "i": 783, "$": { "0": { "v": "angular-oidc-client", @@ -45596,7 +45531,7 @@ } }, { - "i": 785, + "i": 784, "$": { "0": { "v": "angular-openid-client", @@ -45661,7 +45596,7 @@ } }, { - "i": 786, + "i": 785, "$": { "0": { "v": "angular2-loki", @@ -45686,7 +45621,7 @@ } }, { - "i": 787, + "i": 786, "$": { "0": { "v": "angular2-loki-fix", @@ -45716,7 +45651,7 @@ } }, { - "i": 788, + "i": 787, "$": { "0": { "v": "angular2-seed-advanced", @@ -45746,7 +45681,7 @@ } }, { - "i": 789, + "i": 788, "$": { "0": { "v": "apolloai-nativescript-status-bar", @@ -45796,7 +45731,7 @@ } }, { - "i": 790, + "i": 789, "$": { "0": { "v": "bev-nativescript-webrtc", @@ -45851,7 +45786,7 @@ } }, { - "i": 791, + "i": 790, "$": { "0": { "v": "chimp-bits-teco-nativescript", @@ -45886,7 +45821,7 @@ } }, { - "i": 792, + "i": 791, "$": { "0": { "v": "cmbsdk-nativescript", @@ -45941,7 +45876,7 @@ } }, { - "i": 793, + "i": 792, "$": { "0": { "v": "connectycube", @@ -46051,7 +45986,7 @@ } }, { - "i": 794, + "i": 793, "$": { "0": { "v": "cordova-admobsdk", @@ -46291,7 +46226,7 @@ } }, { - "i": 795, + "i": 794, "$": { "0": { "v": "cordova-plugin-admobpro", @@ -46536,7 +46471,7 @@ } }, { - "i": 796, + "i": 795, "$": { "0": { "v": "crank-native", @@ -46561,7 +46496,7 @@ } }, { - "i": 797, + "i": 796, "$": { "0": { "v": "crypto-module", @@ -46586,7 +46521,7 @@ } }, { - "i": 798, + "i": 797, "$": { "0": { "v": "device-checks", @@ -46611,7 +46546,7 @@ } }, { - "i": 799, + "i": 798, "$": { "0": { "v": "digitaltown-nativescript-card-io", @@ -46696,7 +46631,7 @@ } }, { - "i": 800, + "i": 799, "$": { "0": { "v": "digitaltown-nativescript-gif", @@ -46761,7 +46696,7 @@ } }, { - "i": 801, + "i": 800, "$": { "0": { "v": "dominative", @@ -46806,7 +46741,7 @@ } }, { - "i": 802, + "i": 801, "$": { "0": { "v": "draggie-nativescript-loading-indicator", @@ -46891,7 +46826,7 @@ } }, { - "i": 803, + "i": 802, "$": { "0": { "v": "eamplugin", @@ -46936,7 +46871,7 @@ } }, { - "i": 804, + "i": 803, "$": { "0": { "v": "easy-suite-native", @@ -46966,7 +46901,7 @@ } }, { - "i": 805, + "i": 804, "$": { "0": { "v": "ebs-nativescript-exoplayer", @@ -47041,7 +46976,7 @@ } }, { - "i": 806, + "i": 805, "$": { "0": { "v": "elm-native-js", @@ -47091,7 +47026,7 @@ } }, { - "i": 807, + "i": 806, "$": { "0": { "v": "elm-nativescript", @@ -47126,7 +47061,7 @@ } }, { - "i": 808, + "i": 807, "$": { "0": { "v": "elvispos-loopback-sdk-builder", @@ -47191,7 +47126,7 @@ } }, { - "i": 809, + "i": 808, "$": { "0": { "v": "esolution-nativescript-google-maps-sdk", @@ -47256,7 +47191,7 @@ } }, { - "i": 810, + "i": 809, "$": { "0": { "v": "esolution-nativescript-orientation", @@ -47311,7 +47246,7 @@ } }, { - "i": 811, + "i": 810, "$": { "0": { "v": "esolution-nativescript-photoviewer", @@ -47396,7 +47331,7 @@ } }, { - "i": 812, + "i": 811, "$": { "0": { "v": "ez-nativescript-fonticon", @@ -47461,7 +47396,7 @@ } }, { - "i": 813, + "i": 812, "$": { "0": { "v": "firebase-for-nativescript", @@ -47591,7 +47526,7 @@ } }, { - "i": 814, + "i": 813, "$": { "0": { "v": "fork-nativescript-slides", @@ -47661,7 +47596,7 @@ } }, { - "i": 815, + "i": 814, "$": { "0": { "v": "framework-consumer", @@ -47711,7 +47646,7 @@ } }, { - "i": 816, + "i": 815, "$": { "0": { "v": "generator-nativescript-plugin", @@ -47751,7 +47686,7 @@ } }, { - "i": 817, + "i": 816, "$": { "0": { "v": "generator-ng2-seed-advanced", @@ -47816,7 +47751,7 @@ } }, { - "i": 818, + "i": 817, "$": { "0": { "v": "godot-rust-helper", @@ -47881,7 +47816,7 @@ } }, { - "i": 819, + "i": 818, "$": { "0": { "v": "groceries-angular-service", @@ -47936,7 +47871,7 @@ } }, { - "i": 820, + "i": 819, "$": { "0": { "v": "gulp-babel-nativescript", @@ -47991,7 +47926,7 @@ } }, { - "i": 821, + "i": 820, "$": { "0": { "v": "habibtestPublish", @@ -48026,7 +47961,7 @@ } }, { - "i": 822, + "i": 821, "$": { "0": { "v": "helloworld_shashanka", @@ -48071,7 +48006,7 @@ } }, { - "i": 823, + "i": 822, "$": { "0": { "v": "herbecon-loopback-sdk-builder", @@ -48136,7 +48071,7 @@ } }, { - "i": 824, + "i": 823, "$": { "0": { "v": "i18nh", @@ -48226,7 +48161,7 @@ } }, { - "i": 825, + "i": 824, "$": { "0": { "v": "imagene-ns-google-login", @@ -48281,7 +48216,7 @@ } }, { - "i": 826, + "i": 825, "$": { "0": { "v": "imdapro-nativescript-http-formdata", @@ -48346,7 +48281,7 @@ } }, { - "i": 827, + "i": 826, "$": { "0": { "v": "install-nativescript", @@ -48381,7 +48316,7 @@ } }, { - "i": 828, + "i": 827, "$": { "0": { "v": "ios-um", @@ -48426,7 +48361,7 @@ } }, { - "i": 829, + "i": 828, "$": { "0": { "v": "ios-working-with-sandbox-plugin", @@ -48496,7 +48431,7 @@ } }, { - "i": 830, + "i": 829, "$": { "0": { "v": "jgraffite-typescript-modules", @@ -48556,7 +48491,7 @@ } }, { - "i": 831, + "i": 830, "$": { "0": { "v": "jsx-to-nativescript", @@ -48586,7 +48521,7 @@ } }, { - "i": 832, + "i": 831, "$": { "0": { "v": "karma-nativescript-launcher", @@ -48616,7 +48551,7 @@ } }, { - "i": 833, + "i": 832, "$": { "0": { "v": "karma-nsnodeunit", @@ -48661,7 +48596,7 @@ } }, { - "i": 834, + "i": 833, "$": { "0": { "v": "kinvey-nativescript-sdk", @@ -48706,7 +48641,7 @@ } }, { - "i": 835, + "i": 834, "$": { "0": { "v": "korp-carga-inicial", @@ -48766,7 +48701,7 @@ } }, { - "i": 836, + "i": 835, "$": { "0": { "v": "local-file-encrypto", @@ -48821,7 +48756,7 @@ } }, { - "i": 837, + "i": 836, "$": { "0": { "v": "loki-nativescript-adapter", @@ -48866,7 +48801,7 @@ } }, { - "i": 838, + "i": 837, "$": { "0": { "v": "loopback-sdk-builder", @@ -48926,7 +48861,7 @@ } }, { - "i": 839, + "i": 838, "$": { "0": { "v": "loopback-sdk-builder-ny", @@ -48991,7 +48926,7 @@ } }, { - "i": 840, + "i": 839, "$": { "0": { "v": "mcms-node-beacons", @@ -49041,7 +48976,7 @@ } }, { - "i": 841, + "i": 840, "$": { "0": { "v": "mobile-cli-lib", @@ -49101,7 +49036,7 @@ } }, { - "i": 842, + "i": 841, "$": { "0": { "v": "mobile-nativescript", @@ -49231,7 +49166,7 @@ } }, { - "i": 843, + "i": 842, "$": { "0": { "v": "molpay-mobile-xdk-nativescript", @@ -49266,7 +49201,7 @@ } }, { - "i": 844, + "i": 843, "$": { "0": { "v": "mwz-apple-sign-in", @@ -49331,7 +49266,7 @@ } }, { - "i": 845, + "i": 844, "$": { "0": { "v": "mwz-ns-apple-signin", @@ -49396,7 +49331,7 @@ } }, { - "i": 846, + "i": 845, "$": { "0": { "v": "my-loopback-sdk-builder", @@ -49461,7 +49396,7 @@ } }, { - "i": 847, + "i": 846, "$": { "0": { "v": "n-mobile", @@ -49501,7 +49436,7 @@ } }, { - "i": 848, + "i": 847, "$": { "0": { "v": "n7-google-places-autocomplete", @@ -49591,7 +49526,7 @@ } }, { - "i": 849, + "i": 848, "$": { "0": { "v": "nat-test", @@ -49641,7 +49576,7 @@ } }, { - "i": 850, + "i": 849, "$": { "0": { "v": "native-autocomplete", @@ -49686,7 +49621,7 @@ } }, { - "i": 851, + "i": 850, "$": { "0": { "v": "nativescrip-pbkdf2", @@ -49741,7 +49676,7 @@ } }, { - "i": 852, + "i": 851, "$": { "0": { "v": "nativescript", @@ -49776,7 +49711,7 @@ } }, { - "i": 853, + "i": 852, "$": { "0": { "v": "nativescript-10hook-release-info", @@ -49841,7 +49776,7 @@ } }, { - "i": 854, + "i": 853, "$": { "0": { "v": "nativescript-3dtouch", @@ -49901,7 +49836,7 @@ } }, { - "i": 855, + "i": 854, "$": { "0": { "v": "nativescript-ably", @@ -49961,7 +49896,7 @@ } }, { - "i": 856, + "i": 855, "$": { "0": { "v": "nativescript-accelerometer", @@ -50001,7 +49936,7 @@ } }, { - "i": 857, + "i": 856, "$": { "0": { "v": "nativescript-accelerometer-advanced", @@ -50046,7 +49981,7 @@ } }, { - "i": 858, + "i": 857, "$": { "0": { "v": "nativescript-accelerometer-tweaked", @@ -50091,7 +50026,7 @@ } }, { - "i": 859, + "i": 858, "$": { "0": { "v": "nativescript-accessories", @@ -50136,7 +50071,7 @@ } }, { - "i": 860, + "i": 859, "$": { "0": { "v": "nativescript-accordion", @@ -50181,62 +50116,7 @@ } }, { - "i": 861, - "$": { - "0": { - "v": "nativescript-acs-bluetooth", - "n": 1 - }, - "1": [ - { - "v": "bluetooth", - "i": 7, - "n": 1 - }, - { - "v": "acs", - "i": 6, - "n": 1 - }, - { - "v": "nativescript", - "i": 5, - "n": 1 - }, - { - "v": "Bluetooth", - "i": 4, - "n": 1 - }, - { - "v": "ACS", - "i": 3, - "n": 1 - }, - { - "v": "Android", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "NativeScript ASB bluetooth card reader interface", - "n": 0.408 - } - } - }, - { - "i": 862, + "i": 860, "$": { "0": { "v": "nativescript-acs-usb", @@ -50291,7 +50171,7 @@ } }, { - "i": 863, + "i": 861, "$": { "0": { "v": "nativescript-actioncable", @@ -50331,7 +50211,7 @@ } }, { - "i": 864, + "i": 862, "$": { "0": { "v": "nativescript-activity-detection", @@ -50357,7 +50237,7 @@ } }, { - "i": 865, + "i": 863, "$": { "0": { "v": "nativescript-ad-support", @@ -50402,7 +50282,7 @@ } }, { - "i": 866, + "i": 864, "$": { "0": { "v": "nativescript-add-contact-activity", @@ -50437,7 +50317,7 @@ } }, { - "i": 867, + "i": 865, "$": { "0": { "v": "nativescript-admob", @@ -50502,7 +50382,7 @@ } }, { - "i": 868, + "i": 866, "$": { "0": { "v": "nativescript-adobe-experience-cloud", @@ -50567,7 +50447,7 @@ } }, { - "i": 869, + "i": 867, "$": { "0": { "v": "nativescript-adobe-marketing-cloud", @@ -50632,7 +50512,7 @@ } }, { - "i": 870, + "i": 868, "$": { "0": { "v": "nativescript-advanced-camera", @@ -50687,7 +50567,7 @@ } }, { - "i": 871, + "i": 869, "$": { "0": { "v": "nativescript-advanced-permissions", @@ -50742,7 +50622,7 @@ } }, { - "i": 872, + "i": 870, "$": { "0": { "v": "nativescript-advanced-webview", @@ -50807,7 +50687,7 @@ } }, { - "i": 873, + "i": 871, "$": { "0": { "v": "nativescript-adyen-cse", @@ -50857,7 +50737,7 @@ } }, { - "i": 874, + "i": 872, "$": { "0": { "v": "nativescript-afnetworking", @@ -50902,7 +50782,7 @@ } }, { - "i": 875, + "i": 873, "$": { "0": { "v": "nativescript-akylas-bluetooth", @@ -50967,7 +50847,7 @@ } }, { - "i": 876, + "i": 874, "$": { "0": { "v": "nativescript-akylas-https", @@ -51062,7 +50942,7 @@ } }, { - "i": 877, + "i": 875, "$": { "0": { "v": "nativescript-akylas-lottie", @@ -51132,7 +51012,7 @@ } }, { - "i": 878, + "i": 876, "$": { "0": { "v": "nativescript-akylas-preferences", @@ -51197,7 +51077,7 @@ } }, { - "i": 879, + "i": 877, "$": { "0": { "v": "nativescript-akylas-pulltorefresh", @@ -51277,7 +51157,7 @@ } }, { - "i": 880, + "i": 878, "$": { "0": { "v": "nativescript-akylas-share-file", @@ -51342,7 +51222,7 @@ } }, { - "i": 881, + "i": 879, "$": { "0": { "v": "nativescript-akylas-sqlite", @@ -51392,7 +51272,7 @@ } }, { - "i": 882, + "i": 880, "$": { "0": { "v": "nativescript-akylas-themes", @@ -51457,7 +51337,7 @@ } }, { - "i": 883, + "i": 881, "$": { "0": { "v": "nativescript-akylas-unit-test-runner", @@ -51497,7 +51377,7 @@ } }, { - "i": 884, + "i": 882, "$": { "0": { "v": "nativescript-akylas-vue-template-compiler", @@ -51547,7 +51427,7 @@ } }, { - "i": 885, + "i": 883, "$": { "0": { "v": "nativescript-akylas-webpack-template", @@ -51578,7 +51458,7 @@ } }, { - "i": 886, + "i": 884, "$": { "0": { "v": "nativescript-algolia", @@ -51638,7 +51518,7 @@ } }, { - "i": 887, + "i": 885, "$": { "0": { "v": "nativescript-ali", @@ -51668,7 +51548,7 @@ } }, { - "i": 888, + "i": 886, "$": { "0": { "v": "nativescript-alogent-design-lib", @@ -51703,7 +51583,7 @@ } }, { - "i": 889, + "i": 887, "$": { "0": { "v": "nativescript-ampersand", @@ -51728,7 +51608,7 @@ } }, { - "i": 890, + "i": 888, "$": { "0": { "v": "nativescript-amplitude", @@ -51773,7 +51653,7 @@ } }, { - "i": 891, + "i": 889, "$": { "0": { "v": "nativescript-android-advanced-webview", @@ -51828,7 +51708,7 @@ } }, { - "i": 892, + "i": 890, "$": { "0": { "v": "nativescript-android-declarations", @@ -51913,7 +51793,7 @@ } }, { - "i": 893, + "i": 891, "$": { "0": { "v": "nativescript-android-fs", @@ -51968,7 +51848,7 @@ } }, { - "i": 894, + "i": 892, "$": { "0": { "v": "nativescript-android-iosswitch", @@ -52033,7 +51913,7 @@ } }, { - "i": 895, + "i": 893, "$": { "0": { "v": "nativescript-android-jpush", @@ -52068,7 +51948,7 @@ } }, { - "i": 896, + "i": 894, "$": { "0": { "v": "nativescript-android-preferences", @@ -52153,7 +52033,7 @@ } }, { - "i": 897, + "i": 895, "$": { "0": { "v": "nativescript-android-sensors", @@ -52213,7 +52093,7 @@ } }, { - "i": 898, + "i": 896, "$": { "0": { "v": "nativescript-android-toast", @@ -52258,7 +52138,7 @@ } }, { - "i": 899, + "i": 897, "$": { "0": { "v": "nativescript-android-utils", @@ -52308,7 +52188,7 @@ } }, { - "i": 900, + "i": 898, "$": { "0": { "v": "nativescript-angular", @@ -52343,7 +52223,7 @@ } }, { - "i": 901, + "i": 899, "$": { "0": { "v": "nativescript-angular-cli", @@ -52388,7 +52268,7 @@ } }, { - "i": 902, + "i": 900, "$": { "0": { "v": "nativescript-angular-drawer-template", @@ -52458,7 +52338,7 @@ } }, { - "i": 903, + "i": 901, "$": { "0": { "v": "nativescript-angular-jwt", @@ -52508,7 +52388,7 @@ } }, { - "i": 904, + "i": 902, "$": { "0": { "v": "nativescript-angular-snapshot", @@ -52534,7 +52414,7 @@ } }, { - "i": 905, + "i": 903, "$": { "0": { "v": "nativescript-angular-webview-crypto", @@ -52569,7 +52449,7 @@ } }, { - "i": 906, + "i": 904, "$": { "0": { "v": "nativescript-angular-xmpp", @@ -52619,7 +52499,7 @@ } }, { - "i": 907, + "i": 905, "$": { "0": { "v": "nativescript-animate-sass", @@ -52684,7 +52564,7 @@ } }, { - "i": 908, + "i": 906, "$": { "0": { "v": "nativescript-animatecss", @@ -52744,7 +52624,7 @@ } }, { - "i": 909, + "i": 907, "$": { "0": { "v": "nativescript-animated-circle", @@ -52804,7 +52684,7 @@ } }, { - "i": 910, + "i": 908, "$": { "0": { "v": "nativescript-animated-fab", @@ -52854,7 +52734,7 @@ } }, { - "i": 911, + "i": 909, "$": { "0": { "v": "nativescript-animated-menu", @@ -52889,7 +52769,7 @@ } }, { - "i": 912, + "i": 910, "$": { "0": { "v": "nativescript-animation-spring", @@ -52924,7 +52804,7 @@ } }, { - "i": 913, + "i": 911, "$": { "0": { "v": "nativescript-apiclient", @@ -52979,7 +52859,7 @@ } }, { - "i": 914, + "i": 912, "$": { "0": { "v": "nativescript-app-duplicator", @@ -53029,7 +52909,7 @@ } }, { - "i": 915, + "i": 913, "$": { "0": { "v": "nativescript-app-environment", @@ -53089,7 +52969,7 @@ } }, { - "i": 916, + "i": 914, "$": { "0": { "v": "nativescript-app-generator", @@ -53224,7 +53104,7 @@ } }, { - "i": 917, + "i": 915, "$": { "0": { "v": "nativescript-app-icon-changer", @@ -53284,7 +53164,7 @@ } }, { - "i": 918, + "i": 916, "$": { "0": { "v": "nativescript-app-settings", @@ -53314,7 +53194,7 @@ } }, { - "i": 919, + "i": 917, "$": { "0": { "v": "nativescript-app-shortcuts", @@ -53394,7 +53274,7 @@ } }, { - "i": 920, + "i": 918, "$": { "0": { "v": "nativescript-app-sync", @@ -53464,7 +53344,7 @@ } }, { - "i": 921, + "i": 919, "$": { "0": { "v": "nativescript-app-sync-cli", @@ -53534,7 +53414,7 @@ } }, { - "i": 922, + "i": 920, "$": { "0": { "v": "nativescript-app-sync-sdk", @@ -53569,7 +53449,7 @@ } }, { - "i": 923, + "i": 921, "$": { "0": { "v": "nativescript-app-tour", @@ -53654,7 +53534,7 @@ } }, { - "i": 924, + "i": 922, "$": { "0": { "v": "nativescript-app-tour-updated", @@ -53744,7 +53624,7 @@ } }, { - "i": 925, + "i": 923, "$": { "0": { "v": "nativescript-app-update", @@ -53794,7 +53674,7 @@ } }, { - "i": 926, + "i": 924, "$": { "0": { "v": "nativescript-app-version", @@ -53859,7 +53739,7 @@ } }, { - "i": 927, + "i": 925, "$": { "0": { "v": "nativescript-app-version-rose", @@ -53914,7 +53794,7 @@ } }, { - "i": 928, + "i": 926, "$": { "0": { "v": "nativescript-appavailability", @@ -53969,7 +53849,7 @@ } }, { - "i": 929, + "i": 927, "$": { "0": { "v": "nativescript-appcenter-connector", @@ -54019,7 +53899,7 @@ } }, { - "i": 930, + "i": 928, "$": { "0": { "v": "nativescript-appic-pdfview", @@ -54069,7 +53949,7 @@ } }, { - "i": 931, + "i": 929, "$": { "0": { "v": "nativescript-appinfo", @@ -54119,7 +53999,7 @@ } }, { - "i": 932, + "i": 930, "$": { "0": { "v": "nativescript-apple-sign-in", @@ -54184,7 +54064,7 @@ } }, { - "i": 933, + "i": 931, "$": { "0": { "v": "nativescript-apple-sign-in-enduco", @@ -54254,7 +54134,7 @@ } }, { - "i": 934, + "i": 932, "$": { "0": { "v": "nativescript-apple-sign-in-knotes", @@ -54324,7 +54204,7 @@ } }, { - "i": 935, + "i": 933, "$": { "0": { "v": "nativescript-applist", @@ -54359,7 +54239,7 @@ } }, { - "i": 936, + "i": 934, "$": { "0": { "v": "nativescript-applozic-chat-creditoh", @@ -54414,7 +54294,7 @@ } }, { - "i": 937, + "i": 935, "$": { "0": { "v": "nativescript-applozic-chat-fork", @@ -54469,7 +54349,7 @@ } }, { - "i": 938, + "i": 936, "$": { "0": { "v": "nativescript-appsee", @@ -54514,7 +54394,7 @@ } }, { - "i": 939, + "i": 937, "$": { "0": { "v": "nativescript-appsee-ios", @@ -54554,7 +54434,7 @@ } }, { - "i": 940, + "i": 938, "$": { "0": { "v": "nativescript-appupdater", @@ -54599,7 +54479,7 @@ } }, { - "i": 941, + "i": 939, "$": { "0": { "v": "nativescript-appurl", @@ -54634,52 +54514,7 @@ } }, { - "i": 942, - "$": { - "0": { - "v": "nativescript-appurl-handler", - "n": 1 - }, - "1": [ - { - "v": "handler", - "i": 5, - "n": 1 - }, - { - "v": "appurl", - "i": 4, - "n": 1 - }, - { - "v": "nativescript", - "i": 3, - "n": 1 - }, - { - "v": "Deep links", - "i": 2, - "n": 0.707 - }, - { - "v": "URL-Handler", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "Register custom URLs for your NativeScript app (IOS fix included)", - "n": 0.316 - } - } - }, - { - "i": 943, + "i": 940, "$": { "0": { "v": "nativescript-appversion", @@ -54739,7 +54574,7 @@ } }, { - "i": 944, + "i": 941, "$": { "0": { "v": "nativescript-apxor", @@ -54789,7 +54624,7 @@ } }, { - "i": 945, + "i": 942, "$": { "0": { "v": "nativescript-ar", @@ -54859,7 +54694,7 @@ } }, { - "i": 946, + "i": 943, "$": { "0": { "v": "nativescript-arduino-usb", @@ -54914,7 +54749,7 @@ } }, { - "i": 947, + "i": 944, "$": { "0": { "v": "nativescript-asitsvideorecorder", @@ -54959,7 +54794,7 @@ } }, { - "i": 948, + "i": 945, "$": { "0": { "v": "nativescript-async", @@ -54999,7 +54834,7 @@ } }, { - "i": 949, + "i": 946, "$": { "0": { "v": "nativescript-audience-network", @@ -55059,7 +54894,7 @@ } }, { - "i": 950, + "i": 947, "$": { "0": { "v": "nativescript-audio", @@ -55144,7 +54979,7 @@ } }, { - "i": 951, + "i": 948, "$": { "0": { "v": "nativescript-audio-jf", @@ -55219,7 +55054,7 @@ } }, { - "i": 952, + "i": 949, "$": { "0": { "v": "nativescript-audio-no-record", @@ -55314,7 +55149,7 @@ } }, { - "i": 953, + "i": 950, "$": { "0": { "v": "nativescript-audio-player", @@ -55399,7 +55234,7 @@ } }, { - "i": 954, + "i": 951, "$": { "0": { "v": "nativescript-audio-player-tk", @@ -55444,7 +55279,7 @@ } }, { - "i": 955, + "i": 952, "$": { "0": { "v": "nativescript-audio-ssi", @@ -55534,7 +55369,7 @@ } }, { - "i": 956, + "i": 953, "$": { "0": { "v": "nativescript-audio-tk", @@ -55564,20 +55399,15 @@ } }, { - "i": 957, + "i": 954, "$": { "0": { - "v": "nativescript-audio-with-pitch", + "v": "nativescript-audio-v2", "n": 1 }, "1": [ { - "v": "pitch", - "i": 15, - "n": 1 - }, - { - "v": "with", + "v": "v2", "i": 14, "n": 1 }, @@ -55659,21 +55489,116 @@ } }, { - "i": 958, + "i": 955, "$": { "0": { - "v": "nativescript-audioplay", + "v": "nativescript-audio-with-pitch", "n": 1 }, "1": [ { - "v": "audioplay", - "i": 8, + "v": "pitch", + "i": 15, + "n": 1 + }, + { + "v": "with", + "i": 14, + "n": 1 + }, + { + "v": "audio", + "i": 13, "n": 1 }, { "v": "nativescript", - "i": 7, + "i": 12, + "n": 1 + }, + { + "v": "nathanwalker", + "i": 11, + "n": 1 + }, + { + "v": "bradmartin", + "i": 10, + "n": 1 + }, + { + "v": "nStudio", + "i": 9, + "n": 1 + }, + { + "v": "audio", + "i": 8, + "n": 1 + }, + { + "v": "recorder", + "i": 7, + "n": 1 + }, + { + "v": "microphone", + "i": 6, + "n": 1 + }, + { + "v": "music", + "i": 5, + "n": 1 + }, + { + "v": "iOS", + "i": 4, + "n": 1 + }, + { + "v": "Android", + "i": 3, + "n": 1 + }, + { + "v": "TypeScript", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "NativeScript plugin to record and play audio.", + "n": 0.378 + } + } + }, + { + "i": 956, + "$": { + "0": { + "v": "nativescript-audioplay", + "n": 1 + }, + "1": [ + { + "v": "audioplay", + "i": 8, + "n": 1 + }, + { + "v": "nativescript", + "i": 7, "n": 1 }, { @@ -55719,7 +55644,7 @@ } }, { - "i": 959, + "i": 957, "$": { "0": { "v": "nativescript-ausweisapp-sdk-wrapper", @@ -55769,7 +55694,7 @@ } }, { - "i": 960, + "i": 958, "$": { "0": { "v": "nativescript-auth0", @@ -55834,7 +55759,7 @@ } }, { - "i": 961, + "i": 959, "$": { "0": { "v": "nativescript-authentication", @@ -55879,7 +55804,7 @@ } }, { - "i": 962, + "i": 960, "$": { "0": { "v": "nativescript-auto-complete-edit-text", @@ -55939,7 +55864,7 @@ } }, { - "i": 963, + "i": 961, "$": { "0": { "v": "nativescript-auto-fit-label", @@ -56004,7 +55929,7 @@ } }, { - "i": 964, + "i": 962, "$": { "0": { "v": "nativescript-auto-fit-text", @@ -56069,7 +55994,7 @@ } }, { - "i": 965, + "i": 963, "$": { "0": { "v": "nativescript-autocomplete", @@ -56114,7 +56039,7 @@ } }, { - "i": 966, + "i": 964, "$": { "0": { "v": "nativescript-autocomplete-x", @@ -56179,7 +56104,7 @@ } }, { - "i": 967, + "i": 965, "$": { "0": { "v": "nativescript-awesome-loaders", @@ -56224,7 +56149,7 @@ } }, { - "i": 968, + "i": 966, "$": { "0": { "v": "nativescript-awesome-webview", @@ -56304,7 +56229,7 @@ } }, { - "i": 969, + "i": 967, "$": { "0": { "v": "nativescript-awesome-webview-with-custom-menu-items", @@ -56404,7 +56329,7 @@ } }, { - "i": 970, + "i": 968, "$": { "0": { "v": "nativescript-aws", @@ -56474,7 +56399,7 @@ } }, { - "i": 971, + "i": 969, "$": { "0": { "v": "nativescript-aws-cognito", @@ -56524,7 +56449,7 @@ } }, { - "i": 972, + "i": 970, "$": { "0": { "v": "nativescript-aws-dc", @@ -56574,7 +56499,7 @@ } }, { - "i": 973, + "i": 971, "$": { "0": { "v": "nativescript-aws-dynamo", @@ -56624,7 +56549,7 @@ } }, { - "i": 974, + "i": 972, "$": { "0": { "v": "nativescript-aws-sdk", @@ -56674,7 +56599,7 @@ } }, { - "i": 975, + "i": 973, "$": { "0": { "v": "nativescript-azure-ad", @@ -56724,7 +56649,7 @@ } }, { - "i": 976, + "i": 974, "$": { "0": { "v": "nativescript-azure-auth", @@ -56774,7 +56699,7 @@ } }, { - "i": 977, + "i": 975, "$": { "0": { "v": "nativescript-azure-cognitiveservices", @@ -56824,7 +56749,7 @@ } }, { - "i": 978, + "i": 976, "$": { "0": { "v": "nativescript-azure-mobile-apps", @@ -56889,7 +56814,7 @@ } }, { - "i": 979, + "i": 977, "$": { "0": { "v": "nativescript-azure-mobile-apps-with-updated-auth", @@ -56969,7 +56894,7 @@ } }, { - "i": 980, + "i": 978, "$": { "0": { "v": "nativescript-azure-mobile-basic", @@ -57019,7 +56944,7 @@ } }, { - "i": 981, + "i": 979, "$": { "0": { "v": "nativescript-azure-storage", @@ -57084,7 +57009,7 @@ } }, { - "i": 982, + "i": 980, "$": { "0": { "v": "nativescript-background-execution", @@ -57164,7 +57089,7 @@ } }, { - "i": 983, + "i": 981, "$": { "0": { "v": "nativescript-background-fetch", @@ -57214,7 +57139,7 @@ } }, { - "i": 984, + "i": 982, "$": { "0": { "v": "nativescript-background-geolocation", @@ -57269,7 +57194,7 @@ } }, { - "i": 985, + "i": 983, "$": { "0": { "v": "nativescript-background-geolocation-lt", @@ -57329,7 +57254,7 @@ } }, { - "i": 986, + "i": 984, "$": { "0": { "v": "nativescript-background-gps", @@ -57379,7 +57304,7 @@ } }, { - "i": 987, + "i": 985, "$": { "0": { "v": "nativescript-background-http", @@ -57434,7 +57359,7 @@ } }, { - "i": 988, + "i": 986, "$": { "0": { "v": "nativescript-badge-button", @@ -57484,7 +57409,7 @@ } }, { - "i": 989, + "i": 987, "$": { "0": { "v": "nativescript-baidu-push", @@ -57514,42 +57439,7 @@ } }, { - "i": 990, - "$": { - "0": { - "v": "nativescript-baidu-push-ins", - "n": 1 - }, - "1": [ - { - "v": "ins", - "i": 3, - "n": 1 - }, - { - "v": "push", - "i": 2, - "n": 1 - }, - { - "v": "baidu", - "i": 1, - "n": 1 - }, - { - "v": "nativescript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "The code for the Push Plugin for NativeScript.", - "n": 0.354 - } - } - }, - { - "i": 991, + "i": 988, "$": { "0": { "v": "nativescript-baidu-push-notifications", @@ -57604,7 +57494,7 @@ } }, { - "i": 992, + "i": 989, "$": { "0": { "v": "nativescript-barcodelib", @@ -57644,7 +57534,7 @@ } }, { - "i": 993, + "i": 990, "$": { "0": { "v": "nativescript-barcodescanner", @@ -57794,7 +57684,7 @@ } }, { - "i": 994, + "i": 991, "$": { "0": { "v": "nativescript-barcodeview", @@ -57949,7 +57839,7 @@ } }, { - "i": 995, + "i": 992, "$": { "0": { "v": "nativescript-base-64-manager", @@ -58004,7 +57894,7 @@ } }, { - "i": 996, + "i": 993, "$": { "0": { "v": "nativescript-base64", @@ -58049,7 +57939,7 @@ } }, { - "i": 997, + "i": 994, "$": { "0": { "v": "nativescript-batch", @@ -58089,7 +57979,7 @@ } }, { - "i": 998, + "i": 995, "$": { "0": { "v": "nativescript-batch-notifications", @@ -58149,7 +58039,7 @@ } }, { - "i": 999, + "i": 996, "$": { "0": { "v": "nativescript-batch-notifs", @@ -58199,7 +58089,7 @@ } }, { - "i": 1000, + "i": 997, "$": { "0": { "v": "nativescript-bcryptjs", @@ -58244,7 +58134,7 @@ } }, { - "i": 1001, + "i": 998, "$": { "0": { "v": "nativescript-beacon-ins", @@ -58274,7 +58164,7 @@ } }, { - "i": 1002, + "i": 999, "$": { "0": { "v": "nativescript-bengrantswifi", @@ -58299,7 +58189,7 @@ } }, { - "i": 1003, + "i": 1000, "$": { "0": { "v": "nativescript-better-sqlite", @@ -58349,7 +58239,7 @@ } }, { - "i": 1004, + "i": 1001, "$": { "0": { "v": "nativescript-betterwebsockets", @@ -58424,7 +58314,7 @@ } }, { - "i": 1005, + "i": 1002, "$": { "0": { "v": "nativescript-bip39", @@ -58460,7 +58350,7 @@ } }, { - "i": 1006, + "i": 1003, "$": { "0": { "v": "nativescript-bitmap-factory", @@ -58570,7 +58460,7 @@ } }, { - "i": 1007, + "i": 1004, "$": { "0": { "v": "nativescript-bluetooth", @@ -58630,7 +58520,7 @@ } }, { - "i": 1008, + "i": 1005, "$": { "0": { "v": "nativescript-blur", @@ -58675,7 +58565,7 @@ } }, { - "i": 1009, + "i": 1006, "$": { "0": { "v": "nativescript-blurview", @@ -58720,7 +58610,7 @@ } }, { - "i": 1010, + "i": 1007, "$": { "0": { "v": "nativescript-bored-rudolph", @@ -58800,7 +58690,7 @@ } }, { - "i": 1011, + "i": 1008, "$": { "0": { "v": "nativescript-bottom-navigation", @@ -58880,7 +58770,7 @@ } }, { - "i": 1012, + "i": 1009, "$": { "0": { "v": "nativescript-bottombar", @@ -58965,7 +58855,7 @@ } }, { - "i": 1013, + "i": 1010, "$": { "0": { "v": "nativescript-bottomnavigation", @@ -59025,7 +58915,7 @@ } }, { - "i": 1014, + "i": 1011, "$": { "0": { "v": "nativescript-braintree", @@ -59070,7 +58960,7 @@ } }, { - "i": 1015, + "i": 1012, "$": { "0": { "v": "nativescript-braintree-temp", @@ -59125,7 +59015,7 @@ } }, { - "i": 1016, + "i": 1013, "$": { "0": { "v": "nativescript-braze", @@ -59170,7 +59060,7 @@ } }, { - "i": 1017, + "i": 1014, "$": { "0": { "v": "nativescript-breeze", @@ -59195,7 +59085,7 @@ } }, { - "i": 1018, + "i": 1015, "$": { "0": { "v": "nativescript-brightness", @@ -59245,7 +59135,7 @@ } }, { - "i": 1019, + "i": 1016, "$": { "0": { "v": "nativescript-brother-printers", @@ -59295,7 +59185,7 @@ } }, { - "i": 1020, + "i": 1017, "$": { "0": { "v": "nativescript-browser-polyfill", @@ -59375,7 +59265,7 @@ } }, { - "i": 1021, + "i": 1018, "$": { "0": { "v": "nativescript-bubble-navigation", @@ -59470,7 +59360,7 @@ } }, { - "i": 1022, + "i": 1019, "$": { "0": { "v": "nativescript-bugsee", @@ -59515,7 +59405,7 @@ } }, { - "i": 1023, + "i": 1020, "$": { "0": { "v": "nativescript-bugsnag", @@ -59560,7 +59450,7 @@ } }, { - "i": 1024, + "i": 1021, "$": { "0": { "v": "nativescript-c1rfid", @@ -59605,7 +59495,7 @@ } }, { - "i": 1025, + "i": 1022, "$": { "0": { "v": "nativescript-cache", @@ -59630,7 +59520,7 @@ } }, { - "i": 1026, + "i": 1023, "$": { "0": { "v": "nativescript-calendar", @@ -59695,7 +59585,7 @@ } }, { - "i": 1027, + "i": 1024, "$": { "0": { "v": "nativescript-calendar-weekview", @@ -59770,7 +59660,7 @@ } }, { - "i": 1028, + "i": 1025, "$": { "0": { "v": "nativescript-call", @@ -59840,7 +59730,7 @@ } }, { - "i": 1029, + "i": 1026, "$": { "0": { "v": "nativescript-callblock", @@ -59885,7 +59775,7 @@ } }, { - "i": 1030, + "i": 1027, "$": { "0": { "v": "nativescript-CallLog", @@ -59910,7 +59800,7 @@ } }, { - "i": 1031, + "i": 1028, "$": { "0": { "v": "nativescript-camera", @@ -59970,7 +59860,7 @@ } }, { - "i": 1032, + "i": 1029, "$": { "0": { "v": "nativescript-camera-ins", @@ -60035,7 +59925,7 @@ } }, { - "i": 1033, + "i": 1030, "$": { "0": { "v": "nativescript-camera-overfullscreen", @@ -60100,7 +59990,7 @@ } }, { - "i": 1034, + "i": 1031, "$": { "0": { "v": "nativescript-camera-plus-custom", @@ -60165,7 +60055,7 @@ } }, { - "i": 1035, + "i": 1032, "$": { "0": { "v": "nativescript-camera-plus-fixed-distorted", @@ -60235,7 +60125,7 @@ } }, { - "i": 1036, + "i": 1033, "$": { "0": { "v": "nativescript-camera-plus-poc", @@ -60300,7 +60190,7 @@ } }, { - "i": 1037, + "i": 1034, "$": { "0": { "v": "nativescript-camera-preview", @@ -60330,7 +60220,7 @@ } }, { - "i": 1038, + "i": 1035, "$": { "0": { "v": "nativescript-canvas", @@ -60375,7 +60265,7 @@ } }, { - "i": 1039, + "i": 1036, "$": { "0": { "v": "nativescript-canvas-interface", @@ -60420,7 +60310,7 @@ } }, { - "i": 1040, + "i": 1037, "$": { "0": { "v": "nativescript-canvas-plugin", @@ -60500,7 +60390,7 @@ } }, { - "i": 1041, + "i": 1038, "$": { "0": { "v": "nativescript-canvaslabel", @@ -60545,7 +60435,7 @@ } }, { - "i": 1042, + "i": 1039, "$": { "0": { "v": "nativescript-card-stack-view", @@ -60605,7 +60495,7 @@ } }, { - "i": 1043, + "i": 1040, "$": { "0": { "v": "nativescript-cardio", @@ -60650,7 +60540,7 @@ } }, { - "i": 1044, + "i": 1041, "$": { "0": { "v": "nativescript-cardio-custom", @@ -60690,7 +60580,7 @@ } }, { - "i": 1045, + "i": 1042, "$": { "0": { "v": "nativescript-cardio-reader", @@ -60740,7 +60630,7 @@ } }, { - "i": 1046, + "i": 1043, "$": { "0": { "v": "nativescript-cardreader", @@ -60785,7 +60675,7 @@ } }, { - "i": 1047, + "i": 1044, "$": { "0": { "v": "nativescript-carousel", @@ -60855,7 +60745,7 @@ } }, { - "i": 1048, + "i": 1045, "$": { "0": { "v": "nativescript-carousel-view", @@ -60925,7 +60815,7 @@ } }, { - "i": 1049, + "i": 1046, "$": { "0": { "v": "nativescript-carousel-without-page-indicators", @@ -61010,7 +60900,7 @@ } }, { - "i": 1050, + "i": 1047, "$": { "0": { "v": "nativescript-carto", @@ -61050,7 +60940,7 @@ } }, { - "i": 1051, + "i": 1048, "$": { "0": { "v": "nativescript-cast", @@ -61105,7 +60995,7 @@ } }, { - "i": 1052, + "i": 1049, "$": { "0": { "v": "nativescript-cast-ns6-beta", @@ -61170,7 +61060,7 @@ } }, { - "i": 1053, + "i": 1050, "$": { "0": { "v": "nativescript-cblite", @@ -61215,7 +61105,7 @@ } }, { - "i": 1054, + "i": 1051, "$": { "0": { "v": "nativescript-cblite-xl", @@ -61285,7 +61175,7 @@ } }, { - "i": 1055, + "i": 1052, "$": { "0": { "v": "nativescript-centered-label", @@ -61355,7 +61245,7 @@ } }, { - "i": 1056, + "i": 1053, "$": { "0": { "v": "nativescript-cfalert-dialog", @@ -61440,7 +61330,7 @@ } }, { - "i": 1057, + "i": 1054, "$": { "0": { "v": "nativescript-chart", @@ -61485,7 +61375,7 @@ } }, { - "i": 1058, + "i": 1055, "$": { "0": { "v": "nativescript-charts", @@ -61535,7 +61425,7 @@ } }, { - "i": 1059, + "i": 1056, "$": { "0": { "v": "nativescript-chatview", @@ -61590,7 +61480,7 @@ } }, { - "i": 1060, + "i": 1057, "$": { "0": { "v": "nativescript-checkbox-fix-ios", @@ -61660,7 +61550,7 @@ } }, { - "i": 1061, + "i": 1058, "$": { "0": { "v": "nativescript-checkbox-ns-7", @@ -61730,7 +61620,7 @@ } }, { - "i": 1062, + "i": 1059, "$": { "0": { "v": "nativescript-checkbox-spms", @@ -61795,7 +61685,7 @@ } }, { - "i": 1063, + "i": 1060, "$": { "0": { "v": "nativescript-child-animations", @@ -61850,7 +61740,7 @@ } }, { - "i": 1064, + "i": 1061, "$": { "0": { "v": "nativescript-childprocess", @@ -61900,7 +61790,7 @@ } }, { - "i": 1065, + "i": 1062, "$": { "0": { "v": "nativescript-chrome-tabs", @@ -61955,7 +61845,7 @@ } }, { - "i": 1066, + "i": 1063, "$": { "0": { "v": "nativescript-cifrate", @@ -62000,7 +61890,7 @@ } }, { - "i": 1067, + "i": 1064, "$": { "0": { "v": "nativescript-circle-menu", @@ -62055,7 +61945,7 @@ } }, { - "i": 1068, + "i": 1065, "$": { "0": { "v": "nativescript-clevertap", @@ -62100,7 +61990,7 @@ } }, { - "i": 1069, + "i": 1066, "$": { "0": { "v": "nativescript-clipboard", @@ -62155,7 +62045,7 @@ } }, { - "i": 1070, + "i": 1067, "$": { "0": { "v": "nativescript-cloud", @@ -62205,7 +62095,7 @@ } }, { - "i": 1071, + "i": 1068, "$": { "0": { "v": "nativescript-cloudpayments", @@ -62255,7 +62145,7 @@ } }, { - "i": 1072, + "i": 1069, "$": { "0": { "v": "nativescript-code-push", @@ -62315,7 +62205,7 @@ } }, { - "i": 1073, + "i": 1070, "$": { "0": { "v": "nativescript-code-push-cli", @@ -62365,7 +62255,7 @@ } }, { - "i": 1074, + "i": 1071, "$": { "0": { "v": "nativescript-code-push-sdk", @@ -62400,7 +62290,7 @@ } }, { - "i": 1075, + "i": 1072, "$": { "0": { "v": "nativescript-codility-onesignal", @@ -62450,7 +62340,7 @@ } }, { - "i": 1076, + "i": 1073, "$": { "0": { "v": "nativescript-cognito", @@ -62510,7 +62400,7 @@ } }, { - "i": 1077, + "i": 1074, "$": { "0": { "v": "nativescript-collapsing-header", @@ -62565,7 +62455,7 @@ } }, { - "i": 1078, + "i": 1075, "$": { "0": { "v": "nativescript-collectionview", @@ -62610,7 +62500,7 @@ } }, { - "i": 1079, + "i": 1076, "$": { "0": { "v": "nativescript-collectionview-waterfall", @@ -62660,7 +62550,7 @@ } }, { - "i": 1080, + "i": 1077, "$": { "0": { "v": "nativescript-color-picker", @@ -62730,7 +62620,7 @@ } }, { - "i": 1081, + "i": 1078, "$": { "0": { "v": "nativescript-comments", @@ -62790,7 +62680,7 @@ } }, { - "i": 1082, + "i": 1079, "$": { "0": { "v": "nativescript-comments-sw", @@ -62855,7 +62745,7 @@ } }, { - "i": 1083, + "i": 1080, "$": { "0": { "v": "nativescript-component", @@ -62910,7 +62800,7 @@ } }, { - "i": 1084, + "i": 1081, "$": { "0": { "v": "nativescript-conekta-sdk", @@ -62960,7 +62850,7 @@ } }, { - "i": 1085, + "i": 1082, "$": { "0": { "v": "nativescript-confettiview", @@ -63005,7 +62895,7 @@ } }, { - "i": 1086, + "i": 1083, "$": { "0": { "v": "nativescript-connectivity-manager-plugin", @@ -63120,7 +63010,7 @@ } }, { - "i": 1087, + "i": 1084, "$": { "0": { "v": "nativescript-connectycube", @@ -63225,7 +63115,7 @@ } }, { - "i": 1088, + "i": 1085, "$": { "0": { "v": "nativescript-contacts", @@ -63270,7 +63160,7 @@ } }, { - "i": 1089, + "i": 1086, "$": { "0": { "v": "nativescript-contacts-chooser", @@ -63320,7 +63210,7 @@ } }, { - "i": 1090, + "i": 1087, "$": { "0": { "v": "nativescript-contacts-lite", @@ -63370,7 +63260,7 @@ } }, { - "i": 1091, + "i": 1088, "$": { "0": { "v": "nativescript-contacts-picker", @@ -63425,7 +63315,7 @@ } }, { - "i": 1092, + "i": 1089, "$": { "0": { "v": "nativescript-content-providers", @@ -63480,7 +63370,7 @@ } }, { - "i": 1093, + "i": 1090, "$": { "0": { "v": "nativescript-context-apis", @@ -63530,7 +63420,7 @@ } }, { - "i": 1094, + "i": 1091, "$": { "0": { "v": "nativescript-converters", @@ -63575,7 +63465,7 @@ } }, { - "i": 1095, + "i": 1092, "$": { "0": { "v": "nativescript-cordova", @@ -63620,7 +63510,7 @@ } }, { - "i": 1096, + "i": 1093, "$": { "0": { "v": "nativescript-coremotion", @@ -63675,7 +63565,7 @@ } }, { - "i": 1097, + "i": 1094, "$": { "0": { "v": "nativescript-couchbase", @@ -63725,7 +63615,7 @@ } }, { - "i": 1098, + "i": 1095, "$": { "0": { "v": "nativescript-couchbase-plugin", @@ -63775,7 +63665,7 @@ } }, { - "i": 1099, + "i": 1096, "$": { "0": { "v": "nativescript-couchbase-trotter", @@ -63830,7 +63720,7 @@ } }, { - "i": 1100, + "i": 1097, "$": { "0": { "v": "nativescript-couchbase-vuex-orm", @@ -63890,7 +63780,7 @@ } }, { - "i": 1101, + "i": 1098, "$": { "0": { "v": "nativescript-couchbaselite", @@ -63965,7 +63855,7 @@ } }, { - "i": 1102, + "i": 1099, "$": { "0": { "v": "nativescript-couchdb", @@ -64010,7 +63900,7 @@ } }, { - "i": 1103, + "i": 1100, "$": { "0": { "v": "nativescript-crossplatform-aes", @@ -64065,7 +63955,7 @@ } }, { - "i": 1104, + "i": 1101, "$": { "0": { "v": "nativescript-crypto", @@ -64140,7 +64030,7 @@ } }, { - "i": 1105, + "i": 1102, "$": { "0": { "v": "nativescript-cryptography", @@ -64185,7 +64075,7 @@ } }, { - "i": 1106, + "i": 1103, "$": { "0": { "v": "nativescript-cscreenshot", @@ -64245,7 +64135,7 @@ } }, { - "i": 1107, + "i": 1104, "$": { "0": { "v": "nativescript-css-loader", @@ -64275,7 +64165,7 @@ } }, { - "i": 1108, + "i": 1105, "$": { "0": { "v": "nativescript-custom-bottomsheet", @@ -64345,7 +64235,7 @@ } }, { - "i": 1109, + "i": 1106, "$": { "0": { "v": "nativescript-custom-entitlements", @@ -64380,7 +64270,7 @@ } }, { - "i": 1110, + "i": 1107, "$": { "0": { "v": "nativescript-custom-local-notifications", @@ -64435,7 +64325,7 @@ } }, { - "i": 1111, + "i": 1108, "$": { "0": { "v": "nativescript-custom-rotors", @@ -64505,7 +64395,7 @@ } }, { - "i": 1112, + "i": 1109, "$": { "0": { "v": "nativescript-customerly", @@ -64550,7 +64440,7 @@ } }, { - "i": 1113, + "i": 1110, "$": { "0": { "v": "nativescript-customwebview", @@ -64595,7 +64485,7 @@ } }, { - "i": 1114, + "i": 1111, "$": { "0": { "v": "nativescript-danem-checkbox", @@ -64660,7 +64550,7 @@ } }, { - "i": 1115, + "i": 1112, "$": { "0": { "v": "nativescript-danem-drop-down", @@ -64715,7 +64605,7 @@ } }, { - "i": 1116, + "i": 1113, "$": { "0": { "v": "nativescript-danem-google-maps", @@ -64770,7 +64660,7 @@ } }, { - "i": 1117, + "i": 1114, "$": { "0": { "v": "nativescript-danem-google-maps-utils", @@ -64830,7 +64720,7 @@ } }, { - "i": 1118, + "i": 1115, "$": { "0": { "v": "nativescript-danem-videorecord", @@ -64880,7 +64770,7 @@ } }, { - "i": 1119, + "i": 1116, "$": { "0": { "v": "nativescript-dark-mode", @@ -64940,7 +64830,7 @@ } }, { - "i": 1120, + "i": 1117, "$": { "0": { "v": "nativescript-date-range-picker", @@ -65000,7 +64890,7 @@ } }, { - "i": 1121, + "i": 1118, "$": { "0": { "v": "nativescript-date-utils", @@ -65065,7 +64955,7 @@ } }, { - "i": 1122, + "i": 1119, "$": { "0": { "v": "nativescript-datetimepicker", @@ -65130,7 +65020,7 @@ } }, { - "i": 1123, + "i": 1120, "$": { "0": { "v": "nativescript-ddp-login", @@ -65190,7 +65080,7 @@ } }, { - "i": 1124, + "i": 1121, "$": { "0": { "v": "nativescript-dec-sdk", @@ -65260,7 +65150,7 @@ } }, { - "i": 1125, + "i": 1122, "$": { "0": { "v": "nativescript-demo-utils", @@ -65310,7 +65200,7 @@ } }, { - "i": 1126, + "i": 1123, "$": { "0": { "v": "nativescript-demoplugin", @@ -65355,7 +65245,7 @@ } }, { - "i": 1127, + "i": 1124, "$": { "0": { "v": "nativescript-dev-app-id-changer", @@ -65425,7 +65315,7 @@ } }, { - "i": 1128, + "i": 1125, "$": { "0": { "v": "nativescript-dev-appconfig", @@ -65480,7 +65370,7 @@ } }, { - "i": 1129, + "i": 1126, "$": { "0": { "v": "nativescript-dev-appium", @@ -65525,7 +65415,7 @@ } }, { - "i": 1130, + "i": 1127, "$": { "0": { "v": "nativescript-dev-assets", @@ -65580,7 +65470,7 @@ } }, { - "i": 1131, + "i": 1128, "$": { "0": { "v": "nativescript-dev-build-info", @@ -65650,7 +65540,7 @@ } }, { - "i": 1132, + "i": 1129, "$": { "0": { "v": "nativescript-dev-coffeescript", @@ -65680,7 +65570,7 @@ } }, { - "i": 1133, + "i": 1130, "$": { "0": { "v": "nativescript-dev-cucumber", @@ -65730,7 +65620,7 @@ } }, { - "i": 1134, + "i": 1131, "$": { "0": { "v": "nativescript-dev-debugging", @@ -65760,7 +65650,7 @@ } }, { - "i": 1135, + "i": 1132, "$": { "0": { "v": "nativescript-dev-file-loader", @@ -65805,7 +65695,7 @@ } }, { - "i": 1136, + "i": 1133, "$": { "0": { "v": "nativescript-dev-jade", @@ -65835,7 +65725,7 @@ } }, { - "i": 1137, + "i": 1134, "$": { "0": { "v": "nativescript-dev-jade-html", @@ -65870,7 +65760,7 @@ } }, { - "i": 1138, + "i": 1135, "$": { "0": { "v": "nativescript-dev-less", @@ -65900,7 +65790,7 @@ } }, { - "i": 1139, + "i": 1136, "$": { "0": { "v": "nativescript-dev-multiple-env", @@ -65935,7 +65825,7 @@ } }, { - "i": 1140, + "i": 1137, "$": { "0": { "v": "nativescript-dev-stylus", @@ -65975,7 +65865,7 @@ } }, { - "i": 1141, + "i": 1138, "$": { "0": { "v": "nativescript-dev-typescript", @@ -66005,7 +65895,7 @@ } }, { - "i": 1142, + "i": 1139, "$": { "0": { "v": "nativescript-dev-version", @@ -66035,7 +65925,7 @@ } }, { - "i": 1143, + "i": 1140, "$": { "0": { "v": "nativescript-dev-version-ssi", @@ -66070,7 +65960,7 @@ } }, { - "i": 1144, + "i": 1141, "$": { "0": { "v": "nativescript-dev-webpack", @@ -66100,7 +65990,7 @@ } }, { - "i": 1145, + "i": 1142, "$": { "0": { "v": "nativescript-dev-xcode", @@ -66130,7 +66020,7 @@ } }, { - "i": 1146, + "i": 1143, "$": { "0": { "v": "nativescript-dev-xmlxsd", @@ -66160,7 +66050,7 @@ } }, { - "i": 1147, + "i": 1144, "$": { "0": { "v": "nativescript-device-contacts", @@ -66190,7 +66080,7 @@ } }, { - "i": 1148, + "i": 1145, "$": { "0": { "v": "nativescript-device-uuid", @@ -66240,7 +66130,7 @@ } }, { - "i": 1149, + "i": 1146, "$": { "0": { "v": "nativescript-dialog", @@ -66315,7 +66205,7 @@ } }, { - "i": 1150, + "i": 1147, "$": { "0": { "v": "nativescript-diawi-distribution", @@ -66370,7 +66260,7 @@ } }, { - "i": 1151, + "i": 1148, "$": { "0": { "v": "nativescript-directions", @@ -66425,7 +66315,7 @@ } }, { - "i": 1152, + "i": 1149, "$": { "0": { "v": "nativescript-disable-bitcode", @@ -66475,7 +66365,7 @@ } }, { - "i": 1153, + "i": 1150, "$": { "0": { "v": "nativescript-dna-deviceinfo", @@ -66755,7 +66645,7 @@ } }, { - "i": 1154, + "i": 1151, "$": { "0": { "v": "nativescript-dna-netservices", @@ -66855,7 +66745,7 @@ } }, { - "i": 1155, + "i": 1152, "$": { "0": { "v": "nativescript-doctor", @@ -66895,7 +66785,7 @@ } }, { - "i": 1156, + "i": 1153, "$": { "0": { "v": "nativescript-document-picker", @@ -66935,7 +66825,7 @@ } }, { - "i": 1157, + "i": 1154, "$": { "0": { "v": "nativescript-dom-free", @@ -67000,7 +66890,7 @@ } }, { - "i": 1158, + "i": 1155, "$": { "0": { "v": "nativescript-doorbell.io", @@ -67025,7 +66915,7 @@ } }, { - "i": 1159, + "i": 1156, "$": { "0": { "v": "nativescript-download-progress", @@ -67090,7 +66980,7 @@ } }, { - "i": 1160, + "i": 1157, "$": { "0": { "v": "nativescript-downloader", @@ -67145,7 +67035,7 @@ } }, { - "i": 1161, + "i": 1158, "$": { "0": { "v": "nativescript-downloadmanager", @@ -67195,7 +67085,7 @@ } }, { - "i": 1162, + "i": 1159, "$": { "0": { "v": "nativescript-drawingpad", @@ -67260,7 +67150,7 @@ } }, { - "i": 1163, + "i": 1160, "$": { "0": { "v": "nativescript-drop-down", @@ -67310,7 +67200,7 @@ } }, { - "i": 1164, + "i": 1161, "$": { "0": { "v": "nativescript-dropbox", @@ -67360,7 +67250,7 @@ } }, { - "i": 1165, + "i": 1162, "$": { "0": { "v": "nativescript-dynamic-label", @@ -67410,7 +67300,7 @@ } }, { - "i": 1166, + "i": 1163, "$": { "0": { "v": "nativescript-dynamsoft-barcode-reader", @@ -67485,7 +67375,7 @@ } }, { - "i": 1167, + "i": 1164, "$": { "0": { "v": "nativescript-dynamsoft-camera-enhancer", @@ -67555,7 +67445,7 @@ } }, { - "i": 1168, + "i": 1165, "$": { "0": { "v": "nativescript-dynatrace", @@ -67600,7 +67490,7 @@ } }, { - "i": 1169, + "i": 1166, "$": { "0": { "v": "nativescript-dynatrace-cocoapods-plugin", @@ -67655,7 +67545,7 @@ } }, { - "i": 1170, + "i": 1167, "$": { "0": { "v": "nativescript-dynatrace-gradle-plugin", @@ -67710,7 +67600,7 @@ } }, { - "i": 1171, + "i": 1168, "$": { "0": { "v": "nativescript-easy-dialog", @@ -67795,7 +67685,7 @@ } }, { - "i": 1172, + "i": 1169, "$": { "0": { "v": "nativescript-easy-getui", @@ -67845,7 +67735,7 @@ } }, { - "i": 1173, + "i": 1170, "$": { "0": { "v": "nativescript-easy-notification-banner", @@ -67900,7 +67790,7 @@ } }, { - "i": 1174, + "i": 1171, "$": { "0": { "v": "nativescript-easy-utils", @@ -67950,7 +67840,7 @@ } }, { - "i": 1175, + "i": 1172, "$": { "0": { "v": "nativescript-echo", @@ -67995,7 +67885,7 @@ } }, { - "i": 1176, + "i": 1173, "$": { "0": { "v": "nativescript-echo-ns", @@ -68045,7 +67935,7 @@ } }, { - "i": 1177, + "i": 1174, "$": { "0": { "v": "nativescript-effects", @@ -68095,7 +67985,7 @@ } }, { - "i": 1178, + "i": 1175, "$": { "0": { "v": "nativescript-electrumx-client", @@ -68170,7 +68060,77 @@ } }, { - "i": 1179, + "i": 1176, + "$": { + "0": { + "v": "nativescript-email", + "n": 1 + }, + "1": [ + { + "v": "email", + "i": 10, + "n": 1 + }, + { + "v": "nativescript", + "i": 9, + "n": 1 + }, + { + "v": "Attachment", + "i": 8, + "n": 1 + }, + { + "v": "MailComposer", + "i": 7, + "n": 1 + }, + { + "v": "Compose", + "i": 6, + "n": 1 + }, + { + "v": "Draft", + "i": 5, + "n": 1 + }, + { + "v": "E-mail", + "i": 4, + "n": 1 + }, + { + "v": "Email", + "i": 3, + "n": 1 + }, + { + "v": "Mail", + "i": 2, + "n": 1 + }, + { + "v": "NativeScript", + "i": 1, + "n": 1 + }, + { + "v": "ecosystem:NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Email plugin for your NativeScript app", + "n": 0.408 + } + } + }, + { + "i": 1177, "$": { "0": { "v": "nativescript-emoji", @@ -68215,7 +68175,7 @@ } }, { - "i": 1180, + "i": 1178, "$": { "0": { "v": "nativescript-empty-template", @@ -68245,7 +68205,7 @@ } }, { - "i": 1181, + "i": 1179, "$": { "0": { "v": "nativescript-emulator-reload", @@ -68305,7 +68265,7 @@ } }, { - "i": 1182, + "i": 1180, "$": { "0": { "v": "nativescript-enumerable", @@ -68355,7 +68315,7 @@ } }, { - "i": 1183, + "i": 1181, "$": { "0": { "v": "nativescript-envinfo", @@ -68376,7 +68336,7 @@ } }, { - "i": 1184, + "i": 1182, "$": { "0": { "v": "nativescript-environment-variables-hook", @@ -68456,7 +68416,7 @@ } }, { - "i": 1185, + "i": 1183, "$": { "0": { "v": "nativescript-epub", @@ -68501,7 +68461,7 @@ } }, { - "i": 1186, + "i": 1184, "$": { "0": { "v": "nativescript-epub-reader", @@ -68551,7 +68511,7 @@ } }, { - "i": 1187, + "i": 1185, "$": { "0": { "v": "nativescript-esc-pos", @@ -68601,7 +68561,7 @@ } }, { - "i": 1188, + "i": 1186, "$": { "0": { "v": "nativescript-escpos-printer", @@ -68671,7 +68631,7 @@ } }, { - "i": 1189, + "i": 1187, "$": { "0": { "v": "nativescript-estimote-plugin", @@ -68716,7 +68676,7 @@ } }, { - "i": 1190, + "i": 1188, "$": { "0": { "v": "nativescript-eventify", @@ -68771,7 +68731,7 @@ } }, { - "i": 1191, + "i": 1189, "$": { "0": { "v": "nativescript-exit", @@ -68816,7 +68776,7 @@ } }, { - "i": 1192, + "i": 1190, "$": { "0": { "v": "nativescript-explosionfield", @@ -68876,7 +68836,7 @@ } }, { - "i": 1193, + "i": 1191, "$": { "0": { "v": "nativescript-expresspay", @@ -68921,7 +68881,7 @@ } }, { - "i": 1194, + "i": 1192, "$": { "0": { "v": "nativescript-extendedinfo", @@ -68966,7 +68926,7 @@ } }, { - "i": 1195, + "i": 1193, "$": { "0": { "v": "nativescript-ezaudio", @@ -69021,7 +68981,7 @@ } }, { - "i": 1196, + "i": 1194, "$": { "0": { "v": "nativescript-fabric", @@ -69066,7 +69026,7 @@ } }, { - "i": 1197, + "i": 1195, "$": { "0": { "v": "nativescript-fabric-cp", @@ -69116,7 +69076,7 @@ } }, { - "i": 1198, + "i": 1196, "$": { "0": { "v": "nativescript-facebook", @@ -69166,7 +69126,7 @@ } }, { - "i": 1199, + "i": 1197, "$": { "0": { "v": "nativescript-facebook-7", @@ -69221,7 +69181,7 @@ } }, { - "i": 1200, + "i": 1198, "$": { "0": { "v": "nativescript-facebook-account-kit", @@ -69276,7 +69236,7 @@ } }, { - "i": 1201, + "i": 1199, "$": { "0": { "v": "nativescript-facebook-login", @@ -69311,7 +69271,7 @@ } }, { - "i": 1202, + "i": 1200, "$": { "0": { "v": "nativescript-facebook-login-webpack", @@ -69351,7 +69311,7 @@ } }, { - "i": 1203, + "i": 1201, "$": { "0": { "v": "nativescript-facebook-oauth", @@ -69381,7 +69341,7 @@ } }, { - "i": 1204, + "i": 1202, "$": { "0": { "v": "nativescript-facebookrebound", @@ -69456,7 +69416,7 @@ } }, { - "i": 1205, + "i": 1203, "$": { "0": { "v": "nativescript-fading-scroll-view", @@ -69511,7 +69471,7 @@ } }, { - "i": 1206, + "i": 1204, "$": { "0": { "v": "nativescript-fancy-calendar", @@ -69581,7 +69541,7 @@ } }, { - "i": 1207, + "i": 1205, "$": { "0": { "v": "nativescript-fancy-camera", @@ -69631,7 +69591,7 @@ } }, { - "i": 1208, + "i": 1206, "$": { "0": { "v": "nativescript-fancy-geo", @@ -69681,7 +69641,7 @@ } }, { - "i": 1209, + "i": 1207, "$": { "0": { "v": "nativescript-fancy-list-view", @@ -69736,7 +69696,7 @@ } }, { - "i": 1210, + "i": 1208, "$": { "0": { "v": "nativescript-fancyalert", @@ -69786,7 +69746,7 @@ } }, { - "i": 1211, + "i": 1209, "$": { "0": { "v": "nativescript-fast-android-r", @@ -69836,7 +69796,7 @@ } }, { - "i": 1212, + "i": 1210, "$": { "0": { "v": "nativescript-fb-analytics", @@ -69886,7 +69846,7 @@ } }, { - "i": 1213, + "i": 1211, "$": { "0": { "v": "nativescript-fcuuid", @@ -69931,7 +69891,7 @@ } }, { - "i": 1214, + "i": 1212, "$": { "0": { "v": "nativescript-feedback", @@ -70011,7 +69971,7 @@ } }, { - "i": 1215, + "i": 1213, "$": { "0": { "v": "nativescript-fetch", @@ -70036,7 +69996,7 @@ } }, { - "i": 1216, + "i": 1214, "$": { "0": { "v": "nativescript-ffmpeg-plugin", @@ -70086,7 +70046,7 @@ } }, { - "i": 1217, + "i": 1215, "$": { "0": { "v": "nativescript-ffmpeg-plugin-fixed", @@ -70141,7 +70101,7 @@ } }, { - "i": 1218, + "i": 1216, "$": { "0": { "v": "nativescript-file-photoview", @@ -70191,7 +70151,7 @@ } }, { - "i": 1219, + "i": 1217, "$": { "0": { "v": "nativescript-file-picker", @@ -70241,7 +70201,7 @@ } }, { - "i": 1220, + "i": 1218, "$": { "0": { "v": "nativescript-filepickers", @@ -70291,7 +70251,7 @@ } }, { - "i": 1221, + "i": 1219, "$": { "0": { "v": "nativescript-filter-select", @@ -70371,7 +70331,7 @@ } }, { - "i": 1222, + "i": 1220, "$": { "0": { "v": "nativescript-filterable-listpicker", @@ -70421,7 +70381,7 @@ } }, { - "i": 1223, + "i": 1221, "$": { "0": { "v": "nativescript-fingerprint-auth", @@ -70516,7 +70476,7 @@ } }, { - "i": 1224, + "i": 1222, "$": { "0": { "v": "nativescript-fingerprint-auth-custom", @@ -70616,7 +70576,7 @@ } }, { - "i": 1225, + "i": 1223, "$": { "0": { "v": "nativescript-firebase", @@ -70651,7 +70611,7 @@ } }, { - "i": 1226, + "i": 1224, "$": { "0": { "v": "nativescript-firebase-updated-new", @@ -70831,7 +70791,7 @@ } }, { - "i": 1227, + "i": 1225, "$": { "0": { "v": "nativescript-fit-oauth", @@ -70891,7 +70851,7 @@ } }, { - "i": 1228, + "i": 1226, "$": { "0": { "v": "nativescript-fitness", @@ -70951,7 +70911,7 @@ } }, { - "i": 1229, + "i": 1227, "$": { "0": { "v": "nativescript-five-sdk", @@ -71001,7 +70961,7 @@ } }, { - "i": 1230, + "i": 1228, "$": { "0": { "v": "nativescript-flashlight", @@ -71031,7 +70991,7 @@ } }, { - "i": 1231, + "i": 1229, "$": { "0": { "v": "nativescript-floatingactionbutton-enduco", @@ -71106,7 +71066,7 @@ } }, { - "i": 1232, + "i": 1230, "$": { "0": { "v": "nativescript-foaas", @@ -71151,7 +71111,7 @@ } }, { - "i": 1233, + "i": 1231, "$": { "0": { "v": "nativescript-folding-list-view", @@ -71221,7 +71181,7 @@ } }, { - "i": 1234, + "i": 1232, "$": { "0": { "v": "nativescript-foldingcell", @@ -71266,7 +71226,7 @@ } }, { - "i": 1235, + "i": 1233, "$": { "0": { "v": "nativescript-fonepaisa", @@ -71311,7 +71271,7 @@ } }, { - "i": 1236, + "i": 1234, "$": { "0": { "v": "nativescript-font-scale", @@ -71361,7 +71321,7 @@ } }, { - "i": 1237, + "i": 1235, "$": { "0": { "v": "nativescript-fontawesome", @@ -71436,7 +71396,7 @@ } }, { - "i": 1238, + "i": 1236, "$": { "0": { "v": "nativescript-fonticon", @@ -71491,7 +71451,7 @@ } }, { - "i": 1239, + "i": 1237, "$": { "0": { "v": "nativescript-forgm-sound", @@ -71551,7 +71511,7 @@ } }, { - "i": 1240, + "i": 1238, "$": { "0": { "v": "nativescript-fortumo-sms", @@ -71596,7 +71556,7 @@ } }, { - "i": 1241, + "i": 1239, "$": { "0": { "v": "nativescript-foss-sidedrawer", @@ -71646,7 +71606,7 @@ } }, { - "i": 1242, + "i": 1240, "$": { "0": { "v": "nativescript-fresco-compat", @@ -71691,7 +71651,7 @@ } }, { - "i": 1243, + "i": 1241, "$": { "0": { "v": "nativescript-fs-noclear", @@ -71726,7 +71686,7 @@ } }, { - "i": 1244, + "i": 1242, "$": { "0": { "v": "nativescript-ftp-client", @@ -71776,7 +71736,7 @@ } }, { - "i": 1245, + "i": 1243, "$": { "0": { "v": "nativescript-gameanalytics", @@ -71826,7 +71786,7 @@ } }, { - "i": 1246, + "i": 1244, "$": { "0": { "v": "nativescript-generate-pdf", @@ -71876,7 +71836,7 @@ } }, { - "i": 1247, + "i": 1245, "$": { "0": { "v": "nativescript-geo-firestore", @@ -71926,7 +71886,7 @@ } }, { - "i": 1248, + "i": 1246, "$": { "0": { "v": "nativescript-geocoding", @@ -71971,7 +71931,7 @@ } }, { - "i": 1249, + "i": 1247, "$": { "0": { "v": "nativescript-geofence-manager", @@ -72036,7 +71996,7 @@ } }, { - "i": 1250, + "i": 1248, "$": { "0": { "v": "nativescript-geofire-plugin", @@ -72081,7 +72041,7 @@ } }, { - "i": 1251, + "i": 1249, "$": { "0": { "v": "nativescript-geolocation", @@ -72126,7 +72086,7 @@ } }, { - "i": 1252, + "i": 1250, "$": { "0": { "v": "nativescript-gesturehandler", @@ -72166,7 +72126,7 @@ } }, { - "i": 1253, + "i": 1251, "$": { "0": { "v": "nativescript-getters", @@ -72346,7 +72306,7 @@ } }, { - "i": 1254, + "i": 1252, "$": { "0": { "v": "nativescript-gif", @@ -72406,7 +72366,7 @@ } }, { - "i": 1255, + "i": 1253, "$": { "0": { "v": "nativescript-gigya", @@ -72451,7 +72411,7 @@ } }, { - "i": 1256, + "i": 1254, "$": { "0": { "v": "nativescript-glia", @@ -72501,7 +72461,7 @@ } }, { - "i": 1257, + "i": 1255, "$": { "0": { "v": "nativescript-globalevents-free", @@ -72556,7 +72516,62 @@ } }, { - "i": 1258, + "i": 1256, + "$": { + "0": { + "v": "nativescript-gmaps", + "n": 1 + }, + "1": [ + { + "v": "gmaps", + "i": 7, + "n": 1 + }, + { + "v": "nativescript", + "i": 6, + "n": 1 + }, + { + "v": "SDK", + "i": 5, + "n": 1 + }, + { + "v": "API", + "i": 4, + "n": 1 + }, + { + "v": "Google Maps", + "i": 3, + "n": 0.707 + }, + { + "v": "Maps", + "i": 2, + "n": 1 + }, + { + "v": "Google", + "i": 1, + "n": 1 + }, + { + "v": "Nativescript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Google Maps for NativeScript", + "n": 0.5 + } + } + }, + { + "i": 1257, "$": { "0": { "v": "nativescript-GMImagePicker", @@ -72601,7 +72616,7 @@ } }, { - "i": 1259, + "i": 1258, "$": { "0": { "v": "nativescript-google-analytics", @@ -72671,7 +72686,7 @@ } }, { - "i": 1260, + "i": 1259, "$": { "0": { "v": "nativescript-google-analytics-demographics", @@ -72746,7 +72761,7 @@ } }, { - "i": 1261, + "i": 1260, "$": { "0": { "v": "nativescript-google-drive", @@ -72806,7 +72821,7 @@ } }, { - "i": 1262, + "i": 1261, "$": { "0": { "v": "nativescript-google-login", @@ -72856,7 +72871,7 @@ } }, { - "i": 1263, + "i": 1262, "$": { "0": { "v": "nativescript-google-maps-sdk", @@ -72916,7 +72931,7 @@ } }, { - "i": 1264, + "i": 1263, "$": { "0": { "v": "nativescript-google-maps-sdk-8-4-0", @@ -72966,7 +72981,7 @@ } }, { - "i": 1265, + "i": 1264, "$": { "0": { "v": "nativescript-google-maps-sdk-n7", @@ -73031,7 +73046,7 @@ } }, { - "i": 1266, + "i": 1265, "$": { "0": { "v": "nativescript-google-maps-utils", @@ -73086,7 +73101,7 @@ } }, { - "i": 1267, + "i": 1266, "$": { "0": { "v": "nativescript-google-maps-utils-fork", @@ -73161,7 +73176,7 @@ } }, { - "i": 1268, + "i": 1267, "$": { "0": { "v": "nativescript-google-maps-utils-ns5", @@ -73236,7 +73251,7 @@ } }, { - "i": 1269, + "i": 1268, "$": { "0": { "v": "nativescript-google-mobile-ads-sdk", @@ -73276,7 +73291,7 @@ } }, { - "i": 1270, + "i": 1269, "$": { "0": { "v": "nativescript-google-nearby", @@ -73326,7 +73341,7 @@ } }, { - "i": 1271, + "i": 1270, "$": { "0": { "v": "nativescript-google-place-picker", @@ -73381,7 +73396,7 @@ } }, { - "i": 1272, + "i": 1271, "$": { "0": { "v": "nativescript-google-places", @@ -73411,7 +73426,7 @@ } }, { - "i": 1273, + "i": 1272, "$": { "0": { "v": "nativescript-google-places-autocomplete", @@ -73501,7 +73516,7 @@ } }, { - "i": 1274, + "i": 1273, "$": { "0": { "v": "nativescript-google-places-autocomplete-last-version", @@ -73601,7 +73616,7 @@ } }, { - "i": 1275, + "i": 1274, "$": { "0": { "v": "nativescript-google-places-sdk", @@ -73646,7 +73661,7 @@ } }, { - "i": 1276, + "i": 1275, "$": { "0": { "v": "nativescript-google-sdk", @@ -73691,7 +73706,7 @@ } }, { - "i": 1277, + "i": 1276, "$": { "0": { "v": "nativescript-google-signin", @@ -73736,7 +73751,7 @@ } }, { - "i": 1278, + "i": 1277, "$": { "0": { "v": "nativescript-google-tagmanager", @@ -73821,7 +73836,7 @@ } }, { - "i": 1279, + "i": 1278, "$": { "0": { "v": "nativescript-googleadsdk", @@ -73866,7 +73881,7 @@ } }, { - "i": 1280, + "i": 1279, "$": { "0": { "v": "nativescript-googleplaces-autocomplete-temp", @@ -73926,7 +73941,7 @@ } }, { - "i": 1281, + "i": 1280, "$": { "0": { "v": "nativescript-gradient", @@ -73976,7 +73991,7 @@ } }, { - "i": 1282, + "i": 1281, "$": { "0": { "v": "nativescript-grid-template", @@ -74021,7 +74036,7 @@ } }, { - "i": 1283, + "i": 1282, "$": { "0": { "v": "nativescript-grid-view", @@ -74076,7 +74091,7 @@ } }, { - "i": 1284, + "i": 1283, "$": { "0": { "v": "nativescript-grid-view-new", @@ -74111,7 +74126,7 @@ } }, { - "i": 1285, + "i": 1284, "$": { "0": { "v": "nativescript-gtm", @@ -74156,7 +74171,7 @@ } }, { - "i": 1286, + "i": 1285, "$": { "0": { "v": "nativescript-handle-file", @@ -74206,7 +74221,7 @@ } }, { - "i": 1287, + "i": 1286, "$": { "0": { "v": "nativescript-handle-file-cghislai", @@ -74261,7 +74276,7 @@ } }, { - "i": 1288, + "i": 1287, "$": { "0": { "v": "nativescript-handle-file-new", @@ -74296,7 +74311,7 @@ } }, { - "i": 1289, + "i": 1288, "$": { "0": { "v": "nativescript-headset-detection", @@ -74386,7 +74401,7 @@ } }, { - "i": 1290, + "i": 1289, "$": { "0": { "v": "nativescript-health-data", @@ -74451,7 +74466,7 @@ } }, { - "i": 1291, + "i": 1290, "$": { "0": { "v": "nativescript-health-data-enduco", @@ -74521,7 +74536,7 @@ } }, { - "i": 1292, + "i": 1291, "$": { "0": { "v": "nativescript-here", @@ -74566,7 +74581,7 @@ } }, { - "i": 1293, + "i": 1292, "$": { "0": { "v": "nativescript-hex-string", @@ -74611,7 +74626,7 @@ } }, { - "i": 1294, + "i": 1293, "$": { "0": { "v": "nativescript-hexo-plugin", @@ -74651,7 +74666,7 @@ } }, { - "i": 1295, + "i": 1294, "$": { "0": { "v": "nativescript-hijri", @@ -74696,7 +74711,7 @@ } }, { - "i": 1296, + "i": 1295, "$": { "0": { "v": "nativescript-hockey-sdk", @@ -74756,7 +74771,7 @@ } }, { - "i": 1297, + "i": 1296, "$": { "0": { "v": "nativescript-hockeyapp", @@ -74806,7 +74821,7 @@ } }, { - "i": 1298, + "i": 1297, "$": { "0": { "v": "nativescript-hold-to-load", @@ -74841,7 +74856,7 @@ } }, { - "i": 1299, + "i": 1298, "$": { "0": { "v": "nativescript-homekit", @@ -74896,7 +74911,7 @@ } }, { - "i": 1300, + "i": 1299, "$": { "0": { "v": "nativescript-hook", @@ -74921,7 +74936,7 @@ } }, { - "i": 1301, + "i": 1300, "$": { "0": { "v": "nativescript-hook-debug-production", @@ -74981,7 +74996,7 @@ } }, { - "i": 1302, + "i": 1301, "$": { "0": { "v": "nativescript-hook-env-files", @@ -75016,7 +75031,7 @@ } }, { - "i": 1303, + "i": 1302, "$": { "0": { "v": "nativescript-hook-filter-modules", @@ -75076,7 +75091,7 @@ } }, { - "i": 1304, + "i": 1303, "$": { "0": { "v": "nativescript-hosted-device", @@ -75121,7 +75136,7 @@ } }, { - "i": 1305, + "i": 1304, "$": { "0": { "v": "nativescript-hosted-toast", @@ -75166,7 +75181,7 @@ } }, { - "i": 1306, + "i": 1305, "$": { "0": { "v": "nativescript-hprt", @@ -75221,7 +75236,7 @@ } }, { - "i": 1307, + "i": 1306, "$": { "0": { "v": "nativescript-html2pdf", @@ -75266,7 +75281,7 @@ } }, { - "i": 1308, + "i": 1307, "$": { "0": { "v": "nativescript-htmllabel", @@ -75311,7 +75326,7 @@ } }, { - "i": 1309, + "i": 1308, "$": { "0": { "v": "nativescript-http", @@ -75356,7 +75371,7 @@ } }, { - "i": 1310, + "i": 1309, "$": { "0": { "v": "nativescript-http-formdata", @@ -75416,7 +75431,7 @@ } }, { - "i": 1311, + "i": 1310, "$": { "0": { "v": "nativescript-http-gentle", @@ -75466,7 +75481,7 @@ } }, { - "i": 1312, + "i": 1311, "$": { "0": { "v": "nativescript-https", @@ -75556,7 +75571,7 @@ } }, { - "i": 1313, + "i": 1312, "$": { "0": { "v": "nativescript-https-thelonecabbage", @@ -75651,7 +75666,7 @@ } }, { - "i": 1314, + "i": 1313, "$": { "0": { "v": "nativescript-i18n", @@ -75686,7 +75701,7 @@ } }, { - "i": 1315, + "i": 1314, "$": { "0": { "v": "nativescript-iadvize", @@ -75731,7 +75746,7 @@ } }, { - "i": 1316, + "i": 1315, "$": { "0": { "v": "nativescript-ibeacon", @@ -75776,7 +75791,7 @@ } }, { - "i": 1317, + "i": 1316, "$": { "0": { "v": "nativescript-icam", @@ -75831,7 +75846,7 @@ } }, { - "i": 1318, + "i": 1317, "$": { "0": { "v": "nativescript-ichi-mqtt", @@ -75881,7 +75896,7 @@ } }, { - "i": 1319, + "i": 1318, "$": { "0": { "v": "nativescript-ichi-presentation", @@ -75926,7 +75941,7 @@ } }, { - "i": 1320, + "i": 1319, "$": { "0": { "v": "nativescript-ichi-printer", @@ -75986,7 +76001,7 @@ } }, { - "i": 1321, + "i": 1320, "$": { "0": { "v": "nativescript-identomat", @@ -76031,7 +76046,7 @@ } }, { - "i": 1322, + "i": 1321, "$": { "0": { "v": "nativescript-idle", @@ -76056,7 +76071,7 @@ } }, { - "i": 1323, + "i": 1322, "$": { "0": { "v": "nativescript-idtech-vp-sdk", @@ -76111,7 +76126,7 @@ } }, { - "i": 1324, + "i": 1323, "$": { "0": { "v": "nativescript-image", @@ -76156,7 +76171,7 @@ } }, { - "i": 1325, + "i": 1324, "$": { "0": { "v": "nativescript-image-black-and-white", @@ -76236,7 +76251,7 @@ } }, { - "i": 1326, + "i": 1325, "$": { "0": { "v": "nativescript-image-cache", @@ -76286,7 +76301,7 @@ } }, { - "i": 1327, + "i": 1326, "$": { "0": { "v": "nativescript-image-cache-it", @@ -76341,7 +76356,7 @@ } }, { - "i": 1328, + "i": 1327, "$": { "0": { "v": "nativescript-image-cache-media", @@ -76426,7 +76441,7 @@ } }, { - "i": 1329, + "i": 1328, "$": { "0": { "v": "nativescript-image-cache-opada", @@ -76481,7 +76496,7 @@ } }, { - "i": 1330, + "i": 1329, "$": { "0": { "v": "nativescript-image-caching", @@ -76531,7 +76546,7 @@ } }, { - "i": 1331, + "i": 1330, "$": { "0": { "v": "nativescript-image-colors", @@ -76581,7 +76596,7 @@ } }, { - "i": 1332, + "i": 1331, "$": { "0": { "v": "nativescript-image-filters", @@ -76656,7 +76671,7 @@ } }, { - "i": 1333, + "i": 1332, "$": { "0": { "v": "nativescript-image-filters-ios", @@ -76731,7 +76746,7 @@ } }, { - "i": 1334, + "i": 1333, "$": { "0": { "v": "nativescript-image-modal", @@ -76781,7 +76796,7 @@ } }, { - "i": 1335, + "i": 1334, "$": { "0": { "v": "nativescript-image-popup", @@ -76841,7 +76856,7 @@ } }, { - "i": 1336, + "i": 1335, "$": { "0": { "v": "nativescript-image-preview", @@ -76871,7 +76886,7 @@ } }, { - "i": 1337, + "i": 1336, "$": { "0": { "v": "nativescript-image-swipe", @@ -76936,7 +76951,7 @@ } }, { - "i": 1338, + "i": 1337, "$": { "0": { "v": "nativescript-image-swipe-saturn", @@ -77006,7 +77021,7 @@ } }, { - "i": 1339, + "i": 1338, "$": { "0": { "v": "nativescript-image-zoom", @@ -77056,7 +77071,7 @@ } }, { - "i": 1340, + "i": 1339, "$": { "0": { "v": "nativescript-imagecropper", @@ -77126,7 +77141,7 @@ } }, { - "i": 1341, + "i": 1340, "$": { "0": { "v": "nativescript-imagecropper-ios", @@ -77201,7 +77216,7 @@ } }, { - "i": 1342, + "i": 1341, "$": { "0": { "v": "nativescript-imagecropper-updated", @@ -77276,7 +77291,7 @@ } }, { - "i": 1343, + "i": 1342, "$": { "0": { "v": "nativescript-imageoptimize", @@ -77321,7 +77336,7 @@ } }, { - "i": 1344, + "i": 1343, "$": { "0": { "v": "nativescript-imagepicker", @@ -77366,7 +77381,7 @@ } }, { - "i": 1345, + "i": 1344, "$": { "0": { "v": "nativescript-images-generator-hook", @@ -77436,7 +77451,7 @@ } }, { - "i": 1346, + "i": 1345, "$": { "0": { "v": "nativescript-ims-native-demo", @@ -77491,7 +77506,7 @@ } }, { - "i": 1347, + "i": 1346, "$": { "0": { "v": "nativescript-in-app-notifications", @@ -77541,7 +77556,7 @@ } }, { - "i": 1348, + "i": 1347, "$": { "0": { "v": "nativescript-in-app-purchase", @@ -77596,7 +77611,7 @@ } }, { - "i": 1349, + "i": 1348, "$": { "0": { "v": "nativescript-inappbrowser", @@ -77701,7 +77716,7 @@ } }, { - "i": 1350, + "i": 1349, "$": { "0": { "v": "nativescript-input-mask", @@ -77761,7 +77776,7 @@ } }, { - "i": 1351, + "i": 1350, "$": { "0": { "v": "nativescript-input-mask-viostec", @@ -77826,40 +77841,45 @@ } }, { - "i": 1352, + "i": 1351, "$": { "0": { - "v": "nativescript-instagram-auth", + "v": "nativescript-insomnia", "n": 1 }, "1": [ { - "v": "auth", + "v": "insomnia", + "i": 7, + "n": 1 + }, + { + "v": "nativescript", "i": 6, "n": 1 }, { - "v": "instagram", + "v": "sleep", "i": 5, "n": 1 }, { - "v": "nativescript", + "v": "lock", "i": 4, "n": 1 }, { - "v": "iOS", + "v": "dim", "i": 3, "n": 1 }, { - "v": "Android", + "v": "Screen dim", "i": 2, - "n": 1 + "n": 0.707 }, { - "v": "JavaScript", + "v": "Insomnia", "i": 1, "n": 1 }, @@ -77870,43 +77890,33 @@ } ], "2": { - "v": "Your awesome NativeScript plugin.", - "n": 0.5 + "v": "Make the screen not dim (and eventually lock the device) while Insomnia is active", + "n": 0.267 } } }, { - "i": 1353, + "i": 1352, "$": { "0": { - "v": "nativescript-instagram-share", + "v": "nativescript-instagram-auth", "n": 1 }, "1": [ { - "v": "share", - "i": 8, - "n": 1 - }, - { - "v": "instagram", - "i": 7, - "n": 1 - }, - { - "v": "nativescript", + "v": "auth", "i": 6, "n": 1 }, { - "v": "Instagram", + "v": "instagram", "i": 5, "n": 1 }, { - "v": "Social Sharing", + "v": "nativescript", "i": 4, - "n": 0.707 + "n": 1 }, { "v": "iOS", @@ -77930,33 +77940,93 @@ } ], "2": { - "v": "Instagram share plugin will allow you to directly share image to instagram app.", - "n": 0.277 + "v": "Your awesome NativeScript plugin.", + "n": 0.5 } } }, { - "i": 1354, + "i": 1353, "$": { "0": { - "v": "nativescript-intercom-bridge", + "v": "nativescript-instagram-share", "n": 1 }, "1": [ { - "v": "bridge", + "v": "share", + "i": 8, + "n": 1 + }, + { + "v": "instagram", + "i": 7, + "n": 1 + }, + { + "v": "nativescript", "i": 6, "n": 1 }, { - "v": "intercom", + "v": "Instagram", "i": 5, "n": 1 }, { - "v": "nativescript", + "v": "Social Sharing", "i": 4, - "n": 1 + "n": 0.707 + }, + { + "v": "iOS", + "i": 3, + "n": 1 + }, + { + "v": "Android", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Instagram share plugin will allow you to directly share image to instagram app.", + "n": 0.277 + } + } + }, + { + "i": 1354, + "$": { + "0": { + "v": "nativescript-intercom-bridge", + "n": 1 + }, + "1": [ + { + "v": "bridge", + "i": 6, + "n": 1 + }, + { + "v": "intercom", + "i": 5, + "n": 1 + }, + { + "v": "nativescript", + "i": 4, + "n": 1 }, { "v": "iOS", @@ -83723,91 +83793,6 @@ }, { "i": 1463, - "$": { - "0": { - "v": "nativescript-microsoft-appcenter-v2", - "n": 1 - }, - "1": [ - { - "v": "v2", - "i": 13, - "n": 1 - }, - { - "v": "appcenter", - "i": 12, - "n": 1 - }, - { - "v": "microsoft", - "i": 11, - "n": 1 - }, - { - "v": "nativescript", - "i": 10, - "n": 1 - }, - { - "v": "Push", - "i": 9, - "n": 1 - }, - { - "v": "Diagnostics", - "i": 8, - "n": 1 - }, - { - "v": "CrashReport", - "i": 7, - "n": 1 - }, - { - "v": "Analytics", - "i": 6, - "n": 1 - }, - { - "v": "AppCenter", - "i": 5, - "n": 1 - }, - { - "v": "Microsoft", - "i": 4, - "n": 1 - }, - { - "v": "iOS", - "i": 3, - "n": 1 - }, - { - "v": "Android", - "i": 2, - "n": 1 - }, - { - "v": "JavaScript", - "i": 1, - "n": 1 - }, - { - "v": "NativeScript", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "Microsoft App Center plugin for NativeScript.", - "n": 0.408 - } - } - }, - { - "i": 1464, "$": { "0": { "v": "nativescript-midi", @@ -83867,7 +83852,7 @@ } }, { - "i": 1465, + "i": 1464, "$": { "0": { "v": "nativescript-mip-ble", @@ -83917,7 +83902,7 @@ } }, { - "i": 1466, + "i": 1465, "$": { "0": { "v": "nativescript-mixpanel", @@ -83967,7 +83952,7 @@ } }, { - "i": 1467, + "i": 1466, "$": { "0": { "v": "nativescript-mobilepay", @@ -84012,7 +83997,7 @@ } }, { - "i": 1468, + "i": 1467, "$": { "0": { "v": "nativescript-modal-datetimepicker", @@ -84107,7 +84092,7 @@ } }, { - "i": 1469, + "i": 1468, "$": { "0": { "v": "nativescript-modal-datetimepicker-fixed-color", @@ -84212,7 +84197,7 @@ } }, { - "i": 1470, + "i": 1469, "$": { "0": { "v": "nativescript-modal-datetimepicker-ns-7", @@ -84317,7 +84302,7 @@ } }, { - "i": 1471, + "i": 1470, "$": { "0": { "v": "nativescript-modal-datetimepicker-ssi", @@ -84417,7 +84402,7 @@ } }, { - "i": 1472, + "i": 1471, "$": { "0": { "v": "nativescript-mongo-stitch-core", @@ -84468,7 +84453,7 @@ } }, { - "i": 1473, + "i": 1472, "$": { "0": { "v": "nativescript-mongo-stitch-sdk", @@ -84519,7 +84504,7 @@ } }, { - "i": 1474, + "i": 1473, "$": { "0": { "v": "nativescript-mongo-stitch-services-mongodb-remote", @@ -84580,7 +84565,7 @@ } }, { - "i": 1475, + "i": 1474, "$": { "0": { "v": "nativescript-moon-phase", @@ -84630,7 +84615,7 @@ } }, { - "i": 1476, + "i": 1475, "$": { "0": { "v": "nativescript-mopub", @@ -84675,7 +84660,7 @@ } }, { - "i": 1477, + "i": 1476, "$": { "0": { "v": "nativescript-mpandroid-charts", @@ -84720,7 +84705,7 @@ } }, { - "i": 1478, + "i": 1477, "$": { "0": { "v": "nativescript-mpchart", @@ -84765,7 +84750,7 @@ } }, { - "i": 1479, + "i": 1478, "$": { "0": { "v": "nativescript-mpchart-fork-adrianoop", @@ -84820,7 +84805,7 @@ } }, { - "i": 1480, + "i": 1479, "$": { "0": { "v": "nativescript-mpesa", @@ -84890,7 +84875,7 @@ } }, { - "i": 1481, + "i": 1480, "$": { "0": { "v": "nativescript-mrz-reader", @@ -84940,7 +84925,7 @@ } }, { - "i": 1482, + "i": 1481, "$": { "0": { "v": "nativescript-msal", @@ -84985,7 +84970,7 @@ } }, { - "i": 1483, + "i": 1482, "$": { "0": { "v": "nativescript-msf", @@ -85015,7 +85000,7 @@ } }, { - "i": 1484, + "i": 1483, "$": { "0": { "v": "nativescript-msgraph", @@ -85075,7 +85060,7 @@ } }, { - "i": 1485, + "i": 1484, "$": { "0": { "v": "nativescript-mtmobile-sqlite", @@ -85125,7 +85110,7 @@ } }, { - "i": 1486, + "i": 1485, "$": { "0": { "v": "nativescript-multi-select", @@ -85205,7 +85190,7 @@ } }, { - "i": 1487, + "i": 1486, "$": { "0": { "v": "nativescript-multiple-environments-building", @@ -85275,7 +85260,7 @@ } }, { - "i": 1488, + "i": 1487, "$": { "0": { "v": "nativescript-multiple-screen-css", @@ -85335,7 +85320,7 @@ } }, { - "i": 1489, + "i": 1488, "$": { "0": { "v": "nativescript-mutual-auth", @@ -85385,7 +85370,7 @@ } }, { - "i": 1490, + "i": 1489, "$": { "0": { "v": "nativescript-mytoast", @@ -85410,7 +85395,7 @@ } }, { - "i": 1491, + "i": 1490, "$": { "0": { "v": "nativescript-n6-color-wheel", @@ -85465,7 +85450,7 @@ } }, { - "i": 1492, + "i": 1491, "$": { "0": { "v": "nativescript-na-camera", @@ -85510,7 +85495,7 @@ } }, { - "i": 1493, + "i": 1492, "$": { "0": { "v": "nativescript-na-keyboard", @@ -85570,7 +85555,7 @@ } }, { - "i": 1494, + "i": 1493, "$": { "0": { "v": "nativescript-na-library", @@ -85620,7 +85605,7 @@ } }, { - "i": 1495, + "i": 1494, "$": { "0": { "v": "nativescript-na-slider", @@ -85680,7 +85665,7 @@ } }, { - "i": 1496, + "i": 1495, "$": { "0": { "v": "nativescript-na-slideshow", @@ -85740,7 +85725,7 @@ } }, { - "i": 1497, + "i": 1496, "$": { "0": { "v": "nativescript-native-object-pool", @@ -85805,7 +85790,7 @@ } }, { - "i": 1498, + "i": 1497, "$": { "0": { "v": "nativescript-nativemediapicker", @@ -85850,7 +85835,7 @@ } }, { - "i": 1499, + "i": 1498, "$": { "0": { "v": "nativescript-navigation-tabbar", @@ -85900,7 +85885,7 @@ } }, { - "i": 1500, + "i": 1499, "$": { "0": { "v": "nativescript-nbmaterial-appbar", @@ -85950,7 +85935,7 @@ } }, { - "i": 1501, + "i": 1500, "$": { "0": { "v": "nativescript-nbmaterial-bottomnav", @@ -86000,7 +85985,7 @@ } }, { - "i": 1502, + "i": 1501, "$": { "0": { "v": "nativescript-nbmaterial-bottomsheet", @@ -86050,7 +86035,7 @@ } }, { - "i": 1503, + "i": 1502, "$": { "0": { "v": "nativescript-nbmaterial-buttons", @@ -86100,7 +86085,7 @@ } }, { - "i": 1504, + "i": 1503, "$": { "0": { "v": "nativescript-nbmaterial-calendar", @@ -86150,7 +86135,7 @@ } }, { - "i": 1505, + "i": 1504, "$": { "0": { "v": "nativescript-nbmaterial-commons", @@ -86200,7 +86185,7 @@ } }, { - "i": 1506, + "i": 1505, "$": { "0": { "v": "nativescript-nbmaterial-coordinator", @@ -86250,7 +86235,7 @@ } }, { - "i": 1507, + "i": 1506, "$": { "0": { "v": "nativescript-nbmaterial-elevation", @@ -86300,7 +86285,7 @@ } }, { - "i": 1508, + "i": 1507, "$": { "0": { "v": "nativescript-nbmaterial-layouts", @@ -86350,7 +86335,7 @@ } }, { - "i": 1509, + "i": 1508, "$": { "0": { "v": "nativescript-nbmaterial-pullrefresh", @@ -86400,7 +86385,7 @@ } }, { - "i": 1510, + "i": 1509, "$": { "0": { "v": "nativescript-nbmaterial-recycler", @@ -86450,7 +86435,7 @@ } }, { - "i": 1511, + "i": 1510, "$": { "0": { "v": "nativescript-nbmaterial-ripple", @@ -86500,7 +86485,7 @@ } }, { - "i": 1512, + "i": 1511, "$": { "0": { "v": "nativescript-nbmaterial-search", @@ -86550,7 +86535,7 @@ } }, { - "i": 1513, + "i": 1512, "$": { "0": { "v": "nativescript-nbmaterial-tabs", @@ -86600,7 +86585,7 @@ } }, { - "i": 1514, + "i": 1513, "$": { "0": { "v": "nativescript-nbmaterial-textinput", @@ -86650,7 +86635,7 @@ } }, { - "i": 1515, + "i": 1514, "$": { "0": { "v": "nativescript-nested-scrollview", @@ -86700,7 +86685,7 @@ } }, { - "i": 1516, + "i": 1515, "$": { "0": { "v": "nativescript-nfc", @@ -86755,7 +86740,7 @@ } }, { - "i": 1517, + "i": 1516, "$": { "0": { "v": "nativescript-nfc-card-reader", @@ -86810,7 +86795,7 @@ } }, { - "i": 1518, + "i": 1517, "$": { "0": { "v": "nativescript-nfc-fix", @@ -86870,7 +86855,7 @@ } }, { - "i": 1519, + "i": 1518, "$": { "0": { "v": "nativescript-nfc-fix-uid", @@ -86935,7 +86920,7 @@ } }, { - "i": 1520, + "i": 1519, "$": { "0": { "v": "nativescript-nfc-uid", @@ -86990,7 +86975,7 @@ } }, { - "i": 1521, + "i": 1520, "$": { "0": { "v": "nativescript-ng-bottomsheet", @@ -87045,7 +87030,7 @@ } }, { - "i": 1522, + "i": 1521, "$": { "0": { "v": "nativescript-ng-gradient", @@ -87115,7 +87100,7 @@ } }, { - "i": 1523, + "i": 1522, "$": { "0": { "v": "nativescript-ng-shadow", @@ -87200,7 +87185,7 @@ } }, { - "i": 1524, + "i": 1523, "$": { "0": { "v": "nativescript-ng2-carousel", @@ -87295,7 +87280,7 @@ } }, { - "i": 1525, + "i": 1524, "$": { "0": { "v": "nativescript-ng2-carousel-swipeable", @@ -87395,7 +87380,7 @@ } }, { - "i": 1526, + "i": 1525, "$": { "0": { "v": "nativescript-ng2-cli-magic", @@ -87430,7 +87415,7 @@ } }, { - "i": 1527, + "i": 1526, "$": { "0": { "v": "nativescript-ng2-fonticon", @@ -87490,7 +87475,7 @@ } }, { - "i": 1528, + "i": 1527, "$": { "0": { "v": "nativescript-ng2-magic", @@ -87520,7 +87505,7 @@ } }, { - "i": 1529, + "i": 1528, "$": { "0": { "v": "nativescript-ng2-meteor", @@ -87590,7 +87575,7 @@ } }, { - "i": 1530, + "i": 1529, "$": { "0": { "v": "nativescript-ng2-parallax", @@ -87635,7 +87620,7 @@ } }, { - "i": 1531, + "i": 1530, "$": { "0": { "v": "nativescript-ng2-plugin-seed", @@ -87685,7 +87670,7 @@ } }, { - "i": 1532, + "i": 1531, "$": { "0": { "v": "nativescript-ng2-vlc-player", @@ -87745,7 +87730,7 @@ } }, { - "i": 1533, + "i": 1532, "$": { "0": { "v": "nativescript-ngkeyboardtracker", @@ -87780,7 +87765,7 @@ } }, { - "i": 1534, + "i": 1533, "$": { "0": { "v": "nativescript-ngx-accordion", @@ -87810,7 +87795,7 @@ } }, { - "i": 1535, + "i": 1534, "$": { "0": { "v": "nativescript-ngx-date-range", @@ -87880,7 +87865,7 @@ } }, { - "i": 1536, + "i": 1535, "$": { "0": { "v": "nativescript-ngx-debounce-tap", @@ -87935,7 +87920,7 @@ } }, { - "i": 1537, + "i": 1536, "$": { "0": { "v": "nativescript-ngx-fusion-icon", @@ -87970,7 +87955,7 @@ } }, { - "i": 1538, + "i": 1537, "$": { "0": { "v": "nativescript-ngx-fusion-library", @@ -88005,7 +87990,7 @@ } }, { - "i": 1539, + "i": 1538, "$": { "0": { "v": "nativescript-ngx-ilist", @@ -88060,7 +88045,7 @@ } }, { - "i": 1540, + "i": 1539, "$": { "0": { "v": "nativescript-ngx-iphonex-safe-area", @@ -88120,7 +88105,7 @@ } }, { - "i": 1541, + "i": 1540, "$": { "0": { "v": "nativescript-ngx-mason", @@ -88150,7 +88135,7 @@ } }, { - "i": 1542, + "i": 1541, "$": { "0": { "v": "nativescript-ngx-partials", @@ -88180,7 +88165,7 @@ } }, { - "i": 1543, + "i": 1542, "$": { "0": { "v": "nativescript-ngx-shadow", @@ -88210,7 +88195,7 @@ } }, { - "i": 1544, + "i": 1543, "$": { "0": { "v": "nativescript-ngx-slides", @@ -88240,7 +88225,7 @@ } }, { - "i": 1545, + "i": 1544, "$": { "0": { "v": "nativescript-ngx-tabview", @@ -88270,7 +88255,7 @@ } }, { - "i": 1546, + "i": 1545, "$": { "0": { "v": "nativescript-ngxplayer", @@ -88315,7 +88300,7 @@ } }, { - "i": 1547, + "i": 1546, "$": { "0": { "v": "nativescript-nodemedia", @@ -88360,7 +88345,7 @@ } }, { - "i": 1548, + "i": 1547, "$": { "0": { "v": "nativescript-noice-image-picker", @@ -88415,7 +88400,7 @@ } }, { - "i": 1549, + "i": 1548, "$": { "0": { "v": "nativescript-nointeract-sms", @@ -88465,7 +88450,7 @@ } }, { - "i": 1550, + "i": 1549, "$": { "0": { "v": "nativescript-notification", @@ -88505,7 +88490,7 @@ } }, { - "i": 1551, + "i": 1550, "$": { "0": { "v": "nativescript-notification-banner", @@ -88545,7 +88530,7 @@ } }, { - "i": 1552, + "i": 1551, "$": { "0": { "v": "nativescript-ns-apple-signin", @@ -88600,7 +88585,7 @@ } }, { - "i": 1553, + "i": 1552, "$": { "0": { "v": "nativescript-nsjumioplugin", @@ -88645,7 +88630,7 @@ } }, { - "i": 1554, + "i": 1553, "$": { "0": { "v": "nativescript-nsoauth", @@ -88690,7 +88675,7 @@ } }, { - "i": 1555, + "i": 1554, "$": { "0": { "v": "nativescript-number-progressbar", @@ -88765,7 +88750,7 @@ } }, { - "i": 1556, + "i": 1555, "$": { "0": { "v": "nativescript-numberpicker", @@ -88820,7 +88805,7 @@ } }, { - "i": 1557, + "i": 1556, "$": { "0": { "v": "nativescript-numeric-keyboard", @@ -88880,7 +88865,7 @@ } }, { - "i": 1558, + "i": 1557, "$": { "0": { "v": "nativescript-oauth2", @@ -88950,7 +88935,7 @@ } }, { - "i": 1559, + "i": 1558, "$": { "0": { "v": "nativescript-oauth2-forked", @@ -89025,7 +89010,7 @@ } }, { - "i": 1560, + "i": 1559, "$": { "0": { "v": "nativescript-observable", @@ -89070,7 +89055,7 @@ } }, { - "i": 1561, + "i": 1560, "$": { "0": { "v": "nativescript-observable-subscribe", @@ -89105,7 +89090,7 @@ } }, { - "i": 1562, + "i": 1561, "$": { "0": { "v": "nativescript-ocr", @@ -89150,7 +89135,7 @@ } }, { - "i": 1563, + "i": 1562, "$": { "0": { "v": "nativescript-odoo", @@ -89195,7 +89180,7 @@ } }, { - "i": 1564, + "i": 1563, "$": { "0": { "v": "nativescript-office365", @@ -89245,7 +89230,7 @@ } }, { - "i": 1565, + "i": 1564, "$": { "0": { "v": "nativescript-ogg-vorbis", @@ -89295,7 +89280,7 @@ } }, { - "i": 1566, + "i": 1565, "$": { "0": { "v": "nativescript-okhttp", @@ -89325,7 +89310,7 @@ } }, { - "i": 1567, + "i": 1566, "$": { "0": { "v": "nativescript-onegini", @@ -89395,7 +89380,7 @@ } }, { - "i": 1568, + "i": 1567, "$": { "0": { "v": "nativescript-onesignal", @@ -89445,7 +89430,7 @@ } }, { - "i": 1569, + "i": 1568, "$": { "0": { "v": "nativescript-onesignal-cp", @@ -89500,7 +89485,7 @@ } }, { - "i": 1570, + "i": 1569, "$": { "0": { "v": "nativescript-onesignal-fixed", @@ -89555,7 +89540,7 @@ } }, { - "i": 1571, + "i": 1570, "$": { "0": { "v": "nativescript-onesignal-fixxx", @@ -89610,7 +89595,7 @@ } }, { - "i": 1572, + "i": 1571, "$": { "0": { "v": "nativescript-onesignal-sdk", @@ -89660,7 +89645,7 @@ } }, { - "i": 1573, + "i": 1572, "$": { "0": { "v": "nativescript-onfido", @@ -89705,7 +89690,7 @@ } }, { - "i": 1574, + "i": 1573, "$": { "0": { "v": "nativescript-onyxbeacon", @@ -89730,7 +89715,7 @@ } }, { - "i": 1575, + "i": 1574, "$": { "0": { "v": "nativescript-open-app", @@ -89795,7 +89780,7 @@ } }, { - "i": 1576, + "i": 1575, "$": { "0": { "v": "nativescript-open-inbox", @@ -89860,7 +89845,7 @@ } }, { - "i": 1577, + "i": 1576, "$": { "0": { "v": "nativescript-open-pay", @@ -89910,7 +89895,7 @@ } }, { - "i": 1578, + "i": 1577, "$": { "0": { "v": "nativescript-open-youtube", @@ -89970,7 +89955,7 @@ } }, { - "i": 1579, + "i": 1578, "$": { "0": { "v": "nativescript-opencv", @@ -90015,7 +90000,7 @@ } }, { - "i": 1580, + "i": 1579, "$": { "0": { "v": "nativescript-openfile", @@ -90060,7 +90045,7 @@ } }, { - "i": 1581, + "i": 1580, "$": { "0": { "v": "nativescript-openid", @@ -90125,7 +90110,7 @@ } }, { - "i": 1582, + "i": 1581, "$": { "0": { "v": "nativescript-opentok", @@ -90185,7 +90170,7 @@ } }, { - "i": 1583, + "i": 1582, "$": { "0": { "v": "nativescript-opentok-arth", @@ -90250,7 +90235,7 @@ } }, { - "i": 1584, + "i": 1583, "$": { "0": { "v": "nativescript-opentok-arthtech", @@ -90315,7 +90300,7 @@ } }, { - "i": 1585, + "i": 1584, "$": { "0": { "v": "nativescript-opentok-plugin", @@ -90365,7 +90350,7 @@ } }, { - "i": 1586, + "i": 1585, "$": { "0": { "v": "nativescript-orientation-free", @@ -90420,7 +90405,7 @@ } }, { - "i": 1587, + "i": 1586, "$": { "0": { "v": "nativescript-orientation-ssi", @@ -90475,7 +90460,7 @@ } }, { - "i": 1588, + "i": 1587, "$": { "0": { "v": "nativescript-oss-licenses", @@ -90525,7 +90510,7 @@ } }, { - "i": 1589, + "i": 1588, "$": { "0": { "v": "nativescript-pager", @@ -90620,7 +90605,7 @@ } }, { - "i": 1590, + "i": 1589, "$": { "0": { "v": "nativescript-pager-enduco", @@ -90720,7 +90705,7 @@ } }, { - "i": 1591, + "i": 1590, "$": { "0": { "v": "nativescript-pager-without-page-indicators", @@ -90830,7 +90815,7 @@ } }, { - "i": 1592, + "i": 1591, "$": { "0": { "v": "nativescript-paint", @@ -90875,7 +90860,7 @@ } }, { - "i": 1593, + "i": 1592, "$": { "0": { "v": "nativescript-panorama-imageview", @@ -90955,7 +90940,7 @@ } }, { - "i": 1594, + "i": 1593, "$": { "0": { "v": "nativescript-parallax", @@ -91005,7 +90990,7 @@ } }, { - "i": 1595, + "i": 1594, "$": { "0": { "v": "nativescript-parley", @@ -91045,7 +91030,7 @@ } }, { - "i": 1596, + "i": 1595, "$": { "0": { "v": "nativescript-particle", @@ -91130,7 +91115,7 @@ } }, { - "i": 1597, + "i": 1596, "$": { "0": { "v": "nativescript-particle-emitter", @@ -91180,7 +91165,7 @@ } }, { - "i": 1598, + "i": 1597, "$": { "0": { "v": "nativescript-passportscanner", @@ -91210,7 +91195,7 @@ } }, { - "i": 1599, + "i": 1598, "$": { "0": { "v": "nativescript-passportscanner-custom", @@ -91250,7 +91235,7 @@ } }, { - "i": 1600, + "i": 1599, "$": { "0": { "v": "nativescript-paycards-recognizer", @@ -91300,7 +91285,7 @@ } }, { - "i": 1601, + "i": 1600, "$": { "0": { "v": "nativescript-payments", @@ -91380,7 +91365,7 @@ } }, { - "i": 1602, + "i": 1601, "$": { "0": { "v": "nativescript-paypal", @@ -91420,7 +91405,7 @@ } }, { - "i": 1603, + "i": 1602, "$": { "0": { "v": "nativescript-paypal-checkout", @@ -91465,7 +91450,7 @@ } }, { - "i": 1604, + "i": 1603, "$": { "0": { "v": "nativescript-paypal2", @@ -91505,7 +91490,7 @@ } }, { - "i": 1605, + "i": 1604, "$": { "0": { "v": "nativescript-paystack", @@ -91575,7 +91560,7 @@ } }, { - "i": 1606, + "i": 1605, "$": { "0": { "v": "nativescript-paythunder", @@ -91600,7 +91585,7 @@ } }, { - "i": 1607, + "i": 1606, "$": { "0": { "v": "nativescript-payworks", @@ -91645,7 +91630,7 @@ } }, { - "i": 1608, + "i": 1607, "$": { "0": { "v": "nativescript-pbkdf2", @@ -91700,7 +91685,7 @@ } }, { - "i": 1609, + "i": 1608, "$": { "0": { "v": "nativescript-pcl-ingenico", @@ -91765,7 +91750,7 @@ } }, { - "i": 1610, + "i": 1609, "$": { "0": { "v": "nativescript-pdf-view", @@ -91820,7 +91805,7 @@ } }, { - "i": 1611, + "i": 1610, "$": { "0": { "v": "nativescript-pdf-view-bundling-enabled", @@ -91890,7 +91875,7 @@ } }, { - "i": 1612, + "i": 1611, "$": { "0": { "v": "nativescript-pdf-view-private", @@ -91955,7 +91940,7 @@ } }, { - "i": 1613, + "i": 1612, "$": { "0": { "v": "nativescript-pdf-viewer", @@ -92020,7 +92005,7 @@ } }, { - "i": 1614, + "i": 1613, "$": { "0": { "v": "nativescript-pdfbox", @@ -92095,7 +92080,7 @@ } }, { - "i": 1615, + "i": 1614, "$": { "0": { "v": "nativescript-pdfview-ng", @@ -92155,7 +92140,7 @@ } }, { - "i": 1616, + "i": 1615, "$": { "0": { "v": "nativescript-pedometer", @@ -92230,7 +92215,7 @@ } }, { - "i": 1617, + "i": 1616, "$": { "0": { "v": "nativescript-peek-update", @@ -92285,7 +92270,7 @@ } }, { - "i": 1618, + "i": 1617, "$": { "0": { "v": "nativescript-performance-monitor", @@ -92350,7 +92335,7 @@ } }, { - "i": 1619, + "i": 1618, "$": { "0": { "v": "nativescript-periscopehearts", @@ -92410,7 +92395,7 @@ } }, { - "i": 1620, + "i": 1619, "$": { "0": { "v": "nativescript-perms", @@ -92454,6 +92439,111 @@ } } }, + { + "i": 1620, + "$": { + "0": { + "v": "nativescript-phaser", + "n": 1 + }, + "1": [ + { + "v": "phaser", + "i": 17, + "n": 1 + }, + { + "v": "nativescript", + "i": 16, + "n": 1 + }, + { + "v": "flash", + "i": 15, + "n": 1 + }, + { + "v": "sprite", + "i": 14, + "n": 1 + }, + { + "v": "pixi.js", + "i": 13, + "n": 1 + }, + { + "v": "pixi", + "i": 12, + "n": 1 + }, + { + "v": "2d", + "i": 11, + "n": 1 + }, + { + "v": "opengl", + "i": 10, + "n": 1 + }, + { + "v": "graphics", + "i": 9, + "n": 1 + }, + { + "v": "gl", + "i": 8, + "n": 1 + }, + { + "v": "game", + "i": 7, + "n": 1 + }, + { + "v": "phaser", + "i": 6, + "n": 1 + }, + { + "v": "phaser-ce", + "i": 5, + "n": 1 + }, + { + "v": "native", + "i": 4, + "n": 1 + }, + { + "v": "iOS", + "i": 3, + "n": 1 + }, + { + "v": "Android", + "i": 2, + "n": 1 + }, + { + "v": "JavaScript", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "Build awesome 2D games with Phaser.js and NativeScript", + "n": 0.354 + } + } + }, { "i": 1621, "$": { @@ -95896,6 +95986,71 @@ }, { "i": 1676, + "$": { + "0": { + "v": "nativescript-purchase", + "n": 1 + }, + "1": [ + { + "v": "purchase", + "i": 9, + "n": 1 + }, + { + "v": "nativescript", + "i": 8, + "n": 1 + }, + { + "v": "tangra", + "i": 7, + "n": 1 + }, + { + "v": "subscription", + "i": 6, + "n": 1 + }, + { + "v": "payment", + "i": 5, + "n": 1 + }, + { + "v": "vending", + "i": 4, + "n": 1 + }, + { + "v": "in-app billing", + "i": 3, + "n": 0.707 + }, + { + "v": "in-app purchase", + "i": 2, + "n": 0.707 + }, + { + "v": "iap", + "i": 1, + "n": 1 + }, + { + "v": "NativeScript", + "i": 0, + "n": 1 + } + ], + "2": { + "v": "A NativeScript plugin for making in-app purchases", + "n": 0.378 + } + } + }, + { + "i": 1677, "$": { "0": { "v": "nativescript-push", @@ -95940,7 +96095,7 @@ } }, { - "i": 1677, + "i": 1678, "$": { "0": { "v": "nativescript-pusher", @@ -95985,7 +96140,7 @@ } }, { - "i": 1678, + "i": 1679, "$": { "0": { "v": "nativescript-pusher-ns", @@ -96035,7 +96190,7 @@ } }, { - "i": 1679, + "i": 1680, "$": { "0": { "v": "nativescript-pushwoosh", @@ -96080,7 +96235,7 @@ } }, { - "i": 1680, + "i": 1681, "$": { "0": { "v": "nativescript-pushy", @@ -96145,7 +96300,7 @@ } }, { - "i": 1681, + "i": 1682, "$": { "0": { "v": "nativescript-qr-generator", @@ -96200,7 +96355,7 @@ } }, { - "i": 1682, + "i": 1683, "$": { "0": { "v": "nativescript-quickblox", @@ -96285,7 +96440,7 @@ } }, { - "i": 1683, + "i": 1684, "$": { "0": { "v": "nativescript-rad-imagepicker-with-loc", @@ -96355,7 +96510,7 @@ } }, { - "i": 1684, + "i": 1685, "$": { "0": { "v": "nativescript-radar-io", @@ -96405,7 +96560,7 @@ } }, { - "i": 1685, + "i": 1686, "$": { "0": { "v": "nativescript-radial-gradient", @@ -96465,7 +96620,7 @@ } }, { - "i": 1686, + "i": 1687, "$": { "0": { "v": "nativescript-radio", @@ -96520,7 +96675,7 @@ } }, { - "i": 1687, + "i": 1688, "$": { "0": { "v": "nativescript-radiobutton", @@ -96545,7 +96700,7 @@ } }, { - "i": 1688, + "i": 1689, "$": { "0": { "v": "nativescript-randombytes", @@ -96600,7 +96755,7 @@ } }, { - "i": 1689, + "i": 1690, "$": { "0": { "v": "nativescript-range-seek-bar", @@ -96655,7 +96810,7 @@ } }, { - "i": 1690, + "i": 1691, "$": { "0": { "v": "nativescript-rater", @@ -96730,7 +96885,7 @@ } }, { - "i": 1691, + "i": 1692, "$": { "0": { "v": "nativescript-rating-dialog", @@ -96810,7 +96965,7 @@ } }, { - "i": 1692, + "i": 1693, "$": { "0": { "v": "nativescript-ratings", @@ -96865,7 +97020,7 @@ } }, { - "i": 1693, + "i": 1694, "$": { "0": { "v": "nativescript-rave", @@ -96910,7 +97065,7 @@ } }, { - "i": 1694, + "i": 1695, "$": { "0": { "v": "nativescript-ravepay-simple", @@ -96980,7 +97135,7 @@ } }, { - "i": 1695, + "i": 1696, "$": { "0": { "v": "nativescript-raygun", @@ -97005,7 +97160,7 @@ } }, { - "i": 1696, + "i": 1697, "$": { "0": { "v": "nativescript-razorpay", @@ -97055,7 +97210,7 @@ } }, { - "i": 1697, + "i": 1698, "$": { "0": { "v": "nativescript-react", @@ -97080,7 +97235,7 @@ } }, { - "i": 1698, + "i": 1699, "$": { "0": { "v": "nativescript-remote-builds", @@ -97155,7 +97310,7 @@ } }, { - "i": 1699, + "i": 1700, "$": { "0": { "v": "nativescript-revenuecat", @@ -97200,7 +97355,7 @@ } }, { - "i": 1700, + "i": 1701, "$": { "0": { "v": "nativescript-reviews", @@ -97265,7 +97420,7 @@ } }, { - "i": 1701, + "i": 1702, "$": { "0": { "v": "nativescript-rfid", @@ -97300,7 +97455,7 @@ } }, { - "i": 1702, + "i": 1703, "$": { "0": { "v": "nativescript-rfid-android", @@ -97330,7 +97485,7 @@ } }, { - "i": 1703, + "i": 1704, "$": { "0": { "v": "nativescript-rich-textfield", @@ -97380,7 +97535,7 @@ } }, { - "i": 1704, + "i": 1705, "$": { "0": { "v": "nativescript-ripple", @@ -97430,7 +97585,7 @@ } }, { - "i": 1705, + "i": 1706, "$": { "0": { "v": "nativescript-ripple2", @@ -97485,7 +97640,7 @@ } }, { - "i": 1706, + "i": 1707, "$": { "0": { "v": "nativescript-root-detection", @@ -97535,7 +97690,7 @@ } }, { - "i": 1707, + "i": 1708, "$": { "0": { "v": "nativescript-rootbeer", @@ -97570,7 +97725,7 @@ } }, { - "i": 1708, + "i": 1709, "$": { "0": { "v": "nativescript-rotate-3d", @@ -97635,7 +97790,7 @@ } }, { - "i": 1709, + "i": 1710, "$": { "0": { "v": "nativescript-routed-values", @@ -97690,7 +97845,7 @@ } }, { - "i": 1710, + "i": 1711, "$": { "0": { "v": "nativescript-router", @@ -97735,7 +97890,7 @@ } }, { - "i": 1711, + "i": 1712, "$": { "0": { "v": "nativescript-rsa", @@ -97780,7 +97935,7 @@ } }, { - "i": 1712, + "i": 1713, "$": { "0": { "v": "nativescript-safetynet-helper", @@ -97830,7 +97985,7 @@ } }, { - "i": 1713, + "i": 1714, "$": { "0": { "v": "nativescript-sak-components", @@ -97880,7 +98035,7 @@ } }, { - "i": 1714, + "i": 1715, "$": { "0": { "v": "nativescript-sak-fit-text", @@ -97935,7 +98090,7 @@ } }, { - "i": 1715, + "i": 1716, "$": { "0": { "v": "nativescript-salesforce-sdk", @@ -97985,7 +98140,7 @@ } }, { - "i": 1716, + "i": 1717, "$": { "0": { "v": "nativescript-sample", @@ -98115,7 +98270,7 @@ } }, { - "i": 1717, + "i": 1718, "$": { "0": { "v": "nativescript-sample-demo", @@ -98165,7 +98320,7 @@ } }, { - "i": 1718, + "i": 1719, "$": { "0": { "v": "nativescript-sass", @@ -98190,7 +98345,7 @@ } }, { - "i": 1719, + "i": 1720, "$": { "0": { "v": "nativescript-sazmand-version", @@ -98240,7 +98395,7 @@ } }, { - "i": 1720, + "i": 1721, "$": { "0": { "v": "nativescript-scratchview", @@ -98295,7 +98450,7 @@ } }, { - "i": 1721, + "i": 1722, "$": { "0": { "v": "nativescript-screen-orientation", @@ -98345,7 +98500,7 @@ } }, { - "i": 1722, + "i": 1723, "$": { "0": { "v": "nativescript-screenshot", @@ -98385,7 +98540,7 @@ } }, { - "i": 1723, + "i": 1724, "$": { "0": { "v": "nativescript-sdk-utility", @@ -98435,7 +98590,7 @@ } }, { - "i": 1724, + "i": 1725, "$": { "0": { "v": "nativescript-search-view", @@ -98485,7 +98640,7 @@ } }, { - "i": 1725, + "i": 1726, "$": { "0": { "v": "nativescript-sectioned-list-view", @@ -98545,7 +98700,7 @@ } }, { - "i": 1726, + "i": 1727, "$": { "0": { "v": "nativescript-secure-android-keystore", @@ -98600,7 +98755,7 @@ } }, { - "i": 1727, + "i": 1728, "$": { "0": { "v": "nativescript-secure-storage", @@ -98675,7 +98830,7 @@ } }, { - "i": 1728, + "i": 1729, "$": { "0": { "v": "nativescript-security", @@ -98725,7 +98880,7 @@ } }, { - "i": 1729, + "i": 1730, "$": { "0": { "v": "nativescript-segment", @@ -98770,7 +98925,7 @@ } }, { - "i": 1730, + "i": 1731, "$": { "0": { "v": "nativescript-segment-view", @@ -98825,7 +98980,7 @@ } }, { - "i": 1731, + "i": 1732, "$": { "0": { "v": "nativescript-sensors", @@ -98865,7 +99020,7 @@ } }, { - "i": 1732, + "i": 1733, "$": { "0": { "v": "nativescript-sentry", @@ -98915,7 +99070,7 @@ } }, { - "i": 1733, + "i": 1734, "$": { "0": { "v": "nativescript-sentry-temp", @@ -98970,7 +99125,7 @@ } }, { - "i": 1734, + "i": 1735, "$": { "0": { "v": "nativescript-sentry.io", @@ -99040,7 +99195,7 @@ } }, { - "i": 1735, + "i": 1736, "$": { "0": { "v": "nativescript-set-version", @@ -99070,7 +99225,7 @@ } }, { - "i": 1736, + "i": 1737, "$": { "0": { "v": "nativescript-sewoo-printer", @@ -99120,7 +99275,7 @@ } }, { - "i": 1737, + "i": 1738, "$": { "0": { "v": "nativescript-sexy-button", @@ -99170,7 +99325,7 @@ } }, { - "i": 1738, + "i": 1739, "$": { "0": { "v": "nativescript-shadowed-label", @@ -99235,7 +99390,7 @@ } }, { - "i": 1739, + "i": 1740, "$": { "0": { "v": "nativescript-share-file", @@ -99295,7 +99450,7 @@ } }, { - "i": 1740, + "i": 1741, "$": { "0": { "v": "nativescript-share-file-enduco", @@ -99360,7 +99515,7 @@ } }, { - "i": 1741, + "i": 1742, "$": { "0": { "v": "nativescript-share-file-knotes", @@ -99425,7 +99580,7 @@ } }, { - "i": 1742, + "i": 1743, "$": { "0": { "v": "nativescript-shared-notification-delegate", @@ -99480,7 +99635,7 @@ } }, { - "i": 1743, + "i": 1744, "$": { "0": { "v": "nativescript-shatterview", @@ -99530,7 +99685,7 @@ } }, { - "i": 1744, + "i": 1745, "$": { "0": { "v": "nativescript-shimmer", @@ -99590,7 +99745,7 @@ } }, { - "i": 1745, + "i": 1746, "$": { "0": { "v": "nativescript-shimmer-enduco", @@ -99655,7 +99810,7 @@ } }, { - "i": 1746, + "i": 1747, "$": { "0": { "v": "nativescript-shine-button", @@ -99705,7 +99860,7 @@ } }, { - "i": 1747, + "i": 1748, "$": { "0": { "v": "nativescript-sidedrawer", @@ -99795,7 +99950,7 @@ } }, { - "i": 1748, + "i": 1749, "$": { "0": { "v": "nativescript-signalr-core", @@ -99865,7 +100020,7 @@ } }, { - "i": 1749, + "i": 1750, "$": { "0": { "v": "nativescript-signaturepad", @@ -99930,7 +100085,7 @@ } }, { - "i": 1750, + "i": 1751, "$": { "0": { "v": "nativescript-signingpad", @@ -99985,7 +100140,7 @@ } }, { - "i": 1751, + "i": 1752, "$": { "0": { "v": "nativescript-sim-info", @@ -100155,7 +100310,7 @@ } }, { - "i": 1752, + "i": 1753, "$": { "0": { "v": "nativescript-simple-filepicker", @@ -100205,7 +100360,7 @@ } }, { - "i": 1753, + "i": 1754, "$": { "0": { "v": "nativescript-simple-fileshare", @@ -100255,7 +100410,7 @@ } }, { - "i": 1754, + "i": 1755, "$": { "0": { "v": "nativescript-simple-libsodium", @@ -100310,7 +100465,7 @@ } }, { - "i": 1755, + "i": 1756, "$": { "0": { "v": "nativescript-simple-networking", @@ -100370,7 +100525,7 @@ } }, { - "i": 1756, + "i": 1757, "$": { "0": { "v": "nativescript-simple-permissions", @@ -100420,7 +100575,7 @@ } }, { - "i": 1757, + "i": 1758, "$": { "0": { "v": "nativescript-simple-webview", @@ -100470,7 +100625,7 @@ } }, { - "i": 1758, + "i": 1759, "$": { "0": { "v": "nativescript-simplecam", @@ -100491,7 +100646,7 @@ } }, { - "i": 1759, + "i": 1760, "$": { "0": { "v": "nativescript-sinch", @@ -100531,7 +100686,7 @@ } }, { - "i": 1760, + "i": 1761, "$": { "0": { "v": "nativescript-skygear-sdk", @@ -100581,7 +100736,7 @@ } }, { - "i": 1761, + "i": 1762, "$": { "0": { "v": "nativescript-slider", @@ -100631,7 +100786,7 @@ } }, { - "i": 1762, + "i": 1763, "$": { "0": { "v": "nativescript-slider-test", @@ -100686,7 +100841,7 @@ } }, { - "i": 1763, + "i": 1764, "$": { "0": { "v": "nativescript-slides", @@ -100751,7 +100906,7 @@ } }, { - "i": 1764, + "i": 1765, "$": { "0": { "v": "nativescript-slides-d4w", @@ -100821,7 +100976,7 @@ } }, { - "i": 1765, + "i": 1766, "$": { "0": { "v": "nativescript-slideshow-busy-indicator", @@ -100886,7 +101041,7 @@ } }, { - "i": 1766, + "i": 1767, "$": { "0": { "v": "nativescript-sms-inbox", @@ -100946,7 +101101,7 @@ } }, { - "i": 1767, + "i": 1768, "$": { "0": { "v": "nativescript-sms-receiver", @@ -100996,7 +101151,7 @@ } }, { - "i": 1768, + "i": 1769, "$": { "0": { "v": "nativescript-sms-receiver-spms", @@ -101051,7 +101206,7 @@ } }, { - "i": 1769, + "i": 1770, "$": { "0": { "v": "nativescript-snapkit", @@ -101096,7 +101251,7 @@ } }, { - "i": 1770, + "i": 1771, "$": { "0": { "v": "nativescript-social-login", @@ -101161,7 +101316,7 @@ } }, { - "i": 1771, + "i": 1772, "$": { "0": { "v": "nativescript-social-login-linkedin", @@ -101231,7 +101386,7 @@ } }, { - "i": 1772, + "i": 1773, "$": { "0": { "v": "nativescript-social-login-v2", @@ -101301,7 +101456,7 @@ } }, { - "i": 1773, + "i": 1774, "$": { "0": { "v": "nativescript-social-share", @@ -101351,7 +101506,7 @@ } }, { - "i": 1774, + "i": 1775, "$": { "0": { "v": "nativescript-social-share-knotes", @@ -101406,7 +101561,7 @@ } }, { - "i": 1775, + "i": 1776, "$": { "0": { "v": "nativescript-social-share-ns-7", @@ -101466,7 +101621,7 @@ } }, { - "i": 1776, + "i": 1777, "$": { "0": { "v": "nativescript-social-share-v2", @@ -101556,7 +101711,7 @@ } }, { - "i": 1777, + "i": 1778, "$": { "0": { "v": "nativescript-socket.io", @@ -101631,7 +101786,7 @@ } }, { - "i": 1778, + "i": 1779, "$": { "0": { "v": "nativescript-socketio", @@ -101741,7 +101896,7 @@ } }, { - "i": 1779, + "i": 1780, "$": { "0": { "v": "nativescript-socketio-ns", @@ -101821,7 +101976,7 @@ } }, { - "i": 1780, + "i": 1781, "$": { "0": { "v": "nativescript-soft-keyboard", @@ -101886,7 +102041,7 @@ } }, { - "i": 1781, + "i": 1782, "$": { "0": { "v": "nativescript-sonos", @@ -101936,7 +102091,7 @@ } }, { - "i": 1782, + "i": 1783, "$": { "0": { "v": "nativescript-sound", @@ -101976,7 +102131,7 @@ } }, { - "i": 1783, + "i": 1784, "$": { "0": { "v": "nativescript-sound-kak", @@ -102021,7 +102176,7 @@ } }, { - "i": 1784, + "i": 1785, "$": { "0": { "v": "nativescript-speech-recognition", @@ -102091,7 +102246,7 @@ } }, { - "i": 1785, + "i": 1786, "$": { "0": { "v": "nativescript-splashscreen", @@ -102141,7 +102296,7 @@ } }, { - "i": 1786, + "i": 1787, "$": { "0": { "v": "nativescript-spotify", @@ -102201,7 +102356,7 @@ } }, { - "i": 1787, + "i": 1788, "$": { "0": { "v": "nativescript-spotify-auth", @@ -102231,7 +102386,7 @@ } }, { - "i": 1788, + "i": 1789, "$": { "0": { "v": "nativescript-sqlcipher", @@ -102286,7 +102441,7 @@ } }, { - "i": 1789, + "i": 1790, "$": { "0": { "v": "nativescript-sqlite", @@ -102371,7 +102526,7 @@ } }, { - "i": 1790, + "i": 1791, "$": { "0": { "v": "nativescript-sqlite-access", @@ -102426,7 +102581,7 @@ } }, { - "i": 1791, + "i": 1792, "$": { "0": { "v": "nativescript-square-plugin", @@ -102476,7 +102631,7 @@ } }, { - "i": 1792, + "i": 1793, "$": { "0": { "v": "nativescript-square-reader", @@ -102521,7 +102676,7 @@ } }, { - "i": 1793, + "i": 1794, "$": { "0": { "v": "nativescript-sse", @@ -102586,7 +102741,7 @@ } }, { - "i": 1794, + "i": 1795, "$": { "0": { "v": "nativescript-ssi-awesome-webview", @@ -102671,7 +102826,7 @@ } }, { - "i": 1795, + "i": 1796, "$": { "0": { "v": "nativescript-ssi-i18n", @@ -102711,7 +102866,7 @@ } }, { - "i": 1796, + "i": 1797, "$": { "0": { "v": "nativescript-ssi-local-notifications", @@ -102761,7 +102916,7 @@ } }, { - "i": 1797, + "i": 1798, "$": { "0": { "v": "nativescript-ssi-push-notifications", @@ -102796,7 +102951,7 @@ } }, { - "i": 1798, + "i": 1799, "$": { "0": { "v": "nativescript-ssi-tv", @@ -102846,7 +103001,7 @@ } }, { - "i": 1799, + "i": 1800, "$": { "0": { "v": "nativescript-ssl-pinning", @@ -102931,7 +103086,7 @@ } }, { - "i": 1800, + "i": 1801, "$": { "0": { "v": "nativescript-ssoauth", @@ -103006,7 +103161,7 @@ } }, { - "i": 1801, + "i": 1802, "$": { "0": { "v": "nativescript-stage-facebook-login", @@ -103041,7 +103196,7 @@ } }, { - "i": 1802, + "i": 1803, "$": { "0": { "v": "nativescript-star-printer", @@ -103116,7 +103271,7 @@ } }, { - "i": 1803, + "i": 1804, "$": { "0": { "v": "nativescript-star-ratings", @@ -103166,7 +103321,7 @@ } }, { - "i": 1804, + "i": 1805, "$": { "0": { "v": "nativescript-star-ratings-ext", @@ -103221,7 +103376,7 @@ } }, { - "i": 1805, + "i": 1806, "$": { "0": { "v": "nativescript-stario", @@ -103266,7 +103421,7 @@ } }, { - "i": 1806, + "i": 1807, "$": { "0": { "v": "nativescript-starter-kits", @@ -103296,7 +103451,7 @@ } }, { - "i": 1807, + "i": 1808, "$": { "0": { "v": "nativescript-status-bar", @@ -103341,7 +103496,7 @@ } }, { - "i": 1808, + "i": 1809, "$": { "0": { "v": "nativescript-statusbar", @@ -103396,7 +103551,7 @@ } }, { - "i": 1809, + "i": 1810, "$": { "0": { "v": "nativescript-stomp-client", @@ -103456,7 +103611,7 @@ } }, { - "i": 1810, + "i": 1811, "$": { "0": { "v": "nativescript-stomp-connector", @@ -103506,7 +103661,7 @@ } }, { - "i": 1811, + "i": 1812, "$": { "0": { "v": "nativescript-store-ratings", @@ -103556,7 +103711,7 @@ } }, { - "i": 1812, + "i": 1813, "$": { "0": { "v": "nativescript-store-update", @@ -103631,7 +103786,7 @@ } }, { - "i": 1813, + "i": 1814, "$": { "0": { "v": "nativescript-strapi", @@ -103686,7 +103841,7 @@ } }, { - "i": 1814, + "i": 1815, "$": { "0": { "v": "nativescript-stringformat", @@ -103726,7 +103881,7 @@ } }, { - "i": 1815, + "i": 1816, "$": { "0": { "v": "nativescript-stripe", @@ -103781,7 +103936,7 @@ } }, { - "i": 1816, + "i": 1817, "$": { "0": { "v": "nativescript-stripe-sdk", @@ -103831,7 +103986,7 @@ } }, { - "i": 1817, + "i": 1818, "$": { "0": { "v": "nativescript-svg", @@ -103881,7 +104036,7 @@ } }, { - "i": 1818, + "i": 1819, "$": { "0": { "v": "nativescript-svg-hw", @@ -103936,7 +104091,7 @@ } }, { - "i": 1819, + "i": 1820, "$": { "0": { "v": "nativescript-sweet-alert", @@ -103991,7 +104146,7 @@ } }, { - "i": 1820, + "i": 1821, "$": { "0": { "v": "nativescript-swift-2.3", @@ -104021,7 +104176,7 @@ } }, { - "i": 1821, + "i": 1822, "$": { "0": { "v": "nativescript-swift-3.0", @@ -104051,7 +104206,7 @@ } }, { - "i": 1822, + "i": 1823, "$": { "0": { "v": "nativescript-swipe-card", @@ -104101,7 +104256,7 @@ } }, { - "i": 1823, + "i": 1824, "$": { "0": { "v": "nativescript-swipe-layout", @@ -104161,7 +104316,7 @@ } }, { - "i": 1824, + "i": 1825, "$": { "0": { "v": "nativescript-swipe-view", @@ -104226,7 +104381,7 @@ } }, { - "i": 1825, + "i": 1826, "$": { "0": { "v": "nativescript-swiper", @@ -104276,7 +104431,7 @@ } }, { - "i": 1826, + "i": 1827, "$": { "0": { "v": "nativescript-swiss-army-knife", @@ -104356,7 +104511,7 @@ } }, { - "i": 1827, + "i": 1828, "$": { "0": { "v": "nativescript-swypelab-toasty", @@ -104411,7 +104566,7 @@ } }, { - "i": 1828, + "i": 1829, "$": { "0": { "v": "nativescript-syntax-highlighter", @@ -104461,7 +104616,7 @@ } }, { - "i": 1829, + "i": 1830, "$": { "0": { "v": "nativescript-systemui", @@ -104516,7 +104671,7 @@ } }, { - "i": 1830, + "i": 1831, "$": { "0": { "v": "nativescript-tag", @@ -104576,7 +104731,7 @@ } }, { - "i": 1831, + "i": 1832, "$": { "0": { "v": "nativescript-tappy", @@ -104621,7 +104776,7 @@ } }, { - "i": 1832, + "i": 1833, "$": { "0": { "v": "nativescript-taptic-engine", @@ -104681,7 +104836,7 @@ } }, { - "i": 1833, + "i": 1834, "$": { "0": { "v": "nativescript-task-dispatcher", @@ -104731,7 +104886,7 @@ } }, { - "i": 1834, + "i": 1835, "$": { "0": { "v": "nativescript-taskpie", @@ -104786,7 +104941,7 @@ } }, { - "i": 1835, + "i": 1836, "$": { "0": { "v": "nativescript-tasks", @@ -104866,7 +105021,7 @@ } }, { - "i": 1836, + "i": 1837, "$": { "0": { "v": "nativescript-telegram-image-picker", @@ -104946,7 +105101,7 @@ } }, { - "i": 1837, + "i": 1838, "$": { "0": { "v": "nativescript-telephony", @@ -105041,7 +105196,7 @@ } }, { - "i": 1838, + "i": 1839, "$": { "0": { "v": "nativescript-telerik-analytics", @@ -105096,7 +105251,7 @@ } }, { - "i": 1839, + "i": 1840, "$": { "0": { "v": "nativescript-telerik-reporting", @@ -105151,7 +105306,7 @@ } }, { - "i": 1840, + "i": 1841, "$": { "0": { "v": "nativescript-temp-sms", @@ -105201,7 +105356,7 @@ } }, { - "i": 1841, + "i": 1842, "$": { "0": { "v": "nativescript-template-drawer", @@ -105231,7 +105386,7 @@ } }, { - "i": 1842, + "i": 1843, "$": { "0": { "v": "nativescript-template-drawer-ts", @@ -105301,7 +105456,7 @@ } }, { - "i": 1843, + "i": 1844, "$": { "0": { "v": "nativescript-template-groceries", @@ -105331,7 +105486,7 @@ } }, { - "i": 1844, + "i": 1845, "$": { "0": { "v": "nativescript-template-ng-tutorial", @@ -105366,7 +105521,7 @@ } }, { - "i": 1845, + "i": 1846, "$": { "0": { "v": "nativescript-temporary-key-storage", @@ -105426,7 +105581,7 @@ } }, { - "i": 1846, + "i": 1847, "$": { "0": { "v": "nativescript-tesseract-ios", @@ -105476,7 +105631,7 @@ } }, { - "i": 1847, + "i": 1848, "$": { "0": { "v": "nativescript-test", @@ -105521,7 +105676,7 @@ } }, { - "i": 1848, + "i": 1849, "$": { "0": { "v": "nativescript-test-plug", @@ -105571,7 +105726,7 @@ } }, { - "i": 1849, + "i": 1850, "$": { "0": { "v": "nativescript-test-view", @@ -105626,7 +105781,7 @@ } }, { - "i": 1850, + "i": 1851, "$": { "0": { "v": "nativescript-test-xss", @@ -105676,7 +105831,7 @@ } }, { - "i": 1851, + "i": 1852, "$": { "0": { "v": "nativescript-test-xss2", @@ -105706,7 +105861,7 @@ } }, { - "i": 1852, + "i": 1853, "$": { "0": { "v": "nativescript-testfairy", @@ -105756,7 +105911,7 @@ } }, { - "i": 1853, + "i": 1854, "$": { "0": { "v": "nativescript-tests-hook", @@ -105806,7 +105961,7 @@ } }, { - "i": 1854, + "i": 1855, "$": { "0": { "v": "nativescript-teststudio", @@ -105846,7 +106001,7 @@ } }, { - "i": 1855, + "i": 1856, "$": { "0": { "v": "nativescript-textdrawable", @@ -105886,7 +106041,7 @@ } }, { - "i": 1856, + "i": 1857, "$": { "0": { "v": "nativescript-textfield-ex", @@ -105936,7 +106091,7 @@ } }, { - "i": 1857, + "i": 1858, "$": { "0": { "v": "nativescript-textfield-ng", @@ -105966,7 +106121,7 @@ } }, { - "i": 1858, + "i": 1859, "$": { "0": { "v": "nativescript-textinputlayout", @@ -106036,7 +106191,7 @@ } }, { - "i": 1859, + "i": 1860, "$": { "0": { "v": "nativescript-textinputlayout-v2", @@ -106111,7 +106266,7 @@ } }, { - "i": 1860, + "i": 1861, "$": { "0": { "v": "nativescript-texttospeech", @@ -106161,7 +106316,7 @@ } }, { - "i": 1861, + "i": 1862, "$": { "0": { "v": "nativescript-texttospeech-enduco", @@ -106216,7 +106371,7 @@ } }, { - "i": 1862, + "i": 1863, "$": { "0": { "v": "nativescript-tglib", @@ -106271,7 +106426,7 @@ } }, { - "i": 1863, + "i": 1864, "$": { "0": { "v": "nativescript-theme-christmas", @@ -106301,7 +106456,7 @@ } }, { - "i": 1864, + "i": 1865, "$": { "0": { "v": "nativescript-theme-core", @@ -106331,7 +106486,7 @@ } }, { - "i": 1865, + "i": 1866, "$": { "0": { "v": "nativescript-themes", @@ -106391,7 +106546,7 @@ } }, { - "i": 1866, + "i": 1867, "$": { "0": { "v": "nativescript-three", @@ -106436,7 +106591,7 @@ } }, { - "i": 1867, + "i": 1868, "$": { "0": { "v": "nativescript-timedatepicker", @@ -106466,7 +106621,7 @@ } }, { - "i": 1868, + "i": 1869, "$": { "0": { "v": "nativescript-timedatepicker-renet", @@ -106501,7 +106656,7 @@ } }, { - "i": 1869, + "i": 1870, "$": { "0": { "v": "nativescript-timepicker-slider", @@ -106536,7 +106691,7 @@ } }, { - "i": 1870, + "i": 1871, "$": { "0": { "v": "nativescript-tinyengine", @@ -106581,7 +106736,7 @@ } }, { - "i": 1871, + "i": 1872, "$": { "0": { "v": "nativescript-toast", @@ -106626,7 +106781,7 @@ } }, { - "i": 1872, + "i": 1873, "$": { "0": { "v": "nativescript-toast-plugin", @@ -106676,7 +106831,7 @@ } }, { - "i": 1873, + "i": 1874, "$": { "0": { "v": "nativescript-toasts", @@ -106716,7 +106871,7 @@ } }, { - "i": 1874, + "i": 1875, "$": { "0": { "v": "nativescript-toasty", @@ -106766,7 +106921,7 @@ } }, { - "i": 1875, + "i": 1876, "$": { "0": { "v": "nativescript-toasty-ns-7", @@ -106826,7 +106981,7 @@ } }, { - "i": 1876, + "i": 1877, "$": { "0": { "v": "nativescript-toolbar", @@ -106871,7 +107026,7 @@ } }, { - "i": 1877, + "i": 1878, "$": { "0": { "v": "nativescript-toolbox", @@ -107156,7 +107311,7 @@ } }, { - "i": 1878, + "i": 1879, "$": { "0": { "v": "nativescript-toolbox-ssi", @@ -107446,7 +107601,7 @@ } }, { - "i": 1879, + "i": 1880, "$": { "0": { "v": "nativescript-toolbox-sw", @@ -107736,7 +107891,7 @@ } }, { - "i": 1880, + "i": 1881, "$": { "0": { "v": "nativescript-tooltip", @@ -107786,7 +107941,7 @@ } }, { - "i": 1881, + "i": 1882, "$": { "0": { "v": "nativescript-touchid", @@ -107841,7 +107996,7 @@ } }, { - "i": 1882, + "i": 1883, "$": { "0": { "v": "nativescript-trace-raven", @@ -107906,7 +108061,7 @@ } }, { - "i": 1883, + "i": 1884, "$": { "0": { "v": "nativescript-trace-sentry", @@ -107966,7 +108121,7 @@ } }, { - "i": 1884, + "i": 1885, "$": { "0": { "v": "nativescript-transcoder", @@ -108021,7 +108176,7 @@ } }, { - "i": 1885, + "i": 1886, "$": { "0": { "v": "nativescript-troisjs", @@ -108071,7 +108226,7 @@ } }, { - "i": 1886, + "i": 1887, "$": { "0": { "v": "nativescript-tslib", @@ -108096,7 +108251,7 @@ } }, { - "i": 1887, + "i": 1888, "$": { "0": { "v": "nativescript-tsx", @@ -108121,7 +108276,7 @@ } }, { - "i": 1888, + "i": 1889, "$": { "0": { "v": "nativescript-tus-client", @@ -108181,7 +108336,7 @@ } }, { - "i": 1889, + "i": 1890, "$": { "0": { "v": "nativescript-tus-upload", @@ -108231,7 +108386,7 @@ } }, { - "i": 1890, + "i": 1891, "$": { "0": { "v": "nativescript-tween", @@ -108276,7 +108431,7 @@ } }, { - "i": 1891, + "i": 1892, "$": { "0": { "v": "nativescript-tweenjs", @@ -108321,7 +108476,7 @@ } }, { - "i": 1892, + "i": 1893, "$": { "0": { "v": "nativescript-twilio", @@ -108371,7 +108526,7 @@ } }, { - "i": 1893, + "i": 1894, "$": { "0": { "v": "nativescript-twilio-plugin", @@ -108421,7 +108576,7 @@ } }, { - "i": 1894, + "i": 1895, "$": { "0": { "v": "nativescript-twilio-v2oip", @@ -108471,7 +108626,7 @@ } }, { - "i": 1895, + "i": 1896, "$": { "0": { "v": "nativescript-twilio-video", @@ -108521,7 +108676,7 @@ } }, { - "i": 1896, + "i": 1897, "$": { "0": { "v": "nativescript-twitter", @@ -108546,7 +108701,7 @@ } }, { - "i": 1897, + "i": 1898, "$": { "0": { "v": "nativescript-twitter-updated", @@ -108576,7 +108731,7 @@ } }, { - "i": 1898, + "i": 1899, "$": { "0": { "v": "nativescript-twitterbang", @@ -108636,7 +108791,7 @@ } }, { - "i": 1899, + "i": 1900, "$": { "0": { "v": "nativescript-typedoc-theme", @@ -108691,7 +108846,7 @@ } }, { - "i": 1900, + "i": 1901, "$": { "0": { "v": "nativescript-uber", @@ -108741,7 +108896,7 @@ } }, { - "i": 1901, + "i": 1902, "$": { "0": { "v": "nativescript-uberx", @@ -108791,7 +108946,7 @@ } }, { - "i": 1902, + "i": 1903, "$": { "0": { "v": "nativescript-ui-autocomplete", @@ -108846,7 +109001,7 @@ } }, { - "i": 1903, + "i": 1904, "$": { "0": { "v": "nativescript-ui-calendar", @@ -108901,7 +109056,7 @@ } }, { - "i": 1904, + "i": 1905, "$": { "0": { "v": "nativescript-ui-chart", @@ -108956,7 +109111,7 @@ } }, { - "i": 1905, + "i": 1906, "$": { "0": { "v": "nativescript-ui-core", @@ -109011,7 +109166,7 @@ } }, { - "i": 1906, + "i": 1907, "$": { "0": { "v": "nativescript-ui-dataform", @@ -109066,7 +109221,7 @@ } }, { - "i": 1907, + "i": 1908, "$": { "0": { "v": "nativescript-ui-gauge", @@ -109121,7 +109276,7 @@ } }, { - "i": 1908, + "i": 1909, "$": { "0": { "v": "nativescript-ui-highcharts", @@ -109181,7 +109336,7 @@ } }, { - "i": 1909, + "i": 1910, "$": { "0": { "v": "nativescript-ui-listview", @@ -109236,7 +109391,7 @@ } }, { - "i": 1910, + "i": 1911, "$": { "0": { "v": "nativescript-ui-sidedrawer", @@ -109291,7 +109446,7 @@ } }, { - "i": 1911, + "i": 1912, "$": { "0": { "v": "nativescript-uiza-player", @@ -109341,7 +109496,7 @@ } }, { - "i": 1912, + "i": 1913, "$": { "0": { "v": "nativescript-unimag", @@ -109386,7 +109541,7 @@ } }, { - "i": 1913, + "i": 1914, "$": { "0": { "v": "nativescript-unimag-swiper", @@ -109436,7 +109591,7 @@ } }, { - "i": 1914, + "i": 1915, "$": { "0": { "v": "nativescript-unique-identifier", @@ -109486,7 +109641,7 @@ } }, { - "i": 1915, + "i": 1916, "$": { "0": { "v": "nativescript-unit-test-runner", @@ -109521,7 +109676,7 @@ } }, { - "i": 1916, + "i": 1917, "$": { "0": { "v": "nativescript-unit-test-runner-angular-compatibility-hook", @@ -109591,7 +109746,7 @@ } }, { - "i": 1917, + "i": 1918, "$": { "0": { "v": "nativescript-unit-test-runner-essent", @@ -109631,7 +109786,7 @@ } }, { - "i": 1918, + "i": 1919, "$": { "0": { "v": "nativescript-upgrade", @@ -109671,7 +109826,7 @@ } }, { - "i": 1919, + "i": 1920, "$": { "0": { "v": "nativescript-urban-airship", @@ -109736,7 +109891,7 @@ } }, { - "i": 1920, + "i": 1921, "$": { "0": { "v": "nativescript-url-share", @@ -109786,7 +109941,7 @@ } }, { - "i": 1921, + "i": 1922, "$": { "0": { "v": "nativescript-utilities", @@ -109881,7 +110036,7 @@ } }, { - "i": 1922, + "i": 1923, "$": { "0": { "v": "nativescript-utils", @@ -109911,7 +110066,7 @@ } }, { - "i": 1923, + "i": 1924, "$": { "0": { "v": "nativescript-uuid", @@ -109951,7 +110106,7 @@ } }, { - "i": 1924, + "i": 1925, "$": { "0": { "v": "nativescript-uuid-v2", @@ -110011,7 +110166,7 @@ } }, { - "i": 1925, + "i": 1926, "$": { "0": { "v": "nativescript-uxcam", @@ -110081,7 +110236,7 @@ } }, { - "i": 1926, + "i": 1927, "$": { "0": { "v": "nativescript-vector-icons", @@ -110156,7 +110311,7 @@ } }, { - "i": 1927, + "i": 1928, "$": { "0": { "v": "nativescript-version-number", @@ -110206,7 +110361,7 @@ } }, { - "i": 1928, + "i": 1929, "$": { "0": { "v": "nativescript-version-tracking", @@ -110256,7 +110411,7 @@ } }, { - "i": 1929, + "i": 1930, "$": { "0": { "v": "nativescript-version-update", @@ -110331,7 +110486,7 @@ } }, { - "i": 1930, + "i": 1931, "$": { "0": { "v": "nativescript-vibrate", @@ -110381,7 +110536,7 @@ } }, { - "i": 1931, + "i": 1932, "$": { "0": { "v": "nativescript-video-editor", @@ -110431,7 +110586,7 @@ } }, { - "i": 1932, + "i": 1933, "$": { "0": { "v": "nativescript-videoplayer", @@ -110491,7 +110646,7 @@ } }, { - "i": 1933, + "i": 1934, "$": { "0": { "v": "nativescript-videoplayer-lr", @@ -110566,7 +110721,7 @@ } }, { - "i": 1934, + "i": 1935, "$": { "0": { "v": "nativescript-videorecorder", @@ -110621,7 +110776,7 @@ } }, { - "i": 1935, + "i": 1936, "$": { "0": { "v": "nativescript-videorecorder-x", @@ -110681,7 +110836,7 @@ } }, { - "i": 1936, + "i": 1937, "$": { "0": { "v": "nativescript-vidplayer", @@ -110741,7 +110896,7 @@ } }, { - "i": 1937, + "i": 1938, "$": { "0": { "v": "nativescript-virtual-ibeacon", @@ -110791,7 +110946,7 @@ } }, { - "i": 1938, + "i": 1939, "$": { "0": { "v": "nativescript-virtual-joystick", @@ -110841,7 +110996,7 @@ } }, { - "i": 1939, + "i": 1940, "$": { "0": { "v": "nativescript-vkontakte", @@ -110881,7 +111036,7 @@ } }, { - "i": 1940, + "i": 1941, "$": { "0": { "v": "nativescript-volume", @@ -110951,7 +111106,7 @@ } }, { - "i": 1941, + "i": 1942, "$": { "0": { "v": "nativescript-vosk", @@ -111021,7 +111176,7 @@ } }, { - "i": 1942, + "i": 1943, "$": { "0": { "v": "nativescript-vue", @@ -111061,7 +111216,7 @@ } }, { - "i": 1943, + "i": 1944, "$": { "0": { "v": "nativescript-vue-devtools", @@ -111116,7 +111271,7 @@ } }, { - "i": 1944, + "i": 1945, "$": { "0": { "v": "nativescript-vue-dynamo", @@ -111191,7 +111346,7 @@ } }, { - "i": 1945, + "i": 1946, "$": { "0": { "v": "nativescript-vue-externals", @@ -111221,7 +111376,7 @@ } }, { - "i": 1946, + "i": 1947, "$": { "0": { "v": "nativescript-vue-fab", @@ -111271,7 +111426,7 @@ } }, { - "i": 1947, + "i": 1948, "$": { "0": { "v": "nativescript-vue-fonticon", @@ -111331,7 +111486,7 @@ } }, { - "i": 1948, + "i": 1949, "$": { "0": { "v": "nativescript-vue-global-drawer", @@ -111401,7 +111556,7 @@ } }, { - "i": 1949, + "i": 1950, "$": { "0": { "v": "nativescript-vue-jest", @@ -111476,7 +111631,7 @@ } }, { - "i": 1950, + "i": 1951, "$": { "0": { "v": "nativescript-vue-lifecycle-hooks", @@ -111536,7 +111691,7 @@ } }, { - "i": 1951, + "i": 1952, "$": { "0": { "v": "nativescript-vue-multi-drawer", @@ -111601,7 +111756,7 @@ } }, { - "i": 1952, + "i": 1953, "$": { "0": { "v": "nativescript-vue-multi-drawer-update", @@ -111671,7 +111826,7 @@ } }, { - "i": 1953, + "i": 1954, "$": { "0": { "v": "nativescript-vue-navigator", @@ -111731,7 +111886,7 @@ } }, { - "i": 1954, + "i": 1955, "$": { "0": { "v": "nativescript-vue-rollup-template", @@ -111766,7 +111921,7 @@ } }, { - "i": 1955, + "i": 1956, "$": { "0": { "v": "nativescript-vue-router-extended", @@ -111836,7 +111991,7 @@ } }, { - "i": 1956, + "i": 1957, "$": { "0": { "v": "nativescript-vue-router-ns", @@ -111906,7 +112061,7 @@ } }, { - "i": 1957, + "i": 1958, "$": { "0": { "v": "nativescript-vue-shadow", @@ -111966,7 +112121,7 @@ } }, { - "i": 1958, + "i": 1959, "$": { "0": { "v": "nativescript-vue-shadow-ns-7", @@ -112036,7 +112191,7 @@ } }, { - "i": 1959, + "i": 1960, "$": { "0": { "v": "nativescript-vue-shadow-updated", @@ -112101,7 +112256,7 @@ } }, { - "i": 1960, + "i": 1961, "$": { "0": { "v": "nativescript-vue-star-rating", @@ -112161,7 +112316,7 @@ } }, { - "i": 1961, + "i": 1962, "$": { "0": { "v": "nativescript-vue-target", @@ -112191,7 +112346,7 @@ } }, { - "i": 1962, + "i": 1963, "$": { "0": { "v": "nativescript-vue-template-compiler", @@ -112236,7 +112391,7 @@ } }, { - "i": 1963, + "i": 1964, "$": { "0": { "v": "nativescript-vue-web", @@ -112286,7 +112441,7 @@ } }, { - "i": 1964, + "i": 1965, "$": { "0": { "v": "nativescript-vuex-persistent", @@ -112341,7 +112496,7 @@ } }, { - "i": 1965, + "i": 1966, "$": { "0": { "v": "nativescript-walkme", @@ -112376,7 +112531,7 @@ } }, { - "i": 1966, + "i": 1967, "$": { "0": { "v": "nativescript-walkyou", @@ -112411,7 +112566,7 @@ } }, { - "i": 1967, + "i": 1968, "$": { "0": { "v": "nativescript-watchos-connector", @@ -112471,7 +112626,7 @@ } }, { - "i": 1968, + "i": 1969, "$": { "0": { "v": "nativescript-wave-refresh", @@ -112541,7 +112696,7 @@ } }, { - "i": 1969, + "i": 1970, "$": { "0": { "v": "nativescript-wear-messaging", @@ -112601,7 +112756,7 @@ } }, { - "i": 1970, + "i": 1971, "$": { "0": { "v": "nativescript-wear-os", @@ -112681,7 +112836,7 @@ } }, { - "i": 1971, + "i": 1972, "$": { "0": { "v": "nativescript-wear-os-box-inset-layout", @@ -112761,7 +112916,7 @@ } }, { - "i": 1972, + "i": 1973, "$": { "0": { "v": "nativescript-wear-os-layout", @@ -112841,7 +112996,7 @@ } }, { - "i": 1973, + "i": 1974, "$": { "0": { "v": "nativescript-wear-os-listview", @@ -112896,7 +113051,7 @@ } }, { - "i": 1974, + "i": 1975, "$": { "0": { "v": "nativescript-wearos-sensors", @@ -112946,7 +113101,7 @@ } }, { - "i": 1975, + "i": 1976, "$": { "0": { "v": "nativescript-weather-api", @@ -112991,7 +113146,7 @@ } }, { - "i": 1976, + "i": 1977, "$": { "0": { "v": "nativescript-web-image-cache", @@ -113046,7 +113201,7 @@ } }, { - "i": 1977, + "i": 1978, "$": { "0": { "v": "nativescript-web-image-cache-with-fresco", @@ -113111,7 +113266,7 @@ } }, { - "i": 1978, + "i": 1979, "$": { "0": { "v": "nativescript-web-image-cache-with-prefetch", @@ -113176,7 +113331,7 @@ } }, { - "i": 1979, + "i": 1980, "$": { "0": { "v": "nativescript-web-rtc", @@ -113226,7 +113381,7 @@ } }, { - "i": 1980, + "i": 1981, "$": { "0": { "v": "nativescript-webkit-webview", @@ -113276,7 +113431,7 @@ } }, { - "i": 1981, + "i": 1982, "$": { "0": { "v": "nativescript-webpack-import-replace", @@ -113326,7 +113481,7 @@ } }, { - "i": 1982, + "i": 1983, "$": { "0": { "v": "nativescript-webrtc-plugin", @@ -113381,7 +113536,7 @@ } }, { - "i": 1983, + "i": 1984, "$": { "0": { "v": "nativescript-webview", @@ -113402,7 +113557,7 @@ } }, { - "i": 1984, + "i": 1985, "$": { "0": { "v": "nativescript-webview-crypto", @@ -113432,7 +113587,7 @@ } }, { - "i": 1985, + "i": 1986, "$": { "0": { "v": "nativescript-webview-ext-fork", @@ -113497,7 +113652,7 @@ } }, { - "i": 1986, + "i": 1987, "$": { "0": { "v": "nativescript-webview-interface", @@ -113542,7 +113697,7 @@ } }, { - "i": 1987, + "i": 1988, "$": { "0": { "v": "nativescript-webview-interface2", @@ -113587,7 +113742,7 @@ } }, { - "i": 1988, + "i": 1989, "$": { "0": { "v": "nativescript-webview-plus", @@ -113637,7 +113792,7 @@ } }, { - "i": 1989, + "i": 1990, "$": { "0": { "v": "nativescript-webview-utils", @@ -113707,7 +113862,7 @@ } }, { - "i": 1990, + "i": 1991, "$": { "0": { "v": "nativescript-wechat", @@ -113757,7 +113912,7 @@ } }, { - "i": 1991, + "i": 1992, "$": { "0": { "v": "nativescript-wechat-login", @@ -113822,7 +113977,7 @@ } }, { - "i": 1992, + "i": 1993, "$": { "0": { "v": "nativescript-wechat-login-knotes", @@ -113892,7 +114047,7 @@ } }, { - "i": 1993, + "i": 1994, "$": { "0": { "v": "nativescript-wechat-share-plugin", @@ -113957,7 +114112,7 @@ } }, { - "i": 1994, + "i": 1995, "$": { "0": { "v": "nativescript-whatsapp-template", @@ -113987,7 +114142,7 @@ } }, { - "i": 1995, + "i": 1996, "$": { "0": { "v": "nativescript-wifi-info", @@ -114052,7 +114207,7 @@ } }, { - "i": 1996, + "i": 1997, "$": { "0": { "v": "nativescript-wifi-new", @@ -114078,7 +114233,7 @@ } }, { - "i": 1997, + "i": 1998, "$": { "0": { "v": "nativescript-wifi-settings", @@ -114108,7 +114263,7 @@ } }, { - "i": 1998, + "i": 1999, "$": { "0": { "v": "nativescript-wikitude", @@ -114153,7 +114308,7 @@ } }, { - "i": 1999, + "i": 2000, "$": { "0": { "v": "nativescript-wikitude-chiliz", @@ -114208,7 +114363,7 @@ } }, { - "i": 2000, + "i": 2001, "$": { "0": { "v": "nativescript-wikitude-sdk", @@ -114268,7 +114423,7 @@ } }, { - "i": 2001, + "i": 2002, "$": { "0": { "v": "nativescript-wikitude-socios", @@ -114318,7 +114473,7 @@ } }, { - "i": 2002, + "i": 2003, "$": { "0": { "v": "nativescript-wikitudearchitectview", @@ -114353,7 +114508,7 @@ } }, { - "i": 2003, + "i": 2004, "$": { "0": { "v": "nativescript-will", @@ -114438,7 +114593,7 @@ } }, { - "i": 2004, + "i": 2005, "$": { "0": { "v": "nativescript-windowed-modal", @@ -114498,7 +114653,7 @@ } }, { - "i": 2005, + "i": 2006, "$": { "0": { "v": "nativescript-windowed-modal-enduco", @@ -114563,7 +114718,7 @@ } }, { - "i": 2006, + "i": 2007, "$": { "0": { "v": "nativescript-windowed-modal-updated", @@ -114628,7 +114783,7 @@ } }, { - "i": 2007, + "i": 2008, "$": { "0": { "v": "nativescript-windowed-observable-array", @@ -114698,7 +114853,7 @@ } }, { - "i": 2008, + "i": 2009, "$": { "0": { "v": "nativescript-wkwebview", @@ -114743,7 +114898,7 @@ } }, { - "i": 2009, + "i": 2010, "$": { "0": { "v": "nativescript-woosim-printer", @@ -114808,7 +114963,7 @@ } }, { - "i": 2010, + "i": 2011, "$": { "0": { "v": "nativescript-woosim-printer-i350", @@ -114863,7 +115018,7 @@ } }, { - "i": 2011, + "i": 2012, "$": { "0": { "v": "nativescript-wootric", @@ -114898,7 +115053,7 @@ } }, { - "i": 2012, + "i": 2013, "$": { "0": { "v": "nativescript-xml2js", @@ -114933,7 +115088,7 @@ } }, { - "i": 2013, + "i": 2014, "$": { "0": { "v": "nativescript-xmlobjects", @@ -114978,7 +115133,7 @@ } }, { - "i": 2014, + "i": 2015, "$": { "0": { "v": "nativescript-xmpp", @@ -115023,7 +115178,7 @@ } }, { - "i": 2015, + "i": 2016, "$": { "0": { "v": "nativescript-xmpp-client", @@ -115083,7 +115238,7 @@ } }, { - "i": 2016, + "i": 2017, "$": { "0": { "v": "nativescript-xz-ad-generation", @@ -115143,7 +115298,7 @@ } }, { - "i": 2017, + "i": 2018, "$": { "0": { "v": "nativescript-ylprogressbar", @@ -115168,7 +115323,7 @@ } }, { - "i": 2018, + "i": 2019, "$": { "0": { "v": "nativescript-yoga-lib", @@ -115228,7 +115383,7 @@ } }, { - "i": 2019, + "i": 2020, "$": { "0": { "v": "nativescript-yolo", @@ -115273,7 +115428,7 @@ } }, { - "i": 2020, + "i": 2021, "$": { "0": { "v": "nativescript-yourplugin", @@ -115318,7 +115473,7 @@ } }, { - "i": 2021, + "i": 2022, "$": { "0": { "v": "nativescript-youtube-parser", @@ -115398,7 +115553,7 @@ } }, { - "i": 2022, + "i": 2023, "$": { "0": { "v": "nativescript-youtubeplayer", @@ -115458,7 +115613,7 @@ } }, { - "i": 2023, + "i": 2024, "$": { "0": { "v": "nativescript-youtubeplayer-inline", @@ -115523,7 +115678,7 @@ } }, { - "i": 2024, + "i": 2025, "$": { "0": { "v": "nativescript-youtubesdk", @@ -115558,7 +115713,7 @@ } }, { - "i": 2025, + "i": 2026, "$": { "0": { "v": "nativescript-youtubest", @@ -115618,7 +115773,7 @@ } }, { - "i": 2026, + "i": 2027, "$": { "0": { "v": "nativescript-zeepay-trustpayment", @@ -115668,7 +115823,7 @@ } }, { - "i": 2027, + "i": 2028, "$": { "0": { "v": "nativescript-zendesk", @@ -115728,7 +115883,7 @@ } }, { - "i": 2028, + "i": 2029, "$": { "0": { "v": "nativescript-zendesk-chat", @@ -115783,7 +115938,7 @@ } }, { - "i": 2029, + "i": 2030, "$": { "0": { "v": "nativescript-zendesk-chat-ui", @@ -115838,7 +115993,7 @@ } }, { - "i": 2030, + "i": 2031, "$": { "0": { "v": "nativescript-zendesk-monety", @@ -115888,7 +116043,7 @@ } }, { - "i": 2031, + "i": 2032, "$": { "0": { "v": "nativescript-zendesk-sdk", @@ -115943,7 +116098,7 @@ } }, { - "i": 2032, + "i": 2033, "$": { "0": { "v": "nativescript-zendesk-with-chat", @@ -116003,7 +116158,7 @@ } }, { - "i": 2033, + "i": 2034, "$": { "0": { "v": "nativescript-zeroconf", @@ -116078,7 +116233,7 @@ } }, { - "i": 2034, + "i": 2035, "$": { "0": { "v": "nativescript-zip", @@ -116128,7 +116283,7 @@ } }, { - "i": 2035, + "i": 2036, "$": { "0": { "v": "nativescript-zip2", @@ -116174,7 +116329,7 @@ } }, { - "i": 2036, + "i": 2037, "$": { "0": { "v": "nativescript-zxing-compat", @@ -116239,7 +116394,7 @@ } }, { - "i": 2037, + "i": 2038, "$": { "0": { "v": "nativescriptfilterselectnoclear", @@ -116259,7 +116414,7 @@ } }, { - "i": 2038, + "i": 2039, "$": { "0": { "v": "nativescriptvueuse", @@ -116279,7 +116434,7 @@ } }, { - "i": 2039, + "i": 2040, "$": { "0": { "v": "nativescrpt-snackbar", @@ -116359,7 +116514,7 @@ } }, { - "i": 2040, + "i": 2041, "$": { "0": { "v": "ngn-partials", @@ -116384,7 +116539,7 @@ } }, { - "i": 2041, + "i": 2042, "$": { "0": { "v": "ngrx-devtools-nativescript", @@ -116439,7 +116594,7 @@ } }, { - "i": 2042, + "i": 2043, "$": { "0": { "v": "ngx-cc-template", @@ -116519,7 +116674,7 @@ } }, { - "i": 2043, + "i": 2044, "$": { "0": { "v": "ni-facebooklogin", @@ -116545,7 +116700,7 @@ } }, { - "i": 2044, + "i": 2045, "$": { "0": { "v": "not-whlist-sandox-plugin", @@ -116610,7 +116765,7 @@ } }, { - "i": 2045, + "i": 2046, "$": { "0": { "v": "ns-androidx-migrate", @@ -116640,7 +116795,7 @@ } }, { - "i": 2046, + "i": 2047, "$": { "0": { "v": "ns-angular-jwt", @@ -116690,7 +116845,7 @@ } }, { - "i": 2047, + "i": 2048, "$": { "0": { "v": "ns-flex-nativescript", @@ -116825,7 +116980,7 @@ } }, { - "i": 2048, + "i": 2049, "$": { "0": { "v": "ns-limp", @@ -116870,7 +117025,7 @@ } }, { - "i": 2049, + "i": 2050, "$": { "0": { "v": "ns-navigation-tabbar", @@ -116920,7 +117075,7 @@ } }, { - "i": 2050, + "i": 2051, "$": { "0": { "v": "ns-nawah", @@ -116965,7 +117120,7 @@ } }, { - "i": 2051, + "i": 2052, "$": { "0": { "v": "ns-ng-plugin-seed", @@ -117050,7 +117205,7 @@ } }, { - "i": 2052, + "i": 2053, "$": { "0": { "v": "ns-ngrx-debugger", @@ -117125,7 +117280,7 @@ } }, { - "i": 2053, + "i": 2054, "$": { "0": { "v": "ns-permissions", @@ -117175,7 +117330,7 @@ } }, { - "i": 2054, + "i": 2055, "$": { "0": { "v": "ns-pubnub", @@ -117220,7 +117375,7 @@ } }, { - "i": 2055, + "i": 2056, "$": { "0": { "v": "ns-sim-info", @@ -117285,7 +117440,7 @@ } }, { - "i": 2056, + "i": 2057, "$": { "0": { "v": "ns-sweet-alert", @@ -117340,7 +117495,7 @@ } }, { - "i": 2057, + "i": 2058, "$": { "0": { "v": "ns-template-js", @@ -117405,7 +117560,7 @@ } }, { - "i": 2058, + "i": 2059, "$": { "0": { "v": "ns-tools", @@ -117430,7 +117585,7 @@ } }, { - "i": 2059, + "i": 2060, "$": { "0": { "v": "ns-vue-nami", @@ -117485,7 +117640,7 @@ } }, { - "i": 2060, + "i": 2061, "$": { "0": { "v": "ns-vuex-persist", @@ -117535,7 +117690,7 @@ } }, { - "i": 2061, + "i": 2062, "$": { "0": { "v": "ns7-swiss-army-knife", @@ -117595,7 +117750,7 @@ } }, { - "i": 2062, + "i": 2063, "$": { "0": { "v": "nsblestream", @@ -117640,7 +117795,7 @@ } }, { - "i": 2063, + "i": 2064, "$": { "0": { "v": "nsg", @@ -117675,7 +117830,7 @@ } }, { - "i": 2064, + "i": 2065, "$": { "0": { "v": "nsngdaftools", @@ -117710,7 +117865,7 @@ } }, { - "i": 2065, + "i": 2066, "$": { "0": { "v": "nsplugtail", @@ -117765,7 +117920,7 @@ } }, { - "i": 2066, + "i": 2067, "$": { "0": { "v": "nsprogresshud", @@ -117805,7 +117960,7 @@ } }, { - "i": 2067, + "i": 2068, "$": { "0": { "v": "nsyelpapi", @@ -117875,7 +118030,7 @@ } }, { - "i": 2068, + "i": 2069, "$": { "0": { "v": "oauth2-oidc-client", @@ -117950,7 +118105,7 @@ } }, { - "i": 2069, + "i": 2070, "$": { "0": { "v": "observable-sectioned-array", @@ -118005,7 +118160,7 @@ } }, { - "i": 2070, + "i": 2071, "$": { "0": { "v": "oidc-angular", @@ -118060,7 +118215,7 @@ } }, { - "i": 2071, + "i": 2072, "$": { "0": { "v": "paygilant-native-script-plugin", @@ -118120,7 +118275,7 @@ } }, { - "i": 2072, + "i": 2073, "$": { "0": { "v": "perfectedtech-loopback-sdk-builder", @@ -118185,7 +118340,7 @@ } }, { - "i": 2073, + "i": 2074, "$": { "0": { "v": "petfinder-angular-service", @@ -118240,7 +118395,7 @@ } }, { - "i": 2074, + "i": 2075, "$": { "0": { "v": "pf_nsa_styleguide", @@ -118260,7 +118415,7 @@ } }, { - "i": 2075, + "i": 2076, "$": { "0": { "v": "popup-shashanka-sap", @@ -118315,7 +118470,7 @@ } }, { - "i": 2076, + "i": 2077, "$": { "0": { "v": "postcss-nativescript", @@ -118360,7 +118515,7 @@ } }, { - "i": 2077, + "i": 2078, "$": { "0": { "v": "prash-pod-pluginman", @@ -118415,7 +118570,7 @@ } }, { - "i": 2078, + "i": 2079, "$": { "0": { "v": "preact-nativescript-components", @@ -118445,7 +118600,7 @@ } }, { - "i": 2079, + "i": 2080, "$": { "0": { "v": "preact-nativescript-mock", @@ -118475,7 +118630,7 @@ } }, { - "i": 2080, + "i": 2081, "$": { "0": { "v": "preact-to-nativescript", @@ -118505,7 +118660,7 @@ } }, { - "i": 2081, + "i": 2082, "$": { "0": { "v": "proximiio-unified-sdk", @@ -118555,7 +118710,7 @@ } }, { - "i": 2082, + "i": 2083, "$": { "0": { "v": "proxy-lib", @@ -118590,7 +118745,7 @@ } }, { - "i": 2083, + "i": 2084, "$": { "0": { "v": "pusher-nativescript", @@ -118635,7 +118790,7 @@ } }, { - "i": 2084, + "i": 2085, "$": { "0": { "v": "pyze-nativescript", @@ -118715,7 +118870,7 @@ } }, { - "i": 2085, + "i": 2086, "$": { "0": { "v": "rachnerd-test-plugin", @@ -118760,7 +118915,7 @@ } }, { - "i": 2086, + "i": 2087, "$": { "0": { "v": "rave-nativescript", @@ -118805,7 +118960,7 @@ } }, { - "i": 2087, + "i": 2088, "$": { "0": { "v": "react-native-chess-oex-scanner-android", @@ -118860,7 +119015,7 @@ } }, { - "i": 2088, + "i": 2089, "$": { "0": { "v": "react-native-expo-fancy-alerts", @@ -118930,7 +119085,7 @@ } }, { - "i": 2089, + "i": 2090, "$": { "0": { "v": "react-nativescript", @@ -118965,7 +119120,7 @@ } }, { - "i": 2090, + "i": 2091, "$": { "0": { "v": "react-nativescript-date-picker", @@ -119000,7 +119155,7 @@ } }, { - "i": 2091, + "i": 2092, "$": { "0": { "v": "react-nativescript-navigation", @@ -119045,7 +119200,7 @@ } }, { - "i": 2092, + "i": 2093, "$": { "0": { "v": "rosen-test-ns-extension", @@ -119090,7 +119245,7 @@ } }, { - "i": 2093, + "i": 2094, "$": { "0": { "v": "router-vue-native", @@ -119155,7 +119310,7 @@ } }, { - "i": 2094, + "i": 2095, "$": { "0": { "v": "s-nativescript-angular", @@ -119185,7 +119340,7 @@ } }, { - "i": 2095, + "i": 2096, "$": { "0": { "v": "shumih-tns-popup", @@ -119236,7 +119391,7 @@ } }, { - "i": 2096, + "i": 2097, "$": { "0": { "v": "solid-navigation", @@ -119296,7 +119451,7 @@ } }, { - "i": 2097, + "i": 2098, "$": { "0": { "v": "speigg-nativescript-geolocation", @@ -119341,7 +119496,7 @@ } }, { - "i": 2098, + "i": 2099, "$": { "0": { "v": "surplus-nativescript", @@ -119386,7 +119541,7 @@ } }, { - "i": 2099, + "i": 2100, "$": { "0": { "v": "svelte-native", @@ -119421,7 +119576,7 @@ } }, { - "i": 2100, + "i": 2101, "$": { "0": { "v": "svelte-native-akylas", @@ -119461,7 +119616,7 @@ } }, { - "i": 2101, + "i": 2102, "$": { "0": { "v": "svelte-native-nativescript-ui", @@ -119516,7 +119671,7 @@ } }, { - "i": 2102, + "i": 2103, "$": { "0": { "v": "svelte-native-preprocessor", @@ -119561,7 +119716,7 @@ } }, { - "i": 2103, + "i": 2104, "$": { "0": { "v": "swtc-brorand", @@ -119616,7 +119771,7 @@ } }, { - "i": 2104, + "i": 2105, "$": { "0": { "v": "swtc-nativescript", @@ -119656,7 +119811,7 @@ } }, { - "i": 2105, + "i": 2106, "$": { "0": { "v": "swtc-nativescript-brorand", @@ -119716,7 +119871,7 @@ } }, { - "i": 2106, + "i": 2107, "$": { "0": { "v": "symlink-resolver", @@ -119781,7 +119936,7 @@ } }, { - "i": 2107, + "i": 2108, "$": { "0": { "v": "symlink-resolver-fork", @@ -119851,7 +120006,7 @@ } }, { - "i": 2108, + "i": 2109, "$": { "0": { "v": "test-nativescript-utils", @@ -119877,7 +120032,7 @@ } }, { - "i": 2109, + "i": 2110, "$": { "0": { "v": "test-tns-web-angular-2", @@ -119917,7 +120072,7 @@ } }, { - "i": 2110, + "i": 2111, "$": { "0": { "v": "testnsfire", @@ -120082,7 +120237,7 @@ } }, { - "i": 2111, + "i": 2112, "$": { "0": { "v": "thinkdigital-nativescript-cardio", @@ -120122,7 +120277,7 @@ } }, { - "i": 2112, + "i": 2113, "$": { "0": { "v": "thinkdigital-nativescript-odata", @@ -120172,7 +120327,7 @@ } }, { - "i": 2113, + "i": 2114, "$": { "0": { "v": "thinkdigital-nativescript-util", @@ -120198,7 +120353,7 @@ } }, { - "i": 2114, + "i": 2115, "$": { "0": { "v": "timeline-checking", @@ -120248,7 +120403,7 @@ } }, { - "i": 2115, + "i": 2116, "$": { "0": { "v": "tns-ajax", @@ -120293,7 +120448,7 @@ } }, { - "i": 2116, + "i": 2117, "$": { "0": { "v": "tns-amap", @@ -120338,7 +120493,7 @@ } }, { - "i": 2117, + "i": 2118, "$": { "0": { "v": "tns-android", @@ -120363,7 +120518,7 @@ } }, { - "i": 2118, + "i": 2119, "$": { "0": { "v": "tns-conchecker", @@ -120403,7 +120558,7 @@ } }, { - "i": 2119, + "i": 2120, "$": { "0": { "v": "tns-core-modules", @@ -120433,7 +120588,7 @@ } }, { - "i": 2120, + "i": 2121, "$": { "0": { "v": "tns-core-modules-widgets", @@ -120467,41 +120622,6 @@ } } }, - { - "i": 2121, - "$": { - "0": { - "v": "tns-core-modules-xml", - "n": 1 - }, - "1": [ - { - "v": "xml", - "i": 3, - "n": 1 - }, - { - "v": "modules", - "i": 2, - "n": 1 - }, - { - "v": "core", - "i": 1, - "n": 1 - }, - { - "v": "tns", - "i": 0, - "n": 1 - } - ], - "2": { - "v": "Telerik NativeScript Core Modules", - "n": 0.5 - } - } - }, { "i": 2122, "$": { @@ -121176,64 +121296,69 @@ "i": 2135, "$": { "0": { - "v": "tns-template-ava-ts", + "v": "tns-platform-declarations", "n": 1 }, "1": [ { - "v": "ts", + "v": "declarations", + "i": 10, + "n": 1 + }, + { + "v": "platform", "i": 9, "n": 1 }, { - "v": "ava", + "v": "tns", "i": 8, "n": 1 }, { - "v": "template", + "v": "ns", "i": 7, "n": 1 }, { - "v": "tns", + "v": "ts", "i": 6, "n": 1 }, { - "v": "{N}", + "v": "tns", "i": 5, "n": 1 }, { - "v": "tns", + "v": "platform-specific", "i": 4, "n": 1 }, { - "v": "template", + "v": "native", "i": 3, "n": 1 }, { - "v": "typescript", + "v": "declarations", "i": 2, "n": 1 }, { - "v": "nativescript", + "v": "TypeScript", "i": 1, "n": 1 }, { - "v": "dewstudio", + "v": "NativeScript", "i": 0, "n": 1 } ], "2": { - "v": "A template for Nativescript core - Typescript app from Andrea Vincenzo Abbondanza", - "n": 0.289 + "v": "Platform-specific TypeScript declarations for NativeScript for accessing native objects", + "n": 0.333 } } }, @@ -121241,52 +121366,47 @@ "i": 2136, "$": { "0": { - "v": "tns-template-blank", + "v": "tns-template-ava-ts", "n": 1 }, "1": [ { - "v": "blank", - "i": 10, - "n": 1 - }, - { - "v": "template", + "v": "ts", "i": 9, "n": 1 }, { - "v": "tns", + "v": "ava", "i": 8, "n": 1 }, { - "v": "category-general", + "v": "template", "i": 7, "n": 1 }, { - "v": "template", + "v": "tns", "i": 6, "n": 1 }, { - "v": "tns", + "v": "{N}", "i": 5, "n": 1 }, { - "v": "{N}", + "v": "tns", "i": 4, "n": 1 }, { - "v": "nativescript", + "v": "template", "i": 3, "n": 1 }, { - "v": "mobile", + "v": "typescript", "i": 2, "n": 1 }, @@ -121296,14 +121416,14 @@ "n": 1 }, { - "v": "nstudio", + "v": "dewstudio", "i": 0, "n": 1 } ], "2": { - "v": "Blank template for Vanilla NativeScript apps using JavaScript", - "n": 0.354 + "v": "A template for Nativescript core - Typescript app from Andrea Vincenzo Abbondanza", + "n": 0.289 } } }, @@ -121311,27 +121431,27 @@ "i": 2137, "$": { "0": { - "v": "tns-template-blank-crank", + "v": "tns-template-blank", "n": 1 }, "1": [ { - "v": "crank", + "v": "blank", "i": 10, "n": 1 }, { - "v": "blank", + "v": "template", "i": 9, "n": 1 }, { - "v": "template", + "v": "tns", "i": 8, "n": 1 }, { - "v": "tns", + "v": "category-general", "i": 7, "n": 1 }, @@ -121341,22 +121461,22 @@ "n": 1 }, { - "v": "crank-native", + "v": "tns", "i": 5, "n": 1 }, { - "v": "crank", + "v": "{N}", "i": 4, "n": 1 }, { - "v": "tns", + "v": "nativescript", "i": 3, "n": 1 }, { - "v": "{N}", + "v": "mobile", "i": 2, "n": 1 }, @@ -121366,14 +121486,14 @@ "n": 1 }, { - "v": "mobile", + "v": "nstudio", "i": 0, "n": 1 } ], "2": { - "v": "Blank template for NativeScript apps using Crank.", - "n": 0.378 + "v": "Blank template for Vanilla NativeScript apps using JavaScript", + "n": 0.354 } } }, @@ -121381,32 +121501,27 @@ "i": 2138, "$": { "0": { - "v": "tns-template-blank-ng", + "v": "tns-template-blank-crank", "n": 1 }, "1": [ { - "v": "ng", - "i": 11, - "n": 1 - }, - { - "v": "blank", + "v": "crank", "i": 10, "n": 1 }, { - "v": "template", + "v": "blank", "i": 9, "n": 1 }, { - "v": "tns", + "v": "template", "i": 8, "n": 1 }, { - "v": "category-general", + "v": "tns", "i": 7, "n": 1 }, @@ -121416,22 +121531,22 @@ "n": 1 }, { - "v": "tns", + "v": "crank-native", "i": 5, "n": 1 }, { - "v": "{N}", + "v": "crank", "i": 4, "n": 1 }, { - "v": "angular", + "v": "tns", "i": 3, "n": 1 }, { - "v": "mobile", + "v": "{N}", "i": 2, "n": 1 }, @@ -121441,13 +121556,13 @@ "n": 1 }, { - "v": "nstudio", + "v": "mobile", "i": 0, "n": 1 } ], "2": { - "v": "Blank template for NativeScript apps using Angular", + "v": "Blank template for NativeScript apps using Crank.", "n": 0.378 } } diff --git a/src/data/pluginData.dat b/src/data/pluginData.dat index 6cc004f7..b147b2eb 100644 --- a/src/data/pluginData.dat +++ b/src/data/pluginData.dat @@ -1 +1 @@ -{"nativescript-ui-sidedrawer":{"name":"nativescript-ui-sidedrawer","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI SideDrawer

\n\n

Overview

\n

The NativeScript UI SideDrawer plugin allows you to have a hidden view that contains navigation UI or common settings. A popular application that uses the drawer UI is the Android Play Store app. The hidden view can be displayed with a flick gesture and can be shown from any of the four edges of the screen. The view is also displayed with a transition which can be chosen from a set of pre-defined transitions.

\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-sidedrawer
\n

Documentation

\n

More information about the usage of the plugin available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":462,"lastWeek":2073,"lastMonth":8284}},"nativescript-vue":{"name":"nativescript-vue","version":"2.9.3","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":313,"lastWeek":1511,"lastMonth":6185}},"s-nativescript-angular":{"name":"s-nativescript-angular","version":"15.0.1","license":"MIT","readme":"

@nativescript/angular

\n

For usage with NativeScript for Angular 12, 13, 14+ projects.

\n

Clean and setup workspace:

\n
npm run clean.all
\n

Build packages:

\n
npm run build
\n

Run demo:

\n
npm run demo.ios
// or...
npm run demo.android
\n

Clean/Reset demo dependencies

\n
npm run demo.clean
\n

Unit tests for iOS and Android:

\n
npm run test.android
npm run test.ios
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":6}},"@nativescript/nx":{"name":"@nativescript/nx","version":"17.0.0","license":"Apache-2.0","readme":"

NativeScript Plugin for Nx

\n

\n
\n

\"License\"\n\"NPM

\n
\n
\n

Requires at least NativeScript CLI v8.x.x or higher. You can confirm your CLI version by running ns -v.

\n
\n

Table of Contents

\n\n\n\n\n

Getting started

\n

Create a new Nx workspace

\n
# Using npm
npx create-nx-workspace@latest

# Using yarn
yarn create-nx-workspace@latest
\n

At the prompts, you can use:

\n
✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based monorepo, integrated monorepo, or standalone project?
Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
\n

Init workspace

\n

Initialize a TypeScript project -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install NativeScript plugin

\n
# Using npm
npm install --save-dev @nativescript/nx

# Using yarn
yarn add -D @nativescript/nx
\n

Create an app

\n
# Using npm
npx nx g @nativescript/nx:app <app-name> [...options]

# Using yarn
yarn nx g @nativescript/nx:app <app-name> [...options]
\n

This will generate:

\n
apps/nativescript-<app-name>
\n

The NativeScript Nx plugin will prefix apps by default to help distinguish them against other apps in your workspace for clarity.

\n

--framework [angular|vanilla]

\n

You will be prompted to choose a framework when this flag is ommitted.

\n

Use this option to explicitly choose a specific frontend framework integration app.

\n

This setting will be saved with plugin settings the first time it's used to automatically choose this frontend framework integration for subsequent usages and with other generators without having to specify the flag again.

\n

--groupByName

\n

If you prefer you can also provide a flag to suffix instead:

\n
npx nx g @nativescript/nx:app <app-name> --groupByName
\n

This will generate:

\n
apps/<app-name>-nativescript
\n

Develop on simulators and devices

\n

Android:

\n
npx nx run <app-name>:android
\n

iOS: (Mac only)

\n
npx nx run <app-name>:ios
\n

Configuration options

\n

A custom executor is provided via @nativescript/nx:build with the following options:

\n
\"debug\": {
  \"type\": \"boolean\",
  \"default\": true,
  \"description\": \"Use 'ns debug' instead of 'ns run'. Defaults to true\"
},
\"device\": {
  \"type\": \"string\",
  \"description\": \"Device identifier to run app on.\",
  \"alias\": \"d\"
},
\"emulator\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Explicitly run with an emulator or simulator\"
},
\"noHmr\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Disable HMR\"
},
\"uglify\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Enable uglify during the webpack build\"
},
\"verbose\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Enable verbose logging\"
},
\"release\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Enable release mode during build using the --release flag\"
},
\"forDevice\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Build in device mode using the --for-device flag\"
},
\"production\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"Build in production mode using the --env.production flag\"
},
\"copyTo\": {
  \"type\": \"string\",
  \"description\": \"When building, copy the package to this location.\"
},
\"provision\": {
  \"type\": \"string\",
  \"description\": \"(iOS Only) When building, use this provision profile name.\"
},
\"aab\": {
  \"type\": \"boolean\",
  \"default\": false,
  \"description\": \"(Android Only) When building, create an Android App Bundle (.aab file).\"
},
\"keyStorePath\": {
  \"type\": \"string\",
  \"description\": \"(Android Only) When building, use the keystore file at this location.\"
},
\"keyStorePassword\": {
  \"type\": \"string\",
  \"description\": \"(Android Only) When building, use this keystore password.\"
},
\"keyStoreAlias\": {
  \"type\": \"string\",
  \"description\": \"(Android Only) When building, use this keystore alias.\"
},
\"keyStoreAliasPassword\": {
  \"type\": \"string\",
  \"description\": \"(Android Only) When building, use this keystore alias password.\"
}
\n

The options follow the NativeScript command line option flags.

\n

Here's an example app config:

\n
\"nativescript-mobile\": {
  \"projectType\": \"application\",
  \"sourceRoot\": \"apps/nativescript-mobile/src\",
  \"prefix\": \"\",
  \"targets\": {
    \"build\": {
      \"executor\": \"@nativescript/nx:build\",
      \"options\": {
        \"noHmr\": true,
        \"production\": true,
        \"uglify\": true,
        \"release\": true,
        \"forDevice\": true
      },
      \"configurations\": {
        \"prod\": {
          \"fileReplacements\": [
            {
              \"replace\": \"./src/environments/environment.ts\",
              \"with\": \"./src/environments/environment.prod.ts\"
            }
          ]
        }
      }
    },
    \"ios\": {
      \"executor\": \"@nativescript/nx:build\",
      \"options\": {
        \"platform\": \"ios\"
      },
      \"configurations\": {
        \"build\": {
          \"provision\": \"AppStore Profile\",
          \"copyTo\": \"./dist/build.ipa\"
        },
        \"prod\": {
          \"combineWithConfig\": \"build:prod\"
        }
      }
    },
    \"android\": {
      \"executor\": \"@nativescript/nx:build\",
      \"options\": {
        \"platform\": \"android\"
      },
      \"configurations\": {
        \"build\": {
          \"aab\": true,
          \"keyStorePath\": \"./tools/keystore.jks\",
          \"keyStorePassword\": \"your-password\",
          \"keyStoreAlias\": \"keystore-alias\",
          \"keyStoreAliasPassword\": \"keystore-alias-password\",
          \"copyTo\": \"./dist/build.aab\"
        },
        \"prod\": {
          \"combineWithConfig\": \"build:prod\"
        }
      }
    },
    \"test\": {
      \"executor\": \"@nativescript/nx:test\",
      \"outputs\": [\"coverage/apps/nativescript-mobile\"],
      \"options\": {
        \"coverage\": false
      },
      \"configurations\": {
        \"android\": {},
        \"ios\": {}
      }
    },
    \"clean\": {
      \"executor\": \"@nativescript/nx:build\",
      \"options\": {
        \"clean\": true
      }
    }
  }
}
\n

Run with a specific configuration

\n

Android:

\n
npx nx run <app-name>:android:prod
\n

iOS: (Mac only)

\n
npx nx run <app-name>:ios:prod
\n

Run tests

\n

Android:

\n
npx nx run <app-name>:test:android
\n

iOS: (Mac only)

\n
npx nx run <app-name>:test:ios
\n

You can generate coverage reports by using the flag with iOS or Android, for example:

\n
npx nx run <app-name>:test:ios --coverage
\n

You can also set this option in the config, for example:

\n
\"test\": {
  \"executor\": \"@nativescript/nx:test\",
  \"outputs\": [\"coverage/apps/nativescript-mobile\"],
  \"options\": {
    \"coverage\": true // can set to always be on for both platforms
  },
  \"configurations\": {
    \"android\": {
      \"coverage\": false // or can override per platform if needed
    },
    \"ios\": {
      \"coverage\": true
    }
  }
}
\n

Create a build

\n

Instead of running the app on a simulator or device you can create a build for the purposes of distribution/release. Various release settings will be needed for iOS and Android which can be passed as additional command line arguments. See more in the NativeScript docs here. Any additional cli flags as stated in the docs can be passed on the end of the nx build command that follows.

\n

Build with an environment configuration enabled (for example, with prod):

\n

Android:

\n
npx nx run <app-name>:build:prod --platform=android
\n

You can pass additional NativeScript CLI options as flags on the end of you build command.

\n\n
npx nx run <app-name>:build:prod --platform=android \\
  --aab \\
  --key-store-path=<path-to-your-keystore> \\
  --key-store-password=<your-key-store-password> \\
  --key-store-alias=<your-alias-name> \\
  --key-store-alias-password=<your-alias-password> \\
  --copyTo=./dist/build.aab
\n

iOS: (Mac only)

\n
npx nx run <app-name>:build:prod --platform=ios
\n

As mentioned, you can pass any additional NativeScript CLI options as flags on the end of your nx build command:

\n\n
npx nx run <app-name>:build:prod --platform=ios \\
  --provision <provisioning-profile-name> \\
  --copy-to ./dist/build.ipa
\n

Clean

\n

It can be helpful to clean the app at times. This will clear out old dependencies plus iOS/Android platform files to give your app a nice reset.

\n
npx nx run <app-name>:clean
\n

Create NativeScript library

\n

You can create a library of NativeScript components or plugins or whatever you'd like.

\n
npx nx g @nativescript/nx:library buttons
\n

This will generate a nativescript-buttons library where you could build out an entire suite of button behaviors and styles for your NativeScript apps.

\n
import { PrimaryButton } from '@myorg/nativescript-buttons';
\n

The NativeScript Nx plugin will prefix libraries by default to help distinguish them against other apps and libraries in your workspace for clarity.

\n

--groupByName

\n

If you prefer you can also provide a flag to suffix instead:

\n
npx nx g @nativescript/nx:library buttons --groupByName
\n

Which would generate a buttons-nativescript library.

\n
import { PrimaryButton } from '@myorg/buttons-nativescript';
\n

Using NativeScript plugins

\n

NativeScript plugins can be used in Nx workspaces in one of the two following methods:

\n

Installing NativeScript plugins at app-level

\n

If the plugin is needed by one app only, and not others, you can install it for the specific app:

\n
cd apps/<app-name>
npm install <plugin-name>
\n

Installing NativeScript plugins at workspace-level

\n

Alternatively, you can install the plugins at the workspace (root), so it is accesible to all your workspace apps:

\n
npm install --save <plugin-name>
\n

Known issues

\n

If a plugin contains platforms folder with native includes, the plugin must be added to app package.json at moment. https://github.com/NativeScript/nx/issues/17#issuecomment-841680719

\n","downloadStats":{"lastDay":364,"lastWeek":1778,"lastMonth":8118}},"@nstudio/nativescript":{"name":"@nstudio/nativescript","version":"17.0.1","license":"MIT","readme":"

Cross-platform (xplat) tools for Nx workspaces

\n

\n
\n

\"Build\n\"License\"\n\"NPM

\n
\n
\n

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

\n

Currently supported platforms

\n\n

Quickstart

\n
npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.
\n

Init workspace

\n

Install the @nx/js plugin.

\n
npm install @nx/js -D
\n

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install the tools:

\n
npm install @nstudio/xplat -D
\n

You are now ready to create apps:

\n
npx nx g @nstudio/xplat:app
\n

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

\n

App generation examples

\n

The additional app generators can be used as follows:

\n

Electron

\n

Electron app generator can use any web app in the workspace as it's target.

\n

If you don't have a web app yet, create one first:

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose web

\n
\n

You can now use the web app as the Electron target:

\n
npx nx g @nstudio/xplat:app desktop --target=web-sample
\n
\n

choose electron

\n
\n

Develop with:

\n
npm run start.electron.desktop
\n

Ionic

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose ionic

\n
\n

Develop in browser with:

\n
npx nx serve ionic-sample
\n

Build Ionic app:

\n
npx nx build ionic-sample
\n

A. Capacitor iOS - Prepare for development

\n
npm run prepare.ionic.sample.ios
\n

You can now open in Xcode for further development:

\n
npm run open.ionic.sample.ios
\n

B. Capacitor Android - Prepare for development

\n
npm run prepare.ionic.sample.android
\n

You can now open in Android Studio for further development:

\n
npm run open.ionic.sample.android
\n

NativeScript

\n
nx g @nstudio/xplat:app mobile
\n
\n

choose nativescript

\n
\n

A. iOS

\n
npx nx run nativescript-mobile:ios
\n

B. Android

\n
npx nx run nativescript-mobile:android
\n

Documentation

\n\n

Talks

\n\n

Recommended extra tooling

\n\n

Example repos for different scenarios

\n\n

Context

\n\n","downloadStats":{"lastDay":374,"lastWeek":1438,"lastMonth":6999}},"angular2-seed-advanced":{"name":"angular2-seed-advanced","version":"1.0.5","license":"MIT","readme":"

\"Angular

\n

\"Angular\n\"Build\n\"MIT\n\"Dependency\n\"devDependency

\n

This is an advanced seed project for Angular apps based on Minko Gechev's angular-seed that expands on all of its great features to include core support for:

\n

Integration with:

\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Multiple
The zen of multiple platforms. Chrome, Android and iPhone all running the same code.
\n\n\n\n\n\n\n\n\n\n\n\n
\"Desktop\"
Programming Nirvana. Mac and Windows desktop both running the same code.
\n

Table of Contents

\n\n

Advice: If your project is intended to target a single platform (i.e, web only), then angular-seed is likely more than suitable for your needs. However if your project goals are to target multiple platforms (web, native mobile and native desktop), with powerful out of the box library support and highly configurable/flexible testing options, then you might want to keep reading.

\n

Too Much?!: Don't worry it's ok, I completely understand. There is a simplified version of this seed which still allows web + mobile + desktop without the extra libraries and features like ngrx or analytics. Give this a shot: https://github.com/jlooper/angular-starter

\n

It's built with a lot of the same structure found here so things work the same but is definitely easier to start with if just getting into multi-platform development.

\n

Prerequisites

\n

Note you should have node v6.5.0 or higher and npm 3.10.3 or higher.

\n\n
npm install -g nativescript
\n

How to start

\n
# install the project's dependencies
$ npm install
# fast install (via Yarn, https://yarnpkg.com)
$ yarn install  # or yarn

# watches your files and uses livereload by default
$ npm start
# api document for the app
# npm run build.docs

# generate api documentation
$ npm run compodoc
$ npm run serve.compodoc

# to start deving with livereload site and coverage as well as continuous testing
$ npm run start.deving

# dev build
$ npm run build.dev
# prod build
$ npm run build.prod
\n

How to start with AoT

\n

Note that AoT compilation requires node v6.5.0 or higher and npm 3.10.3 or higher.

\n

In order to start the seed with AoT use:

\n
# prod build with AoT compilation, will output the production application in `dist/prod`
# the produced code can be deployed (rsynced) to a remote server
$ npm run build.prod.aot
\n

Mobile app

\n

The mobile app is provided via NativeScript, an open source framework for building truly native mobile apps.

\n

Setup

\n
npm install -g nativescript
\n

Dev Workflow

\n

You can make changes to files in src/client/app or nativescript/src/app folders. A symbolic link exists between the web src/client/app and the nativescript/src/app folder so changes in either location are mirrored because they are the same directory inside.

\n

Create .tns.html and .tns.scss NativeScript view files for every web component view file you have. You will see an example of the app.component.html as a NativeScript view file here.

\n

The root module for the mobile app is nativescript/src/native.module.ts: NativeModule.

\n

Run

\n
iOS:                      npm run start.ios   
iOS (device):             npm run start.ios.device

// or...

Android:                      npm run start.android
Android (device):             npm run start.android.device
\n\n

OR...

\n\n
Building with Webpack for release builds
\n

Create AoT builds for deployment to App Store and Google Play.

\n
Android:   npm run build.android
iOS:       npm run build.ios
\n

Desktop app

\n

The desktop app is provided via Electron, cross platform desktop apps\nwith JavaScript, HTML, and CSS.

\n

Develop

\n
Mac:      npm run start.desktop
Windows:  npm run start.desktop.windows
\n

Develop with livesync

\n
Mac:      npm run start.livesync.desktop
Windows:  npm run start.livesync.desktop.windows
\n

Release: Package Electron App for Mac, Windows or Linux

\n
Mac:      npm run build.desktop.mac
Windows:  npm run build.desktop.windows
Linux:    npm run build.desktop.linux
\n

Running tests

\n
$ npm test

# Development. Your app will be watched by karma
# on each change all your specs will be executed.
$ npm run test.watch
# NB: The command above might fail with a \"EMFILE: too many open files\" error.
# Some OS have a small limit of opened file descriptors (256) by default
# and will result in the EMFILE error.
# You can raise the maximum of file descriptors by running the command below:
$ ulimit -n 10480


# code coverage (istanbul)
# auto-generated at the end of `npm test`
# view coverage report:
$ npm run serve.coverage

# e2e (aka. end-to-end, integration) - In three different shell windows
# Make sure you don't have a global instance of Protractor

# npm install webdriver-manager <- Install this first for e2e testing
# npm run webdriver-update <- You will need to run this the first time
$ npm run webdriver-start
$ npm run serve.e2e
$ npm run e2e

# e2e live mode - Protractor interactive mode
# Instead of last command above, you can use:
$ npm run e2e.live
\n

You can learn more about Protractor Interactive Mode here

\n

Web configuration options

\n

Default application server configuration

\n
var PORT             = 5555;
var LIVE_RELOAD_PORT = 4002;
var DOCS_PORT        = 4003;
var APP_BASE         = '/';
\n

Configure at runtime

\n
npm start -- --port 8080 --reload-port 4000 --base /my-app/
\n

Environment configuration

\n

If you have different environments and you need to configure them to use different end points, settings, etc. you can use the files dev.ts or prod.ts in./tools/env/. The name of the file is environment you want to use.

\n

The environment can be specified by using:

\n
$ npm start -- --env-config ENV_NAME
\n

Currently the ENV_NAMEs are dev, prod, staging, but you can simply add a different file "ENV_NAME.ts". file in order to alter extra such environments.

\n

Tools documentation

\n

A documentation of the provided tools can be found in tools/README.md.

\n

Code organization overview

\n\n

How-tos

\n

i18n

\n\n

Logging

\n\n

General best practice guide to sharing code

\n

There’s actually only a few things to keep in mind when sharing code between web/mobile. The seed does take care of quite a few of those things but here’s a brief list:

\n\n

If you were thinking about doing: alert('Something happened!');, Don't.\nInstead inject WindowService:

\n
constructor(private win: WindowService) {}

public userAction() {
  if (success) {
    // do stuff
  } else {
    this.win.alert('Something happened!');
  }
}
\n

This ensures that when the same code is run in the {N} app, the native dialogs module will be used.

\n\n

The advice I like to give is:

\n
\n

Code with web mentality first. Then provide the native capability using Angular’s {provide: SomeWebService, useClass: SomeNativeService } during bootstrap.

\n
\n

There are some cases where you may want to use useValue vs. useClass, and other times may need to use useFactory. Read the Angular docs here to learn more about which you may need for your use case.

\n

How best to use for your project

\n

Setup

\n

NOTE: This should be done first before you start making any changes and building out your project.

\n
    \n
  1. git clone https://github.com/NathanWalker/angular-seed-advanced.git [your-project-name]
    2. \n
  2. cd [your-project-name]
    3. \n
  3. git remote set-url origin [your-project-git-repo] - This will setup origin properly.
    4. \n
  4. git remote add upstream https://github.com/NathanWalker/angular-seed-advanced.git - This will setup upstream properly to merge in upstream changes later.
    5. \n
  5. git push - Go ahead and push up the initial project.
    6. \n
  6. Now you have git setup and ready to develop your app as well as merge in upstream changes in the future.
    7. \n
  7. npm install (and all other usage docs in this README apply) - continue following instructions here.
    8. \n
  8. Create a new folder (or several sub-folders) for your app in src/client/app/shared to build your codebase out. Say your app is called AwesomeApp, then create awesomeapp and start building out all your components and services in there. Create other frameworks as you see fit to organize.
    9. \n
\n

Merging latest upstream changes

\n
    \n
  1. git fetch upstream - This will fetch latest upstream.
    2. \n
  2. git merge upstream/master - This will merge in upstream changes.
    3. \n
  3. Handle any conflicts to get latest upstream into your app.
    4. \n
  4. Continue building your app.
    5. \n
\n

You can read more about syncing a fork here.

\n

If you have any suggestions to this workflow, please post here.

\n

Dockerization

\n

The application provides full Docker support. You can use it for both development as well as production builds and deployments.

\n

How to build and start the dockerized version of the application

\n

The Dockerization infrastructure is described in the docker-compose.yml (respectively docker-compose.production.yml.\nThe application consists of two containers:

\n\n

Development build and deployment

\n

Run the following:

\n
$ docker-compose build
$ docker-compose up -d
\n

Now open your browser at http://localhost:5555

\n

Production build and deployment

\n

Run the following:

\n
$ docker-compose -f docker-compose.production.yml build
$ docker-compose -f docker-compose.production.yml up angular-seed   # Wait until this container has finished building, as the nginx container is dependent on the production build artifacts
$ docker-compose -f docker-compose.production.yml up -d angular-seed-nginx  # Start the nginx container in detached mode
\n

Now open your browser at http://localhost:5555

\n

Contributing

\n

Please see the CONTRIBUTING file for guidelines.

\n

Awesome Contributors

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"mgechev\"\"NathanWalker\"\"ludohenin\"\"d3viant0ne\"\"Shyam-Chen\"\"Nightapes\"
mgechevNathanWalkerludohenind3viant0neShyam-ChenNightapes
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"tarlepp\"\"karlhaas\"\"m-abs\"\"robstoll\"\"TheDonDope\"\"nareshbhatia\"
tarleppkarlhaasm-absrobstollTheDonDopenareshbhatia
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"hank-ehly\"\"kiuka\"\"vyakymenko\"\"jesperronn\"\"daniru\"\"aboeglin\"
hank-ehlykiukavyakymenkojesperronndaniruaboeglin
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"nulldev07\"\"eppsilon\"\"netstart\"\"sasikumardr\"\"gkalpak\"\"sfabriece\"
nulldev07eppsilonnetstartsasikumardrgkalpaksfabriece
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"JakePartusch\"\"ryzy\"\"markwhitfeld\"\"jvitor83\"\"fulls1z3\"\"ivannugo\"
JakePartuschryzymarkwhitfeldjvitor83fulls1z3ivannugo
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"pgrzeszczak\"\"treyrich\"\"natarajanmca11\"\"e-oz\"\"Kaffiend\"\"nosachamos\"
pgrzeszczaktreyrichnatarajanmca11e-ozKaffiendnosachamos
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"jerryorta-dev\"\"alllx\"\"LuxDie\"\"JayKan\"\"JohnCashmore\"\"larsthorup\"
jerryorta-devalllxLuxDieJayKanJohnCashmorelarsthorup
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"admosity\"\"irsick\"\"StefanKoenen\"\"llwt\"\"amedinavalencia\"\"odk211\"
admosityirsickStefanKoenenllwtamedinavalenciaodk211
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"troyanskiy\"\"tsm91\"\"hellofornow\"\"domfarolino\"\"VladimirMakaev\"\"juristr\"
troyanskiytsm91hellofornowdomfarolinoVladimirMakaevjuristr
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Karasuni\"\"turbohappy\"\"devanp92\"\"DmitriyPotapov\"\"evanplaice\"\"hAWKdv\"
Karasuniturbohappydevanp92DmitriyPotapovevanplaicehAWKdv
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"JunaidZA\"\"c-ice\"\"markharding\"\"ojacquemart\"\"patrickmichalina\"\"rajeev-tripathi\"
JunaidZAc-icemarkhardingojacquemartpatrickmichalinarajeev-tripathi
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"sanderbos1402\"\"Sn3b\"\"gotenxds\"\"yavin5\"\"divramod\"\"edud69\"
sanderbos1402Sn3bgotenxdsyavin5divramodedud69
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"idready\"\"kbrandwijk\"\"Yonet\"\"smac89\"\"Green-Cat\"\"ip512\"
idreadykbrandwijkYonetsmac89Green-Catip512
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"joshboley\"\"Marcelh1983\"\"Bigous\"\"robbatt\"\"TuiKiken\"\"alexweber\"
joshboleyMarcelh1983BigousrobbattTuiKikenalexweber
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"vakrilov\"\"allenhwkim\"\"Falinor\"\"amaltsev\"\"yassirh\"\"bbarry\"
vakrilovallenhwkimFalinoramaltsevyassirhbbarry
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"urmaul\"\"sonicparke\"\"brendanbenson\"\"brian428\"\"briantopping\"\"ckapilla\"
urmaulsonicparkebrendanbensonbrian428briantoppingckapilla
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"cadriel\"\"Cselt\"\"dszymczuk\"\"dmurat\"\"peah90\"\"dstockhammer\"
cadrielCseltdszymczukdmuratpeah90dstockhammer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"dwido\"\"dcsw\"\"totev\"\"EddyVerbruggen\"\"ericdoerheit\"\"ericli1018\"
dwidodcswtotevEddyVerbruggenericdoerheitericli1018
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Swiftwork\"\"fbascheper\"\"gsamokovarov\"\"koodikindral\"\"hpinsley\"\"NN77\"
SwiftworkfbaschepergsamokovarovkoodikindralhpinsleyNN77
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"isidroamv\"\"JohnnyQQQQ\"\"jeffbcross\"\"jlooper\"\"Jimmysh\"\"Drane\"
isidroamvJohnnyQQQQjeffbcrossjlooperJimmyshDrane
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"johnjelinek\"\"fourctv\"\"JunusErgin\"\"justindujardin\"\"lihaibh\"\"Brooooooklyn\"
johnjelinekfourctvJunusErginjustindujardinlihaibhBrooooooklyn
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"tandu\"\"inkidotcom\"\"mpetkov\"\"daixtrose\"\"Doehl\"\"MathijsHoogland\"
tanduinkidotcommpetkovdaixtroseDoehlMathijsHoogland
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"mjwwit\"\"oferze\"\"ocombe\"\"gdi2290\"\"typekpb\"\"peter-norton\"
mjwwitoferzeocombegdi2290typekpbpeter-norton
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"pavlovich\"\"philipooo\"\"pidupuis\"\"redian\"\"robertpenner\"\"Sjiep\"
pavlovichphilipooopidupuisredianrobertpennerSjiep
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"RoxKilly\"\"siovene\"\"SamVerschueren\"\"sclausen\"\"heavymery\"\"tjvantoll\"
RoxKillysioveneSamVerschuerensclausenheavymerytjvantoll
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"tapas4java\"\"gitter-badger\"\"tsvetomir\"\"valera-rozuvan\"\"vogloblinsky\"\"vincentpalita\"
tapas4javagitter-badgertsvetomirvalera-rozuvanvogloblinskyvincentpalita
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"ghys\"\"Yalrafih\"\"arioth\"\"arnaudvalle\"\"billsworld\"\"blackheart01\"
ghysYalrafihariotharnaudvallebillsworldblackheart01
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"butterfieldcons\"\"danielcrisp\"\"gforceg\"\"guilhebl\"\"jgolla\"\"omerfarukyilmaz\"
butterfieldconsdanielcrispgforcegguilhebljgollaomerfarukyilmaz
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"pbazurin-softheme\"\"ZuSe\"\"rossedfort\"\"ruffiem\"\"savcha\"\"s-f-a-g\"
pbazurin-softhemeZuSerossedfortruffiemsavchas-f-a-g
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"ultrasonicsoft\"\"taguan\"
ultrasonicsofttaguan
\n

License

\n

MIT

\n","downloadStats":{"lastDay":4,"lastWeek":29,"lastMonth":179}},"nativescript-advanced-webview":{"name":"nativescript-advanced-webview","version":"7.0.2","license":"MIT","readme":"\n

NativeScript Advanced Webview

\n\n

\nAn advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n

\n

Installation

\n

To install execute:

\n

NativeScript 7+:

\n
ns plugin add nativescript-advanced-webview
\n

NativeScript < 7:

\n
tns plugin add nativescript-advanced-webview@5.0.0
\n

Here is a video showing off Chrome CustomTabs in NativeScript.

\n

Android

\n

CustomTabs

\n

iOS

\n

SFSafariViewController

\n

Why use this? Because Perf Matters

\n

Android Comparison

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Android\"iOS
\n

Example

\n

TypeScript

\n

Initiate the service before the app starts e.g app.ts, main.ts

\n
import { init } from 'nativescript-advanced-webview';
init();
\n
import {
  AdvancedWebviewEvents,
  AdvancedWebViewOptions,
  init,
  NSAdvancedWebViewEventEmitter,
  openAdvancedUrl
} from 'nativescript-advanced-webview';

function whateverYouLike() {
  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadStarted, () => {
    console.log('LOAD STARTED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadFinished, () => {
    console.log('LOAD FINISHED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadError, () => {
    console.log('LOAD ERROR');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.Closed, () => {
    console.log('CLOSED');
  });

  const opts: AdvancedWebViewOptions = {
    url: 'https://nativescript.org',
    showTitle: true,
    toolbarColor: '#336699',
    toolbarControlsColor: '#fff'
  };

  openAdvancedUrl(opts);
}
\n

API

\n\n

AdvancedWebViewOptions Properties

\n\n

Events

\n\n
Demo App
\n\n","downloadStats":{"lastDay":92,"lastWeek":370,"lastMonth":1437}},"nativescript-ui-listview":{"name":"nativescript-ui-listview","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI ListView

\n\n

Overview

\n

The NativeScript UI ListView plugin is a virtualizing list component that provides the most popular features associated with scenarios where a list of items is used. All these features are embedded in one control with the idea to save developer time and provide better experience. The main features include:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-listview
\n

Documentation

\n

More information is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":258,"lastWeek":1398,"lastMonth":5681}},"vt-nativescript":{"name":"vt-nativescript","version":"8.1.6","license":"MIT","readme":"

\n \n \"NativeScript\"\n \n

\n

\"Build

\n

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile development and can be utilized in a number of diverse use cases.

\n

Setup and Installation

\n\n

Contribute

\n
$ git clone https://github.com/NativeScript/NativeScript.git
$ cd NativeScript

# setup workspace for development
$ npm run setup

# list all available commands to run
$ npm start
\n

We love you and your PR's 🤗. Please follow our contributing guide and see our code of governance to become as involved as you want to be.

\n

@nativescript/*

\n\n

Quick Links

\n\n

Other source repos

\n

Outside the source centralized in this repo, NativeScript consists of a few other source repos. Here are the major ones:

\n\n

License

\n

\"License\"

\n

Made with ❤️

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":5}},"nativescript-baidu-push-notifications":{"name":"nativescript-baidu-push-notifications","version":"1.0.6","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

Baidu push notifications plugin for NativeScript

\n

Baidu is an alternative solution of Google FCM in China. This plugin will add Baidu push notification (http://push.baidu.com).

\n

Prerequisites / Requirements

\n

For getting API key follow: http://push.baidu.com/doc/guide/join

\n

For iOS need to follow 第七章 iOS证书指导 from http://push.baidu.com/doc/ios/api to setup Baidu.

\n

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

\n

Installation

\n
tns plugin add nativescript-baidu-push-notifications
\n

Usage

\n

Your application ID is important here. Make sure that your Baidu API key & Application ID is correct.

\n

Import

\n

TS/Angular:

\n
import { IosRegistrationOptions, AndroidOptions } from \"nativescript-baidu-push-notifications\";
import * as pushPlugin from \"nativescript-baidu-push-notifications\";
\n

JavaScript:

\n
pushPlugin = require(\"nativescript-baidu-push-notifications\");
\n

Android

\n

If you want to test in emulator then use Genymotion otherwise Baidu will send error message. Better to test with a real device.

\n
let opt: AndroidOptions = {
    apiKey: 'My API Key',
    icon: \"res://simple_notification_icon\" // optional App_Resouces/Android/drawable
}

pushPlugin.androidRegister(opt, function (data) {

    console.log(\"Got register\");
    console.log(\"userId: \" + data.get(\"userId\"));
    console.log(\"channelId: \" + data.get(\"channelId\"));
    console.log(\"appid: \" + data.get(\"appid\"));
    console.log(\"requestId: \" + data.get(\"requestId\"));
    console.log(\"errorCode: \" + data.get(\"errorCode\"));

}, function (err) {
    console.log(\"not register\");
    console.dir(err)
});

pushPlugin.onMessageReceived(function (msg, customString) {
    console.log(\"got message\")
    console.log(msg);
    console.log(customString);
});

pushPlugin.onNotificationClicked(function (title, msg, customString) {
    console.log(\"clicked message\")
    console.log(title);
    console.log(msg);
    console.log(customString)
});

pushPlugin.onNotificationArrived(function (title, msg, customString) {
    console.log(\"onNotificationArrived\")
    console.log(title);
    console.log(msg);
    console.log(customString)
});
\n

iOS

\n

iOS will require a real device. In simulator baidu will send error message.

\n

First of all need to add this config in App_Resource/iOS/Info.plist file:

\n

Development Environment:

\n
<key>insBPushAPIKey</key>
<string>Your-Baidu-Key</string>
<key>isDevBPushEnvironment</key>
<true/>
\n

Production Environment:

\n
<key>insBPushAPIKey</key>
<string>Your-Baidu-Key</string>
<key>isDevBPushEnvironment</key>
<false/>
\n

JS code:

\n
// check details https://github.com/NativeScript/push-plugin#using-the-plugin-in-ios

let notificationSettings: IosRegistrationOptions = {
    badge: true,
    sound: true,
    alert: true,
    clearBadge: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
            identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },

    notificationCallbackIOS: function (message) {
        console.log(\"notificationCallbackIOS : \" + JSON.stringify(message));
        alert(message.alert)
    }
};

pushPlugin.iosRegister(notificationSettings,
    //success callback
    function (result: any) {
        //Register the interactive settings
        if (notificationSettings.interactiveSettings) {

            pushPlugin.registerUserNotificationSettings(function () {
                console.log(\"SUCCESSFULLY REGISTER BAIDU PUSH NOTIFICATION\")
                console.dir(result);

            }, function (err) {
                console.log(\"ERROR REGISTER PUSH NOTIFICATION: \" + JSON.stringify(err));
            })
        }
    },
    //error callback
    function (error) {
        console.log(\"REGISTER PUSH NOTIFICATION FAILED:\");
        console.dir(error);
    }
);

pushPlugin.areNotificationsEnabled(function (areEnabled) {
    console.log(\"Are Notifications enabled:\" + JSON.stringify(areEnabled));
});
\n

Please check demo project for more details.

\n

All Methods/Options

\n
export interface IosInteractiveNotificationAction {
    identifier: string;
    title: string;
    activationMode?: string;
    destructive?: boolean;
    authenticationRequired?: boolean;
    behavior?: string;
}
export interface IosInteractiveNotificationCategory {
    identifier: string;
    actionsForDefaultContext: string[];
    actionsForMinimalContext: string[];
}
export interface IosRegistrationOptions {
    badge: boolean;
    sound: boolean;
    alert: boolean;
    clearBadge: boolean;
    interactiveSettings: {
        actions: IosInteractiveNotificationAction[];
        categories: IosInteractiveNotificationCategory[];
    };
    notificationCallbackIOS: (message: any) => void;
}
export interface NSError {
    code: number;
    domain: string;
    userInfo: any;
}

export interface AndroidOptions {
    apiKey: string;
    icon?: string;
}

// Android
export declare function androidRegister(options: AndroidOptions, successCallback: any, errorCallback: any): void;
export declare function androidUnregister(onSuccessCallback: any, onErrorCallback: any): void;
export declare function onMessageReceived(callback: any): void;
export declare function onNotificationArrived(callback: any): void;
export declare function onNotificationClicked(callback: any): void;

// iOS
export declare function iosRegister(settings: IosRegistrationOptions, success: (token: any) => void, error: (NSError: any) => void): void;
export declare function registerUserNotificationSettings(success: () => void, error: (error: NSError) => void): void;
export declare function iosUnregister(success: (result: any) => void, error: (error: NSError) => void): void;
export declare function areNotificationsEnabled(done: (areEnabled: Boolean) => void): void;
\n

Tips:

\n\n

Credit

\n

Most of the work of this plugin has been followed/copied from this libaries:

\n

https://github.com/NativeScript/push-plugin

\n

https://www.npmjs.com/package/nativescript-baidu-push-ins

\n

https://www.npmjs.com/package/nativescript-baidu-push

\n

Special thanks to Phuc Bui and Quang Le Hong author of above 2 npm packages.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":42}},"nativescript-ng2-cli-magic":{"name":"nativescript-ng2-cli-magic","version":"1.0.0","license":"MIT","readme":"

\"Angular\n\"MIT\n\"Dependency \"devDependency

\n

\"nativescript-ng2-cli-magic\"

\n

Magically drop a NativeScript app into your existing Angular2 web application and reuse all your code.*

\n

You will be adding NativeScript views, but you already knew that.

\n\n

Install

\n
npm i nativescript-ng2-cli-magic --save
\n

Usage

\n
    \n
  1. Use Component from nativescript-ng2-cli-magic instead of @angular/core. Why?
    2. \n
  2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
    3. \n
  3. Run your truly native mobile app with NativeScript!
    4. \n
\n

Example

\n

A sample root component, app.component.ts:

\n
import {Component} from 'nativescript-ng2-cli-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {}
\n

Run for first time!

\n

You will need to have fully completed steps 1 and 2 above.

\n

Run your app in the iOS Simulator with:

\n
npm run start.ios
\n

Run your app in an Android emulator with:

\n
npm run start.android
\n

Welcome to the wonderfully magical world of NativeScript!

\n

How to create NativeScript views

\n

Based on our example above, assume app.component.html looks like this:

\n
<main>
  <div>This is my root component</div>
</main>
\n

You would then create a new file in app.component.tns.html like this:

\n
<StackLayout>
  <Label text=\"This is my root component\"></Label>
</StackLayout>
\n

You can also use platform specific views if desired with the platformSpecific Component metadata:

\n
import {Component} from 'nativescript-ng2-cli-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}
\n

Then you could create separate views for iOS and Android:

\n\n

You can learn more about NativeScript view options here.

\n

You can also install helpful view snippets for VS Code here or Atom Editor here.

\n

You can learn more here about how this setup works and why.

\n

Why different Component?

\n

Component from nativescript-ng2-cli-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

\n

The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

\n

You can see more elaborate use cases of this magic with angular2-seed-advanced.

\n

Special Note About AoT

\n

Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

\n
import { Component } from '@angular/core';

// just comment this out and use Component from 'angular/core'
// import { Component } from 'nativescript-ng2-cli-magic';

@Component({
  // etc.
\n

After doing the above, running AoT build will succeed. :)

\n

The Component from nativescript-ng2-cli-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ng2-cli-magic. Again this temporary inconvenience may be unnecessary in the future.

\n

Requirements

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":34,"lastMonth":110}},"@nstudio/nativescript-angular":{"name":"@nstudio/nativescript-angular","version":"17.0.1","license":"MIT","readme":"

Cross-platform (xplat) tools for Nx workspaces

\n

\n
\n

\"Build\n\"License\"\n\"NPM

\n
\n
\n

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

\n

Currently supported platforms

\n\n

Quickstart

\n
npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.
\n

Init workspace

\n

Install the @nx/js plugin.

\n
npm install @nx/js -D
\n

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install the tools:

\n
npm install @nstudio/xplat -D
\n

You are now ready to create apps:

\n
npx nx g @nstudio/xplat:app
\n

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

\n

App generation examples

\n

The additional app generators can be used as follows:

\n

Electron

\n

Electron app generator can use any web app in the workspace as it's target.

\n

If you don't have a web app yet, create one first:

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose web

\n
\n

You can now use the web app as the Electron target:

\n
npx nx g @nstudio/xplat:app desktop --target=web-sample
\n
\n

choose electron

\n
\n

Develop with:

\n
npm run start.electron.desktop
\n

Ionic

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose ionic

\n
\n

Develop in browser with:

\n
npx nx serve ionic-sample
\n

Build Ionic app:

\n
npx nx build ionic-sample
\n

A. Capacitor iOS - Prepare for development

\n
npm run prepare.ionic.sample.ios
\n

You can now open in Xcode for further development:

\n
npm run open.ionic.sample.ios
\n

B. Capacitor Android - Prepare for development

\n
npm run prepare.ionic.sample.android
\n

You can now open in Android Studio for further development:

\n
npm run open.ionic.sample.android
\n

NativeScript

\n
nx g @nstudio/xplat:app mobile
\n
\n

choose nativescript

\n
\n

A. iOS

\n
npx nx run nativescript-mobile:ios
\n

B. Android

\n
npx nx run nativescript-mobile:android
\n

Documentation

\n\n

Talks

\n\n

Recommended extra tooling

\n\n

Example repos for different scenarios

\n\n

Context

\n\n","downloadStats":{"lastDay":373,"lastWeek":1424,"lastMonth":6962}},"@nativescript-community/perms":{"name":"@nativescript-community/perms","version":"2.3.0","license":"Apache-2.0","readme":"\n\n

@nativescript-community/perms

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n An unified permissions API for NativeScript on iOS and Android.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/perms

\n

\n

API

\n

Permissions statuses

\n

Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Return valueNotes
authorizedUser has authorized this permission
deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
limitediOS - this means the permission is granted but with limitations
restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
undeterminedUser has not yet been prompted with a permission dialog
\n

Supported permissions types

\n

The current supported permissions are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeiOSAndroid
Locationlocation✔✔
Cameracamera✔✔
Microphonemicrophone✔✔
Photosphoto✔✔
Videosvideo❌✔ (api >= 33)
Audioaudio❌✔ (api >= 33)
Contactscontacts✔✔
Eventsevent✔✔
Bluetoothbluetooth✔✔(api >= 31)
Remindersreminder✔❌
Push Notificationsnotification✔❌
Background RefreshbackgroundRefresh✔❌
Speech RecognitionspeechRecognition✔❌
Media LibrarymediaLibrary✔❌
Motion Activitymotion✔❌
Storagestorage❌️✔
Phone CallcallPhone❌️✔
Read SMSreadSms❌️✔
Receive SMSreceiveSms❌️✔
Media LocationmediaLocation❌️✔(api >= 29)
Bluetooth ScanbluetoothScan❌️✔(api >= 31)
Bluetooth ConnectbluetoothConnect❌️✔(api >= 31)
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method NameArgumentsNotes
check()type- Returns a promise with the permission status. See iOS Notes for special cases
request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
checkMultiple(){[key:string]:Record<string, any>}- Accepts an array of permission types and returns a promise with an object mapping permission types to statuses
getTypes()none- Returns an array of valid permission types
openSettings()none- Switches the user to the settings page of your app
canOpenSettings()none- Returns a boolean indicating if the device supports switching to the settings page
\n

iOS Notes

\n\n
import { check as checkPermission, request as requestPermission } from '@nativescript-community/perms';

// example
checkPermission('location', { type: 'always' }).then(response => {
  this.setState({ locationPermission: response[0] })
})

requestPermission('location', { type: 'always' }).then(response => {
  this.setState({ locationPermission: response[0] })
})

requestPermission('notification', { type: ['alert', 'badge'] }).then(
  response => {
    this.setState({ notificationPermission: response[0] })
  },
)
\n\n

Example: If you need Contacts permission you have to add the key Privacy - Contacts Usage Description.

\n\"3cde3b44-7ffd-11e6-918b-63888e33f983\"\n

App Store submission disclaimer

\n

If you need to submit you application to the AppStore, you need to add to your\nInfo.plist all *UsageDescription keys with a string value explaining to the\nuser how the app uses this data. Even if you don't use them.

\n

So before submitting your app to the App Store, make sure that in your\nInfo.plist you have the following keys:

\n
<key>NSBluetoothPeripheralUsageDescription</key>
<string>Some description</string>
<key>NSCalendarsUsageDescription</key>
<string>Some description</string>
<key>NSCameraUsageDescription</key>
<string>Some description</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Some description</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Some description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Some description</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Some description</string>
<key>NSAppleMusicUsageDescription</key>
<string>Some description</string>
<key>NSMotionUsageDescription</key>
<string>Some description</string>
\n

This is required because during the phase of processing in the App Store\nsubmission, the system detects that you app contains code to request the\npermission X but don't have the UsageDescription key and then it rejects the\nbuild.

\n
\n

Please note that it will only be shown to the users the usage descriptions of\nthe permissions you really require in your app.

\n
\n

You can find more information about this issue in #46.

\n

Android Notes

\n\n

You might need to elevate the targetSdkVersion version in your\nbuild.gradle:

\n
android {
  compileSdkVersion 23 // ← set at least 23
  buildToolsVersion \"23.0.1\"  // ← set at least 23.0.0

  defaultConfig {
    minSdkVersion 16
    targetSdkVersion 23 // ← set at least 23
    // ...
\n

\n

Troubleshooting

\n

Q: iOS - App crashes as soon as I request permission

\n
\n

A: Starting with Xcode 8, you need to add permission descriptions. See iOS\nnotes for more details. Thanks to @jesperlndk\nfor discovering this.

\n
\n

Q: iOS - App crashes when I change permission from settings

\n
\n

A: This is normal. iOS restarts your app when your privacy settings change.\nJust google "iOS crash permission change"

\n
\n","downloadStats":{"lastDay":594,"lastWeek":2690,"lastMonth":11708}},"nativescript":{"name":"nativescript","version":"8.6.1","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":503,"lastWeek":4557,"lastMonth":28346}},"@global66/nativescript-urlhandler":{"name":"@global66/nativescript-urlhandler","version":"1.0.0","license":"MIT","readme":"

NativeScript URL Handler Plugin \"apple\" \"android\"

\n

\"Greenkeeper\n\"Build\n\"Donate

\n

\"npm\"Maintainability\"

\n

\"NPM\"

\n

\n
\n

Feel free to donate

\n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

\"Bitcoin\"

\n

Also via greenaddress

\n
\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});
\n
\n

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

\n
\n

Installation

\n
$ tns plugin add nativescript-urlhandler
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add nativescript-urlhandler@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/tns-core-modules/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":26}},"@nstudio/xplat":{"name":"@nstudio/xplat","version":"17.0.1","license":"MIT","readme":"

Cross-platform (xplat) tools for Nx workspaces

\n

\n
\n

\"Build\n\"License\"\n\"NPM

\n
\n
\n

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

\n

Currently supported platforms

\n\n

Quickstart

\n
npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.
\n

Init workspace

\n

Install the @nx/js plugin.

\n
npm install @nx/js -D
\n

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install the tools:

\n
npm install @nstudio/xplat -D
\n

You are now ready to create apps:

\n
npx nx g @nstudio/xplat:app
\n

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

\n

App generation examples

\n

The additional app generators can be used as follows:

\n

Electron

\n

Electron app generator can use any web app in the workspace as it's target.

\n

If you don't have a web app yet, create one first:

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose web

\n
\n

You can now use the web app as the Electron target:

\n
npx nx g @nstudio/xplat:app desktop --target=web-sample
\n
\n

choose electron

\n
\n

Develop with:

\n
npm run start.electron.desktop
\n

Ionic

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose ionic

\n
\n

Develop in browser with:

\n
npx nx serve ionic-sample
\n

Build Ionic app:

\n
npx nx build ionic-sample
\n

A. Capacitor iOS - Prepare for development

\n
npm run prepare.ionic.sample.ios
\n

You can now open in Xcode for further development:

\n
npm run open.ionic.sample.ios
\n

B. Capacitor Android - Prepare for development

\n
npm run prepare.ionic.sample.android
\n

You can now open in Android Studio for further development:

\n
npm run open.ionic.sample.android
\n

NativeScript

\n
nx g @nstudio/xplat:app mobile
\n
\n

choose nativescript

\n
\n

A. iOS

\n
npx nx run nativescript-mobile:ios
\n

B. Android

\n
npx nx run nativescript-mobile:android
\n

Documentation

\n\n

Talks

\n\n

Recommended extra tooling

\n\n

Example repos for different scenarios

\n\n

Context

\n\n","downloadStats":{"lastDay":539,"lastWeek":2152,"lastMonth":10485}},"@nativescript-community/arraybuffers":{"name":"@nativescript-community/arraybuffers","version":"1.1.3","license":"Apache-2.0","readme":"\n\n

@nativescript-community/arraybuffers

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Utility methods to work with Array Buffers in Nativescript
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/arraybuffers

\n

\n

API

\n

This is a simple Array Buffers helpers for Nativescript to use optimized arrays on Android\nIt exposes a few methods:

\n
type FloatArray = Float32Array | Float64Array | Uint8Array;
type TypedArray = FloatArray | Uint8Array;
function createArrayBuffer(length: number, useInts?: boolean): TypedArray;
function createNativeArray(length: number, useInts?: boolean): number[];
function pointsFromBuffer(typedArray: TypedArray, useInts?: boolean, canReturnBuffer?: boolean): number[] | TypedArray;
function arrayToNativeArray(array, useInts?: boolean, canReturnBuffer?: boolean): number[];
function nativeArrayToArray(array): number[];
function supportsDirectArrayBuffers(): boolean;
\n","downloadStats":{"lastDay":71,"lastWeek":371,"lastMonth":1711}},"@nativescript-community/ui-collectionview":{"name":"@nativescript-community/ui-collectionview","version":"5.3.2","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-collectionview

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-collectionview

\n

\n

API

\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
itemLoadingTriggered when generating an item in the CollectionView.
itemTapTriggered when the user taps on an item in the CollectionView.
loadMoreItemsTriggered when the generated items reached the end of the items property.
scrollTriggered on collectionview scroll.
scrollEndTriggered on collectionview scroll end.
itemReorderStartingTriggered when a reorder is starting. Changing the returnValue of the event data allows you to cancel it
itemReorderStartedTriggered when a reorder started.
itemReorderedTriggered when a reorder finished.
dataPopulatedTriggered when a refresh has been called.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
iosUICollectionViewGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.
androidandroid.support.v7.widget.RecyclerViewGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
itemsarray or ItemsSourceGets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method.
itemTemplatestringGets or sets the item template of the CollectionView.
rowHeightPercentLengthGets or sets the height for every row in the CollectionView.
colWidthPercentLengthGets or sets the width for every column in the CollectionView.
spanSizefunctionTriggered when an item is loaded. Returns the number of columns that the element should occupy taking into account colWidth when the device is vertical and rowHeight when horizontal. Parameters: (item, index: number).
scrollOffsetnumberGets the current scroll.
orientationvertical or horizontalSets the orientation of the CollectionView. Defaults to vertical.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
refresh()voidForces the CollectionView to reload all its items.
refreshVisibleItem()voidForces CollectionView to reload visible items.
scrollToIndex(index: number, animated: boolean = true)voidScrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated.
isItemAtIndexVisible(index: number)booleanReturns a boolean indicating whether the item is visible.
\n

\n

Usage

\n

You need to add xmlns:gv="@nativescript-community/ui-collectionview" to your page tag, and then simply use <gv:CollectionView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

\n

Simple Example

\n

Create a simple array of objects in your JS/TS file.

\n
const items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];
\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" loaded=\"pageLoaded\">
    <GridLayout>
        <gv:CollectionView items=\"items\" colWidth=\"50%\" rowHeight=\"100\">
            <gv:CollectionView.itemTemplate>
                <Label text=\"value\" verticalAlignment=\"center\"/>
            </gv:CollectionView.itemTemplate>
        </gv:CollectionView>
    </GridLayout>
</Page>
\n

Templates Example

\n

You can also have multiple templates the same way you add them in the builtin ListView control:

\n
<gv:CollectionView id=\"gv\" row=\"0\" class=\"cssClass\" items=\"items\" 
                colWidth=\"colWidth\" rowHeight=\"rowHeight\" itemTemplateSelector=\"templateSelector\"
                itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
    <gv:CollectionView.itemTemplates>
        <template key=\"odd\">
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                <Label text=\"value\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>

        <template key=\"even\">
            <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                <Label row=\"0\" text=\"value\" verticalAlignment=\"center\"/>
                <Label row=\"1\" text=\"value\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>
    </gv:CollectionView.itemTemplates>
</gv:CollectionView>
\n
export function templateSelector(item: any, index: number, items: any) {
    return index % 2 === 0 ? \"even\" : \"odd\";
}
\n

\n

Usage in Angular

\n

Import the module into your project.

\n
import { CollectionViewModule } from '@nativescript-community/ui-collectionview/angular';

@NgModule({
    imports: [
        CollectionViewModule,
    ],
})
\n

Simple Example

\n

Create a simple array of objects in your Typescript file.

\n
items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];
\n

Add the following to your component HTML.

\n
<CollectionView [items]=\"items\" colWidth=\"50%\" rowHeight=\"100\">
    <ng-template let-item=\"item\">
        <Label [text]=\"item.name\"></Label>
    </ng-template>
</CollectionView>
\n

Templates Example

\n

If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control. The only difference is that due to current limitations instead of using the nsTemplateKey directive you need to use the cvTemplateKey directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the CollectionView as well)

\n
<CollectionView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
    <ng-template cvTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>
</CollectionView>
\n

For a more complete example, look in the demo-ng directory.

\n

\n

Usage in Vue 3

\n

Register the plugin in your app.ts.

\n
import CollectionView from '@nativescript-community/ui-collectionview/vue3';

const app = createApp(YourComponent);
app.use(CollectionView);
app.start();
\n

Simple Example

\n

In your component, add the following to make a simple array of objects.

\n
<script setup lang=\"ts\">
import { ObservableArray } from '@nativescript/core';
import { ref } from \"nativescript-vue\";

const itemList = ref(new ObservableArray([
    { name: 'TURQUOISE', color: '#1abc9c' },
    { name: 'EMERALD', color: '#2ecc71' },
    { name: 'PETER RIVER', color: '#3498db' },
    { name: 'AMETHYST', color: '#9b59b6' },
    { name: 'WET ASPHALT', color: '#34495e' }
]));
</script>
\n

Then add the following XML to your component.

\n
<CollectionView :items=\"itemList\" colWidth=\"50%\" rowHeight=\"100\">
     <template #default=\"{ item }\">
        <StackLayout :backgroundColor=\"item.color\" >
            <Label :text=\"item.name\"/>
        </StackLayout>
    </template>
</CollectionView>
\n

For a more complete example, look in the demo-vue3 and demo-snippets/vue3 directory.

\n

\n

Usage in Vue 2

\n

Register the plugin in your app.ts.

\n
import CollectionView from '@nativescript-community/ui-collectionview/vue';
Vue.use(CollectionView);
\n

Simple Example

\n

In your component, add the following to make a simple array of objects.

\n
export default {
    // ...
    data() {
        const items = [
            { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
            { index: 1, name: 'EMERALD', color: '#2ecc71' },
            { index: 2, name: 'PETER RIVER', color: '#3498db' },
            { index: 3, name: 'AMETHYST', color: '#9b59b6' },
            { index: 4, name: 'WET ASPHALT', color: '#34495e' },
            { index: 5, name: 'GREEN SEA', color: '#16a085' },
            { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
            { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
            { index: 8, name: 'WISTERIA', color: '#8e44ad' },
            { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
        ];
        return {
            itemList: items
        };
    },
    // ...
};
\n

Then add the following XML to your component.

\n
<CollectionView
    :items=\"itemList\"
    colWidth=\"50%\"
    rowHeight=\"100\"
>
    <v-template>
        <Label :text=\"item.name\"></Label>
    </v-template>
</CollectionView>
\n

For a more complete example, look in the demo-vue directory.

\n

\n

Usage in Svelte

\n

Register the plugin in your app.ts.

\n
import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
CollectionViewElement.register();
\n

Simple Example

\n

In you component, add the following to import Svelte Templates and to create a simple array of objects.

\n
import { Template } from 'svelte-native/components';

const items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];
\n

Then add the following XML to your component:

\n
<collectionView 
    {items} 
    colWidth=\"50%\"
    rowHeight=\"100\"
>
    <Template let:item>
        <label text=\"{item.name}\" />
    </Template>
</collectionView>
\n

For a more complete example, look in the demo-svelte directory.

\n

\n

Usage in React

\n

Register the plugin in your app.ts.

\n
import { registerCollectionView } from '@nativescript-community/ui-collectionview/react';
registerCollectionView();
\n

Simple Example

\n

In your component, add the following code to create a simple list.

\n
import { CollectionView } from '@nativescript-community/ui-collectionview/react';

const items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];

interface Item {
    index: number;
    name: string;
    color: string;
}

const cellFactory = (item: Item) => (
    <label text={item.name} />
);

export function First() {
    return (
        <CollectionView items={items} colWidth=\"50%\" rowHeight=\"100\" cellFactory={cellFactory} width=\"100%\" height=\"100%\" />
    );
}
\n

For a more complete example, look in the demo-react directory.

\n

\n

Demos

\n

This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-collectionview
$ cd ui-collectionview
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":15,"lastWeek":446,"lastMonth":2448}},"@nativescript-community/text":{"name":"@nativescript-community/text","version":"1.5.33","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Usage

\n

For now this plugin only brings "shared" property for other plugins using verticalTextAlignment

\n","downloadStats":{"lastDay":218,"lastWeek":1068,"lastMonth":5508}},"@nativescript-community/ui-canvas":{"name":"@nativescript-community/ui-canvas","version":"4.6.7","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-canvas

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Implement Canvas into your NativeScript apps.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-canvas

\n

Usage

\n

The nativescript Canvas is based on the Android Canvas class.\nThe android API is actually a direct subclass with some Additions

\n

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:cv="@nativescript-community/ui-canvas" on the Page element

\n

XML

\n
<Page xmlns:cv=\"@nativescript-community/ui-canvas\">
    <StackLayout horizontalAlignment=\"center\">
        <cv:CanvasView width=\"100\" height=\"100\" draw=\"draw\"/>
   </StackLayout>
</Page>
\n

\n

NativeScript + Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { CanvasView } from '@nativescript-community/ui-canvas';
registerElement('CanvasView', () => CanvasView);
\n
<CanvasView width=\"100\" height=\"100\" (draw)=\"draw($event)></CanvasView>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';

Vue.use(CanvasPlugin);
\n
<CanvasView  width=\"100\" height=\"100\" @draw=\"draw\"/>
\n

\n

Draw Method

\n
function draw(event: { canvas: Canvas }) {
    const paint = new Paint();
    paint.setColor(new Color('black'));
    paint.strokeWidth = 10;
    canvas.drawRect(createRect(0, 0, 200, 100), paint);
}
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":70,"lastWeek":671,"lastMonth":3370}},"ngx-cc-template":{"name":"ngx-cc-template","version":"1.0.4","license":"MIT","readme":"

ngx-cc-template

\n

\"Build

\n

ngx-cc-template is an Angular module for generating forms in your application.

\n

Work still in progress - help will be appreciated. :)

\n

Features

\n\n

Installation

\n
npm install --save-dev ngx-cc-template\n
\n

Usage

\n
<ngx-cc-template [settings]="settings" (onSubmit)="onSubmit($event)"></ngx-cc-template>\n
\n

Where settings look like:

\n
settings = {\n  inputs: {\n    field: {\n      label: 'Field',\n      type: 'text',\n    },\n  },\n}\n
\n

and onSubmit:

\n
onSubmit(form) {\n  this.items.push(form);\n}\n
\n

Future features

\n\n

TODOs

\n\n

Thanks to

\n

Thanks to Ly Tran,\nI used this repo as a point of start to create an angular2+ module.

\n

Credits

\n

Crossbrowser testing sponsored by Browser Stack\n\"Browser

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":19}},"nativescript-vue-web":{"name":"nativescript-vue-web","version":"0.9.4","license":"MIT","readme":"

Nativescript-Vue-Web

\n

\"CircleCI\n\"npm\"\n\"Codecov\"\n\"NpmLicense\"\n\"Total\n\"Language

\n

\"GitHub\n\"npm\"\n\"Maintenance\"\n\"David\"\n\"David\"

\n

Web components for Nativescript-Vue

\n

WIP

\n

Remaining Items

\n\n
Project setup
\n
npm install
\n
Lints and fixes files
\n
npm run lint
\n
Run unit tests
\n
npm run test:unit
\n","downloadStats":{"lastDay":5,"lastWeek":40,"lastMonth":125}},"@nstudio/nativescript-loading-indicator":{"name":"@nstudio/nativescript-loading-indicator","version":"4.3.4","license":"Apache-2.0","readme":"\n

NativeScript Loading Indicator

\n\n

\nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation

\n

NativeScript 7+:

\n
npm install @nstudio/nativescript-loading-indicator
\n

NativeScript lower than 7:

\n
npm install @nstudio/nativescript-loading-indicator@3.0.x
\n

Screenshots

\n

iOS

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"iOS\"\"iOS\"\"iOS\"\"iOS\"
\n \n

\n

Android

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Android\"\"Android\"\"Android\"\"Android\"
\n

\n

Example

\n

TypeScript

\n
import {
  LoadingIndicator,
  Mode,
  OptionsCommon,
} from '@nstudio/nativescript-loading-indicator';

const indicator = new LoadingIndicator();

const options: OptionsCommon = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: someButton.ios, // Target view to show on top of (Defaults to entire window)
    square: false,
  },
};

indicator.show(options);

// after some async event maybe or a timeout hide the indicator
indicator.hide();
\n

javascript

\n
const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
  .LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

const loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
const options = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: android.view.View, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: UIView, // Target view to show on top of (Defaults to entire window)
  },
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Common Options

\n
export interface OptionsCommon {
  /**
   * Message in the loading indicator.
   */
  message?: string;

  /**
   * Details message in the loading indicator.
   */
  details?: string;

  /**
   * Color of the message text.
   */
  color?: string;

  /**
   * Background color of the loading indicator.
   */
  backgroundColor?: string;

  /**
   * Progress of the indicator when not using CustomView or Text Mode.
   */
  progress?: number;

  /**
   * Margin for the message/indicator to the edge of the bezel.
   */
  margin?: number;

  /**
   * Set true to allow user interaction.
   */
  userInteractionEnabled?: boolean;

  /**
   * Dim the background behind the indicator.
   */
  dimBackground?: boolean;

  /**
   * Hide bezel around indicator
   */
  hideBezel?: boolean;

  /**
   * The mode of the loading indicator.
   */
  mode?: Mode;

  /**
   * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
   */
  customView?: any;

  /**
   * iOS specific configuration options.
   */
  ios?: OptionsIOS;

  /**
   * Android specific configuration options.
   */
  android?: OptionsAndroid;
}
\n

Android Specific

\n
export interface OptionsAndroid {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: android.view.View;
  max?: number;
  progressNumberFormat?: string;
  progressPercentFormat?: number;
  progressStyle?: number;
  secondaryProgress?: number;
  cancelable?: boolean;
  cancelListener?: (dialog: any) => void;
  elevation?: number;
}
\n

iOS Specific

\n
export interface OptionsIOS {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: UIView;
  square?: boolean;
}
\n

Mode Enum

\n
export enum Mode {
  Indeterminate = 0,
  Determinate = 1,
  DeterminateHorizontalBar = 2,
  AnnularDeterminate = 3,
  CustomView = 4,
  Text = 5,
}
\n","downloadStats":{"lastDay":283,"lastWeek":1356,"lastMonth":6157}},"nativescript-geofence-manager":{"name":"nativescript-geofence-manager","version":"1.0.2","license":"Apache-2.0","readme":"

NativeScript Geofence Manager

\n

A NativeScript plugin to work with Geofences

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-geofence-manager

\n

This command automatically installs the necessary files, as well as stores nativescript-geofence-manager as a dependency in your project's package.json file.

\n

API

\n

Events

\n\n

Instance Properties

\n\n

Methods

\n\n

Usage (Core)

\n

You need to import the geofence manager in the start up file for the app. This setups the needed native event listeners.
\nIt is recommended to also subscribe to the manager's events in the main app file to ensure that when the device is awaken by the OS you will receive the notification. Note that this has to be done before calling run() for your app

\n
import { GeofenceManager, RegionChangedEventData } from \"nativescript-geofence-manager\";

GeofenceManager.on(GeofenceManager.enterRegionEvent, (args: RegionChangedEventData) => {
    console.log(\"GeofenceManager.enterRegionEvent\", args.region.identifier);
});

GeofenceManager.on(GeofenceManager.exitRegionEvent, (args: RegionChangedEventData) => {
    console.log(\"GeofenceManager.exitRegionEvent\", args.region.identifier);
});

Application.run({ moduleName: \"app-root\" });
\n

In order to receive event notifications even when the app is in the background you need to request always location usage permissions. This has some caveats deppending on what platform and for android even on what SDK version is your app running. You can check the code of the demo app to see what I found to work best, but you can change this to better suit your needs as needed.

\n

In order to start monitoring for a given region you can simply call the startMonitoring method and pass the circular region you want to monitor as well as if you want to monitor enter, exit, or both events. The identifier must be unique as if you call a second time startMonitoringRegion with the same identifier it will simply edit previous region.

\n
import { GeofenceManager } from \"nativescript-geofence-manager\";

GeofenceManager.startMonitoringRegion({
    identifier: \"Apple HQ\",
    center: { latitude: 37.330551, longitude: -122.030583 },
    radius: 30,
    notifyOnEntry: true,
    notifyOnExit: true,
});
\n

Once you are no longer intereseted in a region remember to call stopMonitoringRegion

\n
GeofenceManager.stopMonitoringRegion(\"Apple HQ\");
\n

Usage in other NativeScript flavors (Angular, Vue, etc.)

\n

Currently the plugin has not been tested nor made to support other NS flavors, since I'm not actively using those. If you are such a dev, I'm happily accepting PRs to support all the NS flavors ot there :)

\n

Caveats

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":23}},"@nativescript-community/ui-image":{"name":"@nativescript-community/ui-image","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-image

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-image

\n

\n

setup

\n
import imageModule = require(\"@nativescript-community/ui-image\");

//do this before creating any image view
imageModule.initialize({ isDownsampleEnabled: true });
\n

\n

API

\n

Events

\n

finalImageSet - arguments FinalEventData

\n

This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

\n
<@nativescript-community/ui-image:Img finalImageSet=\"onFinalImageSet\"/>
\n

JavaScript:

\n
function onFinalImageSet(args) {
    var imageModuleEventData = args;
    var img = imageModuleEventData.object;
}
exports.onFinalImageSet = onFinalImageSet;
\n

TypeScript:

\n
import {Img, FinalEventData } from \"@nativescript-community/ui-image\";

export function onFinalImageSet(args: FinalEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the fetch of the final image failed.

\n
<@nativescript-community/ui-image:Img failure=\"onFailure\"/>
\n

JavaScript:

\n
function onFailure(args) {
    var img = args.object;
}
exports.onFailure = onFailure;
\n

TypeScript:

\n
import {Img, FailureEventData } from \"@nativescript-community/ui-image\";

export function onFailure(args: FailureEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after any intermediate image has been set.

\n
<@nativescript-community/ui-image:Img intermediateImageSet=\"onIntermediateImageSet\"/>
\n

JavaScript:

\n
function onIntermediateImageSet(args) {
    var img = args.object;
}
exports.onIntermediateImageSet = onIntermediateImageSet;
\n

TypeScript:

\n
import {Img, IntermediateEventData } from \"@nativescript-community/ui-image\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the fetch of the intermediate image failed.

\n
<@nativescript-community/ui-image:Img intermediateImageFailed=\"onIntermediateImageFailed\"/>
\n

JavaScript:

\n
function intermediateImageFailed(args) {
    var img = args.object;
}
exports.intermediateImageFailed = intermediateImageFailed;
\n

TypeScript:

\n
import {Img, FailureEventData } from \"@nativescript-community/ui-image\";

export function intermediateImageFailed(args: FailureEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired before the image request is submitted.

\n
<@nativescript-community/ui-image:Img submit=\"onSubmit\"/>
\n

JavaScript:

\n
function onSubmit(args) {
    var img = args.object;
}
exports.onSubmit = onSubmit;
\n

TypeScript:

\n
import {Img, EventData } from \"@nativescript-community/ui-image\";

export function onSubmit(args: EventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the controller released the fetched image.

\n
<@nativescript-community/ui-image:Img release=\"onRelease\"/>
\n

JavaScript:

\n
function onRelease(args) {
    var img = args.object;
}
exports.onRelease = onRelease;
\n

TypeScript:

\n
import {Img, EventData } from \"@nativescript-community/ui-image\";

export function onRelease(args: EventData) {
    var img = args.object as Img;
}
\n

Event arguments

\n

Instances of this class are provided to the handlers of the finalImageSet.

\n
import {Img, FinalEventData, ImageInfo, AnimatedImage } from \"@nativescript-community/ui-image\";

export function onFinalImageSet(args: FinalEventData) {
    var info: ImageInfo  = args.imageInfo;
    var animatable: AnimatedImage = args.animatable;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
}
\n\n

Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

\n
import {Img, FailureEventData, imageModuleError } from \"@nativescript-community/ui-image\";

export function onFailure(args: FailureEventData) {
    var error: imageModuleError = args.error;
    var message: string = error.getMessage();
    var type: string = error.getErrorType();
    var fullError: string = error.toString();
}
\n\n

Instances of this class are provided to the handlers of the intermediateImageSet.

\n
import {Img, IntermediateEventData, ImageInfo } from \"@nativescript-community/ui-image\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var info: ImageInfo  = args.imageInfo;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
\n\n

Instances of this class are provided to the handlers of the release and submit.

\n
import {Img, EventData } from \"@nativescript-community/ui-image\";

export function onSubmit(args: EventData) {
    var img = args.object as Img;
}
\n

Properties

\n\n

String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

\n
<@nativescript-community/ui-image:Img src=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
\n\n

String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your Img instances.

\n
<@nativescript-community/ui-image:Img placeholderImageUri=\"~/placeholder.jpg\"/>
\n\n

String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the src is not successful.

\n
<@nativescript-community/ui-image:Img failureImageUri=\"~/failure.jpg\"/>
\n

Advanced optional attributes

\n

There are a couple of optional attributes that could be set on the Img instance to achieve advanced behaviors:

\n\n

String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the Img.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your Img instances.

\n
<@nativescript-community/ui-image:Img backgroundUri=\"~/image.jpg\"/>
\n\n

String value used by Img image scale type. This property can be set to:

\n

'center' - Performs no scaling.

\n

'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'centerInside' - Scales the child so that it fits entirely inside the parent.

\n

'fitCenter' - Scales the child so that it fits entirely inside the parent.

\n

'aspectFit' - Scales the child so that it fits entirely inside the parent.

\n

'fitStart' - Scales the child so that it fits entirely inside the parent.

\n

'fitEnd' - Scales the child so that it fits entirely inside the parent.

\n

'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

\n

'fill' - Scales width and height independently, so that the child matches the parent exactly.

\n

'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'aspectFill' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n
<@nativescript-community/ui-image:Img stretch=\"centerInside\"/>
\n\n

Number value used for the fade-in duration. This value is in milliseconds.

\n
<@nativescript-community/ui-image:Img fadeDuration=\"3000\"/>
\n\n

Number value greater than zero, used as input for the blur function. Larger value means slower processing. For example a value of 10 means that each pixel in the image will be blurred using all adjacent pixels up to a distance of 10.

\n
<@nativescript-community/ui-image:Img blurRadius=\"25\"/>
\n\n

Number value greater than zero, used to scale the image before applying the blur function. Larger value means faster processing. For example a value of 2 means that the image will be scaled by a factor of two before applying blur.

\n
<@nativescript-community/ui-image:Img blurDownSampling=\"2\"/>
\n\n

Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

\n

Note: In some layout scenarios it is necessary to set the verticalAlignment of the Img to 'top' or 'bottom' in order to "anchor" the img and achieve dynamic sizing.

\n
<@nativescript-community/ui-image:Img aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
\n\n

Number value used as the downsampled width of the imageModule drawable.

\n
<@nativescript-community/ui-image:Img decodeWidth=\"100\"/>
\n\n

Number value used as the downsampled width of the imageModule drawable.

\n
<@nativescript-community/ui-image:Img decodeHeight=\"100\"/>
\n\n

Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

\n
<@nativescript-community/ui-image:Img progressiveRenderingEnabled=\"true\"/>
\n\n

Boolean value used for showing or hiding the progress bar.

\n
<@nativescript-community/ui-image:Img showProgressBar=\"true\"/>
\n\n

String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

\n
<@nativescript-community/ui-image:Img progressBarColor=\"blue\"/>
\n\n

Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

\n
<@nativescript-community/ui-image:Img roundAsCircle=\"true\"/>
\n\n

Radius of the Top Left corner in

\n
<@nativescript-community/ui-image:Img roundTopLeftRadius=\"50\"/>
\n\n

Radius of the Top Right corner in

\n
<@nativescript-community/ui-image:Img roundTopRightRadius=\"50\"/>
\n\n

Radius of the Bottom Left corner in

\n
<@nativescript-community/ui-image:Img roundBottomLeftRadius=\"50\"/>
\n\n

Radius of the Bottom Right corner in

\n
<@nativescript-community/ui-image:Img roundBottomRightRadius=\"50\"/>
\n\n

Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

\n
<@nativescript-community/ui-image:Img autoPlayAnimations=\"true\"/>
\n\n

Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.

\n
<@nativescript-community/ui-image:Img tapToRetryEnabled=\"true\"/>
\n

Cache

\n

The @nativescript-community/ui-image {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

\n

'Refresh' the 'src'

\n

Not so rarely you may have a scenario where the actual image on your remote service from the src of the Img has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the src by calling the updateImageUri():

\n
// 'img' is the instance the 'Img' in the project.
img.updateImageUri();
\n

Clear everything from the cache

\n

Managing the caches in @nativescript-community/ui-image is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

\n
var imageModuleModel = require(\"@nativescript-community/ui-image\");

var imagePipeLine = imageModuleModel.getImagePipeline();
\n\n
imagePipeLine.clearCaches();
\n\n
imagePipeLine.clearMemoryCaches();
\n\n
imagePipeLine.clearDiskCaches();
\n

Evict all images with a specific URI from the cache

\n

If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (src). Evicting is done again via the ImagePipeline:

\n
var imageModuleModel = require(\"@nativescript-community/ui-image\");

var imagePipeLine = imageModuleModel.getImagePipeline();
\n\n
imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
\n

Manually shut down the native imageModule library

\n

In very very rare occasions the native Android imageModule library may experience strange memory leak issues, in such scenarios as a last resort you may want to "shut down" the library forcing all of the managed memory to possibly be released. You can do that by calling the shutDown function exposed by the @nativescript-community/ui-image module, one good application lifecycle event to call it inside may be in the exit event of the application:

\n
import * as app from \"application\";
import * as imageModuleModule from \"@nativescript-community/ui-image\";

if (app.android) {
    app.on(app.exitEvent, (args) => {
        imageModuleModule.shutDown();
    });
}
\n

\n

Flavors

\n

Using core

\n
<Page
    xmlns=\"http://www.nativescript.org/tns.xsd\" 
    xmlns:@nativescript-community/ui-image=\"@nativescript-community/ui-image\">
    <@nativescript-community/ui-image:Img width=\"250\" height=\"250\"
                                      src=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
</Page>
\n

Other flavors are presented in the demo apps that you can find under demo-snippets

\n

\n

Demos

\n

This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-image
$ cd ui-image
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":17,"lastWeek":110,"lastMonth":2414}},"nativescript-spotify-auth":{"name":"nativescript-spotify-auth","version":"2.0.6","license":"MIT","readme":"

Demo

\n

App: https://7jpsan.github.io/spotify-auth-demo/\nRepo: https://github.com/7jpsan/spotify-auth-demo/

\n

Spotify Auth - Angular 5

\n

This is a simple library that handles the authentication workflow for an angular 5 application interacting with angular api in a JS only environment, no backend service is required!

\n

Features (v2+):

\n\n

Coming next:

\n\n

Difference of this fork

\n

This is a fork/implementation of https://github.com/cyrilletuzi/angular-quickstart-lib which was forked from https://github.com/filipesilva/angular-quickstart-lib go ahead and read their work, it is awesome!

\n

Gotchas

\n

After a lot of time, using the @angular/router and/or RouterModule in a library is quite complicated... I have decided to remove it and expose the mechanisms to the consumer app.

\n

Requirements

\n

Make sure you have at least Node 6.9 and NPM 3.0 installed.

\n

Install

\n

npm install spotify-auth

\n

Usage

\n\n

That is it! The code should take care of the rest for you. Enjoy! There is a demo app here https://github.com/7jpsan/spotify-auth-demo.\nIgnore the one present in this repo. It was split, but never removed. Self TODO :)

\n

If anything goes wrong, please raise an issue!

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":9}},"ably-nativescript":{"name":"ably-nativescript","version":"1.2.1","license":"Apache-2.0","readme":"

Ably

\n

Ably is the platform that powers synchronized digital experiences in realtime. Whether attending an event in a virtual venue, receiving realtime financial information, or monitoring live car performance data – consumers simply expect realtime digital experiences as standard. Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime for more than 250 million devices across 80 countries each month. Organizations like Bloomberg, HubSpot, Verizon, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale. For more information, see the Ably /documentation.

\n

This is a Nativescript client library for Ably.

\n

This repo is a wrapper for the ably-js client library which introduces a dependency needed by Nativescript. See the ably-js README for usage details of the ably-js client library.

\n

For complete API documentation, see the Ably Realtime documentation.

\n

How to use this library

\n

Installation from npm

\n
npm install ably-nativescript\n
\n

Installation from tns

\n
tns plugin add ably-nativescript\n
\n

Usage

\n

For the realtime library:

\n
var realtime = require('ably-nativescript').Realtime;
\n

For the rest-only library:

\n
var realtime = require('ably-nativescript').Rest;
\n

API usage, tests, contributing, etc.

\n

See the ably-js repo.

\n

FAQs

\n

Is this repo actively maintained?

\n

Yes, this repo typically has very few recent commits because this repo doesn't do very much: it's a very thin wrapper around the ably-js repo.

\n

License

\n

Copyright (c) 2017 Ably Real-time Ltd, Licensed under the Apache License, Version 2.0. Refer to LICENSE for the license terms.

\n

\"npm\"

\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":112}},"@nativescript/local-notifications":{"name":"@nativescript/local-notifications","version":"6.1.1","license":"MIT","readme":"

@nativescript/local-notifications

\n

\"NPM\n\"Downloads\"

\n

A plugin that allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n

Contents

\n\n

Installation

\n
npm install @nativescript/local-notifications
\n

Usage

\n

If, on iOS 10+, notifications are not being received or the method addOnMessageReceivedCallback is not invoked, you can try wiring to the UNUserNotificationCenterDelegate

\n\n

Importing

\n
// either
import { LocalNotifications } from '@nativescript/local-notifications';
// or (if that doesn't work for you)
import * as LocalNotifications from '@nativescript/local-notifications';
\n

Requesting For Permissions

\n

Automatically, the schedule() method prompts the user for the permission. For the manual permission request, use the requestPermission method:

\n
// then use it as:
LocalNotifications.requestPermission();
\n

Scheduling A Notification

\n

To schedule a notificaton, call the schedule() method and pass it an array of the notification objects with the ScheduleOptions properties.

\n
LocalNotifications.schedule([
\t{
\t\tid: 1, // generated id if not set
\t\ttitle: 'The title',
\t\tbody: 'Recurs every minute until cancelled',
\t\tticker: 'The ticker',
\t\tcolor: new Color('red'),
\t\tbadge: 1,
\t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
\t\tgroupSummary: 'Summary of the grouped messages above', //android only
\t\tongoing: true, // makes the notification ongoing (Android only)
\t\ticon: 'res://heart',
\t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
\t\tthumbnail: true,
\t\tinterval: 'minute',
\t\tchannel: 'My Channel', // default: 'Channel'
\t\tsound: isAndroid ? 'customsound' : 'customsound.wav',
\t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
\t},
]).then(
\t(scheduledIds) => {
\t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
\t},
\t(error) => {
\t\tconsole.log('scheduling error: ' + error);
\t}
);
\n

Getting IDs Of All The Scheduled Notifications

\n

To get the IDs of all the scheduled notifications, call the getScheduledIds() method:

\n
LocalNotifications.getScheduledIds().then((ids: number[]) => {
\tconsole.log(\"ID's: \" + ids);
});
\n

Cancelling a Scheduled Notification

\n

To cancel a scheduled notification, use the cancel() method.

\n
LocalNotifications.cancel(5).then((foundAndCanceled: boolean) => {
\tif (foundAndCanceled) {
\t\tconsole.log(\"OK, it's gone!\");
\t} else {
\t\tconsole.log('No ID 5 was scheduled');
\t}
});
\n

Listening to A Notification Tap Event

\n

Tapping a notification in the notification center will launch your app.

\n

Note that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n

To handle a notification tap, call the addMessageReceivedCallback() method and pass it a callback function. The callback receives a notification object of type ReceivedNotification.

\n
LocalNotifications.addOnMessageReceivedCallback((notification) => {
\tconsole.log('ID: ' + notification.id);
\tconsole.log('Title: ' + notification.title);
\tconsole.log('Body: ' + notification.body);
}).then(() => {
\tconsole.log('Listener added');
});
\n

API

\n

schedule()

\n
scheduledNotificationsIDs: Array<number> = await LocalNotifications.schedule(scheduleOptions)
\n

Schedules the specified scheduleOptions notification(s), if the user has granted the permission. If the user has not been prompted for the permission, it prompts and schedule the notifcation(s) if permission is granted. For manual permission request, use the requestPermission() method.

\n
\n

ScheduleOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idnumberOptional: A unique notification identifier. Will be generated if not set.
titlestringOptional: The title that is shown in the statusbar.
subtitlestringOptional: Shown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodystringOptional: The text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't launch.
colorstringOptional: (Android-only)Custom color for the notification icon and title that will be applied when the notification center is expanded.
bigTextStylebooleanOptional: (Android-only)Allow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false.
groupedMessagesArray<string>Optional: An array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set .
groupSummarystringOptional: An inboxStyle notification summary. Default empty
tickerstringOptional: On Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atDateOptional: A JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgebooleanOptional: On iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundstringOptional: Notification sound. For custom notification sound, copy the file to App_Resources/iOS and App_Resources/Android/src/main/res/raw. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalScheduleIntervalOptional: Sets to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
iconstringOptional: On Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below). See icon and silhouetteIcon Options (Android-only) for more details
silhouetteIconstringOptional: Same as icon, but should be an alpha-only image and will be used in Android >= Lollipop (21). Defaults to res://ic_stat_notify_silhouette, or the app icon if not present. See icon and silhouetteIcon Options (Android-only) for more details
imagestringOptional: A url of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
thumbnailboolean | stringOptional: (Android-only)Custom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. Default not set.
ongoingbooleanOptional: (Android-only) Sets whether the notification is ongoing. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.
channelstringOptional: Sets the channel name for Android API >= 26, which is shown when the user longpresses a notification. Default is Channel.
forceShowWhenInForegroundbooleanOptional: Indicates whether to always show the notification. On iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
prioritynumberOptional: Overrides forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details. Default is 0.
actionsNotificationActionOptional: An array of NotificationAction objects for adding buttons or text input to a notification with which the use can interact.
notificationLedboolean | ColorOptional: (Android Only) Indicates whether to enable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device).Default not set.
\n

NotificationAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringAn id so you can easily distinguish your actions.
type'button' | 'input'The type of the view.
titlestringOptional: The label for type = button.
launchbooleanOptional: Launch the app when the action completes. This will only work in apps targeting Android 11 or lower (target SDK < 31).
submitLabelstringOptional: The submit button label for type = input.
placeholderstringOptional: The placeholder text for type = input.
choicesArray<string>Optional: (Android-only) For type = 'input'
editablebooleanOptional: (Android-only) For type = 'input'. Defaults to true
\n

icon and silhouetteIcon Options (Android-only)

\n

These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

\n

These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.
\n

Source: Density Qualifier Docs

\n

addOnMessageReceivedCallback()

\n
LocalNotifications.addOnMessageReceivedCallback((notification: ReceivedNotification) => {
\t//Handle the received notification
}).then(() => {
\tconsole.log('Listener added');
});
\n

Responds to a notification tap event.

\n

ReceivedNotification

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idnumberOptional: The notification id.
foregroundbooleanOptional: Whether the app was in foreground when the notification was received
titlestringOptional: The notification title.
bodystringOptional: The notification body.
eventstringOptional: Whether the response was through a button or an input
responsestringOptional: The user's response to the notification, either what they input in the text field or the option chosen from the button.
payloadanyOptional: The data sent to the user with the notification
\n
\n

addOnMessageClearedCallback()

\n
LocalNotifications.addOnMessageClearedCallback((notification: ReceivedNotification) => {
\t//Handle the received notification
}).then(() => {
\tconsole.log('Listener added');
});
\n

Responds to a notification clear event.\nSee ReceivedNotification for more info.

\n
\n

getScheduledIds()

\n
LocalNotifications.getScheduledIds().then((ids: number[]) => {
\tconsole.log(\"ID's: \" + ids);
});
\n

Returns the ids of all the scheduled notifications.

\n
\n

cancel()

\n
LocalNotifications.cancel(id).then((foundAndCanceled: boolean) => {
\tif (foundAndCanceled) {
\t\t//
\t} else {
\t\t//
\t}
});
\n

Cancels the scheduled notification with the specified id.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
idnumberThe of the scheduled notification to be cancelled.
\n
\n

cancelAll()

\n
LocalNotifications.cancelAll();
\n

Cancels all the scheduled notifications.

\n
\n

requestPermission()

\n
LocalNotifications.requestPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n

Requests for the user's permissions for the app to send her notifications.\nIf the permission has already been granted, it returns true. Otherwise, it returns false.

\n
\n

hasPermission()

\n
LocalNotifications.hasPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n

Checks if the application has the permission to notify the user.

\n","downloadStats":{"lastDay":228,"lastWeek":1100,"lastMonth":4970}},"@nativescript-community/ui-material-tabs":{"name":"@nativescript-community/ui-material-tabs","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Tabs

\n

Material Design's Tabs component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

\n
ns plugin add @nativescript-community/ui-material-tabs
\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-tabs" on the Page element.

\n

XML

\n
<Page xmlns:mdt=\"@nativescript-community/ui-material-tabs\">
    <mdt:Tabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <mdt:TabStrip>
            <mdt:TabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </TabStripItem>
            <mdt:TabStripItem> class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </mdt:TabStripItem>
            <mdt:TabStripItem> class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </mdt:TabStripItem>
        </mdt:TabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <mdt:TabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </mdt:TabContentItem>
        <mdt:TabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </mdt:TabContentItem>
        <mdt:TabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </mdt:TabContentItem>
    </mdt:Tabs>
</Page>
\n

CSS

\n
Tabs.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 18;
}

TabStripItem.tabstripitem-active {
    background-color: teal;
}

TabStripItem.tabstripitem-active:active {
    background-color: yellowgreen;
}

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
Tabs MDTabStrip {
    highlight-color: red;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-tabs/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTabsModule,
        ...
    ],
    ...
})
\n
    <MDTabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDTabs>
\n

\n

NativeScript + Vue

\n
import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';

Vue.use(TabsPlugin);
\n
<MDTabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDTabs>
\n

\n

NativeScript + React

\n

First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

\n
import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerTabs } from '@nativescript-community/ui-material-tabs/react';

registerTabNavigationBase();
registerTabs();
\n

Normally it would be best to use this component via the tabNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:

\n
import * as React from 'react';

export function Tabs() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    return (
        <tabs
            selectedIndex={selectedIndex}
            onSelectedIndexChanged={(args) => {
                setSelectedIndex(args.newIndex);
            }}
            style={{ backgroundColor: 'orange' }}
        >
            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
            <tabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Home</label>
                    <image nodeRole=\"image\" src=\"font://&#xf015;\" className=\"fas\" />
                </tabStripItem>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Account</label>
                    <image nodeRole=\"image\" src=\"font://&#xf007;\" className=\"fas\" />
                </tabStripItem>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Search</label>
                    <image nodeRole=\"image\" src=\"font://&#xf00e;\" className=\"fas\" />
                </tabStripItem>
            </tabStrip>

            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'blue' }}>
                    <label style={{ color: 'white' }}>Home Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'cyan' }}>
                    <label style={{ color: 'black' }}>Account Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'magenta' }}>
                    <label style={{ color: 'black' }}>Search Page</label>
                </gridLayout>
            </tabContentItem>
        </tabs>
    );
}
\n

Troubleshooting

\n

If you see an error like this when writing e.g. <tabs> into your JSX:

\n
\n

Property 'tabs' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

\n
\n

Make sure that you have:

\n
    \n
  1. Installed the react-nativescript npm module.
    2. \n
  2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
    3. \n
  3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
    4. \n
  4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerTabs() methods).
    5. \n
  5. If using Visual Studio Code, option-click the import @nativescript-community/ui-material-tabs/react to jump to the file; opening the file will force it to load its provided typings.
    6. \n
\n

API

\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
itemsArrayGets or sets the items of the BottomNavigation.
selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
tabStripTabStripGets or sets the tab strip of the BottomNavigation.
tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
selectedIndexChangedEmitted when the selectedIndex property is changed.
loadedEmitted when the view is loaded.
unloadedEmitted when the view is unloaded.
layoutChangedEmitted when the layout bounds of a view changes due to layout processing.
\n","downloadStats":{"lastDay":334,"lastWeek":1658,"lastMonth":8985}},"@nativescript-community/ui-material-textfield":{"name":"@nativescript-community/ui-material-textfield","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Text field

\n

Material Design's Text field component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield" on the Page element.

\n

XML

\n
<Page xmlns:mdt=\"@nativescript-community/ui-material-textfield\">
    <StackLayout horizontalAlignment=\"center\">
        <mdt:TextField text=\"raised textfield\"/>
        <mdt:TextField variant=\"flat\" text=\"flat textfield\"/>
        <mdt:TextField variant=\"text\" text=\"text textfield\"/>
        <mdt:TextField elevation=\"5\" rippleColor=\"red\" text=\"raised custom textfield\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdtextfield {
    ripple-color: blue;
    elevation: 4;
    stroke-color: blue;             /* the border color when active */
    stroke-inactive-color: green;   /* the border color when inactive */
    floating-color: blue;           /* the floating placeholder color when active */
    floating-inactive-color: green; /* the floating placeholder color when inactive */
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialTextFieldModule } from \"@nativescript-community/ui-material-textfield/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTextFieldModule,
        ...
    ],
    ...
})
\n
<MDTextField  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
        (textChange)=\"onTextChange($event)\"></MDTextField>
\n

\n

NativeScript + Vue

\n
import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';

Vue.use(TextFieldPlugin);
\n
<MDTextField helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
        @textChange=\"onTextChange\"/>
\n

Also, you can bind the text to some instance data using the v-model directive:

\n
<MDTextField v-model=\"value\" />
\n

API

\n

Attributes

\n

Inherite from NativeScript TextField so it already has all the same attributes.

\n\n

An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield

\n\n

An attribute to set the error color of the textfield.

\n\n

An attribute to set the helper text of the textfield.

\n\n

A boolean attribute to set the floating state of the textfield.

\n","downloadStats":{"lastDay":42,"lastWeek":472,"lastMonth":5072}},"@bradmartin/nativescript-urlhandler":{"name":"@bradmartin/nativescript-urlhandler","version":"2.0.1","license":"MIT","readme":"

NativeScript URL Handler Plugin \"apple\" \"android\"

\n

\"Greenkeeper\n\"Build\n\"Donate

\n

\"npm\"Maintainability\"

\n

\"NPM\"

\n

\n
\n

Feel free to donate

\n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

\"Bitcoin\"

\n

Also via greenaddress

\n
\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});
\n
\n

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

\n
\n

Installation

\n
$ tns plugin add nativescript-urlhandler
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add nativescript-urlhandler@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/tns-core-modules/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n

HTTPS intent

\n

This lib also support HTTPS intent, you can define a host for it. Here is an example on Android with both custom & HTTPS scheme :

\n
<intent-filter>
  <action android:name=\"android.intent.action.VIEW\" />
  <category android:name=\"android.intent.category.DEFAULT\" />
  <category android:name=\"android.intent.category.BROWSABLE\" />
  <data android:scheme=\"my-app\" />
</intent-filter>
<intent-filter>
  <action android:name=\"android.intent.action.VIEW\" />
  <category android:name=\"android.intent.category.DEFAULT\" />
  <category android:name=\"android.intent.category.BROWSABLE\" />
  <data android:scheme=\"https\" android:host=\"my-website.com\" />
</intent-filter>
\n

Let's suppose your put a <a href="https://my-website.com/check-our-app">Check our mobile app</a> link on your website to open your mobile app.\nBecause https intent is also linked to the mobile browser, when user will tap on the link, a popup will appears to let the user choose between the browser and your mobile app to open this link.

\n

In the other hand, if you setup a android:scheme="my-app" that only your app react to, putting a <a href="my-app://check-our-app">Check our mobile app</a> link like this on your website will avoid this popup and open your mobile app directly.

\n","downloadStats":{"lastDay":85,"lastWeek":426,"lastMonth":1695}},"@nativescript-community/ui-label":{"name":"@nativescript-community/ui-label","version":"1.3.8","license":"Apache-2.0","readme":"

# NativeScript Label widget

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript Label widget. It is a direct replacement for the {N} Label widget.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add @nativescript-community/ui-label

\n

This command automatically installs the necessary files, as well as stores nativescript-community/ui-label as a dependency in your project's package.json file.

\n

Configuration

\n

It works exactly the same way as the {N} plugin. However it adds a few improvements

\n

Angular

\n
import { registerElement } from '@nativescript/angular';

registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
\n
<!-- Normal Label Usage -->
<HTMLLabel html=\"<b>Hello, I am BOLD!></b>\" fontFamily=\"OpenSans\" fontSize=\"16\" margin=\"2 5 5 5\" textWrap=\"true\"></HTMLLabel>

<!-- Clickable Link Usage -->
<HTMLLabel
    [html]=\"someBindedUrl\"
    linkColor=\"#336699\"
    linkUnderline=\"true\"
    (linkTap)=\"onLinkTap($event)\"
    fontFamily=\"OpenSans\"
    fontSize=\"16\"
    margin=\"2 5 5 5\"
    textWrap=\"true\"
></HTMLLabel>
\n
import { Utils } from '@nativescript/core';

export someComponentClass() {
    someBindedUrl = '<a href=\\\"https://youtube.com\\\">Open Youtube.com</a>'

    // Event binded to the linkTap function on the HTMLLabel
    onLinkTap(args) {
        const link = args.link;
        // expected to be https://youtube.com from the binded `<a>` tag href value
        // be sure to encodeURIComponent of any query string parameters if needed.
        Utils.openUrl(link);
    }
}

\n

Vue

\n
import Vue from 'nativescript-vue';

Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
\n
<!-- Normal Label Usage -->
<HTMLLabel
    fontSize=\"50\"
    fontFamily=\"Cabin Sketch,res/cabinsketch\"
    width=\"100%\"
    paddingTop=\"5\"
    color=\"#336699\"
    textWrap=\"true\"
    :html=\"someBindedValue\"
    verticalAlignment=\"top\"
/>

<!-- Clickable Link Usage -->
<HTMLLabel
    html=\"<a href='https://youtube.com'>Open Youtube.com</a>\"
    linkColor=\"pink\"
    linkUnderline=\"false\"
    @linkTap=\"onLinkTap($event)\"
    fontFamily=\"OpenSans\"
    fontSize=\"16\"
    margin=\"2 5 5 5\"
    textWrap=\"true\"
></HTMLLabel>
\n
<script lang=\"ts\">
import Vue from 'vue';

export default Vue.extend({
    data() {
        return {
            someBindedValue: \"<p>This is really powerful. <b>Amazing to be quite honest</b></p>\",
        };
    },
    methods: {
        // event binded to the linkTap on the HTMLLabel
        onLinkTap(args) {
            Utils.openUrl(args.link);
        },
    },
    beforeDestroy() {},
});
</script>
\n

Properties

\n\n

Improvements

\n\n","downloadStats":{"lastDay":172,"lastWeek":766,"lastMonth":4246}},"@nativescript-community/gesturehandler":{"name":"@nativescript-community/gesturehandler","version":"2.0.17","license":"Apache-2.0","readme":"\n\n

@nativescript-community/gesturehandler

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Declarative API exposing platform native touch and gesture system to NativeScript.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/gesturehandler

\n

\n

API

\n

We need to do some wiring when your app starts, so open app.ts and add this before creating any View/App/Frame:

\n
TypeScript
\n
import { install } from \"@nativescript-community/gesturehandler\";
install();
\n

You create a gesture handler using something like this:

\n
import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler';


function onGestureTouch(args: GestureTouchEventData) {
    const { state, extraData, view } = args.data;
    view.translateX = extraData.translationX;
    view.translateY = extraData.translationY;
}
function onGestureState(args: GestureStateEventData) {
    const { state, prevState, extraData, view } = args.data;
    console.log('onGestureState', state, prevState, view, extraData);
}
const manager = Manager.getInstance();
const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
    shouldCancelWhenOutside: false
});
gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
gestureHandler.attachToView(view);
\n

Right now you must not forget to store the gestureHandler somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.

\n

Now about the API. All the gestures for the react counterpart exist with the same options and the same event extraData.

\n

\n

GestureRootView

\n

For the gestures to work correctly we need a root view which knows how to handle the gestures.\nIf using Page (thus Frame) you don't need to do anything.\nIn case you don't (drawer root view, modals, ...) then you can wrap your views in a GestureRootView which inherits GridLayout

\n

\n

Overriding Nativescript gestures

\n

This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes tap and longpress

\n

To do that

\n

\n

Credits

\n

This is a port of react-native-gesturehandler.\nThe source is based on the source code by Krzysztof Magiera. Dont hesitate to go and thank him for his work!

\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":90,"lastWeek":495,"lastMonth":2436}},"@nativescript-community/sqlite":{"name":"@nativescript-community/sqlite","version":"3.4.2","license":"Apache-2.0","readme":"\n\n

@nativescript-community/sqlite

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n SQLite for Nativescript
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/sqlite

\n

\n

Usage

\n

You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

\n
import { openOrCreate, deleteDatabase } from \"@nativescript-community/sqlite\";

const sqlite = openOrCreate(\"path/to/db\");
sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
sqlite.transaction(cancelTransaction => {
    // Calling cancelTransaction will rollback all changes made to db
    names.forEach((name, id) =>
        sqlite.execute(
            \"INSERT INTO names (id, name) VALUES (?, ?)\",
            [id, name]
        )
    );
});
\n","downloadStats":{"lastDay":153,"lastWeek":678,"lastMonth":2647}},"@nativescript-community/ui-lottie":{"name":"@nativescript-community/ui-lottie","version":"5.0.6","license":"MIT","readme":"\n

nativescript-community/ui-lottie

\n\n

NativeScript plugin to expose Airbnb Lottie for awesome animations.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"Action\n \n \n \"stars\"\n \n \n \"donate\"\n \n

\n

Changelog

\n

All notable changes to this project will be documented in the changelog.

\n

Demo Screen

\n

The .gif does not do the fluid animations justice

\n

\"LottieView\"

\n

Installation

\n

To install execute:

\n
tns plugin add @nativescript-community/ui-lottie
\n

Usage

\n

NativeScript (Core)

\n

XML

\n
<Page
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:Lottie=\"@nativescript-community/ui-lottie\" navigatingTo=\"navigatingTo\" class=\"page\">
    <StackLayout>
        <Lottie:LottieView src=\"PinJump.json\" height=\"130\" loop=\"true\" autoPlay=\"true\" loaded=\"yourLoadedEvent\" />
    </StackLayout>
</Page>
\n

TS

\n
import { LottieView } from \"@nativescript-community/ui-lottie\";

public yourLoadedEvent(args) {
    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
}
\n
\n

NativeScript Angular

\n

Module

\n

First you need to include the NativeScriptLottieModule in your app.module.ts

\n
import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';

@NgModule({
    imports: [
        NativeScriptLottieModule
    ],
    ...
})
\n

XML

\n
<StackLayout>
    <LottieView width=\"100\" height=\"150\" [src]=\"src\" [loop]=\"loop\" [autoPlay]=\"autoPlay\" (loaded)=\"lottieViewLoaded($event)\">     </LottieView>
</StackLayout>
\n

Component

\n
import { Component } from '@angular/core';
import { LottieView } from '@nativescript-community/ui-lottie';

@Component({
  templateUrl: 'home.component.html',
  moduleId: module.id
})
export class HomeComponent {
  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = [
      'Mobilo/A.json',
      'Mobilo/D.json',
      'Mobilo/N.json',
      'Mobilo/S.json'
    ];
    this.src = this.animations[0];
  }

  lottieViewLoaded(event) {
    this._lottieView = <LottieView>event.object;
  }
}
\n
\n

NativeScript Vue

\n

Bootstrap

\n

If you want to use this plugin with Vue, do this in your app.js or main.js:

\n
import LottieView from '@nativescript-community/ui-lottie/vue';

Vue.use(LottieView);
\n

This will install and register LottieView component to your Vue instance and now you can use the plugin.

\n

Component

\n
<template>
    <Page class=\"page\">
        <StackLayout>
            <LottieView height=\"130\" src=\"PinJump.json\" :loop=\"true\" :autoPlay=\"true\" @loaded=\"lottieViewLoaded\"></LottieView>
        </StackLayout>
    </page
</template>

<script>
    export default {
        methods: {
            lottieViewLoaded(args) {
                this._lottieView = args.object;
            },
        },
        data() {
            return {
                _lottieView: null,
            }
        }
    };
</script>
\n
\n

Assets

\n

:fire: You can find animations in the sample-effects folder.

\n

Android

\n

Place your animation files in the NS app's app/App_Resources/Android/src/main/assets folder.

\n

Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

\n

iOS

\n

Place your animations files in your app/App_Resources/iOS/ folder.

\n

Properties (bindable)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
autoPlaybooleanfalseStart LottieView animation on load if true.
loopbooleanfalseLoop continuously animation if true.
srcstringnullAnimation path to .json file.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
completionBlock(boolean) => voidnullCompletion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
durationnumbernullGet the duration of the animation.
progressnumber0Get/set the progress of the animation.
speednumber1Get/set the speed of the animation.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnParametersDescription
cancelAnimationvoidNonePauses the animation for the LottieView instance.
isAnimatingbooleanNoneReturns true if the LottieView is animating, else false.
playAnimationvoidNonePlays the animation for the LottieView instance.
playAnimationFromProgressToProgressvoidstartProgress, endProgressPlays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
setColorValueDelegateForKeyPathvoidvalue, keyPathSets the provided color value on each property that matches the specified keyPath in the LottieView instance.
setOpacityValueDelegateForKeyPathvoidvalue, keyPathSets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.
\n

Contributors

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Brad\"Nathan\"Jean-Baptiste\"HamdiWanis\"
bradmartinNathanWalkerrhanbHamdiWanis
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"itstheceo\"\"itstheceo\"
itstheceomudlabs
\n","downloadStats":{"lastDay":192,"lastWeek":983,"lastMonth":4370}},"@nativescript-community/ui-pager":{"name":"@nativescript-community/ui-pager","version":"14.1.8","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-pager

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-pager

\n

\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
itemsarray or ItemsSource
selectedIndexnumber
canGoRightboolean
canGoLeftboolean
spacingPercentLengthType
peakingPercentLengthType
perPagenumber
indicatorstring ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')
circularModeboolean
autoPlayDelaynumber
autoPlayboolean
orientationstring ('horizontal' or 'vertical')
autoPlayboolean
disableSwipeboolean
showIndicatorboolean
transformersstring
\n
Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
\n

\n

Usage in Angular

\n

Import the module into your project.

\n
import { PagerModule } from \"@nativescript-community/ui-pager/angular\";

@NgModule({
    imports: [
        PagerModule,
    ],
})
\n

Examples

\n\n

\n

Usage in React

\n

Import the module into your project.

\n
import { Pager } from '@nativescript-community/ui-pager/react';
\n

Examples

\n\n

\n

Usage in Svelte

\n

Import the module into your project.

\n
import { registerNativeViewElement } from 'svelte-native/dom';

import PagerElement from '@nativescript-community/ui-pager/svelte';
import { PagerItem } from '@nativescript-community/ui-pager';

PagerElement.register();
registerNativeViewElement('pageritem', () => PagerItem);
\n

Examples

\n\n

\n

Usage in Vue

\n

Import the module into your project.

\n
import Vue from 'nativescript-vue';
import Pager from '@nativescript-community/ui-pager/vue';

Vue.use(Pager);
\n

Examples

\n\n

\n

Custom Transformer

\n

You can define custom transformer for iOS/Android

\n

You can follow the Scale example for iOS and Android to create your custom transformer.

\n

Then you can register your transformer on app start with (this example registered the included but not registered Scale transformer):

\n
import { Pager } from '@nativescript-community/ui-pager';
import transformer from '@nativescript-community/ui-pager/transformers/Scale';

Pager.registerTransformer('scale', transformer)
\n

Then you can use that transformer with the transformers property of Pager

\n","downloadStats":{"lastDay":178,"lastWeek":784,"lastMonth":4160}},"@nativescript-community/ui-material-button":{"name":"@nativescript-community/ui-material-button","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Button

\n

Material Design's Button component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdb="@nativescript-community/ui-material-button" on the Page element

\n

XML

\n
<Page xmlns:mdb=\"@nativescript-community/ui-material-button\">
    <StackLayout horizontalAlignment=\"center\">
        <mdb:Button text=\"raised button\"/>
        <mdb:Button variant=\"flat\" text=\"flat button\"/>
        <mdb:Button variant=\"text\" text=\"text button\"/>
        <mdb:Button elevation=\"5\" rippleColor=\"red\" text=\"raised custom button\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdbutton {
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialButtonModule } from \"@nativescript-community/ui-material-button/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialButtonModule,
        ...
    ],
    ...
})
\n
<MDButton rippleColor=\"blue\" text=\"text button\"></MDButton>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';

Vue.use(ButtonPlugin);
\n
<MDButton rippleColor=\"blue\" text=\"text button\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript Button so it already has all the same attributes.

\n\n

An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.

\n\n

An attribute to set the variant of the button. Can be flat or text. No value means raised button

\n\n

An attribute to set the ripple color of the button.

\n","downloadStats":{"lastDay":23,"lastWeek":302,"lastMonth":3794}},"@nativescript-community/https":{"name":"@nativescript-community/https","version":"4.1.4","license":"MIT","readme":"\n\n

@nativescript-community/https

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Nativescript plugin for https requests
\n \n

\n
\n

\n

Table of Contents

\n
* [Installation](#installation)\n\t\t* [A drop-in replacement for the [default http module](https://docs.nativescript.org/cookbook/http).](#a-drop-in-replacement-for-the-default-http-modulehttpsdocsnativescriptorgcookbookhttp)\n* [Features](#features)\n* [FAQ](#faq)\n* [Installation](#installation-1)\n* [Examples](#examples)\n\t* [Hitting an API using `GET` method](#hitting-an-api-using-get-method)\n* [Configuration](#configuration)\n\t* [Installing your SSL certificate](#installing-your-ssl-certificate)\n\t\t* [Enabling SSL pinning](#enabling-ssl-pinning)\n\t\t* [Disabling SSL pinning](#disabling-ssl-pinning)\n\t* [useLegacy](#uselegacy)\n\t* [Cookie](#cookie)\n\t* [Enabling Cache](#enabling-cache)\n\t* [Multipart form data](#multipart-form-data)\n\t* [Options](#options)\n* [Webpack / bundling](#webpack--bundling)\n* [`iOS` Troubleshooting](#ios-troubleshooting)\n* [`Android` troubleshooting](#android-troubleshooting)\n
\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/https

\n

Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

\n
\n

Android: version 4.x using okhttp 4.x changing minSDKVersion to 21! If lower needed stick to 3.x

\n
\n
\n

Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

\n
\n

A drop-in replacement for the default http module.

\n

\n

Features

\n\n

\n

FAQ

\n
\n

What the flip is SSL pinning and all this security mumbo jumbo?

\n
\n

How to make your apps more secure with SSL pinning.

\n
\n

Do I have to use SSL pinning?

\n
\n

No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

\n

\n

Installation

\n
tns plugin add @nativescript-community/https
\n

\n

Examples

\n

Hitting an API using GET method

\n
import * as Https from '@nativescript-community/https';
Https.request({
    url: 'https://httpbin.org/get',
    method: 'GET',
    timeout: 30, // seconds (default 10)
})
    .then(function (response) {
        console.log('Https.request response', response);
    })
    .catch(function (error) {
        console.error('Https.request error', error);
    });
\n

\n

Configuration

\n

Installing your SSL certificate

\n

Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

\n

\"Installing

\n

Enabling SSL pinning

\n
import { knownFolders } from 'file-system';
import * as Https from '@nativescript-community/https';
let dir = knownFolders.currentApp().getFolder('assets');
let certificate = dir.getFile('httpbin.org.cer').path;
Https.enableSSLPinning({ host: 'httpbin.org', certificate });
\n

Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

\n

Disabling SSL pinning

\n
import * as Https from '@nativescript-community/https';
Https.disableSSLPinning();
\n

All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

\n

useLegacy

\n

There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

\n\n

Cookie

\n

By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

\n

Enabling Cache

\n
import { knownFolders, path } from '@nativescript/core/file-system';
import * as Https from '@nativescript-community/https';
Https.setCache({
    diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
    diskSize: 10 * 1024 * 1024, // 10 MiB
});

/// later on when calling your request you can use the cachePolicy option
\n

Multipart form data

\n

If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

\n
{
\tdata: any
    parameterName: string,
    fileName?: string
    contentType?: string
}
\n

if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

\n

Options

\n
export interface HttpsSSLPinningOptions {
    host: string;
    certificate: string;
    allowInvalidCertificates?: boolean;
    validatesDomainName?: boolean;
    commonName?: string;
}
import { HttpRequestOptions } from 'tns-core-modules/http';
export interface HttpsRequestOptions extends HTTPOptions {
    useLegacy?: boolean;
    cachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache';
    onProgress?: (current: number, total: number) => void;
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SSLPinning OptionDescription
host: stringThis must be the request domain name eg sales.company.org.
commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
certificate: stringThe uri path to your .cer certificate file.
allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Requests OptionDescription
useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
`cachePolicy?: 'noCache''onlyCache'
onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
\n

\n

Webpack / bundling

\n

Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

\n

\n

iOS Troubleshooting

\n
\n

Please educate yourself on iOS's App Transport Security before starting beef!

\n
\n

If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
\n
\n

This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

\n
\n

\n

Android troubleshooting

\n

If you app crashes with a message that it's doing too much networking on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

\n

\n

Thanks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhoWhy
Robert LavertyFor creating and maintaining this plugin for a long time
Jeff WhelpleFor contributing
Eddy VerbruggenFor maintaining this before it got transferred
AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":15,"lastWeek":210,"lastMonth":1224}},"@nativescript-community/ui-zoomimage":{"name":"@nativescript-community/ui-zoomimage","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-zoomimage

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Zoomable image view based on @nativescript-community/ui-image
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-zoomimage

\n

\n

setup

\n
import imageModule = require(\"@nativescript-community/ui-zoomimage\");

//do this before creating any image view
imageModule.initialize({ isDownsampleEnabled: true });
\n

This component directly inherint @nativescript-community/ui-image so you can find the doc here

\n

It adds a few properties

\n

\n

Demos

\n

This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-image
$ cd ui-image
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":1,"lastWeek":12,"lastMonth":890}},"nativescript-audience-network":{"name":"nativescript-audience-network","version":"1.0.3","license":"Apache-2.0","readme":"\n

nativescript-audience-network

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-audience-network
\n

iOS currently not supported

\n

Android

\n

BANNER

\n\n

Here are the supported functions:

\n

createBanner

\n

TypeScript

\n
import * as AudienceNetwork from 'nativescript-audience-network';
import { isIOS } from \"tns-core-modules/platform\";

export class HomeComponent implements OnInit {


  ngOnInit(): void {
    
    // Init audienceNetwork SDK here.
    AudienceNetwork.initAds();
  }

  testing = true;
  createBanner() {
    let option: CreateBannerOptions = {
      // global test banner id
      androidBannerId: \"<Your audience network banner id>\",
      margins: {
        bottom: 10,
        // top:10
      },
      testing: true,
      size: AD_SIZE.STANDARD_BANNER,
    };
    AudienceNetwork.createBanner(option).then(
      () => (this.message = \"Banner created\"),
      (error) => (this.message = \"Error creating banner: \" + error)
    );
  }
}
\n\n

INTERSTITIAL

\n

To show a fullscreen ad, you can use this function. Note that Interstitial banners need to be loaded before\nthey can be shown, and there are two ways to do that:

\n

preloadInterstitial

\n

Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showInterstitial).

\n
preloadInterstitial(){
    let option: CreateInterstitialOptions = {
            \"androidInterstitialId\": \"<Your audience network Interstitial id>\",
            \"testing\": true,
            \"onAdClosed\": this.onInterstitialClosed.bind(this),
            \"onAdClicked\": this.onInterstitialClicked.bind(this)
    }
    AudienceNetwork.preloadInterstitial(option).then(
     ()=> {
      console.log(
        \"interstitial preloaded - you can now call 'showInterstitial' whenever you're ready to do so\"
      );
    }, (error)=> {
      console.log(\"preloadInterstitial error: \" + error);
    }
  );
  }
  onInterstitialClosed() {
      console.log(\"ad closed\");
  };
  onInterstitialClicked() {
      console.log(\"ad clicked\");
  }
\n

showInterstitial

\n

At any moment after preloadInterstitial successfully resolves, you can call showInterstitial.

\n

Note that when you want to use showInterstitial again, you also have to use preloadInterstitial again because those ads can't be reused.

\n
 showInterstitial(){
    AudienceNetwork.showInterstitial()
 }
\n

preloadRewardedVideoAd

\n

Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showRewardedVideoAd).

\n
 preloadRewardedVideoAd(){
    let option = {
      androidAdPlacementId: \"<Your audience network RewardedVideo id>\"
    }
    AudienceNetwork.preloadRewardedVideoAd(option).then(()=> {
      console.log(
        \"RewardedVideoAd preloaded - you can now call 'showRewardedVideoAd' whenever you're ready to do so\"
      );
    },(error)=> {
      console.log(\"preloadRewardedVideoAd error: \" + error);
    }
  );
 }
\n

showRewardedVideoAd

\n

At any moment after preloadRewardedVideoAd successfully resolves, you can call showRewardedVideoAd.

\n

Note that when you want to use showRewardedVideoAd again, you also have to use preloadRewardedVideoAd again because those ads can't be reused.

\n

onRewarded is probably the only callback you need to worry about.

\n
 showRewardedVideoAd(){
   let option: ShowRewardedOptions = {
        \"onRewardedVideoAdClosed\":this.onRewardedVideoAdClosed.bind(this),
        \"onRewardedVideoAdOpened\":this.onRewardedVideoAdOpened.bind(this),
        \"onRewardedVideoCompleted\":this.onRewardedVideoCompleted.bind(this),

      }
    AudienceNetwork.showRewardedVideoAd(option)
 }
  onRewardedVideoAdClosed(){
    console.log(\"onRewardedVideoAdClosed\")
  }

  onRewardedVideoAdOpened(){
    console.log(\"reward clicked\")
  }
  onRewardedVideoCompleted(){
    console.log(\"reward complete\")
  }
\n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":17}},"@nativescript-community/ui-collectionview-waterfall":{"name":"@nativescript-community/ui-collectionview-waterfall","version":"5.3.2","license":"ISC","readme":"\n\n

@nativescript-community/ui-collectionview-waterfall

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript CollectionView waterfall Plugin.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-collectionview-waterfall

\n

\n

Configuration

\n

To install the plugin run:

\n
import install from '@nativescript-community/ui-collectionview-waterfall';
install();
\n

then simply use the layoutStyle="waterfall" as a collectionview property

\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":3,"lastWeek":242,"lastMonth":1521}},"nativescript-modal-datetimepicker-ssi":{"name":"nativescript-modal-datetimepicker-ssi","version":"3.0.0","license":"Apache-2.0","readme":"

nativescript-modal-datetimepicker-ssi \"Build \"npm\" \"npm\"

\n

\"Twitter

\n

\"NPM\"

\n

This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

\n

Android Screenshots

\n

Date Picker

\n \n

Time Picker

\n \n

iOS

\n \n

Installation

\n
tns plugin add nativescript-modal-datetimepicker-ssi
\n

Configuration

\n

For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

\n

This can be changed in App_Resources/Android/values-21/styles.xml

\n
<!-- Default style for DatePicker - in spinner mode -->
<style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
    <item name=\"android:datePickerMode\">calendar</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
    <item name=\"android:timePickerMode\">clock</item>
</style>
\n

Usage

\n

NativeScript Core

\n

const ModalPicker = require(\"nativescript-modal-datetimepicker-ssi\").ModalDatetimepicker;

const picker = new ModalPicker();

// Pick Date
exports.selectDate = function() {
    picker.pickDate({
        title: \"Select Your Birthday\",
        theme: \"light\",
        maxDate: new Date()
    }).then((result) => {
        // Note the month is 1-12 (unlike js which is 0-11)
        console.log(\"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year);
        var jsdate = new Date(result.year, result.month - 1, result.day);
    }).catch((error) => {
        console.log(\"Error: \" + error);
    });
};

// Pick Time
exports.selectTime = function() {
    picker.pickTime()
        .then((result) => {
            console.log(\"Time is: \" + result.hour + \":\" + result.minute);
        })
        .catch((error) => {
            console.log(\"Error: \" + error);
        });
};
\n

API

\n

pickDate(options): Promise<{}>;

\n

Returns a promise that resolves to date object (Note: the month is 1-12, unlike js which is 0-11)

\n
date: {
    day: number,
    month: number,
    year: number
}
\n

pickTime(options): Promise<{}>;

\n

Returns a promise that resolves to time object

\n
time: {
    hour: number,
    minute: number
}
\n

options conform to the following interface:

\n
export interface PickerOptions {
    title?: string, // iOS ONLY: The title to display above the picker, defaults to \"Choose A Time\" or \"Choose A Date\"
    theme?: string, // iOS ONLY: light for a light blurry effect, dark for a dark blurry effect - defaults to dark
    maxDate?: Date,
    minDate?: Date,
    startingHour?: number, // Ignored on pickDate()
    startingMinute?: number, // Ignored on pickDate()
    startingDate?: Date // Ignored on pickTime()
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":26}},"@nativescript-community/sensors":{"name":"@nativescript-community/sensors","version":"1.4.0","license":"Apache-2.0","readme":"\n\n

@nativescript-community/sensors

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Nativescript plugin for Carto Mobile SDK
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/sensors

\n

\n

Usage

\n

Here is a simple example. You can find more in the doc here

\n
import { startListeningForSensor, stopListeningForSensor } from '@nativescript-community/sensors';
function onSensor(sensorData, sensorId: string) {

}
startListeningForSensor(sensor, this.onSensor);

stopListeningForSensor(sensor, this.onSensor);
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":237}},"@nativescript-community/ui-collectionview-swipemenu":{"name":"@nativescript-community/ui-collectionview-swipemenu","version":"5.3.2","license":"ISC","readme":"\n\n

@nativescript-community/ui-collectionview-swipemenu

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript CollectionView SwipeMenu Plugin.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-collectionview-swipemenu

\n

\n

Configuration

\n

To install the plugin run:

\n
import install from '@nativescript-community/ui-collectionview-swipemenu';
install();
\n

\n

API

\n

\n

CollectionView extensions

\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
swipeMenuOpenTriggered when a menu is opened in the CollectionView.
swipeMenuCloseTriggered when a menu is closed in the CollectionView.
\n

Propert

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
closeCurrentMenu()voidClose any opened menu in the CollectionView.
\n

\n

Usage

\n

First very important note. For this plugin to work correctly, collectionview items must be an object!\nThe plugin will add startingSide property to your items as needed to keep knowledge of which menu is opened and notify the template SwipeMenu. Might change in the future

\n

You need to add xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu" to your page tag, and then simply use <gvs:SwipeMenu/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

\n

Simple Example

\n

Create a simple array of objects in your JS/TS file.

\n
const items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];
\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" xmlns:gvs=\"@nativescript-community/ui-collectionview-swipemenu\" >
    <GridLayout>
        <gv:CollectionView items=\"items\" rowHeight=\"100\">
            <gv:CollectionView.itemTemplate>
                <gvs:SwipeMenu startingSide=\"startingSide\">
                    <Label text=\"value\" verticalAlignment=\"center\"/>
                </gvs:SwipeMenu>
            </gv:CollectionView.itemTemplate>
        </gv:CollectionView>
    </GridLayout>
</Page>
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":1,"lastWeek":117,"lastMonth":401}},"@nativescript-community/universal-links":{"name":"@nativescript-community/universal-links","version":"3.0.1","license":"Apache-2.0","readme":"\n\n

@nativescript-community/universal-links

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Universal links (IOS) and App Links (Android) support for NativeScript.
\n \n

\n
\n

When a user clicks a link to a website, it opens in the default web browser (Safari/Chrome). Universal linking allows your app to open instead of the web browser.

\n

Apple calls this Universal Links and Google calls it App Links, but they mean the same thing.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Migration to 3.x

\n

In version 3.0.0 the returned object is now simply the link as a string. It is not "parsed" anymore. The reason for that is that url-parse package used for this is pretty huge and not needed by most.\nYou can still parse like so:

\n
import * as urlparse from 'url-parse';

function parseLink(link: string) {
  const url = urlparse(link, true);
  return {
    href: url.href,
    origin: url.origin
    pathname: url.pathname,
    query: url.query
  }
  
}
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/universal-links

\n

\n

Implementing Universal Links

\n

Both iOS (9.0 and newer) and Android (all versions) provide good APIs for universal linking.

\n

iOS

\n

Apple introduced a new deep linking API in iOS 9.0 called “Universal Links”. It provides a better user experience than the hacky deep linking options that existed in iOS 8.0 and below.

\n

First step is to add a file to the root of your website called apple-app-site-association. This is a JSON file and it looks like this:

\n
{
    \"applinks\": {
        \"apps\": [],
        \"details\": [
            {
                \"appID\": \"TEAM_ID.BUNDLE_ID\", // ex: \"9JA89QQLNQ.com.apple.wwdc\"
                \"paths\": [ \"/blog/*\"]
            }
        ]
    }
}
\n\n

Check out Apples' docs for more info.

\n

Next, you need to add the Associated Domains to your IOS project, either using XCode or manually adding the following code to your App_Resources/IOS/app.entitlements file. Please note the applinks: prefix, it won't work without it.

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
  <dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
      <string>applinks:www.example.com</string>
    </array>
  </dict>
</plist>
\n

Android

\n

In Android, universal linking is implemented using Intent Filters. By adding a BROWSABLE intent filter, you are saying that your app can be started by a user clicking on a website url.

\n

You don't need any server side changes for Android, only modify your app to add the Intent Filter.\nAdd this code to your App_Resources/Android/src/main/AndroidManifest.xml file:

\n
<activity
    android:name=\"com.tns.NativeScriptActivity\"
    android:label=\"@string/title_activity_kimera\" >

    <!-- Add this new section to your Activity -->
    <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />

        <!-- Handle urls starting with \"https://www.example.com/blog\" -->
        <data android:scheme=\"https\"
              android:host=\"www.example.com\"
              android:pathPrefix=\"/blog\" />
    </intent-filter>
</activity>
\n

\n

Usage

\n

Call the registerUniversalLinkCallback somewhere in the startup of your app. This Angular example puts it in the AppComponent's ngOnInit method to provide a callback method which will receive an Universal Link object every time your app is opened by a website link:

\n
import { Component, OnInit } from \"@angular/core\";
import { registerUniversalLinkCallback } from \"@nativescript-community/universal-links\";

@Component({
  selector: \"my-app\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
  constructor() {}

  ngOnInit() {
    registerUniversalLinkCallback(ul => {
      // use the router to navigate to the screen
    });
  }
}
\n

The universal link object has the following structure:

\n
{
  \"href\": \"https://www.example.com/blog?title=welcome\",
  \"origin\": \"https://www.example.com\",
  \"pathname\": \"/blog\",
  \"query\": \"?title=welcome\"
}
\n

There is also a getUniversalLink() method that will return the last universal link which opened the app. This is useful in scenarios where your app is protected by a login screen. Check if the user is authenticated and then navigate to the desired path.

\n
import { getUniversalLink } from \"nativescript-plugin-universal-links\";

const ul = getUniversalLink();
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":44,"lastWeek":313,"lastMonth":1642}},"@nativescript-community/css-theme":{"name":"@nativescript-community/css-theme","version":"1.2.10","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Usage

\n

The theme will style your application using Element selectors - you don't need to add CSS classes on every element you\nneed to style.

\n
import \"@nativescript-community/css-theme\";
\n

This JS takes care of updating several classes on the app root elements, something that got\nincluded in @nativescript/core in {N} 6.1.

\n

Setting Dark or Light mode

\n

Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and\nset .ns-dark class to it - this will change all colorization to dark tones. For instance, if your page root is\nRadSideDrawer, just add a class to it, like this:

\n
<drawer:RadSideDrawer class=\"ns-dark\" xmlns:drawer=\"nativescript-ui-sidedrawer\">
    ...
</drawer:RadSideDrawer>
\n

If your root is a frame, you can do this

\n
<Frame class=\"ns-dark\" defaultPage=\"root\"></Frame>
\n

For Angular, if your root is a page-router-outlet, you can set the .ns-dark class on it - it will pass it down to the\nFrame it renders.

\n

Setting Dark or Light mode from JavaScript

\n

Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with\nyour preferred mode - either Theme.Light or Theme.Dark, like this:

\n
import Theme from \"@nativescript-community/css-theme\";

Theme.setMode(Theme.Dark); // Or Theme.Light
\n

Keep in mind that in {N} 6.2 these changes will override the default system mode. To\nrestore it, use Theme.Auto (available since Theme 2.3.0):

\n
import Theme from \"@nativescript-community/css-theme\";

Theme.setMode(Theme.Auto);
\n

Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode\nor with a boolean parameter to ensure light or dark mode is set:

\n
import Theme from \"@nativescript-community/css-theme\";

Theme.toggleDarkMode(); // to toggle between the modes

// or

Theme.toggleDarkMode(true);  // to ensure dark mode
Theme.toggleDarkMode(false); // to ensure light mode
\n
A note of warning
\n

Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll\nhave to resort to requiring it:

\n
const Theme = require(\"@nativescript-community/css-theme\");

Theme.setMode(Theme.Dark); // Or Theme.Light
\n

More root classes

\n

In addition to .ns-light and .ns-dark classes, the theme's little JavaScript file introduces .ns-root on the root element,\n.ns-android/.ns-ios depending on the current platform (which the theme extensively uses) and additionally\n.ns-portrait/.ns-landscape and .ns-phone/.ns-tablet, which should be self-explanatory.\nOf course .ns-portrait/.ns-landscape get updated on orientation change, so you can use it to show a two pane layout\nin landscape, for instance.

\n

Using Theme variables

\n

There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using\nSASS/SCSS.

\n

If you need to access specific theme variables like simple colors or sizes, do it through the const function:

\n
Button {
    background-color: const(forest);
    height: const(btn-height);
}
\n

You can get light/dark colors:

\n
Button {
    color: light(primary);

    .ns-dark & {
        color: dark(primary);
    }
}
\n","downloadStats":{"lastDay":2,"lastWeek":7,"lastMonth":158}},"@nativescript/angular":{"name":"@nativescript/angular","version":"16.0.1","license":"Apache-2.0","readme":"

@nativescript/angular

\n

For usage with NativeScript for Angular 12+ (13, etc.) projects.

\n","downloadStats":{"lastDay":572,"lastWeek":2621,"lastMonth":13469}},"@nativescript-community/ble":{"name":"@nativescript-community/ble","version":"3.1.15","license":"MIT","readme":"\n\n

@nativescript-community/ble

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Connect to and interact with Bluetooth LE peripherals.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ble

\n

\n

API

\n

Want to dive in quickly? Check out the demo app! Otherwise, mix and match these functions as you see fit:

\n

Prerequisites

\n\n

Discovery

\n\n

Connectivity

\n\n

Interaction

\n\n

Debugging

\n\n

isBluetoothEnabled

\n

Reports if bluetooth is enabled.

\n
// require the plugin
import { Bluetooth } from '@nativescript-community/ble';
var bluetooth = new Bluetooth();

bluetooth.isBluetoothEnabled().then(
  function(enabled) {
    console.log(\"Enabled? \" + enabled);
  }
);
\n

hasLocationPermission

\n

Since plugin version 1.2.0 the startScanning function will handle this internally so it's no longer mandatory to add permission checks to your code.

\n

On Android 6 you need to request permission to be able to interact with a Bluetooth peripheral (when the app is in the background) when targeting API level 23+. Even if the uses-permission tag for ACCESS_COARSE_LOCATION is present in AndroidManifest.xml.

\n

Note that for BLUETOOTH and BLUETOOTH_ADMIN you don't require runtime permission; adding those to AndroidManifest.xml suffices (which the plugin does for you).

\n

Note that hasLocationPermission will return true when:

\n\n
bluetooth.hasLocationPermission().then(
  function(granted) {
    // if this is 'false' you probably want to call 'requestLocationPermission' now
    console.log(\"Has Location Permission? \" + granted);
  }
);
\n

requestLocationPermission

\n

Since plugin version 1.2.0 the startScanning function will handle this internally so it's no longer mandatory to add permission checks to your code.

\n
// if no permission was granted previously this will open a user consent screen
bluetooth.requestLocationPermission().then(
  function(granted) {
    console.log(\"Location permission requested, user granted? \" + granted);
  }
);
\n

enable (Android only)

\n

The promise will be rejected on iOS

\n
// This turns bluetooth on, will return false if the user denied the request.
bluetooth.enable().then(
  function(enabled) {
    // use Bluetooth features if enabled is true 
  }
);
\n

startScanning

\n

A few of the optional params require a bit of explanation:

\n

seconds

\n

Scanning for peripherals drains the battery quickly, so you better not scan any longer than necessary. If a peripheral is in range and not engaged in another connection it usually pops up in under a second. If you don't pass in a number of seconds you will need to manually call stopScanning.

\n

avoidDuplicates

\n

Set this to true if you don't want duplicates with the same serviceUUID reported in "onDiscovered" callback.\nIf true, only the first discovered peripheral with the same serviceUUID will be reported.

\n

skipPermissionCheck

\n

Set this to true if you don't want the plugin to check (and request) the required Bluetooth permissions.\nParticularly useful if you're running this function on a non-UI thread (ie. a Worker).\nRelevant on Android only.

\n

filters

\n

It's inefficient to scan for all available Bluetooth peripherals and have them report all services they offer.\nMoreover on Android if we don't use filters we must have location permissions and have GPS enabled

\n

If you're only interested in finding a heartrate peripheral for instance, pass in service UUID '180d' like this: filters: [{serviceUUID:'180d'}]. If you add 2 or more (comma separated) services then only peripherals supporting ALL those services will match.

\n

Note that UUID's are ALWAYS strings; don't pass integers.

\n

onDiscovered

\n

While scanning the plugin will immediately report back uniquely discovered peripherals.

\n

This function will receive an object representing the peripheral which contains these properties (and types):

\n\n
bluetooth.startScanning({
  filters: [{serviceUUID:'180d'}],
  seconds: 4,
  onDiscovered: function (peripheral) {
  \tconsole.log(\"Periperhal found with UUID: \" + peripheral.UUID);
  }
}).then(function() {
  console.log(\"scanning complete\");
}, function (err) {
  console.log(\"error while scanning: \" + err);
});
\n

stopScanning

\n

At any time during a scan, being one where you passed in a number or seconds or not, you can stop the scan by calling this function.

\n

You may for instance want to stop scanning when the peripheral you found in startScanning's onDiscovered callback matches your criteria.

\n
bluetooth.stopScanning().then(function() {
  console.log(\"scanning stopped\");
});
\n

connect

\n

Pass in the UUID of the peripheral you want to connect to and once a connection has been established the onConnected callback function will be invoked. This callback will received the peripheral object as before, but it's now enriched with a services property. An example of the returned peripheral object could be:

\n
  peripheral: {
    UUID: '3424-542-4534-53454',
    name: 'Polar P7 Heartrate Monitor',
    RSSI: '-57',
    services: [{    
      UUID: '180d',
      name: 'Heartrate service',
      characteristics: [{
        UUID: '34534-54353-234324-343',
        name: 'Heartrate characteristic',
        properties: {
          read: true,
          write: false,
          writeWithoutResponse: false,
          notify: true
        }
      }]
    }]
  }
\n

Here's the connect function in action with an implementation of onConnected that simply dumps the entire peripheral object to the console:

\n
bluetooth.connect({
  UUID: '04343-23445-45243-423434',
  onConnected: function (peripheral) {
  \tconsole.log(\"Periperhal connected with UUID: \" + peripheral.UUID);

  \t// the peripheral object now has a list of available services:
  \tperipheral.services.forEach(function(service) {
  \t  console.log(\"service found: \" + JSON.stringify(service));
   });
  },
  onDisconnected: function (peripheral) {
  \tconsole.log(\"Periperhal disconnected with UUID: \" + peripheral.UUID);
  }
});
\n

Also note that onDisconnected function: if you try to interact with the peripheral after this event you risk crashing your app.

\n

disconnect

\n

Once done interacting with the peripheral be a good citizen and disconnect. This will allow other applications establishing a connection.

\n
bluetooth.disconnect({
  UUID: '34234-5453-4453-54545'
}).then(function() {
  console.log(\"disconnected successfully\");
}, function (err) {
  // in this case you're probably best off treating this as a disconnected peripheral though
  console.log(\"disconnection error: \" + err);
});
\n

read

\n

If a peripheral has a service that has a characteristic where properties.read is true then you can call the read function to retrieve the current state (value) of the characteristic.

\n

The promise will receive an object like this:

\n
{
  value: <ArrayBuffer>, // an ArrayBuffer which you can use to decode (see example below)
  ios: <72>, // the platform-specific binary value of the characteristic: NSData (iOS), byte[] (Android)
  android: <72>, // the platform-specific binary value of the characteristic: NSData (iOS), byte[] (Android)
  characteristicUUID: '434234-234234-234234-434'
}
\n

Armed with this knowledge, let's invoke the read function:

\n
bluetooth.read({
  peripheralUUID: '34234-5453-4453-54545',
  serviceUUID: '180d',
  characteristicUUID: '3434-45234-34324-2343'
}).then(function(result) {
  // fi. a heartrate monitor value (Uint8) can be retrieved like this:
  var data = new Uint8Array(result.value);
  console.log(\"Your heartrate is: \" + data[1] + \" bpm\");  
}, function (err) {
  console.log(\"read error: \" + err);
});
\n

write

\n

If a peripheral has a service that has a characteristic where properties.write is true then you can call the write function to update the current state (value) of the characteristic.

\n

The value may be a string or any array type value. If you pass a string you should pass the encoding too

\n
bluetooth.write({
  peripheralUUID: '34134-5453-4453-54545',
  serviceUUID: '180e',
  characteristicUUID: '3424-45234-34324-2343',
  value: [1]
}).then(function(result) {
  console.log(\"value written\");
}, function (err) {
  console.log(\"write error: \" + err);
});
\n

writeWithoutResponse

\n

Same API as write, except that when the promise is invoked the value has not been written yet; it has only been requested to be written an no response will be received when it has.

\n

startNotifying

\n

If a peripheral has a service that has a characteristic where properties.notify is true then you can call the startNotifying function to retrieve the value changes of the characteristic.

\n

Usage is very much like read, but the result won't be sent to the promise, but to the onNotify callback function you pass in. This is because multiple notifications can be received and a promise can only resolve once. The value of the object sent to onNotify is the same as the one you get in the promise of read.

\n
bluetooth.startNotifying({
  peripheralUUID: '34234-5453-4453-54545',
  serviceUUID: '180d',
  characteristicUUID: '3434-45234-34324-2343',
  onNotify: function (result) {
    // see the read example for how to decode ArrayBuffers
\tconsole.log(\"read: \" + JSON.stringify(result));
  }  
}).then(function() {
  console.log(\"subscribed for notifications\");
});
\n

stopNotifying

\n

Enough is enough. When you're no longer interested in the values the peripheral is sending you do this:

\n
bluetooth.stopNotifying({
  peripheralUUID: '34234-5453-4453-54545',
  serviceUUID: '180d',
  characteristicUUID: '3434-45234-34324-2343'
}).then(function() {
  console.log(\"unsubscribed for notifications\");
}, function (err) {
  console.log(\"unsubscribe error: \" + err);
});
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":9,"lastWeek":44,"lastMonth":860}},"@nativescript-community/ui-checkbox":{"name":"@nativescript-community/ui-checkbox","version":"2.0.9","license":"ISC","readme":"\n\n

@nativescript-community/ui-checkbox

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin for checkbox.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-checkbox

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

\n

API

\n

\n

Properties

\n\n

\n

Events

\n\n

\n

API

\n\n

\n

Css Styling

\n\n

\n

Styling [Android]

\n\n

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nativecript-community/ui-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"checkProp\" text=\"myCheckText\" fillColor=\"myCheckColor\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n

\n

import { CheckBox } from '@nativecript-community/ui-checkbox';
import { topmost } from '@nativescript/core/ui/frame';

public toggleCheck() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nativecript-community/ui-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
Vue.registerElement(
  'CheckBox',
  () => require('@nativecript-community/ui-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

\n

Demos

\n

This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-checkbox
$ cd ui-checkbox
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":1,"lastWeek":13,"lastMonth":106}},"@nativescript-community/ui-image-colorfilter":{"name":"@nativescript-community/ui-image-colorfilter","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-image-colorfilter

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n color matrix filters for @nativescript-community/ui-image
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-image-colorfilter

\n

\n

setup

\n
import { installMixins } from \"@nativescript-community/ui-image-colorfilter\";

//do this before creating any image view
installMixins();
\n

It adds one property colorMatrix which is a number[]\nYou can find samples color matrix here

\n

\n

Demos

\n

This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-image
$ cd ui-image
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":955}},"@nativescript-community/ui-canvaslabel":{"name":"@nativescript-community/ui-canvaslabel","version":"1.2.10","license":"ISC","readme":"\n\n

@nativescript-community/ui-canvaslabel

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.
\n \n

\n
\n

\n

Table of Contents

\n\n

A NativeScript Label widget. This widget takes a different approch from other label components. It is based on nativescript-canvas and allows drawing\nmultiple labels within one single widget.\nIt allows extreme complexity and customization.

\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-canvaslabel

\n

\n

Configuration

\n

It works almost like a normal label.\nYou can create spans, just like with the {N} labels. However there is a big difference with the {N} component.\nCSpan do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.

\n

For now CanvasLabel do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.

\n

The CanvasLabel component supports most labels properties:\ncolor, fontSize,fontFamily,fontStyle, fontWeight,textAlignment. Those can be defined through css.

\n

Now with CanvasLabel you don't set the text directly. Instead you create CSpan or CGroup

\n

Here is a complex Vue layout as an example

\n
<CanvasLabel id=\"canvaslabel\" fontSize=\"10\" color=\"white\" backgroundColor=\"darkgray\">
    <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
        <CSpan :text=\"item.text1\" fontWeight=\"bold\" />
        <CSpan :text=\"'\\n' + item.text2\" color=\"#ccc\" fontSize=\"16\" />
    </CGroup>

    <CGroup fontSize=\"12\" verticalAlignment=\"bottom\" paddingLeft=\"20\" paddingBottom=\"1\">
        <CSpan :text=\"item.icon1\" fontSize=\"20\" color=\"green\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon1\" verticalTextAlignment=\"center\" />
        <CSpan :text=\"'   ' + item.icon2\" fontSize=\"20\" color=\"red\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon2\" verticalTextAlignment=\"center\" />
        <CSpan :text=\"'   ' + item.icon3\" fontSize=\"20\" color=\"yellow\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon3\" verticalTextAlignment=\"center\" />
    </CGroup>

    <CGroup fontSize=\"12\" verticalAlignment=\"middle\" horizontalAlignment=\"center\" textAlignment=\"right\" paddingRight=\"20\" color=\"brown\" width=\"60\">
        <CSpan :text=\"item.icon1\" fontSize=\"14\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"'\\n' + item.texticon1\" paddingRight=\"10\" />
    </CGroup>
    <CSpan :text=\"item.text4\" color=\"lightgray\" fontSize=\"14\" textAlignment=\"right\" paddingRight=\"20\" paddingTop=\"4\" />
</CanvasLabel>
\n

For full example / doc look at the vue demo and the typings.

\n

\n

Performances

\n

CanvasLabel is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.\nThat technique is used by many apps looking for the best performances. One of the best examples is Telegram.

\n

\n

TODO / Limitations

\n\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":1,"lastWeek":234,"lastMonth":1537}},"@nativescript-community/ui-material-ripple":{"name":"@nativescript-community/ui-material-ripple","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Ripple

\n

Material Design's Ripple component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple" on the Page element

\n

XML

\n
<Page xmlns:mdr=\"@nativescript-community/ui-material-ripple\">
    <StackLayout horizontalAlignment=\"center\">
        <mdr:Ripple rippleColor=\"green\" width=\"100\" height=\"100\" />
   </StackLayout>
</Page>
\n

CSS

\n
mdripple {
    ripple-color: blue;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialRippleModule } from \"@nativescript-community/ui-material-ripple/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialRippleModule,
        ...
    ],
    ...
})
\n
<MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"></MDRipple>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';

Vue.use(RipplePlugin);
\n
<MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript StackLayout.

\n\n

An attribute to set the ripple color of the ripple.

\n","downloadStats":{"lastDay":103,"lastWeek":623,"lastMonth":5105}},"@nativescript-community/ui-material-bottomsheet":{"name":"@nativescript-community/ui-material-bottomsheet","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Bottom sheet

\n

Material Design's Bottom sheet component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

API

\n
export interface BottomSheetOptions {
    view: string | ViewBase; 
    // View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root.
    context?: any; 
    // Any context you want to pass to the view shown in bottom sheet. This same context will be available in the arguments of the shownInBottomSheet event handler.
    animated?: boolean; 
    // An optional parameter specifying whether to show the sheet view with animation.
    dismissOnBackgroundTap?: boolean; 
    // An optional parameter specifying whether to dismiss the sheet when clicking on background.
    dismissOnDraggingDownSheet?: boolean; 
    // An optional parameter specifying whether to disable dragging the sheet to dismiss.
    dismissOnBackButton?: boolean; 
    // An optional parameter that specifies whether to close the sheet when pressing the back button.
    closeCallback?: Function; 
    //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
    trackingScrollView?: string; 
    // optional id of the scroll view to track
    transparent?: boolean; 
    // optional parameter to make the bottomsheet transparent
    ignoreTopSafeArea?: boolean; 
    // optional ios parameter to top safe area. Default is true
    ignoreBottomSafeArea?: boolean; 
    // optional ios parameter to bottom safe area. Default is false
    disableDimBackground?: boolean; 
    // optional parameter to remove the dim background
    skipCollapsedState?: boolean; 
    // optional Android parameter to skip midway state when view is greater than 50%. Default is false
    peekHeight?: number; 
    // optional parameter to set the collapsed sheet height. To work on iOS you need to set trackingScrollView. Also ensure the scrollView is taking the full height of the bottomsheet content. Otherwise the \"full\" height wont be computed correctly
    ignoreKeyboardHeight?: boolean; 
    //(iOS only) A Boolean value that controls whether the height of the keyboard should affect the bottom sheet's frame when the keyboard shows on the screen. (Default: true)
    onChangeState?: onChangeStateBottomSheet; 
    // One works to be called on the scroll of the sheet. Parameters: state (CLOSED, DRAGGING, DRAGGING, COLLAPSED) and slideOffset is the new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.
    canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true.
}
\n

Usage

\n

Plain NativeScript

\n

We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

\n

JavaScript

\n
var material = require(\"@nativescript-community/ui-material-bottomsheet\");

material.install();
\n

TypeScript

\n
import { install } from \"@nativescript-community/ui-material-bottomsheet\";
install();
\n

Uses the same kind of API as NativeScript Modals.

\n

TS

\n
const modalViewModulets = \"ns-ui-category/modal-view/basics/modal-ts-view-page\";
export function openBottomSheet(args) {
    const mainView: Button = <Button>args.object;
    const context = { username: \"test_username\", password: \"test\" };
    const fullscreen = true;
    mainView.showBottomSheet({
        view: modalViewModulets,
        context,
        closeCallback: (username, password) => {
            bottom-sheet
            alert(`Username: ${username} : Password: ${password}`);
        },
        fullscreen
    });
}
\n

\n

NativeScript + Vue 2

\n
import Vue from 'nativescript-vue';
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
import { install } from \"@nativescript-community/ui-material-bottomsheet\";
install();

Vue.use(BottomSheetPlugin);
\n

Then you can show a Vue component:

\n
import MyComponent from 'MyComponent.vue';

//inside another Vue component
const options: VueBottomSheetOptions = {
    // props to be passed to MyComponent
    props: {
        someProp: true,
        anotherProp: false
    },
    // listeners to be connected to MyComponent
    on: {
        someEvent: (value) => { console.log(value) }
    }
};
this.$showBottomSheet(MyComponent, options)
\n

NativeScript + Vue 3

\n
import { createApp } from 'nativescript-vue';
import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
import { install } from \"@nativescript-community/ui-material-bottomsheet\";
install();

const app = createApp(...);
app.use(BottomSheetPlugin);
\n

Then you can show a Vue component:

\n
import { useBottomSheet } from \"@nativescript-community/ui-material-bottomsheet/vue3\";
import MyComponent from 'MyComponent.vue';


const options: VueBottomSheetOptions = {
    // props to be passed to MyComponent
    props: {
        someProp: true,
        anotherProp: false
    },
    // listeners to be connected to MyComponent
    on: {
        someEvent: (value) => { console.log(value) }
    }
};

const { showBottomSheet, closeBottomSheet } = useBottomSheet()

showBottomSheet(MyComponent, options);
closeBottomSheet();
\n

\n

NativeScript + Angular

\n

First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

\n
import { NativeScriptMaterialBottomSheetModule} from \"@nativescript-community/ui-material-bottomsheet/angular\";

@NgModule({
    imports: [
        // This will call the install method and inject a global service called BottomSheetService
        NativeScriptMaterialBottomSheetModule.forRoot()
    ],
    ...
})
\n

now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

\n

ItemComponent

\n
import { Component,  ViewContainerRef } from '@angular/core';
import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ShareOptionsComponent } from './share-options.component';

@Component({
    selector: 'ns-item',
    templateUrl: './item.component.html',
    moduleId: module.id
})
export class ItemComponent {
    constructor(
        private bottomSheet: BottomSheetService, 
        private containerRef: ViewContainerRef,
    ) {}

    showOptions() {
        const options: BottomSheetOptions = {
            viewContainerRef: this.containerRef,
            context: ['Facebook', 'Google', 'Twitter']
        };

        this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
            console.log('Option selected:', result);
        });
    }
}
\n

ShareOptionsComponent

\n
<ListView
    [items]=\"options\"
    (itemTap)=\"onTap($event)\"
    separatorColor=\"white\"
    class=\"list-group\"
    height=\"200\"
>
    <ng-template let-option=\"item\">
        <Label
            class=\"list-group-item\"
            [text]=\"option\"
        ></Label>
    </ng-template>
</ListView>
\n
import { Component, OnInit } from '@angular/core';
import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ItemEventData } from '@nativescript/core/ui/list-view';

@Component({
    selector: 'ns-share-options',
    templateUrl: 'share-options.component.html'
})
export class ShareOptionsComponent implements OnInit {
    options: string[];
    
    // The BottomSheetService injects the BottomSheetParams to the component
    // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
    constructor(private params: BottomSheetParams) {}

    ngOnInit() {
        this.options = this.params.context;
    }

    onTap({ index }: ItemEventData) {
        this.params.closeCallback(this.options[index]);
    }
}
\n","downloadStats":{"lastDay":86,"lastWeek":796,"lastMonth":5367}},"@nativescript-community/ui-webview-rtc":{"name":"@nativescript-community/ui-webview-rtc","version":"1.4.9","license":"ISC","readme":"

NativeScript WebView RTC

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript Plugin to add webRTC support to @nativescript-community/ui-webview

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add @nativescript-community/ui-webview-rtc

\n

This command automatically installs the necessary files, as well as stores @nativescript-community/ui-webview-rtc as a dependency in your project's package.json file.

\n

Configuration

\n

To install the plugin run

\n
import install from '@nativescript-community/ui-webview-rtc';
install();
\n

then simply use the webRTC="true" as a webview property

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":297}},"@nativescript-community/ui-chart":{"name":"@nativescript-community/ui-chart","version":"1.2.32","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n
\n

Usage

\n

For gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):

\n
import { install } from '@nativescript-community/ui-chart';
install();
\n

You can also check Wiki for any useful material.

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:ch="@nativescript-community/ui-chart" on the Page element.

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ch=\"@nativescript-community/ui-chart\">
    <ScrollView>
        <StackLayout>
            <Label text=\"Line Chart\" fontSize=\"20\"/>
            <ch:LineChart id=\"line-chart\" backgroundColor=\"lightgray\" width=\"300\" height=\"350\" loaded=\"onLineChartLoaded\"/>
        </StackLayout>
    </ScrollView>
</Page>
\n

TypeScript

\n
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

export function onLineChartLoaded(args) {
    const chart = args.object as LineChart;

    chart.setScaleEnabled(true);
    chart.setDragEnabled(true);

    const data = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(data, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}
\n

NativeScript + Vue

\n
Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
\n
<LineChart ref=\"chart\" width=\"300\" height=\"400\" @loaded=\"onChartLoaded\"> </LineChart>
\n
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
\n
onChartLoaded() {
    const chart = this.$refs.chart['nativeView'] as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}
\n

NativeScript + Angular

\n

Register the element in app.module.ts

\n
registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
\n
<LineChart width=\"300\" height=\"400\" (loaded)=\"onChartLoaded($event)\"> </LineChart>
\n
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
\n
onChartLoaded(args) {
    const chart = args.object as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}
\n

About

\n

This plugin is based on MPAndroidChart, a powerful & easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of MPAndroidChart and the rest of his team.

\n

Instead of directly importing existing native libraries, this library has been rewritten in TypeScript, using @nativescript-community/ui-canvas plugin API as a basis. Plugin 'ui-canvas' is an extremely powerful tool that converts Android Native Canvas API to a cross-platform API for NativeScript framework. In few words, 'ui-chart' has the same code-base for both Android and iOS.

\n

Additionally, @nativescript-community/gesturehandler plugin is used for handling chart gestures.

\n

In short, these are the benefits of rewriting library into a NativeScript plugin:

\n\n

Originally, the main goal was to prevent the need for marshalling all datasets. This is extremely heavy, costly and unnecessary!

\n

Upon running demo samples, one can conclude it is the fastest drawing library, in comparison to nativescript-ui-chart and nativescript-mpchart.

\n

That is because:

\n\n

Documentation

\n

The NativeScript 'ui-chart' plugin is based on the MPAndroidChart library.\nIn few words, its API is identical. The possibility to add API reference will be considered in the future.

\n","downloadStats":{"lastDay":35,"lastWeek":171,"lastMonth":2262}},"@nativescript-community/ui-material-floatingactionbutton":{"name":"@nativescript-community/ui-material-floatingactionbutton","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Floating action button

\n

Material Design's Floating action button component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton" on the Page element

\n

XML

\n
<Page xmlns:mdf=\"@nativescript-community/ui-material-floatingactionbutton\">
    <StackLayout horizontalAlignment=\"center\">
        <mdf:FloatingActionButton src=\"res://ic_action_add\"/>
        <mdf:FloatingActionButton elevation=\"5\" src=\"res://ic_action_add\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdfloatingactionbutton {
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton';
registerElement('MDFloatingActionButton', () => FloatingActionButton);
\n
<MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"></MDFloatingActionButton>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue';

Vue.use(FloatingActionButtonPlugin);
\n
<MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript Button so it already has all the same attributes.

\n\n

An attribute to set the floatingactionbutton icon. For now FAB only support images as icon

\n\n

An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.

\n\n

An attribute to set the ripple color of the floatingactionbutton.

\n","downloadStats":{"lastDay":13,"lastWeek":264,"lastMonth":3997}},"@nativescript-community/ui-material-activityindicator":{"name":"@nativescript-community/ui-material-activityindicator","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Circular progress indicator

\n

Material Design's Circular progress indicator component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mda="@nativescript-community/ui-material-activityindicator" on the Page element.

\n

XML

\n
<Page xmlns:mda=\"@nativescript-community/ui-material-activityindicator\">
    <StackLayout horizontalAlignment=\"center\">
        <mda:ActivityIndicator busy=\"true\"/>
    </StackLayout>
</Page>
\n

CSS

\n
mdactivityindicator {
    color: #fff;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialActivityIndicatorModule } from \"@nativescript-community/ui-material-activityindicator/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialActivityIndicatorModule,
        ...
    ],
    ...
})
\n
<MDActivityIndicator busy=\"true\"></MDActivityIndicator>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';

Vue.use(ActivityIndicatorPlugin);
\n
<MDActivityIndicator busy=\"true\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript Activity Indicator so it already has all the same attributes

\n","downloadStats":{"lastDay":11,"lastWeek":262,"lastMonth":3795}},"@nativescript-community/ui-material-progress":{"name":"@nativescript-community/ui-material-progress","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Linear progress indicator

\n

Material Design's Linear progress indicator component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element

\n

XML

\n
<Page xmlns:mdp=\"@nativescript-community/ui-material-progress\">
    <StackLayout horizontalAlignment=\"center\">
        <mdp:Progress value=\"50\" maxValue=\"100\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdprogress {
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialProgressModule } from \"@nativescript-community/ui-material-progress/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialProgressModule,
        ...
    ],
    ...
})
\n
<MDProgress v-model=\"value\" maxValue=\"100\"></MDProgress>
\n

\n

NativeScript + Vue

\n
import ProgressPlugin from '@nativescript-community/ui-material-progress/vue';

Vue.use(ProgressPlugin);
\n
<MDProgress value=\"50\" maxValue=\"100\"></MDProgress>
\n

API

\n

Attributes

\n

Inherite from NativeScript Progress so it already has all the same attributes.

\n\n

An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

\n\n

An attribute to set the ripple color of the progress.

\n","downloadStats":{"lastDay":21,"lastWeek":249,"lastMonth":4132}},"nativescript-swipe-view":{"name":"nativescript-swipe-view","version":"1.2.1","license":"Apache-2.0","readme":"

NativeScript Swipe View

\n

A NativeScript plugin to create a swipe view with actions. This is mainly to be used as items for ListView to add swipe actions for items. But can also be used in other scenarios

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-swipe-view

\n

This command automatically installs the necessary files, as well as stores nativescript-swipe-view as a dependency in your project's package.json file.

\n

Usage (Core)

\n
<ListView items=\"{{ items }}\">
    <ListView.itemTemplate>
        <sv:SwipeView>
            <sv:SwipeView.leftActionsTemplate>
                <StackLayout backgroundColor=\"blue\" color=\"white\" tap=\"onStar\">
                    <Label text=\"Star\"/>
                </StackLayout>
            </sv:SwipeView.leftActionsTemplate>
            <sv:SwipeView.rightActionsTemplate>
                <StackLayout backgroundColor=\"red\" color=\"white\" tap=\"onDelete\">
                    <Label text=\"Delete\" />
                </StackLayout>
            </sv:SwipeView.rightActionsTemplate>

            <GridLayout backgroundColor=\"white\">
                <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </sv:SwipeView>
    </ListView.itemTemplate>
</ListView>
\n

Usage in other NativeScript flavors (Angular, Vue, etc.)

\n

Currently the plugin has not been tested nor made to support other NS flavors, since I'm not actively using those. If you are such a dev, I'm happily accepting PRs to support all the NS flavors ot there :)

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":17}},"@nativescript-community/ui-material-snackbar":{"name":"@nativescript-community/ui-material-snackbar","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Snackbar

\n

Material Design's Snackbar component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage
    5. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

TypeScript

\n
import { SnackBar } from '@nativescript-community/ui-material-snackbar';

const snackbar = new SnackBar();

export function showSimpleSnackbar() {
    snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
}

export function showActionSnackbar() {
    snackbar
        .action({
            message: `I'm a snackbar with an action`,
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}

export function showColorfulSnackbar() {
    snackbar
        .action({
            message: `I'm a colorful snackbar`,
            textColor: 'blue',
            actionTextColor: 'yellow',
            backgroundColor: 'green',
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}
\n","downloadStats":{"lastDay":13,"lastWeek":277,"lastMonth":3843}},"@nativescript-community/ui-material-textview":{"name":"@nativescript-community/ui-material-textview","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Text view

\n

Material Design's Text view component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textview" on the Page element.

\n

XML

\n
<Page xmlns:mdt=\"@nativescript-community/ui-material-textview\">
    <StackLayout horizontalAlignment=\"center\">
        <mdt:TextView text=\"raised textview\"/>
        <mdt:TextView variant=\"flat\" text=\"flat textview\"/>
        <mdt:TextView variant=\"text\" text=\"text textview\"/>
        <mdt:TextView elevation=\"5\" rippleColor=\"red\" text=\"raised custom textview\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdtextview {
    ripple-color: blue;
    elevation: 4;
    stroke-color: blue;             /* the border color when active */
    stroke-inactive-color: green;   /* the border color when inactive */
    floating-color: blue;           /* the floating placeholder color when active */
    floating-inactive-color: green; /* the floating placeholder color when inactive */
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialTextViewModule } from \"@nativescript-community/ui-material-textview/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTextViewModule,
        ...
    ],
    ...
})
\n
<MDTextView  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
        (textChange)=\"onTextChange($event)\"></MDTextView>
\n

\n

NativeScript + Vue

\n
import TextViewPlugin from '@nativescript-community/ui-material-textview/vue';

Vue.use(TextViewPlugin);
\n
<MDTextView helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
        @textChange=\"onTextChange\"/>
\n

Also, you can bind the text to some instance data using the v-model directive:

\n
<MDTextView v-model=\"value\" />
\n

API

\n

Attributes

\n

Inherite from NativeScript TextView so it already has all the same attributes.

\n\n

An attribute to set the variant of the textview. Can be outline or underline or filled. No value means underline textview

\n\n

An attribute to set the error color of the textview.

\n\n

An attribute to set the helper text of the textview.

\n\n

A boolean attribute to set the floating state of the textview.

\n","downloadStats":{"lastDay":12,"lastWeek":256,"lastMonth":4183}},"@nativescript-community/audio":{"name":"@nativescript-community/audio","version":"6.4.4","license":"Apache-2.0","readme":"\n\n

@nativescript-community/audio

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin to record and play audio.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/audio

\n

\n

Installation

\n
ns plugin add @nativescript-community/audio
\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Permissions

\n

iOS

\n

You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Android

\n

If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

\n
    <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
\n

\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from '@nativescript-community/audio';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    // You can pass a duration hint to control the behavior of other application that may
    // be holding audio focus.
    // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
    // Then when you play a song, the previous owner of the
    // audio focus will stop. When your song stops
    // the previous holder will resume.
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('@nativescript-community/audio');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function () {
    console.log('finished playing');
  },
  errorCallback: function (errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function (args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log('something went wrong...', err);
  });
\n

\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":308}},"@nativescript-community/motion-activity":{"name":"@nativescript-community/motion-activity","version":"1.1.4","license":"Apache-2.0","readme":"\n\n

@nativescript-community/motion-activity

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin for Motion Activity Detection
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/motion-activity

\n

iOS

\n

Dont forget to add NSMotionUsageDescription to your app Info.plist

\n

\n

Usage

\n
import ActivityRecognition from '@nativescript-community/motion-activity'
import { request } from '@nativescript-community/perms'
const activityRecognition = ActivityRecognition.getInstance();

activityRecognition.on(ActivityRecognition.activityEvent, function (eventData) {
\tconst activityType = eventData.activity.type;
\tconst activityConfidence = eventData.activity.confidence;

\t...
});

if (__ANDROID__ && android.os.Build.VERSION.SDK_INT >= 29) {
\t// on android >= 29 you need to request permission at runtime
\tconst result = await request('android.permission.ACTIVITY_RECOGNITION');
\tif (result[0] !== 'authorized') {
\t\tthrow new Error('missing ACTIVITY_RECOGNITION permission: ' + result[0])
\t}
}
activityRecognition.start();
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":118}},"@nativescript-community/ui-material-cardview":{"name":"@nativescript-community/ui-material-cardview","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Card

\n

Material Design's Card component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For N 7.0

\n\n

\n

For N 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-material-cardview" on the Page element

\n

XML

\n
<Page xmlns:mdc=\"@nativescript-community/ui-material-cardview\">
    <StackLayout horizontalAlignment=\"center\">
        <mdc:CardView width=\"100\" height=\"100\"/>
        <mdc:CardView elevation=\"5\" rippleColor=\"red\"  width=\"100\" height=\"100\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdcardview {
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialCardViewModule } from \"@nativescript-community/ui-material-cardview/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialCardViewModule,
        ...
    ],
    ...
})
\n
<MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"></MDCardView>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';

Vue.use(CardViewPlugin);
\n
<MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript StackLayout

\n\n

An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

\n\n

An attribute to set the ripple color of the cardview.

\n","downloadStats":{"lastDay":16,"lastWeek":260,"lastMonth":3892}},"@nativescript-community/ui-material-bottom-navigation":{"name":"@nativescript-community/ui-material-bottom-navigation","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Bottom navigation

\n

Material Design's Bottom navigation component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n
ns plugin add @nativescript-community/ui-material-bottom-navigation
\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation" on the Page element.

\n

XML

\n
<Page xmlns:mdt=\"@nativescript-community/ui-material-bottom-navigation\">
    <mdt:BottomNavigation width=\"100%\" id=\"main-tabview\" class=\"main-tabview\"
                selectedIndexChanged=\"{{onSelectedIndexChanged}}\"
                iosOverflowSafeArea=\"true\" selectedIndex=\"0\" tabsPosition=\"bottom\" swipeEnabled=\"false\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <mdt:TabStrip backgroundColor=\"{{ color('dark')}}\" color=\"{{ color('blue')}}\">
                <mdt:TabStripItem  class=\"tab-item\">
                    <Image src=\"font://&#xe1b0;\" class=\"fal\"></Image>
                    <Label text=\"Home\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                </mdt:TabStripItem>
                <mdt:TabStripItem class=\"tab-item\">
                    <Label text=\"{{ L('search') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                    <Image src=\"font://&#xe024;\" class=\"fal\"></Image>
                </mdt:TabStripItem>
                <mdt:TabStripItem  class=\"tab-item\">
                    <Label text=\"{{ L('trips') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                    <Image src=\"font://&#xf03a;\" class=\"fal\"></Image>
                </mdt:TabStripItem>
                <mdt:TabStripItem class=\"tab-item\">
                    <Label text=\"{{ L('inbox') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                    <Image src=\"font://&#xf4b6;\" class=\"fal\" id=\"tab-inbox-icon-fal\"></Image>
                </mdt:TabStripItem>
            </mdt:TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Home\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"TRansactions\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Inbox\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
        </mdt:BottomNavigation>
</Page>
\n

CSS

\n
BottomNavigation.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 18;
}

MDTabStripItem.tabstripitem-active {
    background-color: teal;
}

MDTabStripItem.tabstripitem-active:active {
    background-color: yellowgreen;
}

MDTabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
MDTabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
MDTabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
BottomNavigation TabStrip {
    highlight-color: red;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-bottom-navigation/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialBottomNavigationModule,
        ...
    ],
    ...
})
\n
    <MDBottomNavigation selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDBottomNavigation>
\n

\n

NativeScript + Vue

\n
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

Vue.use(BottomNavigation);
\n
<MDBottomNavigation selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </MDTabStripItem>
            <MDTabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDBottomNavigation>
\n

\n

NativeScript + React

\n

First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

\n
import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';

registerTabNavigationBase();
registerBottomNavigation();
\n

When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the bottomNavigationNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:

\n
import * as React from 'react';

export function BottomNavigation() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    return (
        <bottomNavigation
            selectedIndex={selectedIndex}
            onSelectedIndexChanged={(args) => {
                setSelectedIndex(args.newIndex);
            }}
            style={{ backgroundColor: 'orange' }}
        >
            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
            <tabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Home</label>
                    <image nodeRole=\"image\" src=\"font://&#xf015;\" className=\"fas\" />
                </tabStripItem>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Account</label>
                    <image nodeRole=\"image\" src=\"font://&#xf007;\" className=\"fas\" />
                </tabStripItem>
                <tabStripItem nodeRole=\"items\">
                    <label nodeRole=\"label\">Search</label>
                    <image nodeRole=\"image\" src=\"font://&#xf00e;\" className=\"fas\" />
                </tabStripItem>
            </tabStrip>

            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'blue' }}>
                    <label style={{ color: 'white' }}>Home Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'cyan' }}>
                    <label style={{ color: 'black' }}>Account Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole=\"items\">
                <gridLayout style={{ backgroundColor: 'magenta' }}>
                    <label style={{ color: 'black' }}>Search Page</label>
                </gridLayout>
            </tabContentItem>
        </bottomNavigation>
    );
}
\n

Troubleshooting

\n

If you see an error like this when writing e.g. <bottomNavigation> into your JSX:

\n
\n

Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

\n
\n

Make sure that you have:

\n
    \n
  1. Installed the react-nativescript npm module.
    2. \n
  2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
    3. \n
  3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
    4. \n
  4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerBottomNavigation() methods).
    5. \n
  5. If using Visual Studio Code, option-click the import @nativescript-community/ui-material-bottom-navigation/react to jump to the file; opening the file will force it to load its provided typings.
    6. \n
\n

API

\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
itemsArrayGets or sets the items of the BottomNavigation.
selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
tabStripTabStripGets or sets the tab strip of the BottomNavigation.
tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
iOSTabBarItemsAlignment"leading", "justified", "center", "centerSelected"iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
selectedIndexChangedEmitted when the selectedIndex property is changed.
loadedEmitted when the view is loaded.
unloadedEmitted when the view is unloaded.
layoutChangedEmitted when the layout bounds of a view changes due to layout processing.
\n","downloadStats":{"lastDay":204,"lastWeek":1217,"lastMonth":6720}},"@nativescript-community/ui-material-dialogs":{"name":"@nativescript-community/ui-material-dialogs","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Dialogs

\n

Material Design's Dialogs component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage
    5. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Uses the same API as NativeScript Dialogs.

\n

Adds one option for alert:

\n\n

\n

TS

\n
import { login, alert, prompt } from \"@nativescript-community/ui-material-dialogs\";

alert(\"Your message\").then(()=> {
    console.log(\"Dialog closed!\");
});
\n","downloadStats":{"lastDay":5,"lastWeek":235,"lastMonth":3735}},"@nativescript-community/ui-mapbox":{"name":"@nativescript-community/ui-mapbox","version":"6.2.20","license":"MIT","readme":"\n\n

@nativescript-community/ui-mapbox

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Prerequisites

\n

You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-mapbox

\n

\n

Configuration

\n

Add any other additional configuration instructions here.

\n

\n

Issues

\n

If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\nns platform remove ios and ns platform add ios.

\n

On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

\n
  <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
\n

If you get an error related to TelemetryService then please check it's there.

\n

\n

Usage

\n

XML

\n

You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

\n

A simple layout could look like this:

\n\n

Could be rendered by a definition like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"@nativescript-community/ui-mapbox\" navigatingTo=\"navigatingTo\">
  <StackLayout>
    <Label text=\"Nice map, huh!\" class=\"title\"/>
    <ContentView height=\"240\" width=\"240\">
      <map:MapboxView
          accessToken=\"your_token\"
          mapStyle=\"traffic_night\"
          latitude=\"52.3702160\"
          longitude=\"4.8951680\"
          zoomLevel=\"3\"
          showUserLocation=\"true\"
          mapReady=\"onMapReady\">
      </map:MapboxView>
    </ContentView>
  </StackLayout>
</Page>
\n

Angular

\n

Component:

\n
import { registerElement } from '@nativescript/angular';
registerElement(\"Mapbox\", () => require(\"@nativescript-community/ui-mapbox\").MapboxView);
\n

View:

\n
  <ContentView height=\"100%\" width=\"100%\">
    <Mapbox
        accessToken=\"your_token\"
        mapStyle=\"traffic_day\"
        latitude=\"50.467735\"
        longitude=\"13.427718\"
        hideCompass=\"true\"
        zoomLevel=\"18\"
        showUserLocation=\"false\"
        disableZoom=\"false\"
        disableRotation=\"false\"
        disableScroll=\"false\"
        disableTilt=\"false\"
        (mapReady)=\"onMapReady($event)\">
    </Mapbox>
  </ContentView>
\n

\n

API

\n

All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondefaultdescription
accesstoken-see 'Prerequisites' above
delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
latitude -Set the center of the map by passing this in
longitude-.. and this as well
zoomLevel00-20
showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
hideCompass falseDon't show the compass in the top right corner during rotation of the map
hideLogofalseMapbox requires false if you're on a free plan
hideAttribution trueMapbox requires false if you're on a free plan
disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
moveBeginEvent-The name of a function to be called when the map has begun to move.
moveEndEvent-The name of a function to be called when the map has completed moving.
locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
\n

\n

Markers

\n

This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

\n

Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

\n
var mapbox = require(\"@nativescript-community/ui-mapbox\");

function onMapReady(args) {
  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
  var nativeMapView = args.ios ? args.ios : args.android;
  console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

  // .. or use the convenience methods exposed on args.map, for instance:
  args.map.addMarkers([
    {
      lat: 52.3602160,
      lng: 4.8891680,
      title: 'One-line title here',
      subtitle: 'Really really nice location',
      selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
      onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
    }]
  );
}

exports.onMapReady = onMapReady;
\n

\n

Viewport

\n
var mapbox = require(\"@nativescript-community/ui-mapbox\");

function onMapReady(args) {
  args.map.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true
      }
  );
}

exports.onMapReady = onMapReady;
\n

The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

\n

Check out the usage details on the functions below.

\n

\n

Declaring Programmatically

\n

Add a container to your view XML where you want to programmatically add the map. Give it an id.

\n
<ContentView id=\"mapContainer\" />
\n

\n

Methods

\n

show

\n

    const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

    const settings = {

      // NOTE: passing in the container here.

      container: contentView,
      accessToken: ACCESS_TOKEN,
      style: MapStyle.LIGHT,
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 9, // 0 (most of the world) to 20, default 0
      showUserLocation: true, // default false
      hideAttribution: true, // default false
      hideLogo: true, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          iconPath: 'res/markers/green_pin_marker.png',
          onTap: () => console.log(\"'Nice location' marker tapped\"),
          onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
        }
      ]
    };

    console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

    const mapView = new MapboxView();

    // Bind some event handlers onto our newly created map view. 

    mapView.on( 'mapReady', ( args : any ) => {

      console.log( \"main-view-model: onMapReady fired.\" );

      // this is an instance of class MapboxView

      this.mapboxView = args.map;

      // get a reference to the Mapbox API shim object so we can directly call its methods.

      this.mapbox = this.mapboxView.getMapboxApi();

      this.mapbox.setOnMapClickListener( point => {
        console.log(`>> Map clicked: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnMapLongClickListener( point => {
        console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnScrollListener((point: LatLng) => {
        // console.log(`>> Map scrolled`);
      });

      this.mapbox.setOnFlingListener(() => {
        console.log(`>> Map flinged\"`);
      }).catch( err => console.log(err) );

    });

    mapView.setConfig( settings );
    contentView.content = mapView;
\n

hide

\n

All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

\n
  mapbox.hide();
\n

unhide

\n

If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

\n
  mapbox.unhide();
\n

destroy 💥

\n

To clean up the map entirely you can destroy instead of hide it:

\n
  mapbox.destroy();
\n

setMapStyle

\n

You can update the map style after you've loaded it.

\n
\n

With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

\n
\n
  mapbox.setMapStyle(mapbox.MapStyle.DARK);
\n

addMarkers

\n
  import { MapboxMarker } from \"@nativescript-community/ui-mapbox\";

  const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: '~/assets/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
    onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
  };

  mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])
\n

Updating markers

\n

Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

\n
  firstMarker.update({
    lat: 52.3622160,
    lng: 4.8911680,
    title: 'One-line title here (UPDATE)',
    subtitle: 'Updated subtitle',
    selected: true, // this will trigger the callout upon update
    onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
    onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
  })
\n

removeMarkers

\n

You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

\n
  // remove all markers
  mapbox.removeMarkers();

  // remove specific markers by id
  mapbox.removeMarkers([1, 2]);
\n

setViewport

\n

If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

\n
  mapbox.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true // default true
      }
  )
\n

getViewport

\n
  mapbox.getViewport().then(
      function(result) {
        console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
      }
  )
\n

setCenter

\n
  mapbox.setCenter(
      {
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        animated: false // default true
      }
  )
\n

getCenter

\n

Here the promise callback makes sense, so adding it to the example:

\n
  mapbox.getCenter().then(
      function(result) {
        console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getCenter error: \" + error);
      }
  )
\n

setZoomLevel

\n
  mapbox.setZoomLevel(
      {
        level: 6.5, // mandatory, 0-20
        animated: true // default true
      }
  )
\n

getZoomLevel

\n
  mapbox.getZoomLevel().then(
      function(result) {
        console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getZoomLevel error: \" + error);
      }
  )
\n

animateCamera

\n
  // this is a boring triangle drawn near Amsterdam Central Station
  mapbox.animateCamera({
    // this is where we animate to
    target: {
        lat: 52.3732160,
        lng: 4.8941680
    },
    zoomLevel: 17, // Android
    altitude: 2000, // iOS (meters from the ground)
    bearing: 270, // Where the camera is pointing, 0-360 (degrees)
    tilt: 50,
    duration: 5000 // default 10000 (milliseconds)
  })
\n

setTilt (Android only)

\n
  mapbox.setTilt(
      {
        tilt: 40, // default 30 (degrees angle)
        duration: 4000 // default 5000 (milliseconds)
      }
  )
\n

getTilt (Android only)

\n
  mapbox.getTilt().then(
      function(tilt) {
        console.log(\"Current map tilt: \" +  tilt);
      }
  )
\n

getUserLocation

\n

If the user's location is shown on the map you can get their coordinates and speed:

\n
  mapbox.getUserLocation().then(
      function(userLocation) {
        console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
        console.log(\"Current user speed: \" +  userLocation.speed);
      }
  )
\n

trackUser

\n

In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

\n
  mapbox.trackUser({
    mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
    animated: true
  });
\n

addSource

\n

https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

\n

Supported source types:

\n\n

Adds a vector to GeoJSON source to the map.

\n
  mapbox.addSource( id, {
    type: 'vector',
    url: 'url to source'
  } );
\n

-or-

\n
  mapbox.addSource( id, {
    'type': 'geojson',
    'data': {
      \"type\": \"Feature\",
        \"geometry\": {
        \"type\": \"LineString\",
          \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
        }
      }
    }
  );
\n

removeSource

\n

Remove a source by id

\n
  mapbox.removeSource( id );
\n

addLayer

\n

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

\n

Supported layer types:

\n\n

To add a line:

\n
  mapbox.addLayer({
    'id': someid,
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        \"type\": \"Feature\",
          \"geometry\": {
          \"type\": \"LineString\",
            \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
          }
        }
      }
    },
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },    
    'paint': {
      'line-color': '#ed6498',
      'line-width': 5,
      'line-opacity': .8,
      'line-dash-array': [ 1, 1, 1, ..]
    }
  });
\n

To add a circle:

\n
  mapbox.addLayer({
    \"id\": someid,
    \"type\": 'circle',
    \"source\": {
      \"type\": 'geojson',
      \"data\": {
        \"type\": \"Feature\",
        \"geometry\": {
          \"type\": \"Point\",
          \"coordinates\": [ lng, lat ]
        }
      }
    }, 
    \"paint\": {
      \"circle-radius\": {
        \"stops\": [
          [0, 0],
          [20, 8000 ]
        ],
        \"base\": 2
      },
      'circle-opacity': 0.05,
      'circle-color': '#ed6498',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ed6498'
    } 
  });
\n

Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

\n

removeLayer

\n

Remove a layer added with addLayer() by id.

\n
  mapbox.removeLayer( id );
\n

queryRenderedFeatures

\n

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures\nReturns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

\n
mapbox
  .queryRenderedFeatures({
    point: {
      lat: 52.3701494345567,
      lng: 4.823684692382513,
  \t},
    layers: ['circle-with-source-object'],
    filter: ['==', ['get', 'querySample'], '2'],
  })
  .then((result) => console.log('query rendered features', result))
\n

querySourceFeatures

\n

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures\nReturns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

\n
mapbox
  .querySourceFeatures('source_id', { filter: ['==', ['get', 'querySample'], '2'] })
  .then((result) => console.log('query source features', result));
\n

addLinePoint

\n

Dynamically add a point to a line.

\n
  mapbox.addLinePoint( <id of line layer>, lnglat )
\n

where lnglat is an array of two points, a longitude and a latitude.

\n

addPolygon (deprecated, use addLayer() instead)

\n

Draw a shape. Just connect the dots like we did as a toddler.

\n

The first person to tweet a snowman drawn with this function gets a T-shirt (from @eddyverbruggen ;-)).

\n
  // after adding this, scroll to Amsterdam to see a semi-transparent red square
  mapbox.addPolygon(
      {
        id: 1, // optional, can be used in 'removePolygons'
        fillColor: new Color(\"red\"),
        fillOpacity: 0.7,

        // stroke-related properties are only effective on iOS
        strokeColor: new Color(\"green\"),
        strokeWidth: 8,
        strokeOpacity: 0.5,

        points: [
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          },
          {
            lat: 52.35421556258807,
            lng: 4.9308013916015625
          },
          {
            lat: 52.353796172573944,
            lng: 4.8799896240234375
          },
          {
            lat: 52.3864966440161,
            lng: 4.8621368408203125
          },
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          }
        ]
      })
      .then(result => console.log(\"Mapbox addPolygon done\"))
      .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
\n

removePolygons

\n

You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

\n
  // remove all polygons
  mapbox.removePolygons();

  // remove specific polygons by id
  mapbox.removePolygons([1, 2]);
\n

addPolyline

\n

Deprecated. Use addLayer() instead.

\n

Draw a polyline. Connect the points given as parameters.

\n
  // Draw a two segment line near Amsterdam Central Station
  mapbox.addPolyline({
      id: 1, // optional, can be used in 'removePolylines'
      color: '#336699', // Set the color of the line (default black)
      width: 7, // Set the width of the line (default 5)
      opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
      points: [
          {
              'lat': 52.3833160, // mandatory
              'lng': 4.8991780 // mandatory
          },
          {
              'lat': 52.3834160,
              'lng': 4.8991880
          },
          {
              'lat': 52.3835160,
              'lng': 4.8991980
          }
      ]
  });
\n

removePolylines

\n

Deprecated. Use removeLayer() instead.

\n

You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

\n
  // remove all polylines
  mapbox.removePolylines();

  // remove specific polylines by id
  mapbox.removePolylines([1, 2]);
\n

setOnMapClickListener

\n

Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

\n
  mapbox.setOnMapClickListener((point: LatLng) => {
    console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnMapLongClickListener

\n

Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

\n
  mapbox.setOnMapLongClickListener((point: LatLng) => {
    console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnScrollListener

\n

Add a listener to retrieve lat and lng of where the user scrolls to on the map.

\n
  mapbox.setOnScrollListener((point?: LatLng) => {
    console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

\n

Offline maps

\n

For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

\n

Important read: the offline maps documentation by Mapbox.

\n

downloadOfflineRegion

\n

This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

\n
  mapbox.downloadOfflineRegion(
    {
      accessToken: accessToken, // required for Android in case no map has been shown yet
      name: \"Amsterdam\", // this name can be used to delete the region later
      style: mapbox.MapStyle.OUTDOORS,
      minZoom: 9,
      maxZoom: 11,
      bounds: {
        north: 52.4820,
        east: 5.1087,
        south: 52.2581,
        west: 4.6816
      },
      // this function is called many times during a download, so
      // use it to show an awesome progress bar!
      onProgress: function (progress) {
        console.log(\"Download progress: \" + JSON.stringify(progress));
      }
    }
  ).then(
    function() {
      console.log(\"Offline region downloaded\");
    },
    function(error) {
      console.log(\"Download error: \" + error);
    }
  );
\n

Advanced example: download the current viewport

\n

Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

\n
  // I spare you the error handling on this one..
  mapbox.getViewport().then(function(viewport) {
    mapbox.downloadOfflineRegion(
      {
        name: \"LastViewport\", // anything you like really
        style: mapbox.MapStyle.LIGHT,
        minZoom: viewport.zoomLevel,
        maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
        bounds: viewport.bounds,
        onProgress: function (progress) {
          console.log(\"Download %: \" + progress.percentage);
        }
      }
    );
  });
\n

listOfflineRegions

\n

To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

\n
  mapbox.listOfflineRegions({
    // required for Android in case no map has been shown yet
    accessToken: accessToken
  }).then(
    function(regions) {
      console.log(JSON.stringify(JSON.stringify(regions));
    },
    function(error) {
      console.log(\"Error while listing offline regions: \" + error);
    }
  );
\n

deleteOfflineRegion

\n

You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

\n
  mapbox.deleteOfflineRegion({
    name: \"Amsterdam\"
  }).then(
    function() {
      console.log(\"Offline region deleted\");
    },
    function(error) {
      console.log(\"Error while deleting an offline region: \" + error);
    }
  );
\n

\n

Permissions

\n

hasFineLocationPermission / requestFineLocationPermission

\n

On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

\n

You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

\n

Note that hasFineLocationPermission will return true when:

\n\n
  mapbox.hasFineLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestFineLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
  );

  // if no permission was granted previously this will open a user consent screen
  mapbox.requestFineLocationPermission().then(
      function() {
        console.log(\"Location permission requested\");
      }
  );
\n

Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

\n

\n

Using marker images from the internet

\n

If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

\n
\t<key>NSAppTransportSecurity</key>
\t<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
\t</dict>
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":38,"lastWeek":167,"lastMonth":793}},"@oliverphaser/nativescript-eventify":{"name":"@oliverphaser/nativescript-eventify","version":"1.0.13","license":"MIT","readme":"

\"npm\"\n\"apple\"\n\"android\"\n
\n\"support\"

\n

NativeScript Eventify

\n

NativeScript has a method called notify you can use to notify an observable of changes. But you can't use it to trigger events like tap or swipe, enter NativeScript Eventify.

\n

NativeScript 8

\n

This will work only on NativeScript 8.

\n

Supported Events

\n\n

Roadmap

\n\n

Installation

\n
ns plugin add @oliverphaser/nativescript-eventify
\n

Usage

\n

Just require it once.

\n
//app.js
require(\"@oliverphaser/nativescript-eventify\");
\n
/**
* home-page.js
*
* Assume the view already has the event listner(s) setup.
*/

// Simulates a tap event
view.eventify({ eventName: \"tap\", object: view });
\n

Take a look at this Playground for a working example.

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertiesRequiredDescription
EventDataYesThe eventName and object, just like using notify.
InfoSometimesSome of the events (i.e. swipe) will need extra information
\n

Info

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventRequiredPropertiesDescription
tapNon/an/a
\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":205}},"@ngx-formly/nativescript":{"name":"@ngx-formly/nativescript","version":"6.2.1","license":"MIT","readme":"
\n \n \n \n
\n JSON powered / Dynamic forms in Angular\n

\n

\"Npm\n\"Downloads\"\n\"Gitter\"\n\"Build\n\"Twitter\"\n\"Gitpod

\n
\n
\n

Formly is a dynamic (JSON powered) form library for Angular that brings unmatched maintainability to your application's forms.

\n

Features

\n\n

Docs

\n\n

Resources

\n\n

Supported UI libs

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
UI
BootstrapDemoStackBlitz
Material2DemoStackBlitz
IonicDemoStackBlitz
PrimeNGDemoStackBlitz
KendoDemoStackBlitz
NG-ZORROStackBlitz
NativeScript
\n

Which Version to use?

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Angular versionFormly version
Angular >= 13@ngx-formly/core@6.x
Angular >= 7@ngx-formly/core@5.x
Angular >= 6@ngx-formly/core@4.x
Angular >= 5@ngx-formly/core@3.x
Angular >= 4@ngx-formly/core@2.x
Angular >= 2ng-formly@1.x
\n

Core Team

\n\n \n \n \n \n \n \n \n \n
\n \n \n
\n Abdellatif Ait boudad\n \n 		\n \n \n
\n Juri Strumpflohner\n \n 		\n \n \n
\n Mohammed Zama Khan\n \n 		\n \n \n
\n Bram Borggreve\n \n 		\n \n \n
\n Keni Steward\n \n 		\n \n \n
\n Max Kless\n \n
\n

Contributors

\n

Thanks goes to these wonderful people:

\n\n

\"aitboudad\"\"mohammedzamakhan\"\"divyakumarjain\"\"MaxKless\"\"couzic\"\"juristr\"\"franzeal\"\"beeman\"

\n

\"FritzHerbers\"\"klemenoslaj\"\"samtsai\"\"thorgod\"\"kenisteward\"\"dwaldrum\"\"skrtheboss\"\"intellix\"

\n

\"Krustie101\"\"manuelmeister\"\"MarcosEllys\"\"rehleinBo\"\"ryanjerskine\"\"Devqon\"\"vstiebe\"\"AlexTalcura\"

\n

\"alex-novikov-1990\"\"andmoredev\"\"vitale232\"\"AmGarera\"\"bhaidar\"\"cyrilletuzi\"\"Dayvisson\"\"dereekb\"

\n

\"eduardoRoth\"\"enricouniurb\"\"erikvdv1\"\"fynnfeldpausch\"\"internalsystemerror\"\"jrgleason\"\"johannesjo\"\"jdpnielsen\"

\n

\"TheMcMurder\"\"kentcdodds\"\"Lehoczky\"\"LennardWesterveld\"\"logvinoleg89\"\"LucasJAlba\"\"lucienbertin\"\"waffle-iron\"

\n

\"mathijshoogland\"\"mrbusche\"\"NanFengCheong\"\"Pouja\"\"rafaelss95\"\"Riron\"\"milasevicius\"\"rternavskyi\"

\n

\"blowsie\"\"ThomasBower\"\"thm1118\"\"Tom-V\"\"VyacheslavPritykin\"\"akamyshanov\"\"danielcrisp\"\"francisco-sanchez-molina\"

\n

\"kapsiR\"\"marfer\"\"mburger81\"\"n3xus\"\"neminovno\"\"wenqi73\"\"yoni333\"

\n\n","downloadStats":{"lastDay":1,"lastWeek":9,"lastMonth":3082}},"esolution-nativescript-photoviewer":{"name":"esolution-nativescript-photoviewer","version":"3.0.1-alpha-3","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript PhotoViewer

\n

A simple photo-viewer/gallery component for NativeScript.

\n

Limitations

\n

Since the plugin is based on two different libraries for two different platforms their features are also somewhat diferent:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformStateRemote images (url)Local images (resource)Titles/CreditsAlbum ViewColor Palette
iOS:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
Android:x: (Broken):white_check_mark::x::x::white_check_mark::white_check_mark:
\n

If anyone has tips on a better android library that has same or similar features to the iOS, let us know.

\n

Latest version

\n

3.0.0

\n\n

Installation

\n

Run tns plugin add nativescript-photoviewer in your root directory of your project.

\n

Usage

\n

It's best to take a look at the included demo app(s) for advanced usages. Below is just a simple example on how to get the plugin running with minimal effort using vanilla nativescript (ts). For Angular, see demo-ng.

\n
// Include the module
import { PhotoViewer, PhotoViewerOptions, PaletteType, NYTPhotoItem } from \"nativescript-photoviewer\";
var photoViewer: PhotoViewer; 

// Create a new instace of PhotoViewer in the onLoaded event. Very important to do the init here! 
export function pageLoaded(args: EventData) {\t
    photoViewer = new PhotoViewer();
}

// Show gallery
export function openGallery(args: EventData){

    let image1 = \"https://blabla/image1.jpg\";
    let image2 = \"https://blabla/image2.jpg\";
    let image3 = \"https://blabla/image3.jpg\";
    let image4 = \"https://blabla/image4.jpg\";
    let myImages = [image1, image2, image3, image4];

    // Example on how to use the options class (optional)
    let photoviewerOptions: PhotoViewerOptions = {
        startIndex: 0,
        ios: {
            completionCallback: galleryLoaded 
        },
        android: {
            paletteType: PaletteType.DarkVibrant,
            showAlbum: false
        }
    };
\t
    photoViewer.showGallery(myImages, photoviewerOptions);
}
\n

Changelog

\n

3.0.0

\n\n

2.1.5

\n\n

2.1.1

\n\n

2.1.0

\n\n

2.0.2

\n\n

1.5.0

\n\n

1.4.0

\n\n

1.3.0

\n\n

Screenshots

\n

\"Demo \"Demo\n\"Demo \"Demo

\n

Contribution

\n

I'll review & accept pull requests that improve the plugin and assign credit.

\n

Credits

\n

The plugin is based on the following libraries:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
NYTPhotoViewerImageGallery
\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":25}},"@nativescript-community/ui-material-slider":{"name":"@nativescript-community/ui-material-slider","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Slider

\n

Material Design's Slider component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

If using tns-core-modules

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-slider" on the Page element.

\n

XML

\n
<Page xmlns:mds=\"@nativescript-community/ui-material-slider\">
    <StackLayout horizontalAlignment=\"center\">
        <mds:Slider value=\"50\" minValue=\"0\" maxValue=\"100\" />
   </StackLayout>
</Page>
\n

CSS

\n
mdslider {
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialSliderModule } from \"@nativescript-community/ui-material-slider/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialSliderModule,
        ...
    ],
    ...
})
\n
<MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\"></MDSlider>
\n

\n

NativeScript + Vue

\n
import SliderPlugin from '@nativescript-community/ui-material-slider/vue';

Vue.use(SliderPlugin);
\n
<MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\" @valueChange=\"onValueChanged\"/>
\n

Or you can bind the value to some instance data using the v-model directive:

\n
<MDSlider v-model=\"value\" minValue=\"0\" maxValue=\"100\"/>
\n

API

\n

Attributes

\n

Inherite from NativeScript Slider so it already has all the same attributes.

\n\n","downloadStats":{"lastDay":9,"lastWeek":298,"lastMonth":3843}},"@nativescript-community/ui-pager-indicator":{"name":"@nativescript-community/ui-pager-indicator","version":"14.1.8","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-pager-indicator

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript Indicator for Pager / Carousel /CollectionView
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-pager-indicator

\n

\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
colorColor or string
selectedColorColor or string
\n
PagerIndicator add page control for Pager or other Paging Views.
\n

\n

Usage in Vue

\n

Import the module into your project.

\n
import Vue from 'nativescript-vue';
Vue.registerElement('PagerIndicator', () => require('@nativescript-community/ui-pager-indicator').PagerIndicator);
\n

then in your template:

\n
<Pager id=\"pager\" :items=\"items\"
    ...
</Pager>
<PagerIndicator pagerViewId=\"pager\"/>
\n

Examples

\n\n","downloadStats":{"lastDay":0,"lastWeek":18,"lastMonth":245}},"nativescript-theme-core":{"name":"nativescript-theme-core","version":"2.0.24","license":"Apache-2.0","readme":"

NativeScript Theme: Core V2

\n

\"npm\"\n\"npm\"

\n

Home of the core NativeScript theme 2.0 beta. The documentation of the beta theme will live here, until it gets final.

\n\n

Breaking changes

\n\n

Usage

\n

The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just\nload the core CSS (the default skin was added in 2.0.18):

\n
 @import \"~nativescript-theme-core/css/core.css\";
\n

or alternatively SCSS:

\n
@import \"~nativescript-theme-core/core\";
\n

If you want, you can choose from several different skins. To do that, you can include a second CSS/SCC file just after\nyou load the core CSS/SCSS (if you use Theme 2.017 or earlier, you will have to include both files for the styling\nto work.

\n
@import \"~nativescript-theme-core/css/core.css\";
@import \"~nativescript-theme-core/css/blue.css\";
\n

or

\n
@import \"~nativescript-theme-core/core\";
@import \"~nativescript-theme-core/blue\";
\n

In order to import just the Theme variables in one of your modules, use this:

\n
@import \"~nativescript-theme-core/scss/variables\";
\n

It will import just the variables and mixins, without any additional styling.

\n

Here is the old list of Theme skins - the first two are now the Core default Light and Dark skins, the rest are\nall the Light skins available, listed by name.

\n

\"Multiple

\n

The theme will style your application using Element selectors - you don't need to add CSS classes on every element you\nneed to style.

\n

Additionally, if you need to create you own skin, you can start just from the core theme - it includes the sizing and\ninitial styling of the components.

\n

Usage before NativeScript 6.1

\n

In order to use the 2.0 beta theme before {N} 6.1, you will also need to include a small JS file in your project:

\n
import \"nativescript-theme-core\";
\n

This JS takes care of updating several classes on the app root elements, something that got\nincluded in tns-core-modules in {N} 6.1.

\n

Setting Dark or Light mode

\n

Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and\nset .ns-dark class to it - this will change all colorization to dark tones. For instance, if your page root is\nRadSideDrawer, just add a class to it, like this:

\n
<drawer:RadSideDrawer class=\"ns-dark\" xmlns:drawer=\"nativescript-ui-sidedrawer\">
    ...
</drawer:RadSideDrawer>
\n

If your root is a frame, you can do this

\n
<Frame class=\"ns-dark\" defaultPage=\"root\"></Frame>
\n

For Angular, if your root is a page-router-outlet, you can set the .ns-dark class on it - it will pass it down to the\nFrame it renders.

\n

Setting Dark or Light mode from JavaScript

\n

Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with\nyour preferred mode - either Theme.Light or Theme.dark, like this:

\n
import Theme from \"nativescript-theme-core\";

Theme.setMode(Theme.Dark); // Or Theme.Light
\n

Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode\nor with a boolean parameter to ensure light or dark mode is set:

\n
import Theme from \"nativescript-theme-core\";

Theme.toggleMode(); // to toggle between the modes

// or

Theme.toggleMode(true);  // to ensure dark mode
Theme.toggleMode(false); // to ensure light mode
\n
A note of warning
\n

Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll\nhave to resort to requiring it:

\n
const Theme = require(\"nativescript-theme-core\");

Theme.setMode(Theme.Dark); // Or Theme.Light
\n

More root classes

\n

In addition to .ns-light and .ns-dark classes, the theme's little JavaScript file introduces .ns-root on the root element,\n.ns-android/.ns-ios depending on the current platform (which the theme extensively uses) and additionally\n.ns-portrait/.ns-landscape and .ns-phone/.ns-tablet, which should be self-explanatory.\nOf course .ns-portrait/.ns-landscape get updated on orientation change, so you can use it to show a two pane layout\nin landscape, for instance.

\n

The newest addition is .ns-statusbar-transparent since 2.0.4 - add this class to your root element, if you have enabled\ntransparent status bar in the OS and your ActionBar gets underneath it.

\n
\n

Keep in mind that Android APIs before 21 don't support transparent status bars and this will result\nin an undesired top ActionBar padding!

\n
\n

Using Theme variables

\n

There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using\nSASS/SCSS.

\n

If you need to access specific theme variables like simple colors or sizes, do it through the const function:

\n
Button {
    background-color: const(forest);
    height: const(btn-height);
}
\n

You can get light/dark colors:

\n
Button {
    color: light(primary);

    .ns-dark & {
        color: dark(primary);
    }
}
\n

or alternatively set them both in one go - does the same as the upper example:

\n
Button {
    @include colorize($color: primary);
}
\n

You can darken/lighten a color depending on its background (darken for light theme and lighten for dark theme):

\n
Button {
    @include colorize($contrasted-border-color: accent background 20%);
}
\n

The above example uses the contrasted function to check the contrast level of the background and adjust the lightness of\nthe accent color according to it.

\n

CSS variables

\n

Since 2.0.17 beta, the Theme now exports all its internal variables to CSS ones in the .ns-root and .ns-modal classes.\nThis is also done for Kendo based skins. You can use them to inherit your styles from the Theme.\nA list of the supported CSS variables follows:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Simple ColorsConstantsLight ColorsDark Colors
--color-black--const-font-size--light-primary--dark-primary
--color-white--const-background-alt-10--light-background--dark-background
--color-grey--const-btn-color-secondary--light-accent--dark-accent
--color-grey-light--const-btn-color-disabled--light-ab-color--dark-background-alt-5
--color-charcoal--const-btn-font-size--light-ab-background--dark-background-alt-10
--color-transparent--const-btn-min-width--light-background-alt-5--dark-background-alt-20
--color-aqua--const-btn-height--light-background-alt-10--dark-secondary
--color-blue--const-btn-padding-x--light-background-alt-20--dark-disabled
--color-brown--const-btn-padding-y--light-secondary--dark-ab-color
--color-forest--const-btn-margin-x--light-disabled--dark-ab-background
--color-grey-dark--const-btn-margin-y--light-text-color--dark-text-color
--color-purple--const-btn-radius--light-headings-color--dark-headings-color
--color-lemon--const-headings-margin-bottom--light-tab-text-color--dark-tab-text-color
--color-lime--const-headings-font-weight--light-accent-dark--dark-accent-dark
--color-orange--const-border-width--light-accent-light--dark-accent-light
--color-ruby--const-border-radius--light-accent-transparent--dark-accent-transparent
--color-sky--const-border-radius-sm--light-primary-accent--dark-primary-accent
--color-error--const-border-radius-lg--light-background-accent--dark-background-accent
--const-border-radius-rounded--light-background-dark-accent--dark-background-dark-accent
--const-icon-font-size--light-item-active-color--dark-item-active-color
--const-icon-font-size-lg--light-item-active-background--dark-item-active-background
--const-disabled-opacity--light-btn-color--dark-btn-color
--light-ab-background-dark--dark-ab-background-dark
--light-item-active-icon-color--dark-item-active-icon-color
--light-btn-color-inverse--dark-btn-color-inverse
--light-btn-color-secondary--dark-btn-color-secondary
\n

Use them like this:

\n
.my-accented-class {
    color: var(--light-accent);
}
\n

For now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned\nfor after HSL color support comes in NativeScript 6.2.

\n

Kendo UI ThemeBuilder support

\n

The theme now supports inheriting the Kendo UI ThemeBuilder theme variables. Just head\nthere, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS\nthat you can use to style your web app, and variables.scss - the one you need for your NativeScript theme. It will look\nsomething like this:

\n
$base-theme:Default;
$skin-name:test;
$swatch-name:Default Purple;
$border-radius: 10px;
$accent: #bf70cc;
$info: #3e80ed;
$success: #5ec232;
$warning: #fdce3e;
$error: #d51923;
$text-color: #656565;
$bg-color: #ffffff;
$base-text: #656565;
$base-bg: #f6f6f6;
$hovered-text: #656565;
$hovered-bg: #ededed;
$selected-text: #ffffff;
$selected-bg: #bf70cc;
$series-a: #ff6358;
$series-b: #ffd246;
$series-c: #78d237;
$series-d: #28b4c8;
$series-e: #2d73f5;
$series-f: #aa46be;
\n

Take this file, add the following under it:

\n
// Uncomment this row, if you target compat styling:
// $compat: true;

@import '~nativescript-theme-core/index';
\n

And load the file after your core theme. It should just work™. If it doesn't - head for the issues section.

\n

Theme classes and compatibility

\n

The old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world -\nif you want to use them, you should load them separately, like this:

\n
@import \"~nativescript-theme-core/core.compat\";
@import \"~nativescript-theme-core/blue.compat\";
\n

There might be bugs with these in the beta, you might want to hold off upgrading if you want to use the old classes.

\n

As of 2.0, the theme now utilizes a simplified BEM approach for the new element classes, that might be needed here or there.\nFor instance, the buttons need .-primary and .-outline modifiers, instead of the old .btn-primary and\n.btn-outline classes. All element classes (which are not needed by default, except if you want to style a component\nto look like another one) are namespaced, so for instance a button is .nt-button, an action bar is .nt-action-bar and a ListView is\n.nt-list-view.

\n

Should I use sass or node-sass

\n

Theme 2.0 is developed using SASS. The NPM package used was sass (formerly dart-sass), however it can be used with either sass or node-sass. The difference between them is that sass doesn't depend on a native module (unless you add fibers) and is a little slower (30%) than node-sass, however it doesn't need recompilation if you change Node versions often. If you decide to use it, you should update your webpack config and change the sass-loader options to load sass instead (node-sass is the default sass-loader implementation), like this:

\n
{
    loader: \"sass-loader\",
    options: {
        implementation: require(\"sass\")
    }
}
\n

Why Beta

\n\n

The theme is relatively stable, try the latest version \"npm\"\nand report if you notice problems.

\n

Screenshots

\n

\"\"\n\"\"\n\"\"\n
\n\"\"\n\"\"\n\"\"

\n

Contributing

\n

Clone this repo, and then use the tns run command to launch the demo app on your device or emulator of choice.

\n
tns run ios

// or

tns run android
\n

If you’d like to toggle the color scheme from light to dark, open the sidedrawer, scroll down to "Themes" at the bottom, and toggle away.

\n

Publishing

\n

NOTE: Only authorized authors can publish updates.

\n

IMPORTANT: Always make sure you have run the demo app in iOS or Android to verify any changes as well as ensure the latest css has been built before doing the following:

\n\n
npm run builder
cd nativescript-theme-core
npm publish
\n

IMPORTANT: Never modify the contents of nativescript-theme-core folder directly. The builder creates that everytime and any change you make there will be overwritten.

\n

Setup changelog generation:

\n
npm install -g conventional-changelog-cli
\n

Generate changelog workflow:

\n
    \n
  1. Make changes
    2. \n
  2. Commit those changes - using these conventions.
    3. \n
  3. Make sure Travis turns green
    4. \n
  4. Bump version in package.json and nativescript-theme-core.json
    5. \n
  5. conventional-changelog -p angular -i CHANGELOG.md -s
    6. \n
  6. Commit package.json and CHANGELOG.md files
    7. \n
  7. Tag
    8. \n
  8. Push
    9. \n
\n

Awesome Contributors

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"NathanWalker\"\"TheOriginalJosh\"\"tjvantoll\"\"NathanaelA\"\"triniwiz\"\"sis0k0\"
NathanWalkerTheOriginalJoshtjvantollNathanaelAtriniwizsis0k0
\"sitefinitysteve\"\"vakrilov\"\"bradmartin\"\"firescript\"\"valentinstoychev\"\"enchev\"
sitefinitystevevakrilov　bradmartin　　firescript　　valentinstoychev　　enchev　　
\"bundyo\"
　　bundyo　　
\n

LICENSE

\n

Apache 2.0

\n","downloadStats":{"lastDay":457,"lastWeek":2012,"lastMonth":8616}},"@nativescript-community/ui-material-bottomnavigationbar":{"name":"@nativescript-community/ui-material-bottomnavigationbar","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Bottom navigation bar

\n

Material Design's Bottom navigation component for NativeScript.

\n

\"npm\" \"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API\n\n
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

For NativeScript 6.x

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Before start using the plugin you need to add the icons for Android & iOS in your App_Resources directory.

\n

Plain NativeScript

\n

You can set the tabs using the tabs property

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          tabs=\"{{ tabs }}\"
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        ></mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
    // Get the event sender
    let page = <Page>args.object;
    page.bindingContext = {
        tabs: [
            new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
            new BottomNavigationTab({
                title: 'Second',
                icon: 'res://ic_view_list',
                isSelectable: false
            }),
            new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
        ]
    };
}

export function tabSelected(args: TabSelectedEventData) {
    console.log('tab selected ' + args.newIndex);
}
\n

or you can add the tabs directly in your xml view

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        >
          <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
          <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
          <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
        </mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n

Angular

\n

First you need to include the NativeScriptMaterialBottomNavigationBarModule in your app.module.ts

\n
import { NativeScriptMaterialBottomNavigationBarModule} from \"@nativescript-community/ui-material-bottomnavigationbar/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialBottomNavigationBarModule
    ],
    ...
})
\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <BottomNavigationBar
        [tabs]=\"tabs\"
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
    ></BottomNavigationBar>
</GridLayout>
\n

or you can declare the BottomNavigationTab in your html directly

\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <BottomNavigationBar
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
    >
        <BottomNavigationTab title=\"First\" icon=\"res://ic_home\"></BottomNavigationTab>
        <BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" [isSelectable]=\"false\"></BottomNavigationTab>
        <BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\"></BottomNavigationTab>
    </BottomNavigationBar>
</GridLayout>
\n

Vue

\n

If you want to use this plugin with Vue, do this in your app.js or main.js:

\n
import BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);
\n

This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <MDBottomNavigationBar activeColor=\"red\" inactiveColor=\"yellow\" backgroundColor=\"black\" @tabSelected=\"onBottomNavigationTabSelected\" row=\"1\">
        <MDBottomNavigationTab title=\"First\" icon=\"ic_home\" />
        <MDBottomNavigationTab title=\"Second\" icon=\"ic_view_list\" isSelectable=\"false\" />
        <MDBottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
    </MDBottomNavigationBar>
</GridLayout>
\n

You can find more information of how to use nativescript plugins with Vue Here!

\n

CSS Styling

\n

You can also use your css file to set or change the activeColor, inactiveColor & backgroundColor of the Bottom Navigation Bar.

\n
.botom-nav {
    active-color: green;
    inactive-color: black;
    background-color: blue;
}
\n

API

\n\n

Bottom Navigation Bar

\n

Properties (bindable)

\n

Properties settable through XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
backgroundColorfalse"white"StringColor of the BottomNavigation background
badgeColorfalse"red"StringColor of the BottomNavigationTab badge background
badgeTextColorfalse"white"StringColor of the BottomNavigationTab badge text
\n

Properties (internal)

\n

Properties accessible through JS/TS instance

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
items[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
selectedTabIndex0NumberIndex of the selected tab
titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColornew Color('black')ColorColor of the BottomNavigationTab when it's selected
inactiveColornew Color('gray')ColorColor of the BottomNavigationTab when it's not selected
backgroundColornew Color('white')ColorColor of the BottomNavigation background
badgeColornew Color('red')ColorColor of the BottomNavigationTab badge background
badgeTextColornew Color('white')ColorColor of the BottomNavigationTab badge text
\n

Events

\n

Event properties settable thew XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
\n

Methods

\n

Methods accessible through JS/TS instance

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
selectTab(index: number)voidSelect a tab programmatically
showBadge(index: number, value?: number)voidShow a badge for an specific tab, if you want to show a badge as a red dot no value should be passed to the function
\n

Bottom Navigation Tab

\n

Properties (bindable)

\n

Properties settable through XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
titletruenullstringTitle of the tab
icontruenullstringIcon of the tab
isSelectablefalsetruebooleanDetermine if the tab can be selected or not
\n","downloadStats":{"lastDay":47,"lastWeek":400,"lastMonth":4336}},"cordova-plugin-admobpro":{"name":"cordova-plugin-admobpro","version":"8.13.1","license":"MIT","readme":"

AdMob Plugin Pro

\n

Cordova / PhoneGap Plugin for Google Ads, including AdMob / DFP (doubleclick for publisher) and mediations to other Ad networks.

\n

Contents

\n
    \n
  1. Description
    2. \n
  2. History
    3. \n
  3. Features
    4. \n
  4. Demo
    5. \n
  5. Quick Start
    6. \n
  6. Installation
    7. \n
  7. Usage
    8. \n
  8. API
    9. \n
  9. Wiki and Docs
    10. \n
  10. Important Tips & Warning
    11. \n
  11. Video Tutorial
    12. \n
  12. Screenshots
    13. \n
  13. License
    14. \n
  14. Credits
    15. \n
\n

Description

\n

This Cordova / PhoneGap plugin enables displaying mobile Ads with single line of javascript code. Designed for the use in HTML5-based cross-platform hybrid games and other applications.

\n

History

\n

Community-driven project. Designed and maintained by Raymond Xie since August 2014. It also features integration in AngularJS projects via [ngCordova] (http://www.ngcordova.com).

\n

It was published to Cordova registry with id "com.google.cordova.admob" since Aug 2014, and has been downloaded more than 120,000 times. Now it's the No. 1 monetization plugin for Cordova community.

\n

\"ScreenShot\"

\n

From May 2015, Cordova team announced the deprecation of Cordova registry, and suggest all plugins to be moved to npm repository. Now, the AdMob plugin is published to npm and renamed as "cordova-plugin-admobpro".

\n

Features

\n

Platforms supported:

\n\n

Ad Types:

\n\n

Mediation to other Ad networks:

\n\n

Quick Demo

\n

Wanna quickly see the mobile ad on your simulator or device? Try the following commands.

\n
    # install cordova CLI
    [sudo] npm install cordova -g

    # install a small utility to run all the commands for you
    [sudo] npm install plugin-verify -g

    # Demo 1: run admob demo with sample index.html
    plugin-verify cordova-plugin-admobpro

    # Demo 2/3: run admob demo in game powered by PIXI/phaser HTML5 engine
    plugin-verify admob-demo-game-pixi ios --landscape
    plugin-verify admob-demo-game-phaser ios --landscape

    # Demo 4: run admob demo in app powered by ionic/angular framework
    plugin-verify admob-demo-app-ionic ios --portrait
\n

Quick start

\n
\t# create a demo project
    cordova create test1 com.rjfun.test1 Test1
    cd test1
    cordova platform add android
    cordova platform add ios

    # now add the plugin, cordova CLI will handle dependency automatically
    cordova plugin add cordova-plugin-admobpro

    # now remove the default www content, copy the demo html file to www
    rm -r www/*;
    cp plugins/cordova-plugin-admobpro/test/* www/;

\t# now build and run the demo in your device or emulator
    cordova prepare; 
    cordova run android; 
    cordova run ios;
    # or import into Xcode / eclipse
\n

Installation

\n\n
cordova plugin add cordova-plugin-admobpro

cordova plugin add cordova-plugin-admobpro --save --variable PLAY_SERVICES_VERSION=20.4.0 --variable ADMOB_ANDROID_APP_ID=\"__your_admob_android_app_id___\" --variable ADMOB_IOS_APP_ID=\"__your_admob_ios_app_id___\"
\n

If use other tools or online build services, see:

\n\n

Notice:

\n\n

Usage

\n

Show Mobile Ad with single line of javascript code.

\n

Step 1: Create Ad Unit Id for your banner and interstitial, in AdMob portal, then write it in your javascript code.

\n
// select the right Ad Id according to platform
  var admobid = {};
  if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
    admobid = {
      banner: 'ca-app-pub-xxx/xxx', // or DFP format \"/6253334/dfp_example_ad\"
      interstitial: 'ca-app-pub-xxx/yyy'
    };
  } else { // for ios
    admobid = {
      banner: 'ca-app-pub-xxx/zzz', // or DFP format \"/6253334/dfp_example_ad\"
      interstitial: 'ca-app-pub-xxx/kkk'
    };
  }
\n

Step 2: Want cheap and basic banner? single line of javascript code.

\n
// it will display smart banner at top center, using the default options
if(AdMob) AdMob.createBanner({
  adId: admobid.banner,
  position: AdMob.AD_POSITION.TOP_CENTER,
  autoShow: true });
\n

Step 3: Want interstitial Ad to earn more money ? Easy, 2 lines of code.

\n
// preppare and load ad resource in background, e.g. at begining of game level
if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );

// show the interstitial later, e.g. at end of game level
if(AdMob) AdMob.showInterstitial();
\n

Or, you can just copy this admob_simple.js to your project, change the ad unit id to your own, and simply reference it in your index.html, like this:

\n
<script type=\"text/javascript\" src=\"admob_simple.js\"></script>
\n

Remember to remove isTesting:true if release for production.

\n

AdMob Mediation Adapters

\n

Optional mediations to increase your revenue (Read about AdMob Mediation Networks):

\n
cordova plugin add cordova-plugin-admob-facebook
cordova plugin add cordova-plugin-admob-flurry
cordova plugin add cordova-plugin-admob-unityads
cordova plugin add cordova-plugin-admob-inmobi
cordova plugin add cordova-plugin-admob-mmedia
cordova plugin add cordova-plugin-admob-mobfox
\n

Notice: If you want to add multiple mediations, please balance flexibility and binary size.

\n

API

\n

Methods:

\n
// use banner
createBanner(adId/options, success, fail);
removeBanner();
showBanner(position);
showBannerAtXY(x, y);
hideBanner();

// use interstitial
prepareInterstitial(adId/options, success, fail);
showInterstitial();
isInterstitialReady(function(ready){ if(ready){ } });

// use reward video
prepareRewardVideoAd(adId/options, success, fail);
showRewardVideoAd();

// set values for configuration and targeting
setOptions(options, success, fail);

// get user ad settings
getAdSettings(function(inf){ inf.adId; inf.adTrackingEnabled; }, fail);
\n

Events:

\n
// onAdLoaded
// onAdFailLoad
// onAdPresent
// onAdDismiss
// onAdLeaveApp
document.addEventListener('onAdFailLoad', function(e){
    // handle the event
});
\n

Use AdMobPro with Ionic

\n

Use with Capacitor:

\n
$ npm install cordova-plugin-admobpro
$ npm install @awesome-cordova-plugins/admob-pro
$ ionic cap sync
\n

Or, use with Cordova:

\n
$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install @awesome-cordova-plugins/admob-pro
\n

Code for Angular:

\n
import { AdMobPro } from '@awesome-cordova-plugins/admob-pro/ngx';
import { Platform } from '@ionic/angular';

constructor(private admob: AdMobPro, private platform: Platform ) { }

ionViewDidLoad() {
  this.admob.onAdDismiss()
    .subscribe(() => { console.log('User dismissed ad'); });
}

onClick() {
  let adId;
  if(this.platform.is('android')) {
    adId = 'YOUR_ADID_ANDROID';
  } else if (this.platform.is('ios')) {
    adId = 'YOUR_ADID_IOS';
  }
  this.admob.prepareInterstitial({adId: adId})
    .then(() => { this.admob.showInterstitial(); });
}
\n

See more:\nhttps://ionicframework.com/docs/native/admob-pro

\n

Wiki and Docs

\n

Quick start, simply copy & paste:

\n\n

API Reference:

\n\n

Other Documentations:

\n\n

Demo projects:

\n\n

Video Tutorial

\n\n

\"Video\"

\n\n

\"Video\"

\n

More video by developers:

\n\n

Screenshots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iPhone BanneriPhone Interstitial
\"ScreenShot\"\"ScreenShot\"
Android BannerAndroid Interstitial
\"ScreenShot\"\"ScreenShot\"
\n

Tips

\n

Some important tips, FYI.

\n\n

Advertisement is main business and income source of Google, so clients are all around the world. Google is one of the most rialable partners for its high standard service.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Ad FormatBannerInterstitial
Click Rate< 1%3-15%
RPM (revenue per 1000 impression)US$ 0.5~4US$ 10~50
\n\n

⚠：Remember Google's slogan: "Don't be evil". Invalid usage violating Google rules, may cause your AdMob account suspended !

\n\n

More details, please read AdMob & AdSense policies

\n

License

\n

You can use the plugin for free, or you can also pay to get a license. IMPORTANT!!! Before using the plugin, please read the following content and accept the agreement. THIS WILL AVOID POTENTIAL PROBLEM AND DISPUTE.

\n

There are 3 license options, fully up to you:

\n
    \n
  1. Free and Open Source, no support
    2. \n
  2. Commercial, with email/skype support
    3. \n
  3. Win-win partnership, with forum support
    4. \n
\n

If you hope to get a fully open source plugin (either need DIY, or hope to get full control on the code), use this open source one instead. Fork and pull request is welcome, but please mention it's derived source. Simply renaming then publishing to npm is forbidden. Open source project URL:\nhttps://github.com/floatinghotpot/cordova-plugin-admob

\n

If use in commercial project, please get a license, or, you have monetized more than $1000 using this plugin, you are also required to either get a commercial license ($20). As a commercial customer, you will be supported with high priority, via private email or even Skype chat.

\n

If you don't want to get a license as your apps may not earn too much, or you don't have a PayPal account to pay, here is a compromised option. You don't have to pay, we are also okay if just share 2 percent user traffic, so that we can cover our effort and focus on maintenance and online support. (We have maintained this project since Aug 2014, and closed more than 560 support issues)

\n

Please read the License Agreement for details.

\n

Credits

\n

This project is created and maintained by Raymond Xie.

\n

More Cordova/PhoneGap plugins by Raymond Xie, find them in plugin registry, or find them in npm.

\n

Project outsourcing and consulting service is also available. Please contact us if you have the business needs.

\n","downloadStats":{"lastDay":11,"lastWeek":113,"lastMonth":924}},"@akylas/nativescript":{"name":"@akylas/nativescript","version":"8.5.10","license":"Apache-2.0","readme":"

\n \n \"NativeScript\"\n \n

\n

@nativescript/core

\n

A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.

\n

Learn more at docs.nativescript.org

\n","downloadStats":{"lastDay":4,"lastWeek":15,"lastMonth":965}},"@navara/nativescript-adal":{"name":"@navara/nativescript-adal","version":"1.0.6","license":"MIT","readme":"

NativeScript Active Directory Authentication Library Plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"BCH

\n

This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app

\n

Prerequisites / Requirements

\n

Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

\n

Installation

\n
tns plugin add @navara/nativescript-adal
\n

Usage (Angular example)

\n

Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

\n
import { Injectable } from '@angular/core';
import { AdalContext } from '@navara/nativescript-adal';

const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
const clientId: string = '{your-application-id}';
const resourceId: string = '00000002-0000-0000-c000-000000000000';

@Injectable()
export class AdalService {

  public adalContext: AdalContext;

  constructor() {
    this.adalContext = new AdalContext(authority, clientId, resourceId);
  }
}
\n

...and consume this service in your application!

\n
export class AppComponent {

  constructor(private adalService: AdalService) { }

  public login() {
    this.adalService.adalContext.login().then((result) => {
      console.log('Success!');
    })
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

License

\n

See LICENSE for details.

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":112}},"@nativescript/types":{"name":"@nativescript/types","version":"8.6.1","license":"Apache-2.0","readme":"

@nativescript/types

\n

NativeScript Types for all supported platforms

\n","downloadStats":{"lastDay":829,"lastWeek":3712,"lastMonth":15468}},"@nativescript-community/ui-material-speeddial":{"name":"@nativescript-community/ui-material-speeddial","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Speed dial

\n

Material Design's Speed dial component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage
    5. \n
\n

Installation

\n
ns plugin add @nativescript-community/ui-material-speeddial
\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';

Vue.use(speeddialPlugin);
\n
<MDSpeedDial buttonFontSize=\"26\" text=\"mdi-one-up\"  buttonClass=\"mdi\" buttonBackgroundColor=\"yellow\" @tap=\"onTap\">
    <MDSpeedDialItem icon=\"res://ic_action_add\" title=\"test1\" backgroundColor=\"red\"  @tap=\"onTap\"/>
    <MDSpeedDialItem text=\"mdi-card-account-mail\" title=\"test2\" buttonClass=\"mdi\" backgroundColor=\"green\"  @tap=\"onTap\"/>
    <MDSpeedDialItem backgroundImage=\"~/images/iu.jpg\"  backgroundColor=\"blue\"  @tap=\"onTap\"/>
    <MDSpeedDialItem icon=\"res://ic_action_add\" title=\"test4\" backgroundColor=\"orange\" @tap=\"onTap\"/>
</MDSpeedDial>
\n","downloadStats":{"lastDay":7,"lastWeek":180,"lastMonth":2875}},"@nativescript/core":{"name":"@nativescript/core","version":"8.6.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":2108,"lastWeek":7194,"lastMonth":50795}},"@klippa/nativescript-http":{"name":"@klippa/nativescript-http","version":"3.0.4","license":"MIT","readme":"

nativescript-http

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Build

\n

:rocket: The best way to do HTTP requests in NativeScript :rocket:

\n

A drop-in replacement for the core HTTP with important improvements and additions like proper connection pooling, form data support and certificate pinning.

\n

Features

\n\n

NativeScript Version Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NS Versionnativescript-http versionInstall commandDocs
^8.0.0^3.0.0ns plugin add @klippa/nativescript-http@^3.0.0This page
^7.0.0^2.0.0ns plugin add @klippa/nativescript-http@^2.0.0Here
^6.0.0^1.0.0tns plugin add @klippa/nativescript-http@^1.0.0Here
\n

Installation (NS 8)

\n
ns plugin add @klippa/nativescript-http@^3.0.0
\n

Usage (NS 8)

\n

Automatically use this plugin for all HTTP calls

\n

Since this is a drop-in replacement for the core HTTP,\nwe can automatically use this plugin for all HTTP calls in NativeScript that use the XHR framework to do HTTP calls, this includes:

\n\n

The way to do this is quite simple, we only have to import a plugin and add the plugin to the webpack config.

\n

Open the file webpack.config.js, it may look like this:

\n
const webpack = require(\"@nativescript/webpack\");

module.exports = (env) => {
   webpack.init(env);

   // Learn how to customize:
   // https://docs.nativescript.org/webpack

   return webpack.resolveConfig();
};
\n

Import our webpack implementation and add a line before webpack.resolveConfig(), like this:

\n
const webpack = require(\"@nativescript/webpack\");
const NativeScriptHTTPPlugin = require(\"@klippa/nativescript-http/webpack\"); // Import NativeScriptHTTPPlugin

module.exports = (env) => {
   webpack.init(env);

   // Learn how to customize:
   // https://docs.nativescript.org/webpack

   webpack.chainWebpack(config => {
      config.plugin('NativeScriptHTTPPlugin').use(NativeScriptHTTPPlugin)
   });

   return webpack.resolveConfig();
};
\n

The NativeScriptHTTPPlugin can be given an object with the following properties: replaceHTTP (true/false) and replaceImageCache (true/false). This way you can control what the plugin replaces. If you don't give this options object we will replace both.\nThe options can be passed like this:

\n
webpack.chainWebpack(config => {
   config.plugin('NativeScriptHTTPPlugin').use(NativeScriptHTTPPlugin, [
      {
         replaceHTTP: true,
         replaceImageCache: false
      }
   ])
});
\n

Note: if you do this, you don't have to do the other integrations.

\n

Validate whether the automatic integration works by adding a self-check

\n

If you are dependant on new functionality in this plugin, like handling form data or certificate pinning and you want to make sure the automatic integration always works, or you just want to play it safe, you can add the following self-check to your code:

\n

For core NativeScript / Vue / Angular:

\n
import { Http, Dialogs } from \"@nativescript/core\";

Http.request({
    method: \"GET\",
    url: \"https://nativescript-http-integration-check.local\",
}).then((res) => {
    const jsonContent = res.content.toJSON();
    if (!jsonContent || !jsonContent.SelfCheck || jsonContent.SelfCheck !== \"OK!\") {
        Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
    }
}).catch((e) => {
    Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
});
\n

For Angular HttpClient:

\n
import { Dialogs } from \"@nativescript/core\";

// Don't forget to inject HttpClient into your component.

// Add the following code in a place where you want to do the self-check in Angular.
this.http.get(\"https://nativescript-http-integration-check.local\", {
    responseType: \"json\",
}).toPromise().then((res) => {
    // @ts-ignore
    if (!res || !res.SelfCheck || res.SelfCheck !== \"OK!\") {
        Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
    }
}).catch((e) => {
    Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
});
\n

The URL https://nativescript-http-integration-check.local is hardcoded internally in this plugin to always return the same result.

\n

If the request fails, or the content isn't the same as what we expect, we know something is wrong and we will get a dialog message that the automatic integration failed.

\n

Integration in code

\n

Since this is a drop-in replacement for the core HTTP, you can execute the requests in the same way as with the Core HTTP, the only thing different is the import:

\n

The format of options and the output of the request are the same as in core HTTP.

\n
import { HttpResponse } from \"@nativescript/core\";
import { Http } from \"@klippa/nativescript-http\";

Http.request({
   url: \"https://httpbin.org/get\",
   method: \"GET\"
}).then((response: HttpResponse) => {
   // Argument (response) is HttpResponse
}, (e) => {
});
\n

Integration in Angular

\n

We also provide a drop-in replacement NativeScriptHttpClientModule from the nativescript-angular project.

\n

In order to make Angular use our HTTP implementation, import our module like this:

\n
import { NativeScriptHttpClientModule } from \"@klippa/nativescript-http/angular\";

@NgModule({
    imports: [
        NativeScriptHttpClientModule
    ]
\n

From now on you can make requests using Angular's HttpClient service like explained here.

\n

Be aware that this plugin tries to parse your image in the background so you won't have to do this in javascript (core HTTP does the same).\nThis value is not reachable from the Angular HTTP client, only through response.content.toImage(), so I would advice to use the HTTP client directly (so without the Angular HTTP client) if you are going to download images and display them directly.

\n

ImageCache

\n

If you use the WebPack plugin, you don't have to do anything to use our ImageCache. It behaves the same as core so you don't have to change anything.

\n

If you don't use the plugin. You can import the ImageCache class from @klippa/nativescript-http. It has the same API as the core ImageCache.

\n

Important note for apps with support for < Android 5 (SDK 21)

\n

The default minSdk of NativeScript is 17, this is Android 4.2. We use OkHttp version 4, which does not have support for Android 4.

\n

If you do not care about Android 4 users

\n

If you do not care about Android 4 users, edit the file App_Resources/Android/app.gradle and change the minSdk to 21:

\n
android {
  defaultConfig {
    minSdkVersion 21
    // ... other config.
  }
  // ... other config.
}
\n

This let's the play store know the app can't be installed on anything lower than Android 5.

\n

If you do care about Android 4 users

\n

Luckily, OkHtpp has a special support branch called okhttp_3.12.x for older Android version, and because OkHttp is binary safe, which means all the methods have the same signature, we can just replace the version and everything just works™.

\n

I don't mind using an older OkHttp version

\n

If you don't mind everyone having an older OkHttp version, you can do the following easy™ fix:

\n

Edit the file App_Resources/Android/app.gradle, add the following lines:

\n
android {
  // ... other config.
  configurations.all {
    resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
  }
}
\n

This will force your build to use the support version of OkHttp.

\n

Please note that this okhttp_3.12.x branch is support through December 31, 2020, and it will only get fixes for severe bugs or security issues.

\n

This means you won't get any cool features from version 4.

\n

I want to use the latest version for Android 5, and version 3.12 for Android 4

\n

NOTE: there is currently an open issue in the Android runtime that makes it impossible for the configuration below to work

\n

Luckily, this is also a possibility, but a little bit more difficult because you have to split your builds.

\n

Edit the file App_Resources/Android/app.gradle, add the following lines:

\n
android {
  // ... other config.
  flavorDimensions \"api\"

  productFlavors {
    minApi21 {
      dimension \"api\"
      minSdkVersion 21
      versionNameSuffix \"-minApi21\"
    }

    minApi17 {
      dimension \"api\"
      minSdkVersion 17
      versionNameSuffix \"-minApi17\"
    }
  }
}

android.applicationVariants.all { variant ->
  if (variant.name.contains(\"minApi17\")) {
    variant.getCompileConfiguration().resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
    variant.getRuntimeConfiguration().resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
  }

  variant.outputs.each { output ->
    if (variant.name.contains(\"minApi17\")) {
      output.versionCodeOverride = 10000000 + variant.versionCode
    } else {
      output.versionCodeOverride = 20000000 + variant.versionCode
    }
  }
}
\n

The part in android is to create 2 product flavors, one for minSdk 17, and one for minSdk 21.

\n

The part in android.applicationVariants consists of two things:

\n
    \n
  1. Making sure flavor minApi17 uses version 3.12.+ for minSdk 17
    2. \n
  2. Making sure that every flavor has it's own build versionCode. It takes the version from the manifest and does (10000000 + manifestVersionCode) for minApi17 and (20000000 + manifestVersionCode) for minApi21.
    3. \n
\n

This will create 2 APK's when you build a release, one for Android 4 (app-minApi17-release.apk), and one for Android 5 (app-minApi21-release.apk).\nYou can also combine this with ABI splitting.

\n

When you upload both APK's to the Playstore, Google will make sure the proper APK get's distributed to the different devices.

\n

Comparison with other NativeScript HTTP Clients

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PluginAndroidiOSBackground threadsSupports form dataProper connection poolingCan replace core httpCertificate / SSL PinningWebSocketsImageCache
@nativescript/core/http:heavy_check_mark: using Java HttpURLConnection:heavy_check_mark: using NSURLSession:heavy_check_mark::x::x: bad Android implementation-:x::x:-
nativescript-background-http:heavy_check_mark: using gotev/android-upload-service:heavy_check_mark: using NSURLSession:heavy_check_mark: (with a service):x:Unknown:x::x::x::x:
nativescript-http-formdata:heavy_check_mark: using OkHttp4:heavy_check_mark: using OMGHTTPURLRQ:x::heavy_check_mark::x: bad OkHttp implementation:x::x::x::x:
nativescript-okhttp:heavy_check_mark: using OkHttp2:x::x::x::x: bad OkHttp implementation:x::x::x::x:
nativescript-https:heavy_check_mark: using OkHttp3:heavy_check_mark: using AFNetworking:heavy_check_mark::x::heavy_check_mark: shared client:white_check_mark: by manually replacing calls, data structures are (almost) the same:heavy_check_mark::x::x:
@klippa/nativescript-http:heavy_check_mark: using OkHttp4:heavy_check_mark: using NSURLSession:heavy_check_mark::heavy_check_mark::heavy_check_mark: shared client:heavy_check_mark: automatically and manually:heavy_check_mark::heavy_check_mark::heavy_check_mark:
\n

Implementation differences with NativeScript Core HTTP

\n\n

API

\n

Form data

\n

By default this client behaves the same as the Core HTTP for FormData objects, meaning it will just encode it as key=value pairs and it does not support Blob/File objects.\nIt will be posted as application/x-www-form-urlencoded unless you override it using a custom header.

\n

If you want to create multipart form data (multipart/form-data) requests, you can use the HTTPFormData class from this plugin.\nYou can create form data requests like this:

\n
import { HttpResponse } from \"@nativescript/core\";
import { Http, HTTPFormData, HTTPFormDataEntry } from \"@klippa/nativescript-http\";

const form = new HTTPFormData();
form.append(\"value\", \"Test\");
// You can also append ArrayBuffer/File/Blob/native(such as java.io.File and NSData.dataWithContentsOfFile) objects directly to form here, but please keep in mind that only the File object has the ability to set a filename. And only Blob/File objects have the ability to set a content type.
// Use HTTPFormDataEntry if you want more control.

// formFile data can be a JavaScript ArrayBuffer but also native file objects like java.io.File and NSData.dataWithContentsOfFile.
const formFile = new HTTPFormDataEntry(new java.io.File(fileLocation), \"test.png\", \"image/png\");
form.append(\"file\", formFile);

Http.request({
    url: \"https://httpbin.org/post\",
    method: \"POST\",
    content: form
}).then((response: HttpResponse) => {
    // Argument (response) is HttpResponse
}, (e) => {
});
\n

Note: this does not work with the Angular HTTPClient, because it tries to transform the HTTPFormData to json. Use the request() method for Multipart posting.

\n

Controlling image decode (Android only)

\n

The NativeScript HTTP implementation always tries to decode responses as image to make sure toImage() works fast.\nHowever, a lot of times you don't want it to do this, as you are not expecting images.\nBy default this plugin only works like this when the endpoint returns a proper image content type (ImageParseMethod.CONTENTTYPE).\nWith this method you can control this behaviour, with ImageParseMethod.ALWAYS you revert to Core HTTP behaviour, with ImageParseMethod.NEVER you can completely disable it.

\n

Note: only has affect on Android, on iOS image decoding already only happens when you use toImage().

\n
import { setImageParseMethod, ImageParseMethod } from \"@klippa/nativescript-http\";

// Add this line where you want to change the image parse mode.
// Options are: NEVER/CONTENTTYPE/ALWAYS.
setImageParseMethod(ImageParseMethod.ALWAYS);
\n

Controlling cookies

\n

Clear all cookies:

\n
import { clearCookies } from \"@klippa/nativescript-http\";

// Add this line where you want to clear cookies.
clearCookies();
\n

Controlling concurrency / connection pool limits

\n

Note: only the domain limit has effect on iOS.

\n
import { setConcurrencyLimits } from \"@klippa/nativescript-http\";

// Add this line where you want to set the concurrency limits.
// First argument is total limit, second per domain.
setConcurrencyLimits(20, 5);
\n

Setting a global User Agent

\n
import { setUserAgent } from \"@klippa/nativescript-http\";

// Add this line where you want to set the user agent.
setUserAgent(\"MyCoolApp\");
\n

WebSockets

\n

Note: certificate pinning is not available for websockets on iOS. Sadly SocketRocket removed support for that.

\n

Creating a WebSocket is quite simple in this plugin:

\n
import { newWebsocketConnection } from \"@klippa/nativescript-http/websocket\";

newWebsocketConnection({
    url: \"wss://echo.websocket.org\",
    method: \"GET\",
}, {
    // It's important to wrap callbacks in ngZone for Angular when you do anything binding related.
    // If you don't do this, Angular won't update the views.
    onClosed: (code: number, reason: string) => {
        // Invoked when both peers have indicated that no more messages will be transmitted and the connection has been successfully released.
        // No further calls to this callback will be made.
        console.log(\"onClosed\", code, reason);
    },
    onFailure: (error) => {
        // Invoked when a web socket has been closed due to an error reading from or writing to the network.
        // Both outgoing and incoming messages may have been lost. No further calls to this callback will be made.
        console.log(\"onFailure\", error);
    },
    onOpen: () => {
        // Invoked when a web socket has been accepted by the remote peer and may begin transmitting messages.
        console.log(\"onOpen\");
    },
    onClosing: (code: number, reason: string) => {
        // Invoked when the remote peer has indicated that no more incoming messages will be transmitted.
        // This method will not be called on iOS.
        console.log(\"onClosing\", code, reason);
    },
    onMessage: (text: string) => {
        // Invoked when a text (type 0x1) message has been received.
        console.log(\"onMessage\", text);
    },
    onBinaryMessage: (data: ArrayBuffer) => {
        // Invoked when a binary (type 0x2) message has been received.
        console.log(\"onBinaryMessage\", data);
    }
}).then((webSocket) => {
    // With the webSocket object you can send messages and close the connection.
    // Receiving a WebSocket here does not mean the connection worked, you have to check onFailure and onOpen for that.
});
\n

Certificate pinning

\n

Please read about certificate pinning before you enable it.\nIt can have serious consequences. Good articles are here and here.

\n

You can use this question on Stack Overflow to learn how to get the certificate hashes.

\n

Always provide at least one backup pin

\n

In order to prevent accidentally locking users out of your app, make sure you have at least one backup pin and that you have procedures in place to transition to using the backup pin if your primary pin can no longer be used. For example, if you pin to the public key of your server's certificate, you should generate a backup key that is stored somewhere safe. If you pin to an intermediate CA or a root CA, then you should also select an alternative CA that you are willing to switch to if your current CA (or their intermediate CA) becomes invalid for some reason.

\n

If you do not have a backup pin, you could inadvertently prevent your app from working until you released a new version of your app, and your users updated it. One such incident led to a bank having to ask their CA to issue a new certificate using a deprecated intermediate CA in order to allow their users to use the app, or face weeks of the app being unusable.

\n
import { certificatePinningAdd, certificatePinningClear } from \"@klippa/nativescript-http\";

// Add this line where you want to pin the certificate to a specific domain. The second argument are the certificate hashes that you want to pin.
// You can use *.mydomain.com to also use this for direct subdomains, and **.mydomain.com for any subdomain.
// Note: for iOS, *.publicobject.com also behaves as **.publicobject.com due to limitation in TrustKit.
// Note 2: for Android, if you use the older version of OkHttp, the **. prefix does not work.
// Note 3: for iOS, you need to have at least 2 hashes, because Trustkit requires you to have a backup certificate.
certificatePinningAdd(\"mydomain.com\", [\"DCU5TkA8n3L8+QM7dyTjfRlxWibigF+1cxMzRhlJV4=\", \"Lh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg=\", \"Vjs8r4z+80wjNcr1YKepWQboSIRi63WsWXhIMN+eWys=\"]);

// Use this to clear all certificate pins.
certificatePinningClear();
\n

Roadmap

\n\n

About Klippa

\n

Klippa is a scale-up from Groningen, The Netherlands and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.

\n

We help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.

\n

License

\n

The MIT License (MIT)

\n","downloadStats":{"lastDay":15,"lastWeek":129,"lastMonth":1341}},"@nativescript-community/gps":{"name":"@nativescript-community/gps","version":"3.1.10","license":"MIT","readme":"\n\n

@nativescript-community/gps

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Tracks GPS location updates regardless of the app state. Does not depend on Google Play Services.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/gps

\n

\n

Usage

\n

Here is a simple example. You can find more in the doc here

\n
import { GPS } from '@nativescript-community/gps';

const gps = new GPS();
const location = await gps.getCurrentLocation<LatLonKeys>({
    minimumUpdateTime,
    desiredAccuracy,
    timeout,
    skipPermissionCheck: true
});
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":7,"lastWeek":21,"lastMonth":399}},"@nativescript-community/ui-material-switch":{"name":"@nativescript-community/ui-material-switch","version":"7.2.4","license":"Apache-2.0","readme":"

NativeScript Material Switch

\n

Material Design's Switch component for NativeScript.

\n

\"npm\"\n\"npm\"

\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Changelog
    3. \n
  3. FAQ
    4. \n
  4. Usage\n\n
    5. \n
  5. API
    6. \n
\n

Installation

\n

For NativeScript 7.0+

\n\n

\n

For NativeScript 6.x

\n\n

\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Changelog

\n

FAQ

\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element

\n

XML

\n
<Page xmlns:mdp=\"@nativescript-community/ui-material-switch\">
    <StackLayout horizontalAlignment=\"center\">
        <mdp:Switch />
   </StackLayout>
</Page>
\n

CSS

\n
mdswitch{
    ripple-color: blue;
    elevation: 4;
}
\n

\n

NativeScript + Angular

\n
import { NativeScriptMaterialSwitchModule } from \"@nativescript-community/ui-material-switch/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialSwitchModule,
        ...
    ],
    ...
})
\n
<MDSwitch v-model=\"value\"></MDSwitch>
\n

\n

NativeScript + Vue

\n
import SwitchPlugin from '@nativescript-community/ui-material-switch/vue';

Vue.use(SwitchPlugin);
\n
<MDSwitch></MDSwitch>
\n

API

\n

Attributes

\n

Inherits from NativeScript Switch so it already has all the same attributes.

\n","downloadStats":{"lastDay":0,"lastWeek":32,"lastMonth":406}},"angular2-loki":{"name":"angular2-loki","version":"1.0.0","license":"MIT","readme":"

angular2-loki

\n

Lokijs for angular2, Ionic 2, NativeScript with Angualr.

\n

How to use

\n
npm i angualr2-loki --save
\n
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LokiModule } from './loki/loki.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LokiModule,
    .....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
\n
import { Component } from '@angular/core';
import { LokiService } from 'angular2-loki';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private loki: LokiService) {
    let db = loki.init('mydb.txt');
    // db will export lokijs object
    // full docs at https://rawgit.com/techfort/LokiJS/master/jsdoc/Loki.html
    let users = db.addCollection('users');
    users.insert({
        name: 'Odin',
        age: 50,
        address: 'Asgard'
    });

    console.log(users.findOne({ name: 'Odin' }));
  }
}
\n","downloadStats":{"lastDay":1,"lastWeek":3,"lastMonth":28}},"@nstudio/xplat-utils":{"name":"@nstudio/xplat-utils","version":"17.0.1","license":"MIT","readme":"

Cross-platform (xplat) tools for Nx workspaces

\n

\n
\n

\"Build\n\"License\"\n\"NPM

\n
\n
\n

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

\n

Currently supported platforms

\n\n

Quickstart

\n
npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.
\n

Init workspace

\n

Install the @nx/js plugin.

\n
npm install @nx/js -D
\n

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install the tools:

\n
npm install @nstudio/xplat -D
\n

You are now ready to create apps:

\n
npx nx g @nstudio/xplat:app
\n

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

\n

App generation examples

\n

The additional app generators can be used as follows:

\n

Electron

\n

Electron app generator can use any web app in the workspace as it's target.

\n

If you don't have a web app yet, create one first:

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose web

\n
\n

You can now use the web app as the Electron target:

\n
npx nx g @nstudio/xplat:app desktop --target=web-sample
\n
\n

choose electron

\n
\n

Develop with:

\n
npm run start.electron.desktop
\n

Ionic

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose ionic

\n
\n

Develop in browser with:

\n
npx nx serve ionic-sample
\n

Build Ionic app:

\n
npx nx build ionic-sample
\n

A. Capacitor iOS - Prepare for development

\n
npm run prepare.ionic.sample.ios
\n

You can now open in Xcode for further development:

\n
npm run open.ionic.sample.ios
\n

B. Capacitor Android - Prepare for development

\n
npm run prepare.ionic.sample.android
\n

You can now open in Android Studio for further development:

\n
npm run open.ionic.sample.android
\n

NativeScript

\n
nx g @nstudio/xplat:app mobile
\n
\n

choose nativescript

\n
\n

A. iOS

\n
npx nx run nativescript-mobile:ios
\n

B. Android

\n
npx nx run nativescript-mobile:android
\n

Documentation

\n\n

Talks

\n\n

Recommended extra tooling

\n\n

Example repos for different scenarios

\n\n

Context

\n\n","downloadStats":{"lastDay":527,"lastWeek":2165,"lastMonth":10360}},"@nativescript/imagepicker":{"name":"@nativescript/imagepicker","version":"3.0.0","license":"Apache-2.0","readme":"

@nativescript/imagepicker

\n

Contents

\n\n

Intro

\n

Imagepicker plugin supporting both single and multiple selection.

\n\n

Installation

\n

Install the plugin by running the following command in the root directory of your app.

\n
npm install @nativescript/imagepicker
\n

Note: Version 3.0 contains breaking changes:

\n\n

Note: Version 2.0 contains breaking changes. In order supply more information about your selection, the ImageSource asset is nested in the response so you'll need to update your code to use result.asset instead of result as your src for your Images.

\n

Android required permissions

\n

Add the following permissions to the App_Resources/Android/src/main/AndroidManifest.xml file:

\n\n
<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

<application android:requestLegacyExternalStorage=\"true\" ... >
    ...
  </application>
\n\n
<uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />

<uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
\n

See the complete example here.

\n

iOS required permissions

\n

Using the plugin on iOS requires the NSPhotoLibraryUsageDescription permission. Modify the app/App_Resources/iOS/Info.plist file to add it as follows:

\n
<key>NSPhotoLibraryUsageDescription</key>
<string>Description text goes here</string>
\n

Apple App Store might reject your app if you do not describe why you need this permission. The default message Requires access to photo library. might not be enough for the App Store reviewers.

\n

Pick images

\n

To pick images (and/or videos) with the plugin, take the steps below:

\n
    \n
  1. Import the plugin
    2. \n
\n\n
import * as imagePickerPlugin from \"@nativescript/imagepicker\";
\n
    \n
  1. Instantiate the picker with selection mode
    2. \n
\n

Instantiate the picker with selection mode by calling the create funciton of the plugin passing it an object that specifies mode(single or multiple) of media assets selection.

\n\n
let imagePickerObj: ImagePicker = imagePickerPlugin.create({
    mode: \"single\"});
\n
    \n
  1. Pick the images
    2. \n
\n\n\n
imagePickerObj
    .authorize()
    .then((authResult) => {
        if(authResult.authorized) {
            return imagePickerObj.present()
                .then(function(selection) {
                    selection.forEach(function(selected) {
                        this.imageSource = selected.asset;
                        this.type = selected.type;
                        this.filesize = selected.filesize;
                        //etc
                    });
                });
        } else {
            // process authorization not granted.
        }
    })    
    .catch(function (e) {
        // process error
    });
\n

Demo

\n

You can play with the plugin on StackBlitz at any of the following links:

\n\n

API

\n

ImagePicker class

\n

The class that provides the media selection API. It offers the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
constructor(options: Options)ImagePickerInstanciates the ImagePicker class with the optional options parameter. See Options
authorize()Promise<AuthorizationResult>Requests the required permissions. Call it before calling present(). In case of a failed authorization, consider notifying the user for degraded functionality. The returned AuthorizationResult will have it's authorized property set to true if permission has been granted.
present()Promise<ImagePickerSelection[]>Presents the image picker UI.
create(options: Options, hostView: View)ImagePickerCreates an instance of the ImagePicker class. The hostView parameter can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.
\n

Options

\n

An object passed to the create method to specify the characteristics of a media selection.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDefaultDescription
modestringmultipleThe mode of the imagepicker. Possible values are single for single selection and multiple for multiple selection.
minimumNumberOfSelectionnumber0Optional: (iOS-only) The minumum number of selected assets.
maximumNumberOfSelectionnumber0Optional: (iOS-only) The maximum number of selected assets.
showsNumberOfSelectedAssetsbooleantrueOptional: (iOS-only) Display the number of selected assets.
promptstringundefinedOptional: (iOS-only) Display prompt text when selecting assets.
numberOfColumnsInPortraitnumber4Optional: (iOS-only) Sets the number of columns in Portrait orientation
numberOfColumnsInLandscapenumber7Optional: (iOS-only) Sets the number of columns in Landscape orientation.
mediaTypeImagePickerMediaTypeAnyOptional: The type of media asset to pick whether to pick Image/Video/Any type of assets.
copyToAppFolderstringundefinedOptional: If passed, a new folder will be created in your applications folder and the asset will be copied there.
renameFileTostringundefinedOptional: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended.
showAdvanced booleanfalseOptional:(Android-only) Show internal and removable storage options on Android (WARNING: not supported officially).
android{read_external_storage: string;}Optional: (Android-only) Provides a reason for permission request to access external storage on API level above 23.
\n

ImagePickerMediaType

\n

The type of media assets to be selected.

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":509,"lastWeek":2429,"lastMonth":9906}},"@nativescript-community/ui-carto":{"name":"@nativescript-community/ui-carto","version":"1.8.15","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-carto

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin for CARTO Mobile SDK
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-carto

\n

\n

API

\n

The API documentation for this plugin is available here.

\n

\n

Usage in Svelte

\n

Examples

\n\n

\n

Usage in Vue

\n

Examples

\n\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@nativescript-community/ui-carto.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":546}},"@oliverphaser/nativescript-bitmap-factory":{"name":"@oliverphaser/nativescript-bitmap-factory","version":"1.0.16","license":"MIT","readme":"

\"npm\"\n\"apple\"\n\"android\"\n
\n\"support\"

\n

NativeScript Bitmap Factory

\n

A NativeScript module for creating and manipulating bitmap images.

\n

NativeScript 8

\n

This will work only on NativeScript 8.

\n

NativeScript Toolbox

\n

The originial module is part of nativescript-toolbox.

\n

Platforms

\n\n

Installation

\n
ns plugin add @oliverphaser/nativescript-bitmap-factory
\n

Usage

\n
import BitmapFactory = require(\"@oliverphaser/nativescript-bitmap-factory\");
import KnownColors = require(\"@nativescript/core/color/known-colors\");

// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);

// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
    // draw an oval with a size of 300x150
    // and start at position x=0, y=75
    // and use
    // \"red\" as border color and \"black\" as background color.
    bmp.drawOval(\"300x150\", \"0,75\",
                 KnownColors.Red, KnownColors.Black);
      
    // draw a circle with a radius of 80
    // at the center of the bitmap (null => default)
    // and use
    // \"dark green\" as border color           
    bmp.drawCircle(80, null,
                   KnownColors.DarkGreen);
                
    // draws an arc with a size of 100x200
    // at x=10 and y=20
    // beginning at angle 0 with a sweep angle of 90 degrees
    // and a black border and a yellow fill color    
    bmp.drawArc(\"100x200\", \"10,20\",
                0, 90,
                KnownColors.Black, KnownColors.Yellow);
                   
    // set a yellow point at x=160, y=150
    bmp.setPoint(\"160,150\", \"ff0\");
    
    // draws a line from (0|150) to (300|75)
    // with blue color
    bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
    
    // writes a text in yellow color
    // at x=100, y=100
    // by using \"Roboto\" as font
    // with a size of 10
    bmp.writeText(\"This is a test!\", \"100,100\", {
        color: KnownColors.Yellow,
        size: 10,
        name: \"Roboto\"
    });
    
    // returns the current bitmap as data URL
    // which can be used as ImageSource
    // in JPEG format with a quality of 75%
    var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and in Base64 format
    var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and as ImageSource
    var imgSrc = bmp.toImageSource();
});
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
asBitmapReturns a value as wrapped bitmap.
createCreates a new bitmap instance.
getDefaultOptionsReturns the default options for creating a new bitmap.
makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
setDefaultOptionsSets the default options for creating a new bitmap.
\n

Platform specific stuff

\n

You can access the nativeObject property to access the platform specific object.

\n

For Android this is a Bitmap object and for iOS this is an UIImage object.

\n

To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

\n

Android

\n

You also can access the underlying Canvas object by __canvas property.

\n

iOS

\n

You also can access the underlying CGImage object by__CGImage property.

\n

Data types

\n

IArgb

\n

Stores data of an RGB value with alpha value.

\n

These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

\n
interface IArgb {
    /**
     * Gets the alpha value.
     */
    a: number;

    /**
     * Gets the red value.
     */
    r: number;

    /**
     * Gets the green value.
     */
    g: number;

    /**
     * Gets the blue value.
     */
    b: number;
}
\n

IBitmapData

\n

Used by toObject() method.

\n
interface IBitmapData {
    /**
     * Gets the data as Base64 string.
     */
    base64: string;

    /**
     * Gets the mime type.
     */
    mime: string;
}
\n

IFont

\n

Font settings.

\n
interface IFont {
    /**
     * Anti alias or not.
     */
    antiAlias?: boolean;

    /**
     * Gets the custom forground color.
     */
    color?: string | number | IArgb;
    
    /**
     * Gets the name.
     */
    name?: string;

    /**
     * Gets the size.
     */
    size?: number;
}
\n

IPoint2D

\n

Coordinates, can also be a string like 0,0 or 150|300.

\n
interface IPoint2D {
    /**
     * Gets the X coordinate.
     */
    x: number;
    
    /**
     * Gets the Y coordinate.
     */
    y: number;
}
\n

IPoint2D

\n

Size, can also be a string like 0,0 or 150x300.

\n
interface ISize {
    /**
     * Gets the height.
     */
    height: number;
    
    /**
     * Gets the width.
     */
    width: number;
}
\n

OutputFormat

\n

Supported output formats.

\n
enum OutputFormat {
    /**
     * PNG
     */
    PNG = 1,

    /**
     * JPEG
     */
    JPEG = 2,
}
\n

Bitmap

\n
interface IBitmap {
    /**
     * Get the android specific object provided by 'application' module.
     */
    android: AndroidApplication;

    /**
     * Clones that bitmap.
     */
    clone(): IBitmap;

    /**
     * Crops that bitmap and returns its copy.
     */
    crop(leftTop?: IPoint2D | string,
         size?: ISize | string): IBitmap;

    /**
     * Gets or sets the default color.
     */
    defaultColor: IPoint2D | string | number;

    /**
     * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
     */
    dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                        tag?: T): TResult;

    /**
     * Draws a circle.
     */
    drawCircle(radius?: number,
               center?: IPoint2D | string,
               color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws an arc.
     */
    drawArc(size?: ISize | string,
            leftTop?: IPoint2D | string,
            startAngle?: number,
            sweepAngle?: number,
            color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a line.
     */
    drawLine(start: IPoint2D | string, end: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Draws an oval circle.
     */
    drawOval(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a rectangle.
     */
    drawRect(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Gets the color of a point.
     */
    getPoint(coordinates?: IPoint2D | string): IArgb;

    /**
     * Gets the height of the bitmap.
     */
    height: number;

    /**
     * Get the iOS specific object provided by 'application' module.
     */
    ios: iOSApplication;

    /**
     * Inserts another image into that bitmap.
     */
    insert(other: any,
           leftTop?: IPoint2D | string): IBitmap;
    
    /**
     * Gets if the object has been disposed or not.
     */
    isDisposed: boolean;

    /**
     * Gets the native platform specific object that represents that bitmap.
     */
    nativeObject: any;

    /**
     * Normalizes a color value.
     */
    normalizeColor(value: string | number | IArgb): IArgb;

    /**
     * Creates a copy of that bitmap with a new size.
     */
    resize(newSize: ISize | string): IBitmap;

    /**
     * Resizes that image by defining a new height by keeping ratio.
     */
    resizeHeight(newHeight: number): IBitmap;

    /**
     * Resizes that image by defining a new (maximum) size by keeping ratio.
     */
    resizeMax(maxSize: number): IBitmap;

    /**
     * Resizes that image by defining a new width by keeping ratio.
     */
    resizeWidth(newWidth: number): IBitmap;

    /**
     * Rotates the image.
     */
    rotate(degrees?: number): IBitmap;

    /**
     * Sets a pixel / point.
     */
    setPoint(coordinates?: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Gets the size.
     */
    size: ISize;

    /**
     * Converts that image to a Base64 string.
     */
    toBase64(format?: OutputFormat, quality?: number): string;

    /**
     * Converts that image to a data URL.
     */
    toDataUrl(format?: OutputFormat, quality?: number): string;

    /**
     * Returns that image as ImageSource.
     */
    toImageSource(): ImageSource;

    /**
     * Converts that image to an object.
     */
    toObject(format?: OutputFormat, quality?: number): IBitmapData;

    /**
     * Writes a text.
     */
    writeText(txt: any,
              leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

    /**
     * Gets the width of the bitmap.
     */
    width: number;
}
\n

Contributors

\n\n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":256}},"swtc-nativescript-brorand":{"name":"swtc-nativescript-brorand","version":"1.1.2","license":"MIT","readme":"

Brorand

\n

LICENSE

\n

This software is licensed under the MIT License.

\n

Copyright Fedor Indutny, 2014.

\n

Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

\n

The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

\n

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

\n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":19}},"nativescript-connectycube":{"name":"nativescript-connectycube","version":"3.27.4","license":"Apache-2.0","readme":"

ConnectyCube NativeScript SDK for messaging and video calling apps

\n

ConnectyCube NativeScript SDK.

\n

ConnectyCube is a messaging and video calling platform for iOS, Android, Web, React Native, NativeScript and Cordova apps.

\n

Check our comprehensive guide for NativeScript SDK.

\n

Features

\n\n

For more details check the ConnectyCube features page

\n

Connect SDK

\n

Simply install the package in a normal way:

\n
npm install nativescript-connectycube --save
\n

and you're ready to go:

\n
import ConnectyCube from 'nativescript-connectycube'

const credentials = {
    appId: 21,
    authKey: 'hhf87hfushuiwef',
    authSecret: 'jjsdf898hfsdfk'
};

const config = {
    debug: { mode: 1 }
};

ConnectyCube.init(credentials, config);
\n

Contribution

\n

See more information at CONTRIBUTING.md

\n

License

\n

Apache 2.0

\n","downloadStats":{"lastDay":1,"lastWeek":197,"lastMonth":304}},"nativescript-sentry.io":{"name":"nativescript-sentry.io","version":"1.0.4","license":"ISC","readme":"

Sentry.io for nativescript

\n

This plugin uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

\n

NOTE: If you have a native exeption and the app exits the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior

\n

Installation

\n
tns plugin add nativescript-sentry.io
\n

Usage

\n

Without Angular

\n
import { Sentry } from 'nativescript-sentry.io';
const dsn = 'https://<key>:<secret>@host/<project>';
Sentry.init(dsn);
\n

With Angular

\n
import { SentryModule } from 'nativescript-sentry.io/angular';

NgModule({
  ...
  imports: [
       SentryModule.forRoot({dsn: 'https://<key>:<secret>@host/<project>'})
  ],
\n

Note: this plugin adds a custom ErrorHandler and automatically provides it

\n

API

\n

Init Sentry

\n

Sentry.init(dsn: string, options: SentryOptions)

\n

Capture Exception

\n

Sentry.captureException(exeption: Error, options: SentryOptions)

\n

Example:

\n
try {
    throw 'try catch Exception example'
} catch(error) {
    Sentry.captureException(error, {});
}
\n

Capture Message

\n

Sentry.captureMessage(message: string, options: SentryOptions)

\n

Capture BreadCrumb

\n

Sentry.captureBreadcrumb(breadcrumb:SentryBreadcrumb)

\n

Set Current user

\n

Sentry.setContextUser(user: SentryUser)

\n

Context Tags

\n

Sentry.setContextTags(tags: any)

\n

Context Extra

\n

Sentry.setContextExtra(extra: any)

\n

Clear context

\n

`Sentry.clearContext()``

\n","downloadStats":{"lastDay":2,"lastWeek":15,"lastMonth":71}},"@nativescript-community/ui-pulltorefresh":{"name":"@nativescript-community/ui-pulltorefresh","version":"2.5.3","license":"MIT","readme":"\n

NativeScript-PullToRefresh

\n\n

\nNativeScript plugin to use Pull to Refresh on any view.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation

\n

ns plugin add @nativescript-community/ui-pulltorefresh

\n

Android - SwipeRefreshLayout

\n

iOS - UIRefreshControl

\n

Sample Screen

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Android\"iOS
\n

Usage

\n

NativeScript Core

\n

XML

\n
<page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:PullRefresh=\"@nativescript-community/ui-pulltorefresh\"
      loaded=\"pageLoaded\">
    <PullRefresh:PullToRefresh refresh=\"refreshList\">
        <list-view items=\"{{ users }}\">
            <list-view.itemTemplate>
                <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
            </list-view.itemTemplate>
        </list-view>
    </PullRefresh:PullToRefresh>
</page>
\n

JS

\n
function refreshList(args) {
  // Get reference to the PullToRefresh component;
  var pullRefresh = args.object;

  // Do work here... and when done call set refreshing property to false to stop the refreshing
  loadItems().then(
    resp => {
      // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
      setTimeout(() => {
        pullRefresh.refreshing = false;
      }, 1000);
    },
    err => {
      pullRefresh.refreshing = false;
    }
  );
}
exports.refreshList = refreshList;
\n

Angular NativeScript

\n
import { registerElement } from '@nativescript/angular';
import { PullToRefresh } from '@nativescript-community/ui-pulltorefresh';
registerElement('PullToRefresh', () => PullToRefresh);

refreshList(args) {
         const pullRefresh = args.object;
         setTimeout(function () {
            pullRefresh.refreshing = false;
         }, 1000);
    }
\n

HTML

\n
<PullToRefresh (refresh)=\"refreshList($event)\">
  <ListView [items]=\"itemList\">
    <template let-item=\"item\">
      <label [text]=\"item.id\"></label>
    </template>
  </ListView>
</PullToRefresh>
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';

Vue.registerElement(
  'PullToRefresh',
  () => require('@nativescript-community/ui-pulltorefresh').PullToRefresh
);
\n

Component

\n
<template>
  <Page>
    <PullToRefresh @refresh=\"refreshList\">
      <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
        <v-template>
          <!-- Shows the list item label in the default color and style. -->
          <label :text=\"item.text\" />
        </v-template>
      </ListView>
    </PullToRefresh>
  </Page>
</template>

<script>
export default {
  methods: {
    refreshList(args) {
      var pullRefresh = args.object;
      setTimeout(function() {
        pullRefresh.refreshing = false;
      }, 1000);
    }
  }
};
</script>
\n

Properties

\n\n

Changelog

\n

Contributing

\n","downloadStats":{"lastDay":290,"lastWeek":1355,"lastMonth":5591}},"nativescript-test":{"name":"nativescript-test","version":"1.0.8","license":"Apache-2.0","readme":"

nativescript-test

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-test
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":11,"lastMonth":30}},"nativescript-sqlite":{"name":"nativescript-sqlite","version":"2.8.6","license":"MIT","readme":"

\"License\" \"License\" \"Proplugins\" \"NativeScriptCore\" \"Twitter

\n

NativeScript sqlite

\n

A NativeScript module providing sqlite actions for Android and iOS. (with multi-threading)

\n

License

\n

There are two possible licenses this is released under;

\n

\"npm\"\n\"license\"

\n

NativeScript-Sqlite Free version

\n

This part of the library is released under the MIT License, meaning you are free to include this code any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please see http://nativescript.tools

\n

NativeScript-SQLite Commercial/Encrypted Version

\n

This also has a commercial license version, allowing you to use the commercial version of the plugin in your projects.

\n

The commercial version comes with the following enhancements:

\n\n

Note: On iOS when installing the encryption, you might have to delete the following file:\nnode_modules/nativescript-sqlite/platforms/ios/module.modulemap. And then run a tns platform clean ios\nThis file is REQUIRED for normal un-encrypted sqlite; but it can conflict with encryption on some versions of XCode. When you run the app; if you get a console line about encryption not being linked in; then this is the cause.

\n

Example Application

\n

An example application can be downloaded or cloned from https://github.com/NathanaelA/nativescript-sqlite\nTo use you need to do:

\n\n

optional

\n\n

Then run the app the normal way you would.

\n

Installation

\n

Run tns plugin add nativescript-sqlite in your ROOT directory of your project.

\n

optional

\n\n

Webpacking (NativeScript 8 / Webpack 5)

\n

You don't have to do anything! It will automatically add all *.sqlite files in your project.

\n

Webpacking (NativeScript 5, 6 & 7 / Webpack 4)

\n

If you are including your own sqlite database embedded in your app; and you are webpacking then around line 100 of the webpack.config.js is\na section that looks like so:

\n
            // Copy assets to out dir. Add your own globs as needed.
            new CopyWebpackPlugin([
                { from: { glob: \"fonts/**\" } },
                { from: { glob: \"**/*.jpg\" } },
                { from: { glob: \"**/*.png\" } },
                { from: { glob: \"**/*.sqlite\" }},
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] })
\n

Add a new line { from: { glob: "**/*.sqlite" } }, so that it will pick up your sqlite file while bundling the application.

\n

In addition, if you are not using the Sync, Commercial or Encrypted plugin; you would need to add to the webpack.config.js file any you are not using:

\n
        externals.push('nativescript-sqlite-commercial');
        externals.push('nativescript-sqlite-encrypted');
        externals.push('nativescript-sqlite-sync');
\n

so that it ignores those during webpacking, right below the line that says\n'const externals = nsWebpack.getConvertedExternals(env.externals)'

\n

Usage

\n

To use the sqlite module you must first require() it:

\n
const Sqlite = require( \"nativescript-sqlite\" );
\n

(or with TypeScript, if using the commercial version)

\n
import Sqlite from \"nativescript-sqlite\";
\n

After you have a reference to the module you can then call the available methods.\nThe database defaults to returning result sets in arrays; i.e. [[field1, field2, ...], [field1, field2], [field1, field2] ...] you can change this to returning them in objects if you desire.

\n

Shipping a Database with the application

\n

If you are planning on shipping a database with the application; drop the file in your projects /app folder (src if using Angular). The Sqlite.copyDatabase("database_name") will copy the database from that folder to the proper database folder on your platform.

\n

Callbacks

\n\n

Promises

\n\n

Constants

\n\n

Methods

\n

new Sqlite(dbname, options, callback)

\n

promise = Sqlite(dbname, options, callback)

\n
Parameters
\n\n

You should choose either to use a promise or a callback; you can use whichever you are most comfortable with -- however, as with this example, you CAN use both if you want; but side effects WILL occur with some functions.

\n
// Promise based example
const Sqlite = require( \"nativescript-sqlite\" );

const db = await Sqlite(\"MyTable\");
console.log(\"Are we open yet (Promise based)? \", db.isOpen() ? \"Yes\" : \"No\"); // Yes
\n

or

\n
// Callback based example
const Sqlite = require( \"nativescript-sqlite\" );
new Sqlite(\"MyTable\", function(err, db) {
    if (err) {
      console.error(\"We failed to open database\", err);
    } else {
      // This should ALWAYS be true, db object is open in the \"Callback\" if no errors occurred
      console.log(\"Are we open yet (Callback based)? \", db.isOpen() ? \"Yes\" : \"No\"); // Yes
    }
});
\n

Sqlite.isSqlite()

\n
Parameters
\n\n
// my-page.js
new Sqlite(\"test.db\", function(err, db) {
  console.log(\"Is a Sqlite Database:\", Sqlite.isSqlite(db) ? \"Yes\" : \"No\");  // Should print \"Yes\"
});
\n

Sqlite.exists(dbName)

\n
Parameters
\n\n

Sqlite.deleteDatabase(dbName)

\n\n

Sqlite.copyDatabase(dbName, destName)

\n\n
// If we are in Debug Code, we always delete the database first so that the latest copy of the database is used...
if (DEBUGMODE && Sqlite.exists(\"mydatabase.sqlite\")) {
  Sqlite.deleteDatabase(\"mydatabase.sqlite\");
}
if (!Sqlite.exists(\"mydatabase.sqlite\")) {
  // Example: Copying a different name to mydatabase.sqlite
  // Sqlite.copyDatabase(\"original.sqlite\", \"mydatabase.sqlite\");
  // OR copy mydatabase to where it belongs...
  Sqlite.copyDatabase(\"mydatabase.sqlite\");
}
\n

DB Methods = Returned Database Object from Constructor

\n

DB.version()

\n
Parameters
\n\n
new Sqlite(\"test.db\", function(err, db) {
  db.version(function(err, ver) {
    if (ver === 0) {
      db.execSQL(\"Create table....\");
      db.version(1); // Sets the version to 1
    }
  });
});
\n

DB.isOpen()

\n\n

DB.resultType(Sqlite.YYY)

\n
Parameters
\n\n

DB.valueType(Sqlite.YYY)

\n
Parameters
\n\n

DB.close()

\n\n

DB.execSQL(SQL statement, params, callback)

\n

DB.execSQL([multiple statements], [params], callback) - Commercial Version Feature

\n
Parameters
\n\n
// new SQLite(....
db.execSQL(\"insert into Hello (word) values (?)\", [\"Hi\"], function(err, id) {
  console.log(\"The new record id is:\", id);
});
\n
// NOTE: Sending Arrays of queries is only available in Commercial version...
// new SQLite(....
const promise = db.execSQL([\"insert into Hello (word) values (?)\", \"insert into Hello (word) values (?)\"], [[\"Hi\"], [\"Hello\"]]);
promise.then(function(ids) {
        console.log(\"The new record ids are:\", ids[0], ids[1]);
});
\n

DB.get(statement, params, callbacks)

\n

DB.get([multiple statements], [params], callback) - Commercial Version Feature

\n
Parameters
\n\n
// new SQLite(...
db.get('select * from Hello where id=?', [1], function(err, row) {
  console.log(\"Row of data was: \", row);  // Prints [[\"Field1\", \"Field2\",...]]
});
\n
// new SQLite(...
const promise = db.get('select * from Hello where id=?', [1]);
promise.then(function(row) {
    console.log(\"Row of data was: \", row);  // Prints [[\"Field1\", \"Field2\",...]]
});
\n

DB.all(query, params, callback)

\n

DB.all([multiple queries], [params], callback) - Commercial Version Feature

\n
Parameters
\n\n
// new SQLite(...
db.all('select * from Hello where id > ? and id < ?', [1,100], function(err, resultSet) {
  console.log(\"Result set is:\", resultSet); // Prints [[\"Row_1 Field_1\" \"Row_1 Field_2\",...], [\"Row 2\"...], ...]
});
\n
// new SQLite(...
const promise = db.all('select * from Hello where id > ? and id < ?', [1,100]);
promise.then(function(resultSet) {
  console.log(\"Result set is:\", resultSet); // Prints [[\"Row_1 Field_1\" \"Row_1 Field_2\",...], [\"Row 2\"...], ...]
});
\n

DB.each()

\n
Parameters
\n\n
// new SQLite(...
db.each('select * from Hello where id >= ? and id <= ?', [1, 100],
function (err, row) {
  console.log(\"Row results it:\", row); // Prints [\"Row x Field_1\", \"Row x Field 2\"...] for each row passed to it
},
function (err, count) {
  console.log(\"Rows displayed:\", count); // Prints 100  (Assuming their are a 100 rows found)
});
\n
// new SQLite(...
const promise = db.each('select * from Hello where id >= ? and id <= ?', [1, 100],
function (err, row) {
  console.log(\"Row results it:\", row); // Prints [\"Row x Field_1\", \"Row x Field 2\"...] for each row passed to it
});
promise.then(function (count) {
  console.log(\"Rows displayed:\", count); // Prints 100  (Assuming their are a 100 rows found)
});
\n

Commercial Only Features

\n

To enable the optional features

\n

To enable encryption: tns plugin add nativescript-sqlite-encrypted-1.2.1.tgz

\n

To enable commercial: tns plugin add nativescript-sqlite-commercial-1.2.0.tgz

\n

Encryption Support

\n

Pass the encryption key into database open function using the options.key and it will be applied. Please note the database itself MUST be created with encryption to use encryption. So if you create a plain database, you can not retroactively add encryption to it.
\nIf you pass a blank ("") empty key, then it will treat it as no key. But, it will still use the encrypted driver in case you need certain features from the more modern sqlite driver; but don't need encryption.

\n

Note: Enabling/Compiling in the encryption driver adds about 3 megs to the size to the application APK on android and about 2 megs to a iOS application.

\n

Encryption Upgrade

\n

There is a NEW upgrade option you can pass to the database constructor. if you were using an older version (1.3.0 or earlier) of this NS-Sqlite-Encryption.

\n\n

iOS Encryption Notes

\n

If you see SQLCipher does not seem to be linked into the application

\n

Sometimes iOS decides it really wants to bring in the native SQLite over the encrypted version.\nA couple things you can try:

\n\n

Multitasking / Multithreading

\n

The commercial version supports putting all SQL access into a background thread, so your UI doesn't freeze while doing data access. To enable; just pass in {multithreading: true} as an option when creating a new Sqlite connection.

\n

Prepared Queries

\n

DB.prepare(SQL)

\n
Parameter:
\n\n

PREPAREDSTATEMENT.execute(param1, param2, param3, optional_callback)

\n

PREPAREDSTATEMENT.execute([param1, param2, param3], optional_callback)

\n

PREPAREDSTATEMENT.execute([ [ p1, p2, p3], [p1, p2, p3], ...], optional_callback)

\n
Parameters:
\n\n

PREPAREDSATEMENT.finished()

\n\n
const prep = db.prepare('insert into names (first, last) values (?,?)');
for (let i=0;i<10;i++) {
\tprep.execute([\"Name\", i]);
}
prep.finished();
\n

Transactions

\n

DB.begin()

\n
Parameters
\n\n

DB.commit()

\n
Parameters
\n\n

DB.commitAll()

\n
Parameters
\n\n

DB.rollback()

\n
Parameters
\n\n

DB.rollbackAll()

\n
Parameters
\n\n

Tutorials

\n

Need a little more to get started? Check out these tutorials for using SQLite in a NativeScript Android and iOS application.

\n\n

Error Notes

\n\n
CREATE TABLE android_metadata ( locale TEXT );
insert into android_metadata values ('en_us');
\n

Or pass the .androidFlags value of 16 to the open statement.

\n","downloadStats":{"lastDay":105,"lastWeek":626,"lastMonth":1793}},"nativescript-drop-down":{"name":"nativescript-drop-down","version":"6.0.2","license":"Apache-2.0","readme":"

Contribution - help wanted

\n

This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

\n

Creating a PR checklist:

\n\n

Thank you for your contribution.

\n

NativeScript DropDown widget

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a UILabel with an inputView set to an UIPickerView which displays the items. For Android it wraps up the Spinner widget.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-drop-down

\n

This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Methods

\n\n

Usage

\n

You need to add xmlns:dd="nativescript-drop-down" to your page tag, and then simply use <dd:DropDown/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:dd=\"nativescript-drop-down\">
  <GridLayout rows=\"auto, auto, *\" columns=\"auto, *\">
    <dd:DropDown items=\"{{ items }}\" selectedIndex=\"{{ selectedIndex }}\" 
                 opened=\"dropDownOpened\" closed=\"dropDownClosed\" 
                 selectedIndexChanged=\"dropDownSelectedIndexChanged\"
                 row=\"0\" colSpan=\"2\" />
    <Label text=\"Selected Index:\" row=\"1\" col=\"0\" fontSize=\"18\" verticalAlignment=\"bottom\"/>
    <TextField text=\"{{ selectedIndex }}\" row=\"1\" col=\"1\" />
  </GridLayout>
</Page>
\n
// test-page.ts
import observable = require(\"data/observable\");
import observableArray = require(\"data/observable-array\");
import pages = require(\"ui/page\");
import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

var viewModel: observable.Observable;

export function pageLoaded(args: observable.EventData) {
    var page = <pages.Page>args.object;
    var items = new observableArray.ObservableArray();

    viewModel = new observable.Observable();

    for (var loop = 0; loop < 20; loop++) {
        items.push(\"Item \" + loop.toString());
    }

    viewModel.set(\"items\", items);
    viewModel.set(\"selectedIndex\", 15);

    page.bindingContext = viewModel;
}

export function dropDownOpened(args: EventData) {
    console.log(\"Drop Down opened\");
}

export function dropDownClosed(args: EventData) {
    console.log(\"Drop Down closed\");
}

export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
    console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
}
\n

Usage in Angular

\n
Migration to 3.0+
\n\n
registerElement(\"DropDown\", () => require(\"nativescript-drop-down/drop-down\").DropDown);`
\n\n
import { DropDownModule } from \"nativescript-drop-down/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tDropDownModule,
        //......
\t],
    //......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { DropDownModule } from \"nativescript-drop-down/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        DropDownModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <GridLayout rows=\"auto, auto, *\"
                columns=\"auto, *\">
        <DropDown #dd
                  backroundColor=\"red\"
\t\t  itemsTextAlignment=\"center\"
                  [items]=\"items\"
                  [(ngModel)]=\"selectedIndex\"
                  (selectedIndexChanged)=\"onchange($event)\"
                  (opened)=\"onopen()\"
                  (closed)=\"onclose()\"
                  row=\"0\"
                  colSpan=\"2\"></DropDown>
        <Label text=\"Selected Index:\"
               row=\"1\"
               col=\"0\"
               fontSize=\"18\"
               verticalAlignment=\"bottom\"></Label>
        <TextField [text]=\"selectedIndex\"
                   row=\"1\"
                   col=\"1\"></TextField>
    </GridLayout>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public selectedIndex = 1;
    public items: Array<string>;
 
    constructor() {
        this.items = [];
        for (var i = 0; i < 5; i++) {
            this.items.push(\"data item \" + i);
        }
    }

    public onchange(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
    }

    public onopen() {
        console.log(\"Drop Down opened.\");
    }

    public onclose() {
        console.log(\"Drop Down closed.\");
    }
}
\n
Set the selectedIndex value in Angular
\n

Get an instance of the child drop down component like this:

\n
@ViewChild('dd') dropDown: ElementRef;
// set the index programatically from the parent component
this.dropDown.nativeElement.selectedIndex = <some number from code>
\n

Working with value and display members

\n

It is a common case that you want to have one thing displayed in the drop down and then get some backend value\ntied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida)\nand then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be\nset to either Array of objects or a custom object that implements getItem(index: number): any function and length proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario:

\n
import { ValueList } from \"nativescript-drop-down\";
\n

Then you can set the items property of the DropDown to an instance of ValueList:

\n
let dd = page.getViewById<DropDown>(\"dd\");
let itemSource = new ValueList<string>([
    { value: \"FL\", display: \"Florida\" }, 
    { value: \"MI\", display: \"Michigan\" }
]);
dd.items = itemSource;
\n

This enables you to do things like:
\n1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with:

\n
dd.selectedIndex = itemSource.getIndex(\"FL\");
\n

2.You can get the backend value of what the user selected using:

\n
let selectedValue = itemSource.getValue(dd.selectedIndex);
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-drop-down
$ cd nativescript-drop-down
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":120,"lastWeek":542,"lastMonth":2254}},"@nativescript-community/xml-ui-loader":{"name":"@nativescript-community/xml-ui-loader","version":"3.3.1-alpha.3","license":"Apache-2.0","readme":"

@nativescript-community/xml-ui-loader

\n

\"npm\"\n\"npm\"

\n

This loader provides support for using @nativescript-community/xml-ui-compiler in Webpack.

\n

Installation

\n
npm install @nativescript-community/xml-ui-loader --save-dev
\n

Usage

\n

webpack.config.js

\n
const webpack = require('@nativescript/webpack');
const { getEntryDirPath, getPlatformName } = require('@nativescript/webpack/dist/helpers/platform');
const { chainLoaderConfiguration } = require(\"@nativescript-community/xml-ui-loader/helpers\");

module.exports = (env) => {
  webpack.init(env);

  // Learn how to customize:
  // https://docs.nativescript.org/webpack

  webpack.chainWebpack((config) => {
    chainLoaderConfiguration(config, {
      appPath: getEntryDirPath(),
      platform: getPlatformName()
    });
  });

  return webpack.resolveConfig();
};
\n

There are also few preprocessing options that are useful for applying output customizations.

\n
chainLoaderConfiguration(config, {
  appPath: getEntryDirPath(),
  platform: getPlatformName(),
  useDataBinding: false, // Set this to false if you don't want to use data binding system
  preprocess: {
    // Format attribute value
    attributeValueFormatter: (value, attributeName, tagName, attributes) => value.toUpperCase(),
    // Manage AST result
    transformAst: (ast, generateFunc) => generateFunc(ast).code,
  }
});
\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":480}},"@gavant/nativescript-exoplayer":{"name":"@gavant/nativescript-exoplayer","version":"4.0.3","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

NativeScript ExoPlayer

\n

A NativeScript plugin to provide the ability to play local and remote videos using Google's ExoPlayer.

\n

Developed by

\n

\"MasterTech\"

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Google ExoPlayeriOS AVPlayer
For a 100% NativeScript plugin use the NativeScript-VideoPlayer.
\n

Based on

\n

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

\n

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

\n

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

\n

Sample Usage

\n
            Sample 1             |              Sample 2\n
\n

-------------------------------------| -------------------------------------\n\"Sample | \"Sample

\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add nativescript-exoplayer

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:exoplayer=\"nativescript-exoplayer\">
        <StackLayout>
               
            <exoplayer:Video id=\"nativeexoplayer\"
            controls=\"true\" finished=\"{{ videoFinished }}\"
            loop=\"true\" autoplay=\"false\" height=\"280\" 
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
            
        </StackLayout>
</Page>
\n

Angular Native (NativeScript Angular) Usage

\n
// somewhere at top of your component or bootstrap file
import {registerElement} from \"nativescript-angular/element-registry\";
registerElement(\"exoplayer\", () => require(\"nativescript-exoplayer\").Video);
// documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
\n

With AngularNative you have to explicitly close all components so the correct template code is below.

\n
  <exoplayer
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\" 
      height=\"300\"></exoplayer>
\n

Properties

\n\n

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n\n

By default, subtitle support is off. Use this flag to turn them on.

\n\n

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

\n\n

Set if the video should start playing as soon as possible or to wait for user interaction.

\n\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n\n

Set to use the native video player's media playback controls.

\n\n

Mutes the native video player.

\n\n

Sets the native video player to loop once playback has finished.

\n\n

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

\n

iOS:

\n\n

See here for explanation.

\n\n

Attribute to specify an event callback to execute when the video is ready to play.

\n\n

Attribute to specify an event callback to execute when the video has finished seekToTime.

\n\n

If set to true, currentTimeUpdated callback is possible.

\n\n

Attribute to specify an event callback to execute when the time is updated.

\n

API

\n\n

Android only

\n\n

Breaking Changes

\n\n

Contributors

\n\n","downloadStats":{"lastDay":1,"lastWeek":2,"lastMonth":41}},"nativescript-socketio":{"name":"nativescript-socketio","version":"3.3.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

nativescript-socketio

\n

Usage

\n
npm install nativescript-socketio
\n

or

\n
tns plugin add nativescript-socketio
\n

NativeScript Core

\n

Set connection string and options then connect

\n
var SocketIO = require('nativescript-socketio').SocketIO; 
var socketIO = new SocketIO(url, opts);
\n

Alternatively:

\n
import { SocketIO } from 'nativescript-socketio';
var socketIO = new SocketIO(url, opts);
\n

Connect to server

\n
socketIO.connect()
\n

Send data to the server

\n
socketIO.emit(event,data)
\n

Listen for data

\n
socketIO.on(event,callback)
\n

Set instance

\n
new SocketIO(null,null,oldInstance)
\n

Angular

\n
// app.module.ts
import { SocketIOModule } from \"nativescript-socketio/angular\";

@NgModule({
  imports: [
    SocketIOModule.forRoot(server),
  ]
})
\n
// app.component.ts
import { Component, OnInit, OnDestroy } from \"@angular/core\";
import { SocketIO } from \"nativescript-socketio\";

@Component({
  // ...
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private socketIO: SocketIO) { }

  ngOnInit() {
    this.socketIO.connect();
  }

  ngOnDestroy() {
    this.socketIO.disconnect();
  }
}
\n
// test.component.ts
import { Component, OnInit, NgZone } from \"@angular/core\";
import { SocketIO } from \"nativescript-socketio\";

@Component({
  // ...
})
export class TestComponent implements OnInit {
  constructor(
    private socketIO: SocketIO,
    private ngZone: NgZone
  ) { }

  ngOnInit() {
    this.socketIO.on(\"test\", data => {
      this.ngZone.run(() => {
        // Do stuff here
      });
    });
  }

  test() {
    this.socketIO.emit(\"test\", { test: \"test\" });
  }
}
\n

Running Demo

\n

Start socketio server

\n
cd demo/demo-server
npm install
node app
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
constructor(url)voidCreates a SocketIO instance with a url
constructor(url, options:{})voidCreates a SocketIO instance with url and options
constructor(null,null,nativeSocket)voidCreates a SocketIO instance from a native socket instance
connect()voidConnect to the server.
disconnect()voidDisconnects the socket.
connected()booleanChecks if the socket is connected
on(event: string,(data: Object , ack? : Function))FunctionAdds a handler for a client event. Return a function to remove the handler.
once(event: string,(data: Object , ack? : Function))FunctionAdds a single-use handler for a client event. Return a function to remove the handler.
off(event: string)voidRemoves handler(s) based on an event name.
emit(event: string,data: {},ack?: Function)voidSend an event to the server, with optional data items.
joinNamespace(name: string)SocketIOReturn SocketIO instance with the namespace
leaveNamespace()voidCall when you wish to leave a namespace and disconnect this socket.
\n

Example Image

\n

\"socketio\"

\n","downloadStats":{"lastDay":9,"lastWeek":102,"lastMonth":461}},"nativescript-cloud":{"name":"nativescript-cloud","version":"1.21.2","license":"Apache-2.0","readme":"

nativescript-cloud

\n

Used for cloud support in NativeScript CLI

\n

Contents

\n\n

Public API

\n

This section describes all methods that can be invoked when you have installed the nativescript-cloud extension and NativeScript CLI is required as library. You must load the installed extensions by calling loadExtensions method. After that you will be able to call methods from nativescript-cloud extension:

\n
const tns = require(\"nativescript\");
Promise.all(tns.extensibilityService.loadExtensions())
\t.then(loadedExtensionsData => {
\t\t// Write your code here, after all extensions are loaded.
\t});
\n
\n

NOTE: The extension must be installed before using it. You can do it by calling installExtension method of the CLI:

\n
\n
tns.extensibilityService.installExtension(\"nativescript-cloud@latest\")
\t.then(extensionData => console.log(`Successfully installed extension ${extensionData.extensionName}.`))
\t.catch(err => console.log(\"Failed to install extension.\"));
\n

Contents

\n\n

nsCloudBuildService

\n

The nsCloudBuildService allows build of applications in the cloud. You can call the following methods:

\n

build method

\n

build method validates passed arguments and tries to build the application in the cloud. In case of successful build, the build result (.apk, .aab, .ipa or .zip) is downloaded. The result contains information about the whole build process, path to the downloaded build result and information used to generate a QR code, pointing to the latest build result (in S3).
\nDefinition:

\n
/**
 * Builds the specified application in the cloud and returns information about the whole build process.
 * @param {INSCloudProjectSettings} projectSettings Describes the current project - project dir, application identifier, name and nativescript data, as well as additional options to control the build workflow.
 * @param {string} platform The mobile platform for which the application should be built: Android or iOS.
 * @param {string} buildConfiguration The build configuration - Debug or Release.
 * @param {string} accountId the account which will be charged for the build.
 * @param {IAndroidBuildData} androidBuildData Android specific information for the build.
 * @param {IIOSBuildData} iOSBuildData iOS specific information for the build.
 * @returns {Promise<IBuildResultData>} Information about the build process. It is returned only on successful build. In case the build fails, the Promise is rejected with the server information.
 */
build(projectSettings: INSCloudProjectSettings,
\tplatform: string,
\tbuildConfiguration: string,
\taccountId: string,
\tandroidBuildData?: IAndroidBuildData,
\tiOSBuildData?: IIOSBuildData): Promise<IBuildResultData>;
\n

Detailed description of each parameter can be found here.\n

\n

nsCloudBuildService events

\n

nsCloudBuildService raises the following events:

\n
buildOutput
\n

buildOutput event contains parts of the current build output:

\n
interface IBuildLog {
\tcloudOperationId: string;
\tdata: string;
\tpipe: string;
}
\n
stepChanged
\n

stepChanged event contains the name of the changed build step and its progress:

\n
/**
* Describes build step.
*/
interface IBuildStep {
\t/**
\t* The ID of the cloud operation.
\t*/
\tcloudOperationId: string;

\t/**
\t* The name of the step - prepare, upload, build or download.
\t*/
\tstep: string;

\t/**
\t* The progress of the step in percents. The value will be between 0 and 100.
\t*/
\tprogress: number;
}
\n
Events usage
\n
const tns = require(\"nativescript\");
const fs = require(\"fs\");
const path = require(\"path\");
const packageJsonContent = JSON.parse(fs.readFileSync(\"./package.json\", \"utf8\").toString());

const projectSettings = {
\tprojectDir: process.cwd(),
\tprojectId: packageJsonContent.nativescript.id,
\tprojectName: path.dirname(process.cwd()),
\tnativeScriptData: packageJsonContent.nativescript,
\tbundle: true,
\tenv: {
\t\tuglify: true
\t}
};

const androidReleaseConfigurationData = {
\tpathToCertificate: \"./myCertificate.p12\",
\tcertificatePassword: \"123456\"
};

const platform = \"android\";
const buildConfiguration = \"release\";

tns.nsCloudBuildService.on(\"buildOutput\", (data) => {
\tconsole.log(data);
\t/*
\t\tSample data object:
\t\t{
\t\t\t\"cloudOperationId\": \"2fb2e19c-3720-4fd1-9446-1df98f5e3531\",
\t\t\t\"pipe\": \"stdout\",
\t\t\t\"data\": \"Add platform ios with runtime version 2.5.*\"
\t\t}
\t*/
});

tns.nsCloudBuildService.on(\"stepChanged\", (data) => {
\tconsole.log(data);
\t/*
\t\tSample data object:
\t\t{
\t\t\t\"cloudOperationId\": \"2fb2e19c-3720-4fd1-9446-1df98f5e3531\",
\t\t\t\"step\": \"build\";
\t\t\t\"progress\": 100;
\t\t}
\t*/
});

const accountId = \"d0ce3ac0-36c2-427f-8d27-955915ffe189\";

tns.nsCloudBuildService
\t.build(projectSettings, platform, buildConfiguration, accountId, androidReleaseConfigurationData)
\t.then(buildResult => console.log(buildResult))
\t.catch(err => console.error(err));
\n

validateBuildProperties

\n

validateBuildProperties method validates all properties required for specific platform. This includes a check if current application identifier matches the CodeSigning identity for iOS operations, a check if the specified device identifier (in case it is passed) is included in the mobile provision, validation of the password, etc.\n
\nDefinition:

\n
/**
 * Validates the build properties for specified platform (Android or iOS).
 * The result promise is rejected with the error found. In case everything is correct, the promise is resolved.
 * @param {string} platform The mobile platform for which the application should be built: Android or iOS.
 * @param {string} buildConfiguration The build configuration - Debug or Release.
 * @param {string} projectId Application identifier of the project.
 * @param {IAndroidBuildData} androidBuildData Android speicific information for the build.
 * @param {IIOSBuildData} iOSBuildData iOS speicific information for the build.
 * @returns {Promise<void>}
 */
validateBuildProperties(platform: string,
\tbuildConfiguration: string,
\tprojectId: string,
\tandroidBuildData?: IAndroidBuildData,
\tiOSBuildData?: IIOSBuildData): Promise<void>;
\n

Detailed description of each parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
const fs = require(\"fs\");
const path = require(\"path\");
const packageJsonContent = JSON.parse(fs.readFileSync(\"./package.json\", \"utf8\").toString());

const projectId = packageJsonContent.nativescript.id;

const androidReleaseConfigurationData = {
\tpathToCertificate: \"./myCertificate.p12\",
\tcertificatePassword: \"123456\"
};

const platform = \"android\";
const buildConfiguration = \"release\";

tns.nsCloudBuildService
\t.validateBuildProperties(platform, buildConfiguration, projectId, androidReleaseConfigurationData)
\t.then(buildResult => console.log(\"Data is valid\"))
\t.catch(err => console.error(\"Data is invalid:\", err));
\n

getBuildOutputDirectory

\n

getBuildOutputDirectory - Returns the path to the directory where the build output may be found.

\n
\n

This method is currently available only for backwards compatibility. The module now implements base module for server operations that exposes same functionality with more generic method:\ngetServerOperationOutputDirectory. Detailed description of the parameter can be found here.\n
\nDefinition:

\n
\n
/**
 * Returns the path to the directory where the build output may be found.
 * @param {ICloudBuildOutputDirectoryOptions} options Options that are used to determine the build output directory.
 * @returns {string} The build output directory.
 */
getBuildOutputDirectory(options: ICloudBuildOutputDirectoryOptions): string;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
const cloudBuildOutputDirectory = tns.nsCloudBuildService
\t\t\t.getBuildOutputDirectory({
\t\t\t\tplatform: \"ios\",
\t\t\t\tprojectDir: \"/tmp/myProject\"
\t\t\t\temulator: false
\t\t\t});
\n

nsCloudCodesignService

\n

The nsCloudCodesignService allows generation of codesign files (currently only iOS .p12 and .mobileprovision) in the cloud. You can call the following methods:

\n

generateCodesignFiles

\n

generateCodesignFiles method validates passed arguments and tries to generate codesign files in the cloud. In case of success, the result files (.p12 and/or .mobileprovision) are downloaded. The result contains information about errors, if any, and path to the downloaded codesign files (in S3).
\nDefinition:

\n
/**
 * Generates codesign files in the cloud and returns s3 urls to certificate or/and provision.
 * @param {ICodesignData} codesignData Apple speicific information.
 * @param {string} projectDir The path of the project.
 * @returns {Promise<ICodesignResultData>} Information about the generation process. It is returned only on successfull generation. In case there is some error, the Promise is rejected with the server information.
 */
generateCodesignFiles(codesignData: ICodesignData, projectDir: string): Promise<ICodesignResultData>;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
const codesignResultData = tns.nsCloudBuildService
\t\t\t.generateCodesignFiles({
\t\t\t\tusername:'appleuser@mail.com',
\t\t\t\tpassword:'password',
\t\t\t\tplatform: \"ios\",
\t\t\t\tclean: true,
\t\t\t\tattachedDevices: [{
\t\t\t\t\tdisplayName: 'iPhone',
\t\t\t\t\tidentifier: 'cc3653b16f1beab6cf34a53af84c8a94cb2f0c9f'
\t\t\t\t}]
\t\t\t}, '/tmp/projects/myproj');
\n

getServerOperationOutputDirectory

\n

getServerOperationOutputDirectory method returns the path to the directory where the server request output files may be found, if any. In this implementation - the generated codesign files.
\nDefinition:

\n
/**
 * Returns the path to the directory where the server request output may be found.
 * @param {ICloudServerOutputDirectoryOptions} options Options that are used to determine the build output directory.
 * @returns {string} The build output directory.
 */
getServerOperationOutputDirectory(options: ICloudServerOutputDirectoryOptions): string;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
const generateCodesignFilesOutputDirectory = tns.nsCloudBuildService
\t\t\t\t.getServerOperationOutputDirectory({
\t\t\t\t\tplatform: \"ios\",
\t\t\t\t\tprojectDir: \"/tmp/myProject\"
\t\t\t\t\temulator: false
\t\t\t\t});
\n

nsCloudPublishService

\n

The nsCloudPublishService allows publishing build packages to an application store (either GooglePlay or iTunesConnect). You can call the following methods:

\n

publishToItunesConnect

\n

publishToItunesConnect method -will try to publish the provided package to iTunes Connect.
\nDefinition:

\n
/**
 * Publishes the given .ipa packages to iTunes Connect.
 * @param {IItunesConnectPublishData} publishData Data needed to publish to iTunes Connect.
 * @returns {Promise<void>}
 */
publishToItunesConnect(publishData: IItunesConnectPublishData): Promise<void>;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
tns.nsCloudPublishService
\t.publishToItunesConnect({
\t\tcredentials: {
\t\t\tusername: \"user\",
\t\t\tpassword: \"pass\"
\t\t},
\t\tpackagePaths: [\"/tmp/myReleaseIpa.ipa\"],
\t\tprojectDir: \"/tmp/myProject\"
\t})
\t.then(() => {
\t\tconsole.log(\"Publishing succeeded\");
\t})
\t.catch(err => console.error(err));
\n

publishToGooglePlay

\n

publishToGooglePlay method will try to publish the provided packages to Google Play.
\nDefinition:

\n
/**
 * Publishes the given .apk packages to Google Play.
 * @param {IGooglePlayPublishData} publishData Data needed to publish to Google Play.
 * @returns {Promise<void>}
 */
publishToGooglePlay(publishData: IGooglePlayPublishData): Promise<void>;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
tns.nsCloudPublishService
\t.publishToGooglePlay({
\t\ttrack: \"alpha\",
\t\tpathToAuthJson: \"/tmp/myAuthJson.json\",
\t\tpackagePaths: [\"/tmp/myReleaseApk.apk\"],
\t\tprojectDir: \"/tmp/myProject\"
\t})
\t.then(() => {
\t\tconsole.log(\"Publishing succeeded\");
\t})
\t.catch(err => console.error(err));
\n

nsCloudApplicationService

\n

The nsCloudApplicationService allows for application management and gathering more information about the app's current state. You can call the following methods:

\n

shouldBuild

\n

shouldBuild method will determine whether the current application should be built or not.
\nDefinition:

\n
/**
* Determines whether the application should be built or not.
* @param {IApplicationBuildConfig} config Settings used to help decide whether the project should be built or not.
* @returns {Promise<boolean>}
*/
shouldBuild(config: IApplicationBuildConfig): Promise<boolean>;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
tns.nsCloudApplicationService
\t.shouldBuild({
\t\tprojectDir: \"/tmp/myProject\",
\t\tplatform: \"android\",
\t\toutputPath: \"/tmp/myProject/.cloud/android\" // for cloud builds
\t})
\t.then((shouldBuild) => {
\t\tconsole.log(\"Should build? \", shouldBuild);
\t})
\t.catch(err => console.error(err));
\n

shouldInstall

\n

shouldInstall method will determine whether the current application's package should be installed on the given device or not.
\nDefinition:

\n
/**
* Determines whether the application's output package should be installed on the given device or not.
* @param {IApplicationInstallConfig} config Settings used to help decide whether the project's output should be installed or not.
* @returns {Promise<boolean>}
*/
shouldInstall(config: IApplicationInstallConfig): Promise<boolean>;
\n

Detailed description of the parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");
tns.nsCloudPublishService
\t.shouldInstall({
\t\tprojectDir: \"/tmp/myProject\",
\t\tdeviceIdentifier: \"192.168.56.101:5555\",
\t\toutputPath: \"/tmp/myProject/.cloud/ios\" // for cloud builds
\t})
\t.then((shouldInstall) => {
\t\tconsole.log(\"Should install?\", shouldInstall);
\t})
\t.catch(err => console.error(err));
\n

nsCloudAuthenticationService

\n

The nsCloudAuthenticationService is used for authentication related operations (login, logout etc.). You can call the following methods

\n

login

\n

login mehod starts localhost server on which the login response will be returned. After that if there is options.openAction it will be used to open the login url. If this option is not defined the default opener will be used. After successful login returns the user information.\n
\nDefinition:

\n
/**
 * Opens login page and after successfull login saves the user information.
 * If options.openAction is provided, it will be used to open the login url instead of the default opener.
 * @param {ILoginOptions} options Optional settings for the login method.
 * @returns {Promise<IUser>} Returns the user information after successful login.
 */
login(options?: ILoginOptions): Promise<IUser>;
\n

Detailed description of each parameter can be found here.\n
\nUsage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAuthenticationService
\t.login()
\t.then(userInfo => console.log(userInfo))
\t.catch(err => console.error(err));
\n
const tns = require(\"nativescript\");
const childProcess = require(\"child_process\");

const openAction = url => {
\tconst isWin = /^win/.test(process.platform);
\tconst openCommand = isWin ? \"start\" : \"open\";
\tchildProcess.execSync(`${openCommand} ${url}`);
};
const loginOptions = { openAction: openAction };

tns.nsCloudAuthenticationService
\t.login(loginOptions)
\t.then(userInfo => console.log(userInfo))
\t.catch(err => console.error(err));
\n

logout

\n

logout method invalidates the current user authentication data.\n
\nDefinition:

\n
/**
 * Invalidates the current user authentication data.
 * If options.openAction is provided, it will be used to open the logout url instead of the default opener.
 * @param {IOpenActionOptions} options Optional settings for the logout method.
 * @returns {void}
 */
logout(options?: IOpenActionOptions): void;
\n
\nUsage:\n
const tns = require(\"nativescript\");

tns.nsCloudAuthenticationService.logout();
\n
const tns = require(\"nativescript\");
const childProcess = require(\"child_process\");

const openAction = url => {
\tconst isWin = /^win/.test(process.platform);
\tconst openCommand = isWin ? \"start\" : \"open\";
\tchildProcess.execSync(`${openCommand} ${url}`);
};
const logoutOptions = { openAction: openAction };

tns.nsCloudAuthenticationService.logout(logoutOptions);
\n

isUserLoggedIn

\n

isUserLoggedIn method checks if the access token of the current user is valid. If it is - the method will return true. If it isn't - the method will try to issue new access token. If the method can't issue new token it will return false.\n

\n

Definition:

\n
/**
 * CheChecks if there is user info and the access token of the current user is valid. The method will try to issue new access token if the current is not valid.
 * @returns {Promise<boolean>} Returns true if the user is logged in.
 */
isUserLoggedIn(): Promise<boolean>;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAuthenticationService
\t.isUserLoggedIn()
\t.then(isLoggedIn => console.log(isLoggedIn))
\t.catch(err => console.error(err));
\n

refreshCurrentUserToken

\n

refreshCurrentUserToken method uses the refresh token of the current user to issue new access token.\n

\n

Definition:

\n
/**
 * Uses the refresh token of the current user to issue new access token.
 */
refreshCurrentUserToken(): Promise<void>;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAuthenticationService.refreshCurrentUserToken()
\t.then(() => console.log(\"Success\"))
\t.catch(err => console.error(err));
\n

cancelLogin

\n

cancelLogin method stops the current login process and rejects the login promise with an error.\n

\n

Definition:

\n
/**
 * Stops the current login process and rejects the login promise with an error.
 * @returns {void}
 */
cancelLogin(): void;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAuthenticationService
\t.login()
\t.then(userInfo => console.log(userInfo))
\t.catch(err => console.error(err));

tns.nsCloudAuthenticationService.cancelLogin();
\n

Interfaces

\n
interface IUser {
\temail: string;
\tfirstName: string;
\tlastName: string;
}

interface IAuthenticationService {
\t/**
\t * Uses username and password for login and after successfull login saves the user information.
\t * @param {string} username The username of the user.
\t * @param {string} password The password of the user.
\t * @returns {Promise<IUser>} Returns the user information after successful login.
\t */
\tdevLogin(username: string, password: string): Promise<IUser>;

\t/**
\t * Opens login page and after successfull login saves the user information.
\t * If options.openAction is provided, it will be used to open the login url instead of the default opener.
\t * @param {ILoginOptions} options Optional settings for the login method.
\t * @returns {Promise<IUser>} Returns the user information after successful login.
\t */
\tlogin(options?: ILoginOptions): Promise<IUser>;


\t/**
\t * Invalidates the current user authentication data.
\t * If options.openAction is provided, it will be used to open the logout url instead of the default opener.
\t * @param {IOpenActionOptions} options Optional settings for the logout method.
\t * @returns {void}
\t */
\tlogout(options?: IOpenActionOptions): void;

\t/**
\t * Uses the refresh token of the current user to issue new access token.
\t */
\trefreshCurrentUserToken(): Promise<void>;

\t/**
\t * Checks the token state of the current user.
\t * @returns {Promise<ITokenState>} Returns the token state
\t */
\tgetCurrentUserTokenState(): Promise<ITokenState>;

\t/**
\t * Stops the current login process and rejects the login promise with an error.
\t * @returns {void}
\t */
\tcancelLogin(): void;
}

interface IOpenActionOptions {
\t/**
\t * Action which will receive url and decide how to open it.
\t */
\topenAction?: (url: string) => void;
}

interface ILoginOptions extends IOpenActionOptions {
\t/**
\t * Sets the ammount of time which the login method will wait for login response in non-interactive terminal.
\t */
\ttimeout?: string;
}

interface ITokenState {
\t/**
\t * True if the access token is valid.
\t */
\tisTokenValid: boolean;

\t/**
\t * The expiration timestamp. (1494.923982727)
\t */
\texpirationTimestamp: number;
}
\n

nsCloudUserService

\n

The nsCloudUserService is used to get information aboud the current user or modify it. You can call the following methods

\n

hasUser

\n

hasUser method checks if there is user information.\n
\nDefinition:

\n
/**
 * Checks if there is user information.
 * @returns {boolean} Returns true if there is user information.
 */
hasUser(): boolean;
\n
\nUsage:\n
const tns = require(\"nativescript\");

const hasUser = tns.nsCloudUserService.hasUser();
console.log(hasUser);
\n

getUser

\n

getUser method returns the current user information.\n
\nDefinition:

\n
/**
 * Returns the current user information.
 * @returns {IUser} The current user information.
 */
getUser(): IUser;
\n
\nUsage:\n
const tns = require(\"nativescript\");

const user = tns.nsCloudUserService.getUser();
console.log(user);
\n

Sample result for user will be:

\n
{
\t\"email\": \"some@mail.com\",
\t\"firstName\": \"First\",
\t\"lastName\": \"Last\"
}
\n

getUserData

\n

getUserData method returns the user information and the authentication data for the current user.\n

\n

Definition:

\n
/**
 * Returns the user information and the authentication data for the current user.
 * @returns {IUserData} The user information and the authentication data for the current user.
 */
getUserData(): IUserData;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

const userData = tns.nsCloudUserService.getUserData();
console.log(userData);
\n

Sample result for userData will be:

\n
{
\t\"accessToken\": \"some token\",
\t\"refreshToken\": \"some refresh token\",
\t\"userInfo\": {
\t\t\"email\": \"some@mail.com\",
\t\t\"firstName\": \"First\",
\t\t\"lastName\": \"Last\"
\t}
}
\n

setUserData

\n

setUserData method sets the user information and the authentication data for the current user.\n

\n

Definition:

\n
/**
 * Sets the user information and the authentication data for the current user.
 * @param {IUserdata} userData The user data to set.
 * @returns {void}
 */
setUserData(userData: IUserData): void;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

const userData = {
\taccessToken: \"some token\",
\trefreshToken: \"some refresh token\",
\tuserInfo: {
\t\temail: \"some@mail.bg\",
\t\tfirstName: \"First\",
\t\tlastName: \"Last\"
\t}
};

tns.nsCloudUserService.setUserData(userData);
\n

setToken

\n

setToken method sets only the token of the current user.\n

\n

Definition:

\n
/**
 * Sets only the token of the current user.
 * @param {ITokenData} token The token data.
 * @returns void
 */
setToken(token: ITokenData): void;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

const token = {
\taccessToken: \"some token\"
};

tns.nsCloudUserService.setToken(token);
\n

clearUserData

\n

clearUserData method removes the current user data.\n

\n

Definition:

\n
/**
 * Removes the current user data.
 */
clearUserData(): void;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudUserService.clearUserData();
\n

getUserAvatar

\n

getUserAvatar methods returns the URL where the avatar picture can be downloaded from.\n
\nDefinition:

\n
/**
* Return the URL where the avatar picture can be downloaded from.
* @returns {Promise<string>} Return the URL where the avatar picture can be downloaded from. It will return null if the user does not have avatar or it is not logged in.
*/
getUserAvatar(): Promise<string>;
\n
\nUsage:\n
const tns = require(\"nativescript\");

tns.nsCloudUserService.getUserAvatar()
\t.then(userAvatar => console.log(userAvatar));
\n

Interfaces:

\n
interface IUserService {
\t/**
\t * Checks if there is user information.
\t * @returns {boolean} Returns true if there is user information.
\t */
\thasUser(): boolean;

\t/**
\t * Returns the current user information.
\t * @returns {IUser} The current user information.
\t */
\tgetUser(): IUser;

\t/**
\t * Returns the user information and the authentication data for the current user.
\t * @returns {IUserData} The user information and the authentication data for the current user.
\t */
\tgetUserData(): IUserData;

\t/**
\t * Sets the user information and the authentication data for the current user.
\t * @param {IUserdata} userData The user data to set.
\t * @returns {void}
\t */
\tsetUserData(userData: IUserData): void;

\t/**
\t * Sets only the token of the current user.
\t * @param {ITokenData} token The token data.
\t * @returns void
\t */
\tsetToken(token: ITokenData): void;

\t/**
\t * Removes the current user data.
\t */
\tclearUserData(): void;

\t/**
\t * Return the URL where the avatar picture can be downloaded from.
\t * @returns {Promise<string>} Return the URL where the avatar picture can be downloaded from. It will return null if the user does not have avatar or it is not logged in.
\t */
\tgetUserAvatar(): Promise<string>;
}
\n

nsCloudAccountsService

\n

The nsCloudAccountsService provides methods for working with accounts. You can call the following methods:

\n

getMyAccounts

\n

getMyAccounts method returns the accounts which the current user can use. Each user will have personal account and shared accounts. Shared accounts are those accounts in which the user is added as developer.
\nDefinition:

\n
/**
 * Returns all accounts which can be used from the current user.
 * Each user can have personal account and shared accounts.
 * @returns {Promise<IAccount[]>}
 */
getMyAccounts(): Promise<IAccount[]>
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAccountsService.getMyAccounts()
\t.then(accounts => console.log(accounts));
\n

getUsageInfo

\n

getUsageInfo method returns the usage information for the provided account.
\nDefinition:

\n
/**
 * Returns the usage information for the provided account.
 * @param {string} accountId Account id which will be used to get the usage info.
 * @returns {Promise<IUsageInfo[]>}.
 */
getUsageInfo(accountId: string): Promise<IUsageInfo[]>;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAccountsService.getUsageInfo(\"d0ce3ac0-36c2-427f-8d27-955915ffe189\")
\t.then(usageInfo => console.log(usageInfo));
\n

getAccountFeatures

\n

getAccountFeatures method returns information about all subscription features of the provided account.
\nDefinition:

\n
/**
 * Returns information about all subscription features of the provided account.
 * @param accountIdOption Account id which will be parsed and used to find account.
 */
getAccountFeatures(accountIdOption: string): Promise<IDictionary<IFeatureInfo>>;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudAccountsService.getAccountFeatures(\"d0ce3ac0-36c2-427f-8d27-955915ffe189\")
\t.then(featuresInfo => console.log(featuresInfo));
\n

nsCloudEulaService

\n

nsCloudEulaService allows interaction with EULA - check if current EULA should be accepted, accepting it, etc.

\n

getEulaData

\n

getEulaData method gives information for the current EULA - url where to find it and if the user should accept it. When this method is called, it will download the latest EULA in case it has not been already downloaded in the current process. EULA must be accepted in the following condition:

\n\n

In all other cases (current EULA is the same as the one user had accepted before, new EULA cannot be downloaded, but user had accepted EULA in the past), the method will return that EULA should not be accepted.

\n

Definition:

\n
/**
 * Gives information about the EULA. This method downloads the EULA to a local file (once for process).
 * @returns {Promise<IEulaData>} Information about the EULA - url and should the user accept it.
 */
getEulaData(): Promise<IEulaData>;
\n

The returned result is of the following type:

\n
/**
 * Contains information about EULA.
 */
interface IEulaData {
\t/**
\t * URL where the EULA can be found.
\t */
\turl: string;

\t/**
\t * Defines if EULA should be accepted by user.
\t */
\tshouldAcceptEula: boolean;
}
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudEulaService.getEulaData()
\t.then(eulaData => console.log(`EULA url is: ${eulaData.url}. This EULA should ${eulaData.shouldAcceptEula ? \"\" : \"not\" } be accepted.`));
\n

getEulaDataWitCache

\n

getEulaDataWithCache method gives information for the current EULA - url where to find it and if the user should accept it. When this method is called, it will download the latest EULA ONLY in case it has not been downloaded in the latest 24 hours. That's the main difference between this method and getEulaData. EULA must be accepted in the following condition:

\n\n

In all other cases (current EULA is the same as the one user had accepted before, new EULA cannot be downloaded, but user had accepted EULA in the past), the method will return that EULA should not be accepted.

\n

Definition:

\n
/**
 * Gives information about the EULA. This method downloads the EULA to a local file (once for process)
 * only in case the local copy has not been modified for more than 24 hours.
 * @returns {Promise<IEulaData>} Information about the EULA - url and should the user accept it.
 */
getEulaDataWithCache(): Promise<IEulaData>;
\n

The returned result has the same type as the one returned by getEulaData.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudEulaService.getEulaDataWithCache()
\t.then(eulaData => console.log(`EULA url is: ${eulaData.url}. This EULA should ${eulaData.shouldAcceptEula ? \"\" : \"not\" } be accepted.`));
\n

acceptEula

\n

acceptEula method downloads the latest EULA (in case it has not been downloaded in the current process), calculates its shasum and saves it in the user setings file. In case any of the operations fails, the acceptEula Promise will be rejected with the error.\n
\nDefinition:

\n
/**
 * Accepts the EULA. The method first downloads the latest EULA (in case it has not been already downloaded in current process) and saves its shasum to user settings file.
 * @returns {Promise<void>}
 */
acceptEula(): Promise<void>;
\n
\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudEulaService.acceptEula()
\t.then(() => console.log(`Successfully accepted EULA.`))
\t.catch(err => console.error(\"Unable to accept EULA. Error is: \", err));
\n

nsCloudProjectService

\n

The nsCloudProjectService allows to manage cloud projects. You can call the following methods:

\n

cleanupProject method

\n

cleanupProject method cleans all cloud build data which is used for optimizations. The method will clean all AWS CodeCommit and build machine artefacts if they exist.
\nDefinition:

\n
/**
 * Cleans all AWS CodeCommit data and build machines artefacts if they exist.
 * @param {ICleanupProjectDataBase} cleanupProjectData Data needed for project cleaning.
 * @returns {Promise<ICleanupProjectResult>} Information about the cleanup. It includes AWS CodeCommit result and the result from the cleanup on each build machine.
 * If the promise is rejected the error will contain cloudOperationId property.
 */
cleanupProject(cleanupProjectData: ICleanupProjectDataBase): Promise<ICleanupProjectResult>;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudProjectService.cleanupProject({ appIdentifier: \"org.nativescript.test\", projectName: \"test\" })
\t.then((result) => console.log(`Cleanup result: ${result}`))
\t.catch(err => console.error(\"Unable to clean cloud project. Error is: \", err));
\n

nsCloudKinveyService

\n

The nsCloudKinveyService allows working with Kinvey mBaaS. You can call the following methods:

\n

getApps method

\n

getApps method returns information for all applications of the current user.
\nDefinition:

\n
/**
 * Returns information for all applications of the current user.
 * @returns {Promise<IKinveyApplication[]>}
 */
getApps(): Promise<IKinveyApplication[]>;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudKinveyService.getApps()
\t.then(result => console.log(`Apps: ${result}`))
\t.catch(err => console.error(\"Unable to get apps. Error is: \", err));
\n

createApp method

\n

createApp method creates application in the account of the current user.
\nDefinition:

\n
/**
 * Creates application in the account of the current user.
 * @param input Input required to create application.
 * @returns {Promise<IKinveyApplication>}
 */
createApp(input: ICreateKinveyAppInput): Promise<IKinveyApplication>;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");
const createAppInput = {
\tname: \"ns-cloud\"
};

tns.nsCloudKinveyService.createApp(createAppInput)
\t.then(result => console.log(`Created app: ${result}`))
\t.catch(err => console.error(\"Unable to create app. Error is: \", err));
\n

createAuthService method

\n

createAuthService method creates identity store. Then it creates authentication service in this identity store. Then it sets the default authentication service in the provided environment. Then it sets the default authentication service in the provided environment to the newly created service. Currently the supported providers are OAuth2, OIDC and SAML-Redirect.
\nDefinition:

\n
/**
 * First this method creates identity store. Then it creates authentication service
 * in this identity store. Then it sets the default authentication service in the provided environment
 * to the newly created service.
 * @param input Input required to create authentication service.
 * @returns {Promise<IKinveyAuthService>}
 */
createAuthService(input: ICreateKinveyAuthService): Promise<IKinveyAuthService>;
\n

Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

// Create OAuth2 aithentication service.
const createOAuth2Options = {
\tname: \"my-oauth2-service\",
\tprovider: {
\t\ttype: \"OAuth2\",
\t\tremoteService: \"https://test.com/oauth/token\",
\t\toptions: {
\t\t\tgrantEndpoint: \"https://test.com/authorize\",
\t\t\tclientId: \"<cleint-id>\",
\t\t\tclientSecret: \"<client-secret>\",
\t\t\tuserIdEndpoint: \"https://test.com/userinfo\",
\t\t\tscope: \"<scope (e.g. openid)>\"
\t\t}
\t}
};

const oauth2Input = {
\tappId: \"<app-id>\",
\tenvironmentId: \"<env-id>\",
\tredirectUri: [\"https://auth.kinvey.com/oauth2/redirect\", \"http://example.com\"],
\tauthServiceOptions: createOAuth2Options
};

tns.nsCloudKinveyService.createAuthService(oauth2Input)
\t.then(result => console.log(`Created OAuth2 auth service: ${result}`))
\t.catch(err => console.error(\"Unable to create OAuth2 auth service. Error is: \", err));

// Create OIDC authentication service.
const createOIDCOptions = {
\tname: \"my-oidc-service\",
\tprovider: {
\t\ttype: \"OIDC\",
\t\tremoteService: \"https://test.com/oauth/token\",
\t\toptions: {
\t\t\tgrantEndpoint: \"https://test.com/authorize\",
\t\t\tclientId: \"<client-id>\",
\t\t\tclientSecret: \"<client-secret>\",
\t\t\tissuerId: \"https://test.com\",
\t\t\tscope: \"<scope (e.g. profile)>\"
\t\t}
\t}
};

const oidcInput = {
\tappId: \"<app-id>\",
\tenvironmentId: \"<env-id>\",
\tredirectUri: [\"http://example.com\"],
\tauthServiceOptions: createOIDCOptions
};

tns.nsCloudKinveyService.createAuthService(oidcInput)
\t.then(result => console.log(`Created OIDC auth service: ${result}`))
\t.catch(err => console.error(\"Unable to create OIDC auth service. Error is: \", err));

// Create SAML-Redirect authentication service.
const createSAMLRedirectOptions = {
\tname: \"my-auth-service\",
\tprovider: {
\t\ttype: \"SAML-Redirect\",
\t\tremoteService: \"https://test.com/samlp/<some-id>\",
\t\toptions: {
\t\t\tidpCertificate: \"<certificate>\"
\t\t}
\t}
};

const samlRedirectInput = {
\tappId: \"<app-id>\",
\tenvironmentId: \"<env-id>\",
\tredirectUri: [\"http://example.com\"],
\tauthServiceOptions: createSAMLRedirectOptions
};

tns.nsCloudKinveyService.createAuthService(samlRedirectInput)
\t.then(result => console.log(`Created SAML-Redirect auth service: ${result}`))
\t.catch(err => console.error(\"Unable to create SAML-Redirect auth service. Error is: \", err));
\n

updateAuthService method

\n

updateAuthService method updates the provided authentication service.
\nDefinition:

\n
/**
 * Updates the provided authentication service.
 * @param input The id of the authentication service and full authentication service object.
 * @returns {Promise<IKinveyAuthService>}
 */
updateAuthService(input: IUpdateKinveyAuthService): Promise<IKinveyAuthService>;
\n

Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudKinveyService.getDefaultAuthService({ environmentId: \"<env-id>\" })
\t.then(authService => {
\t\tconst id = authService.id;
\t\t// The update auth service input can't contain the id parameter.
\t\tdelete authService.id;
\t\tauthService.name = \"new-name\";

\t\tconst updateAuthServiceInput = {
\t\t\tauthServiceId: id,
\t\t\tauthService
\t\t};

\t\treturn tns.nsCloudKinveyService.updateAuthService(updateAuthServiceInput);
\t})
\t.then(result => console.log(`Updated auth service: ${result}`))
\t.catch(err => console.error(\"Unable to update auth service. Error is: \", err));
\n

getAuthServices method

\n

getAuthServices method returns all authentication services which allow access to the provided environment.
\nDefinition:

\n
/**
 * Returns all authentication services which allow access to the provided environment.
 * The result is grouped by the identity store id.
 * @param input The environment id.
 * @returns {Promise<IDictionary<IKinveyAuthService[]>>}
 */
getAuthServices(input: IGetKinveyAuthServices): Promise<IDictionary<IKinveyAuthService[]>>;
\n

Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudKinveyService.getAuthServices({ environmentId: \"<env-id>\" })
\t.then(result => console.log(`Auth services: ${result}`))
\t.catch(err => console.error(\"Unable to get auth services. Error is: \", err));
\n

getDefaultAuthService method

\n

getDefaultAuthService method returns the default authentication service for the provided environment.
\nDefinition:

\n
/**
 * Returns the default authentication service for the provided environment.
 * @param input The environment id.
 * @returns {Promise<IKinveyAuthService>}
 */
getDefaultAuthService(input: IGetDefaultKinveyAuthService): Promise<IKinveyAuthService>;
\n

Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudKinveyService.getDefaultAuthService({ environmentId: \"<env-id>\" })
\t.then(result => console.log(`Default auth service: ${result}`))
\t.catch(err => console.error(\"Unable to get dafault auth service. Error is: \", err));
\n

changeDefaultAuthService method

\n

changeDefaultAuthService method changes the default authentication service in the provided environment.
\nDefinition:

\n
/**
 * Changes the default authentication service in the provided environment.
 * @param input Input required to change the default authentication service.
 * @returns {Promise<IKinveyAuthService>}
 */
changeDefaultAuthService(input: IChangeDefaultKinveyAuthService): Promise<IKinveyAuthService>;
\n

Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudKinveyService.getAuthServices({ environmentId: \"<env-id>\" })
\t.then(authServices => {
\t\tconst identityStoreId = Object.keys(authServices)[0];
\t\tconst authServiceId = authServices[identityStoreId][0].id;

\t\tconst changeDefaultAuthServiceInput = {
\t\t\tenvironmentId: \"<env-id>\",
\t\t\tauthServiceId,
\t\t\tidentityStoreId
\t\t};

\t\treturn tns.nsCloudKinveyService.changeDefaultAuthService(changeDefaultAuthServiceInput);
\t})
\t.then(result => console.log(`New default auth service: ${result}`))
\t.catch(err => console.error(\"Unable to change dafault auth service. Error is: \", err));
\n

nsCloudConfigManager

\n

The nsCloudConfigManager allows to manage cloud configuration. You can call the following methods:

\n

reset method

\n

reset resets the current cloud configuration to the default one - production.
\nDefinition:

\n
/**
 * Resets config.json to it's default values.
 * @returns {void}
 */
reset(): void;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudConfigManager.reset();
\n

applyConfig method

\n

applyConfig applies specific configuration and saves it in config.json.
\nDefinition:

\n
/**
 * Applies specific configuration and saves it in config.json
 * @param {string} configName The name of the configuration to be applied.
 * @param {IConfigOptions} [options] The config options.
 * @param {IServerConfigBase} [globalServerConfig] The global server configuration which will
 * be used when changing the configuration. This parameter will override the default global configuration.
 * @returns {void}
 */
applyConfig(configName: string, options?: IConfigOptions, globalServerConfig?: IServerConfigBase): void;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudConfigManager.applyConfig(\"test\");
\n

getCurrentConfigData method

\n

getCurrentConfigData returns the current cloud configuration.
\nDefinition:

\n
/**
 * Returns the current cloud configuration.
 * @returns {IServerConfig}
 */
getCurrentConfigData(): IServerConfig;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

console.log(tns.nsCloudConfigManager.getCurrentConfigData());
\n

getServiceDomainName method

\n

getServiceDomainName returns the domain of the provided cloud service.
\nDefinition:

\n
/**
 * Returns the domain of the provided cloud service.
 * @param serviceName The name of the cloud service.
 * @returns {string}
 */
getServiceDomainName(serviceName: string): string;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

console.log(tns.nsCloudConfigManager.getServiceDomainName(\"accounts-service\"));
\n

getCloudServicesDomainNames method

\n

getCloudServicesDomainNames returns the domain names of all cloud services.
\nDefinition:

\n
/**
 * Returns the domain names of all cloud services.
 * @returns {string[]} The domain names of all cloud services.
 */
getCloudServicesDomainNames(): string[];
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

console.log(tns.nsCloudConfigManager.getCloudServicesDomainNames());
\n

getServiceValueOrDefault method

\n

getServiceValueOrDefault returns the value stored in the configuration of the provided service or the default value stored in the global configuration.
\nDefinition:

\n
/**
 * Returns the value stored in the configuration of the provided service or the default value stored in the
 * global configuration.
 * @param serviceName The name of the cloud service.
 * @param valueName The name of the value.
 * @returns {string} The value specified in the provided service config or the value specified in the global config.
 */
getServiceValueOrDefault(serviceName: string, valueName: string): string;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

console.log(tns.nsCloudConfigManager.getServiceValueOrDefault(\"accounts-service\", \"serverProto\"));
\n

printConfigData method

\n

printConfigData prints the current cloud configuration on the stdout of the process.
\nDefinition:

\n
/**
 * Prints the current cloud configuration on the stdout of the process.
 * @returns {void}
 */
printConfigData(): void;
\n

Detailed description of each parameter can be found here.\n

\n

Usage:

\n
const tns = require(\"nativescript\");

tns.nsCloudConfigManager.printConfigData();
\n

Development

\n

The project is written in TypeScript. After cloning it, you can set it up by executing the following commands in your terminal:

\n\n

After that you can make changes in the code. In order to transpile them, just execute:

\n\n

You can pack a new version of the library by executing:

\n\n","downloadStats":{"lastDay":8,"lastWeek":157,"lastMonth":517}},"nativescript-fonticon":{"name":"nativescript-fonticon","version":"8.0.2","license":"Apache-2.0","readme":"

A simpler way to use font icons with NativeScript

\n

Usage

\n
npm install nativescript-fonticon --save
\n

NOTE: If you were using v7 or lower, you were using TNS prefix naming whereas v8+ drops the prefix since no longer needed. Also nativescript-fonticon is now combined here to be accessibly like other packages via nativescript-fonticon/angular - See usage examples below.

\n

The Problem

\n

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

\n\n
.fa {
  font-family: FontAwesome;
}
\n\n
<Label class=\"fa\" text=\"\\uf293\"></Label>
\n

This works but keeping up with unicodes is not fun.

\n

The Solution

\n

With this plugin, you can instead reference the fonticon by the specific classname.

\n

Including font icons in your app

\n

FontAwesome will be used in the following examples but you can use any custom font icon collection.

\n\n
app/fonts/fontawesome-webfont.ttf
\n\n
.fa {
  font-family: FontAwesome, fontawesome-webfont;
}
\n

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.

\n\n
app/assets/font-awesome.css
\n

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

\n\n

Use the classname prefix as the key and the css filename as the value relative to directory where your app.module.ts is, then require the css file.

\n

Vanilla

\n

Configure your fonts and setup the converter if using vanilla NativeScript:

\n
import { Application } from 'application';
import { FontIconFactory, fonticon } from 'nativescript-fonticon';

// Optional. Will output the css mapping to console.
FontIconFactory.debug = true;

// Configure paths to font icon css
FontIconFactory.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};

// Load the css
FontIconFactory.loadCss();

Application.setResources( { fonticon } );
Application.run({ moduleName: 'main-page' });
\n

Use the fonticon pipe in your markup.

\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
\n

Angular

\n

Setup your module:

\n
import { FontIconModule } from 'nativescript-fonticon/angular';

@NgModule({
\tdeclarations: [
\t\tDemoComponent,
\t],
\tbootstrap: [
\t\tDemoComponent,
\t],
\timports: [
\t\tNativeScriptModule,
\t\tFontIconModule.forRoot({
\t\t\t'fa': require('~/app/assets/css/fa-5.css'),
\t\t\t'ion': require('~/app/assets/css/ionicons.css')
\t\t})
\t]
})
\n

Use the fonticon pipe in your markup.

\n
<Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label>
\n\n

When working with a new font collection, you may need to see the mapping the service provides. Passing true as seen below will cause the mapping to be output in the console to determine if your font collection is being setup correctly.

\n
import { FontIconModule, FontIconService } from 'nativescript-fonticon/angular';
// turn debug on
FontIconService.debug = true;

@NgModule({
\tdeclarations: [
\t\tDemoComponent,
\t],
\tbootstrap: [
\t\tDemoComponent,
\t],
\timports: [
\t\tNativeScriptModule,
\t\tFontIconModule.forRoot({
\t\t\t'fa': require('~/app/assets/css/fa-5.css')
\t\t})
\t]
})
\n

Credits

\n

Idea came from Bradley Gore's post here.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":199,"lastWeek":1012,"lastMonth":4031}},"@oliverphaser/nativescript-printer":{"name":"@oliverphaser/nativescript-printer","version":"1.0.1","license":"MIT","readme":"

\"npm\"\n\"apple\"\n\"android\"\n
\n\"support\"

\n
\n

Think about the environment before printing!

\n
\n

NativeScript Printer plugin

\n

A NativeScript module for sending an image, PDF or the screen contents to a physical printer.

\n

NativeScript 8

\n

This will work only on NativeScript 8.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
ns plugin add @oliverphaser/nativescript-printer
\n

Demo app

\n

Want to dive in quickly? Check out the demo! Otherwise, continue reading.

\n

Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

\n

Android screenshots

\n

    

\n

iOS screenshots

\n

    

\n

API

\n

isSupported

\n

Not all devices support printing, so it makes sense to check the device capabilties beforehand.

\n
TypeScript
\n
// require the plugin
import { Printer } from \"@oliverphaser/nativescript-printer\";

// instantiate the plugin
let printer = new Printer();

printer.isSupported().then((supported) => {
  alert(supported ? \"Yep!\" : \"Nope :'(\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printImage

\n
TypeScript
\n
// let's load an image that we can print. In this case from a local folder.
let fs = require(\"file-system\");
let appPath = fs.knownFolders.currentApp().path;
let imgPath = appPath + \"/res/printer.png\";
let imgSrc = new ImageSource();
imgSrc.loadFromFile(imgPath);

printer.printImage({
  imageSrc: imgSrc
}).then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printPDF

\n
TypeScript
\n
import { knownFolders } from \"@nativescript/core\";

printer.printPDF({
  pdfPath: knownFolders.currentApp().path + \"/pdf-test.pdf\"
}).then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printScreen

\n

Prints the current screen contents. Anything off screen will not be printed.

\n
TypeScript
\n
printer.printScreen().then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

You can also print a specific portion of the screen, which also enables you to print\nviews that are larger than the viewport. This is an example of a non-Angular NativeScript app:

\n

Note\nIf the view is either of the following depending on the size of it's contents it would break into multiple pages.

\n

Label | TextView | HtmlView | WebView

\n
  <StackLayout id=\"printMe\">
    <Label text=\"Print me :)\" />
  </StackLayout>

  <Button text=\"Print\" tap=\"{{ print }}\" />
\n
  public print(args) {
    printer.printScreen({
      view: args.object.page.getViewById(\"printMe\")
    });
  }
\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":34}},"nativescript-google-maps-sdk":{"name":"nativescript-google-maps-sdk","version":"3.0.2","license":"MIT","readme":"

NativeScript plugin for the Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling:

\n

Nativescript 7+

\n
tns plugin add nativescript-google-maps-sdk
\n

Nativescript < 7

\n
tns plugin add nativescript-google-maps-sdk@2.9.1
\n

Setup

\n

See demo code included here

\n

See a live demo here

\n

Configure API Key for Android

\n

Nativescript < 4

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
\n

Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

Nativescript 4+

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) { 
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
    <GridLayout>
        <maps:mapView
            latitude=\"{{ latitude }}\"
            longitude=\"{{ longitude }}\"
            zoom=\"{{ zoom }}\"
            bearing=\"{{ bearing }}\" 
            tilt=\"{{ tilt }}\"
            mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
            padding=\"{{ padding }}\"
            mapReady=\"onMapReady\"  
            markerSelect=\"onMarkerSelect\"
            markerBeginDragging=\"onMarkerBeginDragging\"
            markerEndDragging=\"onMarkerEndDragging\"
            markerDrag=\"onMarkerDrag\"
            cameraChanged=\"onCameraChanged\" 
            cameraMove=\"onCameraMove\"
        />
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

\n

Basic Example

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-google-maps-sdk\");

function onMapReady(args) {
    var mapView = args.object;
    
    console.log(\"Setting a marker...\");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.userData = { index : 1};
    mapView.addMarker(marker);
    
    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

function onCameraMove(args) {
    console.log(\"Camera moving: \"+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;
\n

Custom Info Windows (Beta)

\n
\n

[!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

\n
\n
var mapView = null;

export function onMapReady(args) {
    mapView = args.object;
    mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
    </StackLayout>`;
}
\n

To use custom marker info windows, define a template in your view like so:

\n
<!-- /app/main-page.xml -->
<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
  <GridLayout>
       <maps:mapView mapReady=\"onMapReady\">
            <!-- Default Info Window Template -->       \t\t
            <maps:mapView.infoWindowTemplate>
                <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                    <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                    <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                    <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                    <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                </StackLayout>
            </maps:mapView.infoWindowTemplate>
            <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key=\"testWindow\">
                    <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                        <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                        <Label text=\"Let's Begin!\" className=\"title\" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>
        </maps:mapView>
  </GridLayout>
</Page>
\n

...and set the infoWindowTemplate property like so:

\n
var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';
\n

This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

\n

** Known issue: remote images fail to display in iOS info windows (local images work fine)

\n

Usage with Angular

\n

See Angular demo code included here

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register MapView plugin in order to use in Angular templates
registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)=\"onMapReady($event)\"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"MapView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Angular 8 Support

\n

If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

\n
@ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":12,"lastWeek":109,"lastMonth":370}},"nativescript-share-file-enduco":{"name":"nativescript-share-file-enduco","version":"1.0.9","license":"Apache-2.0","readme":"

Nativescript Share File

\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install nativescript-akylas-share-file
\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from 'nativescript-akylas-share-file';
    import * as fs from '@nativescript/core/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":24}},"nativescript-geolocation":{"name":"nativescript-geolocation","version":"5.1.0","license":"Apache-2.0","readme":"

NativeScript Geolocation \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

Geolocation plugin to use for getting current location, monitor movement, etc.

\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-geolocation
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript

\n
import * as geolocation from \"nativescript-geolocation\";
import { Accuracy } from \"tns-core-modules/ui/enums\"; // used to describe at what accuracy the location should be get
\n

Javascript

\n
var geolocation = require(\"nativescript-geolocation\");
\n

Request permissions

\n
geolocation.enableLocationRequest();
\n

Call plugin methods

\n
// Get current location with high accuracy
geolocation.getCurrentLocation({ desiredAccuracy: Accuracy.high, maximumAge: 5000, timeout: 20000 })
\n

API

\n

Properties

\n

Location

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
latitude-The latitude of the geolocation, in degrees.
longitude-The longitude of the geolocation, in degrees.
altitude-The altitude (if available), in meters above sea level.
horizontalAccuracy-The horizontal accuracy, in meters.
verticalAccuracy-The vertical accuracy, in meters.
speed-The speed, in meters/second over ground.
timestamp-The time at which this location was determined.
\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
desiredAccuracy?Accuracy.highThis will return the finest location available but use more power than any option. Accuracy.any is considered to be about 100 meter accuracy. Using a coarse accuracy such as this often consumes less power.
updateDistanceNo filterUpdate distance filter in meters. Specifies how often to update the location. Read more in Apple document and/or Google documents
updateTime1 minuteInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
minimumUpdateTime5 secsMinimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
maximumAge-How old locations to receive in ms.
timeout5 minutesHow long to wait for a location in ms.
iosAllowsBackgroundLocationUpdatesfalseIf enabled, UIBackgroundModes key in info.plist is required (check the hint below). Allow the application to receive location updates in background (ignored on Android). Read more in Apple document
iosPausesLocationUpdatesAutomaticallytrueAllow deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
iosOpenSettingsIfLocationHasBeenDeniedfalseArgument on the enableLocationRequest. If true, the settings app will open on iOS so the user can change the location services permission.
\n
\n

If iosAllowsBackgroundLocationUpdates is set to true, the following code is required in the info.plist file:

\n
<key>UIBackgroundModes</key>
<array>
   <string>location</string>
</array>
\n
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
getCurrentLocation(options: Options)PromiseGet current location applying the specified options (if any). Since version 5.0 of the plugin, it will use requestLocation API for devices using iOS 9.0+. In situation of poor or no GPS signal, but available Wi-Fi it will take 10 sec to return location.
watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options: Options)numberMonitor for location change.
clearWatch(watchId: number)voidStop monitoring for location change. Parameter expected is the watchId returned from watchLocation.
enableLocationRequest(always?: boolean)Promise<void>Ask for permissions to use location services. The option always is applicable only for iOS. For a custom prompt message on IOS, the following keys are required. NSLocationAlwaysUsageDescription, NSLocationUsageDescription and NSLocationWhenInUseUsageDescription Read more about its usage .
isEnabledPromise<boolean>Resolves true or false based on the location services availability.
distance(loc1: Location, loc2: Location)numberCalculate the distance between two locations. Returns the distance in meters.
\n

Known Issues

\n

Version Conflicts – Google Play Services

\n

If you have installed multiple plugins that use the Google Play Services you might run into version conflicts. For example, you may encounter the error below when using the nativescript-google-maps-sdk plugin:

\n
Cannot enable the location service. Error: java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzbck;
\n

In order to fix this you might pin the version number in your app/App_Resources/Android/before-plugins.gradle file (if the file does not exist, just create it):

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"16.+\"
  }
}
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":11,"lastWeek":96,"lastMonth":391}},"swtc-nativescript":{"name":"swtc-nativescript","version":"1.0.2","license":"BSD-2-Clause","readme":"

SWTC Library Nativescript ready

\n

npm install swtc-nativescript

\n

update webpack.config.js

\n

...require('nativescript').aliases,

\n

replace node_modules/swtc-lib/src/server.js

\n

with src/server.js

\n","downloadStats":{"lastDay":3,"lastWeek":18,"lastMonth":49}},"react-nativescript-navigation":{"name":"react-nativescript-navigation","version":"5.0.0","license":"MIT","readme":"

react-nativescript-navigation

\n

React NativeScript Navigation is the official navigation library for React NativeScript.

\n

For implementing the native stack view, we re-implement the same APIs that react-native-screens implement for React Native, but for NativeScript (and have thus renamed it react-nativescript-screens to reduce bewilderment).

\n

For implementing the native tabs, I've simply followed the React Navigation docs; no Screens library was needed.

\n

This is a provisional implementation; aspects beyond the core functionality of a stack that pushes and pops screens (such as the customisation of its appearance) may not be fully working yet.

\n

Installation

\n
npm install --save react-nativescript-navigation @react-navigation/native
\n

You do not need to install any of react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view as mentioned in the "Getting Started" section of React Navigation. Those are only for React Native projects. react-nativescript-navigation brings all the dependencies it needs.

\n

Documentation

\n\n

For the full list of configurable options, see the typings:

\n\n

Example usage

\n
import * as React from \"react\";
import { BaseNavigationContainer } from '@react-navigation/core';
import { stackNavigatorFactory, tabNavigatorFactory } from \"react-nativescript-navigation\";

const TabNavigator = tabNavigatorFactory();
const StackNavigator = stackNavigatorFactory();

/* Tabs Navigator. */
const TabsAppContainer = () => (
    <BaseNavigationContainer>
        <TabNavigator.Navigator initialRouteName=\"first\">
            <TabNavigator.Screen name=\"first\" component={First}/>
            <TabNavigator.Screen name=\"second\" component={Second}/>
        </TabNavigator.Navigator>
    </BaseNavigationContainer>
);

/* Stack Navigator. */
const StackAppContainer = () => (
    <BaseNavigationContainer>
        <StackNavigator.Navigator
            initialRouteName=\"first\"
            screenOptions={{
                headerShown: true,
            }}
        >
            <StackNavigator.Screen name=\"first\" component={First}/>
            <StackNavigator.Screen name=\"second\" component={Second}/>
        </StackNavigator.Navigator>
    </BaseNavigationContainer>
);

function First({ navigation }){
    function onButtonTap(){
        navigation.navigate('second');
    }

    return (
        <flexboxLayout
            style={{
                flexGrow: 1,
                width: \"100%\",
                height: \"100%\",
                flexDirection: \"column\",
                alignItems: \"center\",
                justifyContent: \"center\",
                backgroundColor: \"yellow\",
            }}
        >
            <label fontSize={24} text={\"You're viewing the first route!\"}/>
            <button onTap={onButtonTap} fontSize={24} text={\"Go to next route\"}/>
        </flexboxLayout>
    );
}

function Second({ navigation }){
    function onButtonTap(){
        navigation.goBack();
    }

    return (
        <flexboxLayout
            style={{
                flexGrow: 1,
                flexDirection: \"column\",
                alignItems: \"center\",
                justifyContent: \"center\",
                backgroundColor: \"gold\",
            }}
        >
            <label fontSize={24} text={\"You're viewing the second route!\"}/>
            <button onTap={onButtonTap} fontSize={24} text={\"Go back\"}/>
        </flexboxLayout>
    );
}

// export default TabsAppContainer;
export default StackAppContainer;
\n

Limitations

\n

React NativeScript Navigation's TabNavigator and StackNavigator have fewer configurable options than React Navigation's ones – this is because the React NativeScript Navigation navigators are fully native, and so are ultimately limited by the styling options that are possible natively (and the way that NativeScript Core wraps them).

\n

This library is also a work in progress and I simply don't have time to implement everything all on my own. If you need more configurability, please consider making a Pull Request.

\n

To see the full list of configurable options, see the typings:

\n\n

Disclaimer: the library is young, so there is a very good chance that I've incorrectly implemented some of the configuration options listed in the typings. For the happy path, I recommend starting out simple and being flexible in your design if the navigators just don't appear to be able to support it.

\n","downloadStats":{"lastDay":3,"lastWeek":22,"lastMonth":176}},"@nativescript/android":{"name":"@nativescript/android","version":"8.6.2","readme":"

Android Runtime for NativeScript

\n

\"Build

\n

Contains the source code for the NativeScript's Android Runtime. NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Each mobile platform has its own ecosystem and offers completely different development tools and language(s) - Java for Android and Objective C (Swift) for iOS. In order to translate JavaScript code to the corresponding native APIs some kind of proxy mechanism is needed. This is exactly what the "Runtime" parts of NativeScript are responsible for. The Android Runtime may be thought of as "The Bridge" between the JavaScript and Android worlds. A NativeScript application for Android is a standard native package (apk) which besides the JavaScript files embed the runtime as well.

\n\n\n\n

Additional docs

\n

Several Wiki pages describe some internal topics about the runtime here

\n

Main Projects

\n

The repo is structured in the following projects (ordered by dependencies):

\n\n

Helper Projects

\n\n

Architecture Diagram

\n

The NativeScript Android Runtime architecture can be summarized in the following diagram.

\n

\"Android

\n

For more details on how it works, read the documentation.

\n

Build Prerequisites

\n

Following are the minimal prerequisites to build the runtime package.

\n\n

Working with the Runtime in Android Studio

\n\n

Note: You might need to run the Android Studio from the command line in order to preserve the environment variables. This is in case you get errors like "missing npm" if starting the studio the usual way.

\n

How to Build

\n\n

How to Run Tests

\n\n
gradlew runtests
\n

How to Connect the Inspector

\n\n
cd test-app
npm install
\n\n
npx ns debug android --start
\n

(If you instead have the nativescript NPM module installed globally,\nyou can omit the npm install and the npx prefix.)

\n\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Misc

\n\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":935,"lastWeek":4064,"lastMonth":18447}},"perfectedtech-loopback-sdk-builder":{"name":"perfectedtech-loopback-sdk-builder","version":"3.0.4","license":"MIT","readme":"

\"npm \"Build \"dependencies\" \"Known

\n

\"LoopBack

\n

LoopBack SDK Builder

\n

The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2.

\n

The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

\n

Installation

\n
$ cd to/loopback/project
$ npm install --save-dev @mean-expert/loopback-sdk-builder
\n

Documentation

\n

LINK TO WIKI DOCUMENTATION

\n

Features

\n

LINK TO FEATURES

\n

FireLoop API (NEW)

\n

Are you willing to build pure and modern Real-Time applications?? Then CHECK THIS OUT

\n

\"FireLoop.io\"

\n

Contact

\n

Discuss features and ask questions on @johncasarrubias at Twitter.

\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":27}},"nativescript-appversion":{"name":"nativescript-appversion","version":"1.4.4","license":"MIT","readme":"

NativeScript AppVersion

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Read the current Package ID and Version (name and code) of your NativeScript app.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-appversion
\n

Usage

\n

To use this plugin you must first require / import it:

\n

JavaScript

\n
var appversion = require(\"nativescript-appversion\");
\n

TypeScript

\n
import * as appversion from \"nativescript-appversion\";
\n

getVersionName(Sync)

\n

getVersionNameSync is the same as getVersionName, except it doesn't return a Promise.

\n

JavaScript

\n
  appversion.getVersionName().then(function(v) {
      console.log(\"Your app's version is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionName().then((v: string) => {
      console.log(\"Your app's version is: \" + v);
  });
\n

getVersionCode(Sync)

\n

JavaScript

\n
  appversion.getVersionCode().then(function(v) {
      console.log(\"Your app's version code is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionCode().then((v: string) => {
      console.log(\"Your app's version code is: \" + v);
  });
\n

getAppId(Sync)

\n

JavaScript

\n
  appversion.getAppId().then(function(id) {
      console.log(\"Your app's id is: \" + id);
  });
\n

TypeScript

\n
  appversion.getAppId().then((id: string) => {
      console.log(\"Your app's id is: \" + id);
  });
\n","downloadStats":{"lastDay":80,"lastWeek":436,"lastMonth":1668}},"@swtc/nativescript":{"name":"@swtc/nativescript","version":"1.1.2","license":"BSD-2-Clause","readme":"

SWTC Library Nativescript ready

\n

npm install swtc-nativescript

\n

update webpack.config.js

\n

...require('nativescript').aliases,

\n

replace node_modules/swtc-lib/src/server.js

\n

with src/server.js

\n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":194}},"esolution-nativescript-google-maps-sdk":{"name":"esolution-nativescript-google-maps-sdk","version":"3.0.2-alpha-1","license":"MIT","readme":"

NativeScript plugin for the Google Maps SDK

\n

This repository is forked from dapriett/nativescript-google-maps-sdk

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling:

\n

Nativescript 7+

\n
tns plugin add nativescript-google-maps-sdk
\n

Nativescript < 7

\n
tns plugin add nativescript-google-maps-sdk@2.9.1
\n

Setup

\n

See demo code included here

\n

See a live demo here

\n

Configure API Key for Android

\n

Nativescript < 4

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
\n

Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

Nativescript 4+

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) { 
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
    <GridLayout>
        <maps:mapView
            latitude=\"{{ latitude }}\"
            longitude=\"{{ longitude }}\"
            zoom=\"{{ zoom }}\"
            bearing=\"{{ bearing }}\" 
            tilt=\"{{ tilt }}\"
            mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
            padding=\"{{ padding }}\"
            mapReady=\"onMapReady\"  
            markerSelect=\"onMarkerSelect\"
            markerBeginDragging=\"onMarkerBeginDragging\"
            markerEndDragging=\"onMarkerEndDragging\"
            markerDrag=\"onMarkerDrag\"
            cameraChanged=\"onCameraChanged\" 
            cameraMove=\"onCameraMove\"
        />
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

\n

Basic Example

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-google-maps-sdk\");

function onMapReady(args) {
    var mapView = args.object;
    
    console.log(\"Setting a marker...\");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.userData = { index : 1};
    mapView.addMarker(marker);
    
    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

function onCameraMove(args) {
    console.log(\"Camera moving: \"+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;
\n

Custom Info Windows (Beta)

\n
\n

[!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

\n
\n
var mapView = null;

export function onMapReady(args) {
    mapView = args.object;
    mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
    </StackLayout>`;
}
\n

To use custom marker info windows, define a template in your view like so:

\n
<!-- /app/main-page.xml -->
<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
  <GridLayout>
       <maps:mapView mapReady=\"onMapReady\">
            <!-- Default Info Window Template -->       \t\t
            <maps:mapView.infoWindowTemplate>
                <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                    <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                    <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                    <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                    <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                </StackLayout>
            </maps:mapView.infoWindowTemplate>
            <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key=\"testWindow\">
                    <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                        <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                        <Label text=\"Let's Begin!\" className=\"title\" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>
        </maps:mapView>
  </GridLayout>
</Page>
\n

...and set the infoWindowTemplate property like so:

\n
var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';
\n

This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

\n

** Known issue: remote images fail to display in iOS info windows (local images work fine)

\n

Usage with Angular

\n

See Angular demo code included here

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register MapView plugin in order to use in Angular templates
registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)=\"onMapReady($event)\"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"MapView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Angular 8 Support

\n

If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

\n
@ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":7}},"nativescript-ui-core":{"name":"nativescript-ui-core","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI Core

\n

Contains common native source code (Java and Objective C) used by various NativeScript plugins like nativescript-ui-chart, nativescript-ui-listview, etc. It is not intended to be used as a standalone plugin but rather as a dependency for other plugins.

\n","downloadStats":{"lastDay":772,"lastWeek":3465,"lastMonth":13730}},"nativescript-barcodescanner":{"name":"nativescript-barcodescanner","version":"4.1.2","license":"MIT","readme":"

NativeScript BarcodeScanner

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

💡 Plugin version 4.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 3.4.2.

\n
\n
\n

⚠️ With 4.1.0+ you can use beepOnScan on iOS again (it used to crash in older 4.x versions).

\n
\n

Want a quick demo?

\n
\n

Note that running this only makes sense on a real device.

\n
\n
git clone https://github.com/EddyVerbruggen/nativescript-barcodescanner barcodedemo
cd barcodedemo/src
\n

Fullscreen, programmatically (iOS and Android)

\n
npm run demo.android (or demo.ios / demo.ios.device)
\n

Embedded (iOS only)

\n
npm run demo.ios
\n

Supported barcode types

\n

iOS and Android

\n\n

Android only

\n\n

iOS only

\n\n

A note about UPC_A and EAN_13

\n

When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-barcodescanner
\n

Embedding the scanner (iOS)

\n
\n

If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

\n
\n\n

As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

\n
\n

💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

\n
\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"nativescript-barcodescanner\">
\n

Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

\n
<iOS>
    <Barcode:BarcodeScannerView
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      pause=\"{{ pause }}\"
      scanResult=\"{{ onScanResult }}\" />
</iOS>
\n

Embedding in Angular

\n

Component / Module:

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"BarcodeScanner\", () => require(\"nativescript-barcodescanner\").BarcodeScannerView);
\n

View:

\n
<BarcodeScanner
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      [pause]=\"pause\"
      (scanResult)=\"onScanResult($event)\">
</BarcodeScanner>
\n

Embedding in Vue

\n

main.ts:

\n
Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)
\n

View:

\n
<BarcodeScanner
    row=\"1\"
    height=\"300\"
    formats=\"QR_CODE, EAN_13, UPC_A\"
    beepOnScan=\"true\"
    reportDuplicates=\"true\"
    preferFrontCamera=\"false\"
    :pause=\"pause\"
    @scanResult=\"onScanResult\"
    v-if=\"isIOS\">
</BarcodeScanner>
\n

See 'demo-vue' for details.

\n

iOS runtime permission reason

\n

You've probably seen a permission popup like this before (this plugin will trigger one as well, automatically):

\n\n

iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

\n

You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSCameraUsageDescription</key>
  <string>My reason justifying fooling around with your camera</string>
\n

To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

\n

Usage

\n

Tip: during a scan you can use the volume up/down buttons to toggle the torch.

\n

function: scan (single mode)

\n

TypeScript

\n
  import { BarcodeScanner } from \"nativescript-barcodescanner\";
  let barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE, EAN_13\",
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
    openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
    presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
  }).then((result) => {
      // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
      alert({
        title: \"Scan result\",
        message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
        okButtonText: \"OK\"
      });
    }, (errorMessage) => {
      console.log(\"No scan. \" + errorMessage);
    }
  );
\n
\n

Note that result.format above is one of these.

\n
\n

JavaScript

\n
  var BarcodeScanner = require(\"nativescript-barcodescanner\").BarcodeScanner;
  var barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
    openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
  }).then(
      function(result) {
        console.log(\"Scan format: \" + result.format);
        console.log(\"Scan text:   \" + result.text);
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: scan (bulk / continuous mode)

\n

In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

\n

The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

\n

Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

\n

JavaScript

\n
  var count = 0;
  barcodescanner.scan({
    formats: \"QR_CODE\",
    // this callback will be invoked for every unique scan in realtime!
    continuousScanCallback: function (result) {
      count++;
      console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
      if (count === 3) {
        barcodescanner.stop();
      }
    },
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
    reportDuplicates: false // which is the default
  }).then(
      function() {
        console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: available

\n

Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

\n

JavaScript

\n
  var barcodescanner = require(\"nativescript-barcodescanner\");

  barcodescanner.available().then(
      function(avail) {
        console.log(\"Available? \" + avail);
      }
  );
\n

function: hasCameraPermission / requestCameraPermission

\n

On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

\n

On iOS 10+ there's something similar going on.

\n

Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

\n

JavaScript

\n
  barcodescanner.hasCameraPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestCameraPermission' now
        console.log(\"Has Camera Permission? \" + result);
      }
  );

  // if no permission was granted previously this wil open a user consent screen
  barcodescanner.requestCameraPermission().then(
      function() {
        console.log(\"Camera permission requested\");
      }
  );
\n

Usage with nativescript-angular

\n

You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

\n

So instead of:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from 'nativescript-barcodescanner';

@Component({ ... })
  export class MyComponent {
    constructor(private barcodeScanner: BarcodeScanner) {
  }

  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    this.barcodeScanner.scan({ ... });
  }
}
\n

Simply do:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from 'nativescript-barcodescanner';

@Component({ ... })
  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    new BarcodeScanner().scan({ ... });
  }
}
\n

Webpack usage

\n

If you run into an error when Webpacking, open app.module.ts and add this:

\n
import { BarcodeScanner } from \"nativescript-barcodescanner\";

export function createBarcodeScanner() {
  return new BarcodeScanner();
}

providers: [
  { provide: BarcodeScanner, useFactory: (createBarcodeScanner) }
]
\n

Troubleshooting

\n

If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

\n
    \n
  1. Delete the app from your device
    2. \n
  2. Remove the folder platforms/android. This triggers a complete rebuild
    3. \n
  3. run tns run android
    4. \n
\n

Dependencies / Related Projects

\n

This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

\n

iOS

\n

Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

\n

Android

\n

ZXing: https://github.com/zxing/zxing/releases

\n

As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/EddyVerbruggen/barcodescanner-lib-aar/

\n","downloadStats":{"lastDay":27,"lastWeek":257,"lastMonth":701}},"@nativescript-community/ui-barcodeview":{"name":"@nativescript-community/ui-barcodeview","version":"3.6.1","license":"MIT","readme":"

NativeScript BarcodeView

\n

Supported barcode types

\n

iOS and Android

\n\n

Android only

\n\n

iOS only

\n\n

A note about UPC_A and EAN_13

\n

When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Usage

\n

The nativescript BarcodeView is base on nativescript-barcodescanner from [Eddy Verbruggen]\n(https://github.com/EddyVerbruggen)

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-barcodeview" on the Page element

\n

XML

\n
<Page xmlns:bc=\"@nativescript-community/ui-barcodeview\">
    <StackLayout horizontalAlignment=\"center\">
        <bc:BarcodeView width=\"100\" height=\"100\" scanResult=\"onScanResult\"/>
   </StackLayout>
</Page>
\n

NativeScript + Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { BarcodeView } from '@nativescript-community/ui-barcodeview';
registerElement('BarcodeView', () => BarcodeView);
\n
<BarcodeView width=\"100\" height=\"100\" (scanResult)=\"onScanResult($event)\"></CanvasView>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
(<any>Vue).registerElement('BarcodeView', () => require('@nativescript-community/ui-barcodeview').BarcodeView);
\n
<BarcodeView  width=\"100\" height=\"100\"  @scanResult=\"onScanResult\"/>
\n

Whatever the UI framework you will receive the event in :

\n
function onScanResult(text:string, barcodeFormat:string) {

}
\n

Properties

\n\n

Methods

\n\n

Android

\n

ZXing: https://github.com/zxing/zxing/releases\nZXing Android Embedded: https://github.com/journeyapps/zxing-android-embedded

\n

With latest ZXing versions android minSdkVersion is bumped to 24. You can still lower it https://github.com/journeyapps/zxing-android-embedded#option-2-desugaring-advanced

\n","downloadStats":{"lastDay":8,"lastWeek":49,"lastMonth":340}},"@nstudio/nativescript-camera-plus":{"name":"@nstudio/nativescript-camera-plus","version":"4.2.0","license":"Apache-2.0","readme":"\n

NativeScript Camera Plus

\n\n

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

\n

\n\n \"LiveShopper\n \n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n
\n

Installation

\n
npm install @nstudio/nativescript-camera-plus
\n

Note :- Android\nPlease add the following to your app.gradle

\n
android {
...
 compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
}
\n

Sample

\n

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

\n

\"Camera

\n

Demo

\n

The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

\n

Android Emulator Note

\n

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefaultDescription
debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
\n

Static Properties

\n

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
\n

Android Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIconstringName of app_resource drawable for the toggle camera button.
takePicIconstringName of app_resource drawable for the take picture (capture) button.
galleryIconstringName of app_resource drawable for the open gallery (image library) button.
autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
\n

iOS Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
\n

Cross Platform Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
isCameraAvailable()Returns true if the device has at least one camera.
toggleFlash()Toggles the flash mode on the active camera.
toggleCamera()Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
record(opts?: IVideoOptions)Starts recording a video.
stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
\n

Android Only Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()Returns true if the application has been granted access to the device storage.
getNumberOfCameras()Returns the number of cameras on the device.
hasFlash()Returns true if the active camera has a flash mode.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
errorEventExecutes when an error is emitted from CameraPlus
photoCapturedEventExecutes when a photo is taken.
toggleCameraEventExecutes when the device camera is toggled.
imagesSelectedEventExecutes when images are selected from the device library/gallery.
videoRecordingStartedEventExecutes when video starts recording.
videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
confirmScreenShownEventExecutes when the picture confirm dialog is shown..
confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
\n

Option Interfaces

\n
export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}
\n
export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}
\n
export interface IVideoOptions {
  quality?: CameraVideoQuality;
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
  disableHEVC?: boolean;
  androidMaxVideoBitRate?: number;
  androidMaxFrameRate?: number;
  androidMaxAudioBitRate?: number;
}
\n","downloadStats":{"lastDay":34,"lastWeek":213,"lastMonth":1782}},"@nativescript/secure-storage":{"name":"@nativescript/secure-storage","version":"3.0.3","license":"MIT","readme":"

@nativescript/secure-storage

\n

Secure Storage using SAMKeychain on iOS and Hawk on Android.

\n
npm install @nativescript/secure-storage
\n

API

\n

set | setSync

\n
// require the plugin
import { SecureStorage } from \"@nativescript/secure-storage\";

// instantiate the plugin
const secureStorage = new SecureStorage();

// async
secureStorage.set({
  key: \"foo\",
  value: \"I was set at \" + new Date()
}).then(success => console.log(\"Successfully set a value? \" + success));

// sync
const success = secureStorage.setSync({
  key: \"foo\",
  value: \"I was set at \" + new Date()
});
\n

get | getSync

\n

Will return null if not found.

\n
// async
secureStorage.get({
  key: \"foo\"
}).then(value => console.log(\"Got value: \" + value));

// sync
const value = secureStorage.getSync({
  key: \"foo\"
});
\n

remove | removeSync

\n
// async
secureStorage.remove({
  key: \"foo\"
}).then(success => console.log(\"Successfully removed a value? \" + success));

// sync
const success = secureStorage.removeSync({
  key: \"foo\"
});
\n

removeAll | removeAllSync

\n
// async
secureStorage.removeAll().then(success => console.log(\"Successfully removed a value? \" + success));

// sync
const success = secureStorage.removeAllSync();
\n

clearAllOnFirstRun | clearAllOnFirstRunSync

\n

These functions can be used if you want to clear data when your app is reinstalled.

\n

This is only really useful on iOS because if you write something (through this plugin) to the Keychain, this data won't be removed when the app is uninstalled.\nSo the next time the same app is installed, it will find the data in the keychain.

\n

So if you want to clear 'lingering' data from a previous install, make sure you run one of these\nmethods before using other methods this plugin provides.

\n
// async
secureStorage.clearAllOnFirstRun().then(success => {
    console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
});

// sync
const success = secureStorage.clearAllOnFirstRunSync();
\n

isFirstRun | isFirstRunSync

\n

As a bonus, you can piggyback the 'first run' mechanism to do anything you want when the plugin detects\nthis is the first run (after an install or install-delete-reinstall).

\n
// sync
if (secureStorage.isFirstRunSync()) {
  // do whatever you want
}

// async
secureStorage.isFirstRun().then(isFirst => {
  // if isFirst is true, do whatever you like
});
\n

iOS Security++

\n

By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

\n
declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
const secureStorage = new SecureStorage(kSecAttrAccessibleWhenUnlockedThisDeviceOnly);
\n

iOS Simulator

\n

Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

\n

If you're running into issues similar to issue_10, consider using the default behaviour again.

\n

iOS Keychain Access/App Groups

\n

You can share secrets between iOS apps/extensions via Keychain access groups, or App Groups, see here for details.

\n

To setup:

\n\n

Credits

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":150,"lastWeek":714,"lastMonth":2497}},"@nativescript/types-android":{"name":"@nativescript/types-android","version":"8.6.1","license":"Apache-2.0","readme":"

@nativescript/types-android

\n

NativeScript Types for Android

\n","downloadStats":{"lastDay":835,"lastWeek":3726,"lastMonth":15552}},"nativescript-baidu-push":{"name":"nativescript-baidu-push","version":"2.0.2","license":"Apache-2.0","readme":"

Push Plugin for NativeScript

\n

The code for the Push Plugin for NativeScript.

\n\n

Getting started

\n\n

Android

\n
\n

See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

\n
\n\n
\tvar pushPlugin = require(\"nativescript-push-notifications\");
\tvar self = this;
\tpushPlugin.register({ senderID: '<ENTER_YOUR_PROJECT_NUMBER>' }, function (data){
\t\tself.set(\"message\", \"\" + JSON.stringify(data));
\t}, function() { });

\tpushPlugin.onMessageReceived(function callback(data) {
\t\tself.set(\"message\", \"\" + JSON.stringify(data));
\t});
\n\n

The plugin will default to version 10.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion like so:

\n
```\n// in the root level of /app/App_Resources/Android/app.gradle:\n\nproject.ext {\n    firebaseMessagingVersion = "+" // OR the version you wish\n}\n```\n
\n

iOS

\n\n
\tvar pushPlugin = require(\"nativescript-push-notifications\");
        var self = this;
        var iosSettings = {
            badge: true,
            sound: true,
            alert: true,
            interactiveSettings: {
                actions: [{
                    identifier: 'READ_IDENTIFIER',
                    title: 'Read',
                    activationMode: \"foreground\",
                    destructive: false,
                    authenticationRequired: true
                }, {
                    identifier: 'CANCEL_IDENTIFIER',
                    title: 'Cancel',
                    activationMode: \"foreground\",
                    destructive: true,
                    authenticationRequired: true
                }],
                categories: [{
                    identifier: 'READ_CATEGORY',
                    actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                    actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                }]
            },
            notificationCallbackIOS: function (data) {
                self.set(\"message\", \"\" + JSON.stringify(data));
            }
        };

        pushPlugin.register(iosSettings, function (data) {
            self.set(\"message\", \"\" + JSON.stringify(data));

            // Register the interactive settings
                if(iosSettings.interactiveSettings) {
                    pushPlugin.registerUserNotificationSettings(function() {
                        alert('Successfully registered for interactive push.');
                    }, function(err) {
                        alert('Error registering for interactive push: ' + JSON.stringify(err));
                    });
                }
        }, function() { });
\n\n

API

\n
\t// Get reference to the push plugin module.
\tvar pushPlugin = require('nativescript-push-notifications');
\n\n
\n

register(settings, successCallback, errorCallback)

\n
\n

\tvar settings = {
\t\t// Android settings
\t\tsenderID: '<ENTER_YOUR_PROJECT_NUMBER>', // Android: Required setting with the sender/project number
\t\tnotificationCallbackAndroid: function(message, pushNotificationObject) { // Android: Callback to invoke when a new push is received.
        \talert(JSON.stringify(message));
        },

\t\t// iOS settings
        badge: true, // Enable setting badge through Push Notification
        sound: true, // Enable playing a sound
        alert: true, // Enable creating a alert

        // Callback to invoke, when a push is received on iOS
        notificationCallbackIOS: function(message) {
        \talert(JSON.stringify(message));
        }
\t};


\tpushPlugin.register(settings,
\t\t// Success callback
\t\tfunction(token) {
                        // if we're on android device we have the onMessageReceived function to subscribe
\t\t\t// for push notifications
\t\t\tif(pushPlugin.onMessageReceived) {
\t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
\t\t\t}

\t\t\talert('Device registered successfully');
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t}
\t);
\n\n
\n

unregister(successCallback, errorCallback, settings)

\n
\n

\tpushPlugin.unregister(
\t\t// Success callback
\t\tfunction(){
\t\t\talert('Device unregistered successfully');
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t},

\t\t// The settings from the registration phase
\t\tsettings
\t);
\n\n
\n

register(settings, successCallback, errorCallback)

\n
\n

\tvar settings = {
\t\tbadge: true,
\t\tsound: true,
        alert: true,
        interactiveSettings: {
        \tactions: [{
            \tidentifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
            identifier: 'CANCEL_IDENTIFIER',
            \ttitle: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
            \tidentifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },
        notificationCallbackIOS: function(message) {
        \talert(JSON.stringify(message));
        }
\t};


\tpushPlugin.register(settings,
\t\t// Success callback
\t\tfunction(token){
\t\t\t// if we're on android device we have the onMessageReceived function to subscribe
\t\t\t// for push notifications
\t\t\tif(pushPlugin.onMessageReceived) {
\t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
\t\t\t}

\t\t        // Register the interactive settings
\t\t\tif(settings.interactiveSettings) {
\t\t\t\tpushPlugin.registerUserNotificationSettings(function() {
\t\t\t\t\talert('Successfully registered for interactive push.');
\t\t\t\t}, function(err) {
\t\t\t\t\talert('Error registering for interactive push: ' + JSON.stringify(err));
\t\t\t\t});
\t\t\t}
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t}
\t);
\n\n
\n

areNotificationsEnabled(callback)

\n
\n

\tpushPlugin.areNotificationsEnabled(function(areEnabled) {
\t\talert('Are Notifications enabled: ' + areEnabled);
    });
\n\n
\n

onTokenRefresh(callback)

\n
\n

\tpushPlugin.onTokenRefresh(function(token){
\t\t\talert(token);
\t\t});
\n

Troubleshooting

\n

In case the application doesn't work as expected. Here are some things you can verify

\n

Android

\n\n
\t<activity android:name=\"com.telerik.pushplugin.PushHandlerActivity\"/>
\t<receiver
\t\tandroid:name=\"com.google.android.gms.gcm.GcmReceiver\"
\t    android:exported=\"true\"
\t    android:permission=\"com.google.android.c2dm.permission.SEND\" >
\t    <intent-filter>
\t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
\t        <category android:name=\"com.pushApp.gcm\" />
\t    </intent-filter>
\t</receiver>
\t<service
\t\tandroid:name=\"com.telerik.pushplugin.PushPlugin\"
\t    android:exported=\"false\" >
\t    <intent-filter>
\t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
\t    </intent-filter>
\t</service>
\n\n
\t<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
\t<uses-permission android:name=\"android.permission.WAKE_LOCK\" />
\t<uses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" />
\n

iOS

\n\n

Using with Telerik Backend Services

\n

In order to use the plugin with Telerik Backend Services take a look at the official sample:

\n

Telerik Backend Services NativeScript Push Sample

\n

Android Configuration for using Firebase Cloud Messaging

\n

From version 0.1.0 the nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

\n
    \n
  1. Add the FCM SDK
    2. \n
\n
\n

Since version 0.1.1 thе google-services plugin is added via a hook. You can skip this step for versions 0.1.1 and above.

\n
\n
- Navigate to the project `platforms/android/` folder and locate the application-level `build.gradle` file\n- Add the `google-services` plugin to the list of other dependencies in your app's `build.gradle` file\n\n\n```Groovy\ndependencies {\n\t// ...\n\tclasspath "com.google.gms:google-services:3.0.0"\n\t// ...\n}\n```\n\n- Add the following line be at the bottom of your `build.gradle` file to enable the Gradle plugin\n\n```Groovy\napply plugin: 'com.google.gms.google-services'\n```\n
\n
    \n
  1. \n

    Add the google-services.json file

    \n

    To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

    \n

    Place the file in your app's App_Resources/Android folder

    \n
    2. \n
  2. \n

    Obtain the FCM Server Key

    \n

    This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

    \n

    If you are using the Telerik Platform Notifications service refer to this article for instructions how to set up this key.

    \n
    3. \n
\n

Receive and Handle Messages from FCM on Android

\n

The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

\n

The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the onMessageReceived(message, data, notification) method of the NativeScript module.

\n

The behavior of the onMessageReceived callback in the module follows the behavior of the FCM service.

\n

Handling Data Messages

\n

The onMessageReceived method of the plugin is called each time a data notification is received.

\n

When in background mode, a notification is constructed according to the values of the key specified above and placed in the tray. Tapping the notification launches the app and invokes the onMessageReceived callback.

\n

Handling Notification Messages

\n

If the app is in foreground, it invokes the onMessageReceived callback with three arguments (message, data, notification).

\n

If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the onMessageReceived callback.

\n

Handling Mixed Messages

\n

Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

\n\n

Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

\n
application.on(application.resumeEvent, function(args) {
    if (args.android) {
        var act = args.android;
        var intent = act.getIntent();
        var extras = intent.getExtras();
        if (extras) {
            // for (var key in extras) {
            //     console.log(key + ' -> ' + extras[key]);
            // }
            var msg = extras.get('someKey');
        }
    }
});
\n

Parameters of the onMessageReceived Callback

\n

Depending on the notification event and payload, the onMessageReceived callback is invoked with up to three arguments.

\n\n

Setting Notification Icon and Color

\n
\n

From version 0.1.0 the module no longer adds as default a large icon of the notification because this was forcing developers to always use a large icon which is not the native behavior.

\n
\n

The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray. More information on these keys is available in the documentation of the Telerik Platform Notifications service documentation article.

\n

Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

\n
\t<meta-data
\t\tandroid:name=\"com.google.firebase.messaging.default_notification_icon\"
\t\tandroid:resource=\"@drawable/ic_stat_ic_notification\" />
\t<meta-data
\t\tandroid:name=\"com.google.firebase.messaging.default_notification_color\"
\t\tandroid:resource=\"@color/colorAccent\" />
\n
\n

For more info visit the Edit the app manifest article.

\n
\n","downloadStats":{"lastDay":0,"lastWeek":19,"lastMonth":107}},"@nativescript/firebase-messaging-core":{"name":"@nativescript/firebase-messaging-core","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-messaging-core

\n
ns plugin add @nativescript/firebase-messaging-core
\n

What does it do?

\n

Firebase Messaging Core is a lite package which enables you to use a third-party push service on Android and iOS.

\n

On Android it will always use FCM.

\n

Usage

\n

iOS - Requesting permissions

\n

iOS prevents messages containing notification (or 'alert') payloads from being displayed unless you have received explicit permission from the user.

\n

This module provides a requestPermission method which triggers a native permission dialog requesting the user's permission:

\n
import { MessagingCore, AuthorizationStatus } from '@nativescript/firebase-messaging-core';

async function requestUserPermission() {
\tconst authStatus = await MessagingCore.getInstance().requestPermission({
\t\tios: {
\t\t\talert: true,
\t\t},
\t});
\tconst enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;

\tif (enabled) {
\t\tconsole.log('Authorization status:', authStatus);

\t\tconst didRegister = await MessagingCore.getInstance().registerDeviceForRemoteMessages();
\t}
}
\n

The permissions API for iOS provides much more fine-grain control over permissions and how they're handled within your application. To learn more, view the advanced iOS Permissions documentation.

\n

On Android, you do not need to request user permission. This method can still be called on Android devices; however, and will always resolve successfully.

\n

Foreground state messages

\n

To listen to messages in the foreground, call the onMessage method inside of your application code. Code executed via this handler is able to interact with your application (e.g. updating the state or UI).

\n

For example, the Alert API could be used to display a new Alert each time a message is delivered'

\n
import { alert } from '@nativescript/core';
import { MessagingCore } from '@nativescript/firebase-messaging-core';

MessagingCore.getInstance().addOnMessage(async (remoteMessage) => {
\tif(MessagingCore.inForeground){
\t\talert('A new Push message arrived with application inForeground!', JSON.stringify(remoteMessage));
\t}else{
\t\talert('A new Push message arrived with application in background!', JSON.stringify(remoteMessage));
\t}
});
\n

Always show notifications when the application is in foreground

\n

If you always want to display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification, you need to set the showNotificationsWhenInForeground option to true:

\n
import { MessagingCore } from '@nativescript/firebase-messaging-core';
MessagingCore.getInstance().showNotificationsWhenInForeground = true;
\n

Device tokens

\n

To send a message to a device, you must access its unique token. A token is automatically generated by the device and can be accessed using the Messaging module. The token should be saved inside your systems data-store and should be easily accessible when required.

\n

The examples below use a NativeScript ApplicationSettings to store and manage the tokens. You can however use any datastore.

\n
\n

Note: If using iOS, ensure you have completed the setup & requested user permission before trying to receive messages!

\n
\n

Saving tokens

\n

Once your application has started, you can call the getToken method on the Cloud Messaging module to get the unique device token (if using a different push notification provider, such as Amazon SNS, you will need to call getAPNSToken on iOS):

\n
import { ApplicationSettings } from '@nativescript/core';
import { MessagingCore } from '@nativescript/firebase-messaging-core';

async function saveTokenToDatabase(token) {
\tApplicationSettings.setString(token);
}

// Get the device token
MessagingCore.getInstance()
\t.getCurrentToken()
\t.then((token) => {
\t\tsaveTokenToDatabase(token);
\t});

// Listen to whether the token changes
MessagingCore.getInstance().addOnToken((token) => {
\tsaveTokenToDatabase(token);
});
\n

Android Integration

\n

Push notification icon and color

\n

If you want to use a specific icon for the push notification, it has to be configured in the tag in the AndroidManifest.xml

\n
<meta-data android:name=\"com.google.firebase.messaging.default_notification_icon\"
           android:resource=\"@drawable/your_drawable_name\" />
<meta-data android:name=\"com.google.firebase.messaging.default_notification_color\"
           android:resource=\"@color/ns_primary\" />
\n

Apple Integration

\n

Enable push support in Xcode

\n

Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):\n\"push-xcode-config\"

\n
\n

Note: Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

\n
\n

Copy the entitlements file

\n

The previous step created a the file platforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nMove and rename that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

\n
<key>aps-environment</key>
<string>development</string>
\n

Allow processing when a background push is received

\n

Open app/App_Resources/iOS/Info.plist and add this to the bottom:

\n
<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":190,"lastWeek":1083,"lastMonth":5528}},"@nativescript/types-ios":{"name":"@nativescript/types-ios","version":"8.6.1","license":"Apache-2.0","readme":"

@nativescript/types-ios

\n

NativeScript Types for iOS

\n","downloadStats":{"lastDay":829,"lastWeek":3718,"lastMonth":15521}},"react-nativescript":{"name":"react-nativescript","version":"5.0.0","license":"MIT","readme":"

react-nativescript

\n

Docs: https://react-nativescript.netlify.app

\n","downloadStats":{"lastDay":5,"lastWeek":76,"lastMonth":321}},"nativescript-ng2-parallax":{"name":"nativescript-ng2-parallax","version":"0.1.9","license":"MIT","readme":"

#NativeScript Angular2 parallax view component

\n

\"npm\"\n\"npm\"

\n

\"NativeScript

\n

###Install\n$ tns plugin add nativescript-ng2-parallax

\n

###Example useage

\n
import {Component} from '@angular/core';

// import parallaxView
import {ParallaxView} from 'nativescript-ng2-parallax/nativescript-ng2-parallax';

@Component({
\tselector: 'app',
\ttemplate: `
\t<ActionBar title=\"NativeScript + Angular2 Parallax View\">
\t</ActionBar>
\t<parallax-view head-height=\"200\" [controls-to-fade]=\"['headerLabel','headerLabel2']\">
\t\t<StackLayout class=\"header-template\" head>
\t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
\t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
\t\t</StackLayout>
\t\t<StackLayout class=\"body-template\" body>
\t\t\t<Label id=\"titleLabel\" text=\"Angular 2 Parallax Template\"></Label>
\t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

\t\t\tUt at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.\">
\t\t\t</TextView>
\t\t</StackLayout>
\t</parallax-view>
\t`,
\tdirectives: [
\t\tParallaxView
\t],
\tstyles: [`
\t\t#headerLabel2{
\t\t\tfont-size: 45;
\t\t\thorizontal-align: center;
\t\t\tmargin-top:-25;
\t\t\tcolor:#B2EBF2;
\t\t}
\t\t#headerLabel{
\t\t\tfont-size: 45;
\t\t\thorizontal-align: center;
\t\t\tpadding-top:75;
\t\t\tcolor:#B2EBF2;
\t\t}
\t\t.header-template{
\t\t\tbackground-color:#212121;
\t\t\tbackground-image:url('~/images/mountains.png');
\t\t\tbackground-size:cover;
\t\t\theight:250;
\t\t}
\t\t.body-template textview{
\t\t\tfont-size:20;
\t\t\tpadding:5 15;
\t\t\tborder:none;
\t\t}
\t\t#titleLabel{
\t\t\tfont-weight:bold;
\t\t\tfont-size:30;
\t\t\tpadding:5 15;

\t\t}
`]

})
class DemoComponent {
\tpublic message: string = \"Your {N} + Angular 2 plugin is working.\"

\tconstructor() { }
}
\n

To use the parallax scroll view you need to have to containers inside of the <parallax-view></parallax-view> tag.\none container needs the head attribute and the other the body. In the above example they are both StackLayouts

\n

You can specify the head containers height with\n<parallax-view head-height="<VALUE>">

\n

If you have controls you want to fade out with the scroll of the head container their id's can be passed as array of strings like so:\n<parallax-view [controls-to-fade]="['control1','control2']">.

\n

Both the head-height and controls-to-fade are not required. If no head-height value is set then it defaults to 300.

\n

Special thanks to Nathan Walker for setting up the Angular 2 Plugin seed that I used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-ng2-plugin-seed

\n

Contributors

\n\n

##License

\n

MIT

\n","downloadStats":{"lastDay":8,"lastWeek":54,"lastMonth":109}},"nativescript-feedback":{"name":"nativescript-feedback","version":"2.0.0","license":"MIT","readme":"

NativeScript Feedback

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.5.0.

\n
\n

       \n

\n

iOS and Android running the included demo - much better framerate on YouTube!

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/EddyVerbruggen/nativescript-feedback
cd nativescript-feedback/src
npm run demo.ios # or demo.android
\n

NativeScript-Angular

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

NativeScript-Vue

\n

Check out the demo-vue folder. This is how to clone and run it:

\n
git clone https://github.com/EddyVerbruggen/nativescript-feedback
cd nativescript-feedback/src
npm run demo-vue.ios # or demo-vue.android
\n

Installation

\n
tns plugin add nativescript-feedback
\n

API

\n

requiring / importing the plugin

\n

JavaScript

\n
var FeedbackPlugin = require(\"nativescript-feedback\");
var feedback = new FeedbackPlugin.Feedback();
\n

TypeScript

\n
import { Feedback, FeedbackType, FeedbackPosition } from \"nativescript-feedback\";

export class MyClassWithFeedback {
  private feedback: Feedback;
  
  constructor() {
    this.feedback = new Feedback();
  }
}
\n

show

\n

Showing feedback can be as easy as:

\n
this.feedback.show({
  message: \"Easiest thing ever, right?\"
});
\n

That uses a bunch of sane defaults.\nHowever, there are a lot of things you may want to tweak. All of which are optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
titleundefinedThe bold title at the top.
titleColornew Color("white")The title's color.
titleFontBold system fontiOS needs the font name and android the file name. See the demo for examples.
titleSize16The size of the title font.
messageundefinedThe message below the title.
messageColornew Color("white")The message's color.
messageFontSystem fontiOS needs the font name and android the file name. See the demo for examples.
messageSize13The size of the message font.
duration4000The duration to show the feedback (milliseconds).
typeFeedbackType.CustomOne of .Custom, .Success, .Warning, .Error, .Info. Each with a distinct style as show in the animations above. You can still override all other properties according to your liking.
positionFeedbackPosition.TopEither .Top or .Bottom.
backgroundColorDepends on the typeThe background's color.
iconDepends on the typeA custom icon shown on the left. Loaded from App_Resources/<platform> folders. Example here. Want no icon at all? Don't set a type.
android.iconColorSee descriptionOn iOS the icon color is as-is, but on Android it's white. Set this color to override the latter (also see the TypeScript example below).
android.iconPulseEnabledtrueOn Android you can disable the pulsating effect of the icon.
onTapundefinedA callback function that gets invoked when the user tapped your feedback.
onShowundefinedA callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done.
onHideundefinedA callback for when the feedback is hidden.
\n

One of the examples in the demo app shows a custom icon and alternative colors. You'd get there by doing:

\n

JavaScript

\n
var FeedbackType = require (\"nativescript-feedback\").FeedbackType;
var FeedbackPosition = require (\"nativescript-feedback\").FeedbackPosition;
var color = require(\"color\");

this.feedback.show({
  title: \"Thumbs up!\",
  titleColor: new color.Color(\"#222222\"),
  position: FeedbackPosition.Bottom, // iOS only
  type: FeedbackType.Custom, // this is the default type, by the way
  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
  messageColor: new color.Color(\"#333333\"),
  duration: 3000,
  backgroundColor: new color.Color(\"yellowgreen\"),
  icon: \"customicon\", // in App_Resources/platform folders
  onTap: function() { console.log(\"showCustomIcon tapped\") },
  onShow: function(animating) { console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\") },
  onHide: function() { console.log(\"showCustomIcon hidden\") }
});
\n

TypeScript

\n
import { FeedbackType, FeedbackPosition } from \"nativescript-feedback\";
import { Color } from \"tns-core-modules/color\";

this.feedback.show({
  title: \"Thumbs up!\",
  titleColor: new Color(\"#222222\"),
  position: FeedbackPosition.Bottom,
  type: FeedbackType.Custom, // this is the default type, by the way
  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
  messageColor: new Color(\"#333333\"),
  duration: 3000,
  backgroundColor: new Color(\"yellowgreen\"),
  icon: \"customicon\", // in App_Resources/platform folders
  android: {
    iconColor: new Color(\"#222222\") // optional, leave out if you don't need it
  },
  onTap: () => console.log(\"showCustomIcon tapped\"),
  onShow: animating => console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\"),
  onHide: () => console.log(\"showCustomIcon hidden\")
});
\n

hide

\n

Hiding a message can be done automatically (see duration), by a gesture (tap / swipe), or programmatically as shown here:

\n
this.feedback.hide();
\n

Convenience functions

\n

Since in many cases you want to only show success / info / warning / error messages anyway, this plugin's got you covered. You can call any of these functions and still pass in any of the aforementioned properties to tweak it to your liking:

\n

success

\n
this.feedback.success({
  title: \"Awesome\",
  message: \"That was great!\"
});
\n

info

\n
this.feedback.info({
  title: \"Info <> Data\",
  message: \"Info is relevant data, not just any data.\"
});
\n

warning

\n
this.feedback.warning({
  message: \"Your battery is almost empty\"
});
\n

error

\n
this.feedback.error({
  title: \"KABOoooOOM!\",
  titleColor: new Color(\"black\")
});
\n

Credits

\n

On Android we're using the Alerter library by Tapadoo,\nand on iOS ISMessages by ilyainyushin.

\n","downloadStats":{"lastDay":119,"lastWeek":540,"lastMonth":2210}},"@approov/nativescript-approov":{"name":"@approov/nativescript-approov","version":"3.1.1","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":87}},"@valor/nativescript-websockets":{"name":"@valor/nativescript-websockets","version":"1.0.5","license":"MIT","readme":"

@valor/nativescript-websockets

\n
ns plugin add @valor/nativescript-websockets
\n

Usage

\n

To use this plugin simply add this to your polyfills.ts on angular (before importing zone.js) or on your entrypoint (app.ts, main.ts) on other flavors:

\n
import '@valor/nativescript-websockets';
\n

Beware that import order matters! If needed you can also add the plugin to your bundle directly with webpack.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":15,"lastWeek":111,"lastMonth":722}},"@chasexc/nativescript-firebase":{"name":"@chasexc/nativescript-firebase","version":"11.1.5","license":"MIT","readme":"

NativeScript Firebase plugin

\n

\"Firebase\"/

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n
\n

🚨🚨🚨 I'M NO LONGER ABLE TO MAINTAIN THIS PROJECT - I'm archiving the project for now, but if you want to take over, please don't open an issue, but hit me up on Twitter @eddyverbruggen. Alternatively, please check out this excellent plugin: https://github.com/NativeScript/firebase

\n
\n

Features

\n\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Note: for using separate versions of these files for development and production environments see this section

\n

Installation

\n

If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

\n

From the command prompt go to your app's root folder and execute this for NativeScript 7+:

\n
tns plugin add @nativescript/firebase
\n

or for NativeScript 6:

\n
tns plugin add nativescript-plugin-firebase
\n

This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

\n
\n

Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

\n
\n
\n

Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

\n
\n

Config

\n

If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

\n

You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

\n

You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

\n
\n

Be advised. Enabling some features (such as Admob) in the firebase.nativescript.json may require additional configuration. If you are experiencing crashes or bugs after installing this plugin please consult the documentation for each of the features you've enabled to ensure that no additioal configuration is required.

\n
\n

Using Vue?

\n

Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

\n

If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

\n

iOS (Cocoapods)

\n

The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

\n

Google Play Services Version

\n

The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Usage

\n

Demo app

\n

If you want a quickstart, clone the repo, then:

\n\n

Start-up wiring

\n

We need to do some wiring when your app starts, so open app.js and add this before application.start();:

\n
JavaScript
\n
// NativeScript 7+
var firebase = require(\"@nativescript/firebase\").firebase;

// NativeScript 6-
var firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function () {
      console.log(\"firebase.init done\");
    },
    function (error) {
      console.log(\"firebase.init error: \" + error);
    }
);
\n

TypeScript

\n
// NativeScript 7+
import { firebase } from \"@nativescript/firebase\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
  () => {
    console.log(\"firebase.init done\");
  },
  error => {
    console.log(`firebase.init error: ${error}`);
  }
);
\n

Angular

\n

Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

\n
// NativeScript 7+
import { firebase } from \"@nativescript/firebase\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

@Component({
    // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

Authentication failed: invalid_token

\n

On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

\n
[FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
or
[FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
\n

This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

\n
firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
  iOSEmulatorFlush: true
}).then()
\n

Pod dependency error

\n

If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

\n

This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

\n

Known issues on Android

\n

Genymotion

\n

You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

\n

DexIndexOverflowException

\n
com.android.dex.DexIndexOverflowException: method ID not in..
\n

Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n

java.lang.OutOfMemoryError: GC overhead limit exceeded

\n

Increase the Java Max Heap Size like this (the bit at the end):

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }
  dexOptions {
    javaMaxHeapSize \"4g\"
  }
}
\n

FirebaseApp with name [DEFAULT] doesn't exist

\n

Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

\n

Errors regarding API level 26.0.0

\n

Update your local Android SDKs:

\n

Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

\n

Found play-services:A.C.D, but version B.X.Y is needed..

\n

Update your Android bits like the issue above and reinstall the android platform in your project.

\n

include.gradle: Failed to apply plugin .. For input string: "+"

\n

You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"15.0.0\"
  }
}
\n

Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

\n

Separation of Environments

\n

It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

\n

Setup

\n
    \n
  1. \n

    Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

    \n
    2. \n
  2. \n

    Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

    \n
      \n
    • iOS\n
        \n
      • app/App_Resources/iOS/GoogleService-Info.plist.dev
        • \n
      • app/App_Resources/iOS/GoogleService-Info.plist.prod
        • \n
      \n
      • \n
    • Android\n
        \n
      • app/App_Resources/Android/google-services.json.dev
        • \n
      • app/App_Resources/Android/google-services.json.prod
        • \n
      \n
      • \n
    \n
    3. \n
\n

Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

\n

Build

\n

The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

\n\n

Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

\n

Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":132}},"@nativescript-community/ui-neumorphiclayout":{"name":"@nativescript-community/ui-neumorphiclayout","version":"2.0.5","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

@nativescript-community/ui-neumorphiclayout

\n

A plugin that adds support for neumorphism styling to NativeScript layout containers.\n

\n

\n\n\n\n

\n

Installation

\n
ns plugin add @nativescript-community/ui-neumorphiclayout
or
npm i @nativescript-community/ui-neumorphiclayout
\n

Usage

\n

Importing plugin at startup is all it takes to add support for neumorphism styling to your application.

\n

NOTE: Scrollable views like ListView or ScrollView must NEVER be direct siblings of a view with neumorphism because of android clipChildren effect.\nInstead, add those views inside a layout container.

\n

Plain NativeScript

\n

TypeScript

\n
import { Application } from '@nativescript/core';
import '@nativescript-community/ui-neumorphiclayout';

Application.run({ moduleName: 'app-root' });
\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
    <Page.actionBar>
        <ActionBar title=\"Neumorphism\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class=\"px-20\" backgroundColor=\"#e0e1e3\">
        <StackLayout verticalAlignment=\"center\" width=\"200\" height=\"200\" marginTop=\"30\" neumorphism=\"convex\" fillColor=\"#e0e1e3\" lightShadowColor=\"#ffffff\" darkShadowColor=\"#bebfc1\" cornerRadius=\"100\">
            <Label text=\"Tap me!\" textAlignment=\"center\" fontSize=\"24\" color=\"#6d707d\" fontWeight=\"bold\"/>
        </StackLayout>
    </StackLayout>
</Page>
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefaultDescription
neumorphismstringnullDetermines the view neumorphism styling. Possible types: flat, concave, convex, pressed, pressed-in-out.
touchStatestrubgnullDetermines the view neumorphism styling for tap effect.
fillColorColor#ffffffDetermines the color that view will use to set background color.
lightShadowColorColor#ffffffDetermines the color that view will use to set light shadow color.
darkShadowColorColor#d9d9d9Determines the color that view will use to set dark shadow color.
cornerRadiusnumber0Determines the rounding of the view corners.
shadowDistancenumber10Determines the offset of the view shadows. The value is subtracted from the offset of the first shadow and added to the offset of the second one.
shadowRadiusnumbershadowDistance*2Determines the radius for the view shadows.
isTouchedbooleanfalseA flag indicating whether view is currently touched or not.
\n

About

\n

This plugin adds support for neumorphism styling to NativeScript layout containers. It also includes basic gesture support for tap effect.

\n

Its functionality is inspired by Neumorphism.io.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":221}},"nativescript-ui-calendar":{"name":"nativescript-ui-calendar","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI Calendar

\n\n

Overview

\n

Here are some of the features of the NativeScript UI Calendar:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-calendar
\n

Documentation

\n

More information about the plugin features is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":246,"lastWeek":1137,"lastMonth":4355}},"nativescript-videoplayer":{"name":"nativescript-videoplayer","version":"5.0.1","license":"MIT","readme":"\n

NativeScript VideoPlayer

\n\n

A NativeScript plugin to provide the ability to play local and remote videos.

\n

\"Build\n\"npm\"\n\"npm\"

\n
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

NativeScript Version 7+:\ntns plugin add nativescript-videoplayer

\n

NativeScript version prior to 7:\ntns plugin add nativescript-videoplayer@4.2.1

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android MediaPlayeriOS AVPlayer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample\"Sample
\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:VideoPlayer=\"nativescript-videoplayer\">
        <StackLayout>

            <VideoPlayer:Video id=\"nativeVideoPlayer\"
            controls=\"true\" loop=\"true\" autoplay=\"false\" height=\"280\"
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>
\n
import { Video } from 'nativescript-videoplayer';

const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
// Setting event listeners on the Video
video.on(Video.pausedEvent, () => {
  console.log('Video has been paused.');
});

video.on(Video.mutedEvent, () => {
  console.log('Video has been muted.');
});

// changing the src
video.src = 'some video file or url';

// set loop
video.loop = false;
\n

Angular NativeScript Usage

\n
// somewhere at top of your component or bootstrap file
import { registerElement } from \"nativescript-angular/element-registry\";
import { Video } from 'nativescript-videoplayer';
registerElement(\"VideoPlayer\", () => Video);
// documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
\n

With AngularNative you have to explicitly close all components so the correct template code is below.

\n
  <VideoPlayer
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\"
      height=\"300\"></VideoPlayer>
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
srcThe src file for the video. Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.
autoplay - (boolean)Set if the video should start playing as soon as possible or to wait for user interaction.
controls - (boolean)Set to use the native video player's media playback controls.
muted - (boolean)Mutes the native video player.
loop - (boolean)Sets the native video player to loop once playback has finished.
fill - (boolean)If true, the aspect ratio of the video will not be honored and it will fill the entire space available.
observeCurrentTime - (boolean)If true, currentTimeUpdated callback is possible.
headers - (Map<string, string>)Set headers to add when loading a video from URL.
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
playStart playing the video.
pausePause the video
seekToTime(time: number)Seek the video to a time (milliseconds)
getCurrentTimeReturns the current time in the video duration (milliseconds)
getDurationReturns the current time in the video duration (milliseconds)
destroyDestroy the video player and free resources
mute(boolean)If true, mutes the video. If false, unmute the video.
setVolume(volume: number)Set the volume - Must be between 0 and 1.
ANDROID ONLY - stopStop the playback - this resets the player and remove the video src
\n

Observable Properties

\n\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
errorEventThis event fires when an error in the source code is thrown.
playbackReadyEventThis event fires when the video is ready.
playbackStartEventThis event fires when video starts playback.
seekToTimeCompleteEventThis event fires when seeking is complete.
currentTimeUpdatedEventThis event fires when the current time of playing video is changed.
finishedEventThis event fires when the video is complete.
mutedEventThis event fires when video is muted.
unmutedEventThis event fires when video is unmutedEvent.
pausedEventThis event fires when video is paused.
volumeSetEventThis event fires when the volume is set.
\n

iOS Logging

\n

When running the iOS Simulator, after playing a video the iOS system may write\nlog messages to the console every few seconds of the form

\n
[aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
\n

They will continue being logged even after the video has been properly destroyed.\nThese messages can be safely ignored. To turn them off completely, run the following\ncommand in your shell before running tns run ios:

\n
export SIMCTL_CHILD_OS_ACTIVITY_MODE=\"disable\"
\n","downloadStats":{"lastDay":175,"lastWeek":779,"lastMonth":3433}},"nativescript-mapbox":{"name":"nativescript-mapbox","version":"5.0.1","license":"MIT","readme":"\n \n\n

NativeScript Mapbox plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Awesome native OpenGL-powered maps - by Mapbox

\n\n
\n

There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

\n
\n

Before you begin - Prerequisites

\n

You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

\n

You will also need to set up your development environment. Please refer to the NativeScript documentation.

\n

Installation

\n
$ npm install --save nativescript-mapbox
\n

DEMOS

\n

Two demo applications are available in the repository.

\n

To run them, you'll need to clone the github repository and build the plugin. See below.

\n

You will also need an access token. Your access_token can then be set in the top level mapbox_config.ts file.

\n

The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

\n
\n

NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

\n
\n

To run the Angular demo

\n
cd src
npm run build.release
cd ../demo-angular
tns run <platform>
\n

To run the plain Nativescript demo

\n
cd src
npm run build.release
cd ../demo
tns run <platform>
\n

Debug Build

\n

To come up to speed on the plugin, I added extensive trace messages.\nThese can be turned on by replacing 'npm run build.release' with 'npm run build.debug' in the commands above.

\n

Breaking Changes

\n

This version includes breaking API changes.

\n

The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

\n

Issues

\n

If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

\n

On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

\n
  <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
\n

If you get an error related to TelemetryService then please check it's there.

\n

Usage

\n

Demo app (XML + TypeScript)

\n

If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

\n

Demo app (Angular)

\n

There is also the beginnings of an Angular demo in demo-angular in this repository.

\n

Declaring a map in the view

\n

XML

\n

You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

\n

A simple layout could look like this:

\n\n

Could be rendered by a definition like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
  <StackLayout>
    <Label text=\"Nice map, huh!\" class=\"title\"/>
    <ContentView height=\"240\" width=\"240\">
      <map:MapboxView
          accessToken=\"your_token\"
          mapStyle=\"traffic_night\"
          latitude=\"52.3702160\"
          longitude=\"4.8951680\"
          zoomLevel=\"3\"
          showUserLocation=\"true\"
          mapReady=\"onMapReady\">
      </map:MapboxView>
    </ContentView>
  </StackLayout>
</Page>
\n

Angular

\n

Component:

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
\n

View:

\n
  <ContentView height=\"100%\" width=\"100%\">
    <Mapbox
        accessToken=\"your_token\"
        mapStyle=\"traffic_day\"
        latitude=\"50.467735\"
        longitude=\"13.427718\"
        hideCompass=\"true\"
        zoomLevel=\"18\"
        showUserLocation=\"false\"
        disableZoom=\"false\"
        disableRotation=\"false\"
        disableScroll=\"false\"
        disableTilt=\"false\"
        (mapReady)=\"onMapReady($event)\">
    </Mapbox>
  </ContentView>
\n

Available XML/Angular options

\n

All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondefaultdescription
accesstoken-see 'Prerequisites' above
delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
latitude -Set the center of the map by passing this in
longitude-.. and this as well
zoomLevel00-20
showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
hideCompass falseDon't show the compass in the top right corner during rotation of the map
hideLogofalseMapbox requires false if you're on a free plan
hideAttribution trueMapbox requires false if you're on a free plan
disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
moveBeginEvent-The name of a function to be called when the map is moved.
locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
\n

Want to add markers?

\n

This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

\n

Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
  var nativeMapView = args.ios ? args.ios : args.android;
  console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

  // .. or use the convenience methods exposed on args.map, for instance:
  args.map.addMarkers([
    {
      lat: 52.3602160,
      lng: 4.8891680,
      title: 'One-line title here',
      subtitle: 'Really really nice location',
      selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
      onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
    }]
  );
}

exports.onMapReady = onMapReady;
\n

.. or want to set the viewport bounds?

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  args.map.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true
      }
  );
}

exports.onMapReady = onMapReady;
\n

The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

\n

Check out the usage details on the functions below.

\n

Declaring a map programmatically

\n

Add a container to your view XML where you want to programmatically add the map. Give it an id.

\n
<ContentView id=\"mapContainer\" />
\n

show

\n

    const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

    const settings = {

      // NOTE: passing in the container here.

      container: contentView,
      accessToken: ACCESS_TOKEN,
      style: MapStyle.LIGHT,
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 9, // 0 (most of the world) to 20, default 0
      showUserLocation: true, // default false
      hideAttribution: true, // default false
      hideLogo: true, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          iconPath: 'res/markers/green_pin_marker.png',
          onTap: () => console.log(\"'Nice location' marker tapped\"),
          onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
        }
      ]
    };

    console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

    const mapView = new MapboxView();

    // Bind some event handlers onto our newly created map view. 

    mapView.on( 'mapReady', ( args : any ) => {

      console.log( \"main-view-model: onMapReady fired.\" );

      // this is an instance of class MapboxView

      this.mapboxView = args.map;

      // get a reference to the Mapbox API shim object so we can directly call its methods.

      this.mapbox = this.mapboxView.getMapboxApi();

      this.mapbox.setOnMapClickListener( point => {
        console.log(`>> Map clicked: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnMapLongClickListener( point => {
        console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnScrollListener((point: LatLng) => {
        // console.log(`>> Map scrolled`);
      });

      this.mapbox.setOnFlingListener(() => {
        console.log(`>> Map flinged\"`);
      }).catch( err => console.log(err) );

    });

    mapView.setConfig( settings );
    contentView.content = mapView;
\n

hide

\n

All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

\n
  mapbox.hide();
\n

unhide

\n

If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

\n
  mapbox.unhide();
\n

destroy 💥

\n

To clean up the map entirely you can destroy instead of hide it:

\n
  mapbox.destroy();
\n

setMapStyle

\n

You can update the map style after you've loaded it.

\n
\n

With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

\n
\n
  mapbox.setMapStyle(mapbox.MapStyle.DARK);
\n

addMarkers

\n
  import { MapboxMarker } from \"nativescript-mapbox\";

  const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: 'res/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
    onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
  };

  mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])
\n

Updating markers

\n

Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

\n
  firstMarker.update({
    lat: 52.3622160,
    lng: 4.8911680,
    title: 'One-line title here (UPDATE)',
    subtitle: 'Updated subtitle',
    selected: true, // this will trigger the callout upon update
    onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
    onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
  })
\n

removeMarkers

\n

You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

\n
  // remove all markers
  mapbox.removeMarkers();

  // remove specific markers by id
  mapbox.removeMarkers([1, 2]);
\n

setViewport

\n

If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

\n
  mapbox.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true // default true
      }
  )
\n

getViewport

\n
  mapbox.getViewport().then(
      function(result) {
        console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
      }
  )
\n

setCenter

\n
  mapbox.setCenter(
      {
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        animated: false // default true
      }
  )
\n

getCenter

\n

Here the promise callback makes sense, so adding it to the example:

\n
  mapbox.getCenter().then(
      function(result) {
        console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getCenter error: \" + error);
      }
  )
\n

setZoomLevel

\n
  mapbox.setZoomLevel(
      {
        level: 6.5, // mandatory, 0-20
        animated: true // default true
      }
  )
\n

getZoomLevel

\n
  mapbox.getZoomLevel().then(
      function(result) {
        console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getZoomLevel error: \" + error);
      }
  )
\n

animateCamera

\n
  // this is a boring triangle drawn near Amsterdam Central Station
  mapbox.animateCamera({
    // this is where we animate to
    target: {
        lat: 52.3732160,
        lng: 4.8941680
    },
    zoomLevel: 17, // Android
    altitude: 2000, // iOS (meters from the ground)
    bearing: 270, // Where the camera is pointing, 0-360 (degrees)
    tilt: 50,
    duration: 5000 // default 10000 (milliseconds)
  })
\n

setTilt (Android only)

\n
  mapbox.setTilt(
      {
        tilt: 40, // default 30 (degrees angle)
        duration: 4000 // default 5000 (milliseconds)
      }
  )
\n

getTilt (Android only)

\n
  mapbox.getTilt().then(
      function(tilt) {
        console.log(\"Current map tilt: \" +  tilt);
      }
  )
\n

getUserLocation

\n

If the user's location is shown on the map you can get their coordinates and speed:

\n
  mapbox.getUserLocation().then(
      function(userLocation) {
        console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
        console.log(\"Current user speed: \" +  userLocation.speed);
      }
  )
\n

trackUser

\n

In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

\n
  mapbox.trackUser({
    mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
    animated: true
  });
\n

addSource

\n

https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

\n

Adds a vector to GeoJSON source to the map.

\n
  mapbox.addSource( id, {
    type: 'vector',
    url: 'url to source'
  } );
\n

-or-

\n
  mapbox.addSource( id, {
    'type': 'geojson',
    'data': {
      \"type\": \"Feature\",
        \"geometry\": {
        \"type\": \"LineString\",
          \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
        }
      }
    }
  );
\n

removeSource

\n

Remove a source by id

\n
  mapbox.removeSource( id );
\n

addLayer

\n

NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

\n

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

\n

To add a line:

\n
  mapbox.addLayer({
    'id': someid,
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        \"type\": \"Feature\",
          \"geometry\": {
          \"type\": \"LineString\",
            \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
          }
        }
      }
    },
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },    
    'paint': {
      'line-color': '#ed6498',
      'line-width': 5,
      'line-opacity': .8,
      'line-dash-array': [ 1, 1, 1, ..]
    }
  });
\n

To add a circle:

\n
  mapbox.addLayer({
    \"id\": someid,
    \"type\": 'circle',
    \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
    \"source\": {
      \"type\": 'geojson',
      \"data\": {
        \"type\": \"Feature\",
        \"geometry\": {
          \"type\": \"Point\",
          \"coordinates\": [ lng, lat ]
        }
      }
    }, 
    \"paint\": {
      \"circle-radius\": {
        \"stops\": [
          [0, 0],
          [20, 8000 ]
        ],
        \"base\": 2
      },
      'circle-opacity': 0.05,
      'circle-color': '#ed6498',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ed6498'
    } 
  });
\n

Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

\n

removeLayer

\n

Remove a layer added with addLayer() by id.

\n
  mapbox.removeLayer( id );
\n

addLinePoint

\n

Dynamically add a point to a line.

\n
  mapbox.addLinePoint( <id of line layer>, lnglat )
\n

where lnglat is an array of two points, a longitude and a latitude.

\n

addPolygon

\n

Draw a shape. Just connect the dots like we did as a toddler.

\n

The first person to tweet a snowman drawn with this function gets a T-shirt.

\n
  // after adding this, scroll to Amsterdam to see a semi-transparent red square
  mapbox.addPolygon(
      {
        id: 1, // optional, can be used in 'removePolygons'
        fillColor: new Color(\"red\"),
        fillOpacity: 0.7,

        // stroke-related properties are only effective on iOS
        strokeColor: new Color(\"green\"),
        strokeWidth: 8,
        strokeOpacity: 0.5,

        points: [
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          },
          {
            lat: 52.35421556258807,
            lng: 4.9308013916015625
          },
          {
            lat: 52.353796172573944,
            lng: 4.8799896240234375
          },
          {
            lat: 52.3864966440161,
            lng: 4.8621368408203125
          },
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          }
        ]
      })
      .then(result => console.log(\"Mapbox addPolygon done\"))
      .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
\n

removePolygons

\n

You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

\n
  // remove all polygons
  mapbox.removePolygons();

  // remove specific polygons by id
  mapbox.removePolygons([1, 2]);
\n

addPolyline

\n

Deprecated. Use addLayer() instead.

\n

Draw a polyline. Connect the points given as parameters.

\n
  // Draw a two segment line near Amsterdam Central Station
  mapbox.addPolyline({
      id: 1, // optional, can be used in 'removePolylines'
      color: '#336699', // Set the color of the line (default black)
      width: 7, // Set the width of the line (default 5)
      opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
      points: [
          {
              'lat': 52.3833160, // mandatory
              'lng': 4.8991780 // mandatory
          },
          {
              'lat': 52.3834160,
              'lng': 4.8991880
          },
          {
              'lat': 52.3835160,
              'lng': 4.8991980
          }
      ]
  });
\n

removePolylines

\n

Deprecated. Use removeLayer() instead.

\n

You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

\n
  // remove all polylines
  mapbox.removePolylines();

  // remove specific polylines by id
  mapbox.removePolylines([1, 2]);
\n

addSource

\n

Add a source that can be used by addLayer. Note only vector type is currently supported.

\n
  mapbox.addSource(
    id: \"terrain-source\", // required
    type: \"vector\", // supported types: vector
    url: \"mapbox://mapbox.mapbox-terrain-v2\"
  );
\n

removeSource

\n

Remove a source by id.

\n
  mapbox.removeSource(\"terrain-source\");
\n

addLayer

\n

Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

\n
  mapbox.addLayer(
    id: \"terrain-data\",  // required
    source: \"terrain-source\",  // id of source
    sourceLayer: \"contour\",  // id of layer from source
    type: \"line\", // supported types: circle, fill, line
    lineJoin: \"round\",
    lineCap: \"round\",
    lineColor: \"#ff69b4\",
    lineWidth: 1,
  );
\n

removeLayer

\n

Remove a layer by id.

\n
  mapbox.removeLayer(\"terrain-data\");
\n

setOnMapClickListener

\n

Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

\n
  mapbox.setOnMapClickListener((point: LatLng) => {
    console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnMapLongClickListener

\n

Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

\n
  mapbox.setOnMapLongClickListener((point: LatLng) => {
    console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnScrollListener

\n

Add a listener to retrieve lat and lng of where the user scrolls to on the map.

\n
  mapbox.setOnScrollListener((point?: LatLng) => {
    console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

Offline maps

\n

For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

\n

Important read: the offline maps documentation by Mapbox.

\n

downloadOfflineRegion

\n

This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

\n
  mapbox.downloadOfflineRegion(
    {
      accessToken: accessToken, // required for Android in case no map has been shown yet
      name: \"Amsterdam\", // this name can be used to delete the region later
      style: mapbox.MapStyle.OUTDOORS,
      minZoom: 9,
      maxZoom: 11,
      bounds: {
        north: 52.4820,
        east: 5.1087,
        south: 52.2581,
        west: 4.6816
      },
      // this function is called many times during a download, so
      // use it to show an awesome progress bar!
      onProgress: function (progress) {
        console.log(\"Download progress: \" + JSON.stringify(progress));
      }
    }
  ).then(
    function() {
      console.log(\"Offline region downloaded\");
    },
    function(error) {
      console.log(\"Download error: \" + error);
    }
  );
\n

Advanced example: download the current viewport

\n

Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

\n
  // I spare you the error handling on this one..
  mapbox.getViewport().then(function(viewport) {
    mapbox.downloadOfflineRegion(
      {
        name: \"LastViewport\", // anything you like really
        style: mapbox.MapStyle.LIGHT,
        minZoom: viewport.zoomLevel,
        maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
        bounds: viewport.bounds,
        onProgress: function (progress) {
          console.log(\"Download %: \" + progress.percentage);
        }
      }
    );
  });
\n

listOfflineRegions

\n

To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

\n
  mapbox.listOfflineRegions({
    // required for Android in case no map has been shown yet
    accessToken: accessToken
  }).then(
    function(regions) {
      console.log(JSON.stringify(JSON.stringify(regions));
    },
    function(error) {
      console.log(\"Error while listing offline regions: \" + error);
    }
  );
\n

deleteOfflineRegion

\n

You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

\n
  mapbox.deleteOfflineRegion({
    name: \"Amsterdam\"
  }).then(
    function() {
      console.log(\"Offline region deleted\");
    },
    function(error) {
      console.log(\"Error while deleting an offline region: \" + error);
    }
  );
\n

Permissions

\n

hasFineLocationPermission / requestFineLocationPermission

\n

On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

\n

You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

\n

Note that hasFineLocationPermission will return true when:

\n\n
  mapbox.hasFineLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestFineLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
  );

  // if no permission was granted previously this will open a user consent screen
  mapbox.requestFineLocationPermission().then(
      function() {
        console.log(\"Location permission requested\");
      }
  );
\n

Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

\n

Using marker images from the internet

\n

If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

\n
\t<key>NSAppTransportSecurity</key>
\t<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
\t</dict>
\n","downloadStats":{"lastDay":11,"lastWeek":68,"lastMonth":262}},"nativescript-clipboard":{"name":"nativescript-clipboard","version":"2.1.1","license":"MIT","readme":"

NativeScript Clipboard

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

A NativeScript plugin to copy and paste data from and to the device clipboard.

\n
\n

💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.0.

\n
\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-clipboard
\n

Usage

\n
\n

TIP: Check out the demo app for TypeScript examples.

\n
\n

To use this plugin you must first require() it:

\n
var clipboard = require(\"nativescript-clipboard\");
\n

setText

\n
  clipboard.setText(\"Something relevant to put on the clipboard.\").then(function() {
      console.log(\"OK, copied to the clipboard\");
  })
\n

setTextSync

\n

This is the synchronous version of setText, available since plugin version 1.2.0.

\n
  clipboard.setTextSync(\"Something relevant to put on the clipboard.\");
\n

getText

\n
  clipboard.getText().then(function(content) {
      console.log(\"Read from clipboard: \" + content);
  })
\n

getTextSync

\n

This is the synchronous version of getText, available since plugin version 1.2.0.

\n
  var content = clipboard.getText();
  console.log(\"Read from clipboard: \" + content);
\n

Future work

\n

Implement support for storing data (image, etc) on the clipboard. Open an issue or PR in case you like to have that.

\n","downloadStats":{"lastDay":187,"lastWeek":825,"lastMonth":3194}},"esolution-nativescript-orientation":{"name":"esolution-nativescript-orientation","version":"2.2.4-alpha.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

nativescript-orientation

\n

This plugin has been updated so that it can be used for nativescript >= 7

\n

This repository is forked from NathanaelA/nativescript-orientation.

\n

A NativeScript plugin to deal with Declarative UI and Screen Orientation\nThis handles both sides of the orientation issues; both the events on when the orientation changes; and the ability to change the orientation manually.

\n

ProPlugins

\n

We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

\n

\n

Community

\n

Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

\n

Developed by

\n

\"MasterTech\"

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Sample Snapshot

\n

\"Sample1\"\nThanks to TJ VanToll for the awesome animated gif.

\n

Installation

\n

tns plugin add nativescript-orientation

\n

NativeScript 2.x.x

\n

tns plugin add nativescript-orientation@1.6.1

\n

Usage

\n

To use the module you just require() it:

\n
require( \"nativescript-orientation\" );
\n

This plugin has two separate abilities; the first ability is to setup the cool ability to run a function and setup the css when the screen is rotated.\nFor this ability, you do NOT need to keep a reference to it for the orientation event handling and css. You only need to load it once. I recommend you add it to your app.js file and forget about it.\nIt will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.\nWhat this does is automatically add and remove the "landscape" to the current Page's cssClass variable (and does other magic behind the scenes allowing it to actually work).

\n

If you want to manually control the orientation, then you will need to require it and use the functions you need.

\n

You ask, how exactly does this help?

\n

Well, guess what Cascading means in CSS?
\nYes, this means this works now:

\n

Plain Awesome NativeScript (PAN)

\n
StackLayout {
  background-color: red;
}

.landscape StackLayout {
  background-color: green;
}
\n

NativeScript Angular (NAN)

\n

/deep/ .landscape StackLayout  {
    background-color: green;
}
\n

I was recently informed the :host is a better options, as it causes less potential isolation side effects in Angular.

\n
StackLayout {
    background-color : red;
}


.landscape :host StackLayout {
  background-color: green;
}
\n

So in portrait the background would be red, in landscape the color is green.\nPlease note in Angular, you need to prefix the .landscape with /deep/ for it to work!\nIn addition, for Angular I was recently informed that :host is also a valid option, I have not tested this; but I wanted to get it documented.

\n

Why use this?

\n

You can set ALL the normal CSS values this way include width, height, font-size.\nBy using the css to control any normal items and your own page's exports.orientation to control anything not controllable by css you can change the look completely between Landscape/Portrait.

\n

You can add to any page you need it the following Function:

\n

exports.orientation(args)

\n
args.landscape = true | false
\n
args.object = the current page
\n

This function (if it exists) will be ran when the page is first created so you can set any needed defaults. (This is ran at the same time as the PageNavigatingTo event)\nThis function (if it exists) will be ran each time the orientation changes.\nSince at this moment some items can't be controlled by CSS like orientation on ScrollView, this event allows you to control change those things when the orientation changes via your code.

\n

Please note, there is also a built in event in NativeScript called orientationChanged event. The differences between these is that the built in event only gets called when the orientation changes;\nThis event is called on every screen navigation and any time the device rotates; allowing you to setup any rotation stuff during the creation of the screen.
\nANGULAR NOTE: The exports.orientation function event does NOT work in Angular since Angular does not have the same concept. You can use the orientation.addOrientationApplier instead.

\n

Additional Helper Method

\n
var orientation = require('nativescript-orientation');
\n

orientation.getOrientation(sensors?)

\n
optional sensor === true, will return you sensor values on android verses screen size calculation
\n
Some android tablets lie about port vs landscape; so we determine the orientation based on the current screen sizes
\n
  var orientation = require('nativescript-orientation');
  console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value
\n

orientation.setOrientation(direction, animation)

\n
Direction - "portrait" | "landscape" | "landscapeleft" | "landscaperight" | enum DeviceOrientation
\n
Animation === false, disabled animation on iOS. (iOS ONLY currently)
\n

This will automatically disable rotation support after it changes the orientation.

\n
  var orientation = require('nativescript-orientation');
  orientation.setOrientation(\"landscape\");
\n

orientation.enableRotation() - enable orientation

\n

This will enable automatic orientation support

\n
  var orientation = require('nativescript-orientation');
  orientation.enableRotation();  // The screen will rotate to whatever the current settings are...
\n

orientation.disableRotation() - disables orientation

\n

This will disable automatic orientation support and lock it to the current orientation

\n
  var orientation = require('nativescript-orientation');
  orientation.disableRotation(); // The screen will no longer rotate
\n

orientation.setFullScreen(value) - true/false

\n

Orientation Appliers

\n

Orientation Appliers serve as hooks into the orientation application logic for nativescript-orientation. Whenever nativescript-orientation applies its orientation logic it also calls any Orientation Appliers that you've added. This allows you to easily execute your own logic when orientation needs to be considered/applied. Orientation Appliers are simple functions that receive 1 parameter: the current orientation in string form (the same as is returned from the orientation.getOrientation() method). Methods to add and remove Orientation Appliers, as well as examples, are supplied below.

\n

oprientationApplierCallback

\n
args.landscape = true | false
\n
args.object = the current page
\n

The callback receives the same arguments as the exports.orientation event in normal NativeScript.

\n

orientation.addOrientationApplier(orientationApplierCallback)

\n

This adds an Orientation Applier

\n
var MyModule = (function() {
  var orientation = require('nativescript-orientation');

  this.boundProperty = \"some value\";


  function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = \"a different value\";
  }

  orientation.addOrientationApplier(myCallback.bind(this));

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;
\n

orientation.removeOrientationApplier(orientationApplierCallback)

\n

This removes an Orientation Applier from the set of Orientation Appliers that will be executed.

\n
var MyModule = (function() {
  var orientation = require('nativescript-orientation');

 function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = \"a different value\";
  }

  var myOrientationApplier = myCallback.bind(this);
  orientation.addOrientationApplier(myOrientationApplier);

  // Somewhere later in your code...
  orientation.removeOrientationApplier(myOrientationApplier);

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;
\n

Two key things to remember when using this functionality:

\n
    \n
  1. Use myCallback.bind(this) when adding your Orientation Applier (this preserves the correct 'this' scope for your callback method).
    2. \n
  2. In Nativescript Angular, the orientation change event does not trigger an Angular Change Detection cycle. Because of this you'll need to manually trigger Change Detection within your Orientation Applier by injecting ChangeDetectorRef from @angular/core into your Component and calling this.changeDetectorRef.detectChanges() from within your Orientation Applier;
    3. \n
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":7}},"@nstudio/schematics":{"name":"@nstudio/schematics","version":"17.0.1","license":"MIT","readme":"

Cross-platform (xplat) tools for Nx workspaces

\n

\n
\n

\"Build\n\"License\"\n\"NPM

\n
\n
\n

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

\n

Currently supported platforms

\n\n

Quickstart

\n
npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose \"None\"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose \"Integrated\"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.
\n

Init workspace

\n

Install the @nx/js plugin.

\n
npm install @nx/js -D
\n

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

\n
npx nx g @nx/js:init
\n

Install the tools:

\n
npm install @nstudio/xplat -D
\n

You are now ready to create apps:

\n
npx nx g @nstudio/xplat:app
\n

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

\n

App generation examples

\n

The additional app generators can be used as follows:

\n

Electron

\n

Electron app generator can use any web app in the workspace as it's target.

\n

If you don't have a web app yet, create one first:

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose web

\n
\n

You can now use the web app as the Electron target:

\n
npx nx g @nstudio/xplat:app desktop --target=web-sample
\n
\n

choose electron

\n
\n

Develop with:

\n
npm run start.electron.desktop
\n

Ionic

\n
npx nx g @nstudio/xplat:app sample
\n
\n

choose ionic

\n
\n

Develop in browser with:

\n
npx nx serve ionic-sample
\n

Build Ionic app:

\n
npx nx build ionic-sample
\n

A. Capacitor iOS - Prepare for development

\n
npm run prepare.ionic.sample.ios
\n

You can now open in Xcode for further development:

\n
npm run open.ionic.sample.ios
\n

B. Capacitor Android - Prepare for development

\n
npm run prepare.ionic.sample.android
\n

You can now open in Android Studio for further development:

\n
npm run open.ionic.sample.android
\n

NativeScript

\n
nx g @nstudio/xplat:app mobile
\n
\n

choose nativescript

\n
\n

A. iOS

\n
npx nx run nativescript-mobile:ios
\n

B. Android

\n
npx nx run nativescript-mobile:android
\n

Documentation

\n\n

Talks

\n\n

Recommended extra tooling

\n\n

Example repos for different scenarios

\n\n

Context

\n\n","downloadStats":{"lastDay":283,"lastWeek":618,"lastMonth":5398}},"@nativescript-community/ui-material-core":{"name":"@nativescript-community/ui-material-core","version":"7.2.4","license":"Apache-2.0","readme":"

Nativescript Material Core

\n

Core module for all Nativescript material components

\n","downloadStats":{"lastDay":438,"lastWeek":2566,"lastMonth":12184}},"@nativescript-community/texttospeech":{"name":"@nativescript-community/texttospeech","version":"3.1.2","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

@nativescript-community/texttospeech :loudspeaker:

\n

A Text to Speech NativeScript plugin for Android & iOS

\n

Native Controls

\n\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add @nativescript-community/texttospeech
\n

This command automatically installs the necessary files, as well as stores @nativescript-community/texttospeech as a dependency in your project's package.json file.

\n

Video Tutorial

\n

egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

\n

Usage

\n
/// javascript
const TextToSpeech = require('@nativescript-community/texttospeech');

/// TypeScript
import { TNSTextToSpeech, SpeakOptions } from '@nativescript-community/texttospeech';

const TTS = new TNSTextToSpeech();

const speakOptions: SpeakOptions = {
    text: 'Whatever you like', /// *** required ***
    speakRate: 0.5, // optional - default is 1.0
    pitch: 1.0, // optional - default is 1.0
    volume: 1.0, // optional - default is 1.0
    locale: 'en-GB', // optional - default is system locale,
    finishedCallback: Function, // optional
};

// Call the `speak` method passing the SpeakOptions object
TTS.speak(speakOptions).then(
    () => {
        // everything is fine
    },
    (err) => {
        // oops, something went wrong!
    }
);
\n

API

\n\n

If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code.

\n

The plugin checks whether the supplied locale code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

\n

Example with language code only:

\n
const speakOptions: SpeakOptions = {
    text: 'Whatever you like', // *** required ***
    locale: 'en', // english language will be used
};
\n

Example with locale:

\n
const speakOptions: SpeakOptions = {
    text: 'Whatever you like', // *** required ***
    locale: 'en-AU', // australian english language will be used
};
\n

Tip

\n\n

Android Only Methods

\n\n

Credits

\n

Inspired by James Montemagno's TextToSpeech Xamarin plugin

\n

Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

\n","downloadStats":{"lastDay":0,"lastWeek":27,"lastMonth":313}},"@nativescript/capacitor":{"name":"@nativescript/capacitor","version":"5.0.2","license":"Apache-2.0","readme":"

@nativescript/capacitor

\n

NativeScript for Capacitor

\n

Install

\n
yarn add @nativescript/capacitor
yarn build:mobile
npx cap sync
\n

Docs

\n

See https://capacitor.nativescript.org/

\n

Contribute to docs here

\n","downloadStats":{"lastDay":240,"lastWeek":482,"lastMonth":2488}},"@arepa/country-code":{"name":"@arepa/country-code","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript country-code.

\n\n \"npm\"\n\n

@arepa/country-code

\n
ns plugin add @arepa/country-code
\n

Usage

\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
getCurrentPais(addPlus:boolean)Returns a Promise country, code, numCell (numCell only for Android).
listaCodigosReturns an array with the countries' name, name, nom, iso2, iso3, code, flag.
showListPaisesOpen a modal with a search box and a list of countries. Returns the selected item.
\n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":240}},"@nativescript-community/ui-webview":{"name":"@nativescript-community/ui-webview","version":"1.4.9","license":"Apache-2.0","readme":"

# @nativescript-community/ui-webview

\n

Extended WebView for NativeScript which adds many options.\nThe code is originally based on nativescript-webview-ext

\n

Features

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @nativescript-community/ui-webview
\n

Angular support

\n

Import AWebViewModule from @nativescript-community/ui-webview/angular and add it to your NgModule.

\n

This registers the element AWebView. Replace the tag with

\n

Vue support

\n
import Vue from 'nativescript-vue';
import WebViewPlugin from '@nativescript-community/ui-webview/vue';

Vue.use(WebViewPlugin);
\n

This registers the element AWebView. Replace the tag with

\n

Usage

\n

Limitations

\n

In order to intercept requests for the custom scheme, we use UIWebView for iOS 9 and 10 and WKWebView for iOS 11+.

\n

iOS 11 added support for setting a WKURLSchemeHandler on the WKWebView.\nPrior to iOS 11 there isn't support for intercepting the URL with WKWebView, so we use a custom NSURLProtocol + UIWebView.

\n

Important:

\n

The custom NSURLProtocol used with UIWebView is shared with all instances of the AWebView, so mapping x-local://local-filename.js => file://app/full/path/local-filename.js is shared between them.

\n

API

\n

NativeScript View

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValueDescription
readonly isUIWebViewtrue / falseIs the native webview an UIWebView? True if iOS <11
readonly isWkWebViewtrue / falseIs the native webview an WKWebView? True if iOS >=11
srcLoad src
autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
scalesPageToFitUIWebView: Should webpage scale to fit the view? Defaults to false
scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
supportZoomtrue / falseAndroid: should the webview support zoom
viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
scrollBarIndicatorVisiblefalseAllow to hide scrollbars.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
getTitle()Returns a promise with the current document title.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
titleChangedDocument title changed
webAlertRaised when window.alert is triggered inside the webview, needed to use customs dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed. NOTE: Not supported by UIWebView
webConfirmRaised when window.confirm is triggered inside the webview, needed to use customs dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed. NOTE: Not supported by UIWebView
webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
webPromptRaised when window.prompt is triggered inside the webview, needed to use customs dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
\n

WebView

\n

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the AWebView as any other event, data will be a part of the WebViewEventData-object
\n

Possible features to come:

\n\n

Android

\n\n

iOS

\n\n

Demo and unit tests

\n

Running the demo

\n

To run the demo-project, the plugin must be build locally and a http-server must be running.

\n

The easiest way to run the demo is to follow these steps:

\n\n

Running the unit-tests

\n\n

License

\n

Apache License Version 2.0, January 2004

\n

About Nota

\n

Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

\n","downloadStats":{"lastDay":3,"lastWeek":80,"lastMonth":717}},"@nativescript/email":{"name":"@nativescript/email","version":"2.1.0","license":"Apache-2.0","readme":"

@nativescript/Email

\n

You can use this plugin to compose an e-mail, have the user edit the draft manually, and send it.

\n
\n

Note: This plugin depends on the default mail app. If you want a fallback to a third party client app like Gmail or Outlook, then check for availability, and if not available use a solution like the Social Share plugin.

\n
\n

Installation

\n
npm install @nativescript/email
\n

Usage

\n

Importing

\n

Once you've installed the plugin, the next step is to import it before using it.

\n
import * as email from '@nativescript/email';
// or
import { compose } from '@nativescript/email';
// or even
import { compose as composeEmail } from '@nativescript/email';
\n

Checking the availability

\n

To check if the device has a mail app installed, call the available method.

\n
email.available().then((avail: boolean) => {
\tconsole.log('Email available? ' + avail);
});
\n

Composing an email

\n

To compose an email, use the compose method.

\n
// let's first create a File object
import { knownFolders } from '@nativescript/core';
var appPath = knownFolders.currentApp().path;
var logoPath = appPath + '/res/telerik-logo.png';

email
\t.compose({
\t\tsubject: 'Yo',
\t\tbody: 'Hello <strong>dude</strong> :)',
\t\tto: ['eddyverbruggen@gmail.com', 'to@person2.com'],
\t\tcc: ['ccperson@somewhere.com'],
\t\tbcc: ['eddy@combidesk.com', 'eddy@x-services.nl'],
\t\tattachments: [
\t\t\t{
\t\t\t\tfileName: 'arrow1.png',
\t\t\t\tpath: 'base64://iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAYAAAD6xArmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAHGlET1QAAAACAAAAAAAAABQAAAAoAAAAFAAAABQAAAB5EsHiAAAAAEVJREFUSA1iYKAimDhxYjwIU9FIBgaQgZMmTfoPwlOmTJGniuHIhlLNxaOGwiNqNEypkwlGk9RokoIUfaM5ijo5Clh9AAAAAP//ksWFvgAAAEFJREFUY5g4cWL8pEmT/oMwiM1ATTBqONbQHA2W0WDBGgJYBUdTy2iwYA0BrILDI7VMmTJFHqv3yBUEBQsIg/QDAJNpcv6v+k1ZAAAAAElFTkSuQmCC',
\t\t\t\tmimeType: 'image/png',
\t\t\t},
\t\t\t{
\t\t\t\tfileName: 'telerik-logo.png',
\t\t\t\tpath: logoPath,
\t\t\t\tmimeType: 'image/png',
\t\t\t},
\t\t],
\t})
\t.then(
\t\tfunction () {
\t\t\tconsole.log('Email composer closed');
\t\t},
\t\tfunction (err) {
\t\t\tconsole.log('Error: ' + err);
\t\t}
\t);
\n

API

\n

Method(s)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn TypeDescription
available()Promise<boolean>Checks for availability of a mail app.
compose(options: ComposeOptions)Promise<boolean>Composes and sends a ComposeOptions email.
\n

Attachment

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
fileNamestringThe name used for the attachment.
Example: fileName: 'Cute-Kitten.png'
pathstringThe to the file to be attached.
mimeTypestring(iOS-only)Used to help the iOS device figure out how to send the file.Example:mimeType: 'image/png'
\n

ComposeOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
subjectstringOptional: The subject of the email.
bodystringOptional: The body of the email. The plugin will automatically handle plain and html email content.
bodystringOptional: The body of the email. The plugin will automatically handle plain and html email content.
tostring[]Optional: An array of email addresses of the direct recipients. On Android only the first item in the array is used.
ccstring[]Optional: An array of email addresses of the cc recipients.
bccstring[]Optional: An array of email addresses of the bcc recipients.
attachmentsArray<Attachment>The files to be attached to the email.
iosViewControlleranyOptional: (iOS-only) iOS View Controller to open compose from.
\n

Usage with Angular

\n

Check out this tutorial (YouTube) to learn how to use this plugin in a NativeScript-Angular app.

\n

Known issues

\n

On iOS you can't use the simulator to test the plugin because of an iOS limitation.\nTo prevent a crash, this plugin returns false when available is invoked on the iOS simulator.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":194,"lastWeek":950,"lastMonth":3933}},"@arepa/screen-orientation":{"name":"@arepa/screen-orientation","version":"1.0.0","license":"Apache-2.0","readme":"

screen-orientation

\n

NativeScript Plugin change the screen orientation.

\n\n \"npm\"\n\n

@arepa/screen-orientation

\n
npm install @arepa/screen-orientation
\n

Use

\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
getOrientacion()Obtiene la orientación actual de la pantalla" se traduce al inglés como "Gets the current screen orientation.
setOrientacion(Orientacion)Change the screen orientation. Returns a Promise.
\n

Supported orientation types.

\n

Orientation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OrientationDescriptions
ANYOrientation is unlocked: all orientations are supported.
PORTRAITChange the screen rotation to PORTRAIT mode.
PORTRAIT_REVERSEChange the screen rotation to PORTRAIT_REVERSE mode.
LANDSCAPEChange the screen rotation to LANDSCAPE mode
LANDSCAPE_REVERSEChange the screen rotation to LANDSCAPE_REVERSE mode
UNSPECIFIEDDoes not change orientation.
\n

###Orientation types for Android only.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OrientationDescription
PORTRAIT_SENSORChange the screen rotation to PORTRAIT_SENSOR mode when the mobile is rotated in PORTRAIT or PORTRAIT by rotating the screen 180°.
LANDSCAPE_SENSORChange the screen rotation to LANDSCAPE_SENSOR mode when the mobile is rotated in LANDSCAPE or LANDSCAPE by rotating the screen 270°.
\n

Get the screen orientation.

\n
//Gets the current orientation in string format.
let orientacion = getOrientacion();
\n

Change the screen orientation.

\n
//change the orientation;
setOrientacion(Orientacion.ANY).then((res:boolean)=>{
  console.log(res)
})
\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":44}},"nativescript-uxcam":{"name":"nativescript-uxcam","version":"1.0.2","license":"MIT","readme":"

NativeScript UXCam

\n

Installation

\n

tns plugin add nativescript-uxcam

\n

NB: UXCam on iOS needs a minimum version of iOS 11.0

\n

Usage

\n

Setup

\n
import { NSUXCam } from 'nativescript-uxcam';

NSUXCam.optIntoSchematicRecordings();
const blur = {
      'type': 3,
      'hideGestures': true,
      'blurRadius': 20,
      'screens': ['Home Screen']
    }

var config = {
        'userAppKey': '<your-app-key>',
        'occlusions': [blur]
    }
     
NSUXCam.startWithConfiguration(config);
\n

Hiding sensitive view

\n
const sensitiveView = page.getViewById(\"<id-of-sensitive-view>\");
NSUXCam.occludeSensitiveView(sensitiveView);

// Angular - replace <elementRefToOcclude> with your element reference after page is loaded
const sensitiveView = this.
<elementRefToOcclude>.nativeElement;
    NSUXCam.occludeSensitiveView(sensitiveView);
\n

Event logging

\n
// log event
NSUXCam.logEvent(\"<Event name>\");

// log event with properties
NSUXCam.logEventWithProperties(\"<Event name>\", {
    \"prop-key\": \"<prop-value>\"
});
\n

Manual Screen Name Tagging

\n
import { HostListener } from \"@angular/core\";

@HostListener('loaded')
  pageOnInit() {
    NSUXCam.tagScreenName(\"<screen-name>\");
  }
\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":1188}},"nativescript-esc-pos":{"name":"nativescript-esc-pos","version":"1.2.9","license":"Apache-2.0","readme":"

nativescript-esc-pos

\n

This plugin provides nativescript applications the ability to interact with thermal printers using ESC / POS protocol.

\n

Currently it only connects to printers made by HRPT. Only supports Android 4+ at the moment.

\n

Based on

\n

https://github.com/ebc81/Esc_pos_android

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-esc-pos
\n

Usage

\n

Please review the source code under 'src/esc-pos.android.ts' for all android functionality.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":7}},"@nativescript/template-blank-svelte":{"name":"@nativescript/template-blank-svelte","version":"8.6.1","license":"Apache-2.0","readme":"

NativeScript Core with Svelte Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-svelte --template @nativescript/template-blank-svelte
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-svelte --template nativescript-app-templates/packages/template-blank-svelte
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":9,"lastWeek":157,"lastMonth":784}},"@nativescript/firebase-core":{"name":"@nativescript/firebase-core","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-core

\n

A plugin to initialize FirebaseApp in your app.

\n

Use this plugin with any of the following plugins:

\n\n

Installation

\n

Install the plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-core
\n

Configure Firebase for Android

\n

To configure Firebase for Android, see Add Firebase to your Android project and follow the steps below.

\n\n

Configure Firebase for iOS

\n

To set up Firebase for iOS, see Add Firebase to your Apple project and follow the steps below:

\n\n

Use @nativescript/firebase-core

\n

🚨 Plugin requires both @nativescript/firebase-core and any other @nativescript/firebase-* plugin to successfully initialize.

\n

Instantiate Firebase and initialize a default app

\n

Import the firebase function and call it to create a NativeScript Firebase instance. Next, call the initializeApp method on the Firebase instance to instantiate the native FirebaseApp.

\n
import { firebase } from '@nativescript/firebase-core'
const defaultApp = await firebase().initializeApp();
\n

Initialize Secondary App

\n
import { firebase, FirebaseOptions } from '@nativescript/firebase-core'
const config = new FirebaseOptions()
const secondaryApp = await firebase().initializeApp(config, 'SECONDARY_APP');
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":204,"lastWeek":1217,"lastMonth":7185}},"nativescript-toolbox":{"name":"nativescript-toolbox","version":"3.0.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-toolbox/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Toolbox

\n

A NativeScript module that is a composition of useful classes, tools and helpers.

\n

The module contains the following sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
crypto-jsLibrary of crypto standards.
JS-YAMLYAML 1.2 parser / writer.
markdownMarkdown parser.
MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
nativescript-apiclientSimply call HTTP based APIs.
nativescript-batchImplement batch operations.
nativescript-bitmap-factoryCreate and manipulate bitmap images.
nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
nativescript-lazyProvides an OOP version of the build-in lazy function.
nativescript-routed-valuesImplement routed value graphs.
nativescript-sqlite (free)Provides sqlite actions.
nativescript-stringformatHelpers for handling strings.
nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-toolbox
\n

inside your app project to install the module.

\n

Usage

\n
import Toolbox = require('nativescript-toolbox');
\n

The module provides the following function that are short hands for the included sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
asBitmapReturns a value as bitmap object.
asEnumerableReturns a value as sequence.
createBitmapCreates a new bitmap.
decryptDecrypts a value / an object with AES.
encryptEncrypts a value / an object with AES.
formatFormats a string.
formatArrayFormats a string.
fromMarkdownConverts Markdown code.
fromXmlAlias for 'parseXml'.
fromYamlAlias for 'parseYaml'.
getApplicationContextReturns the current application context.
getClipboardReturns an object that handles the clipboard of the device.
getNativeViewReturns the native view of the app.
getOrientationGets the current orientation of the device (based on nativescript-orientation).
getPlatformReturns information of the current platform.
getValueTries to return a value / object that is stored in the application settings.
guidAlias for 'uuid'.
hashGeneric hash function.
hasValueChecks if a value / object is stored in the application settings.
hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
invokeForOrientationInvokes a callback for specific orientation mode.
invokeForPlatformInvokes an action for a specific platform.
isEnumerableChecks if a value is a sequence.
keepAwakeKeeps the device awake (based on nativescript-insomnia).
markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
md5Hashes a value with MD5.
newBatchCreates a new batch.
newClientCreates a new API client.
nowGets the current time.
openDatabaseOpens a (SQLite) database (connection).
openUrlOpen an URL on the device.
openWifiSettingsOpens the WiFi settings on the device.
parseXmlParses a XML string to an object.
parseYamlParses YAML data to an object.
removeValueRemoves a value / object that is stored in the application settings.
setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
setValueStores a value / object in the application settings.
sha1Hashes a value with SHA-1.
sha256Hashes a value with SHA-256.
sha3Hashes a value with SHA-3.
sha384Hashes a value with SHA-384.
sha512Hashes a value with SHA-512.
showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
toYamlConverts an object / a value to YAML.
uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
\n

Sub modules

\n

crypto-js

\n

Here are some examples of common algorithms:

\n
Encrypters
\n
var AES = require(\"nativescript-toolbox/crypto-js/aes\");
\n
Hashes
\n
var MD5 = require('nativescript-toolbox/crypto-js/md5');
var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
\n

JS-YAML

\n
var YAML = require('nativescript-toolbox/js-yaml');
\n

markdown

\n
var Markdown = require('nativescript-toolbox/markdown').markdown;

var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                          'Maruku');
var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                           'Maruku');
\n

Moment

\n
import Moment = require('nativescript-toolbox/moment');
\n

nativescript-apiclient

\n
import ApiClient = require('nativescript-toolbox/apiclient');
\n

nativescript-batch

\n
import Batch = require('nativescript-toolbox/batch');
\n

nativescript-bitmap-factory

\n
import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
\n

nativescript-email

\n
import Email = require('nativescript-toolbox/email');
\n

nativescript-enumerable

\n
import Enumerable = require('nativescript-toolbox/enumerable');
\n

nativescript-lazy

\n
import Lazy = require('nativescript-toolbox/lazy');
\n

nativescript-routed-values

\n
import RoutedValues = require('nativescript-toolbox/routed-values');
\n

nativescript-sqlite

\n
var SQLite = require('nativescript-toolbox/sqlite');
\n

nativescript-stringformat

\n
import StringFormat = require('nativescript-toolbox/stringformat');
\n

nativescript-xmlobjects

\n
import XmlObjects = require('nativescript-toolbox/xmlobjects');
\n","downloadStats":{"lastDay":1,"lastWeek":123,"lastMonth":379}},"svelte-native":{"name":"svelte-native","version":"1.0.9","license":"MIT","readme":"

Svelte Native

\n

Create Mobile applications using native widgets via Svelte and NativeScript.

\n

See https://svelte-native.technology for docs and tutorials

\n

\"todo

\n

Features

\n

Svelte-Native includes Svelte specific integrations such as

\n\n

Work In Progress

\n

While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

\n\n

Installation

\n

You can get started developing with this using the latest template

\n
$ npm install -g nativescript
$ tns create myapp --template @nativescript/template-blank-svelte
\n

A fresh Svelte Native app will be found in the myapp folder

\n

Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

\n

Usage

\n

App.svelte

\n
<page>
    <actionBar title=\"Svelte Native\"></actionBar>
    <stackLayout>
        <label text={msg}></label>
        <button text=\"Change\" on:tap=\"{toggle}\"></button>
    </stackLayout>
</page>

<script>
  export let msg = 'Hello World!'
  const toggle = () => {
      msg = \"Hi from svelte\"
  }
</script>
\n

Main.ts

\n
import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: \"Hi from launcher\"});
\n

Examples

\n

Svelte Native HackerNews

\n

Simple HackerNews client in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-hackernews for the repo.

\n

\"HackerNews

\n

Svelte Native Grocery

\n

Grocery app example in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-grocery for the repo.

\n

\"Grocery

\n

Svelte Native Realworld

\n

Realworld implementation app in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-realworld for the repo.

\n

\"Realworld

\n

Credits

\n

The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

\n","downloadStats":{"lastDay":33,"lastWeek":270,"lastMonth":1337}},"@arepa/launch-navigator":{"name":"@arepa/launch-navigator","version":"1.0.1","license":"Apache-2.0","readme":"

launch-navigator

\n\n \"npm\"\n\n

@arepa/launch-navigator

\n
npm install @arepa/launch-navigator
\n

Usage

\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
checkInstalledApp(packageName: string or SupportedApps)Checks if the app is installed on Android (com.id.pack) or iOS (urlscheme://). You can also use SupportedApps, which returns a boolean.
openGoogleMaps(OpcionesGoogleMaps)Opens the Google Maps app. Returns a Promise.
openWaze(OpcionesWaze)Opens the Waze app. Returns a Promise.
openBaidumap(OpcionesBaidumap)Opens the BaiduMap app. Returns a Promise.
openAppleMaps(OpcionesAppleMaps)Opens the Apple Maps app. Returns a Promise.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SupportedApps
Google MapAndroid e iOS
WazeAndroid e iOS
Apple MapsiOS
\n

Response

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
errorBoolean. Indicates whether an error occurred or not.
errorTextString error message.
\n

TransporteGoogleMaps

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
DRIVING
WALKING
BICYCLING
TRANSIT
\n

Options

\n

OpcionesGoogleMaps

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
daddrstring or ArrayDestination address
saddr?string or ArrayStarting address
modoTransporteTransporteGoogleMapsTransportation type
tipoMapaTURN_BY_TURN or MAPSIf it's TURN_BY_TURN on Android, it will start navigation automatically
avoid?stringSets characteristics the route should try to avoid. Values "t", "h", or "f"
\n

OpcionesWaze

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
destinostring or ArrayDestination address
navigatestringValues yes or `no, starts or doesn't start navigation in the Waze app
\n

OpcionesAppleMaps

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescrDescriptionipción
tipostringValues s, k, h, or r. Map type transit, standard, etc.
daddrstring or ArrayDestination address
saddrstring or ArrayStarting address
dirflgstringValues d, w, or r. Transportation mode
\n

Ejemplos

\n

Verificar si la app esta instalada

\n
checkAppInstalada(AppsSoportadas.WAZE o AppsSoportadas.APPLE_MAPS o AppsSoportadas.BAIDUMAP o AppsSoportadas.GOOGLE_MAPS): boolean
\n

Google Maps

\n
openGoogleMaps({
  daddr:\"Maracay aragua venezuela\",
  modoTransporte:TransporteGoogleMaps.DRIVING,
  tipoMapa:\"TURN_BY_TURN\",
  saddr:\"Villa de cura aragua venezuela\",
  avoid:\"fth\"
 }).then((res)=>{
  //Ok
 }).catch((err)=>{
  //Error
 })
\n

Waze

\n
openWaze({
  destino:\"tia el recreo quito pichincha ecuador\",
  navigate:\"yes\"
}).then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
})
\n

Apple Maps solo para iOS

\n
openAppleMaps({
  daddr:\"Tia el recreo quito ecuador\",
  dirflg:\"d\",
  tipo:\"s\",
  saddr:\"Maracay aragua veneuzela\",
}).then((res)=>{
  console.log(res);
}).catch((err)=>{
  console.log(err);
})
\n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":88}},"@nativescript/firebase-analytics":{"name":"@nativescript/firebase-analytics","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-analytics

\n\n

Intro

\n

This plugin allows you to add Google Analytics for Firebase\nto your app.

\n
\n

Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase in your app.

\n
\n

Analytics collects usage and behavior data for your app. Its two primary concerns are:

\n\n

\"image\"

\n

Installation

\n

Install the plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-analytics
\n

Use @nativescript/firebase-analytics

\n

The examples below show you how to use @nativescript/firebase-analytics to log custom and predefined events.

\n

Log custom events

\n

Analytics also allows developers to log custom events. If you're already familiar with Google Analytics, this method is equivalent to using the event command in gtag.js.

\n

To log a custom event to Analytics, call the logEvent method on an instance of the Analytics class passing it the name of the custom event as the first argument and the event data object as the second argument.

\n

Please be aware that primitive data types or arrays of primitive data types are logged in your Firebase Analytics console.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-analytics';

firebase()
\t.analytics()
\t.logEvent('basket', {
\t\tid: 3745092,
\t\titem: 'mens grey t-shirt',
\t\tdescription: ['round neck', 'long sleeved'],
\t\tsize: 'L',
\t});
\n

After calling logEvent, look for your event name in the Analytics Realtime data to see if it's logged.

\n

Log Predefined Events

\n

To help you get started, Google Analytics automatically logs events that are common among different types of apps, including retail and e-commerce, travel, and gaming apps.

\n

To log a predefined event, call the logEvent method on the Analytics class instance passing it the event name and the event data object.

\n

The following example demonstrates logging the select_content event.

\n
import { firebase } from '@nativescript/firebase-core';

// Logs in the firebase analytics console as \"select_content\" event
// only accepts the two object properties which accept strings.
firebase().analytics().logEvent('select_content', {
\tcontent_type: 'clothing',
\titem_id: 'abcd',
});
\n

After calling logEvent, look for your event name in the Analytics Realtime data to see if it's logged.

\n

Reserved Events

\n

In Analytics, the names of the automatically logged events are referred to as Reserved Events. Creating custom events with those names results in an error. Below are some of the Reserved Events names:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Reserved Events Names
app_clear_data
error
first_open_time
notification_dismiss
notification_receive
screen_view
ad_click
adunit_exposure
\n

For more Reserved event names, visit Event naming rules.

\n

Get the app instance id

\n

To get the app instance id of the application, call the getAppInstanceId method. This returns null on Android if ConsentType.Analytics_Storage = ConsentStatus.Denied.

\n
import { firebase } from '@nativescript/firebase-core';

const appInstanceId = firebase().analytics().getAppInstanceId();
\n

Disable Identifier for Advertisers usage with analytics on iOS

\n

Apple strictly bans an app from being in the Kids category if the app accesses Identifier for Advertisers(IDFA) iOS symbols.

\n

Additionally, if an app accesses IDFA iOS symbols, it must implement Apple's App Tracking Transparency(or ATT). However, if an app does not use IDFA and otherwise handles data in an ATT-compatible way, it eliminates this ATT requirement.

\n

If you need to avoid IDFA usage while still using analytics, define the following variable in your Podfile:

\n
$NSFirebaseAnalyticsWithoutAdIdSupport = true
\n

During pod install, using that variable installs a new Analytics With No Ad Ids pod that the firebase-ios-sdk team created, and allows both the use of Firebase Analytics in Kids Category apps and Firebase Analytics without needing the App Tracking Transparency handling (assuming no other parts of your app handles data in a way that requires ATT)

\n
\n

Note that configuring Firebase Analytics for use without IDFA is incompatible with AdMob.

\n
\n

Demo app

\n

You can find the demo app here.

\n

Analytics class

\n

The plugin offers you the Analytics class through which you can manage Firebase Analytics.\nThe Analytics class has the following properties and methods.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
appInstanceIdstring
\n

logEvent()

\n
firebase().analytics()
\t\t.logEvent(name, parameters)
\n

Sends the specified event data to Google Analytics.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
namestringThe name of the event to log.
parametersEventParameterAn object specifying the event data. For the list of supported properties for parameters for a Reserved event, visit FirebaseAnalytics.Param Constants Summary.
\n
\n

setUserId()

\n
firebase().analytics().setUserId(userId)
\n

Allows you to store a user ID for the individual using your app. Read more about setting user ID here.

\n
\n

resetAnalyticsData()

\n
firebase().analytics().resetAnalyticsData()
\n

See the description here.

\n
\n

setAnalyticsCollectionEnabled()

\n
firebase().analytics().setAnalyticsCollectionEnabled(analyticsCollectionEnabled: boolean)
\n

A method used to manually disable or enable the collection of analytics data.

\n\n
\n

setUserProperty()

\n
firebase().analytics().setUserProperty(name: string, value: string)
\n

Sets a user property. For more details, see Set user properties.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
namestringThe name of the user property to set.
valuestringThe value of the user property.
\n
\n

setSessionTimeoutInterval()

\n
firebase().analytics().setSessionTimeoutInterval(sessionTimeoutInterval: number)
\n

For the description, see setSessionTimeoutDuration.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
sessionTimeoutIntervalnumberThe duration of inactivity, in milliseconds. Defaults to 1800000 (30 minutes).
\n
\n

setDefaultEventParameters()

\n
firebase().analytics().setDefaultEventParameters(parameters)
\n

Read the description here.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
parametersEventParameterParameters object. For the list of supported properties for parameters for a Reserved event, visit FirebaseAnalytics.Param Constants Summary.
\n

EventParameter

\n
interface EventParameter {
\t[key: string]: any;
}
\n
\n

setConsent()

\n
firebase().analytics().setConsent(consentSettings)
\n

See the description here.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
consentSettingsMap<ConsentType,ConsentStatus>
\n

ConsentType

\n
enum ConsentType {
\tAd_Storage,
\tAnalytics_Storage,
}
\n

ConsentStatus

\n
enum ConsentStatus {
\tDenied,
\tGranted,
}
\n
\n

handleOpenURL()

\n
firebase().analytics().handleOpenURL(url)
\n

(iOS-specific)Handles the event when the app is launched by a URL.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
urlstringThe URL from which to open the app.
\n
\n

handleUserActivity()

\n
firebase().analytics().handleUserActivity(userActivity)
\n

(iOS-specific)Handles the event when the app receives data associated with user activity that includes a Universal Link (on iOS 9.0 and above).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
userActivityanyThe URL from which to open the app.
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":141,"lastWeek":714,"lastMonth":5047}},"@arepa/store-update":{"name":"@arepa/store-update","version":"1.0.0","license":"Apache-2.0","readme":"

store-update

\n

NativeScript Plugin check and update app.

\n\n \"npm\"\n\n

@arepa/store-update

\n
npm install @arepa/store-update
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescriptionAndroidiOS
getVersionCode()Return versionCode of the app.✓✓
getVersionName()Return versionName of the app.✓✓
getVersionNube()Return versionCode of the app in playstore and appstore.✓✓
checkUpdate(force?:boolean)Check if there is a new version on the App Store and Play Store.✓✓
checkUpdateNative()Update the Android app without exiting the app.✓❌
\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":90}},"nativescript-background-http":{"name":"nativescript-background-http","version":"4.2.1","license":"Apache-2.0","readme":"

Background Upload NativeScript plugin \"Build

\n

A cross platform plugin for the NativeScript framework, that provides background upload for iOS and Android.

\n

There is a stock NativeScript http module that can handle GET/POST requests that work with strings and JSONs. It however comes short in features when it comes to really large files.

\n

The plugin uses NSURLSession with background session configuration for iOS; and a fork of the gotev/android-upload-service library for Android.

\n

Installation

\n
tns plugin add nativescript-background-http
\n

Usage

\n

The below attached code snippets demonstrate how to use nativescript-background-http to upload single or multiple files.

\n

Uploading files

\n

Sample code for configuring the upload session. Each session must have a unique id, but it can have multiple tasks running simultaneously. The id is passed as a parameter when creating the session (the image-upload string in the code bellow):

\n

// file path and url
var file =  \"/some/local/file/path/and/file/name.jpg\";
var url = \"https://some.remote.service.com/path\";
var name = file.substr(file.lastIndexOf(\"/\") + 1);

// upload configuration
var bghttp = require(\"nativescript-background-http\");
var session = bghttp.session(\"image-upload\");
var request = {
        url: url,
        method: \"POST\",
        headers: {
            \"Content-Type\": \"application/octet-stream\"
        },
        description: \"Uploading \" + name
    };
\n

For a single file upload, use the following code:

\n
var task = session.uploadFile(file, request);
\n

For multiple files or to pass additional data, use the multipart upload method. All parameter values must be strings:

\n
var params = [
   { name: \"test\", value: \"value\" },
   { name: \"fileToUpload\", filename: file, mimeType: \"image/jpeg\" }
];
var task = session.multipartUpload(params, request);
\n

In order to have a successful upload, the following must be taken into account:

\n\n

Upload request and task API

\n

The request object parameter has the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
urlstringThe request url (e.g.https://some.remote.service.com/path).
methodstringThe request method (e.g. POST).
headersobjectUsed to specify additional headers.
descriptionstringUsed to help identify the upload task locally - not sent to the remote server.
utf8boolean(Android only/multipart only) If true, sets the charset for the multipart request to UTF-8. Default is false.
androidDisplayNotificationProgressboolean(Android only) Used to set if progress notifications should be displayed or not. Please note that since API26, Android requires developers to use notifications when running background tasks. https://developer.android.com/about/versions/oreo/background
androidNotificationTitlestring(Android only) Used to set the title shown in the Android notifications center.
androidAutoDeleteAfterUploadboolean(Android only) Used to set if files should be deleted automatically after upload.
androidMaxRetriesnumber(Android only) Used to set the maximum retry count. The default retry count is 0. https://github.com/gotev/android-upload-service/wiki/Recipes#backoff
androidAutoClearNotificationboolean(Android only) Used to set if notifications should be cleared automatically upon upload completion. Default is false. Please note that setting this to true will also disable the ringtones.
androidRingToneEnabledboolean(Android only) Used to set if a ringtone should be played upon upload completion. Default is true. Please note that this flag has no effect when androidAutoClearNotification is set to true.
androidNotificationChannelIDstring(Android only) Used to set the channel ID for the notifications.
\n

The task object has the following properties and methods, that can be used to get information about the upload:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
uploadnumberBytes uploaded.
totalUploadnumberTotal number of bytes to upload.
statusstringOne of the following: error, uploading, complete, pending, cancelled.
descriptionstringThe description set in the request used to create the upload task.
cancel()voidCall this method to cancel an upload in progress.
\n

Handling upload events

\n

After the upload task is created you can monitor its progress using the following events:

\n
task.on(\"progress\", progressHandler);
task.on(\"error\", errorHandler);
task.on(\"responded\", respondedHandler);
task.on(\"complete\", completeHandler);
task.on(\"cancelled\", cancelledHandler); // Android only
\n

Each event handler will receive a single parameter with event arguments:

\n
// event arguments:
// task: Task
// currentBytes: number
// totalBytes: number
function progressHandler(e) {
    alert(\"uploaded \" + e.currentBytes + \" / \" + e.totalBytes);
}

// event arguments:
// task: Task
// responseCode: number
// error: java.lang.Exception (Android) / NSError (iOS)
// response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
function errorHandler(e) {
    alert(\"received \" + e.responseCode + \" code.\");
    var serverResponse = e.response;
}


// event arguments:
// task: Task
// responseCode: number
// data: string
function respondedHandler(e) {
    alert(\"received \" + e.responseCode + \" code. Server sent: \" + e.data);
}

// event arguments:
// task: Task
// responseCode: number
// response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
function completeHandler(e) {
    alert(\"received \" + e.responseCode + \" code\");
    var serverResponse = e.response;
}

// event arguments:
// task: Task
function cancelledHandler(e) {
    alert(\"upload cancelled\");
}
\n

Testing the plugin

\n

In order to test the plugin, you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. http://httpbin.org/post However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it:

\n
cd demo-server
npm i
node server 8080
\n

The above commands will start a server listening on port 8080. Remember to update the URL in your app to match the address/port where the server is running.

\n
\n

Note: If you are using the iOS simulator then http://localhost:8080 should be used to upload to the demo server. If you are using an Android emulator, http://10.0.2.2:8080 should be used instead.

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

License

\n

Apache License Version 2.0, January 2004\n\"\"

\n","downloadStats":{"lastDay":4,"lastWeek":50,"lastMonth":329}},"@nativescript/mlkit-core":{"name":"@nativescript/mlkit-core","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-core

\n
npm install @nativescript/mlkit-core
\n

Usage

\n

Core

\n
\n

Important: Ensure you've included xmlns:ui="@nativescript/mlkit-core" on the Page element

\n
\n
<ui:MLKitView
  cameraPosition=\"back\"
   detectionType=\"all\" 
   detection=\"onDetection\"
/>
\n

Angular

\n
import { MLKitModule } from '@nativescript/mlkit-core/angular';

@NgModule({
    imports: [
    MLKitModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
<MLKitView
cameraPosition=\"back\"
detectionType=\"all\" 
(detection)=\"onDetection($event)\"
></MLKitView>
\n

Vue

\n
import Vue from 'nativescript-vue'
import MLKit from '@nativescript/mlkit-core/vue'

Vue.use(MLKit)
\n
<MLKitView
cameraPosition=\"back\"
detectionType=\"all\" 
@detection=\"onDetection\"
/>
\n

Optional modules

\n
\n

Important: Detection works only for optional modules installed

\n
\n

Barcode Scanning

\n
npm install @nativescript/mlkit-barcode-scanning
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { BarcodeResult } from '@nativescript/mlkit-barcode-scanning';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Barcode){
        const barcode: BarcodeResult[] = event.data;
    }
}
\n

Face Detection

\n
npm install @nativescript/mlkit-face-detection
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { FaceResult } from '@nativescript/mlkit-face-detection';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Face){
        const faces: FaceResult[] = event.data;
    }
}
\n

Image Labeling

\n
npm install @nativescript/mlkit-image-labeling
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { ImageLabelingResult } from '@nativescript/mlkit-image-labeling';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Image){
        const labels: ImageLabelingResult[] = event.data;
    }
}
\n

Object Detection

\n
npm install @nativescript/mlkit-object-detection
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { ObjectResult } from '@nativescript/mlkit-object-detection'
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Object){
        const objects: ObjectResult[] = event.data;
    }
}
\n

Pose Detection

\n
npm install @nativescript/mlkit-pose-detection
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { PoseResult } from '@nativescript/mlkit-pose-detection';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Pose){
        const poses: PoseResult = event.data;
    }
}
\n

Text Recognition

\n
npm install @nativescript/mlkit-text-recognition
\n
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { TextResult } from '@nativescript/mlkit-text-recognition';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Text){
        const text: TextResult = event.data;
    }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":199,"lastWeek":1038,"lastMonth":4397}},"nativescript-imagepicker":{"name":"nativescript-imagepicker","version":"7.1.0","license":"Apache-2.0","readme":"

NativeScript Image Picker \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

Imagepicker plugin supporting both single and multiple selection.\n
Plugin supports iOS8+ and uses QBImagePicker cocoa pod.\n
For Android it uses Intents to open the stock images or file pickers. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required. See demo for implementation details.

\n\n\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-imagepicker
tns run
\n

Configuration

\n

No additional configuration required!

\n

Migrating from 5.x.x to 6.x.x

\n

With version 6.x.x the dependency to the nativescript-ui-listview plugin is removed and for iOS the QBImagePicker cocoa pod is used. Now the plugin supports some new features, fixes some bugs and has a more native look in iOS. You should remove any dependencies to nativescript-pro-ui, nativescript-ui-listview, etc. in case you've added them in your app specifically for this plugin. Also the options fileUri, doneText, cancelText, albumsText, newestFirst and the methods cancel() and done() are no longer applicable. The image picker now returns the basic {N} ImageAsset class (and not custom asset as before). If you have been using the fileUri property of the returned assets to get a file path in versions prior to 6.x.x, you should refer to the following issue comment for an alternative way to get the path - https://github.com/NativeScript/nativescript-imagepicker/issues/181#issuecomment-384585293.

\n

Migrating from 4.x.x to 5.x.x

\n

With version 5.x.x major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the nativescript-ui-listview plugin (part of the NativeScript Pro UI components). Recently the monolithic NativeScript Pro UI plugin was split in multiple plugins, each of them representing a single component. Now, instead of the monolithic package, nativescript-imagepicker uses only the component it needs. To use version 5.x.x of the plugin, you need to update any dependencies to nativescript-pro-ui in your project with the single component alternatives as described in the migration guide.

\n

Migrating from 3.x.x to 4.x.x

\n

With the 4.x.x major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the nativescript-pro-ui plugin (previously known as nativescript-telerik-ui) which has bee updated and made 100% free. This means that if your project is using the deprecated nativescript-telerik-ui/pro plugins adding the latest version of the nativescript-imagepicker plugin will cause your project to throw an build error when working with iOS. This is because the nativescript-imagepicker has a dependency to the new nativescript-pro-ui plugin and when your project also depends on the old nativescript-telerik-ui plugin there is a native frameworks collision.

\n

In order to solve this you simply have to update to the latest nativescript-pro-ui, more details on how to migrate from nativescript-telerik-ui/pro to nativescript-pro-ui can be found here.

\n

Usage

\n

The best way to explore the usage of the plugin is to inspect both demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.\nIn demo-angular is the usage in an Angular app. Refer to demo-angular/app/app.component.ts.

\n

In addition to the plugin usage, both apps are webpack configured.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript

\n
import * as imagepicker from \"nativescript-imagepicker\";
\n

Javascript

\n
var imagepicker = require(\"nativescript-imagepicker\");
\n

Create imagepicker

\n

Create imagepicker in single or multiple mode to specifiy if the imagepicker will be used for single or multiple selection of images

\n

TypeScript

\n
let context = imagepicker.create({
    mode: \"single\" // use \"multiple\" for multiple selection
});
\n

Javascript

\n
var context = imagepicker.create({ mode: \"single\" }); // use \"multiple\" for multiple selection
\n

Request permissions, show the images list and process the selection

\n
context
    .authorize()
    .then(function() {
        return context.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            // process the selected image
        });
        list.items = selection;
    }).catch(function (e) {
        // process error
    });
\n
\n

NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

\n
\n
\n

NOTE: Using the plugin on iOS requres photo library permission. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

\n
\n
<key>NSPhotoLibraryUsageDescription</key>
<string>Description text goes here</string>
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionPlatformDefaultDescription
modebothmultipleThe mode if the imagepicker. Possible values are single for single selection and multiple for multiple selection.
minimumNumberOfSelectioniOS0The minumum number of selected assets.
maximumNumberOfSelectioniOS0The maximum number of selected assets.
showsNumberOfSelectedAssetsiOSTrueDisplay the number of selected assets.
promptiOSundefinedDisplay prompt text when selecting assets.
numberOfColumnsInPortraitiOS4Set the number of columns in Portrait orientation.
numberOfColumnsInLandscapeiOS7Set the number of columns in Landscape orientation.
mediaTypebothAnyChoose whether to pick Image/Video/Any type of assets.
showAdvancedAndroidfalseShow internal and removable storage options on Android (WARNING: not supported officially).
\n

The hostView parameter can be set to the view that hosts the image picker. Applicable in iOS only, intended to be used when open picker from a modal page.

\n\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":15,"lastWeek":128,"lastMonth":537}},"nativescript-carousel":{"name":"nativescript-carousel","version":"7.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Carousel

\n

A simple carousel component for NativeScript.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSupportedVersionNativeView
iOSYesiOS 8.1+DKCarouselView
AndroidYesAPI 15+ViewPager with PageIndicatorView
\n

Installation

\n

NativeScript 7+:

\n
ns plugin add nativescript-carousel
\n

NativeScript less than NS7:

\n
tns plugin add nativescript-carousel@6.1.1
\n

Limitations

\n\n

Usage

\n

Check out the demos included in this repo for instructions on how to use the Carousel with your choice of framework:

\n

Vanilla TS demo

\n

Angular demo

\n

Vue demo

\n

Attributes - Common

\n\n

Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

\n\n

Defines the view template for each slide-view to be generated.

\n\n

Sets/Gets the active page by index

\n\n

Shows or hides the page-indicator

\n\n

Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

\n\n

Sets the color of unselected indicators

\n\n

By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

\n

Attributes - iOS specific

\n\n

If true last slide will wrap back to first and visa versa

\n\n

If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

\n\n

Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

\n\n

Enables/Disables user scroll on the Carousel.

\n\n

Returns the DKCarouselView object.

\n

Attributes - Android specific

\n\n

Returns the ViewPager object.

\n\n

Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

\n\n

Sets the pager-indicator animation duration in milliseconds. Default is 500.

\n\n

Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

\n\n

Sets the pager-indicator dot radius.

\n\n

Sets the pager-indicator dot padding.

\n\n

Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Indicator animations (Android only!)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NONECOLORSCALESLIDE
\"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WORMTHIN_WORMFILLDROPSWAP
\"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
\n

Changelog

\n

7.0.1

\n\n

7.0.0

\n\n

6.1.0

\n\n

6.0.0

\n\n

4.2.5

\n\n

4.2.1

\n\n

4.2.0

\n\n

4.1.0

\n\n

4.0.2

\n\n

4.0.0

\n\n

3.1.1

\n\n

3.1.0

\n\n

3.0.2

\n\n

3.0.1

\n\n

3.0.0

\n\n

2.4.2

\n\n

2.4.1

\n\n

2.4.0

\n\n

2.3.1

\n\n

2.3.0

\n\n

2.2.0

\n\n

2.1.2

\n\n

2.1.1

\n\n

2.1.0

\n\n

1.1.0

\n\n

1.0.0

\n\n

Author

\n\n

Collaborators

\n\n

Contributing

\n

I will accept pull requests that improve this and assign credit.

\n\n","downloadStats":{"lastDay":19,"lastWeek":78,"lastMonth":394}},"nativescript-slides":{"name":"nativescript-slides","version":"2.3.0","license":{"type":"MIT","url":"https://github.com/JoshDSommer/nativescript-slides/blob/master/LICENSE"},"readme":"

NativeScript Slides for iOS and Android

\n

\"npm\"\n\"npm\"

\n

The plugin formally known as nativescript-intro-slides

\n

Intro slides example:

\n

\"Nativescript

\n

Image carousel example:

\n

\"Nativescript

\n

videos by Brad Martin

\n

Example Usage:

\n

XML

\n

\t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\">
\t\t\t<Slides:Slide class=\"slide-1\">
\t\t\t\t<Label text=\"This is Panel 1\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-2\">
\t\t\t\t<Label text=\"This is Panel 2\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-3\">
\t\t\t\t<Label text=\"This is Panel 3\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-4\">
\t\t\t\t<Label text=\"This is Panel 4\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-5\">
\t\t\t\t<Label text=\"This is Panel 5\"  />
\t\t\t</Slides:Slide>
\t</Slides:SlideContainer>
\n

CSS

\n
.slide-1 {
  background-color: darkslateblue;
}

.slide-2 {
  background-color: darkcyan;
}
.slide-3 {
  background-color: darkgreen;
}

.slide-4 {
  background-color: darkgoldenrod;
}
.slide-5 {
  background-color: darkslategray;
}
label {
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}
\n

Great for Intros/Tutorials to Image Carousels.

\n

To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

\n

when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

\n

add as many <Slides:Slide> as you want.

\n

Methods for SlideContainer

\n\n

Attributes for SlideContainer

\n\n

Indicators

\n

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

\n
.slide-indicator-inactive {
  background-color: #fff;
  opacity: 0.4;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

.slide-indicator-active {
  background-color: #fff;
  opacity: 0.9;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}
\n

Events

\n\n

Angular 2 compatibility

\n

I've started working on a Angular 2 version they can be checked out here:\nAngular 2 version of slides

\n

If you want to use this plugin with Angular 2 the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

\n

Plugin Development Work Flow:

\n\n

Known issues

\n\n

How To: Load slides dynamically

\n

You want to hook into the loaded event of the view and then create your view elements.

\n

Demo Code

\n
<Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
\n
import * as slides from 'nativescript-slides/nativescript-slides';

export function onSlideContainerLoaded(args) {
  let slideContainer = <slides.SlideContainer>args.object;

  //Construct the slides
  slideContainer.addChild(getSlide('Page 1', 'slide-1'));
  slideContainer.addChild(getSlide('Page 2', 'slide-2'));
  slideContainer.addChild(getSlide('Page 3', 'slide-3'));
  slideContainer.addChild(getSlide('Page 4', 'slide-4'));
  slideContainer.addChild(getSlide('Page 5', 'slide-5'));
}

function getSlide(labelText: string, className: string) {
  let slide = new slides.Slide();
  slide.className = className;
  let label = new labelModule.Label();
  label.text = labelText;
  slide.addChild(label);

  return slide;
}
\n

Thanks to these awesome contributors!

\n

Brad Martin

\n

Obsessive Inc/Abhijith Reddy

\n

Victor Nascimento

\n

Steve McNiven-Scott

\n

Leo Caseiro

\n

Todd Anglin

\n

Andrew Lo

\n

Raúl Uranga

\n

And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

\n

Contributing guidelines

\n

Contributing guidelines

\n

License

\n

MIT

\n

for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":52,"lastMonth":171}},"@nativescript/firebase-crashlytics":{"name":"@nativescript/firebase-crashlytics","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-crashlytics

\n\n

A plugin that allows you to add Firebase Crashlytics to your NativeScript app.

\n
\n

Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase.

\n
\n

Crashlytics helps you to collect analytics and details about crashes and errors that occur in your app. It does this through three aspects:

\n\n

\"image\"

\n

Installation

\n

Install the plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-crashlytics
\n

Use @nativescript/firebase-crashlytics

\n

Log a crash context

\n

Use the log method throughout your app to accumulate extra context for possible crashes that can happen.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

const crashlytics = firebase().crashlytics();
crashlytics.log('User signed in.');
\n

Set crash attributes for more context data

\n

For additional context, Crashlytics also offers various methods to set attributes for the crash report.

\n\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

const crashlytics = firebase().crashlytics();

crashlytics().setAttribute('credits', String(user.credits));
\n\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

const crashlytics = firebase().crashlytics();

crashlytics().setAttributes({
  role: 'admin',
  followers: '13',
  email: user.email,
  username: user.username,
});
\n

You can use set methods to set predefined attributes, but you can also set your own custom attributes.

\n\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

const crashlytics = firebase().crashlytics();

crashlytics.setUserId(user.uid);
\n

Test crashlytics

\n

To test Crashlytics for your app, call the crash method to force a crash and in Firebase Console, see if the crash is logged.

\n
firebase().crashlytics().crash();
\n

Report errors manually

\n

Crashlytics also supports sending JavaScript stack traces to the Firebase console. This can be used in any situation where an error occurs but is caught by your code to recover gracefully.

\n

To send a stack trace, pass a JavaScript Error to the recordError method.

\n

Even if you catch unexpected errors, for your app to recover and behave smoothly you can still report them through Crashlytics using the recordError method. This will also provide you with the associated stack trace.

\n
import { firebase } from '@nativescript/firebase-core';

firebase().crashlytics().log('Updating user count.');

try {
  if (users) {
    someMethodToCatch();
  }
} catch (error) {
  crashlytics().recordError(error);
  console.log(error);
}
\n

Manually enable or disable crashlytics collection

\n

As Crashlytics will be sending certain information regarding the user, users may want to opt out of the crash reporting. To disable crashlytics collection, call the setCrashlyticsCollectionEnabled method on firebase().crashlytics() passing it false This can be done throughout the app with a simple method call to setCrashlyticsCollectionEnabled:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().crashlytics().setCrashlyticsCollectionEnabled(false);
\n

API

\n

Crashlytics

\n

The Crashlytics class has the following members.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
iosreadonly
androidreadonly
appFirebaseAppreadonly
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
checkForUnsentReports()Promise<boolean>
crash()void
deleteUnsentReports()void
didCrashOnPreviousExecution()boolean
log(message: string)void
recordError(error: any)void
sendUnsentReports()void
setAttribute(name: string, value: string | number | boolean)void
setAttributes(attributes: { [key: string]: string | number | boolean })void
setCrashlyticsCollectionEnabled(enabled: boolean)void
setUserId(userId: string)void
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":55,"lastWeek":372,"lastMonth":3102}},"@benedictstrube/ui-mapbox":{"name":"@benedictstrube/ui-mapbox","version":"1.2.7","license":"MIT","readme":"\n\n

@benedictstrube/ui-mapbox

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Prerequisites

\n

You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @benedictstrube/ui-mapbox

\n

\n

Configuration

\n

Add any other additional configuration instructions here.

\n

\n

Issues

\n

If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\nns platform remove ios and ns platform add ios.

\n

On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

\n
  <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
\n

If you get an error related to TelemetryService then please check it's there.

\n

\n

Usage

\n

XML

\n

You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

\n

A simple layout could look like this:

\n\n

Could be rendered by a definition like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"@nativescript-community/ui-mapbox\" navigatingTo=\"navigatingTo\">
  <StackLayout>
    <Label text=\"Nice map, huh!\" class=\"title\"/>
    <ContentView height=\"240\" width=\"240\">
      <map:MapboxView
          accessToken=\"your_token\"
          mapStyle=\"traffic_night\"
          latitude=\"52.3702160\"
          longitude=\"4.8951680\"
          zoomLevel=\"3\"
          showUserLocation=\"true\"
          mapReady=\"onMapReady\">
      </map:MapboxView>
    </ContentView>
  </StackLayout>
</Page>
\n

Angular

\n

Component:

\n
import { registerElement } from '@nativescript/angular';
registerElement(\"Mapbox\", () => require(\"@nativescript-community/ui-mapbox\").MapboxView);
\n

View:

\n
  <ContentView height=\"100%\" width=\"100%\">
    <Mapbox
        accessToken=\"your_token\"
        mapStyle=\"traffic_day\"
        latitude=\"50.467735\"
        longitude=\"13.427718\"
        hideCompass=\"true\"
        zoomLevel=\"18\"
        showUserLocation=\"false\"
        disableZoom=\"false\"
        disableRotation=\"false\"
        disableScroll=\"false\"
        disableTilt=\"false\"
        (mapReady)=\"onMapReady($event)\">
    </Mapbox>
  </ContentView>
\n

\n

API

\n

All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondefaultdescription
accesstoken-see 'Prerequisites' above
delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
latitude -Set the center of the map by passing this in
longitude-.. and this as well
zoomLevel00-20
showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
hideCompass falseDon't show the compass in the top right corner during rotation of the map
hideLogofalseMapbox requires false if you're on a free plan
hideAttribution trueMapbox requires false if you're on a free plan
disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
moveBeginEvent-The name of a function to be called when the map has begun to move.
moveEndEvent-The name of a function to be called when the map has completed moving.
locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
\n

\n

Markers

\n

This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

\n

Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

\n
var mapbox = require(\"@nativescript-community/ui-mapbox\");

function onMapReady(args) {
  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
  var nativeMapView = args.ios ? args.ios : args.android;
  console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

  // .. or use the convenience methods exposed on args.map, for instance:
  args.map.addMarkers([
    {
      lat: 52.3602160,
      lng: 4.8891680,
      title: 'One-line title here',
      subtitle: 'Really really nice location',
      selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
      onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
    }]
  );
}

exports.onMapReady = onMapReady;
\n

\n

Viewport

\n
var mapbox = require(\"@nativescript-community/ui-mapbox\");

function onMapReady(args) {
  args.map.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true
      }
  );
}

exports.onMapReady = onMapReady;
\n

The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

\n

Check out the usage details on the functions below.

\n

\n

Declaring Programmatically

\n

Add a container to your view XML where you want to programmatically add the map. Give it an id.

\n
<ContentView id=\"mapContainer\" />
\n

\n

Methods

\n

show

\n

    const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

    const settings = {

      // NOTE: passing in the container here.

      container: contentView,
      accessToken: ACCESS_TOKEN,
      style: MapStyle.LIGHT,
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 9, // 0 (most of the world) to 20, default 0
      showUserLocation: true, // default false
      hideAttribution: true, // default false
      hideLogo: true, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          iconPath: 'res/markers/green_pin_marker.png',
          onTap: () => console.log(\"'Nice location' marker tapped\"),
          onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
        }
      ]
    };

    console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

    const mapView = new MapboxView();

    // Bind some event handlers onto our newly created map view. 

    mapView.on( 'mapReady', ( args : any ) => {

      console.log( \"main-view-model: onMapReady fired.\" );

      // this is an instance of class MapboxView

      this.mapboxView = args.map;

      // get a reference to the Mapbox API shim object so we can directly call its methods.

      this.mapbox = this.mapboxView.getMapboxApi();

      this.mapbox.setOnMapClickListener( point => {
        console.log(`>> Map clicked: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnMapLongClickListener( point => {
        console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnScrollListener((point: LatLng) => {
        // console.log(`>> Map scrolled`);
      });

      this.mapbox.setOnFlingListener(() => {
        console.log(`>> Map flinged\"`);
      }).catch( err => console.log(err) );

    });

    mapView.setConfig( settings );
    contentView.content = mapView;
\n

hide

\n

All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

\n
  mapbox.hide();
\n

unhide

\n

If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

\n
  mapbox.unhide();
\n

destroy 💥

\n

To clean up the map entirely you can destroy instead of hide it:

\n
  mapbox.destroy();
\n

setMapStyle

\n

You can update the map style after you've loaded it.

\n
\n

With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

\n
\n
  mapbox.setMapStyle(mapbox.MapStyle.DARK);
\n

addMarkers

\n
  import { MapboxMarker } from \"@nativescript-community/ui-mapbox\";

  const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: '~/assets/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
    onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
  };

  mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])
\n

Updating markers

\n

Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

\n
  firstMarker.update({
    lat: 52.3622160,
    lng: 4.8911680,
    title: 'One-line title here (UPDATE)',
    subtitle: 'Updated subtitle',
    selected: true, // this will trigger the callout upon update
    onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
    onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
  })
\n

removeMarkers

\n

You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

\n
  // remove all markers
  mapbox.removeMarkers();

  // remove specific markers by id
  mapbox.removeMarkers([1, 2]);
\n

setViewport

\n

If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

\n
  mapbox.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true // default true
      }
  )
\n

getViewport

\n
  mapbox.getViewport().then(
      function(result) {
        console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
      }
  )
\n

setCenter

\n
  mapbox.setCenter(
      {
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        animated: false // default true
      }
  )
\n

getCenter

\n

Here the promise callback makes sense, so adding it to the example:

\n
  mapbox.getCenter().then(
      function(result) {
        console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getCenter error: \" + error);
      }
  )
\n

setZoomLevel

\n
  mapbox.setZoomLevel(
      {
        level: 6.5, // mandatory, 0-20
        animated: true // default true
      }
  )
\n

getZoomLevel

\n
  mapbox.getZoomLevel().then(
      function(result) {
        console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getZoomLevel error: \" + error);
      }
  )
\n

animateCamera

\n
  // this is a boring triangle drawn near Amsterdam Central Station
  mapbox.animateCamera({
    // this is where we animate to
    target: {
        lat: 52.3732160,
        lng: 4.8941680
    },
    zoomLevel: 17, // Android
    altitude: 2000, // iOS (meters from the ground)
    bearing: 270, // Where the camera is pointing, 0-360 (degrees)
    tilt: 50,
    duration: 5000 // default 10000 (milliseconds)
  })
\n

setTilt (Android only)

\n
  mapbox.setTilt(
      {
        tilt: 40, // default 30 (degrees angle)
        duration: 4000 // default 5000 (milliseconds)
      }
  )
\n

getTilt (Android only)

\n
  mapbox.getTilt().then(
      function(tilt) {
        console.log(\"Current map tilt: \" +  tilt);
      }
  )
\n

getUserLocation

\n

If the user's location is shown on the map you can get their coordinates and speed:

\n
  mapbox.getUserLocation().then(
      function(userLocation) {
        console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
        console.log(\"Current user speed: \" +  userLocation.speed);
      }
  )
\n

trackUser

\n

In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

\n
  mapbox.trackUser({
    mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
    animated: true
  });
\n

addSource

\n

https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

\n

Supported source types:

\n\n

Adds a vector to GeoJSON source to the map.

\n
  mapbox.addSource( id, {
    type: 'vector',
    url: 'url to source'
  } );
\n

-or-

\n
  mapbox.addSource( id, {
    'type': 'geojson',
    'data': {
      \"type\": \"Feature\",
        \"geometry\": {
        \"type\": \"LineString\",
          \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
        }
      }
    }
  );
\n

removeSource

\n

Remove a source by id

\n
  mapbox.removeSource( id );
\n

addLayer

\n

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

\n

Supported layer types:

\n\n

To add a line:

\n
  mapbox.addLayer({
    'id': someid,
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        \"type\": \"Feature\",
          \"geometry\": {
          \"type\": \"LineString\",
            \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
          }
        }
      }
    },
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },    
    'paint': {
      'line-color': '#ed6498',
      'line-width': 5,
      'line-opacity': .8,
      'line-dash-array': [ 1, 1, 1, ..]
    }
  });
\n

To add a circle:

\n
  mapbox.addLayer({
    \"id\": someid,
    \"type\": 'circle',
    \"source\": {
      \"type\": 'geojson',
      \"data\": {
        \"type\": \"Feature\",
        \"geometry\": {
          \"type\": \"Point\",
          \"coordinates\": [ lng, lat ]
        }
      }
    }, 
    \"paint\": {
      \"circle-radius\": {
        \"stops\": [
          [0, 0],
          [20, 8000 ]
        ],
        \"base\": 2
      },
      'circle-opacity': 0.05,
      'circle-color': '#ed6498',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ed6498'
    } 
  });
\n

Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

\n

removeLayer

\n

Remove a layer added with addLayer() by id.

\n
  mapbox.removeLayer( id );
\n

queryRenderedFeatures

\n

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures\nReturns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

\n
mapbox
  .queryRenderedFeatures({
    point: {
      lat: 52.3701494345567,
      lng: 4.823684692382513,
  \t},
    layers: ['circle-with-source-object'],
    filter: ['==', ['get', 'querySample'], '2'],
  })
  .then((result) => console.log('query rendered features', result))
\n

querySourceFeatures

\n

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures\nReturns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

\n
mapbox
  .querySourceFeatures('source_id', { filter: ['==', ['get', 'querySample'], '2'] })
  .then((result) => console.log('query source features', result));
\n

addLinePoint

\n

Dynamically add a point to a line.

\n
  mapbox.addLinePoint( <id of line layer>, lnglat )
\n

where lnglat is an array of two points, a longitude and a latitude.

\n

addPolygon (deprecated, use addLayer() instead)

\n

Draw a shape. Just connect the dots like we did as a toddler.

\n

The first person to tweet a snowman drawn with this function gets a T-shirt (from @eddyverbruggen ;-)).

\n
  // after adding this, scroll to Amsterdam to see a semi-transparent red square
  mapbox.addPolygon(
      {
        id: 1, // optional, can be used in 'removePolygons'
        fillColor: new Color(\"red\"),
        fillOpacity: 0.7,

        // stroke-related properties are only effective on iOS
        strokeColor: new Color(\"green\"),
        strokeWidth: 8,
        strokeOpacity: 0.5,

        points: [
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          },
          {
            lat: 52.35421556258807,
            lng: 4.9308013916015625
          },
          {
            lat: 52.353796172573944,
            lng: 4.8799896240234375
          },
          {
            lat: 52.3864966440161,
            lng: 4.8621368408203125
          },
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          }
        ]
      })
      .then(result => console.log(\"Mapbox addPolygon done\"))
      .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
\n

removePolygons

\n

You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

\n
  // remove all polygons
  mapbox.removePolygons();

  // remove specific polygons by id
  mapbox.removePolygons([1, 2]);
\n

addPolyline

\n

Deprecated. Use addLayer() instead.

\n

Draw a polyline. Connect the points given as parameters.

\n
  // Draw a two segment line near Amsterdam Central Station
  mapbox.addPolyline({
      id: 1, // optional, can be used in 'removePolylines'
      color: '#336699', // Set the color of the line (default black)
      width: 7, // Set the width of the line (default 5)
      opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
      points: [
          {
              'lat': 52.3833160, // mandatory
              'lng': 4.8991780 // mandatory
          },
          {
              'lat': 52.3834160,
              'lng': 4.8991880
          },
          {
              'lat': 52.3835160,
              'lng': 4.8991980
          }
      ]
  });
\n

removePolylines

\n

Deprecated. Use removeLayer() instead.

\n

You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

\n
  // remove all polylines
  mapbox.removePolylines();

  // remove specific polylines by id
  mapbox.removePolylines([1, 2]);
\n

setOnMapClickListener

\n

Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

\n
  mapbox.setOnMapClickListener((point: LatLng) => {
    console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnMapLongClickListener

\n

Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

\n
  mapbox.setOnMapLongClickListener((point: LatLng) => {
    console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnScrollListener

\n

Add a listener to retrieve lat and lng of where the user scrolls to on the map.

\n
  mapbox.setOnScrollListener((point?: LatLng) => {
    console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

\n

Offline maps

\n

For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

\n

Important read: the offline maps documentation by Mapbox.

\n

downloadOfflineRegion

\n

This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

\n
  mapbox.downloadOfflineRegion(
    {
      accessToken: accessToken, // required for Android in case no map has been shown yet
      name: \"Amsterdam\", // this name can be used to delete the region later
      style: mapbox.MapStyle.OUTDOORS,
      minZoom: 9,
      maxZoom: 11,
      bounds: {
        north: 52.4820,
        east: 5.1087,
        south: 52.2581,
        west: 4.6816
      },
      // this function is called many times during a download, so
      // use it to show an awesome progress bar!
      onProgress: function (progress) {
        console.log(\"Download progress: \" + JSON.stringify(progress));
      }
    }
  ).then(
    function() {
      console.log(\"Offline region downloaded\");
    },
    function(error) {
      console.log(\"Download error: \" + error);
    }
  );
\n

Advanced example: download the current viewport

\n

Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

\n
  // I spare you the error handling on this one..
  mapbox.getViewport().then(function(viewport) {
    mapbox.downloadOfflineRegion(
      {
        name: \"LastViewport\", // anything you like really
        style: mapbox.MapStyle.LIGHT,
        minZoom: viewport.zoomLevel,
        maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
        bounds: viewport.bounds,
        onProgress: function (progress) {
          console.log(\"Download %: \" + progress.percentage);
        }
      }
    );
  });
\n

listOfflineRegions

\n

To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

\n
  mapbox.listOfflineRegions({
    // required for Android in case no map has been shown yet
    accessToken: accessToken
  }).then(
    function(regions) {
      console.log(JSON.stringify(JSON.stringify(regions));
    },
    function(error) {
      console.log(\"Error while listing offline regions: \" + error);
    }
  );
\n

deleteOfflineRegion

\n

You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

\n
  mapbox.deleteOfflineRegion({
    name: \"Amsterdam\"
  }).then(
    function() {
      console.log(\"Offline region deleted\");
    },
    function(error) {
      console.log(\"Error while deleting an offline region: \" + error);
    }
  );
\n

\n

Permissions

\n

hasFineLocationPermission / requestFineLocationPermission

\n

On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

\n

You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

\n

Note that hasFineLocationPermission will return true when:

\n\n
  mapbox.hasFineLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestFineLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
  );

  // if no permission was granted previously this will open a user consent screen
  mapbox.requestFineLocationPermission().then(
      function() {
        console.log(\"Location permission requested\");
      }
  );
\n

Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

\n

\n

Using marker images from the internet

\n

If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

\n
\t<key>NSAppTransportSecurity</key>
\t<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
\t</dict>
\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@benedictstrube/ui-mapbox.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":177}},"@nativescript/firebase-performance":{"name":"@nativescript/firebase-performance","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-performance

\n

Contents

\n\n

Intro

\n

This plugin allows you to use the Firebase Performance Monitoring API in your NativeScript app.

\n

\"image\"

\n

Set up your app for Firebase

\n

You need to set up your app for Firebase before you can enable Firebase Performance Monitoring. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Add the Firebase Performance Monitoring SDK to your app

\n

To add the Firebase Performance Monitoring to your app, follow these steps:

\n
    \n
  1. Install the @nativescript/firebase-performance plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-performance
\n
    \n
  1. Add the SDK by importing the @nativescript/firebase-performance module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-performance';
\n

Add custom tracing

\n

You can use custom traces to measure the amount of time it takes for your app to complete a specific task.

\n

You start your custom trace by calling the startTrace method with a string to identify the trace. You can then add custom attributes and metrics to the trace. Finally, you stop the trace by calling the stop method.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-performance';
async function customTrace() {
\t// Define & start a trace
\tconst trace = await firebase().perf().startTrace('custom_trace');

\t// Define trace meta details
\ttrace.putAttribute('user', 'abcd');
\ttrace.putMetric('credits', 30);

\t// Stop the trace
\tawait trace.stop();
}
\n

Add HTTP Request Tracing

\n

To create a trace for a network request, follow these steps:

\n\n
const metric = await firebase().perf().newHttpMetric(url, 'GET');
\n\n
metric.putAttribute('user', 'abcd');
\n\n
await metric.start();
\n\n
const response = await fetch(url);
metric.setHttpResponseCode(response.statusCode);
metric.setResponseContentType(response.headers['Content-Type']);
metric.setResponsePayloadSize(response.headers['Content-Length']);
\n\n
await metric.stop();
\n

The above steps combined would look as follows:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-performance';

async function getRequest(url) {
\t// Define the network metric
\tconst metric = await firebase().perf().newHttpMetric(url, 'GET');

\t// Define meta details
\tmetric.putAttribute('user', 'abcd');

\t// Start the metric
\tawait metric.start();

\t// Perform a HTTP request and provide response information
\tconst response = await fetch(url);
\tmetric.setHttpResponseCode(response.statusCode);
\tmetric.setResponseContentType(response.headers['Content-Type']);
\tmetric.setResponsePayloadSize(response.headers['Content-Length']);

\t// Stop the metric
\tawait metric.stop();

\treturn response.toJSON();
}

// Call API
getRequest('https://api.com').then((json) => {
\tconsole.log(json);
});
\n

API

\n

Performance class

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

performanceAndroid: com.google.firebase.perf.FirebasePerformance = firebase().perf().android;
\n

A read-only property that returns the Performance Monitoring instance for Android.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

performanceIOS: FIRPerformance = firebase().perf().ios;
\n

A read-only property that returns the Performance Monitoring instance for iOS.

\n
\n

app

\n
import { firebase } from '@nativescript/firebase-core';

performanceApp: FirebaseApp = firebase().perf().app;
\n

A read-only property that returns the FirebaseApp instance for the current app.

\n
\n

isPerformanceCollectionEnabled

\n
import { firebase } from '@nativescript/firebase-core';

isPerformanceCollectionEnabled: boolean = firebase().perf().isPerformanceCollectionEnabled;
// or
firebase().perf().isPerformanceCollectionEnabled = true;
\n

A read-write property that returns true or false depending on whether performance monitoring is enabled or not. You can also set this property to enable or disable performance monitoring.

\n
\n

newHttpMetric()

\n
import { firebase } from '@nativescript/firebase-core';

httpMetric: HttpMetric = firebase().perf().newHttpMetric(url, httpMethod);
\n

Creates a new HttpMetric instance, used to represent an HTTP request tracing, with the given URL and httpMethod.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
urlstring
httpMethodHttpMethod
\n
\n

newTrace()

\n
import { firebase } from '@nativescript/firebase-core';

trace: Trace = firebase().perf().newTrace(identifier);
\n

Creates a new Trace instance with the given identifier.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
identifierstring
\n
\n

startTrace()

\n
import { firebase } from '@nativescript/firebase-core';

trace: Trace = firebase().perf().startTrace(identifier);
\n

Creates and starts a new Trace instance with the given identifier.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
identifierstring
\n
\n

HttpMetric class

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

httpMetricAndroid: com.google.firebase.perf.metrics.HttpMetric = httpMetric.android;
\n

A read-only property that returns the HttpMetrics instance for Android.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

httpMetricIOS: FIRHTTPMetric = httpMetric.ios;
\n

A read-only property that returns the HttpMetric instance for iOS.

\n
\n

getAttribute()

\n
someAttribute: string = httpMetric.getAttribute(attribute);
\n

Returns the value for the specified attribute.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
attributestringThe name of the attribute to retrieve the value for.
\n
\n

getAttributes()

\n
attributes: { [key: string]: string } = httpMetric.getAttributes();
\n
\n

putAttribute()

\n
httpMetric.putAttribute(attribute, value);
\n

For the description of this method, see putAttribute() on the Firebase documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
attributestringThe name of the attribute to set.
valuestringThe value of the attribute to set.
\n
\n

removeAttribute()

\n
httpMetric.removeAttribute(attribute);
\n

Remove the specified attribute from the tracing metric.

\n
\n

setHttpResponseCode()

\n
httpMetric.setHttpResponseCode(code);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
codenumberThe HTTP response code.
\n
\n

setRequestPayloadSize()

\n
httpMetric.setRequestPayloadSize(bytes);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
bytesnumberThe size of the request payload.
\n
\n

setResponseContentType()

\n
httpMetric.setResponseContentType(contentType);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
contentTypestringThe content type of the HTTP response. Examples: text/html, application/json
\n
\n

start()

\n
httpMetric.start();
\n

Marks the start of an HTTP request/response tracing.

\n
\n

stop()

\n
httpMetric.stop();
\n

Marks the end time of the response and queues the network request metric on the device for transmission.

\n
\n

Trace class

\n

android

\n
traceAndroid: com.google.firebase.perf.metrics.Trace = trace.android;
\n

A read-only property that returns the Trace instance for Android.

\n
\n

ios

\n
traceIOS: FIRTrace = trace.ios;
\n

A read-only property that returns the Trace instance for iOS.

\n
\n

getAttribute()

\n
someAttribute: string = trace.getAttribute(attribute);
\n

Returns the value for the specified attribute of the trace.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
attributestringThe name of the attribute to retrieve the value for.
\n
\n

getMetric()

\n
someMetric: number = trace.getMetric(metricName);
\n

Gets the value of the metric with the given name in the current trace. For more, information see getMetric() on the Firebase documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
metricNamestringThe name of the metric to retrieve the value for.
\n
\n

getMetrics()

\n
metrics: { [key: string]: number } = trace.getMetrics();
\n
\n

incrementMetric()

\n
trace.incrementMetric(metricName, incrementBy);
\n

For the description of this method, see incrementMetric() on the Firebase documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
metricNamestringThe name of the trace metric to increment.
incrementBynumberThe value to increment the metric by.
\n
\n

putAttribute()

\n
trace.putAttribute(attribute, value);
\n

For the description of this method, see putAttribute() on the Firebase documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
attributestring
valuestring
\n
\n

putMetric()

\n
trace.putMetric(metricName, value);
\n

For the description of this method, see putMetric() on the Firebase documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
metricNamestringThe name of the trace metric to set.
valuenumberThe value to set the metric to.
\n
\n

removeMetric()

\n
trace.removeMetric(metricName);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
metricNamestringThe name of the trace metric to remove from the Trace instance.
\n
\n

start()

\n
trace.start();
\n

Marks the start time of the trace.

\n
\n

stop()

\n
trace.stop();
\n

Marks the end time of the trace and queues the trace on the device for transmission.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":34,"lastWeek":104,"lastMonth":2003}},"@nativescript/firebase-firestore":{"name":"@nativescript/firebase-firestore","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-firestore

\n\n

Intro

\n

This plugin allows you to add Firebase Cloud Firestore to your NativeScript app.

\n

\"image\"

\n

Set up Firebase

\n\n

Create your Firestore database

\n

To create your Firestore database, follow the instructions at Create a Cloud Firestore database.

\n

Add the Firestore SDK to your app

\n

To add the Cloud Firestore SDK to your app, install and import the @nativescript/firebase-firestore plugin.

\n
    \n
  1. Install the plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-firestore
\n
    \n
  1. To add the Firestore SDK, import the @nativescript/firebase-firestore plugin. You should import the plugin once in your app project and the ideal place to do that is the app bootstrapping file( app.ts, main.ts, etc).
    2. \n
\n

Initialize Cloud Firestore

\n

To initialize your Firestore database, create its instance by calling the firestore method on the FirebaseApp instance returned by the firebase method imported from the @nativescript/firebase-core plugin.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-firestore';
const firestore = firebase().firestore();
\n

By default, this allows you to interact with Firestore using the default Firebase App used whilst installing Firebase on your platform. However, if you'd like to use Firestore with a secondary Firebase App, pass the secondary app instance when calling the firestore method:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-firestore';

// create secondary app instance
const config = new FirebaseOptions();
const secondaryApp = firebase().initializeApp(config, 'SECONDARY_APP');

const firestore = firebase().firestore(secondaryApp);
\n

Firestore collections and documents

\n

Firestore stores data within documents, which are contained within collections. Documents can also contain nested collections. For example, our users would each have their own "document" stored inside the "users" collection.

\n

Writing Data

\n

Before you write data to Firestore, see Structure your data for the best practices for structuring your data.

\n

Adding Documents

\n

To add a new document to a collection, first, get the collection instance by calling the collection method on the Firestore instance with the collection's name. Next, call the add method on the CollectionReference instance with the data for the document.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.add({
\t\tname: 'Ada Lovelace',
\t\tage: 30,
\t})
\t.then(() => {
\t\tconsole.log('User added!');
\t});
\n

The add method adds the new document to your collection with a random unique ID. If you'd like to specify an ID, call the set method on a DocumentReference instead:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.set({
\t\tname: 'Ada Lovelace',
\t\tage: 30,
\t})
\t.then(() => {
\t\tconsole.log('User added!');
\t});
\n

The set method replaces any existing data on a given DocumentReference instance.

\n

Updating data

\n

To update a document's data, call the update method on the document passing it the object of data to update.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.update({
\t\tage: 31,
\t})
\t.then(() => {
\t\tconsole.log('User updated!');
\t});
\n

The method also provides support for updating deeply nested values via the dot notation. The following example updates the zipcode property of the address object which is a property of an info object.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.update({
\t\t'info.address.zipcode': 94040,
\t})
\t.then(() => {
\t\tconsole.log('User updated!');
\t});
\n

Update geolocation points

\n

To update geolocation data, instantiate the GeoPoint class with the latitude and longitude and use the instance as the value to update with.

\n
import { firebase } from '@nativescript/firebase-core';
import { GeoPoint } from '@nativescript/firebase-firestore';

firebase()
\t.firestore()
\t.doc('users/ABC')
\t.update({
\t\t'info.address.location': new GeoPoint(53.483959, -2.244644),
\t});
\n\n

Update timestamps

\n

To create a timestamp value, call the serverTimestamp static method on the FieldValue class and pass the timestamp to the update method as shown below. When your code passes the timestamp to the database, the Firebase servers write a new timestamp based on their time, rather than that of the client. This helps resolve any data consistency issues with different client timezones.

\n
import { firebase } from '@nativescript/firebase-core';
import { FieldValue } from '@nativescript/firebase-firestore';

firebase().firestore().doc('users/ABC').update({
\tcreatedAt: FieldValue.serverTimestamp(),
});
\n

Update data in an array

\n

To help manage(adding or removing) the values with an array, the API exposes an arrayUnion and arrayRemove methods on the FieldValue class.

\n\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.doc('users/ABC')
\t.update({
\t\tfcmTokens: firestore.FieldValue.arrayUnion('ABCDE123456'),
\t});
\n\n
import { firebase } from '@nativescript/firebase-core';
import { FieldValue } from '@nativescript/firebase-firestore';

firebase()
\t.firestore()
\t.doc('users/ABC')
\t.update({
\t\tfcmTokens: FieldValue.arrayRemove('ABCDE123456'),
\t});
\n

Removing data

\n\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.delete()
\t.then(() => {
\t\tconsole.log('User deleted!');
\t});
\n\n
import { firebase } from '@nativescript/firebase-core';
import { FieldValue } from '@nativescript/firebase-firestore';

firebase().firestore().collection('users').doc('ABC').update({
\tfcmTokens: FieldValue.delete(),
});
\n

Update data with transactions

\n

Transactions are a way to always ensure a data write occurs with the latest information available on the server.

\n

Imagine a scenario whereby an app can "like" user posts. Whenever a user presses the "Like" button, a "likes" value (number of likes) on a "Posts" collection document increments. Without transactions, we'd first need to read the existing value and then increment that value in two separate operations.

\n

On a high-traffic application, the value on the server could already have changed by the time the operation sets a new value, causing the actual number to not be consistent.

\n

Transactions remove this issue by atomically updating the value on the server. If the value changes whilst the transaction is executing, it will retry. This always ensures the value on the server is used rather than the client value.

\n

You can read more about transactions at Update data with transactions.

\n

To update a document data with a transaction, follow these steps:

\n
    \n
  1. \n

    Get the reference of the document you want to update.

    \n
    2. \n
  2. \n

    Call the runTransaction method on the database instance to instantiate a transaction. passing it a callback function that receives the transaction instance.

    \n
    3. \n
  3. \n

    In the callback function, read the document obtained in step 1 by passing it to the get method.

    \n
    4. \n
  4. \n

    Update the document by calling the transaction object's update method with the document reference as the first argument and the object with the data to update as the second argument.

    \n
    5. \n
\n
import { firebase } from '@nativescript/firebase-core';

function onPostLike(postId) {
  // 1. Create a reference to the post

const postReference = firebase().firestore().doc(`posts/${postId}`);
// 2. Instantiate a transaction.
  return firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const postSnapshot = await transaction.get(postReference);

    if (!postSnapshot.exists) {
      throw 'Post does not exist!';
    }
// 4. Update the document
    transaction.update(postReference, {
      likes: postSnapshot.data().likes + 1,
    });
  });
}

onPostLike('ABC')
  .then(() => console.log('Post likes incremented via a transaction'))
  .catch(error => console.error(error));
\n

Batched writes

\n

If you do not need to read any documents in your operation set, you can execute multiple write operations as a single batch that contains any combination of set, update, or delete operations. A batch of writes completes atomically and can write to multiple documents.

\n

To execute a batched write, follow these steps:

\n
    \n
  1. \n

    Get the reference of the documents to operate on.

    \n
    2. \n
  2. \n

    Create a new WriteBatch instance by calling the batch method on the Firestore database instance.

    \n
    3. \n
  3. \n

    Perform operations() on the batch instance.

    \n
    4. \n
  4. \n

    After calling the batch operations method, commit the batch instance by calling the commit method on the WriteBatch instance.

    \n
    5. \n
\n

The example below shows how to delete all documents in a collection in a single operation:

\n
import { firebase } from '@nativescript/firebase-core';

async function massDeleteUsers() {
  // 1. Documents references
  const usersQuerySnapshot = await firebase().firestore().collection('users').get();

  // Create a new batch instance
  const batch = firebase().firestore().batch();
// Batch operation: delete
  usersQuerySnapshot.forEach(documentSnapshot => {
    batch.delete(documentSnapshot.ref);
  });
// Commit the batch operation
  return batch.commit();
}

massDeleteUsers().then(() => console.log('All users deleted in a single batch operation.'));
\n

Secure your data

\n

You must understand how to write rules in your Firebase Console to ensure that your data is secure. To learn about Firestore security rules, see Get Started with Cloud Firestore Security Rules.

\n

Offline Capabilities

\n

Firestore provides out-of-the-box support for offline capabilities. When reading and writing data, Firestore uses a local database that synchronizes automatically with the server. Firestore functionality continues even when users are offline, and automatically handles data migration to the server when they regain connectivity.

\n

This functionality is enabled by default. However, you can disable it whenever you need to(e.g. on apps containing sensitive information) by setting the settings property of the Firestore instance to false. You should set the property before any Firestore interaction is performed. Otherwise, it will only take effect on the next app launch:

\n
import { firebase } from '@nativescript/firebase-core';
firebase().firestore().settings.persistence = false;
\n

Read Data

\n

Cloud Firestore gives you the ability to read the value of a collection or a document. This can be a one-time read or a read that occurs whenever the data within a query changes.

\n

One-time read

\n

To read a collection or document once, call the Query.get or DocumentReference.get methods, for a collection or document respectively.

\n
import { firebase } from '@nativescript/firebase-core';
const users = firebase().firestore().collection('users');

users
\t.doc(documentId)
\t.get()
\t.then((snapshot) => {
\t\tif (snapshot && !snapshot.exists) {
\t\t\tconosle.log('Document does not exist');
\t\t\treturn;
\t\t}
\t\tconsole.log(`Full Name: ${snapshot.data()['full_name']} ${snapshot.data()['last_name']}`);
\t})
\t.catch((error) => console.error('Failed to add user:', error));
\n

Listen to real-time data changes

\n

To react to any changes to a collection or a document, call the onSnapshot method on the collection or document with an event handler function. The example below watches for changes in the users collection.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.onSnapshot(
\t\t(snapshot) => {
\t\t\tconsole.log('Got Users collection result.');
\t\t},
\t\t(error) => {
\t\t\tconsole.error(error);
\t\t}
\t);
\n

The example below watches for changes in the userId document:

\n
import { firebase } from '@nativescript/firebase-core';

const unsubscriber = firebase()
\t.firestore()
\t.collection('users')
\t.doc(userId)
\t.onSnapshot((documentSnapshot) => {
\t\tconsole.log('User data: ', documentSnapshot.data());
\t});

unsubscriber();
\n

Firestore snapshots

\n

Once a query has returned a result, Firestore returns either a QuerySnapshot (for collection queries) or a DocumentSnapshot (for document queries). These snapshots provide the ability to view the data, view query metadata (such as whether the data was from a local cache), whether the document exists or not and more.

\n

Handle QuerySnapshot

\n

A QuerySnapshot returned by the get method of a collection query allows you to inspect the collection, such as how many documents exist within it, access to the documents within the collection, any changes since the last query and more.

\n

To access the documents within a QuerySnapshot object, call the forEach method:

\n
import { firebase } from '@nativescript/firebase-core';
firebase()
\t.firestore()
\t.collection('users')
\t.get()
\t.then((querySnapshot) => {
\t\tconsole.log('Total users: ', querySnapshot.size);

\t\tquerySnapshot.forEach((documentSnapshot) => {
\t\t\tconsole.log('User ID: ', documentSnapshot.id, documentSnapshot.data());
\t\t});
\t});
\n

Each child document of a QuerySnapshot is a QueryDocumentSnapshot, which allows you to access specific information about a document (see below).

\n

Handle DocumentSnapshot

\n

A DocumentSnapshot is returned from a query to a specific document, or as part of the documents returned via a QuerySnapshot. The snapshot provides the ability to view a document's data, metadata and whether a document exists.

\n\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.get()
\t.then((documentSnapshot) => {
\t\tconsole.log('User exists: ', documentSnapshot.exists);

\t\tif (documentSnapshot.exists) {
\t\t\tconsole.log('User data: ', documentSnapshot.data());
\t\t}
\t});
\n\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.firestore()
\t.collection('users')
\t.doc('ABC')
\t.get()
\t.then((documentSnapshot) => {
\t\treturn documentSnapshot.get('info.address.zipcode');
\t})
\t.then((zipCode) => {
\t\tconsole.log('Users zip code is: ', zipCode);
\t});
\n

Firestore querying

\n

Cloud Firestore offers advanced capabilities for querying collections. Queries work with both one-time reads or subscribing to changes

\n

Filtering data

\n

To filter documents within a collection, call the where method on a collection reference. Filtering supports equality checks and "in" queries. For example, to filter users whose age is greater than 20 years, call where as follows:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .where('age', '>', 20)
  .get()
  .then(...);
\n

Firestore also supports array queries. For example, to filter users who speak English (en) or Italian (it), use the arrayContainsAny filter:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .where('language', 'array-contains-any', ['en', 'it'])
  .get()
  .then(...);
\n

To learn more about all of the querying capabilities Cloud Firestore has to offer, see Perform simple and compound queries in Cloud Firestore.

\n

Limiting data

\n

To limit the number of documents returned from a query, use the limit method on a collection reference:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .limit(2)
  .get()
  .then(...);
\n

You can also limit to the last documents within the collection query by using the limitToLast method:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .orderBy('age')
  .limitToLast(2)
  .get()
  .then(...);
\n

Ordering data

\n

To order the documents by a specific value, use the orderBy method:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .orderBy('age', descending: true)
  .get()
  .then(...);
\n

Start and End Cursors

\n

To start and/or end a query at a specific point within a collection, you can pass a value to the startAt, endAt, startAfter or endBefore methods.

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .orderBy('age')
  .orderBy('company')
  .startAt([4, 'Alphabet Inc.'])
  .endAt([21, 'Google LLC'])
  .get()
  .then(...);
\n

You can also specify a DocumentSnapshot instead of a specific value, by passing it to the startAfterDocument, startAtDocument, endAtDocument or endBeforeDocument methods. For example:

\n
import { firebase } from '@nativescript/firebase-core';

firebase().firestore()
  .collection('users')
  .orderBy('age')
  .startAfterDocument(documentSnapshot)
  .get()
  .then(...);
\n

Query Limitations

\n

Cloud Firestore does not support the following types of queries:

\n\n

API

\n

Firestore class

\n

This class is a wrapper for the FirebaseFirestore class that represents a Cloud Firestore database and is the entry point for all Cloud Firestore operations.

\n

app

\n
firebaseApp: = firestore.app
\n

The FirebaseApp instance through which the Firestore database is accessed.

\n

android

\n
firestoreAndroid: com.google.firebase.firestore.FirebaseFirestore = firebase().firestore().android
\n

The Firestore database instance for Android.

\n

ios

\n
firestoreIOS: FIRFirestore = firebase().firestore().ios
\n

The Firestore database instance for iOS.

\n
\n

settings

\n
settings: Settings = firebase().firestore().settings
// 
settings = new Settings()

firebase().firestore().settings = settings
\n

For the description, see getFirestoreSettings() on the FirebaseFirestore class documentation.

\n
\n

useEmulator()

\n
firebase().firestore().useEmulator(host, port)
\n

For the description, see useEmulator on the FirebaseFirestore class documentation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
hoststring
portnumber
\n
\n

batch()

\n
writeBatch: WriteBatch = firebase().firestore().batch()
\n

Creates a write batch instance. For more information, see batch() on the FirebaseFirestore class documentation.

\n
\n

collection()

\n
collectionReference: CollectionReference = firebase().firestore().collection(collectionPath)
\n

Gets the CollectionReference in the database at the specified path.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
collectionPathstringThe slash-separated path string of the collection.
\n
\n

clearPersistence()

\n
firebase().firestore().clearPersistence().then(()=>{
\t// do something after clearing
}).catch( (err) =>{

})
\n

For the description, see clearPersistence() on the FirebaseFirestlre class documentation.

\n
\n

collectionGroup()

\n
collectionGroup: Query = firebase().firestore().collectionGroup(collectionId)
\n

For the description, see the collectionGroup method on the documentation of the FirebaseFirestore class.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
collectionIdstring
\n
\n

disableNetwork()

\n
firebase().firestore().disableNetwork().then(()=>{
\t// do something after disabling network
}).catch( (err) =>{

})
\n

For the description, see the description of the disableNetwork() method on the FirebaseFirestore documentation.

\n
\n

enableNetwork()

\n
firebase().firestore().enableNetwork().then(()=>{
\t// do something after disabling network
}).catch( (err) =>{

})
\n

For the description, see the description of the enableNetwork() method on the FirebaseFirestore documentation.

\n
\n

doc()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
\n

Gets the DocumentReference instance for the document at the specified path.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
documentPathstringThe slash-separated path string for a document in the database.
\n
\n

runTransaction()

\n
firebase().firestore().runTransaction(updateFunction).then((result: any)=>{

}).catch((err)=>{

})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
updateFunction(transaction: Transaction) => Promise<any>
\n
\n

terminate()

\n
firebase().firestore().terminate().then(()=>{
\t// do something after disabling network
}).catch( (err) =>{

})
\n

For the description, see the description of the terminate() method on the FirebaseFirestore class documentation.

\n
\n

waitForPendingWrites()

\n
firebase().firestore().waitForPendingWrites().then(()=>{
\t// do something after disabling network
}).catch( (err) =>{

})
\n

For the description, see the description of the waitForPendingWrites method on the FirebaseFirestore class documentation.

\n
\n

CollectionReference object

\n

An object that represents a collection on the database.

\n

id

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReferenceId: string = collectionReference.id
\n

A readonly property that returns the ID of the collection.

\n
\n

path

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReferencePath: string = collectionReference.path
\n

A readonly property that returns the path of the collection.

\n
\n

parent

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReferenceParent: DocumentReference = collectionReference.parent
\n

A readonly property that returns the DocumentReference containing this collection, if the collection is a sub-collection. If the collection is a root collection, null gets returned.

\n
\n

ios

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReferenceIOS: FIRCollectionReference = collectionReference.ios
\n

A readonly property that returns the CollectionReference instance for iOS.

\n
\n

android

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReferenceAndroid: com.google.firebase.firestore.CollectionReference = collectionReference.android
\n

A readonly property that returns the CollectionReference instance for Android.

\n
\n

add()

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReference.add(dataObject).then((docReference: DocumentReference<T>)=>{

}).catch((err)=>{

})
\n

Adds a new document to this collection with the specified data, assigning it a document ID automatically.

\n
\n

doc()

\n
collectionReference = firebase().firestore().collection(collectionPath)
document: IDocumentReference<T> = collectionReference.doc(documentPath).doc(documentPath)
\n

Gets a DocumentReference instance that refers to the document at the specified path within this collection.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
documentPathstringThe document path.
\n
\n

endAt()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.endAt(snapshot)
// or 
query: Query = collectionReference.endAt(fieldValues)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
snapshotDocumentSnapshot
fieldValuesDocumentSnapshot | FieldValue[]
\n
\n

endBefore()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.endBefore(snapshot)
// or 
query: Query = collectionReference.endBefore(fieldValues)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
snapshotDocumentSnapshot
fieldValuesDocumentSnapshot | FieldValue[]
\n
\n

get()

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReference.get(options).then((querySnapshot: QuerySnapshot) =>{

}).catch(err =>{

})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
optionsGetOptionsOptional
\n
\n

limit()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.limit(limit)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
limitnumberOptional
\n
\n

limitToLast()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.limitToLast(limitToLast)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
limitToLastnumberOptional
\n
\n

onSnapshot()

\n
collectionReference = firebase().firestore().collection(collectionPath)
collectionReference.onSnapshot(observer)
//OR
collectionReference.onSnapshot(options,observer)
//OR
collectionReference.onSnapshot(onNext, onError, onCompletion)
//OR
collectionReference.onSnapshot(options,onNext, onError,onCompletion)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
observerIObserver
optionsSnapshotListenOptions
onNext(snapshot: QuerySnapshot) => voidOptional
onError(error: Error) => voidOptional
onCompletion() => voidOptional
\n

Observer interface

\n
interface IObserver { 
\tcomplete?: () => void;
\t error?: (error: Error) => void;
\tnext?: (snapshot: QuerySnapshot) => void 
\t}
\n
\n

orderBy()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.orderBy(fieldPath,directionStr)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
fieldPathkeyof DocumentData
directionStr'asc' | 'desc'Defaults to 'asc'
\n
\n

startAfter()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.startAfter(snapshot)
// or 
query: Query = collectionReference.startAfter(fieldValues)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
snapshotDocumentSnapshot
fieldValuesDocumentSnapshot | FieldValue[]
\n
\n

startAt()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.startAt(snapshot)
// or 
query: Query = collectionReference.startAt(fieldValues)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
snapshotDocumentSnapshot
fieldValuesDocumentSnapshot | FieldValue[]
\n
\n

where()

\n
collectionReference = firebase().firestore().collection(collectionPath)
query: Query = collectionReference.where(fieldPath,opStr,value)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
fieldPathFieldPath | keyof DocumentData
opStrWhereFilterOp
valueany
\n
\n

isEqual()

\n
collectionReference = firebase().firestore().collection(collectionPath)
isEqual: boolean = collectionReference.isEqual(other)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
otherany
\n
\n

DocumentReference object

\n

An object that represents a document on the database.

\n

firestore

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentReferenceFirestore: Firestore = document.firestore
\n

A readonly property that returns the Firestore database instance for this document.

\n
\n

id

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentReferenceId: string = document.id
\n

A readonly property that returns the ID of the doocument.

\n
\n

path

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentPath: string = document.path
\n

A readonly property that returns the path of the document.

\n
\n

parent

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentParent: CollectionReference = document.parent
\n

A readonly property that returns the CollectionReference that contains this document.

\n
\n

ios

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentIOS: FIRDocumentReference = document.ios
\n

A readonly property that returns the DocumentReference instance for iOS.

\n
\n

android

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
documentAndroid: com.google.firebase.firestore.DocumentReference = document.android
\n

A readonly property that returns the DocumentReference instance for Android.

\n
\n

collection()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
document.collection(collectionPath)
\n
\n

delete()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
document.delete().then(()=>{
\t//
}).catch(err =>{

})
\n

Asynchronously delete this document.

\n
\n

get()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\t//handle the document data
}).catch(err =>{

})
\n

Reads the data from the document.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
optionsGetOptionsOptional settings object for the get operation.
\n

GetOptions interface

\n
enum GetOptions {
\tDefault = 'default',
\tServer = 'server',
\tCache = 'cache',
}
\n
\n

set()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
document.set(data, options).then(()=>{

}).catch(err =>{

})
\n

Overwrites the data of this document with the specified data, if the document exists. Otherwise, it creates the document and saves the data to the document.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
dataanyThe data to save.
optionsSetOptionsOptional settings object for the set operation.
\n

SetOptions interface

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
mergeundefined | false | trueFor the description, see merge on the Firebase documentation.
mergeFieldsstring[] | IFieldPath[]For the description, see mergeFields andmergeFields on the Firebase documentation.
\n
\n

onSnapshot()

\n
document: DocumentReference = firebase().firestore().doc(documentPath)
document.onSnapshot(observer)
\n

Allows you to add a function to listen for the document's real-time changes event. The onSnapshot method has the following additional overloads:

\n
document.onSnapshot(observer)
//OR
document.onSnapshot(options,observer)
//OR
document.onSnapshot(onNext, onError, onCompletion)
//OR
document.onSnapshot(options,onNext, onError,onCompletion)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
observerIObserver
optionsSnapshotListenOptions
onNext(snapshot: QuerySnapshot) => voidOptional
onError(error: Error) => voidOptional
onCompletion() => voidOptional
\n
\n

update()

\n
update(data).then(()=>{

}).catch(err =>{

})
//OR
update(field,value,moreFieldsAndValues).then(()=>{

}).catch(err =>{

})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
data`Partial<{ [K in keyof T]: FieldValueT[K] }>)`
fieldFieldPath
valueany
moreFieldsAndValuesany[]
\n

Allows you to update this document with the specified data.

\n

DocumentSnapshot object

\n

exists

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocExists: boolean = snapshot.exists
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns true if the document exists or false otherwise.

\n
\n

id

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocID: string = snapshot.id
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns the ID of the snapshot.

\n
\n

metadata

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tsnapshotMetadata: SnapshotMetadata = snapshot.metadata
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns metadata about the snapshot, describing the state of the snapshot.

\n
\n

ref

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocReference: DocumentReference = snapshot.ref
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns the DocumentReference instance of the document.

\n
\n

android

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocumentSnapshotAndroid: com.google.firebase.firestore.DocumentSnapshot = snapshot.android
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns the DocumentSnapshot instance for Android.

\n
\n

ios

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocumentSnapshotIOS: FIRDocumentSnapshot = snapshot.ios
}).catch(err =>{
// handle any error here
})
\n

A readonly property that returns the DocumentSnapshot instance for iOS.

\n
\n

data()

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocumentSnapshotData: any = snapshot.data()
}).catch(err =>{
// handle any error here
})
\n

Extracts the fields of the document data.

\n
\n

get()

\n
document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
\tdocumentField: fieldType = snapshot.get(fieldPath)
}).catch(err =>{
// handle any error here
})
\n

Returns the value for the specified field. If the field does not exist, it returns null.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
fieldPathstring | number | FieldPath"Returns the value at the field or null if the field doesn't exist."
\n
\n

Transaction class

\n

android

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const transactionAndroid: com.google.firebase.firestore.Transaction  = transaction.android;

  });
\n

Returns the Transaction object for Android.

\n
\n

ios

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const transactionIOS: FIRTransaction = transaction.ios;

  });
\n

Returns the Transaction object for iOS.

\n
\n

get()

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const documentSnapshot: DocumentSnapshot = await transaction.get(documentReference);

  });
\n

Reads the specified document.

\n
\n

delete()

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    transactionAfterDelete = transaction.delete(documentReference);

  });
}
\n

Deletes the specified DocumentReference instance.

\n
\n

update()

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const documentSnapshot = await transaction.get(documentReference);

    if (!documentSnapshot.exists) {
      throw 'Document does not exist!';
    }
// 4. Update the document
    transactionAfterUpdate = transaction.update(documentReference, data);
\t// OR 
\ttransactionAfterUpdate = transaction.update(documentReference, field, value, moreFieldsAndValues);
\t//OR
\ttransactionAfterUpdate = transaction.update(documentReference, data);


  });
\n

Updates the specified document with the provided data and return the transaction.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
documentReferenceDocumentReference objectThe DocumentReference instance to update.
fieldanyThe document field to update.
valueanyThe new value to set.
moreFieldsAndValuesany[]
\n
\n

set()

\n
firestore().runTransaction(async transaction => {
    // 3. Read the document's data
    const documentSnapshot = await transaction.get(documentReference);

// 4. Set document data
    transactionAfterSet = transaction.set(documentReference, data);
  });
\n

Saves data to the specified DocumentReference. If the document does not exist, it creates the document.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":9,"lastWeek":44,"lastMonth":1893}},"@arepa/time-range":{"name":"@arepa/time-range","version":"1.0.10","license":"Apache-2.0","readme":"

Nativescript TimeRange

\n\n \"npm\"\n\n

@arepa/time-range

\n

Instalation

\n
npm install @arepa/time-range
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:tr=\"@arepa/time-range\" on the Page element

\n
<Page xmlns:tr=\"@arepa/time-range\">
    <StackLayout class=\"p-20\">
      <tr:TimeRange width=\"100%\" height=\"100%\" drag=\"onDrag\"/>
    </StackLayout>
</Page>
\n
onDrag(ev) {
    console.log('onDrag ', ev.data);
  }
\n

Nativescript Angular

\n
import { NativeScriptTimeRangeModule } from '@arepa/time-range/angular';

//addd NativeScriptTimeRangeModule to angular NgModule>imports
@NgModule({
    imports: [
        NativeScriptTimeRangeModule,
    ],
})
\n
<TimeRange (drag)=\"onDrag($event)\"></TimeRange>
\n
onDrag(ev) {
    console.log('onDrag ', ev.data);
  }
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefault valueDescriptioniOSAndroid
startTimestring00:00The time format is Hh:Mm, for example, 12:00. startTime defines the start time, it is not required.✓✓
endTimestring00:00The time format is Hh:Mm, for example, 12:00. endTime defines the end time, it is not required.✓✓
sliderColorstringgraysliderColor defines the background color of the slider. Default is gray.✓✓
clockLabelColorstringwhiteclockLabelColor defines the color of the numbers.✓✓
clockTickColorstringwhiteclockTickColor defines the color of the lines not numbers (in the case of Android, also the lines. iOS not have lines).❌✓
maxDurationMinutesnumber0Set the maximum selectable duration by providing minutes between 0 and 1440❌✓
sliderRangeColorstringgrayThe color of the active part of the slider wheel.✓✓
thumbColorstringgrayThe background color of the thumbs.✓✓
sliderRangeGradientStartstringgraySet the starting gradient color of the active part of the slider wheel. Please note that both sliderRangeGradientStart and sliderRangeGradientEnd need to be configured.❌✓
sliderRangeGradientMiddlestringgrayOptional for gradient: set the middle gradient color of the active part of the slider wheel.❌✓
sliderRangeGradientEndstringgraySet the ending gradient color of the active part of the slider wheel.Please note that both sliderRangeGradientStart and trp_sliderRangeGradientEnd need to be configured.❌✓
timeStepMinutesnumber0Determines at what interval the time should be rounded. Setting it to a less accurate number (e.g. 10 minutes) makes it easier for a user to select his desired time.❌✓
clockVisiblebooleantrueWhether the clock face in the middle should be visible.✓✓
clockLabelSizenumber16Whether the clock face in the middle should be visibleThe text size of the hour labels in the clock (1, 2, 3, etc.). This value is recommended to be set as scale-independent pixels (sp).✓✓
sliderWidthnumber10The width of the slider wheel.✓✓
thumbIconSizenumber24The size of the thumb icons.❌✓
thumbSizenumber28The size of both the starting and ending thumb.✓✓
thumbIconStartResstringnullSet the start thumb icon.✓✓
thumbIconEndResstringnullSet the end thumb icon.✓✓
clockFacestringAPPLEThere a two different clock faces (appearance of the inner clock) you can use, both mimicking the Clock apps: APPLE and SAMSUNG✓✓
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onegini":{"name":"nativescript-onegini","version":"1.0.1","license":"Apache-2.0","readme":"

Onegini NativeScript Plugin

\n

The Onegini NativeScript Plugin is a NativeScript plugin that allows you to utilize the Onegini Mobile SDKs in your NativeScript applications.

\n","downloadStats":{"lastDay":2,"lastWeek":10,"lastMonth":33}},"@nativescript-community/ui-drawer":{"name":"@nativescript-community/ui-drawer","version":"0.1.25","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-drawer

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Easily add a side drawer (side menu) to your projects.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-drawer

\n

\n

Configuration

\n

For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

\n
import { install } from '@nativescript-community/ui-drawer';
install();
\n

\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
leftDrawerundefinedViewView containing the content for the left side drawer
rightDrawerundefinedViewView containing the content for the right side drawer
topDrawerundefinedViewView containing the content for the top side drawer
bottomDrawerundefinedViewView containing the content for the bottom side drawer
mainContentundefinedViewView containing the main content of the app
gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
backdropTapGestureEnabledtruebooleanAllow tapping the backdrop to close the drawer
backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
leftDrawerModeslideMode ('under' or 'slide')The drawer's enter-animation behavior
rightDrawerModeslideMode ('under' or 'slide')The drawer's enter-animation behavior
gestureMinDist10numberThe min "swipe" distance to trigger the menu gesture
gestureHandlerOptionsnullPanGestureHandlerOptionsOptions to customize the pan gesture handler
leftSwipeDistance40numberThe "left" zone size from where the gesture is recognized
rightSwipeDistance40numberThe "right" zone size from where the gesture is recognized
topSwipeDistance40numberThe "top" zone size from where the gesture is recognized
bottomSwipeDistance40numberThe "bottom" zone size from where the gesture is recognized
leftOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
rightOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
topOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
bottomOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
open()voidProgramatically open the drawer
close()voidProgramatically close the drawer
toggle()voidProgramatically toggle the state of the drawer
install()voidInstall gestures
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameEvent DataDescription
openside, durationDrawer opens
closeside, durationDrawer closes
\n

\n

Usage in Angular

\n

Import the module into your project.

\n
import { DrawerModule } from \"@nativescript-community/ui-drawer/angular\";

@NgModule({
    imports: [
        DrawerModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }
\n

Examples:

\n\n

\n

Usage in React

\n

Register the plugin in your app.ts.

\n
import DrawerElement from '@nativescript-community/ui-drawer/react';
DrawerElement.register();
\n

Examples:

\n\n

\n

Usage in Svelte

\n

Register the plugin in your app.ts.

\n
import DrawerElement from '@nativescript-community/ui-drawer/svelte';
DrawerElement.register();
\n

Examples:

\n\n

\n

Usage in Vue

\n

Register the plugin in your app.js.

\n
import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
Vue.use(DrawerPlugin);
\n

Examples:

\n\n

\n

Usage in Vue3

\n

Register the plugin in your app.js.

\n
import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'

app.use(DrawerPlugin);
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":48,"lastWeek":316,"lastMonth":1725}},"@nstudio/nativescript-exoplayer":{"name":"@nstudio/nativescript-exoplayer","version":"6.1.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-exoplayer

\n

NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

\n
npm install @nstudio/nativescript-exoplayer
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Google ExoPlayeriOS AVPlayer
\n

For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

\n

Based on

\n

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

\n

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

\n

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
        <StackLayout>

            <exoplayer:Video id=\"nativeexoplayer\"
            controls=\"true\" finished=\"{{ videoFinished }}\"
            loop=\"true\" autoplay=\"false\" height=\"280\"
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>
\n

NativeScript Angular Usage

\n
// somewhere at top of your component or bootstrap file
import { registerElement } from \"@nativescript/angular\";
import { Video } from '@nstudio/nativescript-exoplayer';
registerElement(\"Video\", () => Video);
\n
  <Video
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\"
      height=\"300\"></Video>
\n

Properties

\n\n

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n\n\n\n

By default, subtitle support is off. Use this flag to turn them on.

\n\n

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

\n\n

Set if the video should start playing as soon as possible or to wait for user interaction.

\n\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n\n

Set to use the native video player's media playback controls.

\n\n

Mutes the native video player.

\n\n

Sets the native video player to loop once playback has finished.

\n\n

If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

\n\n

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

\n

iOS:

\n\n

See here for explanation.

\n\n

Attribute to specify an event callback to execute when the video is ready to play.

\n\n

Attribute to specify an event callback to execute when the video has finished seekToTime.

\n\n

If set to true, currentTimeUpdated callback is possible.

\n\n

Attribute to specify an event callback to execute when the time is updated.

\n\n

(iOS only) Static attribute to specify the device audio session playback category. 'backgroundAudio' on the class instance must be false for this to take effect. Available categories:

\n
    \n
  1. AVAudioSessionCategoryAmbient
    2. \n
  2. AVAudioSessionCategoryAudioProcessing
    3. \n
  3. AVAudioSessionCategoryMultiRoute
    4. \n
  4. AVAudioSessionCategoryPlayAndRecord
    5. \n
  5. AVAudioSessionCategoryPlayback
    6. \n
  6. AVAudioSessionCategoryRecord
    7. \n
  7. AVAudioSessionCategorySoloAmbient
    8. \n
  8. AVAudioSessionCategoryAudioProcessing (Deprecated in iOS 10)
    9. \n
\n

Details for these categories can be found on the AVAudioSessionCategory documentation.

\n

Example usage:

\n
import { NgModule } from '@angular/core';
import { Video } from '@nstudio/nativescript-exoplayer';

@NgModule({
  // stuff
})
export class AppModule {
  constructor() {
    Video.iosAudioSessionCategory = 'AVAudioSessionCategoryPlayback';
  }
}
\n

API

\n\n

Android only

\n\n

Breaking Changes

\n\n

ExoPlayer Encryption (Android only)

\n

Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

\n\n
key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
iv =015E42FF678B2B90B743111A396EF850
\n

Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

\n
salt=42D57450DAF116BD
key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
iv =ED07304DF8D0D0AFA2EB9B13D75BD817
\n

Create the Encrypted video file

\n\n

Contributors

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":246,"lastWeek":1043,"lastMonth":4545}},"nativescript-ui-autocomplete":{"name":"nativescript-ui-autocomplete","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI AutoComplete

\n\n

Overview

\n

Here are some of the features of the NativeScript UI AutoComplete:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-autocomplete
\n

Documentation

\n

To use the autocomplete plugin, you need to add an instance of RadAutoCompleteTextView.\nOptionally you can set its displayMode, completionMode and suggestMode.\nMore information about the plugin features is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":26,"lastWeek":211,"lastMonth":1004}},"@essent/nativescript-iadvize":{"name":"@essent/nativescript-iadvize","version":"2.13.1","license":"Apache-2.0","readme":"

@essent/nativescript-iadvize

\n

A NativeScript plugin for integration of iAdvize chat into Android/iOS app.

\n

\"npm

\n

This is a plugin to show the conversation from a iAdvize chat, using the iAdvize SDK (Android v2.2.2, iOS v2.2.5).

\n

Requirements

\n\n

Installation

\n

Run the following command from the root of your project:

\n
npm install @essent/nativescript-iadvize
\n

Activation

\n

When the user logs in to the your app call activate with your credentials (our example home.component.ts):

\n
IAdvize.activate(XXXX, 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', 'userId', () => {
  console.log('IAdvize conversation activated.');
});
\n

Chatting

\n

To open the chat window call presentChat():

\n
IAdvize.presentChat();
\n

Optional functions

\n

Hide default chat button

\n

To hide default chat button call hideDefaultChatButton():

\n
IAdvize.hideDefaultChatButton();
\n

UI customization

\n

To customize the chatbox UI call customize():

\n
const configuration: ChatConfiguration = {
  automaticMessage: 'Any question? Say Hello to Smart and we will answer you as soon as possible! 😊',
  font: 'fontPath',
  incomingMessageAvatar: 'avatar-icon',
  mainColor: '#4103fc',
  navigationBarBackgroundColor: '#4103fc',
  navigationBarMainColor: '#ffffff',
  navigationBarTitle: 'Chat Title',
};
IAdvize.customize(configuration);
\n

Logging Out

\n

To preserve the confidentiality of user conversation call logout().

\n
IAdvize.logout();
\n

Conversation events

\n

To add a listener to be informed in real time about conversation events call registerConversationListener().

\n
IAdvize.registerConversationListener(
  (url: string) => {
    console.log('Handle clicked url - ' + url);
    return false;
  },
  (hasOngoingConversation: boolean) => {
    console.log('Ongoing conversation status changed - ' + hasOngoingConversation);
  }
);
\n

Push Notifications

\n

To be informed of chat messages received when your app is not running call registerPushToken()

\n
IAdvize.registerPushToken('your-token', isProduction);
\n","downloadStats":{"lastDay":64,"lastWeek":211,"lastMonth":1435}},"@nativescript/template-blank-ng":{"name":"@nativescript/template-blank-ng","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Angular Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-ng --template @nativescript/template-blank-ng
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-ng --template nativescript-app-templates/packages/template-blank-ng
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application component:

\n\n

There is a single blank component that sets up an empty layout:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":598}},"nativescript-ui-dataform":{"name":"nativescript-ui-dataform","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI DataForm

\n\n

Overview

\n

The NativeScript UI DataForm plugin provides an easy and versatile approach for building mobile forms based on a provided data object's public members. Use DataForm to:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-dataform
\n

Documentation

\n

To use the DataForm plugin, you need to add an instance of RadDataForm and bind the source property to your business object that you want to edit with the form.\nMore information is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":9,"lastWeek":104,"lastMonth":486}},"@nativescript/firebase-admob":{"name":"@nativescript/firebase-admob","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-admob

\n

A plugin that allows you to monetize your NativeScript app by integrating the Google Mobile Ads SDK into the app.

\n
\n

Note: Before you use this plugin, if you haven't already, setup your app for Firebase by following the instructions at @nativescript/firebase-core.

\n
\n

The @nativescript/firebase-admob plugin currently supports loading and displaying the following ad types:

\n\n

Contents

\n\n\n\n

Installation

\n

To install @nativescript/firebase-admob, run the following command in the root directory of the project:

\n
npm install @nativescript/firebase-admob
\n

Setup Admob for iOS

\n

Update your Info.plist file at App_Resources/iOS with a GADApplicationIdentifier key with a string value of your AdMob app ID (identified in the AdMob UI).

\n
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
\n

For more information about configuring the Info.plist and setting up your App ID, see Update your Info.plist.

\n

Setup Admob for Android

\n

Add AdMob App ID (identified in the AdMob UI) to the app's AndroidManifest.xml file, found at App_Resources/Android/src/main. Failure to do so will result in a crash on app launch. Add the ID by adding a <meta-data> tag with name com.google.android.gms.ads.APPLICATION_ID, as shown below. For android:value insert your own AdMob App ID in quotes.

\n
<application>
  <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
  <meta-data
    android:name=\"com.google.android.gms.ads.APPLICATION_ID\"
    android:value=\"ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy\"
  />
</application>
\n

See step 3. of Configure your app for more information about configuring AndroidManifest.xml and setting up the App ID.

\n

Use @nativescript/firebase-admob

\n

To use the @nativescript/firebase-admob plugin, follow the steps below:

\n

1. Initialize the Mobile Ads SDK

\n

Before loading ads, initialize the Mobile Ads SDK by calling the static init method on the Admob class. Call this method once, ideally right before the app boots, in the main.ts file.

\n
import { Admob } from '@nativescript/firebase-admob'

Admob.init()
\n

2. Add your preferred ad format to the app

\n

The Mobile Ads SDK is now imported and you're ready to implement an ad. Click any of the links below to get detailed implementation steps for your desired ad format.

\n\n

Banner ads

\n

Banner ads are rectangular ads that appear at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period. If you're new to mobile advertising, they're a great place to start.

\n

Testing Banner ads in development mode

\n
\n

Note: When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.

\n
\n

To enable dedicated test ad unit ID for banners, visit the links below:

\n\n

Below are examples of adding a Banner ad in several NativeScript flavors.

\n

Add Banner ad in NativeScript Core

\n

Register the plugin namespace in the Page element under a prefix(ui for example), access the BannerAd view from the namespace via the prefix and add it to your XML.

\n

The BannerAd requires the following attributes to be set:

\n\n\n
<Page xmlns:ui=\"@nativescript/firebase-admob\" >

  <StackLayout>
    <ui:BannerAd
      height=\"100\"
      width=\"100\"
      unitId=\"{{bannerAdUnit}}\"
      layoutChanged=\"{{bannerLoaded}}\"
/>
  </StackLayout>
\n

Add Banner ad in NativeScript Angular

\n

Register the BannerAd view by adding its AdmobModule to the imports array of the @NgModule decorator of the component where you want to use the view.

\n
import { AdmobModule } from '@nativescript/firebase-admob/angular';

@NgModule({
    imports: [
    AdmobModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Next, add the BannerAd view to HTML. The BannerAd requires the following attributes to be set:

\n\n
<BannerAd
  height=\"100\"
  width=\"100\"
  [unitId]=\"bannerAdUnit\"
  (layoutChanged)=\"bannerLoaded($event)\">
</BannerAd>
\n

Add Banner ad in NativeScript Vue

\n

Register the BannerAd view in the app.ts file as follows:

\n
import { createApp } from 'nativescript-vue';
import Admob from '@nativescript/firebase-admob/vue'
import Home from './components/Home.vue';

const app = createApp(Home)
app.use(Admob)
\n

And then add it to markup as follows. The BannerAd requires the following attributes to be set:

\n\n
<BannerAd
  height=\"100\"
  width=\"100\"
  :unitId=\"bannerAdUnit\"
  @layoutChanged=\"bannerLoaded\"/>
\n

Customize the banner ad size

\n

To define a custom banner size, you have 2 options:

\n\n
import { BannerAdSize } from \"@nativescript/firebase-admob\"

const adSize = new BannerAdSize(300, 50)

banner.size = adSize
\n\n

The table below lists the available constants and the sizes they represent.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AdSize ConstantSize in dp (WxH)Description
BANNER320x50Standard Banner
LARGE_BANNER320x100Large Banner
MEDIUM_RECTANGLE320x250Medium Rectangle
FULL_BANNER468x60Full-Size Banner
LEADERBOARD728x90Leaderboard
createAnchoredAdaptiveBanner(width, orientation)Provided width x Adaptive heightAdaptive Banner
createInLineAdaptiveBanner(width, orientation)Provided width x Adaptive heightAdaptive Banner
\n

Listen to a banner ad lifecycle events

\n

The plugin enables you to listen to different lifecycle events of an ad, such as when an ad is loaded. Register the events handlers before calling the load method.

\n
const bannerView = event.object;

// Called when an ad is successfully received.
bannerView.on('adLoaded', (args) =>{
console.log('Ad loaded.'),
});

 // Called when an ad request failed.
bannerView.on('adFailedToLoad', (args) =>{
   console.log('Ad failed to load: ', args.error);
});

 // Called when the user removes an overlay that covers the screen.
bannerView.on('adClosed', (args) =>{
   console.log('Ad closed.');
});

 // Called when an impression occurs on the ad.
bannerView.on('adImpression', (args) =>{
   console.log('Ad impression.');
});

 // Called when an tap/touch/click occurs on the ad.
bannerView.on('adClicked', (args) =>{
   console.log('Ad tapped');
});
\n

Display a banner ad to the user

\n

To display a banner ad to the user, get the reference to the BannerAd view and call the load method on it.

\n
bannerView.load()
\n

Add an Interstitial ad

\n

Interstitial ads are full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.

\n

Testing Interstitial ads in development

\n
\n

Note: When your app is in development mode, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.\nTo enable dedicated test ad unit ID, visit the links below:

\n
\n\n

Display an Interstitial ad to the user

\n

To display an Interstitial ad to the user, follow the steps below:

\n
    \n
  1. Import the InterstitialAd class from @nativescript/firebase-admob.
    2. \n
\n
import { InterstitialAd } from '@nativescript/firebase-admob'
\n
    \n
  1. Create an Interstitial ad instance.
    2. \n
\n

Create an Interstitial ad instance by calling the static createForAdRequest on the class. The createForAdRequest method requires an adUnitId and you can optionally pass a RequestOptions object.

\n
import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
\n
    \n
  1. Listen to the ad lifecycle events
    2. \n
\n

To listen for the ad lifecycle events, such as when the ad is display or dismissed, call the onAdEvent method on the ad instance, before displaying the ad, passing it a callback function to handle the events.

\n
import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})
\n
    \n
  1. Load the ad\nYou load the ad by calling the load method on the ad instance.
    2. \n
\n
import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

ad.load()
\n
    \n
  1. Display the the ad
    2. \n
\n

To display the ad, call the show method on the ad instance. This method is called after the load method.

\n
import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      ad.show()
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

ad.load()
\n

Next steps

\n\n

Native Ads

\n

Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same types of views with which you're already building your layouts, and can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.

\n

Adding a Native ad in NativeScript Core

\n

To add a Native ad to your {N} Core app, follow these steps:

\n
    \n
  1. Register the plugin namespace under a prefix, ui (this can be any name), with the Page element.
    2. \n
\n
<Page xmlns:ui=\"@nativescript/firebase-admob\" >

</Page>
\n
    \n
  1. Use the prefix to access the NativeAdView and add it to markup.
    2. \n
\n
<Page xmlns:ui=\"@nativescript/firebase-admob\" >
<ActionBar title=\"Admob\" />
<StackLayout>

  <ui:NativeAdView height=\"400\" loaded=\"{{nativeAdLoaded}}\" />

</StackLayout>
</Page>
\n

Testing Native ads in development mode

\n
\n

Note: When developing your app, make sure you use test ad unit IDs rather than live, production ads. Failure to do so can lead to suspension of your account. Just make sure you replace the test ad unit ID with your own ad unit ID before publishing your app.

\n
\n

To enable dedicated test ad unit ID, visit the links below:

\n\n
    \n
  1. Import the NativeAdLoader class from @nativescript/firebase-admob in the view model file.
    2. \n
\n
import { NativeAdLoader } from '@nativescript/firebase-admob'
\n

The NativeAdLoader class is an interface for managing the the Native ad.

\n
    \n
  1. Instantiate NativeAdLoader.\nCreate an instance of NativeAdLoader by calling its constructor function. The constructor function accepts 3 parameters. The required adUnitId as the first parameter, optional RequestOptions and NativeAdOptions objects as the second and third parameter, respectively.
    2. \n
\n
const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null, {
  nativeAdOptions: {
    adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT
  }
})
\n
    \n
  1. Listen to the Native ad lifecycle events
    2. \n
\n

To listen to the Native ad lifecycle events, call the onAdEvent method on the NativeAdLoader instance when the NativeAdView has loaded.

\n
<ui:NativeAdView height=\"400\" loaded=\"{{ nativeAdLoaded }}\">
  <GridLayout height=\"300\" width=\"300\">
    <Label id=\"headLineView\" />
    <ui:MediaView id=\"mediaView\" height=\"100%\"/>
    <Label id=\"bodyView\" />
    <Button id=\"callToActionView\" />
  </GridLayout>
</ui:NativeAdView>
\n
nativeAdLoaded(event){
const view = event.object;
loader.onAdEvent((event, error, data) => {
\tif (event === NativeAdEventType.LOADED) {
\t\tconst ad = data as NativeAd;

\t\tconst headLineView = view.getViewById('headLineView');
\t\theadLineView.text = ad.headline;
\t\tconst mediaView = view.getViewById('mediaView');
\t\tview.mediaView = mediaView;
\t\tmediaView.mediaContent = ad.mediaContent;
\t\tconst callToActionButton = view.getViewById('callToActionView');
\t\tview.callToActionView = callToActionButton;
\t\tcallToActionButton.text = ad.callToAction;
\t\tconst bodyView = view.getViewById('bodyView');
\t\tbodyView.text = ad.body;
\t\tview.nativeAd = ad;
\t\tconsole.log('nativead loaded');
\t} else if (event === 'adFailedToLoad') {
\t\tconsole.log('nativead failed to load', error);
\t}
});
}
\n
    \n
  1. Display the Native ad\nTo display the Native ad, call the load method on a NativeAdLoader instance.
    2. \n
\n
loader.load()
\n

NativeAdOptions interface

\n

A NativeAdOptions object is used to set the following options on the native ad.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
returnUrlsForImageAssetsbooleanOptional: If set to true, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to false.
multipleImagesbooleanOptional: Some image assets contain a series of images. Setting this property to true tells the app to display all the images of an asset. The false(the default) value informs the app to display the first image from the series of images in an image asset.
adChoicesPlacementAdChoicesPlacementOptional: The AdChoices overlay is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following:
videoOptionsvideoOptionsOptional: Used to set video options for video assets returned as part of a native ad. If an ad contains a video(if ad.mediaContent.hasVideoContent = true), display the video.
mediaAspectRatioMediaAspectRatioOptional: This sets the aspect ratio for image or video to be returned for the native ad.
\n

AdChoicesPlacement

\n
enum AdChoicesPlacement {
\tTOP_LEFT = 'topLeft',
\tTOP_RIGHT = 'topRight',
\tBOTTOM_RIGHT = 'bottomRight',
\tBOTTOM_LEFT = 'bottomLeft',
}
\n

videoOptions

\n

The videoOptions property is an object with the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeOptional
startMutedbooleanYes
clickToExpandRequestedbooleanYes
customControlsRequestedbooleanYes
\n

MediaAspectRatio

\n
enum MediaAspectRatio {
\tLANDSCAPE = 'landscape',
\tPORTRAIT = 'portrait',
\tSQUARE = 'square',
\tANY = 'any',
}
\n

That's it! Your app is now ready to display native ads.

\n

Next steps

\n\n

Rewarded Ads

\n

Rewarded ads are ads that users have the option of interacting with in exchange for in-app rewards.

\n

Testing Rewarded ads in development mode

\n
\n

Note: When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.

\n
\n

To enable dedicated test ad unit ID, visit the links below:

\n\n

Display a Rewarded ad

\n

Follow these steps to display a Rewarded ad:

\n
    \n
  1. Import the RewardedAd class from @nativescript/firebase-admob.
    2. \n
\n
import { RewardedAd } from '@nativescript/firebase-admob'
\n
    \n
  1. Create a RewardedAd instance
    2. \n
\n

Create a Rewarded ad instance by calling the createForAdRequest static method on the RewardedAd class and passing it the ad unit id.

\n
import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
\n
    \n
  1. Listen to the ad lifecycle events\nBefore you call the load method to load the ad, call the onAdEvent method passing it a callback function to handle the ad events.
    2. \n
\n
import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
    console.log('rewarded', 'loaded')
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})
\n
    \n
  1. Load the ad\nTo load the ad, call the load method on the RewardAd instance.
    2. \n
\n
import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
    console.log('rewarded', 'loaded')
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})
ad.load()
\n
    \n
  1. Display the ad
    2. \n
\n

To show the ad on the screen, call the show() method on the ad instance.

\n
import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
      console.log('rewarded', 'loaded')
      ad.show()
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})
ad.load()
\n

Rewarded ad Events

\n

RewardAd emits the following lifecycle events that you can listen to:

\n
ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})
\n

onAdEvent with the event rewarded_earned_reward'is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.

\n

Targeting

\n

The RequestConfiguration object collects the global configuration for every ad request and is applied by firebase().admob().setRequestConfiguration().

\n

Child-directed ads setting

\n

For child-directed ads setting, read Child-directed setting.

\n

The following example indicates that you want your content treated as child-directed for purposes of COPPA:

\n
import { Admob, RequestConfiguration } from '@nativescript/firebase-admob';
const requestConfiguration: RequestConfiguration = {
  tagForChildDirectedTreatment: true
}
Admob.getInstance().requestConfiguration = requestConfiguration;
\n

Handle ads requests for users under the age of consent

\n

To handle ads requests for users under the age of consent, read Users under the age of consent.

\n

The following example indicates that you want TFUA included in your ad request.

\n
import { Admob, RequestConfiguration } from '@nativescript/firebase-admob';
const requestConfiguration: RequestConfiguration = {
  tagForUnderAgeOfConsent: true
}
Admob.getInstance().requestConfiguration = requestConfiguration;
\n

If the tags to enable the Child-directed setting and tagForUnderAgeOfConsentare both set to true, the child-directed setting takes precedence.

\n

Ad content filtering

\n

This setting can be set via RequestConfiguration.maxAdContentRating:

\n

AdMob ads returned for these requests have a content rating at or below that level. The possible values for this network extra are based on digital content label classifications, and should be one of the following MaxAdContentRating objects:

\n\n

The following code configures a RequestConfiguration object to specify that an ad content returned should correspond to a digital content label designation no higher than G:

\n
import { Admob, MaxAdContentRating, RequestConfiguration } from '@nativescript/firebase-admob';
const requestConfiguration: RequestConfiguration = {
  maxAdContentRating: MaxAdContentRating.G
}
Admob.getInstance().requestConfiguration = requestConfiguration;
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":4,"lastWeek":11,"lastMonth":1761}},"@global66/nativescript-segment":{"name":"@global66/nativescript-segment","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript-Segment

\n

A NativeScript 8.x.x compatible plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

\n\n

Installation

\n
ns plugin add @global66/nativescript-segment
\n

For access to the native SDK type definitions, specify the definitions in your references.d.ts

\n
/// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
/// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
\n

Warning: Depending on your project structure, the paths shown above may be inaccurate.

\n

Usage

\n

Example

\n

All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

\n
const config: SegmentConfig = {
  trackLifeCycleEvents: true,
  recordScreenViews: true,
};
Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
\n
import { Segment } from 'nativescript-segment';

public someInteraction(type: string) {
    Segment.track(type);
}
\n

For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

\n
// iOS
Segment.ios.track(\"some event\");

// Android
Segment.android.track(\"some event\");
\n

Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

\n

Platform specifics

\n

Android

\n

Requires the internet permission if not already enabled in your app.

\n
<uses-permission android:name=\"android.permission.INTERNET\"/>
\n

iOS best practice

\n

In your application's delegate:

\n
import { Segment } from 'nativescript-segment';

public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
    const config = {
        setDebug: true; // set to show full debug logging by the native APIs
    }
    Segment.configure(key, config);
    return true;
}
\n

API

\n

configure

\n
const config: SegmentConfig = {
  trackLifeCycleEvents: true,
  recordScreenViews: true,
};
Segment.configure(\"your segment write key\", config);
\n

SegmentConfig Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
recordScreenViewstrueenable or disable auto tracking of screen views
optionsDefault integration options, see SegmentOptions
proxyUrlnullforward all Segment calls through a proxy
setLoggingfalseset base INFO logging in Android SDK and plugin itself
setDebugfalseSets full debug logging in Android and iOS
middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
\n

SegmentOptions Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
useAlltrueenables all integrations (default for Segment SDKs)
excluded[]exclude Segment from integrating with the specified services
included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
\n

identify

\n

Identify the current user. Additional traits are supported, and custom traits are available.

\n
const traits: SegmentTraits = {
    firstName: 'Dave',
    email: 'dave@domain.com'
};
const customTraits: any {
    favoriteColor: 'blue'
};
Segment.identify('userId', traits, customTraits);
\n

SegmentTraits Properties (all optional)

\n

Please see Segment's official spec for all available traits and their descriptions.

\n

track

\n

Track an event.

\n
Segment.track(\"Some event\");

const properties = {
  productName: \"Bread\",
  revenue: 4,
};
Segment.track(\"Product Purchased\", properties);
\n

Please see Segment's official spec for details on properties to add to track calls.

\n

screen

\n

Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

\n
Segment.screen(\"signup\", \"verify password\");
\n

Please see Segment's official spec for details on screen calls.

\n

group

\n

Associate current user with a group. A user can belong to multiple groups.

\n
Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
  name: \"Initech\",
  industry: \"Technology\",
  employees: 329,
  plan: \"enterprise\",
  \"total billed\": 830,
});
\n

Please see Segment's official spec for details on group calls.

\n

alias

\n

alias is how you associate one identity with another.

\n
Segment.alias(newId);
\n

Please see Segment's official spec for details on alias calls.

\n

optout

\n

Disables or enables all analytics, remains set throughout app restarts.

\n
Segment.optOut(true);
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":55}},"@nativescript/firebase-functions":{"name":"@nativescript/firebase-functions","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-functions

\n

Contents

\n\n

Intro

\n

This plugin allows you to use Firebase Cloud Functions with NativeScript.

\n

\"image\"

\n

Set up your app for Firebase

\n\n\n

Add the Firebase Functions SDK to your app

\n

To add the Cloud Firebase Functions SDK to your app, install the @nativescript/firebase-functions plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-functions
\n

Use @nativescript/firebase-functions

\n

The Cloud Functions module provides the functionality to directly trigger deployed HTTPS callable functions, without worrying about security or implementing an HTTP request library.

\n

Functions deployed to Firebase have unique names, allowing you to easily identify which endpoint you wish to send a request to.

\n

Calling an endpoint

\n

Assuming we have to deploy a callable endpoint named listProducts. To call the endpoint, the library exposes a httpsCallable method. For example:

\n
// Deployed HTTPS callable
exports.listProducts = functions.https.onCall(() => {
\treturn [
\t\t/* ... */
\t\t// Return some data
\t];
});
\n

Within the application, the list of products returned can be directly accessed by passing the name of the endpoint to the httpsCallable method:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-functions';
firebase()
\t.functions()
\t.httpsCallable('listProducts')()
\t.then((response) => {
\t\tsetProducts(response.data);
\t\tsetLoading(false);
\t});
\n

Set and access regional Cloud Functions endpoints

\n

Cloud Functions are regional, which means the infrastructure that runs your Cloud Function is located in specific regions.

\n

By default, functions run in the us-central1 region. To see supported regions, see supported regions.

\n

Set regional function endpoint

\n

To run functions in a different region after initializing Firebase App, set the region using firebase().app().functions(region).

\n

The code below shows an example of setting a regional function endpoint(europe-west2):

\n
// Deployed HTTPS callable
exports.listProducts = functions.region(\"europe-west2\").https.onCall(() => {
\treturn [
\t\t/* ... */
\t\t// Return some data
\t];
});
\n

Access regional function endpoint

\n

To access a regional function endpoint, call the firebase().app().functions(region) method on the Firebase App instance:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-functions';

firebase().initializeApp();
firebase().app().functions(\"europe-west2\");

firebase()
\t.functions()
\t.httpsCallable('listProducts')()
\t.then((response) => {
\t\tsetProducts(response.data);
\t\tsetLoading(false);
\t});
\n

Test Cloud Functions with a local emulator

\n

Whilst developing your application with Cloud Functions, you can run the functions inside of a local emulator.

\n

To call the emulated functions, connect the Cloud Functions to a local emulator by calling the useEmulator method on the Functions instance with the host and port of the emulator.

\n
import { firebase } from '@nativescript/firebase-core';
firebase().functions().useEmulator('localhost', 5000);
\n

API

\n

Functions class

\n

ios

\n
functionsIOs: FIRFunctions = firebase.functions().ios;
\n

A readonly property that returns the native iOS FIRFunctions instance.

\n
\n

android

\n
functionsAndroid: com.google.firebase.functions.FirebaseFunctions = firebase.functions().android;
\n

A readonly property that returns the native Android com.google.firebase.functions.FirebaseFunctions instance.

\n
\n

app

\n
app: FirebaseApp = firebase().functions().app;
\n

A readonly property that returns the FirebaseApp instance associated with the Functions instance.

\n
\n

constructor()

\n
functions: Functions = new Functions(app);
\n

Creates a new Functions instance.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
appFirebaseAppAn optional FirebaseApp instance to use.
\n
\n

httpsCallable()

\n
task: HttpsCallable = firebase().functions().httpsCallable(name, options);

httpsCallable(data).then((response: HttpsCallableResult) => {
\t// Do something with the response
}).catch((error: HttpsCallableError) => {
\tconsole.log(error.code, error.message, error.details);

});
\n

Returns a task function that can be called with optional data. The task function returns a Promise that will be resolved with the result(HttpsCallableResult) of the function execution. If the task fails, the Promise will be rejected with an HttpsCallableError.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
namestringThe name of the reference to the Callable HTTPS trigger.
optionsHttpsCallableOptionsAn optional object that sets the length of timeout, in seconds, for calls for this Functions instance.
\n
\n

useEmulator()

\n
firebase().functions().useEmulator(host, port);
\n

Allows you to test Cloud Functions locally by connecting to the emulator.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
hoststringThe host of the emulator to connect to.
portnumberThe port of the emulator to connect to.
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":1586}},"@nativescript/firebase-database":{"name":"@nativescript/firebase-database","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-database

\n\n

Intro

\n

A plugin that allows you to add Firebase Realtime Databse to your NativeScript app.

\n
\n

Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase.\nNativeScript Firebase provides integration with the Android & iOS Firebase SDKs, supporting both realtime data sync and offline capabilities.

\n
\n

\"image\"

\n

Installation

\n

Install the plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-database
\n

Use @nativescript/firebase-database

\n
\n

Note The Firebase documentation provides great examples of best practices on how to structure your data. We highly recommend reading the guide before building out your database.

\n
\n

Import the plugin

\n

Make the Realtime Database SDK available to your app by importing it once, in the app.ts file.

\n
import '@nativescript/firebase-database'; // only needs to be imported 1x
\n

Create a database instance

\n

To create a new Firebase Database instance, call the database method on the firebase instance as follows:

\n
import { firebase } from '@nativescript/firebase-core';

const database = firebase().database();
\n

By default, this allows you to interact with Firebase Database using the default Firebase App used whilst installing Firebase on your platform. If however you'd like to use a secondary Firebase App, pass the secondary app instance when calling the database method:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-database';

// create secondary app instance
const config = new FirebaseOptions();
const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

const database = firebase().database(secondaryApp);
\n

Get or create a reference

\n

A core concept to understanding Realtime Database is references - a reference to a specific node within your database. A node can be a specific property or sub-nodes.

\n

To create a Reference, call the ref method on the database instance passing it the path of the reference:

\n
import { firebase } from '@nativescript/firebase-core';

const reference = firebase().database().ref('/users/123');
\n

Read a reference data

\n

You can read a reference data in two ways: once or whenever there is a change in the reference or its children.

\n

One-time read

\n

To read the value once, call the once method on a reference passing it the value event name:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.database()
\t.ref('/users/123')
\t.once('value')
\t.then((snapshot) => {
\t\tconsole.log('User data: ', snapshot.val());
\t});
\n

Listen to real-time changes in a reference

\n

To set up an active listener to react to any changes to the node and its children, call the on method passing it the value event as the first parameter and the event handler as the second paramater:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.database()
\t.ref('/users/123')
\t.on('value', (snapshot) => {
\t\tconsole.log('User data: ', snapshot.val());
\t});
\n

The event handler will be called straight away with the snapshot data, and further called when any changes to the node occur.

\n

Listen to events of a reference's child

\n

To listen any of the following events of a reference's child, call the on method on the reference passing it the event name as the first argument and the event handler as the second argument.\npass the event name to the on method as first argument and, as a second argument, pass\nThe above example demonstrates how to subscribe to events whenever a value within the node changes. In some cases, you may need to only subscribe to events whenever a child node is

\n\n

If you are listening to a node with many children, only listening to data you care about helps reduce network bandwidth and speeds up your application.

\n
import { firebase } from '@nativescript/firebase-core';

const onChildAdd = firebase()
\t.database()
\t.ref('/users')
\t.on('child_added', (snapshot) => {
\t\tconsole.log('A new node has been added', snapshot.val());
\t});

// Stop listening for updates when no longer required
firebase().database().ref('/users').off('child_added', onChildAdd);
\n

Remove a reference event listener

\n

To unsubscribe from an event, call the off method on the reference passing it the event name and the function that the on method returned. This can be used within any useEffect hooks to automatically unsubscribe when the hook needs to unsubscribe itself.

\n
import { firebase } from '@nativescript/firebase-core';

const onValueChange = firebase()
\t.database()
\t.ref(`/users/${userId}`)
\t.on('value', (snapshot) => {
\t\tconsole.log('User data: ', snapshot.val());
\t});

// Stop listening for updates when no longer required
firebase().database().ref(`/users/${userId}`).off('value', onValueChange);
\n

Data querying

\n

Realtime Database provides support for basic querying of your data. When a reference node contains children, you can both order & limit the returned results.

\n

If your application requires more advanced query capabilities, it is recommended you use Cloud Firestore. For available query API, see the Query class.

\n

Ordering data

\n

By default, results are ordered based on the node keys. However, if you are using custom keys you can order your data by calling one of the orderBy* methods a Query instance.

\n

For example, if all of the children nodes are scalar values (string, number or boolean) you can use the orderByValue method, and Firebase will automatically order the results. The example below would return the def node before the abc node:

\n
import { firebase } from '@nativescript/firebase-core';

/*
 * {
 *   'scores': {
 *     'abc: 30,
 *     'def': 50,
 *   }
 * }
 */

const scores = await firebase().database().ref('scores').orderByValue().once('value');
\n

Please note that the ordering will not be respected if you do not use the forEach method provided on the DataSnapshot.

\n
scores.forEach((snapShot)=>{
\t// do someting
})
\n

Limit the number of results

\n

You can limit the number of results returned from a query by using one of the limitTo* methods. For example, to limit to the first 10 results, you call the limitToFirst(10) on the reference:

\n
import { firebase } from '@nativescript/firebase-core';

const users = firebase().database().ref('users').limitToFirst(10).once('value');
\n

Firebase also provides the ability to return the last set of results in a query via the limitToLast method.

\n

Instead of limiting to a specific number of documents, you can also start from, or end at a specific reference node value:

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().database().ref('users').orderByChild('age').startAt(21).once('value');
\n

Writing data

\n

You write data to a reference using either the set or update method.

\n

Setting data

\n

Calling the set method on a Reference overwrites all of the existing data at that reference node. The value can be anything; a string, number, object etc:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.database()
\t.ref('/users/123')
\t.set({
\t\tname: 'Ada Lovelace',
\t\tage: 31,
\t})
\t.then(() => console.log('Data set.'));
\n

If you set the value to null, Firebase will automatically class the node as removed, and delete it from the database.

\n

Updating data

\n

Rather than overwriting all existing data, the update method updates any existing data on the reference node. Firebase automatically merges the data depending on what currently exists.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.database()
\t.ref('/users/123')
\t.update({
\t\tage: 32,
\t})
\t.then(() => console.log('Data updated.'));
\n

Generate a new child reference

\n

To generate a new child reference for a reference, call the push on the reference optionally passing the value to store.\nThe push method automatically generates a new key. To store a value in the child reference, call the set method passing the value to store.

\n
import { firebase } from '@nativescript/firebase-core';

const newReference = firebase().database().ref('/users').push();

console.log('Auto generated key: ', newReference.key);

newReference
\t.set({
\t\tage: 32,
\t})
\t.then(() => console.log('Data updated.'));
\n

The keys generated are ordered to the current time, so the list of items returned from Firebase will be chronologically sorted by default.

\n

Remove data from a reference

\n

To remove data from a reference, call the remove method on the reference:

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().database().ref('/users/123').remove();
\n

Optionally, you can also set the value of a reference node to null to remove it from the database:

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().database().ref('/users/123').set(null);
\n

Save data as transactions

\n

Transactions are a way to always ensure a write occurs with the latest information available on the server. Transactions never partially apply writes & all writes execute at the end of a successful transaction.

\n

Imagine a scenario where an app can "like" user posts. Whenever a user presses the "Like" button, the /likes/:postId value (number of likes) on the database increments. Without transactions, we'd first need to read the existing value and then increment that value in two separate operations.

\n

On a high-traffic application, the value on the server could already have changed by the time the operation sets a new value, causing the actual number to not be consistent.

\n

Transactions remove this issue by atomically updating the value on the server. If the value changes whilst the transaction is executing, it will retry. This always ensures the value on the server is used rather than the client value.

\n

To execute a new transaction, call the transaction method on a reference:

\n
import { firebase } from '@nativescript/firebase-core';

function onPostLike(postId) {
\tconst reference = firebase().database().ref(`/likes/${postId}`);

\t// Execute transaction
\treturn reference.transaction((currentLikes) => {
\t\tif (currentLikes === null) return 1;
\t\treturn currentLikes + 1;
\t});
}

// When post \"567\" is liked
onPostLike('567').then((transaction) => {
\tconsole.log('New post like count: ', transaction.snapshot.val());
});
\n

API

\n

Database class

\n

The database class has the following members.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
androidcom.google.firebase.database.FirebaseDatabaseA readonly database instance for Android.
iosFIRDatabaseA readonly database instance for iOS.
appFirebaseAppreadonly
persistenceCacheSizeBytesnumber
persistenceEnabledboolean
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
constructor(app?: FirebaseApp)voidCreates a Firebase Realtime Database instance.
useEmulator(host: string, port: number)voidFor the description, see useEmulator on Firebase documentation.
refFromURL(url: string)ReferenceFor the description, see refFromURL on Firebase documentation.
setLoggingEnabled(enabled: boolean)void
ref(path?: string)ReferenceReturns a Reference instance.
goOffline()voidFor the description, see goOffline on Firebase documentation.
goOnline()voidFor the description, see goOnline on Firebase documentation.
\n

Reference class

\n

The Reference class has the following properties:

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
androidcom.google.firebase.database.ReferenceA readonly native Android instance the Reference class.
iosFIRDatabaseReferenceA readonly native iOS instance the Reference class.
keystringreadonly. For the description, see key on Firebase documentation.
parentReferencereadonly. For the description, see parent on Firebase documentation.
refReferencereadonly. For the description, see ref on Firebase documentation.
rootReferencereadonly. For the description, see root on Firebase documentation.
\n

Methods

\n

The Reference class has the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturns
child(path: string)Reference
onDisconnect()OnDisconnect
push(value?: any, onComplete?: () => void)IThenableReference
remove(onComplete?: (error: FirebaseError) => void)Promise<void>
set(value: any, onComplete?: (error: FirebaseError) => void)Promise<void>
`setPriority(priority: stringnumber, onComplete?: (error: FirebaseError) => void)`
`setWithPriority(newVal: any, newPriority: stringnumber, onComplete?: (error: FirebaseError) => void)`
transaction(transactionUpdate: (currentData: object) => object, onComplete?: (error: FirebaseError, committed: boolean, finalResult: any) => void, applyLocally: boolean = true)Promise<TransactionResult>
update(values: { [key: string]: any }, onComplete?: (error: FirebaseError) => void)Promise<void>
\n

OnDisconnect class

\n
Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
androidcom.google.firebase.database.OnDisconnectreadonly
iosFIRDatabaseReferencereadonly
\n
Methods
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
cancel(onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see cancel on Firebase documentation.
remove(onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see remove on Firebase documentation.
set(value: any, onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see set on Firebase documentation.
`setWithPriority(value: any, priority: stringnumber, onComplete?: (error: FirebaseError) => void)`Promise<void>
update(values: { [key: string]: any }, onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see update on Firebase documentation.
\n

Query class

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
androidcom.google.firebase.database.QueryA readonly Android instance of the Query class.
iosFIRDatabaseQueryA readonly iOS instance of the Query class.
refReferenceA Reference instance to the Query's location.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
`endAt(value: stringnumberboolean, key?: string)`
`equalTo(value: stringnumberboolean, key?: string)`
keepSynced(bool: boolean)
limitToFirst(limit: number)QueryFor the description, see limitToFirst on Firebase documentation.
limitToLast(limit: number)QueryFor the description, see limitToLast on Firebase documentation.
off(eventType?: EventType, callback?: (a: DataSnapshot, b: string) => void, context?: Record<string, any>)void
`on(eventType: EventType, callback: (data: DataSnapshot, previousChildKey: string) => void, cancelCallbackOrContext?: (a: FirebaseError) => voidRecord<string, any>, context?: Record<string, any>)`(a: DataSnapshot, b: string) => void
`once(eventType: EventType, successCallback?: (a: DataSnapshot, b: string) => any, failureCallbackContext?: (a: FirebaseError) => voidRecord<string, any>): Promise`
orderByChild(path: string)QueryFor the description, see orderByChild on Firebase documentation.
orderByKey()QueryFor the description, see orderByKey on Firebase documentation.
orderByPriority()QueryFor the description, see orderByPriority on Firebase documentation.
orderByValue()QueryFor the description, see orderByValue on Firebase documentation.
`startAt(value: stringnumberboolean, key?: string)`
\n

DataSnapShot class

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
androidcom.google.firebase.database.DataSnapshotreadonly
iosFIRDataSnapshotreadonly
keystringreadonly
refReferencereadonly
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
child(path: string)DataSnapshotFor the description, see child.
exists()booleanFor the description, see exists on Firebase documentation.
exportVal()voidFor the description, see exportVal on Firebase documentation.
forEach(action: (child: DataSnapshot) => true)booleanFind the descriptin forEach
getPriority()string | numberFor the description, see getPriority on Firebase documentation.
hasChild(path: string)booleanFor the description, see hasChild on Firebase documentation.
hasChildren() booleanFor the description, see hasChildren on Firebase documentation.
numChildren() numberFor the description, see numChildren on Firebase documentation.
val()voidFor the description, see val on Firebase documentation.
\n

EventType

\n

The EventType consists can be any of the following event names:

\n\n

TransactionResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
snapshotDataSnapshot
committedboolean
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":13,"lastMonth":1620}},"@imagene.me/nativescript-toast":{"name":"@imagene.me/nativescript-toast","version":"2.0.3","license":"MIT","readme":"

Imagene-nativescript-toast based on nativescript-toasty

\n

Install

\n

NativeScript 7.0+

\n

tns plugin add @imagene-me/nativescript-toast

\n

Usage

\n

TypeScript

\n
import { Toasty } from \"@imagene-me/nativescript-toast\"
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty(
    {
        text: 'Toast message',
        variant: ToastVariant.Success
    }
);
toast.show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24,
  },
});
\n

JavaScript

\n
var toasty = require('@imagene-me/nativescript-toast').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n
export enum ToastDuration {
  'Short',
  'Long',
}

export enum ToastVariant {
  'Success' = 'success',
  'Error' = 'error',
}

/**
 * Custom Variant params
 */
export interface ToastVariantParams {
  backgroundColor: string;
  textColor: string;
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Change Toast Variant - default SUCCESS
   */
  variant?: ToastVariant;

  /**
   * Set specific background and text color
   */
  customVariantParams?: ToastVariantParams;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":157}},"@nativescript/firebase-installations":{"name":"@nativescript/firebase-installations","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-installations

\n
npm install @nativescript/firebase-installations
\n

What does it do

\n

The Firebase installations service:

\n\n

Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":18,"lastMonth":1711}},"nativescript-android-fs":{"name":"nativescript-android-fs","version":"1.3.0","license":"MIT","readme":"

NativeScript Android Filesystem

\n

This plugin allows Android apps to work with files and folders in external/shared storage, and it's very easy to use. It works on all Android versions, including 11+.

\n

Features

\n\n

Instalation

\n
tns plugin add nativescript-android-fs
\n

Usage

\n
let storage = require(\"nativescript-android-fs\");
\n

First instructions

\n

This plugin works by copying files to and from internal and external storage. All files you want to save inside a folder in external storage must come from your /data/user/0/com.package.name/files. For example, if you want to transfer "my-image.jpg" to /Pictures, that file must be inside your app internal storage located at /data/user/0/com.package.name/files. You can get the direct path to your app files directory by using this: application.android.context.getFilesDir(), but feel free to use any method you want, as long as it returns the right path to the files folder inside your app internal storage. When you import files to your app, they'll be saved in that folder too.

\n

Android 11

\n

With Android 11, apps don't need to request permission to use public folders, such as Documents, Download, Pictures, Music, etc., but your app can only read and modify files it creates. For example, if someone installs your app and saves a backup in /Documents/backup, and then uninstalls the app, when he installs it again, that backup file can't be used by the app anymore. So let your users know about this important detail.

\n

Also, except for Documents and Download, only the appropriate files format can be saved in Pictures (images), Music (audio), Movies (videos), and other public folders.

\n

Android 10 and below

\n

On Android 10 devices, you can disable scoped storage if you want to by adding the following to your AndroidManifest.xml:

\n
<application android:requestLegacyExternalStorage=\"true\">
\n

For all the other versions below 10, you also need to add the following lines:

\n
<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" android:maxSdkVersion=\"29\"/>
<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" android:maxSdkVersion=\"29\"/>
\n

And, of course, you need to request user permission in your app code. You can use the nativescript-permissions plugin for that task.

\n

List of arguments

\n

Before presenting the functions that you can use in this plugin, let's know their arguments first.

\n

folder

\n

The target folder with or without a subfolder where you want to save files. If the folder or subfolder doesn't exist, it'll be created automatically. On Android 11, only public folders can be created in the root directory. For example, if you target the Download folder but it doesn't exist, the plugin will create it.

\n

Important: Don't mistake Download for Downloads because they're not the same. The latter won't be created on Android 11.

\n

Example:

\n
\"/Documents\"
\"/Documents/myfolder\"
\"/Pictures\"
\n

Always begin the string with a slash "/" but don't include one at the end. If you pass an empty string "", files will be saved in the root directory on Android 10 and below. On Android 11, apps can't use the root directory.

\n

fileName

\n

When saving to external storage, it's the name of the file located in /data/user/0/com.package.name/files. When importing to your app's folder, it's the name of the file located in the external storage.

\n

Example:

\n
\"myfile.txt\"
\"myimage.jpg\"
\n

text

\n

The string with the text you want to write to the file created with the storage.create function.

\n

type

\n

This argument is only used in the storage.content function when you want to retrieve a list of files or directories. So you should specify if it's "file" or "directory" what you want.

\n

Functions

\n

storage.save

\n

It copies a file from /data/user/0/com.package.name/files to external storage.

\n
storage.save(folder, fileName);
\n

Example:

\n
let file = storage.save(\"/Documents\", \"my-file.doc\");

if (file) {

// File copied to external storage

}
\n

If a file with the same name already exists inside the destination folder, it'll be overwritten on Android 10 and below, but on Android 11, the function will fail if your app doesn't own the file.

\n

storage.import

\n

It copies a file from external storage to /data/user/0/com.package.name/files.

\n
storage.import(folder, fileName);
\n

Example:

\n
let file = storage.import(\"/Pictures\", \"my-picture.jpg\");

if (file) { 

// File successfully imported

}
\n

On Android 11, no file will be imported if your app doesn't own the file.

\n

storage.check

\n

It checks if a file exists. It’ll check all files, including the ones not belonging to your app. It’s useful to avoid conflicts in file names because, on Android 11, an app can’t override a file it didn’t create.

\n
storage.check(folder, fileName);
\n

Example:

\n
let file = storage.check(\"/Download\", \"my-file.txt\");

if (file) {

// File exists

}
\n

storage.create

\n

It creates a text file.

\n
storage.create(folder, fileName, text);
\n

Example:

\n
let file = storage.create(\"/Documents\", \"new-file.txt\", \"Hey, this is my file!\");

if (file) {

// File created

}
\n

storage.read

\n

It returns a string with the content of a text file.

\n
storage.read(folder, fileName);
\n

Example:

\n
let text = storage.read(\"/Documents\", \"my-file.txt\");
\n

storage.content

\n

It returns an array with a list of files or directories. On Android 11, you can only retrieve files created by your app.

\n
storage.content(type, folder);
\n

Example:

\n
let files = storage.content(\"file\", \"/Documents\");
let directories = storage.content(\"directory\", \"/DCIM\");
\n

storage.delete

\n

It deletes any file on Android 10 and below, and only the files created by your app on Android 11.

\n
storage.delete(folder, fileName);
\n

Example:

\n
let file = storage.delete(\"/Documents\", \"my-file.doc\");

if (file) {

// File deleted

}
\n

storage.permission (for Android 11 and above)

\n

Before your app can do anything with a file on Android 11, it first needs to know if it has permission. For example, an app can't read, replace, or rename a file without being the owner of that file.

\n
storage.permission(folder, fileName);
\n

Example:

\n
let file = storage.permission(\"/Documents\", \"my-file.doc\");

if (file) {

    // Yes, I can work with that file.
}
\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":33}},"@nativescript/firebase-dynamic-links":{"name":"@nativescript/firebase-dynamic-links","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-dynamic-links

\n\n

Intro

\n

This plugin allows you to add the Firebase Dynamic Links SDK to your app, create dynamic links and receive links that launch a screen on your app.

\n

\"image\"

\n

Set up Firebase and the Dynamic Links SDK

\n\n
\n

Tip For an optimal experience with Dynamic Links, the Firebase Dynamic Links documentation recommends you to enable Google Analytics by adding the Firebase SDK for Google Analytics to your app. To add and use Firebase SDK for Google Analytics in your NativeScript app, see the @nativescript/firebase-analytics plugin documentation.

\n
\n\n

iOS: Confirm that your Firebase project is properly configured

\n

For instructions to confirm that your Firebase project is properly configured to use Dynamic Links for iOS, see configuration step 4.

\n

Use @nativescript/firebase-dynamic-links to create and receive dynamic links

\n

Create a dynamic link from parameters

\n

You can create a dynamic link via the Firebase console, your app or even your custom API. To create a dynamic link from parameters with the plugin, call the buildLink method on the DynamicLinks class instance passing it a literal object of parameters or an instance of DynamiclinkParameters returned by the createLink or createShortLink method.

\n

ShortLinkType

\n
enum ShortLinkType {
\tDEFAULT = 'default',
\tSHORT = 'short',
\tUNGUESSABLE = 'unguessable',
}
\n
\n

buildLink()

\n
dynamicLinks = firebase().dynamicLinks()

link: string = dynamicLinks.buildLink(linkParameters)
\n

Builds a dynamic link from parameters and returns the link as a string. Use the returned link to direct the user to your desired content.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkParametersDynamicLinkParametersThe dynamic link parameters used to create a dynamic link.
\n

onLink()

\n
dynamicLinks: DynamicLinks = firebase().dynamicLinks()
listener = (link: DynamicLink | null, error: FirebaseError | null) => {
\t// handle the link event
}
dynamicLinks.onLink(listener)
\n

Allows you to add a callback function that gets called when your app's screen is launched by a dynamic link.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
listenerOnLinkListenerThe function to be called when the app's screen is launched by a dynamic link.
\n
OnLinkListener type
\n
type OnLinkListener = (link: DynamicLink | null, error: FirebaseError | null) => void;
\n
\n

resolveLink()

\n
dynamicLinks: DynamicLinks = firebase().dynamicLinks()

dynamicLinks.resolveLink(link).then((dynamicLink: DynamicLink)=>{

})
\n

Create the parameters of a dynamic link

\n

As mentioned in the Create a Dynamic Link from parameters section above, you can create a dynamic link's parameters with the createLink or createShortLink method. To create a dynamic link's parameters, call either of the methods with the deep link(the link to open when the dynamic link is clicked) and your URL prefix as the first and second arguments, respectively.

\n
const dynamicLinks = firebase().dynamicLinks()

const link = dynamicLinks.createShortLink('https://docs.nativescript.org', 'https://triniwiz.page.link');

link.social = new DynamicLinkSocialParameters();
link.social.imageUrl = 'https://art.nativescript.org/logo/export/NativeScript_Logo_White_Blue_Rounded.png';

let dynamiLink = await dynamicLinks.buildLink(link)
\n

Receive Dynamic Links

\n

Android: Add intent filters for deep links

\n

To receive a dynamic link with a deep link to your scheme, add an intent-filter to your app's AndroidManifest.xml file located at app/App_Resources/src/main as follows.

\n
<activity ...>
\t....
<intent-filter>
        \t\t<action android:name=\"android.intent.action.VIEW\" />
        \t\t<category android:name=\"android.intent.category.DEFAULT\" />
        \t\t<category android:name=\"android.intent.category.BROWSABLE\" />
        \t\t<data android:scheme=\"YOUR_SCHEME\" />
    \t\t</intent-filter>
</activity>
\n

Add a callback function to receive the links

\n

To receive the deep link that launches a screen of your app, call the onLink method on an instance of the DynamicLinks class with the function to be notified with the link.

\n
const dynamicLinks = firebase().dynamicLinks();

dynamicLinks.onLink((link: DynamicLink) => {
\tconsole.log('onLink', link);
});
\n

API

\n

DynamicLinks class

\n

ios

\n
dynamicLinks = firebase().dynamicLinks()
dynamicLinksIOS: FIRDynamicLinks  = firebase().dynamicLinks().ios
\n

A readonly property that returns the iOS instance of FIRDynamicLinks wrapped by the DynamicLinks class.

\n
\n

android

\n
dynamicLinks = firebase().dynamicLinks()
dynamicLinksAndroid = firebase().dynamicLinks().android
\n

A readonly property that returns the Android instance of FirebaseDynamicLinks wrapped by the DynamicLinks class.

\n
\n

app

\n
dynamicLinks = firebase().dynamicLinks()
dynamicLinksApp: FirebaseApp = firebase().dynamicLinks().app
\n

A readonly property that returns the FirebaseApp instance.

\n
\n

createLink()

\n
dynamicLinks = firebase().dynamicLinks()

dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createLink(link, domainUri)
\n

Creates parameters for a dynamic link and returns a DynamicLinkParameters object to be passed to the method to create a dynamic link.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkstringThe link the app will open when the dynamic link is tapped. For more information, see the description at Dynamic Link parameters.
domainUriPrefixstringYour domain prefix registered under Dynamic Links on Firebase Console.
\n
\n

createShortLink()

\n
dynamicLinks = firebase().dynamicLinks()

dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createShortLink(link, domainUri, shortLinkType)
\n

Creates parameters for a dynamic link and returns a DynamicLinkParameters object to be passed to the method to create a dynamic link.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkstringThe link the app will open when the dynamic link is tapped. For more information, see the description at Dynamic Link parameters.
domainUriPrefixstringYour domain prefix registered under Dynamic Links on Firebase Console.
shortLinkTypeShortLinkTypeOptional
\n

ShortLinkType

\n
enum ShortLinkType {
\tDEFAULT = 'default',
\tSHORT = 'short',
\tUNGUESSABLE = 'unguessable',
}
\n
\n

buildLink()

\n
dynamicLinks = firebase().dynamicLinks()

link: string = dynamicLinks.buildLink(linkParameters)
\n

Builds a dynamic link from parameters and returns the link as a string. Use the returned link to direct the user to your desired content.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkParametersDynamicLinkParametersThe dynamic link parameters used to create a dynamic link.
\n

onLink()

\n
dynamicLinks: DynamicLinks = firebase().dynamicLinks()
listener = (link: DynamicLink | null, error: FirebaseError | null) => {
\t// handle the link event
}
dynamicLinks.onLink(listener)
\n

Allows you to add a callback function that gets called when your app's screen is launched by a dynamic link.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
listenerOnLinkListenerThe function to be called when the app's screen is launched by a dynamic link.
\n
OnLinkListener type
\n
type OnLinkListener = (link: DynamicLink | null, error: FirebaseError | null) => void;
\n
\n

resolveLink()

\n
dynamicLinks: DynamicLinks = firebase().dynamicLinks()

dynamicLinks.resolveLink(link).then((dynamicLink: DynamicLink)=>{

})
\n

Resolves the passed string and returns it as a DynamicLink if it's valid. Otherwise, it returns an error.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkstringThe string to be resolved.
\n
\n

DynamicLinkAnalyticsParameters class

\n

Used to create Analytics parameters for a dynamic link.

\n

ios

\n
ios = dynamicLinkAnalyticsParameters.ios
\n

--

\n

android

\n
android = dynamicLinkAnalyticsParameters.android
\n
\n

campaign

\n
campaign: undefined | string = dynamicLinkAnalyticsParameters.campign
\n
\n

content

\n
content: undefined | string = dynamicLinkAnalyticsParameters.content
// or
\n
\n

source

\n
source: undefined | string = dynamicLinkAnalyticsParameters.source
\n
\n

term

\n
term: undefined | string = dynamicLinkAnalyticsParameters.term
\n

DynamicLinkParameters class

\n

analytics

\n
dynamicAnalytics: DynamicLinkAnalyticsParameters = dynamicLinkParameters.analytics
\n
\n

android

\n
dynamicLinkParametersAndroid: DynamicLinkAnalyticsParameters = dynamicLinkParameters.android
\n
\n

ios

\n
dynamicLinkParametersIOS: DynamicLinkAnalyticsParameters = dynamicLinkParameters.ios
\n
\n

domainUriPrefix

\n
dynamicDomainUriPrefix: string = dynamicLinkParameters.domainUriPrefix
\n

The URL prefix of the dynamic link.

\n
\n

itunes

\n
dynamicLinkITunesParameters: DynamicLinkITunesParameters = dynamicLinkParameters.itunes
\n
\n

navigation

\n
dynamicLinkNavigationParameters: DynamicLinkNavigationParameters = dynamicLinkParameters.navigation
\n

Gets or sets navigation info parameters.

\n
\n

social

\n
dynamicLinkSocialParameters: DynamicLinkSocialParameters = dynamicLinkParameters.social
\n
\n

DynamicLink object

\n

This object represents data of the link received by your app.

\n

ios

\n
linkIOS: FIRDynamicLink = link.ios
\n
\n

android

\n
linkAndroid: com.google.firebase.dynamiclinks.PendingDynamicLinkData  = link.android
\n
\n

minimumAppVersion

\n
minimumAppVersion: string = link.minimumAppVersion
\n

For the description of this property, see the description of getMinimumAppVersion() on the PendingDynamicLinkData class documentation.

\n
\n

url

\n
url: string = link.url
\n

For the description of this property, see the description of getUrl() on the PendingDynamicLinkData class documentation.

\n
\n

utmParameters

\n
utmParameters: Record<string, string> = link.utmParameters
\n

For the description of this property, see the description of getUtmParameters() on the PendingDynamicLinkData class documentation.

\n

Resolves the passed string and returns it as a DynamicLink if it's valid. Otherwise, it returns an error.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
linkstringThe string to be resolved.
\n
\n

DynamicLinkAnalyticsParameters class

\n

Used to create Analytics parameters for a dynamic link.

\n

ios

\n
ios = dynamicLinkAnalyticsParameters.ios
\n

--

\n

android

\n
android = dynamicLinkAnalyticsParameters.android
\n
\n

campaign

\n
campaign: undefined | string = dynamicLinkAnalyticsParameters.campign
\n
\n

content

\n
content: undefined | string = dynamicLinkAnalyticsParameters.content
// or
\n
\n

source

\n
source: undefined | string = dynamicLinkAnalyticsParameters.source
\n
\n

term

\n
term: undefined | string = dynamicLinkAnalyticsParameters.term
\n

DynamicLinkParameters class

\n

analytics

\n
dynamicAnalytics: DynamicLinkAnalyticsParameters = dynamicLinkParameters.analytics
\n
\n

android

\n
dynamicLinkParametersAndroid: DynamicLinkAnalyticsParameters = dynamicLinkParameters.android
\n
\n

ios

\n
dynamicLinkParametersIOS: DynamicLinkAnalyticsParameters = dynamicLinkParameters.ios
\n
\n

domainUriPrefix

\n
dynamicDomainUriPrefix: string = dynamicLinkParameters.domainUriPrefix
\n

The URL prefix of the dynamic link.

\n
\n

itunes

\n
dynamicLinkITunesParameters: DynamicLinkITunesParameters = dynamicLinkParameters.itunes
\n
\n

navigation

\n
dynamicLinkNavigationParameters: DynamicLinkNavigationParameters = dynamicLinkParameters.navigation
\n

Gets or sets navigation info parameters.

\n
\n

social

\n
dynamicLinkSocialParameters: DynamicLinkSocialParameters = dynamicLinkParameters.social
\n
\n

DynamicLink object

\n

This object represents data of the link received by your app.

\n

ios

\n
linkIOS: FIRDynamicLink = link.ios
\n
\n

android

\n
linkAndroid: com.google.firebase.dynamiclinks.PendingDynamicLinkData  = link.android
\n
\n

minimumAppVersion

\n
minimumAppVersion: string = link.minimumAppVersion
\n

For the description of this property, see the description of getMinimumAppVersion() on the PendingDynamicLinkData class documentation.

\n
\n

url

\n
url: string = link.url
\n

For the description of this property, see the description of getUrl() on the PendingDynamicLinkData class documentation.

\n
\n

utmParameters

\n
utmParameters: Record<string, string> = link.utmParameters
\n

For the description of this property, see the description of getUtmParameters() on the PendingDynamicLinkData class documentation.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":40,"lastWeek":246,"lastMonth":2715}},"nativescript-parallax":{"name":"nativescript-parallax","version":"1.4.0","license":"MIT","readme":"

NativeScript Parallax View Plugin for Android & iOS.

\n

\"npm\"\n\"npm\"

\n

Parallax Scroll

\n

\"NativeScript

\n

Parallax Scroll with Anchor.

\n

\"NativeScript

\n

Install

\n

$ tns plugin add nativescript-parallax

\n

Example xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
\t xmlns:parallax=\"nativescript-parallax\"
\tloaded=\"pageLoaded\">
  \t<parallax:ParallaxView controlsToFade=\"headerLabel,headerLabel2\">
\t\t<parallax:Header class=\"header-template\" dropShadow=\"true\">
\t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
\t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
\t\t</parallax:Header>
\t\t<parallax:Anchored class=\"anchor\">
\t\t\t<Label id=\"titleLabel\" text=\"Parallax Template\"></Label>
\t\t</parallax:Anchored>
\t\t<parallax:Content class=\"body-template\">
\t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

\t\t\tUt at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.\">
\t\t\t</TextView>
\t\t</parallax:Content>
\t</parallax:ParallaxView>
</Page>
\n

Example css

\n
#headerLabel2
{
\tfont-size: 45;
\thorizontal-align: center;
\tmargin-top:-25;
\tcolor:#B2EBF2;
}
#headerLabel{
\tfont-size: 45;
\thorizontal-align: center;
\tpadding-top:75;
\tcolor:#B2EBF2;
}
.header-template{
\tbackground-color:#212121;
\tbackground-image:url('~/images/mountains.png');
\tbackground-size: cover;
\theight: 200;
}
.body-template TextView{
\tfont-size:20;
\tpadding:5 15;
\tborder:none;
}
.anchor{
\theight: 55;
\twidth:100%;
\tbackground-color:#616161;
}
#titleLabel{
\tfont-weight:bold;
\tfont-size:25;
\tpadding:5 15;
\tcolor:#fff;

}
\n

To use the parallax plugin you need to first import it into your xml layout with xmlns:parallax="nativescript-parallax"

\n

when using the parallax plugin you need at least two layout views inside of the <parallax:ParallaxView> element. <parallax:Header> and <parallax:Content>. there is an optional third view called\n<parallax:Anchored> which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.

\n

To add views such as labels you want to fade out in the <parallax:Parallaxiew> add the controlsToFade attribute and pass it a comma delimited string with each control ID you want to fade out. In the above example it looks like controlsToFade="headerLabel,headerLabel2" and will fade out both of those labels.

\n

The <parallax:Anchored> has a property called dropShadow if set to true it will create a small drop shadow effect on the bottom of the anchor.

\n

If the inner content of <parallax:Content> isn't long enough to cause the page to scroll. If not it will not show the Parallax effect.

\n

As of version 1.1.0 the bounce/overscroll effect is disable by default to turn it back on set bounce=true on the ParallaxView element.

\n

Events

\n\n

Plugin Development Work Flow.

\n\n

Special thanks to:

\n

Nathanael Anderson for helping with understand how plugins in {N} work.\nAlso Thanks to Nathan Walker for setting up the {N} plugin seed that I used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed\nAlso maybe Steve McNiven-Scott for optimizations, events and getting plugin working on v3+

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":29,"lastMonth":78}},"@nativescript/eslint-plugin":{"name":"@nativescript/eslint-plugin","version":"0.0.4","license":"Apache-2.0","readme":"

NativeScript ESLint Plugin

\n

ESLint rules for NativeScript projects.

\n

Installation and setup

\n
    \n
  1. Install
    2. \n
\n
npm i -D @nativescript/eslint-plugin @typescript-eslint/parser eslint
\n
    \n
  1. Add an .eslintrc.json config file with the following content.
    2. \n
\n

.eslintrc.json

\n
{
  \"parser\": \"@typescript-eslint/parser\",
  \"parserOptions\": {
    \"sourceType\": \"module\",
    \"ecmaVersion\": 2015
  },
  \"plugins\": [\"@nativescript\"],
  \"extends\": [
    \"plugin:@nativescript/recommended\"
  ]
}
\n
    \n
  1. Lint the project.
    2. \n
\n
npx eslint --ext=ts src/
\n

Notice that you need to provide the path to your source code. In the example above, we use src/. Change that to match your project setup.

\n
    \n
  1. Fix all auto-fixable problems.
    2. \n
\n
npx eslint --ext=ts --fix src/
\n
    \n
  1. [Optional] Set up VSCode to use eslint.
    2. \n
\n\n
\"eslint.validate\": [ \"typescript\", \"javascript\" ],
\n","downloadStats":{"lastDay":62,"lastWeek":314,"lastMonth":1555}},"@herefishyfish/requery-sqlite":{"name":"@herefishyfish/requery-sqlite","version":"3.4.2","license":"Apache-2.0","readme":"

Nativescript: Requery Sqlite

\n

\"npm\"\n\"npm\"

\n

Fork of the @nativescript-community/sqlite package to use the requery SQLite implementation which supports modern android SQLite features.

\n

Installation

\n
npm i @herefishyfish/requery-sqlite
\n

Usage

\n

You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

\n
import { openOrCreate, deleteDatabase } from \"@herefishyfish/requery-sqlite\";

const sqlite = openOrCreate(\"path/to/db\");
sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
sqlite.transaction(cancelTransaction => {
    // Calling cancelTransaction will rollback all changes made to db
    names.forEach((name, id) =>
        sqlite.execute(
            \"INSERT INTO names (id, name) VALUES (?, ?)\",
            [id, name]
        )
    );
});
\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":24}},"nativescript-camera":{"name":"nativescript-camera","version":"4.5.0","license":"Apache-2.0","readme":"

NativeScript Camera \"Build

\n

Welcome to the nativescript-camera plugin for NativeScript framework

\n

(Optional) Prerequisites / Requirements

\n\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n

Navigate to project folder and run NativeScript-CLI command

\n
tns plugin add nativescript-camera
\n

Plugin could be added as a standard npm dependency running command

\n
npm install nativescript-camera --save
\n
\n

Note: the --save flag will add the plugin as dependency in your package.json file

\n
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
isAvailable()Is the device camera available to use.
\n

CameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultPlatformDescription
width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
\n
\n

Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

\n
\n

Usage

\n

Requesting permissions

\n

Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

\n
camera.requestPermissions().then(
function success() {
// permission request accepted or already granted 
// ... call camera.takePicture here ...
}, 
function failure() {
// permission request rejected
// ... tell the user ...
}
);
\n
\n

Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

\n
\n
\n

Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

\n
\n
<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
var camera = require(\"nativescript-camera\");
\n
import * as camera from \"nativescript-camera\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to receive image asset

\n
\n
var imageModule = require(\"tns-core-modules/ui/image\");
camera.takePicture()   
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"tns-core-modules/ui/image\";
camera.takePicture().
    then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
var imageModule = require(\"tns-core-modules/ui/image\");

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"tns-core-modules/ui/image\";

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options).
    then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
var isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":11,"lastWeek":94,"lastMonth":601}},"@nativescript/template-hello-world":{"name":"@nativescript/template-hello-world","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript JavaScript Template

\n

This template creates a "Hello, world" NativeScript app using JavaScript.

\n

This is the default template, so you can create a new app that uses it with the --template option:

\n
ns create my-hello-world-js --template @nativescript/template-hello-world
\n

Or without it:

\n
ns create my-hello-world-js
\n
\n

Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-hello-world-js --template nativescript-app-templates/packages/template-hello-world
\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":9,"lastWeek":66,"lastMonth":697}},"@nativescript/firebase-storage":{"name":"@nativescript/firebase-storage","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-storage

\n

Contents

\n\n

Intro

\n

This plugin allows you to use the native Firebase SDKs for Cloud Storage in your Nativescript app.

\n

\"image\"

\n

Set up and initialize Firebase for your app

\n

To use Firebase Cloud Storage, you initialize Firebase first. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Create a default Cloud Storage bucket

\n

To create a default Cloud Storage bucket, follow the instructions at Create a default Cloud Storage bucket.

\n

Add the Firebase Cloud Storage SDK to your app

\n

To add the Cloud Storage SDK to your app, install and import the @nativescript/firebase-storage plugin.

\n
    \n
  1. Install the plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-storage
\n
    \n
  1. To add the Firestore SDK, import the @nativescript/firebase-storage plugin. You should import the plugin once in your app project and the ideal place to do that is the app bootstrapping file( app.ts, main.ts, etc).
    2. \n
\n

Create a Firebase Storage instance

\n

To create a new Storage instance, call the instance getter, storage(), method on the FirebaseApp instance.:

\n
import { firebase } from '@nativescript/firebase-core';

const storage = firebase().storage();
\n

By default, this allows you to interact with Firebase Storage using the default Firebase App used whilst installing Firebase on your platform. However, if you'd like to use a secondary Firebase App, pass the secondary app instance when calling the storage method:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-storage';

// create secondary app instance
const config = new FirebaseOptions();
const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

const storage = firebase().storage(secondaryApp);
\n

You can view your buckets on the Firebase Console.

\n

Creating a file reference

\n

A reference is a local pointer to some file on your bucket. This can either be a file that already exists or one which does not exist yet.

\n\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-storage';

const reference = firebase().storage().ref('black-t-shirt-sm.png');
\n\n
import { firebase } from '@nativescript/firebase-core';
const reference = firebase().storage().ref('/images/t-shirts/black-t-shirt-sm.png');
\n

Upload a file

\n

To upload a file directly from the user's device, follow these steps:

\n
    \n
  1. Create a reference to the file you want to upload.
    2. \n
\n
import { firebase } from '@nativescript/firebase-core';

const reference = firebase().storage().ref('black-t-shirt-sm.png');
\n

-2. Get the path to the file on the users device. For example,

\n
import { knownfolders } from '@nativescript/core';

const pathToFile = knownFolders.documents().getFile('black-t-shirt-sm.png');
const filePath = pathToFile.path;
\n\n
await reference.putFile(filePath);
\n

Dealing with tasks

\n

The putFile method in the preceding example returns a Task object, that allows you to hook into information such as the current upload progress.

\n

Checking upload/download task progress

\n

To check the current task progress, you can listen to the state_changed event on the task:

\n
const task = reference.putFile(pathToFile);

task.on('state_changed', (taskSnapshot) => {
\tconsole.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);
});

task.then(() => {
\tconsole.log('Image uploaded to the bucket!');
});
\n

Pausing & resuming tasks

\n

A task also provides the ability to pause and resume ongoing operations. To pause a task, call the pause method and to resume, call the resume method:

\n
const task = reference.putFile(pathToFile);

task.pause();

// Sometime later...
task.resume();
\n

Generate a new download URL

\n

A common use case for Cloud Storage is to use it as a global Content Delivery Network (CDN) for your images. When uploading files to a bucket, they are not automatically available for consumption via an HTTP URL. To generate a new Download URL, you need to call the getDownloadURL method on a reference:

\n
import { firebase } from '@nativescript/firebase-core';

const url = firebase().storage().ref('images/profile-1.png').getDownloadURL();
\n

List files and directories in bucket reference

\n

To view a full list of the current files & directories within a particular bucket reference, call list on a reference instance. The results are paginated, and if more results are available you can pass a page token into the request:

\n
import { firebase } from '@nativescript/firebase-core';

function listFilesAndDirectories(reference, pageToken) {
\treturn reference.list({ pageToken }).then((result) => {
\t\t// Loop over each item
\t\tresult.items.forEach((ref) => {
\t\t\tconsole.log(ref.fullPath);
\t\t});

\t\tif (result.nextPageToken) {
\t\t\treturn listFilesAndDirectories(reference, result.nextPageToken);
\t\t}

\t\treturn Promise.resolve();
\t});
}

const reference = firebase().storage().ref('images');

listFilesAndDirectories(reference).then(() => {
\tconsole.log('Finished listing');
});
\n

Customizing security rules

\n

By default your bucket will come with rules which allow only authenticated users on your project to access it. You can, however, fully customize the security rules to your application's requirements.

\n

To learn more, see Get started with Firebase Security Rules documentation on the Firebase website.

\n

Switching storage buckets

\n

A single Firebase project can have multiple storage buckets. The module will use the default bucket if no bucket argument is passed to the storage instance. To switch buckets, provide the module with the gs:// bucket URL found on the Firebase Console, under Storage > Files.

\n
import { firebase, FirebaseOptions } from '@nativescript/firebase-core';
const defaultStorageBucket = firebase().storage();
const config = new FirebaseOptions();
config.storageBucket = 'gs://my-secondary-bucket.appspot.com';
const secondaryApp = firebase.app(config, 'SECONDARY_APP');
const secondaryStorageBucket = firebase().storage(secondaryApp);
\n

API

\n

Storage class

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

storageAndroid: com.google.firebase.storage.FirebaseStorage = firebase().storage().android;
\n

A read-only property that returns the underlying native Android object.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

storageIOS: FIRStorage = firebase().storage().ios;
\n

A read-only property that returns the underlying native iOS object.

\n
\n

app

\n
import { firebase } from '@nativescript/firebase-core';

storageApp: FirebaseApp = firebase().storage().app;
\n

A read-only property that returns the FirebaseApp instance to which this Storage belongs.

\n
\n

maxDownloadRetryTime

\n
import { firebase } from '@nativescript/firebase-core';

maxDownloadRetryTime: number = firebase().storage().maxDownloadRetryTime;
// or
\n

Returns or sets the maximum time, in milliseconds, to retry downloads in the case of a failure.

\n
\n

maxOperationRetryTime

\n
import { firebase } from '@nativescript/firebase-core';

maxOperationRetryTime: number = firebase().storage().maxOperationRetryTime;
\n

Returns or sets the maximum time, in milliseconds, to retry operations other than uploads or downloads in the case of a failure.

\n
\n

maxUploadRetryTime

\n
import { firebase } from '@nativescript/firebase-core';

maxUploadRetryTime: number = firebase().storage().maxUploadRetryTime;
\n

Gets or sets the maximum time, in milliseconds, to retry uploads in the case of a failure.

\n
\n

constructor()

\n
import { firebase } from '@nativescript/firebase-core';

new Storage(app);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
appFirebaseAppOptional : The FirebaseApp instance to which this Storage belongs.
\n
\n

useEmulator()

\n
import { firebase } from '@nativescript/firebase-core';

firebase().storage().useEmulator(host, port);
\n

Attempts to connect to the Storage emulator running locally on the given host and port.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
hoststringThe emulator host.
portnumberThe emulator port.
\n
\n

ref()

\n
import { firebase } from '@nativescript/firebase-core';

reference: Reference = firebase().storage().ref(path);
\n

Creates a new storage reference initialized at the root Firebase Storage location, if no path argument is provided, or at the given path if a path argument is provided.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
pathstringOptional : The path to initialize the reference at.
\n
\n

refFromURL()

\n
import { firebase } from '@nativescript/firebase-core';

reference: Reference = firebase().storage().refFromURL(url);
\n

Creates a new storage reference initialized from the specific URL.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
urlstringThe URL to initialize the reference from.
\n
\n

Reference object

\n

android

\n
referenceAndroid: com.google.firebase.storage.StorageReference = reference.android;
\n

A read-only property that returns the underlying native StorageReference object for Android.

\n
\n

ios

\n
referenceIOS: FIRStorageReference = reference.ios;
\n

A read-only property that returns the underlying native StorageReference object for iOS.

\n
\n

bucket

\n
bucket: string = reference.bucket;
\n

A read-only property that returns the name of the bucket containing this reference's object.

\n
\n

fullPath

\n
fullPath: string = reference.fullPath;
\n

A read-only property that returns the full path to this object, not including the Google Cloud Storage bucket.

\n
\n

name

\n
name: string = reference.name;
\n

A read-only property that returns the short name of this object's path, which is the last component of the full path.

\n
\n

parent

\n
parent: Reference = reference.parent;
\n

A read-only property that returns a reference to the parent of the current reference, or null if the current reference is the root.

\n
\n

root

\n
root: Reference = reference.root;
\n

A read-only property that returns a reference to the root of the current reference's bucket.

\n
\n

storage

\n
storage: Storage = reference.storage;
\n

A read-only property that returns the Storage instance associated with the reference.

\n
\n

child()

\n
reference: Reference = reference.child(path);
\n

Returns a reference to a relative path from the current reference. For more information, see child on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
pathstringThe child path.
\n
\n

delete()

\n
reference.delete();
\n

Deletes the object at the current reference's location.

\n
\n

getDownloadURL()

\n
downloadURL: string = await reference.getDownloadURL();
\n

Asynchronously retrieves a long-lived download URL with a revokable token. For more information, see getDownloadUrl on the Firebase website.

\n
\n

getMetadata()

\n
metadata: Metadata = await reference.getMetadata();
\n

Asynchronously retrieves metadata associated with an object at the current reference's location. For more information description about this method, see getMetadata on the Firebase website.

\n

You can find the properties of the Metadata object here.

\n
\n

list()

\n
listResult: ListResult = await reference.list(options);
\n

Returns items (files) and prefixes (folders) under this StorageReference.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
optionsListOptionsOptional : An object to configure the listing operation. The ListOptions properties are described in the list method on the Firebase docs.
\n

ListOptions interface

\n
interface ListOptions {
\tmaxResults: undefined | number;
\tpageToken: undefined | string;
}
\n
\n

listAll()

\n
listResult: ListResult = await reference.listAll();
\n

Asynchronously returns a list of all items (files) and prefixes (folders) under this StorageReference. For more information, see listAll on the Firebase website.

\n
\n

put()

\n
task: Task = reference.put(data, metadata);
\n

Uploads data to this reference's location. For more information, see putBytes on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
dataBlob | Uint8Array | ArrayBufferThe data to upload.
metadataMetadataOptional : The metadata to associate with this upload.
\n
\n

putString()

\n
stringTask: Task = reference.putString(data, format, metadata);
\n

Uploads bytes data from a string to this reference's location.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
datastringThe base64 string to upload .
formatStringFormatThe format of the string to upload.
metadataMetadataOptional : The metadata to associate with this upload.
\n

StringFormat enum

\n
enum StringFormat {
\tRAW = 'raw',
\tBASE64 = 'base64',
\tBASE64URL = 'base64url',
\tDATA_URL = 'data_url',
}
\n
\n

putFile()

\n
fileTask: Task = reference.putFile(path, metadata);
\n

Uploads a file to this reference's location.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
pathstringThe path to the file to upload.
metadataMetadataOptional : The metadata to associate with this upload.
\n
\n

updateMetadata()

\n
updatedMetadata: FullMetadata = await reference.updateMetadata(metadata);
\n

Updates the specified metadata associated with this reference. For more information, see updateMetadata on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
metadataMetadataThe metadata to update.
\n
\n

writeToFile()

\n
fileWriteTask: Task = reference.writeToFile(localFilePath);
\n

Downloads the object at this reference's location to the specified system file path. For more information, see writeToFile on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
localFilePathstringThe path to which the file should be downloaded.
\n
\n

Task object

\n

android

\n
taskAndroid: com.google.firebase.storage.FileDownloadTask.TaskSnapshot | com.google.firebase.storage.UploadTask.TaskSnapshot = task.android;
\n

A read-only property that returns the native Android object.

\n
\n

ios

\n
taskIOS: FIRStorageUploadTask | FIRStorageDownloadTask = task.ios;
\n

A read-only property that returns the native iOS object.

\n
\n

snapshot

\n
taskSnapshot: TaskSnapshot = task.snapshot;
\n
\n

on()

\n
task.on(event, nextOrObserver, error, complete);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventTaskEventThe event name.
nextOrObserver((a: TaskSnapshot) => any) | TaskSnapshotObserverOptional : The observer object or a function to be called on each event.
error(a: FirebaseError) => anyOptional : The function to be called on error.
complete() => voidOptional : The function to be called on completion.
\n

TaskEvent enum

\n
enum TaskEvent {
\tSTATE_CHANGED = 'state_changed',
}
\n

cancel()

\n
cancelled: boolean = task.cancel();
\n

Cancels the current upload or download task.

\n
\n

pause()

\n
paused: boolean = task.pause();
\n

Pauses the current upload or download task.

\n
\n

resume()

\n
resumed: boolean = task.resume();
\n

Resumes the current upload or download task.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":14,"lastMonth":1876}},"@swtc/brorand":{"name":"@swtc/brorand","version":"1.0.0","license":"MIT","readme":"

Brorand

\n

LICENSE

\n

This software is licensed under the MIT License.

\n

Copyright Fedor Indutny, 2014.

\n

Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

\n

The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

\n

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

\n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":19}},"@nativescript/types-minimal":{"name":"@nativescript/types-minimal","version":"8.6.1","license":"Apache-2.0","readme":"

@nativescript/types-minimal

\n

NativeScript 'Minimal' Types for only the latest Android and iOS sdks.

\n","downloadStats":{"lastDay":1,"lastWeek":12,"lastMonth":353}},"@nativescript/firebase-auth":{"name":"@nativescript/firebase-auth","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-auth

\n\n

Intro

\n

A plugin that allows you to add Firebase Authentification to your NativeScript app.

\n

\"image\"

\n
\n

Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase in your app.

\n
\n

Installation

\n

Install the plugin by running the following command in the root directory of your project.

\n
npm install @nativescript/firebase-auth
\n

Use @nativescript/firebase-auth

\n

Before using Firebase Auth, ensure to initialize Firebase.

\n

To create a new Firebase Auth instance, call the auth method on the firebase instance as follow:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth'; // only needs to be imported 1x

const auth = firebase().auth();
\n

By default, this allows you to interact with Firebase Auth using the default Firebase App used whilst installing Firebase on your platform. If, however, you'd like to use a secondary Firebase App, call the auth method with the FirebaseApp instance.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

// create secondary app instance
const config = new FirebaseOptions();
const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

const auth = firebase().auth(secondaryApp);
\n

Listen to the authentication state change

\n

To subscribe to auth state change event, call the addAuthStateChangeListener method on your FirebaseAuth class returned by firebase().auth():

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase().auth()
  .addAuthStateChangeListener((user) => {
    if (!user) {
      console.log('User is currently signed out!');
    } else {
      console.log('User is signed in!');
    }
  }))
\n

Sign a user in anonymously

\n

To sign a user in anonymously, call the signInAnonymously method on the instance of the FirebaseAuth class returned by firebase().auth().

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
\t.auth()
\t.signInAnonymously()
\t.then((cred: [UserCredential]()) => {})
\t.catch((error) => {});
\n

Create a user account with email and password

\n
\n

Note To authenticate a user with email and password, enable Email/Password sign-in provider Firebase Console following the steps below:
1. Go to Firebase Console.
2. Click on your project.
3. On the left sidebar, select Authentication.
4. Click on the Sign-in method tab.
5. Click on the Email\\password provider.
5. Turn Enable switch on.

\n
\n

Next, to create a user account with an email and password, call the createUserWithEmailAndPassword method on the FirebaseAuth instance(firebase().auth()) passing it the user's email and secure password.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
\t.auth()
\t.createUserWithEmailAndPassword('myemail@myemail.com', 'password')
\t.then((cred: [UserCredential]()) => {})
\t.catch((error) => {});
\n

Sign in a user with email and password

\n

To sign in a user with their registered email and password, call signInWithEmailAndPassword method, with the email and password, on firebase().auth()

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
\t.auth()
\t.signInWithEmailAndPassword('myemail@myemail.com', 'password')
\t.then((cred: [UserCredential]()) => {})
\t.catch((error) => {});
\n

Send a user's email verification email

\n

To send an email to the user to request them to verify their email, call the sendEmailVerification method on User object.

\n
const user = firebase().auth().currentUser;

if (user && !user.emailVerified) {
\tuser.sendEmailVerification();
}
\n

Sign a user out

\n

To sign a user out, call the signOut method on firebase().auth().

\n
firebase().auth().signOut()
.then(res => {
  if(res) {
    // user signed out
    return
  }
  // else do staff
});

// OR

let signedOut = await firebase().auth().signOut();
\n

Sign in a user with Apple

\n

Apple announced that any applications using 3rd party login services (such as Facebook, Twitter, Google etc) must also have an Apple Sign-In method. Apple Sign-In is not required for Android devices.

\n\n
import { firebase } from '@nativescript/firebase-core';
import { AppleAuthProvider } from '@nativescript/firebase-auth';
import { signIn, User } from \"@nativescript/apple-sign-in\";

signIn(
    {
        scopes: [\"EMAIL\", \"FULLNAME\"]
    })
    .then((result: User) => {
\t\tconst oauthCredential = AppleAuthProvider.credential(result.identityToken, result.nonce);

\t\tfirebase().auth().signInWithCredential(oauthCredential);
    })
    .catch(err => console.log(\"Error signing in: \" + err));
\n

Sign in with Facebook account

\n\n
import { firebase } from '@nativescript/firebase-core';
import { FacebookAuthProvider } from '@nativescript/firebase-auth';
import { LoginManager, AccessToken } from '@nativescript/facebook';


LoginManager.logInWithPermissions(['public_profile', 'email']).then((result) => {
\t// Once signed in, get the users AccesToken
\tconst data = await AccessToken.currentAccessToken();

\t// Create a Firebase credential with the AccessToken
\tconst facebookCredential = FacebookAuthProvider.credential(data.tokenString);

\t// Sign-in the user with the credential
\treturn firebase().auth().signInWithCredential(facebookCredential);
});

\n
\n

Note: Firebase will not set the User.emailVerified property to true if your user logs in with Facebook. Should your user login using a provider that verifies email (e.g. Google sign-in) then this will be set to true.

\n
\n

Sign in with Twitter account

\n\n
import { firebase } from '@nativescript/firebase-core';
import { TwitterAuthProvider } from '@nativescript/firebase-auth';
import { Twitter, TwitterSignIn } from '@nativescript/twitter';

Twitter.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET'); // called earlier in the app

// Perform the login request
TwitterSignIn.logIn().then((data) => {
\tconst twitterAuthCredential = TwitterAuthProvider.credential(data.authToken, data.authTokenSecret);

\tfirebase().auth().signInWithCredential(twitterAuthCredential);
});

\n

Sign in with GitHub account

\n\n
import { firebase } from '@nativescript/firebase-core';
import { GithubAuthProvider } from '@nativescript/firebase-auth';
const githubAuthCredential = GithubAuthProvider.credential(token);

firebase().auth().signInWithCredential(githubAuthCredential);
\n

Sign in with Google account

\n

Most configuration is already set up when using Google Sign-In with Firebase. However, you need to ensure your machine's SHA1 key has been configured for use with Android. You can see how to generate the key on the Authenticating Your Client documentation.

\n\n
import { firebase } from '@nativescript/firebase-core';
import { GoogleAuthProvider } from '@nativescript/firebase-auth';
import { GoogleSignin } from '@nativescript/google-signin';

GoogleSignin.configure(); // called earlier in the app

GoogleSignin.signIn().then((user) => {
\tconst credential = GoogleAuthProvider.credential(user.idToken, user.accessToken);

\tfirebase().auth().signInWithCredential(credential);
});
\n

Phone number authentication

\n

Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message containing a unique code is sent to the user (using the provided phone number). Once the code has been authorized, the user can sign in into Firebase.

\n
\n

Note: Phone numbers that end users provide for authentication will be sent and stored by Google to improve spam and abuse prevention across Google services, including , but not limited to Firebase. Developers should ensure they have the appropriate end-user consent prior to using the Firebase Authentication phone number sign-in service.

\n
\n

Firebase Phone Authentication is not supported in all countries. Please see their FAQs for more information.

\n

Phone number auth setup

\n

Before starting with Phone Authentication, ensure you have followed these steps:

\n
    \n
  1. Enable Phone as a Sign-In method in the Firebase console.
    2. \n
  2. Android: If you haven't already set your app's SHA-1 hash in the Firebase console, do so. See Authenticating Your Client for information about finding your app's SHA-1 hash.
    3. \n
  3. iOS: In Xcode, enable push notifications for your project & ensure your APNs authentication key is configured with Firebase Cloud Messaging (FCM). To view an in-depth explanation of this step, view the Firebase iOS Phone Auth documentation.
    4. \n
\n

Note; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.

\n

Sign in user with phone number

\n

The user's phone number must be first verified before the user can either sign in or link their account with a PhoneAuthCredential. Verify the phone number by calling the verifyPhoneNumber method with the number. Once the number is verified, pass the verification id and code to Firebase.

\n
import { PhoneAuthProvider } from '@nativescript/firebase-auth';
PhoneAuthProvider.provider()
\t.verifyPhoneNumber('+44 7123 123 456')
\t.then((verificationId) => {
\t\t// present ui to allow user to enter verificationCode
\t\t// use the verificationCode entered by the user to create PhoneAuthCredentials
\t\tconst credential = PhoneAuthProvider.provider().credential(verificationId, verificationCode);
\t\tfirebase().auth().signInWithCredential(credential);
\t});
\n

Testing phone number auth

\n

Firebase provides support for locally testing phone numbers:

\n\n

API

\n

Auth class

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
appFirebaseAppreadonly
currentUserUser | nullreadonly
languageCodebooleanreadonly
settingsAuthSettingsreadonly
tenantIdstringA readonly only property that returns the tenant ID of the Auth class instance. Read more at tenantId.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
useEmulator(host: string, port: number)voidFor the description, see useEmulator on the Firebase documentation.
applyActionCode(code: string)Promise<void>For the description, see applyActionCode on the Firebase documentation.
checkActionCode(code: string)Promise<ActionCodeInfo>For the description, see checkActionCode on the Firebase documentation.
confirmPasswordReset(code: string, newPassword: string)Promise<void>For the description, see confirmPasswordReset on the Firebase documentation.
createUserWithEmailAndPassword(email: string, password: string)Promise<UserCredential>For the description, see createUserWithEmailAndPassword on the Firebase documentation.
fetchSignInMethodsForEmail(email: string)Promise<string[]>For the description, see fetchSignInMethodsForEmail on the Firebase documentation.
isSignInWithEmailLink(emailLink: string)booleanFor the description, see isSignInWithEmailLink on the Firebase documentation.
addAuthStateChangeListener(listener: (user: User) => void)voidFor the description, see onAuthStateChanged on the Firebase documentation.
removeAuthStateChangeListener(listener: (user: User) => void)void
addIdTokenChangeListener(listener: (user: User) => void)voidFor the description, see onIdTokenChanged on the Firebase documentation.
removeIdTokenChangListener(listener: (user: User) => void)void
sendPasswordResetEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendPasswordResetEmail on the Firebase documentation.
sendSignInLinkToEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendSignInLinkToEmail( on the Firebase documentation.
signInAnonymously()Promise<UserCredential>For the description, see signInAnonymously on the Firebase documentation.
signInWithProvider(provider: OAuthProvider)Promise<UserCredential>
getProviderCredential(provider: OAuthProvider)Promise<OAuthCredential>
signInWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see signInWithCredential on the Firebase documentation.
signInWithCustomToken(customToken: string)Promise<UserCredential>For the description, see signInWithCustomToken on the Firebase documentation.
signInWithEmailAndPassword(email: string, password: string)Promise<UserCredential>For the description, see signInWithEmailAndPassword on the Firebase documentation.
signInWithEmailLink(email: string, emailLink: string)Promise<UserCredential>For the description, see signInWithEmailLink on the Firebase documentation.
signOut()booleanSigns the user out.
useUserAccessGroup(userAccessGroup: string)Promise<void>
verifyPasswordResetCode(code: string)Promise<string>For the description, see verifyPasswordResetCode on the Firebase documentation.
\n

User

\n

The user object has the following members.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
uidstringreadonly
displayNamestringreadonly
anonymousbooleanreadonly
emailVerifiedbooleanreadonly
emailstringreadonly
phoneNumber stringreadonly
providerIdstringreadonly
photoURLstringreadonly
metadataUserMetadatareadonly`
providerDataUserInfo[]readonly
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
delete()Promise<void>For the description, see delete on the Firebase documentation.
getIdToken(forceRefresh?: undefined | false | true)Promise<string>For the description, see getIdToken on the Firebase documentation.
getIdTokenResult(forceRefresh?: undefined | false | true)Promise<AuthTokenResult>
linkWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see linkWithCredential on the Firebase documentation.
reauthenticateWithProvider(provider: OAuthProvider)Promise<UserCredential>
reauthenticateWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see reauthenticateWithCredential on the Firebase documentation.
reload()Promise<void>For the description, see reload on the Firebase documentation.
sendEmailVerification(actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendEmailVerification on the Firebase documentation.
unlink(providerId: string)Promise<User>For the description, see unlink on the Firebase documentation.
updateEmail(email: string)Promise<void>For the description, see updateEmail on the Firebase documentation.
updatePassword(password: string) Promise<void>For the description, see updatePassword on the Firebase documentation.
updatePhoneNumber(credential: AuthCredential)Promise<void>For the description, see updatePhoneNumber on the Firebase documentation.
updateProfile(updates: UserProfileChangeRequest)Promise<void>For the description, see updateProfile on the Firebase documentation.
verifyBeforeUpdateEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see verifyBeforeUpdateEmail on the Firebase documentation.
\n

UserCredential

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
additionalUserInfo<AdditionalUserInfo>
user<User>
credential<AuthCredential>
\n

AdditionalUserInfo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
newUserboolean
profileRecord<string, any>
providerIdstring
usernamestring
\n

AuthCredential

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
iosFIRAuthCredential `
androidcom.google.firebase.auth.AuthCredentialreadonly
signInMethodstringreadonly
idTokenstringreadonly
accessTokenstringreadonly
secretstringreadonly
\n

OAuthCredential

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
iosreadonly
androidreadonly
signInMethodstring
idTokenstringreadonly
accessTokenstringreadonly
secretstringreadonly
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":11,"lastWeek":45,"lastMonth":1890}},"nativescript-appinfo":{"name":"nativescript-appinfo","version":"0.4.1","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":50,"lastMonth":151}},"nativescript-local-notifications":{"name":"nativescript-local-notifications","version":"4.2.1","license":"MIT","readme":"

NativeScript Local Notifications Plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n
\n

⚠️ Plugin version 4.0.0 should be used with NativeScript 6+. If you have an older tns --version, please use an older plugin version.

\n
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-local-notifications
\n

Setup (since plugin version 3.0.0)

\n

Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

\n

You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

\n
require (\"nativescript-local-notifications\");
\n

Now you can import the plugin as an object into your .ts file as follows:

\n
// either
import { LocalNotifications } from \"nativescript-local-notifications\";
// or (if that doesn't work for you)
import * as LocalNotifications from \"nativescript-local-notifications\";

// then use it as:
LocalNotifications.hasPermission()
\n

Demo apps

\n

NativeScript-Core (XML)

\n

This demo is the one with the most options, so it's a cool one to check out:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo.ios # or demo.android
\n

NativeScript-Angular

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

There's also a simple Angular demo in this repo:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-ng.ios # or demo-ng.android
\n

NativeScript-Vue

\n

We also have a Vue demo:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-vue.ios # or demo-vue.android
\n

Plugin API

\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Will be generated if not set.
titleThe title which is shown in the statusbar. Default not set.
subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
groupSummaryAn inboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalSet to one of second, minute, hour, day, week, month, year if you want a recurring notification.
iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
\n

NotificationAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idAn id so you can easily distinguish your actions.
typeEither button or input.
titleThe label for type = button.
launchLaunch the app when the action completes.
submitLabelThe submit button label for type = input.
placeholderThe placeholder text for type = input.
\n
  LocalNotifications.schedule([{
    id: 1, // generated id if not set
    title: 'The title',
    body: 'Recurs every minute until cancelled',
    ticker: 'The ticker',
    color: new Color(\"red\"),
    badge: 1,
    groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
    groupSummary:\"Summary of the grouped messages above\", //android only
    ongoing: true, // makes the notification ongoing (Android only)
    icon: 'res://heart',
    image: \"https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg\",
    thumbnail: true,
    interval: 'minute',
    channel: 'My Channel', // default: 'Channel'
    sound: \"customsound-ios.wav\", // falls back to the default sound on Android
    at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
  }]).then(
      function(scheduledIds) {
        console.log(\"Notification id(s) scheduled: \" + JSON.stringify(scheduledIds));
      },
      function(error) {
        console.log(\"scheduling error: \" + error);
      }
  )
\n

Notification icons (Android)

\n

These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

\n

silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

\n

These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.
\n

Source: Density Qualifier Docs

\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
  LocalNotifications.addOnMessageReceivedCallback(
      function (notification) {
        console.log(\"ID: \" + notification.id);
        console.log(\"Title: \" + notification.title);
        console.log(\"Body: \" + notification.body);
      }
  ).then(
      function() {
        console.log(\"Listener added\");
      }
  )
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n

Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

\n
  LocalNotifications.getScheduledIds().then(
      function(ids) {
        console.log(\"ID's: \" + ids);
      }
  )
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
  LocalNotifications.cancel(5 /* the ID */).then(
      function(foundAndCanceled) {
          if (foundAndCanceled) {
            console.log(\"OK, it's gone!\");
          } else {
            console.log(\"No ID 5 was scheduled\");
          }
      }
  )
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
  LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
  LocalNotifications.requestPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
  LocalNotifications.hasPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n","downloadStats":{"lastDay":10,"lastWeek":130,"lastMonth":467}},"@nativescript/template-blank":{"name":"@nativescript/template-blank","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-js --template @nativescript/template-blank
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-js --template nativescript-app-templates/packages/template-blank
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module:

\n\n

There is a single blank page module that sets up an empty layout:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":9,"lastMonth":448}},"@nativescript/google-signin":{"name":"@nativescript/google-signin","version":"2.0.6","license":"Apache-2.0","readme":"

@nativescript/google-signin

\n

Contents

\n\n

Intro

\n

A plugin that allows you to authenticate users with Google Sign-In.

\n

Installation

\n

Install the plugin by running the following command at the root of the project.

\n
npm install @nativescript/google-signin
\n

Android prerequisites

\n
    \n
  1. To use GoogleSignIn for Android, visit Add Firebase to your Android project and follow the 2 steps below.
    2. \n
\n\n

You don't need to include the google-services.json file mentioned in Add a Firebase configuration file in your app unless you are using other Google services that require it.

\n
    \n
  1. Generate debug SHA-1 fingerprint and add it to your Firebase project.
    2. \n
\n

Generate the SHA-1 fingerprint for the debug keystore on your machine and add it to your app's Firebase project. Failure to do so will result in the Error: 10 error.

\n

To generate the SHA-1 fingerprint for the debug keystore with the following commands. For the debug keystore, the password is android.

\n\n
keytool -list -v \\
-alias androiddebugkey -keystore ~/.android/debug.keystore
\n\n
keytool -list -v \\
-alias androiddebugkey -keystore %USERPROFILE%\\.android\\debug.keystore
\n
    \n
  1. Enable the OAuth APIs that you want, using the Google Cloud Platform API manager.\nMake sure you've filled out all the required fields in the console for OAuth consent screen. Otherwise, you may encounter APIException errors.
    2. \n
\n

iOS prerequisites

\n
    \n
  1. \n

    This plugin requires iOS 9.0+.

    \n
    2. \n
  2. \n

    To use GoogleSignIn for iOS, set up the app with Firebase with the following steps at Add Firebase to your Apple project:

    \n
      \n
    1. Create a Firebase project
      2. \n
    2. Register your app with Firebase
      3. \n
    3. Add a Firebase configuration file, GoogleService-Info.plist. to App_Resources/iOS/.
      4. \n
    \n
    3. \n
  3. \n

    Open Xcode

    \n
      \n
    1. Right-click on the Runner directory and select Add Files to Runner.
      2. \n
    2. Select GoogleService-Info.plist from the file manager.
      3. \n
    3. Select the Runner target from the dialog that appears.
      4. \n
    \n
    4. \n
  4. \n

    Add the CFBundleURLTypes and GIDClientID attributes below to the App_Resources/iOS/Info.plist file.

    \n
    5. \n
\n
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleTypeRole</key>
\t\t<string>Editor</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<!-- TODO Replace this value: -->
\t\t\t<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
\t\t\t<string>com.googleusercontent.apps.292142294722-23nmrq9mn8rhpqipjc1bt4qecga3qgsf</string>
\t\t</array>
\t</dict>
</array>
<key>GIDClientID</key>
<!-- Copied from GoogleService-Info.plist key CLIENT_ID -->
<string><749673967192-c24phj29u2otpict36e71ocjo2g5i3hs.apps.googleusercontent.com/string>
<!-- End of the Google Sign-in Section -->
\n
\n

Note that according to https://developer.apple.com/sign-in-with-apple/get-started, starting June 30, 2020, the apps that use login services must also offer a Sign in with Apple option when submitting to the Apple App Store. For that, consider using the@nativescript/apple-sign-in plugin.

\n
\n

Use @nativescript/google-signin

\n

Sign in

\n

To sign in a user with GoogleSignIn, follow the steps below.

\n
    \n
  1. Register and add the GoogleSignInButton to your markup to be able to initiate GoogleSigIn.
    2. \n
\n\n
<Page xmlns:ui=\"@nativescript/google-signin\">
\t<ui:GoogleSigninButton tap=\"handleSignIn\" colorScheme='auto' colorStyle='standard'/>
</Page>
\n\n

Register the button as follows:

\n
import { registerElement } from '@nativescript/angular';
registerElement('GoogleSignInButton', () => require('@nativescript/google-signin').GoogleSignInButton);
\n

Next, add it to your html file setting the desired option for colorScheme and colorStyle as:

\n
<GoogleSignInButton colorScheme='auto' colorStyle='standard' (tap)=\"yourGoogleSigninFunction()\"></GoogleSignInButton>
\n

Vue

\n

To register the button, add the following code to the main.ts file.

\n
registerElement('GoogleSignInButton',()=> require(\"@nativescript/google-signin\").GoogleSignInButton)
\n

Then use it in a .vue file as follows:

\n
<GoogleSignInButton colorScheme='auto' colorStyle='standard' @tap=\"yourGoogleSigninFunction\"></GoogleSignInButton>
\n
    \n
  1. Call the signIn() method on GoogleSignInButton tap
    2. \n
\n

Before you call the signIn() or the signInSilently() method to sign in the user, call configure() to initialize Firebase. If you do want to set any configuration options, you can pass an empty object {} as a parameter to configure.

\n
import { GoogleSignin } from '@nativescript/google-signin';

try {
\tawait GoogleSignin.configure({});
\tconst user = await GoogleSignin.signIn();
} catch (e) {}
\n

Styling the GoogleSignInButton

\n

GoogleSignInButton is a View instance so you can use the View class styling properties. Additionally, the plugin offers the colorScheme and colorStyle properties.

\n

API

\n

GoogleSignIn

\n

The class that provides GoogleSignIn API. It has the following methods:

\n

configure()

\n
await GoogleSignIn.configure(configuration)
\n

Specifies the properties of the sign-in request, such as scopes,accountName, etc.

\n

Call this method before calling the signIn() or signInSilently() method. Call it only once, after your app starts.

\n

The configuration parameter is an optional Configuration object.

\n

Configuration

\n

The Configuration object has the following properties. All properties are optional.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
scopesstring[]
signInOptions'default' | 'games'
clientIdstring
serverClientIdstring
accountNamestring
hostedDomainstring
\n
\n

signIn()

\n
user: User = await GoogleSignin.signIn()
\n

Prompts a modal to let the user sign in into the application.

\n
\n

signInSilently()

\n
user: User = await GoogleSignin.signInSilently()
\n
\n

isSignedIn()

\n
isUserSignedIn: boolean
 = GoogleSignin.isSignedIn()
\n

Checks whether the user is currently signed in.

\n
\n

playServicesAvailable()

\n
isPlayServicesAvailable: boolean = await GoogleSignin.playServicesAvailable();
\n

Checks if device has Google Play Services installed. Always resolves to true on iOS.

\n

Presence of up-to-date Google Play Services is required to show the sign in modal.

\n
\n

signOut()

\n
GoogleSignin.signOut()
\n

Signs out the current user.

\n
\n

disconnect()

\n
await GoogleSignin.disconnect()
\n

Disconnects the current user.

\n
\n

getTokens()

\n
tokens: { idToken: string; accessToken: string;} = await GoogleSignin.getTokens()
\n

Resolves with an object containing { idToken: string, accessToken: string, } or rejects with an error. Note that using accessToken for identity assertion on your backend server is discouraged.

\n
\n

getCurrentUser()

\n
user : User | null = GoogleSignin.getCurrentUser()
\n

This method resolves with null or a User object.

\n

User

\n

The user object has the following members:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringreadonly
displayNamestringreadonly
emailstringreadonly
givenNamestringreadonly
familyNamestringreadonly
idTokenstringreadonly
accessTokenstringreadonly
grantedScopesstring[]readonly
photoUrlstringreadonly
serverAuthCodestringreadonly
requestScopes(scopes: string[])Promise<IUser>See User for the properties of IUser
nativecom.google.android.gms.auth.api.signin.GoogleSignInAccount | GIDGoogleUserPlatform-specific instance.
\n

GoogleSignInButton

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
colorScheme"dark" | "light" | "auto"
colorStyle"standard" | "wide" | "icon"
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":14,"lastWeek":53,"lastMonth":696}},"@akylas/nativescript-audio":{"name":"@akylas/nativescript-audio","version":"6.3.2","license":"Apache-2.0","readme":"\n\n

@akylas/nativescript-audio

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin to record and play audio.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @akylas/nativescript-audio

\n

\n

Installation

\n
ns plugin add @akylas/nativescript-audio
\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Permissions

\n

iOS

\n

You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Android

\n

If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

\n
    <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
\n

\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    // You can pass a duration hint to control the behavior of other application that may
    // be holding audio focus.
    // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
    // Then when you play a song, the previous owner of the
    // audio focus will stop. When your song stops
    // the previous holder will resume.
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function () {
    console.log('finished playing');
  },
  errorCallback: function (errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function (args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log('something went wrong...', err);
  });
\n

\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@akylas/nativescript-audio.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":13,"lastWeek":42,"lastMonth":295}},"@global66/nativescript-sms-receiver":{"name":"@global66/nativescript-sms-receiver","version":"1.1.2","license":"Apache-2.0","readme":"

nativescript-sms-receiver

\n

This is simple library for receiving sms in android with new SMS Retriever API.

\n

Requirements

\n

Minimum sdk is 21.

\n

Installation

\n
tns plugin add nativescript-sms-receiver
\n

Usage

\n

Step 1. Register SMSBroadcastReceiver in manifest file

\n

Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

\n
<receiver android:name=\"com.pravinkumarputta.android.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
\t<intent-filter>
\t\t<action android:name=\"com.google.android.gms.auth.api.phone.SMS_RETRIEVED\"/>
\t</intent-filter>
</receiver>
\n

Step 2. Import SmsReceiver

\n
import { SmsReceiver } from 'nativescript-sms-receiver';
\n

Step 3. Instantiate SmsReceiver

\n

Call this method once before starting SMS listener

\n
SmsReceiver.getInstance();
\n

Note: Call above method only after page loaded.

\n

Step 4. Start SMS listening

\n
// register Sms Listener to get SMS callbacks
SmsReceiver.getInstance().registerListeners(
    function () {
        // onSMSReceiverStarted
        ...
    }.bind(this),
    function (exception) {
        // onSMSReceiverFailed
        ...
    }.bind(this),
    function (message) {
        // onSMSReceived
        ...
            // handle sms here
        ...

        // deregister Sms Listener to avoid invalid operations
        SmsReceiver.getInstance().deregisterListeners();
    }.bind(this),
    function () {
        // onSMSReceiverTimeOut
        ...
    }.bind(this)
);

// start sms receiver for single message
SmsReceiver.getInstance().startReceiver();
\n

Construct a verification message

\n

The verification message that you will send to the user's device. This message must:

\n\n

Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

\n
<#> Your ExampleApp code is: 123ABC78
FA+9qCX9VSu
\n

(For more information visit here)

\n

Generating 11-character hash string for your app

\n

After instantiating SMSReceiver access hash string using:

\n
SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
\n

Request for phone number saved in your device

\n
SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
    // phoneNumber is null if no number is selected.
    ...
})
\n

Used libraries

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":52}},"@nota/nativescript-audioplayer":{"name":"@nota/nativescript-audioplayer","version":"8.4.2","license":"LGPL-3.0","readme":"

Nativescript plugin for Audio playback (Nativescript 8+)

\n

Usage

\n

This plugin is prepared to allow you to test and try it out via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Android Notification

\n

The Android foreground notification channel can be customized via the string resource keys: tns_audioplayer_notification_title and tns_audioplayer_notification_desc. See the demo strings.xml for an example.\nThe notification icon can be set by having a drawable named tns_audioplayer_small_icon or icon (checks in that order) in your App_Resources/Android/src/main/res.

\n

Development

\n

Install typescript: npm install -g typescript

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove @nota/nativescript-audioplayer
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":1607}},"nativescript-accordion":{"name":"nativescript-accordion","version":"6.0.0-beta.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Accordion

\n

\"Buy

\n

Install

\n

tns plugin add nativescript-accordion

\n

Usage

\n

IMPORTANT: Make sure you include xmlns:accordion="nativescript-accordion" on the Page element

\n

Data

\n

By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

\n
this.items = [
      {
        title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
        blah: [
          { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
          { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
        ]
      }
    ]
\n
selectedIndexes = [0,3]
\n

Core

\n
<accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
            <accordion:Accordion.headerTemplate>
                <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                    <Label text=\"{{title}}\"/>
                    <Label col=\"1\" text=\"+\"/>
                </GridLayout>
            </accordion:Accordion.headerTemplate>

            <accordion:Accordion.itemHeaderTemplate>
                <StackLayout>
                    <Label text=\"{{text}}\"/>
                </StackLayout>
            </accordion:Accordion.itemHeaderTemplate>
            
            
            <accordion:Accordion.itemContentTemplate>
                            <StackLayout>
                                <Image src=\"{{image}}\"/>
                            </StackLayout>
              </accordion:Accordion.itemContentTemplate>

            <accordion:Accordion.footerTemplate>
                <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                    <Label text=\"{{footer}}\"/>
                    <Label col=\"1\" text=\"-\"/>
                </GridLayout>
            </accordion:Accordion.footerTemplate>

        </accordion:Accordion>
\n

Multi Template

\n
<accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                             items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                             headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                             itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                             itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                             footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
        >

            <Accordion.headerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.headerTemplates>


            <Accordion.itemHeaderTemplates>
                <template key=\"odd\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemHeaderTemplates>

            <Accordion.itemContentTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemContentTemplates>

            <Accordion.footerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.footerTemplates>

        </accordion:Accordion>
\n

Vue

\n

import Vue from 'nativescript-vue'
import Pager from 'nativescript-accordion/vue'

Vue.use(Pager)
\n
<Accordion row=\"1\" for=\"item of items\">

\t\t\t\t<v-template name=\"header\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"title\">
\t\t\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
\t\t\t\t\t</GridLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template name=\"content\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"footer\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Multi Template

\n
<Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
\t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"header-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"title-even\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t\t\t   :src=\"item.image\"></Image>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"content-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Angular

\n
import { AccordionModule } from \"nativescript-accordion/angular\";

@NgModule({
    imports: [
        AccordionModule
    ]
    })
\n
<Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
\t\t\t</GridLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
\t\t\t<StackLayout>
\t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Multi Template

\n
<Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
\t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
\t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
\t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
\t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
\t>
\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t   [src]=\"item.image\"></Image>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Config

\n
public selectedIndexes = [0,3]
\n
<Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidIOS
\"SS\"\"SS\"
\n","downloadStats":{"lastDay":0,"lastWeek":36,"lastMonth":126}},"@nativescript/template-hello-world-ts":{"name":"@nativescript/template-hello-world-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript TypeScript Template

\n

This template creates a NativeScript app with the NativeScript hello world example,\nhowever, in this template the example is built with TypeScript.

\n

You can create a new app that uses this template with either the --template option.

\n
ns create my-hello-world-ts --template @nativescript/template-hello-world-ts
\n

Or the --tsc shorthand.

\n
ns create my-hello-world-ts --tsc
\n
\n

Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-hello-world-ts --template nativescript-app-templates/packages/template-hello-world-ts
\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":5,"lastWeek":31,"lastMonth":586}},"nativescript-pager":{"name":"nativescript-pager","version":"12.0.0-alpha.9","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Pager

\n

Install

\n

NativeScript 6x

\n\n

NativeScript 5x

\n\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Usage

\n

Note v11+

\n
Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
\n

IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

\n
<pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <pager:Pager.itemTemplate>
                <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label text=\"{{title}}\"/>
                    <Image row=\"1\" src=\"{{image}}\"/>
                </GridLayout>
            </pager:Pager.itemTemplate>
</pager:Pager>
\n

Multi Template

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
      <Pager.itemTemplates>
        <template key=\"even\">
          <GridLayout rows=\"auto,auto,*\" columns=\"*\">
            <Label text=\"Even\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
        <template key=\"odd\">
          <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
            <Label text=\"Odd\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <StackLayout row=\"2\">
              <Label text=\"{{image}}\"/>
            </StackLayout>
            <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
      </Pager.itemTemplates>
      <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
    </c:Pager>
\n

Static Views

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                 showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <c:PagerItem backgroundColor=\"red\">
                <Label text=\"First\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"white\">
                <Label text=\"Second\" ></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"black\">
                <Label text=\"Third\" color=\"white\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"green\">
                <Label text=\"Fourth\"></Label>
            </c:PagerItem>
        </c:Pager>
\n

Vue

\n
import Vue from 'nativescript-vue';
import Pager from 'nativescript-pager/vue';

Vue.use(Pager);
\n
<template>
    <Pager for=\"item in items\">
        <v-template>
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Label :text=\"item.title\" />
                <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
            </GridLayout>
        </v-template>
        <v-template if=\"$odd\">
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Image  stretch=\"fill\" :src=\"item.image\" />
                <Label :text=\"item.title\" row=\"1\"/>
            </GridLayout>
        </v-template>
    </Pager>
</template>
\n

Static Views

\n
<Pager height=\"100%\" :selectedIndex=\"1\">
  <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
  <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
  <PagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </PagerItem>
  <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
</Pager>
\n

Angular

\n
import { PagerModule } from \"nativescript-pager/angular\";

@NgModule({
    imports: [
    PagerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Angular v2

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </template>
</Pager>
\n

Angular v4+

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <ng-template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Multi Template

\n
 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }
\n
<Pager
  row=\"1\"
  [items]=\"items | async\"
  [itemTemplateSelector]=\"templateSelector\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
  backgroundColor=\"lightsteelblue\"
>
  <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
    <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
      <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>

  <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto,auto,auto,*\"
      columns=\"*\"
      backgroundColor=\"white\"
    >
      <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
      <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Static Views

\n
<Pager
  backgroundColor=\"orange\"
  row=\"1\"
  #pager
  [selectedIndex]=\"1\"
  height=\"100%\"
>
  <StackLayout *pagerItem backgroundColor=\"red\">
    <label text=\"First\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"white\">
    <label text=\"Second\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"green\">
    <label text=\"Fourth\"></label>
  </StackLayout>
</Pager>
\n

React

\n
import {$Pager} from 'nativescript-pager/react';
return (
<$Pager
                height={{ unit: \"%\", value: 100 }}
                   selectedIndex={this.selectedIndex}
                   selectedIndexChange={this.selectedIndexChange.bind(this)}
                    items={this.items}
                     cellFactory={
                    (item, ref) => {
                        return (
                            <$StackLayout id={item.title} ref={ref}>
                                <$Label text={item.title}/>
                                <$ImageCacheIt stretch={'aspectFill'}
                                        src={item.image}/>
                            </$StackLayout>
                        );
                    }
                }/>
)
\n

Static Views

\n
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                           <$PagerItem backgroundColor={'red'}>
                               <$Label text={'First'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'white'}>
                               <$Label text={'Second'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'black'}>
                               <$Label text={'Third'} color={new Color('white')}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'green'}>
                               <$Label text={'Fourth'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'pink'}>
                               <$Label text={'Fifth'}/>
                           </$PagerItem>
                       </$Pager>)
\n

Config

\n
<Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"ios\"\"android\"
\n","downloadStats":{"lastDay":8,"lastWeek":122,"lastMonth":432}},"nativescript-plugin-appsflyer":{"name":"nativescript-plugin-appsflyer","version":"6.12.7","license":{"type":"MIT","url":"https://github.com/AppsFlyerSDK/nativescript-plugin-appsflyer/blob/master/LICENSE"},"readme":"\n

appsflyer-nativescript-plugin

\n

Nativescript Library for AppsFlyer SDK

\n

\"npm

\n

Table of content

\n\n

This plugin is built for

\n\n

Breaking Changes

\n

v6.5.4

\n

Android: deepLinkResult will return an object instead of a string

\n

Installation

\n

$ tns plugin add nativescript-plugin-appsflyer

\n

Integration

\n
\n

Call module by adding (native javascript):

\n

var appsFlyer = require("nativescript-plugin-appsflyer");

\n
\n
appsFlyer.initSdk(options, callback): void
\n

initializes the SDK.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectSDK configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
nametypedefaultdescription
devKeystringAppsflyer Dev key
appIdstringApple Application ID (for iOS only)
isDebugbooleanfalsedebug mode (optional)
onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
onConversionDataFailurefunction
\n

Example:

\n
 var options = {
            devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
            appId: \"975313579\",
            isDebug: true,
            timeToWaitForATTUserAuthorization: 60,
            onConversionDataSuccess: function(_res){
                console.log(JSON.stringify(_res));
            },
            onConversionDataFailure: function(_res){
                console.warn(\"failure: \" + JSON.stringify(_res));
            },
        };

        appsFlyer.initSdk(options).then(function(result) {
            viewModel.set(\"initSdkResponse\", result.status);
        }, function(err) {
            viewModel.set(\"initSdkResponse\", JSON.stringify(err));
        });
\n
\n
appsFlyer.logEvent(options): Promise<any>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectlog event configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
eventValuesObjectevent details (see example bellow)
\n

Example: (native javascript)

\n
 
        var options = {
            eventName: \"af_add_to_cart\",
            eventValues: {
                \"af_content_id\": \"id123\",
                \"af_currency\": \"USD\",
                \"af_revenue\": \"2\"
            }
        };
        appsFlyer.logEvent(options).then(function(result) {
            viewModel.set(\"logEventResponse\", result);
        }, function(err) {
            viewModel.set(\"logEventResponse\", JSON.stringify(err));
        });
\n

Demo

\n

This plugin has a demo project bundled with it. To give it a try , clone this repo and from root a.e. nativescript-plugin-appsflyer execute the following:

\n
npm run setup
\n\n","downloadStats":{"lastDay":2,"lastWeek":48,"lastMonth":152}},"@open-native/core":{"name":"@open-native/core","version":"1.0.0-alpha.38","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":155,"lastWeek":687,"lastMonth":3609}},"@nativescript/firebase-remote-config":{"name":"@nativescript/firebase-remote-config","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-remote-config

\n

Contents

\n\n

Intro

\n

This plugin allows you to use the Firebase Remote Config API in your NativeScript app.

\n

\"image\"

\n

Set up your app for Firebase

\n

You need to set up your app for Firebase before you can enable Firebase Remote Config. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Add the Firebase Remote Config SDK to your app

\n

To add the Firebase Remote Config to your app, follow these steps:

\n
    \n
  1. Install the @nativescript/firebase-remote-config plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-remote-config
\n
    \n
  1. Add the SDK by importing the @nativescript/firebase-remote-config module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-remote-config';
\n

Create in-app default parameters

\n

Default in-app values help ensure that your application code runs as expected in scenarios where the device has not yet retrieved the values from the remote server.

\n

To create default in-app Remote Config parameters, follow the steps:

\n
    \n
  1. Firebase Console and select your project.
    2. \n
  2. On the Remote Config dashboard, click Create configuration to create a parameter.
    3. \n
  3. You can add default in-app parameter values through either of the two options below. In both options, add the values to the Remote Config object early in your app's lifecycle, ideally in your bootstrap file (e.g. app.ts or main.ts)\n
      \n
    1. Download and add the .xml file with the parameter values to your app.\n
        \n
      • Add the in-app default parameters in the .xml file to the Remote Config object by calling the setDefaultsFromResource method.
        • \n
      \n
      import { firebase } from '@nativescript/firebase-core';

      firebase()
      \t.remoteConfig()
      \t.setDefaultsFromResource(\"remote_config_defaults\")
      \t.then(() => {
      \t\tconsole.log('Default values set.');
      \t});
      \n
      2. \n
    2. Add the in-app parameter values to the Remote Config object by passing them in an object to the setDefaults method.
      import { firebase } from '@nativescript/firebase-core';

      firebase()
      \t.remoteConfig()
      \t.setDefaults({
      \t\tawesome_new_feature: 'disabled',
      \t})
      \t.then(() => {
      \t\tconsole.log('Default values set.');
      \t});
      \n
      3. \n
    \n
    4. \n
\n

Set parameter values in the Remote Config backend

\n

To create new server-side default values that override the in-app values, see Set parameter values in the Remote Config backend

\n

Fetch and activate values

\n

Once you've created your parameters in the Remote Config backend, you can fetch them from the server and activate them in your app. You can first fetch the values from the server and then activate them, or you can combine the two tasks into a single flow with the fetchAndActivate method.

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.remoteConfig()
\t.setDefaults({
\t\tawesome_new_feature: 'disabled',
\t})
\t.then(() => remoteConfig().fetchAndActivate())
\t.then((fetchedRemotely) => {
\t\tif (fetchedRemotely) {
\t\t\tconsole.log('Configs were retrieved from the backend and activated.');
\t\t} else {
\t\t\tconsole.log('No configs were fetched from the backend, and the local configs were already activated');
\t\t}
\t});
\n

Set a minimum fetch interval

\n

Although Remote Config is a data storage, it is not designed for frequent reads. By default, Firebase caches the parameters for 12 hours. By design, this prevents the values from being able to change frequently and potentially causes users confusion.

\n\n
import { firebase } from '@nativescript/firebase-core';
// Fetch and cache for 5 minutes
await firebase().remoteConfig().fetch(300);
\n\n
\n

Note Be warned Firebase may start to reject your requests if values are requested too frequently.

\n
\n\n
import { firebase } from '@nativescript/firebase-core';
remoteConfig().settings.minimumFetchIntervalMillis = 30000;
\n

Reading parameters values

\n

To read the fetched and activated parameters in your app, you can Read a single parameter or Read all parameters at once.

\n

Read a single parameter

\n

To read a single parameter value from the activated parameter values, call the getValue method on the Remote Config object. The getValue method returns a ConfigValue object, which you can use to get the value as a specific type (e.g. string, number, boolean, etc).

\n
import { firebase } from '@nativescript/firebase-core';

const awesomeNewFeature = firebase().remoteConfig().getValue('awesome_new_feature');

// resolves value to string
if (awesomeNewFeature.asString() === 'enabled') {
\tenableAwesomeNewFeature();
}
// resolves value to number
// if it is not a number or source is 'static', the value will be 0
if (awesomeNewFeature.asNumber() === 5) {
\tenableAwesomeNewFeature();
}
// resolves value to boolean
// if value is any of the following: '1', 'true', 't', 'yes', 'y', 'on', it will resolve to true
// if source is 'static', value will be false
if (awesomeNewFeature.asBoolean() === true) {
\tenableAwesomeNewFeature();
}
\n

Read all parameters at once

\n

To read all the parameters from the Remote Config object at once, call the getAll method. The getAll method returns an object with the parameter keys as the object keys and the ConfigValue objects as the object values.

\n
import { firebase } from '@nativescript/firebase-core';

const parameters = firebase().remoteConfig().getAll();

Object.entries(parameters).forEach((item) => {
\tconst [key, entry] = item;
\tconsole.log('Key: ', key);
\tconsole.log('Source: ', entry.getSource());
\tconsole.log('Value: ', entry.asString());
});
\n

Get the source of a parameter's value

\n

When a value is read, it contains source data about the parameter. If a value is read before it has been fetched & activated then the value will fall back to the default in-app value set. If you need to validate whether the value returned from the module was local or remote, call the getSource method on the ConfigValue object:

\n
import { firebase } from '@nativescript/firebase-core';

const awesomeNewFeature: ConfigValue = firebase().remoteConfig().getValue('awesome_new_feature');

if (awesomeNewFeature.getSource() === 'remote') {
\tconsole.log('Parameter value was from the Firebase servers.');
} else if (awesomeNewFeature.getSource() === 'default') {
\tconsole.log('Parameter value was from a default value.');
} else {
\tconsole.log('Parameter value was from a locally cached value.');
}
\n

API

\n

RemoteConfig class

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigAndroid: com.google.firebase.remoteconfig.FirebaseRemoteConfig = firebase().remoteConfig().android;
\n

A read-only property that returns the naive object for Android wrapped by the instance of the RemoteConfig class.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigIos: FIRRemoteConfig = firebase().remoteConfig().ios;
\n

A read-only property that returns the naive object for iOS wrapped by the instance of the RemoteConfig class.

\n
\n

app

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigApp: FirebaseApp = firebase().remoteConfig().app;
\n

A read-only property that returns the FirebaseApp instance for the current app.

\n
\n

fetchTimeMillis

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigFetchTimeMillis: number = firebase().remoteConfig().fetchTimeMillis;
\n

A read-only property that returns the timestamp (milliseconds since epoch) of the last successful fetch, regardless of whether the fetch was activated or not.

\n
\n

lastFetchStatus

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigLastFetchStatus: 'success' | 'failure' | 'no_fetch_yet' | 'throttled' = firebase().remoteConfig().lastFetchStatus;
\n

A read-only property that returns the status of the most recent fetch attempt.

\n
\n

settings

\n
import { firebase } from '@nativescript/firebase-core';

remoteConfigSettings: ConfigSettings = firebase().remoteConfig().settings;
// or
firebase().remoteConfig().settings = {
\tfetchTimeMillis: 43200000,
\tminimumFetchIntervalMillis: 30000,
};
\n

Gets or sets the settings for this RemoteConfig instance.

\n
\n

activate()

\n
import { firebase } from '@nativescript/firebase-core';

activated: boolean = await firebase().remoteConfig().activate();
\n

Asynchronously activates the most recently fetched configs, so that the fetched key-value pairs take effect. For more information, see activate() on the Firebase website.

\n
\n

ensureInitialized()

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().remoteConfig().ensureInitialized();
\n
\n

fetch()

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().remoteConfig().fetch(expirationDurationSeconds);
\n

Fetches parameter values from the Remote Config backend, adhering to the default or specified minimum fetch interval. For more information, see fetch() on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
expirationDurationSecondsnumber
\n
\n

fetchAndActivate()

\n
import { firebase } from '@nativescript/firebase-core';

activated: boolean = await firebase().remoteConfig().fetchAndActivate();
\n

Asynchronously fetches and then activates the fetched configs. For more information, see fetchAndActivate() on the Firebase website.

\n
\n

getAll()

\n
import { firebase } from '@nativescript/firebase-core';

parameters: Record<string, ConfigValue> = firebase().remoteConfig().getAll();
\n

Returns an object with all the parameters in the Remote Config.

\n
\n

getBoolean()

\n
import { firebase } from '@nativescript/firebase-core';

value: boolean = firebase().remoteConfig().getBoolean(key);
\n

Returns the parameter value for the given key as a boolean.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
keystringThe key of the parameter to get.
\n
\n

getNumber()

\n
import { firebase } from '@nativescript/firebase-core';

value: number = firebase().remoteConfig().getNumber(key);
\n

Returns the parameter value for the given key as a number.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
keystringThe key of the parameter to get.
\n
\n

getString()

\n
import { firebase } from '@nativescript/firebase-core';

value: string = firebase().remoteConfig().getString(key);
\n

Returns the parameter value for the given key as a string.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
keystringThe key of the parameter to get.
\n
\n

getValue()

\n
import { firebase } from '@nativescript/firebase-core';

value: ConfigValue = firebase().remoteConfig().getValue(key);
\n

Returns the parameter value for the given key as a ConfigValue.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
keystringThe key of the parameter to get.
\n
\n

reset()

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().remoteConfig().reset();
\n

Deletes all activated, fetched and default configurations and resets all Firebase Remote Config settings.

\n
\n

setDefaults()

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().remoteConfig().setDefaults(defaults);
\n

Sets default configs from a ConfigDefaults object.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
defaultsConfigDefaultsThe default configs object to set.
\n

ConfigDefaults

\n
interface ConfigDefaults {
\t[key: string]: number | string | boolean;
}
\n
\n

setDefaultsFromResource()

\n
import { firebase } from '@nativescript/firebase-core';

await firebase().remoteConfig().setDefaultsFromResource(resourceName);
\n

Sets default configs using an XML resource.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
resourceNamestringThe resource name of the XML resource in the package's res folder.
\n
\n

ConfigValue object

\n

This object is returned by the getValue() method and represents a parameter value for a given key. It provides several methods to get the value as a boolean, number or string.

\n

android

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

configValueAndroid: com.google.firebase.remoteconfig.FirebaseRemoteConfigValue = configValue.android;
\n

Returns an instance of ConfigValue for Android.

\n
\n

ios

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

configValueIOS: FIRRemoteConfigValue = configValue.ios;
\n

Returns an instance of ConfigValue for iOS.

\n
\n

asBoolean()

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

value: boolean = configValue.asBoolean();
\n

Gets the parameter value as a boolean.

\n
\n

asNumber()

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

value: number = configValue.asNumber();
\n

Gets the parameter value as a number.

\n
\n

asString()

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

value: string = configValue.asString();
\n

Gets the parameter value as a string.

\n
\n

getSource()

\n
configValue: ConfigValue = firebase().remoteConfig().getValue(key)

source: 'default' | 'static' | 'remote' = configValue.getSource();
\n

Gets the source of the parameter value.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":24,"lastWeek":120,"lastMonth":2150}},"@valor/nativescript-feedback":{"name":"@valor/nativescript-feedback","version":"2.0.2","license":"MIT","readme":"

NativeScript Feedback

\n

This is a fork from https://github.com/EddyVerbruggen/nativescript-feedback with updated dependencies. Huge thanks to @EddyVerbruggen for the great work as always!

\n

       \n

\n

iOS and Android running the included demo - much better framerate on YouTube!

\n

Installation

\n
tns plugin add @valor/nativescript-feedback
\n

API

\n

requiring / importing the plugin

\n

JavaScript

\n
var FeedbackPlugin = require(\"@valor/nativescript-feedback\");
var feedback = new FeedbackPlugin.Feedback();
\n

TypeScript

\n
import { Feedback, FeedbackType, FeedbackPosition } from \"@valor/nativescript-feedback\";

export class MyClassWithFeedback {
  private feedback: Feedback;
  
  constructor() {
    this.feedback = new Feedback();
  }
}
\n

show

\n

Showing feedback can be as easy as:

\n
this.feedback.show({
  message: \"Easiest thing ever, right?\"
});
\n

That uses a bunch of sane defaults.\nHowever, there are a lot of things you may want to tweak. All of which are optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
titleundefinedThe bold title at the top.
titleColornew Color("white")The title's color.
titleFontBold system fontiOS needs the font name and android the file name. See the demo for examples.
titleSize16The size of the title font.
messageundefinedThe message below the title.
messageColornew Color("white")The message's color.
messageFontSystem fontiOS needs the font name and android the file name. See the demo for examples.
messageSize13The size of the message font.
duration4000The duration to show the feedback (milliseconds).
typeFeedbackType.CustomOne of .Custom, .Success, .Warning, .Error, .Info. Each with a distinct style as show in the animations above. You can still override all other properties according to your liking.
positionFeedbackPosition.TopEither .Top or .Bottom.
backgroundColorDepends on the typeThe background's color.
iconDepends on the typeA custom icon shown on the left. Loaded from App_Resources/<platform> folders. Example here. Want no icon at all? Don't set a type.
android.iconColorSee descriptionOn iOS the icon color is as-is, but on Android it's white. Set this color to override the latter (also see the TypeScript example below).
android.iconPulseEnabledtrueOn Android you can disable the pulsating effect of the icon.
onTapundefinedA callback function that gets invoked when the user tapped your feedback.
onShowundefinedA callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done.
onHideundefinedA callback for when the feedback is hidden.
\n

One of the examples in the demo app shows a custom icon and alternative colors. You'd get there by doing:

\n

JavaScript

\n
var FeedbackType = require (\"@valor/nativescript-feedback\").FeedbackType;
var FeedbackPosition = require (\"@valor/nativescript-feedback\").FeedbackPosition;
var color = require(\"color\");

this.feedback.show({
  title: \"Thumbs up!\",
  titleColor: new color.Color(\"#222222\"),
  position: FeedbackPosition.Bottom, // iOS only
  type: FeedbackType.Custom, // this is the default type, by the way
  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
  messageColor: new color.Color(\"#333333\"),
  duration: 3000,
  backgroundColor: new color.Color(\"yellowgreen\"),
  icon: \"customicon\", // in App_Resources/platform folders
  onTap: function() { console.log(\"showCustomIcon tapped\") },
  onShow: function(animating) { console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\") },
  onHide: function() { console.log(\"showCustomIcon hidden\") }
});
\n

TypeScript

\n
import { FeedbackType, FeedbackPosition } from \"@valor/nativescript-feedback\";
import { Color } from \"tns-core-modules/color\";

this.feedback.show({
  title: \"Thumbs up!\",
  titleColor: new Color(\"#222222\"),
  position: FeedbackPosition.Bottom,
  type: FeedbackType.Custom, // this is the default type, by the way
  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
  messageColor: new Color(\"#333333\"),
  duration: 3000,
  backgroundColor: new Color(\"yellowgreen\"),
  icon: \"customicon\", // in App_Resources/platform folders
  android: {
    iconColor: new Color(\"#222222\") // optional, leave out if you don't need it
  },
  onTap: () => console.log(\"showCustomIcon tapped\"),
  onShow: animating => console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\"),
  onHide: () => console.log(\"showCustomIcon hidden\")
});
\n

hide

\n

Hiding a message can be done automatically (see duration), by a gesture (tap / swipe), or programmatically as shown here:

\n
this.feedback.hide();
\n

Convenience functions

\n

Since in many cases you want to only show success / info / warning / error messages anyway, this plugin's got you covered. You can call any of these functions and still pass in any of the aforementioned properties to tweak it to your liking:

\n

success

\n
this.feedback.success({
  title: \"Awesome\",
  message: \"That was great!\"
});
\n

info

\n
this.feedback.info({
  title: \"Info <> Data\",
  message: \"Info is relevant data, not just any data.\"
});
\n

warning

\n
this.feedback.warning({
  message: \"Your battery is almost empty\"
});
\n

error

\n
this.feedback.error({
  title: \"KABOoooOOM!\",
  titleColor: new Color(\"black\")
});
\n

Credits

\n

On Android we're using the Alerter library by Tapadoo,\nand on iOS ISMessages by ilyainyushin.

\n","downloadStats":{"lastDay":175,"lastWeek":858,"lastMonth":3369}},"@nativescript/firebase-app-check":{"name":"@nativescript/firebase-app-check","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-app-check

\n
npm install @nativescript/firebase-app-check
\n
\n

Note: (iOS) App Check requires you set the minimum iOS Deployment version in ios/Podfile to 11.0 or greater.

\n
\n

What does it do

\n

App Check works alongside other Firebase services to help protect your backend resources from abuse, such as billing fraud or phishing. With App Check, devices running your app will use an app or device attestation provider that attests to one or both of the following:

\n

Requests originate from your authentic app\nRequests originate from an authentic, untampered device\nThis attestation is attached to every request your app makes to your Firebase backend resources.

\n

\"image\"

\n

This App Check module has built-in support for using the following services as attestation providers:

\n

DeviceCheck on iOS\nSafetyNet on Android\nApp Check currently works with the following Firebase products:

\n

Realtime Database\nCloud Storage\nCloud Functions (callable functions)\nThe official Firebase App Check documentation has more information, including about the iOS AppAttest provider, and testing/ CI integration, it is worth a read.

\n

Usage

\n

Activate

\n
import { firebase } from '@nativescript/firebase-core';
import { AppCheck } from '@nativescript/firebase-app-check';

AppCheck.setProviderFactory(); // call before the fb app is initialized 
firebase.initializeApp()
.then(app =>{
    firebase().appCheck().activate(true);
})

\n

The only configuration possible is the token auto refresh. When you call activate, the provider stays the same but the token auto refresh setting will be changed based on the argument provided.

\n

You must call activate prior to calling any firebase back-end services for App Check to function.

\n

Custom Provider

\n
import { firebase } from '@nativescript/firebase-core';
import { AppCheck, AppCheckProviderFactory, AppCheckProvider } from '@nativescript/firebase-app-check';


class AppCheckProviderFactoryImpl extends AppCheckProviderFactory {
\tcreateProvider(app: FirebaseApp) {
        // we could potentiall do something with the app 
        return new AppCheckProviderImpl();
    }
}


class AppCheckProviderImpl extends AppCheckProvider {
    getToken(done){
        // do some call probably http
        // finally call done when you're ready passing in a token along with the expirationDate
        done({
            token: someToken,
            expirationDate: someDate 
        })
    }
}



AppCheck.setProviderFactory(new AppCheckProviderFactoryImpl()); // call before the fb app is initialized 
firebase.initializeApp()
.then(app =>{
    firebase().appCheck().activate(true);
})

\n

Automatic Data Collection

\n

App Check has an "tokenAutoRefreshEnabled" setting. This may cause App Check to attempt a remote App Check token fetch prior to user consent. In certain scenarios, like those that exist in GDPR-compliant apps running for the first time, this may be unwanted.

\n

If unset, the "tokenAutoRefreshEnabled" setting will defer to the app's "automatic data collection" setting, which may be set in the Info.plist or AndroidManifest.xml

\n

Using App Check tokens for non-firebase services

\n

The official documentation shows how to use getToken to access the current App Check token and then verify it in external services.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":3,"lastWeek":17,"lastMonth":1687}},"@nativescript/template-blank-vue":{"name":"@nativescript/template-blank-vue","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Vue Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-vue --template @nativescript/template-blank-vue
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-vue --template nativescript-app-templates/packages/template-blank-vue
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

There is a single blank component located in:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":5,"lastWeek":33,"lastMonth":594}},"nativescript-stripe":{"name":"nativescript-stripe","version":"6.6.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

Requires I0S 9.x +

\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Configure

\n\n

Android

\n

Stripe Android v10.2.1 SDK is being used

\n

iOS

\n

Stripe iOS 19.0.1 SDK (pod) is being used

\n

Angular

\n

To use the Custom Integration's CreditCardView in Angular,\nregister the Angular wrapper in the main module (typically app.module.ts), as follows:

\n
...
import { CreditCardViewModule } from \"nativescript-stripe/angular\";
...
@NgModule({
  imports: [
    ...
    CreditCardViewModule,
    ...
  ],
  ...
})
export class AppModule { }
\n

Usage

\n

IMPORTANT: Make sure you include xmlns:stripe="nativescript-stripe" on the Page tag

\n

Using from view

\n
<stripe:CreditCardView id=\"card\"/>
\n

Add extra details to card

\n

JavaScript

\n
const ccView = page.getViewById(\"card\");
const cc = ccView.card;
cc.name = \"Osei Fortune\";
\n

TypeScript

\n
import { CreditCardView, Card } from 'nativescript-stripe';
const ccView:CreditCardView = page.getViewById(\"card\");
const cc:Card = ccView.card;
cc.name = \"Osei Fortune\";
\n

Using from code

\n
import { Card } from 'nativescript-stripe';
const cc = new Card(\"1111111111111111\",2,18,\"123\");
cc.name = \"Osei Fortune\";
\n

Standard Integration

\n

The demo and demo-angular folders contain demos that use the Standard Integration.\nThey can be used as a starting point, and provide information on how to invoke the\nStandard Integration components. For more information, see the README in the\ndemo folders.

\n

Set Stripe configuration values:

\n
StripeConfig.shared().backendAPI = <Your API Service>;
StripeConfig.shared().publishableKey = <Your Stripe Key>;
StripeConfig.shared().companyName = <Your Company Name>;
// To support Apple Pay, set appleMerchantID.
StripeConfig.shared().appleMerchantID = <Your Apple Merchant ID>;
\n

Create a Customer Session

\n
let customerSession = new StripeCustomerSession();
\n

Create a Payment Session

\n
let paymentSession = new StripePaymentSession(page, customerSession, price, \"usd\", listener);
\n

See Stripe Docs for more information.

\n

Strong Customer Authentication

\n

PSD2 regulations in Europe will require Strong Customer Authentication\nfor some credit card purchases. Stripe supports this, though most of the work to make it happen is\nrequired on the backend server and in the mobile app, outside the nativescript-stripe plugin.

\n

To support SCA, follow the instructions for iOS\nand Android on using PaymentIntents instead\nof tokens when interacting with your backend server. The nativescript-stripe plugin has\ncross-platform data structures and method calls that might be helpful. In index.d.ts see:

\n\n

Handling secondary customer input

\n

SCA requires the customer to enter additional information with some charge cards. Stripe takes care of this\nif you properly handle the redirect from the StripePaymentIntent returned from the server.

\n

If you're using the automatic confirmation flow, confirmPaymentIntent and confirmSetupIntent will automatically manage the SCA validation by showing and validating the payment authentification.

\n

If you're using the manual confirmation flow, where back-end creates the PaymentIntent|SetupIntent and requires an Intent authentification from the customer, authenticatePaymentIntent and authenticateSetupIntent will allow to manage that extra step before sending back the Intent to your server.

\n

Status

\n

demo-angular now supports SetupIntent and PaymentIntent SCA integration. Any credit card verification will be automatically prompted to the user.

\n

Known Issues

\n

const enum not found

\n

When building with NativeScript v6, it builds using the webpack-only flow in "transpileOnly" mode. A webpack issue means that const enum values cannot be found in the final output.

\n

This problem is not present in Angular projects and likely won't be an issue if you do not use any of the exported enums.

\n

Unfortunately, the only fix I've found for this is to follow the advice in that issue and modify webpack.config.js in your app to set transpileOnly to false.

\n

Note: This may no longer be needed once this TypeScript bug is fixed.

\n

TODO

\n\n","downloadStats":{"lastDay":1,"lastWeek":46,"lastMonth":148}},"@nativescript-community/document-scanner":{"name":"@nativescript-community/document-scanner","version":"0.0.1","license":"Apache-2.0","readme":"\n\n

@nativescript-community/document-scanner

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript plugin to scan documents
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/document-scanner

\n

\n

Usage

\n

To use that plugin you need camera permission.\nDont forget to ask for it at runtime using something like

\n
    import { request } from '@nativescript-community/perms';
    await request('camera');
\n

After that:

\n
    const documentScanner = new DocumentScanner();
    try {
        const result: string[] | any[] /* UIImage[] on iOS */ = await documentScanner.startScan();
        console.log('scan result', result);
    } catch (error) {
        console.error(error);
    }
\n

You can see the options in the typings.

\n

iOS

\n

On ios the result is an array of UIImage

\n

\n

Demos

\n

This repository includes Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/document-scanner
$ cd document-scanner
$ npm run i
$ npm run setup
$ npm run build
$ cd demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":36}},"@nativescript/rive":{"name":"@nativescript/rive","version":"1.0.1","license":"Apache-2.0","readme":"

@nativescript/rive

\n

Rive for NativeScript

\n
npm install @nativescript/rive
\n

Usage

\n

You can configure both iOS and Android for Rive usage.

\n

iOS

\n

For iOS, configure your nativescript.config.ts to use the Swift Package:

\n
ios: {
    SPMPackages: [
        {
            name: 'RiveRuntime',
            libs: ['RiveRuntime'],
            repositoryURL: 'https://github.com/rive-app/rive-ios.git',
            version: '5.0.0',
        },
    ],
},
\n

Swift Package version note

\n

If you encounter a build error related to a specified version as follows:

\n
xcodebuild: error: Could not resolve package dependencies:
  Dependencies could not be resolved because no versions of 'rive-ios' match the requirement 5.1.12..<6.0.0 and root depends on 'rive-ios' 5.1.12..<6.0.0.
\n

You can use the base major version, 5.0.0, instead of the precise version. It will still resolve the latest in the major version series.

\n

Android

\n

For Android, add this provider to your AndroidManifest.xml inside the application tag:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
    package=\"__PACKAGE__\"
    xmlns:tools=\"http://schemas.android.com/tools\"> <!-- You may need to add this xmlns:tools attr/value -->
    ...

    <application
        android:name=\"com.tns.NativeScriptApplication\"
        ...>

        <!-- Add this for Rive -->
        <provider
                android:name=\"androidx.startup.InitializationProvider\"
                android:authorities=\"${applicationId}.androidx-startup\"
                android:exported=\"false\"
                tools:node=\"merge\">
            <meta-data android:name=\"app.rive.runtime.kotlin.RiveInitializer\"
                        android:value=\"androidx.startup\" />
        </provider>
\n

Gradle settings

\n

Add this to your app.gradle inside the android section:

\n
kotlinOptions {
    jvmTarget = '1.8'
}
\n

Ensure your gradle settings are setup to use Kotlin by adding a gradle.properties file (right next to your app.gradle) with the following:

\n
useKotlin=true
\n

RiveView

\n

Use RiveView:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:rive=\"@nativescript/rive\">
    <GridLayout>
        <rive:RiveView src=\"~/assets/rive/icons.riv\" width=\"300\" height=\"300\" autoPlay=\"true\"/>
    </GridLayout>
</Page>
\n

When using flavors, you can register the element for usage in your markup:

\n
import { RiveView } from '@nativescript/rive'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('RiveView', () => RiveView)

// Solid
import { registerElement } from 'dominative';
registerElement('riveView', RiveView);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('riveView', () => RiveView);

// React
import { registerElement } from 'react-nativescript';
registerElement('riveView', () => RiveView);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('RiveView', () => RiveView)
\n

Use RiveView anywhere.

\n
<RiveView />
\n

Using State Machines

\n

You can specify the artboard, stateMachine, input along with inputValue (boolean).

\n
<RiveView src=\"~/assets/rive/icons.riv\" artboard=\"CHAT\" stateMachine=\"CHAT_Interactivity\" input=\"active\" [inputValue]=\"inputValue\" width=\"300\" height=\"300\" autoPlay=\"true\" />
\n

Triggering State Changes

\n

You can also trigger state changes via the RiveView instance, for example:

\n
<RiveView src=\"~/assets/rive/icons.riv\" (loaded)=\"loadedRive($event)\" />
\n

You can now use the instance to trigger state changes anytime:

\n
let rive: RiveView;
function loadedRive(args) {
    rive = args.object;
    rive.triggerInputValue(name, value);
}
\n

Troubleshooting

\n

When configuring your Android app for Rive you may run into the following issues. Here's some solutions.

\n

Potential Error 1

\n
Execution failed for task ':app:checkDebugDuplicateClasses'.
Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.internal.jdk7.JDK7PlatformImplementations found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)
\n

Solution

\n

Add the following dependency constraints to the top of your app.gradle above the android section:

\n
dependencies {
    constraints {
        implementation \"org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.21\" 
        implementation \"org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.21\"
    }
}
\n

Potential Error 2

\n
Execution failed for task ':app:mergeDebugNativeLibs'.
2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs:
 - /Users/you/.gradle/caches/transforms-3/fed290951dd20dba6bd42d7106bb3f26/transformed/jetified-rive-android-8.1.3/jni/arm64-v8a/libc++_shared.so
\n

Solution

\n

Add this section to app.gradle android section:

\n
android {
  …
  packagingOptions {
      pickFirst \"lib/x86/libc++_shared.so\"
      pickFirst \"lib/x86_64/libc++_shared.so\"
      pickFirst \"lib/armeabi-v7a/libc++_shared.so\"
      pickFirst \"lib/arm64-v8a/libc++_shared.so\"
  }
  …
}
\n

Potential Error 3

\n
This version (1.2.0-alpha05) of the Compose Compiler requires Kotlin version 1.6.10 but you appear to be using Kotlin version 1.7.10 which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).
\n

Solution

\n

Add a before-plugins.gradle file next to your app.gradle containing the following:

\n
ext {
    gradlePluginVersion = \"7.3.1\"
    kotlinVersion = \"1.6.10\"
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":38}},"@nativescript/firebase-in-app-messaging":{"name":"@nativescript/firebase-in-app-messaging","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-in-app-messaging

\n

Contents

\n\n

Intro

\n

This plugin allows you to use the Firebase In-App Messaging SDK in your NativeScript app.

\n

\"image\"

\n

Set up your app for Firebase

\n

You need to set up your app for Firebase before you can use the Firebase in-app messaging. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Add the Firebase In-App Messaging SDK to your app

\n

To add the Firebase In-App Messaging SDK to your app follow these steps:

\n
    \n
  1. Install the @nativescript/firebase-in-app-messaging plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-in-app-messaging
\n
    \n
  1. Add the SDK by importing the @nativescript/firebase-in-app-messaging module in your app's main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-in-app-messaging';
\n

Firebase In-App Messaging limitations

\n

According to a github issue https://github.com/firebase/firebase-ios-sdk/issues/4768, Firebase In-App Messaging allows only 1 campaign per day on app foreground or app launch. This limit is to prevent you from accidentally overwhelming your users with non-contextually appropriate messages. However, if you use contextual triggers (for example Analytics events or programmatically triggered in-app-messaging campaigns), there is no daily rate limit.

\n

Create message campaigns

\n

To create a message campaign, go to the In-App Messaging page in the Firebase Console and follow the instructions there. You can create campaigns and customize elements such as Image, Banner, Modal & Cards to appear on predefined events (e.g. purchase).

\n

Any published campaigns from the Firebase Console are automatically handled and displayed on your user's device.

\n

Control messages display

\n

To control whether to display messages or not, set the isMessagesDisplaySuppressed property of the InAppMessaging instance to true or false. The InAppMessaging instance is returneb calling the inAppMessaging() on the FirebaseApp instance. By default, isMessagesDisplaySuppressed is set to false which means messages will be displayed.

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-in-app-messaging';

async function bootstrap() {
  firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
}

async function onSetup(user) {
  await setupUser(user);
  // Allow user to receive messages now setup is complete
  firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
}
\n
\n

Note: The suppressed state is not persisted between restarts, so ensure it is called as early as possible ideally in the app bootstrapping file(app.ts or main.ts).

\n
\n

Trigger contextual messages

\n

To trigger contextual messages, call the triggerEvent() method of the InAppMessaging instance with the event name as a parameter. This triggers the display of any messages that are configured on the Firebase Console.

\n
import { firebase } from '@nativescript/firebase-core';

firebase().inAppMessaging().triggerEvent('purchase');
\n

API

\n

InAppMessaging class

\n

app

\n
inAppMessagingApp = firebase().inAppMessaging().app;
\n

The app property returns the FirebaseApp instance that the current InAppMessaging instance is associated with.

\n
\n

isAutomaticDataCollectionEnabled

\n
firebase().inAppMessaging().isAutomaticDataCollectionEnabled = true;
\n

For the description of this property, see isAutomaticDataCollectionEnabled on the Firebase documentation.

\n
\n

isMessagesDisplaySuppressed

\n
firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
// or
firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
\n

For the description of this property, see areMessagesSuppressed on the Firebase documentation.

\n
\n

triggerEvent()

\n
firebase().inAppMessaging().triggerEvent(eventId);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventIdstringThe name of the event to trigger.
\n

For the description of this method, see triggerEvent on the Firebase documentation.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":9,"lastWeek":53,"lastMonth":1653}},"nativescript-drawingpad":{"name":"nativescript-drawingpad","version":"3.1.0","license":"Apache-2.0","readme":"\n

NativeScript DrawingPad

\n\n
\nNativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.
\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"build\n \n \n \"stars\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

NativeScript

\n

tns plugin add nativescript-drawingpad

\n

Samples

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Sample1\"\"Sample2\"
\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
gcacace/android-signaturepadSignatureView
\n

Video Tutorial

\n

Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

\n

Written Tutorial

\n

Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

\n

Usage

\n

XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:DrawingPad=\"nativescript-drawingpad\" loaded=\"pageLoaded\">
    <ActionBar title=\"NativeScript-DrawingPad\" />
    <ScrollView>
        <StackLayout>

            <DrawingPad:DrawingPad
            height=\"400\"
            id=\"drawingPad\"
            penColor=\"{{ penColor }}\" penWidth=\"{{ penWidth }}\" />

        </StackLayout>
    </ScrollView>
</Page>
\n

TS:

\n
import { topmost } from 'ui/frame';
import { DrawingPad } from 'nativescript-drawingpad';

// To get the drawing...

  public getMyDrawing() {
      const drawingPad = topmost().getViewById('myDrawingPad');
      drawingPad.getDrawing().then((res) => {
          console.log(res);
       });
    }


// If you want to clear the signature/drawing...
public clearMyDrawing() {
    const drawingPad = topmost().getViewById('myDrawingPad');
    drawingPad.clearDrawing();
}
\n

Angular:

\n
import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from 'nativescript-angular/element-registry';

registerElement(
  'DrawingPad',
  () => require('nativescript-drawingpad').DrawingPad
);

@Component({
  selector: 'drawing-pad-example',
  template: `
    <ScrollView>
        <StackLayout>
            <DrawingPad #DrawingPad 
            height=\"400\" 
            id=\"drawingPad\" 
            penColor=\"#ff4081\" penWidth=\"3\">
            </DrawingPad>

            <StackLayout orientation=\"horizontal\">
                <Button text=\"Get Drawing\" (tap)=\"getMyDrawing()\"></Button>
                <Button text=\"Clear Drawing\" (tap)=\"clearMyDrawing()\"></Button>
            </StackLayout>
        </StackLayout>
    </ScrollView>
    `
})
export class DrawingPadExample {
  @ViewChild('DrawingPad') DrawingPad: ElementRef;

  getMyDrawing(args) {
    // get reference to the drawing pad
    const pad = this.DrawingPad.nativeElement;

    // then get the drawing (Bitmap on Android) of the drawingpad
    let drawingImage;
    pad.getDrawing().then(
      data => {
        console.log(data);
        drawingImage = data;
      },
      err => {
        console.log(err);
      }
    );
  }

  clearMyDrawing(args) {
    const pad = this.DrawingPad.nativeElement;
    pad.clearDrawing();
  }
}
\n

Properties

\n

penColor - (Color) - optional\nProperty to specify the pen (stroke) color to use.

\n

penWidth - (int) - optional\nProperty to specify the pen (stroke) width to use.

\n

clearOnLongPress - (boolean = true) - optional iOS Only\nGets/sets whether a long press will clear the view.

\n

Methods

\n

getDrawing() - Promise (returns image if successful)

\n

clearDrawing() - clears the drawing from the DrawingPad view.

\n

getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)

\n

Android Only

\n\n","downloadStats":{"lastDay":0,"lastWeek":23,"lastMonth":141}},"nativescript-star-printer":{"name":"nativescript-star-printer","version":"4.2.1","license":"MIT","readme":"

NativeScript Star Printer

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n\n

That's the demo app in action, printing on a Star Micronics TSP650II

\n

Installation

\n
\n

For NativeScript 7+, please use plugin version 4+

\n
\n
tns plugin add nativescript-star-printer
\n

API

\n

requiring / importing the plugin

\n

All examples below assume you're using TypeScript, but here's how to require the plugin with plain old JS as well:

\n

JavaScript

\n
var StarPrinterPlugin = require(\"nativescript-star-printer\");
var starPrinter = new StarPrinterPlugin.StarPrinter();
\n

TypeScript

\n
import { StarPrinter, SPPrinter, SPCommands } from \"nativescript-star-printer\";

export Class MyPrintingClass {
  private starPrinter: StarPrinter;
  
  constructor() {
    this.starPrinter = new StarPrinter();
  }
}
\n

searchPrinters

\n

If you're searching for a Bluetooth printer, enable Bluetooth in the device settings\nand pair/connect the printer. Then do:

\n
this.starPrinter.searchPrinters().then(
    (printers: Array<SPPrinter>) => {
      console.log(`Found ${printers.length} printers`);
    }, (err: string) => {
      console.log(`Search printers error: ${err}`);
    });
\n

The most useful property on the SPPrinter class is the portName which you will need\nin other API methods.

\n

The only other property is modelName.

\n

connect

\n

Once you know the printer port name, you can connect to it.

\n
\n

Note that there's no need to connect if you want to print as the print function does this automatically.

\n
\n
this.starPrinter.connect({
  portName: thePortName
}).then((result: SPPrinterStatusResult) => console.log(\"Connected: \" + result.connected));
\n

getPrinterStatus

\n

After connecting to a printer, you can use this method to poll for the 'online' and 'paper' statuses.

\n
this.starPrinter.getPrinterStatus({
  portName: this.lastConnectedPrinterPort
}).then(result => {
  const online: boolean = result.online;
  const onlineStatus: PrinterOnlineStatus = result.onlineStatus;
  const paperStatus: PrinterPaperStatus = result.paperStatus;
});
\n

print

\n

Once you've got the port of the printer you want to print to, just do:

\n
this.starPrinter.print({
  portName: this.selectedPrinterPort,
  commands: commands
});
\n

So what are those commands? Let's recreate the fake receipt below to answer that (see the TypeScript definition for all options):

\n\n
const image = ImageSource.fromFile(\"~/res/mww-logo.png\");

// Note that a standard 3 inch roll is 48 characters wide - we use that knowledge for our \"columns\"
let commands = new SPCommands()
    .image(
        image,
        true, // diffuse
        true // align center (set to 'false' to align left)
     )
    // alternatively, you can use imagePositioned for a bit more control (on Android this behaves the same as 'image' though)
    .imagePositioned(
        image,
        80, // width
        20, // position
        true, // both scale
        true, // diffuse
        true // align center (set to 'false' to align left)
     )
    .alignCenter()
    .text(\"My Awesome Boutique\").newLine()
    .text(\"In a shop near you\").newLine()
    .setFont(\"smaller\")
    .text(\"Planet Earth\").newLine()
    .setFont(\"default\")
    .newLine()
    .text(\"Date: 11/11/2017                   Time: 3:15 PM\")
    .horizontalLine() // you can pass in the character and the nr of characters (use 48 for a 3\" roll, 42 for a smaller one)
    .newLine()
    .textBold(\"SKU           Description                  Total\").newLine()
    .text(\"300678566     Plain White Tee             €10.99\").newLine()
    .text(\"300692003     Black Dénim                 €29.99\").newLine()
    .text(\"300651148     Blue Denim                  €29.99\").newLine()
    .newLine()
    .newLine()
    .barcode({
      type: \"Code128\",
      value: \"12345678\",
      width: \"large\",
      height: 60,
      appendEncodedValue: false
    })
    .newLine()
    .cutPaper();

this.starPrinter.print({
  portName: this.selectedPrinterPort,
  commands: commands
});
\n

openCashDrawer

\n

In case a cash drawer is connected via the UTP (network) connector of the Star printer,\nyou can open the drawer from your code!

\n
this.starPrinter.openCashDrawer({
  portName: this.selectedPrinterPort
});
\n

iOS runtime permission reason

\n

iOS 10+ requires a permission popup when connecting (the first) time to a Bluetooth peripheral explaining why it needs to connect.

\n

You can provide your own reason by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSBluetoothPeripheralUsageDescription</key>
  <string>My reason justifying fooling around with your Bluetooth</string>
\n

To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specified yourself. You're welcome.

\n

Known limitations

\n

On iOS you want to run this on a real device.

\n

Future work

\n

Possibly add more print formatting options.

\n","downloadStats":{"lastDay":1,"lastWeek":18,"lastMonth":68}},"@nativescript/twitter":{"name":"@nativescript/twitter","version":"1.0.1","license":"Apache-2.0","readme":"

@nativescript/twitter

\n

A plugin that allows you to authenticate a user with their Twitter account.

\n\n

Contents

\n\n

Installation

\n
npm install @nativescript/twitter
\n

Prerequisites

\n\n
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>yourscheme></string>
    </array>
  </dict>
</array>
\n\n

Here is what callbacks would look like:

\n

\"callback

\n

Usage

\n

Initializing Twitter Sign-in

\n

To set up Twitter Sign in, call the Twitter class's init() method passing it the consumer key and the consumer secret.

\n
import { Twitter, TwitterSignIn } from '@nativescript/twitter';

Twitter.callback = 'yourscheme://';

Twitter.init(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET);
\n

Sign in a user

\n

To sign a user in, call the logIn() method on the TwitterSignIn class.

\n
TwitterSignIn.logIn()
\t.then((session) => {
\t\t// session.authToken
\t\t// session.authTokenSecret
\t})
\t.catch((e) => {});
\n

API

\n

Twitter

\n

callback

\n
Twitter.callback = \"the callback url\"
\n

The callback URL

\n
\n

init()

\n
Twitter.init(consumerKey, consumerSecret)
\n

Initializes the Twitter authentification with the specified key and secret.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterType
consumerKeystring
consumerSecretstring
\n
\n

TwitterSignIn

\n

logIn()

\n
TwitterSignIn.logIn().then((session: Session) =>{

}).catch((err) =>{

})
\n

Session

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
authTokenstringreadonly
authTokenSecretstringreadonly
userNamestringreadonly
userIdstringreadonly
iosanyreadonly
androidanyreadonly
\n
\n

getCurrentUser()

\n
TwitterSignIn.getCurrentUser().then((user: TwitterUser) =>{

}).catch((err) =>{

})
\n
\n

TwitterUser

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
formattedScreenNamestringreadonly
isProtectedbooleanreadonly
isVerifiedbooleanreadonly
namestringreadonly
profileImageUrlstringreadonly
profileUrlstringreadonly
screenNamestringreadonly
userIdstringreadonly
\n
\n

logOut()

\n
TwitterSignIn.logIn()
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":160}},"nativescript-apiclient":{"name":"nativescript-apiclient","version":"3.0.0","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-apiclient/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript API Client

\n

A NativeScript module for simply calling HTTP based APIs.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-apiclient
\n

inside your app project to install the module.

\n

Demo

\n

For quick start have a look at the plugin/index.ts or use the "IntelliSense" of your IDE to learn how it works.

\n

Otherwise...

\n

Usage

\n

Import

\n
import ApiClient = require(\"nativescript-apiclient\");
\n

Example

\n
import ApiClient = require(\"nativescript-apiclient\");
import HTTP = require(\"http\");

interface IUser {
    displayName?: string;
    id?: number;
    name?: string;
}

var client = ApiClient.newClient({
    baseUrl: \"https://api.example.com/users\",
    route: \"{id}\",  
});

client.beforeSend(function(opts: HTTP.HttpRequestOptions, tag: any) {
                      console.log(\"Loading user: \" + tag);
                      
                      // prepare the request here
                  })
      .clientError(function(result: ApiClient.IApiClientResult) {
                       // handle all responses with status code 400 to 499
                   })
      .serverError(function(result: ApiClient.IApiClientResult) {
                       // handle all responses with status code 500 to 599
                   })
      .success(function(result: ApiClient.IApiClientResult) {
                    // handle all responses with that were NOT
                    // handled by 'clientError()' and 'serverError()'
                    // 
                    // especially with status code less than 400 and greater than 599
                    
                    var user = result.getJSON<IUser>();
               })
      .error(function(err: ApiClient.IApiClientError) {
                 // handle API client errors
             })
      .completed(function(ctx: ApiClient.IApiClientCompleteContext) {
                     // invoked after \"result\" and \"error\" actions
                 });

var credentials = new ApiClient.BasicAuth(\"Marcel\", \"p@ssword!\");

for (var userId = 1; userId <= 100; userId++) {
    // start a GET request
    // 
    // [GET]  https://api.example.com/users/{id}?ver=1.6.6.6
    client.get({
        authorizer: credentials,
    
        // request headers
        headers: {
            'X-MyHeader-TM': '5979',
            'X-MyHeader-MK': '23979'
        },
        
        // URL parameters
        params: {
            ver: '1.6.6.6'
        },
    
        // route parameters
        routeParams: {
            id: userId.toString()  // {id}
        },
        
        // global value for all callbacks 
        tag: userId
    });
}
\n

Routes

\n

Routes are suffixes for a base URL.

\n

You can define one or parameters inside that route, which are replaced when you start a request.

\n

If you create a client like this

\n
var client = ApiClient.newClient({
    baseUrl: \"https://api.example.com/users\",
    route: \"{id}/{resource}\",  
});
\n

and start a request like this

\n
client.get({
    routeParams: {
        id: \"5979\",  // {id}
        resource: \"profile\"  // {resource}
    }
});
\n

the client will call the URL

\n
[GET]  https://api.example.com/users/5979/profile
\n

Parameter values can also be functions, what means that the value that is returned by that functions is used as value:

\n
var getUserId = function() : string {
    // load the user ID from somewhere
};

client.get({
    routeParams: {
        id: getUserId,  // {id}
        resource: \"profile\"  // {resource}
    }
});
\n

A function must have the following structure:

\n
function (paramName: string, routeParams: any, match: string, formatExpr: string, funcDepth: string) : any {
    return <THE-VALUE-TO-USE>;
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
paramNameThe name of the parameter. For {id} this will be id
routeParamsThe list of submitted route parameters with their values. IMPORTANT: Keep sure to return strings as values! Otherwise you might have problems to convert the values to an URL part.
matchThe complete (unhandled) expression of the argument.
formatExprThe optional format expression of the argument. For {id:number} this will be number.
funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
\n

Formatting values

\n

Followed by a : char a route parameter definition can additionally contain a "format expression".

\n

These expressions can help you to parse and format parameter values.

\n

The first step to do this is to define a so called "format provider" callback in a client:

\n
client.addFormatProvider((ctx : ApiClient.IFormatProvider) => {
    var toStringSafe = function() : string { 
        return ctx.value ? ctx.value.toString() : \"\";
    };

    if (ctx.expression === \"upper\") {    
        ctx.handled = true;
        return toStringSafe().toUpperCase();  // the new value
    }
    else if (ctx.expression === \"number\") {
        var n = parseInt(toStringSafe().trim());
        if (isNaN(n)) {
            throw \"'\" + ctx.value + \"' is NOT a number!\";
        }
        
        ctx.handled = true;
        return n.toString();
    }
});
\n

Here we defined the two expressions upper (convert to upper case chars) and number (keep sure to have a valid number).

\n

To use them you can define a route like this:

\n
{id:number}/{resource:upper}
\n

Now if you setup your client

\n
var client = ApiClient.newClient({
    baseUrl: \"https://api.example.com/users\",
    route: \"{id:number}/{resource:upper}\",  
});
\n

and start a request like this

\n
client.get({
    routeParams: {
        id: \"5979\",
        resource: \"profile\"
    }
});
\n

the client will call the URL

\n
[GET]  https://api.example.com/users/5979/PROFILE
\n

The ctx object in the format provider call of addFormatProvider() has the following structure:

\n
interface IFormatProviderContext {
    /**
     * Gets the format expression.
     */
    expression: string;
    
    /**
     * Gets if the expression has been handled or not.
     */
    handled: boolean;
    
    /**
     * Gets the underlying (unhandled) value.
     */
    value: any;
}
\n

Authorization

\n

You can submit an optional IAuthorizer object when you start a request:

\n
interface IAuthorizer {
    /**
     * Prepares a HTTP request for authorization.
     * 
     * @param {HTTP.HttpRequestOptions} reqOpts The request options.
     */
    prepare(reqOpts: HTTP.HttpRequestOptions);
}
\n

The plugin provides the following implementations:

\n

AggregateAuthorizer

\n
var authorizer = new ApiClient.AggregateAuthorizer();
authorizer.addAuthorizers(new ApiClient.BasicAuth(\"Username\", \"Password\"),
                          new ApiClient.BearerAuth(\"MySecretToken\"));
\n

BasicAuth

\n
var authorizer = new ApiClient.BasicAuth(\"Username\", \"Password\");
\n

BearerAuth

\n
var authorizer = new ApiClient.BearerAuth(\"MySecretToken\");
\n

OAuth

\n
var authorizer = new ApiClient.OAuth(\"MySecretToken\");
authorizer.setField('oauth_field1', 'field1_value');
authorizer.setField('oauth_field2', 'field2_value');
\n

TwitterOAuth

\n
var authorizer = new ApiClient.TwitterOAuth(\"<CONSUMER_KEY>\", \"<CONSUMER_SECRET>\",
                                            \"<TOKEN>\", \"<TOKEN_SECRET>\");
\n

Requests

\n

GET

\n
// ?TM=5979&MK=23979
client.get({
    params: {
        TM: '5979',
        MK: '23979'
    }
});
\n

POST

\n
client.post({
    content: {
        id: 5979,
        name: \"Tanja\"
    },
    
    type: ApiClient.HttpRequestType.JSON
});
\n

PUT

\n
client.put({
    content: '<user><id>23979</id><name>Marcel</name></user>',
    
    type: ApiClient.HttpRequestType.XML
});
\n

PATCH

\n
client.patch({
    content: '<user id=\"241279\"><name>Julia</name></user>',
    
    type: ApiClient.HttpRequestType.XML
});
\n

DELETE

\n
client.delete({
    content: {
        id: 221286
    },
    
    type: ApiClient.HttpRequestType.JSON
});
\n

Custom

\n
client.request(\"FOO\", {
    content: {
        TM: 5979,
        MK: 23979
    },
    
    type: ApiClient.HttpRequestType.JSON
});
\n

Logging

\n

If you want to log inside your result / error callbacks, you must define one or more logger actions in a client:

\n
var client = ApiClient.newClient({
    baseUrl: \"https://example.com/users\",
    route: \"{id}\",  
});

client.addLogger(function(msg : ApiClient.ILogMessage) {
    console.log(\"[\" + ApiClient.LogSource[msg.source] + \"]: \" + msg.message);
});
\n

Each action receives an object of the following type:

\n
interface ILogMessage {
    /**
     * Gets the category.
     */
    category: LogCategory;
    
    /**
     * Gets the message value.
     */
    message: any;
    
    /**
     * Gets the priority.
     */
    priority: LogPriority;
    
    /**
     * Gets the source.
     */
    source: LogSource;
    
    /**
     * Gets the tag.
     */
    tag: string;
    
    /**
     * Gets the timestamp.
     */
    time: Date;
}
\n

Now you can starts logging in your callbacks:

\n
client.clientError(function(result : ApiClient.IApiClientResult) {
                       result.warn(\"Client error: \" + result.code);
                   })
      .serverError(function(result : ApiClient.IApiClientResult) {
                       result.err(\"Server error: \" + result.code);
                   })
      .success(function(result : ApiClient.IApiClientResult) {
                    result.info(\"Success: \" + result.code);
               })
      .error(function(err : ApiClient.IApiClientError) {
                 result.crit(\"API CLIENT ERROR!: \" + err.error);
             })
      .completed(function(ctx : ApiClient.IApiClientCompleteContext) {
                     result.dbg(\"Completed action invoked.\");
                 });
\n

The IApiClientResult, IApiClientError and IApiClientCompleteContext objects using the ILogger interface:

\n
interface ILogger {
    /**
     * Logs an alert message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    alert(msg : any, tag?: string,
          priority?: LogPriority) : ILogger;
    
    /**
     * Logs a critical message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    crit(msg : any, tag?: string,
         priority?: LogPriority) : ILogger;
    
    /**
     * Logs a debug message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    dbg(msg : any, tag?: string,
        priority?: LogPriority) : ILogger;
    
    /**
     * Logs an emergency message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    emerg(msg : any, tag?: string,
          priority?: LogPriority) : ILogger;
    
    /**
     * Logs an error message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    err(msg : any, tag?: string,
        priority?: LogPriority) : ILogger;
    
    /**
     * Logs an info message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    info(msg : any, tag?: string,
         priority?: LogPriority) : ILogger;
    
    /**
     * Logs a message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogCategory} [category] The optional log category. Default: LogCategory.Debug
     * @param {LogPriority} [priority] The optional log priority.
     */
    log(msg : any, tag?: string,
        category?: LogCategory, priority?: LogPriority) : ILogger;
    
    /**
     * Logs a notice message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    note(msg : any, tag?: string,
         priority?: LogPriority) : ILogger;
     
    /**
     * Logs a trace message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    trace(msg : any, tag?: string,
          priority?: LogPriority) : ILogger;
        
    /**
     * Logs a warning message.
     * 
     * @param any msg The message value.
     * @param {String} [tag] The optional tag value.
     * @param {LogPriority} [priority] The optional log priority.
     */
    warn(msg : any, tag?: string,
         priority?: LogPriority) : ILogger;
}
\n

URL parameters

\n

You can befine additional parameters for the URL.

\n

If you create a client like this

\n
var client = ApiClient.newClient({
    baseUrl: \"https://api.example.com/users\"
});
\n

and start a request like this

\n
client.get({
    params: {
        id: '23979',
        resource: \"profile\"
    }
});
\n

The client will call the URL

\n
[GET]  https://api.example.com/users?id=23979&resource=profile
\n

Like route parameters you can also use functions for defining URL parameters:

\n
var getUserId = function() : string {
    // load the user ID from somewhere
};

client.get({
    params: {
        id: getUserId,  // {id}
        resource: \"profile\"  // {resource}
    }
});
\n

A function must have the following structure:

\n
function (paramName: string, index: number, funcDepth: string) : any {
    return <THE-VALUE-TO-USE>;
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
paramNameThe name of the parameter. For {id} this will be id
indexThe zero based index of the handled URL parameter.
funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
\n

IMPORTANT: It is also recommended to use / return strings a parameter values to prevent problems when converting the values to an URL string.

\n

Responses

\n

Callbacks

\n

Simple

\n
client.success(function(result : ApiClient.IApiClientResult) {
                    // handle any response
               });
\n

The result object has the following structure:

\n
interface IApiClientResult extends ILogger {
    /**
     * Gets the underlying API client.
     */
    client: IApiClient;

    /**
     * Gets the HTTP response code.
     */
    code: number;
    
    /**
     * Gets the raw content.
     */
    content: any;
    
    /**
     * Gets the underlying (execution) context.
     */
    context: ApiClientResultContext;
    
    /**
     * Gets the response headers.
     */
    headers: HTTP.Headers;
    
    /**
     * Returns the content as wrapped AJAX result object.
     * 
     * @return {IAjaxResult<TData>} The ajax result object.
     */
    getAjaxResult<TData>() : IAjaxResult<TData>;
    
    /**
     * Returns the content as file.
     * 
     * @param {String} [destFile] The custom path of the destination file.
     * 
     * @return {FileSystem.File} The file.
     */
    getFile(destFile?: string) : FileSystem.File;
    
    /**
     * Tries result the content as image source.
     */
    getImage(): Promise<Image.ImageSource>;
    
    /**
     * Returns the content as JSON object.
     */
    getJSON<T>() : T;
    
    /**
     * Returns the content as string.
     */
    getString() : string;
    
    /**
     * Gets the information about the request.
     */
    request: IHttpRequest;
    
    /**
     * Gets the raw response.
     */
    response: HTTP.HttpResponse;
}
\n

Errors

\n
client.error(function(err : ApiClient.IApiClientError) {
                 // handle an HTTP client error here
             });
\n

The err object has the following structure:

\n
interface IApiClientError extends ILogger {
    /**
     * Gets the underlying client.
     */
    client: IApiClient;
    
    /**
     * Gets the context.
     */
    context: ApiClientErrorContext;
    
    /**
     * Gets the error data.
     */
    error: any;
    
    /**
     * Gets or sets if error has been handled or not.
     */
    handled: boolean;
    
    /**
     * Gets the information about the request.
     */
    request: IHttpRequest;
}
\n

Conditional callbacks

\n

You can define callbacks for any kind of conditions.

\n

A generic way to do this is to use the if() method:

\n
client.if(function(result : IApiClientResult) : boolean {
              // invoke if 'X-My-Custom-Header' is defined
              return undefined !== result.headers[\"X-My-Custom-Header\"];
          },
          function(result : IApiClientResult) {
              // handle the response
          });
\n

If no condition matches, the callback defined by success() method is used.

\n

For specific status codes you can use the ifStatus() method:

\n
client.ifStatus((statusCode) => statusCode === 500,
                function(result : IApiClientResult) {
                    // handle the internal server error
                });
\n

Or shorter:

\n
client.status(500,
              function(result : IApiClientResult) {
                  // handle the internal server error
              });
\n
Short hand callbacks
\n
client.clientError(function(result : ApiClient.IApiClientResult) {
                       // handle status codes between 400 and 499
                   });
                   
client.ok(function(result : ApiClient.IApiClientResult) {
                       // handle status codes with 200, 204 or 205
                   });
                   
client.serverError(function(result : ApiClient.IApiClientResult) {
                       // handle status codes between 500 and 599
                   });
\n

The following methods are also supported:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
badGatewayHandles a request with status code 502.
badRequestHandles a request with status code 400.
clientOrServerErrorHandles a request with a status code between 400 and 599.
conflictHandles a request with status code 409.
forbiddenHandles a request with status code 403.
gatewayTimeoutHandles a request with status code 504.
goneHandles a request with status code 410.
informationalHandles a request with a status code between 100 and 199.
insufficientStorageHandles a request with status code 507.
internalServerErrorHandles a request with status code 500.
lockedHandles a request with status code 423.
methodNotAllowedHandles a request with status code 405.
notFoundHandles a request with status code 404.
notImplementedHandles a request with status code 501.
partialContentHandles a request with status code 206.
payloadTooLargeHandles a request with status code 413.
redirectionHandles a request with a status code between 300 and 399.
serviceUnavailableHandles a request with status code 503.
succeededRequestHandles a request with a status code between 200 and 299.
tooManyRequestsHandles a request with status code 429.
unauthorizedHandles a request with status code 401.
unsupportedMediaTypeHandles a request with status code 415.
uriTooLongHandles a request with status code 414.
\n","downloadStats":{"lastDay":0,"lastWeek":46,"lastMonth":141}},"nativescript-toasty":{"name":"nativescript-toasty","version":"3.0.0-alpha.2","license":"MIT","readme":"

NativeScript-Toasty

\n

\"npm\"\n\"npm\"

\n

Install

\n

tns plugin add nativescript-toasty

\n

Usage

\n

TypeScript

\n
import { Toasty } from 'nativescript-toasty';
import { isIOS } from 'tns-core-modules/platform';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();

// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  yAxisOffset: 100,
  xAxisOffset: 10,
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24
  },
  anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
});

toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();
\n

JavaScript

\n
var toasty = require('nativescript-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n

  constructor(opts: ToastyOptions);

  position: ToastPosition;

  duration: ToastDuration;

  textColor: Color | string;

  backgroundColor: Color | string;

  yAxisOffset?: Length | number;

  xAxisOffset?: Length | number;

  readonly width: number;

  readonly height: number;


  /**
   * Show the Toasty
   */
  show();

  /**
   * Cancels the Toasty
   */
  cancel();

/**
 * Sets the Toast position.
 */
  setToastPosition(value: ToastPosition): Toasty;

/**
 * Sets the Toast duration.
 */
  setToastDuration(value: ToastDuration): Toasty;

/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(value: Color | string): Toasty;

/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(value: Color | string): Toasty;
\n
export enum ToastDuration {
  'SHORT',
  'LONG'
}

export enum ToastPosition {
  'BOTTOM',
  'BOTTOM_LEFT',
  'BOTTOM_RIGHT',
  'CENTER',
  'CENTER_LEFT',
  'CENTER_RIGHT',
  'TOP',
  'TOP_LEFT',
  'TOP_RIGHT'
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Position of the Toast.
   */
  position?: ToastPosition;

  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;

  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":25,"lastWeek":127,"lastMonth":543}},"@nativescript/template-blank-vue-ts":{"name":"@nativescript/template-blank-vue-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Vue Blank Typescript Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-vue-ts --template @nativescript/template-blank-vue-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-vue-ts --template nativescript-app-templates/packages/template-blank-vue-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

There is a single blank component located in:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":7,"lastWeek":25,"lastMonth":433}},"@nativescript-community/ui-cameraview":{"name":"@nativescript-community/ui-cameraview","version":"0.0.4","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-cameraview

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A CameraView allowing custom live processing for NativeScript
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-cameraview

\n

Usage

\n

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-cameraview" on the Page element

\n

XML

\n
<Page xmlns:bc=\"@nativescript-community/ui-cameraview\">
    <StackLayout horizontalAlignment=\"center\">
        <bc:CameraView width=\"100\" height=\"100\"/>
   </StackLayout>
</Page>
\n

\n

NativeScript + Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { CameraView } from '@nativescript-community/ui-cameraview';
registerElement('CameraView', () => CameraView);
\n
<CameraView width=\"100\" height=\"100\"></CameraView>
\n

\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
(<any>Vue).registerElement('CameraView', () => require('@nativescript-community/ui-cameraview').CameraView);
\n
<CameraView  width=\"100\" height=\"100\"/>
\n

\n

Demos

\n

This repository includes Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-cameraview
$ cd ui-cameraview
$ npm run i
$ npm run setup
$ npm run build
$ cd demo-svelte
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":100}},"@nativescript/template-blank-ts":{"name":"@nativescript/template-blank-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core with TypeScript Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-blank-ts --template @nativescript/template-blank-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-blank-ts --template nativescript-app-templates/packages/template-blank-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module:

\n\n

There is a single blank page module that sets up an empty layout:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":480}},"nativescript-appavailability":{"name":"nativescript-appavailability","version":"1.3.2","license":"MIT","readme":"

NativeScript AppAvailability

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

A plugin to check for availability of other apps on the device.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-appavailability
\n

Usage

\n
\n

Note that version 1.3.0 added a synchronous version of this method that doesn't return a Promise. Need that? Use availableSync instead of available.

\n
\n

TypeScript

\n
const isAppAvailable = require(\"nativescript-appavailability\").available;

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appavailability.available(\"twitter://\").then((avail: boolean) => {
  console.log(\"App available? \" + avail);
})
\n

TypeScript + Angular

\n
import * as appavailability from \"nativescript-appavailability\";

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appavailability.available(\"twitter://\").then((avail: boolean) => {
  console.log(\"App available? \" + avail);
})
\n

JavaScript

\n
var appAvailability = require(\"nativescript-appavailability\");

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appAvailability.available(\"com.facebook.katana\").then(function(avail) {
  console.log(\"App available? \" + avail);
})
\n

Opening an app (with web fallback)

\n

Now that you know whether an app is installed or not, you probably want to launch it.\nHere's a snippet that opens the mobile Twitter app and falls back to the website if it's not installed.

\n
import { available } from \"nativescript-appavailability\";
import { openUrl } from \"tns-core-modules/utils/utils\";

const twitterScheme = \"twitter://\";
available(twitterScheme).then(available => {
  if (available) {
    // open in the app
    openUrl(twitterScheme + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
  } else {
    // open in the default browser
    openUrl(\"https://twitter.com/eddyverbruggen\");
  }
})
\n

And a more concise, synchronous way would be:

\n
import { availableSync } from \"nativescript-appavailability\";
import { openUrl } from \"tns-core-modules/utils/utils\";

if (availableSync(\"twitter://\")) {
  openUrl(\"twitter://\" + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
} else {
  openUrl(\"https://twitter.com/eddyverbruggen\");
}
\n

iOS whitelisting

\n

To get useful results on iOS 9 and up you need to whitelist the URL Scheme\nyou're querying in the application's .plist.

\n

Luckily NativeScript made this pretty easy. Just open app/App_ResourcesiOS/Info.plist\nand add this if you want to query for both twitter:// and fb://:

\n
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>fb</string>
    <string>twitter</string>
  </array>
\n

You may wonder how one would determine the correct identifier for an app.

\n\n","downloadStats":{"lastDay":7,"lastWeek":36,"lastMonth":188}},"@nativescript/google-pay":{"name":"@nativescript/google-pay","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/google-pay

\n

A plugin that allows you to offer Google Pay in your Android app.

\n

Contents

\n\n

Installation

\n
ns plugin add @nativescript/google-pay
\n

Prerequisites

\n

Before you get started, review the following prerequisites:

\n\n

Important note about payment token

\n

If you're using a payments service provider, you need a valid payment token for your app in production mode. You can view the configuration for a number of providers in the Google documentation..

\n

During development you can use the example below for the gateway token configuration when creating a payment request.

\n
parameters: {
    gateway: 'example', // in production replace with your gateway provider
    gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID
}
\n

Use @nativescript/google-pay

\n

To implement Google Pay in your app, follow the steps below:

\n
    \n
  1. Register GooglePayBtn view in your app and add it markup.
    2. \n
\n
<android>
    <GooglePayBtn
        cardNetworks=\"VISA, AMEX, DISCOVER\"
        authMethods=\"PAN_ONLY, CRYPTOGRAM_3DS\"
        tap=\"onGooglePayTap\"
        width=\"100%\"
        height=\"40\"
        buttonType=\"PAY_BLACK\"
    ></GooglePayBtn>
</android>
\n
    \n
  1. Listen to the GooglePayBtn tap event
    2. \n
\n

Tapping the GooglePayBtn initiates payment with Google Pay. In the tap event handler(onGooglePayTap function ), manage the payments with Google Pay as follows:

\n
    \n
  1. Listen to the GooglePayEvents.PaymentSuccess event on the button instance.
    2. \n
\n\n
googlePayBtn.once(
        GooglePayEvents.PaymentSuccess,
        async (args: PaymentSuccessEventData) => {

          const payloadToBackend = {
              amount: 25.20,
              method: '3DS',
              '3DS': {
                signature:
                  args.data.paymentMethodData.tokenizationData.token.signature,
                type: 'G', // for Google
                version:
                  args.data.paymentMethodData.tokenizationData.token
                    .protocolVersion,
                data:
                  args.data.paymentMethodData.tokenizationData.token
                    .signedMessage
              }
            };

            // send the user payments data to your payments services provider here
            const result = await someHttpCallToPaymentServiceProvider(
              payloadToBackend
            );

        })
\n
2. Present the user with the payment sheet.\n\nTo present the user with the payment sheet to complete the transaction, call the\n`createPaymentRequest()` passing it a [GooglePayRequest](#googlepayrequest) object.\n\n  ```ts\n  const options = {\n    environment: 'development', // change this to production when in prod mode\n    theme: 'light',\n    merchantInfo: {\n      merchantName: 'YOUR_MERCHANT_NAME'\n    },\n    allowedPaymentMethods: {\n      type: AllowedPaymentMethodsType.CARD,\n      parameters: {\n        allowPrepaidCards: true,\n        allowCreditCards: true,\n        billingAddressRequired: true,\n        billingAddressParameters: {\n          format: BillingAddressParametersFormat.MIN, // FULL\n          phoneNumberRequired: true\n        }\n      },\n      tokenizationSpecification: {\n        type: TokenizationSpecificationType.PAYMENT_GATEWAY,\n        parameters: {\n          gateway: 'example', // in production replace with your gateway provider\n          gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID\n        }\n      }\n    },\n    transactionInfo: {\n      currencyCode: 'USD',\n      countryCode: 'US',\n      // transactionId: '283999292929929', // A unique ID that identifies a transaction attempt. Merchants can use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API.\n      totalPriceStatus: TotalPriceStatusValue.FINAL,\n      totalPrice: 25.20,\n      totalPriceLabel: 'Total',\n      checkoutOption: CheckoutOptionValue.DEFAULT\n    },\n    emailRequired: true,\n    shippingAddressRequired: true,\n    shippingAddressParameters: {\n      allowedCountryCodes: ['US'],\n      phoneNumberRequired: true\n    }\n  } as GooglePayRequest;\n\n  googlePayBtn.createPaymentRequest(options).catch(err => {\n    console.log('error with create payment request', err);\n  });\n  ```\n
\n

You can find a complete code example for above stepshere

\n

API

\n

GooglePayBtn class

\n

A class to initiate and manage payment with Google Pay.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
createPaymentRequest(args: GooglePayRequest)Promise<unknown>Creates the Google Pay payment request and presents the user with the payment sheet.
\n

Enums

\n

GooglePayAuthMethods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescription
PAN_ONLYThis authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
CRYPTOGRAM_3DSThis authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
\n

GooglePayCardNetworks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValue
AMEX'AMEX'
DISCOVER'DISCOVER'
INTERAC'INTERAC'
JCB'JCB'
MASTERCARD'MASTERCARD'
VISA'VISA'
\n

GooglePayEvents

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValue
PaymentCancelled'PaymentCancelled'
PaymentError'PaymentError'
PaymentSuccess'PaymentSuccess'
\n

TokenizationSpecificationType

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EnumDescription
PAYMENT_GATEWAYTo retrieve payment and customer information from a payment gateway that's supported by the Google Pay API, set type to PAYMENT_GATEWAY
DIRECTThe Direct integration allows merchants to decrypt the Google Pay response on their servers. To qualify, you must be Payments Card Industry (PCI) Data Security Standard (DSS) Level 1 compliant. Your servers also need to have the required infrastructure to securely handle users' payment credentials.
\n

BillingAddressParametersFormat

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescription
MINName, country code, and postal code (default).
FULLName, street address, locality, region, country code, and postal code.
\n

AllowedPaymentMethodsType

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValue
CARD'CARD'
\n

TotalPriceStatusValue

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescription
NOT_CURRENTLY_KNOWNUsed for a capability check. Do not use this property if the transaction is processed in an EEA country.
ESTIMATEDTotal price may adjust based on the details of the response, such as sales tax collected based on a billing address.
FINALTotal price doesn't change from the amount presented to the shopper.
\n

CheckoutOptionValue

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescription
DEFAULTStandard text applies for the given totalPriceStatus (default).
COMPLETE_IMMEDITATE_PURCHASEThe selected payment method is charged immediately after the payer confirms their selections. This option is only available when totalPriceStatus is set to FINAL.
\n

GooglePayButtonType

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValue
PAY_WHITE'PAY_WHITE'
PAY_WHITE_NO_SHADOW'PAY_WHITE_NO_SHADOW'
BUY_WHITE'BUY_WHITE'
BUY_WHITE_NO_SHADOW'BUY_WHITE_NO_SHADOW'
PAY_BLACK'PAY_BLACK'
BUY_BLACK'BUY_BLACK'
DONATE_BLACK'DONATE_BLACK'
\n

Interfaces

\n

GooglePayRequest

\n
interface GooglePayRequest {
  /**
   * Sets the ENVIRONMENT for testing Google Pay
   */
  environment: 'development' | 'production';

  /**
   * Sets the theme for the payment sheet UI.
   */
  theme: 'dark' | 'light';
  /**
   * Major API version. The value is 2 for this specification.
   */
  apiVersion: number;
  /**
   * Minor API version. The value is 0 for this specification.
   */
  apiVersionMinor: number;
  merchantInfo: {
    /**
     * Merchant name encoded as UTF-8. Merchant name is rendered in the payment sheet. In TEST environment, or if a merchant isn't recognized, a “Pay Unverified Merchant” message is displayed in the payment sheet.
     */
    merchantName: string;
  };

  allowedPaymentMethods: {
    /**
     * A short identifier for the supported payment method.
     * Only CARD and PAYPAL currently are supported entries
     */
    type: string;

    parameters: {
      /**
       * Fields supported to authenticate a card transaction.
       * PAN_ONLY: This authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
       * CRYPTOGRAM_3DS: This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
       */
      allowedAuthMethods: Array<string>;

      /**
       * One or more card networks that you support, also supported by the Google Pay API.
       * AMEX
       * DISCOVER
       * INTERAC
       * JCB
       * MASTERCARD
       * VISA
       */
      allowedCardNetworks: string;

      /**
       * Set to false if you don't support prepaid cards. Default: The prepaid card class is supported for the card networks specified.
       */
      allowPrepaidCards?: boolean;

      /**
       * Set to false if you don't support credit cards. Default: The credit card class is supported for the card networks specified.
       */
      allowCreditCards?: boolean;

      /**
       * Set to true to request assuranceDetails. This object provides information about the validation performed on the returned payment data.
       */
      assuranceDetailsRequired?: boolean;

      /**
       * Set to true if you require a billing address. A billing address should only be requested if it's required to process the transaction. Additional data requests can increase friction in the checkout process and lead to a lower conversion rate.
       */
      billingAddressRequired?: boolean;

      /**
       * The expected fields returned if billingAddressRequired is set to true.
       */
      billingAddressParameters?: {
        /**
         * Billing address format required to complete the transaction.
         * MIN: Name, country code, and postal code (default).
         * FULL: Name, street address, locality, region, country code, and postal code.
         */
        format?: string;

        /**
         * Set to true if a phone number is required to process the transaction.
         */
        phoneNumberRequired?: boolean;
      };
    };

    /**
     * Configure an account or decryption provider to receive payment information.
     * This property is required for the CARD payment method.
     */
    tokenizationSpecification?: {
      /**
       * A payment method tokenization type is supported for the given PaymentMethod.
       * For CARD payment method, use PAYMENT_GATEWAY or DIRECT.
       * For PAYPAL PaymentMethod, use DIRECT with no parameter.
       */
      type: TokenizationSpecificationType;

      /**
       * Parameters specific to the selected payment method tokenization type.
       */
      parameters: {
        gateway: string;
        gatewayMerchantId: string;
      };
    };
  };

  /**
   * Details about the authorization of the transaction based upon whether the user agrees to the transaction or not. Includes total price and price status.
   * https://developers.google.com/pay/api/android/reference/request-objects#TransactionInfo
   */
  transactionInfo: {
    /**
     * Array containing the transaction items for the transaction (item, shipping, tax, etc.)
     */
    displayItems: Array<GoogelPayDisplayItems>;
    /**
     * ISO 4217 alphabetic currency code.
     */
    currencyCode: string;

    /**
     * ISO 3166-1 alpha-2 country code where the transaction is processed. This is required for merchants based in European Economic Area (EEA) countries.
     */
    countryCode?: string;

    /**
     * A unique ID that identifies a transaction attempt. Merchants may use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API.
     */
    transactionId?: string;

    /**
     * The status of the total price used.
     */
    totalPriceStatus: TotalPriceStatusValue;

    /**
     * Total monetary value of the transaction with an optional decimal precision of two decimal places. This field is required unless totalPriceStatus is set to NOT_CURRENTLY_KNOWN.
     * The format of the string should follow the regex format: ^[0-9]+(\\.[0-9][0-9])?$
     */
    totalPrice?: string;

    /**
     * Custom label for the total price within the display items.
     */
    totalPriceLabel?: string;

    /**
     * Affects the submit button text displayed in the Google Pay payment sheet.
     */
    checkoutOption?: CheckoutOptionValue;
  };

  /**
   * Set to true to request an email address.
   */
  emailRequired?: boolean;

  /**
   * Set to true to request a full shipping address.
   */
  shippingAddressRequired?: boolean;

  /**
   * If shippingAddressParameters is set to true, specify shipping address restrictions.
   */
  shippingAddressParameters?: {
    /**
     * ISO 3166-1 alpha-2 country code values of the countries where shipping is allowed. If this object isn't specified, all shipping address countries are allowed.
     */
    allowedCountryCodes?: Array<string>;
    /**
     * Set to true if a phone number is required for the provided shipping address.
     */
    phoneNumberRequired?: boolean;
  };
}
\n

PaymentCancelledEventData

\n
interface PaymentCancelledEventData extends EventData {
  eventName: string;
  object: any;
}
\n

PaymentErrorEventData

\n
interface PaymentErrorEventData extends EventData {
  eventName: string;
  object: any;
  data: {
    statusCode: number;
  };
}
\n

PaymentSuccessEventData

\n
interface PaymentSuccessEventData extends EventData {
  eventName: string;
  object: any;
  data: {
    /**
     * Data about the selected payment method.
     */
    paymentMethodData: {
      /**
       * PaymentMethod type selected in the Google Pay payment sheet.
       */
      type: string;

      /**
       * User-facing message to describe the payment method that funds this transaction.
       */
      description: string;

      /**
       * The value of this property depends on the payment method type returned. For CARD, see CardInfo.
       */
      info: {
        /**
         * The details about the card. This value is commonly the last four digits of the selected payment account number.
         */
        cardDetails: string;

        /**
         * This object provides information about the validation performed on the returned payment data if assuranceDetailsRequired is set to true in the CardParameters.
         */
        assuranceDetails: {
          /**
           * If true, indicates that Cardholder possession validation has been performed on returned payment credential.
           */
          accountVerified: boolean;

          /**
           * If true, indicates that identification and verifications (ID&V) was performed on the returned payment credential.
           * If false, the same risk-based authentication can be performed as you would for card transactions. This risk-based authentication can include, but not limited to, step-up with 3D Secure protocol if applicable.
           */
          cardHolderAuthenticated: boolean;
        };

        /**
         * The payment card network of the selected payment. Returned values match the format of allowedCardNetworks in CardParameters.
         * This card network value should not be displayed to the buyer. It's used when the details of a buyer's card are needed. For example, if customer support needs this value to identify the card a buyer used for their transaction. For a user-visible description, use the description property of PaymentMethodData instead.
         */
        cardNetwork: string;

        /**
         * The billing address associated with the provided payment method, if billingAddressRequired is set to true in CardParameters.
         */
        billingAddress?: Address;
      };

      /**
       * Payment tokenization data for the selected payment method.
       */
      tokenizationData: {
        /**
         * \tThe type of tokenization to be applied to the selected payment method. This value matches the type set in PaymentMethodTokenizationSpecification.
         */
        type: string;

        /**
         * The generated payment method token.
         * PAYMENT_GATEWAY: JSON object string that contains a chargeable token issued by your gateway.
         * DIRECT: protocolVersion, signature, and a signedMessage for decryption. See Payment method token structure for more information.
         */
        token: {
          /**
           * Identifies the encryption or signing scheme under which the message is created. It allows the protocol to evolve over time, if needed.
           */
          protocolVersion: string;

          /**
           * Verifies that the message came from Google. It's base64-encoded, and created with ECDSA by the intermediate signing key.
           */
          signature: string;

          /**
           * A JSON object serialized as a string that contains the encryptedMessage, ephemeralPublicKey, and tag. It's serialized to simplify the signature verification process.
           */
          signedMessage: string;

          /**
           * JSON object string that contains a chargeable token issued by your gateway
           */
          rawToken: string;
        };
      };
    };

    /**
     * Email address, if emailRequired is set to true in the PaymentDataRequest. If another request has the property set to true there's no effect.
     */
    email: string;

    /**
     * Shipping address, if shippingAddressRequired is set to true in the PaymentDataRequest.
     */
    shippingAddress: Address;
  };
}
\n

Address

\n
Address {
\t/**
\t * The full name of the addressee.
\t */
\tname;

\t/**
\t * The postal or ZIP code.
\t */
\tpostalCode;

\t/**
\t * ISO 3166-1 alpha-2 country code.
\t */
\tcountryCode;

\t/**
\t * A telephone number, if phoneNumberRequired is set to true in the PaymentDataRequest.
\t */
\tphoneNumber;

\t/**
\t * The first line of the address.
\t */
\taddress1;

\t/**
\t * The second line of the address.
\t */
\taddress2;

\t/**
\t * The third line of the address.
\t */
\taddress3;

\t/**
\t * City, town, neighborhood, or suburb.
\t */
\tlocality;

\t/**
\t * A country subdivision, such as a state or province.
\t */
\tadministrativeArea;

\t/**
\t * The sorting code.
\t */
\tsortingCode;
}
\n

GooglePayDisplayItems

\n
interface GoogelPayDisplayItems {
  label: string;
  type: string;
  price: string;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":20,"lastMonth":142}},"@global66/nativescript-plugin-appsflyer":{"name":"@global66/nativescript-plugin-appsflyer","version":"2.0.5","license":{"type":"MIT","url":"https://github.com/AppsFlyerSDK/nativescript-plugin-appsflyer/blob/master/LICENSE"},"readme":"\n

appsflyer-nativescript-plugin

\n

Nativescript Library for AppsFlyer SDK

\n

\"npm

\n

Table of content

\n\n

This plugin is built for

\n\n

Breaking Changes

\n

v6.5.4

\n

Android: deepLinkResult will return an object instead of a string

\n

Installation

\n

$ tns plugin add nativescript-plugin-appsflyer

\n

Integration

\n
\n

Call module by adding (native javascript):

\n

var appsFlyer = require("nativescript-plugin-appsflyer");

\n
\n
appsFlyer.initSdk(options, callback): void
\n

initializes the SDK.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectSDK configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
nametypedefaultdescription
devKeystringAppsflyer Dev key
appIdstringApple Application ID (for iOS only)
isDebugbooleanfalsedebug mode (optional)
onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
onConversionDataFailurefunction
\n

Example:

\n
 var options = {
            devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
            appId: \"975313579\",
            isDebug: true,
            timeToWaitForATTUserAuthorization: 60,
            onConversionDataSuccess: function(_res){
                console.log(JSON.stringify(_res));
            },
            onConversionDataFailure: function(_res){
                console.warn(\"failure: \" + JSON.stringify(_res));
            },
        };

        appsFlyer.initSdk(options).then(function(result) {
            viewModel.set(\"initSdkResponse\", result.status);
        }, function(err) {
            viewModel.set(\"initSdkResponse\", JSON.stringify(err));
        });
\n
\n
appsFlyer.logEvent(options): Promise<any>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectlog event configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
eventValuesObjectevent details (see example bellow)
\n

Example: (native javascript)

\n
 
        var options = {
            eventName: \"af_add_to_cart\",
            eventValues: {
                \"af_content_id\": \"id123\",
                \"af_currency\": \"USD\",
                \"af_revenue\": \"2\"
            }
        };
        appsFlyer.logEvent(options).then(function(result) {
            viewModel.set(\"logEventResponse\", result);
        }, function(err) {
            viewModel.set(\"logEventResponse\", JSON.stringify(err));
        });
\n

Demo

\n

This plugin has a demo project bundled with it. To give it a try , clone this repo and from root a.e. nativescript-plugin-appsflyer execute the following:

\n
npm run setup
\n\n","downloadStats":{"lastDay":1,"lastWeek":3,"lastMonth":106}},"@voicethread/nativescript-downloader":{"name":"@voicethread/nativescript-downloader","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript Downloader \"apple\" \"android\"\"npm\"

\n
\n

@voicethread/nativescript-downloader

\n
\n

This downloader plugin exports class Downloader that has a single function download().

\n

For iOS, Downloader uses NSURLSession to initiate a download from a valid URL.

\n

For Android, Downloader uses DownloadManager to initiate a download from a valid URL.

\n

https://github.com/VoiceThread/nativescript-plugins/assets/20136906/80d40e3f-2c42-4d61-8213-52b84e965ac9

\n

Contents

\n\n

Installation

\n
npm install @voicethread/nativescript-downloader --save
\n

OR

\n
ns plugin add @voicethread/nativescript-downloader
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application page by looking at apps/demo/src/plugin-demos/nativescript-downloader.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { Downloader, DownloadOptions, MessageData } from '@voicethread/nativescript-downloader';
\n
    \n
  1. Create a downloader instance.
    2. \n
\n
const dp = new Downloader();
\n
    \n
  1. Download a file.
    2. \n
\n
const dlfile = await dp.download({ url: 'https://some.domain.com/file.txt' });
\n

The only required option is the URL to be downloaded. You can also pass other options as listed in DownloadOptions below before starting the download.

\n

You can listen to events emitted by the download during operation in case you want to update a download status message/indicator or handle an error. Upon success, the plugin will return a File reference to the downloaded file located in the app cache directory for Android and the app document's directory for iOS, which can then be used directly by the dev without extra permissions for any other operations on the file.

\n
dp.on(Downloader.DOWNLOAD_STARTED, (payload: MessageData) => {
  console.log('started', payload?.data?.contentLength);
});
dp.on(Downloader.DOWNLOAD_PROGRESS, (payload: MessageData) => {
  console.log(' >>>>>  ', payload?.data?.progress, payload?.data?.url, payload?.data?.destinationFilename);
});
dp.on(Downloader.DOWNLOAD_COMPLETE, (payload: MessageData) => {
  console.log('finished', payload?.data?.filepath);
});
dp.on(Downloader.DOWNLOAD_ERROR, (payload: MessageData) => {
  console.log('ERROR!', payload?.data);
});
dp.download({ url: 'https://some.domain.com/file.txt' }).then((file: File) => {
  if (!file) {
    return console.error('Failed to download file!');
  }
  console.log('Finished downloading file ', file.path);
});
\n

Supported Downloader Options

\n
interface DownloadOptions {
  url: string; //must be a valid url, usually https unless you allow http in your app
  request?: RequestOptions; //request header strings to be passed to the https connection
  destinationPath?: string; //must be a valid path for app to create a new file (existing directory with valid filename)
  destinationFilename?: string; //must be a string like XXXX[].[YYYYYY] without any path preceding
  copyPicker?: boolean; //present user with UI to choose destination directory to save a copy of download
  copyGallery?: boolean; //iOS only, if download has a recognized image/video file name extension, save a copy to iOS Photos, ignored on Android
  copyDownloads?: boolean; //Android only, adds a copy to device Downloads directory using legacy DIRECTORY_DOWNLOADS, or MediaStore for 29+
  notification?: boolean; //Android-only. Show system notification for download success/failure. defaults to false
}
\n

For both platforms, the plugin will attempt to download the file with the filename/path supplied by the user in options, or try to find a filename to use from the url. In either case, if a file already exists at any of the output paths where a copy is being saved, it will instead append a '-#' to the filename before saving to ensure there is no conflict.

\n

Android Specifics

\n

Android apps will download files by default to the app's cache directory, which is the only directory supported by DownloadManager and no special permissions are necessary. This will correspond to android.content.Context.getExternalCacheDir() if the device has an sd card, or android.content.Context.getCacheDir() if not. This file can then be used directly for other purposes in the app without any additional permissions/requests.

\n

By default, the plugin disabled Android system notifications of downloads, which also requires you to add that permission to the Android Manifest like so:

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.DOWNLOAD_WITHOUT_NOTIFICATION\"/>
\n

You can choose to enable these notifications which will show the user progress and completion/failure notifications.

\n

Android version of the plugin supports two destination copy approaches:

\n
    \n
  1. \n

    copyPicker will first download the file to the default cache directory, and then present the user with a picker UI so that they select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice.

    \n
    2. \n
  2. \n

    copyDownloads will save a copy to the device's Download directory in case the user wants to use that file in another application from an easy to find location. API versions > 28 use MediaStore, and no extra permissions are necessary. For API versions 28 and below, you'll need to ensure you have Android Manifest permissions defined using:

    \n
    3. \n
\n
<manifest ... >
  <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
  <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
\n

Tested and working on Android API 25-33.

\n

iOS Specifics

\n

iOS applications will download files by default to the application's documents directory, which is defined in Nativescript as knownFolders.documents() and does not require any extra permissions from the user. This also has the advantage of being the location where an application can make downloaded files visible to other apps once it has been configured as a document provider.

\n

The iOS version of the plugin supports two destination copy approaches:

\n
    \n
  1. \n

    copyPicker will first download the file to the application documents directory, and then present the user with a picker UI so that they can select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice. Note: This is only available on iOS 14+

    \n
    2. \n
  2. \n

    copyGallery will save a copy to the device's Photos Gallery in case the user wants to use that file in another application from an easy to find location. This approach requires the user to grant photo library permission first in order to save the downloaded file. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding something like the following:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Requires access to save downloaded media to photo library.</string>
    \n
    3. \n
\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n

Tested and working on iOS 12.x-16.x with caveats noted above.

\n

Acknowledgements

\n

This plugin was inspired by https://github.com/tobydeh/nativescript-download-progress

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":103}},"nativescript-videorecorder":{"name":"nativescript-videorecorder","version":"3.0.0-beta.6","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript VideoRecorder

\n

Install

\n

tns plugin add nativescript-videorecorder

\n

QuickStart

\n

JavaScript

\n
var vr = require('nativescript-videorecorder');

var options = {
    saveToGallery: true,
    duration: 30,
    format: 'mp4',
    size: 10,
    hd: true,
    explanation: 'Why do i need this permission'
}

var videorecorder = new vr.VideoRecorder(options);

videorecorder.record().then((data)=>{
  console.log(data.file)
}).catch((err)=>{
  console.log(err)
})
\n

TypeScript

\n
import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder';

const options: VideoRecorderOptions = {
    hd: true
    saveToGallery: true
}
const videorecorder = new VideoRecorder(options)

videorecorder.record().then((data) => {
    console.log(data.file)
}).catch((err) => {
    console.log(err)
})
\n

VideoRecorder

\n

Options

\n

Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

\n\n

Additional parameters for Android:

\n\n

Additional parameters for iOS:

\n\n

VideoRecorder attributes:

\n\n

VideoRecorder methods:

\n\n

Promises above can be rejected with:

\n\n

AdvancedVideoView

\n

AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

\n

Requires API 21+ on Android 🤖

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder/advanced\">
<recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
\n
const advancedView = page.getViewById(\"camera\");
advancedView.startRecording();
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
start()voidStarts the camera preview
stop()voidStop the camera preview
startRecording()voidStart recording camera preview.
stopRecording()voidStop recording camera preview.
toggleCamera()voidToggles between front or the back camera.
toggleTorch()voidToggles the torch (iOS only for now)
durationintGet the current recording video duration.
cameraPositionBACKvoidGets or Sets camera position
outputOrientationPORTRAITvoidGets or Sets output video orientation
isTorchAvailablebooleanReadOnly: is the torch supported for this camera
torchfalsebooleanEnable/Disable torch (iOS only for now)
qualityMAX_480PvoidGets or sets Video Quality
\n

outputOrientation

\n

Be careful to not change orientation while recording, it's not supported.

\n

Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

\n

This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

\n","downloadStats":{"lastDay":1,"lastWeek":44,"lastMonth":150}},"@valor/nativescript-view-shot":{"name":"@valor/nativescript-view-shot","version":"1.0.0","license":"Apache-2.0","readme":"

@valor/nativescript-view-shot

\n

Take a screenshot of an existing view, or render a view in the background and take a screenshot of it.

\n
ns plugin add @valor/nativescript-view-shot
\n

Usage

\n

Core/flavor agnostic

\n

Render a visible view:

\n
<GridLayout id=\"visibleView\">
    <Label backgroundColor=\"LightGreen\" text=\"View to screenshot\" class=\"h1\" textWrap=\"true\"/>
</GridLayout>
\n
  renderVisible() {
    const hostView: GridLayout = this.page.getViewById('visibleView');
    const result = renderToImageSource(hostView);
    // work with result
  }
\n

Render an invisible view:

\n
<viewShot:LogicalViewContainer>
<!-- this view is completely detached! Handle measuring/layout yourself! -->
    <GridLayout id=\"hostView\">
    <Label backgroundColor=\"LightBlue\" text=\"Hello World\" class=\"h1\" textWrap=\"true\"/>
    </GridLayout>
</viewShot:LogicalViewContainer>
\n
  render() {
    const hostView: GridLayout = this.page.getViewById('hostView');
    // measure and layout the detached view with the desired width/height
    measureAndLayout(hostView, Screen.mainScreen.widthDIPs);
    const result = renderToImageSource(hostView);
    // work with result
  }
\n

Create and render a view completely detached:

\n
  renderDetached() {
    const myView = new GridLayout();
    const renderedViewData = loadViewInBackground(myView);
    // measure and layout the detached view with the desired width/height
    measureAndLayout(renderedViewData.hostView, Screen.mainScreen.widthDIPs);
    const result = renderToImageSource(renderedViewData.hostView);
    disposeBackgroundView(renderedViewData);
    // work with result
  }
\n

API

\n
import { ImageSource, View } from '@nativescript/core';

export interface BackgroundViews {
  // parent of the view that will be rendered to ensure margins are respected
  hostView: View;
  // a view that wraps the hostView and is collapsed
  hiddenHost: View;
  // a view container that will be inserted in the view tree to make it part of the view hierarchy
  // (enables CSS inheritance)
  logicalContainer?: View;
}
export function measureAndLayout(hostView: View, width?: number, height?: number): void;

export class LogicalViewContainer extends LayoutBase {}

export function renderToImageSource(hostView: View): ImageSource;

export function loadViewInBackground(view: View, host?: View): BackgroundViews;

export function disposeBackgroundView(backgroundViews: BackgroundViews): void;
\n

Angular

\n
<StackLayout>
  <Button text=\"Render detached view\" (tap)=\"renderTemplate(myTemplate, true)\" class=\"btn btn-primary\"></Button>
  <Button text=\"Render detached in root (check css)\" (tap)=\"renderTemplate(myTemplate, false)\" class=\"btn btn-primary\"></Button>
  <Button text=\"Take screenshot of view\" (tap)=\"screenshotView(myView)\" class=\"btn btn-primary\"></Button>
  <!-- the view will be rendered in ViewHost for the purposes of CSS handling -->
  <ng-container #viewHost></ng-container>
  <GridLayout #myView>
    <Label class=\"h1\" backgroundColor=\"lightblue\">Screenshot view</Label>
  </GridLayout>
  <Label *ngIf=\"loading\">Loading image...</Label>
  <Label>result:</Label>
  <ng-template #myTemplate>
    <GridLayout>
      <Image [src]=\"webImage2\"></Image>
      <Label class=\"child-label h2\">some text</Label>
    </GridLayout>
  </ng-template>
</StackLayout>
\n
export class NativescriptViewShotComponent {
  viewShotService = inject(ViewShotService);
  @ViewChild('viewHost', { read: ViewContainerRef }) vcRef: ViewContainerRef;

  srcUrl = `https://picsum.photos/${Screen.mainScreen.widthPixels}/200`;
  webImage$ = ImageSource.fromUrl(this.srcUrl);
  webImage2: ImageSource;
  imgSrc: ImageSource;

  async renderTemplate(template: TemplateRef<unknown>, attached: boolean) {
    const width = Screen.mainScreen.widthDIPs;
    // reusing imageSource on iOS sometimes doesn't work, so we create a new one each time
    this.webImage2 = new ImageSource((await this.webImage$).ios);
    this.loading = false;
    this.imgSrc = await this.viewShotService.captureInBackground(template, {
      logicalHost: attached ? this.vcRef : undefined,
      width,
      delay: 0,
    });
  }

  screenshotView(view: View) {
    this.imgSrc = renderToImageSource(view);
  }
}
\n

API

\n
import { Injector, TemplateRef, Type, ViewContainerRef } from '@angular/core';
import { NgViewRef } from '@nativescript/angular';
import { ImageSource, View, ViewBase } from '@nativescript/core';
export interface DrawableOptions<T = unknown> {
    /**
     * target width of the view and image, in dip. If not specified, the measured width of the view will be used.
     */
    width?: number;
    /**
     * target height of the view and image, in dip. If not specified, the measured height of the view will be used.
     */
    height?: number;
    /**
     * injector to use for the component. If not specified, the injector of the logical host will be used.
     * if there is not logical host, then this service's injector will be used. (most likely the root injector)
     */
    injector?: Injector;
    /**
     * how much should we delay the rendering of the view into the image.
     * This is useful if you want to wait for an image to load before rendering the view.
     * If using a function, it will be called with the NgViewRef as the first argument.
     * The NgViewRef can be used to get the EmbeddedViewRef/ComponentRef and the NativeScript views.
     * This is useful as you can fire an event in your views when the view is ready, and then complete
     * the promise to finish rendering to image.
     */
    delay?: number | ((viewRef: NgViewRef<T>) => Promise<void>);
    /**
     * The logical host of the view. This is used to specify where in the DOM this view should lie.
     * The practical use of this is if you want the view to inherit CSS styles from a parent.
     * If this is not specified, the view will be handled as a root view,
     * meaning no ancestor styles will be applied, similar to dropping the view in app.component.html
     */
    logicalHost?: ViewBase | ViewContainerRef;
}
export declare class ViewShotService {
    captureInBackground<T>(type: Type<T> | TemplateRef<T>, options?: DrawableOptions<T>): Promise<ImageSource>;
    captureRenderedView(view: View): ImageSource;
}
\n

Important details

\n

Some views (like images) take a while to load. So you might need to add a delay between start rendering a view and generating the image. In angular, the delay option is available for this purpose, and it can be a number, for a simple wait, or a function that will receive the NgViewRef as a parameter and must return a promise. This can be used to listen to events on the view, or to wait for a specific amount of time.

\n

License

\n

MIT License

\n","downloadStats":{"lastDay":22,"lastWeek":166,"lastMonth":711}},"@nativescript/google-maps":{"name":"@nativescript/google-maps","version":"1.6.0","license":"Apache-2.0","readme":"

@nativescript/google-maps

\n

A plugin that allows you to use the Maps SDK to access Google Maps features.

\n

Contents

\n\n

Prerequisites

\n
    \n
  1. \n

    To use the Google Maps API, register your app in the Google API Console and obtain an API key.

    \n
    2. \n
  2. \n

    Add the Google Maps API key to your app.

    \n
    3. \n
\n

Android

\n

To add the API key for Android, modify the AndroidManifest.xml file and add the <meta-data> tag with the com.google.android.geo.API_KEY as its name and the key as the value.

\n
<application
  android:name=\"com.tns.NativeScriptApplication\"
  android:allowBackup=\"true\"
  android:icon=\"@mipmap/ic_launcher\"
  android:label=\"@string/app_name\"
  android:theme=\"@style/AppTheme\"
  android:hardwareAccelerated=\"true\">

  <meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"yourKey\"/>
</application>
\n

iOS

\n

To add the API key for iOS, add the TNSGoogleMapsAPIKey key and the API key as the value to the Info.plist file, located\nat App_Resources/iOS.

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
  <dict>
    <key>TNSGoogleMapsAPIKey</key>
    <string>yourKey</string>
  </dict>
</plist>
\n

Installation

\n
npm install @nativescript/google-maps
\n

To use the plugin in the different NativeScript flavors, modify the main.ts to import and then register it.

\n

Use @nativescript/google-maps with core

\n
    \n
  1. Register the plugin namespace with Page's xmlns attribute providing your prefix( map, for example).
    2. \n
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:map=\"@nativescript/google-maps\">
\n
    \n
  1. Access the <MapView> using the the map prefix.
    2. \n
\n
<map:MapView ...
\n

Below is the complete code from the 2 preceding steps:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:map=\"@nativescript/google-maps\">
\t<map:MapView
\t\tlat=\"{{lat}}\"
\t\tlng=\"{{lng}}\"
\t\tzoom=\"{{zoom}}\"
\t\tbearing=\"{{bearing}}\"
\t\ttilt=\"{{tilt}}\"
\t\tmapTap=\"{{onTap}}\"
\t\tmapLongPress=\"{{onLongPress}}\"
\t\tmarkerTap=\"{{onMarkerTap}}\"
\t/>
</Page>
\n
    \n
  1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
    2. \n
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:map=\"@nativescript/google-maps\">
\t<map:MapView
\t\tlat=\"{{lat}}\"
\t\tlng=\"{{lng}}\"
\t\tzoom=\"{{zoom}}\"
\t\tbearing=\"{{bearing}}\"
\t\ttilt=\"{{tilt}}\"

\t\tready=\"{{onReady}}\" 👈

\t\tmapTap=\"{{onTap}}\"
\t\tmapLongPress=\"{{onLongPress}}\"
\t\tmarkerTap=\"{{onMarkerTap}}\"
\t/>
</Page>
\n

To use the plugin in the different NativeScript flavors, modify the main.ts to register it.

\n

Use @nativescript/google-maps with Angular

\n
    \n
  1. Register the plugin by adding the GoogleMapsModule to the imports array of the AppModule, in app.module.ts as follows:
    2. \n
\n
import { GoogleMapsModule } from '@nativescript/google-maps/angular';

// Registering
@NgModule({
    imports: [
      GoogleMapsModule
    ],
    declarations: [
      AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
    \n
  1. Add MapView to your markup.
    2. \n
\n
<MapView
\t(mapTap)=\"onTap($event)\"
\t(mapLongPress)=\"onLongPress($event)\"
\t(markerTap)=\"onMarkerTap($event)\"
>
</MapView>
\n
    \n
  1. Manage
    2. \n
\n
<MapView
\t(ready)=\"onReady($event)\" 
\t(mapTap)=\"onTap($event)\"
\t(mapLongPress)=\"onLongPress($event)\"
\t(markerTap)=\"onMarkerTap($event)\"
>
</MapView>
\n
    \n
  1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
    2. \n
\n
\n

Use @nativescript/google-maps with Vue

\n
    \n
  1. In the app.ts file, register the plugin by passing its reference to the use() method to the app instance.
    2. \n
\n
\n

Vue

\n
import { createApp,registerElement } from 'nativescript-vue';
import GoogleMaps from '@nativescript/google-maps/vue'

import Home from './components/Home.vue';

const app = createApp(Home)
app.use(GoogleMaps)
\n
\n

Note To handle the map features, see the GoogleMap object API.

\n
\n
\n
    \n
  1. Add the MapView component to the markup.
    2. \n
\n
<MapView
\t@ready=\"onReady\"
\t@mapTap=\"onTap\"
\t@mapLongPress=\"onLongPress\"
\t@markerTap=\"onMarkerTap\"

/>
\n
\n

Note To handle the map features, see the GoogleMap object API.

\n
\n
    \n
  1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
    2. \n
\n

Control the camera

\n

To programmatically update the camera position, call the animateCamera() method on the GoogleMap object and pass it a CameraUpdate instance.

\n
import { CameraUpdate } from '@nativescript/google-maps';

googleMap.animateCamera(
\tCameraUpdate.fromCoordinate({
\t\t\tlat: -32.1234,
\t\t\tlng: 125.1234
\t\t},
\t\tgoogleMap.cameraPosition.zoom
\t)
);
\n

Set the map type

\n

To set the map type, set the mapType property to one of the MapType options.

\n
import { GoogleMap, MapType } from '@nativescript/google-maps';

map: GoogleMap;
map.mapType = MapType.Hybrid;
\n

See CameraUpdate for more methods you can call and pass to the animateCamera() method.

\n

Styling the map

\n

You can style the map's items, such as roads, parks, businesses, and other points of interest.

\n

Styling works only on the normal map type. Styling does not affect indoor maps.

\n

To style your map, use a JSON file generated by the Google Maps APIs Styling Wizard. In addition to changing the appearance of features, you can also hide features completely.

\n
[
  {
    \"featureType\": \"all\",
    \"stylers\": [
      { \"color\": \"#C0C0C0\" }
    ]
  },{
    \"featureType\": \"road.arterial\",
    \"elementType\": \"geometry\",
    \"stylers\": [
      { \"color\": \"#CCFFFF\" }
    ]
  },{
    \"featureType\": \"landscape\",
    \"elementType\": \"labels\",
    \"stylers\": [
      { \"visibility\": \"off\" }
    ]
  }
]
\n

To apply a custom style to your map you can set the mapStyle property on your GoogleMap object:

\n
import { GoogleMap } from '@nativescript/google-maps';

map: GoogleMap;
map.mapStyle = [{
\t\"featureType\": \"landscape\",
\t\"elementType\": \"labels\",
\t\"stylers\": [
\t\t{ \"visibility\": \"off\" }
\t]
}];
\n

API

\n

MapView Class

\n

Properties

\n

The following properties are available for adjusting the camera view on initialization:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
latnumberLatitude, in degrees
lngnumberLongitude, in degrees
zoomnumberZoom level (described here)
bearingnumberBearing, in degrees
tiltnumberTilt, in degrees
\n

Events

\n

MapView provides the following events:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
readyFires when the MapView is ready for use and provides a GoogleMap instance for managing mapping featurees.
mapTapFires when a coordinate is tapped on the map
mapLongPressFires when a coordinate is long-pressed on the map
markerTapFires when a marker is tapped
myLocationTapFires when 'My Location' is tapped
myLocationButtonTapFires when the 'My Location' button is tapped
markerDragStartFires when a marker begins dragging
markerDraggingFires while a marker is being dragged
markerDragEndFires when a marker ends dragging
tileRenderingStartFires when tile rendering begins
tileRenderingEndFires when tile rendering ends
cameraPositionFires when the map viewport state changes, camera states include idle | start | moving
circleFires when a circle is tapped
polygonFires when a polygon is tapped
polylineFires when a polyline is tapped
poiFires when a POI is tapped
groundOverlayFires when a ground overlay is tapped
infoWindowTapFires when a marker's info window is tapped
infoWindowLongPressFires when a marker's info window is long-pressed
infoWindowCloseFires when a marker's info window is closed
markerInfoContentsIf this method returns a view, it will be placed within the default info window frame.
markerInfoWindowCalled when a marker is about to become selected, and provides an optional custom info window to use for that marker if this method returns a view.
activeBuildingFires when a building is focused on
activeLevelFires when the level of the focused building changes
\n

GoogleMap Object

\n

This class provides the mapping features and its instance is available from the MapView instance's ready event:

\n
function onReady(event: MapReadyEvent) {
\tconst map: GoogleMap = event.map;
}
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
buildingsEnabledbooleanEnables Buildings
maxZoomLevelnumberMaximum level of zoom
minZoomLevelnumberMinimum level of zoom
myLocationEnabledbooleanEnables "My Location"
trafficEnabledbooleanEnables traffic
cameraPositionCameraPositionSee Camera Position
projectionProjectionSee Projection
uiSettingsIUISettingsSee UISettings Interface
mapStyleStyle[]See Map Styles
mapTypeMapTypeSee MapType
nativeanyreadonly: Platform-specific instance of the GoogleMap class. com.google.android.gms.maps.GoogleMap for Android and GMSMapView for iOS.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
addMarker(marker: MarkerOptions)MarkerAdds a marker to the map
removeMarker(marker: Marker)voidRemoves a marker from the map
addTileOverlay(options: TileOverlayOptions)TileOverlayAdds a tile overlay to the map
removeTileOverlay(overlay: TileOverlay)voidRemoves a tile overlay from the map
addCircle(circle: CircleOptions)CircleAdds a circle to the map
removeCircle(circle: Circle)voidRemoves a circle from the map
addGroundOverlay(options: GroundOverlayOptions)GroundOverlayAdds a ground overlay to the map
removeGroundOverlay(groundOverlay: GroundOverlay)Removes a ground overlay from the map
addPolygon(options: PolygonOptions)PolygonAdds a polygon to the map
removePolygon(polygon: Polygon)Removes a polygon from the map
addPolyline(options: PolylineOptions)PolylineAdds a polyline to the map
removePolyline(polyline: Polyline)voidRemoves a polyline from the map
animateCamera(update: CameraUpdate)voidAnimates camera to a new position
snapshot()Promise<ImageSource>Returns a platform-specific image of the map's current viewport
clear()voidClears all objects added to the map
\n

Native Map Object

\n

GoogleMap gives you access to the platforms native map objects native | android | ios

\n

consult the appropriate SDK reference on how to use it: iOS | Android

\n

Camera Position

\n

The map's current camera position can be read from the cameraPosition property of a GoogleMap object.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
targetCoordinateThe camera target is the location of the center of the map, specified as lat and lng.
bearingnumberThe direction in which the camera points measured in degrees clockwise from north.
tiltnumberThe viewing angle of the camera measured in degrees
zoomnumberThe scale of the map
\n

CameraUpdate Class

\n

CameraUpdate provides multiple methods to create a target CameraPosition.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
fromCoordinate(coordinate: Coordinate, zoom: number)Returns a CameraUpdate from a single coordinate
fromCoordinates(coordinates: Coordinate[], padding: number)Returns a CameraUpdate from multiple coordinates
fromCoordinates(coordinates: Coordinate[], width: number, height: number, padding: number)Returns a CameraUpdate from multiple coordinates with specified height, width and padding
fromCameraPosition(position: CameraPosition)Returns a CameraUpdate from a CameraPosition
zoomIn()Returns a CameraUpdate that has zoomed in
zoomOut()Returns a CameraUpdate that has zoomed out
zoomTo(value: number)Returns a CameraUpdate that has zoomed to a value
zoomBy(amount: number, point?: { x: number; y: number })Returns a CameraUpdate that has zoomed and panned
scrollBy(x: number, y: number)Returns a panned CameraUpdate
\n

Projection

\n

A projection is used to translate between on screen location and geographic coordinates on the surface of the Earth.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
fromScreenLocation(point: { x: number; y: number })Returns the geographic location that corresponds to a screen location.
getVisibleRegion()Gets a projection of the viewing frustum for converting between screen coordinates and geo-latitude/longitude coordinates.
toScreenLocation(coordinate: Coordinate)Returns a screen location that corresponds to a geographical coordinate.
containsCoordinate(coordinate: Coordinate)Returns true if the coordinate is visible in the current viewport.
\n

UISettings Interface

\n

You can adjust the maps UI settings from the GoogleMap object by configuring the following properties of the uiSettings property:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
compassEnabledbooleanWhether the compass is enabled or not
indoorLevelPickerEnabledbooleanWhether the indoor level picker is enabled or not
mapToolbarEnabledbooleanWhether the map toolbar is enabled or not
myLocationButtonEnabledbooleanWhether the 'My Location' button is enabled or not
rotateGesturesEnabledbooleanWhether the compass is enabled or not
scrollGesturesEnabledbooleanWhether map scroll gestures are enabled or not
tiltGesturesEnabledbooleanWhether map tilt gestures are enabled or not
zoomGesturesEnabledbooleanWhether map zoom gestures are enabled or not
zoomControlsEnabledbooleanWhether map zoom controls are enabled or not
scrollGesturesEnabledDuringRotateOrZoombooleanWhether scroll gestures are enabled while rotating or zooming
\n

MapType enum

\n

The Google Maps API offers the following five types of maps:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
NoneNo tiles. The map is rendered as an empty grid with no tiles loaded.
NormalTypical road map. Shows roads, some features built by humans, and important natural features such as rivers. Road and feature labels are also visible.
SatelliteSatellite photograph data. Road and feature labels are not visible.
TerrainTopographic data. The map includes colors, contour lines and labels, and perspective shading. Some roads and labels are also visible.
HybridSatellite photograph data with road maps added. Road and feature labels are also visible.
\n

Markers

\n

Adding Markers

\n

You can create markers using the GoogleMap's object addMarker method by passing it a MarkerOptions object.

\n
function addMarker(map: GoogleMap, markerOptions: MarkerOptions): Marker {
\treturn map.addMarker(markerOptions);
}
\n

addMarker returns a Marker

\n

Marker Object

\n

It implements the [MarkerOptions] interface and has the following additional methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturns
hideInfoWindow()void
showInfoWindow()void
\n

MarkerOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
positionCoordinateThe position of the marker, specified as lat and lng
colorstring | ColorColor of the marker, shades are unavailable.
opacitynumberOpacity of the marker.
titlestringA string that's displayed in the info window when the user taps the marker
snippetstringAdditional text that's displayed below the title
iconImageSource | UIImage | BitmapA image that's displayed in place of the default marker image
draggablebooleanSet to true if you want to allow the user to move the marker. Defaults to false
flatbooleanBy default, markers are oriented against the screen, and will not rotate or tilt with the camera. Flat markers are oriented against the surface of the earth, and will rotate and tilt with the camera
rotationbooleanThe orientation of the marker, specified in degrees clockwise
anchorUnumberHorizontal icon offset from the marker position
anchorVnumberVertical icon offset from the marker position
userDataanyAdditional information assigned to the marker
zIndexnumberZ-index of the marker
\n

Coordinate

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
latnumber
lngnumber
\n

Removing Markers

\n

To remove a marker from the map, call the removeMarker() method on the GoogleMap instance and pass it the marker to be removed.

\n
function removeMarker(map: GoogleMap, marker: Marker) {
\tmap.removeMarker(marker);
}
\n

Circles

\n

Adding Circles

\n

To add a circle to the map, call the addCircle() method and specify its properties with a CircleOptions object.

\n
function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
\treturn map.addCircle(circleOptions);
}
\n

CircleOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
centerCoordinate
fillColorColor | string
radiusnumber
strokeColorColor | string
strokePatternPatternItem & Partial<NativeObject>[]
strokeWidthnumber
tappableboolean
visibleboolean
zIndexnumber
userData{ [key: string]: any }
\n

Removing Circles

\n

You can remove a circle using the GoogleMap's removeCircle() method.

\n
function removeCircle(map: GoogleMap, circle: Circle) {
\tmap.removeCircle(circle);
}
\n

Polygons

\n

Adding Polygons

\n

You can create polygons using the GoogleMap's object addPolygon() method by passing in the specified PolygonOptions.

\n
function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
\treturn map.addPolygon(polygonOptions);
}
\n

PolygonOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
pointsCoordinate[]
holesCoordinate[]
tappableboolean
strokeWidthnumber
strokeColorColor | string
fillColorColor | string
strokePatternPatternItem & Partial<NativeObject>[]
zIndexnumber
geodesicboolean
strokeJointTypeJointType
visibleboolean
userData{ [key: string]: any }
\n

Removing Polygons

\n

You can remove a Polygon using the GoogleMap's removePolygon function, like so:

\n
function removePolygon(map: GoogleMap, polygon: Polygon) {
\tmap.removePolygon(polygon);
}
\n

Polylines

\n
Adding Polylines
\n

You can create Polylines using the GoogleMap's object addPolyline function by passing it a PolylineOptions object.

\n
function addPolyline(map: GoogleMap, polylineOptions: PolylineOptions): Polyline {
\treturn map.addPolyline(polylineOptions);
}
\n

PolylineOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
widthnumber
pointsCoordinate[]
tappableboolean
geodesicboolean
visibleboolean
zIndexnumber
jointTypeJointType
patternPatternItem & Partial<NativeObject>[]
colorColor | string
startCapCap & Partial<NativeObject>
endCapCap & Partial<NativeObject>
userData{ [key: string]: any }
\n

Removing Polylines

\n

You can remove a Polyline using the GoogleMap's removePolyline function, like so:

\n
function removePolyline(map: GoogleMap, polyline: Polyline) {
\tmap.removePolyline(polyline);
}
\n

Ground Overlays

\n
Adding Ground Overlays
\n

You can create Ground Overlays using the GoogleMap's object addGroundOverlay function by passing in the specified GroundOverlay Options.

\n
function addGroundOverlay(map: GoogleMap, groundOverlayOptions: GroundOverlayOptions): GroundOverlay {
\treturn map.addGroundOverlay(groundOverlayOptions);
}
\n

GroundOverlayOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
zIndexnumber
visibleboolean
transparencynumber
positionCoordinate
boundsCoordinateBounds
tappableboolean
bearingnumber
imageImageSource
userDataany
widthnumber
heightnumber
anchorUnumber
anchorVnumber
\n

Removing Ground Overlays

\n

You can remove a GroundOverlay using the GoogleMap's removeGroundOverlay function, like so:

\n
function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
\tmap.removeGroundOverlay(groundOverlay);
}
\n

Tile Overlays

\n

Adding Tile Overlays

\n

You can create Tile Overlays using the GoogleMap's object addTileOverlay function by passing in the specified TileOverlay Options.

\n
function addTileOverlay(map: GoogleMap, tileOverlayOptions: TileOverlayOptions): TileOverlay {
\treturn map.addTileOverlay(tileOverlayOptions);
}
\n

TileOverlayOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyType
fadeInboolean
transparencynumber
visibleboolean
tileProviderTileProvider & Partial<NativeObject>
zIndexnumber
clearTileCache()void
\n

Setting tile overlay options after the tile overlay has been added to the map can have no effect on the tile overlay. To update the tile overlay, you may need to call clearTileCache().

\n

Removing Tile Overlays

\n

You can remove a TileOverlay using the GoogleMap's removeTileOverlay function, like so:

\n
function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
\tmap.removeTileOverlay(tileOverlay);
}
\n

Tile Providers

\n

Tile providers are objects that provide tiles to be used in a Tile Overlay.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderDescription
TileProviderBase class for tile providers
UrlTileProviderTile provider that returns a tile from a URL
\n

For example a UrlTileProvider can be created like so:

\n
const tileProvider = new UrlTileProvider((x, y, z) => {
\treturn `https://tiles.example.com/${z}/${x}/${y}.png`;
});
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":13,"lastWeek":72,"lastMonth":1003}},"@nativescript/payments":{"name":"@nativescript/payments","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/payments

\n\n

A plugin that allows your app to use in-app purchases and subscriptions using Apple AppStore and Google PlayStore purchasing systems.

\n

This plugin uses a RxJS Observable to emit the events to handle the purchase flow. To avoid threading errors with the platform purchasing flow, you can use toMainThread() as a pipe on the Observable so that the purchase logic executes on the main thread. paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {...

\n

In-App Purchase exmple should give a good starting point on how to use the Observable and setup the purchasing mechanism.

\n

Payments on iOS example

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Example Item ListPurchasConfirmationPurchase DonePurchase Successful
\"Purchase\"Purchase\"Purchase\"Purchase
\n

Payments on Android example

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Example Item ListPurchas ConfirmationPurchase Successful
\"Item\"Purchase\"Purchase
\n

Contents

\n\n

Installation

\n
ns plugin add @nativescript/payments
\n

Prerequisites

\n

Before you get started, review the following prerequisites:

\n

iOS prerequisites

\n

To offer in app purchases for your iOS app. You will need to create items for the app on AppStoreConnect.Apple.Com.

\n

\"In

\n

On the form to create the in app purchase item, the Product ID is the value you will use to fetch your items for the user to purchase in your app.\n\"Product

\n

Once you complete creating an item you will see a list of all items for the app listed on the AppStore Connect.\n\"List

\n

To test iOS purchases fully, you will need a real iOS device. You will also need a test user in the sandbox environment on your appstore account.

\n

\"Sandbox

\n

Android prerequisites

\n
    \n
  1. \n

    To offer in-app purchases for your Android app, you will need to upload at least ONE apk/aab to the Google Play Console.

    \n
    2. \n
  2. \n

    Create in-app products on the console.\n\"Create

    \n
    3. \n
\n

On the form to create your product, the Product ID is the value you will use to fetch your products for the user to purchase.

\n

Important note about Google items

\n\n

\"Active,

\n

To test Android purchases completely, you should use a real device with Google Play setup and logged into an account. You can use test accounts\nfor Google Play Billing for the work flow. This will allow you to test the app in development properly. For more info: https://support.google.com/googleplay/android-developer/answer/6062777

\n

Use @nativescript/payments

\n

Standard usage flow

\n

Below is the standard flow of the plugin's methods calls:

\n
// This sets up the internal system of the plugin
init();
// Connect the RxJS Observable
paymentEvents.connect();
// Establish the Subscription with your event handling
paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {...

// fetchItems(['item.id', ...]) will query the store for the items requested.
// Handle these items inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
fetchItems(['item.id']);

// buyItem('item.id') will start the purchase flow on Android & iOS.
// Next handle the PaymentEvent.Context.PROCESSING_ORDER for SUCCESS or FAILURE.
// If SUCCESS then you can call the last method to the `finalizeOrder(payload)` method.
buyItem('item.id');

// finalizeOrder(payload) will complete the purchase flow.
// The payload argument here is provided in the PaymentEvent.Context.PROCESSING_ORDER - SUCCESS event (see below example for detailed usage).
finalizeOrder(payload)

// at this point you would process the order with your backend given the receiptToken from the purchase flow
\n

In-App Purchase example

\n
import { buyItem, BuyItemOptions, canMakePayments, fetchItems, finalizeOrder, init as initPayments, Item, PaymentEvent, paymentEvents, toMainThread } from '@nativescript/payments';

export class SomeViewModel {
  private item: Item;

  pageLoaded() {
    // Connect to the RxJS Observable
    paymentEvents.connect();

    // Subscribe to the RxJS Observable
    // You do not have to handle all of the events
    // RETRIEVING_ITEMS && PROCESSING_ORDER are the ones you'll want to use to handle the purchase flow
    const subscription = paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {
      switch (event.context) {
        case PaymentEvent.Context.CONNECTING_STORE:
          console.log('Store Status: ' + event.result);
          if (event.result === PaymentEvent.Result.SUCCESS) {
            const canPay = canMakePayments();
            if (canPay) {
              // pass in your product IDs here that you want to query for
              fetchItems(['io.nstudio.iapdemo.coinsfive', 'io.nstudio.iapdemo.coinsone', 'io.nstudio.iapdemo.coinsonethousand']);
            }
          }
          break;
        case PaymentEvent.Context.RETRIEVING_ITEMS:
          if (event.result === PaymentEvent.Result.SUCCESS) {
            // if you passed multiple items you will need to handle accordingly for your app
            this.item = event.payload;
          }
          break;
        case PaymentEvent.Context.PROCESSING_ORDER:
          if (event.result === PaymentEvent.Result.FAILURE) {
            console.log(`🛑 Payment Failure - ${event.payload.description} 🛑`);
            // handle the failure of the purchase
          } else if (event.result === PaymentEvent.Result.SUCCESS) {
            // handle the successful purchase
            console.log('🟢 Payment Success 🟢');
            console.log(`Order Date: ${event.payload.orderDate}`);
            console.log(`Receipt Token: ${event.payload.receiptToken}`);
            finalizeOrder(event.payload);
          }
          break;
        case PaymentEvent.Context.FINALIZING_ORDER:
          if (event.result === PaymentEvent.Result.SUCCESS) {
            console.log('Order Finalized');
          }
          break;
        case PaymentEvent.Context.RESTORING_ORDERS:
          console.log(event);
          break;
        default:
          console.log(`Invalid EventContext: ${event}`);
          break;
      }
    });

    // This initializes the internal payment system for the plugin
    initPayments();
  }

  buttonTap() {
    const opts: BuyItemOptions = {
      accountUserName: 'someuseraccount123@test.orgbizfree',
      android: {
        vrPurchase: true,
      },
      ios: {
        quantity: 1,
        simulatesAskToBuyInSandbox: true,
      },
    };

    // This method will kick off the platform purchase flow
    // We are passing the item and an optional object with some configuration
    buyItem(this.item, opts);
  }
}
\n

API

\n\n

The following methods get called in response to the events emitted by paymentEvents.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
fetchItems(itemIds: Array<string>)Queries the store for the items requested. You should handle these items inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
buyItem(item: Item, options?: BuyItemOptions)Starts the purchase flow on Android & iOS and emits PaymentEvent.Context.PROCESSING_ORDER with SUCCESS or FAILURE. If SUCCESS then you can call the last method to the finalizeOrder(payload).
fetchSubscriptions(itemIds: Array<string>)Queries the store for the subscriptions offered by the app. You should handle these subscriptions inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
startSubscription(item: Item, userData?: string)Android only. Lanches the billing flow by presenting the Google Store subscription UI interface.
restoreOrders(skuType?: string)Returns the purchase made by the user for each product. You call this method to install purchases on additional devices or restore purchases for an application that the user deleted and reinstalled.
canMakePayments()Returns true or false indicating whether the billing service is available and is setup successfully.
tearDown()Closes the connection to the billing service to free up resources.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":36,"lastMonth":316}},"@nativescript-dom/vue-types":{"name":"@nativescript-dom/vue-types","version":"1.0.15","license":"MIT","readme":"

vue-types

\n

Typescript types for nativescript-vue 3 that work in .vue files to give you proper and complete intellisense in code editors.

\n

Installtion

\n
    \n
  1. Install the core and vue types in your project
    2. \n
\n
npm install @nativescript-dom/core-types @nativescript-dom/vue-types --save-dev
\n
    \n
  1. Configure tsconfig.json as below
    2. \n
\n
{
  \"compilerOptions\": {
    ...
    \"types\": [
        \"node\",
        \"@nativescript-dom/core-types\",
        \"@nativescript-dom/vue-types\"
        ],
...
  }
\n

That's it, enjoy a fully typed nativescript-vue experience.

\n

\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":272}},"@nativescript/firebase-ui":{"name":"@nativescript/firebase-ui","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-ui

\n

Contents

\n\n

Intro

\n

With this plugin, you can use the FirebaseUI for Auth library in your NativeScript app. FirebaseUI for Auth is a library that provides a drop-in auth solution that handles the UI flows for signing up and signing in users with email and password, phone number, Google, Facebook, Twitter, and more.

\n

Set up your app for Firebase

\n

You need to set up your app for Firebase before you can enable FirebaseUI for Auth. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Add the FirebaseUI for Auth SDK to your app

\n

To add the FirebaseUI SDK to your app follow these steps:

\n
    \n
  1. Install the npm install @nativescript/firebase-ui plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-ui
\n
    \n
  1. Add the SDK by importing the @nativescript/firebase-messaging module once in your app, ideally in the main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-ui';
\n

Enable sign-in methods in the Firebase console

\n

Just like with @nativescript/firebase-auth, you need to go to the Firebase console and enable the sign-in methods you want to offer to your users. For more information on how to do that, see Set up sign-in methods.

\n

Invoke the FirebaseUI auth flow

\n

To invoke the FirebaseUI auth flow, call the show method on the UI object - returned by firebase().ui()- with an object of type Config specifying the auth options.

\n
import { firebase } from '@nativescript/firebase-core';
import { AppleProvider, EmailProvider, GithubProvider, GoogleProvider, MicrosoftProvider, TwitterProvider, YahooProvider } from '@nativescript/firebase-ui';

firebase()
    .ui()
    .show({
        providers: [
            new AppleProvider(),
            new GoogleProvider(),
            new TwitterProvider(),
            new GithubProvider(),
            new EmailProvider(),
            new MicrosoftProvider(),
            new YahooProvider()],
    })
    .then((result: IIdpResponse) => {
        console.log(result.user);
        console.log(result.hasCredentialForLinking);
        console.log(result.providerType);
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Sign out a user

\n

To sign out a user, call the signOut method on the UI object returned by firebase().ui().

\n
import { firebase } from '@nativescript/firebase-core';


firebase()
    .ui()
    .signOut()
    .then(() => {
        console.log('signOut complete');
    })
    .catch((e) => {
        console.error('signOut error:', e);
    });
\n

API

\n

UI object

\n

The UI object provides the API for the FirebaseUI for Auth library and has the following members.

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

uiAndroid: com.firebase.ui.auth.AuthUI = firebase().ui().android;
\n

A readonly property that returns the UI object for Android.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

uiIOS: FUIAuth = firebase().ui().ios;
\n

A readonly property that returns the UI object for iOS.

\n
\n

app

\n
import { firebase } from '@nativescript/firebase-core';

app: FirebaseApp = firebase().ui().app;
\n

A readonly property that returns the FirebaseApp instance for your app.

\n
\n

useEmulator()

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .useEmulator(host, port);
\n

Allows you to point a com.firebase.ui.auth.AuthUI instance to an emulator at a specific host and port.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamTypeDescription
hoststringThe host of the emulator.
portnumberThe port of the emulator.
\n
\n

show()

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        console.log(result.user);
        console.log(result.hasCredentialForLinking);
        console.log(result.providerType);
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Presents auth UI with a list of federated identity providers (IDPs) that a user can choose from to sign in or sign up with. If the user chooses to sign in with a federated IDP, the sign-in flow will be completed using the IDP's sign-in SDK and the returned IDP credential will be linked to the current user.\nThis method returns a Promise that resolves with an IIdpResponse object.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamTypeDescription
configConfigThe config parameter specifies auth options such as federated identity providers list to use for user auth and more.
\n
\n

delete()

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .delete()
    .then(() => {
        console.log('delete complete');
    })
    .catch((e) => {
        console.error('delete error:', e);
    });
\n

Asynchronously deletes the current user's account.

\n
\n

signOut()

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .signOut()
    .then(() => {
        console.log('signOut complete');
    })
    .catch((e) => {
        console.error('signOut error:', e);
    });
\n

Asynchronously signs out the current user.

\n
\n

Config interface

\n

The Config object specifies the auth flow options such as the available identity providers, email link, the UI theme and other options.

\n
export interface Config {
\tproviders: IProvider[];
\tanonymousUsersAutoUpgrade?: boolean;
\temailLink?: string;
\tresetPasswordSettings?: IActionCodeSettings;
\ttheme?: number; // Android only
\tlockOrientation?: boolean;
\ttosAndPrivacyPolicy?: {
\t\ttos: string;
\t\tprivacyPolicy: string;
\t};

\talwaysShowSignInMethodScreen?: boolean;
}
\n
\n

IIdpResponse object

\n

When the show method of the UI object resolves successfully, it returns the IIdpResponse object which has the following members.

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        responseAndroid: com.firebase.ui.auth.IdpResponse = result.android;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

A read-only property that returns the IdpResponse instance for Android.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        responseIOS: com.firebase.ui.auth.IdpResponse = result.ios;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

A read-only property that returns the IdpResponse instance for iOS.

\n
\n

isNewUser

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        isNewUser: boolean = result.isNewUser;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Returns true if the user has just signed up for the first time, otherwise false.

\n
\n

hasCredentialForLinking

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        hasCredentialForLinking: boolean = result.hasCredentialForLinking;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Returns true if any of the federated identity providers (IDPs) has credentials for the user to link Firebase account with, otherwise false.

\n
\n

email

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        email: string = result.email;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Returns the emails the user used to sign in.

\n
\n

idpSecret

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        idpSecret: boolean = result.idpSecret;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

(Twitter only)Returns the token secret received as a result of logging in with Twitter.

\n
\n

idpToken

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        idpToken: boolean = result.idpToken;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Gets the token received as a result of logging in with the specified IDP.

\n
\n

phoneNumber

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        phoneNumber: string = result.phoneNumber;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Gets the phone number used to sign in.

\n
\n

providerType

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        providerType: string = result.providerType;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Gets the type of provider. e.g. {@link GoogleAuthProvider#PROVIDER_ID}.

\n
\n

user

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
    .ui()
    .show(config)
    .then((result: IIdpResponse) => {
        user: User = result.user;
    })
    .catch((error) => {
        console.error('show error:', error);
    });
\n

Returns the user data object.

\n
\n

User object

\n

This object represents the user data provided by a federated identity provider (IDP).

\n

android

\n
userAndroid: com.firebase.ui.auth.data.model.User = user.android;
\n

A read-only property that returns the User instance for Android.

\n
\n

ios

\n
userIOS: FIRUser = user.ios;
\n

A read-only property that returns the FIRUser instance for iOS.

\n
\n

name

\n
name: string = user.name;
\n

A read-only property that returns the user's display name.

\n
\n

email

\n
email: string = user.email;
\n

A read-only property that returns the email of the user.

\n
\n

phoneNumber

\n
phoneNumber: string = user.phoneNumber;
\n

A read-only property that returns the phone number of the user.

\n
\n

photoUri

\n
photoUri: string = user.photoUri;
\n

A read-only property that returns the user's profile photo URL.

\n
\n

providerId

\n
providerId: string = user.providerId;
\n

A read-only property that returns a string that uniquely identifies the identity provider providing the current user's data.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":147}},"nativescript-angular":{"name":"nativescript-angular","version":"10.0.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":52,"lastWeek":1007,"lastMonth":3869}},"nativescript-calendar-weekview":{"name":"nativescript-calendar-weekview","version":"1.0.6","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

NativeScript-Calendar-WeekView :calendar:

\n

NativeScript Calendar Week View provides week view and day view.It allow creating events and viewing them in week view.The plugin is highly under construction so any feedbacks and PRs are most Welcome.

\n

Under Construction

\n\n

Demo Run

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
1 Day View3 Day View7 Day View
\"alt\"alt\"alt
\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n
Android
alamkanak/Android-Week-View
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm i nativescript-calendar-weekview --save

\n

Usage

\n

XML:

\n
<Page  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:CalendarWeekView=\"nativescript-calendar-weekview\" loaded=\"pageLoaded\" class=\"page\">
    <ActionBar title=\"NativeScript-Calendar-WeekView\" />
    <ScrollView>
         <StackLayout>
   <CalendarWeekView:CalendarWeekView headerColumnBackground=\"#ffffff\" todayBackgroundColor=\"#1848adff\" noOfVisibleDays=\"3\"  dayBackgroundColor=\"#05000000\" headerRowBackgroundColor=\"#ffefefef\" columnGap=\"30\" headerColumnTextColor=\"#8f000000\" headerRowPadding=\"30\" headerColumnPadding=\"30\" hourHeight=\"120\" textSize=\"30\" />
    </StackLayout>
    </ScrollView>
</Page>
\n

TS:

\n

import {CalendarWeekView} from 'nativescript-calendar-weekview';
public CalendarWeekView: CalendarWeekView;
\n

Angular + Typescript:

\n
import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

registerElement(\"CalendarWeekView\", () => require(\"nativescript-calendar-weekview\").CalendarWeekView);

@Component({
    selector: 'calendar-weekview-example',
    template: `
        <ActionBar title=\"Nativescript-Calendar-WeekView\"  style=\"background-color:#ED2831; color:white\">
        <ActionItem  (tap)=\"addEvent()\">
        <Label class=\"actionItemLabel\" text=\"Add\" color=\"white\" ></Label>
        </ActionItem>
        </ActionBar>
        <StackLayout>
        <CalendarWeekView #CalendarWeekView  headerColumnBackground=\"#ffffff\" todayBackgroundColor=\"#1848adff\" noOfVisibleDays=\"3\"  dayBackgroundColor=\"#05000000\" headerRowBackgroundColor=\"#ffefefef\" columnGap=\"30\" headerColumnTextColor=\"#8f000000\" headerRowPadding=\"30\" headerColumnPadding=\"30\" hourHeight=\"120\" textSize=\"30\" >
    </CalendarWeekView>
        </StackLayout>
    
    `
})
export class CalendarViewExample {

     @ViewChild(\"CalendarWeekView\") CalendarWeekView: ElementRef;

      addEvent() {
        let event = this.CalendarWeekView.nativeElement;
        // provide params in this order
        // addEvent(id,name,startYear, startMonth, startDay,startHour,startMinute,endYear,endMonth, endDay, endHour,endMinute,eventColor)
        event.addEvent(1, \"first Event\", 2017, 3, 14, 3, 3, 2017, 3, 14, 7, 5, \"#87d288\");
        event.addEvent(2, \"Second Event\", 2017, 3, 15, 5, 3, 2017, 3, 15, 7, 5, \"#59DBE0\");
        event.addEvent(3, \"Third Event\", 2017, 3, 14, 8, 3, 2017, 3, 14, 10, 5, \"#F66C4E\");

    }
    }

}
\n

Attributes

\n

textSize - (int) - optional

\n

Attribute to specify the size of text in weekview.

\n

hourHeight - (int) - optional

\n

Attribute to specify the size of text in weekview.

\n

headerColumnPadding - (int) - optional

\n

Attribute to specify the padding between header columns in weekview.

\n

headerRowPadding - (int) - optional

\n

Attribute to specify the padding between header rows in weekview.

\n

headerColumnTextColor - (color string) - optional

\n

Attribute to specify the text color of column headers in weekview.

\n

columnGap - (int) - optional

\n

Attribute to specify the gap between columns in weekview.

\n

headerRowBackgroundColor - (color string) - optional

\n

Attribute to specify the background color of header rows in weekview.

\n

dayBackgroundColor - (color string) - optional

\n

Attribute to specify the color of day i.e. not today in weekview.

\n

noOfVisibleDays - (int) - optional

\n

Attribute to specify the visibility of days (i.e.1,3,7 days) in weekview.

\n

todayBackgroundColor - (color string) - optional

\n

Attribute to specify the color of today bacground in weekview.

\n

headerColumnBackground - (color string) - optional

\n

Attribute to specify the background color of column headers in weekview.

\n

Methods

\n

addEvent ( id, name, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, eventColor )

\n

Add Event with necessary Parameters passed and rendered in calendar.

\n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":39}},"@essent/nativescript-webview-ext":{"name":"@essent/nativescript-webview-ext","version":"9.0.1","license":"Apache-2.0","readme":"

@essent/nativescript-webview-ext

\n

Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

\n

NOTE: This extends and updates the excellent: https://github.com/Notalib/nativescript-webview-ext

\n
npm install @essent/nativescript-webview-ext
\n

Features

\n\n

Update minSdkVersion to 19 or higher

\n

Android SDK 19 is required, update App_Resources/Android/app.gradle:

\n
android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters \"--no-version-vectors\"
  }
}
\n

Core support

\n

Load in template like this:

\n
<Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:essent=\"@essent/nativescript-webview-ext\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <essent:WebViewExt src=\"https://nota.dk\"></<essent:WebViewExt>
</Page>
\n

Angular support

\n

Import WebViewExtModule from @essent/nativescript-webview-ext/angular and add it to your NgModule.

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Vue support

\n

Import @essent/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Usage

\n

Limitations

\n

The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

\n

Custom-scheme support for iOS <11 was removed because of ITMS-90809.

\n

API

\n

NativeScript View

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValueDescription
readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
srcLoad src
autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
supportZoomtrue / falseAndroid: should the webview support zoom
viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
getTitle()Returns a promise with the current document title.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
titleChangedDocument title changed
webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
\n

WebView

\n

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
\n

Waiting for nsWebViewBridge to be available

\n
    window.addEventListener(\"ns-bridge-ready\", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;

        // do stuff here
    });
\n

Possible features to come:

\n\n

Android

\n\n

iOS

\n\n

About Nota

\n

Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":6,"lastWeek":48,"lastMonth":422}},"@voicethread/nativescript-filepicker":{"name":"@voicethread/nativescript-filepicker","version":"1.0.2","license":"Apache-2.0","readme":"

NativeScript Filepicker \"apple\" \"android\"

\n

\"npm\"

\n
\n

@voicethread/nativescript-filepicker

\n
\n

This file picker plugin exports function filePicker() that supports both single and multiple selection (for iOS, multiple selection feature depends on OS version) using only native picker approaches.

\n

For iOS, filePicker() uses UIDocumentPicker to allow selection from publicly available files that can be accessed via iOS Files app. When selecting from Files, UIDocumentPicker supports multiple selections.

\n

iOS also has access to the galleryPicker() function which selects from the iOS Photos Gallery. This picker uses UIImagePicker for iOS 13 and below, which only supports single selections. PHPicker is used for iOS 14+ which does support multiple selections from the Photos Gallery. This picker does require user permission before allowing access to media on iOS.

\n

For Android, filePicker() uses Intents to open the stock file picker. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required in AndroidManifest. See demo for implementation details. Note: galleryPicker() will just call filePicker() internally.

\n

https://github.com/VoiceThread/nativescript-plugins/assets/20136906/ba6dcba1-bfd6-4a9d-a02e-f5351c252cdb

\n

Contents

\n\n

Installation

\n
npm install @voicethread/nativescript-filepicker --save
\n

OR

\n
ns plugin install @voicethread/nativescript-filepicker
\n

Usage

\n

The best way to understand how to use the plugin is to look at the demo app included in this repo.\nIn the apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/filepicker.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { Filepicker, MediaType } from '@voicethread/nativescript-filepicker';
\n
    \n
  1. Create a filepicker instance.
    2. \n
\n
let picker = new Filepicker();
\n
    \n
  1. Decide which types of files to include, and whether single or multiple selections allowed, then call the file picker.
    2. \n
\n
try {
  pickedFiles = await picker.filePicker(MediaType.IMAGE + MediaType.VIDEO + MediaType.AUDIO, true);
} catch (err) {
  if (err) alert(err?.message);
} finally {
  this.handleFiles(pickedFiles);
}
\n

Android Permissions

\n

To request permissions in the demo app, we use the @nativescript-community perms plugin. While this is not required for all OS versions and their system pickers, just to be safe you should request it so user is aware.

\n

Be sure to have permissions add the following lines in AndroidManifest.xml if targeting API 26+.

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

  <application android:requestLegacyExternalStorage=\"true\" ... >
    ...
  </application>
</manifest>
\n

For API 33+, you'll also need to add the following to the Android Manifest as well as request additional permissions:

\n
<uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />
<uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
<uses-permission android:name=\"android.permission.READ_MEDIA_AUDIO\" />
\n

Before launching the picker on API 33+, you'll need to request the following permissions to allow picker access to all file types:

\n
request('photo');
request('video');
request('audio');
\n

For an example, look at the pickAll function inside the filepicker.ts file in the dmeo app.

\n

iOS Permissions

\n

Using the plugin on iOS to select from the Photos gallery with galleryPicker() requires user to grant photo library permission first in order to access the selected image, otherwise it will return without any files. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

\n
<key>NSPhotoLibraryUsageDescription</key>
<string>Requires access to photo library to upload media.</string>
\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n

Supported Picker File Types

\n
MediaType {
  IMAGE,
  AUDIO,
  VIDEO,
  ARCHIVE,
  DOCUMENT,
  ALL     =>   (IMAGE | AUDIO | VIDEO | ARCHIVE | DOCUMENT )
}
\n

Each platform natively supports a different set of file/mime types, you can see those that are used by the plugin by looking at per-platform plugin package source.

\n

Android

\n

The Android stock file picker also supports selecting files from Google Photos and Google Drive if you have an account signed in on the Android device. Other document provider apps installed on your device may also offer additional services.

\n

Tested and working on Android API 25-33.

\n

iOS

\n

The iOS pickers also support selecting files from an associated iCloud account if the user has signed in on the device. Note that for a production application, you'll need to add the iCloud capability to your iOS application, and register that entitlement via the Apple Developer site for that package id. After that, update the relevant keys as shown in the demo application's Info.plist.

\n

Tested and working on iOS 12.x-16.x

\n

Additional Utils

\n

This plugin also exports a function getFreeMBs which a dev can use to check free space on the current device/app's cache folder which is where picked files get copied to. This is useful when working with larger video files to ensure you have enough free space before picking/copying the video file for use in your app.

\n

Acknowledgements

\n

This plugin was based on code from nativescript-mediafilepicker and ui-document-picker

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":55}},"@nativescript/template-hello-world-ng":{"name":"@nativescript/template-hello-world-ng","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Angular Template

\n

This template creates a "Hello, world" NativeScript app using TypeScript and Angular.

\n

You can create a new app that uses this template with either the --template option.

\n
ns create my-hello-world-ng --template @nativescript/template-hello-world-ng
\n

Or the --ng shorthand.

\n
ns create my-hello-world-ng --ng
\n
\n

Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-hello-world-ng --template nativescript-app-templates/packages/template-hello-world-ng
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":17,"lastWeek":97,"lastMonth":1133}},"@nativescript/firebase-app-check-debug":{"name":"@nativescript/firebase-app-check-debug","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-app-check-debug

\n
npm install @nativescript/firebase-app-check-debug
\n
\n

Warning: The debug provider allows access to your Firebase resources from unverified devices. Don't use the debug provider in production builds of your app, and don't share your debug builds with untrusted parties.

\n
\n
\n

Note: (iOS) App Check requires you set the minimum iOS Deployment version in ios/Podfile to 11.0 or greater.

\n
\n

What does it do

\n

App Check works alongside other Firebase services to help protect your backend resources from abuse, such as billing fraud or phishing. With App Check, devices running your app will use an app or device attestation provider that attests to one or both of the following:

\n

Requests originate from your authentic app\nRequests originate from an authentic, untampered device\nThis attestation is attached to every request your app makes to your Firebase backend resources.

\n

\"image\"

\n

This App Check module has built-in support for using the following services as attestation providers:

\n

DeviceCheck on iOS\nSafetyNet on Android\nApp Check currently works with the following Firebase products:

\n

Realtime Database\nCloud Storage\nCloud Functions (callable functions)\nThe official Firebase App Check documentation has more information, including about the iOS AppAttest provider, and testing/ CI integration, it is worth a read.

\n

Usage

\n

Activate

\n
import { firebase } from '@nativescript/firebase-core';
import { AppCheck } from '@nativescript/firebase-app-check-debug';

AppCheck.setProviderFactory(); // call before the fb app is initialized 
firebase.initializeApp()
.then(app =>{
    firebase().appCheck().activate(true);
})

\n

The only configuration possible is the token auto refresh. When you call activate, the provider stays the same but the token auto refresh setting will be changed based on the argument provided.

\n

You must call activate prior to calling any firebase back-end services for App Check to function.

\n

Automatic Data Collection

\n

App Check has an "tokenAutoRefreshEnabled" setting. This may cause App Check to attempt a remote App Check token fetch prior to user consent. In certain scenarios, like those that exist in GDPR-compliant apps running for the first time, this may be unwanted.

\n

If unset, the "tokenAutoRefreshEnabled" setting will defer to the app's "automatic data collection" setting, which may be set in the Info.plist or AndroidManifest.xml

\n

Using App Check tokens for non-firebase services

\n

The official documentation shows how to use getToken to access the current App Check token and then verify it in external services.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":828}},"@nativescript-community/observable":{"name":"@nativescript-community/observable","version":"2.0.11","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

this is a simple subclass of TNS Observable class which let the observable know when a listener was added or removed.\nVery useful to create native object to listen for native event only when necessary

\n","downloadStats":{"lastDay":74,"lastWeek":337,"lastMonth":1044}},"@nativescript-community/xml-ui-compiler":{"name":"@nativescript-community/xml-ui-compiler","version":"1.0.0-alpha.3","license":"Apache-2.0","readme":"

@nativescript-community/xml-ui-compiler

\n

\"npm\"\n\"npm\"

\n

A Node compiler that converts NativeScript XML view content to AST.

\n

Installation

\n
npm install @nativescript-community/xml-ui-compiler --save-dev
\n

Usage

\n
import fs from 'fs';
import generate from '@babel/generator';
import { compile } from '@nativescript-community/xml-ui-compiler';

const filePath = 'views/home/home.xml';
const content = fs.readFileSync(filePath, 'utf8');

const { output } = compile(content, filePath, 'android');

// Convert AST to JS and print
console.log(generate(output).code);
\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":71}},"nativescript-plugin-firebase":{"name":"nativescript-plugin-firebase","version":"10.6.3","license":"MIT","readme":"

NativeScript Firebase plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

\"Firebase\"/

\n
\n

Plugin version 10.0.0 works with NativeScript 6.1+. Using an older version? Stick to plugin version < 10.

\n
\n
\n

For NativeScript 7 compatibiliy, install @nativescript/firebase version 11+.

\n
\n

Features

\n\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Note: for using separate versions of these files for development and production environments see this section

\n

Installation

\n

If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-plugin-firebase
\n

or for NativeScript 7+:

\n
tns plugin add @nativescript/firebase
\n

This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

\n
\n

Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

\n
\n
\n

Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

\n
\n

Config

\n

If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

\n

You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

\n

You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

\n

Using Vue?

\n

Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

\n

If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

\n

iOS (Cocoapods)

\n

The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

\n

Google Play Services Version

\n

The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Usage

\n

Demo app

\n

If you want a quickstart, clone the repo, then:

\n\n

Start-up wiring

\n

We need to do some wiring when your app starts, so open app.js and add this before application.start();:

\n
JavaScript
\n
var firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function () {
      console.log(\"firebase.init done\");
    },
    function (error) {
      console.log(\"firebase.init error: \" + error);
    }
);
\n

TypeScript

\n
const firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
  () => {
    console.log(\"firebase.init done\");
  },
  error => {
    console.log(`firebase.init error: ${error}`);
  }
);
\n

Angular

\n

Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

\n
const firebase = require(\"nativescript-plugin-firebase\");

@Component({
    // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

Authentication failed: invalid_token

\n

On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

\n
[FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
or
[FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
\n

This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

\n
firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
  iOSEmulatorFlush: true
}).then()
\n

Pod dependency error

\n

If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

\n

This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

\n

Known issues on Android

\n

Genymotion

\n

You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

\n

DexIndexOverflowException

\n
com.android.dex.DexIndexOverflowException: method ID not in..
\n

Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n

java.lang.OutOfMemoryError: GC overhead limit exceeded

\n

Increase the Java Max Heap Size like this (the bit at the end):

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }
  dexOptions {
    javaMaxHeapSize \"4g\"
  }
}
\n

FirebaseApp with name [DEFAULT] doesn't exist

\n

Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

\n

Errors regarding API level 26.0.0

\n

Update your local Android SDKs:

\n

Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

\n

Found play-services:A.C.D, but version B.X.Y is needed..

\n

Update your Android bits like the issue above and reinstall the android platform in your project.

\n

include.gradle: Failed to apply plugin .. For input string: "+"

\n

You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"15.0.0\"
  }
}
\n

Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

\n

Separation of Environments

\n

It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

\n

Setup

\n
    \n
  1. \n

    Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

    \n
    2. \n
  2. \n

    Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

    \n
      \n
    • iOS\n
        \n
      • app/App_Resources/iOS/GoogleService-Info.plist.dev
        • \n
      • app/App_Resources/iOS/GoogleService-Info.plist.prod
        • \n
      \n
      • \n
    • Android\n
        \n
      • app/App_Resources/Android/google-services.json.dev
        • \n
      • app/App_Resources/Android/google-services.json.prod
        • \n
      \n
      • \n
    \n
    3. \n
\n

Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

\n

Build

\n

The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

\n\n

Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

\n

Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

\n","downloadStats":{"lastDay":26,"lastWeek":349,"lastMonth":1479}},"@nativescript-community/ui-popover":{"name":"@nativescript-community/ui-popover","version":"0.1.9","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-popover

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Popover plugn
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-popover

\n

\n

API

\n

Using Svelte

\n
  import { showPopover } from '@nativescript-community/ui-popover/svelte';

  showPopover({
    view: YourInnerSvelteComponent,
    props: {}
  });
\n

Using Vue

\n
  import PopoverPlugin from '@nativescript-community/ui-popover/vue';
  Vue.use(PopoverPlugin);

  //in your components
  this.$showPopover(YourInnerVueComponent, {
    props: {}
  });
\n

Methods

\n
 interface PopoverOptions {
    anchor: View;
    vertPos?: VerticalPosition;
    horizPos?: HorizontalPosition;
    x?: number;
    y?: number;
    fitInScreen?: boolean;
    onDismiss?: Function;
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
showPopover(options: PopoverOptions)voidProgramatically open the popover
closePopover(options: PopoverOptions)voidProgramatically close the popover
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":1,"lastWeek":9,"lastMonth":148}},"@nativescript/template-drawer-navigation":{"name":"@nativescript/template-drawer-navigation","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core Drawer Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-drawer-js --template @nativescript/template-drawer-navigation
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-drawer-js --template nativescript-app-templates/packages/template-drawer-navigation
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

There is a folder that is used for setting RadSideDrawer instance as an application root:

\n\n

RadSideDrawer has the following component structure:

\n\n

The template has the following blank page modules:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":2,"lastWeek":13,"lastMonth":498}},"@nativescript/haptics":{"name":"@nativescript/haptics","version":"3.0.2","license":"Apache-2.0","readme":"

@nativescript/haptics

\n

A plugin that allows you to add haptics to your app.

\n
\n

Playing haptics can engage people's sense of touch and bring their familiarity with the physical world into your app or game.\n~ Developer docs

\n
\n

Thanks to Eddy Verbruggen for providing nativescript-taptic-engine as this continues its evolution by streamlining the API and adding Android support, inspired by react-native-haptic-feedback.

\n

Contents

\n\n

Installation

\n
npm install @nativescript/haptics
\n

Use @nativescript/haptics

\n

Find an example of @nativescript/haptics usage here on StackBlitz.

\n

API

\n

The plugin provides the API below.

\n

isSupported()

\n
isHapticsSupported: boolean = Haptics.isSupported()
\n

Checks if haptics is supported on the device.

\n
\n

is6SAnd6SPlusSupported()

\n
isHapticsSupported: boolean = Haptics.is6SAnd6SPlusSupported()
\n

Checks if Haptics is supported on iOS.

\n
\n

selection()

\n
import { Haptics } from \"@nativescript/haptics\";

Haptics.selection();
\n

notification()

\n
import { Haptics, HapticNotificationType } from \"@nativescript/haptics\";

Haptics.notification(HapticNotificationType.ERROR);
\n

Use notification feedback generators to indicate success, failure, and warning.

\n

Other haptic notification types are:

\n\n

impact()

\n
import { Haptics, HapticImpactType } from \"@nativescript/haptics\";

Haptics.impact(HapticImpactType.HEAVY);
\n

Use impact feedback generators to indicate that an impact has occurred.\nFor example, you might trigger impact feedback when a user interface object\ncollides with something or snaps into place.

\n

There are 3 impact types:

\n\n

HapticsFallback

\n

To use the haptics fallbacks, check if there is support:

\n
if (!Haptics.isSupported() && Haptics.is6SAnd6SPlusSupported()) {
  // use HapticsFallback
}
\n

BEWARE This uses an undocumented feature that may get your app rejected when reviewed by Apple.\nPeople have used this approach without problems though.

\n

weakBoom()

\n

This triggers the same effect as the 'Peek' in 'Peek & Pop', a very brief vibration.

\n
import { HapticsFallback } from \"@nativescript/haptics\";

HapticsFallback.weakBoom();
\n

strongBoom()

\n
import { HapticsFallback } from \"@nativescript/haptics\";

HapticsFallback.strongBoom();
\n

This triggers the Pop effect of Peek & Pop, which is a bit more profound than the Peek effect.

\n

burst()

\n
import { HapticsFallback } from \"@nativescript/haptics\";

HapticsFallback.burst();
\n

This triggers the Nope effect you get when force-touching a home icon that doesn't have any action. It's a short burst of 3-ish 'weak booms'.

\n

Changelog

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":6,"lastMonth":66}},"@nativescript-community/ui-svg":{"name":"@nativescript-community/ui-svg","version":"0.1.19","license":"ISC","readme":"\n\n

@nativescript-community/ui-svg

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n Adds support for SVGs in your NativeScript apps.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-svg

\n

\n

Configuration

\n

For now only vue (and core) is supported.

\n
import CanvasSVG from '@nativescript-community/ui-svg/vue';
Vue.use(CanvasSVG);
\n

It works in 3 ways!.

\n

CanvasSVG extending Canvas

\n
<CanvasSVG>
    <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"100%\" stretch=\"aspectFit\" />
</CanvasSVG>
\n

or SVGView which is a basic svg view with support for auto sizing

\n
<SVGView height=\"30%\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" stretch=\"aspectFit\" backgroundColor=\"red\" />
\n

Or within and Canvas View extending CanvasView like CanvasLabel

\n
<CanvasLabel>
 <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
        <CSpan text=\"test\" fontWeight=\"bold\" />
        <CSpan text=\"test2\" color=\"#ccc\" fontSize=\"16\" />
    </CGroup>
    <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"10\" stretch=\"aspectFit\" />
</CanvasSVG>
\n

Examples:

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":11,"lastWeek":330,"lastMonth":1343}},"@nativescript/keyboard-toolbar":{"name":"@nativescript/keyboard-toolbar","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/keyboard-toolbar

\n
npm install @nativescript/keyboard-toolbar
\n

Thank you to Eddy Verbruggen for all the excellent work!

\n

iOS and Android running the included demo - much better framerate on YouTube!

\n

What The Keyboard!?

\n

Glad you asked 😅!

\n\n

General usage instructions

\n

The plugin works by grabbing your declared toolbar layout and moving it off-screen.

\n

Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

\n

For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

\n

So if your layout structure is currently this:

\n
<ActionBar/>
<StackLayout/>
\n

Change it to this:

\n
<ActionBar/>
<GridLayout>
    <StackLayout/>
    <Toolbar/>
</GridLayout>
\n

Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

\n
\n

Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

\n
\n

Usage with Core

\n

Mind the comments in the example below.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"@nativescript/keyboard-toolbar\">

    <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
    <GridLayout>

        <StackLayout>
            <Label text=\"Some text\"/>
            <!-- Add an 'id' property that we can reference below -->
            <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
        </StackLayout>

        <!-- The 'forId' and 'height' properties are mandatory -->
        <kt:Toolbar forId=\"priceTextField\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
            </GridLayout>
        </kt:Toolbar>

    </GridLayout>
</Page>
\n

Usage with Angular

\n

Register the plugin in a specific module, or globally in the app module:

\n
import { registerElement } from \"@nativescript/angular\";
import { Toolbar } from 'nativescript-keyboard-toolbar';
registerElement(\"KeyboardToolbar\", () => Toolbar);
\n

In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

\n
<ActionBar>
  <TextField #textField1 id=\"tf1\"></TextField>
</ActionBar>

<!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
<GridLayout>

  <!-- Add whatever visible layout you need here -->
  <ListView [items]=\"items\">
    <ng-template let-item=\"item\">
      <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
    </ng-template>
  </ListView>

  <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
   The 'forId' and 'height' properties are mandatory -->
  <KeyboardToolbar forId=\"tf1\" height=\"44\">
    <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
      <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
      <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
      <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
      <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
    </GridLayout>
  </KeyboardToolbar>
</GridLayout>
\n

Usage with Vue

\n

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

\n
import Vue from \"nativescript-vue\";
Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <StackLayout>
        <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
      </StackLayout>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
         The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tv2\" height=\"44\">
        <GridLayout columns=\"*, *, *\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
          <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
          <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
        </GridLayout>
      </KeyboardToolbar>

    </GridLayout>
  </Page>
</template>

<script>
  import { Frame } from \"@nativescript/core\";

  export default {
    methods: {
      appendToTextView2(args) {
        const textView = Frame.topmost().currentPage.getViewById(\"tv2\");
        textView.text += args.object.text;
      }
    }
  }
</script>
\n

What about IQKeyboardManager?

\n

If you have IQKeyboardManager installed for better keyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset IQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

\n

You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

\n

Future work

\n\n

Credits

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":98}},"@nstudio/nativescript-appcues":{"name":"@nstudio/nativescript-appcues","version":"1.0.1","license":"Apache-2.0","readme":"

Appcues NativeScript Plugin

\n

Appcues NativeScript Plugin allows you to integrate Appcues experiences into your iOS and Android devices.

\n\n

🚀 Getting Started

\n

Prerequisites

\n

Android - your application's App_Resources/Android/app.gradle must have a compileSdkVersion of 33+ and minSdkVersion of 21+

\n
android {
    compileSdkVersion 33

    defaultConfig {
        minSdkVersion 21
    }
}
\n

iOS - your application must target iOS 11+ to install the SDK, and iOS 13+ to render Appcues content. Update the App_Resources/iOS/build.xcconfig to set the deployment target, if needed. In the application's App_Resources/iOS/Podfile, include at least this minimum version.

\n
# Podfile
platform :ios, '11.0'
\n

Installation

\n

In your app's root directory, run:

\n
npm install @nstudio/nativescript-appcues
\n

One Time Setup

\n

Initializing the SDK

\n

An instance of the Appcues SDK should be initialized when your app launches.

\n
import { Application } from '@nativescript/core';
import { AppcuesSDK } from '@nstudio/nativescript-appcues';

Application.on(Application.launchEvent, () => {
    AppcuesSDK.init('APPCUES_ACCOUNT_ID', 'APPCUES_APPLICATION_ID');
});
\n

Initializing the SDK requires you to provide two values, an Appcues account ID, and an Appcues mobile application ID. These values can be obtained from your Appcues settings. Refer to the help documentation on Registering your mobile app in Studio for more information.

\n

Identifying Users

\n

In order to target content to the right users at the right time, you need to identify users and send Appcues data about them. A user is identified with a unique ID.

\n
// Identify a user
AppcuesSDK.identify('my-user-id')
// Identify a user with property
AppcuesSDK.identify('my-user-id', { company: \"Appcues\"})
\n

Tracking Screens and Events

\n

Events are the “actions” your users take in your application, which can be anything from clicking a certain button to viewing a specific screen. Once you’ve installed and initialized the Appcues NativeScript Plugin, you can start tracking screens and events using the following methods:

\n
// Track event
AppcuesSDK.track(\"Sent Message\")
// Track event with property
AppcuesSDK.track(\"Deleted Contact\", { id: 123 })

// Track screen
AppcuesSDK.screen(\"Contact List\")   
// Track screen with property
AppcuesSDK.screen(\"Contact List\", { reference: \"abc\" })
\n

📝 Documentation

\n

API is available here.

\n
\n

Full documentation is available at https://docs.appcues.com/

\n
\n

🎬 Examples

\n

The demo example in this repository contains example iOS/Android app to providing references for correct installation and usage of the Appcues API.

\n

📄 License

\n

This project is licensed under the Apache 2.0 License. See LICENSE for more information.

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":37}},"@valor/nativescript-in-app-review":{"name":"@valor/nativescript-in-app-review","version":"1.1.0","license":"Apache-2.0","readme":"

@valor/nativescript-in-app-review

\n

       \n

\n
ns plugin add @valor/nativescript-in-app-review
\n

Usage

\n
import { InAppReview } from '@valor/nativescript-in-app-review';

InAppReview.requestReviewPopup();
\n

Quotas and limitations

\n

Due to limitations on both Android and iOS, there are no guarantees that the user will be presented with the popup after\ninvoking the requestReviewPopup() method. And there's no way of knowing if the user was prompted for a review or not,\nnor if they left a review. Because of that, it's not recommended to invoke the method upon an user action (like a button\ntap).

\n

Android

\n\n

You can read more about quotas and testing for Android here.

\n

iOS

\n\n

You can read more about quotas and testing for iOS here.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":32,"lastWeek":198,"lastMonth":799}},"nativescript-device-uuid":{"name":"nativescript-device-uuid","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript UUID

\n

This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

\n

Uses SAMKeychain Cocoa Pod.

\n

Installation

\n

Run the following command from the root of your project:

\n
yarn add nativescript-device-uuid
ns plugin add nativescript-device-uuid
npm install nativescript-device-uuid
\n

Usage

\n

JavaScript

\n
  const nsUuid = require(\"nativescript-device-uuid\");

  const uuid = nsUuid.getUUID();
  console.log(`The device UUID is ${uuid}`);
\n

TypeScript

\n
  import { getUUID } from 'nativescript-device-uuid';

  const uuid = getUUID();
  console.log(`The device UUID is ${uuid}`);
\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":7}},"jgraffite-typescript-modules":{"name":"jgraffite-typescript-modules","version":"1.7.5","license":"MIT","readme":"

JgraffiteTypescriptModules

\n

This library was generated with Angular CLI version 11.2.12.

\n

Code scaffolding

\n

Run ng generate component component-name --project jgraffite-typescript-modules to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project jgraffite-typescript-modules.

\n
\n

Note: Don't forget to add --project jgraffite-typescript-modules or else it will be added to the default project in your angular.json file.

\n
\n

Build

\n

Run ng build jgraffite-typescript-modules to build the project. The build artifacts will be stored in the dist/ directory.

\n

Publishing

\n

After building your library with ng build jgraffite-typescript-modules, go to the dist folder cd dist/jgraffite-typescript-modules and run npm publish.

\n

Running unit tests

\n

Run ng test jgraffite-typescript-modules to execute the unit tests via Karma.

\n

Further help

\n

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

\n","downloadStats":{"lastDay":0,"lastWeek":59,"lastMonth":181}},"@nativescript-dom/angular-types":{"name":"@nativescript-dom/angular-types","version":"1.0.7","license":"MIT","readme":"

angular-types

\n

Typescript definitions for @nativescript/angular that expose @nativescript/core views as DOM elements in HTML templates and provide 100% complete intellisense in code editors

\n

Installtion

\n
    \n
  1. Install the core and angular types in your project
    2. \n
\n
npm install @nativescript-dom/core-types @nativescript-dom/angular-types --save-dev
\n
    \n
  1. Configure tsconfig.json as below
    2. \n
\n
{
  \"compilerOptions\": {
    ...
    \"types\": [
        \"node\",
        \"@nativescript-dom/core-types\",
        \"@nativescript-dom/angular-types\"
        ],
...
  }
\n

Configure vscode

\n

If you use vscode, configure .vscode/settings.json.

\n

Create a .vscode folder inside the root of your project and add a settings.json file with the following contents:

\n
{
  \"html.customData\": [
    \"./node_modules/@nativescript-dom/angular-types/metadata.json\"
  ]
}
\n

No extra steps are required for webstorm.

\n

That's it, enjoy a fully typed @nativescript/angular experience.

\n

\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":164}},"@kefah/nativescript-otp":{"name":"@kefah/nativescript-otp","version":"1.0.8","license":"Apache-2.0","readme":"

@kefah/nativescript-otp

\n

Social buttons

\n

\"@kefahB\n\"stars\n\"dependency

\n

Repo metadata

\n

\"License\"\n\"issues

\n

A Nativescript plugin to auto fill the One Time Code OTP for IOS and Android

\n

Documentation

\n
\n

\"view

\n
\n

Table of contents

\n\n

Install

\n
ns plugin add @kefah/nativescript-otp
\n

OR

\n
npm i @kefah/nativescript-otp
\n

Limitations

\n

IOS: This feature is available from IOS 12.0 it will not working with older versions

\n

Setup

\n

The only setup is for Android that need a hash code to be append to the sms, the procedure is a little complicated, this plugin has a helper getAppSignatures() on it that that can generate the hash code for the development, it is not sure that the same hash work for production, for that you need to generate it manually.

\n

Get you development hash code by calling getAppSignatures() this will log the flowing into the console:

\n
\n

PS: please use getAppSignatures() to get the hash code then comment it, it is not needed any more

\n
\n
JS: packageName: org.nativescript.plugindemo Hash: I+D7XdR0yWS
\n\n

Before start

\n
\n

An OTP in most case it is a integers values, please avoid using alphabet characters if possible.

\n
\n
\n

For some reason on IOS the OTP dectection not workin some time with a default keyboard type, if you experiencing a problem try to set the keyboard type to integer

\n
\n
<notp:NativescriptOtp keyboardType=\"integer\" hint=\"{{ L('activation_code') }}\" text=\"{{ code }}\" autocorrect=\"false\" class=\"otp\"/>
\n

Some best practice in order to successfully receive the SMS

\n\n
<#> your code is: 1234988
I+D7XdR0yWS
\n

Usage

\n

This plugin implement the Nativescript TextField, so you can use it instead of the regular TextField.

\n

Begin by including the plugin in your page

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
xmlns:notp=\"@kefah/nativescript-otp\" navigatingTo=\"navigatingTo\" class=\"page\">
\n

Then use the plugin instead of the TextField

\n
<notp:NativescriptOtp hint=\"OTP\" class=\"otp\" text=\"{{ otp }}\"/>
\n

Full example

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
xmlns:notp=\"@kefah/nativescript-otp\" navigatingTo=\"navigatingTo\" class=\"page\">
    <Page.actionBar>
        <ActionBar title=\"otp\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>

    <StackLayout class=\"p-20\">
        <ScrollView class=\"h-full\">
          <StackLayout>
            <Button text=\"Test otp >\" tap=\"{{ testIt }}\" class=\"btn btn-primary\"/>
            <notp:NativescriptOtp hint=\"OTP\" class=\"otp\" text=\"{{ otp }}\"/>
          </StackLayout> 
        </ScrollView>
    </StackLayout>
</Page>
\n

Register the plugin to watch the incoming SMS and passe a callback function ont it to receive the OTP, this callback will be filled once the plugin captured the SMS.

\n

View Model

\n
import {NativescriptOtp, OTPResultInterface} from '@kefah/nativescript-otp';


export class DemoSharedOtp extends DemoSharedBase {


    constructor() {
        super();
        console.log('test nativescript-otp!');
        let otp = new NativescriptOtp();
        otp.registerForOTP((otp: OTPResultInterface) => {
            if(otp) {
                console.error(\"OTP\", otp);
                this.set(\"otp\", otp.otp)
                // do other staff
                // trigger verify...
                return;
            }
            // No OTP was found
        })
    }
}
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodtypeDescriptionIOSAndroid
registerForOTP: (cb)Functionregister the plugin to watch the incoming SMSxx
unregisterForOTPFunctionUnregister the watchxx
parseMsg(msg, regex)Functionthis will parse the SMS to extract the code, you don't need to call it unless your code is special and you need a diffrent regex then pass your raged as second paramsx
getAppSignatures()FunctionA helper to get a development hash code for Androidx
\n

Generate Android hash code

\n
package=_yourp_package_name_
keystore=debug.keystore
keystorepass=android
alias=androiddebugkey

keytool -exportcert -alias $alias -keystore $keystore -storepass $keystorepass | xxd -p | tr -d \"[:space:]\" | echo -n $package `cat` | openssl sha256 test.txt | tr -d \"[:space:]-\" | xxd -r -p | base64 | cut -c1-11
\n
keytool -exportcert -alias androiddebugkey -keystore debug.keystore -storepass android | xxd -p | tr -d \"[:space:]\" | echo -n $package `cat` | openssl sha256 | tr -d \"[:space:]-\" | xxd -r -p | base64 | cut -c1-11
\n

How to test

\n

IOS

\n

Unfortunately an IOS You need to test the SMS on a real device, apple doesn't allow to simulate a incomming sms on the simulator.

\n

Android

\n

It is very easy, please see the image below

\n\"Capture\n\"Capture\n

License

\n

Released under MIT by @kefahB.

\n","downloadStats":{"lastDay":1,"lastWeek":2,"lastMonth":149}},"nativescript-phone":{"name":"nativescript-phone","version":"3.0.3","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":260,"lastWeek":1358,"lastMonth":5340}},"@bezlepkin/nativescript-keyboard-opening":{"name":"@bezlepkin/nativescript-keyboard-opening","version":"1.0.1","license":"Apache-2.0","readme":"

@bezlepkin/nativescript-keyboard-opening

\n

A plugin that allows you to track keyboard opening, changing, closing and returns keyboard height.

\n
npm install @bezlepkin/nativescript-keyboard-opening
\n

Usage

\n
import { keyboardOpening } from '@bezlepkin/nativescript-keyboard-opening';

keyboardOpening().on('opened', async (args: any) => {
    console.log('The keyboard is opened', args.data.height);
});

keyboardOpening().on('changed', async (args: any) => {
    console.log('The keyboard is changed', args.data.height);
});

keyboardOpening().on('closed', async (args: any) => {
    console.log('The keyboard is closed');
});
\n

To stop tracking when you switch to another screen, you need to unsubscribe from the actions:

\n
keyboardOpening().off('opened');
keyboardOpening().off('changed');
keyboardOpening().off('closed');
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":2,"lastWeek":15,"lastMonth":132}},"@nativescript-community/ui-range-seek-bar":{"name":"@nativescript-community/ui-range-seek-bar","version":"2.0.3","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-range-seek-bar

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript Range Seek Bar widget
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-range-seek-bar

\n

Based on

\n

TTRangeSlider for iOS

\n

Crystal Range Seekbar for Android

\n

\n

API

\n

Events

\n\n

Instance Properties

\n\n

\n

Usage in Angular

\n\n
import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tNativeScriptUIRangeSeekBarModule,
        //......
\t],
    //......
})
\n
<!-- app.component.html -->
<StackLayout>
    <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [valueMin]=\"rangeSeekBarProp.valueMin\"
        [valueMax]=\"rangeSeekBarProp.valueMax\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
        (valueChanged)=\"valueChanged($event)\" (finaValueChanged)=\"finaValueChanged($event)\" class=\"range-seek-bar\"></RangeSeekBar>
</StackLayout>
\n
/*app.css*/
.range-seek-bar {
    bar-color: #8990C4;
    bar-highlight-color: #2434AD;
    thumb-color: #1A246D;
    bar-height: 10;
    corner-radius: 30;
}
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {

    public rangeSeekBarProp = {
        minValue: 0,
        maxValue: 100,
        valueMin: 0,
        valueMax: 100,
        minRange: 0,
        step: 1
    };

    constructor() { }

    valueChanged(event: RangeSeekBarEventData) {
        console.log(\"valueChanged: \", event.value);
    }

    finaValueChanged(event: RangeSeekBarEventData) {
        console.log(\"finaValueChanged: \", event.value);
    }
}
\n

Examples:

\n\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@nativescript-community/ui-range-seek-bar.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":102}},"@nativescript/template-tab-navigation-vue":{"name":"@nativescript/template-tab-navigation-vue","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Vue Tab Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a BottomNavigation component for navigation.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-tab-vue --template @nativescript/template-tab-navigation-vue
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-tab-vue --template nativescript-app-templates/packages/template-tab-navigation-vue
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root component is located at:

\n\n

The template has the following pages used for the tab content items:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":2,"lastWeek":11,"lastMonth":479}},"@global66/nativescript-appsflyer":{"name":"@global66/nativescript-appsflyer","version":"1.0.17","license":"Apache-2.0","readme":"\n

@global66/nativescript-appsflyer

\n

Nativescript Library for AppsFlyer SDK

\n

\"npm

\n

Table of content

\n\n

This plugin is built for

\n\n

Installation

\n

$ tns plugin add @global66/nativescript-appsflyer

\n

Updates the spec repos located

\n

$ pod repo update

\n

API Methods

\n
\n

Call module by adding (native javascript):

\n

var appsFlyer = require("@global66/nativescript-appsflyer");

\n
\n
appsFlyer.initSdk(options, callback): void
\n

initializes the SDK.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectSDK configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
nametypedefaultdescription
devKeystringAppsflyer Dev key
appIdstringApple Application ID (for iOS only)
isDebugbooleanfalsedebug mode (optional)
onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
onConversionDataFailurefunction
\n

Example:

\n
var options = {
    devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
    appId: \"975313579\",
    isDebug: true,
    timeToWaitForATTUserAuthorization: 60,
    onConversionDataSuccess: function(_res) {
        console.log(JSON.stringify(_res));
    },
    onConversionDataFailure: function(_res) {
        console.warn(\"failure: \" + JSON.stringify(_res));
    },
};

appsFlyer.initSdk(options).then(function(result) {
    viewModel.set(\"initSdkResponse\", result.status);
}, function(err) {
    viewModel.set(\"initSdkResponse\", JSON.stringify(err));
});
\n
\n

##### appsFlyer.logEvent(options): Promise<any>

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
optionsObjectlog event configuration
\n

options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
eventValuesObjectevent details (see example bellow)
\n

Example: (native javascript)

\n
var options = {
    eventName: \"af_add_to_cart\",
    eventValues: {
        \"af_content_id\": \"id123\",
        \"af_currency\": \"USD\",
        \"af_revenue\": \"2\"
    }
};
appsFlyer.logEvent(options).then(function(result) {
    viewModel.set(\"logEventResponse\", result);
}, function(err) {
    viewModel.set(\"logEventResponse\", JSON.stringify(err));
});
\n
\n
\n

Deep Linking

\n\n

The 3 Deep Linking Types:

\n

Since users may or may not have the mobile app installed, there are 2 types of deep linking:

\n
    \n
  1. Deferred Deep Linking - Serving personalized content to new or former users, directly after the installation.
    2. \n
  2. Direct Deep Linking - Directly serving personalized content to existing users, which already have the mobile app installed.
    3. \n
  3. Unified deep linking - Unified deep linking sends new and existing users to a specific in-app activity as soon as the app is opened.
    4. \n
\n

For more info please check out the OneLink™ Deep Linking Guide.

\n

1. Deferred Deep Linking (Get Conversion Data)

\n

Handle the Deferred deeplink in the following callback:

\n
var options = {
    onConversionDataSuccess: function(_res) {
        console.log(\"Get conversion data success: \" + JSON.stringify(_res));
    },
}
\n

Check out the deferred deeplinkg guide from the AppFlyer knowledge base here

\n

2. Direct Deeplinking

\n

Handle the Direct deeplink in the 'onAppOpenAttribution' callback:

\n
var options = {
    devKey: 'devKey',
    appId: \"appId\",
    isDebug: true,
    onAppOpenAttribution: function(_res) {
        console.log(\"onAppOpenAttribution: \" + JSON.stringify(_res));
    },
    onAppOpenAttributionFailure: function(_res) {
        console.log(\"onAppOpenAttributionFailure: \" + JSON.stringify(_res));
    },
};
\n

When a deeplink is clicked on the device the AppsFlyer SDK will return the link in the onAppOpenAttribution method.

\n

3. Unified deep linking

\n

Handle the Unified deeplink in the 'onDeepLinking' callback (if onDeepLinking callback is define, onAppOpenAttribution won't be called):

\n
var options = {
    devKey: 'devKey',
    appId: \"appId\",
    isDebug: true,
    onDeepLinking: function(_res) {
        console.log(\"onDeepLinking: \" + JSON.parse(_res))
    },
};
\n

For more information about this api, please check OneLink Guide Here

\n

Android Deeplink Setup

\n

URI Scheme

\n

In your app’s manifest add the following intent-filter to your relevant activity:

\n
<intent-filter>
    <action android:name=\"android.intent.action.VIEW\" />
    <category android:name=\"android.intent.category.DEFAULT\" />
    <category android:name=\"android.intent.category.BROWSABLE\" />
    <data android:scheme=\"your unique scheme\" />
</intent-filter>
\n

NOTE: On Android, AppsFlyer SDK inspects activity intent object during onResume(). Because of that, for each activity that may be configured or launched with any non-standard launch mode the following code was added to MainActivity.java in android/app/src/main/java/com...

\n

Java:

\n
@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
}
\n

Kotlin:

\n
override fun onNewIntent(intent : Intent){
    super.onNewIntent(intent)
    setIntent(intent)
}
\n

App Links

\n

In your app’s manifest add the following intent-filter to your relevant activity:

\n
<intent-filter android:autoVerify=\"true\">
    <action android:name=\"android.intent.action.VIEW\" />
    <category android:name=\"android.intent.category.DEFAULT\" />
    <category android:name=\"android.intent.category.BROWSABLE\" />
    <data android:scheme=\"your unique scheme\" />
    <data android:scheme=\"https\"
        android:host=\"yourcompany.onelink.me\" 
        android:pathPrefix=\"your path prefix\" />
</intent-filter>
\n

For more on App Links check out the guide here.

\n

iOS Deeplink Setup

\n

URI Scheme

\n
    \n
  1. \n

    Create custom app delegate

    \n
    2. \n
  2. \n

    Add the following iOS method and AppsFlyer API

    \n
    3. \n
\n
@NativeClass()
export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationOpenURLOptions(application: UIApplication, urlOptions: NSURL, options: NSDictionary<string, any>): boolean {
        console.log(\"applicationOpenURLOptions\");
        AppsFlyerLib.shared().handleOpenUrlOptions(urlOptions, options);
        return true;
    }

    // Open URI-scheme for iOS 8 and below
    applicationOpenURLSourceApplicationAnnotation(application: UIApplication, url: NSURL, sourceApplication: string, annotation: any): boolean {
        console.log(\"applicationOpenURLSourceApplicationAnnotation\");
        AppsFlyerLib.shared().handleOpenURLSourceApplicationWithAnnotation(url, sourceApplication, annotation);
        return true;
    }
};
\n

For more on URI-schemes check out the guide here

\n

Universal Links

\n
    \n
  1. \n

    Create custom app delegate

    \n
    2. \n
  2. \n

    Add the following iOS method and AppsFlyer API

    \n
    3. \n
\n
@NativeClass()
export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate{
    public static ObjCProtocols = [UIApplicationDelegate];

    // Open Universal Links
    applicationContinueUserActivityRestorationHandler?(application: UIApplication, userActivity: NSUserActivity, restorationHandler: (p1: NSArray<UIUserActivityRestoring>) => void): boolean{
        console.log(\"applicationContinueUserActivityRestorationHandler\");
        AppsFlyerLib.shared().continueUserActivityRestorationHandler(userActivity, restorationHandler);
        return true;
    }
};
\n

More on Universal Links:\nEssentially, the Universal Links method links between an iOS mobile app and an associate website/domain, such as AppsFlyer’s OneLink domain (xxx.onelink.me). To do so, it is required to:

\n
    \n
  1. \n

    Get your SHA256 fingerprint:

    \n

    a. Creating A Keystore

    \n

    b. Generate Fingerprint

    \n
    2. \n
  2. \n

    Configure OneLink sub-domain and link to mobile app in the AppsFlyer onelink setup on your dashboard, add the fingerprint there (AppsFlyer takes care of hosting the ‘apple-app-site-association’ file)

    \n
    3. \n
  3. \n

    Configure the mobile app to register approved domains:

    \n
    4. \n
\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
    <dict>
        <key>com.apple.developer.associated-domains</key>
        <array>
            <string>applinks:test.onelink.me</string>
        </array>
    </dict>
</plist>
\n

For more on Universal Links check out the guide here.

\n
\n

Set plugin for IOS 14

\n
    \n
  1. Add a custom App Delegate and inside add the ATT consent dialog for IDFA collection:
    2. \n
\n
@NativeClass()
export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate{
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
        if (parseFloat(UIDevice.currentDevice.systemVersion) >= 14) {
            console.log(\"iOS 14\");
            ATTrackingManager.requestTrackingAuthorizationWithCompletionHandler((status) => {

            });
        }
        console.log(\"applicationDidFinishLaunchingWithOptions\");
    }

};
\n
    \n
  1. In the app.ts add:
    2. \n
\n
import { CustomAppDelegate } from \"./custom-app-delegate\";

if (Application.ios) {
    Application.ios.delegate = CustomAppDelegate;
}
\n
    \n
  1. \n

    Add Privacy - Tracking Usage Description inside your .plist file in Xcode.

    \n
    2. \n
  2. \n

    Optional: Set the timeToWaitForATTUserAuthorization property in the options to delay the sdk initazliation for a number of x seconds until the user accept the consent dialog:

    \n
    3. \n
\n
var options = {
    devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
    appId: \"975313579\",
    isDebug: true,
    timeToWaitForATTUserAuthorization: 60
};
\n

For more info visit our Full Support guide for iOS 14:

\n

https://support.appsflyer.com/hc/en-us/articles/207032066#integration-33-configuring-app-tracking-transparency-att-support

\n
\n

##Sharing filter\n(GDPR/CCPA COMPLIANT - Read more information in the following article

\n

In some cases, advertisers may want to stop sharing user-level data with ad networks/partners for specific users.\nReasons for this include:\nPrivacy policies such as CCPA or GDPR\nUser opt-out mechanisms\nCompetition with some partners (ad networks, 3rd parties)\nAppsFlyer provides two API methods to stop sharing data with some or all partners:

\n

##### appsFlyer.setSharingFilter(partners): Promise<any>

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
parametertypedescription
partnersArrayExclude (one or more) networks/integrated partners from getting data
\n

Example: (native javascript)

\n
var partners = [\"\"];

appsFlyer.setSharingFilter(partners).then(function(result) {
    viewModel.set(\"setSharingFilterResponse\", result.status);
}, function(err) {
    viewModel.set(\"setSharingFilter Response\", JSON.stringify(err));
});
\n

##### appsFlyer.setSharingFilterForAllPartners(): Promise<any>

\n\n

Example: (native javascript)

\n
appsFlyer.setSharingFilterForAllPartners().then(function(result) {
    viewModel.set(\"setSharingFilterForAllPartners\", result.status);
}, function(err) {
    viewModel.set(\"setSharingFilterForAllPartners Response\", JSON.stringify(err));
});
\n
\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":261}},"@akylas/nativescript-inappbrowser":{"name":"@akylas/nativescript-inappbrowser","version":"3.1.8","license":"MIT","readme":"

InAppBrowser for NativeScript

\n

Provides access to the system's web browser and supports handling redirects

\n

Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

\n

\n \n

\n

Who is using InAppBrowser?

\n

Do you want to see this package in action? Check these awesome projects, yay! 🎉

\n\n

Share your awesome project here! ❤️

\n

Getting started

\n
tns plugin add @akylas/nativescript-inappbrowser
\n

Manual installation

\n\n

Usage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsAction
openOpens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari.
closeDismisses the system's presented web browser.
openAuthOpens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection).
closeAuthDismisses the current authentication session.
isAvailableDetect if the device supports this plugin.
\n

iOS Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
dismissButtonStyle (String)The style of the dismiss button. [done/close/cancel]
preferredBarTintColor (String)The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF]
preferredControlTintColor (String)The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080]
readerMode (Boolean)A value that specifies whether Safari should enter Reader mode, if it is available. [true/false]
animated (Boolean)Animate the presentation. [true/false]
modalPresentationStyle (String)The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover]
modalTransitionStyle (String)The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl]
modalEnabled (Boolean)Present the SafariViewController modally or as push instead. [true/false]
enableBarCollapsing (Boolean)Determines whether the browser's tool bars will collapse or not. [true/false]
ephemeralWebSession (Boolean)Prevent re-use cookies of previous session (openAuth only) [true/false]
\n

Android Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
showTitle (Boolean)Sets whether the title should be shown in the custom tab. [true/false]
toolbarColor (String)Sets the toolbar color. [gray/#808080]
secondaryToolbarColor (String)Sets the color of the secondary toolbar. [white/#FFFFFF]
navigationBarColor (String)Sets the navigation bar color. [gray/#808080]
navigationBarDividerColor (String)Sets the navigation bar divider color. [white/#FFFFFF]
enableUrlBarHiding (Boolean)Enables the url bar to hide as the user scrolls down on the page. [true/false]
enableDefaultShare (Boolean)Adds a default share item to the menu. [true/false]
animations (Object)Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }]
headers (Object)The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }]
forceCloseOnRedirection (Boolean)Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false]
backButtonDrawableId (String)Sets a custom drawable instead of the X
browserPackage (String)Package name of a browser to be used to handle Custom Tabs.
showInRecents (Boolean)Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]
\n

Demo

\n
import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...
\n

Authentication Flow using Deep Linking

\n

In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,\ndefine your app scheme and replace my-scheme and my-host with your info.

\n\n
<activity
  ...
  android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />
      <data android:scheme=\"my-scheme\" android:host=\"my-host\" android:pathPrefix=\"\" />
  </intent-filter>
</activity>
\n\n
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my-scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my-scheme</string>
    </array>
  </dict>
</array>
\n\n
export const getDeepLink = (path = \"\") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}
\n\n
import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';
import { getDeepLink } from './utilities';
...
  async onLogin() {
    const deepLink = getDeepLink('callback')
    const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(url, deepLink, {
          // iOS Properties
          ephemeralWebSession: false,
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: false
        }).then((response) => {
          if (
            response.type === 'success' &&
            response.url
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...
\n

StatusBar

\n

The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.

\n

Authentication

\n

Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.

\n

Credits 👍

\n\n

Contributing ✨

\n

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
\nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
\nYou can learn more about how you can contribute to this project in the contribution guide.

\n

Contributors ✨

\n

Please do contribute! Issues and pull requests are welcome.

\n

Code Contributors

\n

This project exists thanks to all the people who contribute. [Contribute].

\n

\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"

\n

Collaborators

\n\n\n\n\n\n\n\n\n
\"jdnichollsc\"
Juan Nicholls
✉		\"NathanaelA\"
Nathanael Anderson
✉
\n\n

Individuals

\n

\n

Credits 👍

\n\n","downloadStats":{"lastDay":23,"lastWeek":273,"lastMonth":1210}},"@nstudio/nativescript-smartlook":{"name":"@nstudio/nativescript-smartlook","version":"1.0.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-smartlook

\n

Smartlook SDK for NativeScript.

\n

Comprehensive product analytics & visual user insights.

\n
npm install @nstudio/nativescript-smartlook
\n

For iOS, configure your nativescript.config.ts to use the Swift Package:

\n
ios: {
    SPMPackages: [
        {
            name: \"SmartlookAnalytics\",
            libs: [\"SmartlookAnalytics\"],
            repositoryURL: \"https://github.com/smartlook/analytics-swift-package.git\",
            version: \"2.2.4\"
        }
    ]
}
\n

Usage

\n

Initialize the SDK with your api key before the app boots:

\n
Application.on(Application.launchEvent, () => {
  Smartlook.start('<api-key>');
});

// bootstrap app...
\n

API

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":42}},"@nativescript/template-tab-navigation":{"name":"@nativescript/template-tab-navigation","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core Tab Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a TabView component for navigation.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-tab-js --template @nativescript/template-tab-navigation
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-tab-js --template nativescript-app-templates/packages/template-tab-navigation
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module is located at:

\n\n

The template has the following pages used for the tab content items:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":11,"lastMonth":469}},"@nativescript/template-drawer-navigation-vue":{"name":"@nativescript/template-drawer-navigation-vue","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Vue Drawer Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-drawer-vue --template @nativescript/template-drawer-navigation-vue
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-drawer-vue --template nativescript-app-templates/packages/template-drawer-navigation-vue
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

There is a component that is used for setting RadSideDrawer instance as an application root view:

\n\n

RadSideDrawer has the following component structure:

\n\n

The template has the following blank page components:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":6,"lastMonth":458}},"nativescript-webview-interface":{"name":"nativescript-webview-interface","version":"1.4.4","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

Nativescript-WebView-Interface

\n

Nativescript Plugin for bi-directional communication between WebView and Android/iOS

\n

Installation

\n

From the terminal, go to your app's root folder and execute:

\n
tns plugin add nativescript-webview-interface
\n

Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

\n
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
\n

Usage

\n

For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

\n

Inside Native App

\n

Insert a web-view somewhere in your page.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
....
<web-view id=\"webView\"></web-view>
....
</Page>
\n

Initialize WebViewInterface Plugin in your javascript file.

\n
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;

function pageLoaded(args){
    page = args.object;
    setupWebViewInterface(page) 
}

// Initializes plugin with a webView
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
\n

Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

\n

Use any API Method of WebViewInterface Class

\n
function handleEventFromWebView(){
    oWebViewInterface.on('anyEvent', function(eventData){
        // perform action on event
    });
}

function emitEventToWebView(){
    oWebViewInterface.emit('anyEvent', eventData);
}

function callJSFunction(){
    oWebViewInterface.callJSFunction('functionName', args, function(result){
        
    });
}
\n

If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

\n
webView.on('loadFinished', (args) => {
    if (!args.error) {
        // emit event to webView or call JS function of webView
    }
});
\n

Inside WebView

\n

Import nativescript-webview-interface.js in your html page.

\n
<html>
    <head></head>
    <body>
        <script src=\"path/to/nativescript-webview-interface.js\"></script>
        <script src=\"path/to/your-custom-script.js\"></script>        
    </body>
</html>
\n

Use any API Method of window.nsWebViewInterface inside webview

\n
var oWebViewInterface = window.nsWebViewInterface;

// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
    
});

// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);

// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
    // do any processing
    return dataOrPromise;
}
\n

API

\n

Native App API

\n

Constructor:

\n

WebViewInterface(webView: WebView, src?: string)

\n

webView is an instance of nativescript web-view.

\n

src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

\n

API Methods of WebViewInterface Class:

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emitted from webView.

\n

Callback will be executed with the data sent from webView in any format.

\n

off(eventOrCmdName: string, callback?: (eventData: any) => void): void

\n

Use this method to de-register listener of any event/command emitted from webView.

\n

If callback is not set, all the event listeners for this event will be de-registered.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from native app to webView with data in any format.

\n

callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

\n

Use this method to call to any javascript function in global scope in webView.

\n

Arguments are optional. But if supplied, must be in array format.

\n

If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
\nIf the function execution generates any error, the errorHandler will be called with the error.

\n

destroy(): void

\n

Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

\n

WebView API

\n

API Methods available in window.nsWebViewInterface global variable.

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emited from native app.

\n

Callback will be executed with the data sent from native app in any format.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from webView to native app with data in any format.

\n","downloadStats":{"lastDay":125,"lastWeek":531,"lastMonth":2084}},"@nstudio/nativescript-aptabase":{"name":"@nstudio/nativescript-aptabase","version":"1.1.3","license":"Apache-2.0","readme":"

\"Aptabase\"

\n

@nstudio/nativescript-aptabase

\n

Instrument your NativeScript apps with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.

\n

Install

\n

Install the SDK using your preferred JavaScript package manager

\n
pnpm add @nstudio/nativescript-aptabase
# or
npm add @nstudio/nativescript-aptabase
# or
yarn add @nstudio/nativescript-aptabase
\n

For iOS, configure your nativescript.config.ts to use the Swift Package:

\n
ios: {
    SPMPackages: [
        {
            name: 'Aptabase',
            libs: ['Aptabase'],
            repositoryURL: 'https://github.com/aptabase/aptabase-swift.git',
            version: '0.1.0'
        }
    ]
}
\n

Usage

\n

First you need to get your App Key from Aptabase, you can find it in the Instructions menu on the left side menu.

\n

Initialize the SDK using your App Key and the initialize function. We would recommend calling it as early as possible in your app life cycle.

\n
import { Aptabase } from '@nstudio/nativescript-aptabase';

Aptabase.initialize('<YOUR_APP_KEY>'); // 👈 this is where you enter your App Key
\n

Afterwards you can start tracking events with track:

\n
import { Aptabase } from '@nstudio/nativescript-aptabase';

// Track an event
Aptabase.track(\"connect_click\");
 
// Track events with custom properties
Aptabase.track(\"play_music\", {
  name: \"Here comes the sun\"
});
\n

A few important notes:

\n
    \n
  1. The SDK will automatically enhance the event with some useful information, like the OS, the app version, and other things.
    2. \n
  2. You're in control of what is sent to Aptabase. This SDK does not automatically track any events, you need to call track manually.\n
      \n
    • Because of this, it's generally recommended to at least track an event at startup
      • \n
    \n
    3. \n
  3. You do not need to await the track function, it'll run in the background.
    4. \n
  4. Only strings and numbers values are allowed on custom properties
    5. \n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":179}},"nativescript-ui-chart":{"name":"nativescript-ui-chart","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI Chart

\n\n

Overview

\n

The NativeScript UI Chart plugin can be used to visualize data in a human-readable way through lines, areas, bars, pies, and more. Some features include:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-chart
\n

Documentation

\n

The NativeScript UI Chart plugin has two types of charts - chartesian and pie.\nThey are presented by the RadChartesianChart & RadPieChart classes.\nEach of them can visualize data with different types of series. With the chartesian chart you can also specify the axes that are used.\nMore information is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":238,"lastWeek":1119,"lastMonth":4557}},"@nativescript/template-drawer-navigation-ts":{"name":"@nativescript/template-drawer-navigation-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core with TypeScript Drawer Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-drawer-ts --template @nativescript/template-drawer-navigation-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-drawer-ts --template nativescript-app-templates/packages/template-drawer-navigation-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

There is a folder that is used for setting RadSideDrawer instance as an application root:

\n\n

RadSideDrawer has the following component structure:

\n\n

The template has the following blank page modules:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":8,"lastMonth":484}},"@voicethread/nativescript-audio-recorder":{"name":"@voicethread/nativescript-audio-recorder","version":"1.0.2","license":"Apache-2.0","readme":"

@voicethread/nativescript-audio-recorder

\n

Nativescript audio recorder \"apple\" \"android\"

\n

\"npm\"

\n

This plugin provides an audio recorder for Android and iOS that supports recording of audio from a device microphone input and saved to an MP4/AAC audio file. It also provides a function to merge multiple audio recordings together.

\n

Contents

\n\n

Installation

\n
npm install @voicethread/nativescript-audio-recorder --save
\n

OR

\n
ns plugin add @voicethread/nativescript-audio-recorder
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-recorder.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { AudioRecorder, AudioRecorderOptions } from '@voicethread/nativescript-audio-recorder';
\n
    \n
  1. Record an audio file.
    2. \n
\n
this.recorder = new AudioRecorder();
//you can tie into these events to update control UI state
this.recorder.on('RecorderFinished', () => {
  console.log('RecorderFinished');
});
this.recorder.on('RecorderFinishedSuccessfully', () => {
  console.log('RecorderFinishedSuccessfully');
});
let recOptions: AudioRecorderOptions = {
    filename: path.join(knownFolders.documents().path, 'audiorecording-1.mp4');,
    infoCallback: infoObject => {
      console.log('AudioRecorder infoCallback: ', JSON.stringify(infoObject));
    },
    errorCallback: errorObject => {
      console.error('AudioRecorder errorCallback: ', JSON.stringify(errorObject));
    },
  };
try {
  this.recorder
    .record(recOptions)
    .then(() => {
      console.log('recording audio started');
    })
    .catch(err => {
      console.error(err);
    });
} catch (err) {
  alert(err?.message);
}
\n
    \n
  1. (Optional) Merge multiple recordings into a single file.
    2. \n
\n
let audioFiles: [string] = ['PATH/TO/audiorecording-1.mp4','PATH/TO/audiorecording-2.mp4'];
let finalfile = await this.recorder.mergeAudioFiles(this.audioFiles, 'PATH/TO/audiorecording.mp4');
\n

Android Specifics

\n

In order to record audio, you'll need to add the following permission to your AndroidManifest.xml:

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
  ...
</manifest>
\n

To request permissions in the demo app, we use the @nativescript-community perms plugin.

\n

iOS Specifics

\n

In order to record audio, iOS will require permission to access the microphone. Add the following to your Info.plist:

\n
<key>NSMicrophoneUsageDescription</key>
<string>This app requires access to your microphone to record audio</string>
\n

Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission.

\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n

Supported Audio Recorder options

\n
export interface AudioRecorderOptions {
  /**
   * Gets or sets the recorded file name.
   */
  filename: string;

  /**
   * Sets the source for recording ***ANDROID ONLY for now ***
   */
  source?: any;

  /**
   * Gets or set the max duration of the recording session.
   * Input in milliseconds, which is Android's format.
   * Will be converted appropriately for iOS.
   */
  maxDuration?: number;

  /**
   * Enable metering. Off by default.
   */
  metering?: boolean;

  /**
   * Channels
   */
  channels?: any;

  /**
   * Sampling rate
   */
  sampleRate?: any;

  /**
   * Bit rate
   */
  bitRate?: any; //Android only, use iosAudioQuality for iOS

  /**
   * Sets the ios audio quality setting. Options are Min|Low|Medium|High|Max. Set to Medium by default.
   */
  iosAudioQuality?: string;

  /**
   * Gets or sets the callback when an error occurs with the media recorder.
   * @returns {Object} An object containing the native values for the error callback.
   */
  errorCallback?: Function;

  /**
   * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
   * @returns {Object} An object containing the native values for the info callback.
   */
  infoCallback?: Function;
}
\n

Audio Recorder exports

\n
export class AudioRecorder extends Observable implements IAudioRecorder {
  readonly ios: any; //Native iOS recorder instance
  readonly android: any;  //Native Android recorder instance

  /**
   * Starts a recording session with the provided options.
   * @param options [AudioRecorderOptions]
   */
  record(options: AudioRecorderOptions): Promise<any>;

  /**
   * Stops the recording
   */
  stop(): Promise<File>;

  /**
   * Disposes of the recorder session
   */
  dispose(): Promise<any>;

  /**
   * Returns the maximum absolute amplitude that was sampled since the last call to this method.
   * @param channel [number]
   */
  getMeters(channel?: number): any;

  /**
   * Returns value indicating the recorder is currently recording.
   */
  isRecording(): boolean;

  /**
   * Merges all files with file paths specified in audioFiles into a new file at outputPath. This only supports MP4/AAC audio files currently
   * Note: For Android, API 26+ is required.
   */
  mergeAudioFiles(audioFiles: string[], outputPath: string): Promise<File>;
}
\n

Acknowledgements

\n

This plugin is based on https://github.com/nstudio/nativescript-audio

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":43}},"nativescript-photoviewer":{"name":"nativescript-photoviewer","version":"3.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript PhotoViewer

\n

A simple photo-viewer/gallery component for NativeScript.

\n

Limitations

\n

Since the plugin is based on two different libraries for two different platforms their features are also somewhat diferent:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformStateRemote images (url)Local images (resource)Titles/CreditsAlbum ViewColor Palette
iOS:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
Android:x: (Broken):white_check_mark::x::x::white_check_mark::white_check_mark:
\n

If anyone has tips on a better android library that has same or similar features to the iOS, let us know.

\n

Latest version

\n

3.0.0

\n\n

Installation

\n

Run tns plugin add nativescript-photoviewer in your root directory of your project.

\n

Usage

\n

It's best to take a look at the included demo app(s) for advanced usages. Below is just a simple example on how to get the plugin running with minimal effort using vanilla nativescript (ts). For Angular, see demo-ng.

\n
// Include the module
import { PhotoViewer, PhotoViewerOptions, PaletteType, NYTPhotoItem } from \"nativescript-photoviewer\";
var photoViewer: PhotoViewer; 

// Create a new instace of PhotoViewer in the onLoaded event. Very important to do the init here! 
export function pageLoaded(args: EventData) {\t
    photoViewer = new PhotoViewer();
}

// Show gallery
export function openGallery(args: EventData){

    let image1 = \"https://blabla/image1.jpg\";
    let image2 = \"https://blabla/image2.jpg\";
    let image3 = \"https://blabla/image3.jpg\";
    let image4 = \"https://blabla/image4.jpg\";
    let myImages = [image1, image2, image3, image4];

    // Example on how to use the options class (optional)
    let photoviewerOptions: PhotoViewerOptions = {
        startIndex: 0,
        ios: {
            completionCallback: galleryLoaded 
        },
        android: {
            paletteType: PaletteType.DarkVibrant,
            showAlbum: false
        }
    };
\t
    photoViewer.showGallery(myImages, photoviewerOptions);
}
\n

Changelog

\n

3.0.0

\n\n

2.1.5

\n\n

2.1.1

\n\n

2.1.0

\n\n

2.0.2

\n\n

1.5.0

\n\n

1.4.0

\n\n

1.3.0

\n\n

Screenshots

\n

\"Demo \"Demo\n\"Demo \"Demo

\n

Contribution

\n

I'll review & accept pull requests that improve the plugin and assign credit.

\n

Credits

\n

The plugin is based on the following libraries:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
NYTPhotoViewerImageGallery
\n","downloadStats":{"lastDay":1,"lastWeek":16,"lastMonth":90}},"nativescript-fingerprint-auth":{"name":"nativescript-fingerprint-auth","version":"7.0.2","license":"MIT","readme":"

NativeScript Fingerprint Authentication

\n
\n

Also works with Face ID on iPhone X(s) 🚀

\n
\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-fingerprint-auth
\n

Then open App_Resources/Android/AndroidManifest.xml and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line:

\n
  <uses-sdk
      android:minSdkVersion=\"17\"
      android:targetSdkVersion=\"__APILEVEL__\"
      tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
\n

Demo

\n

If you want a quickstart, check out the demo app. Run it locally using these commands:

\n
git clone https://github.com/EddyVerbruggen/nativescript-fingerprint-auth
cd nativescript-fingerprint-auth/src
npm run demo.android # or demo.ios
\n

\n

API

\n

Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

\n

available

\n

JavaScript

\n
var fingerprintAuthPlugin = require(\"nativescript-fingerprint-auth\");
var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

fingerprintAuth.available().then(
    function(avail) {
      console.log(\"Available? \" + avail);
    }
)
\n

TypeScript

\n
import { FingerprintAuth, BiometricIDAvailableResult } from \"nativescript-fingerprint-auth\";

class MyClass {
  private fingerprintAuth: FingerprintAuth;

  constructor() {
    this.fingerprintAuth = new FingerprintAuth();
  }

  this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
    console.log(`Biometric ID available? ${result.any}`);
    console.log(`Touch? ${result.touch}`);
    console.log(`Face? ${result.face}`);
  });
}
\n

verifyFingerprint

\n

Note that on the iOS simulator this will just resolve().

\n
fingerprintAuth.verifyFingerprint(
\t{
\t  title: 'Android title', // optional title (used only on Android)
\t  message: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
\t  authenticationValidityDuration: 10, // optional (used on Android, default 5)
\t  useCustomAndroidUI: false // set to true to use a different authentication screen (see below)
\t})
\t.then((enteredPassword?: string) => {
\t  if (enteredPassword === undefined) {
\t    console.log(\"Biometric ID OK\")
\t  } else {
\t    // compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
\t  }
\t})
\t.catch(err => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`));
\n

A nicer UX/UI on Android (useCustomAndroidUI: true)

\n

The default authentication screen on Android is a standalone screen that (depending on the exact Android version) looks kinda 'uninteresting'.\nSo with version 6.0.0 this plugin added the ability to override the default screen and offer an iOS popover style which you can activate by passing in useCustomAndroidUI: true in the function above.

\n

One important thing to realize is that the 'use password' option in this dialog doesn't verify the entered password against\nthe system password. It must be used to compare the entered password with an app-specific password the user previously configured.

\n
Optional change
\n

If you want to override the default texts of this popover screen, then drop a file strings.xml in your project and override the properties you like. See the demo app for an example.

\n
⚠️ Important note when using NativeScript < 5.4.0
\n

Use plugin version < 7.0.0 to be able to use this feature with NativeScript < 5.4.0

\n
\n

Skip this section if you're on NativeScript 5.4.0 or newer because it's all handled automatically!

\n
\n

To be able to use this screen, a change to App_Resources/Android/AndroidManifest.xml is required as our NativeScript activity needs to extend AppCompatActivity (note that in the future this may become the default for NativeScript apps).

\n

To do so, open the file and replace <activity android:name="com.tns.NativeScriptActivity" by <activity android:name="org.nativescript.fingerprintplugin.AppCompatActivity".

\n

Note that if you forget this and set useCustomAndroidUI: true the plugin will reject the Promise with a relevant error message.

\n

Mandatory changes for webpack and snapshot builds (again, for NativeScript < 5.4.0 only)

\n

If you are using Webpack with or without snapshot there are couple more changes required in order to make the custom UI work in your production builds.
\nFirst you need to edit your vendor-platform.android.ts file and add require("nativescript-fingerprint-auth/appcompat-activity");. You can see the changed file in the demo app here.
\nThe second change should be made in your webpack.config.js file. Find the place where the NativeScriptSnapshotPlugin is pushed to the webpack plugins and add "nativescript-fingerprint-auth" in the tnsJavaClassesOptions.packages array. The result should look something like:

\n
// ...
    if (snapshot) {
        config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
            chunk: \"vendor\",
            projectRoot: __dirname,
            webpackConfig: config,
            targetArchs: [\"arm\", \"arm64\", \"ia32\"],
            tnsJavaClassesOptions: {
                packages: [\"tns-core-modules\", \"nativescript-fingerprint-auth\"],
            },
            useLibs: false
        }));
    }
// ...
\n

verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

\n

Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

\n
fingerprintAuth.verifyFingerprintWithCustomFallback({
  message: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
  fallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
  authenticationValidityDuration: 10 // optional (used on Android, default 5)
}).then(
    () => {
      console.log(\"Fingerprint was OK\");
    },
    error => {
      // when error.code === -3, the user pressed the button labeled with your fallbackMessage
      console.log(\"Fingerprint NOT OK. Error code: \" + error.code + \". Error message: \" + error.message);
    }
);
\n

Face ID (iOS)

\n

iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

\n

You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSFaceIDUsageDescription</key>
  <string>For easy authentication with our app.</string>
\n

Security++ (iOS)

\n

Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

\n

So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

\n
fingerprintAuth.available().then(avail => {
    if (!avail) {
      return;
    }
    fingerprintAuth.didFingerprintDatabaseChange().then(changed => {
        if (changed) {
          // re-auth the user by asking for his credentials before allowing a fingerprint scan again
        } else {
          // call the fingerprint scanner
        }
  });
});
\n

Changelog

\n\n","downloadStats":{"lastDay":7,"lastWeek":60,"lastMonth":265}},"nativescript-social-login":{"name":"nativescript-social-login","version":"4.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Social Login

\n

NativeScript module for social (token based) log-ins.

\n

\"Donate\"

\n

Implementations

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderAndroidiOS
GoogleYesYes
FacebookYesYes
TwitterNoNo
\n

License

\n

MIT license

\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Changes

\n

v1.4.x to 1.5.x

\n

Google

\n\n

v1.3.x to 1.4.x

\n

Facebook

\n\n

v1.2.x to 1.3.x

\n

Google

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-social-login
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n
Permissions
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <!-- ... -->

    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <!-- ... -->
</manifest>
\n
Strings
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
    <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>
\n

Setup Android Google Sign in for Debug Builds

\n
    \n
  1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
    2. \n
\n
keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
\n

The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

\n
    \n
  1. Create an app here on Google Developer site.\n
      \n
    • Enter the App name. This can be anything but it will display to the user who is authenticating.
      • \n
    • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
      • \n
    • Next configure the Google services.
      • \n
    • Select Google Sign-In
      • \n
    • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
      • \n
    • Enable Google Sign-In\n
        \n
      • If only enabling Google Sign-In you do not need the configuration file inside your application.
        • \n
      \n
      • \n
    \n
    2. \n
  2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
    3. \n
\n

iOS

\n

GoogleService-Info.plist

\n

You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<!-- FACEBOOK AND GOOGLE LOGIN -->
<key>CFBundleURLTypes</key>
    <array>
        <!-- GOOGLE START -->
\t\t<dict>
\t\t\t<key>CFBundleTypeRole</key>
\t\t\t<string>Editor</string>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
\t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                <!-- Get it from your GoogleService-Info.plist -->
                <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t\t</array>
\t\t</dict>
\t\t<!-- GOOGLE END -->
\t\t<!-- FACEBOOK START -->
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
        <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>FacebookAppID</key>
    <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
    <key>FacebookDisplayName</key>
    <string>FacebookLoginDemo</string>
    <!-- FACEBOOK END -->
\n

https://developers.facebook.com/docs/ios

\n

Application main file

\n

Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

\n
TypeScript
\n
if (application.ios) {

  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      let gglDelegate = false;

      try {
        const errorRef = new interop.Reference();
        GGLContext.sharedInstance().configureWithError(errorRef);

        const signIn = GIDSignIn.sharedInstance();
        gglDelegate = true;
      } catch (error) {
        console.log(error);
      }

      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

      return gglDelegate || fcbDelegate;
    }

    applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
      const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

      return fcbDelegate || gglDelegate;
    }
  }

  application.ios.delegate = MyDelegate;
}
\n
JavaScript
\n
if (application.ios) {
    var MyDelegate = (function (_super) {
        __extends(MyDelegate, _super);
        function MyDelegate() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            var gglDelegate = false;
            try {
                var errorRef = new interop.Reference();
                GGLContext.sharedInstance().configureWithError(errorRef);
                var signIn = GIDSignIn.sharedInstance();
                gglDelegate = true;
            }
            catch (error) {
                console.log(error);
            }
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
            return gglDelegate || fcbDelegate;
        };
        MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
            var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
            return fcbDelegate || gglDelegate;
        };
        return MyDelegate;
    }(UIResponder));
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    application.ios.delegate = MyDelegate;
}
\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
import SocialLogin = require(\"nativescript-social-login\");
\n

Initialize

\n
import Application = require(\"application\");
import SocialLogin = require(\"nativescript-social-login\");

if (Application.android) {
    Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
        let result = SocialLogin.init({
            activity: event.activity,
        });
    });
}
\n

The init() function receives an (optional) object with the following structure:

\n
interface ILoginConfiguration {
    /**
     * The underlying custom activity to use.
     */
    activity?: android.app.Activity;

    /**
     * Facebook specific configuration.
     */
    facebook?: {
        /**
         * Initialize Facebook or not. Default: (true)
         */
        initialize?: boolean;
        /**
         * Should Logout current Facebook session or not. Default: (false)
         */
        clearSession?: boolean;
    }

    /**
     * Google specific configuration.
     */
    google?: {
        /**
         * Initialize Google or not. Default: (true)
         */
        initialize?: boolean;

       /**
        * The server client ID for requesting server auth token.
        */
        serverClientId?: string;

        /**
         * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
         * It will be set in authCode property of result object.
         *
         * If false (default), it will request for token id. it will be set in authToken property of result object.
         */
        isRequestAuthCode?: boolean;
    }

    /**
     * Fallback action for the result of the underlying activity.
     */
    onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
}
\n

The result object that is returned by init() has the following structure:

\n
interface IInitializationResult {
    facebook: {
        error: any,
        isInitialized: boolean,
    },
    google: {
        error: any,
        isInitialized: boolean,
    },
    twitter: {
        error: any,
        isInitialized: boolean,
    }
}
\n

The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

\n

The error properties are only defined if an exception was thrown while initialization.

\n

Login

\n

If you want to use a login functions you have to submit a callback that receives an object with the following structure:

\n
interface ILoginResult {
    /**
     * Gets the auth token (if requested).
     */
    authToken?: string;

    /**
     * Offline auth code used by servers to request new auth tokens.
     */
    authCode?: string;

    /**
     * Gets the result code.
     */
    code: LoginResultType;

    /**
     * The display name.
     */
    displayName?: string;

    /**
     * First name of the user.
     */
    firstName?: string;

    /**
     * Last name of the user.
     */
    lastName?: string;

    /**
     * Gets the error (if defined).
     */
    error?: any;

    /**
     * The ID of the user.
     */
    id?: string;

    /**
     * The photo URL.
     */
    photo?: string;

    /**
     * Gets the underlying provider.
     */
    provider?: string;

    /**
     * The user token, like email address.
     */
    userToken?: string;
}
\n

The following functions are implemented:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderProvider
loginWithFacebookFacebook
loginWithGoogleGoogle
\n

Example

\n
SocialLogin.loginWithFacebook(
    (result) => {
        console.log(\"code: \" + result.code);
        console.log(\"error: \" + result.error);
        console.log(\"userToken: \" + result.userToken);
        console.log(\"displayName: \" + result.displayName);
        console.log(\"photo: \" + result.photo);
        console.log(\"authToken: \" + result.authToken);
    }
);
\n

It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

\n
import { Component, NgZone } from \"angular/core\";

@Component({})
class SigninComponent {
    constructor(private ngZone: NgZone) {}

    login() {
        SocialLogin.loginWithFacebook((result) => {
            this.ngZone.run(() => {
                console.log(\"code: \" + result.code);
                console.log(\"error: \" + result.error);
                console.log(\"userToken: \" + result.userToken);
                console.log(\"displayName: \" + result.displayName);
                console.log(\"photo: \" + result.photo);
                console.log(\"authToken: \" + result.authToken);
            });
        });
    }
}
\n

There is also a great example by dgomezs that shows how to configure your app for Facebook.

\n

Logging

\n

If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

\n
SocialLogin.addLogger(function(msg: any, tag: string) {
    console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
});
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":61,"lastMonth":190}},"nativescript-sse":{"name":"nativescript-sse","version":"4.0.2","license":"Apache-2.0","readme":"

NativeScript Server Sent Events

\n

\"npm\"\n\"npm\"\n\"Build

\n

A NativeScript client for the Server Sent Events (SSE).

\n

Install

\n

npm install nativescript-sse

\n

Usage

\n
import { SSE } from 'nativescript-sse';

let sse = new SSE(serverApi: string, headers: object);
sse.events.on('onConnect', (data) => {
    console.log(data.object.connected);
});
sse.events.on('onMessage', (data) => {
    this.list.push(JSON.parse(data.object.message.data))
});
sse.events.on('onError', (data) => {
    console.log(data.object.error);
});
see.close();
\n","downloadStats":{"lastDay":0,"lastWeek":21,"lastMonth":70}},"nativescript-secure-storage":{"name":"nativescript-secure-storage","version":"2.6.2","license":"MIT","readme":"

NativeScript Secure Storage plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-secure-storage
\n

Demo app

\n

Want to dive in quickly? Check out the demo! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device.

\n\n

PRO TIP: Want to store objects instead of strings? Use JSON.stringify with set and JSON.parse with get.

\n

API

\n

set | setSync

\n
\n

"In order to GET something you first need to SET it."

\n

-- Eddy Verbruggen

\n
\n
JavaScript
\n
// require the plugin
var SecureStorage = require(\"nativescript-secure-storage\").SecureStorage;

// instantiate the plugin
var secureStorage = new SecureStorage();

// async
secureStorage.set({
  key: \"foo\",
  value: \"I was set at \" + new Date()
}).then(
  function(success) {
    console.log(\"Successfully set a value? \" + success);
  }
);

// sync
var success = secureStorage.setSync({
  key: \"foo\",
  value: \"I was set at \" + new Date()
});
\n
TypeScript
\n
// require the plugin
import { SecureStorage } from \"nativescript-secure-storage\";

// instantiate the plugin
let secureStorage = new SecureStorage();

// async
secureStorage.set({
  key: \"foo\",
  value: \"I was set at \" + new Date()
}).then(success => console.log(\"Successfully set a value? \" + success));

// sync
const success = secureStorage.setSync({
  key: \"foo\",
  value: \"I was set at \" + new Date()
});
\n

get | getSync

\n

Will return null if not found.

\n
JavaScript
\n
// async
secureStorage.get({
  key: \"foo\"
}).then(
  function(value) {
    console.log(\"Got value: \" + value);
  }
);

// sync
var value = secureStorage.getSync({
  key: \"foo\"
});
\n
TypeScript
\n
// async
secureStorage.get({
  key: \"foo\"
}).then(value => console.log(\"Got value: \" + value));

// sync
const value = secureStorage.getSync({
  key: \"foo\"
});
\n

remove | removeSync

\n
JavaScript
\n
// async
secureStorage.remove({
  key: \"foo\"
}).then(
  function(success) {
    console.log(\"Removed value? \" + success);
  }
);

// sync
var success = secureStorage.removeSync({
  key: \"foo\"
});
\n
TypeScript
\n
// async
secureStorage.remove({
  key: \"foo\"
}).then(success => console.log(\"Successfully removed a value? \" + success));

// sync
const success = secureStorage.removeSync({
  key: \"foo\"
});
\n

removeAll | removeAllSync

\n
JavaScript
\n
// async
secureStorage.removeAll().then(
  function(success) {
    console.log(\"Removed value? \" + success);
  }
);

// sync
var success = secureStorage.removeAllSync();
\n
TypeScript
\n
// async
secureStorage.removeAll().then(success => console.log(\"Successfully removed a value? \" + success));

// sync
const success = secureStorage.removeAllSync();
\n

clearAllOnFirstRun | clearAllOnFirstRunSync

\n

These functions can be used if you want to clear data when your app is reinstalled.

\n

This is only really useful on iOS because if you write something (through this plugin) to the Keychain, this data won't be removed when the app is uninstalled.\nSo the next time the same app is installed, it will find the data in the keychain.

\n

So if you want to clear 'lingering' data from a previous install, make sure you run one of these\nmethods before using other methods this plugin provides.

\n
JavaScript
\n
// async
secureStorage.clearAllOnFirstRun().then(
  function(success) {
      console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
  }
);

// sync
var success = secureStorage.clearAllOnFirstRunSync();
\n
TypeScript
\n
// async
secureStorage.clearAllOnFirstRun().then(success => {
    console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
});

// sync
const success = secureStorage.clearAllOnFirstRunSync();
\n

isFirstRun | isFirstRunSync

\n

As a bonus, you can piggyback the 'first run' mechanism to do anything you want when the plugin detects\nthis is the first run (after an install or install-delete-reinstall).

\n
TypeScript
\n
// sync
if (secureStorage.isFirstRunSync()) {
  // do whatever you want
}

// async
secureStorage.isFirstRun().then(isFirst => {
  // if isFirst is true, do whatever you like
});
\n

Usage with Angular

\n

In your view:

\n
<Button text=\"set secure value\" (tap)=\"setSecureValue()\"></Button>
\n

In your @Component:

\n
import { SecureStorage } from \"nativescript-secure-storage\";

export class MyComponent {
  secureStorage = new SecureStorage();

  // a method that can be called from your view
  setSecureValue() {
    this.secureStorage.set({
      key: 'myKey',
      value: 'my value'
    }).then(success => { console.log(success)});
  }
}
\n

iOS Security++

\n

By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

\n
declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
const secureStorage = new SecureStorage(kSecAttrAccessibleWhenUnlockedThisDeviceOnly);
\n

iOS Simulator

\n

Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

\n

If you're running into issues similar to issue_10, consider using the default behaviour again.

\n

Credits

\n\n","downloadStats":{"lastDay":15,"lastWeek":83,"lastMonth":548}},"@nativescript-dom/react-types":{"name":"@nativescript-dom/react-types","version":"1.0.4","license":"MIT","readme":"

react-types

\n

Typescript types for react-nativescript that give you proper and complete intellisense in code editors.

\n

Installtion

\n
    \n
  1. Install the core and react types in your project
    2. \n
\n
npm install @nativescript-dom/core-types @nativescript-dom/react-types --save-dev
\n
    \n
  1. Configure tsconfig.json as below
    2. \n
\n
{
  \"compilerOptions\": {
    ...
    \"types\": [
        \"node\",
        \"@nativescript-dom/core-types\",
        \"@nativescript-dom/react-types\"
        ],
...
  }
\n

That's it, enjoy a fully typed react-nativescript experience.

\n

\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":78}},"@nativescript-dom/core-types":{"name":"@nativescript-dom/core-types","version":"1.0.29","license":"MIT","readme":"
\n\n
\n

\nSingle, centralized TypeScript types for NativeScript web frameworks.\n

\n

NativeScript's core has been first-class Typescript since very long but sadly the benefits in terms of better auto-complete/intellisense for end-developers in code editors hasn't been properly propgated down especially when you use NativeScript with Vue, Svelte, React and other web frameworks. The main reason for this is that all these frameworks require all the core views to be like HTML elements. Hence it requires rewriting the types or generating them from core which are hard to maintain and do not have the best quality as compared to @nativescript/core. If types change in core or a new prop is added or some part of the JSDoc get's updated, it's not transferred down to the end-developer until a new version of the flavor is released.

\n

We need something better.

\n

A single types system

\n

Finally we have a solution to this. A single & undocked type system that combines DOM & core into a single interface that can be used across all web frameworks. So now we update the types in one place and everyone will get improved and better types automatically without doing any extra work or any flavor updates.

\n\n

Installation

\n

Get the types packages for your project and boost DX of your team while developing NativeScript apps to the next level.

\n

@nativescript-dom/core-types

\n

Renderer agnostic typeScript definitions for @nativescript/core views exposed as HTML DOM elements

\n

@nativescript-dom/react-types

\n

TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for react

\n

@nativescript-dom/solidjs-types

\n

TypeScript definitions for@nativescript/core views exposed as JSX intrinsic elements for solidjs

\n

@nativescript-dom/svelte-types

\n

TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for svelte

\n

@nativescript-dom/vue-types

\n

TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for vue

\n

@nativescript-dom/angular-types

\n

Typescript definitions for @nativescript/angular that expose @nativescript/coree views as DOM elements in HTML templates and provide 100% complete intellisense in code editors

\n

\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":11,"lastMonth":535}},"@nstudio/nativescript-input-mask":{"name":"@nstudio/nativescript-input-mask","version":"1.0.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-input-mask

\n

Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

\n

This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

\n

Installation

\n
npm install @nstudio/nativescript-input-mask
\n

If you were using 0.1.x, please note the following breaking changes in 1.0.0 release:

\n\n

Usage

\n

Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current text value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

\n

Documentation for masks is below (from here).

\n
\n

Masks consist of blocks of symbols, which may include:

\n\n

Square brackets block may contain any number of special symbols:

\n
    \n
  1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
    2. \n
  2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
    3. \n
  3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
    4. \n
  4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
    5. \n
  5. _ — mandatory symbol (digit or letter).
    6. \n
  6. - — optional symbol (digit or letter).
    7. \n
\n

Other symbols inside square brackets will cause a mask initialization error.

\n

Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

\n

Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

\n

Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

\n\n

Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

\n

Mask format examples:

\n
    \n
  1. [00000000000]
    2. \n
  2. {401}-[000]-[00]-[00]
    3. \n
  3. [000999999]
    4. \n
  4. {818}-[000]-[00]-[00]
    5. \n
  5. [A][-----------------------------------------------------]
    6. \n
  6. [A][_______________________________________________________________]
    7. \n
  7. 8 [0000000000]
    8. \n
  8. 8([000])[000]-[00]-[00]
    9. \n
  9. [0000]{-}[00]
    10. \n
  10. +1 ([000]) [000] [00] [00]
    11. \n
\n
\n

Angular

\n

Add the following lines to app/app.module.ts:

\n
import { registerElement } from '@nativescript/angular';
import { InputMask } from '@nstudio/nativescript-input-mask';

registerElement('InputMask', () => InputMask);
\n

Use like a TextField with a mask property and other event properties:

\n
import { Component, OnInit } from '@angular/core';

@Component({
\tselector: 'ns-app',
\ttemplate: `
\t\t<StackLayout>
\t\t\t<InputMask mask=\"([000]) [000]-[0000]\" text=\"1235551111\" (maskedValueChange)=\"onMaskedValueChange($event)\" (completedChange)=\"onCompletedChage($event)\"> </InputMask>
\t\t</StackLayout>
\t`,
})
export class AppComponent {
\tonMaskedValueChange(args) {
\t\t// e.g. `(123) 555-1111`
\t\tconsole.log('Masked value:', args.value);
\t}

\tonCompletedChange(args) {
\t\t// `args.value` indicates whether the field contains all mandatory characters.
\t\tconsole.log('Completed:', args.value);
\t}
}
\n

Note that masks can be bound and changed on the fly. See demo app for a working implementation.

\n

API

\n

The InputMask class extends TextField and implements the following additional properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
mask""The mask property to apply to text entered into the field.
maskedValue""A formatted value of original input using mask.
completedfalseIndicates whether all mandatory characters have been filled.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":1,"lastWeek":14,"lastMonth":111}},"@nativescript/template-tab-navigation-ts":{"name":"@nativescript/template-tab-navigation-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core with TypeScript Tab Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a TabView component for navigation.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-tab-ts --template @nativescript/template-tab-navigation-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-tab-ts --template nativescript-app-templates/packages/template-tab-navigation-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module is located at:

\n\n

The template has the following pages used for the tab content items:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":10,"lastMonth":477}},"@nativescript/template-master-detail-vue":{"name":"@nativescript/template-master-detail-vue","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Vue Master Detail Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-master-detail-vue --template @nativescript/template-master-detail-vue
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-master-detail-vue --template nativescript-app-templates/packages/template-master-detail-vue
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The template has the following components:

\n\n

There is one model to represent the data items:

\n\n

The template also provides a data service:

\n\n

Firebase integration

\n

The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app/app.js file.

\n

[Optional] Firebase database setup

\n

By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":381}},"nativescript-texttospeech":{"name":"nativescript-texttospeech","version":"3.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript-TextToSpeech :loudspeaker:

\n

A Text to Speech NativeScript plugin for Android & iOS

\n

Native Controls

\n\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-texttospeech
\n

This command automatically installs the necessary files, as well as stores nativescript-texttospeech as a dependency in your project's package.json file.

\n

Video Tutorial

\n

egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

\n

Usage

\n
/// javascript
var TextToSpeech = require('nativescript-texttospeech');

/// TypeScript
import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeech';

let TTS = new TNSTextToSpeech();

let speakOptions: SpeakOptions = {
  text: 'Whatever you like', /// *** required ***
  speakRate: 0.5, // optional - default is 1.0
  pitch: 1.0, // optional - default is 1.0
  volume: 1.0, // optional - default is 1.0
  locale: 'en-GB', // optional - default is system locale,
  finishedCallback: Function // optional
};

// Call the `speak` method passing the SpeakOptions object
TTS.speak(speakOptions).then(
  () => {
    // everything is fine
  },
  err => {
    // oops, something went wrong!
  }
);
\n

API

\n\n

If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code. If both are set, the custom locale will be used.

\n

The plugin checks whether the supplied locale/language code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

\n

Example with language code only:

\n
let speakOptions: SpeakOptions = {
  text: 'Whatever you like', // *** required ***
  language: 'en' // english language will be used
};
\n

Example with locale:

\n
let speakOptions: SpeakOptions = {
  text: 'Whatever you like', // *** required ***
  locale: 'en-AU' // australian english language will be used
};
\n

Tip

\n\n

Android Only Methods

\n\n

Credits

\n

Inspired by James Montemagno's TextToSpeech Xamarin plugin

\n

Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

\n","downloadStats":{"lastDay":5,"lastWeek":68,"lastMonth":398}},"@nativescript/ionic-portals":{"name":"@nativescript/ionic-portals","version":"1.2.1","license":"Apache-2.0","readme":"

@nativescript/ionic-portals

\n

https://ionic.io/docs/portals

\n
\n

Ionic Portals are supercharged native WebView components for iOS and Android that let you add web-based experiences to native mobile apps.

\n
\n

\"Ionic

\n

Contents

\n\n

Installation

\n
npm install @nativescript/ionic-portals
\n

Prerequisites

\n\n

Usage

\n

1. Registering portals

\n

To register your Ionic Portals, call the [IonicPortalManager] class's register method with the Portal API key.

\n
import { Application } from '@nativescript/core';

import { IonicPortalManager } from '@nativescript/ionic-portals';

Application.on(Application.launchEvent, () => {
\t// Register IonicPortals
\tIonicPortalManager.register('<portal-api-key>');
});

// boot app here, for example:
Application.run({ moduleName: 'app-root' });
\n

Create as many Portals as you need to use in your app.

\n

The app will look for folders within its resources where the folder name is equal to the portal id you used to define each portal.

\n

Given the following examples, ensure your web portal is built into the following folders:

\n\n

2. Use it in markup

\n

Core

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:ionic=\"@nativescript/ionic-portals\">
  <StackLayout class=\"p-20\">
    <ionic:IonicPortal id=\"webPortal\">
    </ionic:IonicPortal>
  </StackLayout>
</Page>
\n

Angular

\n
import { registerElement } from '@nativescript/angular';
import { IonicPortal } from '@nativescript/ionic-portals';
registerElement('IonicPortal', () => IonicPortal);
\n
<IonicPortal id=\"webPortal\"></IonicPortal>;
\n

Vue

\n
import { IonicPortal } from '@nativescript/ionic-portals';

registerElement(\"IonicPortal\", ()=> IonicPortal)
\n
 <gridLayout height=\"300\" class=\"mt-3 p-3\">
    <IonicPortal id=\"webPortal\"/>
</gridLayout>
\n

Svelte

\n
import { IonicPortal } from '@nativescript/ionic-portals';

import {registerNativeViewElement} from \"svelte-native/dom\"
registerNativeViewElement(\"ionicPortal\", ()=> IonicPortal)
\n
<gridLayout height=\"300\" class=\"mt-3 p-3\">
    <ionicPortal id=\"webPortal\"/>
</gridLayout>
\n

Sending events from NativeScript to any web portal

\n

To send events from NativeScript to any web portal, use the publishTopic() method:

\n
IonicPortalManager.publishTopic('hello', { name: 'data from NativeScript' });
\n

Subscribing to events sent from web portals

\n

To subscribe to events sent from any web portal, call the subscribeToTopic method with the event name as the first argument and the event handler as the second argument.

\n
const subscriptionId = IonicPortalManager.subscribeToTopic('useful-web-event', result => {
  console.log('received web portal useful-web-event with data:', result.data);
});
\n

Unsubscribing from events sent from web portals

\n

To unsubscribe from events sent from any web portal, call the unsubscribeFromTopic() method with the event name as the first argument and the subscription id as the second argument.

\n
IonicPortalManager.unsubscribeFromTopic('useful-web-event', subscriptionId);
\n

IonicPortalManager API

\n

Allows you to interact with and configure portals via the following APIs.

\n

register()

\n
IonicPortalManager.register(apiKey)
\n

Registers portals. Call it in the main.ts file, before the app boots, in the handler of the Application.launchEvent event.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
apiKeystringYour portal API key
\n

setInitialContext()

\n
IonicPortalManager.setInitialContext(id,initialContext)
\n

Used to set the initial context of any portal id before the portal is shown.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
idstringThe portal id.
initialContextstringData provided as the initial context to the portal.
\n
\n

setAndroidPlugins()

\n
IonicPortalManager.setAndroidPlugins(plugins)
\n

Defines the usage of non-official Capacitor Plugins via Android package names

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
plugins Array<string>A list of non-official Capacitor package names.
\n

publishTopic()

\n
IonicPortalManager.publishTopic(topic, data)
\n

Sends a message to any web portal by publishing a topic (aka. event)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
topic stringThe name of the topic/event
data anyOptional: The payload to send with the topic.
\n

subscribeToTopic()

\n
subscriptionId: number = IonicPortalManager.subscribeToTopic(topic, (data?: any) => void))
\n

Listens to any message sent from any web portal by subscribing to the specified topic. It returns a subscription id used to later unsubscribe from the topic.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
topic stringThe name of the topic/event to subscribe to.
callbackfunctionThe function invoked every time a message is sent via the topic with an optional data parameter.
\n
\n

unsubscribeFromTopic()

\n
IonicPortalManager.unsubscribeFromTopic(topic, subscriptionId)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
topic stringThe name of the topic/event to unsubscribe from.
subscriptionIdnumberThe subscription id returned by subscribeToTopic().
\n

configureLiveUpdates

\n

Note: configure before displaying the portal.

\n
IonicPortalManager.configureLiveUpdates('webPortal', {
\tappId: 'e2abc12',
\tchannel: 'production',
\tsyncOnAdd: true
})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
portalId stringThe portal id.
configIonicPortalLiveUpdateConfigLive update configuration.
\n

syncNow

\n
IonicPortalManager.syncNow(['e2abc12'], false, status => {
\tconsole.log('sync complete:', status)
})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
appIdsArray<string>Portal app ids to sync.
isParallelbooleanWhether to sync in parallel or not.
complete(status: string) => voidComplete callback.
\n

getLastSync

\n
const lastSync = IonicPortalManager.getLastSync('e2abc12')
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
appIdstringPortal app id to check last sync.
\n

Using Capacitor Plugins with Ionic Portals

\n

Refer to this blog post.

\n

Notes

\n
\n

For iOS:\nYou may need to add IPHONEOS_DEPLOYMENT_TARGET = 12.0 to your App_Resources/iOS/build.xcconfig file.\nIf your project contains App_Resources/iOS/Podfile, you may need to remove any post install handling which removes deployment targets, for example:\nRemove anything like this: config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'

\n
\n

Additional Resources

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":34,"lastWeek":99,"lastMonth":561}},"@voicethread/nativescript-audio-player":{"name":"@voicethread/nativescript-audio-player","version":"1.0.1","license":"Apache-2.0","readme":"

@voicethread/nativescript-audio-player

\n

Nativescript audio player \"apple\" \"android\"

\n

\"npm\"

\n
\n

@voicethread/nativescript-audio-player

\n
\n

This plugin provides an audio player for Android and iOS that supports playback of both local files and remote URL audio files. For Android, MediaPlayer will internally cache remote files after first prepare/play. For iOS, the plugin will download and cache remote files on first prepare/play.

\n

Contents

\n\n

Installation

\n
npm install @voicethread/nativescript-audio-player --save
\n

OR

\n
ns plugin add @voicethread/nativescript-audio-player
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-player.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { AudioPlayer, AudioPlayerOptions } from '@voicethread/nativescript-audio-player';
\n
    \n
  1. Play an audio file.
    2. \n
\n
protected _playOptions: AudioPlayerOptions = {
    audioFile: knownFolders.currentApp().path + '/audio/example.m4a';,
    loop: false,
    audioMixing: false,
    completeCallback: async result => {
        console.log('AudioPlayer - Audio file playback complete.', result);
    },
    errorCallback: errorObject => {
        console.error('AudioPlayer error!', JSON.stringify(errorObject));
    },
    infoCallback: infoObject => {
        console.info('AudioPlayer info: ', JSON.stringify(infoObject));
    },
};
this.player.prepareAudio(this._playOptions).then(status => {
    if (status) {    
        this.player.play();    
    } else {
        console.log('ERROR! Unable to prepare audio!');
    }
});
\n

NOTE: If you want to play an HTTP URL, you'll also need to make some adjustments to your application to allow unsecure connections or URL access will fail silently.\nFor iOS, add the following to your app's Info.plist:

\n
<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSAllowsArbitraryLoads</key>
    <true />  
</dict>
\n

For Android, ensure your application tag in App_Resources/Android/src/main/AndroidManifest.xml has the following:

\n
android:usesCleartextTraffic=\"true\"
\n

Supported Audio Player options

\n
export interface AudioPlayerOptions {
  /**
   * Gets or sets the audio file url.
   */
  audioFile: string;

  /**
   * Gets or sets the callback when the currently playing audio file completes.
   * @returns {Object} An object containing the native values for the callback.
   */
  completeCallback?: Function;

  /**
   * Get or sets the player to loop playback.
   */
  loop: boolean;

  audioMixing?: boolean;

  /**
   * Gets or sets the callback when an error occurs with the audio player.
   * @returns {Object} An object containing the native values for the error callback.
   */
  errorCallback?: Function;

  /**
   * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
   * @returns {Object} An object containing the native values for the info callback.
   */
  infoCallback?: Function;
}
\n

Audio Player exports

\n
export interface AudioPlayer {
  /**
   * native instance getters
   */
  readonly ios?: any;
  readonly android?: any;

  /**
   * Volume getter/setter
   */
  volume: any;

  /**
   * Prepare Audio player by preloading an audio file from file oath or URL
   * @function prepareAudio
   * @param options
   */
  prepareAudio(options: AudioPlayerOptions): Promise<boolean>;

  /**
   * Play current audio file that has been prepared by calling prepareAudio(options)
   */
  play(): Promise<boolean>;

  /**
   * Pauses playing audio file.
   */
  pause(): Promise<boolean>;

  /**
   * Seeks to specific time.
   */
  seekTo(time: number): Promise<boolean>;

  /**
   * Releases resources from the audio player.
   */
  dispose(): Promise<boolean>;

  /**
   * Check if the audio is actively playing.
   */
  isAudioPlaying(): boolean;

  /**
   * Get the duration of the audio file playing.
   */
  getAudioTrackDuration(): Promise<string>;

  /**
   * current time
   */
  readonly currentTime: number;
}
\n

Acknowledgements

\n

This plugin is based on https://github.com/nstudio/nativescript-audio

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":25}},"nativescript-code-push":{"name":"nativescript-code-push","version":"2.0.2","license":"MIT","readme":"

NativeScript plugin for CodePush

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

A live-update service for your NativeScript apps!

\n
\n

📣 UPDATE May 27 2019: we're most likely renaming this solution before officially launching it. Hold your breath!

\n
\n
\n Optional reading: what this is, and how it works\n

A NativeScript app is composed of XML/HTML, CSS and JavaScript files and any accompanying images, which are bundled together by the NativeScript CLI and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.

\n

The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your code and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!

\n

In order to ensure that your end users always have a functioning version of your app, the CodePush plugin maintains a copy of the previous update, so that in the event that you accidentally push an update which includes a crash, it can automatically roll back. This way, you can rest assured that your newfound release agility won't result in users becoming blocked before you have a chance to roll back on the server. It's a win-win-win!

\n\n

Architectural overview of the solution - you don't need to worry about all of this

\n
\n

What can (and will) be CodePushed?

\n\n
\n

💁‍♂️ Note that we don't actually use those folders, but the app folder in platforms/ios/<appname>/app and platforms/android/app/src/main/assets/app, the benefit of which is we don't "care" if you use Webpack or Uglify or whatever tools you use to minify or scramble your app's assets.

\n
\n

What can't (and won't):

\n\n

So as long as you don't change versions of dependencies and tns platforms in your package.json you\ncan push happily. And if you do bump a version of a dependency make sure there are no changed platform libraries.

\n

Getting Started

\n

Globally install the NativeScript CodePush CLI

\n
npm i -g nativescript-code-push-cli
\n
\n

💁‍♂️ This will also add the global nativescript-code-push command to your machine. You can check the currently installed version with nativescript-code-push -v.

\n
\n

Login or register with the service

\n

Check if you're already logged in, and with which email address:

\n
nativescript-code-push whoami
\n

Log in if you already have an account:

\n
nativescript-code-push login
\n

Register if you don't have an account yet:

\n
nativescript-code-push register
\n

This will open a browser where you can provide your credentials, after which you can create an access key that\nyou can paste in the console.

\n

You should now have a .nativescript-code-push.config file in your home folder which will automatically\nauthenticate you with the server on this machine from now on.

\n
\n

Note that you could use a that web interface for managing you apps, but the CLI is much more sophisticated, so it's recommended to use the command line interface.

\n
\n

To log out, you can run nativescript-code-push logout which will also remove the config file.

\n

To perform a headless login (without opening a browser), you can do: nativescript-code-push login --accessKey <access key>.

\n

Register your app with the service

\n

Create an app for each platform you target. That way you can roll out release seperately for iOS and Android.

\n
\n

⚠️ The appname must be unique, and should not contain dashes (-).

\n
\n
nativescript-code-push app add <appname> <platform>

# examples:
nativescript-code-push app add MyAppIOS ios
nativescript-code-push app add MyAppAndroid android
\n
\n

💁‍♂️ This will show you your deployment keys you'll need when connecting to the CodePush server. If you want to list those keys at any later time, use nativescript-code-push deployment ls <appName> --displayKeys.

\n
\n
\n

💁‍♂️ All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels. If you need more channels/deployments, simply run: nativescript-code-push deployment add <appName> <deploymentName>.

\n
\n
\n

💁‍♂️ Want to rename your app? At any time, use the command: nativescript-code-push app rename <oldName> <newName>

\n
\n
\n

💁‍♂️ Want to delete an app? At any time, use the command: nativescript-code-push app remove <appName> - this means any apps that have been configured to use it will obviously stop receiving updates.

\n
\n

List your registered apps

\n
nativescript-code-push app ls
\n

Add this plugin to your app

\n
tns plugin add nativescript-code-push
\n
\n

⚠️ If you're restricting access to the internet from within your app, make sure you whitelist our CodePush server (https://nativescript-codepush-server.herokuapp.com) and File server (https://s3.eu-west-1.amazonaws.com).

\n
\n

Checking for updates

\n

With the CodePush plugin installed and configured, the only thing left is to add the necessary code to your app to control when it checks for updates.

\n

If an update is available, it will be silently downloaded, and installed.

\n

Then based on the provided InstallMode the plugin either waits until the next cold start (InstallMode.ON_NEXT_RESTART),\nwarm restart (InstallMode.ON_NEXT_RESUME), or a positive response to a user prompt (InstallMode.IMMEDIATE).

\n

Note that Apple doesn't want you to prompt the user to restart your app, so use InstallMode.IMMEDIATE on iOS only for Enterprise-distributed apps (or when testing your app through TestFlight for instance).

\n
\n

💁‍♂️ Check out the demo for a solid example.

\n
\n
// import the main plugin classes
import { CodePush } from \"nativescript-code-push\";

// and at some point in your app:
CodePush.sync({
  deploymentKey: \"your-deployment-key\" // note that this key depends on the platform you're running on (see the example below)
});
\n

There's a few things you can configure - this TypeScript example has all the possible options:

\n
import { CodePush, InstallMode, SyncStatus } from \"nativescript-code-push\";
import { isIOS } from \"tns-core-modules/platform\";

CodePush.sync({
    deploymentKey: isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
    installMode: InstallMode.ON_NEXT_RESTART, // this is the default install mode; the app updates upon the next cold boot (unless the --mandatory flag was specified while pushing the update) 
    mandatoryInstallMode: isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE, // the default is InstallMode.ON_NEXT_RESUME which doesn't bother the user as long as the app is in the foreground. InstallMode.IMMEDIATE shows an installation prompt. Don't use that for iOS AppStore distributions because Apple doesn't want you to, but if you have an Enterprise-distributed app, go right ahead!
    updateDialog: { // only used for InstallMode.IMMEDIATE
      updateTitle: \"Please restart the app\", // an optional title shown in the update dialog 
      optionalUpdateMessage: \"Optional update msg\",   // a message shown for non-\"--mandatory\" releases 
      mandatoryUpdateMessage: \"Mandatory update msg\", // a message shown for \"--mandatory\" releases
      optionalIgnoreButtonLabel: \"Later\", // if a user wants to continue their session, the update will be installed on next resume
      mandatoryContinueButtonLabel: isIOS ? \"Exit now\" : \"Restart now\", // On Android we can kill and restart the app, but on iOS that's not possible so the user has to manually restart it. That's why we provide a different label in this example.
      appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to CodePush
    }
  }, (syncStatus: SyncStatus): void => {
    console.log(\"CodePush syncStatus: \" + syncStatus);
    if (syncStatus === SyncStatus.UP_TO_DATE) {
      console.log(\"CodePush: no pending updates; you're running the latest version!\");
    } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
      console.log(\"CodePush: update installed - it will be activated upon next cold boot\");
    }
});
\n
\n Click here to see a JavaScript example\n
var CodePush = require(\"nativescript-code-push\").CodePush;
var InstallMode = require(\"nativescript-code-push\").InstallMode;
var SyncStatus = require(\"nativescript-code-push\").SyncStatus;
var platform = require(\"tns-core-modules/platform\");

CodePush.sync({
    deploymentKey: platform.isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
    installMode: InstallMode.ON_NEXT_RESTART,
    mandatoryInstallMode: platform.isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE,
    updateDialog: {
      optionalUpdateMessage: \"Optional update msg\",
      updateTitle: \"Please restart the app\",
      mandatoryUpdateMessage: \"Mandatory update msg\",
      optionalIgnoreButtonLabel: \"Later\",
      mandatoryContinueButtonLabel: platform.isIOS ? \"Exit now\" : \"Restart now\",
      appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to CodePush
    }
}, function (syncStatus) {
    if (syncStatus === SyncStatus.UP_TO_DATE) {
      console.log(\"CodePush: no pending updates; you're running the latest version!\");
    } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
      console.log(\"CodePush: update installed - it will be activated upon next cold boot\");
    }
});
\n
\n

When should this check run?

\n

It's recommended to check for updates more than once in a cold boot cycle,\nso it may be easiest to tie this check to the resume event (which usually also runs on app startup):

\n
import * as application from \"tns-core-modules/application\";
import { CodePush } from \"nativescript-code-push\";

// add this in some central place that's executed once in a lifecycle
application.on(application.resumeEvent, () => {
  CodePush.sync(...);
});
\n
\n Click here to see a JavaScript example\n
var application = require(\"tns-core-modules/application\");

application.on(application.resumeEvent, function () {
  // call the sync function
});
\n
\n

Releasing an update

\n

Once your app has been configured and distributed to your users, and you've made some code and/or asset changes,\nit's time to instantly unleash those changes onto your users!

\n
\n

⚠️ Make sure to create a release build first, so use the same command that you'd use for app store distribution, just don't send it to the AppStore. You can even Webpack and Uglify your app, it's all transparent to this plugin.

\n
\n
\n

💁‍♂️ When releasing updates to CodePush, you do not need to bump your app's version since you aren't modifying the app store version at all. CodePush will automatically generate a "label" for each release you make (e.g. v3) in order to help identify it within your release history.

\n
\n

The easiest way to do this is to use the release command in our CodePush CLI. Its (most relevant) options are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
paramaliasdefaultdescription
deploymentNamed"Staging"Deploy to either "Staging" or "Production".
descriptiondesnot setDescription of the changes made to the app with this release.
targetBinaryVersiontApp_ResourcesSemver expression that specifies the binary app version(s) this release is targeting (e.g. 1.1.0, ~1.2.3). The default is the exact version in App_Resources/iOS/Info.plist or App_Resources/Android/AndroidManifest.xml.
mandatorymnot setThis specifies whether or not the update should be considered "urgent" (e.g. it includes a critical security fix). This attribute is simply round tripped to the client, who can then decide if and how they would like to enforce it. If this flag is not set, the update is considered "not urgent" so you may choose to wait for the next cold boot of the app.
\n

Have a few examples for both platforms:

\n

iOS

\n
nativescript-code-push release <codepush-ios-appname> ios # deploy to Staging
nativescript-code-push release <codepush-ios-appname> ios --d Production # deploy to Production (default: Staging)
nativescript-code-push release <codepush-ios-appname> ios --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in Info.plist)
nativescript-code-push release <codepush-ios-appname> ios --mandatory --description \"My mandatory iOS version\" # a release for iOS that needs to be applied ASAP.
\n

Android

\n
nativescript-code-push release <codepush-android-appname> android # deploy to Staging
nativescript-code-push release <codepush-android-appname> android --d Production # deploy to Production (default: Staging)
nativescript-code-push release <codepush-android-appname> android --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in AndroidManifest.xml)
\n
\n Click here to learn more about the --targetBinaryVersion param\nThe `targetBinaryVersion` specifies the store/binary version of the application you are releasing the update for, so that only users running that version will receive the update, while users running an older and/or newer version of the app binary will not. This is useful for the following reasons:\n
    \n
  1. \n

    If a user is running an older binary version, it's possible that there are breaking changes in the CodePush update that wouldn't be compatible with what they're running.

    \n
    2. \n
  2. \n

    If a user is running a newer binary version, then it's presumed that what they are running is newer (and potentially incompatible) with the CodePush update.

    \n
    3. \n
\n

If you ever want an update to target multiple versions of the app store binary, we also allow you to specify the parameter as a semver range expression. That way, any client device running a version of the binary that satisfies the range expression (i.e. semver.satisfies(version, range) returns true) will get the update. Examples of valid semver range expressions are as follows:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Range ExpressionWho gets the update
1.2.3Only devices running the specific binary app store version 1.2.3 of your app
*Any device configured to consume updates from your CodePush app
1.2.xDevices running major version 1, minor version 2 and any patch version of your app
1.2.3 - 1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (inclusive)
>=1.2.3 <1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (exclusive)
1.2Equivalent to >=1.2.0 <1.3.0
~1.2.3Equivalent to >=1.2.3 <1.3.0
^1.2.3Equivalent to >=1.2.3 <2.0.0
\n

*NOTE: If your semver expression starts with a special shell character or operator such as >, ^, or **\n, the command may not execute correctly if you do not wrap the value in quotes as the shell will not supply the right values to our CLI process. Therefore, it is best to wrap your targetBinaryVersion parameter in double quotes when calling the release command, e.g. code-push release MyApp-iOS updateContents ">1.2.3".

\n

NOTE: As defined in the semver spec, ranges only work for non pre-release versions: https://github.com/npm/node-semver#prerelease-tags. If you want to update a version with pre-release tags, then you need to write the exact version you want to update (1.2.3-beta for example).

\n

The following table outlines the version value that CodePush expects your update's semver range to satisfy for each respective app type:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSource of app store version
NativeScript (iOS)The CFBundleShortVersionString key in the App_Resources/iOS/Info.plist file
NativeScript (Android)The android:versionName key in the App_Resources/Android/AndroidManifest.xml file
\n

NOTE: If the app store version in the metadata files are missing a patch version, e.g. 2.0, it will be treated as having a patch version of 0, i.e. 2.0 -> 2.0.0. The same is true for app store version equal to plain integer number, 1 will be treated as 1.0.0 in this case.

\n
\n

Gaining insight in past releases

\n

Here are a few CodePush CLI commands you may find useful:

\n

Which releases did I create and what are the install metrics?

\n

Using a command like this will tell you how many apps have the update installed:

\n
nativescript-code-push deployment history <codepush-appname> Staging
\n

Which produces something like this:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LabelRelease TimeApp VersionMandatoryDescriptionInstall Metrics
v2an hour ago1.0.0YesMandatory iOS version!Active: 11% (2 of 19)
Total: 2
v12 hours ago1.0.0NoAwesome iOS version!Active: 26% (5 of 19)
Total: 5
\n

Give me the details of the current release!

\n

This dumps the details of the most recent release for both the Staging and Production environments of your app:

\n
nativescript-code-push deployment ls <codepush-appname>
\n

And if you want to dump your deployment keys as well, use:

\n
nativescript-code-push deployment ls <codepush-appname> --displayKeys
\n

Which produces something like this:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDeployment KeyUpdate MetadataInstall Metrics
Productionr1DVaLfKjc0Y5d6BzqX4..No updates releasedNo installs recorded
StagingYTmVMy0GLCknVu3GVIyn..Label: v5Active: 11% (2 of 19)
App Version: 1.0.0Total: 2
Mandatory: Yes
Release Time: an hour ago
Released By: eddyverbruggen@gmail.com
Description: Mandatory iOS version!
\n

Clearing the release history

\n

This won't roll back any releases, but it cleans up the history metadata (of the Staging app, in this case):

\n
nativescript-code-push deployment clear <codepush-appname> Staging
\n

Advanced topics

\n

Testing CodePush packages during development

\n

You may want to play with CodePush before using it in production (smart move!).\nPerform these steps once you've pushed an update and added the sync command to your app:

\n\n

Running the demo app

\n

You may also play with CodePush by using its demo app. Here are the steps you need to perform in order to observe an app update:

\n\n

Patching Update Metadata

\n

After releasing an update, there may be scenarios where you need to modify one or more of the metadata attributes associated with it\n(e.g. you forgot to mark a critical bug fix as mandatory.

\n
\n Read all about patching metadata by clicking here.\n

You can update metadata by running the following command:

\n
nativescript-code-push patch <appName> <deploymentName>
[--label <releaseLabel>]
[--mandatory <isMandatory>]
[--description <description>]
[--targetBinaryVersion <targetBinaryVersion>]
\n
\n

⚠️ This command doesn't allow modifying the actual update contents of a release. If you need to respond to a release that has been identified as being broken, you should use the rollback command to immediately roll it back, and then if necessary, release a new update with the approrpriate fix when it is available.

\n
\n

Aside from the appName and deploymentName, all parameters are optional, and therefore, you can use this command to update just a single attribute or all of them at once.\nCalling the patch command without specifying any attribute flag will result in a no-op.

\n
# Mark the latest production release as mandatory
nativescript-code-push patch MyAppiOS Production -m

# Add a \"mina and max binary version\" to an existing release
nativescript-code-push patch MyAppiOS Staging -t \"1.0.0 - 1.0.5\"
\n
\n

Promoting Updates

\n
\n Read this if you want to easily promote releases from Staging to Production\n

Once you've tested an update against a specific deployment (e.g. Staging),\nand you want to promote it (e.g. dev->staging, staging->production),\nyou can simply use the following command to copy the release from one deployment to another:

\n
nativescript-code-push promote <appName> <sourceDeploymentName> <destDeploymentName>
[--description <description>]
[--label <label>]
[--mandatory]
[--targetBinaryVersion <targetBinaryVersion]

# example
nativescript-code-push promote CodePushDemoIOS Staging Production --description 'Promoted from Staging to Production'
\n

The promote command will create a new release for the destination deployment, which includes the exact code and metadata (description, mandatory and target binary version) from the latest release of the source deployment.\nWhile you could use the release command to "manually" migrate an update from one environment to another, the promote command has the following benefits:

\n
    \n
  1. \n

    It's quicker, since you don't need to reassemble the release assets you want to publish or remember the description/app store version that are associated with the source deployment's release.

    \n
    2. \n
  2. \n

    It's less error-prone, since the promote operation ensures that the exact thing that you already tested in the source deployment (e.g. Staging) will become active in the destination deployment (e.g. Production).

    \n
    3. \n
\n
\n

💁‍♂️ Unless you need to make changes to your code, the recommended workflow is taking advantage of the automatically created Staging and Production environments, and do all releases directly to Staging, and then perform a promote from Staging to Production after performing the appropriate testing.

\n
\n
\n

Rolling Back Updates

\n
\n Read this if you want to learn all about rollbacks\n

A deployment's release history is immutable, so you cannot delete or remove individual updates once they have been released without deleting all of the deployment's release history.\nHowever, if you release an update that is broken or contains unintended features,\nit is easy to roll it back using the rollback command:

\n
nativescript-code-push rollback <appName> <deploymentName>

#example
nativescript-code-push rollback MyAppiOS Production
\n

This has the effect of creating a new release for the deployment that includes the exact same code and metadata as the version prior to the latest one.\nFor example, imagine that you released the following updates to your app:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ReleaseDescriptionMandatory
v1Initial release!Yes
v2Added new featureNo
v3Bug fixesYes
\n

If you ran the rollback command on that deployment, a new release (v4) would be created that included the contents of the v2 release.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ReleaseDescriptionMandatory
v1Initial release!Yes
v2Added new featureNo
v3Bug fixesYes
v4 (Rollback from v3 to v2)Added new featureNo
\n

End-users that had already acquired v3 would now be "moved back" to v2 when the app performs an update check.\nAdditionally, any users that were still running v2, and therefore, had never acquired v3, wouldn't receive an update since they are already running the latest release\n(this is why our update check uses the package hash in addition to the release label).

\n

If you would like to rollback a deployment to a release other than the previous (e.g. v3 -> v2), you can specify the optional --targetRelease parameter:

\n
nativescript-code-push rollback MyAppiOS Production --targetRelease v34
\n
\n

⚠️ This rolls back the release to the previous CodePush version, NOT the AppStore version (if there was one in between).

\n
\n
\n

💁‍♂️ The release produced by a rollback will be annotated in the output of the deployment history command to help identify them more easily.

\n
\n
\n

App Collaboration

\n
\n Working on one app with multiple developers? Click here!\n

If you will be working with other developers on the same CodePush app, you can add them as collaborators using the following command:

\n
nativescript-code-push collaborator add <appName> <collaboratorEmail>
\n

NOTE: This expects the developer to have already registered with CodePush using the specified e-mail address, so ensure that they have done that before attempting to share the app with them.

\n

Once added, all collaborators will immediately have the following permissions with regards to the newly shared app:

\n
    \n
  1. View the app, its collaborators, deployments and release history.
    2. \n
  2. Release updates to any of the app's deployments.
    3. \n
  3. Rollback any of the app's deployments
    4. \n
\n

Inversely, that means that an app collaborator cannot do any of the following:

\n
    \n
  1. Rename or delete the app
    2. \n
  2. Create, rename or delete new deployments within the app
    3. \n
  3. Clear a deployment's release history
    4. \n
  4. Add or remove collaborators from the app (although a developer can remove themself as a collaborator from an app that was shared with them).
    5. \n
\n

Over time, if someone is no longer working on an app with you, you can remove them as a collaborator using the following command:

\n
nativescript-code-push collaborator rm <appName> <collaboratorEmail>
\n

If at any time you want to list all collaborators that have been added to an app, you can simply run the following command:

\n
nativescript-code-push collaborator ls <appName>
\n
\n

Using CodePush behind a proxy

\n
\n Click here to read all about Proxy Support\nBy default, the `login` command will automatically look for a system-wide proxy, specified via an `HTTPS_PROXY` or `HTTP_PROXY` environment variable, and use that to connect to the server.\nIf you'd like to disable this behavior, and have the CLI establish a direct connection, simply specify the `--noProxy` parameter when logging in:\n
nativescript-code-push login --noProxy
\n

I'd you like to explicitly specify a proxy server that the CLI should use, without relying on system-wide settings,\nyou can instead pass the --proxy parameter when logging in:

\n
nativescript-code-push login --proxy https://foo.com:3454
\n

Once you've logged in, any inferred and/or specified proxy settings are persisted along with your user session.\nThis allows you to continue using the CLI without needing to re-authenticate or re-specify your preferred proxy.\nIf at any time you want to start or stop using a proxy, simply logout, and then log back in with the newly desired settings.

\n
\n","downloadStats":{"lastDay":1,"lastWeek":11,"lastMonth":36}},"@nativescript/template-master-detail-ng":{"name":"@nativescript/template-master-detail-ng","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Angular Master Detail Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-master-detail-ng --template @nativescript/template-master-detail-ng
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-master-detail-ng --template nativescript-app-templates/packages/template-master-detail-ng
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application component:

\n\n

The template has the following components:

\n\n

There is one model to represent the data items:

\n\n

The template also provides a data service:

\n\n

Firebase integration

\n

The templates uses the {N} Firebase plugin. The initialization is done before the app starts in the /src/main.ts file. The initialization script is located at /src/app/shared/firebase.common.ts.

\n

[Optional] Firebase database setup

\n

By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Each component has 3 style files located in its folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":487}},"@nativescript/template-master-detail-ts":{"name":"@nativescript/template-master-detail-ts","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core with TypeScript Master Detail Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-master-detail-ts --template @nativescript/template-master-detail-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-master-detail-ts --template nativescript-app-templates/packages/template-master-detail-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module is located at:

\n\n

The template has the following page modules:

\n\n

There is one model to represent the data items:

\n\n

The template also provides a data service:

\n\n

Firebase integration

\n

The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app.ts file. The initialization script is located at /shared/firebase.common.ts.

\n

[Optional] Firebase database setup

\n

By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Each component has 3 style files located in its folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":371}},"@nativescript-community/ui-parallax":{"name":"@nativescript-community/ui-parallax","version":"0.0.2","license":"MIT","readme":"

@nativescript-community/ui-parallax

\n

\"npm\"\n\"npm\"

\n

Install

\n

$ npm install @nativescript-community/ui-parallax

\n

Example xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
\t xmlns:parallax=\"@nativescript-community/ui-parallax\"
\tloaded=\"pageLoaded\">
  \t<parallax:ParallaxView controlsToFade=\"headerLabel,headerLabel2\">
\t\t<parallax:Header class=\"header-template\" dropShadow=\"true\">
\t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
\t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
\t\t</parallax:Header>
\t\t<parallax:Anchored class=\"anchor\">
\t\t\t<Label id=\"titleLabel\" text=\"Parallax Template\"></Label>
\t\t</parallax:Anchored>
\t\t<parallax:Content class=\"body-template\">
\t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.\">
\t\t\t</TextView>
\t\t</parallax:Content>
\t</parallax:ParallaxView>
</Page>
\n

Example CSS

\n
#headerLabel2
{
\tfont-size: 45;
\thorizontal-align: center;
\tmargin-top:-25;
\tcolor:#B2EBF2;
}
#headerLabel{
\tfont-size: 45;
\thorizontal-align: center;
\tpadding-top:75;
\tcolor:#B2EBF2;
}
.header-template{
\tbackground-color:#212121;
\tbackground-image:url('~/images/mountains.png');
\tbackground-size: cover;
\theight: 200;
}
.body-template TextView{
\tfont-size:20;
\tpadding:5 15;
\tborder:none;
}
.anchor{
\theight: 55;
\twidth:100%;
\tbackground-color:#616161;
}
#titleLabel{
\tfont-weight:bold;
\tfont-size:25;
\tpadding:5 15;
\tcolor:#fff;

}
\n

When using the parallax plugin you need at least two layout views inside of the <parallax:ParallaxView> element. <parallax:Header> and <parallax:Content>.
\nThere is an optional third view called <parallax:Anchored> which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.

\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
controlsToFadepass it a comma delimited string with each control ID you want to fade out. In the above example it looks like controlsToFade="headerLabel,headerLabel2"
dropShadowThe <parallax:Anchored> has a property called `` if set to true it will create a small drop shadow effect on the bottom of the anchor
bounceon parallaxView you can set bounce to true to cause bounce effect
onScrollfunction to handle onscroll event
anchoredfunction to handle anchored event
unanchoredfunction to handle unanchored event
\n

React

\n

In the root app.ts file

\n
import { registerParallax } from \"@nativescript-community/ui-parallax/react\"
registerParallax()
\n

Component

\n
        <parallaxView bounce controlsToFade=\"headerLabel,headerLabel2\"
            onLoaded={(args) => {
                args.object.on('anchored', () => console.log('anchored'))
                args.object.on('unanchored', () => console.log('unanchored'))
                args.object.on('scroll', () => console.log('scroll'))
            }}>
            <parallaxHeader class=\"header-template\" height=\"300\">
                <label id=\"headerLabel\" backgroundColor=\"purple\" text=\"Parallax\" width=\"100%\" />
                <label id=\"headerLabel2\" text=\"Header Component\" />
            </parallaxHeader>
            <parallaxAnchored className=\"anchor\" iosIgnoreSafeArea>
                <label id=\"titleLabel\" text=\"Mr. Anchor\" />
            </parallaxAnchored>
            <parallaxContent class=\"body-template\">
                <label text=\"Content\" class=\"header\" textWrap=\"true\" />

                <label textWrap=\"true\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet.\">
                </label>
            </parallaxContent>
        </parallaxView>
\n

Plugin Development Work Flow.

\n\n

Special thanks to:

\n

JoshDSommer who developed the original plugin.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":38}},"nativescript-ar":{"name":"nativescript-ar","version":"1.1.0","license":"MIT","readme":"

NativeScript Augmented Reality

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

Tip: give this article by TJ a read if you want a nice introduction to AR in NativeScript. It uses an older version of the plugin, but it's still quite relevant.

\n
\n

Supported platforms

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-ar
\n

Embedding an AR view

\n\n

Types of AR experiences

\n\n

Using the AR API

\n\n

Running the demos

\n

To dive in quickly, install NativeScript if you don't have it yet: npm i -g nativescript,\nthen clone this repo:

\n
git clone https://github.com/EddyVerbruggen/nativescript-ar
cd nativescript-ar/src
\n

In the src folder you'll find a package.json which has the commands to build and run these demos:

\n

Solar System (Vue)

\n
npm run demo.solarsystem.ios 
npm run demo.solarsystem.android
\n

Pokémon (Angular)

\n
npm run demo.pokemon.ios
npm run demo.pokemon.android
\n

Glasses (Angular)

\n
npm run demo.glasses.ios
npm run demo.glasses.android
\n

TypeScript demo

\n

This is just a kitchen sink demo with a lot of random stuff.

\n
npm run demo.ios
npm run demo.android
\n

JavaScript demo

\n

This is a super simple demo which show how to integrate this plugin with plain JavaScript NativeScript apps.

\n
npm run demo.plainjs.ios
npm run demo.plainjs.android
\n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":80}},"@nativescript-dom/svelte-types":{"name":"@nativescript-dom/svelte-types","version":"1.0.6","license":"MIT","readme":"

svelte-types

\n

Typescript types for svelte-native that work in .svelte files to give you proper and complete intellisense in code editors.

\n

Installtion

\n
    \n
  1. Install the core and svelte types in your project
    2. \n
\n
npm install @nativescript-dom/core-types @nativescript-dom/svelte-types --save-dev
\n
    \n
  1. Configure tsconfig.json as below
    2. \n
\n
{
  \"compilerOptions\": {
    ...
    \"types\": [
        \"node\",
        \"@nativescript-dom/core-types\",
        \"@nativescript-dom/svelte-types\"
        ],
...
  }
\n

That's it, enjoy a fully typed svelte-native experience.

\n

\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":108}},"@nstudio/nativescript-variable-blur-view":{"name":"@nstudio/nativescript-variable-blur-view","version":"1.0.3","license":"Apache-2.0","readme":"

@nstudio/nativescript-variable-blur-view

\n

Variable Blur View for NativeScript. Inspired by @jtrivedi, @aheze, and @candlefinance

\n

Preview

\n

https://github.com/nstudio/nativescript-ui-kit/assets/457187/8d82d1b4-1dfc-421f-89b1-697c3c433b26

\n
npm install @nstudio/nativescript-variable-blur-view
\n

Usage

\n

Note: iOS Only (at the moment)

\n

Register the element for usage in your markup:

\n
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('VariableBlurView', () => VariableBlurView)

// Solid
import { registerElement } from 'dominative';
registerElement('variableBlurView', VariableBlurView);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('variableBlurView', () => VariableBlurView);

// React
import { registerElement } from 'react-nativescript';
registerElement('variableBlurView', () => VariableBlurView);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('VariableBlurView', () => VariableBlurView)
\n

Place on top of any UI in your layouts you want blurred:

\n
<VariableBlurView width=\"100%\" height=\"200\"/>
\n

Tip: You can flip the blur view vertically by doing this:

\n
<VariableBlurView width=\"100%\" height=\"200\" scaleY=\"-1\"/>
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":69}},"@triniwiz/nativescript-image-cache-it":{"name":"@triniwiz/nativescript-image-cache-it","version":"7.4.0","license":"Apache-2.0","readme":"

NativeScript-ImageCacheIt

\n

Installation

\n
tnpm install @triniwiz/nativescript-image-cache-it
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":123,"lastWeek":656,"lastMonth":3208}},"@nativescript/template-master-detail":{"name":"@nativescript/template-master-detail","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Core Master-Detail App Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-master-detail-js --template @nativescript/template-master-detail
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-master-detail-js --template nativescript-app-templates/packages/template-master-detail
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module is located at:

\n\n

The template has the following page modules:

\n\n

There is one model to represent the data items:

\n\n

The template also provides a data service:

\n\n

Firebase integration

\n

The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app/app.js file. The initialization script is located at /app/shared/firebase.common.js.

\n

[Optional] Firebase database setup

\n

By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Each component has 3 style files located in its folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":368}},"@nativescript/template-drawer-navigation-ng":{"name":"@nativescript/template-drawer-navigation-ng","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Angular Drawer Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-drawer-ng --template @nativescript/template-drawer-navigation-ng
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-drawer-ng --template nativescript-app-templates/packages/template-drawer-navigation-ng
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The RadSideDrawer component is set up as an application root view in:

\n\n

RadSideDrawer has the following component structure:

\n\n

There are five blank components located in these folders:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":2,"lastWeek":13,"lastMonth":637}},"nativescript-ui-gauge":{"name":"nativescript-ui-gauge","version":"15.2.3","license":"Apache-2.0","readme":"

NativeScript UI Gauge

\n\n

Overview

\n

The NativeScript UI Gauge plugin allows you to display the current status of a value within a range of upper and lower bounds, illustrate progress towards a goal, or a summary of a fluctuating metric. Some features include:

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-ui-gauge
\n

Documentation

\n

To use the gauge plugin, you need to add an instance of RadRadialGauge. It has a scales collection, which allows you to add a number of instances of type RadialScale.\nEach scale has an indicators collection that allows you to add different indicators. The indicator can be either of type RadialBarIndicator or RadialNeedle.\nMore information is available in the Guides for:

\n\n

API Reference

\n

Here is the API Reference section.

\n

Sample Apps

\n

The features of the plugin are demonstrated in the Sample apps for:

\n\n

Release Notes

\n

The release notes are available here.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":97,"lastWeek":381,"lastMonth":1445}},"nativescript-vibrate":{"name":"nativescript-vibrate","version":"4.0.1","license":"MIT","readme":"

\"Codacy\n\"Travis\"\n\"version\"\n\"License\"\n\"FOSSA

\n

NativeScript Vibrate \"apple\" \"android\"

\n

A vibrate NativeScript plugin for Android and iOS

\n

Read this in other languages: English, Español

\n

Installation

\n

Run the following command from the root of your project:

\n
$ ns plugin add nativescript-vibrate
\n

This command automatically installs the necessary files, as well as stores nativescript-vibrate as a dependency in your project's package.json file.

\n

Permissions

\n

Android

\n

To use the vibrate functionality on Android your app must request permission access the vibrator. The plugin automatically adds the required permission shown below for you so you don't need to worry about editing the Android Manifest.

\n
<uses-permission android:name=\"android.permission.VIBRATE\" />
\n

Example of use

\n

To use the vibrate module you must first require() it:

\n
var Vibrate = require(\"nativescript-vibrate\").Vibrate;
var vibrator = new Vibrate();
\n

If you use Typescript, you can import it this way:

\n
import { Vibrate } from 'nativescript-vibrate';
let vibrator = new Vibrate();
\n

After you have a reference to the module you can then call its vibrate(milliseconds) method.

\n
// my-page.js
vibrator.vibrate(2000);
\n

If you prefer to use a vibration pattern, you could try:

\n
// my-page.js
vibrator.vibrate([1000, 300, 500, 2000]);
\n

Notes

\n

iOS

\n

There is no API to vibrate for a specific amount of time or vibration pattern, so it will vibrate for the default period of time no matter what.

\n

API

\n

Only one method is available: vibrate(). Below are all the supported properties you can play around.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescriptionAndroidiOS
time300The number of milliseconds to vibrate. It can be also an array of longs of times for which to turn the vibrator on or off.✔︎✘
repeat-1The index into pattern at which to repeat, or -1 if you don't want to repeat.✔︎✘
\n

Documentation & Support

\n\n

Professional Support

\n

This project is sponsored by me, a Full Stack Developer. If you require assistance on your project(s), please contact me at https://marquez.co.

\n

Contributing

\n

Please make sure to read the Contributing Guide before making a pull request.

\n

Code of Conduct

\n

Everyone participating in this project is expected to agree to abide by the Code of Conduct.

\n

License

\n

Code released under the MIT License.

\n

\"\"

\n

\"FOSSA

\n","downloadStats":{"lastDay":17,"lastWeek":132,"lastMonth":607}},"dominative":{"name":"dominative","version":"0.0.9-alpha.4","license":"MIT","readme":"

DOMiNATIVE

\n

\"NPM\"

\n

Minimally viable DOM Document implementation for NativeScript

\n
\n

Installation

\n

Via npm:

\n

npm install dominative undom-ng

\n

Note: undom-ng is a peer dependency, you have to install it manually.

\n
\n

Usage

\n

Vanilla

\n

app.js

\n
import { Application } from '@nativescript/core'
import { document } from 'dominative'

const page = document.body
const actionBar = document.createElement('ActionBar')

actionBar.title = 'Hello World!'

page.appendChild(actionBar)

Application.run({
\tcreate: () => document
})
\n

with ef.js

\n

Playground

\n

App.eft

\n
>ActionBar
\t#title = Hello World!
\t>ActionBarItem
\t\t#text = Button
>StackLayout
\t>Label
\t\t.Welcome to the wonderland of ef.native!
\n

app.js

\n
import { Application } from '@nativescript/core'
import { domImpl, document } from 'dominative'
import { setDOMImpl } from 'ef-core'
import App from 'App.eft'

setDOMImpl(domImpl)

const app = new App()
app.$mount({target: document.body})

Application.run({
\tcreate: () => document
})
\n

with SingUI

\n

Playground

\n

app.js

\n
import { Application } from '@nativescript/core'
import { document } from 'dominative'
import { browser, prop, setGlobalCtx, useTags, useElement, build } from 'singui'

setGlobalCtx(browser(document))

const tags = useTags(false)

const app = (target) =>
\tbuild(({attach}) => {
\t\tconst { ActionBar, NavigationButton, ActionItem, StackLayout, Label, Button } = tags

\t\tActionBar(() => {
\t\t\tprop.title = 'Hello World!'
\t\t})

\t\tStackLayout(() => {
\t\t\tlet count = 0

\t\t\tconst {ret: updateText} = Label(() => {
\t\t\t\treturn text().$textContent(
\t\t\t\t\t() => `You have tapped ${count} time${count === 1 ? '' : 's'}`
\t\t\t\t)
\t\t\t})

\t\t\tButton(() => {
\t\t\t\tprop.text = 'Tap me!'
\t\t\t\ton('tap', () => {
\t\t\t\t\tcount += 1
\t\t\t\t\tupdateText()
\t\t\t\t})
\t\t\t})

\t\t\tupdateText()
\t\t})

\t\tattach(target)
\t})

app(document.body)

Application.run({
\tcreate: () => {
\t\treturn document
\t},
})
\n

with React + react-dom

\n

Playground - by Ammar Ahmed

\n

Note: This demo might have some issues with Chrome. Use Firefox if necessary.

\n

with Vue 3 + runtime-dom + DOMiNATIVE-Vue

\n

Playground

\n

app.js

\n
import { Application } from '@nativescript/core'
import { createApp } from '@dominative/vue'
import App from './App.vue'

const app = createApp(App)

app.$run()
\n

with SolidJS + DOMiNATIVE-Solid

\n

Playground

\n

app.jsx

\n
import { Application } from \"@nativescript/core\"
import { render } from \"@dominative/solid\"
import { createSignal } from \"solid-js\"

const App = () => {
\tconst [count, setCount] = createSignal(0)
\tconst increment = () => {
\t\tsetCount(c => c + 1)
\t}
\treturn <>
\t<actionbar title=\"Hello, SolidJS!\"></actionbar>
\t<stacklayout>
\t\t<label>You have taapped {count()} time(s)</label>
\t\t<button class=\"-primary\" on:tap={increment}>Tap me!</button>
\t</stacklayout>
\t</>
}

render(App, document.body)

const create = () => document

Application.run({ create })
\n
\n

Prepare global environment

\n

Automatically register document, window and related variables globally:

\n
import { globalRegister } from 'dominative'

globalRegister(global)
\n
\n

Register Elements

\n
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
import { RadListView } from 'nativescript-ui-listview'
import { registerElement, makeListView } from 'dominative'

// If you cannot determin what the component is based on, you can register it directly.
registerElement('RadSideDrawer', RadSideDrawer)
// Register with a specific type by using a pre-defined maker. Usually we check for inheritance, but with force we can make magic happen
registerElement('RadListView', makeListView(RadListView, {force: true}))
\n
\n

Virtual Elements

\n

Virtual elements are not real elements, but they appear as DOM elements to help organizing composition.

\n

Prop

\n

Helper to put it's child/children to it's parent node's property by key

\n

Attributes:

\n

key: String: RW The prop name to set on parent.

\n

type: <'array'|'key'>: RW Property type, could be an array prop or a single object prop. Once set, this prop couldn't be changed.

\n

value: any: RW Value to be set to parent. Usually children of this current node. Don't touch unless you know what you're doing.

\n

parent: Element: R Parent node of this node.

\n

class: String: RW Helper to set key and type, could be key:type or multi.level.key:type

\n

Events:

\n

None.

\n

KeyProp

\n

Prop but type already set to key.

\n

ArrayProp

\n

Prop but type already set to array.

\n

ItemTemplate

\n

* Template was renamed to ItemTemplate to avoid conflict with HTML template tag.

\n

An ItemTemplate element holds a template to be replicated later, or can create views programmatically.

\n

Attributes:

\n

Share mostly from Prop. Differences are listed below:

\n

key: String: RW Same form Prop, also serves the key name of a KeyedTemplate. Default to itemTemplate.

\n

type: 'single': R Should not be able to set type on a ItemTemplate.

\n

value: Function<T extends ViewBase>: R Same as createView.

\n

content: <T extends ViewBase>: RW The single child of this node. Don't touch unless you know what you're doing.

\n

patch: Function<T extends ViewBase>(PatchOptions): R Method to patch an existing clone.

\n

createView: Function<T extends ViewBase>: R Function to create view from this template.

\n

Events:

\n

itemLoading: Triggered when patching and template has no content. Set event.view to change the view of this item. Additional props on event: view, index, item, data. This event's callback argument doesn't extend from NativeScript's data object.

\n

createView: Triggered when creating view from the template and template has no content. Set created view to event.view. If not set, view will be created by cloning the template. This event's callback argument doesn't extend from NativeScript's data object.

\n

Note:

\n

ItemTemplate element could only have one element child. If you'd like to have multiple children in a template, just use a different type of view or layout as the only child and insert your other contents inside.

\n

KeyedTemplates

\n

By simpling putting ItemTemplates inside an array Prop we could set up a KeyedTemplate.

\n

Example:

\n
<ListView itemTemplateSelector=\"$item % 2 ? 'odd' : 'even'\">
\t<Prop key=\"itemTemplates\" type=\"array\">
\t\t<ItemTemplate key=\"odd\">
\t\t\t<Label text=\"odd\"/>
\t\t</ItemTemplate>
\t\t<ItemTemplate key=\"even\">
\t\t\t<Label text=\"even\"/>
\t\t</ItemTemplate>
\t</Prop>
</ListView>
\n

Template Handling for Custom Components

\n

There's a special maker caller makeTemplateReceiver, which you can use when a NativeScript component accepts templates.

\n

Example:

\n
import { RadListView } from 'nativescript-ui-listview'
import { registerElement, makeTemplateReceiver } from 'dominative'

registerElement('RadListView', makeTemplateReceiver(RadListView, {
\ttemplateProps: ['itemTemplate'],
\tloadingEvents: ['itemLoading']
}))
\n

templateProps: Array<String>: Props that accepts a template. Do not write keyed template props.

\n

loadingEvents: Array<String>: Events that will fire on the component when items loading.

\n

itemEvents: Array<String>: Custom events that will fire on the component referencing to an item.

\n
\n

Tweaking

\n

All elements added with registerElement is automatically extended with tweaking ability.

\n

Tweakable.defineEventOption(eventName: string, option: EventOption)

\n

Define how a event should be initialized. If an event is defined with bubbles: true or captures: true, they'll automatically be registered to native at element creation.

\n

Event option:

\n
{
\tbubbles: boolean // should this event bubble, default false
\tcaptures: boolean // should this event have capture phase, default false
\tcancelable: boolean // should this event be cancelable, defalut true
}
\n

Usage:

\n
const ButtonElement = document.defaultView.Button
ButtonElement.defineEventOption('tap', {
\tbubbles: true,
\tcaptures: true
})
\n

Tweakable.mapEvent(fromEvent: string, toEvent: string)

\n

See below

\n

Tweakable.mapProp(fromProp: string, toProp: string)

\n

See below

\n
\n

Tree shaking

\n

Tree shaking is off by default, but if you want a smaller bundle size, you can enable it manually by setting __UI_USE_EXTERNAL_RENDERER__ global variable to true in your project's webpack config. For example:

\n
const { merge } = require('webpack-merge');

module.exports = (env) => {
\twebpack.init(env);

\twebpack.chainWebpack((config) => {
\t\tconfig.plugin('DefinePlugin').tap((args) => {
\t\t\targs[0] = merge(args[0], {
\t\t\t\t__UI_USE_EXTERNAL_RENDERER__: true, // Set true to enable tree shaking
\t\t\t\t__UI_USE_XML_PARSER__: false, // Usually XML parser isn't needed as well, so disabling it as well
\t\t\t});

\t\t\treturn args;
\t\t});
\t});

\treturn webpack.resolveConfig();
};
\n

But, PLEASE NOTICE, after tree shaking is enabled, you'll need to register {N} core components manually, otherwise they won't be available as elements. For example:

\n
import { AbsoluteLayout, StackLayout, Label, Button, registerElement } from 'dominative'

registerElement('AbsoluteLayout', AbsoluteLayout)
registerElement('StackLayout', StackLayout)
registerElement('Label', Label)
registerElement('Button', Button)
\n

or you can just register them all with registerAllElements, although it's pointless when tree shaking is enabled:

\n
import { registerAllElements } from 'dominative'

registerAllElements()
\n

Frame, Page and ContentView are registered by default.

\n
\n

Caveats

\n

Hardcoding in Frameworks

\n

Frameworks are great, but they're not great when it comes to hardcoded things. We have to invest methods to counter the harm done by those hardcodings.

\n

Hardcoding is harmful, please do not hardcode.

\n

Always lowercased tag names

\n

Sometimes frameworks are just too thoughtful for you, they translate all your tag names to lowercase when compiling, which means your camelCase or PascalCase tag names won't work as intended.

\n

We can alias our tag names to lowercase if you like:

\n
import { aliasTagName } from 'dominative'

const tagNameConverter = (PascalCaseName) => {
\t// ...whatever your transformation code here
\t// This is useful when your framework/renderer doesn't support document.createElement with uppercase letters.
\tconst transformedName = PascalCaseName.toLowerCase()
\treturn transformedName
}

// Convert all built-in tag names
aliasTagName(tagNameConverter)
\n

Hardcoded events and props

\n

Some frameworks work like magic by providing lots of "just works" features that you don't even need to think about what's going on behind. They're actually done by heavily assuming you're on a specific platform - browser, and hardcoded these features to browser specific features.

\n

We have to mimic the events and props they hardcoded in order to make these frameworks happy:

\n
import { document } from 'dominative'

const TextFieldElement = document.defaultView.TextField
const ButtonElement = document.defaultView.Button

TextFieldElement.mapEvent('input', 'inputChange') // This is redirecting event handler registering for 'input' to 'inputChange'
TextFieldElement.mapProp('value', 'text') // This is redirecting access from 'value' prop to 'text' prop

ButtonElement.mapEvent('click', 'tap') // Redirect 'click' event to 'tap'

const input = document.createElement('TextField')
input.addEventListener('input', (event) => { // This is actually registered to `inputChange`
\tconsole.log(event.target.value) // This is actually accessing `event.target.text`
})
\n

Then the following code could work:

\n
<TextField v-model=\"userInput\"/>
<!-- 'v-model' hardcoded with `input` or `change` event and `value` or `checked` prop, so we have to provide it with a emulated `input` event and `value` prop -->
\n
<button onClick=\"onTapHandler\"></button> // 'onTapHandler' is actually registered to 'tap', since some frameworks hardcoded \"possible\" event names so they can know it's an event handler
\n
\n

License

\n

MIT

\n","downloadStats":{"lastDay":2,"lastWeek":57,"lastMonth":240}},"nativescript-3dtouch":{"name":"nativescript-3dtouch","version":"1.2.2","license":{"type":"MIT","url":"https://github.com/EddyVerbruggen/nativescript-3dtouch/blob/master/LICENSE"},"readme":"

NativeScript 3D Touch plugin

\n
\n

DEPRECATED: Android 7.1 added support for app shortcuts, so for sake of feature parity this plugin has been upgraded to support Android as well, which meant I thought it would be best to rename it. So please consider upgrading to https://www.npmjs.com/package/nativescript-app-shortcuts.

\n
\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Use when you want to

\n\n\n

Supported platforms

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-3dtouch
\n

And do yourself a favor by adding TypeScript support to your nativeScript app:

\n
tns install typescript
\n

Then open references.d.ts in the root of your project and add this line\nto get autocompletion and type-checking for this plugin:

\n
/// <reference path=\"./node_modules/nativescript-3dtouch/3dtouch.d.ts\" />
\n

Demo app

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device (see package.json for other commands).

\n

API

\n

available

\n

Check whether or not the device is capable.\nAndroid devices will also report false, so you can use this cross platform.

\n
JavaScript
\n
// require the plugin
var ThreeDeeTouch = require(\"nativescript-3dtouch\").ThreeDeeTouch;

// instantiate the plugin
var threeDeeTouch = new ThreeDeeTouch();

threeDeeTouch.available().then(
  function(available) {
    if (available) {
      console.log(\"This device is 3D Touch capable\");
    } else {
      console.log(\"No 3D Touch capability, ask the user to upgrade\");
    }
  }
);
\n
TypeScript
\n
// require the plugin
import {ThreeDeeTouch} from \"nativescript-3dtouch\";

// instantiate the plugin
let threeDeeTouch = new ThreeDeeTouch();

threeDeeTouch.available().then((available) => {
  if (available) {
    console.log(\"This device is 3D Touch capable\");
  } else {
    console.log(\"No 3D Touch capability, ask the user to upgrade\");
  }
});
\n

configureQuickActions

\n

When your app is running you can add those fancy Quick Actions to the Home Screen icon. You can configure up to four icons and they are 'cached' by iOS until you pass in a new set of icons. So you don't need to do this every time your app loads, but it can't really hurt of course.

\n

The type param (see the code sample below) is the most convenient way to relate the icon to the event you'll receive when the action was used to launch your app. So make sure it's unique amongst your icons.

\n

There are two types of icons currently supported: iconType and iconTemplate.

\n

iconType

\n

A value from a fixed list of icons which have been provided by Apple and look great (scroll down to the Objective-C enum and look at the sample below how to use them).

\n

iconTemplate

\n

Can be used to provide your own icon. It must be a valid name of an icon template in your Assets catalog. NativeScript allows you to add the icon to the app/App_Resources/iOS folder. If you add a file called Eye.png then reference it as Eye. More on these images below when we discuss static actions.

\n
JavaScript
\n
threeDeeTouch.configureQuickActions([
  {
    type: \"capturePhoto\",
    title: \"Snag a pic\",
    subtitle: \"You have 23 snags left\",
    iconType: UIApplicationShortcutIconTypeCapturePhoto
  },
  {
    type: \"beer\",
    title: \"Beer-tastic!\",
    subtitle: \"Check in & share\",
    iconTemplate: \"Beer\"
  }
]).then(function () {
  alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
}, function(errorMessage) {
  alert(errorMessage);
});
\n
TypeScript
\n
threeDeeTouch.configureQuickActions([
  {
    type: \"capturePhoto\",
    title: \"Snag a pic\",
    subtitle: \"You have 23 snags left\",
    iconType: UIApplicationShortcutIconType.CapturePhoto
  },
  {
    type: \"beer\",
    title: \"Beer-tastic!\",
    subtitle: \"Check in & share\",
    iconTemplate: \"Beer\"
  }
]).then(() => {
  alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
}, (errorMessage) => {
  alert(errorMessage);
});
\n

Capturing the Action

\n

When a home icon is pressed, your app launches. You probably want to perform different actions based on the home icon action\nthat was picked (like routing to a different page), so you need a way to capture the event.

\n

NativeScript with XML

\n

In a non-Angular NativeScript app we need to extend app.js or app.ts and import the plugin,\nthen call the setQuickActionCallback function. So in case of app.ts change it from something like this:

\n
import * as application from \"application\";
application.start({ moduleName: \"main-page\" });
\n

To this:

\n
import * as application from \"application\";

// import the plugin
import { ThreeDeeTouch } from \"nativescript-3dtouch\";

// instantiate it and call setQuickActionCallback
new ThreeDeeTouch().setQuickActionCallback(function(shortcutItem) {
    console.log(\"app was launched by shortcut type '\" + shortcutItem.type + \"' with title '\" + shortcutItem.localizedTitle + \"'\");
    // this is where you handle any specific case for the shortcut
    if (shortcutItem.type === \"beer\") {
        // this is an example of 'deeplinking' through a shortcut
        let frames = require(\"ui/frame\");
        frames.topmost().navigate(\"beer-page\");
    } else {
        // .. any other shortcut handling
    }
});

application.start({ moduleName: \"main-page\" });
\n

NativeScript with Angular

\n

If you're using Angular, the best place to add the handler is in app.module.ts,\nand use NgZone to help Angular knowing about the route change you're performing:

\n
import { NgZone } from \"@angular/core\";
import { isIOS } from \"tns-core-modules/platform\";
import { RouterExtensions } from \"nativescript-angular\";
import { ThreeDeeTouch } from \"nativescript-3dtouch\";

export class AppModule {
  constructor(private routerExtensions: RouterExtensions,
              private zone: NgZone) {

    if (isIOS) {
      new ThreeDeeTouch().setQuickActionCallback(shortcutItem => {
        console.log(`The app was launched by shortcut type '${shortcutItem.type}' with title '${shortcutItem.localizedTitle}`);

        // this is where you handle any specific case for the shortcut, based on its type
        if (shortcutItem.type === \"page1\") {
          this.deeplink(\"/page1\");
        } else if (shortcutItem.type === \"page2\") {
          this.deeplink(\"/page2\");
        }
      });
    }
  }

  private deeplink(to: string): void {
    this.zone.run(() => {
      this.routerExtensions.navigate([to], {
        animated: false
      });
    });
  }
}
\n

Configuring Static Actions

\n

With configureQuickActions you can configure dynamic actions,\nbut what if you want actions to be available immediately after the app\nwas installed from the AppStore?

\n

You can, but you need to manually edit the .plist.\nFortunately NativeScript allows you to change this file through app/App_Resources/iOS/Info.plist. Anything added there is added to the final .plist during a build.

\n

Note that dynamic actions will never replace static actions, so if you have two static actions you can add up to two dynamic ones. Any more will be ignored.

\n

Here's an example which you can paste anywhere in the .plist file:

\n
<key>UIApplicationShortcutItems</key>
<array>
  <dict>
    <key>UIApplicationShortcutItemIconFile</key>
    <string>Eye</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Eye from plist</string>
    <key>UIApplicationShortcutItemSubtitle</key>
    <string>Awesome subtitle</string>
    <key>UIApplicationShortcutItemType</key>
    <string>eyefromplist</string>
  </dict>
  <dict>
    <key>UIApplicationShortcutItemIconType</key>
    <string>UIApplicationShortcutIconTypeCompose</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Compose</string>
    <key>UIApplicationShortcutItemType</key>
    <string>compose</string>
  </dict>
</array>
\n

These XML tags deserve a bit of explanation

\n

UIApplicationShortcutItemIconFile

\n

The second action above uses the built-in UIApplicationShortcutIconTypeCompose icon, but the first one uses a custom icon: Eye. This expects the file app/App_Resources/iOS/Eye.png. According to Apple's docs this needs to be a single color, transparent, square, 35x35 icon - but that size will look pixelated on retina devices so go ahead and use a 70x70 or 105x105 icon if you please.

\n

UIApplicationShortcutItemTitle / UIApplicationShortcutItemSubtitle

\n

You can guess what those do, right? Only the title is mandatory.

\n

UIApplicationShortcutItemType

\n

This is the same as the type param of configureQuickActions, so it's what you'll receive in the callback you may have configured in app.js / app.ts as payload.type. Just do something cool with that info (like routing to a specific page and loading some content).

\n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":29}},"@triniwiz/nativescript-accordion":{"name":"@triniwiz/nativescript-accordion","version":"7.0.0","license":"Apache-2.0","readme":"

NativeScript Accordion

\n

Install

\n

npm install nativescript-accordion

\n

Usage

\n

IMPORTANT: Make sure you include xmlns:accordion="@triniwiz/nativescript-accordion" on the Page element

\n

Data

\n

By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

\n
this.items = [
      {
        title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
        blah: [
          { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
          { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
        ]
      }
    ]
\n
selectedIndexes = [0,3]
\n

Core

\n
<accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
            <accordion:Accordion.headerTemplate>
                <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                    <Label text=\"{{title}}\"/>
                    <Label col=\"1\" text=\"+\"/>
                </GridLayout>
            </accordion:Accordion.headerTemplate>

            <accordion:Accordion.itemHeaderTemplate>
                <StackLayout>
                    <Label text=\"{{text}}\"/>
                </StackLayout>
            </accordion:Accordion.itemHeaderTemplate>
            
            
            <accordion:Accordion.itemContentTemplate>
                            <StackLayout>
                                <Image src=\"{{image}}\"/>
                            </StackLayout>
              </accordion:Accordion.itemContentTemplate>

            <accordion:Accordion.footerTemplate>
                <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                    <Label text=\"{{footer}}\"/>
                    <Label col=\"1\" text=\"-\"/>
                </GridLayout>
            </accordion:Accordion.footerTemplate>

        </accordion:Accordion>
\n

Multi Template

\n
<accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                             items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                             headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                             itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                             itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                             footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
        >

            <Accordion.headerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.headerTemplates>


            <Accordion.itemHeaderTemplates>
                <template key=\"odd\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemHeaderTemplates>

            <Accordion.itemContentTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemContentTemplates>

            <Accordion.footerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.footerTemplates>

        </accordion:Accordion>
\n

Vue

\n

import Vue from 'nativescript-vue'
import Pager from 'nativescript-accordion/vue'

Vue.use(Pager)
\n
<Accordion row=\"1\" for=\"item of items\">

\t\t\t\t<v-template name=\"header\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"title\">
\t\t\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
\t\t\t\t\t</GridLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template name=\"content\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"footer\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Multi Template

\n
<Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
\t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"header-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"title-even\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t\t\t   :src=\"item.image\"></Image>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"content-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Angular

\n
import { AccordionModule } from \"nativescript-accordion/angular\";

@NgModule({
    imports: [
        AccordionModule
    ]
    })
\n
<Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
\t\t\t</GridLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
\t\t\t<StackLayout>
\t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Multi Template

\n
<Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
\t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
\t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
\t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
\t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
\t>
\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t   [src]=\"item.image\"></Image>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Config

\n
public selectedIndexes = [0,3]
\n
<Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":26}},"@nativescript/template-tab-navigation-ng":{"name":"@nativescript/template-tab-navigation-ng","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript with Angular Tab Navigation Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

App template featuring a TabView component for navigation.

\n

\n

Key Features

\n\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
ns create my-tab-ng --template @nativescript/template-tab-navigation-ng
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-tab-ng --template nativescript-app-templates/packages/template-tab-navigation-ng
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The tab navigation is set up in the application component:

\n\n

There are four components used for the tab content items located in these folders:

\n\n

Styling

\n

This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

\n

It has 3 global style files that are located at the root of the app folder:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":12,"lastMonth":0}},"@global66/nativescript-contacts-lite":{"name":"@global66/nativescript-contacts-lite","version":"1.0.0","license":"MIT","readme":"

NativeScript Contacts Lite

\n

This nativescript-contacts-lite plugin provides pretty fast (but hey it's all relative) read-only access to the iOS and Android contact directory. By limiting the scope of the result set through the desiredFields, it is possible to obtain a JSON object containing the relevant data of the contact directory within a couple of hundred milliseconds.

\n

Demo Application

\n

This repository contains a demo application in the demo-angular folder that uses this plugin to display a contact picker. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run tns run <platform> in the demo-angular folder.

\n

Installation

\n

Run tns plugin add nativescript-contacts-lite

\n

Usage

\n

To use the contacts module you must first require() it.

\n
var Contacts = require(\"nativescript-contacts-lite\");
\n

Methods

\n

getContacts & getContactsWorker

\n

Both methods retrieve contacts and share the same interface. The difference is that the former runs in the main thread and the latter within a web worker.

\n

Argument 1: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. Possible values are:

\n
[
  'address',
  'display_name',
  'email',
  'name_details',
  'nickname',
  'note',
  'organization',
  'phone',
  'photo',
  'thumbnail',
  'website'
]
\n

Argument 2: searchTerm (optional)\nA string with a search term to limit the result set to only contacts whose display_name contain the term. Defaults to fetching all relevant contacts if an empty search term is provided or none at all.

\n

Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

\n

Example using getContacts

\n
let desiredFields = ['display_name','phone'];
let searchTerm = 'Jon';

console.log('Loading contacts...');
let timer = new Date().getTime();

Contacts.getContacts(desiredFields,searchTerm).then((result) => {
  console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
  console.log(`Found ${result.length} contacts.`);
  console.dir(result);
}, (e) => { console.dir(e); });
\n

Example using getContactsWorker

\n
let desiredFields = ['display_name','phone','thumbnail','email','organization'];

console.log('Loading contacts...');
let timer = new Date().getTime();

Contacts.getContactsWorker(desiredFields).then((result) => {
  console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
  console.log(`Found ${result.length} contacts.`);
  console.dir(result);
}, (e) => { console.dir(e); });
\n

getContactById

\n

Get contact details for a specific contact.

\n

Argument 1: contactId\nThe identifier of the contact you wish to obtain details of (obtained through the getContacts(Worker) methods).

\n

Argument 2: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. See getContacts method for possible values.

\n

Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

\n

Example

\n
let contact_id = contact.contact_id // get id from result of getContacts method

let desiredFields = [
  'address',
  'display_name',
  'email',
  'name_details',
  'nickname',
  'note',
  'organization',
  'phone',
  'photo',
  'thumbnail',
  'website'
]

Contacts.getContactById(contact_id,desiredFields).then((result) => {
  console.dir(result);
}, (e) => { console.dir(e); });
\n

Performance

\n

Considerations

\n

Running in main thread versus web worker

\n

The plugin provides both methods that run in either the main/UI thread or within a web worker. Although offloading the processing to a separate thread adds web worker initialization time, it guarantees that the main UI thread will continue to work smoothly.

\n

If you are implementing an autocomplete where on each key you are querying a smaller subset of the contacts, you will probably want to go with the non-worker variant to avoid web worker initialization time while the user is waiting. On the other hand, if you are reading the entire contact directory while initializing your app, you probably want this to happen in the background to avoid the UI getting stuck while processing. In the latter case you probably would want to use the web worker variant.

\n

Contact Picker Example

\n

Another way to speed up performance is possible in certain cases like when you are building a contact picker. In this case it is probably good enough to first provide a narrow array of desiredFields like ['display_name','thumbnail'] to getContacts to display the list. Only when the user selects a specific contact, you can obtain all details for a specific contact by supplying a wider array of desiredFields to getContactById. This example has been implemented in the demo app located in this repository.

\n

Benchmarks

\n

Android

\n

On a relatively old Samsung Galaxy S4 a list of ~600 contacts is returned somewhere between ~300ms up to ~2s depending on the desired fields and whether you run in the main thread or in a web worker.

\n

iOS

\n

Tests on an iPhone 7 plus with ~600 contacts returned in ~105ms when running getContacts(['display_name', 'phone']) (so non worker). This could use some more real iOS device data in different modes (e.g. more fields & web worker mode) if anyone has some.

\n

Notes

\n

Bundling with Webpack

\n

This plugin is compatible with webpack bundling through the nativescript-dev-webpack plugin as of NativeScript 3.2. However, if you are using the web worker functions, we need to ensure that the web worker resources are included in the package. For this purpose, you should add the nativescript-worker-loader to your project: npm i -D nativescript-worker-loader.

\n

Photo & Thumbnail Images

\n

The plugin returns photo & thumbnail images as a base64 encoded string ready to be used as the source attribute of an image, e.g. <Image *ngIf="item.thumbnail" [src]="item.thumbnail"></Image>

\n

Android Specifics

\n

Permissions

\n

This plugin uses the nativescript-permissions plugin by Nathanael Anderson for obtaining read-only permissions to the phone's contacts on Android 6 and above.

\n

iOS Specifics

\n

Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

\n

Permissions

\n

As of iOS 10 it has become mandatory to add the NSContactsUsageDescription key to your application's Info.plist (see Apple's developer documentation).

\n

Therefore you should add something like this to your ~/app/App_Resources/iOS/Info.plist:

\n
<key>NSContactsUsageDescription</key>
<string>This application requires access to your contacts to function properly.</string>
\n

Acknowledgements

\n

The iOS part of this plugin is based on code from the nativescript-contacts plugin.

\n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":0}},"@nstudio/nativescript-fluid-segmented-bar":{"name":"@nstudio/nativescript-fluid-segmented-bar","version":"1.0.2","license":"Apache-2.0","readme":"

@nstudio/nativescript-fluid-segmented-bar

\n

Fluid Segmented Bar to liven up any standard SegmentedBar control.

\n\n

Usage

\n
npm install @nstudio/nativescript-fluid-segmented-bar
\n

Use within any view layout:

\n
<FluidSegmentedBar items=\"{{items}}\" gradientColorSides=\"{{gradientColorSides}}\" selectedIndexChanged=\"{{selectedIndexChanged}}\" didScrollOffset=\"{{didScrollOffset}}\"/>
\n

Provide bindings for properties and events:

\n
const items: Array<FluidSegmentedBarItem> = [
    {
        title: 'Enjoy',
        colors: [new Color('#485ae6'), new Color('#87aeed')],
    },
    {
        title: 'Your',
        colors: [new Color('#87aeed'), new Color('#e53ca9')],
    },
    {
        title: 'Life',
        colors: [new Color('#c2c96a'), new Color('#678d50')],
    },
];
const gradientColorSides: FluidSegmentedBarGradientColorSides = {
    left: [new Color('#87aeed')],
    right: [new Color('#c2c96a')],
};

function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
    console.log('selectedIndexChanged:', args.newIndex);
}
function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
    console.log('didScrollOffset:', args.offset);
}
\n

When using flavors, you can just register the element for usage in your markup:

\n
import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

// Solid
import { registerElement } from 'dominative';
registerElement('fluidSegmentedBar', FluidSegmentedBar);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);

// React
import { registerElement } from 'react-nativescript';
registerElement('fluidSegmentedBar', () => FluidSegmentedBar);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar)
\n

API

\n

Properties

\n\n

Events

\n\n

License

\n\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/l":{"name":"@nativescript-community/l","version":"4.2.26","license":"MIT","readme":"

@nativescript-community/l

\n

\"npm\"\n\"npm\"

\n

This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is a direct fork of nativescript-localize.

\n

Differences

\n

This plugin was created to have a different behavior from nativescript-localize:

\n\n

Credits

\n

A lot of thanks goes out to Eddy Verbruggen and Ludovic Fabrèges (@lfabreges) for developing and maintaining nativescript-localize.

\n

Table of contents

\n\n

Installation

\n
tns plugin add @nativescript-community/l
\n

Usage

\n

Create a folder i18n in the app folder with the following structure:

\n
app
  | i18n
      | en.json           <-- english language
      | fr.default.json   <-- french language (default)
      | es.js
\n

You need to set the default langage and make sure it contains\nthe application name to avoid any error.

\n

Angular

\n

app.module.ts

\n
import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
import { NativeScriptLocalizeModule } from \"@nativescript-community/l/angular\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

import { AppComponent } from \"./app.component\";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [
    NativeScriptModule,
    NativeScriptLocalizeModule
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }
\n

Template

\n
<Label text=\"{{ 'Hello world !' | L }}\"/>
<Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
\n

Script

\n
import { localize } from \"@nativescript-community/l\";

console.log(localize(\"Hello world !\"));
\n

Javascript / XML

\n

app.js

\n
const application = require(\"application\");
const localize = require(\"@nativescript-community/l\");
application.setResources({ L: localize.l });
\n

Template

\n
<Label text=\"{{ L('Hello world !') }}\"/>
<Label text=\"{{ L('I am %s', 'user name') }}\"/>
\n

Script

\n
const localize = require(\"@nativescript-community/l\");

console.log(localize(\"Hello world !\"));
\n

Quirks

\n

⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

\n
  const page = args.object;
  page.bindingContext = new Observable();
\n

Vue

\n

app.js

\n
import { l } from \"@nativescript-community/l\";

Vue.filter(\"L\", l);
\n

Template

\n
<Label :text=\"'Hello world !'|L\"></Label>
<Label :text=\"'I am %s'|L('user name')\"></Label>
\n

File format

\n

Each file is imported using require, use the file format of your choice:

\n

JSON

\n
{
  \"app.name\": \"My app\",
  \"ios.info.plist\": {
    \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
  },
  \"user\": {
    \"name\": \"user.name\",
    \"email\": \"user.email\"
  },
  \"array\": [
    \"split the translation into \",
    \"multiples lines\"
  ],
  \"sprintf\": \"format me %s\",
  \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
}
\n

Javascript

\n
const i18n = {
  \"app.name\": \"My app\"
};

module.exports = i18n;
\n

Frequently asked questions

\n

How to set the default language?

\n

Add the .default extension to the default language file to set it as the fallback language:

\n
fr.default.json
\n

How to localize the application name?

\n

The app.name key is used to localize the application name:

\n
{
  \"app.name\": \"My app\"
}
\n

How to localize iOS properties?

\n

Keys starting with ios.info.plist. are used to localize iOS properties:

\n
{
  \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
}
\n

How to change the language dynamically at runtime?

\n

Seeing this module now uses JSON objects. Overriding consist of 3 steps:

\n\n
import { overrideLocaleNative } from \"@nativescript-community/l/localize\";
const localeOverriddenSuccessfully = overrideLocaleNative(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
\n
\n

Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

\n
\n
android {

  // there maybe other code here //

  bundle {
    language {
      enableSplit = false
    }
  }
}
\n
\n

Tip: you can get the default language on user's phone by using this

\n
\n
import { device } from '@nativescript/core/platform';

console.log(\"user's language is\", device.language.split('-')[0]);
\n
\n

Tip: overrideLocaleNative method stores the language in a special key in app-settings,\nyou can access it like this,

\n
\n
import { getString } from '@nativescript/core/application-settings'; 

console.log(getString('__app__language__')); // only available after the first time you use overrideLocaleNative(langName);
\n

Troubleshooting

\n

The angular localization pipe does not work when in a modal context

\n

As a workaround, you can trigger a change detection from within your component constructor:

\n
constructor(
  private readonly params: ModalDialogParams,
  private readonly changeDetectorRef: ChangeDetectorRef,
) {
  setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/datetimepicker":{"name":"@nativescript/datetimepicker","version":"2.1.13","license":"Apache-2.0","readme":"

@nativescript/datetimepicker

\n

A plugin that provides the UI elements DatePickerField, TimePickerField and DateTimePickerFields for picking a date and a time. The DatePickerField and TimePickerField components extend the TextField view, while the DateTimePickerFields extends the GridLayout layout container that contains instances of the DatePickerField and TimePickerField components. There is also a DateTimePicker class which provides static methods pickDate() and pickTime() that can be called to show the same dialog picker as the fields.

\n\"DatePickerField\n\"TimePickerField\n

Table of Contents

\n\n

Installation

\n
npm install @nativescript/datetimepicker
\n

Usage

\n

Core

\n
<Page
   xmlns=\"http://schemas.nativescript.org/tns.xsd\"
   xmlns:datetime=\"@nativescript/datetimepicker\">
   <datetime:DatePickerField hint=\"select date\"/>
   <datetime:TimePickerField hint=\"select time\"/>
   <datetime:DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"/>
\n

Angular

\n

Import the plugin's module:

\n
import { NativeScriptDateTimePickerModule } from \"@nativescript/datetimepicker/angular\";
...
@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptDateTimePickerModule,
        ...
    ],
    ...
\n

Then use it in HTML as follows:

\n
<DatePickerField hint=\"select date\"></DatePickerField>
<TimePickerField hint=\"select time\"></TimePickerField>
<DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
\n

Vue

\n

Once the plugin has been installed, register it in the main.ts file:

\n
import DateTimePicker   from \"@nativescript/datetimepicker/vue\"

import Home from './components/Home.vue';

const app = createApp(Home).use(DateTimePicker)

app.start();
\n

Then use it in a template as follows:

\n
<DatePickerField hint=\"select date\"></DatePickerField>
<TimePickerField hint=\"select time\"></TimePickerField>
<DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
\n

Setting The Selected Date and Time

\n

To set the selected time of the TimePickerField, use the time property.

\n
<TimePickerField time=\"01:00\"></TimePickerField>
\n

The DatePickerField and DateTimePickerFields components both use the date property to set their selected date(and the time for DateTimePickerFields) value.

\n
<DatePickerField date=\"2019/02/24\"></DatePickerField>

<DateTimePickerFields date=\"2019/02/24 01:00\"></DateTimePickerFields>
\n

Changing the Picker Titles and Buttons Labels

\n

To change the titles and the button labels of the picker's popups, use the pickerOkText, pickerCancelText and pickerTitle properties.

\n
<DatePickerField hint=\"tap to choose\" pickerOkText=\"Approve\" pickerCancelText=\"Reject\" pickerTitle=\"Confirm predefined date selection\" pickerDefaultDate=\"2019/05/15\"></DatePickerField>
\n

The DateTimePickerFields has the additional pickerTitleDate for the date picker title and the pickerTitleTime for the time picker title.

\n
<DateTimePickerFields hintDate=\"tap to choose date\" hintTime=\"tap to choose time\"
                        pickerOkText=\"Approve\" pickerCancelText=\"Reject\"
                        pickerTitleDate=\"Confirm predefined date selection\"
                        pickerTitleTime=\"Confirm predefined time selection\"
                        pickerDefaultDate=\"2019/05/15 22:00\" autoPickTime=\"true\"></DateTimePickerFields>
\n

Setting Localization

\n

To localize the DatePickerField and DateTimePickerFields components, use the locale property.

\n
<DatePickerField locale=\"en_GB\" hint=\"select date\"></DatePickerField> 
<!-- DateTimePickerFields -->
<DateTimePickerFields locale=\"de_DE\" hintDate=\"datum auswählen\" hintTime=\"zeit wählen\"
                        pickerOkText=\"Bestätigen\" pickerCancelText=\"Stornieren\"
                        pickerTitleDate=\"Datum auswählen\" pickerTitleTime=\"Zeit wählen\" />
\n

Formatting the Date and Time

\n

Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. To customize the date format, use the dateFormat property.

\n
<DatePickerField date=\"2019/02/24\" dateFormat=\"'my date': dd-MMMM-yyyy\"/>
\n

The TimePickerField will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format setting of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property.

\n
<TimePickerField time=\"16:00\" timeFormat=\"h:mm a\" locale=\"en_US\" />
\n

For the DateTimePickerFields picker, use the same properties( dateFormat, timeFormat and locale) for custom date and time formats.

\n
<DateTimePickerFields date=\"2019/02/24 16:00\" timeFormat=\"h:mm a\" locale=\"en_US\" />
\n

Setting the Minimum and Maximum Dates

\n

To set the minimum and maximum dates, use the minDate and maxDate properties for the DatePickerField and DateTimePickerFields components.

\n
<DatePickerField minDate=\"2020/02/02\" maxDate=\"2021/02/02\" hint=\"tap to select\"/>
<!-- DateTimePickerFields -->
<DateTimePickerFields minDate=\"2020/02/02\" maxDate=\"2021/02/02\"
                        hintDate=\"tap to select date\" hintTime=\"tap to select time\" />
\n

DateTimePickerFields pickers orientation

\n

To lay out the picker fields in the horizontal(default) or vertical direction, use the orientation property.

\n
<DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"
                        orientation=\"vertical\"></DateTimePickerFields>
\n

Styling the pickers with CSS

\n

You can use CSS to style the DatePickerField and the TimePickerField pickers. The same styling applies to the pickers contained in DateTimePickerFields component. The picker supports changing its colors through the following predefined CSS classes:

\n\n
\n

Note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.

\n
\n\"DatePickerField\n\n
timepickerfield,
datepickerfield {
    padding: 12 4;
}

timepickerfield.apply-css,
datepickerfield.apply-css {
    color: #CDDC39;
    background-color: #00796B;
    font-size: 20;
    font-weight: bold;
    padding: 20;
}

.date-time-picker.apply-css {
    color: #00796B;
    background-color: #CDDC39;
}

.date-time-picker-spinners.apply-css {
    color: #CDDC39;
    background-color: #00796B;
}

.date-time-picker-buttons.apply-css {
    color: #00796B;
}
Footer
\n

To apply styles at runtime when opening the DateTimePicker you can do the following:

\n
import { DateTimePicker, DateTimePickerStyle } from '@nativescript/datetimepicker';
import { Application, View} from '@nativescript/core';
function createPicker(args: EventData) {
\tconst dateTimePickerStyle = DateTimePickerStyle.create(args.object as any);

    // This example handles styling the calendar for light and dark mode of the device settings
\tif (Application.systemAppearance() === 'dark') {
      // style for dark mode
      dateTimePickerStyle.buttonsBackgroundColor = new Color('#202125');
      dateTimePickerStyle.dialogBackgroundColor = new Color('#202125');
      dateTimePickerStyle.titleTextColor = new Color('#fff');
      dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
      dateTimePickerStyle.spinnersBackgroundColor = new Color('#202125');
      dateTimePickerStyle.spinnersTextColor = new Color('#fff');
    } else {
      // style for light mode
      dateTimePickerStyle.buttonsBackgroundColor = new Color('#fff');
      dateTimePickerStyle.dialogBackgroundColor = new Color('#fff');
      dateTimePickerStyle.titleTextColor = new Color('#0067a6');
      dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
      dateTimePickerStyle.spinnersBackgroundColor = new Color('#fff');
      dateTimePickerStyle.spinnersTextColor = new Color('#0067a6');
    }

     DateTimePicker.pickDate(
      {
        context: (args.object as View)._context,
        minDate: new Date((new Date() as any) -1),
        title: 'DatePicker',
        okButtonText: 'Okay',
        cancelButtonText: 'Cancel',
        locale: 'es'
      },
      dateTimePickerStyle
    ).then((result) => {
        // handle the result
    })
}
\n

Using DateTimePicker

\n

Internally DatePickerField and TimePickerField call the pickDate and pickTime methods of the DateTimePicker which are public, so they can also be manually called in case a more customized picker is desired. The pickDate method accepts DatePickerOptions, while the pickTime method accepts TimePickerOptions. These options allow having the same features as in the fields.

\n
function onPickDateTap (args: EventData) {
                const dateToday = new Date();
                const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
                const dateNextWeek = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 7);
                
                DateTimePicker
                    .pickDate({
                        context: args.object._context,
                        date: dateTomorrow,
                        minDate: dateTomorrow,
                        maxDate: dateNextWeek,
                        okButtonText: \"OK\",
                        cancelButtonText: \"Cancel\",
                        title: \"choose date\",
                        locale: \"en_GB\"
                    })
                    .then(selectedDate => {
                        if (selectedDate) {
                            this.dateText = this.getFormattedDate(selectedDate);
                        }
                    });
            },
\n
function onPickTimeTap (args: EventData) {
                const dateToday = new Date();
                const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
                dateTomorrow.setHours(8);
                dateTomorrow.setMinutes(0);
                DateTimePicker
                    .pickTime({
                        context: args.object._context,
                        time: dateTomorrow,
                        okButtonText: \"OK\",
                        cancelButtonText: \"Cancel\",
                        title: \"choose time\",
                        locale: \"en_GB\",
                        is24Hours: true
                    })
                    .then(selectedTime => {
                        if (selectedTime) {
                            this.timeText = this.getFormattedTime(selectedTime);
                        }
                    });
            },
\n

API

\n

DatePickerField

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
dateDateThe date the picker field is currently displaying. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
minDateDateThe minimum date the picker field can select.
maxDateDateThe maximum date the picker field can select.
localestringIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month) (default is based on the device’s locale settings).
hintstringGets or sets the hint text. Hint is the text that is displayed in the field when date is null.
dateFormatstringFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
pickerTitlestringText that will be displayed as title of the picker, default is undefined.
pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
pickerCancelTextstringText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

TimePickerField

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
timeDateThe time the picker field is currently displaying. If it is in ISO 8601 format, it is passed to the JS Date constructor.
localestringGets or sets a locale for displaying the date in the field, and also for the picker. Default value is undefined, meaning that the format will be based on the device's settings.
hintstringGets or sets the hint text. Hint is the text that is displayed in the field when time is null.
timeFormatstringFormat used for the text in the picker field (on Android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
pickerTitlestringText that will be displayed as title of the picker, default is undefined.
pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings).
pickerCancelTextstringText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on Android (based on the devices locale settings)).
\n

DateTimePickerFields

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
dateDateThe date the picker fields are currently displaying.
minDateDateGets or sets the min date. Note that this property only affects the date component.
maxDateDateGets or sets the max date. Note that this property only affects the date component.
localestringGets or sets a locale for displaying the date in the field, and also for the picker.
Default value is undefined, meaning that the format will be based on the device's settings.
Note that changing the locale will not affect the pickerOkText, pickerCancelText and pickerTitle or hint properties
dateFormatstringFormat used for the text in the picker field (on Android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
timeFormatstringFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
pickerTitleDatestringText that will be displayed as title of the picker when the date component is tapped.
pickerTitleTimestringText that will be displayed as title of the picker, when the time component is tapped.
pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
pickerCancelTextstringText for the Cancel button of the picker (default is Cancel on iOS, localized version of Cancel on Android (based on the devices locale settings)).
autoPickTimebooleanValue that indicates whether the time component should be assigned a value as soon as a date is picked by the date component. Defaults to false.
orientation'horizontal' | 'vertical'Value that indicates how the date and time components will be arranged, default is "horizontal", which means that they will be on the same row.
hintDatestringText displayed in the date component when date is null.
hintTimestringText displayed in the time component when date is null.
\n

DateTimePicker Class

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn TypeDescription
pickDate(options: DatePickerOptions, style?: DateTimePickerStyle)Promise<Date>Picks a date from a dialog picker initialized with the provided options and styled with the optionally provided style.
pickTime(options: TimePickerOptions, style?: DateTimePickerStyle)Promise<Date>Picks a time from a dialog picker initialized with the provided options and styled with the optionally provided style.
\n

DatePickerOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
contextanyView's context. Obtained from the _context property of a View instance.
dateDateOptional: The date that will be displayed in the picker, (if not provided, the picker will display today).
minDateDateOptional: The minimum date that can be selected.
maxDateDateOptional: The maximum date that can be selected.
localestringOptional: Identifier of a locale that will be used to localize month names and am/pm texts.
titlestringOptional: Text that will be displayed as title of the picker.
okButtonTextstringOptional: Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
cancelButtonTextstringOptional: Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

TimePickerOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
contextanyView's context. Obtained from the _context property of a View instance.
timeDateOptional: The time that will be displayed in the picker, (if not provided, the picker will display now).
is24HoursbooleanOptional: This value will be used only on Android to determine whether the picker will be in 12 or 24 hour format.
localestringOptional: Identifier of a locale that will be used to localize month names and am/pm texts.
titlestringOptional: Text that will be displayed as title of the picker.
okButtonTextstringOptional: Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
cancelButtonTextstringOptional: Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

DateTimePickerStyle

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titleTextColorColorColor to be used for the title text.
dialogBackgroundColorColorColor to be used as a background of the dialog picker.
spinnersTextColorColorColor to be used for the texts of the date/time spinners.
spinnersBackgroundColorColorColor to be used as a background of the date/time spinners.
buttonsTextColorColorColor to be used for the texts of the ok/cancel buttons.
buttonsBackgroundColorColorColor to be used as a background of the ok/cancel buttons.
buttonOkTextColorColorColor to be used for the texts of the ok button.
buttonOkBackgroundColorColorColor to be used as a background of the ok button.
buttonCancelTextColorColorColor to be used for the texts of the cancel button.
buttonCancelBackgroundColorColorColor to be used as a background of the cancel button.
create(view: View)DateTimePickerStyleCreates a style based on any css provided. The parameter is a View with the properly setup css class name.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":281,"lastWeek":0,"lastMonth":0}},"nativescript-star-ratings":{"name":"nativescript-star-ratings","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Star Ratings

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-star-ratings
\n

Configuration

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-star-ratings" on the\nPage element

\n
<ui:StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"2\" max=\"5\"/>
\n

Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);
\n
<StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"{{value}}\" max=\"{{max}}\"></StarRating>
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
emptyBorderColorbluestring
  • - [ ]
IOS only
emptyColorwhitestring
  • - [ ]
filledBorderColorbluestring
  • - [ ]
IOS only
filledColorbluestring
  • - [ ]
value0number
  • - [ ]
max5number
  • - [ ]
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":15,"lastMonth":33}},"nativescript-filter-select":{"name":"nativescript-filter-select","version":"1.3.0","license":"MIT","readme":"

FilterSelect

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin to provide an listview widget to select AND filter items.

\n

Sample Screenshots

\n

Android and ios

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n

Installation

\n
NativeScript 4.x
\n\n

import css

\n

@import 'nativescript-filter-select/styles.css';

\n

*Be sure to run a new build after adding plugins to avoid any issues

\n

Vanilla NativeScript

\n

IMPORTANT: Make sure you include xmlns:FS="nativescript-filter-select" on the Page element

\n

XML

\n
<Page xmlns:FS=\"nativescript-filter-select\">
   <StackLayout>     
     <FS:FilterSelect 
     items=\"{{ countries }}\"
     hint=\"Please select some countries\" 
     modal_title=\"Countries\" search_param=\"name\" 
     primary_key=\"code\" 
     change=\"{{ onSelect }}\"
     />
   </StackLayout>
</Page>
\n

Angular NativeScript

\n

Regiter plugin in Component class

\n

import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-select';
registerElement('FilterSelect', () => FilterSelect);
\n

HTML

\n
    <FilterSelect 
        height=\"100%\"
        [items]=\"items\"
        (change)=\"onitemselected($event)\"
        hint=\"Please select some items\" 
        modal_title=\"item\" search_param=\"name\" 
        primary_key=\"id\">

    </FilterSelect>
\n

Attributes

\n

see demo examples for more information

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionDefault
renderto render "tags" or "label" or "drop"string : tags
multipleto limit the options selected to one if set to falseboolean : true
search_paramindex of the string value in the items object to search on itstring : name
item_templatexml template for the listview itemsstring : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" />
changechange event treger when select is donefunction : optional change(args) and selected item can be accessed as args.selected
modal_titletitle of the filter modalString : Please select items
hintstring to show when no items selectedPlease select some items
itemsarray of objects to populate the list of optionsObservableArray :[]
primary_keyunique index of the items objectstring : id
selectedarray of objects to mark some options as selected and it will be the result when select is doneArray: []
disabledto disable select bottonboolean : false
allowSearchto enable/disable search bar in the modalboolean : true
refreshto refresh the filter select with new values good with remote datafunction
searchHintsearch placeholder or hint in the items modal"Search for item"
xbtnremove tag text you can use tag icon here"x"
closeTextclose button text"Close"
doneTextdone button text"Done"
clearTextclear button text"Clear"
selectTextselect button text"Select"
autofocuskeyboard up when you open modal so you can start searchfalse
open()open modal programmaticallyfunction
closeclose event treger when modal is closedyou can get the selected array by args.selected if the modal closed without any selection the array will be empty
\n

CSS core-theme styles is required for modal page if you dont have them just make your own

\n

see styles.css so you can override or make your own

\n\n

font icons

\n\n

For contributing

\n

just do a pull request with description of your changes or open issue with your ideas

\n

i need help with this issue

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynamsoft-barcode-reader":{"name":"nativescript-dynamsoft-barcode-reader","version":"1.1.2","license":"Apache-2.0","readme":"

nativescript-dynamsoft-barcode-reader

\n

Nativescript plugin for Dynamsoft Barcode Reader.

\n

We can use it read barcodes from sources like the camera frames or static images.

\n

Installation

\n
npm install nativescript-dynamsoft-barcode-reader
\n

Usage

\n

Initialization

\n
this.dbr = new BarcodeReader();
this.dbr.initLicense(\"DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==\"); //1-day public trial.
\n

Decoding

\n
    \n
  1. \n

    Decode from a camera frame

    \n
    let results = this.dbr.decodeFrame(this.dce.captureFrame()); //get a camera frame from Dynamsoft Camera Enhancer
    \n
    2. \n
  2. \n

    Start live scanning with Dynamsoft Camera Enhancer.

    \n
    //bind Dynamsoft Camera Enhancer to Dynamsoft Barcode Reader
    this.dbr.setCameraEnhancer(this.dce.getCameraEnhancer()); 
    //set the text result listener
    this.dbr.setTextResultListener(function (textResults:TextResult[]) {
      console.log(textResults);
    })
    //start scanning from the camera
    this.dbr.startScanning();
    \n
    3. \n
\n

You can apply a trial license here.

\n

API

\n

Methods:

\n
initLicense(license:string,licenseListener?:LicenseListener):void;
initRuntimeSettingsWithString(template:string);
decodeFrame(frame:any):TextResult[];
decodeFrameAsync(frame:any):Promise<TextResult[]>;
decodeBitmap(bitmap:any):TextResult[];
decodeBase64(base64:string):TextResult[];
decodeFile(file:string):TextResult[];
setCameraEnhancer(dce:any):void;
startScanning():void;
stopScanning():void;
setTextResultListener(listener: TextResultListener);
\n

Interfaces:

\n
export interface TextResultListener{
  (results:TextResult[]):void;
}

export interface LicenseListener{
  (isSuccess:boolean,error:any):void;
}

export interface TextResult {
  barcodeText:string;
  barcodeFormat:string;
  x1:number;
  x2:number;
  x3:number;
  x4:number;
  y1:number;
  y2:number;
  y3:number;
  y4:number;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@lmslopes/nativescript-stripe":{"name":"@lmslopes/nativescript-stripe","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript Stripe

\n

forked from https://github.com/triniwiz/nativescript-plugins

\n

Installation

\n
npm install @lmslopes/nativescript-stripe
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-label-glitch":{"name":"@nstudio/nativescript-label-glitch","version":"1.0.0","license":"Apache-2.0","readme":"

@nstudio/nativescript-label-glitch

\n

Label with a Glitch!

\n
npm install @nstudio/nativescript-label-glitch
\n

Usage

\n

Use within any view layout:

\n
<LabelGlitch text=\"Hello\" />
\n

When using flavors, you can register the element for usage in your markup:

\n
import { LabelGlitch } from '@nstudio/nativescript-label-glitch'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('LabelGlitch', () => LabelGlitch)

// Solid
import { registerElement } from 'dominative';
registerElement('LabelGlitch', LabelGlitch);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('LabelGlitch', () => LabelGlitch);

// React
import { registerElement } from 'react-nativescript';
registerElement('LabelGlitch', () => LabelGlitch);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('LabelGlitch', () => LabelGlitch)
\n

License

\n\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swipe-card":{"name":"nativescript-swipe-card","version":"1.0.8","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"twitter:

\n

\"NPM\"

\n

Nativescript Swipe Card plugin

\n

This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe

\n

Nativescript-swipe-card

\n

Tender cards, allow you to drag them, and detect swipe events.

\n

Developed with :heart: by the team NativeBaguette 🥖

\n

To know more about the {N} ambassador's program, you can check this video, or read this article.

\n

\n \n

\n

Installation

\n
tns plugin add nativescript-swipe-card
\n

Usage

\n

Typescript NativeScript

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:customControls=\"nativescript-swipe-card\"
      loaded=\"pageLoaded\" class=\"page\">
    <StackLayout>
        <customControls:SwipeCard id=\"swipe\" 
                                  height=\"90%\"
                                  width=\"80%\" 
                                  items=\"{{ stackCards }}\" 
                                  cardHeight=\"60\" 
                                  cardWidth=\"70\"
                                  isRandomColor=\"1\"
                                  cardBorderRadius=\"20\"
                                  cardBorderWidth=\"2\"
                                  />
  </StackLayout>
</Page>
\n

main-page

\n
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import {HelloWorldModel} from './main-view-model';
import {SwipeEvent} from 'nativescript-swipe-card';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <pages.Page>args.object;
    page.bindingContext = new HelloWorldModel();
    let swipeCard = page.getViewById(\"swipe\");
    swipeCard.on(\"swipeEvent\", (args:SwipeEvent) => {
        if (args.direction === 1) {
                    //right
                    console.log('Swiped to right');
        } else {
                    //left
                    console.log('Swiped to left');
        }
    });
}
\n

main-view-model

\n
import {Observable} from 'tns-core-modules/data/observable';
import {Layout} from \"tns-core-modules/ui/layouts/layout\";
import {StackLayout} from \"tns-core-modules/ui/layouts/stack-layout\";
import {GridLayout, ItemSpec} from \"tns-core-modules/ui/layouts/grid-layout\";
import {Label} from \"tns-core-modules/ui/label\";
import {Image} from \"tns-core-modules/ui/image\";
import {Button} from \"tns-core-modules/ui/button\";

export class HelloWorldModel extends Observable {
  public stackCards:Layout[];

  constructor() {
    super();

    let Grid = new GridLayout();
    let Label1 = new Label();
    let Label2 = new Label();
    Label1.text = \"The Swipable Card plugin\";
    Label1.textWrap=true;
    Label2.text = \"Welcome to {N} we present you\";
    Label2.textWrap=true;
    Grid.addChild(Label1);
    Grid.addChild(Label2);
    // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
    var firstRow = new ItemSpec(1, \"auto\");
    var secondRow = new ItemSpec(1, \"auto\");
    Grid.addRow(firstRow);
    Grid.addRow(secondRow);
    GridLayout.setRow(Label1,0);
    GridLayout.setRow(Label2,1);


    let stack2 = new StackLayout();
    let image = new Image();
    image.src=\"~/images/apple.jpg\"
    image.height=100;
    image.width=100;
    stack2.verticalAlignment = \"middle\";
    stack2.addChild(image);
    

    let stack3 = new StackLayout();
    let button = new Button();
    button.text=\"Click me!\";
    button.width=100;
    button.textAlignment = \"center\";
    stack3.verticalAlignment = \"middle\";
    stack3.addChild(button);
    this.stackCards = [stack3,stack2,Grid];
  }
  
}
\n

Fun fact! Team Time-Travel (Luna Kang, Stefan Medjo and mentor Jen Looper used the plugin to complete their 'Fetching' app - a Tinder app for dogs that uses the Petfinder API to help dogs to find puppy playdates in their area!\nhttps://github.com/jlooper/fetching-app-vanilla

\n

Angular NativeScript

\n

XML

\n
        <SwipeCard  height=\"75%\"
                    width=\"100%\" 
                    [items]=\"stackCards\"
                    (swipeEvent)=\"swipeEvent($event)\"
                    cardHeight=\"50\" 
                    cardWidth=\"80\"
                    isRandomColor=\"1\"
                    cardBorderRadius=\"15\"
                    cardBorderWidth=\"1\">
        </SwipeCard>
\n

Component

\n
import {Layout} from \"tns-core-modules/ui/layouts/layout\";
import {StackLayout} from \"tns-core-modules/ui/layouts/stack-layout\";
import {GridLayout, ItemSpec} from \"tns-core-modules/ui/layouts/grid-layout\";
import {Label} from \"tns-core-modules/ui/label\";
import {Image} from \"tns-core-modules/ui/image\";
import {Button} from \"tns-core-modules/ui/button\";
import * as elementRegistryModule from 'nativescript-angular/element-registry';
elementRegistryModule.registerElement(\"SwipeCard\", () => require(\"nativescript-swipe-card\").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
@Component({
    moduleId: module.id,
    templateUrl: \"helloworld.html\"
})
export class helloworldComponent {

  public stackCards:Array<Layout>=[];
  
  constructor() {
    let Grid = new GridLayout();
    let Label1 = new Label();
    let Label2 = new Label();
    Label1.text = \"The Swipable Card plugin\";
    Label1.textWrap=true;
    Label2.text = \"Welcome to {N} we present you\";
    Label2.textWrap=true;
    Grid.addChild(Label1);
    Grid.addChild(Label2);
    // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
    var firstRow = new ItemSpec(1, \"auto\");
    var secondRow = new ItemSpec(1, \"auto\");
    Grid.addRow(firstRow);
    Grid.addRow(secondRow);
    GridLayout.setRow(Label1,0);
    GridLayout.setRow(Label2,1);

    let stack2 = new StackLayout();
    let image = new Image();
    image.src=\"~/images/apple.jpg\"
    image.height=100;
    image.width=100;
    stack2.verticalAlignment = \"middle\";
    stack2.addChild(image);

    let stack3 = new StackLayout();
    let button = new Button();
    button.text=\"Click me!\";
    button.width=100;
    button.textAlignment = \"center\";
    stack3.verticalAlignment = \"middle\";
    stack3.addChild(button);
    this.stackCards = [stack3,stack2,Grid];
  }
  swipeEvent(args:SwipeEvent) {
        if (args.direction === 1) {
                    //right
                    console.log('Swiped to right');
        } else {
                    //left
                    console.log('Swiped to left');
        }
  };   
}
\n

PS: I used this plugin in other application built in Angular, you can check it here:\nhttps://github.com/rkhayyat/SyrianForumFrance

\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
swipeEventfunctionSwipeEventCallback called when the layout is swiped to the right or left and the swipe animation is done. Return args:SwipeEvent:
1- direction (1 if right/2 if left),
2- cardIndex contain the card index
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnDescription
itemsArray<Layout>Array of card's layout, in which we can define the content of each card.
cardHeight (optional)numberCard's height in percentage of their container's height.
cardWidth (optional)numberCard's width in percentage of their container's width.
cardBorderRadius (optional)numberCard's border radius.
cardBorderWidth (optional)numberCard's border's width.
isRandomColor (optional)number1: Set card's colors randomly & automatically.
2: Set card's colors manually.
Default is 1.
\n

NativeBaguette 🥖

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Jean-Baptiste\"Rachid\"triniwiz\"\"BradMartin\"\"JenLooper\"
rhanbrkhayyattriniwizbradmartinjlooper
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-comments":{"name":"nativescript-comments","version":"1.1.9","license":"Apache-2.0","readme":"

Nativescript Comments

\n

\"npm\"\n\"npm\"

\n

Comments box ready for integration inside you'r native script app

\n

\"Sample1\"

\n

Installation

\n\n

add comments.ios.css and comments.android.css css for styling

\n

*Be sure to run a new build after adding plugins to avoid any issues

\n

Usage

\n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:UI=\"nativescript-comments\">
    <UI:Comments  like=\"{{ like }}\" add=\"{{ add }}\" items=\"{{ comments }}\"   />
    </page>
\n

access events

\n
     public like(args) {
        // args.object.toggle(args.to) function increase or decrease the like count inside the comment
        // args.to has the id of the liked item 
        args.object.toggle(args.to);
        console.log(this.comments.getItem(0).isLike);
    }

    public add(args) {
        // args.object.busy(true) show the activity indicator
        // args.object.busy(false) hide the activity indicator
        // args.object.push({}) push new comment to the items 
        let self = this;
        args.object.busy(true)

        // setTimeout is just to emulate server delay time 
        setTimeout(function () {
        args.object.push({ image: \"~/images/icon-50.png\", id: self.random(1000), comment: args.comment, replyTo: args.to, username: \"Demo User\", likes: 0, isLike: false, datetime: Date.now() });
        console.log(self.comments.length);
        args.object.busy(false);
        }, 2000);
    }

    public edit(args) {
        // the edited comment 
        alert(args.comment);
        //the id of the edited comment
        alert(args.id)
    }

        public delete(args) {
        //the id of the deleted comment
        alert(args.id);
    }
\n

you can edit or delete by longPress on the comment that have {editing:true} in the comment object

\n

API

\n

see demo for more details

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
itemsrequiredArray of comment object { image:" image src ", id: "unique identifier of the comment", comment: "comment text ", username: "user name ", likes: " number of how many likes ", isLike: "boolean is the user like this or not ", datetime: "datetime of the comment" }
addfunction(arg){}event on comment added you can access the object to push the comment buy args.object.push($comment-object) and you can get the id of the comment that replyed to by args.to
likefunction(arg){}event on like clicked send with obj.to and you can toggle the like with args.object.toggle(args.to)
scrolltrueenable or disable scrollview inside the comments holder
canCommenttruedisable or enable submission
imagetagthe xml element of the image so you can change it if you need to add cache plugin or something
pluginempty stringplugin include statment like xmlns:IC="nativescript-web-image-cache"
titleCommentsthe title of the comments box
replyTextreplythe reply button text
likeTextlikethe like button text
toTextreplying to :replying to text
sendTextcommentthe comment send button text
fontClassfathe font library class
editingTextediting your commentthe editing help text when you hit edit
xbtnxthe exit edit or reply text can be font icon
textviewfalseboolean flag to make comment field textview or textfield
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nat-test":{"name":"nat-test","version":"1.0.1","license":"MIT","readme":"

Develop a nativescript-angular plugin now

\n

\"Angular\n\"MIT\n\"Dependency

\n\n\n\n\n\n\n\n\n\n\n\n
\"Demo\"
Android and iPhone running the same {N} + Angular plugin.
\n

The seed is setup to allow you to create a nativescript-angular plugin quickly.

\n\n

Get started

\n
    \n
  1. Download a zip of this seed.
    2. \n
  2. cd ... path/to/unzip/folder ...
    3. \n
  3. npm install -g nativescript
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

Changes needed

\n

You will want to change a couple things for your plugin.

\n
    \n
  1. Replace all instances of nativescript-ngx-yourplugin with name of your plugin:
    2. \n
\n\n
    \n
  1. Modify the demo to import your plugin files, etc:
    2. \n
\n\n
    \n
  1. Replace the 'YourPluginModule' with your plugin module name:
    2. \n
\n\n
    \n
  1. If you modified the name of services,components,... or created new ones that you want to export them:
    2. \n
\n\n

Develop Workflow

\n

Make changes to plugin files, then:

\n
npm run demo.ios

// or...

npm run demo.android
\n

Build Plugin

\n

You'll want to run this before publishing.

\n
npm run build
\n

Publishing

\n

packagedev.json should always mirror your package.json for development.\nAfter installing dependencies for your plugin and running your demo, just copy contents of package.json to packagedev.json.

\n

Then to publish:

\n
    \n
  1. Setup packagepublish.json the way you want your plugin published (Bumping correct version and setting the description, author, keywords, repo, main, and typings correctly for instance).
    2. \n
  2. node prep publish (This will set your package.json to be your packagepublish.json).
    3. \n
  3. npm run build (Create a fresh build of your library)
    4. \n
  4. npm publish
    5. \n
\n

Back to development

\n

After publishing, it's a good idea to set your package.json back to development mode before committing your changes. Your packagedev.json should be exactly what your development mode package was before publishing above.

\n
    \n
  1. node prep dev
    2. \n
  2. Continue developing.
    3. \n
\n

Troubleshooting

\n

When preparing your demo if you get the following error message:

\n
Plugin \"nativescript-ngx-yourplugin\" is not installed.
Sending exception report (press Ctrl+C to stop).....
\n

This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-baidu-push-ins":{"name":"nativescript-baidu-push-ins","version":"1.4.9","license":"Apache-2.0","readme":"

Push Baidu Plugin for NativeScript

\n

The code for the Push Plugin for NativeScript.

\n\n\n\n

Installation

\n

In the Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-baidu-push\n
\n

Configuration

\n

Android

\n
\n

See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

\n
\n\n

The plugin will default to version 12.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion:

\n
    // in the root level of /app/App_Resources/Android/app.gradle:
    project.ext {
        firebaseMessagingVersion = \"+\" // OR the version you wish
    }
\n

iOS

\n\n

Usage

\n

Using the plugin in Android

\n

Add code in your view model or component to subscribe and receive messages (don't forget to enter your Firebase Cloud Messaging Sender ID in the options of the register method):

\n

TypeScript

\n
import * as pushPlugin from \"nativescript-baidu-push-ins\";
private pushSettings = {
    senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
    notificationCallbackAndroid: (stringifiedData: String, fcmNotification: any) => {
        const notificationBody = fcmNotification && fcmNotification.getBody();
        this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
    }
};
pushPlugin.register(pushSettings, (token: String) => {
    alert(\"Device registered. Access token: \" + token);;
}, function() { });
\n

Javascript

\n
var pushPlugin = require(\"nativescript-baidu-push-ins\");
var pushSettings = {
        senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
        notificationCallbackAndroid: function (stringifiedData, fcmNotification) {
            var notificationBody = fcmNotification && fcmNotification.getBody();
            _this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
        }
    };
pushPlugin.register(pushSettings, function (token) {
    alert(\"Device registered. Access token: \" + token);
}, function() { });
\n\n

Using the plugin in iOS

\n

Add code in your view model or component to subscribe and receive messages:

\n

TypeScript

\n
import * as pushPlugin from \"nativescript-baidu-push-ins\";
const iosSettings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
            identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
     baiduAPIKey: 'BaiduAPIKey',
    notificationCallbackIOS: (message: any) => {
        alert(\"Message received!\\n\" + JSON.stringify(message));
    }
};

pushPlugin.register(iosSettings, (token: String) => {
    alert(\"Device registered. Access token: \" + token);

    // Register the interactive settings
    if(iosSettings.interactiveSettings) {
        pushPlugin.registerUserNotificationSettings(() => {
            alert('Successfully registered for interactive push.');
        }, (err) => {
            alert('Error registering for interactive push: ' + JSON.stringify(err));
        });
    }
}, (errorMessage: any) => {
    alert(\"Device NOT registered! \" + JSON.stringify(errorMessage));
});

pushPlugin.registerBaiduNotificationSettingCallback(function (result) {
    alert('REGISTER BAIDU PUSH NOTIFICATION SUCCESS:');
}, function (error) {
   alert('REGISTER BAIDU PUSH NOTIFICATION FAILED:');
});
\n

Javascript

\n
var pushPlugin = require(\"nativescript-baidu-push-ins\");
var iosSettings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
            identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
    notificationCallbackIOS: function (data) {
        alert(\"message\", \"\" + JSON.stringify(data));
    }
};

pushPlugin.register(iosSettings, function (data) {
    alert(\"Device registered. Access token\" + data);

    // Register the interactive settings
        if(iosSettings.interactiveSettings) {
            pushPlugin.registerUserNotificationSettings(function() {
                alert('Successfully registered for interactive push.');
            }, function(err) {
                alert('Error registering for interactive push: ' + JSON.stringify(err));
            });
        }
}, function() { });

pushPlugin.registerBaiduNotificationSettingCallback(function (result) {
    alert('REGISTER BAIDU PUSH NOTIFICATION SUCCESS:');
}, function (error) {
   alert('REGISTER BAIDU PUSH NOTIFICATION FAILED:');
});
\n\n

API Reference

\n

Methods

\n

register(options, successCallback, errorCallback) - subscribe the device with Apple/Google push notifications services so the app can receive notifications

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionPlatformTypeDescription
senderIDAndroidStringThe Sender ID for the FCM project. This option is required for Android.
notificationCallbackAndroidAndroidFunctionCallback to invoke, when a push is received on Android.
badgeiOSBooleanEnable setting the badge through Push Notification.
soundiOSBooleanEnable playing a sound.
alertiOSBooleanEnable creating a alert.
clearBadgeiOSBooleanEnable clearing the badge on push registration.
notificationCallbackIOSiOSFunctionCallback to invoke, when a push is received on iOS.
interactiveSettingsiOSObjectInteractive settings for use when registerUserNotificationSettings is used on iOS.
\n

The interactiveSettings object for iOS can contain the following:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
actionsArrayA list of iOS interactive notification actions.
categoriesArrayA list of iOS interactive notification categories.
\n

The actions array from the iOS interactive settings contains:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
identifierStringRequired. String identifier of the action.
titleStringRequired. Title of the button action.
activationModeStringSet to either "foreground" or "background" to launch the app in foreground/background and respond to the action.
destructiveBooleanEnable if the action is destructive. Will change the action color to red instead of the default.
authenticationRequiredBooleanEnable if the device must be unlocked to perform the action.
behaviorStringSet if the action has a different behavior - e.g. text input.
\n

The categories array from the iOS interactive settings contains:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
identifierStringRequired. String identifier of the category.
actionsForDefaultContextArrayRequired. Array of string identifiers of actions.
actionsForMinimalContextArrayRequired. Array of string identifiers of actions.
\n

For more information about iOS interactive notifications, please visit the Apple Developer site

\n
var settings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
        identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
    notificationCallbackIOS: function(message) {
        alert(JSON.stringify(message));
    }
};


pushPlugin.register(settings,
    // Success callback
    function(token){
        // Register the interactive settings
        if(settings.interactiveSettings) {
            pushPlugin.registerUserNotificationSettings(function() {
                alert('Successfully registered for interactive push.');
            }, function(err) {
                alert('Error registering for interactive push: ' + JSON.stringify(err));
            });
        }
    },
    // Error Callback
    function(error){
        alert(error.message);
    }
);
\n

unregister(successCallback, errorCallback, options) - unsubscribe the device so the app stops receiving push notifications. The options object is the same as on the register method

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterPlatformTypeDescription
successCallbackiOSFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
successCallbackAndroidFunctionCalled when app is successfully unsubscribed. Has one string parameter with the result.
errorCallbackAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
optionsAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
\n
pushPlugin.unregister(
    // Success callback
    function(result) {
        alert('Device unregistered successfully');
    },
    // Error Callback
    function(errorMessage) {
        alert(errorMessage);
    },
    // The settings from the registration phase
    settings
);
\n

areNotificationsEnabled(successCallback) - check if push notifications are enabled (iOS only, always returns true on Android)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterPlatformTypeDescription
successCallbackiOS/AndroidFunctionCalled with one boolean parameter containing the result from the notifications enabled check.
\n
pushPlugin.areNotificationsEnabled(function(areEnabled) {
        alert('Are Notifications enabled: ' + areEnabled);
    });
\n

Android only

\n

onMessageReceived(callback) DEPRECATED - register a callback function to execute when receiving a notification. You should set this from the notificationCallbackAndroid registration option instead

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
stringifiedDataStringA string containing JSON data from the notification
fcmNotificationObjectiOS/Android
\n

The fcmNotification object contains the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturns
getBody()String
getBodyLocalizationArgs()String[]
getBodyLocalizationKey()String
getClickAction()String
getColor()String
getIcon()String
getSound()String
getTag()String
getTitle()String
getTitleLocalizationArgs()String[]
getTitleLocalizationKey()String
\n

onTokenRefresh(callback) - register a callback function to execute when the old token is revoked and a new token is obtained. Note that the token is not passed to the callback as an argument. If you need the new token value, you'll need to call register again or add some native code to obtain the token from FCM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
callbackFunctionCalled with no arguments.
\n
pushPlugin.onTokenRefresh(function() {
        alert(\"new token obtained\");
});
\n

iOS only

\n

registerUserNotificationSettings(successCallback, errorCallback) - used to register for interactive push on iOS

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
successCallbackFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
errorCallbackFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
\n

Troubleshooting

\n

In case the application doesn't work as expected. Here are some things you can verify

\n

Troubleshooting issues in Android

\n\n

Troubleshooting issues in iOS

\n\n

Android Configuration for using Firebase Cloud Messaging

\n

The nativescript-baidu-push module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

\n
    \n
  1. \n

    Add the google-services.json file

    \n

    To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

    \n

    Place the file in your app's App_Resources/Android folder

    \n
    2. \n
  2. \n

    Obtain the FCM Server Key (optional)

    \n

    This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

    \n
    3. \n
\n

Receive and Handle Messages from FCM on Android

\n

The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

\n

The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the notificationCallbackAndroid setting when calling the register method of the plugin.

\n

The behavior of the callback in the module follows the behavior of the FCM service.

\n

Handling Data Messages

\n

The notificationCallbackAndroid method of the plugin is called each time a data notification is received.

\n

If the app is stopped or suspended, NO notification is constructed and placed in the tray. Tapping the app icon launches the app and invokes the notificationCallbackAndroid callback where you will receive the notification data.

\n

If the app is active and in foreground, the notificationCallbackAndroid callback is invoked immediately with the notification data (fcmNotification).

\n

Handling Notification Messages

\n

If the app is active and in foreground, it invokes the notificationCallbackAndroid callback with two arguments (stringifiedData, fcmNotification).

\n

If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the notificationCallbackAndroid callback.

\n

Handling Mixed Messages

\n

Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

\n\n

Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

\n
application.on(application.resumeEvent, function(args) {
    if (args.android) {
        var act = args.android;
        var intent = act.getIntent();
        var extras = intent.getExtras();
        if (extras) {
            // for (var key in extras) {
            //     console.log(key + ' -> ' + extras[key]);
            // }
            var msg = extras.get('someKey');
        }
    }
});
\n

Parameters of the notificationCallbackAndroid Callback

\n

Depending on the notification event and payload, the notificationCallbackAndroid callback is invoked with two arguments.

\n\n

Setting Notification Icon and Color

\n

The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray.

\n

Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

\n
<meta-data
    android:name=\"com.google.firebase.messaging.default_notification_icon\"
    android:resource=\"@drawable/ic_stat_ic_notification\" />
<meta-data
    android:name=\"com.google.firebase.messaging.default_notification_color\"
    android:resource=\"@color/colorAccent\" />
\n
\n

For more info visit the Edit the app manifest article.

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-material-core-tabs":{"name":"@nativescript-community/ui-material-core-tabs","version":"7.2.4","license":"Apache-2.0","readme":"

Nativescript Material Core

\n

Core module for all Nativescript material components

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynamsoft-camera-enhancer":{"name":"nativescript-dynamsoft-camera-enhancer","version":"1.1.2","license":"Apache-2.0","readme":"

nativescript-dynamsoft-camera-enhancer

\n

Nativescript plugin for Dynamsoft Camera Enhancer.

\n

We can use it for camera preview, which is the base of building a barcode scanner, a text scanner, a document scanner, etc.

\n

Installation

\n
npm install nativescript-dynamsoft-camera-enhancer
\n

Usage

\n

Add the camera view in the layout:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:dce=\"nativescript-dynamsoft-camera-enhancer\"
    navigatingTo=\"navigatingTo\" class=\"page\">
    <GridLayout rows=\"*, auto, auto\">
        <dce:CameraEnhancer 
        loaded=\"{{ dceLoaded }}\" 
        rowSpan=\"3\" 
        active=\"{{ isActive }}\"
        cameraID=\"{{ desiredCamera }}\"
        torch=\"{{ desiredTorchStatus }}\"></dce:CameraEnhancer>
    </GridLayout>
</Page>
\n

Get the camera enhancer intanse in the code behind:

\n
dce:CameraEnhancer;
dceLoaded(args: EventData) {
  this.dce = <CameraEnhancer>args.object;
}
\n

Methods:

\n
captureFrame(): any;
captureFrameAsBase64(): string;
getAllCameras(): string[];
getSelectedCamera(): string;
getCameraEnhancer(): any;
getResolution(): Resolution;
setResolution(resolution:Resolution): void;
setZoom(factor:number);
getMaxZoomFactor(): number;
open(): void;
close(): void;
\n

Properties:

\n
active:boolean //whether the camera is open
torch:boolean  //whether the torch is on
cameraID:string //the selected camera ID
\n

Interfaces:

\n
export interface Resolution {
  width: number;
  height: number;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-grid-view":{"name":"nativescript-grid-view","version":"5.1.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript GridView widget. The GridView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-grid-view

\n

This command automatically installs the necessary files, as well as stores nativescript-grid-view as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Instance Methods

\n\n

Usage

\n

You need to add xmlns:gv="nativescript-grid-view" to your page tag, and then simply use <gv:GridView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-grid-view\" loaded=\"pageLoaded\">
  <GridLayout>
    <gv:GridView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
      <gv:GridView.itemTemplate>
        <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
          <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
        </GridLayout>
      </gv:GridView.itemTemplate>
    </gv:GridView>
  </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { GridItemEventData } from \"nativescript-grid-view\";

let viewModel: Observable;

export function pageLoaded(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    for (let loop = 0; loop < 200; loop++) {
        items.push({ value: \"test \" + loop.toString() });
    }
    viewModel = new Observable();
    viewModel.set(\"items\", items);

    page.bindingContext = viewModel;
}

export function gridViewItemTap(args: GridItemEventData) {
    console.log(\"tap index \" + args.index.toString());
}

export function gridViewItemLoading(args: GridItemEventData) {
    console.log(\"item loading \" + args.index.toString());
}

export function gridViewLoadMoreItems(args: EventData) {
    console.log(\"load more items\");
}
\n

You can also have multiple templates the same way you add them in the builtin ListView control:

\n
<gv:GridView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
    <gv:GridView.itemTemplates>
        <template key=\"odd\">
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>

        <template key=\"even\">
            <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>
    </gv:GridView.itemTemplates>
</gv:GridView>
\n
export function templateSelector(item: any, index: number, items: any) {
    return index % 2 === 0 ? \"even\" : \"odd\";
}
\n

Usage in Angular

\n

Import GridViewModule in your NgModule:

\n
import { GridViewModule } from 'nativescript-grid-view/angular';

@NgModule({
    //......
    imports: [
        //......
        GridViewModule,
        //......
    ],
    //......
})
\n

Example Usage

\n
// app.module.ts
import { GridViewModule } from \"nativescript-grid-view/angular\";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        GridViewModule,
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }
\n
<!-- my.component.html -->
<GridLayout class=\"page\">
  <GridView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
    <ng-template let-item=\"item\" let-odd=\"odd\">
      <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
      </StackLayout>
    </ng-template>
  </GridView>
</GridLayout>
\n

If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control.

\n
<GridView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
    <ng-template nsTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>
</GridView>
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-grid-view
$ cd nativescript-grid-view
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-barcode-scanning":{"name":"@nativescript/mlkit-barcode-scanning","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-barcode-scanning

\n
npm install @nativescript/mlkit-barcode-scanning
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/fonts":{"name":"@nativescript-community/fonts","version":"1.0.5","license":"MIT","readme":"

Using font icons with NativeScript

\n

The Problem

\n

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

\n\n
.fa {
  font-family: FontAwesome;
}
\n\n
<Label class=\"fa\" text=\"\\uf293\"></Label>
\n

This works but keeping up with unicodes is not fun.

\n

The Solution

\n

With this plugin, you can instead reference the fonticon by the specific classname:

\n
<Label class=\"fas\" text=\"fa-bluetooth\"></Label>
\n

Install

\n
npm install @nativescript-community/fonts --save-dev
\n

Usage

\n

The plugin performs two pieces of processing on your project when enabled at build time:

\n\n

This processing is configured in your webpack.config.js and occurs at build time.

\n

FontAwesome

\n

FontAwesome is distributed as a npm package so we can make use of that to add it to our project.

\n\n
npm i @fortawesome/fontawesome-free --save-dev
\n\n

Material Design Fonts

\n

Material Design Fonts are also available as a npm package.

\n\n

Other fonts

\n

You can also use any other fonts:

\n

An example where we explicitly define the tokens for the font icofont.

\n\n

An example where we are not using icons but want to optimize the font size, Google Monoton.

\n\n

An example where we define the tokens for the font in an scss file, dripicons.

\n\n

icomoon

\n

This is also an example where the definitions for the tokens for the font are in an scss file, IcoMoon.

\n\n

Full Example webpack.config.js

\n
const webpack = require(\"@nativescript/webpack\");
const { addFontsConfigFontAwesome, addFontsConfigMDIFont, 
\tFontAwesomeFontType, addFontsConfigCustom } = require('@nativescript-community/fonts');
module.exports = (env) => {
\twebpack.init(env);

\taddFontsConfigFontAwesome({ 
\t\tfontTypes: [FontAwesomeFontType.solid, 
\t\t\t\t\tFontAwesomeFontType.brands, 
\t\t\t\t\tFontAwesomeFontType.regular],
\t\t stripCharactersFromFont: true });
\t  
\t  addFontsConfigMDIFont({
\t\tstripCharactersFromFont: true,
\t  });
\t  
\t  addFontsConfigCustom({ 
\t\tpathToFont: 'fonts/Monoton-Regular.ttf', 
\t\textraCharacters: 'trash-can', 
\t\tstripCharactersFromFont: true });
\t  
\t  addFontsConfigCustom({
\t\tpathToFont: 'fonts/icofont.ttf',
\t\ttokenPrefix: 'icofont-',
\t\ttokenValues: {
\t\t  trash: 'ee09',
\t\t},
\t\tstripCharactersFromFont: true,
\t  });
\t  
\t  addFontsConfigCustom({ 
\t\tpathToFont: 'fonts/dripicons-v2.ttf', 
\t\ttokenPrefix: 'drip-', 
\t\ttokenScss: 'fonts/dripicons.scss', 
\t\tstripCharactersFromFont: true });

    addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', 
          tokenPrefix: 'icon-', 
          tokenScss: 'fonts/icomoon/variables.scss', 
          tokenScssPrefix:'$icon-',
          stripCharactersFromFont: true });

\treturn webpack.resolveConfig();
};
\n

Usage Notes

\n

In the examples above stripCharactersFromFont is set to true. This ensures tha the unused characters are stripped from the fonts.

\n

For a better development experience you want to set this to false during development, one option is to set it to the value env.production which should be true on release builds.

\n

Credits

\n

Idea came from farfromrefug's post here.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/facebook":{"name":"@nativescript/facebook","version":"2.2.0","license":"Apache-2.0","readme":"

@nativescript/facebook

\n

Installation

\n
npm install @nativescript/facebook
\n

Prerequisites

\n

Android

\n

Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

\n

iOS

\n

Follow step 3 in the Getting Started Guide for Facebook SDK for iOS.

\n

Usage

\n

First of all, you should initialize the LoginManager by calling the init method.

\n
import { LoginManager } from '@nativescript/facebook';

LoginManager.init()
\n

Then to log the user in, use the logInWithPermissions method.\nYou can also use the Login Manager with custom UI to perform Login.

\n
import { LoginManager, AccessToken } from '@nativescript/facebook';

try {
\tconst result = await LoginManager.logInWithPermissions(['public_profile']); // LoginResult
\tconst accessToken = AccessToken.currentAccessToken();
} catch (e) {}
\n

To log the user out, call the logOut method.

\n
LoginManager.logOut()
\n

API

\n

AccessToken

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
appIDstring
dataAccessExpirationDateDatereadonly
dataAccessExpiredbooleanreadonly
declinedPermissionsstring[]readonly
expirationDateDatereadonly
expiredbooleanreadonly
expiredPermissionsstring[]readonly
graphDomainstringreadonly
permissionsstring[]readonly
refreshDateDatereadonly
tokenStringstringreadonly
userIDstringreadonly
currentAccessToken()AccessTokenA static method that returns an access token.
currentAccessTokenIsActivebooleanreadonly
iosFBSDKAccessTokenreadonly. iOS access token.
androidAccessTokenreadonly. Android access token.
\n

LoginResult Class

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
androidLoginManagerreadonly. Native instance for Android.
iosFBSDKLoginManagerreadonly. Native instance for iOS.
grantedPermissionsstring[]readonly
isCancelledbooleanreadonly
tokenAccessTokenreadonly
\n

LoginManager Class

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameType/Return TypeDescription
static init()voidInitializes the LoginManager. You should call this method early in the app lifecycle and the best place for that is the main.ts.
static logInWithPermissions(permissions: string[], context?: any)Promise<LoginResult>Opens the login window in the optionally provided context(a UIViewController instance on iOS and an [Activity](https://developer.android.The permissions parameter indicates the data about the user the app would like to get from Facebook.
static logout()voidLogs out the user.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":426}},"@nativescript-community/xml-ui-core":{"name":"@nativescript-community/xml-ui-core","version":"1.0.0-alpha.3","license":"Apache-2.0","readme":"

@nativescript-community/xml-ui-core

\n

\"npm\"\n\"npm\"

\n

This package contains utilities used by @nativescript-community/xml-ui-compiler.

\n

Installation

\n
npm install @nativescript-community/xml-ui-core
\n

Usage

\n

In your app/main.ts, append the following import:

\n
import '@nativescript-community/xml-ui-core';
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@voicethread/nativescript-custom-rotors":{"name":"@voicethread/nativescript-custom-rotors","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Custom Roters \"apple\"

\n
\n

@voicethread/nativescript-custom-rotors

\n
\n

The nativescript-custom-rotors adds easy to use properties to common {N} views to make them accessible to iOS Accessibility Custom Rotors. Accessibility Custom Rotors provide an elegant solution for screen-reader assisted navigation by associating views from various containers and geographies into a common a11y accessible group. Please see this video from Apple WWDC2020 for more information on iOS Accessibility Custom Rotors

\n
\n

NOTE: this plugin ONLY works on iOS. In android, the plugin functionality is ignored.

\n
\n

Contents

\n\n

Installation

\n
npm install @voicethread/nativescript-custom-rotors
\n

Expanded Classes

\n

ViewBase has been expanded with the following interface:

\n
interface RotorGroupItem {
  /**
   * @property rotorGroup
   * the name of the group that this view belongs to
   */
  rotorGroup: string;
  /**
   * @property rotorOrder
   * order within the rotor group. defaults to -1
   */
  rotorOrder: number;
}
\n

ContentView and BaseLayout have been expanded with the following interface:

\n
interface RotorContainerView {
  /**
   * @property rotorContainer
   * set the view as a RotorContainer
   */
  rotorContainer: boolean;
  /**
   * rotorGroups
   * a map<string,Array<View>> of rotor names and associated views
   */
  rotorGroups: any;
  /**
   * rotorGroupCallback
   * a map<string,Callback> of rotor names and callbacks to execute
   */
  rotorGroupCallbacks: Map<string, Callback>;
  /**
   * @function removeRotorItem
   * removes a view from it's rotor group
   */
  removeRotorItem: (item: ViewBase) => boolean;
  /**
   * @function insertRotorItem
   * inserts an item into a rotor group at a specified index
   */
  insertRotorItem: (item: ViewBase, index?: number) => boolean;
  /**
   * @function addRotorGroup
   * adds a rotor group to a container
   */
  addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
}
\n

Usage

\n

initialize the custom-rotors plugin in\napp.ts:

\n
...
import {initCustomRotors} from 'nativescript-custom-rotors'
initCustomRotors();
...
Application.run(...);
\n

then set a ContentView or a BaseLayout as a rotorContainer:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
...
</Page>
\n

or, in code:

\n
export function navigatingTo(e:NavigatedData):void {
  const page = e.object as Page;
  page.rotorContainer = true;
}
\n

The @nativescript/custom-rotor plugin will traverse the children of the container to create and add elements to specified groups:

\n
...
  <Button text=\"Group1 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
  <Button text=\"Group1 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
  <Button text=\"Group2 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
  <Button text=\"Group2 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
...
\n

Custom elements will also be traversed, so you don't need to specify rotor groups all in one .xml or .ts/.js file.

\n

Advanced Usage

\n

Individual elements can be part of their own rotor group, and custom handling can be provided to the CustomRotor. Consider a widget used to provide a rating for an item (inspired by this tutorial on ios CustomRotors.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
...
<GridLayout id=\"rating-bar\" rows=\"90, *\" columns=\"*,*,*,*,*\" accessible=\"true\" rotorGroup=\"rating\" row=\"1\" col=\"1\">
  <GridLayout class='rating-item' row=\"1\" col=\"0\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"1\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"1\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"2\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"2\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"3\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"3\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"4\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"4\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"5\" />
  </GridLayout>
  <Label class='rating-desc' color=\"blue\" text=\"dial rotor to 'rating' then flick up and down to change the rating\" row=\"0\" col=\"0\" colSpan=\"5\" textWrap=\"true\"/>
</GridLayout>
...
</Page>
\n

The rating rotor group functionality can be handled using something like this:

\n
export function navigatingTo(d: NavigatedData): void {
  const page = d.object as Page;
  page.rotorGroupCallbacks.set('rating', ({ forward }) => {
    incrementOrDecrementRating(page, forward);
  });
}

let rating = 0;
function incrementOrDecrementRating(page: Page, increment: boolean): void {
  rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
  const ratingBar = page.getViewById('rating-bar') as GridLayout;
  for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
    const view = ratingBar.getChildAt(i);
    view.backgroundColor = i < rating ? 'green' : 'transparent';
  }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"test-tns-web-angular-2":{"name":"test-tns-web-angular-2","version":"1.0.0","readme":"

Test Tns Web Angular 2

\n

\"NPM\n\"NPM\n\"Build\n\"Test

\n
\n

Installation

\n
npm install test-tns-web-angular-2 --save
\n

Usage

\n
var testTnsWebAngular2 = require('test-tns-web-angular-2')

testTnsWebAngular2() //=> \"Hello World!\"
\n

License

\n

MIT license

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/geolocation":{"name":"@nativescript/geolocation","version":"8.3.1","license":"Apache-2.0","readme":"

@nativescript/geolocation

\n

Contents

\n\n

Intro

\n

A geolocation plugin to use for getting current location, monitor movement, etc.

\n

Installation

\n

To install the plugin, run the following command in the root of your project.

\n
npm install @nativescript/geolocation
\n

Android permissions requirements

\n

To use geolocation on Android, you need to add the following permissions to your app's AndroidManifest.xml inside the App_Resources/Android/src/main directory:

\n
  <!-- Always include this permission -->
  <!-- This permission is for \"approximate\" location data -->
  <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />

  <!-- Include only if your app benefits from precise location access. -->
  <!-- This permission is for \"precise\" location data -->
  <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />

  <!-- Required only when requesting background location access on
       Android 10 (API level 29) and higher. -->
  <uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" />
\n

More information can be found in the Android docs here.

\n

iOS permissions requirements

\n

If iosAllowsBackgroundLocationUpdates property of the options object is set to true, the following code is required in the App_Resources/iOS/Info.plist file:

\n
<key>UIBackgroundModes</key>
<array>
  <string>location</string>
</array>
\n

Use @nativescript/geolocation

\n

Get current location

\n

Before you call any method that gets the user's location, request for the user's permission by calling the enableLocationRequest method. Once the user has granted the permission, you can call the getCurrentLocation() method, passing it a options object to get the user's current location.

\n
import * as geolocation from '@nativescript/geolocation';
import { CoreTypes } from '@nativescript/core' // used to describe at what accuracy the location should get

geolocation.enableLocationRequest().then(() => {
    
    geolocation.getCurrentLocation({ desiredAccuracy: CoreTypes.Accuracy.high, maximumAge: 5000, timeout: 20000 }).then((currentLocation) => {

      console.log(\"My current latitude: \", currentLocation.latitude)
    })
  })
\n

API

\n

Plugin functions

\n

The plugin provides the following functions for getting current location and more:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
getCurrentLocation(options: Options)Promise<Location>Gets current location applying the specified options (if any). Since version 5.0 of the plugin, it will use requestLocation API for devices using iOS 9.0+. In situation of poor or no GPS signal, but available Wi-Fi it will take 10 sec to return the location.
The options parameter is optional.
watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options?: Options)numberMonitors location change.
watchPermissionStatus(permissionCallback: permissionCallbackType, errorCallback: errorCallbackType)number(iOS-only)Monitors a change in location permission.
clearWatch(watchId: number)voidStops monitoring a change in location. The watchId parameter is returned from the watchLocation() method.
enableLocationRequest(always?: boolean, openSettingsIfLocationHasBeenDenied?: booleanPromise<void> Asks for permissions to use location services. On iOS if always is true, add the following keys to the Info.plist: NSLocationAlwaysAndWhenInUseUsageDescription (iOS 11.0+) OR NSLocationAlwaysUsageDescription (iOS 8.0-10.0) and NSLocationWhenInUseUsageDescription. Read more about request always usage. On Android SDK >= 29, the always parameter set to true requires the ACCESS_BACKGROUND_LOCATION permission to be added to the AndroidManifest.xml. That results in the user getting a system dialog with the option 'allow all the time' option. Read about Android location permissions here and here. If openSettingsIfLocationHasBeenDenied is true and the permission has previously been denied then the Settings app will open so the user can change the location services permission. See the exception to this.
isEnabled(options?: Options)Promise<boolean>Resolves true or false based on the location services availability.
distance(loc1: Location, loc2: Location)number Calculates the distance between two locations. Returns the distance in meters.
getIOSLocationManagerStatus()CLAuthorizationStatusReturns the status of the Location Authorization permission.
\n

Location class

\n

This is a data class that encapsulates the following common properties for a geolocation.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
latitudenumberThe latitude of the geolocation, in degrees.
longitudenumberThe longitude of the geolocation, in degrees.
altitudenumberThe altitude (if available), in meters above sea level.
horizontalAccuracynumberThe horizontal accuracy, in meters.
verticalAccuracynumberThe vertical accuracy, in meters.
speednumberThe speed, in meters/second over ground.
timestampDateThe time at which this location was determined.
\n

Options interface

\n

The following are the properties of the options object that you pass to the geolocation functions of the plugin.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
desiredAccuracyCoreTypes.AccuracyOptional: Specifies if high accuracy or any is required. Defaults to CoreTypes.Accuracy.high which returns the finest location available but use more power than the CoreTypes.Accuracy.any option. Accuracy.any is considered to be about 100 meter accuracy.
updateDistancenumberOptional: Specifies how often to update the location. Update distance filter in meters. Read more in Apple document and/or Google documents
updateTimenumberInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document. Defaults to 1 minute
minimumUpdateTimenumberOptional: Minimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
maximumAgenumberOptional: The maximum age of the location data, in ms.
timeoutnumberOptional: It indicates how long, in ms, to wait for a location. Defaults to 5 minutes.
iosAllowsBackgroundLocationUpdatesbooleanOptional: Indicates whether to allow the application to receive location updates in the background (ignored on Android). Defaults to false. If enabled, the UIBackgroundModes key in Info.plist is required. A. Read more in Apple document
iosPausesLocationUpdatesAutomaticallybooleanIndicates whether to allow the deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
\n

Known issues

\n

openSettingsIfLocationHasBeenDenied on Android API level 30

\n

If the user declines the permission twice during the installation lifetime of the app on Android API level 30 , the user won't be taken to the settings even if the openSettingsIfLocationHasBeenDenied option is true for enableLocationRequest().

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":2064,"lastMonth":0}},"nativescript-multiple-environments-building":{"name":"nativescript-multiple-environments-building","version":"0.8.2","license":"Apache-2.0","readme":"

nativescript-multiple-environments-building

\n

\"NPM\n\"Downloads\"

\n

This Hook aims to provide a better support for building a NativeScript application with multiple environments, such as:

\n\n
\n

Credits to federicorp, the original creator of this amazing idea (via @nativescript-dev/multiple-environments), as well as jitendraP-ashutec who helped add the support to separate env. rule files for iOS and Android (via @nativescript-dev/multiple-environments).

\n
\n

Installation

\n
npm i nativescript-multiple-environments-building --save-dev
\n

How to use?

\n

Add two Env Rules files into the project's root folder, and they will contain the configurations for iOS and Android separately.

\n\n

An example Env Rules file looks like this:

\n
{
    \"version\": \"1.6.6\",
    \"buildNumber\": \"66\",
    \"versionCode\": \"1060666\",
    \"autoVersionCode\": true,
    \"default\": \"staging\",
    \"extraPaths\": [
        \"environments\"
    ],
    \"directCopyRules\": {
        \"Info.plist\": \"App_Resources/iOS/Info.plist\",
    },
    \"appIconPath\": \"environments/app-icon/icon.png\",
    \"envFilesMatchRules\": \"staging|release\",
    \"environments\": [
        {
            \"name\": \"staging\",
            \"appBundleId\": \"org.nativescript.appId.staging\",
            \"matchRules\": \"(.*\\\\.staging\\\\..*)\"
        },
        {
            \"name\": \"release\",
            \"appBundleId\": \"org.nativescript.appId.release\",
            \"matchRules\": \"(.*\\\\.release\\\\..*)\"
        }
    ]
}
\n

With it, using --env.use.ENV_NAME to specify the actual environment to process while {NS} doing the prepare process. For example:

\n
# Debug iOS app with `staging` env. configs.
ns debug ios --env.use.staging

# Build a final release
ns run ios --bundle --env.aot --env.uglify --env.use.release
\n

Environment rules

\n

The Env Rules file currently support the following configurations:

\n\n

Discussions

\n

Usage of directCopyRules

\n

Given the case that the ns prepare process will add all files inside the App_Resources/iOS folder into the Xcode project which will include all env. files for other environments, the rules inside directCopyRules will help conduct the file copy OUTSIDE the App_Resources/iOS folder.

\n

And for Android, since it still can be safe to delete those env. files AFTER the ns prepare process, the deletion process is just simply added to the after-prepare Hook.

\n

In other words, directCopyRules would be probably used on iOS side unless you are still having some other needs for Android.

\n

App Icon Generation

\n

The generation of App Icon is conducted by the built-in {NS} CMD - ns resources generate icons.

\n

By default, if the icon.png file is inside the App_Resources folder for both iOS and Android, the process can help prepare the App Icon files for both iOS and Android. However, the NEW Android OS versions are actually NOT using icon.png to be the App Icon. Instead, it uses a mipmap style (by an xml file to define both foreground and background). Luckily, the new method could be still under the realm of env. based file copying.

\n

Example of ic_launcher.xml file:

\n
<adaptive-icon xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <background android:drawable=\"@color/ic_launcher_background\"/>
    <foreground android:drawable=\"@mipmap/ic_launcher_foreground\"/>
</adaptive-icon>
\n
\n

NOTE: In order to make the ns resources generate icons CMD working, please be sure to NOT delete the default icon.png files from App_Resources folder. Otherwise, the generation process may fail!!!

\n
\n

App Versioning

\n

With the new added related Version Info of the Env Rules file, now you could manage the App Version in the following ways:

\n\n

For buildNumber,

\n\n
\n

NOTES:

\n\n
\n
// Example of adding \"version info\" to `gradle` file
android {
  defaultConfig {
    // Version Information
    versionCode 1060606
    versionName \"1.6.6\"
  }
}
\n

Also, the iOS and Android manage their Version Info separately. In the normal case, if you build the app against both platforms at the same time, the generated Version Code (as well as the buildNumber) should be identical for each release. However, if it does not (due to some unexpected reasons), it should be very easy to fix it by Manually change it to a correct value inside the Env Rules file.

\n
\n

Made with ❤️ for the NativeScript community

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/md5":{"name":"@nativescript-community/md5","version":"1.0.4","license":"Apache-2.0","readme":"\n\n

@nativescript-community/md5

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin for fast MD5 computation for files
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/md5

\n

\n

API

\n

The API documentation for this plugin is available here.

\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@nativescript-community/md5.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-status-bar":{"name":"nativescript-status-bar","version":"1.2.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A simple NativeScript plugin for controlling status bar visibility.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-status-bar

\n

This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

\n

API

\n
// Get reference to the Status Bar plugin module
import statusBar = require(\"nativescript-status-bar\");
\n

For Angular:

\n
// Get reference to the Status Bar plugin module
import * as statusBar from 'nativescript-status-bar'
\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"swtc-brorand":{"name":"swtc-brorand","version":"1.1.1","license":"MIT","readme":"

Brorand

\n

LICENSE

\n

This software is licensed under the MIT License.

\n

Copyright Fedor Indutny, 2014.

\n

Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

\n

The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

\n

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-awesome-loaders":{"name":"nativescript-awesome-loaders","version":"1.2.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-awesome-loaders

\n

#Usage

\n
import {AwesomeLoaders} from 'nativescript-awesome-loaders';
let al = new AwesomeLoaders();
\n

Set Width

\n

al.width = 60

\n

Set Height

\n

al.height = 60

\n

Set Indicator

\n

al.indicator = "Pacman"

\n

Set Indicator Color

\n

al.indicatorColor= "#FFEB3B"

\n

TypeScript

\n
import {AwesomeLoaders} from 'nativescript-awesome-loaders';

 let li = new AwesomeLoaders();
    al.width = 60;
    al.height = 60;
    al.indicator = \"SemiCircleSpin\";
    al.indicatorColor= \"black\";
\n

JavaScript

\n
var AwesomeLoaders = require('nativescript-awesome-loaders').AwesomeLoaders;
 let li = new AwesomeLoaders();
    al.width = 60;
    al.height = 60;
    al.indicator = \"SemiCircleSpin\";
    al.indicatorColor= \"black\";
\n

###Xml markup settings

\n

IMPORTANT: Make sure you include xmlns:al="nativescript-awesome-loaders" on the Page element

\n

e.g\n <al:AwesomeLoaders width="60" height="60" indicator="Pacman" indicatorColor="#FFEB3B" />

\n

##Screenshot

\n

\"ss\"

\n

##Indicators

\n

As seen above in the Screenshot, the indicators are as follows:

\n

Row 1

\n\n

Row 2

\n\n

Row 3

\n\n

Row 4

\n\n

Row 5

\n\n

Row 6

\n\n

Row 7

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-fusion-library":{"name":"nativescript-ngx-fusion-library","version":"0.1.38","license":"Apache 2.0","readme":"

Develop a NativeScript plugin \"Build

\n
\n

This repo is heavily based on @NathanWalker's Plugin Seed. Thanks Nathan!

\n
\n\n\n\n\n

TL;DR

\n

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

\n
    \n
  1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript--yourplugin is the name of your plugin.
    2. \n
  2. cd nativescript-yourplugin/src
    3. \n
  3. npm run postclone
    4. \n
  4. npm run demo.ios or npm run demo.android to run the demo.
    5. \n
  5. In another command prompt/terminal npm run plugin.tscwatch to watch to typescript changes in the plugin and to autmatically apply them in the demo.
    6. \n
\n

Long Description

\n

What is NativeScript plugin seed?

\n

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

\n\n

\"Plugin

\n

Plugin folder structure

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Folder/File nameDescription
demoThe plugin demo source code
demo/testsThe tests for your plugin
srcThe plugin source code
src/platform/androidPlugin Android specific configuration
src/platform/iosPlugin ios specific configuration
src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
\n

Getting started

\n
    \n
  1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript--yourplugin is the name of your plugin..
    2. \n
  2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
    3. \n
  3. Execute npm run postclone to:\n
      \n
    • configure your github username - it will be changed in the package.json for you
      • \n
    • configure your plugin name - all files and classes in the seed will be renamed for you
      • \n
    • stub your plugin README.md file
      • \n
    • create a new repository for your plugin
      • \n
    • npm link your plugin the demo app - this will install the plugin dependencies and will add a sym link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
      • \n
    \n
    4. \n
\n

Now you can continue with the development of your plugin by using the Development setup described below.

\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n
    \n
  1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
    2. \n
  2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
    3. \n
\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the src folder in order to use native APIs:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

\n
    \n
  1. Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
    2. \n
\n

Unittesting

\n

The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API go to src folder and execute one of these commands:

\n
npm run test.ios
npm run test.android
\n

Publish to NPM

\n

When you have everything ready to publish:

\n\n

If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

\n

NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

\n

TravisCI

\n

The plugin structure comes with fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is commited to a branch TravisCI will trigger a build testing the code.

\n

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-magic":{"name":"nativescript-ng2-magic","version":"1.9.0","license":"MIT","readme":"

\"Angular\n\"MIT\n\"Dependency \"devDependency

\n

\"nativescript-ng2-magic\"

\n

Magically drop a NativeScript app into your existing Angular2 web application and reuse all your code.*

\n

You will be adding NativeScript views, but you already knew that.

\n\n

Install

\n
npm i nativescript-ng2-magic --save
\n

Usage

\n
    \n
  1. Use Component from nativescript-ng2-magic instead of @angular/core. Why?
    2. \n
  2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
    3. \n
  3. Run your truly native mobile app with NativeScript!
    4. \n
\n

Example

\n

A sample root component, app.component.ts:

\n
import {Component} from 'nativescript-ng2-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {}
\n

Run for first time!

\n

You will need to have fully completed steps 1 and 2 above.

\n

Run your app in the iOS Simulator with:

\n
npm run start.ios
\n

Run your app in an Android emulator with:

\n
npm run start.android
\n

Welcome to the wonderfully magical world of NativeScript!

\n

How to create NativeScript views

\n

Based on our example above, assume app.component.html looks like this:

\n
<main>
  <div>This is my root component</div>
</main>
\n

You would then create a new file in app.component.tns.html like this:

\n
<StackLayout>
  <Label text=\"This is my root component\"></Label>
</StackLayout>
\n

You can also use platform specific views if desired with the platformSpecific Component metadata:

\n
import {Component} from 'nativescript-ng2-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}
\n

Then you could create separate views for iOS and Android:

\n\n

You can learn more about NativeScript view options here.

\n

You can also install helpful view snippets for VS Code here or Atom Editor here.

\n

You can learn more here about how this setup works and why.

\n

Supported Projects

\n\n

Why different Component?

\n

Component from nativescript-ng2-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

\n

The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

\n

You can see more elaborate use cases of this magic with angular2-seed-advanced.

\n

Special Note About AoT

\n

Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

\n
import { Component } from '@angular/core';

// just comment this out and use Component from 'angular/core'
// import { Component } from 'nativescript-ng2-magic';

@Component({
  // etc.
\n

After doing the above, running AoT build will succeed. :)

\n

The Component from nativescript-ng2-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ng2-magic. Again this temporary inconvenience may be unnecessary in the future.

\n

Requirements

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/systemui":{"name":"@nativescript-community/systemui","version":"1.1.15","license":"MIT","readme":"

NativeScript System UI

\n

A NativeScript plugin to change System UI.

\n

IOS

\n

To show/hide the statusBar you need to have UIViewControllerBasedStatusBarAppearance set to false in your Info.plist

\n

Usage

\n
npm install @nativescript-community/systemui --save
\n

If you are using version ^1.0.0 then we now use mixins

\n
import { installMixins } from '@nativescript-community/systemui';
installMixins();
\n

Then new properties are added to the Page class

\n\n

For versions < 1.0.0

\n

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.

\n

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.

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

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

\n

\"status-bar-light\"

\n

Note The SystemUI 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.

\n

With Vue.js

\n

In your root app.js:

\n
import StatusBarPlugin from '@nativescript-community/systemui/vue';
Vue.use(StatusBarPlugin);
\n

In your component:

\n
<Page class=\"page\" actionBarHidden=\"true\" backgroundSpanUnderStatusBar=\"true\">
      <StatusBar barColor=\"#32475b\" />
      <NavigationBar barColor=\"#32475b\" />
<Page/>
\n

That's is.

\n

Development workflow

\n

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

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tasks":{"name":"nativescript-tasks","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-tasks/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Tasks

\n

A NativeScript module for simply handling background tasks via web workers.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Requirements

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-tasks
\n

inside your app project to install the module.

\n

Example

\n
import Tasks = require(\"nativescript-tasks\");

Tasks.startNew((ctx) => {
                   return 23979 + ctx.state;
               },
               5979)  // 5979 will be stored in 'state'
                      // property of 'ctx' 
     .then((result) => {
               console.log('Result: ' + result.data);  // 29958
               // result.state = 5979
           })
     .catch((result) => {
               console.log('ERROR: ' + result.error);
               // result.state = 5979
            });
\n

Limitations

\n\n

Read the official documentation to get more information.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-iosswitch":{"name":"nativescript-android-iosswitch","version":"1.0.0","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

Nativescript-Android-iOSSwitch

\n

A lightweight iOS switch view style for Android.Feedbacks and PRs are most Welcome.

\n

Demo

\n

|\n---------- |\n\"alt |

\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n
Android
luongvo/iOS-SwitchView
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm i nativescript-android-iosswitch --save

\n

Usage

\n

XML:

\n
<Page 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:AndroidIosSwitch=\"nativescript-android-iosswitch\" loaded=\"pageLoaded\"> 
    <Page.actionBar>
      <ActionBar title=\"Nativescript Android iosSwitch\" />
  </Page.actionBar>
  <StackLayout height=\"150\" width=\"80\">
   
      <AndroidIosSwitch:AndroidIosSwitch id=\"sb\" color=\"red\"/>
      
       <Button text=\"True\"  tap=\"{{ onTrue }}\" />
       <Button text=\"false\"  tap=\"{{ onFalse}}\" />
      
        
  </StackLayout>
</Page>
\n

TS:

\n
import {AndroidIosSwitch} from 'nativescript-android-iosswitch';
private npb: AndroidIosSwitch;
  constructor(mainPage: Page) {
    super();
    this.npb = <AndroidIosSwitch>mainPage.getViewById('sb');

  }
     public onTrue() {
        this.npb.toggleSwitch(true);
    }
  public onFalse() {
        this.npb.setChecked(false);
    }
\n

Methods

\n

isChecked()

\n

/**

\n\n

setChecked(boolean)

\n

/**

\n\n

toggleSwitch(boolean)

\n

/**

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ebs-nativescript-exoplayer":{"name":"ebs-nativescript-exoplayer","version":"5.1.4","license":"Apache-2.0","readme":"

@nstudio/nativescript-exoplayer

\n

NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

\n
npm install @nstudio/nativescript-exoplayer
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Google ExoPlayeriOS AVPlayer
\n

For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

\n

Based on

\n

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

\n

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

\n

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
        <StackLayout>

            <exoplayer:Video id=\"nativeexoplayer\"
            controls=\"true\" finished=\"{{ videoFinished }}\"
            loop=\"true\" autoplay=\"false\" height=\"280\"
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>
\n

NativeScript Angular Usage

\n
// somewhere at top of your component or bootstrap file
import { registerElement } from \"@nativescript/angular\";
import { Video } from '@nstudio/nativescript-exoplayer';
registerElement(\"Video\", () => Video);
\n
  <Video
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\"
      height=\"300\"></Video>
\n

Properties

\n\n

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n\n\n\n

By default, subtitle support is off. Use this flag to turn them on.

\n\n

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

\n\n

Set if the video should start playing as soon as possible or to wait for user interaction.

\n\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n\n

Set to use the native video player's media playback controls.

\n\n

Mutes the native video player.

\n\n

Sets the native video player to loop once playback has finished.

\n\n

If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

\n\n

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

\n

iOS:

\n\n

See here for explanation.

\n\n

Attribute to specify an event callback to execute when the video is ready to play.

\n\n

Attribute to specify an event callback to execute when the video has finished seekToTime.

\n\n

If set to true, currentTimeUpdated callback is possible.

\n\n

Attribute to specify an event callback to execute when the time is updated.

\n

API

\n\n

Android only

\n\n

Breaking Changes

\n\n

ExoPlayer Encryption (Android only)

\n

Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

\n\n
key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
iv =015E42FF678B2B90B743111A396EF850
\n

Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

\n
salt=42D57450DAF116BD
key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
iv =ED07304DF8D0D0AFA2EB9B13D75BD817
\n

Create the Encrypted video file

\n\n

Contributors

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtube-parser":{"name":"nativescript-youtube-parser","version":"2.0.1","license":"MIT","readme":"

NOT MAINTAINED - SHOULD NOT BE USED IN PRODUCTION\nThis is a html-parser, use with caution. Your app could be suspended from appstores.

\n

\"npm\"\n\"npm\"

\n

NativeScript YouTube Parser

\n

A util to extract raw video-URLs and format information from a YouTube-video page. This way you can play YouTube videos in the native video player.\nThe plugin is based on npm package youtube-parser and adapted to the NativeScript framework (removed cli & excess dependencies).\nWorks on iOS and Android.

\n

Installation

\n

Run npm i nativescript-youtube-parser in the ROOT directory of your project.

\n

Usage

\n

getURL(url, format)

\n\n
var youtubeParser = require('nativescript-youtube-parser');

youtubeParser.getURL('https://youtu.be/C_vqnySNhQ0', { quality: 'medium', container: 'mp4' })
    .then(function (urlList) {
        console.log(\"YouTube mp4 video url: \", urlList[0].url);
    }
);
\n

Changelog

\n

2.0.1

\n\n

2.0.0

\n\n

1.1.0

\n\n

1.0.0

\n\n

Author

\n\n

Original Author/Plugin

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/algolia":{"name":"@nativescript-community/algolia","version":"2.0.2","license":"Apache-2.0","readme":"\n\n

@nativescript-community/algolia

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin for Algolia search. This plugin is designed to mirror, as closely as possible, the structure of Algolia’s JavaScript client.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/algolia

\n

\n

Initialize the client

\n

You first need to initialize the client. For that, you will need your Application ID and API Key.\nYou can find both of them on your Algolia account.

\n
import { Algolia } from \"@nativescript-community/algolia\";

const client = new Algolia('APP_ID', 'API_KEY');
const index = client.initIndex('items');
\n

\n

Push Data

\n

Add or replace an existing object in your index with an updated set of attributes.

\n
const contacts = [
    { 
        objectID: \"1234567890\",
        firstname: \"John\", 
        lastname: \"Smith\",
        zip_code: 78787
    },
    { 
        objectID: \"987654321\",
        firstname: \"Billy\", 
        lastname: \"Bob\",
        zip_code: 54321
    },
];

index.addObjects(contacts)
  .then(result => {
      console.log(result);
  })
  .catch(error => {
      console.log(\"ERROR!\", error);
  });
\n

\n

Simple Search

\n

With objects added to your index, you can now utilize the searching capabilities.

\n
index.search(\"bob\")
  .then(content => {
      console.log(content.hits)
  })
  .catch(error => {
      console.log(\"ERROR\", error)
  });
\n

\n

Advanced Search

\n

There is also the ability to pass in search parameters for more advanced searching such as geolocation. See available search parameters here.

\n
index.search(\"\", {
    aroundLatLng: \"38.846693, -104.861354\",
    aroundRadius: 200000 // meters
})
  .then(content => {
      console.log(content.hits);
  })
  .catch(error => {
      console.log(\"ERROR\", error);
  });
\n

\n

Configure

\n

Settings can be customized to tune the search behavior. For example, you can add a custom sort by number of followers to the already great built-in relevance:

\n
index.setSettings({
  customRanking: ['desc(firstname)']
})
  .then(result => {
      console.log(\"Setting saved\", result);
  })
  .catch(error => {
      console.log(\"ERROR\", error);
  });
\n

You can also configure the list of attributes you want to index by order of importance (ex: firstname = most important):

\n

Note: Since the engine is designed to suggest results as you type, you'll generally search by prefix.\nIn this case the order of attributes is very important to decide which hit is the best:

\n
index.setSettings({
  searchableAttributes: [
    'lastname',
    'firstname',
    'company',
    'email',
    'city',
    'address'
  ]
})
  .then(result => {
      console.log(\"Setting saved\", result);
  })
  .catch(error => {
      console.log(\"ERROR\", error);
  });
\n

\n

Breaking Changes in Version 2

\n

Switched to Promise based method calls instead of callbacks.

\n

Before:

\n
index.search('bob', function(content, err) {
  console.log(content.hits);
});
\n

After:

\n
index.search(\"bob\")
  .then(content => {
      console.log(content.hits)
  })
  .catch(error => {
      console.log(\"ERROR\", error)
  });
\n

The method addObjects is now deprecated and has been removed and replaced with saveObjects.

\n

\n

Demos and Development

\n

Setup

\n

To run the demos, you must clone this repo recursively.

\n
git clone https://github.com/@nativescript-community/algolia.git --recursive
\n

Install Dependencies:

\n
npm i # or 'yarn install' or 'pnpm install'
\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build

npm run build.angular # or for Angular
\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ocr":{"name":"nativescript-ocr","version":"1.0.0","license":"MIT","readme":"

NativeScript OCR

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

\n

Optical Character Recognition - powered by Tesseract

\n

Installation

\n
tns plugin add nativescript-ocr
\n

Setup

\n

You'll need to add language files to help Tesseract recognizing text in the images you feed it.

\n

Download version 3.04.00 of the tessdata files here and\nadd your required language to the app/tesseract/tessdata/ folder of your app.

\n

Note that if your language(s) has multiple files (like English: there's 9 files matching eng.*), copy all those files to the folder.

\n

iOS

\n

iOS searches for the tessdata folder in app/App_Resources/iOS, but instead of dulicating the folder\nyou can create a symbolic link:

\n
cd app/App_Resources/iOS
ln -s ../../tesseract/tessdata
\n

API

\n

retrieveText

\n

JavaScript

\n

This is just a basic example using the default settings, look at the TypeScript code below\nfor a more elaborate example.

\n
var OCRPlugin = require(\"nativescript-ocr\");
var ocr = new OCRPlugin.OCR();

ocr.retrieveText({
  image: myImage
}).then(
    function (result) {
      console.log(\"Result: \" + result.text);
    },
    function (error) {
      console.log(\"Error: \" + error);
    }
);
\n

TypeScript

\n

This example shows how to use all possible (but optional) options you can pass into retrieveText:

\n
import { OCR, RetrieveTextResult } from \"nativescript-ocr\";
import { ImageSource } from \"image-source\";

export Class MyOCRClass {
  private ocr: OCR;
  
  constructor() {
    this.ocr = new OCR();
  }

  doRecognize(): void {
    let img: ImageSource = new ImageSource();

    img.fromFile(\"~/samples/scanned.png\").then((success: boolean) => {
      if (success) {
        this.ocr.retrieveText({
          image: img,
          whitelist: \"ABCDEF\",     // you can include only certain characters in the result
          blacklist: \"0123456789\", // .. or you can exclude certain characters from the result
          onProgress: (percentage: number ) => {
            console.log(`Decoding progress: ${percentage}%`);
          }
        }).then(
            (result: RetrieveTextResult) => {
              this.set(HelloWorldModel.BUSY_KEY, false);
              console.log(`Result: ${result.text}`);
            }, (error: string) => {
              console.log(`Error: ${err}`);
            })
      }
    });
  }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@valor/nativescript-barcodescanner":{"name":"@valor/nativescript-barcodescanner","version":"4.1.5","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@comporell/nativescript-accordion":{"name":"@comporell/nativescript-accordion","version":"7.0.4","license":"Apache-2.0","readme":"

NativeScript Accordion

\n

Install

\n

ns plugin add nativescript-accordion

\n

Usage

\n

IMPORTANT: Make sure you include xmlns:accordion="@triniwiz/nativescript-accordion" on the Page element

\n

Data

\n

By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

\n
this.items = [
      {
        title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
        blah: [
          { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
          { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
        ]
      }
    ]
\n
selectedIndexes = [0,3]
\n

Core

\n
<accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
            <accordion:Accordion.headerTemplate>
                <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                    <Label text=\"{{title}}\"/>
                    <Label col=\"1\" text=\"+\"/>
                </GridLayout>
            </accordion:Accordion.headerTemplate>

            <accordion:Accordion.itemHeaderTemplate>
                <StackLayout>
                    <Label text=\"{{text}}\"/>
                </StackLayout>
            </accordion:Accordion.itemHeaderTemplate>
            
            
            <accordion:Accordion.itemContentTemplate>
                            <StackLayout>
                                <Image src=\"{{image}}\"/>
                            </StackLayout>
              </accordion:Accordion.itemContentTemplate>

            <accordion:Accordion.footerTemplate>
                <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                    <Label text=\"{{footer}}\"/>
                    <Label col=\"1\" text=\"-\"/>
                </GridLayout>
            </accordion:Accordion.footerTemplate>

        </accordion:Accordion>
\n

Multi Template

\n
<accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                             items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                             headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                             itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                             itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                             footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
        >

            <Accordion.headerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.headerTemplates>


            <Accordion.itemHeaderTemplates>
                <template key=\"odd\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemHeaderTemplates>

            <Accordion.itemContentTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemContentTemplates>

            <Accordion.footerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.footerTemplates>

        </accordion:Accordion>
\n

Vue

\n

import Vue from 'nativescript-vue'
import Pager from 'nativescript-accordion/vue'

Vue.use(Pager)
\n
<Accordion row=\"1\" for=\"item of items\">

\t\t\t\t<v-template name=\"header\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"title\">
\t\t\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
\t\t\t\t\t</GridLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template name=\"content\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template name=\"footer\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Multi Template

\n
<Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
\t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"header-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"title-even\">
\t\t\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t\t\t<Label :text=\"item.title\"></Label>
\t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t\t\t   :src=\"item.image\"></Image>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>


\t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"content-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
\t\t\t\t\t\t<Label :text=\"item.text\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>

\t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
\t\t\t\t\t</StackLayout>
\t\t\t\t</v-template>
\t\t\t</Accordion>
\n

Angular

\n
import { AccordionModule } from \"nativescript-accordion/angular\";

@NgModule({
    imports: [
        AccordionModule
    ]
    })
\n
<Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
\t\t\t</GridLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
\t\t\t<StackLayout>
\t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Multi Template

\n
<Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
\t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
\t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
\t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
\t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
\t>
\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t   [src]=\"item.image\"></Image>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Config

\n
public selectedIndexes = [0,3]
\n
<Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@eclairab/nativescript-webrtc":{"name":"@eclairab/nativescript-webrtc","version":"1.0.4","license":"ISC","readme":"

NativeScript WebRTC

\n

\"npm\"\n\"npm\"\n\"Build

\n

Uses this for Android and this for iOS.

\n

Installation

\n\n

Android

\n

Add the following to your app.gradle located in app/App_Resources

\n
android {
....
compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
  }
}
\n

How to make a call

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
\n

IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

\n
<webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
<webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
\n

Using Angular ?

\n

Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

\n

Vue

\n
import Vue from 'nativescript-vue';
import WebRTCView from 'nativescript-webrtc-plugin/vue';

Vue.use(WebRTCView);
\n
<WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
<WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
\n

Standard Api :sparkles: New :sparkles:

\n

This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

\n

Basic Api

\n

Caller

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
  const object = args.object;
  const remoteVideoTrack = object.get('remoteVideoTrack');
  remoteStream = object.get('stream');
  const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
  video.videoTrack = remoteVideoTrack;
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type');
  if (type === 'answer') {
    webrtc.handleAnswerReceived({
      sdp: sdp,
      type: type
    });
  } else {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
webrtc.makeOffer();
\n

Callee

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type') as WebRTCSdpType;
  if (type === WebRTCSdpType.ANSWER) {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
// sdp received from the signaling server
webrtc.createAnswerForOfferReceived({
  type: sdp.type,
  sdp: sdp.sdp
});
\n

Deploy by executing

\n

npm publish --access=public --otp=<OTP_FROM_AUTHENTICATOR>

\n

Using demo

\n

Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

\n
    \n
  1. \n

    Start demo-server by running npm i && node app

    \n
    2. \n
  2. \n

    Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

    \n
    3. \n
  3. \n

    Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

    \n
    4. \n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@duicorn/nativescript-sse":{"name":"@duicorn/nativescript-sse","version":"5.0.2","license":"Apache-2.0","readme":"

Nativescript nativescript-sse

\n
npm install @triniwiz/nativescript-sse
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/social-share":{"name":"@nativescript/social-share","version":"2.3.0","license":"Apache-2.0","readme":"

@nativescript/social-share

\n
npm install @nativescript/social-share
\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"@nativescript/social-share\");

// ------------- TypeScript ------------------
import * as SocialShare from \"@nativescript/social-share\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"@nativescript/social-share\");
var imageSourceModule = require(\"@nativescript/core\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"@nativescript/social-share\";
import { ImageSource } from \"@nativescript/core\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\");
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText('I love NativeScript!')
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText('I love NativeScript!', 'How would you like to share this text?')
\n

sharePdf(File pdf, [optional] String subject)

\n

The sharePdf() method expects a File instance:

\n
let pdf = File.fromPath(\"~/path/to/myPdf.pdf\");
SocialShare.sharePdf(pdf)
\n

Like shareImage(), you can optionally pass sharePdf() a second argument to configure the subject on Android:

\n
SocialShare.sharePdf(pdf, 'How would you like to share this text?')
\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript')
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl(
  'https://www.nativescript.org/',
  'Home of NativeScript',
  'How would you like to share this url?'
)
\n

shareViaTwitter(text?: string, url?: string): Promise<void>;

\n

Share text or url via Twitter.

\n
SocialShare.shareViaTwitter('Home of NativeScript', 'https://www.nativescript.org/')
\n

shareViaFacebook(text?: string, url?: string): Promise<void>;

\n

Share url via Facebook. Note that text will usually be suppressed due to Facebook security/abuse prevention, but the url will come through.

\n
SocialShare.shareViaFacebook('Home of NativeScript', 'https://www.nativescript.org/')
\n\n

If you are already using the Facebook Share SDK in your project you likely do not have to add the following.

\n

If you are not using the sdk explicitly in your project yet, add to your app.gradle:

\n
dependencies {
\timplementation 'com.facebook.android:facebook-share:[5,6)'
}
\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
  xmlns:tools=\"http://schemas.android.com/tools\"
  ...>
   \t<application
   \t\tandroid:name=\"com.tns.NativeScriptApplication\"
   \t\t..>

   \t\t<meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>

      <provider android:authorities=\"com.facebook.app.FacebookContentProvider{your-facebook-appid}\"
          android:name=\"com.facebook.FacebookContentProvider\"
          android:exported=\"true\"
          tools:replace=\"android:authorities\"/>

   \t\t<activity
   \t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
   \t\t\t..>
\n\n
<?xml version='1.0' encoding='utf-8' ?>
<resources>
  <string name=\"facebook_app_id\">126035687816994</string>
</resources>
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/svelte-native":{"name":"@akylas/svelte-native","version":"1.0.6","license":"MIT","readme":"

Svelte Native

\n

Create Mobile applications using native widgets via Svelte and NativeScript.

\n

See https://svelte-native.technology for docs and tutorials

\n

\"todo

\n

Features

\n

Svelte-Native includes Svelte specific integrations such as

\n\n

Work In Progress

\n

While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

\n\n

Installation

\n

You can get started developing with this using the latest template

\n
$ npm install -g nativescript
$ tns create myapp --template @nativescript/template-blank-svelte
\n

A fresh Svelte Native app will be found in the myapp folder

\n

Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

\n

Usage

\n

App.svelte

\n
<page>
    <actionBar title=\"Svelte Native\"></actionBar>
    <stackLayout>
        <label text={msg}></label>
        <button text=\"Change\" on:tap=\"{toggle}\"></button>
    </stackLayout>
</page>

<script>
  export let msg = 'Hello World!'
  const toggle = () => {
      msg = \"Hi from svelte\"
  }
</script>
\n

Main.ts

\n
import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: \"Hi from launcher\"});
\n

Examples

\n

Svelte Native HackerNews

\n

Simple HackerNews client in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-hackernews for the repo.

\n

\"HackerNews

\n

Svelte Native Grocery

\n

Grocery app example in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-grocery for the repo.

\n

\"Grocery

\n

Svelte Native Realworld

\n

Realworld implementation app in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-realworld for the repo.

\n

\"Realworld

\n

Credits

\n

The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-persistent-bottomsheet":{"name":"@nativescript-community/ui-persistent-bottomsheet","version":"0.0.29","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-persistent-bottomsheet

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
\n \n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-persistent-bottomsheet

\n

\n

Configuration

\n

For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

\n
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
\n

\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
bottomSheetundefinedViewView containing the content for the bottomsheet
gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
stepIndex0numberthe index of current step (mutable)
steps[70]number[]the different available steps
backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
install()voidInstall gestures
\n

\n

Usage in Angular

\n

Import the module into your project.

\n
import { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";

@NgModule({
    imports: [
        PBSModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }
\n

Then in your component add the following:

\n
<BottomSheet>
    <StackLayout backgroundColor=\"white\">
      <Label text=\"This is the main content\"></Label>
    </StackLayout>
    <GridLayout bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\"></Label>
    </GridLayout>

   
</BottomSheet>
\n

For a more complete example, look in the demo-ng directory.

\n

\n

Usage in Vue

\n

Register the plugin in your app.js.

\n
import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);
\n

Add this at the top of your webpack config file:

\n
const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');

NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {
    model: {
        prop: 'stepIndex',
        event: 'stepIndexChange'
    }
});
\n

Then in your component add the following:

\n
<BottomSheet>
    <StackLayout backgroundColor=\"white\">
      <Label text=\"This is the main content\" />
    </StackLayout>
    <GridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\" />
    </GridLayout>

</BottomSheet>
\n

For a more complete example, look in the demo-vue directory.

\n

\n

Usage in Svelte

\n

Register the plugin in your app.ts.

\n
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();
\n

Then in your component, add the following:

\n
<bottomsheet>
    <stacklayout  backgroundColor=\"white\">
      <Label text=\"This is the main content\" />
    </stacklayout>
    <gridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\" />
    </gridlayout>

</bottomsheet>
\n

For a more complete example, look in the demo-svelte directory.

\n

\n

Usage in React

\n

Register the plugin in your app.ts.

\n
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();
\n

Then in your component, add the following:

\n
import { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"
\n
<BottomSheet>
  <stackLayout backgroundColor=\"white\">
    <label text=\"This is the main content\" />
  </stackLayout>
  <gridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\">
    <label text=\"This is the side drawer content\" />
  </gridLayout>

</BottomSheet>
\n

For a more complete example, look in the demo-react directory.

\n

\n

Demos

\n

This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
$ cd ui-drawer
$ npm run i
$ npm run setup
$ npm run build && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android
\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ripple":{"name":"nativescript-ripple","version":"4.0.3","license":"Apache-2.0","readme":"

Nativescript-Ripple

\n

This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, as well as CSS styles.

\n

Installation

\n
tns plugin add @edusperoni/nativescript-ripple
\n

Usage

\n

This will only work on Android Lollipop 5.0 or later and any version of iOS.

\n

XML

\n

ENSURE TO BIND A TAP LISTENER TO THE CHILD ELEMENT, OR THIS WON'T WORK ON ANDROID

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\" 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:RL=\"@edusperoni/nativescript-ripple\">
    <ActionBar class=\"action-bar\"><Label class=\"action-bar-title\" text=\"Home\"></Label></ActionBar>
    <ScrollView>
        <StackLayout>
            <RL:Ripple rippleColor=\"#d50000\">
                <Label text=\"Red Ripples!!!\" class=\"message\" textWrap=\"true\" tap=\"dummy\" />
            </RL:Ripple>

            <RL:Ripple rippleColor=\"#fff000\">
                <Image src=\"~/home/images/batman.png\" margin=\"10\" stretch=\"aspectFit\" tap=\"dummy\"/>
            </RL:Ripple>

            <RL:Ripple>
                <Label text=\"Default Ripple\" class=\"message\" textWrap=\"true\" tap=\"dummy\"/>
            </RL:Ripple>

            <RL:Ripple rippleColor=\"#fff\">
                <GridLayout backgroundColor=\"#FF4081\" borderRadius=\"30\" height=\"60\" width=\"60\" tap=\"dummy\">
                    <Label text=\"B\" fontSize=\"30\" color=\"#fff\" verticalAlignment=\"center\" horizontalAlignment=\"center\" textWrap=\"true\"/>
                </GridLayout>
            </RL:Ripple>

            <RL:Ripple rippleColor=\"#c8c8c8\">
                <Label class=\"label-button\" text=\"Lighter Ripple\" textWrap=\"true\" tap=\"dummy\"/>
            </RL:Ripple>

            <RL:Ripple rippleColor=\"#f5f5f5\">
                <Label text=\"Possibilities\" color=\"#fff\" padding=\"10\" textWrap=\"true\" tap=\"tapEvent\" class=\"dark-button\"/>
            </RL:Ripple>

        </StackLayout>
    </ScrollView>
</Page>
\n

Ripple Options

\n

rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".

\n

rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.

\n

rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).

\n

rippleEnabled can be set to "false" (rippleEnabled="false") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).

\n

Angular

\n

Import the NgRippleModule

\n

If you're using other modules that change the background (like https://github.com/Especializa/nativescript-ng-shadow), ensure to import it LAST, otherwise the Ripple background will be overwritten.

\n
import { NgRippleModule } from '@edusperoni/nativescript-ripple/angular';

@NgModule({
    imports: [
        NgRippleModule,
        // ...
    ],
    // ...
})
export class MyModule { }
\n

Use it in the templates:

\n

ENSURE TO BIND A TAP LISTENER, OR THIS WON'T WORK ON ANDROID

\n

<Label ripple text="my label text" (tap)="tapfn()"></Label>

\n
<StackLayout ripple rippleColor=\"#00ff00\" style=\"padding: 30; border-radius: 10;\" (tap)=\"tapfn()\">
<Label text=\"this is inside the layout!\"></Label>
</StackLayout>
\n

Implementation details

\n

On Android, if the view does not have a background, we assign a transparent one. Otherwise, turning the screen off and then on again makes the background the same as the mask color (black).

\n

Ripple Options

\n

rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".

\n

rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.

\n

rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).

\n

ripple can be set to "off" (ripple="off") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).

\n

Known Issues

\n

No Ripple on Android

\n

If your Ripple is not working on Android, try the following:

\n
    \n
  1. Verify the view you're applying the Ripple to has a tap event
    2. \n
  2. If the view is a Text-like view (Buttons, Labels, etc), there is a bug that prevents any foreground to be applied to it when textWrap is not true and textAlignment is center or right. There are many fixes (only one is needed):\n
      \n
    1. Wrap the View in another layout (like a GridLayout)
      2. \n
    2. Change the rippleLayer to background
      3. \n
    3. Use textWrap="true"
      4. \n
    4. Disable HorizontallyScrolling for your View (yourLabel.android.setHorizontallyScrolling(false);). Warning: this is set to true every time textAlignment changes
      5. \n
    \n
    3. \n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/doctor":{"name":"@nativescript/doctor","version":"2.0.11","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@comporell/nativescript-sms-receiver":{"name":"@comporell/nativescript-sms-receiver","version":"1.0.6","license":"Apache-2.0","readme":"

nativescript-sms-receiver

\n

This is simple library for receiving sms in android with new SMS Retriever API.

\n

Requirements

\n

Minimum sdk is 21.

\n

Installation

\n
tns plugin add nativescript-sms-receiver
\n

Usage

\n

Step 1. Register SMSBroadcastReceiver in manifest file

\n

Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

\n
<receiver android:name=\"com.pravinkumarputta.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
\t<intent-filter>
\t\t<action android:name=\"com.google.gms.auth.api.phone.SMS_RETRIEVED\"/>
\t</intent-filter>
</receiver>
\n

Step 2. Add googlePlayServicesVersion to before-plugins

\n

Add below code to {your-app-module}/App_Resources/Android/before-plugins.gradle

\n
project.ext {
  googlePlayServicesVersion = \"17.+\" 
}
\n

Step 3. Import SmsReceiver

\n
import { SmsReceiver } from 'nativescript-sms-receiver';
\n

Step 4. Instantiate SmsReceiver

\n

Call this method once before starting SMS listener

\n
SmsReceiver.getInstance();
\n

Note: Call above method only after page loaded.

\n

Step 5. Start SMS listening

\n
// register Sms Listener to get SMS callbacks
SmsReceiver.getInstance().registerListeners(
    function () {
        // onSMSReceiverStarted
        ...
    }.bind(this),
    function (exception) {
        // onSMSReceiverFailed
        ...
    }.bind(this),
    function (message) {
        // onSMSReceived
        ...
            // handle sms here
        ...

        // deregister Sms Listener to avoid invalid operations
        SmsReceiver.getInstance().deregisterListeners();
    }.bind(this),
    function () {
        // onSMSReceiverTimeOut
        ...
    }.bind(this)
);

// start sms receiver for single message
SmsReceiver.getInstance().startReceiver();
\n

Construct a verification message

\n

The verification message that you will send to the user's device. This message must:

\n\n

Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

\n
<#> Your ExampleApp code is: 123ABC78
FA+9qCX9VSu
\n

(For more information visit here)

\n

Generating 11-character hash string for your app

\n

After instantiating SMSReceiver access hash string using:

\n
SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
\n

Request for phone number saved in your device

\n
SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
    // phoneNumber is null if no number is selected.
    ...
})
\n

Used libraries

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-filters":{"name":"nativescript-image-filters","version":"4.0.0","license":"MIT","readme":"

\"Build\n\"npm\"\n\"GitHub

\n

NativeScript-Image-Filters

\n

Nativescript plugin for native image filters.

\n

Sample

\n

\"Demo\"

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

NativeScript Version 7+:\ntns plugin add nativescript-image-filters

\n

NativeScript Verion prior to 7:\ntns plugin add nativescript-image-filters@3.0.0

\n

Usage

\n

JS:

\n
import { Frame } from '@nativescript/core/ui/frame';
import { ImageFilters } from 'nativescript-image-filters';

const filters = new ImageFilters();

public effectOne() {
  const pic = Frame.topmost().currentPage.getViewById('myPicture');

      filters.invert(pic).then((result) => {

      // set the pic imageSource equal to the new imageSource
      pic.imageSource = result;

    }).catch((err) => {
      console.log('applyFilter ERROR: ' + err);
    });
}
\n

IMPORTANT NOTE

\n

Not all methods have been tested. The code needs to be cleaned up to reduce duplication in methods. The methods also need to be 1:1 for common methods. Right now not all iOS & Android methods are named correctly for the image filter. Pull requests are very welcome to improve the API for this plugin.

\n

API

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-appium":{"name":"nativescript-dev-appium","version":"6.1.3","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/iqkeyboardmanager":{"name":"@nativescript/iqkeyboardmanager","version":"2.1.1","license":"Apache-2.0","readme":"

@nativescript/iqkeyboardmanager

\n

NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

\n

\"Example

\n
npm install @nativescript/iqkeyboardmanager
\n

Usage

\n

For any view which contains an input you want the keyboard manager to auto handle, just ensure the root/top node of the view is wrapped in a ScrollView as that will ensure keyboard manager can auto pan it properly, for example:

\n\n
<GridLayout>
  <TextField></TextField>
<GridLayout>
\n\n
<ScrollView>
  <GridLayout>
    <TextField></TextField>
  <GridLayout>
</ScrollView>
\n

Other than that, IQKeyboardManager takes care of all initialization when your app starts up by default.

\n

Advanced usage

\n

Grouping related textfields (previous / next buttons)

\n

If your UI layout has sibling text fields, then IQKeyboardManager is able to automatically\nadd previous / next buttons to the accessory bar which the user can use to jump back and forth.\nSee those < and > buttons in the video above.

\n

In case those fields were not direct siblings, until version 1.3.0 of this plugin, you had no way\nto force the previous / next buttons to appear. However, now you can:

\n

NativeScript /w XML usage

\n

Note in the example below that the two <TextField> controls are not siblings (both have parent <StackLayout> containers). Because of this, IQKeyboardManager will not automatically provide an optimized keyboard by default.

\n

However, if you surround the controls with this plugin's <PreviousNextView> control, as the example below shows, you will continue to get an optimized keyboard as expected.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
  <ScrollView>
    <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
      <StackLayout>
          <TextField hint=\"Email\"/>
          <TextField hint=\"Password\"/>
      </StackLayout>
    </IQKeyboardManager:PreviousNextView>
  </ScrollView>
</Page>
\n

NativeScript /w Angular usage

\n

In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the PreviousNextView element:

\n
import { registerElement } from '@nativescript/angular';
import { PreviousNextView } from '@nativescript/iqkeyboardmanager';
registerElement('PreviousNextView', () => PreviousNextView);
\n

Then in the view, use that element like this (again, we went nuts with the <StackLayout>s:

\n
<ScrollView>
\t<PreviousNextView
\t\t><!-- add this 'wrapper' to enable those previous / next buttons -->
\t\t<StackLayout>
\t\t\t\t<TextField hint=\"Email\"></TextField>
\t\t\t\t<TextField hint=\"Password\"></TextField>
\t\t</StackLayout>
\t</PreviousNextView>
</ScrollView>
\n

NativeScript /w Vue usage

\n

Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

\n
Vue.registerElement('PreviousNextView', () => require('@nativescript/iqkeyboardmanager').PreviousNextView);
\n

Adding a placeholder/hint on a TextView's accessory bar

\n

Looking at the gif above you may notice when focusing the Email address and password fields,\nthe placeholder/hint of those TextFields is shown in the accessory bar above the keyboard.

\n

But when you use a TextView instead of a TextField, the placeholder is not shown because\nof an iOS limitation. You can work around this limitation by using the TextViewWithHint\nprovided by this plugin. So whenever you want to use a TextView with a placeholder,\nuse TextViewWithHint instead.

\n

NativeScript /w XML usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"@nativescript/iqkeyboardmanager\">
  <ScrollView>
    <StackLayout>
      <TextView hint=\"Not working TextView hint\"/>
      <IQKeyboardManager:TextViewWithHint hint=\"Working TextView hint 🤪\"/>
    </StackLayout>
  </ScrollView>
</Page>
\n

NativeScript /w Angular usage

\n

In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the TextViewWithHint element:

\n
import { registerElement } from '@nativescript/angular';
import { TextViewWithHint } from '@nativescript/iqkeyboardmanager';
registerElement('TextViewWithHint', () => TextViewWithHint);
\n

Then in the view, use that element like this:

\n
<StackLayout>
\t<TextView hint=\"Not working TextView hint\"></TextView>
\t<TextViewWithHint hint=\"Working TextView hint 🤪\"></TextViewWithHint>
</StackLayout>
\n

NativeScript /w Vue usage

\n

Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

\n
Vue.registerElement('TextViewWithHint', () => require('@nativescript/iqkeyboardmanager').TextViewWithHint);
\n

Tweaking the appearance and behavior

\n

Start by adding the following two paths into your app’s references.d.ts file. (See this repo’s demo app for a specific example.)

\n
/// <reference path=\"./node_modules/@nativescript/types/index.d.ts\" />
/// <reference path=\"./node_modules/@nativescript/iqkeyboardmanager/index.d.ts\" />
\n
\n

NOTE: You might also need to npm install --save-dev @nativescript/types to bring in NativeScript’s TypeScript definitions for native iOS development.

\n
\n

Next, initialize an instance of IQKeyboardManager with the following line of code.

\n
const iqKeyboard = IQKeyboardManager.sharedManager();
\n

You now have the full IQKeyboardManager APIs available for you to use. For example you could use the following code to switch to a dark keyboard.

\n
const iqKeyboard = IQKeyboardManager.sharedManager();
iqKeyboard.overrideKeyboardAppearance = true;
iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;
\n

For more examples of what's possible, run the demo app (shown in the gif below) and check out the app's main-view-model.ts file.

\n\n

Multi-factor one-time code auto-fill

\n

While the following is not a feature specific to IQKeyboardManager, you are here because you want the best keyboard experience for your NativeScript app and this may be helpful to know about.

\n

iOS has a feature where a text field's QuickType search suggestion bar can suggest one-time code values for multi-factor authentication that were texted to your device.

\n

If the field is specially-identified as a one-time code field, the suggestion will appear for about 3 minutes after being received, and the user simply has to tap the suggestion to fill in the value—no short term memorization or copy/paste gestures required. Examples of message formats are:

\n\n

To implement this functionality in your own app, first declare UITextContentTypeOneTimeCode near your component imports:

\n
declare var UITextContentTypeOneTimeCode;
\n

Then, set the field's ios.textContentType property:

\n
// This code assumes this.page exists as a reference to the current Page.
const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
if (mfaCodeField !== null && mfaCodeField.ios) {
\tmfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
}
\n

There are other textContentType values you might want to use. You can read more about the property in this article.

\n

Documentation

\n

For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

\n

Maintainers

\n

For maintainer’s of this plugin’s source code: when the IQKeyboardManager Podfile updates, you should generate new typings for for this plugin to reflect those changes.

\n

To do so, execute these commands.

\n
cd demo
TNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios
TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios
\n

Next, locate IQKeyboardManager’s generated typings file in the demo/typings folder and override the IQKeyboardManager.d.ts file in this repo’s root.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-cli":{"name":"nativescript-angular-cli","version":"0.1.9","license":"Apache-2.0","readme":"

nativescript-angular-cli

\n

NativeScript CLI command extensions to add some of the Angular CLI commands.

\n

Installation

\n

Just execute tns extension install nativescript-angular-cli

\n

The package will be installed to:

\n\n
\n

NOTE: You need NativeScript CLI 3.0.0 or later. You can install latest version by executing npm i -g nativescript.

\n
\n

Usage

\n

To generate a component, run:

\n\n

To create a component inside a module, run:

\n\n

To create a module, run:

\n\n

To create a service, run:

\n\n

TeamMaestro Shareable Components/Modules generators

\n

To generate a shareable module run:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-confettiview":{"name":"nativescript-confettiview","version":"3.0.3","license":"MIT","readme":"

NativeScript ConfettiView Plugin

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin to create an animated confetti view on iOS and Android.

\n

Getting Started

\n\n
import {Observable} from 'data/observable';
import {ConfettiView} from 'nativescript-confettiview';

export class HelloWorldModel extends Observable {

  private confettiView: any;

  constructor() {
    super();
    this.confettiView = new ConfettiView();
    this.confettiView.startConfetti();
  }

  public stopConfetti() {
    this.confettiView.stopConfetti();
  }

  public startConfetti() {
    this.confettiView.startConfetti();
  }

}
\n

Note: On first run, you may see a console log regarding an incorrect local file path. Let the install finish and you will notice the package.json will reflect your local file path to the plugin.

\n

Available Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Call SignatureDefault
intensity(number)0.5
colors(array)UIColor[]
startConfetti()
stopConfetti()
\n

Example

\n

\"Image\"

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-grid-template":{"name":"nativescript-grid-template","version":"1.0.1","license":"ISC","readme":"

NativeScript Grid Template

\n

This little helper allows you to use NativeScript GridLayout with CSS grid-template-areas values.

\n

Example usage with Svelte Native (config adapted from https://www.cssgridplayground.com/):

\n
<script>
  import gridTemplateAreas from \"nativescript-grid-template\";
  const areas = gridTemplateAreas(`
    header header header
    sidebar main aside
    sidebar footer footer
  `);
</script>

<gridLayout rows=\"*, 5*, *\" columns=\"*, 5*, 2*\" orientation=\"vertical\">
  <label text=\"header\" {...areas.header} />
  <label text=\"sidebar\" {...areas.sidebar} />
  <label text=\"main\" {...areas.main} />
  <label text=\"aside\" {...areas.aside} />
  <label text=\"footer\" {...areas.footer} />
</gridLayout>
\n

This is only tested briefly. For invalid inputs, like this one:

\n
a a a
a b b
a b c
\n

behaviour is undefined. MRs adding validation are welcome!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/extendedinfo":{"name":"@nativescript-community/extendedinfo","version":"1.3.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Plugin to get diverse device infos. This plugin caches results to make it faster.

\n
function isSimulator(): boolean;
function getAppId(): Promise<string>;
function getAppIdSync(): string;
function getVersionName(): Promise<string>;
function getVersionNameSync(): string;
function getAppName(): Promise<string>;
function getAppNameSync(): string;
function getBuildNumber(): Promise<number>;
function getBuildNumberSync(): number;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-document-picker":{"name":"@nativescript-community/ui-document-picker","version":"1.1.13","license":"Apache-2.0","readme":"\n\n

@nativescript-community/ui-document-picker

\n

\n\t\t\"Downloads\n\"NPM\n\t

\n

\n A NativeScript plugin that allows you to select files from the device.
\n \n

\n
\n

\n

Table of Contents

\n\n

\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/ui-document-picker

\n

\n

Configuration

\n

Add any other additional configuration instructions here.

\n

\n

API

\n

There is one function exported:

\n
export interface FilePickerOptions {
    extensions: string[];
    multipleSelection?: boolean;
    pickerMode?: number; //iOS only
}

export function openFilePicker(params: FilePickerOptions): Promise<{ files: string[]; ios?: NSURL; android?: android.net.Uri }>;
\n

Vue

\n

Examples

\n\n

\n

Demos and Development

\n

Repo Setup

\n

The repo uses submodules. If you did not clone with --recursive then you need to call

\n
git submodule update --init
\n

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

\n

To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

\n

Interactive Menu:

\n

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

\n

Build

\n
npm run build.all
\n

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

\n

Demos

\n
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
\n

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

\n

\n

Contributing

\n

Update repo

\n

You can update the repo files quite easily

\n

First update the submodules

\n
npm run update
\n

Then commit the changes\nThen update common files

\n
npm run sync
\n

Then you can run yarn|pnpm, commit changed files if any

\n

Update readme

\n
npm run readme
\n

Update doc

\n
npm run doc
\n

Publish

\n

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

\n
npm run publish
\n

modifying submodules

\n

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

\n
[url \"ssh://git@github.com/\"]
\tpushInsteadOf = https://github.com/
\n

\n

Questions

\n

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-vue-nami":{"name":"ns-vue-nami","version":"0.1.0-alpha.3","license":"MIT","readme":"

ns-vue-nami \"CircleCI\"

\n

Router companion for Nativescript-Vue 2.0's Manual Routing.

\n

Yep, that's her, Nami from One Piece. Why? Coz she's a navigator.

\n

Installation

\n

npm

\n

npm install ns-vue-nami

\n

yarn

\n

yarn add ns-vue-nami

\n

Recommended Implementation

\n

Create a router folder with an index.js file within your app folder.

\n
app
|- components
|- router
   |- index.js
\n

index.js

\n
import Vue from 'nativescript-vue';
import NsVueNami from 'ns-vue-nami';
import login from '~/components/login';
import dashboard from '~/components/dashboard';
import isAuthenticated from 'some-authentication-module';

Vue.use(NsVueNami);

const vm = new Vue();

vm.$nami.authGuard((next) => {
  if(isAuthenticated) {
    next();
  } else {
    next('login');
  }
});

// register all routes here.
vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      noAuth: true,
      entry: !isAuthenticated
    },
    {
      name: 'dashboard',
      component: dashboard,
      entry: isAuthenticated
    }
  ]
});
\n

main.js

\n

Just invoke the router in your main.js.

\n
import entry from './router';

new Vue({
  store,
  render: h => h('frame', [h(entry)])
}).$start();
\n

Sample Usage

\n

From the template

\n
<button @tap=\"$nami.navigate('foo')\">Go to foo</button>
\n

From script

\n
export default {
  methods: {
    someFunc() {
      this.$nami.navigate('bar');
    }
  }
}
\n

API

\n

.init()

\n
\n

Sets all the routable components across the whole app.\nReturns the entry component to be used in main.js as frame entry.

\n
\n

Router properties:

\n
    \n
  1. name: String - The component name of your choice.
    2. \n
  2. component: Vue component - The vue component.
    3. \n
  3. noAuth: Boolean: default - false - The component will NOT require authentication if set to true.
    4. \n
  4. entry: Boolean - Set a particular component as entry point.
    5. \n
\n
import login from '~/components/login';
import dashboard from '~/components/dashboard';

vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      entry: true
    },
    {
      name: 'dashboard',
      component: dashboard
    }
  ]
})
\n

.authGuard()

\n
\n

Will decide whether the component is routable or not based on authentication status.

\n
\n
import Vue from 'nativescript-vue';
import NsVueNami from '../plugins/ns-vue-nami';

import login from '~/components/login';
import dashboard from '~/components/dashboard';

// Dummy authentication status.
const isAuthenticated = true;

Vue.use(NsVueNami);

const vm = new Vue();

vm.$nami.authGuard((next) => {
  if(isAuthenticated) {
    next();
  } else {
    next('login');
  }
});

export default vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      noAuth: true,
      entry: !isAuthenticated // login will be the entry if isAuthenticated is false
    },
    {
      name: 'dashboard',
      component: dashboard,
      entry: isAuthenticated // dashboard will be the entry if isAuthenticated is true
    }
  ]
});
\n

.register()

\n
\n

Adds a new route to the list of routes on the fly.

\n
\n
import cat from '~/components/cat';

vm.$nami.register({name: 'cat', component: cat});
\n

.navigate()

\n
// Basic
this.$nami.navigate('cat-component');

// With props
this.$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'});
\n
<button @tap=\"$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'})\">View Cat</button>
\n

.modal()

\n
\n

Just like .navigate() but shows the component on a modal.

\n
\n
// Basic
this.$nami.modal('cat-component');

// With props
this.$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'});
\n
<button @tap=\"$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'})\">View Cat in a Modal</button>
\n

.back()

\n
\n

Goes back to the previous component.

\n
\n
this.$nami.back();
\n
<button @tap=\"$nami.back()\">Go back</button>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@kefah/nativescript-google-maps":{"name":"@kefah/nativescript-google-maps","version":"1.0.7","license":"Apache-2.0","readme":"

NativeScript plugin for the Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

===

\n
\n

This project is a fork from dapriett/nativescript-google-maps-sdk I've created it beaucse of the owner doesn't mantain it often.

\n
\n
\n

This version include the new maps Renderer for android that Google Maps just annonce it

\n
\n

\"NPM

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling:

\n
tns plugin add @kefah/nativescript-google-maps
\n

Setup

\n

Demo

\n

Please clone this plugin demo and go to tools/assets/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml and change Your_KEY by your real google maps key.

\n

Then run npm start and choose apps.demo-angular.android for Angular or whatever your technologie...

\n

Configure API Key for Android

\n

Nativescript < 4

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
\n

Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

Nativescript 4+

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) { 
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
xmlns:lm=\"@kefah/nativescript-google-maps\" navigatingTo=\"navigatingTo\"  loaded=\"pageLoaded\" class=\"page\">
    <Page.actionBar>
        <ActionBar title=\"nativescript-google-maps\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>
    <GridLayout>
        <lm:GoogleMaps
        latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\"
\t\t\tzoom=\"{{ zoom }}\" minZoom=\"{{ minZoom }}\" maxZoom=\"{{ maxZoom }}\"
\t\t\ttilt=\"{{ tilt }}\" bearing=\"{{ bearing }}\"
\t\t\tmapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
\t\t\ti-padding=\"50,50,50,50\" padding=\"{{ padding }}\"
\t\t\tmapReady=\"onMapReady\"
\t\t\tcoordinateTapped=\"onCoordinateTapped\"
\t\t\tmarkerSelect=\"onMarkerEvent\"
\t\t\tmarkerBeginDragging=\"onMarkerEvent\" markerEndDragging=\"onMarkerEvent\" markerDrag=\"onMarkerEvent\"
\t\t\tmarkerInfoWindowTapped=\"onMarkerEvent\" markerInfoWindowClosed=\"onMarkerEvent\"
\t\t\tcameraChanged=\"onCameraChanged\"
\t\t\tcameraMove=\"onCameraMove\"
\t\t\tindoorBuildingFocused=\"onIndoorBuildingFocused\"
\t\t\tindoorLevelActivated=\"onIndoorLevelActivated\">
        </lm:GoogleMaps>
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

\n

Basic Example

\n
//  /app/main-page.js
import { Observable, EventData, Page, Color, Application } from '@nativescript/core';
import { DemoSharedNativescriptGoogleMaps } from '@demo/shared';
import { Bounds, Circle, GoogleMaps, Marker, Polygon, Polyline, Position } from '@kefah/nativescript-google-maps';
import * as permissions from \"nativescript-permissions\";
let mapView = null;

let vmModule: DemoModel;
let style = require('./map-style.json');

export function navigatingTo(args: EventData) {
    requestPermissions()
\tconst page = <Page>args.object;
\tpage.bindingContext = new DemoModel();
    vmModule = page.bindingContext;
}

export function onMapReady(args) {
    mapView = args.object;

    console.log(\"onMapReady\");
    mapView.settings.compassEnabled = true;
    mapView.settings.myLocationButtonEnabled = true;

    console.log(\"Setting a marker...\");
    let marker = new Marker();
    marker.position = Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.color = \"green\";
    marker.userData = {index: 1};
    marker.draggable = true;
    mapView.addMarker(marker);
}
\n

Custom Info Windows (Beta)

\n

To use custom marker info windows, define a template in your view like so:

\n
<!-- /app/main-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
xmlns:lm=\"@kefah/nativescript-google-maps\" navigatingTo=\"navigatingTo\"  loaded=\"pageLoaded\" class=\"page\">
    <Page.actionBar>
        <ActionBar title=\"nativescript-google-maps\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>
    <GridLayout>
        <lm:GoogleMaps
        latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\"
\t\t\tzoom=\"{{ zoom }}\" minZoom=\"{{ minZoom }}\" maxZoom=\"{{ maxZoom }}\"
\t\t\ttilt=\"{{ tilt }}\" bearing=\"{{ bearing }}\"
\t\t\tmapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
\t\t\ti-padding=\"50,50,50,50\" padding=\"{{ padding }}\"
\t\t\tmapReady=\"onMapReady\"
\t\t\tcoordinateTapped=\"onCoordinateTapped\"
\t\t\tmarkerSelect=\"onMarkerEvent\"
\t\t\tmarkerBeginDragging=\"onMarkerEvent\" markerEndDragging=\"onMarkerEvent\" markerDrag=\"onMarkerEvent\"
\t\t\tmarkerInfoWindowTapped=\"onMarkerEvent\" markerInfoWindowClosed=\"onMarkerEvent\"
\t\t\tcameraChanged=\"onCameraChanged\"
\t\t\tcameraMove=\"onCameraMove\"
\t\t\tindoorBuildingFocused=\"onIndoorBuildingFocused\"
\t\t\tindoorLevelActivated=\"onIndoorLevelActivated\">
            <lm:GoogleMaps.infoWindowTemplate>
                <StackLayout orientation=\"vertical\" width=\"200\" >
                    <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                    <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                    <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                    <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                </StackLayout>
            </lm:GoogleMaps.infoWindowTemplate>
        </lm:GoogleMaps>
    </GridLayout>
</Page>
\n

...and set the infoWindowTemplate property like so:

\n
var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';
\n

This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

\n

** Known issue: remote images fail to display in iOS info windows (local images work fine)

\n

Usage with Angular

\n

See Angular demo code included here

\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mdk-alert":{"name":"nativescript-mdk-alert","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-mdk-alert

\n
npm install nativescript-mdk-alert
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache-it":{"name":"nativescript-image-cache-it","version":"6.3.6","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

Image-Cache-It

\n

Glide - Android

\n

SDWebImage - IOS

\n

Install

\n

NativeScript 6.5x

\n\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Usage

\n
import { ImageCacheIt } from 'nativescript-image-cache-it';
// **new** call in your app.ts/ main.ts/ app.js to enable image-cache to hook into the device's lowmemory events
ImageCacheIt.enableAutoMM();
\n

Set image url to load.

\n
load = image;
\n

Set placeholder while images are downloading.

\n
placeHolder = '~/assets/images/ph.png';
\n

Set placeholder for images are that failed to download.

\n
errorHolder = '~/assets/images/broken.png';
\n

Set decoded image size.

\n
decodedWidth = '300';
decodedHeight = '300';
\n

Stretch

\n
stretch = \"aspectFit\" // (optional) aspectFit || aspectFill || fill || none
\n

Prefetch

\n
import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.fetchItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();
\n

Delete item from cache

\n
import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.deleteItem('https://source.unsplash.com/random').then().catch();
\n

Get item from cache

\n
import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.getItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();
\n

e.g

\n
import { ImageCacheIt } from 'nativescript-image-cache-it';
let cache = new ImageCacheIt();
cache.src = image;
cache.placeHolder = '~/assets/images/broken.png';
cache.errorHolder = '~/assets/images/ph.png';
cache.decodedWidth = '300';
cache.decodedHeight = '300';
cache.filter = 'blur(10px);';
cache.stretch = 'aspectFit';
return cache;
\n

Xml markup settings

\n
decodedWidth=\"300\"; <!-- (optional) -->
decodedHeight=\"300\"; <!-- (optional) -->
placeHolder=\"~/assets/images/ph.png\" <!-- (optional) -->
errorHolder=\"~/assets/images/broken.png\"  <!-- (optional) -->
stretch = \"aspectFit\" <!-- (optional) -->
src= \"http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg\" <!-- (required) -->
\n

IMPORTANT: Make sure you include xmlns:i="nativescript-image-cache-it" on the Page element

\n

e.g

\n
<i:ImageCacheIt stretch=\"aspectFit\"  resize=\"300,300\" placeHolder=\"~/assets/images/ph.png\" errorHolder=\"~/assets/images/broken.png\" src=\"http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg\"/>
\n

Angular

\n
import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';

@NgModule({
    imports: [
    TNSImageCacheItModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Screenshots

\n

Repeater

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ImageImageCacheIt
\"image_repeater\"\"imagecacheit_repeater\"
\n

ListView

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ImageImageCacheIt
\"image_listview\"\"imagecacheit_listview\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/camera":{"name":"@nativescript/camera","version":"5.0.15","license":"Apache-2.0","readme":"

@nativescript/camera

\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n
npm install @nativescript/camera --save
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
isAvailable()Is the device camera available to use.
\n

CameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultPlatformDescription
width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
modalPresentationStyle0iOSSet a custom UIModalPresentationStyle (Defaults to UIModalPresentationStyle.FullScreen)
\n
\n

Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

\n
\n

Usage

\n

Requesting permissions

\n

Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

\n
import { requestPermissions } from '@nativescript/camera';

requestPermissions().then(
    function success() {
        // permission request accepted or already granted
        // ... call camera.takePicture here ...
    },
    function failure() {
        // permission request rejected
        // ... tell the user ...
    }
);
\n
\n

Note: (for Android) Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

\n
\n
\n

Note: (for iOS) If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

\n
\n
<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n

Example 1: Require camera module in the application

\n
// JavaScript
const camera = require(\"@nativescript/camera\");
\n
// TypeScript
import * as camera from \"@nativescript/camera\";
\n

Then you are ready to use it:

\n

Example 2: How to take a picture and to receive image asset

\n
// JavaScript
const { Image } = require(\"@nativescript/core\");

camera.takePicture()
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"@nativescript/core\";

camera.takePicture()
    .then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
// JavaScript

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"@nativescript/core\";

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Save a picture

\n

To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

\n
import { ImageSource, knownFolders, path } from '@nativescript/core';

const source = new ImageSource();

source.fromAsset(imageAsset)
    .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName: string = \"test.jpg\";
        const filePath: string = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

        if (saved) {
            console.log(\"Gallery: \" + this._dataItem.picture_url);
            console.log(\"Saved: \" + filePath);
            console.log(\"Image saved successfully!\");
        }
    });
\n

This could be used to create thumbnails for quick display within your application.

\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
const isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-directions":{"name":"nativescript-directions","version":"1.4.0","license":"MIT","readme":"

NativeScript Directions plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-directions
\n

Usage

\n

Demo app (XML + TypeScript)

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

\n\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

API

\n

available

\n

Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

\n
JavaScript
\n
// require the plugin
var Directions = require(\"nativescript-directions\").Directions;

// instantiate the plugin
var directions = new Directions();

directions.available().then(
  function(avail) {
    console.log(avail ? \"Yes\" : \"No\");
  }
);
\n
TypeScript
\n
// require the plugin
import { Directions } from \"nativescript-directions\";

// instantiate the plugin
let directions = new Directions();

directions.available().then(avail => {
    console.log(avail ? \"Yes\" : \"No\");
});
\n

navigate

\n

This function opens the native Maps app with a predefined from and to address.

\n

If you don't pass from the current location of the user will be used.

\n

If an address is specified then lat and lng will be ignored.

\n

If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

\n

Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

\n
JavaScript
\n
directions.navigate({
  from: { // optional, default 'current location'
    lat: 52.215987,
    lng: 5.282764
  },
  to: { // either pass in a single object or an Array (see the TypeScript example below)
    address: \"Hof der Kolommen 34, Amersfoort, Netherlands\"
  }
  // for platform-specific options, see the TypeScript example below.
}).then(
  function() {
    console.log(\"Maps app launched.\");
  },
  function(error) {
    console.log(error);
  }
);
\n
TypeScript
\n
directions.navigate({
  from: { // optional, default 'current location'
    lat: 52.215987,
    lng: 5.282764
  },
  to: [{ // if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
    address: \"Hof der Kolommen 34, Amersfoort, Netherlands\",
  },
  {
    address: \"Aak 98, Wieringerwerf, Netherlands\"
  }],
  type: \"walking\", // optional, can be: driving, transit, bicycling or walking
  ios: {
    preferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
    allowGoogleMapsWeb: true // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
  },
  android: {
    newTask: true // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
  }
}).then(() => {
    console.log(\"Maps app launched.\");
}, error => {
    console.log(error);
});
\n

Future work

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bored-rudolph":{"name":"nativescript-bored-rudolph","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-bored-rudolph/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Bored-Rudolph :recycle:

\n

NativeScript plugin for a custom hidden game inside a pull-to-refresh layout.

\n

Demo

\n

\"Demo\"

\n

Native Library

\n

Bored Rudolph

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

tns plugin add nativescript-bored-rudolph

\n

Usage

\n

XML

\n
<page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:BR=\"nativescript-bored-rudolph\" loaded=\"pageLoaded\">
  <ActionBar title=\"Bored Rudolph\" backgroundColor=\"#BF4066\" color=\"#fff\" />
  <stack-layout>
    <BR:BoredRudolph refresh=\"{{ stopRefresh }}\" id=\"rudolph\">
      <list-view items=\"{{ users }}\">
        <list-view.itemTemplate>
          <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
        </list-view.itemTemplate>
      </list-view>
    </BR:BoredRudolph>
  </stack-layout>
</page>
\n

TS

\n

  public stopRefresh(args: any) {
    // Load more data here and then set 'refreshing = false' to end the refresh
    let boredRudolph: BoredRudolph = args.object;
    boredRudolph.refreshing = false;
  }
\n

Attributes

\n

refresh : function optional - this event is triggered when you set the BoredRudoplh refresh property equal to false.

\n

API

\n

refreshing

\n

Property. Notifies the widget that the refresh state has changed.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"router-vue-native":{"name":"router-vue-native","version":"2.1.0","license":"Apache-2.0","readme":"

NativeScript Vue Router

\n

\"NPM \"Blazing \"Code \"npm \"install

\n

nativescript-vue-router-extended

\n

NativeScript Vue Router brings easier routing handling to mobile apps, with an API compatibility with web version of Vue Router.

\n

Please file an issue or make a PR if you spot any problems or you have any further requests regarding the functionality.

\n

Table of Contents

\n\n

Features

\n\n

Prerequisites / Requirements

\n

Nativescript 7.1+ is required for the plugin to run properly. It might be working on previous NS6 although the plugin is no longer officially supported for NativeScript 6.

\n

Installation

\n
ns plugin add router-vue-native

or

npm install router-vue-native

or

yarn add router-vue-native
\n

\"NPM\"

\n

Usage & Examples

\n

To use this plugin you need to import it and initialize the router using createRouter() function. Global and per component Vue-Router hooks and guards are supported.

\n

Vue 3 example

\n

Add your router to vue app

\n
// app.ts

import { createApp } from 'nativescript-vue';
import App from './App.vue';
import {router} from \"~/plugins/router\";
const app = createApp(App);
app.use(router)
app.start();
\n

Create router

\n
// /plugins/router.ts

import {createRouter} from \"router-vue-native\";
import Home from \"~/views/Home.vue\";
import Login from \"~/views/Login.vue\";

const routes = [
    {
        path: \"/\",
        component: Home,
    },
    {
        path: \"/login\",
        component: Login,
    }
];

const router = createRouter(
    {routes},
);

export {
    router
}
\n

Define the default path of your application

\n
// App.vue
<template>
  <RouterView defaultRoute=\"/login\"></RouterView>
</template>

// OR

<script setup lang=\"ts\">
const getDefaultRouteExample = () => {
  if (isLoginUser) {
    return \"/login\"
  } else {
    return \"/\"
  }
}
</script>
<template>
  <RouterView :defaultRoute=\"getDefaultRouteExample\"></RouterView>
</template>
\n

Use on setup template

\n
<script lang=\"ts\" setup>
import {useRouter} from \"router-vue-native\";

// get router
const router = useRouter();

const onNavigete = () => {
  // navigate
  router.push(\"/your_path\")
}

</script>
\n

Vue 2 and full options

\n
import Vue from \"nativescript-vue\";
import { createRouter } from \"nativescript-vue-router-extended\";

// Initialize Example Routes
import Home from \"./pages/Home.vue\";
import Login from \"./pages/Login.vue\";

const routes = [
  {
    path: \"/\",
    component: Home,

    // Optional
    meta: {
      isVertical: true,
      // Example actions to dispatch automatically when page is visited
      // Remember that you need to implement actions in your Vuex store
      store: {
        // Call action to hide navigation buttons
        showNavigationButtons: false,

        // Call \"showMovies\" action in \"categories\" module with payload \"all\"
        \"categories/showMovies\": \"all\",

        // Call action without payload
        showNavigationButtons: null,
      },
    },
    {
        path: \"/login\",
        component: Login,
    }

    // Optional, per route guards are supported
    // More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
    beforeEnter: (to, from) => {
      if (to.props.passUser) {
         // Continue navigation
         return true;
      }

      // Reject the navigation
      return false;
    },
  },
];

// Initialize Router
// Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settings
const router = createRouter(
  { routes },
  {
    // Optional settings below

    // Set first page to redirect to when there's no page to redirect back to
    routeBackFallbackPath: \"/login\",

    // Do something straight before navigation or adjust NS routing settings
    routeToCallback: (to, options) => {
      // For example, change page navigation transition for the vertical on iOS
      if (to.meta.isVertical) {
        options.transition = {
          name: \"fade\",
        };
      }
    },

    // Do something straight before navigation or adjust NS routing settings
    routeBackCallback: (_to, options) => {
      // Do something...
    },

    // Set a custom logger (console.log by default)
    logger: console.log,

    // Set custom frame, by default it's taken from @nativescript/core/ui/frame
    frame: Frame,
  }
);

// Register a global guard (optional)
// You can also use global router.beforeResolve guard and router.afterEach hook
router.beforeEach((to) => {
  // For example, verify per route access rules
  if (!canAccessRoute(to)) {
    return false;
  }

  return true;
});

// From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:
this.$routeTo(\"/movies\", {
  // Clear History is a NativeScript setting
  clearHistory: true,
  
  // Route inside of custom Frame
  frame: \"myFrameId\",

  // Pass props to the page
  props: {
    movieId: 12,
  },
});
\n

New hooks for pages

\n

You can use hooks directly on particular pages. It is discouraged to use them inside of mixins or components for the time being. Example below:

\n
<template>
    <Page>
    </Page>
</template>

<script>

export default {
    name: 'movies',

    beforeRouteEnter(to, from, next) {
        // Do something before to enter to the route
        next((vm) => {
            // Do something once navigation is done
            // Instead of `this`, use `vm`
        });
    },

    beforeRouteLeave() {
        // Do something before to leave the route
        // You can use `this` inside of this hook
    },

    beforeRouteUpdate() {
        // Do something before to leave the route
        // before redirecting to another route with same path
        // You can use `this` inside of this hook
    },

    mounted() {
       // Output current route object with name, path etc.
       console.log(this.$route);
    },
};
</script>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NS EventMapped asDescription
navigatingFrombeforeRouteLeaveBefore user leaves the route
navigatingTobeforeRouteEnterBefore user enters a route
-beforeRouteUpdateBefore route is changed but view remains the same. This can happen when path is exactly the same but you change e.g. passed prop to the route. Please refer to Vue-Router docs for more details.
navigatedTobeforeRouteEnterTo trigger it properly you need to access component instance. You can use next(vm => ...) callback within beforeRouteEnter(). Please check Vue-Router docs for more details.
navigatedFrom-This event is tricky to control for developers. There is no exact mapping of it in the router. For store state cleanup use build-in meta dispatcher instead. For component state you could opt for using beforeRouteLeave().
\n

TypeScript Support

\n

If you need a TS support and it's not detected automatically in your project for some reason, you can use typings/shims.vue.d.ts to bring proper support in .vue files. You can specify it in your shims.vue.d.ts file (attention! Please ensure that path is relative to your node_modules directory):

\n
/// <reference path=\"./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts\" />
\n

API Differences to Web

\n

Vue Router compatibility

\n

This plugin aims for compatibility with Vue Router 3+ and Vue Router 4+. Both should be easily supported. Please refer to Vue Router Docs for more information.

\n

DOM & related hooks

\n

There are some limitations like lack of DOM accessibility and related hooks and guards.

\n

RouterLink Component

\n

There's a lack of component due to performance reasons.

\n

Passing props to pages

\n

All props are passed automatically to components. Therefore you don't need to use props: true in your routes list.

\n

Meta Dispatcher

\n

An additional option that allows you to dispatch actions to Vuex store directly from routes list using meta.store object. To utilize it you may need to define Vue.prototype.$store = store; after to register your Vue store.

\n

License

\n

Apache License Version 2.0, January 2004

\n

Troubleshooting

\n

Please file an issue. You can use the template but it is not required. Just simply write what is your issue so we can try to reproduce and fix it.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-object-detection":{"name":"@nativescript/mlkit-object-detection","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-object-detection

\n
npm install @nativescript/mlkit-object-detection
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bottom-navigation":{"name":"nativescript-bottom-navigation","version":"2.0.5","license":"Apache-2.0","readme":"

Nativescript Material Bottom Navigation Bar

\n

Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.

\n

\"npm\" \"npm\" \"Build

\n
\n

IMPORTANT: This package will be deprecated, this is the last release on this repository, the component will be moved to nativescript-material-components

\n
\n\"iOS\"\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Usage with Javascript
    3. \n
  3. Usage with Angular
    4. \n
  4. Usage with Vue
    5. \n
  5. Css Styling
    6. \n
  6. API
    7. \n
\n

Prerequisites / Requirements

\n

You need the version of NS6 or later to use this plugin.

\n

Installation

\n
tns plugin add nativescript-bottom-navigation
\n

if you want to use the plugin with NS5 and above use the version 1.5.1

\n
tns plugin add nativescript-bottom-navigation@1.5.1
\n

BREAKING CHANGES

\n\n

NEW FEATURES

\n\n

Usage

\n

Before start using the plugin you need to add the icons for android & iOS in your App_Resources\u001d directory.

\n

XML

\n

You can set the tabs using the tabs property

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"nativescript-bottom-navigation\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          tabs=\"{{ tabs }}\"
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        ></mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n
import { EventData } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
import {
  BottomNavigationTab,
  TabSelectedEventData,
} from 'nativescript-bottom-navigation';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  page.bindingContext = {
    tabs: [
      new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
      new BottomNavigationTab({
        title: 'Second',
        icon: 'res://ic_view_list',
        isSelectable: false,
      }),
      new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }),
    ],
  };
}

export function tabSelected(args: TabSelectedEventData) {
  console.log('tab selected ' + args.newIndex);
}
\n

or you can add the tabs directly in your xml view

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"nativescript-bottom-navigation\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        >
          <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
          <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
          <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
        </mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n

Angular

\n

First you need to include the NativeScriptBottomNavigationBarModule in your app.module.ts\u001b`

\n
import { NativeScriptBottomNavigationBarModule} from \"nativescript-bottom-navigation/angular\";

@NgModule({
    imports: [
        NativeScriptBottomNavigationBarModule
    ],
    ...
})
\n
<GridLayout rows=\"*, auto\">
  <StackLayout row=\"0\">
    <label text=\"content\"></label>
  </StackLayout>
  <BottomNavigationBar
    [tabs]=\"tabs\"
    activeColor=\"red\"
    inactiveColor=\"yellow\"
    backgroundColor=\"black\"
    (tabSelected)=\"onBottomNavigationTabSelected($event)\"
    (tabPressed)=\"onBottomNavigationTabPressed($event)\"
    row=\"1\"
  ></BottomNavigationBar>
</GridLayout>
\n

or you can declare the BottomNavigationTab in your html directly

\n
<GridLayout rows=\"*, auto\">
  <StackLayout row=\"0\">
    <label text=\"content\"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor=\"red\"
    inactiveColor=\"yellow\"
    backgroundColor=\"black\"
    (tabSelected)=\"onBottomNavigationTabSelected($event)\"
    (tabPressed)=\"onBottomNavigationTabPressed($event)\"
    row=\"1\"
  >
    <BottomNavigationTab
      title=\"First\"
      icon=\"res://ic_home\"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title=\"Second\"
      icon=\"res://ic_view_list\"
      [isSelectable]=\"false\"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title=\"Third\"
      icon=\"res://ic_menu\"
    ></BottomNavigationTab>
  </BottomNavigationBar>
</GridLayout>
\n

Vue

\n

If you want to use this plugin with Vue, do this in your app.js or main.js:

\n
import BottomNavigationBar from 'nativescript-bottom-navigation/vue';

Vue.use(BottomNavigationBar);
\n

This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

\n
<GridLayout rows=\"*, auto\">
  <StackLayout row=\"0\">
    <label text=\"content\"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor=\"red\"
    inactiveColor=\"yellow\"
    backgroundColor=\"black\"
    @tabSelected=\"onBottomNavigationTabSelected\"
    row=\"1\"
  >
    <BottomNavigationTab title=\"First\" icon=\"ic_home\" />
    <BottomNavigationTab
      title=\"Second\"
      icon=\"ic_view_list\"
      isSelectable=\"false\"
    />
    <BottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
  </BottomNavigationBar>
</GridLayout>
\n

You can find more information of how to use nativescript plugins with Vue Here!

\n

CSS Styling

\n

You can also use your css file to set or change the activeColor\u001d, inactiveColor & backgroundColor of the Bottom Navigation Bar.

\n
.botom-nav {
  active-color: green;
  inactive-color: black;
  background-color: blue;
}
\n

API

\n
    \n
  1. BottomNavigationBar
    2. \n
  2. BottomNavigationTab
    3. \n
\n\n

Bottom Navigation Bar

\n

Properties (bindable)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
backgroundColorfalse"white"StringColor of the BottomNavigation background
\n

Properties (internal)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
selectedTabIndex0NumberIndex of the selected tab
titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColor"black"StringColor of the BottomNavigationTab when it's selected
inactiveColor"gray"StringColor of the BottomNavigationTab when it's not selected
backgroundColor"white"StringColor of the BottomNavigation background
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
selectTab(index: number)voidSelect a tab programmatically
showBadge(index: number, value?: number)voidShow a badge for an specific tab
\n

Bottom Navigation Tab

\n

Properties (bindable)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
titletruenullstringTitle of the tab
icontruenullstringIcon of the tab
isSelectablefalsetruebooleanDetermine if the tab can be selected or not
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-checkbox-spms":{"name":"nativescript-checkbox-spms","version":"2.0.6","license":"Apache-2.0","readme":"

@nstudio/nativescript-checkbox

\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n
npm install @nstudio/nativescript-checkbox
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Usage

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
import { Frame } from '@nativescript/core';

public toggleCheck() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
Vue.registerElement(
  'CheckBox',
  () => CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sms-inbox":{"name":"nativescript-sms-inbox","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/jgithaiga/nativescript-sms-inbox/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Sms Inbox

\n

A NativeScript plugin to read text messages on android phone inbox using undocumented android api.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-sms-inbox
\n

Android

\n

To read sms inbox in the phone without user interaction on Android your app must request permission. The following must be added to your app's AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.READ_SMS\" />
\n

Usage

\n

To use the phone module you must first require() it from your project's node_modules directory:

\n
var inbox = require( \"nativescript-sms-inbox\" );
\n

After you have a reference to the module you can then call the available methods.

\n

Methods

\n

getInboxes: fetch all text message in the inbox

\n
Parameters
\n\n

For example, the code below gets the last 10 smses from the device inbox:

\n
// my-page.js
var inbox = require( \"nativescript-sms-inbox\" );
inbox.getInboxes({ max: 10 }).then(function(res) {
    console.log(JSON.stringify(res));
}, function(err) {
    console.log(\"Error: \" + err);
});
\n

getInboxesFromNumber: Get all text messages in the sms inbox sent by provided fromNumber

\n
Parameters
\n\n

For example, the code below gets the last 10 smses from the device inbox sent by the provided fromNumber:

\n
// my-page.js
var inbox = require( \"nativescript-sms-inbox\" );
inbox.getInboxesFromNumber(\"0712345678\", { max: 10 }).then(function(res) {
    console.log(JSON.stringify(res));
}, function(err) {
    console.log(\"Error: \" + err);
});
\n

TypeScript example

\n

import * as TNSInbox from 'nativescript-sms-inbox';

// Get the last 10 inbox messages
public getInboxMessages() {    
    TNSInbox.getInboxes({ max: 10 }).then((res) => {
        console.log(JSON.stringify(res));
    }, (err) => {
        console.log('Error: ' + err);
    });
}

// Get the last 10 inbox messages sent by the provided fromNumber
public getInboxMessagesFromNumber(fromNumber: string) { //fromNumber = \"0712345678\"
    TNSInbox.getInboxesFromNumber(fromNumber, { max: 10 }).then((res) => {
        console.log(JSON.stringify(res));
    }, (err) => {
        console.log('Error: ' + err);
    });
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-xcode":{"name":"nativescript-dev-xcode","version":"0.5.0","license":"Apache-2.0","readme":"\n

nativescript-dev-xcode

\n\n

\"Build

\n

Parser utility for xcodeproj project files

\n

Allows you to edit xcodeproject files and write them back out.

\n

Forked from: apache/cordova-node-xcode

\n

Example

\n
// API is a bit wonky right now
var xcode = require('xcode'),
    fs = require('fs'),
    projectPath = 'myproject.xcodeproj/project.pbxproj',
    myProj = xcode.project(projectPath);

// parsing is async, in a different process
myProj.parse(function (err) {
    myProj.addHeaderFile('foo.h');
    myProj.addSourceFile('foo.m');
    myProj.addFramework('FooKit.framework');
   
    fs.writeFileSync(projectPath, myProj.writeSync());
    console.log('new project written');
});
\n

Working on the parser

\n

If there's a problem parsing, you will want to edit the grammar under\nlib/parser/pbxproj.pegjs. You can test it online with the PEGjs online thingy\nat https://pegjs.org/online - I have had some mixed results though.

\n

Tests under the test/parser directory will compile the parser from the\ngrammar. Other tests will use the prebuilt parser (lib/parser/pbxproj.js).

\n

To rebuild the parser js file after editing the grammar, run:

\n
npm run pegjs\n
\n

(and be sure to restore the Apache license notice in\nlib/parser/pbxproj.js before committing)

\n

License

\n

Apache V2

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-react":{"name":"@nativescript/template-blank-react","version":"8.6.0","license":"Apache-2.0","readme":"

NativeScript Application

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-view":{"name":"nativescript-pdf-view","version":"3.0.0-1","license":"MIT","readme":"

\"Build

\n

\"npm

\n

NativeScript PDFView

\n
\n

Remark This repository is a fork of the original by Merott that will be used with his consent to provide further maintenance of this NativeScript plugin.

\n
\n

A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

\n

This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

\n

My aim is to keep the features consistent across iOS and Android.

\n

Installation

\n
ns plugin add nativescript-pdf-view
\n

Usage

\n

Vanilla NativeScript

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:pdf=\"nativescript-pdf-view\"
  loaded=\"pageLoaded\">
  <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
</Page>
\n

Angular NativeScript

\n

Import in module

\n
import { PDFViewModule } from 'nativescript-pdf-view/angular';
\n
<PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
\n

Demo

\n

Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

\n

Samples

\n

There are sample applications avalable:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/push":{"name":"@nativescript-community/push","version":"1.1.11","license":"Apache-2.0","readme":"

[npm-image]:http://img.shields.io/npm/v/@nativescript-community/push.svg\n[npm-url]:https://npmjs.org/package/@nativescript-community/push\n[downloads-image]:http://img.shields.io/npm/dm/@nativescript-community/push.svg

\n

This plugin is an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

\n

Thanks to Eddy for allowing this!

\n

Android

\n

Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

\n

There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

\n

iOS

\n

Enable push support in Xcode

\n

Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

\n\"Push\n
\n

Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

\n
\n

Copy the entitlements file

\n

The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

\n
\t<key>aps-environment</key>
\t<string>development</string>
\n
\n

Note that the filename should be app.entitlements, see the path above.

\n
\n

Configure push notifications in Info.plist

\n

Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

\n
<key>UseExternalPushProvider</key>
<true/>
\n

And to allow processing when a background push is received, add this as well:

\n
<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
\n

The end result should look like this.

\n

\n

API

\n

init

\n

In your main application JS file, you must call init().

\n
import * as messaging from '@nativescript-community/push';
messaging.init();
\n

areNotificationsEnabled

\n

On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

\n
import * as messaging from \"@nativescript-community/push\";

console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
\n

registerForPushNotifications

\n

The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

\n
import * as messaging from \"@nativescript-community/push\";

messaging.registerForPushNotifications({
  onPushTokenReceivedCallback: (token: string): void => {
    console.log(\"Firebase plugin received a push token: \" + token);
  },

  onMessageReceivedCallback: (message: messaging.Message) => {
    console.log(\"Push message received:\", message));
  },

  // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
  showNotifications: true,

  // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
  showNotificationsWhenInForeground: true
}).then(() => console.log(\"Registered for push\"));
\n
\n

Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

\n
\n
\n

With the token received in onPushTokenReceivedCallback you can send a notification to this device.

\n
\n

getCurrentPushToken

\n

If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

\n
import * as messaging from \"@nativescript-community/push\";

messaging.getCurrentPushToken()
    .then(token => console.log(`Current push token: ${token}`));
\n

Interactive notifications (iOS only for now)

\n

To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

\n

Each action has either type button or input, and you can set options to do any or all of:

\n\n

Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

\n

\"Interactive \"Interactive \"Interactive \"Interactive

\n
import * as messaging from \"@nativescript-community/push\";

const model = new messaging.PushNotificationModel();
model.iosSettings = new messaging.IosPushSettings();
model.iosSettings.badge = false;
model.iosSettings.alert = true;

model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
model.iosSettings.interactiveSettings.actions = [
  {
    identifier: \"OPEN_ACTION\",
    title: \"Open the app (if closed)\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground
  },
  {
    identifier: \"AUTH\",
    title: \"Open the app, but only if device is not locked with a passcode\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply without opening the app\",
    type: \"input\",
    submitLabel: \"Fire!\",
    placeholder: \"Load the gun...\"
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply and open the app\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground,
    type: \"input\",
    submitLabel: \"OK, send it\",
    placeholder: \"Type here, baby!\"
  },
  {
    identifier: \"DELETE_ACTION\",
    title: \"Delete without opening the app\",
    options: messaging.IosInteractiveNotificationActionOptions.destructive
  }
];

model.iosSettings.interactiveSettings.categories = [{
  identifier: \"GENERAL\"
}];

model.onNotificationActionTakenCallback = (actionIdentifier: string, message: messaging.Message) => {
  console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
};

messaging.registerForInteractivePush(model);
\n

To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

\n
{
  \"aps\": {
    \"alert\": {
      \"title\": \"Realtime Custom Push Notifications\",
      \"subtitle\": \"Now with iOS 10 support!\",
      \"body\": \"Add multimedia content to your notifications\"
    },
    \"sound\": \"default\",
    \"badge\": 1,
    \"category\": \"GENERAL\",
    \"showWhenInForeground\": true,
    \"data\": {
      \"foo\": \"bar\"
    }
  }
}
\n
\n

IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

\n
\n

Testing push notifications

\n

iOS

\n

For testing notifications on iOS the easiest tool I found is Pusher:

\n\"Pusher\"/\n

Android

\n

For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

\n

\"Postman \"Postman

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-emoji":{"name":"nativescript-emoji","version":"1.1.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Emoji 😀😊🚀

\n

A simple library to add Emoji support to your NativeScript app. Working on Android and iOS

\n

\"Emoji\"

\n

Instalation

\n

tns plugin add nativescript-emoji

\n

Usage

\n
XML
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Emoji=\"nativescript-emoji\" navigatingTo=\"navigatingTo\" class=\"page\">  
    <Page.actionBar>
        <ActionBar title=\"NativeScript Emoji\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>
    <StackLayout orientation=\"horizontal\">
        <Label text=\"I'm happy \"> </Label>
        <Emoji:Emoji name=\"joy\" />
        <Emoji:Emoji name=\"joy\" />
        <Emoji:Emoji name=\"joy\" />
    </StackLayout>
</Page>
\n
TS
\n
import { Emoji } from 'nativescript-emoji';
\n
ANGULAR
\n
import { registerElement } from \"nativescript-angular/element-registry\";

registerElement(\"Emoji\", () => require(\"nativescript-emoji\").Emoji);
\n

How to use

\n

Set emoji property name with the short-name of the emoji.

\n

<Emoji:Emoji name="joy" />

\n

Available Properties

\n

name: emoji short-name

\n

size: size to display emoji

\n

The full list you can access on the link below.\nhttp://apps.timwhitlock.info/emoji/tables/unicode

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/filepicker":{"name":"@angelengineering/filepicker","version":"1.1.0","license":"Apache-2.0","readme":"

@angelengineering/filepicker

\n

Nativescript filepicker \"apple\" \"android\"

\n

This file picker plugin exports function filePicker() that supports both single and multiple selection (for iOS, multiple selection feature depends on OS version) using only native picker approaches.
\n
For iOS, filePicker() uses UIDocumentPicker to allow selection from publicly available files that can be accessed via iOS Files app. When selecting from Files, UIDocumentPicker supports multiple selections.

iOS also has access to the galleryPicker() function which selects from the iOS Photos Gallery. This picker uses UIImagePicker for iOS 13 and below, which only supports single selections. PHPicker is used for iOS 14+ which does support multiple selections from the Photos Gallery. This picker does require user permission before allowing access to media on iOS.

\n


For Android, filePicker() uses Intents to open the stock file picker. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required in AndroidManifest. See demo for implementation details. Note: galleryPicker() will just call filePicker() internally.

\n
ns plugin add @angelengineering/filepicker
\n

Usage

\n

The best way to understand how to use the plugin is to look at the demo app included in this repo.\nIn the apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/filepicker.ts.

\n
\n
    \n
  1. Import the plugin.
    2. \n
\n
import { Filepicker, MediaType } from '@angelengineering/filepicker';
\n
    \n
  1. Create a filepicker instance.
    2. \n
\n
let picker = new Filepicker();
\n
    \n
  1. Decide which types of files to include, and whether single or multiple selections allowed, then call the file picker.
    2. \n
\n
    try {
      pickedFiles = await picker.filePicker(MediaType.IMAGE + MediaType.VIDEO + MediaType.AUDIO, true);
    } catch (err) {
      if (err) alert(err?.message);
    } finally {
      this.handleFiles(pickedFiles);
    }
\n



\n

Android Permissions

\n

To request permissions in the demo app, we use the @nativescript-community perms plugin. While this is not required for all OS versions and their system pickers, just to be safe you should request it so user is aware.

\n

Be sure to have permissions add the following lines in AndroidManifest.xml if targeting API 26+.

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

  <application android:requestLegacyExternalStorage=\"true\" ... >
    ...
  </application>
</manifest>
\n

For API 33+, you'll also need to add the following to the Android Manifest as well as request additional permissions:

\n
<uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />
<uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
<uses-permission android:name=\"android.permission.READ_MEDIA_AUDIO\" />
\n

Before launching the picker on API 33+, you'll need to request the following permissions to allow picker access to all file types:

\n
request('photo')
request('video')
request('audio')
\n

For an example, look at the pickAll function inside the filepicker.ts file in the dmeo app.

\n



\n

iOS Permissions

\n

Using the plugin on iOS to select from the Photos gallery with galleryPicker() requires user to grant photo library permission first in order to access the selected image, otherwise it will return without any files. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

\n
<key>NSPhotoLibraryUsageDescription</key>
<string>Requires access to photo library to upload media.</string>
\n



\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n
\n

Supported Picker File Types

\n
MediaType {
  IMAGE,
  AUDIO,
  VIDEO,
  ARCHIVE,
  DOCUMENT,
  ALL     =>   (IMAGE | AUDIO | VIDEO | ARCHIVE | DOCUMENT )
}
\n

Each platform natively supports a different set of file/mime types, you can see those that are used by the plugin by looking at per-platform plugin package source.

\n
\n

Android

\n

The Android stock file picker also supports selecting files from Google Photos and Google Drive if you have an account signed in on the Android device. Other document provider apps installed on your device may also offer additional services.

\n
\n

iOS

\n

The iOS pickers also support selecting files from an associated iCloud account if the user has signed in on the device. Note that for a production application, you'll need to add the iCloud capability to your iOS application, and register that entitlement via the Apple Developer site for that package id. After that, update the relevant keys as shown in the demo application's Info.plist.

\n
\n

Additional Utils

\n

This plugin also exports a function getFreeMBs which a dev can use to check free space on the current device/app's cache folder which is where picked files get copied to. This is useful when working with larger video files to ensure you have enough free space before picking/copying the video file for use in your app.

\n
\n

License

\n

Apache License Version 2.0

\n
\n

Acknowledgements

\n

This plugin was based on code from https://github.com/jibon57/nativescript-mediafilepicker and https://github.com/nativescript-community/ui-document-picker

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-selfie-segmentation":{"name":"@nativescript/mlkit-selfie-segmentation","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-selfie-segmentation

\n
npm install @nativescript/mlkit-selfie-segmentation
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"cmbsdk-nativescript":{"name":"cmbsdk-nativescript","version":"1.2.271","license":"SEE LICENSE IN LICENSE","readme":"

Nativescript Cognex Mobile Barcode Scanner SDK

\n

Documentation and integration info

\n

Nativescript cmbSDK integration info:

\n

Nativescript cmbSDK Documentation

\n

API Methods

\n

All of the API methods, usage and examples can be found here.

\n

Changelog

\n

Detailed changelog can be found on our developer network site

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textdrawable":{"name":"nativescript-textdrawable","version":"1.0.2","license":"MIT","readme":"

\"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-textdrawable

\n

##Usage

\n
import {TextDrawable} from 'nativescript-textdrawable'
var image = new TextDrawable();
\n

Text to display

\n

image.text = 'O'

\n

Text color

\n

image.textColor = 'white' //Color can be set using hex || short hex || name || arbg

\n

Font Size

\n

image.fontSize = 75

\n

Image width

\n

image.width = 100

\n

Image height

\n

image.height = 100

\n

Border

\n

image.withBorder = 5

\n

Uppercase

\n

image.toUpperCase = true

\n

Background Color

\n

image.bgColor = red //Color can be set using hex || short hex || name || arbg ... Random color is used if unset

\n

Bold

\n

image.bold = true

\n

Type / Shape

\n

Retangle\nimage.type = 'rect'

\n

Round\nimage.type = 'round'

\n

Round Rectangle

\n

image.type = 'roundRect'

\n

image.radius = 30 //default 10

\n

###Xml markup settings

\n

IMPORTANT: Make sure you include xmlns:td="nativescript-textdrawable" on the Page element

\n

e.g\n<td:TextDrawable width="75" height="75" text="of" textColor="white" toUpperCase="true" withBorder="1" type="round" bgColor="#2196F3"/>

\n

##Screenshot

\n

\"ss\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pubnub":{"name":"nativescript-pubnub","version":"2.0.3","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

nativescript-pubnub

\n

##Usage\ntns plugin add nativescript-pubnub

\n

##Android

\n

###Initialize

\n

Using Typescript

\n
import {PubNub} from 'nativescript-pubnub';
\n

Using javascript

\n
var pn = require('nativescript-pubnub');
var pubnub = new pn.PubNub(\"pubKey\",\"subKey\");
\n

Use any of the following methods to initialize PubNub;

\n
new PubNub(pubKey: String, subKey: String);

new PubNub(pubKey: String, subKey: String, enableSSL: Boolean);

new PubNub(pubKey: String, subKey: String, secretKey: String);

new PubNub(pubKey: String, subKey: String, secretKey: String, enableSSL: Boolean);

new PubNub(pubKey: String, subKey: String, secretKey: String, cipherKey: String, enableSSL: Boolean);

new PubNub(pubKey: String, subKey: String, secretKey: String, cipherKey: String, enableSSL: Boolean, iv: String);
\n

###Subscribe

\n

Use any of the following methods to subscribe to a channel or multiple channels;

\n
.subscribe(channel): Promise;

.subscribe(channel:String,timetoken:Number): Promise

.subscribe(channel:String, timetoken:String): Promise

.subscribe(channels:String[], timetoken:String): Promise

.subscribe(channels:String[], timetoken:Number): Promise

.subscribe(channels:String[] ): Promise
\n

###Publish

\n

Use any of the following methods to publish data;

\n
\n

Message Data:\nThe message argument can contain any JSON serializable data, including: Objects, Arrays, Ints and Strings.

\n
\n
.publish(channel: String, message: any, storeInHistory: Boolean, metadata:String): Promise;
.publish(channel: String, message: any, storeInHistory: Boolean): Promise;
.publish(channel: String, message: any, metadata): Promise;
.publish(channel: String, message: any): Promise;
\n

###History\nUse any of the following methods to retrieve pubnub's history;

\n
.history(channel, count): Promise;
.history(channel, reverse): Promise;
.history(channel, start, end): Promise;
.history(channel, count, reverse): Promise;
.history(channel, start, reverse): Promise;
.history(channel, start, count): Promise;
.history(channel, includeTimetoken, count): Promise;
.history(channel, start, count, reverse): Promise;
.history(channel, start, end, count): Promise;
.history(channel, start, end, count, reverse, includeTimetoken): Promise;
.history(channel: String, start: Number, end: Number, count: Number, reverse: Boolean, includeTimetoken: Boolean): Promise;
\n

###Unsubscribe

\n
.unsubscribe(channels);
.unsubscribe(channels: String)
\n

###Here Now

\n
.hereNow(channel: String, state, disable_uuids): Promise;
.hereNow(state: String, disable_uuids: Boolean): Promise;
.hereNow(channel: String): Promise;
\n

###Grant

\n
.pamGrant(channel: String, auth_key: String, read: Boolean, write: Boolean, int: number): Promise;
.pamGrant(channel: String, auth_key: String, read: Boolean, write: Boolean): Promise;
.pamGrant(channel: String, read: Boolean, write: Boolean, int: number): Promise;
.pamGrant(channel: String, read: Boolean, write: Boolean): Promise;
.pamGrant(channel, auth_key, read, write, int): Promise;
\n

###Add Channels to Channel Group

\n
.channelGroupAddChannel(group: String, channels): Promise;
.channelGroupAddChannel(group: String, channels): Promise;
\n

###Where Now

\n
.whereNow(uuid: String): Promise;
.whereNow(): Promise;
\n

###Audit Channel Group

\n
.pamAuditChannelGroup(group): Promise;
.pamAuditChannelGroup(group, auth_key): Promise;
\n

###Channel Group Grant

\n
.pamGrantChannelGroup(group, auth_key, read, management, ttl): Promise;
.pamGrantChannelGroup(group, auth_key, read, management): Promise;
.pamGrantChannelGroup(group, read, management, ttl): Promise;
.pamGrantChannelGroup(group, read, management): Promise;
\n

###Remove Channel Group

\n

.channelGroupRemoveChannel(group, channels): Promise;
.channelGroupRemoveChannel(group, channel: String): Promise;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-enumerable":{"name":"nativescript-enumerable","version":"3.5.2","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-enumerable/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Enumerable

\n

A NativeScript module providing LINQ style extensions for handling arrays and lists.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-enumerable
\n

inside your app project to install the module.

\n

Usage

\n

Create a sequence

\n
import Enumerable = require(\"nativescript-enumerable\");

// from a list of values / objects with variable length
var seq1 = Enumerable.create(1, 'MK', true, null, {});

// from an array / list
var seq2 = Enumerable.fromArray([11, 22, 33, 44]);

// from object
var seq3 = Enumerable.fromObject({
    MK: 23979,
    TM: 5979
});

// range of numbers: 2, 3, 4, 5, 6
var seq4 = Enumerable.range(2, 5);

// 50979 'TM' strings
var seq5 = Enumerable.repeat('TM', 50979);
\n

Work with them

\n
var seq = Enumerable.create(5979, 23979, null, '23979', 1781, 241279);

var newSeq = seq.where((x) => x !== null)  // remove all elements that are (null)
                .skip(1)  // skip one element (5979)
                .take(3)  // take next remaining 3 elements (23979, 23979, 1781)
                .distinct()  // remove duplicates
                .select((x) => \"\" + x)  // convert to strings
                .order();  // order by element ascending

newSeq.each((item) => {
    // [0] 1781
    // [1] 23979
    console.log(item);
});
\n

Most methods are chainable as in .NET context.

\n

Functions and lambda expression

\n

Many methods require one or more function.

\n

Instead using a function like

\n
.where(function(x) {
           return x !== null;
       })
\n

you can write

\n
.where('x => x !== null')
\n

instead.

\n

Documentation

\n

The full documentation with all functions and methods can be found on readme.io.

\n

Demo app

\n

The demo app contains examples to all functions and methods.

\n

It also contains a code editor where you can enter own code and run it!

\n\n\n\n

The wiki describes how it works.

\n

Examples

\n

Filters

\n
// distinct()
// 1, 2, 4, 3
Enumerable.create(1, 2, 4, 2, 3)
          .distinct();
 
// except()
// 2.0, 2.1, 2.3, 2.4, 2.5
Enumerable.create(2.0, 2.1, 2.2, 2.3, 2.4, 2.5)
          .except([2.2]); 
 
// intersect()
// 26, 30
Enumerable.create(44, 26, 92, 30, 71, 38)
          .intersect([30, 59, 83, 47, 26, 4, 3]);
       
// ofType()
// '2', 'Tanja'
Enumerable.create(1, '2', 2, 'Tanja', 3)
          .ofType('string');  // typeof x == 'string'
          
// union()
// 5, 3, 9, 7, 8, 6, 4, 1, 0
Enumerable.create(5, 3, 9, 7, 5, 9, 3, 7)
          .union([8, 3, 6, 4, 4, 9, 1, 0]);
          
// where()
// 1, 2, 3
Enumerable.create(1, 2, 3, 4)
          .where((x) => x < 4);
\n

Sort elements

\n
// orderBy(), thenBy()
//
// \"apple\", \"grape\", \"mango\", \"banana\",
// \"orange\", \"blueberry\", \"raspberry\", \"passionfruit\"
Enumerable.create(\"grape\", \"passionfruit\", \"banana\", \"mango\", 
                  \"orange\", \"raspberry\", \"apple\", \"blueberry\")
          .orderBy((x) => x.length)  // complement: orderByDescending()
          .thenBy((x) => x);  // complement: thenByDescending()
                              // shorter: then()

// reverse()
// 4, 3, 2, 1
Enumerable.create(1, 2, 3, 4)
          .reverse();
\n

Take / skip elements

\n
// skip()
// 3, 4
Enumerable.create(0, 1, 2, 3, 4)
          .skip(3);

// skipLast()
// 0, 1, 2, 3
Enumerable.create(0, 1, 2, 3, 4)
          .skipLast();
          
// skipWhile()
// 55, 666, 77
Enumerable.create(22, 33, 44, 55, 666, 77)
          .skipWhile((x) => x < 50);
          
// take()
// 0, 1, 2
Enumerable.create(0, 1, 2, 3, 4)
          .take(3);

// takeWhile()
// 22, 33, 44
Enumerable.create(22, 33, 44, 55)
          .takeWhile((x) => x < 50);
\n

Get one element

\n
// elementAt()
// 33
Enumerable.create(11, 22, 33, 44)
          .elementAt(2);
          
// elementAtOrDefault()
// 'TM'
Enumerable.create(11, 22, 33, 44)
          .elementAtOrDefault(4, 'TM');  // out of range
          
// first()
// 11
Enumerable.create(11, 22, 33, 44)
          .first();
          
// firstOrDefault()
// 'MK'
Enumerable.create()
          .firstOrDefault('MK');
          
// last()
// 44
Enumerable.create(11, 22, 33, 44)
          .last();
          
// lastOrDefault()
// 'PZ'
Enumerable.create()
          .lastOrDefault('PZ');

// single()
// EXCEPTION, because we have more than one element
Enumerable.create(11, 22, 33, 44)
          .single();
          
// singleOrDefault()
// 11
Enumerable.create(11)
          .singleOrDefault('YS');
\n

All methods with NO OrDefault suffix will throw exceptions if no element was found.

\n

You also can use a function as first argument for all of these methods that works as filter / condition:

\n
// first()
// 22
Enumerable.create(11, 22, 33, 44)
          .first((x) => x >= 20);
\n

Accumulators

\n
// aggregate()
// \"Marcel Joachim Kloubert\"
Enumerable.create('Marcel', 'Joachim', 'Kloubert')
          .aggregate((result: string, x: string) => {
                         return result += \" \" + x;
                     });

// average()
// 2.5
Enumerable.create(1, 2, 3, 4)
          .average();
          
// sum()
// 10
Enumerable.create(1, 2, 3, 4)
          .sum();
\n

Minimum / maximum values

\n
// max()
// 3
Enumerable.create(1, 3, 2)
          .max(); 
          
// min()
// 1
Enumerable.create(2, 3, 1, 2)
          .min();
\n

Joins

\n
class Person {
    constructor(name: string) {
        this.name = name;
    }

    public name: string;
}

class Pet: {
    constructor(name: string, owner: Person) {
        this.name = name;
        this.owner = owner;
    }

    public name: string;
    public owner: Person;
}

var persons: Person[] = [
    new Person(\"Tanja\"),
    new Person(\"Marcel\"),
    new Person(\"Yvonne\"),
    new Person(\"Josefine\")
];

var pets: Pet[] = [
    new Pet(\"Gina\", persons[1]),
    new Pet(\"Schnuffi\", persons[1]),
    new Pet(\"Schnuffel\", persons[2]),
    new Pet(\"WauWau\", persons[0]),
    new Pet(\"Lulu\", persons[3]),
    new Pet(\"Asta\", persons[1]),
];

// groupJoin()
// 
// [0] 'Owner: Tanja; Pets: WauWau, Sparky'
// [1] 'Owner: Marcel; Pets: Gina, Schnuffi, Asta'
// [2] 'Owner: Yvonne; Pets: Schnuffel'
// [3] 'Owner: Josefine; Pets: Lulu'
Enumerable.fromArray(persons)
          .groupJoin(pets,
                     (person: Person) => person.name,
                     (pet: Pet) => pet.owner.name,
                     (person: Person, petsOfPerson: Enumerable.IEnumerable<Pet>) => {
                         var petList = petsOfPerson
                             .select((pet: Pet) => pet.name)
                             .aggregate((result: string, petName: string) => {
                                            return result += \", \" + petName;
                                        });
                     
                         return 'Owner: ' + person.name + '; Pets: ' + petList;
                     });

// join()
// 
// [0] 'Owner: Tanja; Pet: WauWau'
// [1] 'Owner: Marcel; Pet: Gina'
// [2] 'Owner: Marcel; Pet: Schnuffi'
// [3] 'Owner: Marcel; Pet: Asta'
// [4] 'Owner: Yvonne; Pet: Schnuffel'
// [5] 'Owner: Josefine; Pet: Lulu'
Enumerable.fromArray(persons)
          .join(pets,
                (person: Person) => person.name,
                (pet: Pet) => pet.owner.name,
                (person: Person, pet: Pet) => {
                    return 'Owner: ' + person.name + '; Pet: ' + pet.name;
                });
\n

Groupings

\n
// groupBy()
Enumerable.create(\"grape\", \"passionfruit\", \"banana\",
                  \"apple\", \"blueberry\")
          .groupBy((x: string) => x[0])
          .each(function(grouping: Enumerable.IGrouping<string, string>) {
                    // grouping[0].key = 'g'
                    // grouping[0][0] = 'grape'
                    
                    // grouping[1].key = 'p'
                    // grouping[1][0] = 'passionfruit'
                    
                    // grouping[2].key = 'b'
                    // grouping[2][0] = 'banana'
                    // grouping[2][1] = 'blueberry'
                    
                    // grouping[3].key = 'a'
                    // grouping[3][0] = 'apple'
                });
\n

Projection

\n
// select()
// \"MARCEL\", \"KLOUBERT\"
Enumerable.create(\"Marcel\", \"Kloubert\")
          .select((x: string) => x.toUpperCase());
          
// selectMany()
// 1, 10, 100, 2, 20, 200, 3, 30, 300
Enumerable.create(1, 2, 3)
          .selectMany((x: number) => [x, x * 10, x * 100]);

// zip()
// \"Marcel Kloubert\", \"Bill Gates\", \"Albert Einstein\"
Enumerable.create('Marcel', 'Bill', 'Albert')
          .zip(['Kloubert', 'Gates', 'Einstein', 'Adenauer'],
               (firstName: string, lastName: string) => {
                   return firstName + \" \" + lastName;
               });
\n

Checks / conditions

\n
// all()
// (false)
Enumerable.create(1, 2, '3', 4)
          .all((x) => typeof x !== \"string\");
          
// contains()
// (true)
Enumerable.create(1, 2, '3')
          .contains(3);

// any()
// (true)
Enumerable.create(1, 2, '3', 4)
          .any((x) => typeof x === \"string\");
 
// sequenceEqual()
// (false)         
Enumerable.create([1, 2, 3])
          .sequenceEqual([1, 3, 2]);
\n

Conversions

\n
// toArray()
var jsArray = Enumerable.create(1, 2, 3, 4)
                        .toArray();
  
// toObject()
var obj = Enumerable.create(1, 2, 3, 4)
                    .toObject((item, index) => \"item\" + index);  
  
// toObservable()
var o = Enumerable.create(1, 2, 3, 4)
                  .toObservable((item, index) => \"item\" + index);
  
// toObservableArray()
var oa = Enumerable.create(1, 2, 3, 4)
                   .toObservableArray();  
  
// toLookup()
// 
// lookup['A'][0] = 'Albert'
// lookup['B'][0] = 'Bill'
// lookup['B'][1] = 'Barney'
// lookup['K'][0] = 'Konrad'
// lookup['M'][0] = 'Marcel'
var lookup = Enumerable.create('Bill', 'Marcel', 'Barney', 'Albert', 'Konrad')
                       .toLookup((x: string) => x[0]);
\n

Count

\n
// 3
Enumerable.create(0, 1, 2)
          .count();
          
// 2
Enumerable.create(0, 1, 2)
          .count((x) => x > 0);
\n

More

\n

concat

\n
// 0, 1, 2, 'PZ', 'TM', 'MK'
Enumerable.create(0, 1, 2)
          .concat(['PZ', 'TM', 'MK']);
\n

defaultIfEmpty

\n
// 0, 1, 2
Enumerable.create(0, 1, 2)
          .defaultIfEmpty('PZ', 'TM', 'MK');
          
// 'PZ', 'TM', 'MK'
Enumerable.create()
          .defaultIfEmpty('PZ', 'TM', 'MK');
\n

moveNext / current

\n
var seq = Enumerable.create(0, 1, 2);
while (seq.moveNext()) {
    console.log(seq.current);
}
\n

reset

\n
var seq = Enumerable.create(0, 1, 2);

seq.each((x: number) => {
             console.log(x);
         });

seq.reset()
   .each((x: number) => {
             console.log(x * 2);
         });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-vue-unlock-slider":{"name":"@nativescript-community/ui-vue-unlock-slider","version":"1.0.0","license":"MIT","readme":"

A NativeScript-Vue component for "Slide to unlock"

\n

Slide to unlock in iOS style with animations made with NativeScript-Vue. Works on iOS and Android.

\n

\"npm\"

\n\n

Installation

\n
ns plugin add @nativescript-community/ui-vue-unlock-slider
\n

Usage

\n
// app.js
import Vue from 'nativescript-vue'
...
+ import UnlockSlider from '@nativescript-community/ui-vue-unlock-slider'
+ Vue.use(UnlockSlider)
\n
<UnlockSlider ref=\"unlockSlider\" @change=\"sliderChange\" />
\n
export default {
  data() {
    return {
      slidePercent: 0
    }
  },
  methods: {
    sliderChange(percent) {
      this.slidePercent = percent;
    },
    reset() {
      this.$refs.unlockSlider.reset();
    }
  }
}
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefault value
heightNumber70
radiusNumber70
containerBackgroundColorStringlightgray
buttonTextString→
buttonTextSizeNumber20
buttonTextColorStringblack
buttonTextFontWeightStringnormal
buttonBackgroundColorStringwhite
infoTextStringSlide to unlock
infoTextSizeNumber16
infoTextColorStringblack
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeValue
changeNumber0.00-1.00
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-pager":{"name":"@triniwiz/nativescript-pager","version":"14.0.2","license":"Apache-2.0","readme":"

Nativescript nativescript-pager

\n
ns plugin add @triniwiz/nativescript-pager
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ios":{"name":"@nativescript/ios","version":"8.6.1","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-text-recognition":{"name":"@nativescript/mlkit-text-recognition","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-text-recognition

\n
npm install @nativescript/mlkit-text-recognition
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xmpp-client":{"name":"nativescript-xmpp-client","version":"1.2.0","license":"MIT","readme":"

An XMPP websocket client plugin for Nativescript

\n

Installation

\n

tns install nativescript-xmpp-client

\n

Usage

\n
import {Client, IQ} from \"nativescript-xmpp-client\";

....
   
       var client = new Client({
               websocket: {url: 'ws://127.0.0.1:5280'},
               jid: 'client2@127.0.0.1',
               password: 'secret'
           });
           
       client.on('online', function (data) {
           //Request roaster
           client1.send(new IQ({from: data.jid, type: 'get', id: 'rand'}).c('query', {xmlns: 'jabber:iq:roster'}));
       });
       
       client.on('stanza', function (stanza) {
           console.log(stanza.root().toString());
       });
           
       client.on('error', function (error) {
           console.log('client2', error)
       })
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-number-progressbar":{"name":"nativescript-number-progressbar","version":"1.0.0","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

Nativescript-Number-ProgressBar

\n

NativeScript Number ProgressBar provides simple ProgressBar with styling.Feedbacks and PRs are most Welcome.

\n

Demo

\n

|\n---------- |\n\"alt |

\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n
Android
daimajia/NumberProgressBar
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm i nativescript-number-progressbar --save

\n

Usage

\n

XML:

\n
<Page 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:NumberProgressBar=\"nativescript-number-progressbar\" loaded=\"pageLoaded\"> 
    <Page.actionBar>
      <ActionBar title=\"Nativescript Number ProgressBar\" />
  </Page.actionBar>
  <StackLayout padding=\"10\">
      <NumberProgressBar:NumberProgressBar  id=\"sb\" marginTop=\"20\" />
        <NumberProgressBar:NumberProgressBar  id=\"sb1\" marginTop=\"30\"  progress_text_size=\"30\" progress_text_color=\"#2BAB42\" progress_unreached_bar_height=\"5\" progress_reached_bar_height=\"10\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#2BAB42\" />
       <NumberProgressBar:NumberProgressBar  id=\"sb2\" marginTop=\"30\"  progress_text_size=\"40\" progress_text_color=\"#F0D812\" progress_unreached_bar_height=\"10\" progress_reached_bar_height=\"20\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#F0D812\"  />
       <NumberProgressBar:NumberProgressBar  id=\"sb3\" marginTop=\"30\"  progress_text_size=\"50\" progress_text_color=\"#F43B5A\" progress_unreached_bar_height=\"20\" progress_reached_bar_height=\"40\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#F43B5A\"  />
       <NumberProgressBar:NumberProgressBar  id=\"sb4\" marginTop=\"30\"  progress_text_size=\"60\" progress_text_color=\"#D726EC\" progress_unreached_bar_height=\"20\" progress_reached_bar_height=\"40\" progress_unreached_color=\"#34EC1A\" progress_reached_color=\"#D726EC\"  />

        
  </StackLayout>
</Page>
\n

TS:

\n

import {NumberProgressBar} from 'nativescript-number-progressbar';
private npb: NumberProgressBar;
this.npb = <NumberProgressBar>mainPage.getViewById('sb');
this.npb.incrementProgressBy(1);
\n

Attributes

\n

There are several attributes you can set:

\n

\"\"

\n

The reached area and unreached area:

\n\n

The text area:

\n\n

The bar:

\n\n

progress_text_size - (int) - optional

\n

Attribute to specify the size of text in Progress Bar.

\n

progress_text_color - (color string) - optional

\n

Attribute to specify the color of text in Progress Bar.

\n

progress_unreached_color - (color string) - optional

\n

Attribute to specify the color of progress unreached area in Progress Bar.

\n

progress_reached_color - (color string) - optional

\n

Attribute to specify the color of progress reached area in Progress Bar.

\n

progress_unreached_bar_height - (int) - optional

\n

Attribute to specify the height of unreached Progress Bar.

\n

progress_reached_bar_height - (int) - optional

\n

Attribute to specify the height of reached Progress Bar.

\n

Methods

\n

incrementProgressBy(int)

\n

Increment the progress bar with any value.

\n

getProgress()

\n

To know the current progress bar value at a time.

\n

setProgress(int)

\n

To set the progress bar value.

\n

getProgressMax()

\n

To know the progress bar maximum value.

\n

setProgressMax(int)

\n

To set the progress bar maximum value.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/flashlight":{"name":"@angelengineering/flashlight","version":"1.1.0","license":"Apache-2.0","readme":"

@angelengineering/flashlight

\n

Nativescript flashlight \"apple\" \"android\"

\n

This plugin allows you to enable/disable the flashlight/torch on your iOS/Android device.

\n
ns plugin add @angelengineering/flashlight
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin repository.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/flashlight.ts.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript

\n
import { Flashlight } from '@angelengineering/flashlight';
\n

Create filepicker instance

\n

TypeScript

\n
Flashlight.isOn; //boolean
Flashlight.isAvailable; //boolean
Flashlight.toggle(); //boolean
Flashlight.enable(); //boolean
Flashlight.disable(); //boolean
\n

Important Note

\n

In general, this util should not be used when an application is using the camera ( video preview, photo taking, video recording, etc. ) as it will throw an error trying to control the flashlight at the same time that the camera hardware is active.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-taskpie":{"name":"nativescript-taskpie","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-taskpie/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Task Pie

\n

A NativeScript module for drawing Microsoft Planner like progress charts.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-taskpie
\n

inside your app project to install the module.

\n

Demo

\n

The demo app can be found here.

\n

\"Demo

\n

Documentation

\n

Have a look at the index.ts file to get an overview of all types, methods and properties.

\n

Otherwise...

\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:taskPie=\"nativescript-taskpie\"
      navigatingTo=\"onNavigatingTo\">

  <taskPie:TaskPie id=\"my-taskpie\"
                   description=\"79 days left\"
                   pieText=\"16\" pieSubText=\"tasks left\" />
</Page>
\n

Add this CSS to your app.css, e.g.

\n

It is possible that you have to customize some properties:

\n
.nsTaskPie-pieArea .nsTaskPie-textArea {
    margin-top: -16;
}

.nsTaskPie-pieArea .nsTaskPie-textArea .nsTaskPie-text {
    text-align: center;
    font-size: 40;
    color: #a6a6a6;
    padding: 0;
}

.nsTaskPie-pieArea .nsTaskPie-textArea .nsTaskPie-subText {
    text-align: center;
    font-size: 20;
    color: #a6a6a6;
    margin-top: -8;
    padding: 0;
}

.nsTaskPie-description {
    font-size: 20;
    margin-bottom: 12;
}

.nsTaskPie-categories .nsTaskPie-category {
    margin-left: 4;
    margin-right: 4;
}

.nsTaskPie-categories .nsTaskPie-border {
    height: 8;
}

.nsTaskPie-categories .nsTaskPie-count,
.nsTaskPie-categories .nsTaskPie-name,
.nsTaskPie-description {
    text-align: center;
    color: #333333;
}

.nsTaskPie-categories .nsTaskPie-count {
    font-size: 16;
    margin-top: 4;
}

.nsTaskPie-categories .nsTaskPie-name {
    font-size: 12;
}
\n

The following XML shows the structure of a TaskPie view:

\n
<TaskPie cssClass=\"nsTaskPie\"
         rows=\"auto,auto,auto\" columns=\"*\">
  
  <!-- pieGrid() -->
  <GridLayout cssClass=\"nsTaskPie-pieArea\"
              rows=\"auto\" columns=\"1*,4*,1*\"
              horizontalAlignment=\"stretch\" verticalAlignment=\"center\">
        
    <!-- pieImage() -->        
    <Image cssClass=\"nsTaskPie-pie\"
           col=\"1\" row=\"0\"
           horizontalAlignment=\"stretch\" verticalAlignment=\"center\" />
           
    <!-- pieTextArea() -->
    <StackLayout cssClass=\"nsTaskPie-textArea\"
                 col=\"0\" row=\"0\" colspan=\"3\"
                 horizontalAlignment=\"stretch\" verticalAlignment=\"center\">
    
      <!-- pieTextField() --> 
      <Label cssClass=\"nsTaskPie-text\" />
      
      <!-- pieSubTextField() --> 
      <Label cssClass=\"nsTaskPie-subText\" />
    </StackLayout>
    
    <!-- descriptionField() -->
    <Label cssClass=\"nsTaskPie-description\"
           col=\"0\" row=\"1\" />
           
    <!-- categoryGrid() --> 
    <GridLayout cssClass=\"nsTaskPie-categories\"
                rows=\"*\" columns=\"*,*,*,*\">
                
      <!-- [0] \"Not started\" -->
      <StackLayout cssClass=\"nsTaskPie-category\"
                   row=\"0\" col=\"0\">
                   
        <Border cssClass=\"nsTaskPie-border\"
                backgroundColor=\"#ffc90e\"
                horizontalAlignment=\"stretch\" />
        
        <Label cssClass=\"nsTaskPie-count\"
               horizontalAlignment=\"stretch\"
               text=\"0\" textWrap=\"true\" />
        
        <Label cssClass=\"nsTaskPie-name\"
               horizontalAlignment=\"stretch\"
               text=\"Not started\" textWrap=\"true\" />
      </StackLayout>
      
      <!-- [1] \"Late\" -->
      <StackLayout cssClass=\"nsTaskPie-category\"
                   col=\"1\" row=\"0\">
                   
        <Border cssClass=\"nsTaskPie-border\"
                backgroundColor=\"#d54130\"
                horizontalAlignment=\"stretch\" />
        
        <Label cssClass=\"nsTaskPie-count\"
               horizontalAlignment=\"stretch\"
               text=\"0\" textWrap=\"true\" />
        
        <Label cssClass=\"nsTaskPie-name\"
               horizontalAlignment=\"stretch\"
               text=\"Late\" textWrap=\"true\" />
      </StackLayout>
      
      <!-- [2] \"In progress\" -->
      <StackLayout cssClass=\"nsTaskPie-category\"
                   col=\"2\" row=\"0\">
                   
        <Border cssClass=\"nsTaskPie-border\"
                backgroundColor=\"#4cabe1\"
                horizontalAlignment=\"stretch\" />
        
        <Label cssClass=\"nsTaskPie-count\"
               horizontalAlignment=\"stretch\"
               text=\"0\" textWrap=\"true\" />
        
        <Label cssClass=\"nsTaskPie-name\"
               horizontalAlignment=\"stretch\"
               text=\"In progress\" textWrap=\"true\" />
      </StackLayout>
      
      <!-- [3] \"Completed\" -->
      <StackLayout cssClass=\"nsTaskPie-category\"
                   col=\"3\" row=\"0\">
                   
        <Border cssClass=\"nsTaskPie-border\"
                backgroundColor=\"#88be39\"
                horizontalAlignment=\"stretch\" />
        
        <Label cssClass=\"nsTaskPie-count\"
               horizontalAlignment=\"stretch\"
               text=\"0\" textWrap=\"true\" />
        
        <Label cssClass=\"nsTaskPie-name\"
               horizontalAlignment=\"stretch\"
               text=\"Completed\" textWrap=\"true\" />
      </StackLayout>
    </GridLayout>
  </GridLayout>
</TaskPie>
\n

Dependency properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionCSS class
categoriesThe custom category list.nsTaskPie-categories
categoryStyleCSS style for category area.nsTaskPie-categories
countChangedEvent that is raised when a count value of a task category changed.---
countsThe list of the category's count values.---
descriptionThe description (text under the pie).nsTaskPie-description
descriptionStyleCSS style of the description.nsTaskPie-description
pieGridStyleCSS style of the grid tat contains the pie and its texts.nsTaskPie-pieArea
pieSizeThe size the pie is drawed with. The higher the better is the quality, but needs more memory. Default: 300nsTaskPie-pie
pieStyleCSS style of the pie image.nsTaskPie-pie
pieSubTextThe sub text of the pie.nsTaskPie-subText
pieSubTextStyleCSS style of the pie's sub text.nsTaskPie-subText
pieTextThe pie text.nsTaskPie-text
pieTextAreaStyleCSS style of the area that contains the pie texts.nsTaskPie-textArea
pieTextStyleCSS style of the pie's text.nsTaskPie-text
\n

Categories

\n

By default you have the following categories:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameColorType (TaskCategoryType)
Not startedffc90eNotStarted
Lated54130NotStarted
In progress4cabe1InProgress
Completed88be39Completed
\n

Add own

\n

You can use the addCategory() method to add categories.

\n
import TaskPieModule = require('nativescript-taskpie');

export function onNavigatingTo(args) {
    var page = args.object;
    
    var pie = <TaskPieModule.TaskPie>page.getViewById('my-taskpie'));
    
    // this switches the view in 'edit mode'
    // what means that is not refresh until the action
    // has been finished
    pie.edit(() => {
        pie.clearCategories();
        
        pie.addCategory('Pending', 'ffc90e', TaskPieModule.TaskCategoryType.NotStarted)
           .addCategory('Late!', 'd54130', TaskPieModule.TaskCategoryType.NotStarted)
           .addCategory('On work', '4cabe1', TaskPieModule.TaskCategoryType.InProgress)
           .addCategory('Complete', '88be39', TaskPieModule.TaskCategoryType.Completed);
    });
}
\n

You also can use the categories (dependency) property to set an own list of items.

\n
pie.categories = [
    {
        name: 'Pending',
        color: 'ffc90e',
        type: TaskPieModule.TaskCategoryType.NotStarted,
    },
    
    {
        name: 'Late!',
        color: 'd54130',
        type: TaskPieModule.TaskCategoryType.NotStarted,
    },
    
    {
        name: 'On work',
        color: '4cabe1',
        type: TaskPieModule.TaskCategoryType.InProgress,
    },
    
    {
        name: 'Complete',
        color: '88be39',
        type: TaskPieModule.TaskCategoryType.Completed,
    },
];
\n

Each item has the following structure:

\n
interface ITaskCategory {
    /**
     * The color.
     */
    color?: string | number | Color.Color;

    /**
     * Number of tasks.
     */
    count?: number;

    /**
     * The name.
     */
    name: string;

    /**
     * The type.
     */
    type?: TaskCategoryType;
}
\n

The recommed way is to use the addCategory() method. These method creates ITaskCategory objects that raise change events for its properties, so this has better support for data binding.

\n

Data binding

\n

The following example is similar to the demp app.

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:taskPie=\"nativescript-taskpie\"
      navigatingTo=\"onNavigatingTo\">

  <taskPie:TaskPie id=\"my-taskpie\"
                   counts=\"{{ taskCounts }}\"
                   pieSize=\"{{ pieSize }}\"
                   description=\"{{ daysLeft ? (daysLeft + ' days left') : null }}\"
                   pieText=\"{{ pie.totalLeft }}\" pieSubText=\"tasks left\"
                   countChanged=\"{{ taskCountChanged }}\" />
</Page>
\n

ViewModel

\n
import Observable = require(\"data/observable\");
import TaskPieModule = require('nativescript-taskpie');

export function onNavigatingTo(args) {
    var page = args.object;
    var pie = <TaskPieModule.TaskPie>page.getViewById('my-taskpie');

    var viewModel: any = new Observable.Observable();
    viewModel.set('daysLeft', 79);  // value for description
    viewModel.set('pie', pie);
    viewModel.set('pieSize', 720);  // draw pie with 720x720
    viewModel.set('taskCounts', [11, 4, 1, 11]);  // initial count values
    
    viewModel.taskCountChanged = (category, newValue, oldValue, pie) => {
        console.log(\"Value of category '\" + category.name + \"' changed from '\" + oldValue + \"' to '\" + newValue + \"'.\");
    };
    
    page.bindingContext = viewModel;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-face-detection":{"name":"@nativescript/mlkit-face-detection","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-face-detection

\n
npm install @nativescript/mlkit-face-detection
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/downloader":{"name":"@angelengineering/downloader","version":"1.1.0","license":"Apache-2.0","readme":"

NativeScript Downloader \"apple\" \"android\"\"npm\"

\n
\n

@angelengineering/downloader

\n
\n

This downloader plugin exports class Downloader that has a single function download().

\n

For iOS, Downloader uses NSURLSession to initiate a download from a valid URL.

\n

For Android, Downloader uses DownloadManager to initiate a download from a valid URL.

\n

Contents

\n\n

Installation

\n
npm install @angelengineering/downloader --save
\n

OR

\n
ns plugin add @angelengineering/downloader
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application page by looking at apps/demo/src/plugin-demos/downloader.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { Downloader, DownloadOptions, MessageData } from '@angelengineering/downloader';
\n
    \n
  1. Create a downloader instance.
    2. \n
\n
const dp = new Downloader();
\n
    \n
  1. Download a file.
    2. \n
\n
const dlfile = await dp.download({ url: 'https://some.domain.com/file.txt' });
\n

The only required option is the URL to be downloaded. You can also pass other options as listed in DownloadOptions below before starting the download.

\n

You can listen to events emitted by the download during operation in case you want to update a download status message/indicator or handle an error. Upon success, the plugin will return a File reference to the downloaded file located in the app cache directory for Android and the app document's directory for iOS, which can then be used directly by the dev without extra permissions for any other operations on the file.

\n
dp.on(Downloader.DOWNLOAD_STARTED, (payload: MessageData) => {
  console.log('started', payload?.data?.contentLength);
});
dp.on(Downloader.DOWNLOAD_PROGRESS, (payload: MessageData) => {
  console.log(' >>>>>  ', payload?.data?.progress, payload?.data?.url, payload?.data?.destinationFilename);
});
dp.on(Downloader.DOWNLOAD_COMPLETE, (payload: MessageData) => {
  console.log('finished', payload?.data?.filepath);
});
dp.on(Downloader.DOWNLOAD_ERROR, (payload: MessageData) => {
  console.log('ERROR!', payload?.data);
});
dp.download({ url: 'https://some.domain.com/file.txt' }).then((file: File) => {
  if (!file) {
    return console.error('Failed to download file!');
  }
  console.log('Finished downloading file ', file.path);
});
\n

Supported Downloader Options

\n
interface DownloadOptions {
  url: string; //must be a valid url, usually https unless you allow http in your app
  request?: RequestOptions; //request header strings to be passed to the https connection
  destinationPath?: string; //must be a valid path for app to create a new file (existing directory with valid filename)
  destinationFilename?: string; //must be a string like XXXX[].[YYYYYY] without any path preceding
  copyPicker?: boolean; //present user with UI to choose destination directory to save a copy of download
  copyGallery?: boolean; //iOS only, if download has a recognized image/video file name extension, save a copy to iOS Photos, ignored on Android
  copyDownloads?: boolean; //Android only, adds a copy to device Downloads directory using legacy DIRECTORY_DOWNLOADS, or MediaStore for 29+
  notification?: boolean; //Android-only. Show system notification for download success/failure. defaults to false
}
\n

For both platforms, the plugin will attempt to download the file with the filename/path supplied by the user in options, or try to find a filename to use from the url. In either case, if a file already exists at any of the output paths where a copy is being saved, it will instead append a '-#' to the filename before saving to ensure there is no conflict.

\n

Android Specifics

\n

Android apps will download files by default to the app's cache directory, which is the only directory supported by DownloadManager and no special permissions are necessary. This will correspond to android.content.Context.getExternalCacheDir() if the device has an sd card, or android.content.Context.getCacheDir() if not. This file can then be used directly for other purposes in the app without any additional permissions/requests.

\n

By default, the plugin disabled Android system notifications of downloads, which also requires you to add that permission to the Android Manifest like so:

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.DOWNLOAD_WITHOUT_NOTIFICATION\"/>
\n

You can choose to enable these notifications which will show the user progress and completion/failure notifications.

\n

Android version of the plugin supports two destination copy approaches:

\n
    \n
  1. \n

    copyPicker will first download the file to the default cache directory, and then present the user with a picker UI so that they select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice.

    \n
    2. \n
  2. \n

    copyDownloads will save a copy to the device's Download directory in case the user wants to use that file in another application from an easy to find location. API versions > 28 use MediaStore, and no extra permissions are necessary. For API versions 28 and below, you'll need to ensure you have Android Manifest permissions defined using:

    \n
    3. \n
\n
<manifest ... >
  <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
  <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
\n

Tested and working on Android API 25-33.

\n

iOS Specifics

\n

iOS applications will download files by default to the application's documents directory, which is defined in Nativescript as knownFolders.documents() and does not require any extra permissions from the user. This also has the advantage of being the location where an application can make downloaded files visible to other apps once it has been configured as a document provider.

\n

The iOS version of the plugin supports two destination copy approaches:

\n
    \n
  1. \n

    copyPicker will first download the file to the application documents directory, and then present the user with a picker UI so that they can select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice. Note: This is only available on iOS 14+

    \n
    2. \n
  2. \n

    copyGallery will save a copy to the device's Photos Gallery in case the user wants to use that file in another application from an easy to find location. This approach requires the user to grant photo library permission first in order to save the downloaded file. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding something like the following:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Requires access to save downloaded media to photo library.</string>
    \n
    3. \n
\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n

Tested and working on iOS 12.x-16.x with caveats noted above.

\n

Acknowledgements

\n

This plugin was inspired by https://github.com/tobydeh/nativescript-download-progress

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-pose-detection":{"name":"@nativescript/mlkit-pose-detection","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-pose-detection

\n
npm install @nativescript/mlkit-pose-detection
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/firebase-messaging":{"name":"@nativescript/firebase-messaging","version":"3.2.0","license":"Apache-2.0","readme":"

@nativescript/firebase-messaging

\n

Contents

\n\n

Intro

\n

This plugin allows you to use Firebase Cloud Messaging in your NativeScript app.

\n

\"image\"

\n

Using FCM, you can notify a client app that new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload of up to 4 KB to a client app.

\n

FCM messages can be sent to real Android/iOS devices and Android emulators. iOS simulators however do not handle cloud messages.

\n

Common use cases for handling messages could be:

\n\n

Set up your app for Firebase

\n

You need to set up your app for Firebase before you can enable Firebase Messaging. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

\n

Add the Firebase Cloud Messaging SDK to your app

\n

To add the Firebase Cloud Messaging SDK to your app follow these steps:

\n
    \n
  1. Install the @nativescript/firebase-messaging plugin by running the following command in the root directory of your project.
    2. \n
\n
npm install @nativescript/firebase-messaging
\n
    \n
  1. Add the SDK by importing the @nativescript/firebase-messaging module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-messaging';
\n

iOS: Requesting permissions

\n

iOS prevents messages containing notification (or 'alert') payloads from being displayed unless you have received explicit permission from the user.

\n

To request permission, call the requestPermission method on the Messaging class instance returned by firebase().messaging(). This method triggers a native permission dialog requesting the user's permission. The user can choose to allow or deny the request.

\n
import { firebase } from '@nativescript/firebase-core';
import { AuthorizationStatus } from '@nativescript/firebase-messaging-core';

async function requestUserPermission() {
\tconst authStatus = await firebase()
\t\t.messaging()
\t\t.requestPermission({
\t\t\tios: {
\t\t\t\talert: true,
\t\t\t},
\t\t});
\tconst enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;

\tif (enabled) {
\t\tconsole.log('Authorization status:', authStatus);

\t\tconst didRegister = await firebase().messaging()
                .registerDeviceForRemoteMessages();
\t}
}
\n

Android: Requesting permissions

\n

On Android, you do not need to request user permission. This method can still be called on Android devices; however, and will always resolve successfully.

\n

Firebase Cloud Messages types and how the user app affects delivery

\n

FCM allows you to send the following two types of messages:

\n\n

How these messages are delivered depends on whether the app is in the foreground or background.

\n

Notifications messages delivery and app state

\n

The following table shows how the notification messages are delivered to the user app depending on the app state.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Notification messages typesApp state
ForegroundBackground
Notification onlyDisplayed to the user by the FCM SDKPassed to the onMessage handler for the app code to handle
Notification + optional dataApp receives a message object with both payloads available.App receives the notification payload in the notification tray, and when the user taps on the notification, the data payload is passed to the onMessage handler
\n

Always show notifications in the foreground

\n

If you want to always display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification, set the showNotificationsWhenInForeground property of the Messaging instance to true:

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().showNotificationsWhenInForeground = true;
\n

Listen to notification messages in the foreground

\n

Since notification messages are displayed automatically(see Notifications messages delivery and app state) when the app is in the background, sometimes you may want to handle the display of the message manually. To listen to a message being received when the app is in the foreground or manually handle the display of the message when the app is in the background, pass a callback function to the onMessage method of the instance of Messaging class. The callback will. Code executed via this handler can interact with your application (e.g. updating the state or UI).

\n

For example, you could display a new Alert each time a message is delivered:

\n
import { alert } from '@nativescript/core';
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.messaging()
\t.onMessage(async (remoteMessage) => {
\t\talert('A new FCM message arrived!', JSON.stringify(remoteMessage));
\t});
\n

Data-only messages delivery and app state

\n

The following table shows how the data messages are delivered to the user app depending on the app state.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ForegroundBackground
App receives the data payload in a callback function passed to the onMessage method.App receives the data payload in a callback function passed to the onMessage method.
\n\n

For example, if using the Node.js firebase-admin package to send a message, you would set the payload as follows:

\n
admin.messaging().sendToDevice(
\t[], // device fcm tokens...
\t{
\t\tdata: {
\t\t\towner: JSON.stringify(owner),
\t\t\tuser: JSON.stringify(user),
\t\t\tpicture: JSON.stringify(picture),
\t\t},
\t},
\t{
\t\t// Required for background/quit data-only messages on iOS
\t\tcontentAvailable: true,
\t\t// Required for background/quit data-only messages on Android
\t\tpriority: 'high',
\t}
);
\n\n
admin.messaging().send({
\tdata: {
\t\t//some data
\t},
\tapns: {
\t\tpayload: {
\t\t\taps: {
\t\t\t\tcontentAvailable: true,
\t\t\t},
\t\t},
\t\theaders: {
\t\t\t'apns-push-type': 'background',
\t\t\t'apns-priority': '5',
\t\t\t'apns-topic': '', // your app bundle identifier
\t\t},
\t},
\t//must include token, topic, or condition
\t//token: //device token
\t//topic: //notification topic
\t//condition: //notification condition
});
\n

Send messages from your servers

\n

The Cloud Messaging module provides the tools required to enable you to send custom messages directly from your servers. For example, you could send an FCM message to a specific device when a new chat message is saved to your database and display a notification, or update local device storage, so the message is instantly available.

\n

Firebase provides several SDKs for that purpose in different languages such as Node.JS, Java, Python, C# and Go. It also supports sending messages over HTTP. These methods allow you to send messages directly to your user's devices via the FCM servers.

\n

Send messages using user device tokens

\n

To send a message to a device, you must access its unique token. A token is automatically generated by the device and can be accessed using the Cloud Messaging module. The token should be saved on your servers and should be easily accessible when required.

\n

The examples below use a Cloud Firestore database to store and manage the tokens, and Firebase Authentication to manage the user's identity. You can however use any data store or authentication method of your choice.

\n

Saving tokens

\n

Once your application has started, you can call the getToken method on the Messaging instance to get the unique device token. If you are using a different push notification provider, such as Amazon SNS, you will need to call getAPNSToken on iOS:

\n
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-messaging';
import { FieldValue } from '@nativescript/firebase-auth';
import '@nativescript/firebase-firestore';

async function saveTokenToDatabase(token) {
  // Assume user is already signed in
  const userId = firebase().auth().currentUser.uid;

  // Add the token to the users datastore
  await firebase().firestore()
    .collection('users')
    .doc(userId)
    .update({
      tokens: FieldValue.arrayUnion(token),
    });
}

// Get the device token
    firebase().messaging()
      .getToken()
      .then(token => {
        return saveTokenToDatabase(token);
      });

    // If using other push notification providers (ie Amazon SNS, etc)
    // you may need to get the APNs token instead for iOS:
    //  if (global.isIOS) {
    //      saveTokenToDatabase(firebase().messaging().getAPNSToken());
    // }


    // Listen to whether the token changes
    firebase().messaging().onToken(token => {
      saveTokenToDatabase(token);

}
\n

The above code snippet stores the device FCM token on a remote database.

\n

Inside the saveTokenToDatabase method, we store the token in the current user's document. Notice that the token is being added via the FieldValue.arrayUnion method. A user can have more than one token (for example using 2 devices) so it's important to ensure that we store all tokens in the database and the FieldValue.arrayUnion allows us to do that.

\n

Using the stored tokens

\n

With the tokens stored in a secure data store, we can now send messages via FCM to those devices.

\n
\n

Note: The following example uses the Node.JS firebase-admin package to send messages to our devices. However, you can use any of the SDKs listed above can be used.

\n
\n

Go ahead and set up the firebase-tools library on your server environment. Once setup, our script needs to perform two actions:

\n
    \n
  1. Fetch the tokens required to send the message.
    2. \n
  2. Send a data payload to the devices that the tokens are registered for.\nImagine our application being similar to Instagram. Users can upload pictures, and other users can "like" those pictures. Each time a post is liked, we want to send a message to the user that uploaded the picture. The code below simulates a function that is called with all of the information required when a picture is liked:
    3. \n
\n
// Node.js
var admin = require('firebase-admin');

// ownerId - who owns the picture someone liked
// userId - id of the user who liked the picture
// picture - metadata about the picture

async function onUserPictureLiked(ownerId, userId, picture) {
\t// Get the owners details
\tconst owner = admin.firestore().collection('users').doc(ownerId).get();

\t// Get the users details
\tconst user = admin.firestore().collection('users').doc(userId).get();

\tawait admin.messaging().sendToDevice(
\t\towner.tokens, // ['token_1', 'token_2', ...]
\t\t{
\t\t\tdata: {
\t\t\t\towner: JSON.stringify(owner),
\t\t\t\tuser: JSON.stringify(user),
\t\t\t\tpicture: JSON.stringify(picture),
\t\t\t},
\t\t},
\t\t{
\t\t\t// Required for background/quit data-only messages on iOS
\t\t\tcontentAvailable: true,
\t\t\t// Required for background/quit data-only messages on Android
\t\t\tpriority: 'high',
\t\t}
\t);
}
\n

Handle tokens when authenticating users

\n

Firebase Cloud Messaging tokens are associated with the instance of the installed app. By default, only token expiration or uninstalling/reinstalling the app will generate a fresh token.

\n

This means that by default, if two users login into your app from the same device, the same FCM token will be used for both users. Usually, this is not what you want, so you must take care to cycle the FCM token at the same time you handle user logout/login.

\n

How and when you invalidate a token and generate a new one will be specific to your project, but a common pattern is to delete the FCM token during logout and update your back end to remove it. Then, you fetch the FCM token during login and update your backend systems to associate the new token with the logged-in user.

\n

Note that when a token is deleted by calling the deleteToken method, it is immediately and permanently invalid.

\n

Send messages via topics

\n

Topics are mechanisms that allow a device to subscribe and unsubscribe from named PubSub channels, all managed via FCM. Rather than sending a message to a specific device by FCM token, you can instead send a message to a topic and any devices subscribed to that topic will receive the message.

\n

Topics allow you to simplify FCM server integration as you do not need to keep a store of device tokens. There are, however, some things to keep in mind about topics:

\n\n

To learn more about how to send messages to devices subscribed to topics, see Topic messaging on Android or Send messages to topics on Apple platforms.

\n

Subscribing to topics

\n

To subscribe a device to a topic, call the subscribeToTopic method on the Messsaging instance with the topic name (must not include ´/´):

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.messaging()
\t.subscribeToTopic('weather')
\t.then(() => console.log('Subscribed to topic!'));
\n

Unsubscribing to topics

\n

To unsubscribe from a topic, call the unsubscribeFromTopic method with the topic name:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.messaging()
\t.unsubscribeFromTopic('weather')
\t.then(() => console.log('Unsubscribed fom the topic!'));
\n

Send messages to a user device via topics

\n

Topics are mechanisms that allow a device to subscribe and unsubscribe from named PubSub channels, all managed via FCM. Rather than sending a message to a specific device by FCM token, you can instead send a message to a topic and any devices subscribed to that topic will receive the message.

\n

Topics allow you to simplify FCM server integration as you do not need to keep a store of device tokens. There are, however, some things to keep in mind about topics:

\n\n

To learn more about how to send messages to devices subscribed to topics, see Topic messaging on Android or Send messages to topics on Apple platforms.

\n

Subscribing to topics

\n

To subscribe a device to a topic, call the subscribeToTopic method on the Messaging instance with the topic name (must not include /):

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.messaging()
\t.subscribeToTopic('weather')
\t.then(() => console.log('Subscribed to topic!'));
\n

Unsubscribing from topics

\n

To unsubscribe from a topic, call the unsubscribeFromTopic method with the topic name:

\n
import { firebase } from '@nativescript/firebase-core';

firebase()
\t.messaging()
\t.unsubscribeFromTopic('weather')
\t.then(() => console.log('Unsubscribed fom the topic!'));
\n

Send messages to a user device via topics

\n

Using the firebase-admin Admin SDK as an example, we can send a message to devices subscribed to a topic(weather):

\n
const admin = require('firebase-admin');

const message = {
\tdata: {
\t\ttype: 'warning',
\t\tcontent: 'A new weather warning has been created!',
\t},
\ttopic: 'weather',// topic name
};

admin
\t.messaging()
\t.send(message)
\t.then((response) => {
\t\tconsole.log('Successfully sent message:', response);
\t})
\t.catch((error) => {
\t\tconsole.log('Error sending message:', error);
\t});
\n

Use conditions to send a messages to more than one topic at once

\n

To send a message to a combination of topics, specify a condition, which is a boolean expression that specifies the target topics. For example, the following condition will send messages to devices that are subscribed to weather and either news or traffic tpoics:

\n
condition: \"'weather' in topics && ('news' in topics || 'traffic' in topics)\";
\n

To send a message to this condition, replace the topic key with the condition:

\n
const admin = require('firebase-admin');

const message = {
\tdata: {
\t\tcontent: 'New updates are available!',
\t},
\tcondition: \"'weather' in topics && ('news' in topics || 'traffic' in topics)\",
};

admin
\t.messaging()
\t.send(message)
\t.then((response) => {
\t\tconsole.log('Successfully sent message:', response);
\t})
\t.catch((error) => {
\t\tconsole.log('Error sending message:', error);
\t});
\n

Send an image in the notification payload

\n

Both the Notifications composer and the FCM API support image links in the message payload.

\n

iOS-specific options

\n

To successfully send an image using the Admin SDK, set the ApnsConfig options with the apns property for iOS:

\n
const payload = {
\tnotification: {
\t\tbody: 'This is an FCM notification that displays an image!',
\t\ttitle: 'FCM Notification',
\t},
\tapns: {
    payload: {
      aps: {
        'mutable-content': 1,
      },
    },
    fcmOptions: {
      imageUrl: 'image-url',
    },
  },
};
\n
\n

Note: To see the list of available configuration for iOS, check out the official Firebase documentation.

\n
\n

Android-specific options

\n

Similarly to iOS, some configurations specific to Android are needed:

\n
const payload = {
\tnotification: {
\t\tbody: 'This is an FCM notification that displays an image!',
\t\ttitle: 'FCM Notification',
\t},
\tandroid: {
\t\tnotification: {
\t\t\timage: 'image-url',
\t\t},
\t},
};
\n
\n

Note: For more information about sending an image on Android, see Send an image in the notification payload.

\n
\n

Send one image notification for both iOS and Android

\n

It's possible to send one notification that will be delivered to both platforms using the Admin SDK:

\n
const admin = require('firebase-admin');

// Create a list containing up to 500 registration tokens.
// These registration tokens come from the client FCM SDKs.
const registrationTokens = ['YOUR_REGISTRATION_TOKEN_1', 'YOUR_REGISTRATION_TOKEN_2'];

const message = {
\ttokens: registrationTokens,
\tnotification: {
\t\tbody: 'This is an FCM notification that displays an image!',
\t\ttitle: 'FCM Notification',
\t},
\tapns: {
    payload: {
      aps: {
        'mutable-content': 1,
      },
    },
    fcmOptions: {
      imageUrl: 'image-url',
    },
  },
  android: {
    notification: {
      imageUrl: 'image-url',
    },
  },
};

admin
\t.messaging()
\t.send(message)
\t.then((response) => {
\t\tconsole.log('Successfully sent message:', response);
\t})
\t.catch((error) => {
\t\tconsole.log('Error sending message:', error);
\t});
\n

Android: Configure Push notification icon and color

\n

If you want to use a specific icon and color for the push notification, configure them in in the App_Resources/Android/src/main/AndroidManifest.xml file:

\n
<meta-data android:name=\"com.google.firebase.messaging.default_notification_icon\"
  android:resource=\"@drawable/your_drawable_name\" />
<meta-data android:name=\"com.google.firebase.messaging.default_notification_color\"
  android:resource=\"@color/ns_primary\" />
\n

iOS: Enable the support for the delivery of push notifications in the background in Xcode

\n

Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):\n\"push-xcode-config\"

\n
\n

Note: Without this enabled you will receive push messages in the foreground, but NOT in the background.

\n
\n

Copy the entitlements file

\n

The previous step created the file platforms/ios/YourAppName/Resources/YourAppName.entitlements.\nTo prevent the file from being deleted when you run ns clean, move and rename it to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents). The relevant content for background push in that file is:

\n
\t<key>aps-environment</key>
\t<string>development</string>
\n

Allow processing received a background push notification

\n

Open app/App_Resources/iOS/Info.plist and add the following code at the bottom:

\n
<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
\n\n

API

\n

Messaging class

\n

android

\n
import { firebase } from '@nativescript/firebase-core';

messagingAndroid: com.google.firebase.messaging.FirebaseMessaging = firebase().messaging().android;
\n

A read-only property that returns the instance of the Messaging class for Android.

\n
\n

ios

\n
import { firebase } from '@nativescript/firebase-core';

messagingIos: MessagingCore = firebase().messaging().ios;
\n

A read-only property that returns the instance of the Messaging class for iOS.

\n
\n

app

\n
import { firebase } from '@nativescript/firebase-core';
messageApp: FirebaseApp = firebase().messaging().app;
\n

A read-only property that returns the instance of the FirebaseApp class associated with this Cloud Messaging instance.

\n
\n

isAutoInitEnabled

\n
import { firebase } from '@nativescript/firebase-core';
isAutoInitEnabled: boolean = firebase().messaging().isAutoInitEnabled;
// or
firebase().messaging().isAutoInitEnabled = true;
\n

Determines whether to enable or disable auto-initialization of Firebase Cloud Messaging. For more information about this property for iOS, see autoInitEnabled.

\n
\n

showNotificationsWhenInForeground

\n
import { firebase } from '@nativescript/firebase-core';
showNotificationsWhenInForeground: boolean = firebase().messaging().showNotificationsWhenInForeground;
// or
firebase().messaging().showNotificationsWhenInForeground = true;
\n

Allows you to always display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification

\n
\n

isDeviceRegisteredForRemoteMessages

\n
import { firebase } from '@nativescript/firebase-core';
isDeviceRegisteredForRemoteMessages: boolean = firebase().messaging().isDeviceRegisteredForRemoteMessages;
\n

A property that returns a boolean value indicating whether the app is registered to receive remote notifications or not.

\n
\n

getToken()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().getToken()
\t.then((token: string) => {
\t\tconsole.log('Token: ', token);
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n

Gets the user's device token. For more information, see getToken()

\n
\n

getAPNSToken()

\n
import { firebase } from '@nativescript/firebase-core';
aPNSToken: string | null = firebase().messaging().getAPNSToken()
\n

Returns an Apple Push Notification service (APNs) token for the app’s current device. For more information, see apnsToken.

\n
\n

hasPermission()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().hasPermission()
\t.then((status: AuthorizationStatus) => {
\t\tconsole.log('Authorization status: ', status);
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n

Checks if the app, on iOS, has permission to send notifications to the user.

\n
\n

onMessage()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().onMessage(listener);
\n

Registers a callback function that is invoked when a new message is received.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
listener(message: RemoteMessage) => anyA callback function that is invoked when a new message is received
\n
\n

onNotificationTap()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().onNotificationTap(listener);
\n

Registers a callback function that is invoked when a user taps on a notification.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
listener(message: RemoteMessage) => anyA callback function that is invoked when a new message is received
\n
\n

onToken()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().onToken(listener);
\n

Registers a callback function that is invoked when a user's device changes its registration token.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
listener(token: string) => anyA callback function that is invoked when
\n
\n

registerDeviceForRemoteMessages()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().registerDeviceForRemoteMessages()
\t.then(() => {
\t\tconsole.log('Device registered for remote messages');
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n
\n

requestPermission()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().requestPermission(permissions)
\t.then((status: AuthorizationStatus) => {
\t\tconsole.log('Authorization status: ', status);
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
permissionsPermissionsAn object containing the permissions to request.
\n
\n

subscribeToTopic()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().subscribeToTopic(topic)
\t.then(() => {
\t\tconsole.log('Subscribed to topic');
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n

For the description of this method, visit subscribeToTopic() on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
topicstringThe name of the topic to subscribe to.
\n
\n

unsubscribeFromTopic()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().unsubscribeFromTopic(topic)
\t.then(() => {
\t\tconsole.log('Unsubscribed from topic');
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n

For the description of this method, visit unsubscribeToTopic() on the Firebase website.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
topicstringThe name of the topic to unsubscribe from.
\n
\n

unregisterDeviceForRemoteMessages()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().unregisterDeviceForRemoteMessages()
\t.then(() => {
\t\tconsole.log('Device unregistered for remote messages');
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n
\n

deleteToken()

\n
import { firebase } from '@nativescript/firebase-core';
firebase().messaging().deleteToken()
\t.then(() => {
\t\tconsole.log('Token deleted');
\t}).catch((error: Error) => {
\t\tconsole.log('Error: ', error);
\t});
\n

For the description of the deleteToken method, visit deleteToken() on the Firebase website.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bottomnavigation":{"name":"nativescript-bottomnavigation","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/kobby-sun/nativescript-bottomnavigation/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Bottom Navigation

\n

NativeScript plugin for AHBottomNavigation.\nhttps://github.com/aurelhubert/ahbottomnavigation

\n

Install

\n
tns plugin add nativescript-bottomnavigation
\n

Usage

\n
...
xmlns:bottomnav=\"nativescript-bottomnavigation\"
...

<bottomnav:BottomNavigation tabSelected=\"tabSelected\">
  <bottomnav:BottomNavigation.items>
    <bottomnav:BottomNavigationItem title=\"Cake\" icon=\"ic_cake_white_24dp\" color=\"#4CAF50\" />
    <bottomnav:BottomNavigationItem title=\"Favorites\" icon=\"ic_favorite_white_24dp\" color=\"#2196F3\" />
    <bottomnav:BottomNavigationItem title=\"Settings\" icon=\"ic_settings_white_24dp\" color=\"#FF4081\" />
  </bottomnav:BottomNavigation.items>
</bottomnav:BottomNavigation>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-socketio-ns":{"name":"nativescript-socketio-ns","version":"0.11.1","license":"Unlicense","readme":"

NOTE

\n

This fork allow using this library with newer gradle versions, so it affects only the Android part.\nsee the original issue for information

\n

nativescript-socket.io

\n

Full-featured Socket.IO client implementation for NativeScript.

\n

Status

\n

\"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

\n

This library is production-ready. Both Android and iOS implementations are stable and in sync.

\n

Please check releases and changelog and roadmap for more information.

\n

Dependencies

\n

Android: Socket.IO-client Java v1.*

\n

iOS: Socket.IO-Client-Swift v12.*

\n

Install

\n
tns plugin add nativescript-socket.io
\n

Usage

\n
const SocketIO = require('nativescript-socket.io');

SocketIO.enableDebug(); // optionnal

// or use your own debug function
// SocketIO.enableDebug(myCustomDebugFunction);

const options = {
  query: {
    token: 'SOME_TOKEN_HERE',
  },
  android: {
    // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
  }
  ios: {
    // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
  }
};

const socketio = SocketIO.connect('http://somewhere/namespace', options);

socketio.on('connect', function(){
  console.log('connect');
});

socketio.on('hello', function(){
  console.log('hello', arguments);
});

socketio.on('request', function(info, ack){
  console.log('request', info);
  if (info === 'datetime') {
    ack(new Date());
  } elseif (info === 'random') {
    ack(Math.random());
  } else {
    ack(null);
  }
});

socketio.emit('hello', {
  username: 'someone',
});

socketio.emit('hello-ack', {
  username: 'someone',
}, function ack(){
  console.log('hello-ack', arguments);
})
\n

Usage with TypeScript

\n

import using either of the following:

\n
import * as SocketIO from \"nativescript-socket.io\"`

// OR

const SocketIO = require(\"nativescript-socket.io\")
\n

Demo

\n
    \n
  1. \n

    replace all instance of 192.168.1.111 with your IP address or domain.

    \n
    2. \n
  2. \n

    start the socket.io demo server

    \n
    3. \n
\n
cd ./demo.server
npm start
\n
    \n
  1. build and run the app
    2. \n
\n
cd ./demo
tns run android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codeus/aria-nativescript":{"name":"@codeus/aria-nativescript","version":"2.0.1","license":"Apache-2.0","readme":"

@codeus/aria-nativescript

\n
ns plugin add @codeus/aria-nativescript
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-image-labeling":{"name":"@nativescript/mlkit-image-labeling","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-image-labeling

\n
npm install @nativescript/mlkit-image-labeling
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"godot-rust-helper":{"name":"godot-rust-helper","version":"2.2.0","license":"MIT","readme":"

\n \n

\n

Godot Rust Helper

\n

A simple CLI tool to help you create and update Rust modules for your Godot projects.

\n

\n

\"NPM\n\"Known\n\"npm\"\n\"NPM\n\"issues\"\n\"license\"\n\"Gitter\"

\n
\n

Note: This is the documentation for the new 2.x version of godot-rust-helper. If you are looking for 1.x and below, you can find it here.

\n

Install

\n

Since godot-rust-helper is a CLI tool that is meant to be used whenever you want, you should install it globally like so:

\n
$ npm install -g godot-rust-helper
\n

Step 1: Creating the Project's Library

\n

For each game you create in Godot you will have to create a new library. The library itself is a cargo library and it holds all of the modules used in your game.

\n

To create the project's library, navigate to where you would like to store the modules (outside of your Godot project directory) and use the new command:

\n
$ godot-rust-helper new <library_name> <path_to_godot_project> [options]
\n

Let's go over the arguments and options in detail with some examples.

\n

Arguments:

\n\n

Options:

\n\n

examples:

\n

Creating a default library for Windows only builds:

\n
$ godot-rust-helper new breakout_modules ~/Documents/projects/breakout
\n

Creating an library for Windows, Linux, and OSX builds:

\n
$ godot-rust-helper new breakout-modules ~/Documents/projects/breakout windows,linux,osx
\n

Note: The src/lib.rs file is completely managed by godot-rust-helper and should not be modified. Any modifications to the file will result in the modules not functioning properly or they will be overwritten when a module is created/destroyed. Custom mods can be added to the file through godot-rust-helper mod as shown here (coming soon).

\n

Step 2: Creating Modules

\n

Now that you've created the library, you can go into the newly created folder and see the config file. This config file contains the path to the Godot project directory and the targets passed from the new command. This config file should not be modified manually as godot-rust-helper depends on it heavily.

\n

From this directory, we can now begin to make modules with the create command like so:

\n
$ godot-rust-helper create <class_name>
\n\n

What this does is create a src/<name>.rs file for the module and adds an entry for it in the src/lib.rs file. If you attach this script as it is to a Node and run the game then "hello, world" will print to the godot console.

\n

Note: This command has to be run from the library's directory.

\n

examples:

\n
$ godot-rust-helper create Player
\n
$ godot-rust-helper create HUD
\n

Step 3: Building Modules

\n

After you have created your module (or you can do this with the default contents to try it out) you're ready to run a build using:

\n
$ godot-rust-helper build
\n

What this does is first run cargo build and then it moves the build files into the Godot project directory.

\n

Note: This command has to be run from the library's directory.

\n

Note: The first time you run this it will take a while as it have to reach out and download the necessary dependencies, every build after that will be much quicker.

\n

The build command also supports the --watch option which will watch the src directory of your module for changes and re-build it automatically.

\n

examples:

\n

Running the build command:

\n
$ godot-rust-helper build
\n

Running the build command and watching for changes to any modules in the library.

\n
$ godot-rust-helper build --watch
\n

Step 4: Using the Module in Godot

\n

The last step that has to be done to use your module in your Godot project is creating the script and attaching it to the node that needs to use it.

\n

After you have created a module and run a build, you can attach the script to a node like so:

\n
    \n
  1. Choose the node to add the script to and in the inspector go to the script dropdown and choose to add a new script.
    2. \n
  2. In the Attach Node Script modal, set the following options:
    3. \n
\n\n
    \n
  1. Change the name of the script to match the class name and save the script to the rust-modules folder
    2. \n
  2. Click on the newly created .gdns file (or after the steps above it should be active in the inspector already) and in the Library dropdown choose load and select the "library_name.gdnlib" file in the rust-modules folder. This library name is the same name passed to godot-rust-helper new.
    3. \n
  3. Click on the newly created Node.gdns (or whatever you named it above if you chose a custom name).
    4. \n
\n

Now if you run your game you will see your script's functionality up and running!

\n

Note: If you update your Rust module you do not have to update the corresponding .gdnlib file in Godot, it will be updated automatically.

\n

Other Commands

\n

The following are commands are situational but are not needed for the basic setup.

\n

destroy

\n

Removes a Rust module from the library. You will still need to remove the script reference from your node in Godot as it will throw an error if you attempt to run the game since the script no longer exists.

\n
$ godot-rust-helper destroy <class_name>
\n\n

examples:

\n
$ godot-rust-helper destroy Player
\n
$ godot-rust-helper destroy HUD
\n

mod

\n

Coming soon!

\n

import

\n

Imports a Rust module from another library into the current library.

\n
$ godot-rust-helper import <path_to_library> <class_name>
\n\n

examples:

\n
$ godot-rust-helper import ../kinematic_character Player
\n
$ godot-rust-helper import ../kinematic_character Princess
\n

Tests

\n
$ npm run test
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-searchable-select":{"name":"@ticnat/nativescript-searchable-select","version":"2.0.5","license":"Apache-2.0","readme":"

@ticnat/nativescript-searchable-select

\n

Since nativescript changed the way it fill up ObservableArray and breaking changes so\nFor nativescript >= 8.3.0

\n
ns plugin add @ticnat/nativescript-searchable-select
\n

For nativescript < 8.3.0

\n
ns plugin add @ticnat/nativescript-searchable-select@1.0.7
\n

FilterSelect

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin to provide an listview widget to select AND filter items.

\n

Sample Screenshots

\n

Android and ios

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n

Installation

\n
NativeScript 7.x
\n\n

import css

\n

@import '@ticnat/nativescript-searchable-select/styles.css';

\n

*Be sure to run a new build after adding plugins to avoid any issues

\n

Vanilla NativeScript

\n

IMPORTANT: Make sure you include xmlns:SS="@ticnat/nativescript-searchable-select" on the Page element

\n

XML

\n
<Page xmlns:SS=\"@ticnat/nativescript-searchable-select\">
   <StackLayout>
     <SS:SearchableSelect
     items=\"{{ countries }}\"
     hint=\"Please select some countries\"
     modal_title=\"Countries\" search_param=\"name\"
     primary_key=\"code\"
     change=\"{{ onSelect }}\"
     />
   </StackLayout>
</Page>
\n

or with inner template option:

\n
<Page xmlns:SS=\"@ticnat/nativescript-searchable-select\">
    <SS:SearchableSelect render=\"label\" selected=\"{{ selected }}\" items=\"{{ countries }}\" hint=\"Please select some countries\" modal_title=\"Countries\" search_param=\"name\" primary_key=\"code\" change=\"{{ onSelect }}\">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class=\"item\" height=\"50\" columns=\"*,100\">
              <Label col=\"0\" class=\"text-center\" text=\"{{ name }}\" textWrap=\"true\" />
              <Label col=\"1\" class=\"text-center\" text=\"{{ code }}\" textWrap=\"true\" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>
</Page>
\n

Angular NativeScript

\n

Regiter plugin in Component class

\n

import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from '@ticnat/nativescript-searchable-select';
registerElement('FilterSelect', () => FilterSelect);
\n

HTML

\n
    <FilterSelect
        height=\"100%\"
        [items]=\"items\"
        (change)=\"onitemselected($event)\"
        hint=\"Please select some items\"
        modal_title=\"item\" search_param=\"name\"
        primary_key=\"id\">

    </FilterSelect>
\n

Attributes

\n

see demo examples for more information

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionDefault
renderto render "tags" or "label" or "drop"string : tags
multipleto limit the options selected to one if set to falseboolean : true
search_paramindex of the string value in the items object to search on itstring : name
item_templatexml template for the listview itemsstring : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" />
changechange event treger when select is donefunction : optional change(args) and selected item can be accessed as args.selected
modal_titletitle of the filter modalString : Please select items
hintstring to show when no items selectedPlease select some items
itemsarray of objects to populate the list of optionsObservableArray :[]
primary_keyunique index of the items objectstring : id
selectedarray of objects to mark some options as selected and it will be the result when select is doneArray: []
disabledto disable select bottonboolean : false
allowSearchto enable/disable search bar in the modalboolean : true
windowHeightto specify the height of the select windownumber : 70
refreshto refresh the filter select with new values good with remote datafunction
searchHintsearch placeholder or hint in the items modal"Search for item"
xbtnremove tag text you can use tag icon here"x"
closeTextclose button text"Close"
doneTextdone button text"Done"
clearTextclear button text"Clear"
selectTextselect button text"Select"
autofocuskeyboard up when you open modal so you can start searchfalse
open()open modal programmaticallyfunction
closeclose event treger when modal is closedyou can get the selected array by args.selected if the modal closed without any selection the array will be empty
\n

CSS core-theme styles is required for modal page if you dont have them just make your own

\n

see styles.css so you can override or make your own

\n\n

font icons

\n\n

License

\n

This plugin is built and maintained based on this plugin and many thanks for @moayadnajd

\n

For contributing

\n

just do a pull request with description of your changes or open issue with your ideas

\n

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/audio-player":{"name":"@angelengineering/audio-player","version":"1.1.0","license":"Apache-2.0","readme":"

@angelengineering/audio-player

\n

Nativescript audio player \"apple\" \"android\"

\n

\"npm\"

\n
\n

@angelengineering/audio-player

\n
\n

This plugin provides an audio player for Android and iOS that supports playback of both local files and remote URL audio files. For Android, MediaPlayer will internally cache remote files after first prepare/play. For iOS, the plugin will download and cache remote files on first prepare/play.

\n

Contents

\n\n

Installation

\n
npm install @angelengineering/audio-player --save
\n

OR

\n
ns plugin add @angelengineering/audio-player
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/audio-player.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { AudioPlayer, AudioPlayerOptions } from '@angelengineering/audio-player';
\n
    \n
  1. Play an audio file.
    2. \n
\n
protected _playOptions: AudioPlayerOptions = {
    audioFile: knownFolders.currentApp().path + '/audio/example.m4a';,
    loop: false,
    audioMixing: false,
    completeCallback: async result => {
        console.log('AudioPlayer - Audio file playback complete.', result);
    },
    errorCallback: errorObject => {
        console.error('AudioPlayer error!', JSON.stringify(errorObject));
    },
    infoCallback: infoObject => {
        console.info('AudioPlayer info: ', JSON.stringify(infoObject));
    },
};
this.player.prepareAudio(this._playOptions).then(status => {
    if (status) {    
        this.player.play();    
    } else {
        console.log('ERROR! Unable to prepare audio!');
    }
});
\n

NOTE: If you want to play an HTTP URL, you'll also need to make some adjustments to your application to allow unsecure connections or URL access will fail silently.\nFor iOS, add the following to your app's Info.plist:

\n
<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSAllowsArbitraryLoads</key>
    <true />  
</dict>
\n

For Android, ensure your application tag in App_Resources/Android/src/main/AndroidManifest.xml has the following:

\n
android:usesCleartextTraffic=\"true\"
\n

Supported Audio Player options

\n
export interface AudioPlayerOptions {
  /**
   * Gets or sets the audio file url.
   */
  audioFile: string;

  /**
   * Gets or sets the callback when the currently playing audio file completes.
   * @returns {Object} An object containing the native values for the callback.
   */
  completeCallback?: Function;

  /**
   * Get or sets the player to loop playback.
   */
  loop: boolean;

  audioMixing?: boolean;

  /**
   * Gets or sets the callback when an error occurs with the audio player.
   * @returns {Object} An object containing the native values for the error callback.
   */
  errorCallback?: Function;

  /**
   * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
   * @returns {Object} An object containing the native values for the info callback.
   */
  infoCallback?: Function;
}
\n

Audio Player exports

\n
export interface AudioPlayer {
  /**
   * native instance getters
   */
  readonly ios?: any;
  readonly android?: any;

  /**
   * Volume getter/setter
   */
  volume: any;

  /**
   * Prepare Audio player by preloading an audio file from file oath or URL
   * @function prepareAudio
   * @param options
   */
  prepareAudio(options: AudioPlayerOptions): Promise<boolean>;

  /**
   * Play current audio file that has been prepared by calling prepareAudio(options)
   */
  play(): Promise<boolean>;

  /**
   * Pauses playing audio file.
   */
  pause(): Promise<boolean>;

  /**
   * Seeks to specific time.
   */
  seekTo(time: number): Promise<boolean>;

  /**
   * Releases resources from the audio player.
   */
  dispose(): Promise<boolean>;

  /**
   * Check if the audio is actively playing.
   */
  isAudioPlaying(): boolean;

  /**
   * Get the duration of the audio file playing.
   */
  getAudioTrackDuration(): Promise<string>;

  /**
   * current time
   */
  readonly currentTime: number;
}
\n

Tested and working on Android API 25-33.\nTested and working on iOS 12.x-16.x.

\n

Acknowledgements

\n

This plugin is based on https://github.com/nstudio/nativescript-audio

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-appdynamics":{"name":"@essent/nativescript-appdynamics","version":"22.8.4","license":"Apache-2.0","readme":"

@essent/nativescript-appdynamics

\n
ns plugin add @essent/nativescript-appdynamics
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal":{"name":"nativescript-paypal","version":"2.6.9","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-paypal/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript PayPal

\n

NativeScript module for implementing simple PayPal checkouts using official SDK.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Roadmap

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-paypal
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n

Keep sure to define the following permissions, activities and other data in your manifest file:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

    <uses-permission android:name=\"android.permission.INTERNET\" />
    <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />    
    <uses-permission android:name=\"android.permission.CAMERA\" />
    <uses-permission android:name=\"android.permission.VIBRATE\" />
    
    <action android:name=\"android.intent.action.MAIN\" />
 
    <category android:name=\"android.intent.category.LAUNCHER\" />

    <uses-feature android:name=\"android.hardware.camera\"
                  android:required=\"false\" />
    <uses-feature android:name=\"android.hardware.camera.autofocus\"
                  android:required=\"false\" />

    <application>
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.LoginActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentMethodActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentConfirmActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PayPalFuturePaymentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentConsentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentInfoActivity\" />
        <activity android:name=\"io.card.payment.DataEntryActivity\" />
\t\t
\t    <service android:name=\"com.paypal.android.sdk.payments.PayPalService\"
                 android:exported=\"false\" />
    </application>
    
</manifest>
\n

app.gradle

\n

Keep sure to have a reference to the PayPal SDK in your app/App_Resources/Android/app.gradle file of your project.

\n
dependencies {
    // PayPal
    compile 'com.paypal.sdk:paypal-android-sdk:2.14.2'
}
\n

Demo

\n

For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

\n

Otherwise ...

\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
var PayPal = require(\"nativescript-paypal\");
\n

Initialize

\n

Initialize the environment:

\n
function onPageLoaded(args) {
    PayPal.init({
        clientId: '<YOUR-CLIENT-ID>'
    });
}
exports.onPageLoaded = onPageLoaded;
\n

The (optional) object that is submitted to the PayPal.init function has the following structure:

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
acceptCreditCards[OPTIONAL] Accept credit cards or not. Default: (true)
account[OPTIONAL] Defines information about the account.
clientIdThe PayPal ID for your app that was generated in the PayPal Developer Portal.
defaults[OPTIONAL] Defines default data.
environment[OPTIONAL] The environment to use. Possible values are: 0 = ENVIRONMENT_SANDBOX, 1 = ENVIRONMENT_PRODUCTION, 2 = ENVIRONMENT_NO_NETWORK.
onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
rememberUser[OPTIONAL] Remember the last user for the next payment or not. Default: (true)
requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 230958624
\n
account
\n

The account object has the following structure:

\n
Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
name[OPTIONAL] The name of the merchant.
privacyPolicy[OPTIONAL] The URI to the privacy policy of the merchant.
userAgreement[OPTIONAL] The URI to the user agreement of the merchant.
\n
defaults
\n

The defaults object has the following structure:

\n
Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
userEmail[OPTIONAL] The default user email.
userPhone[OPTIONAL] The default user phone.
userPhoneCountryCode[OPTIONAL] The default user phone country code.
\n

Start a payment

\n
function buyProduct(args) {
    // configure
    var payment = PayPal.newPayment()
        .setDescription('My product')
        .setAmount(59.79);

    // start checkout / payment
    payment.start(function(cbResult) {
        switch (cbResult.code) {
            case 0:
                // SUCCESS
                // pay key is stored in 'cbResult.key'
                break;
                
            case 1:
                // operation was CANCELLED
                break;
                
            case -1:
                // checkout FAILED
                break;
                
            case -2:
                // \"unhandled exception\"
                break;
        }
    });
}
exports.buyProduct = buyProduct;
\n

The payment object that is created by PayPal.newPayment function has the following structure.

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
getAmountGets the price. Example: var a = payment.getAmount();
getBnCodeGets the BN code. Example: var bc = payment.getBnCode();
getCurrencyGets the custom currency to use. Example: var c = payment.getCurrency();
getCustomGets the custom value for the payment. Example: var c = payment.getCustom();
getDescriptionGets the (short) description. Example: var d = payment.getDescription();
getDetailsGets an object with the payment details. Example: var d = payment.getDetails();
getInvoiceNumberGets the custom invoice number. Example: var i = payment.getInvoiceNumber();
setAmountSets the price. Example: payment.setAmount(1.25);
setBnCodeSets a BN code. Example: payment.setBnCode('Your BN Code');
setCurrencySets the custom currency to use. Example: payment.setCurrency('EUR');
setCustomSets the custom value for the payment. Example: payment.setCustom('MY-PRODUCT-ID');
setDetailsSets details (shipping, subtotal & tax). Example: payment.setDetails(4.95, 199.99, 1.19);
setDescriptionSets the (short) description. Example: payment.setDescription('This is really awesom!');
setInvoiceNumberSets the custom invoice number. Example: payment.setInvoiceNumber('MY_INVOICE-666');
startStarts the payment / checkout process.
\n
start
\n

The callback that is submitted to the payment.start method receives an object with the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
codeThe result code. 0 = success, -3 = JSON parse error, -2 = unhandled exception, -1 = checkout failed, 1 = cancelled, 2 = no confirm data, 3 = no JSON data
keyThe key of the payment (if code = 0)
\n

Enhancements

\n

Logging

\n

If you want to get the logging output of the module, you can use PayPal.addLogger function to add a callback that receives a message from the module:

\n
PayPal.addLogger(function(msg) {
    console.log('[nativescript-paypal]: ' + msg);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-popup":{"name":"nativescript-popup","version":"1.5.0","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

tns plugin add nativescript-popup

\n

Screenshots

\n

\"Popup

\n

Usage

\n
    <Button tap=\"openPopup\"/>
\n
    import { Popup } from 'nativescript-popup';

    function openPopup(args){
    const popup = new Popup({
        backgroundColor:'white' | '#fff',
        height:100,
        width:100,
        unit:'dp' | 'px' | '%',
        elevation:10, // android only
        borderRadius:25 // android only
    });
    const view = new Label();
    view.text = \"Test\";

    /* IOS */
    const nativeView = UILabel.new();
    nativeView.text = \"Native Button\";
    nativeView.frame = CGRectMake(0,0,50,50);
    /* -- IOS */

    /* Android */
    const nativeView = new new android.widget.TextView(context);
    nativeView.setText(\"Native Button\");
    nativeView.setWidth(50);
    nativeView.setHeight(50);
    /* -- Android */

    popup.showPopup(anchor: View | nativeView , view: View | nativeView);
    }
\n

API

\n

Constructor

\n

Popup(options: PopupOptions)

\n

Constructor Example

\n
import { Popup, PopupOptions } from \"nativescript-popup\";

const opts: PopupOptions = {
  backgroundColor: \"white\" | \"#fff\",
  height: 100,
  width: 100,
  unit: \"dp\" | \"px\" | \"%\",
  elevation: 10, // android only
  borderRadius: 25 // android only
};

const popup = new Popup(opts);
\n

Popup Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
showPopup(source: any, view: any): PromiseShows the popup anchored to the source argument with the view argument as the popup contents. The view argument can be a native Android/iOS view, a NativeScript View, or a string path to a template within the app directory.
hidePopup(data?: any): PromiseHides the popup and removes it from the view hierarchy.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@busychild/nativescript-exoplayer":{"name":"@busychild/nativescript-exoplayer","version":"6.0.3","license":"Apache-2.0","readme":"

@nstudio/nativescript-exoplayer

\n

NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

\n
npm install @nstudio/nativescript-exoplayer
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Google ExoPlayeriOS AVPlayer
\n

For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

\n

Based on

\n

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

\n

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

\n

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
        <StackLayout>

            <exoplayer:Video id=\"nativeexoplayer\"
            controls=\"true\" finished=\"{{ videoFinished }}\"
            loop=\"true\" autoplay=\"false\" height=\"280\"
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>
\n

NativeScript Angular Usage

\n
// somewhere at top of your component or bootstrap file
import { registerElement } from \"@nativescript/angular\";
import { Video } from '@nstudio/nativescript-exoplayer';
registerElement(\"Video\", () => Video);
\n
  <Video
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\"
      height=\"300\"></Video>
\n

Properties

\n\n

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n\n\n\n

By default, subtitle support is off. Use this flag to turn them on.

\n\n

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

\n\n

Set if the video should start playing as soon as possible or to wait for user interaction.

\n\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n\n

Set to use the native video player's media playback controls.

\n\n

Mutes the native video player.

\n\n

Sets the native video player to loop once playback has finished.

\n\n

If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

\n\n

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

\n

iOS:

\n\n

See here for explanation.

\n\n

Attribute to specify an event callback to execute when the video is ready to play.

\n\n

Attribute to specify an event callback to execute when the video has finished seekToTime.

\n\n

If set to true, currentTimeUpdated callback is possible.

\n\n

Attribute to specify an event callback to execute when the time is updated.

\n

API

\n\n

Android only

\n\n

Breaking Changes

\n\n

ExoPlayer Encryption (Android only)

\n

Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

\n\n
key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
iv =015E42FF678B2B90B743111A396EF850
\n

Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

\n
salt=42D57450DAF116BD
key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
iv =ED07304DF8D0D0AFA2EB9B13D75BD817
\n

Create the Encrypted video file

\n\n

Contributors

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wave-refresh":{"name":"nativescript-wave-refresh","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-wave-refresh/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Wave-Refresh :recycle:

\n

NativeScript plugin for a custom pull-to-refresh layout.

\n

Demo

\n

\"Demo\"

\n

Native Library

\n

Wave Swipe Refresh Layout

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

tns plugin add nativescript-wave-refresh

\n

Usage

\n

XML

\n
<page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:WR=\"nativescript-wave-refresh\" loaded=\"pageLoaded\">
  <ActionBar title=\"Wave Refresh\" backgroundColor=\"#FF4081\" color=\"#fff\" />
  <stack-layout>
    <WR:WaveRefresh backgroundColor=\"#FF4081\" refresh=\"{{ stopRefresh }}\" id=\"waveRefresh\">
      <list-view items=\"{{ users }}\">
        <list-view.itemTemplate>
          <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
        </list-view.itemTemplate>
      </list-view>
    </WR:WaveRefresh>
  </stack-layout>
</page>
\n

TS

\n
import { WaveRefresh } from \"nativescript-wave-refresh\"

  public stopRefresh(args: any) {
    // Load more data here and then set 'refreshing = false' to end the refresh
    let waveRefresh: WaveRefresh = args.object;
    waveRefresh.refreshing = false;
  }
\n

Attributes

\n

refresh : function optional - function executed when the WaveRefresh starts refreshing.

\n

backgroundColor is supported to specify the background color of the wave refresh. This will help to blend it in with the ActionBar.

\n

API

\n

refreshing

\n

Property. Notifies the widget that the refresh state has changed.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/sleepcontrol":{"name":"@angelengineering/sleepcontrol","version":"1.1.0","license":"Apache-2.0","readme":"

@angelengineering/sleepcontrol

\n

Nativescript sleepcontrol \"apple\" \"android\"

\n

This plugin allows you to keep your device awake while the current app is running, or allow it to sleep while the current app is running. This will not affect other apps, and the screen will be prevented from sleep only while the current application is running.

\n
ns plugin add @angelengineering/sleepcontrol
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin repository.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/sleepcontrol.ts.

\n

In short here are the steps:

\n

Import the plugin functions

\n

TypeScript

\n
import { allowSleep, denySleep, isSleepAllowed } from '@angelengineering/sleepcontrol';
\n

Use the plugin

\n
allowSleep();
denySleep();
\n

Exposed properties

\n
export function isSleepAllowed(): boolean;
export function denySleep(): void;
export function allowSleep(): void;
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hendrickson-tyler/eslint-config":{"name":"@hendrickson-tyler/eslint-config","version":"4.2.0","license":"MIT","readme":"

Lint Rules

\n

\"CodeQL\"

\n

Description

\n

This package contains a set of ESLint configs for a variety of languages, libraries, and frameworks. This is meant to ensure each of my personal projects has the same set of rules to keep them consistent. You are welcome to use these for your own projects.

\n

Configs

\n

Config files exist for the following use cases and are summarized below. You can mix and match these as needed and several configs inherit other configs automatically.

\n\n

Installation

\n

From the root folder of your project, install the package with the following command:

\n
npm i @hendrickson-tyler/eslint-config --save-dev
\n

Angular Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Package VersionAngular Version Support
1.x.x13
2.x.x14
3.x.x15
4.x.x16
\n

Usage

\n

Once the package is installed, add the desired configs to the "extends" section of the eslintrc.json in the root of your project:

\n
{
    \"root\": true,
    \"ignorePatterns\": [
        \"projects/**/*\"
    ],
    \"overrides\": [
        {
            \"files\": [
                \"*.ts\"
            ],
            \"parserOptions\": {
                \"project\": [
                    \"tsconfig.json\"
                ],
                \"createDefaultProgram\": true
            },
            \"extends\": [
                \"@hendrickson-tyler/eslint-config/angular\"
            ],
            ...
        }
        ...
    ]
}
\n

Afterwards, you will be able to run your desired lint command to use the newly-imported lint rules.

\n
\n

NOTE: Keeping this package up to date is highly recommended. Be sure that the version number in your package.json contains a ^ before the version number to update to the newest minor version when using npm update.

\n
\n

Example:

\n
\"devDependencies\": {
    ...
    \"@hendrickson-tyler/eslint-config\": \"^4.0.0\",
    ...
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ontrackms/nativescript-dotenv":{"name":"@ontrackms/nativescript-dotenv","version":"1.0.1","license":"ISC","readme":"

NativeScript Dotenv Plugin

\n

Developed by Ontrack!

\n

Installation

\n

npm i -D @ontrackms/nativescript-dotenv

\n

Usage

\n
// webpack.config.js
const { NativeScriptDotenv } = require(\"@ontrackms/nativescript-dotenv\");

module.exports = (env) => {
  //..

  NativeScriptDotenv.init(webpack);
  
  //..
};
\n

Configuration

\n
NATIVESCRIPT_BUNDLE_ID=com.corp.app.test
NATIVESCRIPT_BUNDLE_VERSION=3.2.1
NATIVESCRIPT_APPLE_TEAM_ID=ASDFG1234
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collapsing-header":{"name":"nativescript-collapsing-header","version":"2.0.0","license":"MIT","readme":"

#NativeScript Collapsing Header Plugin for Android & iOS.

\n

\"NativeScript\n###Install\n$ tns plugin add nativescript-collapsing-header

\n

###Example xml useage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
\t xmlns:collapsingHeader=\"nativescript-collapsing-header\"
\tloaded=\"pageLoaded\">
  \t<collapsingHeader:CollapsingHeader>
\t\t<collapsingHeader:Header class=\"header-template\">
\t\t\t<Label id=\"headerLabel\" text=\"Collapsing Header\"></Label>
\t\t</collapsingHeader:Header>
\t\t<collapsingHeader:Content class=\"body-template\">
\t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.
\t\t\t\">
\t\t\t</TextView>
\t\t</collapsingHeader:Content>
\t</collapsingHeader:CollapsingHeader>
</Page>
\n

###Example css

\n
#headerLabel{
\tfont-size: 25;
\thorizontal-align: center;
\tcolor:#B2EBF2;
\tmargin-top: 20;
}
.header-template{
\tbackground-color:#212121;
\theight: 65;
\twidth: 100%;
}
.body-template TextView{
\tfont-size:20;
\tpadding:5 15;
\tborder:none;
}
\n

To use the collapsing header plugin you need to first import it into your xml layout with xmlns:collapsingHeader="nativescript-collapsing-header"

\n

when using the collapsing header plugin you need at least two layout views inside of the <collapsingHeader:CollapsingHeader> element. <collapsingHeader:Header> and <collapsingHeader:Content>.

\n

The <collapsingHeader:Header> has a property called dropShadow if set to true it will create a small drop shadow effect on the bottom of the header.

\n

##{N} ListView support.\nAs of version 2.0.0 list view support has been added. Instead of a <collapsingHeader:Content> elment, add a <ListView> like you would normally, see below for and example.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
\t xmlns:collapsingHeader=\"nativescript-collapsing-header\"
\tloaded=\"pageLoaded\">
  \t<collapsingHeader:CollapsingHeader>
\t\t<collapsingHeader:Header class=\"header-template\">
\t\t\t<Label id=\"headerLabel\" text=\"Collapsing Header\"></Label>
\t\t</collapsingHeader:Header>
\t\t<ListView id=\"songList\" items=\"{{items}}\"  separatorColor=\"#333\">
\t\t\t<ListView.itemTemplate>
\t\t\t<GridLayout columns=\"auto, *, auto\" rows=\"auto\"  class=\"list-item\">
\t\t\t\t<StackLayout row=\"0\" col=\"1\">
\t\t\t\t<Label text=\"{{title}}\" textWrap=\"true\" class=\"title\"></Label>
\t\t\t\t<Label text=\"{{artist}}\" textWrap=\"true\" class=\"title-sub\"></Label>
\t\t\t\t</StackLayout>
\t\t\t</GridLayout>
\t\t\t</ListView.itemTemplate>
\t\t</ListView>
\t</collapsingHeader:CollapsingHeader>
</Page>
\n

iOS Only

\n

to change the status bar color you there is a property for the <collapsingHeader:CollapsingHeader> element called statusIosBarBackgroundColor if not it defaults to white.

\n

###Plugin Development Work Flow.

\n\n

###Special thanks to:\nNathan Walker for setting up the {N} plugin seed that I used to get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

\n

##License

\n

MIT

\n

for {N} version 1.7.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/localize":{"name":"@nativescript/localize","version":"5.2.0","license":"Apache-2.0","readme":"

@nativescript/localize

\n

Contents

\n\n

Intro

\n

A plugin that implements internationalization (i18n) using the native capabilities of each platform. It is inspired by nativescript-i18n

\n

Installation

\n

To install the plugin, run the following command in the root directory of your project.

\n
npm install @nativescript/localize
\n

Use @nativescript/localize

\n

This section describes how to use the @nativescript/localize plugin in several flavors that NativeScript supports.

\n

Localization in NativeScript Core

\n
    \n
  1. Create a folder named i18n in the app folder, with the following structure:
    2. \n
\n
app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)
\n

es.default.json example:

\n
{
    \"app.name\" : \"Comida Rica!\",
    
    \"user\":{
        \"name\": \"Paula\"
    }
}
\n
    \n
  1. In the main.ts file, register the localize function with the setResources method of the Appilcation class, as follows.
    2. \n
\n
import { Application } from \"@nativescript/core\";
import { localize } from '@nativescript/localize';

Application.setResources({ L: localize });
\n

Then, use the L property in the markup.

\n

  <StackLayout>
    <Label text=\"{{ 'Hello world !' | L }}\" />
    <Label text=\"{{ 'I am ' + L('user.name') }}\" />
  </StackLayout>
\n

To localize in code-behind, just call the localize method directly.

\n
import { localize } from '@nativescript/localize';

console.log(localize('Hello world !'));
\n

Quirks

\n

⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

\n
const page = args.object;
page.bindingContext = new Observable();
\n

Localization in Angular

\n
    \n
  1. Create a folder i18n in the src folder, with the following structure:
    2. \n
\n
src
  | i18n
      | en.json           <-- english language
      | fr.default.json   <-- french language (default)
      | es.js
\n

You need to set the default langage and make sure it contains\nthe application name to avoid any errors.

\n
    \n
  1. Register the localizing module(NativeScriptLocalizeModule) in the app.module.ts file
    2. \n
\n
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptLocalizeModule } from '@nativescript/localize/angular';
import { NativeScriptModule } from '@nativescript/angular';

import { AppComponent } from './app.component';

@NgModule({
\tdeclarations: [AppComponent],
\tbootstrap: [AppComponent],
\timports: [NativeScriptModule, NativeScriptLocalizeModule],
\tschemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
\n
    \n
  1. Then, in an HTML file, use the localizer as follows:
    2. \n
\n
<Label text=\"{{ 'Hello world !' | L }}\"/>
<Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
\n

Localization in Vue

\n
    \n
  1. Create a folder named i18n in the app folder, with the following structure:
    2. \n
\n
app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)
\n

es.default.json example:

\n
{
    \"app.name\" : \"Comida Rica!\",
    
    \"user\":{
        \"name\": \"Paula\"
    }
}
\n
    \n
  1. To localize in Vue3, import the localize method\nand call it in markup.
    2. \n
\n
import { localize } from '@nativescript/localize';
\n
<ActionBar>
\t<Label :text=\"localize('app.name')\" class=\"font-bold text-lg bg-black\" />
</ActionBar>

<StackLayout class=\"px-4\">
\t<Label :text=\"localize('user.name')\" textWrap=\"true\" />
</StackLayout>
\n

Localization in Svelte

\n
    \n
  1. Create a folder named i18n in the app folder, with the following structure:
    2. \n
\n
app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)
\n

es.default.json example:

\n
{
    \"app.name\" : \"Comida Rica!\",
    
    \"user\":{
        \"name\": \"Paula\"
    }
}
\n
    \n
  1. To localize in Svelte, import the localize method and then call it in markup.
    2. \n
\n
import { localize } from '@nativescript/localize';
\n
<actionBar>
\t<label text={ localize('app.name') } class=\"font-bold text-lg bg-black\" />
</actionBar>

<stackLayout class=\"px-4\">
\t<label text={ 'Nombre: ' + localize('user.name')}/>
</stackLayout>
\n

Setting the default language

\n

To set the default language, add a .default extension to the name of the default language file.

\n
fr.default.json
\n

Make sure it contains the application name to avoid any errors.

\n

Android uses the locale file corresponding to the device's language. For example, if the device's language is set to Spanish, the es.json will be used.

\n

Localizing the application name

\n

To localize the application name, use the app.name key.

\n
{
\t\"app.name\": \"My app\"
}
\n

File format

\n

Each file is imported using require, so use the file format of your choice:

\n

JSON

\n
{
\t\"app.name\": \"My app\",
\t\"ios.info.plist\": {
\t\t\"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
\t},
\t\"user\": {
\t\t\"name\": \"user.name\",
\t\t\"email\": \"user.email\"
\t},
\t\"array\": [\"split the translation into \", \"multiples lines\"],
\t\"sprintf\": \"format me %s\",
\t\"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
}
\n

Javascript

\n
export const i18n = {
\t'app.name': 'My app',
};
\n

Localizing iOS properties

\n

To localize an iOS property, prefix it with ios.info.plist.. The example below shows how to localize the NSLocationWhenInUseUsageDescription property.

\n
{
\t\"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
}
\n

Changing the language dynamically at runtime

\n

To change the language dynamically at runtime, use the overrideLocale method.

\n

iOS

\n
import { overrideLocale } from '@nativescript/localize';
const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
\n

Android

\n

For Android, first, call the androidLaunchEventLocalizationHandler method in the launchEvent handler, in the main.ts file.

\n
import { Application } from '@nativescript/core';
import { androidLaunchEventLocalizationHandler } from '@nativescript/localize';

Application.on(Application.launchEvent, (args) => {
\tif (args.android) {
\t\tandroidLaunchEventLocalizationHandler();
\t}
});
\n

Then, in your settings page where the user chooses the language, call the overrideLocale method:

\n
import { overrideLocale } from '@nativescript/localize';
const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
\n
\n

Important: On both platforms, after calling overrideLocale method, you must ask the user to restart the app.

\n
\n

For Example:

\n
import { Application } from '@nativescript/core';
import { overrideLocale } from '@nativescript/localize';

alert({
\ttitle: 'Switch Language',
\tmessage: 'The application needs to be restarted to change language',
\tokButtonText: 'Quit!',
}).then(() => {
\tL.localize.overrideLocale(selectedLang);
\tif (isAndroid) {
\t\t(Application.android.foregroundActivity || Application.android.startActivity).finish();
\t} else {
\t\texit(0);
\t}
});
\n
\n

Important: In case you are using Android app bundle to release your android app, add the following to App_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

\n
\n
android {

  // there maybe other code here //

  bundle {
    language {
      enableSplit = false
    }
  }
}
\n
\n

Tip: you can get the default language on user's phone via the language property of the Device class.

\n
\n
import { Device } from '@nativescript/core';

console.log(\"user's language is\", Device.language.split('-')[0]);
\n
\n

Tip: The overrideLocale method stores the language in a special key in app-settings, you can access it like this

\n
\n
import { ApplicationSettings } from '@nativescript/core';

console.log(ApplicationSettings.getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
\n

Troubleshooting

\n

Angular localization pipe and the modal context

\n

The angular localization pipe does not work when in a modal context.\nAs a workaround, you can trigger a change detection from within your component constructor:

\n
constructor(
  private readonly params: ModalDialogParams,
  private readonly changeDetectorRef: ChangeDetectorRef,
) {
  setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
}
\n

Issues with WebView on Android N+

\n

On Android N+, the first creation of a WebView resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is a native bug and the workaround is

\n
 <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
\n
import { overrideLocale, androidLaunchEventLocalizationHandler } from '@nativescript/localize';
import { ApplicationSettings } from '@nativescript/core';
const locale = ApplicationSettings.getString('__app__language__');

function webViewLoaded() {
\toverrideLocale(locale);
\tandroidLaunchEventLocalizationHandler();
}
\n

API

\n

The plugin provides the following functions.

\n

localize()

\n
localizeString: string = localize(key, ...args)
\n

Retrieves the translation for the specified key from a .json file in the i18n directory.

\n
\n

overrideLocale()

\n
isLocaleOverwritten: boolean = overrideLocale(locale)
\n

Overrides the current locale with the specified locale parameter.

\n
\n

androidLaunchEventLocalizationHandler()

\n
androidLaunchEventLocalizationHandler()
\n
\n

Credits

\n

A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me. Eddy then joined NativeScript's Technical Steering Committee and to vastly improve plugin maintenance it was scoped and moved here

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/unit-test-runner":{"name":"@nativescript/unit-test-runner","version":"3.0.4","license":"Apache-2.0","readme":"

Unit test runner for NativeScript

\n

Refer to the documentation of NativeScript CLI's ns test init command for usage.

\n

If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

\n

Troubleshooting

\n

If you see an error like this:

\n
Error: connect ECONNREFUSED ::1:9876
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1195:16)
\n

When using node 17 or higher, make sure your karma.conf.js contains a server hostname setting, for example:

\n
// web server hostname (ensure this is present)
hostname: '127.0.0.1',

// web server port
port: 9876,
\n

See here for changeset in CLI which adds that to all newly initialized unit test setups.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-explosionfield":{"name":"nativescript-explosionfield","version":"1.1.1","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-explosionfield/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"PayPal

\n

NativeScript-ExplosionField

\n

NativeScript plugin to create an exploding dust effect animation for Android {N} apps.

\n

ExplosionField - tyrantgit

\n

Android Only

\n

Installation

\n

npm install nativescript-explosionfield

\n

Sample

\n

\"GifExample\"

\n

This .gif does not do the animation justice, please watch the YouTube video\nto see how smooth it really is. Watch here on YouTube

\n

Usage

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
  <StackLayout>
    <Button text=\"Boom\" tap=\"goBoom\" />
    <Label text=\"Explode This\" tap=\"goBoom\" />
  </StackLayout> 
</Page>
\n

JS

\n
// require the plugin module
var explosion = require(\"nativescript-explosionfield\");

function goBoom(args) {    
    // call the *explode* method on the plugin passing in a view
    // on tap events in Nativescript this will be args.object.
    explosion.explode(args.object);
}
exports.goBoom = goBoom;
\n

API

\n

explode(view)

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-jwt":{"name":"nativescript-angular-jwt","version":"1.0.9","license":"MIT","readme":"

nativescript-angular-jwt

\n

\"npm

\n

NOTE: This library is now at version 5 and is published on npm as nativescript-angular-jwt. If you're looking for the pre-v1.0 version of this library, it can be found in the pre-v1.0 branch and on npm as angular2-jwt.

\n

Version v5 of this library has some breaking changes concerning the allowedDomains and disallowedRoutes.

\n

nativescript-angular-jwt v5 is to be used with Angular v10+ and RxJS v6+. For Angular v6+ to v9, use nativescript-angular-jwt v4

\n

This library provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.

\n

This library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or in a cookie if successful.

\n
\n

Note: This library can only be used with Angular 4.3 and higher because it relies on an HttpInterceptor from Angular's HttpClient. This feature is not available on lower versions.

\n
\n

Installation

\n
# installation with npm
npm install nativescript-angular-jwt

# installation with yarn
yarn add nativescript-angular-jwt
\n

Usage: Standalone

\n

If you are only interested in the JWT Decoder, and are not interested in extended\ninjectable features, you can simply create an instance of the utility and use it\ndirectly:

\n
import { JwtHelperService } from \"nativescript-angular-jwt\";

const helper = new JwtHelperService();

const decodedToken = helper.decodeToken(myRawToken);
const expirationDate = helper.getTokenExpirationDate(myRawToken);
const isExpired = helper.isTokenExpired(myRawToken);
\n

Usage: Injection

\n

Import the JwtModule module and add it to your imports list. Call the forRoot method and provide a tokenGetter function. You must also add any domains to the allowedDomains, that you want to make requests to by specifying an allowedDomains array.

\n

Be sure to import the HttpClientModule as well.

\n
import { JwtModule } from \"nativescript-angular-jwt\";
import { HttpClientModule } from \"@angular/common/http\";

export function tokenGetter() {
  return localStorage.getItem(\"access_token\");
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // ...
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: [\"example.com\"],
        disallowedRoutes: [\"http://example.com/examplebadroute/\"],
      },
    }),
  ],
})
export class AppModule {}
\n

Any requests sent using Angular's HttpClient will automatically have a token attached as an Authorization header.

\n
import { HttpClient } from \"@angular/common/http\";

export class AppComponent {
  constructor(public http: HttpClient) {}

  ping() {
    this.http.get(\"http://example.com/api/things\").subscribe(
      (data) => console.log(data),
      (err) => console.log(err)
    );
  }
}
\n

Configuration Options

\n

tokenGetter: function(HttpRequest): string

\n

The tokenGetter is a function which returns the user's token. This function simply needs to make a retrieval call to wherever the token is stored. In many cases, the token will be stored in local storage or session storage.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    tokenGetter: () => {
      return localStorage.getItem(\"access_token\");
    },
  },
});
\n

If you have multiple tokens for multiple domains, you can use the HttpRequest passed to the tokenGetter function to get the correct token for each intercepted request.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    tokenGetter: (request) => {
      if (request.url.includes(\"foo\")) {
        return localStorage.getItem(\"access_token_foo\");
      }

      return localStorage.getItem(\"access_token\");
    },
  },
});
\n

allowedDomains: array

\n

Authenticated requests should only be sent to domains you know and trust. Many applications make requests to APIs from multiple domains, some of which are not controlled by the developer. Since there is no way to know what the API being called will do with the information contained in the request, it is best to not send the user's token to all APIs in a blind fashion.

\n

List any domains you wish to allow authenticated requests to be sent to by specifying them in the allowedDomains array. Note that standard http port 80 and https port 443 requests don't require a port to be specified. A port is only required in the allowed domains host name if you are authenticating against a non-standard port e.g. localhost:3001

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    allowedDomains: [\"localhost:3001\", \"foo.com\", \"bar.com\"],
  },
});
\n

disallowedRoutes: array

\n

If you do not want to replace the authorization headers for specific routes, list them here. This can be useful if your\ninitial auth route(s) are on an allowed domain and take basic auth headers. These routes need to be prefixed with the correct protocol (http://, https://). If you want to add a route to the list of disallowed routes regardless of the protocol, you can prefix it with //.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    disallowedRoutes: [
      \"http://localhost:3001/auth/\",
      \"https://foo.com/bar/\",
      \"//foo.com/bar/baz\",
      /localhost:3001\\/foo\\/far.*/,
    ], // strings and regular expressions
  },
});
\n

Note: If requests are sent to the same domain that is serving your Angular application, you do not need to add that domain to the allowedDomains array. However, this is only the case if you don't specify the domain in the Http request.

\n

For example, the following request assumes that the domain is the same as the one serving your app. It doesn't need to be allowed in this case.

\n
this.http.get('/api/things')
  .subscribe(...)
\n

However, if you are serving your API at the same domain as that which is serving your Angular app and you are specifying that domain in Http requests, then it does need to be explicitely allowed.

\n
// Both the Angular app and the API are served at
// localhost:4200 but because that domain is specified
// in the request, it must be allowed
this.http.get('http://localhost:4200/api/things')
  .subscribe(...)
\n

headerName: string

\n

The default header name is Authorization. This can be changed by specifying a custom headerName which is to be a string value.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    headerName: \"Your Header Name\",
  },
});
\n

authScheme: string | function(HttpRequest): string

\n

The default authorization scheme is Bearer followed by a single space. This can be changed by specifying a custom authScheme. You can pass a string which will prefix the token for each request.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    authScheme: \"Basic \",
  },
});
\n

If you want to change the auth scheme dynamically, or based on the request, you can configure a getter function which returns a string.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    authScheme: (request) => {
      if (request.url.includes(\"foo\")) {
        return \"Basic \";
      }

      return \"Bearer \";
    },
  },
});
\n

throwNoTokenError: boolean

\n

Setting throwNoTokenError to true will result in an error being thrown if a token cannot be retrieved with the tokenGetter function. Defaults to false.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    throwNoTokenError: true,
  },
});
\n

skipWhenExpired: boolean

\n

By default, the user's JWT will be sent in HttpClient requests even if it is expired. You may choose to not allow the token to be sent if it is expired by setting skipWhenExpired to true.

\n
// ...
JwtModule.forRoot({
  config: {
    // ...
    skipWhenExpired: true,
  },
});
\n

Using a Custom Options Factory Function

\n

In some cases, you may need to provide a custom factory function to properly handle your configuration options. This is the case if your tokenGetter function relies on a service or if you are using an asynchronous storage mechanism (like Ionic's Storage).

\n

Import the JWT_OPTIONS InjectionToken so that you can instruct it to use your custom factory function.

\n

Create a factory function and specify the options as you normally would if you were using JwtModule.forRoot directly. If you need to use a service in the function, list it as a parameter in the function and pass it in the deps array when you provide the function.

\n
import { JwtModule, JWT_OPTIONS } from 'nativescript-angular-jwt';
import { TokenService } from './app.tokenservice';

// ...

export function jwtOptionsFactory(tokenService) {
  return {
    tokenGetter: () => {
      return tokenService.getAsyncToken();
    },
    allowedDomains: [\"example.com\"]
  }
}

// ...

@NgModule({
  // ...
  imports: [
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [TokenService]
      }
    })
  ],
  providers: [TokenService]
})
\n

Note:: If a jwtOptionsFactory is defined, then config is ignored. Both configuration alternatives can't be defined at the same time.

\n

Configuration for Ionic 2+

\n

The custom factory function approach described above can be used to get a token asynchronously with Ionic's Storage.

\n
import { JwtModule, JWT_OPTIONS } from 'nativescript-angular-jwt';
import { Storage } from '@ionic/storage';

export function jwtOptionsFactory(storage) {
  return {
    tokenGetter: () => {
      return storage.get('access_token');
    },
    allowedDomains: [\"example.com\"]
  }
}

// ...

@NgModule({
  // ...
  imports: [
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [Storage]
      }
    })
  ]
})
\n

Note:: If a jwtOptionsFactory is defined, then config is ignored. Both configuration alternatives can't be defined at the same time.

\n

Configuration Options

\n

JwtHelperService: service

\n

This service contains helper functions:

\n

isTokenExpired (old tokenNotExpired function)

\n
import { JwtHelperService } from 'nativescript-angular-jwt';
// ...
constructor(public jwtHelper: JwtHelperService) {}

ngOnInit() {
console.log(this.jwtHelper.isTokenExpired()); // true or false
}
\n

getTokenExpirationDate

\n
import { JwtHelperService } from 'nativescript-angular-jwt';
// ...
constructor(public jwtHelper: JwtHelperService) {}

ngOnInit() {
console.log(this.jwtHelper.getTokenExpirationDate()); // date
}
\n

decodeToken

\n
import { JwtHelperService } from 'nativescript-angular-jwt';
// ...
constructor(public jwtHelper: JwtHelperService) {}

ngOnInit() {
console.log(this.jwtHelper.decodeToken(token)); // token
}
\n

What is Auth0?

\n

Auth0 helps you to:

\n\n

Create a free Auth0 account

\n
    \n
  1. Go to Auth0 and click Sign Up.
    2. \n
  2. Use Google, GitHub or Microsoft Account to login.
    3. \n
\n

Issue Reporting

\n

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

\n

Author

\n

Auth0

\n

License

\n

This project is licensed under the MIT license. See the LICENSE file for more info.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-media-query":{"name":"@nativescript-use/nativescript-media-query","version":"0.0.4","license":"Apache-2.0","readme":"

@nativescript-use/nativescript-media-query

\n
npm install @nativescript-use/nativescript-media-query
\n

Usage

\n
import { matchMedia, MediaQueryList } from \"@nativescript-use/nativescript-media-query\"

const mql: MediaQueryList = matchMedia(\"(min-width: 400)\");

if (mql.matches) {
  /* The screen is at least 400 dpi wide */
} else {
  /* The screen is less than 400 dpi wide */
}


// Add listener
mql.onchange = (event: MediaQueryListEvent) => {
      // some logic
}); 

const myListener = () => console.log(\"Change!\");
    
mql.addListener(myListener);

// Remove listener
mql.removeListener(myListener);
\n

Type declaration

\n
export interface MediaQueryList {
    readonly matches: boolean;
    readonly media: string;
    onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
    addListener(listener: MediaQueryListListener): void;
    removeListener(listener: MediaQueryListListener): void;
}

export type MediaQueryListListener = (mql: MediaQueryList) => void;

export interface MediaQueryListEvent {
    readonly matches: boolean;
    readonly media: string;
}

export declare function matchMedia(mediaQueryString: string): MediaQueryList;
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancyalert":{"name":"nativescript-fancyalert","version":"3.1.1","license":"MIT","readme":"

NativeScript 7 or higher

\n\n

If using 6 and below, see the following:

\n

Fancy alerts for NativeScript.

\n

Based on:

\n\n

Install

\n

NativeScript 4x

\n
tns plugin add nativescript-fancyalert
\n

NativeScript 3x and older

\n
tns plugin add nativescript-fancyalert@1.2.0
\n

\"Sample

\n

\"Sample

\n

iOS Specifications

\n

Usage Examples

\n
import { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";

// show success
TNSFancyAlert.showSuccess(
  \"Success!\",
  \"Fancy alerts are nice.\",
  \"Yes they are!\"
);

// set customizations
TNSFancyAlert.showAnimationType =
  TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;
TNSFancyAlert.hideAnimationType =
  TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;
TNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;
TNSFancyAlert.soundURL = \"bell.mp3\";
TNSFancyAlert.showSuccess(
  \"Sound?\",
  \"You can use sound and customize many aspects like animation in/out, color, background style and much more.\",
  \"Amazing!\"
);

// show custom image
TNSFancyAlert.showCustomImage(
  \"nativescript.png\",
  \"#2B33FF\",
  \"Custom Image\",
  `Using your own images is sure nice.`,
  \"Yes!\"
);

// show custom button timer
TNSFancyAlert.showCustomButtonTimer(
  0,
  true,
  undefined,
  undefined,
  \"Mission Impossible\",
  `This will self-destruct in 5 seconds.`,
  \"Ok\"
);

// show custom buttons
let buttons = [
  new TNSFancyAlertButton({
    label: \"One\",
    action: () => {
      console.log(\"One\");
    }
  }),
  new TNSFancyAlertButton({
    label: \"Two\",
    action: () => {
      console.log(\"Two\");
    }
  }),
  new TNSFancyAlertButton({
    label: \"Three\",
    action: () => {
      console.log(\"Three\");
    }
  }),
  new TNSFancyAlertButton({
    label: \"Four\",
    action: () => {
      console.log(\"Four\");
    }
  }),
  new TNSFancyAlertButton({
    label: \"Really? More?\",
    action: () => {
      console.log(\"more\");
    }
  })
];
TNSFancyAlert.showCustomButtons(
  buttons,
  undefined,
  undefined,
  \"Got Buttons?\",
  `Add as many as you'd like.`,
  \"Ok\"
);

// show with custom width
TNSFancyAlert.showSuccess(
  \"Success!\",
  \"This uses a custom width of 300.\",
  `Oh that's nice.`,
  0,
  300
);

// show textfield
let initialValue = null;
TNSFancyAlert.showTextField(
  \"Enter your name\",
  initialValue,
  new TNSFancyAlertButton({
    label: \"Save\",
    action: (value: any) => {
      console.log(`User entered ${value}`);
    }
  }),
  undefined,
  undefined,
  \"User Input?\",
  `Yeah, sure we can.`,
  \"Ok, lots of options.\"
);

// show switch
TNSFancyAlert.showSwitch(
  `Don't show again`,
  \"#58B136\",
  new TNSFancyAlertButton({
    label: \"Save\",
    action: (isSelected: boolean) => {
      console.log(`Don't show again was selected: ${isSelected}`);
    }
  }),
  \"switch.png\",
  \"#B3714F\",
  \"Need a switch?\",
  `It can be useful.`,
  \"Got it.\"
);
\n

TNSFancyAlert - Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
TNSFancyAlert.SUPPORTED_TYPES: IFancyAlertSupportedTypesDifferent supported style types.
TNSFancyAlert.shouldDismissOnTapOutside: booleanShould dismiss when tapped outside.
TNSFancyAlert.dismissCallback: () => voidCallback for when alert is dismissed.
TNSFancyAlert.hideAnimationType: IFancyAlertHideAnimationTypesUse TNSFancyAlert.HIDE_ANIMATION_TYPES to set. Supports: FadeOut, SlideOutToBottom, SlideOutToTop, SlideOutToLeft, SlideOutToRight, SlideOutToCenter, SlideOutFromCenter.
TNSFancyAlert.showAnimationType: IFancyAlertShowAnimationTypesUse TNSFancyAlert.SHOW_ANIMATION_TYPES to set. Supports: FadeIn, SlideInFromBottom, SlideInFromTop, SlideInFromLeft, SlideInFromRight, SlideInFromCenter, SlideInToCenter.
TNSFancyAlert.backgroundType: IFancyAlertBackgroundTypesUse TNSFancyAlert.BACKGROUND_TYPES to set. Supports: Shadow, Blur, Transparent.
TNSFancyAlert.customViewColor: stringOverwrite (Buttons, top circle and borders) colors.
TNSFancyAlert.iconTintColor: stringSet custom tint color for icon image.
TNSFancyAlert.titleColor: stringSet custom title color.
TNSFancyAlert.bodyTextColor: stringSet custom body text color.
TNSFancyAlert.tintTopCircle: stringOverride top circle tint color with background color
TNSFancyAlert.cornerRadius: numberSet custom corner radius.
TNSFancyAlert.backgroundViewColor: stringOverwrite background color
TNSFancyAlert.useLargerIcon: booleanMake the top circle icon larger
TNSFancyAlert.soundURL: stringUse mp3 from App_Resources when alert shows.
TNSFancyAlert.textDisplayOptions: IFancyAlertTextOptionsIOS Only. Text display options
\n

TNSFancyAlert - Methods

\n\n

Android Specifications

\n

Usage Examples

\n

NOTE: Android supports only a subset of the iOS features, but will return a Promise on every call:

\n
import { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";

// show success
TNSFancyAlert.showSuccess(
  \"Success!\",
  \"Fancy alerts are nice.\",
  \"Yes they are!\"
).then(() => {
  /* user pressed the button */
});

// show error
TNSFancyAlert.showError(\"Error!\", \"Something bad happened.\", \"Close\").then(
  () => {
    /* user pressed the button */
  }
);
\n

TNSFancyAlert - Methods

\n\n

TNSFancyAlertButton (iOS only)

\n

This class can be instantiated on iOS to configure buttons in the fancy alerts.

\n
export class TNSFancyAlertButton {
  public label: string;
  public action: Function;
  public applyStyle: (btn: any) => void;

  constructor(model?: any) {
    if (model) {
      this.label = model.label;
      this.action = model.action;
      this.applyStyle = model.applyStyle;
    }
  }
}
\n\n

Here's an example of how to setup a custom background color:

\n
new TNSFancyAlertButton({
  label: 'Ok',
  action: () => {
    // the action to take
  },
  applyStyle: (btn: UIButton) => {
    // we can use UIButton typing when using tns-platform-declarations
    // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )
    // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize

    (<any>btn).buttonFormatBlock = () => {
      // set a custom backgroundColor
      return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);
    }
  }
}),
\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

Tutorials

\n

Need extra help getting these fancy alerts working in your application? Check out these tutorials that make use of the plugin:

\n

Fancy Alerts in a NativeScript with Angular Application

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-rxdb":{"name":"@herefishyfish/nativescript-rxdb","version":"1.0.5","license":"Apache-2.0","readme":"

@herefishyfish/nativescript-rxdb

\n
npm i @herefishyfish/nativescript-rxdb
\n

Thin wrappers for RxDB compatibility with NativeScript.

\n

See RxDB docs for more info on how to use RxDB.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share":{"name":"nativescript-social-share","version":"1.6.0","license":"MIT","readme":"

NativeScript Social Share Plugin

\n

A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

\n

\"\"\n\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-social-share
\n

This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");
var imageSourceModule = require(\"image-source\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
import { ImageSource } from \"image-source\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\");
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText(\"I love NativeScript!\");
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bancha/nativescript-checkbox":{"name":"@bancha/nativescript-checkbox","version":"2.0.13","license":"Apache-2.0","readme":"

@bancha/nativescript-checkbox

\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n
ns plugin add @bancha/nativescript-checkbox
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Usage

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@bancha/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n
import { CheckBox } from '@bancha/nativescript-checkbox';
import { Frame } from '@nativescript/core';

public toggleCheck() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@bancha/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
import { CheckBox } from '@bancha/nativescript-checkbox';
Vue.registerElement(
  'CheckBox',
  () => CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-swipe":{"name":"nativescript-image-swipe","version":"5.0.1","license":"Apache-2.0","readme":"

Contribution - help wanted

\n

This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

\n

Creating a PR checklist:

\n\n

Thank you for your contribution.

\n

NativeScript Image Swipe widget

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

\n

Screenshot

\n

\"Screenshot\"

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-image-swipe

\n

This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
    <GridLayout>
        <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                       pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
        </is:ImageSwipe>
    </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { PageChangeEventData } from \"nativescript-image-swipe\";

let viewModel: Observable;

export function navigatingTo(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

    viewModel = new Observable();
    viewModel.set(\"items\", items);
    viewModel.set(\"pageNumber\", 3);

    page.bindingContext = viewModel;
}

export function pageChanged(e: PageChangeEventData) {
    console.log(`Page changed to ${e.page}.`);
}
\n

Usage in Angular

\n

In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

\n
// main.ts
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { registerElement } from \"nativescript-angular/element-registry\";

import { AppModule } from \"./app.module\";

registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

platformNativeScriptDynamic().bootstrapModule(AppModule);
\n
<!-- test.component.html -->
<GridLayout>
    <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
    </ImageSwipe>
</GridLayout>
\n
// test.component.ts
import { Component, OnInit } from \"@angular/core\";
import { PageChangeEventData } from \"nativescript-image-swipe\";

@Component({
    selector: \"demo\",
    moduleId: module.id,
    templateUrl: \"./test.component.html\",
})
export class ImageSwipeComponent implements OnInit {
    public items: any[] = [];
    public pageNumber: number = 3;

    ngOnInit(): void {
        this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
    }

    public pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-image-swipe
$ cd nativescript-image-swipe
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"v8-natives":{"name":"v8-natives","version":"1.2.5","license":{"type":"MIT","url":"https://github.com/Nathanaela/v8-natives/blob/master/LICENSE"},"readme":"

v8-Natives

\n

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

Updated:

\n

Last Tested on Node 14 & Chrome 80+

\n

Access v8 Engine Natives easily in Chrome & Node

\n

I was reading a blog/wiki article at https://github.com/petkaantonov/bluebird/wiki/Optimization-killers and it presents some really low level diagnostic commands that I was totally unaware of; and so I found them to be totally awesome in scope for several things I do. The V8 engine has a large array of commands that you can call that can get and/or set status in the actual v8 engine. This library is my attempt to make my life a lot easier and eliminate the errors in trying to use the v8 native commands. These low level commands allow you access to tell the v8 engine to optimize a routine and then find out if a routine can/is optimized.

\n

Now, you can call the v8 native commands directly (for example %CollectGarbage()); however if you forget to use the --allow-natives-syntax then the v8 engine will immediately stop parsing the file as the v8 commands all start with a '%' which is invalid JavaScript... What this library does is it is a simple wrapper that wraps those calls; so that I can do (v8.CollectGarbage()). If you forgot the --allow-natives-syntax it will still run your code fine; it just won't do anything.

\n

In the examples folder is a browser example; to show you how it works in Chrome/Chromium (chrome --js-flags="--allow-natives-syntax" browser.html). You can run it in a non-v8 browser and it will just use the dummy shim.
\nIn addition there is a NodeJS example to show you the same support in NodeJS. (node --allow-natives-syntax node.js)

\n

Please note the examples and helper commands can show you how to use a good chunk of the optimization, general and Memory calls in the library. If someone wants to work up some examples using the variable/object information commands; they would gladly be accepted!

\n

Installing V8 Natives

\n
npm install v8-natives
\n

Breaking changes

\n

Removed from recent versions of V8

\n\n

Renamed in v8

\n\n

Usage

\n

Browser:

\n
<script src=\"v8-browser.js\" onload=\"waitForV8(some_callback)\"></script>
<script>function some_callback() { 
  v8.collectGarbage(); 
  /* more v8.commands */}
</script>
\n

Node:

\n
var v8 = require('v8-natives');   
v8.collectGarbage(); 
/* more v8 commands */
\n

Commands

\n

Helper Commands

\n\n

General Commands

\n\n

Memory Commands

\n\n

Optimization Commands

\n\n

Variable/Object information Commands

\n\n

Notes

\n

optimizedFunctionOnNextCall(func) needs the function ran before it can tag it for optimization. So the procedure is:

\n\n

ChangeLog

\n

v8 Internal function list has changed the following functions have been removed:

\n\n

v8 Renamed:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iqkeyboardmanager":{"name":"nativescript-iqkeyboardmanager","version":"1.5.1","license":"MIT","readme":"

NativeScript IQKeyboardManager Plugin

\n

NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

\n

\"Example

\n

Installation

\n
$ tns plugin add nativescript-iqkeyboardmanager
\n

Usage

\n

That's it! IQKeyboardManager takes care of all initialization when your app starts up by default.

\n

Advanced usage

\n

Grouping related textfields (previous / next buttons)

\n

If your UI layout has sibling text fields, then IQKeyboardManager is able to automatically\nadd previous / next buttons to the accessory bar which the user can use to jump back and forth.\nSee those < and > buttons in the video above.

\n

In case those fields were not direct siblings, until version 1.3.0 of this plugin, you had no way\nto force the previous / next buttons to appear. However, now you can:

\n

NativeScript /w XML usage

\n

Note in the example below that the two <TextField> controls are not siblings (both have parent <StackLayout> containers). Because of this, IQKeyboardManager will not automatically provide an optimized keyboard by default.

\n

However, if you surround the controls with this plugin's <PreviousNextView> control, as the example below shows, you will continue to get an optimized keyboard as expected.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
  <StackLayout>
    <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
      <StackLayout>
        <StackLayout>
          <TextField hint=\"Email\"/>
        </StackLayout>
        <StackLayout>
          <TextField hint=\"Password\"/>
        </StackLayout>
      </StackLayout>
    </IQKeyboardManager:PreviousNextView>
  </Stacklayout>
</Page>
\n

NativeScript /w Angular usage

\n

In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the PreviousNextView element:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"PreviousNextView\", () => require(\"nativescript-iqkeyboardmanager\").PreviousNextView);
\n

Then in the view, use that element like this (again, we went nuts with the <StackLayout>s:

\n
<StackLayout>
  <PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
    <StackLayout>
      <StackLayout>
        <TextField hint=\"Email\"></TextField>
      </StackLayout>
      <StackLayout>
        <TextField hint=\"Password\"></TextField>
      </StackLayout>
    </StackLayout>
  </PreviousNextView>
</Stacklayout>
\n

NativeScript /w Vue usage

\n

Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

\n
Vue.registerElement(\"PreviousNextView\", () => require(\"nativescript-iqkeyboardmanager\"). PreviousNextView)
\n

Adding a placeholder/hint on a TextView's accessory bar

\n

Looking at the gif above you may notice when focusing the Email address and password fields,\nthe placeholder/hint of those TextFields is shown in the accessory bar above the keyboard.

\n

But when you use a TextView instead of a TextField, the placeholder is not shown because\nof an iOS limitation. You can work around this limitation by using the TextViewWithHint\nprovided by this plugin. So whenever you want to use a TextView with a placeholder,\nuse TextViewWithHint instead.

\n

NativeScript /w XML usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
  <StackLayout>
    <TextView hint=\"Not working TextView hint\"/>
    <IQKeyboardManager:TextViewWithHint hint=\"Working TextView hint 🤪\"/>
  </StackLayout>
</Page>
\n

NativeScript /w Angular usage

\n

In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the TextViewWithHint element:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"TextViewWithHint\", () => require(\"nativescript-iqkeyboardmanager\").TextViewWithHint);
\n

Then in the view, use that element like this:

\n
<StackLayout>
  <TextView hint=\"Not working TextView hint\"></TextView>
  <TextViewWithHint hint=\"Working TextView hint 🤪\"></TextViewWithHint>
</Stacklayout>
\n

NativeScript /w Vue usage

\n

Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

\n
Vue.registerElement(\"TextViewWithHint\", () => require(\"nativescript-iqkeyboardmanager\").TextViewWithHint)
\n

Tweaking the appearance and behavior

\n

Start by adding the following two paths into your app’s references.d.ts file. (See this repo’s demo app for a specific example.)

\n
/// <reference path=\"./node_modules/tns-platform-declarations/ios/ios.d.ts\" />
/// <reference path=\"./node_modules/nativescript-iqkeyboardmanager/index.d.ts\" />
\n
\n

NOTE: You might also need to npm install --save-dev tns-platform-declarations to bring in NativeScript’s TypeScript definitions for native iOS development.

\n
\n

Next, initialize an instance of IQKeyboardManager with the following line of code.

\n
const iqKeyboard = IQKeyboardManager.sharedManager();
\n

You now have the full IQKeyboardManager APIs available for you to use. For example you could use the following code to switch to a dark keyboard.

\n
const iqKeyboard = IQKeyboardManager.sharedManager();
iqKeyboard.overrideKeyboardAppearance = true;
iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;
\n

For more examples of what's possible, run the demo app (shown in the gif below) and check out the app's main-view-model.ts file.

\n\n

Multi-factor one-time code auto-fill

\n

While the following is not a feature specific to IQKeyboardManager, you are here because you want the best keyboard experience for your NativeScript app and this may be helpful to know about.

\n

iOS has a feature where a text field's QuickType search suggestion bar can suggest one-time code values for multi-factor authentication that were texted to your device.

\n

If the field is specially-identified as a one-time code field, the suggestion will appear for about 3 minutes after being received, and the user simply has to tap the suggestion to fill in the value—no short term memorization or copy/paste gestures required. Examples of message formats are:

\n\n

To implement this functionality in your own app, first declare UITextContentTypeOneTimeCode near your component imports:

\n
declare var UITextContentTypeOneTimeCode;
\n

Then, set the field's ios.textContentType property:

\n
// This code assumes this.page exists as a reference to the current Page.
const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
if (mfaCodeField !== null && mfaCodeField.ios) {
  mfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
}
\n

There are other textContentType values you might want to use. You can read more about the property in this article.

\n

Documentation

\n

For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

\n

Maintainers

\n

For maintainer’s of this plugin’s source code: when the IQKeyboardManager Podfile updates, you should generate new typings for for this plugin to reflect those changes.

\n

To do so, execute these commands.

\n
cd demo
TNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios
TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios
\n

Next, locate IQKeyboardManager’s generated typings file in the demo/typings folder and override the IQKeyboardManager.d.ts file in this repo’s root.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/audio-recorder":{"name":"@angelengineering/audio-recorder","version":"1.1.0","license":"Apache-2.0","readme":"

@angelengineering/nativescript-audio-recorder

\n

Nativescript audio recorder \"apple\" \"android\"

\n

\"npm\"

\n

This plugin provides an audio recorder for Android and iOS that supports recording of audio from a device microphone input and saved to an MP4/AAC audio file. It also provides a function to merge multiple audio recordings together.

\n

Contents

\n\n

Installation

\n
npm install @angelengineering/nativescript-audio-recorder --save
\n

OR

\n
ns plugin add @angelengineering/nativescript-audio-recorder
\n

Usage

\n

The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-recorder.ts.

\n
    \n
  1. Import the plugin.
    2. \n
\n
import { AudioRecorder, AudioRecorderOptions } from '@angelengineering/nativescript-audio-recorder';
\n
    \n
  1. Record an audio file.
    2. \n
\n
this.recorder = new AudioRecorder();
//you can tie into these events to update control UI state
this.recorder.on('RecorderFinished', () => {
  console.log('RecorderFinished');
});
this.recorder.on('RecorderFinishedSuccessfully', () => {
  console.log('RecorderFinishedSuccessfully');
});
let recOptions: AudioRecorderOptions = {
    filename: path.join(knownFolders.documents().path, 'audiorecording-1.mp4');,
    infoCallback: infoObject => {
      console.log('AudioRecorder infoCallback: ', JSON.stringify(infoObject));
    },
    errorCallback: errorObject => {
      console.error('AudioRecorder errorCallback: ', JSON.stringify(errorObject));
    },
  };
try {
  this.recorder
    .record(recOptions)
    .then(() => {
      console.log('recording audio started');
    })
    .catch(err => {
      console.error(err);
    });
} catch (err) {
  alert(err?.message);
}
\n
    \n
  1. (Optional) Merge multiple recordings into a single file.
    2. \n
\n
let audioFiles: [string] = ['PATH/TO/audiorecording-1.mp4','PATH/TO/audiorecording-2.mp4'];
let finalfile = await this.recorder.mergeAudioFiles(this.audioFiles, 'PATH/TO/audiorecording.mp4');
\n

Android Specifics

\n

NOTE: This plugin will only work on API26+ devices if you want to merge audio segments together. Single file recordings only on API 25 or below.

\n

In order to record audio, you'll need to add the following permission to your AndroidManifest.xml:

\n
<manifest ... >
  <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
  ...
</manifest>
\n

To request permissions in the demo app, we use the @nativescript-community perms plugin.

\n

iOS Specifics

\n

In order to record audio, iOS will require permission to access the microphone. Add the following to your Info.plist:

\n
<key>NSMicrophoneUsageDescription</key>
<string>This app requires access to your microphone to record audio</string>
\n

Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission.

\n
\n

NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

\n
\n

Supported Audio Recorder options

\n
export interface AudioRecorderOptions {
  /**
   * Gets or sets the recorded file name.
   */
  filename: string;

  /**
   * Sets the source for recording ***ANDROID ONLY for now ***
   */
  source?: any;

  /**
   * Gets or set the max duration of the recording session.
   * Input in milliseconds, which is Android's format.
   * Will be converted appropriately for iOS.
   */
  maxDuration?: number;

  /**
   * Enable metering. Off by default.
   */
  metering?: boolean;

  /**
   * Channels
   */
  channels?: any;

  /**
   * Sampling rate
   */
  sampleRate?: any;

  /**
   * Bit rate
   */
  bitRate?: any; //Android only, use iosAudioQuality for iOS

  /**
   * Sets the ios audio quality setting. Options are Min|Low|Medium|High|Max. Set to Medium by default.
   */
  iosAudioQuality?: string;

  /**
   * Gets or sets the callback when an error occurs with the media recorder.
   * @returns {Object} An object containing the native values for the error callback.
   */
  errorCallback?: Function;

  /**
   * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
   * @returns {Object} An object containing the native values for the info callback.
   */
  infoCallback?: Function;
}
\n

Audio Recorder exports

\n
export class AudioRecorder extends Observable implements IAudioRecorder {
  readonly ios: any; //Native iOS recorder instance
  readonly android: any;  //Native Android recorder instance

  /**
   * Starts a recording session with the provided options.
   * @param options [AudioRecorderOptions]
   */
  record(options: AudioRecorderOptions): Promise<any>;

  /**
   * Stops the recording
   */
  stop(): Promise<File>;

  /**
   * Disposes of the recorder session
   */
  dispose(): Promise<any>;

  /**
   * Returns the maximum absolute amplitude that was sampled since the last call to this method.
   * @param channel [number]
   */
  getMeters(channel?: number): any;

  /**
   * Returns value indicating the recorder is currently recording.
   */
  isRecording(): boolean;

  /**
   * Merges all files with file paths specified in audioFiles into a new file at outputPath. This only supports MP4/AAC audio files currently
   * Note: For Android, API 26+ is required.
   */
  mergeAudioFiles(audioFiles: string[], outputPath: string): Promise<File>;
}
\n

Tested and working on Android API 26-33.\nTested and working on iOS 12.x-16.x.

\n

Acknowledgements

\n

This plugin is based on https://github.com/nstudio/nativescript-audio

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sms-receiver-spms":{"name":"nativescript-sms-receiver-spms","version":"1.1.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/drawingpad":{"name":"@nativescript-community/drawingpad","version":"4.1.0","license":"Apache-2.0","readme":"\n

NativeScript DrawingPad

\n\n
\nNativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.
\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

NativeScript 7+:

\n
ns plugin add @nativescript-community/drawingpad
\n

NativeScript < 7:

\n
tns plugin add nativescript-drawingpad
\n

Samples

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Sample1\"\"Sample2\"
\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
gcacace/android-signaturepadSignatureView
\n

Video Tutorial

\n

Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

\n

Written Tutorial

\n

Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

\n

Usage

\n

XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:DrawingPad=\"@nativescript-community/drawingpad\" loaded=\"pageLoaded\">
    <ActionBar title=\"NativeScript-DrawingPad\" />
    <ScrollView>
        <StackLayout>

            <DrawingPad:DrawingPad
            height=\"400\"
            id=\"drawingPad\"
            penColor=\"{{ penColor }}\" penWidth=\"{{ penWidth }}\" />

        </StackLayout>
    </ScrollView>
</Page>
\n

TS:

\n
import { Frame, ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';

// To get the drawing...
public getMyDrawing() {
    const drawingPad = Frame.topmost().getViewById('myDrawingPad');
    drawingPad.getDrawing().then((res) => {
        console.log(res);
        // At this point you have a native image (Bitmap on Android or UIImage on iOS)
        // so lets convert to a NS Image using the ImageSource
        const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NSapplication now.
        // now you might want a base64 version of the image
        const base64imageString = image.toBase64String('jpg'); // if you need it as base64
    });
}


// If you want to clear the signature/drawing...
public clearMyDrawing() {
    const drawingPad = Frame.topmost().getViewById('myDrawingPad');
    drawingPad.clearDrawing();
}
\n

Angular:

\n
import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';

registerElement('DrawingPad', () => DrawingPad);

@Component({
  selector: 'drawing-pad-example',
  template: `
    <ScrollView>
      <StackLayout>
        <DrawingPad
          #DrawingPad
          height=\"400\"
          id=\"drawingPad\"
          penColor=\"#ff4081\"
          penWidth=\"3\"
        >
        </DrawingPad>

        <StackLayout orientation=\"horizontal\">
          <Button text=\"Get Drawing\" (tap)=\"getMyDrawing()\"></Button>
          <Button text=\"Clear Drawing\" (tap)=\"clearMyDrawing()\"></Button>
        </StackLayout>
      </StackLayout>
    </ScrollView>
  `
})
export class DrawingPadExample {
  @ViewChild('DrawingPad') DrawingPad: ElementRef;

  getMyDrawing(args) {
    // get reference to the drawing pad
    const pad = this.DrawingPad.nativeElement;

    // then get the drawing (Bitmap on Android) of the drawingpad
    let drawingImage;
    pad.getDrawing().then(
      data => {
        console.log(data);
        // At this point you have a native image (Bitmap on Android or UIImage on iOS)
        // so lets convert to a NS Image using the ImageSource
        const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NS
        drawingImage = img; // to set the src of an Image if needed.
        // now you might want a base64 version of the image
        const base64imageString = image.toBase64String('jpg'); // if you need it as base64
      },
      err => {
        console.log(err);
      }
    );
  }

  clearMyDrawing(args) {
    const pad = this.DrawingPad.nativeElement;
    pad.clearDrawing();
  }
}
\n

Properties

\n

penColor - (Color) - optional\nProperty to specify the pen (stroke) color to use.

\n

penWidth - (int) - optional\nProperty to specify the pen (stroke) width to use.

\n

clearOnLongPress - (boolean = true) - optional iOS Only\nGets/sets whether a long press will clear the view.

\n

Methods

\n

getDrawing() - Promise (returns image if successful)

\n

getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise (returns image as base64 string if successful)

\n

clearDrawing() - clears the drawing from the DrawingPad view.

\n

getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)

\n

Android Only

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elm-native-js":{"name":"elm-native-js","version":"1.1.1","license":"AGPL-3.0","readme":"

Elm custom elements bindings for Nativescript

\n

This library should be used with elm-native elm library

\n

How it works

\n

We will use CustomElements feature to create mobile UI elements with nativescript objects and control the nativescript object from elm.

\n

Here's a simple representation of how UI elements are created

\n

Elm -> Nativescript -> Mobile

\n

When we listen for / receive an event,

\n

Mobile -> Nativescript -> Elm

\n

Consider this flow while building an application. This will help you to overcome performance issues if you encounter them.

\n

Supported Features

\n\n

More features will be added soon.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@matty0005/nativescript-camera-plus":{"name":"@matty0005/nativescript-camera-plus","version":"4.1.3","license":"Apache-2.0","readme":"\n

NativeScript Camera Plus

\n\n

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

\n

\n\n \"LiveShopper\n \n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n
\n

Installation

\n
npm install @nstudio/nativescript-camera-plus
\n

Note :- Android\nPlease add the following to your app.gradle

\n
android {
...
 compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
}
\n

Sample

\n

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

\n

\"Camera

\n

Demo

\n

The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

\n

Android Emulator Note

\n

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefaultDescription
debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
\n

Static Properties

\n

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
\n

Android Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIconstringName of app_resource drawable for the toggle camera button.
takePicIconstringName of app_resource drawable for the take picture (capture) button.
galleryIconstringName of app_resource drawable for the open gallery (image library) button.
autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
\n

iOS Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
\n

Cross Platform Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
isCameraAvailable()Returns true if the device has at least one camera.
toggleFlash()Toggles the flash mode on the active camera.
toggleCamera()Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
record(opts?: IVideoOptions)Starts recording a video.
stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
\n

Android Only Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()Returns true if the application has been granted access to the device storage.
getNumberOfCameras()Returns the number of cameras on the device.
hasFlash()Returns true if the active camera has a flash mode.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
errorEventExecutes when an error is emitted from CameraPlus
photoCapturedEventExecutes when a photo is taken.
toggleCameraEventExecutes when the device camera is toggled.
imagesSelectedEventExecutes when images are selected from the device library/gallery.
videoRecordingStartedEventExecutes when video starts recording.
videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
confirmScreenShownEventExecutes when the picture confirm dialog is shown..
confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
\n

Option Interfaces

\n
export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}
\n
export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}
\n
export interface IVideoOptions {
  quality?: CameraVideoQuality;
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
  disableHEVC?: boolean;
  androidMaxVideoBitRate?: number;
  androidMaxFrameRate?: number;
  androidMaxAudioBitRate?: number;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio":{"name":"nativescript-audio","version":"6.2.6","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-echo-ns":{"name":"nativescript-echo-ns","version":"1.4.10","license":"Apache-2.0","readme":"

README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-share-file":{"name":"@nativescript-community/ui-share-file","version":"1.3.1","license":"Apache-2.0","readme":"

Nativescript Share File

\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install @nativescript-community/ui-share-file
\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from '@nativescript-community/ui-share-file';
    import * as fs from '@nativescript/core/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-fix-uid":{"name":"nativescript-nfc-fix-uid","version":"1.0.44","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@evanyung/nativescript-amap":{"name":"@evanyung/nativescript-amap","version":"1.0.4","license":"Apache-2.0","readme":"

@evanyung/nativescript-amap

\n
npm install @evanyung/nativescript-amap
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/picker":{"name":"@nativescript/picker","version":"4.1.0","license":"Apache-2.0","readme":"

@nativescript/picker

\n

A NativeScript plugin that provides ui element for picking an object/value from a list opened in a modal popup.

\n
npm install @nativescript/picker
\n

Usage

\n\n

Screenshots

\n

\"PickerField\"PickerField

\n

Configuration

\n

No additional configuration required!

\n

Usage

\n

To use the PickerField in markup you need to:

\n\n
<Page
   xmlns=\"http://schemas.nativescript.org/tns.xsd\"
   xmlns:picker=\"@nativescript/picker\">
   <picker:PickerField hint=\"Click here\" items=\"{{ pickerItems }}\"/>
...
\n

Or with item template

\n
<picker:PickerField focusOnShow=\"true\" filterKeyName=\"name\" showFilter=\"{{ enableFilter }}\" pickerTitle=\"Nativescript Picker\" rowHeight=\"60\" id=\"picker\" hint=\"Click here\" textField=\"name\" padding=\"10\" pickerOpened=\"{{ pickerOpened }}\" pickerClosed=\"{{ pickerClosed }}\"
                    items=\"{{ pickerItems }}\" >
    <picker:PickerField.itemTemplate>
        <GridLayout height=\"60\">
            <Label text=\"{{ name}}\" textWrap=\"true\" verticalAlignment=\"center\" />
            
        </GridLayout>
    </picker:PickerField.itemTemplate>
</picker:PickerField>
\n

Data filter

\n

You can filter the data by setting showFilter="true", by default the plugin will look at the name key on the items source, but you can control this by setting filterKeyName="title" assuming your data Items contains a title key :

\n
\n

focus the search bar by setting focusOnShow="true"

\n
\n
let dataItems = new ObservableArray<{title: string, age: number}>();

for(let i = 0; i <= 30; i++) {
    dataItems.push({
        title: \"Title\" + i,
        age: 30 + i
    })
}
\n\n

Get selected item

\n

You need to register the callback from pickerClosed property pickerClosed="onSelectedItem" this will return the selectedIndex :

\n
onSelectedItem(args) {
    let index = args.object?.selectedIndex;
    console.log('Picker > closed', index);
    console.log('Picker > closed', dataItems[index].title);
}
\n

Style

\n

You can targed the Picker via thoes css class ex: .pickerRootModal:

\n\n

See here also

\n\n
import { NativeScriptPickerModule } from \"@nativescript/picker/angular\";
...
@NgModule({
    imports: [
        NativeScriptPickerModule,
        ...
    ],
    ...
\n

Then you will be able to declare the fields in the html of your component:

\n
<PickerField hint=\"Click here\" [items]=\"pickerItems\"></PickerField>
\n

Custom item template

\n

You can also define your own item template in the list that is opened:

\n
<PickerField hint=\"Click here\" class=\"picker-field\" textField=\"name\" [pickerTitle]=\"'Select item from list'\" [items]=\"items\">
\t<ng-template let-item=\"item\">
\t\t<GridLayout columns=\"auto, *\" rows=\"auto, *\">
\t\t\t<Label text=\"Static text:\" col=\"0\"></Label>
\t\t\t<Label [text]=\"item?.name\" col=\"0\" row=\"1\"></Label>
\t\t\t<Image [src]=\"item?.imageUrl\" col=\"1\" row=\"0\" rowSpan=\"2\"></Image>
\t\t</GridLayout>
\t</ng-template>
</PickerField>
\n

With the following bindings:

\n
interface IDataItem {
\tname: string;
\tid: number;
\tdescription: string;
\timageUrl: string;
}

this.items = new ObservableArray<IDataItem>();
for (let i = 0; i < 20; i++) {
\tthis.items.push({
\t\tname: 'Item ' + i,
\t\tid: i,
\t\tdescription: 'Description ' + i,
\t\timageUrl: 'https://picsum.photos/150/70/?random',
\t});
}
\n\n
import Vue from 'nativescript-vue';
import PickerField from '@nativescript/picker/vue';

Vue.use(PickerField);
\n

Then you will be able to declare the fields in the template of your component:

\n
<PickerField hint=\"Click here\"></PickerField>
\n

Features

\n

PickerField

\n

The PickerField is a NativeScript TextField which means that any functionality the default TextField provides is also available in the PickerField component. The only difference is that by design it is in "read-only" mode, or simply put you cannot change its text by input or select that text. Changing the text of the PickerField is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it.

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
pickerTitleThe title of the modal view.
itemsThe source collection used to populate the list of the modal view.
itemTemplateТhe UI template for list view items of the list of the modal view.
modalAnimatedOptional parameter specifying whether to show the modal view with animation.
textFieldThe 'property' of the object from the 'items' collection that will be used by the 'text' property of the PickerField.
valueFieldThe 'property' of the object from the 'items' collection that will be used by when setting the 'selectedValue' property of the PickerField.
selectedValueThe object selected from the list in the modal view.
selectedIndexThe index of the object from the 'items' collection that has been selected from the list in the modal view.
iOSCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
iOSCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
androidCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
androidCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
showFilterShow the search bar
filterKeyNameSet object key to use when filtering (see the doc)
focusOnShowSet the focus to the serach bar
hintTextSet the hint of the search bar
\n

PickerField

\n

The PickerField can be targeted in CSS through its element selector and additionally by setting a class. The PickerField also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the PickerPage selector and through it style all picker modals with selectors like PickerPage ActionBar and PickerPage ListView. In addition to that, if you set a class on the PickerField, it will be transferred on the PickerPage and with it you can style individual modals.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alogent/nativescript-zelle-coop":{"name":"@alogent/nativescript-zelle-coop","version":"3.0.2","license":"Apache-2.0","readme":"

@alogent/nativescript-zelle-coop

\n
ns plugin add @alogent/nativescript-zelle-coop
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-checkbox-fix-ios":{"name":"nativescript-checkbox-fix-ios","version":"2.0.5-fix-ios","license":"Apache-2.0","readme":"

@nstudio/nativescript-checkbox

\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n
npm install @nstudio/nativescript-checkbox
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Usage

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
import { Frame } from '@nativescript/core';

public toggleCheck() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
Vue.registerElement(
  'CheckBox',
  () => CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-adobe-experience-cloud":{"name":"@essent/nativescript-adobe-experience-cloud","version":"3.0.0","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-couchbase":{"name":"@triniwiz/nativescript-couchbase","version":"1.4.0","license":"Apache-2.0","readme":"

NativeScript-Couchbase

\n

Installation

\n
tns plugin add @triniwiz/nativescript-couchbase
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-onfido":{"name":"@nstudio/nativescript-onfido","version":"4.0.0","license":"Apache-2.0","readme":"

Onfido SDK for NativeScript

\n\n
npm install @nstudio/nativescript-onfido
\n

Usage

\n
import { OnfidoUtils, Onfido, OnfidoCaptureType } from '@nstudio/nativescript-onfido';

OnfidoUtils.init('<token>', '<app id>');

Onfido.debugMode = true;
Onfido.start({
    sdkToken: token,
    flowSteps: {
        welcome: true,
        captureDocument: {},
        captureFace: {
          type: OnfidoCaptureType.PHOTO,
        },
    },
}).then(data => {
    // onfido data
}).catch((error) => {
    // onfido data
});
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@it-serve/flashlight":{"name":"@it-serve/flashlight","version":"1.0.14","license":"Apache-2.0","readme":"

@it-serve/flashlight

\n
ns plugin add @it-serve/flashlight
\n

Usage

\n

// IT Serve LLC for nativescript developers apps above 8+ core

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/appurl":{"name":"@nativescript-community/appurl","version":"1.4.2","license":"MIT","readme":"

NativeScript URL Handler Plugin \"apple\" \"android\"

\n

this is a direct fork/rewrite of nativescript-urlhandler by Martin Reinhardt\nIt did not seem to be maintained anymore and was not working as expected

\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import { handleOpenURL, AppURL } from '@nativescript-community/appurl';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"@nativescript-community/appurl\").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from '@nativescript-community/appurl';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});
\n
\n

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

\n
\n

Installation

\n
$ tns plugin add @nativescript-community/appurl
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add @nativescript-community/appurl@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/@nativescript/core/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-frameworks":{"name":"nativescript-ios-frameworks","version":"1.0.5","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@portalest/nativescript-gif-more":{"name":"@portalest/nativescript-gif-more","version":"1.0.1","license":"Apache-2.0","readme":"

@portalest/nativescript-gif-more

\n
npm install @portalest/nativescript-gif-more
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-troisjs":{"name":"nativescript-troisjs","version":"0.3.9","license":"MIT","readme":"

✨ TroisJS + NativeScript-Vue3 ⚡

\n

I wanted something similar to react-three-fiber but for Nativescript + VueJS.

\n

So I found TroisJS and adapted it.

\n\n
\n

\"NPM\n\"NPM

\n

Usage (NativeScript-Vue3)

\n

Install

\n
npm i three @nativescript/canvas @nativescript/canvas-polyfill nativescript-troisjs
\n

Register canvas element & apply polyfill

\n
// app.ts|js

import '@nativescript/canvas-polyfill'
registerElement('canvas', () => require('@nativescript/canvas').Canvas)

// ...
\n

Example usage

\n

Simply use <NsRenderer> instead of <Renderer>.

\n
<script lang=\"ts\" setup>
import { ref } from 'nativescript-vue'
import chroma from 'chroma-js'
import {
  Camera,
  ToonMaterial,
  AmbientLight,
  PointLight,
  Torus,
  Scene,
  NsRenderer,
  type RenderEventInterface,
} from 'troisjs'

const n = ref(30)
const cscale = chroma.scale(['#dd3e1b', '#0b509c'])
const color = (i: number) => cscale(i / n.value).css()
const meshRefs = ref<(typeof Torus)[]>([])

// https://troisjs.github.io/examples/loop.html
const onBeforeRender = (_e: RenderEventInterface) => {
  const t = Date.now()
  let mesh, ti
  for (let i = 1; i <= n.value; i++) {
    if (meshRefs.value?.[i]?.mesh) {
      mesh = meshRefs.value[i].mesh
      ti = t - i * 500
      mesh.rotation.x = ti * 0.00015
      mesh.rotation.y = ti * 0.0002
      mesh.rotation.z = ti * 0.00017
    }
  }
}
</script>

<template>
  <GridLayout rows=\"*\" class=\"bg-base-200\">
    <NsRenderer @before-render=\"onBeforeRender\" alpha>
      <Camera :position=\"{ z: 15 }\" />
      <Scene>
        <AmbientLight color=\"#808080\" />
        <PointLight color=\"#ffffff\" :position=\"{ y: 50, z: 0 }\" />
        <PointLight color=\"#ffffff\" :position=\"{ y: -50, z: 0 }\" />
        <PointLight color=\"#ffffff\" :position=\"{ y: 0, z: 0 }\" />
        <Torus
          v-for=\"i in n\"
          :key=\"i\"
          ref=\"meshRefs\"
          :radius=\"i * 0.2\"
          :tube=\"0.1\"
          :radial-segments=\"8\"
          :tubular-segments=\"(i + 2) * 4\"
        >
          <ToonMaterial :color=\"color(i)\" />
        </Torus>
      </Scene>
    </NsRenderer>
  </GridLayout>
</template>
\n

Read more on https://troisjs.github.io/guide/

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n

Issues

\n

If you encounter any issues, please open a new issue with as much detail as possible. This is beta software, so there might be bugs.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-storage":{"name":"nativescript-azure-storage","version":"1.2.0","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

nativescript-azure-storage

\n

Installation

\n

tns plugin add nativescript-azure-storage

\n

Usage

\n
import { NativeScriptAzureStorage } from 'nativescript-azure-storage';
let azureStorage = new NativeScriptAzureStorage(this.azureStorageConnectionString);
\n

Available Methods for Android and iOS

\n

createBlobContainer: Create a blob container

\n
azureStorage.createBlobContainer('blobContainer')
.then(() => console.log(`Blog container Created!`))
.catch((err) => console.log(`Error creating blob container: ${err}`));
\n

deleteBlobContainer: Delete a blob container

\n
azureStorage.deleteBlobContainer('blobContainer')
.then(() => console.log(`Blog container deleted!`))
.catch((err) => console.log(`Error deleting blob container: ${err}`));
\n

uploadBlob: Upload blob

\n
azureStorage.uploadBlob('blobContainer', 'blobName', 'Hello World!')
.then(() => console.log(`Uploaded successfuly`))
.catch((err) => console.log(`Error uploading: ${err}`));
\n

deleteBlob: Delete blob

\n
azureStorage.deleteBlob('blobContainer', 'blobName')
.then(() => console.log(`Blob deleted successfuly`))
.catch((err) => console.log(`Error deleting blob: ${err}`));
\n

downloadBlob: Download blob

\n
azureStorage.downloadBlob('blobContainer', 'blobName')
.then((blob) => console.log(`Blob downloaded successfuly`))
.catch((err) => console.log(`Error getting tables: ${err}`));
\n

Available Methods only for Android (for now)

\n

createTable: Create table with the specified name

\n
azureStorage.createTable('table')
.then(() => console.log(`Table Created!`))
.catch((err) => console.log(`Error creating table: ${err}`));
\n

addRow: Insert new row from an object

\n
azureStorage.addRow('table', { foo: 'bar' }, 'partitionKey', 'rowKey')
.then(() => console.log(`Row created successfuly!`))
.catch((err) => console.log(`Error creating row: ${err}`));
\n

addRows: Insert new row from a list of object

\n
let array = new Array<any>();
array.push({ foo: 'bar' });
azureStorage.addRows('table', 'partitionKey', 'foo', array)
.then(() => console.log(`Rows created successfuly!`))
.catch((err) => console.log(`Error creating rows: ${err}`));
\n

listTables: List all tables from storage

\n
azureStorage.listTables()
.then((tables) => {
    tables.forEach((table) => {
        console.log(`Table:${table}`);
    });
})
.catch((err) => console.log(`Error getting tables: ${err}`));
\n

listRows: List all rows from a specified table

\n
azureStorage.listRows('table')
.then((rows) => {
    rows.forEach((row) => {
        console.log(`Row:${row.partitionKey} | ${row.rowKey} | ${row.getTimestamp() }`);
    });
})
.catch((err) => console.log(`Error getting rows: ${err}`));
\n

Next Version (available soon)

\n

updateRow;

\n

deleteRow;

\n

tables methods for iOS

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-player":{"name":"nativescript-audio-player","version":"1.0.3","license":"MIT","readme":"\n

NativeScript Audio Player

\n\n

NativeScript plugin to play audio files for Android and iOS.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n

\n
\n

Installation

\n

tns plugin add nativescript-audio-player

\n
\n

Native Classes

\n\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio-player';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio-player');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function() {
    console.log('finished playing');
  },
  errorCallback: function(errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function(args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(function(res) {
    console.log(res);
  })
  .catch(function(err) {
    console.log('something went wrong...', err);
  });
\n

API

\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position.
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-view":{"name":"nativescript-test-view","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-test-view

\n
npm install nativescript-test-view
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-messenger":{"name":"@triniwiz/nativescript-messenger","version":"1.0.0","license":"Apache-2.0","readme":"

@triniwiz/nativescript-messenger

\n
npm install @triniwiz/nativescript-messenger
\n

Usage

\n

Method

\n

send: Sends a message to one or multiple recipients

\n
Parameters
\n\n
import {send, available} from \"@triniwiz/nativescript-messenger\";
const numbers = [\"868-657-1234\", \"868-630-4321\", \"868-648-1122\"];
send(numbers, \"My message\", \"Subject of Message\", [
                    {
\t\t\t\t\t\tfileName: 'destiny_2.jpg',
\t\t\t\t\t\tmimeType: 'image/jpg',
\t\t\t\t\t\tpath: '~/assets/destiny_2.jpg',
\t\t\t\t\t}
]);
\n

This method also returns a promise. Use as so to define actions after the user has either canceled or sent the message.

\n
    send([\"868-555-5555\", \"868-555-4444\"], \"this is body\").then(function(args){
        console.log(args.response); 
        // either a string saying cancelled or sent
        console.log(args.message); 
        // just a string with more detail than response.
        
        /* you can do stuff here.. this happens back 
        in your app after the message window has 
        been dismissed */        
        
    }, function (e) {
        console.log(\"Error occurred \" + e); 
        // e will show a vague error message.
    });
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-uid":{"name":"nativescript-nfc-uid","version":"6.0.8","license":"Apache-2.0","readme":"

nativescript-nfc-uid

\n
npm install nativescript-nfc-uid
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-exit":{"name":"nativescript-exit","version":"1.0.1","readme":"

\"Build\n\"NPM\n\"npm\n\"Dependency

\n

nativescript-exit

\n

A plugin for Nativescript framework implementing exit function for the application

\n

##install\nnpm install nativescript-exit --save

\n

##usage

\n
import {exit} from 'nativescript-exit';
exit();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-svelte-vision":{"name":"@nativescript/template-blank-svelte-vision","version":"8.6.5","license":"Apache-2.0","readme":"

NativeScript with Svelte for visionOS

\n
ns run visionos --no-hmr
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/nativescript-iterable":{"name":"@global66/nativescript-iterable","version":"1.0.12","license":"Apache-2.0","readme":"

@global66/nativescript-iterable

\n
ns plugin add @global66/nativescript-iterable
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leena-ai/sdk":{"name":"@leena-ai/sdk","version":"1.0.5","license":"Apache-2.0","readme":"

@leena-ai/sdk

\n
ns plugin add @leena-ai/sdk
\n

Usage

\n

XML + Typescript

\n
    \n
  1. \n

    Add xmlns to Page element

    \n
    2. \n
  2. \n

    Use the name of xmlns as a selector

    \n
    3. \n
  3. \n

    Leena SDK exports the component named Sdk which can be used to open a Leena bot

    \n

    Example:

    \n
    <Page 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"    
    xmlns:ln=\"@leena-ai/sdk\" navigatingTo=\"navigatingTo\" class=\"page\">
     <!-- Here Goes your Header and any other UI -->
         <GridLayout>
             <ln:Sdk clientId=\"{{ clientId }}\" token=\"changeme\"></ln:Sdk>
         </GridLayout>
     </Page>

    \n
    4. \n
\n

Nativescript Angular

\n
    \n
  1. Import NativeScriptSdkModule in the module you want to load Leena App
    2. \n
  2. Leena SDK exports a component named Sdk that can used like any other Angular component
    3. \n
\n

Note: Use a <GridLayout> instead of <StackLayout> if the UI does not load

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultRequiredDescription
clientId-YesThe client ID for Leena bot.
token-YesThe app token which will authenticate the user with Leena App
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cchoici/nativescript-loading-indicator":{"name":"@cchoici/nativescript-loading-indicator","version":"4.1.3","license":"Apache-2.0","readme":"\n

NativeScript Loading Indicator

\n\n

\nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Note

\n

Add parsDim in OptionsCommon to change dimBackground's color & transparence

\n

Installation

\n

NativeScript 7+:

\n
ns plugin add @cchoici/nativescript-loading-indicator
\n

NativeScript lower than 7:

\n
tns plugin add @cchoici/nativescript-loading-indicator@3.0.x
\n

Screenshots

\n

iOS

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"iOS\"\"iOS\"\"iOS\"\"iOS\"
\n \n

\n

Android

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Android\"\"Android\"\"Android\"\"Android\"
\n

\n

Example

\n

TypeScript

\n
import {
  LoadingIndicator,
  Mode,
  OptionsCommon,
} from '@cchoici/nativescript-loading-indicator';

const indicator = new LoadingIndicator();

const options: OptionsCommon = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  parsDim: ['#000000', 0.2], // parameters if dimBackground is true, [string of hex, number of alpha]
  color: '#4B9ED6', // color of indicator and labels
  backgroundColor: 'yellow', // background box around indicator, hideBezel will override this if true
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.Indeterminate, // see options below
  android: {
    // view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: someButton.ios, // Target view to show on top of (Defaults to entire window)
    square: false,
  },
};

indicator.show(options);

// after some async event maybe or a timeout hide the indicator
indicator.hide();
\n

javascript

\n
const LoadingIndicator =
  require('@cchoici/nativescript-loading-indicator').LoadingIndicator;
const Mode = require('@cchoici/nativescript-loading-indicator').Mode;

const loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
const options = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  parsDim: ['#000000', 0.2], // parameters if dimBackground is true, [string of hex, number of alpha]
  color: '#4B9ED6', // color of indicator and labels
  backgroundColor: 'yellow', // background box around indicator, hideBezel will override this if true
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.Indeterminate, // see options below
  android: {
    // view: android.view.View, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: UIView, // Target view to show on top of (Defaults to entire window)
  },
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Common Options

\n
export interface OptionsCommon {
  /**
   * Message in the loading indicator.
   */
  message?: string;

  /**
   * Details message in the loading indicator.
   */
  details?: string;

  /**
   * Color of the message text.
   */
  color?: string;

  /**
   * Background color of the loading indicator.
   */
  backgroundColor?: string;

  /**
   * Progress of the indicator when not using CustomView or Text Mode.
   */
  progress?: number;

  /**
   * Margin for the message/indicator to the edge of the bezel.
   */
  margin?: number;

  /**
   * Set true to allow user interaction.
   */
  userInteractionEnabled?: boolean;

  /**
   * Dim the background behind the indicator.
   */
  dimBackground?: boolean;

  /**
   * parameters if dimBackground is true
   */
  parsDim?: [string, number];

  /**
   * Hide bezel around indicator
   */
  hideBezel?: boolean;

  /**
   * The mode of the loading indicator.
   */
  mode?: Mode;

  /**
   * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
   */
  customView?: any;

  /**
   * iOS specific configuration options.
   */
  ios?: OptionsIOS;

  /**
   * Android specific configuration options.
   */
  android?: OptionsAndroid;
}
\n

Android Specific

\n
export interface OptionsAndroid {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: android.view.View;
  max?: number;
  progressNumberFormat?: string;
  progressPercentFormat?: number;
  progressStyle?: number;
  secondaryProgress?: number;
  cancelable?: boolean;
  cancelListener?: (dialog: any) => void;
  elevation?: number;
}
\n

iOS Specific

\n
export interface OptionsIOS {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: UIView;
  square?: boolean;
}
\n

Mode Enum

\n
export enum Mode {
  Indeterminate = 0,
  Determinate = 1,
  DeterminateHorizontalBar = 2,
  AnnularDeterminate = 3,
  CustomView = 4,
  Text = 5,
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/notifications":{"name":"@awarns/notifications","version":"1.0.2","license":"Apache-2.0","readme":"

@awarns/notifications

\n

\"npm\n\"npm\"

\n

This module allows to deliver notifications to the user when an event occurs. It also defines some primitives (in form of framework records) to hold possible reactions and interactions of the user with the notification.

\n

This plugin acts as a wrapper of EddyVerbruggen's NativeScript Local Notifications plugin, adapted to work with the AwarNS Framework task model.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/notifications
\n

Usage

\n

After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

\n
    \n
  1. The plugin API. Through it, you'll be able to manage the notifications which have been delivered and the possible reactions to them.
    2. \n
  2. The notification delivery tasks, which allow to locally display notifications to your users using system's services. Users can tap or discard the notifications. The plugin comes with specific records for direct reactions: the NotificationTap and the NotificationDiscard. It also comes with definitions of records for more specific notification tap actions.
    3. \n
\n

Setup

\n

This plugin requires you to register its loader during the framework initialization, like this:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerNotificationsPlugin } from '@awarns/notifications';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerNotificationsPlugin('App notifications'),
    ]
  )
  // ... handle initialization promise
\n

Plugin loader parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
notificationsChannelNameStringRequired by the OS. The channel name to be used for the notifications delivered using the framework, so the user can adjust their priority through the system settings
\n

API

\n

notificationsManager

\n

The notificationsManager singleton object allows to manage reactions to notifications. It offers the following actions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
onNotificationTap(callback: NotificationCallback)Promise<void>Sets a callback in your UI to handle notification taps from the system's tray. If the tap arrives before the callback has been set up, for example, when the app is not running, the tap is cached and will be delivered right after registering the callback
onNotificationDiscard(callback: NotificationCallback)Promise<void>Sets a callback to receive updates on notifications being discarded from the system's tray
markAsSeen(id: number)Promise<void>Indicate to the plugin that a notification has been handled / read. It will be removed from the list of pending notifications
\n

notifications

\n

The notifications singleton object allows to access the notifications that have been delivered but not yet handled / read. It offers the following actions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
list()Observable<Array<Notification>>Allows to observe changes in all the unread notifications. More details on the Notification interface, right after this table. It is recommended to install RxJS, to operate with the output of this method
get(id: string)Promise<Notification>Allows to retrieve a stored notification by its id
\n

Notification

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idnumberThe unique identifier of the notification
titlestringThe content of notification heading line
bodystring(Optional) The notification content
timestampDateThe moment when the notification was delivered
tapActionTapAction(Optional) Additional metadata, to know how to handle the notification when tapped
\n

TapAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
typeTapActionType | stringThe type of action to conduct after the notification tap. See table below, to see some examples
idstringThe specific id of the action inside its type
metadataobjectAutomatically populated. Contains the payload (data) of the event that triggered the execution of the task that sent the notification
\n

TapActionType

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
OPEN_APPDefault action, when none is specified. It just opens the app. The notification tap callback does not get invoked when this action type is provided
OPEN_CONTENTCan be used to indicate that the app must display some content for the user to see it. Check out the related UserReadContent record type
DELIVER_QUESTIONSCan be used to indicate that the app must deliver some questions for the user to answer. Check out the related QuestionnaireAnswers record type
ASK_FEEDBACKCan be used to indicate that the app must deliver some quick feedback for the user to answer (single question). Check out the related UserFeedback record type
ASK_CONFIRMATIONCan be used to indicate that the app must deliver some yes/no confirmation question for the user to answer. Check out the related UserConfirmation record type
\n

Tasks

\n

Send a notification

\n
\n

Task name: sendNotification

\n

Description: Sends a notification with the given information

\n

Execution requirements: None

\n
\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { sendNotificationTask } from '@awarns/notifications';

export const demoTasks: Array<Task> = [
  sendNotificationTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n
\n

This task doesn't produce significant events after it completes its execution, aside from the regular {task-name}Finished event: sendNotificationFinished.

\n

However, once it has finished running, relevant events will be emitted by the internal listeners. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('sendNotification', {
    title: 'New content available', // All notifications must contain a title
    body: 'This information may be valuable for you', // The body of the notification can be provided through here 
                                                      // or inside the payload (data) of the event trigger, inside a 
                                                      // property called body
    tapAction: { // (Optional) If not provided, defaults to OPEN_APP
      type: TapActionType.OPEN_CONTENT, // See the rest of the options in the TapActionType enum
      id: 'content-1', // For the app to distingish what content must be displayed after tapping the notification
    },
  })
);

on('notificationTapped', run('writeRecords'));
on('notificationCleared', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Send a random notification among a set of options

\n
\n

Task name: sendRandomNotification

\n

Description: Sends a random notification among a given set

\n

Execution requirements: None

\n
\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { sendRandomNotificationTask } from '@awarns/notifications';

export const demoTasks: Array<Task> = [
  sendRandomNotificationTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n
\n

This task doesn't produce significant events after it completes its execution, aside from the regular {task-name}Finished event: sendNotificationFinished.

\n

However, once it has finished running, relevant events will be emitted by the internal listeners. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('sendRandomNotification', {
    options: [
      {
        title: 'Would you like to rate the app?', // All notifications must contain a title
        // But the body is optional
      },
      {
        title: 'Do you like the app so far?',
        body: 'Your feedback can make us better', // Unlike the sendNotification task, 
                                                  // the notification body can only be set through here
      },
      {
        title: 'Your opinion is very valuable',
        tapAction: { // (Optional) Including a tap action inside one of the options will override the default one (see below)
          type: TapActionType.ASK_FEEDBACK,
          id: 'special-feedback',
        },
      },
    ],
    defaultTapAction: { // (Optional) Common tap action for all the notification options that don't declare one
          type: TapActionType.ASK_FEEDBACK,
          id: 'regular-feedback',
     },
  })
);

on('notificationTapped', run('writeRecords'));
on('notificationCleared', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
notificationTappedNotificationTapRecordEmitted once a notification has been tapped by the user via the system's tray. This event is only emitted if a notification tap callback has been set up
notificationDiscardedNotificationDiscardRecordEmitted once a notification has been discarded by the user via the system's tray. This event is only emitted if a notification discard callback has been set up
\n

Records

\n

This plugin includes records which can be classified into two categories: user reactions and user interactions.

\n
\nUser reactions\n

User reactions include the NotificationTapRecord and the NotificationDiscardRecord.

\n

NotificationTapRecord

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways notification-tap
changeChangeAlways none. Notification tap's starts and ends cannot be detected
timestampDateThe local time when the notification was tapped
notificationIdnumberThe id of the notification that has been tapped
tapActionTapActionThe tap action of the notification that has been tapped
\n

NotificationDiscardRecord

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways notification-discard
changeChangeAlways none. Notification discard's starts and ends cannot be detected
timestampDateThe local time when the notification was discarded
notificationIdnumberThe id of the notification that has been discarded
tapActionTapActionThe tap action of the notification that has been discarded
\n
\n
\nUser interactions\n

User interactions include the UserReadContent, QuestionnaireAnswers, UserFeedback and UserConfirmation records.

\n

UserReadContent

\n

This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users close a content shown when handling an OPEN_CONTENT tap action.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways user-content-read
changeChangeAlways none. This record is meant to be used after the user finishes seeing a content. The start is reflected by the NotificationTapRecord
timestampDateThe local time when the content was closed
contentIdstringThe id of the content seen by the user
completelyReadbooleanAllows to indicate if the user has seen the content to its full extension. Defaults to false
notificationIdnumber(Optional) The id of the notification that lead to this content being displayed
\n

QuestionnaireAnswers

\n

This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users submit a set of questions delivered when handling a DELIVER_QUESTIONS tap action.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways questionnaire-answers
changeChangeAlways none. This record is meant to be used after the user finishes answering the delivered questions. The start is reflected by the NotificationTapRecord
timestampDateThe local time when the questions were answered
questionnaireIdstringThe id of the questionnaire answered by the user
answersArray<QuestionnaireAnswerIncludes each of the user's answers to the questions that have been delivered. The table bellow describes each one of the properties of the QuestionnaireAnswer interface
notificationIdnumber(Optional) The id of the notification that lead to this questionnaire being delivered
\n
QuestionnaireAnswer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titlestringThe title of the question
answernumber | string | booleanThe answer provided by the user
millisecondsToAnswernumber(Optional) The amount of milliseconds that took the user to answer the question
\n

UserFeedback

\n

This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users submit some feedback they've been asked for when handling an ASK_FEEDBACK tap action.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways user-feedback
changeChangeAlways none. This record is meant to be used after the user submits feedback. The start is reflected by the NotificationTapRecord
timestampDateThe local time when the feedback was submitted
feedbackIdstringThe id of the feedback form submitted by the user
questionstringThe matter the user has been asked for
feedbackstringThe answer submitted by the user
notificationIdnumber(Optional) The id of the notification that lead to this feedback being asked
\n

UserConfirmation

\n

This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users confirm or reject a statement presented when handling an ASK_CONFIRMATION tap action.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways user-confirmation
changeChangeAlways none. This record is meant to be used after the user confirms or rejects a statement. The start is reflected by the NotificationTapRecord
timestampDateThe local time when the statement was confirmed or rejected
confirmationIdstringThe id of the confirmation form answered by the user
questionstringThe confirmation the user has been asked for
confirmedbooleanIndicates if the user has confirmed the statement or not
notificationIdnumber(Optional) The id of the notification that lead to this confirmation being requested
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-coachmarks":{"name":"@nstudio/nativescript-coachmarks","version":"3.0.0","license":"Apache-2.0","readme":"

NativeScript plugin to display user coach marks utilizing shape cutouts over an existing UI. This approach leverages your actual UI as part of the onboarding process for your user.

\n

Based on MPCoachMarks.

\n

You can view screenshots here.

\n

Install

\n
npm install @nstudio/nativescript-coachmarks --save
\n\n

Usage

\n

Android

\n
import { CoachMarks, CoachMark } from '@nstudio/nativescript-coachmarks';

// assuming page is defined
let AndroidButton = page.getViewById('my-button')
let AndroidLabel = page.getViewById('my-label');
let cm = new CoachMarks();
cm.initEvents(); //If you want events

cm.events.on('click', (eventData) => {
  // clicked on item at step index: eventData.data.index
});
cm.events.on('cleanup', (eventData) => {
  // clean up any instances in your implementation
});
cm.events.on('navigate', (eventData) => {
  // navigated to index
});

let marks = [
  new CoachMark({
    caption: '1. My Button.',
    view: AndroidButton
  }),
  new CoachMark({
    caption: '2. My Label.',
    view: AndroidLabel
  })
];

cm.start(marks);
\n

Simple

\n

Use static methods to show coachmarks.

\n
import { CoachMarks, CoachMark } from '@nstudio/nativescript-coachmarks';

// assuming page is defined
let iOSButton = page.getViewById('my-button').ios;
let iOSLabel = page.getViewById('my-label').ios;

let marks = [
  new CoachMark({
    position: CGRectMake(
      iOSButton.frame.origin.x - 5,
      iOSButton.frame.origin.y + 20,
      iOSButton.frame.size.width + 10,
      iOSButton.frame.size.height
    ),
    caption: '1. My Button.',
    shape: CoachMark.SHAPES.DEFAULT,
    labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
    labelAlignment: CoachMark.LABEL_ALIGNMENTS.LEFT,
    showArrow: true
  }),
  new CoachMark({
    position: CGRectMake(
      iOSLabel.frame.origin.x, 
      iOSLabel.frame.origin.y + 64, 
      iOSLabel.frame.size.width, 
      iOSLabel.frame.size.height
    ),
    caption: '2. My Label.',
    shape: CoachMark.SHAPES.DEFAULT,
    labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
    labelAlignment: CoachMark.LABEL_ALIGNMENTS.CENTER,
    showArrow: true
  })
];

CoachMarks.start(marks);
\n

Advanced

\n

Configure advanced options by creating an instance to listen to events and further customize coachmarks.

\n
import { CoachMarks, CoachMark, ICoachMarkOptions } from '@nstudio/nativescript-coachmarks';

// define custom options
let options: ICoachMarkOptions = {
  continueLabelText: 'Tap Screen for Next Tip',
  skipButtonText: 'Exit',
  lblSpacing: 15,
  maskColor: UIColor.colorWithRedGreenBlueAlpha(0.30, 0.46, 0.89, .9)
};

// create a CoachMarks instance
let coachMarksInstance = new CoachMarks();

// initialize events
coachMarksInstance.initEvents();

// wire up events

// fired each time user taps screen and advances to next step (including the first step display)
coachMarksInstance.events.on('navigate', (eventData) => {
  console.log(`navigated to index: ${eventData.data.index}`);

  // customize 'continue' label or 'skip' button
  // their style can be changed upon each step or only once on first step
  // first, grab the coachmarks instance
  let instance = eventData.data.instance;

  // wanna change the arrow image for each step?
  instance.arrowImage.image = UIImage.imageNamed('custom-arrow.png');

  if (instance.lblContinue) {
    // customize continue button
    // only available when the first step fires (disappears after first tap)
    let labelContinue = instance.lblContinue.frame;
    instance.lblContinue.frame = CGRectMake(labelContinue.origin.x, labelContinue.origin.y - 20, labelContinue.size.width, labelContinue.size.height + 20);
    instance.lblContinue.backgroundColor = new Color('#FFE108').ios; 
    
    // custom caption color
    instance.lblCaption.textColor = new Color('#FFE108').ios;

    // customize skip button
    let btnSkip = instance.btnSkipCoach.frame;
    instance.btnSkipCoach.frame = CGRectMake(btnSkip.origin.x, btnSkip.origin.y - 20, btnSkip.size.width, btnSkip.size.height + 20);
  }    
});
coachMarksInstance.events.on('click', (eventData) => {
  // clicked on item at step index: eventData.data.index
});
coachMarksInstance.events.on('cleanup', (eventData) => {
  // clean up any instances in your implementation
});

// define your marks

// assuming page is defined
let iOSButton = page.getViewById('my-button').ios;
let iOSLabel = page.getViewById('my-label').ios;

let marks = [
  new CoachMark({
    position: CGRectMake(
      iOSButton.frame.origin.x - 5,
      iOSButton.frame.origin.y + 20,
      iOSButton.frame.size.width + 10,
      iOSButton.frame.size.height
    ),
    caption: '1. My Button.',
    shape: CoachMark.SHAPES.DEFAULT,
    labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
    labelAlignment: CoachMark.LABEL_ALIGNMENTS.LEFT,
    showArrow: true
  }),
  new CoachMark({
    position: CGRectMake(
      iOSLabel.frame.origin.x, 
      iOSLabel.frame.origin.y + 64, 
      iOSLabel.frame.size.width, 
      iOSLabel.frame.size.height
    ),
    caption: '2. My Label.',
    shape: CoachMark.SHAPES.DEFAULT,
    labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
    labelAlignment: CoachMark.LABEL_ALIGNMENTS.CENTER,
    showArrow: true
  })
];

CoachMarks.start(marks, options, coachMarksInstance);
\n

CoachMarks

\n

Used to configure and display coach marks.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
CoachMarks.APP_SETTINGS_KEY: stringThe persistence key used when saving whether your marks have been shown or not. Defaults to 'CoachMarks'.
CoachMarks.DEBUG: booleanTurns on some helpful logging if you have trouble setting things up.
CoachMarks.CONTINUE_LOCATIONS: ICONTINUE_LOCATIONUse with the continueLocation option to change position of the continue/skip bar. Supports: TOP, CENTER, BOTTOM.
events: ObservableUsed when setting up instance events.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
CoachMarks.start(marks: Array<CoachMark>, options?: ICoachMarkOptions, instance?: CoachMarks): voidUsed to start the coachmarks.
CoachMarks.HAS_SHOWN(): booleanWhether coachmarks have been shown.
CoachMarks.PERSIST(): voidSimply persists true using the CoachMarks.APP_SETTINGS_KEY. You normally don't use this directly but is rather used internally when using the persist option when calling start.
CoachMarks.RESET(): voidUsed to clear persisted value that marks had been shown.
\n

Options:

\n
interface ICoachMarkOptions {
  enableContinueLabel?: boolean;  // true
  enableSkipButton?: boolean;     // true
  continueLabelText?: string;     // 'Tap to continue'
  skipButtonText?: string;        // 'Skip'
  animationDuration?: number;     // .3
  continueLocation?: number;      // Bottom
  lblSpacing?: number;            // 35
  cutoutRadius?: number;          // 2
  maskColor?: any;                // 0,0,0 alpha 0.9
  maxLblWidth?: number;           // 230
  persist?: boolean;              // false
}
\n

CoachMark

\n

Used to define your marks.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
position: anyAn iOS CGRect position object.
caption: stringYour caption label text.
shape: numberUse CoachMark.SHAPES. Supports: TOP, CENTER, BOTTOM.
labelPosition: numberUse CoachMark.LABEL_POSITIONS. Supports: BOTTOM, LEFT, TOP, RIGHT, RIGHT_BOTTOM.
labelAlignment: numberUse CoachMark.LABEL_ALIGNMENTS. Supports: CENTER, LEFT, RIGHT.
showArrow: booleanShow arrow or not.
view:ViewView to highlight . Android only
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ios-inspector":{"name":"tns-ios-inspector","version":"6.5.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-blurview":{"name":"@nativescript-community/ui-blurview","version":"1.2.2","license":"Apache-2.0","readme":"

NativeScript Blurview widget

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript BlurView widget.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add @nativescript-community/ui-blurview

\n

This command automatically installs the necessary files, as well as stores @nativescript-community/ui-blurview as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Usage

\n

You need to add xmlns:gv="@nativescript-community/ui-blurview" to your page tag, and then simply use <gv:BlurView/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-blurview\" loaded=\"pageLoaded\">
    <GridLayout rows=\"\" columns=\"\">
        <Image src=\"https://wallpaperscraft.com/image/rose_flower_colorful_close-up_petals_18824_960x544.jpg\" id=\"bgimage\" stretch=\"aspectFill\" />
        <bv:BlurView></bv:BlurView>
    </GridLayout>
</Page>
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/nativescript-community/ui-blurview
$ cd @nativescript-community/ui-blurview
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-nfc":{"name":"@testjg/nativescript-nfc","version":"1.1.2","license":"Apache-2.0","readme":"

@testjg/nativescript-nfc

\n

\"npm

\n

Based on the great and more complete: https://github.com/EddyVerbruggen/nativescript-nfc

\n

Installation

\n
ns plugin add @testjg/nativescript-nfc
\n

Usage

\n

Make sure your AndroidManifest.xml includes the permission:

\n
<uses-permission android:name=\"android.permission.NFC\"/>
\n

In your app code:

\n
import { NfcService } from '@testjg/nativescript-nfc';

export class DemoNfc {
  private nfcService = new NfcService();

  async startListening() {
    const available = await this.nfcService.available();
    if (!available) return;

    const enabled = await this.nfcService.enabled();
    if (!enabled) return;

    this.nfcService.setOnNdefDiscoveredListener((nfcData) => console.log('Scanned', nfcData));
  }

  async stopListening() {
    this.nfcService.setOnNdefDiscoveredListener(null);
  }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/visionos":{"name":"@nativescript/visionos","version":"8.6.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase":{"name":"nativescript-couchbase","version":"1.0.18","license":"Apache-2.0","readme":"

Couchbase Lite Plugin for Telerik NativeScript

\n

Couchbase Lite is a NoSQL embedded database for mobile devices. It is a replacement for common database technologies like SQLite and Core Data.

\n

Configuration

\n

To add this plugin to your Angular or vanilla JavaScript NativeScript project, execute the following from the Terminal or Command Prompt:

\n
tns plugin add nativescript-couchbase
\n

If you wish to try either of the demo applications that are bundled with this project, execute the following after cloning the repository:

\n
npm install
npm run deploy-android-angular
\n

For the third line, the list of options are:

\n
npm run deploy-android-angular
npm run deploy-android-vanilla
npm run deploy-ios-angular
npm run deploy-ios-vanilla
\n

If you're using TypeScript and wish to make use of the type definitions for this plugin, add the following line to your project's references.d.ts file:

\n
/// <reference path=\"./node_modules/nativescript-couchbase/couchbase.d.ts\" />
\n

Without the above line included, your TypeScript compiler may throw errors during the build.

\n

Usage

\n

Including the Plugin in Your Project

\n
var couchbaseModule = require(\"nativescript-couchbase\");
\n

Creating or Opening an Existing Database

\n
var database = new couchbaseModule.Couchbase(\"test-database\");
\n

Managing the Data with CRUD Operations

\n

Creating a New Document

\n
var documentId = database.createDocument({
    \"firstname\": \"Nic\",
    \"lastname\": \"Raboy\",
    \"address\": {
        \"city\": \"San Francisco\",
        \"state\": \"CA\",
        \"country\": \"USA\"
    }
    \"twitter\": \"https://www.twitter.com/nraboy\"
});
\n

Retrieving an Existing Document

\n
var person = database.getDocument(documentId);
\n

Updating an Existing Document

\n
database.updateDocument(documentId, {
    \"firstname\": \"Nicolas\",
    \"lastname\": \"Raboy\",
    \"twitter\": \"https://www.twitter.com/nraboy\"
});
\n

Deleting a Document

\n
var isDeleted = database.deleteDocument(documentId);
\n

Querying with MapReduce Views

\n

Knowing the document id isn't always an option. With this in mind, multiple documents can be queried using criteria defined in a view.

\n

Creating a MapReduce View

\n

A MapReduce View will emit a key-value pair. Logic can be placed around the emitter to make the views more specific.

\n
database.createView(\"people\", \"1\", function(document, emitter) {
    emitter.emit(document._id, document);
});
\n

Querying a MapReduce View

\n
var rows = database.executeQuery(\"people\");
for(var i = 0; i < rows.length; i++) {
    personList.push(rows[i]);
}
\n

Synchronization with Couchbase Sync Gateway and Couchbase Server

\n

Couchbase Lite can work in combination with Couchbase Sync Gateway to offer synchronization support between devices and platforms. Couchbase Sync Gateway is not a requirement to use Couchbase Lite if the goal is to only use it for offline purposes.

\n

Couchbase Sync Gateway can be downloaded via the Couchbase Downloads Portal in the mobile section.

\n

A demo configuration file for Sync Gateway is included in the demo directory. It can be started by executing the following from a Command Prompt or Terminal:

\n
/path/to/sync/gateway/bin/sync_gateway /path/to/demo/sync-gateway-config.json
\n

In the demo configuration file, Couchbase Server is not used, but instead an in-memory database good for prototyping. It can be accessed via http://localhost:4985/_admin/ in your web browser.

\n

To replicate between the local device and server, the following must be added to your project:

\n
var couchbaseModule = require(\"nativescript-couchbase\");
database = new couchbaseModule.Couchbase(\"test-database\");

var push = database.createPushReplication(\"http://sync-gateway-host:4984/test-database\");
var pull = database.createPullReplication(\"http://sync-gateway-host:4984/test-database\");
push.setContinuous(true);
pull.setContinuous(true);
push.start();
pull.start();
\n

Data will now continuously be replicated between the local device and Sync Gateway.

\n

Listening for Changes

\n
database.addDatabaseChangeListener(function(changes) {
    for(var i = 0; i < changes.length; i++) {
        console.log(changes[i].getDocumentId());
    }
});
\n

Plugin Development

\n

The Couchbase NativeScript plugin is under active development. Changes to the API are infrequent in the underlying Couchbase Android and Couchbase iOS SDKs so as a result changes are infrequent in the JavaScript wrapper for NativeScript.

\n

If you feel something is missing or you've found a bug, open a ticket so it can be corrected or submit a pull request and be recognized for your contributions.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/insomnia":{"name":"@nativescript-community/insomnia","version":"2.0.2","license":"MIT","readme":"

NativeScript Insomnia

\n
\n

💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.3.

\n
\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add @nativescript-community/insomnia
\n

Usage

\n

To use this plugin you must first require() it:

\n

JavaScript

\n
var insomnia = require(\"@nativescript-community/insomnia\");
\n

TypeScript

\n

You could do the same as in JS, but this looks fancier, right?

\n
import { keepAwake, allowSleepAgain } from \"@nativescript-community/insomnia\";
\n

keepAwake

\n
  insomnia.keepAwake().then(function() {
      console.log(\"Insomnia is active\");
  })
\n

allowSleepAgain

\n
  insomnia.allowSleepAgain().then(function() {
      console.log(\"Insomnia is inactive, good night!\");
  })
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-calendar":{"name":"nativescript-fancy-calendar","version":"3.0.2","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Fancy Calendar

\n

NativeScript plugin for iOS and Android.

\n

This plugin is not production ready, and there is still a lots of work to do on it. That's why I advise you to use the nativescript-pro-ui calendar which is supported by Telerik itself :beers:.

\n

Screenshots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Install

\n
tns plugin add nativescript-fancy-calendar
\n

Documentation

\n

component.html

\n
<Calendar backgroundColor=\"#686B74\" row=\"1\" [settings]=\"settings\" [events]=\"events\" [appearance]=\"appearance\"
        (dateSelected)=\"dateSelected($event)\" (monthChanged)=\"monthChanged($event)\" (loaded)=\"calendarLoaded($event)\">
</Calendar>
\n

component.ts

\n
import {
    Calendar,
    SELECTION_MODE, // Multiple or single
    DISPLAY_MODE, // Week or month
    CalendarEvent, // little dots 
    Appearance, // style customisation
    SCROLL_ORIENTATION, // scroll orientation for iOS
    CalendarSubtitle, // subtitles for iOS
    Settings // Settings interface
} from 'nativescript-fancy-calendar';

registerElement('Calendar', () => Calendar);

@Component({
    selector: \"ns-yourcomponent\",
    templateUrl: \"yourcomponent.component.html\",
})
export class YourComponent {
    settings: any;
    subtitles: CalendarSubtitle[];
    events: CalendarEvent[];
    public appearance: Appearance;
    private _calendar: Calendar;
    
    public calendarLoaded(event) {
         this.settings = <Settings>{
            displayMode: DISPLAY_MODE.MONTH, 
            scrollOrientation: SCROLL_ORIENTATION.HORIZONTAL,
            selectionMode: SELECTION_MODE.MULTIPLE,
            firstWeekday: 3, // SUN: O, MON: 1, TUES: 2 etc..
            maximumDate: nextMonth, // Can't go further than this date
            minimumDate: lastMonth // can't go earlier than this date
        };
        this.appearance = <Appearance>{
            weekdayTextColor: \"white\", //color of Tue, Wed, Thur.. (only iOS)
            headerTitleColor: \"white\", //color of the current Month (only iOS)
            eventColor: \"white\", // color of dots
            selectionColor: \"#FF3366\", // color of the circle when a date is clicked
            todayColor: \"#831733\", // the color of the current day
            hasBorder: true, // remove border (only iOS)
            todaySelectionColor: \"#FF3366\", // today color when seleted (only iOS)
            borderRadius: 25 // border radius of the selection marker
        };
    }
    
    public dateSelected(event) {
        console.log('date selected');
    }


    public monthChanged(event) {
        console.log('month selected');
    }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@comporell/nativescript-mht-printer":{"name":"@comporell/nativescript-mht-printer","version":"1.2.5","license":"Apache-2.0","readme":"

@comporell/nativescript-mht-printer

\n
ns plugin add @comporell/nativescript-mht-printer
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-slides":{"name":"nativescript-ngx-slides","version":"6.1.0","license":"MIT","readme":"

NativeScript + Angular Slides for iOS and Android

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Intro slides example:

\n

\"Nativescript

\n

Image carousel example:

\n

\"Nativescript

\n

videos are from the NativeScript Slides plugin. all features may not be implemented yet.

\n

videos by Brad Martin

\n

Example Usage:

\n
import { SlidesModule } from \"nativescript-ngx-slides\";

import { AppComponent } from \"./app.component\";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, SlidesModule],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}
\n

XML

\n
<slides>
    <slide class=\"slide-1\">
        <Label text=\"This is Panel 1\"></Label>
    </slide>
    <slide class=\"slide-2\">
        <Label text=\"This is Panel 2\"></Label>
    </slide>
    <slide class=\"slide-3\">
        <Label text=\"This is Panel 3\"></Label>
    </slide>
    <slide class=\"slide-4\">
        <Label text=\"This is Panel 4\"></Label>
    </slide>
    <slide class=\"slide-5\">
        <Label text=\"This is Panel 5\"></Label>
    </slide>
</slides>
\n

CSS

\n

place this in the app.css file in the root of your project.

\n
.slide-1 {
  background-color: darkslateblue;
}

.slide-2 {
  background-color: darkcyan;
}
.slide-3 {
  background-color: darkgreen;
}

.slide-4 {
  background-color: darkgoldenrod;
}
.slide-5 {
  background-color: darkslategray;
}
label {
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
  color: #fff;
}
\n

Great for Intros/Tutorials to Image Carousels.

\n

This very much a work in progress. Please feel free to contribute.

\n

Attributes for SlideContainer

\n\n

Indicators

\n

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

\n
.slide-indicator-inactive {
  background-color: #fff;
  opacity: 0.4;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

.slide-indicator-active {
  background-color: #fff;
  opacity: 0.9;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}
\n

Plugin Development Work Flow:

\n\n

Known issues

\n\n

Contributors

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"TheOriginalJosh\"\"dobjek\"\"EddyVerbruggen\"\"Marco
Josh SommerdobjekEddy VerbruggenCodeback Software
\n

Contributing guidelines

\n

Contributing guidelines

\n

License

\n

MIT

\n

for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-keyboard":{"name":"@nativescript-use/nativescript-keyboard","version":"0.0.1","license":"Apache-2.0","readme":"

@nativescript-use/nativescript-keyboard

\n
npm install @nativescript-use/nativescript-keyboard
\n

Usage

\n
import { Keyboard } from \"@nativescript-use/nativescript-keyboard\"

const keyboard = new Keyboard();

// Open keyboard with focus
keyboard.keyboard(myView);

// Close keyboard
keyboard.close();

// Add listener
keyboard.onChangeVisibility((isOpen: boolean) =>{
  console.log(isOpen)
});
// Remove listener
keyboard.offChangeVisibility();
\n

Type declaration

\n
export declare class Keyboard {
  onChangeVisibility(callback: (isOpen: boolean) => void): void
  offChangeVisibility(): void
  isOpen(): boolean
  open(view: View): void
  close(): void
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-orientation":{"name":"@nativescript-use/nativescript-orientation","version":"0.0.3","license":"Apache-2.0","readme":"

@nativescript-use/nativescript-orientation

\n
npm install @nativescript-use/nativescript-orientation
\n

Usage

\n
import { Orientation } from \"@nativescript-use/nativescript-orientation\"

const orientation = new Orientation();

// Get current orientation
const currentOrientation = orientation.getOrientation();

// Change orientation. values: 'landscape' | 'landscaperight' | 'landscapeleft' | 'portrait'
orientation.setOrientation('landscape');

// Enable rotation
orientation.enableRotation();

// Disable rotation
orientation.disableRotation();

// Add listener
orientation.onChangedOrientation((newValue: CoreTypes.DeviceOrientationType) =>{
  console.log(newValue)
});
// Remove listener
orientation.offChangedOrientation();
\n

Type declaration

\n
export declare class Orientation {
  getOrientation(): CoreTypes.DeviceOrientationType
  onChangedOrientation(callback: (newValue: CoreTypes.DeviceOrientationType) => void): void
  offChangedOrientation(): void
  enableRotation(): void
  disableRotation(): void
  setOrientation(value: 'landscape' | 'landscaperight' | 'landscapeleft' | 'portrait', animation: false): void
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zip":{"name":"nativescript-zip","version":"4.0.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Zip

\n

Installation

\n

NativeScript 4x

\n\n

NativeScript 2x & 3x

\n\n

Usage

\n

Zip

\n
import { Zip } from \"nativescript-zip\";
import * as fs from \"tns-core-modules/file-system\";
let path = fs.path.join(fs.knownFolders.temp().path, \"stuff\");
let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
Zip.zip({
    folder: path,
    destination: dest
});
\n

Progress

\n
import { Zip } from \"nativescript-zip\";
import * as fs from \"tns-core-modules/file-system\";
let path = fs.path.join(fs.knownFolders.temp().path, \"stuff\");
let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
Zip.zip({
    folder: path,
    destination: dest,
    onProgress: onZipProgress
});

function onZipProgress(percent: number) {
    console.log(`unzip progress: ${percent}`);
}
\n

Unzip

\n
import { Zip } from \"nativescript-zip\";
import * as fs from \"tns-core-modules/file-system\";
let zipPath = fs.path.join(fs.knownFolders.temp().path, \"stuff.zip\");
let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
Zip.unzip({
    archive: zipPath,
    destination: dest
});
\n

Progress

\n
import { Zip } from \"nativescript-zip\";
import * as fs from \"tns-core-modules/file-system\";
let zipPath = fs.path.join(fs.knownFolders.temp().path, \"stuff.zip\");
let dest = fs.path.join(fs.knownFolders.documennts().path, \"/assets\");
Zip.unzip({
    archive: zipPath,
    destination: dest,
    onProgress: onUnZipProgress
});

function onUnZipProgress(percent: number) {
    console.log(`unzip progress: ${percent}`);
}
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-clipboard":{"name":"@nativescript-use/nativescript-clipboard","version":"0.0.3","license":"Apache-2.0","readme":"

@nativescript-use/nativescript-clipboard

\n
npm install @nativescript-use/nativescript-clipboard
\n

Usage

\n
import { Clipboard } from \"@nativescript-use/nativescript-clipboard\"

const clipboard = new Clipboard();

// Copy text
clipboard.copy(\"My text\");

// Read Clipboard
const currentClipboardValue = clipboard.read();

// Add listener
clipboard.onCopy((textCopied: string) =>{
  console.log(textCopied)
});
// Remove listener
clipboard.offCopy();
\n

Type declaration

\n
export declare class Clipboard {
    abstract onCopy(callback: (text: string) => void): void
    abstract offCopy(): void
    abstract copy(text: string): boolean
    abstract read(): string
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-perms":{"name":"nativescript-perms","version":"2.0.11","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

This is a port of react-native-permissions

\n

API

\n

Permissions statuses

\n

Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Return valueNotes
authorizedUser has authorized this permission
deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
undeterminedUser has not yet been prompted with a permission dialog
\n

Supported permissions types

\n

The current supported permissions are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeiOSAndroid
Locationlocation✔✔
Cameracamera✔✔
Microphonemicrophone✔✔
Photosphoto✔✔
Contactscontacts✔✔
Eventsevent✔✔
Bluetoothbluetooth✔❌
Remindersreminder✔❌
Push Notificationsnotification✔❌
Background RefreshbackgroundRefresh✔❌
Speech RecognitionspeechRecognition✔❌
Media LibrarymediaLibrary✔❌
Motion Activitymotion✔❌
Storagestorage❌️✔
Phone CallcallPhone❌️✔
Read SMSreadSms❌️✔
Receive SMSreceiveSms❌️✔
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method NameArgumentsNotes
check()type- Returns a promise with the permission status. See iOS Notes for special cases
request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
checkMultiple()[types]- Accepts an array of permission types and returns a promise with an object mapping permission types to statuses
getTypes()none- Returns an array of valid permission types
openSettings()none- (iOS only - 8.0 and later) Switches the user to the settings page of your app
canOpenSettings()none- (iOS only) Returns a boolean indicating if the device supports switching to the settings page
\n

iOS Notes

\n\n
// example
Permissions.check('location', { type: 'always' }).then(response => {
  this.setState({ locationPermission: response[0] })
})

Permissions.request('location', { type: 'always' }).then(response => {
  this.setState({ locationPermission: response[0] })
})

Permissions.request('notification', { type: ['alert', 'badge'] }).then(
  response => {
    this.setState({ notificationPermission: response[0] })
  },
)
\n\n

Example: If you need Contacts permission you have to add the key Privacy - Contacts Usage Description.

\n\"3cde3b44-7ffd-11e6-918b-63888e33f983\"\n

App Store submission disclaimer

\n

If you need to submit you application to the AppStore, you need to add to your\nInfo.plist all *UsageDescription keys with a string value explaining to the\nuser how the app uses this data. Even if you don't use them.

\n

So before submitting your app to the App Store, make sure that in your\nInfo.plist you have the following keys:

\n
<key>NSBluetoothPeripheralUsageDescription</key>
<string>Some description</string>
<key>NSCalendarsUsageDescription</key>
<string>Some description</string>
<key>NSCameraUsageDescription</key>
<string>Some description</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Some description</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Some description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Some description</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Some description</string>
<key>NSAppleMusicUsageDescription</key>
<string>Some description</string>
<key>NSMotionUsageDescription</key>
<string>Some description</string>
\n

This is required because during the phase of processing in the App Store\nsubmission, the system detects that you app contains code to request the\npermission X but don't have the UsageDescription key and then it rejects the\nbuild.

\n
\n

Please note that it will only be shown to the users the usage descriptions of\nthe permissions you really require in your app.

\n
\n

You can find more information about this issue in #46.

\n

Android Notes

\n\n
// example
Permissions.request('camera', {
  rationale: {
    title: 'Cool Photo App Camera Permission',
    message:
      'Cool Photo App needs access to your camera ' +
      'so you can take awesome pictures.',
  },
}).then(response => {
  this.setState({ cameraPermission: response[0] })
})
\n\n

You might need to elevate the targetSdkVersion version in your\nbuild.gradle:

\n
android {
  compileSdkVersion 23 // ← set at least 23
  buildToolsVersion \"23.0.1\"  // ← set at least 23.0.0

  defaultConfig {
    minSdkVersion 16
    targetSdkVersion 23 // ← set at least 23
    // ...
\n

Troubleshooting

\n

Q: iOS - App crashes as soon as I request permission

\n
\n

A: Starting with Xcode 8, you need to add permission descriptions. See iOS\nnotes for more details. Thanks to @jesperlndk\nfor discovering this.

\n
\n

Q: iOS - App crashes when I change permission from settings

\n
\n

A: This is normal. iOS restarts your app when your privacy settings change.\nJust google "iOS crash permission change"

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-nativescript-yidong-kaifa":{"name":"angular-nativescript-yidong-kaifa","version":"2023.207.0","license":"CC BY-NC-SA 4.0","readme":"

Angular NativeScript 移动开发

\n

下载

\n

Docker

\n
docker pull apachecn0/angular-nativescript-yidong-kaifa
docker run -tid -p <port>:80 apachecn0/angular-nativescript-yidong-kaifa
# 访问 http://localhost:{port} 查看文档
\n

PYPI

\n
pip install angular-nativescript-yidong-kaifa
angular-nativescript-yidong-kaifa <port>
# 访问 http://localhost:{port} 查看文档
\n

NPM

\n
npm install -g angular-nativescript-yidong-kaifa
angular-nativescript-yidong-kaifa <port>
# 访问 http://localhost:{port} 查看文档
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-intersection-observer":{"name":"@nativescript-use/nativescript-intersection-observer","version":"0.0.2","license":"Apache-2.0","readme":"

@nativescript-use/nativescript-intersection-observer

\n
npm install @nativescript-use/nativescript-intersection-observer
\n

Usage

\n
import { IntersectionObserver } from \"@nativescript-use/nativescript-intersection-observer\"

const intersectionObserver = new IntersectionObserver();

// Track if `targetView` is visible
intersectionObserver.track(targetView, scollView, (isVisible) => {
    console.log(\"isVisible: \" + isVisible);
})

// Stop track
intersectionObserver.stopTrack();

// Check if is visible view
const isVisible = intersectionObserver.isVisible(targetView, scollView);


Type declaration
```ts
export declare class IntersectionObserver {
    track(view: View, parentView: ScrollView, callback: (isVisible: boolean) => void): void;
    topTrack(parentView: ScrollView): void
    isVisible(view: View, parentView?: View): boolean;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-inappbrowser":{"name":"nativescript-inappbrowser","version":"3.2.0","license":"MIT","readme":"

\n \n \"MIT\n \n \n \"Current\n \n \n \"Build\n \n \n \"Maintenance\"\n \n \n \"Tidelift\n \n \n \n \n \n \"Downloads\"\n \n \n \"Total\n \n \n \"Follow\n \n

\n

InAppBrowser for NativeScript

\n

Provides access to the system's web browser and supports handling redirects

\n

Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

\n

\n \n

\n

Who is using InAppBrowser?

\n

Do you want to see this package in action? Check these awesome projects, yay! 🎉

\n\n

Share your awesome project here! ❤️

\n

Getting started

\n
ns plugin add nativescript-inappbrowser
\n

Manual installation

\n\n

Usage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsAction
openOpens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari.
closeDismisses the system's presented web browser.
openAuthOpens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection).
closeAuthDismisses the current authentication session.
isAvailableDetect if the device supports this plugin.
onStartInitialize a bound background service so the application can communicate its intention to the browser. After the service is connected, the client can be used to Warms up the browser to make navigation faster and indicates that a given URL may be loaded in the future. - Android Only.
warmupWarm up the browser process - Android Only.
mayLaunchUrlTells the browser of a likely future navigation to a URL. The most likely URL has to be specified first. Optionally, a list of other likely URLs can be provided. They are treated as less likely than the first one, and have to be sorted in decreasing priority order. These additional URLs may be ignored. All previous calls to this method will be deprioritized - Android Only.
\n

iOS Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
dismissButtonStyle (String)The style of the dismiss button. [done/close/cancel]
preferredBarTintColor (String)The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF]
preferredControlTintColor (String)The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080]
readerMode (Boolean)A value that specifies whether Safari should enter Reader mode, if it is available. [true/false]
animated (Boolean)Animate the presentation. [true/false]
modalPresentationStyle (String)The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover]
modalTransitionStyle (String)The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl]
modalEnabled (Boolean)Present the SafariViewController modally or as push instead. [true/false]
enableBarCollapsing (Boolean)Determines whether the browser's tool bars will collapse or not. [true/false]
ephemeralWebSession (Boolean)Prevent re-use cookies of previous session (openAuth only) [true/false]
formSheetPreferredContentSize (Object)Custom size for iPad formSheet modals [{width: 400, height: 500}]
\n

Android Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
showTitle (Boolean)Sets whether the title should be shown in the custom tab. [true/false]
toolbarColor (String)Sets the toolbar color. [gray/#808080]
secondaryToolbarColor (String)Sets the color of the secondary toolbar. [white/#FFFFFF]
navigationBarColor (String)Sets the navigation bar color. [gray/#808080]
navigationBarDividerColor (String)Sets the navigation bar divider color. [white/#FFFFFF]
enableUrlBarHiding (Boolean)Enables the url bar to hide as the user scrolls down on the page. [true/false]
enableDefaultShare (Boolean)Adds a default share item to the menu. [true/false]
animations (Object)Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }]
headers (Object)The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }]
forceCloseOnRedirection (Boolean)Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false]
hasBackButton (Boolean)Sets a back arrow instead of the default X icon to close the custom tab. [true/false]
browserPackage (String)Package name of a browser to be used to handle Custom Tabs.
showInRecents (Boolean)Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]
includeReferrer (Boolean)Determining whether to include your package name as referrer for the website to track. [true/false]
\n

Demo

\n
import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from 'nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...
\n

Android Optimizations

\n

On Android, you can warmup the in app browser client to make it launch siginificantly faster. To do so, add the following to your Custom Android Activity.

\n
import { InAppBrowser } from \"nativescript-inappbrowser\";
@NativeClass()
@JavaProxy(\"org.nativescript.demo.MainActivity\")
export class Activity extends androidx.appcompat.app.AppCompatActivity {
  public onStart(): void {
    // InAppBrowser initialization for CustomTabsServiceConnection
    InAppBrowser.onStart();
  }
}
\n

You can further optimize performance and pre-render pages by providing the urls that the user is likely to open.

\n
constructor() {
  super();
  // Do not call this every time the component render
  InAppBrowser.mayLaunchUrl(this._url, [
    \"https://twitter.com/NativeScript\",
    \"https://github.com/NativeScript/NativeScript\",
    \"https://openjsf.org\"
  ]);
}
\n

Authentication Flow using Deep Linking

\n

In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,\ndefine your app scheme and replace my-scheme and my-host with your info.

\n\n
<activity
  ...
  android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />
      <data android:scheme=\"my-scheme\" android:host=\"my-host\" android:pathPrefix=\"\" />
  </intent-filter>
</activity>
\n\n
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my-scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my-scheme</string>
    </array>
  </dict>
</array>
\n\n
export const getDeepLink = (path = \"\") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}
\n\n
import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from 'nativescript-inappbrowser';
import { getDeepLink } from './utilities';
...
  async onLogin() {
    const deepLink = getDeepLink('callback')
    const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(url, deepLink, {
          // iOS Properties
          ephemeralWebSession: false,
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: false
        }).then((response) => {
          if (
            response.type === 'success' &&
            response.url
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...
\n

StatusBar

\n

The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.

\n

Authentication

\n

Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.

\n

Credits 👍

\n\n

Contributing ✨

\n

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
\nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
\nYou can learn more about how you can contribute to this project in the contribution guide.

\n

Contributors ✨

\n

Please do contribute! Issues and pull requests are welcome.

\n

Code Contributors

\n

This project exists thanks to all the people who contribute. [Contribute].

\n

\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"

\n

Collaborators

\n\n\n\n\n\n\n\n\n
\"jdnichollsc\"
Juan Nicholls
✉		\"NathanaelA\"
Nathanael Anderson
✉
\n\n

Financial Contributors

\n

Become a financial contributor and help us sustain our community. [Contribute]

\n

Individuals

\n

\n

Organizations

\n

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

\n

\n\n\n\n\n\n\n\n\n

\n

Supporting 🍻

\n

I believe in Unicorns 🦄\nSupport me, if you do too.

\n

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

\n

\"Wallet

\n
\n

Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

\n
\n

Please let us know your contributions! 🙏

\n

Enterprise 💼

\n

Available as part of the Tidelift Subscription.

\n

The maintainers of InAppBrowser for NativeScript and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

\n

Security contact information 🚨

\n

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

\n

License ⚖️

\n

This repository is available under the MIT License.

\n

Happy coding 💯

\n

Made with ❤️

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@softpak/jsdo-core":{"name":"@softpak/jsdo-core","version":"6.0.1003","license":"Apache-2.0","readme":"

JSDO

\n

The JSDO is a client side typescript library for Progress Data Object Services published by Progress Software Corporation. Its purpose is to provide an easy to understand API for querying, creating, updating and deleting Progress Data Objects as well as invoke server side business logic.\nThe JSDO is a free and open-source full-featured implementation that can be used in web, mobile web and hybrid mobile apps.

\n

Documentation

\n

Progress® Data Objects in an OpenEdge business application can be accessed using the JSDO on the client. For more information, see the Overview of Progress Data Objects, Services and Catalogs.

\n

Usage

\n

This is an npm package. This means that node and npm need to be installed to use it.

\n

To use the JSDO, you normally will simply install it from the public NPM registry via an npm install. You'll need to select a JSDO package depending on your environment:

\n
# For vanilla JS, e.g. running it in a browser:
npm install @progress/jsdo-core

# For usage with node:
npm install @progress/jsdo-node

# For usage with Angular:
npm install @progress/jsdo-angular

# For usage with Nativescript:
npm install @progress/jsdo-nativescript
\n

If you want to add changes and build packages yourself from this repository, you will need to use the scripts in package.json. The package.json in the root folder corresponds to the @progress/jsdo-core package.

\n

Here is a quick overview of the npm scripts:

\n

npm install

\n
\n

This installs the necessary dependencies that the JSDO has and needs to be run at least once.

\n
\n

npm run build:jsdo

\n
\n

This creates a build folder and produces in it a progress.jsdo.js file that can be used either via including it in a <script> tag or via a progress = require('/path/to/build/progress.jsdo.js').progress; in your Node app.

\n
\n

npm run test

\n
\n

This runs the build:jsdo script and then runs the Mocha tests found in the test folder. This can also be run manually by installing Mocha on your environment and then running mocha --recursive in the JSDO folder.

\n
\n

npm run lint

\n
\n

This runs eslint on the JSDO source files.

\n
\n

JSDO and OpenEdge compatibility

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
JSDO versionOpenEdge version
6.0.111.7.x, 12.0.x
\n

Download

\n

You can download a copy of the full JSDO to a zip file.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Source FilePurpose
progress.jsJSDO core
progress.session.jsJSDO session management
progress.util.jsHelper classes for the JSDO
progress.data.kendo.jsKendo UI DataSource for the JSDO
auth/progress.auth.jsJSDO authentication provider
auth/progress.auth.basic.jsJSDO authentication provider (BASIC auth)
auth/progress.auth.form.jsJSDO authentication provider (FORM-based auth)
auth/progress.auth.sso.jsJSDO authentication provider (SSO auth)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Lib FilePurpose
progress.all.jsThe JSDO plus the Kendo UI DataSource for JSDO
progress.all.min.jsThe JSDO plus the Kendo UI DataSource for JSDO minified for deployment
progress.jsdo.jsThe JSDO core components (JSDO, Session, Util classes)
progress.jsdo.min.jsThe JSDO core components (JSDO, Session, Util classes) minified for deployment
\n

The JSDO can be used by hybrid mobile apps, mobile web apps and web browser apps to access OpenEdge and Rollbase servers. Other implementations include a client in a mobile Hybrid App (a variation of the browser client), a Telerik® NativeScript client, a Node.js server, and a Java server. The JSDO has successfully been used with servers other than OpenEdge such as Node.js to export data created / aggregated in Modulus™ to a Progress® Rollbase Application.

\n

License

\n

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

\n

http://www.apache.org/licenses/LICENSE-2.0

\n

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas":{"name":"@nativescript/canvas","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leena-ai/nativescript-sdk":{"name":"@leena-ai/nativescript-sdk","version":"1.1.5","license":"Apache-2.0","readme":"

@leena-ai/nativescript-sdk

\n
ns plugin add @leena-ai/nativescript-sdk
\n

Usage

\n

XML + Typescript

\n
    \n
  1. \n

    Add xmlns to Page element

    \n
    2. \n
  2. \n

    Use the name of xmlns as a selector

    \n
    3. \n
  3. \n

    Leena SDK exports the component named Sdk which can be used to open a Leena bot

    \n

    Example:

    \n
    <Page 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"    
    xmlns:ln=\"@leena-ai/sdk\" navigatingTo=\"navigatingTo\" class=\"page\">
     <!-- Here Goes your Header and any other UI -->
         <GridLayout>
             <ln:Sdk clientId=\"{{ clientId }}\" token=\"changeme\"></ln:Sdk>
         </GridLayout>
     </Page>
    \n
    4. \n
\n

Nativescript Angular

\n
    \n
  1. Import NativeScriptSdkModule in the module you want to load Leena App
    2. \n
  2. Leena SDK exports a component named Sdk that can used like any other Angular component
    3. \n
  3. You can also provide a pageTransition if the sdk is opened as a new route with it's own component
    4. \n
\n

home.component.html

\n
<Button text=\"Leena AI\" [nsRouterLink]=\"['/leena']\" pageTransition=\"slideLeft\" ></Button>
\n

leena.component.html

\n
<GridLayout>
  <Sdk clientId=\"clientId\" token=\"changeme\"></Sdk>
</GridLayout>
\n

Note: Use a <GridLayout> instead of <StackLayout> if the UI does not load

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultRequiredDescription
clientId-YesThe client ID for Leena bot.
token-YesThe app token which will authenticate the user with Leena App
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mastergui/in-app-review":{"name":"@mastergui/in-app-review","version":"1.1.0","license":"Apache-2.0","readme":"

@mastergui/in-app-review

\n
ns plugin add @mastergui/in-app-review
\n

Usage

\n

Android

\n

The Google Play In-App Review API lets you prompt users to submit Play Store ratings and reviews without the inconvenience of leaving your app or game.

\n

\"\"

\n
\n

In-app review flow for an Android user

\n
\n

You must run this at the start of your app or at least before requesting to show the Review dialog. With the new In App Review API, it's Google who's in charge of deciding to show or not the dialog. Calling the init() method will initialize an instance of the ReviewManager and pre-cache a ReviewInfo object with the information needed for them to show it or not.

\n
import { InAppReview } from \"@mastergui/in-app-review\"

InAppReview.init()
\n

To show the dialog, run the following method, and, depending on the ReviewInfo object previously obtained, the dialog will pop up or not.

\n
import { InAppReview } from \"@mastergui/in-app-review\"

InAppReview.showReviewDialog()
\n

It's important to note that the dialog will only show if the app is on the Google Play Store. For development purposes, I added some toasts to understand if everything is going correctly.

\n

For more information on the In-App-Review API, check the official documentation

\n

iOS

\n

Presenting your users with a request for an App Store review using SKStoreReviewController is a good way to get feedback on your app.\n\"\"

\n
\n

In-app review flow for a iOS user

\n
\n

On iOS there's no need to pre-cache the SKStoreReviewController object, but calling the init()method will not result in an error either way; so just calling this should work.

\n
import { InAppReview } from \"@mastergui/in-app-review\"

InAppReview.showReviewDialog()
\n

As in Android's case, it's now Apple who decide whether to show the review dialog or not. Depending on the iOS version, the dialog shown could be different (iOS<13). Apple prevents the dialog from showing more than 3 times a year.

\n

Apple provides some best practices on when and where to show the review dialog:

\n\n

For more information on the Requesting App Store reviews, check the official documentation

\n

Acknowledgments

\n

Thanks to @triniwiz the plugin master and the NativeScript team for building such good tutorials on their blog

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-health-data":{"name":"nativescript-health-data","version":"1.4.0","license":"MIT","readme":"

\n \n

\n

Health Data plugin for NativeScript

\n

This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Prerequisites

\n

Android

\n

Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

\n
keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
\n
\n

Note that the default (debug) keystore password is empty.

\n
\n

iOS

\n

Make sure you enable the HealthKit entitlement in your app ID.

\n

Installation

\n

Install the plugin using the NativeScript CLI:

\n
tns plugin add nativescript-health-data
\n

API

\n

The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

\n

This is how you can import and instantiate the plugin, all examples expect this setup:

\n
import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

export class MyHealthyClass {
  private healthData: HealthData;

  constructor() {
    this.healthData = new HealthData();
  }
}
\n

isAvailable

\n

This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

\n
this.healthData.isAvailable(false)
    .then(available => console.log(available));
\n

isAuthorized

\n

This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

\n\n
\n

iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

\n
\n
this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
    .then(authorized => console.log(authorized));
\n

requestAuthorization

\n

This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

\n

Note that this plugin currently only supports reading data, but that will change.

\n
const types: Array<HealthDataType> = [
\t{name: \"height\", accessType: \"write\"},
\t{name: \"weight\", accessType: \"readAndWrite\"},
\t{name: \"steps\", accessType: \"read\"},
\t{name: \"distance\", accessType: \"read\"}
];

this.healthData.requestAuthorization(types)
    .then(authorized => console.log(authorized))
    .catch(error => console.log(\"Request auth error: \", error));
\n

query

\n

Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

\n

By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

\n

If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

\n
this.healthData.query(
    {
      startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      endDate: new Date(), // now
      dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
      unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
      aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
      sortOrder: \"desc\" // optional, default \"asc\"
    })
    .then(result => console.log(JSON.stringify(result)))
    .catch(error => this.resultToShow = error);
\n

startMonitoring (iOS only, for now)

\n

If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

\n

Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

\n
\n

Background notifications probably don't work on the iOS simulator, so please test those on a real device.

\n
\n
this.healthData.startMonitoring(
    {
      dataType: \"heartRate\",
      enableBackgroundUpdates: true,
      backgroundUpdateFrequency: \"immediate\",
      onUpdate: (completionHandler: () => void) => {
        console.log(\"Our app was notified that health data changed, so querying...\");
        this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
      }
    })
    .then(() => this.resultToShow = `Started monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

stopMonitoring (iOS only, for now)

\n

It's best to call this method in case you no longer wish to receive notifications when health data changes.

\n
this.healthData.stopMonitoring(
    {
      dataType: \"heartRate\",
    })
    .then(() => this.resultToShow = `Stopped monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

Available Data Types

\n

With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

\n

Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

\n

The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-nativescript-yidong-kaifa-jifan":{"name":"angular-nativescript-yidong-kaifa-jifan","version":"2023.210.0","license":"CC BY-NC-SA 4.0","readme":"

Angular NativeScript 移动开发（机翻）

\n

下载

\n

Docker

\n
docker pull apachecn0/angular-nativescript-yidong-kaifa-jifan
docker run -tid -p <port>:80 apachecn0/angular-nativescript-yidong-kaifa-jifan
# 访问 http://localhost:{port} 查看文档
\n

PYPI

\n
pip install angular-nativescript-yidong-kaifa-jifan
angular-nativescript-yidong-kaifa-jifan <port>
# 访问 http://localhost:{port} 查看文档
\n

NPM

\n
npm install -g angular-nativescript-yidong-kaifa-jifan
angular-nativescript-yidong-kaifa-jifan <port>
# 访问 http://localhost:{port} 查看文档
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appversion":{"name":"@nativescript/appversion","version":"2.0.0","license":"MIT","readme":"

NativeScript AppVersion

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Read the current Package ID and Version (name and code) of your NativeScript app.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add @nativescript/appversion
\n

Usage

\n

To use this plugin you must first require / import it:

\n

JavaScript

\n
var appversion = require(\"@nativescript/appversion\");
\n

TypeScript

\n
import * as appversion from \"@nativescript/appversion\";
\n

getVersionName(Sync)

\n

getVersionNameSync is the same as getVersionName, except it doesn't return a Promise.

\n

JavaScript

\n
  appversion.getVersionName().then(function(v) {
      console.log(\"Your app's version is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionName().then((v: string) => {
      console.log(\"Your app's version is: \" + v);
  });
\n

getVersionCode(Sync)

\n

JavaScript

\n
  appversion.getVersionCode().then(function(v) {
      console.log(\"Your app's version code is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionCode().then((v: string) => {
      console.log(\"Your app's version code is: \" + v);
  });
\n

getAppId(Sync)

\n

JavaScript

\n
  appversion.getAppId().then(function(id) {
      console.log(\"Your app's id is: \" + id);
  });
\n

TypeScript

\n
  appversion.getAppId().then((id: string) => {
      console.log(\"Your app's id is: \" + id);
  });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-statusbar":{"name":"nativescript-statusbar","version":"5.0.0","license":"MIT","readme":"

NativeScript Status Bar

\n

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

\n

Usage

\n
npm install nativescript-statusbar --save
\n

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.

\n

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.

\n
<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>
\n

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

\n

\"status-bar-light\"

\n

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.

\n

Webpack

\n

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.

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

Development workflow

\n

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

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/core":{"name":"@awarns/core","version":"1.1.0","license":"Apache-2.0","readme":"

@awarns/core

\n

\"npm\n\"npm\"

\n
\n

This is the only plugin required for the rest of the plugins to work.

\n
\n

This plugin comes as a wrapper on top of the NativeScript Task Dispatcher (NTD), extending it with utilities that ease the development of context-aware applications in several ways:

\n\n

In essence, the main goal of this plugin is to give access to the task model defined by the NTD and extend it with primitives for the development of data providers and data-providing tasks. It also offers a base model (Record) to be extended by any entity produced or consumed by built-in or custom framework tasks. Here, by extending the Record model, time-consuming tasks, like persistence, become greatly simplified.

\n

Installing the core package only requires one command line instruction:

\n
ns plugin add @awarns/core
\n

Usage

\n

You'll need to install and configure the core package the first time you integrate the framework in your app.

\n

Additionally, the core package might be optionally used from your application (or plugins) in other circumstances:

\n\n

Basic usage

\n

Initialization

\n

For the AwarNS framework to work properly, it must be initialized during the application startup. The code must be executed no matter if the application UI is going to be bootstrapped or not. The place to do this is the app.ts file inside the application src folder (main.ts for Angular apps).

\n

Framework initialization implies multiple aspects: (1) determining which built-in and/or custom tasks will be in use, (2) defining how these tasks will be invoked by the results of other tasks or isolated application events, (3) registering plugins that need to be initialized at application startup and (4) configuring behavioural aspects of the framework. This can be seen in more detail in the following code excerpt adapted from the demo application source code:

\n
// app.ts / main.ts
// TypeScript App:
import { Application } from '@nativescript/core';
// or Angular App:
import { runNativeScriptAngularApp, platformNativeScript } from '@nativescript/angular';
import { AppModule } from './app/app.module';

// AwarNS Framework imports
// (always between esential imports and app initialization)
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks'; // An array, containing the lists of tasks that the application will use
import { demoTaskGraph } from '../graph'; // The background workflow definition (task graph instance)
import { registerHumanActivityPlugin } from '@awarns/human-activity';
import { registerNotificationsPlugin } from '@awarns/notifications';
import { registerTracingPlugin } from '@awarns/tracing';
import { registerPersistencePlugin } from '@awarns/persistence';

awarns
  .init(
    demoTasks, // (1)
    demoTaskGraph, // (2)
    [ // (3)
      // See bellow for more information regarding the items that this array can contain
      // See each plugin docs to learn more about their registration-time options
      registerHumanActivityPlugin(),
      registerNotificationsPlugin('Intervention alerts'),
      registerPersistencePlugin(),
      registerTracingPlugin(),
    ],
    { // (4)
      // See bellow for a description of the rest of the options
      enableLogging: true,
    }
  )
  .then(() => console.log('AwarNS framework successfully loaded'))
  .catch((err) => {
    console.error(`Could not load AwarNS framework: ${err.stack ? err.stack : err}`);
  });

// TypeScript App:
Application.run({ moduleName: 'app-root' });
// Angular App:
runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});
\n
\n

In (3), along with the built-in plugin registration functions, it is also possible to register custom loaders to run code during the framework initialization phase. You can do this by creating a function which must return another function compatible with the PluginLoader API. An example implementation of this can be found in this same page (see Instantiating push-based data provider tasks) and in the source of the human-activity, the notifications, the persistence and the tracing plugins.

\n

Important: we advise you to register here only short-lived functions, to ensure all the functionalities of the framework are ready before starting executing tasks. If you need to start a long process here, you can do it, but be sure that the main function does not wait for it to finish its execution (for example, using then/catch instead of await). Not following this recommendation may lead to unexpected and hard-to-debug behaviours.

\n
\n
\n

In (4), aside from indicating if the logging must be enabled or not, it is also possible to pass by a custom logger implementation to get more control over what is being logged. And also be able to store or send the log traces locally or remotely. More details in: A brief note on logging and the rest of the utilities.

\n
\n

Managing tasks' readiness and emitting events from UI

\n

In the application UI you can interact with the framework to check if certain tasks are lacking some permissions or system features to be enabled. This can be done using the awarns singleton object seen in the previous example, which shares API with the NTD's taskDispatcher object:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn typeDescription
isReady()Promise<boolean>Allows to check (and wait for) framework initialization status. It also iterates over your app's tasks to check if they are ready for their execution, by calling their checkIfCanRunMethod(). You should call this method before emitting any external event. The promise is stored internally, it is safe to call this method as many times as needed.
tasksNotReady (property)Promise<Array<Task>>Method to be called if isReady() returns false. Here you can check the tasks that did not pass the ready check. Useful in case you want to customize te UI before calling prepare(). For example, to give an explanation to your users of why you are asking their consent
prepare()Promise<void>Method to be called if isReady() returns false. If your app has one or more tasks that have reported not to be ready, it will call their prepare() method (e.g. to ask for missing permissions or enable disabled capabilities). WARNING! This method is only meant to be called while the UI is visible. Follow this guideline to foster the creation of a consistent task ecosystem.
emitEvent(name: string, data?: EventData)voidA fire and forget method. Call this method whenever you want to propagate an external event towards the plugin. Dependant tasks will be executed inside a background environment. User can safely navigate to another app, we bootstrap an independent background execution context to ensure it completes its life-cycle (we guarantee a maximum of 3 minutes execution time). Optionally, You can provide an additional key-value data dictionary that will be delivered to the task handling the event
\n

Extending the Record class

\n

The Record class is central to the AwarNS framework. Extending it in your entities, means that they will speak the framework's common language regarding data sharing. This will greatly simplify certain operations like, for example, persistence and data exporting, to name a few.

\n

This class is ideal for representing things that change over time. Each extension (child) to the Record class must hold its type, which is a string. This string uniquely identifies each record's entity type, which is required later on, for example, to persist and query each type of entity individually. Records must hold a timestamp too, indicating when they were generated. Optionally, they can state a change, which can be: a start, an end or nothing (no change).

\n

The best way to see how the Record class can be extended is through some already existing examples in the framework:

\n
\nGeolocation\n

The Geolocation record:

\n
import { Record } from '@awarns/core/entities';

import { GeolocationLike as GL, Geolocation as NativeGeolocation } from 'nativescript-context-apis/geolocation';
export type GeolocationLike = GL;

export const GeolocationType = 'geolocation';

export class Geolocation extends Record {
  constructor(
    public latitude: number,
    public longitude: number,
    public altitude: number,
    public horizontalAccuracy: number,
    public verticalAccuracy: number,
    public speed: number,
    public direction: number,
    capturedAt: Date
  ) {
    super(GeolocationType, capturedAt);
  }

  distance(to: Geolocation | GeolocationLike) {
    return new NativeGeolocation(this).distance(to);
  }
}
\n
\n
\nGeofencing\n

The AoIProximityChange record:

\n
import { Change, Record } from '@awarns/core/entities';
import { GeofencingProximity } from './proximity';

export const AoIProximityChangeType = 'aoi-proximity-change';

export class AoIProximityChange extends Record {
  constructor(
    public aoi: AreaOfInterest,
    public proximity: GeofencingProximity,
    change: Change,
    timestamp = new Date()
  ) {
    super(AoIProximityChangeType, timestamp, change);
  }
}

export interface AreaOfInterest {
  id: string;
  name: string;
  latitude: number;
  longitude: number;
  radius: number;
  category?: string;
  level?: number;
}
\n
\n
\nHuman activity\n

The HumanActivityChange record:

\n
import { Record, Change } from '@awarns/core/entities';
import { HumanActivity } from 'nativescript-context-apis/activity-recognition';

export const HumanActivityChangeType = 'human-activity';

export class HumanActivityChange extends Record {
  constructor(public activity: HumanActivity, change: Change, detectedAt: Date, public confidence?: number) {
    super(HumanActivityChangeType, detectedAt, change);
  }
}

export { HumanActivity } from 'nativescript-context-apis/activity-recognition';
\n
\n
\nNotifications\n

You can even create record hierarchies like:

\n

The NotificationTap record:

\n
import { NotificationEventBaseRecord } from './notification-event-base-record';
import { TapAction } from '../notification';

export const NotificationTapType = 'notification-tap';

export class NotificationTapRecord extends NotificationEventBaseRecord {
  constructor(notificationId: number, tapAction: TapAction, timestamp?: Date) {
    super(NotificationTapType, notificationId, tapAction, timestamp);
  }
}
\n

The NotificationDiscard record:

\n
import { NotificationEventBaseRecord } from './notification-event-base-record';
import { TapAction } from '../notification';

export const NotificationDiscardType = 'notification-discard';

export class NotificationDiscardRecord extends NotificationEventBaseRecord {
  constructor(notificationId: number, tapAction: TapAction, timestamp?: Date) {
    super(NotificationDiscardType, notificationId, tapAction, timestamp);
  }
}
\n

And the common base for the two, the NotificationEventBaseRecord:

\n
import { Change, Record } from '@awarns/core/entities';
import { TapAction } from '../notification';

export abstract class NotificationEventBaseRecord extends Record {
  protected constructor(
    public name: string,
    public notificationId: number,
    public tapAction: TapAction,
    timestamp: Date = new Date()
  ) {
    super(name, timestamp, Change.NONE);
  }
}
\n

More examples inside this package are the QuestionnaireAnswers, the UserFeedback, the UserConfirmation or the UserReadContent records.

\n
\n

Similarly, additional examples exist in the Wi-Fi (WifiScan), the BLE (BleScan) and the battery (BatteryLevel) packages. And in the framework README too (see Detailed usage and extension section).

\n

Developing your own data providers

\n

The most important aspect of a context-awareness framework is to be able to sense the environment. The first step to achieve this is to model what will be sensed. We have advanced towards this before, by extending the Record class. Now, we need a way to define how to sense / acquire these data.

\n

Here it is important to make a distinction. We understand that there are two ways to obtain data: actively and passively. This means, we can manually pull the data, or we can subscribe to obtain data pushes once the updates become available.

\n

Pull data providers

\n

The most common case to obtain data is to ask for it and, sometimes, after a short delay, obtain it. This is the case of, for example, the location of the phone, its battery level, the list of nearby bluetooth devices or Wi-Fi access points. The list is not limited to what the phone can provide. For example, we pull data when we perform a network request (e.g., to obtain the current weather).

\n

To develop data providers like this. We need to be able to code mechanisms to do the following things: (1) know if all the conditions are met to obtain the data (this means, all the permissions have been granted, the specific system capabilities are enabled, etc.), (2) in case not all the conditions are met, what needs to be done to meet them (i.e., ask permission, enable system services, etc.) and (3) determine how the next data update will be obtained. This last thing is needed because pull-based data providers work like iterators. Internally, the framework will ask them for the next value to be obtained, this is, when specified by the background execution workflow of your app.

\n

With that said, the best way to learn how to implement pull-based data providers is to see some examples already implemented in the framework. When implementing a new data provider, we advise to start using one of the following as a template. Here, they are listed from the simplest to the most complex:

\n
\nBattery\n

The BatteryProvider:

\n
import { BatteryLevel, BatteryLevelType } from './battery-level';
import { Application, isAndroid } from '@nativescript/core';
import { PullProvider, ProviderInterruption } from '@awarns/core/providers';

export class BatteryProvider implements PullProvider {
  get provides() {
    return BatteryLevelType;
  }

  constructor(private sdkVersion?: number) {
    if (isAndroid && !this.sdkVersion) {
      this.sdkVersion = android.os.Build.VERSION.SDK_INT;
    }
  }

  next(): [Promise<BatteryLevel>, ProviderInterruption] {
    const value = this.getBatteryPercentage();
    const batteryLevel = BatteryLevel.fromPercentage(value);

    return [Promise.resolve(batteryLevel), () => null];
  }

  checkIfIsReady(): Promise<void> {
    return Promise.resolve();
  }

  prepare(): Promise<void> {
    return Promise.resolve();
  }

  private getBatteryPercentage(): number {
    if (!isAndroid) {
      return -1;
    }
    if (this.sdkVersion >= 21) {
      const batteryManager: android.os.BatteryManager = Application.android.context.getSystemService(
        android.content.Context.BATTERY_SERVICE
      );

      return batteryManager.getIntProperty(android.os.BatteryManager.BATTERY_PROPERTY_CAPACITY);
    }
    const intentFilter = new android.content.IntentFilter(android.content.Intent.ACTION_BATTERY_CHANGED);
    const batteryStatus = Application.android.context.registerReceiver(null, intentFilter);

    const level = batteryStatus ? batteryStatus.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) : -1;
    const scale = batteryStatus ? batteryStatus.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) : -1;

    const batteryPercentage = level / scale;

    return Math.trunc(batteryPercentage * 100);
  }
}
\n
\n
\nWi-Fi\n

The WifiScanProvider:

\n
import { ProviderInterrupter, ProviderInterruption, PullProvider } from '@awarns/core/providers';
import { WifiScan, WifiScanType } from './scan';
import {
  FingerprintGrouping,
  getWifiScanProvider as getNativeProvider,
  WifiFingerprint,
  WifiScanProvider as NativeProvider,
} from 'nativescript-context-apis/wifi';
import { firstValueFrom, map, of, Subject, takeUntil, timeout } from 'rxjs';

export class WifiScanProvider implements PullProvider {
  get provides(): string {
    return WifiScanType;
  }

  constructor(
    private ensureIsNew: boolean,
    private timeout: number,
    private nativeProvider: () => NativeProvider = getNativeProvider
  ) {}

  async checkIfIsReady(): Promise<void> {
    const isReady = await this.nativeProvider().isReady();
    if (!isReady) {
      throw wifiScanProviderNotReadyErr;
    }
  }

  async prepare(): Promise<void> {
    return this.nativeProvider().prepare();
  }

  next(): [Promise<WifiScan>, ProviderInterruption] {
    const interrupter = new ProviderInterrupter();
    const scanResult = this.obtainWifiScan(interrupter);
    return [scanResult, () => interrupter.interrupt()];
  }

  private obtainWifiScan(interrupter: ProviderInterrupter): Promise<WifiScan> {
    const interrupted$ = new Subject<void>();
    interrupter.interruption = () => {
      interrupted$.next();
      interrupted$.complete();
    };

    return firstValueFrom(
      this.nativeProvider()
        .wifiFingerprintStream({
          ensureAlwaysNew: this.ensureIsNew,
          grouping: FingerprintGrouping.NONE,
          continueOnFailure: false,
        })
        .pipe(
          takeUntil(interrupted$),
          timeout({ each: this.timeout, with: () => of(null) }),
          map((fingerprint) => scanFromFingerprint(fingerprint))
        )
    );
  }
}

function scanFromFingerprint(fingerprint: WifiFingerprint): WifiScan {
  const { seen, isNew, timestamp } = fingerprint;
  return new WifiScan(seen, isNew, timestamp);
}

export const wifiScanProviderNotReadyErr = new Error(
  \"Wifi scan provider is not ready. Perhaps permissions haven't been granted, location services have been disabled or wifi is turn off\"
);
\n
\n
\nBLE\n

The BleScanProvider:

\n
import { ProviderInterrupter, ProviderInterruption, PullProvider } from '@awarns/core/providers';
import { BleScan, BleScanType } from './scan';
import {
  getBleScanProvider as getNativeProvider,
  BleScanProvider as NativeProvider,
  BleScanMode,
  BleScanResult,
} from 'nativescript-context-apis/ble';
import { firstValueFrom, map, Subject, takeUntil, timer, toArray } from 'rxjs';

export class BleScanProvider implements PullProvider {
  get provides(): string {
    return BleScanType;
  }

  constructor(
    private scanTime: number,
    private scanMode: BleScanMode,
    private iBeaconUuids: Array<string>,
    private nativeProvider: () => NativeProvider = getNativeProvider
  ) {}

  async checkIfIsReady(): Promise<void> {
    const isReady = await this.nativeProvider().isReady();
    if (!isReady) {
      throw bleScanProviderNotReadyErr;
    }
  }

  async prepare(): Promise<void> {
    return this.nativeProvider().prepare();
  }

  next(): [Promise<BleScan>, ProviderInterruption] {
    const interrupter = new ProviderInterrupter();
    const scanResult = this.obtainBleScan(interrupter);
    return [scanResult, () => interrupter.interrupt()];
  }

  private obtainBleScan(interrupter: ProviderInterrupter): Promise<BleScan> {
    const interrupted$ = new Subject<void>();
    interrupter.interruption = () => {
      interrupted$.next();
      interrupted$.complete();
    };

    return firstValueFrom(
      this.nativeProvider()
        .bleScanStream({
          reportInterval: 100 /* Lower report intervals don't seem to report anything in background*/,
          scanMode: this.scanMode,
          iBeaconUuids: this.iBeaconUuids,
        })
        .pipe(
          takeUntil(timer(this.scanTime)),
          toArray(),
          map((results) => scanFromResults(results))
        )
    );
  }
}

function scanFromResults(results: Array<BleScanResult>): BleScan {
  if (results.length === 0) {
    throw new Error('No BLE devices were found nearby!');
  }
  return new BleScan(
    results.reduce((prev, curr) => [...prev, ...curr.seen], []),
    results[results.length - 1].timestamp
  );
}

const bleScanProviderNotReadyErr = new Error(
  \"BLE scan provider is not ready. Perhaps permissions haven't been granted, location services have been disabled or Bluetooth is turn off\"
);
\n
\n
\nGeolocation\n

The GeolocationProvider:

\n
import { PullProvider, ProviderInterrupter, ProviderInterruption } from '@awarns/core/providers';
import { Geolocation, GeolocationType } from './geolocation';

import {
  GeolocationProvider as NativeProvider,
  Geolocation as NativeGeolocation,
  getGeolocationProvider as getNativeProvider,
} from 'nativescript-context-apis/geolocation';

import { firstValueFrom, from, Observable, of, Subject, throwError, timeout } from 'rxjs';
import { map, mergeMap, take, takeUntil, toArray } from 'rxjs/operators';

export class GeolocationProvider implements PullProvider {
  get provides(): string {
    return GeolocationType;
  }

  constructor(
    private bestOf: number,
    private timeout: number,
    private nativeProvider: () => NativeProvider = getNativeProvider
  ) {}

  async checkIfIsReady(): Promise<void> {
    const isReady = await this.nativeProvider().isReady();
    if (!isReady) {
      throw geolocationProviderNotReadyErr;
    }
  }

  prepare(): Promise<void> {
    return this.nativeProvider().prepare(false, true);
  }

  next(): [Promise<Geolocation>, ProviderInterruption] {
    const interrupter = new ProviderInterrupter();
    const bestLocation = this.obtainBestLocationAmongNext(this.bestOf, interrupter);
    return [bestLocation, () => interrupter.interrupt()];
  }

  private obtainBestLocationAmongNext(amount: number, interrupter: ProviderInterrupter): Promise<Geolocation> {
    const interrupted = new Subject<void>();
    interrupter.interruption = () => {
      interrupted.next();
      interrupted.complete();
    };

    return firstValueFrom(
      this.nativeProvider()
        .locationStream({
          highAccuracy: true,
          stdInterval: 1000,
          minInterval: 100,
          maxAge: 60000,
          saveBattery: false,
        })
        .pipe(
          takeUntil(interrupted),
          take(amount),
          timeout({ each: this.timeout, with: () => of(null) }),
          toArray(),
          map(pickBest),
          mergeMap((location) => this.ensureItGetsAtLeastOne(location)),
          map(toGeolocation)
        )
    );
  }

  private ensureItGetsAtLeastOne(location: NativeGeolocation): Observable<NativeGeolocation> {
    if (!location) {
      return from(
        this.nativeProvider().acquireLocation({
          highAccuracy: true,
          allowBackground: true,
        })
      ).pipe(
        timeout({
          each: this.timeout,
          with: () => throwError(() => new Error('Could not acquire location')),
        })
      );
    }
    return of(location);
  }
}

export const geolocationProviderNotReadyErr = new Error(
  \"Geolocation provider is not ready. Perhaps permissions haven't been granted or location services have been disabled\"
);

function pickBest(locations: Array<NativeGeolocation>): NativeGeolocation {
  const now = Date.now();
  return locations.reduce(
    (previous, current) =>
      current && (!previous || calculateScore(current, now) > calculateScore(previous, now)) ? current : previous,
    null
  );
}

function calculateScore(location: NativeGeolocation, now: number): number {
  const { horizontalAccuracy, timestamp } = location;
  const timeDiff = (now - timestamp.getTime()) / 1000;

  const limitedAccuracy = Math.min(horizontalAccuracy, 65);
  const limitedTimeDiff = Math.min(Math.max(timeDiff, 0), 60);

  const accuracyScore = 1 - limitedAccuracy / 65;
  const timeDiffScore = 1 - limitedTimeDiff / 60;

  return ((accuracyScore + timeDiffScore) / 2) * 10;
}

function toGeolocation(nativeGeolocation: NativeGeolocation): Geolocation {
  return new Geolocation(
    nativeGeolocation.latitude,
    nativeGeolocation.longitude,
    nativeGeolocation.altitude,
    nativeGeolocation.horizontalAccuracy,
    nativeGeolocation.verticalAccuracy,
    nativeGeolocation.speed,
    nativeGeolocation.direction,
    nativeGeolocation.timestamp
  );
}
\n
\n

Push data providers

\n

Sometimes we want to obtain data, but we don't know when that data will come. In those cases we will want to instruct a third party to notify our app regarding data updates. This is the case, for example, of human activity recognition, where updates will come only after the device starts being moved.

\n

The implementation of a push-based data provider has things in common with the pull-based data provider. Both need to know if they'll be able to obtain data and, if not, know what needs to be done to overcome this situation. The key difference is that instead of asking for the next value to be obtained (and wait for it), here we'll need two mechanisms to state that: (1) we are interested in obtaining data updates and (2) we are no longer interested in those updates. Like a subscribe / unsubscribe mechanism, but that persists after application shutdowns and phone reboots.

\n

A complete example implementation of a push-based provider can be seen in the human activity package (the HumanActivityProvider):

\n
import { PushProvider } from '@awarns/core/providers';
import { ActivityRecognizer, getActivityRecognizer, Resolution } from 'nativescript-context-apis/activity-recognition';

import { HumanActivityChangeType } from './human-activity-change';
import { getLogger } from '@awarns/core/utils/logger';
import { getHumanActivityChangeReceiver } from './receiver';

const possibleResolutions: Array<Resolution> = [Resolution.LOW, Resolution.MEDIUM];

export class HumanActivityProvider implements PushProvider {
  get provides() {
    return HumanActivityChangeType;
  }

  static setup() {
    possibleResolutions.forEach((resolution) => {
      getActivityRecognizer(resolution).listenActivityChanges((activityChange) => {
        getLogger('HumanActivityProvider').debug(`Got an activity change!: ${JSON.stringify(activityChange)}`);
        getHumanActivityChangeReceiver().onReceive(activityChange);
      });
    });
  }

  constructor(
    private resolution: Resolution,
    private detectionInterval: number = 0,
    private providerLoader: (resolution: Resolution) => ActivityRecognizer = getActivityRecognizer
  ) {}

  async checkIfIsReady(): Promise<void> {
    if (!this.activityRecognizer().isReady()) {
      throw new HumanActivityRecognizerNotReadyErr(this.resolution);
    }
  }

  async prepare(): Promise<void> {
    await this.activityRecognizer().prepare();
  }

  async startProviding(): Promise<void> {
    await this.activityRecognizer().startRecognizing({
      detectionInterval: this.detectionInterval,
    });
  }

  async stopProviding(): Promise<void> {
    await this.activityRecognizer().stopRecognizing();
  }

  private activityRecognizer(): ActivityRecognizer {
    return this.providerLoader(this.resolution);
  }
}

export class HumanActivityRecognizerNotReadyErr extends Error {
  constructor(resolution: Resolution) {
    super(
      `${resolution} resolution human activity recognizer. Perhaps the required permissions hadn't been granted. Be sure to call prepare() first`
    );
  }
}

export { Resolution } from 'nativescript-context-apis/activity-recognition';
\n

Using your data providers with the built-in tasks

\n

Once we have developed our own data providers, integrating them in the framework, to use them in our background workflows, is quite straight forward.

\n

For this aim, we have created a set of tasks which understand the API of the data providers and are able to obtain data from them in a unified way.

\n

Instantiating pull-based data provider tasks

\n

The framework comes with two mechanisms to acquire data from a pull-based data provider: a single data provider and a batch data provider. Both do what their name indicates. The former reads one value from the data provider and immediately emits it, whereas the latter can accumulate multiple values before emitting.

\n

These tasks are always used in the same way, although their behaviour can be configured. As an example, this is how both are used with the GeolocationProvider:

\n
import { Task, SinglePullProviderTask, BatchPullProviderTask } from '@awarns/core/tasks';
import { GeolocationProvider } from './provider';

const DEFAULT_SINGLE_BEST_OF = 3;
const DEFAULT_SINGLE_TIMEOUT = 10000;

const DEFAULT_BATCH_BEST_OF = 1;
const DEFAULT_BATCH_TIMEOUT = 15000;

export function acquirePhoneGeolocationTask(config: GeolocationTaskConfig = {}): Task {
  return new SinglePullProviderTask(
    new GeolocationProvider(config.bestOf ?? DEFAULT_SINGLE_BEST_OF, config.timeout ?? DEFAULT_SINGLE_TIMEOUT),
    'Phone',
    { foreground: true }
  );
}

export function acquireMultiplePhoneGeolocationTask(config: GeolocationTaskConfig = {}): Task {
  return new BatchPullProviderTask(
    new GeolocationProvider(config.bestOf ?? DEFAULT_BATCH_BEST_OF, config.timeout ?? DEFAULT_BATCH_TIMEOUT),
    'Phone',
    { foreground: true }
  );
}

export interface GeolocationTaskConfig {
  bestOf?: number;
  timeout?: number;
}
\n

Both tasks have been carefully crafted to create predictable outputs. Instances of the SinglePullProviderTask will be named: acquire{prefix?}{record-type}, where the prefix is the second optional parameter to the task constructor and the record-type is obtained by asking the provider what does it provide. On the other hand, instances of the BatchPullProviderTask will be named: acquireMultiple{prefix?}{record-type}, where the placeholders are populated in the same way. The event produced by the two is in both cases the same: {record-type}Acquired. The only difference is that the single provider task outputs just one record, whereas the batch provider tasks outputs an array of them.

\n
\n

Note: When implementing tasks which work on top of the result of a data provider, consider that the event can contain a single record or an array of them, depending on if they come from a single or a batch data provider task.

\n
\n

These tasks allow some configuration. During their instantiation time, it is possible to indicate if they are required to run in the foreground or not, as seen above. This is required when collecting sensitive data. The foreground notification can be configured following the specific NTD instructions. In addition, while defining a workflow, the batch provider task can be configured to limit the maximum frequency at which new records can be collected, as it can be seen here, by using the maxInterval configuration parameter.

\n
\n

Note: One big difference between the single provider task and the batch provider task, is that the latter will not finish until all the available time for running the task has been consumed. This is, if the batch task has been scheduled to run every minute, it will try to collect as many samples as possible during that minute before reporting. Keep this in mind for not to schedule long-lived tasks after a batch data collection, otherwise, they might not run at all. This task is intended for an exhaustive data collection with very little post-processing.

\n
\n

Instantiating push-based data provider tasks

\n

Push-based data provider tasks are easier to instantiate, but a bit more difficult to integrate. Unlike the pull-based tasks, the process to set up push-based tasks requires three different steps.

\n

The first thing to do, is to instantiate the provider start and stop tasks. We have examples for that using HumanActivityProviders:

\n
import { Task, StartPushProviderTask, StopPushProviderTask } from '@awarns/core/tasks';

import { HumanActivityProvider, Resolution } from './provider';

export function startDetectingCoarseHumanActivityChangesTask(): Task {
  return new StartPushProviderTask(new HumanActivityProvider(Resolution.LOW), 'Coarse');
}

export function stopDetectingCoarseHumanActivityChangesTask(): Task {
  return new StopPushProviderTask(new HumanActivityProvider(Resolution.LOW), 'Coarse');
}

export function startDetectingIntermediateHumanActivityChangesTask(): Task {
  return new StartPushProviderTask(new HumanActivityProvider(Resolution.MEDIUM), 'Intermediate');
}

export function stopDetectingIntermediateHumanActivityChangesTask(): Task {
  return new StopPushProviderTask(new HumanActivityProvider(Resolution.MEDIUM), 'Intermediate');
}
\n

In a similar way to the SingleProvider and BatchProvider tasks, the naming of the tasks has been standardized. For the start task, the name always follows this pattern: startDetecting{prefix?}{record-type}Changes, whereas for the stop task, it is always like this: stopDetecting{prefix?}{record-type}Changes.

\n

The key difference with the pull-based tasks is that, additionally, we also need to register a listener to receive the updates from the provider and emit them as framework events. Following with the example of the human activity recognition:

\n
import { awarns } from '@awarns/core';
import { EventData } from '@awarns/core/events';

import { ActivityChange, HumanActivity, Transition } from 'nativescript-context-apis/activity-recognition';
import { HumanActivityChange } from './human-activity-change';
import { Change } from '@awarns/core/entities';

const DEFAULT_EVENT = 'userActivityChanged';

export class HumanActivityChangeReceiver {
  constructor(private emitEvent: (eventName: string, eventData?: EventData) => void) {}

  onReceive(activityChange: ActivityChange) {
    const { type, timestamp, confidence } = activityChange;
    const change = activityChange.transition === Transition.STARTED ? Change.START : Change.END;
    const record = new HumanActivityChange(type, change, timestamp, confidence);
    this.emitEvent(DEFAULT_EVENT, record);
    this.emitEvent(generateEventNameFromActivityChange(record), record);
  }
}

function generateEventNameFromActivityChange(activityChange: HumanActivityChange) {
  const transition = activityChange.change === Change.START ? 'Started' : 'Finished';
  return `user${transition}${actionFromActivityType(activityChange.activity)}`;
}

function actionFromActivityType(type: HumanActivity) {
  switch (type) {
    case HumanActivity.STILL:
      return 'BeingStill';
    case HumanActivity.TILTING:
      return 'StandingUp';
    case HumanActivity.WALKING:
      return 'Walking';
    case HumanActivity.RUNNING:
      return 'Running';
    case HumanActivity.ON_BICYCLE:
      return 'RidingABicycle';
    case HumanActivity.IN_VEHICLE:
      return 'BeingInAVehicle';
  }
}

let _receiver: HumanActivityChangeReceiver;
export function getHumanActivityChangeReceiver(): HumanActivityChangeReceiver {
  if (!_receiver) {
    _receiver = new HumanActivityChangeReceiver(awarns.emitEvent);
  }
  return _receiver;
}
\n

The last thing to do is to register this listener at application startup. The best place to do it is by encapsulating the listener registration inside a function and invoke it at plugin registration time, as seen in the Basic usage section.

\n

This is how this function has been implemented in the human activity recognition plugin:

\n
import { PluginLoader } from '@awarns/core';
import { Task } from '@awarns/core/tasks';
import { HumanActivityProvider } from './internal/provider';


export function registerHumanActivityPlugin(): PluginLoader {
  return async (_tasksInUse: Array<Task>) => {
    HumanActivityProvider.setup();
    // ...
  };
}
\n

A brief note on logging and the rest of the utilities

\n

In addition to all the aforementioned features, the core package comes with a small set of tools consisting of typical reusable functionality pieces. These are classified in 4 different domains: logging, testing, unique identifiers and data serialization.

\n

Logging

\n

The AwarNS framework comes with a built-in console logger. However, it is possible to inject a custom logger during the framework initialization (see Basic usage - Initialization).

\n

Custom loggers can be used even for submitting crashes, even in the context of the framework, to a remote server. The following code fragment shows an example with a logger that submits errors to Firebase Crashlytics:

\n
import {
  Logger,
  AbstractLogger,
} from \"@awarns/core/utils/logger\";
import { FirebaseManager, firebaseManager } from \"../firebase\";
import { DevLogger } from \"./dev\";
import { isAndroid } from \"@nativescript/core\";

export class ProdLogger extends AbstractLogger {
    constructor(
        tag: string,
        private firebase: FirebaseManager = firebaseManager,
        private auxLogger: Logger = new DevLogger(tag)
    ) {
        super(tag);
    }

    protected logDebug(message: string): void {
        return; // Do not print or send debug messages in production
    }

    protected async logInfo(message: string): Promise<void> {
        const crashlytics = await this.firebase.crashlytics();
        if (crashlytics) {
            crashlytics.log(message);
        } else {
            this.auxLogger.info(message);
        }
    }

    protected async logWarning(message: string): Promise<void> {
        const crashlytics = await this.firebase.crashlytics();
        if (crashlytics) {
            crashlytics.log(message);
        } else {
            this.auxLogger.warn(message);
        }
    }

    protected async logError(message: string): Promise<void> {
        const crashlytics = await this.firebase.crashlytics();
        if (!crashlytics) {
            this.auxLogger.error(message);
            return;
        }
        
        crashlytics.sendCrashLog(new java.lang.Exception(message));
    }
}
\n
\n

Note: To implement a custom logger, it is not needed to extend the AbstractLogger class. If, for some reason, you're not able to do it, or you want more freedom regarding how the messages are printed, you can always just implement the Logger interface.

\n
\n

Instances of logger clases similar to the one above declare the following public API (same as for the Logger interface):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn typeDescription
debug(message: any)voidAllows to display messages that are only useful during the development. Typically you'll want to have two separate loggers, one for development and another one for production. The production logger can simply ignore calls to this method, like it happens above.
info(message: any)voidAllows to display regular information messages which might be useful to see while debugging log traces. This is used by each task's log() method.
warning(message: any)voidAllows to log non-critical errors.
error(message: any)voidAllows to log fatal application failures.
\n

With all the information from this section, if you want to use this optional framework feature, we advise you to implement a function to instantiate one or even different loggers (based on the current environment type) with a scope tag. Then, inject this new function to the framework configuration options object, using the customLogger(tag: string) property.

\n

Testing

\n

Inside the @awarns/core/testing/events folder, you'll find some functions to facilitate testing your own tasks in isolation from the rest of the framework:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn typeDescription
createEvent(name: string, params?: CreateEventParams)DispatchableEventAllows to create a new NTD event, useful to invoke the execution of a task. The name of the event is mandatory. For the second optional parameter, see the CreateEventParams object API below.
emit(dispatchableEvent: DispatchableEvent)voidEmits a newly created event. Typically you won't want to use this one unless you're testing complete background workflows.
listenToEventTrigger(eventName: string, eventId: string)Promise<EventData>Listens and waits for a type of event (eventName) with a specific id (eventId, obtained from DispatchableEvent.id) to be emitted. Returns a promise containing the payload of the received event.
\n

This is the shape of the CreateEventParams object:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
dataEventDataA key-value object containing the payload of the event. If not present it will default to {} during the creation of the event.
idstringA string uniquely identifying this instance of the event (must be unique for each task invoke). Defaults to a new UUID during the creation of the task.
expirationTimestampnumberIndicates when the tasks handling this event should finish their execution. Defaults to nothing. If provided, must be a UNIX timestamp.
\n
\n

For more information on how to use these APIs in your tests, you can see how we have implemented our own tests. Some examples are the SinglePullProvider Spec, the BatchPullProvider Spec, the StartPushProvider Spec and the StopPushProvider Spec.

\n
\n

Unique identifiers

\n

Sometimes you'll need to create your own universally unique identifiers (UUIDs). Given we extensively use them throughout the framework, we have thought that it could be useful to expose a function to generate them, either for creating new plugins or features on top of the framework.

\n

Inside the @awarns/core/utils/uuid folder, you'll find a function with the following signature:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn typeDescription
uuidstringUses the built-in mechanism in the underlying OS to generate a new UUID. In Android, it uses the UUID.randomUUID() method which generates an UUID v4. No other external dependencies are involved.
\n

Data serialization

\n

In certain cases, you might need to convert complex object structures to a string, and get back the original object somewhere else. In other cases, you might simply want to convert objects with a mix of properties containing plain objects and class instances.

\n

For these situations, you can use the built-in serialization functions that we extensively use throughout the framework, and that you can find inside the @awarns/core/utils/serialization folder:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturn typeDescription
serialize(data: any)stringConverts any complex JavaScript object, class instance or array into a string which can be back-recovered. Works with objects containing Date properties too.
deserialize(serializeData: string)anyThe reverse process to calling the serialize method. Please, note that class instances will be recovered as plain JavaScript objects, loosing their original nature.
flatten(data: any)anyIdentical to chaining a serialize and a deserialize method call. Takes the advantage of the deserialize side-effect of turning class instances into plain objects to normalize complex object structures.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ui-charts":{"name":"@nativescript/ui-charts","version":"0.4.0","license":"Apache-2.0","readme":"

@nativescript/ui-charts

\n

Highcharts SDK for NativeScript

\n

Usage

\n
npm install @nativescript/ui-charts
\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/chart-demos for different chart types.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:ui=\"@nativescript/ui-charts\">
  <GridLayout>
    <ui:UIChartsView options=\"{{ chartOptions }}\" />
  </GridLayout>
</Page>
\n

The chartOptions is a HICharts options object,\nrefer to https://www.highcharts.com/demo/ for inspiration, and also checkout https://api.highcharts.com/highcharts/ for API reference

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@valor/nativescript-ngrx-devtools":{"name":"@valor/nativescript-ngrx-devtools","version":"2.0.0","license":"MIT","readme":"

nativescript-ngrx-devtools

\n

This plugin allows you to use NgRx devtools with NativeScript.

\n

Installation

\n

Firstly, run:

\n
npm i @valor/nativescript-ngrx-devtools @valor/nativescript-websockets
\n

Import @valor/nativescript-websockets in your polyfills.ts:

\n
/**
 * NativeScript Polyfills
 */

// Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
import '@nativescript/core/globals';

import '@valor/nativescript-websockets'; // add this line!

// Install @nativescript/angular specific polyfills
import '@nativescript/angular/polyfills';

/**
 * Zone.js and patches
 */
// Add pre-zone.js patches needed for the NativeScript platform
import '@nativescript/zone-js/dist/pre-zone-polyfills';

// Zone JS is required by default for Angular itself
import 'zone.js';

// Add NativeScript specific Zone JS patches
import '@nativescript/zone-js';
\n

Then add NativeScriptNgRxDevtoolsModule.forRoot() to your AppModule imports:

\n
@NgModule({
  imports: [
    StoreModule.forRoot(...),
    StoreDevtoolsModule.instrument(),
    NativeScriptNgRxDevtoolsModule.forRoot(),
  ],
  exports: [StoreModule],
})
export class AppModule {}
\n

By default the plugin will try to connect to the devtools on port 8000 on the default IPs provided by NativeScript (__NS_DEV_HOST_IPS__), but this can be configured by passing an options object to NativeScriptNgRxDevtoolsModule.forRoot().

\n

To start debugging install the latest @redux-devtools/cli:

\n
npm i -g @redux-devtools/cli
\n

Then open them:

\n
redux-devtools --open
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-effects":{"name":"nativescript-effects","version":"3.0.0","license":"MIT","readme":"

NativeScript Effects

\n

A NativeScript plugin that adds commonly used animation effects to views. This includes the nativescript-animation-spring as one of the effects so no need to get that plugin if you get this one.

\n

Installation

\n
$ npm install nativescript-effects --save
\n

This command automatically installs the necessary files, as well as stores nativescript-effects as a dependency in your project's package.json file.

\n

Usage

\n

To use the animation effects plugin you must first require() its module. After you require() the module you have access to its APIs.

\n

In the demo app, this require line is added to the app.ts file, but you can also add it to a single code behind file where you will use the effects.

\n
var nsfx = require('nativescript-effects');
\n

TypeScript

\n

To avoid type checking errors, you must additionally configure TypeScript to recognize the method extensions to View. Simply add the following line to references.d.ts in the root of your project:

\n
/// <reference path=\"./node_modules/nativescript-effects/index.d.ts\" />
\n

Then get a reference to the view you want to animate and call one of the functions listed below. This view can be any child of the NativeScript View class such as Button, Label, etc.

\n
var myLabel = page.getViewById('lblMessage');
myLabel.fadeIn()
       .then(function(){
           myLabel.fadeOut(10000);
       });
\n

API

\n

All extensions listed below return a Promise that will call it's then function once finished successfully.

\n
\n

.fadeIn([duration])

\n

Description: Display the view by fading it to opaque.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.fadeOut([duration])

\n

Description: Hide the view by fading it to transparent.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.fadeTo([duration], [opacity])

\n

Description: Gradually adjust the opacity of the view.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

opacity (default: 1)\nType: Number
\nA number between 0.0 and 1.0

\n
\n

.fadeToggle([duration])

\n

Description: Display or hide the view by animating its opacity.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.floatIn([duration], [direction])

\n

Description: Display the view with a sliding motion in a certain direction.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

direction (default: 'up')\nType: String
\nA constant representing the direction to float. Can be 'up', 'down', 'left', 'right'

\n
\n

.floatOut([duration], [direction])

\n

Description: Hide the view with a sliding motion in a certain direction.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

direction (default: 'down')\nType: String
\nA constant representing the direction to float. Can be 'up', 'down', 'left', 'right'

\n
\n

.hide([duration])

\n

Description: Hide the view.

\n

duration (default: 1)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.shake()

\n

Description: Shake the view back and forth a few times, like a headshake "no"

\n
\n

.show([duration])

\n

Description: Display the view.

\n

duration (default: 1)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.slideDown([duration], [distance])

\n

Description: Display the view with a sliding motion.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

distance (default: -100)\nType: Number
\nA number determining how many points the view will slide.

\n
\n

.slideUp([duration], [distance])

\n

Description: Hide the view with a sliding motion.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

distance (default: -100)\nType: Number
\nA number determining how many points the view will slide.

\n
\n

.slideToggle([duration])

\n

Description: Slide down or slide up the view based on current slide state.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n
\n

.spring([duration], [animation]) <- currently iOS only

\n

Description: Moves the view with a spring like bouncing motion.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n

animation (default: see default object below)\nType: Object
\nAn animation definition object as described in the "Spring Animation" section below.

\n

Default animation:

\n
        animation = {
                translate: {
                    x: 0,
                    y: -100
                },
                scale: {
                    x: 2,
                    y: 2
                },
                duration: msDuration,
                delay: 0,
                dampingRatio: 0.3,
                velocity: 2.0,
                options: null
            };
\n

###Spring Animation options

\n\n

The full set of options is documented on the Apple developer site. Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).

\n

###Example Usage

\n
myView.spring(10000, {
            translate: {
                x: 0,
                y: -100
            },
            scale: {
                x: 2,
                y: 2
            },
            delay: 0,
            dampingRatio: 0.3,
            velocity: 2.0,
            options: null,
        });
\n
\n

.toggle([duration])

\n

Description: Display or hide the view.

\n

duration (default: 400)\nType: Number or String
\nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swypelab-toasty":{"name":"nativescript-swypelab-toasty","version":"3.0.2","license":"MIT","readme":"

nativescript-swypelab-toasty

\n

\"npm\"\n\"npm\"

\n

Install

\n

tns plugin add nativescript-swypelab-toasty

\n

Usage

\n

TypeScript

\n
import { Toasty } from 'nativescript-swypelab-toasty';
import { isIOS } from 'tns-core-modules/platform';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();

// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  yAxisOffset: 100,
  xAxisOffset: 10,
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24
  },
  anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
});

toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();
\n

JavaScript

\n
var toasty = require('nativescript-swypelab-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n

  constructor(opts: ToastyOptions);

  position: ToastPosition;

  duration: ToastDuration;

  textColor: Color | string;

  backgroundColor: Color | string;

  yAxisOffset?: Length | number;

  xAxisOffset?: Length | number;

  readonly width: number;

  readonly height: number;


  /**
   * Show the Toasty
   */
  show();

  /**
   * Cancels the Toasty
   */
  cancel();

/**
 * Sets the Toast position.
 */
  setToastPosition(value: ToastPosition): Toasty;

/**
 * Sets the Toast duration.
 */
  setToastDuration(value: ToastDuration): Toasty;

/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(value: Color | string): Toasty;

/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(value: Color | string): Toasty;
\n
export enum ToastDuration {
  'SHORT',
  'LONG'
}

export enum ToastPosition {
  'BOTTOM',
  'BOTTOM_LEFT',
  'BOTTOM_RIGHT',
  'CENTER',
  'CENTER_LEFT',
  'CENTER_RIGHT',
  'TOP',
  'TOP_LEFT',
  'TOP_RIGHT'
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Position of the Toast.
   */
  position?: ToastPosition;

  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;

  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-cardview":{"name":"@nstudio/nativescript-cardview","version":"2.0.2","license":"Apache-2.0","readme":"

@nstudio/nativescript-cardview

\n

Material Design CardView component for NativeScript

\n
npm install @nstudio/nativescript-cardview
\n

NativeScript prior to 7:

\n
npm install @nstudio/nativescript-cardview@1.0.0
\n
Material Design Card Spec
\n
CardView Android Documentation
\n

Usage

\n

iOS note: Setting a background-color will help if you do not see the card on the page.

\n

NativeScript Plain

\n

IMPORTANT: Make sure you include xmlns:Card="@nstudio/nativescript-cardview" on the Page element

\n

XML

\n
<Page xmlns:Card=\"@nstudio/nativescript-cardview\">
   <StackLayout>
      <Card:CardView class=\"cardStyle\" margin=\"10\" elevation=\"40\" radius=\"5\">
           <grid-layout rows=\"200, auto, auto\" columns=\"auto, auto, *\">
               <image src=\"~/images/batman.jpg\" stretch=\"aspectFill\" colSpan=\"3\" row=\"0\" />
               <label text=\"Batman wants to be friends?\" class=\"info\" textWrap=\"true\" row=\"1\" colSpan=\"3\" />
               <button text=\"DECLINE\" tap=\"goAway\" row=\"2\" col=\"0\" />
               <button text=\"ACCEPT\" row=\"2\" col=\"1\" />
           </grid-layout>
       </Card:CardView>
   </StackLayout>
</Page>
\n

CSS

\n
.cardStyle {
  background-color: #3489db;
  color: #fff;
}
\n
\n

NativeScript Angular

\n
import { registerElement } from '@nativescript/angular';
import { CardView } from '@nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);
\n
<CardView class=\"cardStyle\" margin=\"10\" elevation=\"40\" radius=\"1\">
  <GridLayout rows=\"10,30,30,250, auto, auto,10\" columns=\"10,40, *, 30,10\">
    <image
      src=\"res://profile\"
      stretch=\"aspectFit\"
      verticalAlignment=\"stretch\"
      col=\"1\"
      row=\"1\"
      rowSpan=\"2\"
    ></image>
    <label
      class=\"createdBy text-left\"
      horizontalAlignment=\"left\"
      [text]=\"item.CreatedBy\"
      row=\"1\"
      col=\"2\"
      textWrap=\"true\"
    ></label>
    <label
      class=\"createdOn text-left\"
      horizontalAlignment=\"left\"
      [text]=\"item.UpdatedDate\"
      row=\"2\"
      col=\"2\"
    ></label>
    <image
      [src]=\"'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'\"
      stretch=\"aspectFit\"
      colSpan=\"3\"
      col=\"1\"
      row=\"3\"
    ></image>
    <label
      horizontalAlignment=\"left\"
      [text]=\"item.Title\"
      colSpan=\"3\"
      row=\"4\"
      textWrap=\"true\"
      col=\"1\"
    ></label>
    <label
      horizontalAlignment=\"left\"
      [text]=\"item.Summary\"
      textWrap=\"true\"
      col=\"1\"
      row=\"5\"
      colSpan=\"3\"
    ></label>
  </GridLayout>
</CardView>
\n
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';
Vue.registerElement(
  'CardView',
  () => require('@nstudio/nativescript-cardview').CardView
);
\n
<card-view margin=\"10\" elevation=\"40\" radius=\"1\">
  <stack-layout>
    <label text=\"Hello World\"></label>
  </stack-layout>
</card-view>
\n
\n

Attributes

\n\n

An attribute to control the 'border-radius' of the card.

\n

Platform specific options

\n

Android

\n\n

An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.\nThere can be some performance impact when using a very high elevation value.

\n\n

Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.

\n

iOS

\n\n

An attribute to offset the x position of the shadow behind the card.

\n\n

An attribute to offset the y position of the shadow behind the card.

\n\n

An attribute to set the color of the shadow behind the card.

\n\n

An attribute to set the opacity of the shadow behind the card.

\n\n

An attribute to set the radius of the shadow (shadow spread) behind the card.

\n

The default values are set to:

\n
radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
shadowRadius = 1;
\n

Sample Screenshots

\n

Android

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n

iOS

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n

Run Demo

\n
git clone https://github.com/nstudio/nativescript-cardview.git

npm run demo.ios

// or...

npm run demo.android
\n

Changelog

\n

Contributing

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/phone-sensors":{"name":"@awarns/phone-sensors","version":"1.2.2","license":"Apache-2.0","readme":"

@awarns/phone-sensors

\n

\"npm\n\"npm\"

\n

This module allows to collect data from the IMU sensors (i.e., accelerometer and gyroscope) and the magnetometer embedded\nin the mobile device.

\n

This plugin acts as a wrapper on top of the BackgroundSensors Android library,\nwhich enables the data collection even when the application is in the background or the device is idle. This module\noffers tasks for starting and stopping the data collection process.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/phone-sensors
\n

Usage

\n

After installing this plugin, you'll have access to two task groups with two tasks each to start and stop the data collection process.\nThe main difference between both tasks groups is the implementation of the underlying service that is being used for the data collection.\nOne group uses a standard data collection service, but the other one uses a special service that syncs the system clock with an NTP server\nto label the collected data with the most accurate timestamp.\nThe collected data from the sensors, will be a TriAxial record, described below.

\n

Setup (Optional)

\n

This plugin can be optionally registered using its loader during the framework initialization:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerPhoneSensorsPlugin } from '@awarns/phone-sensors';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerPhoneSensorsPlugin({ 
        enableVibrationOnStart: false
      })
    ]
  )
// ... handle initialization promise
\n

Plugin loader parameter options:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
enableVibrationOnStartboolean(Optional) Enables or disables the generation of a vibration when the data collection service starts. Enabled by default.
\n

If the plugin is not registered, the vibration will be enabled by default.

\n
\n

Warning: due to restrictions imposed by the OS, the plugin can only be registered once (i.e., the first time the plugin is initialized). In other words,\nif the plugin is first register with enableVibrationOnStart to true, and then the developer wants to disable the vibration,\nsetting enableVibrationOnStart to false will take no effect. If you want to change the value of enableVibrationOnStart,\nyou will have to uninstall the app.

\n
\n

Tasks

\n

Standard collection service tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
startDetecting{prefix}Phone{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). The prefix can be used to distinguish among different configurations.
stopDetectingPhone{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
\n

NTP synced collection service tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
startDetecting{prefix}PhoneNTPSynced{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). Before the collection starts, the system clock is synced with an NTP server to label the collected data with an accurate timestamp. The prefix can be used to distinguish among different configurations.
stopDetectingPhoneNTPSynced{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
\n

Start data collection for a sensor with a specific configuration

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  startDetectingPhoneSensorChangesTask,
  PhoneSensor,
  SensorDelay,
} from '@awarns/phone-sensors';

export const demoTasks: Array<Task> = [
  startDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
  // startDetectingPhoneAccelerometerChanges
  
  startDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER, { sensorDelay: SensorDelay.FASTEST, batchSize: 50 }, 'Fast'),
  // startDetectingFastPhoneAccelerometerChanges

  startDetectingPhoneSensorChangesTask(PhoneSensor.GYROSCOPE, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
  // startDetectingPhoneGyroscopeChanges

  startDetectingPhoneNTPSyncedSensorChangesTask(PhoneSensor.GYROSCOPE, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
  // startDetectingPhoneNTPSyncedGyroscopeChanges

  startDetectingPhoneSensorChangesTask(PhoneSensor.MAGNETOMETER, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
  // startDetectingPhoneMagnetometerChanges

];
\n
\n

Warning: the data collection for a PhoneSensor can only be started once, if startDetectingFastPhoneAccelerometerChanges is\nexecuted after startDetectingPhoneAccelerometerChanges and while the collection is in progress, startDetectingFastPhoneAccelerometerChanges\nwill be ignored. Therefore, if you want to dynamically change the collection's configuration while the collection is in progress,\nyou will have to stop the collection to start it again with the new desired configuration.

\n
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter nameTypeDescription
sensorPhoneSensorSensor to collect data from. See below.
providerConfigurationProviderConfigurationCollection's configuration of the task. See below.
prefix (Optional)stringAdds the prefix to the name of the task. Useful to create multiple tasks for the same sensor but with multiple configurations.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ValueDescription
ACCELEROMETERRepresents the phone's accelerometer sensor.
GYROSCOPERepresents the phone's gyroscope sensor.
MAGNETOMETERRepresents the phone's magnetometer sensor.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
sensorDelaySensorDelay | numberIndicates the time between two consecutive samples. It can be a SensorDelay (i.e., UI, NORMAL, GAME or FASTEST) or a value in milliseconds.
batchSizenumberIndicates the amount of samples to be delivered in each record.
\n
\n

Note: the sensorDelay is taken as a suggestion by the Android OS. Samples could be delivered at a smaller or higher rate.

\n
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

\n

However, once the start task has finished running, relevant events will be emitted by the internal listeners while the data collection is active. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingPhoneAccelerometerChanges'));
on('startEvent', run('startDetectingPhoneGyroscopeChanges'));
on('startEvent', run('startDetectingPhoneMagnetometerChanges'));

on('accelerometerSamplesAcquired', run('writeRecords'));
on('gyroscopeSamplesAcquired', run('writeRecords'));
on('magnetometerSamplesAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Stop data collection for a sensor

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  stopDetectingPhoneSensorChangesTask,
  PhoneSensor,
} from '@awarns/phone-sensors';

export const demoTasks: Array<Task> = [
  stopDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER),        // stopDetectingPhoneAccelerometerChanges
  stopDetectingPhoneNTPSyncedSensorChangesTask(PhoneSensor.GYROSCOPE),   // stopDetectingPhoneNTPSyncedGyroscopeChanges
  stopDetectingPhoneSensorChangesTask(PhoneSensor.MAGNETOMETER),         // stopDetectingPhoneMagnetometerChanges
];
\n
\n

Note: a stop task of a specific PhoneSensor can be used to stop the collection started by any start task\nfor that PhoneSensor no matter the specific configuration.

\n
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter nameTypeDescription
sensorWatchSensorSensor to stop the data collection from.
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingPhoneAccelerometerChanges').every(1, 'minute'));
on('startEvent', run('startDetectingPhoneNTPSyncedGyroscopeChanges').every(1, 'minute'));
on('startEvent', run('startDetectingPhoneMagnetometerChanges').every(1, 'minute'));

on('accelerometerSamplesAcquired', run('stopDetectingPhoneAccelerometerChanges'));
on('gyroscopeSamplesAcquired', run('stopDetectingPhoneNTPSyncedGyroscopeChanges'));
on('magnetometerSamplesAcquired', run('stopDetectingPhoneMagnetometerChanges'));
\n

Note: it makes no sense to use these tasks without using before their complementary tasks to start the data collection.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
accelerometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of an accelerometer sensor.
gyroscopeSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a gyroscope sensor.
magnetometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a magnetometer sensor.
\n

Records

\n

TriAxial

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringOne of the following values: accelerometer, gyroscope, or magnetometer.
changeChangeAlways NONE.
timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
samplesTriAxialSample[]List with the collected samples.
\n
TriAxialSample
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
xnumberValue x of the sensor.
ynumberValue y of the sensor.
znumberValue z of the sensor.
timestampnumberThe local time (UNIX timestamp) when the sample was collected.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-image-zoom":{"name":"@triniwiz/nativescript-image-zoom","version":"4.2.0","license":"Apache-2.0","readme":"

Nativescript nativescript-image-zoom

\n
ns plugin add @triniwiz/nativescript-image-zoom
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@afa-ag/nativescript-webview-interface":{"name":"@afa-ag/nativescript-webview-interface","version":"1.4.5","license":{"type":"MIT","url":"https://github.com/alexander-mai/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

Nativescript-WebView-Interface

\n

Nativescript Plugin for bi-directional communication between WebView and Android/iOS

\n

Installation

\n

From the terminal, go to your app's root folder and execute:

\n
tns plugin add nativescript-webview-interface
\n

Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

\n
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
\n

Usage

\n

For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

\n

Inside Native App

\n

Insert a web-view somewhere in your page.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
....
<web-view id=\"webView\"></web-view>
....
</Page>
\n

Initialize WebViewInterface Plugin in your javascript file.

\n
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;

function pageLoaded(args){
    page = args.object;
    setupWebViewInterface(page) 
}

// Initializes plugin with a webView
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
\n

Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

\n

Use any API Method of WebViewInterface Class

\n
function handleEventFromWebView(){
    oWebViewInterface.on('anyEvent', function(eventData){
        // perform action on event
    });
}

function emitEventToWebView(){
    oWebViewInterface.emit('anyEvent', eventData);
}

function callJSFunction(){
    oWebViewInterface.callJSFunction('functionName', args, function(result){
        
    });
}
\n

If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

\n
webView.on('loadFinished', (args) => {
    if (!args.error) {
        // emit event to webView or call JS function of webView
    }
});
\n

Inside WebView

\n

Import nativescript-webview-interface.js in your html page.

\n
<html>
    <head></head>
    <body>
        <script src=\"path/to/nativescript-webview-interface.js\"></script>
        <script src=\"path/to/your-custom-script.js\"></script>        
    </body>
</html>
\n

Use any API Method of window.nsWebViewInterface inside webview

\n
var oWebViewInterface = window.nsWebViewInterface;

// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
    
});

// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);

// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
    // do any processing
    return dataOrPromise;
}
\n

API

\n

Native App API

\n

Constructor:

\n

WebViewInterface(webView: WebView, src?: string)

\n

webView is an instance of nativescript web-view.

\n

src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

\n

API Methods of WebViewInterface Class:

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emitted from webView.

\n

Callback will be executed with the data sent from webView in any format.

\n

off(eventOrCmdName: string, callback?: (eventData: any) => void): void

\n

Use this method to de-register listener of any event/command emitted from webView.

\n

If callback is not set, all the event listeners for this event will be de-registered.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from native app to webView with data in any format.

\n

callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

\n

Use this method to call to any javascript function in global scope in webView.

\n

Arguments are optional. But if supplied, must be in array format.

\n

If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
\nIf the function execution generates any error, the errorHandler will be called with the error.

\n

destroy(): void

\n

Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

\n

WebView API

\n

API Methods available in window.nsWebViewInterface global variable.

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emited from native app.

\n

Callback will be executed with the data sent from native app in any format.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from webView to native app with data in any format.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@maximl/nativescript-dev-appium":{"name":"@maximl/nativescript-dev-appium","version":"6.1.3-r1","license":"MIT","readme":"

nativescript-dev-appium

\n

A package to help with writing and executing e2e Appium tests.

\n\n\n\n

Features

\n
    \n
  1. Cross-platform locators
    2. \n
  2. Find strategies: findElementByText, findElementByClassName, findElementByAccessibilityId, findElementByXPath
    3. \n
  3. Actions: tap, click, doubleTap, hold
    4. \n
  4. Gestures: scroll, scrollTo, swipe, drag
    5. \n
  5. Cross-platform element abstraction with exists, waitForExist, waitForNotExist, location, isDisplayed, size, text properties
    6. \n
  6. Ability to turn on/off “Don’t keep activities” setting in the Developer options for Android
    7. \n
  7. Direct access to driver
    8. \n
  8. Typings
    9. \n
  9. Async/Await
    10. \n
  10. Open source cloud builds integration, i. e. Sauce Labs
    11. \n
  11. Image comparison of: screen, rectangle; block out areas to ignore
    12. \n
  12. [WIP] Ability to verify animations/transitions through video/images; please refer to frame-comparer
    13. \n
  13. Mochawesome HTML report - including screenshots in report
    14. \n
\n

Requirements

\n

The nativescript-dev-appium plugin requires:

\n\n

Setup

\n

Add the plugin as a devDependency to your project:

\n
$ npm install -D nativescript-dev-appium
\n
\n

After completion of the installation, if your project has a dependency to TypeScript, the plugin should have added an e2e folder containing predefined configs and samples.

\n
\n

Then install Appium - we recommend a global installation to avoid adding it to every project you would like to test:

\n
$ npm install -g appium
\n

Install external dependencies of XCUITest driver for iOS via:

\n\n
$ brew install carthage
$ brew install libimobiledevice --HEAD
$ brew install ideviceinstaller
$ brew install ios-webkit-debug-proxy
\n\n
$ npm install -g ios-deploy
\n
\n

For detailed information on external dependencies, please, refer to the XCUITest repository.

\n
\n

For correct functioning of the mobile-devices-controller for Android emulators, telnet is required to be available on your system.

\n

As the telnet was removed from macOS High Sierra, it could be installed as follows:

\n
$ brew install telnet
\n

Structure

\n
    my-app\n    ├── app\n    ├── e2e\n        ├── config\n            ├── appium.capabilities.json\n            ├── mocha.opts\n        ├── sample.e2e-test.ts\n        ├── setup.ts\n        ├── tsconfig.json\n    ├── ...\n    ├── package.json\n    ├── tsconfig.json\n
\n
\n

To avoid any incompatibilities between the source of e2e tests (ES6) and the source of the application (ES5), we recommend to exclude the e2e folder from the application's tsconfig.json file: exclude": [ "e2e" ].

\n
\n

Files Preview

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FilePurpose
config/appium.capabilities.jsonContains predefined configurations for test execution.
config/mocha.optsA default mocha configuration file.
sample.e2e-test.tsContains a predefined ready-to-execute sample tests of the default hello-world-ts template.
setup.tsDefines the before and after test execution hooks responsible to start and stop the Appium server.
tsconfig.jsonTypeScript compiler configuration file for the e2e tests.
\n
\n

Note - the folders below are related to the image comparison feature:

\n\n
\n

Usage

\n

Before running the tests you will have to build your app for the platform on test or both. Navigate to your demo app folder from where you will execute the commands that follow.

\n
$ tns build android
\n

or

\n
$ tns build ios
\n

The command that will run the tests should specify the targeted capabilities configuration using the runType option as shown below. This way a capabilities will be selected from the capabilities configuration file.

\n
$ npm run e2e -- --runType android25
\n

or

\n
$ npm run e2e -- --runType sim.iPhone8.iOS110
\n

or for local runs during development

\n
$ npm run e2e android
$ npm run e2e ios
$ npm run e2e -- --device.name=/iPhone X/ --device.apiLevel=/12.1/
\n

Generated tests are standard Mocha tests.

\n

NOTE: When using Jasmine instead of Mocha, additional npm params (like runType) must have an equal sign (=) instead of a space.

\n
npm run e2e -- --runType=sim.iPhoneX
\n

Blogs

\n

2018, March 6th: Start Testing Your NativeScript Apps Properly

\n

Demos

\n

The official demos of the nativescript-dev-appium plugin: https://github.com/NativeScript/ns-dev-days-appium-plugin.

\n

These tests demonstrate:

\n\n

Tests on NativeScript Continuous Integration

\n

NativeScript/e2e/modal-navigation - use "Don't keep activities", run background (minimize/restore) app.

\n

nativescript-angular/e2e/renderer - use basics: locators, find strategies, assertions.

\n

nativescript-angular/e2e/router - use basics: locators, find strategies, assertions.

\n

nativescript-dev-webpack/demo/AngularApp - use data driven approach, compares element's images.

\n

nativescript-dev-webpack/demo/JavaScriptApp - use data driven approach, compares element's images.

\n

nativescript-dev-webpack/demo/TypeScriptApp - use data driven approach, compares element's images.

\n

Videos

\n

2018 March 6th: NativeScript Air 6 - UI Testing {N} apps with DevAppium

\n

2017 Sept 27th: NativeScript testing with Appium @ NativeScript Developer Day Europe 2017

\n

2017 Sept 19th: Introduction to Mobile UI Test Automation @ NativeScript Developer Day 2017

\n

Custom Appium Capabilities

\n

When installed, the plugin creates e2e folder containing sample test file and configuration folder config where your custom capabilities reside.\nThe existence of such capabilities is a runner's requirement which comes from Appium. Additional locations where the runner will search for the config file are:

\n
my-app
├── app
├── assets
├── package.json
.
.
.
└── appium.capabilities.json
\n

If the file structure assembles plugin repo structure like for example nativescript-plugin-seed the suggested location is:

\n
my-plugin
├── demo
├── demo-angular
├── src
└── appium.capabilities.json
\n

Thus, the same configuration can be used by both apps without duplication of files.

\n

If you wish to use another location of the capabilities file instead default ones, you can specify it with --appiumCapsLocation option. Remember that the path provided has to be relative to the root directory.

\n

Notice that once custom capabilities are provided you will be able to pick any of them using the --runType option (e.g. --runType android25). See sample content of appium.capabilities.json file below. For more details regarding the Appium Capabilities read Appium documentation about Desired Capabilities:

\n
{
    \"android21\": {
            \"browserName\": \"\",
            \"platformName\": \"Android\",
            \"platformVersion\": \"5.0\",
            \"deviceName\": \"Android Emulator\",
            \"noReset\": false,
            \"app\": \"\"
        
    },
    \"android25\": {
            \"browserName\": \"\",
            \"platformName\": \"Android\",
            \"platformVersion\": \"7.0\",
            \"deviceName\": \"Android Emulator\",
            \"noReset\": false,
            \"app\": \"\"
        
    },
    \"sim.iPhone8.iOS110\": {
            \"browserName\": \"\",
            \"platformName\": \"iOS\",
            \"platformVersion\": \"11.0\",
            \"deviceName\": \"iPhone 8 110\",
            \"app\": \"\"
        
    }
}
\n

As you can see, the app property can be left an empty string which will force the plugin to search for an app package in platforms folder. However, this search functionality depends on runType option so if you think of using it add android, device, sim strings as part of your runType option which in fact is your capability key in the config file. E.g --runType android23, --runType sim.iPhone8.iOS110. Thus, the runner will manage to look in the right location in order to search for app package.

\n

It is important to build your app in advance as explained in Usage section, because the runner expects to provide app package to it or such to exists in the search location.

\n

For faster testing when working on an app with livesync it would be better to use --devMode option or start a new session using --startSession option and run tests using --attachToDebug option and specify appium --port. Or simply start session with appium desktop application

\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescriptionValue
runTypeSelect the capabilities from your config file appium.capabilities.jsonConsider using android, device, sim strings as part of your runType option if you haven't provided app capability. Thus, the runner will look for app package in the right location for the current run.
e.g. --runType ios-device10iPhone6
appPathProvide location of the app package to be tested. This will overwrite all provided capabilities for appPossible values are:
- app build package name (in case --sauceLab option is set it will prepend sauce-storage: in front of the app name so app has to be uploaded to Sauce Labs before execution starts)
- path e.g. platforms/android/build/outputs/apk/demo.apk.
Example: --appPath demo-debug.apk
sauceLabEnable tests execution in Sauce Labs. As a prerequisite you will have to define SAUCE_USER and SAUCE_KEY as environment variablee.g. --sauceLab
appiumCapsLocationChange the location where appium.capabilities.json config file can be. It should be relative to the root directorye.g. --appiumCapsLocation /e2e-tests
portAppium server port
storageSpecify remote image storage
ignoreDeviceControllerSetting this option you will use default appium device controller which is recommended when tests are executed on cloud based solutions
sessionIdIn order to attach to already started sessionOption --port is mandatory in this case. It will automatically set --devMode to true. Provides ability nativescript-dev-appium to be used with appium desktop client
attachToDebugSame as sessionId but no need to provide session id.Option --port is mandatory in this case. It will automatically resolve --sessionId. Provides ability nativescript-dev-appium to be used with appium desktop client
startSessionStart new appium server and initialize appium driver.
cleanAppRemove application from device on server quit.
\n

Examples:

\n

Let say that we have a script in package.json like this

\n
 \"scripts\": {
    \"e2e\": \"tsc -p e2e && mocha --opts ./config/mocha.opts --recursive e2e --appiumCapsLocation ./config/appium.capabilities.json\"
 }
\n

Run tests in sauceLab

\n
$ npm run e2e -- --runType android25 --sauceLab --appPath demo.apk
\n

Run tests in Kobiton

\n
$ npm run e2e -- --runType android25 --kobiton --appPath demo.apk
\n

Run tests locally

\n
$ npm run e2e -- --runType android25
\n

Starting new session will console log appium server port and session id

\n
$ node ./node_modules/.bin/ns-appium --runType android23 --startSession --port 8300
\n

Run tests with already started session. Specify session id and server port. Default value for server port is 8300

\n
$ npm run e2e -- --sessionId e72daf17-8db6-4500-a0cf-59a66effd6b9 --port 8300
\n

or simply use --attachToDebug which will attached to first available session. This is not recommended when more than one session is available.

\n
$ npm run e2e -- --attachToDebug --port 8300
\n

Troubleshooting

\n

Use the --verbose option to get error details:

\n
$ npm run e2e -- --runType android25 --verbose
\n

Common Problems

\n
    \n
  1. Missing installed appium
    2. \n
  2. Misleading appPath or capabilities location. Please make sure that the path to the app or capabilities location is correct.
    3. \n
  3. Misleading details for device specified in appium config
    4. \n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-ad":{"name":"nativescript-azure-ad","version":"1.0.9","license":"MIT","readme":"

NativeScript Active Directory Authentication Library Plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"BCH

\n

This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app

\n

Prerequisites / Requirements

\n

Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

\n

Installation

\n
tns plugin add nativescript-azure-ad
\n

Usage (Angular example)

\n

Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

\n
import { Injectable } from '@angular/core';
import { AdalContext } from 'nativescript-azure-ad';

const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
const clientId: string = '{your-application-id}';
const resourceId: string = '00000002-0000-0000-c000-000000000000';
var redirectUri: string
if (application.ios) {
  redirectUri = '{iOS application redirectUri}';
} else {
  redirectUri = '{Android application redirectUri}';
}

@Injectable()
export class AdalService {

  public adalContext: AdalContext;

  constructor() {
    this.adalContext = new AdalContext(authority, clientId, resourceId, redirectUri);
  }
}
\n

...and consume this service in your application!

\n
export class AppComponent {

  constructor(private adalService: AdalService) { }

  public login() {
    this.adalService.adalContext.login().then((result) => {
      console.log('Success!');
    })
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

License

\n

See LICENSE for details.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-observable":{"name":"nativescript-observable","version":"2.0.7","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

this is a simple subclass of TNS Observable class which let the observable know when a listener was added or removed.\nVery useful to create native object to listen for native event only when necessary

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sidedrawer":{"name":"nativescript-sidedrawer","version":"1.0.6","license":"MIT","readme":"

NativeScript-SideDrawer

\n

A Nativescript plugin that allows developers to simply integrate the infamous side drawer pattern.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Features

\n\n

Installation

\n
tns plugin add nativescript-sidedrawer
\n

Example

\n

Import the plugin.

\n
import { TnsSideDrawer } from 'nativescript-sidedrawer'
\n

Build the drawer with TnsSideDrawer.build passing config options.

\n
TnsSideDrawer.build({
\ttemplates: [{
\t\ttitle: 'Home',
\t\tandroidIcon: 'ic_home_white_24dp',
\t\tiosIcon: 'ic_home_white',
\t}, {
\t\ttitle: 'Judgment Day',
\t\tandroidIcon: 'ic_gavel_white_24dp',
\t\tiosIcon: 'ic_gavel_white',
\t}, {
\t\ttitle: 'Bank Roll',
\t\tandroidIcon: 'ic_account_balance_white_24dp',
\t\tiosIcon: 'ic_account_balance_white',
\t}, {
\t\ttitle: 'Fix Stuff',
\t\tandroidIcon: 'ic_build_white_24dp',
\t\tiosIcon: 'ic_build_white',
\t}, {
\t\ttitle: 'This Is Me',
\t\tandroidIcon: 'ic_account_circle_white_24dp',
\t\tiosIcon: 'ic_account_circle_white',
\t}],
\ttitle: 'This App Name',
\tsubtitle: 'is just as awesome as this subtitle!',
\tlistener: (index) => {
\t\tthis.i = index
\t},
\tcontext: this,
})
\n

Toggle the side drawer with TnsSideDrawer.toggle.

\n
TnsSideDrawer.toggle()
\n

Configuration

\n

Drawer

\n
TnsSideDrawerOptions {
\ttemplates: Array<TnsSideDrawerItem> // see below
\ttextColor?: Color // color of all text including title, subtitle, and items
\theaderBackgroundColor?: Color
\tbackgroundColor?: Color // background color under the header
\tlogoImage?: ImageSource // defaults to your app icon
\ttitle?: string // large text in the header
\tsubtitle?: string // small text in the header
\tlistener: TnsSideDrawerOptionsListener // see below
\tcontext?: any // see below
}
\n

Templates

\n

Template icons MUST be a resource string.

\n
TnsSideDrawerItem {
\ttitle: string
\tandroidIcon?: string
\tiosIcon?: string
}
\n

Listener

\n

The listener function ONLY gets called everytime a drawer item is successfully tapped.

\n
type TnsSideDrawerOptionsListener = (index: number) => void
\n

You can optionally pass a this context to the context option.

\n

iOS Quirks

\n

Because you can drag the edge of your screen to go back,

\n

\"back\"

\n

you'll need to manually add and remove the gesture recognition by calling their methods and passing the Page instance.

\n

Let's say this is your home page.

\n
export function onLoaded(args: EventData) {
\tlet page: Page = <Page>args.object
\tTnsSideDrawer.addGesture(page)
}
export function onUnloaded(args: EventData) {
\tlet page: Page = <Page>args.object
\tTnsSideDrawer.removeGesture(page)
}
\n

Android Quirks

\n

None.

\n

Thanks to

\n

mikepenz for the Android MaterialDrawer implementation.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sentry":{"name":"nativescript-sentry","version":"2.0.1","license":"Apache-2.0","readme":"

Sentry.io for NativeScript

\n

\"npm\"\n\"npm\"

\n
\n

NativeScript plugin that uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

\n
\n
\n

:seven: – This is the documentation of v2 which is compatible with NativeScript 7
\n:construction: – Currently in alpha state, use with caution!
\n:six: – If you are using NativeScript 6, use a v1 release.

\n
\n

Installation

\n
ns plugin add nativescript-sentry
\n

Configuration

\n

Android

\n

Add the following line to your AndroidManifest.xml within the <application>-tag:

\n
<meta-data android:name=\"io.sentry.dsn\" android:value=\"__YOUR_DSN_HERE__\" />
\n

Without Angular

\n
import { Sentry } from 'nativescript-sentry';
const dsn = 'https://<key>:<secret>@host/<project>';
Sentry.init(dsn);
\n

With Angular

\n
import { SentryModule } from 'nativescript-sentry/angular';

NgModule({
  // ...
  imports: [
    SentryModule.forRoot({
      dsn: 'https://<key>:<secret>@host/<project>',
      discardUncaughtJsExceptions: true
    })
  ]
  // ...
});
\n

Note: this plugin adds a custom ErrorHandler to your angular app

\n

Usage

\n

Capture an exception

\n
Sentry.captureException(exeption: Error, options?: ExceptionOptions);
\n
export interface ExceptionOptions {
  // Object of additional Key/value pairs which generate breakdowns charts and search filters in Sentry.
  tags?: object;

  // Object of unstructured data which is stored with events.
  extra?: object;
}
\n

Example:

\n
try {
  throw new Error('Whoops!');
} catch (error) {
  Sentry.captureException(error, {});
}
\n

Capture a message

\n
Sentry.captureMessage(message: string, options?: MessageOptions)
\n
export interface MessageOptions {
  level?: Level;

  // Object of additional Key/value pairs which generate breakdowns charts and search filters.
  tags?: object;

  // Object of unstructured data which is stored with events.
  extra?: object;
}

export enum Level {
  Fatal = 'fatal',
  Error = 'error',
  Warning = 'warning',
  Info = 'info',
  Debug = 'debug'
}
\n

Capture navigation breadcrumb

\n
Sentry.captureBreadcrumb(breadcrumb: BreadCrumb)
\n
export interface BreadCrumb {
  message: string;
  category: string;
  level: Level;
}
\n

Set user

\n
Sentry.setContextUser(user: SentryUser)
\n
export interface SentryUser {
  id: string;
  email?: string;
  username?: string;
}
\n

Set tags

\n
Sentry.setContextTags(tags: object)
\n

Set extra information

\n
Sentry.setContextExtra(extra: object)
\n

Clear context (user, tags, extra information)

\n
Sentry.clearContext();
\n

Troubleshooting and important remarks

\n

Native Exceptions / Crashes

\n

If you have a native exception and the app exits, the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior.

\n

Android SLF4J Log Error

\n

Sentry has an optional dependency on SLF4J on Android, which when not present will log an error about it not being in the application.

\n
System.err: SLF4J: Failed to load class \"org.slf4j.impl.StaticLoggerBinder\".
System.err: SLF4J: Defaulting to no-operation (NOP) logger implementation
System.err: SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
\n

To get rid of this log warning you can add a dependency to your app's app.gradle file located in App_Resources/Android/app.gradle to include:

\n
compile 'org.slf4j:slf4j-nop:1.7.25'
\n

in the dependencies. See the demo app.

\n

Demo Apps

\n

To run and test the demo apps you need to replace the placeholder __YOUR_DSN_HERE__ by your own DSN in the following files:

\n\n

Changelog

\n

2.0.1 - (25.03.2021)

\n\n

Thanks to @jeremypele and @jerbob92!

\n

2.0.0-alpha.1 – (10.09.2020)

\n\n

Thanks to @bradmartin!

\n

1.10.3 – (10.09.2020)

\n\n

1.10.2 – (17.04.2020)

\n\n

1.10.1 – (17.04.2020)

\n\n

1.10.0 – (15.04.2020)

\n\n
\n

Package was forked from the unmaintained package\ndanielgek/nativescript-sentry. Access to original npm package has been transfered. Many thanks to @danielgek for his original work on this plugin!

\n
\n

1.8.0 – (02.02.2019)

\n\n

Thanks to @bradmartin and @jerbob92!

\n

1.6.1 – (28.11.2018)

\n\n

1.5.0 – (11.12.2017)

\n

BREAKING CHANGES

\n\n

Features

\n\n

1.3.0 – (28.08.2017)

\n\n

1.2.0 – (02.08.2017)

\n\n

1.1.0 – (24.07.2017)

\n\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-hello-world-ng-vision":{"name":"@nativescript/template-hello-world-ng-vision","version":"8.6.3","license":"Apache-2.0","readme":"

NativeScript with Angular for visionOS

\n
ns run visionos --no-hmr
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@manojdcoder/nativescript-pedometer":{"name":"@manojdcoder/nativescript-pedometer","version":"2.3.0","license":"Apache-2.0","readme":"

@manojdcoder/nativescript-pedometer

\n
ns plugin add @manojdcoder/nativescript-pedometer
\n

Usage

\n

Example

\n

Refer the demo app

\n

Android Settings

\n

Foreground service is used to continuously monitor step counts even app is in background or not running or killed. The webpack configuration must be adjusted to include the foreground service,

\n
const webpack = require('@nativescript/webpack');
const { resolve } = require('path');

module.exports = (env) => {
  // Copy the line below to your webpack.config.js
  env.appComponents = (env.appComponents || []).concat([resolve(__dirname, 'node_modules/@manojdcoder/nativescript-pedometer/step-counter-broadcast-receiver.android')]);

  webpack.init(env);
  webpack.useConfig('typescript');

  webpack.chainWebpack((config) => {
    // shared demo code
    config.resolve.alias.set('@demo/shared', resolve(__dirname, '..', '..', 'tools', 'demo'));
  });

  // Example if you need to share images across demo apps:
  // webpack.Utils.addCopyRule({
  //   from: '../../../tools/images',
  // \tto: 'images',
  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
  // });

  return webpack.resolveConfig();
};
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/solid-js":{"name":"@nativescript-community/solid-js","version":"0.0.4-alpha.5","license":"MIT","readme":"

NativeScript SolidJS

\n

Custom render and patches for SolidJS to work with DOMiNATIVE on NativeScript

\n

Playground

\n
\n

Installation

\n

Via npm:

\n
npm install @nativescript-community/solid-js dominative undom-ng solid-js
\n

Note: dominative, undom-ng, solid-js are peer dependencies, you have to install them manually. As the benefit for using peer dependencies, you'll be able to upgrade these dependencies directly from upstream, no need to wait for an update with @nativescript-community/solid-js

\n
\n

Usage

\n
import { Application } from \"@nativescript/core\"
import { render } from \"@nativescript-community/solid-js\"
import { createSignal } from \"solid-js\"

const App = () => {
\tconst [count, setCount] = createSignal(0)
\tconst increment = () => {
\t\tsetCount(c => c + 1)
\t}
\treturn <>
\t<actionbar title=\"Hello, SolidJS!\"></actionbar>
\t<stacklayout>
\t\t<label>You have taapped {count()} time(s)</label>
\t\t<button class=\"-primary\" on:tap={increment}>Tap me!</button>
\t</stacklayout>
\t</>
}

const create = () => {
\trender(App, document.body)
\treturn document
}

Application.run({ create })
\n
\n

Caveats

\n

Event handling

\n

Use on:raw-EventName and oncapture:RawEvent-Name to register event handlers instead of on___. It may be a little annoying, but NativeScript uses case sensitive event names and don't have native event bubbling, which means delegation couldn't function.

\n

To enable capture and bubble phase of an event, please refer to this doc

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-bottomsheet":{"name":"nativescript-custom-bottomsheet","version":"1.0.6","license":"Apache-2.0","readme":"

Nativescript Custom Bottomsheet \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

Overview

\n

Nativescript Custom Bottomsheet is a plugin that enable the show a custom beautiful actionsheet/bottomsheet.

\n

\n \n \n

\n

Installation

\n
tns plugin add nativescript-custom-bottomsheet
\n

Usage

\n

TypeScript

\n

xml

\n
...
    <StackLayout class=\"p-20\">
        <Button text=\"show\" class=\"t-20 text-center c-black\" tap=\"{{ onTap }}\"/>
    </StackLayout>
...
\n

main-view-model.ts

\n
import { Observable } from 'tns-core-modules/data/observable';
import { CustomBottomsheet, CBSheetOption } from 'nativescript-custom-bottomsheet';

export class HelloWorldModel extends Observable {
  private customBottomsheet: CustomBottomsheet;

  constructor() {
    super();
    this.customBottomsheet = new CustomBottomsheet();
  }

  public onTap(): void {
    const options: CBSheetOption = {
      icon: 'contact',
      title: 'John Doe',
      items: [{
        icon: 'call',
        title: 'Make a call'
      },
      {
        icon: 'sms',
        title: 'Send a text message'
      },
      {
        icon: 'email',
        title: 'Send an email'
      },
      {
        icon: 'comments',
        title: 'Leave a comment'
      },
      {
        icon: 'delete',
        title: 'Delete contact'
      }
      ],
      onItemTap: (index, item) => {
        console.log('index', index);
      },
      cancelButtonText: 'Cancel'
    };

    this.customBottomsheet.show(options);
  }
}
\n

Angular

\n

your.component.html

\n
<GridLayout class=\"page\">
    <StackLayout class=\"p-20\">
        <Button text=\"show\" class=\"t-20 text-center c-black\" (tap)=\"onTap()\"></Button>
    </StackLayout>
</GridLayout>
\n

your.component.ts

\n
import { Component, OnInit } from \"@angular/core\";
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-custom-bottomsheet';

@Component({
    ...
})
export class YourComponent implements OnInit {
    private customBottomsheet: CustomBottomsheet;

    constructor() {
        this.customBottomsheet = new CustomBottomsheet();
    }

    ngOnInit(): void {
        ...
    } 
    
    public onTap(): void {
        const options: CBSheetOption = {
            icon: 'contact',
            title: 'John Doe',
            items: [{
                icon: 'call',
                title: 'Make a call'
            },
            {
                icon: 'sms',
                title: 'Send a text message'
            },
            {
                icon: 'email',
                title: 'Send an email'
            },
            {
                icon: 'comments',
                title: 'Leave a comment'
            },
            {
                icon: 'delete',
                title: 'Delete contact'
            }
            ],
            onItemTap: (index, item) => {
                console.log('index', index);
            }
            cancelButtonText: 'Cancel'
        };

        this.customBottomsheet.show(options);
    }
}
\n

Vue

\n

app.js

\n

your-component.vue

\n
<template>
  <Page class=\"page\">
    ...

    <GridLayout>
      <StackLayout class=\"p-20\">
        <Button text=\"show\" class=\"t-20 text-center c-black\" @tap=\"onTap\"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
</template>

<script>
import {
  CustomBottomsheet
} from \"nativescript-custom-bottomsheet\";

const customBottomsheet = new CustomBottomsheet();

export default {
  methods: {
    onTap() {
      const options = {
        icon: \"contact\",
        title: \"John Doe\",
        items: [
          {
            icon: \"call\",
            title: \"Make a call\"
          },
          {
            icon: \"sms\",
            title: \"Send a text message\"
          },
          {
            icon: \"email\",
            title: \"Send an email\"
          },
          {
            icon: \"comments\",
            title: \"Leave a comment\"
          },
          {
            icon: \"delete\",
            title: \"Delete contact\"
          }
        ],
        onItemTap: (index, item) => {
          console.log(\"index\", index);
        },
        cancelButtonText: 'Cancel'
      };

      this.customBottomsheet.show(options);
    }
  }
};
</script>
\n

API

\n

CustomBottomsheet

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
show(options: CBSheetOption)VoidShow Bottomsheet\"android\" \"apple\"
\n

CBSheetOption

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
iconstringSet Bottomsheet header icon\"android\" \"apple\"
titlestringSet Bottomsheet header title\"android\" \"apple\"
itemsArray<CBSheetItem>Set Bottomsheet item's icon and title\"android\" \"apple\"
onItemTapCallback FunctionCall when an item is clicked and pass the index of the clicked item and it's properties e.g. icon and title\"android\" \"apple\"
cancelButtonTextstringSet the cancel button text on iOS\"apple\"
\n

CBSheetItem

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
iconstringSet Bottomsheet item icon\"android\" \"apple\"
titlestringSet Bottomsheet item title\"android\" \"apple\"
\n

Limitations

\n

iOS

\n

Currently on ios adding more than four tabs will ressort having your text animations cut.

\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mobile-cli-lib":{"name":"mobile-cli-lib","version":"0.22.0","license":"Apache-2.0","readme":"

mobile-cli-lib

\n

Provides an easy way for working with devices.\nContains common infrastructure for CLIs - mainly AppBuilder and NativeScript.

\n

Installation

\n

Latest version: 0.22.0

\n

Release date: 2016, December 15

\n

System Requirements

\n

Before installing the mobile-cli-lib, verify that your system meets the following requirements.

\n

Windows Systems

\n

Minimum Software Requirements

\n\n

Additional Software Requirements for iOS On-Device Deployment

\n\n
\n

The bitness of Node.js and iTunes must match.

\n
\n

Additional Software Requirements for Android On-Device Deployment

\n\n

Additional Software Requirements for Windows Phone On-Device Deployment

\n
\n

In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

\n
\n

OS X Systems

\n

Minimum Software Requirements

\n\n

Additional Software Requirements for iOS On-Device Deployment

\n\n

Additional Software Requirements for Android On-Device Deployment

\n\n

Additional Software Requirements for Windows Phone On-Device Deployment

\n
\n

In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

\n
\n

Linux Systems

\n

Minimum Software Requirements

\n\n

Additional Software Requirements for iOS On-Device Deployment

\n
\n

In this version of the mobile-cli-lib, you cannot deploy and LiveSync on connected iOS devices from the command line. You need to manually deploy the application package using iTunes.

\n
\n

Additional Software Requirements for Android On-Device Deployment

\n\n

Additional Software Requirements for Windows Phone On-Device Deployment

\n
\n

In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

\n
\n

Install the mobile-cli-lib

\n

The mobile-cli-lib should be added as dependency in your project's package.json.

\n

Usage

\n

In order to use mobile-cli-lib, just add a reference to it in your package.json:

\n
dependencies: {
\t\"mobile-cli-lib\": \"0.4.0\"
}
\n

After that execute npm install in the directory, where your package.json is located. This command will install all your dependencies in node_modules directory. Now you are ready to use mobile-cli-lib in your project:

\n
var common = require(\"mobile-cli-lib\");
common.fs.getFileSize(\"D:\\\\Work\\\\t.txt\")
    .then(function (result) {
        console.log(\"File size is: \" + result);
        return result;
    }, function (err) {
        console.log(\"Error happened:\");
        console.log(err);
    });
\n

Sample application

\n

You can find a sample application here. Just download the zip file and execute npm install in the project directory.\nAfter that you can execute node index.js in your terminal. In case you have file D:\\Work\\t.txt, the application will show you its size. In case you do not have such file, the application will show an error.\nYou can change the filename in index.js.

\n

Public API

\n

This section contains information about each public method.

\n

Device related public API, exposes IDeviceInfo data, that contains the following information:

\n
/**
 * Describes available information for a device.
 */
interface IDeviceInfo {
\t/**
\t * Unique identifier of the device.
\t */
\tidentifier: string;

\t/**
\t * The name of the device.
\t * For Android this is the value of device's 'ro.product.name' property.
\t * For iOS this is the value of device's 'DeviceName' property.
\t */
\tdisplayName: string;

\t/**
\t * Device model.
\t * For Android this is the value of device's 'ro.product.model' property.
\t * For iOS this is the value of device's 'ProductType' property.
\t */
\tmodel: string;

\t/**
\t * Version of the OS.
\t * For Android this is the value of device's 'ro.build.version.release' property.
\t * For iOS this is the value of device's 'ProductVersion' property.
\t */
\tversion: string;

\t/**
\t * Vendor of the device.
\t * For Android this is the value of device's 'ro.product.brand' property.
\t * For iOS the value is always \"Apple\".
\t */
\tvendor: string;

\t/**
\t * Device's platform.
\t * Can be Android or iOS.
\t */
\tplatform: string;

\t/**
\t * Status of device describing if you can work with this device or there's communication error.
\t * Can be Connected or Unreachable.
\t */
\tstatus: string;

\t/**
\t * Additional information for errors that prevents working with this device.
\t * It will be null when status is Connected.
\t */
\terrorHelp: string;

\t/**
\t * Defines if the device is tablet or not.
\t * For Android the value will be true when device's 'ro.build.characteristics' property contains \"tablet\" word or when the 'ro.build.version.release' is 3.x
\t * For iOS the value will be true when device's 'ProductType' property contains \"ipad\" word.
\t */
\tisTablet: boolean;

\t/**
\t * Optional property describing the color of the device.
\t * Available for iOS only - the value of device's 'DeviceColor' property.
\t */
\tcolor?: string;

\t/**
\t *  Optional property describing the architecture of the device
\t *  Available for iOS only - can be \"armv7\" or \"arm64\"
\t */
\tactiveArchitecture?: string;
}
\n

Module companionAppsService

\n
\n

Stability 2 - Stable

\n
\n

companionAppsService gives access to companion apps identifiers.

\n\n
var companionAppIdentifiers = require(\"mobile-cli-lib\").companionAppsService.getAllCompanionAppIdentifiers();
\n

Result object is something like:

\n
{
\t'cordova': {
\t\t'android': 'android.cordova.companion.app.identifier',
\t\t'ios': 'ios.cordova.companion.app.identifier',
\t\t'wp8': 'wp8.cordova.companion.app.identifier'
\t},
\t'nativescript': {
\t\t'android': 'android.nativescript.companion.app.identifier',
\t\t'ios': 'ios.nativescript.companion.app.identifier',
\t\t'wp8': null
\t}
}
\n\n
var companionAppIdentifiers = require(\"mobile-cli-lib\").companionAppsService.getCompanionAppIdentifier(\"cordova\", \"android\");
\n

Module deviceEmitter

\n
\n

Stability 2 - Stable

\n
\n

deviceEmitter module is used to emit different events related to devices attached to the system.\nYou can use deviceEmitter to add handles for the following events:

\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceFound\",  function(deviceInfoData) {
\tconsole.log(\"Found device with identifier: \" + deviceInfoData.identifier);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceLost\",  function(deviceInfoData) {
\tconsole.log(\"Detached device with identifier: \" + deviceInfoData.identifier);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceLogData\",  function(identifier, reportedData) {
\tconsole.log(\"Device \" + identifier + \" reports: \" + reportedData);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"applicationInstalled\",  function(identifier, applicationIdentifier) {
\tconsole.log(\"Application \" + applicationIdentifier  + \" has been installed on device with id: \" + identifier);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"applicationUninstalled\",  function(identifier, applicationIdentifier) {
\tconsole.log(\"Application \" + applicationIdentifier  + \" has been uninstalled from device with id: \" + identifier);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"debuggableAppFound\",  function(applicationInfo) {
\tconsole.log(\"Application \" + applicationInfo.appIdentifier  + \" is available for debugging on device with id: \" + applicationInfo.deviceIdentifier);
});
\n

Sample result for applicationInfo will be:

\n
{
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.Fitness\",
\t\"framework\": \"NativeScript\",
\t\"title\": \"NativeScript Application\"
}
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"debuggableAppLost\",  function(applicationInfo) {
\tconsole.log(\"Application \" + applicationInfo.appIdentifier  + \" is not available for debugging anymore on device with id: \" + applicationInfo.deviceIdentifier);
});
\n

Sample result for applicationInfo will be:

\n
{
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.Fitness\",
\t\"framework\": \"NativeScript\",
\t\"title\": \"NativeScript Application\"
}
\n\n

Sample usage:

\n
require(\"mobile-cli-lib\")
\t.deviceEmitter.on(\"debuggableViewFound\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
\tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" now has new WebView: \" + debuggableViewInfo);
});
\n

Sample result for debuggableViewInfo will be:

\n
{
\t\"description\": \"\",
\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
\t\"id\": \"4050\",
\t\"title\": \"New tab\",
\t\"type\": \"page\",
\t\"url\": \"chrome-native://newtab/\",
\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
}
\n\n

Sample usage:

\n
require(\"mobile-cli-lib\")
\t.deviceEmitter.on(\"debuggableViewLost\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
\tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" now cannot debug WebView: \" + debuggableViewInfo);
});
\n

Sample result for debuggableViewInfo will be:

\n
{
\t\"description\": \"\",
\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
\t\"id\": \"4050\",
\t\"title\": \"New tab\",
\t\"type\": \"page\",
\t\"url\": \"chrome-native://newtab/\",
\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
}
\n\n

Sample usage:

\n
require(\"mobile-cli-lib\")
\t.deviceEmitter.on(\"debuggableViewChanged\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
\tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" has changes in WebView: \" + debuggableViewInfo);
});
\n

Sample result for debuggableViewInfo will be:

\n
{
\t\"description\": \"\",
\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
\t\"id\": \"4050\",
\t\"title\": \"New tab 2\",
\t\"type\": \"page\",
\t\"url\": \"chrome-native://newtab/\",
\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
}
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"companionAppInstalled\",  function(identifier, framwework) {
\tconsole.log(\"Companion app for \" + framework  + \" has been installed on device with id: \" + identifier);
});
\n\n
require(\"mobile-cli-lib\").deviceEmitter.on(\"companionAppUninstalled\",  function(identifier, framwework) {
\tconsole.log(\"Companion app for \" + framework  + \" has been uninstalled from device with id: \" + identifier);
});
\n

Module devicesService

\n
\n

Stability: 2 - Stable

\n
\n

This module allows interaction with devices. You can get a list of the attached devices or deploy on specific devices.

\n\n
var devices = require(\"mobile-cli-lib\").devicesService.getDevices();
devices.forEach(function(device) {
\tconsole.log(\"Device \" + device.identifier + \" is connected.\");
});
\n\n

Sample usage:

\n
Promise.all(require(\"mobile-cli-lib\")
\t\t\t\t.devicesService
\t\t\t\t.deployOnDevices([\"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\"], \"./app.ipa\", \"com.telerik.testApp\", \"Cordova\"))
\t\t\t.then(function(data) {
\t\t\t\tconsole.log(data);
\t\t\t}, function(err) {
\t\t\t\tconsole.log(err);
\t\t\t});
\n\n
require(\"mobile-cli-lib\").devicesService.setLogLevel(\"FULL\");
\n

Everything that the devices report will be raised in deviceEmitter.deviceLogData event. When a new device is attached, all of the information that it reports will also be send.\nWhen the deviceIdentifier is passed, the value of the log level will be used only for this device. For example when all devices report all of their logs (FULL) level, you may call:

\n
require(\"mobile-cli-lib\").devicesService.setLogLevel(\"INFO\", \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\");
\n

This will set the logging level to INFO only for device with identifier 129604ab96a4d0053023b4bf5b288cf34a9ed5fa.

\n\n
/**
 * Describes if LiveSync is supported for specific device and application.
 */
interface IAppInstalledInfo extends ILiveSyncSupportedInfo {
\t/**
\t * Unique identifier of the device.
\t */
\tdeviceIdentifier: string;

\t/**
\t * Application identifier.
\t */
\tappIdentifier: string;

\t/**
\t * Defines if application is installed on device.
\t */
\tisInstalled: boolean;

\t/**
\t * Result, indicating is livesync supported for specified device and specified application.
\t * `true` in case livesync is supported and false otherwise.
\t */
\tisLiveSyncSupported: boolean;
}
\n
\n

NOTE: This method will try to start the application on each device in order to understand is LiveSync supported.\nSample usage:

\n
\n
Promise.all(require(\"mobile-cli-lib\")
\t\t\t\t.devicesService
\t\t\t\t.isAppInstalledOnDevices(devicesFound, \"com.telerik.myApp\", \"cordova\"))
\t\t.then(function(data) {
\t\t\tconsole.log(data);
\t\t}, function(err) {
\t\t\tconsole.log(err);
\t\t});
\n

Sample result will be:

\n
[{
\t\"deviceIdentifier\": \"deviceId1\",
\t\"appIdentifier\": \"appId\",
\t\"isInstalled\": true,
\t\"isLiveSyncSupported\": true
}, {
\t\"deviceIdentifier\": \"deviceId2\",
\t\"appIdentifier\": \"appId\",
\t\"isInstalled\": false,
\t\"isLiveSyncSupported\": false
}]
\n\n
Promise.all(require(\"mobile-cli-lib\")
\t\t\t\t.devicesService
\t\t\t\t.isCompanionAppInstalledOnDevices(devicesFound, \"cordova\"))
\t\t.then(function(data) {
\t\t\tconsole.log(data);
\t\t}, function(err) {
\t\t\tconsole.log(err);
\t\t});
\n

Sample result will be:

\n
[{
\t\"deviceIdentifier\": \"deviceId1\",
\t\"appIdentifier\": \"com.telerik.AppBuilder\",
\t\"isInstalled\": true,
\t\"isLiveSyncSupported\": true
}, {
\t\"deviceIdentifier\": \"deviceId2\",
\t\"appIdentifier\": \"com.telerik.AppBuilder\",
\t\"isInstalled\": false,
\t\"isLiveSyncSupported\": false
}]
\n\n

Sample usage:

\n
require(\"mobile-cli-lib\").devicesService.mapAbstractToTcpPort(\"4df18f307d8a8f1b\", \"com.telerik.test\", \"Cordova\")
\t.then(function(port) {
\t\tconsole.log(port);
\t}, function(err) {
\t\tconsole.log(err);
\t});
\n\n
/**
 * Describes basic information about application on device.
 */
interface IDeviceApplicationInformation {
\t/**
\t * The device identifier.
\t */
\tdeviceIdentifier: string;

\t/**
\t * The application identifier.
\t */
\tappIdentifier: string;

\t/**
\t * The framework of the project (Cordova or NativeScript).
\t */
\tframework: string;
}
\n

Sample usage:

\n
Promise.all(require(\"mobile-cli-lib\").devicesService.getDebuggableApps([\"4df18f307d8a8f1b\", \"JJY5KBTW75TCHQUK\"]))
\t.then(function(data) {
\t\tdata.forEach(function(apps) {
\t\t\tconsole.log(apps);
\t\t});
\t}, function(err) {
\t\tconsole.log(err);
\t});
\n

Sample result will be:

\n
[[{
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.Fitness\",
\t\"framework\": \"NativeScript\"
}, {
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.livesynctest\",
\t\"framework\": \"Cordova\"
}], [{
\t\"deviceIdentifier\": \"JJY5KBTW75TCHQUK\",
\t\"appIdentifier\": \"com.telerik.PhotoAlbum\",
\t\"framework\": \"NativeScript\"
}]]
\n\n
/**
 * Describes basic information about application on device.
 */
interface IDeviceApplicationInformation {
\t/**
\t * The device identifier.
\t */
\tdeviceIdentifier: string;

\t/**
\t * The application identifier.
\t */
\tappIdentifier: string;

\t/**
\t * The framework of the project (Cordova or NativeScript).
\t */
\tframework: string;
}
\n

Sample usage:

\n
Promise.all(require(\"mobile-cli-lib\").devicesService.getDebuggableApps([\"4df18f307d8a8f1b\", \"JJY5KBTW75TCHQUK\"]))
\t.then(function(data) {
\t\tdata.forEach(function(apps) {
\t\t\tconsole.log(apps);
\t\t});
\t}, function(err) {
\t\tconsole.log(err);
\t});
\n

Sample result will be:

\n
[[{
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.Fitness\",
\t\"framework\": \"NativeScript\"
}, {
\t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
\t\"appIdentifier\": \"com.telerik.livesynctest\",
\t\"framework\": \"Cordova\"
}], [{
\t\"deviceIdentifier\": \"JJY5KBTW75TCHQUK\",
\t\"appIdentifier\": \"com.telerik.PhotoAlbum\",
\t\"framework\": \"NativeScript\"
}]]
\n\n
\n

NOTE: This method works only for Cordova based applications. DO NOT pass appIdentifier of NativeScript application.

\n
\n
/**
 * Describes information for WebView that can be debugged.
 */
interface IDebugWebViewInfo {
\t/**
\t * Short description of the view.
\t */
\tdescription: string;

\t/**
\t * Url to the devtools.
\t * @example http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4024
\t */
\tdevtoolsFrontendUrl: string;

\t/**
\t * Unique identifier of the web view. Could be number or GUID.
\t * @example 4027
\t */
\tid: string;

\t/**
\t * Title of the WebView.
\t * @example https://bit.ly/12345V is not available
\t */
\ttitle: string;

\t/**
\t * Type of the WebView.
\t * @example page
\t */
\ttype: string;

\t/**
\t * URL loaded in the view.
\t * @example https://bit.ly/12345V
\t */
\turl: string;

\t/**
\t * Debugger URL.
\t * @example ws://127.0.0.1:53213/devtools/page/4027
\t */
\twebSocketDebuggerUrl: string;
}
\n

Sample usage:

\n
require(\"mobile-cli-lib\")
\t.devicesService
\t.getDebuggableViews(\"4df18f307d8a8f1b\", \"com.telerik.cordovaApp\")
\t.then(function(data) {
\t\tconsole.log(data);
\t}, function(err) {
\t\tconsole.log(err);
\t});
\n

Sample result will be:

\n
[{
\t\t\"description\": \"\",
\t\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
\t\t\"id\": \"4050\",
\t\t\"title\": \"New tab\",
\t\t\"type\": \"page\",
\t\t\"url\": \"chrome-native://newtab/\",
\t\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
\t},

\t{
\t\t\"description\": \"\",
\t\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4032\",
\t\t\"id\": \"4032\",
\t\t\"title\": \"New tab\",
\t\t\"type\": \"page\",
\t\t\"url\": \"chrome-native://newtab/\",
\t\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4032\"
\t}
]
\n

Module liveSyncService

\n
\n

Stability: 1 - Could be changed due to some new requirments.

\n
\n

This module allows LiveSync applications on different devices.

\n

The following types are used:

\n
/**
 * Describes the result of a single livesync operation started by Proton.
 */
interface ILiveSyncOperationResult {
\t/**
\t * Defines if the operation is successful (set to true) or not (value is false).
\t */
\tisResolved: boolean;

\t/**
\t * Error when livesync operation fails. If `isResolved` is true, error will be undefined.
\t */
\terror?: Error;
}

/**
 * Describes result of all LiveSync operations per device.
 */
interface IDeviceLiveSyncResult {
\t/**
\t * Identifier of the device.
\t */
\tdeviceIdentifier: string;

\t/**
\t * Result of LiveSync operation for application.
\t */
\tliveSyncToApp?: ILiveSyncOperationResult;

\t/**
\t * Result of LiveSync operation to companion app.
\t */
\tliveSyncToCompanion?: ILiveSyncOperationResult;
}
\n\n
/**
 * Describes device's LiveSync information.
 */
interface IDeviceLiveSyncInfo {
\t/**
\t * Unique identifier of the device.
\t */
\tdeviceIdentifier: string;

\t/**
\t * Defines if changes have to be synced to installed application.
\t */
\tsyncToApp: boolean;

\t/**
\t * Defines if changes have to be synced to companion app.
\t */
\tsyncToCompanion: boolean;
}
\n

Sample usage:

\n
var deviceInfos = [{\"deviceIdentifier\": \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"syncToApp\": true, \"syncToCompanion\": false},
\t\t\t\t\t{\"deviceIdentifier\": \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\", \"syncToApp\": true, \"syncToCompanion\": false}];
// Full Sync - the whole project dir will be synced
Promise.all(require(\"mobile-cli-lib\").liveSyncService.livesync(deviceInfos, projectDir))
\t.then(function(result) {
\t\t\tconsole.log(\"Finished with full sync, result is: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while livesyncing: \", err);
\t});

// Or use livesync only for some files:
var filesToSync = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.xml\"),
\t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.xml\")]
Promise.all(require(\"mobile-cli-lib\").liveSyncService.livesync(deviceInfos, projectDir, filesToSync))
\t.then(function(result) {
\t\t\tconsole.log(\"Finished with partial sync, result is: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while livesyncing: \", err);
\t});
\n\n

Sample usage:

\n
var deviceInfos = [{\"deviceIdentifier\": \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"syncToApp\": true, \"syncToCompanion\": false},
\t\t\t\t\t{\"deviceIdentifier\": \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\", \"syncToApp\": true, \"syncToCompanion\": false}];

var filesToSync = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.xml\"),
\t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.xml\")]
Promise.all(require(\"mobile-cli-lib\").liveSyncService.deleteFiles(deviceInfos, projectDir, filesToSync))
\t.then(function(result) {
\t\t\tconsole.log(\"Finished with deleting files, result is: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while deleting files: \", err);
\t});
\n

Module npmService

\n
\n

Stability: 1 - Could be changed due to some new requirments.

\n
\n

This module is used to install or uninstall packages from npm.

\n

The following types are used:

\n
/**
 * Describes information for single npm dependency that has to be installed.
 */
interface INpmDependency {
\t/**
\t * Name of the dependency.
\t */
\tname: string;

\t/**
\t * @optional The version of the dependency that has to be installed.
\t */
\tversion?: string;

\t/**
\t * Defines if @types/<name> should be installed as well.
\t */
\tinstallTypes: boolean;
}

/**
 * Describes the result of npm install command.
 */
interface INpmInstallResult {
\t/**
\t * The result of installing a single dependency.
\t */
\tresult?: INpmInstallDependencyResult,

\t/**
\t * The error that occurred during the operation.
\t */
\terror?: Error;
}
\n\n

Sample usage:

\n
// Install all dependencies from package.json.
require(\"mobile-cli-lib\").npmService.install(\"D:\\\\test\\\\project\")
\t.then(function(result) {
\t\t\tconsole.log(\"The npm result is: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while installing packages from npm: \", err);
\t});
\n

Sample result will be:

\n
{}
\n
// Install specific dependency from npm.
var dependency = {
\tname: \"lodash\",
\tversion: \"4.15.0\",
\tinstallTypes: true
};

require(\"mobile-cli-lib\").npmService.install(\"D:\\\\test\\\\project\", dependency)
\t.then(function(result) {
\t\t\tconsole.log(\"The npm result is: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while installing packages from npm: \", err);
\t});
\n

Sample result will be:

\n
{
\t\"result\": {
\t\t\"isInstalled\": true,
\t\t\"isTypesInstalled\": true
\t}
}
\n\n

Sample usage:

\n
require(\"mobile-cli-lib\").npmService.uninstall(\"D:\\\\test\\\\project\", \"lodash\")
\t.then(function() {
\t\t\tconsole.log(\"The dependency is uninstalled.\");
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while uninstalling packages from npm: \", err);
\t});
\n

Module typeScriptService

\n
\n

Stability: 1 - Could be changed due to some new requirments.

\n
\n

This module is used to transpile TypeScript files.

\n

The following types are used:

\n
interface ITypeScriptCompilerOptions {
\t/**
\t * Specify the codepage to use when opening source files.
\t */
\tcodePage?: number;

\t/**
\t * Generates corresponding .d.ts file.
\t */
\tdeclaration?: boolean;

\t/**
\t * Specifies the location where debugger should locate map files instead of generated locations.
\t */
\tmapRoot?: string;

\t/**
\t * Specify module code generation: 'commonjs' or 'amd'.
\t */
\tmodule?: string;

\t/**
\t * Warn on expressions and declarations with an implied 'any' type.
\t */
\tnoImplicitAny?: boolean;

\t/**
\t * Concatenate and emit output to single file.
\t */
\toutFile?: string;

\t/**
\t * Redirect output structure to the directory.
\t */
\toutDir?: string;

\t/**
\t * Do not emit comments to output.
\t */
\tremoveComments?: boolean;

\t/**
\t * Generates corresponding .map file.
\t */
\tsourceMap?: boolean;

\t/**
\t * Specifies the location where debugger should locate TypeScript files instead of source locations.
\t */
\tsourceRoot?: string;

\t/**
\t * Specify ECMAScript target version: 'ES3' (default), or 'ES5'.
\t */
\ttarget?: string;

\t/**
\t * Do not emit outputs if any errors were reported.
\t */
\tnoEmitOnError?: boolean;

\t[key: string]: any;
}

/**
 * Describes the options for transpiling TypeScript files.
 */
interface ITypeScriptTranspileOptions {
\t/**
\t * Describes the options in tsconfig.json file.
\t */
\tcompilerOptions?: ITypeScriptCompilerOptions;

\t/**
\t * The default options which will be used if there is no tsconfig.json file.
\t */
\tdefaultCompilerOptions?: ITypeScriptCompilerOptions;

\t/**
\t * Path to the default .d.ts files.
\t */
\tpathToDefaultDefinitionFiles?: string;
}
\n\n

Sample usage:

\n
// Transpile only 2 files.
var projectDir = \"D:\\\\test\\\\project\";
var filesToTranspile = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.ts\"),
\t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.ts\")];

require(\"mobile-cli-lib\").typeScriptService.transpile(projectDir, filesToTranspile)
\t.then(function(result) {
\t\t\tconsole.log(\"TypeScript compiler result: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while transpiling files: \", err);
\t});
\n

Sample result if there are no errors will be:

\n
\"\"
\n

Sample result with errors will be:

\n
\"app/components/homeView/homeView.ts(19,1): error TS2304: Cannot find name 'a'.
app/components/homeView/homeView.ts(20,1): error TS2304: Cannot find name 'b'.\"
\n
// Transpile all files in project.
require(\"mobile-cli-lib\").typeScriptService.transpile(\"D:\\\\test\\\\project\")
\t.then(function(result) {
\t\t\tconsole.log(\"TypeScript compiler result: \", result);
\t}).catch(function(err) {
\t\t\tconsole.log(\"Error while transpiling files: \", err);
\t});
\n

Technical details

\n

Injector

\n

Similar to AngularJS, mobile-cli-lib is using $injector to retrive object instances, instantiate types and load modules. Each module must be registered in the $injector, so when another module depends on it, the $injector will create a new instance of the dependency or reuse already created one.

\n

How to add new module

\n\n
class DeviceService {
}
\n
\n

NOTE: The reference path at the top must point the the root of the project, where .d.ts file is created by grunt.

\n
\n\n
class DeviceService {
}
$injector.register(\"deviceService\", DeviceService);
\n\n
class DeviceService {
\tpublic listDevices(): void {
\t\t// implementation is here
\t}
}
$injector.register(\"deviceService\", DeviceService);
\n\n
class DeviceService {
\tconstructor(private $fs: IFileSystem) { }
}
$injector.register(\"deviceService\", DeviceService);
\n
\n

NOTE: In case you do not place access modifier (private, protected or public, you'll be able to use the dependant module only in the constructor.

\n
\n
\n

NOTE: The name of the module must be exactly the same as the one used for registering in the $injector, in this case this is fs module. The preceding dollar symbol $ is mandatory.\nNow you can access fs methods by using this.$fs.<method>.

\n
\n\n
$injector.require(\"deviceService\", \"./device-service\");
\n

This line tells the $injector to look for module called "deviceService" in a file device-service located at the root of the mobile-cli-lib.

\n
\n

NOTE: The name of the module must be the same as the one used in $injector.register call.\n$injector.require will not load the file. It will be loaded by $injector when someone asks for module "deviceService".

\n
\n

How to make a method public

\n

In order to expose public API, we use TypeScript decorators and some "magic" in our bootstrapping. When you want to expose method B from class A, you have to do the following:

\n\n
$injector.requirePublic(\"deviceService\", \"./device-service\")
\n\n
\n

IMPORTANT: exported decorator requires one parameter which MUST be the first parameter passed to requirePublic method. This is the name of the module that will be publicly exposed.

\n
\n

After you have executed these two steps, you can start using your publicly available method:

\n
var common = require(\"mobile-cli-lib\");
common.deviceService.listDevices() /* NOTE: here we are not using the class name DeviceService, but the module name - deviceService */
\t.then(function (a) {
    \tconsole.log(\"After promise had returned.\");
    \treturn a;
\t})
    .catch(function (err) {
    \tconsole.log(\"Error happened:\");
    \tconsole.log(err);
\t});
\n

Behind the scenes of generating public API

\n

requirePublic method of the injector is doing some "magic" in order to support lazy loading, correct dependency resolving and exposing only some of the methods, not the whole power of the common lib.\nWhen you require mobile-cli-lib module, you receive $injector's publicApi - it is the "exported one". requirePublic method defines getter for each module that is passed, for example when you say:

\n
\t$injector.requirePublic(\"deviceService\", \"./device-service\")
\n

a new property is added to publicApi - deviceService and a getter is added for it. When you try to access this module, require("mobile-cli-lib").deviceService.listDevices(), the getter is called. It resolves the module, by parsing the provided file (./device-service)\nand that's the time when decorators are executed. For each decorated method, a new entry in $injector.publicApi.__modules__ is created. This is not the same method that you've decorated - it's entirely new method, that returns a Promise.\nThe new method will be used in the publicApi, while original implementation will still be used in all other places in the code. The promisified method will call the original one (in a separate Fiber) and will resolve the Promise with the result of the method.

\n

Issues

\n

Missing dependencies

\n

Some of our modules must be added: staticConfig, config, analyticsService, etc.

\n

Tests for injector

\n

Add more tests for yok and for register decorator.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-testfairy":{"name":"nativescript-testfairy","version":"2.59.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gif":{"name":"nativescript-gif","version":"5.0.0","license":"MIT","readme":"

README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-videoplayer":{"name":"@gavant/nativescript-videoplayer","version":"4.2.8","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@muse.js/nativescript":{"name":"@muse.js/nativescript","version":"0.0.3","license":"MIT","readme":"

nativescript

\n

This library was generated with Nx.

\n

Running unit tests

\n

Run nx test nativescript to execute the unit tests via Jest.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-speech-recognition":{"name":"nativescript-speech-recognition","version":"2.0.0","license":"MIT","readme":"

NativeScript Speech Recognition

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

This is the plugin demo in action..

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
..while recognizing Dutch 🇳🇱.. after recognizing American-English 🇺🇸
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativeScript 7+:

\n
ns plugin add nativescript-speech-recognition
\n

NativeScript < 7:

\n
tns plugin add nativescript-speech-recognition@1.5.0
\n

Testing

\n

You'll need to test this on a real device as a Simulator/Emulator doesn't have speech recognition capabilities.

\n

API

\n

available

\n

Depending on the OS version a speech engine may not be available.

\n

JavaScript

\n
// require the plugin
var SpeechRecognition = require(\"nativescript-speech-recognition\").SpeechRecognition;

// instantiate the plugin
var speechRecognition = new SpeechRecognition();

speechRecognition.available().then(
  function(available) {
    console.log(available ? \"YES!\" : \"NO\");
  }
);
\n

TypeScript

\n
// import the plugin
import { SpeechRecognition } from \"nativescript-speech-recognition\";

class SomeClass {
  private speechRecognition = new SpeechRecognition();
  
  public checkAvailability(): void {
    this.speechRecognition.available().then(
      (available: boolean) => console.log(available ? \"YES!\" : \"NO\"),
      (err: string) => console.log(err)
    );
  }
}
\n

requestPermission

\n

You can either let startListening handle permissions when needed, but if you want to have more control\nover when the permission popups are shown, you can use this function:

\n
this.speechRecognition.requestPermission().then((granted: boolean) => {
  console.log(\"Granted? \" + granted);
});
\n

startListening

\n

On iOS this will trigger two prompts:

\n

The first prompt requests to allow Apple to analyze the voice input. The user will see a consent screen which you can extend with your own message by adding a fragment like this to app/App_Resources/iOS/Info.plist:

\n
<key>NSSpeechRecognitionUsageDescription</key>
<string>My custom recognition usage description. Overriding the default empty one in the plugin.</string>
\n

The second prompt requests access to the microphone:

\n
<key>NSMicrophoneUsageDescription</key>
<string>My custom microphone usage description. Overriding the default empty one in the plugin.</string>
\n

TypeScript

\n
// import the options
import { SpeechRecognitionTranscription } from \"nativescript-speech-recognition\";

this.speechRecognition.startListening(
  {
    // optional, uses the device locale by default
    locale: \"en-US\",
    // set to true to get results back continuously
    returnPartialResults: true,
    // this callback will be invoked repeatedly during recognition
    onResult: (transcription: SpeechRecognitionTranscription) => {
      console.log(`User said: ${transcription.text}`);
      console.log(`User finished?: ${transcription.finished}`);
    },
    onError: (error: string | number) => {
      // because of the way iOS and Android differ, this is either:
      // - iOS: A 'string', describing the issue. 
      // - Android: A 'number', referencing an 'ERROR_*' constant from https://developer.android.com/reference/android/speech/SpeechRecognizer.
      //            If that code is either 6 or 7 you may want to restart listening.
    }
  }
).then(
  (started: boolean) => { console.log(`started listening`) },
  (errorMessage: string) => { console.log(`Error: ${errorMessage}`); }
).catch((error: string | number) => {
  // same as the 'onError' handler, but this may not return if the error occurs after listening has successfully started (because that resolves the promise,
  // hence the' onError' handler was created.
});
\n
Angular tip
\n

If you're using this plugin in Angular, then note that the onResult callback is not part of Angular's lifecycle.\nSo either update the UI in an ngZone as shown here,\nor use ChangeDetectorRef as shown here.

\n

stopListening

\n

TypeScript

\n
this.speechRecognition.stopListening().then(
  () => { console.log(`stopped listening`) },
  (errorMessage: string) => { console.log(`Stop error: ${errorMessage}`); }
);
\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

Angular video tutorial

\n

Rather watch a video? Check out this tutorial on YouTube.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@primeboard/nativescript-local-notifications":{"name":"@primeboard/nativescript-local-notifications","version":"5.0.3","license":"MIT","readme":"

@nativescript/local-notifications

\n

\"NPM\n\"Downloads\"

\n

The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativeScript 7+:

\n
ns plugin add @nativescript/local-notifications
\n

NativeScript prior to 7:

\n
tns plugin add nativescript-local-notifications@4.2.1
\n

Setup (since plugin version 3.0.0)

\n

Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

\n

You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

\n
// either
import { LocalNotifications } from '@nativescript/local-notifications';
// or (if that doesn't work for you)
import * as LocalNotifications from '@nativescript/local-notifications';

// then use it as:
LocalNotifications.hasPermission();
\n

NativeScript-Angular

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

There's also a simple Angular demo in this repo:

\n

NativeScript-Vue

\n

There is a Vue demo:

\n

Plugin API

\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission), or you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Will be generated if not set.
titleThe title which is shown in the statusbar. Default not set.
subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
groupedMessagesAn array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set
groupSummaryAn inboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound, copy the file to App_Resources/iOS and App_Resources/Android/src/main/res/raw. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalSet to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
\n

NotificationAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idAn id so you can easily distinguish your actions.
typeEither button or input.
titleThe label for type = button.
launchLaunch the app when the action completes.
submitLabelThe submit button label for type = input.
placeholderThe placeholder text for type = input.
\n
LocalNotifications.schedule([
\t{
\t\tid: 1, // generated id if not set
\t\ttitle: 'The title',
\t\tbody: 'Recurs every minute until cancelled',
\t\tticker: 'The ticker',
\t\tcolor: new Color('red'),
\t\tbadge: 1,
\t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
\t\tgroupSummary: 'Summary of the grouped messages above', //android only
\t\tongoing: true, // makes the notification ongoing (Android only)
\t\ticon: 'res://heart',
\t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
\t\tthumbnail: true,
\t\tinterval: 'minute',
\t\tchannel: 'My Channel', // default: 'Channel'
\t\tsound: isAndroid ? 'customsound' : 'customsound.wav',
\t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
\t},
]).then(
\t(scheduledIds) => {
\t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
\t},
\t(error) => {
\t\tconsole.log('scheduling error: ' + error);
\t}
);
\n

Notification icons (Android)

\n

These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

\n

silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

\n

These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.
\n

Source: Density Qualifier Docs

\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
LocalNotifications.addOnMessageReceivedCallback((notification) => {
\tconsole.log('ID: ' + notification.id);
\tconsole.log('Title: ' + notification.title);
\tconsole.log('Body: ' + notification.body);
}).then(() => {
\tconsole.log('Listener added');
});
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n
LocalNotifications.getScheduledIds().then((ids) => {
\tconsole.log(\"ID's: \" + ids);
});
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
LocalNotifications.cancel(5 /* the ID */).then((foundAndCanceled) => {
\tif (foundAndCanceled) {
\t\tconsole.log(\"OK, it's gone!\");
\t} else {
\t\tconsole.log('No ID 5 was scheduled');
\t}
});
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
LocalNotifications.requestPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
LocalNotifications.hasPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-colors":{"name":"nativescript-image-colors","version":"1.1.0","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-image-colors/blob/master/LICENSE"},"readme":"

NativeScript Image Colors

\n

\"npm\"\n\"npm\"

\n

\"NativeScript

\n

Example

\n
import { ImageColors  } from 'nativescript-image-colors';



let image = page.getViewById<Image>(`image`);
colors = ImageColors.getColorPalette(image);

colors.color1;
colors.color2;
colors.color3;
\n

Usage

\n

returns a ColorPalette that has 3 color properties color1, color2, and color3. the Color Palette also contains a AndroidPalette and IosPalette object properties. The AndroidPalette has properties that correspond with https://developer.android.com/reference/android/support/v7/graphics/Palette.html. The IosPalette object corresponds with the SLColorArt object from the https://cocoapods.org/?q=ColorArt object. ColorPalette is a composite of these two so you don't have to do null and platform checks. please note the colors will not be consistent between platforms since the algorithms used are different.

\n

Libraries used:

\n

Android: https://developer.android.com/reference/android/support/v7/graphics/Palette.html\niOS: https://github.com/panicinc/ColorArt

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cfalert-dialog":{"name":"nativescript-cfalert-dialog","version":"1.0.16","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-ssi":{"name":"nativescript-audio-ssi","version":"4.0.6","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Audio

\n

NativeScript plugin to play and record audio files for Android and iOS.

\n

This forks from Brad Martin's plugin. It fixes an issue in ios when dispose is called before init from url completes.

\n

Uses the following native classes:

\n

Android

\n\n

iOS

\n\n

Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Installation

\n

The plugin is compatible with both Nativescript 3.x and 2.x versions. Install with:

\n

tns plugin add nativescript-audio

\n

Sample Screen

\n

\"AudioExample\"

\n

Sample Usage

\n

Just a simple example of how you could reuse player instances for a given file:

\n
import { TNSPlayer } from 'nativescript-audio';

export class YourClass {
\tprivate _player: TNSPlayer;
\t
\tconstructor() {
\t\tthis._player = new TNSPlayer();
\t\tthis._player.initFromFile({
\t\t\taudioFile: '~/audio/song.mp3', // ~ = app directory
\t\t\tloop: false,
\t\t\tcompleteCallback: this._trackComplete.bind(this),
\t\t\terrorCallback: this._trackError.bind(this)
\t\t}).then(() => {

\t\t\tthis._player.getAudioTrackDuration().then((duration) => {
\t\t\t\t// iOS: duration is in seconds
\t\t\t\t// Android: duration is in milliseconds
\t\t\t\tconsole.log(`song duration:`, duration);
\t\t\t});
\t\t});
\t}

\tpublic togglePlay() {
\t\tif (this._player.isAudioPlaying()) {
\t\t\tthis._player.pause();
\t\t} else {
\t\t\tthis._player.play();
\t\t}
\t}

\tprivate _trackComplete(args: any) {
\t\tconsole.log('reference back to player:', args.player);

\t\t// iOS only: flag indicating if completed succesfully
\t\tconsole.log('whether song play completed successfully:', args.flag);
\t}

\tprivate _trackError(args: any) {
\t\tconsole.log('reference back to player:', args.player);
\t\tconsole.log('the error:', args.error);

\t\t// Android only: extra detail on error
\t\tconsole.log('extra info on the error:', args.extra);
\t}
}
\n

And a simple javascript example:

\n
var audio = require(\"nativescript-audio\");

var player = new audio.TNSPlayer();
var playerOptions = {
    audioFile: \"http://some/audio/file.mp3\",
    loop: false,
    completeCallback: function () {
        console.log('finished playing')
    },
    errorCallback: function (errorObject) {
        console.log(JSON.stringify(errorObject));
    },
    infoCallback: function (args) {
        console.log(JSON.stringify(args));
    }
};

player.playFromUrl(playerOptions)
    .then(function (res) {
        console.log(res);
    })
    .catch(function () {
        console.log(\"something went wrong...\");
    })
\n

API

\n

TNSRecorder

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): booleanDetermine if ready to record.
start(options: AudioRecorderOptions): PromiseStart recording file.
stop(): voidStop recording.
pause(): Promise<any>Pause recording
resume(): Promise<any>Resume recording.
dispose(): voidFree up system resources when done with recorder.
\n

TNSPlayer

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseInitialize player instance with a file without auto-playing.
playFromFile( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseAuto-play from a file.
initFromUrl( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseInitialize player instance from a url without auto-playing.
playFromUrl( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position.
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>duration of media file assigned to mediaPlayer.
currentTime: numberGet the current time in the media file's duration.
volume: voidGet/Set the player volume. Value range from 0 to 1.
\n

You can access the underlying native class instance via ios and android getters on the respective platforms which will return you:

\n\n

Platform specific:

\n

iOS:

\n

playAtTime(time: number): Play at a specific time.

\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@planbook/nativescript-rater":{"name":"@planbook/nativescript-rater","version":"1.0.0","license":"MIT","readme":"

Nativescript-rater

\n

\"npm\"\n\"npm\"\n\"Commitizen

\n

Reminds your app's users to review the app through PlayStore or AppStore. Love it, rate it!

\n

iOS 10.3 〜

\n

\"SwiftRater1\"

\n

For iOS 10.3 devices, SwiftRater uses SKStoreReviewController.

\n

〜 iOS 10.2

\n

\"SwiftRater2\"

\n

Android

\n

\"Android-Rate\"

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android-RateSwiftRater
\n

Requirements

\n

iOS iOS 8.0 or later, Xcode 8.2 or later.

\n

android API level 9 and up.

\n

Installation

\n
tns plugin add nativescript-rater
\n

Changelog

\n

src/CHANGELOG.md

\n

Usage

\n
import {appRater} from 'nativescript-rater';

// put init before `application.start`
// in ng application, you may have to put init before `platformNativeScriptDynamic`
appRater.init({
\tshowNeverButton:false,
\tdebugMode:true
});

// check
appRater.showRateDialogIfMeetsConditions();

// show directly
appRater.showRateDialog();
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
iosraw ios control, see below for advance usage
androidraw android control, the value will be available after app is launched
init(configs:AppRaterConfigs):voidLet rater know that your app is launched. See configs below
incrementSignificantUsageCount():voidFor significantUsesUntilPrompt, you need to add incrementSignificantUsageCount. iOS only
showRateDialogIfMeetsConditions():booleanShow rating dialog if meets conditions. The function will return if dialog is showed.
showRateDialog():voidShow rating dialog
\n

Configs

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
daysUntilPrompt7Shows review request if days days passed since first app launch.
usesUntilPrompt3Shows review request if users launch more than uses times.
daysBeforeReminding5Days until reminder popup if the user chooses rate later. valid for ~iOS10.2 and Android
significantUsesUntilPrompt0Shows review request if user does significant actions more than uses. iOS only
debugModefalseShows review request every time. Default false. need to set false when you submit your app.
showLaterButtontrueShow Later button in review request dialong. valid for ~iOS10.2 and Android
showNeverButtontrueShow Never button in review request dialong. Android only
\n

You can also change the value via setter.

\n
import {appRater} from 'nativescript-rater';

appRater
        .setDaysUntilPrompt(7)
        .setUsesUntilPrompt(3)
        .setSignificantUsesUntilPrompt(2)
        .setShowLaterButton(true)
        .setShowNeverButton(true)
        .setDebugMode(true);
\n

Custom dialog

\n

Android

\n

If you want to use your own dialog labels, override string xml resources on your application.

\n
<resources>
    <string name=\"rate_dialog_title\">Rate this app</string>
    <string name=\"rate_dialog_message\">If you enjoy playing this app, would you mind taking a moment to rate it? It won\\'t take more than a minute. Thanks for your support!</string>
    <string name=\"rate_dialog_ok\">Rate It Now</string>
    <string name=\"rate_dialog_cancel\">Remind Me Later</string>
    <string name=\"rate_dialog_no\">No, Thanks</string>
</resources>
\n

iOS

\n

You can customize text in review request dialog for iOS10.2 or before devices. Set text in following properties.

\n
appRater.ios.setAlertTitle('title')
appRater.ios.setAlertMessage('message')
appRater.ios.setAlertCancelTitle('cancel')
appRater.ios.setAlertRateTitle('rate')
appRater.ios.setAlertRateLaterTitle('later')
appRater.ios.setAppName('your app name')
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-advanced-permissions":{"name":"nativescript-advanced-permissions","version":"1.2.0","license":"Apache-2.0","readme":"

nativescript-advanced-permissions

\n

\"npm

\n

\"Build

\n

This Plugin is a wrap around Nathanael's nativescript-permissions plugin, while providing IOS Permissions with a matching API.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-advanced-permissions
\n

Usage

\n

Right now to request the Camera Permissions, we use it like this

\n
    
    import { hasCameraPermission, requestCameraPermission } from 'nativescript-advanced-permissions/camera';

    // also supports 'nativescript-advanced-permissions/files';
    // also supports 'nativescript-advanced-permissions/calendar';
    // also supports 'nativescript-advanced-permissions/location';


    if( !hasCameraPermission() ) {
        requestCameraPermission().then((hasPermission) => {
            if( hasPermission ) {
                // do something cool
            } else {
                // don't do something
            }
        });
    }
\n

API

\n

this plugin has been split into smaller 'sub-modules', which when use give access to the specified permissions.

\n

the sub-modules that we currently include are : files, calendar, location, camera

\n

and for each sub-module we follow the same naming convention: requestXPermission/hasXPermission where x is the capitalised sub-module name.

\n

Camera Module

\n

Usage

\n
    import { hasCameraPermission, requestCameraPermission } from 'nativescript-advanced-permissions/camera';

    if( !hasCameraPermission() ) {
        requestCameraPermission().then((hasPermission) => {
            if( hasPermission ) {
                // do something cool
            } else {
                // don't do something
            }
        });
    }
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionReturn TypeDescription
hasCameraPermission()booleanreturns whether or not the application has the permissions to use the camera
requestCameraPermission()Promiserequests the user to allow Camera Permissions, returns a truthy promise if they do, and returns falsy if they don't
\n

Location Module

\n

Usage

\n
    import { goToAppSettings } from 'nativescript-advanced-permissions/core';
    import { hasLocationPermission, requestLocationPermission, isLocationEnabled } from 'nativescript-advanced-permissions/location';

    if ( isLocationEnabled() ) {

        if( !hasCameraPermission() ) {
            requestCameraPermission().then((hasPermission) => {
                if( hasPermission ) {
                    // do something cool
                } else {
                    // don't do something
                }
            });
        }

    } else {
        // tell the user to enable Location Services.
        alert('Please Enable Location Settings...').then(() => goToAppSettings());
    }
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionReturn TypeDescription
hasLocationPermission()booleanreturns whether or not the application has the permissions to use the Location Services
requestLocationPermission()Promiserequests the user to allow Location Permissions, returns a truthy promise if they do, and returns falsy if they don't
isLocationEnabled()booleanreturns whether or not the location services are enabled on device.
\n

Calendar Module

\n

Usage

\n
    import { hasCalendarPermission, requestCalendarPermission } from 'nativescript-advanced-permissions/calendar';
        if( !hasCalendarPermission() ) {
            requestCalendarPermission().then((hasPermission) => {
                if( hasPermission ) {
                    // do something cool
                } else {
                    // don't do something
                }
            });
        }
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionReturn TypeDescription
hasCalendarPermission()booleanreturns whether or not the application has the permissions to use the Calendar
requestCalendarPermission()Promiserequests the user to allow Calendar Permissions, returns a truthy promise if they do, and returns falsy if they don't
\n

License

\n

Apache License Version 2.0, January 2004

\n

Special Thanks!

\n

Thanks to the genius Nathaniel Anderson for the Android Permissions Plugin, which i make use of in this plugin\n Nativescript-Permissions

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook":{"name":"nativescript-facebook","version":"4.2.1","license":"Apache 2.0","readme":"

NativeScript : Facebook SDK \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript plugin, wrapper of native Facebook SDK for Android and iOS.

\n

\"demo\"

\n\n\n\n

Features

\n\n

Installation

\n
tns plugin add nativescript-facebook
\n

Configuration

\n

Android

\n

Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put provider under <application>
\n{facebook_app_id} is your app id

\n
<provider android:authorities=\"com.facebook.app.FacebookContentProvider{facebook_app_id}\"
\t\t\t\t  android:name=\"com.facebook.FacebookContentProvider\"
\t\t\t\t  android:exported=\"true\"/>
\n

iOS

\n

Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains CFBundleURLTypes and LSApplicationQueriesSchemes like below:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
    <dict>
    ...

        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>fb{facebook_app_id}</string>
                </array>
            </dict>
        </array>
\t\t<key>LSApplicationQueriesSchemes</key>
        <array>
            <string>fbapi</string>
            <string>fb-messenger-share-api</string>
            <string>fbauth2</string>
            <string>fbshareextension</string>
        </array>
    </dict>
</plist>
\n
\n

Make sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found here.

\n
\n

Usage

\n

NativeScript Core

\n

Initialization

\n

Call init of nativescript-facebook module on application launch.

\n

app.ts

\n
import * as application from 'application';
import { init } from \"nativescript-facebook\";

application.on(application.launchEvent, function (args) {
    init(\"{facebook_app_id}\");
});

application.start({ moduleName: \"login-page\" });
\n

Login

\n

Facebook Login Button

\n

Add Facebook login button as simple as adding a Facebook:LoginButton tag in your view. Then you can define login event handler name. In the example below - onLogin.

\n

login-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Facebook:LoginButton login=\"{{ onLogin }}\"></Facebook:LoginButton>

    ...

</Page>
\n

Implement onLogin event handler in your view-model. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

\n

login-view-model.ts

\n
import { Observable } from 'data/observable';
import { Facebook:LoginButton } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  onLogin(eventData: LoginEventData) {
    if (eventData.error) {
      alert(\"Error during login: \" + eventData.error.message);
    } else {
      console.log(eventData.loginResponse.token);
    }
  }
}
\n

Custom Login Button

\n

Add a button and define a tap event handler in your login view.

\n

login-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Button tap=\"{{ login }}\" text=\"Log in (custom)\"></Button>

    ...

</Page>
\n

In the view model implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin. In the example below the login method from the plugin is imported as fbLogin.

\n
\n

BEST PRACTICE:\nImport only the methods that you need instead of the entire file. It is crucial when you bundle your app with webpack.

\n
\n

login-view-model.ts

\n
import { Observable } from 'data/observable';
import { login as fbLogin } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  login() {
    fbLogin((err, fbData) => {
      if (err) {
        alert(\"Error during login: \" + err.message);
      } else {
        console.log(fbData.token);
      }
    });
  }

}
\n

Log out

\n

Facebook Logout Button

\n

Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your view. Then you can define logout event handler name. In the example below - onLogout.

\n

home-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Facebook:LoginButton logout=\"{{ onLogout }}\"></Facebook:LoginButton>

    ...

</Page>
\n

Implement onLogout event handler in your view-model.

\n

home-view-model.ts

\n
import { Observable } from 'data/observable';

export class HomeViewModel extends Observable {

  onLogout() {
    console.log(\"logged out\");
  }

}
\n

Custom Logout Button

\n

Add a button and define a tap event handler in your view. In this case - logout

\n

home-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Button tap=\"{{ logout }}\" text=\"Log out (custom)\"></Button>

    ...

</Page>
\n

In the view model implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

\n

home-view-model.ts

\n
import { Observable } from 'data/observable';
import { logout as fbLogout } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  logout() {
    fbLogout(() => {
      console.log(\"logged out\");
    });
  }

}
\n

Share

\n

Create Sharing Content

\n

For sharing, you have to create sharing content first.\nCurrently the available content types are:

\n\n

You can see more information from https://developers.facebook.com/docs/sharing/overview#content and https://developers.facebook.com/docs/sharing/messenger#share-types

\n
import {
    LoginEventData,
    getCurrentAccessToken,
    createShareLinksContent,
    createSharePhotosContent,
    createShareMessageGenericTemplateContent,
    MessageGenericTemplateImageAspectRatio,
    showShareDialog,
    showMessageDialog,
    canShareDialogShow,
    canMessageDialogShow
} from 'nativescript-facebook';

const linkContent = createShareLinksContent('https://www.nativescript.org',
            'Create Native iOS and Android Apps With JavaScript',
            {
                hashtag: '#Nativescript'
            });

// you can also pass in imageUrls as string[] in here
const logoImage = fromResource('logo');
const photosContent = createSharePhotosContent([logoImage], false, {
              hashtag: '#Nativescript'
          });
const GenericTemplate = createShareMessageGenericTemplateContent({
            element: {
                title: 'Nativescript',
                subtitle: 'Create Native iOS and Android Apps With JavaScript',
                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
                button: {
                    title: 'Check Doc',
                    url: 'https://docs.nativescript.org'
                },
                defaultAction: {
                    title: 'Go HomePage',
                    url: 'https://www.nativescript.org'
                }
            },
            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
            pageID: 'testestsett',
            imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
        });
\n

Facebook Share Button

\n
<Facebook:ShareButton content=\"{{ linkContent }}\"></Facebook:ShareButton>
\n

Facebook Send Button

\n

If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

\n
<Facebook:SendButton content=\"{{ genericContent }}\"></Facebook:SendButton>
\n

Show Share Dialog Programmatically

\n

Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

\n
showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});
\n

Hide Custom Button If Can't share

\n

You can use this method to check if the content can be shared and hide the custom button if can't

\n
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
\n
<Button tap=\"{{ onShareDialogPhotos }}\" text=\"Open Share dialog (photos)\" visibility=\"{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}\"></Button>
<Button tap=\"{{ onSendGenericDialog }}\" text=\"Share Message Generic Template\" visibility=\"{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}\"></Button>
\n

NativeScript Angular

\n

Initialization

\n

Call init of nativescript-facebook module on application launch.

\n

app.module.ts

\n
...
import * as application from 'application';
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { NativeScriptFacebookModule } from \"nativescript-facebook/angular\";

let nsFacebook = require('nativescript-facebook');

application.on(application.launchEvent, function (args) {
    nsFacebook.init(\"{facebook_app_id}\");
});
...
@NgModule({
    ...
    imports: [
        AppRoutingModule,
        NativeScriptModule,
        NativeScriptFacebookModule,
        ...
    ],
    ...
})
...
\n

Login

\n

Facebook Login Button

\n

Add Facebook login button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define login event handler name. In the example below - onLogin. Bare in mind the $event argument.

\n

pages/login/login.component.html

\n
<StackLayout>
    <FacebookLoginButton (login)=\"onLogin($event)\"></FacebookLoginButton>
</StackLayout>
\n

Implement onLogin event handler in your component. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

\n

pages/login/login.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"login\",
    templateUrl: \"login.component.html\",
})
export class LoginComponent { 
    onLogin(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert(\"Error during login: \" + eventData.error);
        } else {
            console.log(eventData.loginResponse.token);
        }
    }
}
\n

Custom Login Button

\n

Add a button and define a tap event handler in your login component html.

\n

pages/login/login.component.html

\n
<StackLayout>
    <Button text=\"Login Button (custom)\" (tap)=\"login()\"></Button>
</StackLayout>
\n

In the component implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin.

\n

pages/login/login.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"login\",
    templateUrl: \"login.component.html\",
})
export class LoginComponent { 
    login() {
        Facebook.login((error, fbData) => {
            if (error) {
                alert(\"Error during login: \" + error.message);
            } else {
                console.log(fbData.token);
            }
        });
    }
}
\n

Logout

\n

Facebook Logout Button

\n

Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define logout event handler name. In the example below - onLogout. Bare in mind the $event argument.

\n

pages/home/home.component.html

\n
<StackLayout>
    <FacebookLoginButton (logout)=\"onLogout($event)\"></FacebookLoginButton>
</StackLayout>
\n

Implement onLogout event handler.

\n

pages/home/home.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"home\",
    templateUrl: \"home.component.html\",
})
export class HomeComponent { 
    onLogout(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert(\"Error during login: \" + eventData.error);
        } else {
            console.log(\"logged out\");
        }
    }
}
\n

Custom Logout Button

\n

Add a button and define a tap event handler in your view. In this case - logout

\n

pages/home/home.component.html

\n
<StackLayout>
    <Button text=\"Log out (custom)\" (tap)=\"logout()\"></Button>
</StackLayout>
\n

In the component implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

\n

pages/home/home.component.ts

\n
import { Component } from \"@angular/core\";
import { logout as fbLogout } from \"nativescript-facebook\";

@Component({
    selector: \"home\",
    templateUrl: \"home.component.html\",
})
export class AppComponent { 
  logout() {
    fbLogout(() => {
      console.log(\"logged out\");
    });
  }
}
\n

Share

\n

Create Sharing Content

\n

Read Nativescript chapter for this

\n

Facebook Share Button

\n
<FacebookShareButton [content] = \"linkContent\"></FacebookShareButton>
\n

Facebook Send Button

\n

If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

\n
<FacebookSendButton [content] = \"genericContent\"></FacebookSendButton>
\n

Show Share Dialog Programmatically

\n

Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

\n
showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});
\n

Hide Custom Button If Can't share

\n

You can use this method to check if the content can be shared and hide the custom button if can't

\n
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
\n
<Button (tap) = \"onShareDialogPhotos()\" text = \"Open Share dialog (photos)\" *ngIf = \"canShowPhotosShareDialog\"></Button>
<Button (tap) = \"onSendGenericDialog()\" text = \"Share Message Generic Template\" *ngIf = \"canShowGenericMessageDialog\"></Button>
\n

Login Response

\n

The callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
tokenaccess token which will be used for further authentications
\n

Get Current Access Token

\n

The plugin allows to get the current access token, if any, via getCurrentAccessToken() method.

\n

Basic Analytics

\n

The plugin allows to log analytics events. At the initialization of the application you need to init analytics:

\n
application.on(application.launchEvent, function (args) {
    nsFacebook.init(\"{facebook_app_id}\");
    nsFacebook.initAnalytics();
});
\n

Events logging:

\n
nsFacebook.logEvent('Lead');
\n

Logging event with parameters:

\n
const value = 5;
const parameters = [{
    key: 'value',
    value: value.toString(),
}];

nsFacebook.logEvent(FundsAdded, parameters);
\n

Graph API Example

\n

Once the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.

\n
    \n
  1. Get Facebook id of the logged in user
    2. \n
  2. Get the logged in user avatar (this is kind of workaround of this NativeScript issue. #2176)
    3. \n
\n
export class HomeComponent {
    accessToken: string = appSettings.getString(\"access_token\");
    userId: string;
    username: string;
    avatarUrl: string;

    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
        // Get logged in user's info
        http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/me?access_token=\" + this.accessToken).then((res) => {
            this.username = res.name;
            this.userId = res.id;

            // Get logged in user's avatar
            // ref: https://github.com/NativeScript/NativeScript/issues/2176
            http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/\" + this.userId + \"/picture?type=large&redirect=false&access_token=\" + this.accessToken).then((res) => {
                this.avatarUrl = res.data.url;
                this.ref.detectChanges();
            }, function (err) {
                alert(\"Error getting user info: \" + err);
            });
        }, function (err) {
            alert(\"Error getting user info: \" + err);
        });
    }
\n

This sample is part of the demo apps and can be observed here for Nativescript Code and here for NativeScript + Angular.

\n

Release notes

\n

Check out release notes here

\n

FAQ

\n

Check out our FAQ section here.

\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-advanced-webview":{"name":"nativescript-android-advanced-webview","version":"1.0.3","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Android Advanced Webview

\n

This plugin will allow you to use some of advance feature of Android Webview. This plugin is using following library

\n

Android: Android-AdvancedWebView\n

\n

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do for better :)

\n

Installation

\n
tns plugin add nativescript-android-advanced-webview
\n

Usage (Angular)

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"AdvanceWebview\", () => require(\"nativescript-android-advanced-webview\").AndroidAdvancedWebview);

ngAfterViewInit() {
    let advanceWebview: AndroidAdvancedWebview = this.page.getViewById(\"webview\");

    let optons: AndroidAdvanceWebviewOptions = {
        android: {
            setGeolocationEnabled: false,
            setCookiesEnabled: true,
        }
    }

    advanceWebview.setWebviewOptions(optons);

    advanceWebview.on(\"started\", function (res) {
        console.log(\"started\");
        console.dir(res);
    })
    advanceWebview.on(\"finished\", function (res) {
        console.log(\"finished\");
        console.dir(res);
    })
}
\n

HTML:

\n
<AdvanceWebview id=\"webview\" src=\"https://google.com\"></AdvanceWebview>
\n

Advance Configuration for WebViewClient or WebChromeClient class. You will need to implement your own customized override methods. You can do almost everything here :). You can install tns-platform-declarations for avoiding typescript error. Please check the demo for more details.

\n
advanceWebview.setUpWebViewClient(new MyWebViewTestClient()); //android.webkit.WebViewClient class
advanceWebview.setUpWebChromeClient(new MyWebChromeClient()); //android.webkit.WebChromeClient
\n

Class can be extend like this:

\n
export class MyWebViewTestClient extends android.webkit.WebViewClient {

    constructor() {
        super();
        return global.__native(this);
    }
    public onPageStarted(view: android.webkit.WebView, url: string, favicon: android.graphics.Bitmap): void {
        console.log(\"onPageStarted: \" + url);
    }
    public onPageFinished(view: android.webkit.WebView, url: string): void {
        console.log(\"onPageFinished\");
    }
    public onReceivedError(view: android.webkit.WebView, request, error): void {
        console.log(\"onReceivedError\");
    }
}

export class MyWebChromeClient extends android.webkit.WebChromeClient {

    constructor() {
        super();
        return global.__native(this);
    }

    public onReceivedTitle(view: android.webkit.WebView, title: string): void {
        console.log(title);
    }

    public onPermissionRequest(request: any): void {
        console.log(\"Permission asked !!\");
        request.grant(request.getResources());
    }
}
\n

API

\n

Events: started, finished, error, downloadRequested, externalPageRequest

\n

You can get more events by extending WebViewClient or WebChromeClient class like onReceivedTitle, onPermissionRequest (for allowing microphone) etc. This plugin also has some limitations too. You can check the library repository for more details.

\n
android?: {
    setGeolocationEnabled?: boolean;
    addHttpHeader?: {
        request: string;
        value: string;
    };
    addPermittedHostname?: string;
    preventCaching?: boolean;
    setThirdPartyCookiesEnabled?: boolean;
    setCookiesEnabled?: boolean;
    setMixedContentAllowed?: boolean;
    setDesktopMode?: boolean;
    loadHtml?: boolean;
};
\n

Details here: https://github.com/delight-im/Android-AdvancedWebView

\n

License

\n

MIT

\n

author: Jibon L. Costa

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appurl-handler":{"name":"nativescript-appurl-handler","version":"1.6.1","license":"MIT","readme":"

NativeScript URL Handler Plugin \"apple\" \"android\"

\n

this is a direct fork/rewrite of nativescript-urlhandler by Martin Reinhardt\nIt did not seem to be maintained anymore and was not working as expected

\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import { handleOpenURL, AppURL } from 'nativescript-appurl';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"nativescript-appurl\").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-appurl';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});
\n
\n

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

\n
\n

Installation

\n
$ tns plugin add nativescript-appurl
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add nativescript-appurl@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/@nativescript/core/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-component":{"name":"nativescript-component","version":"1.2.0","license":"MIT","readme":"

nativescript-component

\n

A simple way to create reusable NativeScript components without Angular.

\n

Benefits

\n\n

Installation

\n
npm install nativescript-component --save
\n

Examples

\n

Example 1: sample-groceries app

\n

This example takes the canonical sample-groceries app from NativeScript's getting started guide and updates it to use ES 6 and nativescript-component for a component-based design. For reference, you can compare it to the original version.

\n

Example 2: Nested components

\n

In this example, we'll create a parent component named details-page which uses multiple instances of another component named editable-text to allow a user data record to viewed and edited.

\n

Directory structure

\n
app
 |
 |-- components
     |
     |-- details-page
     |    |
     |    |-- details-page.xml
     |    |-- details-page.js
     |
     |-- editable-text
          |
          |-- editable-text.xml
          |-- editable-text.js
\n

Styles are omitted from this example for simplicity, but it's good practice to group the component's styles in its directory (e.g. details-page/details-page.css and editable-text/editable-text.css). Check out the Nativescript LESS and SASS precompiler plugins for clean styling.

\n

details-page.xml

\n

The details-page component's template consists of an ActionBar with a single control: a button that for toggling the UI from "view" mode to "edit" mode and vice versa; and a GridLayout listing our fields: first name and last name.

\n
<Page navigatingTo=\"onNavigatingTo\" xmlns:e=\"components/editable-text\">

    <Page.actionBar>
        <ActionBar title=\"User Details\">
            <ActionItem text=\"Edit\" ios.position=\"right\" tap=\"edit\" visibility=\"{{ controls.edit, controls.edit ? 'collapsed' : 'visible' }}\"/>
            <ActionItem text=\"Save\" ios.position=\"right\" tap=\"save\" visibility=\"{{ controls.edit, controls.edit ? 'visible' : 'collapsed' }}\"/>
        </ActionBar>
    </Page.actionBar>

    <StackLayout>
        <GridLayout columns=\"*,*\" rows=\"auto,auto\">
            <Label text=\"First Name\" col=\"0\" row=\"0\"/>
            <e:editable-text class=\"name\" record=\"{{ user }}\" fieldName=\"firstName\" controls=\"{{ controls }}\" col=\"1\" row=\"0\"/>

            <Label text=\"Last Name\" col=\"0\" row=\"1\"/>
            <e:editable-text class=\"name\" record=\"{{ user }}\" fieldName=\"lastName\" controls=\"{{ controls }}\" col=\"1\" row=\"1\"/>
        </GridLayout>
    </StackLayout>
</Page>
\n
Things of note:
\n\n

details-page.js

\n

For this example, let's assume that another page navigates to our details-page component by invoking navigate() like so:

\n
frames.topmost().navigate({
    moduleName: 'components/details-page/details-page',
    context: {
        user: new Observable({ firstName: 'Brendan', lastName: 'Eich' })
    }
});
\n

The details-page component's JavaScript file would then look like so:

\n
import { Observable } from 'data/observable';
import Component from 'nativescript-component';

class DetailsPage extends Component {

    /**
    * Place initialization code in `init`, which is automatically called
    * after the parent is initialized and before child components are initialized.
    *
    * @override
    */
    init() {
        this.set('controls', new Observable({ edit: false }));
    }

    /**
    * Switches the UI from view mode to edit mode.
    */
    edit() {
        /** @todo: Check if `this.set('controls.edit', true)` correctly sets the nested proeprty and, if not, implement support for that. */
        let options = this.get('controls');
        options.set('edit', true);
    }

    /**
    * Switches the UI from edit mode to view mode.
    */
    save() {
        let options = this.get('controls');
        options.set('edit', false);
    }
}

DetailsPage.export(exports);
\n
Things of note:
\n\n

editable-text.xml

\n

The editable-text component can be switched from "view" mode to "edit" mode and vice versa by its parent component (details-page), so its template has a read-only <Label/> that is shown in "view" mode and an editable <TextField/> that is shown in "edit" mode.

\n
<StackLayout loaded=\"onLoaded\">
    <Label id=\"label\" visibility=\"{{ controls.edit, controls.edit ? 'collapsed' : 'visible' }}\"/>
    <TextField id=\"input\" visibility=\"{{ controls.edit, controls.edit ? 'visible' : 'collapsed' }}\"/>
</StackLayout>
\n

editable-text.js

\n

The editable-text component accepts three parameters from its parent component:

\n\n
import Component from 'nativescript-component';

class EditableText extends Component {

    /**
    * @override
    */
    init() {
        // Set up the two-way binding for the data record's specified property.
        // This must be done in JavaScript, because NativeScript's XML binding expressions don't currently support dynamic
        // property names.
        let label = this.view.getViewById('label'),
            input = this.view.getViewById('input'),
            record = this.get('record'),
            fieldName = this.get('fieldName');

        label.bind({
            sourceProperty: fieldName,
            targetProperty: 'text',
            twoWay: true
        }, record);

        input.bind({
            sourceProperty: fieldName,
            targetProperty: 'text',
            twoWay: true
        }, record);
    }
}

EditableText.export(exports);
\n
Things of note:
\n\n

For more information, check out the API docs.

\n

Caveats

\n

Embedding a component inside a ListView.itemTemplate or Repeater.itemTemplate

\n\n

Contributing

\n

Find an issue or have an idea for a feature? Feel free to submit a PR or open an issue.

\n

Building

\n

This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

\n
npm run build
\n

There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

\n

Linting

\n
npm run lint
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/biometrics":{"name":"@nativescript/biometrics","version":"1.3.1","license":"Apache-2.0","readme":"

@nativescript/biometrics

\n
npm install @nativescript/biometrics
\n

Replaces @nativescript/fingerprint-auth

\n

This plugin replaces @nativescript/fingerprint-auth

\n

API

\n

Android Compatibility: API 23+

\n

available

\n

JavaScript

\n
var biometricAuthPlugin = require('@nativescript/biometrics');
var biometricAuth = new biometricAuthPlugin.BiometricAuth();

biometricAuth.available().then(function (avail) {
\tconsole.log('Available? ' + avail);
});
\n

TypeScript

\n
import { BiometricAuth, BiometricIDAvailableResult } from \"@nativescript/biometrics\";

class MyClass {
  private biometricAuth: BiometricAuth;

  constructor() {
    this.biometricAuth = new BiometricAuth();
  }

  this.biometricAuth.available().then((result: BiometricIDAvailableResult) => {
    console.log(`Biometric ID available? ${result.any}`);
    console.log(`Touch? ${result.touch}`);
    console.log(`Face? ${result.face}`);
\tconsole.log(`Biometrics? ${result.biometrics}`);
  });
}
\n

verifyBiometric

\n

Note that on the iOS simulator use Features->Face ID menu items to enroll a face and signal successs/failure to recognize a face.\nverifyBiometric will fail on IOS simulator unless pinfallBack is used.

\n
biometricAuth
\t.verifyBiometric({
\t\ttitle: 'Android title', // optional title (used only on Android)
\t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
\t\tfallbackMessage: 'Enter your PIN', // this will be the text to show for the \"fallback\" button on the biometric prompt
\t\tpinFallback: true, // allow fall back to pin/password
\t})
\t.then((result?: BiometricResult) => {
\t\tif (result.code === ERROR_CODES.SUCCESS) {
\t\t\tconsole.log('Biometric ID OK');
\t\t}
\t})
\t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`));
\n

Face ID (iOS)

\n

iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

\n

You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSFaceIDUsageDescription</key>
  <string>For easy authentication with our app.</string>
\n

Security++ (iOS)

\n

Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

\n

So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

\n
biometricAuth.available().then((avail) => {
\tif (!avail) {
\t\treturn;
\t}
\tbiometricAuth.didFingerprintDatabaseChange().then((changed) => {
\t\tif (changed) {
\t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
\t\t} else {
\t\t\t// call the fingerprint scanner
\t\t}
\t});
});
\n

Biometrics and cryptography

\n

Normal operation

\n

If you do not pass any of the options (pinFallback / keyName) to the verify method then the plugin will create a secure key, call the authorization methods to trigger face/fingerprint and then attempt to use the key to encrypt some text. The idea being that the key will not be accessible unless the user has successfully authenticated.

\n

This however is not foolproof and the most secure method is to pass the secret and Keynameoptions to encrypt/decrypt text.

\n

Encrypting/Decrypting with Authentication

\n

The best practice is to use the options to encrypt some secret that is validated independently, this is more secure because the key used for decryption cannot be accessed without proper authentication, therefor your secret cannot be decrypted properly.

\n
    \n
  1. \n

    Encrypt your secret

    \n

    Call verifyBiometric with the relevant properties.

    \n
    biometricAuth
    \t.verifyBiometric({
    \t\ttitle: 'Enter your password',
    \t\tmessage: 'Scan yer finger', // optional
    \t\tpinFallback: false, // do not allow pinFallback to enable crypto operations
    \t\tkeyName: 'MySecretKeyName', // The name of the key that will be created/used
    \t\tsecret: 'The Secret I want encrypted',
    \t})
    \t.then((result) => {
    \t\tconst encryptedText = result.encrypted; // The text encrypted with a key named \"MySecretKeyName\" (Android Only)
    \t\tconst IV = result.iv; // the  initialization vector used to encrypt (Android Only)

    \t\t// For IOS the secret is stored in the keycain
    \t})
    \t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`))    ;
    \n

    For Android the encrypted result and vector would then be stored in your app and used the next time the user logged in be calling the verifyBiometric again:

    \n
    2. \n
  2. \n

    Decrypt your secret

    \n
    biometricAuth
    \t.verifyBiometric({
    \t\ttitle: 'Enter your password',
    \t\tmessage: 'Scan yer finger', // optional
    \t\tkeyName: 'MySecretKeyName', // The name of the key that will be created/used
    \t\tpinFallback: false, // do not allow pinFallback to enable crypto operations
    \t\tandroid: {
    \t\t\tdecryptText: 'The encrypted text retrieved previously',
    \t\t\tiv: 'The IV retrieved previously',
    \t\t},
    \t\tios: { fetchSecret: true }, // Tell IOS to fetch the secret
    \t})
    \t.then((result) => {
    \t\tconst decryptedText = result.decrypted; // The unencrypted secret
    \t\tverifyMySecret(decryptedText); // verify the secret by some means, e.g. a call to a back end server.
    \t})
    \t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`))    ;
    \n
    3. \n
\n

Fallback to Pin

\n

Allowing the user to fallback on lock screen credentials ( pin etc. ) disables cryptography.

\n

Also on android for phones running API < 30 only fingerprint is used, because the old fingerprint api is called.

\n

e.g.

\n
biometricAuth
\t.verifyBiometric({
\t\ttitle: 'Enter your password',
\t\tmessage: 'Scan yer finger', // optional
\t\tfallbackMessage: 'Enter PIN', // optional
\t\tpinFallback: true, // do not allow pinFallback to enable crypto operations
\t\tios: { customFallback: false }, // passing true here will show the fallback message and allow you to handle this in a custom manner.
\t})
\t.then((result) => {
\t\tconsole.log('Fingerprint/ PIN was OK');
\t})
\t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`));
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebookrebound":{"name":"nativescript-facebookrebound","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-facebookrebound :basketball:

\n

NativeScript plugin to provide access to Facebook's Spring Animations for Android.\nThis is just a simple wrapper to remove some of the complexity of Rebound, if you want to provide more "sugar"\non the native methods in the Rebound library then submit a PR :)

\n

FacebookRebound Usage

\n

\"FacebookRebound\"

\n

Installation

\n

npm install nativescript-facebookrebound

\n

Usage

\n

Typically, you'll want to attach a Spring during the loaded event for your view item

\n

XML:

\n
 <Image tap=\"springThis\" height=\"240\" loaded=\"picLoaded\" src=\"~/images/deadpool2.jpg\" stretch=\"aspectFit\" />
\n

JS:

\n
var rebound = require(\"nativescript-facebookrebound\");


function picLoaded (args) {

    // Getting the native android <img src=\"file:///C:\\Users\\Brad\\Source\\Repos\\nativescript-facebookrebound\\screens\\facebookRebound.gif\" />view (android.view.ImageView in this example)
    var view = args.object.android;

    // create a Rebound Spring() ( TENSION, FRICTION ) -- @returns a Spring() if successful
    rebound.createSpring(500, 10).then(function (result) {

        // Now we have a Spring to work with.
        Spring = result;       

        // called whenever the spring is updated
        rebound.onSpringUpdate(function () {
            var mappedValue = com.facebook.rebound.SpringUtil.mapValueFromRangeToRange(Spring.getCurrentValue(), 0, 1, 1, 0.5);
            view.setScaleX(mappedValue);
            view.setScaleY(mappedValue);
        });

        // called whenever the spring leaves its resting state
        rebound.onSpringActivate(function () {
            console.log('setSpringActivate started...');
        });

        // called whenever the spring notifies of displacement state changes
        rebound.onSpringAtEndState(function () {
            console.log('setSpringAtEndState...');
        });

        // called whenever the spring achieves a resting state
        rebound.onSpringAtRest(function () {
            console.log('setSpringAtRest...');
            // Here you could do something like hide a view or trigger more spring if you wanted...
        });

    }, function (err) {
        alert(\"Error in rebound.createSpring(): \" + err);
    });
}
exports.picLoaded = picLoaded;


function springThis(args) {
    // quick boolean to check if we are going up or down
    if (mMovedUp) {
        // setEndValue():  set the rest value to determine the displacement for the spring
        Spring.setEndValue(0);
    } else {
        Spring.setEndValue(1);
    }
    mMovedUp = !mMovedUp;
}
exports.springThis = springThis;
\n

API

\n\n

Once you have a Spring returned from createSpring(), you set your callbacks for the listener events:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collectionview":{"name":"nativescript-collectionview","version":"2.0.36","license":"Apache-2.0","readme":"

# NativeScript CollectionView widget\n\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript CollectionView widget. The CollectionView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-collectionview

\n

This command automatically installs the necessary files, as well as stores nativescript-collectionview as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Instance Methods

\n\n

Usage

\n

You need to add xmlns:gv="nativescript-collectionview" to your page tag, and then simply use <gv:CollectionView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-collectionview\" loaded=\"pageLoaded\">
  <GridLayout>
    <gv:CollectionView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
      <gv:CollectionView.itemTemplate>
        <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
          <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
        </GridLayout>
      </gv:CollectionView.itemTemplate>
    </gv:CollectionView>
  </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { CollectionViewItemEventData } from \"nativescript-collectionview\";

let viewModel: Observable;

export function pageLoaded(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    for (let loop = 0; loop < 200; loop++) {
        items.push({ value: \"test \" + loop.toString() });
    }
    viewModel = new Observable();
    viewModel.set(\"items\", items);

    page.bindingContext = viewModel;
}

export function gridViewItemTap(args: CollectionViewItemEventData) {
    console.log(\"tap index \" + args.index.toString());
}

export function gridViewItemLoading(args: CollectionViewItemEventData) {
    console.log(\"item loading \" + args.index.toString());
}

export function gridViewLoadMoreItems(args: EventData) {
    console.log(\"load more items\");
}
\n

You can also have multiple templates the same way you add them in the builtin ListView control:

\n
<gv:CollectionView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
    <gv:CollectionView.itemTemplates>
        <template key=\"odd\">
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>

        <template key=\"even\">
            <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>
    </gv:CollectionView.itemTemplates>
</gv:CollectionView>
\n
export function templateSelector(item: any, index: number, items: any) {
    return index % 2 === 0 ? \"even\" : \"odd\";
}
\n

Usage in Angular

\n

Import CollectionViewModule in your NgModule:

\n
import { CollectionViewModule } from 'nativescript-collectionview/angular';

@NgModule({
    //......
    imports: [
        //......
        CollectionViewModule,
        //......
    ],
    //......
})
\n

Example Usage

\n
// app.module.ts
import { CollectionViewModule } from \"nativescript-collectionview/angular\";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        CollectionViewModule,
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }
\n
<!-- my.component.html -->
<GridLayout class=\"page\">
  <CollectionView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
    <ng-template let-item=\"item\" let-odd=\"odd\">
      <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
      </StackLayout>
    </ng-template>
  </CollectionView>
</GridLayout>
\n

If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control. The only difference is that due to current limitations instead of using the nsTemplateKey directive you need to use the cvTemplateKey directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the CollectionView as well)

\n
<CollectionView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
    <ng-template cvTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>
</CollectionView>
\n

Working with Webpack+Uglify

\n

In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The CollectionView widget exports those and you need to add them to the mangle exclude option of the uglifyjs plugin in the webpack.common.js file:

\n
var gridViewMangleExcludes = require(\"nativescript-collectionview/uglify-mangle-excludes\").default;
//......
module.exports = function (platform, destinationApp) {
    //......
    if (process.env.npm_config_uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({
            minimize: true
        }));

        //Work around an Android issue by setting compress = false
        var compress = platform !== \"android\";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: nsWebpack.uglifyMangleExcludes.concat(gridViewMangleExcludes),
            },
            compress: compress,
        }));
    }
   //......
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-collectionview
$ cd nativescript-collectionview
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-seed":{"name":"nativescript-plugin-seed","version":"1.0.2","license":"MIT","readme":"

Develop a NativeScript plugin now (w/ TypeScript)

\n

Getting started

\n
    \n
  1. Download a zip of this seed.
    2. \n
  2. npm install -g typescript
    3. \n
  3. cd ... path/to/unzip/folder ...
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Prepare

\n

You'll want to change a couple things right away:

\n\n
\"preparedemo\": \"npm run build; cd demo; tns plugin remove nativescript-yourplugin; tns plugin add ..; tns install\",
\n

Replace nativescript-yourplugin with your actual plugin name.

\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a gaurantee to remove the plugin and add it back
tns plugin remove nativescript-yourplugin // replace with your plugin name
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cache":{"name":"nativescript-cache","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-cache/blob/master/LICENSE"},"readme":"

nativescript-cache

\n

nativescript-cache is a persistent caching plugin for NativeScript. Use it to store arbitrary data locally for fast access.

\n

Built atop TMCache on iOS, and SharedPreferences on Android.

\n

Installation

\n
tns plugin add nativescript-cache
\n

Usage

\n

The cache plugin supports the following methods:

\n\n

Note that the value of the cache entry must be a string. If you want to store complex data, use JSON.stringify before putting the data in the cache, and JSON.parse on the way out.

\n
var cache = require(\"nativescript-cache\");

cache.set(\"key1\", \"val1\");
cache.get(\"key1\"); // \"val1\"

cache.delete(\"key1\");
cache.get(\"key1\"); // undefined

cache.set(\"key2\", \"val2\");
cache.set(\"key3\", \"val3\");
cache.clear();
cache.get(\"key3\"); // undefined
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@randock/ui-charts":{"name":"@randock/ui-charts","version":"0.2.4","license":"Apache-2.0","readme":"

@nativescript/ui-charts \"apple\" \"android\"

\n\n

Nativescript wrapper for Highcharts iOS and Android SDKs

\n\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add @nativescript/ui-charts
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/demos for different chart types.

\n

NativeScript Core

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:uc=\"@nativescript/ui-charts\">  <!-- Don't forget to declare the namespace -->
  <GridLayout>
    <uc:UIChartsView id=\"chartView\" loaded=\"chartViewLoaded\" />
  </GridLayout>
</Page>
\n
export function chartViewLoaded(args) {
  chartView = args.object;
  chartView.setOptions(viewModel.get('chartOptions'));
}
\n

The chartOptions is a HICharts options object,\nrefer to https://www.highcharts.com/demo/ for inspiration, and also checkout https://api.highcharts.com/highcharts/ for API reference

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-icon-changer":{"name":"nativescript-app-icon-changer","version":"1.0.4","license":"MIT","readme":"

NativeScript App Icon Changer

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n\n
\n

That's the demo app in action, switching app icons like a boss!

\n
\n

Installation

\n
tns plugin add nativescript-app-icon-changer
\n

API

\n

requiring / importing the plugin

\n

All examples below assume you're using TypeScript, but here's how to require the plugin with regular JS as well:

\n

JavaScript

\n
var AppIconChangerPlugin = require(\"nativescript-app-icon-changer\");
var appIconChanger = new AppIconChangerPlugin.AppIconChanger();
\n

TypeScript

\n
import { AppIconChanger } from \"nativescript-app-icon-changer\";

export class MyClass {
  private appIconChanger: AppIconChanger;
  
  constructor() {
    this.appIconChanger = new AppIconChanger();
  }
}
\n

isSupported

\n

Only iOS 10.3 and up support this feature, so you may want to check beforehand:

\n
this.appIconChanger.isSupported().then(
    supported => console.log(`Supported: ${supported}`));
\n

changeIcon

\n

To be able to switch to a different icon add it to App_Resources/iOS and App_Resources/iOS/Info.plist as explained below and pass iconName to changeIcon.

\n

To reset to the default icon, use iconName: null.

\n

Note 1: iOS will notify the user the icon changed, but this plugin allows you to suppress that message (it's the default even). It's probably not what Apple would like you to do, but no apps have been disapproved with suppression enabled.

\n

Note 2: Changing the app icon is only allowed when the app is in the foreground, so forget about that weather app which silently updates its app icon.

\n
this.appIconChanger.changeIcon({
  iconName: \"icon-blue\", // or null to reset to the default
  suppressUserNotification: true
});
\n

currentAlternateIcon

\n

Want to know whether or not the app currently has an alternate icon configured? And if so, what its name is? Then use this:

\n
// synchronous
const currentAppIconName: string = this.appIconChanger.currentAlternateIcon();
\n

Preparing your app for icon switching

\n

Apple doesn't allow switching to arbitrary icons, so they must be bundled with your app before releasing the app to the store.

\n

Add the icons you'd like your users to be able to switch to for all relevant resolutions as usual.

\n
\n

Note that you DON'T NEED to provide all those resolutions; you could get away with adding just the largest resolution and refer to it in the plist file. iOS will scale it down to other resolutions for you.

\n
\n\n

Then reference those icons in App_Resources/iOS/Info.plist as well:

\n
<plist>
<dict>

  <!-- Add or merge this bit -->
  <key>CFBundleIcons</key>
  <dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
      <!-- The name you use in code -->
      <key>icon-blue</key>
      <dict>
        <key>UIPrerenderedIcon</key>
        <true/>
        <key>CFBundleIconFiles</key>
        <array>
          <!-- The actual filenames. Don't list the @2x/@3x files here -->
          <string>icon-blue-57</string>
          <string>icon-blue-60</string>
          <string>icon-blue-72</string>
          <string>icon-blue-76</string>
        </array>
      </dict>
    </dict>
  </dict>

</dict>
</plist>
\n
\n

Need iPad support as well? Just duplicate that plist config and change <key>CFBundleIcons</key> to <key>CFBundleIcons~ipad</key>.

\n
\n

Want to see this configured in an actual project? Look at the demo app to see the gory details.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triarensplugins/damage-reporting":{"name":"@triarensplugins/damage-reporting","version":"1.0.0","license":"Apache-2.0","readme":"

@triarensplugins/damage-reporting

\n
npm install @triarensplugins/damage-reporting
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-autocomplete":{"name":"nativescript-autocomplete","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/triniwiz/nativescript-autocomplete/blob/master/LICENSE"},"readme":"

Autocomplete for NativeScript

\n

##Install

\n
npm install nativescript-autocomplete
\n

##Usage

\n

IMPORTANT: Make sure you include xmlns:ac="nativescript-autocomplete" on the Page element

\n

e.g

\n
item:Array<string> = ['1','2','3','4']
\n
itemTapped(args){
    const eventName = args.eventName;
    const data = args.data;
    const view = args.view;
    const index = args.index;
    const object = args.object;
}
\n
<ac:Autocomplete  items=\"{{list}}\" itemTap=\"itemTapped\"/>
\n

#ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n
Android
\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-cli":{"name":"@tremho/jove-cli","version":"0.7.0-pre-release.67","license":"UNLICENSED","readme":"

Jove-cli

\n

Command-line tools for Jove development\n(formerly Thunderbolt)

\n

install under --save-dev

\n

project\nwiki

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-calendar":{"name":"nativescript-calendar","version":"3.0.0","license":"MIT","readme":"

NativeScript Calendar Plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

The Calendar plugin allows you to manipulate events in the user's native Calendar. You can find, create and delete events in either the default or a custom calendar.

\n

If you're looking for an awesome in-app UI for the native calendar, then check this out.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativeScript 7

\n
tns plugin add nativescript-calendar
\n

NativeScript 6

\n
tns plugin add nativescript-calendar@2.2.1
\n

iOS runtime permission reason

\n

You probably have seen a permission popup like this before (this plugin will trigger one as well, automatically):

\n\n

iOS 10+ requires not only this popup, but also a reason. In this case it's "Custom message from App_Resources".

\n

You can provide your own reason for accessing the calendar by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSCalendarsUsageDescription</key>
  <string>My reason justifying fooling around with your calendar</string>
\n

To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specified yourself. You're welcome.

\n

TypeScript Usage

\n

Of course you can use this plugin with TypeScript, just import the plugin and use\nthe functions summed up below like this:

\n
import * as Calendar from \"nativescript-calendar\";

// example for listCalendars:
Calendar.listCalendars().then(/* .. */);
\n

Usage

\n

If you want a quickstart, clone our demo app.

\n

createEvent

\n
  var Calendar = require(\"nativescript-calendar\");

  // Only the `title`, `startDate` and `endDate` are mandatory, so this would suffice:
  var options = {
    title: 'Get groceries',
    // Make sure these are valid JavaScript Date objects.
    // In this case we schedule an Event for now + 1 hour, lasting 1 hour.
    startDate: new Date(new Date().getTime() + (60*60*1000)),
    endDate: new Date(new Date().getTime() + (2*60*60*1000))
  };

  // You can however add lots of properties to enrich the Event:
  options.location = 'The shop';
  options.notes = 'This event has reminders';

  // iOS has a separate 'url' field, but on Android the plugin appends this to the 'notes' field.
  options.url = 'http://my.shoppinglist.com';

  // You can also override the default reminder(s) of the Calendar (in minutes):
  options.reminders = {
    first: 30,
    second: 10
  };

  // You can make this Event recurring (this one repeats every other day for 10 days):
  options.recurrence = {
    frequency: \"daily\", // daily | weekly | monthly | yearly
    interval: 2, // once every 2 days
    endDate: new Date(new Date().getTime() + (10*24*60*60*1000)) // 10 days
  };

  // Want to use a custom calendar for your app? Pass in the 'name'.
  // If the name doesn't yet exist the plugin will create it for you.
  options.calendar = {
    name: \"NativeScript Cal\",
    // the color, in this case red
    color: \"#FF0000\",
    // Can be used on Android to group the calendars. Examples: Your app name, or an emailaddress
    accountName: \"My App Name\"
  };

  Calendar.createEvent(options).then(
      function(createdId) {
        console.log(\"Created Event with ID: \" + createdId);
      },
      function(error) {
        console.log(\"Error creating an Event: \" + error);
      }
  );
\n

If you want an 'all day event', make sure you set the dates to midnight like this:

\n
  var d = new Date();
  d.setHours(0);
  d.setMinutes(0);
  d.setSeconds(0);

  // this will create an 'all day event' for tomorrow
  var startDate = new Date(d.getTime() + (24*60*60*1000));
  var endDate = new Date(d.getTime() + (2*24*60*60*1000));
  // .. now use these properties in the options object
\n

findEvents

\n
  var options = {
    // when searching, dates are mandatory - the event must be within this interval
    startDate: new Date(new Date().getTime() - (50*24*60*60*1000)),
    endDate: new Date(new Date().getTime() + (50*24*60*60*1000))
  };

  // if you know the Event ID, set it here:
  options.id = '123456';

  // you can optionally pass in a few other properties, any event containing these will be returned:
  options.title = 'groceries';
  options.location = 'foo';
  options.notes = 'bar'; // iOS only

  Calendar.findEvents(options).then(
      function(events) {
        console.log(JSON.stringify(events));
      },
      function(error) {
        console.log(\"Error finding Events: \" + error);
      }
  );
\n

The returned 'events' object is an array of JSON events with these properties:

\n
id
title
location
notes
url
startDate
endDate
allDay
calendar {id, name}
reminders {minutes}
recurrence {frequency, interval, endDate}
attendees {name, email, url, status, role, type}
\n

deleteEvents

\n

Usage is largely the same as findEvents, only the result is a bit different ;)

\n
  var options = {
    // when searching, dates are mandatory - the event must be within this interval
    startDate: new Date(new Date().getTime() - (50*24*60*60*1000)),
    endDate: new Date(new Date().getTime() + (50*24*60*60*1000))
  };

  // if you know the Event ID, set it here:
  options.id = '123456';

  // you can optionally pass in a few other properties, any event containing these will be deleted:
  options.title = 'groceries'; // events _including_ this string will be included in the selection
  options.location = 'foo';
  options.notes = 'bar'; // iOS only

  Calendar.deleteEvents(options).then(
      function(deletedEventIds) {
        console.log(JSON.stringify(deletedEventIds));
      },
      function(error) {
        console.log(\"Error deleting Events: \" + error);
      }
  )
\n

listCalendars

\n
  Calendar.listCalendars().then(
      function(calendars) {
        // a JSON array of Calendar objects is returned, each with an 'id' and 'name'
        console.log(\"Found these Calendars on the device: \" + JSON.stringify(calendars));
      },
      function(error) {
        console.log(\"Error while listing Calendars: \" + error);
      }
  )
\n

deleteCalendar

\n
TypeScript
\n
import * as Calendar from \"nativescript-calendar\";

Calendar.deleteCalendar({
  name: \"My Calendar name\"
}).then(id => {
  // id is null if nothing was deleted
  console.log(`Deleted Calendar with id ${id}`);
});
\n

Breaking changes in 2.0.0

\n

See CHANGELOG.md.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/licenses":{"name":"@nativescript-community/licenses","version":"2.0.7","license":"Apache-2.0","readme":"

[npm-image]: http://img.shields.io/npm/v/@nativescript-community/licenses.svg\n[npm-url]: https://npmjs.org/package/@nativescript-community/licenses\n[downloads-image]: http://img.shields.io/npm/dm/@nativescript-community/licenses.svg

\n

Installation

\n

On iOS you need to run this first:

\n
gem install cocoapods-acknowledgements
\n

Usage

\n

This plugin is a plugin to easily integrate licenses used your apps.\nThe plugin will automatically generate licenses.json\nYou simply need to load the licenses.json from anywhere in your app using either require('licenses.json') or require('~/licenses.json')\nYou can then simply require that file to use it in your app.\nHere is an example JSON file format (moduleDescription not present on Android):

\n
{
    \"dependencies\": [
        {
            \"moduleName\": \"com.airbnb.android:lottie\",
            \"moduleDescription\": \"description\",
            \"moduleUrl\": \"https://github.com/airbnb/lottie-android\",
            \"moduleVersion\": \"3.4.2\",
            \"moduleLicense\": \"Apache License, Version 2.0\",
            \"moduleLicenseUrl\": \"https://www.apache.org/licenses/LICENSE-2.0\"
        }
    ]
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-login-linkedin":{"name":"nativescript-social-login-linkedin","version":"3.1.0","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Social Login

\n

NativeScript module for social (token based) log-ins.

\n

\"Donate\"

\n

Implementations

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderAndroidiOS
GoogleYesYes
FacebookYesYes
TwitterNoNo
\n

License

\n

MIT license

\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Changes

\n

v1.4.x to 1.5.x

\n

Google

\n\n

v1.3.x to 1.4.x

\n

Facebook

\n\n

v1.2.x to 1.3.x

\n

Google

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-social-login
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n
Permissions
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <!-- ... -->

    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <!-- ... -->
</manifest>
\n
Strings
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
    <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>
\n

Setup Android Google Sign in for Debug Builds

\n
    \n
  1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
    2. \n
\n
keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
\n

The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

\n
    \n
  1. Create an app here on Google Developer site.\n
      \n
    • Enter the App name. This can be anything but it will display to the user who is authenticating.
      • \n
    • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
      • \n
    • Next configure the Google services.
      • \n
    • Select Google Sign-In
      • \n
    • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
      • \n
    • Enable Google Sign-In\n
        \n
      • If only enabling Google Sign-In you do not need the configuration file inside your application.
        • \n
      \n
      • \n
    \n
    2. \n
  2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
    3. \n
\n

iOS

\n

GoogleService-Info.plist

\n

You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<!-- FACEBOOK AND GOOGLE LOGIN -->
<key>CFBundleURLTypes</key>
    <array>
        <!-- GOOGLE START -->
\t\t<dict>
\t\t\t<key>CFBundleTypeRole</key>
\t\t\t<string>Editor</string>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
\t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                <!-- Get it from your GoogleService-Info.plist -->
                <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t\t</array>
\t\t</dict>
\t\t<!-- GOOGLE END -->
\t\t<!-- FACEBOOK START -->
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
        <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>FacebookAppID</key>
    <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
    <key>FacebookDisplayName</key>
    <string>FacebookLoginDemo</string>
    <!-- FACEBOOK END -->
\n

https://developers.facebook.com/docs/ios

\n

Application main file

\n

Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

\n
TypeScript
\n
if (application.ios) {

  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      let gglDelegate = false;

      try {
        const errorRef = new interop.Reference();
        GGLContext.sharedInstance().configureWithError(errorRef);

        const signIn = GIDSignIn.sharedInstance();
        gglDelegate = true;
      } catch (error) {
        console.log(error);
      }

      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

      return gglDelegate || fcbDelegate;
    }

    applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
      const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

      return fcbDelegate || gglDelegate;
    }
  }

  application.ios.delegate = MyDelegate;
}
\n
JavaScript
\n
if (application.ios) {
    var MyDelegate = (function (_super) {
        __extends(MyDelegate, _super);
        function MyDelegate() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            var gglDelegate = false;
            try {
                var errorRef = new interop.Reference();
                GGLContext.sharedInstance().configureWithError(errorRef);
                var signIn = GIDSignIn.sharedInstance();
                gglDelegate = true;
            }
            catch (error) {
                console.log(error);
            }
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
            return gglDelegate || fcbDelegate;
        };
        MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
            var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
            return fcbDelegate || gglDelegate;
        };
        return MyDelegate;
    }(UIResponder));
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    application.ios.delegate = MyDelegate;
}
\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
import SocialLogin = require(\"nativescript-social-login\");
\n

Initialize

\n
import Application = require(\"application\");
import SocialLogin = require(\"nativescript-social-login\");

if (Application.android) {
    Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
        let result = SocialLogin.init({
            activity: event.activity,
        });
    });
}
\n

The init() function receives an (optional) object with the following structure:

\n
interface ILoginConfiguration {
    /**
     * The underlying custom activity to use.
     */
    activity?: android.app.Activity;

    /**
     * Facebook specific configuration.
     */
    facebook?: {
        /**
         * Initialize Facebook or not. Default: (true)
         */
        initialize?: boolean;
        /**
         * Should Logout current Facebook session or not. Default: (false)
         */
        clearSession?: boolean;
    }

    /**
     * Google specific configuration.
     */
    google?: {
        /**
         * Initialize Google or not. Default: (true)
         */
        initialize?: boolean;

       /**
        * The server client ID for requesting server auth token.
        */
        serverClientId?: string;

        /**
         * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
         * It will be set in authCode property of result object.
         *
         * If false (default), it will request for token id. it will be set in authToken property of result object.
         */
        isRequestAuthCode?: boolean;
    }

    /**
     * Fallback action for the result of the underlying activity.
     */
    onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
}
\n

The result object that is returned by init() has the following structure:

\n
interface IInitializationResult {
    facebook: {
        error: any,
        isInitialized: boolean,
    },
    google: {
        error: any,
        isInitialized: boolean,
    },
    twitter: {
        error: any,
        isInitialized: boolean,
    }
}
\n

The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

\n

The error properties are only defined if an exception was thrown while initialization.

\n

Login

\n

If you want to use a login functions you have to submit a callback that receives an object with the following structure:

\n
interface ILoginResult {
    /**
     * Gets the auth token (if requested).
     */
    authToken?: string;

    /**
     * Offline auth code used by servers to request new auth tokens.
     */
    authCode?: string;

    /**
     * Gets the result code.
     */
    code: LoginResultType;

    /**
     * The display name.
     */
    displayName?: string;

    /**
     * First name of the user.
     */
    firstName?: string;

    /**
     * Last name of the user.
     */
    lastName?: string;

    /**
     * Gets the error (if defined).
     */
    error?: any;

    /**
     * The ID of the user.
     */
    id?: string;

    /**
     * The photo URL.
     */
    photo?: string;

    /**
     * Gets the underlying provider.
     */
    provider?: string;

    /**
     * The user token, like email address.
     */
    userToken?: string;
}
\n

The following functions are implemented:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderProvider
loginWithFacebookFacebook
loginWithGoogleGoogle
\n

Example

\n
SocialLogin.loginWithFacebook(
    (result) => {
        console.log(\"code: \" + result.code);
        console.log(\"error: \" + result.error);
        console.log(\"userToken: \" + result.userToken);
        console.log(\"displayName: \" + result.displayName);
        console.log(\"photo: \" + result.photo);
        console.log(\"authToken: \" + result.authToken);
    }
);
\n

It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

\n
import { Component, NgZone } from \"angular/core\";

@Component({})
class SigninComponent {
    constructor(private ngZone: NgZone) {}

    login() {
        SocialLogin.loginWithFacebook((result) => {
            this.ngZone.run(() => {
                console.log(\"code: \" + result.code);
                console.log(\"error: \" + result.error);
                console.log(\"userToken: \" + result.userToken);
                console.log(\"displayName: \" + result.displayName);
                console.log(\"photo: \" + result.photo);
                console.log(\"authToken: \" + result.authToken);
            });
        });
    }
}
\n

There is also a great example by dgomezs that shows how to configure your app for Facebook.

\n

Logging

\n

If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

\n
SocialLogin.addLogger(function(msg: any, tag: string) {
    console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
});
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swipe-layout":{"name":"nativescript-swipe-layout","version":"2.0.1","license":"Apache-2.0","readme":"

Nativescript-swipe-layout

\n

\"npm\"\n\"npm\"

\n

\"NPM\"

\n

Simple swipeable layout, which allow you to drag it, detect swipe events, and perform swipe animations.

\n

Developed with :heart: by the team NativeBaguette 🥖

\n

\n

Installation

\n
tns plugin add nativescript-swipe-layout
\n

Usage

\n

NativeScript with Angular

\n

Here is an example of how you can use this plugin to build a tinder like stack of cards. Here, the plugin nativescript-cardview is used.

\n

XML

\n

app.component.html

\n
<ActionBar title=\"swipe-layout\" icon=\"\" class=\"action-bar\">
</ActionBar>
<GridLayout rows=\"*, auto\" columns=\"*\" backgroundColor=\"#77849F\">
    <SwipeLayout *ngFor=\"let card of cards\" row=\"0\" colSpan=\"3\" col=\"0\" (loaded)=\"swipeLayoutLoaded($event)\" (swipeDown)=\"swipeDownCallback($event)\" (swipeUp)=\"swipeUpCallback($event)\" [animationState]=\"swipeLayoutAnimated\" [gestureMode]=\"gestureMode\">
        <CardView width=\"300\" height=\"300\" backgroundColor=\"white\" margin=\"10\" elevation=\"40\" radius=\"5\">
            <GridLayout rows=\"200, auto\" columns=\"*\">
                <image [src]=\"card.img\" stretch=\"aspectFill\" colSpan=\"3\" row=\"0\"></image>
                <label [text]=\"card.test\" class=\"info\" textWrap=\"true\" row=\"1\" colSpan=\"3\" class=\"p-20\"></label>
            </GridLayout>
        </CardView>
    </SwipeLayout>
    <GridLayout row=\"1\" rows=\"*\" columns=\"auto, auto, auto\">
        <Button (tap)=\"like()\" row=\"0\" col=\"0\" class=\"p-20\" class=\"btn btn-primary p-20\" text=\"LIKE\">
                </Button>
        <Button text=\"SUPER\" (tap)=\"super()\" row=\"0\" col=\"1\" class=\"btn p-20\" backgroundColor=\"#5BD6BB\" color=\"white\"></Button>
        <Button text=\"DECLINE\" (tap)=\"decline()\" row=\"0\" col=\"2\" class=\"btn p-20\" backgroundColor=\"#B33A3A\" color=\"white\"></Button>
    </GridLayout>
</GridLayout>
\n

Component

\n

app.component.ts

\n
import { Component, ElementRef, ViewChild } from \"@angular/core\";
.
. // other imports
.
registerElement(\"CardView\", () => CardView);
registerElement('SwipeLayout', () => SwipeLayout);

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {
    private _swipeLayouts: Array<SwipeLayout>;
    private currentSwipeLayout: SwipeLayout;
    public swipeLayoutAnimated: ANIMATION_STATE;
    public gestureMode: GESTURE_MODE;

    public cards: Array<any> = [{ // dumb cards
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    },
    {
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    }, {
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    }, {
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    }, {
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    }, {
        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
        test: \"Batman is pretty cool right?\"
    }]

    constructor(private fonticon: TNSFontIconService) {
        this._swipeLayouts = new Array();
        this.swipeLayoutAnimated = ANIMATION_STATE.ON_EVENTS; // Will animate only on swipe down and up events
        this.gestureMode = GESTURE_MODE.DRAG; // Cards will be draggable
    }

    swipeLayoutLoaded(event) {
        this._swipeLayouts.push(<SwipeLayout>event.object); // Since it's an Array everytime a SwipeLayout load we add it
    }

    ngAfterViewInit(): void {
        this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
    }

    private next() {
        this._swipeLayouts.pop();
        this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
    }
    
    swipeLeftCallback(swipeLeftEvent: SwipeLeftEventData) { // never called (not binded to the XML)
        console.log('swipeLeft');
        this.next();
    }

    swipeRightCallback(swipeRightEvent: SwipeRightEventData) { // never called (not binded to the XML)
        console.log('swipeRight');
        this.next();
    }
    
    swipeUpCallback(swipeUpEvent: SwipeUpEventData) { // called once the swipe up animation is done
        console.log('swipeUp');
        this.next();
    }
    
    swipeDownCallback(swipeDownEvent: SwipeDownEventData) { // called once the swipe down animation is done
        console.log('swipeDown');
        this.next();
    }

    decline() { // red button  on tap callback
        let that = this;
        this.currentSwipeLayout.animateSwipeRight().then(() => {
            that.next();
            console.log('swipeLeft done');
        });
    }


    like() { // blue button on tap callback
        let that = this;
        this.currentSwipeLayout.animateSwipeLeft().then(() => {
            that.next();
            console.log('swipeRight done');
        });
    }

    super() { // green button on tap callback
        let that = this;
        this.currentSwipeLayout.animateSwipeUp().then(() => {
            that.next();
            console.log(\"swipeUp done\");
        });
    }
}
\n

API

\n

Further reading here.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
swipeRightfunctionnullCallback called when the layout is swiped to the right and the swipe animation is done.
swipeLeftfunctionnullCallback called when the layout is swiped to the left and the swipe animation is done.
swipeUpfunctionnullCallback called when the layout is swiped up and the swipe animation is done.
swipeDownfunctionnullCallback called when the layout is swiped down and the swipe animation is done.
animationStateANIMATION_STATEANIMATION_STATE.ALWAYSEnable to perform animation when swipe events are fired, not at all or only on swipe events with a callback
gestureModeGESTURE_MODEGESTURE_MODE.SWIPEAllow to choose between the drag behavior or the swipe behavior
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnParametersDescription
animateSwipeRightPromise<void>NoneMethod to manually start the swipe right animation.
animateSwipeLeftPromise<void>NoneMethod to manually start the swipe left animation
animateSwipeUpPromise<void>NoneMethod to manually start the swipe up animation
animateSwipeDownPromise<void>NoneMethod to manually start the swipe down animation
swipePromise<void>(swipeEvent: SwipeEventData)Method to manually start the swipe animation but has a parameter. From the direction given, will perform the right animation
\n

All the method abose can be override, you can customise the animations as you want. If you wan't to override the animation which is performed on a swipe event you'll have to override the swipe method, since it's the one which is called when the event is fired :fire:

\n

NativeBaguette 🥖

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Rachid\"Jean-Baptiste\"triniwiz\"\"BradMartin\"\"JenLooper\"
rkhayyatrhanbtriniwizbradmartinjlooper
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appurl":{"name":"nativescript-appurl","version":"1.3.5","license":"MIT","readme":"

NativeScript URL Handler Plugin \"apple\" \"android\"

\n

this is a direct fork/rewrite of nativescript-urlhandler by Martin Reinhardt\nIt did not seem to be maintained anymore and was not working as expected

\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import { handleOpenURL, AppURL } from 'nativescript-appurl';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"nativescript-appurl\").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-appurl';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});
\n
\n

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

\n
\n

Installation

\n
$ tns plugin add nativescript-appurl
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add nativescript-appurl@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/@nativescript/core/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-https":{"name":"nativescript-akylas-https","version":"3.0.1","license":"MIT","readme":"

NativeScript-HTTPS

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

The definitive way to hit HTTP based APIs in Nativescript.

\n

Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

\n
\n

Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

\n
\n

A drop-in replacement for the default http module.

\n

Features

\n\n

FAQ

\n
\n

What the flip is SSL pinning and all this security mumbo jumbo?

\n
\n

How to make your apps more secure with SSL pinning.

\n
\n

Do I have to use SSL pinning?

\n
\n

No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

\n

Demo

\n
git clone https://github.com/EddyVerbruggen/nativescript-https
cd nativescript-https/src
npm run demo.ios
npm run demo.android
\n

Installation

\n

Add tns-platform-declarations for Android and iOS to your references.d.ts!

\n
/// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
/// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
\n

We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

\n

Install the plugin:

\n
tns plugin add nativescript-https
\n

Examples

\n

Hitting an API using GET method

\n
import * as Https from 'nativescript-https'
Https.request({
\turl: 'https://httpbin.org/get',
\tmethod: 'GET',
\ttimeout: 30 // seconds (default 10)
}).then(function(response) {
\tconsole.log('Https.request response', response)
}).catch(function(error) {
\tconsole.error('Https.request error', error)
})
\n

Configuration

\n

Installing your SSL certificate

\n

Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

\n

\"Installing

\n

Enabling SSL pinning

\n
import { knownFolders } from 'file-system'
import * as Https from 'nativescript-https'
let dir = knownFolders.currentApp().getFolder('assets')
let certificate = dir.getFile('httpbin.org.cer').path
Https.enableSSLPinning({ host: 'httpbin.org', certificate })
\n

Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

\n

Disabling SSL pinning

\n
import * as Https from 'nativescript-https'
Https.disableSSLPinning()
\n

All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

\n

useLegacy

\n

There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

\n\n

Cookie

\n

By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

\n

Enabling Cache

\n
import { knownFolders, path } from '@nativescript/core/file-system';
import * as Https from 'nativescript-https'
Https.setCache({
    diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
    diskSize: 10 * 1024 * 1024 // 10 MiB
});

/// later on when calling your request you can use the cachePolicy option
\n

Multipart form data

\n

If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

\n
{
\tdata: any
    parameterName: string,
    fileName?: string
    contentType?: string
}
\n

if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

\n

Options

\n
export interface HttpsSSLPinningOptions {
\thost: string
\tcertificate: string
\tallowInvalidCertificates?: boolean
\tvalidatesDomainName?: boolean
\tcommonName?: string
}
import { HttpRequestOptions } from 'tns-core-modules/http';
export interface HttpsRequestOptions extends HTTPOptions{
\tuseLegacy?: boolean
\tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
\tonProgress?: (current: number, total: number) => void
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SSLPinning OptionDescription
host: stringThis must be the request domain name eg sales.company.org.
commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
certificate: stringThe uri path to your .cer certificate file.
allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Requests OptionDescription
useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
`cachePolicy?: 'noCache''onlyCache'
onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
\n

Webpack / bundling

\n

Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

\n

iOS Troubleshooting

\n
\n

Please educate yourself on iOS's App Transport Security before starting beef!

\n
\n

If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
\n
\n

This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

\n
\n

Android troubleshooting

\n

If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

\n

Thanks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhoWhy
Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-shimmer":{"name":"@nstudio/nativescript-shimmer","version":"1.0.7","license":"Apache-2.0","readme":"

@nstudio/nativescript-shimmer

\n

Shimmer for NativeScript

\n
npm install @nstudio/nativescript-shimmer
\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:ui=\"@nstudio/nativescript-shimmer\">
  ...
    <ui:Shimmer>
        <GridLayout>
            <ContentView height=\"20\" width=\"65%\" backgroundColor=\"#333\"/>
        </GridLayout>
    </ui:Shimmer>
\n

It can also be registered with various flavors, for example with Angular:

\n
import { registerElement } from '@nativescript/angular';
import { Shimmer } from '@nstudio/nativescript-shimmer';

registerElement('Shimmer', () => Shimmer);

// can now be used in components:
<Shimmer>
    <GridLayout>
        <ContentView height=\"20\" width=\"65%\" backgroundColor=\"#333\"/>
    </GridLayout>
</Shimmer>
\n

Properties

\n\n

iOS Only:

\n

You can start shimmer on any view statically:

\n
import { Shimmer } from '@nstudio/nativescript-shimmer';

loadedView(args) {
    view = args.object;
    // start shimmer
    Shimmer.start(view);
    // stop shimmer
    Shimmer.stop(view);
}
\n

Android will always need a Shimmer instance to start the effect however you can statically stop the shimmer effect if that instance is passed into Shimmer.stop(view /* shimmer instance */).

\n\n
Shimmer.defaults = {
    speed: 0.9,
    direction: ShimmerDirection.topToBottom,
    repeat: 4,
    lightColor: 'rgba(255,255,255,.8)',
    darkColor: 'rgba(0,0,0,.7)',
};

// bootstrap app...
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssl-pinning":{"name":"nativescript-ssl-pinning","version":"1.1.15","license":"Apache-2.0","readme":"

NativeScript-SSL-Pinning

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n

A drop-in replacement for the default http module.

\n

Note: This plugin is inspired by nativescript-ssl-pinning. Most of the code is taken from this.\nI've added angular support and also fixed some long term issues. Huge thanks to the original creator.

\n

Some of the fixed issues are as follows

\n\n

Features

\n\n

FAQ

\n
\n

What the flip is SSL pinning and all this security mumbo jumbo?

\n
\n

How to make your apps more secure with SSL pinning.

\n
\n

Do I have to use SSL pinning?

\n
\n

No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

\n

Demo

\n
git clone https://github.com/sai-gmbh/nativescript-ssl-pinning
cd nativescript-ssl-pinning/src
npm run demo.ios
npm run demo.android
npm run demo-angular.ios
npm run demo-angular.android
\n

Installation

\n

Add tns-platform-declarations for Android and iOS to your references.d.ts!

\n
/// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
/// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
\n

We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

\n

Install the plugin:

\n
tns plugin add nativescript-ssl-pinning
\n

Examples

\n

Hitting an API using GET method

\n
import { SslPinning } from 'nativescript-ssl-pinning'
SslPinning.request({
\turl: 'https://httpbin.org/get',
\tmethod: 'GET',
})
.then((response) => console.log('response', response))
.catch((error) => console.error('error', error));
\n

Angular Support

\n
\n

NativescriptSslPinningHttpClientModule internally overrides Angular's XHRBackend\nto make request through our SSL Plugin and transforms it back to angular responses.\nThis will keep the interceptors functionality intact.

\n
\n
import {NativescriptSslPinningHttpClientModule} from \"nativescript-ssl-pinning/angular\"
@NgModule({
  imports: [
    // ...
    NativescriptSslPinningHttpClientModule
  ],
  declarations: [
    ExampleComponent,
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class AppModule {
}

@Component({...})
export class ExampleComponent implements OnInit {
  constructor(private http: HttpClient) {}
  
  ngOnInit() {
    this.http.get('https://httpbin.org/status/500').subscribe(res => console.log(res), err => console.log(err));
  }
}
\n

Configuration

\n

Installing your SSL certificate

\n

Create a folder called assets in your projects app folder like so <project>/app/assets.

\n

Enabling SSL pinning

\n
import { knownFolders } from 'file-system'
import { SslPinning } from 'nativescript-ssl-pinning'
let dir = knownFolders.currentApp().getFolder('assets')
let certificate = dir.getFile('httpbin.org.cer').path
SslPinning.enableSSLPinning({ host: 'httpbin.org', certificate })
\n

Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

\n

Disabling SSL pinning

\n
import { SslPinning } from 'nativescript-ssl-pinning'
SslPinning.disableSSLPinning()
\n

All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

\n

Options

\n
export interface HttpsSSLPinningOptions {
\thost: string
\tcertificate: string
\tallowInvalidCertificates?: boolean
\tvalidatesDomainName?: boolean
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
host: stringThis must be the top level domain name eg httpbin.org.
certificate: stringThe uri path to your .cer certificate file.
allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
\n

Webpack / bundling

\n

Since you're probably shipping a certificate with your app,\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin

\n
new CopyWebpackPlugin([
    { from: { glob: \"fonts/**\" } },
    { from: { glob: \"**/*.jpg\" } },
    { from: { glob: \"**/*.png\" } },
    { from: { glob: \"**/*.cer\" } },  // add this line in webpack.config.js
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] })
\n

iOS Troubleshooting

\n
\n

Please educate yourself on iOS's App Transport Security before starting beef!

\n
\n

If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
\n
\n

This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

\n
\n

Android troubleshooting

\n

If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

\n

Current Issues

\n
    \n
  1. Multipart form requests are not supported by the plugin yet.\nFor Angular users they'll go through Angular's own XHR but for native users it might fail.
    2. \n
\n

Thanks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhoWhy
Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-cognito":{"name":"@gavant/nativescript-cognito","version":"1.1.5-alpha","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@courthoang/ns-stripeterminal":{"name":"@courthoang/ns-stripeterminal","version":"4.0.12","license":"Apache-2.0","readme":"

@courthoang/nativescript-stripeterminal

\n
npm install @courthoang/nativescript-stripeterminal
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-circle":{"name":"nativescript-animated-circle","version":"1.2.0","license":"Apache-2.0","readme":"

nativescript-animated-circle

\n

\"npm\"\n\"npm\"

\n

\"NPM\"

\n

Creates an animated circle (animates the border of the circle) on iOS and Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\n

Installation

\n
tns plugin add nativescript-animated-circle
\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:ui=\"nativescript-animated-circle\">
    <ui:AnimatedCircle
        backgroundColor=\"transparent\"
        width=\"200\"
        height=\"200\"
        animated=\"true\"
        animateFrom=\"0\"
        rimColor=\"#FF5722\"
        barColor=\"#3D8FF4\"
        fillColor=\"#eee\"
        clockwise=\"true\"
        rimWidth=\"5\"
        progress=\"80\"
        text=\"bam\"
        textSize=\"28\"
        textColor=\"red\" />
</Page>
\n

Angular

\n

To use this plugin in Angular, please register the element above your AppModule declaration.

\n
import { registerElement } from 'nativescript-angular/element-registry'

registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);
\n

Then you can leverage the plugin using <AnimatedCircle></AnimatedCircle> in your templates.

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
rimColor#FF5722The filled portion of the circle border's color.
barColor#3D8FF4The remaining (unfilled) portion of the circle border.
clockwisetrueThe CW (true) or CCW (false) draw direction.
rimWidth5The border radius of the circle.
progress0The current progress value.
startAngle0The angle to start drawing from.
endAngle100iOS only the end angle to stop drawing at.
animatedfalseAndroid only animation status.
animateFrom0Android only the progress value to animate from.
animationDuration1000Android only the duration to animate for.
text""The text inside of the circle.
textSize0Text size, 0 will hide the text
textColor#ff0000Text color
\n

Available for Contract

\n

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: sean@devonite.com to discuss project details.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-plugin":{"name":"tns-template-plugin","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/nathanaela/tns-template-plugin/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

tns-template-plugin

\n

Quickly builds a NativeScriot plugins\nThis will automatically create:

\n\n

It asks you several questions about this plugin, automatically saves the common answers (so that way it does not need to ask them ever again.)\nIf has entry line completions, and ability to list the valid answers (hit ).

\n

License

\n

This project itself is released under the MIT license; however the code generated is released under no license; so that you can release this under any license and claim all rights to the code contained here.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Screen

\n

\"Sample1\"

\n

Updates

\n

Please feel free to fork this repo and update it!!!

\n

Instructions

\n

Simple Instructions

\n
git clone https://github.com/NathanaelA/tns-template-plugin nativescript-plugin-name
cd nativescript-plugin-name
npm start
\n

Basically After cloning the repo into whereever you want it; type npm start, answer a couple questions and it will re-write the repo to match you plugin type you desire.

\n

Features

\n

$HOME/.tns-plugin/ folder is used to store settings and additional files you may want added to any new plugins.

\n

So if you would like to have your OWN custom readme.md or package.json template that you use used as the source; create a file in your %HOMEPATH% or $HOME /.tns-plugin/files/

\n

When parsing the files it will look for any [[name]], [[github]], [[plugin]], [[email]], [[os], and [[license] and replace them with the values you typed.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"kinvey-nativescript-sdk":{"name":"kinvey-nativescript-sdk","version":"8.0.1","license":"Apache-2.0","readme":"

Kinvey NativeScript SDK

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
npm i kinvey-nativescript-sdk
\n

Usage

\n

Initialize SDK

\n

We need to initialize the SDK before your app starts, so open app.js and add this before application.start();:

\n

JavaScript

\n
import * as Kinvey from 'kinvey-nativescript-sdk';

Kinvey.init({
  appKey: '<yourAppKey>',
  appSecret: '<yourAppSecret>'
});
\n

TypeScript

\n
import * as Kinvey from 'kinvey-nativescript-sdk';

Kinvey.init({
  appKey: '<yourAppKey>',
  appSecret: '<yourAppSecret>'
});
\n

Angular

\n

Import the KinveyModule in your app.module.ts like this to initialize the SDK:

\n
import { NgModule } from '@angular/core';
import { KinveyModule } from 'kinvey-nativescript-sdk/angular';

@NgModule({
  imports: [
    KinveyModule.init({
      appKey: '<yourAppKey>',
      appSecret: '<yourAppSecret>'
    })
  ]
})
export class AppModule { }
\n

Then you can use dependency injection to inject a Kinvey service in your module like this:

\n
import { Component } from '@angular/core';
import { UserService } from 'kinvey-nativescript-sdk/angular';

@Component()
export class AppComponent {
  constructor(private userService: UserService) {}

  async login() {
    try {
      const user = await this.userService.login('<username>', '<password>');
      console.log(user);
    } catch (error) {
      console.log(error);
    }
  }
}
\n

The following services are available to use with dependency injection:

\n\n

Push

\n

You will need to install nativescript-plugin-firebase and follow the instructions at https://github.com/EddyVerbruggen/nativescript-plugin-firebase#prerequisites on how to setup your app. Make sure to require the nativescript-plugin-firebase plugin in your app.ts file as shown in the example app.

\n

You can then use the Push module to register the device running your app like this:

\n
import * as Push from 'kinvey-nativescript-sdk/push';

function receivedPushNotificaiton(message) {
  console.log(\"Title: \" + message.title);
  console.log(\"Body: \" + message.body);
  // if your server passed a custom property called 'foo', then do this:
  console.log(\"Value of 'foo': \" + message.data.foo);
}

Push.register(receivedPushNotification)
  .then((deviceToken) => {
    console.log(`The device with device token ${deviceToken} is registered for push.`);
  })
  .catch((error) => {
    console.log(error);
  })
\n

To unregister the device running your app do this:

\n
import * as Push from 'kinvey-nativescript-sdk/push';

Push.unregister()
  .then((deviceToken) => {
    console.log(`The device with device token ${deviceToken} has been unregistered for push.`);
  })
  .catch((error) => {
    console.log(error);
  })
\n
Angular
\n

You will need to import the KinveyPushModule in your app.module.ts like this:

\n
import { NgModule } from '@angular/core';
import { KinveyModule } from 'kinvey-nativescript-sdk/angular';
import { KinveyPushModule } from 'kinvey-nativescript-sdk/angular/push';

@NgModule({
  imports: [
    KinveyModule.init({
      appKey: '<yourAppKey>',
      appSecret: '<yourAppSecret>'
    }),
    KinveyPushModule
  ]
})
export class AppModule { }
\n

Then you can use dependency injection to inject the PushService in your module like this:

\n
import { Component } from '@angular/core';
import { PushService } from 'kinvey-nativescript-sdk/angular/push';

@Component()
export class AppComponent {
  constructor(private pushService: PushService) {}

  receivedPushNotificaiton(message) {
    console.log(\"Title: \" + message.title);
    console.log(\"Body: \" + message.body);
    // if your server passed a custom property called 'foo', then do this:
    console.log(\"Value of 'foo': \" + message.data.foo);
  }

  async registerForPush() {
    try {
      const deviceTokne = await this.pushService.register(this.receivedPushNotification);
      console.log(`The device with device token ${deviceToken} has been unregistered for push.`);
    } catch (error) {
      console.log(error);
    }
  }
}
\n

Build

\n

If you would like to build the SDK yourself, clone the monorepo, then:

\n\n

You can then install the SDK build by running npm i /<localpath>/packages/nativescript-sdk

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-themes":{"name":"nativescript-themes","version":"2.0.2","license":{"type":"MIT","url":"https://git.proplugins.org/proplugins/nativescript-themes/blob/master/LICENSE"},"readme":"

\n

NativeScript-Themes

\n

\n

This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.

\n

Documentation for this plugin is located at here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sound":{"name":"nativescript-sound","version":"1.0.4","license":"MIT","readme":"

NativeScript Sound

\n

Play a sound in your NativeScript app.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-sound
\n

Usage

\n

To use this plugin you must first require() it:

\n
var sound = require(\"nativescript-sound\");
\n

create and play

\n

It's important to preload the audio file into the sound module before playing it; there is a delay during creation due to the audio being processed:

\n
var tada = sound.create(\"~/sounds/tada.mp3\"); // preload the audio file

// play the sound (i.e. tap event handler)
tada.play();
\n

A good way to do this is to create a sound collection:

\n
sounds = {
\t\"Tada\": sound.create(\"~/sounds/tada.mp3\"),
\t\"Boo\": sound.create(\"~/sounds/boo.mp3\"),
\t// ...
};
\n

If you wish to play a sound due to a button being tapped, leverage the following code (where name refers to the name of the audio file to be played):

\n
this.playButtonPressed = function(name) {
\tif (app.android) {
\t\tsounds[name].play();
\t} else {
\t\tvar soundFile = sound.create(\"~/sounds/\" + name + \".mp3\");
\t\tsoundFile.play();
\t}
}
\n

stop

\n
tada.stop();
\n

reset

\n
tada.reset();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-crossplatform-aes":{"name":"nativescript-crossplatform-aes","version":"1.0.3","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

nativescript-crossplatform-aes

\n

Simple Cross platform 256bit AES encryption / decryption based on Cross-Platform-AES

\n

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

\n

Platforms supported

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
  3. NodeJS
    4. \n
\n

Features:

\n
    \n
  1. \n

    Cross platform support. Encryption-Decryption works across iOS, Android and Node.js.

    \n
    2. \n
  2. \n

    Automatically RandomIV is added while encryption and remove first randomized blocks while decryption.

    \n
    3. \n
  3. \n

    Support for Random IV (initialization vector) for encryption and decryption. Randomization is crucial for encryption schemes to achieve semantic security, a property whereby repeated usage of the scheme under the same key does not allow an attacker to infer relationships between segments of the encrypted message.

    \n
    4. \n
  4. \n

    Support for SHA-256 for hashing the key. Never use plain text as encryption key. Always hash the plain text key and then use for encryption. AES permits the use of 256-bit keys. Breaking a symmetric 256-bit key by brute force requires 2^128 times more computational power than a 128-bit key. A device that could check a billion billion (10^18) AES keys per second would in theory require about 3×10^51 years to exhaust the 256-bit key space.

    \n
    5. \n
\n

Installation

\n
tns plugin add nativescript-crossplatform-aes
\n

Simple Usage in NativeScript

\n
import { CrossPlatformAES } from 'nativescript-crossplatform-aes';

let cryptLib = new CrossPlatformAES();
let plainText = \"this is my plain text\"
let key = \"your key\"

let cipherText = cryptLib.encryptPlainTextWithRandomIV(plainText, key);
console.log(cipherText);

let decryptedString = cryptLib.decryptCipherTextWithRandomIV(cipherText, key)
console.log(decryptedString);
\n

Other Custom Methods

\n
encryptPlainTextWithSuppliedIV(plainText: string, key: string, iv: string);
decryptCipherTextWithSuppliedIV(cipherText: string, key: string, iv: string);
generateRandomIV16();
\n

NodeJS

\n

Install the library

\n
npm install @skavinvarnan/cryptlib --save
\n

Then use it

\n
const cryptLib = require('@skavinvarnan/cryptlib');

const plainText = \"this is my plain text\";
const key = \"your key\";

const cipherText = cryptLib.encryptPlainTextWithRandomIV(plainText, key);
console.log('cipherText %s', cipherText);

const decryptedString = cryptLib.decryptCipherTextWithRandomIV(cipherText, key);
console.log('decryptedString %s', decryptedString);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@busychild/nativescript-extended-webview":{"name":"@busychild/nativescript-extended-webview","version":"1.0.2","license":"Apache-2.0","readme":"

@busychild/nativescript-extended-webview

\n
npm install @busychild/nativescript-extended-webview
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@elgibor-solution/nativescript-sentry":{"name":"@elgibor-solution/nativescript-sentry","version":"1.0.1","license":"Apache-2.0","readme":"

@esolution/nativescript-sentry

\n

This package was forked from the unmaintained package\ndanielgek/nativescript-sentry. We are currently\ncleaning up and updating the code.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-libsodium":{"name":"nativescript-simple-libsodium","version":"1.0.6","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Simple Libsodium

\n

Sodium is a new, easy-to-use software library for encryption, decryption, signatures, password hashing and more. It's cross-compilable & support most of the modern devices. Using this plugin you will be able to use it directly with your NativeScript project.

\n

For iOS I have compiled it directly from source code. For Android I have used Lazysodium native library.

\n

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

\n

Platforms supported

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
\n

Libsodium can be use with other programming languages too. You can get more references from here: https://libsodium.gitbook.io/doc/bindings_for_other_languages

\n

Installation

\n
tns plugin add nativescript-simple-libsodium
\n

Usage

\n

Import

\n

TS/Angular:

\n
import { SimpleLibsodium, AEDMethod, AEDValues, Base64Variant, Keybytes, Noncebytes } from 'nativescript-simple-libsodium';

let simpleLibsodium = new SimpleLibsodium();
\n

JavaScript:

\n
var mSimpleLibsodium = require(\"nativescript-simple-libsodium\");
var simpleLibsodium = new mSimpleLibsodium.SimpleLibsodium();
\n

Please check the demo project for more details example.

\n

Generate Random Data:

\n
simpleLibsodium.generateRandomData();
 // OR
simpleLibsodium.generateKeyWithSuppliedString(\"Jibon Costa\"); // Keep in mind that in order to produce the same key from the same password, the same algorithm, the same salt, and the same values for opslimit and memlimit have to be used. Therefore, these parameters have to be stored for each user.
\n

AED Encryption/Decryption:

\n
let key = this.simpleLibsodium.generateRandomData(AEDValues.XCHACHA20POLY1305_IETF_KEYBYTES);
// or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", AEDValues.XCHACHA20POLY1305_IETF_KEYBYTES);

let enc = this.simpleLibsodium.AEDEncrypt(AEDMethod.XCHACHA20_POLY1305_IETF, \"Hello World\", key.raw);

console.dir(enc);

let dec = this.simpleLibsodium.AEDDecrypt(AEDMethod.XCHACHA20_POLY1305_IETF, enc.rawCrypted, key.raw, enc.rawNonce);

console.dir(dec);
\n

Secret Box:

\n
let key = this.simpleLibsodium.generateRandomData(Keybytes.SECRETBOX_KEYBYTES);
// or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", Keybytes.SECRETBOX_KEYBYTES);

let enc = this.simpleLibsodium.secretBoxEncrypt(\"Hello World\", key.raw);

console.dir(enc);

let dec = this.simpleLibsodium.secretBoxOpen(enc.rawCrypted, key.raw, enc.rawNonce);

console.dir(dec);
\n

Salsa20:

\n
let key = this.simpleLibsodium.generateRandomData(Keybytes.STREAM_KEYBYTES);
// or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", Keybytes.STREAM_KEYBYTES);

let enc = this.simpleLibsodium.xSalsa20Encrypt(\"Hello World\", key.raw);

console.dir(enc);

let dec = this.simpleLibsodium.xSalsa20Decrypt(enc.rawCrypted, key.raw, enc.rawNonce);

console.dir(dec);
\n

Box Easy:

\n
let bob = this.simpleLibsodium.boxKeyPaired();
let alice = this.simpleLibsodium.boxKeyPaired();

// Bob sending message to Alice. So, here will need Alice's public key & Bob's private/secret key
let enc = this.simpleLibsodium.boxEasy(\"Hello World\", alice.public_key, bob.private_key);

console.dir(enc);

// Alice got the message from Bob. Now Alice need his private key & Bob's public key.
let dec = this.simpleLibsodium.boxOpenEasy(enc.rawCrypted, enc.rawNonce, bob.public_key, alice.private_key);

console.dir(dec);
\n

Password Hash/Verification:

\n
let enc = this.simpleLibsodium.passwordHash(\"MyPassword\");

console.dir(enc);

if (this.simpleLibsodium.passwordHashVerify(enc.plainHash, \"MyPassword\")) {
  console.log(\"Password Matched!\");
} else {
  console.log(\"Password invalid!\");
}
\n

Crypto Authentication/Verification:

\n
let enc = this.simpleLibsodium.cryptoAuth(\"Jibon Costa\");

console.dir(enc);

if (this.simpleLibsodium.cryptoAuthVerify(enc.rawCrypted, \"Jibon Costa\", enc.rawKey)) {
  console.log(\"Matched !\")
} else {
  console.log(\"Didn't match\")
}
\n

SHA-256/512 Hash:

\n
let enc = this.simpleLibsodium.SHA2Hash(\"MyPassword\", 512); // or 256
console.dir(enc);
\n

Methods/API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsDescriptionReference
generateRandomData(length?: number)Generate Random Datahttps://libsodium.gitbook.io/doc/generating_random_data
generateKeyWithSuppliedString(mykey: string, length?: number, salt?: any, opslimit?: number, memlimit?: number)Generate Random Data with Key. Algorithm: crypto_pwhash_ALG_ARGON2I13, opslimit: crypto_pwhash_OPSLIMIT_MIN, memlimit: crypto_pwhash_MEMLIMIT_MIN. If you don't provide anything for salt then it will generate automatically & return back as output. Keep in mind that in order to produce the same key from the same password, the same algorithm, the same salt, and the same values for opslimit and memlimit have to be used.https://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#key-derivation
AEDEncrypt(method: AEDMethod, msg: string, key: any, nonce?: any, additionalMsg?: string)AED Encryption. Here nonce & additionalMsg are optional. If you don't insert anything as nonce then it will generate nonce automatically. If you don't insert anything as additionalMsg then Hexadecimal value of nonce will be use as additionalMsg.https://libsodium.gitbook.io/doc/secret-key_cryptography/aead
AEDDecrypt(method: AEDMethod, encrypData: any, key: any, nonce: any, additionalMsg?: string)AED Decryption. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/aead
secretBoxEncrypt(text: string, key: any, nonce?: any)Authenticated encryption. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/secret-key_cryptography/authenticated_encryption#combined-mode
secretBoxOpen(encrypData: any, key: any, nonce: any)Authenticated decryption. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/authenticated_encryption#combined-mode
xSalsa20Encrypt(message: string, key: any, nonce?: any)Stream cipher. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/advanced/stream_ciphers/xsalsa20
xSalsa20Decrypt(encrypData: any, key: any, nonce: any)Stream cipher. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/advanced/stream_ciphers/xsalsa20
boxEasy(msg: string, public_key: any, private_key: any, nonce?: any)Authenticated encryption with key pair. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption
boxOpenEasy(ciphertext: any, public_key: any, private_key: any, nonce: any)Authenticated decryption with key pair. Here ciphertext, public_key, private_key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption
boxKeyPaired()Key pair generationhttps://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption#key-pair-generation
passwordHash(password: string), opslimit?: number, memlimit?: numberPassword hash for storage. opslimit: crypto_pwhash_OPSLIMIT_INTERACTIVE, memlimit: crypto_pwhash_MEMLIMIT_INTERACTIVEhttps://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#password-storage
passwordHashVerify(plainHash: any, password: string)Password verification. Here the value plainHash should need to plain text/string.https://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#password-storage
cryptoAuth(msg: string)Authenticationhttps://libsodium.gitbook.io/doc/secret-key_cryptography/secret-key_authentication
cryptoAuthVerify(ciphertext: any, msg: string, key: any)Authentication verification. Here the value ciphertext & key should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/secret-key_authentication#usage
SHA2Hash(msg: string, type?: number)SHA-2 (SHA 256/512). The value of type will be either 256 or 512https://libsodium.gitbook.io/doc/advanced/sha-2_hash_function
binTohex(binary: any)Hexadecimal encodinghttps://libsodium.gitbook.io/doc/helpers#hexadecimal-encoding-decoding
hexTobin(hex: string)Hexadecimal decodinghttps://libsodium.gitbook.io/doc/helpers#hexadecimal-encoding-decoding
bytesToBase64(data: any, variant?: Base64Variant)Base64 encodinghttps://libsodium.gitbook.io/doc/helpers#base64-encoding-decoding.
base64Tobytes(base64String: string, variant?: Base64Variant)Base64 decodinghttps://libsodium.gitbook.io/doc/helpers#base64-encoding-decoding
stringTodata(text: string)String text to BinaryNative Implementation
dataTostring(data: any)Binary to textNative Implementation
\n

Note: You can add more methods or API from core sodium package to your project easily.

\n

Android:

\n
let simpleLibsodium = new SimpleLibsodium();
let sodium = simpleLibsodium.sodium
// now you can call any method/api from core sodium package.
sodium.crypto_secretbox_keygen();
\n

iOS:

\n
// From iOS you will be able to call the methods directly.
crypto_secretbox_keygen();
\n

For getting typescript typings support you can add following lines in you references.d.ts file:

\n
/// <reference path=\"./node_modules/nativescript-simple-libsodium/typingz/android.d.ts\" />
/// <reference path=\"./node_modules/nativescript-simple-libsodium/typingz/objc!sodium.d.ts\" />
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-cognitiveservices":{"name":"nativescript-azure-cognitiveservices","version":"1.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

nativescript-azure-cognitiveservices

\n

Azure cognitive services implementation for NativeScript. Both iOS & Android platfroms are supported.

\n

Features:

\n\n

Note: When you will use this service that time UI will keep block until any result will come. I'll recommend to use NativeScript Worker Loader to run the service in background

\n

Installation

\n
tns plugin add nativescript-azure-cognitiveservices
\n

Usage (Please check demo project for details)

\n

Import

\n

JavaScript:

\n
var azure = require(\"nativescript-azure-cognitiveservices\");
var azureService = new azure.AzureCognitiveservices(\"API_KEY\", \"Region\");
\n

TS:

\n
import { AzureCognitiveservices, SpeechSynthesisResult, SpeechToTextResult } from \"nativescript-azure-cognitiveservices\";

constructor() {
    this.azureService = new AzureCognitiveservices(\"API_KEY\", \"Region\");
}
\n

Functions

\n
speechSynthesis(contents: any, voiceName?: string): any;
speechToTextRecognizeOnce(audioFile?: string, recognitionLanguage?: string): any;
startContinuousRecognition(recognitionLanguage?: string): any;
stopContinuousRecognition(): void;
startRecorder(fileName?: string): void;
stopRecorder(): any;
audioDataSaveAsMP3(audioData: any, fileName?: string): Promise<string>;
\n

Require Permission:

\n

Android:

\n
<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
\n

iOS:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sensors":{"name":"nativescript-sensors","version":"1.0.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Need to be written

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-snapkit":{"name":"nativescript-snapkit","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Snap Kit plugin

\n

\"NPM\n\"Twitter

\n

\"Snap

\n

What!?

\n

Glad you asked. This repo implements a NativeScript plugin for Snapchat's Snap Kit SDK.\nIn its first iteration, this plugin only exposes the 'login' feature, called Login Kit.\nFeel free to open an issue requesting other features (other parts of the Snap Kit SDK are: Creative Kit, Bitmoji Kit, and Story Kit).

\n

Installation

\n
tns plugin add nativescript-snapkit
\n

Configuration

\n

Hop on over to the Snap Kit developer portal and create an app.

\n

Android

\n

Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

\n\n

iOS

\n

Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

\n\n

iOS startup wiring

\n

When using Login Kit's features on iOS, you will need to require (not import) the plugin before the app is bootstrapped.

\n
\n

Failing to do so will mean Snapchat won't redirect back to your app after logging in.

\n
\n

Demo app

\n

If you want to test logging in with your own Snapchat login, then the demo app is a good starting point.\nHowever, it only allows logging in with user eddyverbruggen so you'll need to update its configuration as mentioned above.

\n

Follow these steps to install the demo app:

\n
git clone https://github.com/EddyVerbruggen/nativescript-snapkit
cd nativescript-snapkit/src
npm i
# change the configuration, then:
npm run demo.ios # or demo.android
\n

API (Login Kit)

\n

login

\n

The login function takes a boolean parameter (default false) indicating whether or not you want the plugin to retrieve user details.

\n
import { LoginKit } from \"nativescript-snapkit\";

LoginKit.login(true)
    .then(result => console.log(`Login successful, details: ${JSON.stringify(result)}`))
    .catch(error => console.log(`Login failed. Details: ${error}`));
\n

isLoggedIn

\n

This function takes the same boolean parameter as login (default false).\nIf false, this function will return a boolean. Otherwise it will return user details in case the user was indeed logged in, or false if he was not logged in.

\n
import { LoginKit } from \"nativescript-snapkit\";

// use it either like this (no parameter, or 'false')
LoginKit.isLoggedIn()
    .then(loggedIn => console.log(`User was logged in? ${loggedIn}`));

// or use it like this, to get the details (in case the user was indeed logged in)
LoginKit.isLoggedIn(true)
    .then(result => {
      if (!result) {
        console.log(`User was not logged in.`);
      } else {
        console.log(`User was logged in. User details: ${JSON.stringify(result)}`)
      }
    });
\n

logout

\n
import { LoginKit } from \"nativescript-snapkit\";

LoginKit.logout()
    .then(() => console.log(\"Logged out\"));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paystack":{"name":"nativescript-paystack","version":"0.2.3","license":"Apache-2.0","readme":"

Nativescript Paystack

\n

\"npm\n\"npm\"\n\"Build

\n

Nativescript-Paystack provides a wrapper that incorporate payments using Paystack from within your {N} applications. The integration is achieved using the Paystack Android/iOS SDK libraries. Hence, has full support for both Android & iOS.

\n

Installation

\n

The package should be installed via tns plugin for proper gradle and Pod setup.

\n
tns plugin add nativescript-paystack
\n

Usage

\n

Setup

\n

First import package into the main-page's model or app.component as the case may be for either {N} Core or {N} w/ Angular

\n
import { NSPaystack } from \"nativescript-paystack\";
\n

Then create an instance of NSPaystack.

\n
this.paystack = new NSPaystack();
\n

Initialize the instance with the publicKey gotten from Paystack

\n
this.paystack.initialize(publicKey);
\n

Charging a Card

\n

To charge a card, it is expected that the Form/UI responsible for handling the data collection is handled by you.

\n
const payment = this.paystack.payment(<NSPaymentParams>{
    amount: 500000, // In Kobo
    email: \"my.email@gmail.com\",
    number: \"4084084084084081\",
    cvc: \"408\",
    year: 2019,
    month: 3
});

payment
    // Add metadata
    .addMetadata(\"Hello\", \"World\")
    // Add custom data fields
    .addCustomField(\"Author\", \"Anonymous\");

// Listen on when validation modal comes up
payment.on(NSPayment.openDialogEvent, () => {
    console.log(NSPayment.openDialogEvent);
});

// Listen on when validation modal goes out
payment.on(NSPayment.closeDialogEvent, () => {
    console.log(NSPayment.closeDialogEvent);
});

payment
    .charge()
    .then(({ reference }) => {
        alert(`Reference: ${reference}`);
    })
    .catch(({ code, message, reference }) => {
        alert(`An error occured`);
        console.log(`Code: ${code}`);
        console.log(`Message: ${message}`);
        console.log(`Reference: ${reference}`); // If any
    });
\n

API

\n

Payload Signature

\n

The payload signature is also available via the definition files.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ArgumentTypeDescription
numberstringthe card number without any space seperator
monthnumberthe card expiry month ranging from 1-12
yearnumberthe card expiry year in a four-digits e.g 2019
cvcstringthe card 3/4 digit security code
amountnumberthe charge amount in kobo
emailstringthe customer's email address
\n

Response Signature

\n

Promise response signature is also available via the definition files.

\n

Success Response

\n
interface NSPaystackSuccessResponse {
    reference: string;
}
\n

Error Response

\n
export interface NSPaystackErrorResponse {
    code: number | string;
    message: string;
    reference?: string;
}
\n

Note

\n

It is expected that all tests be carried out on an actual device.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tylerkanz/nativescript-nfc":{"name":"@tylerkanz/nativescript-nfc","version":"5.0.1","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/sentry":{"name":"@nativescript-community/sentry","version":"4.6.12","license":"ISC","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Configuration

\n

Webpack

\n

You will need to add something like this to your webpack config so that the source maps gets uploaded. I dont set auth or project in the options as i use a .sentryclirc config file.

\n\n
if (!!sentry && !!uploadSentry) {
  config.devtool = false;
  config.plugins.push(
      new webpack.SourceMapDevToolPlugin({
          append: `\\n//# sourceMappingURL=${process.env.SENTRY_PREFIX}[name].js.map`,
          filename: join(process.env.SOURCEMAP_REL_DIR, '[name].js.map')
      })
  );
  let appVersion;
  let buildNumber;
  if (isAndroid) {
      const gradlePath = `${appResourcesPath}/Android/app.gradle`;
      const gradleData = readFileSync(gradlePath, 'utf8');
      appVersion = gradleData.match(/versionName \"((?:[0-9]+\\.?)+)\"/)[1];
      buildNumber = gradleData.match(/versionCode ([0-9]+)/)[1];
  } else if (isIOS) {
      const plistPath = `${appResourcesPath}/iOS/Info.plist`;
      const plistData = readFileSync(plistPath, 'utf8');
      appVersion = plistData.match(/<key>CFBundleShortVersionString<\\/key>[\\s\\n]*<string>(.*?)<\\/string>/)[1];
      buildNumber = plistData.match(/<key>CFBundleVersion<\\/key>[\\s\\n]*<string>([0-9]*)<\\/string>/)[1];
  }
  config.plugins.push(
      new SentryCliPlugin({
          release: appVersion,
          urlPrefix: 'app:///',
          rewrite: true,
          release: `${nconfig.id}@${appVersion}+${buildNumber}`,
          dist: `${buildNumber}.${platform}`,
          ignoreFile: '.sentrycliignore',
          include: [join(dist, process.env.SOURCEMAP_REL_DIR)]
      })
  );
}
\n

###debug

\n

For debug mode to work correctly you will need to add this to your webpack (see demo app)

\n
nsWebpack.chainWebpack(config=>{
    config.entry('bundle').prepend('@nativescript-community/sentry/process');
});
\n

Fastlane

\n

If you use fastlane you can use it to create release and upload dsyms\nTo do that you need to install it:

\n
fastlane add_plugin sentry
\n

Also for now you should install nativescript-set-version as it is needed to read app version, build number.

\n
npm install -D nativescript-set-version
\n

Now you can setup your Fastfile

\n\n
version = \"\"
versionCode = \"\"

Dir.chdir(\"..\") do
  version  =  sh(\"./node_modules/.bin/get-version\", platform, \"version\").gsub(/\\n/,'')
  versionCode  =  sh(\"./node_modules/.bin/get-version\", platform, \"code\").gsub(/\\n/,'')
end
sentry_create_release(
  version: version, # release version to create
)
\n\n
sentry_upload_dsym
\n

Usage in the app

\n
import * as Sentry from '@nativescript-community/sentry';

const buildNumber = await getBuildNumber();
const versionName = await getVersionName();
const buildNumber = await getBuildNumber();
const appId = await getAppId();
Sentry.init({
    dsn: SENTRY_DSN,
    debug: true,
    enableAutoPerformanceTracking: true,
});
\n

Reporting NativeScript errors

\n

The onerror method ensures all unhandled NativeScript errors will be caught by Sentry in production, using a custom error handler.

\n

Reporting handled errors

\n

If you would like to send a handled error to Bugsnag, you can pass any Error object to Sentry notify method:

\n
import * as Sentry from '@nativescript-community/sentry';
try {
  // potentially crashy code
} catch (error) {
  Sentry.captureException(error);
}
\n

Reporting promise rejections

\n

To report a promise rejection, use notify() as a part of the catch block:

\n
import * as Sentry from '@nativescript-community/sentry';
new Promise(function(resolve, reject) {
  /* potentially failing code */
})
.then(function () { /* if the promise is resolved */ })
.catch(function (error) {
  Sentry.captureException(error);
});
\n

Sending diagnostic data

\n

Automatically captured diagnostics

\n

Bugsnag will automatically capture and attach the following diagnostic data:

\n\n

Identifying users

\n

In order to correlate errors with customer reports, or to see a list of users who experienced each error, it is helpful to capture and display user information. Information set on the Bugsnag client is sent with each error report:

\n
Sentry.setUser({\"email\": \"john.doe@example.com\"});
\n

Logging breadcrumbs

\n

In order to understand what happened in your application before each crash, it can be helpful to leave short log statements that we call breadcrumbs. The last several breadcrumbs are attached to a crash to help diagnose what events lead to the error.

\n

Automatically captured breadcrumbs

\n

By default, Bugsnag captures common events including:

\n\n

Attaching custom breadcrumbs

\n

To attach additional breadcrumbs, use the leaveBreadcrumb function:

\n
Sentry.addBreadcrumb({
    category: 'ui',
    message: 'load main view',
    level: 'info'
  });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-camera-plus":{"name":"@codesthings/nativescript-camera-plus","version":"4.0.4","license":"Apache-2.0","readme":"\n

NativeScript Camera Plus

\n\n

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

\n

\n\n \"LiveShopper\n \n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n
\n

Installation

\n
ns plugin add @nstudio/nativescript-camera-plus
\n

Note :- Android\nPlease add the following to your app.gradle

\n
android {
...
 compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
}
\n

Sample

\n

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

\n

\"Camera

\n

Demo

\n

The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

\n

Android Emulator Note

\n

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefaultDescription
debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
\n

Static Properties

\n

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
\n

Android Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIconstringName of app_resource drawable for the toggle camera button.
takePicIconstringName of app_resource drawable for the take picture (capture) button.
galleryIconstringName of app_resource drawable for the open gallery (image library) button.
autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
\n

iOS Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
\n

Cross Platform Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
isCameraAvailable()Returns true if the device has at least one camera.
toggleFlash()Toggles the flash mode on the active camera.
toggleCamera()Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
record(opts?: IVideoOptions)Starts recording a video.
stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
\n

Android Only Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()Returns true if the application has been granted access to the device storage.
getNumberOfCameras()Returns the number of cameras on the device.
hasFlash()Returns true if the active camera has a flash mode.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
errorEventExecutes when an error is emitted from CameraPlus
photoCapturedEventExecutes when a photo is taken.
toggleCameraEventExecutes when the device camera is toggled.
imagesSelectedEventExecutes when images are selected from the device library/gallery.
videoRecordingStartedEventExecutes when video starts recording.
videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
confirmScreenShownEventExecutes when the picture confirm dialog is shown..
confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
\n

Option Interfaces

\n
export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}
\n
export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}
\n
export interface IVideoOptions {
  quality?: CameraVideoQuality;
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
  disableHEVC?: boolean;
  androidMaxVideoBitRate?: number;
  androidMaxFrameRate?: number;
  androidMaxAudioBitRate?: number;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shadowed-label":{"name":"nativescript-shadowed-label","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Shadowed Label

\n\n \"npm\"\n\n\n \"npm\"\n\n\n \"stars\"\n\n\n \"donate\"\n\n

A NativeScript plugin that extends the <Label> UI widget by adding the text-shadow CSS property.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
shadow examplessample from the playground
\"\"\"\"
\n

Installation

\n
tns plugin add nativescript-shadowed-label
\n

Usage

\n

After installing the plugin, you can add the shadow to the shadowed label with the CSS syntax:

\n

text-shadow: <offset-x> <offset-y> <blur-radius> <color>

\n

E.g.

\n
.shadow1 {
    text-shadow: 1 1 3 blue;
}

.shadow2 {
    text-shadow: 10px 10px 10px rgba(100, 130, 200, 0.8);
}
\n

You can also add the text shadow as a property (e.g. <ShadowedLabel textShadow="1 1 1 #55a">)

\n

iOS note: The blur radius appears scatters the shadow more on iOS and on Android.

\n

NativeScript Plain

\n

IMPORTANT: Make sure you include xmlns:shadowedLabel="nativescript-shadowed-label" on the Page element

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:shadowedLabel=\"nativescript-shadowed-label\">
  <StackLayout class=\"p-20\">
    <shadowedLabel:ShadowedLabel
      class=\"h1 text-center\"
      text=\"title with CSS shadow\"
    />
    <shadowedLabel:ShadowedLabel
      text=\"color shadow\"
      textShadow=\"2 10 4 rgb(255, 100, 100)\"
      fontStyle=\"italic\"
      fontSize=\"40\"
      class=\"m-b-20 text-center\"
    />
    <shadowedLabel:ShadowedLabel
      class=\"m-t-20 c-black\"
      style=\"text-shadow: 1 1 1 #55a\"
      textWrap=\"true\"
      text=\"Shadow in 'style'!\"
    />
  </GridLayout>
</Page>
\n

CSS

\n
.h1 {
    text-shadow: 2 2 2 #aaa;
    font-weight: bold;
}
\n
\n

NativeScript Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { ShadowedLabel } from 'nativescript-shadowed-label;
registerElement('ShadowedLabel', () => ShadowedLabel);
\n
<ShadowedLabel class=\"h1 text-center\" text=\"title with CSS shadow\" />
<ShadowedLabel
    text=\"color shadow\"
    textShadow=\"2 10 4 rgb(255, 100, 100)\"
    fontStyle=\"italic\"
    fontSize=\"40\"
    class=\"m-b-20 text-center\"
/>
<ShadowedLabel
    class=\"m-t-20 c-black\"
    style=\"text-shadow: 1 1 1 #55a\"
    textWrap=\"true\"
    text=\"Shadow in 'style'!\"
/>
\n
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';
Vue.registerElement('ShadowedLabel', () => require('nativescript-shadowed-label').ShadowedLabel);
\n
<shadowed-label
    text=\"color shadow\"
    textShadow=\"2 10 4 rgb(255, 100, 100)\"
    fontStyle=\"italic\"
    fontSize=\"40\"
    class=\"m-b-20 text-center\"
/>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-filterable-listpicker":{"name":"@nstudio/nativescript-filterable-listpicker","version":"3.0.2","license":"Apache-2.0","readme":"

\"Twitter

\n

The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

\n \n

Installation

\n
npm install @nstudio/nativescript-filterable-listpicker
\n

Usage

\n

In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

\n

NativeScript Core

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"@nstudio/nativescript-filterable-listpicker\">
    <GridLayout rows=\"\" columns=\"\">
        <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
        <GridLayout rows=\"*, auto, *\">
            <StackLayout height=\"300\">
                <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
            </StackLayout>
        </GridLayout>
        <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
        <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
    </GridLayout>
</Page>
\n

Then in your code...

\n
public showPicker() {
    page.getViewById('myfilter').show();
}

public itemTapped(args) {
    alert(args.selectedItem + ' was tapped!')
}

public cancelFilterableList() {
    // this gets called if the user cancels the modal. 
}
\n

Use as Autocomplte

\n

You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

\n
let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

private filterableListpicker: FilterableListpicker;
private page: Page;
constructor(page: Page) {
    super();
    this.page = page;
    // Get filterableListpicker instance
    this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
    MyModel = this;
}

public showPickerAsAutocomplete() {
    // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
    this.filterableListpicker.isAutocomplete = true;
    this.filterableListpicker.show(frame.topmost());
    
    this.filterableListpicker.autocomplete((data) => {
        let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
        http.getJSON<Predictions>(url).then((res) => {
            //console.dir(res)
            const airportsCollection = res.predictions;
            const items = [];
            for (let i = 0; i < airportsCollection.length; i++) {
                items.push({
                    title: airportsCollection[i].description,
                    description: \"\",
                    source: airportsCollection[i]
                });
                
            }
            this.set(\"listitems\", items)
        }).catch((err) => {
            const message = 'Error fetching remote data from ' + url + ': ' + err.message;
            console.log(message);
            alert(message);
        });
    });
}
\n

NativeScript Angular

\n

In angular, you have to register the element in your app component like so:

\n
// app.component.ts
import {registerElement} from \"@nativescript/angular\";
import {FilterableListpicker} from '@nstudio/nativescript-filterable-listpicker';
registerElement(\"FilterableListpicker\", () => FilterableListpicker);
\n

Then use it in your templates like...

\n
<GridLayout>
    <Image src=\"res://nicebackgroundimage.jpg\"></Image>
    <StackLayout>
        <Label text=\"Whats your favorite programming language?\"></Label>
        <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
    </StackLayout>
    <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
</GridLayout>
\n

Then in your code...

\n
@ViewChild('myfilter') myfilter: ElementRef;

cancelFilterableList() {
    console.log('canceled');
}

itemTapped(args) {
    alert(args.selectedItem)
}

showPicker() {
    this.myfilter.nativeElement.show();
}
\n

Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

\n

in android:

\n
@ViewChild('myContainer') myContainer: ElementRef;

public function showPicker() {
  this.myfilter.nativeElement.show(this.myContainer.nativeElement);
}
\n

Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

\n

Source Array

\n

As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
titleThe title, this is what your list will be filtered on, and it will display in bold.
imageOPTIONAL: This will display to the left of the title.
descriptionOPTIONAL: This will display under the title smaller and in gray.
\n

Here's some example code:

\n
public listitems = [
    {
        \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
        \"title\": \"Brown Bear\",
        \"description\": \"Brown bear brown bear, what do you see?\"
    },
    {
        \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
        \"title\": \"Red Bird\"
    },
    {
        \"title\": \"Purple Cat\",
        \"description\": \"Why are we teaching kids there are purple cats?\"
    }
];
\n

You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

\n

Here's how it will look in the picker:

\n\n

Webpack

\n

Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

\n

API

\n

The UI element accepts the following parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
listWidth300The width of the modal element.
listHeight300The height of the modal element.
focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
canceledThis is just a function to call if the user cancels, probably rarely neccessary.
showCancelShow cancel button or not.
enableSearchAllow searching by showing the TextField at the top.
autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
\n

CSS Styling

\n
.flp-container .flp-list-container {
  border-radius: 10;
}
.flp-container .flp-list-container .flp-listview {
  background-color: white;
}

.flp-container .flp-list-container .flp-listview .flp-row {
  background-color: white;
}
/* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
  padding: 10;
} */
.flp-container .flp-list-container .flp-listview .flp-row .flp-image {
  margin: 10 0 10 5;
  width: 30;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
  margin: 10 10 10 5;
  /* margin: 0 10 0 10; */
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
  font-weight: bold; 
  font-size: 16;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
  color: gray; 
  font-size: 13;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
  margin-left: 15; 
  padding: 10 0;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
  color: lightblue;
}

.flp-container .flp-hint-field {
  padding: 10 15; 
  height: 40; 
  background-color: #E0E0E0; 
  border-radius: 10 10 0 0;
}

.flp-container .flp-cancel-container {
  background-color: #E0E0E0; 
  height: 40; 
  border-radius: 0 0 10 10;
}

.flp-container .flp-cancel-container .flp-btn-cancel {
  font-weight: bold; 
  height: 40; 
  background-color: transparent; 
  border-color: transparent; 
  border-width: 1; 
  font-size: 12;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-algolia":{"name":"nativescript-algolia","version":"1.2.4","license":{"type":"MIT","url":"https://github.com/arpit2438735/nativescript-algolia/blob/master/LICENSE"},"readme":"

NativeScript-Algolia

\n

\"Build

\n

NativeScript plugin for Algolia search.

\n

This plugin is designed to mirror, as closely as possible, the structure of Algolia’s JavaScript client. You don't have to change or add any extra logic for existing applications, it will work for NativeScript.

\n

License

\n

This plugin is licensed under the MIT license by Arpit Srivastava

\n

Installation

\n

To install, type

\n
tns plugin add nativescript-algolia
\n

Table of Contents

\n
    \n
  1. \n

    Install

    \n\n
    2. \n
  2. \n

    Quick Start

    \n\n
    3. \n
\n

Getting Started

\n

Install

\n

NativeScript

\n
tns plugin add nativescript-algolia
\n

Quick Start

\n

In 30 seconds, this quick start tutorial will show you how to index and search objects.

\n

Initialize the client

\n

You first need to initialize the client. For that, you will need your Application ID and API Key.\nYou can find both of them on your Algolia account.

\n
import {Algolia} from \"nativescript-algolia\";
var client = new Algolia('applicationID', 'apiKey');
var index = client.initIndex('contacts');
\n

Push data

\n

Without any prior configuration, you can start indexing 500 contacts in the contacts index using the following code:

\n
var index = client.initIndex('contacts');
var contactsJSON = require('./contacts.json');

index.addObjects(contactsJSON, function(content, err) {
  if (err) {
    console.error(err);
  }
});
\n

Search

\n

With these tasks complete, you can now search for contacts by querying fields such as firstname, lastname, company and more. As Algolia is typo tolerant, common misspellings can be handled with ease:

\n
// firstname
index.search('jimmie', function(content, err) {
  console.log(content.hits);
});

// firstname with typo
index.search('jimie', function(content, err) {
  console.log(content.hits);
});

// a company
index.search('california paint', function(content, err) {
  console.log(content.hits);
});

// a firstname & company
index.search('jimmie paint', function(content, err) {
  console.log(content.hits);
});
\n

Configure

\n

Settings can be customized to tune the search behavior. For example, you can add a custom sort by number of followers to the already great built-in relevance:

\n
index.setSettings({
  'customRanking': ['desc(followers)']
}, function(err, content) {
  console.log(content);
});
\n

You can also configure the list of attributes you want to index by order of importance (ex: firstname = most important):

\n

Note: Since the engine is designed to suggest results as you type, you'll generally search by prefix.\nIn this case the order of attributes is very important to decide which hit is the best:

\n
index.setSettings({
  'searchableAttributes': [
    'lastname',
    'firstname',
    'company',
    'email',
    'city',
    'address'
  ]
}, function(content, err) {
  console.log(content);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-share-file":{"name":"@finanzritter/nativescript-share-file","version":"2.1.0","license":"Apache-2.0","readme":"

Nativescript Share File

\n

\"npm\"\n\"npm\"\n\"Publish\"

\n

:construction: Work in progress

\n

This package was forked from the unmaintained package\nbraune-digital/nativescript-share-file.\nWe are currently cleaning up and updating the code.

\n
\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install @finanzritter/nativescript-share-file
\n

Android FileProvider Setup

\n

On Android, you must add a FileProvider definition and specify available files, which is documented here or have a look at the demo app (AndroidManifest.xml and file_paths.xml).

\n

Usage

\n

Info: Shared files should be in the documents path.

\n
import { ShareFile } from '@finanzritter/nativescript-share-file';
import { Observable, knownFolders, path, File } from \"@nativescript/core\";

export class TestClass extends Observable {
  shareFile;
  fileName;
  documents;
  path;
  file;

  constructor() {
    super();

    this.fileName = 'test.txt';
    this.documents = knownFolders.documents();
    this.path = path.join(this.documents.path, this.fileName);
    this.file = File.fromPath(this.path);

    this.shareFile = new ShareFile();

    this.shareFile.open({
      path: this.path,
      intentTitle: 'Open text file with:', // optional Android
      rect: { // optional iPad
        x: 110,
        y: 110,
        width: 0,
        height: 0
      },
      options: true, // optional iOS
      animated: true // optional iOS
    });
  }
}
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync":{"name":"nativescript-app-sync","version":"2.0.0","license":"MIT","readme":"

NativeScript AppSync plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

A live-update service for your NativeScript apps!

\n
\n

📣 NOTE: NativeScript AppSync is currently in beta and is not supported by the core NativeScript team. AppSync is based on Microsoft CodePush and we owe them thanks because this solution builds upon their work. ❤️

\n
\n
\n Optional reading: what this is, and how it works\n

A NativeScript app is composed of XML/HTML, CSS and JavaScript files and any accompanying images, which are bundled together by the NativeScript CLI and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.

\n

The AppSync plugin helps get product improvements in front of your end users instantly, by keeping your code and images synchronized with updates you release to the AppSync server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!

\n

In order to ensure that your end users always have a functioning version of your app, the AppSync plugin maintains a copy of the previous update, so that in the event that you accidentally push an update which includes a crash, it can automatically roll back. This way, you can rest assured that your newfound release agility won't result in users becoming blocked before you have a chance to roll back on the server. It's a win-win-win!

\n\n

Architectural overview of the solution - you don't need to worry about all of this

\n
\n

What can (and will) be AppSync'ed?

\n\n
\n

💁‍♂️ Note that we don't actually use those folders, but the app folder in platforms/ios/<appname>/app and platforms/android/app/src/main/assets/app, the benefit of which is we don't "care" if you use Webpack or Uglify or whatever tools you use to minify or scramble your app's assets.

\n
\n

What can't (and won't):

\n\n

So as long as you don't change versions of dependencies and tns platforms in your package.json you\ncan push happily. And if you do bump a version of a dependency make sure there are no changed platform libraries.

\n

Getting Started

\n

Globally install the NativeScript AppSync CLI

\n
npm i -g nativescript-app-sync-cli
\n
\n

💁‍♂️ This will also add the global nativescript-app-sync command to your machine. You can check the currently installed version with nativescript-app-sync -v.

\n
\n

Login or register with the service

\n

Check if you're already logged in, and with which email address:

\n
nativescript-app-sync whoami
\n

Log in if you already have an account:

\n
nativescript-app-sync login
\n

Register if you don't have an account yet:

\n
nativescript-app-sync register
\n

This will open a browser where you can provide your credentials, after which you can create an access key that\nyou can paste in the console.

\n

You should now have a .nativescript-app-sync.config file in your home folder which will automatically\nauthenticate you with the server on this machine from now on.

\n
\n

Note that you could use a that web interface for managing you apps, but the CLI is much more sophisticated, so it's recommended to use the command line interface.

\n
\n

To log out, you can run nativescript-app-sync logout which will also remove the config file.

\n

To perform a headless login (without opening a browser), you can do: nativescript-app-sync login --accessKey <access key>.

\n

Register your app with the service

\n

Create an app for each platform you target. That way you can roll out release seperately for iOS and Android.

\n
\n

⚠️ The appname must be unique, and should not contain dashes (-).

\n
\n
nativescript-app-sync app add <appname> <platform>

# examples:
nativescript-app-sync app add MyAppIOS ios
nativescript-app-sync app add MyAppAndroid android
\n
\n

💁‍♂️ This will show you your deployment keys you'll need when connecting to the AppSync server. If you want to list those keys at any later time, use nativescript-app-sync deployment ls <appName> --displayKeys.

\n
\n
\n

💁‍♂️ All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels. If you need more channels/deployments, simply run: nativescript-app-sync deployment add <appName> <deploymentName>.

\n
\n
\n

💁‍♂️ Want to rename your app? At any time, use the command: nativescript-app-sync app rename <oldName> <newName>

\n
\n
\n

💁‍♂️ Want to delete an app? At any time, use the command: nativescript-app-sync app remove <appName> - this means any apps that have been configured to use it will obviously stop receiving updates.

\n
\n

List your registered apps

\n
nativescript-app-sync app ls
\n

Add this plugin to your app

\n
tns plugin add nativescript-app-sync
\n
\n

⚠️ If you're restricting access to the internet from within your app, make sure you whitelist our AppSync server (https://appsync-server.nativescript.org) and File server (https://s3.eu-west-1.amazonaws.com).

\n
\n

Checking for updates

\n

With the AppSync plugin installed and configured, the only thing left is to add the necessary code to your app to control when it checks for updates.

\n

If an update is available, it will be silently downloaded, and installed.

\n

Then based on the provided InstallMode the plugin either waits until the next cold start (InstallMode.ON_NEXT_RESTART),\nwarm restart (InstallMode.ON_NEXT_RESUME), or a positive response to a user prompt (InstallMode.IMMEDIATE).

\n

Note that Apple doesn't want you to prompt the user to restart your app, so use InstallMode.IMMEDIATE on iOS only for Enterprise-distributed apps (or when testing your app through TestFlight for instance).

\n
\n

💁‍♂️ Check out the demo for a solid example.

\n
\n
// import the main plugin classes
import { AppSync } from \"nativescript-app-sync\";

// and at some point in your app:
AppSync.sync({
  deploymentKey: \"your-deployment-key\" // note that this key depends on the platform you're running on (see the example below)
});
\n

There's a few things you can configure - this TypeScript example has all the possible options:

\n
import { AppSync, InstallMode, SyncStatus } from \"nativescript-app-sync\";
import { isIOS } from \"tns-core-modules/platform\";

AppSync.sync({
    enabledWhenUsingHmr: false, // this is optional and by default false so AppSync and HMR don't fight over app updates
    deploymentKey: isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
    installMode: InstallMode.ON_NEXT_RESTART, // this is the default install mode; the app updates upon the next cold boot (unless the --mandatory flag was specified while pushing the update) 
    mandatoryInstallMode: isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE, // the default is InstallMode.ON_NEXT_RESUME which doesn't bother the user as long as the app is in the foreground. InstallMode.IMMEDIATE shows an installation prompt. Don't use that for iOS AppStore distributions because Apple doesn't want you to, but if you have an Enterprise-distributed app, go right ahead!
    updateDialog: { // only used for InstallMode.IMMEDIATE
      updateTitle: \"Please restart the app\", // an optional title shown in the update dialog 
      optionalUpdateMessage: \"Optional update msg\",   // a message shown for non-\"--mandatory\" releases 
      mandatoryUpdateMessage: \"Mandatory update msg\", // a message shown for \"--mandatory\" releases
      optionalIgnoreButtonLabel: \"Later\", // if a user wants to continue their session, the update will be installed on next resume
      mandatoryContinueButtonLabel: isIOS ? \"Exit now\" : \"Restart now\", // On Android we can kill and restart the app, but on iOS that's not possible so the user has to manually restart it. That's why we provide a different label in this example.
      appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to AppSync
    }
  }, (syncStatus: SyncStatus, updateLabel?: string): void => {
    console.log(\"AppSync syncStatus: \" + syncStatus);
    if (syncStatus === SyncStatus.UP_TO_DATE) {
      console.log(`AppSync: no pending updates; you're running the latest version, which is ${updateLabel}`);
    } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
      console.log(`AppSync: update installed (${updateLabel}) - it will be activated upon next cold boot`);
    }
});
\n
\n Click here to see a JavaScript example\n
var AppSync = require(\"nativescript-app-sync\").AppSync;
var InstallMode = require(\"nativescript-app-sync\").InstallMode;
var SyncStatus = require(\"nativescript-app-sync\").SyncStatus;
var platform = require(\"tns-core-modules/platform\");

AppSync.sync({
    enabledWhenUsingHmr: false, // this is optional and by default false so AppSync and HMR don't fight over app updates
    deploymentKey: platform.isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
    installMode: InstallMode.ON_NEXT_RESTART,
    mandatoryInstallMode: platform.isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE,
    updateDialog: {
      optionalUpdateMessage: \"Optional update msg\",
      updateTitle: \"Please restart the app\",
      mandatoryUpdateMessage: \"Mandatory update msg\",
      optionalIgnoreButtonLabel: \"Later\",
      mandatoryContinueButtonLabel: platform.isIOS ? \"Exit now\" : \"Restart now\",
      appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to AppSync
    }
}, function (syncStatus, updateLabel) {
    if (syncStatus === SyncStatus.UP_TO_DATE) {
      console.log(\"AppSync: no pending updates; you're running the latest version, which is: \" + updateLabel);
    } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
      console.log(\"AppSync: update (\" + updateLabel + \") installed - it will be activated upon next cold boot\");
    }
});
\n
\n

When should this check run?

\n

It's recommended to check for updates more than once in a cold boot cycle,\nso it may be easiest to tie this check to the resume event (which usually also runs on app startup):

\n
import * as application from \"tns-core-modules/application\";
import { AppSync } from \"nativescript-app-sync\";

// add this in some central place that's executed once in a lifecycle
application.on(application.resumeEvent, () => {
  AppSync.sync(...);
});
\n
\n Click here to see a JavaScript example\n
var application = require(\"tns-core-modules/application\");

application.on(application.resumeEvent, function () {
  // call the sync function
});
\n
\n

Releasing an update

\n

Once your app has been configured and distributed to your users, and you've made some code and/or asset changes,\nit's time to instantly unleash those changes onto your users!

\n
\n

⚠️ Make sure to create a release build first, so use the same command that you'd use for app store distribution, just don't send it to the AppStore. You can even Webpack and Uglify your app, it's all transparent to this plugin.

\n
\n
\n

💁‍♂️ When releasing updates to AppSync, you do not need to bump your app's version since you aren't modifying the app store version at all. AppSync will automatically generate a "label" for each release you make (e.g. v3) in order to help identify it within your release history.

\n
\n

The easiest way to do this is to use the release command in our AppSync CLI. Its (most relevant) options are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
paramaliasdefaultdescription
deploymentNamed"Staging"Deploy to either "Staging" or "Production".
descriptiondesnot setDescription of the changes made to the app with this release.
targetBinaryVersiontApp_ResourcesSemver expression that specifies the binary app version(s) this release is targeting (e.g. 1.1.0, ~1.2.3). The default is the exact version in App_Resources/iOS/Info.plist or App_Resources/Android/AndroidManifest.xml.
mandatorymnot setThis specifies whether or not the update should be considered "urgent" (e.g. it includes a critical security fix). This attribute is simply round tripped to the client, who can then decide if and how they would like to enforce it. If this flag is not set, the update is considered "not urgent" so you may choose to wait for the next cold boot of the app. It does not mean users get to 'opt out' from an update; all AppSync updates will eventually be installed on the client.
\n

Have a few examples for both platforms:

\n

iOS

\n
nativescript-app-sync release <c-ios-appname> ios # deploy to Staging
nativescript-app-sync release <AppSync-ios-appname> ios --d Production # deploy to Production (default: Staging)
nativescript-app-sync release <AppSync-ios-appname> ios --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in Info.plist)
nativescript-app-sync release <AppSync-ios-appname> ios --mandatory --description \"My mandatory iOS version\" # a release for iOS that needs to be applied ASAP.
\n

Android

\n
nativescript-app-sync release <AppSync-android-appname> android # deploy to Staging
nativescript-app-sync release <AppSync-android-appname> android --d Production # deploy to Production (default: Staging)
nativescript-app-sync release <AppSync-android-appname> android --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in AndroidManifest.xml)
\n
\n Click here to learn more about the --targetBinaryVersion param\nThe `targetBinaryVersion` specifies the store/binary version of the application you are releasing the update for, so that only users running that version will receive the update, while users running an older and/or newer version of the app binary will not. This is useful for the following reasons:\n
    \n
  1. \n

    If a user is running an older binary version, it's possible that there are breaking changes in the AppSync update that wouldn't be compatible with what they're running.

    \n
    2. \n
  2. \n

    If a user is running a newer binary version, then it's presumed that what they are running is newer (and potentially incompatible) with the AppSync update.

    \n
    3. \n
\n

If you ever want an update to target multiple versions of the app store binary, we also allow you to specify the parameter as a semver range expression. That way, any client device running a version of the binary that satisfies the range expression (i.e. semver.satisfies(version, range) returns true) will get the update. Examples of valid semver range expressions are as follows:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Range ExpressionWho gets the update
1.2.3Only devices running the specific binary app store version 1.2.3 of your app
*Any device configured to consume updates from your AppSync app
1.2.xDevices running major version 1, minor version 2 and any patch version of your app
1.2.3 - 1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (inclusive)
>=1.2.3 <1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (exclusive)
1.2Equivalent to >=1.2.0 <1.3.0
~1.2.3Equivalent to >=1.2.3 <1.3.0
^1.2.3Equivalent to >=1.2.3 <2.0.0
\n

*NOTE: If your semver expression starts with a special shell character or operator such as >, ^, or **\n, the command may not execute correctly if you do not wrap the value in quotes as the shell will not supply the right values to our CLI process. Therefore, it is best to wrap your targetBinaryVersion parameter in double quotes when calling the release command, e.g. app-sync release MyApp-iOS updateContents ">1.2.3".

\n

NOTE: As defined in the semver spec, ranges only work for non pre-release versions: https://github.com/npm/node-semver#prerelease-tags. If you want to update a version with pre-release tags, then you need to write the exact version you want to update (1.2.3-beta for example).

\n

The following table outlines the version value that AppSync expects your update's semver range to satisfy for each respective app type:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSource of app store version
NativeScript (iOS)The CFBundleShortVersionString key in the App_Resources/iOS/Info.plist file
NativeScript (Android)The android:versionName key in the App_Resources/Android/AndroidManifest.xml file
\n

NOTE: If the app store version in the metadata files are missing a patch version, e.g. 2.0, it will be treated as having a patch version of 0, i.e. 2.0 -> 2.0.0. The same is true for app store version equal to plain integer number, 1 will be treated as 1.0.0 in this case.

\n
\n

Gaining insight in past releases

\n

Here are a few AppSync CLI commands you may find useful:

\n

Which releases did I create and what are the install metrics?

\n

Using a command like this will tell you how many apps have the update installed:

\n
nativescript-app-sync deployment history <appsync-appname> Staging
\n

Which produces something like this:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LabelRelease TimeApp VersionMandatoryDescriptionInstall Metrics
v2an hour ago1.0.0YesMandatory iOS version!Active: 11% (2 of 19)
Total: 2
v12 hours ago1.0.0NoAwesome iOS version!Active: 26% (5 of 19)
Total: 5
\n

Give me the details of the current release!

\n

This dumps the details of the most recent release for both the Staging and Production environments of your app:

\n
nativescript-app-sync deployment ls <appsync-appname>
\n

And if you want to dump your deployment keys as well, use:

\n
nativescript-app-sync deployment ls <appsync-appname> --displayKeys
\n

Which produces something like this:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDeployment KeyUpdate MetadataInstall Metrics
Productionr1DVaLfKjc0Y5d6BzqX4..No updates releasedNo installs recorded
StagingYTmVMy0GLCknVu3GVIyn..Label: v5Active: 11% (2 of 19)
App Version: 1.0.0Total: 2
Mandatory: Yes
Release Time: an hour ago
Released By: eddyverbruggen@gmail.com
Description: Mandatory iOS version!
\n

Clearing the release history

\n

This won't roll back any releases, but it cleans up the history metadata (of the Staging app, in this case):

\n
nativescript-app-sync deployment clear <appsync-appname> Staging
\n

Advanced topics

\n

Testing AppSync packages during development

\n

You may want to play with AppSync before using it in production (smart move!).\nPerform these steps once you've pushed an update and added the sync command to your app:

\n\n

Running the demo app

\n

You may also play with AppSync by using its demo app. Here are the steps you need to perform in order to observe an app update:

\n\n

Patching Update Metadata

\n

After releasing an update, there may be scenarios where you need to modify one or more of the metadata attributes associated with it\n(e.g. you forgot to mark a critical bug fix as mandatory.

\n
\n Read all about patching metadata by clicking here.\n

You can update metadata by running the following command:

\n
nativescript-app-sync patch <appName> <deploymentName>
[--label <releaseLabel>]
[--mandatory <isMandatory>]
[--description <description>]
[--targetBinaryVersion <targetBinaryVersion>]
\n
\n

⚠️ This command doesn't allow modifying the actual update contents of a release. If you need to respond to a release that has been identified as being broken, you should use the rollback command to immediately roll it back, and then if necessary, release a new update with the approrpriate fix when it is available.

\n
\n

Aside from the appName and deploymentName, all parameters are optional, and therefore, you can use this command to update just a single attribute or all of them at once.\nCalling the patch command without specifying any attribute flag will result in a no-op.

\n
# Mark the latest production release as mandatory
nativescript-app-sync patch MyAppiOS Production -m

# Add a \"mina and max binary version\" to an existing release
nativescript-app-sync patch MyAppiOS Staging -t \"1.0.0 - 1.0.5\"
\n
\n

Promoting Updates

\n
\n Read this if you want to easily promote releases from Staging to Production\n

Once you've tested an update against a specific deployment (e.g. Staging),\nand you want to promote it (e.g. dev->staging, staging->production),\nyou can simply use the following command to copy the release from one deployment to another:

\n
nativescript-app-sync promote <appName> <sourceDeploymentName> <destDeploymentName>
[--description <description>]
[--label <label>]
[--mandatory]
[--targetBinaryVersion <targetBinaryVersion]

# example
nativescript-app-sync promote AppSyncDemoIOS Staging Production --description 'Promoted from Staging to Production'
\n

The promote command will create a new release for the destination deployment, which includes the exact code and metadata (description, mandatory and target binary version) from the latest release of the source deployment.\nWhile you could use the release command to "manually" migrate an update from one environment to another, the promote command has the following benefits:

\n
    \n
  1. \n

    It's quicker, since you don't need to reassemble the release assets you want to publish or remember the description/app store version that are associated with the source deployment's release.

    \n
    2. \n
  2. \n

    It's less error-prone, since the promote operation ensures that the exact thing that you already tested in the source deployment (e.g. Staging) will become active in the destination deployment (e.g. Production).

    \n
    3. \n
\n
\n

💁‍♂️ Unless you need to make changes to your code, the recommended workflow is taking advantage of the automatically created Staging and Production environments, and do all releases directly to Staging, and then perform a promote from Staging to Production after performing the appropriate testing.

\n
\n
\n

Rolling Back Updates

\n
\n Read this if you want to learn all about rollbacks\n

A deployment's release history is immutable, so you cannot delete or remove individual updates once they have been released without deleting all of the deployment's release history.\nHowever, if you release an update that is broken or contains unintended features,\nit is easy to roll it back using the rollback command:

\n
nativescript-app-sync rollback <appName> <deploymentName>

#example
nativescript-app-sync rollback MyAppiOS Production
\n

This has the effect of creating a new release for the deployment that includes the exact same code and metadata as the version prior to the latest one.\nFor example, imagine that you released the following updates to your app:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ReleaseDescriptionMandatory
v1Initial release!Yes
v2Added new featureNo
v3Bug fixesYes
\n

If you ran the rollback command on that deployment, a new release (v4) would be created that included the contents of the v2 release.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ReleaseDescriptionMandatory
v1Initial release!Yes
v2Added new featureNo
v3Bug fixesYes
v4 (Rollback from v3 to v2)Added new featureNo
\n

End-users that had already acquired v3 would now be "moved back" to v2 when the app performs an update check.\nAdditionally, any users that were still running v2, and therefore, had never acquired v3, wouldn't receive an update since they are already running the latest release\n(this is why our update check uses the package hash in addition to the release label).

\n

If you would like to rollback a deployment to a release other than the previous (e.g. v3 -> v2), you can specify the optional --targetRelease parameter:

\n
nativescript-app-sync rollback MyAppiOS Production --targetRelease v34
\n
\n

⚠️ This rolls back the release to the previous AppSync version, NOT the AppStore version (if there was one in between).

\n
\n
\n

💁‍♂️ The release produced by a rollback will be annotated in the output of the deployment history command to help identify them more easily.

\n
\n
\n

App Collaboration

\n
\n Working on one app with multiple developers? Click here!\n

If you will be working with other developers on the same AppSync app, you can add them as collaborators using the following command:

\n
nativescript-app-sync collaborator add <appName> <collaboratorEmail>
\n

NOTE: This expects the developer to have already registered with AppSync using the specified e-mail address, so ensure that they have done that before attempting to share the app with them.

\n

Once added, all collaborators will immediately have the following permissions with regards to the newly shared app:

\n
    \n
  1. View the app, its collaborators, deployments and release history.
    2. \n
  2. Release updates to any of the app's deployments.
    3. \n
  3. Rollback any of the app's deployments
    4. \n
\n

Inversely, that means that an app collaborator cannot do any of the following:

\n
    \n
  1. Rename or delete the app
    2. \n
  2. Create, rename or delete new deployments within the app
    3. \n
  3. Clear a deployment's release history
    4. \n
  4. Add or remove collaborators from the app (although a developer can remove themself as a collaborator from an app that was shared with them).
    5. \n
\n

Over time, if someone is no longer working on an app with you, you can remove them as a collaborator using the following command:

\n
nativescript-app-sync collaborator rm <appName> <collaboratorEmail>
\n

If at any time you want to list all collaborators that have been added to an app, you can simply run the following command:

\n
nativescript-app-sync collaborator ls <appName>
\n
\n

Using AppSync behind a proxy

\n
\n Click here to read all about Proxy Support\nBy default, the `login` command will automatically look for a system-wide proxy, specified via an `HTTPS_PROXY` or `HTTP_PROXY` environment variable, and use that to connect to the server.\nIf you'd like to disable this behavior, and have the CLI establish a direct connection, simply specify the `--noProxy` parameter when logging in:\n
nativescript-app-sync login --noProxy
\n

I'd you like to explicitly specify a proxy server that the CLI should use, without relying on system-wide settings,\nyou can instead pass the --proxy parameter when logging in:

\n
nativescript-app-sync login --proxy https://foo.com:3454
\n

Once you've logged in, any inferred and/or specified proxy settings are persisted along with your user session.\nThis allows you to continue using the CLI without needing to re-authenticate or re-specify your preferred proxy.\nIf at any time you want to start or stop using a proxy, simply logout, and then log back in with the newly desired settings.

\n
\n

Troubleshooting

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-star-ratings-ext":{"name":"nativescript-star-ratings-ext","version":"1.0.0","license":"Apache-2.0","readme":"

#ATENTION. DOES NOT INSTALL HIS LIBRARY. THIS IS A TEST PROJECT#. DOWNLOAD THE RIGHT LIBRARY

\n

#FORKED FROM:

\n

NativeScript Star Ratings

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-star-ratings
\n

Configuration

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-star-ratings" on the\nPage element

\n
<ui:StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"2\" max=\"5\"/>
\n

Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);
\n
<StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"{{value}}\" max=\"{{max}}\" isindicator=\"false\"></StarRating>
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
emptyBorderColorbluestring
  • - [ ]
IOS only
emptyColorwhitestring
  • - [ ]
filledBorderColorbluestring
  • - [ ]
IOS only
filledColorbluestring
  • - [ ]
value0number
  • - [ ]
max5number
  • - [ ]
isindicatorfalseboolean
  • - [ ]
Android only
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvaslabel":{"name":"nativescript-canvaslabel","version":"1.0.10","license":"ISC","readme":"

NativeScript Label widget

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript Label widget. This widget takes a different approch from other label components. It is based on nativescript-canvas and allows drawing\nmultiple labels within one single widget.\nIt allows extreme complexity and customization.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-canvaslabel

\n

This command automatically installs the necessary files, as well as stores nativescript-canvaslabel as a dependency in your project's package.json file.

\n

Configuration

\n

It works almost like a normal label.\nYou can create spans, just like with the {N} labels. However there is a big difference with the {N} component.\nCSpan do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.

\n

For now CanvasLabel do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.

\n

The CanvasLabel component supports most labels properties:\ncolor, fontSize,fontFamily,fontStyle, fontWeight,textAlignment. Those can be defined through css.

\n

Now with CanvasLabel you don't set the text directly. Instead you create CSpan or CGroup

\n

Here is a complex Vue layout as an example

\n
<CanvasLabel id=\"canvaslabel\" fontSize=\"10\" color=\"white\" backgroundColor=\"darkgray\">
    <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
        <CSpan :text=\"item.text1\" fontWeight=\"bold\" />
        <CSpan :text=\"'\\n' + item.text2\" color=\"#ccc\" fontSize=\"16\" />
    </CGroup>

    <CGroup fontSize=\"12\" verticalAlignment=\"bottom\" paddingLeft=\"20\" paddingBottom=\"1\">
        <CSpan :text=\"item.icon1\" fontSize=\"20\" color=\"green\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon1\" verticalTextAlignment=\"center\" />
        <CSpan :text=\"'   ' + item.icon2\" fontSize=\"20\" color=\"red\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon2\" verticalTextAlignment=\"center\" />
        <CSpan :text=\"'   ' + item.icon3\" fontSize=\"20\" color=\"yellow\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"' ' + item.texticon3\" verticalTextAlignment=\"center\" />
    </CGroup>

    <CGroup fontSize=\"12\" verticalAlignment=\"middle\" horizontalAlignment=\"center\" textAlignment=\"right\" paddingRight=\"20\" color=\"brown\" width=\"60\">
        <CSpan :text=\"item.icon1\" fontSize=\"14\" :fontFamily=\"mdiFontFamily\" />
        <CSpan :text=\"'\\n' + item.texticon1\" paddingRight=\"10\" />
    </CGroup>
    <CSpan :text=\"item.text4\" color=\"lightgray\" fontSize=\"14\" textAlignment=\"right\" paddingRight=\"20\" paddingTop=\"4\" />
</CanvasLabel>
\n

For full example / doc look at the vue demo and the typings.

\n

Performances

\n

CanvasLabel is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.\nThat technique is used by many apps looking for the best performances. One of the best examples is Telegram.

\n

TODO / Limitations

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stringformat":{"name":"nativescript-stringformat","version":"2.3.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-stringformat/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript StringFormat

\n

A NativeScript module for handling strings.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-stringformat
\n

inside your app project to install the module.

\n

Demo

\n

For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

\n

Otherwise ...

\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Examples

\n

Simple example

\n
import StringFormat = require('nativescript-stringformat');

// \"TM + MK\"
var newStr1 = StringFormat.format(\"{0} + {1}\",
                                  \"TM\",  // {0}
                                  \"MK\");  // {1}
                                 
// the alternative:
var newStr2 = StringFormat.formatArray(\"{0} + {1}\",
                                       [\"TM\", \"MK\"]);
\n

Custom order of arguments

\n
import StringFormat = require('nativescript-stringformat');

// \"Marcel Kloubert\"
var newStr = StringFormat.format(\"{1} {0}\",
                                 \"Kloubert\",   // {0}
                                 \"Marcel\");  // {1}
\n

Functions as arguments

\n

You can use functions that return the value that should be included into the target string:

\n
import StringFormat = require('nativescript-stringformat');

// \"23091979 + 5091979 = 28183958\"
var newStr = StringFormat.format(\"{0} + {1} = {2}\",
                                 23091979,  // {0}
                                 5091979,  // {1}
                                 function (index, args) {  // {2}
                                     return args[0] + args[1];  // 28183958
                                 });
\n

The full signature of a function:

\n
function (index, args, match, formatExpr, funcDepth) {
    return <THE-VALUE-TO-USE>;
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
indexThe index value of the argument. For {7} this will be 7
argsThe values that were passed to the underlying format() or formatArray() function.
matchThe complete (unhandled) expression of the argument.
formatExprThe optional format expression of the argument. For {0:lower} this will be lower.
funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
\n

Format providers

\n

Separated by a : an argument can contain a format expression at the right side.

\n

So you can define custom logic to convert an argument value.

\n

Lets say we want to define a format provider that converts values to upper and lower case strings:

\n
import StringFormat = require(\"nativescript-stringformat\");

StringFormat.addFormatProvider(function(ctx) {    
    var toStringSafe = function() { 
        return ctx.value ? ctx.value.toString() : \"\";
    }
    
    if (ctx.expression === \"upper\") {
        // UPPER case
        ctx.handled = true;
        return toStringSafe().toUpperCase();
    }
    
    if (ctx.expression === \"lower\") {
        // LOWER case
        ctx.handled = true;
        return toStringSafe().toLowerCase();
    }
});
\n

Now you can use the extended logic in your code:

\n
import StringFormat = require('nativescript-stringformat');

// MARCEL kloubert
var newStr = StringFormat.format(\"{0:upper} {1:lower}\",
                                 \"Marcel\", \"KlOUBERT\");
\n

The ctx object of a provider callback has the following structure:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
expressionThe expression right to :. In that example upper and lower.
handledDefines if value was handled or not. Is (false) by default.
valueThe value that should be parsed. In that example Marcel and KlOUBERT.
\n

The parsed value has to be returned and ctx.handled has to be set to (true).

\n

All upcoming format providers will be skipped if the value has been marked as "handled".

\n

Helper functions and classes

\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
compareCompares two strings.
concatJoins elements of an array to one string.
isEmptyChecks if a string is undefined, (null) or empty.
isEmptyOrWhitespaceChecks if a string is undefined, (null), empty or contains whitespaces only.
isNullOrEmptyChecks if a string is (null) or empty.
isNullOrUndefinedChecks if a string is (null) or undefined.
isNullOrWhitespaceChecks if a string is (null), empty or contains whitespaces only.
isWhitespaceChecks if a string is empty or contains whitespaces only.
joinJoins elements of an array to one string by using a separator.
similarityCalculates the similarity between two strings.
\n

Classes

\n
StringBuilder
\n
import StringFormat = require('nativescript-stringformat');

var builder = new StringFormat.StringBuilder();

for (var i = 0; i < 5; i++) {
    builder.appendFormat(\"Line #{1}: {0}\", i, i + 1)
           .appendLine();
}

// \"Line 1: 0
// Line 2: 1
// Line 3: 2
// Line 4: 3
// Line 5: 4\"
var str = builder.toString();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jailbreak-detector":{"name":"nativescript-jailbreak-detector","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript-Jailbreak-Detector

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n

A Nativescript plugin that makes detection of root and jailbreak hassle free.

\n

Contributors

\n

RootBeer

\n

DTTJailbreakDetection

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-jailbreak-detector
\n

iOS

\n

Does not need any configuration.

\n

Android

\n

Does not need any configuration.

\n

Usage

\n

Typescript

\n
import { JailbreakDetector } from 'nativescript-jailbreak-detector';
if (new JailbreakDetector().isRooted()) {
   // Logic here
 }
\n

iOS

\n

JailbreakDetector contains isJailBroken() method for IOS.

\n
import { JailbreakDetector } from 'nativescript-jailbreak-detector';import {isIOS} from \"tns-core-modules/platform\";
import {isIOS} from \"tns-core-modules/platform\";

if (isIOS && new JailbreakDetector().isJailBroken()) {
  // Logic here
}
\n

Note: isRooted() will call isJailBroken() internally for IOS devices so there is no need to check for platform before using isRooted() even on IOS.

\n

Android

\n

This plugin uses rootbeer package to find out is the device is rooted or not.\nHence it exposes all the other helper methods too.

\n
import { JailbreakDetector } from 'nativescript-jailbreak-detector';
const jailDetector = new JailbreakDetector();

// All the available methods
jailDetector.isRooted();
jailDetector.checkForBusyBoxBinary();
jailDetector.checkForDangerousProps();
jailDetector.checkForMagiskBinary();
jailDetector.checkForRootNative();
jailDetector.checkForRWPaths();
jailDetector.checkForSuBinary();
jailDetector.checkSuExists();
jailDetector.detectPotentiallyDangerousApps();
jailDetector.detectRootCloakingApps();
jailDetector.detectRootManagementApps();
jailDetector.detectTestKeys();
jailDetector.isRootedOrBusyboxInstalled();
jailDetector.isSelinuxFlagInEnabled();
\n

Demo

\n
# install required dependencies for demo and 
cd src && npm run postclone
# iOS
npm run demo.ios
# Android
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/flutter":{"name":"@nativescript/flutter","version":"0.1.3","license":"Apache-2.0","readme":"

@nativescript/flutter

\n

Use Flutter with NativeScript projects by creating a Flutter module in the root of your project.

\n

Usage

\n

Prerequisites:

\n\n

1. Add Flutter to a NativeScript app

\n

You can use Flutter in any existing NativeScript app or by creating a new one with ns create.

\n

We can then create a Flutter module at the root of the project directory:

\n
flutter create --template module flutter_views
\n

Note: You can run flutter run --debug or flutter build ios from inside this flutter_views folder as any normal Flutter project to develop it.

\n

Learn more from the Flutter documentation here.

\n

2. Configure your Dart code to have named entry points

\n

Named entry points allow us to use different Flutter views in our NativeScript app by matching the entry point with the view id, for example: <Flutter id="myFlutterView" />

\n\n
@pragma('vm:entry-point')
void myFlutterView() => runApp(const MyFlutterView());
\n

3. Configure platforms for usage

\n

iOS

\n

App_Resources/iOS/Podfile should contain the following to reference our Flutter module.

\n
platform :ios, '14.0'

flutter_application_path = '../../flutter_views'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)

post_install do |installer|
    flutter_post_install(installer) if defined?(flutter_post_install)
end
\n

Add Flutter debug permissions to App_Resources/iOS/Info.plist:

\n
<key>NSLocalNetworkUsageDescription</key>
<string>Allow Flutter tools to debug your views.</string>
<key>NSBonjourServices</key>
<array>
  <string>_dartobservatory._tcp</string>
</array>
\n

Android

\n

App_Resources/Android/app.gradle should contain the following:

\n
android {
  // ...

  defaultConfig {
    // ...

    // Add this section:
    ndk {
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
\n

App_Resources/Android/settings.gradle (create file if needed) should contain the following:

\n
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()

def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}

plugins.each { name, path ->
  def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
  include \":$name\"
  project(\":$name\").projectDir = pluginDirectory
}

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  // use the flutter module folder name you created here.
  // for example, a flutter module called 'flutter_views' exist at root of project
  '../flutter_views/.android/include_flutter.groovy'
))
\n

Build the module anytime you want to see your Dart changes reflected in NativeScript:

\n
cd flutter_views/.android

# This will build debug mode
./gradlew Flutter:assemble

# This will build release mode
./gradlew Flutter:assembleRelease
\n

4. Install @nativescript/flutter

\n
npm install @nativescript/flutter
\n

5. Use Flutter wherever desired

\n

Be sure to initialize the Flutter engine before bootstrapping your app, typically in app.ts or main.ts:

\n
import { init } from '@nativescript/flutter';
init();

// bootstrap app...
\n

When using flavors, you can just register the element for usage in your markup:

\n
import { Flutter } from '@nativescript/flutter'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('Flutter', () => Flutter)

// Solid
import { registerElement } from 'dominative';
registerElement('flutter', Flutter);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('flutter', () => Flutter);

// React
import { registerElement } from 'react-nativescript';
registerElement('flutter', () => Flutter);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('Flutter', () => Flutter)
\n

Use Flutter anywhere.

\n
<Flutter id=\"myFlutterView\"></Flutter>
\n

Troubleshooting

\n

Common troubleshooting tips:

\n

Android

\n

Before running Android, you will want to build the flutter module first. Otherwise you may see this error:

\n
Transform's input file does not exist: flutter_views/.android/Flutter/build/intermediates/flutter/debug/libs.jar
\n

You can fix by running the following:

\n
cd flutter_views/.android

# This will build debug mode
./gradlew Flutter:assemble

# This will build release mode
./gradlew Flutter:assembleRelease
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applist":{"name":"nativescript-applist","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-applist/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript AppList

\n

A NativeScript module to handle the list of installed apps on a device.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-applist
\n

inside your app project to install the module.

\n

Demo

\n

For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

\n

Otherwise ...

\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
var AppList = require('nativescript-applist');
\n

Get installed apps

\n
AppList.getInstalledApps(function(apps) {
    for (var i = 0; i < apps.length; i++) {
        // TODO
    }
});
\n

Each item of apps has the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
displayNameThe display name
iconIf available: The icon as data url
nameThe internal (package) name
version.codeThe version code (Android only)
version.nameThe version name
\n

Additional options

\n
// get apps with icons
AppList.getInstalledApps(function(apps) {
    // TODO
}, {
    withIcons: true
});
\n

The 2nd parameter of AppList.getInstalledApps function has the following structure:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
icon.formatThe icon format. 0 = PNG, 1 = JPEG
icon.qualityThe icon quality between 0 and 100
withIconsAlso loads icons for each entry or not
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-utils":{"name":"nativescript-android-utils","version":"1.0.2","license":"MIT","readme":"

NativeScript Android Utility Classes and Helpers

\n

The package provides minimalistic Java implementations of classes that may prove somewhat problematic when using them in the context of a NativeScript application.

\n

Exposed Classes

\n\n

Usage

\n

Consuming classes from the list above is as easy as installing the package inside your NativeScript application.

\n
npm install nativescript-android-utils --save
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-local-notifications-android-flags":{"name":"nativescript-local-notifications-android-flags","version":"4.2.2","license":"MIT","readme":"

NativeScript Local Notifications Plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n
\n

⚠️ Plugin version 4.0.0 should be used with NativeScript 6+. If you have an older tns --version, please use an older plugin version.

\n
\n
\n

⚠️ Looking for NativeScript 7 compatibilty? Go to the NativeScript/plugins repo.

\n
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-local-notifications
\n

Setup (since plugin version 3.0.0)

\n

Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

\n

You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

\n
require (\"nativescript-local-notifications\");
\n

Now you can import the plugin as an object into your .ts file as follows:

\n
// either
import { LocalNotifications } from \"nativescript-local-notifications\";
// or (if that doesn't work for you)
import * as LocalNotifications from \"nativescript-local-notifications\";

// then use it as:
LocalNotifications.hasPermission()
\n

Demo apps

\n

NativeScript-Core (XML)

\n

This demo is the one with the most options, so it's a cool one to check out:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo.ios # or demo.android
\n

NativeScript-Angular

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

There's also a simple Angular demo in this repo:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-ng.ios # or demo-ng.android
\n

NativeScript-Vue

\n

We also have a Vue demo:

\n
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-vue.ios # or demo-vue.android
\n

Plugin API

\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Will be generated if not set.
titleThe title which is shown in the statusbar. Default not set.
subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
groupSummaryAn inboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalSet to one of second, minute, hour, day, week, month, year if you want a recurring notification.
iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
\n

NotificationAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idAn id so you can easily distinguish your actions.
typeEither button or input.
titleThe label for type = button.
launchLaunch the app when the action completes.
submitLabelThe submit button label for type = input.
placeholderThe placeholder text for type = input.
\n
  LocalNotifications.schedule([{
    id: 1, // generated id if not set
    title: 'The title',
    body: 'Recurs every minute until cancelled',
    ticker: 'The ticker',
    color: new Color(\"red\"),
    badge: 1,
    groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
    groupSummary:\"Summary of the grouped messages above\", //android only
    ongoing: true, // makes the notification ongoing (Android only)
    icon: 'res://heart',
    image: \"https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg\",
    thumbnail: true,
    interval: 'minute',
    channel: 'My Channel', // default: 'Channel'
    sound: \"customsound-ios.wav\", // falls back to the default sound on Android
    at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
  }]).then(
      function(scheduledIds) {
        console.log(\"Notification id(s) scheduled: \" + JSON.stringify(scheduledIds));
      },
      function(error) {
        console.log(\"scheduling error: \" + error);
      }
  )
\n

Notification icons (Android)

\n

These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

\n

silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

\n

These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.
\n

Source: Density Qualifier Docs

\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
  LocalNotifications.addOnMessageReceivedCallback(
      function (notification) {
        console.log(\"ID: \" + notification.id);
        console.log(\"Title: \" + notification.title);
        console.log(\"Body: \" + notification.body);
      }
  ).then(
      function() {
        console.log(\"Listener added\");
      }
  )
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n

Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

\n
  LocalNotifications.getScheduledIds().then(
      function(ids) {
        console.log(\"ID's: \" + ids);
      }
  )
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
  LocalNotifications.cancel(5 /* the ID */).then(
      function(foundAndCanceled) {
          if (foundAndCanceled) {
            console.log(\"OK, it's gone!\");
          } else {
            console.log(\"No ID 5 was scheduled\");
          }
      }
  )
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
  LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
  LocalNotifications.requestPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
  LocalNotifications.hasPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-floatingactionbutton-enduco":{"name":"nativescript-floatingactionbutton-enduco","version":"3.0.0","license":"MIT","readme":"\n

NativeScript-FloatingActionButton

\n\n

NativeScript plugin for Material Design Floating Action Button UI component.

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

\n

Installation

\n

Nativescript 7+:

\n

ns plugin add @nstudio/nativescript-floatingactionbutton

\n

NativeScript lower than 7:

\n

tns plugin add @nstudio/nativescript-floatingactionbutton@2.1.0

\n

Screenshot

\n
\n

\"FAB\n\"FAB

\n

Multiple FAB/Swipe Animation Support

\n

\"FAB

\n

Usage

\n

The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.

\n

Plain NativeScript

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"
      xmlns:FAB=\"@nstudio/nativescript-floatingactionbutton\">
    <ActionBar title=\"Native FAB\" />
    <grid-layout rows=\"auto, *\">
        <list-view row=\"1\" items=\"{{ users }}\">
            <list-view.itemTemplate>
                <label text=\"{{ name }}\" />
            </list-view.itemTemplate>
        </list-view>
            <FAB:fab tap=\"fabTap\"
                     row=\"1\"
                     icon=\"'~/assets/ic_add_white.png'\"
                     rippleColor=\"#f1f1f1\"
                     class=\"fab-button\" />
    </grid-layout>
</Page>
\n
\n

NativeScript Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);
\n

HTML

\n
<StackLayout>
    <FAB (tap)=\"fabTap()\" icon=\"'~/assets/ic_add_white.png'\" rippleColor=\"#f1f1f1\" class=\"fab-button\"></FAB>
</StackLayout>
\n
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);
\n

Template

\n
<template>
  <page>
    <grid-layout rows=\"auto, *\">
      <list-view row=\"1\" items=\"{{ users }}\">
        <list-view.itemTemplate>
          <label text=\"{{ name }}\" textWrap=\"true\" />
        </list-view.itemTemplate>
      </list-view>
      <fab
        @tap=\"fabTap\"
        row=\"1\"
        icon=\"res://ic_add_white\"
        rippleColor=\"#f1f1f1\"
        class=\"fab-button\"
      ></fab>
    </grid-layout>
  </page>
</template>
\n
\n

CSS

\n

Recommended CSS styles.

\n
.fab-button {
  height: 70;
  width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles
  margin: 15;
  background-color: #ff4081;
  horizontal-align: right;
  vertical-align: bottom;
}
\n

Use Icon Fonts

\n

First you need to setup icon fonts as described in NativeScript documentation.

\n

After this, you can use icon fonts on FAB by specifiying the unicode as text and add the fas/far class:

\n
<FAB:fab text=\"&#xf02a;\" class=\"fab-button fas\" />
\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyAndroidiOSDescriptionNote
backgroundColorXXSets the background color of the button
iconXXSupports the same image source options that NativeScript images supportRequired on android
textXXAllows to use text instead of imageCan be styled with font-* and color CSS properties
rippleColorXRipple color on lollipop devices, it will fill the FAB on pre-lollipop devicesNone
hideOnSwipeOfViewXXDirects the fab to animate itself in and out on scrollPass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView"
hideAnimationDurationXXHow many milliseconds it takes for the button to hide.Default if not set: 300ms
swipeAnimationXXslideDown, slideUp, slideLeft, slideRight, scaleDefault is slideDown
androidScaleTypeXcenter, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix
for more details see Android-Docs		Default is center
\n

iOS Notes

\n\n

Changelog

\n

Contributors

\n\n\n\n\n\n\n\n\n\n\n

Brad Martin
Steve McNiven-Scott
Nathanael Anderson
Gabriel Marinho
\n\n\n\n\n\n\n\n\n\n

Alexander Vakrilov
Lázaro Danillo Menezes
Jofferson Ramirez Tiquez
Ravi
\n\n\n\n\n\n\n\n\n\n

Samuel Ikechukwu
Stanimira Vlaeva
\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@benedictstrube/highcharts-wrapper":{"name":"@benedictstrube/highcharts-wrapper","version":"1.0.7","license":"Apache-2.0","readme":"

@benedictstrube/highcharts-wrapper

\n
ns plugin add @benedictstrube/highcharts-wrapper
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-secure-android-keystore":{"name":"nativescript-secure-android-keystore","version":"1.0.3","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Twitter

\n

Secure data in android keystore

\n

Github

\n

Encrypt the data and decrypt whenever want to use\nIt save data in shared preferences using keystore encryption\nCurrently only works with Android

\n

Prerequisites / Requirements

\n

Android version Latest Version

\n

Installation

\n
tns plugin add nativescript-secure-android-keystore
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-secure-android-keystore

\n

Javascript

\n
        
const  SecureAndroidKeystore =  require(\"nativescript-secure-android-keystore\");

function createViewModel() {
     ...
    var secure = new SecureAndroidKeystore.SecureAndroidKeystore();
    secure.storeData('mykey', 'pass1234');
    secure.retrieveData('mykey').then(res => {
        console.log(res);
    });
    ....
    return viewModel;
}

\n

Typescript

\n
     import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';

        
        private secureAndroidKeystore: SecureAndroidKeystore;

        //Inside some method         
            this.secureAndroidKeystore = new SecureAndroidKeystore();
            this.secureAndroidKeystore.storeData('mykey','pass1234');
            this.secureAndroidKeystore.retrieveData('mykey').then(res=>{
            this.message = res;
            console.log('message', this.message );
            })
\n

Angular Typescript

\n
app.module.ts
    ...
     import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';
     ....
     
@NgModule({
    .
    .
    .
    bootstrap: [
        AppComponent
    ],
  
    providers: [
        SecureAndroidKeystore
    ],
    .
    .
    .
})

any.component.ts

        ...
     import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';
     ....

     constructor(private secureAndroidKeystore: SecureAndroidKeystore){

     }
        
     anyMethod(){
          //Inside some method         
            this.secureAndroidKeystore.storeData('mykey','pass1234');
            this.secureAndroidKeystore.retrieveData('mykey').then(res=>{
            this.message = res;
            console.log('message', this.message );
          })

     }
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
Store data methodstoreData('key', 'passdata')method for saving any data,
Get the dataretrieveDataMethod for data getting and using which return promise
\n

License

\n

Apache License Version 2.0, January 2004

\n

For Any issue please raise issue in github repo

\n

Tutorials

\n

Need a little more to get started? Check out tutorial.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-fonticon":{"name":"nativescript-ng2-fonticon","version":"1.3.4","license":"MIT","readme":"

A simpler way to use font icons with NativeScript + Angular2.

\n

\"Angular\n\"MIT

\n

The Problem

\n

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

\n\n
.fa {
  font-family: FontAwesome;
}
\n\n
<Label class=\"fa\" text=\"\\uf293\"></Label>
\n

This works but keeping up with unicodes is not fun.

\n

The Solution

\n

With this plugin, you can instead reference the fonticon by the specific classname:

\n
<Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label>
\n

Install

\n
npm install nativescript-ng2-fonticon --save
\n

Usage

\n

FontAwesome will be used in the following examples but you can use any custom font icon collection.

\n\n
app/fonts/fontawesome-webfont.ttf
\n\n
.fa {
  font-family: FontAwesome, fontawesome-webfont;
}
\n

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.

\n\n
app/font-awesome.css
\n

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

\n\n

Use the classname prefix as the key and the css filename as the value relative to the app directory.

\n
import { TNSFontIconModule } from 'nativescript-ng2-fonticon';

@NgModule({
\tdeclarations: [
\t\tDemoComponent,
\t],
\tbootstrap: [
\t\tDemoComponent,
\t],
\timports: [
\t\tNativeScriptModule,
\t\tTNSFontIconModule.forRoot({
\t\t\t'fa': 'font-awesome.css'
\t\t})
\t]
})
\n\n

When working with a new font collection, you may need to see the mapping the service provides. Passing true as seen below will cause the mapping to be output in the console to determine if your font collection is being setup correctly.

\n
import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ng2-fonticon';
// turn debug on
TNSFontIconService.debug = true;

@NgModule({
\tdeclarations: [
\t\tDemoComponent,
\t],
\tbootstrap: [
\t\tDemoComponent,
\t],
\timports: [
\t\tNativeScriptModule,
\t\tTNSFontIconModule.forRoot({
\t\t\t'fa': 'font-awesome.css'
\t\t})
\t]
})
\n\n

It is important to inject the service into the constructor of your root component. Otherwise Angular 2's DI system will not instantiate your service.

\n
import { Component } from 'angular2/core';
import { TNSFontIconService } from 'nativescript-ng2-fonticon';

@Component({
  selector: 'demo',
  template: '<Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label> '
})
export class DemoComponent {
  constructor(private fonticon: TNSFontIconService) {
    // ^ IMPORTANT to cause Angular's DI system to instantiate the service!
  }
}
\n

Configuration Options

\n

If your font collection name does not match the classname prefix, you can pass the font collection name as an argument to the pipe like this:

\n
<Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon:'fontawesome'\"></Label>
\n

With a configuration like this:

\n
@NgModule({
\tdeclarations: [
\t\tDemoComponent,
\t],
\tbootstrap: [
\t\tDemoComponent,
\t],
\timports: [
\t\tNativeScriptModule,
\t\tTNSFontIconModule.forRoot({
\t\t\t'fontawesome': 'font-awesome.css'
\t\t})
\t]
})
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (iOS)Demo Ionicons (iOS)
\"Sample1\"\"Sample2\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (Android)Demo Ionicons (Android)
\"Sample3\"\"Sample4\"
\n

How about just NativeScript without Angular?

\n

The standard NativeScript converter is here:

\n\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

Credits

\n

Idea came from Bradley Gore's post here.

\n

Contributors

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-digital-ink-recognition":{"name":"@nativescript/mlkit-digital-ink-recognition","version":"2.0.0","license":"Apache-2.0","readme":"

@nativescript/mlkit-digital-ink-recognition

\n
npm install @nativescript/mlkit-digital-ink-recognition
\n

Usage

\n

See @nativescript/mlkit-core Usage

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-login-v2":{"name":"nativescript-social-login-v2","version":"1.0.0","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Social Login

\n

NativeScript module for social (token based) log-ins.

\n

\"Donate\"

\n

Implementations

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderAndroidiOS
GoogleYesYes
FacebookYesYes
TwitterNoNo
\n

License

\n

MIT license

\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Changes

\n

v1.4.x to 1.5.x

\n

Google

\n\n

v1.3.x to 1.4.x

\n

Facebook

\n\n

v1.2.x to 1.3.x

\n

Google

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-social-login
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n
Permissions
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <!-- ... -->

    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <!-- ... -->
</manifest>
\n
Strings
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
    <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>
\n

Setup Android Google Sign in for Debug Builds

\n
    \n
  1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
    2. \n
\n
keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
\n

The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

\n
    \n
  1. Create an app here on Google Developer site.\n
      \n
    • Enter the App name. This can be anything but it will display to the user who is authenticating.
      • \n
    • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
      • \n
    • Next configure the Google services.
      • \n
    • Select Google Sign-In
      • \n
    • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
      • \n
    • Enable Google Sign-In\n
        \n
      • If only enabling Google Sign-In you do not need the configuration file inside your application.
        • \n
      \n
      • \n
    \n
    2. \n
  2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
    3. \n
\n

iOS

\n

GoogleService-Info.plist

\n

You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<!-- FACEBOOK AND GOOGLE LOGIN -->
<key>CFBundleURLTypes</key>
    <array>
        <!-- GOOGLE START -->
\t\t<dict>
\t\t\t<key>CFBundleTypeRole</key>
\t\t\t<string>Editor</string>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
\t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                <!-- Get it from your GoogleService-Info.plist -->
                <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t\t</array>
\t\t</dict>
\t\t<!-- GOOGLE END -->
\t\t<!-- FACEBOOK START -->
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
        <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>FacebookAppID</key>
    <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
    <key>FacebookDisplayName</key>
    <string>FacebookLoginDemo</string>
    <!-- FACEBOOK END -->
\n

https://developers.facebook.com/docs/ios

\n

Application main file

\n

Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

\n
TypeScript
\n
if (application.ios) {

  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      let gglDelegate = false;

      try {
        const errorRef = new interop.Reference();
        GGLContext.sharedInstance().configureWithError(errorRef);

        const signIn = GIDSignIn.sharedInstance();
        gglDelegate = true;
      } catch (error) {
        console.log(error);
      }

      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

      return gglDelegate || fcbDelegate;
    }

    applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
      const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

      return fcbDelegate || gglDelegate;
    }
  }

  application.ios.delegate = MyDelegate;
}
\n
JavaScript
\n
if (application.ios) {
    var MyDelegate = (function (_super) {
        __extends(MyDelegate, _super);
        function MyDelegate() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            var gglDelegate = false;
            try {
                var errorRef = new interop.Reference();
                GGLContext.sharedInstance().configureWithError(errorRef);
                var signIn = GIDSignIn.sharedInstance();
                gglDelegate = true;
            }
            catch (error) {
                console.log(error);
            }
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
            return gglDelegate || fcbDelegate;
        };
        MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
            var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
            return fcbDelegate || gglDelegate;
        };
        return MyDelegate;
    }(UIResponder));
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    application.ios.delegate = MyDelegate;
}
\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
import SocialLogin = require(\"nativescript-social-login\");
\n

Initialize

\n
import Application = require(\"application\");
import SocialLogin = require(\"nativescript-social-login\");

if (Application.android) {
    Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
        let result = SocialLogin.init({
            activity: event.activity,
        });
    });
}
\n

The init() function receives an (optional) object with the following structure:

\n
interface ILoginConfiguration {
    /**
     * The underlying custom activity to use.
     */
    activity?: android.app.Activity;

    /**
     * Facebook specific configuration.
     */
    facebook?: {
        /**
         * Initialize Facebook or not. Default: (true)
         */
        initialize?: boolean;
        /**
         * Should Logout current Facebook session or not. Default: (false)
         */
        clearSession?: boolean;
    }

    /**
     * Google specific configuration.
     */
    google?: {
        /**
         * Initialize Google or not. Default: (true)
         */
        initialize?: boolean;

       /**
        * The server client ID for requesting server auth token.
        */
        serverClientId?: string;

        /**
         * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
         * It will be set in authCode property of result object.
         *
         * If false (default), it will request for token id. it will be set in authToken property of result object.
         */
        isRequestAuthCode?: boolean;
    }

    /**
     * Fallback action for the result of the underlying activity.
     */
    onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
}
\n

The result object that is returned by init() has the following structure:

\n
interface IInitializationResult {
    facebook: {
        error: any,
        isInitialized: boolean,
    },
    google: {
        error: any,
        isInitialized: boolean,
    },
    twitter: {
        error: any,
        isInitialized: boolean,
    }
}
\n

The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

\n

The error properties are only defined if an exception was thrown while initialization.

\n

Login

\n

If you want to use a login functions you have to submit a callback that receives an object with the following structure:

\n
interface ILoginResult {
    /**
     * Gets the auth token (if requested).
     */
    authToken?: string;

    /**
     * Offline auth code used by servers to request new auth tokens.
     */
    authCode?: string;

    /**
     * Gets the result code.
     */
    code: LoginResultType;

    /**
     * The display name.
     */
    displayName?: string;

    /**
     * First name of the user.
     */
    firstName?: string;

    /**
     * Last name of the user.
     */
    lastName?: string;

    /**
     * Gets the error (if defined).
     */
    error?: any;

    /**
     * The ID of the user.
     */
    id?: string;

    /**
     * The photo URL.
     */
    photo?: string;

    /**
     * Gets the underlying provider.
     */
    provider?: string;

    /**
     * The user token, like email address.
     */
    userToken?: string;
}
\n

The following functions are implemented:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderProvider
loginWithFacebookFacebook
loginWithGoogleGoogle
\n

Example

\n
SocialLogin.loginWithFacebook(
    (result) => {
        console.log(\"code: \" + result.code);
        console.log(\"error: \" + result.error);
        console.log(\"userToken: \" + result.userToken);
        console.log(\"displayName: \" + result.displayName);
        console.log(\"photo: \" + result.photo);
        console.log(\"authToken: \" + result.authToken);
    }
);
\n

It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

\n
import { Component, NgZone } from \"angular/core\";

@Component({})
class SigninComponent {
    constructor(private ngZone: NgZone) {}

    login() {
        SocialLogin.loginWithFacebook((result) => {
            this.ngZone.run(() => {
                console.log(\"code: \" + result.code);
                console.log(\"error: \" + result.error);
                console.log(\"userToken: \" + result.userToken);
                console.log(\"displayName: \" + result.displayName);
                console.log(\"photo: \" + result.photo);
                console.log(\"authToken: \" + result.authToken);
            });
        });
    }
}
\n

There is also a great example by dgomezs that shows how to configure your app for Facebook.

\n

Logging

\n

If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

\n
SocialLogin.addLogger(function(msg: any, tag: string) {
    console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
});
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xmlobjects":{"name":"nativescript-xmlobjects","version":"1.1.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-xmlobjects/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript XML Objects

\n

A NativeScript module that provides handling XML data as objects similar to LINQ to XML.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-xmlobjects
\n

inside your app project to install the module.

\n

Usage

\n
import XmlObjects = require('nativescript-xmlobjects');

var doc = XmlObjects.parse(`<PurchaseOrder PurchaseOrderNumber=\"99503\" OrderDate=\"1999-10-20\">
  <Address Type=\"Shipping\">
    <Name>Ellen Adams</Name>
    <Street>123 Maple Street</Street>
    <City>Mill Valley</City>
    <State>CA</State>
    <Zip>10999</Zip>
    <Country>USA</Country>
  </Address>
  <Address Type=\"Billing\">
    <Name>Tai Yee</Name>
    <Street>8 Oak Avenue</Street>
    <City>Old Town</City>
    <State>PA</State>
    <Zip>95819</Zip>
    <Country>USA</Country>
  </Address>
  <DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
  <Items>
    <Item PartNumber=\"872-AA\">
      <ProductName>Lawnmower</ProductName>
      <Quantity>1</Quantity>
      <USPrice>148.95</USPrice>
      <Comment>Confirm this is electric</Comment>
    </Item>
    <Item PartNumber=\"926-AA\">
      <ProductName>Baby Monitor</ProductName>
      <Quantity>2</Quantity>
      <USPrice>39.98</USPrice>
      <ShipDate>1999-05-21</ShipDate>
    </Item>
  </Items>
</PurchaseOrder>`);
\n

Enumerate nodes:

\n
// XElement
var rootElement = doc.root;

// XElement[]
var allChildElements = rootElement.elements();

var addressElements = rootElement.elements('Address');
for (var i = 0; i < addressElements.length; i++) {
    var ae = addressElements[i];
    
    // XAttribute
    var typeAttribute = ae.attribute('Type');
    console.log('Type attribute: ' + typeAttribute.value);
}

// XNode[]
var allNodes = rootElement.nodes();
for (var i = 0; i < allNodes.length; i++) {
    var n = allNodes[i];
    
    if (n instanceof XmlObjects.XElement) {
        // XAttribute[]
        var allAttributes = n.attributes();  // the attributes
        
        console.log(\"I am an element with attributes: \" + n.value);
    }
    else if (n instanceof XmlObjects.XComment) {
        console.log(\"I am a comment: \" + n.value);
    }
    else if (n instanceof XmlObjects.XText) {
        console.log(\"I am a text.\" + n.value);
    }
    else if (n instanceof XmlObjects.XCData) {
        console.log(\"I am a CDATA: \" + n.value);
    }
}

// create XML string
var xmlStr = rootElement.toString();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@duicorn/nativescript-posthog":{"name":"@duicorn/nativescript-posthog","version":"0.2.2","license":"Apache-2.0","readme":"

@duicorn/nativescript-posthog

\n

NativeScript plugin for PostHog product analytics. Not all configuration options are implemented yet, but basic event capturing and feature flags are supported.

\n
ns plugin add @duicorn/nativescript-posthog
\n

Usage

\n
import Posthog from '@duicorn/nativescript-posthog';

// initialize with you posthog key
Posthog.setup('<api_key>', {
    host: 'https://app.posthog.com',
    recordScreenViews: true,
    captureApplicationLifecycleEvents: true,
});

// capture an event 
Posthog.capture('app event');

// identify the user
Posthog.identify('uniqueID', {email: ''});
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/theme":{"name":"@nativescript/theme","version":"3.0.2","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-videorecorder-x":{"name":"nativescript-videorecorder-x","version":"1.0.4","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript VideoRecorder

\n

This is derived from nativescript-videorecorder with ONLY a change to work with AndroidX.\nOnce nativescript-videorecorder plugin is updated, this will be deprecated.

\n

Install

\n

tns plugin add nativescript-videorecorder-x

\n

QuickStart

\n

JavaScript

\n
var vr = require('nativescript-videorecorder-x');

var options = {
    saveToGallery: true,
    duration: 30,
    format: 'mp4',
    size: 10,
    hd: true,
    explanation: 'Why do i need this permission'
}

var videorecorder = new vr.VideoRecorder(options);

videorecorder.record().then((data)=>{
  console.log(data.file)
}).catch((err)=>{
  console.log(err)
})
\n

TypeScript

\n
import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder-x';

const options: VideoRecorderOptions = {
    hd: true
    saveToGallery: true
}
const videorecorder = new VideoRecorder(options)

videorecorder.record().then((data) => {
    console.log(data.file)
}).catch((err) => {
    console.log(err)
})
\n

VideoRecorder

\n

Options

\n

Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

\n\n

Additionnal parameters for Android:

\n\n

Additionnal parameters for iOS:

\n\n

VideoRecorder attributes:

\n\n

VideoRecorder methods:

\n\n

Promises above can be rejected with:

\n\n

AdvancedVideoView

\n

AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder-x/advanced\">
<recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
\n
const advancedView = page.getViewById(\"camera\");
advancedView.startRecording();
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
start()voidStarts the camera preview
stop()voidStop the camera preview
startRecording()voidStart recording camera preview.
stopRecording()voidStop recording camera preview.
toggleCamera()voidToggles between front or the back camera.
toggleTorch()voidToggles the torch (iOS only for now)
durationintGet the current recording video duration.
cameraPositionBACKvoidGets or Sets camera position
outputOrientationPORTRAITvoidGets or Sets output video orientation
isTorchAvailablebooleanReadOnly: is the torch supported for this camera
torchfalsebooleanEnable/Disable torch (iOS only for now)
qualityMAX_480PvoidGets or sets Video Quality
\n

outputOrientation

\n

Be careful to not change orientation while recording, it's not supported.

\n

Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

\n

This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-audio":{"name":"@dsvishchov/nativescript-audio","version":"6.2.1","license":"MIT","readme":"\n

NativeScript Audio

\n\n

NativeScript plugin to play and record audio files for Android and iOS.

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation

\n

NativeScript 7+:

\n

ns plugin add nativescript-audio

\n

NativeScript Version prior to 7:

\n

tns plugin add nativescript-audio@5.1.1

\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Permissions

\n

iOS

\n

You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Android

\n

If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

\n
    <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    // You can pass a duration hint to control the behavior of other application that may
    // be holding audio focus.
    // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
    // Then when you play a song, the previous owner of the
    // audio focus will stop. When your song stops
    // the previous holder will resume.
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function () {
    console.log('finished playing');
  },
  errorCallback: function (errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function (args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log('something went wrong...', err);
  });
\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

Demo App

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chatview":{"name":"nativescript-chatview","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-chatview/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript ChatView

\n

A NativeScript UI module for implementing WhatsApp like chat applications.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-chatview
\n

inside your app project to install the module.

\n

Demo

\n

The demo app can be found here.

\n

\"Demo

\n

Usage

\n

Include

\n
import ChatView = require(\"nativescript-chatview\");
\n

Create view

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      navigatingTo=\"onNavigatingTo\">
</Page>
\n
import ChatView = require(\"nativescript-chatview\");

function getTime() : string {
    var now = new Date();
    
    var hours = now.getHours();
    return numberToString(hours == 12 ? 12 : (hours % 12)) + \":\" + numberToString(now.getMinutes()) + \" \" + 
           (hours < 13 ? \"AM\" : \"PM\");
}

export function onNavigatingTo(args) {
    var page = args.object;

    // create view
    var chatView = new ChatView.ChatView();
    
    // register event when user taps
    // on SEND button
    chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
        // add a chat message
        eventData.object.appendMessages({            
            date: getTime(),
            isRight: true,
            image: \"~/img/avatar.jpg\",
            message: eventData.message,    
        });
    });
    
    // focus text field
    chatView.focusMessageField();
    
    page.content = chatView;
}
\n

The XML way

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:chatView=\"nativescript-chatview\"
      navigatingTo=\"onNavigatingTo\">
      
  <chatView:ChatView id=\"myChatView\" />
</Page>
\n

Styling

\n

Add the following CSS to your code:

\n
.nsChatView-view .nsChatView-sendMessageArea {
    margin: 4,0,0,0;
    background-color: #e8e8e8;
}

.nsChatView-view .nsChatView-sendMessageArea Button {
    background-color: transparent;
    margin: 0;
}

.nsChatView-view .nsChatView-messageList {
    background-color: transparent;
    border-color: transparent;
    border-width: 0;
    margin: 0;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-avatar,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-avatar {
    margin: 8;
    border-radius: 32;
    width: 64;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-separator,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-separator {
    border-color: transparent;
    border-width: 0;
    width: 32;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-message,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-message {
    margin: 8;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea {
    border-radius: 8;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea {
    background-color: #edeef2;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea {
    background-color: #00b863;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content {
    margin: 12,16,12,16;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea Label,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea Label {
    margin: 0;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content Label {
    color: black;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content Label {
    color: white;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content .nsChatView-date,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content .nsChatView-date {
    font-size: 11;
    margin-bottom: 12;
}

.nsChatView-view .nsChatView-messageField {
    font-size: 14;
}
\n

To understand how a ChatView is defined, you can have a look at the following XML definition:

\n
<ChatView className=\"nsChatView-view\"
          rows=\"*,auto\">
  
  <!-- list of messages -->
  <ListView className=\"nsChatView-messageList\"
            row=\"0\"
            items=\"{{ messages }}\"
            horizontalAlignment=\"stretch\"
            verticalAlignment=\"stretch\">
    
    <!-- template for an IChatMessage item -->
    <ListView.itemTemplate>
      <!-- chat message item -->
      <GridLayout className=\"{{ 'nsChatView-item-' + (isRight ? 'right' : 'left') }}\"
                  rows=\"auto\" columns=\"auto,*,auto\">

        <!-- avatar -->
        <Image row=\"0\" col=\"{{ isRight ? '2' : '0' }}\"
               className=\"nsChatView-avatar\"
               verticalAlignment=\"top\"
               src=\"{{ image }}\"
               visibility=\"{{ image ? 'visible' : 'collapsed' }}\" />
        
        <!-- the message -->
        <StackLayout row=\"0\" col=\"1\"
                     className=\"nsChatView-message\">
          
          <!-- the message area -->
          <Border className=\"nsChatView-messageArea\">
            <StackLayout className=\"nsChatView-content\"
                         verticalAlignment=\"top\" horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\">
              
              <!-- the date / time -->              
              <Label className=\"nsChatView-date\"
                     horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\"
                     text=\"{{ date }}\"
                     visibility=\"{{ date ? 'visible' : 'collapsed' }}\" />
          
              <!-- the message text -->
              <Label className=\"nsChatView-messageText\"
                     horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\"
                     text=\"{{ message }}\" textWrap=\"true\" />
            </StackLayout>
          </Border>
        </StackLayout>

        <!-- The invisible separator -->
        <Border row=\"0\" col=\"{{ isRight ? '0' : '2' }}\"
                className=\"nsChatView-separator\" />
      </GridLayout>
    </ListView.itemTemplate>
  </ListView>
  
  <!-- message input field and SEND button -->
  <GridLayout className=\"nsChatView-sendMessageArea\"
              row=\"1\"
              rows=\"*,auto\">
        
    <!-- chat message field -->
    <TextField className=\"nsChatView-messageField\"
               col=\"0\" row=\"0\"
               hint=\"{{ typeMessageHint }}\" />
      
    <!-- SEND button -->
    <Button className=\"nsChatView-sendMessageButton\"
            col=\"1\" row=\"0\"
            text=\"{{ sendMessageButtonCaption }}\" />
  </GridLayout>
</ChatView>
\n

The following properties of a ChatView can be used to access the controls defined in the XML:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameCSS class
messageFieldnsChatView-messageField
messageListnsChatView-messageList
sendMessageAreansChatView-sendMessageArea
sendMessageButtonnsChatView-sendMessageButton
\n

Add messages

\n

Chat messages are wrapped into an IChatMessage object:

\n
export interface IChatMessage {
    /**
     * The date.
     */
    date?: any;
    
    /**
     * The image source.
     */
    image?: any;
    
    /**
     * Defines if the displayed item is aligned on the right side or not.
     */
    isRight?: boolean;
    
    /**
     * The message value.
     */
    message?: any;
}
\n

Add

\n

Use appendMessages() method to add one or more chat messages:

\n
object.appendMessages({            
    date: getTime(),
    isRight: true,
    image: \"~/img/me.jpg\",
    message: \"My message\",    
}, {            
    date: getTime(),
    isRight: false,
    image: \"~/img/friend.jpg\",
    message: \"Friend's message\",    
});
\n

Insert

\n

Use insertMessages() method to insert one or more chat messages at a specific position:

\n
object.insertMessages(1, {            
    date: getTime(),
    isRight: true,
    image: \"~/img/me.jpg\",
    message: \"My message\",    
}, {            
    date: getTime(),
    isRight: false,
    image: \"~/img/friend.jpg\",
    message: \"Friend's message\",    
});
\n

Prepend

\n

Use insertMessages() method to prepend one or more chat messages:

\n
object.prependMessages({
    date: getTime(),
    isRight: true,
    image: \"~/img/me.jpg\",
    message: \"My message\",    
}, {            
    date: getTime(),
    isRight: false,
    image: \"~/img/friend.jpg\",
    message: \"Friend's message\",    
});
\n

SEND button

\n

Use the notifyOnSendMessageTap() method to register for a "click" event:

\n
chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
    // handle the event
});
\n

The eventData object has the following structure:

\n
import Observable = require(\"data/observable\");

export class SendMessageTappedEventData implements Observable.EventData {
    /** @inheritdoc */
    public eventName: string;
    
    /**
     * Focuses the chat message field.
     * 
     * @return {Boolean} Operation was successful or not.
     */
    public focusTextField(): boolean;
    
    /**
     * Gets the message to send.
     */
    public message: string;
    
    /** @inheritdoc */
    public object: ChatView;
    
    /**
     * Resets the message value.
     */
    public resetMessage();
    
    /**
     * Scrolls to bottom.
     */
    public scrollToBottom();
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-icons":{"name":"nativescript-material-icons","version":"1.0.3","license":"MIT","readme":"

Nativescript Material Icons

\n

This is a simple package which contains css classes for all material design icons and MaterialIcons font.

\n

Why This Plugin

\n

To use any font icons in nativescript project, there is a great plugin nativescript-fonticon for vanilla nativescript project and nativescript-ng2-fonticon for angular native projects.\nThat plugin requires a font file and a css file containing mapping of className and unicode of the icon.

\n

material-design-icons repository do not provide css file so we need to generate it manually.

\n

This plugin provides the ready to use css file containing mapping of className and its unicode. This plugin also automatically copy the MaterialIcons-Regular.ttf file to app/fonts folder and material-design-icons.css file to app/ directory. So you don't need to manually add those files. Also, upon uninstall of this plugin, it will remove those two files.

\n

Usage

\n

npm install nativescript-material-icons --save

\n

How to Use

\n

Check this step-by-step tutorial on how to use material design font icons in your nativescript angular applications.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rave-nativescript":{"name":"rave-nativescript","version":"1.6.0","license":"Apache-2.0","readme":"

Rave-Nativescript

\n\n

Version 1.6.0

\n\n

Version 1.1.0

\n\n

Version 1.0.0

\n\n

This plugin allows you to use flutterwave payment platform with Nativescript. For more information visit https://developer.flutterwave.com

\n

\"Plugin

\n

Requirements

\n\n

Installation

\n
tns plugin add rave-nativescript
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

\n

In addition to the plugin usage, both apps are webpack configured.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript\nimport * as RaveNativescript from 'rave-nativescript';

\n

Javascript\nvar Expresspay = require("rave-nativescript");

\n

Start RavePayManager

\n
 let context = RaveNativescript.prepare({
      country: \"country\",
      currency: \"currency here\",
      fName: \"Customer first name\",
      lName: \"Customer last name\",
      email: \"customer email\",
      narration: \"Your narration here\",
      publicKey: \"your public key here\",
      encryptionKey: \"your encryption key here\",
      txRef: \"txRef\",
      amount: amount,
      acceptAccountPayments: true,
      acceptCardPayments: true,
      acceptGHMobileMoneyPayments: true,
      onStagingEnv: true,
      shouldDisplayFee: true,
      showStagingLabel: false,
      setSubAccounts: [{
        subAccountId : \"subAccountId\",
        transactionSplitRatio: 1
      }],
      setMeta: [{ metaname: \"Meta name here\", metavalue: \"meta value here\"}]
    });
\n

Full usage

\n
context.checkoutPayment()
    .then((response) => {
      console.log(\"payment process complete\")
      console.log(response)
    })
    .catch(e => {
    console.log(\"handle errors\")
    })
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionStatusDefaultDescription
amountrequirednullThis is the amount to be charged from card/account
countryrequirednullThis is the route country for the transaction with respect to the currency. You can find a list of supported countries and currencies here
currencyrequirednullThis is the specified currency to charge the card in
fNamerequirednullThis is the first name of the card holder or the customer
lNamerequirednullThis is the last name of the card holder or the customer
emailrequirednullThis is the email address of the customer
narrationoptionalnullThis is a custom description added by the merchant. For Bank Transfer payments, this becomes the account name of the account to be paid into. See more details here
publicKeyrequirednullMerchant's public key. Get your merchant keys here for staging and live
encryptionKeyrequirednullMerchant's encryption key. Get your merchant keys here for staging and live
txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
acceptAccountPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
acceptCardPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
acceptMpesaPayments(boolean)optionalfalseSet to true if you want to accept Mpesa payments, else set to false . For this option to work, you should set your country to KE and your currency to KES
acceptGHMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Ghana mobile money payments, else set to false . For this option to work, you should set your country to GH and your currency to GHS
acceptUgMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Uganda mobile money payments, else set to false . For this option to work, you should set your country to UG and your currency to UGX
acceptAchPayments(boolean)optionalfalseSet to true if you want to accept US ACH charges from your customers, else set to false . For this option to work, you should set your country to US and your currency to USD. You also have to set acceptAccountPayments(true)
acceptBankTransferPayments(boolean)optionalfalseSet to true if you want to accept payments via bank transfer from your customers, else set to false . This option is currently only available for Nigerian Naira. See more details in the API Location
onStagingEnv(boolean)requiredfalseSet to true if you want your transactions to run in the staging environment otherwise set to false. Defaults to false
txRefrequirednullPass in any other custom data you wish to pass. It takes an array of Meta object {}
txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
\n

Contribute

\n

We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-themes":{"name":"nativescript-akylas-themes","version":"2.0.2","license":{"type":"MIT","url":"https://github.com/Akylas/nativescript-themes/blob/master/LICENSE"},"readme":"

\"npm\" \"npm\" \"npm\"

\n

nativescript-themes

\n

A NativeScript plugin to deal with dynamically loading UI Themes

\n

Installation

\n

NativeScript 2.x

\n

tns plugin add nativescript-themes@1.1.0

\n

NativeScript 5.x

\n

tns plugin add nativescript-themes

\n

Status:

\n

This plugin works in NativeScript 2.x and 5.x. It does NOT work in v3 or v4.

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program

\n

Sample Snapshot

\n

\"Sample1\"

\n

Usage

\n

To use the module you just require() it:

\n
var themes = require('nativescript-themes');
\n

Setup in App

\n

Modify your startup app.js

\n
var themes = require('nativescript-themes');
themes.applyTheme(themes.getAppliedTheme('red-theme.css'));
\n

This will automatically apply the "red-theme.css" theme if no other theme has ever been chosen as the default theme.

\n

You can also load a theme bundled by webpack using applyThemeCss:

\n
var themes = require('nativescript-themes');
var cssText = require('~/assets/themes/dark.scss');
themes.applyThemeCss(cssText, 'dark.scss');
\n

You ask, how exactly does this help?

\n

This allows you to dynamically theme an application just by calling the theme system. Your master app.css file is applied first, then the theme file and finally your page.css

\n

red-theme.css

\n
button {
    background-color: red;
}
\n

green-theme.css

\n
button {
    background-color: green;
}
\n

Demo

\n

Demo shows three sample themes, and shows how to load the last chosen theme at startup.

\n

Why use this?

\n

This allows you to apply a specific theme file globally so all pages get it.

\n

themes.applyTheme('cssFile', options);

\n

options.noSave = true, this will cause it not to save this info for the getAppliedTheme to retrieve, this would typically used if you needed temporarily apply a theme.

\n
var themes = require('nativescript-themes');
themes.applyTheme('red-theme.css');
\n

theme.getAppliedTheme(<default_theme>);

\n

This returns the last theme applied; if no theme has been applied it will use the default_theme.

\n
var themes = require('nativescript-themes');
var currentTheme = themes.getAppliedTheme('red-theme.css');
if (currentTheme === 'red-theme.css') {
    console.log('We are using the default red-theme!');
} else {
    console.log('We are using', currentTheme);
}
\n

themes.applyThemeCss('textCss', 'filename');

\n

This function receives a string containing CSS and applies it. The filename is only for reference (no file will be actually loaded).

\n
var themes = require('nativescript-themes');
themes.applyThemeCss('page {background-color: black;}', 'default-theme.css');
\n

Tutorials

\n

Need some extra help getting started? Check out these tutorials for dealing with NativeScript UI themes in an iOS and Android application.

\n\n

Contributors:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fresco-compat":{"name":"nativescript-fresco-compat","version":"1.0.17","license":"ISC","readme":"

Welcome to nativescript-fresco

\n
\n

A NativeScript Plugin for Android apps.

\n
\n

\"npm\"\n\"npm\"\n\"Dependency

\n

What is nativescript-fresco?

\n

nativescript-fresco is a NativeScript plugin that exposes the Fresco library used for efficiently displaying images on Android. More information about what Fresco is and how it works is available on its official website here.

\n

The nativescript-fresco plugin enables NativeScript developers to use the FrescoDrawee class which is extends the traditional Android ImageView component and adds the smart Fresco image management algorithms. The plugin exposes the drawee as a NativeScript view so you basically put it in the XML definition of your page and provide the URI to the image you would like to use.

\n

How to use nativescript-fresco?

\n

In vanila NativeScript

\n

From npm

\n
    \n
  1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-fresco.
    2. \n
  2. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
    3. \n
\n

From local repo?

\n
    \n
  1. Clone the repository and go to the root directory on your computer.
    2. \n
  2. Use tsc to transpile the .ts sources: tsc -p.
    3. \n
  3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-fresco-repo-dir>.
    4. \n
  4. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
    5. \n
\n

JavaScript:

\n
var application = require(\"application\");
var fresco = require(\"nativescript-fresco\");

if (application.android) {
    application.onLaunch = function (intent) {
        fresco.initialize();
    };
}
\n

TypeScript:

\n
import application = require(\"application\");
import fresco = require(\"nativescript-fresco\");

if (application.android) {
    application.onLaunch = function (intent) {
        fresco.initialize();
    };
}
\n

Use fresco in the XML definition of the page as follows:

\n
<Page
    xmlns=\"http://www.nativescript.org/tns.xsd\" 
    xmlns:nativescript-fresco=\"nativescript-fresco\">
    <nativescript-fresco:FrescoDrawee width=\"250\" height=\"250\"
                                      imageUri=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
</Page>
\n

In NativeScript + Angular 2

\n
    \n
  1. Import the TNSFrescoModule from nativescript-fresco/angular and add it to the imports of your initial @NgModule, like shown here.
    2. \n
  2. As described above make sure to initialize the nativescript-fresco plugin in the launch event of your {N} application.
    3. \n
\n

Examples

\n

You can refer the demo folder of the repo for runnable {N} project that demonstrates the nativescript-fresco plugin with all of its features in action.

\n

Features

\n

As documented by the Fresco library setting the height and width are mandatory, more details on this topic could be found here. So the first this you should do when declaring the FrescoDrawee is set its width and height attributes or set only one of them and set the FrescoDrawee's aspectRatio. The width and height of the FrescoDrawee in your {N} application supports percentages which makes it possible to declare for example width="50%" and aspectRatio="1.33" achieving exactly 50% width with dynamically calculated height based on the aspect ration of the loaded image from the imageUri.

\n

Basic attributes

\n\n

String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

\n
<nativescript-fresco:FrescoDrawee imageUri=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
\n\n

String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your FrescoDrawee instances.

\n
<nativescript-fresco:FrescoDrawee placeholderImageUri=\"~/placeholder.jpg\"/>
\n\n

String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the imageUri is not successful.

\n
<nativescript-fresco:FrescoDrawee failureImageUri=\"~/failure.jpg\"/>
\n

Advanced optional attributes

\n

There are a couple of optional attributes that could be set on the FrescoDrawee instance to achieve advanced behaviors:

\n\n

String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the FrescoDrawee.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your FrescoDrawee instances.

\n
<nativescript-fresco:FrescoDrawee backgroundUri=\"~/image.jpg\"/>
\n\n

String value used by FrescoDrawee image scale type. This property can be set to:

\n

'center' - Performs no scaling.

\n

'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'centerInside' - Scales the child so that it fits entirely inside the parent.

\n

'fitCenter' - Scales the child so that it fits entirely inside the parent.

\n

'fitStart' - Scales the child so that it fits entirely inside the parent.

\n

'fitEnd' - Scales the child so that it fits entirely inside the parent.

\n

'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

\n

'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n
<nativescript-fresco:FrescoDrawee actualImageScaleType=\"centerInside\"/>
\n\n

Number value used for the fade-in duration. This value is in milliseconds.

\n
<nativescript-fresco:FrescoDrawee fadeDuration=\"3000\"/>
\n\n

Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

\n

Note: In some layout scenarios it is necessary to set the verticalAlignment of the FrescoDrawee to 'top' or 'bottom' in order to "anchor" the drawee and achieve dynamic sizing.

\n
<nativescript-fresco:FrescoDrawee aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
\n\n

Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

\n
<nativescript-fresco:FrescoDrawee progressiveRenderingEnabled=\"true\"/>
\n\n

Boolean value used for showing or hiding the progress bar.

\n
<nativescript-fresco:FrescoDrawee showProgressBar=\"true\"/>
\n\n

String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

\n
<nativescript-fresco:FrescoDrawee progressBarColor=\"blue\"/>
\n\n

Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

\n
<nativescript-fresco:FrescoDrawee roundAsCircle=\"true\"/>
\n\n

Number value used as radius for rounding the image's corners.

\n
<nativescript-fresco:FrescoDrawee roundedCornerRadius=\"50\"/>
\n\n

Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundBottomRight=\"true\"/>
\n\n

Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundBottomLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundTopLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundTopRight=\"true\"/>
\n\n

Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

\n
<nativescript-fresco:FrescoDrawee autoPlayAnimations=\"true\"/>
\n\n

Boolean value used for enabling/disabling a tap to retry action for the download of the FrescoDrawee image.

\n
<nativescript-fresco:FrescoDrawee tapToRetryEnabled=\"true\"/>
\n

Events

\n\n

This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

\n
<nativescript-fresco:FrescoDrawee finalImageSet=\"onFinalImageSet\"/>
\n

JavaScript:

\n
function onFinalImageSet(args) {
    var frescoEventData = args;
    var drawee = frescoEventData.object;
}
exports.onFinalImageSet = onFinalImageSet;
\n

TypeScript:

\n
import {FrescoDrawee, FinalEventData } from \"nativescript-fresco\";

export function onFinalImageSet(args: FinalEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the fetch of the final image failed.

\n
<nativescript-fresco:FrescoDrawee failure=\"onFailure\"/>
\n

JavaScript:

\n
function onFailure(args) {
    var drawee = args.object;
}
exports.onFailure = onFailure;
\n

TypeScript:

\n
import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

export function onFailure(args: FailureEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after any intermediate image has been set.

\n
<nativescript-fresco:FrescoDrawee intermediateImageSet=\"onIntermediateImageSet\"/>
\n

JavaScript:

\n
function onIntermediateImageSet(args) {
    var drawee = args.object;
}
exports.onIntermediateImageSet = onIntermediateImageSet;
\n

TypeScript:

\n
import {FrescoDrawee, IntermediateEventData } from \"nativescript-fresco\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the fetch of the intermediate image failed.

\n
<nativescript-fresco:FrescoDrawee intermediateImageFailed=\"onIntermediateImageFailed\"/>
\n

JavaScript:

\n
function intermediateImageFailed(args) {
    var drawee = args.object;
}
exports.intermediateImageFailed = intermediateImageFailed;
\n

TypeScript:

\n
import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

export function intermediateImageFailed(args: FailureEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired before the image request is submitted.

\n
<nativescript-fresco:FrescoDrawee submit=\"onSubmit\"/>
\n

JavaScript:

\n
function onSubmit(args) {
    var drawee = args.object;
}
exports.onSubmit = onSubmit;
\n

TypeScript:

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onSubmit(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the controller released the fetched image.

\n
<nativescript-fresco:FrescoDrawee release=\"onRelease\"/>
\n

JavaScript:

\n
function onRelease(args) {
    var drawee = args.object;
}
exports.onRelease = onRelease;
\n

TypeScript:

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onRelease(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n

Event arguments

\n

All events exposed by 'nativescript-fresco' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

\n\n

Instances of this class are provided to the handlers of the finalImageSet.

\n
import {FrescoDrawee, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-fresco\";

export function onFinalImageSet(args: FinalEventData) {
    var info: ImageInfo  = args.imageInfo;
    var animatable: AnimatedImage = args.animatable;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
}
\n\n

Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

\n
import {FrescoDrawee, FailureEventData, FrescoError } from \"nativescript-fresco\";

export function onFailure(args: FailureEventData) {
    var error: FrescoError = args.error;
    var message: string = error.getMessage();
    var type: string = error.getErrorType();
    var fullError: string = error.toString();
}
\n\n

Instances of this class are provided to the handlers of the intermediateImageSet.

\n
import {FrescoDrawee, IntermediateEventData, ImageInfo } from \"nativescript-fresco\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var info: ImageInfo  = args.imageInfo;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
\n\n

Instances of this class are provided to the handlers of the release and submit.

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onSubmit(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n

Cache

\n

The nativescript-fresco {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

\n

'Refresh' the 'imageUri'

\n

Not so rarely you may have a scenario where the actual image on your remote service from the imageUri of the FrescoDrawee has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the imageUri by calling the updateImageUri():

\n
// 'drawee' is the instance the 'FrescoDrawee' in the project.
drawee.updateImageUri();
\n

Clear everything from the cache

\n

Managing the caches in nativescript-fresco is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

\n
var frescoModel = require(\"nativescript-fresco\");

var imagePipeLine = frescoModel.getImagePipeline();
\n\n
imagePipeLine.clearCaches();
\n\n
imagePipeLine.clearMemoryCaches();
\n\n
imagePipeLine.clearDiskCaches();
\n

Evict all images with a specific URI from the cache

\n

If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (imageUri). Evicting is done again via the ImagePipeline:

\n
var frescoModel = require(\"nativescript-fresco\");

var imagePipeLine = frescoModel.getImagePipeline();
\n\n
imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
\n

Sample Screenshots

\n

All of the images are sample images for showcasing purposes.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
\"Placeholder\"Transition
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 3 - Image shown successfully from imageUriSample 4 - 'Failure' image shown
\"Successfully\"Successfully
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collectionview-waterfall":{"name":"nativescript-collectionview-waterfall","version":"1.0.10","license":"ISC","readme":"

NativeScript CollectionView waterfall Plugin

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript CollectionView waterfall Plugin.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-collectionview-waterfall

\n

This command automatically installs the necessary files, as well as stores nativescript-collectionview-waterfall as a dependency in your project's package.json file.

\n

Configuration

\n

To install the plugin run

\n
import install from 'nativescript-collectionview-waterfall';
install();
\n

then simply use the layoutStyle="waterfall" as a collectionview property

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@speigg/nativescript-urlhandler":{"name":"@speigg/nativescript-urlhandler","version":"1.0.0","license":"MIT","readme":"

NativeScript URL Handler Plugin

\n

\"Greenkeeper\n\"Build\n\"npm

\n

\"NPM\"

\n
\n

Feel free to donate

\n

Click here to lend your support and make a donation at www.pledgie.com !\n\n\"\"\n\nOr donate Bitcoins.

\n

Also via greenaddress

\n
\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component } from \"@angular/core\";
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
  selector: \"gr-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
      handleOpenURL((appURL: AppURL) => {
        console.log('Got the following appURL', appURL);
      });
    }
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

handleOpenURL(function(appURL) {
console.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

handleOpenURL((appURL: AppURL) => {
    console.log('Got the following appURL', appURL);
});
\n

Installation

\n
$ tns plugin add nativescript-urlhandler
\n

Or if you want to use the development version (nightly build), which maybe not stable!:

\n
$ tns plugin add nativescript-urlhandler@next
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" /> 
    <action android:name=\"android.intent.action.VIEW\" /> 
    <category android:name=\"android.intent.category.DEFAULT\" /> 
    <category android:name=\"android.intent.category.BROWSABLE\" /> 
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTop\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" /> 
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@oscarlodriguez/nativescript-fresco":{"name":"@oscarlodriguez/nativescript-fresco","version":"1.0.17","license":"ISC","readme":"

Welcome to nativescript-fresco

\n
\n

A NativeScript Plugin for Android apps.

\n
\n

\"npm\"\n\"npm\"\n\"Dependency

\n

What is nativescript-fresco?

\n

nativescript-fresco is a NativeScript plugin that exposes the Fresco library used for efficiently displaying images on Android. More information about what Fresco is and how it works is available on its official website here.

\n

The nativescript-fresco plugin enables NativeScript developers to use the FrescoDrawee class which is extends the traditional Android ImageView component and adds the smart Fresco image management algorithms. The plugin exposes the drawee as a NativeScript view so you basically put it in the XML definition of your page and provide the URI to the image you would like to use.

\n

How to use nativescript-fresco?

\n

In vanila NativeScript

\n

From npm

\n
    \n
  1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-fresco.
    2. \n
  2. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
    3. \n
\n

From local repo?

\n
    \n
  1. Clone the repository and go to the root directory on your computer.
    2. \n
  2. Use tsc to transpile the .ts sources: tsc -p.
    3. \n
  3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-fresco-repo-dir>.
    4. \n
  4. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
    5. \n
\n

JavaScript:

\n
var application = require(\"application\");
var fresco = require(\"nativescript-fresco\");

if (application.android) {
    application.onLaunch = function (intent) {
        fresco.initialize();
    };
}
\n

TypeScript:

\n
import application = require(\"application\");
import fresco = require(\"nativescript-fresco\");

if (application.android) {
    application.onLaunch = function (intent) {
        fresco.initialize();
    };
}
\n

Use fresco in the XML definition of the page as follows:

\n
<Page
    xmlns=\"http://www.nativescript.org/tns.xsd\" 
    xmlns:nativescript-fresco=\"nativescript-fresco\">
    <nativescript-fresco:FrescoDrawee width=\"250\" height=\"250\"
                                      imageUri=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
</Page>
\n

In NativeScript + Angular 2

\n
    \n
  1. Import the TNSFrescoModule from nativescript-fresco/angular and add it to the imports of your initial @NgModule, like shown here.
    2. \n
  2. As described above make sure to initialize the nativescript-fresco plugin in the launch event of your {N} application.
    3. \n
\n

Examples

\n

You can refer the demo folder of the repo for runnable {N} project that demonstrates the nativescript-fresco plugin with all of its features in action.

\n

Features

\n

As documented by the Fresco library setting the height and width are mandatory, more details on this topic could be found here. So the first this you should do when declaring the FrescoDrawee is set its width and height attributes or set only one of them and set the FrescoDrawee's aspectRatio. The width and height of the FrescoDrawee in your {N} application supports percentages which makes it possible to declare for example width="50%" and aspectRatio="1.33" achieving exactly 50% width with dynamically calculated height based on the aspect ration of the loaded image from the imageUri.

\n

Basic attributes

\n\n

String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

\n
<nativescript-fresco:FrescoDrawee imageUri=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
\n\n

String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your FrescoDrawee instances.

\n
<nativescript-fresco:FrescoDrawee placeholderImageUri=\"~/placeholder.jpg\"/>
\n\n

String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the imageUri is not successful.

\n
<nativescript-fresco:FrescoDrawee failureImageUri=\"~/failure.jpg\"/>
\n

Advanced optional attributes

\n

There are a couple of optional attributes that could be set on the FrescoDrawee instance to achieve advanced behaviors:

\n\n

String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the FrescoDrawee.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your FrescoDrawee instances.

\n
<nativescript-fresco:FrescoDrawee backgroundUri=\"~/image.jpg\"/>
\n\n

String value used by FrescoDrawee image scale type. This property can be set to:

\n

'center' - Performs no scaling.

\n

'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'centerInside' - Scales the child so that it fits entirely inside the parent.

\n

'fitCenter' - Scales the child so that it fits entirely inside the parent.

\n

'fitStart' - Scales the child so that it fits entirely inside the parent.

\n

'fitEnd' - Scales the child so that it fits entirely inside the parent.

\n

'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

\n

'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n
<nativescript-fresco:FrescoDrawee actualImageScaleType=\"centerInside\"/>
\n\n

Number value used for the fade-in duration. This value is in milliseconds.

\n
<nativescript-fresco:FrescoDrawee fadeDuration=\"3000\"/>
\n\n

Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

\n

Note: In some layout scenarios it is necessary to set the verticalAlignment of the FrescoDrawee to 'top' or 'bottom' in order to "anchor" the drawee and achieve dynamic sizing.

\n
<nativescript-fresco:FrescoDrawee aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
\n\n

Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

\n
<nativescript-fresco:FrescoDrawee progressiveRenderingEnabled=\"true\"/>
\n\n

Boolean value used for showing or hiding the progress bar.

\n
<nativescript-fresco:FrescoDrawee showProgressBar=\"true\"/>
\n\n

String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

\n
<nativescript-fresco:FrescoDrawee progressBarColor=\"blue\"/>
\n\n

Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

\n
<nativescript-fresco:FrescoDrawee roundAsCircle=\"true\"/>
\n\n

Number value used as radius for rounding the image's corners.

\n
<nativescript-fresco:FrescoDrawee roundedCornerRadius=\"50\"/>
\n\n

Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundBottomRight=\"true\"/>
\n\n

Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundBottomLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundTopLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-fresco:FrescoDrawee roundTopRight=\"true\"/>
\n\n

Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

\n
<nativescript-fresco:FrescoDrawee autoPlayAnimations=\"true\"/>
\n\n

Boolean value used for enabling/disabling a tap to retry action for the download of the FrescoDrawee image.

\n
<nativescript-fresco:FrescoDrawee tapToRetryEnabled=\"true\"/>
\n

Events

\n\n

This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

\n
<nativescript-fresco:FrescoDrawee finalImageSet=\"onFinalImageSet\"/>
\n

JavaScript:

\n
function onFinalImageSet(args) {
    var frescoEventData = args;
    var drawee = frescoEventData.object;
}
exports.onFinalImageSet = onFinalImageSet;
\n

TypeScript:

\n
import {FrescoDrawee, FinalEventData } from \"nativescript-fresco\";

export function onFinalImageSet(args: FinalEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the fetch of the final image failed.

\n
<nativescript-fresco:FrescoDrawee failure=\"onFailure\"/>
\n

JavaScript:

\n
function onFailure(args) {
    var drawee = args.object;
}
exports.onFailure = onFailure;
\n

TypeScript:

\n
import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

export function onFailure(args: FailureEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after any intermediate image has been set.

\n
<nativescript-fresco:FrescoDrawee intermediateImageSet=\"onIntermediateImageSet\"/>
\n

JavaScript:

\n
function onIntermediateImageSet(args) {
    var drawee = args.object;
}
exports.onIntermediateImageSet = onIntermediateImageSet;
\n

TypeScript:

\n
import {FrescoDrawee, IntermediateEventData } from \"nativescript-fresco\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the fetch of the intermediate image failed.

\n
<nativescript-fresco:FrescoDrawee intermediateImageFailed=\"onIntermediateImageFailed\"/>
\n

JavaScript:

\n
function intermediateImageFailed(args) {
    var drawee = args.object;
}
exports.intermediateImageFailed = intermediateImageFailed;
\n

TypeScript:

\n
import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

export function intermediateImageFailed(args: FailureEventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired before the image request is submitted.

\n
<nativescript-fresco:FrescoDrawee submit=\"onSubmit\"/>
\n

JavaScript:

\n
function onSubmit(args) {
    var drawee = args.object;
}
exports.onSubmit = onSubmit;
\n

TypeScript:

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onSubmit(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n\n

This event is fired after the controller released the fetched image.

\n
<nativescript-fresco:FrescoDrawee release=\"onRelease\"/>
\n

JavaScript:

\n
function onRelease(args) {
    var drawee = args.object;
}
exports.onRelease = onRelease;
\n

TypeScript:

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onRelease(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n

Event arguments

\n

All events exposed by 'nativescript-fresco' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

\n\n

Instances of this class are provided to the handlers of the finalImageSet.

\n
import {FrescoDrawee, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-fresco\";

export function onFinalImageSet(args: FinalEventData) {
    var info: ImageInfo  = args.imageInfo;
    var animatable: AnimatedImage = args.animatable;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
}
\n\n

Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

\n
import {FrescoDrawee, FailureEventData, FrescoError } from \"nativescript-fresco\";

export function onFailure(args: FailureEventData) {
    var error: FrescoError = args.error;
    var message: string = error.getMessage();
    var type: string = error.getErrorType();
    var fullError: string = error.toString();
}
\n\n

Instances of this class are provided to the handlers of the intermediateImageSet.

\n
import {FrescoDrawee, IntermediateEventData, ImageInfo } from \"nativescript-fresco\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var info: ImageInfo  = args.imageInfo;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
\n\n

Instances of this class are provided to the handlers of the release and submit.

\n
import {FrescoDrawee, EventData } from \"nativescript-fresco\";

export function onSubmit(args: EventData) {
    var drawee = args.object as FrescoDrawee;
}
\n

Cache

\n

The nativescript-fresco {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

\n

'Refresh' the 'imageUri'

\n

Not so rarely you may have a scenario where the actual image on your remote service from the imageUri of the FrescoDrawee has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the imageUri by calling the updateImageUri():

\n
// 'drawee' is the instance the 'FrescoDrawee' in the project.
drawee.updateImageUri();
\n

Clear everything from the cache

\n

Managing the caches in nativescript-fresco is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

\n
var frescoModel = require(\"nativescript-fresco\");

var imagePipeLine = frescoModel.getImagePipeline();
\n\n
imagePipeLine.clearCaches();
\n\n
imagePipeLine.clearMemoryCaches();
\n\n
imagePipeLine.clearDiskCaches();
\n

Evict all images with a specific URI from the cache

\n

If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (imageUri). Evicting is done again via the ImagePipeline:

\n
var frescoModel = require(\"nativescript-fresco\");

var imagePipeLine = frescoModel.getImagePipeline();
\n\n
imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
\n

Sample Screenshots

\n

All of the images are sample images for showcasing purposes.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
\"Placeholder\"Transition
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 3 - Image shown successfully from imageUriSample 4 - 'Failure' image shown
\"Successfully\"Successfully
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-getters":{"name":"nativescript-getters","version":"1.0.2","license":"MIT","readme":"

NativeScript Getters Plugin

\n

\"NPM\n\"NPM\n\"NPM\n\"GitHub

\n

A NativeScript plugin that adds six new getters – in addition to the native getViewById method – to retrieve one or more views by tag, type, class, property, value pair or style.

\n

Getting Started

\n

Prerequisites

\n

Basics

\n\n

Minimum versions

\n\n

Installation

\n

In Command prompt or Terminal navigate to your application root folder and run one of the following commands to install the plugin. (see docs)

\n
ns plugin add nativescript-getters
\n

or

\n
npm install --save nativescript-getters
\n
\n

The --save flag will add the plugin as dependency in your package.json file.

\n
\n

Usage

\n

Import the plugin at the top of your JavaScript or TypeScript file. It can be imported only once into the application entry point file. (see docs)

\n
import 'nativescript-getters'
\n
\n

New methods have been added into the Frame, Page, layouts, tabs and texts classes. (see methods)

\n
\n

Examples

\n

Get views by tags

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive
  const foundViews = page.getViewsByTags('Label', 'Button')

  console.log('action bar:', actionBar)
  console.log('found views:', foundViews)
}
\n

The list of possible tags can be found on the modules page of the NativeScript API documentation. (see "Classes")

\n

Get views by types

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const layouts = page.getViewsByTypes('layout')
  const foundViews = page.getViewsByTypes('field', 'list')

  console.log('layouts:', layouts)
  console.log('found views:', foundViews)
}
\n

The list of available types: bar, picker, view, layout, list, text, tab, field and form. (see types.ts)

\n

Get views by classes

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const mainTitle = page.getViewsByClasses('h1')[0]
  const foundViews = page.getViewsByClasses('text-primary', 'font-italic')

  console.log('main title:', mainTitle)
  console.log('found views:', foundViews)
}
\n

Get views by identifiers

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')
  const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')

  console.log('debug ids:', debugIds)
  console.log('found views:', foundViews)
}
\n

Get views by properties

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')
  const foundViews = page.getViewsByProperties('columns', 'width')

  console.log('texts:', texts)
  console.log('found views:', foundViews)
}
\n

The list of possible property names can be found on the view page of the NativeScript API documentation.

\n

Get views by val pairs

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const welcomeTexts = page.getViewsByValPairs(
    { name: 'text', value: 'Welcome' }
  )
  const foundViews = page.getViewsByValPairs(
    { name: 'columns', value: 'auto' },
    { name: 'width', value: '210' }
  )

  console.log('welcome texts:', welcomeTexts)
  console.log('found views:', foundViews)
}
\n

The list of possible property names and their values can be found on the view page of the NativeScript API documentation.

\n

Get views by styles

\n
export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const redViews = page.getViewsByStyles(
    { name: 'background', value: 'FF0000' }
  )
  const foundViews = page.getViewsByStyles(
    { name: 'visibility', value: 'collapsed' },
    { name: 'opacity', value: '0.5' }
  )

  console.log('red views:', redViews)
  console.log('found views:', foundViews)
}
\n
\n

Note: The color name (example: red or white) is converted by NativeScript to hexadecimal.

\n
\n

The list of possible styles can be found on the style page of the NativeScript API documentation.

\n

Example in stand-alone mode

\n
import { getViewsByTags } from 'nativescript-getters'

export function standaloneMode(view: View) {
  const foundViews = getViewsByTags.call(view, 'Label', 'Button')

  console.log('found views:', foundViews)
}
\n

More info about call():

\n\n

API

\n

Methods

\n

All methods return an array of views, except for the native method getViewById.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameParameter(s)Returns
getViewsByTags...tagNames: string[]View[]
getViewsByTypes...typeNames: string[]View[]
getViewsByClasses...classNames: string[]View[]
getViewsByIdentifiers
Alias: getViewsByIds		...idNames: string[]View[]
getViewsByProperties
Alias: getViewsByProps		...propNames: string[]View[]
getViewsByValPairs...valPairs: ValPair[]
ValPair: { name: string, value: string }		View[]
getViewsByStyles...styles: ValPair[]
ValPair: { name: string, value: string }		View[]
\n

Native method

\n

The native method returns only a view. Its name is written in the singular (getView...).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameParameterReturns
getViewByIdidName: stringView
\n

Known issues

\n

VSCode IntelliSense

\n

If the following TypeScript declaration error occurs, you need to open the application entry point file (and keep it open) or click on the tab of the file already open.

\n
Property 'getViewsBy...' does not exist on type 'View'. ts(2339)
\n

VSCode IntelliSense now remembers the entry point of the application and recognizes the declaration of new methods.

\n

Vue.js

\n

The plugin may not work properly with these symlinked. It is because webpack resolves symlinks to their real locations by default.

\n

A workaround for this issue is to manually disable symlinks resolution in webpack:

\n
const config = {
  resolve: {
    // resolve symlinks to symlinked modules
    symlinks: false
  }
}
\n

Question? Idea?

\n

If you have a question about how nativescript-getters works or an idea to improve it, the Discussions tab in GitHub is the place to be.

\n

However, if you get an error, you should open an issue.

\n

Contributing

\n

See CONTRIBUTING for more information.

\n

License

\n

Distributed under the MIT License. See LICENSE for more information.

\n

Contact

\n

Benjamin Grand @bgrand_ch

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telephony":{"name":"nativescript-telephony","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-telephony/blob/master/LICENSE"},"readme":"

NativeScript-Telephony

\n

This is a Nativescript plugin to get data from the SIM card like the carrier name, mcc, mnc and country code and other system dependent additional info.

\n

Contributors

\n

Peter Bakondy for his work on\ncordova-plugin-sim.\nBasically this is his plugin. I followed his source code as a guide.

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-telephony
\n

Usage

\n

Typescript

\n
import {Telephony} from 'nativescript-telephony';

Telephony().then(function(resolved) {
\tconsole.log('resolved >', resolved)
\tconsole.dir(resolved);
}).catch(function(error) {
\tconsole.error('error >', error)
\tconsole.dir(error);
})
\n

ES6 Promises

\n

If you are unfamiliar with Promises, read up on these:

\n\n

iOS Quirks

\n

Promise.Resolves

\n
{
  \"carrierName\": String,
  \"countryCode\": String,
  \"mcc\": String,
  \"mnc\": String,
  \"allowsVOIP\": Boolean,
}
\n

Sadly there's nothing more we can get here.

\n

Promise.Rejects

\n

When using an emulator or a sim card does not exist.

\n

Android Quirks

\n

All permission dialogues are built into the Telephony function.

\n

Promise.Resolves

\n
When Permission is DENIED to READ_PHONE_STATE
\n
{
\t\"countryCode\": String,
\t\"simOperator\": String,
\t\"carrierName\": String,
\t\"callState\": Number,
\t\"dataActivity\": Number,
\t\"networkType\": Number,
\t\"phoneType\": Number,
\t\"simState\": Number,
\t\"isNetworkRoaming\": Boolean,
\t\"mcc\": String,
\t\"mnc\": String,
}
\n
When Permission is GRANTED to READ_PHONE_STATE
\n
{
\t// START GRANTED PERMISSIONS
\t\"phoneNumber\": String,
\t\"deviceId\": String,
\t\"deviceSoftwareVersion\": String,
\t\"simSerialNumber\": String,
\t\"subscriberId\": String,
\t// END GRANTED PERMISSIONS
\t\"countryCode\": String,
\t\"simOperator\": String,
\t\"carrierName\": String,
\t\"callState\": Number,
\t\"dataActivity\": Number,
\t\"networkType\": Number,
\t\"phoneType\": Number,
\t\"simState\": Number,
\t\"isNetworkRoaming\": Boolean,
\t\"mcc\": String,
\t\"mnc\": String,
}
\n

Promise.Rejects

\n

Never.

\n

Demo

\n
npm run setup
# iOS
npm run demo.ios
# Android
npm run demo.android
\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gradient":{"name":"nativescript-gradient","version":"2.0.1","license":"MIT","readme":"

NativeScript Gradient 🎨

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

\n

Those are screenshots of the Angular and plain XML demo apps.

\n

Installation

\n
tns plugin add nativescript-gradient
\n

Usage

\n

Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

\n

In addition to any properties you can already set on a StackLayout you should add:

\n\n

Angular

\n

Add this to app.module.ts so you can use a Gradient tag in the view:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"Gradient\", () => require(\"nativescript-gradient\").Gradient);
\n

These colors are also used in the screenshots above.

\n
<Gradient direction=\"to right\" colors=\"#FF0077, red, #FF00FF\">
  <Label class=\"p-20 c-white\" horizontalAlignment=\"center\" text=\"My gradients are the best.\" textWrap=\"true\"></Label>
  <Label class=\"p-10 c-white\" horizontalAlignment=\"center\" text=\"It's true.\" textWrap=\"true\"></Label>
</Gradient>
\n

Plain XML

\n

Import the Gradient namespace in the Page tag and enjoy the colors!

\n
<Page
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:Gradient=\"nativescript-gradient\" loaded=\"pageLoaded\">

  <Gradient:Gradient direction=\"to right\" colors=\"#FF0077, red, #FF00FF\">
    <Label text=\"Such a fancy gradient :)\" horizontalAlignment=\"center\"/>
  </Gradient:Gradient>
\n

Q & A

\n

Does this plugin use any third party libraries?

\n

Nope, it's as light as a feather!

\n

What kind of element is the Gradient tag?

\n

It's a StackLayout, so you can use all the regular StackLayout properties (like orientation="horizontal" and borderRadius="5") - and you can use the Gradient tag in any spot where you would otherwise use a StackLayout.

\n

How many colors can we pass to the plugin?

\n

Knock yourself out, but the minimum is two.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-urban-airship":{"name":"nativescript-urban-airship","version":"7.1.0","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-lottie":{"name":"nativescript-akylas-lottie","version":"4.0.14","license":"MIT","readme":"\n

NativeScript-Lottie

\n\n

NativeScript plugin to expose Airbnb Lottie for awesome animations.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"Action\n \n \n \"stars\"\n \n \n \"donate\"\n \n

\n

Changelog

\n

All notable changes to this project will be documented in the changelog.

\n

Demo Screen

\n

The .gif does not do the fluid animations justice

\n

\"LottieView\"

\n

Installation

\n

To install execute:

\n
tns plugin add nativescript-lottie
\n

Usage

\n

NativeScript (Core)

\n

XML

\n
<Page
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:Lottie=\"nativescript-lottie\" navigatingTo=\"navigatingTo\" class=\"page\">
    <StackLayout>
        <Lottie:LottieView src=\"PinJump.json\" height=\"130\" loop=\"true\" autoPlay=\"true\" loaded=\"yourLoadedEvent\" />
    </StackLayout>
</Page>
\n

TS

\n
import { LottieView } from \"nativescript-lottie\";

public yourLoadedEvent(args) {
    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
}
\n
\n

NativeScript Angular

\n

XML

\n
<StackLayout>
    <LottieView width=\"100\" height=\"150\" [src]=\"src\" [loop]=\"loop\" [autoPlay]=\"autoPlay\" (loaded)=\"lottieViewLoaded($event)\">     </LottieView>
</StackLayout>
\n

Component

\n
import { Component } from '@angular/core';
import { registerElement } from 'nativescript-angular';
import { LottieView } from 'nativescript-lottie';

registerElement('LottieView', () => LottieView);

@Component({
  templateUrl: 'home.component.html',
  moduleId: module.id
})
export class HomeComponent {
  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = [
      'Mobilo/A.json',
      'Mobilo/D.json',
      'Mobilo/N.json',
      'Mobilo/S.json'
    ];
    this.src = this.animations[0];
  }

  lottieViewLoaded(event) {
    this._lottieView = <LottieView>event.object;
  }
}
\n
\n

NativeScript Vue

\n

Bootstrap (probably in app.js)

\n
Vue.registerElement(
  'LottieView',
  () => require('nativescript-lottie').LottieView
);
\n

Component

\n
<template>
    <Page class=\"page\">
        <StackLayout>
            <LottieView height=\"130\" src=\"PinJump.json\" :loop=\"true\" :autoPlay=\"true\" @loaded=\"lottieViewLoaded\"></LottieView>
        </StackLayout>
    </page
</template>

<script>
    export default {
        methods: {
            lottieViewLoaded(args) {
                this._lottieView = args.object;
            },
        },
        data() {
            return {
                _lottieView: null,
            }
        }
    };
</script>
\n
\n

Assets

\n

:fire: You can find animations in the sample-effects folder.

\n

Android

\n

Place your animation files in the NS app's app/App_Resources/Android/src/main/assets folder.

\n

Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

\n

iOS

\n

Place your animations files in your app/App_Resources/iOS/ folder.

\n

Properties (bindable)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
autoPlaybooleanfalseStart LottieView animation on load if true.
loopbooleanfalseLoop continuously animation if true.
srcstringnullAnimation path to .json file.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
completionBlock(boolean) => voidnullCompletion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
durationnumbernullGet the duration of the animation.
progressnumber0Get/set the progress of the animation.
speednumber1Get/set the speed of the animation.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnParametersDescription
cancelAnimationvoidNonePauses the animation for the LottieView instance.
isAnimatingbooleanNoneReturns true if the LottieView is animating, else false.
playAnimationvoidNonePlays the animation for the LottieView instance.
playAnimationFromProgressToProgressvoidstartProgress, endProgressPlays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
setColorValueDelegateForKeyPathvoidvalue, keyPathSets the provided color value on each property that matches the specified keyPath in the LottieView instance.
setOpacityValueDelegateForKeyPathvoidvalue, keyPathSets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.
\n

Contributors

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Brad\"Nathan\"Jean-Baptiste\"HamdiWanis\"
bradmartinNathanWalkerrhanbHamdiWanis
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"itstheceo\"\"itstheceo\"
itstheceomudlabs
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-fixed-distorted":{"name":"nativescript-camera-plus-fixed-distorted","version":"1.0.7","license":"MIT","readme":"\n

NativeScript Camera Plus

\n\n

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

\n

\n\n \"LiveShopper\n \n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n

\n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n
tns plugin add @nstudio/nativescript-camera-plus
\n

Sample

\n

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

\n

\"Camera

\n

Demo

\n

The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

\n

Android Emulator Note

\n

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

\n

NOTE: You may want to run: npm run nuke first to clear and reset directories.

\n

Run Vanilla Demo

\n

Plug device in, then:

\n
npm run demo.ios.device
// or...
npm run demo.android.device
\n

Run Angular Demo

\n

Plug device in, then:

\n
npm run demo.ng.ios.device
// or...
npm run demo.ng.android.device
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
debugbooleanIf true logs will be output in the console to help debug the Camera Plus events.
confirmPhotosbooleanIf true the default take picture event will present a confirmation dialog before saving. Default is true.
confirmRetakeTextstringWhen confirming capture this text will be presented to the user to retake the photo. Default is 'Retake'
confirmSaveTextstringWhen confirming capture this text will be presented to the user to save the photo. Default is 'Save'
saveToGallerybooleanIf true the default take picture event will save to device gallery. Default is true.
galleryPickerModestringThe gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images. Default is 'multiple'
showFlashIconbooleanIf true the default flash toggle icon/button will show on the Camera Plus layout. Default is true.
showToggleIconbooleanIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout. Default is true.
showCaptureIconbooleanIf true the default capture (take picture) icon/button will show on the Camera Plus layout. Default is true.
showGalleryIconbooleanIf true the choose from gallery/library icon/button will show on the Camera Plus layout. Default is true.
enableVideobooleanIf true the CameraPlus instance can record video and videos are shown in the gallery.
\n

Static Properties

\n

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
\n

Android Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIconstringName of app_resource drawable for the toggle camera button.
takePicIconstringName of app_resource drawable for the take picture (capture) button.
galleryIconstringName of app_resource drawable for the open gallery (image library) button.
autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
\n

iOS Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
\n

Cross Platform Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
isCameraAvailable()Returns true if the device has at least one camera.
toggleFlash()Toggles the flash mode on the active camera.
toggleCamera()Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
record(opts?: IVideoOptions)Starts recording a video.
stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
\n

Android Only Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()Returns true if the application has been granted access to the device storage.
getNumberOfCameras()Returns the number of cameras on the device.
hasFlash()Returns true if the active camera has a flash mode.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
errorEventExecutes when an error is emitted from CameraPlus
photoCapturedEventExecutes when a photo is taken.
toggleCameraEventExecutes when the device camera is toggled.
imagesSelectedEventExecutes when images are selected from the device library/gallery.
videoRecordingStartedEventExecutes when video starts recording.
videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
confirmScreenShownEventExecutes when the picture confirm dialog is shown..
confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
\n

Option Interfaces

\n
export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}
\n
export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}
\n
export interface IVideoOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vt-nativescript-advanced-webview":{"name":"vt-nativescript-advanced-webview","version":"5.0.1","license":"MIT","readme":"\n

NativeScript Advanced Webview

\n\n

\nAn advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n

Here is a video showing off Chrome CustomTabs in NativeScript.

\n

Android

\n

CustomTabs

\n

iOS

\n

SFSafariViewController

\n

Why use this? Because Perf Matters

\n

Android Comparison

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Android\"iOS
\n

Installation

\n

To install execute

\n
tns plugin add nativescript-advanced-webview
\n

Example

\n

TypeScript

\n

Initiate the service before the app starts e.g app.ts, main.ts

\n
import { init } from 'nativescript-advanced-webview';
init();
\n
import { openAdvancedUrl, AdvancedWebViewOptions } from 'nativescript-advanced-webview';

public whateverYouLike() {

    const opts: AdvancedWebViewOptions = {
        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        toolbarColor: '#ff4081',
        toolbarControlsColor: '#333', // iOS only
        showTitle: false, // Android only
        isClosed: (res) => {
            console.log('closed it', res);
        }
    };

    openAdvancedUrl(opts);
}
\n

Javascript

\n

Initiate the service before the app starts e.g app.ts, main.ts

\n
var AdvancedWebView = require('nativescript-advanced-webview');

AdvancedWebView.init();
\n
exports.whateverYouLike = function(args){
    var opts = {
        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        toolbarColor: '#ff4081',
        toolbarControlsColor: '#333', // iOS only
        showTitle: false, // Android only
        isClosed: function (res) {
            console.log('closed it', res);
        }
    };

   AdvancedWebView.openAdvancedUrl(opts);
\n

API

\n\n
AdvancedWebViewOptions Properties
\n\n
Demo App
\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules-widgets":{"name":"tns-core-modules-widgets","version":"6.5.10","license":"Apache-2.0","readme":"

NativeScript Core Modules Widgets

\n

\"Build

\n

This library represents native code (Java and Objective-C) used by the NativeScript core modules.

\n

NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

\n\n\n\n

Contribute

\n

We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-native-expo-fancy-alerts":{"name":"react-native-expo-fancy-alerts","version":"2.1.1","license":"MIT","readme":"

React Native Fancy Alerts

\n

\"NPM\n\"Downloads\"\n\"License\"

\n

Adaptation of nativescript-fancyalert for react native. Compatible with expo 🤓

\n\n\n\n\n\n\n\n\n
\"Screenshot\"Screenshot\"Screenshot
\n

Quick Start

\n
$ npm i react-native-expo-fancy-alerts
\n

Or

\n
$ yarn add react-native-expo-fancy-alerts
\n
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { FancyAlert } from 'react-native-expo-fancy-alerts';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  const toggleAlert = React.useCallback(() => {
    setVisible(!visible);
  }, [visible]);

  return (
    <View>
      <TouchableOpacity onPress={toggleAlert}>
        <Text>Tap me</Text>
      </TouchableOpacity>

      <FancyAlert
        visible={visible}
        icon={<View style={{
          flex: 1,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'red',
          borderRadius: 50,
          width: '100%',
        }}><Text>🤓</Text></View>}
        style={{ backgroundColor: 'white' }}
      >
        <Text style={{ marginTop: -16, marginBottom: 32 }}>Hello there</Text>
      </FancyAlert>
    </View>
  )
}

export default App;
\n

Reference

\n

LoadingIndicator

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeRequiredDefaultDescription
visibleboolyesn/aWhether the loading indicator should be shown
\n

FancyAlert

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeRequiredDefaultDescription
visibleboolyesn/aWhether the alert should be visible
iconnodeyesn/aThe icon to show in the alert
styleobjectno{}Like your usual style prop in any View
onRequestClosefuncno() => voidThe action to run when the user taps the button
\n\n

Examples

\n

The following example illustrates how you can create a loading indicator for your entire app.\nIf you're using redux you may have a part of your store which says whether you're loading something,\nyou can get that flag and show one of the loading indicators offered by this lib.

\n
import React from 'react';
import { useSelector } from 'react-redux';
import { LoadingIndicator } from 'react-native-expo-fancy-alerts';
import { selectIsLoading } from 'selectors';

const AppLoadingIndicator = () => {
  const isLoading = useSelector(selectIsLoading);
  return <LoadingIndicator visible={isLoading} />;
}

export default AppLoadingIndicator;
\n

This next one is an error message that is also managed globally through redux.

\n
import React from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { FancyAlert } from 'react-native-expo-fancy-alerts';
import { Ionicons } from '@expo/vector-icons';
import { ErrorCreators } from 'creators';
import { selectError } from 'selectors';

const AppErrorModal = () => {
  const dispatch = useDispatch();
  const { hasError, error } = useSelector(selectError);

  const onRequestClose = React.useCallback(
    () => {
      dispatch(ErrorCreators.hideError());
    },
    [dispatch],
  );

  return <FancyAlert
    style={styles.alert}
    icon={
      <View style={[ styles.icon, { borderRadius: 32 } ]}>
        <Ionicons
          name={Platform.select({ ios: 'ios-close', android: 'md-close' })}
          size={36}
          color=\"#FFFFFF\"
        />
      </View>
    }
    onRequestClose={onRequestClose}
    visible={hasError}
  >
    <View style={styles.content}>
      <Text style={styles.contentText}>{error ? error.message : ''}</Text>

      <TouchableOpacity style={styles.btn} onPress={onPress}>
        <Text style={styles.btnText}>OK</Text>
      </TouchableOpacity>
    </View>
  </FancyAlert>;
}

const styles = StyleSheet.create({
  alert: {
    backgroundColor: '#EEEEEE',
  },
  icon: {
    flex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C3272B',
    width: '100%',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: -16,
    marginBottom: 16,
  },
  contentText: {
    textAlign: 'center',
  },
  btn: {
    borderRadius: 32,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 8,
    alignSelf: 'stretch',
    backgroundColor: '#4CB748',
    marginTop: 16,
    minWidth: '50%',
    paddingHorizontal: 16,
  },
  btnText: {
    color: '#FFFFFF',
  },
});

export default AppErrorModal;
\n

Changelog

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-loading-indicator":{"name":"@dsvishchov/nativescript-loading-indicator","version":"4.0.0","license":"Apache-2.0","readme":"\n

NativeScript Loading Indicator

\n\n

\nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation

\n

NativeScript 7+:

\n
ns plugin add @nstudio/nativescript-loading-indicator
\n

NativeScript lower than 7:

\n
tns plugin add @nstudio/nativescript-loading-indicator@3.0.x
\n

Screenshots

\n

iOS

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"iOS\"\"iOS\"\"iOS\"\"iOS\"
\n \n

\n

Android

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Android\"\"Android\"\"Android\"\"Android\"
\n

\n

Example

\n

TypeScript

\n
import {
  LoadingIndicator,
  Mode,
  OptionsCommon,
} from '@nstudio/nativescript-loading-indicator';

const indicator = new LoadingIndicator();

const options: OptionsCommon = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: someButton.ios, // Target view to show on top of (Defaults to entire window)
    square: false,
  },
};

indicator.show(options);

// after some async event maybe or a timeout hide the indicator
indicator.hide();
\n

javascript

\n
const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
  .LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

const loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
const options = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: android.view.View, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: UIView, // Target view to show on top of (Defaults to entire window)
  },
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Common Options

\n
export interface OptionsCommon {
  /**
   * Message in the loading indicator.
   */
  message?: string;

  /**
   * Details message in the loading indicator.
   */
  details?: string;

  /**
   * Color of the message text.
   */
  color?: string;

  /**
   * Background color of the loading indicator.
   */
  backgroundColor?: string;

  /**
   * Progress of the indicator when not using CustomView or Text Mode.
   */
  progress?: number;

  /**
   * Margin for the message/indicator to the edge of the bezel.
   */
  margin?: number;

  /**
   * Set true to allow user interaction.
   */
  userInteractionEnabled?: boolean;

  /**
   * Dim the background behind the indicator.
   */
  dimBackground?: boolean;

  /**
   * Hide bezel around indicator
   */
  hideBezel?: boolean;

  /**
   * The mode of the loading indicator.
   */
  mode?: Mode;

  /**
   * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
   */
  customView?: any;

  /**
   * iOS specific configuration options.
   */
  ios?: OptionsIOS;

  /**
   * Android specific configuration options.
   */
  android?: OptionsAndroid;
}
\n

Android Specific

\n
export interface OptionsAndroid {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: android.view.View;
  max?: number;
  progressNumberFormat?: string;
  progressPercentFormat?: number;
  progressStyle?: number;
  secondaryProgress?: number;
  cancelable?: boolean;
  cancelListener?: (dialog: any) => void;
  elevation?: number;
}
\n

iOS Specific

\n
export interface OptionsIOS {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: UIView;
  square?: boolean;
}
\n

Mode Enum

\n
export enum Mode {
  Indeterminate = 0,
  Determinate = 1,
  DeterminateHorizontalBar = 2,
  AnnularDeterminate = 3,
  CustomView = 4,
  Text = 5,
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-spotify":{"name":"nativescript-spotify","version":"1.6.1","license":{"type":"MIT","url":"https://github.com/NathanWalker/nativescript-spotify/blob/master/LICENSE"},"readme":"

\"alt

\n

A NativeScript plugin for the Spotify iOS and Android SDKs.

\n\n

Install

\n
npm install nativescript-spotify --save
\n

Prerequisites

\n\n

Background

\n\n

Usage

\n

Platform Prerequisites

\n

iOS

\n

Setup

\n\n

Configure application launch phases to setup your Spotify App CLIENT_ID and REDIRECT_URL (the ones you created above in the developer account):

\n
import * as application from 'application';
import {NSSpotifyConstants, NSSpotifyAuth} from 'nativescript-spotify';

class MyDelegate extends UIResponder {
  public static ObjCProtocols = [UIApplicationDelegate];
  
  public applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
    
    NSSpotifyConstants.CLIENT_ID = 'your spotify premium account api key';
    TNSSpotifyAuth.REDIRECT_URL = 'your-app-custom-url-scheme://spotifylogin';
    return true;
  }
}
application.ios.delegate = MyDelegate;
application.mainModule = \"main-page\";
application.cssFile = \"./app.css\";
application.start();
\n\n
import {SpotifyDemo} from \"./main-view-model\";

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = new SpotifyDemo();
}
exports.pageLoaded = pageLoaded;
\n\n
import {Observable, EventData} from 'data/observable';
import {Page} from 'ui/page';
import {topmost} from 'ui/frame';
import {AnimationCurve} from 'ui/enums';
import * as loader from 'nativescript-loading-indicator';
import {TNSSpotifyConstants, TNSSpotifyAuth, TNSSpotifyPlayer, TNSSpotifyPlaylist, TNSSpotifyRequest, Utils} from 'nativescript-spotify';

export class SpotifyDemo extends Observable {
  private _spotify: TNSSpotifyPlayer;

  constructor() {
    super();
    
    this._spotify = new TNSSpotifyPlayer();
    
    // when using iOS delegates that extend NSObject, TypeScript constructors are not used, therefore a separate `initPlayer()` exists
    this._spotify.initPlayer(true); // passing `true` lets player know you want it to emit events (sometimes it's not desired)
    
    // small sample of events (see Documentation below for full list)
    this._spotify.audioEvents.on('albumArtChange', (eventData) => {
      this.updateAlbumArt(eventData.data.url);
    });
    this._spotify.audioEvents.on('authLoginSuccess', (eventData) => {
      this.loginSuccess();
    });
  }
  
  public login() {
    TNSSpotifyAuth.LOGIN();
  }
  
  public play(args?: EventData) {
    this._spotify.togglePlay('spotify:track:58s6EuEYJdlb0kO7awm3Vp').then((isPlaying: boolean) => {
      console.log(isPlaying ? 'Playing!' : 'Paused!');
    }, (error) => {
      console.log(`Playback error: ${error}`);
    });
  }
  
  private updateAlbumArt(url: string) {
    this.set(`currentAlbumUrl`, url);
  }
  
  private loginSuccess() {
    console.log(`loginSuccess!`);
  } 
}
\n

Screenshots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 3Sample 4
\"Sample3\"\"Sample4\"
\n

Android

\n

Setup

\n\n

Documentation

\n

TNSSpotifyPlayer

\n

TNSSpotifyPlayer implements SPTAudioStreamingPlaybackDelegate.

\n

Creating:

\n
// Option 1: simple
this.spotify = new TNSSpotifyPlayer();
this.spotify.initPlayer();

// Option 2: advanced
this.spotify = new TNSSpotifyPlayer();
// passing `true` will let the player know it should emit events
this.spotify.initPlayer(true);

// it allows you to listen to events like so:
this.spotify.audioEvents.on('startedPlayingTrack', (event) => {
  console.log(event.data.url); // spotify track url
});

// play/pause a track
this.spotify.togglePlay('spotify:track:58s6EuEYJdlb0kO7awm3Vp').then((isPlaying: boolean) => {
  console.log(isPlaying ? 'Playing!' : 'Paused!');
}, (error) => {
  console.log(`Playback error: ${error}`);
});
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
togglePlay(track?: string): Promise<any>Allows toggle play/pause on a track, or changing a track. track must be a valid spotify track uri. Learn more here
isPlaying(): booleanDetermine if player is currently playing
isLoggedIn(): booleanDetermine if player is authenticated
setVolume(value: number): Promise<any>Set the player volume
loadedTrack(): stringDetermine current loaded track (spotify track uri)
currentTrackMetadata(): ISpotifyTrackMetadataGet the current track's metadata. Learn more here
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
authLoginChangeSends along data = status: boolean When auth state changes.
authLoginCheckWhen auth callback has returned and is verifying authentication
authLoginSuccessWhen auth succeeded
albumArtChangeSends along data = url: string When track triggers a play start, this will also trigger to send along the correct album art of the track.
playerReadyWhen the session has been validated and the player is ready to play.
changedPlaybackStatusSends along data = playing: boolean When playback state changes.
seekedToOffsetSends along data = offset: number When player has seeked to a given offset.
changedVolumeSends along data = volume: number When the player volume was changed.
changedShuffleStatusSends along data = shuffle: number When shuffle setting was changed.
changedRepeatStatusSends along data = repeat: number When repeat setting was changed.
changedToTrackSends along data = metadata: any When track change occurs.
failedToPlayTrackSends along data = url: string When track play fails. Provides the url of the track that failed.
startedPlayingTrackSends along data = url: string When track play starts. Provides the url of the track that started.
stoppedPlayingTrackSends along data = url: string When track play stops. Provides the url of the track that stopped.
skippedToNextTrackWhen player skipped to next track.
skippedToPreviousTrackWhen player skipped to previous track.
activePlaybackDeviceWhen the audio streaming object becomes the active playback device on the user’s account.
inactivePlaybackDeviceWhen the audio streaming object becomes an inactive playback device on the user’s account.
poppedQueueWhen the audio streaming object becomes an inactive playback device on the user’s account.
temporaryConnectionErrorA temporary connection error occurred.
streamErrorSends along data = error: any when a streaming error occurred.
receivedMessageSends along data = message: string when a message is received from the Spotify service.
streamDisconnectedWhen the stream becomes disconnected.
\n

TNSSpotifyAuth

\n

TNSSpotifyAuth

\n

Provides static properties and methods to help with authentication handling and user management.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
REDIRECT_URL: stringUsed to set your spotify application redirect url, required for device auth redirect, ie: 'your-app-custom-url-scheme://spotifylogin'
SESSION: SPTSessionRepresents the current auth session.
CLEAR_COOKIES: booleanClear cookies in auth window to not remember last logged in user. Defaults false.
PREMIUM_MSG: stringThe message which alerts when a non-premium user attempts to play a track.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
LOGIN(): voidInitiates login sequence.
LOGIN_WITH_SESSION(session): voidLogs user in with session returned from the in-app browser auth window.
LOGOUT(): voidClear's persisted user session and notifies of login change.
HANDLE_AUTH_CALLBACK(url): booleanWhen using standard browser redirect auth, this can be used in application launch phase to handle the auth redirect back into the app. On older versions, this may be needed.
VERIFY_SESSION(session?: any): Promise<any>Mainly used internally, but used to restore a session from local persistence and/or renew.
SAVE_SESSION(session): voidMainly used internally, but can be used to persist a valid Spotify session.
GET_STORED_SESSION(): anyGet the current user's session. Learn more here
RENEW_SESSION(session): Promise<any>Can be used to pass an expired session to renew it.
CURRENT_USER(): Promise<any>Get the current user object. Learn more here
\n

TNSSpotifySearch

\n

TNSSpotifyAuth

\n

Provides 1 static method to search Spotify.

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
QUERY(query: string, queryType: string, offset: number = 0): Promise<any>Search and paginate through query results of Spotify search results. Resolves an Object structure: {page: number (offset), hasNextPage: boolean, totalListLength: number, tracks: Array}. Right now using queryType = 'track' is supported. More query types coming soon.
\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-orientation":{"name":"@codesthings/nativescript-orientation","version":"3.0.0","license":{"type":"MIT","url":"https://proplugins.org/proplugins/nativescript-orientation/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

nativescript-orientation

\n

A NativeScript plugin to deal with Declarative UI and Screen Orientation\nThis handles both sides of the orientation issues; both the events on when the orientation changes; and the ability to change the orientation manually.

\n

ProPlugins

\n

We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

\n

\n

Community

\n

Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

\n

Developed by

\n

\"MasterTech\"

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Sample Snapshot

\n

\"Sample1\"\nThanks to TJ VanToll for the awesome animated gif.

\n

Installation

\n

Nativescript 7.x.x

\n

tns plugin add nativescript-orientation

\n

NativeScript 3.x.x - 6.x.x

\n

tns plugin add nativescript-orientation@2.2.5

\n

NativeScript 2.x.x

\n

tns plugin add nativescript-orientation@1.6.1

\n

Migration to 3.0 for Nativescript 7 support and es2017 :)

\n

Replace all:

\n
var orientation = require( \"nativescript-orientation\" );
\n

with:

\n
import orientation from \"nativescript-orientation\";
\n

Usage

\n

To use the module you just require() it:

\n
require( \"nativescript-orientation\" );
\n

This plugin has two separate abilities; the first ability is to setup the cool ability to run a function and setup the css when the screen is rotated.\nFor this ability, you do NOT need to keep a reference to it for the orientation event handling and css. You only need to load it once. I recommend you add it to your app.js file and forget about it.\nIt will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.\nWhat this does is automatically add and remove the "landscape" to the current Page's cssClass variable (and does other magic behind the scenes allowing it to actually work).

\n

If you want to manually control the orientation, then you will need to require it and use the functions you need.

\n

You ask, how exactly does this help?

\n

Well, guess what Cascading means in CSS?
\nYes, this means this works now:

\n

Plain Awesome NativeScript (PAN)

\n
StackLayout {
  background-color: red;
}

.landscape StackLayout {
  background-color: green;
}
\n

NativeScript Angular (NAN)

\n

/deep/ .landscape StackLayout  {
    background-color: green;
}
\n

I was recently informed the :host is a better options, as it causes less potential isolation side effects in Angular.

\n
StackLayout {
    background-color : red;
}


.landscape :host StackLayout {
  background-color: green;
}
\n

So in portrait the background would be red, in landscape the color is green.\nPlease note in Angular, you need to prefix the .landscape with /deep/ for it to work!\nIn addition, for Angular I was recently informed that :host is also a valid option, I have not tested this; but I wanted to get it documented.

\n

Why use this?

\n

You can set ALL the normal CSS values this way include width, height, font-size.\nBy using the css to control any normal items and your own page's exports.orientation to control anything not controllable by css you can change the look completely between Landscape/Portrait.

\n

You can add to any page you need it the following Function:

\n

exports.orientation(args)

\n
args.landscape = true | false
\n
args.object = the current page
\n

This function (if it exists) will be ran when the page is first created so you can set any needed defaults. (This is ran at the same time as the PageNavigatingTo event)\nThis function (if it exists) will be ran each time the orientation changes.\nSince at this moment some items can't be controlled by CSS like orientation on ScrollView, this event allows you to control change those things when the orientation changes via your code.

\n

Please note, there is also a built in event in NativeScript called orientationChanged event. The differences between these is that the built in event only gets called when the orientation changes;\nThis event is called on every screen navigation and any time the device rotates; allowing you to setup any rotation stuff during the creation of the screen.
\nANGULAR NOTE: The exports.orientation function event does NOT work in Angular since Angular does not have the same concept. You can use the orientation.addOrientationApplier instead.

\n

Additional Helper Methods

\n
import orientation from \"nativescript-orientation\";
\n

orientation.getOrientation(sensors?)

\n
optional sensor === true, will return you sensor values on android verses screen size calculation
\n
Some android tablets lie about port vs landscape; so we determine the orientation based on the current screen sizes
\n
  console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value
\n

orientation.setOrientation(direction, animation)

\n
Direction - "portrait" | "landscape" | "landscapeleft" | "landscaperight" | enum DeviceOrientation
\n
Animation === false, disabled animation on iOS. (iOS ONLY currently)
\n

This will automatically disable rotation support after it changes the orientation.

\n
  orientation.setOrientation(\"landscape\");
\n

orientation.enableRotation() - enable orientation

\n

This will enable automatic orientation support

\n
  orientation.enableRotation();  // The screen will rotate to whatever the current settings are...
\n

orientation.disableRotation() - disables orientation

\n

This will disable automatic orientation support and lock it to the current orientation

\n
  orientation.disableRotation(); // The screen will no longer rotate
\n

orientation.setFullScreen(value) - true/false

\n

Orientation Appliers

\n

Orientation Appliers serve as hooks into the orientation application logic for nativescript-orientation. Whenever nativescript-orientation applies its orientation logic it also calls any Orientation Appliers that you've added. This allows you to easily execute your own logic when orientation needs to be considered/applied. Orientation Appliers are simple functions that receive 1 parameter: the current orientation in string form (the same as is returned from the orientation.getOrientation() method). Methods to add and remove Orientation Appliers, as well as examples, are supplied below.

\n

oprientationApplierCallback

\n
args.landscape = true | false
\n
args.object = the current page
\n

The callback receives the same arguments as the exports.orientation event in normal NativeScript.

\n

orientation.addOrientationApplier(orientationApplierCallback)

\n

This adds an Orientation Applier

\n
var MyModule = (function() {
  var orientation = require('nativescript-orientation');

  this.boundProperty = \"some value\";


  function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = \"a different value\";
  }

  orientation.addOrientationApplier(myCallback.bind(this));

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;
\n

orientation.removeOrientationApplier(orientationApplierCallback)

\n

This removes an Orientation Applier from the set of Orientation Appliers that will be executed.

\n
var MyModule = (function() {
  var orientation = require('nativescript-orientation');

 function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = \"a different value\";
  }

  var myOrientationApplier = myCallback.bind(this);
  orientation.addOrientationApplier(myOrientationApplier);

  // Somewhere later in your code...
  orientation.removeOrientationApplier(myOrientationApplier);

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;
\n

Two key things to remember when using this functionality:

\n
    \n
  1. Use myCallback.bind(this) when adding your Orientation Applier (this preserves the correct 'this' scope for your callback method).
    2. \n
  2. In Nativescript Angular, the orientation change event does not trigger an Angular Change Detection cycle. Because of this you'll need to manually trigger Change Detection within your Orientation Applier by injecting ChangeDetectorRef from @angular/core into your Component and calling this.changeDetectorRef.detectChanges() from within your Orientation Applier;
    3. \n
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache":{"name":"nativescript-web-image-cache","version":"5.0.0","license":"MIT(https://github.com/VideoSpike/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

#Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for iOS and Facebook Fresco for android.\nSupports local Images.

\n

License

\n

Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

\n

Installation

\n
tns plugin add nativescript-web-image-cache\n
\n

** Tested on NativeScript 2.3+ on both Angular 2 and VanillaJS, if any problems while running on previous versions, please update. This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin, please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

\n

Usage in Vue

\n

In main.js:

\n
const Vue = require(\"nativescript-vue\") // you already have something like this
Vue.registerElement('WebImage', () => require('nativescript-web-image-cache').WebImage) // now add this
\n

Then in any .vue file:

\n
<OtherMarkup>
  <WebImage src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></WebImage>
</OtherMarkup>
\n

Usage in Angular

\n
\n

⚠️ This was changed in plugin version 5.0.0!

\n
\n

In app.module.ts, or any specific module you want to use this plugin:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"WebImage\", () => require(\"nativescript-web-image-cache\").WebImage);
\n

After initialisation, the markup tag <WebImage></WebImage> can be used in templates of components.

\n
    <GridLayout rows='*' columns='*'>
        <WebImage stretch=\"fill\" row=\"0\"
                     col=\"0\" placeholder=\"localPlaceholderImgorResUrl\"
                     src=\"#your image url here\">
        </WebImage>
    </GridLayout>
\n

Caching the images

\n\n

Check if image is loading

\n\n

The Markup

\n
    <WebImage stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </WebImage>\n
\n

The Backing Component Class Snippet

\n
     @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
\n

Clearing the cache

\n

Import the module, call the method clearCache() , default time is for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

\n
 import {clearCache} from "nativescript-web-image-cache";\n clearCache();\n
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
import {setCacheLimit} from "nativescript-web-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
\n

Usage in VanillaJS/TypeScript apps

\n

IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

\n

Initialising on android - in app.js

\n
var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
\n

After initialisation, add the namespace attribute xmlns:IC="nativescript-web-image-cache" to the opening page tag of xml. The markup tag <IC:WebImage></IC:WebImage> should be used to denote images.

\n
    <Page xmlns:IC=\"nativescript-web-image-cache\">
        <GridLayout rows='*' columns='*'>
            <IC:WebImage stretch=\"fill\" row=\"0\"
             col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
             src=\"#image-url\">
             </IC:WebImage>  
        </GridLayout>
    </Page>
\n

Caching the images

\n\n

Check if image is loading

\n\n
var imageCacheModule=require(\"nativescript-web-image-cache\");

var myImage1 = page.getViewById(\"my-image-1\"),
    isLoading = myImage1.isLoading;
\n

Clearing the cache

\n\n
var imageCacheModule=require(\"nativescript-web-image-cache\");
imageCacheModule.clearCache();
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
var imageCache = require("nativescript-web-image-cache");\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);\n
\n

for android, you need to initialize in the application onlaunch event before clearing the cache

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal":{"name":"nativescript-onesignal","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

NativeScript-OneSignal

\n

A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

\n

Contributors

\n

OneSignal-iOS-SDK

\n

OneSignal-Android-SDK

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-onesignal
\n

iOS

\n

Does not need any configuration.

\n

Android

\n

Does not need any configuration.

\n

Usage

\n

Typescript

\n
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
\n

iOS

\n

TnsOneSignal is the native iOS OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.ios) {
\tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

\t\tpublic static ObjCProtocols = [UIApplicationDelegate]

\t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

\t\t\ttry {

\t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

\t\t\t} catch (error) {
\t\t\t\tconsole.error('error', error)
\t\t\t}

\t\t\treturn true
\t\t}

\t}
\tapplication.ios.delegate = MyDelegate
}
\n

Android

\n

TnsOneSignal is the native Android com.onesignal.OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.android) {
\tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

\t\ttry {

\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\tTnsOneSignal.startInit(application.android.context).init()

\t\t} catch (error) {
\t\t\tconsole.error('error', error)
\t\t}

\t})
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Typescript Typings

\n

iOS

\n

Android - In the works...

\n

Demo

\n
npm run setup
# iOS
npm run demo.ios
# Android
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-pulltorefresh":{"name":"nativescript-akylas-pulltorefresh","version":"2.3.2","license":"MIT","readme":"\n

NativeScript-PullToRefresh

\n\n

\nNativeScript plugin to use Pull to Refresh on any view.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

tns plugin add @nstudio/nativescript-pulltorefresh

\n

Android - SwipeRefreshLayout

\n

iOS - UIRefreshControl

\n

Sample Screen

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Android\"iOS
\n

Usage

\n

NativeScript Core

\n

XML

\n
<page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:PullRefresh=\"@nstudio/nativescript-pulltorefresh\"
      loaded=\"pageLoaded\">
    <PullRefresh:PullToRefresh refresh=\"refreshList\">
        <list-view items=\"{{ users }}\">
            <list-view.itemTemplate>
                <label text=\"{{ name }}\" row=\"0\" col=\"1\"textWrap=\"true\" class=\"message\" />
            </list-view.itemTemplate>
        </list-view>
    </PullRefresh:PullToRefresh>
</page>
\n

JS

\n
function refreshList(args) {
  // Get reference to the PullToRefresh component;
  var pullRefresh = args.object;

  // Do work here... and when done call set refreshing property to false to stop the refreshing
  loadItems().then(
    resp => {
      // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
      setTimeout(() => {
        pullRefresh.refreshing = false;
      }, 1000);
    },
    err => {
      pullRefresh.refreshing = false;
    }
  );
}
exports.refreshList = refreshList;
\n

Angular NativeScript

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"PullToRefresh\", () => require(\"@nstudio/nativescript-pulltorefresh\").PullToRefresh);

refreshList(args) {
         const pullRefresh = args.object;
         setTimeout(function () {
            pullRefresh.refreshing = false;
         }, 1000);
    }
\n

HTML

\n
<PullToRefresh (refresh)=\"refreshList($event)\">
  <ListView [items]=\"itemList\">
    <template let-item=\"item\">
      <label [text]=\"item.id\"></label>
    </template>
  </ListView>
</PullToRefresh>
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';

Vue.registerElement(
  'PullToRefresh',
  () => require('@nstudio/nativescript-pulltorefresh').PullToRefresh
);
\n

Component

\n
<template>
  <Page>
    <PullToRefresh @refresh=\"refreshList\">
      <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
        <v-template>
          <!-- Shows the list item label in the default color and style. -->
          <label :text=\"item.text\" />
        </v-template>
      </ListView>
    </PullToRefresh>
  </Page>
</template>

<script>
export default {
  methods: {
    refreshList(args) {
      var pullRefresh = args.object;
      setTimeout(function() {
        pullRefresh.refreshing = false;
      }, 1000);
    }
  }
};
</script>
\n

Properties

\n\n

Changelog

\n

Contributing

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-security":{"name":"nativescript-security","version":"1.0.0","license":"MIT","readme":"

NativeScript Security plugin (w/ TypeScript)

\n

iOS and Android fingerprint scanner for {N} apps.

\n

Installation

\n
tns plugin add nativescript-security
\n

Usage

\n

Check for availability

\n
import {Security} from 'nativescript-security';

let security = new Security();

let security.available().then(() => {
  
}).catch((error:any)=>{
  console.log(error);
});
\n

Verify Fingerprint

\n
import {Security, FingerprintOptions} from 'nativescript-security';

let options:FingerprintOptions = {
  iOSMessage:'Your message:',
  androidTitle: 'Your title',
  androidMessage: 'Your message'
};

let security = new Security();

let security.verifyFingerPrint(options).then(() => {
  console.log('Verified OK');
}).catch((error) => {
  console.log(error);
});
\n

Future plans

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-sensors":{"name":"nativescript-android-sensors","version":"2.1.0","license":"Apache-2.0","readme":"\n

NativeScript-Android-Sensors

\n\n

NativeScript plugin for using android device sensors that run on a background thread.

\n

\n \n \"npm\"\n \n

\n

Installation

\n

NativeScript 7+:

\n
ns plugin add nativescript-android-sensors
\n

NativeScript version lower than 7:

\n
tns plugin add nativescript-android-sensors@1.5.0
\n

Android Sensors: https://developer.android.com/reference/android/hardware/Sensor.html

\n

Usage

\n
import { AndroidSensors, AndroidSensorListener, SensorDelay } from 'nativescript-android-sensors';

const sensors = new AndroidSensors();
const accelerometerSensor: android.hardware.Sensor;
const gyroScope: android.hardware.Sensor;

const sensorListener = new AndroidSensorListener({
    onAccuracyChanged: (
        sensor: android.hardware.Sensor,
        accuracy: number
      ) => {
        console.log('accuracy', accuracy);
    },
    onSensorChanged: (result: string) => {
        // result is being returned as a string currently
        const parsedData = JSON.parse(result);
        const rawSensorData = parsedData.data;
        const sensor = parsedData.sensor;
        const time = parsedData.time;
    }
});

this.sensors.setListener(sensorListener);


someFunction() {
    accelerometerSensor = sensors.startSensor(android.hardware.Sensor.TYPE_LINEAR_ACCELERATION, SensorDelay.FASTEST);

    // here we are using the android const 4 which is for the TYPE_GYROSCOPE sensor
    // https://developer.android.com/reference/android/hardware/Sensor.html#TYPE_GYROSCOPE
    // we are passing the third argument to `startSensor` which is for maxReportLatency, if the sensor is able to support FIFO this will register the sensor with the reporting latency value, if not, the sensor registers on the background thread as normal
    const gyroScope =  sensors.startSensor(4, SensorDelay.NORMAL, 4000000);

    // maybe you wanna use a timeout and stop it after 8 seconds
    setTimeout(() => {
        sensors.stopSensor(gyroScope);
    }, 8000)
}

functionToStopTheSensorData() {
    sensors.stopSensor(accelerometerSensor);
}
\n

API

\n

Constructor

\n

AndroidSensors (liteData: boolean = false)

\n

The boolean argument for liteData changes the JSON returned from the sensor event changes. This is helpful when you are storing large amounts of dataset by reducing the redundant data from the sensor changed event.

\n
import {
  AndroidSensors,
  AndroidSensorListener,
  SensorDelay,
} from 'nativescript-android-sensors';

const sensors = new AndroidSensors(true);
\n

Methods

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-partials":{"name":"nativescript-ngx-partials","version":"1.2.9","license":"MIT","readme":"

Nativescript-Ngx-Partials

\n

A Nativescript Angular module to quickly create Pages and Layout fragments

\n

Setup

\n

npm install nativescript-ngx-partials --save

\n

Import the module into your app-module

\n
import { PartialsModule } from 'nativescript-ngx-partials';
\n

Getting Started

\n

Page

\n

The page layout consists of a root tag and nested attribute containers:

\n\n

The Page has the following options:

\n\n

Panel

\n

The Panel is a NativeScript Flex-box layout view that simplifies the process of nested elements by using row and column tags

\n
\n

You can add the native Flexbox css styles to the Row/Col Panel

\n
\n

Row

\n

RowPanel

\n

The RowPanel has the following nested containers:

\n\n

Col

\n

ColPanel

\n

The ColPanel has the following nested containers:

\n\n

Examples

\n

Provided in the demo app

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/webview-interface":{"name":"@abbieben/webview-interface","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-react-vision":{"name":"@nativescript/template-blank-react-vision","version":"8.6.2","license":"Apache-2.0","readme":"

NativeScript Application

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-sim-info":{"name":"ns-sim-info","version":"1.0.0","license":"Apache-2.0","readme":"

ns-sim-info

\n

This plugin is forked from nativescript-sim-info. This plugin uses @nativescript/plugin-seed. The plugin will not request phone number in Android in order to reduce requested permissions. manager.getLine1Number requires permissions for SMS and phone numbers in Android, which are difficult to grant in play store. iOS does not provide phone numbers.

\n
ns plugin add ns-sim-info
\n

Usage

\n
    import { SimInfo } from \"ns-sim-info\";

    load(): void {
        const simInfo = new SimInfo();
        simInfo.getData()
            .then((simData) => {
                console.log(simData)
            }).catch((error) => {
                console.error(error);
            });
    }
\n

Android Output

\n

Single Sim

\n
[
    {
        \"isoCountryCode\": \"at\",
        \"simOperator\": \"23XXX\",
        \"carrierName\": \"A1\",
        \"callState\": null,
        \"dataActivity\": null,
        \"phoneType\": 1,
        \"simState\": 5,
        \"isNetworkRoaming\": true,
        \"mcc\": 232,
        \"mnc\": 1,
        \"phoneNumber\": \"\",
        \"deviceSoftwareVersion\": \"01\",
        \"simSerialNumber\": \"894301561923869XXXX\",
        \"subscriberId\": \"23201163022XXXX\",
        \"isDefaultSim\": true,
        \"networkType\": 13,
        \"deviceImei\": \"35404611160XXXX\",
        \"deviceMeid\": \"\",
        \"subscriptionId\": 1
    }
]
\n

Dual Sim

\n
[
    {
        \"isoCountryCode\": \"at\",
        \"simOperator\": \"23XXX\",
        \"carrierName\": \"spusu\",
        \"callState\": null,
        \"dataActivity\": 4,
        \"phoneType\": 1,
        \"simState\": 5,
        \"isNetworkRoaming\": true,
        \"mcc\": 232,
        \"mnc\": 17,
        \"phoneNumber\": \"\",
        \"deviceSoftwareVersion\": \"00\",
        \"simSerialNumber\": \"894317008000176XXXX\",
        \"subscriberId\": \"23217004025XXXX\",
        \"isDefaultSim\": true,
        \"networkType\": 13,
        \"deviceImei\": \"86760103133XXXX\",
        \"deviceMeid\": \"9900111506XXXX\",
        \"subscriptionId\": 1
    },
    {
        \"isoCountryCode\": \"at\",
        \"carrierName\": \"A1\",
        \"isNetworkRoaming\": true,
        \"phoneNumber\": \"\",
        \"mcc\": 232,
        \"mnc\": 1,
        \"subscriptionId\": 4,
        \"simSerialNumber\": \"894301561520280XXXX\",
        \"isDefaultSim\": false
    }
]
\n
\nPossible errors\n

The plugin will request more or less permission items depending on the Android version. If any of the permissions are rejected by the user, an object will be returned as a rejected promise.

\n
{
    \"android.permission.READ_PHONE_STATE\": false,
}
\n
\n

iOS Output

\n

Single Sim

\n
[
    {
        \"mnc\": \"232\",
        \"isoCountryCode\": \"at\",
        \"carrierName\": \"A1\",
        \"allowsVOIP\": true,
        \"mcc\": \"1\"
    }
]
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyPlatformAndroid VersioniOS VersionTypeDescription
isoCountryCodecommon11stringReturns the ISO-3166 country code equivalent for the SIM provider's country code.
carrierNamecommon11stringReturns the MCC+MNC (mobile country code + mobile network code) of the provider of the SIM. 5 or 6 decimal digits.
mcccommon11string - number - nullReturns the mobile country code (MCC).
mnccommon11string - number - nullReturns the mobile network code (MNC).
simOperatorandroid1-stringReturns the Service Provider Name (SPN).
callStateandroid1-number - nullReturns the state of all calls on the device.
dataActivityandroid1-number - nullReturns a constant indicating the type of activity on a data connection (cellular).
phoneTypeandroid1-number - nullReturns a constant indicating the device phone type.
simStateandroid1-number - nullReturns a constant indicating the state of the default SIM card.
isNetworkRoamingandroid1-boolean - nullReturns true if the device is considered roaming on the current network, for GSM purposes.
phoneNumberandroid--stringReturns the phone number string for line 1, for example, the MSISDN for a GSM phone. Returns null or "" if it is unavailable.
deviceSoftwareVersionandroid1-stringReturns the software version number for the device, for example, the IMEI/SV for GSM phones.
simSerialNumberandroid1-stringReturns the serial number of the SIM, if applicable.
subscriberIdandroid1-stringReturns the unique subscriber ID, for example, the IMSI for a GSM phone.
subscriptionIdandroid5.1 (Api: 22)-number - nullReturns the subscription.
simSerialNumberandroid5.1 (Api: 22)-stringReturns SIM unique serial number (ICCID).
networkTypeandroid7 (Api: 24)-number - nullReturns a constant indicating the radio technology (network type) currently in use on the device for data transmission.
deviceImeiandroid8 (Api: 26)-stringreturns IMEI for GSM.
isDefaultSimandroid--boolean - nullReturns true if the sim is considered the default.
allowsVOIPios-1boolean - nullIndicates if the carrier allows making VoIP calls on its network.
\n

Android

\n

Dual-Sim Support

\n

From Api Level 22, A.K.A LOLLIPOP_MR1 or Android 5.1, there is support for dual sim. I would like to point out that there is a difference in number of information attributes between what Android considers the default subscription (TelephonyManager) and the subscriptions (SubscriptionManager).

\n

iOS

\n

Dual-Sim Support

\n

From iOS 12 on, Apple supports dual sim. The available information attributes are the same for the default and secondary sim.

\n

Phone Number

\n

Apple does not allow the access to the phone number under any circumstance. More information on this topic can be found under the point 2.5.2 of the guidelines.

\n

Testing phones

\n\n

Acknowledgements

\n

nativescript-sim-info

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-datetimepicker":{"name":"nativescript-datetimepicker","version":"1.2.3","license":"Apache-2.0","readme":"

NativeScript 7

\n\n

If using 6 and below, see the following:

\n

NativeScript DateTimePicker

\n

\"npm\"\n\"npm\"\n\"Build

\n

A NativeScript plugin that provides ui elements for picking date and time. The plugin provides UI elements for picking date and time - DatePickerField, TimePickerField and DateTimePickerFields - they are all NativeScript Views that show selected date and/or time and allow picking another after being tapped. There is also a DateTimePicker class which provides static methods pickDate and pickTime that can be called to show the same dialog picker as the fields.

\n\n\n

Screenshots

\n\"DatePickerField\n\"TimePickerField\n

Installation

\n
tns plugin add nativescript-datetimepicker
\n

Configuration

\n

No additional configuration required!

\n

Usage

\n

To use one of the UI elements DatePickerField, TimePickerField or DateTimePickerFields in markup you need to:

\n\n
<Page
   xmlns=\"http://schemas.nativescript.org/tns.xsd\"
   xmlns:datetime=\"nativescript-datetimepicker\">
   <datetime:DatePickerField hint=\"select date\"/>
   <datetime:TimePickerField hint=\"select time\"/>
   <datetime:DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"/>
...
\n\n
import { NativeScriptDateTimePickerModule } from \"nativescript-datetimepicker/angular\";
...
@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptDateTimePickerModule,
        ...
    ],
    ...
\n

Then you will be able to declare the fields in the html of your component:

\n
<DatePickerField hint=\"select date\"></DatePickerField>
<TimePickerField hint=\"select time\"></TimePickerField>
<DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
\n\n
import Vue from \"nativescript-vue\";
import DateTimePicker from \"nativescript-datetimepicker/vue\";
Vue.use(DateTimePicker);
\n

Then you will be able to decrare the fields in the template of your component:

\n
<DatePickerField hint=\"select date\"></DatePickerField>
<TimePickerField hint=\"select time\"></TimePickerField>
<DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
\n

Features

\n

DatePickerField and TimePickerField

\n

The DatePickerField and the TimePickerField are NativeScript Views that extend TextField, when tapped, they open a picker dialog that allows date/time selection.

\n\n

The DatePickerField has a date property and the TimePickerField has a time property which can be used to get their current value. You can also set their value through markup. DatePickerField's date property will just pass the string you provide as a parameter to the Date constructor, while the TimePickerField's time property can parse values in ISO 8601 format. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

Both DatePickerField and TimePickerField extend TextField, so each TextField feature like the hint property, is also available for these fields. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties pickerOkText, pickerCancelText and pickerTitle. By default, the texts of the buttons OK and Cancel are OK and Cancel on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on Android. The pickerTitle is undefined. Changing these values is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

By default the DatePickerField and the TimePickerField will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified here as Locale ID. For example, using en_GB will result in month names spinner in the middle and values between 0 and 23 for the hours, while using en_US will result in month names spinner on the left and values between 1 and 12 for the hours. Changing the locale is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. The property controlling the format in the DatePickerField is called dateFormat and the property controlling the format in the TimePickerField is timeFormat. Changing the default formats is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

The DatePickerField has a minDate and maxDate properties that allow limiting the values that can be selected. This is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

The TimePickerField will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

You can use css to style the DatePickerField and the TimePickerField. The field itself can be styled just as every other TextField, additionally the picker supports changing of its colors through predefined css classes: date-time-picker (picker background and title text color), date-time-picker-spinners (background and text color of the date/time selecting spinners), date-time-picker-buttons (background and text color of the OK/Cancel buttons), date-time-picker-button-ok and date-time-picker-button-cancel (to provide a separate style for each button). Please note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.

\n\"DatePickerField\n

Here's the css used to achieve the above result, as used in the demo, demo-angular and demo-vue applications.

\n

DateTimePickerFields

\n

The DateTimePickerFields extends GridLayout that contains instances of DatePickerField and TimePickerField, when tapped, they open a picker dialog that allows date/time selection.

\n\n

The DateTimePickerFields has a date property which can be used to get its current value. You can also set its value through markup. DateTimePickerFields' date property will just pass the string you provide as a parameter to the Date constructor. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

The DateTimePickerFields have an orientation property which allows changing the way the fields are laid out. If the orientation is horizontal (the default), the fields are on the same row, if the orienation is vertical, the fields will be on separate rows. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

When a date is picked with the date component of the DateTimePickerFields, the value of the date property is updated with the value that is picked. Since the time component also controls the same property, it may be meaningful to display or not to display this value. The autoPickTime property controls whether the time component should display the time of the date property as soon as it is assigned (when date is picked). Default is false, which means that when the user selects a date, the time component will keep displaying its hint text until time is explicitly selected through the time spinners. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties pickerOkText, pickerCancelText, pickerTitleDate and pickerTitleTime. By default, the texts of the buttons OK and Cancel are OK and Cancel on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on Android. The pickerTitleDate and pickerTitleTime are undefined. Changing these values is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

By default the DateTimePickerFields will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified here as Locale ID. For example, using en_GB will result in month names spinner in the middle and values between 0 and 23 for the hours, while using en_US will result in month names spinner on the left and values between 1 and 12 for the hours. Changing the locale is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. The property controlling the format for the date component is called dateFormat and the property controlling the format in the time component is timeFormat. Changing the default formats is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

The DateTimePickerFields has a minDate and maxDate properties that allow limiting the values that can be selected. Note that the values of these properties have effect only on the date component, while the time component can not be limited - it will always allow any hour for any given date. This is demonstrated in the demo, demo-angular and demo-vue applications.

\n\n

The time component will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property. Here's an example in the demo, demo-angular and demo-vue applications.

\n\n

You can use css to style the DateTimePickerFields. The element can be styled like any other layout, additionally the DatePickerField and the TimePickerField that it contains can be styled as explained in their documentation section.

\n

DateTimePicker

\n

Internally DatePickerField and TimePickerField call DateTimePicker's pickDate and pickTime methods which are public, so they can also be manually called in case a more customized picker is desired. The pickDate method accepts DatePickerOptions, while the pickTime method accepts TimePickerOptions. These options allow having the same features as in the fields. These methods are demonstrated in the demo, demo-angular and demo-vue applications.

\n

API

\n

DatePickerField API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
dateThe date the picker field is currently displaying. Property is of type Date. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
minDateThe minimum date the picker field can select. Parsing of dates is handled similarly as with date property.
maxDateThe maximum date the picker field can select. Parsing of dates is handled similarly as with date property.
localeIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month) (default is based on the device’s locale settings).
dateFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
pickerDefaultDateThe date that will be displayed in the picker, if it is opened while date is undefined (if pickerDefaultDate is undefined, the picker will display today). Parsing of dates is handled similarly as with date property.
pickerTitleText that will be displayed as title of the picker, default is undefined.
pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

TimePickerField API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
timeThe time the picker field is currently displaying. Property is of type Date. When used in markup, the provided string will be parsed to a new Date object if it is in ISO 8601 format.
localeIdentifier of a locale that will be used to create locale-specific time formatter of the time (if the format is 12-Hour, with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used) (default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
timeFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
pickerDefaultTimeThe time that will be displayed in the picker, if it is opened while time is undefined (if defaultTime is undefined, the picker will display now). Parsing is handled similarly as with time property.
pickerTitleText that will be displayed as title of the picker, default is undefined.
pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

DateTimePickerFields API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
dateThe date the picker fields are currently displaying. Property is of type Date. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
minDateThe minimum date the date component can select. Parsing of dates is handled similarly as with date property.
maxDateThe maximum date the time component can select. Parsing of dates is handled similarly as with date property.
localeIdentifier of a locale that will be used to localize the names of the month names, the order of the date spinners (with en_GB first spinner is day, with en_US first spinner is month), and to create locale-specific time formatter of the time (if the format is 12-Hour, with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used) (default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
dateFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
timeFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
pickerDefaultDateThe date and time that will be displayed in the pickers, if opened while date is undefined (if pickerDefaultDate is undefined, the picker will display now). Parsing of dates is handled similarly as with date property.
pickerTitleDateText that will be displayed as title of the picker, when the date component is tapped, default is undefined.
pickerTitleTimeText that will be displayed as title of the picker, when the time component is tapped, default is undefined.
pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
autoPickTimeValue that indicates whether the time component should be assigned a value as soon as a date is picked by the date component, default is false.
orientationValue that indicates how the date and time components will be arranged, default is "horizontal", which means that they will be on the same row.
hintDateText displayed in the date component when date is null.
hintTimeText displayed in the time component when date is null.
\n

DateTimePicker API

\n

DateTimePicker:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
pickDate(options: DatePickerOptions, style?: DateTimePickerStyle): Promise<Date>picks a date from a dialog picker initialized with the provided options and styled with the optionally provided style.
pickTime(options: TimePickerOptions, style?: DateTimePickerStyle): Promise<Date>picks a time from a dialog picker initialized with the provided options and styled with the optionally provided style.
\n

DatePickerOptions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
contextView's context.
dateThe date that will be displayed in the picker, (if not provided, the picker will display today).
minDateThe minimum date that can be selected.
maxDateThe maximum date that can be selected.
localeIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month, default is based on the device’s locale settings).
titleText that will be displayed as title of the picker, default is undefined.
okButtonTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
cancelButtonTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

TimePickerOptions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
contextView's context.
timeThe time that will be displayed in the picker, (if not provided, the picker will display now).
is24HoursThis value will be used only on Android to determine whether the picker will be in 12 or 24 hour format.
localeIdentifier of a locale that will be used to create locale-specific time formatter of the time (with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used, default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
titleText that will be displayed as title of the picker, default is undefined.
okButtonTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
cancelButtonTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
\n

DateTimePickerStyle:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
titleTextColorColor to be used for the title text.
dialogBackgroundColorColor to be used as a background of the dialog picker.
spinnersTextColorColor to be used for the texts of the date/time spinners.
spinnersBackgroundColorColor to be used as a background of the date/time spinners.
buttonsTextColorColor to be used for the texts of the ok/cancel buttons.
buttonsBackgroundColorColor to be used as a background of the ok/cancel buttons.
buttonOkTextColorColor to be used for the texts of the ok button.
buttonOkBackgroundColorColor to be used as a background of the ok button.
buttonCancelTextColorColor to be used for the texts of the cancel button.
buttonCancelBackgroundColorColor to be used as a background of the cancel button.
create(view: View)Creates a style based on any css provided. The parameter is a View with the properly setup css class name.
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in-knotes":{"name":"nativescript-apple-sign-in-knotes","version":"1.1.1","license":"Apache-2.0","readme":"

Sign In with Apple, for NativeScript

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Requirements

\n\n

Installation

\n
tns plugin add nativescript-apple-sign-in
\n

Demo app

\n

If you're stuck or want a quick demo of how this works, check out the demo app:

\n
git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
cd nativescript-apple-sign-in/src
npm run demo.ios
\n

API

\n

isSignInWithAppleSupported

\n

Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

\n
import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

const supported: boolean = isSignInWithAppleSupported();
\n

signInWithApple

\n

Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

\n
import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

signInWithApple(
    {
        // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
        scopes: [\"EMAIL\", \"FULLNAME\"]
    })
    .then((result: SignInWithAppleAuthorization) => {
        console.log(\"Signed in, credential: \" + result.credential);
        console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
        // you can remember the user to check the sign in state later (see 'getSignInWithAppleState' below)
        this.user = result.credential.user;
    })
    .catch(err => console.log(\"Error signing in: \" + err));
\n

getSignInWithAppleState

\n
\n

⚠️ This does not seem to work on a simulator!

\n
\n

If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

\n
import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

const user: string = \"the id you got back from the signInWithApple function\";

getSignInWithAppleState(user)
    .then(state => console.log(\"Sign in state: \" + state))
    .catch(err => console.log(\"Error getting sign in state: \" + err));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper":{"name":"nativescript-imagecropper","version":"4.0.3","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loki":{"name":"nativescript-loki","version":"1.0.1","license":"MIT","readme":"

NativeScript Loki

\n
\n

Thin wrapper around Loki and Loki NativeScript adapter

\n
\n

What is Loki

\n
\n

LokiJS is a document oriented database written in javascript, published under MIT License. Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism. - LokiJS

\n
\n

Installation

\n

Run the following command from the /app directory of your project:

\n
$ npm install nativescript-loki --save
\n

Usage

\n
// Requirements
var Loki = require(\"./node_modules/nativescript-loki/nativescript-loki.js\");

// Setup Loki
var db = new Loki(\"loki\", { autosave: true });

// Check if database exists
if(db.exists()) {
    console.log(\"Database exists\");
}

// Rename database
db.rename(\"new-name\").then(function() {
    console.log(\"Database renamed\");
});

// Remove database
db.remove().then(function() {
    console.log(\"Database removed\");
});
\n

Thanks

\n

The thanks goes to sect2k who has inspired me to create this package.

\n

To go deeper in Loki have a look at the documentation.

\n

\"npm

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-textfield":{"name":"nativescript-material-textfield","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textfield" on the Page element

\n

XML

\n
<Page xmlns:mdt=\"nativescript-material-textfield\">
    <StackLayout horizontalAlignment=\"center\">
        <mdt:TextField text=\"raised textfield\"/>
        <mdt:TextField variant=\"flat\" text=\"flat textfield\"/>
        <mdt:TextField variant=\"text\" text=\"text textfield\"/>
        <mdt:TextField elevation=\"5\" rippleColor=\"red\" text=\"raised custom textfield\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdctextfield {
    ripple-color: blue;
    elevation: 4;
    stroke-color: blue;             // the border color when active
    stroke-inactive-color: green;   // the border color when inactive
    floating-color: blue;           // the floating placeholder color when active
    floating-inactive-color: green; // the floating placeholder color when inactive
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialTextFieldModule } from \"nativescript-material-textfield/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTextFieldModule,
        ...
    ],
    ...
})
\n
<MDTextField  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
        (textChange)=\"onTextChange($event)\"></MDTextField>
\n

NativeScript + Vue

\n
import TextFieldPlugin from 'nativescript-material-textfield/vue';

Vue.use(TextFieldPlugin);
\n
<MDTextField helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
        @textChange=\"onTextChange\"/>
\n

Also, you can bind the text to some instance data using the v-model directive:

\n
<MDTextField v-model=\"value\" />
\n

Attributes

\n

Inherite from Nativescript TextField so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield

\n\n

An attribute to set the error color of the textfield.

\n\n

An attribute to set the helper text of the textfield.

\n\n

A boolean attribute to set the floating state of the textfield.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-google-login":{"name":"@imagene.me/nativescript-google-login","version":"2.0.1","license":"Apache-2.0","readme":"

#Setup\nAdd debug sh1\nkeytool -keystore ~/.android/debug.keystore -list -v\nhttps://github.com/mkloubert/nativescript-social-login#setup-android-google-sign-in-for-debug-builds

\n

Nativescript Google Login

\n

\"npm\n\"NPM\"

\n

Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

\n

It is inspired by the plugin nativescript-social-login

\n

Works with Android X, iOS 13

\n

Screenshots

\n

Android

\n

\"Screenshot

\n

iOS

\n

\"Screenshot

\n

Dependencies

\n

iOS

\n
pod 'GoogleSignIn', '~> 5.0'
\n

Android

\n
implementation 'com.google.android.gms:play-services-auth:17.0.0'
\n

Installation

\n
tns plugin add nativescript-google-login
\n

iOS

\n

Get an OAuth client ID

\n

Get an Oauth client id from the Google website

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleTypeRole</key>
\t\t<string>Editor</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
\t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
\t\t\t<!-- Get it from your GoogleService-Info.plist -->
\t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t</array>
\t</dict>
</array>
\n

Usage

\n
```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
\n

Result

\n
```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-converters":{"name":"nativescript-converters","version":"2.0.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A small utility package with userfull binding converters that can be used in Plain NativeScript applications.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rater":{"name":"nativescript-rater","version":"3.0.0","license":"MIT","readme":"

Nativescript-rater

\n

\"npm\"\n\"npm\"\n\"Commitizen

\n

Reminds your app's users to review the app through PlayStore or AppStore. Love it, rate it!

\n

iOS 10.3 〜

\n

\"SwiftRater1\"

\n

For iOS 10.3 devices, SwiftRater uses SKStoreReviewController.

\n

〜 iOS 10.2

\n

\"SwiftRater2\"

\n

Android

\n

\"Android-Rate\"

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android-RateSwiftRater
\n

Requirements

\n

iOS iOS 8.0 or later, Xcode 8.2 or later.

\n

android API level 9 and up.

\n

Installation

\n
tns plugin add nativescript-rater
\n

Changelog

\n

src/CHANGELOG.md

\n

Usage

\n
import {appRater} from 'nativescript-rater';

// put init before `application.start`
// in ng application, you may have to put init before `platformNativeScriptDynamic`
appRater.init({
\tshowNeverButton:false,
\tdebugMode:true
});

// check
appRater.showRateDialogIfMeetsConditions();

// show directly
appRater.showRateDialog();
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
iosraw ios control, see below for advance usage
androidraw android control, the value will be available after app is launched
init(configs:AppRaterConfigs):voidLet rater know that your app is launched. See configs below
incrementSignificantUsageCount():voidFor significantUsesUntilPrompt, you need to add incrementSignificantUsageCount. iOS only
showRateDialogIfMeetsConditions():booleanShow rating dialog if meets conditions. The function will return if dialog is showed.
showRateDialog():voidShow rating dialog
\n

Configs

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
daysUntilPrompt7Shows review request if days days passed since first app launch.
usesUntilPrompt3Shows review request if users launch more than uses times.
daysBeforeReminding5Days until reminder popup if the user chooses rate later. valid for ~iOS10.2 and Android
significantUsesUntilPrompt0Shows review request if user does significant actions more than uses. iOS only
debugModefalseShows review request every time. Default false. need to set false when you submit your app.
showLaterButtontrueShow Later button in review request dialong. valid for ~iOS10.2 and Android
showNeverButtontrueShow Never button in review request dialong. Android only
\n

You can also change the value via setter.

\n
import {appRater} from 'nativescript-rater';

appRater
        .setDaysUntilPrompt(7)
        .setUsesUntilPrompt(3)
        .setSignificantUsesUntilPrompt(2)
        .setShowLaterButton(true)
        .setShowNeverButton(true)
        .setDebugMode(true);
\n

Custom dialog

\n

Android

\n

If you want to use your own dialog labels, override string xml resources on your application.

\n
<resources>
    <string name=\"rate_dialog_title\">Rate this app</string>
    <string name=\"rate_dialog_message\">If you enjoy playing this app, would you mind taking a moment to rate it? It won\\'t take more than a minute. Thanks for your support!</string>
    <string name=\"rate_dialog_ok\">Rate It Now</string>
    <string name=\"rate_dialog_cancel\">Remind Me Later</string>
    <string name=\"rate_dialog_no\">No, Thanks</string>
</resources>
\n

iOS

\n

You can customize text in review request dialog for iOS10.2 or before devices. Set text in following properties.

\n
appRater.ios.setAlertTitle('title')
appRater.ios.setAlertMessage('message')
appRater.ios.setAlertCancelTitle('cancel')
appRater.ios.setAlertRateTitle('rate')
appRater.ios.setAlertRateLaterTitle('later')
appRater.ios.setAppName('your app name')
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/persistence":{"name":"@awarns/persistence","version":"1.1.1","license":"Apache-2.0","readme":"

@awarns/persistence

\n

\"npm\n\"npm\"

\n

This module defines tasks to persist the output of other tasks (namely, entities extending the base Record model). Concretely, it includes:

\n\n

This plugin has been built as a wrapper of Triniwiz's NativeScript Couchbase plugin, adapted to work with the records and the task model of the AwarNS Framework.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/persistence
\n

Usage

\n

After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

\n
    \n
  1. The plugin API. Through it, you'll be able to manage the stored records, query them and export them using the most common information exchange formats.
    2. \n
  2. A task to write Record interface-compliant entities, which allows to persist one or more records locally (with optional one-way server synchronization), to later query and/or export them.
    3. \n
\n

Setup

\n

This plugin requires you to register its loader during the framework initialization, like this:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerPersistencePlugin } from '@awarns/persistence';

import { externalRecordsStore } from './external-store';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerPersistencePlugin({
        externalRecordsStore: externalRecordsStore,
        oldRecordsMaxAgeHours: 7 * 24 // 1 week
      }),
    ]
  )
  // ... handle initialization promise
\n

Plugin loader config parameter options:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
externalRecordsStoreRecordsStore(Optional) Inject an adapter to an external records store and enable one-way synchronization of the stored records. The table below describes the methods that this adapter needs to implement
oldRecordsMaxAgeHoursnumber(Optional) Tell the plugin to regularly cleanup old local records. By default, all records are kept
\n

RecordsStore (external)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
insert(record: Record)Promise<void>Persist the given record. Throw an error if something goes wrong. The write will be retried during the next app initialization
\n

Due to that, for now, this plugin only supports one-way synchronization, the rest of the methods are meant for future use and don't need to be implemented at the moment. You can throw unimplemented errors inside them, so that you can more easily recognize when they start being used in future versions.

\n

API

\n

The API of this plugin can be classified in 3 groups: records' storage, data exporters and custom data stores.

\n

Records storage

\n
recordsStore
\n

In the records' storage group, there is the recordsStore singleton object, with the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
insert(record: Record)Promise<void>Persist the given record. On success, if provided during plugin initialization, it will try to automatically synchronize the new record to the external store
getAll(reverseOrder?: boolean, limitSize?: number)Promise<Array<Record>>Allows to retrieve the current latest (by default) or first records, optionally limiting the resulting list in size
list(size?: number)Observable<Record>Allows to observe the "n" most recent records, where "n" is determined by the value given to the size parameter. By default, size is 100
listBy(recordType: string, order: 'asc' | 'desc', conditions?: Array)Observable<Array<Record>>Allows to observe all the records of a given type. The sorting of the records can be controlled using the order parameter. The default order is last records come first (desc). It is possible to filter the resulting records by one or more FetchConditions
listLast(recordType: string, conditions?: Array<FetchCondition>)Observable<Record>Allows to obtain updates on the last record of a given type. It is possible to filter the resulting records by one or more FetchConditions
listLastGroupedBy(recordType: string, groupByProperty: string, conditions?: Array<FetchCondition>)Observable<Array<Record>>Allows to obtain updates on the latest records of a given type, grouped by the unique values of a certain property. Property grouping allows nested property paths using the dot (.) character, e.g., property.nestedProperty. It is possible to filter the resulting records by one or more FetchConditions
deleteBy(recordType: string)Promise<void>Allows to delete all the stored records of a given type from the local database
clear()Promise<void>Allows to clear all the stored records from the local database. Use with care! To only remove old records, configure the oldRecordsMaxAgeHours option during plugin initialization
changes (property)Observable<Array<string>>Listen to this observable property to know when a record has been created. It propagates updates on the ids of the records that have been recently stored
\n
\n

Note: It is recommended to install RxJS, to operate with the methods that return an Observable.

\n
\n
FetchCondition
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
propertystringThe path to the property where the condition will be applied. Works with nested property paths too, using the dot (.) character, e.g., property.nestedProperty
comparison'='The comparison operation to apply over the property values. At the moment, only property equality (=) is supported
valueunknownThe value to use in the comparison. At the moment, comparing complex objects is not supported
\n

Data exporters

\n
createRecordsExporter
\n

In the data exporters group, there is the createRecordsExporter() function, with the following parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
folderFolderSystem folder object. Use NativeScript FileSystem API to define where the exports file will be saved
format'csv' | 'json'Select the information exchange format to use. Defaults to csv
optionsRecordsExporterOptions(Optional) Object containing export options such as the file name to use for the exports file, or the type of records to include in the exports
\n
RecordsExporterOptions
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
fileNamestring(Optional) Specify the file name to use for the exports file (without extension). Defaults to current date and time
recordTypesstring[](Optional) Specify the types of records to export
\n

The createRecordsExporter() returns an Exporter object.

\n
Exporter
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
export()Promise<ExportResult>Tell the exporter to export the records, and save them inside to the configured exports file. Returns an ExportResult once done
\n
ExportResult
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyReturn typeDescription
exportCountnumberThe amount of records that have been exported
fileNamestringThe name of the exports file that has been saved
\n

Custom data stores

\n
AwarnsStore
\n

In the final group, the custom data stores, the core entity is the generic AwarnsStore class. Each AwarnStore has the following methods (replace the T with the concrete entity type being stored):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
AwarnsStore(docType: string, serialize: (entity: T) => unknown, deserialize: (doc: unknown) => T)AwarnsStoreCreates a new AwarnsStore instance. Takes as parameters: a string to uniquely identify the type of the entity being stored, an entity serialization function and an entity deserialization function
create(entity: T, id?: string)Promise<string>Inserts a new entity into the store. Optionally, an id can be provided. When not provided, an UUID will be generated. On success, returns the id of the newly stored entity
insert(entities: Array<T>, id?: string)Promise<Array<string>>Bulk-inserts multiple entities into the store. On success, returns an array with the id of the newly stored entities (the order is kept)
get(id: string)Promise<T>Searches for an entity using the given id
fetch(q?: Query)Promise<Array<T>>Grants access to the more advanced underlying query interface. Provides the same API as the underlying Couchbase Lite DB query() method
update(id: string, props: unknown)Promise<void>Updates an existing entity with the given id, using the provided properties. Only overrides the values of the given properties
delete(id: string)Promise<void>Deletes an existing entity with the given id
clear()Promise<void>Clears all the entities stored in this concrete AwarnsStore. This is, all the entities that share the same docType value. To clear all the records from all the stores see the clearAwarnsDB() function next
\n
clearAwarnsDB
\n

Inside the same group, there exists the clearAwarnsDB() function. Use this function to clear EVERYTHING persisted by this plugin. This is, the local records' database and any custom store created using an AwarnsStore instance. This function returns a Promise to inform about when the process has finished.

\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
writeRecordsPersists, inside the local records' database, one or more records contained in the invocation event's payload. If specified at plugin initialization time, it will also try to remotely synchronize the newly stored records. If the process fails, it will be retried during the next application start
\n

Persist records

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { writeRecordsTask } from '@awarns/persistence';

export const demoTasks: Array<Task> = [
  writeRecordsTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task event output:

\n\n
\n

Example usage in the application task graph:

\n

This task is not meant to be used alone, check the docs of any other framework plugin of your choice to see how this task can be used with others. Some examples exist in the battery, human activity and geolocation packages, to name a few

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/animated-circle":{"name":"@nativescript/animated-circle","version":"1.1.7","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-local-notifications":{"name":"nativescript-ssi-local-notifications","version":"3.2.1","license":"MIT","readme":"

NativeScript Local Notifications Plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-ssi-local-notifications
\n

TypeScript support

\n

And do yourself a favor by adding TypeScript support to your nativeScript app:

\n
tns install typescript
\n

Now you can import the plugin as an object into your .ts file as follows:

\n
import * as LocalNotifications from \"nativescript-ssi-local-notifications\";

// then use it as:
LocalNotifications.hasPermission()
\n

Demo app (XML)

\n

If you want a quickstart, clone our demo app.

\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Default 0.
titleThe title which is shown in the statusbar. Default empty.
bodyThe text below the title. Default empty.
groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
groupSummaryAn inboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default 'now'.
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound, copy sound file in App_Resources/iOS (iOS) and App_Resources/Android/raw (Android). Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalSet to one of second minute hour day week month quarter year if you want a recurring notification.
smallIconOn Android you can set a custom icon in the system tray. Pass in 'res://filename' (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we look for a file named 'ic_stat_notify.png' in the App_Resources/Android/drawable folders. Default: the app icon.
largeIconSame as smallIcon, but this one is shown when you expand the notification center. The optional file we look for is not 'ic_stat_notify.png' but 'ic_notify.png'.
ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.(Android Only)
\n

Note that after a reboot the smallIcon and largeIcon are not restored but fall back to the default (app icon). This is a known issue and can be fixed in a future version.

\n
  LocalNotifications.schedule([{
    id: 1,
    title: 'The title',
    body: 'Recurs every minute until cancelled',
    ticker: 'The ticker',
    badge: 1,
    groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
    groupSummary:\"Summary of the grouped messages above\", //android only
    ongoing: true, // makes the notification ongoing (Android only)
    smallIcon: 'res://heart',
    interval: 'minute',
    sound: require(\"application\").ios ? \"customsound-ios.wav\" : \"customsound-android\", // can be also `null`, \"default\"
    at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
  }]).then(
      function() {
        console.log(\"Notification scheduled\");
      },
      function(error) {
        console.log(\"scheduling error: \" + error);
      }
  )
\n

Notification icons

\n
\n

Background information: Local notifications may fail silently if you don't provide the notification icons in the correct dimensions. They may do work perfectly fine on one device but fail on the other. That's because android might fallback to your xxxhdpi launcher icon which is too big. This type of error is noticeable in logcat: !!! FAILED BINDER TRANSACTION !!! (parcel size = 1435376)

\n
\n

Spec for ic_stat_notify.png (smallIcon)

\n

Android API Guides → Status Bar Icons

\n

Spec for ic_notify.png (largeIcon)

\n

Unfortunately it seems like there's no official guide for these. Anyways there's a dimen that's telling us the dp size which we can translate to the following spec:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi48 x 48120
mdpi64 x 64160
hdpi96 x 96240
xhdpi128 x 128320
xxhdpi192 x 192480
\n

Don't include xxxhdpi

\n
\n

xxxhdpi: Extra-extra-extra-high-density uses (launcher icon only, see the note in Supporting Multiple Screens); approximately 640dpi. Added in API Level 18
\nSource: Density Qualifier Docs

\n
\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
  LocalNotifications.addOnMessageReceivedCallback(
      function (notification) {
        console.log(\"ID: \" + notification.id);
        console.log(\"Title: \" + notification.title);
        console.log(\"Body: \" + notification.body);
      }
  ).then(
      function() {
        console.log(\"Listener added\");
      }
  )
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n

Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

\n
  LocalNotifications.getScheduledIds().then(
      function(ids) {
        console.log(\"ID's: \" + ids);
      }
  )
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
  LocalNotifications.cancel(5 /* the ID */).then(
      function(foundAndCanceled) {
          if (foundAndCanceled) {
            console.log(\"OK, it's gone!\");
          } else {
            console.log(\"No ID 5 was scheduled\");
          }
      }
  )
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
  LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
  LocalNotifications.requestPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
  LocalNotifications.hasPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

Future work

\n

Let us know what you need by opening a Github issue.

\n

We're thinking about adding support for things like:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-mobile":{"name":"@tremho/jove-mobile","version":"0.7.0-pre-release.60","license":"UNLICENSED","readme":"

@tremho/jove-mobile

\n

(formerly thunderbolt)

\n\n

project

\n

wiki

\n
\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-template-nativescript":{"name":"vue-cli-template-nativescript","version":"1.0.2","license":"MIT","readme":"

vue-cli-template-nativescript

\n

\"Commitizen\"\n\"semantic-release\"\n\"Npm\n\"Travis\n\"Greenkeeper

\n
\n

Template for developing Nativescript-VueJS projects

\n
\n
\n

Bring all the additional tools to complete the Nativescript Vue workflow. Add linters, es6 support with babel, minified build generation, etc. Compatible with any tns testing tooling.

\n
\n
\n

Nativescript + VueJS + Rollup + Babel + SemanticRelease

\n
\n

Usage

\n
$ npm install -g vue-cli
$ vue init julon/vue-cli-template-nativescript my-project
$ cd my-project
$ npm install
$ npm run dev

# In another shell, to run on emulators which is going to refresh on file changes
$ npm run android
# or/and
$ npm run ios
\n

What's included

\n\n

Fork It And Make Your Own

\n

You can fork this repo to create your own boilerplate, and use it with vue-cli:

\n
vue init username/repo my-project
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codeus/aria-print":{"name":"@codeus/aria-print","version":"2.1.16","license":"Apache-2.0","readme":"

@codeus/aria-print

\n
ns plugin add @codeus/aria-print
\n

Usage

\n
import { AriaPrint } from '@codeus/aria-print';
const ariaPrint = new AriaPrint();
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc":{"name":"nativescript-nfc","version":"5.0.0","license":"MIT","readme":"

NativeScript NFC plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativeScript Version 7+:

\n
ns plugin add nativescript-nfc
\n

NativeScript Version 6 and below:

\n
tns plugin add nativescript-nfc@4.1.0
\n

iOS Setup

\n

iOS requires you to enable 'NFC Tag Reading' for your App ID here.

\n

Also, add this to your App_Resources/iOS/app.entitlements (mind the name!) file:

\n
<key>com.apple.developer.nfc.readersession.formats</key>
<array>
\t<string>NDEF</string>
</array>
\n

The demo app has this:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
\t<key>com.apple.developer.nfc.readersession.formats</key>
\t<array>
\t\t<string>NDEF</string>
\t</array>
</dict>
</plist>
\n

Android Setup

\n
\n

⚠️ Since plugin version 4.0.0 this section is no longer needed, but you'll HAVE to run NativeScript 5.4.0 or newer. If you're using an older NativeScript, please stick to a plugin version < 4.0.0.

\n
\n

Update the activity entry in your App_Resources/Android/AndroidManifest.xml file:

\n
<activity
        android:name=\"com.tns.NativeScriptNfcActivity\"
        android:label=\"@string/title_activity_kimera\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\">
\n

So replace com.tns.NativeScriptActivity with com.tns.NativeScriptNfcActivity.

\n

Webpack (again, no longer needed from plugin version 4.0.0)

\n

If you're using Webpack to bundle your app you'll need to add 1 line of configuration in case you're targeting Android.

\n\n

Demo app (those screenshots above)

\n

Want to dive in quickly? Check out the demo!

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

\n
\n

This is what it looks like in action on iOS!

\n
\n

API

\n

available

\n

Not all devices have an NFC chip we can tap in to (and on iOS you need to build with Xcode 9+), so check this beforehand:

\n
JavaScript
\n
// require the plugin
var Nfc = require(\"nativescript-nfc\").Nfc;

// instantiate the plugin
var nfc = new Nfc();

nfc.available().then(function (avail) {
  console.log(avail ? \"Yes\" : \"No\");
});
\n
TypeScript
\n
// require the plugin
import { Nfc } from \"nativescript-nfc\";

// instantiate the plugin
let nfc = new Nfc();

nfc.available().then(avail => {
  console.log(avail ? \"Yes\" : \"No\");
});
\n

enabled

\n

A device may have an NFC chip, but it needs to be turned on ✅ in order to be available for this plugin. So if available returns true and enabled returns false you should prompt the user to turn NFC on in the device settings.

\n
JavaScript
\n
nfc.enabled().then(function (on) {
  console.log(on ? \"Yes\" : \"No\");
});
\n
TypeScript
\n
nfc.enabled().then(on => {
  console.log(on ? \"Yes\" : \"No\");
});
\n

setOnNdefDiscoveredListener

\n

You may want to get notified when an Ndef tag was discovered. You can pass in a callback function that gets invoked when that is the case.

\n

Note that blank/erased NFC tags are not returned here, but through setOnTagDiscoveredListener instead.

\n

See the definition of NfcNdefData to learn what is returned to the callback function.

\n

For iOS you can pass in these options (see the TypeScript example below):

\n\n
JavaScript
\n
nfc
  .setOnNdefDiscoveredListener(function (data) {
    // see the TypeScript example below
  })
  .then(function () {
    console.log(\"OnNdefDiscovered listener added\");
  });
\n
TypeScript
\n
import { NfcNdefData } from \"nativescript-nfc\";

nfc
  .setOnNdefDiscoveredListener(
    (data: NfcNdefData) => {
      // data.message is an array of records, so:
      if (data.message) {
        for (let m in data.message) {
          let record = data.message[m];
          console.log(
            \"Ndef discovered! Message record: \" + record.payloadAsString
          );
        }
      }
    },
    {
      // iOS-specific options
      stopAfterFirstRead: true,
      scanHint: \"Scan a tag, baby!\"
    }
  )
  .then(() => {
    console.log(\"OnNdefDiscovered listener added\");
  });
\n

You can pass in null instead of a callback function if you want to remove the listener.

\n
TypeScript
\n
nfc.setOnNdefDiscoveredListener(null).then(() => {
  console.log(\"OnNdefDiscovered listener removed\");
});
\n

setOnTagDiscoveredListener (Android only)

\n

You may want to get notified when an NFC tag was discovered.\nYou can pass in a callback function that gets invoked when that is the case.

\n

Note that Ndef tags (which you may have previously written data to) are not returned here,\nbut through setOnNdefDiscoveredListener instead.

\n

See the definition of NfcTagData to learn what is returned to the callback function.

\n
JavaScript
\n
nfc
  .setOnTagDiscoveredListener(function (data) {
    console.log(\"Discovered a tag with ID \" + data.id);
  })
  .then(function () {
    console.log(\"OnTagDiscovered listener added\");
  });
\n
TypeScript
\n
import { NfcTagData } from \"nativescript-nfc\";

nfc
  .setOnTagDiscoveredListener((data: NfcTagData) => {
    console.log(\"Discovered a tag with ID \" + data.id);
  })
  .then(() => {
    console.log(\"OnTagDiscovered listener added\");
  });
\n

You can pass in null instead of a callback function if you want to remove the listener.

\n
TypeScript
\n
nfc.setOnTagDiscoveredListener(null).then(() => {
  console.log(\"OnTagDiscovered listener removed\");
});
\n

writeTag (Android only)

\n

You can write to a tag as well with this plugin. At the moment you can write either plain text or a Uri. The latter will launch the browser on an Android device if the tag is scanned (unless an app handling Ndef tags itself is active at that moment, like an app with this plugin - so just close the app to test this feature).

\n

Note that you can write multiple items to an NFC tag so the input is an object with Arrays of various types (textRecord and uriRecord are currently supported). See the TypeScript definition for details, but these examples should get you going:

\n
Writing 2 textRecords in JavaScript
\n
nfc
  .writeTag({
    textRecords: [
      {
        id: [1],
        text: \"Hello\"
      },
      {
        id: [3, 7],
        text: \"Goodbye\"
      }
    ]
  })
  .then(
    function () {
      console.log(\"Wrote text records 'Hello' and 'Goodbye'\");
    },
    function (err) {
      alert(err);
    }
  );
\n
Writing a uriRecord in TypeScript
\n
nfc
  .writeTag({
    uriRecords: [
      {
        id: [100],
        uri: \"https://www.progress.com\"
      }
    ]
  })
  .then(
    () => {
      console.log(\"Wrote Uri record 'https://www.progress.com\");
    },
    err => {
      alert(err);
    }
  );
\n

eraseTag (Android only)

\n

And finally, you can erase all content from a tag if you like.

\n
JavaScript
\n
nfc.eraseTag().then(function () {
  console.log(\"Tag erased\");
});
\n
TypeScript
\n
nfc.eraseTag().then(() => {
  console.log(\"Tag erased\");
});
\n

Tips

\n

Writing to an empty tag

\n

You first need to "discover" it with setOnTagDiscoveredListener (see below). While you're still "near" the tag you can call writeTag.

\n

Writing to a non-empty tag

\n

Same as above, but discovery is done through setOnNdefDiscoveredListener.

\n

Future work

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vt-nativescript-camera":{"name":"vt-nativescript-camera","version":"6.0.0","license":"Apache-2.0","readme":"

NativeScript Camera \"Build

\n

Welcome to the nativescript-camera plugin for NativeScript framework

\n

(Optional) Prerequisites / Requirements

\n\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n

Navigate to project folder and run NativeScript-CLI command

\n
tns plugin add nativescript-camera
\n

Plugin could be added as a standard npm dependency running command

\n
npm install nativescript-camera --save
\n
\n

Note: the --save flag will add the plugin as dependency in your package.json file

\n
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
isAvailable()Is the device camera available to use.
\n

CameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultPlatformDescription
width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
\n
\n

Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

\n
\n

Usage

\n

Requesting permissions

\n

Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

\n
camera.requestPermissions().then(
    function success() {
        // permission request accepted or already granted 
        // ... call camera.takePicture here ...
    }, 
    function failure() {
        // permission request rejected
        // ... tell the user ...
    }
);
\n
\n

Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

\n
\n
\n

Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

\n
\n
<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
// JavaScript
const camera = require(\"nativescript-camera\");
\n
// TypeScript
import * as camera from \"nativescript-camera\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to receive image asset

\n
\n
// JavaScript
const imageModule = require(\"tns-core-modules/ui/image\");

camera.takePicture()   
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"tns-core-modules/ui/image\";

camera.takePicture()
    .then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
// JavaScript
const imageModule = require(\"tns-core-modules/ui/image\");

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"tns-core-modules/ui/image\";

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Save a picture

\n

To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

\n
const source = new ImageSource();

source.fromAsset(imageAsset)
    .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName: string = \"test.jpg\";
        const filePath: string = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

        if (saved) {
            console.log(\"Gallery: \" + this._dataItem.picture_url);
            console.log(\"Saved: \" + filePath);
            console.log(\"Image saved successfully!\");
        }
    });
\n

This could be used to create thumbnails for quick display within your application.

\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
const isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-https":{"name":"nativescript-https","version":"2.2.2","license":"MIT","readme":"

NativeScript-HTTPS

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

The definitive way to hit HTTP based APIs in Nativescript.

\n

Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

\n
\n

Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

\n
\n

A drop-in replacement for the default http module.

\n

Features

\n\n

FAQ

\n
\n

What the flip is SSL pinning and all this security mumbo jumbo?

\n
\n

How to make your apps more secure with SSL pinning.

\n
\n

Do I have to use SSL pinning?

\n
\n

No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

\n

Demo

\n
git clone https://github.com/EddyVerbruggen/nativescript-https
cd nativescript-https/src
npm run demo.ios
npm run demo.android
\n

Installation

\n

Add tns-platform-declarations for Android and iOS to your references.d.ts!

\n
/// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
/// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
\n

We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

\n

Install the plugin:

\n
tns plugin add nativescript-https
\n

Examples

\n

Hitting an API using GET method

\n
import * as Https from 'nativescript-https'
Https.request({
\turl: 'https://httpbin.org/get',
\tmethod: 'GET',
\ttimeout: 30 // seconds (default 10)
}).then(function(response) {
\tconsole.log('Https.request response', response)
}).catch(function(error) {
\tconsole.error('Https.request error', error)
})
\n

Configuration

\n

Installing your SSL certificate

\n

Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

\n

\"Installing

\n

Enabling SSL pinning

\n
import { knownFolders } from 'file-system'
import * as Https from 'nativescript-https'
let dir = knownFolders.currentApp().getFolder('assets')
let certificate = dir.getFile('httpbin.org.cer').path
Https.enableSSLPinning({ host: 'httpbin.org', certificate })
\n

Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

\n

Disabling SSL pinning

\n
import * as Https from 'nativescript-https'
Https.disableSSLPinning()
\n

All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

\n

useLegacy

\n

There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

\n\n

Cookie

\n

By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

\n

Enabling Cache

\n
import { knownFolders, path } from '@nativescript/core/file-system';
import * as Https from 'nativescript-https'
Https.setCache({
    diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
    diskSize: 10 * 1024 * 1024 // 10 MiB
});

/// later on when calling your request you can use the cachePolicy option
\n

Multipart form data

\n

If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

\n
{
\tdata: any
    parameterName: string,
    fileName?: string
    contentType?: string
}
\n

if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

\n

Options

\n
export interface HttpsSSLPinningOptions {
\thost: string
\tcertificate: string
\tallowInvalidCertificates?: boolean
\tvalidatesDomainName?: boolean
\tcommonName?: string
}
import { HttpRequestOptions } from 'tns-core-modules/http';
export interface HttpsRequestOptions extends HTTPOptions{
\tuseLegacy?: boolean
\tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
\tonProgress?: (current: number, total: number) => void
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SSLPinning OptionDescription
host: stringThis must be the request domain name eg sales.company.org.
commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
certificate: stringThe uri path to your .cer certificate file.
allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Requests OptionDescription
useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
`cachePolicy?: 'noCache''onlyCache'
onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
\n

Webpack / bundling

\n

Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

\n

iOS Troubleshooting

\n
\n

Please educate yourself on iOS's App Transport Security before starting beef!

\n
\n

If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
\n
\n

This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

\n
\n

Android troubleshooting

\n

If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

\n

Thanks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhoWhy
Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-touchid":{"name":"nativescript-touchid","version":"2.1.2","license":{"type":"MIT","url":"https://github.com/eddyverbruggen/nativescript-touchid/blob/master/LICENSE"},"readme":"

NativeScript Touch ID Plugin

\n
\n

Deprecated! Use nativescript-fingerprint-auth from now on (which has Android support!)

\n
\n\n

Use when

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-touchid
\n

Usage

\n

If you want a quickstart, clone our demo app.

\n

Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

\n

function: available

\n
  var touchid = require(\"nativescript-touchid\");

  touchid.available().then(
      function(avail) {
        console.log(\"Available? \" + avail);
      }
  )
\n

function: verifyFingerprint

\n
  touchid.verifyFingerprint({
    message: 'Scan yer finger' // optional, shown in the fingerprint dialog (default: 'Scan your finger').
  }).then(
      function() {
        console.log(\"Fingerprint was OK\");
      },
      function(error) {
        console.log(\"Fingerprint NOT OK\" + (error.code ? \". Code: \" + error.code : \"\"));
      }
  )
\n

function: verifyFingerprintWithCustomFallback

\n
  touchid.verifyFingerprintWithCustomFallback({
    message: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
    fallbackMessage: 'Enter PIN' // optional, the button label when scanning fails (default: 'Enter password').
  }).then(
      function() {
        console.log(\"Fingerprint was OK\");
      },
      function(error) {
        console.log(\"Fingerprint NOT OK\" + (error.code ? \". Code: \" + error.code : \"\"));
      }
  )
\n

Security++

\n

Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

\n

So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

\n
touchid.available().then(
    function(avail) {
      if (avail) {
        touchid.didFingerprintDatabaseChange().then(
            function(changed) {
              if (changed) {
                // re-auth the user by asking for his credentials before allowing a fingerprint scan again
              } else {
                // call the fingerprint scanner
              }
            }
        );
      }
    }
)
\n

Changelog

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-numeric-keyboard":{"name":"nativescript-numeric-keyboard","version":"5.0.2","license":"MIT","readme":"

NativeScript Numeric Keyboard

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

For iOS. Falls back to the best platform-provided numeric keyboard on Android. Note that the iPad UI looks a bit sleeker than shown in the screenshot below.

\n\n
\n

BREAKING CHANGE in plugin version 4.0.0: we used to extend a TextView, now it's a TextField, because I finally hacked my way around a problem that prevented a TextField from emitting a textChange event. Note that unless you use the decorate() function this will not affect you (bar some now-fixed UI glitches).

\n
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

Since NativeScript 7

\n
tns plugin add nativescript-numeric-keyboard
\n

Before NativeScript 7

\n
tns plugin add nativescript-numeric-keyboard@4
\n
\n

mind the @4 on the end, because since plugin version 5 we require NativeScript 7.

\n
\n

Demo app

\n

Check out the demo to play with the keyboard. You can run it by typing npm run demo.iphone / npm run demo.ipad at the root of the project.

\n

How it works

\n

This plugin wraps a native keyboard library and extends a regular NativeScript TextField.\nYou can set any property you'd normally set on this widget (class, text, etc) and a few plugin-specific properties as well.

\n

You can either define the keyboard in XML or in code - use whichever tickles your fancy.

\n

Screenshot-driven documentation

\n

After adding the plugin you can add a namespace to your view (using NumKey below) and use the NumericKeyboardView tag to render a TextField powered by this plugin.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:NK=\"nativescript-numeric-keyboard\">
  <NK:NumericKeyboardView text=\"123.45\" maxLength=\"10\" returnKeyButtonBackgroundColor=\"#333333\" />
</Page>
\n

For comparison sake we kick off with the default appearance of a TextField and then showcase the various properties this plugin exposes:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AppearanceDeclaration
<TextField keyboardType="number" text="1.23"/>
<TextField keyboardType="phone" text="12.34"/>
<NK:NumericKeyboardView text="123.45"/>
<NK:NumericKeyboardView returnKeyTitle="OK" text="234.56"/>
<NK:NumericKeyboardView noDecimals="true" text="345"/>
<NK:NumericKeyboardView noReturnKey="true" text="678"/>
<NK:NumericKeyboardView locale="en_US" text="456.78"/>
<NK:NumericKeyboardView locale="nl_NL" text="567,89"/>
\n

iPad appearance

\n

It's similar (although a bit cleaner than in these screenshots), except for some padding on both sides of the keyboard:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AppearanceDeclaration
<TextField keyboardType="phone" text="12.34"/>
<NK:NumericKeyboard text="123.45"/>
\n

Usage with Vue

\n

Open main.ts (or .js) and add this:

\n
Vue.registerElement('NumericKeyboard', () => require('nativescript-numeric-keyboard').NumericKeyboardView);
\n

Check this registerElement example, and this usage example.

\n

Usage with Angular

\n

Open app.module.ts and add:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"NumericKeyboard\", () => require(\"nativescript-numeric-keyboard\").NumericKeyboardView);
\n

For the views you can take a look at the examples above and just replace NumKey:NumericKeyboardView by NumericKeyboard :

\n
<NumericKeyboard noDecimals=\"true\"></NumericKeyboard>
\n

Programmatic usage

\n

Say you have a plain old TextField in your view:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
  <TextField id=\"myTextField\" maxlength=\"8\" keyboardType=\"number\" text=\"{{ myTextPlugin }}\" />
</Page>
\n

Now you can enhance the TextField with this plugin by doing fi. this in the pageLoaded event you've defined in the <Page> tag above:

\n
import { NumericKeyboard } from \"nativescript-numeric-keyboard\";
import { Color } from \"tns-core-modules/color\";

export function pageLoaded(args: observable.EventData) {
  const page = <pages.Page>args.object;
  const textField = <TextField>page.getViewById(\"myTextField\");
  // or even textField.ios

  // this is an example with all possible properties, not that they make sense combined :)
  new NumericKeyboard().decorate({
    textField: textField,
    returnKeyTitle: \"Go!\",
    locale: \"en_US\", // or \"nl_NL\", or any valid locale really (to define the decimal char)
    noReturnKey: true,
    noDecimals: true,
    noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9
    returnKeyButtonBackgroundColor: new Color(\"red\"), // optional, set this to change the (default) blue color of the 'return' key
    onReturnKeyPressed: (): boolean => {
      // Your code here
      return true; // Return true to hide/collapse the keyboard, use false to keep the keyboard in place.
    }
  });
}
\n

Note that on Android you'll just get a numeric keyboard as usual (since we specified keyboardType="number").

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-play-pause-button":{"name":"nativescript-play-pause-button","version":"1.0.2","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-play-pause-button/blob/master/LICENSE"},"readme":"

NativeScript Play Pause Button

\n

\"npm\"\n\"npm\"

\n

Android

\n

\"Nativescript

\n

iOS

\n

\"Nativescript

\n

Example:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
\txmlns:PlayPause=\"nativescript-play-pause-button\"
\tloaded=\"pageLoaded\">
\t<StackLayout backgroundColor=\"#ececec\">
\t\t<PlayPause:PlayPauseButton width=\"100\" height=\"100\" playPauseTap=\"PPTapped\"  buttonColor=\"#e11a60\" buttonBgColor=\"#ececec\" marginTop=\"100\"></PlayPause:PlayPauseButton>
\t</StackLayout>
</Page>
\n

The playPauseTap event contains event data with the state true is play and false is paused.

\n

###Example

\n
export function PPTapped(args) {
    console.log(' Play Pause tapped : ' + args.eventData.state);
}
\n

iOS only

\n

backgound color must be set with buttonBgColor or else the background will be black

\n

Libraries used:

\n

Android based on: https://github.com/recruit-lifestyle/PlayPauseButton

\n

iOS based on: https://github.com/suzuki-0000/AnimatablePlayButton

\n

Thank You Nathan Walker for helping get the iOS version up and running

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audioplay":{"name":"nativescript-audioplay","version":"1.0.1","license":"MIT","readme":"\n

NativeScript Audio Play

\n\n

NativeScript plugin to play audio files for Android and iOS.

\n

\n Ported from nativescript-audio (v4.3.5) to require lesser permissions for audio playback only. All credits go to original project contributors\n

\n

\n \n \"npm\"\n \n \n \"npm-downloads\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n

\n

Installation

\n

tns plugin add nativescript-audioplay

\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audioplay';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audioplay');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function() {
    console.log('finished playing');
  },
  errorCallback: function(errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function(args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(function(res) {
    console.log(res);
  })
  .catch(function(err) {
    console.log('something went wrong...', err);
  });
\n

API

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position.
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

Credits

\n

nativescript-audio

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@klippa/nativescript-login":{"name":"@klippa/nativescript-login","version":"3.1.1","license":"MIT","readme":"

nativescript-login

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Build

\n

:rocket: The best way to do social logins in NativeScript :rocket:

\n

A plugin with modern SDKs to allow authentication to various providers with access to all SDK features.

\n

Features

\n\n

NativeScript Version Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NS Versionnativescript-login versionInstall commandDocs
^8.0.0^3.0.0ns plugin add @klippa/nativescript-login@^3.0.0This page
^7.0.0^2.0.0ns plugin add @klippa/nativescript-login@^2.0.0Here
^6.0.0^1.0.0tns plugin add @klippa/nativescript-login@^1.0.0Here
\n

Installation (NS 8)

\n
ns plugin add @klippa/nativescript-login@^3.0.0
\n

Usage

\n

Facebook Login

\n

Android integration

\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <!-- If your strings.xml already existed, add the following <string> elements -->
    <string name=\"app_name\">{{app-name}}</string>
    <string name=\"title_activity_kimera\">{{app-name}}</string>
    <string name=\"facebook_app_id\">{{app-id}}</string>
    <string name=\"fb_login_protocol_scheme\">fb{{app-id}}</string>
    <string name=\"facebook_client_token\">{{client-token}}</string>
</resources>
\n\n
<meta-data android:name=\"com.facebook.sdk.ApplicationId\" 
        android:value=\"@string/facebook_app_id\"/>

<activity android:name=\"com.facebook.FacebookActivity\"
          android:configChanges=
                  \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
          android:label=\"@string/app_name\" />
<activity
android:name=\"com.facebook.CustomTabActivity\"
android:exported=\"true\">
    <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />
        <data android:scheme=\"@string/fb_login_protocol_scheme\" />
    </intent-filter>
</activity>
\n\n

iOS integration

\n\n
<key>CFBundleURLTypes</key>
<array>
   <!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
   <dict>
   \t<key>CFBundleTypeRole</key>
       <string>Editor</string>
       <key>CFBundleURLSchemes</key>
       <array>
           <string>fb{{APP_ID}}</string>
       </array>
   </dict>
</array>
<key>FacebookAppID</key>
<string>{{APP_ID}}</string>
<key>FacebookClientToken</key>
<string>{{CLIENT_TOKEN}}</string>
<key>FacebookDisplayName</key>
<string>{{APP_NAME}}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
   <!-- If you already have a LSApplicationQueriesSchemes key, only add the strings to the array -->
   <string>fbapi</string>
   <string>fbapi20130214</string>
   <string>fbapi20130410</string>
   <string>fbapi20130702</string>
   <string>fbapi20131010</string>
   <string>fbapi20131219</string>
   <string>fbapi20140410</string>
   <string>fbapi20140116</string>
   <string>fbapi20150313</string>
   <string>fbapi20150629</string>
   <string>fbapi20160328</string>
   <string>fbauth</string>
   <string>fb-messenger-share-api</string>
   <string>fbauth2</string>
   <string>fbshareextension</string>
</array>
\n

NativeScript integration

\n

Only required for iOS:

\n

Normal NativeScript:\nEdit app/app.ts:

\n
import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

app.run({ moduleName: \"app-root\" });
\n

NativeScript Angular:\nEdit src/main.ts:

\n

// Other imports.
import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});
\n

NativeScript Vue:\nEdit src/main.ts:

\n

// Other imports.
import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

new Vue({
  render: (h) => h('frame', [h(Home)]),
}).$start();
\n
\n
import { startFacebookLogin, FacebookLoginOptions } from \"@klippa/nativescript-login\";

// First create an options object:

// The most basic sign in options.
const loginOptions: FacebookLoginOptions = {};

// Please note that result can also be a failure result.
// The actual result is in the object.
startFacebookLogin(loginOptions).then((result) => {
    console.log(\"Facebook login result: \", result);
}).catch((e) => {
    console.log(\"Error while logging in to Facebook: \", e);
});
\n

Warning: Facebook's Automatically Logged Events

\n

When you use the Facebook SDK, certain events in your app are automatically logged and collected for Facebook Analytics unless you disable automatic event logging.\nYou can disable it on Android and on iOS by doing minor configuration changes.\nIf you are only using the Facebook SDK because of the login feature, I would advise to disable the "Automatically Logged Events" to prevent leaking information from your users to Facebook (even if there are not using Facebook).

\n

Google Sign In

\n

Android integration

\n\n

iOS integration

\n\n
<key>CFBundleURLTypes</key>
<array>
    <!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>{{REVERSED_CLIENT_ID}}</string>
        </array>
    </dict>
</array>
\n

NativeScript integration

\n

Only required for iOS:

\n

Normal NativeScript:

\n

Edit app/app.ts:

\n
import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInGoogleSignIn(\"{{CLIENT_ID}}\");

// ... Other code/wirings

app.run({ moduleName: \"app-root\" });
\n

NativeScript Angular:

\n

Edit src/main.ts:

\n

// Other imports.
import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInGoogleSignIn(\"{{CLIENT_ID}}\");

// ... Other code/wirings

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});
\n

NativeScript Vue:\nEdit src/main.ts:

\n

// Other imports.
import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

// ... Other code/wirings

wireInGoogleSignIn(\"{{CLIENT_ID}}\");

// ... Other code/wirings

new Vue({
  render: (h) => h('frame', [h(Home)]),
}).$start();
\n

Open the credentials.plist and copy the value between <string> and </string> below <key>CLIENT_ID</key>. Replace {{CLIENT_ID}} with the value you copied.

\n
\n
import { GoogleSignInOptions, GoogleSignInType, startGoogleSignIn } from \"@klippa/nativescript-login\";

// First create an options object:

// The most basic sign in options.
const signInOptions: GoogleSignInOptions = {
    SignInType: GoogleSignInType.Local,
    RequestEmail: true
};

// Please note that result can also be a failure result.
// The actual result is in the object.
startGoogleSignIn(signInOptions).then((result) => {
    console.log(\"Google sign in result: \", result);
}).catch((e) => {
   console.log(\"Error while singing in to Google: \", e);
});
\n

Sign In with Apple

\n\n

Android integration (and iOS < 13)

\n

Sadly, Sign In with Apple does not support Android, due to the way they made the JS version, it's also not possible to create a version in a webview. You will always need a backend to handle it. I will write a how-to on this later.

\n

iOS integration (iOS >= 13)

\n

To start the login:

\n
import { SignInWithAppleOptions, startSignInWithApple, SignInWithAppleScope, signInWithAppleAvailable } from \"@klippa/nativescript-login\";
import { Dialogs } from \"@nativescript/core\";

if (signInWithAppleAvailable()) {
    // First create an options object:
    const signInOptions: SignInWithAppleOptions = {
        Scopes: [SignInWithAppleScope.EMAIL, SignInWithAppleScope.FULLNAME]
    };

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    startSignInWithApple(signInOptions).then((result) => {
        console.log(\"Sign In with Apple result: \", result);
    }).catch((e) => {
       console.log(\"Error while using Sign In with Apple: \", e);
    });
} else {
    Dialogs.alert(\"Sign In with Apple is not available for your device\");
}
\n

To get the current state:

\n
import { getSignInWithAppleState, signInWithAppleAvailable } from \"@klippa/nativescript-login\";
import { Dialogs } from \"@nativescript/core\";

if (signInWithAppleAvailable()) {
    // User ID must be the ID that was previously received from the sign in.
    const userID = \"\";

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    getSignInWithAppleState(userID).then((result) => {
        console.log(\"Sign in with Apple State result: \", result);
    }).catch((e) => {
       console.log(\"Error getting Sign in with Apple State: \", e);
    });
} else {
    Dialogs.alert(\"Sign In with Apple is not available for your device\");
}
\n

Other types of authentication

\n

To keep the scope of this project simple and clean, and to keep the dependencies small, we only support login providers that have native SDK's.\nIf you want to support other ways of logging in, please check out these projects:

\n\n

API

\n

Google

\n

GoogleSignInOptions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
SignInTypeThe type of sign in. GoogleSignInType.LOCAL is to use the information on the device, GoogleSignInType.ServerAuthCode for if you want to retrieve user information serverside.
ServerClientIdThe Client ID of the server you are requesting a ServerAuthCode or IdToken. For when using login type is ServerAuthCode, or when RequestIdToken is true.
ForceCodeForRefreshTokenUsed when type is ServerAuthCode. If true, the granted code can be exchanged for an access token and a refresh token. The first time you retrieve a code, a refresh_token will be granted automatically. Subsequent requests will require additional user consent. Use false by default; only use true if your server has suffered some failure and lost the user's refresh token. Only has effect on Android.
HostedDomainSpecifies a hosted domain restriction. By setting this, sign in will be restricted to accounts of the user in the specified domain. Domain of the user to restrict (for example, "mycollege.edu"),
AccountNameSpecifies an account name on the device that should be used. If this is never called, the client will use the current default account for this application. The account name on the device that should be used to sign in. Only has effect on Android.
RequestIdTokenSpecifies that an ID token for authenticated users is requested. Requesting an ID token requires that the server client ID be specified. iOS always return the user ID Token.
RequestIdSpecifies that user ID is requested by your application. For iOS you can't control this, ID is always returned.
RequestEmailSpecifies that email info is requested by your application. Note that we don't recommend keying user by email address since email address might change. Keying user by ID is the preferable approach. For iOS you can't control this, use RequestProfile if you want the email.
RequestProfileSpecifies that user's profile info is requested by your application. Default: true. On iOS you have to either set RequestProfile or give custom scopes.
ExtraScopesA list of GoogleSignInScope values to specify OAuth 2.0 scopes for your application requests. Normally you will not need this.
ForceAccountSelectionWhether you want to force account selection. If you enable this option we will logout the user for you in the app.
\n

GoogleSignInResult:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
ResultTypeThe result, either GoogleSignInResultType.FAILED or GoogleSignInResultType.SUCCESS.
ErrorCodeWhen result type is GoogleSignInResultType.FAILED, the error code of the request.
ErrorMessageWhen result type is GoogleSignInResultType.FAILED, the error message of the request.
GrantedScopesA list of granted scopes.
RequestedScopesA list of requested scopes. This is only filled in by the Android SDK.
GivenName-
IdThe ID of the user
IdTokenThe ID token (JWT) to send to your backend
DisplayName-
FamilyName-
PhotoUrl-
Email-
ServerAuthCodeThe Server Auth Code that your backend can use to retrieve user information.
\n
\n

Facebook

\n

FacebookLoginOptions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
ScopesThe permissions to request. If you don't add this param, we will request public_profile and email for you.
RequestProfileDataWhether to request profile data. If you don't enable this, you will only get an ID and a token. Perfect for server side handling. If you do enable this, we use the requested token on the Graph API to request the user profile. Not available when using LimitedLogin.
ProfileDataFieldsThe fields to fetch when requesting the profile data. When not set, we get the following fields: id,name,first_name,last_name,picture.type(large),email. Some fields might return an object, like the picture field. Not available when using LimitedLogin.
ForceAccountSelectionWhether you want to force account selection. If you enable this option we will logout the user for you in the app.
LimitedLoginiOS only! Whether you want to use Limited Login. Facebook Login offers a Limited Login mode. When you use the limited version of Facebook Login, the fact that a person used Facebook Login with the app will not be used to personalize or measure advertising effectiveness. You will not get an access token when you enable this.
\n

FacebookLoginResult:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
ResultTypeThe result, either FacebookLoginResultType.FAILED, FacebookLoginResultType.CANCELED FacebookLoginResultType.SUCCESS.
ErrorCodeWhen result type is FacebookLoginResultType.FAILED, the error code of the request.
ErrorMessageWhen result type is FacebookLoginResultType.FAILED, the error message of the request.
ProfileDataErrorCodeWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2, the error code of the profile request.
ProfileDataErrorMessageWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2, the error message of the profile request.
ProfileDataUserErrorMessageWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2 the user error message of the profile request.
DeniedScopesA list of denied scopes to validate whether the user gave permission for all requested scopes.
GrantedScopesA list of granted scopes.
IdThe ID of the user
AccessTokenThe access token that your backend can use to retrieve user information. Not available when using LimitedLogin.
ProfileDataFieldsAn object of of the profile fields that were requested in FacebookLoginOptions.ProfileDataFields or the basic profile when using the LimitedLogin option on iOS.
\n
\n

Apple

\n

SignInWithAppleOptions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
UserNot required. Not sure what this value does. The value that will be put in the user property of ASAuthorizationAppleIDRequest.
ScopesThe extra scopes to request. Normally you will only get the user ID. Note: a user can deny you access to these scopes. Possible values: SignInWithAppleScope.EMAIL and SignInWithAppleScope.FULLNAME
\n

SignInWithAppleResult:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
ResultTypeThe result, either SignInWithAppleResultType.ERROR, SignInWithAppleResultType.SUCCESS.
ErrorCodeWhen result type is SignInWithAppleResultType.ERROR, the error code of the request.
ErrorMessageWhen result type is SignInWithAppleResultType.ERROR, the error message of the request.
IdentityTokenA JSON Web Token (JWT) that securely communicates information about the user to your app.
AuthorizationCodeA short-lived token used by your app for proof of authorization when interacting with the app’s server counterpart.
StateAn arbitrary string that your app provided to the request that generated the credential.
UserAn identifier associated with the authenticated user.
EmailWhen you added the EMAIL scope. The contact information the user authorized your app to access, it's possible that this is a @privaterelay.appleid.com when the user did not share their personal email address. Only available when the user authorizes your app for the first time. However, it is always available in the JWT token in the IdentityToken field.
FullNameWhen you added the FULLNAME scope. The user’s name. Only available when the user authorizes your app for the first time.
NameComponentsWhen you added the FULLNAME scope. The user’s name, represented as name components (e.g., first name, suffix, nickname). Only available when the user authorizes your app for the first time. See SignInWithAppleNameComponents.
AuthorizedScopesA list of authorized scopes to validate whether the user gave permission for all requested scopes.
RealUserStatusA value that indicates whether the user appears to be a real person.
\n

SignInWithAppleStateResult:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
ResultTypeThe result, either SignInWithAppleResultType.ERROR, SignInWithAppleResultType.SUCCESS.
ErrorCodeWhen result type is SignInWithAppleResultType.ERROR, the error code of the request.
ErrorMessageWhen result type is SignInWithAppleResultType.ERROR, the error message of the request.
StateThe state of the authorization, either SignInWithAppleStateResultState.REVOKED, SignInWithAppleStateResultState.AUTHORIZED or SignInWithAppleStateResultState.NOTFOUND.
\n

SignInWithAppleNameComponents:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
GivenNameThe user's given (first) name.
MiddleNameThe user's middle name.
FamilyNameThe user's family (last) name.
NamePrefixThe user's name prefix (e.g., Dr., Ms.).
NameSuffixThe user's name suffix (e.g., Ph.D., Jr.).
NicknameThe user's nickname.
PhoneticRepresentationThe user's name, as pronounced phonetically, represented as name components (e.g., first name, suffix, nickname).
\n

About Klippa

\n

Klippa is a scale-up from Groningen, The Netherlands and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.

\n

We help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.

\n

License

\n

The MIT License (MIT)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-snackbar":{"name":"@nstudio/nativescript-snackbar","version":"2.1.0","license":"Apache-2.0","readme":"\n

NativeScript-Snackbar 🍭 🍫 🍦

\n\n

\nNativeScript plugin for Material Design SnackBar component.\n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

\n
\n

Installation:

\n

NativeScript 7+:\ntns plugin add @nstudio/nativescript-snackbar

\n

NativeScript version prior to 7:\ntns plugin add @nstudio/nativescript-snackbar@1.1.2

\n

Demo

\n

\"Snackbar\"

\n

Usage

\n

TS

\n
import { SnackBar, SnackBarOptions } from \"@nstudio/nativescript-snackbar\";

// Create an instance of SnackBar
const snackbar = new SnackBar();

/// Show a simple snackbar with no actions
public showSimple() {
    snackbar.simple('Snackbar', 'red', '#fff', 3, false).then((args) => {
         this.set('jsonResult', JSON.stringify(args));
   })
}

/// Show an Action snack bar
public showAction() {
  const options: SnackBarOptions = {
    actionText: this.get('actionText'),
    actionTextColor: '#ff4081',
    snackText: this.get('snackText'),
    textColor: '#346db2',
    hideDelay: 3500,
    backgroundColor: '#eaeaea',
    maxLines: 3, // Optional, Android Only
    isRTL: false,
    view: <View>someView, // Optional, Android Only, default to topmost().currentPage
    padding: number //Optional, iOS only
  };

  snackbar.action(options).then((args) => {
    if (args.command === \"Action\") {
      this.set('jsonResult', JSON.stringify(args));
    } else {
      this.set('jsonResult', JSON.stringify(args));
    }
  });
}
\n

API

\n

Show a simple SnackBar (color args will only work on Android)

\n\n

Show a SnackBar with Action.

\n\n

Manually dismiss an active SnackBar

\n\n

SnackBarOptions Interface

\n\n

Run Demo

\n
git clone https://github.com/nstudio/nativescript-snackbar.git
cd nativescript-snackbar/src
npm run build

npm run demo.ios

// or...

npm run demo.android
\n

Changelog

\n

Contributing

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sqlcipher":{"name":"nativescript-sqlcipher","version":"1.1.11","license":"MIT","readme":"

Nativescript Sqlcipher

\n

A sqlcipher module for nativescript application.
\nInspired by NathanaelA/Nativescript-Sqlite

\n

Create/Open Database

\n

Before creating database, nativescript-sqlcipher module must be imported.
\nvar Database = require('nativescript-sqlcipher');
\nThen create a new database:
\nvar sqlcipher = new Database(dbname, options, callbackFn)
\nwhere in nativescript-sqlite module, options only support readOnly property where now options can read key property as PRAGMA Key for database encryption.

\n
  var options = {
    readOnly: false,
    key: 'Password'   // key must be a string
  }
\n

If property key is missing, or in a wrong format. Database would not be encrypted.

\n

Example

\n
  var Database = require('nativescript-sqlcipher');

  var options = {
    key: 'Password'
  }
  var sqlcipher = new Database('myDatabase', options);  //sqlcipher is a Promise type
  sqlcipher
    .then( (db)=>{
      db.execSQL('CREATE TABLE my_first_table (name TEXT, age INTEGER);');
    }) 
    .catch( (err)=>{
      alert('Database creation failed.');
    })
\n

Update Log

\n
01 Dec 2017
\n

Fixed Compiling Error in Xcode 9

\n
06 Oct 2017
\n

Added all updates to sqlcipher.ios.js from NathanaelA/Nativescript-Sqlite.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-socket.io":{"name":"nativescript-socket.io","version":"0.11.1","license":"Unlicense","readme":"

nativescript-socket.io

\n

Full-featured Socket.IO client implementation for NativeScript.

\n

Status

\n

\"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

\n

This library is production-ready. Both Android and iOS implementations are stable and in sync.

\n

Please check releases and changelog and roadmap for more information.

\n

Dependencies

\n

Android: Socket.IO-client Java v1.*

\n

iOS: Socket.IO-Client-Swift v12.*

\n

Install

\n
tns plugin add nativescript-socket.io
\n

Usage

\n
const SocketIO = require('nativescript-socket.io');

SocketIO.enableDebug(); // optionnal

// or use your own debug function
// SocketIO.enableDebug(myCustomDebugFunction);

const options = {
  query: {
    token: 'SOME_TOKEN_HERE',
  },
  android: {
    // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
  }
  ios: {
    // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
  }
};

const socketio = SocketIO.connect('http://somewhere/namespace', options);

socketio.on('connect', function(){
  console.log('connect');
});

socketio.on('hello', function(){
  console.log('hello', arguments);
});

socketio.on('request', function(info, ack){
  console.log('request', info);
  if (info === 'datetime') {
    ack(new Date());
  } elseif (info === 'random') {
    ack(Math.random());
  } else {
    ack(null);
  }
});

socketio.emit('hello', {
  username: 'someone',
});

socketio.emit('hello-ack', {
  username: 'someone',
}, function ack(){
  console.log('hello-ack', arguments);
})
\n

Usage with TypeScript

\n

import using either of the following:

\n
import * as SocketIO from \"nativescript-socket.io\"`

// OR

const SocketIO = require(\"nativescript-socket.io\")
\n

Demo

\n
    \n
  1. \n

    replace all instance of 192.168.1.111 with your IP address or domain.

    \n
    2. \n
  2. \n

    start the socket.io demo server

    \n
    3. \n
\n
cd ./demo.server
npm start
\n
    \n
  1. build and run the app
    2. \n
\n
cd ./demo
tns run android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular2-loki-fix":{"name":"angular2-loki-fix","version":"1.0.3","license":"MIT","readme":"

angular2-loki

\n

Lokijs for angular2, Ionic 2, NativeScript with Angualr.

\n

How to use

\n
npm install angular2-loki
\n
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LokiModule } from './loki/loki.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LokiModule,
    .....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
\n
import { Component } from '@angular/core';
import { LokiService } from 'angular2-loki';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private loki: LokiService) {
    let db = loki.init('mydb.txt');
    // db will export lokijs object
    // full docs at https://rawgit.com/techfort/LokiJS/master/jsdoc/Loki.html
    let users = db.addCollection('users');
    users.insert({
        name: 'Odin',
        age: 50,
        address: 'Asgard'
    });

    console.log(users.findOne({ name: 'Odin' }));
  }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-media":{"name":"@nativescript/canvas-media","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pusher":{"name":"nativescript-pusher","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Pusher

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-pusher
\n

Usage

\n
const pusher = new Pusher(apiKey,options?);

pusher.subscribeToChannelEvent('activities','running',(error,data)=>{});

pusher.connect();
\n

Api key follow ➡\nlink to get\nyour api key

\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
connect(callback?:Function)voidConnects to Pusher.
disconnect()voidDisconnect from Pusher.
subscribeToChannel(channelName: string, callback?: Function)voidSubscribes to a public Channel with optional callback
subscribeToChannelEvent(channelName: string,event: string,callback: Function)voidSubscribes to a public channel event.
subscribePresence(channelName: string, callback?: Function)voidSubscribes to a PresenceChannel which requires authentication.
subscribeToPrivateChannel(channelName: string, callback?: Function)voidSubscribes to a PrivateChannel which requires authentication.
subscribeToPrivateChannelEvent(channelName: string,event: string,callback: Function)voidSubscribes to a private channel event.
unsubscribe(channelName: string)voidUnsubscribes from a public channel using via the name of the channel.
unsubscribePrivate(channelName: string)voidUnsubscribes from a private channel using via the name of the channel.
unsubscribeAll()voidUnsubscribes from all channels.
unsubscribeEvent(channelName: string, event: string)voidUnsubscribes a previously subscribed event on a public channel.
unsubscribePrivateEvent(channelName: string, event: string)voidUnsubscribes a previously subscribed event on a private channel.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubeplayer":{"name":"nativescript-youtubeplayer","version":"3.0.1","license":"Apache-2.0","readme":"

NativeScript YoutubePlayer

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

Configuration

\n

Android

\n

Api key follow ➡\nlink to get\nyour api key

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

\n
<ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
\n

Angular

\n
import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

@NgModule({
    imports: [
    YoutubePlayerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
<YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
play()voidStarts video playback of the currently cued / loaded video.
stop()voidStops and cancels loading of the current video.
destroy()voidDestroy the video player and free resources.
pause()voidPauses the currently playing video.
isPlaying()falsebooleanReturns is current video is playing.
toggleFullscreen()voidToggle fullscreen mode.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
srcnullstring
  • - [x]
Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
optionsnullObject
  • - [ ]
Player options available IOS only
isFullScreenfalseboolean
  • - [ ]
Returns if player is currently in fullscreen mode.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sczerniawski/nativescript-social-login":{"name":"@sczerniawski/nativescript-social-login","version":"4.1.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Social Login

\n

NativeScript module for social (token based) log-ins.

\n

\"Donate\"

\n

Implementations

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderAndroidiOS
GoogleYesYes
FacebookYesYes
TwitterNoNo
\n

License

\n

MIT license

\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Changes

\n

v1.4.x to 1.5.x

\n

Google

\n\n

v1.3.x to 1.4.x

\n

Facebook

\n\n

v1.2.x to 1.3.x

\n

Google

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-social-login
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n
Permissions
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <!-- ... -->

    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <!-- ... -->
</manifest>
\n
Strings
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
    <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>
\n

Setup Android Google Sign in for Debug Builds

\n
    \n
  1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
    2. \n
\n
keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
\n

The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

\n
    \n
  1. Create an app here on Google Developer site.\n
      \n
    • Enter the App name. This can be anything but it will display to the user who is authenticating.
      • \n
    • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
      • \n
    • Next configure the Google services.
      • \n
    • Select Google Sign-In
      • \n
    • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
      • \n
    • Enable Google Sign-In\n
        \n
      • If only enabling Google Sign-In you do not need the configuration file inside your application.
        • \n
      \n
      • \n
    \n
    2. \n
  2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
    3. \n
\n

iOS

\n

GoogleService-Info.plist

\n

You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<!-- FACEBOOK AND GOOGLE LOGIN -->
<key>CFBundleURLTypes</key>
    <array>
        <!-- GOOGLE START -->
\t\t<dict>
\t\t\t<key>CFBundleTypeRole</key>
\t\t\t<string>Editor</string>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
\t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                <!-- Get it from your GoogleService-Info.plist -->
                <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t\t</array>
\t\t</dict>
\t\t<!-- GOOGLE END -->
\t\t<!-- FACEBOOK START -->
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
        <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>FacebookAppID</key>
    <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
    <key>FacebookDisplayName</key>
    <string>FacebookLoginDemo</string>
    <!-- FACEBOOK END -->
\n

https://developers.facebook.com/docs/ios

\n

Application main file

\n

Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

\n
TypeScript
\n
if (application.ios) {

  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      let gglDelegate = false;

      try {
        const errorRef = new interop.Reference();
        GGLContext.sharedInstance().configureWithError(errorRef);

        const signIn = GIDSignIn.sharedInstance();
        gglDelegate = true;
      } catch (error) {
        console.log(error);
      }

      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

      return gglDelegate || fcbDelegate;
    }

    applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
      const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

      return fcbDelegate || gglDelegate;
    }
  }

  application.ios.delegate = MyDelegate;
}
\n
JavaScript
\n
if (application.ios) {
    var MyDelegate = (function (_super) {
        __extends(MyDelegate, _super);
        function MyDelegate() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            var gglDelegate = false;
            try {
                var errorRef = new interop.Reference();
                GGLContext.sharedInstance().configureWithError(errorRef);
                var signIn = GIDSignIn.sharedInstance();
                gglDelegate = true;
            }
            catch (error) {
                console.log(error);
            }
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
            return gglDelegate || fcbDelegate;
        };
        MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
            var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
            return fcbDelegate || gglDelegate;
        };
        return MyDelegate;
    }(UIResponder));
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    application.ios.delegate = MyDelegate;
}
\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
import SocialLogin = require(\"nativescript-social-login\");
\n

Initialize

\n
import Application = require(\"application\");
import SocialLogin = require(\"nativescript-social-login\");

if (Application.android) {
    Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
        let result = SocialLogin.init({
            activity: event.activity,
        });
    });
}
\n

The init() function receives an (optional) object with the following structure:

\n
interface ILoginConfiguration {
    /**
     * The underlying custom activity to use.
     */
    activity?: android.app.Activity;

    /**
     * Facebook specific configuration.
     */
    facebook?: {
        /**
         * Initialize Facebook or not. Default: (true)
         */
        initialize?: boolean;
        /**
         * Should Logout current Facebook session or not. Default: (false)
         */
        clearSession?: boolean;
    }

    /**
     * Google specific configuration.
     */
    google?: {
        /**
         * Initialize Google or not. Default: (true)
         */
        initialize?: boolean;

       /**
        * The server client ID for requesting server auth token.
        */
        serverClientId?: string;

        /**
         * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
         * It will be set in authCode property of result object.
         *
         * If false (default), it will request for token id. it will be set in authToken property of result object.
         */
        isRequestAuthCode?: boolean;
    }

    /**
     * Fallback action for the result of the underlying activity.
     */
    onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
}
\n

The result object that is returned by init() has the following structure:

\n
interface IInitializationResult {
    facebook: {
        error: any,
        isInitialized: boolean,
    },
    google: {
        error: any,
        isInitialized: boolean,
    },
    twitter: {
        error: any,
        isInitialized: boolean,
    }
}
\n

The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

\n

The error properties are only defined if an exception was thrown while initialization.

\n

Login

\n

If you want to use a login functions you have to submit a callback that receives an object with the following structure:

\n
interface ILoginResult {
    /**
     * Gets the auth token (if requested).
     */
    authToken?: string;

    /**
     * Offline auth code used by servers to request new auth tokens.
     */
    authCode?: string;

    /**
     * Gets the result code.
     */
    code: LoginResultType;

    /**
     * The display name.
     */
    displayName?: string;

    /**
     * First name of the user.
     */
    firstName?: string;

    /**
     * Last name of the user.
     */
    lastName?: string;

    /**
     * Gets the error (if defined).
     */
    error?: any;

    /**
     * The ID of the user.
     */
    id?: string;

    /**
     * The photo URL.
     */
    photo?: string;

    /**
     * Gets the underlying provider.
     */
    provider?: string;

    /**
     * The user token, like email address.
     */
    userToken?: string;
}
\n

The following functions are implemented:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProviderProvider
loginWithFacebookFacebook
loginWithGoogleGoogle
\n

Example

\n
SocialLogin.loginWithFacebook(
    (result) => {
        console.log(\"code: \" + result.code);
        console.log(\"error: \" + result.error);
        console.log(\"userToken: \" + result.userToken);
        console.log(\"displayName: \" + result.displayName);
        console.log(\"photo: \" + result.photo);
        console.log(\"authToken: \" + result.authToken);
    }
);
\n

It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

\n
import { Component, NgZone } from \"angular/core\";

@Component({})
class SigninComponent {
    constructor(private ngZone: NgZone) {}

    login() {
        SocialLogin.loginWithFacebook((result) => {
            this.ngZone.run(() => {
                console.log(\"code: \" + result.code);
                console.log(\"error: \" + result.error);
                console.log(\"userToken: \" + result.userToken);
                console.log(\"displayName: \" + result.displayName);
                console.log(\"photo: \" + result.photo);
                console.log(\"authToken: \" + result.authToken);
            });
        });
    }
}
\n

There is also a great example by dgomezs that shows how to configure your app for Facebook.

\n

Logging

\n

If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

\n
SocialLogin.addLogger(function(msg: any, tag: string) {
    console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
});
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyframes":{"name":"nativescript-keyframes","version":"1.0.0","license":"MIT","readme":"

NativeScript Facebook Keyframes plugin

\n

{N} wrapper for this awesome animation library

\n\n

Why use this?

\n

Good question, as NativeScript already has outstanding CSS animation support!

\n

Make sure you check that out as well, but if you or your designer is a sucker for After Effects\nto create crazily complex (and beautiful) animations then this is the plugin for you.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-keyframes
\n

Demo app

\n

Want to dive in quickly? Check out the demo! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device.

\n

API

\n

This plugin makes most sense when used from XML, which is done like this:

\n
<Page xmlns:Keyframes=\"nativescript-keyframes\">
  <Keyframes:KeyframesView
      class=\"keyframe\"
      width=\"200\"
      height=\"200\"
      source=\"keyframes/logo.json\">
  </Keyframes:KeyframesView>
</Page>
\n

To make the image look transparent on Android currently,\nyou need to set the background color to that of the parent container, so in your css file add:

\n
.keyframe {
  background-color: #DDD;
}
\n

The source property refers to a folder inside your app,\nso in this case we expect this file: app/keyframes/logo.json

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"generator-ng2-seed-advanced":{"name":"generator-ng2-seed-advanced","version":"1.0.0","license":"MIT","readme":"

generator-ng2-seed-advanced \"NPM \"Build \"Dependency

\n
\n

An advanced Angular2 project generator with support for ngrx/store, ng2-translate, angulartics2, lodash, NativeScript (native mobile), Electron (Mac, Windows and Linux desktop) and more.

\n
\n

Installation

\n

First, install Yeoman and generator-ng2-seed-advanced using npm (we assume you have pre-installed node.js).

\n
npm install -g yo
npm install -g generator-ng2-seed-advanced
\n

Generate your new project

\n
yo ng-2-seed-advanced
\n

Generate a new component

\n
\n

Generate a new router

\n
\n

Generate a new service

\n
\n

Getting To Know Yeoman

\n\n

License

\n

MIT © victorsosa

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-urban-airship":{"name":"@essent/nativescript-urban-airship","version":"9.0.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"my-loopback-sdk-builder":{"name":"my-loopback-sdk-builder","version":"2.4.3","license":"MIT","readme":"

LoopBack SDK Builder

\n
\n

Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

\n
\n

The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

\n

The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

\n

NOTE: This sdk builder is not compatible with LoopBack 4.

\n

Installation

\n
$ cd to/loopback/project
$ npm install --save-dev @mean-expert/loopback-sdk-builder
\n

Documentation

\n

LINK TO WIKI DOCUMENTATION

\n

Contribute

\n

Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

\n

Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

\n

OIDC-SSO Service

\n

A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

\n\n

Register now and get the chance to have an unlimited annual enterprise membership for free.

\n

[REQUEST EARLY ACCESS HERE]

\n

Technology References:

\n\n

Contact

\n

Discuss features and ask questions on @johncasarrubias at Twitter.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dieover/jail-breaker":{"name":"@dieover/jail-breaker","version":"1.0.1","license":"Apache-2.0","readme":"

@dieover/jail-breaker

\n
npm install @dieover/jail-breaker
\n

Usage

\n

This plugins use a rootbeer lib 0.1.0 of scottyab for Android to check if the Android is Rooted and for iOS always return false

\n
import { JailBreaker } from '@dieover/jail-breaker';

...

isRooted(): void {
  if (JailBreaker.isRooted()) {
    // it's Rooted
  } else {
    // it's not Rooted
  }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fortumo-sms":{"name":"nativescript-fortumo-sms","version":"1.1.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-fortumo-sms/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript fortumo SMS

\n

A NativeScript module providing access to Fortumo SMS Gateway.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-fortumo-sms
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n

Keep sure to define the following permissions, activities and other data in your manifest file:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

    <uses-permission android:name=\"android.permission.INTERNET\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <!-- Open Stores -->
    <uses-permission android:name=\"org.onepf.openiab.permission.BILLING\" />
    <!-- Google -->
    <uses-permission android:name=\"com.android.vending.BILLING\" />
    <!-- Nokia -->
    <uses-permission android:name=\"com.nokia.payment.BILLING\" />
    <!-- Samsung -->
    <uses-permission android:name=\"com.sec.android.iap.permission.BILLING\" />
    <!-- Fortumo -->
    <uses-feature android:name=\"android.hardware.telephony\"
                  android:required=\"false\" />
    <uses-permission android:name=\"android.permission.RECEIVE_SMS\" />
    <uses-permission android:name=\"android.permission.SEND_SMS\" />
    <uses-permission android:name=\"android.permission.READ_PHONE_STATE\" />
    <!-- SlideME -->
    <uses-permission android:name=\"com.slideme.sam.manager.inapp.permission.BILLING\" />
    <!-- Skubit -->
    <uses-permission android:name=\"com.skubit.BILLING\" />

    <application>
        <!-- Amazon -->
        <receiver android:name=\"com.amazon.device.iap.ResponseReceiver\">
            <intent-filter>
                <action android:name=\"com.amazon.inapp.purchasing.NOTIFY\"
                        android:permission=\"com.amazon.inapp.purchasing.Permission.NOTIFY\" />
            </intent-filter>
        </receiver>
        <!-- Amazon -->

        <!-- Fortumo -->
        <receiver android:name=\"mp.MpSMSReceiver\">
            <intent-filter>
                <action android:name=\"android.provider.Telephony.SMS_RECEIVED\" />
            </intent-filter>
        </receiver>

        <service android:name=\"mp.MpService\" />
        <service android:name=\"mp.StatusUpdateService\" />

        <activity android:name=\"mp.MpActivity\"
                  android:configChanges=\"orientation|keyboardHidden|screenSize\"
                  android:theme=\"@android:style/Theme.Translucent.NoTitleBar\" />
        <!-- Fortumo -->
    </application>
    
</manifest>
\n

Demo

\n

For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

\n

Otherwise ...

\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
var FortumoSMS = require('nativescript-fortumo-sms');
\n

Initialize

\n

Initialize the environment:

\n
function onPageLoaded(args) {
    FortumoSMS.init();
}
exports.onPageLoaded = onPageLoaded;
\n

The (optional) object that is submitted to the PayPal.init function has the following structure:

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 198612227
\n

Start purchase

\n
function buyProduct(args) {
    // configure
    var purchase = FortumoSMS.newPurchase()
        .setId('<PRODUCT-ID>')
        .setName('test product')
        .setSecret('<APP-SECRET>')
        .setDisplayName('A test product')
        .setAmount('1.95')
        .setCurrency('USD');

    // start purchase
    purchase.start(function(cbResult) {
        switch (cbResult.code) {
            case 0:
                // SUCCESS
                break;
                
            case 1:
                // CANCELLED
                break;
                
            case 2:
                // FAILED
                break;
                
            case 3:
                // PENDING
                break;
                
            case -1:
                // \"unhandled exception\"
                break;
        }
    });
}
exports.buyProduct = buyProduct;
\n

The purchase object that is created by FortumoSMS.newPurchase function has the following structure.

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
isConsumableGets if the product is consumable or not. Example: var c = purchase.isConsumable();
getAmountGets the price. Example: var a = purchase.getAmount();
getCreditsMultiplierGets the multiplier for the credits. Example: var m = purchase.getCreditsMultiplier();
getCurrencyGets the currency. Example: var c = purchase.getCurrency();
getIdGets the product ID. Example: var id = purchase.getId();
getNameGets the product name. Example: var n = purchase.getName();
getSecretGets the app secret. Example: var s = purchase.getSecret();
setAmountSets the price. Example: payment.setAmount('1.25');
setCreditsMultiplierSets the multiplier for the credits. Example: purchase.setCreditsMultiplier(1.23);
setCurrencySets the currency. Example: purchase.setCurrency('USD');
setIdSets the product ID. Example: purchase.setId('<PRODUCT-ID>');
setIfConsumableSets if the product is consumable or not. Example: purchase.setIfConsumable(true);
setNameSets the product name. Example: purchase.setName('My product');
setSecretSets the app secret. Example: purchase.setSecret('<APP-SECRET>');
startStarts the purchase process.
\n
start
\n

The callback that is submitted to the purchase.start method receives an object with the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
billing.statusThe billing status (if code = 0)
codeThe result code. 0 = success, -1 = unhandled exception, 1 = canceled, 2 = failed, 3 = pending
credit.amountThe credit amount (if code = 0)
credit.currencyThe credit name (if code = 0)
message.idThe message ID (if code = 0)
payment.codeThe payment code (if code = 0)
price.amountThe price amount (if code = 0)
price.currencyThe price currency (if code = 0)
product.nameThe product name (if code = 0)
service.idThe service ID (if code = 0)
skuSku (if code = 0)
user.idThe user ID (if code = 0)
\n

Enhancements

\n

Logging

\n

If you want to get the logging output of the module, you can use FortumoSMS.addLogger function to add a callback that receives a message from the module:

\n
FortumoSMS.addLogger(function(msg) {
    console.log('[nativescript-fortumo-sms]: ' + msg);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-popup":{"name":"@triniwiz/nativescript-popup","version":"2.0.0","license":"Apache-2.0","readme":"

Nativescript nativescript-popup

\n
npm install @triniwiz/nativescript-popup
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer":{"name":"nativescript-accelerometer","version":"3.0.0","license":"MIT","readme":"

NativeScript Accelerometer Plugin

\n

Accelerometer plugin for NativeScript

\n

Installation

\n
tns plugin add nativescript-accelerometer
\n

This plugin is compatible with both NativeScript 2.x and 3.x versions.

\n

Usage

\n
var accelerometer = require(\"nativescript-accelerometer\");

accelerometer.startAccelerometerUpdates(function(data) {
    console.log(\"x: \" + data.x + \"y: \" + data.y + \"z: \" + data.z);
}, { sensorDelay: \"ui\" });
\n

Expected Values

\n\n

Options

\n

You can control how often the callback will be called by setting the sensorDelay option. The values are:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/ns-onesignal":{"name":"@codesthings/ns-onesignal","version":"1.0.2","license":"Apache-2.0","readme":"

@codesthings/ns-onesignal

\n

OneSignal integration for Nativescript. At the moment this plugin does not contain any custom code. It adds the required Onesignal libraries for iOS & Android, incl. their type definitions, which can then be integrated using the OneSignal docs.

\n
ns plugin add @codesthings/ns-onesignal
\n

Native Library Versions

\n

This plugin was last tested with the following versions of the OneSingal SDKs:

\n

iOS

\n

3.11.1\nPod: https://cocoapods.org/pods/OneSignal\nRepo: https://github.com/OneSignal/OneSignal-iOS-SDK

\n

Android

\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-picker":{"name":"nativescript-picker","version":"2.1.2","license":"Apache-2.0","readme":"

nativescript-picker

\n

\"Build\n\"npm\"\n\"npm\"\n\"Dependency\n\"peerDependencies

\n

A NativeScript plugin that provides ui element for picking an object/value from a list opened in a modal popup.

\n\n

Screenshots

\n

\"PickerField\"PickerField

\n

Installation

\n
tns plugin add nativescript-picker
\n

Configuration

\n

No additional configuration required!

\n

Usage

\n

To use the PickerField in markup you need to:

\n\n
<Page
   xmlns=\"http://schemas.nativescript.org/tns.xsd\"
   xmlns:picker=\"nativescript-picker\">
   <picker:PickerField hint=\"Click here\" items=\"{{ pickerItems }}\"/>
...
\n\n
import { NativeScriptPickerModule } from \"nativescript-picker/angular\";
...
@NgModule({
    imports: [
        NativeScriptPickerModule,
        ...
    ],
    ...
\n

Then you will be able to declare the fields in the html of your component:

\n
<PickerField hint=\"Click here\" [items]=\"pickerItems\"></PickerField>
\n\n
import Vue from \"nativescript-vue\";
import { PickerField } from 'nativescript-picker/vue';

Vue.use(PickerField);
\n

Then you will be able to declare the fields in the template of your component:

\n
<PickerField hint=\"Click here\"></PickerField>
\n

Features

\n

PickerField

\n

The PickerField is a NativeScript TextField which means that any functionality the default TextField provides is also available in the PickerField component. The only difference is that by design it is in "read-only" mode, or simply put you cannot change its text by input or select that text. Changing the text of the PickerField is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it.

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
pickerTitleThe title of the modal view.
itemsThe source collection used to populate the list of the modal view.
itemTemplateТhe UI template for list view items of the list of the modal view.
modalAnimatedOptional parameter specifying whether to show the modal view with animation.
textFieldThe 'property' of the object from the 'items' collection that will be used by the 'text' property of the PickerField.
valueFieldThe 'property' of the object from the 'items' collection that will be used by when setting the 'selectedValue' property of the PickerField.
selectedValueThe object selected from the list in the modal view.
selectedIndexThe index of the object from the 'items' collection that has been selected from the list in the modal view.
iOSCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
iOSCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
androidCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
androidCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
\n

Styling

\n

PickerField

\n

The PickerField can be targeted in CSS through its element selector and additionally by setting a class. The PickerField also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the PickerPage selector and through it style all picker modals with selectors like PickerPage ActionBar and PickerPage ListView. In addition to that, if you set a class on the PickerField, it will be transferred on the PickerPage and with it you can style individual modals.

\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"paygilant-native-script-plugin":{"name":"paygilant-native-script-plugin","version":"2.2.40","license":"Apache-2.0","readme":"

paygilant-native-script-plugin

\n
ns plugin add paygilant-native-script-plugin
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-menu":{"name":"nativescript-menu","version":"1.1.7","license":"MIT","readme":"

nativescript-menu \"Build

\n

A plugin that adds a pop-up menu to NativeScript

\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:\ntns plugin add nativescript-menu

\n

Version lower then NativeScript 7

\n

tns plugin add nativescript-menu@1.1.6

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"screenshot\"screenshot
\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:ui=\"nativescript-menu\">
  <StackLayout class=\"p-20\">
    <Button id=\"menuBtn\" text=\"getMenu\" tap=\"{{ buttonTap }}\"/>
  </StackLayout>
</Page>
\n
import { Menu } from \"nativescript-menu\";

export class HelloWorldModel extends Observable {
  public message: string;
  private menu: Menu;

  constructor(public page: Page) {
    super();
  }

  buttonTap() {
    Menu.popup({
      view: this.page.getViewById(\"menuBtn\"),
      actions: [\"Example\", \"NativeScript\", \"Menu\"]
    })
      .then(action => {
        alert(action.id + \" - \" + action.title);
      })
      .catch(console.log);
  }
}
\n

with custom options

\n
import { Menu } from \"nativescript-menu\";

export class HelloWorldModel extends Observable {
  public message: string;
  private menu: Menu;

  constructor(public page: Page) {
    super();
  }

  buttonTap() {
    Menu.popup({
      view: this.page.getViewById(\"menuBtn\"),
      actions: [
        { id: \"one\", title: \"Example\" },
        { id: \"two\", title: \"NativeScript\", customOption: \"Hello\" },
        { id: \"three\", title: \"Menu\" }
      ]
    })
      .then(action => {
        alert(JSON.stringify(action));
      })
      .catch(console.log);
  }
}
\n

API

\n\n
export interface MenuOptions {
  title?: string; // IOS Only
  message?: string; // IOS Only
  view: View;
  actions: object[] | string[];
  cancelButtonText?: string; // IOS Only
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
popup(options: MenuOptions): Promise<{id: number, title: string} | actionObject | boolean>Create a pop-up menu and show it
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-youtubeplayer":{"name":"@triniwiz/nativescript-youtubeplayer","version":"4.2.0","license":"Apache-2.0","readme":"

Nativescript YoutubePlayer

\n
npm install @triniwiz/nativescript-youtubeplayer
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-downloader":{"name":"nativescript-downloader","version":"2.1.5","license":"Apache-2.0","readme":"

NativeScript Downloader

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

Usage

\n

TypeScript

\n
import { Downloader } from 'nativescript-downloader';
Downloader.init(); // <= Try calling this after the app launches to start the downloader service
Downloader.setTimeout(120); //Increase timeout default 60s
\n
import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';
const downloader = new Downloader();
const imageDownloaderId = Downloader.createDownload({
  url:
    'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
});

downloader
  .start(imageDownloaderId, (progressData: ProgressEventData) => {
    console.log(`Progress : ${progressData.value}%`);
    console.log(`Current Size : ${progressData.currentSize}%`);
    console.log(`Total Size : ${progressData.totalSize}%`);
    console.log(`Download Speed in bytes : ${progressData.speed}%`);
  })
  .then((completed: DownloadEventData) => {
    console.log(`Image : ${completed.path}`);
  })
  .catch(error => {
    console.log(error.message);
  });
\n

JavaScript

\n
var Downloader = require('nativescript-downloader').Downloader;
Downloader.Downloader.init(); // <= Try calling this after the app launches to start the downloader service
Downloader.setTimeout(120); //Increase timeout default 60s
\n
var Downloader = require('nativescript-downloader').Downloader;
var downloader = new Downloader();
var imageDownloaderId = downloadManager.createDownload({
  url:
    'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
});

downloader
  .start(imageDownloaderId, progressData => {
    console.log(`Progress : ${progressData.value}%`);
  })
  .then(completed => {
    console.log(`Image : ${completed.path}`);
  })
  .catch(error => {
    console.log(error.message);
  });
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
createDownload(options: DownloadOptions)stringCreates a download task it returns the id of the task
getStatus(id: string)StatusCodeGets the status of a download task.
start(id: string, progress?: Function)Promise<DownloadEventData>Starts a download task.
resume(id: string)voidResumes a download task.
cancel(id: string)voidCancels a download task.
pause(id: string)voidPauses a download task.
getPath(id: string)voidReturn the path of a download task.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

##Angular

\n

Injection Root Component

\n
import { Downloader } from 'nativescript-downloader';
....
ngOnInit() {
 Downloader.init(); // <= Try calling this after the app launches to start the downloader service
}
...
\n

Custome Downloader option

\n
  // Request format for Downlaoder
             DownloadOptions {
             url: string;
             query?: Object | string;
             headers?: Object;
            path?: string;
             fileName?: string;
          }
\n

Service File To use any where

\n
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';



@Injectable({
    providedIn: 'root',
})


export class DataDownLoadService {
    public database: any;
    downloader: Downloader = new Downloader();
    constructor() { }


    /**
    * @ngdoc method
    * @name downloadDb
    * @description  download generic method for nay file 
    * @memberof DataDownLoadService
    * @param apiUrl : - https://myserver.com/mypath
    * @param filename :- myfile.zip ...
    * @param downloadlocation : mobile local location
    */
    downloadFile(apiUrl, filename, downloadlocation) {
        const subject = new Subject<any>();
    
        // Request format for Downlaoder
        //      DownloadOptions {
        //     url: string;
        //     query?: Object | string;
        //     headers?: Object;
        //     path?: string;
        //     fileName?: string;
        //   }

        // Prepare the header with token work
    
        const headerHttp = {
            \"Content-Type\": \"application/json\",
            \"Authorization\": 'Bearer ' + 'Token...'
        }

        const url =  apiUrl;

        const zipDownloaderId = this.downloader.createDownload({
            url: url,
            headers: headerHttp,
            path: downloadlocation,
            fileName: filename
        });

        this.downloader
            .start(zipDownloaderId, (progressData: ProgressEventData) => {
                console.log(`Progress : ${progressData.value}%`);
                console.log(`Current Size : ${progressData.currentSize}%`);
                console.log(`Total Size : ${progressData.totalSize}%`);
                console.log(`Download Speed in bytes : ${progressData.speed}%`);
            })
            .then((completed: DownloadEventData) => {
                console.log(`zip file saved at : ${completed.path}`);
              
               
                
                subject.next(true);
              
            })
            .catch(error => {
                console.log('downloadDb', error.message);
                subject.error(error);

            });

        return subject.asObservable();
    }



}
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-dom/solidjs-types":{"name":"@nativescript-dom/solidjs-types","version":"1.0.15","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules":{"name":"tns-core-modules","version":"6.5.27","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-circle-menu":{"name":"nativescript-circle-menu","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/DeviantJS/nativescript-circle-menu/blob/master/LICENSE"},"readme":"

\n \"NativeScript\n\t
\n

\n## Ramotion Circle Menu {N} Plugin\n

A plugin to bring the exceptional work of Ramotion into the {N} platform.

\n

Circle Menu is an expanding circular menu.

\n

As Ramotion is as forward thinking as they are super cool & talented, they open sourced it which allows us to make it available to the {N} community.

\n

Circle Menu Source for the iOS Platform

\n

Install

\n
npm i nativescript-circle-menu --save
\n

Usage

\n
import {Color} from 'color';
import {TNSCircleMenu, TNSCircleButton} from 'nativescript-circle-menu';

this.circleMenu = new TNSCircleMenu();
this.circleMenu.initMenu([
    new TNSCircleButton({
        icon: \"home.png\",
        color: new Color('#B3714F').ios,
        action: () => {
            console.log('home selected');
        }
    }),
    new TNSCircleButton({
        icon: \"search.png\",
        color: new Color('#7C3FE8').ios,
        action: () => {
            console.log('search selected');
        }
    }),
    new TNSCircleButton({
        icon: \"notifications.png\",
        color: new Color('#4E75E2').ios,
        action: () => {
            console.log('notifications selected');
        }
    }),
    new TNSCircleButton({
        icon: \"settings.png\",
        color: new Color('#528100').ios,
        action: () => {
            console.log('settings selected');
        }
    }),
    new TNSCircleButton({
        icon: \"nearby.png\",
        color: new Color('#85D5FE').ios,
        action: () => {
            console.log('nearby selected');
        }
    })
]);
\n

Methods

\n
initMenu(items: Array<TNSCircleButton>, menuImage?: string, closeImage?: string, position?: CGRect, bgColor?: string, duration?: number, distance?: number);
\n

Issues

\n
\n

Flooding the native implementations repo with {N} specific implementation problems is discourteous.\nThey were kind enough open source some really great UI / UX please respect the fact it is not their responsibility to investigate or solve issues using this plugin in NativeScript.

\n
\n

Please create issues here first and only after it has been properly vetted to not be an {N} specific implementation problem\nshould you open an issue in the Circle Menu GitHub repo.

\n

Contributing

\n

Please see the CONTRIBUTING file for guidelines.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loki-nativescript-adapter":{"name":"loki-nativescript-adapter","version":"1.0.3","license":"MIT","readme":"

Loki NativeScript adapter

\n
\n

A Loki adapter for NativeScript apps.

\n
\n

What is Loki

\n
\n

LokiJS is a document oriented database written in javascript, published under MIT License. Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism. - LokiJS

\n
\n

Demo

\n

Watch the example application on YouTube

\n

Installation

\n

Run the following command from the /app directory of your project:

\n
$ npm install lokijs --save
$ npm install loki-nativescript-adapter --save
\n

Usage

\n
// Requirements
var fs = require(\"file-system\");
var Loki = require(\"./node_modules/lokijs/src/lokijs.js\");
var LokiNativeScriptAdapter = require(\"./node_modules/loki-nativescript-adapter/loki-nativescript-adapter.js\");

// Setup Loki
var path = fs.path.join(fs.knownFolders.currentApp().path, \"database.db\");
var db = new Loki(path, {
    adapter: new LokiNativeScriptAdapter()
});

// Save some movies
var movies = db.addCollection(\"movies\");
movies.insert({ title: \"Ghost Busters\", year: 1984 });
movies.insert({ title: \"Ghost Busters II\", year: 1989 });
movies.insert({ title: \"Ghost Busters\", year: 2016 });
console.log(movies.data);
db.saveDatabase();

// Load and find some movies
db.loadDatabase({}, function() {
    var movies = db.getCollection(\"movies\");
    console.log(movies.find({ title: \"Ghost Busters\" }));
});
\n

To go deeper in Loki have a look at the documentation.

\n

\"npm

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geocoding":{"name":"nativescript-geocoding","version":"3.0.0","license":"Apache-2.0","readme":"

NativeScript Geocoding \"apple\" \"android\"

\n

\"npm\"\n\"npm\"

\n

Forward-geocoding requests take a user-readable address and find the corresponding latitude and longitude value and may also return additional information about the specified location, such as a point of interest or building at that location.

\n

Note\nVersion 3 and is for NativeScript 7 - use version 2 for NativeScript 4/5/6.

\n

\"\"

\n

Installation

\n

In a command prompt / terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-geocoding
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn the demo-angular folder you can find the usage of the plugin for an Angular application (demo-angular/src/app/home/home.component.ts.

\n

Steps:

\n

Import the plugin

\n

TypeScript

\n
import * as geocoding from \"nativescript-geocoding\";
\n

Javascript

\n
var geocoding = require(\"nativescript-geocoding\");
\n

Call the plugin

\n
  geocoding.getLocationFromName('Copenhagen').then(loc => {
      console.log('Found ', loc);
  }, function (e) {
      console.log(\"Error: \" + (e.message || e));
  });
\n

or in case you may want to treat possible, multiple hits

\n
geocoding.getLocationListFromName(searchBar.text, 5).then(locations => {
            console.log('Found ', locations.length);
            if (locations.length > 0) {
                this.location = locations[0];
            }
        }, function (e) {
            console.log('Error: ' + (e.message || e));
        });
\n

Demo

\n

To run the Angular demo:

\n
$ cd nativescript-geocoding/src
$ npm run demo.ios
$ npm run demo.android
\n

Native APIs

\n

Android implementation

\n\n

Returns an array of Addresses that are known to describe the named location, which may be a place name\nsuch as "Dalvik, Iceland", an address such as "1600 Amphitheatre Parkway, Mountain View, CA",\nan airport code such as "SFO", etc.. The returned addresses will be localized for the locale provided\nto this class's constructor.

\n

The query will block and returned values will be obtained by means of a network lookup. The\nresults are a best guess and are not guaranteed to be meaningful or correct. It may be useful to\ncall this method from a thread separate from your primary UI thread.

\n

Parameters\nlocationName String: a user-supplied description of a location\nmaxResults int: max number of results to return. Smaller numbers (1 to 5) are recommended

\n

iOS implementation

\n\n

Depending on the precision of the user-provided information, you may receive one result or multiple results.\nFor example, passing a string of "100 Main St., USA" may return many results unless you also specify a search\nregion or additional details. To help you decide which result is correct, the geocoder actually returns\nCLPlacemark objects, which contain both the coordinate and the original information that you provided.

\n

Notes

\n\n
 Error: iOS CLGeocoder error : The operation couldn’t be completed. (kCLErrorDomain error 8.)
\n

if the CLGeocoder was not able to find anything for the search string.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-messaging":{"name":"nativescript-wear-messaging","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Wear Messaging Plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Adding support for Wear Messaging using the MessageClient API.\nThis plugin is intended to be used to communicate between a handled app and an Android Wear app.

\n

Only Android Supported

\n

Installation

\n

Install the plugin:

\n
tns plugin add nativescript-wear-messaging
\n

Usage

\n

The idea of this plugin is to communicate between a wear device and a handled device. Both can act as receiver or sender, in fact, that's the\nmost common usage way and the one explained here. You need two apps that will communicate to each other, here is described how you can configure this plugin\nin both:

\n

In the Wear app

\n

Add the following to your AndroidManifest.xml inside your <application> tag. It will create the service listener that will be waiting\nfor the messages sent by the handled app.

\n
<service android:name=\"com.berriart.android.nativescriptwearmessaging.MessageListenerService\">
    <intent-filter>
        <action android:name=\"com.google.android.gms.wearable.MESSAGE_RECEIVED\" />
        <data android:scheme=\"wear\" android:host=\"*\" />
    </intent-filter>
</service>
\n

Since multiple wearables can be connected to the handheld device, the wearable app needs to determine that a connected node\nis capable of launching the activity. In your wearable app, advertise that the node it runs on provides specific capabilities.\nWe will use this later when sending messages from the handled device.

\n

Create a wear.xml file inside app/App_Resources/Android/values to advertise the capabilities

\n
<resources>
    <string-array name=\"android_wear_capabilities\">
        <item>name_of_your_capabilty_wear</item>
    </string-array>
</resources>
\n

Sending messages to the handled app:

\n
import { WearMessaging } from 'nativescript-wear-messaging';

let client = new WearMessaging();
client.send(\"/some/path\", \"some content\", \"name_of_your_capabilty_handled\"); // Last parameter is the capablity name of then handled device
\n

Receiving messages to from the handled app:

\n
import { WearMessaging } from 'nativescript-wear-messaging';

let client = new WearMessaging();
client.registerListener((path: string, content: string) => {
    if (path === \"/some/path\") {
        console.log(path + \" \" + content);
    }
});
client.startListener();
\n

*Include the following to your references.d.ts file if you are getting this error: TS2304: Cannot find name 'com'.

\n
/// <reference path=\"./node_modules/nativescript-wear-messaging/declarations.d.ts\" /> Needed for wear-messaging
\n

In the handled app

\n

Add the following to your AndroidManifest.xml inside your <application> tag. It will create the service listener that will be waiting\nfor the messages sent by the wear app.

\n
<service android:name=\"com.berriart.android.nativescriptwearmessaging.MessageListenerService\">
    <intent-filter>
        <action android:name=\"com.google.android.gms.wearable.MESSAGE_RECEIVED\" />
        <data android:scheme=\"wear\" android:host=\"*\" />
    </intent-filter>
</service>
\n

Since multiple wearables can be connected to the handheld device, the wearable app needs to determine that a connected node\nis capable of launching the activity. In your wearable app, advertise that the node it runs on provides specific capabilities.\nWe will use this later when sending messages from the handled device.

\n

Create a wear.xml file inside app/App_Resources/Android/values to advertise the capabilities

\n
<resources>
    <string-array name=\"android_wear_capabilities\">
        <item>name_of_your_capabilty_handled</item>
    </string-array>
</resources>
\n

Sending messages to the wear app:

\n
import { WearMessaging } from 'nativescript-wear-messaging';

let client = new WearMessaging();
client.send(\"/some/path\", \"some content\", \"name_of_your_capabilty_wear\"); // Last parameter is the capablity name of then handled device
\n

Receiving messages to from the wear app:

\n
import { WearMessaging } from 'nativescript-wear-messaging';

let client = new WearMessaging();
client.registerListener((path: string, content: string) => {
    if (path === \"/some/path\") {
        console.log(path + \" \" + content);
    }
});
client.startListener();
\n

*You should read the official Android doc anyway.

\n

License

\n

Apache License Version 2.0, January 2018

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/swift-ui":{"name":"@nativescript/swift-ui","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-platform-free":{"name":"nativescript-platform-free","version":"1.3.2","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

nativescript-platform-free

\n

A NativeScript plugin to easily deal with and detect which platform you are on. Since the original plugin requires a subscription now, this plugin is my attempt to maintain it to the point where it does not break.

\n

Developed by

\n

\"MasterTech\"

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Requirements

\n

Any version of NativeScript

\n

Installation

\n

tns plugin add nativescript-platform

\n

Usage

\n

To use the module you just require() it:

\n
var myPlatform = require( \"nativescript-platform\" );
if (myPlatform.android) {
  // do android specific stuff
}
\n

please note you can also simple do, and then the nsPlatform will be available globally everywhere:

\n
require( \"nativescript-platform\" );
if (nsPlatform.ios) {
 // do ios specific stuff
}
\n

nsPlatform will be declared globally. My recommendation is just to include it in the app.js and then use it everywhere.

\n

You ask, how exactly does this help?

\n

This wraps up several simple ways to check for the platform you are on. This comes up commonly when you are trying to do stuff on just one platform.

\n

Breaking changes

\n

Removed initial windows phone support, its been 4 years -- I don't think NativeScript will ever build actual windows phone apps.

\n

API

\n

Functions

\n\n
if (nsPlatform.isAndroid()) { /* do my android specific stuff */ }
\n\n

Variables

\n\n
if (nsPlatform.ios) { /* do my ios specific stuff */ }
\n

Switch Statement support

\n

.platform

\n\n
switch (nsPlatform.platform) {
  case nsPlatform.type.IOS:     // Do iOS stuff
  case nsPlatform.type.ANDROID: // Do Android stuff
}
\n

.deviceType

\n

Tablet or Phone

\n

.screen

\n\n

.device

\n\n
console.log(nsPlatform.manufacturer, nsPlatform.name);
// Outputs: \"Apple iPhoneX\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-t3b-printer":{"name":"@ticnat/nativescript-t3b-printer","version":"1.0.7","license":"Apache-2.0","readme":"

@ticnat/nativescript-t3b-printer

\n

Supported platforms:\n#iOS

\n
ns plugin add @ticnat/nativescript-t3b-printer
\n

Usage

\n
this.printer = new T3bPrinter();

this.printer.connectWifi(\"192.168.1.240\");

this.printer.printTxt(\"some text\");
\n

for full example see demo.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude":{"name":"nativescript-wikitude","version":"7.2.1-1.8.5","license":"Apache-2.0","readme":"

nativescript-wikitude

\n

\"npm

\n

\"NPM\"

\n

Provides nativescript access to Wikitude AR.

\n

Versioning is as follows ${wikitude-version}-${plugin-version}\nexample : 7.2.1-1.1.0 is Wikitude Version 7.2.1, Plugin version 1.1.0.

\n

Screenshots coming soon!

\n

Prerequisites / Requirements

\n

Permissions

\n

before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

\n

Running the Demo

\n

WE include a very basic AR Sample in the Demo app,

\n

but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

\n

and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

\n

Installation

\n

to install for your project you can use :

\n
tns plugin add nativescript-wikitude
\n

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

\n
    import { Wikitude } from 'nativescript-wikitude';
    // ...snip....
    registerElement('Wikitude', () => Wikitude);
\n

and then in your ar.component.html :

\n
    <Wikitude [url]=\"WikitudeURL\" 
              (WorldLoaded)=\"onWorldLoaded($event)\" 
              (JSONReceived)=\"onJSON($event)\">
    </Wikitude>
\n

and in your ar.component.ts:

\n
    import { Wikitude } from 'nativescript-wikitude';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = \"~/wikitude_world/index.html\";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...
\n

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

\n
    (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
\n

And Voila! you have Wikitude AR working in your Nativescript Application!

\n

Usage

\n

using your own location provider

\n

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

\n

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }
\n

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

\n
    this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
\n

this is useful if you want a single location state.

\n

once you have disabled it you can re-enable it with the following :

\n
    this.WikitudeInstance.enableLocationProvider();
\n

TODO

\n\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefault valueDescription
url""the URL of the Wikitude "ARWorld"
features` Features.ImageTrackingFeatures.InstantTracking
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionArgumentsDescription
setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
loadUrl()url: stringloads the URL in the Wikitude WebView
reload()reloads the current Wikitude WebView
clearCache()clears the wikitude Cache
toggleFlash()Toggles the Devices Flash-light
switchCamera()switches the Camera that wikitude uses
captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
enableLocationProvider()enables the location Provider
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionType
WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
\n

all can be imported from the index.d.ts.

\n

License

\n

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ui-highcharts":{"name":"nativescript-ui-highcharts","version":"1.2.2","license":"Apache-2.0","readme":"

NativeScript Highcharts

\n
\n

:warning: If you are using NativeScript 7.0.0 and above: Use this package @mhtghn/nativescript-highcharts

\n
\n

\n \n \n \"downloads\"\n \n \n \"License:\n \n

\n

\"NPM\"

\n

This plugins allows you to use Highcharts in NativeScript.

\n

Screenshots

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/nativescript-ui-highcharts
cd nativescript-ui-highcharts/src
npm run demo.ios # or demo.android
\n

NativeScript-Angular

\n

Check out the demo-angular folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/nativescript-ui-highcharts
cd nativescript-ui-highcharts/src
npm run demo-angular.ios # or demo-angular.android
\n

Installation

\n
tns plugin add nativescript-ui-highcharts
\n

Usage

\n

NativeScript-Core

\n

TypeScript

\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

\n
...
export class HomeViewModel extends Observable {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };
    chartOptionsString = JSON.stringify(this.chartOptions);
    ...
}
\n

XML

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ui=\"nativescript-ui-highcharts\">

    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
    </GridLayout>
</Page>
\n

NativeScript Angular

\n

TypeScript

\n

Import the HighchartsModule in your module.

\n
...
import {HighchartsModule} from \"nativescript-ui-highcharts/angular\";

@NgModule({
    imports: [
        ...
        HighchartsModule
    ],
    ...
})
export class HomeModule { }
\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

@Component({
    selector: \"Home\",
    moduleId: module.id,
    templateUrl: \"./home.component.html\"
})
export class HomeComponent implements OnInit {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    chartOptionsString = JSON.stringify(this.chartOptions);
    ...
}
\n

HTML

\n
<ActionBar class=\"action-bar\">
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout class=\"page\">
    <!-- Add your page content here -->
    <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
</GridLayout>
\n

Highcharts Compatibility

\n\n

About performance

\n

This plugin is addressed to people who really want to use Highcharts in their NS apps. Because it uses a WebView to display the chart. So performance-wise it is not the best solution. If you want a pure native solution you should use NativeScript UI's Chart component

\n

Tips

\n\n

Credit

\n

This plugin is greatly inspired by this demo from Eddy Verbruggen

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pspdfkit":{"name":"nativescript-pspdfkit","version":"4.3.4","license":"Apache-2.0","readme":"

Nativescript PSPDFKit

\n

\"npm\"\n\"npm\"

\n

NativeScript implementation of PSPDFKit (https://pspdfkit.com/). Currently for iOS only, Android support is coming soon.

\n

Please note that this plugin is not production ready. You will have to fork this project to get your licensed version POD installed correctly (currently).

\n

Installation

\n

npm install nativescript-pspdfkit

\n

Example Implementation

\n

Android

\n

Modify the activity entry within the AndroidManifest.xml file found in the app/App_Resources/Android/ folder

\n
<activity
        android:name=\"com.github.TeamMaestro.TNSFragmentActivity\"
        android:label=\"@string/title_activity_kimera\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\">

        <activity android:name=\"com.pspdfkit.ui.PdfActivity\" android:windowSoftInputMode=\"adjustNothing\" />
        <meta-data android:name=\"pspdfkit_license_key\" android:value=\"youKey\"/>
\n

Modify the defaultConfig entry within the app.gradle file found in the app/App_Resources/Android/ folder

\n
defaultConfig {
    minSdkVersion 19
\n
import {TNSPSPDFKit} from 'nativescript-pspdfkit';
let licenseKey = '';
let pspdfkit = new TNSPSPDFKit(licenseKey);
/*
 TNSPSPDFKitOptions {
  scrollDirection?: 'vertical' | 'horizontal';
  backgroundColor?: string;
  spreadFitting?: 'adaptive' | 'fit' | 'fill';
  thumbnailBar?: 'scrollable' | 'scrubber' | 'none';
  scrubberBar?: 'verticalRight' | 'verticalLeft';
  thumbnailSize?: string;
  pageMode?: 'automatic' | 'single' | 'double';
  minZoom?: number;
  maxZoom?: number;
}

*/
pspdfkit.display('~/example.pdf',{ scrollDirection: 'vertical' });
\n

IMPORTANT: Make sure you include xmlns:pspdfkit="nativescript-pspdfkit" on the Page tag

\n
<pdfView:TNSPSPDFView scrollDirection=\"horizontal\" scrubberBar=\"verticalRight\" thumbnailBar=\"scrubber\" spreadFitting=\"fill\" src=\"~/example.pdf\"/>
\n

Angular

\n
import { TNSPSPDFView } from 'nativescript-pspdfkit';
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"TNSPSPDFView\", () => require(\"nativescript-pspdfkit\").TNSPSPDFView);
\n
<TNSPSPDFView selectedIndexChange=\"pageChanged\" scrollDirection=\"horizontal\" scrubberBar=\"verticalRight\" thumbnailBar=\"scrubber\" spreadFitting=\"fill\" src=\"~/example.pdf\"></TNSPSPDFView>
\n

Webpack\nSetup worker loader -> link

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
scrollDirectionverticalstring
  • - [ ]
scrubberBarhorizontalstring
  • - [ ]
thumbnailBarnoneboolean
  • - [ ]
spreadFitting"adaptive"string
  • - [ ]
thumbnailSizeDefaults to 88x125 on iPad and 53x75 on iPhonestring
  • - [ ]
pageModeautomaticstring
  • - [ ]
minZoom1number
  • - [ ]
maxZoom20number
  • - [ ]
searchResultZoom2number
  • - [ ]
formsEnabledtrueboolean
  • - [ ]
srcnullstring
  • - [x]
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-apps":{"name":"nativescript-azure-mobile-apps","version":"2.0.4","license":"Apache-2.0","readme":"

NativeScript Azure Mobile Apps plugin

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Azure Mobile Apps plugin.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-azure-mobile-apps

\n

This command automatically installs the necessary files, as well as stores nativescript-azure-mobile-apps as a dependency in your project's package.json file.

\n

Configuration

\n

For most of the functions the plugin you only need to know the name of your Azure mobile apps portal. The only thing that requires additional configuration is the social sign-in under iOS. For that please follow the steps explained below

\n

Starting with version 2.0, due to updated libraries, Mircososft now reqiures the minimum SDK for Android to be 19. So you need to adjust 2 files in your app:

\n
    \n
  1. In the app/App_Resources/Android/AndroidManifest.xml you must have android:minSdkVersion set to 19 or above.
    2. \n
  2. In the app/App_Resources/Android/app.gradle you must ensure that in your defaultConfig you have minSdkVersion set to the same number as the one you set in the AndroidManifest.xml file. So assuming you are setting it to 19, your file should look something like this:
    3. \n
\n
android {  
  defaultConfig {  
    generatedDensities = []
    applicationId = \"......\"
    minSdkVersion 19
  }  
}
\n

API

\n

MobileServiceClient

\n

Static Methods

\n\n

Methods

\n\n

Properties

\n\n

MobileServicePush

\n

Methods

\n\n

Properties

\n\n

MobileServiceUser

\n

Static Methods

\n\n

Methods

\n\n

Properties

\n\n

MobileServiceTable

\n

Methods

\n\n

MobileServiceQuery

\n

The query object provies a very easy to use chainable interface to filter, order and page through the data inside a table.

\n

Methods

\n\n

Usage

\n

Note that there is no difference in using the plugin in Angular NativeScript apps, so the usage below is valid for Angular apps as well.

\n

Create a client

\n
import { MobileServiceClient } from \"nativescript-azure-mobile-apps/client\";
var client = new MobileServiceClient(\"https://<PORTAL_NAME>.azurewebsites.net\");
\n

Get a reference to a table

\n
var todoItemTable = client.getTable(\"TodoItem\");
\n

Get all items in a table

\n
todoItemTable.read<TodoItem>().then(function(results) {
    // results is array of TodoItem-s
    console.log(results.length);
    console.log(results[0].id);
});
\n

Add an item to a table

\n
var item = new TodoItem();
item.text = \"NativeScript Rocks!\";
todoItemTable.insert(item).then(function(result) {
    // result is the inserted item with the id changed
    console.log(result.id);
});
\n

Update an item

\n
item.text = \"Changed Text\";
todoItemTable.update(item).then(function(result) {
    // result is the updated item
    console.log(result);
});
\n

Delete an item

\n
todoItemTable.deleteItem(item).then(function() {
    console.log(\"Deleted!\");
});
\n

Delete an item by ID

\n
todoItemTable.deleteById(\"some id\").then(function() {
    console.log(\"Deleted!\");
});
\n

Query table

\n
todoItemTable.where().field(\"completed\").eq(true).read().then(function(results) {
    console.log(\"There are \" + results.length.toString() + \"completed items\");
});
\n

Sorting

\n
import { SortDir } from \"nativescript-azure-mobile-apps/query\";
todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Desc).read().then(function(results) {
    // ...
});
\n

Paging

\n
import { SortDir } from \"nativescript-azure-mobile-apps/query\";
todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Asc).skip(2).top(3).read().then(function(results) {
    // Skips 2 completed tasks and returns the next 3 ordered chronologically by creation. 
});
\n

User Authentication (Social Sign In)

\n

iOS login requirements

\n

In versions 1.0.0 and lower login on iOS leveraged an in-app browser. This will be banned so we needed to\nswitch to SafariViewController which is not "in-app". So we need to be able to switch back and forth between\nthe external browser. The main benefit is this browser can leverage cookies already set by for instance a Facebook\nlogin, so the user doesn't have to enter his credentials again.

\n

It's a bit of work, but it's a one time effort and should take you about 5 minutes to complete these steps:

\n
Custom URL Scheme
\n

Switching to the external browser is not a problem, but switching back requires you to configure a 'Custom URL Scheme'.\nOpen app/App_Resources/iOS/Info.plist and add:

\n
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my.bundle.id</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>x-msauth-tns-azure-sample</string>
    </array>
  </dict>
</array>
\n

Make sure the Custom URL Scheme string x-msauth-tns-azure-sample above is unique on the device of the user,\nso including your bundle id would be a good start (replace the dots by dashes).

\n

Also, replace my.bundle.id by your bundle id.

\n
Add ALLOWED EXTERNAL REDIRECT URLS
\n

Add x-msauth-tns-azure-sample://easyauth.callback to the 'ALLOWED EXTERNAL REDIRECT URLS' field in these screenshots of your Azure backend.

\n

Make sure to replace x-msauth-tns-azure-sample by your own Custom URL Scheme.

\n
App Delegate wiring
\n

Now that your app can be called from the external party it still can't switch back to the foreground unless\nyou wire up a method in the App Delegate. Don't worry, this plugin takes care of that for you, the only thing\nyou need to do is add this line just before app.start() in app.js / app.ts:

\n
// add this
require(\"nativescript-azure-mobile-apps/client\").MobileServiceClient.configureClientAuthAppDelegate();

// something like this is already there
application.start({ moduleName: \"main-page\" });
\n
Passing the URL Scheme to login
\n

Note that calling login has changed a bit; you now need to pass a second parameter to this function to use the\nnew login mechanism. Failing to do so will fall back to the deprecated in-app browser authentication method.\nMake sure to replace x-msauth-tns-azure-sample by the scheme you configured in Info.plist before.\nYou can leave it out if you only target Android.

\n
import { AuthenticationProvider } from \"nativescript-azure-mobile-apps/user\";
client.login(AuthenticationProvider.Google, \"x-msauth-tns-azure-sample\").then((user) => {  
    console.log(`Logged In! UserID:${user.userId}`);
}, (e) => {
    console.log(\"Error Logging in!\", e);
});
\n

Once authenticated the userId and token are cached so you can login by simply calling:

\n
client.loginFromCache(); // Will return true if there are cached credentials and will setup the client accordingly
\n

If you want to get additional information about the user (like provider token, name, email, profile photo etc.) you can do this by calling getProviderCredentials():

\n
client.user.getProviderCredentials().then((result) => {
    console.log(`Surname: ${result.surname}`);
    console.log(`Given Name: ${result.givenName}`);
    console.log(`Name: ${result.name}`);
});
\n

Note: Since each provider provides different amount of details (also depends on what you have authorized in the Azure portal),\nif you are looking for some specific information, you should check the claims property of the result.\nIt is a dictionary containing all the information that is returned from Azure.

\n

If you want to remove the cached authentication info you should use:

\n
import { MobileServiceUser } from \"nativescript-azure-mobile-apps/user\";
MobileServiceUser.clearCachedAuthenticationInfo();
\n

Push Notifications

\n

NOTE: In order to work with push notifications you also need to install the nativescript-plugin-firebase plugin.\nYou can do this by running the following command:

\n
tns plugin add nativescript-plugin-firebase
\n

When prompted answer Yes to use the plugin in Push Only setup (in case you won't be using anything from the Firebase plugin)\nYou can read more on how to use the firebase push only setup here.

\n

Register

\n

You need to call the push register with Azure in the onPushTokenReceivedCallback by passing the registration token\nreturned by the plugin.

\n
import { messaging } from \"nativescript-plugin-firebase/messaging\";

messaging.registerForPushNotifications({
    onPushTokenReceivedCallback: (token) => {
        client.push.register(token)
            .then(() => { console.log(\"Azure Register OK!\", client.push.installationId); })
            .catch((e) => { console.error(e); });
    }
});
\n

Register with a template

\n

If you want to use a custom template for the notifications, you can use the registerWithTemplate method to pass\nyour template name and body.

\n
import { messaging } from \"nativescript-plugin-firebase/messaging\";

let pushTemplates = {};
pushTemplates[platform.platformNames.android] = \"{\\\"data\\\":{\\\"message\\\":\\\"$(param)\\\"}}\";
pushTemplates[platform.platformNames.ios] = \"{\\\"aps\\\":{\\\"alert\\\":\\\"$(param)\\\"}}\";

messaging.registerForPushNotifications({
    onMessageReceivedCallback: (message) => {
        console.log(message);
    },
    onPushTokenReceivedCallback: (token) => {
        client.push.registerWithTemplate(token, \"MyTemplate\", pushTemplates[platform.device.os])
            .then(() => { console.log(\"Azure Register OK!\", client.push.installationId); })
            .catch((e) => { console.error(e); });
    },
});
\n

Unregister

\n
import { messaging } from \"nativescript-plugin-firebase/messaging\";

messaging.unregisterForPushNotifications()
    .then(() => {
        console.log(\"Device Unregister OK!\");
        client.push.unregister()
            .then(() => console.log(\"Azure Unregister OK!\"))
            .catch((e) => console.log(e));
    })
    .catch((e) => { console.error(e); });
\n

Demos

\n

This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-azure-mobile-apps
$ cd nativescript-azure-mobile-apps
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@erichlz/nativescript-pseudo-bubble-notification":{"name":"@erichlz/nativescript-pseudo-bubble-notification","version":"1.1.2","license":"Apache-2.0","readme":"

@erichlz/nativescript-pseudo-bubble-notification

\n
ns plugin add @erichlz/nativescript-pseudo-bubble-notification
\n

Usage

\n

this plugin is using only with angular

\n
import { PseudoBubbleNotification, ETYPE_INIT_POSITION, OptionsNotification } from '@erichlz/nativescript-pseudo-bubble-notification';
\n
  baseShowBubble(position, posName) {
    PseudoBubbleNotification.showBubbleFloating({
      image: '~/plugin-demos/hause.png',
      onTap: () => {
        console.log('on Tap Bubble: ', posName);
        console.log('test pseudo-bubble-notification!');
      },
      position: position,
        text:\"1\";
        show:true;
    }, {
      text:\"test message\";
      backgroundColor:\"blue\";
      textColor:\"white\";
      timeOpenShow:1000;
      timeCloseShow:3000;
    });
  }
\n

  BubbleWhitSpecificPosition(){
    PseudoBubbleNotification.showBubbleFloating({
      image: '~/plugin-demos/hause.png',
      onTap: () => {
        console.log('on Tap Bubble: Specific Position');
        console.log('test pseudo-bubble-notification!');
      },
      positionX: 100,
      positionY: 140
    });
  }
\n
  BubbleWhitNotification(){
    const options:OptionsNotification = {
      channelId: 'Chanel01',
\t\t  contentText: 'Body Content Notification',
\t\t  titleNotification: 'Title',
      notifyId: 111,
      optionBubble: {
        image: '~/plugin-demos/hause.png',
        onTap: () => {
          console.log('on Tap Bubble ');
          console.log('test pseudo-bubble-notification!');
        },
      },    
    } 

    PseudoBubbleNotification.showNotification(options)

    PseudoBubbleNotification.showNotification(options,  {
      text:\"test message\";
      backgroundColor:\"blue\";
      textColor:\"white\";
      timeOpenShow:1000;
      timeCloseShow:3000;
    })
  }
\n

the priorities you can use are as follows:

\n\n

The Position initial you can use are as follows

\n\n
interface OptionsBubble {
  image: string;
  onTap: Function;
  colorClear?: string;
  position?: ETYPE_INIT_POSITION;
  positionY?: number;
  positionX?: number;
}

interface OptionsNotification {
  channelId: string;
  contentText: string;
  titleNotification: string;
  notifyId: number;
  priority?: ETYPE_PRIORITY;
  autoCancel?: boolean;
  colorSmallIcon?: number;
  optionBubble: OptionsBubble;
}

export interface OptionsMessage{
  text:string;
  backgroundColor?:string;
  textColor?:string;
  timeOpenShow?:number;
  timeCloseShow?:number;
}

export interface OptionLabel{
  text:string;
  show:boolean;
  backgroundColor?:string;
  color?:string;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webrtc-plugin":{"name":"nativescript-webrtc-plugin","version":"2.0.0-alpha.22","license":"Apache-2.0","readme":"

NativeScript WebRTC

\n

\"npm\"\n\"npm\"\n\"Build

\n

Uses this for Android and this for iOS.

\n

Installation

\n\n

Android

\n

Add the following to your app.gradle located in app/App_Resources

\n
android {
....
compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
  }
}
\n

How to make a call

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
\n

IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

\n
<webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
<webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
\n

Using Angular ?

\n

Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

\n

Vue

\n
import Vue from 'nativescript-vue';
import WebRTCView from 'nativescript-webrtc-plugin/vue';

Vue.use(WebRTCView);
\n
<WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
<WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
\n

Standard Api :sparkles: New :sparkles:

\n

This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

\n

Basic Api

\n

Caller

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
  const object = args.object;
  const remoteVideoTrack = object.get('remoteVideoTrack');
  remoteStream = object.get('stream');
  const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
  video.videoTrack = remoteVideoTrack;
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type');
  if (type === 'answer') {
    webrtc.handleAnswerReceived({
      sdp: sdp,
      type: type
    });
  } else {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
webrtc.makeOffer();
\n

Callee

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type') as WebRTCSdpType;
  if (type === WebRTCSdpType.ANSWER) {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
// sdp received from the signaling server
webrtc.createAnswerForOfferReceived({
  type: sdp.type,
  sdp: sdp.sdp
});
\n

Using demo

\n

Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

\n
    \n
  1. \n

    Start demo-server by running npm i && node app

    \n
    2. \n
  2. \n

    Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

    \n
    3. \n
  3. \n

    Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

    \n
    4. \n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sec-spec/ns7-lib-ng-oauth-mobile-service":{"name":"@sec-spec/ns7-lib-ng-oauth-mobile-service","version":"1.0.5","license":"Apache-2.0","readme":"

@sec-spec/nativescript-lib-ng-oauth-mobile-service

\n
ns plugin add @sec-spec/nativescript-lib-ng-oauth-mobile-service
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-particle":{"name":"nativescript-particle","version":"2.1.0","license":"Apache-2.0","readme":"

NativeScript Particle plugin

\n

\"NPM\n\"Twitter

\n

\"Particle.io

\n

Prerequisites

\n

Hop on over to the Particle.io store and order any or all of their cool devices.

\n
\n

While developing this plugin and the demo app I used a Photon Kit and it was a joy to work with.

\n

Thanks, Brandon Satrom for sending one over!

\n
\n

Installation

\n
tns plugin add nativescript-particle
\n

iOS 12+ setup

\n

iOS 12 and up requires you to enable 'Access WiFi Information' for your App ID here.

\n

Also, add this to your App_Resources/iOS/app.entitlements (mind the name!) file:

\n
<key>com.apple.developer.networking.wifi-info</key>
<true/>
\n

The demo app has this:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
  <key>com.apple.developer.networking.wifi-info</key>
  <true/>
</dict>
</plist>
\n

Demo app

\n

If you want to just play with your Particle device without writing code yet,\nfollow these steps to install the demo app I've created with NativeScript Core:

\n
git clone https://github.com/EddyVerbruggen/nativescript-particle
cd nativescript-particle/src
npm i
npm run demo.ios # or demo.android
\n
\n

Tip: If you get tired entering your login credentials every time you log in, set the PARTICLE_USERNAME and PARTICLE_PASSWORD properties to reflect your own.

\n
\n

Want to see the demo in action? Check out this short video 📺.

\n

API

\n

All examples below assume you have these imports and instantiated the Particle class:

\n
import { Particle, TNSParticleDevice, TNSParticleEvent } from \"nativescript-particle\";
const particle = new Particle();
\n

startDeviceSetupWizard

\n

To help registering devices to your account (and avoid having to use the Particle CLI) you can add devices to your account right from your app! 😎

\n
particle.startDeviceSetupWizard()
    .then(isSuccessful => console.log(\"Wizard success? \" + isSuccessful));
\n

login

\n

Communication between your app and a device is HTTP (REST) based,\nso the first step is authenticating yourself with the Particle Cloud:

\n
particle.login(
    {
      username: \"my-particle-username@mydomain.com\",
      password: \"my-particle-password\"
    })
    .then(() => console.log(\"Login successful\"))
    .catch(error => console.log(`Login error: ${error}`));
\n

loginWithToken

\n

Alternatively, you can login with an access token.

\n
particle.loginWithToken(\"the_token\");
\n

logout

\n

Once done interacting with your device(s) it's best to log out as this will do a little cleanup in the plugin and underlying SDK.

\n

There's no reason not to because it couldn't be easier:

\n
particle.logout();
\n

publish

\n

Publish an event from your app to the Particle Device Cloud.

\n
particle.publish(
    \"ledStatusApp123\", // the event name
    \"ON\", // the event data (string)
    true, // isPrivate (default true)
    30 // ttl (default 60)
);
\n

subscribe

\n

Subscribe to the firehose of public events, plus the private events published by devices one owns.\nYou really want to use a unique prefix, otherwise you'll receive a lot of data (not only from your own devices!).

\n
particle.subscribe(
    \"ledStatusApp123\",
    (event: TNSParticleEvent) => console.log(`Got a ledStatus event for App 123 from the Particle Cloud: ${JSON.stringify(event)}`));
\n

unsubscribe

\n

To stop receiving published events, unsubscribe from the events. Make sure the prefix is equal to the one you previously subscribed with.

\n
particle.unsubscribe(\"ledStatusApp123\");
\n

listDevices

\n

Make sure you've claimed a device in your Particle account, then do this to list them in your app:

\n
particle.listDevices()
    .then((devices: Array<TNSParticleDevice>) => {
      if (devices.length === 0) {
        console.log(\"No devices have been claimed in this account.\");
      } else {
        console.log(\"Devices fetched.. now do something neat with 'em.\");
      }
    })
    .catch(error => console.log(`Error fetching devices: ${error}`));
\n

The returned list of TNSParticleDevice objects has these properties and functions:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringThe unique ID of this device.
namestringThe given name of this device.
statusstringThe current status of the device, usually normal.
connectedbooleanWhether or not the device is currently connected..
typeTNSParticleDeviceTypeOne of Unknown, Core, Photon, P1, Electron, RaspberryPi, DigistumpOak, RedBearDuo, Bluz.
functionsArray<string>The list of functions currently available on the device. You can invoke these with callFunction (see below).
variablesArray<TNSParticleDeviceVariable>The list of variables currently available on the device. You can get their values with getVariable (see below).
\n

<device>.rename

\n

You can change the device name right from your app! 💪

\n
const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

myDevice.rename(\"rocket_bubble\")
    .then(() => console.log(\"Device renamed\"))
    .catch(error => console.log(`Error renaming the device: ${error}`));
\n

<device>.callFunction

\n

You can invoke any of the functions you discovered on the device.

\n

As an example let's assume you've flashed this code tutorial to your device,\nso there's a led function which takes 1 argument: the value must be either "on", or "off":

\n
const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

myDevice.callFunction(\"led\", \"on\")
    .then(result => console.log(`Result: ${result}`))
    .catch(error => console.log(`Error in callFunction: ${error}`));
\n

What if you have a function which takes multiple arguments? Let's assume you're using the tinker app and want to set "D7" to "HIGH" via the "digitalWrite" function:

\n
myDevice.callFunction(\"digitalWrite\", \"D7\", \"HIGH\")
    .then(result => console.log(`Result: ${result}`))
    .catch(error => console.log(`Error in callFunction: ${error}`));
\n

<device>.getVariable

\n

Getting a variable is quite similar to callFunction.

\n

Let's say you have a variable named "analogvalue", then this will give you the current state of that variable:

\n
const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

myDevice.getVariable(\"analogvalue\")
    .then(result => console.log(`Result: ${result}`))
    .catch(error => console.log(`Error in getVariable: ${error}`));
\n

<device>.subscribe

\n

You can get notified in your app in case an app on one of your devices publishes an event.

\n

To suppress noise you can filter those events by supplying a prefix, in this case my-prefix-, so events like my-prefix-temp or my-prefix-sensorOn are caught:

\n
const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

myDevice.subscribe(
    \"my-prefix-\",
    (event: TNSParticleEvent) => console.log(`device event: ${JSON.stringify(event)}`));
\n

<device>.unsubscribe

\n

To stop receiving published events from your devices, unsubscribe from the events. Make sure the prefix is equal to the one you previously subscribed with.

\n
myDevice.unsubscribe(\"my-prefix-\");
\n

<device>.unclaim

\n

Removes this device from your account.

\n
myDevice.unclaim();
\n

Thanks!

\n

markoImake for adding a few very cool features.

\n

Happy IoT'ing! 🕹🤖🚪🖲💡📸🎙⛈🚦🛎🔊

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediafilepicker":{"name":"nativescript-mediafilepicker","version":"4.0.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Build

\n

nativescript-mediafilepicker

\n

A complete file picker solution for NativeScript. You will be able to pickup any types of file. Capturing image, video & audio are supported. It's a combination features of nativescript-imagepicker and nativescript-camera plugin with some extended features using following native libaries:

\n\n

Old version (v1.X) can be found from this branch

\n

Features:

\n\n

Limitations

\n\n

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

\n

NativeScript Version Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NS Versionnativescript-mediafilepicker versionInstall commandDocs
^7.0.0^4.0.0ns plugin add nativescript-mediafilepickerThis page
^6.0.0^3.0.0tns plugin add nativescript-mediafilepicker@^3.0.0Here
\n

Installation (NS 7)

\n
ns plugin add nativescript-mediafilepicker
\n

Usage (NS 7) (Please check demo project for details)

\n

Import

\n

JavaScript:

\n
var mPicker = require(\"nativescript-mediafilepicker\");
var mediafilepicker = new mPicker.Mediafilepicker();
\n

TS:

\n
import { Mediafilepicker, ImagePickerOptions, VideoPickerOptions, AudioPickerOptions, FilePickerOptions } from 'nativescript-mediafilepicker';
\n

Image File Picker

\n
let options: ImagePickerOptions = {
    android: {
        isCaptureMood: false, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 10,
        isNeedFolderList: true
    }, ios: {
        isCaptureMood: false, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 10
    }
};

let mediafilepicker = new Mediafilepicker();
mediafilepicker.openImagePicker(options);

mediafilepicker.on(\"getFiles\", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

// for iOS iCloud downloading status
mediafilepicker.on(\"exportStatus\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"error\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"cancel\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});
\n

Video File Picker

\n
let allowedVideoQualities = [];

if (app.ios) {
    allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh];  // get more from here: https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
}

let options: VideoPickerOptions = {
    android: {
        isCaptureMood: false, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 2,
        isNeedFolderList: true,
        maxDuration: 20,

    },
    ios: {
        isCaptureMood: false, // if true then camera will open directly.
        videoMaximumDuration: 10,
        allowedVideoQualities: allowedVideoQualities
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openVideoPicker(options);

mediafilepicker.on(\"getFiles\", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

// for iOS iCloud downloading status
mediafilepicker.on(\"exportStatus\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"error\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"cancel\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});
\n

Audio File Picker

\n
let options: AudioPickerOptions = {
    android: {
        isCaptureMood: false, // if true then voice recorder will open directly.
        isNeedRecorder: true,
        maxNumberFiles: 2,
        isNeedFolderList: true,
        maxSize: 102400 // Maximum size of recorded file in bytes. 5900 = ~ 1 second
    },
    ios: {
        isCaptureMood: false, // if true then voice recorder will open directly.
        maxNumberFiles: 5,
        audioMaximumDuration: 10,
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openAudioPicker(options);

mediafilepicker.on(\"getFiles\", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on(\"error\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"cancel\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});
\n

Custom File Picker

\n
let extensions = [];

if (app.ios) {
    extensions = [kUTTypePDF, kUTTypeText]; // you can get more types from here: https://developer.apple.com/documentation/mobilecoreservices/uttype
} else {
    extensions = ['txt', 'pdf'];
}

let options: FilePickerOptions = {
    android: {
        extensions: extensions,
        maxNumberFiles: 2
    },
    ios: {
        extensions: extensions,
        multipleSelection: true
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openFilePicker(options);

mediafilepicker.on(\"getFiles\", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on(\"error\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on(\"cancel\", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});
\n

Usage in Angular

\n
mediafilepicker.on(\"getFiles\", event => {
\tthis._ngZone.run(() => {
\t\t// do your stuff here
\t\t// any UI changes will be reflected
\t});
});
\n

All Methods

\n
openImagePicker(params: ImagePickerOptions): void;
openVideoPicker(params: VideoPickerOptions): void;
openAudioPicker(params: AudioPickerOptions): void;
openFilePicker(params: FilePickerOptions): void;

// iOS only
copyPHImageToAppDirectory(rawData: PHAsset, fileName: any): Promise<{}>;
copyPHVideoToAppDirectory(asset: AVURLAsset, fileName: any): Promise<{}>;
convertPHImageToUIImage(rawData: PHAsset): Promise<{}>;
copyUIImageToAppDirectory(image: UIImage, fileName: any): Promise<{}>;
copyMPMediaFileToAPPDirectory(mediaItem: MPMediaItem, filename: any): Promise<{}>;
\n

All options

\n
export interface ImagePickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedCamera?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
    };
    ios?: {
        isCaptureMood?: boolean;
        isNeedCamera?: boolean;
        maxNumberFiles?: number;
        hostView?: View;
    };
}
export interface VideoPickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedCamera?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
        maxDuration?: number;
        videoQuality?: number;
    };
    ios?: {
        isCaptureMood?: boolean;
        maxNumberFiles?: number;
        videoMaximumDuration?: number;
        allowedVideoQualities?: Array<string>; // https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
        hostView?: View;
    };
}
export interface AudioPickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedRecorder?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
        maxSize?: number;
    };
    ios?: {
        isCaptureMood?: boolean;
        maxNumberFiles?: number;
        audioMaximumDuration?: number;
        hostView?: View;
    };
}
export interface FilePickerOptions {
    android?: {
        extensions: Array<string>;
        maxNumberFiles?: number;
    };
    ios?: {
        extensions: Array<string>; // https://developer.apple.com/documentation/mobilecoreservices/uttype
        multipleSelection?: boolean;
        hostView?: View;
    };
}
\n

Screenshots

\n

Android

\n

\"Android\"\n\"Android\"\n\"Android\"\n\"Android\"\n\"Android\"\n\"Android\"

\n

iOS

\n

\"ios\"\n\"ios\"\n\"ios\"\n\"ios\"\n\"ios\"

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webkit-webview":{"name":"nativescript-webkit-webview","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript WebKit WebView

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-webkit-webview
\n

Usage

\n

Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('WebView', () => require('nativescript-webkit-webview').TNSWKWebView);
\n
<WebView src=\"https://www.google.com\"></WebView>
\n

IMPORTANT: Make sure you include xmlns:wk="nativescript-webkit-webview" on the Page tag

\n
<wk:TNSWKWebView src=\"https://www.google.com\"/>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"framework-consumer":{"name":"framework-consumer","version":"1.0.2","license":"Apache-2.0","readme":"

framework-consumer

\n
npm install framework-consumer
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-temporary-key-storage":{"name":"nativescript-temporary-key-storage","version":"1.0.6","license":"MIT","readme":"

NativeScript Temporary Key Storage

\n

I wrote this simple plugin for my use, and it works well for what it's intended for. It temporarily stores a key in an SQLCipher database. The database uses a random encryption key that changes in a predefined period, and it'll keep changing its key for as long as the app is running. Once the user or system kills the app, the user will need to provide his password again.

\n

Installation

\n
tns plugin add nativescript-temporary-key-storage
\n

Usage

\n

Import the plugin:

\n
import { keyStorage, processDb } from 'nativescript-temporary-key-storage';
\n

Storing the key:

\n
keyStorage(myKeyGoesHere, 60000);
\n

Here we're calling the keyStorage function passing two arguments. The first one is the key itself, and the second is the amount of time (milliseconds) you want the database to change its encryption key. This function should be called right after the user logs in, so you can retrieve his key whenever your app needs it.

\n

Getting the key:

\n
let mainKey = {key:\"\"};
let requestKey = new processDb();
    requestKey.getKey(); 
    setTimeout(function() { 
        mainKey.key = requestKey.returnKey();
         if (mainKey.key === \"\"){
       // Do something here!
    } else {
      // Do something else!
    }
    },0);
\n

We need to request the key inside a setTimout function; otherwise, it will return nothing. We also need to check if any key was returned, and that's why we used if (mainKey.key === "") in our example.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-vue-vision":{"name":"@nativescript/template-blank-vue-vision","version":"8.6.3","license":"Apache-2.0","readme":"

NativeScript with Vue for visionOS

\n
ns run visionos --no-hmr
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image":{"name":"nativescript-image","version":"3.0.12","license":"Apache-2.0","readme":"

Welcome to NativeScript imageModule

\n
\n

A NativeScript Plugin for Android apps.

\n
\n

\"Build\n\"npm\"\n\"npm\"\n\"Dependency\n\"peerDependencies

\n\n\n\n

What is nativescript-image?

\n

nativescript-image is a NativeScript plugin for efficiently displaying images on iOS and Android. It uses imageModule on Android and SDWebImage on iOS

\n

How to use nativescript-image?

\n

In vanila NativeScript

\n

From npm

\n
    \n
  1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-image.
    2. \n
  2. Initialize nativescript-image in the launch event of your {N} application by using the following code:
    3. \n
\n

From local repo?

\n
    \n
  1. Clone the repository and go to the root directory on your computer.
    2. \n
  2. Use tsc to transpile the .ts sources: tsc -p.
    3. \n
  3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-imageModule-repo-dir>.
    4. \n
  4. When working with "downsampling" you will need to initialize the image a configuration to the initialize function:
    5. \n
\n
import imageModule = require(\"nativescript-image\");

//do this before creating any image view
imageModule.initialize({ isDownsampleEnabled: true });
\n

Use imageModule in the XML definition of the page as follows:

\n
<Page
    xmlns=\"http://www.nativescript.org/tns.xsd\" 
    xmlns:nativescript-image=\"nativescript-image\">
    <nativescript-image:Img width=\"250\" height=\"250\"
                                      src=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
</Page>
\n

In NativeScript + Angular 2

\n
    \n
  1. Import the TNSImageModule from nativescript-image/angular and add it to the imports of your initial @NgModule, like shown here.
    2. \n
  2. As described above make sure to initialize the nativescript-image plugin in the launch event of your {N} application.
    3. \n
\n

Examples

\n

You can refer the demo-angular folder of the repo for runnable {N} project that demonstrates the nativescript-image plugin with all of its features in action.

\n

Features

\n

Basic attributes

\n\n

String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

\n
<nativescript-image:Img src=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
\n\n

String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your Img instances.

\n
<nativescript-image:Img placeholderImageUri=\"~/placeholder.jpg\"/>
\n\n

String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the src is not successful.

\n
<nativescript-image:Img failureImageUri=\"~/failure.jpg\"/>
\n

Advanced optional attributes

\n

There are a couple of optional attributes that could be set on the Img instance to achieve advanced behaviors:

\n\n

String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the Img.

\n

*Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your Img instances.

\n
<nativescript-image:Img backgroundUri=\"~/image.jpg\"/>
\n\n

String value used by Img image scale type. This property can be set to:

\n

'center' - Performs no scaling.

\n

'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'centerInside' - Scales the child so that it fits entirely inside the parent.

\n

'fitCenter' - Scales the child so that it fits entirely inside the parent.

\n

'aspectFit' - Scales the child so that it fits entirely inside the parent.

\n

'fitStart' - Scales the child so that it fits entirely inside the parent.

\n

'fitEnd' - Scales the child so that it fits entirely inside the parent.

\n

'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

\n

'fill' - Scales width and height independently, so that the child matches the parent exactly.

\n

'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n

'aspectFill' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

\n
<nativescript-image:Img stretch=\"centerInside\"/>
\n\n

Number value used for the fade-in duration. This value is in milliseconds.

\n
<nativescript-image:Img fadeDuration=\"3000\"/>
\n\n

Number value greater than zero, used as input for the blur function. Larger value means slower processing. For example a value of 10 means that each pixel in the image will be blurred using all adjacent pixels up to a distance of 10.

\n
<nativescript-image:Img blurRadius=\"25\"/>
\n\n

Number value greater than zero, used to scale the image before applying the blur function. Larger value means faster processing. For example a value of 2 means that the image will be scaled by a factor of two before applying blur.

\n
<nativescript-image:Img blurDownSampling=\"2\"/>
\n\n

Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

\n

Note: In some layout scenarios it is necessary to set the verticalAlignment of the Img to 'top' or 'bottom' in order to "anchor" the img and achieve dynamic sizing.

\n
<nativescript-image:Img aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
\n\n

Number value used as the downsampled width of the imageModule drawable.

\n
<nativescript-image:Img decodeWidth=\"100\"/>
\n\n

Number value used as the downsampled width of the imageModule drawable.

\n
<nativescript-image:Img decodeHeight=\"100\"/>
\n\n

Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

\n
<nativescript-image:Img progressiveRenderingEnabled=\"true\"/>
\n\n

Boolean value used for showing or hiding the progress bar.

\n
<nativescript-image:Img showProgressBar=\"true\"/>
\n\n

String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

\n
<nativescript-image:Img progressBarColor=\"blue\"/>
\n\n

Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

\n
<nativescript-image:Img roundAsCircle=\"true\"/>
\n\n

Number value used as radius for rounding the image's corners.

\n
<nativescript-image:Img roundedCornerRadius=\"50\"/>
\n\n

Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-image:Img roundBottomRight=\"true\"/>
\n\n

Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-image:Img roundBottomLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-image:Img roundTopLeft=\"true\"/>
\n\n

Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

\n
<nativescript-image:Img roundTopRight=\"true\"/>
\n\n

Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

\n
<nativescript-image:Img autoPlayAnimations=\"true\"/>
\n\n

Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.

\n
<nativescript-image:Img tapToRetryEnabled=\"true\"/>
\n

Events

\n\n

This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

\n
<nativescript-image:Img finalImageSet=\"onFinalImageSet\"/>
\n

JavaScript:

\n
function onFinalImageSet(args) {
    var imageModuleEventData = args;
    var img = imageModuleEventData.object;
}
exports.onFinalImageSet = onFinalImageSet;
\n

TypeScript:

\n
import {Img, FinalEventData } from \"nativescript-image\";

export function onFinalImageSet(args: FinalEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the fetch of the final image failed.

\n
<nativescript-image:Img failure=\"onFailure\"/>
\n

JavaScript:

\n
function onFailure(args) {
    var img = args.object;
}
exports.onFailure = onFailure;
\n

TypeScript:

\n
import {Img, FailureEventData } from \"nativescript-image\";

export function onFailure(args: FailureEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after any intermediate image has been set.

\n
<nativescript-image:Img intermediateImageSet=\"onIntermediateImageSet\"/>
\n

JavaScript:

\n
function onIntermediateImageSet(args) {
    var img = args.object;
}
exports.onIntermediateImageSet = onIntermediateImageSet;
\n

TypeScript:

\n
import {Img, IntermediateEventData } from \"nativescript-image\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the fetch of the intermediate image failed.

\n
<nativescript-image:Img intermediateImageFailed=\"onIntermediateImageFailed\"/>
\n

JavaScript:

\n
function intermediateImageFailed(args) {
    var img = args.object;
}
exports.intermediateImageFailed = intermediateImageFailed;
\n

TypeScript:

\n
import {Img, FailureEventData } from \"nativescript-image\";

export function intermediateImageFailed(args: FailureEventData) {
    var img = args.object as Img;
}
\n\n

This event is fired before the image request is submitted.

\n
<nativescript-image:Img submit=\"onSubmit\"/>
\n

JavaScript:

\n
function onSubmit(args) {
    var img = args.object;
}
exports.onSubmit = onSubmit;
\n

TypeScript:

\n
import {Img, EventData } from \"nativescript-image\";

export function onSubmit(args: EventData) {
    var img = args.object as Img;
}
\n\n

This event is fired after the controller released the fetched image.

\n
<nativescript-image:Img release=\"onRelease\"/>
\n

JavaScript:

\n
function onRelease(args) {
    var img = args.object;
}
exports.onRelease = onRelease;
\n

TypeScript:

\n
import {Img, EventData } from \"nativescript-image\";

export function onRelease(args: EventData) {
    var img = args.object as Img;
}
\n

Event arguments

\n

All events exposed by 'nativescript-image' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

\n\n

Instances of this class are provided to the handlers of the finalImageSet.

\n
import {Img, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-image\";

export function onFinalImageSet(args: FinalEventData) {
    var info: ImageInfo  = args.imageInfo;
    var animatable: AnimatedImage = args.animatable;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
}
\n\n

Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

\n
import {Img, FailureEventData, imageModuleError } from \"nativescript-image\";

export function onFailure(args: FailureEventData) {
    var error: imageModuleError = args.error;
    var message: string = error.getMessage();
    var type: string = error.getErrorType();
    var fullError: string = error.toString();
}
\n\n

Instances of this class are provided to the handlers of the intermediateImageSet.

\n
import {Img, IntermediateEventData, ImageInfo } from \"nativescript-image\";

export function onIntermediateImageSet(args: IntermediateEventData) {
    var info: ImageInfo  = args.imageInfo;
    var quality: number = info.getQualityInfo().getQuality();
    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
\n\n

Instances of this class are provided to the handlers of the release and submit.

\n
import {Img, EventData } from \"nativescript-image\";

export function onSubmit(args: EventData) {
    var img = args.object as Img;
}
\n

Cache

\n

The nativescript-image {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

\n

'Refresh' the 'src'

\n

Not so rarely you may have a scenario where the actual image on your remote service from the src of the Img has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the src by calling the updateImageUri():

\n
// 'img' is the instance the 'Img' in the project.
img.updateImageUri();
\n

Clear everything from the cache

\n

Managing the caches in nativescript-image is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

\n
var imageModuleModel = require(\"nativescript-image\");

var imagePipeLine = imageModuleModel.getImagePipeline();
\n\n
imagePipeLine.clearCaches();
\n\n
imagePipeLine.clearMemoryCaches();
\n\n
imagePipeLine.clearDiskCaches();
\n

Evict all images with a specific URI from the cache

\n

If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (src). Evicting is done again via the ImagePipeline:

\n
var imageModuleModel = require(\"nativescript-image\");

var imagePipeLine = imageModuleModel.getImagePipeline();
\n\n
imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
\n\n
imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
\n

Manually shut down the native imageModule library

\n

In very very rare occasions the native Android imageModule library may experience strange memory leak issues, in such scenarios as a last resort you may want to "shut down" the library forcing all of the managed memory to possibly be released. You can do that by calling the shutDown function exposed by the nativescript-image module, one good application lifecycle event to call it inside may be in the exit event of the application:

\n
import * as app from \"application\";
import * as imageModuleModule from \"nativescript-image\";

if (app.android) {
    app.on(app.exitEvent, (args) => {
        imageModuleModule.shutDown();
    });
}
\n

Sample Screenshots

\n

All of the images are sample images for showcasing purposes.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
\"Placeholder\"Transition
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 3 - Image shown successfully from srcSample 4 - 'Failure' image shown
\"Successfully\"Successfully
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gameanalytics":{"name":"nativescript-gameanalytics","version":"3.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"MIT

\n

NativeScript-GameAnalytics

\n

NativeScript plugin for the GameAnalytics SDK for Android and iOS.

\n

Native Libraries:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
GA-SDK-ANDROIDGA-SDK-IOS
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

NativeScript (only 3.0+)

\n

tns plugin add nativescript-gameanalytics

\n

Usage

\n
import {
    GameAnalyticsSDK as GameAnalytics,
    EGAResourceFlowType,
    EGAProgressionStatus,
    EGAErrorSeverity,
    EGAGender
} from 'nativescript-gameanalytics';

// To initialize the SDK...

public initializeGameAnalytics() {
    GameAnalytics.initialize(\"[INSERT_GAME_KEY]\", \"[INSERT_SECRET_KEY]\");
}

// To send events...
public sendEvent() {
    GameAnalytics.addDesignEvent({
        eventId: \"design:event\"
    });
}
\n

For more documentation click here.

\n

Changelog

\n\n

3.0.1

\n\n

3.0.0

\n\n

2.1.3

\n\n

2.1.2

\n\n

2.1.1

\n\n

2.1.0

\n\n

2.0.4

\n\n

2.0.3

\n\n

2.0.2

\n\n

2.0.1

\n\n

2.0.0

\n\n

1.1.8

\n\n

1.1.7

\n\n

1.1.6

\n\n

1.1.5

\n\n

1.1.4

\n\n

1.1.3

\n\n

1.1.2

\n\n

1.1.1

\n\n

1.1.0

\n\n

1.0.16

\n\n

1.0.15

\n\n

1.0.14

\n\n

1.0.13

\n\n

1.0.12

\n\n

1.0.11

\n\n

1.0.10

\n\n

1.0.9

\n\n

1.0.8

\n\n

1.0.7

\n\n

1.0.6

\n\n

1.0.5

\n\n

1.0.4

\n\n

1.0.3

\n\n

1.0.2

\n\n

1.0.1

\n\n

1.0.0

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-https-thelonecabbage":{"name":"nativescript-https-thelonecabbage","version":"2.2.0","license":"MIT","readme":"

NativeScript-HTTPS

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

The definitive way to hit HTTP based APIs in Nativescript.

\n

Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

\n
\n

Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

\n
\n

A drop-in replacement for the default http module.

\n

Features

\n\n

FAQ

\n
\n

What the flip is SSL pinning and all this security mumbo jumbo?

\n
\n

How to make your apps more secure with SSL pinning.

\n
\n

Do I have to use SSL pinning?

\n
\n

No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

\n

Demo

\n
git clone https://github.com/EddyVerbruggen/nativescript-https
cd nativescript-https/src
npm run demo.ios
npm run demo.android
\n

Installation

\n

Add tns-platform-declarations for Android and iOS to your references.d.ts!

\n
/// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
/// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
\n

We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

\n

Install the plugin:

\n
tns plugin add nativescript-https
\n

Examples

\n

Hitting an API using GET method

\n
import * as Https from 'nativescript-https'
Https.request({
\turl: 'https://httpbin.org/get',
\tmethod: 'GET',
\ttimeout: 30 // seconds (default 10)
}).then(function(response) {
\tconsole.log('Https.request response', response)
}).catch(function(error) {
\tconsole.error('Https.request error', error)
})
\n

Configuration

\n

Installing your SSL certificate

\n

Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

\n

\"Installing

\n

Enabling SSL pinning

\n
import { knownFolders } from 'file-system'
import * as Https from 'nativescript-https'
let dir = knownFolders.currentApp().getFolder('assets')
let certificate = dir.getFile('httpbin.org.cer').path
Https.enableSSLPinning({ host: 'httpbin.org', certificate })
\n

Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

\n

Disabling SSL pinning

\n
import * as Https from 'nativescript-https'
Https.disableSSLPinning()
\n

All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

\n

useLegacy

\n

There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

\n\n

Cookie

\n

By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

\n

Enabling Cache

\n
import { knownFolders, path } from '@nativescript/core/file-system';
import * as Https from 'nativescript-https'
Https.setCache({
    diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
    diskSize: 10 * 1024 * 1024 // 10 MiB
});

/// later on when calling your request you can use the cachePolicy option
\n

Multipart form data

\n

If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

\n
{
\tdata: any
    parameterName: string,
    fileName?: string
    contentType?: string
}
\n

if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

\n

Options

\n
export interface HttpsSSLPinningOptions {
\thost: string
\tcertificate: string
\tallowInvalidCertificates?: boolean
\tvalidatesDomainName?: boolean
\tcommonName?: string
}
import { HttpRequestOptions } from 'tns-core-modules/http';
export interface HttpsRequestOptions extends HTTPOptions{
\tuseLegacy?: boolean
\tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
\tonProgress?: (current: number, total: number) => void
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SSLPinning OptionDescription
host: stringThis must be the request domain name eg sales.company.org.
commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
certificate: stringThe uri path to your .cer certificate file.
allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Requests OptionDescription
useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
`cachePolicy?: 'noCache''onlyCache'
onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
\n

Webpack / bundling

\n

Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

\n

iOS Troubleshooting

\n
\n

Please educate yourself on iOS's App Transport Security before starting beef!

\n
\n

If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
\n
\n

This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

\n
\n

Android troubleshooting

\n

If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

\n

Thanks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhoWhy
Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tooltip":{"name":"nativescript-tooltip","version":"2.1.2","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript ToolTip

\n

Install

\n

tns plugin add nativescript-tooltip

\n

Usage

\n

TypeScript

\n
import {ToolTip} from \"nativescript-tooltip\";
const tip = new ToolTip(view,{text:\"Some Text\"});
tip.show();  //.hide()
\n

JavaScript

\n
const ToolTip = require(\"nativescript-tooltip\").ToolTip;
const tip = new ToolTip(view,{text:\"Some Text\"});
tip.show();  //.hide()
\n

Styling

\n

Android

\n

Add the following to your styles.xml in app/App_Resources/Android/values

\n
<!-- Custom ToolTip -->

    <style name=\"CustomToolTipLayoutStyle\" parent=\"ToolTipLayoutDefaultStyle\">
        <item name=\"ttlm_backgroundColor\">#FFFF00</item>
        <item name=\"android:textColor\">#000000</item>
    </style>
\n

IOS

\n

TypeScript

\n
import {ToolTip} from \"nativescript-tooltip\";
const tip = new ToolTip(view,{text:\"Some Text\",backgroundColor:\"pink\",textColor:\"black\"});
tip.show();  //.hide()
\n

JavaScript

\n
const ToolTip = require(\"nativescript-tooltip\").ToolTip;
const tip = new ToolTip(view,{text:\"Some Text\",backgroundColor:\"pink\",textColor:\"black\"});
tip.show();  //.hide()
\n

Config

\n
const config = {
  position?: \"left\" | \"up\" | \"right\" | \"down\" | \"top\" | \"bottom\";;
  text: string;
  viewType?: \"native\";
  duration?: number;
  fadeDuration?: number,
  width?: number;
  delay?: number;
  hideArrow?: boolean;
  backgroundColor?: string;
  textColor?: string;
  style?:string;
}
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidIOS
\"ss\"\"splash\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@kopis/eamplugin":{"name":"@kopis/eamplugin","version":"1.0.43","license":"Apache-2.0","readme":"

@kopis/eamplugin

\n
ns plugin add @kopis/eamplugin
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-zoom":{"name":"nativescript-image-zoom","version":"3.0.3","license":"Apache-2.0","readme":"

NativeScript Image Zoom

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-image-zoom
\n

Configuration

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-image-zoom" on the\nPage element

\n
<ui:ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"/>
\n

Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
\n
<ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
maxZoom5number
  • - [ ]
minZoom1number
  • - [ ]
zoomScale1number
  • - [ ]
IOS only
srcstring
  • - [x]
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@armpogart/nativescript-toasty":{"name":"@armpogart/nativescript-toasty","version":"2.0.2","license":"MIT","readme":"

NativeScript-Toasty

\n

\"npm\"\n\"npm\"

\n

Install

\n

tns plugin add nativescript-toasty

\n

Usage

\n

TypeScript

\n
import { Toasty } from 'nativescript-toasty';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();

// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  android: { yAxisOffset: 100 },
  ios: {
    anchorView: someButton.ios, // must be the native iOS view instance (button, page, action bar, tabbar, etc.)
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24
  }
});

toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();
\n

JavaScript

\n
var toasty = require('nativescript-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n

  constructor(opts: ToastyOptions);

  position: ToastPosition;

  duration: ToastDuration;

  textColor: Color | string;

  backgroundColor: Color | string;

  /**
   * Show the Toasty
   */
  show();

  /**
   * Cancels the Toasty
   */
  cancel();

/**
 * Sets the Toast position.
 */
  setToastPosition(value: ToastPosition): Toasty;

/**
 * Sets the Toast duration.
 */
  setToastDuration(value: ToastDuration): Toasty;

/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(value: Color | string): Toasty;

/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(value: Color | string): Toasty;
\n
export enum ToastDuration {
  'SHORT',
  'LONG'
}

export enum ToastPosition {
  'BOTTOM'
  'CENTER'
  'TOP'
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Position of the Toast.
   */
  position?: ToastPosition;

  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;

  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;

  /**
   * Android specific configuration options.
   */
  android?: { yAxisOffset: number };

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-folding-list-view":{"name":"nativescript-folding-list-view","version":"1.2.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

\"NativeScript+Ramotion=❤️\"

\n

A NativeScript ListView with foldable cells. Utilizes the wonderfull FoldingCell created by Ramotion!

\n

Screenshot

\n

\"ios\"\n\"android\"

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-folding-list-view

\n

This command automatically installs the necessary files, as well as stores nativescript-folding-list-view as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Instance Methods

\n\n

Usage

\n

You need to add xmlns:flv="nativescript-folding-list-view" to your page tag, and then simply use <flv:FoldingListView/> in order to add the widget to your page. Use <flv:FoldingListView.foregroundItemTemplate/> to specify the template for folded cells and <flv:FoldingListView.containerItemTemplate/> to specify the template for unfolded cells:

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:flv=\"nativescript-folding-list-view\"
      navigatingTo=\"navigatingTo\" class=\"page\">

    <Page.actionBar>
        <ActionBar title=\"Folding LV\" icon=\"\" class=\"action-bar\">
        </ActionBar>
    </Page.actionBar>

    <GridLayout>
        <flv:FoldingListView items=\"{{ items }}\" foldsCount=\"5\" foldedRowHeight=\"95\" 
            detailDataLoader=\"detailDataLoader\">
            <flv:FoldingListView.foregroundItemTemplate>
                <GridLayout columns=\"75, *\" class=\"folded-cell\">
                    <GridLayout row=\"0\" col=\"0\" rows=\"*, auto, auto, *\" class=\"item-nbr\">
                        <Label row=\"1\" text=\"Item\"/>
                        <Label row=\"2\" text=\"{{ '#' + item }}\"/>
                        <ActivityIndicator row=\"3\" busy=\"{{ isBusyIn }}\" />
                    </GridLayout>
                    <StackLayout col=\"1\" padding=\"10\">
                        <Label class=\"h2\" text=\"My Header\"/>
                        <Label class=\"label\" textWrap=\"true\" text=\"Short description. Tap to see more!\"/>
                    </StackLayout>
                </GridLayout>
            </flv:FoldingListView.foregroundItemTemplate>
            
            <flv:FoldingListView.containerItemTemplate>
                <StackLayout rows=\"auto, *, auto\" class=\"expanded-cell\">
                    <Label class=\"item-nbr\" text=\"{{ 'Item #' + item }}\" />
                    <Label class=\"label\" textWrap=\"true\" text=\"{{ details }}\" />
                    <Button id=\"btn\" class=\"btn btn-primary\" text=\"Click Me!\" />
                </StackLayout>
            </flv:FoldingListView.containerItemTemplate>
        </flv:FoldingListView>
    </GridLayout>
</Page>
\n

Multiple templates

\n

Using mutiple templates is dones the same way as you would in the buil-tin ListView control - the wdiget provides an itemTemplateSelector property that can be either set to a function that returns the correct template key for an item or to a string from which property the value of the key will be pulled. Note that same template key will be used for both the container and foreground views. If you want to have different template only for one type of view, then you can leave the single template for the other one

\n
<flv:FoldingListView id=\"lv\" items=\"{{ items }}\" foldsCount=\"5\" foldedRowHeight=\"95\" 
    loadMoreItems=\"loadMoreItems\" itemLoading=\"itemLoading\" detailDataLoader=\"detailDataLoader\"
    itemTemplateSelector=\"itemTemplateSelector\">
    <flv:FoldingListView.foregroundItemTemplates>
        <template key=\"odd\">
            <GridLayout columns=\"75, *\" class=\"folded-cell\">
                <!-- ... -->
            </GridLayout>
        </template>
        <template key=\"even\">
            <GridLayout columns=\"75, *\" class=\"folded-cell even\">
                <!-- ... -->
            </GridLayout>
        </template>
    </flv:FoldingListView.foregroundItemTemplates>

    <flv:FoldingListView.containerItemTemplates>
        <template key=\"odd\">
            <StackLayout class=\"expanded-cell\">
                <!-- ... -->
            </StackLayout>
        </template>
        <template key=\"even\">
            <StackLayout class=\"expanded-cell even\">
                <!-- ... -->
            </StackLayout>
        </template>
    </flv:FoldingListView.containerItemTemplates>
</flv:FoldingListView>
\n
export function itemTemplateSelector(item: any, index: number, items: any) {
    return (index % 2 === 0 ? \"even\" : \"odd\");
}
\n

Unfolded view height requirements

\n

Note that in order for the widget to function properly the unfolded view height must be more than two times the height of the folded view. In order to ensure this (especially in cases where you load the detail data on demand and do not know exactly the height of the item) it is a good idea to set min-height on the wrapping layout for the unfolded cells.

\n

Using detailDataLoader to load the bound item for the unfolded cells

\n

In many cases when you have complex layout or you want to display many details in the unfolded cells, it is a good practice to not load all that data with your folded cells items. The widget provides a function which you can use to load that data on demand when the user taps to unfold a given cell.

\n
export function detailDataLoader(item: any, index: number) {
    item.set(\"isBusyIn\", true);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            item.details = \"< ... some very long text ... >\";
            resolve(item);

            item.set(\"isBusyIn\", false);
        }, 3000);
    });
}
\n

Note that this simply a bound function, it is not an event! The function should return a Promise that resolves the loaded data from you backend for the given cell.

\n

Having buttons inside the cells (Android)

\n

Under Android there are problems for the ListView android widget to intercept tap evens in cases when you have a Button inside the cells. In order to overcome this you need to subscribe to the itemLoading event and then set the button to not be focusable:

\n
export function itemLoading({ index, view }: ItemEventData) {
    if (isAndroid) {
        // HACK: Button inside the ListView prevents item click
        view.container.getViewById(\"btn\").android.setFocusable(false);
    }
}
\n

Usage in Angular

\n

Currently the Folding List View does not support Angular projects out of the box!

\n

Demos

\n

This repository includes plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-folding-list-view
$ cd nativescript-folding-list-view
$ npm install
$ npm run demo-ios
\n

This will run the NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nota/nativescript-accessibility-ext":{"name":"@nota/nativescript-accessibility-ext","version":"7.0.3","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nested-scrollview":{"name":"nativescript-nested-scrollview","version":"1.1.0","license":"Apache-2.0","readme":"

NativeScript NestedScrollView

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-nested-scrollview
\n

Usage

\n
    <NestedScrollView backgroundColor=\"red\">
      <StackLayout>
      <Label text=\"First\" color=\"white\" />
        <ScrollView orientation=\"vertical\" backgroundColor=\"blue\">
          <Repeater items=\"{{ items }}\">
            <Repeater.itemsLayout>
              <StackLayout orientation=\"vertical\"/>
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
              <StackLayout orientation=\"horizontal\">
                <Label text=\"ID \" />
                <Label text=\"{{ id }}\" />
              </StackLayout>
            </Repeater.itemTemplate>
          </Repeater>
        </ScrollView>
        <Label text=\"Second\" color=\"white\" />
        <ScrollView orientation=\"vertical\" backgroundColor=\"white\">
          <Repeater items=\"{{others}}\">
            <Repeater.itemsLayout>
              <StackLayout orientation=\"vertical\" />
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
              <StackLayout orientation=\"horizontal\">
                <Label text=\"ID \" />
                <Label text=\"{{ id }}\" />
              </StackLayout>
            </Repeater.itemTemplate>
          </Repeater>
        </ScrollView>
        <Label text=\"Third\" color=\"white\" />
        <ScrollView orientation=\"vertical\" backgroundColor=\"yellow\">
          <Repeater items=\"{{ repeaterItems }}\">
            <Repeater.itemsLayout>
              <StackLayout orientation=\"vertical\" />
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
              <StackLayout orientation=\"horizontal\">
                <Label text=\"ID \" />
                <Label text=\"{{ id }}\" />
              </StackLayout>
            </Repeater.itemTemplate>
          </Repeater>
        </ScrollView>
      </StackLayout>
    </NestedScrollView>
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
orientationvertical
scrollBarIndicatorVisibletrue
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidIOS
\"SS\"\"SS\"
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-printer":{"name":"nativescript-printer","version":"3.0.0","license":"MIT","readme":"

NativeScript Printer plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

Think about the environment before printing!

\n
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-printer
\n

Demo app

\n

Want to dive in quickly? Check out the demo! Otherwise, continue reading.

\n

Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

\n

Android screenshots

\n

    

\n

iOS screenshots

\n

    

\n

API

\n

isSupported

\n

Not all devices support printing, so it makes sense to check the device capabilties beforehand.

\n
TypeScript
\n
// require the plugin
import {Printer} from \"nativescript-printer\";

// instantiate the plugin
let printer = new Printer();

printer.isSupported().then((supported) => {
  alert(supported ? \"Yep!\" : \"Nope :'(\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printImage

\n
TypeScript
\n
// let's load an image that we can print. In this case from a local folder.
let fs = require(\"file-system\");
let appPath = fs.knownFolders.currentApp().path;
let imgPath = appPath + \"/res/printer.png\";
let imgSrc = new ImageSource();
imgSrc.loadFromFile(imgPath);

printer.printImage({
  imageSrc: imgSrc
}).then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printPDF

\n
TypeScript
\n
import { knownFolders } from \"tns-core-modules/file-system/file-system\";

printer.printPDF({
  pdfPath: knownFolders.currentApp().path + \"/pdf-test.pdf\"
}).then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

printScreen

\n

Prints the current screen contents. Anything off screen will not be printed.

\n
TypeScript
\n
printer.printScreen().then((success) => {
  alert(success ? \"Printed!\" : \"Not printed\");
}, (error) => {
  alert(\"Error: \" + error);
});
\n

You can also print a specific portion of the screen, which also enables you to print\nviews that are larger than the viewport. This is an example of a non-Angular NativeScript app:

\n

Note\nIf the view is either of the following depending on the size of it's contents it would break into multiple pages.

\n

Label | TextView | HtmlView | WebView

\n
  <StackLayout id=\"printMe\">
    <Label text=\"Print me :)\" />
  </StackLayout>

  <Button text=\"Print\" tap=\"{{ print }}\" />
\n
  public print(args) {
    printer.printScreen({
      view: args.object.page.getViewById(\"printMe\")
    });
  }
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@souriscloud/nativescript-google-maps-sdk":{"name":"@souriscloud/nativescript-google-maps-sdk","version":"3.0.3","license":"MIT","readme":"

NativeScript plugin for the Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling:

\n

Nativescript 7+

\n
tns plugin add @souriscloud/nativescript-google-maps-sdk
\n

Nativescript < 7

\n
tns plugin add nativescript-google-maps-sdk@2.9.1
\n

Setup

\n

See demo code included here

\n

See a live demo here

\n

Configure API Key for Android

\n

Nativescript < 4

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
\n

Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

Nativescript 4+

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) { 
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
    <GridLayout>
        <maps:mapView
            latitude=\"{{ latitude }}\"
            longitude=\"{{ longitude }}\"
            zoom=\"{{ zoom }}\"
            bearing=\"{{ bearing }}\" 
            tilt=\"{{ tilt }}\"
            mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
            padding=\"{{ padding }}\"
            mapReady=\"onMapReady\"  
            markerSelect=\"onMarkerSelect\"
            markerBeginDragging=\"onMarkerBeginDragging\"
            markerEndDragging=\"onMarkerEndDragging\"
            markerDrag=\"onMarkerDrag\"
            cameraChanged=\"onCameraChanged\" 
            cameraMove=\"onCameraMove\"
        />
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

\n

Basic Example

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-google-maps-sdk\");

function onMapReady(args) {
    var mapView = args.object;
    
    console.log(\"Setting a marker...\");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.userData = { index : 1};
    mapView.addMarker(marker);
    
    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

function onCameraMove(args) {
    console.log(\"Camera moving: \"+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;
\n

Custom Info Windows (Beta)

\n
\n

[!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

\n
\n
var mapView = null;

export function onMapReady(args) {
    mapView = args.object;
    mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
    </StackLayout>`;
}
\n

To use custom marker info windows, define a template in your view like so:

\n
<!-- /app/main-page.xml -->
<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
  <GridLayout>
       <maps:mapView mapReady=\"onMapReady\">
            <!-- Default Info Window Template -->       \t\t
            <maps:mapView.infoWindowTemplate>
                <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                    <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                    <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                    <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                    <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                </StackLayout>
            </maps:mapView.infoWindowTemplate>
            <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key=\"testWindow\">
                    <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                        <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                        <Label text=\"Let's Begin!\" className=\"title\" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>
        </maps:mapView>
  </GridLayout>
</Page>
\n

...and set the infoWindowTemplate property like so:

\n
var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';
\n

This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

\n

** Known issue: remote images fail to display in iOS info windows (local images work fine)

\n

Usage with Angular

\n

See Angular demo code included here

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register MapView plugin in order to use in Angular templates
registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)=\"onMapReady($event)\"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"MapView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Angular 8 Support

\n

If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

\n
@ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auth0":{"name":"nativescript-auth0","version":"4.1.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-push-notifications":{"name":"nativescript-ssi-push-notifications","version":"1.4.4","license":"Apache-2.0","readme":"

Push Plugin for NativeScript

\n
\n

This plugin is deprecated. Feel free to use the Firebase Plugin for implementing push notifications in your NativeScript app. If you already have an app that use the Push Plugin, read the migrate-to-firebase doc for initial guidance.

\n
\n

\"Build

\n

The code for the Push Plugin for NativeScript.

\n\n\n\n

Installation

\n

In the Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-push-notifications\n
\n

Configuration

\n

Android

\n
\n

See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

\n
\n\n

The plugin will default to version 12.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion:

\n
    // in the root level of /app/App_Resources/Android/app.gradle:
    project.ext {
        firebaseMessagingVersion = \"+\" // OR the version you wish
    }
\n

iOS

\n\n

Usage

\n

Using the plugin in Android

\n

Add code in your view model or component to subscribe and receive messages (don't forget to enter your Firebase Cloud Messaging Sender ID in the options of the register method):

\n

TypeScript

\n
import * as pushPlugin from \"nativescript-push-notifications\";
private pushSettings = {
    senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
    notificationCallbackAndroid: (stringifiedData: String, fcmNotification: any) => {
        const notificationBody = fcmNotification && fcmNotification.getBody();
        this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
    }
};
pushPlugin.register(pushSettings, (token: String) => {
    alert(\"Device registered. Access token: \" + token);;
}, function() { });
\n

Javascript

\n
var pushPlugin = require(\"nativescript-push-notifications\");
var pushSettings = {
        senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
        notificationCallbackAndroid: function (stringifiedData, fcmNotification) {
            var notificationBody = fcmNotification && fcmNotification.getBody();
            _this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
        }
    };
pushPlugin.register(pushSettings, function (token) {
    alert(\"Device registered. Access token: \" + token);
}, function() { });
\n\n

Using the plugin in iOS

\n

Add code in your view model or component to subscribe and receive messages:

\n

TypeScript

\n
import * as pushPlugin from \"nativescript-push-notifications\";
const iosSettings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
            identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
    notificationCallbackIOS: (message: any) => {
        alert(\"Message received!\\n\" + JSON.stringify(message));
    }
};

pushPlugin.register(iosSettings, (token: String) => {
    alert(\"Device registered. Access token: \" + token);

    // Register the interactive settings
    if(iosSettings.interactiveSettings) {
        pushPlugin.registerUserNotificationSettings(() => {
            alert('Successfully registered for interactive push.');
        }, (err) => {
            alert('Error registering for interactive push: ' + JSON.stringify(err));
        });
    }
}, (errorMessage: any) => {
    alert(\"Device NOT registered! \" + JSON.stringify(errorMessage));
});
\n

Javascript

\n
var pushPlugin = require(\"nativescript-push-notifications\");
var iosSettings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
            identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
    notificationCallbackIOS: function (data) {
        alert(\"message\", \"\" + JSON.stringify(data));
    }
};

pushPlugin.register(iosSettings, function (data) {
    alert(\"Device registered. Access token\" + data);

    // Register the interactive settings
        if(iosSettings.interactiveSettings) {
            pushPlugin.registerUserNotificationSettings(function() {
                alert('Successfully registered for interactive push.');
            }, function(err) {
                alert('Error registering for interactive push: ' + JSON.stringify(err));
            });
        }
}, function() { });
\n\n

API Reference

\n

Methods

\n

register(options, successCallback, errorCallback) - subscribe the device with Apple/Google push notifications services so the app can receive notifications

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionPlatformTypeDescription
senderIDAndroidStringThe Sender ID for the FCM project. This option is required for Android.
notificationCallbackAndroidAndroidFunctionCallback to invoke, when a push is received on Android.
badgeiOSBooleanEnable setting the badge through Push Notification.
soundiOSBooleanEnable playing a sound.
alertiOSBooleanEnable creating a alert.
clearBadgeiOSBooleanEnable clearing the badge on push registration.
notificationCallbackIOSiOSFunctionCallback to invoke, when a push is received on iOS.
interactiveSettingsiOSObjectInteractive settings for use when registerUserNotificationSettings is used on iOS.
\n

The interactiveSettings object for iOS can contain the following:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
actionsArrayA list of iOS interactive notification actions.
categoriesArrayA list of iOS interactive notification categories.
\n

The actions array from the iOS interactive settings contains:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
identifierStringRequired. String identifier of the action.
titleStringRequired. Title of the button action.
activationModeStringSet to either "foreground" or "background" to launch the app in foreground/background and respond to the action.
destructiveBooleanEnable if the action is destructive. Will change the action color to red instead of the default.
authenticationRequiredBooleanEnable if the device must be unlocked to perform the action.
behaviorStringSet if the action has a different behavior - e.g. text input.
\n

The categories array from the iOS interactive settings contains:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
identifierStringRequired. String identifier of the category.
actionsForDefaultContextArrayRequired. Array of string identifiers of actions.
actionsForMinimalContextArrayRequired. Array of string identifiers of actions.
\n

For more information about iOS interactive notifications, please visit the Apple Developer site

\n
var settings = {
    badge: true,
    sound: true,
    alert: true,
    interactiveSettings: {
        actions: [{
            identifier: 'READ_IDENTIFIER',
            title: 'Read',
            activationMode: \"foreground\",
            destructive: false,
            authenticationRequired: true
        }, {
        identifier: 'CANCEL_IDENTIFIER',
            title: 'Cancel',
            activationMode: \"foreground\",
            destructive: true,
            authenticationRequired: true
        }],
        categories: [{
            identifier: 'READ_CATEGORY',
            actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
        }]
    },
    notificationCallbackIOS: function(message) {
        alert(JSON.stringify(message));
    }
};


pushPlugin.register(settings,
    // Success callback
    function(token){
        // Register the interactive settings
        if(settings.interactiveSettings) {
            pushPlugin.registerUserNotificationSettings(function() {
                alert('Successfully registered for interactive push.');
            }, function(err) {
                alert('Error registering for interactive push: ' + JSON.stringify(err));
            });
        }
    },
    // Error Callback
    function(error){
        alert(error.message);
    }
);
\n

unregister(successCallback, errorCallback, options) - unsubscribe the device so the app stops receiving push notifications. The options object is the same as on the register method

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterPlatformTypeDescription
successCallbackiOSFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
successCallbackAndroidFunctionCalled when app is successfully unsubscribed. Has one string parameter with the result.
errorCallbackAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
optionsAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
\n
pushPlugin.unregister(
    // Success callback
    function(result) {
        alert('Device unregistered successfully');
    },
    // Error Callback
    function(errorMessage) {
        alert(errorMessage);
    },
    // The settings from the registration phase
    settings
);
\n

areNotificationsEnabled(successCallback) - check if push notifications are enabled (iOS only, always returns true on Android)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterPlatformTypeDescription
successCallbackiOS/AndroidFunctionCalled with one boolean parameter containing the result from the notifications enabled check.
\n
pushPlugin.areNotificationsEnabled(function(areEnabled) {
        alert('Are Notifications enabled: ' + areEnabled);
    });
\n

Android only

\n

onMessageReceived(callback) DEPRECATED - register a callback function to execute when receiving a notification. You should set this from the notificationCallbackAndroid registration option instead

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
stringifiedDataStringA string containing JSON data from the notification
fcmNotificationObjectiOS/Android
\n

The fcmNotification object contains the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturns
getBody()String
getBodyLocalizationArgs()String[]
getBodyLocalizationKey()String
getClickAction()String
getColor()String
getIcon()String
getSound()String
getTag()String
getTitle()String
getTitleLocalizationArgs()String[]
getTitleLocalizationKey()String
\n

onTokenRefresh(callback) - register a callback function to execute when the old token is revoked and a new token is obtained. Note that the token is not passed to the callback as an argument. If you need the new token value, you'll need to call register again or add some native code to obtain the token from FCM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
callbackFunctionCalled with no arguments.
\n
pushPlugin.onTokenRefresh(function() {
        alert(\"new token obtained\");
});
\n

iOS only

\n

registerUserNotificationSettings(successCallback, errorCallback) - used to register for interactive push on iOS

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
successCallbackFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
errorCallbackFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
\n

Troubleshooting

\n

In case the application doesn't work as expected. Here are some things you can verify

\n

Troubleshooting issues in Android

\n\n

Troubleshooting issues in iOS

\n\n

Android Configuration for using Firebase Cloud Messaging

\n

The nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

\n
    \n
  1. \n

    Add the google-services.json file

    \n

    To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

    \n

    Place the file in your app's App_Resources/Android folder

    \n
    2. \n
  2. \n

    Obtain the FCM Server Key (optional)

    \n

    This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

    \n
    3. \n
\n

Receive and Handle Messages from FCM on Android

\n

The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

\n

The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the notificationCallbackAndroid setting when calling the register method of the plugin.

\n

The behavior of the callback in the module follows the behavior of the FCM service.

\n

Handling Data Messages

\n

The notificationCallbackAndroid method of the plugin is called each time a data notification is received.

\n

If the app is stopped or suspended, NO notification is constructed and placed in the tray. Tapping the app icon launches the app and invokes the notificationCallbackAndroid callback where you will receive the notification data.

\n

If the app is active and in foreground, the notificationCallbackAndroid callback is invoked immediately with the notification data (fcmNotification).

\n

Handling Notification Messages

\n

If the app is active and in foreground, it invokes the notificationCallbackAndroid callback with two arguments (stringifiedData, fcmNotification).

\n

If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the notificationCallbackAndroid callback.

\n

Handling Mixed Messages

\n

Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

\n\n

Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

\n
application.on(application.resumeEvent, function(args) {
    if (args.android) {
        var act = args.android;
        var intent = act.getIntent();
        var extras = intent.getExtras();
        if (extras) {
            // for (var key in extras) {
            //     console.log(key + ' -> ' + extras[key]);
            // }
            var msg = extras.get('someKey');
        }
    }
});
\n

Parameters of the notificationCallbackAndroid Callback

\n

Depending on the notification event and payload, the notificationCallbackAndroid callback is invoked with two arguments.

\n\n

Setting Notification Icon and Color

\n

The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray.

\n

Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

\n
<meta-data
    android:name=\"com.google.firebase.messaging.default_notification_icon\"
    android:resource=\"@drawable/ic_stat_ic_notification\" />
<meta-data
    android:name=\"com.google.firebase.messaging.default_notification_color\"
    android:resource=\"@color/colorAccent\" />
\n
\n

For more info visit the Edit the app manifest article.

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"whocode-nativescript-webrtc":{"name":"whocode-nativescript-webrtc","version":"2.0.7","license":"Apache-2.0","readme":"

NativeScript WebRTC

\n

\"npm\"\n\"npm\"\n\"Build

\n

Uses this for Android and this for iOS.

\n

Installation

\n\n

Android

\n

Add the following to your app.gradle located in app/App_Resources

\n
android {
....
compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
  }
}
\n

How to make a call

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
\n

IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

\n
<webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
<webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
\n

Using Angular ?

\n

Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

\n

Vue

\n
import Vue from 'nativescript-vue';
import WebRTCView from 'nativescript-webrtc-plugin/vue';

Vue.use(WebRTCView);
\n
<WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
<WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
\n

Standard Api :sparkles: New :sparkles:

\n

This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

\n

Basic Api

\n

Caller

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
  const object = args.object;
  const remoteVideoTrack = object.get('remoteVideoTrack');
  remoteStream = object.get('stream');
  const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
  video.videoTrack = remoteVideoTrack;
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type');
  if (type === 'answer') {
    webrtc.handleAnswerReceived({
      sdp: sdp,
      type: type
    });
  } else {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
webrtc.makeOffer();
\n

Callee

\n
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type') as WebRTCSdpType;
  if (type === WebRTCSdpType.ANSWER) {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
// sdp received from the signaling server
webrtc.createAnswerForOfferReceived({
  type: sdp.type,
  sdp: sdp.sdp
});
\n

Using demo

\n

Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

\n
    \n
  1. \n

    Start demo-server by running npm i && node app

    \n
    2. \n
  2. \n

    Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

    \n
    3. \n
  3. \n

    Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

    \n
    4. \n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alokparikh16/sdk":{"name":"@alokparikh16/sdk","version":"1.1.0","license":"Apache-2.0","readme":"

@alokparikh16/sdk

\n
ns plugin add @alokparikh16/sdk
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-blur":{"name":"nativescript-blur","version":"2.0.0","license":"Apache-2.0","readme":"

\"Twitter\n\"Twitter

\n

\"NPM\"

\n

iOS

\n \n

On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred.

\n

Android

\n \n

On android you can only blur image views currently. But you have control over how much you want to blur.\nThe android demo image is showing blur radius level 10.

\n

Android image blurring is powered by wonderkiln/BlurKit-Android

\n

Installation

\n
tns plugin add nativescript-blur
\n

Important Setup,

\n

In your project's app/App_Resources/android/app.gradle file add the following lines\ninside the block for defaultConfig. Without this step, BlurKit won't work.

\n
renderscriptTargetApi 25
renderscriptSupportModeEnabled true
\n

Usage

\n

import { Blur } from 'nativescript-blur';
import * as app from \"tns-core-modules/application\";
let blur = new Blur(true); // pass true to enable limited usage on android (for now);

// Pick Date
makeKittyBlurry() {
    let kittyView = page.getViewById('kitty');
    blur.on(kittyView, 'kitty', 'light').then((imageSource) => {
        if (app.android) { // android only
            let image: any = this.page.getViewById(\"kitty\");
            image.imageSource = imageSource; // replace the image source
            // with the image source that the plugin gives you
        }
        console.log('Kitty has become blurry.');
    }).catch(e => {
        console.dir(e);
    });
}

clearUpKitty() {
    blur.off('kitty').then((src) => {
        if (app.android) { // android only
            let image: any = this.page.getViewById(\"kitty\");

            // Here we're loading from URL, because we're
            // assigning URL in XML, if you have assigned
            // app resource in XML, you would want to
            // .fromResource() here. for more info
            // https://docs.nativescript.org/cookbook/image-source
            ImageSource.fromUrl(src).then(imageSource => {
                image.imageSource = imageSource;
            });
        }
        console.log('Kitty has cleared up.')
    });
}
\n

API

\n

on(view, keyTitle, radius, theme?, duration?): Promise;

\n

Radius is for android. // not optional, must be between 1 - 25 (inclusive)

\n

Theme and Duration are for iOS. // optional

\n

To turn it on, you must pass a view, a key name and a number to set radius. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. You can pass a custom duration. The duration is in seconds, for example if you pass .2 the animation will last .2 seconds.\nSupported themes for iOS are:

\n
dark
extraDark
light
extraLight
regular
prominent
\n

Play around with the themes to see which looks the best, and learn more about these options here: https://developer.apple.com/documentation/uikit/uiblureffectstyle

\n

The view needs to be a nativescript view that has an ios property, and that property must support addSubview. Here are some examples of NativeScript UI elements you can pass:

\n
StackLayout
GridLayout
AbsoluteLayout
DockLayout
ScrollView
Image
Label
\n

If there is no ios property on the element you pass or addSubview doesn't exist on the ios property, it will return an error.

\n

On Android, only view of type Image is supported. And this method returns an image source which you have to assign\nto the image element in your view (please refer demo/ sample code).

\n

off(keyTitle, duration?): Promise;

\n

Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

\n

License

\n

Apache License Version 2.0, January 2004

\n

Copyright 2017 Dave Coffin, Shiva Prasad

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-brightness":{"name":"nativescript-brightness","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Brightness

\n

\"Build\n\"npm\"

\n

A plugin for manipulating your device's screeen brightness in NativeScript Android and iOS apps.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-brightness
\n

This command automatically installs the necessary files, as well as stores nativescript-brightness as a dependency in your project's package.json file.

\n

This plugin requires <uses-permission android:name="android.permission.WRITE_SETTINGS"/> to be added in the android manifest.

\n

Usage

\n

To use the brightness module you must first require() and instantiate it:

\n
// JavaScript
var nativescriptBrightness = require(\"nativescript-brightness\");
var brightness = new nativescriptBrightness.Brightness();
\n

Or if you’re using TypeScript, import the module:

\n
// TypeScript
import { Brightness } from 'nativescript-brightness';
const brightness = new Brightness();
\n

After you have a reference to the module you can then call its get() and set() methods. For example, the code below updates you screen's brightness with an intensity setting of 25%.

\n

The intensity can be set to a value from 1 to 100.

\n
// TypeScript
import { Brightness } from 'nativescript-brightness';
const brightness = new Brightness();

brightness.set({
    intensity: 25
});
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
set(options: BrightnessOptions)set screen's brightness to the desired intensity
getreturns current screen brightness value as a number between 0 and 100
getNativereturns current screen brightness value as returned from the native api: between 0.0 and 1.0 for iOS and 0 and 255 for android
\n

BrightnessOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
intensity100defines the desired brightness value, which should be a number between 0 and 100.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyboard-toolbar":{"name":"nativescript-keyboard-toolbar","version":"1.1.0","license":"Apache-2.0","readme":"

NativeScript Keyboard Toolbar

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n\n

iOS and Android running the included demo - much better framerate on YouTube!

\n

What The Keyboard!?

\n

Glad you asked 😅!

\n\n

Installation

\n
tns plugin add nativescript-keyboard-toolbar
\n

General usage instructions

\n

The plugin works by grabbing your declared toolbar layout and moving it off-screen.

\n

Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

\n

For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

\n

So if your layout structure is currently this:

\n
<ActionBar/>
<StackLayout/>
\n

Change it to this:

\n
<ActionBar/>
<GridLayout>
    <StackLayout/>
    <Toolbar/>
</GridLayout>
\n

Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

\n
\n

Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

\n
\n

Usage with NativeScript Core

\n

Mind the comments in the example below.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"nativescript-keyboard-toolbar\">

    <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
    <GridLayout>

        <StackLayout>
            <Label text=\"Some text\"/>
            <!-- Add an 'id' property that we can reference below -->
            <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
        </StackLayout>

        <!-- The 'forId' and 'height' properties are mandatory -->
        <kt:Toolbar forId=\"priceTextField\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
            </GridLayout>
        </kt:Toolbar>

    </GridLayout>
</Page>
\n

Core demo app

\n

Check the source in the demo folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo.ios # or .android
\n

Usage with NativeScript-Angular

\n

Register the plugin in a specific module, or globally in the app module:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"KeyboardToolbar\", () => require(\"nativescript-keyboard-toolbar\").Toolbar);
\n

In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

\n
<ActionBar>
  <TextField #textField1 id=\"tf1\"></TextField>
</ActionBar>

<!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
<GridLayout>

  <!-- Add whatever visible layout you need here -->
  <ListView [items]=\"items\">
    <ng-template let-item=\"item\">
      <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
    </ng-template>
  </ListView>

  <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
   The 'forId' and 'height' properties are mandatory -->
  <KeyboardToolbar forId=\"tf1\" height=\"44\">
    <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
      <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
      <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
      <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
      <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
    </GridLayout>
  </KeyboardToolbar>
</GridLayout>
\n

Angular demo app

\n

Check the source in the demo-ng folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-ng.ios # or .android
\n

Usage with NativeScript-Vue

\n

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

\n
import Vue from \"nativescript-vue\";
Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <StackLayout>
        <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
      </StackLayout>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
         The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tv2\" height=\"44\">
        <GridLayout columns=\"*, *, *\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
          <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
          <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
        </GridLayout>
      </KeyboardToolbar>

    </GridLayout>
  </Page>
</template>

<script>
  import { topmost } from \"tns-core-modules/ui/frame\";

  export default {
    methods: {
      appendToTextView2(args) {
        const textView = topmost().currentPage.getViewById(\"tv2\");
        textView.text += args.object.text;
      }
    }
  }
</script>
\n

Vue demo app

\n

Check the source in the demo-vue folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-vue.ios # or .android
\n

What about IQKeyboardManager?

\n

If you have IQKeyboardManager installed for better\nkeyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset\nIQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

\n

You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

\n

Future work

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-login":{"name":"nativescript-wechat-login","version":"1.0.6","license":"Apache-2.0","readme":"

NativeScript WeChat login plugin

\n

\"npm\"\n\"npm\"\n\"npm\"

\n

Using this plugin you will be able implement wechat login feature in your APP. You can read more details from here

\n

Installation

\n
tns plugin add nativescript-wechat-login
\n

If you are using NativeScript 5.4.X then you can have a look this branch

\n

Android

\n

If installation was successful then wxapi.WXEntryActivity.android.ts file should be create to your src or app (based on nsconfig.json or webpack.config.js appPath value) directory with your APP ID. If it wasn't successfully created then you will have to create that file manually. You can get code of that file from here. In this case you will require to change YOUR_APP_ID to your app's ID.

\n

If you don't have wxapi.WXEntryActivity.android.ts file in your src or app directory then Android won't receive notification from wechat.

\n

Webpack

\n

You will have to add wxapi.WXEntryActivity.android.ts in your webpack.config.js file so that android runtime can generate appropriate java class. Check the demo custom-webpack.config.js file. You can read here for details.

\n

If you are using NativeScript version 6.4.0 or newer then you can create custom custom-webpack.config.js file & add that file in your nsconfig.json file as below

\n

custom-webpack.config.js

\n
const webpackConfig = require(\"./webpack.config\");
const path = require(\"path\");

module.exports = env => {

    env = env || {};

    const cnf = webpackConfig(env);

    env.appComponents = env.appComponents || [];
    env.appComponents.push(path.resolve(cnf.context, \"wxapi.WXEntryActivity.android.ts\")); 

    const config = webpackConfig(env);

    return config;
}
\n

nsconfig.json

\n
...
\"webpackConfigPath\": \"./custom-webpack.config.js\"
\n

For NativeScript version 6.3.0 or older edit webpack.config.js manually.

\n
const appComponents = [
    \"tns-core-modules/ui/frame\",
    \"tns-core-modules/ui/frame/activity\",
    resolve(__dirname, \"src/wxapi.WXEntryActivity.android.ts\") // or resolve(__dirname, \"app/wxapi.WXEntryActivity.android.ts\") depends on nsconfig.json or webpack.config.js file's appPath value.
];
\n

iOS

\n

Open your Info.plist file from App_Resources/iOS location & add following lines

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleURLName</key>
\t\t<string>weixin</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>WECHAT_APP_ID</string>
\t\t</array>
\t</dict>
</array>
\n

Change WECHAT_APP_ID with your Wechat App ID. Check demo project demo/App_Resources/iOS/Info.plist

\n

Usage

\n

For details you can check the demo project.

\n

In your main.ts or app.ts need to import initWechatSdk(WECHAT_APP_ID) method with wechat app id.

\n
....
import { initWechatSdk } from \"nativescript-wechat-login\";

initWechatSdk(\"wxd930ea5d5a258f4f\");
\n

In any other page

\n
....
import { WechatLogin } from \"nativescript-wechat-login\";
import * as app from \"tns-core-modules/application\";
\n

Now call in a method

\n
let wechat = new WechatLogin();

if (wechat.isWechatInstalled()) {
    wechat.doLogin(\"nativescript_demo\");
} else {
    console.log(\"wechat isn't installed\")
}
\n

You will get response from wxApiResponse event. So, you can register in that event like this:

\n
app.on('wxApiResponse', function(res){
\tconsole.dir(res) // you will get wechat notification here.
\tconsole.dir(res.object) // information from wechat
}, this);
\n

Ref:

\n

https://open.wechat.com/cgi-bin/newreadtemplate?t=overseas_open/docs/mobile/login/guide#login_guide

\n

https://github.com/aaronbruckner/wechatAndroidLoginDemo

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-clipboard":{"name":"@knotes/nativescript-clipboard","version":"2.1.0","license":"MIT","readme":"

NativeScript Clipboard

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

A NativeScript plugin to copy and paste data from and to the device clipboard.

\n
\n

💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.0.

\n
\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-clipboard
\n

Usage

\n
\n

TIP: Check out the demo app for TypeScript examples.

\n
\n

To use this plugin you must first require() it:

\n
var clipboard = require(\"nativescript-clipboard\");
\n

setText

\n
  clipboard.setText(\"Something relevant to put on the clipboard.\").then(function() {
      console.log(\"OK, copied to the clipboard\");
  })
\n

setTextSync

\n

This is the synchronous version of setText, available since plugin version 1.2.0.

\n
  clipboard.setTextSync(\"Something relevant to put on the clipboard.\");
\n

getText

\n
  clipboard.getText().then(function(content) {
      console.log(\"Read from clipboard: \" + content);
  })
\n

getTextSync

\n

This is the synchronous version of getText, available since plugin version 1.2.0.

\n
  var content = clipboard.getText();
  console.log(\"Read from clipboard: \" + content);
\n

Future work

\n

Implement support for storing data (image, etc) on the clipboard. Open an issue or PR in case you like to have that.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/geofencing":{"name":"@awarns/geofencing","version":"1.1.0","license":"Apache-2.0","readme":"

@awarns/geofencing

\n

\"npm\n\"npm\"

\n

This module allows to perform basic geofencing analysis based on the locations obtained by the tasks declared in the @awarns/geolocation package. It is also compatible with any other custom entity matching the GeolocationLike interface (for example, an entity produced by a custom indoor positioning system).

\n

The geofencing mechanism inside this package allows to detect multiple degrees of nearness towards the registered areas of interest.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/geofencing
\n

Usage

\n

After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

\n
    \n
  1. The plugin API. Through it, you'll be able to configure and update the areas of interest which are relevant to your application.
    2. \n
  2. The geofencing task, which allows to detect if one or more locations which have just been acquired are close to one or more registered areas of interest. When a change in the proximity is detected, this task emits an AoIProximityChange record, described below.
    3. \n
\n

API

\n

areasOfInterest

\n

The areasOfInterest singleton object is the main plugin entrypoint. Through it, you can set up and manage areas of interest. This is the complete API:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
insert(aois: Array<AreaOfInterest>)Promise<void>Inserts the given list of areas of interest into the local database. More details on the AreaOfInterest interface right after this table
getById(id: string)Promise<AreaOfInterest>Allows to retrieve a stored area of interest by its id
getAll()Promise<Array<AreaOfInterest>>Allows to retrieve all the stored areas of interest at once
list()Observable<Array<AreaOfInterest>>Allows to observe changes in all the stored areas of interest. It is recommended to install the RxJS package too, to operate with the output of this method
deleteAll()Promise<void>Allows to clear all the stored areas of interest at once
\n

AreaOfInterest

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringThe unique identifier of the area
namestringA display name for the area
longitudenumberThe longitude of the center of the area
latitudenumberThe latitude of the center of the area
radiusnumberThe radius of the area, from its center's longitude and latitude
categorystring(Optional) Free text field, can be used to classify the area in an arbitrary category
levelnumber(Optional) Can be used to rank areas
\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
checkAreaOfInterestProximityGiven one or more locations included in the payload of the event invoking the task, this task checks their proximity towards a set of registered areas of interest
filterGeolocationByAoIProximityGiven one or more locations included in the payload of the event invoking the task, this task checks their proximity towards a set of registered areas of interest and only outputs those that fall nearby or inside their radii
\n

Check area of interest proximity

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { checkAreaOfInterestProximityTask } from '@awarns/geofencing';

export const demoTasks: Array<Task> = [
    checkAreaOfInterestProximityTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquirePhoneGeolocation')
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on(
  'geolocationAcquired',
  run('checkAreaOfInterestProximity', {
    nearbyRange: 100, // Area approximation radius, in meters (defaults to 100)
    offset: 15, // Optional distance calculation offset, in meters. Can help mitigating location error (defaults to 0)
  })
);

on('movedCloseToAreaOfInterest', run('writeRecords'));
on('movedInsideAreaOfInterest', run('writeRecords'));
on('movedOutsideAreaOfInterest', run('writeRecords'));
on('movedAwayFromAreaOfInterest', run('writeRecords'));
\n

Note: To use the acquirePhoneGeolocation and writeRecords tasks, the geolocation and persistence packages must be installed and configured. See geolocation package and persistence package docs.

\n
\n

Filter geolocations based on area of interest proximity

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { filterGeolocationByAoIProximityTask } from '@awarns/geofencing';

export const demoTasks: Array<Task> = [
  filterGeolocationByAoIProximityTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquirePhoneGeolocation')
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on(
  'geolocationAcquired',
  run('filterGeolocationByAoIProximity', {
    nearbyRange: 100, // Area approximation radius, in meters (defaults to 100)
    offset: 15, // Optional distance calculation offset, in meters. Can help mitigating location error (defaults to 0)
    includeNearby: true // Optional indicate if points nearby an area should be taken into consideration (defaults to false)
  })
);

on('geolocationCloseToAoIAcquired', run('writeRecords')); // Just write the locations captured nearby an area of interest
\n

Note: To use the acquirePhoneGeolocation and writeRecords tasks, the geolocation and persistence packages must be installed and configured. See geolocation package and persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
movedCloseToAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations represent an approximation towards the surroundings of one or more registered areas of interest. The approximation radius can be configured in the application workflow. See an example below this table
movedInsideAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen between the center of one or more registered areas and their radii
movedOutsideAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen outside one or more area radii, but are still within their approximation radii. This event won't fire while there's still a location that falls inside an area
movedAwayFromAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen completely outside one or more area approximation radii. This event won't fire while there's still a location that falls inside the approximation radius of an area
geolocationCloseToAoIAcquired'Geolocation' | 'Array'A location or a list of locations which have passed the area of interest filter (fall nearby or inside the known areas)
\n

Records

\n

AoIProximityChange

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways aoi-proximity-change
changeChangeCan be either start or end. The former indicates a transition to the proximity indicated by the the record, whereas the later indicates no longer being in the reported level of proximity
timestampDateThe local time when the proximity change was detected
aoiAreaOfInterestThe area of interest towards which the proximity change has been detected
proximityGeofencingProximityIndicates the relative proximity towards the area. Look at the change property to identify if the change is towards the proximity or contrary to it. See all the proximity options below
\n

GeofencingProximity

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
INSIDEOne or more locations fall within the center and the radius of an area
NEARBYOne or more locations fall outside the center and the radius of an area, but they fall within its approximation radius
OUTSIDEOne or more locations fall completely outside an area and its approximation radius. This option will never be used in an AoIProximityChange record
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-dynatrace":{"name":"@nstudio/nativescript-dynatrace","version":"1.0.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-dynatrace

\n
npm install @nstudio/nativescript-dynatrace
\n

Usage

\n

Manual OneAgent startup

\n

If you can't do an automated startup through the dynatrace.config.js, you can always perform a\nmanual startup and decide values such as beaconUrl and applicationId at runtime.

\n

Note: An automated startup usually provides you with a lifecycle application start-up event. A manual startup on the\nother hand occurs later, thereby causing you to miss everything, including this application startup event, until the\nstartup occurs.

\n

A manual startup requires the following two steps:

\n

Deactivate the automated startup in dynatrace.config.js:

\n
module.exports = {
\tandroid: {
\t\tconfig: 'dynatrace { configurations { defaultConfig { autoStart.enabled false } } }',
\t},
\tios: {
\t\tconfig: '<key>DTXAutoStart</key> <false/>',
\t},
};
\n

Make the start-up call with at least beaconUrl and applicationId:\nExample of a startup call:

\n
import { TNSDynatrace, DynatraceStartupConfiguration } from '@nstudio/nativescript-dynatrace';

TNSDynatrace.start(new DynatraceStartupConfiguration({ beaconUrl: 'beaconUrl', applicationId: 'applicationId' }));
\n

For more details see the section about startup API.

\n

Note: If you don't deactivate the automated startup with the dynatrace.config.js file, the beaconUrl and applicationId\nvalues have no impact and are thrown away.

\n

Manual instrumentation

\n

To use the API of the NativeScript plugin, import the API:

\n
import { TNSDynatrace } from '@nstudio/nativescript-dynatrace';
\n

Plugin startup

\n

The manual startup of the plugin is triggered via the start(configuration: ManualStartupConfiguration)\nmethod. If you configured dynatrace.config.js for manual startup then the plugin doesn't send any data when not\ncalling this function. Besides the application id and the beacon URL, there are several optional configuration\nparameters, which are shown in the table below:

\n
new ManualStartupConfiguration({
\tbeaconUrl: string,
\tapplicationId: string,
\treportCrash: boolean,
\tlogLevel: LogLevel,
\tcertificateValidation: boolean,
\tuserOptIn: boolean,
});
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property nameTypeDefaultDescription
beaconUrlstringnullIdentifies your environment within Dynatrace. This property is mandatory for manual startup. OneAgent issues an error when the key isn't present.
applicationIdstringnullIdentifies your mobile app. This property is mandatory for manual startup. OneAgent issues an error when the key isn't present.
reportCrashbooleantrueReports crashes.
certificateValidationbooleantrueAllows the use of self-signed certificates. By default, it is set to false. When set to true, OneAgent accepts self-signed certificates that are not signed by a root-CA. This configuration key doesn't impact mobile app connections. It's only used for OneAgent communication, but doesn't overrule the host-name validation.
userOptInbooleanfalseUser consent must be queried and set. The privacy settings for data collection and crash reporting can be changed via OneAgent SDK for Mobile as described under Data privacy. The default value is false.
\n

Note: The values used for the parameters are their default value.

\n

Attention: Please use those parameters only when doing a manual startup. If you want to do an automated startup, please\nconfigure the properties via the auto startup configuration. You will find a list which explains all the counterparts\nfor the available options here.

\n

Create manual actions

\n

To create a manual action named "MyButton tapped", use the following code. The leaveAction closes\nthe action again. To report values for this action before closing, see Report Values.

\n
let myAction = TNSDynatrace.enterAction('MyButton tapped');
//Perform the action and whatever else is needed.
myAction.leaveAction();
\n

Create manual sub actions

\n

You can create a single manual action as well as sub actions. The MyButton Sub Action is\nautomatically put under the MyButton tapped. As long as MyButton tapped is open, it gathers all the web requests.

\n
let myAction = TNSDynatrace.enterAction('MyButton tapped');
let mySubAction = TNSDynatrace.enterAction('MyButton Sub Action');
//Perform the action and whatever else is needed.
mySubAction.leaveAction();
myAction.leaveAction();
\n

Report values

\n

For any open action you can report certain values. The following API is available for action:

\n
reportValue(valueName, value);
reportError(errorName, errorCode);
reportEvent(eventName);
\n

To report a string value, use the following:

\n
let myAction = TNSDynatrace.enterAction('MyButton tapped');
myAction.reportStringValue('ValueName', 'ImportantValue');
myAction.leaveAction();
\n

Report an error stacktrace To manually report an error stacktrace, use the following API call:

\n

Identify a user

\n

You can identify a user and tag the current session with a name by making the following call:

\n
TNSDynatrace.identifyUser('User XY');
\n

Manually report an error You can manually report a crash via the following API call:

\n
reportError(errorName, errorCode);
\n

Data collection

\n

The privacy API methods allow you to dynamically change the data-collection level based on the\nindividual preferences of your end users. Each end user can select from three data-privacy levels:

\n
export enum DataCollectionLevel {
\tOff,
\tPerformance,
\tUserBehavior,
}
\n\n
getUserPrivacyOptions();
applyUserPrivacyOptions(userPrivacyOptions);
\n

To check the current privacy options that are set:

\n
let privacyOptions = TNSDynatrace.getUserPrivacyOptions();
\n

If you want to create a new UserPrivacyOptions object:

\n
let privacyConfig = new UserPrivacyOptions();
privacyConfig.crashReportingOptedIn = true;
privacyConfig.dataCollectionLevel = DataCollectionLevel.UserBehavior;
\n

To set new values to this object:

\n
privacyConfig.crashReportingOptedIn = false;
privacyConfig.dataCollectionLevel = DataCollectionLevel.Performance;
\n

The properties that are used to set the privacy options can also be used to fetch the options:

\n
let level = privacyConfig.dataCollectionLevel;
let crashReporting = privacyConfig.crashReportingOptedIn;
\n

To apply the values that were set on the object:

\n
TNSDynatrace.applyUserPrivacyOptions(privacyConfig);
\n

Report GPS Location

\n

You can report latitude and longitude and specify\nan optional platform.

\n
setGPSLocation(latitude, longitude);
\n

Setting beacon headers

\n

This allows you to put a set of http headers on every agent http\nrequest (i.e. Authorization header etc.). It will also trigger the agent to reconnect to the beacon endpoint with the\nnew headers.

\n

Note: To clear the previously set headers, call the method without the headers parameter or with a null value for the\nheaders parameter.

\n
setBeaconHeaders(headers);
\n

Structure of the dynatrace.config.js file

\n

The configuration is structured in the following way:

\n
module.exports = {
\tandroid: {
\t\t/* Configuration for Android auto instrumentation*/
\t},
\tios: {
\t\t/* Configuration for iOS auto instrumentation */
\t},
};
\n

Manual Startup Counterparts

\n

Here is a list of all the counterparts for the options that can be used with a manual startup. Below the counterparts\ntable you will find an example configuration block for both Android and iOS.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property nameDefaultAndroidiOS
beaconUrlnullautoStart.beaconUrlDTXBeaconURL
applicationIdnullautoStart.applicationIdDTXApplicationId
reportCrashtruecrashReportingDTXCrashReporting
logLevelLogLevel.Infodebug.agentLoggingDTXLogLevel
certificateValidationfalsedebug.certificateValidationDTXAllowAnyCert
userOptInfalseuserOptInDTXUserOptIn
\n

Android block The Android block is a wrapper for the Android configuration you find in the WebUI (in the Mobile\nApplication Settings). Copy the content into the following block:

\n

android : { config : CONTENT_OF_ANDROID_CONFIG\n} The content of the config block is directly copied to the Gradle file. To know more about the possible configuration\noptions, see the DSL documentation of our Gradle plugin.

\n

iOS block The iOS block is a wrapper for the iOS configuration you find in the WebUI (in the Mobile Application\nSettings). Copy the content into the following block:

\n

ios : { config : CONTENT_OF_IOS_CONFIG\n} The content of the config block is directly copied to the plist file. Therefore, you can use every setting that is\npossible and you find in the official Mobile Agent documentation.

\n

Define build stages in dynatrace.config.js If you have several stages such as debug, QA, and production, you probably\nwant to separate them and let them report in different applications. This can be done with two different approaches:

\n

Android In Android, you can enter all the information in the config file. The following dynatrace {} block must be\ninserted into the android config variable in your dynatrace.config.js file.

\n
module.exports = {
\tandroid: {
\t\tconfig: `dynatrace {
configurations {
dev { variantFilter \"Debug\"}
demo {variantFilter \"demo\"}
prod {variantFilter \"Release\"}
}
}`,
\t},
};
\n

iOS In iOS, you can define some variables in the dynatrace.config.js file. The following properties must be inserted into the iOS config variable in your dynatrace.config.js\nfile.

\n
module.exports = {
\tios: {
\t\tconfig: `
<key>DTXApplicationID</key>
<string>Your ApplicationId</string>
<key>DTXBeaconURL</key>
<string>Your Beacon URL</string>
`,
\t},
};
\n

User opt-in mode Specifies if the user has to opt-in for being monitored. When enabled, you must specify the privacy\nsetting. For more information, see the API section.

\n
module.exports = {
\tandroid: {
\t\tconfig: `
dynatrace { configurations { defaultConfig { autoStart{ ... } userOptIn true } } }
`,
\t},
\tios: {
\t\tconfig: `
<key>DTXUserOptIn</key>
</true>
`,
\t},
};
\n

Native OneAgent debug logs If the instrumentation runs through, and your application starts but you see no data, you\nprobably need to dig deeper to find out why the OneAgents aren't sending any data. Opening up a support ticket is a\ngreat idea, but gathering logs first is even better.

\n

Android Add the following configuration snippet to your other configuration in dynatrace.config.js right under the\nautoStart block (the whole structure is visible, so you know where the config belongs) and run npm run\ninstrumentDynatrace:

\n
module.exports = {
\tandroid: {
\t\tconfig: `
dynatrace { configurations { defaultConfig { autoStart{ ... } debug.agentLogging true } } }
`,
\t},
};
\n

iOS Add the following configuration snippet to your other configuration in dynatrace.config.js (the whole structure is\nvisible, so you know where the config belongs) and run npm run instrumentDynatrace:

\n
module.exports = {
\tios: {
\t\tconfig: `
<key>DTXLogLevel</key>
<string>ALL</string>
`,
\t},
};
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in-enduco":{"name":"nativescript-apple-sign-in-enduco","version":"2.0.1","license":"Apache-2.0","readme":"

Sign In with Apple, for NativeScript

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Requirements

\n\n

Installation

\n
tns plugin add nativescript-apple-sign-in
\n

Demo app

\n

If you're stuck or want a quick demo of how this works, check out the demo app:

\n
git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
cd nativescript-apple-sign-in/src
npm run demo.ios
\n

API

\n

isSignInWithAppleSupported

\n

Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

\n
import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

const supported: boolean = isSignInWithAppleSupported();
\n

signInWithApple

\n

Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

\n
import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

signInWithApple(
    {
        // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
        scopes: [\"EMAIL\", \"FULLNAME\"]
    })
    .then((result: SignInWithAppleAuthorization) => {
        console.log(\"Signed in, credential: \" + result.credential);
        console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
        // you can remember the user to check the sign in state later (see 'getSignInWithAppleState' below)
        this.user = result.credential.user;
    })
    .catch(err => console.log(\"Error signing in: \" + err));
\n

getSignInWithAppleState

\n
\n

⚠️ This does not seem to work on a simulator!

\n
\n

If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

\n
import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

const user: string = \"the id you got back from the signInWithApple function\";

getSignInWithAppleState(user)
    .then(state => console.log(\"Sign in state: \" + state))
    .catch(err => console.log(\"Error getting sign in state: \" + err));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ripple2":{"name":"nativescript-ripple2","version":"2.3.0","license":{"type":"MIT","url":"https://github.com/flore2003/nativescript-ripple2/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Material Design Ripples for NativeScript

\n

NativeScript plugin to add Material Design ripple effects to any layout.

\n

This is a fork of the original nativescript-ripple plugin by Brad Martin (@bradmartin) which can be found at https://github.com/bradmartin/nativescript-ripple

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

NativeScript 3.0+

\n

tns plugin add nativescript-ripple2

\n

Demo

\n

\"Demo\"

\n

Native Android Library

\n

Material Ripple

\n

Usage

\n

XML

\n
<Page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:RL=\"nativescript-ripple2\" loaded=\"pageLoaded\">
  <ActionBar title=\"Ripples for Every Android\" backgroundColor=\"#3489db\" color=\"#fff\" />
  <ScrollView>
    <StackLayout>

      <RL:Ripple rippleColor=\"#d50000\">
        <Label text=\"Red Ripples!!!\" class=\"message\" textWrap=\"true\" />
      </RL:Ripple>

      <RL:Ripple rippleColor=\"#fff000\">
        <Image src=\"~/images/batman.png\" margin=\"10\" stretch=\"aspectFit\" />
      </RL:Ripple>

      <RL:Ripple>
        <Label text=\"Default Ripple\" class=\"message\" textWrap=\"true\" />
      </RL:Ripple>

      <RL:Ripple rippleColor=\"#fff\" backgroundColor=\"#FF4081\" borderRadius=\"30\" height=\"60\" width=\"60\">
        <Label text=\"B\" fontSize=\"30\" color=\"#fff\" verticalAlignment=\"center\" horizontalAlignment=\"center\" textWrap=\"true\" />
      </RL:Ripple>

      <RL:Ripple  rippleColor=\"#c8c8c8\" class=\"label-button\">
        <Label text=\"Lighter Ripple\" textWrap=\"true\" />
      </RL:Ripple>

      <RL:Ripple rippleColor=\"#f5f5f5\" margin=\"15\" tap=\"{{ tapEvent }}\" class=\"dark-button\">
        <Label text=\"Possibilities\" color=\"#fff\" padding=\"10\" textWrap=\"true\" />
      </RL:Ripple>
 
    </StackLayout>
  </ScrollView>
</Page>
\n

Attributes

\n

rippleColor : string optional - sets the ripple color.

\n

Nativescript + Angular

\n

In the main.ts file, add those lines in order to use the ripple effect :

\n
import {registerElement} from \"nativescript-angular/element-registry\";

registerElement(\"Ripple\", () => require(\"nativescript-ripple2\").Ripple);
\n

Please note that on Android, you can have multiple chlidren under a <Ripple> view, but with iOS, the <Ripple> view must have only one child element.

\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dec-sdk":{"name":"nativescript-dec-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

Progress Sitefinity Digital Experience Cloud SDK plugin for NativeScript \"apple\" \"android\"

\n

\"NPM

\n

The purpose of this plugin is to help and ease the developers working with Progress Sitefinity Digital Experience Cloud API. It simplifies the sending of user Interactions to the DEC servers and the getting of Personalization information from there.

\n

Prerequisites

\n

A valid Digital Experience Cloud account is needed for the use of this plugin.

\n

Installation

\n
tns plugin add nativescript-dec-sdk
\n

Usage

\n

Require/Import the DecClient and then to initialize it with proper Options object.

\n

Javascript

\n
var DecClient = require(\"nativescript-dec-sdk\").DecClient;
var client = new DecClient({
    apiKey: 'your DEC Data center Api key',
    source: 'the data source name used by the client',
    authToken: 'your DEC Data center Authentication token', // Not required - needed only if Personalization calls to DEC Data center are used.
    apiServerUrl: 'Api server url' // Not required - only use if the url is a custom one.
});
\n

Typescript

\n
import { DecClient } from \"nativescript-dec-sdk\";
let client = new DecClient({
    apiKey: 'your DEC Data center Api key',
    source: 'the data source name used by the client',
    authToken: 'your DEC Data center Authentication token', // Not required - needed only if Personalization calls to DEC Data center are used.
    apiServerUrl: 'Api server url' // Not required - only use if the url is a custom one.
});
\n

API

\n

Personalization calls

\n

Function

\n
client.IsInPersonas(scoringIds, subjectKey)
\n\n
\n

Function

\n
client.IsInLeads(scoringIds, subjectKey);
\n\n
\n

Function

\n
client.IsInCampaigns(campaignIds, subjectKey);
\n\n
\n
\n

Interactions

\n

Function

\n
client.writeInteraction(interaction);
\n

The interaction should follow this structure:

\n
{
    S: '', // The Interaction's Subject.
    P: '', // The Interaction's Predicate.
    O: '', // The Interaction's Object.
    SM: {}, // The Interaction's Subject Metadata. 
    OM: {}, // The Interaction's Object Metadata.
    MappedTo: {} // The Interaction's Mapping.
}
\n

Important: A valid Interaction should always contain a Subject in combination with any number of the other properties.

\n
\n

Function

\n
client.writeSubjectMetadata(subjectKey, metadata);
\n\n
\n

Function

\n
client.writeObjectMetadata(subjectKey, metadata);
\n\n
\n

Function

\n
client.addMapping(subjectKey, secondSubjectKey, secondDataSource);
\n\n
\n

Function

\n
client.buildPersonalizationReportInteraction(personalizationReportParams);
\n

The personalizationReportParams should follow this structure (all properties are required!):

\n
{
    subjectKey: '', // The Subject key of the Application's user.
    pageGuid: '', // The guid of the page currently personalized.
    canonicalTitle: '', // The title of the page currently personalized.
    canonicalUrl: '', // The url of the page currently personalized. 
    segment: '', // The segment by which the page is personalized - the Persona, the Lead Scoring or the Campaign.
    language: '' // The language of the page currently personalized.
}
\n
\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-push":{"name":"nativescript-push","version":"1.0.9","license":"Apache-2.0","readme":"

[npm-image]:http://img.shields.io/npm/v/nativescript-appurl.svg\n[npm-url]:https://npmjs.org/package/nativescript-appurl\n[downloads-image]:http://img.shields.io/npm/dm/nativescript-appurl.svg

\n

This plugin is an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

\n

Thanks to Eddy for allowing this!

\n

Android

\n

Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

\n

There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

\n

iOS

\n

Enable push support in Xcode

\n

Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

\n\"Push\n
\n

Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

\n
\n

Copy the entitlements file

\n

The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/ (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

\n
\t<key>aps-environment</key>
\t<string>development</string>
\n
\n

Note that the filename can either be <YourAppName>.entitlements or app.entitlements, where YourAppName is the iOS foldername, see the path above.

\n
\n

Configure push notifications in Info.plist

\n

Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

\n
<key>UseExternalPushProvider</key>
<true/>
\n

And to allow processing when a background push is received, add this as well:

\n
<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
\n

The end result should look like this.

\n

\n

API

\n

areNotificationsEnabled

\n

On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

\n
import { messaging, Message } from \"nativescript-push\";

console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
\n

registerForPushNotifications

\n

The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

\n
import { messaging, Message } from \"nativescript-push\";

messaging.registerForPushNotifications({
  onPushTokenReceivedCallback: (token: string): void => {
    console.log(\"Firebase plugin received a push token: \" + token);
  },

  onMessageReceivedCallback: (message: Message) => {
    console.log(\"Push message received: \" + message.title);
  },

  // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
  showNotifications: true,

  // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
  showNotificationsWhenInForeground: true
}).then(() => console.log(\"Registered for push\"));
\n
\n

Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

\n
\n
\n

With the token received in onPushTokenReceivedCallback you can send a notification to this device.

\n
\n

getCurrentPushToken

\n

If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

\n
import { messaging } from \"nativescript-push\";

messaging.getCurrentPushToken()
    .then(token => console.log(`Current push token: ${token}`));
\n

Interactive notifications (iOS only for now)

\n

To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

\n

Each action has either type button or input, and you can set options to do any or all of:

\n\n

Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

\n

\"Interactive \"Interactive \"Interactive \"Interactive

\n
import { messaging, Message } from \"nativescript-push\";

const model = new messaging.PushNotificationModel();
model.iosSettings = new messaging.IosPushSettings();
model.iosSettings.badge = false;
model.iosSettings.alert = true;

model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
model.iosSettings.interactiveSettings.actions = [
  {
    identifier: \"OPEN_ACTION\",
    title: \"Open the app (if closed)\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground
  },
  {
    identifier: \"AUTH\",
    title: \"Open the app, but only if device is not locked with a passcode\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply without opening the app\",
    type: \"input\",
    submitLabel: \"Fire!\",
    placeholder: \"Load the gun...\"
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply and open the app\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground,
    type: \"input\",
    submitLabel: \"OK, send it\",
    placeholder: \"Type here, baby!\"
  },
  {
    identifier: \"DELETE_ACTION\",
    title: \"Delete without opening the app\",
    options: messaging.IosInteractiveNotificationActionOptions.destructive
  }
];

model.iosSettings.interactiveSettings.categories = [{
  identifier: \"GENERAL\"
}];

model.onNotificationActionTakenCallback = (actionIdentifier: string, message: Message) => {
  console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
};

messaging.registerForInteractivePush(model);
\n

To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

\n
{
  \"aps\": {
    \"alert\": {
      \"title\": \"Realtime Custom Push Notifications\",
      \"subtitle\": \"Now with iOS 10 support!\",
      \"body\": \"Add multimedia content to your notifications\"
    },
    \"sound\": \"default\",
    \"badge\": 1,
    \"category\": \"GENERAL\",
    \"showWhenInForeground\": true,
    \"data\": {
      \"foo\": \"bar\"
    }
  }
}
\n
\n

IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

\n
\n

Testing push notifications

\n

iOS

\n

For testing notifications on iOS the easiest tool I found is Pusher:

\n\"Pusher\"/\n

Android

\n

For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

\n

\"Postman \"Postman

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uber":{"name":"nativescript-uber","version":"1.5.2","license":"MIT","readme":"

NativeScript plugin for Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods is installed

\n

Android - Latest Google Play services SDK installed

\n

Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-uber
\n

Setup Google Maps API

\n

See demo code included here

\n

Live Demo here

\n

Setup Android API Key

\n

First copy over the template string resource files for Android

\n
cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/
\n

Next modify the file at app/App_Resources/Android/values/nativescript_google_maps_api.xml, uncomment nativescript_google_maps_api_key string and replace PUT_API_KEY_HERE with your api key.

\n

The plugin will default to latest available version of the Android play-services-maps SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Setup iOS API Key

\n

In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

\n
if(application.ios) {
  GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, you need to modify the main.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;
....
if (platform.isIOS) { 
  GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the UberView

\n

Modify your view by adding the namespace xmlns:maps="nativescript-uber" to your page, then using the <maps:mapView /> tag to create the UberView.

\n
 <!-- /app/main-page.xml -->
 <Page 
\txmlns=\"http://www.nativescript.org/tns.xsd\"
\txmlns:maps=\"nativescript-uber\"
\t>
  <GridLayout>
    <maps:mapView latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\" 
    \t\t\t\t\t\t\t\tzoom=\"{{ zoom }}\" bearing=\"{{ bearing }}\" 
    \t\t\t\t\t\t\t\ttilt=\"{{ tilt }}\" padding=\"{{ padding }}\" mapReady=\"onMapReady\"  
   \t\t\t\t\t\t\t\tmarkerSelect=\"onMarkerSelect\" markerBeginDragging=\"onMarkerBeginDragging\"
   \t\t\t\t\t\t\t\tmarkerEndDragging=\"onMarkerEndDragging\" markerDrag=\"onMarkerDrag\"
   \t\t\t\t\t\t\t\tcameraChanged=\"onCameraChanged\" />
  </GridLayout>
</Page>
\n

The following properties are available to you for adjusting camera view.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
latitudenumber
latitudenumber
zoomnumber
bearingnumber
tiltnumber
paddingarray of numbers reflectig top, bottom, left and right paddings
\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyCalled when Google Map is ready for use
coordinateTappedFires when coordinate is clicked on map
coordinateLongPressFires when coordinate is "long pressed"
markerSelectFires whenever a marker is selected
shapeSelectFires whenever a shape (Circle, Polygon, Polyline) is clicked. You must explicity configure shape.clickable = true; on your shapes.
markerBeginDraggingFires when a marker begins dragging
markerDragFires repeatedly while a marker is being dragged
markerEndDraggingFires when a marker ends dragging
markerInfoWindowTappedFired on tapping Marker Info Window
cameraChangedFired on each camera change
\n

The property gMap gives you access to the raw platform Map Object - see their SDK references for how to use them ( iOS | Android )

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-uber\");

function onMapReady(args) {
  var mapView = args.object;

  console.log(\"Setting a marker...\");
  var marker = new mapsModule.Marker();
  marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
  marker.title = \"Sydney\";
  marker.snippet = \"Australia\";
  marker.userData = { index : 1};
  mapView.addMarker(marker);
}

function onMarkerSelect(args) {
   console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
\n

Styling

\n

Use gMap.setStyle(style); to change the map styling.

\n

For map styles, see Google Maps Style Reference and the Styling Wizard.

\n

Using with Angular

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register UberView plugin in order to use in Angular templates
registerElement(\"UberView\", () => require(\"nativescript-uber\").UberView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <UberView (mapReady)=\"onMapReady($event)\"></UberView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"UberView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio - see nativescript-google-maps-utils

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts":{"name":"nativescript-contacts","version":"1.6.4","license":"MIT","readme":"

NativeScript Contacts

\n

A NativeScript module providing easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.\nWorking with groups available in 1.5.0. Create a group, add and remove contacts to the group, and delete a group.

\n

Installation

\n

Run tns plugin add nativescript-contacts

\n

Usage

\n

To use the contacts module you must first require() it.

\n
var contacts = require(\"nativescript-contacts\");
\n

iOS Caveats

\n

Add following key to Info.plist found in app/App_Resources/iOS/Info.plist

\n
<key>NSContactsUsageDescription</key>
<string>Kindly provide permission to access contact on your device.</string>
\n

User will be asked for permissions when contacts are accessed by the app.

\n

Android Caveats

\n

From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your manifest:

\n
<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
<uses-permission android:name=\"android.permission.READ_CONTACTS\" />
<uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
\n

You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the great nativescript-permissions plugin):

\n
const contact = new Contact();
(...)
Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], \"I need these permissions because I'm cool\")
            .then(() => {
                contact.save();
            });
\n

Methods

\n

getContact: Pick one contact and bring back its data.

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below

    // lets say you wanted to grab first name and last name
    console.log(contact.name.given + \" \" + contact.name.family);

    //lets say you want to get the phone numbers
    contact.phoneNumbers.forEach(function(phone) {
      console.log(phone.value);
    });

    //lets say you want to get the addresses
    contact.postalAddresses.forEach(function(address) {
      console.log(address.location.street);
    });
  }
});
\n

Save a new contact

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");
var imageSource = require(\"@nativescript/core/image-source\");

var newContact = new contacts.Contact();
newContact.name.given = \"John\";
newContact.name.family = \"Doe\";
newContact.phoneNumbers.push({
  label: contacts.KnownLabel.HOME,
  value: \"123457890\"
}); // See below for known labels
newContact.phoneNumbers.push({ label: \"My Custom Label\", value: \"11235813\" });
newContact.photo = imageSource.fromFileOrResource(\"~/photo.png\");
newContact.save();
\n

Update an existing contact

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");
var imageSource = require(\"@nativescript/core/image-source\");

contacts.getContact().then(function(args) {
  if (args.response === \"selected\") {
    var contact = args.data;
    contact.name.given = \"Jane\";
    contact.name.family = \"Doe\";

    imageSource
      .fromUrl(\"http://www.google.com/images/errors/logo_sm_2.png\")
      .then(function(src) {
        contact.photo = src;
        contact.save();
      });
  }
});
\n

Delete a contact

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    contact.delete();
  }
});
\n

Check if contact is Unified/Linked (iOS Specific)

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    console.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
  }
});
\n

getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

/*
  contactFields contains the fields to retrieve from native backend to reduce processing time
  var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
*/
var contactFields = [\"name\", \"phoneNumbers\"];

contacts.getContactsByName(\"Hicks\", contactFields).then(
  function(args) {
    console.log(\"getContactsByName Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getAllContacts: Find all contacts. Returns an array of contact data.

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

/*
  Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
  var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

  If not supplied, all available contactFields will be returned.
*/
var contactFields = [\"name\", \"phoneNumbers\"];

contacts.getAllContacts(contactFields).then(
  function(args) {
    console.log(\"getAllContacts Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

var contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

contacts.getContactById(contactId).then(
  function(args) {
    console.log(\"getContactById Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getGroups: Find groups. Returns an array of group data.

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      console.log(\"getGroups Complete\");
      console.log(JSON.stringify(args));
      /// Returns args:
      /// args.data: Generic cross platform JSON object, null if no groups were found.
      /// args.reponse: \"fetch\"

      if (args.data === null) {
        console.log(\"No Groups Found!\");
      } else {
        console.log(\"Group(s) Found!\");
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

Save a new group

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

var groupModel = new contacts.Group();
groupModel.name = \"Test Group\";
//Save Argument (boolean)
//iOS: [false=> Use Local Container, true=> Use Default Container]
//Android: will always be true, setting this value will not affect android.
groupModel.save(false);
\n

Delete a group

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts.getGroups(\"Test Group\").then(
  function(args) {
    console.log(\"getGroups Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no groups were found.
    /// args.reponse: \"fetch\"

    if (args.data !== null) {
      console.log(\"Group(s) Found!\");
      args.data[0].delete(); //Delete the first found group
    }
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

Add Member To Group

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    contacts.getGroups(\"Test Group\").then(
      function(a) {
        if (a.data !== null) {
          var group = a.data[0];
          group.addMember(contact);
        }
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
  }
});
\n

Remove Member From Group

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      if (args.data !== null) {
        var group = args.data[0];

        contacts.getContactsInGroup(group).then(
          function(a) {
            /// Returns args:
            /// args.data: Generic cross platform JSON object, null if no groups were found.
            /// args.reponse: \"fetch\"
            console.log(\"getContactsInGroup complete\");

            if (a.data !== null) {
              a.data.forEach(function(c, idx) {
                group.removeMember(c);
              });
            }
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

\n
var app = require(\"@nativescript/core/application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      if (args.data !== null) {
        var group = args.data[0];

        contacts.getContactsInGroup(group).then(
          function(a) {
            console.log(\"getContactsInGroup complete\");
            /// Returns args:
            /// args.data: Generic cross platform JSON object, null if no groups were found.
            /// args.reponse: \"fetch\"
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

Single User Data Structure

\n
{
    id : \"\",
    name : {
        given: \"\",
        middle: \"\",
        family: \"\",
        prefix: \"\",
        suffix: \"\",
        displayname: \"\",
        phonetic : {
            given: \"\",
            middle: \"\",
            family: \"\"
        }
    },
    nickname : \"\",
    organization : {
        name: \"\",
        jobTitle: \"\",
        department: \"\",

        // Android Specific properties
        symbol: \"\",
        phonetic: \"\",
        location: \"\",
        type: \"\"
    },
    notes : \"\",
    photo: null, // {N} ImageSource instance

    phoneNumbers : [],
    emailAddresses : [],
    postalAddresses : [],
    urls : []
}
\n

PhoneNumber / EmailAddress structure

\n
{
    id: \"\",
    label: \"\",
    value: \"\"
}
\n

Url structure

\n
{
    label: \"\",
    value: \"\"
}
\n

PostalAddress structure

\n
{
    id: \"\",
    label: \"\",
    location: {
        street: \"\",
        city: \"\",
        state: \"\",
        postalCode: \"\",
        country: \"\",
        countryCode: \"\"
    }
}
\n

Known Labels (for Urls, Addresses and Phones)

\n

The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

\n\n

Those are the system labels but you can also use any custom label you want.

\n

Single Group Data Structure

\n
{
  id: \"\";
  name: \"\";
}
\n

GetFetchResult Data Structure

\n

The object returned by contact fetch requests.

\n
{
  data: Contact[];
  response: string;
}
\n

iOS

\n

See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

\n

NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-poc":{"name":"nativescript-camera-plus-poc","version":"4.0.9","license":"Apache-2.0","readme":"\n

NativeScript Camera Plus

\n\n

A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

\n

\n\n \"LiveShopper\n \n

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n
\n

Installation

\n
ns plugin add @nstudio/nativescript-camera-plus
\n

Note :- Android\nPlease add the following to your app.gradle

\n
android {
...
 compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
}
\n

Sample

\n

Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

\n

\"Camera

\n

Demo

\n

The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

\n

Android Emulator Note

\n

The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefaultDescription
debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
\n

Static Properties

\n

Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
\n

Android Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
toggleCameraIconstringName of app_resource drawable for the toggle camera button.
takePicIconstringName of app_resource drawable for the take picture (capture) button.
galleryIconstringName of app_resource drawable for the open gallery (image library) button.
autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
\n

iOS Only Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
\n

Cross Platform Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
isCameraAvailable()Returns true if the device has at least one camera.
toggleFlash()Toggles the flash mode on the active camera.
toggleCamera()Toggles the active camera on the device.
chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
record(opts?: IVideoOptions)Starts recording a video.
stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
\n

Android Only Public Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
hasCameraPermission()Returns true if the application has been granted access to the device camera.
requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
hasStoragePermissions()Returns true if the application has been granted access to the device storage.
getNumberOfCameras()Returns the number of cameras on the device.
hasFlash()Returns true if the active camera has a flash mode.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
errorEventExecutes when an error is emitted from CameraPlus
photoCapturedEventExecutes when a photo is taken.
toggleCameraEventExecutes when the device camera is toggled.
imagesSelectedEventExecutes when images are selected from the device library/gallery.
videoRecordingStartedEventExecutes when video starts recording.
videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
confirmScreenShownEventExecutes when the picture confirm dialog is shown..
confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
\n

Option Interfaces

\n
export interface ICameraOptions {
  confirm?: boolean;
  saveToGallery?: boolean;
  keepAspectRatio?: boolean;
  height?: number;
  width?: number;
  autoSquareCrop?: boolean;
  confirmRetakeText?: string;
  confirmSaveText?: string;
}
\n
export interface IChooseOptions {
  width?: number;
  height?: number;
  keepAspectRatio?: boolean;
  showImages?:  boolean;
  showVideos?: boolean;
}
\n
export interface IVideoOptions {
  quality?: CameraVideoQuality;
  confirm?: boolean;
  saveToGallery?: boolean;
  height?: number;
  width?: number;
  disableHEVC?: boolean;
  androidMaxVideoBitRate?: number;
  androidMaxFrameRate?: number;
  androidMaxAudioBitRate?: number;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"n-mobile":{"name":"n-mobile","version":"1.0.1","license":"MIT","readme":"

n-mobile

\n

Mobile application framework using Nativescript and Vue

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dark-mode":{"name":"nativescript-dark-mode","version":"1.0.0","license":"Apache-2.0","readme":"

Dark Mode / Night Mode

\n
\n

⚠️️ This NativeScript plugin may become obsolete in the near future, because the awesome NativeScript team is working on built-in support for Dark Mode (and much more). If you're interested, subscribe to this issue.

\n
\n

\"Build\n\"Twitter

\n

What's this all about?

\n

With iOS 13 comes a new Dark Mode which Apple would like you (as a developer) to adopt.\nEven more, iOS will actively alter the appearance of your app's native UI components, so you will be affected by this change.

\n

So to be able to load different CSS, images, or other assets when Dark Mode is enabled, you need some sort of\nproperty you can check and a notification when Dark Mode is enabled/disabled by the user in the phone's settings.

\n

That's where this plugin comes in.

\n
\n

Note that as long as you don't build with Xcode 11, even devices running iOS 13 will not be affected.

\n
\n
\n

By the way, Android has had "Night Mode" support since API level 8, but it's up to the vendors to expose it properly to users. NativeScript-Android apps are not affected by this setting, but you might as well apply the same logic to Android's Night Mode as you do to iOS' Dark Mode, so this plugin unifies those APIs.

\n
\n

Installation

\n
tns plugin add nativescript-dark-mode
\n

Demo app

\n

If you're stuck or want a quick demo of how this works, check out the demo app:

\n
git clone https://github.com/EddyVerbruggen/nativescript-dark-mode
cd nativescript-dark-mode/src
npm run demo.ios # or demo.android
\n

API

\n

isDarkModeSupported

\n

Dark Mode was added in iOS 13, so you could check this function.\nIt's not required as the plugin will take care of this check internally when the other API functions are called.

\n
import { isDarkModeSupported } from \"nativescript-dark-mode\";

const supported: boolean = isDarkModeSupported();
\n

isDarkModeEnabled

\n

If at any moment you want to check for Dark Mode being enabled, you can do:

\n
import { isDarkModeEnabled } from \"nativescript-dark-mode\";

const darkModeEnabled: boolean = isDarkModeEnabled();
\n

addOnDarkModeChangedListener

\n

To get a notification while your app is running, you can register a listener with the plugin.

\n

If you want to get notified on app launch as well, make sure to do this before the app starts.\nAs an example, see app.ts in the demo folder in this repo.

\n
import { addOnDarkModeChangedListener } from \"nativescript-dark-mode\";

addOnDarkModeChangedListener((isDarkMode: boolean) => {
  console.log(\"Now on dark mode? \" + isDarkMode);
});
\n

setDarkModeStyleSheet (unstable)

\n
\n

⚠️ This feature will probably be removed in an upcoming version, because we'll likely have a better (built-in) way soon.

\n
\n

If you want to load a different stylesheet when Dark Mode is enabled, then look no further.\nThere is one caveat though: currently, the stylesheet is only applied on a cold start,\nso if the user switched to Dark Mode while the app is running, your app won't be affected until the next restart.

\n
import { setDarkModeStyleSheet } from \"nativescript-dark-mode\";

setDarkModeStyleSheet(\"./app-dark.css\");
\n
\n

TIP: you can extract all theme-independent CSS in app.css to app-common.css and add an app-dark.css that (just like app.css) extends app-common.css. Check the demo folder in this repo for an example.

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-headset-detection":{"name":"nativescript-headset-detection","version":"1.0.0","license":"MIT","readme":"

NativeScript Headset Detection plugin

\n

\"Build\n\"NPM\n\"Twitter

\n

Installation

\n
tns plugin add nativescript-headset-detection
\n

API

\n

isConnected

\n

To check for a headset at any given moment, use this method:

\n

JavaScript

\n
var headsetDetection = require(\"nativescript-headset-detection\");

headsetDetection.isConnected()
    .then(function (connected) { console.log(\"Connected? \" + connected); })
    .catch(function (err) { console.log(\"Error: \" + err)});
\n

TypeScript

\n
import * as headsetDetection from 'nativescript-headset-detection';

headsetDetection.isConnected()
    .then(connected => console.log(`Connected? ${connected}`))
    .catch(err => console.log(`Error: ${err}`));
\n

onConnectionStateChanged

\n

To listen to changes to the headset state, use this one (adding it to a high level component like `app.[ts|js] makes sense);\nyou can pass in a callback function that gets invoked whenever a headset is (dis)connected:

\n

JavaScript

\n
var headsetDetection = require(\"nativescript-headset-detection\");

headsetDetection.onConnectionStateChanged(function (connected) {
  console.log(\"Connection changed to: \" + connected);
});
\n

TypeScript

\n
import * as headsetDetection from 'nativescript-headset-detection';

headsetDetection.onConnectionStateChanged(connected => console.log(`Connection changed to: ${connected}`));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pushy":{"name":"nativescript-pushy","version":"2.1.0","license":"Apache-2.0","readme":"

NativeScript Pushy

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

Hop on over to Pushy.me to get started!

\n
\n

Installation

\n
tns plugin add nativescript-pushy
\n

For {N} 5 and below please use

\n
tns plugin add nativescript-pushy@1.x
\n

Demo app

\n

Check the source in the demo folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-pushy
cd nativescript-pushy/src
npm i
npm run demo.ios # or demo.android
\n

Setup (iOS only)

\n

Create a file called either app.entitlements or <YourAppName>.entitlements (where YourAppName is identical to the folder name of platforms/ios/YourAppName). Here's an example.

\n

Now reference that file from build.xcconfig as shown here.

\n

API

\n

getDevicePushToken

\n
import { getDevicePushToken } from \"nativescript-pushy\";

getDevicePushToken()
    .then(token => console.log(`getDevicePushToken success, token: ${token}`))
    .catch(err => console.log(`getDevicePushToken error: ${err}`));
\n

setNotificationHandler

\n

Since plugin version 1.1.0 the entire payload of the notification is copied to the object this handler receives,\nbut note that it all gets copied into a data object. So if you send for instance {"foo": "bar"},\nyou can find the value "bar" at notification.data.foo.

\n
import { setNotificationHandler } from \"nativescript-pushy\";

setNotificationHandler(notification => {
  console.log(`Notification received: ${JSON.stringify(notification)}`);
});
\n

Please note..

\n
\n

⚠️ Do not test on a the iOS simulator as it can't receive push notifications.

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mixpanel":{"name":"nativescript-mixpanel","version":"2.0.3","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Mixpanel

\n

A NativeScript plugin to provide the ability to integrate with Mixpanel.

\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add nativescript-mixpanel

\n

Usage

\n

Angular Native (NativeScript Angular) Usage

\n

In main.ts add the following before you bootstrap

\n

import {MixpanelHelper} from \"nativescript-mixpanel\";
MixpanelHelper.init(YOUR_KEY_HERE);
\n

API

\n
import {MixpanelHelper} from \"nativescript-mixpanel\";
\n\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker-ns-7":{"name":"nativescript-modal-datetimepicker-ns-7","version":"12.0.1","license":"Apache-2.0","readme":"

nativescript-modal-datetimepicker \"Build \"npm\" \"npm\"

\n

\"Twitter

\n

\"NPM\"

\n

This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

\n

Android Screenshots

\n

Date Picker

\n\n

Time Picker

\n\n

iOS

\n\n

Installation

\n

NativeScript 7+:

\n

Run ns plugin add nativescript-modal-datetimepicker

\n

NativeScript below 7:

\n

Run tns plugin add nativescript-modal-datetimepicker@1.2.3

\n

Configuration

\n

For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

\n

This can be changed in App_Resources/Android/values-21/styles.xml

\n
<!-- Default style for DatePicker - in spinner mode -->
<style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
    <item name=\"android:datePickerMode\">calendar</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
    <item name=\"android:timePickerMode\">clock</item>
</style>
\n

Usage

\n

NativeScript Core

\n
const ModalPicker = require(\"nativescript-modal-datetimepicker\")
  .ModalDatetimepicker;

const picker = new ModalPicker();

// Pick Date
exports.selectDate = function() {
  picker
    .pickDate({
      title: \"Select Your Birthday\",
      theme: \"light\",
      maxDate: new Date()
    })
    .then(result => {
      // Note the month is 1-12 (unlike js which is 0-11)
      console.log(
        \"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year
      );
      var jsdate = new Date(result.year, result.month - 1, result.day);
    })
    .catch(error => {
      console.log(\"Error: \" + error);
    });
};

// Pick Time
exports.selectTime = function() {
  picker
    .pickTime()
    .then(result => {
      console.log(\"Time is: \" + result.hour + \":\" + result.minute);
    })
    .catch(error => {
      console.log(\"Error: \" + error);
    });
};
\n

API

\n

pickDate(options): Promise<DateResponse>;

\n

Returns a promise that resolves to DateResponse type object (Note: the month is 1-12, unlike js which is 0-11)

\n
date: {
    day: number,
    month: number,
    year: number
}
\n

pickTime(options): Promise<TimeResponse>;

\n

Returns a promise that resolves to TimeResponse type.

\n
time: {
    hour: number,
    minute: number
}
\n

close(): void;

\n

Closes any open picker.

\n

options conform to the following interface:

\n
export interface PickerOptions {
  title?: string; // iOS ONLY: The title to display above the picker, default hidden.
  theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark, prominent and overlay.
  overlayAlpha?: number; // iOS ONLY: when theme is 'overlay', available options: 0.0 to 1.0
  maxDate?: Date;
  minDate?: Date;
  cancelLabel?: string; // iOS Only
  doneLabel?: string; // iOS Only
  cancelLabelColor?: Color; // iOS Only
  doneLabelColor?: Color; // iOS Only
  startingHour?: number; // Ignored on pickDate()
  startingMinute?: number; // Ignored on pickDate()
  startingDate?: Date; // Ignored on pickTime()
  datePickerMode?: string; // Android ONLY: set this to \"spinner\" to see spinner for DatePicker, other option is \"calendar\" (which is the default)
}
\n

Response Interfaces

\n
export interface TimeResponse {
  hour: number;
  minute: number;
}

export interface DateResponse {
  day: number;
  month: number;
  year: number;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mapbox-enduco":{"name":"nativescript-mapbox-enduco","version":"2.1.22","license":"MIT","readme":"\n \n\n

To run the Angular demo

\n
cd src
npm run build.dist
cd ../demo-angular
tns run <platform>
\n

To run the plain Nativescript demo

\n
cd src
npm run build.dist
cd ../demo
tns run <platform>
\n

NativeScript Mapbox plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Awesome native OpenGL-powered maps - by Mapbox

\n\n
\n

There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

\n
\n

Prerequisites

\n

You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

\n

Your access_token can then be set in the top level mapbox_config.ts file.

\n

The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

\n
\n

NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

\n
\n

Breaking Changes

\n

This version includes breaking API changes.

\n

The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

\n

Installation

\n

This version of the plugin is still in development and not yet available via NPM.

\n

To add the plugin to our own project first

\n
cd src
npm run build.dist
\n

then in your package.json file in the dependencies section add:

\n
  \"nativescript-mapbox\": \"file:/path/to/nativescript-mapbox/publish/dist/package\"
\n

If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

\n

On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

\n
  <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
\n

If you get an error related to TelemetryService then please check it's there.

\n

Usage

\n

Demo app (XML + TypeScript)

\n

If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

\n

Demo app (Angular)

\n

There is also the beginnings of an Angular demo in demo-angular in this repository.

\n

Declaring a map in the view

\n

XML

\n

You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

\n

A simple layout could look like this:

\n\n

Could be rendered by a definition like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
  <StackLayout>
    <Label text=\"Nice map, huh!\" class=\"title\"/>
    <ContentView height=\"240\" width=\"240\">
      <map:MapboxView
          accessToken=\"your_token\"
          mapStyle=\"traffic_night\"
          latitude=\"52.3702160\"
          longitude=\"4.8951680\"
          zoomLevel=\"3\"
          showUserLocation=\"true\"
          mapReady=\"onMapReady\">
      </map:MapboxView>
    </ContentView>
  </StackLayout>
</Page>
\n

Angular

\n

Component:

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
\n

View:

\n
  <ContentView height=\"100%\" width=\"100%\">
    <Mapbox
        accessToken=\"your_token\"
        mapStyle=\"traffic_day\"
        latitude=\"50.467735\"
        longitude=\"13.427718\"
        hideCompass=\"true\"
        zoomLevel=\"18\"
        showUserLocation=\"false\"
        disableZoom=\"false\"
        disableRotation=\"false\"
        disableScroll=\"false\"
        disableTilt=\"false\"
        (mapReady)=\"onMapReady($event)\">
    </Mapbox>
  </ContentView>
\n

Available XML/Angular options

\n

All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondefaultdescription
accesstoken-see 'Prerequisites' above
delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
latitude -Set the center of the map by passing this in
longitude-.. and this as well
zoomLevel00-20
showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
hideCompass falseDon't show the compass in the top right corner during rotation of the map
hideLogofalseMapbox requires false if you're on a free plan
hideAttribution trueMapbox requires false if you're on a free plan
disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
moveBeginEvent-The name of a function to be called when the map is moved.
locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
\n

Want to add markers?

\n

This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

\n

Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
  var nativeMapView = args.ios ? args.ios : args.android;
  console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

  // .. or use the convenience methods exposed on args.map, for instance:
  args.map.addMarkers([
    {
      lat: 52.3602160,
      lng: 4.8891680,
      title: 'One-line title here',
      subtitle: 'Really really nice location',
      selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
      onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
    }]
  );
}

exports.onMapReady = onMapReady;
\n

.. or want to set the viewport bounds?

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  args.map.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true
      }
  );
}

exports.onMapReady = onMapReady;
\n

The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

\n

Check out the usage details on the functions below.

\n

Declaring a map programmatically

\n

Add a container to your view XML where you want to programmatically add the map. Give it an id.

\n
<ContentView id=\"mapContainer\" />
\n

show

\n

    const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

    const settings = {

      // NOTE: passing in the container here.

      container: contentView,
      accessToken: ACCESS_TOKEN,
      style: MapStyle.LIGHT,
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 9, // 0 (most of the world) to 20, default 0
      showUserLocation: true, // default false
      hideAttribution: true, // default false
      hideLogo: true, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          iconPath: 'res/markers/green_pin_marker.png',
          onTap: () => console.log(\"'Nice location' marker tapped\"),
          onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
        }
      ]
    };

    console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

    const mapView = new MapboxView();

    // Bind some event handlers onto our newly created map view. 

    mapView.on( 'mapReady', ( args : any ) => {

      console.log( \"main-view-model: onMapReady fired.\" );

      // this is an instance of class MapboxView

      this.mapboxView = args.map;

      // get a reference to the Mapbox API shim object so we can directly call its methods.

      this.mapbox = this.mapboxView.getMapboxApi();

      this.mapbox.setOnMapClickListener( point => {
        console.log(`>> Map clicked: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnMapLongClickListener( point => {
        console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnScrollListener((point: LatLng) => {
        // console.log(`>> Map scrolled`);
      });

      this.mapbox.setOnFlingListener(() => {
        console.log(`>> Map flinged\"`);
      }).catch( err => console.log(err) );

    });

    mapView.setConfig( settings );
    contentView.content = mapView;
\n

hide

\n

All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

\n
  mapbox.hide();
\n

unhide

\n

If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

\n
  mapbox.unhide();
\n

destroy 💥

\n

To clean up the map entirely you can destroy instead of hide it:

\n
  mapbox.destroy();
\n

setMapStyle

\n

You can update the map style after you've loaded it.

\n
\n

With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

\n
\n
  mapbox.setMapStyle(mapbox.MapStyle.DARK);
\n

addMarkers

\n
  import { MapboxMarker } from \"nativescript-mapbox\";

  const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: 'res/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
    onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
  };

  mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])
\n

Updating markers

\n

Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

\n
  firstMarker.update({
    lat: 52.3622160,
    lng: 4.8911680,
    title: 'One-line title here (UPDATE)',
    subtitle: 'Updated subtitle',
    selected: true, // this will trigger the callout upon update
    onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
    onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
  })
\n

removeMarkers

\n

You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

\n
  // remove all markers
  mapbox.removeMarkers();

  // remove specific markers by id
  mapbox.removeMarkers([1, 2]);
\n

setViewport

\n

If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

\n
  mapbox.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true // default true
      }
  )
\n

getViewport

\n
  mapbox.getViewport().then(
      function(result) {
        console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
      }
  )
\n

setCenter

\n
  mapbox.setCenter(
      {
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        animated: false // default true
      }
  )
\n

getCenter

\n

Here the promise callback makes sense, so adding it to the example:

\n
  mapbox.getCenter().then(
      function(result) {
        console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getCenter error: \" + error);
      }
  )
\n

setZoomLevel

\n
  mapbox.setZoomLevel(
      {
        level: 6.5, // mandatory, 0-20
        animated: true // default true
      }
  )
\n

getZoomLevel

\n
  mapbox.getZoomLevel().then(
      function(result) {
        console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getZoomLevel error: \" + error);
      }
  )
\n

animateCamera

\n
  // this is a boring triangle drawn near Amsterdam Central Station
  mapbox.animateCamera({
    // this is where we animate to
    target: {
        lat: 52.3732160,
        lng: 4.8941680
    },
    zoomLevel: 17, // Android
    altitude: 2000, // iOS (meters from the ground)
    bearing: 270, // Where the camera is pointing, 0-360 (degrees)
    tilt: 50,
    duration: 5000 // default 10000 (milliseconds)
  })
\n

setTilt (Android only)

\n
  mapbox.setTilt(
      {
        tilt: 40, // default 30 (degrees angle)
        duration: 4000 // default 5000 (milliseconds)
      }
  )
\n

getTilt (Android only)

\n
  mapbox.getTilt().then(
      function(tilt) {
        console.log(\"Current map tilt: \" +  tilt);
      }
  )
\n

getUserLocation

\n

If the user's location is shown on the map you can get their coordinates and speed:

\n
  mapbox.getUserLocation().then(
      function(userLocation) {
        console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
        console.log(\"Current user speed: \" +  userLocation.speed);
      }
  )
\n

trackUser

\n

In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

\n
  mapbox.trackUser({
    mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
    animated: true
  });
\n

addSource

\n

https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

\n

Adds a vector to GeoJSON source to the map.

\n
  mapbox.addSource( id, {
    type: 'vector',
    url: 'url to source'
  } );
\n

-or-

\n
  mapbox.addSource( id, {
    'type': 'geojson',
    'data': {
      \"type\": \"Feature\",
        \"geometry\": {
        \"type\": \"LineString\",
          \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
        }
      }
    }
  );
\n

removeSource

\n

Remove a source by id

\n
  mapbox.removeSource( id );
\n

addLayer

\n

NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

\n

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

\n

To add a line:

\n
  mapbox.addLayer({
    'id': someid,
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        \"type\": \"Feature\",
          \"geometry\": {
          \"type\": \"LineString\",
            \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
          }
        }
      }
    },
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },    
    'paint': {
      'line-color': '#ed6498',
      'line-width': 5,
      'line-opacity': .8,
      'line-dash-array': [ 1, 1, 1, ..]
    }
  });
\n

To add a circle:

\n
  mapbox.addLayer({
    \"id\": someid,
    \"type\": 'circle',
    \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
    \"source\": {
      \"type\": 'geojson',
      \"data\": {
        \"type\": \"Feature\",
        \"geometry\": {
          \"type\": \"Point\",
          \"coordinates\": [ lng, lat ]
        }
      }
    }, 
    \"paint\": {
      \"circle-radius\": {
        \"stops\": [
          [0, 0],
          [20, 8000 ]
        ],
        \"base\": 2
      },
      'circle-opacity': 0.05,
      'circle-color': '#ed6498',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ed6498'
    } 
  });
\n

Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

\n

removeLayer

\n

Remove a layer added with addLayer() by id.

\n
  mapbox.removeLayer( id );
\n

addLinePoint

\n

Dynamically add a point to a line.

\n
  mapbox.addLinePoint( <id of line layer>, lnglat )
\n

where lnglat is an array of two points, a longitude and a latitude.

\n

addPolygon

\n

Draw a shape. Just connect the dots like we did as a toddler.

\n

The first person to tweet a snowman drawn with this function gets a T-shirt.

\n
  // after adding this, scroll to Amsterdam to see a semi-transparent red square
  mapbox.addPolygon(
      {
        id: 1, // optional, can be used in 'removePolygons'
        fillColor: new Color(\"red\"),
        fillOpacity: 0.7,

        // stroke-related properties are only effective on iOS
        strokeColor: new Color(\"green\"),
        strokeWidth: 8,
        strokeOpacity: 0.5,

        points: [
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          },
          {
            lat: 52.35421556258807,
            lng: 4.9308013916015625
          },
          {
            lat: 52.353796172573944,
            lng: 4.8799896240234375
          },
          {
            lat: 52.3864966440161,
            lng: 4.8621368408203125
          },
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          }
        ]
      })
      .then(result => console.log(\"Mapbox addPolygon done\"))
      .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
\n

removePolygons

\n

You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

\n
  // remove all polygons
  mapbox.removePolygons();

  // remove specific polygons by id
  mapbox.removePolygons([1, 2]);
\n

addPolyline

\n

Deprecated. Use addLayer() instead.

\n

Draw a polyline. Connect the points given as parameters.

\n
  // Draw a two segment line near Amsterdam Central Station
  mapbox.addPolyline({
      id: 1, // optional, can be used in 'removePolylines'
      color: '#336699', // Set the color of the line (default black)
      width: 7, // Set the width of the line (default 5)
      opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
      points: [
          {
              'lat': 52.3833160, // mandatory
              'lng': 4.8991780 // mandatory
          },
          {
              'lat': 52.3834160,
              'lng': 4.8991880
          },
          {
              'lat': 52.3835160,
              'lng': 4.8991980
          }
      ]
  });
\n

removePolylines

\n

Deprecated. Use removeLayer() instead.

\n

You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

\n
  // remove all polylines
  mapbox.removePolylines();

  // remove specific polylines by id
  mapbox.removePolylines([1, 2]);
\n

addSource

\n

Add a source that can be used by addLayer. Note only vector type is currently supported.

\n
  mapbox.addSource(
    id: \"terrain-source\", // required
    type: \"vector\", // supported types: vector
    url: \"mapbox://mapbox.mapbox-terrain-v2\"
  );
\n

removeSource

\n

Remove a source by id.

\n
  mapbox.removeSource(\"terrain-source\");
\n

addLayer

\n

Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

\n
  mapbox.addLayer(
    id: \"terrain-data\",  // required
    source: \"terrain-source\",  // id of source
    sourceLayer: \"contour\",  // id of layer from source
    type: \"line\", // supported types: circle, fill, line
    lineJoin: \"round\",
    lineCap: \"round\",
    lineColor: \"#ff69b4\",
    lineWidth: 1,
  );
\n

removeLayer

\n

Remove a layer by id.

\n
  mapbox.removeLayer(\"terrain-data\");
\n

setOnMapClickListener

\n

Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

\n
  mapbox.setOnMapClickListener((point: LatLng) => {
    console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnMapLongClickListener

\n

Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

\n
  mapbox.setOnMapLongClickListener((point: LatLng) => {
    console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnScrollListener

\n

Add a listener to retrieve lat and lng of where the user scrolls to on the map.

\n
  mapbox.setOnScrollListener((point?: LatLng) => {
    console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

Offline maps

\n

For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

\n

Important read: the offline maps documentation by Mapbox.

\n

downloadOfflineRegion

\n

This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

\n
  mapbox.downloadOfflineRegion(
    {
      accessToken: accessToken, // required for Android in case no map has been shown yet
      name: \"Amsterdam\", // this name can be used to delete the region later
      style: mapbox.MapStyle.OUTDOORS,
      minZoom: 9,
      maxZoom: 11,
      bounds: {
        north: 52.4820,
        east: 5.1087,
        south: 52.2581,
        west: 4.6816
      },
      // this function is called many times during a download, so
      // use it to show an awesome progress bar!
      onProgress: function (progress) {
        console.log(\"Download progress: \" + JSON.stringify(progress));
      }
    }
  ).then(
    function() {
      console.log(\"Offline region downloaded\");
    },
    function(error) {
      console.log(\"Download error: \" + error);
    }
  );
\n

Advanced example: download the current viewport

\n

Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

\n
  // I spare you the error handling on this one..
  mapbox.getViewport().then(function(viewport) {
    mapbox.downloadOfflineRegion(
      {
        name: \"LastViewport\", // anything you like really
        style: mapbox.MapStyle.LIGHT,
        minZoom: viewport.zoomLevel,
        maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
        bounds: viewport.bounds,
        onProgress: function (progress) {
          console.log(\"Download %: \" + progress.percentage);
        }
      }
    );
  });
\n

listOfflineRegions

\n

To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

\n
  mapbox.listOfflineRegions({
    // required for Android in case no map has been shown yet
    accessToken: accessToken
  }).then(
    function(regions) {
      console.log(JSON.stringify(JSON.stringify(regions));
    },
    function(error) {
      console.log(\"Error while listing offline regions: \" + error);
    }
  );
\n

deleteOfflineRegion

\n

You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

\n
  mapbox.deleteOfflineRegion({
    name: \"Amsterdam\"
  }).then(
    function() {
      console.log(\"Offline region deleted\");
    },
    function(error) {
      console.log(\"Error while deleting an offline region: \" + error);
    }
  );
\n

Permissions

\n

hasFineLocationPermission / requestFineLocationPermission

\n

On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

\n

You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

\n

Note that hasFineLocationPermission will return true when:

\n\n
  mapbox.hasFineLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestFineLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
  );

  // if no permission was granted previously this will open a user consent screen
  mapbox.requestFineLocationPermission().then(
      function() {
        console.log(\"Location permission requested\");
      }
  );
\n

Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

\n

Using marker images from the internet

\n

If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

\n
\t<key>NSAppTransportSecurity</key>
\t<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
\t</dict>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toasts":{"name":"nativescript-toasts","version":"1.0.3","license":"ISC","readme":"

nativescript-toasts

\n

This plugin provides a common API for android and iOS to show toast notifications in your NativeScript applications.

\n

Installation

\n
\n

tns plugin add nativescript-toasts

\n
\n

How to use

\n
var nstoasts = require(\"nativescript-toasts\");
var options = {
\ttext: \"Hello World\",
    duration : nstoasts.DURATION.SHORT,
    position : nstoasts.POSITION.TOP //optional
}
nstoasts.show(options);
\n

This plugin uses third party libraries for iOS

\n

The plugin uses a pod created by Charles Scalesse to display toasts on iOS

\n
\n

https://cocoapods.org/pods/Toast

\n
\n

Typescript users

\n
import * as Toast from 'nativescript-toasts';

let toastOptions:Toast.ToastOptions = {text: \"Hello World\", dutation: Toast.DURATION.SHORT};
Toast.show(toastOptions);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-drive":{"name":"nativescript-google-drive","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript Google Drive \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n

\"Google Google Drive

\n

Upload, retrieve and delete files from you Nativescript app to Google Drive

\n

Prerequisites

\n

First to all, if you don't have a google account create one (I think most people have one 😝).

\n

Go to console.developers.google.com

\n\n\"Create\n\"Create\n

iOS

\n

You need to go to the google developer console, open the OAuth 2.0 Client Id create for iOS and copy the iOS URL scheme (REVERSED_CLIENT_ID) or download the plist.

\n

Take the code below and paste it in App_Resources/iOS/Info.plist and replace REVERSED_CLIENT_ID

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>[Add here the REVERSED_CLIENT_ID]</string>
        </array>
    </dict>
</array>
\n

Installation

\n

To install this Nativescript plugin in your project just type or (copy and paste) the command below in the console:

\n
tns plugin add nativescript-google-drive
\n

Usage

\n
import { isIOS } from \"tns-core-modules/platform\";

import { GoogleDriveHelper, SPACES, Config } from \"nativescript-google-drive\";
import * as ThreadWorker from \"nativescript-worker-loader!nativescript-google-drive/thread-worker\";

const config: Config = {
    space: SPACES.APP_DATA_FOLDER, /*[DRIVE|APP_DATA_FOLDER]*/
    worker: ThreadWorker
};
// iOS need this extra the clientID
if (isIOS) {
    config.clientId = [CLIENT_ID];/*OAuth 2.0 client Id*/
}

GoogleDriveHelper.signInOnGoogleDrive(config)
.then((helper: GoogleDriveHelper) => {
    // TODO
})
.catch((err) => {
    // handler error
});
\n
\n

If you have some issues using this plugin with an Angular Nativescript app with the worker loader, read this and take a look at the Angular demo app.

\n
\n

API

\n

signInOnGoogleDrive

\n
/**
 * This method start Google SignIn flow and ask for Gogole Drive permissions to the user
 * and initialize a drive helper class
 * @static @function
 *
 * @param {Config} config
 *
 * @returns {Promise<GoogleDriveHelper>}
 */
static signInOnGoogleDrive(config: Config): Promise<GoogleDriveHelper>;
\n
const config: Config = {
    space: SPACES.APP_DATA_FOLDER, /*[DRIVE|APP_DATA_FOLDER]*/
    worker: ThreadWorker
};
// iOS needs the clientID
if (isIOS) {
    config.clientId = [CLIENT_ID];/*OAuth 2.0 client Id*/
}

GoogleDriveHelper.signInOnGoogleDrive(config)
.then((helper: GoogleDriveHelper) => {
    // TODO
})
.catch((err) => {
    // handler error
});
\n

The Config interface's properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
spacestringRequired on Android, iOS. Specify the drive scope or space to work on SPACES.APP_DATA_FOLDER or SPACES.DRIVE
workerObjectRequired on Android, iOS. The worker thread to execute all the operations
clientIdstringRequired on iOS. The OAuth 2.0 client Id
extraDriveScopesArray<string>Optional on Android, iOS. To specify more scope
\n

createFile

\n
/**
 * Create a file with the specified metadata in Google Drive
 *
 * @param {FileInfoContent} fileInfo file metadata
 *
 * @returns {Promise<string>} created file id
 */
createFile(fileInfo: FileInfoContent): Promise<string>;
\n

The FileInfoContent interface's properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
contentstring or FileContent of the file
\n
\n

FileInfoContent extends FileInfo

\n
\n

updateFile

\n
/**
 * Update a file content in Google Drive.
 * If you want to update the metadata, you have to required permission to metadata scope to the user.
 *
 * @param {FileInfoContent} fileInfo file metadata
 *
 * @returns {Promise<string>} created file id
 */
updateFile(fileInfo: FileInfoContent): Promise<boolean>;
\n

readFileContent

\n
/**
 * Read the content of plain text file
 * @param {string} driveFileId
 *
 * @returns {Promise<string>} text contained in the file
 */
readFileContent(driveFileId: string): Promise<string>;
\n

deleteFile

\n
/**
 * Delete a file
 * @param {string} driveFileId
 *
 * @returns {Promise<boolean>} deleted or not
 */
deleteFile(driveFileId: string): Promise<boolean>;
\n

downloadFile

\n
/**
 * Download a file
 * @param {string} driveFileId
 *
 * @returns {Promise<File>} file downloaded
 */
downloadFile(driveFileId: string): Promise<File>;
\n

uploadFile

\n
/**
 * Upload a file with the specified metadata in Google Drive
 *
 * @param {FileInfo} fileInfo file metadata
 *
 * @returns {Promise<string>} uploaded file id
 */
uploadFile(fileInfo: FileInfo): Promise<string>;
\n

The FileInfo interface's properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
namestringRequired. Name of the file
mimeTypestringMimeType of the file
idstringId of the file
descriptionstringDescription of the file
parentIdstringParent Id of the file
createdTimeDateTime of when the file was uploaded
sizenumberSize of the file in kb
\n

listFilesByParent

\n
/**
 * List all the files contained in the parent or root folder
 * @param {string} parentId parent folder OPTIONAL
 *
 * @returns {Promise<Array<FileInfo>>} file list
 */
listFilesByParent(parentId?: string): Promise<Array<FileInfo>>;
\n

searchFiles

\n
/**
 * Search files in Google Drive with the given metadata.
 *
 * @param {FileInfo} fileInfo file metadata to search for
 *
 * @returns {Promise<Array<FileInfo>>} file list matched
 */
searchFiles(fileInfo: FileInfo): Promise<Array<FileInfo>>;
\n

createFolder

\n
/**
 * Create a folder with the given metadata. The content property is ignore
 * @param {FileInfo} fileInfo folder metadata
 *
 * @returns {Promise<string>} created folder id
 */
createFolder(fileInfo: FileInfo): Promise<string>;
\n

findFolder

\n
/**
 * Find folders by name
 *
 * @param {string} name
 *
 * @returns {Promise<Array<FileInfo>>} folder list
 */
findFolder(name: string): Promise<Array<FileInfo>>;
\n

signOut

\n
/**
 * Disconnect the google drive account
 * @returns {Promise<boolean>}
 */
signOut(): Promise<boolean>;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hijri":{"name":"nativescript-hijri","version":"1.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"twitter:

\n

\"NPM\"

\n

Nativescript Hijri plugin

\n

This plugin is inspired by https://github.com/arabiaweather/hijri-date

\n

Nativescript-hijri

\n

Hijri plugin allow you to convert gregorian date to islamic hijri date.

\n

\n \n

\n

Installation

\n
tns plugin add nativescript-hijri
\n

Usage

\n

Typescript NativeScript

\n

main-view-model

\n
import {Observable} from 'data/observable';
import {Hijri, islamicDateObject} from 'nativescript-hijri';


export class HelloWorldModel extends Observable {
  public message: string;
  private hijri: Hijri;

  constructor() {
    super();

    this.hijri = new Hijri(new Date,0);
    this.message = this.hijri.hijri_en.dayOfWeekText;
    console.dir(this.hijri.hijri_en);

  }
}
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnDescription
hijri_arObject:islamicDateObjectAccepts 2 Arguments Date , Date Adjustment by days.
return Object of islamicDateObject where day and month are written in arabic alphabet.
hijri_enObject:islamicDateObjectAccepts 2 Arguments Date , Date Adjustment by days.
return Object of islamicDateObject where day and month are written in English alphabet.
\n

NativeBaguette 🥖

\n\n\n\n\n\n\n\n\n\n\n\n
\"Rachid
rkhayyat
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-htmllabel":{"name":"nativescript-htmllabel","version":"1.0.41","license":"Apache-2.0","readme":"

# NativeScript Label widget\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Label widget. It is a direct replacement for the {N} Label widget.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-htmllabel

\n

This command automatically installs the necessary files, as well as stores nativescript-htmllabel as a dependency in your project's package.json file.

\n

Configuration

\n

It works exactly the same way as the {N} plugin. However it adds a few improvements

\n

iOS Performances

\n

On iOS generating html string can be slow using the system way.\nYou can enable DTCoreText to make it faster.

\n\n
pod 'DTCoreText'
\n\n
require('nativescript-htmlabel').enableIOSDTCoreText();
\n

Properties

\n\n

Improvements

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-update":{"name":"nativescript-version-update","version":"2.0.2","license":"Apache-2.0","readme":"

nativescript-version-update

\n

\"npm\"\n\"npm\"

\n

\"NPM\"

\n

This plugin allows you to define a notification strategy regarding your app updates. You are able to specify if you want to force, offer or ignore an update based on the new version available in the platform store.

\n

For example, you could want to force all major version update, but offer the option to your user to chose to update or skip a minor or patch version.

\n

You can also specify how many days after the update release you want to display the alert.

\n

Prerequisites

\n

You need to add appversion plugins for this one to work:

\n
tns plugin add @nativescript/appversion
\n

Installation

\n
tns plugin add nativescript-version-update
\n

Usage

\n

In your main.ts or app.ts file, before app start, call StoreUpdate.init with desired options like so:

\n
    import { StoreUpdate, AlertTypesConstants } from \"nativescript-version-update\";

    StoreUpdate.init({
        notifyNbDaysAfterRelease: 1,
        majorUpdateAlertType: AlertTypesConstants.OPTION
    })
\n

Localization

\n

The plugin contains some default translations inside json files located in src/i18n folder and required by hand in the src/helpers/locales.helper.ts file.\nYou can also specify a custom translation in the plugin initialization through the configuraiton options.\nIf you want to contribute a regionalized translation, you must use the lang-regionCode format specified in Apple doc, but with the country lowercased (ex: fr-ca, en-us)

\n

API

\n

Configuration options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
majorUpdateAlertTypeFORCEAlert type for major version change (e.g: A.b.c.d)
minorUpdateAlertTypeOPTIONAlert type for minor version change (e.g: a.B.c.d)
patchUpdateAlertTypeNONEAlert type for major version change (e.g: a.b.C.d)
revisionUpdateAlertTypeNONEAlert type for revision version change (e.g: a.b.c.D)
notifyNbDaysAfterRelease1Delays the update prompt by a specific number of days
countryCodeencountry store code
alertOptionsnullCustomize alert dialog text, bypasses the Locale json
\n

Alert types

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValueDescription
FORCE1Show an alert that can't be skipped
OPTION2Show an alert that can be skipped
NONE3Don't display alert at all
\n

AlertOptions configuration (Optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
titleLocaleTextDialog title, fallback to the locale json
messageLocaleTextDialog body text, fallback to the locale json
updateButtonLocaleTextDialog update button, fallback to the locale json
skipButtonLocaleTextDialog skip button, fallback to the locale json
\n

Development

\n

Clone this repository, go in the src folder then run the command npm run setup\nYou can then use:

\n\n

The repo contains 2 demos folder, one with angular, and one without.\nDemos use the bundleId com.bitstrips.imoji as their App version contains Major, Minor and Patch numbers, and they update their app really often.\nYou can change parameters passed ton package init in main.ts or app.ts files and change app version in android app.gradle and ios info.plist config files to test the feature.

\n

License

\n

Apache License Version 2.0, January 2004

\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-ffmpeg":{"name":"@triniwiz/nativescript-ffmpeg","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript nativescript-ffmpeg

\n
ns plugin add @triniwiz/nativescript-ffmpeg
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apxor":{"name":"nativescript-apxor","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Apxor

\n

Native script Apxor SDK

\n

How to build

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uberx":{"name":"nativescript-uberx","version":"1.3.1","license":"MIT","readme":"

NativeScript plugin for Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

iOS - Cocoapods is installed

\n

Android - Latest Google Play services SDK installed

\n

Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-uber
\n

Setup Google Maps API

\n

See demo code included here

\n

Live Demo here

\n

Setup Android API Key

\n

First copy over the template string resource files for Android

\n
cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/
\n

Next modify the file at app/App_Resources/Android/values/nativescript_google_maps_api.xml, uncomment nativescript_google_maps_api_key string and replace PUT_API_KEY_HERE with your api key.

\n

The plugin will default to latest available version of the Android play-services-maps SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Setup iOS API Key

\n

In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

\n
if(application.ios) {
  GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, you need to modify the main.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;
....
if (platform.isIOS) { 
  GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the UberView

\n

Modify your view by adding the namespace xmlns:maps="nativescript-uber" to your page, then using the <maps:mapView /> tag to create the UberView.

\n
 <!-- /app/main-page.xml -->
 <Page 
\txmlns=\"http://www.nativescript.org/tns.xsd\"
\txmlns:maps=\"nativescript-uber\"
\t>
  <GridLayout>
    <maps:mapView latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\" 
    \t\t\t\t\t\t\t\tzoom=\"{{ zoom }}\" bearing=\"{{ bearing }}\" 
    \t\t\t\t\t\t\t\ttilt=\"{{ tilt }}\" padding=\"{{ padding }}\" mapReady=\"onMapReady\"  
   \t\t\t\t\t\t\t\tmarkerSelect=\"onMarkerSelect\" markerBeginDragging=\"onMarkerBeginDragging\"
   \t\t\t\t\t\t\t\tmarkerEndDragging=\"onMarkerEndDragging\" markerDrag=\"onMarkerDrag\"
   \t\t\t\t\t\t\t\tcameraChanged=\"onCameraChanged\" />
  </GridLayout>
</Page>
\n

The following properties are available to you for adjusting camera view.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
latitudenumber
latitudenumber
zoomnumber
bearingnumber
tiltnumber
paddingarray of numbers reflectig top, bottom, left and right paddings
\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyCalled when Google Map is ready for use
coordinateTappedFires when coordinate is clicked on map
coordinateLongPressFires when coordinate is "long pressed"
markerSelectFires whenever a marker is selected
shapeSelectFires whenever a shape (Circle, Polygon, Polyline) is clicked. You must explicity configure shape.clickable = true; on your shapes.
markerBeginDraggingFires when a marker begins dragging
markerDragFires repeatedly while a marker is being dragged
markerEndDraggingFires when a marker ends dragging
markerInfoWindowTappedFired on tapping Marker Info Window
cameraChangedFired on each camera change
\n

The property gMap gives you access to the raw platform Map Object - see their SDK references for how to use them ( iOS | Android )

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-uber\");

function onMapReady(args) {
  var mapView = args.object;

  console.log(\"Setting a marker...\");
  var marker = new mapsModule.Marker();
  marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
  marker.title = \"Sydney\";
  marker.snippet = \"Australia\";
  marker.userData = { index : 1};
  mapView.addMarker(marker);
}

function onMarkerSelect(args) {
   console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
\n

Styling

\n

Use gMap.setStyle(style); to change the map styling.

\n

For map styles, see Google Maps Style Reference and the Styling Wizard.

\n

Using with Angular

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register UberView plugin in order to use in Angular templates
registerElement(\"UberView\", () => require(\"nativescript-uber\").UberView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <UberView (mapReady)=\"onMapReady($event)\"></UberView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"UberView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio - see nativescript-google-maps-utils

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-date-utils":{"name":"nativescript-date-utils","version":"1.0.0","license":"MIT","readme":"

NativeScript Date Utils

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Installation

\n
tns plugin add nativescript-date-utils
\n

Running the demo app

\n

After cloning, go into the src folder and run npm run demo.ios or npm run demo.android.

\n

API

\n

is24hFormat

\n

Determine whether or not the user's device is currently running in 24 hour format.

\n

TypeScript

\n
import { DateUtils } from 'nativescript-date-utils';

DateUtils.is24hFormat().then((is24h: boolean) => {
  console.log(`This device is currently ${is24h ? '' : 'not'} running in 24 hour format.`);
});
\n

JavaScript

\n
var DateUtils = require(\"nativescript-date-utils\").DateUtils;

DateUtils.is24hFormat().then(function (is24h) {
  console.log('This device is currently ' + (is24h ? '' : 'not') + ' running in 24 hour format.');
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-texttospeech-enduco":{"name":"nativescript-texttospeech-enduco","version":"1.0.10","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript-TextToSpeech :loudspeaker:

\n

A Text to Speech NativeScript plugin for Android & iOS

\n

Native Controls

\n\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-texttospeech
\n

This command automatically installs the necessary files, as well as stores nativescript-texttospeech as a dependency in your project's package.json file.

\n

Video Tutorial

\n

egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

\n

Usage

\n
/// javascript
var TextToSpeech = require('nativescript-texttospeech');

/// TypeScript
import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeech';

let TTS = new TNSTextToSpeech();

let speakOptions: SpeakOptions = {
  text: 'Whatever you like', /// *** required ***
  speakRate: 0.5, // optional - default is 1.0
  pitch: 1.0, // optional - default is 1.0
  volume: 1.0, // optional - default is 1.0
  locale: 'en-GB', // optional - default is system locale,
  finishedCallback: Function // optional
};

// Call the `speak` method passing the SpeakOptions object
TTS.speak(speakOptions).then(
  () => {
    // everything is fine
  },
  err => {
    // oops, something went wrong!
  }
);
\n

API

\n\n

If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code. If both are set, the custom locale will be used.

\n

The plugin checks whether the supplied locale/language code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

\n

Example with language code only:

\n
let speakOptions: SpeakOptions = {
  text: 'Whatever you like', // *** required ***
  language: 'en' // english language will be used
};
\n

Example with locale:

\n
let speakOptions: SpeakOptions = {
  text: 'Whatever you like', // *** required ***
  locale: 'en-AU' // australian english language will be used
};
\n

Tip

\n\n

Android Only Methods

\n\n

Credits

\n

Inspired by James Montemagno's TextToSpeech Xamarin plugin

\n

Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-taptic-engine":{"name":"nativescript-taptic-engine","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/EddyVerbruggen/nativescript-taptic-engine/blob/master/LICENSE"},"readme":"

NativeScript Taptic Engine plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n\n

Supported platforms

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-taptic-engine
\n

Demo app (NativeScript Core, XML)

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device and you'll see this:

\n\n

Demo app (NativeScript-Vue)

\n

We also have a Vue demo! Check out the demo-vue app!

\n\n

To run it locally:

\n
git clone https://github.com/EddyVerbruggen/nativescript-taptic-engine
cd nativescript-taptic-engine/src
npm run demo-vue.ios
\n

Official API (requires at least iPhone 7)

\n

It's recommended to use this API, but you're limited to iPhone 7 and higher.\nAs per Apples guidelines\nthere's no runtime way to determine if the device is capable of providing haptic feedback,\nso the Promise can largely be ignored so I'm not even showing them here.

\n

The API names are modeled after what Apple has called them:

\n

selection

\n

Use selection feedback generators to indicate a change in selection.

\n
TypeScript
\n
// require the plugin
import {TapticEngine} from \"nativescript-taptic-engine\";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.selection();
\n
JavaScript
\n
// require the plugin
var TapticEngine = require(\"nativescript-taptic-engine\").TapticEngine;

// instantiate the plugin
var tapticEngine = new TapticEngine();

tapticEngine.selection();
\n

notification

\n

Use notification feedback generators to indicate successes, failures, and warnings.

\n

There are 3 notification types: TapticEngineNotificationType.SUCCESS (default), .WARNING, and .ERROR.

\n
TypeScript
\n
// require the plugin
import {TapticEngine, TapticEngineNotificationType} from \"nativescript-taptic-engine\";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.notification({
  type: TapticEngineNotificationType.ERROR
});
\n

impact

\n

Use impact feedback generators to indicate that an impact has occurred.\nFor example, you might trigger impact feedback when a user interface object\ncollides with something or snaps into place.

\n

There are 3 impact styles: TapticEngineImpactStyle.LIGHT, .MEDIUM (default), and .HEAVY.

\n
TypeScript
\n
// require the plugin
import {TapticEngine, TapticEngineImpactStyle} from \"nativescript-taptic-engine\";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.impact({
  type: TapticEngineImpactStyle.HEAVY
});
\n

Unofficial API (requires at least iPhone 6s)

\n

BEWARE This uses an undocumented feature which may get your app rejected when reviewed by Apple.\nPeople have used this approach without problems though.

\n

weakBoom

\n

This triggers the same effect as the 'Peek' in 'Peek & Pop', a very brief vibration.

\n
TypeScript
\n
// require the plugin
import {TapticEngineUnofficial} from \"nativescript-taptic-engine\";

// instantiate the plugin
let tapticEngineUnofficial = new TapticEngineUnofficial();

tapticEngineUnofficial.weakBoom().then(() => {
  // note that unsupported iOS devices like the simulator also end up here
}, (err) => {
  console.log(\"You're running on Android. Meh.\");
});
\n
JavaScript
\n
// require the plugin
var TapticEngineUnofficial = require(\"nativescript-taptic-engine\").TapticEngineUnofficial;

// instantiate the plugin
var tapticEngineUnofficial = new TapticEngineUnofficial();

tapticEngineUnofficial.weakBoom().then(
  function() {
    // note that unsupported iOS devices like the simulator also end up here
    console.log(\"Boomed weakly, if available.\");
  }, function () {
    console.log(\"You're running on Android. Meh.\");
  }
);
\n

strongBoom

\n

This triggers the 'Pop' effect of 'Peek & Pop', which is a bit more profound than the 'Peek' effect.

\n

Codewise this is exactly the same as weakBoom, except for the function name of course.

\n

burst

\n

This triggers the 'Nope' effect you get when fi. force touching a home icon which doesn't have any action. It's a short burst of 3-ish 'weak booms'.

\n

Codewise this is exactly the same as weakBoom and strongBoom, except for the function name of course.

\n

Changelog

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textfield-ex":{"name":"nativescript-textfield-ex","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript TextField Extended

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

TextField Extended for allow only numbers (1234567890).

\n

Now you can use a new value for keyboardType property: digits.

\n
<TextFieldEx keyboardType=\"digits\"></TextFieldEx>
\n

Installation

\n
tns plugin add nativescript-textfield-ex
\n

Demo app (Core)

\n

Check out the demo folder.

\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:ui=\"nativescript-textfield-ex\">

  <StackLayout class=\"p-20\">

    <!-- Plugin -->
    <ui:TextFieldEx hint=\"0000\" class=\"tf-ex\" keyboardType=\"digits\"></ui:TextFieldEx>

    <!-- Original -->
    <TextField hint=\"0000\" class=\"tf-ex\" keyboardType=\"number\"></TextField>

  </StackLayout>
</Page>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ngrx-devtools-nativescript":{"name":"ngrx-devtools-nativescript","version":"7.0.0","license":"MIT","readme":"

Looking for maintainers

\n

This repo is looking for maintainers. If you are interested please ping me on https://twitter.com/ufsa

\n

ngrx-devtools-nativescript

\n

Implementation of a devtools monitor similar to those available in @ngrx/store-devtools for NativeScript.

\n

Install

\n
npm i ngrx-devtools-nativescript
\n

How to use

\n

First of all you should instrument your @ngrx/store using StoreModule.provideStore(...). Check out @ngrx/devtools readme for how to do that.

\n

Import the NativeScriptDevToolsMonitors in your app(or other) module and add store-dev-tools instrumentation by importing StoreDevtoolsModule.instrumentStore():

\n
import { NgModule } from \"@angular/core\";
import { StoreModule } from '@ngrx/store';
import { NativeScriptDevToolsMonitors } from \"ngrx-devtools-nativescript\";
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptDevToolsMonitors,
    StoreModule.provideStore({ ... }),
    StoreDevtoolsModule.instrumentStore()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule { };
\n

Use <ns-dock-monitor> component inside you application - preferably in the root of the visual tree.

\n
import { NSDockMonitor } from \"ngrx-devtools-nativescript\";

@Component({
    selector: \"my-app\",
    directives: [NSDockMonitor],
    template: `
    <grid-layout>
        //...
        <ns-dock-monitor screenCover=\"0.5\"></ns-dock-monitor>
    </grid-layout>`
})
export class AppComponent {
    //...
}
\n

You can specify what part of the screen should be covered by the dev-tools slideout with the screenCover property.

\n

Example

\n

Example projects:

\n\n

Pure Redux example with Vanilla JS {N} App

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynamic-label":{"name":"nativescript-dynamic-label","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-dynamic-label

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

Features

\n\n

Installation

\n

To get started, install the plugin, per normal methods:

\n
tns plugin add nativescript-dynamic-label
\n

Usage

\n

Generally, DynamicLabel can be used in either\nXML markup or in code much the same way as a normal Label\ncontrol.

\n

Use via XML markup

\n

Use pretty much the same as a regular Label.

\n
Import the plugin into the namespace
\n

In your page declaration, include a reference to the\nDynamicLabel module, like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\"
      xmlns:dl=\"nativescript-dynamic-label\"
      class=\"page\"
\n

the xmlns:dl="nativescript-dynamic-label" is the part you want\nto add, and it sets the namespace dl as relating to the DynamicLabel module.

\n

Then, invoke a DynamicLabel within your markup like so..

\n
<StackLayout> <!-- or whatever layout container you are using... -->
    <dl:DynamicLabel text=\"Hello, World!\"></dl:DynamicLabel>
</StackLayout>
\n

You can use all the properties of <Label> for the dynamic label\nalso. The most relevant of these being width and textWrap.\nNote that these properties can also be set via CSS.

\n

Use via code

\n

You may create and use a DynamicLabel in the same ways as\na normal Label.
\nYou may create one with new DynamicLabel() or\nretrieve an existing one from the page with\npage.getViewById('your-D-Label-ID)\nfrom there, set or get the properties you would of a normal\nlabel, e.g. dlabel.text = 'Hello, World'.\nDo not set a font size to the dynamic label for display, as it\nwill find its own. The text fitting is triggered on any\nnew text change.

\n

Like the normal NativeScript <Label> and other Nativescript controls,\ntext may be set via the Observable class and changes made to\nthe bound Observable property.

\n
Using to measure text
\n

To use this class to measure text, but not necessarily display it,\nyou can call the getTextExtent method of the class.\nTo use this, first set a font size to the control, and then\npass the maximum width and height you are attempting to\nfit text for to getTextExtent, and it will return the bounds of the\ntext, as well as an indication of whether or not the text will\nfit in this space without being truncated, and also the text\nper-line as determined by the internal layout algorithm.

\n

Note that the line layout may not necessarily match what will be displayed\nby the actual control, since each platform handles its word wrapping\nand fitting in subtle but often significantly different ways.
\nHowever, it should be reasonably representative of what likely\nwould display if set to the control at this font size (assuming\ntext wrap is enabled). This information may be more useful for any\ndo-it-yourself layout tasks than for actual representation of what the\ncontrol renders.

\n

let computedWidth, computedHeight;
let maxWidth = 100; // constrain to this width
let maxHeight = 1000; // let it find the height < this
let myDLabel = page.getViewById('myDLabel');
myDLabel.fontSize = 20; // let's compute for this font size
let bounds = myDLabel.getTextExtent(myText, maxWidth, maxHeight);
if(bounds.wasCut) {
    console.error(\"Text doesn't fit in these bounds at this size!\")
} else {
    computedWidth = bounds.width;
    computedHeight = bounds.height;
}
// computed width,height can now inform how big to make
// a display that can hold this text at this size.

// Additional information we get from this about the 
// text per lines (according to internal layout) can be
// retrieved like this:
for (let i = 0; i< bounds.lines.length; i++) {
    let t = bounds.lines[i].text;
    // let y = bounds.lines[i].top; // if we wanted to draw it
    console.log(t)
}
\n

API

\n

DynamicLabel inherits from Label and so has all of the\ncharacteristics of that class.

\n

Properties specifically important to DynamicLabel are listed here.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
textWrapinherits from Labelturn this on to wrap text. Changes the choices made by the text measurer / formatter.
widthinherits from Labelmust be set (direct or CSS) for sizing to be effective
\n
public getTextExtent(
\n
       text : string, \n       textSize: number, \n       maxWidth : number, \n       maxHeight: number) : FitResults`\n
\n

Use to measure text as it will appear in the current typeface\nin the given font size (textSize) constrained to the bounds\n(maxWidth, maxHeight). The returned FitResults\nobject looks like this:

\n
{  
   width: number,  // width of text extent bounds
   height: number, // height of text extent bounds
   lines: LineInfo[], // array of line info, see below
   wasCut: boolean // true if text was truncated at this size
 }
\n

each entry in the lines property above will be an object\nin this format (LineInfo):

\n
 {  
  text: string, // text that appears on this line
  top: number // y offset to start drawing text
  }
\n
public fitText() : void
\n

may be called explicitly to force a recompute/redisplay of text.\nNormally not needed, as this is called after any text or layout changes to the DynamicLabel control.

\n

Tips and Caveats

\n
Multiline displays
\n

If the property textWrap is false (the default), a font size\nwill be picked that allows all of the text to appear in one\nline according to the width of the control, regardless of the\ncontrol height.\nIf textWrap is true, the control is enabled for wrapping. This\nis done according to the algorithms of the underlying platform\nas has been implemented for Label.
\nTo assist its predictions, DynamicLabel computes the word breaks\nand line spans itself and uses these for measurement.

\n

A paradox of the multiline scenario is that the fitter is working to find\nmeasurements that fit first in width, and selecting a smaller font if\nthis is not acheived, but with multiline text, the new font size may change\nthe layout and collapse to fewer lines -- which creates a wider width\nrather than a smaller one, and so the tendency is to result in\na smaller font choice than one might be able to manually choose.

\n

You can avoid this if you have text that you already know is\nmultiline, and placing hard breaks (\\n) in the string to force\na specific layout. You still must set 'textWrap=true' to allow this to\ndisplay multiple lines, but it should honor your layout and find a size that\nis reasonable for your control size.

\n

Known Issues

\n
Still early in development!
\n

As of 2/14/2020 this is the first version released for testing.

\n

As issues arise, they will be recorded in this space.

\n

Contributing

\n

Comments and contributions welcome!\nPlease submit your Pull Requests, with as much explanation and examples you can provide to\nsupport your changes.

\n

Feel free to email me at steve@ohmert.com to start\na discussion for other suggestions.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tinyengine":{"name":"nativescript-tinyengine","version":"1.0.3","license":"Apache-2.0","readme":"

Tiny Engine

\n

\"npm\" \"npm

\n

A little 2d game engine for nativescript.

\n

Installation

\n
tns plugin add nativescript-tinyengine
\n

Screenshots

\n

\"Screenshot\"

\n

Usage

\n

First in your XML you need to add a GridLayout

\n
<GridLayout id=\"container\" width=\"300\" height=\"300\" backgroundColor=\"lightgreen\">
        
</GridLayout>
\n

then in your typescript file import everything required

\n
import { World, Entity, Vector2, OBB, CollisionResponse, Shape, Component, CircleShape, CubeShape, ImageShape } from 'nativescript-tinyengine';
\n

now you just need to instantiate a World object on your GridLayout and start using this library. Here is a basic code.

\n
let container: LayoutBase = page.getViewById(\"container\");

let world: World = new World(container, 300, 300);

let cubeEntity: Entity = new Entity(new Vector2(0, 50), new Vector2(0, 0), 45, new CubeShape(20, 20, '#FFFFFF'));
world.addEntity(cubeEntity);

setInterval(function () { world.tick(); }, 20);
\n

Documentation

\n

You can find the documentation of the library here

\n

Components / Collisions

\n

Component is an interface that you can implements. This interface has the following methods:

\n\n

Components can be attached throught the addComponent<T extends Component>(type: (new () => T)) of the Entity class.

\n

Each entity got a property collisionResponse which can be set to NONE or COLLIDE. That's how are handled collision. If you want to have something custom, put the collision response to NONE and do your custom logic into onCollide(collider: Entity, collided: Entity) of a component.

\n

License

\n

Apache License Version 2.0, May 2019

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bugsnag":{"name":"nativescript-bugsnag","version":"1.0.15","license":"ISC","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Usage

\n
import { Client } from 'nativescript-bugsnag';
const bugsnag = new Client();
bugsnag
    .init('YOUR_API_KEY')
    .then(res => {
        bugsnag.enableConsoleBreadcrumbs();
        bugsnag.handleUncaughtErrors();
        console.log('bugsnag did init', !!res);
    })
    .catch(err => {
        console.log('bugsnag  init failed', err);
    });
\n

Reporting NativeScript errors

\n

The handleUncaughtErrors method ensures all unhandled NativeScript errors will be caught by Bugsnag in production, using a custom error handler.

\n

Reporting handled errors

\n

If you would like to send a handled error to Bugsnag, you can pass any Error object to Bugsnag’s notify method:

\n
try {
  // potentially crashy code
} catch (error) {
  bugsnag.notify(error);
}
\n

Reporting promise rejections

\n

To report a promise rejection, use notify() as a part of the catch block:

\n
new Promise(function(resolve, reject) {
  /* potentially failing code */
})
.then(function () { /* if the promise is resolved */ })
.catch(function (error) {
  bugsnag.notify(error); /* if the promise is rejected */
});
\n

Sending diagnostic data

\n

Automatically captured diagnostics

\n

Bugsnag will automatically capture and attach the following diagnostic data:

\n\n

Attaching custom diagnostics

\n

It can often be helpful to attach application-specific diagnostic data to exception reports. This can be accomplished by adding a report callback to notify. The callback is invoked before the report is sent to Bugsnag:

\n
bugsnag.notify(error, function(report) {
  report.metadata = { \"account\": {
    \"company\": \"Acme Co\",
    \"id\": 123
    }
  }
});
\n

Identifying users

\n

In order to correlate errors with customer reports, or to see a list of users who experienced each error, it is helpful to capture and display user information. Information set on the Bugsnag client is sent with each error report:

\n
bugsnag.setUser('1234', 'Jessica Jones', 'jess@example.com');
\n

Logging breadcrumbs

\n

In order to understand what happened in your application before each crash, it can be helpful to leave short log statements that we call breadcrumbs. The last several breadcrumbs are attached to a crash to help diagnose what events lead to the error.

\n

Automatically captured breadcrumbs

\n

By default, Bugsnag captures common events including:

\n\n

Attaching custom breadcrumbs

\n

To attach additional breadcrumbs, use the leaveBreadcrumb function:

\n
bugsnag.leaveBreadcrumb('load main view', {type: 'navigation'});
\n

Session tracking

\n

Bugsnag tracks the number of “sessions” that happen within your application. This allows you to compare stability scores between releases and helps you to understand the quality of your releases.

\n

Sessions are captured and reported by default. This behaviour can be disabled using the autoCaptureSessions configuration option.

\n

Using this option, Bugsnag will report a session each time:

\n\n

If you want control over what is deemed a session, you can switch off automatic session tracking with the autoCaptureSessions option, and manage the session lifecycle using startSession(), stopSession() and resumeSession().

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"fork-nativescript-slides":{"name":"fork-nativescript-slides","version":"2.4.0","license":"MIT","readme":"

NativeScript Slides for iOS and Android

\n

\"npm\"\n\"npm\"

\n

The plugin formally known as nativescript-intro-slides

\n

Intro slides example:

\n

\"Nativescript

\n

Image carousel example:

\n

\"Nativescript

\n

videos by Brad Martin

\n

Example Usage:

\n

XML

\n

\t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\">
\t\t\t<Slides:Slide class=\"slide-1\">
\t\t\t\t<Label text=\"This is Panel 1\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-2\">
\t\t\t\t<Label text=\"This is Panel 2\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-3\">
\t\t\t\t<Label text=\"This is Panel 3\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-4\">
\t\t\t\t<Label text=\"This is Panel 4\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-5\">
\t\t\t\t<Label text=\"This is Panel 5\"  />
\t\t\t</Slides:Slide>
\t</Slides:SlideContainer>
\n

CSS

\n
.slide-1 {
  background-color: darkslateblue;
}

.slide-2 {
  background-color: darkcyan;
}
.slide-3 {
  background-color: darkgreen;
}

.slide-4 {
  background-color: darkgoldenrod;
}
.slide-5 {
  background-color: darkslategray;
}
label {
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}
\n

Great for Intros/Tutorials to Image Carousels.

\n

To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

\n

when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

\n

add as many <Slides:Slide> as you want.

\n

Methods for SlideContainer

\n\n

Attributes for SlideContainer

\n\n

Indicators

\n

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

\n
.slide-indicator-inactive {
  background-color: #fff;
  opacity: 0.4;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

.slide-indicator-active {
  background-color: #fff;
  opacity: 0.9;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}
\n

Events

\n\n

Angular 2 compatibility

\n

I've started working on a Angular 2 version they can be checked out here:\nAngular 2 version of slides

\n

If you want to use this plugin with Angular 2 the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

\n

Plugin Development Work Flow:

\n\n

Known issues

\n\n

How To: Load slides dynamically

\n

You want to hook into the loaded event of the view and then create your view elements.

\n

Demo Code

\n
<Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
\n
import * as slides from 'nativescript-slides/nativescript-slides';

export function onSlideContainerLoaded(args) {
  let slideContainer = <slides.SlideContainer>args.object;

  //Construct the slides
  slideContainer.addChild(getSlide('Page 1', 'slide-1'));
  slideContainer.addChild(getSlide('Page 2', 'slide-2'));
  slideContainer.addChild(getSlide('Page 3', 'slide-3'));
  slideContainer.addChild(getSlide('Page 4', 'slide-4'));
  slideContainer.addChild(getSlide('Page 5', 'slide-5'));
}

function getSlide(labelText: string, className: string) {
  let slide = new slides.Slide();
  slide.className = className;
  let label = new labelModule.Label();
  label.text = labelText;
  slide.addChild(label);

  return slide;
}
\n

Thanks to these awesome contributors!

\n

Brad Martin

\n

Obsessive Inc/Abhijith Reddy

\n

Victor Nascimento

\n

Steve McNiven-Scott

\n

Leo Caseiro

\n

Todd Anglin

\n

Andrew Lo

\n

Raúl Uranga

\n

And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

\n

Contributing guidelines

\n

Contributing guidelines

\n

License

\n

MIT

\n

for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok":{"name":"nativescript-opentok","version":"2.0.1","license":"MIT","readme":"

Nativescript OpenTok

\n

\"npm\"\n\"npm\"

\n

A Nativescript plugin for the OpenTok iOS and Android SDK.

\n

OpenTok: https://tokbox.com/developer/

\n

Getting Started

\n

Requirements

\n\n

Installation

\n

Node Package Manager (NPM)

\n\n

Integration

\n

Routed Sessions

\n
View
\n

You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

\n

The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

\n
<StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
<OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
\n

Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

\n
import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

private _apiKey:string = 'API_KEY';
private _sessionId: string = 'SESSION_ID';
private _token: string = 'TOKEN';

private publisher: TNSOTPublisher;
private subscriber: TNSOTSubscriber;

private session: TNSOTSession;

constructor(private page: Page) {
   super();
   this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
   this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
   this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
   this.initPublisher();
   this.initSubscriber();
}

initPublisher() {
   this.session.connect(this._token);
   this.publisher.publish(this.session, '', 'HIGH', '30');
   this.publisher.events.on('streamDestroyed', (result) => {
       console.log('publisher stream destroyed');
   });
}

initSubscriber() {
   this.session.events.on('streamCreated', () => {
       this.subscriber.subscribe(this.session);
   });
}
\n

Special Articles

\n\n

Images

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iPhoneiPad
\"iPhone\"iPad
\n

Notes

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-multiple-screen-css":{"name":"nativescript-multiple-screen-css","version":"1.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

nativescript-multiple-screen-css

\n

A NativeScript plugin to deal with multiple screen sizes and device orientation

\n\n
Icon made by Butterflytronics from www.flaticon.com is licensed by CC 3.0 BY
\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-multiple-screen-css
\n

What does it do?

\n

It automatically adds the classes to the current Page's cssClass variable:

\n
'android' or 'ios' or 'windows'\n'portrait' or 'landscape'\n'wXXX' where XXX is the matched size from the sizeGroupW\n'hXXX' where XXX is the matched size from the sizeGroupH\n'swXXX' where XXX is the matched size from the sizeGroupSW\n
\n

Usage

\n

To use the module you just require() it:

\n
require( 'nativescript-multiple-screen-css' );
\n

Notice: You do NOT need to keep a reference to it; and you only need to load it once. You can add it to your app.js file and forget about it.

\n

It will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.

\n

How does this help?

\n

Plain Awesome NativeScript (PAN)

\n
StackLayout {
  background-color: red;
}

.android StackLayout {
  background-color: green;
}
\n

NativeScript Angular (NAN)

\n
StackLayout {
  background-color: red;
}

.android :host StackLayout {
  background-color: green;
}
\n

So on ios and windows the background would be red, on a android the color is green.\nPlease note, in Angular you MUST prefix the rule with /deep/ or preferably :host for it to work correctly!

\n

Why use this?

\n

You can set all the normal CSS values this way include width, height, font-size. This allows you to differentiate your UI based on current screen width or height or smallest width (sw).

\n

Size groups

\n

The plugin will create .wXXX and .hXXX where XXX is the DPI of the screen. The plugin comes with default size groups [1280, 1024, 800, 600, 540, 480, 400, 360, 320], and you can configure your own size groups for both .wXXX, .hXXX and .swXXX by calling:

\n
var multipleScreenCss require( 'nativescript-multiple-screen-css' );
multipleScreenCss.sizeGroupingsW([size1,size2,size3,...]);// For .wXXX classes
multipleScreenCss.sizeGroupingsH([size1,size2,size3,...]);// For .hXXX classes
multipleScreenCss.sizeGroupingsSW([size1,size2,size3,...]);// For .swXXX classes
\n

The way size group css classes is determined is that if the screen height is 960dpi and width 600dpi, it would then get the class .h800 because it is bigger than 800 and smaller than 1024, and class .w600 because it is exactly 600, and class .sw600 because that is the smallest possible width no matter the rotation.

\n

So it sets five separate css classes on startup of each page; you can use any (or all) of them to use as css rules.

\n\n

Please note these are calculated each page load.

\n

Demo

\n

The demo will show you the css class names it generated.

\n

License

\n

This software is available under the MIT license.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@adel12790/nativescript-socketio":{"name":"@adel12790/nativescript-socketio","version":"5.0.7","license":"Apache-2.0","readme":"

Nativescript nativescript-socketio

\n
ns plugin add @adel12790/nativescript-socketio
\n

API documentation

\n

Documentation for the latest stable release

\n

Socket.IO platform included plugins versions

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pull-reveal":{"name":"nativescript-pull-reveal","version":"1.2.0","license":"Apache-2.0","readme":"

nativescript-pull-reveal

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n
Android
\n

\"demo

\n
iOS
\n

\"demo|

\n

(buggy on iOS)

\n

For reasons not fully understood, the iOS version displays odd and inconsistent behaviors.\nThese problems include:

\n\n

The Pull Reveal component works well across all tested Android layout sizes. The only caveat found here is that\nvery small displays may not be large enough to hold the full drawer content, and thus this bit of content will be\nunreachable on these small devices.

\n

Features

\n\n

Installation

\n

To get started, install the plugin, per normal methods:

\n
tns plugin add nativescript-pull-reveal
\n

Usage

\n

Although a Pull Reveal drawer can be added via code alone, the\nmore common approach would be to declare it in XML and optionally\ncommunicate with it from the page code, like most other Nativescript\ncomponents.

\n

XML

\n

There are two components to declare in order to set up a\nPull Reveal component.\nFor the page you wish to include the PullReveal component, you\nmust first import the namespace for the control in the Page declaration,\nlike this:

\n
<Page
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:pr=\"nativescript-pull-reveal\"
>
\n

This set the prefix pr as a reference to the PullReveal plugin module.\nYou can use any legal namespace variable name here, but pr is used\nthroughout these examples.

\n

There are two components in the Pull Reveal module you need to\nset up in order to stage a Pull Reveal component to your page.

\n

First, you must declare an enclosing containter as a PullRevealContext.\nThis is done by putting the <pr:PullRequestContext> tag at the top of your\npage, and encompassing your page layout.

\n

For example, suppose your non-pull-reveal-enhanced page looks like this:

\n
    <StackLayout> 
        <Image src=\"~/images/happyface.png\"/>
        <Label text=\"Here is some content\"/>
    </StackLayout>
\n

then you want to wrap it as follows:

\n
    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src=\"~/images/happyface.png\"/>
            <Label text=\"Here is some content\"/>
        </StackLayout>
    </pr:PullRevealContext>
\n

Finally, we need to create the PullReveal Drawer itself and\npopulate its content:

\n
    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src=\"~/images/happyface.png\"/>
            <Label text=\"Here is some content\"/>
        </StackLayout>

        <pr:PullRevealDrawer id=\"pullDrawer\" anchor=\"bottom\" backgroundColor=\"black\" color=\"whitesmoke\" >
            <Label text=\"Item 1\"/>
            <Label text=\"Item 2\"/>
            <Label text=\"Item 3\"/>
        </pr:PullRevealDrawer>
    </pr:PullRevealContext>
\n

You should be able to put all types of content into the pull reveal drawer,\nand indeed, the PullReveal makes a great vehicle for pull-out settings and configuration needs.

\n

The PullReveal accepts the following properties of its own:

\n\n

Beginning with version 1.2.0, there is new property:

\n\n

Standard properties for layout containers may also be used.
\nStyling options may of course also be applied via CSS classes, like other Nativescript components.

\n

Code

\n

You may prefer to populate the child tree of the Pull Reveal content\nvia code, particularly if your content is highly dynamic.

\n

One example of this is to have an empty PullReveal declared in\nthe xml markup:

\n
    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src=\"~/images/happyface.png\"/>
            <Label text=\"Here is some content\"/>
        </StackLayout>

        <pr:PullRevealDrawer id=\"pullDrawer\"/>
    </pr:PullRevealContext>
\n

and in code, get the instance of this by Id, then\nfill it with your content items.

\n
    import {PullReveal, PullRevealPage} from 'nativescript-pull-reveal';
    const pullDrawer = page.getViewById('pullDrawer');
    const lbl = new Label();
    lbl.text = \"Hello World\";
    pullDrawer.addChild(lbl);
    //... and so on
\n

The plugin demo app shows this feature via the "add/remove foobar lines" option. Clicking on this stepper\nadds or removes child elements to the drawer.

\n

Programatically opening and closing

\n

The open() and close() methods may be called by hendlers\nto control the behavior of the drawer during actions.

\n

For example, consider a slide-down control panel scenario. On\nthis panel, there are several actions, implemented as buttons\nwhose 'tap' property points to a handler within the page code.\nAt the close of the handler function's operation, it calls the\nclose() method on the PullReveal to shut the drawer. Something like this:

\n
export function handleSetting (args) {
    // assumes pullDrawer was defined previously
    //... handle the action the button represents
    // close the drawer
    pullDrawer.close()
}
\n

The close() function without parameters will close the\ndrawer immediately, with no animation.\nHowever, you can pass an optional parameter containing the\nnumber of milliseconds over which the door should animate closed.\nThus pullDrawer.close(2000) would close the door over a 2 second timespan.

\n

There is also an open() method that may be called to programatically\nopen the PullReveal drawer. Like the close() method, it also\nwill accept an optional parameter of milliseconds over which to animate\nthe opening of the drawer.

\n

This effect may be nice to use as a notification vehicle for various forms of\ninformation to be presented to a user in certain types of applications.

\n

The plugin demo app shows this feature in the "Auto Open and Close" example.

\n
\n

Construction and API

\n

PullRevealContext inherits from GridLayout and so has all of the\ncharacteristics of that class. It is used to provide a parallel context in the page\nin which the Pull Reveal drawer can slide over the content.

\n

PullRevealDrawer inherits from StackLayout and so has all of the\ncharacteristics of that class. It is used as the parent container for the\ncontent that you add to it.

\n

PullRevealDrawer defines the following properties

\n

These properties may defined in the XML or read/written as members of the PullRevealDrawer object instance in code.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
exposed''Optional specification of how much of the drawer should be revealed when closed (DIP width/height)
anchor'bottom'one of: 'top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'. Defines the origin home position of the control.
stopsarray of 4 values: [ min Y, max Y, min X, max X ] values for each of the translation limits.
\n

and the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodParametersDescription
openanimTime: numberOpens the panel programatically, if optional animTime parameter is passed, it is the number of milliseconds the opening will take.
closeanimTime: numberCloses the panel programatically, if optional animTime parameter is passed, it is the number of milliseconds the closing will take.
\n

CSS

\n

The demo app utilizes CSS classes to style the drawer, assigning a background color or graphic and padding values. You can create and apply\nsimilar classes in your own applications to style your drawer as needed.

\n

The plugin itself does not provide any CSS values.

\n

Known Issues

\n
Very first 1.0.0 version was garbage
\n

Don't use the 1.0.0 version, as it was, at best, a failed but inspirational prototype. It suffered several\nstructural failings and only worked in a limited set of contexts.

\n

Version 1.1.0 is a completely re-written approach.

\n
Problems with iOS!
\n

Version 1.1.0 still has issues though, with inconsistencies on iOS.
\nThe gist of these problems are listed above, and on the GitHub issues page.

\n
orientation response
\n

The current version 1.1.0 does not respond properly to an orientation change.

\n
Version 1.0.0
\n\n
Version 1.1.0
\n\n
Version 1.1.1
\n\n
Version 1.2.0
\n\n
\n

Source code and Contributing

\n

Please contribute, especially if you have an idea of how to improve the shortcomings of this control!

\n

The source for this package is maintained on GitHub at:\nhttps://github.com/tremho/nativescript-pull-reveal

\n

Structure of the project is based on the templates generated\nwith the Nativescript Plugin Seed project.

\n

Comments and contributions welcome!\nPlease submit your Pull Requests, with as much explanation and examples you can provide to\nsupport your changes.

\n

Outstanding issues and requests for help are listed here: https://github.com/tremho/nativescript-pull-reveal/issues

\n

Or, feel free to email me at steve@ohmert.com to start\na discussion for other suggestions.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-videorecord":{"name":"nativescript-danem-videorecord","version":"1.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript VideoRecorder

\n

This is derived from nativescript-videorecorder with ONLY a change to work with AndroidX.\nOnce nativescript-videorecorder plugin is updated, this will be deprecated.

\n

Install

\n

tns plugin add nativescript-videorecorder-x

\n

QuickStart

\n

JavaScript

\n
var vr = require('nativescript-videorecorder-x');

var options = {
    saveToGallery: true,
    duration: 30,
    format: 'mp4',
    size: 10,
    hd: true,
    explanation: 'Why do i need this permission'
}

var videorecorder = new vr.VideoRecorder(options);

videorecorder.record().then((data)=>{
  console.log(data.file)
}).catch((err)=>{
  console.log(err)
})
\n

TypeScript

\n
import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder-x';

const options: VideoRecorderOptions = {
    hd: true
    saveToGallery: true
}
const videorecorder = new VideoRecorder(options)

videorecorder.record().then((data) => {
    console.log(data.file)
}).catch((err) => {
    console.log(err)
})
\n

VideoRecorder

\n

Options

\n

Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

\n\n

Additionnal parameters for Android:

\n\n

Additionnal parameters for iOS:

\n\n

VideoRecorder attributes:

\n\n

VideoRecorder methods:

\n\n

Promises above can be rejected with:

\n\n

AdvancedVideoView

\n

AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder-x/advanced\">
<recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
\n
const advancedView = page.getViewById(\"camera\");
advancedView.startRecording();
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
start()voidStarts the camera preview
stop()voidStop the camera preview
startRecording()voidStart recording camera preview.
stopRecording()voidStop recording camera preview.
toggleCamera()voidToggles between front or the back camera.
toggleTorch()voidToggles the torch (iOS only for now)
durationintGet the current recording video duration.
cameraPositionBACKvoidGets or Sets camera position
outputOrientationPORTRAITvoidGets or Sets output video orientation
isTorchAvailablebooleanReadOnly: is the torch supported for this camera
torchfalsebooleanEnable/Disable torch (iOS only for now)
qualityMAX_480PvoidGets or sets Video Quality
\n

outputOrientation

\n

Be careful to not change orientation while recording, it's not supported.

\n

Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

\n

This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bubble-navigation":{"name":"nativescript-bubble-navigation","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript Bubble Navigation \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

Overview

\n

Nativescript Bubble Navigation is a navigation tab plugins which provides beautiful navigations.

\n

\n \n \n

\n

Installation

\n
tns plugin add nativescript-bubble-navigation
\n

Usage

\n

TypeScript

\n

xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" 
  xmlns:ui=\"nativescript-bubble-navigation\">
  <GridLayout rows=\"* auto\" colunms=\"*\" backgroundColor=\"{{ bg }}\">
    <StackLayout row=\"0\" class=\"p-20\">
      <Label class=\"h2\" color=\"white\" horizontalAlignment=\"center\" text=\"{{ title }}\"/>
    </StackLayout>
    <ui:BubbleNavigation row=\"1\" tabs=\"{{ tabs }}\" loaded=\"onBubbleNavigationLoaded\" padding=\"12\" tabBackgroundColor=\"white\" elevation=\"8\"/>
  </GridLayout>
</Page>
\n

main-page.ts

\n
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { HelloWorldModel } from './main-view-model';
import { BubbleNavigation, OnTabSelectedEventData } from 'nativescript-bubble-navigation';
let vm = new HelloWorldModel();

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <pages.Page>args.object;
    page.bindingContext = vm;
}

export function onBubbleNavigationLoaded(args) {
    let folding: BubbleNavigation = args.object;
    folding.on('tabSelected', tabSelected);
}

export function tabSelected(args: OnTabSelectedEventData) {
    vm.set('title', args.name.toUpperCase() + ' TAB!');
    vm.set('bg', vm.tabs[args.position].colorInactive);

    console.log('tab selected ' + args.name + ' at position ' + args.position);
}
\n

main-view-model.ts

\n
import { Observable } from 'tns-core-modules/data/observable';
import { BubbleNavigationItem } from 'nativescript-bubble-navigation';

export class HelloWorldModel extends Observable {
  public title: string = 'HOME TAB!';
  public bg: string = '#e57373';
  public tabs: BubbleNavigationItem[];

  constructor() {
    super();

    this.tabs = [
      new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
      new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
      new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
      new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
    ];
  }
}
\n

Angular

\n

app.module.ts

\n
import { BubbleNavigationModule } from \"nativescript-bubble-navigation/angular\";

@NgModule({
    imports: [
        BubbleNavigationModule
    ],
    ...
})
\n

your.component.ts

\n
import { Component, OnInit } from \"@angular/core\";
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

@Component({
  ...
})
export class YourComponent implements OnInit {
    public title: string = 'HOME TAB!';
    public bg: string = '#e57373';
    public tabs: BubbleNavigationItem[];

    constructor() {
        this.tabs = [
            new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
            new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
            new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
            new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
        ];
    }

    ngOnInit(): void {
        ...
    }

    onBubbleNavigationTabSelected(args: OnTabSelectedEventData): void {
        this.title = args.name.toUpperCase() + ' TAB!';
        this.bg = this.tabs[args.position].colorInactive;

        console.log('tab selected ' + args.name + ' at position ' + args.position);
    }
}
\n

your.component.html

\n
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout rows=\"* auto\" colunms=\"*\" [backgroundColor]=\"bg\">
    <StackLayout row=\"0\" class=\"p-20\">
        <Label class=\"h1\" color=\"white\" horizontalAlignment=\"center\" [text]=\"title\"></Label>
    </StackLayout>

    <BubbleNavigation (tabSelected)=\"onBubbleNavigationTabSelected($event)\" row=\"1\" [tabs]=\"tabs\"
        loaded=\"onBubbleNavigationLoaded\" padding=\"12\" tabBackgroundColor=\"white\" elevation=\"8\"></BubbleNavigation>
</GridLayout>
\n

Vue

\n

app.js

\n

import BubbleNavigation from \"nativescript-bubble-navigation/vue\";

Vue.use(BubbleNavigation);

new Vue({
  ...
}).$start();
\n

your-component.vue

\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>
    <GridLayout rows=\"* auto\" colunms=\"*\" :backgroundColor=\"bg\">
      <StackLayout row=\"0\" class=\"p-20\">
        <Label class=\"h1\" color=\"white\" horizontalAlignment=\"center\" :text=\"title\"></Label>
      </StackLayout>

      <BubbleNavigation
        @tabSelected=\"onBubbleNavigationTabSelected\"
        row=\"1\"
        :tabs=\"tabs\"
        padding=\"12\"
        tabBackgroundColor=\"white\"
        elevation=\"8\"
      />
    </GridLayout>
  </Page>
</template>

<script>
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

export default {
    data() {
        return {
            tabs: [
              new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
              new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
              new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
              new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
            ],
            title: 'HOME TAB!',
            bg: '#e57373',
        }
    },
    methods: {
        onBubbleNavigationTabSelected(args) {
            this.title = `${args.name.toUpperCase()} TAB!`;
            this.bg = this.tabs[args.position].colorInactive;
            console.log('tab selected ' + args.name + ' at position ' + args.position);
        }
    }
};
</script>
\n

API

\n

BubbleNavigation

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
tabsArray<BubbleNavigationItem>Array containing the tabs for the BubbleNavigation\"android\" \"apple\"
paddingnumberSet Bubble Tab padding\"android\"
tabBackgroundColorstringSet Tab Bar Background Color\"android\" \"apple\"
elevationnumberSet tab elevation/ shadow\"android\"
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
tabSelectedfunction ($event: OnTabSelectedEventData) {}Event get trigger every time the user select a new tab that receive an event object\"android\" \"apple\"
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
selectTab(index: number)VoidSelect a tab programmatically\"android\" \"apple\"
\n

BubbleNavigationItem

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescriptionPlatforms
titlestringSelect a tab title\"android\" \"apple\"
iconstringSelect a tab icon\"android\" \"apple\"
colorActivecolorSelect a active color, the color of the tab when it's selected\"android\" \"apple\"
colorInactivecolorSelect a active color, the color of the tab when it isn't selected\"android\" \"apple\"
\n

Limitations

\n

iOS

\n

Currently on ios adding more than four tabs will ressort having your text animations cut.

\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-login-knotes":{"name":"nativescript-wechat-login-knotes","version":"1.0.8","license":"Apache-2.0","readme":"

NativeScript WeChat login plugin

\n

\"npm\"\n\"npm\"\n\"npm\"

\n

Using this plugin you will be able implement wechat login feature in your APP. You can read more details from here

\n

Installation

\n
tns plugin add nativescript-wechat-login-knotes
\n

If you are using NativeScript 5.4.X then you can have a look this branch

\n

Android

\n

If installation was successful then wxapi.WXEntryActivity.android.ts file should be create to your src or app (based on nsconfig.json or webpack.config.js appPath value) directory with your APP ID. If it wasn't successfully created then you will have to create that file manually. You can get code of that file from here. In this case you will require to change YOUR_APP_ID to your app's ID.

\n

If you don't have wxapi.WXEntryActivity.android.ts file in your src or app directory then Android won't receive notification from wechat.

\n

Webpack

\n

You will have to add wxapi.WXEntryActivity.android.ts in your webpack.config.js file so that android runtime can generate appropriate java class. Check the demo custom-webpack.config.js file. You can read here for details.

\n

If you are using NativeScript version 6.4.0 or newer then you can create custom custom-webpack.config.js file & add that file in your nsconfig.json file as below

\n

custom-webpack.config.js

\n
const webpackConfig = require(\"./webpack.config\");
const path = require(\"path\");

module.exports = env => {

    env = env || {};

    const cnf = webpackConfig(env);

    env.appComponents = env.appComponents || [];
    env.appComponents.push(path.resolve(cnf.context, \"wxapi.WXEntryActivity.android.ts\")); 

    const config = webpackConfig(env);

    return config;
}
\n

nsconfig.json

\n
...
\"webpackConfigPath\": \"./custom-webpack.config.js\"
\n

For NativeScript version 6.3.0 or older edit webpack.config.js manually.

\n
const appComponents = [
    \"tns-core-modules/ui/frame\",
    \"tns-core-modules/ui/frame/activity\",
    resolve(__dirname, \"src/wxapi.WXEntryActivity.android.ts\") // or resolve(__dirname, \"app/wxapi.WXEntryActivity.android.ts\") depends on nsconfig.json or webpack.config.js file's appPath value.
];
\n

iOS

\n

Open your Info.plist file from App_Resources/iOS location & add following lines

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleURLName</key>
\t\t<string>weixin</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>WECHAT_APP_ID</string>
\t\t</array>
\t</dict>
</array>
\n

Change WECHAT_APP_ID with your Wechat App ID. Check demo project demo/App_Resources/iOS/Info.plist

\n

Usage

\n

For details you can check the demo project.

\n

In your main.ts or app.ts need to import initWechatSdk(WECHAT_APP_ID, UNIVERSAL_LINK) method with wechat app id.

\n
....
import { initWechatSdk } from \"nativescript-wechat-login-knotes\";

initWechatSdk(\"wxd930ea5d5a258f4f\", \"https://www.your.app.universal.link\");
\n

In any other page

\n
....
import { WechatLogin } from \"nativescript-wechat-login-knotes\";
import * as app from \"tns-core-modules/application\";
\n

Now call in a method

\n
let wechat = new WechatLogin();

if (wechat.isWechatInstalled()) {
    wechat.doLogin(\"nativescript_demo\");
} else {
    console.log(\"wechat isn't installed\")
}
\n

You will get response from wxApiResponse event. So, you can register in that event like this:

\n
app.on('wxApiResponse', function(res){
\tconsole.dir(res) // you will get wechat notification here.
\tconsole.dir(res.object) // information from wechat
}, this);
\n

Ref:

\n

https://open.wechat.com/cgi-bin/newreadtemplate?t=overseas_open/docs/mobile/login/guide#login_guide

\n

https://github.com/aaronbruckner/wechatAndroidLoginDemo

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch":{"name":"nativescript-batch","version":"2.10.3","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-batch/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Batch

\n

A NativeScript module for implementing batch operations.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-batch
\n

inside your app project to install the module.

\n

Example

\n
import Batch = require(\"nativescript-batch\");

export function startBatch() {
    Batch.newBatch(function(ctx) {
                       ctx.log(\"Running 1st operation...\");
                   }).complete(function(ctx) {
                                   ctx.log(\"1st operation completed.\");
                               })
                     .success(function(ctx) {
                                  ctx.log(\"1st operation succeeded.\");
                              })
                     .error(function(ctx) {
                                ctx.log(\"ERROR in operation \" + (ctx.index + 1) + \": \" + ctx.error);
                            })
         .then(function(ctx) {
                   ctx.log(\"Running second operation...\");
               }).complete(function(ctx) {
                               ctx.log(\"Second operation completed.\");
                           })
                 .success(function(ctx) {
                              ctx.log(\"Second operation succeeded.\");
                          })
                 .error(function(ctx) {
                            ctx.log(\"ERROR in operation \" + (ctx.index + 1) + \": \" + ctx.error);
                        })
         .start();
}
\n

Documentation

\n

The full documentation can be found on readme.io.

\n

Data binding

\n

Each batch starts with an empty Observable and an empty ObservableArray that are submitted to each execution context of a callback.

\n

These objects can be used in any View like a ListView or a Label, e.g.

\n

An example of a code-behind:

\n
import Frame = require(\"ui/frame\");
import {Observable} from \"data/observable\";
import Batch = require(\"nativescript-batch\");

export function startBatch(args) {
    var button = args.object;
    
    var label = Frame.topmost().getViewById('my-label');
    var listView = Frame.topmost().getViewById('my-listview');

    var batch = Batch.newBatch(function(ctx) {
                                   // set 'labelText' property of 'bindingContext'
                                   // of 'label'
                                   //
                                   // this is the same object as
                                   // in 'batch.object'
                                   ctx.object.set(\"labelText\", \"Operation #1\");
                                   
                                   // add item for 'bindingContext'
                                   // object of 'listView'
                                   //
                                   // this is the same object as
                                   // in 'batch.items'
                                   ctx.items.push({
                                       text: \"Operation #1 executed\"
                                   });
                               })
                     .then(function(ctx) {
                               ctx.object.set(\"labelText\", \"Operation #2\");
                                   
                               ctx.items.push({
                                   text: \"Operation #2 executed\"
                               });
                           });
    
    var listViewVM = new Observable();
    listViewVM.set(\"batchItems\", batch.items);
                           
    label.bindingContext = batch.object;
    listView.bindingContext = listViewVM;
    
    batch.start();
}
\n

The declaration of the underlying view:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\">
  <GridLayout rows=\"64,*\">
    <Button row=\"0\" text=\"Start\"
            tap=\"{{ startBatch }}\" />
    
    <StackPanel>
      <Label id=\"my-label\"
             text=\"{{ labelText }}\" />
    
      <ListView id=\"my-listview\"
                items=\"{{ batchItems }}\">
              
        <ListView.itemsTemplate>
          <Label text=\"{{ text }}\" />
        </ListView.itemsTemplate>
      </ListView>
    </StackPanel>
  </GridLayout>
</Page>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toasty-ns-7":{"name":"nativescript-toasty-ns-7","version":"14.0.0","license":"MIT","readme":"

NativeScript-Toasty

\n

\"Build\n\"npm\"\n\"npm\"

\n

Install

\n

NativeScript 7.0+

\n

tns plugin add nativescript-toasty

\n

NativeScript < 7.0

\n

tns plugin add nativescript-toasty@3.0.0-alpha.2

\n

Usage

\n

TypeScript

\n
import { Toasty } from 'nativescript-toasty';
import { isIOS } from '@nativescript/core/platform';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();

// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  yAxisOffset: 100,
  xAxisOffset: 10,
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24,
  },
  anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
});

toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();
\n

JavaScript

\n
var toasty = require('nativescript-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n

  constructor(opts: ToastyOptions);

  position: ToastPosition;

  duration: ToastDuration;

  textColor: Color | string;

  backgroundColor: Color | string;

  yAxisOffset?: Length | number;

  xAxisOffset?: Length | number;

  readonly width: number;

  readonly height: number;


  /**
   * Show the Toasty
   */
  show();

  /**
   * Cancels the Toasty
   */
  cancel();

/**
 * Sets the Toast position.
 */
  setToastPosition(value: ToastPosition): Toasty;

/**
 * Sets the Toast duration.
 */
  setToastDuration(value: ToastDuration): Toasty;

/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(value: Color | string): Toasty;

/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(value: Color | string): Toasty;
\n
export enum ToastDuration {
  'SHORT',
  'LONG',
}

export enum ToastPosition {
  'BOTTOM',
  'BOTTOM_LEFT',
  'BOTTOM_RIGHT',
  'CENTER',
  'CENTER_LEFT',
  'CENTER_RIGHT',
  'TOP',
  'TOP_LEFT',
  'TOP_RIGHT',
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Position of the Toast.
   */
  position?: ToastPosition;

  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;

  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-tracking":{"name":"nativescript-version-tracking","version":"1.0.0","license":"MIT","readme":"

\"Bazzite\n\"Travis\"\n\"version\"\n\"License\"

\n

NativeScript Version Tracking \"apple\" \"android\"

\n

Track which versions of your NativeScript App, a user has previously installed.

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-version-tracking
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.

\n

Initialize the plugin

\n

This plugin needs to be initialized when your app starts.

\n

TypeScript

\n
import * as app from 'tns-core-modules/application';
import versionTracking from 'nativescript-version-tracking';

app.on('launch', () => {
    versionTracking.init();
});
\n

Javascript

\n
var app = require('tns-core-modules/application');
var versionTracking = require('nativescript-version-tracking');

app.on('launch', function () {
    versionTracking.init();
});\t
\n

Use the API

\n

You can make use of the plugin whenever you want. For example, a user has launched several previous versions, and this is the first time he's launched the new version 2.0.1:

\n
versionTracking.isFirstLaunchEver;        // false
versionTracking.isFirstLaunchForVersion;  // true
versionTracking.isFirstLaunchForBuild;    // true

versionTracking.currentVersion;           // 2.0.1
versionTracking.previousVersion;          // 2.0.0
versionTracking.firstInstalledVersion;    // 1.0.0
versionTracking.versionHistory;           // [1.0.0, 1.0.1, 1.0.2, 2.0.0, 2.0.1]

versionTracking.currentBuild;             // 18
versionTracking.previousBuild;            // 15
versionTracking.firstInstalledBuild;      // 1
versionTracking.buildHistory;             // [1, 2, 3, 4, 5, 8, 9, 10, 11, 13, 15, 18]

versionTracking.firstLaunchForVersion('3.0.0')     // false
versionTracking.firstLaunchForBuild('20')          // false
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
isFirstLaunchEver-Check if this is the first time ever that the app is launched.
isFirstLaunchForVersion-Check if this is the first time the current version is being launched.
isFirstLaunchForBuild-Check if this is the first time the current build is being launched.
currentVersion-Returns the current version of the app.
previousVersion-Returns the previous version of the app.
firstInstalledVersion-Returns the version which the user first installed the app.
versionHistory[]Returns a list of versions which the user has had installed, e.g. ['2.1', '3.5', '4.0', '4.1']. The List is ordered from the first version installed to (including) the current version
currentBuild-Returns the current build of the app.
previousBuild-Returns the previous build of the app.
firstInstalledBuild-Returns the build which the user first installed the app.
buildHistory[]Returns a list of builds which the user has had installed, e.g. ['2100', '3500', '4000', '4100']. The List is ordered from the first build installed to (including) the current build.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
init(versionsKey?: string, buildsKey?: string)voidInitializes the plugin. Calling this method is required. A good place to call it is at the application onLaunch() method.
firstLaunchForVersion(version: string)booleanCheck if this is the first launch for a particular version number. Useful if you want to execute some code for the first time launches of a particular version.
firstLaunchForBuild(build: string)booleanCheck if this is the first launch for a particular build number. Useful if you want to execute some code for the first time launches of a particular build.
\n

Support

\n\n

Professional Support

\n

This project is sponsored by Bazzite. If you require assistance on your project(s), please contact us at https://www.bazzite.com/contact.

\n

Contributing

\n

Please make sure to read the Contributing Guide before making a pull request.

\n

Code of Conduct

\n

Everyone participating in this project is expected to agree to abide by the Code of Conduct.

\n

License

\n

Code released under the MIT License.

\n
\n

Originally inspired by VersionTrackingPlugin.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper-updated":{"name":"nativescript-imagecropper-updated","version":"12.0.0","license":"MIT","readme":"\n

A {N} Image Cropping Plugin

\n

\"License\"\n\"npm\" \"npm\" \"GitHub

\n

Notes

\n

iOS 8+

\n

Android 17+

\n

v2.0.0+ the version of Android Lib has changed and the cropper looks different now,\nhence the breaking change

\n

Based on

\n

TOCropViewController for iOS

\n

uCrop for Android

\n

Installation

\n

Run tns plugin add nativescript-imagecropper

\n

Screenshots

\n

Cropper UI & End result (android)

\n

      

\n

Cropper UI (iOS)

\n \n

Usage (for TS demo, please see the demo folder)

\n

To use the image cropping module you must first require it.

\n
var ImageCropper = require(\"nativescript-imagecropper\").ImageCropper;
\n

How to get the image source, from nativescript-camera plugin

\n
var camera = require(\"nativescript-camera\");

// You might want to request camera permissions first
// check demo folder for sample implementation

camera.takePicture({width:300,height:300,keepAspectRatio:true})
  .then((imageAsset) => {
      let source = new imageSource.ImageSource();
      source.fromAsset(imageAsset).then((source) => {
        // now you have the image source    
        // pass it to the cropper                
      });
  }).catch((err) => {
      console.log(\"Error -> \" + err.message);
  });
\n

Methods

\n

show(ImageSource): Returns a cropped ImageSource

\n
var imageCropper = new ImageCropper();
imageCropper.show(imageSource).then((args) => {
  console.dir(args);
  if(args.image !== null){
    imageView.imageSource = args.image;
  }
})
.catch(function(e){
  console.dir(e);
});
\n

show(ImageSource,Options): Returns a cropped and resized ImageSource

\n
var imageCropper = new ImageCropper();
imageCropper.show(imageSource,{width:300,height:300}).then((args) => {
  console.dir(args);
  if(args.image !== null){
    imageView.imageSource = args.image;
  }
})
.catch(function(e){
  console.dir(e);
});
\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
widthnumberThe width of the image you would like returned.
heightnumberThe height of the image you would like returned.
lockSquarebooleanPass this as true, to lock square aspect ratio on iOS, on android, this option doesn't make any difference.
\n

Additional notes for Android

\n

You can override library colors just specifying colors with the same names in your colors.xml file.\nFor example:

\n
<color name=\"ucrop_color_toolbar\">#000000</color>
\n

This will make toolbar color black if specified inside your App_Resources/Android/values/colors.xml file.

\n

Android styles to customize the cropper activity/styles

\n
   <!--uCrop Activity-->
    <color name=\"ucrop_color_toolbar\">#FF6E40</color>
    <color name=\"ucrop_color_statusbar\">#CC5833</color>
    <color name=\"ucrop_color_toolbar_widget\">#fff</color>
    <color name=\"ucrop_color_widget\">#000</color>
    <color name=\"ucrop_color_widget_active\">#FF6E40</color>
    <color name=\"ucrop_color_widget_background\">#fff</color>
    <color name=\"ucrop_color_widget_text\">#000</color>
    <color name=\"ucrop_color_progress_wheel_line\">#808080</color>
    <color name=\"ucrop_color_crop_background\">#000</color>

    <!--Crop View-->
    <color name=\"ucrop_color_default_crop_grid\">#80ffffff</color>
    <color name=\"ucrop_color_default_crop_frame\">#ffffff</color>
    <color name=\"ucrop_color_default_dimmed\">#8c000000</color>
    <color name=\"ucrop_color_default_logo\">#4f212121</color>
\n

Returned Result Arguments

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ArgumentTypeResult(s)
responsestringSuccess
Cancelled
Error
imageImageSourcenull if there was an error or was cancelled
ImageSource on success
\n

Bonus: Snippet for using with nativescript-imagepicker 6.x

\n
const context = imagepickerModule.create({
    mode: 'single' // allow choosing single image
});
context
    .authorize()
    .then(function() {
        return context.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            selected.getImageAsync(source => {
                const selectedImgSource = imageSource.fromNativeSource(source);
                imageCropper
                    .show(selectedImgSource, { width: 300, height: 300 })
                    .then(args => {
                        if (args.image !== null) {
                               // Use args.image
                        }
                    })
                    .catch(function(e) {
                        console.log(e);
                    });
            });
        });
    })
    .catch(function(e) {
        console.log(e);
    });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carousel-view":{"name":"nativescript-carousel-view","version":"2.9.0","license":"MIT","readme":"

CarouselView plugin for nativescript

\n

Setup

\n

tns plugin add nativescript-carousel-view

\n

Platform Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSupportedVersionNativeView
iOSYesiOS 8.1+UIPageViewController
AndroidYesAPI 15+ViewPager
\n

Usage

\n

First add the xmlns namespace:

\n
xmlns:controls=\"nativescript-carousel-view\"
\n

Then add the control:

\n
<controls:CarouselView
    id=\"carouselView\"
    position=\"0\"
    orientation=\"horizontal\"
    interPageSpacing=\"5\"
    itemsSource=\"{{ itemsSource }}\"
    templateSelector=\"{{ templateSelector }}\"/>
\n

Bindable Properties

\n

orientation: horizontal, vertical (default horizontal).

\n

itemsSource: collection of objects used as bindingContext for each page.

\n

position: selected page when carousel starts (default 0).

\n

interPageSpacing: margin/space between pages (default 0).

\n

interPageSpacingColor: color for the margin/space between pages (default #FFFFFF).

\n

showIndicators: show page indicators (default true).

\n

IndicatorsShape: Circle or Square indicators shape (default Circle).

\n

indicatorsTintColor: color for the unselected dots (default #c0c0c0).

\n

indicatorsCurrentPageColor: color for the selected dot (default #808080).

\n

templateSelector: a class implementing the provided ITemplateSelector interface.

\n

animateTransition: enables transition animation when swiping programmatically (default true).

\n

Template selector should return a valid {N} view. As advice, put each view in separate files and load them with builder. Also, notice that you have to assign the bindingContext of the returning view.

\n

TYPESCRIPT

\n
import { ITemplateSelector } from \"nativescript-carousel-view\";
import builder = require(\"ui/builder\");
var frame = require('ui/frame');

export class MyTemplateSelector implements ITemplateSelector {
    
    OnSelectTemplate(position: number, bindingContext: any) {

        var page = frame.topmost().currentPage;

        var view = builder.load({
            path: \"~/Views/Slides\",
            name: \"slider-view\",
            page: page
        });

        // required
        view.bindingContext = bindingContext;

        return view;
    }
}
\n

ViewModel

\n
import observable = require(\"data/observable\");
import observableArrayModule = require(\"data/observable-array\");
import { MyTemplateSelector } from \"../Views/Slides/template-selector\";

export class MainViewModel extends observable.Observable {

    public templateSelector: MyTemplateSelector;
    public itemsSource: observableArrayModule.ObservableArray<Person>;

    constructor() {
        super();

        // Initialize default values.

        this.templateSelector = new MyTemplateSelector();

        var person = new Person();
        person.first = \"Alexander\";
        person.last = \"Reyes\";

        var items = [ person, person, person, person, person ];
        this.itemsSource = new observableArrayModule.ObservableArray<Person>(items);
    }
}
\n

JAVASCRIPT

\n
\"use strict\";
var builder = require(\"ui/builder\");
var frame = require('ui/frame');

var MyTemplateSelector = (function () {
    function MyTemplateSelector() {
    }
    MyTemplateSelector.prototype.OnSelectTemplate = function (position, bindingContext) {

        var page = frame.topmost().currentPage;

        var view = builder.load({
            path: \"~/Views/Slides\",
            name: \"slider-view\",
            page: page
        });

        view.bindingContext = bindingContext;

        return view;
    };
    return MyTemplateSelector;
}());

exports.MyTemplateSelector = MyTemplateSelector;
\n

ViewModel

\n
\"use strict\";
var observable = require(\"data/observable\");
var observableArrayModule = require(\"data/observable-array\");
var template_selector = require(\"../Views/Slides/template-selector\");

var MainViewModel = (function (_super) {
    __extends(MainViewModel, _super);
    function MainViewModel() {
        var _this = _super.call(this) || this;
        _this.templateSelector = new template_selector.MyTemplateSelector();
        _this.itemsSource = new observableArrayModule.ObservableArray(items);
        return _this;
    }
    return MainViewModel;
}(observable.Observable));

exports.MainViewModel = MainViewModel;
\n

Event Handlers

\n

positionSelected: triggers when the selected page changes.

\n
var carouselView = <CarouselView>page.getViewById(\"carouselView\");

carouselView.on(\"positionSelected\", function(eventData){
    console.log(eventData.eventName + \" has been raised! by: \" + eventData.object);
});
\n

Methods

\n

insertPage (position, bindingContext): insert a page at a given position.

\n
await carouselView.insertPage(5, person);
carouselView.setCurrentPage(5);
\n

removePage (position): remove a page at given position (this will also remove the corresponding item from itemsSource).

\n
await carouselView.removePage(5);
\n

setCurrentPage (position): slide programmatically to a given position.

\n

Requirements for TypeScript developers

\n\n

Please follow this tutorial to add TypeScript >= 2.1.1 and async/await support to your project:

\n

https://www.nativescript.org/blog/use-async-await-with-typescript-in-nativescript-today

\n

Roadmap

\n\n

Collaborators

\n\n

Release Notes

\n

2.9.0

\n

[New feature] animateTransition, enables transition animation when swiping programmatically (default true).

\n

2.8.0

\n

[Update] itemsSource now supports empty observable array.

\n

2.7.1

\n

[New feature] Circle or Square indicatorsShape property (default Circle).

\n

2.6.1

\n

[Update] orientation property is now expressed as string (horizontal, vertical), Orientation enum from "ui/enums" is supported.

\n

[New feature] interPageSpacingColor property to change the color of the margin/space between pages (default #FFFFFF).

\n

[New feature] indicatorsTintColor property to change the color of unselected dots (default #c0c0c0).

\n

[New feature] indicatorsCurrentPageColor property to change the color of selected dot (default #808080).

\n

2.6.0

\n

[Udpate] Matching version number with Xamarin.Forms CarouselView

\n

2.2.0

\n

[iOS] Small fix to avoid UIPageViewController.View go outside its container bounds

\n

[Update] showIndicators property now does what it supposed to do, hide/show indicators :)

\n

[Update] itemsSourceChanged method removed, implemented as a propertyChangedEvent

\n

2.1.0

\n

[Enhancement] Adding page indicators

\n

2.0.6

\n

[Bug] CSS not applying to slides #6 (fixed)

\n

[Enhancement] Removing left and right overscroll in Android vertical carousel

\n

2.0.5

\n

[Bug] Adding another touch gesture to slider-view does not work (fixed)

\n

2.0.4

\n

Updated README.

\n

2.0.3

\n

[Bug] fixing interPageSpacing in Android.

\n

2.0.2

\n

[Bug] onLoaded() not being called on carousel pages (Fixed).

\n

License

\n

MIT.

\n

Ported from CarouselView for Xamarin.Forms: https://github.com/alexrainman/CarouselView

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-debounce-tap":{"name":"nativescript-ngx-debounce-tap","version":"1.2.0","license":"Apache-2.0","readme":"

nativescript-ngx-debounce-tap

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

{N} + Angular directive for debouncing taps and adding animated feedback to the interaction.

\n

Installation

\n
tns plugin add nativescript-ngx-debounce-tap
\n

Usage

\n

Import the module in your app module

\n
import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';

@NgModule({
    imports: [
        NgDebounceTapModule,
        // ...
    ],
    // ...
})
export class MyModule { }
\n

Then use it in your templates like so

\n
 <Label text=\"Hello World!\" 
        ngDebounceTap 
        [delay]=\"320\"
        [anim]=\"'composite'\" 
        [scale]=\"1.06\" 
        [opacity]=\"0.2\" 
        (debounceTap)=\"hello()\"></Label>
\n

Do check out the demo for a quickstart

\n

\"Screenshot

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
delaynumber300The time between each processed tap in milliseconds.
animstringn/aThe way the interaction is to be animated. Possible values: 'composite', 'opacity', 'scale'. Scale => The element is magnified and returned to its original state. Opacity => The element has its opacity dropped to 0.6 and then returns to normal, like TouchableOpacity in React Native (not the values, the behavior). Composite => Performs both animations symultaneously.
scalenumber1.2The scale to use when magnifying the element. Set this in order to keep the animation as seamless as possible.
opacitynumber0.6The opacity used to animate the interaction. Set it to your liking, the default value can be hard to see on some scenarios so keep that in mind!
debounceTapEventEmittern/aThe event that is emitted when a tap is processed. The $event variable will have a reference to the element that was tapped (as an ElementRef). In case the scale animation is not your thing you can set [anim] to false and make one that suits you in this callback yourself.
\n

Changelog

\n

1.2.0 - Added the opacity @Input property to the directive for further customization.\n1.1.0 - Added opacity animation as an option.\n1.0.0 - Initial implementation

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-periscopehearts":{"name":"nativescript-periscopehearts","version":"1.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript-PeriscopeHearts :two_hearts:

\n

NativeScript plugin for Periscope's heart animation (Android Only for now...). Open source library used: tyrantgit/HeartLayout

\n

Sample

\n

\"Sample

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm install nativescript-periscopehearts

\n

Usage

\n

XML:

\n
<Page class=\"coverImage\" xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:PeriscopeHearts=\"nativescript-periscopehearts\" loaded=\"pageLoaded\">
    <Page.actionBar>
    <ActionBar title=\"NativeScript-PeriscopeHearts\" color=\"#fff\" backgroundColor=\"#03A9F4\" />
  </Page.actionBar>
    <ScrollView>
        <StackLayout>
            <button text=\"Add Heart\" tap=\"newHeart\" />

            <!-- This is our Heart \"container\" -->
            <PeriscopeHearts:PeriscopeHearts class=\"heartLayout\" id=\"heartLayout\" height=\"400\" />     
            
        </StackLayout>
    </ScrollView>
</Page>
\n

JS:

\n
// Array of hex color strings
var colorArray = [
    { hex: \"#3489db\" },
    { hex: '#FF4081' },
    { hex: '#229911' },
    { hex: '#fff000' }
];

function newHeart(args) {
        var heartLayout = frame.topmost().currentPage.getViewById(\"heartLayout\");

        // Just getting a random hex string from the colorArray values
        var rand = colorArray[Math.floor(Math.random() * colorArray.length)];

        // Call addHeart() on the PeriscopeHearts UI element to pop in a new heart
        heartLayout.addHeart(rand.hex);   
}
exports.newHeart = newHeart;
\n

API

\n

addHeart (color) - required

\n

Function that adds one heart into the view.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lazy":{"name":"nativescript-lazy","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-lazy/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Lazy

\n

A NativeScript module that provides an OOP version of the build-in lazy function.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-lazy
\n

inside your app project to install the module.

\n

Example

\n
import { Lazy } from 'nativescript-lazy';

var lazyValue = new Lazy<Date>(() => new Date());

// [1] (false)
console.log('isValueCreated: ' + lazyValue.isValueCreated);
// [2] current time
console.log('value: ' + lazyValue.value);
// [3] (true)
console.log('isValueCreated: ' + lazyValue.isValueCreated);
// [4] same value from [2]
console.log('value: ' + lazyValue.value);

lazyValue.reset();

// [5] (false)
console.log('isValueCreated: ' + lazyValue.isValueCreated);
// [6] (new) current time
console.log('value: ' + lazyValue.value);
// [7] (true)
console.log('isValueCreated: ' + lazyValue.isValueCreated);
// [8] same value from [6]
console.log('value: ' + lazyValue.value);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pager-without-page-indicators":{"name":"nativescript-pager-without-page-indicators","version":"111.0.10","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Pager

\n

Install

\n

NativeScript 6x

\n\n

NativeScript 5x

\n\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Usage

\n

Note v11+

\n
Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
\n

IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

\n
<pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <pager:Pager.itemTemplate>
                <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label text=\"{{title}}\"/>
                    <Image row=\"1\" src=\"{{image}}\"/>
                </GridLayout>
            </pager:Pager.itemTemplate>
</pager:Pager>
\n

Multi Template

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
      <Pager.itemTemplates>
        <template key=\"even\">
          <GridLayout rows=\"auto,auto,*\" columns=\"*\">
            <Label text=\"Even\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
        <template key=\"odd\">
          <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
            <Label text=\"Odd\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <StackLayout row=\"2\">
              <Label text=\"{{image}}\"/>
            </StackLayout>
            <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
      </Pager.itemTemplates>
      <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
    </c:Pager>
\n

Static Views

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                 showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <c:PagerItem backgroundColor=\"red\">
                <Label text=\"First\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"white\">
                <Label text=\"Second\" ></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"black\">
                <Label text=\"Third\" color=\"white\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"green\">
                <Label text=\"Fourth\"></Label>
            </c:PagerItem>
        </c:Pager>
\n

Vue

\n
import Vue from 'nativescript-vue';
import Pager from 'nativescript-pager/vue';

Vue.use(Pager);
\n
<template>
    <Pager for=\"item in items\">
        <v-template>
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Label :text=\"item.title\" />
                <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
            </GridLayout>
        </v-template>
        <v-template if=\"$odd\">
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Image  stretch=\"fill\" :src=\"item.image\" />
                <Label :text=\"item.title\" row=\"1\"/>
            </GridLayout>
        </v-template>
    </Pager>
</template>
\n

Static Views

\n
<Pager height=\"100%\" selectedIndex=\"1\">
  <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
  <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
  <PagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </PagerItem>
  <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
</Pager>
\n

Angular

\n
import { PagerModule } from \"nativescript-pager/angular\";

@NgModule({
    imports: [
    PagerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Angular v2

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </template>
</Pager>
\n

Angular v4+

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <ng-template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Multi Template

\n
 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }
\n
<Pager
  row=\"1\"
  [items]=\"items | async\"
  [itemTemplateSelector]=\"templateSelector\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
  backgroundColor=\"lightsteelblue\"
>
  <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
    <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
      <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>

  <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto,auto,auto,*\"
      columns=\"*\"
      backgroundColor=\"white\"
    >
      <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
      <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Static Views

\n
<Pager
  backgroundColor=\"orange\"
  row=\"1\"
  #pager
  [selectedIndex]=\"1\"
  height=\"100%\"
>
  <StackLayout *pagerItem backgroundColor=\"red\">
    <label text=\"First\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"white\">
    <label text=\"Second\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"green\">
    <label text=\"Fourth\"></label>
  </StackLayout>
</Pager>
\n

React

\n
import {$Pager} from 'nativescript-pager/react';
return (
<$Pager
                height={{ unit: \"%\", value: 100 }}
                   selectedIndex={this.selectedIndex}
                   selectedIndexChange={this.selectedIndexChange.bind(this)}
                    items={this.items}
                     cellFactory={
                    (item, ref) => {
                        return (
                            <$StackLayout id={item.title} ref={ref}>
                                <$Label text={item.title}/>
                                <$ImageCacheIt stretch={'aspectFill'}
                                        src={item.image}/>
                            </$StackLayout>
                        );
                    }
                }/>
)
\n

Static Views

\n
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                           <$PagerItem backgroundColor={'red'}>
                               <$Label text={'First'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'white'}>
                               <$Label text={'Second'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'black'}>
                               <$Label text={'Third'} color={new Color('white')}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'green'}>
                               <$Label text={'Fourth'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'pink'}>
                               <$Label text={'Fifth'}/>
                           </$PagerItem>
                       </$Pager>)
\n

Config

\n
<Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"ios\"\"android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pluggableai/smartpush-sdk":{"name":"@pluggableai/smartpush-sdk","version":"1.8.7","license":"Pluggable's License","readme":"

@pluggableai/smartpush-sdk

\n

Pluggable's Smartpush Plugin for NativeScript apps

\n
npm install @pluggableai/smartpush-sdk
\n

Pre-conditions [Integrate with FCM]

\n

Before using this plugin you should guarantee that your app already integrates with NativeScript Firebase and then with Firebase Cloud Messaging (FCM). The steps are quite easy to follow.

\n
    \n
  1. Install the @nativescript/firebase-core plugin (a plugin to initialize FirebaseApp in your app) by running the following command in the root directory of your project (this plugin must be installed before using any other Firebase service).
    2. \n
\n
npm install @nativescript/firebase-core
\n
    \n
  1. Android Setup - a configuration file must be downloaded and added to the project:
    2. \n
\n\n
    \n
  1. iOS Setup - to allow the iOS app to securely connect to the Firebase project, a configuration file must be downloaded and added to the project:
    2. \n
\n\n
    \n
  1. Instantiate Firebase and initialize a default app (for example, in the /app/app.ts file):
    2. \n
\n
import { firebase } from '@nativescript/firebase-core'
const defaultApp = await firebase().initializeApp()
\n
    \n
  1. You can now install the messaging module by running:
    2. \n
\n
npm install @nativescript/firebase-messaging
\n
    \n
  1. Then, add the SDK by importing the @nativescript/firebase-messaging module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
    2. \n
\n
import '@nativescript/firebase-messaging'
\n
    \n
  1. iOS Setup - iOS requires further configuration before you can start receiving and sending messages through Firebase. Read the documentation and follow the steps on how to setup iOS with Firebase Cloud Messaging.
    2. \n
\n\n
<key>UIBackgroundModes</key>
<array>
  \t<string>processing</string>
  \t<string>fetch</string>
  \t<string>remote-notification</string>
</array>
\n
    \n
  1. You can then rebuild the project by running in the root's terminal:
    2. \n
\n
ns clean
ns build android
ns build ios
\n

NOTE: FCM via APNs does not work on iOS Simulators. To receive messages & notifications a real device is required. The same is recommended for Android.

\n

Smartpush Usage

\n

After configuring your app to integrate with FCM, you are ready to use this plugin to properly engage with your users:

\n
    \n
  1. \n

    First install the Smartpush Package by running npm install @pluggableai/smartpush-sdk in the root of the project;

    \n
    2. \n
  2. \n

    This library exposes two methods which can be imported and used like this in your App.tsx file:

    \n
    3. \n
\n
...
import { SmartpushSdk } from '@pluggableai/smartpush-sdk';
...

const defaultApp = async function () {
    console.log('defaultApp function started');
    await firebase().initializeApp();
    // Allows you to always display notifications while the application is in the foreground 
    // without sending additional parameters/data when sending the push notification
    firebase().messaging().showNotificationsWhenInForeground = true
    console.log('Firebase Initialized');
}
defaultApp();
\n
// Request user permission
async function requestUserPermission() {
    const authStatus = await firebase()
      .messaging()
      .requestPermission({
          ios: {
              alert: true
          }
      })
    const enabled =
      authStatus === AuthorizationStatus.AUTHORIZED ||
      authStatus === AuthorizationStatus.PROVISIONAL

    console.log('Authorization status:', authStatus)
    if (enabled) {
        const didRegister = await firebase().messaging().registerDeviceForRemoteMessages().then(() => {
            // Init Firebase and calling the below methods
            setFirebaseInits();
        });
    }
}

requestUserPermission()
\n
// Register handler to listen for messages
firebase().messaging().onMessage(async remoteMessage => {
    console.log('A new FCM message arrived: ' + JSON.stringify(remoteMessage))
    const notifData = remoteMessage.data as {[key: string]: string}
    const notificationChannelId = \"notificationChannelId\"
    const notificationChannelName = \"notificationChannelName\"
    SmartpushSdk.pluggableExecute(notificationChannelId, notificationChannelName, notifData)
})
\n
// What happens when user clicks in a received push
firebase().messaging().onNotificationTap((message) => {
    console.log('CLICKED NOTIFICATION:', message)
    SmartpushSdk.pluggableStoreFeedback();
})
\n
// Get user token 
firebase().messaging().getToken().then(token => {
    console.log('User token:', token)
    //saveTokenToDatabase(token)
});

// Listen to user token changes
firebase().messaging().onToken(token => {
    console.log('User token changed to:', token)
    //saveTokenToDatabase(token)
});
\n
// Subscribe to specific topic
firebase().messaging().subscribeToTopic('ns_topic').then(() => {
    console.log('Subscribed to topic: ns_topic')
});
\n

License

\n

Copyright 2023 PLUGGABLE, LDA (aka PluggableAI)

\n

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

\n
    \n
  1. \n

    Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

    \n
    2. \n
  2. \n

    Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

    \n
    3. \n
  3. \n

    Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

    \n
    4. \n
\n

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/tailwind":{"name":"@nativescript/tailwind","version":"2.0.1","license":"MIT","readme":"

@nativescript/tailwind

\n
\n

Warning: :warning: @nativescript/core@8.2.0 is required for colors to work properly You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0 and prior versions don't support it.

\n
\n

Makes using Tailwind CSS in NativeScript a whole lot easier!

\n
<label
  text=\"Tailwind CSS is awesome!\"
  class=\"px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full\"
/>
\n

\"Tailwind

\n

Usage

\n
\n

Note: This guide assumes you are using @nativescript/webpack@5.x as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older @nativescript/webpack versions.

\n
\n

Install @nativescript/tailwind and tailwindcss

\n
npm install --save @nativescript/tailwind tailwindcss
\n

Generate a tailwind.config.js with

\n
npx tailwindcss init
\n

Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:

\n
// tailwind.config.js

module.exports = {
  content: [
    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
  ],
  // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false // disables browser-specific resets
  }
}
\n

Change your app.css or app.scss to include the tailwind utilities

\n
@tailwind base;
@tailwind components;
@tailwind utilities;
\n

Start using tailwind in your app.

\n

Using a custom PostCSS config

\n

In case you need to customize the postcss configuration, you can create a postcss.config.js (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:

\n
// postcss.config.js

module.exports = {
  plugins: [
    [\"tailwindcss\", { config: \"./tailwind.config.custom.js\" }],
    \"@nativescript/tailwind\",
  ],
};
\n
\n

Note: if you want to apply customizations to tailwindcss or @nativescript/tailwind, you will need to disable autoloading:

\n
ns config set tailwind.autoload false
\n

This is required only if you make changes to either of the 2 plugins - because by default postcss-loader processes the config file first, and then the postcssOptions passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting tailwind.autoload to false just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.

\n
\n

Usage with older @nativescript/webpack versions

\n

This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older @nativescript/webpack.

\n
\n See instructions\n
npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader
\n

Create postcss.config.js with the following:

\n
module.exports = {
  plugins: [
      require('tailwindcss'),
      require('nativescript-tailwind')
  ]
}
\n

Generate a tailwind.config.js with

\n
npx tailwindcss init
\n

Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:

\n
// tailwind.config.js

module.exports = {
  content: [
    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
  ],
  // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false // disables browser-specific resets
  }
}
\n

Change your app.css or app.scss to include the tailwind utilities

\n
@tailwind base;
@tailwind components;
@tailwind utilities;
\n

Update webpack.config.js to use PostCSS

\n

Find the section of the config that defines the rules/loaders for different file types.\nTo quickly find this block - search for rules: [.

\n

For every css/scss block, append the postcss-loader to the list of loaders, for example:

\n
{
  test: /[\\/|\\\\]app\\.css$/,
  use: [
    'nativescript-dev-webpack/style-hot-loader',
    {
      loader: \"nativescript-dev-webpack/css2json-loader\",
      options: { useForImports: true }
    },
+   'postcss-loader',
  ],
}
\n

Make sure you append postcss-loader to all css/scss rules in the config.

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@happones/nativescript-image-zoom":{"name":"@happones/nativescript-image-zoom","version":"4.0.2","license":"Apache-2.0","readme":"

NativeScript Image Zoom

\n

\"npm\"\n\"npm\"

\n

Installation

\n

NativeScript 7+:

\n
tns plugin add @happones/nativescript-image-zoom
\n

NativeScript > 7:

\n
tns plugin add nativescript-image-zoom
\n

Configuration

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-image-zoom" on the\nPage element

\n
<ui:ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"/>
\n

Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
\n
<ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
\n

Vue

\n
import ImageZoomPlugin from '@happones/nativescript-image-zoom/vue';

Vue.use(ImageZoomPlugin);
\n
<ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
maxZoom5number
  • - [ ]
minZoom1number
  • - [ ]
zoomScale1number
  • - [ ]
IOS only
srcstring
  • - [x]
\n

ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mabs.dk/nativescript-animejs":{"name":"@mabs.dk/nativescript-animejs","version":"3.2.1-alpha.0","license":"MIT","readme":"

\n \n
\n @mabs.dk/nativescript-animejs - NativeScript wrapper for anime.js\n

\n

JavaScript animation engine | animejs.com

\n

\n \"npm\n \"npm\n

\n
\n Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
\n It works with CSS properties, SVG, DOM attributes and JavaScript Objects.\n
\n

\n Getting started | Documentation | Demos and examples | Browser support\n

\n

Getting started

\n

Download

\n

Via npm

\n
$ npm install @mabs.dk/nativescript-animejs --save
\n

or manual download.

\n

Usage

\n
import anime from '@mabs.dk/nativescript-animejs';
\n

Hello world

\n
anime({
  targets: tnsView,
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});
\n

Documentation

\n\n

Demos and examples

\n\n

\"anime-js-v3-logo\"/

\n

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-filters-ios":{"name":"nativescript-image-filters-ios","version":"1.1.4","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"Build\n\"GitHub\n\"PayPal

\n

NativeScript-Image-Filters

\n

Nativescript plugin for native image filters.

\n

Sample

\n

\"Demo\"

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

tns plugin add nativescript-image-filters

\n

Usage

\n

JS:

\n
import { topmost } from 'ui/frame';
import { ImageFilters } from 'nativescript-image-filters';

const filters = new ImageFilters();

public effectOne() {
  const pic = topmost().currentPage.getViewById('myPicture');

      filters.invert(pic).then((result) => {

      // set the pic imageSource equal to the new imageSource
      pic.imageSource = result;

    }).catch((err) => {
      console.log('applyFilter ERROR: ' + err);
    });
}
\n

IMPORTANT NOTE

\n

Not all methods have been tested. The code needs to be cleaned up to reduce duplication in methods. The methods also need to be 1:1 for common methods. Right now not all iOS & Android methods are named correctly for the image filter. Pull requests are very welcome to improve the API for this plugin.

\n

API

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-pulltorefresh":{"name":"@akylas/nativescript-pulltorefresh","version":"2.4.6","license":"MIT","readme":"\n

NativeScript-PullToRefresh

\n\n

\nNativeScript plugin to use Pull to Refresh on any view.\n

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

tns plugin add @Akylas/nativescript-pulltorefresh

\n

Android - SwipeRefreshLayout

\n

iOS - UIRefreshControl

\n

Sample Screen

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"Android\"iOS
\n

Usage

\n

NativeScript Core

\n

XML

\n
<page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:PullRefresh=\"@Akylas/nativescript-pulltorefresh\"
      loaded=\"pageLoaded\">
    <PullRefresh:PullToRefresh refresh=\"refreshList\">
        <list-view items=\"{{ users }}\">
            <list-view.itemTemplate>
                <label text=\"{{ name }}\" row=\"0\" col=\"1\"textWrap=\"true\" class=\"message\" />
            </list-view.itemTemplate>
        </list-view>
    </PullRefresh:PullToRefresh>
</page>
\n

JS

\n
function refreshList(args) {
  // Get reference to the PullToRefresh component;
  var pullRefresh = args.object;

  // Do work here... and when done call set refreshing property to false to stop the refreshing
  loadItems().then(
    resp => {
      // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
      setTimeout(() => {
        pullRefresh.refreshing = false;
      }, 1000);
    },
    err => {
      pullRefresh.refreshing = false;
    }
  );
}
exports.refreshList = refreshList;
\n

Angular NativeScript

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"PullToRefresh\", () => require(\"@Akylas/nativescript-pulltorefresh\").PullToRefresh);

refreshList(args) {
         const pullRefresh = args.object;
         setTimeout(function () {
            pullRefresh.refreshing = false;
         }, 1000);
    }
\n

HTML

\n
<PullToRefresh (refresh)=\"refreshList($event)\">
  <ListView [items]=\"itemList\">
    <template let-item=\"item\">
      <label [text]=\"item.id\"></label>
    </template>
  </ListView>
</PullToRefresh>
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';

Vue.registerElement(
  'PullToRefresh',
  () => require('@Akylas/nativescript-pulltorefresh').PullToRefresh
);
\n

Component

\n
<template>
  <Page>
    <PullToRefresh @refresh=\"refreshList\">
      <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
        <v-template>
          <!-- Shows the list item label in the default color and style. -->
          <label :text=\"item.text\" />
        </v-template>
      </ListView>
    </PullToRefresh>
  </Page>
</template>

<script>
export default {
  methods: {
    refreshList(args) {
      var pullRefresh = args.object;
      setTimeout(function() {
        pullRefresh.refreshing = false;
      }, 1000);
    }
  }
};
</script>
\n

Properties

\n\n

Changelog

\n

Contributing

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-blurview":{"name":"nativescript-blurview","version":"1.1.0","license":"Apache-2.0","readme":"

NativeScript Blurview widget

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript BlurView widget.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-blurview

\n

This command automatically installs the necessary files, as well as stores nativescript-blurview as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Usage

\n

You need to add xmlns:gv="nativescript-blurview" to your page tag, and then simply use <gv:BlurView/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-blurview\" loaded=\"pageLoaded\">
    <GridLayout rows=\"\" columns=\"\">
        <Image src=\"https://wallpaperscraft.com/image/rose_flower_colorful_close-up_petals_18824_960x544.jpg\" id=\"bgimage\" stretch=\"aspectFill\" />
        <bv:BlurView></bv:BlurView>
    </GridLayout>
</Page>
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/farfromrefug/nativescript-blurview
$ cd nativescript-blurview
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-health-data-enduco":{"name":"nativescript-health-data-enduco","version":"1.3.2","license":"MIT","readme":"

\n \n

\n

Health Data plugin for NativeScript

\n

This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Prerequisites

\n

Android

\n

Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

\n
keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
\n
\n

Note that the default (debug) keystore password is empty.

\n
\n

iOS

\n

Make sure you enable the HealthKit entitlement in your app ID.

\n

Installation

\n

Install the plugin using the NativeScript CLI:

\n
tns plugin add nativescript-health-data
\n

API

\n

The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

\n

This is how you can import and instantiate the plugin, all examples expect this setup:

\n
import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

export class MyHealthyClass {
  private healthData: HealthData;

  constructor() {
    this.healthData = new HealthData();
  }
}
\n

isAvailable

\n

This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

\n
this.healthData.isAvailable(false)
    .then(available => console.log(available));
\n

isAuthorized

\n

This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

\n\n
\n

iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

\n
\n
this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
    .then(authorized => console.log(authorized));
\n

requestAuthorization

\n

This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

\n

Note that this plugin currently only supports reading data, but that will change.

\n
const types: Array<HealthDataType> = [
\t{name: \"height\", accessType: \"write\"},
\t{name: \"weight\", accessType: \"readAndWrite\"},
\t{name: \"steps\", accessType: \"read\"},
\t{name: \"distance\", accessType: \"read\"}
];

this.healthData.requestAuthorization(types)
    .then(authorized => console.log(authorized))
    .catch(error => console.log(\"Request auth error: \", error));
\n

query

\n

Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

\n

By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

\n

If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

\n
this.healthData.query(
    {
      startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      endDate: new Date(), // now
      dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
      unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
      aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
      sortOrder: \"desc\" // optional, default \"asc\"
    })
    .then(result => console.log(JSON.stringify(result)))
    .catch(error => this.resultToShow = error);
\n

startMonitoring (iOS only, for now)

\n

If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

\n

Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

\n
\n

Background notifications probably don't work on the iOS simulator, so please test those on a real device.

\n
\n
this.healthData.startMonitoring(
    {
      dataType: \"heartRate\",
      enableBackgroundUpdates: true,
      backgroundUpdateFrequency: \"immediate\",
      onUpdate: (completionHandler: () => void) => {
        console.log(\"Our app was notified that health data changed, so querying...\");
        this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
      }
    })
    .then(() => this.resultToShow = `Started monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

stopMonitoring (iOS only, for now)

\n

It's best to call this method in case you no longer wish to receive notifications when health data changes.

\n
this.healthData.stopMonitoring(
    {
      dataType: \"heartRate\",
    })
    .then(() => this.resultToShow = `Stopped monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

Available Data Types

\n

With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

\n

Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

\n

The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sec-spec/lib-ng-oauth-mobile-service":{"name":"@sec-spec/lib-ng-oauth-mobile-service","version":"1.0.2","license":"Apache-2.0","readme":"

@sec-spec/lib-ng-oauth-mobile-service

\n
ns plugin add @sec-spec/lib-ng-oauth-mobile-service
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescrip-pbkdf2":{"name":"nativescrip-pbkdf2","version":"1.0.0","license":"MIT","readme":"

pbkdf2

\n

\"NPM\n\"Build\n\"Dependency

\n

\"js-standard-style\"

\n

This library provides the functionality of PBKDF2 with the ability to use any supported hashing algorithm returned from crypto.getHashes()

\n

Usage

\n
var pbkdf2 = require('pbkdf2')
var derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 1, 32, 'sha512')

...
\n

For more information on the API, please see the relevant Node documentation.

\n

For high performance, use the async variant (pbkdf2.pbkdf2), not pbkdf2.pbkdf2Sync, this variant has the oppurtunity to use window.crypto.subtle when browserified.

\n

Credits

\n

This module is a derivative of cryptocoinjs/pbkdf2-sha256, so thanks to JP Richardson for laying the ground work.

\n

Thank you to FangDun Cai for donating the package name on npm, if you're looking for his previous module it is located at fundon/pbkdf2.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-moon-phase":{"name":"nativescript-moon-phase","version":"1.0.0","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"twitter:

\n

\"NPM\"

\n

Nativescript moon phase plugin

\n

This plugin is a complementary to my previous plugin that converts from gregorian to hijri dates https://github.com/rkhayyat/nativescript-hijri

\n

Nativescript-moon-phase

\n

Moon Phase plugin allows you show the moon phase for a given date.

\n

\n \n

\n

Installation

\n
tns plugin add nativescript-moon-phase
\n

Usage

\n

Typescript NativeScript

\n

XML

\n
<Page 
 xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:customControls=\"nativescript-moon-phase\"
 loaded=\"pageLoaded\" class=\"page\">
  <StackLayout class=\"p-20\">
  <customControls:MoonPhase items=\"{{ DateValue }}\" />
    <DatePicker id=\"date\" loaded=\"onPickerLoaded\" dateChange=\"onDateChanged\" verticalAlignment=\"center\">
    </DatePicker>
    <Button text=\"Valider\" tap=\"see\"></Button>
  </StackLayout>
</Page>
\n

main-view-model

\n
import {Observable} from 'tns-core-modules/data/observable';
import {Hijri} from 'nativescript-moon-phase';

export class HelloWorldModel extends Observable {
public monthText : string;
public DateValue: Date;

  constructor(currentDate) {
    super();

    this.DateValue = currentDate;
  }
}
\n

main-page

\n
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { DatePicker } from \"tns-core-modules/ui/date-picker\";
import {HelloWorldModel} from './main-view-model';
var view = require(\"ui/core/view\");
var MainViewModel = require(\"./main-view-model\");

let page;

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    page = <pages.Page>args.object;
    page.bindingContext = new HelloWorldModel(new Date());
}

exports.see = function(args) {
    var sender = args.object;
    var parent = sender.parent;
    var year = view.getViewById(parent,\"date\").year;
    var month = view.getViewById(parent,\"date\").month
    var day = view.getViewById(parent,\"date\").day;
    var convertDate = new Date(year, month-1, day);
    page.bindingContext = new HelloWorldModel(convertDate);
}
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnDescription
itemsDateDate passed to show the corseponding moon phase image.
\n

NativeBaguette 🥖

\n\n\n\n\n\n\n\n\n\n\n\n
\"Rachid
rkhayyat
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-popup-with-position":{"name":"nativescript-popup-with-position","version":"1.0.3","license":"ISC","readme":"

\"npm\"\n\"npm\"

\n

Installation

\n

tns plugin add nativescript-popup-with-position

\n

Usage

\n
    <Button tap=\"openPopup\"/>
\n
    import { Popup } from 'nativescript-popup-with-position';

    function openPopup(args){
    const popup = new Popup({
        backgroundColor:'white' | '#fff',
        height:100,
        width:100,
        unit:'dp' | 'px' | '%',
        elevation:10, // android only
        borderRadius:25 // android only
    });
    const view = new Label();
    view.text = \"Test\";

    /* IOS */
    const nativeView = UILabel.new();
    nativeView.text = \"Native Button\";
    nativeView.frame = CGRectMake(0,0,50,50);
    /* -- IOS */

    /* Android */
    const nativeView = new new android.widget.TextView(context);
    nativeView.setText(\"Native Button\");
    nativeView.setWidth(50);
    nativeView.setHeight(50);
    /* -- Android */
    let xpos = 0;
    let ypos = 0;

    popup.showPopup(anchor: View | nativeView , view: View | nativeView, xpos , ypos);
    }
\n

API

\n

Constructor

\n

Popup(options: PopupOptions)

\n

Constructor Example

\n
import { Popup, PopupOptions } from \"nativescript-popup-with-position\";

const opts: PopupOptions = {
  backgroundColor: \"white\" | \"#fff\",
  height: 100,
  width: 100,
  unit: \"dp\" | \"px\" | \"%\",
  elevation: 10, // android only
  borderRadius: 25 // android only
};

const popup = new Popup(opts);
\n

Popup Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
showPopup(source: any, view: any): PromiseShows the popup anchored to the source argument with the view argument as the popup contents. The view argument can be a native Android/iOS view, a NativeScript View, or a string path to a template within the app directory.
hidePopup(data?: any): PromiseHides the popup and removes it from the view hierarchy.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-volume":{"name":"nativescript-volume","version":"1.0.7","license":"MIT","readme":"

NativeScript-Volume

\n

This plugin allows you to programmatically control the volume in a NativeScript application. This is compatible with both iOS and Android.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-volume
\n

This command automatically installs the necessary files, as well as stores nativescript-volume as a dependency in your project's package.json file.

\n

Usage

\n

This plugin can be used with any flavor of NativeScript (Core, Angular, Vue, TypeScript, and/or JavaScript).

\n

TypeScript

\n
import { Volume } from 'nativescript-volume';

export SomeClass {
  private volume: Volume;

  constructor() {
    this.volume = new Volume();
  }

  mute() {
    this.volume.mute();
  }

  unmute() {
    this.volume.unmute();
  }

  volumeUp() {
    this.volume.volumeUp();
  }

  volumeHalf() {
    if (app.ios) {
      // iOS Volume goes from 0 to 1. With its increments being 1/16.
      this.volume.setVolume(0.5);
    } else if (app.android) {
      // Android Volume I'm unsure of the range, but believe it to be 0 to 15 at least for the music stream.
      this.volume.setVolume(7);
    }
  }

  volumeDown() {
    this.volume.volumeDown();
  }

  getVolume() {
    // Please see Android TODO in the Api Section
    alert('Volume is' + this.volume.getVolume());
  }
}
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method: ReturnTypeDescriptionNotes
mute(): voidMutes the volume of the Device
unmute(): voidUnmutes the volume of the Device
volumeDown(): voidDecreases the volume of the Device.Android The device picks the active sound stream.
volumeUp(): voidIncreases the volume of the Device.Android The device picks the active sound stream.
getVolume(): numberGets the current volume of the Device.Android This currently only gets the music stream's volume.
setVolume(value: number): voidSets the current volume of the Device.Android This currently only sets the music stream's volume.
\n

License

\n

The MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/dominative-vue":{"name":"@vallemar/dominative-vue","version":"0.0.9","license":"MIT","readme":"

DOMiNATIVE-Vue

\n

Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

\n

Playground

\n
\n

Installation

\n

Via npm:

\n
npm install @dominative/vue @nativescript/core dominative undom-ng vue
\n

Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually.

\n
\n

Usage

\n
import { Application } from '@nativescript/core'
import { createApp } from '@dominative/vue'
import App from 'App.vue'

const app = createApp(App)

// Start the app
app.$run()
\n
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-apps-with-updated-auth":{"name":"nativescript-azure-mobile-apps-with-updated-auth","version":"2.0.4","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Azure Mobile Apps plugin.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-azure-mobile-apps

\n

This command automatically installs the necessary files, as well as stores nativescript-azure-mobile-apps as a dependency in your project's package.json file.

\n

Configuration

\n

For most of the functions the plugin you only need to know the name of your Azure mobile apps portal. The only thing that requires additional configuration is the social sign-in under iOS. For that please follow the steps explained below

\n

Starting with version 2.0, due to updated libraries, Mircososft now reqiures the minimum SDK for Android to be 19. So you need to adjust 2 files in your app:

\n
    \n
  1. In the app/App_Resources/Android/AndroidManifest.xml you must have android:minSdkVersion set to 19 or above.
    2. \n
  2. In the app/App_Resources/Android/app.gradle you must ensure that in your defaultConfig you have minSdkVersion set to the same number as the one you set in the AndroidManifest.xml file. So assuming you are setting it to 19, your file should look something like this:
    3. \n
\n
android {  
  defaultConfig {  
    generatedDensities = []
    applicationId = \"......\"
    minSdkVersion 19
  }  
}
\n

API

\n

MobileServiceClient

\n

Static Methods

\n\n

Methods

\n\n

Properties

\n\n

MobileServicePush

\n

Methods

\n\n

Properties

\n\n

MobileServiceUser

\n

Static Methods

\n\n

Methods

\n\n

Properties

\n\n

MobileServiceTable

\n

Methods

\n\n

MobileServiceQuery

\n

The query object provies a very easy to use chainable interface to filter, order and page through the data inside a table.

\n

Methods

\n\n

Usage

\n

Note that there is no difference in using the plugin in Angular NativeScript apps, so the usage below is valid for Angular apps as well.

\n

Create a client

\n
import { MobileServiceClient } from \"nativescript-azure-mobile-apps/client\";
var client = new MobileServiceClient(\"https://<PORTAL_NAME>.azurewebsites.net\");
\n

Get a reference to a table

\n
var todoItemTable = client.getTable(\"TodoItem\");
\n

Get all items in a table

\n
todoItemTable.read<TodoItem>().then(function(results) {
    // results is array of TodoItem-s
    console.log(results.length);
    console.log(results[0].id);
});
\n

Add an item to a table

\n
var item = new TodoItem();
item.text = \"NativeScript Rocks!\";
todoItemTable.insert(item).then(function(result) {
    // result is the inserted item with the id changed
    console.log(result.id);
});
\n

Update an item

\n
item.text = \"Changed Text\";
todoItemTable.update(item).then(function(result) {
    // result is the updated item
    console.log(result);
});
\n

Delete an item

\n
todoItemTable.deleteItem(item).then(function() {
    console.log(\"Deleted!\");
});
\n

Delete an item by ID

\n
todoItemTable.deleteById(\"some id\").then(function() {
    console.log(\"Deleted!\");
});
\n

Query table

\n
todoItemTable.where().field(\"completed\").eq(true).read().then(function(results) {
    console.log(\"There are \" + results.length.toString() + \"completed items\");
});
\n

Sorting

\n
import { SortDir } from \"nativescript-azure-mobile-apps/query\";
todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Desc).read().then(function(results) {
    // ...
});
\n

Paging

\n
import { SortDir } from \"nativescript-azure-mobile-apps/query\";
todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Asc).skip(2).top(3).read().then(function(results) {
    // Skips 2 completed tasks and returns the next 3 ordered chronologically by creation. 
});
\n

User Authentication (Social Sign In)

\n

iOS login requirements

\n

In versions 1.0.0 and lower login on iOS leveraged an in-app browser. This will be banned so we needed to\nswitch to SafariViewController which is not "in-app". So we need to be able to switch back and forth between\nthe external browser. The main benefit is this browser can leverage cookies already set by for instance a Facebook\nlogin, so the user doesn't have to enter his credentials again.

\n

It's a bit of work, but it's a one time effort and should take you about 5 minutes to complete these steps:

\n
Custom URL Scheme
\n

Switching to the external browser is not a problem, but switching back requires you to configure a 'Custom URL Scheme'.\nOpen app/App_Resources/iOS/Info.plist and add:

\n
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my.bundle.id</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>x-msauth-tns-azure-sample</string>
    </array>
  </dict>
</array>
\n

Make sure the Custom URL Scheme string x-msauth-tns-azure-sample above is unique on the device of the user,\nso including your bundle id would be a good start (replace the dots by dashes).

\n

Also, replace my.bundle.id by your bundle id.

\n
Add ALLOWED EXTERNAL REDIRECT URLS
\n

Add x-msauth-tns-azure-sample://easyauth.callback to the 'ALLOWED EXTERNAL REDIRECT URLS' field in these screenshots of your Azure backend.

\n

Make sure to replace x-msauth-tns-azure-sample by your own Custom URL Scheme.

\n
App Delegate wiring
\n

Now that your app can be called from the external party it still can't switch back to the foreground unless\nyou wire up a method in the App Delegate. Don't worry, this plugin takes care of that for you, the only thing\nyou need to do is add this line just before app.start() in app.js / app.ts:

\n
// add this
require(\"nativescript-azure-mobile-apps/client\").MobileServiceClient.configureClientAuthAppDelegate();

// something like this is already there
application.start({ moduleName: \"main-page\" });
\n
Passing the URL Scheme to login
\n

Note that calling login has changed a bit; you now need to pass a second parameter to this function to use the\nnew login mechanism. Failing to do so will fall back to the deprecated in-app browser authentication method.\nMake sure to replace x-msauth-tns-azure-sample by the scheme you configured in Info.plist before.\nYou can leave it out if you only target Android.

\n
import { AuthenticationProvider } from \"nativescript-azure-mobile-apps/user\";
client.login(AuthenticationProvider.Google, \"x-msauth-tns-azure-sample\").then((user) => {  
    console.log(`Logged In! UserID:${user.userId}`);
}, (e) => {
    console.log(\"Error Logging in!\", e);
});
\n

Once authenticated the userId and token are cached so you can login by simply calling:

\n
client.loginFromCache(); // Will return true if there are cached credentials and will setup the client accordingly
\n

If you want to get additional information about the user (like provider token, name, email, profile photo etc.) you can do this by calling getProviderCredentials():

\n
client.user.getProviderCredentials().then((result) => {
    console.log(`Surname: ${result.surname}`);
    console.log(`Given Name: ${result.givenName}`);
    console.log(`Name: ${result.name}`);
});
\n

Note: Since each provider provides different amount of details (also depends on what you have authorized in the Azure portal),\nif you are looking for some specific information, you should check the claims property of the result.\nIt is a dictionary containing all the information that is returned from Azure.

\n

If you want to remove the cached authentication info you should use:

\n
import { MobileServiceUser } from \"nativescript-azure-mobile-apps/user\";
MobileServiceUser.clearCachedAuthenticationInfo();
\n

Push Notifications

\n

NOTE: In order to work with push notifications you also need to install the nativescript-push-notifications plugin.\nYou can do this by running the following command:

\n
tns install nativescript-push-notifications
\n

You can read more on how to use the push plugin here.

\n

Register

\n

You need to call the push register with Azure in the success callback of the push plugin by passing the registration token\nreturned by the push plugin.

\n
pushPlugin.register(pushSettings, (data) => {
    if (pushPlugin.onMessageReceived) {
        pushPlugin.onMessageReceived(pushSettings.notificationCallbackAndroid);
    }
    client.push.register(data)
        .then(() => console.log(\"Azure Register OK!\"))
        .catch((e) => console.log(e));
}, (e) => { console.log(e); });
\n

Register with a template

\n

If you want to use a custom template for the notifications, you can use the registerWithTemplate method to pass\nyour template name and body.

\n
let pushTemplates = {};
pushTemplates[platform.platformNames.android] = \"{\\\"data\\\":{\\\"message\\\":\\\"$(param)\\\"}}\";
pushTemplates[platform.platformNames.ios] = \"{\\\"aps\\\":{\\\"alert\\\":\\\"$(param)\\\"}}\";

pushPlugin.register(pushSettings, (data) => {
    if (pushPlugin.onMessageReceived) {
        pushPlugin.onMessageReceived(pushSettings.notificationCallbackAndroid);
    }
    client.push.registerWithTemplate(data, \"MyTemplate\", pushTemplates[platform.device.os])
        .then(() => console.log(\"Azure Register OK!\"))
        .catch((e) => console.log(e));
}, (e) => { console.log(e); });
\n

Unregister

\n
pushPlugin.unregister(() => {
    console.log(\"Device Unregister OK!\");
    client.push.unregister()
        .then(() => console.log(\"Azure Unregister OK!\"))
        .catch((e) => console.log(e));
}, (e) => console.log(e), pushSettings);
\n

Demos

\n

This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-azure-mobile-apps
$ cd nativescript-azure-mobile-apps
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-chiliz":{"name":"nativescript-wikitude-chiliz","version":"2.4.0","license":"Apache-2.0","readme":"

nativescript-wikitude

\n
This is a fork of @breningham/nativescript-wikitude that has been unfortunately inactive.
\n

\"npm

\n

\"NPM\"

\n

Provides nativescript access to Wikitude AR (9.1.0 on Android and 9.0.0 on iOS).

\n

Prerequisites / Requirements

\n

Permissions

\n

Before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

\n

Running the Demo

\n

We include a very basic AR Sample in the Demo app,

\n

but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

\n

and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

\n

Installation

\n

to install for your project you can use :

\n
tns plugin add nativescript-wikitude
\n

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

\n
import { Wikitude } from \"nativescript-wikitude\";
// ...snip....
registerElement(\"Wikitude\", () => Wikitude);
\n

and then in your ar.component.html :

\n
<Wikitude
  [url]=\"WikitudeURL\"
  (WorldLoaded)=\"onWorldLoaded($event)\"
  (JSONReceived)=\"onJSON($event)\"
>
</Wikitude>
\n

and in your ar.component.ts:

\n
    import { Wikitude } from 'nativescript-wikitude';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = \"~/wikitude_world/index.html\";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...
\n

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

\n
    (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
\n

And Voila! you have Wikitude AR working in your Nativescript Application!

\n

Usage

\n

using your own location provider

\n

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

\n

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }
\n

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

\n
this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
\n

this is useful if you want a single location state.

\n

once you have disabled it you can re-enable it with the following :

\n
this.WikitudeInstance.enableLocationProvider();
\n

TODO

\n\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefault valueDescription
url""the URL of the Wikitude "ARWorld"
features`Features.ImageTrackingFeatures.InstantTracking
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionArgumentsDescription
setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
loadUrl()url: stringloads the URL in the Wikitude WebView
reload()reloads the current Wikitude WebView
clearCache()clears the wikitude Cache
toggleFlash()Toggles the Devices Flash-light
switchCamera()switches the Camera that wikitude uses
captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
enableLocationProvider()enables the location Provider
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionType
WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
\n

all can be imported from the index.d.ts.

\n

License

\n

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rave":{"name":"nativescript-rave","version":"1.2.0","license":"Apache-2.0","readme":"

Rave-Nativescript

\n\n

Version 1.2.0

\n\n

Version 1.1.0

\n\n

Version 1.0.0

\n\n

This plugin allows you to use flutterwave payment platform with Nativescript. For more information visit https://developer.flutterwave.com

\n

\"Plugin

\n

Requirements

\n\n

Installation

\n
tns plugin add rave-nativescript
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

\n

In addition to the plugin usage, both apps are webpack configured.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript\nimport * as RaveNativescript from 'rave-nativescript';

\n

Javascript\nvar Expresspay = require("rave-nativescript");

\n

Start RavePayManager

\n
 let context = RaveNativescript.prepare({
      country: \"country\",
      currency: \"currency here\",
      fName: \"Customer first name\",
      lName: \"Customer last name\",
      email: \"customer email\",
      narration: \"Your narration here\",
      publicKey: \"your public key here\",
      encryptionKey: \"your encryption key here\",
      txRef: \"txRef\",
      amount: amount,
      acceptAccountPayments: true,
      acceptCardPayments: true,
      acceptGHMobileMoneyPayments: true,
      onStagingEnv: true,
      shouldDisplayFee: true,
      showStagingLabel: false,
      setSubAccounts: [{
        subAccountId : \"subAccountId\",
        transactionSplitRatio: 1
      }],
      setMeta: [{ metaname: \"Meta name here\", metavalue: \"meta value here\"}]
    });
\n

Full usage

\n
context.checkoutPayment()
    .then((response) => {
      console.log(\"payment process complete\")
      console.log(response)
    })
    .catch(e => {
    console.log(\"handle errors\")
    })
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionStatusDefaultDescription
amountrequirednullThis is the amount to be charged from card/account
countryrequirednullThis is the route country for the transaction with respect to the currency. You can find a list of supported countries and currencies here
currencyrequirednullThis is the specified currency to charge the card in
fNamerequirednullThis is the first name of the card holder or the customer
lNamerequirednullThis is the last name of the card holder or the customer
emailrequirednullThis is the email address of the customer
narrationoptionalnullThis is a custom description added by the merchant. For Bank Transfer payments, this becomes the account name of the account to be paid into. See more details here
publicKeyrequirednullMerchant's public key. Get your merchant keys here for staging and live
encryptionKeyrequirednullMerchant's encryption key. Get your merchant keys here for staging and live
txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
acceptAccountPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
acceptCardPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
acceptMpesaPayments(boolean)optionalfalseSet to true if you want to accept Mpesa payments, else set to false . For this option to work, you should set your country to KE and your currency to KES
acceptGHMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Ghana mobile money payments, else set to false . For this option to work, you should set your country to GH and your currency to GHS
acceptUgMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Uganda mobile money payments, else set to false . For this option to work, you should set your country to UG and your currency to UGX
acceptAchPayments(boolean)optionalfalseSet to true if you want to accept US ACH charges from your customers, else set to false . For this option to work, you should set your country to US and your currency to USD. You also have to set acceptAccountPayments(true)
acceptBankTransferPayments(boolean)optionalfalseSet to true if you want to accept payments via bank transfer from your customers, else set to false . This option is currently only available for Nigerian Naira. See more details in the API Location
onStagingEnv(boolean)requiredfalseSet to true if you want your transactions to run in the staging environment otherwise set to false. Defaults to false
txRefrequirednullPass in any other custom data you wish to pass. It takes an array of Meta object {}
txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
\n

Contribute

\n

We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-socios":{"name":"nativescript-wikitude-socios","version":"8.4.0-2.0.3","license":"Apache-2.0","readme":"

nativescript-wikitude

\n

\"npm

\n

\"NPM\"

\n

Provides nativescript access to Wikitude AR.

\n

Versioning is as follows ${wikitude-version}-${plugin-version}\nexample : 7.2.1-1.1.0 is Wikitude Version 7.2.1, Plugin version 1.1.0.

\n

Screenshots coming soon!

\n

Prerequisites / Requirements

\n

Permissions

\n

before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

\n

Running the Demo

\n

WE include a very basic AR Sample in the Demo app,

\n

but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

\n

and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

\n

Installation

\n

to install for your project you can use :

\n
tns plugin add nativescript-wikitude
\n

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

\n
    import { Wikitude } from 'nativescript-wikitude';
    // ...snip....
    registerElement('Wikitude', () => Wikitude);
\n

and then in your ar.component.html :

\n
    <Wikitude [url]=\"WikitudeURL\" 
              (WorldLoaded)=\"onWorldLoaded($event)\" 
              (JSONReceived)=\"onJSON($event)\">
    </Wikitude>
\n

and in your ar.component.ts:

\n
    import { Wikitude } from 'nativescript-wikitude';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = \"~/wikitude_world/index.html\";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...
\n

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

\n
    (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
\n

And Voila! you have Wikitude AR working in your Nativescript Application!

\n

Usage

\n

using your own location provider

\n

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

\n

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }
\n

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

\n
    this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
\n

this is useful if you want a single location state.

\n

once you have disabled it you can re-enable it with the following :

\n
    this.WikitudeInstance.enableLocationProvider();
\n

TODO

\n\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefault valueDescription
url""the URL of the Wikitude "ARWorld"
features` Features.ImageTrackingFeatures.InstantTracking
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionArgumentsDescription
setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
loadUrl()url: stringloads the URL in the Wikitude WebView
reload()reloads the current Wikitude WebView
clearCache()clears the wikitude Cache
toggleFlash()Toggles the Devices Flash-light
switchCamera()switches the Camera that wikitude uses
captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
enableLocationProvider()enables the location Provider
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionType
WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
\n

all can be imported from the index.d.ts.

\n

License

\n

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yourplugin":{"name":"nativescript-yourplugin","version":"1.0.0","license":"Apache-2.0","readme":"

Develop a NativeScript plugin \"Build

\n
\n

This repo is heavily based on @NathanWalker's Plugin Seed. Thanks, Nathan!

\n
\n\n\n\n

TL;DR

\n

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

\n
    \n
  1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript-yourplugin is the name of your plugin.
    2. \n
  2. cd nativescript-yourplugin/src
    3. \n
  3. npm run postclone
    4. \n
  4. npm run demo.ios or npm run demo.android to run the demo. This will automatically watch for TypeScript changes also in your plugin and do the transpilation.
    5. \n
\n

Long Description

\n

What is NativeScript plugin seed?

\n

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

\n\n

\"Plugin

\n

Plugin folder structure

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Folder/File nameDescription
demoThe plugin demo source code
demo/testsThe tests for your plugin
srcThe plugin source code
src/platform/androidPlugin Android specific configuration
src/platform/iosPlugin ios specific configuration
src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
\n

Getting started

\n
    \n
  1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript-yourplugin is the name of your plugin..
    2. \n
  2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
    3. \n
  3. Execute npm run postclone to:\n
      \n
    • configure your github username - it will be changed in the package.json for you
      • \n
    • configure your plugin name - all files and classes in the seed will be renamed for you
      • \n
    • stub your plugin README.md file
      • \n
    • create a new repository for your plugin
      • \n
    • npm link your plugin the demo app - this will install the plugin dependencies and will add a symbolic link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
      • \n
    \n
    4. \n
\n

Now you can continue with the development of your plugin by using the Development setup described below.

\n

NOTE: The plugin seed is updated to use the latest version of NativeScript. If you are not ready to upgrade, you can checkout a tagged version that is compatible with your NativeScript version.

\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n
    \n
  1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
    2. \n
  2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
    3. \n
\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

NOTE: Any changes that you need to make in a native library used in your plugin or in any other files inside src/platforms directory such as Info.plist or AndroidManifest.xml can't be directly reflected in the demo app. You need to use npm run demo.reset and run the application again.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the src folder in order to use native APIs:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

It's highly recommended to generate typings for the native libraries used in your plugin. By generating typings you'll be able to see what APIs exactly are exposed to Javascript and use them easily in your plugin code

\n

Generating typings for iOS

\n\n

NOTE: Swift APIs that are not exported to Objective-C are not supported. This means that you can only call APIs from JavaScript that are visible to the Objective-C runtime. This include all Objective-C APIs and only the subset of all Swift APIs that are exposed to Objective-C. So, to use a Swift API (class/function/method etc.) from NativeScript, first make sure that it can be used from Objective-C code. For more information which Swfit APIs can be exposed to Objective-C, see here.

\n

Generating typings for Android

\n\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away the src/node_modules, demo/node_modules and demo/platforms folders to reinstall them fresh.

\n\n

Sometimes you just need to wipe out the demo's platforms directory only:

\n\n

Sometimes you may need to ensure plugin files are updated in the demo:

\n\n

Unittesting

\n

The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API go to src folder and execute one of these commands:

\n
npm run test.ios
npm run test.android
\n

Publish to NPM

\n

When you have everything ready to publish:

\n\n

If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

\n

NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

\n

TravisCI

\n

The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

\n

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

\n

Referring tns-core-modules in the Plugin

\n

We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

\n

Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

\n

WRONG

\n

tsconfig.json

\n
...

\"paths\": {
  \"*\": [
    \"./node_modules/*\",
    \"./node_modules/tns-core-modules/*\"
  ]
}
...
\n

yourplugin.common.ts

\n
import * as app from 'application';
\n

RIGHT

\n

yourplugin.common.ts

\n
import * as app from 'tns-core-modules/application';
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-polyfill":{"name":"@nativescript/canvas-polyfill","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-expresspay":{"name":"nativescript-expresspay","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Expresspay

\n

\"Build

\n

This plugin allows you to use expresspay-gh payment platform with Nativescript. For more information visit https://expresspaygh.com/

\n

\"Plugin

\n

Requirements

\n\n
<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
  xmlns:tools=\"http://schemas.android.com/tools\" 
  android:id=\"@+id/layout\"
  android:layout_width=\"match_parent\"
  android:layout_height=\"match_parent\" android:paddingLeft=\"@dimen/activity_horizontal_margin\"
  android:paddingRight=\"@dimen/activity_horizontal_margin\"
  android:paddingTop=\"@dimen/activity_vertical_margin\"
  android:paddingBottom=\"@dimen/activity_vertical_margin\">
   />
  <WebView xmlns:android=\"http://schemas.android.com/apk/res/android\"
      android:layout_width=\"match_parent\" 
      android:layout_height=\"match_parent\"
      android:id=\"@+id/expresspay_webview\">
  </WebView>
</RelativeLayout>
\n\n
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name=\"activity_horizontal_margin\">16dp</dimen>
    <dimen name=\"activity_vertical_margin\">16dp</dimen>
</resources>
\n\n
<activity
android:name=\"com.expresspaygh.api.ExpressPayBrowserSwitchActivity\"
android:exported=\"false\">
<intent-filter>
    <category android:name=\"android.intent.category.DEFAULT\" />
    <category android:name=\"android.intent.category.BROWSABLE\" />

    <data android:scheme=\"${applicationId}.expresspaygh\" />
</intent-filter>

<meta-data
    android:name=\"android.webkit.WebView.EnableSafeBrowsing\"
    android:value=\"true\" />
</activity>
\n

Installation

\n
tns plugin add nativescript-expresspay
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect both demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

\n

In addition to the plugin usage, both apps are webpack configured.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript

\n
import * as Expresspay from 'nativescript-expresspay';
\n

Javascript

\n
var Expresspay = require(\"nativescript-expresspay\");
\n

Start Expresspay

\n

TypeScript

\n
let context = Expresspay.initialize({
    request: Expresspay.RequestType.Submit,
    server_url: \"http://172.20.10.5/custom/demo.expresspay.com/server.php\", // specifiy your server url to generate token
    enable_debug: true,
    order_id: \"82373\",
    currency: \"GHS\",
    amount: \"2.00\",
    order_desc: \"Daily Plan\",
    first_name: \"Test\",
    last_name: \"Api\",
    email: \"testapi@expresspaygh.com\",
    phone_number: \"233546891427\",
    account_number: \"233546891427\"
});
\n

Javascript

\n
var context = Expresspay.initialize({
    request: \"submit\",
    server_url: \"http://172.20.10.5/custom/demo.expresspay.com/server.php\", // specifiy your server url to generate token
    enable_debug: true,
    order_id: \"82373\",
    currency: \"GHS\",
    amount: \"2.00\",
    order_desc: \"Daily Plan\",
    first_name: \"Test\",
    last_name: \"Api\",
    email: \"testapi@expresspaygh.com\",
    phone_number: \"233546891427\",
    account_number: \"233546891427\"
});
\n

Full usage

\n
context
    .getToken()
    .then((response) => {
      console.log(\"Payload response\", response)
      return context.checkoutPayment()
    })
    .then((response) => {
      console.log(\"PAYMENT COMPLETED\", response)
    })
    .catch((e) => {
      console.log(e);
    });
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionStatusDefaultDescription
requestrequirednullSet server request type
enable_debugoptionalfalseSet the developnment env. Please ensure you set this value to false in your production code. This helps to log server response
server_urloptionalhttps://sandbox.expresspaygh.com/api/sdk/php/server.phpthe full path url to the location on your servers where you implement express pay server side sdk
currencyrequirednullCurrency of the transaction
amountrequirednullAmount the customer is paying for the order
order_idrequirednullUnique order identification number
order_descrequirednullDescription of the order
account_numberrequirednullCustomer account number at Merchant
redirect_urloptionalnullURL that customer should be redirected at the completion of the payment process
order_img_urloptionalnullImage that customer should be shown at Checkout. This must be implemented from server side
first_nameoptionalnullCustomer First name
last_nameoptionalnullCustomer Last name
phone_numberoptionalnullCustomer email address
emailoptionalnullCustomer Last name
\n

Contribute

\n

We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

License

\n

Apache License Version 2.0, January 2019

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/paystack":{"name":"@abbieben/paystack","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maskedinput-ng2":{"name":"nativescript-maskedinput-ng2","version":"1.3.1","license":"ISC","readme":"\n

A {N} Masked Input Plugin

\n

\"License\" \"npm\" \"npm\" \"GitHub

\n

This plugin extends the {N} TextView to allow for input masking.

\n

Notes

\n

iOS 7+

\n

Android API 17+

\n

Plugin does not support the use of the keyboardType property from TextView.

\n

Plugin will attempt to determine the mask type and display the appropriate keyboardType automatically.

\n

Installation

\n

Run tns plugin add nativescript-maskedinput-ng2

\n

Usage

\n

To use MaskedInput you need to include it in your XML.

\n

Add the following to your page directive.

\n
xmlns:mi=\"nativescript-maskedinput-ng2\"
\n

Use MaskedInput by adding the following XML.

\n
<mi:MaskedInput mask=\"1-999-999-9999? x999\" hint=\"1-555-555-5555\" placeholder=\"#\" />
\n

Properties

\n

mask [string]

\n

Get or Set the mask used for input

\n

mask options

\n\n
Supported Seperators
\n\n

valid [boolean]

\n

Returns true or false if the input text matches the mask.

\n

Use the FormattedText property or the text property to validate the input.

\n

placeholder [string]

\n

Gets or Sets the placeholder.

\n

Default: _

\n

RawText [string]

\n

Gets only the text that matches the RegEx pattern from the mask.

\n

You cannot validate the RawText property. It will fail.

\n

FormattedText [string]

\n

Gets the Full text including any seperators as specified in the mask.

\n

regEx [string]

\n

Gets the regex that was created from the mask so that you can perform your own validation.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-markdown-view":{"name":"nativescript-markdown-view","version":"2.0.0","license":"MIT","readme":"

NativeScript Markdown View

\n

\"npm\n\"Build

\n

\"NPM\"

\n

A NativeScript plugin that provides a natively rendered markdown view.

\n

Uses Markwon on Android and TSMarkdownParser on iOS.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-markdown-view
\n

This command automatically installs the necessary files, as well as stores nativescript-markdown-view as a dependency in your project's package.json file.

\n

Usage

\n

You need to add xmlns:mv="nativescript-markdown-view" to your page tag, and then simply use <mv:MarkdownView/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:mv=\"nativescript-markdown-view\">
    <StackLayout class=\"p-20\">
        <mv:MarkdownView markdown=\"_This_ should be **bold**!\" />
    </StackLayout>
</Page>
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
markdown""The markdown to be rendered on screen
\n

License

\n

MIT License, see LICENSE file

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-solid-vision":{"name":"@nativescript/template-blank-solid-vision","version":"8.6.3","license":"Apache-2.0","readme":"

NativeScript with Solid for visionOS

\n
ns run visionos --no-hmr
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slideshow-busy-indicator":{"name":"nativescript-slideshow-busy-indicator","version":"3.0.1","license":"Apache-2.0","readme":"

Nativescript-slideshow-busy-indicator

\n

This plug-in allows you to easily create a busy indicator (loader) like the one illustrated using a set of images that you provide. What it does is cycle through the images with a nice transition.

\n

\"Sample

\n

Prerequisites

\n

You need a set of images that will be used to be cycled through. The format can be any format that the NS Image module supports. For best looks icon-like images (with transparency like PNGs) do the job. See demo.

\n

Installation

\n
npm install nativescript-slideshow-busy-indicator --save
\n

Usage

\n

You will have to add xmlns:indicator="nativescript-slideshow-busy-indicator" namespace to your page tag, and then simply use <indicator:BusyIndicator/> in order to add the widget to your page.

\n

The must-set properties are:\nimages - set this property to an array of strings that represent paths to the images you would like to display, like:

\n
public images = [\"~/images/01.png\", \"~/images/02.png\", \"~/images/03.png\", \"~/images/04.png\"];
\n

isBusy - when set to true, the indicator is visible, when false - it is not

\n

Then you can use the indicator like:

\n
<indicator:BusyIndicator isBusy=\"{{ isBusy }}\"
 images=\"{{ images }}\"
 indicatorWidth=\"60\" 
 indicatorHeight=\"60\" 
 indicatorBorderRadius=\"30\" 
 indicatorColor=\"red\" />
\n

A few examples:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OutputCode
\"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
images="{{ images }}"
indicatorWidth="60"
indicatorHeight="60"
indicatorBorderRadius="30"
indicatorColor="red" />
\"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
images="{{ images }}"
indicatorWidth="90"
indicatorHeight="90"
indicatorBorderRadius="30"
indicatorColor="yellow"
backOpacity="0.4"
backColor="pink" />
\"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
images="{{ images }}"
indicatorWidth="120"
indicatorHeight="100"
indicatorBorderRadius="20"
indicatorColor="red"
backOpacity="0.6"
backColor="black" />
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
backOpacitySets the opacity of the background layer (floating point value from 0 to 1)
backColorSets the color of the background layer (e.g. "red", "#FF0000")
indicatorOpacitySets the opacity of the indicator layer (floating point value from 0 to 1)
indicatorColorSets the color of the indicator layer (e.g. "green", "#00FF00")
indicatorHeightSets the height of the indicator layer in pixels
indicatorWidthSets the width of the indicator layer in pixels
indicatorBorderRadiusSets the border radius of the indicator layer (by default is 0, can be set to 0.5 * indicatorHeight if you want to make the indicator circle for example)
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/flutterwave":{"name":"@abbieben/flutterwave","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-arth":{"name":"nativescript-opentok-arth","version":"1.7.2","license":"MIT","readme":"

Nativescript OpenTok

\n

\"npm\"\n\"npm\"

\n

A Nativescript plugin for the OpenTok iOS and Android SDK.

\n

OpenTok: https://tokbox.com/developer/

\n

Getting Started

\n

Requirements

\n\n

Installation

\n

Node Package Manager (NPM)

\n\n

Integration

\n

Routed Sessions

\n
View
\n

You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

\n

The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

\n
<StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
<OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
\n

Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

\n
import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

private _apiKey:string = 'API_KEY';
private _sessionId: string = 'SESSION_ID';
private _token: string = 'TOKEN';

private publisher: TNSOTPublisher;
private subscriber: TNSOTSubscriber;

private session: TNSOTSession;

constructor(private page: Page) {
   super();
   this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
   this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
   this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
   this.initPublisher();
   this.initSubscriber();
}

initPublisher() {
   this.session.connect(this._token);
   this.publisher.publish(this.session, '', 'HIGH', '30');
   this.publisher.events.on('streamDestroyed', (result) => {
       console.log('publisher stream destroyed');
   });
}

initSubscriber() {
   this.session.events.on('streamCreated', () => {
       this.subscriber.subscribe(this.session);
   });
}
\n

Special Articles

\n\n

Images

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iPhoneiPad
\"iPhone\"iPad
\n

Notes

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-routed-values":{"name":"nativescript-routed-values","version":"1.2.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-routed-values/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Routed Values

\n

A NativeScript module for implementing routed value graphs.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-routed-values
\n

inside your app project to install the module.

\n

What are "routed values"?

\n

The idea is that you can build graphs of values.

\n

You define one or more root element that can have one or more child that also can handle one or more child and so on.

\n

For example:

\n
        A1
    /       \\
   B1         B2
  /  \\      /    \\
C1   C2    C3    C4
\n

Here you have the root element A1 that has the children B1 and B2.

\n

B1 itself has the children C1 and C2.

\n

B2 is the parent of C3 and C4.

\n

The code of that graph looks like this:

\n
import {RoutedNumber} from \"nativescript-routed-values\";

// the root element
var A1 = new RoutedNumber();

// the children of A1
var B1 = new RoutedNumber();
var B2 = new RoutedNumber();
A1.addChildren(B1, B2);

// the children of B1
var C1 = new RoutedNumber();
var C2 = new RoutedNumber();
B1.addChildren(C1, C2);

// the children of B2
var C3 = new RoutedNumber();
var C4 = new RoutedNumber();
B2.addChildren(C3, C4);
\n

Now if you change the value of A1 it will notify that value to all its children.

\n

And these children will notify value changes to their children and so on.

\n

By default the highest values wins.

\n

You can set the value by using the innerValue property:

\n
A1.innerValue = 5979;
\n

The effect is that A1 will raise a change event for the value property of itself and their children B1 and B2.

\n

B1 and B2 will also raise change events for their children.

\n

Other direction

\n

You also can use the "other" direction, what means that the lower value "wins".

\n

In that case you have to set Descending value of the RouterStradegy enum

\n
enum RouterStradegy {
    /**
     * Take the value from parent (if greater)
     */
    Ascending,

    /**
     * Take the value from parent (if smaller)
     */
    Descending,
}
\n

in the constructor of a routed value.

\n
import {RoutedNumber, RouterStradegy} from \"nativescript-routed-values\";

var A1 = new RoutedNumber(RouterStradegy.Descending);
\n

Example

\n

Data binding

\n

The graph above is realized as demo app.

\n\n

The values of the left side are the routed values provided by value property.

\n

The values of the right side are the "real" / inner values provided by innerValue property.

\n

To increase a value simply tap on it.

\n

Events

\n

onValueChanged

\n
import {RoutedNumber} from \"nativescript-routed-values\";

var A1 = new RoutedNumber();
A1.name = 'A1';
A1.onValueChanged((newValue, obj) => {
    console.log(\"New value of '\" + obj.name + \"' is: \" + newValue);
});

A1.innerValue = 5979;
\n

Classes

\n

TrafficLight

\n

This represents a "traffic light" and uses the following enum:

\n
enum TraficLightState {
    /**
     * None (gray)
     **/
    None = 0,

    /**
     * OK (green)
     **/
    OK = 1,

    /**
     * Warning (yellow)
     **/
    Warning = 2,

    /**
     * Error (red)
     **/
    Error = 3,

    /**
     * Fatal error (yellow / red)
     **/
    FatalError = 4,
}
\n

RoutedValue<T>

\n

This is the generic version of a routed value and can be used for all comparable value types, especially for enums:

\n
import {RoutedValue} from \"nativescript-routed-values\";

enum MyEnum {
    Value1 = 1,
    Value2 = 2,
    Value3 = 3,
}

var v = new RoutedValue<MyEnum>();
v.innerValue = MyEnum.Value1;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-barcodeview":{"name":"nativescript-barcodeview","version":"3.4.9","license":"MIT","readme":"

NativeScript BarcodeView

\n

Supported barcode types

\n

iOS and Android

\n\n

Android only

\n\n

iOS only

\n\n

A note about UPC_A and EAN_13

\n

When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Usage

\n

The nativescript BarcodeView is base on nativescript-barcodescanner from [Eddy Verbruggen]\n(https://github.com/EddyVerbruggen)

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdc="nativescript-canvas" on the Page element

\n

XML

\n
<Page xmlns:bc=\"nativescript-barcodeview\">
    <StackLayout horizontalAlignment=\"center\">
        <bc:BarcodeView width=\"100\" height=\"100\" scanResult=\"onScanResult\"/>
   </StackLayout>
</Page>
\n

NativeScript + Angular

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { BarcodeView } from 'nativescript-barcodeview';
registerElement('BarcodeView', () => BarcodeView);
\n
<BarcodeView width=\"100\" height=\"100\" (scanResult)=\"onScanResult($event)\"></CanvasView>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
(<any>Vue).registerElement('BarcodeView', () => require('nativescript-barcodeview').BarcodeView);
\n
<BarcodeView  width=\"100\" height=\"100\"  @scanResult=\"onScanResult\"/>
\n

Whatever the UI framework you will receive the event in :

\n
function onScanResult(text:string, barcodeFormat:string) {

}
\n

Properties

\n\n

Methods

\n\n

Android

\n

ZXing: https://github.com/zxing/zxing/releases\nZXing Android Embedded: https://github.com/journeyapps/zxing-android-embedded

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-marshmallow-loader":{"name":"nativescript-marshmallow-loader","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-marshmallow-loader/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Marshmallow Loader

\n

NativeScript plugin for the Android Marshmallow loading animation.

\n

Android Only

\n

Sample Usage

\n\n\n\n\n\n\n\n\n\n\n\n
Sample
\"Sample\"
\n

Native Library:

\n\n\n\n\n\n\n\n\n\n\n\n
Android
Cleveroad/CRAndroidMBootAnimationView
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add nativescript-marshmallow-loader

\n

Usage

\n

\n
<Page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:Marshmallow=\"nativescript-marshmallow-loader\" loaded=\"pageLoaded\">
  <ActionBar title=\"Marshmallow Loader\" />
  <StackLayout>
    <Marshmallow:MarshmallowLoader id=\"marshmallow\" height=\"140\" />
    <StackLayout orientation=\"horizontal\">
      <Button text=\"Pause\" tap=\"{{ pauseIt }}\" />
      <Button text=\"Play\" tap=\"{{ playIt }}\" />
      <Button text=\"Stop\" tap=\"{{ stopIt }}\" />
    </StackLayout> 
  </StackLayout>
</Page>
\n

API

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/checkbox":{"name":"@abbieben/checkbox","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applozic-chat-creditoh":{"name":"nativescript-applozic-chat-creditoh","version":"1.0.3","license":"Apache-2.0","readme":"

Applozic NativeScript Chat Plugin

\n

Fork of nativescript-applozic-chat@1.7.2

\n

Installation

\n
tns plugin add nativescript-applozic-chat-creditoh
\n

Goto src folder and run

\n
npm run demo.ios
\n

Usage

\n

Login/Register User

\n
    var alUser = {
            'userId' : userId,   //Replace it with the userId of the logged in user
            'password' : password,  //Put password here
            'authenticationTypeId' : 1,
            'applicationId' : 'applozic-sample-app',  //replace \"applozic-sample-app\" with Application Key from Applozic Dashboard
            'deviceApnsType' : 0    //Set 0 for Development and 1 for Distribution (Release)
        };
\t
    applozicChat.login(alUser, function(response) {
        applozicChat.launchChat(); //launch chat
      }, function(error) {
        console.log(\"onLoginFailure: \" + error);
      });
\n

Launch Chat

\n
Main Chat screen
\n
        applozicChat.launchChat();
\n
Launch Chat with a specific User
\n
        applozicChat.launchChatWithUserId(userId);
\n
Launch Chat with specific Group
\n
        applozicChat.launchChatWithGroupId(groupId, function(response){
\t  console.log(\"Success : \" + response);
\t}, function(response){
\t  console.log(\"Error : \" + response);
\t});
\n

Logout

\n
applozicChat.logout(function(response) {
      console.log(\"logout success: \" + response);
    }, function(error) {
      console.log(\"logout error: \"+ error);
    });
\n

Push Notification Setup instruction

\n

Uploading the push notification certificate and GCM/FCM server key in applozic dashboard

\n

a) For IOS upload your APNS push notification certificate to Applozic Dashboard page under 'Edit Application' section in order to enable real-time notification.

\n

Go to Applozic Dashboard Push Notification Push Notification -> Upload APNS Certificate for Development and Distribution environment.

\n

b) For Android go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.

\n

Android

\n

Prerequisites:

\n
    \n
  1. Download these files https://github.com/reytum/Applozic-Push-Notification-FIles
    2. \n
  2. Register you application in firebase console and download the google-services.json file.
    3. \n
  3. Get the FCM server key from firebase console.(There is a sender ID and a server key, make sure you get the server key).
    4. \n
  4. Go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.
    5. \n
\n

Steps to follow:

\n
    \n
  1. \n

    Copy the pushnotification folder from the above downloaded files and paste it in path <your project>/platforms/android/src/main/java/com/tns/

    \n
    2. \n
  2. \n

    Add these lines in file <your project>/platforms/android/src/main/AndroidManifest.xml inside <application> tag

    \n
       <service android:name="com.tns.pushnotification.FcmListenerService">\n     <intent-filter>\n         <action android:name="com.google.firebase.MESSAGING_EVENT" />\n     </intent-filter>\n </service>\n <service\n     android:name="com.tns.pushnotification.FcmInstanceIDListenerService"\n     android:exported="false">\n     <intent-filter>\n         <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />\n     </intent-filter>\n </service>\n
    \n
    3. \n
  3. \n

    Add the same lines from step 2 in <your project>/app/App_Resources/Android/AndroidManifest.xml file inside <application> tag

    \n
    4. \n
  4. \n

    Paste thegoogle-services.json file in <your project>/platforms/android/ folder

    \n
    5. \n
  5. \n

    Open <your project>/platforms/android/build.gradle :\nadd this inside dependency mentioned in top of the file (below classpath "com.android.tools.build:gradle:2.2.3") :\nclasspath "com.google.gms:google-services:3.1.1"\nadd this below apply plugin: "com.android.application" :\napply plugin: "com.google.gms.google-services"

    \n
    6. \n
  6. \n

    Call PushNotificationTask in onSuccess of applozic login as below:

    \n
       applozicChat.registerForPushNotification(function(response){
       console.log(\"push success : \" + response);
     }, function(response){
       console.log(\"push failed : \" + response);
     });
    \n
    7. \n
\n

Note : Everytime you remove and add android platform you need to follow steps 1,2,4 and 5.

\n

Ios

\n
    \n
  1. \n

    Download delegate.ts file from this delegate.ts link and paste it under your project folder-->app-->delegate.ts

    \n
    2. \n
  2. \n

    Download app.ts file from the app.ts link and replace the app.ts file in your project if you have any changes then you can merge only required changes from the app.ts file link

    \n
    3. \n
\n

NOTE : Above push notification setup for android and ios is in the case if your not using native script push plugin in your project

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker-fixed-color":{"name":"nativescript-modal-datetimepicker-fixed-color","version":"1.1.10","license":"Apache-2.0","readme":"

nativescript-modal-datetimepicker \"Build \"npm\" \"npm\"

\n

\"Twitter

\n

\"NPM\"

\n

This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

\n

Android Screenshots

\n

Date Picker

\n\n

Time Picker

\n\n

iOS

\n\n

Installation

\n
tns plugin add nativescript-modal-datetimepicker
\n

Configuration

\n

For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

\n

This can be changed in App_Resources/Android/values-21/styles.xml

\n
<!-- Default style for DatePicker - in spinner mode -->
<style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
    <item name=\"android:datePickerMode\">calendar</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
    <item name=\"android:timePickerMode\">clock</item>
</style>
\n

Usage

\n

NativeScript Core

\n
const ModalPicker = require(\"nativescript-modal-datetimepicker\")
  .ModalDatetimepicker;

const picker = new ModalPicker();

// Pick Date
exports.selectDate = function() {
  picker
    .pickDate({
      title: \"Select Your Birthday\",
      theme: \"light\",
      maxDate: new Date()
    })
    .then(result => {
      // Note the month is 1-12 (unlike js which is 0-11)
      console.log(
        \"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year
      );
      var jsdate = new Date(result.year, result.month - 1, result.day);
    })
    .catch(error => {
      console.log(\"Error: \" + error);
    });
};

// Pick Time
exports.selectTime = function() {
  picker
    .pickTime()
    .then(result => {
      console.log(\"Time is: \" + result.hour + \":\" + result.minute);
    })
    .catch(error => {
      console.log(\"Error: \" + error);
    });
};
\n

API

\n

pickDate(options): Promise<DateResponse>;

\n

Returns a promise that resolves to DateResponse type object (Note: the month is 1-12, unlike js which is 0-11)

\n
date: {
    day: number,
    month: number,
    year: number
}
\n

pickTime(options): Promise<TimeResponse>;

\n

Returns a promise that resolves to TimeResponse type.

\n
time: {
    hour: number,
    minute: number
}
\n

options conform to the following interface:

\n
export interface PickerOptions {
  title?: string; // iOS ONLY: The title to display above the picker, default hidden.
  theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark and prominent.
  maxDate?: Date;
  minDate?: Date;
  startingHour?: number; // Ignored on pickDate()
  startingMinute?: number; // Ignored on pickDate()
  startingDate?: Date; // Ignored on pickTime()
  datePickerMode?: string; // Android ONLY: set this to \"spinner\" to see spinner for DatePicker, other option is \"calendar\" (which is the default)
}
\n

Response Interfaces

\n
export interface TimeResponse {
  hour: number;
  minute: number;
}

export interface DateResponse {
  day: number;
  month: number;
  year: number;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-checkbox":{"name":"@akylas/nativescript-checkbox","version":"2.0.5","license":"MIT","readme":"\n

NativeScript Checkbox

\n\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"stars\"\n \n
\n

\n
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

NativeScript 7+:

\n
ns plugin add @nstudio/nativescript-checkbox
\n

NativeScript prior to 7:

\n
tns plugin add @nstudio/nativescript-checkbox@1.0.0
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Sample Usage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Android SampleiOS Sample
\"Sample1\"\"Sample2\"
\n

Usage

\n

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n

\n

import { CheckBox } from '@nstudio/nativescript-checkbox';
import { topmost } from '@nativescript/core/ui/frame';

public toggleCheck() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
Vue.registerElement(
  'CheckBox',
  () => require('@nstudio/nativescript-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

\n\n

Contributing & Running Demo Apps

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mutual-auth":{"name":"nativescript-mutual-auth","version":"1.0.1","license":"Apache-2.0","readme":"

Mutual Auth

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-mutual-auth
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-iphonex-safe-area":{"name":"nativescript-ngx-iphonex-safe-area","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-ngx-iphonex-safe-area

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

{N} + Angular directive to implement safe area margins or paddings especially on iPhone X.

\n

Installation

\n
tns plugin add nativescript-ngx-iphonex-safe-area
\n

Usage

\n

Import the module in your app module

\n
import { NgiPhoneXSafeAreaModule } from 'nativescript-ngx-iphonex-safe-area';

@NgModule({
    imports: [
        NgiPhoneXSafeAreaModule,
        // ...
    ],
    // ...
})
export class MyModule { }
\n

Import the CSS or SCSS file depending on your project

\n

If your project uses good old css import the classes the directive will apply to your views like so...

\n
@import 'nativescript-ngx-iphonex-safe-area/css/iphonex.css';
\n

In case your project uses scss instead, use this syntax to import the classes...

\n
@import '~nativescript-ngx-iphonex-safe-area/scss/iphonex';
\n

Finally use it in your templates like so

\n
 <GridLayout iPhoneX [mind]=\"['left', 'right', 'bottom']\" [padding]=\"true\"></GridLayout>
\n

The result will be something like this...

\n\n\n\n\n\n\n\n
\"Screenshot\"Screenshot
\n

Notice those blueish painted areas? Well, those are the safe area!

\n

If you want a quickstart, check out the demo app.

\n
\n

I promise, this won't break your app in devices other than the iPhone X.

\n\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
mindstring[]['left', 'right', 'bottom']Think of the name as the typical 'Mind the gap' from London Underground. It tells the directive whether it should mind the safe area only at the bottom, only the left or any combination you might need.
paddingbooleanfalseYou can use this property to tell the directive to apply padding instead of margin to your views.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-slider":{"name":"nativescript-material-slider","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mds="nativescript-material-slider" on the Page element

\n

XML

\n
<Page xmlns:mds=\"nativescript-material-slider\">
    <StackLayout horizontalAlignment=\"center\">
        <mds:Slider value=\"50\" minValue=\"0\" maxValue=\"100\" />
   </StackLayout>
</Page>
\n

CSS

\n
mdslider {
    ripple-color: blue;
    elevation: 4;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialSliderModule } from \"nativescript-material-slider/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialSliderModule,
        ...
    ],
    ...
})
\n
<MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\"></MDSlider>
\n

NativeScript + Vue

\n
import SliderPlugin from 'nativescript-material-slider/vue';

Vue.use(SliderPlugin);
\n
<MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\" @valueChange=\"onValueChanged\"/>
\n

Or you can bind the value to some instance data using the v-model directive:

\n
<MDSlider v-model=\"value\" minValue=\"0\" maxValue=\"100\"/>
\n

Attributes

\n

Inherite from Nativescript Slider so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.

\n\n

An attribute to set the ripple color of the slider.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-progress":{"name":"nativescript-material-progress","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdp="nativescript-material-progress" on the Page element

\n

XML

\n
<Page xmlns:mdp=\"nativescript-material-progress\">
    <StackLayout horizontalAlignment=\"center\">
        <mdp:Progress value=\"50\" maxValue=\"100\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdprogress {
    ripple-color: blue;
    elevation: 4;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialProgressModule } from \"nativescript-material-progress/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialProgressModule,
        ...
    ],
    ...
})
\n
<MDProgress v-model=\"value\" maxValue=\"100\"></MDProgress>
\n

NativeScript + Vue

\n
import ProgressPlugin from 'nativescript-material-progress/vue';

Vue.use(ProgressPlugin);
\n
<MDProgress value=\"50\" maxValue=\"100\"></MDProgress>
\n

Attributes

\n

Inherite from Nativescript Progress so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

\n\n

An attribute to set the ripple color of the progress.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paint":{"name":"nativescript-paint","version":"2.1.0","license":"Apache-2.0","readme":"

NativeScript 7.0+

\n

Use version 1.1.0 of the plugin

\n

NativeScript Paint

\n

\"apple\" \"android\"

\n

\"npm

\n

\"NPM\"

\n

This plugin allows the artist to create paintings in an app using opacity and width settings cross platform. On iOS, an Airbrush as well as a Paintbrush is available. With the Airbrush, you can control Airbrush Flow to make the paint effect change. This plugin would be useful to folks who need a more art-friendly type plugin. Use with the Color Picker plugin to enable color changes.

\n

\"demo\"

\n

Installation

\n
tns plugin add nativescript-paint
\n

Requiring the plugin

\n
import { PaintPad } from 'nativescript-paint';
\n

Using the PaintPad

\n

JavaScript

\n
    \n
  1. Add the plugin to your xml
    2. \n
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:paint=\"nativescript-paint\">
\n
    \n
  1. Create a PaintPad area
    2. \n
\n
<paint:PaintPad canvasColor=\"#fff\" id=\"paintPad\" margin=\"10\" width=\"280\" height=\"280\" drawColor=\"{{ drawColor }}\" drawWidth=\"{{ drawWidth }}\" airBrushFlow=\"{{ airBrushFlow }}\" drawOpacity=\"{{ drawOpacity }}\" />
\n

Angular

\n
    \n
  1. Register the plugin in a module
    2. \n
\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('PaintPad', () => require('nativescript-paint').PaintPad);
\n
    \n
  1. Add it to your markup
    2. \n
\n
<PaintPad
    canvasColor=\"#fff\"
     #PaintPad\t\t\t
     [drawColor]=\"drawColor\"
     [drawWidth]=\"drawWidth\"
     [airBrushFlow]=\"airBrushFlow\"
     [drawOpacity]=\"drawOpacity\"
></PaintPad>
\n
    \n
  1. Reference the PaintPad by id to manipulate it
    2. \n
\n
@ViewChild('PaintPad') PaintPad: ElementRef;
this.myPaintPad = this.PaintPad.nativeElement;
\n

Vue

\n
    \n
  1. In main.js, register the element:
    2. \n
\n
Vue.registerElement('PaintPad', () => require('nativescript-paint').PaintPad);
\n
    \n
  1. Use it in your app:
    2. \n
\n
<PaintPad
    canvasColor=\"#fff\"
    ref=\"paintPad\"
    :drawColor=\"drawColor\"
    :drawWidth=\"drawWidth\"
    :airBrushFlow=\"airBrushFlow\"
    :drawOpacity=\"drawOpacity\"
/>
\n
    \n
  1. Reference the PaintPad by ref to manipulate it
    2. \n
\n
selectAirBrush() {
    this.$refs.paintPad.nativeView.setToolType(1);
}
\n

Demos

\n

In /src, you can use npm scripts to run demos in vanilla JS, Angular and Vue. Run:

\n

npm run demo.ios or npm run demo-ng.ios or npm run demo-vue.ios. Reset the demos similarly, running npm run demo(-ng or -vue).reset.

\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.\njavascript Usage code snippets here)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
DAScratchPadFreeDrawView
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
drawWidth5width of the brush
drawColor#3489dba hex code for color
drawOpacity1 (iOS) or 255 (Android)on iOS, set this to between 0-1. On Android, between 0-255
airBrushFlow0.7iOS only - how heavy the Airbrush paints
getPaintingsave an image of your painting
clearPaintingclear the paint area
setToolType0iOS only - set 0 for Paintbrush, 1 for Airbrush
\n

Credits

\n

With gratitude to Brad Martin, author of the first drawing plugin NativeScript-Drawingpad, on which this plugin is heavily based, and to the help of Nathan Walker and Osei Fortune. ❤️

\n

License

\n

Apache License Version 2.0, January 2004

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-stripe":{"name":"@triniwiz/nativescript-stripe","version":"8.0.3","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-login":{"name":"nativescript-google-login","version":"1.4.0","license":"Apache-2.0","readme":"

Nativescript Google Login

\n

\"npm\n\"NPM\"

\n

Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

\n

It is inspired by the plugin nativescript-social-login

\n

Works with Android X, iOS 13

\n

Screenshots

\n

Android

\n

\"Screenshot

\n

iOS

\n

\"Screenshot

\n

Dependencies

\n

iOS

\n
pod 'GoogleSignIn', '~> 5.0'
\n

Android

\n
implementation 'com.google.android.gms:play-services-auth:17.0.0'
\n

Installation

\n
tns plugin add nativescript-google-login
\n

iOS

\n

Get an OAuth client ID

\n

Get an Oauth client id from the Google website

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleTypeRole</key>
\t\t<string>Editor</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
\t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
\t\t\t<!-- Get it from your GoogleService-Info.plist -->
\t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t</array>
\t</dict>
</array>
\n

Usage

\n
```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
\n

Result

\n
```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-liquid-loader":{"name":"nativescript-liquid-loader","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-liquid-loader/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Liquid-Loader

\n

Nativescript plugin for a slick liquid loading animation.

\n

Android Only - API 18+

\n

IMPORTANT

\n

To use this plugin you need to modify the AndroidManifest.xml located in App_Resources/Android.\nYou need the tools namespace, xmlns:tools="http://schemas.android.com/tools", added to the top of the file in the <manifest> tag.

\n

You also need to add tools:overrideLibrary="com.gospelware.liquidbutton" to the <uses-sdk> tag.

\n

For more info see the AndroidManifest.xml in the demo app.

\n

Sample

\n

\"Demo\"

\n

Native Library

\n

LiquidButton

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

tns plugin add nativescript-liquid-loader

\n

Usage

\n

XML:

\n
<Page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:LiquidLoader=\"nativescript-liquid-loader\" 
  loaded=\"pageLoaded\">
  <ActionBar title=\"Liquid Loader\" />
  <StackLayout>

    <LiquidLoader:LiquidLoader id=\"liquidLoader\" height=\"400\" pourFinish=\"{{ pourFinished }}\" />

    <Button text=\"Start Animation\" tap=\"{{ startThePour }}\" />

  </StackLayout>
</Page>
\n

API

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-cardview":{"name":"nativescript-material-cardview","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Android migration to AndroidX

\n

For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.\ninside App_ressources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdc="nativescript-material-cardview" on the Page element

\n

XML

\n
<Page xmlns:mdc=\"nativescript-material-cardview\">
    <StackLayout horizontalAlignment=\"center\">
        <mdc:CardView width=\"100\" height=\"100\"/>
        <mdc:CardView elevation=\"5\" rippleColor=\"red\"  width=\"100\" height=\"100\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdccardview {
    ripple-color: blue;
    elevation: 4;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialCardViewModule } from \"nativescript-material-cardview/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialCardViewModule,
        ...
    ],
    ...
})
\n
<MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"></MDCardView>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import CardViewPlugin from 'nativescript-material-cardview/vue';

Vue.use(CardViewPlugin);
\n
<MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"/>
\n

Attributes

\n

Inherite from Nativescript StackLayout

\n

Attributes

\n\n

An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

\n\n

An attribute to set the ripple color of the cardview.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-extendedinfo":{"name":"nativescript-extendedinfo","version":"1.0.11","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Plugin to get diverse device infos. This plugin caches results to make it faster.

\n
function isSimulator(): boolean;
function getAppId(): Promise<string>;
function getAppIdSync(): string;
function getVersionName(): Promise<string>;
function getVersionNameSync(): string;
function getAppName(): Promise<string>;
function getAppNameSync(): string;
function getBuildNumber(): Promise<number>;
function getBuildNumberSync(): number;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-bottomsheet":{"name":"nativescript-material-bottomsheet","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

NativeScript Material BottomSheets

\n

Use the Material Design Bottom Sheets in your {N} app

\n
Material Design Spec
\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Changelog

\n

Usage

\n

Start-up wiring (NON ANGULAR)

\n

We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

\n
JavaScript
\n
var material = require(\"nativescript-material-bottomsheet\");

material.install();
\n
TypeScript
\n
import { install } from \"nativescript-material-bottomsheet\";
install();
\n

Uses the same kind of API as Nativescript Modals

\n
TS
\n
const modalViewModulets = \"ns-ui-category/modal-view/basics/modal-ts-view-page\";
export function openBottomSheet(args) {
    const mainView: Button = <Button>args.object;
    const context = { username: \"test_username\", password: \"test\" };
    const fullscreen = true;
    mainView.showBottomSheet({
        view: modalViewModulets,
        context,
        closeCallback: (username, password) => {
            bottom-sheet
            alert(`Username: ${username} : Password: ${password}`);
        },
        fullscreen
    });
}
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import BottomSheetPlugin from 'nativescript-material-bottomsheet/vue';

Vue.use(BottomSheetPlugin);
\n

Then you can show a Vue component:

\n
import MyComponent from 'MyComponent.vue';

//inside another Vue component
const options: BottomSheetOptions = {
};
this.$showBottomSheet(MyComponent, options)
\n

NativeScript + Angular

\n

First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

\n
import { NativeScriptMaterialBottomSheetModule} from \"nativescript-material-bottomsheet/angular\";

@NgModule({
    imports: [
        // This will call the install method and inject a global service called BottomSheetService
        NativeScriptMaterialBottomSheetModule.forRoot()
    ],
    ...
})
\n

now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

\n
ItemComponent
\n
import { Component,  ViewContainerRef } from '@angular/core';
import { BottomSheetOptions, BottomSheetService } from 'nativescript-material-bottomsheet/angular';
import { ShareOptionsComponent } from './share-options.component';

@Component({
    selector: 'ns-item',
    templateUrl: './item.component.html',
    moduleId: module.id
})
export class ItemComponent {
    constructor(
        private bottomSheet: BottomSheetService, 
        private containerRef: ViewContainerRef,
    ) {}

    showOptions() {
        const options: BottomSheetOptions = {
            viewContainerRef: this.containerRef,
            context: ['Facebook', 'Google', 'Twitter']
        };

        this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
            console.log('Option selected:', result);
        });
    }
}
\n
ShareOptionsComponent
\n
<ListView
    [items]=\"options\"
    (itemTap)=\"onTap($event)\"
    separatorColor=\"white\"
    class=\"list-group\"
    height=\"200\"
>
    <ng-template let-option=\"item\">
        <Label
            class=\"list-group-item\"
            [text]=\"option\"
        ></Label>
    </ng-template>
</ListView>
\n
import { Component, OnInit } from '@angular/core';
import { BottomSheetParams } from 'nativescript-material-bottomsheet/angular';
import { ItemEventData } from '@nativescript/core/ui/list-view';

@Component({
    selector: 'ns-share-options',
    templateUrl: 'share-options.component.html'
})
export class ShareOptionsComponent implements OnInit {
    options: string[];
    
    // The BottomSheetService injects the BottomSheetParams to the component
    // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
    constructor(private params: BottomSheetParams) {}

    ngOnInit() {
        this.options = this.params.context;
    }

    onTap({ index }: ItemEventData) {
        this.params.closeCallback(this.options[index]);
    }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-activityindicator":{"name":"nativescript-material-activityindicator","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mda="nativescript-material-activityindicator" on the Page element

\n

XML

\n
<Page xmlns:mda=\"nativescript-material-activityindicator\">
    <StackLayout horizontalAlignment=\"center\">
        <mda:ActivityIndicator busy=\"true\"/>
    </StackLayout>
</Page>
\n

CSS

\n
mdcactivityindicator {
    color: #fff;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialActivityIndicatorModule } from \"nativescript-material-activityindicator/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialActivityIndicatorModule,
        ...
    ],
    ...
})
\n
<MDActivityIndicator busy=\"true\"></MDActivityIndicator>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import ActivityIndicatorPlugin from 'nativescript-material-activityindicator/vue';

Vue.use(ActivityIndicatorPlugin);
\n
<MDActivityIndicator busy=\"true\"/>
\n

Attributes

\n

Inherite from Nativescript Activity Indicator so it already has all the same attributes

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-floatingactionbutton":{"name":"nativescript-material-floatingactionbutton","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdf="nativescript-material-floatingactionbutton" on the Page element

\n

XML

\n
<Page xmlns:mdf=\"nativescript-material-floatingactionbutton\">
    <StackLayout horizontalAlignment=\"center\">
        <mdf:FloatingActionButton src=\"res://ic_action_add\"/>
        <mdf:FloatingActionButton elevation=\"5\" src=\"res://ic_action_add\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdcfloatingactionbutton {
    ripple-color: blue;
    elevation: 4;
}
\n

NativeScript + Angular

\n
import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from 'nativescript-material-floatingactionbutton';
registerElement('MDFloatingActionButton', () => FloatingActionButton);
\n
<MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"></MDFloatingActionButton>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import FloatingActionButtonPlugin from 'nativescript-material-floatingactionbutton/vue';

Vue.use(FloatingActionButtonPlugin);
\n
<MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"/>
\n

Attributes

\n

Inherite from Nativescript Button so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the floatingactionbutton icon. For now FAB only support images as icon

\n\n

An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.

\n\n

An attribute to set the ripple color of the floatingactionbutton.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-bottomnavigationbar":{"name":"nativescript-material-bottomnavigationbar","version":"3.3.2","license":"Apache-2.0","readme":"

Nativescript Material Bottom Navigation Bar

\n

Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.

\n

\"npm\" \"npm\"

\n\"iOS\"\n

Contents

\n
    \n
  1. Installation
    2. \n
  2. Usage with Javascript
    3. \n
  3. Usage with Angular
    4. \n
  4. Usage with Vue
    5. \n
  5. Css Styling
    6. \n
  6. API
    7. \n
\n

Prerequisites / Requirements

\n

You need the version of NS6 or later to use this plugin.

\n

Installation

\n
tns plugin add nativescript-material-bottomnavigationbar
\n

NEW FEATURES

\n\n

Usage

\n

Before start using the plugin you need to add the icons for Android & iOS in your App_Resources\u001d directory.

\n

XML

\n

You can set the tabs using the tabs property

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"nativescript-material-bottomnavigationbar\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          tabs=\"{{ tabs }}\"
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        ></mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigationTab, TabSelectedEventData } from 'nativescript-material-bottomnavigationbar';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
    // Get the event sender
    let page = <Page>args.object;
    page.bindingContext = {
        tabs: [
            new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
            new BottomNavigationTab({
                title: 'Second',
                icon: 'res://ic_view_list',
                isSelectable: false
            }),
            new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
        ]
    };
}

export function tabSelected(args: TabSelectedEventData) {
    console.log('tab selected ' + args.newIndex);
}
\n

or you can add the tabs directly in your xml view

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:mdc=\"nativescript-material-bottomnavigationbar\"
      loaded=\"pageLoaded\"
      class=\"page\">
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <Label text=\"content\"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          activeColor=\"green\"
          inactiveColor=\"red\"
          backgroundColor=\"black\"
          tabSelected=\"tabSelected\"
          row=\"1\"
        >
          <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
          <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
          <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
        </mdc:BottomNavigationBar>
    </GridLayout>
</Page>
\n

Angular

\n

First you need to include the NativeScriptMaterialBottomNavigationBarModule in your app.module.ts\u001b`

\n
import { NativeScriptMaterialBottomNavigationBarModule} from \"nativescript-material-bottomnavigationbar/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialBottomNavigationBarModule
    ],
    ...
})
\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <BottomNavigationBar
        [tabs]=\"tabs\"
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
    ></BottomNavigationBar>
</GridLayout>
\n

or you can declare the BottomNavigationTab in your html directly

\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <BottomNavigationBar
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
    >
        <BottomNavigationTab title=\"First\" icon=\"res://ic_home\"></BottomNavigationTab>
        <BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" [isSelectable]=\"false\"></BottomNavigationTab>
        <BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\"></BottomNavigationTab>
    </BottomNavigationBar>
</GridLayout>
\n

Vue

\n

If you want to use this plugin with Vue, do this in your app.js or main.js:

\n
import BottomNavigationBar from 'nativescript-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);
\n

This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

\n
<GridLayout rows=\"*, auto\">
    <StackLayout row=\"0\">
        <label text=\"content\"></label>
    </StackLayout>
    <MDBottomNavigationBar activeColor=\"red\" inactiveColor=\"yellow\" backgroundColor=\"black\" @tabSelected=\"onBottomNavigationTabSelected\" row=\"1\">
        <MDBottomNavigationTab title=\"First\" icon=\"ic_home\" />
        <MDBottomNavigationTab title=\"Second\" icon=\"ic_view_list\" isSelectable=\"false\" />
        <MDBottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
    </MDBottomNavigationBar>
</GridLayout>
\n

You can find more information of how to use nativescript plugins with Vue Here!

\n

CSS Styling

\n

You can also use your css file to set or change the activeColor\u001d, inactiveColor & backgroundColor of the Bottom Navigation Bar.

\n
.botom-nav {
    active-color: green;
    inactive-color: black;
    background-color: blue;
}
\n

API

\n
    \n
  1. BottomNavigationBar
    2. \n
  2. BottomNavigationTab
    3. \n
\n\n

Bottom Navigation Bar

\n

Properties (bindable)

\n

Properties settable through XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
backgroundColorfalse"white"StringColor of the BottomNavigation background
\n

Properties (internal)

\n

Properties accessible through JS/TS instance

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
items[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
selectedTabIndex0NumberIndex of the selected tab
titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
activeColornew Color('black')ColorColor of the BottomNavigationTab when it's selected
inactiveColornew Color('gray')ColorColor of the BottomNavigationTab when it's not selected
backgroundColornew Color('white')ColorColor of the BottomNavigation background
\n

Events

\n

Event properties settable thew XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
\n

Methods

\n

Methods accessible through JS/TS instance

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
selectTab(index: number)voidSelect a tab programmatically
showBadge(index: number, value?: number)voidShow a badge for an specific tab
\n

Bottom Navigation Tab

\n

Properties (bindable)

\n

Properties settable through XML/HTML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyRequiredDefaultTypeDescription
titletruenullstringTitle of the tab
icontruenullstringIcon of the tab
isSelectablefalsetruebooleanDetermine if the tab can be selected or not
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkedin-oauth2":{"name":"nativescript-linkedin-oauth2","version":"1.0.3","license":"MIT","readme":"

LinkedIn OAuth 2 Plugin for NativeScript

\n

Usage

\n

If you want a quickstart, you can start with one of two demo apps:

\n\n

Bootstrapping

\n

When your app starts up, you'll have to register one or more auth providers to use with the nativescript-oauth2 plugin. You'll use the code below to register the providers.

\n

NativeScript Core

\n

If you are using NativeScript Core, open app.ts and add the following registration code before application.start();

\n

NativeScript with Angular

\n

If you are using Angular AND you are NOT using <page-router-outlet, you'll need to enable frames in order for the plugin to open up a new native page with a login screen. To do that open your main.ts file. You will need to explicitly use frames, so make sure to pass an options object to platformNativeScriptDynamic with the createFrameOnBootstrap flag set to true, like this.

\n
// main.ts
platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(
  AppModule
);
\n

You don't need to do this if you already have <page-router-outlet> in your component.

\n

then add add the registration code below somewhere before you call login, most likely in your Auth service, as in the demo-angular project.

\n

NativeScript-Vue

\n

If you are using NativeScript-Vue, then you'll have to add this registration code somewhere when your app bootstraps. A Vue demo app is included with the GitHub repo.

\n
// This is the provider registration example code

import { configureTnsOAuth } from 'nativescript-oauth2';

import {
  TnsOaProvider,
  TnsOaProviderLinkedIn,
  TnsOaProviderOptions
} from 'nativescript-oauth2/providers';

function configureOAuthProviderLinkedIn(): TnsOaProvider {
  const linkedinProviderOptions: TnsOaProviderOptions = {
    clientId: '691208554415641',
    redirectUri: 'https://www.linkedin.com/connect/login_success.html',
    scopes: ['email']
  };
  const linkedinProvider = new TnsOaProviderLinkedIn(linkedinProviderOptions);
  return linkedinProvider;
}

configureTnsOAuth(configureOAuthProviderLinkedIn());
\n

The plugin comes with helpful interfaces that you can implement for the providers as well as the options that can be passed into each provider's constructor. You don't have to use these interfaces, but they are helpful guides. The code above shows these interfaces.

\n

The last call to configureTnsOAuth() takes an array of providers and registers them as available for use.

\n

Logging in

\n

When you're ready to login, or as a response to a tap event on a login button, you can create a new instance of the TnsOAuthClient and call loginWithCompletion() on the instance.

\n
import { TnsOAuthClient, ITnsOAuthTokenResult } from 'nativescript-oauth2';

const client = new TnsOAuthClient(providerType);

client.loginWithCompletion((accessCode: string, error) => {
  if (error) {
    console.error('back to main page with error: ');
    console.error(error);
  } else {
    console.log('back to main page with access code: ');
    console.log(accessCode);
  }
});
\n

After login is done, the completion handler will be called with the results.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@badideas/nativescript-push":{"name":"@badideas/nativescript-push","version":"1.2.4","license":"Apache-2.0","readme":"

[npm-image]:http://img.shields.io/npm/v/@badideas/nativescript-push.svg\n[npm-url]:https://npmjs.org/package/@badideas/nativescript-push\n[downloads-image]:http://img.shields.io/npm/dm/@badideas/nativescript-push.svg

\n

This plugin is a fork of nativescript-community/push, which was an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

\n

Thanks to Eddy for allowing this!

\n

Android

\n

Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

\n

There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

\n

iOS

\n

Enable push support in Xcode

\n

Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

\n\"Push\n
\n

Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

\n
\n

Copy the entitlements file

\n

The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

\n
\t<key>aps-environment</key>
\t<string>development</string>
\n
\n

Note that the filename should be app.entitlements, see the path above.

\n
\n

Configure push notifications in Info.plist

\n

Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

\n
<key>UseExternalPushProvider</key>
<true/>
\n

And to allow processing when a background push is received, add this as well:

\n
<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
\n

The end result should look like this.

\n

\n

API

\n

init

\n

In your main application JS file, you must call init().

\n
import * as messaging from '@badideas/nativescript-push';
messaging.init();
\n

areNotificationsEnabled

\n

On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

\n
import * as messaging from \"@badideas/nativescript-push\";

console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
\n

registerForPushNotifications

\n

The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

\n
import * as messaging from \"@badideas/nativescript-push\";

messaging.registerForPushNotifications({
  onPushTokenReceivedCallback: (token: string): void => {
    console.log(\"Firebase plugin received a push token: \" + token);
  },

  onMessageReceivedCallback: (message: messaging.Message) => {
    console.log(\"Push message received:\", message));
  },

  // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
  showNotifications: true,

  // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
  showNotificationsWhenInForeground: true
}).then(() => console.log(\"Registered for push\"));
\n
\n

Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

\n
\n
\n

With the token received in onPushTokenReceivedCallback you can send a notification to this device.

\n
\n

getCurrentPushToken

\n

If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

\n
import * as messaging from \"@badideas/nativescript-push\";

messaging.getCurrentPushToken()
    .then(token => console.log(`Current push token: ${token}`));
\n

Interactive notifications (iOS only for now)

\n

To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

\n

Each action has either type button or input, and you can set options to do any or all of:

\n\n

Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

\n

\"Interactive \"Interactive \"Interactive \"Interactive

\n
import * as messaging from \"@badideas/nativescript-push\";

const model = new messaging.PushNotificationModel();
model.iosSettings = new messaging.IosPushSettings();
model.iosSettings.badge = false;
model.iosSettings.alert = true;

model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
model.iosSettings.interactiveSettings.actions = [
  {
    identifier: \"OPEN_ACTION\",
    title: \"Open the app (if closed)\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground
  },
  {
    identifier: \"AUTH\",
    title: \"Open the app, but only if device is not locked with a passcode\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply without opening the app\",
    type: \"input\",
    submitLabel: \"Fire!\",
    placeholder: \"Load the gun...\"
  },
  {
    identifier: \"INPUT_ACTION\",
    title: \"Tap to reply and open the app\",
    options: messaging.IosInteractiveNotificationActionOptions.foreground,
    type: \"input\",
    submitLabel: \"OK, send it\",
    placeholder: \"Type here, baby!\"
  },
  {
    identifier: \"DELETE_ACTION\",
    title: \"Delete without opening the app\",
    options: messaging.IosInteractiveNotificationActionOptions.destructive
  }
];

model.iosSettings.interactiveSettings.categories = [{
  identifier: \"GENERAL\"
}];

model.onNotificationActionTakenCallback = (actionIdentifier: string, message: messaging.Message) => {
  console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
};

messaging.registerForInteractivePush(model);
\n

To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

\n
{
  \"aps\": {
    \"alert\": {
      \"title\": \"Realtime Custom Push Notifications\",
      \"subtitle\": \"Now with iOS 10 support!\",
      \"body\": \"Add multimedia content to your notifications\"
    },
    \"sound\": \"default\",
    \"badge\": 1,
    \"category\": \"GENERAL\",
    \"showWhenInForeground\": true,
    \"data\": {
      \"foo\": \"bar\"
    }
  }
}
\n
\n

IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

\n
\n

Testing push notifications

\n

iOS

\n

For testing notifications on iOS the easiest tool I found is Pusher:

\n\"Pusher\"/\n

Android

\n

For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

\n

\"Postman \"Postman

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-ripple":{"name":"nativescript-material-ripple","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdr="nativescript-material-ripple" on the Page element

\n

XML

\n
<Page xmlns:mdr=\"nativescript-material-ripple\">
    <StackLayout horizontalAlignment=\"center\">
        <mdr:Ripple rippleColor=\"green\" width=\"100\" height=\"100\" />
   </StackLayout>
</Page>
\n

CSS

\n
mdcripple {
    ripple-color: blue;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialRippleModule } from \"nativescript-material-ripple/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialRippleModule,
        ...
    ],
    ...
})
\n
<MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"></MDRipple>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import RipplePlugin from 'nativescript-material-ripple/vue';

Vue.use(RipplePlugin);
\n
<MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"/>
\n

Attributes

\n

Inherite from Nativescript StackLayout

\n

Attributes

\n\n

An attribute to set the ripple color of the ripple.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-snackbar":{"name":"nativescript-material-snackbar","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Nativescript Material SnackBar

\n

Use the Material Design Snackbars in your {N} app

\n
Material Design Spec
\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n

Usage

\n

TS

\n
import { SnackBar } from 'nativescript-material-snackbar';

const snackbar = new SnackBar();

export function showSimpleSnackbar() {
    snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
}

export function showActionSnackbar() {
    snackbar
        .action({
            message: `I'm a snackbar with an action`,
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}

export function showColorfulSnackbar() {
    snackbar
        .action({
            message: `I'm a colorful snackbar`,
            textColor: 'blue',
            actionTextColor: 'yellow',
            backgroundColor: 'green',
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ratings":{"name":"nativescript-ratings","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Application Ratings

\n

This Telerik NativeScript plugin will prompt the user to rate your application after a defined amount of calls, or preferably, a defined amount of application opens.

\n

\"NativeScript

\n

Installation

\n

This plugin will work for both Android and iOS. To install it into your project, execute the following from your Command Prompt (Windows) or Terminal (Mac and Linux) with the project as the current working directory:

\n
tns plugin add nativescript-ratings
\n

Using the Demo Project

\n

This plugin has a demo project bundled with it. To give it a try without creating a fresh project, execute the following with the plugin directory as the current working directory:

\n
npm run setup
npm run demo.ios
npm run demo.android
\n

Running demo.ios or demo.android will run for the appropriate platform.

\n

Using the Ratings Plugin (TypeScript)

\n

The plugin is very basic. First, it must be included within your project like so:

\n
import { Ratings } from \"nativescript-ratings\";
\n

With the plugin imported it can be initialized like so:

\n
let ratings = new Ratings({
    id: \"appname-1.0.0\",
    showOnCount: 5,
    title: \"Please rate\",
    text: \"Will you please rate my app?\",
    agreeButtonText: \"Rate Now\",
    remindButtonText: \"Remind Me Later\",
    declineButtonText: \"No Thanks\",
    androidPackageId: \"com.nativescript.demo\",
    iTunesAppId: \"12345\"
});
\n

Of the above configuration properties, only the title and text are required. All other properties have default values, which you can choose to override by including your own.

\n

To increase the show-counter, the init() function must be called like so:

\n
ratings.init();
\n

Finally, a prompt can be shown if the show-count matches what was defined in the configuration properties:

\n
ratings.prompt();
\n

If the remind button is pressed, the counter is reset and will show again when the values match.

\n

Resources

\n

NativeScript - https://www.nativescript.org

\n

The Polyglot Developer - https://www.thepolyglotdeveloper.com

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-local-notifications":{"name":"nativescript-custom-local-notifications","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/Obsessive/nativescript-custom-local-notifications/blob/master/LICENSE"},"readme":"

NativeScript Local Notifications Plugin with custom sounds for android

\n

The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

\n

For Custom sound,\nAdd a folder called 'raw' in /app/App_Resources/Android and add your custom sounds.

\n

Note

\n

This repository is a fork of the local notifications plugin by Eddy Verbruggen (eddyverbruggen). So big thanks to Eddy Verbruggen - Team Obsessive.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-custom-local-notifications
\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Default 0.
titleThe title which is shown in the statusbar. Default empty.
bodyThe text below the title. Default empty.
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default 'now'.
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundCurrently this is only used on Android where you can set this to null to suppress the sound. Default sound is the sound file located at /Appresources/raw/notify.mp3
\n
LocalNotifications.schedule([{
    id: 1,
    title: 'The first title',
    body: 'The first  body',
    ticker: 'The ticker',
    badge: 1,
    sound: \"sound1\", //sound1 from /Appresources/raw/ folder
    at: new Date(new Date().getTime() + (20 * 1000)) 
  }]).then(
      function() {
        console.log(\"Notification scheduled 1\");
      },
      function(error) {
        console.log(\"scheduling error: \" + error);
      }
  );
\n
  LocalNotifications.schedule([{
    id: 1,
    title: 'The title',
    body: 'The body',
    ticker: 'The ticker',
    badge: 1,
    sound: null, // suppress sound on Android
    at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
  }]).then(
      function() {
        console.log(\"Notification scheduled\");
      },
      function(error) {
        console.log(\"scheduling error: \" + error);
      }
  )
\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
  LocalNotifications.addOnMessageReceivedCallback(
      function (notification) {
        console.log(\"ID: \" + notification.id);
        console.log(\"Title: \" + notification.title);
        console.log(\"Body: \" + notification.body);
      }
  ).then(
      function() {
        console.log(\"Listener added\");
      }
  )
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n

Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

\n
  LocalNotifications.getScheduledIds().then(
      function(ids) {
        console.log(\"ID's: \" + ids);
      }
  )
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
  LocalNotifications.cancel(5 /* the ID */).then(
      function(foundAndCanceled) {
          if (foundAndCanceled) {
            console.log(\"OK, it's gone!\");
          } else {
            console.log(\"No ID 5 was scheduled\");
          }
      }
  )
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
  LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
  LocalNotifications.requestPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
  LocalNotifications.hasPermission().then(
      function(granted) {
        console.log(\"Permission granted? \" + granted);
      }
  )
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-textview":{"name":"nativescript-material-textview","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textview" on the Page element

\n

XML

\n
<Page xmlns:mdt=\"nativescript-material-textview\">
    <StackLayout horizontalAlignment=\"center\">
        <mdt:TextView text=\"raised textview\"/>
        <mdt:TextView variant=\"flat\" text=\"flat textview\"/>
        <mdt:TextView variant=\"text\" text=\"text textview\"/>
        <mdt:TextView elevation=\"5\" rippleColor=\"red\" text=\"raised custom textview\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdctextview {
    ripple-color: blue;
    elevation: 4;
    stroke-color: blue;             // the border color when active
    stroke-inactive-color: green;   // the border color when inactive
    floating-color: blue;           // the floating placeholder color when active
    floating-inactive-color: green; // the floating placeholder color when inactive
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialTextViewModule } from \"nativescript-material-textview/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTextViewModule,
        ...
    ],
    ...
})
\n
<MDTextView  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
        (textChange)=\"onTextChange($event)\"></MDTextView>
\n

NativeScript + Vue

\n
import TextViewPlugin from 'nativescript-material-textview/vue';

Vue.use(TextViewPlugin);
\n
<MDTextView helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
        @textChange=\"onTextChange\"/>
\n

Also, you can bind the text to some instance data using the v-model directive:

\n
<MDTextView v-model=\"value\" />
\n

Attributes

\n

Inherite from Nativescript TextView so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the variant of the textview. Can be outline or underline or filled. No value means underline textview

\n\n

An attribute to set the error color of the textview.

\n\n

An attribute to set the helper text of the textview.

\n\n

A boolean attribute to set the floating state of the textview.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-tabs":{"name":"nativescript-material-tabs","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mds="nativescript-material-tabs" on the Page element

\n

XML

\n
<Page xmlns:mdt=\"nativescript-material-tabs\">
    <mdt:Tabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <TabStrip>
            <TabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </TabStripItem>
        </TabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <TabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
    </Tabs>
</Page>
\n

CSS

\n
MDTabs.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 18;
}

TabStripItem.tabstripitem-active {
    background-color: teal;
}

TabStripItem.tabstripitem-active:active {
    background-color: yellowgreen;
}

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
MDTabs TabStrip {
    highlight-color: red;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialTabsModule } from \"nativescript-material-slider/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialTabsModule,
        ...
    ],
    ...
})
\n
    <MDTabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <TabStrip>
            <TabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </TabStripItem>
        </TabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <TabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
    </MDTabs>
\n

NativeScript + Vue

\n
import TabsPlugin from 'nativescript-material-slider/vue';

Vue.use(TabsPlugin);
\n
<MDTabs selectedIndex=\"1\">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <TabStrip>
            <TabStripItem>
                <Label text=\"Home\"></Label>
                <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Account\"></Label>
                <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
            </TabStripItem>
            <TabStripItem class=\"special\">
                <Label text=\"Search\"></Label>
                <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
            </TabStripItem>
        </TabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <TabContentItem>
            <GridLayout>
                <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout>
                <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
            </GridLayout>
        </TabContentItem>
    </MDTabs>
\n

Attributes

\n

Inherite from Nativescript Tabs so it already has all the same attributes

\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
itemsArrayGets or sets the items of the BottomNavigation.
selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
tabStripTabStripGets or sets the tab strip of the BottomNavigation.
tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
iOSTabBarItemsAlignment"leading", "justified", "center", "centerSelected"iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified
\n

Events

\n

|Name |\tDescription|\n| ------------- |:-------------:| -----:|\n|selectedIndexChanged |\tEmitted when the selectedIndex property is changed.\n|loaded |\tEmitted when the view is loaded.\n|unloaded |\tEmitted when the view is unloaded.\n|layoutChanged |\tEmitted when the layout bounds of a view changes due to layout processing.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/contacts":{"name":"@nativescript/contacts","version":"2.1.0","license":"Apache-2.0","readme":"

@nativescript/contacts

\n

Easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.

\n
npm install @nativescript/contacts
\n

Usage

\n

iOS Settings

\n

Add following key to Info.plist often found in App_Resources/iOS/Info.plist

\n
<key>NSContactsUsageDescription</key>
<string>Kindly provide permission to access contacts on your device.</string>
\n

User will be asked for permissions when contacts are accessed by the app.

\n

Since iOS 13, you will also need entitlements. If you do not have App_Resources/iOS/app.entitlements yet, you can add the file with at least these contents:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
  <dict>
    <key>com.apple.developer.contacts.notes</key>
    <true/>
  </dict>
</plist>
\n

Android Settings

\n

From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your AndroidManifest.xml:

\n
<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
<uses-permission android:name=\"android.permission.READ_CONTACTS\" />
<uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
<uses-permission android:name=\"android.permission.GLOBAL_SEARCH\" />
\n

You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the nativescript-permissions plugin):

\n
import { Contact } from '@nativescript/contacts';
import { requestPermissions } from 'nativescript-permissions';

const contact = new Contact();
// build a new contact...

requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.READ_CONTACTS, android.Manifest.permission.WRITE_CONTACTS, android.Manifest.permission.GLOBAL_SEARCH], \"I need these permissions because I'm cool\").then(() => {
    contact.save();
});
\n

Methods

\n

getContact: Pick one contact and bring back its data.

\n
import { Contacts } from '@nativescript/contacts';

Contacts.getContact().then(function (args) {
\t/// Returns args:
\t/// args.data: Generic cross platform JSON object
\t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

\tif (args.response === 'selected') {
\t\tconst contact = args.data; //See data structure below

\t\t// lets say you wanted to grab first name and last name
\t\tconsole.log(contact.name.given + ' ' + contact.name.family);

\t\t//lets say you want to get the phone numbers
\t\tcontact.phoneNumbers.forEach(function (phone) {
\t\t\tconsole.log(phone.value);
\t\t});

\t\t//lets say you want to get the addresses
\t\tcontact.postalAddresses.forEach(function (address) {
\t\t\tconsole.log(address.location.street);
\t\t});
\t}
});
\n

Save a new contact

\n
import { Contact, KnownLabel } from '@nativescript/contacts';
import { ImageSource } from '@nativescript/core';

const newContact = new Contact();
newContact.name.given = 'John';
newContact.name.family = 'Doe';
newContact.phoneNumbers.push({
\tlabel: KnownLabel.HOME,
\tvalue: '123457890',
}); // See below for known labels
newContact.phoneNumbers.push({ label: 'My Custom Label', value: '11235813' });
newContact.photo = ImageSource.fromFileOrResource('~/photo.png');
newContact.save();
\n

Update an existing contact

\n
import { Application, ImageSource } from '@nativescript/core';
import { Contacts } from '@nativescript/contacts';

Contacts.getContact().then(function (args) {
\tif (args.response === 'selected') {
\t\tconst contact = args.data;
\t\tcontact.name.given = 'Jane';
\t\tcontact.name.family = 'Doe';

\t\tImageSource.fromUrl('http://www.google.com/images/errors/logo_sm_2.png').then(function (src) {
\t\t\tcontact.photo = src;
\t\t\tcontact.save();
\t\t});
\t}
});
\n

Delete a contact

\n
import { Contacts } from '@nativescript/contacts';

Contacts.getContact().then(function (args) {
\t/// args.data: Generic cross platform JSON object
\t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

\tif (args.response === 'selected') {
\t\tconst contact = args.data; //See data structure below
\t\tcontact.delete();
\t}
});
\n

Check if contact is Unified/Linked (iOS Specific)

\n
import { Contacts } from '@nativescript/contacts';

Contacts.getContact().then(function (args) {
\t/// args.data: Generic cross platform JSON object
\t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

\tif (args.response === 'selected') {
\t\tconst contact = args.data; //See data structure below
\t\tconsole.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
\t}
});
\n

getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

\n
import { Contacts } from '@nativescript/contacts';

/*
  contactFields contains the fields to retrieve from native backend to reduce processing time
  const contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
*/
const contactFields = ['name', 'phoneNumbers'];

Contacts.getContactsByName('Hicks', contactFields).then(
\tfunction (args) {
\t\tconsole.log('getContactsByName Complete');
\t\t/// Returns args:
\t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
\t\t/// args.reponse: \"fetch\"
\t},
\tfunction (err) {
\t\tconsole.log('Error: ' + err);
\t}
);
\n

getAllContacts: Find all contacts. Returns an array of contact data.

\n
import { Contacts } from '@nativescript/contacts';

/*
  Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
  const contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

  If not supplied, all available contactFields will be returned.
*/
const contactFields = ['name', 'phoneNumbers'];

Contacts.getAllContacts(contactFields).then(
\tfunction (args) {
\t\tconsole.log('getAllContacts Complete');
\t\t/// Returns args:
\t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
\t\t/// args.reponse: \"fetch\"
\t},
\tfunction (err) {
\t\tconsole.log('Error: ' + err);
\t}
);
\n

getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

\n
import { Contacts } from '@nativescript/contacts';

const contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

Contacts.getContactById(contactId).then(
\tfunction (args) {
\t\tconsole.log('getContactById Complete');
\t\t/// Returns args:
\t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
\t\t/// args.reponse: \"fetch\"
\t},
\tfunction (err) {
\t\tconsole.log('Error: ' + err);
\t}
);
\n

getGroups: Find groups. Returns an array of group data.

\n
import { Contacts } from '@nativescript/contacts';

Contacts
\t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
\t.then(
\t\tfunction (args) {
\t\t\tconsole.log('getGroups Complete');
\t\t\t/// Returns args:
\t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
\t\t\t/// args.reponse: \"fetch\"

\t\t\tif (args.data === null) {
\t\t\t\tconsole.log('No Groups Found!');
\t\t\t} else {
\t\t\t\tconsole.log('Group(s) Found!');
\t\t\t}
\t\t},
\t\tfunction (err) {
\t\t\tconsole.log('Error: ' + err);
\t\t}
\t);
\n

Save a new group

\n
import { Group } from '@nativescript/contacts';

const groupModel = new Group();
groupModel.name = 'Test Group';
//Save Argument (boolean)
//iOS: [false=> Use Local Container, true=> Use Default Container]
//Android: will always be true, setting this value will not affect android.
groupModel.save(false);
\n

Delete a group

\n
import { Contacts } from '@nativescript/contacts';

Contacts.getGroups('Test Group').then(
\tfunction (args) {
\t\tconsole.log('getGroups Complete');
\t\tconsole.log(JSON.stringify(args));
\t\t/// Returns args:
\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
\t\t/// args.reponse: \"fetch\"

\t\tif (args.data !== null) {
\t\t\tconsole.log('Group(s) Found!');
\t\t\targs.data[0].delete(); //Delete the first found group
\t\t}
\t},
\tfunction (err) {
\t\tconsole.log('Error: ' + err);
\t}
);
\n

Add Member To Group

\n
import { Contacts } from '@nativescript/contacts';

Contacts.getContact().then(function (args) {
\t/// args.data: Generic cross platform JSON object
\t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

\tif (args.response === 'selected') {
\t\tconst contact = args.data; //See data structure below
\t\tContacts.getGroups('Test Group').then(
\t\t\tfunction (a) {
\t\t\t\tif (a.data !== null) {
\t\t\t\t\tconst group = a.data[0];
\t\t\t\t\tgroup.addMember(contact);
\t\t\t\t}
\t\t\t},
\t\t\tfunction (err) {
\t\t\t\tconsole.log('Error: ' + err);
\t\t\t}
\t\t);
\t}
});
\n

Remove Member From Group

\n
import { Contacts } from '@nativescript/contacts';

Contacts
\t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
\t.then(
\t\tfunction (args) {
\t\t\tif (args.data !== null) {
\t\t\t\tconst group = args.data[0];

\t\t\t\tContacts.getContactsInGroup(group).then(
\t\t\t\t\tfunction (a) {
\t\t\t\t\t\t/// Returns args:
\t\t\t\t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
\t\t\t\t\t\t/// args.reponse: \"fetch\"
\t\t\t\t\t\tconsole.log('getContactsInGroup complete');

\t\t\t\t\t\tif (a.data !== null) {
\t\t\t\t\t\t\ta.data.forEach(function (c, idx) {
\t\t\t\t\t\t\t\tgroup.removeMember(c);
\t\t\t\t\t\t\t});
\t\t\t\t\t\t}
\t\t\t\t\t},
\t\t\t\t\tfunction (err) {
\t\t\t\t\t\tconsole.log('Error: ' + err);
\t\t\t\t\t}
\t\t\t\t);
\t\t\t}
\t\t},
\t\tfunction (err) {
\t\t\tconsole.log('Error: ' + err);
\t\t}
\t);
\n

getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

\n
import { Contacts } from '@nativescript/contacts';

Contacts
\t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
\t.then(
\t\tfunction (args) {
\t\t\tif (args.data !== null) {
\t\t\t\tconst group = args.data[0];

\t\t\t\tContacts.getContactsInGroup(group).then(
\t\t\t\t\tfunction (a) {
\t\t\t\t\t\tconsole.log('getContactsInGroup complete');
\t\t\t\t\t\t/// Returns args:
\t\t\t\t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
\t\t\t\t\t\t/// args.reponse: \"fetch\"
\t\t\t\t\t},
\t\t\t\t\tfunction (err) {
\t\t\t\t\t\tconsole.log('Error: ' + err);
\t\t\t\t\t}
\t\t\t\t);
\t\t\t}
\t\t},
\t\tfunction (err) {
\t\t\tconsole.log('Error: ' + err);
\t\t}
\t);
\n

Single User Data Structure

\n
{
    id : \"\",
    name : {
        given: \"\",
        middle: \"\",
        family: \"\",
        prefix: \"\",
        suffix: \"\",
        displayname: \"\",
        phonetic : {
            given: \"\",
            middle: \"\",
            family: \"\"
        }
    },
    nickname : \"\",
    organization : {
        name: \"\",
        jobTitle: \"\",
        department: \"\",

        // Android Specific properties
        symbol: \"\",
        phonetic: \"\",
        location: \"\",
        type: \"\"
    },
    notes : \"\",
    photo: null, // {N} ImageSource instance

    phoneNumbers : [],
    emailAddresses : [],
    postalAddresses : [],
    urls : []
}
\n

PhoneNumber / EmailAddress structure

\n
{
    id: \"\",
    label: \"\",
    value: \"\"
}
\n

Url structure

\n
{
    label: \"\",
    value: \"\"
}
\n

PostalAddress structure

\n
{
    id: \"\",
    label: \"\",
    location: {
        street: \"\",
        city: \"\",
        state: \"\",
        postalCode: \"\",
        country: \"\",
        countryCode: \"\"
    }
}
\n

Known Labels (for Urls, Addresses and Phones)

\n

The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

\n\n

Those are the system labels but you can also use any custom label you want.

\n

Single Group Data Structure

\n
{
\tid: '';
\tname: '';
}
\n

GetFetchResult Data Structure

\n

The object returned by contact fetch requests.

\n
{
  data: Contact[];
  response: string;
}
\n

iOS

\n

See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

\n

NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

\n

Credit

\n

All credit to original author Ryan Lebel for creating nativescript-contacts.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-button":{"name":"nativescript-material-button","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n
Material Design Spec
\n

Usage

\n

Plain NativeScript

\n

IMPORTANT: Make sure you include xmlns:mdb="nativescript-material-button" on the Page element

\n

XML

\n
<Page xmlns:mdb=\"nativescript-material-button\">
    <StackLayout horizontalAlignment=\"center\">
        <mdb:Button text=\"raised button\"/>
        <mdb:Button variant=\"flat\" text=\"flat button\"/>
        <mdb:Button variant=\"text\" text=\"text button\"/>
        <mdb:Button elevation=\"5\" rippleColor=\"red\" text=\"raised custom button\"/>
   </StackLayout>
</Page>
\n

CSS

\n
mdbutton {
    ripple-color: blue;
    elevation: 4;
}
\n

NativeScript + Angular

\n
import { NativeScriptMaterialButtonModule } from \"nativescript-material-button/angular\";

@NgModule({
    imports: [
        NativeScriptMaterialButtonModule,
        ...
    ],
    ...
})
\n
<MDButton rippleColor=\"blue\" text=\"text button\"></MDButton>
\n

NativeScript + Vue

\n
import Vue from 'nativescript-vue';
import ButtonPlugin from 'nativescript-material-button/vue';

Vue.use(ButtonPlugin);
\n
<MDButton rippleColor=\"blue\" text=\"text button\"/>
\n

Attributes

\n

Inherite from Nativescript Button so it already has all the same attributes

\n

Attributes

\n\n

An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.

\n\n

An attribute to set the variant of the button. Can be flat or text. No value means raised button

\n\n

An attribute to set the ripple color of the button.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-materialdropdownlist":{"name":"nativescript-materialdropdownlist","version":"1.0.15","license":{"type":"MIT","url":"https://github.com/bradleygore/nativescript-materialdropdownlist/blob/master/LICENSE"},"readme":"

nativescript-materialdropdownlist

\n

Material-inspired dropdown list widget for NativeScript

\n
\n

\n \"NativeScript\n

\n

Usage

\n

Install the plugin by running this command in your project root:\ntns plugin add nativescript-materialdropdownlist

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:MDL=\"nativescript-materialdropdownlist\">

    <StackLayout>
        <GridLayout rows=\"auto\" columns=\"*, auto\">
            <StackLayout>
                <label text=\"Color\" />
                <label style=\"height: 3; background-color: gray;\" />
            </StackLayout>

            <!--Dropdown List widget-->
            <MDL:MaterialDropdownList col=\"1\" id=\"ddlColors\"
                itemsSeparatorColor=\"transparent\" itemsRowHeight=\"30\"
                items=\"{{ colors }}\" selectedIndex=\"{{ selectedColorIndex }}\" >
            </MDL:MaterialDropdownList>
        </GridLayout>
    </StackLayout>
</Page>
\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionValue TypeDefault
itemslist of items to bind to as data sourceArray or ObservableArraynull
id[Optional] prepended to generated ListView's ID as {id}_pickerListstring''
iconText[Optional] text to use for the icon labelstring'\\ue5c5' (standard dropdown icon from Material Icons)
itemsSeparatorColor[Optional] pass-through to ListView to set color for line separating itemsstring (Color)ListView's default (light gray)
itemsRowHeight[Optional] pass-through to ListView to set height of each item in the listnumberListView's default
selectedIndex[Optional] index of the item currently selectednumbernull
targetViewId[Optional] target view for the backdrop (AbsoluteLayout) and the ListView to render in. This is specifically needed for best results using the widget in tab-views and modals - see demo for examplesstringnull
indexChange[Optional] function to call when the selected index changesFunctionN/A (uses view event .notify() mechanism)
\n

Custom Templates

\n

This widget was designed with flexibility in mind, so you can use a custom template for the prompt view (the view the user taps to bring up the dropdown list) as well as define a view template for each item in the ListView.

\n

These custom templates will need to be used if the list of items is not just strings, but objects

\n
<MDL:MaterialDropdownList col=\"1\" id=\"ddlAuthors\"
    items=\"{{ authors }}\" selectedIndex=\"{{ selectedAuthorIndex }}\" >

    <!--Prompt or Selected Item Template-->
    <MDL:MaterialDropdownList.selectedItemView>
        <StackLayout>
            <label text=\"{{ selectedAuthor ? selectedAuthor.name : 'Select Author' }}\" style=\"color: red; padding-left: 5;\" />
            <label style=\"background-color: gray; height: 1;\" />
        </StackLayout>
    </MDL:MaterialDropdownList.selectedItemView>

    <!--Template to pass to the ListView-->
    <MDL:MaterialDropdownList.itemsTemplate>
        <label style=\"color: red; padding-top: 5; padding-bottom: 5;\" text=\"{{ name }}\" />
    </MDL:MaterialDropdownList.itemsTemplate>
</MDL:MaterialDropdownList>
\n

Default Prompt View

\n

If you don't use a custom template, we kept design-ability in mind. The default prompt view's elements all have specific purposes and individual IDs and CSS classes to make styling easy. If there were an XML template for it, here is what it would be:

\n
<grid-layout rows=\"auto, auto\" columns=\"*, auto\" id=\"mdlLayout\" class=\"mdl-container\">

    <!--Label where the value from the selected item gets put-->
    <label id=\"mdlSelectedValue\" row=\"0\" col=\"0\" class=\"mdl-value\" />

    <!--Label where the icon text gets put-->
    <label id=\"mdlIcon\" row=\"0\" col=\"1\" class=\"mdl-icon\" />

    <!--Label to hold no next but act as an underline across the entire widget - i.e. set height and background-color in a style rule-->
    <label id=\"mdlUnderline\" row=\"1\" col=\"0\" colSpan=\"2\" class=\"mdl-underline\" />

</grid-layout>
\n

Styling

\n

Styling these dropdowns couldn't be simpler. Just create CSS rules based on the classes and IDs shown above. Given the dynamic nature of these types of lists, you will want to set a standard height for all dropdown lists, fortunately there's also a CSS Class specifically for those: mdl-pickerList. Here's an example of some things you can do to style these:

\n
.mdl-backdrop {
    /*The AbsoluteLayout that acts as backdrop to the dropdown*/
    background-color: lightgrey;
}

.mdl-pickerList {
    /*common styles for ALL dropdown lists*/
    height: 80;
    min-width: 60;
    background-color: white;
    border-color: blue;
    border-width: 1;
}

/*different styles for specific lists - remember ID is container's ID + _pickerList*/
#ddlColors_pickerList {
    border-color: silver;
}

#ddlShapes_pickerList {
    border-color: orange;
    border-width: 4;
    min-width: 80;
}

#ddlAuthors_pickerList {
    min-width: 200;
}

#ddlShapes_pickerList label {
    /*If a custom itemsTemplate is not used, ListView defaults to a Label*/
    padding-top: 4;
    padding-bottom: 4;
    padding-left: 2;
    color: blue;
}
\n
\n

Demo

\n

To run the demo locally, run the following commands from the root folder after pulling down this repo:\nnpm run setup and npm run demo.android

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitter":{"name":"nativescript-twitter","version":"2.0.0","license":"MIT","readme":"

Nativescript Twitter

\n

NativeScript implementation of Twitter SDK (Some Features)

\n

\"npm\"\n\"npm\"

\n

NS 3.0+

\n

tns plugin add nativescript-twitter

\n

NS < 3.0

\n

npm install nativescript-twitter@"^1.x"

\n

Example Implementation

\n

Android

\n
//app.ts or main.ts
import * as app from \"application\";
if (app.android) {
    const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
    TNSTwitter.init(\"key\", \"secret\");
}
\n

IOS

\n

Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

\n

In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

\n
// Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array
\n
//custom-app-delegate.ts
import * as utils from \"utils/utils\";
declare const UIResponder, UIApplicationDelegate, Twitter;
export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];
    applicationDidFinishLaunchingWithOptions(application, launchOptions) {
        utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
        return true;
    }
    applicationOpenURLOptions(application, url, options) {
        return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
    }
}
\n
//app.ts or main.ts
import * as app from \"application\";
if (app.ios) {
    app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
}
\n

IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

\n
<twitter:TNSTwitterButton id=\"twitter\"/>
\n

Listen when user auth is successful or fails

\n
import * as frame from \"ui/frame\";
 frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
        if (args.object.get(\"value\") === 'failed') {
            console.log(args.object.get(\"message\"))
        } else {
            TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                (user) => {
                    console.dump(user)
                }, err => {
                    console.dump(err)
                })
        }

    });
\n

Send api request

\n
import { CustomApiService } from \"nativescript-twitter\"
const api = new CustomApiService();
    api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
        .then(
        data => {
            console.log(data)
        }, err => {
            console.log(err.message)
        });
\n

Angular

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
\n
<TNSTwitterButton id=\"twitter\"/>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"connectycube":{"name":"connectycube","version":"3.27.4","license":"Apache-2.0","readme":"

Overview

\n

ConnectyCube Javascript SDK.

\n

ConnectyCube is a messaging and video calling platform for iOS, Android and Javascript apps.

\n

Check our comprehensive guide for Javascript SDK.

\n

Features

\n\n

For more details check the ConnectyCube features page

\n

Connect SDK

\n

Browser

\n

Simply connect the JS file as a normal script:

\n
<script src=\"https://cdn.jsdelivr.net/npm/connectycube@x.x.x/dist/connectycube.min.js\"></script>
\n

where x.x.x is the desired JS SDK version (check for Releases page for all available versions).

\n

Then a window scoped variable called ConnectyCube is created.

\n

Or install the package as NPM module:

\n
npm install connectycube --save
\n

And add script to HTML file from the 'node_modules' folder (as a relative path):

\n
<script src=\"~/node_modules/connectycube/dist/connectycube.min.js\"></script>
\n

and you're ready to initialize the ConnectyCube SDK:

\n
const credentials = {
    appId: 21,
    authKey: 'hhf87hfushuiwef',
    authSecret: 'jjsdf898hfsdfk'
};

const config = {
    debug: { mode: 1 }
};

ConnectyCube.init(credentials, config);
\n

You be able to create more then one client instance:

\n
const cudeSender = new ConnectyCube.ConnectyCube();
const cudeReceiver = new ConnectyCube.ConnectyCube();

cudeSender.init(credentials, config);
cudeReceiver.init(credentials, config);
\n

See an example of simple application based on Webpack build

\n

Janus

\n

Janus JS api version 1.1.3

\n

Conference API Update

\n

New listeners

\n
const ConnectyCube = require('connectycube');

ConnectyCube.videochatconference.onRemoteTracksUpdatedListener = (session, user_id, mediaTrack, eventType) => {};

ConnectyCube.videochatconference.onDataChannelOpenedListener = (session, channelLabel) => {};
ConnectyCube.videochatconference.onDataChannelMessageListener = (session, user_id, data) => {};
\n

New session methods

\n
const ConnectyCube = require('connectycube');

const session = ConnectyCube.videochatconference.createNewSession();

const textData = 'Joined Guest User'
// send message to data channel
session.sendData(textData)
        .then(() => {})
        .catch(() => {})

// get current user volume
session.getUserVolume()
        .then((volume) => {})
        .catch(() => {})

// get remote user volume
session.getRemoteUserVolume(userId)
        .then((volume) => {})
        .catch(() => {})
\n

Node.js/NPM, NativeScript integration

\n

Simply install the package in a normal way:

\n
npm install connectycube --save
\n

and you're ready to go:

\n
var cubeClient = require('connectycube');
\n

React Native integration

\n

Simply install the package in a normal way:

\n
npm install react-native-connectycube --save
\n

and you're ready to go:

\n
import { ConnectyCube } from 'react-native-connectycube'

const CB = new ConnectyCube()
\n

Supported platforms

\n\n

Contribution

\n

See more information at CONTRIBUTING.md

\n

License

\n

Apache 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geofire-plugin":{"name":"nativescript-geofire-plugin","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-geofire-plugin/blob/master/LICENSE"},"readme":"

Nativescript-GeoFire-Plugin

\n

GeoFire for Nativescript - Realtime location queries with Firebase.

\n

The API for this plugin is kept nearly same as of the web version of geofire to increase code reuse across platforms and for easy usage.

\n

Installation

\n

tns plugin add nativescript-geofire-plugin

\n

This plugin requires Firebase to be added into your project. So if it is not added, you can add it by installing an awesome firebase plugin for nativescript by executing below command:

\n

tns plugin add nativescript-plugin-firebase

\n

Basic Usage

\n
import { NSGeoFire } from 'nativescript-geofire-plugin';

// Here '/geo' is the firebase path which will be used by geoFire for location queries. You can change it to anything.
let geoFire = new NSGeoFire('/geo');

// Set location with key.
geoFire.set(key, [lat, long]).then(() => {
    console.log('Geo key is added ');
});

// Get location by key.
geoFire.get(key).then((location)=>{
    console.log('latitude and longitude ', location[0], location[1]);
});

// Remove location stored with specified key.
geoFire.remove(key);

// Location based query.
let query = this.geoFire.query({
    center: [lat, long],
    radius: radius // in km
});

// Various events triggered by geoFire for the query being executed.
query.on('key_entered', (key: string, location: number[]) => {
    console.log('key entered ', key, location);
});

query.on('key_exited', (key: string) => {
    console.log('key exited ', key);
});

query.on('key_moved', (key: string, location: number[]) => {
    console.log('key moved ', key, location);
});

query.on('ready', () => {
    console.log('GeoQuery has loaded and fired all other events for initial data');
});
\n

API

\n

For now, refer API from index.d.ts file.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rachnerd-test-plugin":{"name":"rachnerd-test-plugin","version":"0.0.34","license":"MIT","readme":"

nativescript-angular-unit-tests

\n

This module helps to maintain the angular style guide folder structure for {N} + Angular projects.

\n

This plugin:

\n\n

Install

\n
npm i --save-dev nativescript-angular-unit-tests
\n

Add a script to your project's package.json and call 'tns-test-angular'.

\n
{
  \"scripts\": {
    \"test.android\": \"tns-test-angular --platform=android\",
    \"test.ios\": \"tns-test-angular --platform=ios\"
  }
}
\n

Karma setup example

\n
{
    ...
    files: [
        'app/tests/config.js',
        'app/tests/.tmp/**/*.js'
    ],
    ...
}
\n
// app/tests/config.ts
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { NS_COMPILER_PROVIDERS } from 'nativescript-angular/platform';
import { TestBed } from '@angular/core/testing';

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS));
\n

Flags

\n

Running a specific spec

\n
|- /app
|   - /login
|       _ login.component.ts
|       _ login.component.spec.ts
|       - login.service.ts
|       - login.servic.spec.ts
|   - app.component.ts
|   - app.component.spec.ts
\n
npm run test.android -- --spec=login.service
\n
|- /app
|   - /tests
|       - /.tmp
|           - /login
|               login.service.spec.js
\n

Running multiple specs

\n
|-- app
|   |-- login
|   |   |-- shared
|   |   |   |-- login.service.ts
|   |   |   |-- login.service.spec.ts
|   |   |-- login.component.css
|   |   |-- login.component.html
|   |   |-- login.component.ts
|   |   |-- login.component.spec.ts
|   |-- app.component.ts
|   |-- app.component.spec.ts
\n
npm run test.android -- --spec=login
\n
|-- app
|   |-- tests
|   |   |-- .tmp
|   |   |   |-- login
|   |   |   |   |-- shared
|   |   |   |   |   |-- login.service.spec.js
|   |   |   |   |-- login.component.spec.js
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-editor":{"name":"nativescript-photo-editor","version":"1.1.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-photo-editor

\n

This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Methods

\n\n

Usage

\n

Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

\n
import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

const photoEditor = new PhotoEditor();

photoEditor.editPhoto({
    imageSource: originalImage.imageSource,
    hiddenControls: [
        PhotoEditorControl.Save,
        PhotoEditorControl.Crop,
    ],
}).then((newImage: ImageSource) => {
    // Here you can save newImage, send it to your backend or simply display it in your app
    resultImage.imageSource = newImage;
}).catch((e) => {
    console.error(e);
});
\n

Usage in Angular

\n

There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

\n

Demos

\n

This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-photo-editor
$ cd nativescript-photo-editor
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/vue":{"name":"@nativescript-community/vue","version":"0.0.6-alpha.1","license":"MIT","readme":"

NativeScript Vue (Community ver.)

\n

Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

\n

Playground

\n
\n

Why?

\n

This is an alternative version of Vue3 implementation for NativeScript. It might not be as feature rich as the official NativeScript-Vue, but if you'd like to catch up with upstream Vue development, this is still a good choice.

\n

Be aware we got this Vue implementation working within an hour, instead of years.

\n

Installation

\n

Via npm:

\n
npm install @nativescript-community/vue @nativescript/core dominative undom-ng vue
\n

Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually. As the benefit for using peer dependencies, you'll be able to upgrade these dependencies directly from upstream, no need to wait for an update with @nativescript-community/vue.

\n
\n

Usage

\n
import { Application } from '@nativescript/core'
import { createApp } from '@nativescript-community/vue'
import App from 'App.vue'

const app = createApp(App)

// Start the app
app.$run()
\n
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codelab/nativescript-multi-select":{"name":"@codelab/nativescript-multi-select","version":"2.0.1","license":"Apache-2.0","readme":"

Nativescript Multi Select \"apple\" \"android\"

\n

\"npm\"\n\"npm\"

\n

Overview

\n

Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

\n

\n \n \n

\n

Installation

\n

This plugin supports NativeScript 7 or higher. For lower versions, you can use an older version of the plugin.

\n
tns plugin add @codelab/nativescript-multi-select
\n

Usage

\n

TypeScript

\n
import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

let MSelect = new MultiSelect();
let selectedItems = [\"moi-a\", \"moi-b\"];

const options: MSOption = {
  title: \"Please Select\",
  selectedItems: this._selectedItems,
  items: [
    { name: \"A\", value: \"moi-a\" },
    { name: \"B\", value: \"moi-b\" },
    { name: \"C\", value: \"moi-c\" },
    { name: \"D\", value: \"moi-d\" },
  ],
  bindValue: 'value',
  displayLabel: 'name',
  onConfirm: selectedItems => {
    selectedItems = selectedItems;
    console.log(\"SELECTED ITEMS => \", selectedItems);
  },
  onItemSelected: selectedItem => {
    console.log(\"SELECTED ITEM => \", selectedItem);
  },
  onCancel: () => {
    console.log('CANCEL');
  },
  android: {
    titleSize: 25,
    cancelButtonTextColor: \"#252323\",
    confirmButtonTextColor: \"#70798C\",
  },
  ios: {
    cancelButtonBgColor: \"#252323\",
    confirmButtonBgColor: \"#70798C\",
    cancelButtonTextColor: \"#ffffff\",
    confirmButtonTextColor: \"#ffffff\",
    showType: AShowType.TypeBounceIn
  }
};

MSelect.show(options);
\n

Angular

\n
import { Component, OnInit, NgZone } from \"@angular/core\";
import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

@Component({
 // ...
})
export class SomeComponent implements OnInit {
  private _MSelect: MultiSelect;
  public selectedItems: Array<any>;

  constructor(private zone: NgZone) {
    this._MSelect = new MultiSelect();
    this.selectedItems = [\"moi-a\", \"moi-b\"];
  }

  ngOnInit(): void {
  }

  public onSelectTapped(): void {
    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this.selectedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        this.zone.run(() => {
          this.selectedItems = selectedItems;
          console.log(\"SELECTED ITEMS => \", selectedItems);
        })
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    this._MSelect.show(options);
  }
}
\n

Vue

\n
<script>
  import {
    MultiSelect,
    AShowType
  } from \"nativescript-multi-select\";
  const MSelect = new MultiSelect();

  export default {
    data() {
      selectedItems: [\"moi-a\", \"moi-b\"];
    },
    methods: {
      onSelectTapped() {
        const that = this;
        const options = {
          title: \"Please Select\",
          selectedItems: this.selectedItems,
          items: [{
              name: \"A\",
              value: \"moi-a\"
            },
            {
              name: \"B\",
              value: \"moi-b\"
            },
            {
              name: \"C\",
              value: \"moi-c\"
            },
            {
              name: \"D\",
              value: \"moi-d\"
            }
          ],
          bindValue: \"value\",
          displayLabel: \"name\",
          onConfirm: _selectedItems => {
            that.selectedItems = _selectedItems;
            console.log(\"SELECTED ITEMS => \", _selectedItems);
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log(\"CANCEL\");
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\"
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };

        MSelect.show(options);
      }
    }
  };
</script>
\n

API

\n

MultiSelect

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
show(options: MSOption)() : voidShow Multi Select Dialog
\n

MSOption

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titlestringDialog Title
confirmButtonTextstringconfirm button text optional
cancelButtonTextstringcancel button text optional
selectedItemsArray<any>predefined items optional
itemsArray<any>items/list that will be display
bindValuestringthe value that will determine the property which will be return when an item is selected optional
displayLabelstringthe value that will determine the property which will be display in the list optional
iosMSiOSOptionios options optional
androidMSAndroidOptionandroid options optional
onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
\n

MSAndroidOption (for android)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titleSizenumberoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
\n

MSiOSOption (for ios)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
cancelButtonBgColorstringoptional
confirmButtonBgColorstringoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
itemColorstringitem text color optional
\n

iOS Popup: Animation AShowType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeIn1
TypeGrowIn2
TypeShrinkIn3
TypeSlideInFromTop4
TypeSlideInFromBottom5
TypeSlideInFromLeft6
TypeSlideInFromRight7
TypeBounceIn8
TypeBounceInFromTop9
TypeBounceInFromBottom10
TypeBounceInFromLeft11
TypeBounceInFromRight12
\n

iOS Popup: Animation ADismissType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeOut1
TypeGrowOut2
TypeShrinkOut3
TypeSlideOutToTop4
TypeSlideOutToBottom5
TypeSlideOutToLeft6
TypeSlideOutToRight7
TypeBounceOut8
TypeBounceOutToTop9
TypeBounceOutToBottom10
TypeBounceOutToLeft11
TypeBounceOutToRight12
\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal2":{"name":"nativescript-paypal2","version":"2.6.10","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript PayPal

\n

NativeScript module for implementing simple PayPal checkouts using official SDK.

\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Roadmap

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-paypal
\n

inside your app project to install the module.

\n

Android

\n

AndroidManifest.xml

\n

Keep sure to define the following permissions, activities and other data in your manifest file:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

    <uses-permission android:name=\"android.permission.INTERNET\" />
    <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />    
    <uses-permission android:name=\"android.permission.CAMERA\" />
    <uses-permission android:name=\"android.permission.VIBRATE\" />
    
    <action android:name=\"android.intent.action.MAIN\" />
 
    <category android:name=\"android.intent.category.LAUNCHER\" />

    <uses-feature android:name=\"android.hardware.camera\"
                  android:required=\"false\" />
    <uses-feature android:name=\"android.hardware.camera.autofocus\"
                  android:required=\"false\" />

    <application>
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.LoginActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentMethodActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PaymentConfirmActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.PayPalFuturePaymentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentConsentActivity\" />
        <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentInfoActivity\" />
        <activity android:name=\"io.card.payment.DataEntryActivity\" />
\t\t
\t    <service android:name=\"com.paypal.android.sdk.payments.PayPalService\"
                 android:exported=\"false\" />
    </application>
    
</manifest>
\n

app.gradle

\n

Keep sure to have a reference to the PayPal SDK in your app/App_Resources/Android/app.gradle file of your project.

\n
dependencies {
    // PayPal
    compile 'com.paypal.sdk:paypal-android-sdk:2.14.2'
}
\n

Demo

\n

For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

\n

Otherwise ...

\n

Usage

\n

Include

\n

Include the module in your code-behind:

\n
var PayPal = require(\"nativescript-paypal\");
\n

Initialize

\n

Initialize the environment:

\n
function onPageLoaded(args) {
    PayPal.init({
        clientId: '<YOUR-CLIENT-ID>'
    });
}
exports.onPageLoaded = onPageLoaded;
\n

The (optional) object that is submitted to the PayPal.init function has the following structure:

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
acceptCreditCards[OPTIONAL] Accept credit cards or not. Default: (true)
account[OPTIONAL] Defines information about the account.
clientIdThe PayPal ID for your app that was generated in the PayPal Developer Portal.
defaults[OPTIONAL] Defines default data.
environment[OPTIONAL] The environment to use. Possible values are: 0 = ENVIRONMENT_SANDBOX, 1 = ENVIRONMENT_PRODUCTION, 2 = ENVIRONMENT_NO_NETWORK.
onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
rememberUser[OPTIONAL] Remember the last user for the next payment or not. Default: (true)
requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 230958624
\n
account
\n

The account object has the following structure:

\n
Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
name[OPTIONAL] The name of the merchant.
privacyPolicy[OPTIONAL] The URI to the privacy policy of the merchant.
userAgreement[OPTIONAL] The URI to the user agreement of the merchant.
\n
defaults
\n

The defaults object has the following structure:

\n
Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
userEmail[OPTIONAL] The default user email.
userPhone[OPTIONAL] The default user phone.
userPhoneCountryCode[OPTIONAL] The default user phone country code.
\n

Start a payment

\n
function buyProduct(args) {
    // configure
    var payment = PayPal.newPayment()
        .setDescription('My product')
        .setAmount(59.79);

    // start checkout / payment
    payment.start(function(cbResult) {
        switch (cbResult.code) {
            case 0:
                // SUCCESS
                // pay key is stored in 'cbResult.key'
                break;
                
            case 1:
                // operation was CANCELLED
                break;
                
            case -1:
                // checkout FAILED
                break;
                
            case -2:
                // \"unhandled exception\"
                break;
        }
    });
}
exports.buyProduct = buyProduct;
\n

The payment object that is created by PayPal.newPayment function has the following structure.

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
getAmountGets the price. Example: var a = payment.getAmount();
getBnCodeGets the BN code. Example: var bc = payment.getBnCode();
getCurrencyGets the custom currency to use. Example: var c = payment.getCurrency();
getCustomGets the custom value for the payment. Example: var c = payment.getCustom();
getDescriptionGets the (short) description. Example: var d = payment.getDescription();
getDetailsGets an object with the payment details. Example: var d = payment.getDetails();
getInvoiceNumberGets the custom invoice number. Example: var i = payment.getInvoiceNumber();
setAmountSets the price. Example: payment.setAmount(1.25);
setBnCodeSets a BN code. Example: payment.setBnCode('Your BN Code');
setCurrencySets the custom currency to use. Example: payment.setCurrency('EUR');
setCustomSets the custom value for the payment. Example: payment.setCustom('MY-PRODUCT-ID');
setDetailsSets details (shipping, subtotal & tax). Example: payment.setDetails(4.95, 199.99, 1.19);
setDescriptionSets the (short) description. Example: payment.setDescription('This is really awesom!');
setInvoiceNumberSets the custom invoice number. Example: payment.setInvoiceNumber('MY_INVOICE-666');
startStarts the payment / checkout process.
\n
start
\n

The callback that is submitted to the payment.start method receives an object with the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
codeThe result code. 0 = success, -3 = JSON parse error, -2 = unhandled exception, -1 = checkout failed, 1 = cancelled, 2 = no confirm data, 3 = no JSON data
keyThe key of the payment (if code = 0)
\n

Enhancements

\n

Logging

\n

If you want to get the logging output of the module, you can use PayPal.addLogger function to add a callback that receives a message from the module:

\n
PayPal.addLogger(function(msg) {
    console.log('[nativescript-paypal]: ' + msg);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-dialogs":{"name":"nativescript-material-dialogs","version":"3.3.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

NativeScript Material Dialogs

\n

Use the Material Design Dialogs in your {N} app

\n

Installation

\n

If using @nativescript :

\n\n

If using tns-core-modules

\n\n

Changelog

\n

Usage

\n

Uses the same API as Nativescript Dialogs

\n

Adds one option for alert:

\n\n

TS

\n
import { login, alert, prompt } from \"nativescript-material-dialogs\";

alert(\"Your message\").then(()=> {
    console.log(\"Dialog closed!\");
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-messenger":{"name":"nativescript-messenger","version":"1.2.0","license":{"type":"MIT","url":"https://github.com/firescript/nativescript-messenger/blob/master/LICENSE"},"readme":"

NativeScript Messenger

\n

A NativeScript module providing an sms messaging action for iOS and Android.

\n

Installation

\n

Run tns plugin add nativescript-messenger

\n

Usage

\n

To use the messenger module you must first require() it.

\n
var messenger = require( \"nativescript-messenger\" );
\n

Method

\n

####send: Sends a message to one or multiple recipients

\n
Parameters
\n\n
var messenger = require( \"nativescript-messenger\" );
var numbers = [\"905-454-1234\", \"905-454-4321\", \"905-929-1122\"];
messenger.send(numbers, \"My message\", \"Subject of Message\");
\n

This method also returns a promise. Use as so to define actions after the user has either canceled or sent the message.

\n
    messenger.send([\"905-555-5555\", \"905-555-4444\"], \"this is body\").then(function(args){
        console.log(args.response); 
        // either a string saying cancelled or sent
        console.log(args.message); 
        // just a string with more detail than response.
        
        /* you can do stuff here.. this happens back 
        in your app after the message window has 
        been dismissed */        
        
    }, function (e) {
        console.log(\"Error occurred \" + e); 
        // e will show a vague error message.
    });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/geolocation":{"name":"@awarns/geolocation","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/geolocation

\n

\"npm\n\"npm\"

\n

This module includes tasks to regularly obtain the location of the phone.

\n

This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering GNSS location acquisition tasks. Acquire phone's location, on demand, even in background.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/geolocation
\n

Usage

\n

After installing and setting up this plugin, you'll have access to two different tasks to acquire the location of the phone. The result, will be a Geolocation record, described below.

\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
acquirePhoneGeolocationAllows to acquire the most accurate location available, obtained from the phone, among a few, on demand. The amount of locations to be collected and decide on is configurable
acquireMultiplePhoneGeolocationAllows to repeatedly acquire phone locations. Similarly to the single acquisition task, each reported value can be chosen among a few acquired values. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
\n
\n

Note: All the tasks require fine location permission and active location services for their execution. Each task will automatically request what is missing during framework's initialization

\n
\n

Acquire a single GNSS location

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquirePhoneGeolocationTask } from '@awarns/geolocation';

export const demoTasks: Array<Task> = [
      acquirePhoneGeolocationTask(/* optional */ { bestOf: 3, timeout: 10000 }),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
bestOfnumberThe number of locations to be collected, to pick the one that is the most accurate. The more locations being requested, the more the task will take to run. The default value is 3
timeoutnumberLimit the maximum time to be spent collecting locations, in milliseconds. The default value is 10000 (10s).
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquirePhoneGeolocation')
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('geolocationAcquired', run('writeRecords'));
\n

Note: To use the writeRecords, task the persistence package must be installed and configured. See persistence package docs.

\n
\n

Acquire GNSS locations in batch

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquireMultiplePhoneGeolocationTask } from '@awarns/geolocation';

export const demoTasks: Array<Task> = [
  acquireMultiplePhoneGeolocationTask(/* optional */ { bestOf: 1, timeout: 15000 }),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
bestOfnumberThe number of locations to be collected for each final record being reported, to pick the one that is the most accurate from a subset. The more locations being requested, the lower total amount of locations being reported. This means, in the hypothetical case where there's time to collect 6 locations, with a bestOf value of 1, the 6 locations will be reported, whereas with a bestOf value of 3, in the same situation, only 2 locations will be reported, being these 2 the most accurate among the 2 subsets of 3 locations. The default value is 1 (each location being collected ends being reported)
timeoutnumberLimit the maximum time to be spent collecting each location, in milliseconds. The default value is 15000 (15s).
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquireMultiplePhoneGeolocation', { maxInterval: 10000 /* (Optional) Maximun interval between location acquisitions (this includes the time it takes to obtain all the locations in a reporting subset, if bestOf > 1), unlimited by default */ })
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('geolocationAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
geolocationAcquiredGeolocation | Array<Geolocation>Indicates that one or more new GNSS locations have been acquired
\n

Records

\n

Geolocation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways geolocation
changeChangeAlways none. Locations never start or end, they represent spatio-temporal snapshots of where the phone was at a given time. To detect when the phone started and ended being in a place, use the geofencing package
timestampDateThe local time when the location was acquired
latitudenumberThe latitude of where the phone is located at
longitudenumberThe longitude of where the phone is located at
altitudenumberThe altitude of where the phone is located at
verticalAccuracynumberThe estimated error in the latitude
horizontalAccuracynumberThe estimated error in the longitude
speednumberThe estimated speed of the phone by the time the location was acquired
directionnumberThe estimated direction of the phone by the time the location was acquired
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rich-textfield":{"name":"nativescript-rich-textfield","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript-rich-textfield \"Build

\n

This plugins let's you easily create textfield with icon that can be effortlessly styled using the exposed properties.

\n

Prerequisites

\n

This plugin is using FontAwesome so as a prerequisite you will have to add fonts folder to your app root directory containing FontAwesome .ttf file.

\n

Installation

\n
npm install nativescript-rich-textfield --save
\n

Usage

\n

You will have to add xmlns:rt="nativescript-rich-textfield" namespace to your page tag, and then simply use <rt:RichTextField/> in order to add the widget to your page.

\n

A few examples:

\n

\"Sample

\n

Code samples in order of appearance:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
xmlns:rt=\"nativescript-rich-textfield\">
  <StackLayout >

    <rt:RichTextField icon=\"0xf123\" height=\"60\" iconColor=\"red\" fieldHintColor=\"red\" fieldPaddingLeft=\"20\" textPaddingLeft=\"80\" fieldPaddingRight=\"90\" fieldBackgroundColor=\"transparent\"/>

    <rt:RichTextField icon=\"&#xf099;\" iconSize=\"20\" iconColor=\"rgba(240,248,255,1)\" fieldHint=\"Twitter Hint\"
     height=\"60\" style=\"background-color:rgba(30,144,255,1)\" fieldBorderColor=\"rgba(255,255,255,1)\" fieldBottomBorderWidth=\"2\"/>

    <rt:RichTextField icon=\"&#xf262;\" fieldBorderColor=\"rgba(212,175,55,1)\" fieldColor=\"rgba(138,43,226,1)\" fieldHeight=\"50\" height=\"50\" fieldBottomBorderWidth=\"4\"
     fieldTopBorderWidth=\"4\" iconColor=\"rgba(138,43,226,0.8)\" fieldHintColor=\"rgba(138,43,226,0.6)\" style=\"background-color:rgba(255,223,0,1);margin-top:10;\" />

    <rt:RichTextField icon=\"&#xf17b;\" fieldBorderColor=\"rgba(124,252,0,1)\" fieldHeight=\"45\" height=\"45\" fieldTopBorderWidth=\"3\" iconColor=\"rgba(173,255,47,1)\" 
     style=\"background-color:rgba(34,139,34,1);margin-top:10;margin-bottom:10;\" fieldColor=\"rgba(34,139,34,1)\" />

     <rt:RichTextField iconSize=\"15\" icon=\"&#xf028;\" iconColor=\"rgba(1,1,1,1)\" style=\"margin-bottom:10;\" fieldBackgroundColor=\"red\" fieldBorderColor=\"white\" fieldBorderWidth=\"3\" 
      fieldHint=\"Volume value Hint\" fieldHintColor=\"rgba(1,1,1,0.6)\" fieldHeight=\"45\" width=\"90%\" />

    <rt:RichTextField icon=\"&#xf007;\" fieldLeftBorderWidth=\"8\" width=\"80%\" fieldHint=\"Username\" fieldPaddingLeft=\"34\" />

    <rt:RichTextField icon=\"&#xf13e;\" secure=\"true\" fieldLeftBorderWidth=\"4\" fieldRightBorderWidth=\"4\" width=\"80%\" fieldHint=\"Password\" />

  </StackLayout>
</Page>
\n

API

\n

RichTextField attributes:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescription
iconcan be code value from http://fontawesome.io/cheatsheet/ (e.g. &#xf123;) or hex representation (e.g. 0xf123)
fieldHeightheight of the field (e.g. 50)
fieldColortext color of the field. The value can be known color name or rgba (red/green/blue/alpha) representation (e.g. "red" or "rgba(34,139,34,0.8)"). Alpha value can be in the range 0-1 the rest can be 0-255.
fieldPaddingLeftleft hand side space to the parent element (e.g. "50")
fieldPaddingRightright hand side space to the parent element (e.g. "50")
textPaddingLeftthe distance between the icon and the text/hint of the field (e.g. "50")
fieldBackgroundColorbackground color of the field (e.g. "red" or "rgba(34,139,34,0.8)")
iconColoricon color (e.g. "red" or "rgba(34,139,34,0.8)")
fieldHintstring value of the field hint (e.g. "Custom Hint")
iconSizeicon size (e.g. "20")
fieldHintColorcolor value of the hint text (e.g. "red" or "rgba(34,139,34,0.8)")
fieldBorderColorcolor value of the border (e.g. "red" or "rgba(34,139,34,0.8)")
fieldBorderWidthborder width (e.g. "2"). Setting this applies all sides border.
fieldLeftBorderWidthleft side border width (e.g. "2"). Setting this applies only left side border.
fieldRightBorderWidthright side border width (e.g. "2"). Setting this applies only right side border.
fieldTopBorderWidthtop side border width (e.g. "2"). Setting this applies only top side border.
fieldBottomBorderWidthbottom side border width (e.g. "2"). Setting this applies only bottom side border.
securespecify whether to mask the input of the field. Useful for passwords (e.g. "true").
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-badge":{"name":"nativescript-plugin-badge","version":"1.0.0","license":"MIT","readme":"

Nativescript-plugin-badge

\n

\"npm\"\n\"npm\"\n\"Commitizen

\n

This plugin will allow you to set badge notification.

\n

Installation

\n
tns plugin add nativescript-plugin-badge
\n

Screenshots

\n

\"IOS\"

\n

\"Android\"

\n

Usage

\n
```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
ShortcutBadgerNative
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
requestPremissions():PromiseWill return if user granted the premission or not. See description below
setBadge(badge:number)set badge
removeBadge()clear badge
applyNotification(notification: Notification, badge: number, channelId?: string)See description below
\n

Supported Devices (Android)

\n

Please check the library used.

\n

Premission

\n

Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

\n

Miui(Xiaomi device) support

\n

Since from Xiaomi changed the way to show badge by notification from Miui 6.

\n

setBadge will not support Xiaomi devices.

\n

If you want to support badges for Xiaomi, you have to send notifications. And use

\n
applyNotification({title:'title',body:'body'}, 5, 'channel id');
\n

channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

\n

Drawback

\n

The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache":{"name":"nativescript-image-cache","version":"1.1.6","license":"MIT","readme":"

Nativescript Image Cache

\n

\"npm

\n

Nativescript image caching plugin using Fresco for Android and SDWebImageCache for iOS

\n

Installation

\n
tns plugin add nativescript-image-cache
\n

Support NativeScript ~3.0.0 with Angular

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property NameValuePlatform
stretchaspectFill, aspectFit, fill, noneios,android
srcstringios,android
placeholderstringios,android
placeholderStretchaspectFill, aspectFit, fill, noneandroid
radiusnumberandroid
roundedbooleanandroid
\n

Basic Usage

\n

Nativescript Angular

\n

Initialization

\n
import { initializeOnAngular } from 'nativescript-image-cache';

export class AppComponent {
    constructor () {
        initializeOnAngular();
    }
}
\n

Example usage:

\n
<NSImage #myImage stretch=\"aspectFill\" radius=\"20\" src=\"res://logo\">
</NSImage>
\n

Nativescript Vanilla

\n

Initialization (android only)

\n
const imageCache = require('nativescript-image-cache');

if (application.android) {
    application.on('launch', () => {
        imageCache.initialize();
    });
}
\n

Example usage:

\n
<Page xmlns:IC=\"nativescript-image-cache\">
    <GridLayout rows='*' columns='*'> 
        <IC:NSImage stretch=\"fill\" row=\"0\"
            col=\"0\" placeholder=\"res://placeholder\" 
            src=\"res://logo\">
            </IC:NSImage>  
    </GridLayout>
</Page>
\n

Caching Image

\n

Default cache purge time can be specified in number of days.

\n
import { setCacheLimit } from 'nativescript-image-cache';

const cacheLimitInDays : number = 7;
setCacheLimit(cacheLimitInDays);
\n

Clearing Cache

\n

Default cache time for SDWebImageCache is 7 days, and for Fresco is 60 days.

\n
import { clearCache } from 'nativescript-image-cache';

clearCache();
\n

(Android Only), you need to initialize in the application onlaunch event before clearing the cache

\n

Credits

\n

The starting point for this plugin was this great plugin.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-tour":{"name":"nativescript-app-tour","version":"4.0.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/fonticon":{"name":"@nativescript-community/fonticon","version":"3.0.0","license":"https://github.com/nativescript-community/fonticon/blob/master/LICENSE","readme":"

A simpler way to use font icons with NativeScript

\n

\"MIT\n\"Dependency \"devDependency

\n

The Problem

\n

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

\n\n
.fa {
  font-family: FontAwesome;
}
\n\n
<Label class=\"fa\" text=\"\\uf293\"></Label>
\n

This works but keeping up with unicodes is not fun.

\n

The Solution

\n

With this plugin, you can instead reference the fonticon by the specific classname:

\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
\n

Install

\n
npm install @nativescript-community/fonticon --save
\n

Usage

\n

FontAwesome will be used in the following examples but you can use any custom font icon collection.

\n\n
app/fonts/fontawesome-webfont.ttf
\n\n
.fa {
  font-family: FontAwesome, fontawesome-webfont;
}
\n

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

\n\n
app/font-awesome.css
\n

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

\n\n
import * as application from '@nativescript/core/application';
import {FontIcon, fonticon} from '@nativescript-community/fonticon';

FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
FontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
FontIcon.loadCss();

application.setResources( { fonticon } );
application.run({ moduleName: 'main-page' });
\n\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (iOS)Demo Ionicons (iOS)
\"Sample1\"\"Sample2\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (Android)Demo Ionicons (Android)
\"Sample3\"\"Sample4\"
\n

Font Awesome 5

\n

In this case, you have to copy and import each ttf file and associate it with the proper class:

\n
.fas {
  font-family: Font Awesome 5 Free, fa-solid-800;
}
.far {
  font-family: Font Awesome 5 Free, fa-regular-400;
}
\n

but still you will import the css only once with the fa prefix:

\n
FontIcon.paths = {
  'fa': 'font-awesome.css'
};
\n

How about NativeScript with Angular?

\n

If using Angular, use this instead:

\n\n

Credits

\n

Idea came from Bradley Gore's post here.

\n

Contributors

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@exeleon/nativescript-svg":{"name":"@exeleon/nativescript-svg","version":"1.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"MIT\n\"Dependency

\n

NativeScript SVG

\n

This repo is a fork of TeamMaestro/nativescript-svg which is a fork of peoplewareDo/nativescript-svg.

\n

Install

\n

tns plugin add @exeleon/nativescript-svg

\n

Usage

\n

You use it in the same way you use Image source.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Android LibraryiOS CocoaPod
BigBadaboom AndroidSVGSVGKit by SVGKit
\n

** there are limitations: ** - saveToFile ins't working

\n

Quick start

\n
var ImageSourceSVGModule = require('nativescript-svg');
var svgFile = new ImageSourceSVGModule.ImageSourceSVG();

var loaded = svgFile.fromResource('foxie');

var path = '//somepath/file.svg';
loaded = svgFile.loadFromFile(path);

var url = 'http://somepath/file.svg';
svgFile
  .fromUrl(url)
  .then(loaded => {
    console.log('object loaded');
  })
  .catch(e => {
    console.log('error');
  });
\n

API

\n
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromData(data: any): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG
\n\n
\n

You can call every method in two ways, for example:

\n
//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously
\n

or

\n
//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
\n

Since ver 1.1 Implement a similar image tag to be used as for example:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:svg=\"nativescript-svg\" loaded=\"pageLoaded\">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src=\"~/image/nativescript.svg\" height=\"100\" />
    <svg:SVGImage src=\"https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg\" height=\"200\" />

    <!--normal image tag-->
    <Image src=\"~/images/logo.svg\" stretch =\"none\" />
  </StackLayout>
</Page>
\n

Roadmap

\n

ver 1.6 implement an SVGImage tag that can support svg tags.

\n
<!-- this is more complicated to implement, pending to be implemented -->
    <svg:SVGImage width=\"100\" height=\"100\">
        <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />
    </svg:SVGImage>
\n

ver 1.5 Change api dependency from pents90/svg-android to Pixplicity/sharp

\n

Release note

\n

v1.3.4 -- Angular 4 support, please check example code

\n

v1.3.0 -- NS 3+ implementation and it will work with angular if you call registerElement before using it. Thanks to @tbozhikov

\n

v1.1.4 -- Fix svg & demo

\n

v1.1.3 -- Fix SVGImage for iOS - SVGKFastImageView issue#3

\n

v1.1.0 -- Implemented a similar image tag to render svg images.

\n

v1.0.11 -- Major fix for load library issue and demo include.

\n

v1.0.9 -- load from URL on Android and IOS included.

\n

v1.0.7 -- Fix svg.common override issue.

\n

v1.0.5 -- fix for npm package lib not including the .js files.

\n

v1.0.2 -- the base64 encondig on Android included - IOS pending.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-masked-text-field":{"name":"nativescript-masked-text-field","version":"4.0.3","license":"Apache-2.0","readme":"

NativeScript Masked Text Field widget

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-masked-text-field

\n

This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
    <StackLayout>
        <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
    </StackLayout>
</Page>
\n

Usage in Angular

\n

In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

\n
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
// ......
@NgModule({
    // ......
    imports: [
        // ......
        MaskedTextFieldModule,
        // ......
    ],
    // ......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        MaskedTextFieldModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public value = \"\";
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-masked-text-field
$ cd nativescript-masked-text-field
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@c4dt/nativescript-websockets":{"name":"@c4dt/nativescript-websockets","version":"1.5.5","license":{"type":"MIT & Apache 2.0","url":"https://github.com/nathanaela/nativescript-sqlite/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

NativeScript WebSockets

\n

This is a cross platform WebSocket library for IOS and Android.

\n

License

\n

My code is (c)2015-2019, Master Technology. All my code is LICENSED under the MIT License. The Android Library is also MIT, the iOS libraries used Apache 2.0; which you may view them by reading the "LICENSE" file.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

If you want professional and support plugins; checkout the all new https://proplugins.org

\n

Installation

\n

First run tns --version

\n

v1.4 or later

\n

Run tns plugin add nativescript-websockets in your ROOT directory of your project.

\n

Limitations

\n\n

Angular

\n

Pay attention and don't forget to use NgZone.run() -- if you don't use it in some cases; your UI may not update when you get data updates. This is NOT a limitation of this library; but just how Angular works for its change detection system.

\n

Usage

\n

There is two possible interfaces for you to use; the Simple WebSocket interface that emulates the browser based WebSockets and a more advanced WebSocket interface where you have more control.

\n

Browser based Interface

\n
require('nativescript-websockets');

var mySocket = new WebSocket(\"ws://echo.websocket.org\", [ /* \"protocol\",\"another protocol\" */]);
mySocket.addEventListener('open', function (evt) { console.log(\"We are Open\"); evt.target.send(\"Hello\"); });
mySocket.addEventListener('message', function(evt) { console.log(\"We got a message: \", evt.data); evt.target.close(); });
mySocket.addEventListener('close', function(evt) { console.log(\"The Socket was Closed:\", evt.code, evt.reason); });
mySocket.addEventListener('error', function(evt) { console.log(\"The socket had an error\", evt.error); });
\n

Advanced Interface

\n
var WS = require('nativescript-websockets');

var mySocket = new WS(\"ws://echo.websocket.org\",{protocols: [/* 'chat', 'video' */], timeout: 6000, allowCellular: true, headers: { 'Authorization': 'Basic ...' }});
mySocket.on('open', function(socket) { console.log(\"Hey I'm open\"); socket.send(\"Hello\"); });
mySocket.on('message', function(socket, message) { console.log(\"Got a message\", message); });
mySocket.on('close', function(socket, code, reason) { console.log(\"Socket was closed because: \", reason, \" code: \", code); });
mySocket.on('error', function(socket, error) { console.log(\"Socket had an error\", error);});
\n

Browser Based WebSockets

\n

The browser based WebSockets are virtually identical to what you would get if you were using a Browser; they are automatically opened when you create it; all four events have "event" objects with different values. You are not allowed to re-open a closed socket and you have no control over any additional features.

\n

Create and OPENS a new BROWSER based WebSocket

\n

new WebSocket(url, [protocols]);

\n
Parameters
\n\n

Attaches an event to the WebSocket

\n

****#### .attachEventListener(EventName, function)

\n

.on(EventName, function)

\n
Parameters
\n\n

Advanced WebSockets

\n

The Advanced WebSockets allow you a lot more control over setting up and creating; in addition if they are closed; you can re-open it without having to reset your events.

\n

Create a new Advanced WebSocket

\n

var WS = require('nativescript-websockets'); var ws = new WS(url, options);

\n
Parameters
\n\n

Attaches an event to the WebSocket

\n

.attachEventListener(EventName, function, passedThis)

\n

.on(EventName, function, passedThis)

\n
Parameters
\n\n

Opens the WebSocket

\n

.open()

\n
Notes: in the Advanced WebSocket you can re-open a closed WebSocket...
\n

Common Functions between Advanced and Browser WebSockets

\n

Closes the open Socket

\n

.close(code, reason)

\n
Parameters
\n\n

Sends a Text or Binary Message

\n

.send(message)

\n
Parameters
\n\n

Retrieves the current State

\n

.readyState

\n
Values:
\n\n

The URL you opened

\n

.url

\n

Returns the protocol negotiated

\n

.protocol

\n
Please see notes on limitations.
\n

Returns true if on IOS

\n

.ios

\n

Return true if on Android

\n

.android

\n

Remove an Event Listener

\n

.removeEventListener (EventName, function)

\n

.off(EventName, function)

\n
Parameters
\n\n

Check to see if it is open

\n

.isOpen()

\n
Returns true if the connection is open
\n

Check to see if it is closed

\n

.isClosed()

\n
Returns true if the connection is closed
\n

Check to see if it is connecting

\n

.isConnecting()

\n
Returns true if the connection is connecting
\n

Check to see if the connection is closing

\n

.isClosing()

\n
Returns true if it is in the process of closing...
\n

Tutorials

\n

Need a little bit more help getting up and running with NativeScript Websockets? Check out these tutorials for NativeScript on the subject.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-panorama-imageview":{"name":"nativescript-panorama-imageview","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-panorama-imageview/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Panorama-ImageView

\n

Panoramic Image View for NativeScript that uses the device movement to pan the images.

\n

Native Library

\n\n

Screens

\n

\"Sample1\" | \"Sample2\"

\n

License

\n

This plugin is licensed under the MITlicense by Brad Martin

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n
tns plugin add nativescript-panorama-imageview
\n

Usages

\n

XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:PanoramaImageView=\"nativescript-panorama-imageview\" loaded=\"pageLoaded\">
    <ActionBar title=\"Panoramic ImageView\" />
   <ScrollView>
        <StackLayout class=\"p-20\">
            <PanoramaImageView:PanoramaImageView height=\"220\" src=\"~/images/panSunset.jpg\" />
            <PanoramaImageView:PanoramaImageView height=\"200\" scrollbar=\"true\" src=\"https://cdn.pixabay.com/photo/2016/11/23/18/29/cloudy-1854241_960_720.jpg\" />
            <PanoramaImageView:PanoramaImageView height=\"240\" src=\"https://cdn.pixabay.com/photo/2016/11/21/15/43/beach-1846040_960_720.jpg\" />
        </StackLayout>
    </ScrollView>
</Page>
\n

Properties

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-arthtech":{"name":"nativescript-opentok-arthtech","version":"2.1.4","license":"MIT","readme":"

Nativescript OpenTok

\n

\"npm\"\n\"npm\"

\n

A Nativescript plugin for the OpenTok iOS and Android SDK.

\n

OpenTok: https://tokbox.com/developer/

\n

Getting Started

\n

Requirements

\n\n

Installation

\n

Node Package Manager (NPM)

\n\n

Integration

\n

Routed Sessions

\n
View
\n

You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

\n

The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

\n
<StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
<OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
\n

Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

\n
import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

private _apiKey:string = 'API_KEY';
private _sessionId: string = 'SESSION_ID';
private _token: string = 'TOKEN';

private publisher: TNSOTPublisher;
private subscriber: TNSOTSubscriber;

private session: TNSOTSession;

constructor(private page: Page) {
   super();
   this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
   this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
   this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
   this.initPublisher();
   this.initSubscriber();
}

initPublisher() {
   this.session.connect(this._token);
   this.publisher.publish(this.session, '', 'HIGH', '30');
   this.publisher.events.on('streamDestroyed', (result) => {
       console.log('publisher stream destroyed');
   });
}

initSubscriber() {
   this.session.events.on('streamCreated', () => {
       this.subscriber.subscribe(this.session);
   });
}
\n

Special Articles

\n\n

Images

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iPhoneiPad
\"iPhone\"iPad
\n

Notes

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/paypal":{"name":"@abbieben/paypal","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rating-dialog":{"name":"nativescript-rating-dialog","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript Rating Dialog

\n

\"Build

\n\n\n

Installation

\n
tns plugin add nativescript-rating-dialog
\n

Usage

\n
import { RatingDialog, RatingDialogOption } from 'nativescript-rating-dialog';

let ratingDialog = new RatingDialog();

const option: RatingDialogOption = {
    title: \"Title\",
    icon: \"favorite\",
    android: {
        positiveButtonText: \"Send\",
        negativeButtonText: \"Cancel\",
        threshold: 3,
        onThresholdCleared: (dialog, rating, thresholdCleared) => {
        },
        onThresholdFailed: (dialog, rating) => {
        },
        onDialogDismiss: (rating) => {
          if (rating < 3) {
            console.log(`Negative Rate of ${rating} out of 5`);
            alert(`Negative Rate of ${rating} out of 5`);
          } else {
            alert(`Positive Rate of ${rating} out of 5`);
            console.log(`Positive Rate of ${rating} out of 5`);
          }
        }
    },
    ios: {
        onPositiveButtonText: \"Done\",
        onNegativeButtonText: \"Send Feedback\",
        onPositiveRate: (rating) => {
          console.log('Positive', rating);
        },
        onNegativeRate: (rating) => {
          console.log('Negative', rating);
        },
        onDismiss: () => {
          console.log('Dismiss');
        }
    }
};

ratingDialog.show(option);
\n

API

\n

Rating Dialog Option

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
iconstringSet icon (use app icon as default) (optional).
titlestringSet title
textColorstringSet title text color (optional)
backgroundColorstringSet background color (optional)
androidAndroidRatingDialogOptionSet android options (optional)
iosIOSRatingDialogOptionSet iOS options (optional)
\n

Android Rating Dialog Option

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
thresholdnumberSet threshold (number of rating) to trigger the feedback (default is 2)
positiveButtonTextColorstringSet positive button text color (optional)
negativeButtonTextColorstringSet negative buttonText color (optional)
positiveButtonTextstringSet positive button text
negativeButtonTextstringSet negative button text (optional)
ratingBarColorstringSet rating bar color (optional)
ratingBarBackgroundColorstringSet rating bar background color (optional)
playstoreUrlstringSet playstore url (to redirect user to the app on app store) (optional)
feedbackFormAndroidRatingDialogFeedbackFormSet feedback form options (optional)
onThresholdCleared (ratingDialog: any, rating: number, thresholdCleared: boolean)Callback FunctionSet onThresholdCleared callback which fired when your rating score is greater than the threshold. (override the default redirection to Google Play) (optional)
onThresholdFailed (ratingDialog: any, rating: number, thresholdCleared: boolean)Callback FunctionSet onThresholdFailed callback which fired when your rating score is less than the threshold. (use when you want to show your custom feedback form) (optional)
onRatingChanged (rating: number, thresholdCleared: boolean)Callback FunctionSet onRatingChanged callback which fires when the rating changed (optional)
onRatingBarFormSumbit (feedback: string)Callback FunctionSet onRatingBarFormSumbit callback which fires when the rating is submitted (optional)
onDialogDismiss(rating: number)Callback FunctionSet onDialogDismiss callback which fires when the user dismissed the dialog (optional)
\n

Android RatingDialog Feedback Form

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
formTitlestringSet form title
formSubmitTextstringSet form submit button text
cancelTextstringSet cancel button text
feedbackFormHintstringSet feedback form hint (optional)
feedBackTextColorstringSet feedBack text color (optional)
\n

iOS Rating Dialog Option

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
subtitlenumberSet subtitle (optional) (default is: "Please rate your experience")
onPositiveButtonColorstringSet positive button color (optional)
onNegativeButtonColorstringSet negative button color (optional)
onPositiveButtonTextstringSet positive button text (optional)
onNegativeButtonTextstringSet negative button text (optional)
positiveTextstringSet positive text (optional) (default is: "Awesome!")
negativeTextstringSet negative text (optional) (default is: "Darn. we should have been better.")
textColorstringSet tex color (optional)
emptyStarImagestringSet name of the empty star image resource (optional)
fullStarImagestringSet name of the full star image resource (optional)
dismissButtonColorstringSet dismiss button color (optional)
itunesIdstringSet itunesId (optional)
onPositiveRate (rating: number)Callback FunctionSet onPositiveRate callback which fires when the user chose more than 3 stars and click the rate (optional)
onNegativeRate (rating: number)Callback FunctionSet onNegativeRate callback which fires when the user chose less than 4 stars and click the rate (optional)
onDismiss ()Callback FunctionSet onDismiss callback which fires when the user dismissed that screen without choosing anything (optional)
\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n

For Android we're using the Smart App Rate by Codemy,\nand for iOS MBRateApp by MatiBot.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zxing-compat":{"name":"nativescript-zxing-compat","version":"1.5.3","license":{"type":"APACHE","url":"https://github.com/sergio-irigoyen/nativescript-zxing/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

NativeScript ZXing Compat

\n

This is a fork of NativeScript ZXing where the only change is the removal of the platforms/android folder because of compatibility issues with nativescript-barcodescanner.

\n

Please refer to that project for more information on installation and usage.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbox-ssi":{"name":"nativescript-toolbox-ssi","version":"3.0.8","license":{"type":"MIT","url":"https://github.com/whins/nativescript-toolbox/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Toolbox

\n

This fork removes 'prefs -:- root=' from ios. That string will cause apps to be rejected.

\n

A NativeScript module that is a composition of useful classes, tools and helpers.

\n

The module contains the following sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
crypto-jsLibrary of crypto standards.
JS-YAMLYAML 1.2 parser / writer.
markdownMarkdown parser.
MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
nativescript-apiclientSimply call HTTP based APIs.
nativescript-batchImplement batch operations.
nativescript-bitmap-factoryCreate and manipulate bitmap images.
nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
nativescript-lazyProvides an OOP version of the build-in lazy function.
nativescript-routed-valuesImplement routed value graphs.
nativescript-sqlite (free)Provides sqlite actions.
nativescript-stringformatHelpers for handling strings.
nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-toolbox
\n

inside your app project to install the module.

\n

Usage

\n
import Toolbox = require('nativescript-toolbox');
\n

The module provides the following function that are short hands for the included sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
asBitmapReturns a value as bitmap object.
asEnumerableReturns a value as sequence.
createBitmapCreates a new bitmap.
decryptDecrypts a value / an object with AES.
encryptEncrypts a value / an object with AES.
formatFormats a string.
formatArrayFormats a string.
fromMarkdownConverts Markdown code.
fromXmlAlias for 'parseXml'.
fromYamlAlias for 'parseYaml'.
getApplicationContextReturns the current application context.
getClipboardReturns an object that handles the clipboard of the device.
getNativeViewReturns the native view of the app.
getOrientationGets the current orientation of the device (based on nativescript-orientation).
getPlatformReturns information of the current platform.
getValueTries to return a value / object that is stored in the application settings.
guidAlias for 'uuid'.
hashGeneric hash function.
hasValueChecks if a value / object is stored in the application settings.
hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
invokeForOrientationInvokes a callback for specific orientation mode.
invokeForPlatformInvokes an action for a specific platform.
isEnumerableChecks if a value is a sequence.
keepAwakeKeeps the device awake (based on nativescript-insomnia).
markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
md5Hashes a value with MD5.
newBatchCreates a new batch.
newClientCreates a new API client.
nowGets the current time.
openDatabaseOpens a (SQLite) database (connection).
openUrlOpen an URL on the device.
openWifiSettingsOpens the WiFi settings on the device.
parseXmlParses a XML string to an object.
parseYamlParses YAML data to an object.
removeValueRemoves a value / object that is stored in the application settings.
setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
setValueStores a value / object in the application settings.
sha1Hashes a value with SHA-1.
sha256Hashes a value with SHA-256.
sha3Hashes a value with SHA-3.
sha384Hashes a value with SHA-384.
sha512Hashes a value with SHA-512.
showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
toYamlConverts an object / a value to YAML.
uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
\n

Sub modules

\n

crypto-js

\n

Here are some examples of common algorithms:

\n
Encrypters
\n
var AES = require(\"nativescript-toolbox/crypto-js/aes\");
\n
Hashes
\n
var MD5 = require('nativescript-toolbox/crypto-js/md5');
var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
\n

JS-YAML

\n
var YAML = require('nativescript-toolbox/js-yaml');
\n

markdown

\n
var Markdown = require('nativescript-toolbox-sw/markdown').markdown;

var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                          'Maruku');
var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                           'Maruku');
\n

Moment

\n
import Moment = require('nativescript-toolbox/moment');
\n

nativescript-apiclient

\n
import ApiClient = require('nativescript-toolbox/apiclient');
\n

nativescript-batch

\n
import Batch = require('nativescript-toolbox/batch');
\n

nativescript-bitmap-factory

\n
import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
\n

nativescript-email

\n
import Email = require('nativescript-toolbox/email');
\n

nativescript-enumerable

\n
import Enumerable = require('nativescript-toolbox/enumerable');
\n

nativescript-lazy

\n
import Lazy = require('nativescript-toolbox/lazy');
\n

nativescript-routed-values

\n
import RoutedValues = require('nativescript-toolbox/routed-values');
\n

nativescript-sqlite

\n
var SQLite = require('nativescript-toolbox/sqlite');
\n

nativescript-stringformat

\n
import StringFormat = require('nativescript-toolbox/stringformat');
\n

nativescript-xmlobjects

\n
import XmlObjects = require('nativescript-toolbox/xmlobjects');
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/nativescript-camera":{"name":"@synerty/nativescript-camera","version":"4.0.3","license":"Apache-2.0","readme":"

NativeScript Camera \"Build

\n

Welcome to the nativescript-camera plugin for NativeScript framework

\n

(Optional) Prerequisites / Requirements

\n\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n

Navigate to project folder and run NativeScript-CLI command

\n
tns plugin add nativescript-camera
\n

Plugin could be added as a standard npm dependency running command

\n
npm install nativescript-camera --save
\n
\n

Note: the --save flag will add the plugin as dependency in your package.json file

\n
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
requestPermissions()Check required permissions for using device camera.
isAvailable()Is the device camera available to use.
\n

CameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
width0Defines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
height0Defines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
keepAspectRatiotrueDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
saveToGallerytrueDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
cameraFacingrearThe initial camera facing. Use 'front' for selfies.
\n
\n

Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

\n
\n

Usage

\n

Requesting permissions

\n

Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

\n
camera.requestPermissions();
\n
\n

Note: Older versions won't be affected by the usage of the requestPermissions method.

\n
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
var camera = require(\"nativescript-camera\");
\n
import * as camera from \"nativescript-camera\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to recieve image asset

\n
\n
var imageModule = require(\"ui/image\");
camera.takePicture()   
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";
camera.takePicture().
    then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
var imageModule = require(\"ui/image\");

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options).
    then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
var isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/ui-collectionview":{"name":"@nstudio/ui-collectionview","version":"5.1.8","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maskedinput":{"name":"nativescript-maskedinput","version":"0.0.3","license":"MIT","readme":"\n

A {N} Masked Input Plugin

\n

\"License\" \"npm\" \"npm\" \"GitHub

\n

This plugin extends the {N} TextView to allow for input masking.

\n

Notes

\n

iOS 7+

\n

Android API 17+

\n

Plugin does not support the use of the keyboardType property from TextView.

\n

Plugin will attempt to determine the mask type and display the appropriate keyboardType automatically.

\n

Installation

\n

Run tns plugin add nativescript-maskedinput

\n

Usage

\n

To use MaskedInput you need to include it in your XML.

\n

Add the following to your page directive.

\n
xmlns:mi=\"nativescript-maskedinput\"
\n

Use MaskedInput by adding the following XML.

\n
<mi:MaskedInput mask=\"1-999-999-9999? x999\" hint=\"1-555-555-5555\" placeholder=\"#\" />
\n

Properties

\n

mask [string]

\n

Get or Set the mask used for input

\n

mask options

\n\n
Supported Seperators
\n\n

valid [boolean]

\n

Returns true or false if the input text matches the mask.

\n

Use the FormattedText property or the text property to validate the input.

\n

placeholder [string]

\n

Gets or Sets the placeholder.

\n

Default: _

\n

RawText [string]

\n

Gets only the text that matches the RegEx pattern from the mask.

\n

You cannot validate the RawText property. It will fail.

\n

FormattedText [string]

\n

Gets the Full text including any seperators as specified in the mask.

\n

regEx [string]

\n

Gets the regex that was created from the mask so that you can perform your own validation.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@olinger/nativescript-exoplayer":{"name":"@olinger/nativescript-exoplayer","version":"4.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

\n

NativeScript ExoPlayer

\n

A NativeScript plugin to provide the ability to play local and remote videos using Google's ExoPlayer.

\n

Developed by

\n

\"MasterTech\"

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Google ExoPlayeriOS AVPlayer
For a 100% NativeScript plugin use the NativeScript-VideoPlayer.
\n

Based on

\n

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

\n

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

\n

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

\n

Sample Usage

\n
            Sample 1             |              Sample 2\n
\n

-------------------------------------| -------------------------------------\n\"Sample | \"Sample

\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add nativescript-exoplayer

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:exoplayer=\"nativescript-exoplayer\">
        <StackLayout>
               
            <exoplayer:Video id=\"nativeexoplayer\"
            controls=\"true\" finished=\"{{ videoFinished }}\"
            loop=\"true\" autoplay=\"false\" height=\"280\" 
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
            
        </StackLayout>
</Page>
\n

Angular Native (NativeScript Angular) Usage

\n
// somewhere at top of your component or bootstrap file
import {registerElement} from \"nativescript-angular/element-registry\";
registerElement(\"exoplayer\", () => require(\"nativescript-exoplayer\").Video);
// documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
\n

With AngularNative you have to explicitly close all components so the correct template code is below.

\n
  <exoplayer
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\" 
      height=\"300\"></exoplayer>
\n

Properties

\n\n

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n\n

By default, subtitle support is off. Use this flag to turn them on.

\n\n

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

\n\n

Set if the video should start playing as soon as possible or to wait for user interaction.

\n\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n\n

Set to use the native video player's media playback controls.

\n\n

Mutes the native video player.

\n\n

Sets the native video player to loop once playback has finished.

\n\n

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

\n

iOS:

\n\n

See here for explanation.

\n\n

Attribute to specify an event callback to execute when the video is ready to play.

\n\n

Attribute to specify an event callback to execute when the video has finished seekToTime.

\n\n

If set to true, currentTimeUpdated callback is possible.

\n\n

Attribute to specify an event callback to execute when the time is updated.

\n

API

\n\n

Android only

\n\n

Breaking Changes

\n\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-carousel":{"name":"@nstudio/nativescript-carousel","version":"8.0.3","license":"MIT","readme":"

@nstudio/nativescript-carousel

\n

A simple carousel component for NativeScript.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSupportedVersionNativeView
iOSYesiOS 8.1+DKCarouselView
AndroidYesAPI 15+ViewPager with PageIndicatorView
\n

Installation

\n

NativeScript 7+:

\n
npm install @nstudio/nativescript-carousel
\n

NativeScript less than NS7:

\n
npm install nativescript-carousel@6.1.1
\n

Limitations

\n\n

Attributes - Common

\n\n

Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

\n\n

Defines the view template for each slide-view to be generated.

\n\n

Sets/Gets the active page by index

\n\n

Shows or hides the page-indicator

\n\n

Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

\n\n

Sets the color of unselected indicators

\n\n

By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

\n

Attributes - iOS specific

\n\n

If true last slide will wrap back to first and visa versa

\n\n

If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

\n\n

Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

\n\n

Enables/Disables user scroll on the Carousel.

\n\n

Returns the DKCarouselView object.

\n

Attributes - Android specific

\n\n

Returns the ViewPager object.

\n\n

Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

\n\n

Sets the pager-indicator animation duration in milliseconds. Default is 500.

\n\n

Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

\n\n

Sets the pager-indicator dot radius.

\n\n

Sets the pager-indicator dot padding.

\n\n

Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Indicator animations (Android only!)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NONECOLORSCALESLIDE
\"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WORMTHIN_WORMFILLDROPSWAP
\"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
\n

Changelog

\n

8.0.0

\n\n

7.0.1

\n\n

7.0.0

\n\n

6.1.0

\n\n

6.0.0

\n\n

4.2.5

\n\n

4.2.1

\n\n

4.2.0

\n\n

4.1.0

\n\n

4.0.2

\n\n

4.0.0

\n\n

3.1.1

\n\n

3.1.0

\n\n

3.0.2

\n\n

3.0.1

\n\n

3.0.0

\n\n

2.4.2

\n\n

2.4.1

\n\n

2.4.0

\n\n

2.3.1

\n\n

2.3.0

\n\n

2.2.0

\n\n

2.1.2

\n\n

2.1.1

\n\n

2.1.0

\n\n

1.1.0

\n\n

1.0.0

\n\n

Author

\n\n

Collaborators

\n\n

Contributing

\n

I will accept pull requests that improve this and assign credit.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plantimer/nativescript-auth0":{"name":"@plantimer/nativescript-auth0","version":"0.5.0","license":"Apache-2.0","readme":"

IMPORTANT

\n

This plugin is not production ready and is still in development.\nFeel free to open pull requests and issues !

\n

@plantimer/nativescript-auth0

\n
npm install @plantimer/nativescript-auth0
\n

How does it work

\n

The only workflow currently supported is the Authorization Code Grant with PKCE with a refresh token.

\n

This will not work if you haven't enabled the refresh token setting !

\n

Following the diagram given in the Auth0 docs, the flow is as follows:

\n\n

Usage

\n

This plugin uses the InAppBrowser plugin to open the Auth0 login page and the NativeScript Secure Storage plugin to store tokens.

\n

Vanilla

\n
import { NativescriptAuth0 } from '@plantimer/nativescript-auth0';

const config = {
  auth0Config: {
    domain: 'mydomain.auth0.com', // Domain name given by Auth0 or your own domain if you have a paid plan
    clientId: 'ClIenTiDgIvEnByAuTh0', // Client ID given by Auth0
    audience: 'https://your.audience.com', // Often a URL
    redirectUri: 'schema:///', // The app's schema (set in AndroidManifest.xml and Info.plist)
  },
  browserConfig: {
    // InAppBrowser configuration
  }
}

NativescriptAuth0.setUp(config).signUp(\"email@provider.com\");
NativescriptAuth0.setUp(config).signIn();
NativescriptAuth0.setUp(config).getAccessToken();
\n

Angular Example

\n
// *.component.ts
import { NativescriptAuth0 } from '@plantimer/nativescript-auth0';

@Component({
  selector: 'ns-app',
  template: '<Button (tap)=\"login()\">Login</Button>',
})
export class AppComponent {
  login() {
    const config = {
      auth0Config: {
        domain: 'mydomain.auth0.com', // Domain name given by Auth0 or your own domain if you have a paid plan
        clientId: 'ClIenTiDgIvEnByAuTh0', // Client ID given by Auth0
        audience: 'https://your.audience.com', // Often a URL
        redirectUri: 'schema:///', // The app's schema (set in AndroidManifest.xml and Info.plist)
      },
      browserConfig: {
        // InAppBrowser configuration
      }
    }

    NativescriptAuth0.setUp(config).signUp(\"email@provider.com\");
    NativescriptAuth0.setUp(config).signIn();
    NativescriptAuth0.setUp(config).getAccessToken();
  }
}
\n

Enable deep linking

\n

Deep linking is the ability for the app to open when a link is clicked. This is required for the redirectUri to work.

\n

Please follow the InAppBrowser documentation to enable deep linking (i.e. set the schema).

\n

Ideas and issues

\n

If you have any ideas, issues or security concerns, please open an issue !

\n

License

\n

This repository is available under the MIT License.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-easylink":{"name":"@plmservices/nativescript-easylink","version":"1.0.2","license":"Apache-2.0","readme":"

NativeScript Easylink \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build\n\"Donate\"

\n

This plugin implements MxChip's Easylink device discovery/configuration protocol.

\n

NOTE: I am not affiliated with MxChip and this project is not endorsed by them.\nThe native code that this plugin uses is publicly supplied by MxChip and all rights and credit for the native code belongs to MxChip.

\n

Prerequisites / Requirements

\n

To use this under iOS you must:

\n\n
\t<key>com.apple.developer.networking.wifi-info</key>
\t<true/>
\t<key>com.apple.developer.networking.multicast</key>
    <true/>
\n

Some helpful information on this can be found at:\nhttps://developer.apple.com/forums/thread/663271

\n

Installation

\n
ns plugin add @plmservices/nativescript-easylink
\n

Usage

\n
import * as Easylink from '@plmservices/nativescript-easylink';

const ssid: string = Easylink.ssid();
const password: string = 'password';
const type: number = 4;\t// AWS style
Easylink.startDiscovery(ssid, password, style);
Easylink.stopDiscovery();
Easylink.destroy();
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
public destroy(): void;Releases allocated resources
public startDiscovery(ssid: string, password: string, type: number): Promise;Start device discovery
public stopDiscovery(): void;Stops device discovery
public ssid(): string;Returns the SSID of the locally attached WiFi network
\n

TODO

\n\n

Donation

\n

If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

\n

\"Donate\"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angular-dynaform/nativescript":{"name":"@angular-dynaform/nativescript","version":"3.0.3-alpha.0","license":"MIT","readme":"

angular-dynaform/nativescript

\n

\"npm\n\"Build\n\"Coverage\n\"DeepScan\n\"Dependency\n\"Known

\n

\"PRs

\n

This is the 'nativescript' module of the angular-dynaform library.

\n

For further information please see:\nangular-dynaform\nand\nknown issues

\n

NativeScript Styling:

\n

Supported Selectors
\nSupported CSS properties

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telerik-reporting":{"name":"nativescript-telerik-reporting","version":"1.0.3","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript plugin for easy access to Telerik Rporting REST API.

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-telerik-reporting

\n

This command automatically installs the necessary files, as well as stores nativescript-telerik-reporting as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

ReportingClient

\n

Methods

\n\n

ReportingInstance

\n

Methods

\n\n

ReportingDocument

\n

Methods

\n\n

Usage

\n

A typical usage scenario is when you want to generate a report on your server and the download the file in an appropriate format (for example a PDF document). Below is an example how you can make this. You start by creating a client with your server's URL. Then you register your client, create an instance and a document. Finally you download the document to the mobile device.

\n
const req: ReportSource = {
    report: \"Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null\",
    parameterValues: {
        OrderNumber: \"SO51081\",
        ForYear: 2003,
        ForMonth: 7,
    },
};
const reportingClient = new ReportingClient({ serverUrl: \"https://.....\" });
reportingClient.register()
    .then(() => reportingClient.createInstance(req))
    .then((instance) => {
        instance.createDocument({ format: documentFormat } as any).then((document) => {
            document.download().then((file) => {
                utils.ios.openFile(file.path);
                viewModel.set(\"isBusyIn\", false);

                document.destroy()
                    .then(() => instance.destroy())
                    .then(() => reportingClient.unregister);
            });
        });
    });
\n

It is really important to remember to call destroy() for your instances and documents and to unregister() your client as this frees up resources on the server. Also it is a good idea to reuse clients/instances whenever possible.

\n

Demos

\n

This repository plain NativeScript demo. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-telerik-reporting
$ cd nativescript-telerik-reporting
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/preview-cli":{"name":"@nativescript/preview-cli","version":"1.0.5","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bitmap-factory":{"name":"nativescript-bitmap-factory","version":"1.8.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-bitmap-factory/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Bitmap Factory

\n

A NativeScript module for creating and manipulating bitmap images.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-bitmap-factory
\n

inside your app project to install the module.

\n

Usage

\n
import BitmapFactory = require(\"nativescript-bitmap-factory\");
import KnownColors = require(\"color/known-colors\");

// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);

// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
    // draw an oval with a size of 300x150
    // and start at position x=0, y=75
    // and use
    // \"red\" as border color and \"black\" as background color.
    bmp.drawOval(\"300x150\", \"0,75\",
                 KnownColors.Red, KnownColors.Black);
      
    // draw a circle with a radius of 80
    // at the center of the bitmap (null => default)
    // and use
    // \"dark green\" as border color           
    bmp.drawCircle(80, null,
                   KnownColors.DarkGreen);
                
    // draws an arc with a size of 100x200
    // at x=10 and y=20
    // beginning at angle 0 with a sweep angle of 90 degrees
    // and a black border and a yellow fill color    
    bmp.drawArc(\"100x200\", \"10,20\",
                0, 90,
                KnownColors.Black, KnownColors.Yellow);
                   
    // set a yellow point at x=160, y=150
    bmp.setPoint(\"160,150\", \"ff0\");
    
    // draws a line from (0|150) to (300|75)
    // with blue color
    bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
    
    // writes a text in yellow color
    // at x=100, y=100
    // by using \"Roboto\" as font
    // with a size of 10
    bmp.writeText(\"This is a test!\", \"100,100\", {
        color: KnownColors.Yellow,
        size: 10,
        name: \"Roboto\"
    });
    
    // returns the current bitmap as data URL
    // which can be used as ImageSource
    // in JPEG format with a quality of 75%
    var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and in Base64 format
    var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and as ImageSource
    var imgSrc = bmp.toImageSource();
});
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
asBitmapReturns a value as wrapped bitmap.
createCreates a new bitmap instance.
getDefaultOptionsReturns the default options for creating a new bitmap.
makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
setDefaultOptionsSets the default options for creating a new bitmap.
\n

Platform specific stuff

\n

You can access the nativeObject property to access the platform specific object.

\n

For Android this is a Bitmap object and for iOS this is an UIImage object.

\n

To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

\n

Android

\n

You also can access the underlying Canvas object by __canvas property.

\n

iOS

\n

You also can access the underlying CGImage object by__CGImage property.

\n

Data types

\n

IArgb

\n

Stores data of an RGB value with alpha value.

\n

These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

\n
interface IArgb {
    /**
     * Gets the alpha value.
     */
    a: number;

    /**
     * Gets the red value.
     */
    r: number;

    /**
     * Gets the green value.
     */
    g: number;

    /**
     * Gets the blue value.
     */
    b: number;
}
\n

IBitmapData

\n

Used by toObject() method.

\n
interface IBitmapData {
    /**
     * Gets the data as Base64 string.
     */
    base64: string;

    /**
     * Gets the mime type.
     */
    mime: string;
}
\n

IFont

\n

Font settings.

\n
interface IFont {
    /**
     * Anti alias or not.
     */
    antiAlias?: boolean;

    /**
     * Gets the custom forground color.
     */
    color?: string | number | IArgb;
    
    /**
     * Gets the name.
     */
    name?: string;

    /**
     * Gets the size.
     */
    size?: number;
}
\n

IPoint2D

\n

Coordinates, can also be a string like 0,0 or 150|300.

\n
interface IPoint2D {
    /**
     * Gets the X coordinate.
     */
    x: number;
    
    /**
     * Gets the Y coordinate.
     */
    y: number;
}
\n

IPoint2D

\n

Size, can also be a string like 0,0 or 150x300.

\n
interface ISize {
    /**
     * Gets the height.
     */
    height: number;
    
    /**
     * Gets the width.
     */
    width: number;
}
\n

OutputFormat

\n

Supported output formats.

\n
enum OutputFormat {
    /**
     * PNG
     */
    PNG = 1,

    /**
     * JPEG
     */
    JPEG = 2,
}
\n

Bitmap

\n
interface IBitmap {
    /**
     * Get the android specific object provided by 'application' module.
     */
    android: AndroidApplication;

    /**
     * Clones that bitmap.
     */
    clone(): IBitmap;

    /**
     * Crops that bitmap and returns its copy.
     */
    crop(leftTop?: IPoint2D | string,
         size?: ISize | string): IBitmap;

    /**
     * Gets or sets the default color.
     */
    defaultColor: IPoint2D | string | number;

    /**
     * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
     */
    dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                        tag?: T): TResult;

    /**
     * Draws a circle.
     */
    drawCircle(radius?: number,
               center?: IPoint2D | string,
               color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws an arc.
     */
    drawArc(size?: ISize | string,
            leftTop?: IPoint2D | string,
            startAngle?: number,
            sweepAngle?: number,
            color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a line.
     */
    drawLine(start: IPoint2D | string, end: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Draws an oval circle.
     */
    drawOval(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a rectangle.
     */
    drawRect(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Gets the color of a point.
     */
    getPoint(coordinates?: IPoint2D | string): IArgb;

    /**
     * Gets the height of the bitmap.
     */
    height: number;

    /**
     * Get the iOS specific object provided by 'application' module.
     */
    ios: iOSApplication;

    /**
     * Inserts another image into that bitmap.
     */
    insert(other: any,
           leftTop?: IPoint2D | string): IBitmap;
    
    /**
     * Gets if the object has been disposed or not.
     */
    isDisposed: boolean;

    /**
     * Gets the native platform specific object that represents that bitmap.
     */
    nativeObject: any;

    /**
     * Normalizes a color value.
     */
    normalizeColor(value: string | number | IArgb): IArgb;

    /**
     * Creates a copy of that bitmap with a new size.
     */
    resize(newSize: ISize | string): IBitmap;

    /**
     * Resizes that image by defining a new height by keeping ratio.
     */
    resizeHeight(newHeight: number): IBitmap;

    /**
     * Resizes that image by defining a new (maximum) size by keeping ratio.
     */
    resizeMax(maxSize: number): IBitmap;

    /**
     * Resizes that image by defining a new width by keeping ratio.
     */
    resizeWidth(newWidth: number): IBitmap;

    /**
     * Rotates the image.
     */
    rotate(degrees?: number): IBitmap;

    /**
     * Sets a pixel / point.
     */
    setPoint(coordinates?: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Gets the size.
     */
    size: ISize;

    /**
     * Converts that image to a Base64 string.
     */
    toBase64(format?: OutputFormat, quality?: number): string;

    /**
     * Converts that image to a data URL.
     */
    toDataUrl(format?: OutputFormat, quality?: number): string;

    /**
     * Returns that image as ImageSource.
     */
    toImageSource(): ImageSource;

    /**
     * Converts that image to an object.
     */
    toObject(format?: OutputFormat, quality?: number): IBitmapData;

    /**
     * Writes a text.
     */
    writeText(txt: any,
              leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

    /**
     * Gets the width of the bitmap.
     */
    width: number;
}
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-interface2":{"name":"nativescript-webview-interface2","version":"1.4.7","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

Nativescript-WebView-Interface

\n

Nativescript Plugin for bi-directional communication between WebView and Android/iOS

\n

Installation

\n

From the terminal, go to your app's root folder and execute:

\n
tns plugin add nativescript-webview-interface
\n

Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

\n
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
\n

Usage

\n

For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

\n

Inside Native App

\n

Insert a web-view somewhere in your page.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
....
<web-view id=\"webView\"></web-view>
....
</Page>
\n

Initialize WebViewInterface Plugin in your javascript file.

\n
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;

function pageLoaded(args){
    page = args.object;
    setupWebViewInterface(page) 
}

// Initializes plugin with a webView
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
\n

Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

\n

Use any API Method of WebViewInterface Class

\n
function handleEventFromWebView(){
    oWebViewInterface.on('anyEvent', function(eventData){
        // perform action on event
    });
}

function emitEventToWebView(){
    oWebViewInterface.emit('anyEvent', eventData);
}

function callJSFunction(){
    oWebViewInterface.callJSFunction('functionName', args, function(result){
        
    });
}
\n

If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

\n
webView.on('loadFinished', (args) => {
    if (!args.error) {
        // emit event to webView or call JS function of webView
    }
});
\n

Inside WebView

\n

Import nativescript-webview-interface.js in your html page.

\n
<html>
    <head></head>
    <body>
        <script src=\"path/to/nativescript-webview-interface.js\"></script>
        <script src=\"path/to/your-custom-script.js\"></script>        
    </body>
</html>
\n

Use any API Method of window.nsWebViewInterface inside webview

\n
var oWebViewInterface = window.nsWebViewInterface;

// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
    
});

// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);

// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
    // do any processing
    return dataOrPromise;
}
\n

API

\n

Native App API

\n

Constructor:

\n

WebViewInterface(webView: WebView, src?: string)

\n

webView is an instance of nativescript web-view.

\n

src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

\n

API Methods of WebViewInterface Class:

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emitted from webView.

\n

Callback will be executed with the data sent from webView in any format.

\n

off(eventOrCmdName: string, callback?: (eventData: any) => void): void

\n

Use this method to de-register listener of any event/command emitted from webView.

\n

If callback is not set, all the event listeners for this event will be de-registered.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from native app to webView with data in any format.

\n

callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

\n

Use this method to call to any javascript function in global scope in webView.

\n

Arguments are optional. But if supplied, must be in array format.

\n

If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
\nIf the function execution generates any error, the errorHandler will be called with the error.

\n

destroy(): void

\n

Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

\n

WebView API

\n

API Methods available in window.nsWebViewInterface global variable.

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emited from native app.

\n

Callback will be executed with the data sent from native app in any format.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from webView to native app with data in any format.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-powerinfo":{"name":"nativescript-powerinfo","version":"1.0.7","license":"MIT","readme":"

NativeScript Battery & Power Plugin

\n

Battery & Power plugin for NativeScript

\n

Installation

\n
tns plugin add nativescript-powerinfo
\n

Usage

\n

JavaScript:

\n
var power = require(\"nativescript-powerinfo\");

//Start Power Updates
power.startPowerUpdates(function(Info) {
    console.log(\"battery charge: \" + Info.percentage + \"%\");
});

//Stop Power Updates
stopPowerUpdates();
\n

TypeScript:

\n
let power = require(\"nativescript-powerinfo\");

//Start Power Updates
power.startPowerUpdates(function(Info) {
    console.log(\"battery charge: \" + Info.percentage + \"%\");
});

//Stop Power Updates
stopPowerUpdates();
\n

Info Structure

\n

Results from callback:

\n\n

Android BatteryManager SDK Reference

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@groupsosimple/nativescript-pubnub":{"name":"@groupsosimple/nativescript-pubnub","version":"1.0.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

@groupsosimple/nativescript-pubnub

\n

This is a NativeScript plugin wraper for the PubNub SDK. It has implementations for both Android and iOS SDKs. An Angular service is also provided.

\n
ns plugin add @groupsosimple/nativescript-pubnub
\n

Get keys

\n

You will need the publish and subscribe keys to authenticate your app. Get your keys from the PubNub Admin Portal.

\n

Import PubNub

\n

Using TypeScript

\n
import { PubNub } from '@groupsosimple/nativescript-pubnub';
\n

Using JavaScript

\n
var pubnub = require('@groupsosimple/nativescript-pubnub');
\n

Configure PubNub

\n

Configure your keys:

\n
pubnub = new PubNub({
\tpublishKey: 'myPublishKey',
\tsubscribeKey: 'mySubscribeKey',
\tuuid: 'myUniqueUUID',
});
//or
pubnub = new PubNub().configuration({
\tpublishKey: 'myPublishKey',
\tsubscribeKey: 'mySubscribeKey',
\tuuid: 'myUniqueUUID',
});
\n

Add event listeners

\n
pubnub.addListener({
\tmessage: function (m) {
\t\t// handle messages
\t},
\tpresence: function (p) {
\t\t// handle presence
\t},
\tsignal: function (s) {
\t\t// handle signals
\t},
\tmessageAction: function (ma) {
\t\t// handle message actions
\t},
\tfile: function (event) {
\t\t// handle files
\t},
\tstatus: function (s) {
\t\t// handle status
\t},
});
\n

Publish/subscribe

\n
var publishPayload = {
\ttitle: 'greeting',
\tdescription: 'This is my first message!',
};

pubnub.publish('MyChannel', publishPayload, (status) => {
\tconsole.log(status);
});

pubnub.subscribe(['MyChannel'], true);
\n

Using the Angular Service

\n

Declare the PubNub Angular Service in your root module

\n
import { PubNubService } from '@groupsosimple/nativescript-pubnub/angular';

@NgModule({
\timports: [...],
\tdeclarations: [...],
\tschemas: [...],
\tproviders: [PubNubService],
})
\n

Inject the service in a component and configure the with your keys

\n
@Component()
export class MainComponent {
\tconstructor(private pubnubService: PubNubService) {
\t\tpubnubService.configuration({
\t\t\tpublishKey: 'myPublishKey',
\t\t\tsubscribeKey: 'mySubscribeKey',
\t\t\tuuid: 'myUniqueUUID',
\t\t});
\t}
}
\n

After that, you can use the service normally

\n
@Component()
export class SomeComponent {
\tconstructor(private pubnubService: PubNubService) {
\t\tpubnubService.subscribe(['MyChannel'], true);
\t}
}
\n

PubNub Api

\n
constructor(config?: PNConfiguration);
configuration(config: PNConfiguration): PubNub;
subscribe(channels: string[], withPresence: boolean): void;
subscribeToChannelGroups(groups: string[], withPresence: boolean): void;
unsubscribe(channels: string[]): void;
unsubscribeFromAll(): void;
unsubscribeFromChannelGroups(groups: string[]): void;
publish(channel: string, message: Object, responseListener: (status: PNStatus) => void): void;
addEventListener(event: PNEventListener): void;
destroy(): void;
\n

More Information

\n

More information can be seen in the original SDK implementation

\n\n

Changelog

\n\n

License

\n

Apache License Version 2.0

\n

Authors

\n\n

Appreciation

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pedometer":{"name":"nativescript-pedometer","version":"2.1.0","license":"MIT","readme":"

NativeScript Pedometer plugin

\n\n

Supported platforms

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-pedometer
\n

Demo app

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device and you'll see this:

\n\n

API

\n

isStepCountingAvailable

\n

The key feature of this plugin is counting steps. And it's also the only feature that Android supports.

\n
TypeScript
\n
// require the plugin
import { Pedometer } from \"nativescript-pedometer\";

// instantiate the plugin
let pedometer = new Pedometer();

pedometer.isStepCountingAvailable().then(avail => {
  alert(avail ? \"Yes\" : \"No\");
});
\n
JavaScript
\n
// require the plugin
var Pedometer = require(\"nativescript-pedometer\").Pedometer;

// instantiate the plugin
var pedometer = new Pedometer();

pedometer.isStepCountingAvailable(function(avail) {
  alert(avail ? \"Yes\" : \"No\");
});
\n
\n

Providing only TypeScript examples from here on out, but usage it largely similar. Also, I'm leaving out the Promises where they don't add clarity to the code sample.

\n
\n

startUpdates

\n

To start receiving step count updates from this moment forward you can invoke startUpdates.\nIf you want historic data on iOS, pass in a custom fromDate.

\n
pedometer.startUpdates({
  fromDate: new Date(), // iOS only. Optional, default: now
  onUpdate: result => {
    // see the table below
    console.log(`Pedometer update: ${JSON.stringify(result)}`);
  }
}).then(() => {
  console.log(\"Pedometer updates started.\");
}, err => {
  console.log(\"Error: \" + err);
});
\n

The onUpdate callback receives an object containing these properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyiOS?Android?Description
startDate:white_check_mark::white_check_mark:This is when recording of the currently returned data was started.
endDate:white_check_mark::white_check_mark:This is when recording of the currently returned data was ended (usually: now).
steps:white_check_mark::white_check_mark:Step count between startDate and endDate
distance:white_check_mark::white_medium_square:The distance covered in meters between startDate and endDate.
floorsAscended:white_check_mark::white_medium_square:The number of floors ascended between startDate and endDate.
floorsDescended:white_check_mark::white_medium_square:The number of floors descended between startDate and endDate.
currentPace:white_check_mark: iOS9+:white_medium_square:The current pace in seconds per meter.
currentCadence:white_check_mark: iOS9+:white_medium_square:The current cadence in steps per second.
averageActivePace:white_check_mark: iOS10+:white_medium_square:The average pace while active in seconds per meter between startDate and endDate.
\n

If you want to check beforehand if things like currentPace are available,\nthere's a few functions similar to isStepCountingAvailable that you can invoke:

\n\n

stopUpdates

\n

You can wire up a Promise but there's no real need.

\n
pedometer.stopUpdates();
\n

query (iOS)

\n

Instead of listening to "live" updates you can query historic data:

\n
pedometer.query({
  fromDate: new Date(new Date().getTime() - (1000 * 60 * 60)),
  toDate: new Date() // default
}).then(result => {
  // see the table at 'startUpdates' above
  console.log(`Pedometer update: ${JSON.stringify(result)}`);
});
\n

startEventUpdates (iOS)

\n

From iOS 10 onwards it's possible to get notified whenever the device detects a switch\nbetween a 'paused' and 'resumed' state (so starting/stopping walking).

\n

To check beforehand whether or not this feature is availbe,\ncall isEventTrackingAvailable (which has a similar API to isStepCountingAvailable).

\n
pedometer.startEventUpdates({
  onUpdate: result => {
    // see the table below
    console.log(\"Pedometer event update: \" + JSON.stringify(result));
  }
}).then(() => {
  console.log(\"Pedometer event updates started.\");
);
\n

The onUpdate callback receives an object containing these properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
dateThe moment the event occured.
typeEither "pause" or "resume".
\n

Changelog

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@iloveall/nativescript-bitmap-factory":{"name":"@iloveall/nativescript-bitmap-factory","version":"3.0.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Bitmap Factory

\n

A NativeScript module for creating and manipulating bitmap images.

\n

\"Donate\"

\n

NativeScript Toolbox

\n

This module is part of nativescript-toolbox.

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-bitmap-factory
\n

inside your app project to install the module.

\n

Usage

\n
import BitmapFactory = require(\"nativescript-bitmap-factory\");
import KnownColors = require(\"color/known-colors\");

// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);

// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
    // draw an oval with a size of 300x150
    // and start at position x=0, y=75
    // and use
    // \"red\" as border color and \"black\" as background color.
    bmp.drawOval(\"300x150\", \"0,75\",
                 KnownColors.Red, KnownColors.Black);
      
    // draw a circle with a radius of 80
    // at the center of the bitmap (null => default)
    // and use
    // \"dark green\" as border color           
    bmp.drawCircle(80, null,
                   KnownColors.DarkGreen);
                
    // draws an arc with a size of 100x200
    // at x=10 and y=20
    // beginning at angle 0 with a sweep angle of 90 degrees
    // and a black border and a yellow fill color    
    bmp.drawArc(\"100x200\", \"10,20\",
                0, 90,
                KnownColors.Black, KnownColors.Yellow);
                   
    // set a yellow point at x=160, y=150
    bmp.setPoint(\"160,150\", \"ff0\");
    
    // draws a line from (0|150) to (300|75)
    // with blue color
    bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
    
    // writes a text in yellow color
    // at x=100, y=100
    // by using \"Roboto\" as font
    // with a size of 10
    bmp.writeText(\"This is a test!\", \"100,100\", {
        color: KnownColors.Yellow,
        size: 10,
        name: \"Roboto\"
    });
    
    // returns the current bitmap as data URL
    // which can be used as ImageSource
    // in JPEG format with a quality of 75%
    var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and in Base64 format
    var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and as ImageSource
    var imgSrc = bmp.toImageSource();
});
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
asBitmapReturns a value as wrapped bitmap.
createCreates a new bitmap instance.
getDefaultOptionsReturns the default options for creating a new bitmap.
makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
setDefaultOptionsSets the default options for creating a new bitmap.
\n

Platform specific stuff

\n

You can access the nativeObject property to access the platform specific object.

\n

For Android this is a Bitmap object and for iOS this is an UIImage object.

\n

To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

\n

Android

\n

You also can access the underlying Canvas object by __canvas property.

\n

iOS

\n

You also can access the underlying CGImage object by__CGImage property.

\n

Data types

\n

IArgb

\n

Stores data of an RGB value with alpha value.

\n

These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

\n
interface IArgb {
    /**
     * Gets the alpha value.
     */
    a: number;

    /**
     * Gets the red value.
     */
    r: number;

    /**
     * Gets the green value.
     */
    g: number;

    /**
     * Gets the blue value.
     */
    b: number;
}
\n

IBitmapData

\n

Used by toObject() method.

\n
interface IBitmapData {
    /**
     * Gets the data as Base64 string.
     */
    base64: string;

    /**
     * Gets the mime type.
     */
    mime: string;
}
\n

IFont

\n

Font settings.

\n
interface IFont {
    /**
     * Anti alias or not.
     */
    antiAlias?: boolean;

    /**
     * Gets the custom forground color.
     */
    color?: string | number | IArgb;
    
    /**
     * Gets the name.
     */
    name?: string;

    /**
     * Gets the size.
     */
    size?: number;
}
\n

IPoint2D

\n

Coordinates, can also be a string like 0,0 or 150|300.

\n
interface IPoint2D {
    /**
     * Gets the X coordinate.
     */
    x: number;
    
    /**
     * Gets the Y coordinate.
     */
    y: number;
}
\n

IPoint2D

\n

Size, can also be a string like 0,0 or 150x300.

\n
interface ISize {
    /**
     * Gets the height.
     */
    height: number;
    
    /**
     * Gets the width.
     */
    width: number;
}
\n

OutputFormat

\n

Supported output formats.

\n
enum OutputFormat {
    /**
     * PNG
     */
    PNG = 1,

    /**
     * JPEG
     */
    JPEG = 2,
}
\n

Bitmap

\n
interface IBitmap {
    /**
     * Get the android specific object provided by 'application' module.
     */
    android: AndroidApplication;

    /**
     * Clones that bitmap.
     */
    clone(): IBitmap;

    /**
     * Crops that bitmap and returns its copy.
     */
    crop(leftTop?: IPoint2D | string,
         size?: ISize | string): IBitmap;

    /**
     * Gets or sets the default color.
     */
    defaultColor: IPoint2D | string | number;

    /**
     * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
     */
    dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                        tag?: T): TResult;

    /**
     * Draws a circle.
     */
    drawCircle(radius?: number,
               center?: IPoint2D | string,
               color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws an arc.
     */
    drawArc(size?: ISize | string,
            leftTop?: IPoint2D | string,
            startAngle?: number,
            sweepAngle?: number,
            color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a line.
     */
    drawLine(start: IPoint2D | string, end: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Draws an oval circle.
     */
    drawOval(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a rectangle.
     */
    drawRect(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Gets the color of a point.
     */
    getPoint(coordinates?: IPoint2D | string): IArgb;

    /**
     * Gets the height of the bitmap.
     */
    height: number;

    /**
     * Get the iOS specific object provided by 'application' module.
     */
    ios: iOSApplication;

    /**
     * Inserts another image into that bitmap.
     */
    insert(other: any,
           leftTop?: IPoint2D | string): IBitmap;
    
    /**
     * Gets if the object has been disposed or not.
     */
    isDisposed: boolean;

    /**
     * Gets the native platform specific object that represents that bitmap.
     */
    nativeObject: any;

    /**
     * Normalizes a color value.
     */
    normalizeColor(value: string | number | IArgb): IArgb;

    /**
     * Creates a copy of that bitmap with a new size.
     */
    resize(newSize: ISize | string): IBitmap;

    /**
     * Resizes that image by defining a new height by keeping ratio.
     */
    resizeHeight(newHeight: number): IBitmap;

    /**
     * Resizes that image by defining a new (maximum) size by keeping ratio.
     */
    resizeMax(maxSize: number): IBitmap;

    /**
     * Resizes that image by defining a new width by keeping ratio.
     */
    resizeWidth(newWidth: number): IBitmap;

    /**
     * Rotates the image.
     */
    rotate(degrees?: number): IBitmap;

    /**
     * Sets a pixel / point.
     */
    setPoint(coordinates?: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Gets the size.
     */
    size: ISize;

    /**
     * Converts that image to a Base64 string.
     */
    toBase64(format?: OutputFormat, quality?: number): string;

    /**
     * Converts that image to a data URL.
     */
    toDataUrl(format?: OutputFormat, quality?: number): string;

    /**
     * Returns that image as ImageSource.
     */
    toImageSource(): ImageSource;

    /**
     * Converts that image to an object.
     */
    toObject(format?: OutputFormat, quality?: number): IBitmapData;

    /**
     * Writes a text.
     */
    writeText(txt: any,
              leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

    /**
     * Gets the width of the bitmap.
     */
    width: number;
}
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbox-sw":{"name":"nativescript-toolbox-sw","version":"3.0.4","license":{"type":"MIT","url":"https://github.com/whins/nativescript-toolbox/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Toolbox

\n

A NativeScript module that is a composition of useful classes, tools and helpers.

\n

The module contains the following sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
crypto-jsLibrary of crypto standards.
JS-YAMLYAML 1.2 parser / writer.
markdownMarkdown parser.
MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
nativescript-apiclientSimply call HTTP based APIs.
nativescript-batchImplement batch operations.
nativescript-bitmap-factoryCreate and manipulate bitmap images.
nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
nativescript-lazyProvides an OOP version of the build-in lazy function.
nativescript-routed-valuesImplement routed value graphs.
nativescript-sqlite (free)Provides sqlite actions.
nativescript-stringformatHelpers for handling strings.
nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
\n

\"Donate\"

\n

License

\n

MIT license

\n

Platforms

\n\n

Installation

\n

Run

\n
tns plugin add nativescript-toolbox
\n

inside your app project to install the module.

\n

Usage

\n
import Toolbox = require('nativescript-toolbox');
\n

The module provides the following function that are short hands for the included sub modules:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
asBitmapReturns a value as bitmap object.
asEnumerableReturns a value as sequence.
createBitmapCreates a new bitmap.
decryptDecrypts a value / an object with AES.
encryptEncrypts a value / an object with AES.
formatFormats a string.
formatArrayFormats a string.
fromMarkdownConverts Markdown code.
fromXmlAlias for 'parseXml'.
fromYamlAlias for 'parseYaml'.
getApplicationContextReturns the current application context.
getClipboardReturns an object that handles the clipboard of the device.
getNativeViewReturns the native view of the app.
getOrientationGets the current orientation of the device (based on nativescript-orientation).
getPlatformReturns information of the current platform.
getValueTries to return a value / object that is stored in the application settings.
guidAlias for 'uuid'.
hashGeneric hash function.
hasValueChecks if a value / object is stored in the application settings.
hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
invokeForOrientationInvokes a callback for specific orientation mode.
invokeForPlatformInvokes an action for a specific platform.
isEnumerableChecks if a value is a sequence.
keepAwakeKeeps the device awake (based on nativescript-insomnia).
markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
md5Hashes a value with MD5.
newBatchCreates a new batch.
newClientCreates a new API client.
nowGets the current time.
openDatabaseOpens a (SQLite) database (connection).
openUrlOpen an URL on the device.
openWifiSettingsOpens the WiFi settings on the device.
parseXmlParses a XML string to an object.
parseYamlParses YAML data to an object.
removeValueRemoves a value / object that is stored in the application settings.
setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
setValueStores a value / object in the application settings.
sha1Hashes a value with SHA-1.
sha256Hashes a value with SHA-256.
sha3Hashes a value with SHA-3.
sha384Hashes a value with SHA-384.
sha512Hashes a value with SHA-512.
showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
toYamlConverts an object / a value to YAML.
uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
\n

Sub modules

\n

crypto-js

\n

Here are some examples of common algorithms:

\n
Encrypters
\n
var AES = require(\"nativescript-toolbox/crypto-js/aes\");
\n
Hashes
\n
var MD5 = require('nativescript-toolbox/crypto-js/md5');
var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
\n

JS-YAML

\n
var YAML = require('nativescript-toolbox/js-yaml');
\n

markdown

\n
var Markdown = require('nativescript-toolbox-sw/markdown').markdown;

var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                          'Maruku');
var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                           'Maruku');
\n

Moment

\n
import Moment = require('nativescript-toolbox/moment');
\n

nativescript-apiclient

\n
import ApiClient = require('nativescript-toolbox/apiclient');
\n

nativescript-batch

\n
import Batch = require('nativescript-toolbox/batch');
\n

nativescript-bitmap-factory

\n
import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
\n

nativescript-email

\n
import Email = require('nativescript-toolbox/email');
\n

nativescript-enumerable

\n
import Enumerable = require('nativescript-toolbox/enumerable');
\n

nativescript-lazy

\n
import Lazy = require('nativescript-toolbox/lazy');
\n

nativescript-routed-values

\n
import RoutedValues = require('nativescript-toolbox/routed-values');
\n

nativescript-sqlite

\n
var SQLite = require('nativescript-toolbox/sqlite');
\n

nativescript-stringformat

\n
import StringFormat = require('nativescript-toolbox/stringformat');
\n

nativescript-xmlobjects

\n
import XmlObjects = require('nativescript-toolbox/xmlobjects');
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-sha":{"name":"@plmservices/nativescript-sha","version":"2.0.2","license":"Apache-2.0","readme":"

NativeScript SHA/HMAC \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build\n\"Donate\"

\n

This plugin gives access to native SHA generation code on iOS and Android.

\n

Supports SHA-1, SHA-224, SHA-256, SHA-384 and SHA-512.

\n

Also support HMAC for all supported SHA hashes.

\n

Prerequisites / Requirements

\n

None.

\n

Installation

\n

To install, simply run:

\n
ns plugin add @plmservices/nativescript-sha
\n

Usage

\n

To use this module you must first require() it:

\n
// Javascript
var Sha = require('@plmservices/nativescript-sha');
var sha = new Sha.Sha();
\n

Or if you're using Typescript, import the module:

\n
// Typescript
import { Sha } from '@plmservices/nativescript-sha');
const sha = new Sha();
\n

After you have a reference to the module you call the hash functions:

\n
// Typescript
import { Sha } from '@plmservices/nativescript-sha';
const sha = new Sha();

console.log(`Hash is ${sha.Sha256(\"this is our test data\")}`);

console.log(`Hmac is ${sha.HmacSha256(\"secretkey\", \"this is our test data\")}`);
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
public Sha1(input: string): string;Calculate SHA1 of supplied input data
public Sha224(input: string): string;Calculate SHA224 of supplied input data
public Sha256(input: string): string;Calculate SHA256 of supplied input data
public Sha384(input: string): string;Calculate SHA384 of supplied input data
public Sha512(input: string): string;Calculate SHA512 of supplied input data
public HmacSha1(key: string, input: string): string;Calculate HMAC using SHA1 of supplied input data with supplied key
public HmacSha224(key: string, input: string): string;Calculate HMAC using SHA224 of supplied input data with supplied key
public HmacSha256(key: string, input: string): string;Calculate HMAC using SHA256 of supplied input data with supplied key
public HmacSha384(key: string, input: string): string;Calculate HMAC using SHA384 of supplied input data with supplied key
public HmacSha512(key: string, input: string): string;Calculate HMAC using SHA512 of supplied input data with supplied key
\n

TODO

\n\n

Donation

\n

If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

\n

\"Donate\"

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-badge-ns-7":{"name":"nativescript-plugin-badge-ns-7","version":"1.0.1","license":"MIT","readme":"

Nativescript-plugin-badge

\n

\"npm\"\n\"npm\"\n\"Commitizen

\n

This plugin will allow you to set badge notification.

\n

Installation

\n
tns plugin add nativescript-plugin-badge
\n

Screenshots

\n

\"IOS\"

\n

\"Android\"

\n

Usage

\n
```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
ShortcutBadgerNative
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
requestPremissions():PromiseWill return if user granted the premission or not. See description below
setBadge(badge:number)set badge
removeBadge()clear badge
applyNotification(notification: Notification, badge: number, channelId?: string)See description below
\n

Supported Devices (Android)

\n

Please check the library used.

\n

Premission

\n

Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

\n

Miui(Xiaomi device) support

\n

Since from Xiaomi changed the way to show badge by notification from Miui 6.

\n

setBadge will not support Xiaomi devices.

\n

If you want to support badges for Xiaomi, you have to send notifications. And use

\n
applyNotification({title:'title',body:'body'}, 5, 'channel id');
\n

channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

\n

Drawback

\n

The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/nativescript-native-add":{"name":"@jcassidyav/nativescript-native-add","version":"0.0.4","license":"Apache-2.0","readme":"

nativescript-native-add

\n

Example of a nativescript-cli extension which adds native file creation capabilities.

\n

Installation

\n

ns extension install @jcassidyav/nativescript-native-add

\n

Installs to ~/.local/share/.nativescript-cli/extensions

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-sqlite-rxstorage-adapter":{"name":"@herefishyfish/nativescript-sqlite-rxstorage-adapter","version":"1.0.3","license":"Apache-2.0","readme":"

@herefishyfish/nativescript-sqlite-rxstorage-adapter

\n
npm i @herefishyfish/nativescript-sqlite-rxstorage-adapter
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dermanostic/nativescript-adjust":{"name":"@dermanostic/nativescript-adjust","version":"0.2.0","license":"Apache-2.0","readme":"

Summary

\n

This is the Nativescript SDK of Adjust™. You can read more about Adjust™ at adjust.com.

\n

Table of contents

\n\n

Demo app

\n

There is an example app inside the apps/demo directory.

\n

Basic integration

\n

We will describe the steps to integrate the Adjust SDK into your Nativescript project. You can use any text editor or IDE for Nativescript development. There are no assumptions made regarding development environment.

\n

Get the SDK

\n

First, download the library from npm:

\n
$ npm install @dermanostic/nativescript-adjust --save
\n

Integrate the SDK into your app

\n

You should use the following import statement on top of your .js file

\n
import { Adjust, AdjustEvent, AdjustConfig } from '@dermanostic/nativescript-adjust';
\n

In your App.js file, add the following code to initialize the Adjust SDK:

\n
constructor(props) {
    super(props);
    const adjustConfig = new AdjustConfig(\"{YourAppToken}\", AdjustConfig.EnvironmentSandbox);
    Adjust.create(adjustConfig);
}
\n

Replace {YourAppToken} with your app token. You can find this in your Adjust dashboard.

\n

Depending on whether you build your app for testing or for production, you must set the environment with one of these values:

\n
AdjustConfig.EnvironmentSandbox
AdjustConfig.EnvironmentProduction
\n

Important: This value should be set to AdjustConfig.EnvironmentSandbox if and only if you or someone else is testing your app. Make sure to set the environment to AdjustConfig.EnvironmentProduction just before you publish the app. Set it back to AdjustConfig.EnvironmentSandbox when you start developing and testing it again.

\n

We use this environment to distinguish between real traffic and test traffic from test devices. It is very important that you keep this value meaningful at all times!

\n

Adjust logging

\n

You can increase or decrease the amount of logs you see in tests by calling setLogLevel on your AdjustConfig instance with one of the following parameters:

\n
adjustConfig.setLogLevel(AdjustConfig.LogLevelVerbose);   // enable all logging
adjustConfig.setLogLevel(AdjustConfig.LogLevelDebug);     // enable more logging
adjustConfig.setLogLevel(AdjustConfig.LogLevelInfo);      // the default
adjustConfig.setLogLevel(AdjustConfig.LogLevelWarn);      // disable info logging
adjustConfig.setLogLevel(AdjustConfig.LogLevelError);     // disable warnings as well
adjustConfig.setLogLevel(AdjustConfig.LogLevelAssert);    // disable errors as well
adjustConfig.setLogLevel(AdjustConfig.LogLevelSuppress);  // disable all logging
\n

Adjust project settings

\n

Once the Adjust SDK has been added to your app, certain tweaks are going to be performed so that the Adjust SDK can work properly. Below you can find a description of every additional thing that the Adjust SDK performs after you've added it to your app and what needs to be done by you in order for Adjust SDK to work properly.

\n

Android permissions

\n

The Adjust SDK by default adds two permissions to your app's AndroidManifest.xml file:

\n
<uses-permission android:name=\"android.permission.INTERNET\" />
<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />
\n

The INTERNET permission might be needed by our SDK at any point in time. The ACCESS_WIFI_STATE permission is needed by the Adjust SDK if your app is not targeting the Google Play Store and doesn't use Google Play Services. If you are targeting the Google Play Store and you are using Google Play Services, the Adjust SDK doesn't need this permission and, if you don't need it anywhere else in your app, you can remove it.

\n

Google Play Services

\n

Since August 1, 2014, apps in the Google Play Store must use the Google Advertising ID to uniquely identify devices. To allow the Adjust SDK to use the Google Advertising ID, you must integrate Google Play Services.

\n

In order to do this, open your app's build.gradle file and find the dependencies block. Add the following line:

\n
compile 'com.google.android.gms:play-services-analytics:10.0.1'
\n

Note: The version of the Google Play Services library that you're using is not relevant to the Adjust SDK, as long as the analytics part of the library is present in your app. In the example above, we just used the most recent version of the library at the time of writing.

\n

To check whether the analytics part of the Google Play Services library has been successfully added to your app so that the Adjust SDK can read it properly, you should start your app by configuring the SDK to run in sandbox mode and set the log level to verbose. After that, track a session or some events in your app and observe the list of parameters in the verbose logs which are being read once the session or event has been tracked. If you see a parameter called gps_adid in there, you have successfully added the analytics part of the Google Play Services library to your app and our SDK is reading the necessary information from it.

\n

In case you encounter any issue with attempts to read Google Advertising Identifier, feel free to open an issue in our Github repository or write an email to support@adjust.com.

\n

Proguard settings

\n

If you are using Proguard, add these lines to your Proguard file:

\n
-keep public class com.adjust.sdk.** { *; }
-keep class com.google.android.gms.common.ConnectionResult {
    int SUCCESS;
}
-keep class com.google.android.gms.ads.identifier.AdvertisingIdClient {
    com.google.android.gms.ads.identifier.AdvertisingIdClient$Info getAdvertisingIdInfo(android.content.Context);
}
-keep class com.google.android.gms.ads.identifier.AdvertisingIdClient$Info {
    java.lang.String getId();
    boolean isLimitAdTrackingEnabled();
}
-keep public class com.android.installreferrer.** { *; }
\n

Install referrer

\n

In order to correctly attribute an install of your Android app to its source, Adjust needs information about the install referrer. This can be obtained by using the Google Play Referrer API or by catching the Google Play Store intent with a broadcast receiver.

\n

Important: The Google Play Referrer API is newly introduced by Google with the express purpose of providing a more reliable and secure way of obtaining install referrer information and to aid attribution providers in the fight against click injection. It is strongly advised that you support this in your application. The Google Play Store intent is a less secure way of obtaining install referrer information. It will continue to exist in parallel with the new Google Play Referrer API temporarily, but it is set to be deprecated in future.

\n

Google Play Referrer API

\n

In order to support this, add the following line to your app's build.gradle file:

\n
compile 'com.android.installreferrer:installreferrer:1.0'
\n

installreferrer library is part of Google Maven repository, so in order to be able to build your app, you need to add Google Maven repository to your app's build.gradle file if you haven't added it already:

\n
allprojects {
    repositories {
        jcenter()
        maven {
            url \"https://maven.google.com\"
        }
    }
}
\n

Also, make sure that you have paid attention to the Proguard settings chapter and that you have added all the rules mentioned in it, especially the one needed for this feature:

\n
-keep public class com.android.installreferrer.** { *; }
\n

This feature is supported if you are using the Adjust SDK v4.12.0 or above.

\n

Google Play Store intent

\n

The Google Play Store INSTALL_REFERRER intent should be captured with a broadcast receiver. The Adjust install referrer broadcast receiver is added to your app by default. For more information, you can check our native Android SDK README. You can see this in the AndroidManifest.xml file which is part of our Nativescript plugin:

\n
<receiver android:name=\"com.adjust.sdk.AdjustReferrerReceiver\" 
          android:exported=\"true\" >
    <intent-filter>
        <action android:name=\"com.android.vending.INSTALL_REFERRER\" />
    </intent-filter>
</receiver>
\n

Please bear in mind that, if you are using your own broadcast receiver which handles the INSTALL_REFERRER intent, you don't need to add the Adjust broadcast receiver to your manifest file. You can remove it, but inside your own receiver add the call to the Adjust broadcast receiver as described in our Android guide.

\n

Huawei Referrer API

\n

As of v4.22.0, the Adjust SDK supports install tracking on Huawei devices with Huawei App Gallery version 10.4 and higher. No additional integration steps are needed to start using the Huawei Referrer API.

\n

iOS frameworks

\n

Select your project in the Project Navigator. In the left hand side of the main view, select your target. In the tab Build Phases, expand the group Link Binary with Libraries. On the bottom of that section click on the + button. Select the AdSupport.framework and click the Add button. Unless you are using tvOS, repeat the same steps to add the iAd.framework, CoreTelephony.framework, AppTrackingTransparency.framework and StoreKit.framework. Change the Status of both frameworks to Optional. Adjust SDK uses these frameworks with following purpose:

\n\n

If you are not running any iAd campaigns, you can feel free to remove the iAd.framework dependency. If you don't use SKAdNetwork framework, feel free to remove StoreKit.framework dependency (unless you need it for something else).

\n

Additional features

\n

You can take advantage of the following features once the Adjust SDK is integrated into your project.

\n

AppTrackingTransparency framework

\n

Note: This feature exists only in iOS platform.

\n

For each package sent, the Adjust backend receives one of the following four (4) states of consent for access to app-related data that can be used for tracking the user or the device:

\n\n

After a device receives an authorization request to approve access to app-related data, which is used for user device tracking, the returned status will either be Authorized or Denied.

\n

Before a device receives an authorization request for access to app-related data, which is used for tracking the user or device, the returned status will be Not Determined.

\n

If authorization to use app tracking data is restricted, the returned status will be Restricted.

\n

The SDK has a built-in mechanism to receive an updated status after a user responds to the pop-up dialog, in case you don't want to customize your displayed dialog pop-up. To conveniently and efficiently communicate the new state of consent to the backend, Adjust SDK offers a wrapper around the app tracking authorization method described in the following chapter, App-tracking authorization wrapper.

\n

App-tracking authorisation wrapper

\n

Note: This feature exists only in iOS platform.

\n

Adjust SDK offers the possibility to use it for requesting user authorization in accessing their app-related data. Adjust SDK has a wrapper built on top of the requestTrackingAuthorizationWithCompletionHandler: method, where you can as well define the callback method to get information about a user's choice. Also, with the use of this wrapper, as soon as a user responds to the pop-up dialog, it's then communicated back using your callback method. The SDK will also inform the backend of the user's choice. Integer value will be delivered via your callback method with the following meaning:

\n\n

To use this wrapper, you can call it as such:

\n
Adjust.requestTrackingAuthorizationWithCompletionHandler(function(status) {
    switch (status) {
        case 0:
            // ATTrackingManagerAuthorizationStatusNotDetermined case
            break;
        case 1:
            // ATTrackingManagerAuthorizationStatusRestricted case
            break;
        case 2:
            // ATTrackingManagerAuthorizationStatusDenied case
            break;
        case 3:
            // ATTrackingManagerAuthorizationStatusAuthorized case
            break;
    }
});
\n

Before calling the method, make sure that your iOS app's Info.plist contains an entry for NSUserTrackingUsageDescription key. In absence of that key and usage of this method, app will crash.

\n

SKAdNetwork framework

\n

Note: This feature exists only in iOS platform.

\n

If you have implemented the Adjust iOS SDK v4.23.0 or above and your app is running on iOS 14, the communication with SKAdNetwork will be set on by default, although you can choose to turn it off. When set on, Adjust automatically registers for SKAdNetwork attribution when the SDK is initialized. If events are set up in the Adjust dashboard to receive conversion values, the Adjust backend sends the conversion value data to the SDK. The SDK then sets the conversion value. After Adjust receives the SKAdNetwork callback data, it is then displayed in the dashboard.

\n

In case you don't want the Adjust SDK to automatically communicate with SKAdNetwork, you can disable that by calling the following method on configuration object:

\n
adjustConfig.deactivateSKAdNetworkHandling();
\n

Event tracking

\n

You can use Adjust to track all kinds of events. Let's say you want to track every tap on a button. Simply create a new event token in your dashboard. Let's say that event token is abc123. You can add the following line in your button’s click handler method to track the click:

\n
var adjustEvent = new AdjustEvent(\"abc123\");
Adjust.trackEvent(adjustEvent);
\n

Revenue tracking

\n

If your users can generate revenue by tapping on advertisements or making In-App Purchases, then you can track those revenues with events. Let's say a tap is worth €0.01. You could track the revenue event like this:

\n
var adjustEvent = new AdjustEvent(\"abc123\");

adjustEvent.setRevenue(0.01, \"EUR\");

Adjust.trackEvent(adjustEvent);
\n

When you set a currency token, Adjust will automatically convert the incoming revenues into a reporting revenue of your choice. Read more about currency conversion here.

\n

Revenue deduplication

\n

You can also add an optional transaction ID to avoid tracking duplicate revenues. The last ten transaction IDs are remembered, and revenue events with duplicate transaction IDs are skipped. This is especially useful for In-App Purchase tracking. You can see an example below.

\n

If you want to track in-app purchases, please make sure to call the trackEvent only if the transaction is finished and an item is purchased. That way you can avoid tracking revenue that is not actually being generated.

\n
var adjustEvent = new AdjustEvent(\"abc123\");

adjustEvent.setRevenue(0.01, \"EUR\");
adjustEvent.setTransactionId(\"{YourTransactionId}\");

Adjust.trackEvent(adjustEvent);
\n

Note: Transaction ID is the iOS term, unique identifier for successfully finished Android In-App-Purchases is named Order ID.

\n

In-app purchase verification

\n

In-app purchase verification can be conducted through the Nativescript Purchase SDK which is currently in development and will soon be made publicly available. For more information, please contact support@adjust.com.

\n

Callback parameters

\n

You can also register a callback URL for that event in your dashboard and we will send a GET request to that URL whenever the event gets tracked. In that case you can also put some key-value pairs in an object and pass it to the trackEvent method. We will then append these named parameters to your callback URL.

\n

For example, suppose you have registered the URL http://www.adjust.com/callback for your event with event token abc123 and execute the following lines:

\n
var adjustEvent = new AdjustEvent(\"abc123\");

adjustEvent.addCallbackParameter(\"key\", \"value\");
adjustEvent.addCallbackParameter(\"foo\", \"bar\");

Adjust.trackEvent(adjustEvent);
\n

In that case we would track the event and send a request to:

\n
http://www.adjust.com/callback?key=value&foo=bar
\n

It should be mentioned that we support a variety of placeholders like {idfa} for iOS or {gps_adid} for Android that can be used as parameter values. In the resulting callback the {idfa} placeholder would be replaced with the ID for Advertisers of the current device for iOS and the {gps_adid} would be replaced with the Google Advertising ID of the current device for Android. Also note that we don't store any of your custom parameters, but only append them to your callbacks. If you haven't registered a callback for an event, these parameters won't even be read.

\n

You can read more about using URL callbacks, including a full list of available values, in our\ncallbacks guide.

\n

Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

\n

Partner parameters

\n

Similarly to the callback parameters mentioned above, you can also add parameters that Adjust will transmit to the network partners of your choice. You can activate these networks in your Adjust dashboard.

\n

This works similarly to the callback parameters mentioned above, but can be added by calling the addPartnerParameter method on your AdjustEvent instance.

\n
var adjustEvent = new AdjustEvent(\"abc123\");

adjustEvent.addPartnerParameter(\"key\", \"value\");
adjustEvent.addPartnerParameter(\"foo\", \"bar\");

Adjust.trackEvent(adjustEvent);
\n

You can read more about special partners and networks in our guide to special partners.

\n

Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

\n

Callback identifier

\n

You can also add custom string identifier to each event you want to track. This identifier will later be reported in event success and/or event failure callbacks to enable you to keep track on which event was successfully tracked or not. You can set this identifier by calling the setCallbackId method on your AdjustEvent instance:

\n
var adjustEvent = new AdjustEvent(\"abc123\");

adjustEvent.setCallbackId(\"Your-Custom-Id\");

Adjust.trackEvent(adjustEvent);
\n

Subscription tracking

\n

Note: This feature is only available in the SDK v4.22.0 and above.

\n

You can track App Store and Play Store subscriptions and verify their validity with the Adjust SDK. After a subscription has been successfully purchased, make the following call to the Adjust SDK:

\n

For App Store subscription:

\n
var subscription = new AdjustAppStoreSubscription(price, currency, transactionId, receipt);
subscription.setTransactionDate(transactionDate);
subscription.setSalesRegion(salesRegion);

Adjust.trackAppStoreSubscription(subscription);
\n

For Play Store subscription:

\n
var subscription = new AdjustPlayStoreSubscription(price, currency, sku, orderId, signature, purchaseToken);
subscription.setPurchaseTime(purchaseTime);

Adjust.trackPlayStoreSubscription(subscription);
\n

Subscription tracking parameters for App Store subscription:

\n\n

Subscription tracking parameters for Play Store subscription:

\n\n

Note: Subscription tracking API offered by Adjust SDK expects all parameters to be passed as string values. Parameters described above are the ones which API exects you to pass to subscription object prior to tracking subscription. There are various libraries which are handling in app purchases in Nativescript and each one of them should return information described above in some form upon successfully completed subscription purchase. You should locate where these parameters are placed in response you are getting from library you are using for in app purchases, extract those values and pass them to Adjust API as string values.

\n

Just like with event tracking, you can attach callback and partner parameters to the subscription object as well:

\n

For App Store subscription:

\n
var subscription = new AdjustAppStoreSubscription(price, currency, transactionId, receipt);
subscription.setTransactionDate(transactionDate);
subscription.setSalesRegion(salesRegion);

// add callback parameters
subscription.addCallbackParameter(\"key\", \"value\");
subscription.addCallbackParameter(\"foo\", \"bar\");

// add partner parameters
subscription.addPartnerParameter(\"key\", \"value\");
subscription.addPartnerParameter(\"foo\", \"bar\");

Adjust.trackAppStoreSubscription(subscription);
\n

For Play Store subscription:

\n
var subscription = new AdjustPlayStoreSubscription(price, currency, sku, orderId, signature, purchaseToken);
subscription.setPurchaseTime(purchaseTime);

// add callback parameters
subscription.addCallbackParameter(\"key\", \"value\");
subscription.addCallbackParameter(\"foo\", \"bar\");

// add partner parameters
subscription.addPartnerParameter(\"key\", \"value\");
subscription.addPartnerParameter(\"foo\", \"bar\");

Adjust.trackPlayStoreSubscription(subscription);
\n

Session parameters

\n

Some parameters are saved to be sent in every event and session of the Adjust SDK. Once you have added any of these parameters, you don't need to add them every time, since they will be saved locally. If you add the same parameter twice, there will be no effect.

\n

These session parameters can be called before the Adjust SDK is launched to make sure they are sent even on install. If you need to send them with an install, but can only obtain the needed values after launch, it's possible to delay the first launch of the Adjust SDK to allow this behaviour.

\n

Session callback parameters

\n

The same callback parameters that are registered for events can be also saved to be sent in every event or session of the Adjust SDK.

\n

The session callback parameters have a similar interface of the event callback parameters. Instead of adding the key and its value to an event, it's added through a call to method addSessionCallbackParameter of the Adjust instance:

\n
Adjust.addSessionCallbackParameter(\"foo\", \"bar\");
\n

The session callback parameters will be merged with the callback parameters and added to an event. The callback parameters added to an event have precedence over the session callback parameters. Meaning that, when adding a callback parameter to an event with the same key to one added from the session, the value that prevails is the callback parameter added to the event.

\n

Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

\n

It's possible to remove a specific session callback parameter by passing the desiring key to the method removeSessionCallbackParameter of the Adjust instance:

\n
Adjust.removeSessionCallbackParameter(\"foo\");
\n

If you wish to remove all key and values from the session callback parameters, you can reset it with the method resetSessionCallbackParameters of the Adjust instance:

\n
Adjust.resetSessionCallbackParameters();
\n

Session partner parameters

\n

In the same way that there are session callback parameters that are sent for every event or session of the Adjust SDK, there are also session partner parameters.

\n

These will be transmitted to network partners, for the integrations that have been activated in your Adjust dashboard.

\n

The session partner parameters have a similar interface to the event partner parameters. Instead of adding the key and its value to an event, it's added through a call to method addSessionPartnerParameter of the Adjust instance:

\n
Adjust.addSessionPartnerParameter(\"foo\", \"bar\");
\n

The session partner parameters will be merged with the partner parameters and added to an event. The partner parameters added to an event have precedence over the session partner parameters. Meaning that, when adding a partner parameter to an event with the same key to one added from the session, the value that prevails is the partner parameter added to the event.

\n

Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

\n

It's possible to remove a specific session partner parameter by passing the desiring key to the method removeSessionPartnerParameter of the Adjust instance:

\n
Adjust.removeSessionPartnerParameter(\"foo\");
\n

If you wish to remove all keys and values from the session partner parameters, you can reset it with the method resetSessionPartnerParameters of the Adjust instance:

\n
Adjust.resetSessionPartnerParameters();
\n

Delay start

\n

Delaying the start of the Adjust SDK allows your app some time to obtain session parameters, such as unique identifiers, to be sent on install.

\n

Set the initial delay time in seconds with the setDelayStart field of the AdjustConfig instance:

\n
adjustConfig.setDelayStart(5.5);
\n

In this case this will make the Adjust SDK not send the initial install session and any event created for 5.5 seconds. After this time is expired or if you call sendFirstPackages() of the Adjust instance in the meanwhile, every session parameter will be added to the delayed install session and events and the Adjust SDK will resume as usual.

\n

The maximum delay start time of the Adjust SDK is 10 seconds.

\n

Attribution callback

\n

You can register a listener to be notified of tracker attribution changes. Due to the different sources considered for attribution, this information cannot be provided synchronously. The simplest way is to create a single anonymous listener which is going to be called each time your user's attribution value changes:

\n

With the AdjustConfig instance, before starting the SDK, add the anonymous listener:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setAttributionCallbackListener(function(attribution) {
    // Printing all attribution properties.
    console.log(\"Attribution changed!\");
    console.log(attribution.trackerToken);
    console.log(attribution.trackerName);
    console.log(attribution.network);
    console.log(attribution.campaign);
    console.log(attribution.adgroup);
    console.log(attribution.creative);
    console.log(attribution.clickLabel);
    console.log(attribution.adid);
});

Adjust.create(adjustConfig);
\n

Within the listener function you have access to the attribution parameters. Here is a quick summary of its properties:

\n\n

Please make sure to consider our applicable attribution data policies.

\n

Session and event callbacks

\n

You can register a callback to be notified of successful and failed tracked events and/or sessions.

\n

Follow the same steps as for attribution callback to implement the following callback function for successfully tracked events:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setEventTrackingSucceededCallbackListener(function(eventSuccess) {
    // Printing all event success properties.
    console.log(\"Event tracking succeeded!\");
    console.log(eventSuccess.message);
    console.log(eventSuccess.timestamp);
    console.log(eventSuccess.eventToken);
    console.log(eventSuccess.callbackId);
    console.log(eventSuccess.adid);
    console.log(eventSuccess.jsonResponse);
});

Adjust.create(adjustConfig);
\n

The following callback function for failed tracked events:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setEventTrackingFailedCallbackListener(function(eventFailure) {
    // Printing all event failure properties.
    console.log(\"Event tracking failed!\");
    console.log(eventFailure.message);
    console.log(eventFailure.timestamp);
    console.log(eventFailure.eventToken);
    console.log(eventFailure.callbackId);
    console.log(eventFailure.adid);
    console.log(eventFailure.willRetry);
    console.log(eventFailure.jsonResponse);
});

Adjust.create(adjustConfig);
\n

For successfully tracked sessions:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setSessionTrackingSucceededCallbackListener(function(sessionSuccess) {
    // Printing all session success properties.
    console.log(\"Session tracking succeeded!\");
    console.log(sessionSuccess.message);
    console.log(sessionSuccess.timestamp);
    console.log(sessionSuccess.adid);
    console.log(sessionSuccess.jsonResponse);
});

Adjust.create(adjustConfig);
\n

And for failed tracked sessions:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setSessionTrackingFailedCallbackListener(function(sessionFailure) {
    // Printing all session failure properties.
    console.log(\"Session tracking failed!\");
    console.log(sessionFailure.message);
    console.log(sessionFailure.timestamp);
    console.log(sessionFailure.adid);
    console.log(sessionFailure.willRetry);
    console.log(sessionFailure.jsonResponse);
});

Adjust.create(adjustConfig);
\n

The callback functions will be called after the SDK tries to send a package to the server. Within the callback you have access to a response data object specifically for the callback. Here is a quick summary of the session response data properties:

\n\n

Both event response data objects contain:

\n\n

And both event and session failed objects also contain:

\n\n

Disable tracking

\n

You can disable the Adjust SDK from tracking by invoking the method setEnabled of the Adjust instance with the enabled parameter as false. This setting is remembered between sessions, but it can only be activated after the first session.

\n
Adjust.setEnabled(false);
\n

You can verify if the Adjust SDK is currently active with the method isEnabled of the Adjust instance. It is always possible to activate the Adjust SDK by invoking setEnabled with the parameter set to true.

\n

Offline mode

\n

You can put the Adjust SDK in offline mode to suspend transmission to our servers while retaining tracked data to be sent later. When in offline mode, all information is saved in a file, so be careful not to trigger too many events while in offline mode.

\n

You can activate offline mode by calling the method setOfflineMode of the Adjust instance with the parameter true.

\n
Adjust.setOfflineMode(true);
\n

Conversely, you can deactivate offline mode by calling setOfflineMode with false. When the Adjust SDK is put back in online mode, all saved information is send to our servers with the correct time information.

\n

Unlike disabling tracking, this setting is not remembered between sessions. This means that the SDK is in online mode whenever it is started, even if the app was terminated in offline mode.

\n

Event buffering

\n

If your app makes heavy use of event tracking, you might want to delay some HTTP requests in order to send them in one batch every minute. You can enable event buffering with your AdjustConfig instance by calling setEventBufferingEnabled method:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setEventBufferingEnabled(true);

Adjust.create(adjustConfig);
\n

GDPR right to be forgotten

\n

In accordance with article 17 of the EU's General Data Protection Regulation (GDPR), you can notify Adjust when a user has exercised their right to be forgotten. Calling the following method will instruct the Adjust SDK to communicate the user's choice to be forgotten to the Adjust backend:

\n
Adjust.gdprForgetMe();
\n

Upon receiving this information, Adjust will erase the user's data and the Adjust SDK will stop tracking the user. No requests from this device will be sent to Adjust in the future.

\n

Disable third-party sharing for specific users

\n

You can now notify Adjust when a user has exercised their right to stop sharing their data with partners for marketing purposes, but has allowed it to be shared for statistics purposes.

\n

Call the following method to instruct the Adjust SDK to communicate the user's choice to disable data sharing to the Adjust backend:

\n
Adjust.disableThirdPartySharing();
\n

Upon receiving this information, Adjust will block the sharing of that specific user's data to partners and the Adjust SDK will continue to work as usual.

\n

SDK signature

\n

An account manager must activate the Adjust SDK signature. Contact Adjust support (support@adjust.com) if you are interested in using this feature.

\n

If the SDK signature has already been enabled on your account and you have access to App Secrets in your Adjust Dashboard, please use the method below to integrate the SDK signature into your app.

\n

An App Secret is set by passing all secret parameters (secretId, info1, info2, info3, info4) to setAppSecret method of AdjustConfig instance:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setAppSecret(secretId, info1, info2, info3, info4);

Adjust.create(adjustConfig);
\n

Background tracking

\n

The default behaviour of the Adjust SDK is to pause sending HTTP requests while the app is in the background. You can change this in your AdjustConfig instance by calling setSendInBackground method:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setSendInBackground(true);

Adjust.create(adjustConfig);
\n

If nothing is set, sending in background is disabled by default.

\n

Device IDs

\n

Certain services (such as Google Analytics) require you to coordinate device and client IDs in order to prevent duplicate reporting.

\n

iOS advertising identifier

\n

You can access the IDFA value of an iOS device by invoking the getIdfa method of the Adjust instance and passing it a callback that will get triggered once the IDFA value has been obtained by the native iOS SDK:

\n
Adjust.getIdfa((idfa) => {
    console.log(\"IDFA = \" + idfa);
});
\n

Google Play Services advertising identifier

\n

The Adjust SDK allows you to read the Google advertising identifier of the Android device on which your app is running. In order to do this, call the getGoogleAdId method of the Adjust instance and pass your callback as a parameter. Once obtained by the native Android SDK, you will receive the Google advertising identifier value in your callback method:

\n
Adjust.getGoogleAdId((googleAdId) => {
    console.log(\"Google Ad Id = \" + googleAdId);
});
\n

Amazon advertising identifier

\n

If you need to obtain the Amazon advertising ID, you can call the getAmazonAdId method of the Adjust instance and pass your callback as a parameter to which the Amazon advertising ID value will be sent once obtained:

\n
Adjust.getAmazonAdId((amazonAdId) => {
    console.log(\"Amazon Ad Id = \" + amazonAdId);
});
\n

Adjust device identifier

\n

For every device with your app installed on it, the Adjust backend generates a unique Adjust device identifier (adid). In order to obtain this identifier, call the getAdid method of the Adjust instance and pass your callback as a parameter to which the adid value will be sent once obtained:

\n
Adjust.getAdid((adid) => {
    console.log(\"Adid = \" + adid);
});
\n

Note: Information about the adid is only available after an app installation has been tracked by the Adjust backend. From that moment on, the Adjust SDK has information about the device adid and you can access it with this method. So, it is not possible to access the adid value before the SDK has been initialized and installation of your app has been successfully tracked.

\n

User attribution

\n

This callback is triggered as described in the attribution callback section, providing you with information about a new attribution whenever it changes. If you want to access information about a user's current attribution status at any other time, you can make a call to the getAttribution method of the Adjust instance and pass your callback as a parameter to which the attribution value will be sent once obtained:

\n
Adjust.getAttribution((attribution) => {
    console.log(\"Tracker token = \" + attribution.trackerToken);
    console.log(\"Tracker name = \" + attribution.trackerName);
    console.log(\"Network = \" + attribution.network);
    console.log(\"Campaign = \" + attribution.campaign);
    console.log(\"Adgroup = \" + attribution.adgroup);
    console.log(\"Creative = \" + attribution.creative);
    console.log(\"Click label = \" + attribution.clickLabel);
    console.log(\"Adid = \" + attribution.adid);
});
\n

Note: Information about a user's current attribution status is only available after an app installation has been tracked by the Adjust backend and the attribution callback has been triggered. From that moment on, the Adjust SDK has information about a user's attribution status and you can access it with this method. So, it is not possible to access a user's attribution value before the SDK has been initialized and an attribution callback has been triggered.

\n

Push token

\n

To send us the push notification token, add the following call to Adjust whenever you get your token in the app or when it gets updated:

\n
Adjust.setPushToken(\"YourPushNotificationToken\");
\n

Push tokens are used for Audience Builder and client callbacks, and they are required for the upcoming uninstall tracking feature.

\n

Track additional device identifiers

\n

If you are distributing your Android app outside of the Google Play Store and would like to track additional device identifiers (IMEI and MEID), you need to explicitly instruct the Adjust SDK to do so. You can do that by calling the setReadMobileEquipmentIdentity method of the AdjustConfig instance. The Adjust SDK does not collect these identifiers by default.

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setReadMobileEquipmentIdentity(true);

Adjust.create(adjustConfig);
\n

You will also need to add the READ_PHONE_STATE permission to your AndroidManifest.xml file:

\n
<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>
\n

In order to use this feature, additional steps are required within your Adjust Dashboard. For more information, please contact your dedicated account manager or write an email to support@adjust.com.

\n

Pre-installed trackers

\n

If you want to use the Adjust SDK to recognize users that found your app pre-installed on their device, follow these steps.

\n
    \n
  1. \n

    Create a new tracker in your dashboard.

    \n
    2. \n
  2. \n

    Open your app delegate and add set the default tracker of your AdjustConfig instance:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setDefaultTracker(\"{TrackerToken}\");

    Adjust.create(adjustConfig);
    \n
    3. \n
\n

Replace {TrackerToken} with the tracker token you created in step 2. Please note that the dashboard displays a tracker\nURL (including http://app.adjust.com/). In your source code, you should specify only the six-character token and not the\nentire URL.

\n
    \n
  1. \n

    Build and run your app. You should see a line like the following in the app's log output:

    \n
    Default tracker: 'abc123'
    \n
    2. \n
\n

Deep linking

\n

If you are using the Adjust tracker URL with an option to deep link into your app from the URL, there is the possibility to get info about the deep link URL and its content. Hitting the URL can happen when the user has your app already installed (standard deep linking scenario) or if they don't have the app on their device (deferred deep linking scenario).

\n

Standard deep linking scenario

\n

To support deep linking in Android, the app's AndroidManifest.xml file will need to be modified. Please refer to this page of our Android SDK for the needed modifications to AndroidManifest.xml.

\n

To support deep linking in iOS 8 or earlier, the app's Info.plist file will need to be modified. Please refer to this page of our iOS SDK for the needed modifications to Info.plist.

\n

To support deep linking in iOS 9 or later, your app would have to handle Universal Links. Please refer to this page of our iOS SDK for the needed modifications.

\n

Deferred deep linking scenario

\n

While deferred deep linking is not supported out of the box on Android and iOS, our Adjust SDK makes it possible.

\n

In order to get info about the URL content in a deferred deep linking scenario, you should set a callback method on the AdjustConfig object which will receive one parameter where the content of the URL will be delivered. You should set this method on the config object by calling the method setDeferredDeeplinkCallbackListener:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setDeferredDeeplinkCallbackListener(function(deeplink) {
    console.log(\"Deferred deep link URL content: \" + deeplink);
});

Adjust.create(adjustConfig);
\n

In the deferred deep linking scenario, there is one additional setting which can be set on the AdjustConfig object. Once the Adjust SDK gets the deferred deep link info, we are offering you the possibility to choose whether our SDK should open this URL or not. You can choose to set this option by calling the setShouldLaunchDeeplink method on the config object:

\n
var adjustConfig = new AdjustConfig(appToken, environment);

adjustConfig.setShouldLaunchDeeplink(true);
// or adjustConfig.setShouldLaunchDeeplink(false);

adjustConfig.setDeferredDeeplinkCallbackListener(function(deeplink) {
    console.log(\"Deferred deep link URL content: \" + deeplink);
});

Adjust.create(adjustConfig);
\n

If nothing is set, the Adjust SDK will always try to launch the URL by default.

\n

Reattribution via deep links

\n

Adjust enables you to run re-engagement campaigns by using deep links. For more information on this, please check our official docs.

\n

If you are using this feature, in order for your user to be properly reattributed, you need to make one additional call to the Adjust SDK in your app. Once you have received deep link content information in your app, add a call to appWillOpenUrl method of the Adjust instance. By making this call, the Adjust SDK will try to find if there is any new attribution info inside of the deep link and if any, it will be sent to the Adjust backend. If your user should be reattributed due to a click on the Adjust tracker URL with deep link content in it, you will see the attribution callback in your app being triggered with new attribution info for this user.

\n

Call to the appWillOpenUrl method in a would look like this:

\n
Linking.addEventListener('url', this.handleDeepLink);
Linking.getInitialURL().then((url) => {
    if (url) {
        this.handleDeepLink({ url });
    }
})

handleDeepLink(event) {
    Adjust.appWillOpenUrl(event.url);
}
\n

License

\n

The Adjust SDK is licensed under the MIT License.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@badideas/nativescript-notifications":{"name":"@badideas/nativescript-notifications","version":"5.0.4","license":"MIT","readme":"

NativeScript Notifications Plugin

\n

\"NPM\n\"Downloads\"

\n

This is a fork of the Nativescript Local Notifications Plugin. The eventual goal of this project will be to create a comprehensive plugin for managing local and push notifications, without the need for two distinct packages and hacking the shared delegate for ios.

\n

In it's current state this plugin allows your app to show notifications from within the app.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativeScript 7+:

\n
ns plugin add @badideas/nativescript-notifications
\n

NativeScript prior to 7:

\n
tns plugin add nativescript-local-notifications@4.2.1
\n

Setup (since plugin version 3.0.0)

\n

Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

\n

You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

\n
// either
import { LocalNotifications } from '@badideas/nativescript-notifications';
// or (if that doesn't work for you)
import * as LocalNotifications from '@badideas/nativescript-notifications';

// then use it as:
LocalNotifications.hasPermission();
\n

NativeScript-Angular

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

There's also a simple Angular demo in this repo:

\n

NativeScript-Vue

\n

There is a Vue demo:

\n

Plugin API

\n

schedule

\n

On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission), or you can manually invoke requestPermission if that's your thing.

\n

You can pass several options to this function, everything is optional:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idA number so you can easily distinguish your notifications. Will be generated if not set.
titleThe title which is shown in the statusbar. Default not set.
subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
groupedMessagesAn array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set
groupSummaryAn inboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
intervalSet to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
\n

NotificationAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondescription
idAn id so you can easily distinguish your actions.
typeEither button or input.
titleThe label for type = button.
launchLaunch the app when the action completes.
submitLabelThe submit button label for type = input.
placeholderThe placeholder text for type = input.
\n
LocalNotifications.schedule([
\t{
\t\tid: 1, // generated id if not set
\t\ttitle: 'The title',
\t\tbody: 'Recurs every minute until cancelled',
\t\tticker: 'The ticker',
\t\tcolor: new Color('red'),
\t\tbadge: 1,
\t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
\t\tgroupSummary: 'Summary of the grouped messages above', //android only
\t\tongoing: true, // makes the notification ongoing (Android only)
\t\ticon: 'res://heart',
\t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
\t\tthumbnail: true,
\t\tinterval: 'minute',
\t\tchannel: 'My Channel', // default: 'Channel'
\t\tsound: 'customsound-ios.wav', // falls back to the default sound on Android
\t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
\t},
]).then(
\t(scheduledIds) => {
\t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
\t},
\t(error) => {
\t\tconsole.log('scheduling error: ' + error);
\t}
);
\n

Notification icons (Android)

\n

These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

\n

silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

\n

These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.
\n

Source: Density Qualifier Docs

\n

addOnMessageReceivedCallback

\n

Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

\n

Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

\n
LocalNotifications.addOnMessageReceivedCallback((notification) => {
\tconsole.log('ID: ' + notification.id);
\tconsole.log('Title: ' + notification.title);
\tconsole.log('Body: ' + notification.body);
}).then(() => {
\tconsole.log('Listener added');
});
\n

getScheduledIds

\n

If you want to know the ID's of all notifications which have been scheduled, do this:

\n
LocalNotifications.getScheduledIds().then((ids) => {
\tconsole.log(\"ID's: \" + ids);
});
\n

cancel

\n

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

\n
LocalNotifications.cancel(5 /* the ID */).then((foundAndCanceled) => {
\tif (foundAndCanceled) {
\t\tconsole.log(\"OK, it's gone!\");
\t} else {
\t\tconsole.log('No ID 5 was scheduled');
\t}
});
\n

cancelAll

\n

If you just want to cancel all previously scheduled notifications, do this:

\n
LocalNotifications.cancelAll();
\n

requestPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

\n
LocalNotifications.requestPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n

hasPermission

\n

On Android you don't need permission, but on iOS you do. Android will simply return true.

\n

If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

\n
LocalNotifications.hasPermission().then((granted) => {
\tconsole.log('Permission granted? ' + granted);
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-openfile":{"name":"nativescript-openfile","version":"0.0.12","license":"MIT","readme":"

Nativescript Open File Plugin \"android\"

\n

Documentation

\n
npm i nativescript-openfile
\n
var openfile = require(\"nativescript-openfile\");
    openfile(\"file_path\");
\n\n

Author Elmissouri

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@amarseelam/nativescript-photo-editor":{"name":"@amarseelam/nativescript-photo-editor","version":"1.1.1","license":"Apache-2.0","readme":"

NativeScript Photo Editor

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-photo-editor

\n

This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Methods

\n\n

Usage

\n

Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

\n
import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

const photoEditor = new PhotoEditor();

photoEditor.editPhoto({
    imageSource: originalImage.imageSource,
    hiddenControls: [
        PhotoEditorControl.Save,
        PhotoEditorControl.Crop,
    ],
}).then((newImage: ImageSource) => {
    // Here you can save newImage, send it to your backend or simply display it in your app
    resultImage.imageSource = newImage;
}).catch((e) => {
    console.error(e);
});
\n

Usage in Angular

\n

There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

\n

Demos

\n

This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-photo-editor
$ cd nativescript-photo-editor
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nickykln/nativescript-masked-text-field":{"name":"@nickykln/nativescript-masked-text-field","version":"4.0.7","license":"Apache-2.0","readme":"

NativeScript Masked Text Field widget

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-masked-text-field

\n

This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
    <StackLayout>
        <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
    </StackLayout>
</Page>
\n

Usage in Angular

\n

In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

\n
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
// ......
@NgModule({
    // ......
    imports: [
        // ......
        MaskedTextFieldModule,
        // ......
    ],
    // ......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        MaskedTextFieldModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public value = \"\";
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-masked-text-field
$ cd nativescript-masked-text-field
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-theme-christmas":{"name":"nativescript-theme-christmas","version":"1.0.0","license":"MIT","readme":"

NativeScript Theme: christmas

\n

Install

\n
npm i nativescript-theme-christmas --save
\n

Usage

\n

A. CSS:

\n

Insert this at the top of your main css file.

\n
@import 'nativescript-theme-christmas/css/christmas.css';
\n

B. SASS:

\n\n
@import 'nativescript-theme-christmas/scss/christmas';
\n\n
@import 'common';
@import 'nativescript-theme-core/scss/platforms/index.ios';
\n\n
@import 'common';
@import 'nativescript-theme-core/scss/platforms/index.android';
\n

Preview

\n

\"Preview\"

\n

LICENSE

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-swipe-saturn":{"name":"nativescript-image-swipe-saturn","version":"2.1.0","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

\n

Screenshot

\n

\"Screenshot\"

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-image-swipe

\n

This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
    <GridLayout>
        <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                       pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
        </is:ImageSwipe>
    </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { PageChangeEventData } from \"nativescript-image-swipe\";

let viewModel: Observable;

export function navigatingTo(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

    viewModel = new Observable();
    viewModel.set(\"items\", items);
    viewModel.set(\"pageNumber\", 3);

    page.bindingContext = viewModel;
}

export function pageChanged(e: PageChangeEventData) {
    console.log(`Page changed to ${e.page}.`);
}
\n

Usage in Angular

\n

In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

\n
// main.ts
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { registerElement } from \"nativescript-angular/element-registry\";

import { AppModule } from \"./app.module\";

registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

platformNativeScriptDynamic().bootstrapModule(AppModule);
\n
<!-- test.component.html -->
<GridLayout>
    <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
    </ImageSwipe>
</GridLayout>
\n
// test.component.ts
import { Component, OnInit } from \"@angular/core\";
import { PageChangeEventData } from \"nativescript-image-swipe\";

@Component({
    selector: \"demo\",
    moduleId: module.id,
    templateUrl: \"./test.component.html\",
})
export class ImageSwipeComponent implements OnInit {
    public items: any[] = [];
    public pageNumber: number = 3;

    ngOnInit(): void {
        this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
    }

    public pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
}
\n

Working with Webpack+Uglify

\n

In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The ImageSwipe widget exports those and you need to add them to the mangle exclude option of the uglifyjs plugin in the webpack.common.js file:

\n
var imageSwipeMangleExcludes = require(\"nativescript-image-swipe/uglify-mangle-excludes\").default;
//......
module.exports = function (platform, destinationApp) {
    //......
    if (process.env.npm_config_uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({
            minimize: true
        }));

        //Work around an Android issue by setting compress = false
        var compress = platform !== \"android\";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: nsWebpack.uglifyMangleExcludes.concat(imageSwipeMangleExcludes),
            },
            compress: compress,
        }));
    }
   //......
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-image-swipe
$ cd nativescript-image-swipe
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-xavier-passport":{"name":"@nstudio/nativescript-xavier-passport","version":"2.0.2","license":{"type":"APACHE","url":"https://github.com/nstudio/nativescript-xavier-passport/blob/master/LICENSE"},"readme":"\n

NativeScript Xavier Passport

\n\n

NativeScript plugin to scan MRZ data from Passports and Cards for Android and iOS.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

\n

\n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

NativeScript Xavier-Passport

\n

This is a NativeScript cross platform plugin wrapping the Black Shark Tech Xavier library for IOS and Android.

\n

License

\n

Our code is 2018-2019, nStudio, LLC. Everything is LICENSED under the APACHE 2.0 License, meaning you are free to include this in any type of program.

\n

However, the base Xavier library must be licensed from them see:\nhttps://github.com/BlackSharkTech/Xavier-demo-android\nand\nhttps://github.com/BlackSharkTech/Xavier-demo-ios\nTo get a real license key you need to contact sales @ blacksharktech.com

\n

Installation

\n

Same plugin works on NativeScript 5.x and above

\n

Run tns plugin add @nstudio/nativescript-xavier-passport in your ROOT directory of your project.

\n

Android Required Setup

\n

In your app/App_Resources/Android/src/main/res/AndroidManifest.xml you need to do the following:

\n
    \n
  1. Add xmlns:tools="http://schemas.android.com/tools" to the <Manifest ...
    2. \n
  2. Int the <application add tools:replace="android:allowBackup"
    \n\"Files\"\n3a. In the <uses-sdk change the android:minSdkVersion="XX" to at least 21.\n3b. If you are using a newer version of NativeScript and your file does NOT have a <uses-sdk; then you need to change the app/App_Resources/Android/app.gradle file. Change minSdkVersion to at least 21
    3. \n
\n

Usage

\n

Start Scanning

\n
const Passport = require('@nstudio/nativescript-xavier-passport');

const zp = new Passport({\"licenseKey\": \"<LICENSE_KEY>\"});
zp.on(\"results\", function(results) { console.log(\"Results:\", results); });
zp.start();
\n

Instantiating the Passport Object

\n

new Password(options)

\n

Options:

\n\n

.enableDebug()

\n

Will enable more logs to be output to the log system.

\n

.enableCloseHack()

\n

Might be required for iOS; last version of MRZ had issue with notification of closing; so we have a work around...

\n

.start()

\n
zp.start();
\n

Start the scanning

\n

Events

\n
zp.on(\"error\", function(error) { console.log(\"Error\", error); });
zp.on(\"closed\", function() { console.log(\"Closed the reader\"); });
zp.on(\"results\", function(results) { console.log(\"Results\", results); });
\n\n

Result Object:

\n\n

Demo

\n

Please see the demo source (See: main-view-model.js).

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pusher-nativescript":{"name":"pusher-nativescript","version":"1.0.0","license":"MIT","readme":"

Pusher Nativescript

\n

Pusher NativeScript adds Pusher support to {N} applications.

\n

There is not official support for NativeScript in pusher-js sdk, but the Pusher team made a great work designing the JS library to target multiple platforms (react-native, node, browser, etc), while reusing a lot of code in the process. Taking advantage of that architecture, we were able to create a version of the pusher-js sdk that maintains the original API and provides support for NativeScript.

\n

Usage

\n

You can install the library using any npm compatible package manager, like npm or yarn:

\n
$ npm install --save pusher-nativescript
\n

Or use NativeScript CLI:

\n
$ tns plugin add pusher-nativescript
\n

Once the package has been installed, you can import it

\n

As a CommonJS module:

\n
const Pusher = require('pusher-nativescript');
\n

Or ES6 module:

\n
import Pusher from 'pusher-nativescript';
\n

If you are using Typescript you might have to import it like this:

\n
import * as Pusher from 'pusher-nativescript';
\n

This build of pusher-js uses NativeScript's Connectivity API to detect changes on connectivity state. It will use this to automatically reconnect.

\n

On Android, to access any connection related information we will need explicit permission from the user. To enable the permission request add the follwing in app/App_Resources/Android/AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
\n

NativeScript do not have official support for WebSockets. We are relying on nativescript-websockets plugin to add that support. That is why the plugin is a peer dependency.

\n

As it was mentioned above, pusher-nativescript shares the same API as the official pusher-js library. To see how the library is used and configured checkout pusher-js repository.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/flipper":{"name":"@nativescript-community/flipper","version":"0.0.6","license":"ISC","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

Usage

\n
import { Client } from '@nativescript-community/flipper';
const flipper = new Client();
flipper.start({
    plugins: ['inspector', 'network', 'prefs'],
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sammoore/nativescript-image-swipe":{"name":"@sammoore/nativescript-image-swipe","version":"3.0.2","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

\n

Screenshot

\n

\"Screenshot\"

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-image-swipe

\n

This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
    <GridLayout>
        <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                       pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
        </is:ImageSwipe>
    </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { PageChangeEventData } from \"nativescript-image-swipe\";

let viewModel: Observable;

export function navigatingTo(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
    items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

    viewModel = new Observable();
    viewModel.set(\"items\", items);
    viewModel.set(\"pageNumber\", 3);

    page.bindingContext = viewModel;
}

export function pageChanged(e: PageChangeEventData) {
    console.log(`Page changed to ${e.page}.`);
}
\n

Usage in Angular

\n

In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

\n
// main.ts
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { registerElement } from \"nativescript-angular/element-registry\";

import { AppModule } from \"./app.module\";

registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

platformNativeScriptDynamic().bootstrapModule(AppModule);
\n
<!-- test.component.html -->
<GridLayout>
    <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
    </ImageSwipe>
</GridLayout>
\n
// test.component.ts
import { Component, OnInit } from \"@angular/core\";
import { PageChangeEventData } from \"nativescript-image-swipe\";

@Component({
    selector: \"demo\",
    moduleId: module.id,
    templateUrl: \"./test.component.html\",
})
export class ImageSwipeComponent implements OnInit {
    public items: any[] = [];
    public pageNumber: number = 3;

    ngOnInit(): void {
        this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
    }

    public pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-image-swipe
$ cd nativescript-image-swipe
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@melonwd/nativescript-masked-text-field":{"name":"@melonwd/nativescript-masked-text-field","version":"3.0.3","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-masked-text-field

\n

This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
    <StackLayout>
        <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
    </StackLayout>
</Page>
\n

Usage in Angular

\n

In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

\n
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
// ......
@NgModule({
    // ......
    imports: [
        // ......
        MaskedTextFieldModule,
        // ......
    ],
    // ......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        MaskedTextFieldModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public value = \"\";
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-masked-text-field
$ cd nativescript-masked-text-field
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-grid-view-new":{"name":"nativescript-grid-view-new","version":"1.0.0","license":"ISC","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript GridView widget. The GridView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-grid-view

\n

This command automatically installs the necessary files, as well as stores nativescript-grid-view as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Instance Methods

\n\n

Usage

\n

You need to add xmlns:gv="nativescript-grid-view" to your page tag, and then simply use <gv:GridView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-grid-view\" loaded=\"pageLoaded\">
  <GridLayout>
    <gv:GridView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
      <gv:GridView.itemTemplate>
        <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
          <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
        </GridLayout>
      </gv:GridView.itemTemplate>
    </gv:GridView>
  </GridLayout>
</Page>
\n
// test-page.ts
import { EventData, Observable } from \"data/observable\";
import { ObservableArray } from \"data/observable-array\";
import { Page } from \"ui/page\";

import { GridItemEventData } from \"nativescript-grid-view\";

let viewModel: Observable;

export function pageLoaded(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    for (let loop = 0; loop < 200; loop++) {
        items.push({ value: \"test \" + loop.toString() });
    }
    viewModel = new Observable();
    viewModel.set(\"items\", items);

    page.bindingContext = viewModel;
}

export function gridViewItemTap(args: GridItemEventData) {
    console.log(\"tap index \" + args.index.toString());
}

export function gridViewItemLoading(args: GridItemEventData) {
    console.log(\"item loading \" + args.index.toString());
}

export function gridViewLoadMoreItems(args: EventData) {
    console.log(\"load more items\");
}
\n

You can also have multiple templates the same way you add them in the builtin ListView control:

\n
<gv:GridView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
    <gv:GridView.itemTemplates>
        <template key=\"odd\">
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>

        <template key=\"even\">
            <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
        </template>
    </gv:GridView.itemTemplates>
</gv:GridView>
\n
export function templateSelector(item: any, index: number, items: any) {
    return index % 2 === 0 ? \"even\" : \"odd\";
}
\n

Usage in Angular

\n

Import GridViewModule in your NgModule:

\n
import { GridViewModule } from 'nativescript-grid-view/angular';

@NgModule({
    //......
    imports: [
        //......
        GridViewModule,
        //......
    ],
    //......
})
\n

Example Usage

\n
// app.module.ts
import { GridViewModule } from \"nativescript-grid-view/angular\";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        GridViewModule,
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }
\n
<!-- my.component.html -->
<GridLayout class=\"page\">
  <GridView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
    <ng-template let-item=\"item\" let-odd=\"odd\">
      <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
      </StackLayout>
    </ng-template>
  </GridView>
</GridLayout>
\n

If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control.

\n
<GridView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
    <ng-template nsTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>

    <ng-template nsTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
        <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
        <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
        </StackLayout>
    </ng-template>
</GridView>
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-grid-view
$ cd nativescript-grid-view
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-outline-label":{"name":"@plmservices/nativescript-outline-label","version":"2.0.2","license":"Apache-2.0","readme":"

NativeScript Outlined Labels \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build\n\"Donate\"

\n

This plugin extends the NativeScript Label component to support outlined text.

\n

Outlined text is the only good way to ensure that you text will always be able to be clearly read regardless of what background is behind it, which becomes more important when your background is non-deterministic or moving (e.g. video).

\n

Prerequisites / Requirements

\n

None.

\n

Installation

\n
ns plugin add @plmservices/nativescript-outline-label
\n

Usage

\n

You must add the appropriate xmlns tag to your XML file, e.g.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:outlineLabel=\"@plmservices/nativescript-outline-label\" class=\"page\">
\n

Once that is done you can use the new outlineLabel tag in your XML, e.g.

\n
<outlineLabel:OutlineLabel text=\"CSS on Element\" />
\n

This can be styled via CSS on the OutlineLabel element, a class or an id, e.g. to set yellow text with a black outline

\n
OutlineLabel {
\tcolor: yellow;
\toutline: 4 black;
}
\n

Or it can be styled directly in the tag, e.g.

\n
<outlineLabel:OutlineLabel text=\"Outline in attribute\" color=\"yellow\" outline=\"4 red\" />
<outlineLabel:OutlineLabel text=\"Outline in style\" color=\"yellow\" style=\"outline: 4 green\" />
\n

TODO

\n\n

Donation

\n

If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

\n

\"Donate\"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telegram-image-picker":{"name":"nativescript-telegram-image-picker","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-telegram-image-picker/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Telegram-Image-Picker

\n

NativeScript plugin using the TelegramGallery Image Picker library for a customized image picker for Android.

\n

** ANDROID ONLY ** - this plugin uses a native Android library so there is no direct equivalent for iOS.

\n

\n

\"library

\n

License

\n

This plugin is licensed under the MITlicense by Brad Martin

\n

Installation

\n
tns plugin add nativescript-telegram-image-picker
\n

TypeScript

\n
import { openTelegramImagePicker, TelegramPickerResponse } from 'nativescript-telegram-image-picker';

public whateverYouLike() {
    
    // Open the Telegram Gallery Image Picker Activity      
    openTelegramImagePicker(5).then((resp: TelegramPickerResponse) => {
       // looping over the selected pictures in the response        
       for (var i = 0; i < resp.photos.length; i++) {
         console.log(resp.photos[i]);
       }
    })
      
}
\n

API

\n\n

TelegramPickerResponse -\n{\nphotos: Array,\nvideos: Array\n}

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-lifecycle-hooks":{"name":"nativescript-vue-lifecycle-hooks","version":"1.0.0","license":"MIT","readme":"

\"NPM\"

\n

\"npm

\n

NativeScript-Vue Lifecycle Hooks

\n

Install

\n
npm install nativescript-vue-lifecycle-hooks --save
\n

main.js

\n
import Vue from 'nativescript-vue'
import NSVueLifecycleHooks from 'nativescript-vue-lifecycle-hooks'

Vue.use(NSVueLifecycleHooks)
\n

Usage

\n

In any component that has Page element as child, you can use NativeScript page events with Vue lifecycle hooks style.

\n

So instead of this:

\n
<template>
    <Page @loaded=\"onLoaded\" @navigatingTo=\"onNavigatingTo\">
        <Label>Hello world</Label>
    </Page>
</template>

<script>
    export default {
        methods: {
            onLoaded(args){
                console.log('page is loaded.')
            },
            onNavigatingTo(args){
                console.log('page is navigating to.')
            }
        }
    }
</script>
\n

Use this:

\n
<template>
    <Page>
        <Label>Hello world</Label>
    </Page>
</template>

<script>
    export default {
        methods: {

        },
        loaded(args){
            console.log('page is loaded.')
        },
        navigatingTo(args){
            console.log('page is navigating to.')
        }
    }
</script>
\n

Available Lifecycle Hooks.

\n
<template>
    <Page>
        <Label>Hello world</Label>
    </Page>
</template>

<script>
    export default {
        // page is loaded.
        loaded(args) {
            console.log('loaded from page 2')
        },
        
        // page is unloaded.
        unloaded(args) {
            console.log('unloaded from page 2')
        },
        
        // when leaving a page (the navigation has ended).
        navigatedFrom(args) {
            console.log('navigatedFrom from page 2')
        },
        
        // when entering a page (the navigation has ended).
        navigatedTo(args) {
            console.log('navigatedTo from page 2')
        },
        
        // when leaving a page (the navigation has started).
        navigatingFrom(args) {
            console.log('navigatingFrom from page 2')
        },
        
        // when entering a page (the navigation has started)
        navigatingTo(args) {
            console.log('navigatingTo from page 2')
        }
    }
</script>
\n

Contributing

\n

Thanks for considering contributing.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oss-licenses":{"name":"nativescript-oss-licenses","version":"1.0.0","license":"MIT","readme":"

nativescript-oss-licenses

\n

\"Build

\n

This is a nativescript plugin to list up all of the oss licenses of native library.

\n

As for now, this plugin is only for android, and works only for native libraries.

\n

\"demo\"

\n

How to use

\n

1. Install this plugin

\n

Run this command in your project.

\n
tns plugin add nativescript-oss-licenses
\n

2. Modify local AndroidManifest.xml

\n

The library com.google.gms:oss-licenses prepares the activity which shows oss licenses in your project in handy.
\nIn order to use this feature, you have to modify <project-root>/app/App_Resources/Android/AndroidManifest.xml as follows.

\n
  <activity android:name=\"com.tns.ErrorReportActivity\"/>
+ <activity
+   android:theme=\"@style/Theme.AppCompat.Light.DarkActionBar\" 
+   android:name=\"com.google.android.gms.oss.licenses.OssLicensesActivity\"
+ />
+ <activity
+   android:theme=\"@style/Theme.AppCompat.Light.DarkActionBar\" 
+   android:name=\"com.google.android.gms.oss.licenses.OssLicensesMenuActivity\"
+ />
\n

3. Add some codes to start the activity which shows the oss licenses

\n
    startOSSLicenseActivity() {
        if (platformModule.isAndroid) {
            const ossLicensesMenuActivity = com.google.android.gms.oss.licenses.OssLicensesMenuActivity;
            const intent = new android.content.Intent(
              utils.ad.getApplicationContext(),
              ossLicensesMenuActivity.class
            );
            ossLicensesMenuActivity.setActivityTitle(\"TITLE\");
            application.android.foregroundActivity.startActivity(intent);
        }
    }
\n

License

\n

This project is licensed under the MIT License.

\n

References

\n

Including Open Source Notices

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-twitter":{"name":"nativescript-plugin-twitter","version":"2.0.8","license":"MIT","readme":"

Nativescript Twitter

\n

NativeScript implementation of Twitter SDK (Some Features)

\n

\"npm\"\n\"npm\"

\n

NS 3.0+

\n

tns plugin add nativescript-twitter

\n

NS < 3.0

\n

npm install nativescript-twitter@"^1.x"

\n

Example Implementation

\n

Android

\n
//app.ts or main.ts
import * as app from \"application\";
if (app.android) {
    const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
    TNSTwitter.init(\"key\", \"secret\");
}
\n

IOS

\n

Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

\n

In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

\n
// Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array
\n
//custom-app-delegate.ts
import * as utils from \"utils/utils\";
declare const UIResponder, UIApplicationDelegate, Twitter;
export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];
    applicationDidFinishLaunchingWithOptions(application, launchOptions) {
        utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
        return true;
    }
    applicationOpenURLOptions(application, url, options) {
        return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
    }
}
\n
//app.ts or main.ts
import * as app from \"application\";
if (app.ios) {
    app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
}
\n

IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

\n
<twitter:TNSTwitterButton id=\"twitter\"/>
\n

Listen when user auth is successful or fails

\n
import * as frame from \"ui/frame\";
 frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
        if (args.object.get(\"value\") === 'failed') {
            console.log(args.object.get(\"message\"))
        } else {
            TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                (user) => {
                    console.dump(user)
                }, err => {
                    console.dump(err)
                })
        }

    });
\n

Send api request

\n
import { CustomApiService } from \"nativescript-twitter\"
const api = new CustomApiService();
    api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
        .then(
        data => {
            console.log(data)
        }, err => {
            console.log(err.message)
        });
\n

Angular

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
\n
<TNSTwitterButton id=\"twitter\"/>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-global-drawer":{"name":"nativescript-vue-global-drawer","version":"1.2.0","license":"MIT","readme":"

\"NPM\"

\n

\"npm

\n

NativeScript-Vue Global Drawer

\n

A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project.

\n

Declare your drawer once and access it everywhere through your components.

\n

If you need one drawer over your App pages this for you.

\n

Install

\n
npm install nativescript-ui-sidedrawer --save
npm install nativescript-vue-global-drawer --save
\n

Usage

\n

In main.js

\n
import Vue from 'nativescript-vue'
import NSVueGlobalDrawer from 'nativescript-vue-global-drawer'

Vue.use(NSVueGlobalDrawer)

new Vue({
  render: h => h('frame', [h(App)])
}).$start()
\n

In App.vue, declare the global drawer.

\n
<template>
    <Page actionBarHidden=\"true\">
        <GlobalDrawer>
            <template slot=\"content\">
                <Label class=\"drawer-header\" text=\"Drawer\"/>
                <Label class=\"drawer-item\" text=\"Item 1\"/>
                <Label class=\"drawer-item\" text=\"Item 2\"/>
                <Label class=\"drawer-item\" text=\"Item 3\"/>
            </template>
            <template slot=\"frame\">
                <!--default page-->
                <Page1/>
            </template>
        </GlobalDrawer>
    </Page>
</template>
\n

API

\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
contentThe drawer content.
frameThe default drawer page that will appear in the beginning.
\n

Drawer methods

\n

Anywhere in your components you can call these methods to control the drawer behavior.

\n

.$drawer.open() : void

\n
\n

Open drawer.

\n
\n
<Button @tap=\"$drawer.open()\">Show</Button>
\n

.$drawer.close() : void

\n
\n

Close drawer.

\n
\n
<Button @tap=\"$drawer.close()\">Close</Button>
\n

.$drawer.toggle() : void

\n
\n

Toggle drawer.

\n
\n
<Button @tap=\"$drawer.toggle()\">Toggle</Button>
\n

.$drawer.enable() : void

\n
\n

Enable enable.

\n
\n
<Button @tap=\"$drawer.enable()\">Enable</Button>
\n

.$drawer.disable() : void

\n
\n

Disable drawer. This will disable gestures too.

\n
\n
<Button @tap=\"$drawer.disable()\">Disable</Button>
\n

.$drawer.setGestures(boolean) : void

\n
\n

Enable/Disable gestures.

\n
\n
<Button @tap=\"$drawer.setGestures(true)\">Enable Gestures</Button>
\n

.$drawer.getDrawer()

\n
\n

Get drawer instance.

\n
\n

.$drawer.getFrame()

\n
\n

Get drawer frame instance.

\n
\n

.$drawer.getStatus() : boolean

\n
\n

Get drawer status (enabled/disabled).

\n
\n

Navigation

\n

To navigate inside the drawer, you have to get the drawer frame instance to use in manual navigation.

\n

Example:

\n
this.$navigateTo(Page1, {
    transition: {},
    transitionIOS: {},
    transitionAndroid: {},
    
    props: {
      foo: 'bar',
    },
    frame: this.$drawer.getFrame()
})
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Event NameDescription
drawerOpenedthe drawer has been opened.
drawerOpeningthe drawer is about to open.
drawerClosedthe drawer has been closed.
drawerClosingthe drawer is about to close.
drawerPanthe drawer is being opened by its edge gesture.
\n

Contributing

\n

Thank you for considering contributing.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-trace-sentry":{"name":"nativescript-trace-sentry","version":"1.0.0","license":"MIT","readme":"

NativeScript Sentry TraceWriter \"apple\" \"android\"

\n

\"npm\"\n\"npm\"

\n

This plugin provides a custom NativeScript TraceWriter that will log messages to Sentry.io using the Official Sentry SDK for Browsers. This is useful for capturing trace messages in production from user iOS and Android devices.\nThis plugin is based on Todd Anglin's NativeScript Raven TraceWriter (https://github.com/toddanglin/nativescript-trace-raven) plugin which uses the depreacted (but supported) Raven.JS library for Sentry.

\n

Getting started

\n

To add the plug-in to a NativeScript project:

\n

tns plugin add nativescript-trace-sentry

\n

NOTE: To use this plug-in, a "DSN" key from Sentry.io is required. This key is used to initialize the plug-in and send logs to a specific Sentry.io project.

\n

Usage

\n

Once the plug-in is installed, simply initialize the new TraceWriter. This can be done in different ways, but for easy global usage, setup the new TraceWriter when then app starts:

\n

app.ts

\n
import * as app from 'application';
import * as trace from 'trace';
import { TraceSentry } from 'nativescript-trace-Sentry';

app.on(app.launchEvent, (args: app.ApplicationEventData) => {
    let sentryDsn = \"[YOUR SENTRY DSN KEY]\";

    trace.setCategories(trace.categories.concat(trace.categories.Error, trace.categories.Debug));
    trace.addWriter(new TraceSentry(sentryDsn));
    trace.enable();
});
\n

Then, in your app, just use trace as normal. The output will now be sent to Sentry.io.

\n

Example:

\n
trace.write(\"Something happened in the app\", trace.categories.Error, trace.messageType.error);
\n

NOTE: Sentry.io charges by log volume, so as a best practice, do not enable this custom TraceWriter during regular development

\n

In addition to the trace message, this plug-in will send these additional details to Sentry with each log:

\n\n

Log level

\n

Sentry.io provides three levels for classifying logs: info, warning and error.

\n

When logging using the TraceWriter and trace API, the trace.messageType is mapped to Sentry log levels:

\n\n

If trace.messageType is omitted, the default log level is error.

\n

Extended use

\n

When initializing Sentry, you can optionally provide an environment string to describe where the app is running when sending log messages. By default, this string is set to debug. If you want to specify your own environment string, just add it when initializing with your DSN key:

\n
trace.addWriter(new TraceSentry(sentryDsn, \"production\"));
\n

Logging Exceptions

\n

Unlike using trace to record an Error, the Sentry.captureException API will also attempt to include Stack Trace information with the log.

\n
import Sentry = require(\"Sentry-js\");

try { 
  throw new Error(\"This is an example error with stack trace\");
} catch (err) {
  Sentry.captureException(err);
}
\n

Adding Breadcrumbs

\n

You can manually create "breadcrumbs" that will be included with Sentry logs. Breadcrumbs are intended to show the path of actions that lead to an exception, app crash or log message. For example, to add a crumb when a button is tapped:

\n
public buttonTap(args: EventData) {
  let btn = <Button>args.object;
  Sentry.addBreadcrumb({
    message: `Button tapped`,
    category: \"action\",
    data: {
      id: btn.id,
      text: btn.text
    },
    level: Sentry.Severity.Info
  });
}
\n

Last EventId

\n

The EventId is a globally unique string generated by Sentry for all logs. Sentry provides the ability to get the EventId for the most recent log so that you can present it to users and use for customer service reports. To get the most recent EventId with Sentry:

\n
let eventId = Sentry.lastEventId();
\n

Considerations

\n

Sentry.io provides a generous free tier for logging events, but does eventually charge by logging volume. As a result, be careful to log only events that are helpful for troubleshooting in production.

\n

That means: do not use trace.categories.All when logging to Sentry

\n

This verbose logging will likely generate far more logs than needed, and quickly run-up your Sentry.io bill.

\n

Best practices:

\n
    \n
  1. Only log to Sentry in production
    2. \n
  2. Minimize the trace categories logged (minimum: trace.categories.Error)
    3. \n
\n

Native Errors

\n

Since this plug-in is running in the NativeScript JavaScript layer, it may not capture all native iOS or Android errors. This is generally okay as errors that relate to app code will be caught, but if native iOS/Android logging is needed, use a different plug-in like Firebase.

\n

Auto Breadcrumbs

\n

In addition to providing the custom TraceWriter, this plugin will automatically wire-up automatic breadcrumbs for these global Page events:

\n\n

Whenever one of these events occurs, a new breadcrumb will get added to the history. To disable this behavior, initialize TraceSentry with an additional parameter:

\n
new TraceSentry(\"[YOUR DSN KEY]\", \"production\", false)
\n

The last parameter will enable/disable auto-breadcrumbs created by this plug-in. Default is true (enabled).

\n

Using the Demo

\n

To try the demo for this plug-in, simply follow these steps:

\n
    \n
  1. Get a DSN key from Sentry.io
    2. \n
  2. Clone this repo
    3. \n
  3. Navigate to the demo folder and open app.ts in your code editor
    4. \n
  4. Replace the sentryDsn string with your DSN key
    5. \n
  5. Navigate back to the root of the cloned repo
    6. \n
  6. Run npm run demo.ios or npm run demo.android
    7. \n
\n

If the DSN key is not added before running the demo, the app will crash on launch.

\n

Contributing

\n

Want to help make this plug-in better? Report issues in GitHub:

\n

https://github.com/timdoege/nativescript-trace-sentry/issues

\n

Pull requests welcome.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitter-updated":{"name":"nativescript-twitter-updated","version":"22.0.4","license":"MIT","readme":"

Nativescript Twitter

\n

NativeScript implementation of Twitter SDK (Some Features)

\n

\"npm\"\n\"npm\"

\n

NS 3.0+

\n

tns plugin add nativescript-twitter

\n

NS < 3.0

\n

npm install nativescript-twitter@"^1.x"

\n

Example Implementation

\n

Android

\n
//app.ts or main.ts
import * as app from \"application\";
if (app.android) {
    const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
    TNSTwitter.init(\"key\", \"secret\");
}
\n

IOS

\n

Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

\n

In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

\n
// Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array
\n
//custom-app-delegate.ts
import * as utils from \"utils/utils\";
declare const UIResponder, UIApplicationDelegate, Twitter;
export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];
    applicationDidFinishLaunchingWithOptions(application, launchOptions) {
        utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
        return true;
    }
    applicationOpenURLOptions(application, url, options) {
        return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
    }
}
\n
//app.ts or main.ts
import * as app from \"application\";
if (app.ios) {
    app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
}
\n

IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

\n
<twitter:TNSTwitterButton id=\"twitter\"/>
\n

Listen when user auth is successful or fails

\n
import * as frame from \"ui/frame\";
 frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
        if (args.object.get(\"value\") === 'failed') {
            console.log(args.object.get(\"message\"))
        } else {
            TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                (user) => {
                    console.dump(user)
                }, err => {
                    console.dump(err)
                })
        }

    });
\n

Send api request

\n
import { CustomApiService } from \"nativescript-twitter\"
const api = new CustomApiService();
    api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
        .then(
        data => {
            console.log(data)
        }, err => {
            console.log(err.message)
        });
\n

Angular

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
\n
<TNSTwitterButton id=\"twitter\"/>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@patrick-nurt/nativescript-masked-text-field":{"name":"@patrick-nurt/nativescript-masked-text-field","version":"3.0.1","license":"Apache-2.0","readme":"

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-masked-text-field

\n

This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

\n

Instance Properties

\n\n

Usage

\n

You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
    <StackLayout>
        <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
    </StackLayout>
</Page>
\n

Usage in Angular

\n

In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

\n
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
// ......
@NgModule({
    // ......
    imports: [
        // ......
        MaskedTextFieldModule,
        // ......
    ],
    // ......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        MaskedTextFieldModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public value = \"\";
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-masked-text-field
$ cd nativescript-masked-text-field
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-store-update":{"name":"nativescript-store-update","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript-store-update

\n

\"npm\"\n\"npm\"

\n

\"NPM\"

\n

This plugin allows you to define a notification strategy regarding your app updates. You are able to specify if you want to force, offer or ignore an update based on the new version available in the platform store.

\n

For example, you could want to force all major version update, but offer the option to your user to chose to update or skip a minor or patch version.

\n

You can also specify how many days after the update release you want to display the alert.

\n

Prerequisites

\n

You need to add appversion plugins for this one to work:

\n
tns plugin add nativescript-appversion
\n

Installation

\n
tns plugin add nativescript-store-update
\n

Usage

\n

In your main.ts or app.ts file, before app start, call StoreUpdate.init with desired options like so:

\n
    import { StoreUpdate, AlertTypesConstants } from \"nativescript-store-update\";

    StoreUpdate.init({
        notifyNbDaysAfterRelease: 1,
        majorUpdateAlertType: AlertTypesConstants.OPTION
    })
\n

Localization

\n

The plugin contains some default translations inside json files located in src/i18n folder and required by hand in the src/helpers/locales.helper.ts file.\nYou can also specify a custom translation in the plugin initialization through the configuraiton options.\nIf you want to contribute a regionalized translation, you must use the lang-regionCode format specified in Apple doc, but with the country lowercased (ex: fr-ca, en-us)

\n

API

\n

Configuration options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
majorUpdateAlertTypeFORCEAlert type for major version change (e.g: A.b.c.d)
minorUpdateAlertTypeOPTIONAlert type for minor version change (e.g: a.B.c.d)
patchUpdateAlertTypeNONEAlert type for major version change (e.g: a.b.C.d)
revisionUpdateAlertTypeNONEAlert type for revision version change (e.g: a.b.c.D)
notifyNbDaysAfterRelease1Delays the update prompt by a specific number of days
countryCodeencountry store code
alertOptionsnullCustomize alert dialog text, bypasses the Locale json
\n

Alert types

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyValueDescription
FORCE1Show an alert that can't be skipped
OPTION2Show an alert that can be skipped
NONE3Don't display alert at all
\n

AlertOptions configuration (Optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
titleLocaleTextDialog title, fallback to the locale json
messageLocaleTextDialog body text, fallback to the locale json
updateButtonLocaleTextDialog update button, fallback to the locale json
skipButtonLocaleTextDialog skip button, fallback to the locale json
\n

Development

\n

Clone this repository, go in the src folder then run the command npm run setup\nYou can then use:

\n\n

The repo contains 2 demos folder, one with angular, and one without.\nDemos use the bundleId com.bitstrips.imoji as their App version contains Major, Minor and Patch numbers, and they update their app really often.\nYou can change parameters passed ton package init in main.ts or app.ts files and change app version in android app.gradle and ios info.plist config files to test the feature.

\n

License

\n

Apache License Version 2.0, January 2004

\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@la-corp/la-barcodescanner-lib-aar":{"name":"@la-corp/la-barcodescanner-lib-aar","version":"1.0.8","license":"MIT","readme":"

NativeScript BarcodeScanner

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Update note:

\n

This repo forked from [ https://github.com/EddyVerbruggen/nativescript-barcodescanner ] and update core module equivalent to Barcode Scanner app 4.7.8 latest release on February 25, 2019 which support Android SDK API level earlier than 22.

\n

Want a quick demo?

\n
\n

Note that running this only makes sense on a real device.

\n
\n
git clone https://github.com/quydau35/nativescript-barcodescanner barcodedemo
cd barcodedemo/src
\n

Fullscreen, programmatically (iOS and Android)

\n
npm run demo.android (or demo.ios / demo.ios.device)
\n

Embedded (iOS only)

\n
npm run demo-ng.ios (or demo.ios.device)
\n

Supported barcode types

\n

iOS and Android

\n\n

Android only

\n\n

iOS only

\n\n

A note about UPC_A and EAN_13

\n

When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add @la-corp/la-barcodescanner-lib-aar
\n

Embedding the scanner (iOS)

\n
\n

If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

\n
\n\n

As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

\n
\n

💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

\n
\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"@la-corp/la-barcodescanner-lib-aar\">
\n

Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

\n
<iOS>
    <Barcode:BarcodeScannerView
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      pause=\"{{ pause }}\"
      scanResult=\"{{ onScanResult }}\" />
</iOS>
\n

Embedding in Angular

\n

Component / Module:

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"BarcodeScanner\", () => require(\"@la-corp/la-barcodescanner-lib-aar\").BarcodeScannerView);
\n

View:

\n
<BarcodeScanner
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      [pause]=\"pause\"
      (scanResult)=\"onScanResult($event)\">
</BarcodeScanner>
\n

See 'demo-ng' for details. Do not run it for Android, because embedding a view is not supported on that platform.

\n

Embedding in Vue

\n

main.ts:

\n
Vue.registerElement('BarcodeScanner', () => require('@la-corp/la-barcodescanner-lib-aar').BarcodeScannerView)
\n

View:

\n
<BarcodeScanner
    row=\"1\"
    height=\"300\"
    formats=\"QR_CODE, EAN_13, UPC_A\"
    beepOnScan=\"true\"
    reportDuplicates=\"true\"
    preferFrontCamera=\"false\"
    :pause=\"pause\"
    @scanResult=\"onScanResult\"
    v-if=\"isIOS\">
</BarcodeScanner>
\n

See 'demo-vue' for details.

\n

iOS runtime permission reason

\n

You've probably seen a permission popup like this before (this plugin will trigger one as well, automatically):

\n\n

iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

\n

You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSCameraUsageDescription</key>
  <string>My reason justifying fooling around with your camera</string>
\n

To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

\n

Usage

\n

Tip: during a scan you can use the volume up/down buttons to toggle the torch.

\n

function: scan (single mode)

\n

TypeScript

\n
  import { BarcodeScanner } from \"@la-corp/la-barcodescanner-lib-aar\";
  let barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE, EAN_13\",
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
    openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
    presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
  }).then((result) => {
      // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
      alert({
        title: \"Scan result\",
        message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
        okButtonText: \"OK\"
      });
    }, (errorMessage) => {
      console.log(\"No scan. \" + errorMessage);
    }
  );
\n
\n

Note that result.format above is one of these.

\n
\n

JavaScript

\n
  var BarcodeScanner = require(\"@la-corp/la-barcodescanner-lib-aar\").BarcodeScanner;
  var barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
    openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
  }).then(
      function(result) {
        console.log(\"Scan format: \" + result.format);
        console.log(\"Scan text:   \" + result.text);
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: scan (bulk / continuous mode)

\n

In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

\n

The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

\n

Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

\n

JavaScript

\n
  var count = 0;
  barcodescanner.scan({
    formats: \"QR_CODE\",
    // this callback will be invoked for every unique scan in realtime!
    continuousScanCallback: function (result) {
      count++;
      console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
      if (count === 3) {
        barcodescanner.stop();
      }
    },
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
    reportDuplicates: false // which is the default
  }).then(
      function() {
        console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: available

\n

Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

\n

JavaScript

\n
  var barcodescanner = require(\"@la-corp/la-barcodescanner-lib-aar\");

  barcodescanner.available().then(
      function(avail) {
        console.log(\"Available? \" + avail);
      }
  );
\n

function: hasCameraPermission / requestCameraPermission

\n

On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

\n

On iOS 10+ there's something similar going on.

\n

Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

\n

JavaScript

\n
  barcodescanner.hasCameraPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestCameraPermission' now
        console.log(\"Has Camera Permission? \" + result);
      }
  );

  // if no permission was granted previously this wil open a user consent screen
  barcodescanner.requestCameraPermission().then(
      function() {
        console.log(\"Camera permission requested\");
      }
  );
\n

Usage with nativescript-angular

\n

You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

\n

So instead of:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@la-corp/la-barcodescanner-lib-aar';

@Component({ ... })
  export class MyComponent {
    constructor(private barcodeScanner: BarcodeScanner) {
  }

  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    this.barcodeScanner.scan({ ... });
  }
}
\n

Simply do:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@la-corp/la-barcodescanner-lib-aar';

@Component({ ... })
  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    new BarcodeScanner().scan({ ... });
  }
}
\n

Webpack usage

\n

If you run into an error when Webpacking, open app.module.ts and add this:

\n
import { BarcodeScanner } from \"@la-corp/la-barcodescanner-lib-aar\";

export function createBarcodeScanner() {
  return new BarcodeScanner();
}

providers: [
  { provide: BarcodeScanner, useFactory: (createBarcodeScanner) }
]
\n

Troubleshooting

\n

If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

\n
    \n
  1. Delete the app from your device
    2. \n
  2. Remove the folder platforms/android. This triggers a complete rebuild
    3. \n
  3. run tns run android
    4. \n
\n

Dependencies / Related Projects

\n

This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

\n

iOS

\n

Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

\n

Android

\n

ZXing: https://github.com/zxing/zxing/releases

\n

As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/quydau35/barcodescanner-lib-aar/

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow-ns-7":{"name":"nativescript-vue-shadow-ns-7","version":"10.1.0","license":"MIT","readme":"

Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
npm install nativescript-vue-shadow-ns-7
\n

Demo

\n

\"Screenshot\"

\n

How to use it

\n

This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the Directive into main.js

\n
import NSVueShadow from 'nativescript-vue-shadow-ns-7'
Vue.use(NSVueShadow)
\n

Use in your view or component

\n

Simple attribute for v-shadow:

\n
<Label v-shadow=\"2\"></Label>
\n

You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"myCustomData\"></Label>
\n

Then in your script tag you can do something like this where we bind to the object:

\n
import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow-ns-7\";
// ...
export default class MyComponent extends Vue {
  private myCustomData: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypeDefaultPlatformDescription
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"nativescript-vue-shadow-ns-7\";

export default class MyComponent extends Vue {
  // ...
  private elevation: number = Elevation.SNACKBAR;
  // ...
}
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

\n

This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow

\n\n

Changelog

\n\n

License

\n

MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nano-sql/adapter-sqlite-nativescript":{"name":"@nano-sql/adapter-sqlite-nativescript","version":"2.0.3","license":"MIT","readme":"

\n \n \"nanoSQL\n \n

\n

\n \n \"nanoSQL\n \n \n \"nanoSQL\n \n

\n

nanoSQL 2 SQLite NativeScript Adapter

\n

\n Allows you to run SQLite in NativeScript with nanoSQL 2\n

\n

Documentation | Bugs | Chat

\n

Includes all typings, runs in iOS or Android

\n

Installation

\n
tns plugin add @nano-sql/adapter-sqlite-nativescript
\n

Usage

\n
import { NativeSQLite } from \"@nano-sql/adapter-sqlite-nativescript\";
// MUST include nSQL from the lib path.
import { nSQL } from \"@nano-sql/core/lib/index\";

nSQL().createDatabase({
    id: \"my_db\",
    mode: new NativeSQLite(),
    tables: [...]
}).then(...)
\n

API

\n

The NativeSQLite class accepts one optional arguments in it's constructor.

\n

Filename

\n

The first argument is the filename to the SQLite database to connect to, default is to use the database ID as the filename.

\n

MIT License

\n

Copyright (c) 2019 Scott Lott

\n

Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:

\n

The above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.

\n

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.

\n

Changelog

\n

[2.0.2]

\n\n

[2.0.1]

\n\n

[2.0.0]

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@souriscloud/nativescript-bitmap-factory":{"name":"@souriscloud/nativescript-bitmap-factory","version":"2.0.0","license":{"type":"MIT","url":"https://github.com/souriscloud/nativescript-bitmap-factory/blob/master/LICENSE"},"readme":"

\"npm\"\n\"npm\"

\n

NativeScript Bitmap Factory

\n

A NativeScript module for creating and manipulating bitmap images.

\n

Forked

\n

This module is fork of nativescript-toolbox.\n\"Donate\"

\n

Usage

\n
import BitmapFactory = require(\"nativescript-bitmap-factory\");
import KnownColors = require(\"color/known-colors\");

// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);

// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
    // draw an oval with a size of 300x150
    // and start at position x=0, y=75
    // and use
    // \"red\" as border color and \"black\" as background color.
    bmp.drawOval(\"300x150\", \"0,75\",
                 KnownColors.Red, KnownColors.Black);
      
    // draw a circle with a radius of 80
    // at the center of the bitmap (null => default)
    // and use
    // \"dark green\" as border color           
    bmp.drawCircle(80, null,
                   KnownColors.DarkGreen);
                
    // draws an arc with a size of 100x200
    // at x=10 and y=20
    // beginning at angle 0 with a sweep angle of 90 degrees
    // and a black border and a yellow fill color    
    bmp.drawArc(\"100x200\", \"10,20\",
                0, 90,
                KnownColors.Black, KnownColors.Yellow);
                   
    // set a yellow point at x=160, y=150
    bmp.setPoint(\"160,150\", \"ff0\");
    
    // draws a line from (0|150) to (300|75)
    // with blue color
    bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
    
    // writes a text in yellow color
    // at x=100, y=100
    // by using \"Roboto\" as font
    // with a size of 10
    bmp.writeText(\"This is a test!\", \"100,100\", {
        color: KnownColors.Yellow,
        size: 10,
        name: \"Roboto\"
    });
    
    // returns the current bitmap as data URL
    // which can be used as ImageSource
    // in JPEG format with a quality of 75%
    var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and in Base64 format
    var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
    
    // ... and as ImageSource
    var imgSrc = bmp.toImageSource();
});
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
asBitmapReturns a value as wrapped bitmap.
createCreates a new bitmap instance.
getDefaultOptionsReturns the default options for creating a new bitmap.
makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
setDefaultOptionsSets the default options for creating a new bitmap.
\n

Platform specific stuff

\n

You can access the nativeObject property to access the platform specific object.

\n

For Android this is a Bitmap object and for iOS this is an UIImage object.

\n

To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

\n

Android

\n

You also can access the underlying Canvas object by __canvas property.

\n

iOS

\n

You also can access the underlying CGImage object by__CGImage property.

\n

Data types

\n

IArgb

\n

Stores data of an RGB value with alpha value.

\n

These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

\n
interface IArgb {
    /**
     * Gets the alpha value.
     */
    a: number;

    /**
     * Gets the red value.
     */
    r: number;

    /**
     * Gets the green value.
     */
    g: number;

    /**
     * Gets the blue value.
     */
    b: number;
}
\n

IBitmapData

\n

Used by toObject() method.

\n
interface IBitmapData {
    /**
     * Gets the data as Base64 string.
     */
    base64: string;

    /**
     * Gets the mime type.
     */
    mime: string;
}
\n

IFont

\n

Font settings.

\n
interface IFont {
    /**
     * Anti alias or not.
     */
    antiAlias?: boolean;

    /**
     * Gets the custom forground color.
     */
    color?: string | number | IArgb;
    
    /**
     * Gets the name.
     */
    name?: string;

    /**
     * Gets the size.
     */
    size?: number;
}
\n

IPoint2D

\n

Coordinates, can also be a string like 0,0 or 150|300.

\n
interface IPoint2D {
    /**
     * Gets the X coordinate.
     */
    x: number;
    
    /**
     * Gets the Y coordinate.
     */
    y: number;
}
\n

IPoint2D

\n

Size, can also be a string like 0,0 or 150x300.

\n
interface ISize {
    /**
     * Gets the height.
     */
    height: number;
    
    /**
     * Gets the width.
     */
    width: number;
}
\n

OutputFormat

\n

Supported output formats.

\n
enum OutputFormat {
    /**
     * PNG
     */
    PNG = 1,

    /**
     * JPEG
     */
    JPEG = 2,
}
\n

Bitmap

\n
interface IBitmap {
    /**
     * Get the android specific object provided by 'application' module.
     */
    android: AndroidApplication;

    /**
     * Clones that bitmap.
     */
    clone(): IBitmap;

    /**
     * Crops that bitmap and returns its copy.
     */
    crop(leftTop?: IPoint2D | string,
         size?: ISize | string): IBitmap;

    /**
     * Gets or sets the default color.
     */
    defaultColor: IPoint2D | string | number;

    /**
     * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
     */
    dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                        tag?: T): TResult;

    /**
     * Draws a circle.
     */
    drawCircle(radius?: number,
               center?: IPoint2D | string,
               color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws an arc.
     */
    drawArc(size?: ISize | string,
            leftTop?: IPoint2D | string,
            startAngle?: number,
            sweepAngle?: number,
            color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a line.
     */
    drawLine(start: IPoint2D | string, end: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Draws an oval circle.
     */
    drawOval(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Draws a rectangle.
     */
    drawRect(size?: ISize | string,
             leftTop?: IPoint2D | string,
             color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

    /**
     * Gets the color of a point.
     */
    getPoint(coordinates?: IPoint2D | string): IArgb;

    /**
     * Gets the height of the bitmap.
     */
    height: number;

    /**
     * Get the iOS specific object provided by 'application' module.
     */
    ios: iOSApplication;

    /**
     * Inserts another image into that bitmap.
     */
    insert(other: any,
           leftTop?: IPoint2D | string): IBitmap;
    
    /**
     * Gets if the object has been disposed or not.
     */
    isDisposed: boolean;

    /**
     * Gets the native platform specific object that represents that bitmap.
     */
    nativeObject: any;

    /**
     * Normalizes a color value.
     */
    normalizeColor(value: string | number | IArgb): IArgb;

    /**
     * Creates a copy of that bitmap with a new size.
     */
    resize(newSize: ISize | string): IBitmap;

    /**
     * Resizes that image by defining a new height by keeping ratio.
     */
    resizeHeight(newHeight: number): IBitmap;

    /**
     * Resizes that image by defining a new (maximum) size by keeping ratio.
     */
    resizeMax(maxSize: number): IBitmap;

    /**
     * Resizes that image by defining a new width by keeping ratio.
     */
    resizeWidth(newWidth: number): IBitmap;

    /**
     * Rotates the image.
     */
    rotate(degrees?: number): IBitmap;

    /**
     * Sets a pixel / point.
     */
    setPoint(coordinates?: IPoint2D | string,
             color?: string | number | IArgb): IBitmap;

    /**
     * Gets the size.
     */
    size: ISize;

    /**
     * Converts that image to a Base64 string.
     */
    toBase64(format?: OutputFormat, quality?: number): string;

    /**
     * Converts that image to a data URL.
     */
    toDataUrl(format?: OutputFormat, quality?: number): string;

    /**
     * Returns that image as ImageSource.
     */
    toImageSource(): ImageSource;

    /**
     * Converts that image to an object.
     */
    toObject(format?: OutputFormat, quality?: number): IBitmapData;

    /**
     * Writes a text.
     */
    writeText(txt: any,
              leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

    /**
     * Gets the width of the bitmap.
     */
    width: number;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"symlink-resolver-fork":{"name":"symlink-resolver-fork","version":"0.2.1-fork.1","license":"MIT","readme":"

Symlink Resolver

\n

This tool allows to replace symbolic links by real files in given directory and revert the changes back to symlinks. All the magic in a simple cli command!

\n

Installation

\n
npm install symlink-resolver --save-dev
\n

Node.js v6.4+ and POSIX-standarized operating system are required.

\n

To your package.json scripts section add the following rule:

\n
\"scripts\": {
    \"symlink-resolver\": \"symlink-resolver\",
}
\n

Basic Usage

\n

For fast usage you can simply run:

\n\n

First command will create ./symlinks/path/.symlinks.json file which contains changes that have been made in this directory. It will be removed by the second command, however you can still add to your .gitignore the following rule: .symlinks.json

\n
How to create a symlink?
\n

Use ln -s target source command, i.e.:

\n
ln -s ../../source/path/linked-dir ./project/src/linked-dir
\n

Advanced usage

\n

If you need this feature to make a build, then I strongly recommend to automatize your building process:

\n
\"scripts\": {
        \"symlink-resolver\": \"symlink-resolver\",
        \"prebuild\": \"npm run symlink-resolver build ./symlinks/path\",
        \"postbuild\": \"npm run symlink-resolver clear ./symlinks/path\",
        \"build\": \"your build command should be under this name\"
}
\n

This way you will be able to make a build and edit your files without worries.

\n

However, in some cases like emulating a device, the "post" script will not be executed. If this is also your case then take a look at example workaround for NativeScript:

\n
  \"scripts\": {
    \"symlink-resolver\": \"symlink-resolver\",
    \"prens-bundle\": \"npm run symlink-resolver build ./symlinks/path\",
    \"delay-clear\": \"sleep 22 && npm run symlink-resolver clear ./symlinks/path\",
    \"ns-bundle\": \"npm run delay-clear | ns-bundle\",
    \"start-android-bundle\": \"npm run ns-bundle --android --start-app\",
    \"start-ios-bundle\": \"npm run ns-bundle --ios --start-app\",
    \"build-android-bundle\": \"npm run ns-bundle --android --build-app\",
    \"build-ios-bundle\": \"npm run ns-bundle --ios --build-app\"
  },
\n

Advanced configuration

\n

You can adjust Config to your needs.

\n\n
export interface ConfigInterface {
    rootDir: string;
    symlinksFile: string;
    helperClass: typeof SymlinkHelper;
}
\n
Happy developing!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-social-login":{"name":"@martinbuezas/nativescript-social-login","version":"3.0.4","license":"Apache-2.0","readme":"

NativeScript Social Login

\n

Authenticate users using Facebook and Google sign in.

\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Installation

\n
tns plugin add @martinbuezas/nativescript-social-login
\n

Android Configuration

\n

Strings.xml

\n

Add your Facebook App ID to App_Resources/Android/src/main/res/values/strings.xml - If the file doesn't exist, create it and don't forget to add you app's name and kimera title.

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
  <string name=\"app_name\">{{ YOUR_APP_NAME }}</string>
  <string name=\"title_activity_kimera\">{{ YOUR_APP_NAME }}</string>
  <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
  <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>
\n

AndroidManifest.xml

\n
    \n
  1. Add the xmlns:tools="http://schemas.android.com/tools" namespace to your <manifest> tag.
    2. \n
  2. Check the required permissions
    3. \n
  3. Add the Facebook configuration in the <application> section of the manifest
    4. \n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest
  xmlns:android=\"http://schemas.android.com/apk/res/android\"
  xmlns:tools=\"http://schemas.android.com/tools\"
  >

    <!-- 2. Permission -->
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

    <application>
      <!-- 3. Facebook config -->
      <meta-data
        android:name=\"com.facebook.sdk.ApplicationId\"
        android:value=\"@string/facebook_app_id\"
      />
      <activity
        android:name=\"com.facebook.FacebookActivity\"
        android:configChanges=\"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
        tools:replace=\"android:theme\"
        android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
        android:label=\"@string/app_name\"
      />
      <activity
        android:name=\"com.facebook.CustomTabActivity\"
        android:exported=\"true\"
      >
        <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" />
          <data android:scheme=\"@string/fb_login_protocol_scheme\" />
        </intent-filter>
      </activity>
  </application>
</manifest>
\n

Setup Android Google Sign in for Debug Builds

\n
    \n
  1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
    2. \n
\n
keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
\n

The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

\n
    \n
  1. Create an app here on Google Developer site.\n
      \n
    • Enter the App name. This can be anything but it will display to the user who is authenticating.
      • \n
    • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
      • \n
    • Next configure the Google services.
      • \n
    • Select Google Sign-In
      • \n
    • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
      • \n
    • Enable Google Sign-In\n
        \n
      • If only enabling Google Sign-In you do not need the configuration file inside your application.
        • \n
      \n
      • \n
    \n
    2. \n
  2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
    3. \n
\n

iOS Configuration

\n

Info.plist

\n

Add your Facebook App ID and your Reversed Client ID to app/App_Resources/iOS/Info.plist

\n
<dict>
  <!-- ... -->

  <!-- FACEBOOK AND GOOGLE LOGIN start -->
  <key>FacebookAppID</key>
  <string>{{ YOUR_FACEBOOK_APP_ID }}</string>
  <key>FacebookDisplayName</key>
  <string>{{ YOUR_FACEBOOK_DISPLAY_NAME }}</string>
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <!-- Get it from your GoogleService-Info.plist -->
        <string>{{ REVERSED_CLIENT_ID }}</string>
      </array>
    </dict>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb{{ YOUR_FACEBOOK_APP_ID }}</string>
      </array>
    </dict>
  </array>
  <!-- FACEBOOK AND GOOGLE LOGIN end -->
</dict>
\n

API

\n

requiring / importing the plugin

\n
import { SocialLogin } from \"@martinbuezas/nativescript-social-login\";

export class MyClass {
  private sl: SocialLogin = SocialLogin.getInstance();
}
\n

loginWithGoogle()

\n
this.sl.loginWithGoogle({
    iosClientId: GOOGLE_IOS_CLIENT_ID,
    serverClientId: GOOGLE_SERVER_CLIENT_ID,
  })
  .then((result) => console.log(\"USER\", result))
  .catch((error) => console.log(\"ERROR\", error));
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
requestServerAuthCodefalseRequest an "offline" code that a server can use to exchange for a new Auth Token
iosClientIdundefinedRequired for iOS
serverClientIdundefinedRequired for Android
Required for iOS (and Android) when requesting server auth code.
\n

loginWithFacebook

\n
this.sl.loginWithFacebook({
    scopes: [\"profile\", \"email\"]
  })
  .then((result) => console.log(\"USER\", result))
  .catch((error) => console.log(\"ERROR\", error));
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
scopes["profile", "email"]NOTE: Additional scopes haven't been tested
\n

License

\n

Apache License Version 2.0, January 2004

\n

To-do

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-plugin-seed":{"name":"nativescript-ng2-plugin-seed","version":"1.0.0","license":"MIT","readme":"

Develop a nativescript-angular plugin now

\n

\"Angular\n\"MIT\n\"Dependency

\n\n\n\n\n\n\n\n\n\n\n\n
\"Demo\"
Android and iPhone running the same {N} + Angular2 plugin.
\n

The seed is setup to allow you to create a nativescript-angular plugin quickly.

\n\n

Get started

\n
    \n
  1. Download a zip of this seed.
    2. \n
  2. cd ... path/to/unzip/folder ...
    3. \n
  3. npm install -g typescript
    4. \n
  4. npm install -g nativescript
    5. \n
  5. npm install
    6. \n
  6. npm run setup
    7. \n
  7. Get to work.
    8. \n
\n

Changes needed

\n

You will want to change a couple things for your plugin.

\n
    \n
  1. Replace all instances of nativescript-ng2-yourplugin with name of your plugin:
    2. \n
\n\n
    \n
  1. Modify the demo to import your plugin files, etc: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/app/app.ts#L10-L15
    2. \n
\n

Develop Workflow

\n

Make changes to plugin files, then:

\n
npm run demo.ios

// or...

npm run demo.android
\n

Build Plugin

\n

You'll want to run this before publishing.

\n
npm run build
\n

VERY IMPORTANT: You need to modify package.json for your plugin. Most likely, you will want to remove 3 sections completely: scripts, dependencies, and devDependencies as those are setup for the demo. When publishing, it's important to ensure no unnecessary scripts or dependencies are installed when comsumers use your plugin. You can add those sections back after publishing.

\n

Testing

\n

Work in progress. Coming soon.

\n
npm test
\n

Troubleshooting

\n

When preparing your demo if you get the following error message:

\n
Plugin \"nativescript-ng2-yourplugin\" is not installed.
Sending exception report (press Ctrl+C to stop).....
\n

This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"generator-nativescript-plugin":{"name":"generator-nativescript-plugin","version":"1.0.4","license":"MIT","readme":"

generator-nativescript-plugin \"NPM \"Dependency \"npm\"

\n
\n

Generator for nativescript-plugin projects

\n
\n

Installation

\n

First, install Yeoman and generator-nativescript-plugin using npm (we assume you have pre-installed node.js).

\n
npm install -g yo
npm install -g generator-nativescript-plugin
\n

Then generate your new project:

\n
//to generate a normal nativescript + typescript plugin
yo nativescript-plugin

//to generate a nativescript + angular2 plugin 
yo nativescript-plugin:ng2
\n

Getting To Know Yeoman

\n\n

License

\n

MIT © PeopleWare

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-http":{"name":"@testjg/nativescript-http","version":"1.1.1","license":"Apache-2.0","readme":"

@testjg/nativescript-http

\n

\"npm

\n

Http helper lib. Under the hood it uses okhttp (v3) for Android and NSURLSession for iOS.

\n

Has peer dependencies on url-join and rxjs.

\n

Installation

\n
ns plugin add @testjg/nativescript-http
\n

Usage

\n
import { createHttp, forRelativeUrl } from '@testjg/nativescript-http';
import { firstValueFrom } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';

export class TodosService {
  http = createHttp('https://jsonplaceholder.typicode.com');
  todos = forRelativeUrl('todos', this.http);

  fetchTodo(id: number) {
    const json$ = this.todos
      .request({
        method: 'GET',
        url: `${id}`,
        headers: { 'Accept-Language': ['ca', 'en'] },
      })
      .pipe(
        switchMap((res) => res.json()),
        catchError((error) => null)
      );

    return firstValueFrom(json$);
  }
}
\n

Pro tip: Use functions like jsonBody or multiPartBody to create the appropiate request content.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ui-base":{"name":"@nativescript/ui-base","version":"7.0.0-rc.0","license":"Apache-2.0","readme":"

NativeScript Core Modules Widgets

\n

\"Build

\n

This library represents native code (Java and Objective-C) used by the NativeScript core modules.

\n

NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

\n\n\n\n

Contribute

\n

We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-filepicker":{"name":"@testjg/nativescript-filepicker","version":"1.0.3","license":"Apache-2.0","readme":"

@testjg/nativescript-filepicker

\n

\"npm

\n

Installation

\n
ns plugin add @testjg/nativescript-filepicker
\n

Usage

\n

You should ask for permissions first. And wrap it in your preferred async option.

\n
// `result` can be null.
const result = await showFilePicker();
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-shortcuts":{"name":"nativescript-app-shortcuts","version":"3.0.0","license":"MIT","readme":"

NativeScript Icon Shortcuts plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

\n

Supported platforms

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n

NativesScript 7.x

\n
tns plugin add nativescript-app-shortcuts
\n

NativesScript 6.x

\n
tns plugin add nativescript-app-shortcuts@2.2.0
\n

Demo app (XML & TypeScript)

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

API

\n

available

\n

Check whether or not the device is capable.\nAndroid devices will also report false, so you can use this cross platform.

\n
JavaScript
\n
// require the plugin
var AppShortcuts = require(\"nativescript-app-shortcuts\").AppShortcuts;

// instantiate the plugin
var appShortcuts = new AppShortcuts();

appShortcuts.available().then(
  function(available) {
    if (available) {
      console.log(\"This device supports app shortcuts\");
    } else {
      console.log(\"No app shortcuts capability, ask the user to upgrade :)\");
    }
  }
);
\n
TypeScript
\n
// require the plugin
import { AppShortcuts } from \"nativescript-app-shortcuts\";

// instantiate the plugin
let appShortcuts = new AppShortcuts();

appShortcuts.available().then(available => {
  if (available) {
    console.log(\"This device supports app shortcuts\");
  } else {
    console.log(\"No app shortcuts capability, ask the user to upgrade :)\");
  }
});
\n

configureQuickActions

\n

When your app is running you can add those fancy Quick Actions to the Home Screen icon. You can configure up to four icons and they are 'cached' by iOS until you pass in a new set of icons. So you don't need to do this every time your app loads, but it can't really hurt of course.

\n

The type param (see the code sample below) is the most convenient way to relate the icon to the event you'll receive when the action was used to launch your app. So make sure it's unique amongst your icons.

\n

There are two types of icons currently supported: iconType and iconTemplate.

\n

iconType (iOS)

\n

A value from a fixed list of icons which have been provided by Apple and look great (click the value in the 'API' column to look up the Objective-C name, and look at the sample below how to use them).

\n

iconTemplate

\n

Can be used to provide your own icon. It must be a valid name of an icon template in your Assets catalog. NativeScript allows you to add the icon to the app/App_Resources/<platform> folder. If you add a file called beer.png then reference it as beer. More on these images below when we discuss static actions.

\n

Ignored on iOS, if iconType is set as well.

\n
TypeScript
\n
import { AppShortcuts } from \"nativescript-app-shortcuts\";
import { isIOS } from \"tns-core-modules/platform\";

let appShortcuts = new AppShortcuts();

appShortcuts.configureQuickActions([
  {
    type: \"capturePhoto\",
    title: \"Snag a pic\",
    subtitle: \"You have 23 snags left\", // iOS only
    iconType: isIOS ? UIApplicationShortcutIconType.CapturePhoto : null,
    iconTemplate: \"eye\" // ignored by iOS, if iconType is set as well
  },
  {
    type: \"beer\",
    title: \"Beer-tastic!\",
    subtitle: \"Check in & share\", // iOS only
    iconTemplate: \"beer\"
  }
]).then(() => {
  alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
}, (errorMessage) => {
  alert(errorMessage);
});
\n

Capturing the Action

\n

When a home icon is pressed, your app launches. You probably want to perform different actions based on the home icon action\nthat was picked (like routing to a different page), so you need a way to capture the event.

\n

NativeScript with XML

\n

In a non-Angular NativeScript app we need to extend app.js or app.ts and import the plugin,\nthen call the setQuickActionCallback function. So in case of app.ts change it from something like this:

\n
import * as application from \"tns-core-modules/application\";
application.start({ moduleName: \"main-page\" });
\n

To this:

\n
import * as application from \"tns-core-modules/application\";

// import the plugin
import { AppShortcuts } from \"nativescript-app-shortcuts\";

// instantiate it and call setQuickActionCallback
new AppShortcuts().setQuickActionCallback(shortcutItem => {
  console.log(`The app was launched by shortcut type '${shortcutItem.type}'`);

  // this is where you handle any specific case for the shortcut
  if (shortcutItem.type === \"beer\") {
    // this is an example of 'deeplinking' through a shortcut
    let frames = require(\"ui/frame\");
    // on Android we need a little delay
    setTimeout(() => {
      frames.topmost().navigate(\"beer-page\");
    });
  } else {
    // .. any other shortcut handling
  }
});

application.start({ moduleName: \"main-page\" });
\n

NativeScript with Angular

\n

If you're using Angular, the best place to add the handler is in app.module.ts,\nand use NgZone to help Angular knowing about the route change you're performing:

\n
import { NgZone } from \"@angular/core\";
import { isIOS } from \"tns-core-modules/platform\";
import { RouterExtensions } from \"nativescript-angular\";
import { AppShortcuts } from \"nativescript-app-shortcuts\";

export class AppModule {
  constructor(private routerExtensions: RouterExtensions,
              private zone: NgZone) {

    new AppShortcuts().setQuickActionCallback(shortcutItem => {
  console.log(`The app was launched by shortcut type '${shortcutItem.type}'`);

      // this is where you handle any specific case for the shortcut, based on its type
      if (shortcutItem.type === \"page1\") {
        this.deeplink(\"/page1\");
      } else if (shortcutItem.type === \"page2\") {
        this.deeplink(\"/page2\");
      }
    });
  }

  private deeplink(to: string): void {
    this.zone.run(() => {
      this.routerExtensions.navigate([to], {
        animated: false
      });
    });
  }
}
\n

Configuring Static Actions

\n

With configureQuickActions you can configure dynamic actions,\nbut what if you want actions to be available immediately after the app as installed from the store?

\n

iOS

\n

You need to manually edit the .plist.\nFortunately NativeScript allows you to change this file through app/App_Resources/iOS/Info.plist. Anything added there is added to the final .plist during a build.

\n

Note that dynamic actions will never replace static actions, so if you have two static actions you can add up to two dynamic ones. Any more will be ignored.

\n

Here's an example which you can paste anywhere in the .plist file:

\n
<key>UIApplicationShortcutItems</key>
<array>
  <dict>
    <key>UIApplicationShortcutItemIconFile</key>
    <string>Eye</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Eye from plist</string>
    <key>UIApplicationShortcutItemSubtitle</key>
    <string>Awesome subtitle</string>
    <key>UIApplicationShortcutItemType</key>
    <string>eyefromplist</string>
  </dict>
  <dict>
    <key>UIApplicationShortcutItemIconType</key>
    <string>UIApplicationShortcutIconTypeCompose</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Compose</string>
    <key>UIApplicationShortcutItemType</key>
    <string>compose</string>
  </dict>
</array>
\n

UIApplicationShortcutItemIconFile

\n

The second action above uses the built-in UIApplicationShortcutIconTypeCompose icon, but the first one uses a custom icon: Eye. This expects the file app/App_Resources/iOS/Eye.png. According to Apple's docs this needs to be a single color, transparent, square, 35x35 icon - but that size will look pixelated on retina devices so go ahead and use a 70x70 or 105x105 icon if you please.

\n

UIApplicationShortcutItemTitle / UIApplicationShortcutItemSubtitle

\n

You can guess what those do, right? Only the title is mandatory.

\n

UIApplicationShortcutItemType

\n

This is the same as the type param of configureQuickActions, so it's what you'll receive in the callback you may have configured in app.js / app.ts as payload.type. Just do something cool with that info (like routing to a specific page and loading some content).

\n

Android

\n

Open app/App_Resources/Android/AndroidManifest.xml and add:

\n
<activity ..> <!-- your existing NativeScript activity -->
  <meta-data android:name=\"android.app.shortcuts\"
             android:resource=\"@xml/shortcuts\" />
</activity>
\n

Add the file you referenced in AndroidManifest.xml: /app/App_Resources/Android/xml/shortcuts.xml and add:

\n
<shortcuts xmlns:android=\"http://schemas.android.com/apk/res/android\">
  <shortcut
      android:shortcutId=\"compose\"
      android:enabled=\"true\"
      android:icon=\"@drawable/add\"
      android:shortcutShortLabel=\"@string/shortcut_short_label1\"
      android:shortcutLongLabel=\"@string/shortcut_long_label1\"
      android:shortcutDisabledMessage=\"@string/shortcut_disabled_message1\">
    <intent
        android:action=\"shortcut.type.compose\"
        android:targetPackage=\"org.nativescript.plugindemo.appshortcuts\"
        android:targetClass=\"com.tns.NativeScriptActivity\"/>
    <categories android:name=\"android.shortcut.conversation\"/>
  </shortcut>
</shortcuts>
\n

A few notes:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-social-share":{"name":"@nativescript-community/ui-social-share","version":"1.7.1","license":"Apache-2.0","readme":"

NativeScript Social Share Plugin

\n

A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

\n

\"\"\n\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-social-share
\n

This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");
var imageSourceModule = require(\"image-source\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
import { ImageSource } from \"image-source\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\");
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText(\"I love NativeScript!\");
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zeepay-trustpayment":{"name":"nativescript-zeepay-trustpayment","version":"0.0.25","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@van-hung/nativescript-segment":{"name":"@van-hung/nativescript-segment","version":"1.1.0","license":"Apache-2.0","readme":"

Nativescript-Segment

\n

A NativeScript plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

\n\n

Installation

\n
tns plugin add nativescript-segment
\n

For access to the native SDK type definitions, specify the definitions in your references.d.ts

\n
/// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
/// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
\n

Warning: Depending on your project structure, the paths shown above may be inaccurate.

\n

Usage

\n

Example

\n

All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

\n
const config: SegmentConfig = {
    trackLifeCycleEvents: true,
    recordScreenViews: true
};
Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
\n
import { Segment } from 'nativescript-segment';

public someInteraction(type: string) {
    Segment.track(type);
}
\n

For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

\n
// iOS
Segment.ios.track('some event');

// Android
Segment.android.track('some event');
\n

Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

\n

Platform specifics

\n

Android

\n

Requires the internet permission if not already enabled in your app.

\n
<uses-permission android:name=\"android.permission.INTERNET\"/>
\n

iOS best practice

\n

In your application's delegate:

\n
import { Segment } from 'nativescript-segment';

public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
    const config = {
        setDebug: true; // set to show full debug logging by the native APIs
    }
    Segment.configure(key, config);
    return true;
}
\n

API

\n

configure

\n
const config: SegmentConfig = {
    trackLifeCycleEvents: true,
    recordScreenViews: true
};
Segment.configure('your segment write key', config);
\n

SegmentConfig Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
recordScreenViewstrueenable or disable auto tracking of screen views
optionsDefault integration options, see SegmentOptions
proxyUrlnullforward all Segment calls through a proxy
setLoggingfalseset base INFO logging in Android SDK and plugin itself
setDebugfalseSets full debug logging in Android and iOS
middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
\n

SegmentOptions Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
useAlltrueenables all integrations (default for Segment SDKs)
excluded[]exclude Segment from integrating with the specified services
included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
\n

identify

\n

Identify the current user. Additional traits are supported, and custom traits are available.

\n
const traits: SegmentTraits = {
    firstName: 'Dave',
    email: 'dave@domain.com'
};
const customTraits: any {
    favoriteColor: 'blue'
};
Segment.identify('userId', traits, customTraits);
\n

SegmentTraits Properties (all optional)

\n

Please see Segment's official spec for all available traits and their descriptions.

\n

track

\n

Track an event.

\n
Segment.track('Some event');

const properties = {
    productName: 'Bread',
    revenue: 4
};
Segment.track('Product Purchased', properties);
\n

Please see Segment's official spec for details on properties to add to track calls.

\n

screen

\n

Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

\n
Segment.screen('signup', 'verify password');
\n

Please see Segment's official spec for details on screen calls.

\n

group

\n

Associate current user with a group. A user can belong to multiple groups.

\n
Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
  name: \"Initech\", 
  industry: \"Technology\",
  employees: 329, 
  plan: \"enterprise\", 
  \"total billed\": 830
});
\n

Please see Segment's official spec for details on group calls.

\n

alias

\n

alias is how you associate one identity with another.

\n
Segment.alias(newId);
\n

Please see Segment's official spec for details on alias calls.

\n

optout

\n

Disables or enables all analytics, remains set throughout app restarts.

\n
Segment.optOut(true);
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dark-engine/native-navigation":{"name":"@dark-engine/native-navigation","version":"0.25.1","license":"MIT","readme":"

@dark-engine/native-navigation 🌖

\n

Dark navigation for NativeScript platform.

\n

More about Dark\n
\nMore about NativeScript

\n

Installation

\n

npm:

\n
npm install @dark-engine/native-navigation
\n

yarn:

\n
yarn add @dark-engine/native-navigation
\n

API

\n
import {
  type NavigationOptions,
  NavigationContainer,
  StackNavigator,
  TabNavigator,
  TransitionName,
  useNavigation,
} from '@dark-engine/native-navigation';
\n

Usage

\n

In order to use navigation, you need to wrap the application root in a NavigationContainer and pass a defaultPathname to it, which will display the selected screen when the application starts. Inside this container, you must place the selected navigator and describe the collection of screens for navigation. Each screen must have a name and a component to be rendered.

\n

Navigation via StackNavigator

\n

StackNavigator is the main navigation method that implements the logic of changing screens.

\n
import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';
\n
const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Feed' component={Feed} />
        <StackNavigator.Screen name='Friends' component={Friends} />
        <StackNavigator.Screen name='Profile' component={Profile} />
        <StackNavigator.Screen name='Settings' component={Settings} />
      </StackNavigator.Root>
    </NavigationContainer>
  );
});
\n

Navigation via TabNavigator

\n

The TabNavigator is a wrapper around the StackNavigator that displays tab buttons at the bottom to control screens. Using the StackNavigator wrapping approach, you can also implement a navigation strategy through a Drawer or Modal.

\n
import { NavigationContainer, TabNavigator } from '@dark-engine/native-navigation';
\n
const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <TabNavigator.Root>
        <TabNavigator.Screen name='Feed' component={Feed} />
        <TabNavigator.Screen name='Friends' component={Friends} />
        <TabNavigator.Screen name='Profile' component={Profile} />
        <TabNavigator.Screen name='Settings' component={Settings} />
      </TabNavigator.Root>
    </NavigationContainer>
  );
});
\n

You can customize Tabs view through passing bottomNavigationOptions to TabNavigator.Root and renderTab to TabNavigator.Screen to render tabs with icons.

\n

Navigating to screen

\n

To navigate to a new screen, you need to use the navigateTo method, which provided by the useNavigation hook.

\n
import { useNavigation } from '@dark-engine/native-navigation';
\n
const { navigateTo } = useNavigation();

return (
  <StackLayout>
    <Button onTap={() => navigateTo('/Dashboard')}>Dashboard</Button>
  </StackLayout>
);
\n

The method supports passing NavigationOptions, which include a parameter for the new screen, as well as a flag to enable support for animated transitions.

\n
import { CoreTypes } from '@nativescript/core';
import { useNavigation, TransitionName } from '@dark-engine/native-navigation';
\n
navigateTo('/Profile', {
  params: { id: 25 },
  animated: true,
  transition: {
    curve: CoreTypes.AnimationCurve.easeInOut,
    name: TransitionName.slide,
    duration: 200,
  }
});
\n

Back navigation

\n
const { goBack } = useNavigation();

return (
  <StackLayout>
    <Button onTap={() => goBack()}>back</Button>
  </StackLayout>
);
\n

Access to params

\n
const { params } = useNavigation();
const id = Number(params.get('id'));

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
    .then(x => x.json())
    .then(x => setAlbum(x));
}, [id]);
\n

Nested screens

\n

You can nest navigators to create nested screens like /Home/Dashboard, /Home/Profile and so on.

\n
const Home = component(() => {
  return (
    <StackLayout height='100%'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Dashboard' component={Dashboard} />
        <StackNavigator.Screen name='Profile' component={Profile} />
      </StackNavigator.Root>
    </StackLayout>
  );
});

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Home/Dashboard'>
      <TabNavigator.Root>
        <TabNavigator.Screen name='Home' component={Home} />
        <TabNavigator.Screen name='Settings' component={Settings} />
        <TabNavigator.Screen name='Contacts' component={Contacts} />
      </TabNavigator.Root>
    </NavigationContainer>
  );
});
\n

LICENSE

\n

MIT © Alex Plex

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digital-sustainability/nativescript-app-auth":{"name":"@digital-sustainability/nativescript-app-auth","version":"1.0.5","license":"Apache-2.0","readme":"

@digital-sustainability/nativescript-app-auth

\n
ns plugin add @digital-sustainability/nativescript-app-auth
\n

Setup

\n

Demo

\n

Update the config values in tools/demo/nativescript-app-auth/index.ts.

\n

Android

\n

To setup the Android project, you need to update the redirect scheme in tools/assets/App_Resources/Android/app.gradle

\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/vue":{"name":"@nativescript-use/vue","version":"0.0.22","license":"Apache-2.0","readme":"

@nativescript-use/vue

\n
npm install @nativescript-use/vue
\n

Documentation (Vue3)

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/core-widgets":{"name":"@nativescript/core-widgets","version":"7.0.0-rc.0","license":"Apache-2.0","readme":"

NativeScript Core Modules Widgets

\n

\"Build

\n

This library represents native code (Java and Objective-C) used by the NativeScript core modules.

\n

NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

\n\n\n\n

Contribute

\n

We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/preferences":{"name":"@nativescript-community/preferences","version":"1.3.0","license":"Apache-2.0","readme":"

\"Twitter

\n

@nativescript-community/preferences

\n

This plugin allows native preference saving\\loading on iOS and Android

\n\n\n

iOS Prerequisites

\n\n

Android Prerequisites

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @nativescript-community/preferences
\n

Usage

\n
    var prefs = new Preferences();

    //Get existing value
    prefs.getValue(\"name_preference\");

    //Set value
    prefs.setValue(\"name_preference\", \"some new text\");
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
openSettings(): any;Opens the native settings panes
getValue(key: string): any;Gets the value for the preference
setValue(key: string, value: any): void;Sets the passed value to the preference
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/ui-pager":{"name":"@enduco/ui-pager","version":"13.1.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Pager

\n

Install

\n

NativeScript 7x

\n\n

NativeScript 6x

\n\n

NativeScript 5x

\n\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Usage

\n

Note v11+

\n
Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
\n

IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

\n
<pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <pager:Pager.itemTemplate>
                <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label text=\"{{title}}\"/>
                    <Image row=\"1\" src=\"{{image}}\"/>
                </GridLayout>
            </pager:Pager.itemTemplate>
</pager:Pager>
\n

Multi Template

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
      <Pager.itemTemplates>
        <template key=\"even\">
          <GridLayout rows=\"auto,auto,*\" columns=\"*\">
            <Label text=\"Even\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
        <template key=\"odd\">
          <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
            <Label text=\"Odd\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <StackLayout row=\"2\">
              <Label text=\"{{image}}\"/>
            </StackLayout>
            <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
      </Pager.itemTemplates>
      <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
    </c:Pager>
\n

Static Views

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                 showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <c:PagerItem backgroundColor=\"red\">
                <Label text=\"First\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"white\">
                <Label text=\"Second\" ></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"black\">
                <Label text=\"Third\" color=\"white\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"green\">
                <Label text=\"Fourth\"></Label>
            </c:PagerItem>
        </c:Pager>
\n

Vue

\n
import Vue from 'nativescript-vue';
import Pager from 'nativescript-pager/vue';

Vue.use(Pager);
\n
<template>
    <Pager for=\"item in items\">
        <v-template>
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Label :text=\"item.title\" />
                <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
            </GridLayout>
        </v-template>
        <v-template if=\"$odd\">
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Image  stretch=\"fill\" :src=\"item.image\" />
                <Label :text=\"item.title\" row=\"1\"/>
            </GridLayout>
        </v-template>
    </Pager>
</template>
\n

Static Views

\n
<Pager height=\"100%\" :selectedIndex=\"1\">
  <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
  <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
  <PagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </PagerItem>
  <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
</Pager>
\n

Angular

\n
import { PagerModule } from \"nativescript-pager/angular\";

@NgModule({
    imports: [
    PagerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Angular v2

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </template>
</Pager>
\n

Angular v4+

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <ng-template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Multi Template

\n
 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }
\n
<Pager
  row=\"1\"
  [items]=\"items | async\"
  [itemTemplateSelector]=\"templateSelector\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
  backgroundColor=\"lightsteelblue\"
>
  <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
    <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
      <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>

  <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto,auto,auto,*\"
      columns=\"*\"
      backgroundColor=\"white\"
    >
      <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
      <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Static Views

\n
<Pager
  backgroundColor=\"orange\"
  row=\"1\"
  #pager
  [selectedIndex]=\"1\"
  height=\"100%\"
>
  <StackLayout *pagerItem backgroundColor=\"red\">
    <label text=\"First\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"white\">
    <label text=\"Second\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"green\">
    <label text=\"Fourth\"></label>
  </StackLayout>
</Pager>
\n

React

\n
import {$Pager} from 'nativescript-pager/react';
return (
<$Pager
                height={{ unit: \"%\", value: 100 }}
                   selectedIndex={this.selectedIndex}
                   selectedIndexChange={this.selectedIndexChange.bind(this)}
                    items={this.items}
                     cellFactory={
                    (item, ref) => {
                        return (
                            <$StackLayout id={item.title} ref={ref}>
                                <$Label text={item.title}/>
                                <$ImageCacheIt stretch={'aspectFill'}
                                        src={item.image}/>
                            </$StackLayout>
                        );
                    }
                }/>
)
\n

Static Views

\n
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                           <$PagerItem backgroundColor={'red'}>
                               <$Label text={'First'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'white'}>
                               <$Label text={'Second'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'black'}>
                               <$Label text={'Third'} color={new Color('white')}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'green'}>
                               <$Label text={'Fourth'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'pink'}>
                               <$Label text={'Fifth'}/>
                           </$PagerItem>
                       </$Pager>)
\n

Config

\n
<Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"ios\"\"android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@adilek/fetch-task":{"name":"@adilek/fetch-task","version":"1.0.4","license":"Apache-2.0","readme":"

@adilek/fetch-task

\n
ns plugin add @adilek/fetch-task
\n

About

\n

This is a upgraded version of the natiescript-background-fetch plugin available at https://github.com/transistorsoft/nativescript-background-fetch. All credits reserved to the original authors.\nThe plugin upgrade has been done to fit with Java version 11 and 8.2.3\nPlugin development template has been forked from https://github.com/NativeScript/plugin-seed

\n

Changes done

\n\n

Usage

\n

Note: This plugin is upgraded only for Android. It will not work with IOS.\nSame as mentioned in https://github.com/transistorsoft/nativescript-background-fetch/blob/master/README.md

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-orientation":{"name":"@vallemar/nativescript-orientation","version":"0.0.1","license":"Apache-2.0","readme":"

@nativescriptuse/nativescript-orientation

\n
npm install @nativescriptuse/nativescript-orientation
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase":{"name":"@triniwiz/nativescript-supabase","version":"0.3.0","license":"Apache-2.0","readme":"

Nativescript Supabase

\n
ns plugin add @triniwiz/nativescript-supabase
\n

Usage

\n

Database

\n
import {createClient} from '@triniwiz/nativescript-supabase';

const client = createClient('supabaseUrl', 'supabaseKey');

  // Select from table `countries` ordering by `name`
  const response = await client
      .from('countries')
      .select()
      .order('name', ascending: true)
      .execute();
}
\n

Authentication

\n
import {createClient} from '@triniwiz/nativescript-supabase';

const client = createClient('supabaseUrl', 'supabaseKey');

// Sign up user with email and password
const response = await client.auth.signUp('email', 'password');
\n

Storage

\n
import {File as nsFile, knownFolders, path} from '@nativescript/core';
import {createClient} from '@triniwiz/nativescript-supabase';

 const client = createClient('supabaseUrl', 'supabaseKey');
  
  // Create file `example.txt` and upload it in `public` bucket
  const exampleText = path.join(knownFolders.documents().path, 'example.txt');
  const file = nsFile.fromPath(exampleText);
  file.writeTextSync('File content');
  const storageResponse = await client
      .storage
      .from('public')
      .upload('example.txt', exampleText);
\n

Check out the Official Documentation to learn all the other available methods.

\n

Credits

\n

Based on supabase-js

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/pdf":{"name":"@nativescript/pdf","version":"1.0.1","license":"MIT","readme":"

@nativescript/pdf

\n

A simple PDF viewer.

\n
\n

Remark This repository is the replacement for madmas/nativescript-pdf-view which was a fork of the original by Merott and will be used with his consent to provide further maintenance of this NativeScript plugin.

\n
\n

It serves minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

\n

Installation

\n
npm install @nativescript/pdf
\n

Usage

\n

Vanilla NativeScript

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:pdf=\"@nativescript/pdf\"
  loaded=\"pageLoaded\">
  <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
</Page>
\n

Angular

\n
import { NativeScriptPdfModule } from '@nativescript/pdf/angular'

@NgModule({
\timports: [
    NativeScriptCommonModule, 
    ...
    NativeScriptPdfModule
  ],
\n
<PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
\n

Samples

\n

There are sample applications avalable:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/jetpack-compose":{"name":"@nativescript/jetpack-compose","version":"1.0.0-beta.0","license":"MIT","readme":"

@nativescript/jetpack-compose

\n

Jetpack Compose for NativeScript.

\n
npm install @nativescript/jetpack-compose
\n

Usage

\n

Adjust App_Resources/Android/app.gradle to include your desired Jetpack Compose version and dependencies:

\n
dependencies {
    def compose_version = \"1.2.1\"
    implementation \"androidx.compose.ui:ui:$compose_version\"
    // Tooling support (Previews, etc.)
    implementation \"androidx.compose.ui:ui-tooling:$compose_version\"

    // Add any other dependencies your Jetpack Compose UI needs
}

android {
    // other settings like targetSdk, etc.

    buildFeatures {
        compose true
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = \"1.8\"
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.3.2'
    }
}
\n

Create a Compose view

\n

Any Kotlin file can be created in your App_Resources, for example:

\n\n
class BasicView {
    data class ExampleUIState(
        val text: String = \"\"
    ) {}

    class ExampleViewModel(
    ) : ViewModel() {
        var uiState by mutableStateOf(ExampleUIState())
    }

    var mViewModel = ExampleViewModel()

    fun generateComposeView(view: ComposeView): ComposeView {
        return view.apply {
            setContent {
                MaterialTheme {
                    val uiState = mViewModel.uiState;
                    Text(uiState.text)
                }
            }
        }
    }

    fun updateData(value: Map<Any, Any>) {
        val v = value[\"data\"] as String;
        onEvent?.invoke(v)
        mViewModel.uiState = ExampleUIState(v);
    }

    var onEvent: ((String) -> Unit)? = null
}
\n

Register your Compose view

\n

This can be done in the bootstrap file (often app.ts or main.ts) or even the view component that needs it.

\n\n
import { registerJetpackCompose, ComposeDataDriver } from '@nativescript/jetpack-compose';

// A. You can generate types for your own Compose Provider with 'ns typings android --aar {path/to/{name}.aar}'
// B. Otherwise you can ignore by declaring the package resolution path you know you provided
declare var com;
registerJetpackCompose('flyingHearts', (view) => new ComposeDataDriver(new com.example.FlyingHearts(), view));
\n

Use Compose view with any NativeScript layout

\n

This illustrates what is often called a "vanilla" flavored NativeScript app. However, you can use this plugin with any flavor (Angular, React, Svelte, Vue, etc.)

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" xmlns:jc=\"@nativescript/jetpack-compose\">
  <StackLayout>
    <jc:JetpackCompose composeId=\"flyingHearts\" composeEvent=\"{{ onEvent }}\" data=\"{{ text }}\"/>
  </StackLayout>
</Page>
\n

To use with Angular

\n
import { registerElement } from '@nativescript/angular'
import { JetpackCompose } from '@nativescript/jetpack-compose'

registerElement('JetpackCompose', () => JetpackCompose)
\n

It can now be used within any Angular component, eg:

\n
<StackLayout>
    <JetpackCompose composeId=\"flyingHearts\" (composeEvent)=\"onEvent($event)\" [data]=\"data\"></JetpackCompose>
</StackLayout>
\n

Credits

\n\"Valor\n

NativeScript is proudly supported by Valor Software as official partners. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.

\n

Contact Valor for assistance.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codeus/nativescript-esdc":{"name":"@codeus/nativescript-esdc","version":"0.1.44","license":"Apache-2.0","readme":"

@codeus/nativescript-esdc

\n
ns plugin add @codeus/nativescript-esdc
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@erichlz/nativescript-simply-notification":{"name":"@erichlz/nativescript-simply-notification","version":"1.0.5","license":"Apache-2.0","readme":"

@erichlz/nativescript-simply-notification

\n
ns plugin add @erichlz/nativescript-simply-notification
\n

Usage

\n

import { OptionsNotification, SimplyNotification } from '@erichlz/nativescript-simply-notification';

\n

const optios: OptionsNotification = {\nchannelId: '001',\ncontentText: 'Test Context notification',\ntitleNotification: 'Plugin ',\nnotifyId: 0\n};

\n

SimplyNotification.showNotification(optios);

\n

About Options Notification

\n
channelId: string;\ncontentText: string;\ntitleNotification: string;\nnotifyId:number;\nsmallIcon?: ETYPE_NOTIFICATION_SMALLICON;\ncategory?: ETYPE_CATEGORY_NOTIFICATION;\npriority?:ETYPE_PRIORITY;\nautoCancel?:boolean;\ncolorSmallIcon?: number;\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in":{"name":"nativescript-apple-sign-in","version":"2.0.0","license":"Apache-2.0","readme":"

Sign In with Apple, for NativeScript

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

Plugin version 2+ is compatible with NativeScript 7+. If you use an older NativeScript version, please use plugin version 1.1.0.

\n
\n

Requirements

\n\n

Installation

\n
tns plugin add nativescript-apple-sign-in
\n

Demo app

\n

If you're stuck or want a quick demo of how this works, check out the demo app:

\n
git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
cd nativescript-apple-sign-in/src
npm run demo.ios
\n

API

\n

isSignInWithAppleSupported

\n

Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

\n
import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

const supported: boolean = isSignInWithAppleSupported();
\n

signInWithApple

\n

Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

\n
import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

signInWithApple(
    {
        // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
        scopes: [\"EMAIL\", \"FULLNAME\"]
    })
    .then((result: SignInWithAppleAuthorization) => {
        console.log(\"Signed in, credential: \" + result.credential);
        console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
        // you can remember the user to check the sign in state later (see 'getSignInWithAppleState' below)
        this.user = result.credential.user;
    })
    .catch(err => console.log(\"Error signing in: \" + err));
\n

getSignInWithAppleState

\n
\n

⚠️ This does not seem to work on a simulator!

\n
\n

If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

\n
import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

const user: string = \"the id you got back from the signInWithApple function\";

getSignInWithAppleState(user)
    .then(state => console.log(\"Sign in state: \" + state))
    .catch(err => console.log(\"Error getting sign in state: \" + err));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-storage":{"name":"@triniwiz/nativescript-supabase-storage","version":"0.3.0","license":"Apache-2.0","readme":"

Nativescript Supabase Storage Client

\n
ns plugin add @triniwiz/nativescript-supabase-storage
\n

Usage

\n
const avatarFile // 
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', avatarFile) 
  // File/Blob objects, NSData, byte array, ArrayBuffer & supports full path url
\n

Credits

\n

Based on storage-js

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-freshchat":{"name":"@nstudio/nativescript-freshchat","version":"1.0.0-beta.0","license":"Apache-2.0","readme":"

@nstudio/nativescript-freshchat

\n
npm install @nstudio/nativescript-freshchat
\n

Reference

\n

ios SDK: https://support.freshchat.com/en/support/solutions/articles/50000000048-freshchat-ios-sdk-integration-steps\nandroid sdk: https://support.freshchat.com/en/support/solutions/articles/50000000207-freshchat-android-sdk-integration-steps

\n

Usage

\n

The first step is to call the init method, I would recommend calling it as early as possible in your app life cycle.

\n
import { FreshChatSDK } from '@nstudio/nativescript-freshchat';
let appID = 'YOURAPPID';
let appKey = 'YOURAPPKEY';
let domain = 'YOURDOMAIN.com'
FreshChatSDK.init(appID, appKey, domain);
\n

Then, you can interact with the Freshchat sdk with the following methods:

\n

setUser

\n

You can get basic user information at any point to give you more context on the user when your support agents are messaging back and forth with them.

\n
let user = FreshChatSDK.setUser({
  firstName: 'Dave',
  lastName: 'Coffin',
  email: 'dave@hello.com',
  phoneCountryCode: '1',
  phoneNumber: '2075762034'
})
if (user) alert('Freshchat user set!')
\n

setUserProperties

\n

You can capture and send additional metadata about the user and the events in the app, all of which also becomes a way to segment your users to later push messages to them.

\n
let setProps = FreshChatSDK.setUserProperties({
  old: true,
  isCool: false
})
if (setProps) alert('set user properties!')
\n

trackEvent

\n

Tracking user events will give you more insight and context about the user(s) in your application. Events like user actions and failure/error cases can be tracked using this API. Tracked events are listed under Events Timeline on the agent side.

\n
FreshChatSDK.trackEvent('tookPicture', {
  time: new Date(),
  foo: 'bar'
})
\n

resetUser

\n

Reset user data at logout or when deemed appropriate based on user action in the app by invoking the resetUser API. Optionally accepts a completion callback.

\n
FreshChatSDK.resetUser(() => {
  console.log('user reset!');
})
\n

showConversations

\n

This method will bring up the user's conversations. You can optionally pass an array of topics.\nDifferent sets of Topics can be displayed to different types of users or on different screens by using tags to filter Topics.

\n
let tags;
tags = ['foo', 'bar'];
FreshChatSDK.showConversations(tags);
\n

identifyUser

\n

Use this method to both set an external ID and restore a user's conversations using a restore ID previously retrieved. First, you must set a user's external ID (the unique ID on your system).

\n
let identified = FreshChatSDK.identifyUser('1234', null)
\n

The identifyUser method accepts an external ID and a restore ID. The first time you call it, you won't have a restore ID, but identifying a user with an external ID and null as restore ID will generate a restore ID for the user. You can get this restore ID by using...

\n

getRestoreID

\n

This will return a user's restore ID.

\n
let restoreID = FreshChatSDK.getRestoreID();
this.myService.saveUserRestoreID(restoreID).then(profit); // save the ID in your database or backend system.
\n

Save this ID in your system, then when that user changes devices or platforms (visits your app on the web for example), you can restore the user's conversations by calling identifyUser again with the restore ID.

\n
this.myService.getUserRestoreIDFromMyCoolBackend('1234').subscribe(restoreID => {
  FreshChatSDK.identifyUser('1234', restoreID);
})
\n

sendMessage

\n

The app can send a message on behalf of the user using the sendMessage: API. It will silently send a message and not launch the Freshchat SDK UI. This API can be helpful in setting more context for customers before starting a conversation. Optionally pass a single tag.

\n
let msg = 'How do I win at chess?';
FreshChatSDK.sendMessage(msg, 'foo')
this.showConversations();
\n

Note: If there are no matching Topics, the message will be sent to the default Topic. If there are multiple matching Topics, the message will be sent to the oldest Topic.

\n

getUnreadCount

\n

If you want to indicate to the users that they have unread messages in their inbox, you can retrieve the unread count to display. The method returns an int indicating the number of unread messages for the user.

\n
FreshChatSDK.getUnreadCount((count) => {
  alert('Count is ' + count);
})
\n

showFAQs

\n

To bring up the Freshchat 's FAQ overlay at any point, use showFAQs() API.

\n
FreshChatSDK.showFAQs({
  showContactUsOnAppBar: true,
  showFaqCategoriesAsGrid: true,
  filterByTags: {
    tags: ['foo', 'bar'],
    title: 'My_Tags',
    type: 'ARTICLE'
  }
});
\n

This method accepts a config object with the following definition:

\n
export interface FreshchatFAQOptions {
  showFaqCategoriesAsGrid?: boolean // Show FAQ in grid formal, false to list view
  showContactUsOnFaqScreens?: boolean // Show chat option from FAQ section
  showContactUsOnFaqNotHelpful?: boolean // Show contact us in article detail when user select Not Helpful
  showContactUsOnAppBar?: boolean // Show chat option over navigation bar in FAQ category view or article list view
  filterByTags?: {
    tags: Array<any>
    title: string
    type: 'ARTICLE'|'CATEGORY'
  }
  filterContactUsByTags?: {
    tags: Array<any>
    title: string
  }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/zip":{"name":"@nativescript/zip","version":"6.0.0","license":"Apache-2.0","readme":"

@nativescript/zip

\n
npm install @nativescript/zip
\n

Usage

\n

Zip

\n

see ZipOptions

\n
import { Zip } from '@nativescript/zip';
import { path, knownFolders } from '@nativescript/core';
let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
let dest = path.join(knownFolders.documents().path, '/assets');
Zip.zip({
    directory: dest,
\t\tarchive: zipPath
});
\n

Progress

\n
import { Zip } from '@nativescript/zip';
import { path, knownFolders } from '@nativescript/core';
let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
let dest = path.join(knownFolders.documents().path, '/assets');
Zip.zip({
function onZipProgress(percent: number) {
\tconsole.log(`unzip progress: ${percent}`);
    directory: dest,
\t\tarchive: zipPath,
    onProgress: onZipProgress
});
\n

Unzip

\n

see UnzipOptions

\n
import { Zip } from '@nativescript/zip';
import { path, knownFolders } from '@nativescript/core';
let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
let dest = path.join(knownFolders.documents().path, '/assets');
Zip.unzip({
\tarchive: zipPath,
\tdirectory: dest,
});
\n

Progress

\n
import { Zip } from '@nativescript/zip';
import { path, knownFolders } from '@nativescript/core';
let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
let dest = path.join(knownFolders.documents().path, '/assets');
Zip.unzip({
\tarchive: zipPath,
\tdirectory: dest,
\tonProgress: onUnZipProgress,
});

function onUnZipProgress(percent: number) {
\tconsole.log(`unzip progress: ${percent}`);
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-mobile-ads-sdk":{"name":"nativescript-google-mobile-ads-sdk","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/nikolay-diyanov/nativescript-google-mobile-sdk-sdk/blob/master/LICENSE"},"readme":"

NativeScript Google Mobile Ads SDK for iOS and Android

\n

A simple way to install Google Mobile Ads SDK for iOS and Android using CocoaPods and NPM. Note that this particular plugin does not provide any common JS code on top\nof the native AdMob libraries. If you want a fully-featured CommonJS plugin, please refer to this one: nativescript-admob

\n

Prerequisites

\n

NativeScript 1.5.2 (tns --version)

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-google-mobile-ads-sdk
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-gotrue":{"name":"@triniwiz/nativescript-supabase-gotrue","version":"0.3.0","license":"Apache-2.0","readme":"

Nativescript Supabase GoTrue Client

\n
ns plugin add @triniwiz/nativescript-supabase-gotrue
\n

Usage

\n
import { GoTrueClient } from '@triniwiz/nativescript-supabase-gotrue';

const GOTRUE_URL = 'http://localhost:9999';

const auth = new GoTrueClient({ url: GOTRUE_URL });
\n

Credits

\n

Based on gotrue-js

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dark-engine/platform-native":{"name":"@dark-engine/platform-native","version":"0.25.1","license":"MIT","readme":"

@dark-engine/platform-native 🌖

\n

Dark renderer to mobile platforms like Android and iOS via NativeScript.

\n

NativeScript is a free and open-source framework for building native mobile apps using JavaScript, or any other language that can transpile to JavaScript, for iOS and Android platforms. It allows developers to write a single codebase for both platforms, resulting in native performance and access to device-specific APIs, while still leveraging familiar web development tools and paradigms.

\n

More about Dark\n
\nMore about NativeScript

\n
\n \n
\n

Installation

\n

npm:

\n
npm install @nativescript/core @dark-engine/core @dark-engine/platform-native
\n

yarn:

\n
yarn add @nativescript/core @dark-engine/core @dark-engine/platform-native
\n

Usage

\n
import { h, component, useState } from '@dark-engine/core';
import { FlexboxLayout, Button } from '@dark-engine/platform-native';

const App = component(() => {
  const [count, setCount] = useState(0);

  return (
    <FlexboxLayout justifyContent='center' alignItems='center'>
      <Button
        backgroundColor='purple'
        padding={16}
        onTap={() => setCount(count + 1)}>
        Fired {count} times
      </Button>
    </FlexboxLayout>
  );
});
\n

Also you can write any code without JSX:

\n
import { component, useState } from '@dark-engine/core';
import { FlexboxLayout, Button } from '@dark-engine/platform-native';

const App = component(() => {
  const [count, setCount] = useState(0);

  return FlexboxLayout({
    justifyContent: 'center',
    alignItems: 'center',
    slot: [
      Button({
        backgroundColor: 'purple',
        padding: 16,
        text: `Fired ${count} times`,
        onTap: () => setCount(count + 1),
      }),
    ],
  });
});
\n

Environment Setup

\n

Full working examples with environment setup you can find here.

\n

API

\n
import {
  type SyntheticEvent,
  run,
  registerElement,
  factory,
  View,
  Text,
  Image,
  Button,
  ScrollView,
  TouchableOpacity,
  TextField,
  Modal,
  ActionBar,
  ActionItem,
  NavigationButton,
  ActivityIndicator,
  RootLayout,
  AbsoluteLayout,
  StackLayout,
  FlexboxLayout,
  GridLayout,
  DockLayout,
  WrapLayout,
  ContentView,
  HtmlView,
  WebView,
  Slider,
  Switch,
  Placeholder,
  ListView,
  ListPicker,
  DatePicker,
  TimePicker,
  Label,
  TextView,
  FormattedString,
  Span,
  TabView,
  TabViewItem,
  Frame,
  Page,
} from '@dark-engine/platform-native';
\n

Mounting to native platform

\n

To mount you app you need to use run function:

\n
import { run } from '@dark-engine/platform-native';

import App from './components/app';

run(App());
\n

Layout system

\n

The system for placing elements in the layout includes the following components:

\n
import {
  RootLayout,
  AbsoluteLayout,
  StackLayout,
  FlexboxLayout,
  GridLayout,
  DockLayout,
  WrapLayout,
} from '@dark-engine/platform-native';
\n

To learn more about how they work, you can visit the NativeScript documentation.

\n

Conditional rendering

\n

You can use conditional rendering, but be aware that NativeScript is sensitive to frequent insertions and removals from the element tree. Therefore, whenever possible, an alternative approach should be used - the hidden and visible attributes, more about which can be found in the NativeScript documentation.

\n
// variant 1
return (
  <>
    {
      isFetching
      ? <FlexboxLayout
          height='100%'
          justifyContent='center'
          alignItems='center'>
          <ActivityIndicator busy />
        </FlexboxLayout>
      : <StackLayout>
          <Label>Hello 🥰</Label>
        </StackLayout>
    }
  </>
);
\n
// variant 2
return (
  <>
    <FlexboxLayout
      hidden={!isFetching}
      height='100%'
      justifyContent='center'
      alignItems='center'>
      <ActivityIndicator busy />
    </FlexboxLayout>
    <StackLayout hidden={isFetching}>
      <Label>Hello 🥰</Label>
    </StackLayout>
  </>
);
\n

List rendering

\n

In order to display lists of items, it is recommended to use the ListView component, which implements the virtual list behavior when only those items that are inside the viewport are rendered. Of course, you can also use normal rendering via map, however, in terms of performance, NativeScript is very sensitive to the number of elements in the application, as well as inserting and removing them from the tree. Therefore, virtualization should be used as much as possible.

\n
import { ListView } from '@dark-engine/platform-native';
\n
return (
  <ListView
    height='100%'
    items={items}
    onItemTap={() => console.log('tapped!')}>
    {({ item, idx }) => {
      return (
        <StackLayout backgroundColor={idx % 2 ? 'red' : 'yellow'}>
          <Label color={idx % 2 ? 'white' : 'black'}>item #{item}</Label>
        </StackLayout>
      );
    }}
  </ListView>
);
\n

Connecting 3rd party plugins

\n

In modern development, we can rarely do without third-party packages written by other developers. Therefore, we should always be able to include such plugins in our project.

\n

Suppose you want to connect a third party carousel plugin @nstudio/nativescript-carousel

\n

First of all you must install it in your app from npm:

\n
npm i @nstudio/nativescript-carousel
\n

Further, to register a new element, you need to use the registerElement function:

\n
import { component } from '@dark-engine/core';
import { registerElement, factory } from '@dark-engine/platform-native';

registerElement('ns:carousel', () => require('@nstudio/nativescript-carousel').Carousel);
registerElement('ns:carousel-item', () => require('@nstudio/nativescript-carousel').CarouselItem);

type CarouselProps = {};
type CarouselItemProps = {};

const carousel = factory('ns:carousel');
const Carousel = component<CarouselProps>(props => carousel(props));

const carouselItem = factory('ns:carousel-item');
const CarouselItem = component<CarouselItemProps>(props => carouselItem(props));

export { Carousel, CarouselItem };
\n

After all this, a new plugin can be used like this::

\n
import { Label } from '@dark-engine/platform-native';
import { Carousel, CarouselItem } from '@my-ui-kit';

return (
  <Carousel height='100%' width='100%'>
    <CarouselItem id='slide1' backgroundColor='red'>
      <Label text='Slide 1' />
    </CarouselItem>
    <CarouselItem id='slide2' backgroundColor='blue'>
      <Label text='Slide 2' />
    </CarouselItem>
    <CarouselItem id='slide3' backgroundColor='green'>
      <Label text='Slide 3' />
    </CarouselItem>
  </Carousel>
);
\n

Modals

\n

To insert content in modal window you need to use a special component Modal:

\n
import { Modal } from '@dark-engine/platform-native';
\n
const [isOpen, setIsOpen] = useState(false);

return (
  <Modal isOpen={isOpen} animated onRequestClose={() => setIsOpen(false)}>
    <StackLayout padding={32}>
      <Label>Hello from Modal</Label>
    </StackLayout>
  </Modal>
);
\n

Additional components

\n

Dark includes additional components of type View, Text, TouchableOpacity, so that you can write an application in a almost similar to React Native style.

\n
import { h, component } from '@dark-engine/core';
import { View, Text, TouchableOpacity } from '@dark-engine/platform-native';

const App = component(() => {
  return (
    <View justifyContent='center'>
      <TouchableOpacity padding={32} backgroundColor='#4caf50' onPress={() => console.log('press')}>
        <Text textAlignment='center'>Press me</Text>
      </TouchableOpacity>
    </View>
  );
});
\n

Navigation

\n

Any more or less complex application needs to be divided into several pages and navigate between them. Dark provides a package for this called @dark-engine/native-navigation, which implements navigation using StackNavigator and TabNavigator. This router also supports animated transitions, nested navigation and parameter passing.

\n
import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Feed' component={Feed} />
        <StackNavigator.Screen name='Friends' component={Friends} />
        <StackNavigator.Screen name='Profile' component={Profile} />
        <StackNavigator.Screen name='Settings' component={Settings} />
      </StackNavigator.Root>
    </NavigationContainer>
  );
});
\n

Full documentation about this package you can find here.

\n

LICENSE

\n

MIT © Alex Plex

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-clipboard":{"name":"@vallemar/nativescript-clipboard","version":"0.0.1","license":"Apache-2.0","readme":"

@nativescriptuse/nativescript-clipboard

\n
npm install @nativescriptuse/nativescript-clipboard
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rwigo/nativescript-onesignal":{"name":"@rwigo/nativescript-onesignal","version":"1.0.2","license":"Apache-2.0","readme":"

@rwigo/nativescript-onesignal

\n

This plugin used those SDK versions :

\n\n

Installation

\n
ns plugin add @rwigo/nativescript-onesignal
\n

Usage

\n

In the main.ts or app.ts file (depending on your configuration), add this initialization code :

\n
import { Application, isAndroid, Utils } from '@nativescript/core';
import { NSOneSignal } from '@rwigo/nativescript-onesignal';

...

Application.on(Application.launchEvent, (args) => {
  // Give context for Android and launchOptions for iOS when app is launching
  NSOneSignal.getInstance().init('YOUR_APP_ID', isAndroid ? Utils.android.getApplicationContext() : args.ios);
  NSOneSignal.getInstance().setNotificationHandlers(
    (result) => {
      console.log('notification opened');
    },
    (result) => {
      console.log('notification will show in foreground');
    }
  );
});
\n

Then you can import NativeOneSignal to use SDK API that hasn't been implemented in the NSOneSignal plugin class :

\n
import { NativeOneSignal } from '@rwigo/nativescript-onesignal';

...

// Disabling push notification
NativeOneSignal.disablePush(true);
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-keyboard":{"name":"@vallemar/nativescript-keyboard","version":"0.0.1","license":"Apache-2.0","readme":"

@nativescriptuse/nativescript-keyboard

\n
npm install @nativescriptuse/nativescript-keyboard
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-no-record":{"name":"nativescript-audio-no-record","version":"5.0.4","license":"MIT","readme":"\n

NativeScript Audio

\n\n

NativeScript plugin to play and record audio files for Android and iOS.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

tns plugin add nativescript-audio

\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function() {
    console.log('finished playing');
  },
  errorCallback: function(errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function(args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(function(res) {
    console.log(res);
  })
  .catch(function(err) {
    console.log('something went wrong...', err);
  });
\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

Demo App

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carousel-without-page-indicators":{"name":"nativescript-carousel-without-page-indicators","version":"67.1.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Carousel

\n

A simple carousel component for NativeScript.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformSupportedVersionNativeView
iOSYesiOS 8.1+DKCarouselView
AndroidYesAPI 15+ViewPager with PageIndicatorView
\n

Installation

\n

Run tns plugin add nativescript-carousel in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.

\n

Limitations

\n\n

Usage

\n

Check out the demos included in this repo for instructions on how to use the Carousel with your choice of framework:

\n

Vanilla TS demo

\n

Angular demo

\n

Vue demo

\n

Attributes - Common

\n\n

Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

\n\n

Defines the view template for each slide-view to be generated.

\n\n

Sets/Gets the active page by index

\n\n

Shows or hides the page-indicator

\n\n

Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

\n\n

Sets the color of unselected indicators

\n\n

By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

\n

Attributes - iOS specific

\n\n

If true last slide will wrap back to first and visa versa

\n\n

If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

\n\n

Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

\n\n

Enables/Disables user scroll on the Carousel.

\n\n

Returns the DKCarouselView object.

\n

Attributes - Android specific

\n\n

Returns the ViewPager object.

\n\n

Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

\n\n

Sets the pager-indicator animation duration in milliseconds. Default is 500.

\n\n

Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

\n\n

Sets the pager-indicator dot radius.

\n\n

Sets the pager-indicator dot padding.

\n\n

Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Indicator animations (Android only!)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NONECOLORSCALESLIDE
\"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WORMTHIN_WORMFILLDROPSWAP
\"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
\n

Changelog

\n

6.1.0

\n\n

6.0.0

\n\n

4.2.5

\n\n

4.2.1

\n\n

4.2.0

\n\n

4.1.0

\n\n

4.0.2

\n\n

4.0.0

\n\n

3.1.1

\n\n

3.1.0

\n\n

3.0.2

\n\n

3.0.1

\n\n

3.0.0

\n\n

2.4.2

\n\n

2.4.1

\n\n

2.4.0

\n\n

2.3.1

\n\n

2.3.0

\n\n

2.2.0

\n\n

2.1.2

\n\n

2.1.1

\n\n

2.1.0

\n\n

1.1.0

\n\n

1.0.0

\n\n

Author

\n\n

Collaborators

\n\n

Contributing

\n

I will accept pull requests that improve this and assign credit.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-common":{"name":"@tremho/jove-common","version":"0.7.0-pre-release.69","license":"UNLICENSED","readme":"

@tremho/jove-common

\n

(formerly thunderbolt)

\n

Common and primary component of Jove framework.
\nRequires @tremho/jove-desktop or @tremho/jove-mobile for implementation.
\nand @tremho/jove-cli for toolchain required to build.

\n

plus @tremho/jove-test for test server support

\n

project\nwiki

\n

Model structure enforces the bijection\ndesign pattern principles of Single-Source-Of-Truth

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swiss-army-knife":{"name":"nativescript-swiss-army-knife","version":"4.0.2","license":{"type":"MIT","url":"https://github.com/JoshDSommer/nativescript-swiss-army-knife/blob/master/LICENSE"},"readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shared-notification-delegate":{"name":"nativescript-shared-notification-delegate","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Shared Notification Delegate

\n

This project aims to prevent the shortcomings that come from the iOS implementation of only allowing a single delegate.

\n

Installation

\n
tns plugin add nativescript-shared-notification-delegate
\n

Usage

\n

Import SharedNotificationDelegate and add Observers

\n
import { SharedNotificationDelegate } from 'nativescript-shared-notification-delegate';

...


SharedNotificationDelegate.addObserver({
    delegateUniqueKey: \"myUniqueKey\", // ensures uniqueness, if not set or is null/undefined, allows multiple of the same
    userNotificationCenterWillPresentNotificationWithCompletionHandler: (notificationCenter, notification, handler, stop, next) => {
        console.log(\"notification received by observer\");
        // is this notification something I should handle?
        if (shouldHandleThis) {
            // do stuff
            // intercept it and show alert
            handler(UNNotificationPresentationOptions.Alert);
            return;
        }
        // not mine, next should handle
        next();
    }
});
\n

API

\n

SharedNotificationDelegate Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
addObserver(observer: DelegateObserver, priority?: number): voidAdds a delegate observer of a certain priority (lower means first). Default priority is 100.
removeObserver(observer: DelegateObserver)removes a DelegateObserver
removeObserverByUniqueKey(key: any)removes a DelegateObserver by its unique key
\n

DelegateObserver Interface

\n

A DelegateObserver can implement 3 methods from UNUserNotificationCenterDelegate with the addition of some details:

\n
interface DelegateObserver {
    userNotificationCenterDidReceiveNotificationResponseWithCompletionHandler?(center: any /* UNUserNotificationCenter */, response: any /* UNNotificationResponse */, completionHandler: () => void, next: () => void): void;
    userNotificationCenterOpenSettingsForNotification?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, stop: () => void, next: () => void): void;
    userNotificationCenterWillPresentNotificationWithCompletionHandler?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, completionHandler: (p1: any /* UNNotificationPresentationOptions */) => void, next: () => void): void;
    /**
     * if set to not null/undefined, will ensure only one is registered
     */
    delegateUniqueKey?: any;
}
\n

All the functions are called asynchronously in a chain.

\n

Calling a completionHandler immediately stops the observer chain. next() must be called if the method will not be handling the notification.

\n

Calling stop() on userNotificationCenterOpenSettingsForNotification prevents the event bubbling to the rest.

\n

Only one method will be processed at a time, this means you can take as long as you want (including making http calls, for example), as long as you just call completionHandler, stop and next when you're finished.

\n

If a DelegateObserver has a delegateUniqueKey, the SharedNotificationDelegate will ensure only the latest copy of the observer is present. This is especially useful if debugging with HMR, which may add multiple observers on application reload.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-weather-api":{"name":"nativescript-weather-api","version":"1.0.1","license":"MIT","readme":"

NativeScript Weather API

\n

Real-time weather information for any location on Earth, including over 200,000 cities.

\n

Installation

\n
tns plugin add nativescript-weather-api
\n

Permission

\n

Android

\n

To request access to location, you need to add the following line to your app's AndroidManifest.xml:

\n
<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
\n

iOS

\n

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app.

\n

Usage

\n

This plugin uses the OpenWeather API to show weather information, so you need to create an account on https://openweathermap.org and get your key. Free accounts are allowed to perform 1,000,000 calls/month and 60 calls/minute.

\n

Import the plugin

\n
import { getWeather, dailyForecast, showWeather, getLocation } from 'nativescript-weather-api';
\n

API calls

\n

By geographic coordinates

\n

When using coordinates, you can't pass the city and ZIP code parameters.

\n
var temp;
var wind;

getLocation().then((location) => {

getWeather({

\tkey: \"your_key\",
\tlat: location.latitude,
\tlon: location.longitude,
\tunit: \"metric\"

}).then(() => {

\tvar data = new showWeather();
\ttemp = data.temp;
\twind = data.wind;
});

});
\n

By city name

\n

When calling by city name, you can't pass the latitude, longitude, and ZIP code parameters.

\n
var temp;
var wind;

getWeather({

\tkey: \"your_key\",
\tcity: \"London\",
\tcountry: \"GB\"

}).then(() => {

\tvar data = new showWeather();
\ttemp = data.temp;
\twind = data.wind;
});
\n

By ZIP code

\n

This method doesn't seem to work with all countries. For example, the API didn't recognize ZIP codes from Brazil during my tests.

\n

Don't pass the latitude, longitude, and city parameters.

\n
var temp;
var wind;

getWeather({

\tkey: \"your_key\",
\tzip_code: \"90001\",
\tcountry: \"US\"

}).then(() => {

\tvar data = new showWeather();
\ttemp = data.temp;
\twind = data.wind;
});
\n

Parameters

\n

key - Your OpenWeather key.
\nlat - Latitude.
\nlon - Longitude.
\ncity - City name, e.g., Los Angeles.
\ncountry - Country code, e.g., US, CA, GB.
\nzip_code - Numeric or alphanumeric codes, e.g., 90001.
\nunit - If you set it to metric, the temperature will be in Celsius and wind speed in meter/s. If you choose imperial, the temperature will be in Fahrenheit and wind speed in miles/h. If you don't set this parameter, Kelvin and meter/s are the standards.
\nlang - The output language for the city name and description fields, e.g., en, pt_br, fr, es.

\n

Identifiers

\n

name - Location name.
\ncountry - Country name.
\ntemp - Temperature.
\ntemp_min - Minimum temperature.
\ntemp_max - Maximum temperature.
\nfeels_like - Feels like temperature.
\nwind - Wind speed.
\npressure - Pressure.
\nhumidity - Humidity.
\ndescription - Weather description, e.g., clear sky.
\nicon - Weather icon URL.

\n

Daily forecast for 7 days

\n

With only one call, you can get weather information for 7 days plus the current day.

\n
var temp_min;
var temp_max;
var description;

getLocation().then((location) => {

dailyForecast({

\tkey: \"your_key\",
\tlat: location.latitude,
\tlon: location.longitude,
\tunit: \"metric\"

}).then((data) => {

\ttemp_min = data.daily[0].temp.min;
\ttemp_max = data.daily[0].temp.max;
\tdescription = data.daily[0].weather[0].description;
});

});
\n

The dailyForecast function only accepts latitude and longitude to determine the location. In the example, we retrieved the minimum and maximum temperature and the weather description for the current day. If we wanted information for the following day, we'd change daily[0] to daily[1], and so on up to daily[7]. To see all the fields available besides the ones we used in this section, create an alert(JSON.stringify(data, null, 4)), but don't forget to remove it before building for production.

\n

NS compatibility

\n

Update your NS version to 8+, or you might get an error with the @nativescript/geolocation plugin.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-phaser":{"name":"@nativescript/canvas-phaser","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ampersand":{"name":"nativescript-ampersand","version":"1.0.1","license":"MIT","readme":"

nativescript-ampersand

\n

A NativeScript module to add Ampersand.js Models and Rest Collections for use in place of nativescript observables. Ampersand.js is a fork of Backbone.js, providing alot of the same functionality with additional features. All server sync methods are available and uses the built in Nativescript http module out of the box. For more information on Ampersand.js see their documentation.

\n

[![NPM version][npm-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url]\n[npm-url]: https://npmjs.org/package/nativescript-ampersand\n[npm-image]: http://img.shields.io/npm/v/nativescript-ampersand.svg\n[david-dm-url]:https://david-dm.org/dapriett/nativescript-ampersand\n[david-dm-image]:https://david-dm.org/dapriett/nativescript-ampersand.svg

\n

\"NPM\"

\n

Installation

\n

Run npm install nativescript-ampersand --save from your nativescript project

\n

Usage

\n
Models
\n

Just use require("nativescript-ampersand/model") to include the AmpersandModel, and then extend it for your model. See the Ampersand Model documentation for available methods and configuration options.

\n
// ./app/models/todo.js

var AmpersandModel = require(\"nativescript-ampersand/model\");

module.exports = AmpersandModel.extend({

  urlRoot: \"http://www.example.com/todos\",

\t// Properties this model will store
\tprops: {
\t\ttitle: {
\t\t\ttype: 'string',
\t\t\tdefault: ''
\t\t},
\t\tcompleted: {
\t\t\ttype: 'boolean',
\t\t\tdefault: false
\t\t}
\t},
\t// session properties work the same way as `props`
\t// but will not be included when serializing.
\tsession: {
\t\tediting: {
\t\t\ttype: 'boolean',
\t\t\tdefault: false
\t\t}
\t},
\tdestroy: function () {
\t\tif (this.collection) {
\t\t\tthis.collection.remove(this);
\t\t}
\t}
});
\n

Then just use them in your views. You can set them to the view's bindingContext and they'll automatically update with any model changes.

\n
// ./app/views/todo-view.js
var TodoModel = require( \"../models/todo\" );

var todo = new Todo({
  title: \"Enter new TODO\"
});

exports.load = function(args){
  args.object.bindingContext = todo;
}

exports.save = function() {
   todo.save();
}
\n
Rest Collections
\n

Just use require("nativescript-ampersand/collection") to include the AmpersandRestCollection, and then extend it for your collection.

\n
// ./app/collections/todo-collection.js

var AmpersandCollection = require(\"nativescript-ampersand/collection\");
var TodoModel = require(\"../models/todo\")

module.exports = AmpersandCollection.extend({
  url: \"http://www.example.com/todos\",
  model: TodoModel
});
\n

Then just use them in your views. You can bind them to a listview and they'll automatically update with collection changes.

\n
// ./app/views/todos.js
var TodoCollection = require( \"../collections/todo-collection\" );

var todos = new TodoCollection();

exports.load = function(args){
  args.object.bindingContext = {todos: todos};
  todos.fetch();
}

exports.refresh = function() {
   todo.fetch();
}
\n
<!-- ./app/views/todos.xml -->
<Page navigatedTo=\"load\">
\t<StackLayout>
    <ListView items=\"{{ todos }}\">
        <ListView.itemTemplate>
        \t<GridLayout rows=\"50\">
            <Label text=\"{{ title }}\" />
          </GridLayout>
        </ListView.itemTemplate>
    </ListView>
  </StackLayout>
</Page>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"imagene-ns-google-login":{"name":"imagene-ns-google-login","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Google Login

\n

\"npm\n\"NPM\"

\n

Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

\n

It is inspired by the plugin nativescript-social-login

\n

Works with Android X, iOS 13

\n

Screenshots

\n

Android

\n

\"Screenshot

\n

iOS

\n

\"Screenshot

\n

Dependencies

\n

iOS

\n
pod 'GoogleSignIn', '~> 5.0'
\n

Android

\n
implementation 'com.google.android.gms:play-services-auth:17.0.0'
\n

Installation

\n
tns plugin add nativescript-google-login
\n

iOS

\n

Get an OAuth client ID

\n

Get an Oauth client id from the Google website

\n

Info.plist

\n

Add the following to your Info.plist file located in app/App_Resources/iOS

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleTypeRole</key>
\t\t<string>Editor</string>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
\t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
\t\t\t<!-- Get it from your GoogleService-Info.plist -->
\t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
\t\t</array>
\t</dict>
</array>
\n

Usage

\n
```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
\n

Result

\n
```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adyen-cse":{"name":"nativescript-adyen-cse","version":"1.0.3","license":"MIT","readme":"

NativeScript Adyen CSE Plugin

\n

Adyen NativeScript client-side encryption

\n

Installation

\n
tns plugin add nativescript-adyen-cse
\n

Usage

\n
import { AdyenCse, Card } from 'nativescript-adyen-cse';

this.adyenCse = new AdyenCse();
const data: Card = {
  cvc: '737',
  expiryMonth: '08',
  expiryYear: '2018',
  generationTime: new Date(),
  holderName: 'holderName',
  number: '4111111111111111'
};

let encryptedCardString = this.adyenCse.encrypt(data, 'your_adyen_public_Key');
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-babylon":{"name":"@nativescript/canvas-babylon","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-socketmobile":{"name":"@ticnat/nativescript-socketmobile","version":"1.0.2","license":"Apache-2.0","readme":"

@ticnat/nativescript-socketmobile

\n
ns plugin add @ticnat/nativescript-socketmobile
\n

Usage

\n
    \n
  1. create a new instance of the scanner plugin:
    2. \n
\n
const socket = new Socketmobile(AppKey,DeveloperID, AppID);
\n

and pass you appkey developerId and appId obtained from Socket Mobile Developer Portal

\n
    \n
  1. initialize the scanner with the callbacks:
    2. \n
\n
socket.didReceiveDecodedData = (data: string, device, result) => {
    console.log('scannedText', data);
}
socket.initScanner();
\n
    \n
  1. \n

    Connect and pair your sockermobile scanner with the iPad through socket mobile companion app

    \n
    2. \n
  2. \n

    add these to info.plist file

    \n
    3. \n
\n
<key>UISupportedExternalAccessoryProtocols</key>
<array>
    <string>com.socketmobile.chs</string>
</array>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>Using bluetooth to connect the app to the barcode scanner</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>Using bluetooth to connect the app to the barcode scanner</string>
\n
    \n
  1. All done!
    2. \n
\n

Notice:

\n
    \n
  1. \n

    This plugin tested on Socket mobile S740 model but I think it works with other models.

    \n
    2. \n
  2. \n

    The plugin is under development, if you have any improvements Welcome to PRs!

    \n
    3. \n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow-updated":{"name":"nativescript-vue-shadow-updated","version":"1.0.0","license":"MIT","readme":"

Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
npm install nativescript-vue-shadow
\n

Demo

\n

\"Screenshot\"

\n

How to use it

\n

This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the Directive into main.js

\n
import NSVueShadow from 'nativescript-vue-shadow'
Vue.use(NSVueShadow)
\n

Use in your view or component

\n

Simple attribute for v-shadow:

\n
<Label v-shadow=\"2\"></Label>
\n

You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"myCustomData\"></Label>
\n

Then in your script tag you can do something like this where we bind to the object:

\n
import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow\";
// ...
export default class MyComponent extends Vue {
  private myCustomData: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypeDefaultPlatformDescription
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"nativescript-vue-shadow\";

export default class MyComponent extends Vue {
  // ...
  private elevation: number = Elevation.SNACKBAR;
  // ...
}
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

\n

This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow

\n\n

Changelog

\n\n

License

\n

MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cchoici/nativescript-wear-os":{"name":"@cchoici/nativescript-wear-os","version":"3.0.2","license":"Apache-2.0","readme":"

https://github.com/cchoici/nativescript-wear-os/blob/master/README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-x":{"name":"@zalastax/nolb-nativescript-x","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-3":{"name":"@zalastax/nolb-nativescript-3","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-three":{"name":"@nativescript/canvas-three","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-f":{"name":"@zalastax/nolb-nativescript-f","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-pixi":{"name":"@nativescript/canvas-pixi","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/tracing":{"name":"@awarns/tracing","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/tracing

\n

\"npm\n\"npm\"

\n

Background execution flows can become quite complex when using the AwarNS Framework, which is not necessarily a bad thing. This module aids at debugging such workflows, thanks to a set of decorators and tasks which allow to keep track of task executions and the raise of certain events. The recorded traces can later be queried and exported to a local file. Optionally, it is possible to automatically store the recorded traces in an external data store (e.g., a backend).

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/tracing
\n

Usage

\n

After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

\n
    \n
  1. The plugin API. Through it, you'll be able to "decorate" existing tasks, to keep track of their execution. Then, you can query the recorded execution traces and export them using the most common information exchange formats.
    2. \n
  2. Tasks to track the raise of certain events. Sometimes, the execution of a task itself is not interesting, but just one (or more) of the events it produces. Alternatively, the event generator might not be a task, but some UI code emitting an event in a very specific situation. If the rise of these events is relevant to your application, you can keep track of them using these tasks.
    3. \n
\n

Setup

\n

This plugin requires you to register its loader during the framework initialization, like this:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerTracingPlugin } from '@awarns/tracing';

import { externalTracesStore } from './external-store';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerTracingPlugin({
        externalTracesStore: externalTracesStore,
        oldTracesMaxAgeHours: 7 * 24 // 1 week
      }),
    ]
  )
  // ... handle initialization promise
\n

Plugin loader config parameter options:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
externalTracesStoreTracesStore(Optional) Inject an adapter to an external traces store and enable automatic upload of the recorded traces. The table below describes the methods that this adapter needs to implement
oldTracesMaxAgeHoursnumber(Optional) Tell the plugin to regularly cleanup old local traces. By default, all traces are kept
\n

TracesStore (external)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
insert(trace: Trace)Promise<void>Persist the given trace. Throw an error if something goes wrong. The write will be retried during the next app initialization
\n

Due to that, for now, this plugin only supports one-way synchronization, the rest of the methods are meant for future use and don't need to be implemented at the moment. You can throw unimplemented errors inside them, so that you can more easily recognize when they start being used in future versions.

\n

API

\n

The API of this plugin can be classified in 3 groups: task decorator, traces' storage and data exporters.

\n

Task decorator

\n
makeTraceable
\n

In the task decorator group, there is the makeTraceable function, which allows to decorate one or more tasks to keep track of their execution, with the following parameters (see full example usage here):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
tasksToTraceArray<Task>An array including all the tasks that will be decorated to keep track of their execution
configTracerConfig(Optional) Allows to adjust some configuration options of the tracer. See TracerConfig properties for more
\n

The makeTraceable function returns an array of decorated tasks.

\n
TracerConfig
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
outputsSensitiveDatabooleanIndicates the tracer that the tasks being tracked outputs sensitive information that should not be recorded. Defaults to false
\n

Traces storage

\n
tracesStore
\n

In the traces' storage group, there is the tracesStore singleton object, with the following methods:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
insert(record: Record)Promise<void>Persist the given trace. On success, if provided during plugin initialization, it will try to automatically write the new trace to the external store
getAll(reverseOrder?: boolean, limitSize?: number)Promise<Array<Trace>>Allows to retrieve the current latest (by default) or first traces, optionally limiting the resulting list in size
list(size?: number)Observable<Trace>Allows to observe the "n" most recent traces, where "n" is determined by the value given to the size parameter. By default, size is 100
clear()Promise<void>Allows to clear all the stored traces from the local database. Note: to only remove old traces, configure the oldTracesMaxAgeHours option during plugin initialization
changes (property)Observable<Array<string>>Listen to this observable property to know when a trace has been created. It propagates updates on the ids of the traces that have been recently stored
\n
\n

Note: It is recommended to install RxJS, to operate with the methods that return an Observable.

\n
\n
Trace
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringThe unique id of the trace
chainIdstringThe id of the chain that the trace belongs to. A chain is a succession of event rises and task executions, which originate from the same starting event
typeTraceTypeCan either be task or event depending on what originated the trace
namestringThe name of the task or the event that originated the trace
resultTraceResultCan either be OK or error. This value is always OK for event traces, since, if something goes wrong, the event won't rise at all
timestampDateThe date and time when the trace was originated
contentobjectTask traces and event traces follow a different structure in their content property. Event traces will contain here the payload of the event, unless it has been declared that the event contains sensitive data, in which case, it will hold an empty ({}) object. The content of task traces has a fixed structure, which can be seen below
\n
Trace content (Task)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
emittedstringThe name of the event emitted by the task
outcomestringThe payload included in the event emitted by the task. If outputsSensitiveData is set to true in the tracer config, this property will hold an empty object ({}) instead
messagestringIf an error was thrown during the execution of the task, its stack trace will appear here
tooknumberThe task execution time, in milliseconds
\n

Export data

\n

createRecordsExporter

\n

In the final group, the data exporters group, there is the createTracesExporter() function, with the following parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
folderFolderSystem folder object. Use NativeScript FileSystem API to define where the exports file will be saved
format'csv' | 'json'Select the information exchange format to use. Defaults to csv
fileNamestring(Optional) Specify the file name to use for the exports file (without extension). Defaults to current date and time
\n

The createRecordsExporter() returns an Exporter object with the following API:

\n

Exporter

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
export()Promise<ExportResult>Tell the exporter to export the traces, and save them inside to the configured exports file. Returns an ExportResult once done
\n

ExportResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyReturn typeDescription
exportCountnumberThe amount of traces that have been exported
fileNamestringThe name of the exports file that has been saved
\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
trackEventGenerates an event trace containing the information regarding the event that invoked its execution
trackSensitiveEventGenerates an event trace containing the information regarding the event that invoked its execution. The payload of the event will be ignored, since it is considered to contain sensitive information
\n

Track regular events

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { trackEventTask } from '@awarns/tracing';

export const demoTasks: Array<Task> = [
  trackEventTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('trackEvent')); // Include some payload data in your start event, 
                                     // to see how it becomes recorded too
\n
\n

Track events containing sensitive information

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { trackSensitiveEventTask } from '@awarns/tracing';

export const demoTasks: Array<Task> = [
  trackSensitiveEventTask(),
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('trackSensitiveEvent')); // Include some payload data in your start event, 
                                              // to see how it does not appear in the event trace
\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-s":{"name":"@zalastax/nolb-nativescript-s","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nota/nativescript-webview-ext":{"name":"@nota/nativescript-webview-ext","version":"8.0.2","license":"Apache-2.0","readme":"

@nota/nativescript-webview-ext

\n

Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

\n

Features

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @nota/nativescript-webview-ext
\n

Update minSdkVersion to 19 or higher

\n

Android SDK 19 is required, update App_Resources/Android/app.gradle:

\n
android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters \"--no-version-vectors\"
  }
}
\n

Core support

\n

Load in template like this:

\n
<Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:nota=\"@nota/nativescript-webview-ext\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <nota:WebViewExt src=\"https://nota.dk\"></<nota:WebViewExt>
</Page>
\n

Angular support

\n

Import WebViewExtModule from @nota/nativescript-webview-ext/angular and add it to your NgModule.

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Vue support

\n

Import @nota/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Usage

\n

Limitations

\n

The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

\n

Custom-scheme support for iOS <11 was removed because of ITMS-90809.

\n

API

\n

NativeScript View

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValueDescription
readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
srcLoad src
autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
supportZoomtrue / falseAndroid: should the webview support zoom
viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
getTitle()Returns a promise with the current document title.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
titleChangedDocument title changed
webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
\n

WebView

\n

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
\n

Waiting for nsWebViewBridge to be available

\n
    window.addEventListener(\"ns-bridge-ready\", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;

        // do stuff here
    });
\n

Possible features to come:

\n\n

Android

\n\n

iOS

\n\n

Demo and unit tests

\n

Running the demo

\n

To run the demo-project, the plugin must be build locally and a http-server must be running.

\n

The easiest way to run the demo is to follow these steps:

\n\n

Running the unit-tests

\n\n

License

\n

Apache License Version 2.0, January 2004

\n

About Nota

\n

Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-randombytes":{"name":"nativescript-randombytes","version":"1.0.0","license":"MIT","readme":"

NativeScript randombytes shim

\n

The randombytes package doesn't work in the {N} runtime, so replace it by this package if you need to.

\n

Installation

\n
tns plugin add nativescript-randombytes
\n

Usage

\n
var randomBytes = require('nativescript-randombytes');

// sync usage
console.log(\"randomBytes: \" + randomBytes(16));

// async usage
randomBytes(16, function (ignore, result) {
  console.log(\"randomBytes async: \" + result);
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-elevation":{"name":"nativescript-nbmaterial-elevation","version":"1.0.1","license":"Apache-2.0","readme":"

Elevation implementation for nbmaterial packages

\n

The module implement elevation on both iOS and Android.\nIt augments nativescript Style/View and background.\nThis way you can define "elevation" property on DOM elements or in CSS.

\n
interface Style {
        elevation: number;
    }
interface Background {
        elevation: number;
    }
interface View {
        elevation: number;
        getElevationDefault(): number;
        setElevationNative(back: Background);
    }
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-j":{"name":"@zalastax/nolb-nativescript-j","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-highcharts":{"name":"@imagene.me/nativescript-highcharts","version":"2.0.2","license":"Apache-2.0","readme":"

nativescript-highcharts

\n

This plugins allows you to use Highcharts in NativeScript.

\n
ns plugin add @imagene.me/nativescript-highcharts
\n

Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

\n

Screenshots

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo.ios # or apps.demo.android
\n

NativeScript-Angular

\n

Check out the demo-angular folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo-angular.ios # or apps.demo-angular.android
\n

Usage

\n

NativeScript-Core

\n

TypeScript

\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

\n
...
export class HomeViewModel extends Observable {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

XML

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:ui=\"@mhtghn/nativescript-highcharts\">

    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
    </GridLayout>
</Page>
\n

NativeScript Angular

\n

TypeScript

\n

Import the HighchartsModule in your module.

\n
...
import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

@NgModule({
    imports: [
        ...
        HighchartsModule
    ],
    ...
})
export class HomeModule { }
\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

@Component({
    selector: \"Home\",
    moduleId: module.id,
    templateUrl: \"./home.component.html\"
})
export class HomeComponent implements OnInit {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

HTML

\n
<ActionBar class=\"action-bar\">
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout class=\"page\">
    <!-- Add your page content here -->
    <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
</GridLayout>
\n

Highcharts Compatibility

\n\n

Tips

\n\n

Credit

\n

This plugin is greatly inspired by this demo from Eddy Verbruggen

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsg":{"name":"nsg","version":"0.1.3","license":"MIT","readme":"

nsg

\n

A spork of Angular CLI for NativeScript & Angular projects, run nsg command as ng.

\n

Installation

\n

npm install -g nsg

\n

Usage

\n

Same as ng command in Angular CLI, except that nsg generates project/component/services/... comsumed by NativeScript.

\n

Samples:

\n
    \n
  1. \n

    Create new project: nsg new hello

    \n
    2. \n
  2. \n

    Generate a component named item: nsg generate component item

    \n
    3. \n
\n

Most options in ng also available in nsg, like --inline-style, --flat ...

\n

Use tns

\n

After coding, run tns run android|ios to run.

\n

Difference between nsg and ng

\n\n

Project structure made by nsg

\n
+ hello/
    + .git/
    + app/
        + ns
            - app.module.ts
            - app.component.ts
            - app.component.html
            - app.component.css
        - app.css
        - main.ts
        - package.json
    - package.json
    - tsconfig.json
    - nsg-cli.json
    - README.md
    - .gitignore
\n

nsg replaces src folder with app, as tns does. Since app is used, so this folder inside src is changed to ns.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-checkbox-ns-7":{"name":"nativescript-checkbox-ns-7","version":"22.0.0","license":"MIT","readme":"\n

NativeScript Checkbox

\n\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n

\n \n \"Action\n \n \n \"npm\"\n \n \n \"stars\"\n \n
\n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add @nstudio/nativescript-checkbox

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Sample Usage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Android SampleiOS Sample
\"Sample1\"\"Sample2\"
\n

Usage

\n

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n

\n

import { CheckBox } from '@nstudio/nativescript-checkbox';
import { topmost } from '@nativescript/core/ui/frame';

public toggleCheck() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule],
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
Vue.registerElement(
  'CheckBox',
  () => require('@nstudio/nativescript-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange',
    },
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

\n\n

Contributing & Running Demo Apps

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-splashscreen":{"name":"nativescript-splashscreen","version":"2.3.0","license":"MIT","readme":"

\"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-splashscreen

\n

#Configure

\n\n

Android

\n

Important update all occurrences of org.nativescript.demo to you app's id before using this plugin the app id can be found in the package.json of your apps root folder.

\n

Update app/App_Resources/Android/AndroidManifest.xml

\n
<activity
\t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
\t\t\tandroid:label=\"@string/title_activity_kimera\"
\t\t\tandroid:configChanges=\"keyboardHidden|orientation|screenSize\">
\t\t</activity>

        <activity 
\t\tandroid:name=\"co.fitcom.SplashScreen\" android:noHistory=\"true\">
\t\t<intent-filter>
\t\t<category android:name=\"android.intent.category.LAUNCHER\" />
\t\t<action android:name=\"android.intent.action.MAIN\" />
\t\t</intent-filter>
\t\t</activity>
\n

###Update SplashScreen\nLogo :- replace app/App_Resources/Android/drawable/splashlogo.png with your updated logo . must use the same filename

\n

Text Displayed :- splash_title located in app/App_Resources/Android/values/splash_settings.xml\nText Color :- Update configSplash.setTitleTextColor in app/SplashScreen.js

\n

#Colors\nThe color palette is based on https://material.google.com/style/color.html#color-color-palette

\n

e.g md_blue_900

\n

###Background

\n

Update configSplash.setBackgroundColor in app/SplashScreen.js

\n

iOS

\n

Setup a delegate:

\n
import * as application from 'application';
import {SplashScreen} from 'nativescript-splashscreen';

var FRESH_LAUNCH: boolean = true;

if (application.ios) {
  class MyDelegate extends UIResponder {
    public static ObjCProtocols = [UIApplicationDelegate];
    
    public applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      return true;
    }

    applicationDidBecomeActive(application: UIApplication): void {
      if (FRESH_LAUNCH) {
        FRESH_LAUNCH = false;
        let splash = new SplashScreen('twitterIcon.png', '#4E75E2');
        application.keyWindow.addSubview(splash.start());
      }
    }
  }
  application.ios.delegate = MyDelegate;
} 
application.start({ moduleName: 'main-page' });
\n

This will only show the splash screen on a fresh startup since you wouldn't want it to appear and animate again on top of your view when returning to the app.

\n

You can pass any image from your app/App_Resources/iOS folder and any hex background color.

\n
new SplashScreen('twitterIcon.png', '#4E75E2');
\n

#Run demo

\n
git clone https://github.com/triniwiz/nativescript-splashscreen
cd nativescript-splashscreen
npm run demo.android
\n

#ScreenShots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidIOS
\"ss\"\"splash\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-ripple":{"name":"nativescript-nbmaterial-ripple","version":"1.0.1","license":"Apache-2.0","readme":"

Ripple implementation for nbmaterial packages

\n

The module implement material ripple on both iOS and Android.\nIt augments nativescript Style/View.\nThis way you can define "ripple" properties on DOM elements or in CSS.

\n

It also include a Ripple Layout That let you make ripple outside from the component.

\n
  interface RippleOption {
    wrapper?: View;
    iosRadiusFactor?: number;
    androidHotBounds?: boolean;
} 
    interface Style {
        rippleColor: Color;
        rippleAlpha: number;
        rippleDuration: number;
        fadeDuration: number;
    }  
    interface View {
        rippleColor: Color;
        rippleAlpha: number;
        rippleDuration: number;
        fadeDuration: number;
        startRippleNative(opts: RippleOption): Promise<any>;
    } 

   class RippleLayout extends AbsoluteLayout {
    perfomRipple(): Promise<any>;
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@edusperoni/nativescript-mqtt":{"name":"@edusperoni/nativescript-mqtt","version":"2.0.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sqlite-access":{"name":"nativescript-sqlite-access","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/shared-notification-delegate":{"name":"@nativescript/shared-notification-delegate","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript Shared Notification Delegate

\n

This project aims to prevent the shortcomings that come from the iOS implementation of only allowing a single delegate.

\n

Installation

\n
ns plugin add @nativescript/shared-notification-delegate
\n

Usage

\n

Import SharedNotificationDelegate and add Observers

\n
import { SharedNotificationDelegate } from '@nativescript/shared-notification-delegate';

...


SharedNotificationDelegate.addObserver({
    delegateUniqueKey: \"myUniqueKey\", // ensures uniqueness, if not set or is null/undefined, allows multiple of the same
    userNotificationCenterWillPresentNotificationWithCompletionHandler: (notificationCenter, notification, handler, stop, next) => {
        console.log(\"notification received by observer\");
        // is this notification something I should handle?
        if (shouldHandleThis) {
            // do stuff
            // intercept it and show alert
            handler(UNNotificationPresentationOptions.Alert);
            return;
        }
        // not mine, next should handle
        next();
    }
});
\n

API

\n

SharedNotificationDelegate Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
addObserver(observer: DelegateObserver, priority?: number): voidAdds a delegate observer of a certain priority (lower means first). Default priority is 100.
removeObserver(observer: DelegateObserver)removes a DelegateObserver
removeObserverByUniqueKey(key: any)removes a DelegateObserver by its unique key
\n

DelegateObserver Interface

\n

A DelegateObserver can implement 3 methods from UNUserNotificationCenterDelegate with the addition of some details:

\n
interface DelegateObserver {
    userNotificationCenterDidReceiveNotificationResponseWithCompletionHandler?(center: any /* UNUserNotificationCenter */, response: any /* UNNotificationResponse */, completionHandler: () => void, next: () => void): void;
    userNotificationCenterOpenSettingsForNotification?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, stop: () => void, next: () => void): void;
    userNotificationCenterWillPresentNotificationWithCompletionHandler?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, completionHandler: (p1: any /* UNNotificationPresentationOptions */) => void, next: () => void): void;
    /**
     * if set to not null/undefined, will ensure only one is registered
     */
    delegateUniqueKey?: any;
}
\n

All the functions are called asynchronously in a chain.

\n

Calling a completionHandler immediately stops the observer chain. next() must be called if the method will not be handling the notification.

\n

Calling stop() on userNotificationCenterOpenSettingsForNotification prevents the event bubbling to the rest.

\n

Only one method will be processed at a time, this means you can take as long as you want (including making http calls, for example), as long as you just call completionHandler, stop and next when you're finished.

\n

If a DelegateObserver has a delegateUniqueKey, the SharedNotificationDelegate will ensure only the latest copy of the observer is present. This is especially useful if debugging with HMR, which may add multiple observers on application reload.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-guid":{"name":"@testjg/nativescript-guid","version":"1.1.0","license":"Apache-2.0","readme":"

@testjg/nativescript-guid

\n

\"npm

\n

Installation

\n
ns plugin add @testjg/nativescript-guid
\n

Usage

\n
import { createGuid } from '@testjg/nativescript-guid';

const guid = createGuid();

console.log(guid);
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dna-deviceinfo":{"name":"nativescript-dna-deviceinfo","version":"3.7.3","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-phaser-ce":{"name":"@nativescript/canvas-phaser-ce","version":"1.1.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/human-activity":{"name":"@awarns/human-activity","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/human-activity

\n

\"npm\n\"npm\"

\n

This module allows to detect and react to the changes in the activity being performed by the user (or object) carrying the phone: standing still, walking, running, riding a bicycle or being inside a vehicle. Depending on the granularity of the detection mechanism being used, it can even detect user stand-ups too.

\n

This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering human activity change detection tasks. Obtain human activity updates even in background.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/human-activity
\n

Usage

\n

After installing and setting up this plugin, you'll have access to two task groups to start and stop listening human activity updates at different granularity levels. The received updates, will be a HumanActivityChange record, described below.

\n

Setup

\n

This plugin requires you to register its loader during the framework initialization, like this:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerHumanActivityPlugin } from '@awarns/human-activity';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerHumanActivityPlugin(),
    ]
  )
  // ... handle initialization promise
\n

Plugin loader parameters:

\n
\n

This plugin loader takes no parameters.

\n
\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
startDetectingCoarseHumanActivityChangesAllows to start detecting human activity changes at a coarse granularity level. This level of granularity means that activity changes will be reported no sooner than 1 minute after the activity started. In contrast, the detection mechanism will be more robust against in-between activity stops. This means, for example, that if the user is walking and stops for a few seconds, or is inside a vehicle and stops at traffic light, these subtle changes won't be detected at this granularity level
stopDetectingCoarseHumanActivityChangesThe complement to the previous task. Allows to stop receiving coarse activity updates on demand
startDetectingIntermediateHumanActivityChangesAllows to start detecting human activity changes at an intermediate granularity level. This level of granularity means that activity changes will be reported as soon as they are detected. In contrast, the detection mechanism will be more sensitive to in-between activity stops. This means, for example, that if the user is walking and stops for a few seconds, or is inside a vehicle and stops at traffic light, these subtle changes will be detected as transitions to becoming still. Due to this extra of granularity, this activity detection mechanism is able to detect user stand-up actions (phone tilts abruptly)
stopDetectingIntermediateHumanActivityChangesThe complement to the previous task. Allows to stop receiving intermediate activity updates on demand
\n
\n

Note: All the tasks require physical activity access permission for their execution. Each task will automatically request what is missing during framework's initialization

\n
\n

Start / stop receiving updates on human activity changes at a coarse level

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  startDetectingCoarseHumanActivityChangesTask,
  stopDetectingCoarseHumanActivityChangesTask,
} from '@awarns/human-activity';

export const demoTasks: Array<Task> = [
  startDetectingCoarseHumanActivityChangesTask(),
  stopDetectingCoarseHumanActivityChangesTask(),
];
\n

Task generator parameters:

\n
\n

These task generators take no parameters

\n
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events, which are: startDetectingCoarseHumanActivityChangesFinished and stopDetectingCoarseHumanActivityChangesFinished.

\n

However, once the start task has finished running, relevant events will be emitted by the internal listeners once the corresponding action has been detected. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingCoarseHumanActivityChanges'));
on('stopEvent', run('stopDetectingCoarseHumanActivityChanges'));

on('userStartedBeingStill', run('writeRecords'));
on('userFinishedBeingStill', run('writeRecords'));

on('userStartedWalking', run('writeRecords'));
on('userFinishedWalking', run('writeRecords'));

on('userStartedRunning', run('writeRecords'));
on('userFinishedRunning', run('writeRecords'));

on('userStartedRidingABicycle', run('writeRecords'));
on('userFinishedRidingABicycle', run('writeRecords'));

on('userStartedBeingInAVehicle', run('writeRecords'));
on('userFinishedBeingInAVehicle', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Start / stop receiving updates on human activity changes at an intermediate level

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  startDetectingIntermediateHumanActivityChangesTask,
  stopDetectingIntermediateHumanActivityChangesTask,
} from '@awarns/human-activity';

export const demoTasks: Array<Task> = [
  startDetectingIntermediateHumanActivityChangesTask(),
  stopDetectingIntermediateHumanActivityChangesTask(),
];
\n

Task generator parameters:

\n
\n

These task generators take no parameters

\n
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events, which are: startDetectingIntermediateHumanActivityChangesFinished and stopDetectingIntermediateHumanActivityChangesFinished.

\n

However, once the start task has finished running, relevant events will be emitted by the internal listeners once the corresponding action has been detected. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingCoarseHumanActivityChanges'));
on('stopEvent', run('stopDetectingCoarseHumanActivityChanges'));

on('userStartedBeingStill', run('writeRecords'));
on('userFinishedBeingStill', run('writeRecords'));

on('userStartedStandingUp', run('writeRecords'));
on('userFinishedStandingUp', run('writeRecords'));

on('userStartedWalking', run('writeRecords'));
on('userFinishedWalking', run('writeRecords'));

on('userStartedRunning', run('writeRecords'));
on('userFinishedRunning', run('writeRecords'));

on('userStartedRidingABicycle', run('writeRecords'));
on('userFinishedRidingABicycle', run('writeRecords'));

on('userStartedBeingInAVehicle', run('writeRecords'));
on('userFinishedBeingInAVehicle', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
userStartedBeingStillHumanActivityChangeIndicates that the user of the phone has stopped moving
userFinishedBeingStillHumanActivityChangeIndicates that the user of the phone has started moving
userStartedStandingUpHumanActivityChangeIndicates that the user of the phone has started standing up
userFinishedStandingUpHumanActivityChangeIndicates that the user of the phone has finished standing up
userStartedWalkingHumanActivityChangeIndicates that the user of the phone has started to walk
userFinishedWalkingHumanActivityChangeIndicates that the user of the phone has stopped walking
userStartedRunningHumanActivityChangeIndicates that the user of the phone has started to run
userFinishedRunningHumanActivityChangeIndicates that the user of the phone has stopped running
userStartedRidingABicycleHumanActivityChangeIndicates that the user of the phone has started riding a bicycle
userFinishedRidingABicycleHumanActivityChangeIndicates that the user of the phone has stopped riding a bicycle
userStartedBeingInAVehicleHumanActivityChangeIndicates that the user of the phone has started being in a vehicle
userFinishedBeingInAVehicleHumanActivityChangeIndicates that the user of the phone has stopped being in a vehicle
\n

Records

\n

HumanActivityChange

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways human-activity
changeChangeCan be either start or end. Indicates if the change reflects the activity starting or finishing
timestampDateThe local time when the change was detected
activityHumanActivityThe activity which was detected. Can be any of the ones supported by the context-apis plugin (see context-apis API docs section on human activity, to obtain the full list)
confidencenumberProbability value of the detected action reported by the activity detection mechanism. Ranges from 0 to 1. This field will contain an undefined value in records reported by the coarse detection mechanism
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uuid-v2":{"name":"nativescript-uuid-v2","version":"2.0.1","license":"Apache-2.0","readme":"

NativeScript UUID (Version 2)

\n

This version of NativeScript UUID replaces the outdated call to tns-core-modules with @nativescript/core, making this library compatible with NativeScript 8.

\n

Description

\n

This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

\n

Uses the SAMKeychain Cocoa Pod on iOS.

\n

Installation

\n

Run the following command from the root of your project:

\n
ns plugin add nativescript-uuid-v2
\n

Getting Started

\n

JavaScript

\n
  const nsUuid = require(\"nativescript-uuid-v2\");

  const uuid = nsUuid.getUUID();
  console.log(`The device UUID is ${uuid}`);
\n

TypeScript

\n
  import {getUUID} from 'nativescript-uuid-v2';

  const uuid = getUUID();
  console.log(`The device UUID is ${uuid}`);
\n

Security

\n

If you discover a security vulnerability within this package, please send an email to Bespoke Technology Labs at hello@bespoke.dev. All security vulnerabilities will be promptly addressed. You may view our full security policy here.

\n

License

\n

The NativeScript UUID V2 Library is licensed under The Apache 2.0 License.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-woosim-printer":{"name":"@ticnat/nativescript-woosim-printer","version":"1.0.4","license":"Apache-2.0","readme":"

NativeScript Woosim Printer

\n

\"npm

\n

This plugin integrate your nativescript app with Woosim Intermec Pr3 printer to print a normal text or a bmp.

\n

Prerequisites / Requirements

\n

You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

\n

Installation NS7 Only

\n
tns plugin add @ticnat/nativescript-woosim-printer
\n

Usage

\n

Create Plugin instance

\n
let printer = new WoosimPrinter();
\n

Connect to the printer through:

\n
this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
\n

To Print Normal Text use:

\n
printer.print(\"Hello World\");
\n

To Print a BMP image:

\n
printer.printImg(bmp);
\n

To Print Txt File:

\n
let documents = fs.knownFolders.currentApp();
var myFile = documents.getFile(\"mytextfile.txt\");
this.printer.printTextFile(myFile);
\n

for more information see the demo

\n

API Property

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertytypeDefaultDescription
paperSizeenumPaperSizes.FourInchset the default paper size for the printer
debugbooleanfalseset the plugin in debug mode
\n

API Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescriptionParams
connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
disconnect():voiddisconnect from a printer
print(text: string): voidprint normal texttext : the text you want to print
printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
printTextFile(file: any): void;Print Txt fileFile: NS File
\n

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tzkit/idscanner":{"name":"@tzkit/idscanner","version":"1.0.3","license":"Apache-2.0","readme":"

@tzkit/idscanner

\n
npm install @tzkit/idscanner
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-geolocation-lt":{"name":"nativescript-background-geolocation-lt","version":"1.9.1","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pusher-ns":{"name":"nativescript-pusher-ns","version":"1.0.1","license":"MIT","readme":"

Pusher Nativescript

\n

Pusher NativeScript adds Pusher support to {N} applications.

\n

There is not official support for NativeScript in pusher-js sdk, but the Pusher team made a great work designing the JS library to target multiple platforms (react-native, node, browser, etc), while reusing a lot of code in the process. Taking advantage of that architecture, we were able to create a version of the pusher-js sdk that maintains the original API and provides support for NativeScript.

\n

Usage

\n

You can install the library using any npm compatible package manager, like npm or yarn:

\n
$ npm install --save pusher-nativescript
\n

Or use NativeScript CLI:

\n
$ tns plugin add pusher-nativescript
\n

Once the package has been installed, you can import it

\n

As a CommonJS module:

\n
const Pusher = require('pusher-nativescript');
\n

Or ES6 module:

\n
import Pusher from 'pusher-nativescript';
\n

If you are using Typescript you might have to import it like this:

\n
import * as Pusher from 'pusher-nativescript';
\n

This build of pusher-js uses NativeScript's Connectivity API to detect changes on connectivity state. It will use this to automatically reconnect.

\n

On Android, to access any connection related information we will need explicit permission from the user. To enable the permission request add the follwing in app/App_Resources/Android/AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
\n

NativeScript do not have official support for WebSockets. We are relying on nativescript-websockets plugin to add that support. That is why the plugin is a peer dependency.

\n

As it was mentioned above, pusher-nativescript shares the same API as the official pusher-js library. To see how the library is used and configured checkout pusher-js repository.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-nativescript-ui":{"name":"svelte-native-nativescript-ui","version":"1.0.0","license":"MIT","readme":"

Svelte Native - NativeScript UI

\n

Provides support for using NativeScript UI in Svelte Native Applications

\n

\"example-app\"

\n

Usage

\n

npm install any of the following nativescript ui packages you wish to use.

\n

Supported:

\n\n

In your project's app.ts file, add:

\n
//import the components you are using
import RadListViewElement from \"svelte-native-nativescript-ui/listview\"
import RadSideDrawerElement from \"svelte-native-nativescript-ui/sidedrawer\"
import RadCalendarElement from \"svelte-native-nativescript-ui/calendar\"
import Charts from \"svelte-native-nativescript-ui/chart\"
import RadDataFrom from \"svelte-native-nativescript-ui/dataform\"
import Gauges from \"svelte-native-nativescript-ui/gauge\"
import AutoCompleteElement from \"svelte-native-nativescript-ui/autocomplete\"

//register them with svelte-native so they can be used in svelte components
RadListViewElement.register();
RadSideDrawerElement.register();
RadCalendarElement.register();
Charts.register();
RadDataFrom.register();
Gauges.register();
AutoCompleteElement.register();
\n

Then use them in your .svelte components:

\n
  <radSideDrawer>
    ...
    <radSideDrawer.mainContent>
       <radListView>
        ...
       </radListView>
    </radSideDrawer.mainContent>  
  </radSideDrawer>
\n

Demo Project

\n

The included demo project can be launched with:

\n
$ cd demo
$ npm install
$ tns run android
\n

The demo contains examples for each of the supported elements that you can use as a starting poing.

\n

Usage

\n

The documentation for the supported controls can be obtained from the NativeScript site

\n\n

The differences between the documentation at the nativescript site and the usage in svelte-native can be observed by looking at the examples in the demo project.

\n

The main differences are the assigning of configuration elements to their parent's properties, and the handling of templates.

\n

Automatic parent properties

\n

Most configuration elements in the nativescript-ui components only have a single valid parent component and property that they can be assigned to. Svelte Native sets the default parent property for these configuration elements where possible.

\n

eg

\n
  <chart:RadCartesianChart id=\"cartesianChart\">
    <chart:RadCartesianChart.horizontalAxis>
        <chart:CategoricalAxis/>
    </chart:RadCartesianChart.horizontalAxis>
    <chart:RadCartesianChart.verticalAxis>
        <chart:LinearAxis/>
    </chart:RadCartesianChart.verticalAxis>
    <chart:RadCartesianChart.series>
        <chart:LineSeries items=\"{{ categoricalSource }}\" categoryProperty=\"Country\" valueProperty=\"Amount\">
        </chart:LineSeries>
    </chart:RadCartesianChart.series>
  </chart:RadCartesianChart>
\n

becomes:

\n
  <radCartesianChart id=\"cartesianChart\">
    <categoricalAxis prop:horizontalAxis />
    <linearAxis prop:verticalAxis/>
    <lineSeries items=\"{ categoricalSource }\" categoryProperty=\"Country\" valueProperty=\"Amount\" />
  </radCartesianChart>
\n

Note that since the axis elements are valid on either the horizontalAxis or verticalAxis properties, they still need to be specified using svelte-natives prop: directive.

\n

Template Element

\n

When a controls needs to render a child view multiple times (RadAutoCompleteTextView, RadListView) , Svelte Native configures the controls to use Template elements.

\n

For RadListView the item the template represents is given by the type, eg:

\n
  <Template type=\"{ListViewViewType.HeaderView}\" > 
    <label class=\"header\">This is a Header</label>
  </Template>

  <Template type=\"{ListViewViewType.FooterView}\" > 
    <label class=\"footer\">This is a Footer</label>
  </Template>
\n

For Autocomplete it is given as the child of a suggestionView element:

\n
  <suggestionView suggestionViewHeight=\"300\">
    <Template let:item>
        <stackLayout orientation=\"horizontal\" height=\"40\">
            <label text=\"{ item.text }\" marginLeft=\"10\" verticalAlignment=\"center\"/>
        </stackLayout>
    </Template>
  </suggestionView>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@chris7519/nativescript-typeorm-plugin":{"name":"@chris7519/nativescript-typeorm-plugin","version":"1.0.7","license":"Apache-2.0","readme":"

@chris7519/typeorm

\n

Usage

\n
    \n
  1. \n

    Install the dependencies for nativescript sqlite and typeorm in your Nativescript project.

    \n
    npm i typeorm reflect-metadata nativescript-sqlite
    ns plugin add @chris7519/typeorm
    \n
    2. \n
  2. \n

    Create a database connection in your applications entry point eg. main.ts

    \n
    let driver = require('nativescript-sqlite');

    // use an iife to run it before angular starts
    (async () => {
        console.log('START APP')
        try {
            const connection = await createConnection({
                database: 'test.db',
                type: 'nativescript',
                driver,
                entities: [
                    User,
                    // ... more models here
                ],
                logging: true
            })

            // Dangerously drops all tables on app start if true
            // connection.synchronize(true);

            console.log(\"Connection Created\")
        } catch (err) {
            console.error(err)
        }
    })();
    \n
    3. \n
  3. \n

    Then follow the instructions on how to use TypeOrm

    \n
    4. \n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-soft-keyboard":{"name":"nativescript-soft-keyboard","version":"2.3.0","license":"Apache-2.0","readme":"

nativescript-soft-keyboard

\n

It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But Nativescript app sometimes needs this information to achieve a good user interface.

\n

Breaking changes

\n

nativescript-soft-keyboard@2 for Nativescript@7

\n

nativescript-soft-keyboard@1 for Nativescript version < 7

\n

Installation

\n
tns plugin add nativescript-soft-keyboard
\n

Usage

\n
    registerSoftKeyboardCallback((h) => console.log(h))
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
functionparameterDescription
registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
\n

License

\n

Apache License Version 2.0, January 2004

\n
ns plugin add nativescript-soft-keyboard
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-sdk-n7":{"name":"nativescript-google-maps-sdk-n7","version":"3.0.7","license":"MIT","readme":"

NativeScript plugin for the Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

\"NPM\n\"Dependency

\n

\"NPM\"

\n

Prerequisites

\n

NativeScript - The latest nativescript-cli@7 is highly recommended.

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling:

\n
ns plugin add nativescript-google-maps-sdk
\n

or in case of nativescript < 7, proceed with the old command:

\n
tns plugin add nativescript-google-maps-sdk
\n

Setup

\n

See demo code included here

\n

See a live demo here

\n

Configure API Key for Android

\n

Nativescript 4+

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/google_maps_api_key.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Nativescript < 4

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
\n

Next, modify your app/App_Resources/Android/values/google_maps_api_key.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) { 
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
    <GridLayout>
        <maps:mapView
            latitude=\"{{ latitude }}\"
            longitude=\"{{ longitude }}\"
            zoom=\"{{ zoom }}\"
            bearing=\"{{ bearing }}\" 
            tilt=\"{{ tilt }}\"
            mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
            padding=\"{{ padding }}\"
            mapReady=\"onMapReady\"  
            markerSelect=\"onMarkerSelect\"
            markerBeginDragging=\"onMarkerBeginDragging\"
            markerEndDragging=\"onMarkerEndDragging\"
            markerDrag=\"onMarkerDrag\"
            cameraChanged=\"onCameraChanged\" 
            cameraMove=\"onCameraMove\"
        />
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

\n

Basic Example

\n
//  /app/main-page.js

var mapsModule = require(\"nativescript-google-maps-sdk\");

function onMapReady(args) {
    var mapView = args.object;
    
    console.log(\"Setting a marker...\");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.userData = { index : 1};
    mapView.addMarker(marker);
    
    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
}

function onCameraMove(args) {
    console.log(\"Camera moving: \"+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;
\n

Custom Info Windows (Beta)

\n

To use custom marker info windows, define a template in your view like so:

\n
<!-- /app/main-page.xml -->
<Page 
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
  <GridLayout>
       <maps:mapView mapReady=\"onMapReady\">
            <!-- Default Info Window Template -->       \t\t
            <maps:mapView.infoWindowTemplate>
                <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                    <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                    <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                    <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                    <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                </StackLayout>
            </maps:mapView.infoWindowTemplate>
            <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key=\"testWindow\">
                    <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                        <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                        <Label text=\"Let's Begin!\" className=\"title\" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>
        </maps:mapView>
  </GridLayout>
</Page>
\n

...and set the infoWindowTemplate property like so:

\n
var marker = new mapsModule.Marker();
marker.infoWindowTemplate = 'testWindow';
\n

This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

\n

** Known issue: remote images fail to display in iOS info windows (local images work fine)

\n

Usage with Angular

\n

See Angular demo code included here

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register MapView plugin in order to use in Angular templates
registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)=\"onMapReady($event)\"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"MapView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");
    };
}
\n

Angular 8 Support

\n

If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

\n
@ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
\n

Angular 10 Support

\n

Full Angular 10 (with Ivy Compiler) support is under development and will be released in the next two weeks, starting from today (09/06/2020).

\n

Clustering Support (Issue #57)

\n

There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

\n

Get Help

\n

Checking with the Nativescript community is your best bet for getting help.

\n

If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

\n

If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@viostec/nativescript-helloworld":{"name":"@viostec/nativescript-helloworld","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript nativescript-helloworld

\n
ns plugin add @viostec/nativescript-helloworld
\n

Usage

\n

Plugin contém a função helloWorld()

\n
import { NativescriptHelloworld } from '@viostec/nativescript-helloworld';

const ns = new NativescriptHelloworld();
ns.helloWorld();
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@roelandtsw/scanner-plugin-test":{"name":"@roelandtsw/scanner-plugin-test","version":"1.0.6","license":"Apache-2.0","readme":"

@roelandtsw/scanner-plugin-test

\n
ns plugin add @roelandtsw/scanner-plugin-test
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braintree":{"name":"nativescript-braintree","version":"3.1.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

nativescript-braintree

\n

Braintree Payment NativeScript plugin for Android & iOS (9+). Works with NS 6+

\n

Detail information here:

\n

https://developers.braintreepayments.com/start/hello-client/android/v2

\n

https://developers.braintreepayments.com/guides/drop-in/overview/ios/v4

\n

You will need a Server to Generate a client token. You can follow here:\nhttps://developers.braintreepayments.com/start/hello-server/php

\n

Note: Your app's package ID should be lowercase letters. If your package contains underscores, the underscores should be removed. Detail: https://developers.braintreepayments.com/guides/client-sdk/setup/android/v2#browser-switch-setup

\n

For iOS (Important)

\n

For Paypal & Venmo setup, must need to follow bellow setup-ios-paypal--venmo

\n

Platforms

\n

Android

\n

iOS (9+)

\n

Installation

\n

Nativescript 7+:

\n
tns plugin add nativescript-braintree
\n

NativeScript 5-6

\n
tns plugin add nativescript-braintree@2.0.9
\n

NativeScript 4.x

\n
tns plugin add nativescript-braintree@2.0.1
\n

Usage

\n
import { Braintree, BrainTreeOptions } from 'nativescript-braintree';

let opts :BrainTreeOptions = {
  amount: \"10.0\",
  collectDeviceData: true,
  requestThreeDSecureVerification: false
}

let token = token; //Get the token from server. https://developers.braintreepayments.com/start/hello-server/php

let braintree = new Braintree();

braintree.startPayment(token, opt);

braintree.on(\"success\", function (res) {
    let output = res.object.get(\"output\");
    console.dir(output);
})

braintree.on(\"cancel\", function (res) {
    let output = res.object.get(\"output\");
    console.dir(output);
})

braintree.on(\"error\", function (res) {
    let output = res.object.get(\"output\");
    console.dir(output);
})
\n

Set up Apple Pay

\n

If you want to use Apple Pay there are a few steps you must complete.

\n
    \n
  1. \n

    Set up your Apple Pay Certificate in Braintree and in the Apple Developer Portal\nFollow the configuration steps here: https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4

    \n
    2. \n
  2. \n

    To prevent compiler errors and to provide intellisense when working with native iOS classes add tns-platform-declarations to your project. Here is a video guide showing how to do that: https://www.youtube.com/watch?v=vz7qfpeghFs

    \n
    3. \n
\n

Note: It was implemented this way so that the developer has more customization capabilities rather than putting some of this logic inside the plugin which might be harder for authors to modify if needed.

\n
    \n
  1. Populate applePayPaymentRequest property on the BrainTreeOptions class depending on how you want the Apple Pay prompt to look.
    2. \n
\n

Note: The apple pay prompt will make the last item in the paymentSummaryItems show like a total. Therefore you can just add the summary/total item manually or put a summary/total item at the end of the applePayLineItems array.

\n

Itemized Apple Pay

\n

\"Itemized

\n

If you want an itemized prompt like above, do the following:

\n
import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';

let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();

// If you want to show an itemized Apple Pay prompt.
let applePayLineItems = [
            {
                label: \"Service\",
                amount: 0.02
            },
            {
                label: \"Delivery\",
                amount: 0.03
            },
\t    {
\t    \tlabel: \"Company Name\",
\t\tamount: 0.05
\t    }
        ];

let lineItemsArray = [];

applePayLineItems.map((lineItem: ApplePayLineItem) => {

let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString()));

lineItemsArray.push(pkSummaryItem);
});


let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);

applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
applePayPaymentRequestObj.countryCode = \"US\";
applePayPaymentRequestObj.currencyCode = \"USD\";
applePayPaymentRequestObj.merchantIdentifier = \"YOUR_MERCHANT_IDENTIFIER\";
applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;

// Configure your allowed networks
let networksArray = NSArray.alloc().initWithArray([
    \"AmEx\",
    \"Discover\",
    \"MasterCard\",
    \"Visa\",
]);

applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;

let opt: BrainTreeOptions = {
    amount: \"0.01\", // This is ignored if Apple Pay is the selected payment method
    collectDeviceData: false,
    requestThreeDSecureVerification: true,
    // Apple Pay payment request
    applePayPaymentRequest: applePayPaymentRequestObj,
};
\n

Summary Apple Pay

\n

\"Summary

\n

If you want a summary prompt like above, do the following:

\n
import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';

let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();

// If you want to show a summary Apple Pay prompt.
let applePayLineItems = [
\t    {
\t    \tlabel: \"Company Name\",
\t\tamount: 0.02
\t    }
        ];

let lineItemsArray = [];

applePayLineItems.map((lineItem: ApplePayLineItem) => {

let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString()));

lineItemsArray.push(pkSummaryItem);
});


let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);

applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
applePayPaymentRequestObj.countryCode = \"US\";
applePayPaymentRequestObj.currencyCode = \"USD\";
applePayPaymentRequestObj.merchantIdentifier = \"YOUR_MERCHANT_IDENTIFIER\";
applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;

// Configure your allowed networks
let networksArray = NSArray.alloc().initWithArray([
    \"AmEx\",
    \"Discover\",
    \"MasterCard\",
    \"Visa\",
]);

applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;

let opt: BrainTreeOptions = {
    amount: \"0.01\", // This is ignored if Apple Pay is the selected payment method
    collectDeviceData: false,
    requestThreeDSecureVerification: true,
    // Apple Pay payment request
    applePayPaymentRequest: applePayPaymentRequestObj,
};
\n

Setup Google Pay

\n

In order to utilize the Google Pay services you must ensure you have set up the required meta tag in your AndroidManifest.xml detailed here: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3

\n

Also be sure to provide the a currency code in the BrainTreeOptions, as this is required.

\n
let opts: BrainTreeOptions = {
            amount: \"0.01\",
            collectDeviceData: false,
            requestThreeDSecureVerification: true,
            enableGooglePay: true, // need to do additional setup for android. Please check demo project. Details: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3#add-google-play-services-wallet
            currencyCode: \"USD\"
        };
\n

Setup iOS paypal & Venmo.

\n

If you want to use Paypal & Venmo then you will need to edit your app Info.plist file which is located app/App_Resources/iOS/Info.plist to add URL scheme like this:

\n
<key>CFBundleURLTypes</key>
<array>
\t<dict>
\t\t<key>CFBundleURLSchemes</key>
\t\t<array>
\t\t\t<string>org.nativescript.demo.payments</string>
\t\t</array>
\t</dict>
</array>
\n

This scheme must start with your app's Bundle ID and be dedicated to Braintree app switch returns. For example, if the app bundle ID is com.yourcompany.yourapp, then your URL scheme could be com.yourcompany.yourapp.payments or com.yourcompany.yourapp.anything. Above I used org.nativescript.demo.payments because app's bundle ID is org.nativescript.demo & we will need this value below.

\n

Now open your app.ts or main.ts (for Angular) file. Add following lines before application.start({ moduleName: "main-page" }); or platformNativeScriptDynamic().bootstrapModule(AppModule); (Angular).

\n
import * as app from \"application\";
import { setupBraintreeAppDeligate } from \"nativescript-braintree\"

if (app.ios) {
    setupBraintreeAppDeligate(\"org.nativescript.demo.payments\");
}
\n

Example:

\n

https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/app.ts

\n

https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/App_Resources/iOS/Info.plist

\n

ref: https://developers.braintreepayments.com/guides/paypal/client-side/ios/v4

\n

Using 3D Secure

\n

In order to use 3D Secure payments which is required to satisfy PSD2 Strong Consumer Authentication (SCA) compliance requirements you should set requestThreeDSecureVerification: true in your options. Also it is required to set an amount.

\n

Credits

\n

Special thanks to @Pip3r4o, @TylerBlakeLOU, @SamGosman

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-identomat":{"name":"nativescript-identomat","version":"1.0.9","license":"Apache-2.0","readme":"

nativescript-identomat

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-identomat
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-search-view":{"name":"nativescript-search-view","version":"1.0.7","license":"Apache-2.0","readme":"

nativescript-segment-view

\n

A NativeScript plugin to extend segmentBar, make style same in android and ios.

\n

Sample Screenshots

\n

Android

\n

Sample 1

\n

\"Sample1\"

\n

iOS

\n

Sample 1

\n

\"Sample1\"

\n

Installation

\n
tns plugin add nativescript-search-view
\n

Usage

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:ui=\"nativescript-search-view\">
  <StackLayout class=\"p-20\">
    <Label text=\"{{ message }}\" class=\"t-20 text-center c-black\" textWrap=\"true\"/>
    <ui:SearchView  loaded=\"svLoaded\" hint=\"Input keyword\" clear=\"onClear\" submit=\"onSubmit\"
      btnClick=\"onBtnClick\"
      cancelButtonText=\"Search\"
      searchBarIcon=\"~/images/search.png\"
      clearIcon=\"~/images/clear.png\"
      style=\"corner-radius:2.0;border-width:1;border-color:#FF0000;search-field-cursor-color:#FFFF00;search-field-text-color:#FFFF00;
    search-field-background-color:green;placeholder-color:#FFFF00;cancel-button-text-color:blue;\" />
    <ui:SearchView  loaded=\"svLoaded\" hint=\"Input keyword\" clear=\"onClear\" submit=\"onSubmit\"
      btnClick=\"onBtnClick\" style=\"corner-radius:2.0;border-width:1;border-color:#CCCCCC;\" />
  </StackLayout>
</Page>
\n

Angular NativeScript

\n

the app.module.ts of your app

\n
import { NativeScriptSearchViewModule } from \"nativescript-search-view/angular\";
...
@NgModule({
    imports: [
        ...
        NativeScriptSearchViewModule,
        ...
    ]
    ...
})
export class AppModule { }
\n
<SearchView id=\"1\" (loaded)=\"onLoad()\" (clear)=\"onClear()\" (submit)=\"onSubmit($event)\"
    (btnClick)= \"onBtnClick()\"
    cancelButtonText=\"Search\"
    searchBarIcon=\"~/images/search.png\"
    clearIcon=\"~/images/clear.png\"
    style=\"orner-radius:2.0;border-width:1;border-color:#FF0000;search-field-cursor-color:#FFFF00;search-field-text-color:#FFFF00;
    search-field-background-color:green;placeholder-color:#FFFF00;cancel-button-text-color:blue;\"></SearchView>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tralves/shadowed-label":{"name":"@tralves/shadowed-label","version":"2.0.1","license":"Apache-2.0","readme":"

@tralves/shadowed-label

\n\n \"npm\"\n\n\n \"npm\"\n\n\n \"stars\"\n\n\n \"donate\"\n\n

A NativeScript plugin that extends the <Label> UI widget by adding the text-shadow CSS property.

\n
\n

This package only works on NativeScript >=7.0. You will find the NS 6 version here;

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
shadow examplessample from the playground
\"\"\"\"
\n

Installation

\n
ns plugin add @tralves/shadowed-label
\n

Usage

\n

After installing the plugin, you can add the shadow to the shadowed label with the CSS syntax:

\n

text-shadow: <offset-x> <offset-y> <blur-radius> <color>

\n

E.g.

\n
.shadow1 {
    text-shadow: 1 1 3 blue;
}

.shadow2 {
    text-shadow: 10px 10px 10px rgba(100, 130, 200, 0.8);
}
\n

You can also add the text shadow as a property (e.g. <ShadowedLabel textShadow="1 1 1 #55a">)

\n

iOS note: The blur radius appears to scatter the shadow more on iOS and on Android.

\n

NativeScript Plain

\n

IMPORTANT: Make sure you include xmlns:ui="@tralves/shadowed-label" on the Page element

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ui=\"@tralves/shadowed-label\">
  <StackLayout class=\"p-20\">
    <ui:ShadowedLabel
      class=\"h1 text-center\"
      text=\"title with CSS shadow\"
    />
    <ui:ShadowedLabel
      text=\"color shadow\"
      textShadow=\"2 10 4 rgb(255, 100, 100)\"
      fontStyle=\"italic\"
      fontSize=\"40\"
      class=\"m-b-20 text-center\"
    />
    <ui:ShadowedLabel
      class=\"m-t-20 c-black\"
      style=\"text-shadow: 1 1 1 #55a\"
      textWrap=\"true\"
      text=\"Shadow in 'style'!\"
    />
  </GridLayout>
</Page>
\n

CSS

\n
.h1 {
    text-shadow: 2 2 2 #aaa;
    font-weight: bold;
}
\n
\n

NativeScript Angular

\n

Add the following lines to app/app.module.ts:

\n
import { registerElement } from '@nativescript/angular';
import { ShadowedLabel } from '@tralves/shadowed-label'; 

registerElement('ShadowedLabel', () => ShadowedLabel);
\n
<ShadowedLabel
    row=\"0\"
    class=\"h1 text-center\"
    text=\"title with shadow\"
    textShadow=\"0 0 6 rgb(100, 100, 200)\"
></ShadowedLabel>
<ShadowedLabel
    row=\"1\"
    text=\"color shadow\"
    textShadow=\"2 10 4 rgb(255, 100, 100)\"
    fontStyle=\"italic\"
    fontSize=\"40\"
    class=\"m-b-20 text-center\"
></ShadowedLabel>
\n
\n

NativeScript Vue

\n
import Vue from 'nativescript-vue';
Vue.registerElement('ShadowedLabel', () => require('@tralves/shadowed-label').ShadowedLabel);
\n
<shadowed-label
    text=\"color shadow\"
    textShadow=\"2 10 4 rgb(255, 100, 100)\"
    fontStyle=\"italic\"
    fontSize=\"40\"
    class=\"m-b-20 text-center\"
/>
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-pdf-view":{"name":"@finanzritter/nativescript-pdf-view","version":"3.0.3","license":"MIT","readme":"

NativeScript PDFView

\n

\"npm\"\n\"npm\"

\n

:construction: Work in progress

\n

This package was forked from the unmaintained package\nmadmas/nativescript-pdf-view which in turn is a\nfork of Merott/nativescript-pdf-view. We are\ncurrently cleaning up and updating the code.

\n
\n

A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

\n

This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

\n

My aim is to keep the features consistent across iOS and Android.

\n

Installation

\n
tns plugin add @finanzritter/nativescript-pdf-view
\n

Usage

\n

Vanilla NativeScript

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:pdf=\"@finanzritter/nativescript-pdf-view\"
  loaded=\"pageLoaded\">
  <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
</Page>
\n

Angular NativeScript

\n
import { PDFView } from '@finanzritter/nativescript-pdf-view';
import { registerElement } from 'nativescript-angular';
registerElement('PDFView', () => PDFView);
\n
<PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
\n

Vue.js NativeScript

\n
import Vue from 'nativescript-vue';
Vue.registerElement('PDFView', () => require('@finanzritter/nativescript-pdf-view').PDFView)
\n
<PDFView :src=\"pdfUrl\" :enableAnnotationRendering=\"true\" />
\n

Demo

\n

Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

\n

Demo Vue

\n

Check out the demo-vue folder for a demo application built with Vue.js using this plugin. You can run the demo by executing npm run demo-vue.ios and npm run demo-vue.android from the root directory of the project.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/set-version":{"name":"@nativescript-community/set-version","version":"0.3.1","license":"ISC","readme":"

nativescript-set-version

\n

\"License:

\n

This tool allows you to easily update the version of a Nativescript application.\nIt will update the following files if found:

\n\n

Version number format

\n

In order to use this package, your project version must comply with the format described on semver.org.

\n

Setup and Usage

\n

There are two ways to install nativescript-set-version: globally and locally.

\n

Local Installation

\n

This is the recommended way to install nativescript-set-version.

\n

npm:

\n
npm install nativescript-set-version --save-dev
\n

yarn:

\n
yarn add nativescript-set-version --dev
\n

You can then use this command in your project directory to run nativescript-set-version:

\n

npm:

\n
$ npm run setVersion <version>
-- or --
$ npm run set-version <version>
\n

yarn:

\n
$ yarn setVersion <version>
-- or --
$ yarn set-version <version>
\n

Global Installation

\n

This installation method allows you to use nativescript-set-version in any project.

\n

npm:

\n
npm install -g nativescript-set-version
\n

yarn:

\n
yarn global add nativescript-set-version
\n

You can then use this command in your project directory to run nativescript-set-version:

\n
setVersion <version>
-- or --
set-version <version>
\n

Behaviour

\n

When invoked, nativescript-set-version will make the following changes to your project files:

\n

Update Package Version

\n

The version attribute in package.json will be updated with the specified version.

\n

Update Android Project Version

\n

It will update the version name and the version code in both app.gradle and AndroidManifest.xml.

\n

About AndroidManifest.xml

\n

Version information should not be in the AndroidManifest.xml since this information is overridden by app.gradle.

\n

See https://developer.android.com/studio/publish/versioning for further informations.

\n

For that reason nativescript-set-version will only write in the AndroidManifest.xml if android:versionCode and/or android:versionName are already in the file.

\n

Update iOS Project Version

\n

It will update the CFBundleShortVersionString and the CFBundleVersion in Info.plist.

\n

How the version code and CFBundleVersion are updated

\n

The Android version code represents your version number as an integer. This\npackage uses the following format to generate this integer:

\n
<MAJOR><MINOR ON 2 DIGITS><PATCH ON 2 DIGITS><BUILD NUMBER>
\n

For instance, the first time you call set-version 3.1.4, it will produce the version code 301041.

\n

If you call the command with the same version a second time, it will increment the build number, to produce 301042.

\n

This also applies if, for instance, you call set-version 3.1.4-rc.1, and then set-version 3.1.4-rc.2.

\n

As for the CFBundleVersion on iOS, it will produce a string in the format <MAJOR>.<MINOR>.<PATCH>.<BUILD NUMBER>.

\n

Example:

\n
$ yarn set-version 1.0.0-rc.1
# Output
# ...
# Will set android version code to 100001
# ...
# Will set CFBundleVersion to 1.0.0.1
$ yarn set-version 1.0.0-rc.2
# Output
# ...
# Will set android version code to 100002
# ...
# Will set CFBundleVersion to 1.0.0.2
$ yarn set-version 1.0.0
# Output
# ...
# Will set android version code to 100003
# ...
# Will set CFBundleVersion to 1.0.0.3
\n

License

\n

This software uses the MIT license.

\n

Contributing

\n

You must use the following style guide:

\n\n

This project contains a linting config, you should setup eslint into your IDE with .eslintrc.js.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"solid-navigation":{"name":"solid-navigation","version":"1.0.0-alpha.8","license":"MIT","readme":"

solid-navigation

\n

Native navigation for SolidJS mobile apps built with NativeScript.

\n
\n

Warning\nThis is a work in progress.

\n
\n

Installation

\n
npm install solid-navigation --save
\n

Usage

\n

Create a router inside a new file, for example app/router.ts;

\n
import { createStackRouter, RouteDefinition } from \"solid-navigation\";

declare module \"solid-navigation\" {
  export interface Routers {
    Default: {
      Home: RouteDefinition<{
        user: string;
      }>;
      Settings: RouteDefinition;
      Feed: RouteDefinition;
    };
  }
}

export const { Route, StackRouter, useParams, useRouter } =
  createStackRouter<\"Default\">();
\n

Use the router in your app:

\n
import Home from \"./home\";
import { Route, StackRouter } from \"./router\";
const App = () => {
  return (
    <StackRouter initialRouteName=\"Home\">
      <Route
        name=\"Home\"
        component={Home}
        initialParams={{
          user: \"@ammarahmed\",
        }}
      />
    </StackRouter>
  );
};
\n

MIT Licensed

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-firebase-updated-new":{"name":"nativescript-firebase-updated-new","version":"2811.1.2","license":"MIT","readme":"

NativeScript Firebase plugin

\n

\"Firebase\"/

\n
\n

For NativeScript 7 compatibility, run tns plugin add @nativescript/firebase.

\n
\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n
\n

For NativeScript 6.1+ compatibility, install polugin version 10: tns plugin add nativescript-plugin-firebase@10.

\n
\n
\n

For NativeScript 6.0 and lower, stick to plugin version < 10.

\n
\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n

Features

\n\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Note: for using separate versions of these files for development and production environments see this section

\n

Installation

\n

If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

\n

From the command prompt go to your app's root folder and execute this for NativeScript 7+:

\n
tns plugin add @nativescript/firebase
\n

or for NativeScript 6:

\n
tns plugin add nativescript-plugin-firebase
\n

This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

\n
\n

Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

\n
\n
\n

Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

\n
\n

Config

\n

If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

\n

You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

\n

You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

\n

Using Vue?

\n

Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

\n

If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

\n

iOS (Cocoapods)

\n

The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

\n

Google Play Services Version

\n

The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Usage

\n

Demo app

\n

If you want a quickstart, clone the repo, then:

\n\n

Start-up wiring

\n

We need to do some wiring when your app starts, so open app.js and add this before application.start();:

\n
JavaScript
\n
// NativeScript 7+
var firebase = require(\"@nativescript/firebase\");

// NativeScript 6-
var firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function () {
      console.log(\"firebase.init done\");
    },
    function (error) {
      console.log(\"firebase.init error: \" + error);
    }
);
\n

TypeScript

\n
// NativeScript 7+
import { firebase } from \"@nativescript/firebase\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
  () => {
    console.log(\"firebase.init done\");
  },
  error => {
    console.log(`firebase.init error: ${error}`);
  }
);
\n

Angular

\n

Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

\n
// NativeScript 7+
import { firebase } from \"@nativescript/firebase\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

@Component({
    // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

Authentication failed: invalid_token

\n

On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

\n
[FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
or
[FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
\n

This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

\n
firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
  iOSEmulatorFlush: true
}).then()
\n

Pod dependency error

\n

If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

\n

This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

\n

Known issues on Android

\n

Genymotion

\n

You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

\n

DexIndexOverflowException

\n
com.android.dex.DexIndexOverflowException: method ID not in..
\n

Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n

java.lang.OutOfMemoryError: GC overhead limit exceeded

\n

Increase the Java Max Heap Size like this (the bit at the end):

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }
  dexOptions {
    javaMaxHeapSize \"4g\"
  }
}
\n

FirebaseApp with name [DEFAULT] doesn't exist

\n

Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

\n

Errors regarding API level 26.0.0

\n

Update your local Android SDKs:

\n

Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

\n

Found play-services:A.C.D, but version B.X.Y is needed..

\n

Update your Android bits like the issue above and reinstall the android platform in your project.

\n

include.gradle: Failed to apply plugin .. For input string: "+"

\n

You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"15.0.0\"
  }
}
\n

Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

\n

Separation of Environments

\n

It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

\n

Setup

\n
    \n
  1. \n

    Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

    \n
    2. \n
  2. \n

    Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

    \n
      \n
    • iOS\n
        \n
      • app/App_Resources/iOS/GoogleService-Info.plist.dev
        • \n
      • app/App_Resources/iOS/GoogleService-Info.plist.prod
        • \n
      \n
      • \n
    • Android\n
        \n
      • app/App_Resources/Android/google-services.json.dev
        • \n
      • app/App_Resources/Android/google-services.json.prod
        • \n
      \n
      • \n
    \n
    3. \n
\n

Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

\n

Build

\n

The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

\n\n

Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

\n

Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leoantares/ns8-batch-notifications":{"name":"@leoantares/ns8-batch-notifications","version":"1.1.1","license":"Apache-2.0","readme":"

@leoantares/ns8-batch-notifications

\n
ns plugin add @leoantares/ns8-batch-notifications
\n

Nativescript Batch plugin

\n

Welcome to Batch's Nativescript Plugin!
\nBatch is a fully fledged mobile engagement platform to execute CRM tactics over iOS, Android & mobile websites.
\nThe purpose of this plugin is to manage Push notifications, in-app messages and more.., for Android and IOS.
\nThis repository contains the plugin's source code and a demo application.

\n

This plugin is an updated fork from nativescript-batch-notifications

\n

Installation

\n

NPM

\n
yarn ns8-batch-notifications
npm i ns8-batch-notifications
\n

Prerequisites / Requirements

\n

First of all, you must create a batch account;
\nThen a configuration is required for each platform;
\nThis process is explained through simple steps in batch official documentation.
\nIOS setup
\nAndroid setup
\nWhen you add your Firebase android project, download the google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

\n

For a quick start using the demo app :

\n\n

Android initialization

\n

We must override the OnCreate method.
\nIn order to do so, change the application name value in the AndroidManifest from com.tns.NativeScriptApplication to something like org.myApp.Application.
\nThen, in the root dir, create a typescript file named : 'application.android.ts' and enter the bellow code.

\n
const firebase = require('@nativescript/firebase');
// @ts-ignore
import { BatchNS } from 'nativescript-batch-notifications';

@NativeClass()
@JavaProxy('org.myApp.Application')
class Application extends android.app.Application {
  public onCreate(): void {
    super.onCreate()
    const batch = new BatchNS(process.env.BASH_ANDROID_KEY);
    this.registerActivityLifecycleCallbacks(batch.native.activityLifeCycleHelper());
    firebase.init().catch(console.dir);
  }
}
\n

You also must add the following in your webpack.config.js.

\n
webpack.chainWebpack(config => {
    if (webpack.Utils.platform.getPlatformName() === 'android') {
        // make sure the path to the applicatioon.android.(js|ts)
        // is relative to the webpack.config.js
        // you may need to use `./app/application.android if
        // your app source is located inside the ./app folder.
        config.entry('application').add('./app/application.android')
    }
})
\n

IOS initialization

\n

We must setup a custom delegate; Override the app.ts in the root dir with the bellow code:

\n
import { Application, isIOS } from \"@nativescript/core\";
// @ts-ignore
import { BatchNS } from \"nativescript-batch-notifications\";

if (isIOS) {
  @NativeClass
  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<any, any>): boolean {
      new BatchNS(process.env.BATCH_IOS_KEY, false);

      return true;
    }
  }

  Application.ios.delegate = MyDelegate;
}
\n

Important notes !!

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stripe-sdk":{"name":"nativescript-stripe-sdk","version":"1.2.0","license":"Apache-2.0","readme":"

NativeScript Stripe-SDK

\n
\n

This repo is based on @Osei Fortune's nativescript-stripe. Perfect job, Sir!

\n
\n

IMPORTANT: Highly recomend using @Osei Fortune's\nnativescript-stripe

\n

The purpose of this plugin is to add some specific functionalities required by the app I work on. I have also wanted to use official nativescript-plugin-seed

\n

Implemented for iOS only - this plugin uses 11.3 Stripe's SDK.

\n\n

Installation

\n
tns plugin add nativescript-stripe-sdk
\n

Usage in Android

\n

Set API key

\n

Add this to the main *.module.ts file (app.module.ts)

\n
import * as application from 'tns-core-modules/application';
import * as platform from 'tns-core-modules/platform';

const stripeSdk = require('nativescript-stripe-sdk');

application.on(application.launchEvent, () => {
  if (platform.isIOS) {
    stripeSdk.StripeSdk.setApiKey('yourAPIKey');
  }
});
\n

Usage in UI

\n
<StripePaymentCardTextField
  (paymentCardTextFieldDidChange)=\"onPaymentCardTextFieldDidChange($event)\">
</StripePaymentCardTextField>
\n

Example paymentCardTextFieldDidChange handler

\n
import { StripeSdk } from 'nativescript-stripe-sdk';

...

onPaymentCardTextFieldDidChange(payload) {
  const isValid = StripeSdk.validateCard(payload.cardParams);

  if (isValid) {
    StripeSdk
      .createToken(payload.cardParams)
      .then(token => {
        console.log('Created token: ', token.toString());
      })
      .catch((error: Error) => {
        console.error('Create token error: ', error);
      });
  }
}
\n

Usage in vanilla NS

\n

IMPORTANT: SDK API key needs to be set on app startup

\n
import { StripeSdk } from 'nativescript-stripe-sdk';

application.on(application.launchEvent, () => {
    if (platform.isIOS) {
        StripeSdk.setApiKey('pk_test_u6EwgR7lHu8YKOqO5AOynNVj');
    }
});
\n

Usage in UI

\n
<ui:StripePaymentCardTextField
  expDate=\"{{ date }}\"
  number=\"{{ number }}\"
  cvc=\"{{ cvc }}\"/>
\n
 <ui:StripePaymentCardTextField
  paymentCardTextFieldDidChange=\"{{ callbackFn }}\"/>
\n

Check if given CC is valid (card of STPCardParams type)

\n
import { StripeSdk } from 'nativescript-stripe-sdk';

const isValid = StripeSdk.validateCard(card);
\n

Generate stripe token

\n

IMPORTANT: valid stripe API key needs to be set on app startup

\n
import { StripeSdk } from 'nativescript-stripe-sdk';

StripeSdk
   .createToken(card.cardParams)
   .then(token => { console.log(token); })
   .catch(error => { console.error(error); });
\n

API

\n

In XML:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
expDatenot setCC expiration date - typeof Date
numbernot setCC number - typeof string
cvcnot setCC expiration date - typeof string
\n

Running the demo app

\n
git clone git@github.com:piotrilski/nativescript-stripe-sdk.git
cd src/
npm run setup
npm run demo.ios
\n

Running angular demo

\n
git clone git@github.com:piotrilski/nativescript-stripe-sdk.git
cd src/
npm run setup
npm run demo.angular.ios
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-postgrest":{"name":"@triniwiz/nativescript-supabase-postgrest","version":"0.3.0","license":"Apache-2.0","readme":"

Nativescript Supabase PostgREST Client

\n
ns plugin add @triniwiz/nativescript-supabase-postgrest
\n

Usage

\n
import { PostgrestClient } from '@triniwiz/nativescript-supabase-postgrest'

const REST_URL = 'http://localhost:3000'
const postgrest = new PostgrestClient(REST_URL)
\n

Credits

\n

Based on postgress-js

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-sdk":{"name":"nativescript-wikitude-sdk","version":"1.0.3","license":"Apache-2.0","readme":"

NativeScript Wikitude SDK

\n

\"npm

\n

\"NPM\"

\n

Provides NativeScript 8+ access to Wikitude Augmented Reality (9.1.0 on Android and 9.0.0 on iOS).

\n

Prerequisites / Requirements

\n

Permissions

\n

Before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

\n

Running the Demo

\n

Basic Vue compatible dmeo is available.

\n

If you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

\n

Then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

\n

Installation

\n

to install for your project you can use:

\n
tns plugin add nativescript-wikitude-sdk
\n

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

\n
import { Wikitude } from \"nativescript-wikitude-sdk\";
// ...snip....
registerElement(\"Wikitude\", () => Wikitude);
\n

and then in your ar.component.html :

\n
<Wikitude
  [url]=\"WikitudeURL\"
  (WorldLoaded)=\"onWorldLoaded($event)\"
  (JSONReceived)=\"onJSON($event)\"
>
</Wikitude>
\n

and in your ar.component.ts:

\n
    import { Wikitude } from 'nativescript-wikitude-sdk';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = \"~/wikitude_world/index.html\";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...
\n

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

\n
    (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
\n

And Voila! you have Wikitude AR working in your Nativescript Application!

\n

Usage

\n

using your own location provider

\n

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

\n

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }
\n

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

\n
this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
\n

this is useful if you want a single location state.

\n

once you have disabled it you can re-enable it with the following :

\n
this.WikitudeInstance.enableLocationProvider();
\n

TODO

\n\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefault valueDescription
url""the URL of the Wikitude "ARWorld"
features`Features.ImageTrackingFeatures.InstantTracking
\n

Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionArgumentsDescription
setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
loadUrl()url: stringloads the URL in the Wikitude WebView
reload()reloads the current Wikitude WebView
clearCache()clears the wikitude Cache
toggleFlash()Toggles the Devices Flash-light
switchCamera()switches the Camera that wikitude uses
captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
enableLocationProvider()enables the location Provider
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionType
WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
\n

all can be imported from the index.d.ts.

\n

Credits

\n
There used to be a fork of @breningham/nativescript-wikitude who originally started the plugin. It has been unfortunately inactive, so another fork was created. Plugin has been since then revamped several times, and this new version came up with all the possible updates for NativeScript 7 compatibility.
\n

License

\n

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sdk-utility":{"name":"nativescript-sdk-utility","version":"1.0.9","license":"Apache-2.0","readme":"

NativeScript SDK Utility

\n

This plugin provides device specific functions that simplify your NativeScript apps.

\n\n

Installation

\n
tns plugin add nativescript-sdk-utility
\n

Usage

\n
```JavaScript\nvar utility = require('nativescript-sdk-utility');\n\nvar sdk = new utility.SDKUtility();\n\nvar version = sdk.getVersion();\nvar build = sdk.getBuild();\nvar is24H = sdk.is24HFormat();\nvar datetime = this.sdk.formatDateTime(new Date(), "MM/dd/yyyy h:mm");\n```)\n\n```TypeScript\nimport { SDKUtility } from 'nativescript-sdk-utility';\n\nexport class MyModel {\n    public version: string;\n    public build: string;\n    public is24H: boolean;\n\n    private sdk: SDKUtility;\n\n    constructor() {\n        super();\n\n        this.sdk = new SDKUtility();\n        this.version = this.sdk.getVersion();\n        this.build = this.sdk.getBuild();\n        this.is24H = this.sdk.is24HFormat();\n        this.datetime = this.sdk.formatDateTime(new Date(), "MM/dd/yyyy h:mm");\n    }\n}\n```\n
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-environment-variables-hook":{"name":"nativescript-environment-variables-hook","version":"1.0.5","license":"Apache-2.0","readme":"

Nativescript Environment Variable Hook

\n

This plugin adds a hook to find and replace environment variables within your AndroidManifest.xml, Info.plist and app.entitlements.

\n

Installation

\n

npm install nativescript-environment-variables-hook --save-dev

\n

Predefined Variables

\n

The plugin provides the following tokens automatically:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TokenDescription
APP_IDApplication ID as defined in nativescript.config.ts
APP_VERSIONVersion taken from package.json
APP_VERSION_CODEAs above but formatted to MMmmpp (Major, Minor, Patch)
\n

Usage

\n

Examples

\n

App_Resources\\Android\\src\\main\\AndroidManifest.xml

\n
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
\txmlns:tools=\"http://schemas.android.com/tools\"
\tpackage=\"__PACKAGE__\"
\tandroid:versionCode=\"{{APP_VERSION_CODE}}\"
\tandroid:versionName=\"{{APP_VERSION}}\">
\n
<activity android:name=\"org.nativescript.auth0.RedirectActivity\" tools:node=\"replace\">
  <intent-filter>
    <action android:name=\"android.intent.action.VIEW\" />

    <category android:name=\"android.intent.category.DEFAULT\" />
    <category android:name=\"android.intent.category.BROWSABLE\" />

    <data
      android:host=\"{{AUTH0_DOMAIN}}\"
      android:pathPrefix=\"/android/{{APP_ID}}/callback\"
      android:scheme=\"{{APP_ID}}\" />
  </intent-filter>
</activity>
\n

.env or Environment Variables

\n
AUTH0_DOMAIN = \"my.domain.auth0.com\"
\n

Additional Templated Files

\n

You can extend the functionality of this hook by adding in additional relative filepaths to you nativescript.config.ts like so

\n

nativescript.config.ts

\n
export default {
  id: 'org.nativescript.example',
  ...
  environmentVariablesHook: {
    additionalPaths: [
      'platforms/android/example.xml',
      'platforms/ios/example.txt'
    ]
  }
} as NativeScriptConfig;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio-reader":{"name":"nativescript-cardio-reader","version":"1.0.18","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"acorn-nativescript-geolocation":{"name":"acorn-nativescript-geolocation","version":"4.5.2","license":"Apache-2.0","readme":"

NativeScript Geolocation \"apple\" \"android\"

\n

\"npm\"\n\"npm\"\n\"Build

\n

Geolocation plugin to use for getting current location, monitor movement, etc.

\n

Installation

\n

In Command prompt / Terminal navigate to your application root folder and run:

\n
tns plugin add nativescript-geolocation
\n

Usage

\n

The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.

\n

In short here are the steps:

\n

Import the plugin

\n

TypeScript

\n
import * as geolocation from \"nativescript-geolocation\";
import { Accuracy } from \"tns-core-modules/ui/enums\"; // used to describe at what accuracy the location should be get
\n

Javascript

\n
var geolocation = require(\"nativescript-geolocation\");
\n

Request permissions

\n
geolocation.enableLocationRequest();
\n

Call plugin methods

\n
// Get current location with high accuracy
geolocation.getCurrentLocation({ desiredAccuracy: Accuracy.high, maximumAge: 5000, timeout: 20000 })
\n

API

\n

Properties

\n

Location

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
latitude-The latitude of the geolocation, in degrees.
longitude-The longitude of the geolocation, in degrees.
altitude-The altitude (if available), in meters above sea level.
horizontalAccuracy-The horizontal accuracy, in meters.
verticalAccuracy-The vertical accuracy, in meters.
speed-The speed, in meters/second over ground.
timestamp-The time at which this location was determined.
\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
desiredAccuracy?Accuracy.highThis will return the finest location available but use more power than any option. Accuracy.any is considered to be about 100 meter accuracy. Using a coarse accuracy such as this often consumes less power.
updateDistanceNo filterUpdate distance filter in meters. Specifies how often to update the location. Read more in Apple document and/or Google documents
updateTime1 minuteInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
minimumUpdateTime5 secsMinimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
maximumAge-How old locations to receive in ms.
timeout5 minutesHow long to wait for a location in ms.
iosAllowsBackgroundLocationUpdatesfalseIf enabled, UIBackgroundModes key in info.plist is required (check the hint below). Allow the application to receive location updates in background (ignored on Android). Read more in Apple document
iosPausesLocationUpdatesAutomaticallytrueAllow deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
iosOpenSettingsIfLocationHasBeenDeniedfalseArgument on the enableLocationRequest. If true, the settings app will open on iOS so the user can change the location services permission.
\n
\n

If iosAllowsBackgroundLocationUpdates is set to true, the following code is required in the info.plist file:

\n
<key>UIBackgroundModes</key>
<array>
   <string>location</string>
</array>
\n
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnsDescription
getCurrentLocation(options: Options)PromiseGet current location applying the specified options (if any).
watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options: Options)numberMonitor for location change.
clearWatch(watchId: number)voidStop monitoring for location change. Parameter expected is the watchId returned from watchLocation.
enableLocationRequest(always?: boolean)Promise<void>Ask for permissions to use location services. The option always is applicable only for iOS. For a custom prompt message on IOS, the following keys are required. NSLocationAlwaysUsageDescription, NSLocationUsageDescription and NSLocationWhenInUseUsageDescription Read more about its usage .
isEnabledPromise<boolean>Resolves true or false based on the location services availability.
distance(loc1: Location, loc2: Location)numberCalculate the distance between two locations. Returns the distance in meters.
\n

Known Issues

\n

Version Conflicts – Google Play Services

\n

If you have installed multiple plugins that use the Google Play Services you might run into version conflicts.\nIn order to fix this you might pin the version number in your app/App_Resources/Android/app.gradle file:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"11.2.+\"
  }
}
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-keyboard-toolbar":{"name":"@cdev38399/nativescript-keyboard-toolbar","version":"4.0.2","license":"Apache-2.0","readme":"

NativeScript Keyboard Toolbar

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n\n

iOS and Android running the included demo - much better framerate on YouTube!

\n

What The Keyboard!?

\n

Glad you asked 😅!

\n\n

Installation

\n
tns plugin add nativescript-keyboard-toolbar
\n

General usage instructions

\n

The plugin works by grabbing your declared toolbar layout and moving it off-screen.

\n

Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

\n

For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

\n

So if your layout structure is currently this:

\n
<ActionBar/>
<StackLayout/>
\n

Change it to this:

\n
<ActionBar/>
<GridLayout>
    <StackLayout/>
    <Toolbar/>
</GridLayout>
\n

Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

\n
\n

Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

\n
\n

Usage with NativeScript Core

\n

Mind the comments in the example below.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"nativescript-keyboard-toolbar\">

    <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
    <GridLayout>

        <StackLayout>
            <Label text=\"Some text\"/>
            <!-- Add an 'id' property that we can reference below -->
            <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
        </StackLayout>

        <!-- The 'forId' and 'height' properties are mandatory -->
        <kt:Toolbar forId=\"priceTextField\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
            </GridLayout>
        </kt:Toolbar>

    </GridLayout>
</Page>
\n

Core demo app

\n

Check the source in the demo folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo.ios # or .android
\n

Usage with NativeScript-Angular

\n

Register the plugin in a specific module, or globally in the app module:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"KeyboardToolbar\", () => require(\"nativescript-keyboard-toolbar\").Toolbar);
\n

In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

\n
<ActionBar>
  <TextField #textField1 id=\"tf1\"></TextField>
</ActionBar>

<!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
<GridLayout>

  <!-- Add whatever visible layout you need here -->
  <ListView [items]=\"items\">
    <ng-template let-item=\"item\">
      <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
    </ng-template>
  </ListView>

  <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
   The 'forId' and 'height' properties are mandatory -->
  <KeyboardToolbar forId=\"tf1\" height=\"44\">
    <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
      <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
      <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
      <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
      <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
    </GridLayout>
  </KeyboardToolbar>
</GridLayout>
\n

Angular demo app

\n

Check the source in the demo-ng folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-ng.ios # or .android
\n

Usage with NativeScript-Vue

\n

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

\n
import Vue from \"nativescript-vue\";
Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <StackLayout>
        <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
      </StackLayout>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
         The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tv2\" height=\"44\">
        <GridLayout columns=\"*, *, *\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
          <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
          <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
        </GridLayout>
      </KeyboardToolbar>

    </GridLayout>
  </Page>
</template>

<script>
  import { topmost } from \"tns-core-modules/ui/frame\";

  export default {
    methods: {
      appendToTextView2(args) {
        const textView = topmost().currentPage.getViewById(\"tv2\");
        textView.text += args.object.text;
      }
    }
  }
</script>
\n

Vue demo app

\n

Check the source in the demo-vue folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-vue.ios # or .android
\n

What about IQKeyboardManager?

\n

If you have IQKeyboardManager installed for better\nkeyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset\nIQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

\n

You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

\n

Future work

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-utils":{"name":"nativescript-webview-utils","version":"4.0.0","license":"Apache-2.0","readme":"

NativeScript WebView Utils plugin

\n

Add request headers to a NativeScript WebView. Perhaps more utils later.

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n
\n

For NativeScript versions older than 7, use a plugin version older than 4.0.0.

\n
\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-webview-utils
\n

Usage

\n

Demo app (XML + TypeScript)

\n

You can run the demo app from the root of the project by typing npm run demo.ios or npm run demo.android.

\n

API

\n

addHeaders

\n

If you're loading a page that requires you to send additional headers (for security perhaps),\nthis function allows you to dynamically inject those to any links within the webview.

\n

NativeScript with Angular

\n
<WebView [src]=\"someSource\" (loaded)=\"webViewLoaded($event)\"></WebView>
\n
import { EventData } from \"tns-core-modules/data/observable\";
import { WebView } from \"tns-core-modules/ui/web-view\";
import { WebViewUtils } from \"nativescript-webview-utils\";

export class MyComponent {
  someSource: string = \"https://httpbin.org/headers\";

  webViewLoaded(args: EventData): any {
    const webView: WebView = <WebView>args.object;
    const headers: Map<string, string> = new Map();
    headers.set(\"Foo\", \"Bar :P\");
    headers.set(\"X-Custom-Header\", \"Set at \" + new Date().toTimeString());
    WebViewUtils.addHeaders(webView, headers);
  }
}
\n

NativeScript with XML

\n
<WebView id=\"webviewWithCustomHeaders\" loaded=\"webViewLoaded\" height=\"360\" src=\"https://httpbin.org/headers\"/>
\n
// then add a few headers in the associated JS / TS file like this:
import { WebViewUtils } from 'nativescript-webview-utils';
import { WebView } from 'tns-core-modules/ui/web-view';
import * as observable from 'tns-core-modules/data/observable';

export function webViewLoaded(args: observable.EventData) {
  const wv: WebView = <WebView>args.object;
  const headers: Map<string, string> = new Map();
  headers.set(\"Foo\", \"Bar :P\");
  headers.set(\"X-Custom-Header\", \"Set at \" + new Date().toTimeString());
  WebViewUtils.addHeaders(wv, headers);
}
\n

setUserAgent

\n

This method was removed in 2.0.0 because it caused bugs when addHeaders was used as well.

\n

You should now use addHeaders and set the User-Agent header:

\n
import { WebViewUtils } from 'nativescript-webview-utils';
import { WebView } from 'tns-core-modules/ui/web-view';
import * as observable from 'tns-core-modules/data/observable';

export function webViewForUserAgentLoaded(args: observable.EventData) {
  const wv: WebView = <WebView>args.object;
  const headers: Map<string, string> = new Map();
  headers.set(\"User-Agent\", \"My Awesome User-Agent!\"); // this line!
  WebViewUtils.addHeaders(wv, headers);
}
\n

Credits

\n

Quite some code was borrowed from this repo.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-context-apis":{"name":"nativescript-context-apis","version":"4.1.3","license":"Apache-2.0","readme":"

NativeScript Context APIs

\n

\"npm\"\n\"npm\"\n\"Build\n\"DOI\"

\n

Painless access to contextual information for your NativeScript apps. Does your app need to know where are your users located? See the Wi-Fi APs that surround them? Maybe the nearby BLE devices? Or perhaps which kind of activities are they doing? If the answer to any of these questions is yes, then, this is your plugin.

\n

Currently we offer:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Information sourceDescriptionAndroidiOS
Current user location and location stream (with distance filtering)Coarse- and fine-grained location reporting. We offer the functionality set by the nativescript-geolocation plugin, extending it with RxJS Observable streams for location stream. By obtaining user locations wrapped in an Observable, you'll able to filter them, take the best one among a small amount or control the stream quite easily by means of the RxJS Operators.✅✅
Coarse- and medium-grained human activity detectionCoarse activity detection (user being still, walking, running, riding a bike or on a vehicle) will notify your app when the user starts or ends an activity and when did that happen. Medium grained detection will allow you to specify the detection interval and leaves for you in-activity filtering. For example, the plugin will report a transition from being in a vehicle to being still when the vehicle stops at a traffic light, thing that does not happen with the coarse activity detection mechanism. More info here.✅Planned
List current nearby Wi-Fi APs (a.k.a Wi-Fi fingerprinting) and obtain fingerprint updatesSimple and batched Wi-Fi fingerprint reporting. We offer two ways of obtaining updates regarding nearby Wi-Fi APs: at a fixed, faster rate (with duplicates) and at the minimum slower rate which ensures all reported scans are new. The later either can be configured to offer a continuous flow of single scans (no grouping) or to provide scans in batches of 2 (intermediate grouping) or 4 (maximum grouping) fingerprints, complying with the latest limitations of the Android OS. Similarly to location updates, wifi scans can be delivered through RxJS Observable, hence allowing all the powerful RxJS Operators to be applied on top of them.✅❌
List current nearby BLE devices and obtain updates regarding their presenceSimple and batched BLE scan reporting. The interval and the mode of the scan can be configured, making it suitable for multiple use cases. By combining a scanning of 0 reporting interval with a low latency mode, devices can be reported as soon as they are detected. Whilst more energy-efficient strategies are possible with larger reporting intervals and low power usage modes. Equally to location and Wi-Fi fingerprint updates, BLE scan updates are delivered through RxJS Observable, thus offering a lot of flexibility to process the list of detected devices.✅❌
\n

What we plan to offer in the future:

\n\n

Prerequisites

\n

Android only

\n
\n

Android SDK 22 (5.1) is required as a minimum due to the dependency of this plugin on @triniwiz/nativescript-couchbase

\n
\n

Google Play Services conflicts

\n

Given that we rely on nativescript-geolocation and use Google Play Services APIs for activity detection on Android devices, you might find Google Play Services version conflicts with other installed plugins.

\n

In order to avoid them, we advise you to force a specific Google Play Services version. For a better human activity detection functionality, version 17 or above is highly recommended. In order to do so, please, indicate the Google Play Services Version number in your app/App_Resources/Android/before-plugins.gradle file (if the file does not exist, just create it):

\n
android {  
  // other things here

  project.ext {
    googlePlayServicesVersion = \"17.+\"
  }
}
\n

Permissions

\n

Next, for each one of the information sources that this plugin offers, you can see the permissions that need to be added to you app's AndroidManifest.xml located inside the App_Resources/Android/src/main directory.

\n
\n

Note: If your app is expected to use more than one of the information sources offered by this plugin, we advise to avoid just copying and pasting the content of each of the following sections inside your application manifest. Check twice for duplicated permissions (e.g., location permissions necessary for both location and Wi-Fi to work) to avoid possible manifest merging errors.

\n
\n

Click on each of the collapsible sections bellow to see the specific permissions required by each information source:

\n
\nGeolocation\n

In order to access geolocation in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

\n
<!-- Always include this permission if your app needs location access -->
<!-- This permission is for \"approximate\" location data -->
<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />

<!-- Include only if your app benefits from precise location access. -->
<!-- This permission is for \"precise\" location data -->
<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />

<!-- Required only when requesting background location access on Android 10 (API level 29) and higher. -->
<uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" />
\n

More information can be found in the Android docs here.

\n
\n

Source: https://github.com/NativeScript/nativescript-geolocation

\n
\n
\n
\nHuman activity detection\n

In order to receive human activity changes in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

\n
<!-- The following two permissions are required if your app wants to receive human activity changes -->
<uses-permission android:name=\"com.google.android.gms.permission.ACTIVITY_RECOGNITION\"/>
<uses-permission android:name=\"android.permission.ACTIVITY_RECOGNITION\"/>
\n

More information can be found in the Android docs here.

\n
\n
\nWi-Fi scan updates\n

In order to receive Wi-Fi scan updates in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

\n
<!-- ALL the following permissions are required in order to ask and retrieve Wi-Fi scan updates -->
<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />
<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>
<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>
\n

More information can be found in the Android docs here.

\n
\n
\nBLE scan updates\n

In order to receive BLE scan updates in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

\n
<!-- ALL the following permissions are required in order to ask and retrieve BLE scan updates -->
<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />
<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>
<uses-permission android:name=\"android.permission.BLUETOOTH_SCAN\"/>
\n

More information can be found in the Android docs here.

\n

Additionally, the BLE scanning API uses the well-known scanning library developed by Nordic Semiconductors. To ensure this library is only included when the BLE scanning apis are meant to be accessed. To do that, you'll have to update your app's app.gradle file located inside the App_Resources/Android/src folder as follows:

\n
// Uncomment
dependencies {
    implementation 'no.nordicsemi.android.support.v18:scanner:1.6.0'
}
\n
\n

Installation

\n

Run the following command in your project's root folder.

\n

NS7+:

\n
ns plugin add nativescript-context-apis
\n

NS6:

\n
tns plugin add nativescript-context-apis@1
\n

(Optional) You'll need RxJS also to properly work with geolocation streams

\n

NS7+:

\n
npm install rxjs --save
\n

NS6:

\n
npm install rxjs@6 --save
\n

Usage

\n

For human activity detection only

\n

For activity detection to properly work, we need to wire native and JavaScript/TypeScript code somewhere.

\n

The best place to do it is in your app's entry point script. You'll need to add a couple of lines to it:

\n
// app.ts / main.ts
// TypeScript App:
import * as app from \"tns-core-modules/application\";
// or Angular App:
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { AppModule } from \"./app/app.module\";

// NativeScript Task Context APIs plugin import
// (always between imports and app initialization)
import { contextApis } from \"nativescript-context-apis\";

contextApis.init().catch((err) => {
  // You can catch initialization errors here
});

// TypeScript App:
app.run({ moduleName: \"app-root\" });
// Angular App:
platformNativeScriptDynamic().bootstrapModule(AppModule);
\n

Geolocation

\n

In case you want to obtain geolocation updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

\n
import { contextApis } from \"nativescript-context-apis\";

async function checkGeolocationAccessStatus(): Promise<void> {
    const provider = contextApis.geolocationProvider;
    const isReady = await provider.isReady();
    if (!isReady) {
      await provider.prepare();
    }
}
\n

Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current user's location or a stream of locations:

\n
import { contextApis } from \"nativescript-context-apis\";

// You can get the current location like this
async function printCurrentLocation() {
    const provider = contextApis.geolocationProvider;
    const location = await provider.acquireLocation({
            highAccuracy: true, // Accuracy is high by default
            timeout: 5000, // You can also specify the operation timeout (highly advised)
        });
    console.log(\"Current location:\", location);
}

// Or a location stream
import { Subscription } from \"rxjs\";

async function printLocationUpdates(): Promise<Subscription> {
    const provider = contextApis.geolocationProvider;
    
    const stream = provider.locationStream({
          highAccuracy: true, // Again, accuracy is high by default
          stdInterval: 1000, // The location fetch interval
          minInterval: 100, // Opportunistic interval (another app asked for a location)
          timeout: 5000, // You can also specify the operation timeout (highly advised)
          maxAge: 60000, // And filter-out old locations
      });

    return stream.subscribe({
        next: (location) =>
            console.log(\"New location acquired!:\", location),
        error: (error) =>
            console.error(\"Location updates could not be acquired:\", error)
    });
}
\n

Human activity detection

\n

In case you want to obtain coarse grained human activity changes, first you'll need to check if you have permissions to do so and if not, ask them for as follows:

\n
import { contextApis } from \"nativescript-context-apis\";
import { Resolution } from \"nativescript-context-apis/activity-recognition\";

async function checkActivityRecognitionStatus(): Promise<void> {
    const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);
    const isReady = recognizer.isReady();
    if (!isReady) {
        console.log(
            `Up to prepare coarse-grained activity recognizer...`
        );
        await recognizer.prepare();
    }
    console.log(`Coarse-grained activity recognizer is ready`);
}
\n
\n

Note: If you want to use the medium-grained recognizer, just replace Resolution.LOW with Resolution.MEDIUM.

\n
\n

Then you will be able to add or remove activity change listeners.

\n
import { contextApis } from \"nativescript-context-apis\";
import { Resolution } from \"nativescript-context-apis/activity-recognition\";

const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);

// Register a listener
const listenerId = recognizer.listenActivityChanges((activityChange) => {
  console.log(\"ActivityChange:\", activityChange);
});
console.log(`Coarse-grained activity recognizer has registered a listener (id: ${listenerId})`);

// ...
// Somewhere else
// ...

// Deregister a concrete listener
recognizer.stopListening(listenerId);
// Or all of them
recognizer.stopListening();
\n

After registering your listeners, you will be all set to indicate the activity recognizer to start or stop recognizing activity changes

\n
import { contextApis } from \"nativescript-context-apis\";
import { Resolution } from \"nativescript-context-apis/activity-recognition\";

const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);

// Start recognizing
recognizer.startRecognizing();

// ...
// Somewhere else
// ...

// Stop recognizing
recognizer.stopRecognizing();
\n
\n

Note: Thanks to plugin design recognition state will be kept even if your app gets closed, or the device gets rebooted. It is safe to call multiple times to startRecognizing method. If you want to change your start parameters, stop recognizing first. It is also safe to call multiple times to stopRecognizing method, even if the recognizer is not running.

\n
\n

Nearby Wi-Fi APs updates

\n

In case you want to obtain Wi-Fi scan updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

\n
import { contextApis } from \"nativescript-context-apis\";

async function checkWifiScanAccessStatus(): Promise<void> {
    const provider = contextApis.wifiScanProvider;
    const isReady = await provider.isReady();
    if (!isReady) {
      await provider.prepare();
    }
}
\n

Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current nearby Wi-Fi APs' information or a stream of Wi-Fi scan updates:

\n
import { contextApis } from \"nativescript-context-apis\";

// You can get the current nearby Wi-Fi APs' information like this
async function printCurrentNearbyWiFiAPs() {
    const provider = contextApis.wifiScanProvider;
    const scanResult = await provider.acquireWifiFingerprint(
            true // Ensures the scan result is new (true by default), 
                 // thus adhering to Android OS Wi-Fi scanning limits: 
                 // https://developer.android.com/guide/topics/connectivity/wifi-scan#wifi-scan-throttling
        );
    console.log(\"Current nearby Wi-Fi APs:\", scanResult);
}

// Or a Wi-Fi scan updates stream
import { Subscription } from \"rxjs\";
import { FingerprintGrouping } from \"nativescript-context-apis/wifi\";

async function printWifiScanUpdates(): Promise<Subscription> {
    const provider = contextApis.wifiScanProvider;
    
    const stream = provider.wifiFingerprintStream({
        ensureAlwaysNew: true, // Identical in purpose to the parameter in acquireWifiFingerpint()
        grouping: FingerprintGrouping.NONE, // Configure Wi-Fi scan updates batching (see API bellow)
        continueOnFailure: true, // Determines if the stream has to report any scanning error and close
      });

    return stream.subscribe({
        next: (fingerprint) =>
            console.log(\"New wifi scan result!:\", fingerprint),
        error: (error) =>
            console.error(\"Wifi scan result could not be acquired:\", error),
    });
}
\n

Nearby BLE devices updates

\n

In case you want to obtain BLE scan updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

\n
import { contextApis } from \"nativescript-context-apis\";

async function checkBleScanAccessStatus(): Promise<void> {
    const provider = contextApis.bleScanProvider;
    const isReady = await provider.isReady();
    if (!isReady) {
      await provider.prepare();
    }
}
\n

Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current nearby BLE devices' information or a stream of BLE scan updates:

\n
import { contextApis } from \"nativescript-context-apis\";
import { BleScanMode } from \"nativescript-context-apis/ble\";

// You can get the current nearby BLE devices' information like this
async function printCurrentNearbyBleDevices() {
    const provider = contextApis.bleScanProvider;
    const scanResult = await provider.acquireBleScan({
        scanTime: 5000, // (optional) when not specified it will wait until seeing a device and inmediatelly return, 
                        // otherwise it accumulates the seen devices and outputs after the scan time finishes.
                        // It may throw a timeout when used in conjunction with a list of iBeacon UUIDs 
                        // (in case no known beacon has been detected in the meantime)  
        scanMode: BleScanMode.BALANCED, // (optional) Can be LOW_POWER or LOW_LATENCY too. BALANCED by default
        iBeaconUuids: [
            // (optional) add a list of iBeacon UUIDs if you're just looking for known beacons
        ],
    });
    console.log(\"Current nearby BLE devices:\", scanResult);
}

// Or a BLE scan updates stream
import { Subscription } from \"rxjs\";

async function printWifiScanUpdates(): Promise<Subscription> {
    const provider = contextApis.bleScanProvider;
    
    const stream = provider.bleScanStream({
        reportInterval: 2000, // (optional) when not specified it will output a result as soon as a device is seen, 
                              // otherwise it accumulates the detected devices and outputs when told
        scanMode: BleScanMode.LOW_LATENCY, // (optional) same as for the acquire method
        iBeaconUuids: [
            // (optional) Same as for the acquire method
        ],
    })

    return stream.subscribe({
        next: (bleScanResult) =>
            console.log(
                `New ble scan result!: ${JSON.stringify(bleScanResult)}`
            ),
        error: (error) =>
            console.error(`Ble scan result could not be acquired: ${error}`),
    });
}
\n
\n

Note: Check plugin demo app for further usage details

\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
init()Promise<void>Meant to be called on application start. Only needed if your app listens to human activity changes
geolocationProviderGeolocationProviderProperty which gives access to the geolocation provider singleton
getActivityRecognizer(resolution: Resolution)ActivityRecognizerMeant to be called on application start. Only needed if your app listens to human activity changes
wifiScanProviderWifiScanProviderProperty which gives access to the Wi-Fi scan provider singleton
bleScanProviderBleScanProviderProperty which gives access to the BLE scan provider singleton
\n

Click on each of the collapsible sections bellow to see more API details for each information source:

\n
\nGeolocation access\n

Geolocation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
latitudenumberLocation's latitude
longitudenumberLocation's longitude
altitudenumberLocation's altitude
horizontalAccuracynumberLocation's horizontal accuracy (in meters)
verticalAccuracynumberLocation's vertical accuracy (in meters)
speednumberSpeed by the time of the location fix (in m/s)
directionnumberLocation bearing (in degrees)
timestampDateTime of the location fix
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
distance(to: Geolocation OR GeolocationLike)numberAllows to check the distance from a geolocation to another or a GeolocationLike object
\n

GeolocationLike (Interface)

\n

Same as Geolocation, but only latitude and longitude are mandatory. The rest of the attributes are optional.

\n

Geolocation acquire options

\n

Before requesting user's current location some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
highAccuracybooleanIndicate if high accuracy (battery consuming) geolocation should be used. True by default
timeoutnumberLocation fix maximum wait time. 5 minutes by default
allowBackgroundboolean(iOS only) indicate if the location is going to be collected in the background. False by default
\n
\n

Note: These options are identical (only the name changes) to the ones from nativescript-geolocation. Check plugin docs in case of doubt.

\n
\n

Geolocation stream options

\n

Before requesting user's location updates some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
highAccuracybooleanIndicate if high accuracy (battery consuming) geolocation should be used. True by default
distanceFilternumberThe distance in meters that the user has to cover before reporting a new location. None by default
stdIntervalnumber(Android only) The standard location fetch interval (in milliseconds). 1 minute by default
minIntervalnumber(Android only) Opportunistic location report interval (in milliseconds). 5 seconds by default. Used when another app requests the location of the user at a higher interval
maxAgenumberHow old at a maximum reported locations can be (in milliseconds from Date.now()). Unlimited by default
timeoutnumberLocation fix maximum wait time. 5 minutes by default
allowBackgroundboolean(iOS only) indicate if the location is going to be collected in the background. False by default
saveBatteryboolean(iOS only) indicate location reporting should be paused when app is no longer visible. True by default
\n
\n

Note: These options are identical (only the name changes) to the ones from nativescript-geolocation. Check plugin docs in case of doubt.

\n
\n

GeolocationProvider

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
acquireLocation(options: AcquireOptions)Promise<Geolocation>Allows to obtain user's current location
locationStream(options: StreamOptions)Observable<Geolocation>Allows to actively obtain user's location updates
\n
\n
\nHuman activity recognition\n

Available recognizer resolutions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
Resolution.LOWCoarse-grained activity recognition. Activity changes are delivered in a push-based manner.
Resolution.MEDIUMMedium-grained activity recognition. Activity changes are queried at a configurable delay
Resolution.HIGHAvailable soon
\n

Available human activities

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
HumanActivity.STILLNo significant movement has been detected
HumanActivity.WALKINGLow frequency on-foot movements
HumanActivity.RUNNINGHigh frequency on-foot movements
HumanActivity.ON_BICYCLEThe device is worn while riding a bicycle
HumanActivity.IN_VEHICLEThe device is commuting at a high speed
HumanActivity.TILTINGDevice's angle has changed noticeably
\n

Available activity transitions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
Transition.STARTEDThe related human activity has started
Transition.ENDEDThe related human activity has ended
\n

ActivityChange

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
typeHumanActivityThe human activity whose change has been detected
transitionTransitionIndicates if the activity has started or ended
confidencenumberIf the underlying recognizer supports it, the degree of confidence of the detected activity (from 0 to 1)
timestampDateIndicates when was the activity change detected
\n

Activity recognizer StartOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
detectionIntervalnumber(Optional) Allows to specify recognizer detection interval (ignored in Resolution.LOW due to its push-based nature)
\n

ActivityRecognizer

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
isReady()booleanAllows to check if the activity recognizer is ready or not (i.e., required permissions have been granted)
prepare()Promise<boolean>Allows to prepare the activity recognizer for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
setup()Promise<void>For internal usage only. Allows to adjust the recognizer to the previous state before the app was closed
startRecognizing(options?: StartOptions)Promise<void>Tell the activity recognizer to start working
stopRecognizing()Promise<void>Tell the activity recognizer to stop working
listenActivityChanges(callback: (activityChange: ActivityChange) => void)numberAdd an activity changes listener
stopListening(listenerId?: number)voidRemove an activity changes listener. If no listener number is passed by, all the listeners will be removed instead
\n
\n
\nNearby Wi-Fi APs' information access\n

WifiFingerprint

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
seenArray<WifiApInfo>The list of APs (and their information) which have been seen during this scan
isNewbooleanIndicates if the fingerprint results from a successful Wi-Fi scan or comes from a cached result (e.g., when OS throttling enters into play)
timestampDateThe timestamp at which the fingerprint has been generated. Please note, two identical fingerprints (one new, and the other cached) can have different timestamps and still be the same fingerprint
\n

WifiApInfo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
ssidstringAP SSID (can be empty in case the AP is not broadcasting its SSID)
bssidstringAP BSSID (MAC address)
capabilitiesstringA list containing the AP security capabilities
frequencynumberThe frequency in which the AP has been seen
centerFreq0numberSee Android docs
centerFreq1numberSee Android docs
bandwidthChannelBandwidthThe bandwidth the AP is using to broadcast (see linked enum to know the possible supported values)
standardWifiStandardThe Wi-Fi standard used by the detected AP (see linked enum to know the possible supported values)
ageMicrosnumberThe number of microseconds (counting from phone boot) after which this AP has been seen
chainsInfoWifiChainInfoInformation of each of the links used by the device to connect to this specific AP (see linked interface for more)
rssinumberThe received signal level with which this app has been seen during the scan
\n

ChannelBandwidth

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
ChannelBandwidth.UNSPECIFIEDThe channel bandwidth cannot be discerned by the phone (hardware or software limitation)
ChannelBandwidth.MHZ2020 MHz bandwidth
ChannelBandwidth.MHZ4040 MHz bandwidth
ChannelBandwidth.MHZ8080 MHz bandwidth
ChannelBandwidth.MHZ160160 MHz bandwidth
ChannelBandwidth.MHZ80_8080+80 MHz bandwidth
ChannelBandwidth.MHZ320320 MHz bandwidth
\n

WifiStandard

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
WifiStandard.UNKNOWNThe Wi-Fi standard in which the AP is broadcasting is not known (software limitation)
WifiStandard.LEGACY802.11a/b/g
WifiStandard.N802.11n
WifiStandard.AC802.11ac
WifiStandard.AX802.11ax
WifiStandard.AD802.11ad
WifiStandard.BE802.11be
\n

WifiChainInfo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idnumberSequential ID number for the chain (starts from 0)
rssinumberReceived signal strength level this specific chain
\n

Wi-Fi fingerprint acquire parameters

\n

Before requesting current information about the nearby Wi-Fi APs some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
ensureIsNewbooleanEnsures the scan result is new (true by default), thus adhering to Android OS Wi-Fi scanning limits
\n

Wi-Fi fingerprint stream options

\n

Before requesting updates on information about the nearby Wi-Fi APs some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
ensureAlwaysNewbooleanEnsures each scan result in the stream is always new (true by default), thus adhering to Android OS Wi-Fi scanning limits
groupingFingerprintGrouping(Only meant to be used with ensureAlwaysNew: true). Allows to indicate if the scan results must be batched and the size of the batch (NONE by default, i.e., batch size: 1). See linked enum for more details. Again conditioned by Android OS Wi-Fi scan throttling. Note, although batching becomes applied, scans are reported as they come
intervalnumber(Only meant to be used with ensureAlwaysNew: false). Allows to manually indicate the interval between the Wi-Fi scans (in milliseconds). Cannot be lower than (5000, i.e., 5 seconds). If scan throttling is not disabled in phone's developer settings. The max frequency at which a new fingerprint will be retrieved is every 30 seconds
continueOnFailurebooleanIndicates if scanning failures should be reported via the stream (breaking it) or not
\n

FingerprintGrouping

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
FingerprintGrouping.NONEApply no fingerprint batching during the scan (report interval of new fingerprints: 30s)
FingerprintGrouping.INTERMEDIATEPerform two consecutive fingerprint scans (separated in time by 5s) (report interval of new fingerprints: 60s)
FingerprintGrouping.MAXPerform four consecutive fingerprint scans (separated in time by 5s) (report interval of new fingerprints: 2 minutes)
\n

WifiScanProvider

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
acquireWifiFingerprint(ensureIsNew: boolean)Promise<WifiFingerprint>Allows to obtain information about the nearby Wi-Fi APs (fingerprinting)
wifiFingerprintStream(options: StreamOptions)Observable<WifiFingerprint>Allows to actively obtain information about the nearby Wi-Fi APs (fingerprinting)
\n
\n
\nNearby BLE devices' information access\n

BleScanResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
seenArray<BleDeviceInfo>The list of BLE devices (and their information) which have been seen during this scan
timestampDateThe timestamp at which this scan was finished.
\n

BleDeviceInfo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
addressstringDevice's MAC address
namestringDevice's name (can be empty)
advertiseFlagsnumberThe advertising flags indicating the discoverable mode and capability of the device (-1 when not set)
advertisingSidnumberDevice's advertising SID (255 when not present)
advertisingIntervalnumberRanges from 6 (7.5ms) to 65536 (81918.75ms), in units of 1.25ms (0 when not present)
txPowerLevelnumberTransmission power level of the packet in dBm (-2147483648, a.k.a -inf, when not set). The difference between the txPowerLevel and the rssi can be used to calculate the path loss
txPowernumberTransmission power in dBm. Ranges from -127 to 126 (127 when not present)
primaryPhyPhyTypeCan be: 1M, coded or none (when the device does not support retrieving this information)
secondaryPhyPhyTypeCan be: 2M, coded or none (when either the device does not support retrieving this information or the BLE device does not use a secondary physical channel)
serviceUuidsArray<string>A set of BLE service UUIDs offered by the device (do not confuse with iBeacon UUIDs, these come later)
legacybooleanWhen true, indicates that the detected device's spec is prior to the BLEv5 specification
connectablebooleanWhen true, indicates that the detected device accepts input connections
iBeaconIBeaconDataUndefined when the detected device does not broadcast iBeacon data. If defined, contains an object with the UUID, Major and Minor numbers of the beacon
rssinumberThe received signal level with which this app has been seen during the scan
ageNanosnumberThe number of nanoseconds (counting from phone boot) after which this device has been seen
\n

PhyType

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
PhyType.UNUSEDThe physical channel is not in use or the phone cannot detect its type (Android SDK < 26)
PhyType.LE_1MThe device uses the primary physical channel
PhyType.LE_2MThe device uses the secondary physical channel
PhyType.LE_CODEDThe device uses the respective physical channel with a mask
\n

IBeaconData

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
uuidstringThe UUID of the iBeacon deployment
majornumberThe iBeacon major number used to identify a beacon within a deployment
minornumberThe iBeacon minor number used to identify a beacon within a deployment
\n

BLE scan acquire options

\n

Before requesting current information about the nearby BLE devices some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
scanTimebooleanIndicates the amount of time to wait for while scanning. When 0 it waits until the first device is detected. Note: when is 0 and at least one iBeacon deployment UUID has been set it will wait until the firs beacon is seen. Use it with care
scanModeBleScanModeIndicates the scan mode to use (see linked enum for more information)
iBeaconUuidsArray<string>Optionally indicate a list of iBeacon deployment UUIDs to just report scan results containing them
\n

BleScanMode

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeDescription
BleScanMode.LOW_POWERScans for 0.5s and waits for 4.5s before running another scan. Good for using it in combination with scan times and intervals greater than 5s.
BleScanMode.LOW_LATENCYScans using the highest frequency, with no waits. Very power hungry, use with care
BleScanMode.BALANCEDIn the middle of the other two. Scans for 2s and waits for 3s. Great reliability / battery usage balance
\n

BLE scan stream options

\n

Before requesting updates on information about the nearby BLE devices some options can be customized in order to achieve the expected result.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
reportIntervalbooleanIndicates the amount of time to wait between reporting the list of the devices which have been detected since the last successful scan. When 0 it notifies right after seeing a new device. Note: the reporting frequency can end up being quite high. Use it with care
scanModeBleScanModeIndicates the scan mode to use (see linked enum for more information)
iBeaconUuidsArray<string>Optionally indicate a list of iBeacon deployment UUIDs to just report scan results containing them
\n

BleScanProvider

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method signatureReturn typeDescription
isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
acquireBleScan(options: AcquireOptions)Promise<BleScanResult>Allows to obtain information about the nearby BLE devices as soon as one is detected or after the specified scan time
wifiFingerprintStream(options: StreamOptions)Observable<BleScanResult>Allows to actively obtain information about the nearby BLE devices as soon as they are detected or in batches when indicating a report interval
\n
\n

Plugin authors

\n\n \"Alberto\n\n\n \"Miguel\n\n

Acknowledgements

\n

The development of this plugin has been made possible thanks to the Spanish Government. Concretely from, Spanish Ministry of Education, Culture and Sports (grant reference FPU17/03832), and “Programa Estatal de I+D+i Orientada a los Retos de la Sociedad" (reference RTI2018-099939-BI-00).

\n

This project is an open-sourced excerpt coming from SyMptOMS project at Geotec. Concretely, it has been heavily used in SyMptOMS mobile app for more than two years and contains all the lessons we have learned there.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/background-http":{"name":"@nativescript/background-http","version":"6.0.0","license":"Apache-2.0","readme":"

@nativescript/background-http

\n
ns plugin add @nativescript/background-http
\n

Usage

\n

The below attached code snippets demonstrate how to use @nativescript/background-http to upload single or multiple files.

\n
Note
\n

Call init before the app starts to initialize the http background service

\n
import { init } from '@nativescript/background-http';
init();
\n

Uploading files

\n

Sample code for configuring the upload session. Each session must have a unique id, but it can have multiple tasks running simultaneously. The id is passed as a parameter when creating the session (the image-upload string in the code bellow):

\n
// file path and url
var file = '/some/local/file/path/and/file/name.jpg';
var url = 'https://some.remote.service.com/path';
var name = file.substr(file.lastIndexOf('/') + 1);

// upload configuration
var bghttp = require('@nativescript/background-http');
var session = bghttp.session('image-upload');
var request = {
\turl: url,
\tmethod: 'POST',
\theaders: {
\t\t'Content-Type': 'application/octet-stream',
\t},
\tdescription: 'Uploading ' + name,
};
\n

For a single file upload, use the following code:

\n
var task = session.uploadFile(file, request);
\n

For multiple files or to pass additional data, use the multipart upload method. All parameter values must be strings:

\n
var params = [
   { name: \"test\", value: \"value\" },
   { name: \"fileToUpload\", filename: file, mimeType: \"image/jpeg\" }
];
var task = session.multipartUpload(params, request);
\n

In order to have a successful upload, the following must be taken into account:

\n\n

Upload request and task API

\n

The request object parameter has the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
urlstringThe request url (e.g.https://some.remote.service.com/path).
methodstringThe request method (e.g. POST).
headersobjectUsed to specify additional headers.
descriptionstringUsed to help identify the upload task locally - not sent to the remote server.
utf8boolean(Android only/multipart only) If true, sets the charset for the multipart request to UTF-8. Default is false.
androidNotificationOnProgressTitlestringUse this to set the on progress title shown in the Android notifications center.
androidNotificationOnProgressMessagestringUse this to set the on progress message shown in the Android notifications center.
androidNotificationOnCompleteTitlestringUse this to set the on complete message shown in the Android notifications center.
androidNotificationOnCompleteMessagestringUse this to set the on error title shown in the Android notifications center.
androidNotificationOnErrorTitlestringUse this to set the on error title shown in the Android notifications center.
androidNotificationOnErrorMessagestringUse this to set the on error message shown in the Android notifications center.
androidNotificationOnCancelledTitlestringUse this to set the on cancelled title shown in the Android notifications center.
androidNotificationOnCancelledMessagestringUse this to set the on cancelled message shown in the Android notifications center.
androidAutoDeleteAfterUploadboolean(Android only) Used to set if files should be deleted automatically after upload.
androidMaxRetriesnumber(Android only) Used to set the maximum retry count. The default retry count is 0. https://github.com/gotev/android-upload-service/wiki/Recipes#backoff
androidAutoClearNotificationboolean(Android only) Used to set if notifications should be cleared automatically upon upload completion. Default is false. Please note that setting this to true will also disable the ringtones.
androidRingToneEnabledboolean(Android only) Used to set if a ringtone should be played upon upload completion. Default is true. Please note that this flag has no effect when androidAutoClearNotification is set to true.
androidNotificationChannelIDstring(Android only) Used to set the channel ID for the notifications.
\n

Note :- Android Notification titles/messages can be constructed with one of the following placeholder which will be replaced by the system .

\n

Replaced with the current upload rate/speed [upload_rate]

\n

Replaced with the current upload progress [upload_progress]

\n

Replaced with the elapsed time [upload_elapsed_time]

\n

The task object has the following properties and methods, that can be used to get information about the upload:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
uploadnumberBytes uploaded.
totalUploadnumberTotal number of bytes to upload.
statusstringOne of the following: error, uploading, complete, pending, cancelled.
descriptionstringThe description set in the request used to create the upload task.
cancel()voidCall this method to cancel an upload in progress.
\n

Handling upload events

\n

After the upload task is created you can monitor its progress using the following events:

\n
task.on(\"progress\", progressHandler);
task.on(\"error\", errorHandler);
task.on(\"responded\", respondedHandler);
task.on(\"complete\", completeHandler);
task.on(\"cancelled\", cancelledHandler); // Android only
\n

Each event handler will receive a single parameter with event arguments:

\n
// event arguments:
// task: Task
// currentBytes: number
// totalBytes: number
function progressHandler(e) {
    alert(\"uploaded \" + e.currentBytes + \" / \" + e.totalBytes);
}

// event arguments:
// task: Task
// responseCode: number
// error: java.lang.Exception (Android) / NSError (iOS)
// response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
function errorHandler(e) {
    alert(\"received \" + e.responseCode + \" code.\");
    var serverResponse = e.response;
}


// event arguments:
// task: Task
// responseCode: number
// data: string
function respondedHandler(e) {
    alert(\"received \" + e.responseCode + \" code. Server sent: \" + e.data);
}

// event arguments:
// task: Task
// responseCode: number
// response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
function completeHandler(e) {
    alert(\"received \" + e.responseCode + \" code\");
    var serverResponse = e.response;
}

// event arguments:
// task: Task
function cancelledHandler(e) {
    alert(\"upload cancelled\");
}
\n

Testing the plugin

\n

In order to test the plugin, you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. http://httpbin.org/post However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it:

\n
cd demo-server
npm i
node server 8080
\n

The above commands will start a server listening on port 8080. Remember to update the URL in your app to match the address/port where the server is running.

\n
\n

Note: If you are using the iOS simulator then http://localhost:8080 should be used to upload to the demo server. If you are using an Android emulator, http://10.0.2.2:8080 should be used instead.

\n
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-laravel-echo":{"name":"nativescript-laravel-echo","version":"1.2.0","license":"Apache-2.0","readme":"

NativeScript Laravel-Echo

\n

\"npm\"\n\"npm\"

\n

\"NPM\"

\n

This is a laravel-echo plugin for native applications made with nativescript

\n

For more information read Laravel Broadcast.

\n

Prerequisites / Requirements

\n

Necesary api authentication in your laravel backend application.

\n

Modify the file where the following line Broadcast::routes()

\n

Example in app/Providers/BroadcastServiceProvider.php

\n
class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes(['middleware' => 'auth:api']);
        require base_path('routes/channels.php');
    }
}
\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n

$ tns plugin add nativescript-laravel-echo

\n

Usage

\n
namespace App\\Events;

use Illuminate\\Broadcasting\\Channel;
use Illuminate\\Queue\\SerializesModels;
use Illuminate\\Broadcasting\\PrivateChannel;
use Illuminate\\Broadcasting\\PresenceChannel;
use Illuminate\\Broadcasting\\InteractsWithSockets;
use Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;

class Event implements ShouldBroadcast
{
    /**
     * Information about the shipping status update.
     *
     * @var string
     */
    public $data; //data show in console.dir as data
}
\n

Javascript

\n
const TnsEcho = require('nativescript-laravel-echo').TnsEcho;

const token = 'Asdsd3dsdsTytf';//Your token

const options = {
    //....
    broadcaster: 'socket.io',// pusher,
    headers: {
        auth: {
            bearer: `Bearer ${token}`
        }
    }
}

const Echo = new TnsEcho(options)

Echo.channel('YourChannel').listen('Event', e => {
    console.dir(e)
})

//presence channel for others
const http = require('tns-core-modules/http');

http.request({
    //....
    headers: {
        //...
        'X-Socket-Id': Echo.socketId() // get socket id
    }
});
\n

TypeScript

\n
import { TnsEcho } from 'nativescript-laravel-echo';

const token = 'Asdsd3dsdsTytf';//Your token

const options = {
    //....
    broadcaster: 'socket.io',// pusher,
    headers: {
        auth: {
            bearer: `Bearer ${token}`
        }
    }
}

this.Echo = new TnsEcho(options)

this.Echo.channel('YourChannel').listen('Event', e => {
    console.dir(e)
})

//presence channel for others
import * as http from 'tns-core-modules/http';

http.request({
    //....
    headers: {
        //...
        'X-Socket-Id': this.Echo.socketId() // get socket id
    }
})
\n

Options

\n

These are each of the parameters that can go in the object options.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
broadcasterpusherDriver for broadcast pusher or socket.io
hostnullYour host only socket.io
authEndpoint/broadcasting/authYour auth endpoint only for Pusher
keynullYour api key of Pusher App
clusternullYour cluster of Pusher App
authauth:{headers:{}}Necesary in private an presence channel's with Authorization header
namespaceApp.EventsThe namespace backend events
debugfalseEnable debug only socket.io broadcaster
forceWebsocketsfalseForce WebSockets
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-segment-view":{"name":"nativescript-segment-view","version":"1.0.6","license":"MIT Lisence","readme":"

nativescript-segment-view

\n

A NativeScript plugin to extend segmentBar, make style same in android and ios.

\n

Sample Screenshots

\n

Android

\n
\n

\"Sample1\"

\n

iOS

\n
\n

\"Sample1\"

\n

Installation

\n
tns plugin add nativescript-segment-view
\n

Usage

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:ui=\"nativescript-segment-view\">
  <StackLayout class=\"p-20\">
    <Label text=\"{{ message }}\" class=\"t-20 text-center c-black\" textWrap=\"true\"/>
    <ui:n-s-segment-view id=\"1\" items=\"{{tabItems}}\" height=\"60\" selectedIndexChanged=\"selectedIndexChanged\"
      style=\"seg-background-color:#EEE;selected-background-color:#FF0;line-color:#000;selected-color:#F00;title-color:#0F0;\"></ui:n-s-segment-view>
      <ui:n-s-segment-view id=\"2\" items=\"{{tabItems2}}\" height=\"30\" selectedIndexChanged=\"selectedIndexChanged\"></ui:n-s-segment-view>
  </StackLayout>
</Page>
\n

TS

\n
import { Observable } from 'tns-core-modules/data/observable';
import { NSSegmentView, NSSegmentViewItem } from 'nativescript-segment-view';

export class HelloWorldModel extends Observable {
  public message: string;
  private segmentView: NSSegmentView;
  private tabItems: NSSegmentViewItem[];
  private tabItems2: NSSegmentViewItem[];

  constructor() {
    super();

    // this.segmentView = new NSSegmentView();
    this.message = \"examples\";
    this.tabItems = [];
    const item1 = new NSSegmentViewItem();
    item1.title = 'custom_item1';
    this.tabItems.push(item1);
    const item2 = new NSSegmentViewItem();
    item2.title = 'custom_item2';
    this.tabItems.push(item2);

    this.tabItems2 = [];
    const item21 = new NSSegmentViewItem();
    item21.title = 'default_item1';
    this.tabItems2.push(item21);
    const item22 = new NSSegmentViewItem();
    item22.title = 'default_item2';
    this.tabItems2.push(item22);
  }
}
\n

Angular NativeScript

\n
import * as elementRegistryModule from 'nativescript-angular/element-registry';
elementRegistryModule.registerElement(\"NSSegmentView\", () => require(\"nativescript-segment-view\").NSSegmentView);
\n
<NSSegmentView id=\"1\" (loaded)=\"onLoad()\" [items]=\"tabItems\" height=\"60\" (selectedIndexChange)=\"onSelectedIndexChange($event)\"
    style=\"seg-background-color:#EEE;selected-background-color:#FF0;line-color:#000;selected-color:#F00;title-color:#0F0;\"></NSSegmentView>
\n

License

\n

MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cscreenshot":{"name":"nativescript-cscreenshot","version":"1.2.1","license":"Apache-2.0","readme":"

Nativescript Cscreenshot :camera:

\n

This plugin was created so you can take screenshots of views easily and then store it as you like.

\n

this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

\n

Now working in Nativescript 8

\n

IMPORTANT: For some reason I can't test the ios version because of this problem Github, i will appreciate if you can and report this in the issues page.

\n

Installation

\n

Use the install command:

\n
tns plugin add nativescript-cscreenshot
\n

Usage

\n

Just import the plugin in your project and use it like this

\n

using Typescript:

\n
    import { Cscreenshot } from 'nativescript-cscreenshot';
    import { ImageSource } from \"tns-core-modules/image-source\";

    // then in your take a screenshot method
    let screen = new Cscreenshot();

    // Using vanilla Nativescript
    let view = page.getViewById('main');

    // Using Angular Nativescript
    @ViewChild(\"main\", { static: true }) main: ElementRef;
    let view = this.view.nativeElement;

    // Using Vue Nativescript
    let view = this.$refs.main.nativeView;

    screen.take(view, (image: ImageSource)=>{
        // Do whatever you want with the returned source image
    });
\n

and in your template

\n
    <!-- Assign the reference name depending on the framework -->
    <!-- 'id=\"\"' for vanilla nativescript -->
    <!-- '#main' for angular nativescript -->
    <!-- 'ref=\"main\"' for Vue nativescript -->
    <GridLayout id=\"main\" #main ref=\"main\">
        <!-- Content of your app here -->
    </GridLayout>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pager-enduco":{"name":"nativescript-pager-enduco","version":"13.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Pager

\n

Install

\n

NativeScript 7x

\n\n

NativeScript 6x

\n\n

NativeScript 5x

\n\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

NativeScript 2x

\n\n

Usage

\n

Note v11+

\n
Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
\n

IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

\n
<pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <pager:Pager.itemTemplate>
                <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label text=\"{{title}}\"/>
                    <Image row=\"1\" src=\"{{image}}\"/>
                </GridLayout>
            </pager:Pager.itemTemplate>
</pager:Pager>
\n

Multi Template

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
      <Pager.itemTemplates>
        <template key=\"even\">
          <GridLayout rows=\"auto,auto,*\" columns=\"*\">
            <Label text=\"Even\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
        <template key=\"odd\">
          <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
            <Label text=\"Odd\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <StackLayout row=\"2\">
              <Label text=\"{{image}}\"/>
            </StackLayout>
            <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
      </Pager.itemTemplates>
      <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
    </c:Pager>
\n

Static Views

\n
<c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                 showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
            <c:PagerItem backgroundColor=\"red\">
                <Label text=\"First\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"white\">
                <Label text=\"Second\" ></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"black\">
                <Label text=\"Third\" color=\"white\"></Label>
            </c:PagerItem>
            <c:PagerItem backgroundColor=\"green\">
                <Label text=\"Fourth\"></Label>
            </c:PagerItem>
        </c:Pager>
\n

Vue

\n
import Vue from 'nativescript-vue';
import Pager from 'nativescript-pager/vue';

Vue.use(Pager);
\n
<template>
    <Pager for=\"item in items\">
        <v-template>
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Label :text=\"item.title\" />
                <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
            </GridLayout>
        </v-template>
        <v-template if=\"$odd\">
            <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                <Image  stretch=\"fill\" :src=\"item.image\" />
                <Label :text=\"item.title\" row=\"1\"/>
            </GridLayout>
        </v-template>
    </Pager>
</template>
\n

Static Views

\n
<Pager height=\"100%\" :selectedIndex=\"1\">
  <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
  <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
  <PagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </PagerItem>
  <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
</Pager>
\n

Angular

\n
import { PagerModule } from \"nativescript-pager/angular\";

@NgModule({
    imports: [
    PagerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Angular v2

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </template>
</Pager>
\n

Angular v4+

\n
<Pager
  [items]=\"items\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
>
  <ng-template let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto, *\"
      columns=\"*\"
      backgroundColor=\"red\"
    >
      <label [text]=\"item.title\"></label>
      <image row=\"1\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Multi Template

\n
 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }
\n
<Pager
  row=\"1\"
  [items]=\"items | async\"
  [itemTemplateSelector]=\"templateSelector\"
  #pager
  [selectedIndex]=\"currentPagerIndex\"
  (selectedIndexChange)=\"onIndexChanged($event)\"
  class=\"pager\"
  backgroundColor=\"lightsteelblue\"
>
  <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
    <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
      <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>

  <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
    <GridLayout
      class=\"pager-item\"
      rows=\"auto,auto,auto,*\"
      columns=\"*\"
      backgroundColor=\"white\"
    >
      <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
      <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
      <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
    </GridLayout>
  </ng-template>
</Pager>
\n

Static Views

\n
<Pager
  backgroundColor=\"orange\"
  row=\"1\"
  #pager
  [selectedIndex]=\"1\"
  height=\"100%\"
>
  <StackLayout *pagerItem backgroundColor=\"red\">
    <label text=\"First\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"white\">
    <label text=\"Second\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"black\">
    <label text=\"Third\" color=\"white\"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor=\"green\">
    <label text=\"Fourth\"></label>
  </StackLayout>
</Pager>
\n

React

\n
import {$Pager} from 'nativescript-pager/react';
return (
<$Pager
                height={{ unit: \"%\", value: 100 }}
                   selectedIndex={this.selectedIndex}
                   selectedIndexChange={this.selectedIndexChange.bind(this)}
                    items={this.items}
                     cellFactory={
                    (item, ref) => {
                        return (
                            <$StackLayout id={item.title} ref={ref}>
                                <$Label text={item.title}/>
                                <$ImageCacheIt stretch={'aspectFill'}
                                        src={item.image}/>
                            </$StackLayout>
                        );
                    }
                }/>
)
\n

Static Views

\n
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                           <$PagerItem backgroundColor={'red'}>
                               <$Label text={'First'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'white'}>
                               <$Label text={'Second'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'black'}>
                               <$Label text={'Third'} color={new Color('white')}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'green'}>
                               <$Label text={'Fourth'}/>
                           </$PagerItem>
                           <$PagerItem backgroundColor={'pink'}>
                               <$Label text={'Fifth'}/>
                           </$PagerItem>
                       </$Pager>)
\n

Config

\n
<Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"ios\"\"android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sazmand-version":{"name":"nativescript-sazmand-version","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript App Version (nativescript-sazmand-version)

\n

Installation

\n
tns plugin add nativescript-sazmand-version
\n

Usage

\n
```\nimport { SazmandVersion } from 'nativescript-sazmand-version';\nprivate appVersion: SazmandVersion;\n\nconstructor() {\n    this.appVersion.get()\n}\n```\n
\n

License

\n

Apache License Version 2.0, March 2018

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toast":{"name":"nativescript-toast","version":"2.0.0","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-cognito":{"name":"nativescript-aws-cognito","version":"1.0.8","license":"Apache-2.0","readme":"

nativescript-aws-cognito

\n

This plugin is limited edition to use AWS Cognito services.\nif you want to buy full edition or other AWS services plugins then you can touch us with this url.\nwww.cerensoftware.co.uk

\n

You can look at sample project : https://github.com/aliyksel/loginproject (branch : cognito)

\n

(Optional) Prerequisites / Requirements

\n

if you get keychain error in iOS\nyou have to install nativescript-custom-entitlements plugin to your project.\nyou add this lines to app.entitlements file.

\n
<dict>
    <key>keychain-access-groups</key>
    <array>
        <string>$(AppIdentifierPrefix)org.nativescript.loginproject</string>
    </array>
</dict>
\n

Installation

\n

tns plugin add nativescript-aws-cognito

\n

Usage

\n
import {AwsCognito, CognitoCommonDelegate} from \"nativescript-aws-cognito\";
\n

create uerpool for a cognito user pool.

\n
  AwsCognito.createUserPool(region, cliendId, secretId, poolId, delegate);
\n
region : region of your pool. for example AWSRegionUSWest1.\ndelegate : instance of your class is implement from CognitoIdentityInteractiveAuthenticationDelegate.\ndelegate has startPasswordAuthentication method. this method is called when begin of  Authentication flow.\nYou must open login page.\n\nyou can create a new user.\n
\n
   AwsCognito.registerUser(userName:, password:, attrubutes:Array<{key:string, value:string}>, delegate);
\n
    attrubutes : they are user attributes which are you select when define the pool.\n    delegate : instance of your class is implement from CognitoCommonDelegate.\n    delegate has 2 methods.\n       onSuccess : it is called when action seccesfull\n       onError :  it is called when action has an error.\n\nAfter user created, cognito sen a digital code for confirmation to user email. you have to send digitalcode to cognito.\n```js\n    AwsCognito.confirmSignUp(userName,verifyCode, delegate);\n```\n\ndelegate : instance of your class is implement from CognitoCommonDelegate.\n    delegate has 2 methods.\n       onSuccess : it is called when action seccesfull\n       onError :  it is called when action has an error.\n\n\nyou can user details. if user signin you get details. if user not signin your class is called which is implement from CognitoIdentityInteractiveAuthenticationDelegate.\n\n```js\n    AwsCognito.getUserDetail(delegate:CognitoCommonDelegate);\n```\nyou opened login page and you got username and password from user. you call login method.\n\n```js\n    AwsCognito.login(userName:String, password:String, delegate:CognitoCommonDelegate);\n```\n```js\n    AwsCognito.signOut();\n```\n
\n

API

\n
This plugin uses ObjectiveC AWS SDk and Java AWS Sdk.\n
\n

License

\n

Apache License Version 2.0, January 2004 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slides-d4w":{"name":"nativescript-slides-d4w","version":"1.7.2","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"},"readme":"

NativeScript Slides for iOS and Android

\n

The plugin formally known as nativescript-intro-slides

\n

Intro slides example:

\n

\"Nativescript

\n

Image carousel example:

\n

\"Nativescript

\n

videos by Brad Martin

\n

Example Usage:

\n

XML

\n

\t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\" indicatorsColor=\"#fff\">
\t\t\t<Slides:Slide class=\"slide-1\">
\t\t\t\t<Label text=\"This is Panel 1\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-2\">
\t\t\t\t<Label text=\"This is Panel 2\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-3\">
\t\t\t\t<Label text=\"This is Panel 3\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-4\">
\t\t\t\t<Label text=\"This is Panel 4\"  />
\t\t\t</Slides:Slide>
\t\t\t<Slides:Slide class=\"slide-5\">
\t\t\t\t<Label text=\"This is Panel 5\"  />
\t\t\t</Slides:Slide>
\t</Slides:SlideContainer>
\n

CSS

\n
.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}
\n

Great for Intros/Tutorials to Image Carousels.

\n

To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

\n

when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

\n

add as many <Slides:Slide> as you want.

\n

Methods for SlideContainer

\n\n

Attributes for SlideContainer

\n\n

Events

\n\n

Angular 2 compatibility

\n

To use the slides with Angular2 and the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

\n

Android Optional Attributes

\n\n

Plugin Development Work Flow:

\n\n

Known issues

\n\n

How To: Load slides dynamically

\n

You want to hook into the loaded event of the view and then create your view elements.

\n

Demo Code

\n
<Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
\n
import * as slides from 'nativescript-slides/nativescript-slides'

export function onSlideContainerLoaded(args) {    
    let slideContainer = <slides.SlideContainer>args.object;

      //Construct the slides
      slideContainer.addChild(getSlide(\"Page 1\", \"slide-1\"));
      slideContainer.addChild(getSlide(\"Page 2\", \"slide-2\"));
      slideContainer.addChild(getSlide(\"Page 3\", \"slide-3\"));
      slideContainer.addChild(getSlide(\"Page 4\", \"slide-4\"));
      slideContainer.addChild(getSlide(\"Page 5\", \"slide-5\"));

  }

  function getSlide(labelText: string, className: string)  {
      let slide = new slides.Slide();
      slide.className = className;
      let label = new labelModule.Label();
      label.text = labelText;
      slide.addChild(label)

      return slide;
  }

\n

Smoother panning on Android (For {N} v2.0.0 and below only).

\n

To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here

\n

/node_modules/tns-core-modules/ui/gestures/gestures.android.js

\n

and change

\n
    CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getX(i);
            res.y += event.getY(i);
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };
\n

to

\n
  CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getRawX();
            res.y += event.getRawY();
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };
\n

please note this will change the panning gesture for your entire project.

\n

Thanks to these awesome contributors!

\n

Brad Martin

\n

Obsessive Inc/Abhijith Reddy

\n

Victor Nascimento

\n

Steve McNiven-Scott

\n

And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

\n

Contributing guidelines

\n

Contributing guidelines

\n

License

\n

MIT

\n

for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-youtubeplayer":{"name":"@cdev38399/nativescript-youtubeplayer","version":"4.0.1","license":"Apache-2.0","readme":"

NativeScript YoutubePlayer

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

Configuration

\n

Android

\n

Api key follow ➡\nlink to get\nyour api key

\n

Usage

\n

XML

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

\n
<ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
\n

Angular

\n
import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

@NgModule({
    imports: [
    YoutubePlayerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
<YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
\n

Vue

\n

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

\n
import Vue from 'nativescript-vue'
Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer)
\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <StackLayout>
      <YoutubePlayer src=\"wH_0_pijbZY\" apiKey=\"your-api-key\"/>
    </StackLayout>
  </Page>
</template>
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
play()voidStarts video playback of the currently cued / loaded video.
stop()voidStops and cancels loading of the current video.
destroy()voidDestroy the video player and free resources.
pause()voidPauses the currently playing video.
isPlaying()falsebooleanReturns is current video is playing.
toggleFullscreen()voidToggle fullscreen mode.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
srcnullstring
  • - [x]
Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
optionsnullObject
  • - [ ]
Player options available IOS only
isFullScreenfalseboolean
  • - [ ]
Returns if player is currently in fullscreen mode.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-barcodescanner":{"name":"@nstudio/nativescript-barcodescanner","version":"5.0.1","license":"Apache-2.0","readme":"

NativeScript BarcodeScanner

\n
\n

💡 Plugin version 5.0.0+ is compatible with NativeScript 7+ and also supports Mac M1. If you need to target older NativeScript versions, please stick to plugin nativescript-barcodescanner 3.4.2.

\n
\n

Supported barcode types

\n

iOS and Android

\n\n

Android only

\n\n

iOS only

\n\n

A note about UPC_A and EAN_13

\n

When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

\n

Installation

\n
npm install @nstudio/nativescript-barcodescanner
\n

Embedding the scanner (iOS)

\n
\n

If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

\n
\n

As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

\n
\n

💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

\n
\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"@nstudio/nativescript-barcodescanner\">
\n

Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

\n
<iOS>
    <Barcode:BarcodeScannerView
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      pause=\"{{ pause }}\"
      scanResult=\"{{ onScanResult }}\" />
</iOS>
\n

Angular

\n

Component / Module:

\n
import { registerElement } from \"@nativescript/angular\";
registerElement(\"BarcodeScanner\", () => require(\"@nstudio/nativescript-barcodescanner\").BarcodeScannerView);
\n

View:

\n
<BarcodeScanner
      class=\"scanner-round\"
      formats=\"QR_CODE, EAN_13\"
      beepOnScan=\"true\"
      reportDuplicates=\"true\"
      preferFrontCamera=\"false\"
      [pause]=\"pause\"
      (scanResult)=\"onScanResult($event)\">
</BarcodeScanner>
\n

Vue

\n

main.ts:

\n
Vue.registerElement('BarcodeScanner', () => require('@nstudio/nativescript-barcodescanner').BarcodeScannerView)
\n

View:

\n
<BarcodeScanner
    row=\"1\"
    height=\"300\"
    formats=\"QR_CODE, EAN_13, UPC_A\"
    beepOnScan=\"true\"
    reportDuplicates=\"true\"
    preferFrontCamera=\"false\"
    :pause=\"pause\"
    @scanResult=\"onScanResult\"
    v-if=\"isIOS\">
</BarcodeScanner>
\n

See 'demo-vue' for details.

\n

iOS runtime permission reason

\n

iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

\n

You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSCameraUsageDescription</key>
  <string>My reason justifying fooling around with your camera</string>
\n

To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

\n

Usage

\n

Tip: during a scan you can use the volume up/down buttons to toggle the torch.

\n

function: scan (single mode)

\n

TypeScript

\n
  import { BarcodeScanner } from \"@nstudio/nativescript-barcodescanner\";
  const barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE, EAN_13\",
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
    openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
    presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
  }).then((result) => {
      // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
      alert({
        title: \"Scan result\",
        message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
        okButtonText: \"OK\"
      });
    }, (errorMessage) => {
      console.log(\"No scan. \" + errorMessage);
    }
  );
\n
\n

Note that result.format above is one of these.

\n
\n

JavaScript

\n
  var BarcodeScanner = require(\"@nstudio/nativescript-barcodescanner\").BarcodeScanner;
  var barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
    cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
    cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
    message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
    openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
  }).then(
      function(result) {
        console.log(\"Scan format: \" + result.format);
        console.log(\"Scan text:   \" + result.text);
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: scan (bulk / continuous mode)

\n

In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

\n

The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

\n

Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

\n

JavaScript

\n
  var count = 0;
  barcodescanner.scan({
    formats: \"QR_CODE\",
    // this callback will be invoked for every unique scan in realtime!
    continuousScanCallback: function (result) {
      count++;
      console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
      if (count === 3) {
        barcodescanner.stop();
      }
    },
    closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
    reportDuplicates: false // which is the default
  }).then(
      function() {
        console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
      },
      function(error) {
        console.log(\"No scan: \" + error);
      }
  );
\n

function: available

\n

Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

\n

JavaScript

\n
  var barcodescanner = require(\"@nstudio/nativescript-barcodescanner\");

  barcodescanner.available().then(
      function(avail) {
        console.log(\"Available? \" + avail);
      }
  );
\n

function: hasCameraPermission / requestCameraPermission

\n

On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

\n

On iOS 10+ there's something similar going on.

\n

Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

\n

JavaScript

\n
  barcodescanner.hasCameraPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestCameraPermission' now
        console.log(\"Has Camera Permission? \" + result);
      }
  );

  // if no permission was granted previously this wil open a user consent screen
  barcodescanner.requestCameraPermission().then(
      function() {
        console.log(\"Camera permission requested\");
      }
  );
\n

Usage with @nativescript/angular

\n

You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

\n

So instead of:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

@Component({ ... })
  export class MyComponent {
    constructor(private barcodeScanner: BarcodeScanner) {
  }

  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    this.barcodeScanner.scan({ ... });
  }
}
\n

Simply do:

\n
// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

@Component({ ... })
  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    new BarcodeScanner().scan({ ... });
  }
}
\n

Webpack usage

\n

If you run into an error when Webpacking, open app.module.ts and add this:

\n
import { BarcodeScanner } from \"@nstudio/nativescript-barcodescanner\";

export function createBarcodeScanner() {
  return new BarcodeScanner();
}

providers: [
  { provide: BarcodeScanner, useFactory: createBarcodeScanner }
]
\n

Troubleshooting

\n

If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

\n
    \n
  1. Delete the app from your device
    2. \n
  2. Remove the folder platforms/android. This triggers a complete rebuild
    3. \n
  3. run tns run android
    4. \n
\n

Dependencies / Related Projects

\n

This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

\n

iOS

\n

Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

\n

Android

\n

ZXing: https://github.com/zxing/zxing/releases

\n

As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/EddyVerbruggen/barcodescanner-lib-aar/

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/vue":{"name":"@vallemar/vue","version":"0.0.1","license":"MIT","readme":"

DOMiNATIVE-Vue

\n

Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

\n

Playground

\n
\n

Installation

\n

Via npm:

\n
npm install @dominative/vue @nativescript/core dominative undom-ng vue
\n

Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually.

\n
\n

Usage

\n
import { Application } from '@nativescript/core'
import { createApp } from '@dominative/vue'
import App from 'App.vue'

const app = createApp(App)

// Start the app
app.$run()
\n
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fontawesome":{"name":"nativescript-fontawesome","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript FontAwesome

\n

A simpler way to use FontAwesome icons with NativeScript

\n\n

Install

\n
tns plugin add nativescript-fontawesome
\n

click here to Download fontawesome-webfont.ttf or download from fontawesome website

\n\n
app/fonts/fontawesome-webfont.ttf
\n\n
import { Fontawesome } from 'nativescript-fontawesome';
Fontawesome.init();
\n

Usage

\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fontawesome }}\"></Label>
\n

Credits

\n

nativescript-fonticon

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-fit-text":{"name":"nativescript-auto-fit-text","version":"1.0.0","license":"Apache-2.0","readme":"

AutoFitText

\n

This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of it's width

\n

\"Example

\n

Prerequisites / Requirements

\n

This plugin is only tested with {N} > 3.0.0

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-auto-fit-text
\n

Usage

\n

Angular

\n
import { AutoFitTextModule } from \"nativescript-auto-fit-text/angular\"

@NgModule({
\t...
    imports: [
        AutoFitTextModule
    ],
    ...
})
export class AppModule { }
\n

Vanilla Nativescript

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-auto-fit-text\">
  <StackLayout class=\"p-20\">
    <ui:AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></ui:AutoFitText>
  </StackLayout>
</Page>
\n

Credits

\n

@grantland - android-autofittextview

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http-formdata":{"name":"nativescript-http-formdata","version":"3.1.1","license":"Apache-2.0","readme":"

A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed.

\n

Versions

\n

[3.1.1]\nFix build issues. Thanks to NathanWalker

\n

[3.0.0]\nUpgraded to NS 8.0.0. Thanks to Fr3nky88

\n

[2.1.0]\nUpgraded to NS 6.3.0. Fixed Kotlin issue. More here

\n

[2.0.0]\nUpgraded to NS 6.2.0. Fixed Kotlin issue. More here

\n

[1.6.0] Added common response in iOS and Android instead returned by native APIs.\nThanks to virtualbjorn

\n

[1.5.0] Now supports custom headers

\n

Add the plugin

\n
tns plugin add nativescript-http-formdata
\n

Dependencies

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
okhttp3OMGHTTPURLRQ
\n

TypeScript

\n
import { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';
\n

use the ImagePicker plugin or any other.\nhttps://github.com/NativeScript/nativescript-imagepicker

\n
    private test() {
        let context = imagepicker.create({
            mode: \"single\" // use \"multiple\" for multiple selection
        });
        context.authorize()
        .then(function() {
            return context.present();
        })
        .then((selection) => {
          let item = selection[0];
          //UIImage for iOS and android.graphics.Bitmap for Android
          item.getImageAsync(async (image, error) => {
            let fd = new TNSHttpFormData();
    
            //create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name
            //so you can get it on server. Check below how to grab it in ASP.Net MVC
            let params = [];
            let imageData: any;
            
            if(!image) {
                throw 'Could not get image';
            }

            if(image.ios) {
                imageData = UIImagePNGRepresentation(image);
            } else {
                //can be one of these overloads https://square.github.io/okhttp/3.x/okhttp/okhttp3/RequestBody.html
                let bitmapImage: android.graphics.Bitmap = image;
                let stream = new java.io.ByteArrayOutputStream();
                bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                let byteArray = stream.toByteArray();
                bitmapImage.recycle();

                imageData = byteArray;
            }
            let param: TNSHttpFormDataParam = {
                data: imageData,
                contentType: 'image/png',
                fileName: 'test.png',
                parameterName: 'file1'
            };
            params.push(param);
            let param2: TNSHttpFormDataParam = {
              data: \"John Doe\",
              parameterName: \"firstName\"
            };
            params.push(param2);

            console.log('submitting', params);
    
            try { 
                const response: TNSHttpFormDataResponse = await fd.post('http://10.10.10.149:10025/home/fileupload', params, {
                    headers: {
                        test1: \"test1 value\",
                        \"x-version-no\": \"2.0\"
                    }
                });
                console.log(response);
            } catch (e) {
                console.log('---------------home.component.ts---------------');
                console.log(e);
            }
          });
        }).catch(function (e) {
            console.log('-------------------error----------------')
            console.log(e);
        });
    }
\n

Now on server to grab the file(s) in ASP.Net MVC, you can follow https://stackoverflow.com/a/16256106/859968 or following

\n
[HttpPost]
//file1 and file2 are parameters name as given in NativeScript object. They must match
public ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)
{
    //grab your headers
    var headers = Request.Headers;
    if (file1 != null)
    {
        string pic = System.IO.Path.GetFileName(file1.FileName);
        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
        // file is uploaded
        file1.SaveAs(path);
    }
    if (file2 != null)
    {
        string pic = System.IO.Path.GetFileName(file2.FileName);
        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
        // file is uploaded
        file2.SaveAs(path);
    }

    // after successfully uploading redirect the user
    return RedirectToAction(\"Index\", \"Home\");
}
\n

TNSHttpFormDataResponse Properties

\n\n

Donation

\n

A donation will not make me rich, but your appreciation makes me happy 😁

\n

\"paypal\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-v2":{"name":"nativescript-social-share-v2","version":"2.1.0","license":"Apache-2.0","readme":"

NativeScript Social Share (Version 2)

\n

This version of NativeScript Social Share is similar to existing versions, however it includes the ability to retrieve a completion callback for iOS and Android!

\n

This is particularly useful for capturing analytics, for example, to work out the sharing method that was used.

\n

Or to trigger a workflow once the user returns to the app.

\n

Installation

\n

Run the following command from the root of your project:

\n
ns plugin add nativescript-social-share-v2
\n

Getting Started

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share-v2\");

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share-v2\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"@nativescript/social-share\");
var imageSourceModule = require(\"@nativescript/core\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"@nativescript/social-share\";
import { ImageSource } from \"@nativescript/core\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image).then(result => {
    // Callback result.
    console.log(result.completed);          // Boolean - Did the user share?
    console.log(result.activityType);       // String/null - Sharing Method.
    
}).catch(err => {
    // There was a catastrophe...
    console.log(err);
})
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\").then(result => {
    // Callback result.
    console.log(result.completed);          // Boolean - Did the user share?
    console.log(result.activityType);       // String/null - Sharing Method.
    
}).catch(err => {
    // There was a catastrophe...
    console.log(err);
})
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText('I love NativeScript!');
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText('I love NativeScript!', 'How would you like to share this text?');
\n

This also returns a promise and is thenable, so the callback result can be captured in the same manner as the shareImage example.

\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript');
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript', 'How would you like to share this url?');
\n

This also returns a promise and is thenable, so the callback result can be captured in the same manner as the shareImage example.

\n

Security

\n

If you discover a security vulnerability within this package, please send an email to Bespoke Technology Labs at hello@bespoke.dev. All security vulnerabilities will be promptly addressed. You may view our full security policy here.

\n

License

\n

The NativeScript Social Share V2 Library is licensed under The Apache 2.0 License.

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xmpp":{"name":"nativescript-xmpp","version":"0.0.7","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

Nativescript XMPP

\n

Installation

\n
tns plugin add nativescript-xmpp
\n

Usage

\n
import { isIOS } from 'tns-core-modules/platform';
import { XMPP, Presence } from 'nativescript-xmpp';
const xmpp = new XMPP({
  username: 'user',
  password: 'password',
  domain: 'localhost',
  host: isIOS ? 'localhost' : '10.0.2.2'
});
xmpp.on('connected', args => {
  xmpp.login();
});
xmpp.on('authenticated', (args: any) => {
  const presence = new Presence();
  presence.status = 'Nice';
  xmpp.send(presence);
});
xmpp.connect();
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio":{"name":"nativescript-cardio","version":"0.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n\n

Usage

\n
import { CardIO } from 'nativescript-cardio';

const cardIO = new CardIO();
cardIO.show((card: Card) => {
  /*
    Card {
    number: string;
    expMonth: number;
    expYear: number;
    cvv: string;
    image: ImageSource;
    type: CardType;
    name: string;
    postalCode?: string;
    android: any;
    ios: any;
    }
    */
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@anostdev/nativescript-couchbase-plugin":{"name":"@anostdev/nativescript-couchbase-plugin","version":"0.9.7","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript-Couchbase

\n

The source is now managed at https://github.com/triniwiz/nativescript-plugins

\n

Installation

\n

tns plugin add nativescript-couchbase-plugin

\n

Usage

\n

Note Android min-sdk is 19

\n
import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const documentId = database.createDocument({
    \"firstname\": \"O\",
    \"lastname\": \"Fortune\",
    \"address\": {
        \"country\": \"Trinidad and Tobago\"
    },
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

const person = database.getDocument(documentId);


database.updateDocument(documentId, {
    \"firstname\": \"Osei\",
    \"lastname\": \"Fortune\",
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

// Default concurrency mode is FailOnConflict if you don't pass it
const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
\n

Synchronization with Couchbase Sync Gateway and Couchbase Server

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const push = database.createPushReplication(
  'ws://sync-gateway-host:4984/my-database'
);
push.setUserNameAndPassword(\"user\",\"password\");
const pull = database.createPullReplication(
  'ws://sync-gateway-host:4984/my-database'
);
pull.setSessionId(\"SomeId\");
pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

push.setContinuous(true);
pull.setContinuous(true);
push.start();
pull.start();
\n

Listening for Changes

\n
database.addDatabaseChangeListener(function(changes) {
  for (var i = 0; i < changes.length; i++) {
    const documentId = changes[i];
    console.log(documentId);
  }
});
\n

Query

\n
const results = database.query({
  select: [], // Leave empty to query for all
  from: 'otherDatabaseName', // Omit or set null to use current db
  where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
  order: [{ property: 'firstName', direction: 'desc' }],
  limit: 2
});
\n

Transactions

\n

Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

database.inBatch(() => {
    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        }
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const person = database.getDocument(documentId);
    
    
    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const isDeleted = database.deleteDocument(documentId);
});
\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-color-picker":{"name":"nativescript-color-picker","version":"1.6.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@soscler/nativescript-couchbase-plugin":{"name":"@soscler/nativescript-couchbase-plugin","version":"0.9.7","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript-Couchbase

\n

The source is now managed at https://github.com/triniwiz/nativescript-plugins

\n

Installation

\n

tns plugin add nativescript-couchbase-plugin

\n

Usage

\n

Note Android min-sdk is 19

\n
import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const documentId = database.createDocument({
    \"firstname\": \"O\",
    \"lastname\": \"Fortune\",
    \"address\": {
        \"country\": \"Trinidad and Tobago\"
    },
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

const person = database.getDocument(documentId);


database.updateDocument(documentId, {
    \"firstname\": \"Osei\",
    \"lastname\": \"Fortune\",
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

// Default concurrency mode is FailOnConflict if you don't pass it
const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
\n

Synchronization with Couchbase Sync Gateway and Couchbase Server

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const push = database.createPushReplication(
  'ws://sync-gateway-host:4984/my-database'
);
push.setUserNameAndPassword(\"user\",\"password\");
const pull = database.createPullReplication(
  'ws://sync-gateway-host:4984/my-database'
);
pull.setSessionId(\"SomeId\");
pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

push.setContinuous(true);
pull.setContinuous(true);
push.start();
pull.start();
\n

Listening for Changes

\n
database.addDatabaseChangeListener(function(changes) {
  for (var i = 0; i < changes.length; i++) {
    const documentId = changes[i];
    console.log(documentId);
  }
});
\n

Query

\n
const results = database.query({
  select: [], // Leave empty to query for all
  from: 'otherDatabaseName', // Omit or set null to use current db
  where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
  order: [{ property: 'firstName', direction: 'desc' }],
  limit: 2
});
\n

Transactions

\n

Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

database.inBatch(() => {
    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        }
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const person = database.getDocument(documentId);
    
    
    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const isDeleted = database.deleteDocument(documentId);
});
\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-will":{"name":"nativescript-will","version":"5.0.8","license":"MIT","readme":"\n

NativeScript Audio

\n\n

NativeScript plugin to play and record audio files for Android and iOS.

\n

\n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
\n

\n
\n

Installation

\n

tns plugin add nativescript-audio

\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

\n
<key>NSMicrophoneUsageDescription</key>
<string>Recording Practice Sessions</string>
\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function() {
    console.log('finished playing');
  },
  errorCallback: function(errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function(args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(function(res) {
    console.log(res);
  })
  .catch(function(err) {
    console.log('something went wrong...', err);
  });
\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

Demo App

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubeplayer-inline":{"name":"nativescript-youtubeplayer-inline","version":"73.0.1","license":"Apache-2.0","readme":"

NativeScript YoutubePlayer

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

NativeScript 4x

\n\n

NativeScript 3x

\n\n

Configuration

\n

Android

\n

Api key follow ➡\nlink to get\nyour api key

\n

Usage

\n

XML

\n

IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

\n
<ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
\n

Angular

\n
import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

@NgModule({
    imports: [
    YoutubePlayerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
<YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
\n

Vue

\n

Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

\n
import Vue from 'nativescript-vue'
Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer)
\n
<template>
  <Page class=\"page\">
    <ActionBar class=\"action-bar\">
      <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <StackLayout>
      <YoutubePlayer src=\"wH_0_pijbZY\" apiKey=\"your-api-key\"/>
    </StackLayout>
  </Page>
</template>
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
play()voidStarts video playback of the currently cued / loaded video.
stop()voidStops and cancels loading of the current video.
destroy()voidDestroy the video player and free resources.
pause()voidPauses the currently playing video.
isPlaying()falsebooleanReturns is current video is playing.
toggleFullscreen()voidToggle fullscreen mode.
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
srcnullstring
  • - [x]
Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
optionsnullObject
  • - [ ]
Player options available IOS only
isFullScreenfalseboolean
  • - [ ]
Returns if player is currently in fullscreen mode.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-sdk":{"name":"nativescript-aws-sdk","version":"0.0.4","license":"Apache-2.0","readme":"

NativeScript AWS SDK

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-aws-sdk
\n

Usage

\n

Android

\n

Add the following services in the app/App_Resources/Android/AndroidManifest.xml

\n
<manifest ... >
    <application ... >
        ...
<service android:name= \"com.amazonaws.mobileconnectors.s3.transferutility.TransferService\" android:enabled=\"true\" />
  </application>
</manifest>
\n

TypeScript

\n

S3

\n
import { S3 } from 'nativescript-aws-sdk';
S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
\n
import { S3 } from 'nativescript-aws-sdk';
const s3 = new S3();
const imageUploaderId = s3.createUpload({
  file: '~/assets/hulk_wolverine_x_men.jpg',
  bucketName: 'yaychat',
  key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
  acl: 'public-read',
  completed: (error, success) => {
    if (error) {
      console.log(`Download Failed :-> ${error.message}`);
    }
    if (success) {
      console.log(`Download Complete :-> ${success.path}`);
    }
  },
  progress: progress => {
    console.log(`Progress : ${progress.value}`);
  }
});

s3.pause(imageUploaderId);
s3.resume(imageUploaderId);
s3.cancel(imageUploaderId);
\n

JavaScript

\n
const S3 = require('nativescript-aws-sdk').S3;
S3.S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
\n
const imageUploaderId = s3.createUpload({
  file: '~/assets/hulk_wolverine_x_men.jpg',
  bucketName: 'yaychat',
  key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
  acl: 'public-read',
  completed: (error, success) => {
    if (error) {
      console.log(`Download Failed :-> ${error.message}`);
    }
    if (success) {
      console.log(`Download Complete :-> ${success.path}`);
    }
  },
  progress: progress => {
    console.log(`Progress : ${progress.value}`);
  }
});

s3.pause(imageUploaderId);
s3.resume(imageUploaderId);
s3.cancel(imageUploaderId);
\n

Api

\n

S3

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
createDownload(options: S3DownloadOptions)numberCreates a task it returns the id of the task
createUpload(options: S3UploadOptions)numberCreates a task it returns the id of the task
resume(id: number)voidResumes a task.
cancel(id: number)voidCancels a task.
pause(id: number)voidPauses a task.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-recycler":{"name":"nativescript-nbmaterial-recycler","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of the Recycler View

\n

The recycler view is only available in Android. It has better performance than the default list view when the datasource size increase.\non iOS it uses the defult ListView implementation.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:rec=\"nativescript-nbmaterial-recycler\">
 \t\t<rec:RecyclerView row=\"0\"  items=\"{{source}}\" id=\"list\" itemTap=\"tapItem\" itemLongTap=\"tapLongItem\" itemTemplateSelector=\"templateSelector\">
\t\t\t\t<rec:RecyclerView.itemTemplates>
\t\t\t\t\t<template key=\"zero\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"green\" />
\t\t\t\t\t</template>
\t\t\t\t\t<template key=\"un\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"white\" paddingTop=\"10\"  paddingBottom=\"10\" />
\t\t\t\t\t</template>
\t\t\t\t\t<template key=\"deux\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"red\"/>
\t\t\t\t\t</template>
\t\t\t\t</rec:RecyclerView.itemTemplates>
\t\t\t</rec:RecyclerView>
</Page>

}
\n

The RecyclerView has this interface:

\n
export declare class RecyclerView extends ListView {
    public static itemLongTapEvent;
    public recycler: any;
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-dynamo":{"name":"nativescript-aws-dynamo","version":"1.0.1","license":"Apache-2.0","readme":"

Your Plugin Name

\n

nativescript-aws-dynamo

\n

This plugin is limited edition to use AWS DynamoDB services.\nif you want to buy full edition or other AWS services plugins then you can touch us with this url.\nwww.cerensoftware.co.uk

\n

(Optional) Prerequisites / Requirements

\n

if you get keychain error in iOS\nyou have to install nativescript-custom-entitlements plugin to your project.\nyou add this lines to app.entitlements file.

\n
<dict>
    <key>keychain-access-groups</key>
    <array>
        <string>$(AppIdentifierPrefix)org.nativescript.yourprojectname</string>
    </array>
</dict>
\n

Installation

\n
tns plugin add nativescript-aws-cognito
\n

Usage

\n

This plugin works only UnAuth, You Should give permission to UnAuth role for Dynamodb. You Would this url.

\n
    \timport { AwsDynamo, DynamoCommonDelegate } from 'nativescript-aws-dynamo';
\n

You Should import plugin. You Should AwsDynamo object and DynamoCommonDelegate imlement. Your class Should implement from DynamoCommonDelegate.

\n
    \tinterface DynamoCommonDelegate{
    \t\tonError(error:String);
    \t\tonSuccess(result:any);
\t\t}
\n

You Should create AwsDynamo instance and call initDdb method. You give region and your identity pool id. You would look AWS documantation for more information.

\n
    \tthis.awsDynamo = new AwsDynamo();
    \tthis.awsDynamo.initDdb(\"AWSRegionUSEast2\", \"us-east-2:77218a3c-b958-41qw-bf14-984d54adba56\");
\n

You Should these methods for CRUD operation. All Methods Async, you Should DynamoCommonDelegate instance to methods.

\n
     this.awsDynamo.putItem(\"Books\", [{ key: \"ISBN\", value: { data: \"8\", type: \"S\" } },
    { key: \"Author\", value: { data: \"ali4\", type: \"S\" } },
    { key: \"Title\", value: { data: \"deneme4\", type: \"S\" } },
    { key: \"list1\", value: { type: \"L\", data: [{ data: \"list1\", type: \"S\" }, { data: \"3\", type: \"N\" }] } },
    { key: \"boolen\", value: { type: \"BO\", data: true } },
    { key: \"set1\", value: { type: \"SS\", data: [\"set1\", \"set2\"] } }
    ], this);
\n
     this.awsDynamo.getItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"10\", type:\"S\"}}], this);
\n
     this.awsDynamo.deleteItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"4\", type:\"S\"}}], this);
\n
     this.awsDynamo.updateItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"3\", type:\"S\"}}], [{key:\"set2\", value:{type:\"SS\", data:[\"set1\",\"set2\"]},\"action\":\"PUT\"}] , this);
\n

API

\n

This plugin uses ObjectiveC AWS SDk and Java AWS Sdk.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foldingcell":{"name":"nativescript-foldingcell","version":"1.0.10","license":"Apache-2.0","readme":"

nativescript-yourplugin

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-yourplugin
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-store-ratings":{"name":"nativescript-store-ratings","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript: Store Ratings

\n

This plugin exposes the native In-App Reviews for iOS and Android. Please refer to the respective guidelines of Apple and Google.

\n

Installation

\n
tns plugin add nativescript-store-ratings
\n

Usage

\n

You can ask for a review anywhere in your app by importing

\n
import * as storeRating from 'nativescript-store-ratings';
\n

and calling

\n
storeRating.initRating();
\n

That's it! Your user will be prompted to review your app by tapping on a star and leave an additional comment. Note: The dialog won't show in development on Android. It'll only be displayed if your app is on the internal test track or in production. For more information about testing the integration on Android please refer to this guide

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-call":{"name":"nativescript-call","version":"0.2.0","license":"Apache-2.0","readme":"

NativeScript Call plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Dude, I already have a Phone app on my phone..

\n

Sure 😅

\n

But what if your app supports VOIP / WebRTC calls? You'll want to have the operating system pop up the\nnative call dialog, right? That's where this plugin comes in.

\n

Currently iOS only, where we leverage CallKit, which is part of the iOS SDK since iOS 10.

\n

Installation

\n
tns plugin add nativescript-call
\n

Demo

\n

Check the source in the demo folder, or run it on your own device:

\n
git clone https://github.com/EddyVerbruggen/nativescript-call
cd nativescript-call/src
npm i
npm run demo.ios
\n
\n

Usage in NativeScript-Angular and NativeScript-Vue is nothing different from what you'd do in NativeScript-Core.

\n
\n

API

\n

receiveCall

\n

The properties you can pass to this method are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
appNamestringThe app's name, as shown on the caller screen. Default the name of your app.
iconstringThe name of an icon to show for your app. Loaded from the App_Resources folder (see the demo).
handleTypeTNSCallHandleTypeEither "PHONE" (default) or "EMAIL".
handleIdstringEither a phone number when handleType is "PHONE", or an email address when handleType is "EMAIL".
callerNamestringThe name to be displayed on the call UI.
hasVideobooleanWhether or not this call supports video. Default false.
supportsDTMFbooleanWhether the call can send DTMF (dual tone multifrequency) tones via hard pause digits or in-call keypad entries. Default false.
\n

The event handlers you can pass to this method are:

\n

| Name | Description |\n| --- | --- | --- |\n| onSpeakerOn | Triggered when the speaker is turned on. |\n| onSpeakerOff | Triggered when the speaker is turned off. |

\n
import { TNSCall } from \"nativescript-call\";
const tnsCall = new TNSCall();

tnsCall.receiveCall(
    {
      appName: \"My App\",
      icon: \"download-from-cloud\", // see demo/app/App_Resources/iOS
      handleType: \"PHONE\",
      handleId: \"+31612345678\",
      callerName: \"Donald J. Drumpf\",
      hasVideo: true,
      supportsDTMF: true,
      onSpeakerOn: () => console.log(\"Speaker ON\"),
      onSpeakerOff: () => console.log(\"Speaker OFF\")
    })
    .then(() => console.log(\"Receive call success\"))
    .catch(err => console.log(\"Error receiving call: \" + err));
\n

endCall

\n
import { TNSCall } from \"nativescript-call\";
const tnsCall = new TNSCall();

tnsCall.endCall()
    .then(() => console.log(\"Ended call\"))
    .catch(err => console.log(\"Error ending call: \" + err));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-filepickers":{"name":"nativescript-filepickers","version":"1.0.3","license":"Apache-2.0","readme":"

nativescript-filepickers \"apple\" \"android\"

\n
\n

Features

\n
\n\n
\n

(NEW) @1.0.3

\n
\n\n
\n

Supported platforms

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OSVersion
Android 11API 30
Android 10(partially tested)API 29(partially tested)
Android 9(partially tested)API 28(partially tested)
IOS support is comingIOS support is coming
\n
npm i nativescript-filepickers
\n

Import the plugin

\n

TypeScript

\n
import { CopyTo, Create, Extensions, Modes, OpenFile } from \"nativescript-filepickers\";
\n

Create filepicker

\n

Create filepicker in single or multiple mode to specifiy if the filepicker will be used for single or multiple selection of images

\n

TypeScript

\n
const context = Create({
    extensions: ['pdf', 'xls'],
    mode: Modes.Single,
});
\n

Request permissions, show the images list and process the selection

\n
context
    .Authorize()
    .then(() => {
    return context.Present();
    })
    .then((assets) => {
        assets.forEach((asset) => {
            const newPath = CopyTo(asset);
            this.selectedImages.push(newPath);
            console.log(\"Real Path: \" + asset);
            console.log(\"Copied Path: \" + newPath);
        });
    });
\n
\n

NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

\n
\n
\n

NOTE: To be sure to have permissions add the following lines in AndroidManifest.xml

\n
\n
<manifest ... >
\t<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
\t<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
\t<uses-permission android:name=\"android.permission.MANAGE_EXTERNAL_STORAGE\" />

  <application android:requestLegacyExternalStorage=\"true\" ... >
    ...
  </application>
</manifest>
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionPlatformDefaultDescription
modebothModes.SingleThe mode if the filepicker. Possible values are Modes.Single for single selection and Modes.Multiple for multiple selection.
extensionsboth--Choose Extensions.All for accepting all types of files or explicitly define types array like ['pdf', 'xls', 'png']
\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arcnet-plugin/smart-pos":{"name":"@arcnet-plugin/smart-pos","version":"1.0.5","license":"Apache-2.0","readme":"

@arcnet-plugin/smart-pos

\n
ns plugin add @arcnet-plugin/smart-pos
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-md5":{"name":"nativescript-md5","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript MD5

\n

A plugin for calculating MD5 hash string in "Native" way.

\n

Supported Platform

\n

Both iOS and Android.

\n

Installation

\n
tns plugin add nativescript-md5
\n

Usage

\n

To use the MD5 module you need to import the module.

\n

TypeScript

\n
import { MD5 } from 'nativescript-md5';

const hash = MD5.hashForString(\"hello\");
console.log(hash); // => 5d41402abc4b2a76b9719d911017c592
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-mapbox":{"name":"@enduco/nativescript-mapbox","version":"2.1.24","license":"MIT","readme":"\n \n\n

NativeScript Mapbox plugin

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

Awesome native OpenGL-powered maps - by Mapbox

\n\n
\n

There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

\n
\n

Before you begin - Prerequisites

\n

You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

\n

You will also need to set up your development environment. Please refer to the NativeScript documentation.

\n

Installation

\n
$ tns plugin install nativescript-mapbox
\n

DEMOS

\n

Two demo applications are available in the repository.

\n

To run them, you'll need to clone the github repository and build the plugin. See below.

\n

You will also need an access token. Your access_token can then be set in the top level mapbox_config.ts file.

\n

The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

\n
\n

NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

\n
\n

To run the Angular demo

\n
cd src
npm run build.release
cd ../demo-angular
tns run <platform>
\n

To run the plain Nativescript demo

\n
cd src
npm run build.release
cd ../demo
tns run <platform>
\n

Debug Build

\n

To come up to speed on the plugin, I added extensive trace messages.\nThese can be turned on by replacing 'npm run build.release' with 'npm run build.debug' in the commands above.

\n

Breaking Changes

\n

This version includes breaking API changes.

\n

The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

\n

Issues

\n

If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

\n

On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

\n
  <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
\n

If you get an error related to TelemetryService then please check it's there.

\n

Usage

\n

Demo app (XML + TypeScript)

\n

If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

\n

Demo app (Angular)

\n

There is also the beginnings of an Angular demo in demo-angular in this repository.

\n

Declaring a map in the view

\n

XML

\n

You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

\n

A simple layout could look like this:

\n\n

Could be rendered by a definition like this:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
  <StackLayout>
    <Label text=\"Nice map, huh!\" class=\"title\"/>
    <ContentView height=\"240\" width=\"240\">
      <map:MapboxView
          accessToken=\"your_token\"
          mapStyle=\"traffic_night\"
          latitude=\"52.3702160\"
          longitude=\"4.8951680\"
          zoomLevel=\"3\"
          showUserLocation=\"true\"
          mapReady=\"onMapReady\">
      </map:MapboxView>
    </ContentView>
  </StackLayout>
</Page>
\n

Angular

\n

Component:

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
\n

View:

\n
  <ContentView height=\"100%\" width=\"100%\">
    <Mapbox
        accessToken=\"your_token\"
        mapStyle=\"traffic_day\"
        latitude=\"50.467735\"
        longitude=\"13.427718\"
        hideCompass=\"true\"
        zoomLevel=\"18\"
        showUserLocation=\"false\"
        disableZoom=\"false\"
        disableRotation=\"false\"
        disableScroll=\"false\"
        disableTilt=\"false\"
        (mapReady)=\"onMapReady($event)\">
    </Mapbox>
  </ContentView>
\n

Available XML/Angular options

\n

All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optiondefaultdescription
accesstoken-see 'Prerequisites' above
delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
latitude -Set the center of the map by passing this in
longitude-.. and this as well
zoomLevel00-20
showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
hideCompass falseDon't show the compass in the top right corner during rotation of the map
hideLogofalseMapbox requires false if you're on a free plan
hideAttribution trueMapbox requires false if you're on a free plan
disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
moveBeginEvent-The name of a function to be called when the map is moved.
locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
\n

Want to add markers?

\n

This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

\n

Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
  var nativeMapView = args.ios ? args.ios : args.android;
  console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

  // .. or use the convenience methods exposed on args.map, for instance:
  args.map.addMarkers([
    {
      lat: 52.3602160,
      lng: 4.8891680,
      title: 'One-line title here',
      subtitle: 'Really really nice location',
      selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
      onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
    }]
  );
}

exports.onMapReady = onMapReady;
\n

.. or want to set the viewport bounds?

\n
var mapbox = require(\"nativescript-mapbox\");

function onMapReady(args) {
  args.map.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true
      }
  );
}

exports.onMapReady = onMapReady;
\n

The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

\n

Check out the usage details on the functions below.

\n

Declaring a map programmatically

\n

Add a container to your view XML where you want to programmatically add the map. Give it an id.

\n
<ContentView id=\"mapContainer\" />
\n

show

\n

    const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

    const settings = {

      // NOTE: passing in the container here.

      container: contentView,
      accessToken: ACCESS_TOKEN,
      style: MapStyle.LIGHT,
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 9, // 0 (most of the world) to 20, default 0
      showUserLocation: true, // default false
      hideAttribution: true, // default false
      hideLogo: true, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          iconPath: 'res/markers/green_pin_marker.png',
          onTap: () => console.log(\"'Nice location' marker tapped\"),
          onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
        }
      ]
    };

    console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

    const mapView = new MapboxView();

    // Bind some event handlers onto our newly created map view. 

    mapView.on( 'mapReady', ( args : any ) => {

      console.log( \"main-view-model: onMapReady fired.\" );

      // this is an instance of class MapboxView

      this.mapboxView = args.map;

      // get a reference to the Mapbox API shim object so we can directly call its methods.

      this.mapbox = this.mapboxView.getMapboxApi();

      this.mapbox.setOnMapClickListener( point => {
        console.log(`>> Map clicked: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnMapLongClickListener( point => {
        console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
        return true;
      });

      this.mapbox.setOnScrollListener((point: LatLng) => {
        // console.log(`>> Map scrolled`);
      });

      this.mapbox.setOnFlingListener(() => {
        console.log(`>> Map flinged\"`);
      }).catch( err => console.log(err) );

    });

    mapView.setConfig( settings );
    contentView.content = mapView;
\n

hide

\n

All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

\n
  mapbox.hide();
\n

unhide

\n

If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

\n
  mapbox.unhide();
\n

destroy 💥

\n

To clean up the map entirely you can destroy instead of hide it:

\n
  mapbox.destroy();
\n

setMapStyle

\n

You can update the map style after you've loaded it.

\n
\n

With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

\n
\n
  mapbox.setMapStyle(mapbox.MapStyle.DARK);
\n

addMarkers

\n
  import { MapboxMarker } from \"nativescript-mapbox\";

  const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
    id: 2, // can be user in 'removeMarkers()'
    lat: 52.3602160, // mandatory
    lng: 4.8891680, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!',
    // icon: 'res://cool_marker', // preferred way, otherwise use:
    icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
    iconPath: 'res/markers/home_marker.png',
    selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
    onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
    onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
  };

  mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])
\n

Updating markers

\n

Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

\n
  firstMarker.update({
    lat: 52.3622160,
    lng: 4.8911680,
    title: 'One-line title here (UPDATE)',
    subtitle: 'Updated subtitle',
    selected: true, // this will trigger the callout upon update
    onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
    onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
  })
\n

removeMarkers

\n

You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

\n
  // remove all markers
  mapbox.removeMarkers();

  // remove specific markers by id
  mapbox.removeMarkers([1, 2]);
\n

setViewport

\n

If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

\n
  mapbox.setViewport(
      {
        bounds: {
          north: 52.4820,
          east: 5.1087,
          south: 52.2581,
          west: 4.6816
        },
        animated: true // default true
      }
  )
\n

getViewport

\n
  mapbox.getViewport().then(
      function(result) {
        console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
      }
  )
\n

setCenter

\n
  mapbox.setCenter(
      {
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        animated: false // default true
      }
  )
\n

getCenter

\n

Here the promise callback makes sense, so adding it to the example:

\n
  mapbox.getCenter().then(
      function(result) {
        console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getCenter error: \" + error);
      }
  )
\n

setZoomLevel

\n
  mapbox.setZoomLevel(
      {
        level: 6.5, // mandatory, 0-20
        animated: true // default true
      }
  )
\n

getZoomLevel

\n
  mapbox.getZoomLevel().then(
      function(result) {
        console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
      },
      function(error) {
        console.log(\"mapbox getZoomLevel error: \" + error);
      }
  )
\n

animateCamera

\n
  // this is a boring triangle drawn near Amsterdam Central Station
  mapbox.animateCamera({
    // this is where we animate to
    target: {
        lat: 52.3732160,
        lng: 4.8941680
    },
    zoomLevel: 17, // Android
    altitude: 2000, // iOS (meters from the ground)
    bearing: 270, // Where the camera is pointing, 0-360 (degrees)
    tilt: 50,
    duration: 5000 // default 10000 (milliseconds)
  })
\n

setTilt (Android only)

\n
  mapbox.setTilt(
      {
        tilt: 40, // default 30 (degrees angle)
        duration: 4000 // default 5000 (milliseconds)
      }
  )
\n

getTilt (Android only)

\n
  mapbox.getTilt().then(
      function(tilt) {
        console.log(\"Current map tilt: \" +  tilt);
      }
  )
\n

getUserLocation

\n

If the user's location is shown on the map you can get their coordinates and speed:

\n
  mapbox.getUserLocation().then(
      function(userLocation) {
        console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
        console.log(\"Current user speed: \" +  userLocation.speed);
      }
  )
\n

trackUser

\n

In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

\n
  mapbox.trackUser({
    mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
    animated: true
  });
\n

addSource

\n

https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

\n

Adds a vector to GeoJSON source to the map.

\n
  mapbox.addSource( id, {
    type: 'vector',
    url: 'url to source'
  } );
\n

-or-

\n
  mapbox.addSource( id, {
    'type': 'geojson',
    'data': {
      \"type\": \"Feature\",
        \"geometry\": {
        \"type\": \"LineString\",
          \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
        }
      }
    }
  );
\n

removeSource

\n

Remove a source by id

\n
  mapbox.removeSource( id );
\n

addLayer

\n

NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

\n

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

\n

To add a line:

\n
  mapbox.addLayer({
    'id': someid,
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        \"type\": \"Feature\",
          \"geometry\": {
          \"type\": \"LineString\",
            \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
          }
        }
      }
    },
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },    
    'paint': {
      'line-color': '#ed6498',
      'line-width': 5,
      'line-opacity': .8,
      'line-dash-array': [ 1, 1, 1, ..]
    }
  });
\n

To add a circle:

\n
  mapbox.addLayer({
    \"id\": someid,
    \"type\": 'circle',
    \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
    \"source\": {
      \"type\": 'geojson',
      \"data\": {
        \"type\": \"Feature\",
        \"geometry\": {
          \"type\": \"Point\",
          \"coordinates\": [ lng, lat ]
        }
      }
    }, 
    \"paint\": {
      \"circle-radius\": {
        \"stops\": [
          [0, 0],
          [20, 8000 ]
        ],
        \"base\": 2
      },
      'circle-opacity': 0.05,
      'circle-color': '#ed6498',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ed6498'
    } 
  });
\n

Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

\n

removeLayer

\n

Remove a layer added with addLayer() by id.

\n
  mapbox.removeLayer( id );
\n

addLinePoint

\n

Dynamically add a point to a line.

\n
  mapbox.addLinePoint( <id of line layer>, lnglat )
\n

where lnglat is an array of two points, a longitude and a latitude.

\n

addPolygon

\n

Draw a shape. Just connect the dots like we did as a toddler.

\n

The first person to tweet a snowman drawn with this function gets a T-shirt.

\n
  // after adding this, scroll to Amsterdam to see a semi-transparent red square
  mapbox.addPolygon(
      {
        id: 1, // optional, can be used in 'removePolygons'
        fillColor: new Color(\"red\"),
        fillOpacity: 0.7,

        // stroke-related properties are only effective on iOS
        strokeColor: new Color(\"green\"),
        strokeWidth: 8,
        strokeOpacity: 0.5,

        points: [
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          },
          {
            lat: 52.35421556258807,
            lng: 4.9308013916015625
          },
          {
            lat: 52.353796172573944,
            lng: 4.8799896240234375
          },
          {
            lat: 52.3864966440161,
            lng: 4.8621368408203125
          },
          {
            lat: 52.3923633970718,
            lng: 4.902648925781249
          }
        ]
      })
      .then(result => console.log(\"Mapbox addPolygon done\"))
      .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
\n

removePolygons

\n

You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

\n
  // remove all polygons
  mapbox.removePolygons();

  // remove specific polygons by id
  mapbox.removePolygons([1, 2]);
\n

addPolyline

\n

Deprecated. Use addLayer() instead.

\n

Draw a polyline. Connect the points given as parameters.

\n
  // Draw a two segment line near Amsterdam Central Station
  mapbox.addPolyline({
      id: 1, // optional, can be used in 'removePolylines'
      color: '#336699', // Set the color of the line (default black)
      width: 7, // Set the width of the line (default 5)
      opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
      points: [
          {
              'lat': 52.3833160, // mandatory
              'lng': 4.8991780 // mandatory
          },
          {
              'lat': 52.3834160,
              'lng': 4.8991880
          },
          {
              'lat': 52.3835160,
              'lng': 4.8991980
          }
      ]
  });
\n

removePolylines

\n

Deprecated. Use removeLayer() instead.

\n

You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

\n
  // remove all polylines
  mapbox.removePolylines();

  // remove specific polylines by id
  mapbox.removePolylines([1, 2]);
\n

addSource

\n

Add a source that can be used by addLayer. Note only vector type is currently supported.

\n
  mapbox.addSource(
    id: \"terrain-source\", // required
    type: \"vector\", // supported types: vector
    url: \"mapbox://mapbox.mapbox-terrain-v2\"
  );
\n

removeSource

\n

Remove a source by id.

\n
  mapbox.removeSource(\"terrain-source\");
\n

addLayer

\n

Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

\n
  mapbox.addLayer(
    id: \"terrain-data\",  // required
    source: \"terrain-source\",  // id of source
    sourceLayer: \"contour\",  // id of layer from source
    type: \"line\", // supported types: circle, fill, line
    lineJoin: \"round\",
    lineCap: \"round\",
    lineColor: \"#ff69b4\",
    lineWidth: 1,
  );
\n

removeLayer

\n

Remove a layer by id.

\n
  mapbox.removeLayer(\"terrain-data\");
\n

setOnMapClickListener

\n

Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

\n
  mapbox.setOnMapClickListener((point: LatLng) => {
    console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnMapLongClickListener

\n

Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

\n
  mapbox.setOnMapLongClickListener((point: LatLng) => {
    console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

setOnScrollListener

\n

Add a listener to retrieve lat and lng of where the user scrolls to on the map.

\n
  mapbox.setOnScrollListener((point?: LatLng) => {
    console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
  });
\n

Offline maps

\n

For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

\n

Important read: the offline maps documentation by Mapbox.

\n

downloadOfflineRegion

\n

This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

\n
  mapbox.downloadOfflineRegion(
    {
      accessToken: accessToken, // required for Android in case no map has been shown yet
      name: \"Amsterdam\", // this name can be used to delete the region later
      style: mapbox.MapStyle.OUTDOORS,
      minZoom: 9,
      maxZoom: 11,
      bounds: {
        north: 52.4820,
        east: 5.1087,
        south: 52.2581,
        west: 4.6816
      },
      // this function is called many times during a download, so
      // use it to show an awesome progress bar!
      onProgress: function (progress) {
        console.log(\"Download progress: \" + JSON.stringify(progress));
      }
    }
  ).then(
    function() {
      console.log(\"Offline region downloaded\");
    },
    function(error) {
      console.log(\"Download error: \" + error);
    }
  );
\n

Advanced example: download the current viewport

\n

Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

\n
  // I spare you the error handling on this one..
  mapbox.getViewport().then(function(viewport) {
    mapbox.downloadOfflineRegion(
      {
        name: \"LastViewport\", // anything you like really
        style: mapbox.MapStyle.LIGHT,
        minZoom: viewport.zoomLevel,
        maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
        bounds: viewport.bounds,
        onProgress: function (progress) {
          console.log(\"Download %: \" + progress.percentage);
        }
      }
    );
  });
\n

listOfflineRegions

\n

To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

\n
  mapbox.listOfflineRegions({
    // required for Android in case no map has been shown yet
    accessToken: accessToken
  }).then(
    function(regions) {
      console.log(JSON.stringify(JSON.stringify(regions));
    },
    function(error) {
      console.log(\"Error while listing offline regions: \" + error);
    }
  );
\n

deleteOfflineRegion

\n

You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

\n
  mapbox.deleteOfflineRegion({
    name: \"Amsterdam\"
  }).then(
    function() {
      console.log(\"Offline region deleted\");
    },
    function(error) {
      console.log(\"Error while deleting an offline region: \" + error);
    }
  );
\n

Permissions

\n

hasFineLocationPermission / requestFineLocationPermission

\n

On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

\n

You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

\n

Note that hasFineLocationPermission will return true when:

\n\n
  mapbox.hasFineLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestFineLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
  );

  // if no permission was granted previously this will open a user consent screen
  mapbox.requestFineLocationPermission().then(
      function() {
        console.log(\"Location permission requested\");
      }
  );
\n

Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

\n

Using marker images from the internet

\n

If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

\n
\t<key>NSAppTransportSecurity</key>
\t<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
\t</dict>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-base64":{"name":"nativescript-base64","version":"1.2.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-segment":{"name":"nativescript-segment","version":"1.0.4","license":"Apache-2.0","readme":"

Nativescript-Segment

\n

A NativeScript plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

\n\n

Installation

\n
tns plugin add nativescript-segment
\n

For access to the native SDK type definitions, specify the definitions in your references.d.ts

\n
/// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
/// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
\n

Warning: Depending on your project structure, the paths shown above may be inaccurate.

\n

Usage

\n

Example

\n

All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

\n
const config: SegmentConfig = {
    trackLifeCycleEvents: true,
    recordScreenViews: true
};
Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
\n
import { Segment } from 'nativescript-segment';

public someInteraction(type: string) {
    Segment.track(type);
}
\n

For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

\n
// iOS
Segment.ios.track('some event');

// Android
Segment.android.track('some event');
\n

Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

\n

Platform specifics

\n

Android

\n

Requires the internet permission if not already enabled in your app.

\n
<uses-permission android:name=\"android.permission.INTERNET\"/>
\n

iOS best practice

\n

In your application's delegate:

\n
import { Segment } from 'nativescript-segment';

public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
    const config = {
        setDebug: true; // set to show full debug logging by the native APIs
    }
    Segment.configure(key, config);
    return true;
}
\n

API

\n

configure

\n
const config: SegmentConfig = {
    trackLifeCycleEvents: true,
    recordScreenViews: true
};
Segment.configure('your segment write key', config);
\n

SegmentConfig Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
recordScreenViewstrueenable or disable auto tracking of screen views
optionsDefault integration options, see SegmentOptions
proxyUrlnullforward all Segment calls through a proxy
setLoggingfalseset base INFO logging in Android SDK and plugin itself
setDebugfalseSets full debug logging in Android and iOS
middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
\n

SegmentOptions Properties (all optional)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
useAlltrueenables all integrations (default for Segment SDKs)
excluded[]exclude Segment from integrating with the specified services
included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
\n

identify

\n

Identify the current user. Additional traits are supported, and custom traits are available.

\n
const traits: SegmentTraits = {
    firstName: 'Dave',
    email: 'dave@domain.com'
};
const customTraits: any {
    favoriteColor: 'blue'
};
Segment.identify('userId', traits, customTraits);
\n

SegmentTraits Properties (all optional)

\n

Please see Segment's official spec for all available traits and their descriptions.

\n

track

\n

Track an event.

\n
Segment.track('Some event');

const properties = {
    productName: 'Bread',
    revenue: 4
};
Segment.track('Product Purchased', properties);
\n

Please see Segment's official spec for details on properties to add to track calls.

\n

screen

\n

Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

\n
Segment.screen('signup', 'verify password');
\n

Please see Segment's official spec for details on screen calls.

\n

group

\n

Associate current user with a group. A user can belong to multiple groups.

\n
Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
  name: \"Initech\", 
  industry: \"Technology\",
  employees: 329, 
  plan: \"enterprise\", 
  \"total billed\": 830
});
\n

Please see Segment's official spec for details on group calls.

\n

alias

\n

alias is how you associate one identity with another.

\n
Segment.alias(newId);
\n

Please see Segment's official spec for details on alias calls.

\n

optout

\n

Disables or enables all analytics, remains set throughout app restarts.

\n
Segment.optOut(true);
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/rich-text":{"name":"@abbieben/rich-text","version":"3.0.12","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas-plugin":{"name":"nativescript-canvas-plugin","version":"0.9.0-alpha05","license":"Apache-2.0","readme":"

NativeScript Canvas

\n

\"npm\"\n\"npm\"\n\"Build

\n

Powered by

\n\n

Installation

\n
tns plugin add nativescript-canvas-plugin
\n

Note min ios support atm 11 | min android support 17

\n

IMPORTANT: ensure you include xmlns:canvas="nativescript-canvas-plugin" on the Page element for core {N}

\n

Usage

\n
<canvas:TNSCanvas id=\"canvas\" width=\"100%\" height=\"100%\" ready=\"canvasReady\"/>
\n

2D

\n
let ctx;
let canvas;
export function canvasReady(args) {
  console.log('canvas ready');
  canvas = args.object;
  console.log(canvas);
  ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 100);
}
\n

WEBGL

\n
let gl;
let canvas;
export function canvasReady(args) {
  console.log('canvas ready');
  canvas = args.object;
  gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
  gl.viewport(0, 0,
  gl.drawingBufferWidth, gl.drawingBufferHeight);
  // Set the clear color to darkish green.
  gl.clearColor(0.0, 0.5, 0.0, 1.0);
  // Clear the context with the newly set color. This is
  // the function call that actually does the drawing.
  gl.clear(gl.COLOR_BUFFER_BIT);
  canvas.flush(); // must be called to draw on screen
}
\n

API

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@kefah/nativescript-uuid":{"name":"@kefah/nativescript-uuid","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript UUID

\n

This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

\n
\n

This plugin support the NS 8 also ;-)

\n
\n

Inspired from StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?.

\n

Uses SAMKeychain Cocoa Pod.

\n

Installation

\n

Run the following command from the root of your project:

\n
ns plugin add @kefah/nativescript-uuid
\n

Usage

\n

JavaScript

\n
    let uid = require(\"@kefah/nativescript-uuid\").NativescriptUuid;
    const uuid = uid.getUUID();
    console.log(`The device UUID is ${uuid}`);
\n

TypeScript

\n
    import {NativescriptUuid} from '@kefah/nativescript-uuid';

    const uuid = NativescriptUuid.getUUID();
    console.log(`The device UUID is ${uuid}`);
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/apple-sign-in":{"name":"@nativescript/apple-sign-in","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/apple-sign-in

\n
ns plugin add @nativescript/apple-sign-in
\n

Requirements

\n

Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.\nOpen your app's App_Resources/iOS folder and add the following (or append) to a file named app.entitlements.

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
\t<key>com.apple.developer.applesignin</key>
\t<array>
\t\t<string>Default</string>
\t</array>
</dict>
</plist>
\n

Usage

\n

API

\n

isSupported

\n

Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

\n
import { SignIn } from \"@nativescript/apple-sign-in\";

const supported: boolean = SignIn.isSupported();
\n

signInWithApple

\n

Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

\n
import { SignIn, User } from \"@nativescript/apple-sign-in\";

signIn(
    {
        // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
        scopes: [\"EMAIL\", \"FULLNAME\"]
    })
    .then((result: User) => {
        console.log(\"Signed in, user: \" + result);
        console.log(\"Signed in, familyName: \" + result.fullName.familyName);
        // you can remember the user to check the sign in state later (see 'getSignInWithAppleState' below)
        this.user = result.user;
    })
    .catch(err => console.log(\"Error signing in: \" + err));
\n

getState

\n
\n

⚠️ This does not seem to work on a simulator!

\n
\n

If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

\n
import { SignIn } from \"@nativescript/apple-sign-in\";

const user: string = \"the id you got back from the signIn function\";

SignIn.getState(user)
    .then(state => console.log(\"Sign in state: \" + state))
    .catch(err => console.log(\"Error getting sign in state: \" + err));
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"crypto-module":{"name":"crypto-module","version":"1.3.19","license":"ISC","readme":"

This module offers an interface between several cryptographic block cipher libraries, as well as an interface to an RSA library. You can use it with nativescript.

\n

See it in action

\n
var crypto_module = require('crypto-module');
Object.keys(crypto_module.ivLength).forEach(function(algorithm) {
    console.log(algorithm); 
    var encrypted = \"\";
    var decrypted = \"\";
    var key = \"\";
    if(algorithm == 'caesar'){
        key = 28; 
    } else{
        key = \"secret\";
    }

    encrypted = crypto_module.encryptMessage('hallo 👄', key, algorithm); 
    console.log(encrypted);
    decrypted = crypto_module.decryptMessage(encrypted, key, algorithm);
    console.log(decrypted); 
    console.log(\"-----------------------\")
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cryptography":{"name":"nativescript-cryptography","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript Cryptography

\n

A simple plugin for asymmetric keys operations.

\n

Installation

\n

tns plugin add nativescript-cryptography

\n

Usage

\n

import { Cryptography } from "nativescript-cryptography";

\n

param1: random tag string\nparam2: size of key\nparam3: save in secure storage (optional)

\n

const keyPair = cryptography.generateRsaPrivateKey(RsaPrivateKeyTag, RsaKeySize, true);

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@azaschka/nativescript-file-downloader":{"name":"@azaschka/nativescript-file-downloader","version":"1.5.5","license":"Apache-2.0","readme":"

nativescript-download-progress \"apple\" \"android\"

\n

\"npm

\n

Introduction

\n

This plugin allows you to download large files and provides progress updates.

\n

Nativescripts http.getFile method stores the data in memory which can cause out of memory exceptions and doesn't provide progress updates.

\n

Installation

\n
tns plugin add nativescript-download-progress
\n

Examples

\n
import { DownloadProgress } from \"nativescript-download-progress\";

const dp = new DownloadProgress();
dp.setProgressCallback((progress, url, destination) => {
  console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
});
dp.downloadFile(\"http://ipv4.download.thinkbroadband.com/20MB.zip\")
  .then((file) => {
    console.log(\"Success\", file);
  })
  .catch((error) => {
    console.log(\"Error\", error);
  });
\n

Passing request headers

\n
import { DownloadProgress } from \"nativescript-download-progress\";

const dp = new DownloadProgress();
dp.setProgressCallback((progress, url, destination) => {
  console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
});
const url = \"http://ipv4.download.thinkbroadband.com/20MB.zip\";
const destinationPath = \"some/path/to/file.zip\";
const requestOptions: RequestOptions = {
  method: \"GET\",
  headers: {
    Range: \"bytes=-\",
  },
};
dp.downloadFile(url, requestOptions, destinationPath)
  .then((file) => {
    console.log(\"Success\", file);
  })
  .catch((error) => {
    console.log(\"Error\", error);
  });
\n

Async / Await

\n
import { DownloadProgress } from \"nativescript-download-progress\";

const dp = new DownloadProgress();
dp.setProgressCallback((progress, url, destination) => {
  console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
});
try {
  const f = await downloadFile(
    \"http://ipv4.download.thinkbroadband.com/20MB.zip\"
  );
} catch (e) {
  console.log(\"Error\", error);
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-plugin":{"name":"nativescript-couchbase-plugin","version":"0.9.6","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript-Couchbase

\n

Installation

\n

tns plugin add nativescript-couchbase-plugin

\n

Usage

\n

Note Android min-sdk is 19

\n
import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const documentId = database.createDocument({
    \"firstname\": \"O\",
    \"lastname\": \"Fortune\",
    \"address\": {
        \"country\": \"Trinidad and Tobago\"
    },
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

const person = database.getDocument(documentId);


database.updateDocument(documentId, {
    \"firstname\": \"Osei\",
    \"lastname\": \"Fortune\",
    \"twitter\": \"https://www.twitter.com/triniwiz\"
});

// Default concurrency mode is FailOnConflict if you don't pass it
const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
\n

Synchronization with Couchbase Sync Gateway and Couchbase Server

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

const push = database.createPushReplication(
  'ws://sync-gateway-host:4984/my-database'
);
push.setUserNameAndPassword(\"user\",\"password\");
const pull = database.createPullReplication(
  'ws://sync-gateway-host:4984/my-database'
);
pull.setSessionId(\"SomeId\");
pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

push.setContinuous(true);
pull.setContinuous(true);
push.start();
pull.start();
\n

Listening for Changes

\n
database.addDatabaseChangeListener(function(changes) {
  for (var i = 0; i < changes.length; i++) {
    const documentId = changes[i];
    console.log(documentId);
  }
});
\n

Query

\n
const results = database.query({
  select: [], // Leave empty to query for all
  from: 'otherDatabaseName', // Omit or set null to use current db
  where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
  order: [{ property: 'firstName', direction: 'desc' }],
  limit: 2
});
\n

Transactions

\n

Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

\n
import { Couchbase } from 'nativescript-couchbase-plugin';
const database = new Couchbase('my-database');

database.inBatch(() => {
    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        }
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const person = database.getDocument(documentId);
    
    
    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });
    
    const isDeleted = database.deleteDocument(documentId);
});
\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-callblock":{"name":"nativescript-callblock","version":"0.0.2","license":"Apache-2.0","readme":"

NativeScript CallBlock

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

Allows you to block calls in nativescript on android platform only.

\n

Note: This documentation is not completed and will definitely update in future

\n

Supported Plaforms:

\n\n

Installation

\n

Install the package using any of these.

\n

Via NPM:

\n

tns plugin add nativescript-callblock

\n

Via NPM:

\n

npm install nativescript-callblock --save

\n

Via Yarn:

\n

yarn add nativescript-callblock

\n

Usage: Android

\n

Permissions:

\n
<uses-permission android:name="android.permission.READ_PHONE_STATE" />\n<uses-permission android:name="android.permission.CALL_PHONE" />\n
\n

JavaScript:

\n

Create a CallBlocker.js file in the app folder of your project. Paste the following

\n
const TelephonyManager = android.telephony.TelephonyManager;\nconst CallBlock = require('nativescript-callblock').CallBlock;\n\nconst NSCB = new CallBlock();\n\nandroid.content.BroadcastReceiver.extend("com.tns.broadcastreceivers.CallBlocker", \n    {\n        onReceive: function(context, intent) {\n            var action = intent.getAction();\n            number = intent.getExtras().getString(TelephonyManager.EXTRA_INCOMING_NUMBER);\n            \n            console.log("incoming from", number);\n\n            // Whatever you want.\n            let blocked = "00000000";\n            \n            if(number === blocked) {\n                NSCB.blockCall(context, intent);\n            }\n\n        }\n    }\n);\n
\n

After that add reciever at the end of <application> tag in AndroidManifest.xml.

\n
<application ... />\n    ...\n\t<receiver\n\t\tandroid:name="com.tns.broadcastreceivers.CallBlocker"\n\t\tandroid:enabled="true"\n\t\tandroid:exported="true">\n\t\t<intent-filter>\n\t\t\t<action android:name="android.intent.action.PHONE_STATE" />\n\t\t\t<action android:name="android.intent.action.NEW_OUTGOING_CALL" />\n\t\t</intent-filter>\n\t</receiver>\n</appliction>\n
\n

You're good to go.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-CallLog":{"name":"nativescript-CallLog","version":"1.0.6","readme":"

NativeScript Call Log

\n

\"NPM\"

\n

Limitations

\n

Currently, it only works on Android.

\n

Usage

\n
callLogsService.getCallLog().then(callLogs => {
    callLogs.data.forEach(callLog => {
        console.log(`${callLog['number']} ${callLog['type']} ${callLog['date']} ${callLog['duration']}`);
    })
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cblite":{"name":"nativescript-cblite","version":"1.0.4","license":"Apache-2.0","readme":"

NativeScript CB-Lite

\n

A plugin for Couchbase Lite on NativeScript supporting LiteServ internal REST operations.

\n

Status

\n

Android version working but yet in CBL 1.4.4. iOS still pending some code. For a complete and updated plugin check:\nhttps://github.com/triniwiz/nativescript-couchbase-plugin

\n

Installation

\n
tns plugin add nativescript-cblite
\n

Usage

\n

First you need to import the main class

\n
import { CBLite } from 'nativescript-cblite';
\n

In case you'll use the REST api, the following command will initialize it and provide the base url:

\n
const url = Utils.startCBLListener();
\n

Then you need to instantiate the CBLite class

\n
const cblite = new CBLite('databaseName');
\n

Creating a local document

\n
cblite.createDocument({name: 'John Doe', age: 99}, 'myDocumentId');
\n

Reading a local document

\n
// It will return a JSON object or false if the document does not exist
cblite.getDocument('myDocumentId');
\n

Updating local document

\n
cblite.updateDocument('myDocumentId', {newData: 'My new data string'});
\n

Replicating your documents with a SyncGateway server

\n

First you need to import the proper classes

\n
import { CBLite, Replicator } from 'nativescript-cblite';
\n

Then you need to instantiate those classes

\n
const cblite = new CBLite('databaseName');
const pushReplicator: Replicator = cblite.createPushReplication('myRemoteUrl');
const pullReplicator: Replicator = cblite.createPullReplication('myRemoteUrl');
\n

Setting up the replication

\n
pushReplicator.setContinuous(true);
pushReplicator.setAuthenticator('username', 'password');
pushReplicator.start();

pullReplicator.setContinuous(true);
pullReplicator.setAuthenticator('username', 'password');
pullReplicator.start();
\n

API Reference

\n

Class CBLite

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method nameParametersReturn type
getDocumentdocumentIdObject
listAllDocuments-string[]
listAllReplications-string[]
addDatabaseChangeListenercallbackvoid
createDocumentdata, documentIdstring
updateDocumentdocumentId, datavoid
deleteDocumentdocumentIdboolean
createPullReplicationremoteUrlReplicator
createPushReplicationremoteUrlReplicator
\n

Class Replicator

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method nameParametersReturn type
start-void
stop-void
isRunning-boolean
addReplicationChangeListenerchangeListenerCallbackvoid
setAuthenticatorusername, passwordvoid
setContinuouscontinuousvoid
setDocumentIdsdocIdsvoid
setCookiename, value, path, expirationDate, secure, httpOnlyvoid
deleteCookienamevoid
\n

More documentation incoming soon

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@entreek/nativescript-fingerprint-auth":{"name":"@entreek/nativescript-fingerprint-auth","version":"8.1.2","license":"Apache-2.0","readme":"

@nativescript/fingerprint-auth

\n
ns plugin add @nativescript/fingerprint-auth
\n

Then open App_Resources/Android/app.gradle and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line to App_Resources/Android/src/main/AndroidManifest.xml:

\n
  <uses-sdk
      android:minSdkVersion=\"17\"
      android:targetSdkVersion=\"__APILEVEL__\"
      tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
\n

API

\n

Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

\n

available

\n

JavaScript

\n
var fingerprintAuthPlugin = require('@nativescript/fingerprint-auth');
var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

fingerprintAuth.available().then(function (avail) {
\tconsole.log('Available? ' + avail);
});
\n

TypeScript

\n
import { FingerprintAuth, BiometricIDAvailableResult } from \"@nativescript/fingerprint-auth\";

class MyClass {
  private fingerprintAuth: FingerprintAuth;

  constructor() {
    this.fingerprintAuth = new FingerprintAuth();
  }

  this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
    console.log(`Biometric ID available? ${result.any}`);
    console.log(`Touch? ${result.touch}`);
    console.log(`Face? ${result.face}`);
  });
}
\n

verifyFingerprint

\n

Note that on the iOS simulator this will just resolve().

\n
fingerprintAuth
\t.verifyFingerprint({
\t\ttitle: 'Android title', // optional title (used only on Android)
\t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
\t})
\t.then((enteredPassword?: string) => {
\t\tif (enteredPassword === undefined) {
\t\t\tconsole.log('Biometric ID OK');
\t\t} else {
\t\t\t// compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
\t\t}
\t})
\t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`));
\n

verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

\n

Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

\n
fingerprintAuth
\t.verifyFingerprintWithCustomFallback({
\t\tmessage: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
\t\tfallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
\t\tauthenticationValidityDuration: 10, // optional (used on Android, default 5)
\t})
\t.then(
\t\t() => {
\t\t\tconsole.log('Fingerprint was OK');
\t\t},
\t\t(error) => {
\t\t\t// when error.code === -3, the user pressed the button labeled with your fallbackMessage
\t\t\tconsole.log('Fingerprint NOT OK. Error code: ' + error.code + '. Error message: ' + error.message);
\t\t}
\t);
\n

Face ID (iOS)

\n

iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

\n

You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSFaceIDUsageDescription</key>
  <string>For easy authentication with our app.</string>
\n

Security++ (iOS)

\n

Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

\n

So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

\n
fingerprintAuth.available().then((avail) => {
\tif (!avail) {
\t\treturn;
\t}
\tfingerprintAuth.didFingerprintDatabaseChange().then((changed) => {
\t\tif (changed) {
\t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
\t\t} else {
\t\t\t// call the fingerprint scanner
\t\t}
\t});
});
\n

Changelog

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signaturepad":{"name":"nativescript-signaturepad","version":"0.1.3","license":"Apache-2.0","readme":"

NativeScript-SignaturePad :pencil:

\n

NativeScript plugin to provide a way to capture signatures (or any drawing) from the device.\nYou can use this component to capture really anything you want that can be drawn on the screen. Go crazy with it!!!

\n

WARNING - iOS is in development and should be available soon. ANDROID ONLY for now.

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
gcacace/android-signaturepadSignatureView
\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm install nativescript-signaturepad

\n

Usage

\n

XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:SignaturePad=\"nativescript-signaturepad\">
     <StackLayout>
            <SignaturePad:SignaturePad
                height=\"200\"
                id=\"drawingPad\"     
                penColor=\"#ff4081\" 
                penWidth=\"3\" />   
            
            <button text=\"Get Drawing\" tap=\"getDrawing\" />
            <button text=\"Clear Drawing\" tap=\"clearDrawing\" />
     </StackLayout>
</Page>
\n

JS:

\n
var frame = require(\"ui/frame\");

// To get the drawing...
function getDrawing(args) {
    // get reference to the drawing pad
    var pad = frame.topmost().currentPage.getViewById(\"drawingPad\");
    // then access the 'drawing' property (Bitmap on Android) of the signaturepad
    var drawingImage = pad.drawing;
}
exports.getDrawing = getDrawing;

// If you want to clear the signature/drawing...
function clearDrawing(args) {
    var pad = frame.topmost().currentPage.getViewById(\"drawingPad\");
    pad.clearDrawing();
}
exports.clearDrawing = clearDrawing;
\n

Attributes

\n

penColor - (color string) - optional

\n

Attribute to specify the pen (stroke) color to use.

\n

penWidth - (int) - optional

\n

Attribute to specify the pen (stroke) width to use.

\n

Sample Screenshots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-scratchview":{"name":"nativescript-scratchview","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Scratch View (Android only)

\n

Nativescript plugin to implement scratch card functionality.

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-scratchview
\n

Usage

\n

You need to add xmlns:sv="nativescript-scratchview" to your page tag, and then simply use <sv:ScratchView> in order to add the widget to your page.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:sv=\"nativescript-scratchview\">
  <GridLayout rows=\"*\" columns=\"*\">
\t<sv:ScratchView  id=\"scratchView\" height=\"250\"  width=\"250\"  strokeWidth=\"10\" revealed=\"{{revealed}}\"  percentRevealed=\"{{percentRevealed}}\">
\t  <Image  height=\"250\"  width=\"250\"  stretch=\"aspectFill\"  src=\"~/images/back.jpg\"></Image>
\t  <Image  height=\"250\"  width=\"250\"  stretch=\"aspectFill\"  src=\"~/images/scratch.jpg\"></Image>
\t</sv:ScratchView>
  </GridLayout>
</Page>
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
strokeWidth10Scratching stroke width
\n

Events

\n\n

Methods

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sms-receiver":{"name":"nativescript-sms-receiver","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-sms-receiver

\n

This is simple library for receiving sms in android with new SMS Retriever API.

\n

Requirements

\n

Minimum sdk is 21.

\n

Installation

\n
tns plugin add nativescript-sms-receiver
\n

Usage

\n

Step 1. Register SMSBroadcastReceiver in manifest file

\n

Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

\n
<receiver android:name=\"com.pravinkumarputta.android.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
\t<intent-filter>
\t\t<action android:name=\"com.google.android.gms.auth.api.phone.SMS_RETRIEVED\"/>
\t</intent-filter>
</receiver>
\n

Step 2. Import SmsReceiver

\n
import { SmsReceiver } from 'nativescript-sms-receiver';
\n

Step 3. Instantiate SmsReceiver

\n

Call this method once before starting SMS listener

\n
SmsReceiver.getInstance();
\n

Note: Call above method only after page loaded.

\n

Step 4. Start SMS listening

\n
// register Sms Listener to get SMS callbacks
SmsReceiver.getInstance().registerListeners(
    function () {
        // onSMSReceiverStarted
        ...
    }.bind(this),
    function (exception) {
        // onSMSReceiverFailed
        ...
    }.bind(this),
    function (message) {
        // onSMSReceived
        ...
            // handle sms here
        ...

        // deregister Sms Listener to avoid invalid operations
        SmsReceiver.getInstance().deregisterListeners();
    }.bind(this),
    function () {
        // onSMSReceiverTimeOut
        ...
    }.bind(this)
);

// start sms receiver for single message
SmsReceiver.getInstance().startReceiver();
\n

Construct a verification message

\n

The verification message that you will send to the user's device. This message must:

\n\n

Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

\n
<#> Your ExampleApp code is: 123ABC78
FA+9qCX9VSu
\n

(For more information visit here)

\n

Generating 11-character hash string for your app

\n

After instantiating SMSReceiver access hash string using:

\n
SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
\n

Request for phone number saved in your device

\n
SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
    // phoneNumber is null if no number is selected.
    ...
})
\n

Used libraries

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shine-button":{"name":"nativescript-shine-button","version":"1.0.0","license":"Apache-2.0","readme":"

\n NativeScript Shine Button

\n\n

\n
\n

Note: This Plugin based on WCLShineButton for IOS and ShineButton for Android .

\n
\n

Installation

\n
tns plugin add nativescript-shine-button
\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\" xmlns:ui=\"nativescript-shine-button\">
     <ui:ShineButton height=\"80\" width=\"80\" src=\"customicon\" color=\"gray\" fillColor=\"red\">
</Page>
\n

see the demo project for more info.

\n

Angular

\n

Add this to app.module.ts so you can use a Gradient tag in the view:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"ShineButton\", () => require(\"nativescript-shine-button\").ShineButton);
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
srcbutton image (png)
colorDefault button color
fillColorFill button color
allowRandomColorAllow shine color random
animDurationshine anim duration in sec
bigShineColorbig shine color
enableFlashingEnable effect like flash
shineCountshine count around button
shineTurnAngleturn angle of shine
shineDistanceMultiplemultiple of distance to button
smallShineOffsetAngleangle offset of small shine to big shine
smallShineColorsmall shine color
shineSizesize of shine by pixel
\n

Next

\n\n

Contribute

\n

if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n

Contact

\n

Twitter: hamdiwanis
\nEmail: hamdiwanis@hotmail.com

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mapo80/nativescript-ngx-shadow":{"name":"@mapo80/nativescript-ngx-shadow","version":"7.0.1","license":"Apache-2.0","readme":"

NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-ngx-shadow
\n

Demo

\n

\"N|Solid\"

\n

How to use it

\n

This is an Angular directive to make your life easier when it comes to native shadows.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the NgShadowModule

\n
// ...
import { NgShadowModule } from \"nativescript-ngx-shadow\";

@NgModule({
  imports: [
    NgShadowModule
    // ...
  ]
  // ...
})
export class MyModule {}
\n

Just use in your templates

\n

Simple attribute shadow:

\n
<Label shadow=\"2\"></Label>
\n

Of course you can property bind it:

\n
<Label [shadow]=\"myCustomShadow\"></Label>
\n

To provide other details, combine the shadow directive with other attributes:

\n
<Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypePlatformDescription
shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
default: 'RECTANGLE'		AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

AndroidData and IOSData

\n

As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

\n

Component

\n
import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
// ...
export class MyComponent {
  fabShadow: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

In the template you can do:

\n
<Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"nativescript-ngx-shadow\";
class MyComponent {
  // ...
  ngOnInit(): init {
    this.mySnackBar.elevation = Elevation.SNACKBAR;
  }
  // ...
}
\n

Notes about version 2+

\n

Here are the list of improvements on version 2.0:

\n
    \n
  1. BugFix: Integer directive not rendering on iOS.
    2. \n
  2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
    3. \n
  3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
    4. \n
  4. 2.1.X Override Android default StateListAnimator as explained below:
    5. \n
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

\n

Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow:

\n\n

Changelog

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sak-components":{"name":"nativescript-sak-components","version":"1.1.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal":{"name":"nativescript-windowed-modal","version":"7.0.0","license":"Apache-2.0","readme":"

Nativescript Windowed Modal \"apple\" \"android\"

\n

\"npm\n\"npm\n\"Build

\n

This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

\n

Installation

\n
tns plugin add nativescript-windowed-modal
\n

Usage

\n

Code

\n

Call the overrideModalViewMethod() once before starting the app and register the layout element:

\n

Javascript

\n
var windowedModal = require(\"nativescript-windowed-modal\")
windowedModal.overrideModalViewMethod()
\n

Typescript+Angular

\n
import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
registerElement(\"ModalStack\", () => ModalStack)
\n

You can pass extended options like this:

\n
mainPage.showModal(\"./modal\", {
  context: \"I'm the context\",
  closeCallback: (response: string) => console.log(\"Modal response: \" + response),
  dimAmount: 0.5 // Sets the alpha of the background dim
} as ExtendedShowModalOptions)
\n

NativeScript-Vue

\n
// main.js
import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
Vue.registerElement(\"ModalStack\", () => ModalStack)
Vue.use(VueWindowedModal)
\n

You can pass extended options like this:

\n
<script type=\"text/javascript\">
  export default {
    methods: {
      openModalTap() {
        this.$showModal(\"./modal\", {
          props: {},
          fullscreen: false,
          animated: true,
          stretched: false,
          dimAmount: 0.5 // Sets the alpha of the background dim,
        })
      }
    }
  }
</script>
\n

Properties

\n

ExtendedShowModalOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
\n

ModalStack

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
verticalPositionstringbothmiddleUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
horizontalPositionstringbothcenterUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
\n

Layout

\n

Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
    <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
        <StackLayout class=\"modal\">
            <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
        </StackLayout>
    </modal:ModalStack>
</Page>
\n

HTML (Angular)

\n
<ModalStack dismissEnabled=\"true\" class=\"modal-container\">
  <StackLayout class=\"modal\">
    <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
  </StackLayout>
</ModalStack>
\n

Style

\n

You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

\n
.modal {
  margin: 20;
  margin-top: 35;
  border-radius: 8;
  horizontal-align: center;
  vertical-align: middle;
  background-color: white;
}

.modal-container {
  padding: 25;
  padding-bottom: 10;
}
\n

Running the demo app

\n
    \n
  1. Clone this repo
    2. \n
  2. cd src
    3. \n
  3. npm run demo.android, npm run demo.ios, npm run demo.ng.android, or npm run demo.ng.ios
    4. \n
\n

Known Issues

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-filterable-listpicker":{"name":"nativescript-filterable-listpicker","version":"2.2.6","license":"Apache-2.0","readme":"

\"Twitter

\n

nativescript-filterable-listpicker

\n

The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

\n \n

Installation

\n
tns plugin add nativescript-filterable-listpicker
\n

Usage

\n

In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

\n

NativeScript Core

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-filterable-listpicker\">
    <GridLayout rows=\"\" columns=\"\">
        <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
        <GridLayout rows=\"*, auto, *\">
            <StackLayout height=\"300\">
                <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
            </StackLayout>
        </GridLayout>
        <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
        <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
    </GridLayout>
</Page>
\n

Then in your code...

\n
public showPicker() {
    page.getViewById('myfilter').show();
}

public itemTapped(args) {
    alert(args.selectedItem + ' was tapped!')
}

public cancelFilterableList() {
    // this gets called if the user cancels the modal. 
}
\n

Use as Autocomplte

\n

You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

\n
let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

private filterableListpicker: FilterableListpicker;
private page: Page;
constructor(page: Page) {
    super();
    this.page = page;
    // Get filterableListpicker instance
    this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
    MyModel = this;
}

public showPickerAsAutocomplete() {
    // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
    this.filterableListpicker.isAutocomplete = true;
    this.filterableListpicker.show(frame.topmost());
    
    this.filterableListpicker.autocomplete((data) => {
        let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
        http.getJSON<Predictions>(url).then((res) => {
            //console.dir(res)
            const airportsCollection = res.predictions;
            const items = [];
            for (let i = 0; i < airportsCollection.length; i++) {
                items.push({
                    title: airportsCollection[i].description,
                    description: \"\",
                    source: airportsCollection[i]
                });
                
            }
            this.set(\"listitems\", items)
        }).catch((err) => {
            const message = 'Error fetching remote data from ' + url + ': ' + err.message;
            console.log(message);
            alert(message);
        });
    });
}
\n

NativeScript Angular

\n

In angular, you have to register the element in your app component like so:

\n
// app.component.ts
import {registerElement} from \"nativescript-angular/element-registry\";
registerElement(\"FilterableListpicker\", () => require(\"nativescript-filterable-listpicker\").FilterableListpicker);
\n

Then use it in your templates like...

\n
<GridLayout>
    <Image src=\"res://nicebackgroundimage.jpg\"></Image>
    <StackLayout>
        <Label text=\"Whats your favorite programming language?\"></Label>
        <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
    </StackLayout>
    <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
</GridLayout>
\n

Then in your code...

\n
@ViewChild('myfilter') myfilter: ElementRef;

cancelFilterableList() {
    console.log('canceled');
}

itemTapped(args) {
    alert(args.selectedItem)
}

showPicker() {
    this.myfilter.nativeElement.show();
}
\n

Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

\n

in android:

\n
@ViewChild('myContainer') myContainer: ElementRef;

public function showPicker() {
  this.myfilter.nativeElement.show(this.myContainer.nativeElement);
}
\n

Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

\n

Source Array

\n

As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
titleThe title, this is what your list will be filtered on, and it will display in bold.
imageOPTIONAL: This will display to the left of the title.
descriptionOPTIONAL: This will display under the title smaller and in gray.
\n

Here's some example code:

\n
public listitems = [
    {
        \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
        \"title\": \"Brown Bear\",
        \"description\": \"Brown bear brown bear, what do you see?\"
    },
    {
        \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
        \"title\": \"Red Bird\"
    },
    {
        \"title\": \"Purple Cat\",
        \"description\": \"Why are we teaching kids there are purple cats?\"
    }
];
\n

You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

\n

Here's how it will look in the picker:

\n\n

Webpack

\n

Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

\n

API

\n

The UI element accepts the following parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
listWidth300The width of the modal element.
listHeight300The height of the modal element.
focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
canceledThis is just a function to call if the user cancels, probably rarely neccessary.
showCancelShow cancel button or not.
enableSearchAllow searching by showing the TextField at the top.
autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
\n

CSS Styling

\n
.flp-container .flp-list-container {
  border-radius: 10;
}
.flp-container .flp-list-container .flp-listview {
  background-color: white;
}

.flp-container .flp-list-container .flp-listview .flp-row {
  background-color: white;
}
/* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
  padding: 10;
} */
.flp-container .flp-list-container .flp-listview .flp-row .flp-image {
  margin: 10 0 10 5;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
  margin: 10 10 10 5;
  /* margin: 0 10 0 10; */
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
  font-weight: bold; 
  font-size: 16;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
  color: gray; 
  font-size: 13;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
  margin-left: 15; 
  padding: 10 0;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
  color: lightblue;
}

.flp-container .flp-hint-field {
  padding: 10 15; 
  height: 40; 
  background-color: #E0E0E0; 
  border-radius: 10 10 0 0;
}

.flp-container .flp-cancel-container {
  background-color: #E0E0E0; 
  height: 40; 
  border-radius: 0 0 10 10;
}

.flp-container .flp-cancel-container .flp-btn-cancel {
  font-weight: bold; 
  height: 40; 
  background-color: transparent; 
  border-color: transparent; 
  border-width: 1; 
  font-size: 12;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-c1rfid":{"name":"nativescript-c1rfid","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-c1rfid

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-c1rfid
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-permissions":{"name":"nativescript-simple-permissions","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Simple Permissions

\n

This plugin is a wrap around Nathanael's nativescript-permissions plugin and also provides IOS Permissions with a matching API.

\n

(Optional) Prerequisites / Requirements

\n

Don't forget to add permissions to AndroidManifest.xml for android and Info.plist for iOS (Xcode >= 8).

\n

Installation

\n

To install simply run

\n
tns plugin add nativescript-simple-permissions
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
  import { SimplePermissions } from 'nativescript-simple-permissions';
  import { Permissions } from 'nativescript-simple-permissions/simple-permissions.common';

export class PermissionExample {
  private simplePermissions: SimplePermissions;

  constructor() {
    this.simplePermissions = new SimplePermissions();
  }
\n

API

\n

Check permissions

\n

hasPermission(permission: Permissions) : boolean

\n

Request permissions

\n

requestPermission(permission: Permissions) : Promise

\n

Permissions

\n
export enum Permissions {
  LOCATION_ALWAYS = 0,
  LOCATION_IN_USE = 1,
  RECORD_AUDIO = 2,
  CAMERA = 3,
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-socket.io":{"name":"@altabsrl/nativescript-socket.io","version":"0.11.2","license":"Unlicense","readme":"

nativescript-socket.io

\n

Fork of https://github.com/naderio/nativescript-socket.io. Updated to newer gradle version. Only affect android.

\n

Full-featured Socket.IO client implementation for NativeScript.

\n

Status

\n

\"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

\n

This library is production-ready. Both Android and iOS implementations are stable and in sync.

\n

Please check releases and changelog and roadmap for more information.

\n

Dependencies

\n

Android: Socket.IO-client Java v1.*

\n

iOS: Socket.IO-Client-Swift v12.*

\n

Install

\n
tns plugin add @altabsrl/nativescript-socket.io
\n

Usage

\n
const SocketIO = require('nativescript-socket.io');

SocketIO.enableDebug(); // optionnal

// or use your own debug function
// SocketIO.enableDebug(myCustomDebugFunction);

const options = {
  query: {
    token: 'SOME_TOKEN_HERE',
  },
  android: {
    // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
  }
  ios: {
    // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
  }
};

const socketio = SocketIO.connect('http://somewhere/namespace', options);

socketio.on('connect', function(){
  console.log('connect');
});

socketio.on('hello', function(){
  console.log('hello', arguments);
});

socketio.on('request', function(info, ack){
  console.log('request', info);
  if (info === 'datetime') {
    ack(new Date());
  } elseif (info === 'random') {
    ack(Math.random());
  } else {
    ack(null);
  }
});

socketio.emit('hello', {
  username: 'someone',
});

socketio.emit('hello-ack', {
  username: 'someone',
}, function ack(){
  console.log('hello-ack', arguments);
})
\n

Usage with TypeScript

\n

import using either of the following:

\n
import * as SocketIO from \"nativescript-socket.io\"`

// OR

const SocketIO = require(\"nativescript-socket.io\")
\n

Demo

\n
    \n
  1. \n

    replace all instance of 192.168.1.111 with your IP address or domain.

    \n
    2. \n
  2. \n

    start the socket.io demo server

    \n
    3. \n
\n
cd ./demo.server
npm start
\n
    \n
  1. build and run the app
    2. \n
\n
cd ./demo
tns run android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carto":{"name":"nativescript-carto","version":"1.3.1","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

Android

\n

o do this in Android 9 Pie you will have to set a networkSecurityConfig in your Manifest application tag like this:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest ... >
    <application android:networkSecurityConfig=\"@xml/network_security_config\">
    </application>
</manifest>
\n

Then in your xml folder you now have to create a file named network_security_config just like the way you have named it in the Manifest and from there the content of your file should be like this to enable all requests without encryptions:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<network-security-config>
    <base-config cleartextTrafficPermitted=\"true\">
        <trust-anchors>
            <certificates src=\"system\" />
        </trust-anchors>
    </base-config>
</network-security-config>
\n

From there you are good to go. Now your app will make requests for all types of connections. For additional information read here.

\n

Generate typings

\n

Android

\n

### iOS

## API

Describe your plugin methods and properties here. See [nativescript-feedback](https://github.com/EddyVerbruggen/nativescript-feedback) for example.
    
| Property | Default | Description |
| --- | --- | --- |
| some property | property default value | property description, default values, etc.. |
| another property | property default value | property description, default values, etc.. |
    
## License

Apache License Version 2.0, January 2004
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-share-file":{"name":"nativescript-share-file","version":"1.0.6","license":"Apache-2.0","readme":"

Nativescript Share File

\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install nativescript-share-file
\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from 'nativescript-share-file';
    import * as fs from 'tns-core-modules/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-analytics":{"name":"nativescript-google-analytics","version":"0.4.4","license":"Apache-2.0","readme":"

Nativescript Google Analytics Plugin

\n\n

Watch the video

\n

\"Watch

\n

Release Notes

\n

0.4.3

\n\n

0.4.0

\n\n

0.3.5

\n\n

0.3.2

\n\n

0.3.0

\n\n

0.2.9

\n\n

0.2.8

\n\n

0.2.7

\n\n

0.2.6

\n\n

0.2.5

\n\n

0.2.3

\n\n

0.2.0

\n\n

0.1.9

\n\n

0.1.7

\n\n

0.1.5

\n\n

0.1.5

\n\n

0.1.4

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sewoo-printer":{"name":"nativescript-sewoo-printer","version":"2.0.2","license":"Apache-2.0","readme":"

NativeScript Sewoo Printer

\n

\"npm

\n

This plugin integrate your nativescript app with Sewoo LK-P43Ⅱ printer to print a normal text or a bmp.

\n

Prerequisites / Requirements

\n

You have to pair your device via bluetooth with the printer before you test the plugin.

\n

Installation

\n
tns plugin add nativescript-sewoo-printer
\n

Usage

\n

First of all put these permissions in you AndroidManifest.xml file:\n <uses-permission android:name="android.permission.BLUETOOTH" /> \t<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" /> \nTo Print Normal Text use:

\n
```\nlet printer = new SewooPrinter("windows-1256");\nprinter.print("Hello World");\n```\n
\n

To Print a BMP image:

\n
```\nlet printer = new SewooPrinter("windows-1256");\nprinter.printImg(bmp);\n```\n
\n

for more information see the demo

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
paperSizePaperSizes.FourInchset the default paper size for the printer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescriptionParams
connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
disconnect():voiddisconnect from a printer
print(text: string): voidprint normal texttext : the text you want to print
printImg(bitmap: globalAndroid.graphics.Bitmap, startX?: number, startY?: number): void;disconnect from a printerbitmap: the image to print, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-codility-onesignal":{"name":"nativescript-codility-onesignal","version":"1.0.3","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stomp-connector":{"name":"nativescript-stomp-connector","version":"1.1.2-beta","license":"Apache-2.0","readme":"

:warning: This plugin is under construction.

\n

nativescript-stomp-connector

\n

Client connector for Websocket through STOMP protocol.

\n

This plugin use the NaikSoftware/StompProtocolAndroid for Android and WrathChaos/StompClientLib for iOS.

\n

#TODO

\n\n

Installation

\n

Run nativescript cli to install this plugin

\n
tns plugin add nativescript-stomp-connector
\n

Usage

\n

Core

\n

Under construction

\n

TypeScript

\n

Import the StompConnector in your component

\n
import { StompConnector, StompMessage } from 'nativescript-stomp-connector';
\n

Call Connnect

\n
private _wsUrl = \"ws://{your-server}:{port}/{path}/websocket\";
public stompClient: StompConnector;

constructor(private _changeDetectorRef: ChangeDetectorRef) {
\tthis.stompClient = new StompConnector();
}

public connect(): void {
\tthis.stompClient.connect({
\t\tbrokerURL: this._wsUrl,
\t\tonConnect: () => {
\t\t\tconsole.log(`==== CONNECTED ===`);
\t\t},
\t\tonReconnect: () => {
\t\t\tconsole.log(`==== RECONNECTED ===`);
\t\t},
\t\tonStompError: (error) => {
\t\t\tconsole.error(error);
\t\t},
\t\tonDisconnect: () => {
\t\t\tconsole.log(`==== DISCONNECTED ===`);
\t\t},
\t\tdebug: (msg: string) => {
\t\t\tconsole.log(msg);
\t\t}
\t} as StompConfig);
}
\n

Disconnect

\n
public disconnect(): void {
\tthis.stompClient.disconnect();
}
\n

Subscribe to topic

\n
public subscribeToTopic(): void {
\tthis.stompClient.topic('/topic/broadcast', (response: StompMessage) => { console.dir(response); });
}
\n

Unsubscribe to topic

\n
unsubscribeToTopic() {
\tthis.stompClient.unsubscribe('/topic/broadcast', () => console.log(\"Unsubscribed successfully\"));
}
\n

Send message

\n
sendMessageAsObject() {
\tthis.stompClient.send({ 
\t\tmessage: JSON.stringify({ content: this.messageContent }), 
\t\tdestination: '/app/greetings',
\t\twithHeaders: { \"content-type\": \"application/json\" }
\t}, () => { console.log('Message just sent!'); });
}
\n

API

\n

StompConnector

\n

connect(config)

\n

This function will connect to your stomp broker and call the callback onConnect after finish it;

\n

disconnect()

\n

Disconnect the stomp broker;

\n

isConnected()

\n

Return true if broker is connected;

\n

topic(destination, successCallBack, failCallBack)

\n

Subscribe to topic passing destination and successCallBack as mandatory parameters.

\n

unsubscribe(destination, successCallback)

\n

Unsubscribe to topic by destination.

\n

send(request, successCallBack, failCallBack)

\n

Send messsage to stomp broker;

\n

StompConfiguration

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
brokerURLemptyThe websocket url. Mandatory
autoReconnectfalseAndroid only for now
reconnectDelay5000The delay between attempts to reconnect in ms
connectHeadersempty[key: string]: string; > example: { 'content-type': 'application/json' }
onConnect()Functioncallback called on websocket connection successful
onReconnect()Functioncallback called on server auto reconnected. Android only for now
onDisconnect()Functioncallback called on webscoket disconnect
onStompError(error)Functioncalled when got an exception
debug(msg)FunctionUse this to have more logs
\n

Native Component

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
NaikSoftware/StompProtocolAndroidWrathChaos/StompClientLib
\n

Author

\n

Daniel Borba, daniel@witfy.io

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-childprocess":{"name":"nativescript-childprocess","version":"1.0.0","license":"MIT","readme":"

Child Process (NativeScript Plugin)

\n

A NativeScript plugin for creation and execution of Android java.lang.Processes in Node.js child process style! As a webapp developer, you needn't worry about familiarizing yourself with the Java Process API, thanks to this plugin.

\n\n\n

Installation

\n\n
ns plugin add nativescript-childprocess
\n\n
tns plugin add nativescript-childprocess@1.0.0
\n

Usage

\n\n
import { ChildProcess } from 'nativescript-childprocess'
...
onClickRun() {
  ChildProcess.run('pm list packages')
    .then(output => { console.log('Success:', output) })
    .catch(error => { console.log('Failure:', error) })
}
\n\n
import { ChildProcess } from 'nativescript-childprocess'
...
async onClickRun() {
  let childProcess: ChildProcess = new ChildProcess('su')
  childProcess.runInteractive('ls /system/')
  childProcess.runInteractive('ls /system/bin/')
  await childProcess.closeSafely('exit')
  console.log(childProcess.getOutput())  // output of both `ls` commands
}
\n

API

\n

constructor(startCommand: string)

\n

Creates an interactive shell session.

\n\n

getErrors(): any

\n

Returns errors that have been collected from the onset of this process execution (i.e. right from creation of the interactive shell session) up until now.

\n

clearErrors(): void

\n

Clears errors collected from the onset of this process execution up until now. Helps if errors until this point in time are irrelevant.

\n

getProcess(): java.lang.Process

\n

Exposes the underlying Java process to not be confined by the bounds of the ChildProcess plugin. Helps in cases where outputs of commands running in an interactive shell have to collected and processed as and when available.

\n\n

getOutput(): string

\n\n

static run(param0: string): Promise<any> + 4 overloads

\n

Executes a single command on a local terminal / shell (pm list packages for instance).

\n\n

runInteractive(command: string): ChildProcess

\n

Runs commands inside of an interactive shell.

\n\n

closeSafely(exitCommand: string): Promise<ChildProcess>

\n

Safely closes an interactive shell by running an exit command passed as a parameter.

\n\n

closeAbruptly(): Promise<ChildProcess>

\n

Abruptly closes an interactive shell (which, for instance, is unresponsive such as a failing network activity) by killing it.

\n\n

toString(): string

\n\n

Made with :heart: by theGeekyLad

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-update":{"name":"nativescript-app-update","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-app-update

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-app-update
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appavailability":{"name":"@nativescript/appavailability","version":"2.0.0","license":"Apache-2.0","readme":"

Nativescript appavailability

\n

A plugin to check for availability of other apps on the device.

\n
ns plugin add @nativescript/appavailability
\n

Usage

\n
\n

Note that version 1.3.0 added a synchronous version of this method that doesn't return a Promise. Need that? Use availableSync instead of available.

\n
\n

TypeScript

\n
const isAppAvailable = require(\"@nativescript/appavailability\").available;

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appavailability.available(\"twitter://\").then((avail: boolean) => {
  console.log(\"App available? \" + avail);
})
\n

TypeScript + Angular

\n
import * as appavailability from \"@nativescript/appavailability\";

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appavailability.available(\"twitter://\").then((avail: boolean) => {
  console.log(\"App available? \" + avail);
})
\n

JavaScript

\n
var appAvailability = require(\"@nativescript/appavailability\");

// examples of what to pass:
// - for iOS: \"maps://\", \"twitter://\", \"fb://\"
// - for Android: \"com.facebook.katana\"
appAvailability.available(\"com.facebook.katana\").then(function(avail) {
  console.log(\"App available? \" + avail);
})
\n

Opening an app (with web fallback)

\n

Now that you know whether an app is installed or not, you probably want to launch it.\nHere's a snippet that opens the mobile Twitter app and falls back to the website if it's not installed.

\n
import { available } from \"@nativescript/appavailability\";
import { Utils } from \"@nativescript/core\";

const twitterScheme = \"twitter://\";
available(twitterScheme).then(available => {
  if (available) {
    // open in the app
    Utils.openUrl(twitterScheme + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
  } else {
    // open in the default browser
    Utils.openUrl(\"https://twitter.com/eddyverbruggen\");
  }
})
\n

And a more concise, synchronous way would be:

\n
import { availableSync } from \"@nativescript/appavailability\";
import { Utils } from \"@nativescript/core\";

if (availableSync(\"twitter://\")) {
  Utils.openUrl(\"twitter://\" + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
} else {
  Utils.openUrl(\"https://twitter.com/eddyverbruggen\");
}
\n

iOS whitelisting

\n

To get useful results on iOS 9 and up you need to whitelist the URL Scheme\nyou're querying in the application's .plist.

\n

Luckily NativeScript made this pretty easy. Just open app/App_ResourcesiOS/Info.plist\nand add this if you want to query for both twitter:// and fb://:

\n
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>fb</string>
    <string>twitter</string>
  </array>
\n

You may wonder how one would determine the correct identifier for an app.

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foss-sidedrawer":{"name":"nativescript-foss-sidedrawer","version":"2.0.0","license":"Apache-2.0","readme":"

Nativescript FOSS Sidedrawer

\n

https://gitlab.com/burke-software/nativescript-foss-sidedrawer

\n

This is a fork of https://github.com/gethuman/nativescript-sidedrawer/

\n

This project continues support of nativescript-sidedrawer which may be useful to those who do not wish to use the proprietary Nativescript UI Sidedrawer. This package is free and open source and so it may be modified and packaged with GPL code. It is however not as polished as the UI Sidedrawer.

\n

A Nativescript plugin that allows developers to simply integrate the infamous side drawer pattern.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n

Features

\n\n

Installation

\n
tns plugin add nativescript-foss-sidedrawer
\n

Example

\n

Import the plugin.

\n
import { TnsSideDrawer } from 'nativescript-foss-sidedrawer'
\n

Build the drawer with TnsSideDrawer.build passing config options.

\n
TnsSideDrawer.build({
\ttemplates: [{
\t\ttitle: 'Home',
\t\tandroidIcon: 'ic_home_white_24dp',
\t\tiosIcon: 'ic_home_white',
\t}, {
\t\ttitle: 'Judgment Day',
\t\tandroidIcon: 'ic_gavel_white_24dp',
\t\tiosIcon: 'ic_gavel_white',
\t}, {
\t\ttitle: 'Bank Roll',
\t\tandroidIcon: 'ic_account_balance_white_24dp',
\t\tiosIcon: 'ic_account_balance_white',
\t}, {
\t\ttitle: 'Fix Stuff',
\t\tandroidIcon: 'ic_build_white_24dp',
\t\tiosIcon: 'ic_build_white',
\t}, {
\t\ttitle: 'This Is Me',
\t\tandroidIcon: 'ic_account_circle_white_24dp',
\t\tiosIcon: 'ic_account_circle_white',
\t}],
\ttitle: 'This App Name',
\tsubtitle: 'is just as awesome as this subtitle!',
\tlistener: (index) => {
\t\tthis.i = index
\t},
\tcontext: this,
})
\n

Toggle the side drawer with TnsSideDrawer.toggle.

\n
TnsSideDrawer.toggle()
\n

Configuration

\n

Drawer

\n
TnsSideDrawerOptions {
\ttemplates: Array<TnsSideDrawerItem> // see below
\ttextColor?: Color // color of all text including title, subtitle, and items
\theaderBackgroundColor?: Color
\tbackgroundColor?: Color // background color under the header
\tlogoImage?: ImageSource // defaults to your app icon
\ttitle?: string // large text in the header
\tsubtitle?: string // small text in the header
\tlistener: TnsSideDrawerOptionsListener // see below
\tcontext?: any // see below
}
\n

Templates

\n

Template icons MUST be a resource string.

\n
TnsSideDrawerItem {
\ttitle: string
\tandroidIcon?: string
\tiosIcon?: string
}
\n

Listener

\n

The listener function ONLY gets called everytime a drawer item is successfully tapped.

\n
type TnsSideDrawerOptionsListener = (index: number) => void
\n

You can optionally pass a this context to the context option.

\n

iOS Quirks

\n

Because you can drag the edge of your screen to go back,

\n

\"back\"

\n

you'll need to manually add and remove the gesture recognition by calling their methods and passing the Page instance.

\n

Let's say this is your home page.

\n
export function onLoaded(args: EventData) {
\tlet page: Page = <Page>args.object
\tTnsSideDrawer.addGesture(page)
}
export function onUnloaded(args: EventData) {
\tlet page: Page = <Page>args.object
\tTnsSideDrawer.removeGesture(page)
}
\n

Android Quirks

\n

None.

\n

Thanks to

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sweet-alert":{"name":"nativescript-sweet-alert","version":"1.0.4","license":"Apache-2.0","readme":"

SweetAlert library for NativeScript Android.

\n

Based on:

\n\n

Install

\n

NativeScript 6x

\n
tns plugin add nativescript-sweet-alert
\n\n

Android Specifications

\n

Usage Examples

\n

NOTE: "options" may vary according to each method.

\n
import { SweetAlert } from 'nativescript-sweet-alert';
import { ShowSuccess , ShowError } from 'nativescript-sweet-alert/classes';


// showSuccess
const options: ShowSuccess = {
    text: \"Hello\",
    contentText: \"Alert Content Text\",
    confirmButtonText: \"Ok\",
    cancelButtonText: \"Close\"
}
SweetAlert.showSuccess(options).then(value => {
 // result: true, false, CLOSED    
});

// showError
const options: ShowError = {
    text: \"Hello\",
    contentText: \"Alert Content Text\",
    confirmButtonText: \"Ok\",
    cancelButtonText: \"Close\"
}
SweetAlert.showError(options).then(value => {
 // result: true, false, CLOSED    
});
\n

NativeScript SweetAlert - Methods

\n\n

How can I change the colors?

\n

App_Resources/Android/src/main/res/values/colors.xml add to Color Properties

\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

Demo

\n

Need extra help getting these SweetAlert working in your application? Check out these tutorials that make use of the plugin:

\n

SweetAlert in a NativeScript Core Demo

\n

SweetAlert in a NativeScript Angular Demo

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jitsi-meet":{"name":"nativescript-jitsi-meet","version":"1.4.12","license":"Apache-2.0","readme":"

nativescript-jitsi-meet

\n

This plugin is on a very early version. I'll probably have something better on the next days.

\n

As soon as the code improves I'll be updating the README as well. :wink:

\n

Avoid to use this plugin now if you project is not in development. This plugin will be changed a lot in the next days and a stable version has no date to be available.

\n

I'm working on

\n\n

Prerequisites / Requirements

\n

#TODO

\n

Installation

\n

#TODO

\n

Usage

\n

#TODO

\n

API

\n

#TODO

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fb-analytics":{"name":"nativescript-fb-analytics","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript: Facebook Analytics

\n

Adds only Facebook Analytics to your Nativescript app not the full Facebook SDK.

\n

This plugin is based on nativescript-facebook but only includes the Facebook Core Library which is needed for analytics. This way it reduces the bundle size by 86% compared to nativescript-facebook which includes the full Facebook SDK. If you want to learn more you may read this blog post.

\n

Installation

\n
tns plugin add nativescript-fb-analytics
\n

Configuration

\n

The following configuration is needed in order to get started with Facebook Analytics. In order to obtain a Facebook App-ID please refer to the official documentation.

\n

Initialize the plugin before calling app.run:

\n
/* your-project/app/app.ts */
import * as app from \"tns-core-modules/application\";
import * as fbAnalytics from 'nativescript-fb-analytics';

app.on(app.launchEvent, function (args) {
    fbAnalytics.initAnalytics();
});
\n

Additional configs needed for Android:

\n
<!--your-project/app/App_Resources/Android/src/main/res/values/strings.xml-->
<string name=\"facebook_app_id\">YOUR_APP_ID</string>


<!--your-project/app/App_Resources/Android/src/main/res/AndroidManifest.xml-->
<application
\tandroid:name=\"com.tns.NativeScriptApplication\"
\tandroid:allowBackup=\"true\"
\tandroid:icon=\"@drawable/icon\"
\tandroid:label=\"@string/app_name\"
\tandroid:theme=\"@style/AppTheme\">
    
    <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
\t...
</application>
\n

Additional configs needed for iOS:

\n
<!--your-project/app/App_Resources/iOS/Info.plist-->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
      <array>
        <string>fbYOUR_APP_ID</string>
      </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
\n

Usage

\n

You can log events from anywhere you want by importing

\n
import * as fbAnalytics from 'nativescript-fb-analytics';
\n

and calling

\n
fbAnalytics.logEvent('Lead');
\n

You may also add parameters to your event logging:

\n
const value = 5;
const parameters = [{
    key: 'value',
    value: value.toString(),
}];

fbAnalytics.logEvent(FundsAdded, parameters);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-chooser":{"name":"nativescript-contacts-chooser","version":"1.1.0","license":"Apache-2.0","readme":"

nativescript-contacts-chooser

\n

\"iOS

\n

\"Android

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-contacts-chooser
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
import { ContactsChooser, ContactsChooserResult } from 'nativescript-contacts-chooser';

//Request for permission (Android)
chooser.requestPermission();

//Choose contact
chooser.open()
    .then((contact: ContactsChooserResult) => {
        console.log(contact);
    })
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
requestPermission()Request for permission to access contacts
open()Open contacts picker
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-shadow":{"name":"@imagene.me/nativescript-shadow","version":"2.0.1","license":"Apache-2.0","readme":"

NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

\n

This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add @imagene.me/nativescript-shadow
\n

Demo

\n

\"N|Solid\"

\n

How to use it

\n

This is an Angular directive to make your life easier when it comes to native shadows.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the NgShadowModule

\n
// ...
import { NgShadowModule } from \"@imagene.me/nativescript-shadow/angular\";

@NgModule({
  imports: [
    NgShadowModule
    // ...
  ]
  // ...
})
export class MyModule {}
\n

Just use in your templates

\n

Simple attribute shadow:

\n
<Label shadow=\"2\"></Label>
\n

Of course you can property bind it:

\n
<Label [shadow]=\"myCustomShadow\"></Label>
\n

To provide other details, combine the shadow directive with other attributes:

\n
<Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypePlatformDescription
shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
default: 'RECTANGLE'		AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

AndroidData and IOSData

\n

As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

\n

Component

\n
import { AndroidData, ShapeEnum } from \"@imagene.me/nativescript-shadow\";
// ...
export class MyComponent {
  fabShadow: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

In the template you can do:

\n
<Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"@imagene.me/nativescript-shadow\";
class MyComponent {
  // ...
  ngOnInit(): init {
    this.mySnackBar.elevation = Elevation.SNACKBAR;
  }
  // ...
}
\n

Notes about version 2+

\n

Here are the list of improvements on version 2.0:

\n
    \n
  1. BugFix: Integer directive not rendering on iOS.
    2. \n
  2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
    3. \n
  3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
    4. \n
  4. 2.1.X Override Android default StateListAnimator as explained below:
    5. \n
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

\n

Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow:

\n\n

Changelog

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-forgm-sound":{"name":"nativescript-forgm-sound","version":"1.1.3","license":"Apache-2.0","readme":"

NativeScript Sound

\n

Play a sound in your NativeScript app.

\n

John Bristowe has initially programmed this project. The starting point was Grey Laureckis (PR #9) fork that includes code from PR #8. Mathew Thompson's iOS 13.2 fix is also implemented. Nativescript-plugin-seed was used to move it from JS to TypeScript. The demo tested on iOS 13.3 Simulator and Android API 28 virtual device

\n

Installation

\n
npm i nativescript-forgm-sound --save
\n

Usage

\n

To use this plugin you must first import it:

\n
import { Sound } from 'nativescript-forgm-sound';
\n

init and play

\n

Preload sound before playing it because there is a delay during creation due to the audio being processed.

\n
const beep: Sound = new Sound('~/sounds/beep.wav');

// play the sound (i.e. tap event handler)
beep.play();
\n

pause

\n
beep.pause();
\n

resume

\n
beep.resume();
\n

stop

\n
beep.stop();
\n

release

\n

After release(), if you play(), the app should crash.

\n
beep.release();
\n

setVolume

\n

Sets volume, the volume should be limited from 0.0 to 1.0.\nfadeDuration in milliseconds only for iOS.

\n
beep.setVolume(volume: number, fadeDuration?: number );
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fit-oauth":{"name":"nativescript-fit-oauth","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xz-ad-generation":{"name":"nativescript-xz-ad-generation","version":"1.0.26","license":"Apache-2.0","readme":"

NativeScript AdGeneration Plugin

\n

Installation

\n
tns plugin add nativescript-xz-ad-generation
\n

Usage

\n

Import Module

\n
@NgModule({
    imports: [
    \tNativeScriptCommonModule,
\t    HomeRoutingModule,
\t    XzAdGenerationModule, // <-- Add this!
    ],
    declarations: [
        HomeComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }
\n

Banner

\n
<XzAdGBanner locationId=\"48547\" bannerWidth=\"320\" bannerHeight=\"50\"></XzAdGBanner>
\n

Native Ad

\n
<XzAdGLayout locationId=\"48635\"> <!-- Use 48636 for Android -->
\t<ng-template let-ad>
\t\t<GridLayout class=\"ad-container\" columns=\"100 *\" rows=\"auto\">
\t\t\t<GridLayout rows=\"auto\" col=\"0\">
\t\t\t\t<Image src=\"{{ ad.iconImageUrl ? ad.iconImageUrl : ad.mainImageUrl }}\" width=\"100\" height=\"100\"></Image>
\t\t\t\t<XzAdGInformationIconView *ngIf=\"ad.nativeAd\" [nativeAd]=\"ad.nativeAd\" verticalAlignment=\"top\" horizontalAlignment=\"left\"></XzAdGInformationIconView>
\t\t\t</GridLayout>

\t\t\t<StackLayout col=\"1\">
\t\t\t\t<Label [text]=\"ad.title\" textWrap=\"true\"></Label>
\t\t\t\t<Label [text]=\"ad.sponsor\" class=\"sponsor-name\"></Label>
\t\t\t</StackLayout>
\t\t</GridLayout>
\t</ng-template>
</XzAdGLayout>
\n

Demo

\n

See demo-angular

\n
npm run setup
# ios
npm run demo.ng.ios
# android
npm run demo.ng.android
\n

For Comitter

\n

Build & Publish

\n
cd publish
./pack.sh # For build
./publish.sh # For build & publish
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accessories":{"name":"nativescript-accessories","version":"1.1.0","license":"Apache-2.0","readme":"

nativescript-accessories

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-accessories
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-auth":{"name":"nativescript-azure-auth","version":"1.0.5","license":"Apache-2.0","readme":"

Azure Auth

\n

A nativescript wrapper around the native libraries of Microsoft Azure's Active Directory Authentication Libraries ADAL for iOS and ADAl for Android.

\n

Version

\n
Current version: 1.0.5\n
\n

Installation

\n
tns plugin add nativescript-azure-auth
\n

Usage - Angular

\n

Create a authentication service that uses this library.

\n
import { Injectable } from \"@angular/core\";
import { AzureAuth, AzureUser } from \"nativescript-azure-auth\";

const azureAuth: AzureAuth;
const authority: string = \"https://login.microsoftonline.com/{TENANT_ID}/oauth2/authorize\"
const clientID: string = \"{CLIENT_ID}\";
const resourceId: string = \"{RESOURCE_ID}\";
const redirectUri: string = \"{REPLY-URL}\";

@Injectable()
export class AzureAuthenticationService {
    private azureAuth: AzureAuth;
    constructor() {
        this.azureAuth = new AzureAuth(authority,clientID,resourceId,redirectUri);
    }

    login() {
        this.azureAuth.login()
            .then(accessToken => {
                console.log(`Token: ${accessToken}`);
            })
            .catch(error => {
                console.log(error);
            });
    }

    getToken() {
        this.azureAuth.getToken()
            .then(accessToken => {
                console.log(`Access token : ${accessToken}`);
            })
            .catch(error => {
                console.log(error);
            });
    }

    
    getUser() {
        this.azureAuth.getUser()
            .then((user: AzureUser) => {
                console.log(`Access token : ${JSON.stringify(user)}`);
            })
            .catch(error => {
                console.log(error);
            });
    }


    logout() {
        this.azureAuth.clearCache();
    }

}
\n

The login and logout can be consumed in a component.

\n
import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from \"@angular/core\";
import { AzureAuthenticationService } from \"~azure-authentication.service\"

@Component({
  selector: \"ns-app\",
  templateUrl: \"app.component.html\"
})
export class AppComponent implements OnInit, AfterViewInit {
    
    constructor(private azureAuthService: AzureAuthenticationService) {}

    login() {
        this.azureAuthService.login();
    }

    logout() {
        this.azureAuthService.logout();
    }
}
\n

The best use-case for getToken would be in an interceptor so you can be sure that the latest access token is attached to your header when you make a http request to a protected Rest API.

\n
import { Component, Inject, Injectable } from \"@angular/core\";
import { AzureAuthenticationService } from \"~azure-authentication.service\"
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpHeaders, HttpClient} from \"@angular/common/http\";
import { Observable, from } from \"rxjs\";
import \"rxjs/add/operator/switchMap\";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor(private azureAuthService: AzureAuthenticationService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const promise = this.auth.azureAuthService.getToken();
        const observable = from(promise);
        return observable.switchMap((token) => {
            req = req.clone({setHeaders: {
                authorization: `Bearer ${token}`,
                \"content-type\": \"application/json\"
            }});
            return next
                .handle(req)
                .do(event => {})
                .catch(err => console.log(err));
        });   
    }
}
\n

API

\n

public login(clearCache?: boolean): Promise<string>

\n

Opens a webview that redirects to login.microsoft.com.

\n

clearCache parameter clears the ADAL tokenCache when set to true. By default clearCache is set to true.

\n

public getToken(): Promise<string>

\n

Silently retrieves a token from Azure Active Directory using the refresh token being stored by the respective native libraries for ADAL. Best used with an interceptor or when creating http request that require th token.

\n

public clearCache(): void

\n

Clears the entire token cache for the clientId set when instantiating this library.

\n

Contributions

\n

Thanks to James Browning for providing help.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sample-demo":{"name":"nativescript-sample-demo","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-onesignal-sdk":{"name":"@dsvishchov/nativescript-onesignal-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript Onesignal SDK

\n

A Onesignal plugin that handles push notifications for both ios and android nativescript applications.

\n

Prerequisites

\n

A Onesignal account with an active onesignal application.

\n

Installation

\n
tns plugin add nativescript-onesignal-sdk
\n

Usage

\n

Angular

\n

Not supported

\n

Typescript & Javascript

\n

Android

\n

Add both values onesignal_app_id and onesignal_google_project_number as string resources:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"app_name\">Demo</string>
    <string name=\"onesignal_app_id\">your_onesignal_app_id</string>
    <string name=\"onesignal_google_project_number\">your_onesignal_google_project_number</string>
</resources>
\n

Then refer those values in your AndroidManifest.xml.

\n

Note: Add xmlns:tools="http://schemas.android.com/tools" on manifest root tag.

\n
<meta-data
\t\ttools:replace=\"android:value\"
        android:name=\"onesignal_app_id\"
        android:value=\"@string/onesignal_app_id\"/>

<meta-data
        tools:replace=\"android:value\"
        android:name=\"onesignal_google_project_number\"
        android:value=\"@string/onesignal_google_project_number\"/>
\n

Add the following code on your main.ts or app.js:

\n
import * as app from \"application\";
var TnsOneSignal = require(\"nativescript-onesignal\").TnsOneSignal;

if (app.android) {
  app.on(app.launchEvent, args => {
    TnsOneSignal.startInit(app.android.context).init();
  });
}
\n

iOS

\n

Add the following code on your main.ts or app.js:

\n
import * as app from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (app.ios) {
     TnsOneSignal.initWithLaunchOptionsAppIdHandleNotificationReceivedHandleNotificationActionSettings({},
            <your-onesignal-app-id>,
            (notificationReceived) => {
                console.log(notification);
            },
            (notificationAction) => {
                console.log(notification);
            });
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Demo

\n
npm run plugin.prepare
# iOS
npm run demo.ios
# Android
npm run demo.android
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-checkbox":{"name":"@nstudio/nativescript-checkbox","version":"2.0.5","license":"Apache-2.0","readme":"

@nstudio/nativescript-checkbox

\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n
npm install @nstudio/nativescript-checkbox
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Usage

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
import { Frame } from '@nativescript/core';

public toggleCheck() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
Vue.registerElement(
  'CheckBox',
  () => CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sak-fit-text":{"name":"nativescript-sak-fit-text","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cognito":{"name":"nativescript-cognito","version":"1.1.3-alpha","license":"Apache-2.0","readme":"

Nativescript-cognito

\n

Consume aws cognito service with nativescript. Android and iOS\nClouding co.\nhttp://clouding.ca

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-cognito
\n

Usage

\n
const cognito = new Cognito(\"Your user pool id\", \"your client id\");

cognito.authenticate(username, password).then(token => ...)

cognito.signUp(username, password, {
    name: \"Name\", 
    email: \"Email\",
    phone: \"Phone\",
    ...
}).then(res => ...)

cognito.confirmRegistration(username, code).then(username => {})
...
\n

License

\n

MIT License Copyright (c) 2019

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wearos-sensors":{"name":"nativescript-wearos-sensors","version":"1.2.1","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fast-android-r":{"name":"nativescript-fast-android-r","version":"1.1.0","license":"Apache-2.0","readme":"

nativescript-fast-android-r

\n

In {N}, querying android.R, like using android.R.integer.config_longAnimTime, will cause an UI lag for over 500ms the first time it's called. R is a big class with many child static classes, so yhis slowdown may be because {N} loads all the R class metadata at runtime.

\n

This plugin provides the proxy object androidR that uses Reflection to query the static class integer and field config_longAnimTime to return the value.

\n

Installation

\n
tns plugin add nativescript-fast-android-r
\n

Usage

\n

To use this plugin, simply import androidR and use it like you'd use android.R

\n
import { androidR } from \"nativescript-fast-android-r\";
console.log(androidR.integer.config_longAnimTime);
\n

Peformance

\n

Querying android.R for the first time takes usually from 400-800ms, and a negligible time from then onwards.

\n
console.log(android.R.integer.config_longAnimTime); // 400-800ms
console.log(android.R.integer.config_longAnimTime); // ~0ms
console.log(android.R.integer.config_shortAnimTime); // ~0ms
console.log(android.R.integer.config_shortAnimTime); // ~0ms
console.log(android.R.transition.explode); // ~0ms
console.log(android.R.transition.explode); // ~0ms
\n

fast-android-r caches all classes and values that are queried. The first query usually takes <5ms. Subsequent queries to the same value will take negligible time (O(1) lookup). First time queries to other fields/classes usually take <2ms.

\n
console.log(androidR.integer.config_longAnimTime); // 0-4ms
console.log(androidR.integer.config_longAnimTime); // ~0ms
console.log(androidR.integer.config_shortAnimTime); // 0-2ms
console.log(androidR.integer.config_shortAnimTime); // ~0ms
console.log(androidR.transition.explode); // 0-4ms
console.log(androidR.transition.explode); // ~0ms
\n

Future possibilities

\n

WAlthough some values from the R class are dynamic (e.g.: resources, strings, etc), most of them are not (integer.config_longAnimTime, integer.config_longAnimTime and others defined in the documentation). It may be benefitial to preload immutable values into the cache while allowing "dynamic" values to be queried.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rgbvision/nativescript-indexed-repeater":{"name":"@rgbvision/nativescript-indexed-repeater","version":"1.0.1","license":"Apache-2.0","readme":"

@rgbvision/nativescript-indexed-repeater

\n

Adds the ability to get the index of an item for a Repeater UI component.

\n

Can be used in itemTemplateSelector or in item's event handler.

\n

Installation

\n
ns plugin add @rgbvision/nativescript-indexed-repeater
\n

Usage

\n

XML:

\n
<ir:IndexedRepeater items=\"{{ items }}\">
  <ir:IndexedRepeater.itemsLayout>
    <StackLayout orientation=\"vertical\"/>
  </ir:IndexedRepeater.itemsLayout>
  <ir:IndexedRepeater.itemTemplate>
    <Label text=\"{{ title }}\" margin=\"10\" tap=\"onItemTap\"/>
  </ir:IndexedRepeater.itemTemplate>
</ir:IndexedRepeater>
\n

Make sure you include xmlns:ir="@rgbvision/nativescript-indexed-repeater" on the Page element

\n

TypeScript:

\n
export function onItemTap(event: ItemEventData) {
  const itemData = event.view.bindingContext;
  console.log(`Item index: ${itemData.index}`);
}
\n

Warning

\n

Plugin overrides bindingContext.index value.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/app-center":{"name":"@skhye05/app-center","version":"2.0.3","license":"Apache-2.0","readme":"

@nativescript/app-center

\n

Prerequisites / Requirements

\n

Go to https://appcenter.ms sign in and create your app (it could either be android or ios).

\n

You will need the App Secret key in order to start the plugin. The App Secret can be found on the Getting Started page or Settings page on the App Center portal.

\n

Installation

\n
ns plugin add @skhye05/app-center
\n

Usage

\n

Using the plugin in Android

\n

Add code in your view model or component (Make sure you have replaced {Your App Secret} in the code sample above with your App Secret.):

\n

TypeScript

\n
    import { AppCenter } from 'nativescript-app-center';

    let appCenter = new AppCenter();

    // To Analytics Callbacks

    appCenter.onAnalyticsListener({
      onBeforeSending: (report: any) => {
        console.log('before');
      },
      onSendingFailed: (log: any) => {
        console.log('failed');
      },
      onSendingSucceeded: (log: any) => {
        console.log('success');
      }
    });

    // To Add Crashes Callbacks

    appCenter.onCrashesListener({
      shouldProcess: (report: ErrorReport) => {
        console.log('should Process');
        return true;
      },
      shouldAwaitUserConfirmation: () => {
        console.log('Confirm');
        return false;
      },
      getErrorAttachments: (report: ErrorReport) => {
        return null;
      },
      onBeforeSending: (report: ErrorReport) => {
        console.log('before');
      },
      onSendingFailed: (report: ErrorReport, e: any) => {
        console.log('failed');
      },
      onSendingSucceeded: (report: ErrorReport) => {
        console.log('success');
      }
    });

    // Start App Center

    appCenter.start({
      analytics: true,
      crashes: true,
      appSecret: '{Your App Secret}'
    });


    // To Track Event Add

    trackEvent(): void {
        let property: Array<PropertyOption> = new Array<PropertyOption>();

        property.push({ key: \"firstname\", value: \"john\" }, { key: \"surname\", value: \"doe\" });
        appCenter.trackEvent('Clicked', property);
    }

    // To Test Crashes
    testCrash(): void {
        appCenter.testCraches();
    }
\n

Javascript

\n
    var AppCenter = require(\"@nativescript/app-center\");

    var appCenter = new AppCenter();

    // To Analytics Callbacks

    appCenter.onAnalyticsListener({
      onBeforeSending: (report: any) => {
        console.log('before');
      },
      onSendingFailed: (log: any) => {
        console.log('failed');
      },
      onSendingSucceeded: (log: any) => {
        console.log('success');
      }
    });

    // To Add Crashes Callbacks

    appCenter.onCrashesListener({
      shouldProcess: (report: ErrorReport) => {
        console.log('should Process');
        return true;
      },
      shouldAwaitUserConfirmation: () => {
        console.log('Confirm');
        return false;
      },
      getErrorAttachments: (report: ErrorReport) => {
        return null;
      },
      onBeforeSending: (report: ErrorReport) => {
        console.log('before');
      },
      onSendingFailed: (report: ErrorReport, e: any) => {
        console.log('failed');
      },
      onSendingSucceeded: (report: ErrorReport) => {
        console.log('success');
      }
    });

    // Start App Center

    appCenter.start({
      analytics: true,
      crashes: true,
      push: false,
      distribute: false,
      appSecret: '{Your App Secret}'
    });


    // To Track Event Add

    appCenter.trackEvent = function() {
        var property = [];

        property.push({ key: \"firstname\", value: \"john\" }, { key: \"surname\", value: \"doe\" });
        appCenter.trackEvent('Clicked', property);
    }

      // To Raised an Error Manually

    appCenter.trackError = function() {
        const properties: Array<PropertyOption> = new Array<PropertyOption>();
        properties.push({ key: \"test-email\", value: \"example@email.com\" });
        properties.push({ key: \"test-error-name\", value: \"error name\" });
        const text = `App Center error text...`;

        const attachment = ACErrorAttachmentLog.attachmentWithText(text, 'error.txt');

        this.appCenter.trackError('Error', properties, [attachment]).then((response) => {
        console.log('response-->', response);
        }, (error) => {
        console.log('error-->', error);
        });
    }

    // To Test Crashes
    appCenter.testCrash = function() {
        appCenter.testCraches();
    }
\n\n

API

\n

Properties

\n

InitOption

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
analyticsbooleanSet to true to add App Center Analytics to your app
crashesbooleanSet to true to add App Center Crashes to generate a crash log every time your app crashes
appSecretstringThis refer to your application App Center value
\n

PropertyOption

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
keystringProperty identifier
valuestringProperty actual value
\n

AnalyticsListener (Android Only)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
onBeforeSendingCallback FunctionCalled right before sending a log. The callback can be invoked multiple times based on the number of logs.
onSendingFailedCallback FunctionCalled when sending a log failed.
onSendingSucceededCallback FunctionCalled when a log is sent successfully.
\n

CrashesListener (Android Only)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
shouldProcessCallback FunctionCalled to determine whether it should wait for user confirmation before sending crash reports (return true if the crash report should be processed, otherwise false).
shouldAwaitUserConfirmationCallback FunctionCalled to determine whether it should wait for user confirmation before sending crash reports (Return true if you just built a UI for user consent and are waiting for user input on that custom UI, otherwise false.).
getErrorAttachmentsCallback FunctionCalled to get additional information to be sent as separate ErrorAttachmentLog logs.
onBeforeSendingCallback FunctionCalled right before sending a crash report. The callback can be invoked multiple times based on the number of crash reports.
onSendingFailedCallback FunctionCalled when sending a crash report failed.
onSendingSucceededCallback FunctionCalled when a crash report is sent successfully.
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsTypeArgumentDescription
start()void(InitOption)Configure the SDK with the list of services to start. This may be called only once per application process lifetime.
\n

Analytics Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsTypeArgumentDescription
trackEvent()void(eventName: string, poperty?: PropertyOption)Track a custom event with name.
trackError()Promise<boolean>(exceptionMessage: string, properties?: PropertyOption[]), attachments?: any[])Raised an error manually.
isAnalyticsEnabledPromise<boolean>noneCheck whether Analytics service is enabled or not. (return a boolean)
isAnalyticsEnabledSyncbooleannoneCheck whether Analytics service is enabled or not. return a boolean
setAnalyticsEnabledvoid(value: boolean)Enable or disable Analytics service.
onAnalyticsListenervoid(callbacks: AnalyticsListener)Sets an analytics callback listener. (Android Only)
\n

Crashes Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodsTypeArgumentDescription
testCrash()voidnoneGenerate crash test.
hasCrashedInLastSession()Promise<boolean>noneCheck whether the app crashed in its last session.(return a boolean). (Android Only)
hasCrashedInLastSessionSync()booleannoneCheck whether the app crashed in its last session. return a boolean. (Android Only)
isCrashedEnabledSync()Promise<boolean>noneCheck whether Crashes service is enabled or not. (return a boolean)
isCrashedEnabled()booleannoneCheck whether Analytics Crashes is enabled or not. return a boolean
setCrashesEnabled()void(value: boolean)Enable or disable Crashes service.
onCrashesListener()void(callbacks: AnalyticsListener)Sets an Crashes callback listener. (Android Only)
crashesNotifyUserConfirmationDontSend()voidnoneNotifies Plugins with a confirmation to not send and handle the crash report. (Android Only)
crashesNotifyUserConfirmationSend()voidnoneNotifies Plugins with a confirmation to send and handle the crash report. (Android Only)
crashesNotifyUserConfirmationAlwaysSend()voidnoneNotifies Plugins with a confirmation to always send and handle the crash report. (Android Only)
\n

Author

\n

Jonathan Mayunga, eljodev@gmail.com

\n

License

\n

Apache License Version 2.0,

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-centered-label":{"name":"nativescript-centered-label","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Centered Label

\n

\"Demo     \n\"Demo

\n

This plugin allows you to have Label that are centered both vertically and horizontally

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/nativescript-centered-label
cd nativescript-centered-label/src
npm run demo.ios # or demo.android
\n

NativeScript-Angular

\n

Check out the demo-angular folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/nativescript-centered-label
cd nativescript-centered-label/src
npm run demo-angular.ios # or demo-angular.android
\n

Installation

\n
tns plugin add nativescript-centered-label
\n

Usage

\n

NativeScript-Core (XML)

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ui=\"nativescript-centered-label\">

    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:CenteredLabel text=\"Centered Label\" class=\"c-label\"></ui:CenteredLabel>
    </GridLayout>
</Page>
\n

NativeScript Angular

\n

TypeScript

\n
...
import {CenteredLabelModule} from \"nativescript-centered-label\";

@NgModule({
    imports: [
        ...
        CenteredLabelModule
    ],
    ...
})
export class HomeModule { }
\n

HTML

\n
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout class=\"page\">
    <CenteredLabel text=\"Centered Label\" class=\"c-label\" (tap)=\"testTap()\"></CenteredLabel>
</GridLayout>
\n

CSS

\n
.c-label{
    background-color: rgba(0, 0, 0, 0.1);
    border-width: 4;
    border-color: #a8a8a8;
    height: 20%;
    width: 60%;
    border-radius: 30;
    color: black;
    font-size: 20;
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-list-view":{"name":"nativescript-fancy-list-view","version":"0.0.9","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript FancyListView 🍵

\n

Install

\n

tns plugin add nativescript-fancy-list-view

\n

Usage

\n

IMPORTANT: Make sure you include xmlns:lv="nativescript-fancy-list-view" on the Page element any element can be used in the list

\n
<lv:FancyListView items=\"{{items}}\" row=\"2\" id=\"listView\">
            <lv:FancyListView.itemTemplate>
                <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label text=\"{{title}}\"/>
                    <Image row=\"1\" src=\"{{image}}\"/>
                </GridLayout>
            </lv:FancyListView.itemTemplate>
</lv:FancyListView>
\n

Multi Template

\n
<lv:FancyListView itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" items=\"{{items}}\" id=\"listView\">
      <FancyListView.itemTemplates>
        <template key=\"even\">
          <GridLayout rows=\"auto,auto,*\" columns=\"*\">
            <Label text=\"Even\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
        <template key=\"odd\">
          <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
            <Label text=\"Odd\"/>
            <Label row=\"1\" text=\"{{title}}\"/>
            <StackLayout row=\"2\">
              <Label text=\"{{image}}\"/>
            </StackLayout>
            <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
          </GridLayout>
        </template>
      </FancyListView.itemTemplates>
    </lv:FancyListView>
\n

Angular

\n
import { FancyListViewModule } from \"nativescript-fancy-list-view/angular\";

@NgModule({
    imports: [
    FancyListViewModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n

Angular v2

\n
<FancyListView [items]=\"items\" #listview (itemTap)=\"onTap($event)\" class=\"listview\">
        <template let-i=\"index\" let-item=\"item\">
            <GridLayout class=\"list-item\" rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                <Label  [text]=\"item.title\"></Label>
                <Image row=\"1\" [src]=\"item.image\"></Image>
            </GridLayout>
        </template>
    </FancyListView>
\n

Angular v4+

\n
<FancyListView [items]=\"items\" #listView (itemTap)=\"onTap($event)\" class=\"listview\">
        <ng-template let-i=\"index\" let-item=\"item\">
            <GridLayout class=\"list-item\" rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                <Label  [text]=\"item.title\"></Label>
                <Image row=\"1\" [src]=\"item.image\"></Image>
            </GridLayout>
        </ng-template>
    </FancyListView>
\n

Multi Template

\n
 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }
\n
<FancyListView [items]=\"items | async\" [itemTemplateSelector]=\"templateSelector\"  #listView (itemTap)=\"onTap($event)\" class=\"listview\">
        <ng-template flvTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
            <GridLayout class=\"list-item\" rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"></Label>
                <Label row=\"1\" [text]=\"item.title\"></Label>
                <Image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></Image>
            </GridLayout>
        </ng-template>

        <ng-template flvTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
            <GridLayout class=\"list-item\" rows=\"auto,auto,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"></Label>
                <Label row=\"1\" [text]=\"item.title\"></Label>
                <StackLayout row=\"2\">
                    <Label [text]=\"item.image\"></Label>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\" ></Image>
            </GridLayout>
        </ng-template>

    </FancyListView>
\n

Configuration

\n
<FancyListView items=\"{{items}}\" itemWidth=\"25%\" itemHeight=\"50%\" max=\"75%\" min=\"20%\" spanCount=\"2\" layoutType=\"grid\"><FancyListView>
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
itemsnullArray
  • - [x]
itemWidth100%string / number
  • - [ ]
itemHeight25%string / number
  • - [ ]
min(itemWidth * 2) / (1/3)string / number
  • - [ ]
max(itemWidth * 2)string / number
  • - [ ]
spanCount1number
  • - [ ]
layoutTypelinearstring
  • - [ ]
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
Coming Soon!!Coming Soon!!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fitness":{"name":"nativescript-fitness","version":"1.6.0","license":"MIT","readme":"

Fitness plugin for NativeScript

\n

This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

\n

This is a fork of nativescript-health-data

\n

Prerequisites

\n

Android

\n

Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

\n
keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
\n
\n

Note that the default (debug) keystore password is empty.

\n
\n

iOS

\n

Make sure you enable the HealthKit entitlement in your app ID.

\n

Installation

\n

Install the plugin using the NativeScript CLI:

\n
tns plugin add nativescript-fitness
\n

API

\n

The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

\n

This is how you can import and instantiate the plugin, all examples expect this setup:

\n
import { AggregateBy, Fitness, FitnessType } from \"nativescript-fitness\";

export class MyHealthyClass {
  private fitness: Fitness;

  constructor() {
    this.fitness = new Fitness();
  }
}
\n

isAvailable

\n

This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

\n
this.fitness.isAvailable(false)
    .then(available => console.log(available));
\n

isAuthorized

\n

This function (and the next one) takes an Array of FitnessType's. Each of those has a name and an accessType.

\n\n
\n

iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

\n
\n
this.fitness.isAuthorized([<FitnessType>{name: \"steps\", accessType: \"read\"}])
    .then(authorized => console.log(authorized));
\n

requestAuthorization

\n

This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed FitnessType's.

\n

Note that this plugin currently only supports reading data, but that will change.

\n
const types: Array<FitnessType> = [
\t{name: \"height\", accessType: \"write\"},
\t{name: \"weight\", accessType: \"readAndWrite\"},
\t{name: \"steps\", accessType: \"read\"},
\t{name: \"distance\", accessType: \"read\"}
];

this.fitness.requestAuthorization(types)
    .then(authorized => console.log(authorized))
    .catch(error => console.log(\"Request auth error: \", error));
\n

query

\n

Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

\n

By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

\n

If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

\n
this.fitness.query(
    {
      startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      endDate: new Date(), // now
      dataType: \"steps\", // equal to the 'name' property of 'FitnessType'
      unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
      aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
      sortOrder: \"desc\" // optional, default \"asc\"
    })
    .then(result => console.log(JSON.stringify(result)))
    .catch(error => this.resultToShow = error);
\n

queryAggregateData EXPERIMENTAL!

\n

Difference between query and queryAggregateData: if you use query, you will probably find that the number of steps (or other types of data) do not match those shown by the Google Fit and Apple Health apps. If you wanted to accurately compute the user's data then use: queryAggregateData

\n

Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

\n

By default data is aggregated by day.\nThis plugin however offers a way to aggregate the data by either hour and day. (month and year available soon)

\n

Note that queryAggregateData only supports steps, calories and distance on Android. (More data types available soon).

\n

If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

\n
this.fitness.queryAggregateData(
    {
      startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      endDate: new Date(), // now
      dataType: \"steps\", // equal to the 'name' property of 'FitnessType'
      unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
      aggregateBy: \"day\", // optional, one of: \"hour\", \"day\" ; default: \"day\"
    })
    .then(result => console.log(JSON.stringify(result)))
    .catch(error => this.resultToShow = error);
\n

startMonitoring (iOS only, for now)

\n

If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

\n

Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

\n
\n

Background notifications probably don't work on the iOS simulator, so please test those on a real device.

\n
\n
this.fitness.startMonitoring(
    {
      dataType: \"heartRate\",
      enableBackgroundUpdates: true,
      backgroundUpdateFrequency: \"immediate\",
      onUpdate: (completionHandler: () => void) => {
        console.log(\"Our app was notified that health data changed, so querying...\");
        this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
      }
    })
    .then(() => this.resultToShow = `Started monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

stopMonitoring (iOS only, for now)

\n

It's best to call this method in case you no longer wish to receive notifications when health data changes.

\n
this.fitness.stopMonitoring(
    {
      dataType: \"heartRate\",
    })
    .then(() => this.resultToShow = `Stopped monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

Available Data Types

\n

With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

\n

Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

\n

The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
cardiominTYPE_HEART_POINTSHKQuantityTypeIdentifierAppleExerciseTime
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sentry-temp":{"name":"nativescript-sentry-temp","version":"1.5.3","license":"Apache-2.0","readme":"

Sentry.io for nativescript

\n

This plugin uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

\n

NOTE: If you have a native exeption and the app exits the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior

\n

Installation

\n
tns plugin add nativescript-sentry
\n

Usage

\n

Without Angular

\n
import { Sentry } from 'nativescript-sentry';
const dsn = 'https://<key>:<secret>@host/<project>';
Sentry.init(dsn);
\n

With Angular

\n
import { SentryModule } from 'nativescript-sentry/angular';

NgModule({
  ...
  imports: [
       SentryModule.forRoot({dsn: 'https://<key>:<secret>@host/<project>'})
  ],
\n

Note: this plugin adds a custom ErrorHandler and automatically provides it

\n

API

\n

Init Sentry

\n

Sentry.init(dsn: string, options: SentryOptions)

\n

Capture Exception

\n

Sentry.captureException(exeption: Error, options: SentryOptions)

\n

Example:

\n
try {
    throw 'try catch Exception example'
} catch(error) {
    Sentry.captureException(error, {});
}
\n

Capture Message

\n

Sentry.captureMessage(message: string, options: SentryOptions)

\n

Capture BreadCrumb

\n

Sentry.captureBreadcrumb(breadcrumb:SentryBreadcrumb)

\n

Set Current user

\n

Sentry.setContextUser(user: SentryUser)

\n

Context Tags

\n

Sentry.setContextTags(tags: any)

\n

Context Extra

\n

Sentry.setContextExtra(extra: any)

\n

Clear context

\n

`Sentry.clearContext()``

\n

Next features:

\n\n

Changelog:

\n

11/12/2017 - (1.5.0):

\n

BREAKING CHANGES

\n\n

Features

\n\n

28-08-2017 - (1.3.0):

\n\n

2-08-2017 - (1.2.0):

\n\n

24-07-2017 - (1.1.0):

\n\n

Credits:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gesturehandler":{"name":"nativescript-gesturehandler","version":"0.1.16","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

This is a port of react-native-gesturehandler.\nThe source is based on the source code by Krzysztof Magiera. Dont hesitate to go and thank him for his work!

\n

API

\n

First you need to install the plugin:

\n
tns plugin add nativescript-gesturehandler
\n

We need to do some wiring when your app starts, so open app.ts and add this before creating any View/App/Frame:

\n
TypeScript
\n
import { install } from \"nativescript-gesturehandler\";
install();
\n

You create a gesture handler using something like this:

\n
import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from 'nativescript-gesturehandler';


function onGestureTouch(args: GestureTouchEventData) {
    const { state, extraData, view } = args.data;
    view.translateX = extraData.translationX;
    view.translateY = extraData.translationY;
}
function onGestureState(args: GestureStateEventData) {
    const { state, prevState, extraData, view } = args.data;
    console.log('onGestureState', state, prevState, view, extraData);
}
const manager = Manager.getInstance();
const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
    shouldCancelWhenOutside: false
});
gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
gestureHandler.attachToView(view);
\n

Right now you must not forget to store the gestureHandler somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.

\n

Now about the API. All the gestures for the react counterpart exist with the same options and the same event extraData.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ausweisapp-sdk-wrapper":{"name":"nativescript-ausweisapp-sdk-wrapper","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-ausweisapp-sdk-wrapper

\n

This plugin wraps the Ausweisapp2 SDK to a simpler Javascript API.

\n

Official documentation at https://www.ausweisapp.bund.de/sdk/

\n

DEMO

\n

Contains a DEMO angular application

\n

\"Demo

\n

Run DEMO

\n
    $ cd demo-angular
    $ tns debug android
\n

Consider using PersoSim to simulate a test eID-Card.

\n

Installation

\n

Install this plugin regulary with this command

\n
tns plugin add nativescript-ausweisapp-sdk-wrapper
\n

Integration in app

\n

Head over to the guide here on how to integrate this API in your project

\n

There you will find details on how to

\n
    \n
  1. Create required activity
    2. \n
  2. Configure webpack
    3. \n
  3. Edit AndroidManifest.xml
    4. \n
\n

Usage

\n

Use this typings definition for Typescript and adding IntelliSense support.

\n
/// <reference path=\"./node_modules/nativescript-ausweisapp-sdk-wrapper/typings/ausweisapp-sdk-wrapper-android-declarations.d.ts\" />
\n
    let foregroundActivity = androidApp.foregroundActivity as globalAndroid.app.Activity
    const wrapper = sf.AusweisappSDKWrapper.getInstance(foregroundActivity) as sf.AusweisappSDKWrapper
    const callbacks = [
        new sf.MessageCallbackPair(sf.Message.__ANY_MESSAGE,
            new sf.IMessageCallback({
                onMessage: (message: sf.Message, jsonObject: JSONObject) => {
                    console.log(`received`, `message:${message}`, `${jsonObject.toString(2)}`)
                }
            }))
    ]
    wrapper.onReady(new sf.AusweisappSDKConnector.IAusweisappSDKConnectorListener({
        onReady: () => {
            console.log(`SDK wrapper is ready now`)
            wrapper.getCommander().exec(sf.Command.SET_PIN, new JSONObject().put('value', '123456'), callbacks)
        },
        onDisconnect: () => {
            console.log(`SDK wrapper disconnected`)
        },
        onError: (throwable: java.lang.Throwable) => {
            console.log(`SDK wrapper failed:`, `${throwable}`)
        }
    }))
\n

API

\n

See API usage guide here for a deeper look inside.

\n

Also take a look to the official documentation site of the Ausweisapp SDK at https://www.ausweisapp.bund.de/sdk/

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-ins":{"name":"nativescript-camera-ins","version":"3.2.2","license":"Apache-2.0","readme":"

Welcome to the nativescript-camera plugin for NativeScript framework

\n

Prerequisites

\n\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n

Navigate to project folder and run NativeScript-CLI command

\n
tns plugin add nativescript-camera
\n

Plugin could be added as a standard npm dependency running command

\n
npm install nativescript-camera --save
\n
\n

Note: the --save flag will add the plugin as dependency in your package.json file

\n
\n

Requesting permissions

\n

Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

\n
camera.requestPermissions();
\n
\n

Note: Older versions won't be affected by the usage of the requestPermissions method.

\n
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
var camera = require(\"nativescript-camera\");
\n
import * as camera from \"nativescript-camera\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to recieve image asset

\n
\n
var imageModule = require(\"ui/image\");
camera.takePicture()   
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";
camera.takePicture({).
    then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
var imageModule = require(\"ui/image\");

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options).
    then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
var isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-version":{"name":"nativescript-app-version","version":"1.4.1","license":"MIT","readme":"

NativeScript AppVersion

\n
\n

Requires NativeScript 2.3.0 (because of iOS 10 compatibility), so upgrade if you're rocking a lower spec: npm install -g nativescript.

\n
\n

Read the version of your NativeScript app.

\n

For iOS we read it from *.plist's CFBundleShortVersionString.

\n

For Android we read the versionName from AndroidManifest.xml.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-appversion
\n

Usage

\n

To use this plugin you must first require() it:

\n
var appversion = require(\"nativescript-appversion\");
\n

getVersionName

\n

JavaScript

\n
  appversion.getVersionName().then(function(v) {
      console.log(\"Your app's version is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionName().then((v: string) {
      console.log(\"Your app's version is: \" + v);
  });
\n

getVersionCode

\n

JavaScript

\n
  appversion.getVersionCode().then(function(v) {
      console.log(\"Your app's version code is: \" + v);
  });
\n

TypeScript

\n
  appversion.getVersionCode().then((v: string) {
      console.log(\"Your app's version code is: \" + v);
  });
\n

getAppId

\n

JavaScript

\n
  appversion.getAppId().then(function(id) {
      console.log(\"Your app's id is: \" + id);
  });
\n

TypeScript

\n
  appversion.getAppId().then((id: string) {
      console.log(\"Your app's id is: \" + id);
  });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ffmpeg-plugin":{"name":"nativescript-ffmpeg-plugin","version":"0.0.2","license":"Apache-2.0","readme":"

NativeScript FFmpeg

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Installation

\n
tns plugin add nativescript-ffmpeg-plugin
\n

Usage

\n
    \n
  1. \n

    Execute commands.

    \n
      \n
    • Use execute() method with a single command line and an argument delimiter
      • \n
    \n
    import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin';

    FFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4', ' ').then(result => console.log(\"FFmpeg process exited with result \" + result));
    \n
      \n
    • Use executeWithArguments() method with an array of arguments
      • \n
    \n
    import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin';

    FFmpeg.executeWithArguments([\"-i\", \"file1.mp4\", \"-c:v\", \"mpeg4\", \"file2.mp4\"]).then(result => console.log(\"FFmpeg process exited with result \" + result));
    \n
    2. \n
  2. \n

    Check execution output. Zero represents successful execution, non-zero values represent failure.

    \n
    FFmpeg.getLastReturnCode().then(result => {
        console.log(\"Last return code: \" + result);
    });

    FFmpeg.getLastCommandOutput().then(result => {
        console.log(\"Last command output: \" + result;
    });
    \n
    3. \n
  3. \n

    Stop an ongoing operation.

    \n
    FFmpeg.cancel();
    \n
    4. \n
  4. \n

    Get media information for a file.

    \n
      \n
    • Print all fields
      • \n
    \n
    FFmpeg.getMediaInformation('<file path or uri>').then(info => {
        console.log('Result: ' + JSON.stringify(info));
    });
    \n
      \n
    • Print selected fields
      • \n
    \n
    FFmpeg.getMediaInformation('<file path or uri>').then(info => {
        console.log('Result: ' + JSON.stringify(info));
        console.log('Media Information');
        console.log('Path: ' + info.path);
        console.log('Format: ' + info.format);
        console.log('Duration: ' + info.duration);
        console.log('Start time: ' + info.startTime);
        console.log('Bitrate: ' + info.bitrate);
        if (info.streams) {
            for (var i = 0; i < info.streams.length; i++) {
                console.log('Stream id: ' + info.streams[i].index);
                console.log('Stream type: ' + info.streams[i].type);
                console.log('Stream codec: ' + info.streams[i].codec);
                console.log('Stream full codec: ' + info.streams[i].fullCodec);
                console.log('Stream format: ' + info.streams[i].format);
                console.log('Stream full format: ' + info.streams[i].fullFormat);
                console.log('Stream width: ' + info.streams[i].width);
                console.log('Stream height: ' + info.streams[i].height);
                console.log('Stream bitrate: ' + info.streams[i].bitrate);
                console.log('Stream sample rate: ' + info.streams[i].sampleRate);
                console.log('Stream sample format: ' + info.streams[i].sampleFormat);
                console.log('Stream channel layout: ' + info.streams[i].channelLayout);
                console.log('Stream sar: ' + info.streams[i].sampleAspectRatio);
                console.log('Stream dar: ' + info.streams[i].displayAspectRatio);
                console.log('Stream average frame rate: ' + info.streams[i].averageFrameRate);
                console.log('Stream real frame rate: ' + info.streams[i].realFrameRate);
                console.log('Stream time base: ' + info.streams[i].timeBase);
                console.log('Stream codec time base: ' + info.streams[i].codecTimeBase);
            }
        }
    });
    \n
    5. \n
  5. \n

    Enable log callback and redirect all FFmpeg logs to a console/file/widget.

    \n
    logCallback = (logData) => {
        console.log(logData.text);
    };
    ...
    FFmpeg.enableLogCallback(logCallback);
    \n
    6. \n
  6. \n

    Enable statistics callback and follow the progress of an ongoing operation.

    \n
    statisticsCallback = (statisticsData) => {
        console.log('Statistics; frame: ' + statisticsData.videoFrameNumber.toFixed(1) + ', fps: ' + statisticsData.videoFps.toFixed(1) + ', quality: ' + statisticsData.videoQuality.toFixed(1) +
        ', size: ' + statisticsData.size + ', time: ' + statisticsData.time);
    };
    ...
    FFmpeg.enableStatisticsCallback(statisticsCallback);
    \n
    7. \n
  7. \n

    Poll statistics without implementing statistics callback.

    \n
    FFmpeg.getLastReceivedStatistics().then(stats => console.log('Stats: ' + JSON.stringify(stats)));
    \n
    8. \n
  8. \n

    Reset statistics before starting a new operation.

    \n
    FFmpeg.resetStatistics();
    \n
    9. \n
  9. \n

    Set log level.

    \n
    FFmpeg.setLogLevel(LogLevel.AV_LOG_WARNING);
    \n
    10. \n
  10. \n

    Register your own fonts by specifying a custom fonts directory, so they are available to use in FFmpeg filters. Please note that this function can not work on relative paths, you need to provide full file system path.

    \n
      \n
    • Without any font name mappings
      • \n
    \n
    FFmpeg.setFontDirectory('<folder with fonts>', null);
    \n
      \n
    • Apply custom font name mappings. This functionality is very useful if your font name includes ' ' (space) characters in it.
      • \n
    \n
    FFmpeg.setFontDirectory('<folder with fonts>', { my_easy_font_name: \"my complex font name\" });
    \n
    11. \n
  11. \n

    Use your own fontconfig configuration.

    \n
    FFmpeg.setFontconfigConfigurationPath('<fontconfig configuration directory>');
    \n
    12. \n
  12. \n

    Disable log functionality of the library. Logs will not be printed to console and log callback will be disabled.

    \n
    FFmpeg.disableLogs();
    \n
    13. \n
  13. \n

    Disable statistics functionality of the library. Statistics callback will be disabled but the last received statistics data will be still available.

    \n
    FFmpeg.disableStatistics();
    \n
    14. \n
  14. \n

    List enabled external libraries.

    \n
    FFmpeg.getExternalLibraries().then(externalLibraries => {
        console.log(externalLibraries);
    });
    \n
    15. \n
\n

License

\n

Apache License Version 2.0, January 2004

\n

See Also

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-version-rose":{"name":"nativescript-app-version-rose","version":"1.0.1","license":"Apache-2.0","readme":"

App version viewer

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

This plugin shows app version.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fonepaisa":{"name":"nativescript-fonepaisa","version":"1.0.2","license":"MIT","readme":"

Develop a NativeScript plugin

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. cd myplugin
    3. \n
  3. npm run postclone
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-fonepaisa
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Unittesting

\n

This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API execute one of these commands in the plugin root:

\n
npm run test.ios
npm run test.android
\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-payworks":{"name":"nativescript-payworks","version":"0.1.5","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Payworks

\n

Payworks SDK PayButton plugin for Nativescript.

\n

Payworks is a payment gateway technology for Point of Sales.

\n

ALPHA version. Android only (iOS will come in the future, PR are welcome).

\n

Install it

\n
tns plugin add nativescript-payworks
\n

Use it

\n
import {Payworks} from 'nativescript-payworks';

let payworks: Payworks;

payworks = new Payworks();
    
// Setup
payworks.setup(ProviderMode.TEST, \"<merchantIdentifier>\", \"<merchantSecret>\");
    
// Start transaction
payworks.startTransaction(40.00, Currency.EUR, \"Test transaction\", \"Custom identifier\");
\n

Dependencies

\n

There are a lot of dependencies that this package will install, here the list:

\n
compile 'com.google.android.gms:play-services-gcm:11.0.4'

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:support-v4:25.3.1'
compile 'com.android.support:cardview-v7:25.3.1'

compile 'com.squareup:otto:1.3.5'
compile 'com.squareup.okhttp:okhttp:2.7.4'
compile 'com.squareup.okhttp:okhttp-ws:2.7.4'
compile 'com.parse.bolts:bolts-android:1.2.1'
compile 'com.fasterxml.jackson.core:jackson-databind:2.4.4'
compile 'com.couchbase.lite:couchbase-lite-android:1.4.0'
compile 'com.couchbase.lite:couchbase-lite-android-forestdb:1.4.0'

compile 'io.payworks:mpos.android.ui:2.25.2:@aar'
compile 'io.payworks:mpos.android.core:2.25.2:@aar'


// Add those three dependencies if you want to use a Miura card reader
compile 'io.payworks:mpos.android.accessories.miura:2.25.2:@aar'
compile 'io.payworks:mpos.android.comlinks.bluetooth:2.25.2:@aar'
compile 'io.payworks:mpos.android.comlinks.tcp:2.25.2:@aar'
\n

You may need to use MultiDex.

\n

API

\n

Coming soon...

\n

Describe your plugin methods and properties here.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

Roadmap

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-add-contact-activity":{"name":"nativescript-add-contact-activity","version":"1.0.0","readme":"

NativeScript Add Contact Activity

\n

\"NPM\"

\n

Simple NativeScript plugin that opens add contact activity for selected number.

\n

Limitations

\n

Currently, it only works on Android.

\n

Usage

\n
var addContact = require(\"nativescript-add-contact-activity\");
addContact.createContact(123456789);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@infinitebrahmanuniverse/nolb-nativescript-c":{"name":"@infinitebrahmanuniverse/nolb-nativescript-c","version":"2023.1.28","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slider":{"name":"nativescript-slider","version":"1.0.1","license":{"type":"MIT","url":"https://github.com/kazemihabib/nativescript-slider/LICENSE"},"readme":"

Nativescript Slider

\n

It's a fork of https://github.com/NativeScript/NativeScript/tree/master/tns-core-modules/ui/slider (tns core module) with dragged event.

\n

What's the difference?

\n
Added dragged event that fires when the user drags the slider.\ncurrently this event added just for android.\n
\n

Why should I use this event when I can use two-way binding for value property of slider?

\n
It is usefull when the value can change programmatically and by user for example when creating player.\n
\n

Installation

\n
tns plugin add nativescript-slider\n
\n

Usage

\n
<Page xmlns="http://schemas.nativescript.org/tns.xsd"\n  xmlns:seekbar="nativescript-slider"\n  loaded="pageLoaded">\n  <StackLayout>\n    <seekbar:Slider value="50" maxValue="100" dragged="{{dragged}}" />\n  </StackLayout>\n</Page>\n\ndragged(args){\n   let newValue = args.newValue;\n   let object = args.object;\n}\n
\n

How to use with Angular2

\n
import {registerElement} from "nativescript-angular/element-registry";\n\nregisterElement("TNSSlider", () => require("nativescript-slider").Slider);\n\n<TNSSlider [value]="currentPosition" [maxValue]="movieLength" (dragged)="fromUser($event)"  ></TNSSlider>\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-tv":{"name":"nativescript-ssi-tv","version":"1.0.4","license":"Apache-2.0","readme":"

nativescript-ssi-tv

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-ssi-tv
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-knotes":{"name":"nativescript-social-share-knotes","version":"1.7.0","license":"MIT","readme":"

NativeScript Social Share Plugin

\n

A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

\n

\"\"\n\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-social-share
\n

This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");
var imageSourceModule = require(\"image-source\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
import { ImageSource } from \"image-source\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\");
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText(\"I love NativeScript!\");
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signingpad":{"name":"nativescript-signingpad","version":"1.0.1","license":"Apache 2.0","readme":"

\"In-Mail\"\n\"License\"

\n

nativescript-signingpad

\n

A signing pad to provide signing functionality on iOS and Android

\n

In respect forked from the original nativescript-drawingpad by:https://github.com/bradmartin/nativescript-drawingpad

\n

License

\n

Source code of this project is available under the standard Apache2.0 license. Please see the license file.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-plaid":{"name":"@nstudio/nativescript-plaid","version":"2.0.0","license":"Apache-2.0","readme":"

@nstudio/nativescript-plaid

\n

NativeScript plugin that opens the Plaid native sdk to log in to banking services.

\n
ns plugin add @nstudio/nativescript-plaid
\n

Usage

\n

This plugin opens the Plaid Link flow, which walks the user through finding their institution and linking their bank account.\nIt opens the flow in a modal view, and returns metadata for events, on exit, and on success.

\n

import { PlaidLink } from '@nstudio/nativescript-plaid';

export class YourClass {

  successPublicToken: string;

  constructor() {}

  open() {
    // first set an event listener for the events Plaid reports back.
    PlaidLink.setLinkEventListener((event) => {
      console.log('linkEventListener', event);
    });

    // create a handler and pass your link token. (https://plaid.com/docs/api/tokens/)
    const handler = PlaidLink.createHandler({
      token: 'YOURLINKTOKEN',
      onSuccess: (linkSuccess) => {
        console.log('linkSuccess', linkSuccess);
        this.set('successPublicToken', linkSuccess.publicToken)
      },
      onExit: (linkExit) => {
        console.log('linkExit', linkExit);
      }
    });
    handler.open();
  }
}
\n

Screenshot

\n

\"\"

\n

API

\n\n

Contributors

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adobe-marketing-cloud":{"name":"nativescript-adobe-marketing-cloud","version":"1.6.0","license":"MIT","readme":"

Nativescript plugin for Adobe Marketing Cloud Solutions

\n

\"npm

\n
npm install nativescript-adobe-marketing-cloud --save
\n

Based on:

\n\n

Setting up the application for usage with this plugin.

\n

Set up lifecycle tracking

\n

Listen to lifecycle events:

\n
import * as application from \"application\";
import {AdobeAnalytics} from \"nativescript-adobe-marketing-cloud\";

application.on(application.launchEvent, function (args: application.ApplicationEventData) {
    if (args.android) {
        AdobeAnalytics.getInstance().setContext(application.android.context);
    } else if (args.ios !== undefined) {
        AdobeAnalytics.getInstance().collectLifecycleData(null);
    }
});

application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
    if (args.android) {
        AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
    }
});

application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
    if (args.android) {
        AdobeAnalytics.getInstance().collectLifecycleData(application.android.foregroundActivity);
    }
});

if (application.android) {
    application.android.on(application.AndroidApplication.activityPausedEvent, function (args: application.AndroidActivityEventData) {
        AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
    });

    application.android.on(application.AndroidApplication.activityResumedEvent, function (args: application.AndroidActivityEventData) {
        AdobeAnalytics.getInstance().collectLifecycleData(application.android.foregroundActivity);
    });
}

application.start({ moduleName: \"main-page\" });
\n

Setup ADBMobileConfig.json

\n

Get the config file from the Adobe dashboard.

\n

iOS

\n

place ADBMobileConfig.json file in app\\App_Resources\\iOS

\n

Android

\n

place adbmobileconfig.json file in app\\App_Resources\\Android\\raw

\n

Track states and actions

\n

States and actions can be traced through method calls that match their native counterparts signature.

\n

Privacy options

\n

See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/privacy.html

\n

Select a privacy option:

\n

Send Data Until Opt-Out

\n
AdobeAnalytics.getInstance().optIn();
\n

Hold Data Until Opt-In

\n
AdobeAnalytics.getInstance().optOut();
\n

Visitor Tracking Between an App and Mobile Web

\n

See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/hybrid_app.html\nYou can call:

\n
AdobeAnalytics.getInstance().visitorAppendToURL(url);
\n

This will return the url provided extended with the visitorId.

\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n
    \n
  1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
    2. \n
  2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
    3. \n
\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario, you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above-mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the src folder in order to use native APIs:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

\n\n

Sometimes you just need to wipe out the demo's platforms directory only:

\n\n

Sometimes you may need to ensure plugin files are updated in the demo:

\n\n

Unittesting

\n

The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API go to src folder and execute one of these commands:

\n
npm run test.ios
npm run test.android
\n

Publish to NPM

\n

When you have everything ready to publish:

\n\n

If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

\n

NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

\n

TravisCI

\n

The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

\n

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

\n

Referring tns-core-modules in the Plugin

\n

We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

\n

Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

\n

WRONG

\n

tsconfig.json

\n
...

\"paths\": {
  \"*\": [
    \"./node_modules/*\",
    \"./node_modules/tns-core-modules/*\"
  ]
}
...
\n

yourplugin.common.ts

\n
import * as app from 'application';
\n

RIGHT

\n

yourplugin.common.ts

\n
import * as app from 'tns-core-modules/application';
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@infinitebrahmanuniverse/nolb-nativescript-a":{"name":"@infinitebrahmanuniverse/nolb-nativescript-a","version":"2023.1.28","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-textinput":{"name":"nativescript-nbmaterial-textinput","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript implementation of the Material TextInput

\n

The module implement Material calendar on both platforms iOS and Android.\nThe calendar implements slide transition effects.\nThe pager lets you change months using a swipe.

\n

The module provide some css class:

\n\n

This module provide animation effect for float labels.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ti=\"nativescript-nbmaterial-textinput\">
 \t<ti:TextLayout rows=\"auto,auto\" id=\"textinput\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"TopFix Height\"></ti:TextPlaceholder>
        <ti:MultiLine hint=\"\" text=\"{{textInput}}\" editable=\"true\" maxHeight=\"100\"/>\t\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"textinput1\" class=\"fullwidth dense error\">
        <ti:TextPlaceholder text=\"Middle0\"></ti:TextPlaceholder>
        <TextField hint=\"\" text=\"{{textInput1}}\"/>
        <Label text=\"Erreur de saisie\" textWrap=\"true\" class=\"error\" />\t\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"textinput2\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Middle1\"></ti:TextPlaceholder>
        <TextField hint=\"Saisis\" text=\"{{textInput2}}\"/>\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"textinput3\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Middle2\"></ti:TextPlaceholder>
        <TextField hint=\"Saisis\" text=\"{{textInput3}}\"/>\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"textinput4\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Middle3\"></ti:TextPlaceholder>
        <TextField hint=\"Saisis\" text=\"{{textInput4}}\"/>\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"autogrow\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Top Autogrow\"></ti:TextPlaceholder>
        <ti:MultiLine hint=\"\" text=\"{{autogrow}}\" editable=\"true\"/>\t\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"visible\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Visible\"></ti:TextPlaceholder>
        <TextField hint=\"Saisis gros\" text=\"{{visible}}\"/>\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"textinput5\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Bottom\"></ti:TextPlaceholder>
        <TextField hint=\"Saisis gros\" text=\"{{textInput5}}\"/>\t\t
    </ti:TextLayout>
    <ti:TextLayout rows=\"auto,auto\" id=\"autogrowb\" class=\"fullwidth dense\">
        <ti:TextPlaceholder text=\"Bottom AutoGrow\"></ti:TextPlaceholder>
        <ti:MultiLine hint=\"Saisis gros\" text=\"{{autogrowb}}\"/>\t\t
    </ti:TextLayout>
</Page>

}
\n

The TextLayout has this interface:

\n
export declare class TextLayout extends LayoutBase {
    focused: boolean;  
    hasText: boolean;
}
export declare class SingleLine extends TextField {
}
export declare class MultiLine extends TextView {  
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-fit-label":{"name":"nativescript-auto-fit-label","version":"1.0.4","license":"Apache-2.0","readme":"

AutoFitText

\n

This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width

\n

\"Example

\n

Prerequisites / Requirements

\n

This plugin is only tested with {N} > 3.0.0

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-auto-fit-text
\n

Usage

\n

Angular

\n
import { AutoFitTextModule } from \"nativescript-auto-fit-text/angular\"

@NgModule({
\t...
    imports: [
        AutoFitTextModule
    ],
    ...
})
export class AppModule { }
\n
<AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></AutoFitText>
\n

Vanilla Nativescript

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-auto-fit-text\">
  <StackLayout class=\"p-20\">
    <ui:AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></ui:AutoFitText>
  </StackLayout>
</Page>
\n

Credits

\n

@grantland - android-autofittextview

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-ssi":{"name":"nativescript-plugin-firebase-ssi","version":"10.5.4","license":"MIT","readme":"

NativeScript Firebase plugin

\n

\"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

\n

\"Firebase\"/

\n
\n

Plugin version 10.0.0 works with NativeScript 6.1 and up. Using an older version? Stick to plugin version < 10.

\n
\n

Features

\n\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Note: for using separate versions of these files for development and production environments see this section

\n

Installation

\n

If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-plugin-firebase
\n

This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

\n
\n

Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

\n
\n
\n

Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

\n
\n

Config

\n

If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

\n

You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

\n

You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

\n

Using Vue?

\n

Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

\n

If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

\n

iOS (Cocoapods)

\n

The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

\n

Google Play Services Version

\n

The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Usage

\n

Demo app

\n

If you want a quickstart, clone the repo, then:

\n\n

Start-up wiring

\n

We need to do some wiring when your app starts, so open app.js and add this before application.start();:

\n
JavaScript
\n
var firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function () {
      console.log(\"firebase.init done\");
    },
    function (error) {
      console.log(\"firebase.init error: \" + error);
    }
);
\n

TypeScript

\n
const firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
  () => {
    console.log(\"firebase.init done\");
  },
  error => {
    console.log(`firebase.init error: ${error}`);
  }
);
\n

Angular

\n

Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

\n
const firebase = require(\"nativescript-plugin-firebase\");

@Component({
    // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

Authentication failed: invalid_token

\n

On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

\n
[FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
or
[FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
\n

This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

\n
firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
  iOSEmulatorFlush: true
}).then()
\n

Pod dependency error

\n

If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

\n

This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

\n

Known issues on Android

\n

Genymotion

\n

You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

\n

DexIndexOverflowException

\n
com.android.dex.DexIndexOverflowException: method ID not in..
\n

Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n

java.lang.OutOfMemoryError: GC overhead limit exceeded

\n

Increase the Java Max Heap Size like this (the bit at the end):

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }
  dexOptions {
    javaMaxHeapSize \"4g\"
  }
}
\n

FirebaseApp with name [DEFAULT] doesn't exist

\n

Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

\n

Errors regarding API level 26.0.0

\n

Update your local Android SDKs:

\n

Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

\n

Found play-services:A.C.D, but version B.X.Y is needed..

\n

Update your Android bits like the issue above and reinstall the android platform in your project.

\n

include.gradle: Failed to apply plugin .. For input string: "+"

\n

You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"15.0.0\"
  }
}
\n

Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

\n

Separation of Environments

\n

It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

\n

Setup

\n
    \n
  1. \n

    Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

    \n
    2. \n
  2. \n

    Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

    \n
      \n
    • iOS\n
        \n
      • app/App_Resources/iOS/GoogleService-Info.plist.dev
        • \n
      • app/App_Resources/iOS/GoogleService-Info.plist.prod
        • \n
      \n
      • \n
    • Android\n
        \n
      • app/App_Resources/Android/google-services.json.dev
        • \n
      • app/App_Resources/Android/google-services.json.prod
        • \n
      \n
      • \n
    \n
    3. \n
\n

Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

\n

Build

\n

The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

\n\n

Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

\n

Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applozic-chat-fork":{"name":"nativescript-applozic-chat-fork","version":"2.2.0","license":"Apache-2.0","readme":"

Applozic NativeScript Chat Plugin

\n

Prerequisites

\n

iOS

\n\n

NativeScript

\n\n

Installation

\n
\n

For NativeScript 7 compatibility, run.

\n
\n
tns plugin add nativescript-applozic-chat@2.0.0
\n
\n

For NativeScript 6 compatibility, run.

\n
\n
tns plugin add nativescript-applozic-chat@1.7.2
\n

Goto src folder and run

\n
npm run demo.ios
\n

Usage

\n
JavaScript
\n

Add import

\n
var nativescript_applozic_chat = require(\"nativescript-applozic-chat\");
\n

And then inside your funcation you can create the object of ApplozicChat to access it.

\n
var applozicChat = new nativescript_applozic_chat.ApplozicChat();
\n
TypeScript
\n

Add import

\n
import { ApplozicChat } from \"nativescript-applozic-chat\";
\n

And then inside your funcation you can create the object of ApplozicChat to access it.

\n
var applozicChat = new ApplozicChat();
\n

Login/Register User

\n
    var alUser = {
            'userId' : userId,   //Replace it with the userId of the logged in user NOTE: String userId
            'password' : password,  //Put password here NOTE: String password
            'authenticationTypeId' : 1,
            'applicationId' : 'applozic-sample-app'  //replace \"applozic-sample-app\" with Application Key from Applozic Dashboard
        };

    applozicChat.login(alUser, function(response) {
        applozicChat.launchChat(); //launch chat
      }, function(error) {
        console.log(\"onLoginFailure: \" + error);
      });
\n

Launch Chat

\n
Main Chat screen
\n
        applozicChat.launchChat();
\n
Launch Chat with a specific User
\n
        applozicChat.launchChatWithUserId(userId);
\n
Launch Chat with specific Group
\n
        applozicChat.launchChatWithGroupId(groupId, function(response){
\t  console.log(\"Success : \" + response);
\t}, function(response){
\t  console.log(\"Error : \" + response);
\t});
\n

Logout

\n
applozicChat.logout(function(response) {
      console.log(\"logout success: \" + response);
    }, function(error) {
      console.log(\"logout error: \"+ error);
    });
\n

Push Notification Setup instruction

\n

Uploading the push notification certificate and GCM/FCM server key in applozic dashboard

\n

a) For IOS upload your APNS push notification certificate to Applozic Dashboard page under 'Edit Application' section in order to enable real-time notification.

\n

Go to Applozic Dashboard Push Notification Push Notification -> Upload APNS Certificate for Development and Distribution environment.

\n

b) For Android go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.

\n

Android

\n

Prerequisites:

\n
    \n
  1. Download these files https://github.com/reytum/Applozic-Push-Notification-FIles
    2. \n
  2. Register you application in firebase console and download the google-services.json file.
    3. \n
  3. Get the FCM server key from firebase console.(There is a sender ID and a server key, make sure you get the server key).
    4. \n
  4. Go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.
    5. \n
\n

Steps to follow:

\n
    \n
  1. \n

    Copy the pushnotification folder from the above downloaded files and paste it in path <your project>/platforms/android/src/main/java/com/tns/

    \n
    2. \n
  2. \n

    Add these lines in file <your project>/platforms/android/src/main/AndroidManifest.xml inside <application> tag

    \n
       <service android:name="com.tns.pushnotification.FcmListenerService">\n     <intent-filter>\n         <action android:name="com.google.firebase.MESSAGING_EVENT" />\n     </intent-filter>\n </service>\n <service\n     android:name="com.tns.pushnotification.FcmInstanceIDListenerService"\n     android:exported="false">\n     <intent-filter>\n         <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />\n     </intent-filter>\n </service>\n
    \n
    3. \n
  3. \n

    Add the same lines from step 2 in <your project>/app/App_Resources/Android/AndroidManifest.xml file inside <application> tag

    \n
    4. \n
  4. \n

    Paste thegoogle-services.json file in <your project>/platforms/android/ folder

    \n
    5. \n
  5. \n

    Open <your project>/platforms/android/build.gradle :\nadd this inside dependency mentioned in top of the file (below classpath "com.android.tools.build:gradle:2.2.3") :\nclasspath "com.google.gms:google-services:3.1.1"\nadd this below apply plugin: "com.android.application" :\napply plugin: "com.google.gms.google-services"

    \n
    6. \n
  6. \n

    Call PushNotificationTask in onSuccess of applozic login as below:

    \n
       applozicChat.registerForPushNotification(function(response){
       console.log(\"push success : \" + response);
     }, function(response){
       console.log(\"push failed : \" + response);
     });
    \n
    7. \n
\n

Note : Everytime you remove and add android platform you need to follow steps 1,2,4 and 5.

\n

Ios

\n
    \n
  1. \n

    Download delegate.ts file from this delegate.ts link and paste it under your project folder-->app-->delegate.ts

    \n
    2. \n
  2. \n

    Download app.ts file from the app.ts link and replace the app.ts file in your project if you have any changes then you can merge only required changes from the app.ts file link

    \n
    3. \n
\n

NOTE : Above push notification setup for android and ios is in the case if your not using native script push plugin in your project

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dialog":{"name":"nativescript-dialog","version":"0.1.0","license":"Apache-2.0","readme":"

NativeScript Dialog

\n

A NativeScript plugin for iOS and Android that allows you to create custom dialog.

\n

Installation

\n

tns plugin add nativescript-dialog

\n

Usage

\n

\n
<Page>
   <StackLayout>
     <Button text=\"Show dialog\" tap=\"buttonTap\" />
   </StackLayout>
</Page>
\n
var platform = require(\"platform\");
var application = require(\"application\");
var dialog = require(\"nativescript-dialog\");

exports.buttonTap = function(args){
  var nativeView;

  if(platform.device.os === platform.platformNames.ios){
\t  nativeView = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(UIActivityIndicatorViewStyle.UIActivityIndicatorViewStyleGray);
    nativeView.startAnimating();
  } else if(platform.device.os === platform.platformNames.android){
\t  nativeView = new android.widget.ProgressBar(application.android.currentContext);
    nativeView.setIndeterminate(true);
  }

  dialog.show({
\ttitle: \"Loading...\",
\tmessage: \"Please wait!\",
\tcancelButtonText: \"Cancel\",
\tnativeView: nativeView}
  ).then(function(r){ console.log(\"Result: \" + r); },
  function(e){console.log(\"Error: \" + e)});
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-toasty":{"name":"@triniwiz/nativescript-toasty","version":"4.1.3","license":"Apache-2.0","readme":"

NativeScript-Toasty

\n

Install

\n

NativeScript 7.0+

\n

tns plugin add @triniwiz/nativescript-toasty

\n

NativeScript < 7.0

\n

tns plugin add nativescript-toasty@3.0.0-alpha.2

\n

Usage

\n

TypeScript

\n
import { Toasty } from '@triniwiz/nativescript-toasty';
import { isIOS } from '@nativescript/core/platform';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();

// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  yAxisOffset: 100,
  xAxisOffset: 10,
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24,
  },
  anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
});

toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();
\n

JavaScript

\n
var toasty = require('@triniwiz/nativescript-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
\n

API

\n
export interface Toasty {

  constructor(opts: ToastyOptions);

  position: ToastPosition;

  duration: ToastDuration;

  textColor: Color | string;

  backgroundColor: Color | string;

  yAxisOffset?: Length | number;

  xAxisOffset?: Length | number;

  readonly width: number;

  readonly height: number;


  /**
   * Show the Toasty
   */
  show();

  /**
   * Cancels the Toasty
   */
  cancel();

/**
 * Sets the Toast position.
 */
  setToastPosition(value: ToastPosition): Toasty;

/**
 * Sets the Toast duration.
 */
  setToastDuration(value: ToastDuration): Toasty;

/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(value: Color | string): Toasty;

/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(value: Color | string): Toasty;

}
\n
export enum ToastDuration {
  'SHORT',
  'LONG',
}

export enum ToastPosition {
  'BOTTOM',
  'BOTTOM_LEFT',
  'BOTTOM_RIGHT',
  'CENTER',
  'CENTER_LEFT',
  'CENTER_RIGHT',
  'TOP',
  'TOP_LEFT',
  'TOP_RIGHT',
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Position of the Toast.
   */
  position?: ToastPosition;

  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;

  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-child-animations":{"name":"nativescript-child-animations","version":"2.0.2","license":"Apache-2.0","readme":"

Nativescript Child Animations

\n

A small nativescript plugin that makes it easier to animate multiple child elements.

\n\n

Installation

\n

In your nativescript source directory, run:

\n
tns plugin add nativescript-child-animations
\n

This should add the child animations package to your package.json within your project ready for use.

\n

Usage

\n

This child animations package works by supplying a function with : a parent (container) view, an animation definition, a delay between animating each child view and optionally a 'reverse' boolean.

\n
    \n
  1. \n

    Import NativescriptChildAnimations module in the component that you'd like to use it in:

    \n
    import { animateChildren } from 'nativescript-child-animations';
    \n
    2. \n
  2. \n

    Call the animateChildren() function with params:

    \n
    animateChildren(parentView, animationDef, 70);
    \n
    3. \n
\n

Example

\n

example.component.html

\n
<FlexBoxLayout flexDirection=\"column\" id=\"parent\">
  <Label style=\"transform: translate(0, -800)\" text=\"I'm First!\"></Label>
  <Label style=\"transform: translate(0, -800)\" text=\"I'm Second!\"></Label>
  <Label style=\"transform: translate(0, -800)\" text=\"I'm Third!\"></Label>
</FlexBoxLayout>
\n

example.component.ts

\n
import { animateChildren } from 'nativescript-child-animations';
import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
import { AnimationDefinition } from 'tns-core-modules/ui/animation/animation';
import { AnimationCurve } from 'tns-core-modules/ui/enums';

@Component({
    selector: 'Home',
    moduleId: module.id,
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
    parentView: FlexboxLayout | StackLayout;
    animationDef: AnimationDefinition = {
        translate: { x: 0, y: 0 },
        duration: 1000,
        curve: AnimationCurve.easeOut
    }

    constructor(private page: Page) {}

    ngOnInit(): void {
        this.page.on('navigatedTo', () => {
            this.parentView = this.page.getViewById('parent');
            animateChildren(this.parentView, this.animationDef, 70, true);
        });
    }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-ns-7":{"name":"nativescript-social-share-ns-7","version":"11.6.0","license":"MIT","readme":"

NativeScript Social Share Plugin

\n

A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

\n

\"\"\n\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-social-share
\n

This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
\n

API

\n

shareImage(ImageSource image, [optional] String subject)

\n

The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

\n
// ------------ JavaScript ------------------
var SocialShare = require(\"nativescript-social-share\");
var imageSourceModule = require(\"image-source\");

var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);

// ------------- TypeScript ------------------
import * as SocialShare from \"nativescript-social-share\";
import { ImageSource } from \"image-source\";

let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
SocialShare.shareImage(image);
\n

You can optionally provide a second argument to configure the subject on Android:

\n
SocialShare.shareImage(image, \"How would you like to share this image?\");
\n

shareText(String text, [optional] String subject)

\n

The shareText() method expects a simple string:

\n
SocialShare.shareText(\"I love NativeScript!\");
\n

Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

\n
SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer-tweaked":{"name":"nativescript-accelerometer-tweaked","version":"2.0.6","license":"MIT","readme":"

NativeScript Accelerometer Plugin

\n

Accelerometer plugin for NativeScript with TYPE_LINEAR_ACCELERATION

\n

Installation

\n
tns plugin add nativescript-accelerometer-tweaked
\n

This plugin is based on the original accelerometer plugin except rather than listening to only TYPE_ACCELEROMETER, it listens to the following sensors:\n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

\n

Usage

\n
var accelerometer = require(\"nativescript-accelerometer-tweaked\");

accelerometer.startAccelerometerUpdates(function(data) {
    console.log(\" X: \" + data.x + \" Y: \" + data.y + \" Z: \" + data.z + \" Sensor Type: \" + data.sensortype + \" Time in milliseconds : \" + data.timemilli);
}, { sensorDelay: \"ui\" });
\n

Expected Values

\n\n

Options

\n

You can control how often the callback will be called by setting the sensorDelay option. The values are:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-webview":{"name":"nativescript-simple-webview","version":"1.1.5","license":"MIT","readme":"

NativeScript Simple Webview Plugin

\n

A simple plugin for providing webview functionality to your NativeScript app, with the added ability to programmatically close the webview (in iOS).

\n

Installation

\n
tns plugin add nativescript-simple-webview
\n

Usage

\n

Unlike other nativescript webview plugins the simple webview plugin exposes a SimpleWebView interface with a single instance method named close().

\n
import { openUrl } from 'nativescript-simple-webview';

const webview = openUrl({
    url: 'http://www.google.com',
});

webview.close();
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal-updated":{"name":"nativescript-windowed-modal-updated","version":"76.0.0","license":"Apache-2.0","readme":"

Nativescript Windowed Modal \"apple\" \"android\"

\n

\"npm\n\"npm\n\"Build

\n

This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

\n

NativeScript 5.x only, for older NS versions use 1.0.3 instead.

\n

Installation

\n
tns plugin add nativescript-windowed-modal
\n

Usage

\n

Code

\n

Call the overrideModalViewMethod() once before starting the app and register the layout element:

\n

Javascript

\n
var windowedModal = require(\"nativescript-windowed-modal\")
windowedModal.overrideModalViewMethod()
\n

Typescript+Angular

\n
import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
registerElement(\"ModalStack\", () => ModalStack)
\n

You can pass extended options like this:

\n
mainPage.showModal(\"./modal\", {
  context: \"I'm the context\",
  closeCallback: (response: string) => console.log(\"Modal response: \" + response),
  dimAmount: 0.5 // Sets the alpha of the background dim
} as ExtendedShowModalOptions)
\n

NativeScript-Vue

\n
// main.js
import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
Vue.registerElement(\"ModalStack\", () => ModalStack)
Vue.use(VueWindowedModal)
\n

You can pass extended options like this:

\n
<script type=\"text/javascript\">
  export default {
    methods: {
      openModalTap() {
        this.$showModal(\"./modal\", {
          props: {},
          fullscreen: false,
          animated: true,
          stretched: false,
          dimAmount: 0.5 // Sets the alpha of the background dim,
        })
      }
    }
  }
</script>
\n

Properties

\n

ExtendedShowModalOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
\n

ModalStack

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
verticalPositionstringbothmiddleUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
horizontalPositionstringbothcenterUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
\n

Layout

\n

Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
    <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
        <StackLayout class=\"modal\">
            <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
        </StackLayout>
    </modal:ModalStack>
</Page>
\n

HTML (Angular)

\n
<ModalStack dismissEnabled=\"true\" class=\"modal-container\">
  <StackLayout class=\"modal\">
    <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
  </StackLayout>
</ModalStack>
\n

Style

\n

You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

\n
.modal {
  margin: 20;
  margin-top: 35;
  border-radius: 8;
  horizontal-align: center;
  vertical-align: middle;
  background-color: white;
}

.modal-container {
  padding: 25;
  padding-bottom: 10;
}
\n

Running the demo app

\n
    \n
  1. Clone this repo
    2. \n
  2. cd src
    3. \n
  3. npm install && npm run plugin.prepare
    4. \n
  4. npm run demo.android or npm run demo.ios
    5. \n
\n

Changelog

\n

v5.0.6

\n\n

Known Issues

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-tour-updated":{"name":"nativescript-app-tour-updated","version":"2.0.2","license":"Apache-2.0","readme":"

\n NativeScript App Tour

\n\n\n

\n
\n

Note: This Plugin based on MaterialShowcase for IOS and TapTargetView for Android .

\n
\n

Installation

\n
tns plugin add nativescript-app-tour-updated
\n

Usage

\n
<Label id=\"feat1\" text=\"Feature 1\"></Label>
<Label id=\"feat2\" text=\"Feature 2\"></Label>
<Button text=\"start\" tap=\"{{ startTour }}\"></Button>
\n
startTour(){

    const stops: TourStop[] = [
        {
            view: this.page.getViewById(\"feat1\"),
            title: 'Feature 1',
            description: \"Feature 1 Description\",
            dismissable: true
        },
        {
            view: this.page.getViewById(\"feat2\"),
            title: 'Feature 2',
            description: 'Feature 2 Description',
            outerCircleColor: 'orange',
            rippleColor: 'black'
        }
    ];

    const handlers: TourEvents = {
        finish() {
            console.log('Tour finished');
        },
        onStep(lastStopIndex) {
            console.log('User stepped', lastStopIndex);
        },
        onCancel(lastStopIndex) {
            console.log('User cancelled', lastStopIndex);
        }
    }

    this.tour = new AppTour(stops, handlers);
    this.tour.show();
}
\n

see the demo project for more info.

\n

Angular

\n

also in angular you can get a refrence to the target view using @ViewChild decorator as next

\n
<Label #feat1 text=\"Feature 1\"></Label>
<Label #feat2 text=\"Feature 2\"></Label>
<Button text=\"start\" tap=\"{{ startTour }}\"></Button>
\n
@ViewChild('feat1') feat1: ElementRef;
@ViewChild('feat2') feat2: ElementRef;

startTour(){

    const stops: TourStop[] = [
        {
            view: this.feat1.nativeElement,
            title: 'Feature 1',
            description: \"Feature 1 Description\",
            dismissable: true
        },
        {
            view: this.feat2.nativeElement,
            title: 'Feature 2',
            description: 'Feature 2 Description',
            outerCircleColor: 'orange',
            rippleColor: 'black'
        }
    ];

    const handlers: TourEvents = {
        finish() {
            console.log('Tour finished');
        },
        onStep(lastStopIndex) {
            console.log('User stepped', lastStopIndex);
        },
        onCancel(lastStopIndex) {
            console.log('User cancelled', lastStopIndex);
        }
    }

    this.tour = new AppTour(stops, handlers);
    this.tour.show();
}
\n

API

\n

TourStop

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptiontypedefault
view (required)nativescript view refViewnone
titlestop titlestringtitle
titleTextSizetitle Text Sizenumber25
titleTextColortitle Text Colorstringwhite
descriptionstop descriptionstringdescription
descriptionTextSizedescription Text Sizenumber20
descriptionTextColordescription Text Colorstringwhite
outerCircleOpacityouter Circle background opacitynumber0.96
outerCircleColorouter Circle background Colorstringblack
innerCircleColorcircle around target view background Colorstringwhite
rippleColor (ios only)target Circle ripple Colorstringwhite
innerCircleRadiuscircle around target view raduisnumber50
dismissablecan the tour canceled by taping outside of target viewbooleanfalse
\n

AppTour

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
constructorAppTour(stops)
show()start the tour
reset()reset the tour to play it again
\n

Tour Events

\n

This plugin has 3 events,\nfinish(): void => triggered once the tour finishes\nonStep(lastStepIndex): void => triggered once per step when target is tapped\nonCancel(lastStepIndex): void => triggered once when user dismisses the tour by tapping outside in a dismissable tour

\n

Defaults

\n
\n

Note: If you use the same configs (colors, sizes,..etc) in all stops customize the defaults instead using AppTour defaults property which is basicly a TourStop :+1: .

\n
\n

Next

\n\n

Contribute

\n

if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features.

\n

Contact

\n

Twitter: hamdiwanis
\nEmail: hamdiwanis@hotmail.com

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animatecss":{"name":"nativescript-animatecss","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript-AnimateCSS

\n

NativeScript plugin for Android to mimic Animate.CSS animations on Android views.

\n

This plugin uses AndroidViewAnimations by daimajia

\n

AnimateCSS Usage

\n

\"TwitterBang\"

\n

Installation

\n

npm install nativescript-animatecss

\n

Usage

\n

XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    <Page.actionBar>
    <ActionBar title=\"NativeScript-AnimateCss\" color=\"#fff\" backgroundColor=\"#03A9F4\" />
  </Page.actionBar>
    <ScrollView>
        <StackLayout>
            <button text=\"Animate Css FTW!\" tap=\"animateIt\" />
            <image src=\"~/images/yoda.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"flashIt\" />
            <image src=\"~/images/batman.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"rotateIn\" />
            <image src=\"~/images/excellent.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"rubberBand\" />
        </StackLayout> 
    </ScrollView>
</Page>
\n

JS:

\n
var animatecss = require(\"nativescript-animatecss\");

function animateIt(args) {
    // get the native android widget for the view
    var nativeView = args.object.android;
    animatecss.animate({ view: nativeView, cssClass: 'Hinge', duration: 600 }).then(function (result) {
        console.log(result);
    }, function (err) {
        console.log(err);
    });
}
exports.animateIt = animateIt;
\n

API

\n\n

Effects

\n

Attention

\n

Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave

\n

Special

\n

Hinge, RollIn, RollOut,Landing,TakingOff,DropOut

\n

Bounce

\n

BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp

\n

Fade

\n

FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight

\n

FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp

\n

Flip

\n

FlipInX, FlipOutX, FlipOutY

\n

Rotate

\n

RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight

\n

RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight

\n

Slide

\n

SlideInLeft, SlideInRight, SlideInUp, SlideInDown

\n

SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown

\n

Zoom

\n

ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp

\n

ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas-interface":{"name":"nativescript-canvas-interface","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-canvas-interface/blob/master/LICENSE"},"readme":"

Nativescript-Canvas-Interface

\n

Nativescript Plugin to perform image manipulation using web-view canvas for Android/iOS.

\n

Installation

\n

From the terminal, go to your app's root folder and execute:

\n
tns plugin add nativescript-canvas-interface
\n

Once the plugin is installed, you need to copy plugin files for webView, into your webView content folder.\ne.g.

\n
cp -r node_modules/nativescript-canvas-interface/www/ app/www/lib/
\n

Usage

\n

For a quick start, you can check this Demo App and Blog Post

\n

Inside Native App

\n

Insert a web-view somewhere in your page. You can keep it hidden, if you don't want to show the image in web-view.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
....
<web-view id=\"webView\" src=\"~/www/index.html\" visibility=\"collapse\"></web-view>

<!-- Native Image View on which image manipulation is performed -->
<Image id=\"img\" src=\"~/road-nature.jpg\"/> 
....
</Page>
\n

Initialize Canvas Interface Plugin in your javascript file.

\n
var nsCanvasInterfaceModule = require('nativescript-canvas-interface');
var oNSCanvasInterface;
var imageView;

function pageLoaded(args){
    page = args.object;
    var webView = page.getViewById('webView');
    imageView = page.getViewById('img');
    initCanvasInterface(webView); 
}

function initCanvasInterface(webView: WebView) {
    oNSCanvasInterface = new nsCanvasInterfaceModule.NativescriptCanvasInterface(webView, 'canvasEle'); // 'canvasEle' is the value of \"id\" attribute of the canvas element in web-view
}
\n

Use any API Method of NativescriptCanvasInterface Class

\n
function setCanvasImage(){
    oNSCanvasInterface.setImage('setCanvasImage', imageView, args).then(function(result){
        // result.data contains any value returned from setCanvasImage function in web-view
    });
}

function createImage(){
    oNSCanvasInterface.createImage('setBrightness', args).then(function(result) {
        imageView.imageSource = result.image;
    });
}
\n

If you want to set/create image on load of the page, you need to call all such code once webView is loaded

\n
webView.on('loadFinished', (args) => {
    if (!args.error) {
        // call setImage/createImage
    }
});
\n

Inside WebView

\n

Import nativescript-webview-interface.js, nativescript-canvas-interface.js and es6-promise.min.js in your html page from the folder\nwhere you copied www files during installation.
\nAdd canvas element and give it an id.

\n
<html>
    <head></head>
    <body>
        <canvas id=\"canvasEle\"></canvas>
        <script src=\"path/to/es6-promise.min.js\"></script>
        <script src=\"path/to/nativescript-webview-interface.js\"></script>
        <script src=\"path/to/nativescript-canvas-interface.js\"></script>
        <script src=\"path/to/your-custom-script.js\"></script>        
    </body>
</html>
\n

Now, create instance of NSCanvasInterface using canvas element. Once the instance is created, we need to register the functions which will\nhandle requests from native app.

\n
function init() {
    var canvasEle = document.getElementById('canvasEle');
    var oCanvasInterface = new window.NSCanvasInterface(canvasEle);
    registerNSCanvasReqHandlers(oCanvasInterface);    
}

function registerNSCanvasReqHandlers(oCanvasInterface) {
    oCanvasInterface.canvasReqHandlers = {
        setCanvasImage: setCanvasImage,
        setBrightness: setBrightness
    };
}
 
function setCanvasImage(canvas, ctx, image){
    // set image to canvas or do anything you want.
    ctx.drawImage(image, 0, 0, 100, 100);
}

/**
 * Return promise or value or nothing. 
 * Once the promise is reslved or value is returned, the plugin will create an image 
 * from canvas context and pass it to native app.
 */ 
function setBrightness(canvas, ctx, value){
    return Promise(function(resolve, reject){
        // do image manipulation on canvas
        resolve();   
    });
}   
 
init();
\n

API

\n

Native App API

\n

Constructor

\n

NativescriptCanvasInterface(webView: WebView, canvasId: String)

\n

We need to create a new instance per web-view canvas element.

\n
Parameters
\n

webView: Nativescript web-view element.
\ncanvasId: Value of "id" attribute of web-view canvas element.

\n

Methods

\n

setImage(functionName: string, image: Image | ImageSource | string, args?: any[], format: string = 'png'): Promise<{data: any}>

\n

Call this method to send image from native app to web-view. The image is automatically converted\nfrom nativescript ImageView/ImageSource/imagePath to HTML Image element, and that HTML Image is served to the\nregistered function in web-view.

\n
Parameters
\n

functionName: Registered name of the function in web-view, to handle the image sent.
\nimage: Image to send to web-view. Image can be a Nativescript ImageView or ImageSource or a valid Image Path.
\nargs: (Optional) Any extra argument to pass to function in web-view.
\nformat: (Optional) Format in which we want to send the image to web-view. Possible formats are jpeg or png. Default value is png.
\nreturns: Promise with any data returned from the function in web-view.

\n

createImage(functionName: string, args?: any[], format: string = 'png'): Promise<{image: ImageSource, data: any}>

\n

Call this method to execute function in web-view, which performs canvas manipulation, and get the manipulated image back.

\n
Parameters
\n

functionName: Function to be executed in web-view, to create image from canvas.
\nargs: Any extra argument to pass to function in web-view.
\nformat: Expected image format from canvas in web-view. Possible formats are jpeg or png. Default value is png.
\nreturns: Promise with nativescript ImageSource and any data returned from the function in web-view.

\n

WebView API (window.NSCanvasInterface Class)

\n

Constructor

\n

NSCanvasInterface(canvas: HTMLCanvasElement)

\n

Create new instance per canvas element.

\n

Property

\n

canvasReqHandlers: { [fnName: string]: (...args) => Promise | any }

\n

Register all the functions which handles requests from native app for canvas manipulation.

\n
Signature of function which handles setImage API call from native app.
\n
function setCanvasImage(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, image: HTMLImageElement, ...arg: any[]){
    // return nothing or some value or promise
}
\n
Signature of function which handles createImage API call from native app.
\n
function doSomeCanvasManip(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ...arg: any[]){
    // return nothing or some value or promise
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adobe-experience-cloud":{"name":"nativescript-adobe-experience-cloud","version":"2.0.0","license":"MIT","readme":"

Nativescript plugin for Adobe Experience Cloud Solution

\n

\"npm

\n
npm install nativescript-adobe-experience-cloud --save
\n

This plugin is based on Nativescript 7 and Adobe Experience Platform solution

\n

https://github.com/Adobe-Marketing-Cloud/acp-sdks/releases\nGet the Adobe Experience Platform SDK https://aep-sdks.gitbook.io/docs/getting-started/get-the-sdk

\n

Setting up the application for usage with this plugin.

\n

Setup config.ts

\n

Create a configuration file and place your ENVIRONMENT_ID from Adobe Experience platform.

\n
import { AdobeAnalyticsSettings } from \"nativescript-adobe-experience-cloud\";

export const adobeExperienceSettings: AdobeAnalyticsSettings = {
    environmentId: 'Put your environment id here.',
    debug: true
};
\n

Initialize SDK

\n

Android

\n
import { AdobeAnalytics } from 'nativescript-adobe-experience-cloud';
import { adobeExperienceSettings } from '~/config'; 

@NativeClass()
@JavaProxy('nl.essent.Application')
class Application extends android.app.Application {

    public onCreate(): void {
        super.onCreate();
        AdobeAnalytics.getInstance().initSdk(adobeExperienceSettings, this);
    }

    public attachBaseContext(baseContext: android.content.Context) {
        super.attachBaseContext(baseContext);
    }
}
\n

IOS

\n
import { AdobeAnalytics } from 'nativescript-adobe-experience-cloud';
import { adobeExperienceSettings } from '~/config'; 

@NativeClass()
class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {
        AdobeAnalytics.getInstance().initSdk(adobeExperienceSettings, application);
        return true;
     }
 }
    ios.delegate = MyDelegate;
\n

NOTE This plugin provides only initial set of extensions registered with Adobe Experience platform. For any additional extension fork this plugin and configure based on Mobile Property installation instructions.

\n

Enable lifecycle tracking

\n

Android

\n

With onResume function start Lifecycle data collection:

\n
import {AdobeAnalytics} from \"nativescript-adobe-experience-cloud\";

public onResume() : void {
        AdobeAnalytics.getInstance().resumeCollectingLifecycleData();
        super.onResume();
    }
}
\n

Use onPause function to pause collection Lifecycle data:

\n
public onPause() : void {
        AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
        super.onPause();
    }
\n

IOS

\n

Start collection Lifecycle data is part of plugin implementation called during initialization of SDK.

\n

When application is resuming from background state, you need to resume collection of Lifecycle data:

\n
applicationWillEnterForeground(application: UIApplication){
    AdobeAnalytics.getInstance().resumeCollectingLifecycleData();
 }
\n

When the app enters the background, pause collecting Lifecycle data:

\n
applicationDidEnterBackground(application: UIApplication): void {
    AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
}
\n

Track states and actions

\n

States and actions can be traced through method calls that match their native counterparts signature.

\n

Privacy options

\n

See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/privacy.html

\n

Select a privacy option:

\n

Send Data Until Opt-Out

\n
AdobeAnalytics.getInstance().optIn();
\n

Hold Data Until Opt-In

\n
AdobeAnalytics.getInstance().optOut();
\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n
    \n
  1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
    2. \n
  2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
    3. \n
\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario, you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above-mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the src folder in order to use native APIs:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

\n\n

Sometimes you just need to wipe out the demo's platforms directory only:

\n\n

Sometimes you may need to ensure plugin files are updated in the demo:

\n\n

Unittesting

\n

The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API go to src folder and execute one of these commands:

\n
npm run test.ios
npm run test.android
\n

Publish to NPM

\n

When you have everything ready to publish:

\n\n

If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

\n

NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

\n

TravisCI

\n

The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

\n

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

\n

Referring tns-core-modules in the Plugin

\n

We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

\n

Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

\n

WRONG

\n

tsconfig.json

\n
...

\"paths\": {
  \"*\": [
    \"./node_modules/*\",
    \"./node_modules/tns-core-modules/*\"
  ]
}
...
\n

yourplugin.common.ts

\n
import * as app from 'application';
\n

RIGHT

\n

yourplugin.common.ts

\n
import * as app from 'tns-core-modules/application';
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer-advanced":{"name":"nativescript-accelerometer-advanced","version":"2.0.8","license":"MIT","readme":"

NativeScript Accelerometer Plugin

\n

Accelerometer plugin for NativeScript that uses the following sensors:
\n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

\n

Installation

\n
tns plugin add nativescript-accelerometer-advanced
\n

This plugin is based on the original accelerometer plugin except rather than listening to only TYPE_ACCELEROMETER, it listens to the following sensors:\n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

\n

Usage

\n
var accelerometer = require(\"nativescript-accelerometer-advanced\");

accelerometer.startAccelerometerUpdates(function(data) {
    console.log(\" X: \" + data.x + \" Y: \" + data.y + \" Z: \" + data.z + \" Sensor Type: \" + data.sensortype + \" Time in milliseconds : \" + data.timemilli);
}, { sensorDelay: \"ui\" });
\n

Expected Values

\n\n

Options

\n

You can control how often the callback will be called by setting the sensorDelay option. The values are:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@juit/nativescript-local-notifications":{"name":"@juit/nativescript-local-notifications","version":"1.2.0","license":"Apache-2.0","readme":"

Minimalistic Local Notifications for NativeScript 7

\n

This package implements a minimalistic helper to schedule and cancel local\nnotifications on iOS and Android.

\n\n

Usage

\n

The local notifications plugin should be easily instantiated by simply calling\nits constructor

\n
import { LocalNotifications } from '@juit/nativescript-local-notifications'

const localNotifications = new LocalNotifications({
  androidIcon: 'icon_notification',
  androidColor: 0x0FF0000,
})
\n

Scheduling notifications

\n

A local notification can be scheduled using the schedule(...) method with\na LocalNotificationRequest and a Date or the number of seconds to wait\nbefore displaying the notification:

\n
const notificationId = await localNotifications.schedule({
  title: 'The title',
  message: 'The message for the notification...',
  data: {
    // Optional, this is a payload that will be
    // returned when the notification is opened
  }
}, 10) // schedule in 10 seconds...
\n

The schedule(...) method will return a Promise which will resolve to the\nstring id of the scheduled notification.

\n

Canceling a scheduled notification

\n

A scheduled notification can be canceled (and therefore will no longer be\npresented to the user) by using the cancel(...) method:

\n
localNotifications.cancel(notificationId)
\n

Subscribing to notifications

\n

When a notification is opened by a user, the notification event will be\nemitted by the LocalNotifications instance. The usual on(...), once(...)\nand off(...) methods are available to manage subscription:

\n
localNotifications.on('notification', (notification) => {
  console.log('Notification opened', notification)
})

// Notification opened: {
//   id: '0ecfd51b-6e83-46a9-8b6d-61632bf91db3',
//   title: 'The title',
//   message: 'The message for the notification...',
//   data: { ... }
// }
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-websocket":{"name":"@yoonit/nativescript-websocket","version":"1.1.3","license":"MIT","readme":"

NativeScript Yoonit Camera

\n

\n\t\n\t\n\t\n\t\n\t\n\t\n

\n

Build modern apps using NativeScript and WebSocket in Android and iOS\n

\n\n
\n\t

Sponsors

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
\n\t\t\t\t\tPlatinum\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t
Become a sponsor!
\n
\n

Installation

\n
npm i -s @yoonit/nativescript-websocket
\n

Usage

\n

All the functionalities that the @yoonit/nativescript-websocket provides is accessed through the YoonitWebSocket object. Below we have the basic usage code, for more details, your can see the Methods or the Demo Vue.

\n

VueJS Plugin

\n

main.js

\n
import Vue from 'nativescript-vue'
import YoonitWebSocket from '@yoonit/nativescript-websocket/vue'

Vue.use(
  YoonitWebSocket,
  'wss://echo.websocket.org/',
  {
    protocol: '',
    timeout: 1000,
    headers: [],
    reconnect: true,
    delay: 1000,
    debug: false,
    proxy: {
      address: '',
      port: ''
    }
  }
)
\n

After that, you can access the socket object in your entire project using this.$yoo.socket

\n

Angular, React, Svelte or any other framework

\n

Currently we can't offer any other integration with other frameworks that works on top of NativeScript beyond VueJS, you are totaly open to create and send to us a PR. But, this is a pure NativeScript plugin, if you know how to manipulate your preferred platform you will be capable to include it in your project.

\n

Vue Component

\n

Declaring events using an Yoonit-Style

\n

App.vue

\n
<template>
  <Page @loaded=\"doLoaded\"></Page>
</template>

<script>
export default {
  data: () => ({
    interval: null
  }),
  methods: {
    doLoaded () {
      // start the connection
      this.$yoo.socket.open()
    },
    doPing () {
      this.interval = setInterval(() => {
        if (!this.$yoo.socket.getStatus()) {
          return console.log('[YooSocket] Socket closed')
        }

        console.log(\"[YooSocket] Sending 'echo' message!\")

        // add your message/file to queue and call 'send' method
        return this.$yoo.socket.push('echo')
      }, 2000)
    }
  },
  yoo: {
    socket: {
      events: {
        open ($socket) {
          console.log(\"[YooSocket] Hey! I'm connected!\")

          clearInterval(this.interval)
          return this.doPing()
        },
        message ($socket, message) {
          if (!message) {
            console.log(\"[YooSocket] Message is empty\")
          }

          console.log(`[YooSocket] Received Message: '${message}'!`)
        },
        close () {
          console.log(\"[YooSocket] Socket was closed\")
        },
        error () {
          console.log(\"[YooSocket] Socket had an error\")
        }
      }
    }
  }
}
</script>
\n

Or declaring events using your own already created methods

\n

App.vue

\n
<template>
  <Page @loaded=\"doLoaded\"></Page>
</template>

<script>
export default {
  data: () => ({
    interval: null
  }),
  methods: {
    doLoaded () {
      // start the connection
      this.$yoo.socket.open()

      // declare all callback events
      this.$yoo.socket.events({
        open: this.doSocketOpen,
        message: this.doReceivedMessage,
        close: this.doSocketClose,
        error: this.doSocketError
      })
    },

    doPing () {
      this.interval = setInterval(() => {
        if (!this.$yoo.socket.getStatus()) {
          return console.log('[YooSocket] Socket closed')
        }

        console.log(\"[YooSocket] Sending 'echo' message!\")

        // add your message/file to queue and call 'send' method
        return this.$yoo.socket.push('echo')
      }, 2000)
    },

    doSocketOpen ($socket) {
      console.log(\"[YooSocket] Hey! I'm connected!\")

      clearInterval(this.interval)

      // onOpen event calls your function
      return this.doPing()
    },

    doSocketClose () {
      // onClose event
      return console.log('[YooSocket] Socket was closed')
    },

    doSocketError () {
      // onError event
      return console.log('[YooSocket] Socket had an error')
    },

    doReceivedMessage ($socket, message) {
      // onMessage event
      return console.log(`[YooSocket] Received Message: '${message}'!`)
    },
  }
}
</script>
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionParametersValid valuesReturn TypeDescription
openAsynctimeoutany positive number, default 1000 (ms)voidWait timeout to start the connection
open--voidStart immediately the connection
onevent, callbackstring, functionvoidInclude an event, every that your server sent an event of this type, your callback will be invoked
offevent, callbackstring, functionvoidExclude an event
eventscallbacksobject with functions { open: [], close: [], message: [], error: [], fragment: [], handshake: [] }voidYou can use an Array of callbacks in each event. Use this to add a batch of events at once
getStatus--booleanYou can use this method to check the connection status
pushcontentstring/blobvoidSend files or strings to server. You can use this method to make uploads for example
destroy--voidDestroy server connection
closecode, messagenumber, stringvoidClose server connection programmatically offering an reason
queueLength--numberGet the total pending items to be sent
isOpen--booleanGet connection status
isClosed--booleanGet connection status
isClosing--booleanGet connection status
isConnecting--booleanGet connection status
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyReturn Type
protocolstring
timeoutnumber
headersarray
reconnectboolean
delaynumber
debugboolean
proxyobject
callbacksobject
urlstring
openedboolean
\n

To contribute and make it better

\n

Clone the repo, change what you want and send PR.\nFor commit messages we use Conventional Commits.

\n

Contributions are always welcome!

\n\n \n\n
\n

Code with ❤ by the Yoonit Team

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-systemui":{"name":"nativescript-systemui","version":"1.0.14","license":"MIT","readme":"

NativeScript System UI

\n

A NativeScript plugin to change System UI.

\n

IOS

\n

To show/hide the statusBar you need to have UIViewControllerBasedStatusBarAppearance set to false in your Info.plist

\n

Usage

\n
npm install nativescript-systemui --save
\n

If you are using version ^1.0.0 then we now use mixins

\n
import { installMixins } from 'nativescript-systemui';
installMixins();
\n

Then new properties are added to the Page class

\n\n

For versions < 1.0.0

\n

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.

\n

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.

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

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

\n

\"status-bar-light\"

\n

Note The SystemUI 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.

\n

With Vue.js

\n

In your root app.js:

\n
import StatusBarPlugin from 'nativescript-systemui/vue';
Vue.use(StatusBarPlugin);
\n

In your component:

\n
<Page class=\"page\" actionBarHidden=\"true\" backgroundSpanUnderStatusBar=\"true\">
      <StatusBar barColor=\"#32475b\" />
      <NavigationBar barColor=\"#32475b\" />
<Page/>
\n

That's is.

\n

Development workflow

\n

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

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ui-persistent-bottomsheet":{"name":"@bigin/ui-persistent-bottomsheet","version":"0.0.14","license":"Apache-2.0","readme":"

NativeScript BottomSheet

\n

NativeScript plugin that allows you to easily add persistent bottomsheet to your projects.

\n

\"npm\"\n\"npm\n\"npm

\n
\n

Table of Contents

\n
    \n
  1. Installation
    2. \n
  2. Configuration
    3. \n
  3. API
    4. \n
  4. Usage in Angular
    5. \n
  5. Usage in Vue
    6. \n
  6. Usage in Svelte
    7. \n
  7. Usage in React
    8. \n
  8. Demos
    9. \n
\n

Installation

\n
ns plugin add @nativescript-community/ui-persistent-bottomsheet
\n

Configuration

\n

For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

\n
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
\n

API

\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeDescription
bottomSheetundefinedViewView containing the content for the bottomsheet
gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
stepIndex0numberthe index of current step (mutable)
steps[70]number[]the different available steps
backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameReturnDescription
install()voidInstall gestures
\n

Usage in Angular

\n

Import the module into your project.

\n
import { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";

@NgModule({
    imports: [
        PBSModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }
\n

Then in your component add the following:

\n
<BottomSheet>
    <StackLayout backgroundColor=\"white\">
      <Label text=\"This is the main content\"></Label>
    </StackLayout>
    <GridLayout bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\"></Label>
    </GridLayout>

   
</BottomSheet>
\n

For a more complete example, look in the demo-ng directory.

\n

Usage in Vue

\n

Register the plugin in your app.js.

\n
import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);
\n

Then in your component add the following:

\n
<BottomSheet>
    <StackLayout backgroundColor=\"white\">
      <Label text=\"This is the main content\" />
    </StackLayout>
    <GridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\" />
    </GridLayout>

</BottomSheet>
\n

For a more complete example, look in the demo-vue directory.

\n

Usage in Svelte

\n

Register the plugin in your app.ts.

\n
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();
\n

Then in your component, add the following:

\n
<bottomsheet>
    <stacklayout  backgroundColor=\"white\">
      <Label text=\"This is the main content\" />
    </stacklayout>
    <gridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\">
      <Label text=\"This is the side drawer content\" />
    </gridlayout>

</bottomsheet>
\n

For a more complete example, look in the demo-svelte directory.

\n

Usage in React

\n

Register the plugin in your app.ts.

\n
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();
\n

Then in your component, add the following:

\n
import { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"
\n
<BottomSheet>
  <stackLayout backgroundColor=\"white\">
    <label text=\"This is the main content\" />
  </stackLayout>
  <gridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\">
    <label text=\"This is the side drawer content\" />
  </gridLayout>

</BottomSheet>
\n

For a more complete example, look in the demo-react directory.

\n

Demos

\n

This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
$ cd ui-drawer
$ npm run i
$ npm run setup
$ npm run build && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-sqlite":{"name":"nativescript-akylas-sqlite","version":"3.0.5","license":"Apache-2.0","readme":"

Nativescript: Akylas Sqlite

\n

\"Build \"npm

\n

Installation

\n
tns plugin add nativescript-akylas-sqlite
\n

Usage

\n

You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

\n
import { openOrCreate, deleteDatabase } from \"nativescript-akylas-sqlite\";

const sqlite = openOrCreate(\"path/to/db\");
sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
sqlite.transaction(cancelTransaction => {
    // Calling cancelTransaction will rollback all changes made to db
    names.forEach((name, id) =>
        sqlite.execute(
            \"INSERT INTO names (id, name) VALUES (?, ?)\",
            [id, name]
        )
    );
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-acs-bluetooth":{"name":"nativescript-acs-bluetooth","version":"2.2.9","license":"Apache-2.0","readme":"

ACSBluetooth

\n

An Android module for native script that can be used for scanning for and connecting to ACS Bluetooth card readers

\n

Installation

\n
tns plugin add nativescript-acs-bluetooth
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-template-compiler":{"name":"nativescript-vue-template-compiler","version":"2.9.3","license":"MIT","readme":"

nativescript-vue-template-compiler

\n
\n

This package is auto-generated from platform/nativescript/compiler

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-account-kit":{"name":"nativescript-facebook-account-kit","version":"1.3.1","license":"Apache-2.0","readme":"

Facebook Account Kit plugin for NativeScript (Unofficial)

\n

This plugin is a wrapper in {N} around the native facebook's Account Kit's iOS and Android plugins.

\n

Refer to facebook's docs to understand how Account Kit works and how to set it up on Facebook's developer portal.

\n

Installation

\n
tns plugin add nativescript-facebook-account-kit
\n

iOS

\n

On iOS, Add the following to your Info.plist found under /app/App_Resources/iOS somewhere inside <dict />

\n
    <key>FacebookAppID</key>
\t<string><!--Your app id from developer portal--></string>
\t<key>AccountKitClientToken</key>
\t<string><!--Client token from dev portal--></string>
\t<key>CFBundleURLTypes</key>
\t<array>
\t\t<dict>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
\t\t\t\t<string>ak<!--Your app id from developer portal--></string>
\t\t\t</array>
\t\t</dict>
\t</array>
\n

Android

\n

On Android, Add the following to AndroidManifest.xml inside the <application> tag.

\n
\t<meta-data android:name=\"com.facebook.accountkit.ApplicationName\"
\t\t\t\tandroid:value=\"@string/app_name\" />
\t<meta-data android:name=\"com.facebook.sdk.ApplicationId\"
\t\t\tandroid:value=\"@string/FACEBOOK_APP_ID\" />
\t<meta-data android:name=\"com.facebook.accountkit.ClientToken\"
\t\t\tandroid:value=\"@string/ACCOUNT_KIT_CLIENT_TOKEN\" />

\t<activity android:name=\"com.facebook.accountkit.ui.AccountKitActivity\" >
\t\t<intent-filter>
\t\t\t\t<action android:name=\"android.intent.action.VIEW\" />
\t\t\t<category android:name=\"android.intent.category.DEFAULT\" />
\t\t\t<category android:name=\"android.intent.category.BROWSABLE\" />
\t\t\t<data android:scheme=\"ak<Your Facebook app id>\" />
\t\t</intent-filter>
\t</activity>
\n

Add the following as your strings.xml file under app/App_Resources/Android/src/main/res/values/strings.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <string name=\"app_name\">Your App Name </string>
    <string name=\"title_activity_kimera\">Your App name</string>
    <string name=\"FACEBOOK_APP_ID\">FACEBOOK_APP_ID</string>
    <string name=\"ACCOUNT_KIT_CLIENT_TOKEN\">ACCOUNT_KIT_CLIENT_TOKEM</string>
</resources>
\n

Account Kit and Google Play Services Version

\n

The plugin will default to this version of the Android play-services-auth SDK and account-kit-sdk SDK.\nIf you need to change the versions (to for instance the latest version), you can add project ext properties googlePlayServicesVersion and accountKitVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
   googlePlayServicesVersion = \"+\"
   accountKitVersion = \"+\"
}
\n

Usage

\n

Initialize the plugin with the response type you seek either AuthorizationCode or AccessToken

\n
import { FacebookAccountKit, AccountKitResponseType } from 'nativescript-facebook-account-kit';
const facebookAccountKit = new FacebookAccountKit(AccountKitResponseType.AuthorizationCode);
\n
import { Color } from \"tns-core-modules/color\";

const options : AccountKitOptions = {
      prefillPhoneNumber : \"9XXXX12345\", 
      prefillCountryCode : \"91\",
      defaultCountryCode : \"IN\",
      whitelistedCountryCodes : [\"IN\"],
      blacklistedCountryCodes : [],
      enableGetACall : true,
      presentAnimated : false,
\t  enableSendToFacebook : true,
\t  primaryColor : new Color(\"orange\")
    };
    this.facebookAccountKit.loginWithPhoneNumber(options).then(authCode => {
      this.authCode = authCode;
      console.log(authCode);
    }, error => {
      this.authCode = error.message;
      console.error(error);
    });
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescriptionReturn type
loginWithPhoneNumberUse account kit login flow with lot of options.A promise that resolves to either authorization code or access token.
loginWithEmailUse account kit email flow.A promise that resolves to either authorization code or access token.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ad-support":{"name":"nativescript-ad-support","version":"1.0.2","license":"Apache-2.0","readme":"

nativescript-ad-support

\n

This adds the iOS AdSupport framework to your Nativescript app for use with Firebase and campaign attribution (IDFA).

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-ad-support
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swiper":{"name":"nativescript-swiper","version":"0.1.0","license":"MIT","readme":"

nativescript-swiper

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin for slide functionality on ios platform,based on ios native UIScrollView,quick response and high availability

\n

Why not android

\n

As you know,slide functionality can made by "viewPager" component in native android devolop.And nativescript "TabView" component in android platform is a combination of a TabLayout widget and a ViewPager widget.So we can use nativescript "TabView" component as a slide by remove the title tab :tabview._tabLayout.setVisibility(android.view.View.GONE);

\n

There is a discuss about this question: TabView without the tabs

\n

Screenshot:

\n

\n

Installation

\n

tns plugin add nativescript-swiper

\n

Usage

\n

xmlns:Swiper="nativescript-swiper"

\n

Example Usage:

\n

XML

\n

\t<Swiper:SwiperContainer 
            id=\"swiper-container\"
            change=\"onChanged\" 
            cancell=\"onCancelled\" 
            start=\"onStart\" 
            finish=\"onFinished\">
        <Swiper:SwiperWrapper id=\"swiper-wrapper\">
            <Swiper:SwiperSlide class=\"bg-blue\" height=\"100%\"  verticalAlignment=\"center\">
                <Label text=\"Panel 1\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
            </Swiper:SwiperSlide>
            <Swiper:SwiperSlide class=\"bg-green\" height=\"100%\"  verticalAlignment=\"center\">
                <Label text=\"Panel 2\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
            </Swiper:SwiperSlide>
            <Swiper:SwiperSlide class=\"bg-red\" height=\"100%\"  verticalAlignment=\"center\">
                <Label text=\"Panel 3\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
            </Swiper:SwiperSlide>
        </Swiper:SwiperWrapper>
    </Swiper:SwiperContainer>
\n

Methods for SwiperContainer

\n\n

Attributes for SwiperContainer

\n\n

Events and EventData

\n\n

work with Repeater

\n

nativescript-swiper can easily work with Repeater

\n

\t<Swiper:SwiperContainer >
              <Repeater items=\"{{ items }}\">
                  <Repeater.itemsLayout>
                      <Swiper:SwiperWrapper />
                  </Repeater.itemsLayout>
                  <Repeater.itemTemplate>
                      <Swiper:SwiperSlide height=\"100%\" verticalAlignment=\"center\">
                          <Label text=\"{{ 'Panel in Repeater ' + ($value + 1) }}\" color=\"#000\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
                      </Swiper:SwiperSlide>
                  </Repeater.itemTemplate>
              </Repeater>
          </Swiper:SwiperContainer>
\n

\tvar Observable = require(\"data/observable\").Observable;
\t
\tvar source = new Observable();
    var items = [];
    for(var i = 0;i < 10;i++){
        items.push(i);
    }
    source.set(\"items\", items);
    page.bindingContext = source;
\n

Add or Remove slides dynamically

\n

Only need to add/remove SwiperSlide item to the SwiperWrapper in any time you want

\n

\tvar platformModule = require(\"platform\");
\tvar swiperWrapper = page.getViewById(\"swiper-wrapper\");
\t
\tvar SwiperSlide = require(\"nativescript-swiper\").SwiperSlide;
    var newSwiperSlideItem = new SwiperSlide();
    newSwiperSlideItem.height = \"100%\";
    newSwiperSlideItem.backgroundColor = \"#000\";
    newSwiperSlideItem.verticalAlignment = \"center\";
    var LabelModule = require(\"ui/label\");
    var label = new LabelModule.Label();
    label.text = \"this is a new SwiperSlide item,tap to remove it\";
    label.color = \"#fff\";
    label.verticalAlignment = \"center\";
    label.horizontalAlignment = \"center\";
    newSwiperSlideItem.addChild(label);
    
    swiperWrapper.addChild(newSwiperSlideItem);
    label.on('tap',function(args){
        swiperWrapper.removeChild(newSwiperSlideItem);
    });
\n

Handles application orientation change

\n

when application orientation changed,the slides shold change it's width to fill the screen

\n

add this code into page navigatedTo event

\n

\tvar app = require('application');
\tvar swiperContainer = page.getViewById(\"swiper-container\");
\tvar swiperWrapper = page.getViewById(\"swiper-wrapper\");
\tapp.on(app.orientationChangedEvent, function (args) {
        setTimeout(function() {
            swiperWrapper.eachLayoutChild(function(slide){
                slide.width = platformModule.screen.mainScreen.widthDIPs;
                swiperContainer.refresh();
            })
        }, 10);
    })
\t
\n

Imperfect currently,will iterative soon,welcome contributors and issues

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-native-object-pool":{"name":"nativescript-native-object-pool","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-native-object-pool \"apple\" & \"android\"

\n

This is a tiny NativeScript's plugin to share objects references between threads (main and Workers)

\n

Installation

\n

Copy and paste the code below to add this plugin into your app:

\n
tns plugin add nativescript-native-object-pool
\n

Usage

\n

All methods are statics. Just copy the import statament below and invoke the desire method.

\n
import { NativeObjectPool } from \"nativescript-native-object-pool\";
\n

API

\n
class NativeObjectPool {
    static add(key: string, value: any): boolean;
    static get(key: string): any;
    static remove(key: string): boolean;
    static removeAll(): void;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-webpack":{"name":"nativescript-dev-webpack","version":"1.5.1","license":"Apache-2.0","readme":"

NativeScript Webpack

\n

This repository contains the code for the nativescript-dev-webpack plugin which helps in webpacking NativeScript apps.

\n

JavaScript code and general asset bundling have been a member of the web developer toolbox for a long time. Tools like Webpack have been providing support for an enjoyable development experience that lets you assemble client-side code from various module sources and formats and then package it together. Most importantly, they allow for page load time optimizations that reduce or parallelize the number of requests a browser makes to the server.

\n

Why bundle scripts in a mobile app though?

\n\n

For more details, see the NativeScript docs for building with webpack.

\n\n\n\n

Ingredients

\n\n

Usage

\n
$ npm install --save-dev nativescript-dev-webpack

$ tns run android
or
$ tns run ios
\n

Contribute

\n

We love PRs! Check out the contributing guidelines and instructions for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-socketio":{"name":"@triniwiz/nativescript-socketio","version":"4.0.3","license":"Apache-2.0","readme":"

Nativescript nativescript-socketio

\n
ns plugin add @triniwiz/nativescript-socketio
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intl":{"name":"nativescript-intl","version":"4.0.2","readme":"

Welcome to the nativescript-intl plugin for NativeScript framework

\n

Prerequisites

\n\n

Install nativescript-intl plugin.

\n

Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-intl.

\n

This plugin provides similar to Intl.js API for date, time and number formatting on a mobile device (Android and iOS).

\n

How to use

\n
var intl = require(\"nativescript-intl\");
var dateFormat = new intl.DateTimeFormat('en-US', {'year': 'numeric', 'month': 'short', 'day': 'numeric'}).format(new Date(2016, 2, 23));
var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}).format(123456.789);

console.log(\"dateFormat: \" + dateFormat);
console.log(\"numberFormat: \" + numberFormat);
// prints Mar 23, 2016
// $123456.79
\n

Since localization formatting is not exactly same on Android, iOS and Intl.js there is another option to use this API.

\n

Custom pattern

\n
var intl = require(\"nativescript-intl\");
var dateFormat = new intl.DateTimeFormat(null, null, 'y MMMM d, EEEE HH:mm:ss').format(new Date(2016, 2, 23, 12, 35, 40));
var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}, '#,##0.00 ¤').format(123456.789);

console.log(\"dateFormat: \" + dateFormat);
console.log(\"numberFormat: \" + numberFormat);
// prints 2016 March 23, Wednesday 2016 12:35:40
// 123,456.79 $
\n
\n

Omitting locale will use the current locale setting on device.

\n
\n
\n

Keep in mind that ICU versions differ accross device OS versions, so this plugin could produce different results on a different API level (Android) and OS version (iOS).

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-sdk":{"name":"nativescript-zendesk-sdk","version":"0.2.0","license":"MIT","readme":"

nativescript-zendesk-sdk

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin implementing the basic Zendesk SDK in TypeScript.\nIt is inspired from nativescript-zendesk

\n

Install

\n
tns plugin add nativescript-zendesk-sdk
\n

Usage

\n

Following Zendesk Embeddables Documentation:

\n

[Must do] Configure an app in Zendesk Support

\n

Support SDK for Android / iOS

\n

[Must do] Initialize the SDK

\n

Support SDK for Android / iOS

\n
export interface InitConfig {
    applicationId: string;
    zendeskUrl: string;
    clientId: string;
    userLocale?: string;
    coppaEnabled?: boolean;
    /** AnonUserIdentity object or JWT Token string */
    identity?: AnonUserIdentity | string;
}
\n
import { ZendeskSdk } from \"nativescript-zendesk-sdk\";
...
const initConfig = {
    ...
}
ZendeskSdk.initialize(initConfig);
\n

If identity: null a new anonymous identity is created, but if identity is undefined it must be set later, but before launching any Zendesk views/activities.

\n

Note: applicationId, zendeskUrl, and clientId must be specified when initializing the Zendesk, but locale, COPPA-compliance mode, and Identity can be set/changed later.

\n

[Must do] Set an identity (authentication)

\n

Support SDK for Android / iOS

\n
Authenticate using an anonymous identity
\n
ZendeskSdk.setAnonymousIdentity();
\n
Authenticate using an anonymous identity (with details)
\n
ZendeskSdk.setAnonymousIdentity({name: \"name\", email: \"email\"});
\n
Authenticate using your JWT endpoint
\n
ZendeskSdk.setJwtIdentity(\"jwtUserIdentifier\");
\n

Locale Settings

\n

Support SDK for Android / iOS

\n

The locale used by the SDK for static strings will match the Android Application Configuration or the iOS NSUserDefaults.\n(These strings can be overridden or missing languages can be added as described in the links above).

\n

To set the Locale of any dynamic content retrieved from Zendesk:

\n
ZendeskSdk.setUserLocale(localeCode);
\n

Configure Requests

\n

Support SDK for Android / iOS

\n

Before opening the Help Center or creating a Rewuest you can specify the Request settings:

\n
\n

Show the Help Center

\n

Support SDK for Android / iOS

\n

Default Usage

\n
ZendeskSdk.showHelpCenter();
\n

Optional Parameters

\n
export interface HelpCenterOptions {
    /** Default: false */
    categoriesCollapsedAndroid?: boolean;
    /** Default: true */
    conversationsMenuAndroid?: boolean;
    /** Default: true */
    conversationsMenuIos?: boolean;
    /** Default: false */
    showAsModalForIos?: boolean;
}
\n
ZendeskSdk.showHelpCenter(options);
\n

Note: The SDKs for Android and iOS diverge quite a bit for this section, so some options are only applicable to iOS or Android. The defaults selected are those that provide the most consitency between both

\n
Both
\n
showConversationMenuButtonFor(Android/Ios) [default = true]
\n

Enables a button in the navigation bar that enables users to view their active requests/converations or start a new one.

\n
Android only
\n
showContactUsButtonForAndroid [default = false]
\n

This displays an additional (+) button in the lower-right corner, similar to the button in the Android templates.

\n

Enabled by default in the Android SDK, but disabled by default in this plugin for consitency with iOS.

\n
withCategoriesCollapsedForAndroid [default = false]
\n

This collapses the categories into their headers. The default behaviour on both Android and iOS is to show the first 5 of a category, and then has the option to expand further if more are available.

\n
iOS only
\n
showAsModalForIos [default = false]
\n

This displays the helpcenter as a modal action sheet.

\n

Filter the Help Center

\n

Support SDK for Android / iOS

\n

Per original SDKs, only one filter can be used at a time.

\n

Filter by category

\n
ZendeskSdk.showHelpCenterForCategoryIds(categoryIds, options);
\n

Filter by section

\n
ZendeskSdk.showHelpCenterForLabelNames(labelNames, options);
\n

Filter by article label

\n
ZendeskSdk.showHelpCenterForSectionIds(sectionIds, options);
\n

Create a request

\n
ZendeskSdk.createRequest();
\n

Styling

\n

Support SDK for Android / iOS

\n

Android

\n

Configured via app/App_Resources/Android/AndroidManifest.xml as detailed here.

\n

Simple Styling

\n

Zendesk offers 3 base themes that can be used or extended:

\n\n
Example extending PnpZendeskSdkTheme.DarkActionBar
\n

app/App_Resources/Android/AndroidManifest.xml

\n
    
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
    ...>
    <application
        ...>
        <activity android:name=\"com.zendesk.sdk.support.SupportActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.feedback.ui.ContactZendeskActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.support.ViewArticleActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.requests.RequestActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.requests.ViewRequestActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>
    </application>
</manifest>
\n

app/App_Resources/Android/values/styles.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
...
    <style name=\"PnpZendeskSdkTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
        <item name=\"colorPrimary\">@color/ns_primary</item>
        <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
        <item name=\"colorAccent\">@color/ns_accent</item>
        <item name=\"android:actionMenuTextColor\">@color/ns_blue</item>
    </style>
</resources>
\n
<style name=\"YourLightTheme\" parent=\"ZendeskSdkTheme.Light\">
...
</style>
<style name=\"YourDarkTheme\" parent=\"ZendeskSdkTheme.Dark\">
...
</style>
<style name=\"YourLightTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
...
</style>
\n

iOS

\n
import { isIOS } from 'tns-core-modules/platform';

...

if ( isIOS ) {
    UINavigationBar.appearance().tintColor = new Color('#00FFFF').ios;
    UINavigationBar.appearance().barTintColor = new Color('#FF00FF').ios;
    UINavigationBar.appearance().titleTextAttributes =
        <NSDictionary<string, any>>NSDictionary.dictionaryWithObjectForKey(
            new Color('#FFFF00').ios,
            NSForegroundColorAttributeName);
}

const iOSTheme: ZendeskIosThemeSimple = {
    primaryTextColor:          '#FF0000',
    secondaryTextColor:        '#00FF00',
    primaryBackgroundColor:    '#0000FF',
    secondaryBackgroundColor:  '#00FFFF',
    emptyBackgroundColor:      '#FF00FF',
    metaTextColor:             '#FFFF00',
    separatorColor:            '#884444',
    inputFieldTextColor:       '#448844',
    inputFieldBackgroundColor: '#444488',
    fontName:                  'Courier',
    boldFontName:              'Cochin-BoldItalic',
};
ZendeskSdk.setIosTheme(iOSTheme);
\n

The first 3 colors are used primarily on the ActionBar/StatusBar for the "new ticket" screen, as the Help Center uses the default ActionBar/StatusBar colors from the regular NativeScript setup.

\n

These settings could affect the whole app, but are ignored by the regular NativeScript Views, but could potentially impact other 3rd part views. Likely you will set these to be the same as what is used in the rest of the app.

\n

The settings within the theme object will only affect the Zendesk.

\n

Contributions

\n

Typings and iOS metadata have been included in the project to allow for easier usage.
\nTypings were autogenerated using:
\nhttps://github.com/NativeScript/android-dts-generator
\nhttps://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries
\nAlthough some manual changes had to be made by commenting-out types and setting to any that NativeScript handles the conversions for, such as NSArray and java.util.List.
\nCurrent typings/metadata were generated using version ios@1.11.1.1 and ``android@1.11.0.1` of the Zendesk and Zendesk Provider SDKs.

\n

Dumping typings...

\n
iOS
\n

From src/:

\n
pod repo update
TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" npm run demo.ios
cp typings/x86_64/objc\\!Zendesk* typings/
\n
Android
\n

From project root:

\n
cd android
./gradlew clean
./gradlew getDeps

cd lib
jar xf sdk-1.11.0.1.aar
mv classes.jar used-zendesk-sdk.jar
jar xf sdk-providers-1.11.0.1.aar
mv classes.jar used-zendesk-providers-sdk.jar

rm -rf */
find . -type f ! -iname \"used-zendesk-*\" -delete
cd ../..

rm -rf out/
java -jar ../android-dts-generator/dts-generator/build/libs/dts-generator.jar -input \\
    android/lib/used-zendesk-sdk.jar \\
    && mv out/android.d.ts src/typings/java\\!ZendeskSDK.d.ts;
java -jar ../android-dts-generator/dts-generator/build/libs/dts-generator.jar -input \\
    android/lib/used-zendesk-providers-sdk.jar \\
    && mv out/android.d.ts src/typings/java\\!ZendeskProviderSDK.d.ts;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fading-scroll-view":{"name":"nativescript-fading-scroll-view","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-fading-scroll-view

\n

\"Android\"\n\"iOS\"

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-fading-scroll-view
\n

Usage

\n

In app.js

\n
Vue.registerElement('FadingScrollView', () => require('nativescript-fading-scroll-view').FadingScrollView)
\n

In xml

\n
<FadingScrollView fadePercentage=\"0.3\" scroll=\"onScroll\">
...
</FadingScrollView>
\n

API

\n

This plugin acts exactly like NativeScript core ui ScrollView, only with fading edge effects.\nIf you don't want any fading edge effect, set fadePercentage="0" (or just use ScrollView, of course).

\n

Remember that if the exact height isn't specified, the fading edge effect won't work in Android.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
fadePercentage0.3Strength of fade effect (value in range [0, 0.5])
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/webpack":{"name":"@nativescript/webpack","version":"5.0.18","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/auto-fit-text":{"name":"@nativescript/auto-fit-text","version":"1.0.3","license":"Apache-2.0","readme":"

@nativescript/auto-fit-text

\n
ns plugin add @nativescript/auto-fit-text
\n

This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width

\n

Usage

\n

Nativescript

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  loaded=\"pageLoaded\"
  class=\"page\"
  xmlns:AFT=\"@nativescript/auto-fit-text\"
>
  <StackLayout class=\"p-20\">
    <AFT:AutoFitText
      text=\"Testinggggggggggggggggg\"
      textWrap=\"false\"
    ></AFT:AutoFitText>
  </StackLayout>
</Page>
\n

Angular NativeScript

\n
import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';

// Be sure to add the plugin module to your NgModule
@NgModule({
\timports: [NativeScriptAutoFitTextModule],
})
\n
<AutoFitText row=\"2\" fontSize=\"48\" text=\"Lorem Ipsum this line of text with fontSize ignored because the text is so long.\" textWrap=\"false\"></AutoFitText>
\n

Credits

\n

@grantland - android-autofittextview

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-strapi":{"name":"nativescript-strapi","version":"1.0.2","license":"MIT","readme":"

strapi javascript SDK for nativescript \"Build

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/plugin-badge":{"name":"@skhye05/plugin-badge","version":"1.0.3","license":"Apache-2.0","readme":"

@skhye05/plugin-badge

\n

This plugin will allow you to set badge notification.

\n

This plugin is an update of nativescript-plugin-badge for nartivescript higher 7

\n

Installation

\n

NativeScript 7+:

\n
ns plugin add @skhye05/plugin-badge
\n

NativeScript lower than 7:

\n
tns plugin add nativescript-plugin-badge
\n

Screenshots

\n

\"IOS\"

\n

\"Android\"

\n

Usage

\n
```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
ShortcutBadgerNative
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
requestPremissions():PromiseWill return if user granted the premission or not. See description below
setBadge(badge:number)set badge
removeBadge()clear badge
applyNotification(notification: Notification, badge: number, channelId?: string)See description below
\n

Supported Devices (Android)

\n

Please check the library used.

\n

Premission

\n

Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

\n

Miui(Xiaomi device) support

\n

Since from Xiaomi changed the way to show badge by notification from Miui 6.

\n

setBadge will not support Xiaomi devices.

\n

If you want to support badges for Xiaomi, you have to send notifications. And use

\n
applyNotification({ title: 'title', body: 'body' }, 5, 'channel id');
\n

channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

\n

Drawback

\n

The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-preferences":{"name":"nativescript-android-preferences","version":"1.0.3","license":"MIT","readme":"

NativeScript-Android-preferences

\n

A NativeScript plugin that allows to use the application's preferences on Android.

\n

License

\n

This plugin is licensed under the MITlicense by Elsa Rodriguez Plaza

\n

Installation

\n

tns plugin add nativescript-android-preferences

\n

Usages

\n

For more details on how to use this plugin, take a look at the demo application

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"onNavigatingTo\">
 <StackLayout>
   <Label text=\"Android App Save Preferences\" class=\"title\"/>
   <Button text=\"Save String\" tap=\"{{ onTapString }}\" />
 </StackLayout>
</Page>
\n
var pref = require(\"nativescript-android-preferences\");
onTapString = function () {
        var options = {
            datavalue: \"StringPreference\",
            datatype: pref.DataTypes.STRING,
            prefname: \"String_Preference\"
        }
        pref.SavePreference(options);
        options.datavalue = \"DefStringPreference\";
        alert(\"String Preference saved:\"+pref.GetPreference(options));
    }
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-share-file-knotes":{"name":"nativescript-share-file-knotes","version":"1.0.11","license":"Apache-2.0","readme":"

Nativescript Share File

\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install nativescript-share-file
\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from 'nativescript-share-file';
    import * as fs from 'tns-core-modules/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imageoptimize":{"name":"nativescript-imageoptimize","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript ImageOptimize

\n

Installation

\n
tns plugin add nativescript-imageoptimize
\n

Usage

\n
    import { ImageOptimize } from 'nativescript-imageoptimize';
    import * as fs from 'tns-core-modules/file-system';
    const imageoptimize = new ImageOptimize({
      src: '~/destiny_2.jpg',
      height: 400, //optional
      width:400,
      quality: 50, // 100 - 1
      format:'jpg' // jpeg || jpg || png
      dest: fs.knownFolders.documents().getFolder('images').path
    })
\n
    const ImageOptimize = require('nativescript-imageoptimize').ImageOptimize;
    const fs = require('tns-core-modules/file-system');
    const imageoptimize = new ImageOptimize({
      src: '~/destiny_2.jpg',
      height: 400, //optional
      width:400,
      quality: 50, // 100 - 1
      format:'jpg' // jpeg || jpg || png
      dest: fs.knownFolders.documents().getFolder('images').path,
    })
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultTypeRequiredDescription
widthsource widthnumber
  • - [ ]
heightsource widthnumber
  • - [ ]
qualitynullnumber
  • - [x]
formatjpgstring
  • - [ ]
destnullstring
  • - [x]
srcnullstring
  • - [x]
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/theme-switcher":{"name":"@nativescript/theme-switcher","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/theme-switcher

\n
ns plugin add @nativescript/theme-switcher
\n\n\t\n\t\t\n\t\t\n\t\n
\n\t\t\t\n\t\t\n\t\t\t\n\t\t
\n

Usage

\n
import { initThemes, switchTheme } from '@nativescript/theme-switcher'


// first initialize the themes
initThemes({
    // default is optional - will be auto-applied after initializing (*)
    default: () => import('theme-loader!./themes/default.scss'),
    red: () => import('theme-loader!./themes/red.scss'),
    green: () => import('theme-loader!./themes/green.scss'),
})

// the later on, switch themes with
switchTheme('red');
switchTheme('green');
\n
\n

Note: The theme-loader! prefix is used to apply a custom loader that prevents the styles from being auto-applied, and instead applied on-demand by the theme switcher. It requires @nativescript/webpack@5+ to work properly.

\n
\n
\n

Note for TypeScript users: TypeScript does not know about theme-loader or css/scss files, in order to supress the type errors when calling import('theme-loader!./path/to/theme.css') you can add

\n
/// <reference path=\"./node_modules/@nativescript/theme-switcher/shims.d.ts\" />
\n

To your references.d.ts, or use // @ts-ignore to supress the errors locally.

\n
\n
\n

If you need to switch multiple themes simultaniously, you can initialize as many switchers as you need. Each switcher will load css and persist (unless disabled) the last selected theme.

\n

Can be useful if your app can switch different parts of the theme individually. For example

\n
    \n
  1. switcher1 switches button styles
    2. \n
  2. switcher2 switches font styles
    3. \n
  3. etc.
    4. \n
\n
import { ThemeSwitcher } from '@nativescript/theme-switcher'

const switcher1 = new ThemeSwitcher('switcher1');
const switcher2 = new ThemeSwitcher('switcher1');

switcher1.initThemes({ /* ... */})
switcher2.initThemes({ /* ... */})

switcher1.switchTheme( /* ... */ )
switcher2.switchTheme( /* ... */ )
\n

API

\n

initThemes(themes: ThemeDefinition, options?: ThemeSwitcherOptions)

\n
interface ThemeDefinition {
\t[name: string]: () => any;
}

interface ThemeSwitcherOptions {
\tpersistent?: boolean; // default: true
\tpersistenceKey?: string; // default: __theme_switcher_default
}
\n

themes is an object with the theme name as the key, and a loader function that returns the theme css (css string, ast, optionally async).

\n

default will be applied if set as a theme.

\n

If persistent is enabled (default), the last selected theme will be saved to ApplicationSettings and automatically restored when initThemes is called.

\n

switchTheme(themeName: string)

\n

Used to switch the current theme.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache-with-prefetch":{"name":"nativescript-web-image-cache-with-prefetch","version":"35.0.0","license":"MIT(https://github.com/VideoSpike/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

#Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for iOS and Facebook Fresco for android.\nSupports local Images.

\n

License

\n

Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

\n

Installation

\n
tns plugin add nativescript-web-image-cache\n
\n

** Tested on NativeScript 2.3+ on both Angular 2 and VanillaJS, if any problems while running on previous versions, please update. This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin, please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

\n

Usage in Vue

\n

In main.js:

\n
const Vue = require(\"nativescript-vue\") // you already have something like this
Vue.registerElement('WebImage', () => require('nativescript-web-image-cache').WebImage) // now add this
\n

Then in any .vue file:

\n
<OtherMarkup>
  <WebImage src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></WebImage>
</OtherMarkup>
\n

Usage in Angular

\n
\n

⚠️ This was changed in plugin version 5.0.0!

\n
\n

In app.module.ts, or any specific module you want to use this plugin:

\n
import { registerElement } from \"nativescript-angular\";
registerElement(\"WebImage\", () => require(\"nativescript-web-image-cache\").WebImage);
\n

After initialisation, the markup tag <WebImage></WebImage> can be used in templates of components.

\n
    <GridLayout rows='*' columns='*'>
        <WebImage stretch=\"fill\" row=\"0\"
                     col=\"0\" placeholder=\"localPlaceholderImgorResUrl\"
                     src=\"#your image url here\">
        </WebImage>
    </GridLayout>
\n

Caching the images

\n\n

Check if image is loading

\n\n

The Markup

\n
    <WebImage stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </WebImage>\n
\n

The Backing Component Class Snippet

\n
     @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
\n

Clearing the cache

\n

Import the module, call the method clearCache() , default time is for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

\n
 import {clearCache} from "nativescript-web-image-cache";\n clearCache();\n
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
import {setCacheLimit} from "nativescript-web-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
\n

Usage in VanillaJS/TypeScript apps

\n

IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

\n

Initialising on android - in app.js

\n
var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
\n

After initialisation, add the namespace attribute xmlns:IC="nativescript-web-image-cache" to the opening page tag of xml. The markup tag <IC:WebImage></IC:WebImage> should be used to denote images.

\n
    <Page xmlns:IC=\"nativescript-web-image-cache\">
        <GridLayout rows='*' columns='*'>
            <IC:WebImage stretch=\"fill\" row=\"0\"
             col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
             src=\"#image-url\">
             </IC:WebImage>  
        </GridLayout>
    </Page>
\n

Caching the images

\n\n

Check if image is loading

\n\n
var imageCacheModule=require(\"nativescript-web-image-cache\");

var myImage1 = page.getViewById(\"my-image-1\"),
    isLoading = myImage1.isLoading;
\n

Clearing the cache

\n\n
var imageCacheModule=require(\"nativescript-web-image-cache\");
imageCacheModule.clearCache();
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
var imageCache = require("nativescript-web-image-cache");\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);\n
\n

for android, you need to initialize in the application onlaunch event before clearing the cache

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-dc":{"name":"nativescript-aws-dc","version":"1.1.6","license":"Apache-2.0","readme":"

nativescript-aws-dc

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-aws-dc
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n

Based on nativescript-aws-dynamo from ALI YUKSELali.yuksel@cerensoftware.co.uk

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-connectivity-manager-plugin":{"name":"nativescript-connectivity-manager-plugin","version":"0.0.7","license":"Apache-2.0","readme":"

NativeScript ConnectivityManager Plugin

\n

A plugin to manage the device connectivity on Android and iOS.

\n\n

Installation

\n

tns plugin add nativescript-connectivity-manager-plugin

\n

Demo

\n

Check out the Angular demo app\nand run it locally:

\n
git clone https://github.com/1IoT/nativescript-connectivity-manager-plugin
cd nativescript-connectivity-manager-plugin/src
npm run demo:android
\n

Usage

\n
import {ConnectivityManagerImpl} from 'nativescript-connectivity-manager-plugin';

@Component({
    selector: \"Home\",
    templateUrl: \"./home.component.html\"
})
export class HomeComponent implements OnInit {

    private static NETWORK_SSID: string = \"MY_SSID\";
    private static NETWORK_PASSPHARSE: string = \"MY_KEY\";
    private static CONNECTION_TIMEOUT_MS: number = 30000;
    private static DISCONNECT_TIMEOUT_MS: number = 15000;

    constructor(private connectivityManager: ConnectivityManagerImpl, private httpClient: HttpClient) {
    }

    ngOnInit(): void {
    }

    public getInfos() {
        console.log(\"Wifi SSID: \" + this.connectivityManager.getSSID());
        console.log(\"NetworkId: \" + this.connectivityManager.getWifiNetworkId());
        console.log(\"Wifi enabled: \" + this.connectivityManager.isWifiEnabled());
        console.log(\"Wifi connected: \" + this.connectivityManager.isWifiConnected());
        console.log(\"Cellular enabled: \" + this.connectivityManager.isCellularEnabled());
        console.log(\"Cellular connected: \" + this.connectivityManager.isCellularConnected());
        console.log(\"GPS enabled: \" + this.connectivityManager.isGpsEnabled());
        console.log(\"GPS connected: \" + this.connectivityManager.isGpsConnected());
    }

    public scan(): void {
        console.log(\"Start scan...\");
        this.connectivityManager.scanWifiNetworks().then((wifiSSIDs: string[]) => {
            console.log(wifiSSIDs);
        });
    }

    public async connect(): Promise<boolean> {
        console.log(\"Start connection...\");
        console.log(\"Disconnect with the source network...\");
        return this.connectivityManager.connectToWifiNetwork(HomeComponent.NETWORK_SSID, HomeComponent.NETWORK_PASSPHARSE, HomeComponent.CONNECTION_TIMEOUT_MS);
    }

    public async disconnect(): Promise<boolean> {
        return this.connectivityManager.disconnectWifiNetwork(HomeComponent.DISCONNECT_TIMEOUT_MS);
    }
}
\n

API

\n

Requires Android SDK: 29

\n

WARNING: Note that even for scanning WiFi and retrieving the SSID, location permission must be given and GPS must be enabled!

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnDescription
getSSID()stringrequires granted location permission and enabled gps
getWifiNetworkId()number
isWifiEnabled()boolean
isWifiConnected()boolean
isCellularEnabled()boolean
isCellularConnected()boolean
isGpsEnabled()boolean
isGpsConnected()boolean
hasInternet()boolean
async scanWifiNetworks()Promise<string[]>requires granted location permission and enabled gps
async connectToWifiNetwork(ssid: string, password: string, milliseconds: number)Promise<boolean>
async disconnectWifiNetwork(timeoutMs: number)Promise<boolean>
\n

Tips

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dropbox":{"name":"nativescript-dropbox","version":"1.1.3","license":"Apache-2.0","readme":"

NativeScript Dropbox

\n

Prerequisites / Requirements

\n

Dropbox User Access token

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-dropbox
\n

Demo app

\n

If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

\n

API

\n

init

\n

Initiates the dropbox client with given token.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDescription
accessTokenStringUser Access Token.
\n
var Dropbox = require(\"nativescript-dropbox\");
Dropbox.init(\"ACCESS_TOKEN\");
\n

uploadData

\n

Uploads the data at the given path.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDescription
pathStringDropbox File Path.
dataNSData or java.lang.Byte[]Binary data.
overwriteBooleanOverwrites the file if already exists. Defaults to true.
autorenameBooleanIf there’s a conflict, as determined by mode, have the Dropbox server try to autorename the file to avoid conflict. Defaults to false.
muteBooleanNormally, users are made aware of any file modifications in their Dropbox account via notifications in the client software. If true, this tells the clients that this modification shouldn’t result in a user notification. Defaults to false.
\n
var dropbox = new Dropbox();

dropbox.addEventListener(Dropbox.successEvent, (event: SuccessEventData) => { ... });

dropbox.addEventListener(Dropbox.errorEvent, (event: ErrorEventData) => { ... });

dropbox.addEventListener(Dropbox.progressEvent, (event: ProgressEventData) => { ... });

dropbox.uploadData(\"/logo.png\", knownFolders.currentApp().getFile(path.join(\"images\", \"logo.png\")).readSync());
\n

createSharedLink

\n

Creates a shared link for the given path.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDescription
pathStringDropbox File Path.
\n
var dropbox = new Dropbox();

dropbox.addEventListener(Dropbox.successEvent, (event: SuccessEventData) => { 
    var url = event.result;
});

dropbox.addEventListener(Dropbox.errorEvent, (event: ErrorEventData) => { ... });

dropbox.createSharedLink(\"/logo.png\");
\n

dispose

\n

Disposes the dropbox client.

\n
Dropbox.dispose();
\n

Known issues on Android

\n

Dropbox SDK requires API Level 19 (Kitkat - 4.4) or above

\n

You might have to modify the minSdkVersion entry in your App_Resources/Android/src/main/AndroidManifest.xml

\n
<uses-sdk
\tandroid:minSdkVersion=\"19\"
\t...
\n

The number of method references in a .dex file cannot exceed 64K.

\n

This can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-salesforce-sdk":{"name":"nativescript-salesforce-sdk","version":"1.0.9","license":"MIT","readme":"

Native Script Salesforce SDK

\n

It is allows you to easily authenticate with Salesforce using OAuth (User Ajent flow), and to manipulate Salesforce data using a simple API.

\n

Features

\n\n

Installation

\n
tns plugin add nativescript-salesforce-sdk
\n

Uses

\n
  let auth = new Auth(page); // must need to pass page object
  let config:IWebAuth = {
    clientId:'3MVG9YDQS5WtC11p8U6jHYOrOLWdUuHO5tK5jXMv0mQCyzZ0cdjYUd93RGSCpQdP87VL6hQbUO3fXYRmAkJxq', 
    calbackUrl:'ns://nativescript/sdk', 
    loginUrl:'https://login.salesforce.com' 
  };
  auth.on('success', (args)=> {
    
    // Query
    Apex.query('select id, Name from Account')
      .then((data)=> {
      // console.log(JSON.stringify(data.content.toJSON().totalSize));
      if(model !== undefined) {
        model.items = data.content.toJSON().records;
      }
    }).catch((err) => {
      console.log(JSON.stringify(err));
    });
    
  }); 
  auth.on('fail', (args)=> {
    console.log('fails '+new Date().getMilliseconds());
  }); 
 
  auth.login(config);
\n

Please check demo application

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-glia":{"name":"nativescript-glia","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-glia

\n
ns plugin add nativescript-glia
\n

Usage

\n

iOS Permissions

\n

You must add the following permissions to your Info.plist for your app, typically located under App_Resources/iOS directory for your app. Change the string to whatever you like for the specific permission.

\n
\t<key>NSPhotoLibraryAddUsageDescription</key>
\t<string>Need photo library access for adding images</string>

\t<key>NSMicrophoneUsageDescription</key>
\t<string>Need microphone access for uploading videos</string>

\t<key>NSCameraUsageDescription</key>
\t<string>Need camera access for uploading images</string>
\n

Android Permission

\n

Automatically added by the plugin so you don't have to configure yourself.

\n
\t<!-- Permission to draw on top of other apps, used for annotations during screen
\tsharing. Visitor must also explicitly grant this permission to the app through a
\tpermission management screen during the screen sharing session.
\t-->
\t<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\" />
\n

Android App Config

\n

You will need to extend the android Application in order to use Glia. You can find NativeScript Docs Here.

\n

Create a file called application.android.ts in the root of your app project. Copy the following contents.

\n\n
\t<application
\t\tandroid:name=\"org.myApp.GliaDemoApp\"
\t\tandroid:allowBackup=\"true\"
\t\tandroid:icon=\"@drawable/icon\"
\t\tandroid:label=\"@string/app_name\"
\t\tandroid:theme=\"@style/AppTheme\">
\n
// the `JavaProxy` decorator specifies the package and the name for the native *.JAVA file generated.
@NativeClass()
@JavaProxy('org.myApp.GliaDemoApp')
class Application extends android.app.Application {
  public onCreate(): void {
    super.onCreate();

    // At this point modules have already been initialized

    // Enter custom initialization code here

    com.glia.widgets.GliaWidgets.onAppCreate(this);

    com.glia.widgets.GliaWidgets.init(
      new com.glia.widgets.GliaWidgetsConfig.Builder()
        .setSiteApiKey(new com.glia.androidsdk.SiteApiKey('SITE_APIKEY_ID', 'SITE_APIKEY_SECRET'))
        .setSiteId('SITE_ID')
        .setRegion('us')
        .setContext(this.getApplicationContext())
        .build()
    );
  }

  public attachBaseContext(baseContext: android.content.Context) {
    super.attachBaseContext(baseContext);
    // This code enables MultiDex support for the application (if needed)
    // androidx.multidex.MultiDex.install(this);
  }
}
\n

Lastly, when extending the Android Application with NativeScript we need to ensure the file is handled correctly when bundling with Webpack. With NativeScript 7+ you will need to use the chainWebpack approach like so:

\n
const webpack = require('@nativescript/webpack');

module.exports = (env) => {
  webpack.init(env);

  webpack.chainWebpack((config) => {
    if (webpack.Utils.platform.getPlatformName() === 'android') {
      // make sure the path to the applicatioon.android.(js|ts)
      // is relative to the webpack.config.js
      // you may need to use `./app/application.android if
      // your app source is located inside the ./app folder.
      config.entry('application').add('./application.android');
    }
  });

  return webpack.resolveConfig();
};
\n

With NativeScript versions prior to 7, docs can be found here. Essentially you need to do the following in your webpack.config.js file:

\n
 entry: {
        bundle: entryPath,
        application: \"./application.android\",
    },
\n

API

\n\n

Example

\n
import { EngagementKind, Environment, Glia, IGliaQueue, StartConfiguration } from 'nativescript-glia';

export SomeClass {
\tconstructor() {

\t}

\t// Configure the Glia instance before calling any other methods
\tpublic configureGlia() {
\t\tGlia.configure({
      \t\tsiteId: \"YOUR_SITE_ID\",
      \t\tregion: 'us',
      \t\tauthorizingMethod: {
        \t\tsiteApiKey: {
          \t\t\tid: \"YOUR_SITE_APIKEY_ID\",
          \t\t\tsecret: \"YOUR_SITE_APIKEY_SECRET\",
        \t\t},
      \t\t},
    \t}).then(() => {
        \tconsole.log('*** Glia Configured ***');
      \t}).catch((err) => {
        \tconsole.log('Glia Configure Error', err);
\t\t});
\t}

\tpublic getMyQueues() {
    \ttry {
    \t\tconst queues = await Glia.listQueues();
\t\t  \t// iterate your queues here if you need to find a specific queue capable of video/audio/chat or something else.
\t\t\t// queues can be inspected with the following approach
\t\t\tconst name = (queues[0] as IGliaQueue).name;
    \t    const status = (queues[0] as IGliaQueue).state.status;
    \t    const media = (queues[0] as IGliaQueue).state.media;
    \t} catch (error) {
    \t\tconsole.log(error);
    \t}
\t}

\tpublic startChatGlia() {
    \ttry {
    \t  const startOpts: StartConfiguration = {
    \t    companyName: 'YOUR COMPANY NAME',
    \t    engagementKind: EngagementKind.Chat,
    \t    configuration: {
    \t      authorizationMethod: {
    \t        siteApiKey: { id: 'YOUR_SITE_APIKEY_ID', secret: 'YOUR_SITE_APIKEY_SECRET' },
    \t      },
    \t      environment: Environment.USA,
    \t      siteId: 'YOUR_SITE_ID',
    \t    },
    \t    queueID: 'YOUR_QUEUE_ID',
    \t    visitorContext: {
    \t      type: 'page',
    \t      url: 'YOUR_SITE_URL',
    \t    },
    \t  };
    \t  await Glia.start(startOpts);
    \t} catch (error) {
    \t  console.log(error);
    \t}
\t}
}
\n

License

\n

Apache License Version 2.0

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-qr-generator":{"name":"nativescript-qr-generator","version":"3.0.0","license":"Apache-2.0","readme":"

nativescript-qr-generator

\n

NativeScript-Qr-Generator is a plugin for NativeScript which generates Qr code images.

\n

Installation

\n

Go to your app's root folder and execute:

\n
ns plugin add nativescript-qr-generator
\n

Usage

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\">

    <ActionBar title=\"My App\" icon=\"\" />

    <GridLayout rows=\"*,*,*\" columns=\"*\" class=\"qr-example\">
        <Label row=\"0\" col=\"0\" text=\"Color and size\" ></Label>
        <Image src=\"\" row=\"1\" col=\"0\" loaded=\"{{onImageLoadedBasic}}\"></Image>
    </GridLayout>
</Page>
\n
import { Observable, ImageSource, Image } from '@nativescript/core';
import { QrGenerator } from 'nativescript-qr-generator';

export class HelloWorldModel extends Observable {
  private _counter: number
  private _message: string

  constructor() {
    super();
  }

  onImageLoadedBasic(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate(`Hello World`, {
            logo: {
                path: \"~/assets/fb.png\",
                ratio: {
                    w: 50, h: 50
                }
            }
        });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColors(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors', { color: '#4183d7', backgroundColor: '#67809f' });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColorsSize(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors and custom size', { size: { width: 100, height: 100 }, color: '#fbd90e', backgroundColor: '#0d0c0c' });
        image.imageSource = new ImageSource(result);
    }
}
\n

Usage Angular

\n
  import { Component } from \"@angular/core\";
  import { ImageSource } from \"@nativescript/core\";
  import { Image } from \"@nativescript/core\";
  import { QrGenerator } from \"nativescript-qr-generator\";

  @Component({
      selector: \"ns-main\",
      template: \"<Image src=\"\" (loaded)=\"onImageLoaded($event)\"></Image>\"
  })
  export class AppComponent {

      constructor() {} 
      
      onImageLoaded(){
          const image = args.object as Image;
          const result = new QrGenerator().generate('Hello World');
          image.imageSource = new ImageSource(result);
      }
  }
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
value-Value to generate Qr code
size.width200The image's width
size.height200The image's height
color'#000000'The Qr's color
backgroundColor'#FFFFFFF'The background's color
logononeThis new property will add your logo on top of the generated qr-code, the plugin will manage to center the logo, you may want to play with the ratio property in case of more complex qr-code
logo.pathnoneif path not set the plugin will take the appIcon as logo
logo.ratio.wnoneset the width of the logo
logo.ratio.hnoneset the height of the logo
logo.ratio.xnoneset the x cordinate to position the logo
logo.ratio.xnoneset the y cordinate to position the logo
\n

Acknowledgements

\n

This plugin wraps the following native Qr generators libraries:

\n

Android: https://github.com/kenglxn/QRGen
\niOS: https://github.com/gscarrone/iOS-QR-Code-Generator

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-autocomplete":{"name":"nativescript-google-places-autocomplete","version":"1.0.3","license":"Apache-2.0","readme":"

Nativescript Google Places Autocomplete

\n

\"npm\n\"Twitter

\n

Add location autocomplete to your Nativescript application

\n

\"\"

\n

Prerequisites

\n

Create and grap your Api key from https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en

\n

Installation

\n
tns plugin add nativescript-google-places-autocomplete
\n

Usage

\n
    import { GooglePlacesAutocomplete } from 'nativescript-google-places-autocomplete';
\t
\tlet API_KEY = \"your_api_Key\";
\tlet googlePlacesAutocomplete = new GooglePlacesAutocomplete(API_KEY);

\tgooglePlacesAutocomplete.search(params)
\t      .then((places: any) => {
\t\t      // place predictions list
           }, (error => {
              console.log(error)
          }));
          
\tgooglePlacesAutocomplete.getPlaceById(place.placeId).then((place) => {
\t   .then(function () { });
        }, error => {
            console.log(error)
        })
\n

Plugin Auther : Aymen Labidi

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tnsg":{"name":"tnsg","version":"0.1.8","license":"MIT","readme":"

tnsg

\n

A NativeScript CLI Generator

\n
\n

Generate quickly your pages, services, class..

\n

Installation

\n
npm install -g tnsg
\n

Generating Pages, Service, Class (Angular)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ScaffoldUsage
Pagetnsg -p my-page
Servicetnsg -s my-service
Classtnsg -c my-class
\n

Examples:

\n

tnsg -p pages/login will generate:

\n\n

tnsg -p pages/user-detail will generate:

\n\n

Generating View {N}

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ScaffoldUsage
Viewtnsg -vi my-view
\n

Examples:

\n

tnsg -vi views/user will generate:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-nativescript-components":{"name":"preact-nativescript-components","version":"0.0.7-2","license":"MIT","readme":"

preact-nativescript-components\"Build \"Coverage \"dependencies\" \"npm\"

\n

preact-nativescript-components was made to use JSX-Syntax for preact-to-nativescript components

\n

Usage

\n

You should mostly be able to import and use the NativeScript UI Components by name e.g.

\n
import application from \"tns-core-modules/application\"
import { render } from \"preact-to-nativescript\"
import {
  ActionBar, ActionItem, Button, Label, Page, ScrollView, StackLayout
} from \"preact-nativescript-components\"

application.start({
  create: () => {
    return render(
      <Page>
        <ActionBar>
          <StackLayout>
            <Label>Custom Header</Label>
          </StackLayout>
          <ActionItem text=\"act\" />
        </ActionBar>
        <StackLayout>
          <Label>PageContent</Label>
          <Button text=\"Button\" />
        </StackLayout>
      </Page>
    )
  }
})
\n

List of importable Components

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sound-kak":{"name":"nativescript-sound-kak","version":"1.2.0","license":"MIT","readme":"

NativeScript Sound

\n

Play a sound in your NativeScript app.

\n

This project was originally programmed by John Bristowe. However when this plugin is used in a project installed on a phone with iOS 13.2, the entire application would crash. This fork is a modified version of the original project that solves the instantiation crash issue that I encountered. The rest of the project remained intact.

\n

Installation

\n

Run the following command from the root of your project:

\n
npm i nativescript-sound-kak
\n

Usage

\n

To use this plugin you must first require or import it:

\n
//CommonJs
const Sound = require(\"nativescript-sound-kak\");

//ES6 Import
import * as Sound from \"nativescript-sound-kak\";
\n

Create and Play

\n

It's important to preload the audio file into the sound module before playing it; there is a delay during creation due to the audio being processed:

\n
const beep = Sound.create(\"./path/to/file.mp3\"); // preload the audio file

// play the sound (i.e. tap event handler)
beep.play();
\n

You may wish to check that the file actually exists:

\n
import * as fs from \"tns-core-modules/file-system\";
import * as Sound from 'nativescript-sound-kak';

// currentApp().path leads to your app folder in the project
const pathToBeep = fs.path.join(fs.knownFolders.currentApp().path, '/assets/sounds/beep.mp3');
let beep;
if (fs.File.exists(pathToBeep)) {
\tbeep = Sound.create(pathToBeep);
}
\n

stop

\n
beep.stop();
\n

reset

\n
beep.reset();
\n

Background Playback

\n

In iOS, the default playback method will silence all background sounds. You can define whether the audio playback in the app silences background audio (i.e. the Music app) or if it play concurrently.

\n
import * as Sound from 'nativescript-sound-kak';
// Sets the audio playback to background, i.e. allows it to play at the same time as other background audio.
Sound.setBackground(true);
\n
import * as Sound from 'nativescript-sound-kak';
// Turns off background playback. When the Sound object is created, background audio will be silenced
Sound.setBackground(false);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-reviews":{"name":"nativescript-reviews","version":"1.0.4","license":"Apache-2.0","readme":"

Nativescript Reviews

\n

ready to use reviews box

\n\n

Install

\n
tns plugin add nativescript-reviews
\n

click here to Download fontawesome-webfont.ttf or download from fontawesome website

\n\n
app/fonts/fontawesome-webfont.ttf
\n

Usage

\n
<UI:Reviews reviews=\"{{ reviews }}\"  />
\n

with more options

\n
<!-- default -->
<UI:Reviews reviews=\"{{ reviews }}\"  />
<!-- reviews with custom date handler  -->
<UI:Reviews dateHandler=\"arabicDateTime\" title=\"With date handler\" reviews=\"{{ reviews }}\" scroll=\"false\" />
<!-- reviews with custom plugin for caching   -->
<UI:Reviews title=\"Image cache plugins \" scroll=\"false\" plugin=\"{{ plugin }}\" imagetag=\"{{ imagetag }}\" reviews=\"{{ reviewsWithWebImages }}\" /> 
<!-- reviews with scroll inside   -->
<UI:Reviews title=\"Scroll inside\" scroll=\"true\" reviews=\"{{ lotofreviews }}\" />
\n

refresh() this function you can triger after you get remote data

\n

let review = getViewById('review');\n//you can do remote request or delay\nreview.refresh(); // then refresh your values

\n

see demo for more details

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
reviewsrequiredArray of reivew object {image: "~/images/icon-50.png", username: "Moayad Najdawi", review: "this is the first review", rate: 5, datetime: new Date(Date.now() - 24 * 60 * 60 * 1000)}
scrolltrueenable or disable scrollview inside the reviews holder
showHeadertrueto hide or show review title with the underline style
imagetagthe xml element of the image so you can change it if you need to add cache plugin or something
pluginempty stringplugin include statment like xmlns:IC="nativescript-web-image-cache"
titlereviewsthe title of the reviews box
dateHandlera goyou can change the date text by provide filter inside app resources see app.ts
usereventfire on tap on user image or name return the review object
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-numberpicker":{"name":"nativescript-numberpicker","version":"1.0.3","license":"SEE LICENSE IN README.md","readme":"

nativescript-numberpicker

\n

A nativescript plugin for number picker

\n

install

\n

tns plugin add nativescript-numberpicker

\n

add this to your references.d.ts for typescript support

\n
    /// <reference path=\"./node_modules/nativescript-numberpicker/numberpicker.d.ts\" /> Needed for autocompletion and compilation.
\n

Usage in xml

\n

add this to your namespace xmlns:numberpicker="nativescript-numberpicker"\nthen use like this <numberpicker:NumberPicker value="3" minValue="2" maxValue="6" id="np"/>

\n

see the example below

\n
    <Page 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:numberpicker=\"nativescript-numberpicker\" loaded=\"loaded\">
    <StackLayout style.backgroundColor=\"green\" id=\"Mycontainer\">
        <Label text=\"Find numberpicker below\" class=\"message\" textWrap=\"true\"/>
        <numberpicker:NumberPicker value=\"3\" minValue=\"2\" maxValue=\"6\" id=\"np\"/>
        <Label text=\"Find numberpicker below\" class=\"message\" textWrap=\"true\"/>
    </StackLayout>
    </Page>


    //how to retrive value set from view
    import numberpicker = require(\"nativescript-numberpicker\");
    let np = <numberpicker.NumberPicker>page.getViewById(\"np\");
    let value = np.value; //retrive value from view

\n

Usage in code

\n
    //adding numberpicker from code
    import numberpicker = require(\"nativescript-numberpicker\");
    let np = new numberpicker.NumberPicker();
    np.minValue = 0;
    np.maxValue = 10;
    np.value = 3;//this should be set after maxValue and minValue has been provided

    //add numberpicker to your layout
    let layout = page.getViewById(\"Mycontainer\");
    layout.addChild(np);
\n

Support

\n

Works on android and ios.

\n

note: ios not tested yet, but it should work fine ;) not all of us use a mac.. lol

\n

Issues and features request

\n

Just create an issue and i'll get back to you ASAP

\n

Pull request

\n

yes, yes, yes, send them...keep them coming

\n

Coming soon

\n

styling support for ios and android

\n

Liscence

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar":{"name":"nativescript-linearprogressbar","version":"1.0.4","license":"Apache-2.0","readme":"

NativeScript Linear Progress Bar

\n

A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
\nThe ios implemention uses Philippe Boisney's linear progress bar .

\n

Installation

\n\n

Vanilla NativeScript

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:Bar=\"nativescript-linearprogressbar\">
  <StackLayout>
    <Bar:Linearprogressbar indeterminate=\"true\" />
  </StackLayout>
</Page>
\n

Angular NativeScript

\n
import { registerElement } from 'nativescript-angular/element-registry';

registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
\n
<LinearProgressBar indeterminate=\"true\">
</LinearProgressBar>
\n

Attributes

\n\n

Version

\n

1.0

\n

Author

\n

slanca (npmdroid(@)gmail.com)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-globalevents-free":{"name":"nativescript-globalevents-free","version":"1.2.3","license":"MIT","readme":"

Free version for nativescript-globalevents (renamed to nativescript-globalevents-free)

\n

A rather maintained version of nativescript-globalevents. This is simply a fork of nativescript-globalevents which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

\n

To use this, simply install with NPM using:

\n

npm install nativescript-globalevents-free

\n

All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/multi-select":{"name":"@skhye05/multi-select","version":"1.0.4","license":"Apache-2.0","readme":"

Nativescript Multi Select \"apple\" \"android\"

\n

\"npm\"\n\"npm\"

\n

Overview

\n

Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

\n

\n \n \n

\n

Installation

\n
tns plugin add @skhye05/multi-select
\n

Usage

\n

TypeScript

\n
import { MultiSelect, AShowType } from '@skhye05/multi-select';
import { MSOption } from '@skhye05/multi-select';

let MSelect = new MultiSelect();
let selectedItems = [\"moi-a\", \"moi-b\"];

const options: MSOption = {
  title: \"Please Select\",
  selectedItems: this._selectedItems,
  items: [
    { name: \"A\", value: \"moi-a\" },
    { name: \"B\", value: \"moi-b\" },
    { name: \"C\", value: \"moi-c\" },
    { name: \"D\", value: \"moi-d\" },
  ],
  bindValue: 'value',
  displayLabel: 'name',
  onConfirm: selectedItems => {
    selectedItems = selectedItems;
    console.log(\"SELECTED ITEMS => \", selectedItems);
  },
  onItemSelected: selectedItem => {
    console.log(\"SELECTED ITEM => \", selectedItem);
  },
  onCancel: () => {
    console.log('CANCEL');
  },
  android: {
    titleSize: 25,
    cancelButtonTextColor: \"#252323\",
    confirmButtonTextColor: \"#70798C\",
  },
  ios: {
    cancelButtonBgColor: \"#252323\",
    confirmButtonBgColor: \"#70798C\",
    cancelButtonTextColor: \"#ffffff\",
    confirmButtonTextColor: \"#ffffff\",
    showType: AShowType.TypeBounceIn
  }
};

MSelect.show(options);
\n

Angular

\n
import { Component, OnInit, NgZone } from \"@angular/core\";
import { MultiSelect, AShowType } from '@skhye05/multi-select';
import { MSOption } from '@skhye05/multi-select';

@Component({
 // ...
})
export class SomeComponent implements OnInit {

  private _MSelect: MultiSelect;
  private predefinedItems: Array<any>;
  public selectedItems: Array<any>;

  constructor(private zone: NgZone) {
    this._MSelect = new MultiSelect();
    this.predefinedItems = [\"moi-a\", \"moi-b\"];
  }

  ngOnInit(): void {
  }


  public onSelectTapped(): void {
    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this.predefinedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        this.zone.run(() => {
          this.selectedItems = selectedItems;
          this.predefinedItems = selectedItems;
          console.log(\"SELECTED ITEMS => \", selectedItems);
        })
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    this._MSelect.show(options);
  }
}
\n

Vue

\n
<script>
  import {
    MultiSelect,
    AShowType
  } from \"@skhye05/multi-select\";
  const MSelect = new MultiSelect();
  let predefinedItems = [\"moi-a\", \"moi-b\"];
  
  export default {
    data() {
    },
    methods: {
      onSelectTapped() {
        const that = this;
        const options = {
          title: \"Please Select\",
          selectedItems: predefinedItems,
          items: [{
              name: \"A\",
              value: \"moi-a\"
            },
            {
              name: \"B\",
              value: \"moi-b\"
            },
            {
              name: \"C\",
              value: \"moi-c\"
            },
            {
              name: \"D\",
              value: \"moi-d\"
            }
          ],
          bindValue: \"value\",
          displayLabel: \"name\",
          onConfirm: _selectedItems => {
            that.selectedItems = _selectedItems;
            console.log(\"SELECTED ITEMS => \", _selectedItems);
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log(\"CANCEL\");
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\"
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };
  
        MSelect.show(options);
      }
    }
  };
</script>
\n

API

\n

MultiSelect

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
show(options: MSOption)() : voidShow Multi Select Dialog
\n

MSOption

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titlestringDialog Title
confirmButtonTextstringconfirm button text optional
cancelButtonTextstringcancel button text optional
selectedItemsArray<any>predefined items optional
itemsArray<any>items/list that will be display
bindValuestringthe value that will determine the property which will be return when an item is selected optional
displayLabelstringthe value that will determine the property which will be display in the list optional
iosMSiOSOptionios options optional
androidMSAndroidOptionandroid options optional
onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
\n

MSAndroidOption (for android)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titleSizenumberoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
\n

MSiOSOption (for ios)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
cancelButtonBgColorstringoptional
confirmButtonBgColorstringoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
itemColorstringitem text color optional
\n

iOS Popup: Animation AShowType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeIn1
TypeGrowIn2
TypeShrinkIn3
TypeSlideInFromTop4
TypeSlideInFromBottom5
TypeSlideInFromLeft6
TypeSlideInFromRight7
TypeBounceIn8
TypeBounceInFromTop9
TypeBounceInFromBottom10
TypeBounceInFromLeft11
TypeBounceInFromRight12
\n

iOS Popup: Animation ADismissType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeOut1
TypeGrowOut2
TypeShrinkOut3
TypeSlideOutToTop4
TypeSlideOutToBottom5
TypeSlideOutToLeft6
TypeSlideOutToRight7
TypeBounceOut8
TypeBounceOutToTop9
TypeBounceOutToBottom10
TypeBounceOutToLeft11
TypeBounceOutToRight12
\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal-enduco":{"name":"nativescript-windowed-modal-enduco","version":"6.2.8","license":"Apache-2.0","readme":"

Nativescript Windowed Modal \"apple\" \"android\"

\n

\"npm\n\"npm\n\"Build

\n

This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

\n

Installation

\n
tns plugin add nativescript-windowed-modal
\n

Usage

\n

Code

\n

Call the overrideModalViewMethod() once before starting the app and register the layout element:

\n

Javascript

\n
var windowedModal = require(\"nativescript-windowed-modal\")
windowedModal.overrideModalViewMethod()
\n

Typescript+Angular

\n
import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
registerElement(\"ModalStack\", () => ModalStack)
\n

You can pass extended options like this:

\n
mainPage.showModal(\"./modal\", {
  context: \"I'm the context\",
  closeCallback: (response: string) => console.log(\"Modal response: \" + response),
  dimAmount: 0.5 // Sets the alpha of the background dim
} as ExtendedShowModalOptions)
\n

NativeScript-Vue

\n
// main.js
import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

overrideModalViewMethod()
Vue.registerElement(\"ModalStack\", () => ModalStack)
Vue.use(VueWindowedModal)
\n

You can pass extended options like this:

\n
<script type=\"text/javascript\">
  export default {
    methods: {
      openModalTap() {
        this.$showModal(\"./modal\", {
          props: {},
          fullscreen: false,
          animated: true,
          stretched: false,
          dimAmount: 0.5 // Sets the alpha of the background dim,
        })
      }
    }
  }
</script>
\n

Properties

\n

ExtendedShowModalOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
\n

ModalStack

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypePlatformDefaultDescription
dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
verticalPositionstringbothmiddleUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
horizontalPositionstringbothcenterUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
\n

Layout

\n

Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
    <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
        <StackLayout class=\"modal\">
            <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
        </StackLayout>
    </modal:ModalStack>
</Page>
\n

HTML (Angular)

\n
<ModalStack dismissEnabled=\"true\" class=\"modal-container\">
  <StackLayout class=\"modal\">
    <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
  </StackLayout>
</ModalStack>
\n

Style

\n

You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

\n
.modal {
  margin: 20;
  margin-top: 35;
  border-radius: 8;
  horizontal-align: center;
  vertical-align: middle;
  background-color: white;
}

.modal-container {
  padding: 25;
  padding-bottom: 10;
}
\n

Running the demo app

\n
    \n
  1. Clone this repo
    2. \n
  2. cd src
    3. \n
  3. npm run demo.android, npm run demo.ios, npm run demo.ng.android, or npm run demo.ng.ios
    4. \n
\n

Known Issues

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-content-providers":{"name":"nativescript-content-providers","version":"1.0.0","license":"MIT","readme":"

Develop a NativeScript plugin now (w/ TypeScript)

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. npm install -g typescript
    3. \n
  3. cd myplugin
    4. \n
  4. npm run postclone
    5. \n
  5. npm run setup
    6. \n
  6. Get to work.
    7. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-content-providers
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-ox-button":{"name":"@imagene.me/nativescript-ox-button","version":"2.0.1","license":"Apache-2.0","readme":"

@imagene.me/nativescript-ox-button

\n
ns plugin add @imagene.me/nativescript-ox-button
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-preferences":{"name":"nativescript-akylas-preferences","version":"1.1.11","license":"Apache-2.0","readme":"

\"Twitter

\n

nativescript-akylas-preferences

\n

This plugin allows native preference saving\\loading on iOS and Android

\n\n\n

iOS Prerequisites

\n\n

Android Prerequisites

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-akylas-preferences
\n

Usage

\n
    var prefs = new Preferences();

    //Get existing value
    prefs.getValue(\"name_preference\");

    //Set value
    prefs.setValue(\"name_preference\", \"some new text\");
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
openSettings(): any;Opens the native settings panes
getValue(key: string): any;Gets the value for the preference
setValue(key: string, value: any): void;Sets the passed value to the preference
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-ffmpeg":{"name":"@gavant/nativescript-ffmpeg","version":"0.0.6","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@flypapertech/nativescript-fonticon":{"name":"@flypapertech/nativescript-fonticon","version":"3.0.0","license":"https://github.com/nativescript-community/fonticon/blob/master/LICENSE","readme":"

A simpler way to use font icons with NativeScript

\n

\"MIT\n\"Dependency \"devDependency

\n

The Problem

\n

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

\n\n
.fa {
  font-family: FontAwesome;
}
\n\n
<Label class=\"fa\" text=\"\\uf293\"></Label>
\n

This works but keeping up with unicodes is not fun.

\n

The Solution

\n

With this plugin, you can instead reference the fonticon by the specific classname:

\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
\n

Install

\n
npm install @nativescript-community/fonticon --save
\n

Usage

\n

FontAwesome will be used in the following examples but you can use any custom font icon collection.

\n\n
app/fonts/fontawesome-webfont.ttf
\n\n
.fa {
  font-family: FontAwesome, fontawesome-webfont;
}
\n

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

\n\n
app/font-awesome.css
\n

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

\n\n
import * as application from '@nativescript/core/application';
import {FontIcon, fonticon} from '@nativescript-community/fonticon';

FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
FontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
FontIcon.loadCss();

application.setResources( { fonticon } );
application.run({ moduleName: 'main-page' });
\n\n
<Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (iOS)Demo Ionicons (iOS)
\"Sample1\"\"Sample2\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Demo FontAwesome (Android)Demo Ionicons (Android)
\"Sample3\"\"Sample4\"
\n

Font Awesome 5

\n

In this case, you have to copy and import each ttf file and associate it with the proper class:

\n
.fas {
  font-family: Font Awesome 5 Free, fa-solid-800;
}
.far {
  font-family: Font Awesome 5 Free, fa-regular-400;
}
\n

but still you will import the css only once with the fa prefix:

\n
FontIcon.paths = {
  'fa': 'font-awesome.css'
};
\n

How about NativeScript with Angular?

\n

If using Angular, use this instead:

\n\n

Credits

\n

Idea came from Bradley Gore's post here.

\n

Contributors

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/battery":{"name":"@awarns/battery","version":"1.0.1","license":"Apache-2.0","readme":"

@awarns/battery

\n

\"npm\n\"npm\"

\n

This framework module includes a task that allows to access phone's battery level on demand.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/battery
\n

Usage

\n

After installing and setting up this plugin, you'll have access to a task that allows to acquire the current phone's battery level and the BatteryLevel record that it will output on demand.

\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
acquirePhoneBatteryLevelAcquires phone's current battery level
\n

Acquire phone's battery level

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquireBatteryLevelTask } from '@awarns/battery';

export const demoTasks: Array<Task> = [
  // ... other tasks
  acquireBatteryLevelTask(),
  // ...
];
\n

Task generator parameters:

\n
\n

The task generator takes no parameters.

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('acquirePhoneBatteryLevel')
  .every(1, 'minutes')
  .cancelOn('stopEvent'));

on('batteryLevelAcquired', run('writeRecords'))
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
batteryLevelAcquiredBatteryLevelIndicates that a new battery level snapshot (record) has been acquired
\n

Records

\n

BatteryLevel

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways battery-level
changeChangeAlways none. Never starts or ends, always exists
timestampDateThe local time when the battery level was acquired
valuenumberThe battery level. Always an integer. Ranges from 0 to 100
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vector-icons":{"name":"nativescript-vector-icons","version":"2.0.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cblite-xl":{"name":"nativescript-cblite-xl","version":"1.1.12","license":"Apache-2.0","readme":"

Description

\n

CbLiteXl is a plugin that allows access to the couchbaselite library.\nCurrently, the plugin is only available for android. However, we plan to implement the IOS version.

\n

Installation

\n

To install the plugin play the following command from your nativescript project's root directory\n\ttns plugin add nativescript-cblite-xl

\n

How to use

\n

Below some examples of how to use this plugin

\n

Import

\n

To use the plugin in your code, you can import it like this:

\n
import { CbliteXl } from \"nativescript-cblite-xl\";
\n

In order to use all options allowed by this plugin, you can import all you need like this:

\n
import {
  CbliteXl,
  SelectResult,
  Meta,
  Expression,
  QueryBuilder,
  DataSource,
  Ordering
} from \"nativescript-cblite-xl\";
\n

Instanciation and database creation

\n

You can instanciate the library and create database like that:

\n
this.cbliteXl = new CbliteXl(\"testdatabase\");
\n

Document creation

\n
    let tour = {
      type: \"tour\",
      data: { begin: 100000, end: 200000, id: 3, nested: { attr: 5 } }
    };

    let documentId = this.cbliteXl.createDocument(tour);
    console.log(\"This is your documentId\", documentId);\t
\n

Document fetching

\n
    let tour = his.cbliteXl.getDocument(documentId);

    console.log(\"This is your document\", tour);\t
\n

Document update

\n
    let tour = this.cbliteXl.getDocument(documentId);
    tour.data.nested.attr = 6;

    this.cbliteXl.updateDocument(tour);
\n

Document deletion

\n
this.cbliteXl.deleteDocument(documentId);
\n

Querying

\n
    let query = QueryBuilder.select([SelectResult.all()])
      .from(DataSource.database(this.cbliteXl.getDatabase()))
      .where(
        Expression.property(\"type\")
          .equalTo(Expression.string(\"tour\"))
          .and(Expression.property(\"data.id\").lessThanOrEqualTo(Expression.intValue(18)))
          .and(
            Expression.property(\"data.nested.attr\").equalTo(
              Expression.intValue(24)
            )
          )
      )
      .orderBy([Ordering.property(\"data.id\").descending()])
      .limit(Expression.intValue(1));
      
      const results = this.cbliteXl.getAll(query);

      results.forEach((result) => {
        console.log('Result', result);
      });
\n

Going further

\n

For more information about how to use couchbase-lite using this plugin, you can read the lib documentation here:\nhttps://docs.couchbase.com/couchbase-lite/2.1/java.html#getting-started

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-envinfo":{"name":"nativescript-envinfo","version":"1.0.9","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-midi":{"name":"nativescript-midi","version":"0.0.6","license":"MIT","readme":"

nativescript-midi

\n

A NativeScript plugin for communicating with MIDI devices (e.g. musical instruments or apps).

\n

A basic understanding of the MIDI (Musical Instrument Digital Interface) message protocol is required to use this plugin.

\n

Project status: No Longer Developed / Maintained

\n

This plugin has been designed to allow a uniform interface to be used for MIDI communication on both iOS and Android, however only the iOS platform implementation has been finished. I started to develop the Android implementation, but I ultimately shifted my focus to a different project, and I currently have no plans to finish development or to maintain it for compatibility with new NativeScript versions (> v2).

\n

Installation

\n

Assuming you've already installed the NativeScript CLI:

\n
tns plugin add nativescript-midi
\n

Programming interfaces

\n

An application interacts with the plugin through interfaces which resemble those in Android's MIDI API:

\n\n

For more information on these interfaces, check out the API docs.

\n

Example

\n
import { MidiDeviceManager } from 'nativescript-midi';


let midiDeviceManager = new MidiDeviceManager(),
    midiDevices;

midiDeviceManager.getDevices()
.then(devices => {

    midiDevices = devices; // Save a reference to the devices for later use in the app.

    // Listen for device added / removed / updated events.
    midiDeviceManager.addDeviceAddedListener(deviceAdded => { /* handle added device */ });
    midiDeviceManager.addDeviceRemovedListener(deviceRemoved => { /* handle removed device */ });
    midiDeviceManager.addDeviceUpdatedListener(deviceUpdated => { /* handle updated device (e.g. ports changed) */ });

    // Let's assume for this example that we know there's a device with at least one input port and one output port.
    let device = midiDevices.find(device => device.inputPorts.length && device.outputPorts.length);

    // Here we listen for any messages from the device (i.e. from all outputPorts), but alternatively, you can listen for messages on just a single port with `device.outputPorts[i].addMessageListener()`
    device.addMessageListener((messages, outputPort) => {

        let portIndex = device.outputPorts.indexOf(outputPort);

        // The packets received from a system's MIDI device (i.e. MIDIPacketList on iOS) are automatically parsed into discrete messages for you 👍.
        for (let message of messages) {

            console.log(`Received a MIDI message from outputPort ${portIndex} of device ${device.name}:`);
            console.log(message instanceof Uint8Array); // `true`
            message.forEach((byte, byteIndex) => console.log(`byte ${byteIndex}: ${byte}`));
        }
    });

    console.log(`Sending a message to inputPort 0 of device ${device.name} to play middle-C...`);

    let bytes = new Uint8Array([
        0x90, // \"Note On\" status byte
        0x3C, // Pitch value for middle-C
        0xFF  // Full volume
    ]);

    // Here we send a message to a single input port on the device. Alternatively, you can send the message to *all* of the device's input ports with `device.send()`.
    return device.inputPort[0].send({ bytes });
})
.then(() => console.log(`Successfully finished sending the MIDI message 🎵`))
.catch(error => console.log(`Yikes - something went wrong. ` + error.stack));
\n

Logging

\n

The plugin's classes log information internally. To capture or display this log info, construct the MidiDeviceManager with a logger object that implements a Winston-style logger.

\n
let logger = {

    info(message, metadata) {
        console.log(`INFO: ${message} ${JSON.stringify(metadata)}`);
    },

    warn(message, metadata) {
        console.log(`WARN: ${message} ${JSON.stringify(metadata)}`);
    },

    error(message, metadata) {
        console.log(`ERROR: ${message} ${JSON.stringify(metadata)}`);
    }
};

let midiDeviceManager = new MidiDeviceManager({ logger });
\n

Contributing

\n

Contributions are welcome, especially on the Android work that's needed for the 1.0 release.

\n

Building

\n

This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

\n
npm run build
\n

There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

\n

Linting

\n
npm run lint
\n

Project Dependencies

\n

A MIDI packet (i.e. MIDIPacketList on iOS) can contain multiple MIDI messages, and a single MIDI System Exclusive (SysEx) message can span multiple packets. This detail is hidden from the plugin consumer so that the application just receives an array of messages that have already been parsed and validated.

\n

This message parsing logic is implemented in the midi-message-parser C library, which I am also using within a separate a MIDI hardware product with which this plugin can communicate. The cocoa-midi-message-parser wrapper is used to expose this C library to the NativeScript runtime and to avoid some of the runtime's limitations surrounding C interop (e.g. lack of support for C structs which contain arrays).

\n
nativescript-midi
    |
    |-- cocoa-midi-message-parser
        |
        |-- midi-message-parser
\n

Attribution

\n

Thank you to Pete Goodliffe, author of the open source PGMidi library that is used internally by nativescript-midi.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-plug":{"name":"nativescript-test-plug","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-number":{"name":"nativescript-version-number","version":"1.1.0","license":"MIT","readme":"

NativeScript Version Number Plugin

\n

A dead-simple plugin for retrieving the version number of your NativeScript app.

\n

Installation

\n
tns plugin add nativescript-version-number
\n

Usage

\n

The version number plugin exposes a simple VersionNumber() class with a single instance method named get(). To get the version number of your app, instantiate an instance of VersionNumber and call its get() method.

\n
import { VersionNumber } from \"nativescript-version-number\";

new VersionNumber().get();
\n

The plugin is currently set up to return the CFBundleShortVersionString value from your app’s Info.plist file on iOS, and the android:versionName value from your app’s AndroidManifest.xml file on Android.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdfbox":{"name":"nativescript-pdfbox","version":"0.2.0","license":"Apache-2.0","readme":"

NativeScript PdfBox \"android\"

\n

\"Build

\n

Apache Pdfbox for NativeScript. This plugin allows you to extract the text from a PDF file.

\n

\"Sample

\n

The screenshot is based on the sample.pdf included in the demo project.

\n

Based on:

\n\n

The plugin is currently only avaiable for Android.

\n

Installation

\n
tns plugin add nativescript-pdfbox
\n

Usage

\n
import * as fs from 'tns-core-modules/file-system';
import { PdfBox } from 'nativescript-pdfbox';

const appPath = fs.knownFolders.currentApp().path;
const mySampleFile = appPath + '/sample.pdf';
const removeLineBreaks: boolean = true; // optional, default is false

const pdfbox: PdfBox = new PdfBox();
pdfbox
    .getText(mySampleFile, removeLineBreaks)
    .then(text => {
        this.messageNotRemovedLB = text;
        super.notifyPropertyChange('messageNotRemovedLB', text);
    });
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ios":{"name":"tns-ios","version":"6.5.6","license":"Apache-2.0","readme":"

iOS Runtime for NativeScript

\n

Contains the source code for the NativeScript's iOS Runtime. NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Each mobile platform has its own ecosystem and offers completely different development tools and language(s) - Java for Android and Objective C (Swift) for iOS. In order to translate JavaScript code to the corresponding native APIs some kind of proxy mechanism is needed. This is exactly what the "Runtime" parts of NativeScript are responsible for. The iOS Runtime may be thought of as "The Bridge" between the JavaScript and the iOS world. A NativeScript application for iOS is a standard native package (ipa) which besides the JavaScript files embed the runtime as well.

\n
git clone --recursive git@github.com:NativeScript/ios-runtime.git
\n\n\n\n

Requirements

\n\n

Architecture Diagram

\n

The NativeScript iOS Runtime architecture can be summarized in the following diagram.

\n

\"iOS

\n

For more details on how it works, read the documentation.

\n

Local Development

\n

To be able to open and build {N} iOS Runtime in Xcode you need to configure it for WebKit development and generate the Xcode project files using cmake. To do this execute the following:

\n
sudo ./src/webkit/Tools/Scripts/configure-xcode-for-ios-development
./cmake-gen.sh
open \"cmake-build/NativeScript.xcodeproj\"
\n

After you open the newly generated project in Xcode you can run the TestRunner target or the Gameraww example app.

\n

For more information on WebKit configuration see Building iOS Port section of WebKit's README

\n

Building a Distribution Package

\n

To build the tns-ios npm package run ./build/scripts/package-tns-ios.sh in the root of the repository. The package contains the NativeScript Cocoa Framework, the NativeScript CLI template project and the API metadata generator.

\n

To build the tns-ios-inspector npm package run ./build/scripts/package-tns-ios-inspector.sh in the root of the repository. The package contains the Web Inspector frontend.

\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-square-plugin":{"name":"nativescript-square-plugin","version":"1.0.6","license":"Apache-2.0","readme":"

Nativescript Square Plugin

\n

A simple NativeScript plugin for making charges using Square. Current version supports iOS. Pull requests expanding features or adding android support are welcome.

\n

Installation

\n

npm install nativescript-square-plugin

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jwplayer-web":{"name":"nativescript-jwplayer-web","version":"1.0.4","license":"MIT","readme":"

NativeScript JW Player

\n

This plugin is provides an interface to use native jwplayer android/ios sdks in nativescript.

\n

Register at jwplayer.com,create a Cloud-hosted player and get the script link.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-jwplayer-web
\n

Usage

\n

Typescript/Javascript with XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:jw=\"nativescript-jwplayer-web\">
   <GridLayout>
    <jw:JWPlayerWeb src=\"{{src}}\" play=\"{{onPlay}}\"
        pause=\"{{onPause}}\"></jw:JWPlayerWeb>
</GridLayout>
</Page>
\n

Angular

\n

in app.module.ts

\n
import { registerElement } from \"@nativescript/angular\";
registerElement(
  \"JWPlayerWeb\",
  () => require(\"nativescript-jwplayer-web\").JWPlayerWeb
);
\n
<GridLayout>
  <JWPlayerWeb
    [src]=\"src\"
    (play)=\"onPlay($event)\"
    (pause)=\"onPause($event)\"
  ></JWPlayerWeb>
</GridLayout>
\n\n

Plugin API

\n

You can pass src property for video link and other details:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
optionrequiredtype
linkYesstring
autostartnoboolean
floatingnoboolean
responsivenoboolean
controlsnoboolean
widthnostring(with px)
playlistYesObject
advertisingnoObject
\n

wrap these properties in an object and pass it to the src.

\n

Here is the how playlist and advertising can be set in src:

\n
let src = {};
src[\"playlist\"] = [{ file: \"VIDEO_URL\", label: \"VIDEO_LABEL\" }];
src[\"advertising\"] = {
  client: \"vast\",
  adscheduleid: \"AD_SCHEDULE_ID\",
  schedule: [
    {
      offset: \"pre\", //pre|post|5%,10% etc...
      tag: \"AD_TAG\",
    },
  ],
};
\n

Event list

\n

Change in or initialization will trigger these events

\n

ready;
\nsetupError;
\nremove;
\nadBidRequest;
\nadBidResponse;
\nadBlock;
\nadBreakEnd;
\nadBreakIgnored;
\nadBreakStart;
\nadClick;
\nadCompanions;
\nadComplete;
\nadError;
\nadImpression;
\nadItem;
\nadLoaded;
\nadManager;
\nadMeta;
\nadPause;
\nadPlay;
\nadRequest;
\nadSchedule;
\nadSkipped;
\nadStarted;
\nadTime;
\nadViewableImpression;
\nadWarning;
\nadsManager;
\nbeforeComplete;
\nbeforePlay;
\naudioTracks;
\naudioTrackChanged;
\nbufferChange;
\ncaptionsList;
\ncaptionsChanged;
\ncast;
\ncontrols;
\ndisplayClick;
\nmeta;
\nmetadataCueParsed;
\nautostartNotAllowed;
\nplay;
\npause;
\nplayAttemptFailed;
\nbuffer;
\nidle;
\ncomplete;
\nfirstFrame;
\nerror;
\nwarning;
\nplaybackRateChanged;
\nplaylist;
\nplaylistItem;
\nplaylistComplete;
\nlevels;
\nlevelsChanged;
\nvisualQuality;
\nfullscreen;
\nresize;
\nseek;
\nseeked;
\ntime;
\nviewable;
\nmute;
\nvolume;

\n

Function to manipulate the player

\n
play();

pause();

resizePlayer(size: { width: string, height: string });

triggerAd(tag: string);


setControls(state:boolean);

setFloating(state:boolean);

getMute();

getVolume();

setMute(state: boolean);

//from 1-100
setVolume(volume: number);

getPercentViewable();

getViewable();

getPosition();

getDuration();

seek(position: number);

getFullscreen();

getHeight();

getWidth();

setPlaylistItemCallback(callback);

removePlaylistItemCallback();

getPlaylistItemPromise(index: number);

getQualityLevels();

getCurrentQuality();

getVisualQuality();

setCurrentQuality(index: number);

getPlaybackRate();

//from 0.25 to 4
setPlaybackRate(rate: number);

next();

getPlaylist();

getPlaylistItem();

getPlaylistIndex();

load(playlist: Array<Playlist>);

playlistItem(index: number);

stop();

getState();

getAdBlock();

pauseAd(state: boolean);

playAd(tag: string);

skipAd();

getAudioTracks();

getCurrentAudioTrack();

setCurrentAudioTrack(index: number);

addButton({ img, tooltip, callback, id, btnClass });

addCues(cues);

getControls();

getCues();

getSafeRegion();

removeButton(id: string);

setControls(state: boolean);

setCues(cues);

setCaptions(styles);

getCaptionsList();

getCurrentCaptions();

setCurrentCaptions(index: number);

getBuffer();

stopCasting();
\n

Known issues

\n
    \n
  1. \n

    With fullscreen event, there is always a chromium error. This is a known issue on chromium during fullscreen.

    \n
    2. \n
  2. \n

    Providing width in player configuration gives an error. However, height/width can be provided with resizePlayer() function.

    \n
    3. \n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-salesforce-dmp":{"name":"@essent/nativescript-salesforce-dmp","version":"1.1.0","license":"MIT","readme":"

NativeScript plugin for Salesforce DMP

\n

\"npm

\n

This is a plugin to use the Salesforce DMP SDK (Android v4.3.2, iOS v4.3.0). To use this plugin you need to have an account for Salesforce DMP.

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add @essent/nativescript-salesforce-dmp
\n

Setup (Android Only)

\n

Make sure you add the following permissions to the AndroidManifest.xml file of your app:

\n
<uses-permission android:name=\"android.permission.INTERNET\"/>
<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
\n

Add the following services to the application tag in the AndroidManifest.xml file of your app (example):

\n
<service android:name=\"com.krux.androidsdk.aggregator.EventPublisherService\" android:enabled=\"true\" />
<service android:name=\"com.krux.androidsdk.aggregator.ConsentService\" android:enabled=\"true\" />
\n

Add play-services-ads to the dependencies in the app.gradle file of your app (example):

\n
compile 'com.google.android.gms:play-services-ads:10.2.4'
\n

Usage

\n

To use nativescript-salesforce-dmp you must first import the module:

\n
import { SalesforceDMP, KeyValue } from '@essent/nativescript-salesforce-dmp';
\n

At the launch of your app call initialize with your config id:

\n
SalesforceDMP.getInstance().initialize('YOUR_CONFIG_ID', true);
\n

Consent

\n

Before using Salesforce DMP the user needs to give consent. More information about these flags can be found in this support article.
\nTo set the consent:

\n
const consentAttributes: KeyValue<string> = {
    pr: '1',
    dc: '1',
    al: '1',
    tg: '1',
    cd: '1',
    sh: '0',
    re: '1'
};
SalesforceDMP.getInstance().setConsent(consentAttributes);
\n

To quickly remove all consent flags:

\n
SalesforceDMP.getInstance().removeConsent();
\n

Tracking

\n

To track page views call trackPageView (optionally you can use pageAttributes and userAttributes):

\n
SalesforceDMP.getInstance().trackPageView('TestPage', null, null);
\n

To fire events call fireEvent:

\n
const attributes: KeyValue<string> = {
    event_id: 'YOUR_EVENT_ID', // this attribute is mandatory
    myKey: 'An event value'
};
SalesforceDMP.getInstance().fireEvent('TestEvent', attributes);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tween":{"name":"nativescript-tween","version":"0.0.10","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

\n

\"NPM\"

\n

Installation

\n\n

Be sure to run a new build after adding plugins to avoid any issues.

\n
\n

This is a native wrapper around tween.js

\n

API

\n

It exports the same API as Tween.js

\n

For now grouping, chaining, repeating... are not supported. Just basic tweening.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-datetimeselector":{"name":"@testjg/nativescript-datetimeselector","version":"1.0.0","license":"Apache-2.0","readme":"

@testjg/nativescript-datetimeselector

\n

Installation

\n
ns plugin add @testjg/nativescript-datetimeselector
\n

Usage

\n
// Return Date with hours, minutes and seconds set to zero
const date = await showDateSelector({ okText: 'ok', cancelText: 'cancel' });

// Returns Date
const dateTime = await showDateTimeSelector({ okText: 'ok', cancelText: 'cancel' });

// Returns number of seconds
const time = await showTimeSelector({ okText: 'ok', cancelText: 'cancel' });
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-commons":{"name":"nativescript-nbmaterial-commons","version":"1.0.0","license":"Apache-2.0","readme":"

Common library for nbmaterial packages

\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-videoplayer":{"name":"@essent/nativescript-videoplayer","version":"5.0.0","license":"MIT","readme":"

NativeScript Video Player

\n

\"npm

\n

A NativeScript plugin to provide the ability to play local and remote videos.

\n
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

npm i @essent/nativescript-videoplayer

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android MediaPlayeriOS AVPlayer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample\"Sample
\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:VideoPlayer=\"nativescript-videoplayer\">
        <StackLayout>

            <VideoPlayer:Video id=\"nativeVideoPlayer\"
            controls=\"true\" loop=\"true\" autoplay=\"false\" height=\"280\"
            src=\"~/videos/big_buck_bunny.mp4\" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>
\n
import { Video } from 'nativescript-videoplayer';

const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
// Setting event listeners on the Video
video.on(Video.pausedEvent, () => {
  console.log('Video has been paused.');
});

video.on(Video.mutedEvent, () => {
  console.log('Video has been muted.');
});

// changing the src
video.src = 'some video file or url';

// set loop
video.loop = false;
\n

Angular NativeScript Usage

\n
// somewhere at top of your component or bootstrap file
import { registerElement } from \"nativescript-angular/element-registry\";
import { Video } from 'nativescript-videoplayer';
registerElement(\"VideoPlayer\", () => Video);
// documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
\n

With AngularNative you have to explicitly close all components so the correct template code is below.

\n
  <VideoPlayer
      src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
      autoplay=\"true\"
      height=\"300\"></VideoPlayer>
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
srcThe src file for the video. Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.
autoplay - (boolean)Set if the video should start playing as soon as possible or to wait for user interaction.
controls - (boolean)Set to use the native video player's media playback controls.
muted - (boolean)Mutes the native video player.
loop - (boolean)Sets the native video player to loop once playback has finished.
fill - (boolean)If true, the aspect ratio of the video will not be honored and it will fill the entire space available.
observeCurrentTime - (boolean)If true, currentTimeUpdated callback is possible.
headers - (Map<string, string>)Set headers to add when loading a video from URL.
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
playStart playing the video.
pausePause the video
seekToTime(time: number)Seek the video to a time (milliseconds)
getCurrentTimeReturns the current time in the video duration (milliseconds)
getDurationReturns the current time in the video duration (milliseconds)
destroyDestroy the video player and free resources
mute(boolean)If true, mutes the video. If false, unmute the video.
setVolume(volume: number)Set the volume - Must be between 0 and 1.
ANDROID ONLY - stopStop the playback - this resets the player and remove the video src
\n

Observable Properties

\n\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
errorEventThis event fires when an error in the source code is thrown.
playbackReadyEventThis event fires when the video is ready.
playbackStartEventThis event fires when video starts playback.
seekToTimeCompleteEventThis event fires when seeking is complete.
currentTimeUpdatedEventThis event fires when the current time of playing video is changed.
finishedEventThis event fires when the video is complete.
mutedEventThis event fires when video is muted.
unmutedEventThis event fires when video is unmutedEvent.
pausedEventThis event fires when video is paused.
volumeSetEventThis event fires when the volume is set.
\n

iOS Logging

\n

When running the iOS Simulator, after playing a video the iOS system may write\nlog messages to the console every few seconds of the form

\n
[aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
\n

They will continue being logged even after the video has been properly destroyed.\nThese messages can be safely ignored. To turn them off completely, run the following\ncommand in your shell before running tns run ios:

\n
export SIMCTL_CHILD_OS_ACTIVITY_MODE=\"disable\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-sqlite":{"name":"@testjg/nativescript-sqlite","version":"1.0.0","license":"Apache-2.0","readme":"

@testjg/nativescript-sqlite

\n

Installation

\n
ns plugin add @testjg/nativescript-sqlite
\n

Usage

\n

You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

\n
import { openOrCreate, deleteDatabase } from \"@testjg/nativescript-sqlite\";

const sqlite = openOrCreate(\"path/to/db\");
sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
sqlite.transaction(cancelTransaction => {
    // Calling cancelTransaction will rollback all changes made to db
    names.forEach((name, id) =>
        sqlite.execute(
            \"INSERT INTO names (id, name) VALUES (?, ?)\",
            [id, name]
        )
    );
});
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/detox":{"name":"@nativescript/detox","version":"1.0.1","license":"Apache-2.0","readme":"

@nativescript/detox

\n

Easily add Detox end-to-end testing to your NativeScript apps!

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n
\n

Table of Contents

\n
    \n
  1. Installation
    2. \n
  2. Global Setup
    3. \n
  3. Project Setup
    4. \n
  4. Usage
    5. \n
  5. Running Tests
    6. \n
  6. Troubleshooting
    7. \n
\n

Installation

\n
ns plugin add @nativescript/detox
\n

Global Setup

\n

The full setup requirements can be found here but the minimal setup steps are as follows:

\n

Install Detox command line tools (detox-cli)

\n
npm install -g detox-cli
\n

Install applesimutils (iOS)

\n
brew tap wix/brew
brew install applesimutils
\n

Project Setup

\n

Install the Detox package to your NativeScript project

\n
npm install detox --save-dev
\n

Install Jest

\n
npm install jest jest-cli jest-circus --save-dev --no-package-lock
\n

Initialize Detox

\n
detox init -r jest
\n

If things go well, you should to have this set up:

\n\n

There should also be a file called .detoxrc.json in your project root.

\n

Configure Detox

\n

Detox must be configued to know the location of the iOS and Android app binary as well as what emulator/simulator to use.

\n

Open .detoxrc.json and make the following modifications under apps and devices.

\n\n

Here is a full example of a Detox configuration:

\n
{
  \"testRunner\": \"jest\",
  \"runnerConfig\": \"e2e/config.json\",
  \"skipLegacyWorkersInjection\": true,
  \"apps\": {
\t\"ios\": {
\t\t\"type\": \"ios.app\",
\t\t\"binaryPath\": \"platforms/ios/build/Debug-iphonesimulator/[APP_NAME].app\",
\t\t\"build\": \"ns build ios\"
\t},
\t\"android\": {
\t\t\"type\": \"android.apk\",
\t\t\"binaryPath\": \"platforms/android/app/build/outputs/apk/debug/app-debug.apk\",
\t\t\"build\": \"ns build android --detox\"
\t}
  },
  \"devices\": {
\t\"simulator\": {
\t\t\"type\": \"ios.simulator\",
\t\t\"device\": {
            \"type\": \"iPhone 11 Pro\"
\t\t}
\t},
\t\"emulator\": {
\t\t\"type\": \"android.emulator\",
\t\t\"device\": {
\t\t\t\"avdName\": \"Pixel_4_API_30\"
\t\t}
\t}
  },
  \"configurations\": {
    \"ios\": {
        \"device\": \"simulator\",
        \"app\": \"ios\"
    },
    \"android\": {
        \"device\": \"emulator\",
        \"app\": \"android\"
    }
  }
}
\n
\n

Note: A default NativeScript Android project uses 17 as the minimum SDK, but Detox requires >=21. Remove or modify the minSdkVersion in your App_Resources/Android/app.gradle.

\n
\n

Add Resource ID (Android Only)

\n

In order to use the automationText property in NativeScript it must be enabled by adding a custom resource ID.

\n

Create a file called ids.xml in App_Resources/Android/src/main/res/values/ and add the following:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <item type=\"id\" name=\"nativescript_accessibility_id\"/>
</resources>
\n

Allow Local Networking (iOS Only)

\n

Dependending on your setup iOS may not be able to communicate with Detox off the bat. In that case, you need to add the following to your Info.plist file to allow for local networking requests.

\n
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>
\n

Usage

\n

Read through this tutorial written by Detox about writing your first test. Nearly all of the things specified towards React Native apps also apply to NativeScript apps.

\n

Get started by opening the default test scenario in e2e/firstTest.e2e.js.

\n
describe('Example', () => {
\tbeforeEach(async () => {
\t\tawait device.reloadReactNative();
\t});

\tit('should have welcome screen', async () => {
\t\tawait expect(element(by.text('Sergio'))).toBeVisible();
\t});
});
\n

This example creates a testing scenario called Example and has a single test inside of it called should have welcome screen.

\n

Matchers

\n

Detox uses matchers to find elements in your UI to interact with.

\n

You can use NativeScript's automationText property to find your UI elements using Detox's by.id() matcher.

\n

Example:

\n
<Button text=\"Tap Me!\" automationText=\"testButton\"></Button>
\n
await element(by.id('testButton')).tap();
\n

Actions

\n

Once you find your UI element you can use an action on it such as tap() to simulate user interaction.

\n

You should now be able to write tests to simulate user behavior and test for expected results.

\n

Running Tests

\n

Building

\n

Build your app for testing using the following command:

\n
detox build -c ios|android
\n

Testing

\n

Run your tests with the folling command:

\n
detox test -c ios|android
\n

NOTE: If using an Android emulator, Detox will disable animations when the tests are ran. Animations will remain disabled after they are finished. This can be very annoying when you are actively developing. You can re-enable animations by running this helper script from your project's directory ./node_modules/.bin/enable-animations.

\n

To make this even easier I would suggest adding these scripts to your package.json.

\n
{
\t\"scripts\": {
\t\t\"e2e:android:build\": \"detox build -c android\",
\t\t\"e2e:android:test\": \"detox test -c android && ./node_modules/.bin/enable-animations\",
\t\t\"e2e:ios:build\": \"detox build -c ios\",
\t\t\"e2e:ios:test\": \"detox test -c ios\"
\t}
}
\n

Now to build and run tests you would run:

\n

Android:

\n
npm run e2e:android:build
npm run e2e:android:test
\n

iOS:

\n
npm run e2e:ios:build
npm run e2e:ios:test
\n

Troubleshooting

\n

Detox requires a minimum SDK version of 21, so if you get the following error, change the minSdkVersion to 21 in App_Resources/Android/app.gradle.

\n
Execution failed for task ':app:processDebugAndroidTestManifest'.
Manifest merger failed : uses-sdk:minSdkVersion 17 cannot be smaller than version 18 declared in library [com.wix:detox:17.6.1] /Users/user/.gradle/caches/transforms-2/files-2.1/91a3acd87d710d1913b266ac114d7001/jetified-detox-17.6.1/AndroidManifest.xml as the library might be using APIs not available in 17
        Suggestion: use a compatible library with a minSdk of at most 17,
                or increase this project's minSdk version to at least 21,
                or use tools:overrideLibrary=\"com.wix.detox\" to force usage (may lead to runtime failures)

Command ./gradlew failed with exit code 1
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitterbang":{"name":"nativescript-twitterbang","version":"2.0.0","license":"MIT","readme":"

README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-temp-sms":{"name":"nativescript-temp-sms","version":"1.0.2","license":"MIT","readme":"

nativescript-temp-sms

\n

Sending sms without user interaction.

\n

var smsManager = android.telephony.SmsManager.getDefault();

\n

smsManager.sendTextMessage("0123232332",null,"Hello",null,null);

\n

(Optional) Prerequisites / Requirements

\n

To send sms without user interaction on Android your app must request permission to do so. The following must be in your app's AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.SEND_SMS\" />
\n

iOS sms feature will soon be implemented.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-temp-sms
\n

Usage

\n

To use the module you must first require() it from your project's node_modules directory:

\n

After you have a reference to the module you can then call the available methods.

\n
```js\n\tvar temp = require( "nativescript-temp-sms" );\n\ttemp.sms(number,messageText);\n```\n
\n

Parameters:

\n

number: SMS number to use.

\n

messageText: String to send.

\n

License

\n

MIT, 2017

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dante1304/nativescript-google-maps":{"name":"@dante1304/nativescript-google-maps","version":"1.0.42","license":"Apache-2.0","readme":"

@dante1304/google-maps

\n
ns plugin add @dante1304/nativescript-google-maps
\n

Usage

\n

NativeScript plugin for the Google Maps SDK

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

\n

Prerequisites

\n

iOS - Cocoapods must be installed.

\n

Android - The latest version of the Google Play Services SDK must be installed.

\n

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

\n

Configure API Key for Android

\n

Start by copying the necessary template resource files in to the Android app resources folder:

\n
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
\n

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

\n

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

\n
<meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"@string/nativescript_google_maps_api_key\" />
\n

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Configure API Key for iOS

\n

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

\n
if (application.ios) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, modify your app.module.ts as follows:

\n
import * as platform from \"platform\";
declare var GMSServices: any;

....

if (platform.isIOS) {
    GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Adding the MapView

\n

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

\n
<!-- /app/main-page.xml -->

<Page
    xmlns=\"http://www.nativescript.org/tns.xsd\"
    xmlns:maps=\"nativescript-google-maps-sdk\"
>
    <GridLayout>
        <maps:mapView
            latitude=\"{{ latitude }}\"
            longitude=\"{{ longitude }}\"
            zoom=\"{{ zoom }}\"
            bearing=\"{{ bearing }}\"
            tilt=\"{{ tilt }}\"
            mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
            padding=\"{{ padding }}\"
            mapReady=\"onMapReady\"
            markerSelect=\"onMarkerSelect\"
            markerBeginDragging=\"onMarkerBeginDragging\"
            markerEndDragging=\"onMarkerEndDragging\"
            markerDrag=\"onMarkerDrag\"
            cameraChanged=\"onCameraChanged\"
            cameraMove=\"onCameraMove\"
        />
    </GridLayout>
</Page>
\n

Properties

\n

The following properties are available for adjusting the camera view:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
latitudeLatitude, in degrees: number
longitudeLongitude, in degrees: number
zoomZoom level (described here): number
bearingBearing, in degrees: number
tiltTilt, in degrees: number
paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
mapAnimationsEnabledWhether or not to animate camera changes: Boolean
\n

Events

\n

The following events are available:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
mapReadyFires when the MapView is ready for use
myLocationTappedFires when the 'My Location' button is tapped
coordinateTappedFires when a coordinate is tapped on the map
coordinateLongPressFires when a coordinate is long-pressed on the map
markerSelectFires when a marker is selected
markerBeginDraggingFires when a marker begins dragging
markerEndDraggingFires when a marker ends dragging
markerDragFires repeatedly while a marker is being dragged
markerInfoWindowTappedFires when a marker's info window is tapped
markerInfoWindowClosedFires when a marker's info window is closed
shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
cameraChangedFires after the camera has changed
cameraMoveFires repeatedly while the camera is moving
indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
indoorLevelActivatedFires when the level of the focused building changes
\n

Native Map Object

\n

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

\n

UI Settings

\n

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription and Data Type
compassEnabledWhether the compass is enabled or not: Boolean
indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
rotateGesturesEnabledWhether the compass is enabled or not: Boolean
scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
\n

Styling

\n

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

\n

Angular

\n

Use this.mapView.setStyle(<MapStyle>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <MapStyle> type was imported from the plugin as { MapStyle }.

\n

Basic Example

\n
//  /app/main-page.js

var mapsModule = require(\"dante1304/nativescript-google-maps\");

function onMapReady(args) {
    var mapView = args.object;

    console.log(\"Setting a marker...\");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = \"Sydney\";
    marker.snippet = \"Australia\";
    marker.userData = { index : 1};
    mapView.addMarker(marker);

    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log(\"Clicked on \" +args.marker.title);
}

function onCameraChanged(args) {
    console.log(\"Camera changed: \" + JSON.stringify(args.camera));
}

function onCameraMove(args) {
    console.log(\"Camera moving: \"+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;
\n

Usage with Angular

\n
// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from \"nativescript-angular/element-registry\";

// Important - must register MapView plugin in order to use in Angular templates
registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)=\"onMapReady($event)\"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild(\"MapView\") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log(\"Map Ready\");

}
\n

Marker clustering

\n

To setup the marker cluster use MapView's setupMarkerCluster instead of adding markers to map like this:

\n
function onMapReady(args) {
\tvar mapView = args.object;
\tvar markers = [];

\tfor (i = 0; i < 5; i++) {
\t\tvar marker = new mapsModule.Marker();
\t\tmarker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.2);
\t\tmarker.title = `Marker ${i + 1}`;
\t\tmarker.snippet = `Marker ${i + 1}`;
\t\tmarker.userData = { index: i };
\t\tmarkers.push(marker);
\t}

\t// The second argument is the minimum number of items that should form a cluster
\tmapView.setupMarkerCluster(markers, 2);

\t// Disabling zoom gestures
\tmapView.settings.zoomGesturesEnabled = false;
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intro-slides":{"name":"nativescript-intro-slides","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-intro-slides/blob/master/LICENSE"},"readme":"

#Deprecated NativeScript Intro Slides for iOS and Android

\n

I've renamed the project NativeScript-Slides since intro slides seemed limiting in its uses. The project has move to here\n###Not just for intro slides any more! Great for Image Carousels too! ###

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-indicator-new":{"name":"nativescript-loading-indicator-new","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-loading-indicator-new/blob/master/LICENSE"},"readme":"

nativescript-loading-indicator-new

\n

Note: this plugin is not being actively maintained.

\n

nativescript-loading-indicator-new is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

\n

Under the hood, we use MBProgressHUD on iOS, and ProgressDialog on Android.

\n

Installation

\n
tns plugin add nativescript-loading-indicator-new
\n

Example

\n
var LoadingIndicator = require(\"nativescript-loading-indicator-new\").LoadingIndicator;

// or with TypeScript:
// import {LoadingIndicator} from \"nativescript-loading-indicator-new\";

var loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
var options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: \"%1d/%2d\",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: \"Additional detail note!\",
    square: false,
    margin: 10,
    dimBackground: true,
    color: \"#4B9ED6\",
    mode: // see iOS specific options below
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Options

\n\n

Android Specific

\n\n

iOS Specific

\n\n

Quick Mode Reference:

\n\n

Screenshots

\n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-proximiio-unified-maps":{"name":"nativescript-proximiio-unified-maps","version":"1.0.8","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telerik-analytics":{"name":"nativescript-telerik-analytics","version":"1.0.8","license":"See LICENSE file","readme":"

Telerik Analytics Plugin for NativeScript

\n\n

Getting started

\n
    \n
  1. \n

    Obtain an AppId

    \n

    Create a new application in Telerik Platform by choosing the Native application type.

    \n
    2. \n
  2. \n

    Enable Analytics

    \n

    Select Analytics from the left navigation menu and click Enable Analytics.

    \n
    3. \n
  3. \n

    Create a new NativeScript application

    \n
     tns create MyApp\n
    \n

    or use an existing one.

    \n
    4. \n
  4. \n

    Add the Analytics plugin (from npm). This will install the nativescript-telerik-analytics plugin in node_modules in the root of the project. When adding a new platform (or using an existing one) the plugin will be added there as well. Go to the application folder and add the Analytics plugin:

    \n
     tns plugin add nativescript-telerik-analytics\n
    \n
    5. \n
  5. \n

    Go to the application folder and add the Android (or iOS) platform to the application:

    \n
     tns platform add android\n
    \n
    6. \n
  6. \n

    Initialize the plugin and start a new session in the onLaunch event (app.js):

    \n
    var application = require('application');
    application.mainModule = 'main-page';
    application.cssFile = './app.css';

    application.on(application.launchEvent, function(context) {
        var Analytics = require('nativescript-telerik-analytics');
        Analytics.init({ appId: 'oamq6lixk0rak4dl' });
        Analytics.start();
    });

    application.start();
    \n
    7. \n
  7. \n

    Track some events in your application:

    \n
    var Analytics = require('nativescript-telerik-analytics'),
        timer = require('timer');

    Analytics.trackEvent('MyCategory.MyEvent');

    Analytics.trackValue('myvalue', 245);

    var timingScope = Analytics.trackTimingStart('mytiming');
    timer.setTimeout(function() {
        timingScope.stop(); // or timingScope.cancel(); if you want to ignore the timing
    }, 3500);

    Analytics.trackTimingRaw('myrawtiming', 1300); // track timing of 1300 ms

    try {
        throw new Error('error message');
    } catch (e) {
        Analytics.trackException(e, 'some error context');
    }
    \n
    8. \n
  8. \n

    Attach your phone to the PC, ensure adb devices command lists it and run the app on the phone:

    \n
     tns run android\n
    \n
    9. \n
\n

API

\n

To use the Analytics plugin you need to require the nativescript-telerik-analytics module:

\n
var Analytics = require('nativescript-telerik-analytics');
\n

And then call any of the available methods on it:

\n\n

Troubleshooting

\n

In case the application doesn't work as expected, here are some things you can verify:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-core":{"name":"nativescript-material-core","version":"3.3.2","license":"Apache-2.0","readme":"

Nativescript Material Core

\n

Core module for all Nativescript material components

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@danvick/ngx-translate-nativescript-loader":{"name":"@danvick/ngx-translate-nativescript-loader","version":"3.0.1","license":"MIT","readme":"

Description

\n

A loader for ngx-translate that loads localally stored translations for NativeScript.

\n\n\n \"Version\"\n\n\n\t\"Size\"\n\n\n\"Downloads\"\n\n\n

Installation:

\n
npm i @ngx-translate/core --save
npm i @danvick/ngx-translate-nativescript-loader --save
\n

Usage:

\n
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { NativeScriptLoader } from '@danvick/ngx-translate-nativescript-loader';

export function createTranslateLoader() {
    return new NativeScriptLoader(\"./assets/i18n/\", \".json\");
}

@NgModule({
\timports: [
\t\tNativeScriptModule,
\t\tTranslateModule.forRoot({
\t\t\tloader: {
\t\t\t\tprovide: TranslateLoader,
\t\t\t\tuseFactory: createTranslateLoader
\t\t\t}
\t\t})
\t],
\tbootstrap: [AppComponent]
})
export class AppModule { }
\n

The assumed default location for your translation is ./assets/i18n/ and default assumed format extesion is .json.\nSo you could ignore the arguments all together and have your createTranslateLoader() function as:

\n
export function createTranslateLoader() {
    return new NativeScriptLoader();
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-execution":{"name":"nativescript-background-execution","version":"1.0.0","license":"MIT","readme":"

Nativescript background execution

\n

Features

\n\n

Commands

\n\n

License

\n

MIT © Cristian Pandele

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-here":{"name":"nativescript-here","version":"0.0.1","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"\n\"Build

\n

NativeScript Here

\n

Prerequisites

\n

You need a Here APP ID & APP Code so sign up with Here. Once you've registered go to your Project > (Your Project Name) > Generate `Keys for your Starter SDKs.

\n

Installation

\n
tns plugin add nativescript-here
\n

Android

\n

Add the following to your ApplicationManifest.xml anywhere after your application opening tag an before it's closing

\n

<meta-data android:name=\"com.here.android.maps.appid\" android:value=\"YOUR_APP_ID\"/>
<meta-data android:name=\"com.here.android.maps.apptoken\" android:value=\"YOUR_APP_CODE\"/>
\t\t
\n

IOS

\n

Place the following in your app.ts , app.js or main.ts

\n
import { Here } from 'nativescript-here';

import * as application from 'tns-core-modules/application';
import { Here } from 'nativescript-here';

application.on('launch', () => {
    Here.init('APP_ID', 'APP_CODE');
});
\n

Usage

\n

IMPORTANT: Make sure you include xmlns:map="nativescript-here" on the Page element

\n
<map:Here mapStyle=\"hybrid_day\" mapReady=\"onMapReady\" row=\"3\" id=\"map\" zoomLevel=\"12\"  disableZoom=\"false\" disableScroll=\"false\" latitude=\"10.6689243\" longitude=\"-61.5315486\"/>
\n
import { HereMarker } from 'nativescript-here';
export function onMapReady(event){
    const map = event.object;
        map.addMarkers(<HereMarker[]>[{
            id: 1,
            latitude: 10.6689243,
            longitude: -61.5315486,
            title: 'Home',
            description: 'Hmmm ... 🤔',
            draggable: true,
            onTap: (marker) => {
                const updatedMarker = Object.assign({}, marker, {
                    selected: !marker.selected
                });
                map.updateMarker(updatedMarker);
            }
        }]);
}
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
mapStylenormal_day
latitude0Set the center of the map by passing this in
longitude0.. and this as well
zoomLevel0
mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nsjumioplugin":{"name":"nativescript-nsjumioplugin","version":"1.0.9","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elm-nativescript":{"name":"elm-nativescript","version":"0.0.3","license":"MIT","readme":"

Svelte Native

\n

Create Mobile applications using native widgets via Svelte and NativeScript.

\n

See https://svelte-native.technology for docs and tutorials

\n

\"todo

\n

Features

\n

Svelte-Native includes Svelte specific integrations such as

\n\n

Work In Progress

\n

While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

\n\n

Installation

\n

You can get started developing with this using the latest template

\n
$ npm install -g nativescript
$ tns create myapp --template @nativescript/template-blank-svelte
\n

A fresh Svelte Native app will be found in the myapp folder

\n

Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

\n

Usage

\n

App.svelte

\n
<page>
    <actionBar title=\"Svelte Native\"></actionBar>
    <stackLayout>
        <label text={msg}></label>
        <button text=\"Change\" on:tap=\"{toggle}\"></button>
    </stackLayout>
</page>

<script>
  export let msg = 'Hello World!'
  const toggle = () => {
      msg = \"Hi from svelte\"
  }
</script>
\n

Main.ts

\n
import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: \"Hi from launcher\"});
\n

Examples

\n

Svelte Native HackerNews

\n

Simple HackerNews client in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-hackernews for the repo.

\n

\"HackerNews

\n

Svelte Native Grocery

\n

Grocery app example in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-grocery for the repo.

\n

\"Grocery

\n

Svelte Native Realworld

\n

Realworld implementation app in Svelte Native.

\n

See https://github.com/halfnelson/svelte-native-realworld for the repo.

\n

\"Realworld

\n

Credits

\n

The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-facebook-login":{"name":"@bigin/ns-facebook-login","version":"1.0.10","license":"Apache-2.0","readme":"

@bigin/ns-facebook-login

\n

This plugin is based on nativescript-facebook. We just upgraded to NS7 and add some tweaks to make it works.

\n\n\n\n

Installation

\n
ns plugin add @bigin/ns-facebook-login
\n

Configuration

\n

Android

\n

Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put provider under <application>
\n{facebook_app_id} is your app id

\n
<provider android:authorities=\"com.facebook.app.FacebookContentProvider{facebook_app_id}\"
\t\t\t\t  android:name=\"com.facebook.FacebookContentProvider\"
\t\t\t\t  android:exported=\"true\"/>
\n

iOS

\n

Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains CFBundleURLTypes and LSApplicationQueriesSchemes like below:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
    <dict>
    ...

        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>fb{facebook_app_id}</string>
                </array>
            </dict>
        </array>
\t\t<key>LSApplicationQueriesSchemes</key>
        <array>
            <string>fbapi</string>
            <string>fb-messenger-share-api</string>
            <string>fbauth2</string>
            <string>fbshareextension</string>
        </array>
    </dict>
</plist>
\n
\n

Make sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found here.

\n
\n

Usage

\n

NativeScript Core

\n

Initialization

\n

Call init of nativescript-facebook module on application launch.

\n

app.ts

\n
import * as application from 'application';
import { init } from \"nativescript-facebook\";

application.on(application.launchEvent, function (args) {
    init(\"{facebook_app_id}\");
});

application.start({ moduleName: \"login-page\" });
\n

Login

\n

Facebook Login Button

\n

Add Facebook login button as simple as adding a Facebook:LoginButton tag in your view. Then you can define login event handler name. In the example below - onLogin.

\n

login-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Facebook:LoginButton login=\"{{ onLogin }}\"></Facebook:LoginButton>

    ...

</Page>
\n

Implement onLogin event handler in your view-model. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

\n

login-view-model.ts

\n
import { Observable } from 'data/observable';
import { Facebook:LoginButton } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  onLogin(eventData: LoginEventData) {
    if (eventData.error) {
      alert(\"Error during login: \" + eventData.error.message);
    } else {
      console.log(eventData.loginResponse.token);
    }
  }
}
\n

Custom Login Button

\n

Add a button and define a tap event handler in your login view.

\n

login-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Button tap=\"{{ login }}\" text=\"Log in (custom)\"></Button>

    ...

</Page>
\n

In the view model implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin. In the example below the login method from the plugin is imported as fbLogin.

\n
\n

BEST PRACTICE:\nImport only the methods that you need instead of the entire file. It is crucial when you bundle your app with webpack.

\n
\n

login-view-model.ts

\n
import { Observable } from 'data/observable';
import { login as fbLogin } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  login() {
    fbLogin((err, fbData) => {
      if (err) {
        alert(\"Error during login: \" + err.message);
      } else {
        console.log(fbData.token);
      }
    });
  }

}
\n

Log out

\n

Facebook Logout Button

\n

Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your view. Then you can define logout event handler name. In the example below - onLogout.

\n

home-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Facebook:LoginButton logout=\"{{ onLogout }}\"></Facebook:LoginButton>

    ...

</Page>
\n

Implement onLogout event handler in your view-model.

\n

home-view-model.ts

\n
import { Observable } from 'data/observable';

export class HomeViewModel extends Observable {

  onLogout() {
    console.log(\"logged out\");
  }

}
\n

Custom Logout Button

\n

Add a button and define a tap event handler in your view. In this case - logout

\n

home-page.xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:Facebook=\"nativescript-facebook\"
  loaded=\"pageLoaded\" class=\"page\">

    ...

    <Button tap=\"{{ logout }}\" text=\"Log out (custom)\"></Button>

    ...

</Page>
\n

In the view model implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

\n

home-view-model.ts

\n
import { Observable } from 'data/observable';
import { logout as fbLogout } from \"nativescript-facebook\";

export class LoginViewModel extends Observable {

  logout() {
    fbLogout(() => {
      console.log(\"logged out\");
    });
  }

}
\n

Share

\n

Create Sharing Content

\n

For sharing, you have to create sharing content first.\nCurrently the available content types are:

\n\n

You can see more information from https://developers.facebook.com/docs/sharing/overview#content and https://developers.facebook.com/docs/sharing/messenger#share-types

\n
import {
    LoginEventData,
    getCurrentAccessToken,
    createShareLinksContent,
    createSharePhotosContent,
    createShareMessageGenericTemplateContent,
    MessageGenericTemplateImageAspectRatio,
    showShareDialog,
    showMessageDialog,
    canShareDialogShow,
    canMessageDialogShow
} from 'nativescript-facebook';

const linkContent = createShareLinksContent('https://www.nativescript.org',
            'Create Native iOS and Android Apps With JavaScript',
            {
                hashtag: '#Nativescript'
            });

// you can also pass in imageUrls as string[] in here
const logoImage = fromResource('logo');
const photosContent = createSharePhotosContent([logoImage], false, {
              hashtag: '#Nativescript'
          });
const GenericTemplate = createShareMessageGenericTemplateContent({
            element: {
                title: 'Nativescript',
                subtitle: 'Create Native iOS and Android Apps With JavaScript',
                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
                button: {
                    title: 'Check Doc',
                    url: 'https://docs.nativescript.org'
                },
                defaultAction: {
                    title: 'Go HomePage',
                    url: 'https://www.nativescript.org'
                }
            },
            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
            pageID: 'testestsett',
            imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
        });
\n

Facebook Share Button

\n
<Facebook:ShareButton content=\"{{ linkContent }}\"></Facebook:ShareButton>
\n

Facebook Send Button

\n

If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

\n
<Facebook:SendButton content=\"{{ genericContent }}\"></Facebook:SendButton>
\n

Show Share Dialog Programmatically

\n

Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

\n
showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});
\n

Hide Custom Button If Can't share

\n

You can use this method to check if the content can be shared and hide the custom button if can't

\n
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
\n
<Button tap=\"{{ onShareDialogPhotos }}\" text=\"Open Share dialog (photos)\" visibility=\"{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}\"></Button>
<Button tap=\"{{ onSendGenericDialog }}\" text=\"Share Message Generic Template\" visibility=\"{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}\"></Button>
\n

NativeScript Angular

\n

Initialization

\n

Call init of nativescript-facebook module on application launch.

\n

app.module.ts

\n
...
import * as application from 'application';
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { NativeScriptFacebookModule } from \"nativescript-facebook/angular\";

let nsFacebook = require('nativescript-facebook');

application.on(application.launchEvent, function (args) {
    nsFacebook.init(\"{facebook_app_id}\");
});
...
@NgModule({
    ...
    imports: [
        AppRoutingModule,
        NativeScriptModule,
        NativeScriptFacebookModule,
        ...
    ],
    ...
})
...
\n

Login

\n

Facebook Login Button

\n

Add Facebook login button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define login event handler name. In the example below - onLogin. Bare in mind the $event argument.

\n

pages/login/login.component.html

\n
<StackLayout>
\t<FacebookLoginButton (login)=\"onLogin($event)\"></FacebookLoginButton>
</StackLayout>
\n

Implement onLogin event handler in your component. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

\n

pages/login/login.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"login\",
    templateUrl: \"login.component.html\",
})
export class LoginComponent {
    onLogin(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert(\"Error during login: \" + eventData.error);
        } else {
            console.log(eventData.loginResponse.token);
        }
    }
}
\n

Custom Login Button

\n

Add a button and define a tap event handler in your login component html.

\n

pages/login/login.component.html

\n
<StackLayout>
\t<button text=\"Login Button (custom)\" (tap)=\"login()\"></button>
</StackLayout>
\n

In the component implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin.

\n

pages/login/login.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"login\",
    templateUrl: \"login.component.html\",
})
export class LoginComponent {
    login() {
        Facebook.login((error, fbData) => {
            if (error) {
                alert(\"Error during login: \" + error.message);
            } else {
                console.log(fbData.token);
            }
        });
    }
}
\n

Logout

\n

Facebook Logout Button

\n

Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define logout event handler name. In the example below - onLogout. Bare in mind the $event argument.

\n

pages/home/home.component.html

\n
<StackLayout>
\t<FacebookLoginButton (logout)=\"onLogout($event)\"></FacebookLoginButton>
</StackLayout>
\n

Implement onLogout event handler.

\n

pages/home/home.component.ts

\n
import { Component } from \"@angular/core\";
import * as Facebook from \"nativescript-facebook\";

@Component({
    selector: \"home\",
    templateUrl: \"home.component.html\",
})
export class HomeComponent {
    onLogout(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert(\"Error during login: \" + eventData.error);
        } else {
            console.log(\"logged out\");
        }
    }
}
\n

Custom Logout Button

\n

Add a button and define a tap event handler in your view. In this case - logout

\n

pages/home/home.component.html

\n
<StackLayout>
\t<button text=\"Log out (custom)\" (tap)=\"logout()\"></button>
</StackLayout>
\n

In the component implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

\n

pages/home/home.component.ts

\n
import { Component } from \"@angular/core\";
import { logout as fbLogout } from \"nativescript-facebook\";

@Component({
    selector: \"home\",
    templateUrl: \"home.component.html\",
})
export class AppComponent {
  logout() {
    fbLogout(() => {
      console.log(\"logged out\");
    });
  }
}
\n

Share

\n

Create Sharing Content

\n

Read Nativescript chapter for this

\n

Facebook Share Button

\n
<FacebookShareButton [content]=\"linkContent\"></FacebookShareButton>
\n

Facebook Send Button

\n

If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

\n
<FacebookSendButton [content]=\"genericContent\"></FacebookSendButton>
\n

Show Share Dialog Programmatically

\n

Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

\n
showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});
\n

Hide Custom Button If Can't share

\n

You can use this method to check if the content can be shared and hide the custom button if can't

\n
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
\n
<button (tap)=\"onShareDialogPhotos()\" text=\"Open Share dialog (photos)\" *ngIf=\"canShowPhotosShareDialog\"></button> <button (tap)=\"onSendGenericDialog()\" text=\"Share Message Generic Template\" *ngIf=\"canShowGenericMessageDialog\"></button>
\n

Login Response

\n

The callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
tokenaccess token which will be used for further authentications
\n

Get Current Access Token

\n

The plugin allows to get the current access token, if any, via getCurrentAccessToken() method.

\n

Basic Analytics

\n

The plugin allows to log analytics events. At the initialization of the application you need to init analytics:

\n
application.on(application.launchEvent, function (args) {
    nsFacebook.init(\"{facebook_app_id}\");
    nsFacebook.initAnalytics();
});
\n

Events logging:

\n
nsFacebook.logEvent('Lead');
\n

Logging event with parameters:

\n
const value = 5;
const parameters = [{
    key: 'value',
    value: value.toString(),
}];

nsFacebook.logEvent(FundsAdded, parameters);
\n

Graph API Example

\n

Once the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.

\n
    \n
  1. Get Facebook id of the logged in user
    2. \n
  2. Get the logged in user avatar (this is kind of workaround of this NativeScript issue. #2176)
    3. \n
\n
export class HomeComponent {
    accessToken: string = appSettings.getString(\"access_token\");
    userId: string;
    username: string;
    avatarUrl: string;

    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
        // Get logged in user's info
        http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/me?access_token=\" + this.accessToken).then((res) => {
            this.username = res.name;
            this.userId = res.id;

            // Get logged in user's avatar
            // ref: https://github.com/NativeScript/NativeScript/issues/2176
            http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/\" + this.userId + \"/picture?type=large&redirect=false&access_token=\" + this.accessToken).then((res) => {
                this.avatarUrl = res.data.url;
                this.ref.detectChanges();
            }, function (err) {
                alert(\"Error getting user info: \" + err);
            });
        }, function (err) {
            alert(\"Error getting user info: \" + err);
        });
    }
\n

This sample is part of the demo apps and can be observed here for Nativescript Code and here for NativeScript + Angular.

\n

Release notes

\n

Check out release notes here

\n

FAQ

\n

Check out our FAQ section here.

\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Get Help

\n

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

\n

\"\"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar-swift-3.2":{"name":"nativescript-linearprogressbar-swift-3.2","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Linear Progress Bar

\n

A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
\nThe ios implemention uses Philippe Boisney's linear progress bar .

\n

Installation

\n\n

Vanilla NativeScript

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:Bar=\"nativescript-linearprogressbar\">
  <StackLayout>
    <Bar:Linearprogressbar indeterminate=\"true\" />
  </StackLayout>
</Page>
\n

Angular NativeScript

\n
import { registerElement } from 'nativescript-angular/element-registry';

registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
\n
<LinearProgressBar indeterminate=\"true\">
</LinearProgressBar>
\n

Attributes

\n\n

Version

\n

1.0

\n

Author

\n

slanca (npmdroid(@)gmail.com)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mobilepay":{"name":"nativescript-mobilepay","version":"1.1.2","license":"Apache-2.0","readme":"

NativeScript MobilePay 1.1.2

\n

\"npm

\n

This plugin is a wrapper for the MobilePay AppSwitch SDK (https://github.com/MobilePayDev/MobilePay-AppSwitch-SDK). It allows your app to utilize and integrate directly with Mobile Pay if installed on the phone.

\n

(Optional) Prerequisites / Requirements

\n

To use the plugin you would have create an account at MobilePay.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
    tns plugin add nativescript-mobilepay
\n

Usage

\n

First add the following lines to main.ts:

\n
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";

    import { AppModule } from \"./app/app.module\";
    import { MobilePay } from \"nativescript-mobilepay\";

    // Do this for nativescript-mobilepay
    var mobilePay = new MobilePay();
    mobilePay.addDelegate();

    platformNativeScriptDynamic().bootstrapModule(AppModule);
\n

Simply import the MobilePay class as shown below and start using the features.

\n
    import { Component, OnInit } from \"@angular/core\";
    import { MobilePay } from 'nativescript-mobilepay';
    import { isAndroid, isIOS } from 'tns-core-modules/platform';

    declare var dk: any;

   @Component({
    selector: \"Home\",
    moduleId: module.id,
    templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {

        private mobilePay: MobilePay;

        constructor() {
            // Use the component constructor to inject providers.
        }

        ngOnInit(): void {
            // Create an instance on init. Important!
            this.mobilePay = new MobilePay();
            this.mobilePay.createMobilePayInstance(\"APPDK0000000000\");
        }

        pay() {
            const isInstalled = this.mobilePay.isMobilePayInstalled(\"APPDK0000000000\");
            console.log(\"Mobile Pay installed? \" + isInstalled + \" Android: \" + isAndroid + \" iOS: \" + isIOS);

            // You can choose to provide a result callback like this
            MobilePay.onPaymentSuccess = (result) => (console.log(\"WE MADE A SUCCESSFUL RESULT\"));
            MobilePay.onPaymentFailure = (failure) => (console.log(\"WE MADE A FAILURE LOL\"));
            MobilePay.onPaymentCancel = () => (console.log(\"WE MADE A SUCCESSFUL CANCEL\"));

            if(isInstalled) {
                this.mobilePay.MakePayment(\"APPDK0000000000\", 1.0, \"86715c57-8840-4a6f-af5f-07ee89107ece\")
            }
        }


    }

\n

API

\n

Properties of the plugin

\n

createMobilePayInstance

\n

Creates a mobile pay instance. Please see demo example.

\n

isMobilePayInstalled

\n

Checks whether or not mobile pay is installed on device.

\n

MakePayment

\n

Makes a payment request to mobile pay.

\n

onPaymentSuccess

\n

Callback function if a payment was successful.

\n

onPaymentFailure

\n

Callback if payment failed.

\n

onPaymentCancel()

\n

Callback if payment was cancelled.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-environment":{"name":"nativescript-app-environment","version":"1.0.0","license":"MIT","readme":"

nativescript-app-environment

\n

Add environment variables into your app from the nativescript-cli

\n

Creates app/environment.json from the nativescript-cli command via argv --env.app

\n

Install

\n
tns plugin add nativescript-app-environment
\n

Usage

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-root-detection":{"name":"nativescript-root-detection","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Root Detection

\n

A NativeScript module for detecting root on Android and JailBroken on iOS

\n

Installation

\n

From the command prompt of your app's root folder, execute the following

\n
tns plugin add nativescript-root-detection
\n

Usage

\n

To use the plugin do the following

\n
\timport {RootDetection} from 'nativescript-root-detection';
\t.....
\tconst rooted = RootDetection.isDeviceRooted();
\tif(rooted) {
\t    // Any logic that you need
\t}
\n

Android Detection

\n

For Android the following library is used for detection

\n

https://github.com/scottyab/rootbeer

\n

iOS Detection

\n

For iOS the following paths are checked, if any are present the device is deemed to be JailBroken

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gtm":{"name":"nativescript-gtm","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@localization/l10n":{"name":"@localization/l10n","version":"2.1.7","license":"MIT","readme":"

@localization/l10n

\n
\n

Pure Angular localization (l10n) library.

\n
\n

\"npm\n\"Build\n\"Known

\n

Demo

\n

Click here for preview

\n

Description

\n\n

Tested with

\n\n

Installing / Getting started

\n
npm install @localization/l10n
\n

Use the following snippet inside your app module:

\n
import { L10nModule, L10nService, LanguageCodes } from '@localization/l10n';
...
...

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        BrowserModule,
        L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
        RouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [LocalizationResolve],
    bootstrap: [AppComponent]
})
export class AppModule {}
\n

Use the following snippet inside your component:

\n
import { L10nService } from '@localization/l10n';


@Component({
  ...
})
export class AppComponent {

  constructor(private localization: L10nService) {
  }
}
\n

Use the following snippet inside your template:

\n
<div l10n=\"app.hello.key\" [l10n-args]=\"params\"></div>
<div l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></div>
<div l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></div>

<div [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></div>
<div [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></div>

<div>{{'app.hello.key' | l10n:param }}</div>
<div [innerHTML]=\"'app.hello.key' | l10n\"></div>
<div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>
\n

NativeScript

\n
tns plugin add @localization/l10n
\n

Use the following snippet inside your app module:

\n
import { L10nModule, L10nService, L10nBaseLoader } from '@localization/l10n';
import { knownFolders } from \"file-system\";
import { Subject, Observable, from } from 'rxjs';
import { map } from 'rxjs/operators';
import { Resolve } from \"@angular/router\";
...
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { NativeScriptRouterModule } from \"nativescript-angular/router\";
...
...

@Injectable()
export class CustomLoader extends L10nBaseLoader {

    private readonly folderName = 'locales'; // folder where you place your locale files, 
                                            // in our case that is locales/en.locales.properties
    private readonly documents = knownFolders.currentApp();
    private readonly folder = this.documents.getFolder(this.folderName);

    public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
        let fileType = this.getFileExtension( url );                           
        let file = this.folder.getFile(url);

        return from(file.readText())
                .pipe(map((response) => {
                    return { response, fileType }
                }));
    }
}

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        NativeScriptModule,
        L10nModule.forRoot({ 
            config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
            loader: CustomLoader
        }),
        NativeScriptRouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [
        LocalizationResolve,
        L10nService, // because currently NativeScript doesn\\'t work with @Injectable({ providedIn: \\'root\\' })
        CustomLoader
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
\n

Use the following snippet inside your template:

\n
<ActionBar title=\"{{ 'app.header.title' | l10n }}\" class=\"action-bar\"></ActionBar>
<ActionBar [title]=\"'app.hello.key' | l10n\"></ActionBar>
<Label text=\"{{'app.hello.key' | l10n }}\"></Label>
<Button text=\"{{'app.hello.key' | l10n }}\" (tap)=\"onTap($event)\"></Button>
\n

If bindingProperty in configuration is set to text l10 directive\nwill use it as default element property

\n
<Label l10n=\"app.hello.key\" [l10n-args]=\"params\"></Label>
<Label l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></Label>
<Label l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></Label>

<Label [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></Label>
<Label [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></Label>
\n

Developing

\n

Built With:

\n\n

Setting up Dev

\n

This project was generated with Angular CLI version 6.0.7.

\n

Angular CLI must be installed before building L10n project.

\n
npm install -g @angular/cli
\n
git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run start
\n

Open "http://localhost:4200" in browser

\n

Versioning

\n

We use SemVer for versioning. For the versions available, see the link to tags on this repository.

\n

Tests

\n

This project was generated with Angular CLI version 6.0.7.

\n

Angular CLI must be installed before testing L10n project.

\n
npm install -g @angular/cli
\n
git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run test
\n

Contributing

\n

Want to help?

\n

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

\n

Licensing

\n

L10n is freely distributable under the terms of the MIT license.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maps":{"name":"nativescript-maps","version":"0.1.2","license":"MIT","readme":"

NativeScript Maps

\n

A NativeScript module for using native map APIs. This module is currently limited and should be viewed as a proof of concept—it only supports latitude and longitude attributes and only works on iOS.

\n

Installation

\n

Run npm install nativescript-maps --save from your project's inner app directory:

\n
.
├── app  <----------------run npm install from here
│   ├── App_Resources
│   │   ├── android
│   │   └── ios
│   ├── app.css
│   ├── app.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── node_modules
│   │   └── nativescript-maps <-- The install will place the module's code here
│   │       └── ...
│   ├── package.json <-- The install will register “nativescript-maps as a dependency here
│   └── tns_modules
│       └── ...
└── platforms
    ├── android
    └── ios
\n

As is, using npm within NativeScript is still experimental, so it's possible that you'll run into some issues. A more complete solution is in the works, and you can check out this issue for an update on its progress and to offer feedback. This repo's demo folder has a sample NativeScript app that uses this map module via npm.

\n

If npm doesn't end up working for you, you can just copy and paste this repo's maps.ios.js file into your app and reference it directly.

\n

Usage

\n

To use the module you have to include a xmlns:maps attribute to include the maps namespace for use in your XML. Point the value of this attribute at the location you have the maps.ios.js file stored in your app.

\n
<Page xmlns:maps=\"app/node_modules/nativescript-maps/maps\">
\t<maps:Map latitude=\"42.7\" longitude=\"23.3\" />
</Page>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-url-handler":{"name":"@bigin/ns-url-handler","version":"1.0.6","license":"Apache-2.0","readme":"

Credit

\n

This plugin is from nativescript-urlhanlder of @hypery2k. You can get the original plugin at https://github.com/hypery2k/nativescript-urlhandler

\n

We just upgrade to NS7 and add some tweaks to make it works.

\n

NativeScript URL Handler Plugin

\n

Register universal links and custom URL schemes handler for your app

\n

Usage

\n

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

\n

See this example for Angular:

\n
import { Component, OnInit } from '@angular/core';
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
\tselector: 'gr-main',
\ttemplate: '<page-router-outlet></page-router-outlet>',
})
export class AppComponent {
\tconstructor() {}

\tngOnInit() {
\t\thandleOpenURL((appURL: AppURL) => {
\t\t\tconsole.log('Got the following appURL', appURL);
\t\t});
\t}
}
\n

And for pure NativeScript:

\n
var handleOpenURL = require('nativescript-urlhandler').handleOpenURL;

handleOpenURL(function (appURL) {
\tconsole.log('Got the following appURL', appURL);
});
\n

Or as TypeScript:

\n
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

handleOpenURL((appURL: AppURL) => {
\tconsole.log('Got the following appURL', appURL);
});
\n

Installation

\n
$ ns plugin add @bigin/ns-url-handler
\n

Android

\n

Replace myapp with your desired scheme and set launchMode to singleTask

\n
<activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
        ...
    <intent-filter>
    <data android:scheme=\"myapp\" />
    <action android:name=\"android.intent.action.VIEW\" />
    <category android:name=\"android.intent.category.DEFAULT\" />
    <category android:name=\"android.intent.category.BROWSABLE\" />
    </intent-filter>
\n

For example:

\n
<activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
  <intent-filter>
      <action android:name=\"android.intent.action.MAIN\" />
      <category android:name=\"android.intent.category.LAUNCHER\" />
  </intent-filter>
  <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />
      <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
  </intent-filter>
</activity>
\n

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

\n

iOS

\n
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
\n

FAQ

\n

Callback handling

\n

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

\n
    No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
\n

Webpack

\n

TypeScript Config

\n

If your Webpack Build is failing, try adapting your tsconfig to this:

\n
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"emitDecoratorMetadata\": true,
        \"noEmitHelpers\": true,
        \"noEmitOnError\": true,
        \"lib\": [
            \"es6\",
            \"dom\",
            \"es2015.iterable\"
        ],
        \"baseUrl\": \".\",
        \"paths\": {
            \"*\": [
                \"./node_modules/tns-core-modules/*\",
                \"./node_modules/*\"
            ]
        }
    },
    \"exclude\": [
        \"node_modules\",
        \"platforms\",
        \"**/*.aot.ts\"
    ]
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-indicator-ssi":{"name":"nativescript-loading-indicator-ssi","version":"2.5.2","license":"MIT","readme":"

nativescript-loading-indicator

\n

nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

\n\n

Installation

\n
tns plugin add nativescript-loading-indicator
\n

Example

\n
var LoadingIndicator = require(\"nativescript-loading-indicator\").LoadingIndicator;

// or with TypeScript:
// import {LoadingIndicator} from \"nativescript-loading-indicator\";

var loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
var options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: \"%1d/%2d\",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: \"Additional detail note!\",
    margin: 10,
    dimBackground: true,
    color: \"#4B9ED6\", // color of indicator and labels
    // background box around indicator
    // hideBezel will override this if true
    backgroundColor: \"yellow\",
    hideBezel: true, // default false, can hide the surrounding bezel
    view: UIView, // Target view to show on top of (Defaults to entire window)
    mode: // see iOS specific options below
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Options

\n\n

Android Specific

\n\n

iOS Specific

\n\n

Quick Mode Reference:

\n\n

Screenshots

\n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-three":{"name":"nativescript-three","version":"1.0.0-alpha3","license":"Apache-2.0","readme":"

nativescript-three

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
npm i three nativescript-three
\n

Usage

\n
import TNSTHREE from 'nativescript-three';
\n

Creating a Renderer

\n

TNSTHREE.Renderer({ gl: WebGLRenderingContext, width: number, height: number, pixelRatio: number, ...extras })

\n

Given a gl (context) from an\nTNSCanvas, return a\nTHREE.WebGLRenderer\nthat draws into it.

\n
import { Renderer } from 'nativescript-three';

var camera, scene, renderer;
var geometry, material, mesh;

canvas; // TNSCanvas instance
init();
animate();

function init() {
  const gl = canvas.getContext('webgl');
  // We have access to window.innerWidth / window.innerHeight but we want the current view size
  const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
  camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new TNSTHREE.Renderer({ gl });
  renderer.setSize(width, height);
}

function animate() {
  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);

  canvas.flush(); // very important, call when you need to render to screen.
}
\n

E.G Output

\n

\"Output\"

\n

E.G Output

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-view-bundling-enabled":{"name":"nativescript-pdf-view-bundling-enabled","version":"1.2.1","license":"MIT","readme":"

nativescript-pdf-view

\n

This is a very basic PDF view implementation that does only one thing, and\nthat is to display PDF files. It conveniently uses the iOS UIWebView, but\nfor Android it uses AndroidPdfViewer.

\n

This plugin does the bare minimum required to render the PDF, no configuration\noptions, and no error handling have been built yet. I welcome all Pull Requests!

\n

Usage

\n

\n

Check out the demo folder for a sample usage.

\n

Angular 2

\n

If you're using the plugin with Angular 2, the plugin automatically registers\nPDFView as a valid tag for Angular templates. Usage is simple:

\n
    \n
  1. Make sure to import nativescript-pdf-view somewhere in your code, e.g:
    2. \n
\n
import 'nativescript-pdf-view';
\n
    \n
  1. Include the tag in your template:
    2. \n
\n
<PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
\n

Try the Demo

\n

To try the demo, cd into the demo folder, and run the following commands:

\n
npm install

# iOS
tns platform add ios
tns run ios

# Android
tns platform add android
tns run android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/directions":{"name":"@nativescript/directions","version":"2.0.2","license":"Apache-2.0","readme":"

@nativescript/directions

\n
ns plugin add @nativescript/directions
\n

Usage

\n

Demo app (XML + TypeScript)

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

\n\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

API

\n

available

\n

Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

\n
JavaScript
\n
// require the plugin
var directions = require('@nativescript/directions');

// instantiate the plugin
var directions = new directions.Directions();

directions.Directions.available().then(function (avail) {
\tconsole.log(avail ? 'Yes' : 'No');
});
\n
TypeScript
\n
// require the plugin
import { Directions } from '@nativescript/directions';

// instantiate the plugin
let directions = new Directions();

directions.available().then((avail) => {
\tconsole.log(avail ? 'Yes' : 'No');
});
\n

navigate

\n

This function opens the native Maps app with a predefined from and to address.

\n

If you don't pass from the current location of the user will be used.

\n

If an address is specified then lat and lng will be ignored.

\n

If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

\n

Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

\n
JavaScript
\n
directions
\t.navigate({
\t\tfrom: {
\t\t\t// optional, default 'current location'
\t\t\tlat: 52.215987,
\t\t\tlng: 5.282764,
\t\t},
\t\tto: {
\t\t\t// either pass in a single object or an Array (see the TypeScript example below)
\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
\t\t},
\t\t// for platform-specific options, see the TypeScript example below.
\t})
\t.then(
\t\tfunction () {
\t\t\tconsole.log('Maps app launched.');
\t\t},
\t\tfunction (error) {
\t\t\tconsole.log(error);
\t\t}
\t);
\n
TypeScript
\n
directions
\t.navigate({
\t\tfrom: {
\t\t\t// optional, default 'current location'
\t\t\tlat: 52.215987,
\t\t\tlng: 5.282764,
\t\t},
\t\tto: [
\t\t\t{
\t\t\t\t// if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
\t\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
\t\t\t},
\t\t\t{
\t\t\t\taddress: 'Aak 98, Wieringerwerf, Netherlands',
\t\t\t},
\t\t],
\t\ttype: 'walking', // optional, can be: driving, transit, bicycling or walking
\t\tios: {
\t\t\tpreferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
\t\t\tallowGoogleMapsWeb: true, // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
\t\t\tuseUniversalSyntax: true, // Prefer the Universal URL Syntax to the comgooglemaps:// url scheme. Useful if Google Maps does not load correctly.
\t\t},
\t\tandroid: {
\t\t\tnewTask: true, // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
\t\t},
\t})
\t.then(
\t\t() => {
\t\t\tconsole.log('Maps app launched.');
\t\t},
\t\t(error) => {
\t\t\tconsole.log(error);
\t\t}
\t);
\n

Future work

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appic-pdfview":{"name":"nativescript-appic-pdfview","version":"1.0.8","license":"Apache-2.0","readme":"

NativeScript-Appic-PdfView

\n

This is a simple pdf viewer plugin that uses native libraries.

\n\n

Installation

\n
tns plugin add nativescript-appic-pdfview
\n

OR

\n

copy the tgz file to your project and reference it from your package.json

\n

Usage

\n

Just add it to your page:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\"
xmlns:ui=\"nativescript-appic-pdfview\">
    <ui:AppicPdfView src=\"~/mypdf.pdf\" defaultpage=\"1\"></ui:AppicPdfView>
</Page>
\n

OR

\n
import { AppicPdfView } from 'nativescript-appic-pdfview';
import { registerElement } from 'nativescript-angular';
registerElement('AppicPdfView', () => AppicPdfView);
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
    <AppicPdfView src=\"~/mypdf.pdf\" defaultpage=\"1\"></AppicPdfView>
</Page>
\n

API

\n

XML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
src-File url to a pdf file, can also be http
defaultpage"0"Initial page number to display
bookmarklabel-Search for a bookmark with the matching label and jump to the page
bookmarkpath-Search for a bookmark by indices within the tree structure of bookmarks
\n

Class

\n
/// Go to page by id starting from 0 as first page.
goToPage(index: number) : void;

/// Go to first page.
goToFirstPage() : void;

/// Go to last page.
goToLastPage() : void;

/// Get a list of all bookmarks in the pdf.
getBookmarks(): Bookmark[];

/// Search for bookmark that is exactly at the given position in the tree structure
/// e.g.: [1,3] would mean to first get the second root bookmark (0 based index) and
/// then get its fourth child if it exists
getBookmarkByIndexPath(indexes: number[]): Bookmark;

/// Search for all bookmarks that have the given label.
getBookmarksByLabel(label: string): BookmarkCommon[];

/// Jump to a given bookmark.
goToBookmark(bookmark: Bookmark): void;

/// Get meta information author from PDF.
getAuthor(): string;

/// Get meta information subject from PDF.
getSubject(): string;

/// Get meta information title from PDF.
getTitle(): string;

/// Get meta information creator from PDF.
getCreator(): string;

/// Get meta information creator from PDF.
getCreationDate(): string;

/// Get page count of currently loaded pdf
getPageCount(): number;

/// Load pdf from code.
/// Replaces the currently loaded pdf.
/// The promise gets resolved after loading, or rejected if something failed.
loadPDF(src: string): Promise<any>;

/// only implemented for iOS
/// Detect available programs for file extension and opens the interaction controller
/// The source should contain accessible path for the application
showExternalControler(src: string, rect: ControllerRect): void;
\n

Examples

\n

defaultpage: jump to page 4

\n
<ui:AppicPdfView src=\"~/test.pdf\" defaultpage=\"3\"></ui:AppicPdfView>
\n

bookmarklabel: jump to bookmark with label "PAGE 3"

\n
<ui:AppicPdfView src=\"~/test.pdf\" bookmarklabel=\"PAGE 3\"></ui:AppicPdfView>
\n

bookmarkpath: jump to the first child-bookmark of the third bookmark (bookmarks have a tree structure)

\n
<ui:AppicPdfView src=\"~/test.pdf\" bookmarkpath=\"2,0\"></ui:AppicPdfView>
\n

go to the first found bookmark with the label "PAGE 4"

\n
<ui:AppicPdfView src=\"~/test.pdf\" id=\"pdfview\"></ui:AppicPdfView>
\n
let view:AppicPdfView = page.getViewById('pdfview');
if (view){
    view.on(\"load\",()=>{
        let items = view.getBookmarksByLabel(\"PAGE 4\");
        console.log(\"found:\",items);
        view.goToBookmark(items[0]);
    });
    view.on(\"error\",()=>{
        console.error(\"unable to load pdf\");
    });
}
\n

dynamic loading with promises\njust use an empty src tag in the xml

\n
<ui:AppicPdfView id=\"pdfview\"></ui:AppicPdfView>
\n
let view:AppicPdfView = page.getViewById('pdfview');
if (view){
    view.loadPDF('~/test.pdf').then(()=>{
        let items = view.getBookmarksByLabel(\"PAGE 4\");
        console.log(\"found:\",items);
        view.goToBookmark(items[0]);
    }).catch((err)=>{
        console.error(\"could not load pdf: \", err);
    })
}
\n

Show controller on button tap

\n
<ui:AppicPdfView id=\"pdfview\"></ui:AppicPdfView>
<button text=\"Open external\" tap=\"onButtonTap\"></button>
\n
let view:AppicPdfView = page.getViewById('pdfview');

function onButtonTap(args: EventData) {
  const button = <Button>args.object;
  const size = button.getActualSize();
  const position = button.getLocationOnScreen();
  const rect = {
    x: position.x,
    y: position.y,
    width: size.width,
    height: size.height
  };
  view.showExternalControler(rect);
\n

Known bugs

\n\n

License

\n

https://choosealicense.com/licenses/mit/

\n

Credit

\n

https://market.nativescript.org/plugins/nativescript-pdfview-ng

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-parley":{"name":"nativescript-parley","version":"1.2.15","license":"Apache-2.0","readme":"

NativeScript Parley plugin

\n

NativeScript plugin for Parley messaging. You need an appSecret to use this plugin. The appSecret can be obtained on https://www.parley.nu/.

\n

Requirements

\n\n

Changes

\n

V1.2.15 (14 June 2019)

\n\n

V1.2.14 (12 June 2019)

\n\n

V1.2.13 (3 June 2019)

\n\n

V1.2.12 (27 May 2019)

\n\n

V1.2.11 (24 May 2019)

\n\n

V1.2.10 (24 April 2019)

\n\n

V1.2.9 (24 April 2019)

\n\n

V1.2.8 (1 April 2019)

\n\n

V1.2.7 (18 March 2019)

\n\n

V1.2.6 (18 March 2019)

\n\n

V1.2.5 (18 February 2019)

\n\n

V1.2.4 (1 February 2019)

\n\n

V1.2.3 (31 January 2019)

\n\n

V1.2.2 (23 January 2019)

\n\n

V1.2.1 (23 January 2019)

\n\n

V1.2.0 (22 January 2019)

\n\n

V1.1.4 (11 January 2019)

\n\n

V1.1.3 (21 December 2018)

\n\n

V1.1.2 (4 December 2018)

\n\n

V1.1.1 (16 October 2018)

\n\n

V1.1.0 (27 September 2018)

\n\n

V1.0.15 (21 August 2018)

\n\n

V1.0.12 (15 May 2018)

\n\n

V1.0.0 (23 April 2018)

\n\n

Getting started

\n

The plugin offers a singleton called Parley and a view called ParleyView. The Parley singleton is the connection between your application and the plugin. The ParleyView represent a native Android and iOS view.

\n

Step 1: Prepare your project for the plugin

\n

1.1 Android

\n
Step 1.1.1: Create an AppCompatActivity
\n

The plugin needs an AppCompatActivity to work. Create the file app/main-activity.android.ts and add the following:

\n
import {setActivityCallbacks, AndroidActivityCallbacks} from \"tns-core-modules/ui/frame\";

declare const com: any;

@JavaProxy(\"__PACKAGE__.MainActivity\")
class MainActivity extends android.support.v7.app.AppCompatActivity {
    private _callbacks: AndroidActivityCallbacks;

    protected onCreate(savedInstanceState: android.os.Bundle): void {
        if (!this._callbacks) {
            setActivityCallbacks(this);
        }

        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
    }

    protected onSaveInstanceState(outState: android.os.Bundle): void {
        this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState);
    }

    protected onStart(): void {
        this._callbacks.onStart(this, super.onStart);
    }

    protected onStop(): void {
        this._callbacks.onStop(this, super.onStop);
    }

    protected onDestroy(): void {
        this._callbacks.onDestroy(this, super.onDestroy);
    }

    public onBackPressed(): void {
        this._callbacks.onBackPressed(this, super.onBackPressed);
    }

    public onRequestPermissionsResult(requestCode: number, permissions: Array<String>, grantResults: Array<number>): void {
        this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined /*TODO: Enable if needed*/);
    }

    protected onActivityResult(requestCode: number, resultCode: number, data: android.content.Intent): void {
        this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult);
    }
}
\n

Replace __PACKAGE__ by your package name

\n
Step 1.1.2: Configure AppCompatActivity in the AndroidManifest
\n

Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and replace com.tns.NativeScriptActivity by __PACKAGE__.MainActivity.

\n
Example
\n

Before

\n
<activity
    android:name=\"com.tns.NativeScriptActivity\"
    android:label=\"@string/title_activity_kimera\"
    android:configChanges=\"keyboardHidden|orientation|screenSize\"
    android:theme=\"@style/LaunchScreenTheme\">
\n

After

\n
<activity
    android:name=\"__PACKAGE__.MainActivity\"
    android:label=\"@string/title_activity_kimera\"
    android:configChanges=\"keyboardHidden|orientation|screenSize\"
    android:theme=\"@style/LaunchScreenTheme\">
\n
Step 1.1.3: Define support and firebase versions in app.gradle
\n

To avoid conflicts when compiling the Android application we need to set the right supportVersion and firebaseVersion. Open app/App_Resources/Android/app.gradle and add:

\n
android {
  //

  project.ext {
    supportVersion = '27.1.1'
    firebaseVersion = '12.0.1'
  }
}
\n
Step 1.1.4: Configure Firebase Cloud Messaging
\n

The plugin uses remote messages to update the chat. You need to implement Firebase Cloud Messaging to receive remote messages in Android.

\n
Step 1.1.4.1: Create a project in the firebase console
\n

Firebase needs a google-services.info to work. You can retrieve this google-service.info by creating a project on https://console.firebase.google.com/.

\n

Add the generated google-services.info to app/App_Resources/Android.

\n
Step 1.1.4.2: Install the NativeScript Firebase plugin
\n
tns plugin add nativescript-plugin-firebase
\n

Only enable Android and Firebase Messaging when installing the plugin.

\n

Step 1.1.4.3: Define Firebase Cloud Messaging services in the AndroidManifest

\n

Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and add the following Firebase Cloud Messaging services:

\n
<manifest ... >
    <application ... >
        ...
        <service android:name=\"org.nativescript.plugins.firebase.MyFirebaseInstanceIDService\">
            <intent-filter>
                <action android:name=\"com.google.firebase.INSTANCE_ID_EVENT\"/>
            </intent-filter>
        </service>
        <service android:name=\"org.nativescript.plugins.firebase.MyFirebaseMessagingService\">
            <intent-filter>
                <action android:name=\"com.google.firebase.MESSAGING_EVENT\"/>
            </intent-filter>
        </service>
    </application>
</manifest>
\n

1.2 iOS

\n

Step 1.2.1: Create GoogleService-Info.plist to bypass a check by the nativescript-plugin-firebase package.

\n

The NativeScript Firebase plugin checks by default if the file GoogleService-Info.plists exists. Firebase is not needed for iOS because Parley uses APNs to receive Remote Messages. To bypass this, create the file App_Resources/iOS/GoogleService-Info.plist with the following content:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
</dict>
</plist>
\n

Step 1.2.2: Configure Remote messages

\n

To receive remote messages in iOS the application needs to add an app.entitlements file.

\n

Create the file app/App_Resources/iOS/app.entitlements and add the following:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
\t<key>aps-environment</key>
\t<string>development</string>
</dict>
</plist>
\n

Then install nativescript-custom-entitlements to copy the app.entitlements file when compiling the iOS project:

\n
npm install nativescript-custom-entitlements --save-dev
\n

Step 2: Install the plugin

\n
npm install nativescript-parley --save-dev
\n

Step 3: Register device and configure remote messages

\n

Step 3.1: Remove app/app.ts

\n

To handle remote messages we need a platform specific configuration, so remove the file app/app.ts.

\n

3.2 Android

\n

Step 3.2.1: Create Android specific app

\n

Create the file app/app.android.ts and add the following:

\n
import * as application from 'tns-core-modules/application';

const firebase = require(\"nativescript-plugin-firebase\");
import {Message} from \"nativescript-plugin-firebase\";
import {Parley} from \"nativescript-parley\";

firebase.init({
    onMessageReceivedCallback: (message: Message) => {
        console.log(\"onMessageReceivedCallback: \", message.data);

        // Optional: Set the target activity to open when the notification is being clicked
        Parley.getInstance().setNotificationTarget(\"com.webuildapps.tracebuzz.parleydemo.MainActivity\");

        Parley.getInstance().handlePushMessage(message.data);
    },

    onPushTokenReceivedCallback: function(token) {
        console.log(\"onPushTokenReceivedCallback: \", token);

        Parley.getInstance().setDeviceToken(token);
    }
});

application.start({ moduleName: \"main-page\" });
\n

3.3: iOS

\n

Step 3.2.1: Create an AppDelegate

\n

Create the file app/app-delegate.ts and add the following:

\n
import {Parley} from \"nativescript-parley\";

export class AppDelegate extends UIResponder implements UIApplicationDelegate {

    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFailToRegisterForRemoteNotificationsWithError(application: UIApplication, error: NSError): void {
        console.log(\"Failed to register for remote notifications\");
    }

    applicationDidReceiveRemoteNotification(application: UIApplication, userInfo: NSDictionary<any, any>): void {
        Parley.getInstance().handlePushMessage(userInfo);
    }

    applicationDidRegisterForRemoteNotificationsWithDeviceToken(application: UIApplication, deviceToken: NSData): void {
        let deviceTokenString = deviceToken.description;

        Parley.getInstance().setDeviceToken(deviceTokenString);
    }

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<any, any>): boolean {
        application.registerForRemoteNotifications();

        return true;
    }
}
\n

Step 3.2.1: Create iOS specific app

\n

Create the file app/app.ios.ts and add the following:

\n
import * as application from 'tns-core-modules/application';
import {AppDelegate} from \"./app-delegate\";

application.ios.delegate = AppDelegate;

application.start({ moduleName: \"main-page\" });
\n

Step 4: Implement the Parley plugin in a Page (Finally 🎉)

\n

4.1: Configuring and using Parley

\n

The Parley library provides listeners to notify the application. The configuration of Parley can be customised, such as modifying the base url and using SSL pinning.

\n

The application itself is responsible for showing the chat when it is ready. This can be done by calling parleyView.showChat() when receiving the onDeviceRegistrationSuccess callback.

\n

Note:\nIt is required to register the device before showing the chat. This means that the application is responsible for ensuring that the push token is set before attempting to initialise and use the Parley plugin.

\n
Step 4.2.1: Create ChatViewModel
\n

Create the file app/chat-view-model.ts and add the following:

\n
import {Parley, ParleyListener, ParleySslPinningListener, ParleyView} from \"nativescript-parley\";
import {Observable} from \"tns-core-modules/data/observable\";

export class ChatViewModel extends Observable implements ParleyListener {

    private parleyView: ParleyView;

    constructor() {
        super();

        Parley.init(this, \"appSecret\");
        // Add optional custom configuration here
        Parley.getInstance().configure();
    }

    setParleyView(parleyView: ParleyView): void {
        this.parleyView = parleyView;
    }

    // ParleyListener
    onConfigureFailed() {
        console.log('onConfigureFailed');
    }

    onConfigureSuccess() {
        console.log('onConfigureSuccess');
        Parley.getInstance().registerDevice();
    }

    onDeviceRegistrationFailed() {
        console.log('onDeviceRegistrationFailed');
    }

    onDeviceRegistrationSuccess() {
        console.log('onDeviceRegistrationSuccess');

        this.parleyView.showChat();
    }

    onUserUnauthorized() {
        console.log('onUserUnauthorized');
    }

    onChatMessageSend() {
        console.log('onChatMessageSend');
    }
}
\n

Replace appSecret by your appSecret. You can obtain an appSecret on https://www.parley.nu/

\n

Step 4.2: Configure chat view

\n

Open the xml view for the chat and add xmlns:Parley="nativescript-parley" to the Page tag.

\n

For example:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:Parley=\"nativescript-parley\">
\n

Then add the ParleyView inside for example a StackLayout.

\n
<Parley:ParleyView id=\"parleyView\" width=\"100%\" height=\"100%\"/>
\n
Step 4.3: Configure chat page
\n

Open the page typescript file for the chat and add the following imports:

\n
import {Page} from \"tns-core-modules/ui/page\";
import {ChatViewModel} from \"~/chat-view-model\";
import {ParleyView} from \"nativescript-parley\";
\n

After that add the following to your pageLoaded method:

\n
let initialised = false;

export function pageLoaded(args: EventData) {
    if (initialised) return;

    let page: Page = <Page>args.object;
    let parleyView: ParleyView = page.getViewById(\"parleyView\");

    let chatViewModel = new ChatViewModel();
    chatViewModel.setParleyView(parleyView);
    page.bindingContext = chatViewModel;

    initialised = true;
}
\n

Custom configurations

\n

Parley allows the use of custom configurations, such as specifying the base url and enabling SSL pinning. Pay attention: configuring is always done after the init() method and before the configure() method.

\n

The available configuration methods are as follows:

\n
Parley.init(this, \"0W4qcE5aXoKq9OzvHxj2\");
Parley.getInstance().registerUser(\"ZGFhbnw5ZTA5ZjQ2NWMyMGNjYThiYjMxNzZiYjBhOTZmZDNhNWY0YzVlZjYzMGVhNGZmMWUwMjFjZmE0NTEyYjlmMDQwYTJkMTJmNTQwYTE1YmUwYWU2YTZjNTc4NjNjN2IxMmRjODNhNmU1ODNhODhkMmQwNzY2MGYxZTEzZDVhNDk1Mnw1ZDcwZjM5ZTFlZWE5MTM2YmM3MmIwMzk4ZDcyZjEwNDJkNzUwOTBmZmJjNDM3OTg5ZWU1MzE5MzdlZDlkYmFmNTU1YTcyNTUyZWEyNjllYmI5Yzg5ZDgyZGQ3MDYwYTRjZGYxMzE3NWJkNTUwOGRhZDRmMDA1MTEzNjlkYjkxNQ\"); // Optional -- Read the user registration custom configuration!
Parley.getInstance().setBaseUrl(\"https://www.irischat.com\"); // Optional
Parley.getInstance().setBasePath(\"/clientApi/v1.2/\"); // Optional
Parley.getInstance().enableSslPinning(this , \"N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=\", \"aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=\"); // Optional -- Read the SSL pinning custom configuration!
Parley.getInstance().configure();
\n

(The values shown are the default values, modify them to your needs)

\n

Custom headers

\n

Parley supports the use of custom headers. These can be updated before and after configuring the instance.

\n

Note that Parley will override values in case the header has the same name. Also, the headers of Parley cannot be removed via this method.

\n
Parley.getInstance().addHttpHeader(\"custom-company\", \"Webuildapps\");
Parley.getInstance().removeHttpHeader(\"custom-company\");
\n

Enable SSL pinning

\n

To enable SSL pinning you must have a security config.

\n

SSL pinning can be enabled by using the following configuration method: enableSslPinning(listener: ParleySslPinningListener, publicKeyOne: string, publicKeyTwo: string).\nExample:

\n
// Parley.init(...);
Parley.getInstance().enableSslPinning(this , \"N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=\", \"aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=\"); // Default Parley keys
// Parley.getInstance().configure();
\n

The first parameter expects a ParleySslPinningListener. This is used to receive the callbacks of the SSL pinning status and consists of the following methods:

\n
ParleySslPinningListener {
    public onEnableSslPinningSuccess(): void;
    public onEnableSslPinningFailed(message: string ): void;
}
\n
Android
\n

The configuration above is enough for iOS. Android needs a network security config. Create the file app/App_Resources/Android/xml/network_security_config.xml and add a network security config.

\n

For example:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<network-security-config>
    <domain-config>
        <domain includeSubdomains=\"false\">www.irischat.com</domain>

        <pin-set expiration=\"2018-05-31\">
            <pin digest=\"SHA-256\">N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=</pin>
            <pin digest=\"SHA-256\">aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=</pin>
        </pin-set>
    </domain-config>
</network-security-config>
\n

You also need to specify this network security config in the AndroidManifest. Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and add the network security config as follows:

\n
<application
    android:name=\"...\"
    android:icon=\"...\"
    android:roundIcon=\"...\"
    android:label=\"...\"
    android:theme=\"...\"
    android:networkSecurityConfig=\"@xml/network_security_config\">
\n

Register user

\n

Users can be registered to encrypt the data (and unregister when the user logs out). Registering a user requires the UserAuthentication token. Pay attention: registerUser() is always called after the init() method and before the configure() method. This is done by using Parley.getInstance().registerUser(userAuthorization: string); method as follows:

\n
// Parley.init(...);
Parley.getInstance().registerUser(\"ZGFhbnw5ZTA5ZjQ2NWMyMGNjYThiYjMxNzZiYjBhOTZmZDNhNWY0YzVlZjYzMGVhNGZmMWUwMjFjZmE0NTEyYjlmMDQwYTJkMTJmNTQwYTE1YmUwYWU2YTZjNTc4NjNjN2IxMmRjODNhNmU1ODNhODhkMmQwNzY2MGYxZTEzZDVhNDk1Mnw1ZDcwZjM5ZTFlZWE5MTM2YmM3MmIwMzk4ZDcyZjEwNDJkNzUwOTBmZmJjNDM3OTg5ZWU1MzE5MzdlZDlkYmFmNTU1YTcyNTUyZWEyNjllYmI5Yzg5ZDgyZGQ3MDYwYTRjZGYxMzE3NWJkNTUwOGRhZDRmMDA1MTEzNjlkYjkxNQ\"); // Optional -- Parley example user
// Parley.getInstance().configure();
\n

Additionally, a user can be deregistered (for example: when the user logs out). Note that this can be done after initialising. Deregistering can be done as follows:

\n
Parley.getInstance().deregisterUser();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-downloader":{"name":"@triniwiz/nativescript-downloader","version":"3.0.1","license":"Apache-2.0","readme":"

Nativescript Downloader

\n

Installation

\n

ns plugin add @triniwiz/nativescript-downloader

\n

Usage

\n

TypeScript

\n
import { Downloader } from '@triniwiz/nativescript-downloader';
Downloader.setTimeout(120); //Increase timeout default 60s
\n
import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';
const downloader = new Downloader();
const imageDownloaderId = Downloader.createDownload({
  url:
    'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
});

downloader
  .start(imageDownloaderId, (progressData: ProgressEventData) => {
    console.log(`Progress : ${progressData.value}%`);
    console.log(`Current Size : ${progressData.currentSize}%`);
    console.log(`Total Size : ${progressData.totalSize}%`);
    console.log(`Download Speed in bytes : ${progressData.speed}%`);
  })
  .then((completed: DownloadEventData) => {
    console.log(`Image : ${completed.path}`);
  })
  .catch(error => {
    console.log(error.message);
  });
\n

JavaScript

\n
var Downloader = require('@triniwiz/nativescript-downloader').Downloader;
Downloader.setTimeout(120); //Increase timeout default 60s
\n
var Downloader = require('@triniwiz/nativescript-downloader').Downloader;
var downloader = new Downloader();
var imageDownloaderId = downloadManager.createDownload({
  url:
    'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
});

downloader
  .start(imageDownloaderId, progressData => {
    console.log(`Progress : ${progressData.value}%`);
  })
  .then(completed => {
    console.log(`Image : ${completed.path}`);
  })
  .catch(error => {
    console.log(error.message);
  });
\n

Api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
createDownload(options: DownloadOptions)stringCreates a download task it returns the id of the task
getStatus(id: string)StatusCodeGets the status of a download task.
start(id: string, progress?: Function)Promise<DownloadEventData>Starts a download task.
resume(id: string)voidResumes a download task.
cancel(id: string)voidCancels a download task.
pause(id: string)voidPauses a download task.
getPath(id: string)voidReturn the path of a download task.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n

Angular

\n

Custom Downloader option

\n
  // Request format for Downlaoder
             DownloadOptions {
             url: string;
             query?: Object | string;
             headers?: Object;
            path?: string;
             fileName?: string;
          }
\n

Service File To use any where

\n
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Downloader, ProgressEventData, DownloadEventData } from '@triniwiz/nativescript-downloader';



@Injectable({
    providedIn: 'root',
})


export class DataDownLoadService {
    public database: any;
    downloader: Downloader = new Downloader();
    constructor() { }


    /**
    * @ngdoc method
    * @name downloadDb
    * @description  download generic method for nay file 
    * @memberof DataDownLoadService
    * @param apiUrl : - https://myserver.com/mypath
    * @param filename :- myfile.zip ...
    * @param downloadlocation : mobile local location
    */
    downloadFile(apiUrl, filename, downloadlocation) {
        const subject = new Subject<any>();
    
        // Request format for Downlaoder
        //      DownloadOptions {
        //     url: string;
        //     query?: Object | string;
        //     headers?: Object;
        //     path?: string;
        //     fileName?: string;
        //   }

        // Prepare the header with token work
    
        const headerHttp = {
            \"Content-Type\": \"application/json\",
            \"Authorization\": 'Bearer ' + 'Token...'
        }

        const url =  apiUrl;

        const zipDownloaderId = this.downloader.createDownload({
            url: url,
            headers: headerHttp,
            path: downloadlocation,
            fileName: filename
        });

        this.downloader
            .start(zipDownloaderId, (progressData: ProgressEventData) => {
                console.log(`Progress : ${progressData.value}%`);
                console.log(`Current Size : ${progressData.currentSize}%`);
                console.log(`Total Size : ${progressData.totalSize}%`);
                console.log(`Download Speed in bytes : ${progressData.speed}%`);
            })
            .then((completed: DownloadEventData) => {
                console.log(`zip file saved at : ${completed.path}`);
              
               
                
                subject.next(true);
              
            })
            .catch(error => {
                console.log('downloadDb', error.message);
                subject.error(error);

            });

        return subject.asObservable();
    }



}
\n

TODO

\n\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-fancyalert":{"name":"@nstudio/nativescript-fancyalert","version":"4.0.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-fancyalert

\n

Fancy alerts for NativeScript.

\n

Based on:

\n\n

Install

\n

\"Sample

\n

\"Sample

\n

iOS Specifications

\n

Usage Examples

\n
import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';

// show success
TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!');

// set customizations
TNSFancyAlert.showAnimationType = TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;
TNSFancyAlert.hideAnimationType = TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;
TNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;
TNSFancyAlert.soundURL = 'bell.mp3';
TNSFancyAlert.showSuccess('Sound?', 'You can use sound and customize many aspects like animation in/out, color, background style and much more.', 'Amazing!');

// show custom image
TNSFancyAlert.showCustomImage('nativescript.png', '#2B33FF', 'Custom Image', `Using your own images is sure nice.`, 'Yes!');

// show custom button timer
TNSFancyAlert.showCustomButtonTimer(0, true, undefined, undefined, 'Mission Impossible', `This will self-destruct in 5 seconds.`, 'Ok');

// show custom buttons
let buttons = [
\tnew TNSFancyAlertButton({
\t\tlabel: 'One',
\t\taction: () => {
\t\t\tconsole.log('One');
\t\t},
\t}),
\tnew TNSFancyAlertButton({
\t\tlabel: 'Two',
\t\taction: () => {
\t\t\tconsole.log('Two');
\t\t},
\t}),
\tnew TNSFancyAlertButton({
\t\tlabel: 'Three',
\t\taction: () => {
\t\t\tconsole.log('Three');
\t\t},
\t}),
\tnew TNSFancyAlertButton({
\t\tlabel: 'Four',
\t\taction: () => {
\t\t\tconsole.log('Four');
\t\t},
\t}),
\tnew TNSFancyAlertButton({
\t\tlabel: 'Really? More?',
\t\taction: () => {
\t\t\tconsole.log('more');
\t\t},
\t}),
];
TNSFancyAlert.showCustomButtons(buttons, undefined, undefined, 'Got Buttons?', `Add as many as you'd like.`, 'Ok');

// show with custom width
TNSFancyAlert.showSuccess('Success!', 'This uses a custom width of 300.', `Oh that's nice.`, 0, 300);

// show textfield
let initialValue = null;
TNSFancyAlert.showTextField(
\t'Enter your name',
\tinitialValue,
\tnew TNSFancyAlertButton({
\t\tlabel: 'Save',
\t\taction: (value: any) => {
\t\t\tconsole.log(`User entered ${value}`);
\t\t},
\t}),
\tundefined,
\tundefined,
\t'User Input?',
\t`Yeah, sure we can.`,
\t'Ok, lots of options.'
);

// show switch
TNSFancyAlert.showSwitch(
\t`Don't show again`,
\t'#58B136',
\tnew TNSFancyAlertButton({
\t\tlabel: 'Save',
\t\taction: (isSelected: boolean) => {
\t\t\tconsole.log(`Don't show again was selected: ${isSelected}`);
\t\t},
\t}),
\t'switch.png',
\t'#B3714F',
\t'Need a switch?',
\t`It can be useful.`,
\t'Got it.'
);
\n

TNSFancyAlert - Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
TNSFancyAlert.SUPPORTED_TYPES: IFancyAlertSupportedTypesDifferent supported style types.
TNSFancyAlert.shouldDismissOnTapOutside: booleanShould dismiss when tapped outside.
TNSFancyAlert.dismissCallback: () => voidCallback for when alert is dismissed.
TNSFancyAlert.hideAnimationType: IFancyAlertHideAnimationTypesUse TNSFancyAlert.HIDE_ANIMATION_TYPES to set. Supports: FadeOut, SlideOutToBottom, SlideOutToTop, SlideOutToLeft, SlideOutToRight, SlideOutToCenter, SlideOutFromCenter.
TNSFancyAlert.showAnimationType: IFancyAlertShowAnimationTypesUse TNSFancyAlert.SHOW_ANIMATION_TYPES to set. Supports: FadeIn, SlideInFromBottom, SlideInFromTop, SlideInFromLeft, SlideInFromRight, SlideInFromCenter, SlideInToCenter.
TNSFancyAlert.backgroundType: IFancyAlertBackgroundTypesUse TNSFancyAlert.BACKGROUND_TYPES to set. Supports: Shadow, Blur, Transparent.
TNSFancyAlert.customViewColor: stringOverwrite (Buttons, top circle and borders) colors.
TNSFancyAlert.iconTintColor: stringSet custom tint color for icon image.
TNSFancyAlert.titleColor: stringSet custom title color.
TNSFancyAlert.bodyTextColor: stringSet custom body text color.
TNSFancyAlert.tintTopCircle: stringOverride top circle tint color with background color
TNSFancyAlert.cornerRadius: numberSet custom corner radius.
TNSFancyAlert.backgroundViewColor: stringOverwrite background color
TNSFancyAlert.useLargerIcon: booleanMake the top circle icon larger
TNSFancyAlert.soundURL: stringUse mp3 from App_Resources when alert shows.
TNSFancyAlert.textDisplayOptions: IFancyAlertTextOptionsIOS Only. Text display options
\n

TNSFancyAlert - Methods

\n\n

Android Specifications

\n

Usage Examples

\n

NOTE: Android supports only a subset of the iOS features, but will return a Promise on every call:

\n
import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';

// show success
TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!').then(() => {
\t/* user pressed the button */
});

// show error
TNSFancyAlert.showError('Error!', 'Something bad happened.', 'Close').then(() => {
\t/* user pressed the button */
});
\n

TNSFancyAlert - Methods

\n\n

TNSFancyAlertButton (iOS only)

\n

This class can be instantiated on iOS to configure buttons in the fancy alerts.

\n
export class TNSFancyAlertButton {
  public label: string;
  public action: Function;
  public applyStyle: (btn: any) => void;

  constructor(model?: any) {
    if (model) {
      this.label = model.label;
      this.action = model.action;
      this.applyStyle = model.applyStyle;
    }
  }
}
\n\n

Here's an example of how to setup a custom background color:

\n
new TNSFancyAlertButton({
  label: 'Ok',
  action: () => {
    // the action to take
  },
  applyStyle: (btn: UIButton) => {
    // we can use UIButton typing when using tns-platform-declarations
    // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )
    // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize

    (<any>btn).buttonFormatBlock = () => {
      // set a custom backgroundColor
      return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);
    }
  }
}),
\n

Tutorials

\n

Need extra help getting these fancy alerts working in your application? Check out these tutorials that make use of the plugin:

\n

Fancy Alerts in a NativeScript with Angular Application

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radar-io":{"name":"nativescript-radar-io","version":"0.0.3","license":"Apache-2.0","readme":"

NativeScript RadarIO

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
tns plugin add nativescript-radar-io
\n

To get a Radar publishable API key, sign up for a Radar account.

\n

IOS

\n

Configure project

\n
\n

To track the user's location in the foreground, you must add a string for the NSLocationWhenInUseUsageDescription key in your Info.plist file if you haven't already. This string will be displayed when prompting the user for foreground location permissions.

\n
\n
\n

To track the user's location in the background, you must also add a string for the NSLocationAlwaysUsageDescription (iOS 10 and before) and NSLocationAlwaysAndWhenInUseUsageDescription (iOS 11 and later) keys in your Info.plist file if you haven't already. These strings will be displayed when prompting the user for background location permissions.

\n
\n
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your iOS 11 and higher background location usage description goes here. e.g., \"This app uses your location in the background to recommend places nearby.\"</string>

<key>NSLocationAlwaysUsageDescription</key>
<string>Your iOS 10 and lower background location usage description goes here. e.g., \"This app uses your location in the background to recommend places nearby.\"</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your foreground location usage description goes here. e.g., \"This app uses your location in the foreground to recommend places nearby.\"</string>
\n

For increased reliability and responsiveness in the background, you should also turn on Location updates. Note that this requires additional justification during App Store review. Learn more.

\n

Add to Info.plist

\n
<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>location</string>
</array>
\n

Usage

\n

Import module

\n

First, import the module:

\n
import { RadarIO } from 'nativescript-radar-io';
\n

Enable Places

\n

If you are using Places, you must set Facebook as your place data provider.

\n

To set Facebook as your place data provider, call:

\n
RadarIO.setPlacesProvider('facebook');
\n

To disable Places later, call:

\n
RadarIO.setPlacesProvider('none');
\n

Learn more about Places.

\n

Identify user

\n

Until you identify the user, Radar will automatically identify the user by device ID.

\n

To identify the user when logged in, call:

\n
RadarIO.setUserId(userId);
\n

where userId is a stable unique ID string for the user.

\n

Do not send any PII, like names, email addresses, or publicly available IDs, for userId. See privacy best practices for more information.

\n

To set an optional dictionary of custom metadata for the user, call:

\n
RadarIO.setMetadata(metadata);
\n

where metadata is a JSON object with up to 16 keys and values of type string, boolean, or number.

\n

Finally, to set an optional description for the user, displayed in the dashboard, call:

\n
RadarIO.setDescription(description);
\n

where description is a string.

\n

You only need to call these functions once, as these settings will be persisted across app sessions.

\n

Request permissions

\n

Before tracking the user's location, the user must have granted location permissions for the app.

\n

To determine the whether user has granted location permissions for the app, call:

\n
RadarIO.getPermissionsStatus().then((status) => {
  // do something with status
});
\n

status will be a string, one of:

\n\n

To request location permissions for the app, call:

\n
RadarIO.requestPermissions(background);
\n

where background is a boolean indicating whether to request background location permissions or foreground location permissions. On Android, background will be ignored.

\n

Foreground tracking

\n

Once you have initialized the SDK, you have identified the user, and the user has granted permissions, you can track the user's location.

\n

To track the user's location in the foreground, call:

\n
RadarIO.trackOnce().then((result) => {
  // do something with result.location, result.events, result.user.geofences
}).catch((err) => {
  // optionally, do something with err
});
\n

err will be a string, one of:

\n\n

Background tracking

\n

Once you have initialized the SDK, you have identified the user, and the user has granted permissions, you can start tracking the user's location in the background.

\n

To start tracking the user's location in the background, call:

\n
RadarIO.startTracking();
\n

Assuming you have configured your project properly, the SDK will wake up while the user is moving (usually every 3-5 minutes), then shut down when the user stops (usually within 5-10 minutes). To save battery, the SDK will not wake up when stopped, and the user must move at least 100 meters from a stop (sometimes more) to wake up the SDK. Note that location updates may be delayed significantly by iOS Low Power Mode, by Android Doze Mode and App Standby and Background Location Limits, or if the device has connectivity issues, low battery, or wi-fi disabled. These constraints apply to all uses of background location services on iOS and Android, not just Radar. See more about accuracy and reliability.

\n

Optionally, you can configure advanced tracking options. See the iOS background tracking documentation and Android background tracking documentation for descriptions of these options.

\n
RadarIO.startTracking({
  priority: 'responsiveness', // // use 'efficiency' to avoid Android vitals bad behavior thresholds (ignored on iOS)
  sync: 'possibleStateChanges', // use 'all' to sync all location updates ('possibleStateChanges' recommended)
  offline: 'replayStopped' // use 'replayOff' to disable offline replay ('replayStopped' recommended)
});
\n

To stop tracking the user's location in the background (e.g., when the user logs out), call:

\n
RadarIO.stopTracking();
\n

You only need to call these methods once, as these settings will be persisted across app sessions.

\n

To listen for events, location updates, and errors, you can add event listeners:

\n
RadarIO.on('events', (result) => {
  // do something with result.events, result.user
});

RadarIO.on('location', (result) => {
  // do something with result.location, result.user
});

RadarIO.on('error', (err) => {
  // do something with err
});
\n

Add event listeners outside of your component lifecycle (e.g., outside of componentDidMount) if you want them to work when the app is in the background.

\n

You can also remove event listeners:

\n
RadarIO.off('events');

RadarIO.off('location');

RadarIO.off('error');
\n

Battery usage

\n

For most users, background tracking with the native iOS and Android SDKs uses 1-2% battery per day. Learn more in the in the SDK documentation.

\n

On Android, a receiver loads and parses the JavaScript bundle when the app is launched in the background. If you do not want to receive events in JavaScript and you want to disable this, add an override to your manifest:

\n
<receiver
  tools:replace=\"android:enabled\"
  android:name=\"com.github.triniwiz.radario.Receiver\"
  android:enabled=\"false\"
  android:exported=\"false\" />
\n

Manual tracking

\n

You can manually update the user's location by calling:

\n
const location = {
  latitude: 39.2904,
  longitude: -76.6122,
  accuracy: 65
};

RadarIO.updateLocation(location).then((result) => {
  // do something with result.events, result.user.geofences
}).catch((err) => {
  // optionally, do something with err
});
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hold-to-load":{"name":"nativescript-hold-to-load","version":"1.0.2","readme":"

\"npm\"\n\"npm\"

\n

NativeScript-Hold-To-Load

\n

Nativescript plugin for press (hold) background animation.

\n

Android Only

\n

Sample

\n

\"Demo\"

\n

Native Library

\n

HoldToLoadLayout

\n

Installation

\n

From your command prompt/termial go to your app's root folder and execute:

\n

npm install nativescript-hold-to-load

\n

Usage

\n

XML:

\n
<Page 
  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:HL=\"nativescript-hold-to-load\" loaded=\"pageLoaded\">
  <ActionBar title=\"Hold to Load\" />
  <StackLayout>
    
    <HL:HoldToLoadLayout duration=\"1000\" startColor=\"#3489db\" strokeWidth=\"50\" stopWhenFilled=\"true\" holdComplete=\"{{ completed }}\" holdReset=\"{{ reset }}\">
        <Label text=\"Press and Hold\" class=\"message\" textWrap=\"true\"/>
    </HL:HoldToLoadLayout>


    <HL:HoldToLoadLayout startColor=\"#ff4081\" endColor=\"#336699\" strokeWidth=\"120\" strokeAlpha=\"225\" holdComplete=\"{{ completed }}\" holdReset=\"{{ reset }}\" angleChange=\"{{ angleChange }}\">
        <Image src=\"~/images/bart.png\" class=\"circle-image\" stretch=\"aspectFit\" />
    </HL:HoldToLoadLayout>

  </StackLayout>
</Page>
\n

Attributes

\n

startColor - (color string) - required

\n

Attribute to set the starting color.

\n

endColor - (color string) - optional

\n

Attribute to set the ending color of the gradient, if not specified the startColor will be used.

\n

duration - (number) - optional

\n

Set duration of fill time in milliseconds. Default is 1500.

\n

strokeWidth - (number) - optional\nSets the stroke width. Default is 0.

\n

strokeAlpha - (number) - optional\nSets the paint's alpha value. ** Value range is between 0 & 255. ** Default alpha value is 255.

\n

playReverseAnimation - (boolean) - optional\nSets if to animate the reverse animation. If set false, the loading will disappear instantly. Default is true.

\n

stopWhenFilled - (boolean) - optional\nIf set true, loading will stop when it's completed. If set false, loading will be reversed even if it is full. Default is true.

\n

startAngle - (number) - optional\nSet the loading's starting point as angle. Default value is 270.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/fingerprint-auth":{"name":"@nativescript/fingerprint-auth","version":"8.1.0","license":"Apache-2.0","readme":"

@nativescript/fingerprint-auth

\n
ns plugin add @nativescript/fingerprint-auth
\n

Then open App_Resources/Android/app.gradle and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line to App_Resources/Android/src/main/AndroidManifest.xml:

\n
  <uses-sdk
      android:minSdkVersion=\"17\"
      android:targetSdkVersion=\"__APILEVEL__\"
      tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
\n

API

\n

Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

\n

available

\n

JavaScript

\n
var fingerprintAuthPlugin = require('@nativescript/fingerprint-auth');
var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

fingerprintAuth.available().then(function (avail) {
\tconsole.log('Available? ' + avail);
});
\n

TypeScript

\n
import { FingerprintAuth, BiometricIDAvailableResult } from \"@nativescript/fingerprint-auth\";

class MyClass {
  private fingerprintAuth: FingerprintAuth;

  constructor() {
    this.fingerprintAuth = new FingerprintAuth();
  }

  this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
    console.log(`Biometric ID available? ${result.any}`);
    console.log(`Touch? ${result.touch}`);
    console.log(`Face? ${result.face}`);
  });
}
\n

verifyFingerprint

\n

Note that on the iOS simulator this will just resolve().

\n
fingerprintAuth
\t.verifyFingerprint({
\t\ttitle: 'Android title', // optional title (used only on Android)
\t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
\t})
\t.then((enteredPassword?: string) => {
\t\tif (enteredPassword === undefined) {
\t\t\tconsole.log('Biometric ID OK');
\t\t} else {
\t\t\t// compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
\t\t}
\t})
\t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`));
\n

verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

\n

Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

\n
fingerprintAuth
\t.verifyFingerprintWithCustomFallback({
\t\tmessage: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
\t\tfallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
\t\tauthenticationValidityDuration: 10, // optional (used on Android, default 5)
\t})
\t.then(
\t\t() => {
\t\t\tconsole.log('Fingerprint was OK');
\t\t},
\t\t(error) => {
\t\t\t// when error.code === -3, the user pressed the button labeled with your fallbackMessage
\t\t\tconsole.log('Fingerprint NOT OK. Error code: ' + error.code + '. Error message: ' + error.message);
\t\t}
\t);
\n

Face ID (iOS)

\n

iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

\n

You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

\n
  <key>NSFaceIDUsageDescription</key>
  <string>For easy authentication with our app.</string>
\n

Security++ (iOS)

\n

Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

\n

So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

\n
fingerprintAuth.available().then((avail) => {
\tif (!avail) {
\t\treturn;
\t}
\tfingerprintAuth.didFingerprintDatabaseChange().then((changed) => {
\t\tif (changed) {
\t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
\t\t} else {
\t\t\t// call the fingerprint scanner
\t\t}
\t});
});
\n

Changelog

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-async":{"name":"nativescript-async","version":"1.0.2","license":"Apache 2","readme":"

nativescript-async

\n

A NativeScript plugin that make available async/await using helpers

\n

Author

\n\n

How to use it

\n
require('nativescript-async');
asyncTimeout(100);
asyncJasmine(async()=>{
    //MY TEST WITHOUT done()
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-declarations":{"name":"nativescript-android-declarations","version":"4.0.22","license":"MIT","readme":"

This plugin contains type information about the native platforms as exposed by the NativeScript framework.

\n

Supported entry points:

\n\n

Using the declarations may conflict with DOM typings,\nconsider using TypeScript 2.x.x and the following settings in your tsconfig.json:

\n
{
    \"compilerOptions\": {
        \"module\": \"commonjs\",
        \"target\": \"es5\",
        \"experimentalDecorators\": true,
        \"lib\": [
            \"es6\",
            \"dom\"
        ]
    }
}
\n

Create reference.d.tsand add the following content:

\n
/// <reference path=\"./node_modules/nativescript-android-declarations/android.d.ts\" />
\n

d.ts files require a lot of memory and CPU. Consider adding skipLibCheck option to tsconfig file.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-vueuse":{"name":"@vallemar/nativescript-vueuse","version":"0.0.16","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/tslint-rules":{"name":"@nativescript/tslint-rules","version":"0.0.5","license":"Apache-2.0","readme":"

NativeScript TSLint Rules

\n

\"Build

\n

This project contains tslint rules useful for NativeScript applications.

\n

prefer-mapped-imports rule

\n

Prefer using mapped paths when importing external modules or ES6 import declarations.

\n
\n

Note: This rule is intended for code-sharing NativeScript projects

\n
\n

Options

\n\n

Sample rule config (tslint.json):

\n
\"prefer-mapped-imports\": [
    true,
    {
        \"prefix\": \"@prefix/\",
        \"prefix-mapped-to\": \"src/\",
        \"base-url\": \".\"
    }
]
\n

Autofix

\n

The rule will propose a fix if:

\n\n

no-android-resources rule

\n

The rule forbids using constants inside android.R as they cause performance issues.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpchart":{"name":"nativescript-mpchart","version":"1.0.5-2","license":"Apache-2.0","readme":"

NativeScript MPChart UI

\n

A NativeScript MPChart for Android and iOS.\nThis plugin still in develop and will update more type chart and feature in future.\nBecause I don't have much time so it only have demo-ng is detail But it can work in core.\nNow, a plugin have simple LineChart.

\n

Based on

\n

Charts for iOS

\n

MPAndroidChart for Android

\n

Installation

\n

Run tns plugin add nativescript-mpchart

\n

API

\n

Events

\n
\n

Instance Properties

\n\n
    <color name=\"marker_background\">#cccccc</color>
    <color name=\"marker_text_color\">#000000</color>
    <color name=\"text_view_color\">#ff0000</color>
\n

into App_Resources/Android/values/colors.xml.\nSEE DETAIL IN demo-ng

\n

Method

\n\n

Method will reset chart. Call it if some property is change but not apply in UI.

\n

Data setup Properties

\n\n

Interface

\n
DataSetChartInterface {
    x: number;
    y: number;
}

DataSetLabelInterface {
    xAxisValue: number,
    label: string
}

DataLineChartInterface {
    dataSet: Array<DataSetChartInterface>;
    lineColor: Color;
    highlighColor?: Color;
    circleHoleEnabled?: boolean;
    circleColor?: Color;
    circleEnable?: boolean;
    legendLabel?: string;
}

YAxisFormatterInterface {
    type: TypeFormatter,
    numberOfDigits?: number
}
DataBarChartInterface {
    dataSet: Array<DataSetChartInterface>;
    legendLabel?: string;
    highlighColor?: Color,
    barColor?: Color;
}

ChartMarkerSize {
    width: number,
    height: number
}

ChartMarkerPadding {
    top: number;
    right: number;
    bottom: number;
    left: number;
}

ConfigDisplayData {
    showXValue: boolean,
    showYValue: boolean,
    fixedXValue?: YAxisFormatterInterface,
    fixedYValue?: YAxisFormatterInterface,
    formatter: string;
}

ChartMarkerConfig {
    backgroundColor?: Color,
    textColor?: Color,
    font?: string,
    fontSize?: number,
    padding?: {
        x: number,
        y: number
    },
    minimumSize?: ChartMarkerSize,
    borderRadius?: number,
    contentCenter?: boolean,
    displayData: ConfigDisplayData,
    xOffset?: number,
    yOffset?: number,
}
\n

Usage in Angular

\n\n
import { NativeScriptMPLineChartModule } from \"nativescript-mpchart/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tNativeScriptMPLineChartModule,
        //......
\t],
    //......
})
\n\n
    height=\"100%\"
\n

to full in parent layout.

\n
<!-- app.component.html -->
    <!-- line chart -->
    <StackLayout height=\"500\">
        <MPLineChart *ngIf=\"dataSet\" #lineChart [showLegend]=\"setUp.showLegend\" [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\"
            [descriptionText]=\"setUp.descriptionText\" [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\"
            [descriptionTextColor]=\"setUp.descriptionTextColor\" [highlightPerTapEnabled]=\"setUp.highlightPerTapEnabled\" [highlightPerDragEnabled]=\"setUp.highlightPerDragEnabled\"
            [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
            [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
            [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
            [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
            [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
            [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [items]=\"dataSet\" [labels]=\"labels\"
            [font]=\"setUp.font\" class=\"mp-chart\"></MPLineChart>
    </StackLayout>
    <!-- bar chart -->
     <StackLayout height=\"500\">
        <MPBarChart height=\"400\" #lineChart *ngIf=\"barDataSet\" [items]=\"barDataSet\" [labels]=\"labels\" [showLegend]=\"setUp.showLegend\"
            [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\" [descriptionText]=\"setUp.descriptionText\"
            [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\" [descriptionTextColor]=\"setUp.descriptionTextColor\"
            [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
            [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
            [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
            [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
            [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
            [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [font]=\"setUp.font\" 
            [showValueLabels]=\"setUp.showValueLabels\" [showLeftAxis]=\"setUp.showLeftAxis\" [showRightAxis]=\"setUp.showRightAxis\"
            [marker]=\"markerConfig\" class=\"mp-chart\"></MPBarChart>
    </StackLayout>
\n
/*app.css*/
.mp-chart {
    description-text-color: #00ff00;
    x-axis-line-color: #ff0000;
    left-axis-line-color: #005500;
    right-axis-line-color: #ff00ff;
    x-axis-text-color: #ff0000;
    left-axis-text-color: #005500;
    right-axis-text-color: #ff00ff;
}
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { DataLineChartInterface, DataSetChartInterface, DataSetLabelInterface,YAxisFormatterInterface } from \"nativescript-mpchart\";

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {

     public setUp: any = {
        showGridLines: false,
        showLegend: true,
        scaleEnable: true,
        descriptionText: \"Text for chart\",
        descriptionXOffset: 0,
        descriptionYOffset: 0,
        descriptionTextColor: \"#ffff00\",
        highlightPerTapEnabled: true,
        highlightPerDragEnabled: true,
        xAxisGranularityProperty: 1,
        leftAxisGranularityProperty: 20,
        rightAxisGranularityProperty: 30,
        xAxisLineColor: \"#ff0000\",
        xAxisTextColor: \"#ff0000\",

        leftAxisLineColor: \"#0000ff\",
        leftAxisTextColor: \"#0000ff\",

        rightAxisLineColor: \"#00ff00\",
        rightAxisTextColor: \"#00ff00\",

        xAxisMinValue: -1,
        xAxisMaxValue: 4,

        leftAxisMinValue: 0,
        leftAxisMaxValue: 100,

        rightAxisMinValue: 0,
        rightAxisMaxValue: 70,

        font: \"Papyrus\",
        xAxisLabelPosition: \"Bottom\",
        showValueLabels: false,
        showLeftAxis: true,
        showRightAxis: false,
    };
    public leftAxisFormatter: YAxisFormatterInterface = {
        type: \"Float\",
        numberOfDigits: 1
    };
    public rightAxisFormatter: YAxisFormatterInterface = {
        type: \"Float\",
        numberOfDigits: 1
    };
    public markerConfig: ChartMarkerConfig
    public dataSet: Array<DataLineChartInterface>;
    public barDataSet: Array<DataBarChartInterface>;
    public labels: Array<DataSetLabelInterface>;
    constructor(
        public changeDetectorRef: ChangeDetectorRef
    ) {
        let cyan = new Color(\"#00FFFF\");
        let color = new Color(\"#FF0000\");
        let color1 = new Color(\"#00FF00\");
        let arrDataView1: Array<DataSetChartInterface> = [];
        let arrDataView2: Array<DataSetChartInterface> = [];
        let arrLabel: Array<DataSetLabelInterface> = [];
        let arrDataView: Array<DataSetChartInterface> = [];
        for (let i = 0; i < 8; i++) {
            arrDataView1.push({
                x: i,
                y: i * 9,
            });
            arrDataView2.push({
                x: i,
                y: i + 30,
            });

            arrLabel.push({
                xAxisValue: i,
                label: `Tháng ` + (i + 1)
            })

        }
        let item: DataLineChartInterface = {
            dataSet: arrDataView1,
            lineColor: cyan,
            highlighColor: color,
            legendLabel: \"arrDataView1\"
        };
        let item1: DataLineChartInterface = {
            dataSet: arrDataView2,
            lineColor: color1,
            highlighColor: color,
        };
        this.dataSet = [];
        this.dataSet.push(item);
        this.dataSet.push(item1);
        this.barDataSet = [];
        this.barDataSet.push({
            dataSet: arrDataView1,
            legendLabel: \"barChartView1\",
            highlighColor: color,
            barColor: color1
        });
        this.markerConfig = {
            displayData: {
                showXValue: false,
                showYValue: true,
                formatter: \"Yvalue: {{y}}\",
            },
            contentCenter: true,
            xOffset: -30,
            yOffset: -30,
            backgroundColor: new Color(\"#0000ff\"),
            textColor: new Color(\"#ffffff\"),
            font: \"Papyrus\",
            fontSize: 12,
            padding: {
                x: 20,
                y: 10
            }
        }
        this.labels = arrLabel;
    }
}
\n

##FixSameError

\n

When use plugin if you see error when build --aot in line import interface in file .component like this :

\n

Module not found. Can't resolve "nativescript-mpchart" in "relative path*.component".

\n

You can't try change to : import { ... } from "nativescript-mpchart/index" and delete all platform, hook, node_modules and rebuild. I think an error in platform and angular not in plugin because i see it when develop.

\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/LeCaoPhuc/nativescript-mpchart
$ cd nativescript-mpchart/src
$ npm install
$ npm run demo
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

\n

If you want to run the Angular demo simply use the demo.ios.ng.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-locate-address":{"name":"nativescript-locate-address","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/iguissouma/nativescript-locate-address/blob/master/LICENSE"},"readme":"

NativeScript Locate Address plugin

\n

This plugin helps to open the native mapping app and displaying a map of the address passed in.\nInspired by NativeScript Directions plugin by Eddy Verbruggen\nFor iOS and Android

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-locate-address
\n

Demo app

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

\n\n

API

\n

available

\n

Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

\n
JavaScript
\n
// require the plugin
var LocateAddress = require(\"nativescript-locate-address\").LocateAddress;

// instantiate the plugin
var locator = new LocateAddress();

locator.available().then(
  function(avail) {
    console.log(avail ? \"Yes\" : \"No\");
  }
);
\n
TypeScript
\n
// require the plugin
import {LocateAddress} from \"nativescript-locate-address\";

// instantiate the plugin
let locator = new LocateAddress();

locator.available().then((avail) => {
    console.log(avail ? \"Yes\" : \"No\");
});
\n

locate

\n

This function opens the native Maps app with a predefined address.

\n

Note that if the address is not recognized you won't be able to get location, don't blame this plugin for that.

\n
JavaScript
\n
locator.locate({
    address: \"289 Avenue georges clemenceau, Nanterre 92000, France\",
}).then(
  function() {
    console.log(\"Maps app launched.\");
  },
  function(error) {
    console.log(error);
  },
);
\n
TypeScript
\n
locator.locate({
    address: \"289 Avenue georges clemenceau, Nanterre 92000, France\",
}).then(() => {
    console.log(\"Maps app launched.\");
}, (error) => {
    console.log(error);
});
\n

You can use lat and lng to locate address.

\n
JavaScript
\n
locator.locate({
    lat : 48.8858671,
    lng : 2.2188144
}).then(
  function() {
    console.log(\"Maps app launched.\");
  },
  function(error) {
    console.log(error);
  },
);
\n
TypeScript
\n
locator.locate({
    lat : 48.8858671,
    lng : 2.2188144
}).then(() => {
    console.log(\"Maps app launched.\");
}, (error) => {
    console.log(error);
});
\n

Future work

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-filepicker":{"name":"nativescript-plugin-filepicker","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-plugin-filepicker

\n

Filepicker plugin supporting both single and multiple selection.\nFor Android, it uses Intents to open the stock file pickers. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required. See demo for implementation details.

\n

For iOS, it uses stock UIDocumentPickerViewController for picking the file.

\n

Installation

\n
tns plugin add nativescript-plugin-filepicker
\n

Usage

\n

Create filepicker in single or multiple mode to specifiy if the filepicker will be used for single or multiple selection of files

\n

TypeScript

\n
let context = filepicker.create({
    mode: \"single\", // use \"multiple\" for multiple selection
     extensions: [\"pdf\", \"jpg\", \"doc\", \"docx\"]
});
\n

Javascript

\n
var context = filepicker.create({ mode: \"single\" }); // use \"multiple\" for multiple selection
\n

Request permissions, show the file list and process the selection

\n
context
    .authorize()
    .then(function() {
        return context.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            // process the selected file
        });
    }).catch(function (e) {
        // process error
    });
\n
\n

NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

\n
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionPlatformDefaultDescription
modebothmultipleThe mode if the filepicker. Possible values are single for single selection and multiple for multiple selection.
extensionsbothFor iOS public.item and null(all files) for AndroidChoose whether file extension in array. eg. ["pdf", "doc"]
showAdvancedAndroidfalseShow internal and removable storage options on Android (WARNING: not supported officially).
\n

The hostView parameter can be set to the view that hosts the file picker. Applicable in iOS only, intended to be used when open picker from a modal page.

\n\n

Demo

\n

For demo use the sample demo-angular project.

\n
$ cd demo-angular
$ tns debug android/ios
\n

Contribute

\n

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-trotter":{"name":"nativescript-couchbase-trotter","version":"1.0.19","license":"Apache-2.0","readme":"

Couchbase Lite Plugin for Telerik NativeScript

\n

Couchbase Lite is a NoSQL embedded database for mobile devices. It is a replacement for common database technologies like SQLite and Core Data.

\n

Configuration

\n

To add this plugin to your Angular or vanilla JavaScript NativeScript project, execute the following from the Terminal or Command Prompt:

\n
tns plugin add nativescript-couchbase
\n

If you wish to try either of the demo applications that are bundled with this project, execute the following after cloning the repository:

\n
npm install
npm run deploy-android-angular
\n

For the third line, the list of options are:

\n
npm run deploy-android-angular
npm run deploy-android-vanilla
npm run deploy-ios-angular
npm run deploy-ios-vanilla
\n

If you're using TypeScript and wish to make use of the type definitions for this plugin, add the following line to your project's references.d.ts file:

\n
/// <reference path=\"./node_modules/nativescript-couchbase/couchbase.d.ts\" />
\n

Without the above line included, your TypeScript compiler may throw errors during the build.

\n

Usage

\n

Including the Plugin in Your Project

\n
var couchbaseModule = require(\"nativescript-couchbase\");
\n

Creating or Opening an Existing Database

\n
var database = new couchbaseModule.Couchbase(\"test-database\");
\n

Managing the Data with CRUD Operations

\n

Creating a New Document

\n
var documentId = database.createDocument({
    \"firstname\": \"Nic\",
    \"lastname\": \"Raboy\",
    \"address\": {
        \"city\": \"San Francisco\",
        \"state\": \"CA\",
        \"country\": \"USA\"
    }
    \"twitter\": \"https://www.twitter.com/nraboy\"
});
\n

Retrieving an Existing Document

\n
var person = database.getDocument(documentId);
\n

Updating an Existing Document

\n
database.updateDocument(documentId, {
    \"firstname\": \"Nicolas\",
    \"lastname\": \"Raboy\",
    \"twitter\": \"https://www.twitter.com/nraboy\"
});
\n

Deleting a Document

\n
var isDeleted = database.deleteDocument(documentId);
\n

Querying with MapReduce Views

\n

Knowing the document id isn't always an option. With this in mind, multiple documents can be queried using criteria defined in a view.

\n

Creating a MapReduce View

\n

A MapReduce View will emit a key-value pair. Logic can be placed around the emitter to make the views more specific.

\n
database.createView(\"people\", \"1\", function(document, emitter) {
    emitter.emit(document._id, document);
});
\n

Querying a MapReduce View

\n
var rows = database.executeQuery(\"people\", {descending : false, limit : 20,  skip : 1, startKey: \"name to strat with\", endKey:\"name to end at\"});
for(var i = 0; i < rows.length; i++) {
    personList.push(rows[i]);
}
\n

The available options when querying a MapReduce View are as follows:

\n\n

Synchronization with Couchbase Sync Gateway and Couchbase Server

\n

Couchbase Lite can work in combination with Couchbase Sync Gateway to offer synchronization support between devices and platforms. Couchbase Sync Gateway is not a requirement to use Couchbase Lite if the goal is to only use it for offline purposes.

\n

Couchbase Sync Gateway can be downloaded via the Couchbase Downloads Portal in the mobile section.

\n

A demo configuration file for Sync Gateway is included in the demo directory. It can be started by executing the following from a Command Prompt or Terminal:

\n
/path/to/sync/gateway/bin/sync_gateway /path/to/demo/sync-gateway-config.json
\n

In the demo configuration file, Couchbase Server is not used, but instead an in-memory database good for prototyping. It can be accessed via http://localhost:4985/_admin/ in your web browser.

\n

To replicate between the local device and server, the following must be added to your project:

\n
var couchbaseModule = require(\"nativescript-couchbase\");
database = new couchbaseModule.Couchbase(\"test-database\");

var push = database.createPushReplication(\"http://sync-gateway-host:4984/test-database\");
var pull = database.createPullReplication(\"http://sync-gateway-host:4984/test-database\");
push.setContinuous(true);
pull.setContinuous(true);
push.start();
pull.start();
\n

Data will now continuously be replicated between the local device and Sync Gateway.

\n

Listening for Changes

\n
database.addDatabaseChangeListener(function(changes) {
    for(var i = 0; i < changes.length; i++) {
        console.log(changes[i].getDocumentId());
    }
});
\n

Plugin Development

\n

The Couchbase NativeScript plugin is under active development. Changes to the API are infrequent in the underlying Couchbase Android and Couchbase iOS SDKs so as a result changes are infrequent in the JavaScript wrapper for NativeScript.

\n

If you feel something is missing or you've found a bug, open a ticket so it can be corrected or submit a pull request and be recognized for your contributions.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@avergara/nativescript-aws-sdk":{"name":"@avergara/nativescript-aws-sdk","version":"0.0.2","license":"Apache-2.0","readme":"

NativeScript AWS SDK

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n

NativeScript 7x

\n\n

Usage

\n

Android

\n

Add the following services in the app/App_Resources/Android/AndroidManifest.xml

\n
<manifest ... >
    <application ... >
        ...
<service android:name= \"com.amazonaws.mobileconnectors.s3.transferutility.TransferService\" android:enabled=\"true\" />
  </application>
</manifest>
\n

TypeScript

\n

S3

\n
import { S3 } from 'nativescript-aws-sdk';
S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
\n
import { S3 } from 'nativescript-aws-sdk';
const s3 = new S3();
const imageUploaderId = s3.createUpload({
  file: '~/assets/hulk_wolverine_x_men.jpg',
  bucketName: 'yaychat',
  key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
  acl: 'public-read',
  completed: (error, success) => {
    if (error) {
      console.log(`Download Failed :-> ${error.message}`);
    }
    if (success) {
      console.log(`Download Complete :-> ${success.path}`);
    }
  },
  progress: progress => {
    console.log(`Progress : ${progress.value}`);
  }
});

s3.pause(imageUploaderId);
s3.resume(imageUploaderId);
s3.cancel(imageUploaderId);
\n

JavaScript

\n
const S3 = require('nativescript-aws-sdk').S3;
S3.S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
\n
const imageUploaderId = s3.createUpload({
  file: '~/assets/hulk_wolverine_x_men.jpg',
  bucketName: 'yaychat',
  key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
  acl: 'public-read',
  completed: (error, success) => {
    if (error) {
      console.log(`Download Failed :-> ${error.message}`);
    }
    if (success) {
      console.log(`Download Complete :-> ${success.path}`);
    }
  },
  progress: progress => {
    console.log(`Progress : ${progress.value}`);
  }
});

s3.pause(imageUploaderId);
s3.resume(imageUploaderId);
s3.cancel(imageUploaderId);
\n

Api

\n

S3

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultTypeDescription
createDownload(options: S3DownloadOptions)numberCreates a task it returns the id of the task
createUpload(options: S3UploadOptions)numberCreates a task it returns the id of the task
resume(id: number)voidResumes a task.
cancel(id: number)voidCancels a task.
pause(id: number)voidPauses a task.
\n

Example Image

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
IOSAndroid
\"IOS\"\"Android\"
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace":{"name":"nativescript-dynatrace","version":"1.0.4","license":"Apache-2.0","readme":"

Nativescript Dynatrace plugin for Android and iOS

\n

Auto-instrument your application with Dynatrace and to prepare it for monitoring.

\n

Prerequisites / Requirements

\n

You need a Dynatrace account and the credentials of your Dynatrace Application (DTXApplicationID,\nDTXAgentEnvironment and DTXClusterURL).

\n

Installation

\n

First, you need to add the Nativescript Dynatrace plugin:

\n
tns plugin add nativescript-dynatrace\n
\n

Then, you need to create a file named dynatrace-service.json or dynatrace-service.js in the project root or in\nNAME_PROJECT/app/App_Resources/ with the following structure:

\n
module.exports = {
  DTXAgentEnvironment: string,
  DTXAllowAnyCert: boolean,
  DTXApplicationID: string,
  DTXAutoActionMaxDurationMilliseconds: int,
  DTXAutoActionTimeoutMilliseconds: int,
  DTXAutoStart: boolean,
  DTXBKSFileName: string,
  DTXBKSPassword: string,
  DTXClusterURL: boolean,
  DTXCrashReportingEnabled: boolean,
  DTXExcludePackages: string,
  DTXHybridApplication: boolean,
  DTXIncludeAllPackages: boolean,
  DTXIncludePackages: string,
  DTXInstrumentAutoUserAction: boolean,
  DTXInstrumentGPSLocation: boolean,
  DTXInstrumentLifecycleMonitoring: boolean,
  DTXInstrumentWebRequestTagging: boolean,
  DTXInstrumentWebRequestTiming: boolean,
  DTXLogLevel: string,
  DTXManagedCluster: boolean,
  DTXMonitorCookie: string,
  DTXMultiDexKeep: string,
  DTXMultiDexKeepFile: string,
  DTXPrimaryDexLimit: int,
  DTXSecondaryDexLimit: int,
  DTXSetCookiesForDomain: string,
  DTXUserOptIn: boolean,
  DTXVersionCode: int,
  DTXVersionName: string,
};
\n

Here\nyou can find all the auto-instrumentation properties that you can customize.

\n

How this plugin works

\n

Work in progress...

\n

API

\n

Work in progress...

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-utils":{"name":"nativescript-easy-utils","version":"1.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http":{"name":"nativescript-http","version":"1.0.8","license":"Apache-2.0","readme":"

installation

\n

Install nativescript-http into an existing NativeScript project

\n
npm i nativescript-http
\n

Usage

\n

Core (global)

\n

If you are using TypeScript, then add this to your app.ts file.

\n
app.ts
\n
declare global {
  // eslint-disable-next-line no-unused-vars
  module NodeJS {
    // eslint-disable-next-line no-unused-vars
    interface Global {
      http: HttpClient;
    }
  }
}
\n

Add the http module globaly

\n
app.ts
\n
import { HttpClient } from 'nativescript-http'

global.http = new HttpClient({
  baseUrl: 'https://achrafbardan.me', // optional
  unauthenticatedCallback: (response) => { // optional
    console.log(response.content);
  },
  // When an http response code is inside this array the above function will run
  unauthenticatedStatusCodes: [201] // optional
});
\n

Make a request

\n
main-page-model.ts
\n
makeRequest() {
  global.http.request({
    method: 'get',
    url: '/users',
    content: JSON.stringify({
      id: 1
    }),
    dontFollowRedirects: false,
    headers: {
      \"Content-Type\": \"application/json\"
    },
    timeout: 0
  }).then(response => {
    console.log(response.content)
  })
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-layouts":{"name":"nativescript-nbmaterial-layouts","version":"1.0.1","license":"Apache-2.0","readme":"

A nativescript utils for manipulating layouts

\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-getui":{"name":"nativescript-easy-getui","version":"3.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msal":{"name":"nativescript-msal","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript-msal

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-networking":{"name":"nativescript-simple-networking","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/yaqwsx/nativescript-simple-networking/blob/master/LICENSE"},"readme":"

NativeScript Simple Networking

\n

Basic UDP and TCP sockets for NativeScript.

\n

Supported platforms

\n\n

There is no support for iOS (yet), as I am not an iOS developer. Contributions\nfor adding iOS support are welcome!

\n

Installing

\n
tns plugin add nativescript-simple-networking
\n

Usage

\n

This plugin provides three classes: UdpServer, TcpClient and TcpServer.\nAll of them provide similar, callback-based, interface. An example of usage is\nworth a thousands words and therefore here is a TypeScript example:

\n
import {UdpServer, TcpClient, TcpServer} from \"nativescript-simple-networking\";
import {Address4} from \"ip-address\";

var udpServer = new UdpServer();
udpServer.onPacket = (sender: Address4, message: string) => {
    console.log(\"Message from UDP: \", message);
};
udpServer.onError = (id: number, message: string) => {
    console.log(\"UDP error for action #\", id, \": \", message);
};
udpServer.onFinished = (id: number) => {
    console.log(\"UDP finished action #\", id);
};

// Start listening on port 33333
var udpConnectEvent: number = udpServer.start(33333);
console.log(\"UDP start event is: \", udpConnectEvent);
// Broadcast a message
var udpBroadcastEvent: number = udpServer.send(\"255.255.255.255\", \"I am alive!\");
console.log(\"UDP broadcast event is: \", udpBroadcastEvent);

// Start a TCP server listening on port 44444 with maximum 2 clients
var tcpServer = new TcpServer(2);
tcpServer.onClient = (client: Address4) => {
    console.log(\"New TCP client: \", client.adddress)
    tcpServer.send(client, \"Welcome!\");
};
tcpServer.onData = (client: Address4, data: string) => {
    console.log(\"New data from client \", client.address, \": \", data);
};
tcpServer.onError = (id: number, client: Address4, message: string) => {
    if (client)
        console.log(\"TCP server client error\", client.address, \": \", message);
    else
        console.log(\"TCP server error: \", message);
};
tcpServer.onFinished = (id: number) => {
        console.log(\"TCP server finished transaction #\", id);
};

tcpServer.start(44444);

// Connect to the TCP server
var tcpClient = new TcpClient();
tcpClient.onData = (data: string) => {
    console.log(\"Data from TCP client: \", data);
};
tcpClient.onError = (id: number, message: string) => {
    console.log(\"TCP client error for action #\", id, \": \", message);
};
tcpClient.onFinished = (id: number) => {
    console.log(\"TCP client finished action #: \", id);
};

// Connect client, action IDs are ommited in this example - see UdpServer
tcpClient.start(\"localhost\", 44444);
tcpClient.send(\"I am also alive!\");

// When we are finished
udpServer.stop();
TcpServer.stop();
TcpClient.stop();
\n

Contributing

\n

Any contributions are welcome, feel free to submit a pull request on GitHub. I\nwould appreciate a PR, which would add support for iOS.

\n

Future Plans

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-editor-with-fixed-textfield":{"name":"nativescript-photo-editor-with-fixed-textfield","version":"61.1.0","license":"Apache-2.0","readme":"

NativeScript Photo Editor

\n

\"Build\n\"npm\n\"npm\n\"npm\"

\n

A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-photo-editor

\n

This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Methods

\n\n

Usage

\n

Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

\n
import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

const photoEditor = new PhotoEditor();

photoEditor.editPhoto({
    imageSource: originalImage.imageSource,
    hiddenControls: [
        PhotoEditorControl.Save,
        PhotoEditorControl.Crop,
    ],
}).then((newImage: ImageSource) => {
    // Here you can save newImage, send it to your backend or simply display it in your app
    resultImage.imageSource = newImage;
}).catch((e) => {
    console.error(e);
});
\n

Usage in Angular

\n

There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

\n

Demos

\n

This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

\n
$ git clone https://github.com/peterstaev/nativescript-photo-editor
$ cd nativescript-photo-editor
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

Donate

\n

\"Donate\"

\n

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

\n

\"Donate\"

\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-odoo":{"name":"nativescript-odoo","version":"2.0.1","license":"Apache-2.0","readme":"

NativeScript Odoo Client (API)

\n

Installation

\n

Run

\n
tns plugin add nativescript-odoo
\n

Basic method support

\n\n

Usage

\n
// home.component.ts
import { Component } from \"@angular/core\";
import { OdooClient } from \"nativescript-odoo/odoo-api/odoo-client\";

@Component({
    selector: \"Home\",
    templateUrl: \"./home.component.html\",
})
export class HomeComponent {
    public odooClient: OdooClient;
    public serverUrl = \"http://yourdomain.com\";
    public username = \"username\";
    public password = \"username\";

    constructor() {
        this.test();
    }

    async test() {
        // Get Odoo Client instance
        this.odooClient = OdooClient.getInstance();

        // Set Odoo Server Url
        this.odooClient.setServerUrl(this.serverUrl);

        // Connect Odoo server and get version
        let versionInfo;
        try {
            versionInfo = await this.odooClient.connect();
            console.log(\"=> Version info\");
            console.dir(versionInfo);
        } catch (err) {
            alert(err);
        }

        // Get database
        let databases;
        if (versionInfo) {
            try {
                databases = await this.odooClient.getDatabases();
                console.log(\"=> Database\");
                console.dir(databases);
            } catch (err) {
                alert(err);
            }
        }

        // Authentication with username and password
        let userInfo;
        try {
            userInfo = await this.odooClient.authenticate(this.username, this.password, databases[0]);
            console.log(\"=> User info\");
            console.dir(userInfo);
        } catch (err) {
            alert(err);
        }

        // Logout
        try {
            await this.odooClient.logout();
            console.log(\"=> Logout successfully\");
        } catch (err) {
            alert(err);
        }
    }
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aminebizid/nativescript-adal":{"name":"@aminebizid/nativescript-adal","version":"1.1.1","license":"MIT","readme":"

NativeScript Active Directory Authentication Library Plugin

\n

This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app\nThanks to NavaraBV

\n

Prerequisites / Requirements

\n

Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

\n

Installation

\n
tns plugin add @aminebizid/nativescript-adal
\n

Usage (Angular example)

\n

Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

\n
import { Injectable } from '@angular/core';
import { AdalContext } from '@aminebizid/nativescript-adal';

const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
const clientId: string = '{your-application-id}';
const resourceId: string = '00000002-0000-0000-c000-000000000000';

@Injectable()
export class AdalService {

  public adalContext: AdalContext;

  constructor() {
    this.adalContext = new AdalContext(authority, clientId, resourceId);
  }
}
\n

...and consume this service in your application!

\n
export class AppComponent {

  constructor(private adalService: AdalService) { }

  public login() {
    this.adalService.adalContext.login().then((result) => {
      console.log('Success!');
    })
  }

  public logout() {
    this.adalService.adalContext.logout();
  }
}
\n

License

\n

See LICENSE for details.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braze":{"name":"nativescript-braze","version":"1.1.3","license":"MIT","readme":"

nativescript-braze

\n

NOTE: Not all functions have been implemented yet. Feel free to contribute.\nThis plugin is based on the appboy-react-sdk.

\n

SDK Integration

\n\n

Running the Sample App

\n

The following commands apply to both sample projects and use the AppboyProject directory as an example.

\n
cd demo-angular/
npm install
\n

iOS

\n

From the demo-angular directory:

\n
tns run ios
\n

From the src directory:

\n
npm run demo-angular.ios
\n

Android

\n

From the demo-angular directory:

\n
tns run android
\n

From the src directory:

\n
npm run demo-angular.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mtmobile-sqlite":{"name":"nativescript-mtmobile-sqlite","version":"1.3.0","license":"Apache-2.0","readme":"

Nativescript: MtMobile Sqlite

\n

\"Build \"npm

\n

Installation

\n
tns plugin add nativescript-mtmobile-sqlite
\n

Usage

\n

You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

\n
import { openOrCreate, deleteDatabase } from \"nativescript-mtmobile-sqlite\";

const sqlite = openOrCreate(\"path/to/db\");
sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
sqlite.transaction(cancelTransaction => {
    // Calling cancelTransaction will rollback all changes made to db
    names.forEach((name, id) =>
        sqlite.execute(
            \"INSERT INTO names (id, name) VALUES (?, ?)\",
            [id, name]
        )
    );
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngxplayer":{"name":"nativescript-ngxplayer","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-cscreenshot":{"name":"@enduco/nativescript-cscreenshot","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Cscreenshot :camera:

\n

This plugin was created so you can take screenshots of views easily and then store it as you like.

\n

this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

\n

Installation

\n

Use the install command:

\n
tns plugin add @enduco/nativescript-cscreenshot
\n

Usage

\n

Just import the plugin in your project and use it like this

\n

using Typescript:

\n
    import { Cscreenshot } from \"@enduco/nativescript-cscreenshot\";
    import { ImageSource } from \"@nativescript/core\";

    // then in your take a screenshot method
    let screen = new Cscreenshot();

    // Using vanilla Nativescript
    let view = page.getViewById('main');

    // Using Angular Nativescript
    @ViewChild(\"main\", { static: true }) main: ElementRef;
    let view = this.view.nativeElement;

    // Using Vue Nativescript
    let view = this.$refs.main.nativeView;

    screen.take(view, (image: ImageSource)=>{
        // Do whatever you want with the returned source image
    });
\n
and in your template\n
\n
    <!-- Assign the reference name depending on the framework -->
    <!-- 'id=\"\"' for vanilla nativescript -->
    <!-- '#main' for angular nativescript -->
    <!-- 'ref=\"main\"' for Vue nativescript -->
    <GridLayout id=\"main\" #main ref=\"main\">
        <!-- Content of your app here -->
    </GridLayout>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediapicker":{"name":"nativescript-mediapicker","version":"1.2.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@shumih/nativescript-segmented-bar":{"name":"@shumih/nativescript-segmented-bar","version":"9.0.5","license":"Apache-2.0","readme":"

nativescript-segmented-bar

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @shumih/nativescript-segmented-bar
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nodemedia":{"name":"nativescript-nodemedia","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-nodemedia

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-nodemedia
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-video-editor":{"name":"nativescript-video-editor","version":"0.0.1","license":"Apache-2.0","readme":"

NativeScript Video Editor

\n

\"Build\n\"NPM\n\"Downloads\"\n\"Twitter

\n

Prerequisites / Requirements

\n

Note Android min-sdk is 18

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-video-editor
\n

Usage

\n

Transcode

\n
import { VideoEditor } from 'nativescript-video-editor';
// parameters passed to transcodeVideo
VideoEditor.transcodeVideo(
            filePath, // the path to the video on the device
            'outputFileName', // the file name for the transcoded video
            width,
            height,
            videoBitrate,
            fps,
            saveToLibrary, // optional, defaults to true
            function(progress) {} // info will be a number from 0 to 100
).then(function(file){})
.catch(function(error) {})
\n

Create a JPEG thumbnail from a video

\n
import { VideoEditor } from 'nativescript-video-editor';
VideoEditor.createThumbnail(
        filePath, // the path to the video on the device
        'outputFileName', // the file name for the JPEG image
        60, // optional, location in the video to create the thumbnail (in seconds)
        320, // optional, width of the thumbnail
        480, // optional, height of the thumbnail
        100 // optional, quality of the thumbnail (between 1 and 100)
)
.then(function(file){})
.catch(function(error) {})
\n

Get info on a video (width, height, orientation, duration, size, & bitrate)

\n
import { VideoEditor } from 'nativescript-video-editor';
VideoEditor.getVideoInfo(
        filePath, // the path to the video on the device
).then(function(info){})
 .catch(function(error) {})
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/storybook":{"name":"@nativescript/storybook","version":"1.0.0-alpha.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-asitsvideorecorder":{"name":"nativescript-asitsvideorecorder","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript ASITS VIDEO RECORDER Plugin

\n

A dead-simple plugin to use the camera functionalities of your NativeScript app.

\n

Installation

\n
npm install nativescript-asitsvideorecorder
\n

Usage For Angular

\n
registerElement(\"AsitsVideoRecorder\", () => require(\"nativescript-asitsvideorecorder\").AsitsVideoRecorder);
\n
<AsitsVideoRecorder height=\"250\" debug=\"true\"
                            galleryPickerMode=\"single\" showFlashIcon=\"true\" showToggleIcon=\"true\"
                            showCaptureIcon=\"true\" showGalleryIcon=\"true\" confirmSaveText=\"CONFIRM!\" confirmRetakeText=\"RETAKE!\" (loaded)=\"camLoaded($event)\"
                            (toggleCameraEvent)=\"toggleCameraEvent($event)\" (photoCapturedEvent)=\"photoCapturedEvent($event)\"
                            (imagesSelectedEvent)=\"imagesSelectedEvent($event)\">
        </AsitsVideoRecorder>
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-debugging":{"name":"nativescript-dev-debugging","version":"2.0.2","license":"Apache-2.0","readme":"

\"npm\"\n\"npm\"

\n

nativescript-dev-debugging

\n

This dev plugin allows a NativeScript plugin authors to use a predefined workflow with which you can develop and debug both the native iOS/Android and the TypeScript/JavaScript wrapper source code of their NS plugin. The main API that this plugin exposes is through npm scripts which will be saved to your package.json of your plugin's source code.

\n

Note

\n
\n\n
\n

Installation

\n

Requirements

\n\n

The first thing you need to do is install the plugin:

\n\n

A fresh configuration

\n

Simply install the package and follow the prompts, there are two options one of which minimizes the asked inputs by following the 'plugin seed' structure and a second option which is fully manual configuration and is recommended if you have not followed the NativeScript plugin seed structure.

\n

or

\n

Configuration using a n.debug.config.json file

\n

You can take a look at "Configuration file" section bellow for details about the required contents of the configuration file. To use an n.debug.config.json file during package installation simply create a file named n.debug.config.json in the root of your plugins source code (where its package.json file is) and install the package as normally.

\n

Manual configuration

\n

Recommended for plugins that have not used the NativeScript plugin seed as a starting point. The post install script will ask for the following configuration settings of your plugin's structure:

\n\n

"Plugin seed" friendly configuration

\n

Recommended for plugins that have used the NativeScript plugin seed as a starting point. The post install script will ask for the following configuration settings of your plugin's structure:

\n

The post install script will ask for the following configuration settings of your plugin's structure:

\n\n

Configuration file

\n

After either of the above configuration stages the configuration parameters you have entered will be written locally to an configuration json file called n.debug.config.json. You can manually create this file in the root (where the package.json of your {N} plugin source code is) and pre-configure it so that when the npm postinstall script is ran it will skip app prompts of the nativescript-dev-debugging plugin configuration stage. Here are all the require configuration key/value pairs:

\n
{
\t\"pluginSrcFolder\": \"/Users/USER/plugin_repo/src\",
\t\"pluginPlatformFolder\": \"/Users/USER/plugin_repo/src/platforms\",
\t\"pluginIosSrcFolder\": \"/Users/USER/plugin_repo/src-native/ios\",
\t\"iosLibraryName\": \"LibraryName\",
\t\"pluginAndroidSrcFolder\": \"/Users/USER/plugin_repo/src-native/android\",
\t\"androidLibraryName\": \"LibraryName\",
\t\"demoFolder\": \"/Users/USER/plugin_repo/demo\",
\t\"demoAngularFolder\": \"/Users/USER/plugin_repo/demo-angular\",
\t\"demoVueFolder\": \"/Users/USER/plugin_repo/demo-vue\",
\t\"provisioningProfile\": \"TestProfile\"
}
\n
\n

Note: If you make manual changes to the above n.debug.config.json file you need to "re-configure" the nativescript-dev-debugging plugin by executing the npm run nd.config command.

\n
\n

Usage of the build-in 'workflows'

\n

The exposed API of this dev plugin is though the use of npm scripts. After the installation and configuration steps the package.json of your plugin will be modified with scripts, watchers and some dev dependencies. You should keep all of them and not manually change them to make sure that the functionality of the nativescript-dev-debugging is working as expected. If you want to reconfigure the plugin simply execute npm run nd.config

\n

Starting a 'workflow'

\n

In order to start a 'workflow' you can use the separate npm scripts like npm run nd.demo.ios.device and npm run nd.demo.android or use the 'interactive script command' nd.run. If you are not aware of which workflow you want to start it is best to use npm run nd.run and follow the prompts.

\n

For full details regarding the build-in functionality of this plugin execute npm run nd.help.

\n

Example of expected workflows:

\n
\n

All of the bellow example are the same between iOS and Android, for simplicity I will explain them using iOS.

\n
\n

Workflow for: Observing/debug the native code"

\n\n

With this workflow (demo ios attach) the following will happen:

\n\n

Workflow for: "Changing/developing and debugging the native code"

\n\n

With this workflow (demo ios attach & watch) the following will happen:

\n\n

Troubleshooting

\n

Due to the nature of the nativescript-dev-debugging plugin and the way it is using multiple third party solutions to provide its workflows (xcode build, gradle, NativeScript CLI etc.) it is possible that in specific environment setups some issues can occur. While the fact that the plugin simply start and manages processes that will use those third party solutions in most cases if an error occurs the console output will be the original one from those solutions and should be helpful in determining the cause of the error, there are cases when the plugin's code could be causing strange behaviors. When using the npm run nd.run command you could pass an first attribute log to view additional information about the executed processes and their status (how/what and why the file watchers are executing), simply run npm run nd.run log.

\n

Contributing

\n

In order to test the node package locally:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-demoplugin":{"name":"nativescript-demoplugin","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-shadow":{"name":"nativescript-ngx-shadow","version":"6.5.0","license":"MIT","readme":"

NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-ngx-shadow
\n

Demo

\n

\"N|Solid\"

\n

How to use it

\n

This is an Angular directive to make your life easier when it comes to native shadows.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the NgShadowModule

\n
// ...
import { NgShadowModule } from \"nativescript-ngx-shadow\";

@NgModule({
  imports: [
    NgShadowModule
    // ...
  ]
  // ...
})
export class MyModule {}
\n

Just use in your templates

\n

Simple attribute shadow:

\n
<Label shadow=\"2\"></Label>
\n

Of course you can property bind it:

\n
<Label [shadow]=\"myCustomShadow\"></Label>
\n

To provide other details, combine the shadow directive with other attributes:

\n
<Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypePlatformDescription
shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
default: 'RECTANGLE'		AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

AndroidData and IOSData

\n

As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

\n

Component

\n
import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
// ...
export class MyComponent {
  fabShadow: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

In the template you can do:

\n
<Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"nativescript-ngx-shadow\";
class MyComponent {
  // ...
  ngOnInit(): init {
    this.mySnackBar.elevation = Elevation.SNACKBAR;
  }
  // ...
}
\n

Notes about version 2+

\n

Here are the list of improvements on version 2.0:

\n
    \n
  1. BugFix: Integer directive not rendering on iOS.
    2. \n
  2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
    3. \n
  3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
    4. \n
  4. 2.1.X Override Android default StateListAnimator as explained below:
    5. \n
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

\n

Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow:

\n\n

Changelog

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-master-detail-angular2":{"name":"nativescript-master-detail-angular2","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript master detail Angular template

\n

\"master\"\n\"detail\"

\n

##Usage

\n

###Init

\n
tns create my-app-name --template https://github.com/avatsaev/nativescript-master-detail-angular2.git
\n

###Launch

\n
tns livesync (ios|android) --watch
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-picker":{"name":"nativescript-contacts-picker","version":"1.2.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-contacts-picker/blob/master/LICENSE"},"readme":"

NativeScript-contacts-picker

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n

Installation

\n

To install type

\n
tns plugin add nativescript-contacts-picker
\n

Usages

\n

Example

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hockeyapp":{"name":"nativescript-hockeyapp","version":"1.0.1","license":"Apache-2.0","readme":"

HockeyApp SDK for NativeScript

\n

A NativeScript plugin for the HockeyApp SDK (iOS and Android)

\n
\n

This plugin installs the HockeyApp SDK in NativeScript projects and provides a common API for using in iOS and Android projects.

\n

How to use

\n

Run the following command in the root of your project:

\n
$ tns plugin add nativescript-hockeyapp
\n

The SDK wrapper and init mechanism is shamelessly copied from the Fabric plugin. Before running an app with this plug-in, you will need an APP_ID from the HockeyApp service. Visit the HockeyApp website to obtain a key for your app. Enter that key in the AndroidManifest.xml or Info.plist.

\n

iOS

\n

Add the HockeyApp APP_ID to the /app/App_Resources/iOS/Info.plist file:

\n
<key>HockeyAppId</key>
<string>${APP_ID}</string>
\n

The iOS version of this plugin uses the HockeyApp SDK CocoaPod. See the HockeyApp SDK CocoaPod docs for additional configuration options.

\n

NOTE: As of version 1.2.0, this plugin requires XCode 8.3+. If you use an older version of XCode, you may see invalid bitcode version errors when trying to build NativeScript projects that include this plugin.

\n

Using build.xcconfig

\n

On iOS, you also have the option of putting your HockeySDK APP_ID in the build.xcconfig file rather than directly embedding in Info.plst. This can help if, for example, you want to avoid putting SDK keys in source control.

\n

Using the Info.plist syntax above with the ${APP_ID} key, simply add this line to build.xcconfig:

\n
APP_ID = YOUR-HOCKYSDK-APP-ID
\n

During builds, the value from build.xcconfig will replace the ${APP_ID} key in Info.plist.

\n

Android

\n

Add the HockeyApp APP_ID to the /app/App_Resources/Android/AndroidManifest.xml file:

\n
<meta-data android:name=\"net.hockeyapp.android.appIdentifier\" android:value=\"${APP_ID}\" />
\n

Usage

\n

After the plug-in has been installed and the APP_ID has been configured, simply import and init the plugin.

\n
import { HockeyApp } from 'nativescript-hockey-sdk';
...
HockeyApp.init();
HockeyApp.trackEvent(\"LOG_IN\");
\n

To init on app launch, import and init in your app.ts or app.js file in the launchEvent handler:

\n
app.on(app.launchEvent, function(context) {
    HockeyApp.init();
});
\n

If you're using Angular, you could alternatively use the AppModule constructor:

\n
export class AppModule {
  constructor() {
    HockeyApp.init();
    HockeyApp.trackEvent(\"LAUNCH\");
  }
}
\n

TODOS

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-sdk":{"name":"nativescript-onesignal-sdk","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Onesignal SDK

\n

A Onesignal plugin that handles push notifications for both ios and android nativescript applications.

\n

Prerequisites

\n

A Onesignal account with an active onesignal application.

\n

Installation

\n
tns plugin add nativescript-onesignal-sdk
\n

Usage

\n

Angular

\n

Not supported

\n

Typescript & Javascript

\n

Android

\n

Add both values onesignal_app_id and onesignal_google_project_number as string resources:

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources>
    <string name=\"app_name\">Demo</string>
    <string name=\"onesignal_app_id\">your_onesignal_app_id</string>
    <string name=\"onesignal_google_project_number\">your_onesignal_google_project_number</string>
</resources>
\n

Then refer those values in your AndroidManifest.xml.

\n

Note: Add xmlns:tools="http://schemas.android.com/tools" on manifest root tag.

\n
<meta-data
\t\ttools:replace=\"android:value\"
        android:name=\"onesignal_app_id\"
        android:value=\"@string/onesignal_app_id\"/>

<meta-data
        tools:replace=\"android:value\"
        android:name=\"onesignal_google_project_number\"
        android:value=\"@string/onesignal_google_project_number\"/>
\n

Add the following code on your main.ts or app.js:

\n
import * as app from \"application\";
var TnsOneSignal = require(\"nativescript-onesignal\").TnsOneSignal;

if (app.android) {
  app.on(app.launchEvent, args => {
    TnsOneSignal.startInit(app.android.context).init();
  });
}
\n

iOS

\n

Add the following code on your main.ts or app.js:

\n
import * as app from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (app.ios) {
     TnsOneSignal.initWithLaunchOptionsAppIdHandleNotificationReceivedHandleNotificationActionSettings({},
            <your-onesignal-app-id>,
            (notificationReceived) => {
                console.log(notification);
            },
            (notificationAction) => {
                console.log(notification);
            });
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Demo

\n
npm run plugin.prepare
# iOS
npm run demo.ios
# Android
npm run demo.android
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpesa":{"name":"nativescript-mpesa","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Mpesa

\n

Nativescript-Mpesa provides a wrapper that incorporate payments using Mpesa from within your {N} applications. The integration is achieved using the Android M-Pesa Daraja SDK libraries. Hence, has full support for Android.

\n

Usage

\n

Setup

\n

First import package into the main-page's model or app.component as the case may be for either {N} Core or {N} w/ Angular

\n
    import { Mpesa } from \"nativescript-mpesa\";
\n

Then create an instance of Mpesa.

\n
     const mpesa = new Mpesa();
\n

Initialize the instance with the CustomerKey,CustomerSecret gotten from Safaricom and Env

\n

Note Env could be SANDBOX or PRODUCTION

\n
    mpesa.initialize(CONSUMER_KEY, CONSUMER_SECRET, Env)
\n

Making Payment

\n
    const mpesa = new Mpesa();

    const lnmExpress = {
                        BusinessShortCode: \"174379\",
                        PassKey: \"bfb279f9aa9bdbcf158e97dd71a467cd2e0c893059b10f78e6b72ada1ed2c919\",
                        Type: \"CustomerPayBillOnline\",
                        Amount: \"100\",
                        PartyA: \"254708374149\",
                        PartyB: \"174379\",
                        PhoneNumber: \"254708374149\",
                        CallBackURL: \"http://mycallbackurl.com/checkout.php\",
                        AccountReference: \"001ABC\",
                        TransactionDesc: \"Goods Payment\"
                      };
    mpesa.initialize(\"dRSvS4nnTGU8vf1V8jUHfu9BW6AAxl83\",\"WQFHurC4OsVBYJQt\",\"SANDBOX\").
            then(res => {
              console.log(\"access token\", res);
              this.mpesa.requestMPESAExpress(lnmExpress).then(
                res => {
                  console.log(\"lnmResult\", res);
                },
                err => {
                  console.log(err);
                }
              );
            }, err => {
              console.log(\"error\", err);
            });
  }
\n

Lipa na M-Pesa Online Payment API

\n

The following table highlights the requirements needed by Daraja, as described in the Safaricom Developer API Page

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionParameter TypePossible Values
BusinessShortCodeThe organization shortcode used to receive the transactionNumericShortcode (6 digits)
PasskeyLipa Na Mpesa Online PassKeyAlpha-Numeric
AmountThe amount to be transactedNumeric100
PartyAThe entity sending the fundsNumericMSISDN (12 digits)
PartyBThe organization receiving the fundsNumericShortcode (6 digits)
PhoneNumberThe MSISDN sending the fundsNumericMSISDN (12 digits)
CallBackURLCall Back URLURLhttps://ip or domain:port/path
AccountReferenceAccount ReferenceAlpha-NumericAny combinations of letters and numbers
TransactionDescDescription of the transactionStringany string of less then 20 characters
\n
\n

Get the Pass Key Here : https://developer.safaricom.co.ke/test_credentials

\n
\n

Response Signature

\n

Success Response

\n
   export interface LNMResult {
    MerchantRequestID: string;
    CheckoutRequestID: string;
    ResponseCode: string;
    ResponseDescription: string;
    CustomerMessage: string;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-googleadsdk":{"name":"nativescript-googleadsdk","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-googleadsdk

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-googleadsdk
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-places":{"name":"nativescript-plugin-google-places","version":"1.4.1","license":"MIT","readme":"

Nativescript Plugin Google Places

\n

\"npm

\n

Nativescript plugin for Google Places API

\n

\"Android\" \"Android\"

\n

Updates

\n

Prerequisites

\n

Set up the Google Places API keys before installing this plugin, the setup script will ask\nfor them.

\n

For the iOS key, click here then click "GET A KEY".

\n

For the Android key:

\n
    \n
  1. click here then click "GET A KEY".
    2. \n
  2. Go to the Google developer console and click "Credentials" on the left.
    3. \n
  3. Click the first key in the list which is the one you just created and under "Key restriction", select Android apps.
    4. \n
  4. Enter in your package name and SHA-1 certificate fingerprint and press save at the bottom. You may want to add your debug and production SHA-1 fingerprints.
    5. \n
\n

If you want to use the getStaticMapUrl function you'll need to create a browser key:

\n
    \n
  1. click here then click "GET A KEY".
    2. \n
  2. Go to the Google developer console and click "Library" on the left.
    3. \n
  3. Find "Google Static Maps API" and click the "URL signing secret" tab.
    4. \n
  4. Click the "Allow unsigned usage" button.
    5. \n
  5. Click "Credentials" on the left, your browser key will be the first key in the list.
    6. \n
\n

Installation

\n
tns plugin add nativescript-plugin-google-places
\n

Usage

\n

To import:

\n
import * as GooglePlaces from 'nativescript-plugin-google-places';
\n

Run the init function in the App.Module constructor if you're using angular or the app.ts file otherwise

\n
GooglePlaces.init();
\n

To have the user pick a place:

\n
GooglePlaces.pickPlace()
    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));
\n

To set a default location for the map to start on:

\n
let center: Location = {
    latitude: -33.865143,
    longitude: 151.2099
}

let viewport = {
    northEast: {
        latitude: center.latitude + 0.001,
        longitude: center.longitude + 0.001
    },
    southWest: {
        latitude: center.latitude - 0.001,
        longitude: center.longitude - 0.001
    }
}

GooglePlaces.pickPlace(viewport)
    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));
\n

To get places using ids:

\n
GooglePlaces.getPlacesById([
    \"ChIJ4zPXqIiAhYAR31X3S64T6Uw\",
    \"ChIJ6zMe3oWAhYARaZ33Z1BAMRo\",
    \"ChIJAUWoGIaAhYARQ6zvky_f10Q\"
])
    .then((places: GooglePlaces.Place[]) => {
        places.forEach(place => console.log(place.name));
    })
    .catch(error => console.log(error));
\n

To get a static map:

\n
this.staticMapUrl = GooglePlaces.getStaticMapUrl(
    place, 
    { 
        width: 250,
        height: 250
    }
);
\n

Or by address:

\n
this.staticMapUrl = GooglePlaces.getStaticMapUrlByAddress(
    place.address,
    {
        width: 250,
        height: 250
    }
);
\n
<Image *ngIf=\"staticMapUrl\" [src]=\"staticMapUrl\" width=\"250\" height=\"250\"></Image>
\n

Best Practices

\n\n

You can use the light version:

\n
<Image res=\"res://powered_by_google_light\" stretch=\"none\"></Image>
\n

or the dark version:

\n
<Image res=\"res://powered_by_google_dark\" stretch=\"none\"></Image>
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Place
namestringThe name of the place
addressstringReadable address
idstringUnique ID of the place
attributionsstringAttributions of the place
typesstring[]List of place types (more info)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Location
latitudenumberlatitude in degrees
longitudenumberlongitude in degrees
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ViewPort
southWestLocationDefault SouthWest corner of the map
northEastLocationDefault NorthEast corner of the map
\n

Updates

\n

v1.1.2

\n\n
cd node_modules/nativescript-plugin-google-places && npm run configure
\n

v1.2.0

\n\n

v1.2.1

\n\n

Now you can be sure the places array you get from getPlacesById has the same number of elements and is in the same order as the ids you send it.

\n

v1.3.0

\n\n

v1.3.1

\n\n

v1.4.1

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-verloop":{"name":"nativescript-plugin-verloop","version":"1.3.2","license":"Apache-2.0","readme":"

NativeScript Verloop Plugin

\n

A {N} plugin to integrate Verloop live chat into your NativeScript application.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-plugin-verloop
\n

Usage

\n

Instantiate Verloop object

\n
    const config : IVerloopConfig = {
        clientId : '<Your-client-id>',
        fcmToken : null,
        userId : '<user-id>',
        name : \"<user-full-name>\",
        email : '<user-email>',
        //Custom fields.
        token : \"<custom token to access your API>\"
    };
    this.verloop = getVerloopInstance(config);
\n

Launch chat later on. may be when user taps on floating action bar icon

\n
this.verloop.showChat();
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chrome-tabs":{"name":"nativescript-chrome-tabs","version":"0.8.0","license":"MIT","readme":"

Nativescript Chrome Tabs \"apple\" \"android\"

\n

\"npm\"\n\"NPM\"\n\"Build\n\"npm\"\n\"GitHub\n\"Status\"\n\"Twitter

\n

Chrome Tabs Plugin to open a custom chrome/safari tabs in android & ios.

\n

Installation

\n
tns plugin add nativescript-chrome-tabs
\n
\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"Demo\"Demo
\"Demo\"Demo
\n
\n

Usage

\n
<Button text=\"click\" (tap)=\"myCustomWeb();\">
\n

Javascript

\n
var { initChromeTab, openChromeTab } = require('nativescript-chrome-tabs');

constructor() { 
    initChromeTab(); 
}

function myCustomWeb() {
    openChromeTab({
        url: 'http://google.com',
        toolbarColor: '#0361cc',
        toolbarControlsColor: '#303F9F'
    });
}
\n

Typescript

\n
import { initChromeTab, openChromeTab } from \"nativescript-chrome-tabs\";

constructor() { 
    initChromeTab(); 
}

myCustomWeb() {
    openChromeTab({
        url: 'http://google.com',
        toolbarColor: '#0361cc',
        toolbarControlsColor: '#303F9F'
    });
}
\n
\n

API (Properties)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
urlrequiredThe URL to open
showTitlefalseShows title bar in the webview
toolbarColorundefinedColor of the toolbar
toolbarControlsColorundefined(only iOS) color of buttons on toolbar
isClosedundefinedcallback function that will be called when webview is closed
\n
\n

API (Methods)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodTypeReturnsDescription
initChromeTab();constructorvoidTo Initialize Chrome Tab
openChromeTab(url : String, toolbarColor : String, toolbarControlsColor : String);methodvoidTo Open a Chrome Tab
\n
\n

https://developer.chrome.com/docs/multidevice/android/customtabs/

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zapsod/nativescript-pushwoosh":{"name":"@zapsod/nativescript-pushwoosh","version":"1.0.1","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-svg":{"name":"nativescript-svg","version":"1.3.7","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-eventify":{"name":"nativescript-eventify","version":"1.0.1","license":"MIT","readme":"

\"android\" \"ios\"

\n

NativeScript Eventify

\n

NativeScript has a method called notify you can use to notify an observable of changes. But you can't use it to trigger events like tap or swipe, enter NativeScript Eventify.

\n

Supported Events

\n\n

Roadmap

\n\n

Installation

\n
tns plugin add nativescript-eventify
\n

Usage

\n

Just require it once.

\n
//app.js
require(\"nativescript-eventify\");
\n
/**
* home-page.js
*
* Assume the view already has the event listner(s) setup.
*/

// Simulates a tap event
view.eventify({ eventName: \"tap\", object: view });
\n

Take a look at this Playground for a working example.

\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertiesRequiredDescription
EventDataYesThe eventName and object, just like using notify.
InfoSometimesSome of the events (i.e. swipe) will need extra information
\n

Info

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventRequiredPropertiesDescription
tapNon/an/a
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-electrumx-client":{"name":"nativescript-electrumx-client","version":"0.1.20","license":"GPL-3.0","readme":"

NativeScript ElectrumX-Client \"android-support\"

\n

\"ODIN

\n

\"npm \"license\"

\n

\"NPM\"

\n

The ElectrumX-Client NativeScript plugin allows your application to communicate with an ElectrumX Server. ElectrumX servers act as middleware allowing remote clients to fetch and send blockchain requests via TCP and TLS sockets to fetch and send blockchain related information.

\n

Requirements

\n

This plugin requires android.permission.INTERNET to work properly. This must be added to your AndroidManifest.xml file.

\n

Installation

\n
$ tns plugin add nativescript-electrumx-client
\n

Usage

\n

Simply import the ElectrumxClient from this plugin and start using in your application. This plugin supports async/await/promises for a callback structure and utilizes the events to allow for a subscription service for specific events and streams from an ElectrumX Server.

\n

Example usage is listed below:

\n
import { ElectrumxClient } from 'nativescript-electrumx-client';

export class HelloWorldModel {
  \tprivate electrumxClient: ElectrumxClient;
    
    constructor() {
    \tthis.electrumxClient = new ElectrumxClient('server.example.com', 50001);
        this.setupSubscriptions(); // subscription examples
        this.initClient(); // initialization example
    }
    
    public setupSubscriptions() {
        let _client = this.electrumxClient;
        
        /**
         * Subscribe to all incoming data from the ElectrumX server
         * to your application.
         * @param rawData Is the raw string response.
         */
        _client.subscribe.on('data', (rawData: string) => {
        });

        /**
         * Subscribe to all finished actions.
         * @param tcpActionId Is a unique, incremented ID assigned to each action.
         */
        _client.subscribe.on('finished', (tcpActionId: number) => {
        });

        /**
         * Subscribe to any errors streamed from this plugin.
         * There are two primary error types to watch out for:
         *
         * err.name === \"UnexpectedResponseError\"
         * This error comes from an unexpected response from ElectrumX as
         * ElectrumX should always return a JSON.parse-able string response.
         *
         * err.name === \"TCPClientError\"
         * This error comes from the base class TcpClient when a connection
         * fails.
         */
        _client.subscribe.on('error', async (err) => {
        });
        
        /**
         * Subscribe to a particular \"subscribable\" event from ElectrumX.
         * @param args Contains the parsed result from the ElectrumX server.
         * Results may vary (heh) view more from ElectrumX Server Docs.
         */
        _client.subscribe.on('blockchain.scripthash.subscribe', (...args) => {
        });
    }
    
    public async init() {
        try {
          // Connect to the host/port set earlier
          await this.electrumxClient.connect();
          
          // Fetch the version of the remote ElectrumX Server
          let version = await this.electrumxClient.server_version('2.7.11', '1.1');
          console.log(`Remote Version: ${version[0]}`);
        } catch (err) {
          console.log('Connection error');
        }
    }
}
\n

Limitations

\n

This plugin is currently not available for iOS devices (Contributions for iOS support are welcomed and desired!) and socket connections are currently only supported via TCP. TLS support would be great, but would require further enhancements of the SimpleNetworking plugin we're working off of

\n

Acknowledgements

\n

This plugin contains modified code based on the following sources:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
node-electrum-clienthttps://github.com/you21979/node-electrum-client
nativescript-simple-networkinghttps://github.com/yaqwsx/nativescript-simple-networking
\n

I'd like to give thanks to the contributors and authors of the works above as their solved headaches made this plugin less of a headache (sort of 😅).

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-mixpanel":{"name":"@nstudio/nativescript-mixpanel","version":"2.1.1","license":"Apache-2.0","readme":"

NativeScript Mixpanel

\n

\"GitHub\n\"npm\"\n\"npm\"\n\"npm\"

\n
\n

A NativeScript plugin to provide the ability to integrate with Mixpanel.

\n
\n

Installation

\n

From your command prompt/terminal go to your application's root folder and execute:

\n

tns plugin add @nstudio/nativescript-mixpanel

\n

Usage

\n

Example

\n

This can be initialised at various points in your application, i.e. in a service. However it is recommended to initialise this in your main.ts file.

\n

Initialisation

\n
import {
  NativeScriptMixpanel,
  NativeScriptMixpanelPeople,
} from \"@nstudio/nativescript-mixpanel\";

const MIXPANEL_TOKEN = \"ABCDEF12345678\";

// Init Mixpanel itself
NativeScriptMixpanel.init(MIXPANEL_TOKEN);
\n

Identification

\n

The Mixpanel library will assign a default unique identifier to each unique user who installs your application. This distinct ID is saved to device storage so that it will persist across sessions.

\n

If you choose, you can assign your own user IDs. This is particularly useful if a user is using your app on multiple devices or platforms (both web and mobile, for example). To assign your own distinct_ids, you can use the identify method.

\n
import { NativeScriptMixpanel } from \"@nstudio/nativescript-mixpanel\";

const someId = \"test identity\";
NativeScriptMixpanel.identify(someId);
// It is recommended to identify both the base and people instances.
NativeScriptMixpanel.getPeople().identify(someId);
\n

Custom Logging / Logger Binding

\n

If you need to pipe/funnel log output (i.e. for errors) to your own applications logger\nimplementation, you can provide a binding to your logger through a simple object.

\n

If you use this it is recommended to call useLogger before you init.

\n
const customLogger: NativeScriptMixpanelLogger = {
  log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
  info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
  warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
  error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
};
NativeScriptMixpanel.useLogger(customLogger);
\n

API

\n

NativeScriptMixpanel

\n

init(token: string): void

\n

Get the instance of MixpanelAPI associated with your Mixpanel project token.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
tokenstring
\n
NativeScriptMixpanel.init(\"token\");
\n

useLogger(providedLogger: NativeScriptMixpanelLogger): void

\n

Replace the default console logger with a custom logger binding.

\n

If you intend to use a custom logger or bound logger, this should\nbe called before init to correctly output any errors.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
providedLoggerNativeScriptMixpanelLoggerA new logger or object that binds a logger
\n
const customLogger: NativeScriptMixpanelLogger = {
  log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
  info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
  warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
  error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
};
NativeScriptMixpanel.useLogger(customLogger);
\n

identify(distinctId: string): void

\n

Associate all future calls to track(string, JSON) with the user identified by the\ngiven distinct id.

\n

This call does not identify the user for People Analytics; to do that,\nsee MixpanelAPI.People.identify(String).\nMixpanel recommends using the same distinct_id for both calls, and using a\ndistinct_id that is easy to associate with the given user, for example, a\nserver-side account identifier.

\n

Calls to track(string, JSON) made before corresponding calls to identify\nwill use an anonymous locally generated distinct id, which means it is best to\ncall identify early to ensure that your Mixpanel funnels and retention analytics\ncan continue to track the user throughout their lifetime. We recommend calling\nidentify when the user authenticates.

\n

Once identify is called, the local distinct id persists across restarts of your application.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
distinctIdstringA string uniquely identifying this user. Events sent to Mixpanel using the same distinct_id will be considered associated with the same visitor/customer for retention and funnel reporting, so be sure that the given value is globally unique for each individual user you intend to track.
\n
NativeScriptMixpanel.identify(\"test identity\");
\n

getDistinctId(): string

\n

Returns the string id currently being used to uniquely identify the user\nassociated with events sent using track. Before any calls to identify,\nthis will be an id automatically generated by the library.

\n
const distinctId = NativeScriptMixpanel.getDistinctId();
\n

alias(alias: string): void

\n

This function will create an alias to the current events distinct_id,\nwhich may be the distinct_id randomly generated by the Mixpanel\nlibrary before identify(string) is called.

\n

This call does not identify the user after. You must still call both\nidentify and NativeScriptMixPanel.getPeople().identify if you wish the\nnew alias to be used for Events and People.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
aliasstringThe new distinct_id
\n
NativeScriptMixpanel.alias(\"test alias\");
\n

registerSuperProperties(properties: JSON): void

\n

Register properties that will be sent with every subsequent call\nto track.

\n

SuperProperties are a collection of properties that will be sent with every\nevent to Mixpanel, and persist beyond the lifetime of your application.

\n

Setting a superProperty with registerSuperProperties will store a new\nsuperProperty, possibly overwriting any existing superProperty with the\nsame name.

\n

SuperProperties will persist even if your application is taken completely\nout of memory. To remove a superProperty, call unregisterSuperProperty\nor clearSuperProperties.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
propertiesJSONA JSON object containing super properties to register
\n
NativeScriptMixpanel.registerSuperProperties({
  \"Test Type\": \"test value\",
});
\n

unregisterSuperProperty(superPropertyName: string): void

\n

Remove a single superProperty, so that it will not be sent with future calls\nto track(String, JSONObject).

\n

If there is a superProperty registered with the given name, it will be permanently\nremoved from the existing superProperties.

\n

To clear all superProperties, use clearSuperProperties.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
superPropertyNamestringname of the property to unregister
\n
NativeScriptMixpanel.unregisterSuperProperty(\"Test Type\");
\n

clearSuperProperties(): void

\n

Erase all currently registered superProperties.

\n

Future tracking calls to Mixpanel will not contain the specific superProperties\nregistered before the clearSuperProperties method was called.

\n

To remove a single superProperty, use unregisterSuperProperty.

\n
NativeScriptMixpanel.clearSuperProperties();
\n

track(eventName: string, properties?: JSON): void

\n

Track an event.

\n

Every call to track eventually results in a data point sent to Mixpanel.\nThese data points are what are measured, counted, and broken down to create\nyour Mixpanel reports. Events have a string name, and an optional set of\nname/value pairs that describe the properties of that event.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventNamestringThe name of the event to send
propertiesJSONA JSON object containing the key value pairs of the properties to include in this event
\n
NativeScriptMixpanel.track(\"test event\", {
  tracking: \"this\",
});
\n

timeEvent(eventName: string): void

\n

Begin timing of an event. Calling timeEvent("Thing") will not send an event,\nbut when you eventually call track("Thing"), your tracked event will be sent\nwith a "$duration" property, representing the number of seconds between your calls.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventNamestringthe name of the event to track with timing
\n
const eventName = \"Time Event Test\";
NativeScriptMixpanel.timeEvent(eventName);

await new Promise((resolve) => setTimeout(resolve, 2000));
NativeScriptMixpanel.track(eventName);
\n

getPeople(): NativeScriptMixpanelPeople

\n

Returns a NativeScriptMixpanelPeople instance that can be used to identify\nand set properties.

\n
const people = NativeScriptMixPanel.getPeople();
\n

optInTracking(): void

\n

Use this method to opt-in an already opted-out user from tracking.

\n

People updates and track calls will be sent to Mixpanel after using\nthis method. This method will internally track an opt-in event to\nyour project.

\n
const people = NativeScriptMixPanel.optInTracking();
\n

optOutTracking(): void

\n

Use this method to opt-out a user from tracking.

\n

Events and people updates that haven't been flushed yet will be deleted.\nUse flush() before calling this method if you want to send all the queues\nto Mixpanel before.

\n

This method will also remove any user-related information from the device.

\n
const people = NativeScriptMixPanel.optOutTracking();
\n

flush(): void

\n

Push all queued Mixpanel events and People Analytics changes to Mixpanel servers.

\n

Events and People messages are pushed gradually throughout the lifetime of your\napplication. This means that to ensure that all messages are sent to Mixpanel when\nyour application is shut down, you will need to call flush() to let the Mixpanel\nlibrary know it should send all remaining messages to the server.

\n

We strongly recommend placing a call to flush() in the onDestroy() method of your\nmain application activity.

\n
NativeScriptMixpanel.flush();
\n

reset(): void

\n

Clears tweaks and all distinct_ids, superProperties, and push\nregistrations from persistent storage. Will not clear referrer information.

\n
NativeScriptMixpanel.reset();
\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-libsignal-protocol":{"name":"nativescript-libsignal-protocol","version":"0.2.0","license":"GPL-3.0","readme":"

NativeScript Libsignal-Protocol \"android-support\"

\n

\"Developed

\n

\"npm \"license\"

\n

\"NPM\"

\n

This plugin is a Libsiginal Protocol implementation for NativeScript and is based on libsignal-protocol-java. This plugin is currently a wrapper which implements functionality developed by The Open Whisper Systems organization, the active maintainers behind the encrypted messenger application Signal.

\n

This plugin is currently in ALPHA stages and will require additional work to mature. This code has NOT been reviewed by an experienced cryptopgrapher so usage and support cannot be guarenteed at this time.

\n

Requirements

\n

This plugin requires no additional permissions to work properly. The application implementing this plugin however, will likely require android.permission.INTERNET if you are using a central server to manage data.

\n

Installation

\n
$ tns plugin add nativescript-libsignal-protocol
\n

Usage

\n

Importing LibsignalProtocol from this plugin will allow you to use various classes and implementation wrappers that are currently available. Numerous type definitions have been created to your IDE to provide context to various pieces so far made available. The demo application provided with this plugin contains a couple different examples of using this plugin for a project.

\n

This plugin follows the same implementation and usage standards which can be found from the sourcecode Github Repository. Listed below is simple snippet demonstrating usage.

\n
import { LibsignalProtocol } from 'nativescript-libsignal-protocol';

const SignalKeyHelper = LibsignalProtocol.KeyHelper;
const Base64Encode = LibsignalProtocol.Util.base64Encode;

/**
 * Outputs a new session identity generated with the Libsignal Protocol.
 * 
 * `identityKeyPair` is a raw reference to the JAVA object `IdentityKeyPair`
 * as such, the exported values must be `serialized` before being usable.
 * 
 * @returns The generated session identity as a JSON object.
 */
public demo_generateNewSessionIdentity(): any {
    let identityKeyPair: LibsignalProtocol.Type.IdentityKeyPair;
    let preKeys: any[];
    let signedPreKey: LibsignalProtocol.Type.SignedPreKeyRecord;
    let signedPreKeyPair: LibsignalProtocol.Type.ECKeyPair;
    let registrationId: number;
    
    registrationId\t  = SignalKeyHelper.generateRegistrationId();
    identityKeyPair   = SignalKeyHelper.generateIdentityKeyPair();
    preKeys           = SignalKeyHelper.generatePreKeysFormatted(0, 1);
    signedPreKey      = SignalKeyHelper.generateSignedPreKeyFormatted(identityKeyPair, 1);

    let sessionIdentity = {
      registrationId: `${registrationId}`,
      deviceId: 123,
      identity: {
        pubKey: Base64Encode(identityKeyPair.getPublicKey().serialize()),
        privKey: Base64Encode(identityKeyPair.getPrivateKey().serialize()),
        serialized: Base64Encode(identityKeyPair.serialize()),
      },
      signedPreKey: signedPreKey,
      preKeys: preKeys
    };

    console.log(sessionIdentity);
    return sessionIdentity;
}
\n

Limitations

\n

This plugin is currently not available for iOS devices (Contributions for iOS support are welcomed and desired!). This plugin is also meant to be a simple wapper for using the Libsignal Protocol. While this plugin contains a Client class for storing a session/state, the actual use and management should be taken care of within the application using this plugin.

\n

License

\n

Licensed under the GPLv3: http://www.gnu.org/licenses/gpl-3.0.html

\n\n

Acknowledgements

\n

This plugin contains source code based on the following:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
libsignal-protocol-javahttps://github.com/signalapp/libsignal-protocol-java
\n

Special thanks to the original contributors and authors of the works above!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-escpos-printer":{"name":"nativescript-escpos-printer","version":"2.0.1","license":"Apache-2.0","readme":"

nativescript-escpos-printer

\n

Provide a generic printer plugin for ESCPOS thermal printers for android and IOS

\n

This plug is based on:\nnativescript-ichi-printer\nand ideas used from:\nhttps://www.raywenderlich.com/3437391-real-time-communication-with-streams-tutorial-for-ios#toc-anchor-004

\n

This works for Android and IOS and includes full source (swift/java)

\n

use the included printer simulation to show the printouts.

\n

Installation

\n
tns plugin add nativescript-escpos-printer
\n

Usage

\n
import { Printer } from 'nativescript-escpos-printer';
import { isIOS } from 'tns-core-modules/platform';
var printer = new Printer
printer.print(isIOS? 'localhost' : '10.0.2.2', 9100, \"Print test String!\")
.then( result => {
    if (!result) alert(\"printer error!\")
})
\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n

known problems

\n

in IOS, the app will get stuck when a printer is defined, but not found or switched off.\n(looks like outputStream.hasSpaceAvailable in IOS swift, always returns false, even if connected)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@juit/nativescript-barcodeview":{"name":"@juit/nativescript-barcodeview","version":"1.1.3","license":"Apache-2.0","readme":"

Barcode-Scanning View for NativeScript 7

\n

This package implements a minimalistic barcode-scanning View for\nNativeScript (from v. 7).

\n\n

Sample

\n

\"Sample\"

\n

Attributes

\n

The BarcodeScannerView exposes a few attributes to control the operation of\nbarcode scanning:

\n

XML

\n
<BarcodeScannerView
  formats=\"QR_CODE, CODE_39\"
  preferFrontCamera=\"false\"
  isPaused=\"false\"
  (scanResult)=\"barcodeScanned($event)\"
/>
\n

TypeScript

\n
import { ScanResultEventData } from '@juit/nativescript-barcodeview'

export function barcodeScanned(event: ScanResultEventData) {
  alert(`Scanned \"${event.format}\" barcode: ${event.text}`)
}
\n

formats

\n

The formats property is defined as a KnownBarcodeFormat[] and informs the\nbarcode scanner what formats should be recognized.

\n

When specified as a string, the formats are case-insensitive, comma and/or\nwhitespace separated

\n

See Barcode Formats below for a list of supported formats.

\n

The default (empty array) represents all supported formats.

\n

isPaused

\n

The isPaused boolean attribute specifies whether barcode scanning is\nrunning (false) or paused (true)paused or running.

\n

preferFrontCamera

\n

The preferFrontCamera boolean attribute specifies whether preferentially\nthe scanner should use the back camera (false) or the front one (true).

\n

Events

\n

The scanResult event is triggered once a barcode has been scanned. The event\ninstance associated with this is a ScanResultEventData defined as follows:

\n
export interface ScanResultEventData extends EventData {
  /** The event name, always `scanResult` */
  eventName: ScanResultEvent,
  /** The `BarcodeScannerView` source of this event */
  object: BarcodeScannerView,
  /** The `BarcodeFormat` of the scanned barcode */
  format: BarcodeFormat;
  /** The text contained in the scanned barcode */
  text: string;
}
\n

Clearing results

\n

The BarcodeScannerView will not emit a scanResult event once it detects the\nsame barcode. To clear the last result and be notified of the same barcode, you\ncan call the clearScanResult() method on its instance.

\n
barcodeScannerView.on('scanResult', (result: ScanResultEventData) => {
  // do something with the result and then clear it,
  // allowing it to be reported it once more
  result.object.clearScanResult()
})
\n

Dismissal

\n

Make sure that the BarcodeScannerView's own disposeNativeView() is called\nto release the camera and barcode-scanning resources

\n

Image Parsing

\n

In some cases (e.g. simulators) it might be necessary to simulate the scanning\nof a barcode using an image stored on the device.

\n

While this library doesn't support picking images (see the wonderful\n@nativescript/imagepicker\nplugin for a good implementation), it offers function to scan ImageAssets.

\n
import { parseBarcodes, BarcodeFormat } from '@juit/nativescript-barcodeview'

const ImageAsset asset = // ... get this with '@nativescript/imagepicker'

parseBarcode(asset, [ BarcodeFormat.QR_CODE ])
  .then((result: scanResult) => {
    console.log(`Scanned \"${event.format}\" barcode from image: ${event.text}`)
  })
\n

Barcode Formats

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FormatiOSAndroid
AZTEC✓✓
CODABAR✗✓
CODE_128✓✓
CODE_39✓✓
CODE_39_MOD_43✓✗
CODE_93✓✓
DATA_MATRIX✓✓
EAN_13✓✓
EAN_8✓✓
INTERLEAVED_2_OF_5✓✗
ITF_14✓✓
MAXICODE✗✓
PDF_417✓✓
QR_CODE✓✓
RSS_14✗✓
RSS_EXPANDED✗✓
UPC_A✗✓
UPC_E✓✓
UPC_EAN_EXTENSION✗✓
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-cscreenshot":{"name":"@knotes/nativescript-cscreenshot","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Cscreenshot :camera:

\n

This plugin was created so you can take screenshots of views easily and then store it as you like.

\n

this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

\n

Installation

\n

Use the install command:

\n
tns plugin add @enduco/nativescript-cscreenshot
\n

Usage

\n

Just import the plugin in your project and use it like this

\n

using Typescript:

\n
    import { Cscreenshot } from \"@enduco/nativescript-cscreenshot\";
    import { ImageSource } from \"@nativescript/core\";

    // then in your take a screenshot method
    let screen = new Cscreenshot();

    // Using vanilla Nativescript
    let view = page.getViewById('main');

    // Using Angular Nativescript
    @ViewChild(\"main\", { static: true }) main: ElementRef;
    let view = this.view.nativeElement;

    // Using Vue Nativescript
    let view = this.$refs.main.nativeView;

    screen.take(view, (image: ImageSource)=>{
        // Do whatever you want with the returned source image
    });
\n
and in your template\n
\n
    <!-- Assign the reference name depending on the framework -->
    <!-- 'id=\"\"' for vanilla nativescript -->
    <!-- '#main' for angular nativescript -->
    <!-- 'ref=\"main\"' for Vue nativescript -->
    <GridLayout id=\"main\" #main ref=\"main\">
        <!-- Content of your app here -->
    </GridLayout>
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-masonkit":{"name":"@triniwiz/nativescript-masonkit","version":"1.0.0-alpha.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mercadopago-px":{"name":"nativescript-mercadopago-px","version":"4.0.0","license":"Apache-2.0","readme":"

mercadopago-px \"apple\" \"android\"

\n

Support

\n

Support Android & iOS.

\n

Installation

\n
tns plugin add nativescript-mercadopago-px
\n

Usage

\n
this.mercadopagoPx
    .start({
        language: \"es\",
        publicKey: \"PUBLIC_KEY\",
        preferenceId: \"PREFERENCE_ID\" // Get custom preference_if of side server.
    })
    .then(result => {
        // Success payment
    })
    .catch(error => {
        // Cancel payment or Error payment
    });
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geo-firestore":{"name":"nativescript-geo-firestore","version":"1.0.2","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-login":{"name":"nativescript-facebook-login","version":"1.0.1","license":{"type":"","url":"https://github.com/AntonioCuevaUrraco/nativescript-facebook-login/blob/master/LICENSE"},"readme":"

nativescript-facebook-login

\n

A NativeScript module providing Facebook login for Android and iOS.\nThe plugin is using the version 4.7.0 for iOS and the version 4.6.0 for Android

\n

Prerequisites

\n

NativeScript 1.3.0 for Android and iOS since we are using cocoapods and .aar libraries

\n

Plugin architecture

\n
.
├── app  <----------------run npm install from here
│   ├── node_modules
│   │   └── nativescript-facebook-login <-- The install will place the module's code here
│   │       ├──platforms
│   │       │  ├──android
│   │       │  │  └─libs
│   │       │  │    └─facebook-release.aar <-- This is the SDK for android as a .aar library
│   │       │  └──ios
│   │       │     └─Podfile <-- This is the SDK for iOS as a cocoapods dependency 
│   │       ├──facebook-handler.android.js
│   │       ├──facebook-handler.ios.js 
│   │       ├──LICENSE
│   │       ├──README
│   │       └──package.json
│   ├── package.json <-- The install will register \"nativescript-facebook-login as a dependency here
│   └── tns_modules
│       └── ...
└──
\n

Installation

\n

tns plugin add nativescript-facebook-login

\n

iOS

\n

For ios you need to add this to your app.ios to initialize the SDK

\n
var application = require(\"application\");

class MyDelegate extends UIResponder implements UIApplicationDelegate {
  public static ObjCProtocols = [UIApplicationDelegate];

  applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
   return FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions);
  }
  
  applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
    return FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation);
  }
  
  applicationDidBecomeActive(application: UIApplication): void {
      FBSDKAppEvents.activateApp();
  }

  applicationWillTerminate(application: UIApplication): void {
    //Do something you want here
  }

  applicationDidEnterBackground(application: UIApplication): void {
    //Do something you want here
  }
}

application.ios.delegate = MyDelegate;
application.start();
\n

Add to your Info.plist(the one inside platforms/ios/yourApp) the Facebook App ID credentials

\n

<key>CFBundleURLTypes</key>
\t<array>
\t\t<dict>
\t\t\t<key>CFBundleURLSchemes</key>
\t\t\t<array>
        <string>fb{your-app-id}</string>
\t\t\t</array>
\t\t</dict>
\t</array>
\t<key>CFBundleVersion</key>
\t<string>1.0</string>
\t<key>FacebookAppID</key>
  <string>{your-app-id}</string>
\t<key>FacebookDisplayName</key>
\t<string>FacebookLoginDemo</string>
\t<key>LSApplicationQueriesSchemes</key>
\t<array>
\t\t<string>fbauth2</string>
\t\t<string>fbapi</string>
\t\t<string>fb-messenger-api</string>
\t\t<string>fbshareextension</string>
\t</array>
\n

For more information you can consult the official Facebook page for iOS\nhttps://developers.facebook.com/docs/ios

\n

Android

\n

Add to your AndroidManifest.xml (the one inside platforms/android/src/main) the Facebook App ID credentials

\n
<uses-permission android:name=\"android.permission.INTERNET\"/>
application android:label=\"@string/app_name\" ...>
    ...
    <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
    <activity android:name=\"com.facebook.FacebookActivity\"
          android:configChanges=
                 \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
          android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
          android:label=\"@string/app_name\" />
</application>
\n

Add to your Strings (platforms/android/src/main/res/values/strings.xml) your facebook app id

\n
<string name=\"facebook_app_id\">your-app-id</string>
\n

For more information you can consult the official Facebook page for Android\nhttps://developers.facebook.com/docs/android

\n

Common to iOS and Android

\n

Require the plugin whenever you want to use it

\n
var FacebookLoginHandler = require(\"nativescript-facebook-login\");
\n

Create the callbacks to handle the result of the login

\n
 var successCallback = function(result) {
            //Do something with the result, for example get the AccessToken
            var token;
            if (topmost().android){
              token = result.getAccessToken().getToken();
            }
            else if (topmost().ios){
              token = result.token.tokenString
            }
            alert(token);
        }

        var cancelCallback = function() {
            alert(\"Login was cancelled\");
        }

        var failCallback = function(error) {
            var errorMessage = \"Error with Facebook\";
           //Try to get as much information as possible from error
           if (error) {
                if (topmost().ios) {
                    if (error.localizedDescription) {
                        errorMessage += \": \" + error.localizedDescription;
                    }
                    else if (error.code) {
                        errorMessage += \": Code \" + error.code;
                    }
                    else {
                        errorMessage += \": \" + error;   
                    }
                }
                else if (topmost().android) {
                    if (error.getErrorMessage) {
                        errorMessage += \": \" + error.getErrorMessage();
                    }
                    else if (error.getErrorCode) {
                        errorMessage += \": Code \" + error.getErrorCode();
                    }
                    else {
                        errorMessage += \": \" + error;   
                    }
                }
            }
            alert(errorMessage);
        }
\n

And finally you can start the login process like this

\n
  //Here we select the login behaviour

    //Recomended system account with native fallback for iOS
    if (topmost().ios) {
        FacebookLoginHandler.init(2);
    }
    //Recomended default for android 
    else if (topmost().android) {
        FacebookLoginHandler.init();
    }
    //Register our callbacks
    FacebookLoginHandler.registerCallback(successCallback, cancelCallback, failCallback);
    //Start the login process
    FacebookLoginHandler.logInWithPublishPermissions([\"publish_actions\"]);
\n

Known issues

\n

Sometimes the .aar library with the sdk for android don't get linked to the platform after installing the plugin. This end up in the error:
\nTypeError: Cannot read property 'FacebookSdk' of undefined\nFile: "/data/data/com.ladeezfirstmedia.ThisOrThat/files/app/tns_modules/nativescript-facebook-login/facebook-handler.js line: 9 column:16

\n

You can try to sync the platform\ntns livesync android

\n

You can try cleaning the platform.\n-remove the plugin\n-remove the platform\n-add the plugin\n-add the platform in that order

\n

You can try to add manually the dependency\nchange the build.gradle (platforms/android/build.gradle) like this:

\n
dependencies {
\t....
        ....
    compile \"com.android.support:support-v4:$suppotVer\"
    compile \"com.android.support:appcompat-v7:$suppotVer\"

    //Facebook sdk
    compile 'com.facebook.android:facebook-android-sdk:4.6.0'
     \t....
        ....
    
}
\n

Frequently asked questions

\n

Why Xcode is not building my iOS platform?

\n

After installing the plugin CocoaPods creates a .xcworkspace file, use this one to open the project in Xcode instead of the .xcodeproj

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-last_known_location":{"name":"nativescript-last_known_location","version":"1.0.4","license":"Apache-2.0","readme":"

nativescript-last_known_location

\n
import { Last_known_location } from "nativescript-last_known_location";\nimport { isAndroid, isIOS, device, screen } from "tns-core-modules/platform";\n\nfunction getlastlocation(){\n    if( !isAndroid ) return ;\n    const get_last_location_class=Last_known_location;\n    var get_last_location = new get_last_location_class();\n  //optional  get_last_location.msg="message when request location permission"\n    get_last_location.getlocation(\n        location=>{\n          console.log("least known location latutide:longitude"+location.getLatitude()+","+location.getLongitude());\n        },\n        ()=>{ console.log("no permission");}\n    )\n}\n
\n

(Optional) Prerequisites / Requirements

\n

npm and nativescript install

\n

Installation

\n
tns plugin add nativescript-last_known_location
\n

Usage

\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-notification-banner":{"name":"nativescript-easy-notification-banner","version":"1.1.0","license":"Apache-2.0","readme":"

EasyNotificationBanner

\n

Banner notification for NativeScript.

\n

Based on:

\n\n

\"Sample

\n

Installation

\n
tns plugin add nativescript-easy-notification-banner
\n

Usage

\n
import { Component, OnInit } from '@angular/core';
import { EasyNotificationBanner } from 'nativescript-easy-notification-banner';

@Component({
  selector: 'ad-main',
  template: '<page-router-outlet></page-router-outlet>'
})
export class AppComponent {
  private notificationBanner: EasyNotificationBanner;
  constructor() {
    this.notificationBanner = new EasyNotificationBanner();
  }

  ngOnInit(){
    this.notificationBanner.showSuccess('Celebrate!', 'A new version is available')
      .then(() => console.log('this is really easy!'))
    ;
   }
}
\n

TODO

\n
- [] allow custom design
- [] allow custom duration
- [] enable buttons inside the banner
- [] support android
\n

Contributions are welcome! :)

\n

Donate

\n

bitcoin:1EAqBrcWKGS3VG1ktUxCje2E6hYTQRHRRV

\n

\"donate\"

\n

also greenaddress

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkedin-signin":{"name":"nativescript-linkedin-signin","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript LinkedIn Auth

\n

\"npm

\n

NativeScript plugin for LinkedIn Auth. Use OAuth2 to sign in with LinkedIn. Use this iOS lib and this Android lib.

\n

Installation

\n

Add the plugin

\n
tns plugin add nativescript-linkedin-signin
\n

Android

\n

Add this line into the AndroidManifest.xml

\n
<activity android:name=\"com.teammobile.linkedinsignin.ui.LinkedinSignInActivity\"/>
\n

Usage

\n
    import { Component, OnInit } from \"@angular/core\";
    import { LinkedinSignin } from \"nativescript-linkedin-signin\";
    import * as Application from \"tns-core-modules/application\";
    import * as utilsModule from \"tns-core-modules/utils/utils\";
    import { isAndroid } from \"tns-core-modules/platform/platform\";


    @Component({
        selector: \"Home\",
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {

        constructor() {
        }

        ngOnInit(): void {
            // Init your component properties here.
            if(isAndroid){
                LinkedinSignin.init(\"<CLIENT_ID>\", \"<CLIENT_SECRET>\", \"<REDIRECT_URI>\", new Array<string>(), utilsModule.ad.getApplicationContext());
            } else {
                LinkedinSignin.init(\"<CLIENT_ID>\", \"<CLIENT_SECRET>\", \"<REDIRECT_URI>\", new Array<string>(), Application.ios.rootController);
            }
        }

        coLinkedin(): void {
            LinkedinSignin.login().then(item => {
                console.dir(item);
                alert(item.token.accessToken);
            }).catch((error)=>{
                alert(\"FAIL : \"+error.error);
                console.dir(error);
            });
        }
    }
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-paytm":{"name":"@nstudio/nativescript-paytm","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-paytm

\n

Works on Android and iOS.\nFor use in India to pay via Paytm.

\n

Installation

\n
tns plugin add @nstudio/nativescript-paytm
\n

Usage

\n

You will need a working backend server to generate paytm orders.\nDo not generate the order or checksum in the app.

\n

Typescript / Angular

\n
import {
    Paytm,
    Order,
    TransactionCallback,
    IOSCallback
} from \"nativescript-paytm\";

export function onPayWithPaytm(args: observable.EventData) {
    paytm.setIOSCallbacks({
        didFinishedResponse: function(response) {
            console.log(response);
        },
        didCancelTransaction: function() {
            console.log(\"User cancelled transaction\");
        },
        errorMissingParameterError: function(error) {
            console.log(error);
        }
    });

    // Sample order
    const order: Order = {
        // This will fail saying duplicate order id
        // generate your own order to test this.
        MID: \"Tomcas09769922377481\",
        ORDER_ID: \"ORDER8874\",
        CUST_ID: \"CUST6483\",
        INDUSTRY_TYPE_ID: \"Retail\",
        CHANNEL_ID: \"WAP\",
        TXN_AMOUNT: \"10.00\",
        WEBSITE: \"APP_STAGING\",
        CALLBACK_URL: \"https://pguat.paytm.com/paytmchecksum/paytmCallback.jsp\",
        CHECKSUMHASH:
            \"NDspZhvSHbq44K3A9Y4daf9En3l2Ndu9fmOdLG+bIwugQ6682Q3JiNprqmhiWAgGUnNcxta3LT2Vtk3EPwDww8o87A8tyn7/jAS2UAS9m+c=\"
    };

    paytm.createOrder(order);

    paytm.initialize(\"STAGING\"); // set to PRODUCTION when you go live

    paytm.startPaymentTransaction({
        someUIErrorOccurred: function(inErrorMessage) {
            console.log(inErrorMessage);
        },
        onTransactionResponse: function(inResponse) {
            console.log(inResponse);
        },
        networkNotAvailable: function() {
            console.log(\"Network not available\");
        },
        clientAuthenticationFailed: function(inErrorMessage) {
            console.log(inErrorMessage);
        },
        onErrorLoadingWebPage: function(
            iniErrorCode,
            inErrorMessage,
            inFailingUrl
        ) {
            console.log(iniErrorCode, inErrorMessage, inFailingUrl);
        },
        onBackPressedCancelTransaction: function() {
            console.log(\"User cancelled transaction by pressing back button\");
        },
        onTransactionCancel: function(inErrorMessage, inResponse) {
            console.log(inErrorMessage, inResponse);
        }
    });
}
\n

NOTE:\nIf you are using Sandbox credentials, then you won't be able to see the option\nto pay with Credit/Debit card or netbanking. That is perfectly normal.\nOnce you get staging and production credentials from paytm, you will be able to\nuse it just fine.

\n

API

\n

setIOSCallbacks (object with callback methods for iOS) : void -\nUsed to set the iOS Callbacks\nAvailable callbacks are

\n
didFinishedResponse (response) : void\ndidCancelTransaction () : void\nerrorMissingParameterError (response): void\n
\n

createOrder (order object) : void -\nUsed to create an order using paytm order object.\nPlease refer the usage guide for sample order.

\n

initialize (string) : void -\nUsed to initialise paytm environment.\nAccepted strings are "STAGING" and "PRODUCTION"

\n

startPaymentTransaction (object with callback methods for Android) : void -\nUsed to start a transaction.\nAvailable callbacks are

\n
someUIErrorOccurred (inErrorMessage) : void\nonTransactionResponse (inResponse) : void // transaction successful\nnetworkNotAvailable () : void\nclientAuthenticationFailed (inErrorMessage) : void\nonErrorLoadingWebPage (iniErrorCode, inErrorMessage, inFailingUrl) : void\nonBackPressedCancelTransaction ()\nonTransactionCancel (inErrorMessage, inResponse) : void\n
\n

The callback method names are self explanatory.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-smart-adserver":{"name":"@nstudio/nativescript-smart-adserver","version":"1.0.4","license":"Apache-2.0","readme":"

nativescript-smart-adserver

\n

Note: Only the Banner module is currently available in this plugin.

\n

Works on Android and iOS

\n

Screenshots

\n

Android

\n\n

iOS

\n\n

Installation

\n
tns plugin add @nstudio/nativescript-smart-adserver
\n

Usage

\n

To use this plugin, you will need Site ID, Base URL of your site, Page ID and Format ID from SmartAdServer.

\n

TypeScript

\n

In app.ts you have to initialize the plugin

\n
import { SmartAdBanner } from \"@nstudio/nativescript-smart-adserver\";

SmartAdBanner.init(104808, \"https://mobile.smartadserver.com\");
\n

Then in the xml file, include this namespace on the parent component of where you\nwant to place the AdView.

\n
xmlns:sas=\"@nstudio/nativescript-smart-adserver\"
\n

Now you can create smart ad banner like this,

\n
<sas:SmartAdBanner height=\"150\"
        pageId=\"663262\"
        formatId=\"15140\"
        autoRefresh=\"true\" />
\n

JavaScript

\n

Same as Typescript, but the import statement will be

\n
const SmartAdBanner = require(\"@nstudio/nativescript-smart-adserver\").SmartAdBanner;
\n

Angular

\n

In main.ts you have to initialize the plugin

\n
import { SmartAdBanner } from \"@nstudio/nativescript-smart-adserver\";

SmartAdBanner.init(104808, \"https://mobile.smartadserver.com\");
\n

In the module where you want to add Ads (eg, app.module.ts), import it like this\\

\n
import { NativescriptSmartAdBannerModule } from \"@nstudio/nativescript-smart-adserver/angular\";
\n

Now add NativescriptSmartAdBannerModule to the imports array of that module

\n

You can now use the banner using this markup

\n
<SmartAdBanner height=\"150\"
        pageId=\"663262\"
        formatId=\"15140\"
        autoRefresh=\"true\"></SmartAdBanner>
\n

API

\n

Banner Module API (XML/HTML element Properties)

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toast-plugin":{"name":"nativescript-toast-plugin","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fcuuid":{"name":"nativescript-fcuuid","version":"1.0.2","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-fcuuid/blob/master/LICENSE"},"readme":"

NativeScript-fcuuid

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n

Installation

\n

To install type

\n
tns plugin add nativescript-fcuuid
\n

Usages

\n

Example

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-loading-indicator":{"name":"@essent/nativescript-loading-indicator","version":"4.0.0","license":"MIT","readme":"

nativescript-loading-indicator

\n

nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

\n\n

Installation

\n
tns plugin add nativescript-loading-indicator
\n

Example

\n
var LoadingIndicator = require(\"nativescript-loading-indicator\").LoadingIndicator;

// or with TypeScript:
// import {LoadingIndicator} from \"nativescript-loading-indicator\";

var loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
var options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: \"%1d/%2d\",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: \"Additional detail note!\",
    margin: 10,
    dimBackground: true,
    color: \"#4B9ED6\", // color of indicator and labels
    // background box around indicator
    // hideBezel will override this if true
    backgroundColor: \"yellow\",
    hideBezel: true, // default false, can hide the surrounding bezel
    view: UIView, // Target view to show on top of (Defaults to entire window)
    mode: // see iOS specific options below
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();
\n

Options

\n\n

Android Specific

\n\n

iOS Specific

\n\n

Quick Mode Reference:

\n\n

Screenshots

\n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-buttons":{"name":"nativescript-nbmaterial-buttons","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript implementation of the Material Float buttons

\n

The module implement Float buttons on both iOS and Android.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
xmlns:btn=\"nativescript-nbmaterial-buttons\">
 \t\t<btn:FloatButton row=\"0\" id=\"floatbtn\" afterTap=\"navigateForm\" animNavigation=\"true\" text=\"edit\" />
</Page>

}
\n

animNavigation make the button growing when the page load (or disappear when the page is unloading)

\n

The button has this interface:

\n
export declare abstract class FloatButton extends View {
    static aftertapEvent: string;
    animNavigation: boolean;
    rippleColor: Color;
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tappy":{"name":"nativescript-tappy","version":"1.0.10","license":"Apache-2.0","readme":"

NativeScript Tappy

\n

{N} plugin for integrating with the iOS sdk for https://github.com/TapTrack/TCMPTappy-iOS

\n

Demo

\n

The demo app scans for TapTrack devices, connects, and performs read and write actions.\nTo run the demo:

\n

cd demo
\nnpm install
\ntns platform add ios
\ntns run ios

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-idtech-vp-sdk":{"name":"nativescript-idtech-vp-sdk","version":"1.1.2","license":"Apache-2.0","readme":"

Nativescript IDTech VP3300 SDK

\n

*** IMPORTANT ***\nWorks only on iOS. Uses custom iOS (umbrella) framework that implements\nIDTech Universal SDK

\n

Subset of ID Tech Universal SDK's methods to support VP3300 EMV reader.

\n

Contains of:

\n\n

Returns decrypted data string\nDecryption done following this guidance:

\n\n

NOTE this is just a tiny subset of available SDK methods.\nThat's simply all I needed to be able to get and parse CC data.

\n

Installation

\n
tns plugin add nativescript-idtech-vp-sdk
\n

Usage

\n
    const idtechVp3300 = new IdtechVp3300();

    //Handlers:
    idtechVp3300.onReaderConnected = () => {
      alert('connected');
    };

    idtechVp3300.onReaderDisconnected = () => {
      alert('disconnected');
    };

    idtechVp3300.onReaderData = (data: string) => {
      alert(data);
    };

    idtechVp3300.onReaderDataParseError = (error: string) => {
      alert(error);
    };

    // BLE
    idtechVp3300.onBluetoothAvailableDevicesListUpdate = (devices: Set<BluetoothDevice>) => {
        const devicesList = Array.from(devices) || [];
        const emvReaders = devicesList
            .filter((i: BluetoothDevice) => i.isSupportedEmv);

        if (available && available.length) {
            // Connect to the first one
            idtechVp3300
                .connectWithIdentifier(available[0].identifier)
        }
    }

    // Read
    idtechVp3300.readCardData(0); // $0

    // Connect
    idtechVp3300.connectWithIdentifier(\"ABC\")
    idtechVp3300.connectWithFriendlyName(\"ID Tech\")
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-preferences":{"name":"nativescript-preferences","version":"1.2.0","license":"Apache-2.0","readme":"

\"Twitter

\n

nativescript-preferences

\n

This plugin allows native preference saving\\loading on iOS and Android

\n\n\n

iOS Prerequisites

\n\n

Android Prerequisites

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-preferences
\n

Usage

\n
    var prefs = new Preferences();

    //Get existing value
    prefs.getValue(\"name_preference\");

    //Set value
    prefs.setValue(\"name_preference\", \"some new text\");
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
openSettings(): any;Opens the native settings panes
getValue(key: string): any;Gets the value for the preference
setValue(key: string, value: any): void;Sets the passed value to the preference
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tus-upload":{"name":"nativescript-tus-upload","version":"1.0.5","license":"Apache-2.0","readme":"

Nativescript TUS Upload Plugin

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Plugin to handle TUS protocol 1.0.0.

\n

Prerequisites / Requirements

\n

Tus libraries for iOS and Android.

\n

Installation

\n
tns plugin add nativescript-tus-upload
\n

Usage

\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nativemediapicker":{"name":"nativescript-nativemediapicker","version":"1.0.2","license":"Apache-2.0","readme":"

nativescript-nativemediapicker

\n

A complete media picker solution for NativeScript. You will be able to pickup any types of file. Capturing image, video & audio are supported.

\n

Note: For iOS this plugin is in under development, it contains dummy methods for ios return error :)

\n

Features:

\n\n

Limitations

\n\n

Installation

\n
tns plugin add nativescript-nativemediapicker
\n

Android Permissions Required

\n
<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
<uses-permission android:name=\"android.permission.READ_USER_DICTIONARY\"/>
<uses-permission android:name=\"android.permission.CAMERA\"/>
<uses-feature android:name=\"android.hardware.camera\" android:required=\"true\" />
\n

Add FileProvider to support (>=Android N) (create file_paths.xml in "app\\App_Resources\\Android\\src\\main\\res\\xml" & copy-paste following code)

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<paths>
    <files-path path=\"demo/\" name=\"myfiles\" />
    <external-path name=\"mediafiles\" path=\".\" />
</paths>
\n

Add FileProvider tag to application tag in AndroidManifest.xml

\n
<provider android:name=\"android.support.v4.content.FileProvider\" android:authorities=\"{applicationId}.provider\" android:grantUriPermissions=\"true\" android:exported=\"false\">
    <meta-data android:name=\"android.support.FILE_PROVIDER_PATHS\"android:resource=\"@xml/file_paths\" />
</provider>
\n

Usage (Please check demo project for details)

\n

Import

\n

JavaScript:

\n
var nativemediapicker = require(\"nativescript-nativemediapicker\");
\n

TS:

\n
import { Nativemediapicker } from 'nativescript-nativemediapicker';
\n

File Picker

\n
// replace first parameter with your mime type
Nativemediapicker.pickFiles(\"image/*\",
    function(res){
\t\tconsole.log(res);
\t},
    function(err){
\t\tconsole.log(err);
\t});
\n

Capture Image

\n
// registerFileProvider is needed to capture image
Nativemediapicker.registerFileProvider(
      application.android.currentContext.getPackageName() +
        \".provider\"
    );
Nativemediapicker.takePicture(
    function(res){
\t\tconsole.log(res);
\t},
    function(err){
\t\tconsole.log(err);
\t});
\n

Capture Video

\n
Nativemediapicker.recordVideo(
    function(res){
\t\tconsole.log(res);
\t},
    function(err){
\t\tconsole.log(err);
\t});
\n

Capture Audio

\n
Nativemediapicker.recordAudio(
    function(res){
    \tconsole.log(res);
    },
    function(err){
    \tconsole.log(err);
    });
\n

Screenshots

\n

Android

\n

\"Android\"\n\"Android\"\n\"Android\"

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-download-progress":{"name":"nativescript-download-progress","version":"1.7.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch-notifs":{"name":"nativescript-batch-notifs","version":"2.0.3","license":"Apache-2.0","readme":"

nativescript-batch

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-batch
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-monety":{"name":"nativescript-zendesk-monety","version":"0.0.16","license":"Apache-2.0","readme":"

NOTE: Forked from https://github.com/rhanb/nativescript-zendesk-sdk and turned into an npm package to use TNS 6 and the latest version of zendesk SDK.

\n

nativescript-zendesk-sdk

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin implementing the basic Zendesk SDK in TypeScript.\nIt is inspired from nativescript-zendesk

\n

Install

\n
tns plugin add nativescript-zendesk-sdk
\n

Usage

\n

Following Zendesk Embeddables Documentation:

\n

[Must do] Configure an app in Zendesk Support

\n

Support SDK for Android / iOS

\n

[Must do] Initialize the SDK

\n

Support SDK for Android / iOS

\n
export interface InitConfig {
    applicationId: string;
    zendeskUrl: string;
    clientId: string;
    userLocale?: string;
    /** AnonUserIdentity object or JWT Token string */
    identity?: AnonUserIdentity | string;
}
\n
import { ZendeskSdk } from \"nativescript-zendesk-sdk\";
...
const initConfig = {
    ...
}
ZendeskSdk.initialize(initConfig);
\n

If identity: null a new anonymous identity is created, but if identity is undefined it must be set later, but before launching any Zendesk views/activities.

\n

Note: applicationId, zendeskUrl, and clientId must be specified when initializing the Zendesk, but locale, COPPA-compliance mode, and Identity can be set/changed later.

\n

[Must do] Set an identity (authentication)

\n

Support SDK for Android / iOS

\n
Authenticate using an anonymous identity
\n
ZendeskSdk.setAnonymousIdentity();
\n
Authenticate using an anonymous identity (with details)
\n
ZendeskSdk.setAnonymousIdentity({name: \"name\", email: \"email\"});
\n
Authenticate using your JWT endpoint
\n
ZendeskSdk.setJwtIdentity(\"jwtUserIdentifier\");
\n

Locale Settings

\n

Support SDK for Android / iOS

\n

The locale used by the SDK for static strings will match the Android Application Configuration or the iOS NSUserDefaults.\n(These strings can be overridden or missing languages can be added as described in the links above).

\n

To set the Locale of any dynamic content retrieved from Zendesk:

\n
ZendeskSdk.setUserLocale(localeCode);
\n

Configure Requests

\n

Support SDK for Android / iOS

\n

Before opening the Help Center or creating a Request you can specify the Request settings:

\n
export interface RequestOptions {
  requestId?: string;
  requestSubject?: string;
  addDeviceInfo?: boolean;
  tags?: string[];
  files?: File[]; // android only
  customFields?: CustomField[];
  ticketForm?: {
    ticketFormId: string;
    customFields: CustomField[]
  };
}
\n

Show the user's tickets

\n

Support SDK for Android / iOS

\n

Default Usage

\n
ZendeskSdk.showRequestList();
\n

Show the Help Center

\n

Support SDK for Android / iOS

\n

Default Usage

\n
ZendeskSdk.showHelpCenter();
\n

Optional Parameters

\n
export interface HelpCenterOptions {
  /** default: { contactUsButtonVisible: false } */
  articleOptions?: ArticleOptions;
  /** default: false */
  contactUsButtonVisible?: boolean;
  /** default: false -- android only */
  categoriesCollapsed?: boolean;
  /** default: true -- android only */
  conversationsMenu?: boolean;
}
\n
ZendeskSdk.showHelpCenter(options);
\n

Filter the Help Center

\n

Support SDK for Android / iOS

\n

Per original SDKs, only one filter can be used at a time.

\n

Filter by category

\n
ZendeskSdk.showHelpCenterForCategoryIds(categoryIds, options);
\n

Filter by section

\n
ZendeskSdk.showHelpCenterForLabelNames(labelNames, options);
\n

Filter by article label

\n
ZendeskSdk.showHelpCenterForSectionIds(sectionIds, options);
\n

Create a request

\n
ZendeskSdk.createRequest();
\n

Styling

\n

Support SDK for Android / iOS

\n

Android

\n

Configured via app/App_Resources/Android/AndroidManifest.xml as detailed here.

\n

Simple Styling

\n

Zendesk offers 3 base themes that can be used or extended:

\n\n
Example extending PnpZendeskSdkTheme.DarkActionBar
\n

app/App_Resources/Android/AndroidManifest.xml

\n
    
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
    ...>
    <application
        ...>
        <activity android:name=\"com.zendesk.sdk.support.SupportActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.feedback.ui.ContactZendeskActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.support.ViewArticleActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.requests.RequestActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

        <activity android:name=\"com.zendesk.sdk.requests.ViewRequestActivity\"
                  android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>
    </application>
</manifest>
\n

app/App_Resources/Android/values/styles.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
...
    <style name=\"PnpZendeskSdkTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
        <item name=\"colorPrimary\">@color/ns_primary</item>
        <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
        <item name=\"colorAccent\">@color/ns_accent</item>
        <item name=\"android:actionMenuTextColor\">@color/ns_blue</item>
    </style>
</resources>
\n
<style name=\"YourLightTheme\" parent=\"ZendeskSdkTheme.Light\">
...
</style>
<style name=\"YourDarkTheme\" parent=\"ZendeskSdkTheme.Dark\">
...
</style>
<style name=\"YourLightTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
...
</style>
\n

iOS

\n
import { isIOS } from 'tns-core-modules/platform';

...

if ( isIOS ) {
    UINavigationBar.appearance().tintColor = new Color('#00FFFF').ios;
    UINavigationBar.appearance().barTintColor = new Color('#FF00FF').ios;
    UINavigationBar.appearance().titleTextAttributes =
        <NSDictionary<string, any>>NSDictionary.dictionaryWithObjectForKey(
            new Color('#FFFF00').ios,
            NSForegroundColorAttributeName);
}

const iOSTheme: ZendeskIosThemeSimple = {
    primaryColor: '#FF0000',
};
ZendeskSdk.setIosTheme(iOSTheme);
\n

The first 3 colors are used primarily on the ActionBar/StatusBar for the "new ticket" screen, as the Help Center uses the default ActionBar/StatusBar colors from the regular NativeScript setup.

\n

These settings could affect the whole app, but are ignored by the regular NativeScript Views, but could potentially impact other 3rd part views. Likely you will set these to be the same as what is used in the rest of the app.

\n

The settings within the theme object will only affect the Zendesk.

\n

Contributions

\n

Typings and iOS metadata have been included in the project to allow for easier usage.
\nTypings were autogenerated using:
\nhttps://github.com/NativeScript/android-dts-generator
\nhttps://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-particle-emitter":{"name":"nativescript-particle-emitter","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Particle Emitter

\n

\"Build

\n

Particle emitter component for NativeScript.

\n

\"demo

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-particle-emitter
\n

Usage

\n

Add your particle emitter Page from XML:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:pe=\"nativescript-particle-emitter\">
  <GridLayout>
    <pe:ParticleEmitter isEmitting=\"true\" />
  </GridLayout>
</Page>
\n

or you can choose to pass in some configuration:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:pe=\"nativescript-particle-emitter\">
  <GridLayout>
    <pe:ParticleEmitter
      isEmitting=\"true\"
      showDebug=\"true\"
      emitOriginX=\"150\"
      emitOriginY=\"200\" 
      emitOriginWidth=\"100\"
      emitOriginHeight=\"100\"
      particleDuration=\"1000\"
      emitCount=\"4\" 
      emitInterval=\"60\"  
      emitDistance=\"120\"  
      emitDistanceVariation=\"50\"  
      emitAngle=\"90\"  
      emitAngleVariation=\"45\" 
      colorPalette=\"red, green, #0000FF\" />
  </GridLayout>
</Page>
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
isEmittingfalseControls wether the emitter is emitting
showDebugfalseShows debug helpers
emitInterval50The interval used for emitting in milliseconds
emitCount5The number of particles on each emit
particleDuration800Lifespan of the particles in milliseconds
emitDistance80The base distance the particles will travel
emitDistanceVariation40Distance variation. Each particle will travel a random number in the range [distance - variation, distance + variation]
emitAngle0The angle (in degrees) at which particles are emitted
emitAngleVariation180Angle variation. Each particle will be emitted at a random angle in the range [angle - variation, angle + variation]
emitOriginX0The X coordinate of the center of the emit box
emitOriginY0The X coordinate of the center of the emit box
emitOriginWidth1The width of the emit box
emitOriginHeight1The Height of the emit box
colorPalette"blue"The color palette used for particles. Colors should be comma-separated when defined in XML (ex. "red, green, blue")
\n

License

\n

MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-statusbar":{"name":"nativescript-plugin-statusbar","version":"1.0.19","license":"Apache-2.0","readme":"

nativescript-statusbar

\n

StatusBar plugin Android platform

\n
\n

This plugin work currently just with Android Platform

\n
\n\"statusbar\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-plugin-statusbar
\n

Demo

\n

If you want a quickstart, check out the demo app. Run it locally using these commands:

\n
git clone https://github.com/olivierAdou/nativescript-plugin-statusbar
cd nativescript-plugin-statusbar/src
npm run demo.android
\n

Or use this for demo with Angular\ncheck out the demo angular app

\n
git clone https://github.com/olivierAdou/nativescript-plugin-statusbar
cd nativescript-plugin-statusbar/src
npm run demo-angular.android
\n

JavaScript

\n
var statusbarPlugin = require(\"nativescript-plugin-statusbar\");
var statusbar = new statusbarPlugin();
\n

TypeScript

\n
import { Statusbar } from \"nativescript-plugin-statusbar\";

class MyClass {
  constructor( private statusbar: Statusbar) {
  }
}
\n

TypeScript provider from app.module.ts

\n

In the file called app.module.ts add the plugin class in provider, like this :

\n
import { Statusbar } from 'nativescript-plugin-statusbar';
@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers : [Statusbar],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }
\n

If all it done correctly i can say your are ready to use this plugin

\n

setNavigationBarColor

\n

This function will allow you to give a color to the statusbar

\n

This function need one parameter to be a hex code color ('#000') for example

\n
    this.statusbar.setNavigationBarColor(codecolor);
\n\n

setStatusBarColor

\n

Change the color of the staturbar.

\n

This function need one parameter to be a hex code color ('#000') for example

\n
    this.statusbar.setStatusBarColor(codecolor);
\n\n

setNavigationBarColorTransparent

\n

Set transparent the NavigationBar

\n
    this.statusbar.setNavigationBarColorTransparent();
\n

setStatusBarColorTransparent

\n

Set transparent the statusBar

\n
    this.statusbar.setStatusBarColorTransparent();
\n

hideStaturbar

\n

Make the statusBar hidden

\n
    this.statusbar.hideStaturbar();
\n

hideNavigationBar

\n

Make the navigationBar hidden

\n
    this.statusbar.hideNavigationBar();
\n

enableFullScreen

\n

the method is based on this interface

\n
export interface FullScreen {
  leanBack(): any;
  immersive(): any;
  stickyImmersive(): any;
}
\n

there are three methods called leanBack, immersive, stickyImmersive

\n

leanBack

\n

The lean back mode is for fullscreen experiences in which users won't be interacting heavily with the screen, such as while watching a video.

\n

When users want to bring back the system bars, they simply tap the screen anywhere.

\n

To enable leanBack mode, call

\n
    this.statusbar.enableFullScreen.leanBack();
\n

immersive

\n

The immersive mode is intended for apps in which the user will be heavily interacting with the screen. Examples are games, viewing images in a gallery, or reading paginated content, like a book or slides in a presentation.

\n

When users need to bring back the system bars, they swipe from any edge where a system bar is hidden. By requiring this more deliberate gesture, the user's engagement with your app won't be interrupted by accidental touches and swipes.

\n

To enable immersive mode, call

\n
    this.statusbar.enableFullScreen.immersive();
\n

stickyImmersive

\n

In the regular immersive mode, any time a user swipes from an edge, the system takes care of revealing the system bars—your app won't even be aware that the gesture occurred. So if the user might actually need to swipe from the edge of the screen as part of the primary app experience—such as when playing a game that requires lots of swiping or using a drawing app—you should instead enable the "sticky" immersive mode.

\n

While in sticky immersive mode, if the user swipes from an edge with a system bar, system bars appear but they're semi-transparent, and the touch gesture is passed to your app so it app can also respond to the gesture.

\n

To enable sticky immersive mode, call

\n
    this.statusbar.enableFullScreen.stickyImmersive();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal-checkout":{"name":"nativescript-paypal-checkout","version":"2.1.1","license":"Apache-2.0","readme":"

PayPal Checkout \"apple\" \"android\"

\n

Screenshot

\n\"Android\"\n

Support

\n

Support Android & iOS.

\n

Installation

\n
tns plugin add nativescript-paypal-checkout
\n

Usage

\n

In the demo you will find a test token to test quickly

\n
import { PaypalCheckout, PaypalOptions } from 'nativescript-paypal-checkout';

private paypalCheckout: PaypalCheckout;

this.paypalCheckout = new PaypalCheckout();

let options: PaypalOptions = {
\ttoken: \"TOKEN\", // The token is obtained from the server
\tamount: \"10\",
\tcurrencyCode: \"USD\"
};

this.paypalCheckout.paypalRequest(options).then(
\t(nonce) => {
\t\tconsole.log(\"Token nonce: \" + nonce);
\t}, (error) => {
\t\tconsole.log(error);
\t}
);
\n

Others

\n

Create token Server-Side : https://developers.braintreepayments.com/start/hello-server/php#generate-a-client-token

\n

More references: https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/android/v2

\n

Server-Side Implementation: https://developers.braintreepayments.com/guides/paypal/server-side/php

\n

Thanks

\n

Thanks to @jibon57 the configurations for the plugin

\n

Settings app ios: https://github.com/jibon57/nativescript-braintree

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-razorpay":{"name":"nativescript-razorpay","version":"1.2.2","license":"Apache-2.0","readme":"

Razorpay (Unofficial)

\n

A nativescript wrapper around iOS and Android Razorpay plugins. Razorpay is a payment gateway for some of the payments around Indian payments ecosystem. This does not provide any UI components. Will only provide functions to open native payment flows and receive callbacks. Hence, cannot be used declaratively.

\n

Installation

\n

Open terminal and type the following command at the root of your project folder.

\n
tns plugin add nativescript-razorpay
\n

Usage

\n
export function onCheckoutButtonTapped(args : any) {
    new RazorpayCheckout(\"rzp_test_some_id\").open({
        \"amount\" : \"1000\", //In paise 
        \"description\" : \"Some Items from Swiggy\",
        \"image\" : \"https://placem.at/things?h=200\",
        \"name\" : \"My Business Checkout\",
        \"prefill\": {
            \"contact\": \"Valid phone number\",
            \"email\": \"foo@bar.com\"
        },
    }).then(function(paymentId){
        console.log(\"Payment Id \", paymentId);
    }, function(error){
        console.error(error);
    })
}
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
opennoneAccepts options among others, should contain "amount"
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-input-mask":{"name":"nativescript-input-mask","version":"1.0.5","license":"Apache-2.0","readme":"

Nativescript Input Mask

\n

Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

\n

This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

\n

Installation

\n
tns plugin add nativescript-input-mask
\n

Usage

\n

Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

\n

Documentation for masks is below (from here).

\n
\n

Masks consist of blocks of symbols, which may include:

\n\n

Square brackets block may contain any number of special symbols:

\n
    \n
  1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
    2. \n
  2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
    3. \n
  3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
    4. \n
  4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
    5. \n
  5. _ — mandatory symbol (digit or letter).
    6. \n
  6. - — optional symbol (digit or letter).
    7. \n
\n

Other symbols inside square brackets will cause a mask initialization error.

\n

Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

\n

Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

\n

Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

\n\n

Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

\n

Mask format examples:

\n
    \n
  1. [00000000000]
    2. \n
  2. {401}-[000]-[00]-[00]
    3. \n
  3. [000999999]
    4. \n
  4. {818}-[000]-[00]-[00]
    5. \n
  5. [A][-----------------------------------------------------]
    6. \n
  6. [A][_______________________________________________________________]
    7. \n
  7. 8 [0000000000]
    8. \n
  8. 8([000])[000]-[00]-[00]
    9. \n
  9. [0000]{-}[00]
    10. \n
  10. +1 ([000]) [000] [00] [00]
    11. \n
\n
\n

Angular

\n

Add the following lines to app/app.module.ts:

\n
import { InputMaskModule } from 'nativescript-input-mask/angular';

@NgModule({
    // ...
    imports: [
        // ...
        InputMaskModule,
        // ...
    ],
    // ...
})
\n

Use like a TextField with a mask property and other event properties:

\n
import { Component, NgZone, OnInit } from \"@angular/core\";

@Component({
  selector: \"ns-app\",
  template: `
    <StackLayout>
        <InputMask
            mask=\"([000]) [000]-[0000]\"
            (extractedValueChange)=onExtractedValueChange($event)
            (completedChange)=\"onCompletedChage($event)\">
        </InputMask>
    </StackLayout>
  `,
})
export class AppComponent {
    onExtractedValueChange(args) {
        // `args.value` includes only extracted characters, for instance
        // `1235551111` would be logged while the UI would display `(123) 555-1111`.
        console.log('Extracted value:', args.value);
    }

    onCompletedChange(args) {
        // `args.value` indicates whether the field contains all mandatory characters.
        console.log('Completed:', args.value)
    }
}
\n

Note that masks can be bound and changed on the fly. See demo app for a working implementation.

\n

API

\n

The InputMask class extends TextField and implements the following additional properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
mask""The mask property to apply to text entered into the field.
extractedValue""The value extracted from the field.
completedfalseIndicates whether all mandatory characters have been filled.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dieover/helloworld":{"name":"@dieover/helloworld","version":"1.0.5","license":"Apache-2.0","readme":"

@dieover/helloworld

\n
ns plugin add @dieover/helloworld
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-plugin":{"name":"nativescript-opentok-plugin","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript OpenTok Plugin

\n

This repository is a fork of https://github.com/TeamMaestro/nativescript-opentok, all credit to this repository for the wrapper and actual code.\nThis plugin is just an dirty but working updated version based on the last OpenTok SDK with a working example.

\n

Usage

\n

Look at the demo folder for a simple working example.\nReplace API, SESSION and TOKEN with actual ones.

\n

Install

\n

Just run npm install nativescript-opentok-plugin --save inside your Nativescript application.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-pay":{"name":"nativescript-open-pay","version":"1.0.0","license":"Apache-2.0","readme":"

Openpay \"apple\" \"android\"

\n

Support

\n

Support Android & iOS.

\n

Installation

\n
tns plugin add nativescript-open-pay
\n

Usage

\n

In the demo you will find a test token to test quickly

\n
import { Observable } from \"tns-core-modules/data/observable\";
import { OpenPay, Card } from \"nativescript-open-pay\";

export class HelloWorldModel extends Observable {
    private openPay: OpenPay;

    constructor() {
        super();

        this.openPay = new OpenPay();
        this.openPay.setup(
            \"merchant_id\", // merchantId
            \"api_key\", // apiKey
            false // ProductionMode Sandbox = false
        );

        let card: Card = {
            holderName: \"Juan Perez Ramirez\",
            cardNumber: \"4111111111111111\",
            expirationMonth: \"12\",
            expirationYear: \"20\",
            cvv2: \"110\"
        };

        this.openPay
            .createToken(card)
            .then(function(args) {
                console.dir(args);
            })
            .catch(function(error) {
                console.log(error);
            });
    }
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-zoom":{"name":"nativescript-photo-zoom","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Photo Zoom

\n

A NativeScript Photo Zoom

\n

Based on

\n

ScrollView and SDWebImage for iOS

\n

PhotoDraweeView and Fresco for Android

\n

Referenced from nativescript-fresco and nativescript-image-zoom

\n

Installation

\n

Run tns plugin add nativescript-photo-zoom

\n

API

\n

Events

\n\n

Instance Properties

\n\n

Usage in Angular

\n\n
import { NativeScriptUIPhotoZoomModule } from \"nativescript-photo-zoom/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tNativeScriptUIPhotoZoomModule,
        //......
\t],
    //......
})
\n
<!-- app.component.html -->
<GridLayout>
    <PhotoZoom [src]=\"photoUrl\" placeholder=\"res://placeholder\" (finalImageSet)=\"onFinalImageSet($event)\" (failure)=\"onFailure($event)\"  (scaleChanged)=\"onScaleChanged($event)\"></PhotoZoom>
</GridLayout>
\n
// app.componnet.ts
import { Component } from \"@angular/core\";

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {

    public photoUrl = \"https://vignette.wikia.nocookie.net/inuyasha/images/b/b5/Inuyasha.png\";

    constructor() { }

    onFinalImageSet(event) {
        console.log(\"onFinalImageSet: \", event);
    }

    onFailure(event) {
        console.log(\"onFailure: \", event);
    }

    onScaleChanged(event) {
        console.log(\"onScaleChanged: \", event.object.zoomScale);
    }
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/HoangJK/nativescript-photo-zoom.git
$ cd nativescript-photo-zoom/src
$ npm install
$ npm run demo.ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

\n

If you want to run the Angular demo simply use the demo.ios.ng or demo.android.ng.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-v2oip":{"name":"nativescript-twilio-v2oip","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-twilio-v2oip

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-twilio-v2oip
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdfview-ng":{"name":"nativescript-pdfview-ng","version":"2.0.1","license":"MIT","readme":"

Nativescript-PDFView-Ng

\n

This is a simple pdf viewer plugin that uses native libraries.

\n\n

Plugin version 2.0.0+ is compatible and tested with Nativescript 7, for older NS versions please use previous plugin versions.

\n

Installation

\n
tns plugin add nativescript-pdfview-ng
\n

OR

\n

copy the tgz file to your project and reference it from your package.json

\n

Usage

\n

Just add it to your page:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\"
xmlns:ui=\"nativescript-pdfview-ng\">
    <ui:PDFViewNg src=\"~/mypdf.pdf\" defaultpage=\"1\"></ui:PDFViewNg>
</Page>
\n

OR

\n
import { PDFViewNg } from 'nativescript-pdfview-ng';
import { registerElement } from 'nativescript-angular';
registerElement('PDFViewNg', () => PDFViewNg);
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
    <PDFViewNg src=\"~/mypdf.pdf\" defaultpage=\"1\"></PDFViewNg>
</Page>
\n

API

\n

XML

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
src-File url to a pdf file, can also be http
defaultpage"0"Initial page number to display
bookmarklabel-Search for a bookmark with the matching label and jump to the page
bookmarkpath-Search for a bookmark by indices within the tree structure of bookmarks
\n

Class

\n
/// Go to page by id starting from 0 as first page.
goToPage(index: number) : void;

/// Go to first page.
goToFirstPage() : void;

/// Go to last page.
goToLastPage() : void;

/// Get a list of all bookmarks in the pdf.
getBookmarks(): Bookmark[];

/// Search for bookmark that is exactly at the given position in the tree structure
/// e.g.: [1,3] would mean to first get the second root bookmark (0 based index) and
/// then get its fourth child if it exists
getBookmarkByIndexPath(indexes: number[]): Bookmark;

/// Search for all bookmarks that have the given label.
getBookmarksByLabel(label: string): BookmarkCommon[];

/// Jump to a given bookmark.
goToBookmark(bookmark: Bookmark): void;

/// Get meta information author from PDF.
getAuthor(): string;

/// Get meta information subject from PDF.
getSubject(): string;

/// Get meta information title from PDF.
getTitle(): string;

/// Get meta information creator from PDF.
getCreator(): string;

/// Get meta information creator from PDF.
getCreationDate(): string;

/// Get page count of currently loaded pdf
getPageCount(): number;

/// Load pdf from code.
/// Replaces the currently loaded pdf.
/// The promise gets resolved after loading, or rejected if something failed.
loadPDF(src: string): Promise<any>;

/// only implemented for iOS
/// Detect available programs for file extension and opens the interaction controller
/// The source should contain accessible path for the application
showExternalControler(src: string, rect: ControllerRect): void;
\n

Examples

\n

defaultpage: jump to page 4

\n
<ui:PDFViewNg src=\"~/test.pdf\" defaultpage=\"3\"></ui:PDFViewNg>
\n

bookmarklabel: jump to bookmark with label "PAGE 3"

\n
<ui:PDFViewNg src=\"~/test.pdf\" bookmarklabel=\"PAGE 3\"></ui:PDFViewNg>
\n

bookmarkpath: jump to the first child-bookmark of the third bookmark (bookmarks have a tree structure)

\n
<ui:PDFViewNg src=\"~/test.pdf\" bookmarkpath=\"2,0\"></ui:PDFViewNg>
\n

go to the first found bookmark with the label "PAGE 4"

\n
<ui:PDFViewNg src=\"~/test.pdf\" id=\"pdfview\"></ui:PDFViewNg>
\n
let view:PDFViewNg = page.getViewById('pdfview');
if (view){
    view.on(\"load\",()=>{
        let items = view.getBookmarksByLabel(\"PAGE 4\");
        console.log(\"found:\",items);
        view.goToBookmark(items[0]);
    });
    view.on(\"error\",()=>{
        console.error(\"unable to load pdf\");
    });
}
\n

dynamic loading with promises\njust use an empty src tag in the xml

\n
<ui:PDFViewNg id=\"pdfview\"></ui:PDFViewNg>
\n
let view:PDFViewNg = page.getViewById('pdfview');
if (view){
    view.loadPDF('~/test.pdf').then(()=>{
        let items = view.getBookmarksByLabel(\"PAGE 4\");
        console.log(\"found:\",items);
        view.goToBookmark(items[0]);
    }).catch((err)=>{
        console.error(\"could not load pdf: \", err);
    })
}
\n

Show controller on button tap

\n
<ui:PDFViewNg id=\"pdfview\"></ui:PDFViewNg>
<button text=\"Open external\" tap=\"onButtonTap\"></button>
\n
let view:PDFViewNg = page.getViewById('pdfview');

function onButtonTap(args: EventData) {
  const button = <Button>args.object;
  const size = button.getActualSize();
  const position = button.getLocationOnScreen();
  const rect = {
    x: position.x,
    y: position.y,
    width: size.width,
    height: size.height
  };
  view.showExternalControler(rect);
\n

Known bugs

\n\n

License

\n

https://choosealicense.com/licenses/mit/

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-plugin":{"name":"nativescript-twilio-plugin","version":"3.0.0","license":"Apache-2.0","readme":"

nativescript-twilio-plugin

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-twilio-plugin
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intercom-bridge":{"name":"nativescript-intercom-bridge","version":"1.0.0","license":"MIT","readme":"

Intercom for NativeScript

\n

This is a plugin that allows your NativeScript app to use Intercom for iOS and/or Intercom for Android.

\n\n

Installation

\n

To install the plugin in your NativeScript app, run the following:

\n
tns plugin add nativescript-intercom-bridge
\n

Example App

\n

An example app is provided here that shows a basic NativeScript app integration with Intercom.

\n

License

\n

nativescript-intercom-bridge is released under the MIT License.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uiza-player":{"name":"nativescript-uiza-player","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-uiza-player

\n

Simple player Uiza player.

\n

(Optional) Prerequisites / Requirements

\n

This plugin use: uiza-android-player-sdk for android and a customized uiza-ios-player-sdk for iOS

\n

Installation

\n

Install this plugin:

\n
tns plugin add nativescript-uiza-player
\n

Usage

\n
```html\n<UizaPlayer #player video="b1b5889d-3d07-4699-b7ba-53509c14b891"></UizaPlayer>\n```)\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
video''Uiza entity ID
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
APIDescription
play()Play video
pause()Pause video
seek(to)Seek to time (in miliseconds)
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sectioned-list-view":{"name":"nativescript-sectioned-list-view","version":"0.3.2","license":"ISC","readme":"

Nativescript Sectioned List View

\n

This is a drop in component to support sections in ios. It works with your existing code with a simple array of items.\nHowever, use a Sectioned Array to add sections and bind data.

\n

Installation

\n
$ tns plugin add nativescript-sectioned-list-view
\n

Section Templating

\n

There is also support to template the headers, height of the header etc.

\n

Usage

\n

In xml

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" 
\txmlns:tools=\"nativescript-sectioned-list-view\">
  <tools:SectionedListView items=\"{{items}}\" rowHeight=\"44\">
  \t<tools:SectionedListView.itemTemplate>
  \t\t<Label text=\"{{name}}\" />
  \t</tools:SectionedListView.itemTemplate>
  </tools:SectionedListView>
</Page>
\n

Make the section header blue.

\n
<tools:SectionedListView items=\"{{items}}\" rowHeight=\"44\" headerHeight=\"44\">
    <tools:SectionedListView.itemTemplate>
        <Label text=\"{{name}}\" />
    </tools:SectionedListView.itemTemplate>
    <tools:SectionedListView.headerTemplate>
        <Label text=\"{{$value}}\" style=\"color: blue\"/>
    </tools:SectionedListView.headerTemplate>
</tools:SectionedListView>
\n

Use a static array in your javascript

\n
    var students = [
    \t{\"name\" : \"Alice\", gender:\"female\"},
    \t{\"name\": \"Adam\", gender: \"male\"},
    \t{\"name\": \"Bob\", gender: \"male\"},
    \t{\"name\": \"Brittany\", gender: \"female\"},
    \t{\"name\": \"Evan\", gender: \"male\"}
    ];
    page.bindingContext = { items : students }
\n

Use a GroupedArray

\n
    page.bindingContext = { items:{
        getTitle: function(section) { return \"Section \"+section;},
        getNoOfSections: function() { return 2;}, 
        getNoOfItemsInSection: function(section) {return 3;}, 
        getItem: function(row, section) { return \"Item {\"+row+\", \"+section+\"}\";}
    }};
\n

Or, use a observable sectioned array

\n

var sectionedListViewModule = require(\"nativescript-sectioned-list-view\");
var observableSectionArrayModule = require(\"observable-sectioned-array\");

function pageLoaded(args) {
    var page = args.object;

    var students = [
    \t{\"name\" : \"Alice\", gender:\"female\"},
    \t{\"name\": \"Adam\", gender: \"male\"},
    \t{\"name\": \"Bob\", gender: \"male\"},
    \t{\"name\": \"Brittany\", gender: \"female\"},
    \t{\"name\": \"Evan\", gender: \"male\"}
    ];

    var boys = students.filter(function(student) { return student.gender ===\"male\";});

    var girls = students.filter(function(student) { return student.gender ===\"female\";});

    var sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
    sectionedArray.addSection(\"Boys\", boys);
    sectionedArray.addSection(\"Girls\", girls);
    
    //Now add a new student \"Eve\" to girls after some delay. 
    setTimeout(function() {
    \t//Notice how pushing new item to section array reloads the view and adds Eve as a new row.
    \tsectionedArray.push([{\"name\": \"Eve\", gender:\"female\"}], 1);
    }, 3000);

\tpage.bindingContext = {items: sectionedArray};
}
\n

Screen shot

\n

\"Screen

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-epub-reader":{"name":"nativescript-epub-reader","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-epub-reader

\n

NativeScript plugin to open and read ePub files natively.

\n

Getting Started

\n\n

Android Permissions Required

\n
<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
\n

AndroidManifest

\n

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

\n

{your-app-module}/res/xml/network_security_config.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted=\"true\">
        <domain includeSubdomains=\"true\">127.0.0.1</domain>
        <domain includeSubdomains=\"true\">localhost</domain>
    </domain-config>
</network-security-config>
\n

Then add network_security_config.xml in your app module's AndroidManifest.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest ...>
    ...
    <application android:networkSecurityConfig=\"@xml/network_security_config\">
    ...
    </application>
</manifest>
\n

Code Sample

\n
import {Observable} from 'data/observable';
import { EpubReader } from 'nativescript-epub-reader';
import * as application from \"tns-core-modules/application\";

export class HelloWorldModel extends Observable {

  constructor() {
    super();
    let ePubReader = new EpubReader();
    if (application.android) {
        ePubReader.open('/storage/emulated/0/Download/Metamorphosis-jackson.epub');
    }else{
        ePubReader.open('book');
    }
  }

}
\n

IOS Demo

\n

\"Image\"

\n

Android Demo

\n
Custom Fonts
\n

\"Custom

\n
Day and Night Mode
\n

\"Day

\n
Text Highlighting
\n

\"Highlight\"

\n
Media Overlays
\n

\"Media

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-bottomsheet":{"name":"nativescript-nbmaterial-bottomsheet","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of the Material Bottom Sheet

\n

The module implement Bottom Sheet Layout on both iOS and Android.
\nThere is an animation effect on open and on close.

\n
bottomSheet = page.getViewById(\"bottomsheet\");
export function showBS() { 
    bottomSheet.show();
}
export function hideBS() {
    bottomSheet.hide();
}
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
xmlns:bnav=\"nativescript-nbmaterial-bottomnav\">
\t<bs:BottomSheetModal id=\"bottomsheet\">
\t\t\t<bs:BottomSheetModal.template>
\t\t\t\t<GridLayout rows=\"auto\" columns=\"auto\">
\t\t\t\t\t<StackLayout>
\t\t\t\t\t\t<Label text=\"Ready?\" textWrap=\"true\" />
\t\t\t\t\t\t<Label text=\"Steady?\" textWrap=\"true\" />
\t\t\t\t\t\t<Label text=\"Go!\" textWrap=\"true\" />
\t\t\t\t\t\t<Label text=\"Cool\" textWrap=\"true\" />
\t\t\t\t\t\t<Button text=\"HIDE BS\" tap=\"hideBS\" class=\"btn btn-primary btn-active\"/> 
\t\t\t\t\t</StackLayout>
\t\t\t\t</GridLayout>
\t\t\t</bs:BottomSheetModal.template>
\t\t</bs:BottomSheetModal>
</Page>

}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-calendar":{"name":"nativescript-nbmaterial-calendar","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript implementation of the Material Calendar picker

\n

The module implement Material calendar on both platforms iOS and Android.\nThe calendar implements slide transition effects.\nThe pager lets you change months using a swipe.

\n
export function selectDate(e) {
    console.log(\"DATE SELECTED \", e.date, e.selected);
}
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:cal=\"nativescript-nbmaterial-calendar\">
 \t\t
\t\t\t\t<cal:CalendarMonthLayout dayTapped=\"selectDate\" multiple=\"true\"  >
\t\t\t\t\t<cal:CalendarAction action=\"previous\" text=\"chevron_left\"/>
\t\t\t\t\t<cal:CalendarTitle/>
\t\t\t\t\t<cal:CalendarAction action=\"next\" text=\"chevron_right\"/>
\t\t\t\t</cal:CalendarMonthLayout>
</Page>

}
\n

multiple parameter lets you pick multiple date in the calendar.\nCalendarTitle, CalendarAction extends labels. So you can use font library like font awesome.

\n

The calendarmonthlayout has this interface:

\n

export declare class CalendarMonthLayout extends Layout {
    public static dayTappedEvent: string = \"dayTapped\";
    public static monthChangedEvent: string = \"monthChanged\";
    date: Date;
    multiple: boolean;
    selected: Date | Date[];
    next();
    previous();
}

export interface DayTappedEvent extends EventData {
    readonly tapped: Date;
    selected: Date | Date[];
    view: CalendarDay;
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tus-client":{"name":"nativescript-tus-client","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-tus-client

\n

NativeScript plugin for TUS - Open Protocol for Resumable File Uploads.\nUses TUSKit (iOS) and tus-android-client.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOSAndroid
\"iOS\"Android
\n

Installation

\n
tns plugin add nativescript-tus-client
\n

Usage

\n
import { File, Folder, knownFolders } from \"@nativescript/core\";
import * as tus from \"nativescript-tus-client\";

// create a File reference
const file = File.fromPath(knownFolders.currentApp().path + 'assets/test_image.png');

// Create a new tus upload
var upload = new tus.Upload(file, {
    endpoint: \"http://192.168.1.118:1080/files/\",
    metadata: {
        filename: 'test_image.png',
        filetype: 'image/png'
    },
    headers: {
        Authorization: \"Basic YWxhZGRpbjpvcGVuc2VzYW1l\"
    },
    onError: function(error) {
        console.log(\"Failed because: \" + error)
    },
    onProgress: function(bytesUploaded, bytesTotal) {
        var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
        console.log(bytesUploaded, bytesTotal, percentage + \"%\")
    },
    onSuccess: function() {
        console.log(`Download ${upload.file.name} from ${upload.url}` )
    }
})

// Start the upload
upload.start()

// Abort the upload
upload.abort()
\n

API

\n

nativesctipt-tus-plugin implements a very limited subset of the JS api. See the example above as it contains all the implemented API.

\n

Test server

\n

We included a tus test server. Remember to change the host in test-server/index.js:

\n
const host = '192.168.1.118';
\n

then:

\n
cd test-server
npm run start
\n

You will have to change the host in the demo app at demo/app/home/home-page.ts too.

\n

Credits

\n

A big thanks to coderReview for leading the way with his nativescript-tus-upload.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/ngx-translate-nativescript-loader":{"name":"@aquinn/ngx-translate-nativescript-loader","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript ngx-translate-nativescript-loader

\n
ns plugin add @aquinn/ngx-translate-nativescript-loader
\n

Usage

\n

This code was borrowed from https://github.com/danvick/ngx-translate-nativescript-loader\nFor temporary use until the original author uses the new NS7 package workflow

\n

License

\n

This code was borrowed from https://github.com/danvick/ngx-translate-nativescript-loader\nFor temporary use until the original author uses the new NS7 package workflow

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-url-share":{"name":"nativescript-url-share","version":"1.6.3","license":"MIT","readme":"

NativeScript Url Share Plugin

\n

Forked from https://github.com/tjvantoll/nativescript-social-share.

\n

A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

\n

\"\"\n\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-url-share
\n

This command automatically installs the necessary files, as well as stores nativescript-url-share as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
// ------------ JavaScript ------------------
var UrlShare = require(\"nativescript-url-share\");

// ------------- TypeScript ------------------
import * as UrlShare from \"nativescript-url-share\";
\n

API

\n

shareUrl(String url, String text, [optional] String subject)

\n

The shareUrl() method excepts a url and a string.

\n
UrlShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
\n

You can optionally pass shareUrl() a second argument to configure the subject on Android:

\n
UrlShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
\n

Tutorials

\n

Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@outloud/nativescript-ui-svg":{"name":"@outloud/nativescript-ui-svg","version":"0.0.9","license":"ISC","readme":"

NativeScript SVG widget

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript SVG plugin. Very basic implementation for now

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add @nativescript-community/ui-svg

\n

Configuration

\n

For now only vue (and core) is supported.

\n
import CanvasSVG from '@nativescript-community/ui-svg/vue';
Vue.use(CanvasSVG);
\n

It works in 3 ways!.

\n

CanvasSVG extending Canvas

\n
<CanvasSVG>
    <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"100%\" stretch=\"aspectFit\" />
</CanvasSVG>
\n

or SVGView which is a basic svg view with support for auto sizing

\n
<SVGView height=\"30%\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" stretch=\"aspectFit\" backgroundColor=\"red\" />
\n

Or within and canvas extending view

\n
<CanvasLabel>
 <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
        <CSpan text=\"test\" fontWeight=\"bold\" />
        <CSpan text=\"test2\" color=\"#ccc\" fontSize=\"16\" />
    </CGroup>
    <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"10\" stretch=\"aspectFit\" />
</CanvasSVG>
\n

For full example / doc look at the vue demo and the typings.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-caching":{"name":"nativescript-image-caching","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript Image Caching

\n

Image Caching that use Glide(v3) for android and SDWebImage(v4) for ios

\n

CAUTION!

\n

this plugin is under development, i really appreciate pull request and contribution in this repo. Thanks!

\n

inspired from nativescript-image-cache-it
\nthey used Picasso rather than Glide.

\n

Installation

\n
tns plugin add nativescript-image-caching
\n

Usage

\n
  <ImageCache src=\"http://lorempixel.com/2000/2000/sports\"
              width=\"100%\"
              height=\"210\"/>
\n

IMPORTANT FOR ANGULAR

\n

inside your app module. insert:

\n
import { registerElement } from 'nativescript-angular/element-registry';
registerElement('ImageCache', () => require('nativescript-image-caching').ImageCache);
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
src-(required) link url of an image
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unique-identifier":{"name":"nativescript-unique-identifier","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript UUID Plugin \"apple\" \"android\"

\n

Usage

\n

See this example for Angular:

\n
import { Component, OnInit } from \"@angular/core\";
import {UniqueIdentifier} from \"nativescript-unique-identifier\"

@Component({
  selector: \"ns-main\",
  template: \"<page-router-outlet></page-router-outlet>\"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        let uuid = new UniqueIdentifier();
        console.log(uuid.getUUID());
     }
}
\n

And for pure NativeScript:

\n
var plugin = require(\"nativescript-unique-identifier\").UniqueIdentifier;
console.log(plugin.getUUID());

## Installation

```bash
$ tns plugin add nativescript-unique-identifier
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-soft-keyboard":{"name":"@bigin/ns-soft-keyboard","version":"2.0.8","license":"Apache-2.0","readme":"

Credit

\n

This plugin is from nativescript-soft-keyboard of @liuy97. You can get the original plugin at https://github.com/liuy97/nativescript-soft-keyboard

\n

We just upgrade to NS7 and add some tweaks to make it works.

\n

NativeScript Soft Keyboard Height

\n

It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But NativeScript app sometimes needs this information to achieve a good user interface.

\n

Installation

\n
ns plugin add @bigin/ns-soft-keyboard
\n

Usage

\n
registerSoftKeyboardCallback((h) => console.log(h));
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
functionparameterDescription
registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os":{"name":"nativescript-wear-os","version":"3.0.0","license":"Apache-2.0","readme":"

https://github.com/bradmartin/nativescript-wear-os/blob/master/README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ims-native-demo":{"name":"nativescript-ims-native-demo","version":"1.0.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-popup":{"name":"nativescript-image-popup","version":"1.0.1","license":"Apache-2.0","readme":"

Image Popup plugin for NativeScript.

\n

Based on:

\n\n

Install

\n

NativeScript 6x

\n
tns plugin add nativescript-image-popup
\n\n

Android Specifications

\n

Usage Examples

\n
import { ImagePopup } from 'nativescript-image-popup';
import { ImagePopupOptions } from 'nativescript-image-popup/classes';

// basic use
ImagePopup.localImagePopup(\"~/assets/images/nmb.jpg\");

// or

ImagePopup.networkImagePopup(\"https://i.hizliresim.com/kx47Db.png\");


// with options
const options: ImagePopupOptions = {
    path: \"https://i.hizliresim.com/kx47Db.png\",
    width: 500,
    height: 500,
    fullScreen: true,
    backgroundColor:ImagePopupBackgroundColors.TRANSPARENT, // or manuel color ( red, blue #ffd200)
    hideCloseIcon: false;
    imageOnClickClose: true
};

ImagePopup.localImagePopup(options);

// or 

ImagePopup.networkImagePopup(options);
\n

NativeScript Image Popup - Methods

\n\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

Demo

\n

Need extra help getting these Image Popup working in your application? Check out these tutorials that make use of the plugin:

\n

Image Popup in a NativeScript Core Demo

\n

Image Popup in a NativeScript Angular Demo

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-screen":{"name":"nativescript-loading-screen","version":"1.0.6","license":"Apache-2.0","readme":"

Nativescript Loading Screen \"apple\" \"android\"

\n

This is my first plugin so please be kind :) :P

\n

This plugin add a loading screen to both iOs and Android Apps.

\n

Installation

\n
tns plugin add nativescript-loading-screen
\n

Usage

\n
import { Observable } from 'tns-core-modules/data/observable';
import { LoadingScreen } from 'nativescript-loading-screen';

export class HelloWorldModel extends Observable {
  private loadingScreen: LoadingScreen;

  constructor() {
    super();
  }

  public showLoading() {
    this.loadingScreen = new LoadingScreen();

    this.loadingScreen.show({
      title: \"test\",
      message: \"loading...\"
    });

    setTimeout(() => {
      this.loadingScreen.updateMessage(\"Loading Change\");
    }, 5000);

    setTimeout(() => {
      this.loadingScreen.close();
      const topmost = frameModule.topmost();
      topmost.navigate(\"details-page\");
    }, 10000);

  }
}
\n

If you plan to nativate after closing the loading screen you must do it in the resolved promise on iOS. See example below

\n
  this.loadingScreen.close().then((result) => {
    console.log(`Result => ${result}`);

  });
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturnDescription
show(options?: Options)Promise<bool>shows the loading screen
update(options?: Options)Promise<bool>updates the message & title
updateMessage(message: string)Promise<bool>updates the message
updateTitle(title: string)Promise<bool>updates the title
close()Promise<bool>closes the loading screen
\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
titlestring[blank]title used for the loading screen
messagestringloading...message using for the loading screen
\n

License

\n

Apache License Version 2.0, January 2004

\n

Credit

\n

I got the idea to make this plugin from nativescript-dialog written by Vladimir Enchev @enchev

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-blur":{"name":"@nstudio/nativescript-blur","version":"3.0.2","license":"Apache-2.0","readme":"

@nstudio/nativescript-blur

\n
ns plugin add @nstudio/nativescript-blur
\n

iOS

\n \n

On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred.

\n

Android

\n \nIf you pass `true` to the constructor (`let blur = new Blur(true)`), nothing will be different on iOS, but on Android the backgroundColor of the NativeScript view you pass to either light semi transparent or dark semi transparent. So, if you are using this for a \"dimmer\" effect for modals and stuff, Android will work that way for now.\n

Usage

\n

import { Blur } from '@nstudio/nativescript-blur';
let blur = new Blur(true); // pass true to enable limited usage on android (for now);

// Pick Date
makeKittyBlurry() {
    let kittyView = page.getViewById('kitty');
    blur.on(kittyView, 'kitty', 'light').then(() => {
        console.log('Kitty has become blurry.');
    }).catch(e => {
        console.dir(e);
    });
}

clearUpKitty() {
    blur.off('kitty').then(() => {
        console.log('Kitty has cleared up.')
    });
}
\n

API

\n

on(view, keyTitle, theme?, duration?): Promise;

\n

To turn it on, you must pass a view and a key name. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. The theme is either light or dark, and you can pass a custom duration. The duration is in seconds, for example if you pass .2 the animation will last .2 seconds.\nThe view needs to be a nativescript view that has an ios property, and that property must support addSubview. Here are some examples of NativeScript UI elements you can pass:

\n
StackLayout
GridLayout
AbsoluteLayout
DockLayout
ScrollView
Image
Label
\n

If there is no ios property on the element you pass or addSubview doesn't exist on the ios property, it will return an error.

\n

off(keyTitle, duration?): Promise;

\n

Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-date-range":{"name":"nativescript-ngx-date-range","version":"1.0.7","license":"Apache-2.0","readme":"

Nativescript Date Range

\n

Date Range Picker plugin for Nativescript\nSupport RTL\n\"nativesceipt\n\"nativesceipt

\n

Installation

\n
npm i nativescript-ngx-date-range --save
\n

Usage

\n

app.module

\n
export class HomeComponent implements OnInit {
    dateRange;
    constructor() {
    }

    ngOnInit(): void {
        const options = new Options();
        options.selectionMode = 'RANGE';
        options.selectToday = true;
        options.disablePrevDates = true;
        this.dateRange =  create(options);
     }
    selectedDates() {
        console.log(this.dateRange.getSelectedDates())
    }

}
\n

home.component.html

\n
<StackLayout>
    <Button class=\"btn btn-active\" text=\"Console Dates\" (tap)=\"selectedDates()\"></Button>
    <NgxDateRange></NgxDateRange>
</StackLayout>
\n

API

\n
getSelectedDates() => {
    startDate: string,
    endDate: string,
    originDates: string[]
}

Options  = {
    selectionMode?: 'SINGLE' | 'MULTIPLE' | 'RANGE'; // default = RANGE
    initialDate?: 'yyyy/mm/dd' // default = today
    simpleDateFormat?: string; // default = \"MMMM, YYYY\"
    supportsRtl?: boolean; // default = false
    disablePrevDates?: boolean; // default = false
    selectToday?: boolean;  // default = false
    language?: 
        {
             countryCode: 'ISR', //default = null
             languageCode: 'heb' // default = null
         };

}
\n

Colors

\n

colors.xml

\n
projectName/App_Resources/Android/src/main/res/values/colors.xml
\n
    <color name=\"calendar_selected_day_bg\">#a6d3d6</color>
    <color name=\"calendar_selected_range_bg\">#a6d3d6</color>
    <color name=\"calendar_unavailable_bg\">#585757</color>
    <color name=\"calendar_range_middle_unavailable_bg\">#eae72b</color>
    <color name=\"calendar_range_middle_deactivated_bg\">#673AB7</color>
\n

Language object

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-tabs":{"name":"nativescript-nbmaterial-tabs","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of the Material Tabs

\n

The module implement Material tabs on both platforms iOS and Android.\nIt includes animation effect when indicator is moving.

\n

TabLayout extends the nativescript GridLayout

\n
export function selectTabs(args) {
    console.log(\"SELECT TABS: \", args.forward, args.index)
}
\n

TabSep is the indicator\nTabTitle extends Label

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:tab=\"nativescript-nbmaterial-tabs\">
 \t\t<tab:Tabs select=\"selectTabs\" colSpan=\"4\" row=\"1\">
\t\t\t\t<tab:TabSep/>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Chouks\" />
\t\t\t\t</tab:TabItem>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Catégories\" />
\t\t\t\t</tab:TabItem>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Recherches\" />
\t\t\t\t</tab:TabItem>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Pages\" />
\t\t\t\t</tab:TabItem>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Aller\" />
\t\t\t\t</tab:TabItem>
\t\t\t\t<tab:TabItem>
\t\t\t\t\t<tab:TabTitle text=\"Mes Pourquoi\" />
\t\t\t\t</tab:TabItem>
\t\t\t</tab:Tabs>
</Page>

}
\n

The TabLayout has this interface:

\n

export declare class Tabs extends Layout {
    public static selectEvent: string;
    items: TabItem[];
    selectedIndex: number;
    rippleColor: Color;
    barColor: Color;
    unchecked: number;
    activems: number;
    inactivems: number;
    autoselect: boolean;
    scrollable: boolean;
    isActive(item: TabItem);
    setSelected(item: TabItem);
}
export declare class TabItem extends AbsoluteLayout {
    public static tapEvent: string;
    tab: Tabs;
    isActive(): boolean;
    activate(): void;
    unactivate(): void;
}
export declare class TabTitle extends Label {
}
export declare class TabIcon extends Label {
} 
export declare class TabSep extends View {
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-microsoft-appcenter":{"name":"nativescript-microsoft-appcenter","version":"2.0.0","license":"Apache-2.0","readme":"

Microsoft App Center plugin for NativeScript

\n

Requirements

\n

Before you begin, please make sure that the following prerequisites are met:

\n

Node.js

\n\n

NativeScript

\n\n

Microsoft App Center

\n\n

Installation

\n
tns plugin add nativescript-microsoft-appcenter
\n

Distribute Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
YESYES
\n

Diagnostics Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
CrashesYESYES
\n

Analytics Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
Overview: Active users, daily sessions per user, session duration, top devices, countries, languages and active users per version.YESYES
Events: Event name, Count, Trend, Users, User Change and Per User.YESYES
Log flowYESYES
\n

Push Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
NotificationsCOMING SOONCOMING SOON
AudiencesCOMING SOONCOMING SOON
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-woosim-printer":{"name":"nativescript-woosim-printer","version":"1.0.7","license":"Apache-2.0","readme":"

NativeScript Woosim Printer

\n

\"npm

\n

This plugin integrate your nativescript app with Woosim Intermec Pr3 printer to print a normal text or a bmp.

\n

Prerequisites / Requirements

\n

You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

\n

Installation

\n
tns plugin add nativescript-woosim-printer
\n

Usage

\n

Create Plugin instance

\n
let printer = new WoosimPrinter();
\n

Connect to the printer through:

\n
this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
\n

To Print Normal Text use:

\n
printer.print(\"Hello World\");
\n

To Print a BMP image:

\n
printer.printImg(bmp);
\n

To Print Txt File:

\n
let documents = fs.knownFolders.currentApp();
var myFile = documents.getFile(\"mytextfile.txt\");
this.printer.printTextFile(myFile);
\n

for more information see the demo

\n

API Property

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertytypeDefaultDescription
paperSizeenumPaperSizes.FourInchset the default paper size for the printer
debugbooleanfalseset the plugin in debug mode
\n

API Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescriptionParams
connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
disconnect():voiddisconnect from a printer
print(text: string): voidprint normal texttext : the text you want to print
printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
printTextFile(file: any): void;Print Txt fileFile: NS File
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tag":{"name":"nativescript-tag","version":"1.1.2","license":{"type":"MIT","url":"https://bitbucket.org/win_min_tun/nativescript-tag/blob/master/LICENSE"},"readme":"

NativeScript UI plugin for Tagging

\n

NativeScript UI plugin for tagging with rich features including autocomplete

\n

Platform Support

\n

Currently only support Android. Any collaborator for iOS support is welcomed!

\n

##Android side\n\"alt

\n

Usage

\n

The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo for full example.

\n

\n
    <Label text=\"{{ message }}\" class=\"message\" textWrap=\"true\"/>

    <Label text=\"Editable (Default size, Custom Color)\" textWrap=\"true\" />    
    <Tags:TagGroup id=\"tag1\" ntag_editMode=\"true\" value=\"{{ tags }}\" ntag_borderColor=\"#2095F2\" ntag_textColor=\"#2095F2\" ntag_bgColor=\"#ffffff\" ntag_checkedBorderColor=\"#2095F2\" ntag_checkedBgColor=\"#2095F2\" ntag_checkedTextColor=\"#ffffff\" />

    <Label text=\"Editable (with AutoComplete)\" textWrap=\"true\" />
    <Tags:TagGroup id=\"tag4\" value=\"{{ tags }}\" autoCompleteTags=\"{{ autoCompleteTags }}\" ntag_autoComplete=\"true\" />

    <Label text=\"Read-only (Custom size, Default Color)\" textWrap=\"true\" />    
    <Tags:TagGroup id=\"tag2\" ntag_tagClick=\"{{ onTagClick }}\" value=\"{{ tags }}\" ntag_borderStrokeWidth=\"0.7\" ntag_textSize=\"15\" ntag_hSpacing=\"9\" ntag_vSpacing=\"5\" ntag_hPadding=\"14\" ntag_vPadding=\"4\" />

    <Label text=\"Read-only (Small size, Default Color)\" textWrap=\"true\" />
    <Tags:TagGroup id=\"tag3\" value=\"{{ tags }}\" ntag_tagClick=\"tag3Click\" ntag_small=\"true\" />

    <Label text=\"Read-only (Large size, Default Color)\" textWrap=\"true\" />
    <Tags:TagGroup id=\"tag3\" ntag_tagClick=\"{{ onTagClick }}\" value=\"{{ tags }}\" ntag_large=\"true\" />

    <Label text=\"Editable (Custom input hint)\" textWrap=\"true\" />
    <Tags:TagGroup id=\"tag4\" value=\"{{ tags }}\" ntag_editMode=\"true\" ntag_inputHint=\"New Tag\" ntag_large=\"true\" />
\n

\n\n

Attributes

\n

Important attributes

\n\n

String array of tags for binding

\n\n

String array of auto complete suggestion

\n\n

Set true when needs autcomplete. Default is false

\n\n

Default is false - read only. When true, can remove and add tags by double tapping and tapping the blank area of the tag group respectively. Mutually exclusive to ntag_tagClick due to the native android library.

\n\n

Tag click event. Mutually exclusive to ntag_editMode=true due to the native android library.

\n\n

Preset tag sizes. Mutually execlusive.

\n\n

Default is 'Add Tag'

\n

Color attributes

\n\n

Background color for autocomplete popup. Default is #F5F8FA

\n\n

Default is #49C120

\n\n

Default is #49C120

\n\n

Default is #FFFFFF

\n\n

Default is #AAAAAA

\n\n

Default is #80000000

\n\n

Default is #DE000000

\n\n

Default is #49C120

\n\n

Default is #FFFFFF

\n\n

Default is #FFFFFF

\n\n

Default is #49C120

\n\n

Default is #EDEDED

\n

Size attributes

\n\n

Default is 13sp

\n\n

Default is 0.5dp

\n\n

Default is 8dp

\n\n

Default is 4dp

\n\n

Default is 12dp

\n\n

Default is 3dp

\n

Credit

\n

Credit goes to the native android library (https://github.com/2dxgujun/AndroidTagGroup) by 2dxgujun (https://github.com/2dxgujun)

\n

Contributing - Support for iOS?

\n

Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-lightstorage":{"name":"nativescript-plugin-lightstorage","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-lightstorage

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-lightstorage
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-bottomnav":{"name":"nativescript-nbmaterial-bottomnav","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript implementation of the Material Bottom Navigation

\n

The module implement Bottom Navigation Layout on both iOS and Android.
\nYou can add a shit animation to nav items by adding "shifted" class to the component.\nIcon and Title extends nativescript Label.\nYou can use a font library like material-icons or font-awesome.

\n

If you want to use it as a root navigator your app.ts must looks like:

\n
import \"./bundle-config\";
import {startWithMenu} from 'nativescript-nbmaterial-bottomnav';

startWithMenu({ moduleName: 'home/home-page' }, \"menu/menu-page\");
\n

"moduleName" is your first screen.

\n

And menu-page looks like:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
xmlns:bnav=\"nativescript-nbmaterial-bottomnav\">
\t<bnav:BottomNavigation autoselect=\"false\" select=\"selectNav\" id=\"bottomnav\" class=\"shifted\">
\t\t<bnav:BottomNavigationItem>
\t\t\t<bnav:Icon text=\"dashboard\"  />
\t\t\t<bnav:Title text=\"Home\"/>
\t\t</bnav:BottomNavigationItem>
\t\t<bnav:BottomNavigationItem>
\t\t\t<bnav:Icon text=\"add\"/>
\t\t\t<bnav:Title text=\"Ajouter\" />
\t\t</bnav:BottomNavigationItem>
\t\t<bnav:BottomNavigationItem>
\t\t\t<bnav:Icon text=\"favorite\"/>
\t\t\t<bnav:Title text=\"Consulter\" />
\t\t</bnav:BottomNavigationItem> 
\t</bnav:BottomNavigation>  
</Page>

}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-range-seek-bar":{"name":"nativescript-range-seek-bar","version":"1.0.3","license":"Apache-2.0","readme":"

NativeScript Range Seek Bar

\n

A NativeScript Range Seek Bar widget.

\n

Based on

\n

TTRangeSlider for iOS

\n

Crystal Range Seekbar for Android

\n

Installation

\n

Run tns plugin add nativescript-range-seek-bar

\n

API

\n

Events

\n\n

Instance Properties

\n\n

Usage in Angular

\n\n
import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tNativeScriptUIRangeSeekBarModule,
        //......
\t],
    //......
})
\n
<!-- app.component.html -->
<StackLayout>
    <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [minStartValue]=\"rangeSeekBarProp.minStartValue\"
        [maxStartValue]=\"rangeSeekBarProp.maxStartValue\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
        (rangeSeekBarChanged)=\"rangeSeekBarChanged($event)\" (rangeSeekBarFinalValue)=\"rangeSeekBarFinalValue($event)\" class=\"range-seek-bar\"></RangeSeekBar>
</StackLayout>
\n
/*app.css*/
.range-seek-bar {
    bar-color: #8990C4;
    bar-highlight-color: #2434AD;
    thumb-color: #1A246D;
    bar-height: 10;
    corner-radius: 30;
}
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {

    public rangeSeekBarProp = {
        minValue: 0,
        maxValue: 100,
        minStartValue: 0,
        maxStartValue: 100,
        minRange: 0,
        step: 1
    };

    constructor() { }

    rangeSeekBarChanged(event: RangeSeekBarEventData) {
        console.log(\"rangeSeekBarChanged: \", event.value);
    }

    rangeSeekBarFinalValue(event: RangeSeekBarEventData) {
        console.log(\"rangeSeekBarFinalValue: \", event.value);
    }
}
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
$ cd nativescript-range-seek-bar/src
$ npm install
$ npm run demo.ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

\n

If you want to run the Angular demo simply use the demo.ios.ng.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpchart-fork-adrianoop":{"name":"nativescript-mpchart-fork-adrianoop","version":"1.0.8","license":"Apache-2.0","readme":"

Forked from LeCaoPhuc for minor improvements in Android... Documentation not updated

\n

NativeScript MPChart UI

\n

A NativeScript MPChart for Android and iOS.\nThis plugin still in develop and will update more type chart and feature in future.\nBecause I don't have much time so it only have demo-ng is detail But it can work in core.\nNow, a plugin have simple LineChart and BarChart.

\n

Based on

\n

Charts for iOS

\n

MPAndroidChart for Android

\n

Installation

\n

Run tns plugin add nativescript-mpchart

\n

API

\n

Events

\n
\n

Instance Properties

\n\n
    <color name=\"marker_background\">#cccccc</color>
    <color name=\"marker_text_color\">#000000</color>
    <color name=\"text_view_color\">#ff0000</color>
\n

into App_Resources/Android/values/colors.xml.\nSEE DETAIL IN demo-ng

\n

Method

\n\n

Method will reset chart. Call it if some property is change but not apply in UI.

\n

Data setup Properties

\n\n

Interface

\n
DataSetChartInterface {
    x: number;
    y: number;
}

DataSetLabelInterface {
    xAxisValue: number,
    label: string
}

DataLineChartInterface {
    dataSet: Array<DataSetChartInterface>;
    lineColor: Color;
    highlighColor?: Color;
    circleHoleEnabled?: boolean;
    circleColor?: Color;
    circleEnable?: boolean;
    legendLabel?: string;
}

YAxisFormatterInterface {
    type: TypeFormatter,
    numberOfDigits?: number
}
DataBarChartInterface {
    dataSet: Array<DataSetChartInterface>;
    legendLabel?: string;
    highlighColor?: Color,
    barColor?: Color;
}

ChartMarkerSize {
    width: number,
    height: number
}

ChartMarkerPadding {
    top: number;
    right: number;
    bottom: number;
    left: number;
}

ConfigDisplayData {
    showXValue: boolean,
    showYValue: boolean,
    fixedXValue?: YAxisFormatterInterface,
    fixedYValue?: YAxisFormatterInterface,
    formatter: string;
}

ChartMarkerConfig {
    backgroundColor?: Color,
    textColor?: Color,
    font?: string,
    fontSize?: number,
    padding?: {
        x: number,
        y: number
    },
    minimumSize?: ChartMarkerSize,
    borderRadius?: number,
    contentCenter?: boolean,
    displayData: ConfigDisplayData,
    xOffset?: number,
    yOffset?: number,
}
\n

Usage in Angular

\n\n
import { NativeScriptMPLineChartModule } from \"nativescript-mpchart/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tNativeScriptMPLineChartModule,
        //......
\t],
    //......
})
\n\n
    height=\"100%\"
\n

to full in parent layout.

\n
<!-- app.component.html -->
    <!-- line chart -->
    <StackLayout height=\"500\">
        <MPLineChart *ngIf=\"dataSet\" #lineChart [showLegend]=\"setUp.showLegend\" [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\"
            [descriptionText]=\"setUp.descriptionText\" [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\"
            [descriptionTextColor]=\"setUp.descriptionTextColor\" [highlightPerTapEnabled]=\"setUp.highlightPerTapEnabled\" [highlightPerDragEnabled]=\"setUp.highlightPerDragEnabled\"
            [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
            [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
            [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
            [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
            [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
            [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [items]=\"dataSet\" [labels]=\"labels\"
            [font]=\"setUp.font\" class=\"mp-chart\"></MPLineChart>
    </StackLayout>
    <!-- bar chart -->
     <StackLayout height=\"500\">
        <MPBarChart height=\"400\" #lineChart *ngIf=\"barDataSet\" [items]=\"barDataSet\" [labels]=\"labels\" [showLegend]=\"setUp.showLegend\"
            [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\" [descriptionText]=\"setUp.descriptionText\"
            [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\" [descriptionTextColor]=\"setUp.descriptionTextColor\"
            [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
            [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
            [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
            [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
            [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
            [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [font]=\"setUp.font\" 
            [showValueLabels]=\"setUp.showValueLabels\" [showLeftAxis]=\"setUp.showLeftAxis\" [showRightAxis]=\"setUp.showRightAxis\"
            [marker]=\"markerConfig\" class=\"mp-chart\"></MPBarChart>
    </StackLayout>
\n
/*app.css*/
.mp-chart {
    description-text-color: #00ff00;
    x-axis-line-color: #ff0000;
    left-axis-line-color: #005500;
    right-axis-line-color: #ff00ff;
    x-axis-text-color: #ff0000;
    left-axis-text-color: #005500;
    right-axis-text-color: #ff00ff;
}
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { DataLineChartInterface, DataSetChartInterface, DataSetLabelInterface,YAxisFormatterInterface } from \"nativescript-mpchart\";

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
})

export class AppComponent {

     public setUp: any = {
        showGridLines: false,
        showLegend: true,
        scaleEnable: true,
        descriptionText: \"Text for chart\",
        descriptionXOffset: 0,
        descriptionYOffset: 0,
        descriptionTextColor: \"#ffff00\",
        highlightPerTapEnabled: true,
        highlightPerDragEnabled: true,
        xAxisGranularityProperty: 1,
        leftAxisGranularityProperty: 20,
        rightAxisGranularityProperty: 30,
        xAxisLineColor: \"#ff0000\",
        xAxisTextColor: \"#ff0000\",

        leftAxisLineColor: \"#0000ff\",
        leftAxisTextColor: \"#0000ff\",

        rightAxisLineColor: \"#00ff00\",
        rightAxisTextColor: \"#00ff00\",

        xAxisMinValue: -1,
        xAxisMaxValue: 4,

        leftAxisMinValue: 0,
        leftAxisMaxValue: 100,

        rightAxisMinValue: 0,
        rightAxisMaxValue: 70,

        font: \"Papyrus\",
        xAxisLabelPosition: \"Bottom\",
        showValueLabels: false,
        showLeftAxis: true,
        showRightAxis: false,
    };
    public leftAxisFormatter: YAxisFormatterInterface = {
        type: \"Float\",
        numberOfDigits: 1
    };
    public rightAxisFormatter: YAxisFormatterInterface = {
        type: \"Float\",
        numberOfDigits: 1
    };
    public markerConfig: ChartMarkerConfig
    public dataSet: Array<DataLineChartInterface>;
    public barDataSet: Array<DataBarChartInterface>;
    public labels: Array<DataSetLabelInterface>;
    constructor(
        public changeDetectorRef: ChangeDetectorRef
    ) {
        let cyan = new Color(\"#00FFFF\");
        let color = new Color(\"#FF0000\");
        let color1 = new Color(\"#00FF00\");
        let arrDataView1: Array<DataSetChartInterface> = [];
        let arrDataView2: Array<DataSetChartInterface> = [];
        let arrLabel: Array<DataSetLabelInterface> = [];
        let arrDataView: Array<DataSetChartInterface> = [];
        for (let i = 0; i < 8; i++) {
            arrDataView1.push({
                x: i,
                y: i * 9,
            });
            arrDataView2.push({
                x: i,
                y: i + 30,
            });

            arrLabel.push({
                xAxisValue: i,
                label: `Tháng ` + (i + 1)
            })

        }
        let item: DataLineChartInterface = {
            dataSet: arrDataView1,
            lineColor: cyan,
            highlighColor: color,
            legendLabel: \"arrDataView1\"
        };
        let item1: DataLineChartInterface = {
            dataSet: arrDataView2,
            lineColor: color1,
            highlighColor: color,
        };
        this.dataSet = [];
        this.dataSet.push(item);
        this.dataSet.push(item1);
        this.barDataSet = [];
        this.barDataSet.push({
            dataSet: arrDataView1,
            legendLabel: \"barChartView1\",
            highlighColor: color,
            barColor: color1
        });
        this.markerConfig = {
            displayData: {
                showXValue: false,
                showYValue: true,
                formatter: \"Yvalue: {{y}}\",
            },
            contentCenter: true,
            xOffset: -30,
            yOffset: -30,
            backgroundColor: new Color(\"#0000ff\"),
            textColor: new Color(\"#ffffff\"),
            font: \"Papyrus\",
            fontSize: 12,
            padding: {
                x: 20,
                y: 10
            }
        }
        this.labels = arrLabel;
    }
}
\n

##FixSameError

\n

When use plugin if you see error when build --aot in line import interface in file .component like this :

\n

Module not found. Can't resolve "nativescript-mpchart" in "relative path*.component".

\n

You can't try change to : import { ... } from "nativescript-mpchart/index" and delete all platform, hook, node_modules and rebuild. I think an error in platform and angular not in plugin because i see it when develop.

\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/LeCaoPhuc/nativescript-mpchart
$ cd nativescript-mpchart/src
$ npm install
$ npm run demo
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

\n

If you want to run the Angular demo simply use the demo.ios.ng.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-pullrefresh":{"name":"nativescript-nbmaterial-pullrefresh","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of PullToRefresh behaviour

\n

The module implement Material calendar on both platforms iOS and Android.\nIt is possible to refresh on both direction (top and bottom).\nYou must use the recycler package in order to use the pulltorefresh component.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ti=\"nativescript-nbmaterial-pullrefresh\" xmlns:pullr=\"nativescript-nbmaterial-pullrefresh\">
 \t<pullr:PullToRefresh direction=\"both\" id=\"pullrefresh\">
\t\t\t<rec:RecyclerView row=\"0\"  items=\"{{source}}\" id=\"list\" itemTap=\"tapItem\" itemLongTap=\"tapLongItem\" itemTemplateSelector=\"templateSelector\">
\t\t\t\t<rec:RecyclerView.itemTemplates>
\t\t\t\t\t<template key=\"zero\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"green\" />
\t\t\t\t\t</template>
\t\t\t\t\t<template key=\"un\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"white\" paddingTop=\"10\"  paddingBottom=\"10\" />
\t\t\t\t\t</template>
\t\t\t\t\t<template key=\"deux\">
\t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"red\"/>
\t\t\t\t\t</template>
\t\t\t\t</rec:RecyclerView.itemTemplates>
\t\t\t</rec:RecyclerView>
\t\t</pullr:PullToRefresh> 
</Page>

}
\n

The PullToRefresh has this interface:

\n

export declare class PullToRefresh extends View {
    direction: \"both\" | \"bottom\" | \"top\";
    public static refreshTopEvent;
    public static refreshBottomEvent; 
    public androidBottomRefreshView: ActivityIndicator;
    startRefreshTop();
    startRefreshBottom();
    stopRefreshTop();
    stopRefreshBottom();
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-navigator":{"name":"nativescript-vue-navigator","version":"1.2.0","license":"MIT","readme":"

NativeScript-Vue-Navigator

\n

NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.

\n

Quick Start

\n
$ npm install --save nativescript-vue-navigator
\n
// main.js
import Vue from 'nativescript-vue'
...
+ import Navigator from 'nativescript-vue-navigator'
+ import {routes} from './routes'
+ Vue.use(Navigator, { routes })

new Vue({
-   render: h => h('frame', App),
+   render: h => h(App),
}).$start()
\n
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'

export const routes = {
  '/home': {
    component: HomePage,
  },
  '/login': {
    component: LoginPage,
  },
}
\n
// App.vue
<template>
+  <Navigator :defaultRoute=\"isLoggedIn ? '/home' : '/login'\"/>
</template>
\n

Attaching extra data to a route

\n
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'

export const routes = {
  '/home': {
    component: HomePage,
+   // we are using `meta` as a good practice, but you are free to use something else
+   meta: { needsAuth: true }
  },
  '/login': {
    component: LoginPage,
+   meta: { needsAuth: false }
  },
}
\n
<!-- anywhere in your templates -->
<Label :text=\"$navigator.route.meta.needsAuth\" />
\n
// or in any vue component
export default {
  methods: {
    doStuff() {
      if(this.$navigator.route.meta.needsAuth) {
        // do stuff
      }
    }
  }
}
\n

Getting the current path

\n
// logs the current path in the default navigator
console.log(this.$navigator.path)

// logs the current path in the second navigator (See Multiple Navigators section for more details)
console.log(this.$navigator.paths.second)
\n

Navigating

\n

This package provides 2 methods for navigation, $navigator.navigate and $navigator.back

\n

$navigator.navigate(to, options) is used for all forward navigation

\n\n

For example, given you are on a Login page, and successfully log in you would navigate to the Home page with

\n
this.$navigator.navigate('/home', { clearHistory: true })
\n

Note that we used clearHistory: true to prevent the back button from going back to the login page.

\n

$navigator.back(options, backstackEntry) is an alias to $navigateBack

\n

Multiple Navigators

\n

It is possible to use multiple <Navigator> elements by providing each new Navigator with a unique id.

\n
<template>
  <!-- this is the default navigator and can omit the id -->
  <Navigator />   
  <!-- shows the current path of the default navigator -->
  <Label :text=\"$navigator.path\" />

  <!-- this is the second navigator and it MUST have a unique id -->
  <Navigator id=\"second\" /> 
  <!-- shows the current path of the second navigator -->
  <Label :text=\"$navigator.paths.second\" />
</template>

<script>
  export default {
    methods: {
      someMethod() {
        // navigate the default Navigator
        this.$navigator.navigate('/new-path')
        // navigate the second default Navigator by specifying the frame option
        this.$navigator.navigate('/new-path', { frame: 'second' })


        // navigate back the default Navigator
        this.$navigator.back()
        // navigate back the second Navigator
        this.$navigator.back({ frame: 'second' })
      }
    }    
  }
</script>
\n

Navigator Modals

\n
type ModalOptions = { id: string } & ShowModalOptions
this.$navigator.modal(path: string, options: ModalOptions);
\n

The default id for modal navigators is modalNavigator but can be changed by passing an id inside the ModalOptions.

\n
// use the default id for the modal
this.$navigator.modal('/path', { fullscreen: true })
// to navigate the modal to '/other'
this.$navigator.navigate('/other', { frame: 'modalNavigator' })

// use a different id for the modal
this.$navigator.modal('/path', { fullscreen: true, id: 'myModal' })
// to navigate the myModal modal to '/other'
this.$navigator.navigate('/other', { frame: 'myModal' })
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-n6-color-wheel":{"name":"nativescript-n6-color-wheel","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript Color Wheel

\n

This plugin is tend to be used within NativeScript 6 version.

\n

Correspondent {N}7 version\nis @sergeymell/nativescript-color-wheel

\n

Description

\n

This plugin is actually a color picker plugin which can be used\nas a simple component wherever you need it. It allows you to

\n\n

Plugin works simultaneously for both iOS and Android platforms and\nis not based on any additional libraries, CocoaPods etc

\n

Examples

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Color wheel with custom selection pickerColor picker in a modal dialog
\"\"\"\"
\n

Installation

\n
ns plugin add nativescript-n6-color-wheel
\n

Usage

\n

In NativeScript Core applications:

\n
<clw:ColorWheel width=\"200\" height=\"200\" color=\"#FFB35E\"
                            colorSelect=\"{{colorSelected}}\"/>
\n

In NativeScript Angular applications:

\n
    \n
  1. Add NativeScriptColorWheelModule from nativescript-n6-color-wheel/angular to the imports section of your Angular module
    2. \n
  2. Use the ColorWheel component where you need it
    3. \n
\n
<ColorWheel width=\"200\" height=\"200\" margin=\"20\"
                  (colorSelect)=\"onColorSelected($event)\"></ColorWheel>
\n

TODOs:

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar-elica":{"name":"nativescript-linearprogressbar-elica","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Linear Progress Bar

\n

A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
\nThe ios implemention uses Philippe Boisney's linear progress bar .

\n

Installation

\n\n

Vanilla NativeScript

\n

XML

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:Bar=\"nativescript-linearprogressbar\">
  <StackLayout>
    <Bar:Linearprogressbar indeterminate=\"true\" />
  </StackLayout>
</Page>
\n

Angular NativeScript

\n
import { registerElement } from 'nativescript-angular/element-registry';

registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
\n
<LinearProgressBar indeterminate=\"true\">
</LinearProgressBar>
\n

Attributes

\n\n

Version

\n

1.0

\n

Author

\n

slanca (npmdroid(@)gmail.com)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-homekit":{"name":"nativescript-homekit","version":"1.0.0","license":"MIT","readme":"

NativeScript HomeKit plugin

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-homekit
\n

Demo app

\n

Recommended! Check out the demo to get a feel of what you can do with HomeKit.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.

\n

A bit of context

\n

As mentioned here, HomeKit is a framework for communicating with and controlling connected home automation accessories that support Apple's HomeKit Accessory Protocol. HomeKit apps enable users to discover compatible accessories and configure them. Users can also create actions to control accessories (such as a thermostat or light), group them together, and trigger them by using Siri.

\n

HomeKit objects are stored in a database residing on the user’s iOS device, which is synchronized over iCloud to other iOS devices. HomeKit supports remote access to accessories, multiple user devices, and multiple users. HomeKit also handles security and privacy for you.

\n

Homes

\n

At the top of the hierarchy are 'homes', think your family home, and a (permanent) vacation home. Each home can have multiple rooms. Accessories in a home may be assigned to a room. And finally accessories have services:

\n\n

Zones

\n

To further structure your HomeKit layout and create powerful scenes HomeKit has the ability to divide your home into zones (the 'Kitchen' and 'Garage' rooms could be clustered in a 'Downstairs' zone):

\n\n

What this plugin does

\n

This plugin gives you a dead-simple interface into HomeKit's SDK to manage homes, rooms, and zones, and assign accessories to those homes or rooms.

\n

Anything beyond that can be done as well, but you'll need to interact directly with the HomeKit SDK. Don't worry, we'll explain how that works and it's easier than you might think.

\n

You may wonder why this plugin doesn't expose the entirety of HomeKit? Mainly because it's huge and everything beyond the parts exposed by this plugin really depends on the type(s) of accessories you own. So that would mean we'd produce a lot of untested wrapping code while using the raw SDK isn't that different anyway.

\n

Setup

\n

Open your project in Xcode, go to Targets, then enable HomeKit. This needs to be done only once, unless you run tns platforms remove ios & tns platform add ios of course.

\n

Download the HomeKit Simulator which is now part of the Hardware IO Tools. It's a super convenient way to test your HomeKit-powered app.

\n

Just open the simulator and add a new accessory as shown in this picture and you're ready to play with it in the demo app:

\n\n

Types

\n

The HomeKit plugin wraps the native iOS HomeKit SDK classes to make it more convenient for you to work with them. The API functions further below use the types listed in this section.

\n

Note that you can skip this section and just look at the TypeeScript .ts.d files shipped with this plugin. If you use a decent IDE like VSCode or Webstorm/Intellij you will get autocomplete, etc based on those definitions.

\n

Home

\n

| Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique |\n| primary | boolean | The first home you create will be the 'primary' home |\n| zones | Array<Zone> | All zones you've created in this home |\n| rooms | Array<Room> | All rooms you've created in this home |\n| accessories | Array<Accessory> | All accessories you've assigned to this home |\n| ios | HMHome | The native HomeKit SDK class you can further explore |

\n

Zone

\n

| Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| rooms | Array<Room> | A zone can have mulriple rooms, each with a unique name |\n| ios | HMZone | The native HomeKit SDK class you can further explore |

\n

Room

\n

| Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| accessories | Array<Accessory> | A room can have mulriple accessories assigned to it |\n| ios | HMRoom | The native HomeKit SDK class you can further explore |

\n

Accessory

\n

| Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| bridged | boolean | Whether or not this accessory is connected through a bridge (which is an accessory like everything else) |\n| room? | Room | The accessory may or may not be assigned to a room |\n| ios | HMAccessory | The native HomeKit SDK class you can further explore |

\n

API

\n

Most of the examples will be in TypeScript as I think that's by far the best way to build anything with JavaScript these days. If you plan on doing some deep interaction with HomeKit's accessories and services you'll also want to install the tns-platform-declarations modules which provide TypeScript declarations of the HomeKit SDK.

\n

Sounds a bit overwhelming? Just look at the demo app as it has all those bits configured. It's a non-Angular TypeScript-powered NativeScript app you can copy snippets from.

\n

Note that all of these API functions use Promises so their .then() will receive a resolve and reject param. The reject will always contain a string with an error reason. Most of the time those error will originate from HomeKit itself. For instance if you add a room with the same name as an existing room to a home. Or if you end a roomname with a character Siri doesn't like.

\n

For brevity I'll omit those rejects from most of the examples.

\n

available

\n

On iOS this will always return true, on Android false. So if you already have some other convenient means to branch your code between those two then don't bother invoking this method at all.

\n
JavaScript
\n
// require the plugin
var HomeKit = require(\"nativescript-homekit\").HomeKit;

// instantiate the plugin
var homeKit = new HomeKit();

homeKit.available().then(
  function(available) {
    console.log(available ? \"YES!\" : \"NO\");
  }
);
\n
TypeScript
\n
// require the plugin
import { HomeKit } from \"nativescript-homekit\";

// instantiate the plugin (assuming the code below is inside a Class)
private homeKit = new HomeKit();

public checkAvailability(): void {
  this.homeKit.available().then(
    avail => console.log(available ? \"YES!\" : \"NO\"),
    err => console.log(err)
  );
}
\n

init

\n

No init, no glory - ehh, HomeKit interaction. You'll need to pass in a function that will receive updates when anything in the HomeKit database changes so your app can respond to those changes.

\n
this.homeKit.init((homes: Array<Home>) => {
  // do anything with the Homes you received (look at the demo app!)
});
\n

startSearchingForAccessories

\n

Accessories may pop up at any time, but by default your app isn't searching for them all the time. It's probably a good idea to add a button to your app's UI that starts and stops searching for accessories as the user will know best when a new accessory can be found.

\n

Only new accessories can be found, not ones already assigned to a home or room. Also, when accessories were previously stored in the local HomeKit database and have now been removed (try it, delete one in the HomeKit Simulator) then you'll be notified as well.

\n

To that end you can pass in 2 distinct callback functions: the first is for newly discovered the devices, the second for removed devices:

\n
this.homekit.startSearchingForAccessories(
    (accessory: Accessory) => {
      console.log(\"New accessory found: \" + accessory.name);
      // you can use this to further interact with the accessory:
      console.log(\"Accessory native object: \" + accessory.ios);
    },
    (accessory: Accessory) => {
      console.log(\"Accessory removed: \" + accessory.name);
    }).then(
        () => console.log(\"searching..\"),
        (err) => alert(err)
);
\n

stopSearchingForAccessories

\n

I'm not sure how much of a battery drainer search for accessories is, but it's probably a good idea to allow the user to be able to stop searching for accessories.

\n

And it's easily implemented as well, so go for it!

\n
this.homekit.stopSearchingForAccessories().then(() => console.log(\"Searching stopped\"));
\n

Managing homes: addHome, removeHome, renameHome

\n

You can offer the user to configure his homes, zones, and rooms (like the demo app does). Here's how you manage the homes:

\n

addHome

\n
import { prompt, PromptResult } from \"ui/dialogs\";

// ask the user for a name and add it to HomeKit
prompt(\"Name the home\").then((promptResult: PromptResult) => {
  if (promptResult.result) {
    that.homekit.addHome(promptResult.text).then((home: Home) => {
      console.log(JSON.stringify(home));
      that.homes.push(home);
    }, err => alert(err));
  }
});
\n

deleteHome

\n
this.homekit.removeHome(name).then((home: Home) => {
  // the returned home is the one deleted
}, err => alert(err));
\n

renameHome

\n
// ask the user for a new name, prefill the old one
prompt(`Rename home '${currentName}' to..`, currentName).then((promptResult: PromptResult) => {
  if (promptResult.result) {
    // since the name is unique we're using 'currentName' as an identifier
    that.homekit.renameHome(currentName, promptResult.text).then((home: Home) => {
      // the returned home is already updated with the new name
      console.log(`Renamed ${currentName} to ${home.name}`);
    }, err => alert(err));
  }
});
\n

Managing zones: addZone, removeZone, renameZone

\n

Much the same as homes, so to not bore you we're just showing the TypeScript defintion here:

\n
addZone(name: string, toHome: string): Promise<Zone>;

removeZone(name: string, fromHome: string): Promise<Zone>;

renameZone(oldName: string, newName: string, inHome: string): Promise<Zone>;
\n

Managing rooms: addRoomToHome, addRoomToZone, removeRoomFromZone, removeRoomFromHome, renameRoom

\n

Again, quite similar to the others. The only difference is you can only add a room to a zone if it's already added to a home. Which makes sense, right? Right. So that's why you also need to pass the home name when manipulating rooms in a zone.

\n
addRoomToHome(name: string, toHome: string): Promise<Room>;

addRoomToZone(name: string, toZone: string, inHome: string): Promise<Zone>;

removeRoomFromZone(name: string, fromZone: string, inHome: string): Promise<Zone>;

removeRoomFromHome(name: string, fromHome: string): Promise<Room>;

renameRoom(oldName: string, newName: string, inHome: string): Promise<Room>;
\n

Managing accessories: addAccessoryToHome, removeAccessoryFromHome, assignAccessoryToRoom, renameAccessory

\n

This should look familiar by now. A few things to note though:

\n\n
addAccessoryToHome(accessoryName: string, toHome: string): Promise<Home>;

removeAccessoryFromHome(accessoryName: string, fromHome: string): Promise<Home>;

assignAccessoryToRoom(accessoryName: string, roomName: string, homeName: string): Promise<Array<Room>>;

renameAccessory(oldName: string, newName: string): Promise<Accessory>;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-viewer":{"name":"nativescript-pdf-viewer","version":"3.1.0","license":"MIT","readme":"

nativescript-pdf-viewer

\n

This is a very basic PDF view implementation that does only one thing, and\nthat is to display PDF files. It conveniently uses the iOS UIWebView, but\nfor Android it uses AndroidPdfViewer.

\n

This plugin does the bare minimum required to render the PDF, no configuration\noptions, and no error handling have been built yet. I welcome all Pull Requests!

\n

Usage

\n

Demo

\n

Check out the demo folder for a sample usage.

\n

Angular 2

\n

If you're using the plugin with Angular 2, the plugin automatically registers\nPDFViewer as a valid tag for Angular templates. Usage is simple:

\n
    \n
  1. Make sure to import nativescript-pdf-viewer somewhere in your code, e.g:
    2. \n
\n
import 'nativescript-pdf-viewer';
\n
    \n
  1. Include the tag in your template:
    2. \n
\n
<PDFViewer [src]=\"localPath\"></PDFViewer>
\n

Try the Demo

\n

To try the demo run the following commands:

\n
npm run setup
npm run demo.ios
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-chat-ui":{"name":"nativescript-zendesk-chat-ui","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Zendesk Chat UI

\n

Exposes Zendesk Chat SDK for iOS and Android.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-zendesk-chat-ui
\n

Usage

\n
ZendeskChatUi.initialize(key); // your key here
ZendeskChatUi.startChat(); // start a chat
\n

API

\n

ZendeskChatUi

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDefaultDescription
startChat(chatConfig?: ChatConfig)nullStart a chat with a chat configuration.
initialize(accountKey: string)nullyour zendesk chat account key. required.
trackEvent(eventDescription: string)nulltrack event.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
visitorInfo: VisitorInfonullset user's the email, name, phone number, note.
chatOverlayEnabled: booleantruehide the chat overlay. iOS only
\n

VisitorInfo

\n
export interface VisitorInfo {
  name?: string;
  email?: string;
  phoneNumber?: string;
  note?: string;
}
\n

ChatConfig

\n
export interface ChatConfig {
  department?: string;
  tags?: string[];
  uploadAttachmentsEnabled?: boolean; // ios only
  preChatDataRequirements?: { // required fields the user will have to fill
    department: PreChatDataRequirement;
    email: PreChatDataRequirement;
    message: PreChatDataRequirement;
    name: PreChatDataRequirement;
    phone: PreChatDataRequirement;
  };
}
\n

PreChatDataRequirement

\n
export enum PreChatDataRequirement {
  NotRequired = 0,
  Optional = 1,
  Required = 2,
  OptionalEditable = 3,
  RequiredEditable = 4
}
\n

Customization

\n

For customization, please refer to the iOS and Android documentation.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ns-apple-signin":{"name":"nativescript-ns-apple-signin","version":"1.0.4","license":"Apache-2.0","readme":"

nativescript-ns-apple-signin

\n

Sign in with Apple, for NativeScript

\n

My Linked https://www.linkedin.com/in/tungtranuit/

\n

Easily way to get User Info with Login Apple .

\n

You can get the Infomations :\nUser, Email, RealUserStatus, IdentityToken, AuthCode , fullName (givenName,familyName ,middleName, namePrefix,nameSuffix,nickname,phoneticRepresentation ) ...

\n
{
    user: user ,
    email: email,
    fullName:{
                givenName 
                familyName 
                middleName 
                namePrefix 
                nameSuffix 
                nickname
                phoneticRepresentation 
     },
            realUserStatus: realUserStatus,
            identityToken: identityToken,
            authCode: authCode
  }
\n

Re-wirte Plugin from https://github.com/EddyVerbruggen/nativescript-apple-sign-in.

\n

Prerequisites / Requirements

\n

Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.\nOpen your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.

\n
<key>com.apple.developer.applesignin</key>
<array>
<string>Default</string>
 </array>
\n

Installation

\n
tns plugin add nativescript-ns-apple-signin
\n

Configuration

\n

Usage

\n
tns plugin add nativescript-ns-apple-signin
\n

API

\n

isSignInWithAppleSupported

\n

Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

\n
import { isSignInWithAppleSupported } from \"nativescript-ns-apple-signin\";

const supported: boolean = isSignInWithAppleSupported();
\n

signInWithApple

\n

Not that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

\n
import { signInWithApple } from \"nativescript-ns-apple-signin\";

signInWithApple(
            {
                scopes: [\"EMAIL\",\"FULLNAME\"]
            })
            .then(credential => {
                console.log(\"Signed in, user: \" + credential.user);
                console.log(\"Signed in, user: \" + credential.email);
                console.log(\"Signed in, user: \" + JSON.stringify(credential.fullName));
                this.user = credential.user;
            })
            .catch(err => console.log(\"Error signing in: \" + err));
\n

getSignInWithAppleState

\n

If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

\n
import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

const user: string = \"the id you got back from the signInWithApple function\";

getSignInWithAppleState(user)
    .then(state => console.log(\"Sign in state: \" + state))
    .catch(err => console.log(\"Error getting sign in state: \" + err));
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-search":{"name":"nativescript-nbmaterial-search","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of the Material SearchBar

\n

The module implement Material Search Bar on both platforms iOS and Android.\nYou can use it as a modal (fullscreen) or as a simple component.\nIt also display results.

\n

TabLayout extends the nativescript GridLayout

\n
export const searchAdapter: SearchCallback = {
    onCancel() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onClear() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onSubmit() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onText(text) {
        if (text && (text.startsWith(\"N\") || text.startsWith(\"n\"))) {
            for (let i = 0; i < 10; i++) { 
                searchBar.results.push({ label: text + \" \" + i })
            }
        } else {
            while (searchBar.results.length) {
                searchBar.results.pop();
            }
        }
    }
}
let searchBar =  page.getViewById(\"searchbar\");
searchBar.register(searchAdapter)
\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:sea=\"nativescript-nbmaterial-search\">
 \t\t<sea:SearchBarModal id=\"searchbar\">
\t\t\t<sea:SearchBarModal.barTemplate>
\t\t\t\t<sea:SearchBar>
\t\t\t\t\t<sea:SearchField/>
\t\t\t\t\t<sea:SearchIcon text=\"arrow_back\" action=\"cancel\" position=\"left\"/>
\t\t\t\t\t<sea:SearchIcon text=\"mic\" action=\"speech\" position=\"right\"/>
\t\t\t\t\t<sea:SearchIcon text=\"clear\" action=\"clear\" position=\"right\"/>
\t\t\t\t</sea:SearchBar>
\t\t\t</sea:SearchBarModal.barTemplate>
\t\t\t<sea:SearchBarModal.resultTemplate>
\t\t\t\t<StackLayout  paddingTop=\"15\">
\t\t\t\t\t<ListView items=\"{{results}}\"  itemTap=\"searchTap\">
\t\t\t\t\t\t<ListView.itemTemplate>
\t\t\t\t\t\t\t<Label text=\"{{label}}\" textWrap=\"true\" />
\t\t\t\t\t\t</ListView.itemTemplate>
\t\t\t\t\t</ListView>
\t\t\t\t</StackLayout>
\t\t\t</sea:SearchBarModal.resultTemplate>
\t\t</sea:SearchBarModal>
</Page>

}
\n

The Searchbar has this interface:

\n
export interface SearchCallback {
    onClear();
    onCancel();
    onText(text: string);
    onSubmit(text: string);
}
export class SearchBar extends GridLayout {
    callbacks: SearchCallback[];
    register(c: SearchCallback);
    unregister(toDel: SearchCallback);
    cancel();
    clear();
    submit(text: string);
    changed(text: string);
    speech();
}
export class SearchBarModal extends View {
    hide();
    show();
    register(c: SearchCallback);
    unregister(toDel: SearchCallback);
    readonly opened: boolean;
    newPage: Page;
    results: ObservableArray<any>;
}

export class SearchField extends TextField {
    bar: SearchBar;
}
export class SearchIcon extends Label {
    position: \"left\" | \"right\";
    action: \"submit\" | \"cancel\" | \"speech\";
    bar: SearchBar;
}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hyvapetteri/audiobuffer-player":{"name":"@hyvapetteri/audiobuffer-player","version":"1.0.8","license":"Apache-2.0","readme":"

@hyvapetteri/audiobuffer-player

\n
ns plugin add @hyvapetteri/audiobuffer-player
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bytpher/tslint-ns-core":{"name":"@bytpher/tslint-ns-core","version":"1.0.1","license":"MIT","readme":"

TSLint NativeScript Core

\n

Recommended tslint configuration for NativeScript Core applications.

\n

Requirements

\n

This package works with prettier for an quick and easy code format

\n
npm i -D prettier prettier-tslint pretty-quick
\n

Packages:

\n\n

Installation

\n
npm i -D @bytpher/tslint-ns-core
\n

Usage

\n
{
  \"extends\": [\"@bytpher/tslint-ns-core\"]
}
\n

Pre-Commit Hook

\n

You can use husky to configure a pre-commit hook to run pretty-quick

\n
npm i -D husky
\n

Create a .huskyrc.json in the root of yor project and add the following configuration

\n
{
  \"hooks\": {
    \"pre-commit\": \"pretty-quick --staged\"
  }
}
\n

This configuration will run pretty-quick before each commit and formatting the staged files allowing us a seamless code format between all developers working in the project

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-watchos-connector":{"name":"nativescript-watchos-connector","version":"2.0.0","license":"Apache-2.0","readme":"

nativescript-watchos-connector

\n

This is a NativeScript plugin that uses Apple WatchConnectivity to pass and receive data to a companion WatchOS app.

\n

\"\" \"\" \"\"

\n

Prerequisites / Requirements

\n

Before using this plugin, make sure you have followed the NativeScript blog post on Developing a watchOS Extension For Your NativeScript App and iOS WatchOS Applications.

\n

Installation NativeScript 7

\n
npm i nativescript-watchos-connector
\n

Installation prior to NativeScript 7:

\n
npm i nativescript-watchos-connector@1.0.11
\n

Usage

\n

NativeScript Angular

\n
    \n
  1. For this plugin to work you must first add the nativescript-watchos-connector as a provider in your app.module.ts:
    2. \n
\n

TypeScript

\n
import  {  WatchOSConnector  }  from  'nativescript-watchos-connector'

@NgModule({
\tbootstrap: [AppComponent],
\timports: [],
\tproviders: [ WatchOSConnector ],
\tdeclarations: [ AppComponent ],
\tschemas: [ NO_ERRORS_SCHEMA ]
})
\n
    \n
  1. Import the nativescript-watchos-connector plugin:
    2. \n
\n

TypeScript

\n
import  {  WatchOSConnector  }  from  'nativescript-watchos-connector'
\n
    \n
  1. Create an instance of the import in the constructor:
    2. \n
\n

TypeScript

\n
constructor(
\tprivate _watchOSConnector: WatchOSConnector
) {}
\n

Plugin Overview

\n

This is a list of all currently available functions and a brief description of their usage within this plugin.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
createWCSession()Creates a WCSession
watchOSChecker()Checks if the user is on iOS, has an Apple Watch paired and the WatchOS app is installed
checkActivation()Checks if the WCSession is active (if not, session will be activated)
convertInt(value)Return value as Obj-C int
convertDouble(value)Return value as Obj-C double
convertFloat(value)Return value as Obj-C float
sendObjectToWatch('objectKey', object)Send the data to the companion WatchOS App using ApplicationContext
\n

createWCSession()

\n

createWCSession checks if the device can support a WCSession, if so a WCSession will be created.

\n

TypeScript

\n
this.watchOSConnector.createWCSession()
\n

watchOSChecker()

\n

Use watchOSChecker instead of isIOS when working with passing data to the Apple Watch. This checks if the user is on iOS, has an Apple Watch paired and the WatchOS app is installed (returns boolean)

\n

TypeScript

\n
if (this.watchOSConnector.watchOSChecker()) {
// Only run if WatchOS app is avalaible
}
\n

checkActivation()

\n

Checks if the WCSession is active, if not this will activate the current session. This is called in sendObject() to ensure there is an active session.

\n

TypeScript

\n
this.watchOSConnector.checkActivation()
\n

convertInt(value)

\n

Returns the value as a NSNumber with int

\n

TypeScript

\n
this.watchOSConnector.convertInt(2319)
\n

convertDouble(value)

\n

Returns the value as a NSNumber with double

\n

TypeScript

\n
this.watchOSConnector.convertDouble(42.957194)
\n

convertFloat(value)

\n

Returns the value as a NSNumber with float

\n

TypeScript

\n
this.watchOSConnector.convertFloat(882.152)
\n

sendObjectToWatch(objectKey, object)

\n

Sends the data to the companion WatchOS app using updateApplicationContext. You need to pass in a key for the object and an object of Objective-C valid values.

\n

TypeScript

\n
let intValue =  this.watchOSConnector.convertInt(4)
let doubleValue =  this.watchOSConnector.convertDouble(45.1)

let numberObject =  {
\tconvertedInt: intValue,
\tconvertedDouble: doubleValue
}

this.watchOSConnector.sendObject('numberObjectKey', numberObject)
\n

v2.0.0 Release

\n
    \n
  1. Updated to be compatible with NativeScript 7
    2. \n
\n

Future Releases

\n\n

Contributors

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-drop-down":{"name":"nativescript-danem-drop-down","version":"1.0.4","license":"Apache-2.0","readme":"

This repo only supports NativeScript pre-6.0. The latest version of the plugin supporting and tested on the latest version of NativeScript is availble as part of ProPlugins.

\n

NativeScript DropDown widget

\n

A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a UILabel with an inputView set to an UIPickerView which displays the items. For Android it wraps up the Spinner widget.

\n

Screenshot

\n

\"Screenshot

\n

Installation

\n

Run the following command from the root of your project:

\n

tns plugin add nativescript-danem-drop-down

\n

This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Static Properties

\n\n

Instance Properties

\n\n

Methods

\n\n

Usage

\n

You need to add xmlns:dd="nativescript-drop-down" to your page tag, and then simply use <dd:DropDown/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:dd=\"nativescript-drop-down\">
  <GridLayout rows=\"auto, auto, *\" columns=\"auto, *\">
    <dd:DropDown items=\"{{ items }}\" selectedIndex=\"{{ selectedIndex }}\" 
                 opened=\"dropDownOpened\" closed=\"dropDownClosed\" 
                 selectedIndexChanged=\"dropDownSelectedIndexChanged\"
                 row=\"0\" colSpan=\"2\" />
    <Label text=\"Selected Index:\" row=\"1\" col=\"0\" fontSize=\"18\" verticalAlignment=\"bottom\"/>
    <TextField text=\"{{ selectedIndex }}\" row=\"1\" col=\"1\" />
  </GridLayout>
</Page>
\n
// test-page.ts
import observable = require(\"data/observable\");
import observableArray = require(\"data/observable-array\");
import pages = require(\"ui/page\");
import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

var viewModel: observable.Observable;

export function pageLoaded(args: observable.EventData) {
    var page = <pages.Page>args.object;
    var items = new observableArray.ObservableArray();

    viewModel = new observable.Observable();

    for (var loop = 0; loop < 20; loop++) {
        items.push(\"Item \" + loop.toString());
    }

    viewModel.set(\"items\", items);
    viewModel.set(\"selectedIndex\", 15);

    page.bindingContext = viewModel;
}

export function dropDownOpened(args: EventData) {
    console.log(\"Drop Down opened\");
}

export function dropDownClosed(args: EventData) {
    console.log(\"Drop Down closed\");
}

export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
    console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
}
\n

Usage in Angular

\n
Migration to 3.0+
\n\n
registerElement(\"DropDown\", () => require(\"nativescript-drop-down/drop-down\").DropDown);`
\n\n
import { DropDownModule } from \"nativescript-drop-down/angular\";
//......
@NgModule({
\t//......
\timports: [
        //......
\t\tDropDownModule,
        //......
\t],
    //......
})
\n
Example Usage
\n
// main.ts
import { NgModule } from \"@angular/core\";
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
import { DropDownModule } from \"nativescript-drop-down/angular\";
import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        DropDownModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
\n
<!-- app.component.html -->
<StackLayout>
    <GridLayout rows=\"auto, auto, *\"
                columns=\"auto, *\">
        <DropDown #dd
                  backroundColor=\"red\"
\t\t  itemsTextAlignment=\"center\"
                  [items]=\"items\"
                  [(ngModel)]=\"selectedIndex\"
                  (selectedIndexChanged)=\"onchange($event)\"
                  (opened)=\"onopen()\"
                  (closed)=\"onclose()\"
                  row=\"0\"
                  colSpan=\"2\"></DropDown>
        <Label text=\"Selected Index:\"
               row=\"1\"
               col=\"0\"
               fontSize=\"18\"
               verticalAlignment=\"bottom\"></Label>
        <TextField [text]=\"selectedIndex\"
                   row=\"1\"
                   col=\"1\"></TextField>
    </GridLayout>
</StackLayout>
\n
// app.component.ts
import { Component } from \"@angular/core\";
import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

@Component({
    selector: \"my-app\",
    templateUrl:\"app.component.html\",
})
export class AppComponent {
    public selectedIndex = 1;
    public items: Array<string>;
 
    constructor() {
        this.items = [];
        for (var i = 0; i < 5; i++) {
            this.items.push(\"data item \" + i);
        }
    }

    public onchange(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
    }

    public onopen() {
        console.log(\"Drop Down opened.\");
    }

    public onclose() {
        console.log(\"Drop Down closed.\");
    }
}
\n
Set the selectedIndex value in Angular
\n

Get an instance of the child drop down component like this:

\n
@ViewChild('dd') dropDown: ElementRef;
// set the index programatically from the parent component
this.dropDown.nativeElement.selectedIndex = <some number from code>
\n

Working with value and display members

\n

It is a common case that you want to have one thing displayed in the drop down and then get some backend value\ntied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida)\nand then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be\nset to either Array of objects or a custom object that implements getItem(index: number): any function and length proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario:

\n
import { ValueList } from \"nativescript-drop-down\";
\n

Then you can set the items property of the DropDown to an instance of ValueList:

\n
let dd = page.getViewById<DropDown>(\"dd\");
let itemSource = new ValueList<string>([
    { value: \"FL\", display: \"Florida\" }, 
    { value: \"MI\", display: \"Michigan\" }
]);
dd.items = itemSource;
\n

This enables you to do things like:
\n1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with:

\n
dd.selectedIndex = itemSource.getIndex(\"FL\");
\n

2.You can get the backend value of what the user selected using:

\n
let selectedValue = itemSource.getValue(dd.selectedIndex);
\n

Demos

\n

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

\n
$ git clone https://github.com/j20mc/Nativescript-Danem-Drop-Down
$ cd nativescript-Danem-Drop-Down
$ npm install
$ npm run demo-ios
\n

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

\n

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mrz-reader":{"name":"nativescript-mrz-reader","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript MRZ Reader

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-mrz-reader
\n

Demo app

\n

If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

\n

API

\n

retrieveData

\n

Initiates conitunous live scanning until it finds a MRZ code.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDescription
callback(data: IMrzData) => voidCallback function that is invoked when scanning is completed or cancelled.
\n
var MrzReader = require(\"nativescript-mrz-reader\");
MrzReader.retrieveData(function (result) {
    console.log(result && result.value || \"Cancelled\");
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@chasexc/nativescript-fingerprint-auth":{"name":"@chasexc/nativescript-fingerprint-auth","version":"8.0.1","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lightweightserver":{"name":"nativescript-lightweightserver","version":"1.0.2","license":"MIT","readme":"

Develop a NativeScript plugin now (w/ TypeScript)

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. npm install -g typescript
    3. \n
  3. cd myplugin
    4. \n
  4. npm run postclone
    5. \n
  5. npm run setup
    6. \n
  6. Get to work.
    7. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-lightweightserver
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Unittesting

\n

This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API execute one of these commands in the plugin root:

\n
npm run test.ios
npm run test.android
\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nointeract-sms":{"name":"nativescript-nointeract-sms","version":"1.0.11","license":"MIT","readme":"

nativescript-nointeract-sms

\n

Sending sms without user interaction.

\n

var smsManager = android.telephony.SmsManager.getDefault();

\n

smsManager.sendTextMessage("0123232332",null,"Hello",null,null);

\n

(Optional) Prerequisites / Requirements

\n

To send sms without user interaction on Android your app must request permission to do so. The following must be in your app's AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.SEND_SMS\" />
\n

iOS sms feature will soon be implemented.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-nointeract-sms
\n

Usage

\n

To use the module you must first require() it from your project's node_modules directory:

\n

After you have a reference to the module you can then call the available methods.

\n
```js\n\tvar temp = require( "nativescript-nointeract-sms" );\n\ttemp.sms(number,message);\n```\n
\n

Methods:

\n

sms(number,message)

\n

Send sms on the background.

\n

Parameters:

\n

number: SMS number to use.

\n

message: String to send.

\n

License

\n

MIT, 2017

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-preprocessor":{"name":"svelte-native-preprocessor","version":"1.0.0","license":"MIT","readme":"

Svelte Native Preprocessor

\n

A pre processor for Svelte-Native.

\n

It performs the following transforms to provide a better developer experience when using Svelte-Native:

\n\n

Installation

\n

Using nativescript-webpack >= 5.0.0 add to your svelte.config.js

\n
const svelteNativePreprocessor = require(\"./svelte-native-preprocessor\");

module.exports = {
    compilerOptions: {
        namespace: 'foreign'
    },
    preprocess: [svelteNativePreprocessor() /*, other preprocesser eg sveltePreprocessor() here */]
}
\n

License

\n

MIT.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-generate-pdf":{"name":"nativescript-generate-pdf","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-generate-pdf

\n

Generate pdf file with a webview and html.

\n

All you need to do is rendering your html with a webview and pass the webview to the plugin.

\n

For iOS, plugin returns the path of the generated PDF.

\n

For Android, it brings up the printer screen where you can save as PDF (Please note the printer screen does not work in simulator, you will need a real device).

\n

Installation

\n
tns plugin add nativescript-generate-pdf
\n

Screenshot

\n

\n

>> Check out the generated pdf<<

\n

Usage

\n

Check out the demo folder.

\n
import { GeneratePdf } from 'nativescript-generate-pdf';

function onWebViewLoaded(args: LoadEventData) {
    webView = (<WebView>args.object).nativeView;
    // For iOS, use the file path returned by createPdf.
    new GeneratePdf().createPdf(webView, 'MyPdfFileName');
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-demo-utils":{"name":"nativescript-demo-utils","version":"1.0.0","license":"Apache-2.0","readme":"

Demo Utils

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-demo-utils
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-woosim-printer-i350":{"name":"nativescript-woosim-printer-i350","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Woosim Printer

\n

\"npm

\n

This plugin integrate your nativescript app with Woosim WSP-i350 printer to print a normal text or a bmp.

\n

Prerequisites / Requirements

\n

You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

\n

Installation

\n
tns plugin add nativescript-woosim-printer-i350
\n

Usage

\n

Create Plugin instance

\n
let printer = new WoosimPrinterI350();
\n

Connect to the printer through:

\n
this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
\n

To Print Normal Text use:

\n
printer.print(\"Hello World\");
\n

To Print a BMP image:

\n
printer.printImg(bmp);
\n

To Print Txt File:

\n
let documents = fs.knownFolders.currentApp();
var myFile = documents.getFile(\"mytextfile.txt\");
this.printer.printTextFile(myFile);
\n

for more information see the demo

\n

API Property

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertytypeDefaultDescription
paperSizeenumPaperSizes.FourInchset the default paper size for the printer
debugbooleanfalseset the plugin in debug mode
\n

API Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescriptionParams
connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
disconnect():voiddisconnect from a printer
print(text: string): voidprint normal texttext : the text you want to print
printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
printTextFile(file: any): void;Print Txt fileFile: NS File
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"imdapro-nativescript-http-formdata":{"name":"imdapro-nativescript-http-formdata","version":"2.0.1","license":"Apache-2.0","readme":"

A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed.

\n

Versions

\n

[2.0.0]\nUpgraded to NS 6.2.0. Fixed Kotlin issue. More here

\n

[1.6.0] Added common response in iOS and Android instead returned by native APIs.\nThanks to virtualbjorn

\n

[1.5.0] Now supports custom headers

\n

Add the plugin

\n
tns plugin add nativescript-http-formdata
\n

Dependencies

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
okhttp3OMGHTTPURLRQ
\n

TypeScript

\n
import { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';
\n

use the ImagePicker plugin or any other.\nhttps://github.com/NativeScript/nativescript-imagepicker

\n
    private test() {
        let context = imagepicker.create({
            mode: \"single\" // use \"multiple\" for multiple selection
        });
        context.authorize()
        .then(function() {
            return context.present();
        })
        .then((selection) => {
          let item = selection[0];
          //UIImage for iOS and android.graphics.Bitmap for Android
          item.getImageAsync(async (image, error) => {
            let fd = new TNSHttpFormData();
    
            //create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name
            //so you can get it on server. Check below how to grab it in ASP.Net MVC
            let params = [];

            let imageData: any;
            if(image) {
                if(image.ios) {
                    imageData = UIImagePNGRepresentation(image);
                } else {
                    //can be one of these overloads https://square.github.io/okhttp/3.x/okhttp/okhttp3/RequestBody.html
                    let bitmapImage: android.graphics.Bitmap = image;
                    let stream = new java.io.ByteArrayOutputStream();
                    bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                    let byteArray = stream.toByteArray();
                    bitmapImage.recycle();

                    imageData = byteArray;
                }
            }
            let param: TNSHttpFormDataParam = {
                data: imageData,
                contentType: 'image/png',
                fileName: 'test.png',
                parameterName: 'file1'
            };
            params.push(param);
            let param2: TNSHttpFormDataParam = {
              data: \"John Doe\",
              parameterName: \"firstName\"
            };
            params.push(param2);
    
            try {
                const response: TNSHttpFormDataResponse = await fd.post('http://10.10.10.149:10025/home/fileupload', params, {
                    headers: {
                        test1: \"test1 value\",
                        \"x-version-no\": \"2.0\"
                    }
                });
                console.log(response);
            } catch (e) {
                console.log(e);
            }
          });
        }).catch(function (e) {
            console.log(e);
        });
    }
\n

Now on server to grab the file(s) in ASP.Net MVC, you can follow https://stackoverflow.com/a/16256106/859968 or following

\n
[HttpPost]
//file1 and file2 are parameters name as given in NativeScript object. They must match
public ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)
{
    //grab your headers
    var headers = Request.Headers;
    if (file1 != null)
    {
        string pic = System.IO.Path.GetFileName(file1.FileName);
        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
        // file is uploaded
        file1.SaveAs(path);
    }
    if (file2 != null)
    {
        string pic = System.IO.Path.GetFileName(file2.FileName);
        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
        // file is uploaded
        file2.SaveAs(path);
    }

    // after successfully uploading redirect the user
    return RedirectToAction(\"Index\", \"Home\");
}
\n

TNSHttpFormDataResponse Properties

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-physics-js":{"name":"nativescript-physics-js","version":"2.0.1","license":"MIT","readme":"

PhysicsJS for NativeScript

\n

This is a NativeScript renderer of the PhysicsJS library.

\n

Installation

\n
tns plugin add nativescript-physics-js
\n

Usage

\n

In the XML markup (main-page.xml):

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    <!-- Definte the container for the phisics scene -->
    <GridLayout id=\"container\" width=\"300\" height=\"300\" backgroundColor=\"lightgreen\">
    
        <!-- Label for meta info is note requiered -->
        <Label id=\"meta\"/>
    </GridLayout>
</Page>
\n

In JavaScript (main-page.js):

\n
var Physics = require(\"nativescript-physics-js\");

var init = false;
function pageLoaded(args) {
    // Prevent double initialization
    if (init) {
        return;
    }
    
    // Get references to container and meta-info views
    var page = args.object;
    var container = page.getViewById(\"container\");
    var metaText = page.getViewById(\"meta\");
    
    // Create physics world and configure NS renderer
    var world = Physics();
    world.add(Physics.renderer('ns', {
        container: container,
        metaText: metaText,
        meta: true
    }));
    
    // Add bodies
    world.add(Physics.body('circle', {
        x: 80,
        y: 50,
        radius: 15,
        styles: { image: \"~/images/ns-logo.png\" }
    }));

    // Add behaviors
    world.add([
        Physics.behavior('edge-collision-detection', { aabb: Physics.aabb(0, 0, 300, 300) }),
        Physics.behavior('body-collision-detection'),
        Physics.behavior('body-impulse-response'),
        Physics.behavior('sweep-prune'),
        Physics.behavior('constant-acceleration') // Gravity
    ]);

    // Start ticking...
    world.on('step', function () { world.render() });
    setInterval(function () { world.step(Date.now()); }, 20);
}
exports.pageLoaded = pageLoaded;
\n

Examples

\n

Code of the demo here.

\n

More demos on the PhysicsJS site.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-modal":{"name":"nativescript-image-modal","version":"2.1.5","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-image-modal
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-appbar":{"name":"nativescript-nbmaterial-appbar","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript implementation of the Material AppBarLayout

\n

The module implement AppBarLayout on both iOS and Android.\nThe layout extends the nativescript GridLayout.\nUse "nativescript-nbmaterial-coordinator" to make animation effects like sticky header or hide header on scroll.\nAppBarIcon and AppBarTitle extends nativescript Label.\nYou can use a font library like material-icons or font-awesome.

\n
  <!--
The markup in NativeScript apps contains a series of user interface components, each
of which NativeScript renders with a platform-specific iOS or Android native control.
You can find a full list of user interface components you can use in your app at
https://docs.nativescript.org/ui/components.
-->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
xmlns:app=\"nativescript-nbmaterial-appbar\" navigatingTo=\"onNavigatingTo\">
\t <GridLayout rows=\"*\" columns=\"*\" id=\"root\">  
\t\t<app:AppBarLayout columns=\"auto,*,auto,auto\" rows=\"auto,auto\" id=\"actionbar\">
\t\t\t<app:AppBarIcon text=\"list\" col=\"0\"/>
\t\t\t<app:AppBarTitle text=\"My Application\" col=\"1\"/>
\t\t\t<app:AppBarIcon text=\"notifications\" col=\"2\"/>
\t\t\t<app:AppBarIcon text=\"search\" col=\"3\" tap=\"openSearch\"/> 
\t\t</app:AppBarLayout>  
\t</GridLayout>
</Page>

}
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-brother-printers":{"name":"nativescript-brother-printers","version":"1.8.0","license":"Apache-2.0","readme":"

nativescript-brother-printers

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-brother-printers
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iqkeyboardmanager-ns":{"name":"nativescript-iqkeyboardmanager-ns","version":"1.0.3","license":{"type":"MIT"},"readme":"

NativeScript IQKeyboardManager Plugin

\n

NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

\n

\"Example

\n

Installation

\n
$ tns plugin add nativescript-iqkeyboardmanager
\n

Usage

\n

That's it! IQKeyboardManager takes care of all initialization when your app starts up by default.

\n

Documentation

\n

For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ezaudio":{"name":"nativescript-ezaudio","version":"1.1.7","license":{"type":"MIT","url":"https://github.com/NathanWalker/nativescript-ezaudio/blob/master/LICENSE"},"readme":"

\"alt

\n

A NativeScript plugin for the simple, intuitive audio framework for iOS.\nEZAudio

\n\n

Install

\n
npm install nativescript-ezaudio --save
\n

Usage

\n

IMPORTANT: Make sure you include xmlns:ez="nativescript-ezaudio" on the Page element

\n
// main-page.xml
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:ez=\"nativescript-ezaudio\"
  loaded=\"pageLoaded\">
  <AbsoluteLayout width=\"100%\" height=\"100%\">
    <ez:AudioPlot 
      class=\"audioPlot\" 
      plotColor=\"{{audioPlotColor}}\" 
      plotType=\"{{audioPlotType}}\" 
      fill=\"{{audioPlotFill}}\" 
      mirror=\"{{audioPlotMirror}}\" 
      bufferData=\"{{audioPlotBufferData}}\" />
    <Button text=\"{{btnTxt}}\" tap=\"{{toggleCurrentTrack}}\" />
  </AbsoluteLayout>
</Page>

// app.css
.audioPlot {
  width:100%;
  height:100%;
  background-color: #000;
  top:0;
  left:0;
}
button {
  font-size: 22;
  horizontal-align: center;
  margin:20px 0;
  color:#FFF803;
  top:20;
  left:0;
  width:100%;
}

// main-page.ts
import {AudioDemo} from \"./main-view-model\";

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = new AudioDemo(page);
}
exports.pageLoaded = pageLoaded;

// main-view-model.ts
import {Observable} from 'data/observable';
import {TNSEZAudioPlayer} from 'nativescript-ezaudio';

export class AudioDemo extends Observable {
  public btnTxt: string = 'Play Track';
  
  // AudioPlot
  public audioPlotColor: string = '#FFF803';
  public audioPlotType: string = 'buffer';
  public audioPlotFill: boolean = true;
  public audioPlotMirror: boolean = true;
  public audioPlotBufferData: any;
  
  // internal
  private _player: any;
  private _currentTrackIndex: number = 0;
  private _tracks: Array<string> = [
    `any-mp3-you-like.mp3`,
  ];

  constructor(page: any) {
    super();
    this._player = new TNSEZAudioPlayer(true);
    this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
      this.set('audioPlotBufferData', {
        buffer: eventData.data.buffer,
        bufferSize: eventData.data.bufferSize
      });
    });
  }

  public toggleCurrentTrack() {
    this._player.togglePlay(this._tracks[this._currentTrackIndex]);
    this.toggleBtn();  
  }
  
  private toggleBtn() {
    this.set(`btnTxt`, `${this._player.isPlaying() ? 'Stop' : 'Play'} Track`);
  }
}
\n

Screenshots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 1Sample 2
\"Sample1\"\"Sample2\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Sample 3Sample 4
\"Sample3\"\"Sample4\"
\n

TNSEZAudioPlayer

\n

AudioPlayer based on EZAudioPlayer.

\n

Creating:

\n
// Option 1: simple
this._player = new TNSEZAudioPlayer();

// Option 2: advanced
// passing true to constructor will let the player know it should emit events
this._player = new TNSEZAudioPlayer(true);

// it allows you to listen to events like so:
this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
  this.set('audioPlotBufferData', {
    buffer: eventData.data.buffer,
    bufferSize: eventData.data.bufferSize
  });
});
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
togglePlay(fileName?: string, reloadTrack?: boolean): voidAllows toggle play/pause on a track as well as reloading the current track or reloading in a new track. First time will always load the track and play. fileName represents the path to the file in your resources. reloadTrack can be used to reload current track or load a new track.
pause(): voidPause track
isPlaying(): booleanDetermine whether player is playing a track
duration(): numberLength in seconds
formattedDuration(): stringFormatted duration in '00:00'
totalFrames: numberTotal number of frames in the loaded track
formattedCurrentTime: stringFormatted current time in '00:00'
setCurrentTime(time: number): voidSet the current time via a frame number
seekToFrame(frame: number): voidSeek playhead to a given frame number
volume(): numberGet the current volume
setVolume(volume: number): voidSet the volume. Must be between 0 - 1.
pan(): numberGet current pan settings
setPan(pan: number): voidSet pan left/right. Must be between -1 (left) and 1 (right). 0 is default (center).
device(): anyGet current output device
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
audioBufferWhen audio file is playing, get the buffer and bufferSize to set an AudioPlot's bufferData
positionCurrent frame number
reachedEndWhen the end of the file is reached
changeAudioFileWhen the audio file is changed or set
changeOutputWhen the output device is changed
changePanWhen the pan is changed
changeVolumeWhen the volume is changed
changePlayStateWhen the player state changes, ie. play/pause
seekedWhen the audio file has been seeked to a certain frame number
\n

TNSEZRecorder

\n

Recorder based on EZRecorder.

\n

Creating:

\n
this._recorder = new TNSEZRecorder();

// it allows you to listen to events like so:
this._recorder.delegate().audioEvents.on('audioBuffer', (eventData) => {
  this.set('audioPlotBufferData', {
    buffer: eventData.data.buffer,
    bufferSize: eventData.data.bufferSize
  });
});
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
record(filePath: string): voidRecord a .m4a file. Pass in an absoulte filePath.
stop(): voidStop recording
isRecording(): booleanDetermine whether recorder is recording
deviceInputs(): Array<any>Collection of input devices
setDevice(device:any): voidSet the input device
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
audioBufferWhile recording, get the buffer and bufferSize to set an AudioPlot's bufferData
recordTimeCurrent recording time
\n

UI Components

\n

AudioPlot

\n

Displays an audio waveform and provides attributes to modify it's display.

\n

Example:

\n
<ez:AudioPlot plotColor=\"#fff\" plotType=\"buffer\" fill=\"true\" mirror=\"true\" bufferData=\"{{audioPlotBufferData}}\" />
\n

Attributes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
plotColor: stringColor of waveform. Any rgb hex value, ie. #fff
plotType: stringbuffer or rolling
fill: booleanMakes waveform solid with color. When false, it appears more like lines.
mirror: booleanWhether to mirror the waveform top/bottom.
bufferData: ObjectAn Object representing the audio file's buffer and bufferSize. See example implementation
\n

Contributors

\n\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-youtube":{"name":"nativescript-open-youtube","version":"1.2.3","license":"MIT","readme":"

NativeScript Open Youtube

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-open-youtube
\n

Usage

\n
JavaScript
\n
// require the plugin
var Youtube = require(\"nativescript-open-youtube\").Youtube;

// instantiate the plugin
var youtube = new Youtube();

youtube.open('VypbgNAsqos');
\n
TypeScript
\n
// require the plugin
import { Youtube } from \"nativescript-open-youtube\";

// instantiate the plugin
let youtube = new Youtube();

youtube.open('VypbgNAsqos');
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescriptvueuse":{"name":"nativescriptvueuse","version":"0.0.3","license":"MIT","readme":"

Doc

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-black-and-white":{"name":"nativescript-image-black-and-white","version":"1.0.5","license":"Apache-2.0","readme":"

nativescript-image-black-and-white

\n

This plugin allows you to put an image in black and white (also called gray scale filter). It is using native iOS and Android features, so it is very nice in terms of performance and it does not contain any third-party library so it is very small.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OriginalModified
\"ios-before\"\"ios-after\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OriginalModified
\"android-before\"\"android-after\"
\n

Installation

\n
tns plugin add nativescript-image-black-and-white
\n

Usage

\n
import { Image } from 'tns-core-modules/ui/image';
import { ImageBlackAndWhite } from 'nativescript-image-black-and-white';

const image: Image = ...; // Initialize or get your image
const imageBlackAndWhite = new ImageBlackAndWhite();
imageBlackAndWhite.blackAndWhite(image);
\n

Do not hesitate to look at the demo for a working example (screenshots come from there).

\n

API

\n

This library is very simple, you create a new instance of ImageBlackAndWhite, you call the only method which is blackAndWhite with a Nativescript Image as parameter.

\n
class ImageBlackAndWhite {
    blackAndWhite(img: Image): void;
}
\n

Thanks

\n

Thanks to NativeScript team for the the plugin-seed and demo app template.

\n

Thanks to Brad Martin for its implementation of nativescript-image-filters.

\n

License

\n

Most of the code comes from NativeScript team (plugin-seed and demo app) :\nApache License Version 2.0, January 2004

\n

iOS implementation comes from nativescript-image-filters released by Brad Martin under MIT License.

\n

My implementation for Android is under WTFPL.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pixi":{"name":"nativescript-pixi","version":"1.0.0-alpha1","license":"Apache-2.0","readme":"

nativescript-pixi

\n

\"npm\"\n\"npm\"\n\"Build

\n

Installation

\n
npm i three nativescript-pixi
\n

Usage

\n
<GridLayout width=\"100%\" height=\"100%\">
         <canvas:TNSCanvas width=\"100%\" height=\"100%\" id=\"canvas\" ready=\"onReady\"/>
</GridLayout>
\n
import * as PIXI from \"pixi.js\";
import { TNSPIXIApplication } from \"nativescript-pixi\";
// Create the Application by passing the canvas view object to it
 function onReady(args) {
   const canvas = args.object;
   const app = new TNSPIXIApplication({
           canvas,
           backgroundColor: 0x1099bb,
       });
       app.loader.add(\"bg_grass\", \"~/assets/images/bg_grass.jpg\").load(build);
   
       function build() {
           // Create a new texture
           const texture = app.loader.resources.bg_grass.texture;
   
           // Create the simple plane
           const verticesX = 10;
           const verticesY = 10;
           const plane = new PIXI.SimplePlane(texture, verticesX, verticesY);
   
           plane.x = 100;
           plane.y = 100;
   
           app.stage.addChild(plane);
   
           // Get the buffer for vertice positions.
           const buffer = plane.geometry.getBuffer(\"aVertexPosition\") as any;
   
           // Listen for animate update
           app.ticker.add((delta) => {
               // Randomize the vertice positions a bit to create movement.
               for (let i = 0; i < buffer.data.length; i++) {
                   buffer.data[i] += Math.random() - 0.5;
               }
               buffer.update();
           });
       }
}
\n

E.G Output

\n

\"Output\"

\n

E.G Output

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"digitaltown-nativescript-card-io":{"name":"digitaltown-nativescript-card-io","version":"1.0.1","license":"Apache-2.0","readme":"

nativescript-card-io

\n

nativescript-card-io provides fast, easy credit card scanning in mobile apps.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-card-io
\n

Usage

\n
import { CardIo } from 'nativescript-card-io';

let cardIo = new CardIo();

cardIo.scan({
    android: {
        requireExpiry: true,
        requireCvv: true,
        requirePostalCode: false,
        returnCardImage: true
    }
}).then((result: CreditCard) => {
    console.log(\"RESULT >>> \", result);
}, error => {
    console.log(\"ERROR >>> \", error);
});
\n

API

\n

scan(options): Promise;

\n

Start the scanning process

\n

Options format

\n

Everything that has '?' is optional

\n

Scan Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
android?: AndroidOptionSet Android Options
ios?: anySet iOS Options
\n

Android Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
noCamera?: booleanDefaults to false.If set, the card will not be scanned with the camera.
requireExpiry?: booleanDefaults to false.If set to false, expiry information will not be required.
unblurDigits?: numberDefaults to -1 (no blur).How many of the Card number digits NOT to blur on the resulting image. Setting it to 4 will blur all digits except the last four.
scanExpiry?: booleanDefaults to true.If set to true, and requireExpiry is true, an attempt to extract the expiry from the card image will be made.
requireCvv?: booleanDefaults to false.If set, the user will be prompted for the card CVV.
requirePostalCode?: booleanDefaults to false.If set, the user will be prompted for the card billing postal code.
restrictPostalCodeToNumericOnly?: booleanDefaults to false.If set, the postal code will only collect numeric input. Set this if you know the expected country's postal code has only numeric postal codes.
requireCardholderName?: booleanDefaults to false.If set, the user will be prompted for the cardholder name.
suppressManualEntry?: booleanDefaults to false.Removes the keyboard button from the scan screen.
useCardioLogo?: booleanDefaults to false.If set, the card.io logo will be shown instead of the PayPal logo.
hideCardioLogo?: booleanDefaults to false.When set to true the card.io logo will not be shown overlaid on the camera.
languageOrLocale?: stringThe preferred language for all strings appearing in the user interface. If not set, or if set to null, defaults to the device's current language setting. Can be specified as a language code ("en", "fr", "zh-Hans", etc.) or as a locale ("en_AU", "fr_FR", "zh-Hant_TW", etc.).
usePaypalActionbarIcon?: booleanUse the PayPal icon in the ActionBar.
keepApplicationTheme?: booleanIf this value is set to true, and the application has a theme, the theme will be set to the theme of the application.
guideColor?: stringDefaults to green.Changes the color of the guide overlay on the camera.
suppressConfirmation?: booleanIf this value is set to true the user will not be prompted to confirm their card number after processing.
suppressScan?: booleanOnce a card image has been captured but before it has been processed, this value will determine whether to continue processing as usual.
returnCardImage?: booleanIf this value is set to true the card image will be return as ImageSource
\n

Result Option

\n

Credit Card

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
cardType: CardTypeGet Card CardType Details
formattedCardNumber: stringGet the formatted Card Number
lastFourDigitsOfCardNumber: stringGet the last Four Digit on the Card Number
redactedCardNumber: stringGet Redacted Card Number
isExpiryValid: booleanGet a boolean which indicate the validity of the Card
content: stringGet the Card Details
\n

Card Type

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
cvvLength: numberGet cvv number length (4 for Amex, 3 for others, -1 for unknown)
displayName(languageOrLocale: string): stringGet the Card Display Name
imageBitmap: anyGet The ImageBitmap image after scan if returnCardImage is true
numberLength: numberGet Card Number Length e.g(15 for AmEx, -1 for unknown, 16 for others.)
content: stringGet Card Type Details
\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martin-juul/nativescript-astreamer":{"name":"@martin-juul/nativescript-astreamer","version":"1.0.0","license":"MIT","readme":"

nativescript-astreamer

\n
\n

Forked from https://github.com/nstudio/nativescript-audio

\n

Changes

\n\n

Installation

\n

tns plugin add nativescript-astreamer

\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Usage

\n

TypeScript Example

\n
import { NSAudioPlayer } from 'nativescript-astreamer';

export class YourClass {
  private player: NSAudioPlayer;

  constructor() {
    this.player = new NSAudioPlayer();
    this.player.debug = true; // set true to enable TNSPlayer console logs for debugging.

    (async () => {
      await this.player.initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })

      // iOS: duration is in seconds
      // Android: duration is in milliseconds
      const duration = this.player.getAudioTrackDuration();
      console.log(`duration: ${duration}`);
     })();
  }

  public togglePlay() {
    if (this.player.isAudioPlaying()) {
      this.player.pause();
    } else {
      this.player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

API

\n

Player

\n

NSAudioPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

NSAudioPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

MIT

\n

Demo App

\n

:no_entry_sign:

\n

The demo has not been migrated yet.

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-instagram-share":{"name":"nativescript-instagram-share","version":"1.0.5","license":"Apache-2.0","readme":"

Nativescript Instagram Share(Currently for Android)

\n

Instagram share plugin will allow you to directly share image to instagram app.

\n

Requirements

\n

working only for android

\n

Installation

\n
tns plugin add nativescript-instagram-share
\n

TypeScript support

\n

And do yourself a favor by adding TypeScript support to your nativeScript app:

\n
tns install typescript
\n

Now you can import the plugin as an object into your .ts file as follows:

\n
import { shareInstagram } from 'nativescript-instagram-share';
\n

Usage

\n
```\n    import * as imageSource from "tns-core-modules/image-source";\n    let url=imageUrl; //image url if you want to share remote image\n    let imageSrc:imageSource.ImageSource;\n    getImage(url).then((r)=> {\n        //// Argument (r) is ImageSource!\n        console.log("Image download  complete")\n        imageSrc=r;\n    }, (e)=> {\n        //// Argument (e) is Error!\n    });\n    shareInstagram(imageSrc).then((r)=>{\n        console.log("instagram open succcessfully");\n    }).catch((e)=>{\n        console.log("instagram is not installed");\n    });\n```\n
\n

ToDo

\n

implement IOS version.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-image-cache":{"name":"@ticnat/nativescript-image-cache","version":"1.0.7","license":"Apache-2.0","readme":"

#Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDImageCacheCache library for iOS and Facebook Fresco for android.\nSupports local Images.

\n

License

\n

Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (m.opada.albosh@gmail.com).

\n

Installation NS8

\n
tns plugin add @ticnat/nativescript-image-cache\n
\n

Installation NS7

\n
tns plugin add@ticnat/nativescript-image-cache@1.0.1\n
\n

** Tested on NativeScript 7.+ on VanillaJS, if any problems while running on previous versions, please place an issue.**

\n

Usage in Vue

\n

In main.js:

\n
const Vue = require('nativescript-vue'); // you already have something like this
Vue.registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache); // now add this
\n

Then in any .vue file:

\n
<OtherMarkup>
  <ImageCache src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></ImageCache>
</OtherMarkup>
\n

Usage in Angular

\n
\n

⚠️ This was changed in plugin version 5.0.0!

\n
\n

In app.module.ts, or any specific module you want to use this plugin:

\n
import { registerElement } from 'nativescript-angular';
registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache);
\n

After initialisation, the markup tag <ImageCache></ImageCache> can be used in templates of components.

\n
<GridLayout rows=\"*\" columns=\"*\">
\t<ImageCache stretch=\"fill\" row=\"0\" col=\"0\" placeholder=\"localPlaceholderImgorResUrl\" src=\"#your image url here\"> </ImageCache>
</GridLayout>
\n

Caching the images

\n\n

Check if image is loading

\n\n

The Markup

\n
    <ImageCache stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </ImageCache>\n
\n

The Backing Component Class Snippet

\n
     @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
\n

Clearing the cache

\n

Import the module, call the method clearCache() , default time is for SDImageCacheCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

\n
 import {clearCache} from "@ticnat/nativescript-image-cache";\n clearCache();\n
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
import {setCacheLimit} from "@ticnat/nativescript-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
\n

Usage in VanillaJS/TypeScript apps

\n

IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

\n

Initialising on android - in app.js

\n
var imageCache = require("@ticnat/nativescript-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
\n

After initialisation, add the namespace attribute xmlns:IC="@ticnat/nativescript-image-cache" to the opening page tag of xml. The markup tag <IC:ImageCache></IC:ImageCache> should be used to denote images.

\n
    <Page xmlns:IC=\"@ticnat/nativescript-image-cache\">
        <GridLayout rows='*' columns='*'>
            <IC:ImageCache stretch=\"fill\" row=\"0\"
             col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
             src=\"#image-url\">
             </IC:ImageCache>
        </GridLayout>
    </Page>
\n

Caching the images

\n\n

Check if image is loading

\n\n
var imageCacheModule=require(\"@ticnat/nativescript-image-cache\");

var myImage1 = page.getViewById(\"my-image-1\"),
    isLoading = myImage1.isLoading;
\n

Clearing the cache

\n\n
var imageCacheModule=require(\"@ticnat/nativescript-image-cache\");
imageCacheModule.clearCache();
\n

Setting custom cache purge time

\n

Default cache purge time can be specified in number of days.

\n
var imageCache = require("@ticnat/nativescript-image-cache");\n
\n

/_ Add the code component at a a proper hook _/\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);

\n

for android, you need to initialize in the application onlaunch event before clearing the cache

\n

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ignacioplugins/nativescript-aws-cognito":{"name":"@ignacioplugins/nativescript-aws-cognito","version":"1.0.8","license":"Apache-2.0","readme":"

@ignacioplugins/nativescript-aws-cognito

\n
ns plugin add @ignacioplugins/nativescript-aws-cognito
\n

This is a port of https://github.com/papmodern/nativescript-cognito so that it works with NS 8\nGreat work @papmodern!

\n

Usage

\n

See demo apps

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sfamc/nativescript-microsoft-appcenter":{"name":"@sfamc/nativescript-microsoft-appcenter","version":"1.0.2","license":"Apache-2.0","readme":"

@sfamc/nativescript-microsoft-appcenter

\n
ns plugin add @sfamc/nativescript-microsoft-appcenter
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-sdk":{"name":"nativescript-google-places-sdk","version":"2.1.1","license":"MIT","readme":"

NativesScript Google Place SDK

\n

A NativesScript plugin for Google Places SDK.

\n

Documentation:

\n\n

Requirements

\n

Enable Google Places API if you have not already done so.

\n

Configure skip library check in tsconfig.json

\n
{
  \"compilerOptions\": {
    ...
    \"skipLibCheck\": true
    ...
  }
}
\n

Installation

\n
tns plugin add nativescript-google-place-sdk
\n

Usage

\n

NativeScript

\n

Initialize the Place SDK

\n

app.ts

\n
...
Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
...
\n

Show the Autocomplete UI

\n

my-awesome-page.xml

\n
<Button text=\"Search\" tap=\"search()\"></Button>
\n

my-awesome-page.ts

\n
export function search(): void {
    PlaceAutocomplete.show()
    .then(
        (result) => {
            if (result) {
                console.log('Place Details:', result);
            }
        },
        (err) => console.error(err)
    );
}
\n

NativeScript + Angular

\n

Initialize the Place SDK

\n

app.component.ts

\n
@Component({
    moduleId: module.id,
    selector: 'ns-app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
    }
}
\n

Show the Autocomplete UI

\n

my-awesome.component.html

\n
<Button [text]=\"Search\" (tap)=\"search()\"></Button>
\n

my-awesome.component.ts

\n
@Component({
    moduleId: module.id,
    selector: 'ns-awesome',
    templateUrl: 'my-awesome.component.html'
})
export class MyAwesomeComponent {
    search(): void {
        PlaceAutocomplete.show()
        .then(
            (result) => {
                if (result) {
                    console.log('Place Details:', result);
                }
            },
            (err) => console.error(err)
        );
    }
}
\n

API

\n

Place

\n

initialize(apiKey)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
apiKeyundefinedGoogle Place API key
\n

Example

\n
Place.initialize('GOOGLE_PLACE_API_KEY');
\n

Autocomplete

\n

show(options)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
fieldsundefinedDefine the types of field to retrieve. By default will retrieve all types.
iosundefinediOS related options
ios.appearanceundefinediOS appearance options. See documentation for more info.
ios.appearance.primaryTextColorundefinedPrimary text color
ios.appearance.primaryTextHighlightColorundefinedPrimary text highlight color
ios.appearance.secondaryTextColorundefinedSecondary text color
ios.appearance.tableCellBackgroundColorundefinedTable cell background color
ios.appearance.tableCellSeparatorColorundefinedTable cell separator color
ios.appearance.tintColorundefinedTint color
locationBias.southwestundefinedSouthwest bound
locationBias.northeastundefinedNortheast bound
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FieldData TypeDescription
addressstringAddress
idstringId
lat_lngobjectCoordinates
namestringPlace name
phone_numberstringPhone number
price_levelnumberPricing
ratingnumberRating
user_ratings_totalnumberTotal ratings
utc_offset_minutesnumberUTC offset in minutes
viewportobjectViewport
website_uristringURL
\n

Example

\n
PlaceAutocomplete.show({ fields: ['name'] })
.then(
    (result) => {
        if (result) {
            console.log('Place Details:', result);
        }
    },
    (err) => console.error(err)
);
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-nearby":{"name":"nativescript-google-nearby","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript Google Nearby plugin (Un Official)

\n

Expose the basic P2P messaging provided by Google Nearby within a Nativescript plugin, currently we only support iOS but Android support is pending.

\n

Installation

\n
tns plugin add nativescript-google-nearby
\n

Usage

\n

API

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-health-data":{"name":"@enduco/nativescript-health-data","version":"1.0.5","license":"Apache-2.0","readme":"

@enduco/nativescript-health-data

\n
ns plugin add @enduco/nativescript-health-data
\n

This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

\n

Prerequisites

\n

Android

\n

Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

\n
keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
\n
\n

Note that the default (debug) keystore password is empty.

\n
\n

iOS

\n

Make sure you enable the HealthKit entitlement in your app ID.

\n

License

\n

Apache License Version 2.0

\n

API

\n

The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

\n

This is how you can import and instantiate the plugin, all examples expect this setup:

\n
import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

export class MyHealthyClass {
  private healthData: HealthData;

  constructor() {
    this.healthData = new HealthData();
  }
}
\n

isAvailable

\n

This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

\n
this.healthData.isAvailable(false)
    .then(available => console.log(available));
\n

isAuthorized

\n

This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

\n\n
\n

iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

\n
\n
this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
    .then(authorized => console.log(authorized));
\n

requestAuthorization

\n

This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

\n

Note that this plugin currently only supports reading data, but that will change.

\n
const types: Array<HealthDataType> = [
\t{name: \"height\", accessType: \"write\"},
\t{name: \"weight\", accessType: \"readAndWrite\"},
\t{name: \"steps\", accessType: \"read\"},
\t{name: \"distance\", accessType: \"read\"}
];

this.healthData.requestAuthorization(types)
    .then(authorized => console.log(authorized))
    .catch(error => console.log(\"Request auth error: \", error));
\n

query

\n

Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

\n

By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

\n

If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

\n
this.healthData.query(
    {
      startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      endDate: new Date(), // now
      dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
      unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
      aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
      sortOrder: \"desc\" // optional, default \"asc\"
    })
    .then(result => console.log(JSON.stringify(result)))
    .catch(error => this.resultToShow = error);
\n

startMonitoring (iOS only, for now)

\n

If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

\n

Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

\n
\n

Background notifications probably don't work on the iOS simulator, so please test those on a real device.

\n
\n
this.healthData.startMonitoring(
    {
      dataType: \"heartRate\",
      enableBackgroundUpdates: true,
      backgroundUpdateFrequency: \"immediate\",
      onUpdate: (completionHandler: () => void) => {
        console.log(\"Our app was notified that health data changed, so querying...\");
        this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
      }
    })
    .then(() => this.resultToShow = `Started monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

stopMonitoring (iOS only, for now)

\n

It's best to call this method in case you no longer wish to receive notifications when health data changes.

\n
this.healthData.stopMonitoring(
    {
      dataType: \"heartRate\",
    })
    .then(() => this.resultToShow = `Stopped monitoring heartRate`)
    .catch(error => this.resultToShow = error);
\n

Available Data Types

\n

With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

\n

Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

\n

The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pcl-ingenico":{"name":"nativescript-pcl-ingenico","version":"1.0.4","license":"Apache-2.0","readme":"

Nativescript PCL - Ingenico AddOn

\n

Este es un plugin creado por Netcom S.A.S para la conexión y comunicación entre dispositivos Ingenico y aplicaciones realizadas con Nativescript.\nSe implementó el Framework para iOS: Add-on PCL for iOS distribuido por Ingenico.

\n

Installación

\n

Para implementar el plugin en un proyecto de Nativescript se debe ejecutar el siguiente código:

\n
tns plugin add nativescript-pcl-ingenico
\n

Uso

\n

Se puede hacer el llamado de la librería realizando la importación de la siguiente manera

\n
```javascript\nimport * as PCLIngenico from "nativescript-pcl-ingenico";\n```)\n
\n

API

\n

TODO

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

Licencia

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@wwwalkerrun/nativescript-ngx-magic":{"name":"@wwwalkerrun/nativescript-ngx-magic","version":"2.0.4","license":"MIT","readme":"

\"Angular\n\"MIT

\n

\"nativescript-ngx-magic\"

\n

Magically drop a NativeScript app into your existing Angular web application and reuse all your code.*

\n

You will be adding NativeScript views, but you already knew that.

\n\n

Install

\n
npm i @wwwalkerrun/nativescript-ngx-magic --save
\n

Usage

\n
    \n
  1. Use Component from @wwwalkerrun/nativescript-ngx-magic instead of @angular/core. Why?
    2. \n
  2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
    3. \n
  3. Run your truly native mobile app with NativeScript!
    4. \n
\n

Example

\n

A sample root component, app.component.ts:

\n
import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}
\n

Then create a .tns.html NativeScript view template for this component, for example:

\n\n
<ActionBar title=\"Magic!\" icon=\"\" class=\"action-bar\">
</ActionBar>
<StackLayout class=\"p-20\">
    <Label text=\"NativeScript is Neat.\" class=\"h1 text-center\"></Label>
</StackLayout>
\n

Then if your component has styleUrls defined, you can create a .tns.css file, for example:

\n\n
// any custom css you want to use with your {N} view
\n

Run for first time!

\n

You will need to have fully completed steps 1 and 2 above.

\n

Run your app in the iOS Simulator with:

\n
npm run start.ios
\n

Run your app in an Android emulator with:

\n
npm run start.android
\n

Welcome to the wonderfully magical world of NativeScript!

\n

How to create NativeScript views

\n

Based on our example above, assume app.component.html looks like this:

\n
<main>
  <div>This is my root component</div>
</main>
\n

You would then create a new file in app.component.tns.html like this:

\n
<StackLayout>
  <Label text=\"This is my root component\"></Label>
</StackLayout>
\n

You can also use platform specific views if desired with the platformSpecific Component metadata:

\n
import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}
\n

Then you could create separate views for iOS and Android:

\n\n

You can learn more about NativeScript view options here.

\n

You can also install helpful view snippets for VS Code here or Atom Editor here.

\n

You can learn more here about how this setup works and why.

\n

Supported Projects

\n\n

Why different Component?

\n

Component from nativescript-ngx-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

\n

The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

\n

You can see more elaborate use cases of this magic with angular-seed-advanced.

\n

Special Note About AoT

\n

Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

\n
import { Component } from '@angular/core';

// just comment this out and use Component from '@angular/core'
// import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  // etc.
\n

After doing the above, running AoT build will succeed. :)

\n

The Component from nativescript-ngx-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ngx-magic. Again this temporary inconvenience may be unnecessary in the future.

\n

Requirements

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hockey-sdk":{"name":"nativescript-hockey-sdk","version":"1.2.0","license":"MIT","readme":"

HockeyApp SDK for NativeScript

\n

A NativeScript plugin for the HockeyApp SDK (iOS and Android)

\n
\n

This plugin installs the HockeyApp SDK in NativeScript projects and provides a common API for using in iOS and Android projects.

\n

How to use

\n

Run the following command in the root of your project:

\n
$ tns plugin add nativescript-hockey-sdk
\n

The SDK wrapper and init mechanism is shamelessly copied from the Fabric plugin. Before running an app with this plug-in, you will need an APP_ID from the HockeyApp service. Visit the HockeyApp website to obtain a key for your app. Enter that key in the AndroidManifest.xml or Info.plist.

\n

iOS

\n

Add the HockeyApp APP_ID to the /app/App_Resources/iOS/Info.plist file:

\n
<key>HockeyAppId</key>
<string>${APP_ID}</string>
\n

The iOS version of this plugin uses the HockeyApp SDK CocoaPod. See the HockeyApp SDK CocoaPod docs for additional configuration options.

\n

NOTE: As of version 1.2.0, this plugin requires XCode 8.3+. If you use an older version of XCode, you may see invalid bitcode version errors when trying to build NativeScript projects that include this plugin.

\n

Using build.xcconfig

\n

On iOS, you also have the option of putting your HockeySDK APP_ID in the build.xcconfig file rather than directly embedding in Info.plst. This can help if, for example, you want to avoid putting SDK keys in source control.

\n

Using the Info.plist syntax above with the ${APP_ID} key, simply add this line to build.xcconfig:

\n
APP_ID = YOUR-HOCKYSDK-APP-ID
\n

During builds, the value from build.xcconfig will replace the ${APP_ID} key in Info.plist.

\n

Android

\n

Add the HockeyApp APP_ID to the /app/App_Resources/Android/AndroidManifest.xml file:

\n
<meta-data android:name=\"net.hockeyapp.android.appIdentifier\" android:value=\"${APP_ID}\" />
\n

Usage

\n

After the plug-in has been installed and the APP_ID has been configured, simply import and init the plugin.

\n
import { HockeyApp } from 'nativescript-hockey-sdk';
...
HockeyApp.init();
HockeyApp.trackEvent(\"LOG_IN\");
\n

To init on app launch, import and init in your app.ts or app.js file in the launchEvent handler:

\n
app.on(app.launchEvent, function(context) {
    HockeyApp.init();
});
\n

If you're using Angular, you could alternatively use the AppModule constructor:

\n
export class AppModule {
  constructor() {
    HockeyApp.init();
    HockeyApp.trackEvent(\"LAUNCH\");
  }
}
\n

Breaking Changes

\n

v1.0.0

\n\n

TODOS

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-progress-notifications":{"name":"nativescript-progress-notifications","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript Progress Notifications(Android)

\n

The Progress Notifications plugin allows your app to show normal and progress notifications during Android app execution. For example notification of file downloading or uploading.

\n

Requirements

\n

working only for android

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add nativescript-progress-notifications
\n

TypeScript support

\n

And do yourself a favor by adding TypeScript support to your nativeScript app:

\n
tns install typescript
\n

Now you can import the plugin as an object into your .ts file as follows:

\n
import * as ProgressNotification from 'nativescript-progress-notification';

// then use it as:
ProgressNotification.dismiss(id);
\n

Usage

\n
```javascript\n    let localNotification=ProgressNotification.show({\n        id:5, //required\n        title:"Progress Notification",\n        message:"Working normal local Notification",\n        ongoing:false,\n    });\n\n    let progressNotification=ProgressNotification.show({\n        id:6, //required\n        title:"progress Notification",\n        message:"Working Progress Notification",\n        ongoing:true,\n        indeterminate:false,\n        progressValue:20\n    });\n\n    let updateProgressNotification=ProgressNotification.update(progressNotification,{\n        progressValue:50\n    });\n\n    let finishProgressNotification=ProgressNotification.update(progressNotification,{\n        progressValue:100,\n        message:"Process Completed",\n        hideProgressBar:true, //set true to hide progressbar otherwise it will be visible\n    });\n\n    //dismiss notification\n    ProgressNotification.dismiss(localNotification.id);\n\n```\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
idrequiredA number so you can easily distinguish your notifications.
title" "The title which is shown in the statusbar.
message" "The text below the title.
ongoingtrueSet whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.
indeterminatefalseongoing notification type indeterminate or not. setting true will show continous running progressbar irrelative to Proress value.
progressValue0set the notification progress when ongoing is true and indeterminate is false.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-square-pos":{"name":"nativescript-plugin-square-pos","version":"1.0.0","license":"MIT","readme":"

nativescript-square-pos

\n

This plugin allows you to accept square payments from your mobile app through the Square POS app. This is an alternative to using the Square API that is only available in a limited number of countries. For now, only Android is implemented and the demo is only available for Angular, your contribution is welcome.

\n

Prerequisites / Requirements

\n

You simply need to Register your application, because the Square POS needs to authenticate the source of the request.

\n

Installation

\n
tns plugin add nativescript-square-pos
\n

Demo Usage

\n

In the ./demo-angular folder:

\n

Android:

\n
tns debug android
\n

Usage in Angular

\n
// test.component.ts
import {
SquarePos,
SquareChargeEventData,
SquareCurrencies,
} from  \"nativescript-square-pos\";

@Component({
selector:  \"Test\",
templateUrl:  \"./test.component.html\",
})

export class  AppComponent {

\tpublic currency: SquareCurrencies = \"CAD\";
\tpublic applicationId: string = \"YOUR_SQUARE_APPLICATION_ID\";
\tpublic squarePos: SquarePos = new  SquarePos(this.applicationId);  

\tpublic result: string = \"\";
\tpublic isAppInstalled: boolean;

\tconstructor(private  ngZone: NgZone) {
\t\t// Add event listeners for transactions
\t\tthis.ngZone.run(() => {
\t\t\tthis.squarePos.on(
\t\t\t\t\"squareChargeUnknownError\",
\t\t\t\tthis.onSquareChargeUnknownError,
\t\t\t\tthis
\t\t\t);

\t\t\tthis.squarePos.on(
\t\t\t\t\"squareChargeSuccess\",
\t\t\t\tthis.onSquareChargeSuccess,
\t\t\t\tthis
\t\t\t);

\t\t\tthis.squarePos.on(
\t\t\t\t\"squareChargeError\",
\t\t\t\tthis.onSquareChargeError,
\t\t\t\tthis
\t\t\t);
\t\t});
\t\tthis.isAppInstalled = this.squarePos.isAppInstalled();
\t}

\tpublic onTransaction(amount: number): void {
\t\ttry {
\t\t\tthis.squarePos.startTransaction(amount, this.currency);
\t\t} catch (e) {
\t\t\tthis.result = \"An error occured while launching Square Point of Sale app.\";
\t\t}
\t}

\tpublic onAppInstall(): void {
\t\tthis.squarePos.openAppInstallation();
\t\tconst onResume = (args) => {
\t\t\tthis.isAppInstalled = this.squarePos.isAppInstalled();
\t\t\tapp.off(app.resumeEvent, onResume);
\t\t};
\t\tapp.on(app.resumeEvent, onResume);
\t}

\tprivate onSquareChargeUnknownError(data: SquareChargeEventData) {
\t\tthis.ngZone.run(() => {
\t\t\tthis.result = \"An unknown error occured. Square Point of Sale was uninstalled or stopped working.\";
\t\t});
\t}

\tprivate onSquareChargeSuccess(data: SquareChargeEventData) {
\t\tthis.ngZone.run(() => {
\t\t\tthis.result = `Transaction ${data.object.success.clientTransactionId} was successfully completed.`;
\t\t});
\t}

\tprivate onSquareChargeError(data: SquareChargeEventData) {
\t\tthis.ngZone.run(() => {
\t\t\tthis.result = `The transaction was not completed. The error was ${data.object.error.code}: ${data.object.error.debugDescription}.`;
\t\t});
\t}
}
\n

License

\n

MIT (see license file)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-share-file":{"name":"@knotes/nativescript-share-file","version":"2.0.1","license":"Apache-2.0","readme":"

Nativescript Share File

\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Installation

\n

Install the plugin in your app.

\n
npm install nativescript-share-file
\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from 'nativescript-share-file';
    import * as fs from 'tns-core-modules/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-slideshow":{"name":"nativescript-na-slideshow","version":"1.5.0","license":"MIT","readme":"

NativeScript NA Slideshow plugin

\n

NOTE! Android is currently not supported.

\n

Installation

\n

$ tns plugin add nativescript-na-slideshow

\n

Usage

\n

XML

\n

Slides can be added manually inside the XML as below:

\n
<AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\">
  <GridLayout backgroundColor=\"#ffffff\">
    <Label text=\"Slide 1\" horizontalAlignment=\"center\" />
  </GridLayout>
  <GridLayout backgroundColor=\"#f2f2f2\">
    <Label text=\"Slide 2\" horizontalAlignment=\"center\" />
  </GridLayout>
  <GridLayout backgroundColor=\"#ffffff\">
    <Label text=\"Slide 3\" horizontalAlignment=\"center\" />
  </GridLayout>
</AbsoluteLayout>
\n

It is important that the slide container is an AbsoluteLayout or else problems will occur. Slides can also, instead of being static like above, be created using an ObservableArray. To do this, the container has to either stay empty - as such:

\n
<AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\" />
\n

… Or an itemTemplate can be initiated through a Repeater:

\n
<AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\">
  <Repeater items=\"{{ slides }}\">
    <Repeater.itemTemplate>
      <GridLayout>
        <Label text=\"{{ text }}\" />
      </GridLayout>
    </Repeater.itemTemplate>
  </Repeater>
</AbsoluteLayout>
\n

Note that when doing it this way, the Repeater.itemsLayout tag will be ignored if ever set. So no need to use that.

\n

Before heading to the JavaScript part, make sure the loaded attribute is set as in the example: loaded="load_slideShow". This is needed for the JavaScript code to turn the container into a slideshow.

\n

JS

\n

Once the XML has been set up, the plugin will now be able to transform the container into a slideshow. To do this, see below:

\n
var NASlideShow = require(\"nativescript-na-slideshow\");

exports.load_slideShow = function(args) {
  var view = args.object;
  var slideShow = new NASlideShow();
  
  slideShow.init(view);
};
\n

Once this has been done, the slideshow is now up and running!

\n

Instance properties

\n

In the JS example above, the init() function used the default properties. Here is a list of all properties that exist (showing default values):

\n
{
  items: false, // An ObservableArray instance.
  itemTemplate: \"<GridLayout />\", // The view template for each slide (has to be written as an XML string). See the Repeater documentation for further information.
  enableBounce: false, // Scroll bouncing disabled by default.
  fallbackWidth: [screen width], // In case the inherited width doesn't load in time.
  fallbackHeight: [screen height], // In case the inherited height doesn't load in time.
  clipToBounds: true, // Similar to \"overflow\" in CSS
  indicators: {
    size: 10, // The indicators' size.
    color: \"#808080\", // The indicators' color.
    activeColor: false, // The active indicator's color.
    borderWidth: 0, // The indicators' border width.
    borderColor: \"#404040\", // The indicators' border color.
    horizontalAlignment: \"center\", // The horizontal alignment of the indicators.
    verticalAlignment: \"bottom\", // The vertical alignment of the indicators.
    iconShadow: false, // Icon shadow. Can be a boolean or an object
    forceVisibility: false, // By default, indicators will only show up if there are 2 slides or more.
    disabled: false // Disable the indicators.
  }
}
\n

The itemTemplate property is special because, according to the Repeater documentation, it has to be a string in XML format.

\n

The fallbackWidth and fallbackHeight properties are sometimes needed when the inherited width and height haven't yet been set during view loaded state.

\n

indicators.iconShadow can be customized by making it an object instead. These are the default properties:

\n
{
  color: \"#000000\", // HEX color
  alpha: 1, // Opacity (1 to 0)
  x: 0, // Horizontal offset
  y: 0, // Vertical offset
  radius: 2 // Radius amount
}
\n

Methods

\n

init()

\n

This must be called to initiate the slideshow view.

\n

init(template, props)

\n\n
var frameModule = require(\"ui/frame\");
var observableArray = require(\"data/observable-array\").ObservableArray;
var container = frameModule.topmost().currentPage.getViewById(\"slideShow\");
var slideShow = new NASlideShow();

slideShow.init(container, {
  items: new ObservableArray(\"Slide 1\", \"Slide 2\", \"Slide 3\"),
  itemTemplate: '<GridLayout><Label text=\"{{ $value }}\" horizontalAlignment=\"center\" /></GridLayout>',
  indicators: {
    forceVisibility: true,
    verticalAlignment: \"top\",
    color: \"#ffffff\"
  }
});
\n
\n

insertSlide()

\n

Call this to insert new slides. Depending on whether the slideshow was initiated using XML only or an ObservableArray instance, the view parameter works a little differently.

\n

insertSlide(slideView, props)

\n\n

XML

\n
var GridLayout = require(\"ui/layouts/grid-layout\").GridLayout;
var Label = require(\"ui/label\").Label;

var slideView = new GridLayout();
var textLabel = new Label();
textLabel.text = \"Slide 4\";
slideView.insertChild(textLabel, 0);

slideShow.insertSlide(slideView, {
  indicator: {
    icon: \"+\",
    float: true
  }
});
\n

ObservableArray

\n
slideShow.insertSlide(\"Slide 4\", {
  indicator: {
    icon: \"+\",
    float: true
  }
});
\n

The props parameter's defaults are:

\n
{
  atIndex: [last] // Inserts the slide at specified index number.
  indicator: {
    icon: false, // Custom icon (or character) instead of a dot.
    fontFamily: false, // The icon font family.
    float: false // Set to true to make the icon float to the right, as in not adjusting the indicators horizontal alignment.
  }
}
\n

The float property is ignored if atIndex is set to anything but the last, or if the slideshow instance has horizontalAlignment set to "right". This is to prevent visual bugs.

\n
\n

removeSlide()

\n

Remove a slide at specified index.

\n

removeSlide(index)

\n\n

To remove the first slide:

\n
slideShow.removeSlide(0);
\n
\n

on()

\n

Event listener for each slide scroll. When a slide has finished scrolling, the event will be called.

\n

on("slideChange", callback)

\n\n
slideShow.on(\"slideChange\", function(eventData) {
  console.log(\"Slide index: \" + eventData.index);
});
\n

The eventData parameter inside the callback function contains the following properties:

\n\n
\n

setSlide()

\n

Sets a new view/value to existing slide.

\n

setSlide(index, value)

\n\n

To set the first slide:

\n
slideShow.setSlide(0, { text: \"Updated content\", backgroundColor: \"#ffffff\" });
\n
\n

scrollToSlide()

\n

Sets a new view/value to existing slide.

\n

scrollToSlide(index, animated)

\n\n

To scroll to the last slide (animated):

\n
slideShow.scrollToSlide(slideShow.getSlidesCount()-1, true);
\n
\n

Other methods

\n\n
\n

Other properties

\n\n

Known issues

\n\n

History

\n

Version 1.5.0 (3 December 2016)

\n\n

Version 1.4.3 (17 October 2016)

\n\n

Version 1.4.2 (16 October 2016)

\n\n

Version 1.4.1 (13 October 2016)

\n\n

Version 1.4.0 (12 October 2016)

\n\n

Version 1.3.2 (16 September 2016)

\n\n

Version 1.3.1 (15 September 2016)

\n\n

Version 1.3.0 (15 September 2016)

\n\n

Version 1.2.0 (12 September 2016)

\n

Apologize for the fast updates (same day, wow). This one has lots of additions:

\n\n

Version 1.1.0 (12 September 2016)

\n\n

Version 1.0.0 (9 September 2016)

\n\n

Credits

\n\n

License

\n

MIT - for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-place-picker":{"name":"nativescript-google-place-picker","version":"1.0.1","license":"MIT","readme":"

NativeScript plugin for Google Place Picker

\n

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Places Picker

\n\n

Prerequisites

\n

iOS - Cocoapods is installed

\n

Android - Latest Google Play services SDK installed

\n

Google Places API Key - Go to the Google Developers Console, create a project, and enable the Google Places API for Android and Google Places API for iOS APIs. Then under credentials, create an API key.

\n

Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-google-place-picker
\n

Setup Google Maps API

\n

Setup Android API Key

\n

Add API key to app manifest(AndroidManifest.xml). Refer to Android/add key

\n

The plugin will default to latest available version of the Android play-services-places SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

\n
//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Setup iOS API Key

\n

In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

\n
if(application.ios) {
  PlacePicker.iosProvideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

If you are using Angular, you need to modify the app.module.ts as follows:

\n
import * as platform from \"platform\";
import {PlacePicker} from \"nativescript-google-place-picker\"
....
if (platform.isIOS) { 
  PlacePicker.iosProvideAPIKey(\"PUT_API_KEY_HERE\");
}
\n

Usage Example

\n
...
public onShowPicker() {
  var picker = new PlacePicker()

  picker.present()
      .then((r)=>{
          console.log(r.latitude)
          console.log(r.longitude)
      })
      .catch((e)=>{
          console.log(\"Error: \"+e);
      })
}
...
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-googleplaces-autocomplete-temp":{"name":"nativescript-googleplaces-autocomplete-temp","version":"1.0.5","license":"Apache-2.0","readme":"

Temp NPM package for https://github.com/derTuca/nativescript-googleplaces-autocomplete

\n

The git package wasn't published, so created a temp package until the official one comes back.

\n

I fixed a few bugs in the original version and removed the dependency to nativescript-geolocation.\nI also added locality biasing support for the iOS native Places SDK implementation.

\n

The signature of the get() is now:

\n

get(query: string, filterType: FilterTypes, lat: number, lon: number)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-share-file":{"name":"@martinbuezas/nativescript-share-file","version":"3.0.0","license":"Apache-2.0","readme":"

@martinbuezas/nativescript-share-file

\n
ns plugin add @martinbuezas/nativescript-share-file
\n

Send/Share files to other apps.

\n

Android Intent, IOS InteractionController:

\n

.

\n

Usage

\n

Info: Shared files should be in the documents path.

\n
    import { ShareFile } from 'nativescript-share-file';
    import * as fs from 'tns-core-modules/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                intentTitle: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }
\n

Arguments

\n

path

\n

Path to the file which will be shared.

\n

String: Required

\n

intentTitle

\n

Title for the intent on Android.

\n

String: (Optional)\nDefault: Open file:.

\n

rect

\n

Positioning the view for iPads. On iPhones it's always shown on the bottom.

\n

Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

\n

options

\n

Show additional opening options for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

animated

\n

Opening animation for iOS devices.

\n

Boolean: (Optional)\nDefault: false.

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-google-maps-utils":{"name":"nativescript-danem-google-maps-utils","version":"1.0.18","license":"Apache-2.0","readme":"

nativescript-danem-google-maps-utils (V1.0.17)

\n

NativeScript Google Maps SDK utility library IOS & Android :

\n\n

*** I am available to improve this plugin as needed, so do not hesitate to open a ticket for a request ! ***

\n

Dependencies

\n\n

Install

\n
tns plugin add nativescript-danem-google-maps-utils
\n

Usage

\n

Import

\n
var GoogleMaps = require('nativescript-google-maps-sdk');
var GoogleMapsUtils = require('nativescript-danem-google-maps-utils');
\n

Call function

\n
// After initializing google maps and creating a marker array :
GoogleMapsUtils.setupMarkerCluster(mapView, makerSet);
GoogleMapsUtils.setupHeatmap(this.mapView, positionSet);
\n

Clustering Info

\n

Marker icon

\n
var icon = 'marker_icon'
var marker: Marker = new Marker();
marker.infoWindowTemplate = icon;
makerSet.push(marker)
\n

Marker Select & Cluster Select

\n
onMarkerSelect(event) {
// Be careful, if you tap on a marker it returns a marker, if you tap on a cluster it returns an array of markers.
// var marker = event.marker
// or
// var arrayMarkers = event.marker
}
\n

MoveCamera

\n
GoogleMapsUtils.moveCamera(lat,lon,zoom)
\n

Clear

\n
GoogleMapsUtils.clearMap();
GoogleMapsUtils.
\n

HeatMap

\n
generateRandomPosition(position, distance) {
    var r = distance / 111300;

    var x = position[0];
    var y = position[1];

    var u = Math.random();
    var v = Math.random();

    var w = r * Math.sqrt(u);
    var t = 2 * Math.PI * v;

    var dx = w * Math.cos(t) / Math.cos(y);
    var xy = w * Math.sin(t);

    return [x + dx, y + xy];
}

demoSetupHeatMap() {
    var positionSet = [];
    for (var i = 0; i < 400; i++) {
        positionSet.push(this.generateRandomPosition([48.7797613, 2.4658653], 10000));
    }

    positionSet = positionSet.map(function (position) {
        return GoogleMaps.Position.positionFromLatLng(position[0], position[1]);
    });
    GoogleMapsUtils.setupHeatmap(this.mapView, positionSet, [new Color(\"#00FF00\"), new Color(\"#FF0000\")], [0.10, 0.50]);
    GoogleMapsUtils.setOpacity(0.8);
    GoogleMapsUtils.setRadius(80)
}
\n

Set Opacity & Radius

\n
    GoogleMapsUtils.setOpacity(0.8);
    GoogleMapsUtils.setRadius(80)
\n

Plugin inspired by nativescript-google-maps-utils, thanks @naderio

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-vlc-player":{"name":"nativescript-ng2-vlc-player","version":"1.0.2","license":"MIT","readme":"

nativescript-vlc-player

\n

nativescript vlc player plugin for NS-Angular2

\n

platforms:

\n

1-Android

\n

Install

\n

tns plugin add nativescript-ng2-vlc-player

\n

Sample Usage:

\n

https://github.com/kazemihabib/nativescript-vlc-player/tree/master/src/app

\n

Usage

\n
import {VLCComponent} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";\n@Component({\n  selector: "player",\n  template: `\n            <Button text="play" (tap)="vlcAction.play()"></Button>\n            <vlc #vlcElement [videoPath] = "path" (loaded)="onLoaded(vlcElement)"></vlc>\n          `,\n  directives:[VLCComponent]\n})\n\nexport class playerPage implements OnInit{\n  vlcAction;\n  path="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"\n\n  onLoaded(vlc){\n    this.vlcAction = vlc.getVLCAction();\n  }\n}\n
\n

Documentation:

\n

VLCComponent:

\n

EVents:

\n
1-eventPlaying\n2-eventPausd\n3-eventStopped\n4-eventEndReached\n5-eventEncounteredError\n6-eventTimeChanged\n7-eventPositionChanged\n8-eventHardwareAccelerationError\n9-eventCompatibleCpuError\n10-eventNativeCrashError\n11-eventParsedChanged\n12-eventMetaChanged\n
\n

example:

\n

Template:

\n
<vlc (eventPlaying) = "eventPlaying()" ></vlc>\n
\n

TS:

\n
eventPlaying = function(){\n    console.log('event : Playing');\n}\n
\n

methods:

\n
1-getVLCAction()\n2-stopPlayback()\n3-getCurrentAspectRatioItem():{value:number,name:string}\n4-getAudioTracks():{id:number,name:string}[]\n
\n

Attributes:

\n
1- videoPath:string     [getter and setter]\n2- lastPosition: number [getter and setter]\n3- aspectRatio: number  [setter]\n4- audioTrack : number  [getter and setter]\n
\n

Objects:

\n
  vlcAction = {\n    getLength: () : number =>{},\n    getPosition : () :number =>{},\n    isPlaying : ():boolean => {},\n    play : ():void => {},\n    stop : ():void => {},\n    pause : () : void => {},\n    seek:( position:number):void => {},\n    volumeUp:(): {'currentVolume':number,'maxVolume':number} => {},\n    volumeDown:(): {'currentVolume':number,'maxVolume':number} => {},\n  };\n
\n

vlcAction can be accessed with getVLCAction method;

\n

example:

\n

Template:

\n
  <Button text="play" (tap)="vlcAction.play()"></Button>\n  <Button text="pause" (tap)="vlcAction.pause()"></Button>\n  <vlc #vlcElement [videoPath] = "path" (loaded)="onLoaded(vlcElement)"  [lastPosition]="position" ></vlc>\n
\n

TS:

\n
vlc;\nvlcAction;\npath="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"\nonLoaded(vlc){\n  this.vlc = vlc;\n  this.vlcAction = vlc.getVLCAction();\n}\n\napplication.android.off(application.AndroidApplication.activityDestroyedEvent);\n  application.android.on(application.AndroidApplication.activityDestroyedEvent,\n    function (args: application.AndroidActivityEventData) {\n      this.vlc.stopPlayback();\n      appSettings.setNumber(this.path, this.vlc.lastPosition);\n    },this);\n
\n

VLCSettings:

\n

import {VLCSettings} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";

\n

getters and setters:

\n
  static hardwareAcceleration: HW;\n  static timeStretchingAudio: boolean;\n  static frameSkip: boolean;\n  static chromaFormat: chroma;\n  static verboseMode: boolean;\n  static deblocking: deblocking;\n  static networkCachingValue: number;\n
\n

enums:

\n

import {chroma,HW,deblocking} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";

\n
enum HW {\n  HW_ACCELERATION_AUTOMATIC,\n  HW_ACCELERATION_DISABLED,\n  HW_ACCELERATION_DECODING,\n  HW_ACCELERATION_FULL,\n}\nenum chroma {\n  RGB32,\n  RGB16,\n  YUV,\n}\nenum deblocking {\n  automatic,\n  deblocking_always,\n  deblocking_nonref,\n  deblocking_nonkey,\n  deblocking_all,\n}\n
\n

example

\n
import {chroma,HW,VLCSettings} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";\n\nconsole.log('hardwareAcceleration before set settings: ' +VLCSettings.hardwareAcceleration);\nconsole.log('netowrkCachingValue before set settings: ' + VLCSettings.networkCachingValue)\n\nVLCSettings.hardwareAcceleration = HW.HW_ACCELERATION_DISABLED;\nVLCSettings.networkCachingValue = 3000;\n\n\nconsole.log('hardwareAcceleration after set settings: ' + VLCSettings.hardwareAcceleration);\nconsole.log('networkCachingValue after set settings: ' + VLCSettings.networkCachingValue)\n
\n

Just NativeScript without Angular:

\n

SOON ...

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-multi-select":{"name":"nativescript-multi-select","version":"1.0.6","license":"Apache-2.0","readme":"

Nativescript Multi Select

\n

Overview

\n

Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

\n

\n \n \n

\n

Installation

\n
tns plugin add nativescript-multi-select
\n

Usage

\n

TypeScript

\n
import { MultiSelect, AShowType } from 'nativescript-multi-select';
import { MSOption } from 'nativescript-multi-select';

let MSelect = new MultiSelect();
let selectedItems = [\"moi-a\", \"moi-b\"];

const options: MSOption = {
  title: \"Please Select\",
  selectedItems: this._selectedItems,
  items: [
    { name: \"A\", value: \"moi-a\" },
    { name: \"B\", value: \"moi-b\" },
    { name: \"C\", value: \"moi-c\" },
    { name: \"D\", value: \"moi-d\" },
  ],
  bindValue: 'value',
  displayLabel: 'name',
  onConfirm: selectedItems => {
    selectedItems = selectedItems;
    console.log(\"SELECTED ITEMS => \", selectedItems);
  },
  onItemSelected: selectedItem => {
    console.log(\"SELECTED ITEM => \", selectedItem);
  },
  onCancel: () => {
    console.log('CANCEL');
  },
  android: {
    titleSize: 25,
    cancelButtonTextColor: \"#252323\",
    confirmButtonTextColor: \"#70798C\",
  },
  ios: {
    cancelButtonBgColor: \"#252323\",
    confirmButtonBgColor: \"#70798C\",
    cancelButtonTextColor: \"#ffffff\",
    confirmButtonTextColor: \"#ffffff\",
    showType: AShowType.TypeBounceIn
  }
};

MSelect.show(options);
\n

Angular

\n
import { Component, OnInit, NgZone } from \"@angular/core\";
import { MultiSelect, AShowType } from 'nativescript-multi-select';
import { MSOption } from 'nativescript-multi-select';

@Component({
 // ...
})
export class SomeComponent implements OnInit {

  private _MSelect: MultiSelect;
  private predefinedItems: Array<any>;
  public selectedItems: Array<any>;

  constructor(private zone: NgZone) {
    this._MSelect = new MultiSelect();
    this.predefinedItems = [\"moi-a\", \"moi-b\"];
  }

  ngOnInit(): void {
  }


  public onSelectTapped(): void {
    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this.predefinedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        this.zone.run(() => {
          this.selectedItems = selectedItems;
          this.predefinedItems = selectedItems;
          console.log(\"SELECTED ITEMS => \", selectedItems);
        })
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    this._MSelect.show(options);
  }
}
\n

Vue

\n
<script>
  import {
    MultiSelect,
    AShowType
  } from \"nativescript-multi-select\";
  const MSelect = new MultiSelect();
  let predefinedItems = [\"moi-a\", \"moi-b\"];
  
  export default {
    data() {
    },
    methods: {
      onSelectTapped() {
        const that = this;
        const options = {
          title: \"Please Select\",
          selectedItems: predefinedItems,
          items: [{
              name: \"A\",
              value: \"moi-a\"
            },
            {
              name: \"B\",
              value: \"moi-b\"
            },
            {
              name: \"C\",
              value: \"moi-c\"
            },
            {
              name: \"D\",
              value: \"moi-d\"
            }
          ],
          bindValue: \"value\",
          displayLabel: \"name\",
          onConfirm: _selectedItems => {
            that.selectedItems = _selectedItems;
            console.log(\"SELECTED ITEMS => \", _selectedItems);
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log(\"CANCEL\");
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\"
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };
  
        MSelect.show(options);
      }
    }
  };
</script>
\n

API

\n

MultiSelect

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
show(options: MSOption)() : voidShow Multi Select Dialog
\n

MSOption

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titlestringDialog Title
confirmButtonTextstringconfirm button text optional
cancelButtonTextstringcancel button text optional
selectedItemsArray<any>predefined items optional
itemsArray<any>items/list that will be display
bindValuestringthe value that will determine the property which will be return when an item is selected optional
displayLabelstringthe value that will determine the property which will be display in the list optional
iosMSiOSOptionios options optional
androidMSAndroidOptionandroid options optional
onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
\n

MSAndroidOption (for android)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
titleSizenumberoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
\n

MSiOSOption (for ios)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
cancelButtonBgColorstringoptional
confirmButtonBgColorstringoptional
confirmButtonTextColorstringoptional
cancelButtonTextColorstringoptional
showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
itemColorstringitem text color optional
\n

iOS Popup: Animation AShowType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeIn1
TypeGrowIn2
TypeShrinkIn3
TypeSlideInFromTop4
TypeSlideInFromBottom5
TypeSlideInFromLeft6
TypeSlideInFromRight7
TypeBounceIn8
TypeBounceInFromTop9
TypeBounceInFromBottom10
TypeBounceInFromLeft11
TypeBounceInFromRight12
\n

iOS Popup: Animation ADismissType ENUM

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValue
TypeNone0
TypeFadeOut1
TypeGrowOut2
TypeShrinkOut3
TypeSlideOutToTop4
TypeSlideOutToBottom5
TypeSlideOutToLeft6
TypeSlideOutToRight7
TypeBounceOut8
TypeBounceOutToTop9
TypeBounceOutToBottom10
TypeBounceOutToLeft11
TypeBounceOutToRight12
\n

Author

\n

Jonathan Mayunga, mayunga.j@gmail.com

\n

Credits

\n\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-showcaseview":{"name":"nativescript-material-showcaseview","version":"1.0.1","license":"MIT","readme":"

Nativescript MaterialShowcaseView

\n

A Material Design themed showcaseview (coachmarks) for Nativescript.

\n

This plugin works only on Android devices and it is based on * MaterialShowcaseView. Consider checking * nativescript-coachmarks if you are looking for an iOS version.

\n

Getting started

\n

To install run\nnpm install nativescript-material-showcaseview

\n

Usage

\n

Import the NSMaterialShowcaseView class to your module, then create a new instance of it.

\n
import { NSMaterialShowcaseView } from 'nativescript-material-showcaseview'

export class MyModel {
\tprivate showcaseView: NSMaterialShowcaseView;
\tconstructor() { this.showcaseView = new NSMaterialShowcaseView(); }
}
\n

IShowcaseItem and IShowcaseConfig interfaces respectively represent a showcase item and the showcase configuration.

\n
export interface IShowcaseItem {
    target: any; // the element in your view (e.g a button)
    dismissText: string; // the text to dismiss the show case
    contentText: string; // the text explaining the element
    withRectangleShape: boolean;
}
\n

An example of item:

\n
let item : IShowcaseItem = {

\ttarget: this.btn,
\tdismissText: \"GOT IT\",
\tcontentText: \"This is the start button\",
\twithRectangleShape: false
};
\n

Currently the plugin only implements the showcase sequence available on MaterialShowcaseView. In order to create the sequence you should call this.showcaseView.createSequence(items), in which the paramenter items represents an array of IShowcaseItem.

\n

Note: if you wish to highlight only one element in your view, then your array must have only one element.

\n

this.showcaseView.startSequence() initiates the showcase sequence, whilst this.showcaseView.reset() resets the sequence so it can be shown again.

\n

There is a sample app available here in case you need to see a working example.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-virtual-ibeacon":{"name":"nativescript-virtual-ibeacon","version":"0.8.4","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript Virtual Beacon Transmitter

\n

Transform your phone in an iBeacon transmitter (only in foreground).

\n

Install it

\n
tns plugin add nativescript-virtual-ibeacon
\n

Use it

\n
import {NativescriptVirtualIbeacon} from 'nativescript-virtual-ibeacon';
let nativescriptVirtualIbeacon: NativescriptVirtualIbeacon = new NativescriptVirtualIbeacon();
\n
this.nativescriptVirtualIbeacon.startAdvertisingBeaconWithString(\"2f234454-cf6d-4a0f-adf2-f4911ba9ffa6\", \"HelloID\", 123, 456);
\n
this.nativescriptVirtualIbeacon.stopAdvertisingBeacon();
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-barcodelib":{"name":"nativescript-barcodelib","version":"1.0.15","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-webview-crypto":{"name":"nativescript-angular-webview-crypto","version":"0.0.6","license":"MIT","readme":"

nativescript-angular-webview-crypto

\n

\"npm\"

\n

This brings window.Crypto to your Angular2 NativeScript application. It does this\nby communicating with a hidden WebView, which performs the actual\ncomputation.

\n

It extends nativescript-webview-crypto, which in turn extends\nwebview-crypto.

\n

This project is funded by Burke Software and Consulting LLC for passit. We are available for hire for any improvement and integration needs on this project. Open an issue to start a conversation or email info @ burke software dot come.

\n

Install

\n

This requires being setup properly with NativeScript\nfirst. Then install this as a plugin:

\n
tns plugin add nativescript-angular-webview-crypto
\n

Usage

\n

Rendering the polyfill-crypto component will start up a WebView to\ntransparently proxy all the crypto calls to. crypto is a global variable,\nto match the Web Cryptography API. To register the polyfill-crypto component,\njust import this package.

\n

import 'nativescript-angular-webview-crypto';

@Component({
    selector: 'simple-view-container',
    template: `
        <polyfill-crypto></polyfill-crypto>
    `
})
export class SimpleViewContainer implements OnInit {
  ngOnInit() {
    console.log(crypto.getRandomValues());
  }
}
\n

The component will be hidden, but needs to be rendered for crypto to work.

\n

You can look at an example repo\nrunning this example for symmetric encryption\nin NativeScript.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-echo":{"name":"nativescript-echo","version":"1.4.8","license":"Apache-2.0","readme":"

README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/tween":{"name":"@nativescript-community/tween","version":"0.0.14","license":"Apache-2.0","readme":"

NativeScript Tween

\n

\"npm\n\"npm\n\"npm\"

\n

A NativeScript plugin that natively wraps tween.js, a tweening engine for easy animations, incorporating optimized Robert Penner's equations.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
iOS DemoAndroid Demo
\n

Table of Contents

\n
    \n
  1. Installation
    2. \n
  2. Configuration
    3. \n
  3. API
    4. \n
  4. Usage in Angular
    5. \n
  5. Usage in Vue
    6. \n
  6. Usage in Svelte
    7. \n
  7. Usage in React
    8. \n
  8. Demos
    9. \n
\n

Installation

\n

Run the following command from the root of your project:

\n

ns plugin add @nativescript-community/tween

\n

Configuration

\n

No futher configuration is needed.

\n

API

\n

This plugin exports the same API as tween.js.

\n

Refer to the offical tween.js user guide additional examples and information.

\n

For now grouping, chaining, repeating... are not supported. Just basic tweening.

\n

Any view property that is a number should technically be able to be tweened. All of these have not been tested, but some of the common ones that work are:

\n\n

The following are available tween easing options:

\n\n

Usage in Angular

\n

The following is a very simple example of getting tweens to run in your Angular project.

\n

Create a view that you would like to animate as well as a button to trigger it in your component's HTML file.

\n
<StackLayout>
    <Button text=\"Start Animation\" (tap)=\"startTween()\" verticalAlignment=\"top\"></Button>

    <AbsoluteLayout #box width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></AbsoluteLayout>
</StackLayout>
\n

Reference the view you want to animate in your component's typescript file with the following (and add required imports):

\n
boxRef: AbsoluteLayout;
@ViewChild(\"box\", { static: true }) boxElementRef: ElementRef;

ngOnInit(): void {
    this.boxRef = this.boxElementRef.nativeElement;
}
\n

Import the tween module in your component's typescript file:

\n
import { TWEEN } from '@nativescript-community/tween';
\n

Create a function that will contain the call to run the tween.

\n
startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log(\"The tween has stated...\");
        })
        .onComplete(() => {
            console.log(\"The tween has completed...\");
        })
        .onUpdate(obj => {
            this.boxRef.width = obj.value;
        })
        .start();
}
\n

That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

\n

Look in the demo-ng directory for a more advanced demo.

\n

Usage in Vue

\n

The following is a very simple example of getting tweens to run in your Vue project.

\n

Create a view that you would like to animate as well as a button to trigger it.

\n
<StackLayout>
    <Button text=\"Start Animation\" @tap=\"startTween\" />
    <AbsoluteLayout ref=\"box\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></AbsoluteLayout>
</StackLayout>
\n

Reference the view you want to animate in your component computed section:

\n
// ...
computed: {
    boxRef(){
        return this.$refs.box.nativeView;
    }     
},
// ...
\n

Import the tween module in your component:

\n
import { TWEEN } from '@nativescript-community/tween';
\n

Create a function that will contain the call to run the tween.

\n
startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log(\"The tween has stated...\");
        })
        .onComplete(() => {
            console.log(\"The tween has completed...\");
        })
        .onUpdate(obj => {
            this.boxRef.width = obj.value;
        })
        .start();
}
\n

That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

\n

Look in the demo-vue directory for a more advanced demo.

\n

Usage in Svelte

\n

The following is a very simple example of getting tweens to run in your Svelte project.

\n

Create a view that you would like to animate as well as a button to trigger it.

\n
<stackLayout>
    <button text=\"Start Animation\" on:tap=\"{startTween}\" />
    <absoluteLayout bind:this=\"{boxRef}\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></absoluteLayout>
</stackLayout>
\n

Reference the view you want to animate in your component.

\n
let boxRef: AbsoluteLayout;
onMount(() => {
    boxRef = boxRef.nativeView;
})
\n

Import the tween module in your component:

\n
import { TWEEN } from '@nativescript-community/tween';
\n

Create a function that will contain the call to run the tween.

\n
function startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log(\"The tween has stated...\");
        })
        .onComplete(() => {
            console.log(\"The tween has completed...\");
        })
        .onUpdate(obj => {
            boxRef.width = obj.value;
        })
        .start();
}
\n

That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

\n

Look in the demo-svelte directory for a more advanced demo.

\n

Usage in React

\n

The following is a very simple example of getting tweens to run in your React project.

\n

Create a view that you would like to animate as well as a button to trigger it.

\n
<stackLayout>
    <button text=\"Start Animation\" onTap={startTween} />
    <absoluteLayout ref={boxRef} width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"middle\"></absoluteLayout>
</stackLayout
\n

Reference the view you want to animate in your component.

\n
const boxRef = React.useRef<NSVElement<AbsoluteLayout>>(null);
\n

Import the tween module in your component:

\n
import { TWEEN } from '@nativescript-community/tween';
\n

Create a function that will contain the call to run the tween.

\n
function startTween() {
    new TWEEN.Tween({ value: 30 })
        .easing(TWEEN.Easing.Quadratic.In)
        .to({ value: 300 }, 1000)
        .onStart(() => {
            console.log(\"The tween has stated...\");
        })
        .onComplete(() => {
            console.log(\"The tween has completed...\");
        })
        .onUpdate(obj => {
            boxRef.current!.nativeView.width = obj.value;
        })
        .start();
}
\n

That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

\n

Look in the demo-react directory for a more advanced demo

\n

Demos

\n

This repository includes Angular, Vue.js, Svelte, and React demos. In order to run these execute the following in your shell:

\n
$ git clone https://github.com/@nativescript-community/tween
$ cd tween
$ npm i
$ npm run build
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-plus":{"name":"nativescript-webview-plus","version":"1.0.13","license":"ISC","readme":"

nativescript-webview-plus

\n

Extended WebView for NativeScript which adds many options.\nThe code is originally based on nativescript-webview-plus

\n

Features

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @nota/nativescript-advanced-werbview
\n

Angular support

\n

Import AWebViewModule from nativescript-webview-plus/angular and add it to your NgModule.

\n

This registers the element AWebView. Replace the tag with

\n

Vue support

\n

Import nativescript-webview-plus/vue in your app entry file (likely app.js or main.js).

\n

This registers the element AWebView. Replace the tag with

\n

Usage

\n

Limitations

\n

In order to intercept requests for the custom scheme, we use UIWebView for iOS 9 and 10 and WKWebView for iOS 11+.

\n

iOS 11 added support for setting a WKURLSchemeHandler on the WKWebView.\nPrior to iOS 11 there isn't support for intercepting the URL with WKWebView, so we use a custom NSURLProtocol + UIWebView.

\n

Important:

\n

The custom NSURLProtocol used with UIWebView is shared with all instances of the AWebView, so mapping x-local://local-filename.js => file://app/full/path/local-filename.js is shared between them.

\n

API

\n

NativeScript View

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValueDescription
readonly isUIWebViewtrue / falseIs the native webview an UIWebView? True if iOS <11
readonly isWkWebViewtrue / falseIs the native webview an WKWebView? True if iOS >=11
srcLoad src
autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
scalesPageToFitUIWebView: Should webpage scale to fit the view? Defaults to false
scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
supportZoomtrue / falseAndroid: should the webview support zoom
viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
getTitle()Returns a promise with the current document title.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
titleChangedDocument title changed
webAlertRaised when window.alert is triggered inside the webview, needed to use customs dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed. NOTE: Not supported by UIWebView
webConfirmRaised when window.confirm is triggered inside the webview, needed to use customs dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed. NOTE: Not supported by UIWebView
webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
webPromptRaised when window.prompt is triggered inside the webview, needed to use customs dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
\n

WebView

\n

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the AWebView as any other event, data will be a part of the WebViewEventData-object
\n

Possible features to come:

\n\n

Android

\n\n

iOS

\n\n

Demo and unit tests

\n

Running the demo

\n

To run the demo-project, the plugin must be build locally and a http-server must be running.

\n

The easiest way to run the demo is to follow these steps:

\n\n

Running the unit-tests

\n\n

License

\n

Apache License Version 2.0, January 2004

\n

About Nota

\n

Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-videoplayer-lr":{"name":"nativescript-videoplayer-lr","version":"1.0.0","license":"Apache-2.0","readme":"

NativeScript Video Player :clapper:

\n

A NativeScript plugin to provide an XML widget for playing local and remote video files.

\n

Android VideoView

\n

iOS AVPlayer

\n

Installation

\n

npm install nativescript-videoplayer

\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:VideoPlayer=\"videoplayer\">
        <StackLayout>
            <VideoPlayer:Video
            loaded=\"videoplayerLoaded\" 
            finished=\"videoFinished\" 
            autoplay=\"true\" 
            height=\"300\" 
            src=\"~/videos/small.mp4\" />

            <!-- Here is a remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
            
        </StackLayout>
</Page>
\n

Attributes

\n

src - required

\n

Attribute to specify the video file to play, can either be a remote file or local video file.

\n

The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

\n

autoplay - optional

\n

Attribute to set if the video should start playing as soon as possible or to wait for user interaction.

\n

finished - optional

\n

Attribute to specify an event callback to execute when the video reaches the end of its duration.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-noice-image-picker":{"name":"nativescript-noice-image-picker","version":"1.0.0","license":"MIT","readme":"

Noice Image Picker

\n

A camera/image picker for iOS for NativeScript framework.

\n

This is a nice looking image picker/camera.

\n

Image Picker for the NativeScript framework

\n

An image picker control that supports multiple selection.

\n

There is no Android implementation, feel free to contribute!

\n\n

Installation

\n

Install plugin using NativeScript CLI

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-noice-image-picker
\n

Usage

\n
var noiceImagePicker = require(\"nativescript-noice-image-picker\");

let args = {
    imageLimit: 3,
    doneButtonTitle: 'Done'
};
// this function returns a promise.
noiceImagePicker.showPicker(args).then(images => {
    images.forEach(img => {
        this.images.push(img);
    })
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ng":{"name":"tns-ng","version":"1.1.0","license":"MIT","readme":"

Tns Ng

\n

\"npm

\n

Angular CLI for Nativescript. Generates component for Nativescript Angular projects

\n

Table of Contents

\n\n

Installation

\n
npm install -g tns-ng
\n

Usage

\n
tng --help
\n

Generating Components and Services

\n
tng generate|g [type] [name]
\n

You can use the tng generate (or just tng g) command to generate Nativescript Angular components:

\n
tng generate component my-component
tng g component my-component # using the alias

# components support relative path generation
# if in the directory app/feature/ and you run
tng g component my-component
# your component will be generated in app/feature/my-component
# but if you were to run
tng g component feature/my-component
# your component will be generated in app/feature/my-component

# This will create four files:
__my-component__/__my-component__.component.html
__my-component__/__my-component__.component.ts
__my-component__/__my-component__.component.android.css
__my-component__/__my-component__.component.ios.css
\n

You can find all possible types in the table below:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ScaffoldUsage
Componenttng g component my-component
Servicetng g service my-service
\n

Contributing

\n

Just fork and pull request :D

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediafilepicker-fix":{"name":"nativescript-mediafilepicker-fix","version":"1.0.0","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-badge-button":{"name":"nativescript-badge-button","version":"0.1.2","license":"MIT","readme":"

NativeScript Badge Button Plugin

\n

\"npm\"\n\"npm\"

\n

Creates a native UIButton with a badge component. Currently only supported on iOS.

\n

Getting Started

\n\n
xmlns:BadgeButton=\"nativescript-badge-button\"
\n\n
<BadgeButton:BadgeButton text=\"Button with Badge\" badgeValue=\"1\" badgeOriginX=\"450\" />
\n

Available Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefault
badgeBGColorUIColorredColor
badgeTextColorUIColorwhiteColor
badgeFontUIFontsystemFontOfSize:12.0
badgePaddingnumber6
badgeMinSizenumber8
badgeOriginXnumber0
badgeOriginYnumber-4
shouldHideBadgeAtZerobooleantrue
shouldAnimateBadgebooleantrue
\n

Demo

\n\n

Known Issues

\n\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-menu":{"name":"nativescript-animated-menu","version":"0.1.5","license":"MIT","readme":"

nativescript-animated-menu

\n

NativeScript module that adds an animated menu to iOS applications. Android support can be implemented on top of this with a little Android animation knowledge, but the structure is there.

\n

Installation

\n

Run npm install nativescript-animated-menu --save from your project's app directory:

\n
.
├── app  <------------------------------ run npm install from here
│   ├── app.css
│   ├── app.js
│   ├── bootstrap.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── node_modules
│   │   └── nativescript-animated-menu <-- The install will place the module's code here
│   │       └── ...
│   └── package.json <----------------- The install will register “nativescript-animated-menu” as a dependency here
│   └── tns_modules
│       └── ...
└── platforms
    └── ios
\n

If npm doesn't end up working for you, you can just copy and paste this repo's animatedmenu.js file into your app and reference it directly.

\n

Usage

\n

To use the Animated Menu Module set up a menu-page and a main-page. These pages with host the views and logic for the menu and whatever other page you'll have the menu accessible from.\nA root page will host the animated menu that references the menu-page and the main-page.

\n
root-page      <-------------this is the page that will host the animated menu element
\t└── animated-menu     <------------the animated menu element will reference the menu page and main page (see below)
\t\t└── menu-page
\t\t└── main-page
\n

Animated Menu Element

\n

The animated menu itself references the menu-page and the main-page with "main" and "menu" attributes.

\n
<nu:AniMenu main=\"main-page\" menu=\"menu-page\"></nu:AniMenu>
\n

A menu trigger button is places somewhere on the main-page with a load handler that hooks up the animated menu with the button click. You must require() the animated menu module in your main-page logic from your project's node_modules directory:

\n
var aniMenu = require( \"./node_modules/nativescript-animated-menu/animatedmenu\" );
\n

You will then hook up the trigger button's tap event in the loaded handler like this:

\n
function menuBtnLoaded(args) {
    var btn = args.object;
    btn.on('tap', aniMenu.menuTriggerAction);
}
exports.menuBtnLoaded = menuBtnLoaded;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-assets":{"name":"nativescript-dev-assets","version":"0.0.7","license":"MIT","readme":"

\"npm\"\n\"npm\"\n\"twitter:

\n

\"NPM\"

\n

nativescript-dev-assets

\n

This simple before-prepare hook will make an assets folder in your app folder, all files in it will be synced in the platforms/android/src/main/assets folder.

\n

Basically to fix this issue and to ease nativescript-lottie.

\n

Installation

\n

tns install nativescript-dev-assets

\n

Usage

\n

Just put files in the app/assets folder

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-signin-button":{"name":"nativescript-plugin-google-signin-button","version":"1.0.5","license":"MIT","readme":"

A NativeScript plugin to create native Google sign-in button

\n

Supports Nativescript 3.0.x and Android platform only.

\n

Adapts the native Android\nSignInButton\ncontrol

\n

Installation

\n
tns plugin add nativescript-plugin-google-signin-button\n
\n

Screenshot

\n

\"\"

\n

Usage

\n
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"\n      xmlns:gsb="nativescript-plugin-google-signin-button">\n    <ScrollView>\n        <StackLayout>\n            <gsb:GsbButton id="gsbButton" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton horizontalAlignment="right" tap="gsbTap"/>\n            <gsb:GsbButton horizontalAlignment="stretch" tap="gsbTap"/>\n\n            <gsb:GsbButton colorStyle="dark" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton colorStyle="light" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton sizeStyle="wide" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton colorStyle="dark" sizeStyle="wide" horizontalAlignment="left" tap="gsbTap"/>\n        </StackLayout>\n    </ScrollView>\n</Page>\n
\n

Attributes

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radiobutton":{"name":"nativescript-radiobutton","version":"0.1.0","license":"Apache 2.0","readme":"

NativeScript-RadioButton

\n

\"npm\"\n\"npm\"

\n

A NativeScript plugin for the native radiogroup and radiobutton widget.

\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android RadioGroupNONE
Android RadioButtonNONE
\n

Installation

\n

From your command prompt/terminal go to your app's root folder and execute:

\n

tns plugin add nativescript-radiobutton

\n

Useage

\n

Angular

\n

Import to NgModule for use

\n
import { RadioButtonModule } from 'nativescript-radiobutton/angular'

@NgModule({
    imports: [
        RadioButtonModule
    ]
})
\n

Place this in your view.

\n
<StackLayout>
    <RadioGroup [(value)]=\"dataBoundVariable\">
        <RadioButton text=\"Selection 1\"></RadioButton>
        <RadioButton text=\"Selection 2\"></RadioButton>
        <RadioButton text=\"Selection 3\"></RadioButton>
    </RadioGroup>
</StackLayout>
\n

Supported Properties

\n

###RadioButton

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidExample
enabledenabled="true | false"
texttext="a string"
checkedchecked="true | false"
\n

###RadioGroup

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidReturns
valuethe index of the radio button selected
\n

Supported Events

\n

###RadioButton

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidExample
enabledenabled="true | false"
texttext="a string"
checkedchecked="true | false"
\n

###RadioGroup

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidType
valueEventEmitter
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-lokijs-adapter":{"name":"@herefishyfish/nativescript-lokijs-adapter","version":"1.0.2","license":"Apache-2.0","readme":"

@herefishyfish/nativescript-lokijs

\n
ns plugin add @herefishyfish/nativescript-lokijs
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shatterview":{"name":"nativescript-shatterview","version":"0.1.5","license":"Apache-2.0","readme":"

Nativescript Shattervew

\n

Make sure to hold down on the view item to see the effect... the cracks start then when they hit the edges it breaks

\n

** ANDROID ONLY (sorry iOS) **

\n\n
\n

Works awesome on device, geny throws lots of cancel events for some reason

\n
\n

Usage

\n
var shatterview = require(\"nativescript-shatterview\");

exports.pageLoaded = function (args) {
    page = args.object;
    page.bindingContext = viewModel;
    
    var options = {
                complexity: 12,
                breakDuration: 700,
                fallDuration: 2000,
                circleRiftsRadius: 50
            };
    
    var image = page.getViewById(\"image\");
    shatterview.allowShatter(image, options);
    
    var button = page.getViewById(\"button\");
    shatterview.allowShatter(button, options);
    
    var label = page.getViewById(\"label\");
    shatterview.allowShatter(label, options);
    
        
    shatterview.allowShatter(page, options);
}
\n

Methods

\n\n

Events

\n
    // Args returns the view being maniupulated
    shatterview.on(\"start\", function (args) {
        console.log(\"Break started\");
    });
\n\n

So you don't handle a tap event to shatter, you make something shatterable and the click\\tap is done automatically by the plugin.

\n

BrokenView Plugin lovingly created by zhanyongsheng

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sergeymell/nativescript-svg":{"name":"@sergeymell/nativescript-svg","version":"1.1.2","license":"Apache-2.0","readme":"

NativeScript SVG

\n

The similar version of this plugin for the NativeScript 6\nis available here

\n

Disclaimer

\n
\n

This plugin is almost fully based on the source code of Victor Sossa and Juras Norkus.
\nThank you guys for your hard work and contributions!

\n
\n

Installation

\n
ns plugin add @sergeymell/nativescript-svg
\n

Prerequisites

\n

Before starting using the plugin make sure your svg\nimages will be copied to the build.\nThis can be done by updating webpack.config.js.\nAdd this line to the targets of CopyWebpackPlugin instance

\n
{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
\n

so it should look something like this:

\n
new CopyWebpackPlugin({
  patterns: [
    { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
  ],
}),
\n

Usage

\n

You use it in the same way you use Image source.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Android LibraryiOS CocoaPod
pents90 svg-androidSVGKit by SVGKit
\n

** there are limitations: ** - saveToFile is not working

\n

API

\n
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromData(data: any): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
\n\n
ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG
\n\n
\n

You can call every method in two ways, for example:

\n
//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously
\n

or

\n
//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
\n

Since ver 1.1 Implement a similar image tag to be used as for example:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:svg=\"@sergeymell/nativescript-svg\" loaded=\"pageLoaded\">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src=\"~/image/nativescript.svg\" height=\"100\" />
    <svg:SVGImage src=\"https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg\" height=\"200\" />

    <!--normal image tag-->
    <Image src=\"~/images/logo.svg\" stretch =\"none\" />
  </StackLayout>
</Page>
\n

Usage within Angular Apps

\n

Import an Angular Module

\n
import {NativeScriptSvgModule} from '@sergeymell/nativescript-svg/angular';

@NgModule({
    [
       ...,
       NativeScriptSvgModule
    ],
    ...
})
export class AppModule {}
\n

Use custom element in your views

\n
<SVGImage src=\"~/images/nativescript.svg\" width=\"256\" height=\"256\"></SVGImage>
\n

Additional info

\n

Please, refer some best practices of creating svg files

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-afnetworking":{"name":"nativescript-afnetworking","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-AFNetworking/blob/master/LICENSE"},"readme":"

NativeScript-afnetworking

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n

Installation

\n

To install type

\n
tns plugin add nativescript-afnetworking
\n

Usages

\n

Example

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animate-sass":{"name":"nativescript-animate-sass","version":"0.0.2","license":"MIT","readme":"

Nativescript + SASS Animations

\n

This is a Nativescript & SASS port of the popular animate.css library for your Nativescript + SASS apps.

\n

How To

\n\n
npm i nativescript-animate-sass --save
\n\n
@import '~nativescript-animate-sass/animate.scss';
// or
// @import '~nativescript-animate-sass/src/pulse.scss';

// pulse($duration, $function, $infinite?: boolean)
.pulse {
  @include pulse(2.5s, ease-in, true);
}
\n\n
.pulse { 
  animation-name: pulse;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
\n\n
  <Button class=\"pulse\" text=\"Animate\"></Button>
\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-performance-monitor":{"name":"nativescript-performance-monitor","version":"1.0.0","license":"MIT","readme":"

NativeScript Performance Monitor

\n

Measure and show FPS and (on iOS) CPU usage!

\n

\"Demo

\n

20 sec video, showing off the plugin on iOS and Android

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-performance-monitor
\n

Start monitoring

\n

After adding the plugin you can start monitoring from code. There are a few options you can pass in as well (the options object itself is optional as well):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptioniOS?Android?Description
onSample?:white_check_mark::white_check_mark:A callback function that gets invoked on every sample. If you don't want to use the default UI of this plugin you can use this to render your own UI. See the examples below for the function spec.
hide?:white_check_mark::white_check_mark:Set to true if you don't want the default UI to show. So roll your own or go ito stealth mode entirely.
textColor?:white_check_mark::white_check_mark:The text color of the monitor view (default white).
backgroundColor?:white_check_mark::white_medium_square:Background color of the monitor view (default black).
borderColor?:white_check_mark::white_medium_square:The border color of the monitor view (default black).
\n

TypeScript

\n
import { PerformanceMonitor, PerformanceMonitorSample } from 'nativescript-performance-monitor';
import { Color } from \"color\";

const performanceMonitor: PerformanceMonitor = new PerformanceMonitor();

// this would suffice..
performanceMonitor.start();

// .. but we want to show off the options ;)
performanceMonitor.start({
  textColor: new Color(\"white\"),
  backgroundColor: new Color(\"black\"),
  borderColor: new Color(\"black\"),
  hide: false,
  onSample: (sample: PerformanceMonitorSample) => {
    console.log(\"FPS: \" + sample.fps);
    if (sample.cpu) { // iOS only
      console.log(\"CPU %: \" + sample.cpu);
    }
  }
});
\n

JavaScript

\n
var perfMon = require(\"nativescript-performance-monitor\");
var color = require(\"color\");

var performanceMonitor = new perfMon.PerformanceMonitor();

performanceMonitor.start({
  textColor: new color.Color(\"white\"),
  backgroundColor: new color.Color(\"black\"),
  borderColor: new color.Color(\"black\"),
  hide: false,
  onSample: function (sample) {
    console.log(\"FPS: \" + sample.fps);
    if (sample.cpu) { // iOS only
      console.log(\"CPU %: \" + sample.cpu);
    }
  }
});
\n

Stop monitoring

\n

To stop receiving measurements and hide the monitor UI you can simply do this:

\n
performanceMonitor.stop();
\n

Usage with Angular

\n

In any component, or even app.module.ts add:

\n
import { PerformanceMonitor } from \"nativescript-performance-monitor\";

export class MyComponent {
  // use the constructor, or OnInit, or trigger from a button, or whatever really
  constructor() {
    new PerformanceMonitor().start({
      // options
    });
  }
}
\n

Known issues (Android)

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webpack-import-replace":{"name":"nativescript-webpack-import-replace","version":"1.0.2","license":"MIT","readme":"

ImportReplacePlugin

\n

NativeScript webpack plugin to rewrite various imports with the .ios or .android platform suffix to allow various Angular Components, Directives, or Pipes to properly AoT compile when building a NativeScript for Angular app.

\n

Install

\n
npm install nativescript-webpack-import-replace --save-dev
\n

Usage

\n

In your app's webpack.config.js, add the following:

\n
function getPlugins(platform, env) {
    let plugins = [
      ...
      new ImportReplacePlugin({
          debug: true, // optional - outputs results
          platform: platform,
          files: [
              'slider.directive'
          ]
      }),
      ...
\n

The files collection can be a list of import filenames you'd like replaced with the target platform suffix. The plugin will find the import and add the proper platform ending to the import to allow a proper AoT compile of your NativeScript for Angular app.

\n

What does this solve?

\n

When using nativescript-dev-webpack plugin with NativeScript for Angular project and you are using platform specific Components, Directives or Pipes, you may run into this type of bundling error:

\n
\n

ERROR in Unexpected value 'CustomDirective in /path/to/YourApp/app/your-folders/custom.directive.d.ts' declared by the module 'YourModule in /path/to/YourApp/app/your-folders/custom.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

\n
\n

In this case, you can add this plugin to your config and designate the name of the import file to adjust to solve the error.

\n

Learn why this exists?

\n

The development and reason for the creation of this plugin will be featured in an upcoming "NativeScript for Angular" book published via Packt Publishing in the Fall 2017.

\n

CREDITS

\n

Huge thank you to Stanimira Vlaeva and Alex Vakrilov.

\n

LICENSE

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nhuttm/nativescript-webrtc":{"name":"@nhuttm/nativescript-webrtc","version":"2.1.0-alpha.1","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-in-app-notifications":{"name":"nativescript-in-app-notifications","version":"2.0.0","license":"MIT","readme":"

NativeScript In App Notifications plugin

\n

\"npm

\n

This is a plugin to show in app notifications on iOS, using BSForegroundNotification v3.1).

\n

Demo

\n

Check out the demo folder for a sample usage.

\n

Angular 2

\n

Usage:

\n
    \n
  1. Add the plugin to your project:
    2. \n
\n
npm install nativescript-in-app-notifications
\n
    \n
  1. To show a notification call showNotification:
    2. \n
\n
  InAppNotifications.getInstance().showNotification('This is a notification', 'This is the title', () => {
              console.log('tap');
          });
\n

Try the Demo

\n

To try the demo run the following commands:

\n
npm run setup
npm run build.demo
npm run dev.ios
\n

If you change files in the demo project and want to run the app again:

\n
npm run build.demo
npm run dev.ios
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyboardshowing":{"name":"nativescript-keyboardshowing","version":"1.0.2","license":"Unsupported","readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

nativescript-keyboardShowing

\n

A NativeScript plugin to deal knowing if the keyboard is showing or hiding.

\n

ProPlugins

\n

We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

\n

\n

Community

\n

Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Sample Snapshot

\n

Installation

\n

tns plugin add nativescript-keyboardshowing

\n

Usage

\n

To use the module you just require() it:

\n
var keyboard = require( \"nativescript-keyboardshowing\" );
console.log(\"keyboard is\", keyboard.isShowing() ? \"showing\" : \"hidden\");

exports.onKeyboard = function (evt) {
    console.log(\"Keyboard is now\", evt.showing ? 'showing' : 'hidden');
};
\n

You ask, how exactly does this help?

\n

Have you ever needed to know if the Soft-keyboard is showing? This plugin gives you that information via a event or a function call.

\n

You can add to any page you need it the following Function:

\n

exports.onKeyboard = function(args) { }

\n
args.showing = true | false
\n
args.object = the current page
\n

Additional Helper Method

\n
var keyboard = require('nativescript-keyboardshowing');
\n

keyboard.isShowing()

\n
returns: true or false
\n
var keyboard = require( \"nativescript-keyboardshowing\" );
console.log(\"keyboard is\", keyboard.isShowing() ? \"showing\" : \"hidden\");
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-realtime":{"name":"@triniwiz/nativescript-supabase-realtime","version":"0.3.0","license":"Apache-2.0","readme":"

Nativescript Supabase Realtime Client

\n
ns plugin add @triniwiz/nativescript-supabase-realtime
\n

Usage

\n

Realtime Client

\n

Listens to changes in a PostgreSQL Database and via websockets.

\n

This is for usage with Supabase Realtime server.

\n

Usage

\n

Creating a Socket connection

\n

You can set up one connection to be used across the whole app.

\n
import { RealtimeClient } from '@triniwiz/nativescript-supabase-realtime'

var client = new RealtimeClient(process.env.REALTIME_URL)
client.connect()
\n

You can pass in your JWT If you have enabled JWT authorization in Supabase Realtime server.

\n
import { RealtimeClient } from '@triniwiz/nativescript-supabase-realtime'

var client = new RealtimeClient(process.env.REALTIME_URL, { params: { apikey: 'token123' }})
client.connect()
\n

See Realtime: Channels Authorization for more information.

\n

Socket Hooks

\n
client.onOpen(() => console.log('Socket opened.'))
client.onClose(() => console.log('Socket closed.'))
client.onError((e) => console.log('Socket error', e.message))
\n

Subscribing to events

\n

You can listen to INSERT, UPDATE, DELETE, or all * events.

\n

You can subscribe to events on the whole database, schema, table, or individual columns using channel(). Channels are multiplexed over the Socket connection.

\n

To join a channel, you must provide the topic, where a topic is either:

\n\n

Examples

\n
// Listen to events on the entire database.
var databaseChanges = client.channel('realtime:*')
databaseChanges.on('*', (e) => console.log(e))
databaseChanges.on('INSERT', (e) => console.log(e))
databaseChanges.on('UPDATE', (e) => console.log(e))
databaseChanges.on('DELETE', (e) => console.log(e))
databaseChanges.subscribe()

// Listen to events on a schema, using the format `realtime:{SCHEMA}`
var publicSchema = client.channel('realtime:public')
publicSchema.on('*', (e) => console.log(e))
publicSchema.on('INSERT', (e) => console.log(e))
publicSchema.on('UPDATE', (e) => console.log(e))
publicSchema.on('DELETE', (e) => console.log(e))
publicSchema.subscribe()

// Listen to events on a table, using the format `realtime:{SCHEMA}:{TABLE}`
var usersTable = client.channel('realtime:public:users')
usersTable.on('*', (e) => console.log(e))
usersTable.on('INSERT', (e) => console.log(e))
usersTable.on('UPDATE', (e) => console.log(e))
usersTable.on('DELETE', (e) => console.log(e))
usersTable.subscribe()

// Listen to events on a row, using the format `realtime:{SCHEMA}:{TABLE}:{COL}.eq.{VAL}`
var rowChanges = client.channel('realtime:public:users:id.eq.1')
rowChanges.on('*', (e) => console.log(e))
rowChanges.on('INSERT', (e) => console.log(e))
rowChanges.on('UPDATE', (e) => console.log(e))
rowChanges.on('DELETE', (e) => console.log(e))
rowChanges.subscribe()
\n

Removing a subscription

\n

You can unsubscribe from a topic using channel.unsubscribe().

\n

Disconnect the socket

\n

Call disconnect() on the socket:

\n
let { error, data } = await client.disconnect()
\n

Duplicate Join Subscriptions

\n

While the client may join any number of topics on any number of channels, the client may only hold a single subscription for each unique topic at any given time. When attempting to create a duplicate subscription, the server will close the existing channel, log a warning, and spawn a new channel for the topic. The client will have their channel.onClose callbacks fired for the existing channel, and the new\nchannel join will have its receive hooks processed as normal.

\n

Channel Hooks

\n
channel.onError( () => console.log(\"there was an error!\") )
channel.onClose( () => console.log(\"the channel has gone away gracefully\") )
\n\n

Subscription Hooks

\n

publicSchema
  .subscribe()
  .receive('ok', () => console.log('Connected.'))
  .receive('error', () => console.log('Failed.'))
  .receive('timeout', () => console.log('Timed out, retrying.'))
\n

Event Responses

\n

Events are returned in the following format.

\n
type Response = {
  // the change timestampe. eg: \"2020-10-13T10:09:22Z\".
  commit_timestamp: string 

  // the database schema. eg: \"public\".
  schema: string 
  
  // the database table. eg: \"users\".
  table: string 
  
  // the event type.
  type: INSERT | UPDATE | DELETE 
  
  // all the columns for this table. See \"column\" type below.
  columns: column[] 
  
  // the new values. eg: { \"id\": \"9\", \"age\": \"12\" }.
  record: object 

  // the previous values. eg: { \"id\": \"9\", \"age\": \"11\" }. Only works if the table has `REPLICATION FULL`.
  old_record: object 
}

type column = {
  // any special flags for the column. eg: [\"key\"]
  flags: string[] 
  
  // the column name. eg: \"user_id\"
  name: string 
  
  // the column type. eg: \"uuid\"
  type: string 
  
  // the type modifier. eg: 4294967295
  type_modifier: number 
}
\n

Credits

\n

Based on realtime-js

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-media-metadata-retriever":{"name":"nativescript-media-metadata-retriever","version":"1.0.77","license":"MIT","readme":"

Media Metadata Retriever Plugin for Nativescript

\n

This plugin is based on the MediaMetadataRetriever in Android.

\n

Installation

\n

tns plugin add nativescript-media-metadata-retriever

\n

Usage

\n

This plugin is used to extract media metadata like albumname, artist, title, etc. from media files.\nThis plugin can only be used in Android.

\n

Example (Angular)

\n

Typescript file (app.component.ts)

\n
import { Component, OnInit } from \"@angular/core\";
import { MediaMetadataRetriever } from \"nativescript-media-metadata-retriever\";
import { Page } from \"ui/page\";
import { ImageFormat } from \"ui/enums\";

import * as imageSource from \"image-source\";
import * as fs from \"file-system\";
import * as permissions from \"nativescript-permissions\";  //Recommended
declare var android;

@Component({
    selector: \"ns-app\",
    templateUrl: \"app.component.html\",
    styleUrls: [\"app.component.css\"]
})

export class AppComponent { 
    path: string;
    artist: string;
    title: string;
    mmr: MediaMetadataRetriever;
    bitArray: Array<number>;
    allMetadata: string;
    src: string;

    constructor(private page: Page) { }

    ngOnInit(): void {
        this.mmr = new MediaMetadataRetriever();    //Create the object of the classs
    }

    //Get the metadata when the button is pressed
    getMetadata() {
        //Set the data source for the media file
        this.mmr.setDataSource(this.path + '');

        //Get a particular metadata
        this.mmr.extractMetadata(MediaMetadataRetriever._METADATA_KEY_TITLE)    //For title of media
        .then((args) => {
            this.title = args;
        });
        this.mmr.extractMetadata(MediaMetadataRetriever._METADATA_KEY_ARTIST)   //For artist name
        .then((args) => {
            this.artist = args;
        });

        //Get all the metadata
        this.mmr.extractAllMetadata()
        .then((args) => {
            this.allMetadata = JSON.stringify(args);
            /*
            You can also use args.title, args.artist, args.album ...
            as it includes a JSON array of objects
           */
        });

        //Get the Embedded Picture(Bitmap)
        this.mmr.getEmbeddedPicture()
        .then((args) => {
            var albumArt = this.page.getViewById(\"albumArt\"); //Where albumArt is the ID of an Image element
            var img = new imageSource.ImageSource();
            img.setNativeSource(args);
            albumArt.set(\"src\", img);
            console.log(\"ImageSource set...\");
        })
        .catch((ex) => {
            //Do something else
            console.log(\"Failed to set ImageSource...\" + ex);
        });
    }

    //This app needs storage permission
    //P.S. this is not necessary as you can do it manually by going into App Settings
    getPermissions(): void {
        if (!permissions.hasPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE)) {
            console.log(\"Asking for permissions...\");
            permissions.requestPermissions([
                android.Manifest.permission.READ_EXTERNAL_STORAGE,
                android.Manifest.permission.WRITE_EXTERNAL_STORAGE
            ])
            .then(() => {
                console.log(\"Permissions granted...\");
            })
            .catch(() => {
                console.log(\"Permissions denied...\");
            })
        } else {
            console.log(\"App has necessary permissions...\");
        }
    }
}
\n

API

\n

Set the data source for media file

\n\n

Extract a single metadata based on given keycode

\n\n

Extract all the metadata from the media file

\n\n

Get the embedded picture from the file (Bitmap)

\n\n

KEYCODES

\n\n

Note

\n

You can also use extractAllMetadata(): Promise to get some specified result like title, album, albumartist, artist, etc. as shown below

\n
this.mmr.extractAllMetadata()
      .then((args) => {
          this.albumartist = args.albumartist;
          this.artist = args.artist; 
          this.author = args.author; 
          this.bitrate = args.bitrate;
          this.cdtracknumber = args.cdtracknumber;
          this.compilation = args.compilation; 
          this.composer = args.composer; 
          this.date = args.date; 
          this.disknumber = args.disknumber;
          this.duration = args.duration;
          this.genre = args.genre;
          this.hasaudio = args.hasaudio;
          this.haslocation = args.haslocation;
          this.hasmimetype = args.hasmimetype;
          this.hasvideo = args.hasvideo;
          this.numtracks = args.numtracks;
          this.title = args.title;
          this.videorotation = args.videorotation;
          this.width = args.width;
          this.write = args.write;
          this.year = args.year;
          ...
      });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-set-version":{"name":"nativescript-set-version","version":"0.3.1","license":"ISC","readme":"

nativescript-set-version

\n

\"License:

\n

This tool allows you to easily update the version of a Nativescript application.\nIt will update the following files if found:

\n\n

Version number format

\n

In order to use this package, your project version must comply with the format described on semver.org.

\n

Setup and Usage

\n

There are two ways to install nativescript-set-version: globally and locally.

\n

Local Installation

\n

This is the recommended way to install nativescript-set-version.

\n

npm:

\n
npm install nativescript-set-version --save-dev
\n

yarn:

\n
yarn add nativescript-set-version --dev
\n

You can then use this command in your project directory to run nativescript-set-version:

\n

npm:

\n
$ npm run setVersion <version>
-- or --
$ npm run set-version <version>
\n

yarn:

\n
$ yarn setVersion <version>
-- or --
$ yarn set-version <version>
\n

Global Installation

\n

This installation method allows you to use nativescript-set-version in any project.

\n

npm:

\n
npm install -g nativescript-set-version
\n

yarn:

\n
yarn global add nativescript-set-version
\n

You can then use this command in your project directory to run nativescript-set-version:

\n
setVersion <version>
-- or --
set-version <version>
\n

Behaviour

\n

When invoked, nativescript-set-version will make the following changes to your project files:

\n

Update Package Version

\n

The version attribute in package.json will be updated with the specified version.

\n

Update Android Project Version

\n

It will update the version name and the version code in both app.gradle and AndroidManifest.xml.

\n

About AndroidManifest.xml

\n

Version information should not be in the AndroidManifest.xml since this information is overridden by app.gradle.

\n

See https://developer.android.com/studio/publish/versioning for further informations.

\n

For that reason nativescript-set-version will only write in the AndroidManifest.xml if android:versionCode and/or android:versionName are already in the file.

\n

Update iOS Project Version

\n

It will update the CFBundleShortVersionString and the CFBundleVersion in Info.plist.

\n

How the version code and CFBundleVersion are updated

\n

The Android version code represents your version number as an integer. This\npackage uses the following format to generate this integer:

\n
<MAJOR><MINOR ON 2 DIGITS><PATCH ON 2 DIGITS><BUILD NUMBER>
\n

For instance, the first time you call set-version 3.1.4, it will produce the version code 301041.

\n

If you call the command with the same version a second time, it will increment the build number, to produce 301042.

\n

This also applies if, for instance, you call set-version 3.1.4-rc.1, and then set-version 3.1.4-rc.2.

\n

As for the CFBundleVersion on iOS, it will produce a string in the format <MAJOR>.<MINOR>.<PATCH>.<BUILD NUMBER>.

\n

Example:

\n
$ yarn set-version 1.0.0-rc.1
# Output
# ...
# Will set android version code to 100001
# ...
# Will set CFBundleVersion to 1.0.0.1
$ yarn set-version 1.0.0-rc.2
# Output
# ...
# Will set android version code to 100002
# ...
# Will set CFBundleVersion to 1.0.0.2
$ yarn set-version 1.0.0
# Output
# ...
# Will set android version code to 100003
# ...
# Will set CFBundleVersion to 1.0.0.3
\n

License

\n

This software uses the MIT license.

\n

Contributing

\n

You must use the following style guide:

\n\n

This project contains a linting config, you should setup eslint into your IDE with .eslintrc.js.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-label-marquee":{"name":"@nstudio/nativescript-label-marquee","version":"1.0.1","license":"Apache-2.0","readme":"

@nstudio/nativescript-label-marquee

\n

A Label which can scroll with a marquee effect when the text outgrows the available width.

\n
ns plugin add @nstudio/nativescript-label-marquee
\n

Usage

\n

JavaScript/TypeScript

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:lm=\"@nstudio/nativescript-label-marquee\">
    <StackLayout>
        <lm:LabelMarquee 
            text=\"Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view.\"
            fadeLength=\"150\" 
            scrollDuration=\"20\"></lm:LabelMarquee>
    </StackLayout>
</Page>
\n\n

Angular

\n
import { registerElement } from '@nativescript/angular';
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';

registerElement('LabelMarquee', () => LabelMarquee);
\n

Usage in components:

\n
<LabelMarquee 
    text=\"Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view.\"
    fadeLength=\"150\" 
    scrollDuration=\"20\">
</LabelMarquee>
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@joaotomaz/nativescript-run-cli":{"name":"@joaotomaz/nativescript-run-cli","version":"1.0.1-alpha.4","license":"ISC","readme":"

This project is under development. Some features may be removed or added in the future.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arcnet-plugin/stone-sdk":{"name":"@arcnet-plugin/stone-sdk","version":"1.0.3","license":"Apache-2.0","readme":"

@arcnet-plugin/stone-sdk

\n
ns plugin add @arcnet-plugin/stone-sdk
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fafn/nativescript":{"name":"@fafn/nativescript","version":"16.0.0","readme":"

nativescript

\n

This library was generated with Nx.

\n

Running unit tests

\n

Run nx test nativescript to execute the unit tests.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-basic":{"name":"nativescript-azure-mobile-basic","version":"0.1.2","license":{"type":"MIT","url":"https://github.com/alexziskind1/NativeScript-Azure-Mobile-Services-Module-Basic/blob/master/LICENSE"},"readme":"

NativeScript Azure Mobile Services Basic

\n

NativeScript module for basic table data GET via Azure Mobile Services as a backend. Use require() to include the module.\nThis is a super basic fetch using a URL, key, and table name to demonstrate the concept. A more in-depth Azure Mobile Services module is coming.

\n

Usage

\n
    \n
  1. set up an Azure Mobile Service, get the URL and Application key.
    2. \n
  2. create the MobileServiceClient
    3. \n
\n
// viewmodel.js
    var client = new azuremobile.MobileServiceClient(
        \"https://<Your Mobile Service URL>\", 
        \"<Your mobile service application key>\"
    );
\n
    \n
  1. call getTableItems on the client, passing in the table name and the data column name
    2. \n
\n
    var itemArr = [];

    client.getTableItems('<tableName>', '<dataColumnName>', itemArr)
        .then(function(){
            for (var i = 0; i < itemArr.length; ++i) {
                tasks.push(itemArr[i]);
            }
        });
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-raygun":{"name":"nativescript-raygun","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-raygun/blob/master/LICENSE"},"readme":"

nativescript-raygun

\n

nativescript-raygun is a plugin for NativeScript which adds support for error reporting with Raygun. The plugin uses the native Raygun SDKs for iOS and Android.

\n

Installation

\n
tns plugin add nativescript-raygun
\n

Usage

\n

Firstly, you need to create Raygun applications for your iOS and Android apps. You'll get a separate API key for each.

\n

Somewhere central in your app (such as app.js), you need to start the Raygun error reporting.

\n
var application = require(\"application\");
var raygun = require(\"nativescript-raygun\");

raygun.start(application.ios ? \"your-ios-key-here\" : \"your-android-key-here\");
\n

And that's it! If your app crashes, the error will be sent to Raygun (see notes below).

\n

If you have users that log into your app, you will want to identify them with Raygun so errors they encounter will be tracked against that user. After starting Raygun error reporting, or when the user logs into your app, identify them:

\n
raygun.identify({
  identifier: user.id.toString(), // identifier must be a string
  email: user.email,
  fullName: user.first_name + \" \" + user.last_name,
  firstName: user.first_name
});
\n

Notes

\n

When testing that error reporting is working correctly, note that for iOS, errors will not be submitted until the app is next opened by the user. Also note that errors will not be submitted when the app is hooked up to the Xcode debugger.

\n

To test error reporting is working on iOS, you should run the app on a simulator, hit the stop button in Xcode, start the app in the simulator (which is no longer hooked up to the Xcode debugger) and cause a crash. Open the app, and the crash report will be sent to Raygun.

\n

Android crashes will be submitted immediately.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-microsoft-appcenter-v2":{"name":"nativescript-microsoft-appcenter-v2","version":"3.0.4","license":"Apache-2.0","readme":"

Microsoft App Center plugin for NativeScript

\n

Requirements

\n

Before you begin, please make sure that the following prerequisites are met:

\n

Node.js

\n\n

NativeScript

\n\n

Microsoft App Center

\n\n

Installation

\n
tns plugin add nativescript-microsoft-appcenter
\n

Distribute Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
YESYES
\n

Diagnostics Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
CrashesYESYES
\n

Analytics Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
Overview: Active users, daily sessions per user, session duration, top devices, countries, languages and active users per version.YESYES
Events: Event name, Count, Trend, Users, User Change and Per User.YESYES
Log flowYESYES
\n

Push Features

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
NotificationsCOMING SOONCOMING SOON
AudiencesCOMING SOONCOMING SOON
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@spartadigital/nativescript-ns-wikitude":{"name":"@spartadigital/nativescript-ns-wikitude","version":"1.5.4","license":"MIT","readme":"

@spartadigital/nativescript-ns-wikitude

\n

This is under active development. Please Feel free to Contribute and submit any pull requests or issues.

\n

Uses Wikitude version 7.1.

\n

License

\n

This plugin is licensed under the MIT license

\n

a license for Wikitude can be obtained from them, either a trial or paid license will work.

\n

You can obtain a trial license from Here

\n

Installation

\n

to install just run

\n
    $ npm i --save @spartadigital/nativescript-ns-wikitude
\n

You then need to link your license key, you can do this by adding the following in your main.ts/main.js:

\n
global.wikitudeLicense = \"[YOUR-WIKITUDE-LICENSE-HERE]\"
\n

For {A} in your app.component.ts you should include :

\n
import { registerElement } from 'nativescript-angular/element-registry';
import { Wikitude } from '@spartadigital/nativescript-ns-wikitude';

registerElement('Wikitude', () => Wikitude);
\n

Usage & API

\n

Coming Soon™...

\n

Example

\n

Example Using Wikitude plugin in {A} :

\n

wikitude-component.html

\n
<AbsoluteLayout class=\"w-full h-full dashboard\">

    <Wikitude #wikitude
            top=\"0\"
            left=\"0\"
            [url]=\"worldUrl\"
            class=\"wikitude w-full h-full\"    
            (loadedNavigation)=\"onLoaded($event)\"          
            (javascript)=\"onJSON($event)\"
            (internalError)=\"onError($event)\">
    </Wikitude>

</AbsoluteLayout>
\n

wikitude-component.ts

\n
export class WikitudeComponent {
    ...*snip*...
    // using ~/ means that the file is a local file.
    public worldUrl: string = \"~/wk_world/index.html\"

    onError($event) {
        console.log(`Wikitude Error : ${$event.errorObject.message}`);
    }

    onJSON($event) {
        const json = <{ event: string; message: string }>JSON.parse($event.data.data);

        alert(json.message);
    }
   
    ...*snip*...
}

\n

Contributing

\n

Contribution Guidelines are coming soon!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-10hook-release-info":{"name":"nativescript-10hook-release-info","version":"1.0.0","license":"BSD-4-Clause","readme":"

nativescript-10hook-release-info

\n

Add release info to the app

\n
Detect app in release (production) mode or not
\n

Install

\n
tns plugin add nativescript-10hook-release-info
\n

Usage

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file":{"name":"nativescript-handle-file","version":"4.0.0","license":"MIT","readme":"

nativescript-handle-file

\n

This module gives you a tool to download, choose folder to save and then open an app to open file.

\n

Instalation

\n
tns plugin add nativescript-handle-file
\n

How to use

\n

Import class and instance it.

\n
import {HandleFile} from 'nativescript-handle-file';

let handleFile = new HandleFile();
handleFile.open({
    name : \"name-of-file.extension\",
    url: \"path-to-file\",
    directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
    tittle: \"title to choose apps\" // only in android
}).then(result => {
    //return true if success
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vuexp":{"name":"vuexp","version":"0.3.0","license":"MIT","readme":"

Vue Cross Platform (VueXP)

\n

Cross Platform application development with VueJs. Write once deploy everywhere!

\n
Project setup
\n
npm install
\n
Lints and fixes files
\n
npm run lint
\n
Run unit tests
\n
npm run test:unit
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-passportscanner":{"name":"nativescript-passportscanner","version":"1.0.0","license":"MIT","readme":"

NativeScript Flashlight Plugin

\n

A plugin for using your device's flashlight in NativeScript Android and iOS apps.

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-flashlight
\n

This command automatically installs the necessary files, as well as stores nativescript-flashlight as a dependency in your project's package.json file.

\n

Usage

\n

To use the flashlight module you must first require() it:

\n
// JavaScript
var flashlight = require(\"nativescript-flashlight\");
\n

Or if you’re using TypeScript, import the module:

\n
// TypeScript
import * as flashlight from \"nativescript-flashlight\";
\n

After you have a reference to the module you can then call its on(), off(), and toggle() methods. For example, the code below turns your device's flashlight on with an intensity setting of 25%.

\n

The optional intensity is supported only on iOS and is by default 1.0, which is 100% brightness.

\n
// my-page.js
var flashlight = require(\"nativescript-flashlight\");
flashlight.on({
    intensity: 0.25
});
\n

In most cases you'll want to wrap your on() call with a check of isAvailable(), to handle devices where a flashlight is not available:

\n
// my-page.js
var flashlight = require(\"nativescript-flashlight\");
if (flashlight.isAvailable()) {
\tflashlight.on();
} else {
\talert(\"A flashlight is not available on your device.\");
}
\n

Examples

\n

The code below creates a button that toggles the device's flashlight:

\n
<!-- my-page.xml -->
<Page loaded=\"pageLoaded\">
    <StackLayout>
        <Button text=\"{{ flashlightState }}\" tap=\"{{ toggleFlashlight }}\" />
    </StackLayout>
</Page>
\n
// my-page.js
var flashlight = require(\"nativescript-flashlight\");
var observable = require(\"data/observable\");
var viewModel = new observable.Observable();

// Set the initial text of the button
viewModel.set(\"flashlightState\", \"Turn on\");

// A tap handle for the page's button. Toggle the state of the flashlight
// and the button's text
viewModel.toggleFlashlight = function() {
    if (flashlight.isAvailable()) {
        flashlight.toggle({
            intensity: 0.6 // optional, supported on iOS only (default: 1.0 which is 100% brightness)
        });
        viewModel.set(\"flashlightState\", (flashlight.isOn() ? \"Turn off\" : \"Turn on\"));
    } else {
        alert(\"A flashlight is not available on your device.\");
    }
};

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = viewModel;
}

exports.pageLoaded = pageLoaded;
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-logEntries":{"name":"nativescript-logEntries","version":"1.0.1","license":{"type":"MIT","url":"https://github.com/AntonioCuevaUrraco/nativescript-logEntries/blob/master/LICENSE"},"readme":"

nativescript-logEntries

\n

This plugin provide a way to use LogEntries service on a NativeScript project.
\nThe plugin is a wrap of the android and ios official sdks
\nhttps://github.com/logentries/le_android
\nhttps://github.com/logentries/le_ios

\n

Installation

\n
tns plugin add nativescript-logEntries
\n

Usage

\n

First create a new Log for android and/or iOS and store the tokens that logEntries will provide to you

\n
//Somewhere on your app.

var logEntries = require(\"nativescript-logEntries\");

 logEntries.init(\"YourToken\");
 logEntries.log(\"this is the message\");
\n

If you want to use it to send crash reports, store the crash on devie and send it next time the device is opened.

\n
//on app.ts

var setString = applicationSettingModule.setString;

application.on(application.uncaughtErrorEvent, function(args) {

\tif (args.ios) {
        console.log(\"NativeScriptError: \" + args.ios);
        console.log(\"Stacktrace: \" + args.ios.stack);
        setString(\"crash\", args.ios + args.ios.stack);
   }
\telse if (args.android) {
    console.log(\"NativeScriptError: \" + args.android);
\t\tconsole.log(\"NativeScriptError: \" + args.android.nativeException);
\t\tconsole.log(\"NativeScriptError: \" + args.android.nativeException.getMessage());
\t\tsetString(\"crash\", args.android +
\t\t                   args.android.nativeException +
\t\t                   args.android.nativeException.getMessage());
\t}
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hosted-toast":{"name":"nativescript-hosted-toast","version":"1.0.0","license":"MIT","readme":"

Nativescript Hosted Toast Plugin

\n

This a Nativescript Plugin that lets you make toast from a hosted Angular 2 application.

\n

Installation

\n
tns plugin add nativescript-hosted-toast
\n

Usage

\n

Create a wrapper application with the following code and a Navivescript WebView.\nSee the following project as an example:\nhttps://github.com/Ulbora/NSWrapper

\n
var application = require(\"application\");
var context = application.android.context;
function pageLoaded(args) {
    var page = args.object;   
    var web = page.getViewById(\"webView\"); 
    var androidSettings = web.android.getSettings();
    androidSettings.setJavaScriptEnabled(true);    
    var hostedToast = new com.ulbora.hosted.toast.HostedToast(context);    
    web.android.addJavascriptInterface(hostedToast, 'HostedToast');
    web.url = \"http://someURLWhereAngular2AppIsHosted\";
}
exports.pageLoaded = pageLoaded;
\n

Inside the Angular 2 hosted application, write the code where you want to access device information.\nSee the following project as an example:\nhttps://github.com/KenWilliamson/Angular2HostedMobileApp

\n

Component code:

\n
deviceReady: boolean;

 ngOnInit() {        
        try {
            if (HostedToast) {
                this.deviceReady = true;
            }
        } catch (err) {
        }
    }


 showToast() {
        try {
            HostedToast.showToast(\"Toast is working in a hosted world.\");            
        } catch (err) {
        }
    }
\n

Template Code:

\n
<div *ngIf=\"deviceReady\">
    <div> <b>Your Toast</b>: <span (click)=\"showToast()\" class=\"glyphicon glyphicon-phone\"></span></div>        
</div>
\n

Available Methods

\n

HostedToast.showToast("some message")

\n

Sends a toast message to the device

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paycards-recognizer":{"name":"nativescript-paycards-recognizer","version":"1.0.6","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/brightness":{"name":"@nativescript/brightness","version":"2.0.0","license":"Apache-2.0","readme":"

Nativescript brightness

\n
ns plugin add @nativescript/brightness
\n

This command automatically installs the necessary files, as well as stores @nativescript/brightness as a dependency in your project's package.json file.

\n

This plugin requires <uses-permission android:name="android.permission.WRITE_SETTINGS"/> to be added in the android manifest.

\n

Usage

\n

To use the brightness module you must first require() and instantiate it:

\n
// JavaScript
var nativescriptBrightness = require(\"@nativescript/brightness\");
var brightness = new nativescriptBrightness.Brightness();
\n

Or if you’re using TypeScript, import the module:

\n
// TypeScript
import { Brightness } from '@nativescript/brightness';
const brightness = new Brightness();
\n

After you have a reference to the module you can then call its get() and set() methods. For example, the code below updates you screen's brightness with an intensity setting of 25%.

\n

The intensity can be set to a value from 1 to 100.

\n
// TypeScript
import { Brightness } from '@nativescript/brightness';
const brightness = new Brightness();

brightness.set({
    intensity: 25
});
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
set(options: BrightnessOptions)set screen's brightness to the desired intensity
getreturns current screen brightness value as a number between 0 and 100
getNativereturns current screen brightness value as returned from the native api: between 0.0 and 1.0 for iOS and 0 and 255 for android
\n

BrightnessOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
intensity100defines the desired brightness value, which should be a number between 0 and 100.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-idle":{"name":"nativescript-idle","version":"1.0.1","license":"Apache-2.0","readme":"

A NativeScript plugin that lets you to post a callback to be executed when the application is in relatively idle state.\nThis can be used to schedule short-lived tasks that have to be executed on the main thread but are not critical and can be postponed for times when the user is not interacting with the application.

\n

For example:

\n
import { requestIdleFrame } from \"nativescript-idle\";

requestIdleFrame(() => {
    var msg = \"preloading \" + route.path;
    console.log(msg);
    var start = Date.now();
    // Task taking ~40ms.
    load();
    this.loadedPaths.push(route.path);
    var end = Date.now();
    console.log(msg + \" in \" + (end - start));
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-sdk":{"name":"nativescript-google-sdk","version":"0.1.18","license":"Apache-2.0","readme":"

NativeScript plugin for Google Maps SDK

\n

The plugin is in experimental state!

\n

if you want to contribute please send pull request. The source code is available at GitHub

\n

With the NativeScript plugin for Google Maps SDK you can easily use the native Google Maps API in a cross-platform manner for Android and iOS.

\n\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n

The plugin is available for installing as an npm package.

\n

First you need to create a NativeScript project. If you are new to NativeScript, please follow the NativeScript getting started guide to create your app.

\n

After you have the app created, in the command prompt, at the root of the NativeScript project, run the following command.

\n
tns plugin add nativescript-google-sdk
\n

Now you have the plugin installed. In this version the plugin is not adding the native Google SDKs, so you will need to add them manualy.

\n

If you are new to GooglePlayServices, please read the official guide about how to install the native GooglePlay services on your machine. Make sure to get the latest SDKs installed to make sure that the entire API will be available to you.

\n

After the GooglePlay services are installed, for Android please run the followng command:

\n
tns library add android \"path to the GooglePlayServices SDK\"
\n

For example:

\n
tns library add android \"C:\\Users\\me\\AppData\\Local\\Android\\android-sdk\\extras\\google\\google_play_services\\libproject\\google-play-services_lib\"
\n

This will add the native libraries in the NativeScript project and will make the native API available for consumption in JavaScript.

\n

The next step is to modify the AndroidManifest.xml file. It is located in your project folder in platforms/android/ folder. Please merge the content of the two <application> sections into one section only. This is all you need to do in the AndroidManifest.xml file.

\n

The next step is to set the GooglePlay API_KEY. It is specific for each app and each user, so you need to get it from the google service. Here is a tutorial how to obtain that key.

\n

Set the API_KEY in the AndroidManifest.xml file for the <meta-data android:name="com.google.android.geo.API_KEY" entry.

\n

You are now done and you can start using the plugin from your application! Follow the next steps to see how to use the plugin and add the maps to your application UI.

\n

Adding the map to the screen.

\n

Modify the /app/main-page.xml file to look like this:

\n
 <Page 
\txmlns=\"http://www.nativescript.org/tns.xsd\"
\txmlns:googleSDK=\"tns_modules/nativescript-google-sdk\"
\t>
  <GridLayout>
    <googleSDK:MapView/>
  </GridLayout>
</Page>
\n

and then execute

\n
tns run android
\n

This will show the MapView with its default settings. To set the behavior of the MapView component you need to handle the mapCreated event and configure it. Modify the xml declaration in /app/main-page.xml file, for the MapView to look like this:

\n
<googleSDK:MapView mapReady=\"OnMapReady\"/>
\n

then in the JS code behind (in /app/main-page.js file) declare the mapReady callback:

\n
function OnMapReady(args) {
\tvar mapView = args.object.android;

\tvar gMap = mapView.getMap();

\t/*
\t * gMap is the reference to the native GoogleMap object. See the native  API reference 
\t * to configure the map - https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap
\t *
\t * The code below is a sample implementation which will open the map with location and marker set to Sydney, Australia.
\t *
\t */
\tvar latlng = new com.google.android.gms.maps.model.LatLng(-33.86, 151.20);

\tgMap.setMyLocationEnabled(true);
\tconsole.log(\"gMapsPlugin:onMapReady:LocationENabled\");

\tgMap.moveCamera(com.google.android.gms.maps.CameraUpdateFactory.newLatLngZoom(latlng, 13));
\tconsole.log(\"gMapsPlugin:onMapReady:CameraMoved\");       

\tmarkerOptions = new com.google.android.gms.maps.model.MarkerOptions();
\tmarkerOptions.title(\"Sydney\");
\tmarkerOptions.snippet(\"Australia\");

\tmarkerOptions.position(latlng);
\tconsole.log(\"gMapsPlugin:onMapReady:SettingMarker\");

\tgMap.addMarker(markerOptions);
\tconsole.log(\"gMapsPlugin:onMapReady:MarkerSet\");
}
exports.OnMapReady = OnMapReady;
\n

Now execute

\n
tns run android
\n

and enjoy the map of Syddney, Australia on your device.

\n

If you have any problems, questions or suggestions you are more than welcome to log an issue in GitHub.

\n
// support is coming for iOS
\n

[Back to Top][1]

\n

License

\n

This software is licensed under the Apache 2.0 license, quoted here.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ios-security":{"name":"@nativescript/ios-security","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/ios-security

\n

🔒 IOSSecuritySuite for NativeScript.

\n
\n

🌏 iOS Security Suite is an advanced and easy-to-use platform security & anti-tampering library. If you are developing for iOS and you want to protect your app according to the OWASP MASVS standard, chapter v8, then this library could save you a lot of time. 🚀\nWhat ISS detects:

\n\n
\n
ns plugin add @nativescript/ios-security
\n

Usage

\n

TypeScript

\n
import { IOSSecurity } from \"@nativescript/ios-security\";
\n

Javascript

\n
var IOSSecurity = require(\"@nativescript/ios-security\").IOSSecurity;
\n

Update Info.plist

\n

After adding ios-security to your project, you will also need to update your Info.plist. There is a check in jailbreak detection module that uses canOpenURL(_:) method and requires specifying URLs that will be queried.

\n
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>cydia</string>
    <string>undecimus</string>
    <string>sileo</string>
    <string>zbra</string>
    <string>filza</string>
    <string>activator</string>
</array>
\n

Jailbreak detector module

\n\n

Javascript

\n
if (IOSSecurity.amIJailbroken()) {
\tconsole.log(\"This device is jailbroken\");
} else {
\tconsole.log(\"This device is not jailbroken\");
}
\n

Debugger detector module

\n
const amIDebugged = IOSSecurity.amIDebugged();
\n

Deny debugger at all

\n
IOSSecurity.denyDebugger();
\n

Emulator detector module

\n
const runInEmulator = IOSSecurity.amIRunInEmulator();
\n

Reverse engineering tools detector module

\n
const amIReverseEngineered = IOSSecurity.amIReverseEngineered();
\n

System proxy detector module

\n
const amIProxied = IOSSecurity.amIProxied();
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mdc-lib":{"name":"nativescript-mdc-lib","version":"1.0.2","license":"MIT","readme":"

Material Components plugin for NativeScript

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-mdc-lib
\n

See the NativeScript CLI documentation\nand Nativescript Plugin documentation for more details

\n

Notes

\n

This plugin only provides the iOS Material Components library from CocoaPods,\nand doesn't provide any JavaScript wrappers or APIs

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-cp":{"name":"nativescript-onesignal-cp","version":"1.0.11","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

NativeScript-OneSignal

\n

A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

\n

Contributors

\n

OneSignal-iOS-SDK

\n

OneSignal-Android-SDK

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-onesignal
\n

iOS

\n

Does not need any configuration.

\n

Android

\n

Does not need any configuration.

\n

Usage

\n

Typescript

\n
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
\n

iOS

\n

TnsOneSignal is the native iOS OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.ios) {
\tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

\t\tpublic static ObjCProtocols = [UIApplicationDelegate]

\t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

\t\t\ttry {

\t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

\t\t\t} catch (error) {
\t\t\t\tconsole.error('error', error)
\t\t\t}

\t\t\treturn true
\t\t}

\t}
\tapplication.ios.delegate = MyDelegate
}
\n

Android

\n

TnsOneSignal is the native Android com.onesignal.OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.android) {
\tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

\t\ttry {

\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\tTnsOneSignal.startInit(application.android.context).init()

\t\t} catch (error) {
\t\t\tconsole.error('error', error)
\t\t}

\t})
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Typescript Typings

\n

iOS

\n

Android - In the works...

\n

Demo

\n
npm run setup
# iOS
npm run demo.ios
# Android
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-master-technology-updated":{"name":"nativescript-master-technology-updated","version":"1.2.0","readme":"

\"npm\"\n\"npm\"\n\"npm\"

\n

nativescript-master-technology-updated

\n

A library of generic functions that are useful in NativeScript

\n

License

\n

This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

\n

I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

\n

\"Donate\"\n\"Patreon\"

\n

Updates

\n

Please feel free to fork this repo and add other utility functions!!!

\n

Installation

\n

Supports all NativeScript versions from 2.x till 5.x

\n

tns plugin add nativescript-master-technology-updated

\n

Notes:

\n

The first release of this library had a ton of DOM routines, these have been moved to there own plugin called 'nativescript-dom'

\n

Usage

\n

To use the module you must first require() it:

\n
require( \"nativescript-master-technology-updated\" );
\n

All routines are global; you do not need to keep a reference to the library.

\n

If you get TypeScript complaining about process not being defined, then put /// <reference path="./node_modules/nativescript-master-technology-updated/references.d.ts" /> in your references.d.ts.

\n

Methods

\n

setImmediate();

\n

Push this task off to the next available time slice.

\n

clearImmediate(id)

\n

Clears an timer scheduled via setImmediate...

\n

performance.now()

\n

Returns the current time stamp in NS or MS (depends on the platform)

\n

process.restart()

\n

IOS will tell the user they need to restart; and then exit. (Apple doesn't appear to have any "restart" app ability)\nAndroid will quit and restart the app.

\n

process.exit()

\n

Exit the application

\n

process.isDebug()

\n

Detects if you are running the debug version of the code on Android, on ios it returns Process.isEmulator()

\n

process.isEmulator()

\n

Detects if you are running on an emulator

\n

process.processMessages()

\n

A Syncronous method to cause IOS & Android to handle their message loops.

\n

console.keys()

\n

Prints out all the keys in the object

\n

Optionally: You can pass true as second argument to also print the value:

\n
var data = {
  id: 1,
  name: 'Nathan'
};
console.keys(data, true);

// id:  1
// name:  Nathan
\n

Breaking Changes

\n

Renamed Performance.now to performance.now -- not sure why I messed up the name in the first place; but the proper name for compatibility sake is "performance.now()"...

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ibeacon":{"name":"nativescript-ibeacon","version":"0.8.1","license":"MIT","readme":"

\"npm\"\n\"npm\"

\n

NativeScript iBeacon

\n

Let you range for iBeacons, managing permissions. iOS and Android.

\n

Install it

\n
tns plugin add nativescript-ibeacon
\n

Use it

\n
Add permissions on Android Manifest
\n
<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>
<uses-permission android:name=\"android.permission.BLUETOOTH\" />
<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" />
\n

you can also use android.permission.ACCESS_FINE_LOCATION instead of android.permission.ACCESS_COARSE_LOCATION

\n
Add keys on iOS Info.plist
\n
Background usage
\n
<key>NSLocationAlwaysUsageDescription</key>
<string>My description explaining why I need it</string>
\n
Foreground usage
\n
<key>NSLocationWhenInUseUsageDescription</key>
<string>My description explaining why I need it</string>
\n
Use it
\n
Create the object passing the callback and the options
\n
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';

let callback: BeaconCallback = {
    onBeaconManagerReady(): void {
        // start ranging and/or monitoring only when the beacon manager is ready
        this.nativescriptIbeacon.startRanging(this.region);
        this.nativescriptIbeacon.startMonitoring(this.region);
    },
    didRangeBeaconsInRegion: function(region: BeaconRegion, beacons: Beacon[]) {

    },
    didFailRangingBeaconsInRegion: function(region: BeaconRegion, errorCode: number, errorDescription: string) {

    }
}

let options: BeaconLocationOptions = {
    iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
    androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
    androidAuthorisationDescription: \"Location permission needed\"
};

let nativescriptIbeacon = new NativescriptIbeacon(callback, options);

let region = new BeaconRegion(\"HelloID\", \"2f234454-cf6d-4a0f-adf2-f4911ba9ffa6\");
\n
Request for permissions and bind BeaconManager
\n

We need to be sure to have permission and we need to prepare the BeaconManager by calling bind().

\n
if (!nativescriptIbeacon.isAuthorised()) {
    console.log(\"NOT Authorised\");
    nativescriptIbeacon.requestAuthorization()
        .then(() => {
            console.log(\"Authorised by the user\");
            nativescriptIbeacon.bind();

        }, (e) => {
            console.log(\"Authorisation denied by the user\");
        })
} else {
    console.log(\"Already authorised\");
    nativescriptIbeacon.bind();
}
\n

After the BeaconManager is ready, the event onBeaconManagerReady() is called. After that we can call startRanging(region) or startMonitoring(region).

\n

If we call startRanging(region) or startMonitoring(region) before calling bind(), it will be called internally and the region will be registered after the BeaconManager will be ready.

\n
Stop ranging
\n
nativescriptIbeacon.stopRanging(region);
\n
Stop monitoring
\n
nativescriptIbeacon.stopMonitoring(region);
\n
Unbind
\n

To dispose the BeaconManager, call the method unbind()

\n
nativescriptIbeacon.unbind();
\n

Note on the Beacon class

\n

The shared Beacon class contain the following values:

\n
public proximityUUID: string;\npublic major: number;\npublic minor: number;\n\npublic rssi: number;\npublic distance_proximity: number;  // distance in Android, proximity in iOS\npublic txPower_accuracy: number;  // txPower in Android, accuracy in iOS\n
\n

As you can see there is some difference on iOS and Android platform regarding the last 2 values. Keep this in mind while using the class.

\n

On iOS, the values for proximity are:

\n
public enum CLProximity : Int {\n    case unknown  // =0\n    case immediate  // =1\n    case near  // =2\n    case far  // =3\n}    \n\nThe value in this property gives a general sense of the relative distance to the beacon. \nUse it to quickly identify beacons that are nearer to the user rather than farther away.\n
\n

On iOS, accuracy is described like:

\n
Indicates the one sigma horizontal accuracy in meters. Use this property to differentiate between beacons with the same proximity value. Do not use it to identify a precise location for the beacon. Accuracy values may fluctuate due to RF interference.\nA negative value in this property signifies that the actual accuracy could not be determined.\n\npublic typealias CLLocationAccuracy = Double\n
\n

Run the demo

\n

Please note that you need a real device to test beacon ranging (you will receive an error otherwise).

\n

To run the demo you can use one of the following commands:

\n
npm run demo.ios.device\n
\n

or

\n
npm run demo.android.device\n
\n

TODO

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"prash-pod-pluginman":{"name":"prash-pod-pluginman","version":"2.2.0","license":"Apache-2.0","readme":"

@prash/prash-pod-plugin

\n
ns plugin add @prash/prash-pod-plugin
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ejaszke/nativescript-highcharts":{"name":"@ejaszke/nativescript-highcharts","version":"1.0.6","license":"Apache-2.0","readme":"

nativescript-highcharts

\n

This plugins allows you to use Highcharts in NativeScript.

\n
ns plugin add @ejaszke/nativescript-highcharts
\n

Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

\n

Screenshots

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo.ios # or apps.demo.android
\n

NativeScript-Angular

\n

Check out the demo-angular folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo-angular.ios # or apps.demo-angular.android
\n

Usage

\n

NativeScript-Core

\n

TypeScript

\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

\n
...
export class HomeViewModel extends Observable {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

XML

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:ui=\"@mhtghn/nativescript-highcharts\">

    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
    </GridLayout>
</Page>
\n

NativeScript Angular

\n

TypeScript

\n

Import the HighchartsModule in your module.

\n
...
import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

@NgModule({
    imports: [
        ...
        HighchartsModule
    ],
    ...
})
export class HomeModule { }
\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

@Component({
    selector: \"Home\",
    moduleId: module.id,
    templateUrl: \"./home.component.html\"
})
export class HomeComponent implements OnInit {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

HTML

\n
<ActionBar class=\"action-bar\">
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout class=\"page\">
    <!-- Add your page content here -->
    <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
</GridLayout>
\n

Highcharts Compatibility

\n\n

Tips

\n\n

Credit

\n

This plugin is greatly inspired by this demo from Eddy Verbruggen

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/ns8-facebook":{"name":"@res0/ns8-facebook","version":"2.1.3","license":"Apache-2.0","readme":"

@nativescript/facebook

\n
npm install @nativescript/facebook
\n

Prerequisites

\n

Android

\n

Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

\n

iOS

\n

Follow step 3 in the Getting Started Guide for Facebook SDK for iOS.

\n

Usage

\n

You can also use the Login Manager with custom UI to perform Login.

\n
import { LoginManager, AccessToken } from '@nativescript/facebook';

LoginManager.init() // call init early in the app lifecycle e.g main.ts/app.ts

try {
\tconst result = await LoginManager.logInWithPermissions(['public_profile']); // LoginResult
\tconst accessToken = AccessToken.currentAccessToken();
} catch (e) {}




LoginManager.logOut(); // Whenever you're done
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@irman/nativescript-ng2-slides":{"name":"@irman/nativescript-ng2-slides","version":"0.1.6","license":"MIT","readme":"

NativeScript NG2 Slides for iOS and Android -- ALPHA

\n

\"npm\"\n\"npm\"

\n

Intro slides example:

\n

\"Nativescript

\n

Image carousel example:

\n

\"Nativescript

\n

videos are from the NativeScript Slides plugin. all features may not be implemented yet.

\n

videos by Brad Martin

\n

Example Usage:

\n
import { SlidesModule } from '@irman/nativescript-ng2-slides';

import { AppComponent } from \"./app.component\";

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule, SlidesModule],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }
\n

XML

\n

<slides>
    <slide class=\"slide-1\">
        <Label text=\"This is Panel 1\"></Label>
    </slide>
    <slide class=\"slide-2\">
        <Label text=\"This is Panel 2\"></Label>
    </slide>
    <slide class=\"slide-3\">
        <Label text=\"This is Panel 3\"></Label>
    </slide>
    <slide class=\"slide-4\">
        <Label text=\"This is Panel 4\"></Label>
    </slide>
    <slide class=\"slide-5\">
        <Label text=\"This is Panel 5\"></Label>
    </slide>
</slides>
\n

CSS

\n
.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
\tcolor: #fff;

}
\n

Great for Intros/Tutorials to Image Carousels.

\n

This very much a work in progress. Please feel free to contribute.

\n

Attributes for SlideContainer

\n\n

Indicators

\n

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

\n
.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}
\n

Plugin Development Work Flow:

\n\n

Known issues

\n\n

Contributing guidelines

\n

Contributing guidelines

\n

License

\n

MIT

\n

for {N} version 2.0.0+

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-fixed":{"name":"nativescript-onesignal-fixed","version":"1.0.9","license":"MIT","readme":"

NativeScript-OneSignal

\n

A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

\n

Contributors

\n

OneSignal-iOS-SDK

\n

OneSignal-Android-SDK

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-onesignal
\n

iOS

\n

Does not need any configuration.

\n

Android

\n

Does not need any configuration.

\n

Usage

\n

Typescript

\n
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
\n

iOS

\n

TnsOneSignal is the native iOS OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.ios) {
\tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

\t\tpublic static ObjCProtocols = [UIApplicationDelegate]

\t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

\t\t\ttry {

\t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

\t\t\t} catch (error) {
\t\t\t\tconsole.error('error', error)
\t\t\t}

\t\t\treturn true
\t\t}

\t}
\tapplication.ios.delegate = MyDelegate
}
\n

Android

\n

TnsOneSignal is the native Android com.onesignal.OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.android) {
\tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

\t\ttry {

\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\tTnsOneSignal.startInit(application.android.context).init()

\t\t} catch (error) {
\t\t\tconsole.error('error', error)
\t\t}

\t})
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Typescript Typings

\n

iOS

\n

Android - In the works...

\n

Demo

\n
npm run setup
# iOS
npm run demo.ios
# Android
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/ml-kit":{"name":"@awarns/ml-kit","version":"1.0.1","license":"Apache-2.0","readme":"

@awarns/ml-kit

\n

\"npm\n\"npm\"

\n

This module allows to execute TensorFlow Lite machine learning models embedded in the mobile device,\nwhich is useful to make predictions based on some input data.

\n

Supported models architectures are Convolutional Neural Networks (CNN) and Multilayer Perceptrons (MLP), both for classification\nand regression problems.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/ml-kit
\n

Usage

\n

After installing this plugin, you will have access to an API and two tasks to perform classification or regression on the provided input data.\nBut before using the plugin, you must meet the following requirements regarding the machine learning model:

\n\n

API

\n

In order to do a regression or a classification, first you have to load a machine learning model. You can do that using the getModel(...) method provided\nby the ModelManager. It also provides the listModels method, useful known which models are available in the device.

\n

When you load a model using the getModel(...) method, you obtain a BaseModel or a ClassificationModel to perform a regression or a\nclassification, respectively. To do so, you can create a Regressor using a BaseModel, and a Classifier using\na ClassificationModel. Finally, to perform the prediction, you just have to call to the predict method, which will return a RegressionResult or a ClassificationResult, depending on which predictor has been used.

\n

Here's a complete example:

\n
import {
  BaseModel,
  ClassificationModel,
  ClassificationResult,
  Classifier,
  DelegateType,
  getModelManager,
  InputData,
  ModelType, RegressionResult, Regressor
} from '@awarns/ml-kit';

async function doClassification(inputData: InputData /* number[] */) {
  const model: ClassificationModel = await getModelManager().getModel(
    'activity_classifier-cnn',
    ModelType.CLASSIFICATION,
    { acceleration: DelegateType.GPU } // Use GPU, if available.
  );

  const classifier = new Classifier(model);
  const result: ClassificationResult = classifier.predict(inputData);
}

async function doRegression(inputData: InputData /* number[] */) {
  const model: BaseModel = await getModelManager().getModel(
    'stress_regressor-cnn',
    ModelType.REGRESSION,
    { acceleration: 4 } // Use 4 threads.
  );

  const regressor = new Regressor(model);
  const result: RegressionResult = regressor.predict(inputData);
}
\n
\n

Note: the RegressionResult and ClassificationResult are not framework records. If you want to introduce these results into the framework\nfor example, to persist them using the persistence package,\nyou have to manually create a Regression and Classification records.

\n
\n

ModelManager

\n

You can obtain the singleton instance of the ModelManager calling the getModelManager() function.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
listModels()Promise<Model[]>Returns a list of the models that are available for their use.
getModel(modelName: string, modelType: ModelType, modelOptions?: ModelOptions)Promise<BaseModel|ClassificationModel>Retrieves and loads the specified model, ready to be used.
\n
Model
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
modelInfoModelInfoContains model's metadata.
\n
ModelInfo
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringIdentifier of the model, generally the name of its file.
namestringName info included in the model's metadata.
architectureModelArchitectureArchitecture of the model, i.e., CNN or MLP.
versionstringVersion info included in the model's metadata.
authorstringAuthor info included in the model's metadata.
\n
ModelType
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ValueDescription
REGRESSIONA model that performs a regression.
CLASSIFICATIONA model that performs a classification.
\n
ModelOptions
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
accelerationDelegateType | numberWhich type of acceleration to use when running the model. It can take the values DelegateType.GPU (GPU acceleration), DelegateType.NNAPI (Android Neural Networks API acceleration) or a number indicating the quantity of threads to use.
\n

Regressor

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
predict(inputData: InputData)RegressionResultPreforms a regression using the provided data.
\n

Classifier

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodReturn typeDescription
predict(inputData: InputData)ClassificationResultPreforms a classification using the provided data.
\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
{classificationAim}Classification{tag?}It performs a classification using the input data contained on the invocation event's payload. classificationAim is used to differentiate among classification tasks. An optional tag can be added to the task name.
{regressionAim}Regression{tag?}It performs a regression using the input data contained on the invocation event's payload. regressionAim is used to differentiate among regression tasks. An optional tag can be added to the task name.
\n
\n

Note: the input data provided through the invocation event's payload must be an array of numbers ready to be feed into the model.\nIn other words, the main application is the one in charge of executing the required data preprocessing techniques (e.g., normalization, feature extraction, etc...) to prepare the data for the model, not this module.

\n
\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  classificationTask,
  regressionTask,
  DelegateType,
} from '@awarns/ml-kit';
import { DelegateType } from './index';

export const demoTasks: Array<Task> = [
  classificationTask('human-activity', 'activity_classifier-mlp', '', { acceleration: 4 }),
  // humanActivityClassification

  classificationTask('human-activity', 'activity_classifier-cnn', 'UsingCNN', { acceleration: DelegateType.GPU }),
  // humanActivityClassificationUsingCNN
  
  regressionTask('stress-level', 'stress_regressor-cnn'),
  // stressLevelRegression
]
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter nameTypeDescription
{classification|regression}AimstringObjective of the classification/regression. Used to name the task.
modelNamestring | ModelNameResolverName of the model (without tflite extension) stored in the ml-models folder to use for this task, or a function that returns the name of the model when called.
tag (Optional)stringAdds a tag to the name of the task to differentiate it from other tasks with other configurations.
modelOptions (Optional)ModelOptions | ModelOptionsResolverConfiguration to use with the model or a function that returns the configuration when called.
\n
\n

Note: It's highly recommended to provide the {classification|regression}Aim in snake-case format. This string will be used as the type of the output record of the task.\nAll the records have their type in snake-case, so providing the {classification|regression}Aim in snake-case will keep the consistency of the framework.

\n
\n
ModelNameResolver: () => string
\n

Useful to change the model used by a task at runtime. You can use the ModelManager to obtain a list with the models that are available in the device.

\n
ModelOptionsResolver: () => ModelOptions
\n

Useful to change the options used by the model of a task at runtime.

\n

Tasks output events:

\n\n
\n

Example usage in the application task graph:

\n
on('inputDataForHumanActivity', run('humanActivityClassificationUsingCNN'));
on('humanActivityPredicted', run('writeRecords'));

on('inputDataStressLevel', run('stressLevelRegression'));
on('stressLevelPredicted', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
{classificationAim}PredictedClassificationIndicates that a classification has been completed.
{regressionAim}PredictedRegressionIndicates that a regression has been completed.
\n

Records

\n

Classification

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways {classificationAim}-prediction.
changeChangeAlways NONE.
timestampDateThe local time when the model predicted the classification result.
classificationResultClassificationResultObject containing the results of the classification.
\n
ClassificationResult
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
predictionClassificationPrediction[]Array of the classification predictions generated by the model.
modelNamestringThe name of the model used for the classification.
architecturestringThe architecture of the model used for the classification.
versionstringThe version of the model used for the classification.
\n
ClassificationPrediction
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
labelstringIdentifier of the class.
scorenumberScore of the prediction.
\n

Regression

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways {regressionAim}-prediction.
changeChangeAlways NONE.
timestampDateThe local time when the model predicted the regression result
regressionResultRegressionResultObject containing the results of the regression.
\n
RegressionResult
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
predictionnumber[]Array of numbers with the results generated by the model.
modelNamestringThe name of the model used for the regression.
architecturestringThe architecture of the model used for the regression.
versionstringThe version of the model used for the regression.
\n

License

\n

Apache License Version 2.0

\n

Disclaimer

\n

While we state that CNN models are supported, only 1D-CNN models have been tested. The code is general enough to support 2D and 3D CNN models with one input tensor,\nbut they have not been tested. If you try 2D/3D-CNN models and something is not working as expected, contact us.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-router-ns":{"name":"nativescript-vue-router-ns","version":"1.0.4","license":"MIT","readme":"

A simple router implementation that is suitable for NativeScript-Vue.

\n

Prerequisites / Requirements

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
All your own components must have unique name
All routes name must have unique name
Your app need a main Frame in the render
\n

Install

\n
npm install nativescript-vue-router-ns --save
or
yarn add nativescript-vue-router-ns
\n

Usage

\n
// app/router/index.js

import Vue from 'nativescript-vue'

import NSVueRouter from 'nativescript-vue-router-ns'

import Dashboard from './components/Dashboard'
import Login from './components/Login'

Vue.use(NSVueRouter)

const routes = [
  {
    name: 'dashboard.index',
    component: Dashboard,
    meta: { auth: true }
  },
  {
    name: 'login.index',
    component: Login,
    meta: { guest: true }
  }
]

const router = new NSVueRouter({
  ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
  routes,
  /* eslint-disable-next-line no-undef  */
  verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
})

export default router
\n
// app/app.js or app/main.js

import Vue from 'nativescript-vue'

import Main from './Main'

import router from './router'

new Vue({
  router

  // ...

  render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
}).$start()
\n
<!-- Your own Vue Components -->
<template>
  <Page actionBarHidden=\"true\">
    <FlexboxLayout flexDirection=\"column\" justifyContent=\"center\">
      <button text=\"Navigate direct\" @tap=\"$router.push('dashboard.index')\" />

      <button text=\"Navigate with method\" @tap=\"submit\" />
    </FlexboxLayout>
  </Page>
</template>

<script>
  export default {
    name: 'LoginIndex',

    methods: {
      submit() {
        // ...

        this.$router.pushClear('dashboard.index')

        // ...
      }
    }
  }
</script>
\n

Guards and other before actions

\n
// app/router/index.js

// ...

router.beforeEach((to, next) => {
  if (to.meta.auth && isLogged) {
    /* eslint-disable-next-line no-undef */
    if (TNS_ENV !== 'production') {
      /* eslint-disable-next-line no-console */
      console.error(new Error('To Login!.'))
    }

    router.pushClear('login.index')
  } else if (to.meta.guest && isLogged) {
    router.push('dashboard.index')
  } else {
    next()
  }
})

// ...
\n

API

\n

Installing

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDefaultDescription
ignoreSameBooleantrueSet if reject or accept navigate to same current component.
routesArray[]Array of objects with app's routes.
verboseBooleanfalseShow output the warnings to console.
\n

Navigating

\n

This package provides 3 methods for navigation, $router.push, $router.pushClear and $router.back

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersTypeDescription
nameStringFirst parameter in push and pushClear methods.
optionsObjectIs an optional object, which accepts all options supported by Manual Routing
times[String, Number]Optional parameter in back method that go back any times that you set.
\n

NOTE: When $router.pushClear method is used the navigator stack is cleaned.

\n

TODO

\n\n

Contributing

\n

Thank you for considering contributing to the NSVueRouter! Please leave your PR or issue.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ddp-login":{"name":"nativescript-ddp-login","version":"1.2.0","license":"MIT","readme":"

#Installation

\n
tns plugin add https://github.com/triniwiz/nativescript-ddp-client
tns plugin add nativescript-ddp-login
\n
var DDPClient = require('nativescript-ddp-client');
var DDPLogin = require('nativescript-ddp-login');

var login = new DDPLogin();
    

var token = null;

// Resume login with valid token from previous login
login.loginWithToken(ddpClient, token,(err, userInfo)=>{
  if (err) throw err;
  token = userInfo.token;
});

// Login using a username
login.loginWithUsername(ddpClient, user, pass,(err, userInfo) =>{
  if (err) throw err;
  token = userInfo.token;
});

// Login using an email address
login.loginWithEmail(ddpClient, email, pass, (err, userInfo)=>{
  if (err) throw err;
  token = userInfo.token;
});

// Login using either a username or email address
login.loginWithAccount(ddpClient, userOrEmail, pass, (err, userInfo)=>{
  if (err) throw err;
  token = userInfo.token;
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-debug-production":{"name":"nativescript-hook-debug-production","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-hook-debug-production/blob/master/LICENSE"},"readme":"

NativeScript-hook-debug-production

\n

Hook for selecting files based on debug or production build for NativeScript Apps

\n

License

\n

This plugin is licensed under the MIT license by Marek Maszay

\n

Installation

\n
tns plugin add nativescript-hook-debug-production
\n

Usages

\n

Set name file based on if you want to have file in debug as filename.debug.extension or release version as filename.production.extension

\n

Inside code include it as filename.extension

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hosted-device":{"name":"nativescript-hosted-device","version":"1.0.0","license":"MIT","readme":"

Nativescript Hosted Device Plugin

\n

This a Nativescript Plugin that lets you access device information from a hosted Angular 2 application.

\n

Installation

\n
tns plugin add nativescript-hosted-device
\n

Usage

\n

Create a wrapper application with the following code and a Navivescript WebView.\nSee the following project as an example:\nhttps://github.com/Ulbora/NSWrapper

\n
var application = require(\"application\");
function pageLoaded(args) {
    var page = args.object;   
    var web = page.getViewById(\"webView\"); 
    var androidSettings = web.android.getSettings();
    androidSettings.setJavaScriptEnabled(true);
    var device = new com.ulbora.device.Device;    
    web.android.addJavascriptInterface(device, 'NSDevice');    
    web.url = \"http://someURLWhereAngular2AppIsHosted\";
}
exports.pageLoaded = pageLoaded;
\n

Inside the Angular 2 hosted application, write the code where you want to access device information.\nSee the following project as an example:\nhttps://github.com/KenWilliamson/Angular2HostedMobileApp

\n

Component code:

\n
deviceReady: boolean;

 ngOnInit() {
        this.id = this._routeParams.get('id');
        this.hero = this._heroDetailsService.getHeroDetails(this.id);     
        try {
            if (NSDevice) {
                this.deviceReady = true;
            }
        } catch (err) {
        }
    }


onShowDevice() {
        try {            
            this.dev = \"Mobile version: \" + NSDevice.getModel();
        } catch (err) {
            alert('Failed because: ' + err);
            this.error = err.message;
        }
    }
\n

Template Code:

\n
<div *ngIf=\"deviceReady\">
    <div> <b>Your device</b>: <span (click)=\"onShowDevice()\" class=\"glyphicon glyphicon-phone\"></span></div>
</div>
\n

Available Methods

\n

NSDevice.getModel()

\n

Returns build information about the device

\n

NSDevice.getProductName()

\n

Returns product name of the device

\n

NSDevice.getManufacturer()

\n

Returns manufacturer information for the device

\n

NSDevice.getSerialNumber()

\n

Returns serial number of the device

\n

NSDevice.getOSVersion()

\n

Returns OS version of the device

\n

NSDevice.getPlatform()

\n

Returns the device platform

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-fixxx":{"name":"nativescript-onesignal-fixxx","version":"1.0.9","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

NativeScript-OneSignal

\n

A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

\n

Contributors

\n

OneSignal-iOS-SDK

\n

OneSignal-Android-SDK

\n

Supported Platforms

\n\n

Installation

\n
tns plugin add nativescript-onesignal
\n

iOS

\n

Does not need any configuration.

\n

Android

\n

Does not need any configuration.

\n

Usage

\n

Typescript

\n
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
\n

iOS

\n

TnsOneSignal is the native iOS OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.ios) {
\tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

\t\tpublic static ObjCProtocols = [UIApplicationDelegate]

\t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

\t\t\ttry {

\t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

\t\t\t} catch (error) {
\t\t\t\tconsole.error('error', error)
\t\t\t}

\t\t\treturn true
\t\t}

\t}
\tapplication.ios.delegate = MyDelegate
}
\n

Android

\n

TnsOneSignal is the native Android com.onesignal.OneSignal class.

\n

In your main.ts:

\n
import * as application from 'application';
var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

if (application.android) {
\tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

\t\ttry {

\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
\t\t\tTnsOneSignal.startInit(application.android.context).init()

\t\t} catch (error) {
\t\t\tconsole.error('error', error)
\t\t}

\t})
}
\n

API Reference

\n

iOS API Reference

\n

Android API Reference

\n

Typescript Typings

\n

iOS

\n

Android - In the works...

\n

Demo

\n
npm run setup
# iOS
npm run demo.ios
# Android
npm run demo.android
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-rtc":{"name":"nativescript-web-rtc","version":"1.0.0","license":"MIT","readme":"

NOTE: Deprecated July 8, 2017

\n

A new and improved plugin seed has been forked and now resides here:

\n

https://github.com/NativeScript/nativescript-plugin-seed

\n

Please use this new seed going forward as no new development or improvements will be added here.

\n
\n

Develop a NativeScript plugin

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. cd myplugin
    3. \n
  3. npm run postclone
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-web-rtc
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Unittesting

\n

This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API execute one of these commands in the plugin root:

\n
npm run test.ios
npm run test.android
\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hexo-plugin":{"name":"nativescript-hexo-plugin","version":"1.0.0","license":"MIT","readme":"

hexo-nativescript-plugin

\n

A plugin for the nativescript hexo demo I am putting together. This should add the <% nativescript *content* %> and <% angular *content* %> block tag to hexo, allowing only the correct content to be shown. The user must add the front_end tag to their hexo _config.yml page.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yoga-lib":{"name":"nativescript-yoga-lib","version":"1.0.0","license":"MIT","readme":"

Yoga layout engine plugin for NativeScript

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-yoga-lib
\n

See the NativeScript CLI documentation\nand Nativescript Plugin documentation for more details

\n

Notes

\n

This plugin only provides the iOS YogaKit library from CocoaPods,\nand doesn't provide any JavaScript wrappers or APIs

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mhtghn/nativescript-highcharts":{"name":"@mhtghn/nativescript-highcharts","version":"1.0.2","license":"Apache-2.0","readme":"

nativescript-highcharts

\n

This plugins allows you to use Highcharts in NativeScript.

\n
ns plugin add @mhtghn/nativescript-highcharts
\n

Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

\n

Screenshots

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

\"Demo     \n\"Demo

\n

Demo apps

\n

NativeScript-Core (XML)

\n

Check out the demo folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo.ios # or apps.demo.android
\n

NativeScript-Angular

\n

Check out the demo-angular folder. This is how to clone and run it:

\n
git clone https://github.com/mhtghn/ns-plugins.git
cd ns-plugins
npm run setup
npm run start
>   @mhtghn.nativescript-highcharts.build
npm run start
>   apps.demo-angular.ios # or apps.demo-angular.android
\n

Usage

\n

NativeScript-Core

\n

TypeScript

\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

\n
...
export class HomeViewModel extends Observable {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

XML

\n
<Page class=\"page\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:ui=\"@mhtghn/nativescript-highcharts\">

    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
    </GridLayout>
</Page>
\n

NativeScript Angular

\n

TypeScript

\n

Import the HighchartsModule in your module.

\n
...
import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

@NgModule({
    imports: [
        ...
        HighchartsModule
    ],
    ...
})
export class HomeModule { }
\n

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

@Component({
    selector: \"Home\",
    moduleId: module.id,
    templateUrl: \"./home.component.html\"
})
export class HomeComponent implements OnInit {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    get chartOptionsString(): string {
        return JSON.stringify(this.chartOptions);
    }
    ...
}
\n

HTML

\n
<ActionBar class=\"action-bar\">
<ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Home\"></Label>
</ActionBar>

<GridLayout class=\"page\">
    <!-- Add your page content here -->
    <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
</GridLayout>
\n

Highcharts Compatibility

\n\n

Tips

\n\n

Credit

\n

This plugin is greatly inspired by this demo from Eddy Verbruggen

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-tracking-transparency":{"name":"@nstudio/nativescript-tracking-transparency","version":"1.0.0","license":"Apache-2.0","readme":"

@nstudio/nativescript-tracking-transparency

\n

🕵️ A NativeScript Library for interacting with the tracking API for iOS 14+

\n
ns plugin add @nstudio/nativescript-tracking-transparency
\n

Usage

\n

Open App_Resources/iOS/Info.plist and add this to the bottom:

\n
<key>NSUserTrackingUsageDescription</key>
<string>$(PRODUCT_NAME) requires your permission to track in order to show you more relevant ads.</string>
\n

Replace NSUserTrackingUsageDescription description string with something of your liking.

\n
import { TrackingTransparency, TrackingStatus } from '@nstudio/nativescript-tracking-transparency';

// get status
const status = TrackingTransparency.getTrackingStatus();
if (status === TrackingStatus.Authorized || status === TrackingStatus.Unavailable) {
    // enable tracking features
}

// request access
TrackingTransparency.requestTrackingPermission().then(status => {
  if (status === TrackingStatus.Authorized) {
    // enable tracking features
  }
});
\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-platform-css":{"name":"@vulksoft/nativescript-platform-css","version":"1.6.16","license":{"type":"MIT","url":"https://github.com/Vulksoft-S-R-L/nativescript-platform-css/blob/master/LICENSE"},"readme":"

NativeScript-Platform-CSS

\n

A NativeScript plugin to deal with Declarative UI and Platform specific CSS

\n

What is it?

\n

This plugin automatically add some platform related css variable to the current Page.

\n

It allows you to customize your UI for android or ios only:

\n
.ios .example {
  color: blue;
}

.android .example {
  color: red;
}
\n

This also adds classes related to the DPI of the screen.\nWe have this range of DPI 1280, 1024, 800, 600, 540, 480, 400, 360, 320

\n

You will be able to select that like that:

\n
.ios800 .example {
  font-size: 25;
}

.ios480 .example {
  font-size: 18;
}

.android800 .example {
  font-size: 25;
}

.android480 .example {
  font-size: 18;
}
\n

or also like that:

\n
.screen800 .example {
  font-size: 25;
}

.screen480 .example {
  font-size: 18;
}
\n

You have also access to class with the device name:

\n
.samsunggalaxys6 .example {
  color: red;
}

.iphone6s .example {
  color: blue;
}
\n

Installation

\n

This plugin runs only on Nativescript 7.0 and later.

\n
ns plugin add @vulksoft/nativescript-platform-css@latest
\n

Usage

\n

You only need to require() the plugin in your app.js or main.ts (if angular or vue).\nThis will automatically add the css classes on the current loaded page.

\n

Demo

\n

You can try the demo app that will show you the css classes that are added on the page.

\n

Contributors

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-trace-raven":{"name":"nativescript-trace-raven","version":"1.1.1","license":"MIT","readme":"

NativeScript Raven TraceWriter

\n

This plug-in provides a custom NativeScript TraceWriter that will log messages to Sentry.io using the Raven.js JavaScript library. This is useful for capturing trace messages in production from user iOS and Android devices.

\n

Getting started

\n

To add the plug-in to a NativeScript project:

\n

tns plugin add nativescript-trace-raven

\n

NOTE: To use this plug-in, a "DSN" key from Sentry.io is required. This key is used to initialize the plug-in and send logs to a specific Sentry.io project.

\n

Usage

\n

Once the plug-in is installed, simply initialize the new TraceWriter. This can be done in different ways, but for easy global usage, setup the new TraceWriter when then app starts:

\n

app.ts

\n
import * as app from 'application';
import * as trace from 'trace';
import { TraceRaven } from 'nativescript-trace-raven';

app.on(app.launchEvent, (args: app.ApplicationEventData) => {
    let sentryDsn = \"[YOUR SENTRY DSN KEY]\";

    trace.setCategories(trace.categories.concat(trace.categories.Error, trace.categories.Debug));
    trace.addWriter(new TraceRaven(sentryDsn));
    trace.enable();
});
\n

Then, in your app, just use trace as normal. The output will now be sent to Sentry.io.

\n

Example:

\n
trace.write(\"Something happened in the app\", trace.categories.Error, trace.messageType.error);
\n

NOTE: Sentry.io charges by log volume, so as a best practice, do not enable this custom TraceWriter during regular development

\n

In addition to the trace message, this plug-in will send these additional details to Sentry with each log:

\n\n

Log level

\n

Sentry.io provides three levels for classifying logs: info, warning and error.

\n

When logging using the TraceWriter and trace API, the trace.messageType is mapped to Sentry log levels:

\n\n

If trace.messageType is omitted, the default log level is error.

\n

Extended use

\n

When initializing Raven, you can optionally provide an environment string to describe where the app is running when sending log messages. By default, this string is set to debug. If you want to specify your own environment string, just add it when initializing with your DSN key:

\n
trace.addWriter(new TraceRaven(sentryDsn, \"production\"));
\n

Additional Raven APIs

\n

The default TraceWriter API only provides a write method, but the Raven.js library provides additional capabilities such as logging exception detail. To use these additional APIs, you can directly use the Raven library. As long as you've initialized TraceRaven on app startup, all Raven configuration will be set and does not need to be re-initialized. To learn more about the Raven APIs, visit the JavaScript docs on Sentry.io.

\n

Logging Exceptions

\n

Unlike using trace to record an Error, the Raven.captureException API will also attempt to include Stack Trace information with the log.

\n
import Raven = require(\"raven-js\");

try { 
  throw new Error(\"This is an example error with stack trace\");
} catch (err) {
  Raven.captureException(err);
}
\n

Adding Breadcrumbs

\n

You can manually create "breadcrumbs" that will be included with Sentry logs. Breadcrumbs are intended to show the path of actions that lead to an exception, app crash or log message. For example, to add a crumb when a button is tapped:

\n
public buttonTap(args: EventData) {
  let btn = <Button>args.object;
  Raven.captureBreadcrumb({
    message: `Button tapped`,
    category: \"action\",
    data: {
      id: btn.id,
      text: btn.text
    },
    level: \"info\"
  });
}
\n

Last EventId

\n

The EventId is a globally unique string generated by Sentry for all logs. Raven provides the ability to get the EventId for the most recent log so that you can present it to users and use for customer service reports. To get the most recent EventId with Raven:

\n
let eventId = Raven.lastEventId();
\n

Considerations

\n

Sentry.io provides a generous free tier for logging events, but does eventually charge by logging volume. As a result, be careful to log only events that are helpful for troubleshooting in production.

\n

That means: do not use trace.categories.All when logging to Sentry

\n

This verbose logging will likely generate far more logs than needed, and quickly run-up your Sentry.io bill.

\n

Best practices:

\n
    \n
  1. Only log to Sentry in production
    2. \n
  2. Minimize the trace categories logged (minimum: trace.categories.Error)
    3. \n
\n

Native Errors

\n

Since this plug-in is running in the NativeScript JavaScript layer, it may not capture all native iOS or Android errors. This is generally okay as errors that relate to app code will be caught, but if native iOS/Android logging is needed, use a different plug-in.

\n

Auto Breadcrumbs

\n

In addition to providing the custom TraceWriter, this plugin will automatically wire-up automatic breadcrumbs for these global Page events:

\n\n

Whenever one of these events occurs, a new breadcrumb will get added to the history. To disable this behavior, initialize TraceRaven with an additional parameter:

\n
new TraceRaven(\"[YOUR DSN KEY]\", \"production\", false)
\n

The last parameter will enable/disable auto-breadcrumbs created by this plug-in. Default is true (enabled).

\n

Using the Demo

\n

To try the demo for this plug-in, simply follow these steps:

\n
    \n
  1. Get a DSN key from Sentry.io
    2. \n
  2. Clone this repo
    3. \n
  3. Navigate to the demo folder and open app.ts in your code editor
    4. \n
  4. Replace the sentryDsn string with your DSN key
    5. \n
  5. Navigate back to the root of the cloned repo
    6. \n
  6. Run npm run demo.ios or npm run demo.android
    7. \n
\n

If the DSN key is not added before running the demo, the app will crash on launch.

\n

Known Issues

\n\n

Contributing

\n

Want to help make this plug-in better? Report issues in GitHub:

\n

https://github.com/toddanglin/nativescript-trace-raven/issues

\n

Pull requests welcome.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"proximiio-unified-sdk":{"name":"proximiio-unified-sdk","version":"1.0.1","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-html2pdf":{"name":"nativescript-html2pdf","version":"2.0.0","license":"ISC","readme":"

nativescript-html2pdf

\n

Allows easy conversion from HTML to PDF files.\nCurrently, only Android is supported.

\n

Installation

\n
tns plugin install nativescript-html2pdf
\n

Usage

\n
import { html2PdfFile } from 'nativescript-html2pdf';

let myHtml: string = '<p>Hello World</p>';

let pdfPath: string = 'fs.knownFolders.documents().getFile('myPdf.pdf').path;

html2PdfFile(myHtml, pdfPath);

//Your PDF file is now available at the specified path.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-doctor":{"name":"nativescript-doctor","version":"1.14.2","license":"Apache-2.0","readme":"

nativescript-doctor

\n

Library that helps identifying if the environment can be used for development of {N} apps.

\n

Installation

\n
    \n
  1. Using npm
    $ npm install nativescript-doctor --save
    \n
    2. \n
\n

Requirements

\n
    \n
  1. Node.js 4.3.0 or later
    2. \n
\n

Usage

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-emulator-reload":{"name":"nativescript-emulator-reload","version":"1.2.0","license":"WTFPL ( http://www.wtfpl.net/ )","readme":"

nativescript-emulator-reload

\n

This small gulp script will monitor the source files of a NativeScript project and when a file is changed it'll rebuild and reload the emulator. Will also use Babel to compile your ES6+ JS into ES5 if you want it to.

\n

Currently only supports iOS emulators.

\n

Install

\n

Either download from Github:

\n

Download the package.json and gulpfile.js and put in the root directory of your app. Then run

\n
npm install
\n

Or install from NPM:

\n
cd /your/project/root
npm install nativescript-emulator-reload
mv node_modules/nativescript-emulator-reload/* .
rm -rf node_modules/nativescript-emulator-reload
npm install
\n

Run

\n
gulp
\n

or with a device flag:

\n
gulp -d iPad-Retina
\n

list valid devices with gulp help

\n

ECMAScript 6 version.

\n

If you want to use ECMAScript 6 there's an gulpfile (gulpfile.es6.js) which will use Babel to turn your ES6+ code into ES5 code.

\n

To use this file, rename gulpfile.js to gulpfile.es5.js (or really to anything) and rename gulpfile.es6.js to gulpfile.js.

\n
gulp watch
\n

The ES6 Gulpscript is opinionated

\n

You most probably need to edit the settings in the gulpfile.

\n

The default settings assumes the following file structure:

\n
/app
\t/src
\t\t/shared
\t\t/test
\t\t/views\t
\t/tns_modules
\t/App_Resources
\t/...\t\t\t
\n

Where the content of src will be moved to /app when compiled. Creating a file structure like:

\n
/app
\t/src
\t\t/shared
\t\t/test
\t\t/views\t
\t/tns_modules
\t/App_Resources
\t/...
\t/shared
\t/test
\t/views\t\t
\n

Where the app/{shared,test,views} are the compiled version of app/src/{shared,test,views}. This way only the ES6 files will be compiled (and not things like tns_modules, anything in node_modules if you install npm packages, etc.)

\n

Testing with Mocha

\n

Mocha is included for your testing pleasures.

\n

Place your tests in /src/test and run them with gulp test

\n

Linting with eslint

\n

eslint is included for your linting pleasures.

\n

Lint the code in your app/src folder by running gulp lint.

\n

If you're using ES6 you most probably want these settings in your .eslintrc in the root directory of your project. es6: true will enable all ES6 features but modules which is enabled by "ecmaFeatures": { modules: true }. Read more about configuring eslint.

\n
{
    \"env\": {
    \t\"es6\": true
    },
    \"ecmaFeatures\": { 
        modules: true 
    }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intercom-bridge-updated":{"name":"nativescript-intercom-bridge-updated","version":"1.0.4","license":"MIT","readme":"

Intercom for NativeScript

\n

This is a plugin that allows your NativeScript app to use Intercom for iOS and/or Intercom for Android.

\n\n

Installation

\n

To install the plugin in your NativeScript app, run the following:

\n
tns plugin add nativescript-intercom-bridge
\n

Example App

\n

An example app is provided here that shows a basic NativeScript app integration with Intercom.

\n

License

\n

nativescript-intercom-bridge is released under the MIT License.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sergeymell/nativescript-color-wheel":{"name":"@sergeymell/nativescript-color-wheel","version":"1.0.15","license":"Apache-2.0","readme":"

NativeScript Color Wheel

\n

NativeScript 6 version of this plugin is available\nat https://github.com/SergeyMell/nativescript-n6-color-wheel

\n

Description

\n

This plugin is actually a color picker plugin which can be used\nas a simple component wherever you need it. It allows you to

\n\n

Plugin works simultaneously for both iOS and Android platforms and\nis not based on any additional libraries, CocoaPods etc

\n

Examples

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Color wheel with custom selection pickerColor picker in a modal dialog
\"\"\"\"
\n

Installation

\n
ns plugin add @sergeymell/nativescript-color-wheel
\n

Usage

\n

In NativeScript Core applications:

\n
<clw:ColorWheel width=\"200\" height=\"200\" color=\"#FFB35E\"
                            colorSelect=\"{{colorSelected}}\"/>
\n

In NativeScript Angular applications:

\n
    \n
  1. Add NativeScriptColorWheelModule from @sergeymell/nativescript-color-wheel/angular to the imports section of your Angular module
    2. \n
  2. Use the ColorWheel component where you need it
    3. \n
\n
<ColorWheel width=\"200\" height=\"200\" margin=\"20\" (colorSelect)=\"onColorSelected($event)\"></ColorWheel>
\n

TODOs:

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-hook-versioning":{"name":"@vulksoft/nativescript-hook-versioning","version":"7.0.5","license":"Apache-2.0","readme":"

Nativescript Hook Versioning

\n

\"npm\"

\n

This plugin add an hook that do the followings things:

\n\n

Installation

\n

ns plugin add nativescript-hook-versioning

\n

Usage

\n

You can add the following configuration into your nativescript.config.ts

\n
nativescriptHookVersioning: {
    versionName: true,
    versionCode: {
      enabled: true,
      content: 'BUNDLE_VERSION_CODE', // This can contains '+ANY_NUMBER' if you need to increment your versionCode.
    },
  },
\n

to configure it to your likings.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-webview-interface":{"name":"@cdev38399/nativescript-webview-interface","version":"2.0.2","readme":"

\"npm\"\n\"npm\"

\n

Nativescript-WebView-Interface

\n

Nativescript Plugin for bi-directional communication between WebView and Android/iOS

\n

Installation

\n

From the terminal, go to your app's root folder and execute:

\n
tns plugin add nativescript-webview-interface
\n

Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

\n
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
\n

Usage

\n

For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

\n

Inside Native App

\n

Insert a web-view somewhere in your page.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
....
<web-view id=\"webView\"></web-view>
....
</Page>
\n

Initialize WebViewInterface Plugin in your javascript file.

\n
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;

function pageLoaded(args){
    page = args.object;
    setupWebViewInterface(page) 
}

// Initializes plugin with a webView
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
\n

Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

\n

Use any API Method of WebViewInterface Class

\n
function handleEventFromWebView(){
    oWebViewInterface.on('anyEvent', function(eventData){
        // perform action on event
    });
}

function emitEventToWebView(){
    oWebViewInterface.emit('anyEvent', eventData);
}

function callJSFunction(){
    oWebViewInterface.callJSFunction('functionName', args, function(result){
        
    });
}
\n

If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

\n
webView.on('loadFinished', (args) => {
    if (!args.error) {
        // emit event to webView or call JS function of webView
    }
});
\n

Inside WebView

\n

Import nativescript-webview-interface.js in your html page.

\n
<html>
    <head></head>
    <body>
        <script src=\"path/to/nativescript-webview-interface.js\"></script>
        <script src=\"path/to/your-custom-script.js\"></script>        
    </body>
</html>
\n

Use any API Method of window.nsWebViewInterface inside webview

\n
var oWebViewInterface = window.nsWebViewInterface;

// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
    
});

// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);

// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
    // do any processing
    return dataOrPromise;
}
\n

API

\n

Native App API

\n

Constructor:

\n

WebViewInterface(webView: WebView, src?: string)

\n

webView is an instance of nativescript web-view.

\n

src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

\n

API Methods of WebViewInterface Class:

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emitted from webView.

\n

Callback will be executed with the data sent from webView in any format.

\n

off(eventOrCmdName: string, callback?: (eventData: any) => void): void

\n

Use this method to de-register listener of any event/command emitted from webView.

\n

If callback is not set, all the event listeners for this event will be de-registered.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from native app to webView with data in any format.

\n

callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

\n

Use this method to call to any javascript function in global scope in webView.

\n

Arguments are optional. But if supplied, must be in array format.

\n

If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
\nIf the function execution generates any error, the errorHandler will be called with the error.

\n

destroy(): void

\n

Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

\n

WebView API

\n

API Methods available in window.nsWebViewInterface global variable.

\n

on(eventOrCmdName: string, callback: (eventData: any) => void): void

\n

Use this method to assign listener to any event/command emited from native app.

\n

Callback will be executed with the data sent from native app in any format.

\n

emit(eventOrCmdName: string, data: any): void

\n

Use this method to emit any event/command from webView to native app with data in any format.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@taybull/nativescript-contacts":{"name":"@taybull/nativescript-contacts","version":"1.6.2","license":"MIT","readme":"

NativeScript Contacts

\n

A NativeScript module providing easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.\nWorking with groups available in 1.5.0. Create a group, add and remove contacts to the group, and delete a group.

\n

Installation

\n

Run tns plugin add nativescript-contacts

\n

Usage

\n

To use the contacts module you must first require() it.

\n
var contacts = require(\"nativescript-contacts\");
\n

iOS Caveats

\n

Add following key to Info.plist found in app/App_Resources/iOS/Info.plist

\n
<key>NSContactsUsageDescription</key>
<string>Kindly provide permission to access contact on your device.</string>
\n

User will be asked for permissions when contacts are accessed by the app.

\n

Android Caveats

\n

From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your manifest:

\n
<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
<uses-permission android:name=\"android.permission.READ_CONTACTS\" />
<uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
\n

You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the great nativescript-permissions plugin):

\n
const contact = new Contact();
(...)
Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], \"I need these permissions because I'm cool\")
            .then(() => {
                contact.save();
            });
\n

Methods

\n

getContact: Pick one contact and bring back its data.

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below

    // lets say you wanted to grab first name and last name
    console.log(contact.name.given + \" \" + contact.name.family);

    //lets say you want to get the phone numbers
    contact.phoneNumbers.forEach(function(phone) {
      console.log(phone.value);
    });

    //lets say you want to get the addresses
    contact.postalAddresses.forEach(function(address) {
      console.log(address.location.street);
    });
  }
});
\n

Save a new contact

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");
var imageSource = require(\"image-source\");

var newContact = new contacts.Contact();
newContact.name.given = \"John\";
newContact.name.family = \"Doe\";
newContact.phoneNumbers.push({
  label: contacts.KnownLabel.HOME,
  value: \"123457890\"
}); // See below for known labels
newContact.phoneNumbers.push({ label: \"My Custom Label\", value: \"11235813\" });
newContact.photo = imageSource.fromFileOrResource(\"~/photo.png\");
newContact.save();
\n

Update an existing contact

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");
var imageSource = require(\"image-source\");

contacts.getContact().then(function(args) {
  if (args.response === \"selected\") {
    var contact = args.data;
    contact.name.given = \"Jane\";
    contact.name.family = \"Doe\";

    imageSource
      .fromUrl(\"http://www.google.com/images/errors/logo_sm_2.png\")
      .then(function(src) {
        contact.photo = src;
        contact.save();
      });
  }
});
\n

Delete a contact

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    contact.delete();
  }
});
\n

Check if contact is Unified/Linked (iOS Specific)

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    console.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
  }
});
\n

getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

/*
  contactFields contains the fields to retrieve from native backend to reduce processing time
  var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
*/
var contactFields = [\"name\", \"phoneNumbers\"];

contacts.getContactsByName(\"Hicks\", contactFields).then(
  function(args) {
    console.log(\"getContactsByName Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getAllContacts: Find all contacts. Returns an array of contact data.

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

/*
  Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
  var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

  If not supplied, all available contactFields will be returned.
*/
var contactFields = [\"name\", \"phoneNumbers\"];

contacts.getAllContacts(contactFields).then(
  function(args) {
    console.log(\"getAllContacts Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

var contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

contacts.getContactById(contactId).then(
  function(args) {
    console.log(\"getContactById Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no contacts were found.
    /// args.reponse: \"fetch\"
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

getGroups: Find groups. Returns an array of group data.

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      console.log(\"getGroups Complete\");
      console.log(JSON.stringify(args));
      /// Returns args:
      /// args.data: Generic cross platform JSON object, null if no groups were found.
      /// args.reponse: \"fetch\"

      if (args.data === null) {
        console.log(\"No Groups Found!\");
      } else {
        console.log(\"Group(s) Found!\");
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

Save a new group

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

var groupModel = new contacts.Group();
groupModel.name = \"Test Group\";
//Save Argument (boolean)
//iOS: [false=> Use Local Container, true=> Use Default Container]
//Android: will always be true, setting this value will not affect android.
groupModel.save(false);
\n

Delete a group

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts.getGroups(\"Test Group\").then(
  function(args) {
    console.log(\"getGroups Complete\");
    console.log(JSON.stringify(args));
    /// Returns args:
    /// args.data: Generic cross platform JSON object, null if no groups were found.
    /// args.reponse: \"fetch\"

    if (args.data !== null) {
      console.log(\"Group(s) Found!\");
      args.data[0].delete(); //Delete the first found group
    }
  },
  function(err) {
    console.log(\"Error: \" + err);
  }
);
\n

Add Member To Group

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts.getContact().then(function(args) {
  /// Returns args:
  /// args.data: Generic cross platform JSON object
  /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

  if (args.response === \"selected\") {
    var contact = args.data; //See data structure below
    contacts.getGroups(\"Test Group\").then(
      function(a) {
        if (a.data !== null) {
          var group = a.data[0];
          group.addMember(contact);
        }
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
  }
});
\n

Remove Member From Group

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      if (args.data !== null) {
        var group = args.data[0];

        contacts.getContactsInGroup(group).then(
          function(a) {
            /// Returns args:
            /// args.data: Generic cross platform JSON object, null if no groups were found.
            /// args.reponse: \"fetch\"
            console.log(\"getContactsInGroup complete\");

            if (a.data !== null) {
              a.data.forEach(function(c, idx) {
                group.removeMember(c);
              });
            }
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

\n
var app = require(\"application\");
var contacts = require(\"nativescript-contacts\");

contacts
  .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function(args) {
      if (args.data !== null) {
        var group = args.data[0];

        contacts.getContactsInGroup(group).then(
          function(a) {
            console.log(\"getContactsInGroup complete\");
            /// Returns args:
            /// args.data: Generic cross platform JSON object, null if no groups were found.
            /// args.reponse: \"fetch\"
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    },
    function(err) {
      console.log(\"Error: \" + err);
    }
  );
\n

Single User Data Structure

\n
{
    id : \"\",
    name : {
        given: \"\",
        middle: \"\",
        family: \"\",
        prefix: \"\",
        suffix: \"\",
        displayname: \"\",
        phonetic : {
            given: \"\",
            middle: \"\",
            family: \"\"
        }
    },
    nickname : \"\",
    organization : {
        name: \"\",
        jobTitle: \"\",
        department: \"\",

        // Android Specific properties
        symbol: \"\",
        phonetic: \"\",
        location: \"\",
        type: \"\"
    },
    notes : \"\",
    photo: null, // {N} ImageSource instance

    phoneNumbers : [],
    emailAddresses : [],
    postalAddresses : [],
    urls : []
}
\n

PhoneNumber / EmailAddress structure

\n
{
    id: \"\",
    label: \"\",
    value: \"\"
}
\n

Url structure

\n
{
    label: \"\",
    value: \"\"
}
\n

PostalAddress structure

\n
{
    id: \"\",
    label: \"\",
    location: {
        street: \"\",
        city: \"\",
        state: \"\",
        postalCode: \"\",
        country: \"\",
        countryCode: \"\"
    }
}
\n

Known Labels (for Urls, Addresses and Phones)

\n

The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

\n\n

Those are the system labels but you can also use any custom label you want.

\n

Single Group Data Structure

\n
{
  id: \"\";
  name: \"\";
}
\n

GetFetchResult Data Structure

\n

The object returned by contact fetch requests.

\n
{
  data: Contact[];
  response: string;
}
\n

iOS

\n

See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

\n

NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@edusperoni/nativescript-sms-inbox":{"name":"@edusperoni/nativescript-sms-inbox","version":"1.0.2","license":"Apache-2.0","readme":"

@edusperoni/nativescript-sms-inbox

\n
ns plugin add @edusperoni/nativescript-sms-inbox
\n

NativeScript Sms Inbox

\n

A NativeScript plugin to read text messages on android phone inbox using undocumented android api.

\n

Installation

\n

Install the plugin using the NativeScript CLI tooling

\n
tns plugin add nativescript-sms-inbox
\n

Android

\n

To read sms inbox in the phone without user interaction on Android your app must request permission. The following must be added to your app's AndroidManifest.xml

\n
<uses-permission android:name=\"android.permission.READ_SMS\" />
\n

Usage

\n

To use the phone module you must first require() it from your project's node_modules directory:

\n
var inbox = require( \"nativescript-sms-inbox\" );
\n

After you have a reference to the module you can then call the available methods.

\n

Methods

\n

getInboxes: fetch all text message in the inbox

\n
Parameters
\n\n

For example, the code below gets the last 10 smses from the device inbox:

\n
// my-page.js
var inbox = require( \"nativescript-sms-inbox\" );
inbox.getInboxes({ max: 10 }).then(function(res) {
    console.log(JSON.stringify(res));
}, function(err) {
    console.log(\"Error: \" + err);
});
\n

getInboxesFromNumber: Get all text messages in the sms inbox sent by provided fromNumber

\n
Parameters
\n\n

For example, the code below gets the last 10 smses from the device inbox sent by the provided fromNumber:

\n
// my-page.js
var inbox = require( \"nativescript-sms-inbox\" );
inbox.getInboxesFromNumber(\"0712345678\", { max: 10 }).then(function(res) {
    console.log(JSON.stringify(res));
}, function(err) {
    console.log(\"Error: \" + err);
});
\n

TypeScript example

\n

import * as TNSInbox from 'nativescript-sms-inbox';

// Get the last 10 inbox messages
public getInboxMessages() {    
    TNSInbox.getInboxes({ max: 10 }).then((res) => {
        console.log(JSON.stringify(res));
    }, (err) => {
        console.log('Error: ' + err);
    });
}

// Get the last 10 inbox messages sent by the provided fromNumber
public getInboxMessagesFromNumber(fromNumber: string) { //fromNumber = \"0712345678\"
    TNSInbox.getInboxesFromNumber(fromNumber, { max: 10 }).then((res) => {
        console.log(JSON.stringify(res));
    }, (err) => {
        console.log('Error: ' + err);
    });
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@irman/nativescript-screen-orientation":{"name":"@irman/nativescript-screen-orientation","version":"1.1.2","license":"MIT","readme":"

A plugin to force change the orientation of a page programmatically in NativeScript. Supports both Android and iOS.

\n
\n

Code Sample

\n
var orientationModule = require("@irman/nativescript-screen-orientation");\n    \n  function pageLoaded(){\n        orientationModule.setCurrentOrientation("landscape",function(){\n                console.log("landscape orientation set");\n            });\n        }\n       \n   function onNavigatingFrom(){\n        orientationModule.orientationCleanup();\n        }\nexports.pageLoad=pageLoaded;\nexports.onNavigatingFrom=onNavigatingFrom;\n
\n
\n

Motivation

\n

To allow force setting of orientation at page - level programmatically.

\n

Installation

\n
tns plugin add @irman/nativescript-screen-orientation\n
\n
\n

API Reference

\n

Allowed orientations are 'portrait', 'landscape' and 'all'.

\n

In order to force an orientation, hook the respective setCurrentOrientation methods at the pageLoad event of page, while make sure the method orientationCleanup is called at the navigatingFrom event of the page.

\n\n

Troubleshooting

\n

In iOS , on iPad, if the plugin is not working, it is due to changes in the features supported by iPad. It is required for latest iOS to support multiple apps at the same time by screen sharing, which discourages locking of orientation in a particular mode. In order to make it work on iPad, set the key 'Requires Fullscreen' in xCode under app settings.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-mixpanel":{"name":"@enduco/nativescript-mixpanel","version":"1.0.4","license":"Apache-2.0","readme":"

@enduco/nativescript-mixpanel

\n
\n

A NativeScript plugin to provide the ability to integrate with Mixpanel.

\n
\n

Installation

\n

From your command prompt/terminal go to your application's root folder and execute:

\n

ns plugin add @enduco/nativescript-mixpanel

\n

Usage

\n

Example

\n

This can be initialised at various points in your application, i.e. in a service. However it is recommended to initialise this in your main.ts file.

\n

Initialisation

\n
import {
  NativescriptMixpanel,
  NativescriptMixpanelPeople,
} from \"@enduco/nativescript-mixpanel\";

const MIXPANEL_TOKEN = \"ABCDEF12345678\";

// Init Mixpanel itself
NativescriptMixpanel.init(MIXPANEL_TOKEN);
\n

Identification

\n

The Mixpanel library will assign a default unique identifier to each unique user who installs your application. This distinct ID is saved to device storage so that it will persist across sessions.

\n

If you choose, you can assign your own user IDs. This is particularly useful if a user is using your app on multiple devices or platforms (both web and mobile, for example). To assign your own distinct_ids, you can use the identify method.

\n
import { NativescriptMixpanel } from \"@enduco/nativescript-mixpanel\";

const someId = \"test identity\";
NativescriptMixpanel.identify(someId);
// It is recommended to identify both the base and people instances.
NativescriptMixpanel.getPeople().identify(someId);
\n

Custom Logging / Logger Binding

\n

If you need to pipe/funnel log output (i.e. for errors) to your own applications logger\nimplementation, you can provide a binding to your logger through a simple object.

\n

If you use this it is recommended to call useLogger before you init.

\n
const customLogger: NativescriptMixpanelLogger = {
  log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
  info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
  warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
  error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
};
NativescriptMixpanel.useLogger(customLogger);
\n

API

\n

NativescriptMixpanel

\n

init(token: string): void

\n

Get the instance of MixpanelAPI associated with your Mixpanel project token.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
tokenstring
\n
NativescriptMixpanel.init(\"token\");
\n

useLogger(providedLogger: NativescriptMixpanelLogger): void

\n

Replace the default console logger with a custom logger binding.

\n

If you intend to use a custom logger or bound logger, this should\nbe called before init to correctly output any errors.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
providedLoggerNativescriptMixpanelLoggerA new logger or object that binds a logger
\n
const customLogger: NativescriptMixpanelLogger = {
  log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
  info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
  warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
  error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
};
NativescriptMixpanel.useLogger(customLogger);
\n

identify(distinctId: string): void

\n

Associate all future calls to track(string, JSON) with the user identified by the\ngiven distinct id.

\n

This call does not identify the user for People Analytics; to do that,\nsee MixpanelAPI.People.identify(String).\nMixpanel recommends using the same distinct_id for both calls, and using a\ndistinct_id that is easy to associate with the given user, for example, a\nserver-side account identifier.

\n

Calls to track(string, JSON) made before corresponding calls to identify\nwill use an anonymous locally generated distinct id, which means it is best to\ncall identify early to ensure that your Mixpanel funnels and retention analytics\ncan continue to track the user throughout their lifetime. We recommend calling\nidentify when the user authenticates.

\n

Once identify is called, the local distinct id persists across restarts of your application.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
distinctIdstringA string uniquely identifying this user. Events sent to Mixpanel using the same distinct_id will be considered associated with the same visitor/customer for retention and funnel reporting, so be sure that the given value is globally unique for each individual user you intend to track.
\n
NativescriptMixpanel.identify(\"test identity\");
\n

getDistinctId(): string

\n

Returns the string id currently being used to uniquely identify the user\nassociated with events sent using track. Before any calls to identify,\nthis will be an id automatically generated by the library.

\n
const distinctId = NativescriptMixpanel.getDistinctId();
\n

alias(alias: string): void

\n

This function will create an alias to the current events distinct_id,\nwhich may be the distinct_id randomly generated by the Mixpanel\nlibrary before identify(string) is called.

\n

This call does not identify the user after. You must still call both\nidentify and NativescriptMixpanel.getPeople().identify if you wish the\nnew alias to be used for Events and People.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
aliasstringThe new distinct_id
\n
NativescriptMixpanel.alias(\"test alias\");
\n

registerSuperProperties(properties: JSON): void

\n

Register properties that will be sent with every subsequent call\nto track.

\n

SuperProperties are a collection of properties that will be sent with every\nevent to Mixpanel, and persist beyond the lifetime of your application.

\n

Setting a superProperty with registerSuperProperties will store a new\nsuperProperty, possibly overwriting any existing superProperty with the\nsame name.

\n

SuperProperties will persist even if your application is taken completely\nout of memory. To remove a superProperty, call unregisterSuperProperty\nor clearSuperProperties.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
propertiesJSONA JSON object containing super properties to register
\n
NativescriptMixpanel.registerSuperProperties({
  \"Test Type\": \"test value\",
});
\n

unregisterSuperProperty(superPropertyName: string): void

\n

Remove a single superProperty, so that it will not be sent with future calls\nto track(String, JSONObject).

\n

If there is a superProperty registered with the given name, it will be permanently\nremoved from the existing superProperties.

\n

To clear all superProperties, use clearSuperProperties.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
superPropertyNamestringname of the property to unregister
\n
NativescriptMixpanel.unregisterSuperProperty(\"Test Type\");
\n

clearSuperProperties(): void

\n

Erase all currently registered superProperties.

\n

Future tracking calls to Mixpanel will not contain the specific superProperties\nregistered before the clearSuperProperties method was called.

\n

To remove a single superProperty, use unregisterSuperProperty.

\n
NativescriptMixpanel.clearSuperProperties();
\n

track(eventName: string, properties?: JSON): void

\n

Track an event.

\n

Every call to track eventually results in a data point sent to Mixpanel.\nThese data points are what are measured, counted, and broken down to create\nyour Mixpanel reports. Events have a string name, and an optional set of\nname/value pairs that describe the properties of that event.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventNamestringThe name of the event to send
propertiesJSONA JSON object containing the key value pairs of the properties to include in this event
\n
NativescriptMixpanel.track(\"test event\", {
  tracking: \"this\",
});
\n

timeEvent(eventName: string): void

\n

Begin timing of an event. Calling timeEvent("Thing") will not send an event,\nbut when you eventually call track("Thing"), your tracked event will be sent\nwith a "$duration" property, representing the number of seconds between your calls.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
eventNamestringthe name of the event to track with timing
\n
const eventName = \"Time Event Test\";
NativescriptMixpanel.timeEvent(eventName);

await new Promise((resolve) => setTimeout(resolve, 2000));
NativescriptMixpanel.track(eventName);
\n

getPeople(): NativescriptMixpanelPeople

\n

Returns a NativescriptMixpanelPeople instance that can be used to identify\nand set properties.

\n
const people = NativescriptMixpanel.getPeople();
\n

optInTracking(): void

\n

Use this method to opt-in an already opted-out user from tracking.

\n

People updates and track calls will be sent to Mixpanel after using\nthis method. This method will internally track an opt-in event to\nyour project.

\n
const people = NativescriptMixpanel.optInTracking();
\n

optOutTracking(): void

\n

Use this method to opt-out a user from tracking.

\n

Events and people updates that haven't been flushed yet will be deleted.\nUse flush() before calling this method if you want to send all the queues\nto Mixpanel before.

\n

This method will also remove any user-related information from the device.

\n
const people = NativescriptMixpanel.optOutTracking();
\n

flush(): void

\n

Push all queued Mixpanel events and People Analytics changes to Mixpanel servers.

\n

Events and People messages are pushed gradually throughout the lifetime of your\napplication. This means that to ensure that all messages are sent to Mixpanel when\nyour application is shut down, you will need to call flush() to let the Mixpanel\nlibrary know it should send all remaining messages to the server.

\n

We strongly recommend placing a call to flush() in the onDestroy() method of your\nmain application activity.

\n
NativescriptMixpanel.flush();
\n

reset(): void

\n

Clears tweaks and all distinct_ids, superProperties, and push\nregistrations from persistent storage. Will not clear referrer information.

\n
NativescriptMixpanel.reset();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mashdog/nativescript-accordion":{"name":"@mashdog/nativescript-accordion","version":"7.0.6","license":"Apache-2.0","readme":"

NativeScript Accordion

\n

Nativescript 7 version

\n

Install

\n

npm install @mashdog/nativescript-accordion

\n

Usage

\n

IMPORTANT: Make sure you include xmlns:accordion="@mashdog/nativescript-accordion" on the Page element

\n

Data

\n

By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

\n
this.items = [
      {
        title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
        blah: [
          { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
          { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
        ]
      }
    ]
\n
selectedIndexes = [0,3]
\n

Core

\n
<accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
            <accordion:Accordion.headerTemplate>
                <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                    <Label text=\"{{title}}\"/>
                    <Label col=\"1\" text=\"+\"/>
                </GridLayout>
            </accordion:Accordion.headerTemplate>

            <accordion:Accordion.itemHeaderTemplate>
                <StackLayout>
                    <Label text=\"{{text}}\"/>
                </StackLayout>
            </accordion:Accordion.itemHeaderTemplate>
            
            
            <accordion:Accordion.itemContentTemplate>
                            <StackLayout>
                                <Image src=\"{{image}}\"/>
                            </StackLayout>
              </accordion:Accordion.itemContentTemplate>

            <accordion:Accordion.footerTemplate>
                <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                    <Label text=\"{{footer}}\"/>
                    <Label col=\"1\" text=\"-\"/>
                </GridLayout>
            </accordion:Accordion.footerTemplate>

        </accordion:Accordion>
\n

Multi Template

\n
<accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                             items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                             headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                             itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                             itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                             footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
        >

            <Accordion.headerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.headerTemplates>


            <Accordion.itemHeaderTemplates>
                <template key=\"odd\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout backgroundColor=\"white\">
                        <Label text=\"{{title}}\"/>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemHeaderTemplates>

            <Accordion.itemContentTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </template>
            </Accordion.itemContentTemplates>

            <Accordion.footerTemplates>
                <template key=\"odd\">
                    <StackLayout>
                        <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>

                <template key=\"even\">
                    <StackLayout>
                        <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                    </StackLayout>
                </template>
            </Accordion.footerTemplates>

        </accordion:Accordion>
\n

Angular

\n
import { AccordionModule } from \"@mashdog/nativescript-accordion/angular\";

@NgModule({
    imports: [
        AccordionModule
    ]
    })
\n
<Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
\t\t\t<GridLayout backgroundColor=\"white\">
\t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
\t\t\t</GridLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
\t\t\t<StackLayout>
\t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Multi Template

\n
<Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
\t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
\t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
\t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
\t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
\t>
\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
\t\t\t<StackLayout backgroundColor=\"white\">
\t\t\t\t<Label [text]=\"item.title\"></Label>
\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
\t\t\t\t\t   [src]=\"item.image\"></Image>
\t\t\t</StackLayout>
\t\t</ng-template>


\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
\t\t\t<StackLayout>
\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
\t\t\t\t<Label [text]=\"item.text\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>

\t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
\t\t\t<StackLayout>
\t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
\t\t\t</StackLayout>
\t\t</ng-template>
\t</Accordion>
\n

Config

\n
public selectedIndexes = [0,3]
\n
<Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-appconfig":{"name":"nativescript-dev-appconfig","version":"1.0.2","license":"MIT","readme":"

nativescript-dev-appconfig

\n

Adds support for --env.config argument to Nativescript CLI commands.

\n

--env.config <name> will load $ProjectDir/config/<name>.json and inject it as $ProjectDir/app/config.json

\n

If config contains an "app_name" key, the native app will have its product name updated.

\n

The config file is injected into the app as "config.json", so that it can be loaded at runtime.

\n

Install:

\n
tns plugin add nativescript-dev-appconfig
\n

Example:

\n

tns prepare android --env.config beta will load $ProjectDir/config/beta.json

\n

If beta.json contains "app_name": "My Beta App",\nit will update product name in Info.plist for iOS and strings.xml for Android.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-live-engage":{"name":"nativescript-live-engage","version":"6.1.1","license":"MIT","readme":"

NativeScript plugin for LivePerson LiveEngage

\n

\"npm

\n

This is a plugin to show the conversation from a LiveEngage chat, using the LP-Messaging SDK (Android v3.6.0, iOS v3.6.0).

\n

Requirements

\n\n

Installation

\n

Run the following command from the root of your project:

\n
npm install nativescript-live-engage
\n

Setup

\n

At the launch of your app call initializeChat with your credentials (our example main.ts):

\n
LiveEngage.getInstance().initializeChat('12345678', 'com.example.myapp');
\n

Android

\n
    \n
  1. \n

    Set the minSdkVersion to at least 19, in your AndroidManifest.xml and app.gradle.

    \n
    2. \n
  2. \n

    Include the following dependencies in the include.gradle file of your app:

    \n
      compile \"com.android.support:appcompat-v7:24.2.1\"
      compile \"com.android.support:design:24.2.1\"
      compile \"com.android.support:percent:24.2.1\"
      compile 'com.google.android.gms:play-services-maps:9.8.0'
      compile 'com.android.support.constraint:constraint-layout:1.0.2'

      compile 'com.squareup.picasso:picasso:2.5.2'
      compile 'com.neovisionaries:nv-websocket-client:1.31'
      compile 'com.squareup.okhttp3:okhttp:3.6.0'
    \n
    3. \n
\n

iOS

\n

You need to enable keychain sharing, to do this we need a custom entitlements file with a keychain-access-groups key.

\n

Add nativescript-custom-entitlements to your devDependencies and create a new entitlements file like our example app.entitlements.

\n

Chatting

\n

To open the chat window call showChat:

\n
LiveEngage.getInstance().showChat();
\n

Optional functions

\n

Setting customer information

\n

Add the first name, last name, nick name, avatar url or phone number of a user.

\n
const chatProfile: ChatProfile = {
          firstName: 'Jane',
          lastName: 'Doe',
          nickName: 'JD',
          phone: '0132100000',
          avatarUrl: ''
      };
LiveEngage.getInstance().setUserProfileValues(chatProfile);
\n

oAuth

\n

Add a JWT for oAuth support when starting a conversation. Make sure you configure the Live Person data source to support the oAuth 2 authentication in terms of Live person public keys, Signing identities and possible (custom) claims definitions. Make sure to call this method before you start the conversation.

\n
LiveEngage.getInstance().setAuthenticationCode('<JWT encoded token string>');
\n

Hiding chat

\n

When you want to hide the chat window programmatically call closeChat().

\n
LiveEngage.getInstance().closeChat();
\n

Logging Out

\n

When you want to remove all user data and unregister for push notifications call killChat().

\n
LiveEngage.getInstance().killChat()
            .then(() => {
                console.log('killChat success');
            }).catch((error: any) => {
                console.log('killChat error', error);
        });
\n

Push Notifications

\n

To recieve push notifications when the agent sends a new message you need to send the push token to LivePerson.\nWhen you have a push token (FCM for Android and APNS for iOS) you can send it to LivePerson using registerPushToken

\n
LiveEngage.getInstance().registerPushToken('your-token');
\n

Parsing message on Android

\n

To parse the push notification message on android in onMessageReceived() in your FirebaseMessagingService, use parsePushMessage().\nThis will return a PushMessageParser object which has the method getMessage() to return the title of the push message.

\n
try {
    const message = LiveEngage.getInstance().parsePushMessage(data);
    console.log(message.getMessage());
} catch (e) {
    console.error(\"Failed to parse message:\", e);
}
\n

Getting unread message count

\n

To get the total amount of unread messages, use getUnreadMessagesCount().\nThis will only work when push notifications are enabled.

\n
LiveEngage.getInstance().getUnreadMessagesCount((count: number) => {
    console.log('Unread messages:', count);
}, (error: any) => {
    console.log('Failed to get count: ', error);
});
\n

Close window callback on iOS

\n

To get notified when the conversation was dismissed, you can provide a callback when opening the chat on iOS:

\n
LiveEngage.getInstance().showChat(() => {
    console.log('Chat window was closed');
});
\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n

Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.

\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away all generated folders to reinstall them fresh.\nRun npm run clean to wipe those clean then you can can run plugin.prepare to install fresh dependencies.

\n

Sometimes you just need to wipe out the demo's platforms, node_modules and hooks directory only.\nRun npm run demo.reset to delete those.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/ble":{"name":"@awarns/ble","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/ble

\n

\"npm\n\"npm\"

\n

This module includes tasks to obtain information regarding nearby Bluetooth Low Energy (BLE) devices. This is useful to assess the existence of concrete devices nearby. Also, to build custom indoor localization and positioning systems based on BLE. Supports the iBeacon standard.

\n

This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering BLE scanning tasks. Scan for nearby BLE devices even in background.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/ble
\n

Usage

\n

After installing and setting up this plugin, you'll have access to two different tasks to scan for Bluetooth Low Energy (BLE) devices seen nearby. The result, will be a BleScan record, described below.

\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
acquirePhoneBleScanAllows to perform single BLE scans for a given amount of time
acquireMultiplePhoneBleScanAllows to repeatedly perform BLE scans. The duration of each scan can be controlled. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
\n
\n

Note: All the tasks require fine location permission, bluetooth scanning permission, active location services and active bluetooth adapter for their execution. Each task will automatically request what is missing during framework's initialization

\n
\n

Acquire a single BLE scan

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquirePhoneBleScanTask, BleScanMode } from '@awarns/ble';

export const demoTasks: Array<Task> = [
    acquirePhoneBleScanTask(
      /* optional */ { scanTime: 5000, scanMode: BleScanMode.BALANCED, iBeaconUuids: [] }
    ),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
scanTimenumberThe amount of time (in milliseconds) to be spent scanning. Defaults to 5000 (5s)
scanModeBleScanModeThe BLE scan mode to use, see context-apis docs API section on BLE. Defaults to balanced mode
iBeaconUuidsArray<String>Filters the scan results to only show devices broadcasting one of the given iBeacon UUID(s)
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquirePhoneBleScan')
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('bleScanAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Acquire BLE scans in batch

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquireMultiplePhoneBleScanTask, BleScanMode } from '@awarns/ble';

export const demoTasks: Array<Task> = [
    acquireMultiplePhoneBleScanTask(
      /* optional */ { scanTime: 5000, scanMode: BleScanMode.BALANCED, iBeaconUuids: [] }
    ),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
scanTimenumberThe amount of time (in milliseconds) to be spent scanning. Defaults to 5000 (5s)
scanModeBleScanModeThe BLE scan mode to use, see context-apis docs API section on BLE. Defaults to balanced mode
iBeaconUuidsArray<String>Filters the scan results to only show devices broadcasting one of the given iBeacon UUID(s)
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquireMultiplePhoneBleScan', { maxInterval: 10000 /* (Optional) Maximun interval between scans, unlimited by default */ })
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('bleScanAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
bleScanAcquiredBleScan | Array<BleScan>Indicates that one or more new BLE scan results have been acquired
\n

Records

\n

BleScan

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways ble-scan
changeChangeAlways none. Scan results are returned as a whole. Intermediate results are not reported
timestampDateThe local time when the scan was completed
seenArray<BleDeviceInfo>The devices seen during the scan. The list can be empty. For details on the properties of the BleDeviceInfo object, see context-apis API docs section on BLE
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-dialog":{"name":"@nstudio/nativescript-dialog","version":"1.0.1","license":"Apache-2.0","readme":"

\n

NativeScript-Dialog

\n

\n

This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@reazerdev/nativescript-virtual-joystick":{"name":"@reazerdev/nativescript-virtual-joystick","version":"1.0.2","license":"Apache-2.0","readme":"

NativeScript Virtual Joystick

\n

The similar version of this plugin for the NativeScript 5\nis available here

\n

Disclaimer

\n
\n

This plugin is almost fully based on the source code of Victor Sossa\nThank you guys for your hard work and contributions!

\n
\n

Screenshot

\n

\"screenshot\"

\n

Installation

\n
ns plugin add @reazerdev/nativescript-virtual-joystick
\n

Usage

\n\n\n\n\n\n\n\n\n\n\n\n
Android Library
controlwear virtual-joystick-android
\n
<Page class=\"page\"
  navigatingTo=\"onNavigatingTo\"
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:jv=\"@reazerdev/nativescript-virtual-joystick\">
  <ActionBar class=\"action-bar\">
    <Label class=\"action-bar-title\" text=\"Virtual Joystick\"></Label>
  </ActionBar>

  <StackLayout>
    <Label text=\"{{ 'Angle: ' + angle }}\" />
    <Label text=\"{{ 'Strength: ' + strength }}\" />

    <Label text=\"{{ 'Left Horizontal: ' + lx }}\" />
    <Label text=\"{{ 'Left Vertical: ' + ly }}\" />

    <Label text=\"{{ 'Right Horizontal: ' + rx }}\" />
    <Label text=\"{{ 'Right Vertical: ' + ry }}\" />

    <StackLayout orientation=\"horizontal\">
      <jv:VirtualJoystick
        move=\"onMove\"
        angle=\"{{ angle }}\"
        strength=\"{{ strength }}\"
        xAxis=\"{{ lx }}\"
        yAxis=\"{{ ly }}\"
        jvColor=\"#AA0000\"
        jvBackgroundColor=\"#0000AA\"
        jvBorderColor=\"#00AA00\"
        width=\"50%\" />

      <jv:VirtualJoystick
        angle=\"{{ angle }}\"
        strength=\"{{ strength }}\"
        xAxis=\"{{ rx }}\"
        yAxis=\"{{ ry }}\"
        jvColor=\"#330000\"
        jvBackgroundColor=\"#000033\"
        jvBorderColor=\"#003300\"
        buttonStickToBorder=\"true\"
        width=\"50%\" />
    </StackLayout>
  </StackLayout>
</Page>
\n
import { NavigatedData, Page } from \"@nativescript/core\";
import { HomeViewModel } from \"./home-view-model\";
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

export function onNavigatingTo(args: NavigatedData) {
  const page = <Page>args.object;

  page.bindingContext = new HomeViewModel();
}

export function onMove(data: VirtualJoystickEventData) {
  console.log(`Angle: ${data.angle}`);
  console.log(`Strength: ${data.strength}`);
  console.log(`Horizontal: ${data.xAxis}`);
  console.log(`Vertical: ${data.yAxis}`);
}
\n

Usage within Angular Apps

\n

Import an Angular Module

\n
import { NativeScriptVirtualJoystickModule } from '@reazerdev/nativescript-virtual-joystick/angular';

@NgModule({
    [
       ...,
       NativeScriptVirtualJoystickModule
    ],
    ...
})
export class AppModule {}
\n

Use custom element in your views

\n
<StackLayout orientation=\"horizontal\">
  <VirtualJoystick
    (move)=\"onMove($event)\"
    angle=\"{{ angle }}\"
    strength=\"{{ strength }}\"
    xAxis=\"{{ lx }}\"
    yAxis=\"{{ ly }}\"
    jvColor=\"#AA0000\"
    jvBackgroundColor=\"#0000AA\"
    jvBorderColor=\"#00AA00\"
    width=\"50%\" />

  <VirtualJoystick
    angle=\"{{ angle }}\"
    strength=\"{{ strength }}\"
    xAxis=\"{{ rx }}\"
    yAxis=\"{{ ry }}\"
    jvColor=\"#330000\"
    jvBackgroundColor=\"#000033\"
    jvBorderColor=\"#003300\"
    buttonStickToBorder=\"true\"
    width=\"50%\" />
</StackLayout>
\n
import { Component } from '@angular/core';
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

@Component({
  selector: 'ns-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  public onMove(event: VirtualJoystickEventData) {
    console.log(event.angle);
    console.log(`Strength: ${data.strength}`);
    console.log(`Horizontal: ${data.xAxis}`);
    console.log(`Vertical: ${data.yAxis}`);
  }
}
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyCssTypeDefaultDescription
angle-number-1Read only. The angle of the button. Counter-clockwise, 0 is right.
strength-number0Read only. The distance from center in the range 0 - 100.
xAxis-number0Read only. The distance from center on horizontal axis in the range of -1 (left) to 1 (right).
yAxis-number0Read only. The distance from center on vertical axis in the range of -1 (down) to 1 (up).
jvColorjv-colorColor#000000The color of the button. If image is provided this property is ignored.
jvImagejv-imagestringundefinedThe image to use as button.
jvBackgroundColorjv-background-colorColortransparentThe color of range circle.
jvBorderColorjv-border-colorColortransparentThe color of range circle border.
jvBorderWidthjv-border-widthnumber3The thickness of the range circle border.
buttonAutoRecenter-booleantrue-
buttonStickToBorder-booleanfalseIf set to true, button only has 2 states: centered (strength 0) or pushed (strength 100).
buttonDirection-number0Restrict button movement. 0 means all directions, positive number restricts movement to vertical axis, negative number -- horizontal axis.
buttonSizeRatio-number0.25Button size ratio relative to widget size.
backgroundSizeRatio-number0.75Range circle size ratio relative to widget size.
fixedCenter-booleantrueWhether button center (strength 0) is fixed to widget center or relative to touchdown point.
enabled-booleantrueWhether widget accepts taps and emits events.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/geocoding":{"name":"@nativescript-community/geocoding","version":"3.1.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vuex-persistent":{"name":"nativescript-vuex-persistent","version":"1.2.0","license":"MIT","readme":"

\"GitHub

\n

Install

\n
npm install --save nativescript-vuex-persistent
\n

Use

\n
import NSVuexPersistent from 'nativescript-vuex-persistent';

const store = new Vuex.Store({
  state: {
    // Your state.
  },
  mutations,
  actions,
  getters,
  strict: debug,
  plugins: [NSVuexPersistent([
    // Here you will define the states that you want to be persistent.
  ])]
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rfid-android":{"name":"nativescript-rfid-android","version":"1.0.2","license":"Apache-2.0","readme":"

Push Plugin for NativeScript

\n

The code for the Push Plugin for NativeScript.

\n\n

Getting started

\n\n

Android

\n
\n

See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

\n
\n\n
\tvar pushPlugin = require(\"nativescript-push-notifications\");
\tvar self = this;
\tpushPlugin.register({ senderID: '<ENTER_YOUR_PROJECT_NUMBER>' }, function (data){
\t\tself.set(\"message\", \"\" + JSON.stringify(data));
\t}, function() { });

\tpushPlugin.onMessageReceived(function callback(data) {
\t\tself.set(\"message\", \"\" + JSON.stringify(data));
\t});
\n\n

The plugin will default to version 10.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion like so:

\n
```\n// in the root level of /app/App_Resources/Android/app.gradle:\n\nproject.ext {\n    firebaseMessagingVersion = "+" // OR the version you wish\n}\n```\n
\n

iOS

\n\n
\tvar pushPlugin = require(\"nativescript-push-notifications\");
        var self = this;
        var iosSettings = {
            badge: true,
            sound: true,
            alert: true,
            interactiveSettings: {
                actions: [{
                    identifier: 'READ_IDENTIFIER',
                    title: 'Read',
                    activationMode: \"foreground\",
                    destructive: false,
                    authenticationRequired: true
                }, {
                    identifier: 'CANCEL_IDENTIFIER',
                    title: 'Cancel',
                    activationMode: \"foreground\",
                    destructive: true,
                    authenticationRequired: true
                }],
                categories: [{
                    identifier: 'READ_CATEGORY',
                    actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                    actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                }]
            },
            notificationCallbackIOS: function (data) {
                self.set(\"message\", \"\" + JSON.stringify(data));
            }
        };

        pushPlugin.register(iosSettings, function (data) {
            self.set(\"message\", \"\" + JSON.stringify(data));

            // Register the interactive settings
                if(iosSettings.interactiveSettings) {
                    pushPlugin.registerUserNotificationSettings(function() {
                        alert('Successfully registered for interactive push.');
                    }, function(err) {
                        alert('Error registering for interactive push: ' + JSON.stringify(err));
                    });
                }
        }, function() { });
\n\n

API

\n
\t// Get reference to the push plugin module.
\tvar pushPlugin = require('nativescript-push-notifications');
\n\n
\n

register(settings, successCallback, errorCallback)

\n
\n

\tvar settings = {
\t\t// Android settings
\t\tsenderID: '<ENTER_YOUR_PROJECT_NUMBER>', // Android: Required setting with the sender/project number
\t\tnotificationCallbackAndroid: function(message, pushNotificationObject) { // Android: Callback to invoke when a new push is received.
        \talert(JSON.stringify(message));
        },

\t\t// iOS settings
        badge: true, // Enable setting badge through Push Notification
        sound: true, // Enable playing a sound
        alert: true, // Enable creating a alert

        // Callback to invoke, when a push is received on iOS
        notificationCallbackIOS: function(message) {
        \talert(JSON.stringify(message));
        }
\t};


\tpushPlugin.register(settings,
\t\t// Success callback
\t\tfunction(token) {
                        // if we're on android device we have the onMessageReceived function to subscribe
\t\t\t// for push notifications
\t\t\tif(pushPlugin.onMessageReceived) {
\t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
\t\t\t}

\t\t\talert('Device registered successfully');
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t}
\t);
\n\n
\n

unregister(successCallback, errorCallback, settings)

\n
\n

\tpushPlugin.unregister(
\t\t// Success callback
\t\tfunction(){
\t\t\talert('Device unregistered successfully');
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t},

\t\t// The settings from the registration phase
\t\tsettings
\t);
\n\n
\n

register(settings, successCallback, errorCallback)

\n
\n

\tvar settings = {
\t\tbadge: true,
\t\tsound: true,
        alert: true,
        interactiveSettings: {
        \tactions: [{
            \tidentifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
            identifier: 'CANCEL_IDENTIFIER',
            \ttitle: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
            \tidentifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },
        notificationCallbackIOS: function(message) {
        \talert(JSON.stringify(message));
        }
\t};


\tpushPlugin.register(settings,
\t\t// Success callback
\t\tfunction(token){
\t\t\t// if we're on android device we have the onMessageReceived function to subscribe
\t\t\t// for push notifications
\t\t\tif(pushPlugin.onMessageReceived) {
\t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
\t\t\t}

\t\t        // Register the interactive settings
\t\t\tif(settings.interactiveSettings) {
\t\t\t\tpushPlugin.registerUserNotificationSettings(function() {
\t\t\t\t\talert('Successfully registered for interactive push.');
\t\t\t\t}, function(err) {
\t\t\t\t\talert('Error registering for interactive push: ' + JSON.stringify(err));
\t\t\t\t});
\t\t\t}
\t\t},
\t\t// Error Callback
\t\tfunction(error){
\t\t\talert(error.message);
\t\t}
\t);
\n\n
\n

areNotificationsEnabled(callback)

\n
\n

\tpushPlugin.areNotificationsEnabled(function(areEnabled) {
\t\talert('Are Notifications enabled: ' + areEnabled);
    });
\n\n
\n

onTokenRefresh(callback)

\n
\n

\tpushPlugin.onTokenRefresh(function(token){
\t\t\talert(token);
\t\t});
\n

Troubleshooting

\n

In case the application doesn't work as expected. Here are some things you can verify

\n

Android

\n\n
\t<activity android:name=\"com.telerik.pushplugin.PushHandlerActivity\"/>
\t<receiver
\t\tandroid:name=\"com.google.android.gms.gcm.GcmReceiver\"
\t    android:exported=\"true\"
\t    android:permission=\"com.google.android.c2dm.permission.SEND\" >
\t    <intent-filter>
\t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
\t        <category android:name=\"com.pushApp.gcm\" />
\t    </intent-filter>
\t</receiver>
\t<service
\t\tandroid:name=\"com.telerik.pushplugin.PushPlugin\"
\t    android:exported=\"false\" >
\t    <intent-filter>
\t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
\t    </intent-filter>
\t</service>
\n\n
\t<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
\t<uses-permission android:name=\"android.permission.WAKE_LOCK\" />
\t<uses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" />
\n

iOS

\n\n

Using with Telerik Backend Services

\n

In order to use the plugin with Telerik Backend Services take a look at the official sample:

\n

Telerik Backend Services NativeScript Push Sample

\n

Android Configuration for using Firebase Cloud Messaging

\n

From version 0.1.0 the nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

\n
    \n
  1. Add the FCM SDK
    2. \n
\n
\n

Since version 0.1.1 thе google-services plugin is added via a hook. You can skip this step for versions 0.1.1 and above.

\n
\n
- Navigate to the project `platforms/android/` folder and locate the application-level `build.gradle` file\n- Add the `google-services` plugin to the list of other dependencies in your app's `build.gradle` file\n\n\n```Groovy\ndependencies {\n\t// ...\n\tclasspath "com.google.gms:google-services:3.0.0"\n\t// ...\n}\n```\n\n- Add the following line be at the bottom of your `build.gradle` file to enable the Gradle plugin\n\n```Groovy\napply plugin: 'com.google.gms.google-services'\n```\n
\n
    \n
  1. \n

    Add the google-services.json file

    \n

    To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

    \n

    Place the file in your app's App_Resources/Android folder

    \n
    2. \n
  2. \n

    Obtain the FCM Server Key

    \n

    This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

    \n

    If you are using the Telerik Platform Notifications service refer to this article for instructions how to set up this key.

    \n
    3. \n
\n

Receive and Handle Messages from FCM on Android

\n

The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

\n

The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the onMessageReceived(message, data, notification) method of the NativeScript module.

\n

The behavior of the onMessageReceived callback in the module follows the behavior of the FCM service.

\n

Handling Data Messages

\n

The onMessageReceived method of the plugin is called each time a data notification is received.

\n

When in background mode, a notification is constructed according to the values of the key specified above and placed in the tray. Tapping the notification launches the app and invokes the onMessageReceived callback.

\n

Handling Notification Messages

\n

If the app is in foreground, it invokes the onMessageReceived callback with three arguments (message, data, notification).

\n

If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the onMessageReceived callback.

\n

Handling Mixed Messages

\n

Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

\n\n

Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

\n
application.on(application.resumeEvent, function(args) {
    if (args.android) {
        var act = args.android;
        var intent = act.getIntent();
        var extras = intent.getExtras();
        if (extras) {
            // for (var key in extras) {
            //     console.log(key + ' -> ' + extras[key]);
            // }
            var msg = extras.get('someKey');
        }
    }
});
\n

Parameters of the onMessageReceived Callback

\n

Depending on the notification event and payload, the onMessageReceived callback is invoked with up to three arguments.

\n\n

Setting Notification Icon and Color

\n
\n

From version 0.1.0 the module no longer adds as default a large icon of the notification because this was forcing developers to always use a large icon which is not the native behavior.

\n
\n

The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray. More information on these keys is available in the documentation of the Telerik Platform Notifications service documentation article.

\n

Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

\n
\t<meta-data
\t\tandroid:name=\"com.google.firebase.messaging.default_notification_icon\"
\t\tandroid:resource=\"@drawable/ic_stat_ic_notification\" />
\t<meta-data
\t\tandroid:name=\"com.google.firebase.messaging.default_notification_color\"
\t\tandroid:resource=\"@color/colorAccent\" />
\n
\n

For more info visit the Edit the app manifest article.

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-tagmanager":{"name":"nativescript-google-tagmanager","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript Google Tag Manager

\n

Add Plugin

\n
tns plugin add nativescript-google-tagmanager
\n

Prequisities

\n

Download your container from Google Tag Manager page as binary.

\n

IOS

\n

In your app, copy the binary file into the folder:

\n

/App_Resources/IOS

\n

Android

\n

In your app, copy the binary file into the folder:

\n

/App_Resources/Android/raw

\n

note: if there is no raw folder inside Android folder, create it.\nnote2: change the name of the binary file as lowercase letters, and replace - with _ (this is needed because of androids file name restrictions).

\n

####For example:

\n

If your Binary file name is GTM-AAA11B replace its name as: gtm_aaa11b

\n

Initalize the tracker in app.js

\n

PLAIN JS

\n
var application = require(\"application\");
var tagManager = require(\"nativescript-google-tagmanager\");
application.mainModule = \"main-page\";
application.cssFile = \"./app.css\";

if (application.ios) {
    //iOS
    var __extends = this.__extends || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
    };
    
    var appDelegate = (function (_super) {
        __extends(appDelegate, _super);
        function appDelegate() {
            _super.apply(this, arguments);
        }
        
        appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            initTagManager(); //Module Code to initalize
        };
        
        appDelegate.ObjCProtocols = [UIApplicationDelegate];
        return appDelegate;
    })(UIResponder);
    application.ios.delegate = appDelegate;
}else{
    //ANDROID
    application.on(application.launchEvent, function (args) {
        initTagManager(); //Module Code to initalize
    });

}

application.start();

function initTagManager(){
    tagManager.initalize({
        containerId: \"GTM-XXXXXX\", //YOUR Id from GTM
        logLevel: 'verbose'//Optional, default none.
        //available values: 'verbose', 'debug', 'info', 'warning', 'error'
    });
}
\n

Typescript

\n
var application = require(\"application\");
import * as googleTagManager from \"nativescript-google-tagmanager\";
application.mainModule = \"main-page\";
application.cssFile = \"./app.css\";

if (application.ios) {
    //iOS
    class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
            initTagManager(); //Module Code to initalize
            return true;
        }

    }

    application.ios.delegate = MyDelegate;

}else{
    //ANDROID
    application.on(application.launchEvent, function (args) {
        initTagManager(); //Module Code to initalize
    });

}

application.start();

function initTagManager(){
    googleTagManager.initalize({
        containerId: \"GTM-XXXXXX\", //YOUR Id from GTM
        logLevel: 'verbose'//Optional, default none.
        //available values: 'verbose', 'debug', 'info', 'warning', 'error'
    });
}
\n

Methods

\n

Log Anything

\n
// category and action are not optional, label and value are
googleTagManager.log({
  \"event\": \"eventTrack\",
  \"eventCategory\": \"Button\",
  \"eventAction\": \"Press\",
  \"eventLabel\": \"Sign Up\",
  \"screenName\": \"Login\"
});

googleTagManager.log({
  \"event\": \"screenVisible\",
  \"screenName\": \"Login\"
});
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timedatepicker":{"name":"nativescript-timedatepicker","version":"1.2.1","license":{"type":"","url":"https://github.com/AntonioCuevaUrraco/nativescript-timedatepicker/blob/master/LICENSE"},"readme":"

nativescript-timedatepicker

\n

A NativeScript plugin providing native date and time pickers for Android and iOS.

\n

##Android side\n\"alt\n##iOS side\n\"alt

\n

Usage

\n

//Import the plugin
import * as TimeDatePicker from 'nativescript-timedatepicker';

//Create a callback function
let mCallback =  ((result) => {
  if (result) {
    alert(\"the time is \"+result);
  }
});

//Initialize the PickerManager (.init(yourCallback, title, initialDate))
TimeDatePicker.init(mCallback,null,null);

//Show the dialog
TimeDatePicker.showDatePickerDialog();
\n

For more examples of usage see the demo main-view-model.ts.

\n

##IOS localization

\n

If you want the buttons to be on some other language than english you have to add that language to your project on xcode.

\n

\"alt

\n

##Credits\nThis plugin abstract two native libraries, hence here are the project and deserved merit to the creators.

\n

For iOS https://github.com/hackiftekhar/IQActionSheetPickerView
\nFor Android https://github.com/CiTuX/datetimepicker

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-diawi-distribution":{"name":"nativescript-diawi-distribution","version":"1.0.4","license":"MIT","readme":"

nativescript-diawi-distribution

\n

Prerequisites

\n\n

Quick Start

\n
    \n
  1. npm install --save-dev nativescript-diawi-distribution
    2. \n
  2. Generate a Diawi access token here https://dashboard.diawi.com/profile/api
    3. \n
  3. Copy the below config, insert the token from above step and save in project root as "diawi-upload.config.json"\n{\n"diawi_access_token": "[YOUR_TOKEN_HERE]",\n}
    4. \n
  4. Use nativescript build commands for ios/android and include --env.diawi flag\n4a. eg: tns build android --env.diawi
    5. \n
  5. Add diawi-upload.config.json to your .gitignore - this file includes your diaiw API key you do not want to store this in a repository
    6. \n
\n

Configuration

\n

"emails" can also be specified as a field in the configuration file as a comma separated list. Addresses listed here will be notified of build completion with a link to download

\n

Credit

\n

Diawi upload code originally by Ronak Doshi and can be found here as part of a github action: https://github.com/rnkdsh/action-upload-diawi

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace-cocoapods-plugin":{"name":"nativescript-dynatrace-cocoapods-plugin","version":"1.0.6","license":"ISC","readme":"

nativescript-dynatrace-cocoapods-plugin

\n

Installation

\n

tns plugin add nativescript-dynatrace-cocoapods-plugin

\n

Configuration

\n

You must generate application ID and beacon URL and add them to your project's Info.plist file so that your iOS mobile app can send monitoring data to your Dynatrace monitoring environment.

\n

Add the configuration to your Info.plist in the following way:

\n

<key>DTXApplicationID</key>
\n<string>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</string>

\n

<key>DTXBeaconURL</key>
\n<string>https://xxxxxxxxxx.bf.dynatrace.com/mbeacon</string>

\n

Similar Plugins

\n

NativeScript Dynatrace Gradle Plugin for Android: https://www.npmjs.com/package/nativescript-dynatrace-gradle-plugin

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-orientation-free":{"name":"nativescript-orientation-free","version":"2.2.5","license":"MIT","readme":"

Free version for nativeScript-orientation (renamed to nativeScript-orientation-free)

\n

A rather maintained version of nativeScript-orientation. This is simply a fork of nativeScript-orientation which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

\n

To use this, simply install with NPM using:

\n

npm install nativeScript-orientation-free

\n

All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-ext-fork":{"name":"nativescript-webview-ext-fork","version":"7.0.3","license":"Apache-2.0","readme":"

@nota/nativescript-webview-ext

\n

Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

\n

Features

\n\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add @nota/nativescript-webview-ext
\n

Update minSdkVersion to 19 or higher

\n

Android SDK 19 is required, update App_Resources/Android/app.gradle:

\n
android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters \"--no-version-vectors\"
  }
}
\n

Core support

\n

Load in template like this:

\n
<Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:nota=\"@nota/nativescript-webview-ext\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <nota:WebViewExt src=\"https://nota.dk\"></<nota:WebViewExt>
</Page>
\n

Angular support

\n

Import WebViewExtModule from @nota/nativescript-webview-ext/angular and add it to your NgModule.

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Vue support

\n

Import @nota/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

\n

This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

\n

Usage

\n

Limitations

\n

The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

\n

Custom-scheme support for iOS <11 was removed because of ITMS-90809.

\n

API

\n

NativeScript View

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyValueDescription
readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
srcLoad src
autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
supportZoomtrue / falseAndroid: should the webview support zoom
viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
getTitle()Returns a promise with the current document title.
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescription
loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
titleChangedDocument title changed
webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
\n

WebView

\n

Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescription
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
\n

Waiting for nsWebViewBridge to be available

\n
    window.addEventListener(\"ns-bridge-ready\", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;
        
        // do stuff here
    });
\n

Possible features to come:

\n\n

Android

\n\n

iOS

\n\n

Demo and unit tests

\n

Running the demo

\n

To run the demo-project, the plugin must be build locally and a http-server must be running.

\n

The easiest way to run the demo is to follow these steps:

\n\n

Running the unit-tests

\n\n

License

\n

Apache License Version 2.0, January 2004

\n

About Nota

\n

Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-checkbox":{"name":"nativescript-danem-checkbox","version":"1.0.0","license":"Apache-2.0","readme":"

@nstudio/nativescript-checkbox

\n

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

\n
ns plugin add @nstudio/nativescript-checkbox
\n

Platform controls used:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
Android CheckBoxBEMCheckBox
\n

Usage

\n
<Page
  xmlns=\"http://schemas.nativescript.org/tns.xsd\"
  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
  <ActionBar title=\"Native Checkbox\" />
  <StackLayout>
    <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
    <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
  </StackLayout>
</Page>
\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
import { Frame } from '@nativescript/core';

public toggleCheck() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}
\n

Angular Usage Sample:

\n
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}
\n
<StackLayout>
  <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
  <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
  <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
</StackLayout>
\n

NativeScript-Vue Usage Sample

\n

In your main.js (The file where the root Vue instance is created) register the element

\n
import { CheckBox } from '@nstudio/nativescript-checkbox';
Vue.registerElement(
  'CheckBox',
  () => CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);
\n

And in your template, use it as:

\n
<check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
\n

Use checked instead of v-model. See #99.

\n

Properties

\n\n

Events

\n\n

API

\n\n

Css Styling

\n\n

Styling [Android]

\n\n

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
    <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
    <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
    <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
</selector>
\n

Radiobuttons, anyone?

\n

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace-gradle-plugin":{"name":"nativescript-dynatrace-gradle-plugin","version":"1.0.3","license":"ISC","readme":"

nativescript-dynatrace-gradle-plugin

\n

Installation

\n

tns plugin add nativescript-dynatrace-gradle-plugin

\n

Configuration

\n

You must generate application ID and beacon URL and add them to your project's gradle.properties file so that your Android mobile app can send monitoring data to your Dynatrace monitoring environment.

\n

Add the configuration to your gradle.properties in the following way:

\n

DTXApplicationID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

\n

DTXBeaconURL=https://xxxxxxxxxx.bf.dynatrace.com/mbeacon

\n

Similar Plugins

\n

NativeScript Dynatrace Cocoapods Plugin for iOS: https://www.npmjs.com/package/nativescript-dynatrace-cocoapods-plugin

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-orientation-ssi":{"name":"nativescript-orientation-ssi","version":"2.2.5","license":"MIT","readme":"

Free version for nativeScript-orientation (renamed to nativeScript-orientation-free)

\n

A rather maintained version of nativeScript-orientation. This is simply a fork of nativeScript-orientation which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

\n

To use this, simply install with NPM using:

\n

npm install nativeScript-orientation-free

\n

All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-design-icons":{"name":"nativescript-material-design-icons","version":"1.0.0","license":"MIT","readme":"

Nativescript Material Icons

\n

This is a simple package which contains css classes for all material design icons and MaterialIcons font.

\n

Why This Plugin

\n

To use any font icons in nativescript project, there is a great plugin nativescript-fonticon for vanilla nativescript project and nativescript-ng2-fonticon for angular native projects.\nThat plugin requires a font file and a css file containing mapping of className and unicode of the icon.

\n

material-design-icons repository do not provide css file so we need to generate it manually.

\n

This plugin provides the ready to use css file containing mapping of className and its unicode. This plugin also automatically copy the MaterialIcons-Regular.ttf file to app/fonts folder and material-design-icons.css file to app/ directory. So you don't need to manually add those files. Also, upon uninstall of this plugin, it will remove those two files.

\n

Usage

\n

npm install nativescript-material-design-icons --save

\n

How to Use

\n

Check this step-by-step tutorial on how to use material design font icons in your nativescript angular applications.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-inbox":{"name":"nativescript-open-inbox","version":"1.0.2","license":"MIT","readme":"

NativeScript Open Default Email App Inbox

\n

You can use this plugin to open the default email app on both android and ios.

\n

Installation

\n

Run this command from the root of your project:

\n
tns plugin add nativescript-open-inbox
\n

API

\n

To use this plugin you must first require/import it:

\n

TypeScript

\n
import { openInbox } from \"nativescript-open-inbox\";
// or
import { openInbox as goToEmailApp } from \"nativescript-open-inbox\";
\n

JavaScript

\n
var email = require(\"nativescript-open-inbox\");
\n

openInbox

\n

TypeScript

\n
  email.openInbox()
    .then(() => {
        console.log(\"Cool!\");
    })
    .catch((ex) => {
      console.log(\"Ouch!\" + ex);
    });
\n

JavaScript

\n
  email.openInbox()
    .then(() => {
        console.log(\"Cool!\");
    })
    .catch((ex) => {
      console.log(\"Ouch!\" + ex);
    })
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-to-nativescript":{"name":"preact-to-nativescript","version":"0.0.9","license":"MIT","readme":"

preact-to-nativescript\"Build \"Coverage \"dependencies\" \"npm\"

\n

This Library is experimental!

\n

Documentation

\n

Usage

\n

The following is assumed to be executed at the project root of a NativeScript project

\n
    \n
  1. Install the library
    2. \n
\n
npm i preact-to-nativescript
\n
    \n
  1. Adjust your NativeScript app.js
    2. \n
\n
var application = require(\"application\")
var preactToNativeScript = require(\"preact-to-nativescript\")
var render = preactToNativeScript.render
var h = preactToNativeScript.Preact.h

application.start({
  create: () => {
    return render(h(\"page\", {}, [h(\"actionBar\", {title: \"Custom Title\"}), h(\"stackLayout\", {}, [h(\"label\", {text: \"preact-to-nativescript page\"}, [])])]))
  }
})
\n
    \n
  1. Run your NativeScript app
    2. \n
\n

Demo Application

\n

\"Demo\"

\n

TBD

\n\n

Credits

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"habibtestPublish":{"name":"habibtestPublish","version":"0.0.3","license":"MIT","readme":"

Develop a nativescript-angular plugin now

\n

\"Angular\n\"MIT\n\"Dependency

\n\n\n\n\n\n\n\n\n\n\n\n
\"Demo\"
Android and iPhone running the same {N} + Angular2 plugin.
\n

The seed is setup to allow you to create a nativescript-angular plugin quickly.

\n\n

Get started

\n
    \n
  1. Download a zip of this seed.
    2. \n
  2. cd ... path/to/unzip/folder ...
    3. \n
  3. npm install -g typescript
    4. \n
  4. npm install -g nativescript
    5. \n
  5. npm install
    6. \n
  6. npm run setup
    7. \n
  7. Get to work.
    8. \n
\n

Changes needed

\n

You will want to change a couple things for your plugin.

\n
    \n
  1. Replace all instances of nativescript-ng2-yourplugin with name of your plugin:
    2. \n
\n\n
    \n
  1. Modify the demo to import your plugin files, etc: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/app/app.ts#L10-L15
    2. \n
\n

Develop Workflow

\n

Make changes to plugin files, then:

\n
npm run demo.ios

// or...

npm run demo.android
\n

Build Plugin

\n

You'll want to run this before publishing.

\n
npm run build
\n

VERY IMPORTANT: You need to modify package.json for your plugin. Most likely, you will want to remove 3 sections completely: scripts, dependencies, and devDependencies as those are setup for the demo. When publishing, it's important to ensure no unnecessary scripts or dependencies are installed when comsumers use your plugin. You can add those sections back after publishing.

\n

Testing

\n

Work in progress. Coming soon.

\n
npm test
\n

Troubleshooting

\n

When preparing your demo if you get the following error message:

\n
Plugin \"nativescript-ng2-yourplugin\" is not installed.
Sending exception report (press Ctrl+C to stop).....
\n

This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

\n

Why the TNS prefixed name?

\n

TNS stands for Telerik NativeScript

\n

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

\n

To avoid confusion with iOS native classes, TNS is used instead.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textinputlayout-v2":{"name":"nativescript-textinputlayout-v2","version":"2.0.8","license":"MIT","readme":"

../README.md

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shimmer":{"name":"nativescript-shimmer","version":"2.1.0","license":{"type":"BSD","url":"https://github.com/NathanWalker/nativescript-shimmer/blob/master/LICENSE"},"readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-playground-bar":{"name":"nativescript-playground-bar","version":"1.0.0","license":"MIT","readme":"

nativescript-playground-bar

\n

A plugin for your NativeScript Playground projects to help implement a light or dark content status bar.

\n

Installation

\n
    \n
  1. From the Playground UI select Add NPM package (via the Explorer popup menu).
    2. \n
  2. Enter nativescript-playground-bar as the NPM package name.
    3. \n
  3. Click Add.
    4. \n
\n

Usage

\n
// main-page.js
const PlaygroundBar = require(\"~/nativescript-playgroundbar\");

exports.pageLoaded = function (args) {
  PlaygroundBar.lightContent(args.object);
}
\n

Methods

\n

lightContent

\n

Sets the iOS status bar to light content.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ArgumentsRequiredDefaultDescription
pageyesn/aThe current page with the status bar you want to change.
timeoutno10Specifies the time (in milliseconds) you want to delay the change of style.
\n

darkContent

\n

Sets the iOS status bar to dark content, which is the playgrounds default style.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ArgumentsRequiredDefaultDescription
pageyesn/aThe current page with the status bar you want to change.
timeoutno10Specifies the time (in milliseconds) you want to delay the change of style.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-vuex-orm":{"name":"nativescript-couchbase-vuex-orm","version":"1.3.2","license":"MIT","readme":"

Nativescript Couchbase Vuex ORM

\n

nativescript-couchbase-vuex-orm

\n

A module that auto-generates conventional ORM-style modular vuex actions using the\nnativescript-couchbase-plugin. Ideally suited for Vue NativeScript projects. e.g.

\n
\n

Example

\n

given a couple of "Model" classes...

\n
export class Document {
  constructor () {
    this.hasMany(['ChildDocument']),
    this.properties({
      name: 'Default Document Name'
    })
  }
}

export class ChildDocument {
  constructor () {
    this.belongsTo = 'Document'
  }
}
\n

...and a bit of store setup (see further below), the following actions will automatically become available to dispatch on your vue template!

\n
import { mapGetters, mapActions } from 'vuex'
...
export default {
  methods () {
    ...mapActions[
      'Document/getById',
      'Document/create',
      'Document/update',
      'Document/addChildDocument',
      'Document/removeChildDocument',
      'Document/reorderChildDocument',
      'Document/delete',
      'ChildDocument/create',
      'ChildDocument/update'
      /* etc. */]
  }
}
\n

Thus, after a few dispatches, the data in your Couchbase-lite database would look something like the following:

\n
`select * from Document` [{
  _type: 'Document',
  childDocuments: [
    '6f0a1418-ea43-4cd2-a652-5202f4f251fb',
    '6f0a1418-ea43-4cd2-a652-5202f4f251fc'
  ],
  id: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
  name: 'Default Document Name'
}]

`select * from ChildDocument` [
  {
    _parentId: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
    _type: 'ChildDocument',
    id: '6f0a1418-ea43-4cd2-a652-5202f4f251fb'
  },
  {
    _parentId: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
    _type: 'ChildDocument',
    id: '6f0a1418-ea43-4cd2-a652-5202f4f251fc'
  }
]
\n
\n

Requirements

\n\n
\n

Installation

\n

to install with NPM, enter the following command in the desired project directory.

\n

npm install --save nativescript-couchbase-vuex-orm

\n

your store must have $db in it's root state object with a Couchbase-lite DB. Your "model" classes are supplied as below (we continue with the Document and ChildDocument examples from above):

\n
import { Couchbase } from 'nativescript-couchbase-plugin'
import { ORM } from 'nativescript-couchbase-vuex-orm'

import { Document, ChildDocument } from './Example.js'

const store = {
  state: {
    $db: new Couchbase('<your-db-name-here>'),
  },
  modules: {
    Document: new ORM(Document).build(),
    ChildDocument: new ORM(ChildDocument).build()
  }
}
\n

NB. Model classes will not work within other Model classes as vuex sub-modules (though ambitious developers are welcome to fork this project should they seek this functionality!) If you wish to create internal objects with a collection, add an object literal to your Model's properties object.

\n
\n

Model Abstract Class

\n

Model classes should appear as below (here I use the example of a WorkFlow which can have many Stories):

\n
class WorkFlow {
  constructor () {
    // a collection can only belong to one parent but can be featured in the hasMany of multiple instance types.  A Model's `belongsTo` property merely enforces a `_parentId`  property is present on the child collections of a given parent.
    this.belongsTo = 'Organisation'

    this.hasMany = [
      // NB. delete ALWAYS cascades by default

      // - EITHER -
      // String ChildClassName
      'Story',

      // (v^1.2.0)
      // - OR -
      // Model ChildClass
      // NB. to eager load children, a Model MUST be supplied
      Story

      // - OR -
      // Object ChildModel
      {
        // --------------
        // - EITHER -
        // String ChildClass i.e. 'class ChildClass { ... }'
        name: 'Story',

        // (v^1.2.0)
        // - OR -
        // Model ChildClass
        // NB. to eager load children, a Model MUST be supplied
        name: Story,
        // --------------

        // (optional) a plural name to use instead of bolting an \"s\" onto the name property (the default)
        pluralName: 'Stories',

        // override cascade behaviour with explicit property
        cascade: false
      }
    ],

    //  default model properties initialised as below:
    this.properties = {
      someString: 'Foo',
      someNumber: 1234,
      someObject: {
        foo: 'bar'
      }
    }

    // (v^1.3.0)
    // Still want to use the module as a normal part of your vue store as well?
    // You can optionally add state, mutations and getters too!
    this.state = {
      foo: 'test',
      bar: 1234
    }
    this.mutations = {
      setFooBar (state, { foo, bar }) {
        state.foo = foo
        state.bar = bar
      }
    }
    // all states are automatically mapped to default getters.
    // e.g. `store.getters[Workflow/foo] = state => state.someStoreVariable`
    // you can optionally add custom (or override) getters as below.
    this.getters = {
      getFooBar: state => state.foo + state.bar
    }
  }

  // custom actions are added outside of your constructor
  async customAction ({ dispatch, rootState }, args) {
    // e.g.
    // 1) call an instance modeled on the local class
    const yourModelName = await dispatch('getById', args.id)
    // 2) call parent using the retrieved parent Id
    const parentModel = await dispatch(
      'SomeParentModel/getById',
      yourModelName._parentId,
      { root: true })
    // 3) return the name property
    return parentModel.name
  }
}
\n

API

\n

Remember all calls use await/async or Promise.then() format

\n

getById(String id || { String id, Boolean lazy, Number maxDepth }) → Object<CouchbaseCollection> collection

\n\n

create(Object properties) → String id

\n\n

update({ String id, Object props }) → Boolean success

\n\n

delete(String id) → Boolean success

\n\n

add[Child](String id | { String id, Object child: {String id | Object props } }) → Number indexNumber

\n\n

example:

\n

given a "Deck" model that hasMany "Card", create a new card and add it to a deck with the supplied foo property

\n
await Deck.addCard({ id: \"0xparentId\", child: { props: { foo: 'bar' } }})
\n

remove[Child](String parentId | { String id, Object child: {String id, Boolean delete } }) → Boolean success

\n\n

example:

\n

given a "Deck" model that hasMany "Card", remove a card and delete it

\n
await Deck.removeCard({ id: \"0xparentId\", child: { id: \"0xchildId\", delete: true }})
\n

reorder[Child]({ String id, String fromIndex, String toIndex }) → Boolean success

\n\n

example:

\n

given a "Deck" model that hasMany "Card", move a card's index from 0 to 5

\n
Deck.reorderCard({ id: \"0xparentId\", fromIndex: 0, toIndex: 5 }})
\n
\n

Questions

\n

Here are some questions I can imagine myself having were I discovering this project for the first time:

\n

are the items in the state object stored in the database?

\n

No. Only properties will be added to the database. vuex state, mutations and getters are a separate concern from the database.

\n

are the database properties visible in the module's state object or by vuex getters?

\n

No. All database transactions including retrieval of data should be done using the supplied actions.

\n

can I access state, mutations and getters in my custom ORM actions?

\n

Yes! This is the recommended way to communicate between actions within your database and state within your application.

\n

When I getById with a valid ID I don't get anything back, why?

\n

A common cause is you're using the wrong module's getById. The ORM is type sensitive. Be wary of defining reserved ORM properties (e.g. _type, id, _parentId). If all else fails, the ORM really isn't that massive or difficult to read through. so if something feels weird, it shouldn't be too hard to spot the cause in my source. All of the conventions I introduce above are very strict so be sure to type everything precisely as instructed.

\n

Do you unit test this stuff?

\n

Yes, I have about 99.9% coverage in fact, but because I use an integrated version of this code in a private project, I can't release the tests I'm afraid because they all stub off my existing source code. you'll just have to take my word for it. Suffice it to say, I use this stuff and it all works correctly for my build.

\n

Do you have a roadmap for this project?

\n

Not right now, it's sort of organically growing along side the code I'm working on. When I spot something I'd like it to do, I figure others will be equally eager! That said, I'm receptive to suggestions (though I may not deal with them immediately!)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tesseract-ios":{"name":"nativescript-tesseract-ios","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-tesseract-ios/blob/master/LICENSE"},"readme":"

NativeScript-tesseract-ios

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n

Installation

\n

To install type

\n
tns plugin add nativescript-tesseract-ios
\n

Usages

\n

Example

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache-media":{"name":"nativescript-image-cache-media","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/NNieto/nativescript-image-cache-media/blob/master/LICENSE"},"readme":"

Nativescript-image-cache-media

\n

A plugin for caching web and local images on Android and iOS

\n

Using Picasso on Android and SDWebImage on iOS is a simple library that uses the nativescript image component and just adding a cache funcionality. Inspired by nativescript-web-image-cache and nativescript-image-cache-it plugins, Feel free to contribuite or suggest changes.

\n

License

\n

This plugin is licensed under the MITlicense by Alejandro Nieto

\n

Installation

\n

To install type

\n
tns plugin add nativescript-image-cache-media
\n

Usages

\n

You can use all the nativescript native image module, just set the imageUri property.

\n

Example

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IM=\"nativescript-image-cache-media\">
\t<StackLayout>
\t\t<IM:ImageCacheMedia placeholder=\"~/resources/images/placeholder.png\" stretch=\"aspectFill\" imageUri=\"{{ photo_url }}\"/>
\t</StackLayout>
</Page>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngkeyboardtracker":{"name":"nativescript-ngkeyboardtracker","version":"0.0.2","license":"MIT","readme":"

nativescript-ngkeyboardtracker

\n

\"npm\"\n\"npm\"

\n

Installation

\n
tns plugin add nativescript-ngkeyboardtracker
\n

Usage

\n

Refer to the library's CocoaPod page.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/photo-editor":{"name":"@skhye05/photo-editor","version":"1.0.3","license":"Apache-2.0","readme":"

@skhye05/photo-editor

\n

Overview

\n

This plugins is a copy of https://appcenter.ms with a few updates.

\n

Installation

\n
ns plugin add @skhye05/photo-editor
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-platform-css-free":{"name":"nativescript-platform-css-free","version":"1.6.16","license":"MIT","readme":"

Free version for nativescript-platform-css (renamed to nativescript-platform-css-free)

\n

Since all of these basic plugins have become paid now, I will try and maintain them for free for as long as I can.

\n

To use this, simply install with NPM using:

\n

npm install nativescript-platform-css-free

\n

All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@teammaestro/nativescript-svg":{"name":"@teammaestro/nativescript-svg","version":"1.0.1","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/wifi":{"name":"@awarns/wifi","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/wifi

\n

\"npm\n\"npm\"

\n

This module includes tasks to obtain information regarding nearby Wi-Fi access points (APs). This is useful to assess the existence of concrete access points nearby. Also, to build custom indoor localization and positioning systems based on Wi-Fi.

\n

This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering Wi-Fi scanning tasks. Scan for nearby Wi-Fi APs even in background.

\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/wifi
\n

Usage

\n

After installing and setting up this plugin, you'll have access to two different tasks to scan for Wi-Fi APs seen nearby. The result, will be a WifiScan record, described below.

\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
acquirePhoneWifiScanAllows to perform a single Wi-Fi scan for a given amount of time
acquireMultiplePhoneWifiScanAllows to repeatedly perform Wi-Fi scans. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
\n
\n

Note: All the tasks require fine location permission and active Wi-Fi radio for their execution. Each task will automatically request what is missing during framework's initialization

\n
\n

Acquire a single Wi-Fi scan

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquirePhoneWifiScanTask } from '@awarns/wifi';

export const demoTasks: Array<Task> = [
    acquirePhoneWifiScanTask(/* optional */ { ensureIsNew: true, timeout: 15000 }),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
ensureIsNewbooleanMake sure that the resulting Wi-Fi scan is up-to-date. A value of true ensures Android Wi-Fi scanning restrictions are met, thus the reported value is always new. The default value is true
timeoutnumberThe maximum time, in milliseconds, to be spent scanning for nearby Wi-Fi APs. The default value is 15000 (15s)
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquirePhoneWifiScan')
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('wifiScanAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Acquire Wi-Fi scans in batch

\n

To register this task for its use, you just need to import it and call its generator function inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import { acquireMultiplePhoneWifiScanTask } from '@awarns/wifi';

export const demoTasks: Array<Task> = [
  acquireMultiplePhoneWifiScanTask(/* optional */ { ensureIsNew: true, timeout: 15000 }),
];
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDescription
ensureIsNewbooleanMake sure that the resulting Wi-Fi scans are up-to-date. A value of true ensures Android Wi-Fi scanning restrictions are met, thus the reported values are always new. The default value is true
timeoutnumberThe maximum time to be spent performing each individual Wi-Fi scan. The default value is 15000 (15s)
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on(
  'startEvent',
  run('acquireMultiplePhoneWifiScan', { 
     maxInterval: 25000 
     /* 
        (Optional, mandatory if ensureIsNew=true) Maximun interval between scans, unlimited by default. 
        
        If ensureIsNew=true, the value must ensure that a maximum of 2 scans are being collectd every minute. 
        
        For example, here the task will be executed every 1 minute, which means it will have ~55s to run. 
        With 25s between scans we meet the OS restrictions and have enought time to collect 2 Wi-Fi fingerprints. 
     */ 
  })
    .every(1, 'minutes')
    .cancelOn('stopEvent')
);

on('wifiScanAcquired', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
wifiScanAcquiredWifiScan | Array<WifiScan>Indicates that one or more new Wi-Fi scan results have been acquired
\n

Records

\n

WifiScan

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id
typestringAlways wifi-scan
changeChangeAlways none. Scan results are returned as a whole. Intermediate results are not reported
timestampDateThe local time when the scan was completed
isNewbooleanIndicates if the results of the scan are cached. This can only be false when using ensureIsNew=false option during the scans
seenArray<WifiApInfo>The Wi-Fi APs seen during the scan. The list can be empty. For details on the properties of the WifiApInfo object, see context-apis API docs section on Wi-Fi
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-disable-bitcode":{"name":"nativescript-disable-bitcode","version":"1.0.0","license":"MIT","readme":"

NativeScript plugin to disable Bitcode

\n

This is a plugin to disable iOS Bitcode when using CocoaPods.

\n

Usage

\n

Demo

\n

Check out the demo folder for a sample usage.

\n

Add the plugin to your project:

\n
  tns plugin add nativescript-disable-bitcode
\n

Try the Demo

\n

To try the demo run the following commands:

\n
npm run setup
npm run demo.ios
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-admob":{"name":"nativescript-admob","version":"4.1.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mopub":{"name":"nativescript-mopub","version":"1.0.0","license":"Apache-2.0","readme":"

nativescript-mopub

\n

\"Under

\n

PLEASE DO NOT USE THIS PLUGINS NOW! IT'S Under Construction

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rob4226/ngrx-devtools-nativescript":{"name":"@rob4226/ngrx-devtools-nativescript","version":"7.0.1","license":"MIT","readme":"

Looking for maintainers

\n

This repo is looking for maintainers. If you are interested please ping me on https://twitter.com/ufsa

\n

ngrx-devtools-nativescript

\n

Implementation of a devtools monitor similar to those available in @ngrx/store-devtools for NativeScript.

\n

Install

\n
npm i ngrx-devtools-nativescript
\n

How to use

\n

First of all you should instrument your @ngrx/store using StoreModule.provideStore(...). Check out @ngrx/devtools readme for how to do that.

\n

Import the NativeScriptDevToolsMonitors in your app(or other) module and add store-dev-tools instrumentation by importing StoreDevtoolsModule.instrumentStore():

\n
import { NgModule } from \"@angular/core\";
import { StoreModule } from '@ngrx/store';
import { NativeScriptDevToolsMonitors } from \"ngrx-devtools-nativescript\";
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptDevToolsMonitors,
    StoreModule.provideStore({ ... }),
    StoreDevtoolsModule.instrumentStore()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule { };
\n

Use <ns-dock-monitor> component inside you application - preferably in the root of the visual tree.

\n
import { NSDockMonitor } from \"ngrx-devtools-nativescript\";

@Component({
    selector: \"my-app\",
    directives: [NSDockMonitor],
    template: `
    <grid-layout>
        //...
        <ns-dock-monitor screenCover=\"0.5\"></ns-dock-monitor>
    </grid-layout>`
})
export class AppComponent {
    //...
}
\n

You can specify what part of the screen should be covered by the dev-tools slideout with the screenCover property.

\n

Example

\n

Example projects:

\n\n

Pure Redux example with Vanilla JS {N} App

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-sewoo-printer":{"name":"@ticnat/nativescript-sewoo-printer","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Sewoo Printer

\n

\"npm

\n

This plugin integrate your nativescript app with Sewoo LK-P43Ⅱ printer to print a normal text or a bmp.

\n

Prerequisites / Requirements

\n

You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

\n

Installation

\n
tns plugin add @ticnat/nativescript-sewoo-printer
\n

Usage

\n

First of all put these permissions in you AndroidManifest.xml file:

\n
<uses-permission android:name=\"android.permission.BLUETOOTH\" />
<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" />
\n

To Print Normal Text use:

\n
let printer = new SewooPrinter(\"windows-1256\");
printer.print(\"Hello World\");
\n

To Print a BMP image:

\n
let printer = new SewooPrinter(\"windows-1256\");
printer.printImg(bmp);
\n

for more information see the demo

\n

API Property

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertytypeDefaultDescription
paperSizeenumPaperSizes.FourInchset the default paper size for the printer
debugbooleanfalseset the plugin in debug mode
charsetstring''set the plugin encoding charset
\n

API Functions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionDescriptionParams
connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
disconnect():voiddisconnect from a printer
print(text: string): voidprint normal texttext : the text you want to print
printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, XResol: x resolution,YResol: y resolution startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ozymandiasthegreat/vad":{"name":"@ozymandiasthegreat/vad","version":"2.0.7","license":"MIT","readme":"

libfvad-wasm

\n

I had a need for a VAD library that would run on Android via NativeScript.\nCompatibility with browsers and Node would've been a bonus.\nAfter looking around for a bit I realized that my best bet would be to use\nVAD library extracted from WebRTC project compiled to WASM.

\n

This would run on Android through NativeScript, and in browsers and recent versions\nof Node natively. The only downside I could think of, was no iOS support since WASM\nisn't allowed in apps by Apple.

\n

I first discovered a Mozilla-owned repository that contained WebRTC_VAD code extracted\nand compiled with Emscripten. That was a great starting point, although ultimately\nnot viable since it contained too much unnecessary C code and the whole repository\nseems abandoned.

\n

Then, in my search, I found libfvad. This project is fairly active, contains no unnecessary code,\nand even packages VAD in easy-to-consume API. So I decided to go with this and package it with\nEmscripten so it can be run anywhere.

\n

So here we are. On to the API reference.

\n

API Reference

\n

This package is an ES module. To use it with older browsers you'll need Babel or some such.\nTo use it with Node, you'll need a version with support for ES modules and WASM.\nTo use it with NativeScript, you shouldn't need anything extra, as {N} imports embedded version\nby default.\nThere are also typings provided.

\n

The main default export is an async function that resolves to class constructor VAD.\nThere are also a few named exports VADMode, VADEvent, and VAD_FRAME;

\n

VADMode defines the aggressiveness of VAD. Higher mode means fewer false positives and\npotentially more missed utterances. The available modes are:

\n\n

VADEvent is an enum with these members { ERROR, SILENCE, VOICE }.

\n

VAD_FRAME is a constant size of a single frame processed by VAD. For best results\nyour buffer should be divisible by VAD_FRAME.

\n
VAD(mode: VADMode, rate: number);

// Convenience function for browsers, as AudioWorklet returns data as Float32Array
// which is incompatible with this library
static VAD.floatTo16BitPCM(buffer: Float32Array): Int16Array;

// Single frame processing used internally. Not very useful on its own
VAD.processFrame(frame: Int16Array): VADEvent;

// Buffer processing, larger buffers return more accurate results
VAD.processBuffer(buffer: Buffer | ArrayBufferView): VADEvent;

// Free the resources used by this instance. The instance is not usable afterward
VAD.destroy(): void;
\n

You can also find the C API as exported by dist/libfvad.wasm in include/fvad.h.

\n

Examples

\n

Web

\n

You can find a browser example in the ./docs.\nAs of this writing, it only works in Chrome, since JavaScript private fields (#)\nare used in the library. You can also see it live in your browser here

\n

Node

\n

You can find example code in the ./examples/node. Just cd in there and run node ./index.js.\nThe sample script only runs on Linux!\nHowever it's only a few lines of code, so it's exceedingly easy to adapt it to your OS.

\n

NativeScript

\n

Again, WASM is only supported on Android. Blame Apple.

\n

To run sample app, cd ./examples/nativescript and run ns run android.\nThat's it.

\n

The sample uses a worker thread to run audio recording loop in the background\nand communicates with the main app asynchronously.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file-cghislai":{"name":"nativescript-handle-file-cghislai","version":"6.4.1-rc.1","license":"MIT","readme":"

nativescript-handle-file

\n

This module gives you a tool to download, choose folder to save and then open an app to open file.

\n

Instalation

\n
tns plugin add nativescript-handle-file
\n

How to use

\n

Import class and instance it.

\n
import {HandleFile} from 'nativescript-handle-file';

let handleFile = new HandleFile();
handleFile.open({
    name : \"name-of-file.extension\",
    url: \"path-to-file\",
    directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
    tittle: \"title to choose apps\" // only in android
}).then(result => {
    //return true if success
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-app":{"name":"nativescript-open-app","version":"0.3.0","license":"MIT","readme":"

NativeScript Open App plugin

\n

A NativeScript plugin for opening other applications on the device (with app store fallback)

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add nativescript-open-app
\n

Usage

\n

Android

\n

To open an app, you need its id (for example "com.facebook.katana" for Facebook and "com.twitter.android" for Twitter).\nYou can easily find it in app's URL on https://play.google.com.

\n

Examples

\n

Open Facebook app if it is installed on the device (open Facebook app's entry in Play Store otherwise):

\n
var openApp = require(\"nativescript-open-app\").openApp;

var installed = openApp(\"com.facebook.katana\");
console.log(\"Is it installed? \" + installed);
\n

Open Facebook app if it is installed on the device (do nothing otherwise):

\n
var openApp = require(\"nativescript-open-app\").openApp;

var installed = openApp(\"com.facebook.katana\", false);
console.log(\"Is it installed? \" + installed);
\n

Open Facebook app if it is installed on the device (open facebook.com otherwise):

\n
var openApp = require(\"nativescript-open-app\").openApp;
var utils = require(\"utils/utils\");

var installed = openApp(\"com.facebook.katana\", false);
if (!installed) {
    utils.openUrl(\"https://facebook.com\");
}
\n

Simple TypeScript example:

\n
import { openApp } from \"nativescript-open-app\";

openApp(\"com.facebook.katana\");
\n

iOS

\n

To open an app on iOS you need a schema registered by the app.\nAdditionally you are required to whitelist the schemas for all apps you want to be able to open. Add them to your app/App_Resources/iOS/Info.plist (and additionally include "itms-apps" schema used by the App Store):

\n
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>itms-apps</string>
    <string>twitter</string>
  </array>
\n

Examples

\n

Open Facebook app if it is installed on the device (do nothing otherwise):

\n
var openApp = require(\"nativescript-open-app\").openApp;

var installed = openApp(\"fb://\");
console.log(\"Is it installed? \" + installed);
\n

Open Facebook app if it is installed on the device (open Facebook app's entry in App Store otherwise).\nThe third argument to openApp is the app's id in App Store (you can easily find it in app's URL on https://itunes.apple.com):

\n
var openApp = require(\"nativescript-open-app\").openApp;

var installed = openApp(\"fb://\", true, \"284882215\");
console.log(\"Is it installed? \" + installed);
\n

Open Facebook app if it is installed on the device (open facebook.com otherwise):

\n
var openApp = require(\"nativescript-open-app\").openApp;
var utils = require(\"utils/utils\");

var installed = openApp(\"fb://\", false);
if (!installed) {
    utils.openUrl(\"https://facebook.com\");
}
\n

Simple TypeScript example:

\n
import { openApp } from \"nativescript-open-app\";

openApp(\"fb://\");
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-xmpp":{"name":"nativescript-angular-xmpp","version":"3.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow":{"name":"nativescript-vue-shadow","version":"0.1.0","license":"MIT","readme":"

Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

\n

\"NPM\n\"Downloads\"\n\"Twitter

\n

This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
npm install nativescript-vue-shadow
\n

Demo

\n

\"Screenshot\"

\n

How to use it

\n

This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

\n

Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

\n

With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

\n

However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

\n

Import the Directive into main.js

\n
import NSVueShadow from 'nativescript-vue-shadow'
Vue.use(NSVueShadow)
\n

Use in your view or component

\n

Simple attribute for v-shadow:

\n
<Label v-shadow=\"2\"></Label>
\n

You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"myCustomData\"></Label>
\n

Then in your script tag you can do something like this where we bind to the object:

\n
import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow\";
// ...
export default class MyComponent extends Vue {
  private myCustomData: AndroidData = {
    elevation: 6,
    bgcolor: \"#ff1744\",
    shape: ShapeEnum.OVAL
  };
  // ...
}
\n

You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

\n
<Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
\n

There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

\n

The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

\n

List of attributes

\n

The table below list and describes all possible attributes as well as show which platform supports each one of them:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeTypeDefaultPlatformDescription
elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
\n

Pre-defined elevations

\n

If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

\n\n

If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

\n

Component

\n
import { Elevation } from \"nativescript-vue-shadow\";

export default class MyComponent extends Vue {
  // ...
  private elevation: number = Elevation.SNACKBAR;
  // ...
}
\n

Override Android default StateListAnimator

\n

Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

\n

This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

\n

Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

\n

It's also possible to set this StateListAnimator to any View, making it behave like a button.

\n

Plugin Development Work Flow

\n\n

Changelog

\n\n

License

\n

MIT License

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-multiple-env":{"name":"nativescript-dev-multiple-env","version":"2.0.0-beta5","license":"Apache-2.0","readme":"

nativescript-dev-multiple-environments

\n

This Hook is made for using multiple environments within a nativescript application.

\n

What it does

\n

First it changes your packageId to whatever you have stated in your environment-rules.json

\n

it also copies any files you have suffixed with the name of the environemnt for example : App_Resources/Android/google-services.staging.json will get copied to App_Resources/Android/google-services.json before building.

\n

Selecting Environment

\n

Once you have a initial environment-rules.json file you can change between the environments using --env.use.ENV_NAME

\n

for example for ios:\ntns run ios --env.use.staging

\n

this can also be used with other --env args like:

\n

tns run ios --bundle --env.aot --env.uglify --env.use.release

\n

Environments

\n

a basic environment-rules.json file is generated for you it looks like this:

\n

{
    \"version\": \"1.0.0\",
    \"default\": \"staging\",
    \"extraPaths\": [
        'app/environments'
    ],
    \"environments\": [
        {
            name: \"staging\",
            packageId: \"org.nativescript.appName.staging\",
            copyRule: \"(.*\\\\.staging\\\\..*)\"
        },
        {
            name: \"release\",
            packageId: \"org.nativescript.appName.release\",
            copyRule: \"(.*\\\\.release\\\\..*)\"
        }
    ]
}
\n

You can tweak this however you want, and add as many environments as you like.

\n

ExtraPaths is Optional, but can add multiple paths within the app. these will follow the same rules for the rules.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache-with-fresco":{"name":"nativescript-web-image-cache-with-fresco","version":"2.0.2","license":"MIT(https://github.com/leocaseiro/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

#Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for IOS and Facebook Fresco for android.\nNote - It cannot be used to display local images, only URLS work, for local images, use NS Image tag

\n

License

\n

Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

\n

Installation

\n
tns plugin add nativescript-web-image-cache\n
\n

** Tested on NativeScript 2.0, if any problems while running on previous versions, please update .This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin , please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

\n

Usage

\n

IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

\n

Initialising on android - in app.js

\n
var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n\t        imageCache.initialize();\n    };\n}\n
\n

Caching the images

\n\n

Clearing the cache

\n\n

##Example\ncaching :

\n
    <Page xmlns:IC=\"nativescript-web-image-cache\">
        <GridLayout rows='*' columns='*'> 
\t        <IC:WebImage stretch=\"fill\" row=\"0\"
\t         col=\"0\"  id=\"my-image-1\"
\t         src=\"http://www.newyorker.com/wp-
\t         content/uploads/2014/08/Stokes-Hello-
\t         Kitty2-1200.jpg\">
\t         </IC:WebImage>  
        </GridLayout>
    </Page>
\n

checking if image is loading :

\n
var imageCacheModule=require(\"nativescript-web-image-cache\");

var myImage1 = page.getViewById(\"my-image-1\"),
\tisLoading = myImage1.isLoading;
\n

clear the cache :

\n
var imageCacheModule=require(\"nativescript-web-image-cache\");
imageCacheModule.clearCache();
\n

for android, you need to initialize in the application onlaunch event before clearing the cache

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xml2js":{"name":"nativescript-xml2js","version":"0.5.2","license":"MIT","readme":"

nativescript-xml2js (based on node-xml2js)

\n

Ever had the urge to parse XML? And wanted to access the data in some sane,\neasy way? Don't want to compile a C parser, for whatever reason? Then xml2js is\nwhat you're looking for!

\n

Description

\n

Simple XML to JavaScript object converter. It supports bi-directional conversion.\nUses sax-js and\nxmlbuilder-js.

\n

Note: If you're looking for a full DOM parser, you probably want\nJSDom.

\n

Installation

\n

Simplest way to install nativescript-xml2js is to use npm, just npm install --save nativescript-xml2js which will download xml2js and all dependencies.

\n

Usage

\n

No extensive tutorials required because you are a smart developer! The task of\nparsing XML should be an easy one, so let's make it so! Here's some examples.

\n

Shoot-and-forget usage

\n

You want to parse XML as simple and easy as possible? It's dangerous to go\nalone, take this:

\n
var parseString = require('nativescript-xml2js').parseString;
var xml = \"<root>Hello xml2js!</root>\"
parseString(xml, function (err, result) {
    console.dir(result);
});
\n

Can't get easier than this, right? This works starting with nativescript-xml2js 0.2.3.\nWith CoffeeScript it looks like this:

\n
{parseString} = require 'xml2js'
xml = \"<root>Hello xml2js!</root>\"
parseString xml, (err, result) ->
    console.dir result
\n

If you need some special options, fear not, nativescript-xml2js supports a number of\noptions (see below), you can specify these as second argument:

\n
parseString(xml, {trim: true}, function (err, result) {
});
\n

Simple as pie usage

\n

That's right, if you have been using xml-simple or a home-grown\nwrapper, this was added in 0.1.11 just for you:

\n
var fs = require('fs'),
    xml2js = require('nativescript-xml2js');

var parser = new xml2js.Parser();
fs.readFile(__dirname + '/foo.xml', function(err, data) {
    parser.parseString(data, function (err, result) {
        console.dir(result);
        console.log('Done');
    });
});
\n

Look ma, no event listeners!

\n

You can also use nativescript-xml2js from\nCoffeeScript, further reducing\nthe clutter:

\n
fs = require 'fs',
xml2js = require 'nativescript-xml2js'

parser = new xml2js.Parser()
fs.readFile __dirname + '/foo.xml', (err, data) ->
  parser.parseString data, (err, result) ->
    console.dir result
    console.log 'Done.'
\n

But what happens if you forget the new keyword to create a new Parser? In\nthe middle of a nightly coding session, it might get lost, after all. Worry\nnot, we got you covered! Starting with 0.2.8 you can also leave it out, in\nwhich case nativescript-xml2js will helpfully add it for you, no bad surprises and\ninexplicable bugs!

\n

Parsing multiple files

\n

If you want to parse multiple files, you have multiple possibilities:

\n\n

So you wanna some JSON?

\n

Just wrap the result object in a call to JSON.stringify like this\nJSON.stringify(result). You get a string containing the JSON representation\nof the parsed object that you can feed to JSON-hungry consumers.

\n

Displaying results

\n

You might wonder why, using console.dir or console.log the output at some\nlevel is only [Object]. Don't worry, this is not because xml2js got lazy.\nThat's because Node uses util.inspect to convert the object into strings and\nthat function stops after depth=2 which is a bit low for most XML.

\n

To display the whole deal, you can use console.log(util.inspect(result, false, null)), which displays the whole result.

\n

So much for that, but what if you use\neyes for nice colored output and it\ntruncates the output with …? Don't fear, there's also a solution for that,\nyou just need to increase the maxLength limit by creating a custom inspector\nvar inspect = require('eyes').inspector({maxLength: false}) and then you can\neasily inspect(result).

\n

XML builder usage

\n

Since 0.4.0, objects can be also be used to build XML:

\n
var fs = require('fs'),
    xml2js = require('nativescript-xml2js');

var obj = {name: \"Super\", Surname: \"Man\", age: 23};

var builder = new xml2js.Builder();
var xml = builder.buildObject(obj);
\n

At the moment, a one to one bi-directional conversion is guaranteed only for\ndefault configuration, except for attrkey, charkey and explicitArray options\nyou can redefine to your taste. Writing CDATA is supported via setting the cdata\noption to true.

\n

Processing attribute, tag names and values

\n

Since 0.4.1 you can optionally provide the parser with attribute name and tag name processors as well as element value processors (Since 0.4.14, you can also optionally provide the parser with attribute value processors):

\n

function nameToUpperCase(name){
    return name.toUpperCase();
}

//transform all attribute and tag names and values to uppercase
parseString(xml, {
  tagNameProcessors: [nameToUpperCase],
  attrNameProcessors: [nameToUpperCase],
  valueProcessors: [nameToUpperCase],
  attrValueProcessors: [nameToUpperCase]},
  function (err, result) {
    // processed data
});
\n

The tagNameProcessors and attrNameProcessors options\naccept an Array of functions with the following signature:

\n
function (name){
  //do something with `name`
  return name
}
\n

The attrValueProcessors and valueProcessors options\naccept an Array of functions with the following signature:

\n
function (value, name) {
  //`name` will be the node name or attribute name
  //do something with `value`, (optionally) dependent on the node/attr name
  return value
}
\n

Some processors are provided out-of-the-box and can be found in lib/processors.js:

\n\n

Options

\n

Apart from the default settings, there are a number of options that can be\nspecified for the parser. Options are specified by new Parser({optionName: value}). Possible options are:

\n\n

Options for the Builder class

\n

These options are specified by new Builder({optionName: value}).\nPossible options are:

\n\n

renderOpts, xmldec,doctype and headless pass through to\nxmlbuilder-js.

\n

Updating to new version

\n

Version 0.2 changed the default parsing settings, but version 0.1.14 introduced\nthe default settings for version 0.2, so these settings can be tried before the\nmigration.

\n
var xml2js = require('nativescript-xml2js');
var parser = new xml2js.Parser(xml2js.defaults[\"0.2\"]);
\n

To get the 0.1 defaults in version 0.2 you can just use\nxml2js.defaults["0.1"] in the same place. This provides you with enough time\nto migrate to the saner way of parsing in nativescript-xml2js 0.2. We try to make the\nmigration as simple and gentle as possible, but some breakage cannot be\navoided.

\n

So, what exactly did change and why? In 0.2 we changed some defaults to parse\nthe XML in a more universal and sane way. So we disabled normalize and trim\nso xml2js does not cut out any text content. You can reenable this at will of\ncourse. A more important change is that we return the root tag in the resulting\nJavaScript structure via the explicitRoot setting, so you need to access the\nfirst element. This is useful for anybody who wants to know what the root node\nis and preserves more information. The last major change was to enable\nexplicitArray, so everytime it is possible that one might embed more than one\nsub-tag into a tag, xml2js >= 0.2 returns an array even if the array just\nincludes one element. This is useful when dealing with APIs that return\nvariable amounts of subtags.

\n

Running tests, development

\n

\"Build\n\"Coverage\n\"Dependency

\n

The development requirements are handled by npm, you just need to install them.\nWe also have a number of unit tests, they can be run using npm test directly\nfrom the project root. This runs zap to discover all the tests and execute\nthem.

\n

If you like to contribute, keep in mind that nativescript-xml2js is written in\nCoffeeScript, so don't develop on the JavaScript files that are checked into\nthe repository for convenience reasons. Also, please write some unit test to\ncheck your behaviour and if it is some user-facing thing, add some\ndocumentation to this README, so people will know it exists. Thanks in advance!

\n

Getting support

\n

Please, if you have a problem with the library, first make sure you read this\nREADME. If you read this far, thanks, you're good. Then, please make sure your\nproblem really is with nativescript-xml2js. It is? Okay, then I'll look at it. Send me a\nmail and we can talk. Please don't open issues, as I don't think that is the\nproper forum for support problems. Some problems might as well really be bugs\nin nativescript-xml2js, if so I'll let you know to open an issue instead :)

\n

But if you know you really found a bug, feel free to open an issue instead.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-pubnub":{"name":"ns-pubnub","version":"1.0.5","license":"Apache-2.0","readme":"

NativeScript PubNub \"apple\"

\n

THIS IS NOT READY FOR PRODUCTION, JUST FOR DEVELOPING/TESTING

\n

This plugin is allows you to use the PubNub Objective-C SDK in your NativeScript app.

\n

Installation

\n
tns plugin add ns-pubnub
\n

Usage

\n
// import
import { Pubnub, PubnubConfig, PubnubOptions } from 'ns-pubnub';

// configure
const pubnubConfig: PubnubConfig = {
  publishKey: 'demo',
  subscribeKey: 'demo'
}

const pubnubOptions: PubnubOptions = {
  cipherKey: 'a12345',
  suppressLeaveEvents: false
}

let pubnub = new Pubnub(pubnubConfig, pubnubOptions);

// subscribe
pubnub.subscribe(channels: string[], withPresence: boolean)

pubnub.subscribeToChannelGroups(groups: string[], shouldObservePresence: boolean)

// publish message
pubnub.publish('my_channel', \"message\", (status) => {
  conosle.log(status.information)
})

// listen to receive events
pubnub.on('receiveMessage', (data) => {
  console.log(data)
})
pubnub.on('receivePresenceEvent', (data) => {
  console.log(data)
})
pubnub.on('receiveStatus', (data) => {
  console.log(data)
})

// unsubscribe
pubnub.unsubscribe(channels: string[], withPresence: boolean)

pubnub.unsubscribeFromChannelGroups(groups: string[], withPresence: boolean)

pubnub.unsubscribeFromAll()
\n

Options (PubnubOptions)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDefaultDescription
cipherKeystring_Key which is used to encrypt messages pushed to PubNub service and decrypt messages received from live feeds on which client subscribed at this moment.
stripMobilePayloadboolean_Stores whether client should strip out received messages (real-time and history) from data which has been appended by client (like mobile payload for push notifications).
subscribeMaximumIdleTimenumber310Maximum number of seconds which client should wait for events from live feed.
nonSubscribeRequestTimeoutnumber10Number of seconds which is used by client during non-subscription operations to check whether response potentially failed with timeout or not.
presenceHeartbeatValuenumber_Number of seconds which is used by server to track whether client still subscribed on remote data objects live feed or not.
presenceHeartbeatIntervalnumber_Number of seconds which is used by client to issue heartbeat requests to PubNub service.
keepTimeTokenOnListChangebooleantrueWhether client should keep previous time token when subscribe on new set of remote data objects live feeds.
catchUpOnSubscriptionRestorebooleantrueWhether client should try to catch up for events which occurred on previously subscribed remote data objects feed while client was off-line.
applicationExtensionSharedGroupIdentifierstring_Reference on group identifier which is used to share request cache between application extension and it's containing application. This property should be set to valid registered group only if PubNub client is used inside of application's extension (iOS 8.0+, macOS 10.10+).
requestMessageCountThresholdnumberNumber of maximum expected messages from PubNub service in single response.
maximumMessagesCacheSizenumber100Messages de-duplication cache size
completeRequestsBeforeSuspensionbooleantrueWhether client should try complete all API call which is done before application will be completely suspended.
suppressLeaveEventsboolean_Whether client shouldn't send presence leave events during unsubscription process.
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-generate-pdf":{"name":"@knotes/nativescript-generate-pdf","version":"1.0.2","license":"Apache-2.0","readme":"

@knotes/nativescript-generate-pdf

\n

This plugin only works for NativeScript 7+.

\n
ns plugin add @knotes/nativescript-generate-pdf
\n

Generate pdf file with a webview and html.

\n

All you need to do is rendering your html with a webview and pass the webview to the plugin.

\n

For iOS, plugin returns the path of the generated PDF.

\n

For Android, it brings up the printer screen where you can save as PDF (Please note the printer screen does not work in simulator, you will need a real device).

\n

Screenshot

\n

\n

>> Check out the generated pdf<<

\n

Usage

\n

Check out the demo folder.

\n
import { GeneratePdf } from '@knotes/nativescript-generate-pdf';

function onWebViewLoaded(args: LoadEventData) {
    const webView = (<WebView>args.object).nativeView;
    // For iOS, use the file path returned by createPdf.
    new GeneratePdf().createPdf(webView, 'MyPdfFileName');
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-soft-keyboard":{"name":"@codesthings/nativescript-soft-keyboard","version":"2.0.5","license":"Apache-2.0","readme":"

History

\n

Forked from https://github.com/liuy97/nativescript-soft-keyboard

\n

Changes

\n\n

Nativescript soft-keyboard

\n

It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But Nativescript app sometimes needs this information to achieve a good user interface.

\n

Break changes

\n

nativescript-soft-keyboard@2 for Nativescript@7

\n

nativescript-soft-keyboard@1 for Nativescript version < 7

\n

Installation

\n
tns plugin add nativescript-soft-keyboard
\n

Usage

\n
registerSoftKeyboardCallback((h) => console.log(h));
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
functionparameterDescription
registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dev4ndy/markdown":{"name":"@dev4ndy/markdown","version":"1.0.0","license":"Apache-2.0","readme":"

@dev4ndy/markdown

\n
ns plugin add @dev4ndy/markdown
\n

A plugin for native markdown rendering.

\n

Completely based on this code code.

\n

Note: All credit to @flore2003, what we did here was to start using the plugin template (plugin-seed), update it and make it work with NS8... This plugin has only been tested on NS8.

\n

Usage

\n

Angular

\n
    \n
  1. Register the element in apps module
    2. \n
\n
registerElement(\"Markdown\", () => require(\"@dev4ndy/markdown\").Markdown);
@NgModule({
   ...
});
\n
    \n
  1. Now you can use it in you template
    2. \n
\n
<Markdown [markdown]=\"'_This_ should be **bold**!'\"></Markdown>
\n
\n

Vue

\n
    \n
  1. Register the element in the vue environment
    2. \n
\n
Vue.registerElement( 'Markdown', () => require(\"@dev4ndy/markdown\").Markdown )
\n
\n

You need to add xmlns:mv="nativescript-markdown-view" to your page tag, and then simply use <mv:Markdown/> in order to add the widget to your page.

\n
<!-- test-page.xml -->
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:mv=\"markdown\">
    <StackLayout class=\"p-20\">
        <mv:Markdown markdown=\"_This_ should be **bold**!\" />
    </StackLayout>
</Page>
\n
\n

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
markdown""The markdown to be rendered on screen
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuno-morais/nativescript-twilio":{"name":"@nuno-morais/nativescript-twilio","version":"1.0.1","license":"Apache-2.0","readme":"

Nativescript Twilio

\n

This plugin allows to create video calls using Twilio on iOS and Android

\n

How does it work?

\n

Twilio has to verify a user before they can join a room. You can generate a token and select a room for them to join a room.

\n

Requirements

\n
    \n
  1. Make an account on twilio.com
    2. \n
  2. Create a Programmable Video application. You'll receive an api key, auth token, and account sid.
    3. \n
  3. This will require minimum server knowledge. I used node. You can find further instructions here https://www.twilio.com/docs/api/video/identity also here https://github.com/TwilioDevEd/video-access-token-server-node
    4. \n
\n

Install

\n
ns plugin add @nuno-morais/nativescript-twilio
\n

Usage

\n
    \n
  1. In AndroidManifest.xml
    2. \n
\n
<uses-permission android:name=\"android.permission.CAMERA\" />

<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
\n
    \n
  1. In Info.plist
    2. \n
\n
<key>NSCameraUsageDescription</key>
<string>Why are you requesting permissions for camera?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Why are you requesting permissions for mic?</string>
\n
    \n
  1. \n

    Create a view

    \n

    3.1. Vanilla

    \n
    <twilio:VideoView row=\"0\" id=\"local-video\" ></twilio:VideoView>
    <twilio:VideoView row=\"1\" id=\"remote-video\" ></twilio:VideoView>
    \n

    3.2. Angular

    \n
    <TwilioVideoView #localVideoView row=\"0\" id=\"local-video\"></TwilioVideoView>
    <TwilioVideoView #remoteVideoView row=\"1\" id=\"remote-video\"></TwilioVideoView>
    \n
    2. \n
  2. \n

    Generate a token

    \n
    async getToken(): Promise<string> {
        const userName = 'awesomename22';
        return await Http.getString({
            url: `https://251c4d52a840.ngrok.io/token?identity=${userName}`,
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
        }).catch((e) => {
            console.error(e);
            return null;
        });
    }
    \n
    3. \n
  3. \n

    Request permissions

    \n
    await VideoAudioPermissions.checkAll();

    const messageAudio = 'Message to request audio';
    const messageVideo = 'Message to request camera';

    await VideoAudioPermissions.requestAll(messageAudio, messageVideo);
    \n
    4. \n
  4. \n

    Create a VideoActivity

    \n
        const localVideo = this.page.getViewById('local-video') as VideoView;
    \tconst remoteView = this.page.getViewById('remote-video') as VideoView;
    \tthis.videoActivity = new VideoActivity(localVideo, [remoteView]);
        this.videoActivity.connect('testing-room', token, { video: true, audio: true });
    \n
    5. \n
\n

Functionalities:

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/debug-ios":{"name":"@nativescript/debug-ios","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/debug-ios

\n

Advanced iOS debugging made possible via Flex.

\n
npm install @nativescript/debug-ios -D
\n

Usage

\n
import { NativeScriptDebugIOS } from '@nativescript/debug-ios';

NativeScriptDebugIOS.show();
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nivinjoseph/n-mobile":{"name":"@nivinjoseph/n-mobile","version":"1.0.7","license":"MIT","readme":"

n-mobile

\n

Mobile application framework using Nativescript and Vue

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-coordinator":{"name":"nativescript-nbmaterial-coordinator","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript implementation of coordination between views

\n

The module implements coordination for both platforms iOS and Android.\nIt uses a producer/consumer pattern based on rxJs.

\n

The module augment nativescript view in order to add behaviours:

\n
    interface View {
        addBehaviour(behaviour: Behaviour);
    } 


export interface Behaviour {
    view: View;
    onCreate?();
    onInitNative?();
    onDispose?();
    onLoaded?();
    onUnloaded?();
}
\n

It also provide a Producer interface. The producer is the view that make other views moving (for example a scroll event on scroll view):

\n
export interface Producer {
    init();
    start();
    stop();
    stream: Rx.Subject<ProducerData>;
}
\n

The module provide some behaviours. But you can create your own behaviours.

\n

Below the list of behaviour based on a scrollview (or listview):

\n\n

FixedHeaderBehavior

\n
let header: View = null;
let listView: ListView = null;
let behav = new FixedHeaderBehavior(listView);
behav.height = 112;
behav.speedFactor = 1; //HOW MUCH INCREASE OR DECREASE SIZE OF HEADER RELATIVE TO DELTA SCROLL
behav.deferHideFactor = 3; //START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
behav.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
behav.playOpacity = false; //PLAY WITH HEADER OPACITY WHEN HIDING
behav.maxTranslate = 56;//MAXIMUM TRANSLATION VALUE APPLIED TO HEADER
behav.thresholdFactor = 0.3;//IF HEADER HAS 1/3 OF HIS HEIGHT HIDDEN (SHOWN)=> SO PLAY ANIMATION TO HIDE (SHOW) ALL
header.addBehaviour(behav);
\n

ScrollScaleBehavior

\n
let btn: Button = null;
let listView: ListView = null;
    let behavBtn = new ScrollScaleBehavior(listView);
    behavBtn.height = 56;//HEIGHT OF BUTTON
    behavBtn.deferHideFactor = 3;//START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
    behavBtn.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
    btn.addBehaviour(behavBtn);
\n

ExpandableHeaderBehavior

\n
let headerImage: Image = null;
let scrollview: ScrollView = null;
let behav = new ExpandableHeaderBehavior(scrollview);
    behav.height = 400; //MAXIMUM HEIGHT OF THE IMAGE
    behav.disappearAt = 56 + page.getStatusBarHeightDip();//HIDE IMAGE WHEN HEIGHT IS UNDER
    behav.showAnimation = (ex) => {//PLAY AN ANIMATION WHEN SHOWN
        appbar.animate({ backgroundColor: new Color(\"transparent\"), duration: ex.animationDuration, curve: AnimationCurve.easeOut });
    };
    behav.hideAnimation = (ex) => {//PLAY AN ANIMATION WHEN HIDDEN
        appbar.animate({ backgroundColor: new Color(\"purple\"), duration: ex.animationDuration, curve: AnimationCurve.easeIn });
    };
    headerImage.addBehaviour(behav);
\n
<Image src=\"~/img/logo.png\" id=\"headerImage\" stretch=\"aspectFill\" height=\"400\" verticalAlignment=\"top\"/>
<app:AppBarLayout columns=\"auto,*,auto,auto\" rows=\"auto\" id=\"actionbar\">
    <app:AppBarIcon text=\"list\" col=\"0\"/>
    <app:AppBarTitle text=\"My Application\" col=\"1\"/>
    <app:AppBarIcon text=\"notifications\" col=\"2\" />
    <app:AppBarIcon text=\"search\" col=\"3\" tap=\"openSearch\"/>
</app:AppBarLayout>
\n

AnchorBehaviour

\n

The TextLayout is augmented. This make this new property available:

\n
export interface TextLayout{
    anchor:\"bottom\"|\"middle\"|\"top\"|\"visible\";
}
\n
<TextLayout anchor=\"bottom\">
    ...
</TextLayout>
\n

See all modules here

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-permissions":{"name":"ns-permissions","version":"2.0.1","license":"Apache-2.0","readme":"

ns-permissions

\n

Nativescript permissions, which is a clone of nativescript-perms, exports more android functions and supports advanced request for android permissions.

\n

Break changes

\n

ns-permissions@2 for Nativescript@7

\n

ns-permissions@1 for Nativescript version < 7

\n

Installation

\n
tns plugin add ns-permissions
\n

API

\n

Permissions statuses

\n

Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Return valueNotes
authorizedUser has authorized this permission
deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
undeterminedUser has not yet been prompted with a permission dialog
\n

The Android permissions are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidPermissionsAndroid
READ_CALENDAR'android.permission.READ_CALENDAR'
WRITE_CALENDAR'android.permission.WRITE_CALENDAR'
CAMERA'android.permission.CAMERA'
READ_CONTACTS'android.permission.READ_CONTACTS'
WRITE_CONTACTS'android.permission.WRITE_CONTACTS'
GET_ACCOUNTS'android.permission.GET_ACCOUNTS'
ACCESS_FINE_LOCATION'android.permission.ACCESS_FINE_LOCATION'
ACCESS_COARSE_LOCATION'android.permission.ACCESS_COARSE_LOCATION'
RECORD_AUDIO'android.permission.RECORD_AUDIO'
READ_PHONE_STATE'android.permission.READ_PHONE_STATE'
CALL_PHONE'android.permission.CALL_PHONE'
READ_CALL_LOG'android.permission.READ_CALL_LOG'
WRITE_CALL_LOG'android.permission.WRITE_CALL_LOG'
ADD_VOICEMAIL'com.android.voicemail.permission.ADD_VOICEMAIL'
USE_SIP'android.permission.USE_SIP'
PROCESS_OUTGOING_CALLS'android.permission.PROCESS_OUTGOING_CALLS'
BODY_SENSORS'android.permission.BODY_SENSORS'
SEND_SMS'android.permission.SEND_SMS'
RECEIVE_SMS'android.permission.RECEIVE_SMS'
READ_SMS'android.permission.READ_SMS'
RECEIVE_WAP_PUSH'android.permission.RECEIVE_WAP_PUSH'
RECEIVE_MMS'android.permission.RECEIVE_MMS'
READ_EXTERNAL_STORAGE'android.permission.READ_EXTERNAL_STORAGE'
WRITE_EXTERNAL_STORAGE'android.permission.WRITE_EXTERNAL_STORAGE'
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method NameArgumentsNotes
check()type- Returns a promise with the permission status. See iOS Notes for special cases
hasPermission()type- Returns the permission status.
request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
checkPermissions()Object- Accepts an array of permission types and returns a promise with an object mapping permission object map to statuses
requestPermissions()[types]- Accepts an array of permission types and request multiple permissions
getTypes()none- Returns an array of valid permission types
openSettings()none- (iOS only - 8.0 and later) Switches the user to the settings page of your app
canOpenSettings()none- (iOS only) Returns a boolean indicating if the device supports switching to the settings page
\n
// request Read Contacts Permissions
function requestReadContacts() {
  return new Promise((resolve, reject) => {
    Permissions.check(Permissions.AndroidPermissions.READ_CONTACTS).then((result) => {
      if (result[0] === 'authorized') {
        resolve();
      } else if (result[0] === 'restricted') {
        reject();
      } else {
        Permissions.request(Permissions.AndroidPermissions.READ_CONTACTS).then((requestResult) => {
          requestResult[0] === 'authorized' ? resolve() : reject();
        }).catch(() => reject());
      }
    });
  });
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-pusher-channels":{"name":"@triniwiz/nativescript-pusher-channels","version":"3.0.1","license":"Apache-2.0","readme":"

Nativescript nativescript-pusher-channels

\n
ns plugin add @triniwiz/nativescript-pusher-channels
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loopback-sdk-builder":{"name":"loopback-sdk-builder","version":"2.0.0-deprecated","license":"MIT","readme":"

DEPRECATED

\n

Use @mean-expert/loopback-sdk-builder instead.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/wear-os":{"name":"@awarns/wear-os","version":"1.0.0","license":"Apache-2.0","readme":"

@awarns/wear-os

\n

\"npm\n\"npm\"

\n

This module allows to collect data from the sensors of an Android WearOS smartwatch,\nand enables the communication between both devices (i.e., smartphone and smartwatch).

\n

This plugin acts as a wrapper on top of the nativescript-wearos-sensors plugin,\nwhich enables the communication and the data collection from a paired WearOS smartwatch. In order to use these features, a WearOS smartwatch\nmust be paired with the smartphone and have installed a counterpart application, developed using the WearOSSensors WearOS library.

\n
\n

Note: check the requirements of both libraries for more detailed information:

\n\n
\n

Install the plugin using the following command line instruction:

\n
ns plugin add @awarns/wear-os
\n

Usage

\n

Setup

\n

This plugin requires you to register its loader during the framework initialization, like this:

\n
// ... platform imports
import { awarns } from '@awarns/core';
import { demoTasks } from '../tasks';
import { demoTaskGraph } from '../graph';
import { registerWearOSPlugin } from '@awarns/wear-os';

awarns
  .init(
    demoTasks,
    demoTaskGraph,
    [
      registerWearOSPlugin(config), // Parameter config is optional
    ]
  )
  // ... handle initialization promise
\n

Plugin loader parameter (WearOSPluginConfig):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterTypeDescription
sensors?WatchSensor[]Enable the specified sensors. By default, all sensors are enabled.
enablePlainMessaging?booleanEnable the plain messaging communication mechanism. Default: false.
enableWearCommands?booleanEnable the command mechanism that allows to start the data collection on the watch side. Default: false.
\n

In addition, you also have to specify if you want to use these plugin features and which watch you want to use. This offers to possibility to use or not\nthese plugin features without modifying the task graph definition. For example, you can disable the features if there isn't a paired watch available. Here is\nan example:

\n
import { getConnectedWatches, setWatchFeaturesState, useWatch } from '@awarns/wear-os';

export async function setupWatchToUse(): Promise<void> {
  const watches = await getConnectedWatches();

  if (watches.length === 0) {
    console.log('No WearOS watches connected! Disabling wear-os plugin features...');
    setWatchFeaturesState(false);
    return;
  }

  const watch = watches[0];
  console.log(`Setup wear-os plugin to use ${watch.name} watch!`);
  setWatchFeaturesState(true);
  useWatch(watch);
}
\n

Tasks

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task nameDescription
startDetecting{prefix}Watch{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). The prefix can be used to distinguish among different configurations.
stopDetectingWatch{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
sendPlainMessageToWatchAllows to send a string-based message to the paired smartwatch. An example of use could be to send information for updating the UI.
sendPlainMessageToWatchAndAwaitResponseAllows to send a string-based message to the paired smartwatch and to wait for a response from it.
\n

Start data collection for a sensor with specific configuration

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  startDetectingWatchSensorChangesTask,
  WatchSensor,
  WatchSensorDelay,
} from '@awarns/wear-os';

export const demoTasks: Array<Task> = [
  startDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER, { sensorDelay: WatchSensorDelay.NORMAL, batchSize: 50 }),
  // startDetectingWatchAccelerometerChanges

  startDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER, { sensorDelay: WatchSensorDelay.FASTEST, batchSize: 50 }, 'Fast'),
  // startDetectingFastWatchAccelerometerChanges

  startDetectingWatchSensorChangesTask(WatchSensor.HEART_RATE, { sensorDelay: WatchSensorDelay.NORMAL, batchSize: 5 }),
  // startDetectingWatchHeartRateChanges

  startDetectingWatchSensorChangesTask(WatchSensor.GEOLOCATION, { sensorDelay: 5000, batchSize: 5 }),
  // startDetectingWatchGeolocationChanges
]
\n
\n

Warning: the data collection for a WatchSensor can only be started once, if startDetectingFastWatchAccelerometerChanges is executed after\nstartDetectingWatchAccelerometerChanges and while the collection is in progress, startDetectingFastWatchAccelerometerChanges will be ignored.

\n

Therefore, if you want to dynamically change the collection's configuration while the collection is in progress, you will have to stop the collection\nand start it again with the new desired configuration. However, due to the underlying communication APIs (i.e., Bluetooth), the order of the tasks is not guaranteed.\nThis means that if the stop and start tasks are executed very close in time, the start task could be executed before the stop task in the smartwatch.\nIf you really need to change the collection's configuration, you should wait a certain amount of time (e.g., 1 second) after the execution of the stop task before executing the start task.

\n
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter nameTypeDescription
sensorWatchSensorSensor to collect data from. See below.
providerConfigurationProviderConfigurationCollection's configuration of the task. See below.
prefix (Optional)stringAdds the prefix to the name of the task. Useful to create multiple tasks for the same sensor but with multiple configurations.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ValueDescription
ACCELEROMETERRepresents the watch's accelerometer sensor.
GYROSCOPERepresents the watch's gyroscope sensor.
MAGNETOMETERRepresents the watch's magnetometer sensor.
HEART_RATERepresents the watch's heart rate monitor.
GEOLOCATIONRepresents the watch's GPS system.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
sensorDelayWatchSensorDelay | numberIndicates the time between two consecutive samples. It can be a WatchSensorDelay (i.e., UI, NORMAL, GAME or FASTEST) or a value in milliseconds. It is highly recommended to use values in milliseconds (and higher than 1000 ms) with WatchSensor.GEOLOCATION due to WatchSensorDelay it's oriented for high sampling rate sensors.
batchSizenumberIndicates the amount of samples to be delivered in each record.
\n
\n

Note: the sensorDelay is taken as a suggestion by the Android OS. Samples could be delivered at a smaller or higher rate.

\n
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

\n

However, once the start task has finished running, relevant events will be emitted by the internal listeners while the data collection is active. These are listed below.

\n
\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingWatchAccelerometerChanges'));
on('startEvent', run('startDetectingWatchGyroscopeChanges'));
on('startEvent', run('startDetectingWatchMagnetometerChanges'));
on('startEvent', run('startDetectingWatchHeartRateChanges'));
on('startEvent', run('startDetectingWatchGeolocationChanges'));

on('watchAccelerometerSamplesAcquired', run('writeRecords'));
on('watchGyroscopeSamplesAcquired', run('writeRecords'));
on('watchMagnetometerSamplesAcquired', run('writeRecords'));
on('watchHeartRateSamplesAcquired', run('writeRecords'));
on('watchGeolocationAcquired', run('writeRecords'));
on('watchGeolocationAcquired', run('checkAreaOfInterestProximity', { nearbyRange: 100, offset: 15 }));
\n

Note: To use the writeRecords or the checkAreaOfInterestProximity task, the persistence or geofencing package must be installed and configured, respectively. See persistence and geofencing package docs.

\n
\n

Stop data collection for a sensor

\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  stopDetectingWatchSensorChangesTask,
  WatchSensor,
} from '@awarns/wear-os';

export const demoTasks: Array<Task> = [
  stopDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER), // stopDetectingWatchAccelerometerChanges
  stopDetectingWatchSensorChangesTask(WatchSensor.GYROSCOPE),     // stopDetectingWatchGyroscopeChanges
  stopDetectingWatchSensorChangesTask(WatchSensor.MAGNETOMETER),  // stopDetectingWatchMagnetometerChanges
  stopDetectingWatchSensorChangesTask(WatchSensor.HEART_RATE),    // stopDetectingWatchHeartRateChanges
  stopDetectingWatchSensorChangesTask(WatchSensor.GEOLOCATION),   // stopDetectingWatchGeolocationChanges
];
\n
\n

Note: a stop task of a specific WatchSensor can be used to stop the collection started by any start task\nfor that WatchSensor no matter the specific configuration.

\n
\n

Task generator parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter nameTypeDescription
sensorWatchSensorSensor to stop the data collection from.
\n

Task output events:

\n
\n

These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

\n

Example usage in the application task graph:

\n
on('startEvent', run('startDetectingWatchAccelerometerChanges').every(1, 'minute'));
on('startEvent', run('startDetectingWatchGyroscopeChanges').every(1, 'minute'));
on('startEvent', run('startDetectingWatchMagnetometerChanges').every(1, 'minute'));
on('startEvent', run('startDetectingWatchHeartRateChanges').every(1, 'minute'));
on('startEvent', run('startDetectingWatchGeolocationChanges').every(1, 'minute'));

on('watchAccelerometerSamplesAcquired', run('stopDetectingWatchAccelerometerChanges'));
on('watchGyroscopeSamplesAcquired', run('stopDetectingWatchGyroscopeChanges'));
on('watchMagnetometerSamplesAcquired', run('stopDetectingWatchMagnetometerChanges'));
on('watchHeartRateSamplesAcquired', run('stopDetectingWatchHeartRateChanges'));
on('watchGeolocationAcquired', run('stopDetectingWatchGeolocationChanges'));
\n

Note: it makes no sense to use these tasks without using before their complementary tasks to start the data collection.

\n
\n

Send a message to the paired watch

\n
\n

Note: to be able to use this feature, the messaging feature must be enabled.

\n
\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  sendPlainMessageToWatchTask
} from '@awarns/wear-os';

export const demoTasks: Array<Task> = [
  sendPlainMessageToWatchTask() // sendPlainMessageToWatch
];
\n

Task generator parameters:

\n
\n

This task generators take no parameters

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('sendPlainMessageToWatch', {
  plainMessage: {                                 
    message: 'Hi from the smartphone!!'
  }
}).every(1, 'minute'));

on('plainMessageSent', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Send a message to the paired watch and wait for a response

\n
\n

Note: to be able to use this feature, the messaging feature must be enabled.

\n
\n

To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

\n
import { Task } from '@awarns/core/tasks';
import {
  sendPlainMessageToWatchAndAwaitResponseTask
} from '@awarns/wear-os';

export const demoTasks: Array<Task> = [
  sendPlainMessageToWatchAndAwaitResponseTask() // sendPlainMessageToWatchAndAwaitResponse
];
\n

Task generator parameters:

\n
\n

This task generators take no parameters

\n
\n

Task output events:

\n\n
\n

Example usage in the application task graph:

\n
on('startEvent', run('sendPlainMessageToWatchAndAwaitResponse', {
  plainMessage: {
    message: 'Tell me something ;)'
  },
  timeout: 3000
}).every(1, 'minute'));

on('plainMessageSentAndResponseReceived', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Send a message from an event's data

\n
\n

Note: to be able to use this feature, the messaging feature must be enabled.

\n
\n

You can also invoke these tasks by injecting the message in the event that triggers their execution. This allows to send messages in a more flexible way (i.e., no need to specify\nthe message in the task graph).

\n
\n

Example usage:

\n
import { awarns } from '@awarns/core';
import { PlainMessage } from '@awarns/wear-os';

export function sendMessage(message: PlainMessage) {
 awarns.emitEvent('sendMessage', {
   data: message
 });
}
\n

Then, in the task graph:

\n
on('sendMessage', run('sendPlainMessageToWatch'));
\n
\n

Receive watch-triggered message

\n
\n

Note: to be able to use this feature, the messaging feature must be enabled.

\n
\n

The watch can also send message to the smartphone by its own (i.e., no need to receive a message from the smartphone first to then reply). When those messages are received\nby the smartphone, the plainMessageReceivedEvent is emitted.

\n
\n

Example usage in the application task graph:

\n
on('plainMessageReceived', run('writeRecords'));
\n

Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

\n
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NamePayloadDescription
watchAccelerometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of an accelerometer sensor.
watchGyroscopeSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a gyroscope sensor.
watchMagnetometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a magnetometer sensor.
watchHeartRateSamplesAcquiredHeartRateContains a list with the values of a heart rate sensor.
watchGeolocationAcquiredGeolocation | Array<Geolocation>Contains one or more GNSS locations. If the batchSize is set to 1, the payload will be a Geolocation record. Otherwise, the payload will be a Geolocation array.
plainMessageSentMessageSentContains the content of the message sent to the watch.
plainMessageSentAndResponseReceivedMessageReceivedContains the content of the message sent to the watch and the response from it.
plainMessageReceivedMessageReceivedContains the content of a message received from the watch.
\n

Records

\n

TriAxial

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringOne of the following values: watch-accelerometer, watch-gyroscope, or watch-magnetometer.
changeChangeAlways NONE.
timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
samplesTriAxialSample[]List with the collected samples.
\n
TriAxialSample
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
xnumberValue x of the sensor.
ynumberValue y of the sensor.
znumberValue z of the sensor.
timestampnumberThe local time (UNIX timestamp) when the sample was collected.
\n

HeartRate

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways watch-heart-rate.
changeChangeAlways NONE.
timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
samplesHeartRateSample[]List with the collected samples.
\n
HeartRateSample
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
valuenumberHeart rate value reported by the sensor.
timestampnumberThe local time (UNIX timestamp) when the sample was collected.
\n

Geolocation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways watch-geolocation.
changeChangeAlways NONE.
timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
latitudenumberLatitude reported by the GPS.
longitudenumberLongitude reported by the GPS.
altitudenumberAltitude reported by the GPS.
verticalAccuracynumberThe estimated error in the latitude.
horizontalAccuracynumberThe estimated error in the longitude.
speednumberThe estimated speed of the device when the location was acquired.
directionnumberThe estimated direction of the device when the location was acquired.
\n

MessageSent

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways plain-message-sent.
changeChangeAlways NONE.
timestampDateThe local time when the message was sent.
contentPlaiMessageContent of the message sent.
\n
PlainMessage
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
messagestringThe content of the message.
inResponseTo?PlainMessageCan contain a PlainMessage to indicate that the current message is a response to the inResponseTo message.
\n

MessageReceived

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
idstringRecord's unique id.
typestringAlways plain-message-received.
changeChangeAlways NONE.
timestampDateThe local time when the message was sent.
contentReceivedMessageContent of the received message.
\n
ReceivedMessage
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
senderNodeIdstringId of the watch that sent the message.
plainMessagePlainMessageMessage received.
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/class-mixins":{"name":"@nativescript-community/class-mixins","version":"1.0.0","license":"ISC","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@primeboard/swipe-layout":{"name":"@primeboard/swipe-layout","version":"2.0.2","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuno-morais/nativescript-multiple-list-picker":{"name":"@nuno-morais/nativescript-multiple-list-picker","version":"7.0.3","license":"Apache-2.0","readme":"

Multiple List Picker

\n

This plugin allows to create multiple list picker, as Android does. However, instead we use multiple lists, we can use one component. E.g:

\n

\"Multiple

\n
<GridLayout *ngIf=\"!IsAndroid\" columns=\"*\">
    <MultipleListPicker [value]=\"Value\" [items]=\"Items\" (valueChange)=\"OnValueItemsChanged($event.object.value)\"></MultipleListPicker>
</GridLayout>
<GridLayout *ngIf=\"IsAndroid\" columns=\"*,auto,auto,auto,auto,auto,*\">
    <ListPicker col=\"1\" [items]=\"Items[0]\" [selectedIndex]=\"Value[0]\" (selectedIndexChange)=\"OnSelectedIndexChanged(0, $event.object.selectedIndex)\"></ListPicker>
    <ListPicker col=\"2\" [items]=\"Items[1]\" [selectedIndex]=\"Value[1]\" (selectedIndexChange)=\"OnSelectedIndexChanged(1, $event.object.selectedIndex)\"></ListPicker>
    <Label col=\"3\" text=\",\" verticalAlignment=\"center\"></Label>
    <ListPicker col=\"4\" [items]=\"Items[3]\" [selectedIndex]=\"Value[3]\" (selectedIndexChange)=\"OnSelectedIndexChanged(3, $event.object.selectedIndex)\"></ListPicker>
    <ListPicker col=\"5\" [items]=\"Items[4]\" [selectedIndex]=\"Value[4]\" (selectedIndexChange)=\"OnSelectedIndexChanged(4, $event.object.selectedIndex)\"></ListPicker>
</GridLayout>
\n

Usage

\n

Import the module of multiple list picker in your Nativescript + Angular app:

\n
import { MultipleListPickerModule } from \"@nuno-morais/nativescript-multiple-list-picker/angular\";

@NgModule({
    declarations: [
    ],
    exports: [
        MultipleListPickerModule, // If you need
    ],
    imports: [
        MultipleListPickerModule,
    ],
    providers: [
    ],
    schemas: [
    ]
})
\n

In your view, you can use the list following the example:

\n
<MultipleListPicker
    [value]=\"Value\" // Value selected
    [items]=\"Items\" // Items
    (valueChange)=\"OnValueItemsChanged($event.object.value)\"></MultipleListPicker>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jpush":{"name":"nativescript-jpush","version":"1.2.1","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

NativeScript-jpush

\n

A Nativescript plugin that wraps the iOS and Android jpush SDK.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digi.app/nativescript-sse":{"name":"@digi.app/nativescript-sse","version":"1.0.2","license":"Apache-2.0","readme":"

@digi.app/nativescript-sse

\n
ns plugin add @digi.app/nativescript-sse
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-nested-scrollview":{"name":"@triniwiz/nativescript-nested-scrollview","version":"2.0.2","license":"Apache-2.0","readme":"

Nativescript nativescript-nested-scrollview

\n
ns plugin add @triniwiz/nativescript-nested-scrollview
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsplugtail":{"name":"nsplugtail","version":"0.2.0","license":"ISC","readme":"

NSPlugTail - NativeScript Plugin Tail

\n

Tool for inspecting your package.json NativeScript plugins updates.

\n

Usage

\n
  npx nsplugtail [<path-to-package.json>]
\n

<path-to-package.json> can be either RAW web served file (git raw link) or local present file\nif path to package.json is ommitted, current working directory is used (appended by package.json)

\n

Info

\n

Tool is filtering dependencies for patterns:

\n\n

Issues

\n

Use GitHub Issues

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-star-ratings":{"name":"@triniwiz/nativescript-star-ratings","version":"2.0.3","license":"Apache-2.0","readme":"

Nativescript nativescript-star-ratings

\n
ns plugin add @triniwiz/nativescript-star-ratings
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-videorecorder":{"name":"@triniwiz/nativescript-videorecorder","version":"4.0.2","license":"Apache-2.0","readme":"

Nativescript VideoRecorder

\n

Installation

\n
ns plugin add @triniwiz/nativescript-videorecorder
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file-new":{"name":"nativescript-handle-file-new","version":"1.0.0","license":"ISC","readme":"

nativescript-handle-file

\n

This module gives you a tool to download, choose folder to save and then open an app to open file.

\n

Instalation

\n
tns plugin add nativescript-handle-file
\n

How to use

\n

Import class and instance it.

\n
import {HandleFile} from 'nativescript-handle-file';

let handleFile = new HandleFile();
handleFile.open({
    name : \"name-of-file.extension\",
    url: \"path-to-file\",
    directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
    tittle: \"title to choose apps\" // only in android
}).then(result => {
    //return true if success
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/google-maps":{"name":"@codesthings/google-maps","version":"1.1.3","license":"Apache-2.0","readme":"

@nativescript/google-maps

\n
ns plugin add @nativescript/google-maps
\n

Config

\n

Android

\n

Modify the AndroidManifest to include the new meta tag along with your API key, the manifest is located\nin App_Resources/Android/AndroidManifest.xml

\n

<application
  android:name=\"com.tns.NativeScriptApplication\"
  android:allowBackup=\"true\"
  android:icon=\"@mipmap/ic_launcher\"
  android:label=\"@string/app_name\"
  android:theme=\"@style/AppTheme\"
  android:hardwareAccelerated=\"true\">

  <meta-data
    android:name=\"com.google.android.geo.API_KEY\"
    android:value=\"youKey\"/>
</application>
\n

iOS

\n

Modify the Info.plist to include the new meta tag along with your API key, the manifest is located\nin App_Resources/iOS/Info.plist

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
  <dict>
    <key>TNSGoogleMapsAPIKey</key>
    <string>yourKey</string>
  </dict>
</plist>
\n

Usage

\n

Core

\n
\n

Important: Ensure you've included xmlns:map="@nativescript/google-maps" on the Page element

\n
\n
<map:MapView
\tready=\"onReady\"
\tmapTap=\"onTap\"
\tmapLongPress=\"onLongPress\"
\tmarkerTap=\"onMarkerTap\"
/>
\n

Angular

\n
import { GoogleMapsModule } from '@nativescript/google-maps/angular';

@NgModule({
    imports: [
\t\t\tGoogleMapsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
\n
<MapView
\t(ready)=\"onReady($event)\"
\t(mapTap)=\"onTap($event)\"
\t(mapLongPress)=\"onLongPress($event)\"
\t(markerTap)=\"onMarkerTap($event)\"
>
</MapView>
\n

Vue

\n
import Vue from 'nativescript-vue'
import GoogleMaps from '@nativescript/google-maps/vue'

Vue.use(GoogleMaps)
\n
<MapView
\t@ready=\"onReady\"
\t@mapTap=\"onTap\"
\t@mapLongPress=\"onLongPress\"
\t@markerTap=\"onMarkerTap\"

/>
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/store-update":{"name":"@aquinn/store-update","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript store-update

\n
ns plugin add @aquinn/store-update
\n

Usage

\n

This code was borrowed from https://github.com/chronogolf/nativescript-store-update\nFor temporary use until the original author uses the new NS7 package workflow

\n

License

\n

This code was borrowed from https://github.com/chronogolf/nativescript-store-update\nFor temporary use until the original author uses the new NS7 package workflow

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/fontmin":{"name":"@nativescript-community/fontmin","version":"0.9.10","license":"MIT","readme":"

\n \n \n \n

\n

fontmin

\n

Minify font seamlessly

\n

\"NPM\n\"Build\n\"Downloads\"\n\"Dependencies\"\n\"Font

\n

Homepage

\n\n

Install

\n
$ npm install --save fontmin
\n

Usage

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/*.ttf')
    .dest('build/fonts');

fontmin.run(function (err, files) {
    if (err) {
        throw err;
    }

    console.log(files[0]);
    // => { contents: <Buffer 00 01 00 ...> }
});
\n

You can use gulp-rename to rename your files:

\n
var Fontmin = require('fontmin');
var rename = require('gulp-rename');

var fontmin = new Fontmin()
    .src('fonts/big.ttf')
    .use(rename('small.ttf'));
\n

API

\n

new Fontmin()

\n

Creates a new Fontmin instance.

\n

.src(file)

\n

Type: Array|Buffer|String

\n

Set the files to be optimized. Takes a buffer, glob string or an array of glob strings\nas argument.

\n

.dest(folder)

\n

Type: String

\n

Set the destination folder to where your files will be written. If you don't set\nany destination no files will be written.

\n

.use(plugin)

\n

Type: Function

\n

Add a plugin to the middleware stack.

\n

.run(cb)

\n

Type: Function

\n

Optimize your files with the given settings.

\n

cb(err, files, stream)

\n

The callback will return an array of vinyl files in files and a Readable/Writable\nstream in stream

\n

Plugins

\n

The following plugins are bundled with fontmin:

\n\n

.glyph()

\n

Compress ttf by glyph.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.glyph({ 
        text: '天地玄黄 宇宙洪荒',
        hinting: false         // keep ttf hint info (fpgm, prep, cvt). default = true
    }));
\n

.ttf2eot()

\n

Convert ttf to eot.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2eot());
\n

.ttf2woff()

\n

Convert ttf to woff.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2woff({
        deflate: true           // deflate woff. default = false
    }));
\n

.ttf2svg()

\n

Convert ttf to svg.

\n

you can use imagemin-svgo to compress svg:

\n
var Fontmin = require('fontmin');
var svgo = require('imagemin-svgo');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2svg())
    .use(svgo());
\n

.css()

\n

Generate css from ttf, often used to make iconfont.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        fontPath: './',         // location of font file 
        base64: true,           // inject base64 data:application/x-font-ttf; (gzip font with css). 
                                // default = false
        glyph: true,            // generate class for each glyph. default = false
        iconPrefix: 'my-icon',  // class prefix, only work when glyph is `true`. default to \"icon\"
        fontFamily: 'myfont',   // custom fontFamily, default to filename or get from analysed ttf file
        asFileName: false,      // rewrite fontFamily as filename force. default = false
        local: true             // boolean to add local font. default = false
    }));
\n

Alternatively, a transform function can be passed as fontFamily option.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        // ...
        fontFamily: function(fontInfo, ttf) {
          return \"Transformed Font Family Name\"
        },
        // ...
    }));
\n

.svg2ttf()

\n

Convert font format svg to ttf.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('font.svg')
    .use(Fontmin.svg2ttf());
\n

.svgs2ttf()

\n

Concat svg files to a ttf, just like css sprite.

\n

awesome work with css plugin:

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('svgs/*.svg')
    .use(Fontmin.svgs2ttf('font.ttf', {fontName: 'iconfont'}))
    .use(Fontmin.css({
        glyph: true
    }));
\n

.otf2ttf()

\n

Convert otf to ttf.

\n
var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/*.otf')
    .use(Fontmin.otf2ttf());
\n

CLI

\n
$ npm install -g fontmin
\n
$ fontmin --help

  Usage
    $ fontmin <file> [<output>]
    $ fontmin <directory> [<output>]
    $ fontmin <file> > <output>
    $ cat <file> | fontmin > <output>

  Example
    $ fontmin fonts/* build
    $ fontmin fonts build
    $ fontmin foo.ttf > foo-optimized.ttf
    $ cat foo.ttf | fontmin > foo-optimized.ttf

  Options
    -t, --text                          require glyphs by text
    -b, --basic-text                    require glyphs with base chars
    -d, --deflate-woff                  deflate woff
    --font-family                       font-family for @font-face CSS
    --css-glyph                         generate class for each glyf. default = false
    -T, --show-time                     show time fontmin cost
\n

you can use curl to generate font for websites running on PHP, ASP, Rails and more:

\n
$ text=`curl www.baidu.com` && fontmin -t \"$text\" font.ttf
\n

or you can use html-to-text to make it smaller:

\n
$ npm install -g html-to-text
$ text=`curl www.baidu.com | html-to-text` && fontmin -t \"$text\" font.ttf
\n

what is more, you can use phantom-fetch-cli to generate font for SPA running JS template:

\n
$ npm install -g phantom-fetch-cli
$ text=`phantom-fetch http://www.chinaw3c.org` && fontmin -t \"$text\" font.ttf
\n

Related

\n\n

Thanks

\n\n

License

\n

MIT © fontmin

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-observable-subscribe":{"name":"nativescript-observable-subscribe","version":"0.1.5","license":"MIT","readme":"

nativescript-observable-subscribe

\n

NativeScript module that adds subscribe support to observables. Listening for observable changes can always be done using standard addEventListener technique that can be found in the NativeScript docs, but this is a much more convenient subscription method that keeps your code neat by isolating handlers for individual properties.\nAs NativeScript is constantly evolving, a subscribe solution might be implemented in the core project as a tns module making this module obsolete; so one should keep an eye out for that.

\n

Installation

\n

Run npm install nativescript-observable-subscribe --save from your project's app directory:

\n
.
├── app  <------------------------------ run npm install from here
│   ├── app.css
│   ├── app.js
│   ├── bootstrap.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── node_modules
│   │   └── nativescript-observable-subscribe <-- The install will place the module's code here
│   │       └── ...
│   └── package.json <----------------- The install will register “nativescript-observable-subscribe” as a dependency here
│   └── tns_modules
│       └── ...
└── platforms
    ├── android
    └── ios
\n

If npm doesn't end up working for you, you can just copy and paste this repo's observablesubscribe.js file into your app and reference it directly.

\n

Usage

\n

To use the Observable Subscribe Module you must first require() it from your project's node_modules directory:

\n
require( \"./node_modules/nativescript-observable-subscribe/observablesubscribe\" );
\n

Once you have required the module in your code, it will execute and add the subscribe/unsubscribe functions to observable. You will be able to start using it to get notified of property changes like this:

\n
// viewmodel.js
\t...
    var mainViewModel = new HelloWorldModel();
\tvar counterPropName = 'counter';

\tmainViewModel.subscribe(counterPropName, function(args){
\t\tif (this.get(counterPropName) <= 0) {
\t\t\tthis.set(messagePropName, \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
\t\t}
\t\telse {
\t\t\tthis.set(messagePropName, this.get(counterPropName) + \" taps left\");
\t\t} 
\t}, mainViewModel);

\texports.mainViewModel = mainViewModel;
\n

If you want to unsubscribe a property from notifications, you can use the unsubscribe function like this:

\n
// viewmodel.js
\t...
\tmainViewModel.unsubscribe(counterPropName, callback);
\t...
\n

*Thanks to TJ VanToll for the directory structure graphic above and the template for this doc

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/zone-js":{"name":"@nativescript/zone-js","version":"3.0.4","readme":"

@nativescript/zone-js

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/inappbrowser":{"name":"@aquinn/inappbrowser","version":"1.0.2","license":"Apache-2.0","readme":"

Nativescript inappbrowser

\n
ns plugin add @aquinn/inappbrowser
\n

Usage

\n

This code was borrowed from https://github.com/proyecto26/nativescript-inappbrowser\nFor temporary use until proyecto uses the new NS7 package workflow

\n

License

\n

Apache License Version 2.0

\n

This code was borrowed from https://github.com/proyecto26/nativescript-inappbrowser\nFor temporary use until proyecto uses the new NS7 package workflow

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-loading-indicator":{"name":"nativescript-material-loading-indicator","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/nikolay-diyanov/nativescript-material-loading-indicator/blob/master/LICENSE"},"readme":"

NativeScript Material design activity indicator for iOS

\n

Following the material design loading indicator for Android, this plugin provides the same look and feel for iOS.

\n

Prerequisites

\n

NativeScript 1.3.0 (tns --version) has solved many build issues, so please upgrade if you need to.

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-material-loading-indicator
\n

Usage

\n
function creatingView(args) {

  var spinnerView = MMMaterialDesignSpinner.alloc().initWithFrame(CGRectMake(0,0,40,40));
    spinnerView.lineWidth = 1.5;
    spinnerView.tintColor = UIColor.redColor();

    spinnerView.startAnimating();
    args.view = spinnerView;

}

exports.creatingView = creatingView;
\n
<Page xmlns=\"http://www.nativescript.org/tns.xsd\">
      <Placeholder creatingView=\"creatingView\"/>
</Page>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-dev/multiple-environments":{"name":"@nativescript-dev/multiple-environments","version":"1.0.0","license":"Apache-2.0","readme":"

All credits to Brendan Ingham, original creator of this amazing hook.

\n

@nativescript-dev/multiple-environments

\n

This Hook is made for using multiple environments within a nativescript application.

\n

Actually this is a copy of nativescript-dev-multiple-environments adapted to work on NS 7 CLI.

\n

What it does

\n

First it changes your packageId to whatever you have stated in your environment-rules.json

\n

it also copies any files you have suffixed with the name of the environemnt for example : App_Resources/Android/google-services.staging.json will get copied to App_Resources/Android/google-services.json before building.

\n

Selecting Environment

\n

Once you have a initial environment-rules.json file you can change between the environments using --env.use.ENV_NAME

\n

for example for ios:\ntns run ios --env.use.staging

\n

this can also be used with other --env args like:

\n

tns run ios --bundle --env.aot --env.uglify --env.use.release

\n

Environments

\n

a basic environment-rules.json file is generated for you it looks like this:

\n

{
    \"version\": \"1.0.0\",
    \"default\": \"staging\",
    \"extraPaths\": [
        'app/environments'
    ],
    \"environments\": [
        {
            name: \"staging\",
            packageId: \"org.nativescript.appName.staging\",
            copyRule: \"(.*\\\\.staging\\\\..*)\"
        },
        {
            name: \"release\",
            packageId: \"org.nativescript.appName.release\",
            copyRule: \"(.*\\\\.release\\\\..*)\"
        }
    ]
}
\n

You can tweak this however you want, and add as many environments as you like.

\n

ExtraPaths is Optional, but can add multiple paths within the app. these will follow the same rules for the rules.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-accelerometer":{"name":"@triniwiz/nativescript-accelerometer","version":"4.0.3","license":"Apache-2.0","readme":"

Nativescript nativescript-accelerometer

\n
ns plugin add @triniwiz/nativescript-accelerometer
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-ng-sentry":{"name":"@essent/nativescript-ng-sentry","version":"4.0.0","license":"MIT","readme":"

NativeScript plugin for Sentry

\n

\"npm

\n

This is a plugin to log app crashes with Sentry.

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add @essent/nativescript-ng-sentry
\n

This command automatically installs the necessary files, as well as stores nativescript-ng-sentry as a dependency in your project's package.json file.

\n

Usage

\n

To use nativescript-ng-sentry you must first import the module:

\n
import { NgSentry } from '@essent/nativescript-ng-sentry';
\n

At the launch of your app call setCredentials with your own credentials, these can be found in your Sentry Project Settings, Client Keys (DSN). Use the public DSN for these credentials. Optionally you can also provide an environment and a user id.

\n
NgSentry.getInstance().setCredentials('123456', '123456789abcdefghijklmnopqrstuvw', 'development', 'unique-user-id');
\n

To log a crash, call saveCrash with a message and details.\nThe details will be used as a Sentry breadcrumb, you can use this to save a stacktrace, for example.\nYou can have a look at our example on how to call this with an uncaughtErrorEvent.

\n
NgSentry.getInstance().saveCrash('My crash message', 'My crash details');
\n

Crashes are not send to Sentry automatically, you can call sendCrashes to send all saved crashes to Sentry.\nWe suggest you call this method in the resume event of your app.

\n
NgSentry.getInstance().sendCrashes();
\n

Breadcrumbs (optional)

\n

You can save breadcrumbs to see what a user did before a crash occurred, these will be added to the next crash you save.\nTo add a breadcrumb use saveBreadcrumb with a title and category.

\n
NgSentry.getInstance().saveBreadcrumb('Routed to details page', 'state');
\n

Optionally you can add extra data to the breadcrumb.

\n
const properties: KeyValue<string> = {
    page: 'Change user data',
    changed: 'Username'
};
NgSentry.getInstance().saveBreadcrumb('Save success', 'action', properties);
\n

Optionally you can set a maximum amount of breadcrumbs, the default is 50.

\n
NgSentry.getInstance().setMaxAmountOfBreadcrumbs(10);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-okhttp":{"name":"nativescript-okhttp","version":"0.0.9","license":"MIT","readme":"

NativeScript plugin for OkHttp

\n

OkHttp is an HTTP client that supports:

\n\n

\"\"

\n

Installation

\n

Run the following command from the root of your project:

\n
$ tns plugin add nativescript-okhttp
\n

This command automatically installs the necessary files, as well as stores nativescript-okhttp as a dependency in your project's package.json file.

\n

Usage

\n

To use the social share module you must first require() it. After you require() the module you have access to its APIs.

\n
var okHttp = require(\"nativescript-okhttp\");
\n

API

\n

getString(url)

\n

The getString() method downloads a URL as a string.

\n
var okHttp = require(\"nativescript-okhttp\");
function pageLoaded(args) {
    var result = okHttp.getString(\"http://www.google.com/\");
    console.log(result);
}
exports.pageLoaded = pageLoaded;
\n

getJSON(url)

\n

The getString() method downloads a URL as a string.

\n
var okHttp = require(\"nativescript-okhttp\");
function pageLoaded(args) {
    var json = okHttp.getJSON(\"https://api.github.com/gists/c2a7c39532239ff261be\");
    console.log(\"JSON url: \" + json.url);
}
exports.pageLoaded = pageLoaded;
\n

getImage(url)

\n

The getImage() method returns an image as a stream from a remote URL.

\n

In this example, we will download an image from umgur (http://i.imgur.com/sXG9IHW.jpg) and we will share it ot Facebook using a social share plugin by @tjvantoll (https://github.com/tjvantoll/nativescript-social-share).

\n

\"\"

\n
var socialShare = require(\"nativescript-social-share\");
var imageSource = require(\"image-source\");
var okHttp = require(\"nativescript-okhttp\");
function pageLoaded(args) {
    var inputStream = okHttp.getImage(\"http://i.imgur.com/sXG9IHW.jpg\");
    var image = imageSource.fromData(inputStream);
    socialShare.shareImage(image);
}
exports.pageLoaded = pageLoaded;
\n

\"\"\n\"\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@iplab/ngx-l10n":{"name":"@iplab/ngx-l10n","version":"2.1.8","license":"MIT","readme":"

@iplab/ngx-l10n

\n
\n

Pure Angular localization (l10n) library.

\n
\n

\"npm\n\"Build\n\"Known

\n

Demo

\n

Click here for preview

\n

Description

\n\n

Tested with

\n\n

Installing / Getting started

\n
npm install @iplab/ngx-l10n
\n

Use the following snippet inside your app module:

\n
import { L10nModule, L10nService, LanguageCodes } from '@iplab/ngx-l10n';
...
...

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        BrowserModule,
        L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
        RouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [LocalizationResolve],
    bootstrap: [AppComponent]
})
export class AppModule {}
\n

Use the following snippet inside your component:

\n
import { L10nService } from '@iplab/ngx-l10n';


@Component({
  ...
})
export class AppComponent {

  constructor(private localization: L10nService) {
  }
}
\n

Use the following snippet inside your template:

\n
<div l10n=\"app.hello.key\" [l10n-args]=\"params\"></div>
<div l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></div>
<div l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></div>

<div [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></div>
<div [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></div>

<div>{{'app.hello.key' | l10n:param }}</div>
<div [innerHTML]=\"'app.hello.key' | l10n\"></div>
<div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>
\n

NativeScript

\n
tns plugin add @iplab/ngx-l10n
\n

Use the following snippet inside your app module:

\n
import { L10nModule, L10nService, L10nBaseLoader } from '@iplab/ngx-l10n';
import { knownFolders } from \"file-system\";
import { Subject, Observable, from } from 'rxjs';
import { map } from 'rxjs/operators';
import { Resolve } from \"@angular/router\";
...
import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
import { NativeScriptRouterModule } from \"nativescript-angular/router\";
...
...

@Injectable()
export class CustomLoader extends L10nBaseLoader {

    private readonly folderName = 'locales'; // folder where you place your locale files, 
                                            // in our case that is locales/en.locales.properties
    private readonly documents = knownFolders.currentApp();
    private readonly folder = this.documents.getFolder(this.folderName);

    public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
        let fileType = this.getFileExtension( url );                           
        let file = this.folder.getFile(url);

        return from(file.readText())
                .pipe(map((response) => {
                    return { response, fileType }
                }));
    }
}

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        NativeScriptModule,
        L10nModule.forRoot({ 
            config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
            loader: CustomLoader
        }),
        NativeScriptRouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [
        LocalizationResolve,
        L10nService, // because currently NativeScript doesn\\'t work with @Injectable({ providedIn: \\'root\\' })
        CustomLoader
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
\n

Use the following snippet inside your template:

\n
<ActionBar title=\"{{ 'app.header.title' | l10n }}\" class=\"action-bar\"></ActionBar>
<ActionBar [title]=\"'app.hello.key' | l10n\"></ActionBar>
<Label text=\"{{'app.hello.key' | l10n }}\"></Label>
<Button text=\"{{'app.hello.key' | l10n }}\" (tap)=\"onTap($event)\"></Button>
\n

If bindingProperty in configuration is set to text l10 directive\nwill use it as default element property

\n
<Label l10n=\"app.hello.key\" [l10n-args]=\"params\"></Label>
<Label l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></Label>
<Label l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></Label>

<Label [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></Label>
<Label [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></Label>
\n

Developing

\n

Built With:

\n\n

Setting up Dev

\n

This project was generated with Angular CLI version 6.0.7.

\n

Angular CLI must be installed before building L10n project.

\n
npm install -g @angular/cli
\n
git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run start
\n

Open "http://localhost:4200" in browser

\n

Versioning

\n

We use SemVer for versioning. For the versions available, see the link to tags on this repository.

\n

Tests

\n

This project was generated with Angular CLI version 6.0.7.

\n

Angular CLI must be installed before testing L10n project.

\n
npm install -g @angular/cli
\n
git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run test
\n

Contributing

\n

Want to help?

\n

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

\n

Licensing

\n

L10n is freely distributable under the terms of the MIT license.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-GMImagePicker":{"name":"nativescript-GMImagePicker","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-GMImagePicker/blob/master/LICENSE"},"readme":"

NativeScript-Gmimagepicker

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Rob Laverty

\n

Installation

\n

To install type

\n
tns plugin add nativescript-GMImagePicker
\n

Usages

\n

Example

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-accordion":{"name":"nativescript-ngx-accordion","version":"1.0.0","license":"MIT","readme":"

Nativescript-Ngx-Accordion

\n

A Nativescript Angular UI Control for Expand/Collapse Toggle panels. It is an extension of the (IListView)[] control.

\n

Setup

\n

npm install nativescript-ngx-accordion --save

\n

Import the module into your app-module

\n
import { AccordionViewModule } from 'nativescript-ngx-accordion';
\n

Getting Started

\n

Similar to the ListView, you need to define the ListItem template, as shown\nbelow.

\n
<Accordion
    limit=\"30\"
    [items]=\"items\"
    [templateRef]=\"accordion\"
    (eofItems)=\"addMore()\"
  >
    <ng-template #accordion let-item=\"item\" let-index=\"index\">
      <AccordionItem>
        <AccordionHeader>
          <!-- Place the header here -->
        </AccordionHeader>
        <AccordionContent>
          <!-- Place the main content here -->
        </AccordionContent>
        <AccordionFooter>
        <!-- Place the footer here -->
        </AccordionFooter>
        <AccordionDivider>
          <!-- Spacer gap for the items -->
        </AccordionDivider>
        <AccordionPlaceholder>
          <!-- Skeleton for intermediate loading -->
        </AccordionPlaceholder>
      </AccordionItem>
    </ng-template>
  </Accordion>
\n\n

Options

\n

The AccordionView accepts limit as an argument which is default to 30.

\n

It emits a value with the eofItems emitter when the list has reaches the end, for async loading more data to the list.

\n

AccordionViewService

\n

The AccordionService can be used to add more items to the list with the method\naddItems()

\n

Examples

\n

Provided in the demo app

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-angular-jwt":{"name":"ns-angular-jwt","version":"1.0.0","license":"Apache-2.0","readme":"

Nativescript - Angular - JWT

\n\n

The library provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.

\n

Installation

\n
# installation with tns
tns install slejnej/ns-angular-jwt
\n

Usage

\n
    \n
  1. make sure you have credentials from your any OAuth2 service
    2. \n
  2. create your injectable AuthGuard service in app root as follows
    3. \n
\n
// file - auth-guard.service
import all_needed_used_and_injected!!!

@Injectable()
export class AuthGuard implements CanActivate {

    subscription: Subscription;
    
    constructor(private routerExtensions: RouterExtensions, protected authService: AuthService,
        protected userService: UserService, private storage: SecureStorageService) { }
    
    canActivate() {
        if (this.authService.isAuthenticated()) {
            console.log('guard OK');
            return true;
        }
        else {
            console.log('guard FAIL');
            // logout user and redirect
            return false;
        }
    }
\n
    \n
  1. in your app-routing.module.ts check that you have defined auth providers as:
    2. \n
\n
import { AuthGuard } from \"~/auth-guard.service\";
export const authProviders = [
  AuthGuard
];
\n
    \n
  1. create new token.interceptor.ts
    2. \n
\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dante1304/ns-share-file":{"name":"@dante1304/ns-share-file","version":"1.0.1","license":"Apache-2.0","readme":"

@nativescript/share-file

\n
ns plugin add @1304dante/ns-share-file
\n

Share files between apps on android and ios

\n

Usage

\n

On android you need to add a file provider to AndroidManifest.xml and a download paths value file,\nhere's and example with one located in App_Resources\\Android\\src\\main\\res\\xml\\download_path.xml

\n

AndroidManifest.xml

\n
<provider
  android:name=\"androidx.core.content.FileProvider\"
  android:authorities=\"com.package.name.provider\"
  android:grantUriPermissions=\"true\"
  android:exported=\"false\">
  <meta-data
    android:name=\"android.support.FILE_PROVIDER_PATHS\"
    android:resource=\"@xml/download_path\"
    tools:replace=\"android:resource\" />
</provider>
\n

download_path.xml

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<paths xmlns:android=\"http://schemas.android.com/apk/res/android\">
      <external-path
        name=\"external\"
        path=\".\" />
      <external-files-path
        name=\"external_files\"
        path=\".\" />
      <cache-path
        name=\"cache\"
        path=\".\" />
      <external-cache-path
        name=\"external_cache\"
        path=\".\" />
    <files-path
        name=\"files\"
        path=\".\" />
</paths>
\n

TypeScript usage:

\n
    import { ShareFile } from '@1304dante/ns-share-file';
    import { knownFolders, path} from '@nativescript/core';

    export class SharingClass {
        constructor() {
            let fileName = this.documentsLocation() + 'path/to/file'
            ShareFile.share({
                path: fileName,
                android: { //android specific
                  title: 'Open text file with:'
                },
                ios: { //ios specific
                  animated: true,
                  rect: { //ipad specific
                      x: 110,
                      y: 110,
                      width: 0,
                      height: 0
                  }
                }
            });
        }

      public documentsLocation() {
          if (global.isAndroid) {
              return android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS).toString() +
              '/documents';
          }

          if (global.isIOS) {
             return path.join(knownFolders.currentApp().path) + '/documents';
          }
      }
    }
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-advanced-camera":{"name":"nativescript-advanced-camera","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Advanced Camera

\n

A highly customizable NativeScript camera plugin that can easily be embedded in a view.

\n

NOTES:

\n\n

Table of contents:

\n\n

Prerequisites

\n\n

Installation

\n
$ tns plugin add nativescript-advanced-camera
\n

Usage

\n

Angular 11+

\n

HTML Template: home.component.html

\n
<AdvancedCamera height=\"300dp\" width=\"300dp\" backgroundColor=\"black\" (loaded)=\"onLoaded($event)\"></AdvancedCamera>
\n

Component: home.component.ts

\n
import {EventData, isIOS} from \"@nativescript/core\";
import {AdvancedCamera} from \"nativescript-advanced-camera\";

registerElement('AdvancedCamera', () => AdvancedCamera);

@Component({
    selector: \"Home\",
    templateUrl: \"./home.component.html\"
})
export class HomeComponent {
    private cam: AdvancedCamera;

    public onLoaded(event: EventData) {
        console.log('Cam Loaded');
        this.cam = <AdvancedCamera> event.object;
    }
    
    public record(): void {
        console.log('Start Recording');
        this.cam.record();
    }

    public stop(): void {
        console.log('Stop Recording');
        this.cam.stop().then((file) => {
            const path = isIOS ? file.path : file.getPath();
            console.log(path);
        });
    }
}
\n

Features

\n

Note: To add features to this list, feel free to open a new issue.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FeatureAndroidiOS
Start & Stop Video Recording:heavy_check_mark::heavy_check_mark:
Take Photos:x::x:
Write Video / Photos to Library:heavy_check_mark::heavy_check_mark:
Switch between Front / Back Camera:x::x:
\n

Properties

\n

Common Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
writeFilesToPhoneLibraryBooleanEnable / Disable saving the files to phone library.
\n

iOS Specific Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyTypeDescription
shouldKeepViewAtOrientationChangesBooleanEnable / Disable keeping the view with the same bounds when the orientation changes.
shouldRespondToOrientationChangesBooleanEnable / Disable the video following device orientation.
writeFilesToPhoneLibraryBooleanEnable / Disable saving the files to phone library.
\n

Methods

\n

Common Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
record()Starts recording a video.
stop()Stops the video recording and returns a Promise that gives the video file.
\n

iOS Specific Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
resetOrientation()Reset and redraw the preview layer orientation.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-customwebview":{"name":"nativescript-customwebview","version":"1.0.1","license":"MIT","readme":"

Nativescript Plugin for Webview

\n

Testing how plugins work - probably not working.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"testnsfire":{"name":"testnsfire","version":"11.1.4","license":"MIT","readme":"

NativeScript Firebase plugin

\n

\"Firebase\"/

\n
\n

For NativeScript 7 compatibility, run tns plugin add testnsfire.

\n
\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n
\n

For NativeScript 6.1+ compatibility, install polugin version 10: tns plugin add nativescript-plugin-firebase@10.

\n
\n
\n

For NativeScript 6.0 and lower, stick to plugin version < 10.

\n
\n

\"NPM\n\"Downloads\"\n\"TotalDownloads\"

\n

Features

\n\n

Prerequisites

\n

Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

\n

Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

\n\n

Note: for using separate versions of these files for development and production environments see this section

\n

Installation

\n

If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

\n

From the command prompt go to your app's root folder and execute this for NativeScript 7+:

\n
tns plugin add testnsfire
\n

or for NativeScript 6:

\n
tns plugin add nativescript-plugin-firebase
\n

This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

\n
\n

Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

\n
\n
\n

Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

\n
\n

Config

\n

If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

\n

You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

\n

You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

\n

Using Vue?

\n

Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

\n

If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

\n

iOS (Cocoapods)

\n

The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

\n

Google Play Services Version

\n

The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

\n
project.ext {
    googlePlayServicesVersion = \"+\"
}
\n

Usage

\n

Demo app

\n

If you want a quickstart, clone the repo, then:

\n\n

Start-up wiring

\n

We need to do some wiring when your app starts, so open app.js and add this before application.start();:

\n
JavaScript
\n
// NativeScript 7+
var firebase = require(\"testnsfire\");

// NativeScript 6-
var firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function () {
      console.log(\"firebase.init done\");
    },
    function (error) {
      console.log(\"firebase.init error: \" + error);
    }
);
\n

TypeScript

\n
// NativeScript 7+
import { firebase } from \"testnsfire\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
  () => {
    console.log(\"firebase.init done\");
  },
  error => {
    console.log(`firebase.init error: ${error}`);
  }
);
\n

Angular

\n

Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

\n
// NativeScript 7+
import { firebase } from \"testnsfire\";

// NativeScript 6-
const firebase = require(\"nativescript-plugin-firebase\");

@Component({
    // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
  }
}
\n

Known issues on iOS

\n

Trouble running on the simulator

\n

Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
<plist version=\"1.0\">
<dict>
    <key>com.apple.keystore.access-keychain-keys</key>
    <true/>
    <key>com.apple.keystore.device</key>
    <true/>
</dict>
</plist>
\n

Authentication failed: invalid_token

\n

On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

\n
[FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
or
[FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
\n

This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

\n
firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
  iOSEmulatorFlush: true
}).then()
\n

Pod dependency error

\n

If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

\n

This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

\n

Known issues on Android

\n

Genymotion

\n

You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

\n

DexIndexOverflowException

\n
com.android.dex.DexIndexOverflowException: method ID not in..
\n

Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }  
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }  
}
\n

java.lang.OutOfMemoryError: GC overhead limit exceeded

\n

Increase the Java Max Heap Size like this (the bit at the end):

\n
android {  
  defaultConfig {  
    applicationId = \"__PACKAGE__\"  
    multiDexEnabled true
    generatedDensities = []
  }
  aaptOptions {  
    additionalParameters \"--no-version-vectors\"  
  }
  dexOptions {
    javaMaxHeapSize \"4g\"
  }
}
\n

FirebaseApp with name [DEFAULT] doesn't exist

\n

Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

\n

Errors regarding API level 26.0.0

\n

Update your local Android SDKs:

\n

Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

\n

Found play-services:A.C.D, but version B.X.Y is needed..

\n

Update your Android bits like the issue above and reinstall the android platform in your project.

\n

include.gradle: Failed to apply plugin .. For input string: "+"

\n

You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

\n
android {  
  // other stuff here

  project.ext {
    googlePlayServicesVersion = \"15.0.0\"
  }
}
\n

Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

\n

Separation of Environments

\n

It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

\n

Setup

\n
    \n
  1. \n

    Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

    \n
    2. \n
  2. \n

    Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

    \n
      \n
    • iOS\n
        \n
      • app/App_Resources/iOS/GoogleService-Info.plist.dev
        • \n
      • app/App_Resources/iOS/GoogleService-Info.plist.prod
        • \n
      \n
      • \n
    • Android\n
        \n
      • app/App_Resources/Android/google-services.json.dev
        • \n
      • app/App_Resources/Android/google-services.json.prod
        • \n
      \n
      • \n
    \n
    3. \n
\n

Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

\n

Build

\n

The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

\n\n

Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

\n

Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shimmer-enduco":{"name":"nativescript-shimmer-enduco","version":"2.0.8","readme":"

NativeScript Shimmer

\n

Facebook shimmer effect for your NativeScript app.

\n

Uses the following native plugins:

\n\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-shimmer-enduco
\n

Demo

\n

\"Demo\"

\n

Usage

\n\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
  xmlns:sh=\"nativescript-shimmer\" 
  loaded=\"pageLoaded\">
  <StackLayout>
    <sh:Shimmer id=\"shimmer\">
      <Label text=\"Shimmer\" />     
    </sh:Shimmer>
    <Button text=\"Toggle\" tap=\"{{toggleShimmer}}\" />
  </StackLayout>
</Page>
\n\n
import {EventData, Observable} from \"data/observable\";
import {Page} from \"ui/page\";

// Event handler for Page \"loaded\" event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <Page>args.object;
    page.bindingContext = new ShimmerDemo(page);
}

class ShimmerDemo extends Observable {
  private _enableTxt: string;
  private _shimmer: any;

  constructor(page: Page) {
    super();
    this._shimmer = page.getViewById('shimmer');
  }

  public toggleShimmer() {
    this._shimmer.enabled = !this._shimmer.enabled;
  }
}
\n

LICENSE

\n

BSD

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/nativescript-google-maps-sdk-n7":{"name":"@res0/nativescript-google-maps-sdk-n7","version":"3.0.9","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-preview":{"name":"nativescript-camera-preview","version":"1.0.5","license":"MIT","readme":"

Camera Preview for nativescript

\n

I can't take any credits for this. This is all the work from: https://github.com/NickIliev/NativeScript-cameraApp-poc\nimplemented in a module (that might not work).

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sinch":{"name":"nativescript-sinch","version":"1.1.5","license":"MIT","readme":"

#NativeScript-Sinch\n##WIP

\n

##Install\nNote : If the android platform is not added before installing this plugin the installation will fail.

\n
tns platform add android 
tns plugin add nativescript-sinch
\n
var sinch = require('nativescript-sinch');

//or

import {Sinch} from 'nativescript-sinch';
\n

Initialize

\n
var sinchClient = new sinch.Sinch(\"appKey\", \"appSecret\", \"host\", \"username\");

//or

let sinchClient  = new Sinch(\"appKey\", \"appSecret\", \"host\", \"username\");
\n

Specify the client capabilities

\n
 sinchClient.setSupportMessaging(true);
 sinchClient.setSupportCalling(true);
 sinchClient.setSupportActiveConnectionInBackground(true);
 sinchClient.setSupportPushNotifications(true);
\n

Start the client

\n
sinchClient.start();
\n

Stop listening for incoming events (calls or messages).

\n
sinchClient.stopListeningOnActiveConnection();
\n

Stop the client when the calling or messaging functionality is no longer needed.

\n
sinchClient.stop();
\n

Get CallClient

\n
sinchClient.getCallClient();
\n

e.g

\n
var callClient = sinchClient.getCallClient();
callClient.callUser(\"triniwiz\");
\n

Methods

\n
addCallClientListener(callClientListener:()=>void)
callConference(conferenceId:string)
callConference(conferenceId,headers:string[])
callPhoneNumber(phoneNumber:string)
callPhoneNumber(phoneNumber:string,headers:string[])
callSip(sipIdentity:string)
callSip(sipIdentity:string,headers:string[])
callUser(toUserId:string)
callUser(toUserId:string,headers:string[])
callUserVideo(toUserId:string)
callUserVideo(toUserId:string,headers:string[])
getCall(callId:string)
removeCallClientListener(callClientListener:()=>void)
setRespectNativeCalls(respectNativeCalls:boolean)
\n

Get MessageClient

\n
sinchClient.getMessageClient();
\n

e.g

\n
var messageClient = sinchClient.getCallClient();
\n

Methods

\n
var message = sinchClient.writableMessage();
var message = sinchClient.writableMessage([\"triniwiz\",\"brad\",\"jen\",\"peter\"],\"Hi\");
var message = sinchClient.writableMessage(\"triniwiz\",\"Sup\");
messageClient.send(message);
\n
addMessageClientListener(callback:()=>void);
removeMessageClientListener(callback:()=>void);
send(message:WriteableMessage);
\n

Get VideoController

\n
 sinchClient.getVideoController()
\n

e.g

\n
var videoController = sinchClient.getVideoController();
videoController.getCaptureDevicePosition() 
videoController.getLocalView() 
videoController.getRemoteView() 
videoController.setBorderColor(float r, float g, float b)
videoController.setCaptureDevicePosition(int facing)
videoController.setResizeBehaviour(VideoScalingType type)
videoController.toggleCaptureDevicePosition()
\n

Get AudioController

\n
  sinchClient.getAudioController()
\n

e.g

\n
var audioController = sinchClient.getAudioController();

audioController.mute();
audioController.unmute();
audioController.enableSpeaker();
audioController.disableSpeaker();
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ng-gif":{"name":"tns-ng-gif","version":"1.3.1","license":"ISC","readme":"

Display an animated gif in a NativeScript Image

\n
\n

A simple NativeScript plugin to display animated gif into an Image layout.

\n
\n
\n

Works only with an Angular powered NativeScript application. Both Android and iOS platforms are supported.

\n
\n

Usage

\n

import the GifModule into your Module:

\n
import { GifModule } from 'tns-ng-gif';

@NgModule({
    imports: [
        GifModule,
        ...
    ],
    declarations: [
        ...
    ]
})
export class YourModule { }
\n

Then, just add the [tnsGif] to an Image layout. Use the existing src property to load the gif file:

\n
  <Image [tnsGif] src=\"~/path/to/your.gif\"></Image>
\n

Result on an iOS device:

\n

\"GifDemo\"

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-ng-plugin-seed":{"name":"ns-ng-plugin-seed","version":"0.0.5","license":"MIT","readme":"

Nativescript + Angular Minimal Plugin seed

\n\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"korp-carga-inicial":{"name":"korp-carga-inicial","version":"1.1.0","license":"Apache-2.0","readme":"

Your Plugin Name

\n

Add your plugin badges here. See nativescript-urlhandler for example.

\n

Then describe what's the purpose of your plugin.

\n

In case you develop UI plugin, this is where you can add some screenshots.

\n

(Optional) Prerequisites / Requirements

\n

Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

\n

Installation

\n

Describe your plugin installation steps. Ideally it would be something like:

\n
tns plugin add <your-plugin-name>
\n

Usage

\n

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

\n
```javascript\nUsage code snippets here\n```)\n
\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-jf":{"name":"nativescript-audio-jf","version":"1.0.2","license":"ISC","readme":"\n

NativeScript Audio

\n\n

NativeScript plugin to play and record audio files for Android and iOS.

\n

Installation

\n

tns plugin add nativescript-audio-jf

\n

Recording Permissions

\n

iOS

\n\n
<key>NSMicrophoneUsageDescription</key>
<string>The app needs to access your Microphone to record.</string>
\n

Android

\n\n
<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
\n
\n

Android Native Classes

\n\n

iOS Native Classes

\n\n

Usage

\n

TypeScript Example

\n
import { TNSPlayer } from 'nativescript-audio-jf';

export class YourClass {
  private _player: TNSPlayer;

  constructor() {
    this._player = new TNSPlayer();
    this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
    this._player
      .initFromFile({
        audioFile: '~/audio/song.mp3', // ~ = app directory
        loop: false,
        completeCallback: this._trackComplete.bind(this),
        errorCallback: this._trackError.bind(this)
      })
      .then(() => {
        this._player.getAudioTrackDuration().then(duration => {
          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          console.log(`song duration:`, duration);
        });
      });
  }

  public togglePlay() {
    if (this._player.isAudioPlaying()) {
      this._player.pause();
    } else {
      this._player.play();
    }
  }

  private _trackComplete(args: any) {
    console.log('reference back to player:', args.player);
    // iOS only: flag indicating if completed succesfully
    console.log('whether song play completed successfully:', args.flag);
  }

  private _trackError(args: any) {
    console.log('reference back to player:', args.player);
    console.log('the error:', args.error);
    // Android only: extra detail on error
    console.log('extra info on the error:', args.extra);
  }
}
\n

Javascript Example:

\n
const audio = require('nativescript-audio-jf');

const player = new audio.TNSPlayer();
const playerOptions = {
  audioFile: 'http://some/audio/file.mp3',
  loop: false,
  completeCallback: function() {
    console.log('finished playing');
  },
  errorCallback: function(errorObject) {
    console.log(JSON.stringify(errorObject));
  },
  infoCallback: function(args) {
    console.log(JSON.stringify(args));
  }
};

player
  .playFromUrl(playerOptions)
  .then(function(res) {
    console.log(res);
  })
  .catch(function(err) {
    console.log('something went wrong...', err);
  });
\n

API

\n

Recorder

\n

TNSRecorder Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
start(options: AudioRecorderOptions): Promise<void>Start recording to file.
stop(): Promise<void>Stop recording.
pause(): Promise<void>Pause recording.
resume(): Promise<void>Resume recording.
dispose(): Promise<void>Free up system resources when done with recorder.
getMeters(channel?: number): numberReturns the amplitude of the input.
isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
\n

TNSRecorder Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native AVAudioRecorder class instance.
androidGet the native MediaRecorder class instance.
debugSet true to enable debugging console logs (default false).
\n

Player

\n

TNSPlayer Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
pause(): Promise<boolean>Pause playback.
resume(): voidResume playback.
seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
dispose(): Promise<boolean>Free up resources when done playing audio.
isAudioPlaying(): booleanDetermine if player is playing.
getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
\n

TNSPlayer Instance Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
iosGet the native ios AVAudioPlayer instance.
androidGet the native android MediaPlayer instance.
debug: booleanSet true to enable debugging console logs (default false).
currentTime: numberGet the current time in the media file's duration.
volume: numberGet/Set the player volume. Value range from 0 to 1.
\n

License

\n

ISC

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-label":{"name":"nativescript-label","version":"1.0.0","license":"MIT","readme":"

NativeScript Label

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-i18n":{"name":"nativescript-i18n","version":"0.4.1","license":"MIT","readme":"

nativescript-i18n

\n

This is a plugin for Nativescript that implements i18n in an easy manner.

\n

It uses the native capabilities of each platform without the need of a separate JS or JSON file.

\n

It is heavily inspired from NativeLang and this thread

\n

The plugin defines an L() method at the application level so it will be accessible both from the XML and JS files.

\n

Please don't forget to read the IMPORTANT section! :smile:

\n

Credits

\n
\n

Most thanks goes out to Dan Tamas (@rborn) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

\n
\n

Thanks to @TheBrousse and @ValioStoychev for the help with iOS and @alejonext for creating the initial module.

\n

Also a big thanks to all the contributors that made this repo better :)

\n

Usage

\n

Install the plugin in your app

\n
npm install --save nativescript-i18n
\n

Create a folder i18n in the app folder with the following structure:

\n
app
  |
  |-- App_Resources
  |
[...]
  |
  |-- i18n
       |
       |-- en
             |- strings.xml
       |
       |-- es
             |- strings.xml
\n

Require nativescript-i18n and globals in app.js as early as possible (I do it even before I require the application module, the very first 2 lines).

\n
\trequire('globals');
\trequire('nativescript-i18n');
\n

If you use TypeScript and want to use L() in the code you will need to cast the global var to any like belowin the file you intend to use L(). You can read more about this in https://github.com/rborn/nativescript-i18n/issues/57

\n
\tdeclare var global:any;
\n

And in the code use it like this:

\n

XML files

\n

Simple string

\n
\t<Label text=\"{{ L('hello') }}\">
\n

It supports one or multiple replacements, directly or from the model

\n
\t<Label text=\"{{ L('hello') }}\" class=\"title\" textWrap=\"true\" />
\t<Label text=\"{{ L('hello_replace','my friend') }}\" class=\"message\" textWrap=\"true\" />
\t<Label text title=\"{{ L('multi_replace','direct replacement', modelReplacement) }}\">
\n

Assuming you have defined in strings.xml the definitions and in the model the replacement modelReplacement variable

\n
\t<string name=\"hello\">Hello!</string>
\t<string formatted=\"false\" name=\"hello_replace\">Hello %s!</string>
\t<string formatted=\"false\" name=\"multi_replace\">We can replace directly in xml: %s or from the model: %s</string>
\n

To define a custom path for the i18n files (other than App_Resources/i18n), add this configuration to your project's package.json

\n
\"nativescript-i18n\": {
    \"customLangPath\": \"app/resources/i18n\"
}
\n

Language defaults to english if the phone's language doesn't match any of your defined languages. If you want to set your own default language, add this configuration to your project's package.json

\n

Keep in mind that on iOS the language picked by the device will be based on the order in Settings -> Language & Region -> Preferred language order

\n
\"nativescript-i18n\": {
    \"defaultLang\": \"es\"
}
\n

IMPORTANT

\n\n

JS files

\n
\tconsole.log(L('home'));
\tconsole.log(L('multi_replace', 'ONE', 'TWO'));
\n

Angular

\n

In case you use Angular for your app, things get a little more complicated.

\n

My Angular skills are zero but @alejonext has a solution for it in this comment.

\n

Update 28.06.2016

\n

@AirMike and @loloof64 did a great job by testing and further improving @alejonext's PR so the plugin includes now support for Angular :bow:

\n

After you import the plugin in the app in the usual way just need to import the module NativeScriptI18nModule from nativescript-i18n/angular in your file (main.ts)

\n

(Please be aware that the below intructions are in typescript not pure js)

\n
\timport { NativeScriptI18nModule } from \"nativescript-i18n/angular\";
\n

and then import it in your app module

\n
\t@NgModule({


      imports: [
        NativeScriptI18nModule
      ]


    })
    export class AppModule { }
\n

Angular usage is {{ value | L:args }}

\n
\t<Button text=\"{{ 'Login' | L }}\"></Button>
\n

As for a more detailed example :

\n

You can put a code like this in your main.ts :

\n
    import { NativeScriptI18nModule } from 'nativescript-i18n/angular';

    import { NativeScriptModule } from \"nativescript-angular/platform\";
    import { NgModule } from \"@angular/core\";
    import { AppComponent } from \"./app.component\";


    @NgModule({

      imports: [
        NativeScriptModule,
        NativeScriptI18nModule
      ],

      declarations: [
        AppComponent,
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
\n

For the main component, let's say that the following html template is used (the strings definitions follow next):

\n
    <GridLayout rows=\"*,*,*\">
        <label row=\"0\" text=\"{{'menuitem_new_file' | L }}\"></label>
        <label row=\"1\" text=\"{{'menuitem_new_folder' | L }}\"></label>
        <label row=\"2\" text=\"{{'menuitem_new' | L:'---':'***':124.25693 }}\"></label>
    </GridLayout>
\n

And let's say that these are the string definitions for "en" (put in app/i18n/en/strings.xml)

\n
    <resources>
        <string name=\"app_name\">Chess Exercices Cupboard</string>
        <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

        <string formatted=\"false\" name=\"menuitem_new\">%s New... %s %0.2f</string>
        <string name=\"menuitem_new_file\">File</string>
        <string name=\"menuitem_new_folder\">Folder</string>
    </resources>
\n

And the french translations (put in app/i18n/fr/srings.xml)

\n
    <resources>
        <string name=\"app_name\">Chess Exercices Cupboard</string>
        <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

        <string formatted=\"false\" name=\"menuitem_new\">%s Nouveau... %s %0.2f</string>
        <string name=\"menuitem_new_file\">Fichier</string>
        <string name=\"menuitem_new_folder\">Dossier</string>
    </resources>
\n

Then if your phone is configured for french you'll see something like this :

\n
    Fichier
    Dossier
    --- Nouveau... *** 124.25693
\n

Or, if configured for english or "unrecognized" language :

\n
    File
    Folder
    --- New... *** 124.25693
\n

Demo

\n

Please have a look in the demo folder for a working example.

\n

iOS Permission text

\n

Add this special keys to app/i18n/(lang)/strings.xml used to notify user, in configured language while showing permission alerts.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescription of key
NSAppleMusicUsageDescriptionSpecifies the reason for your app to use the media library
NSBluetoothPeripheralUsageDescriptionSpecifies the reason for your app to use Bluetooth
NSCalendarsUsageDescriptionSpecifies the reason for your app to access the user’s calendars
NSCameraUsageDescriptionSpecifies the reason for your app to access the device’s camera
NSContactsUsageDescriptionSpecifies the reason for your app to access the user’s contacts
NSHealthShareUsageDescriptionSpecifies the reason for your app to read the user’s health data
NSHealthUpdateUsageDescriptionSpecifies the reason for your app to make changes to the user’s health data
NSHomeKitUsageDescriptionSpecifies the reason for your app to access the user’s HomeKit configuration data
NSLocationAlwaysUsageDescriptionSpecifies the reason for your app to access the user’s location information at all times
NSLocationWhenInUseUsageDescriptionSpecifies the reason for your app to access the user’s location information while your app is in use
NSMicrophoneUsageDescriptionSpecifies the reason for your app to access any of the device’s microphones
NSMotionUsageDescriptionSpecifies the reason for your app to access the device’s accelerometer
NSPhotoLibraryUsageDescriptionSpecifies the reason for your app to access the user’s photo library
NSRemindersUsageDescriptionSpecifies the reason for your app to access the user’s reminders
NSSiriUsageDescriptionSpecifies the reason for your app to send user data to Siri
NSSpeechRecognitionUsageDescriptionSpecifies the reason for your app to send user data to Apple’s speech recognition servers
\n

(Pseudo) roadmap/ideas

\n

The following ideas are inspired by this comment and issues posted by the users of this plugin

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fubaydullaev/nativescript-epub-folio":{"name":"@fubaydullaev/nativescript-epub-folio","version":"1.0.1","license":"Apache-2.0","readme":"

@fubaydullaev/nativescript-epub-folio

\n
ns plugin add @fubaydullaev/nativescript-epub-folio
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wkwebview":{"name":"nativescript-wkwebview","version":"1.0.0","license":"MIT","readme":"

NativeScript WKWebView

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"bev-nativescript-webrtc":{"name":"bev-nativescript-webrtc","version":"2.0.8","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-overfullscreen":{"name":"nativescript-camera-overfullscreen","version":"3.2.1","readme":"

Welcome to the nativescript-camera-overfullscreen plugin for NativeScript framework

\n

Prerequisites

\n\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n

Navigate to project folder and run NativeScript-CLI command

\n
tns plugin add nativescript-camera-overfullscreen
\n

Plugin could be added as a standard npm dependency running command

\n
npm install nativescript-camera-overfullscreen --save
\n
\n

Note: the --save flag will add the plugin as dependency in your package.json file

\n
\n

Requesting permissions

\n

Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

\n
camera.requestPermissions();
\n
\n

Note: Older versions won't be affected by the usage of the requestPermissions method.

\n
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
var camera = require(\"nativescript-camera-overfullscreen\");
\n
import * as camera from \"nativescript-camera-overfullscreen\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to recieve image asset

\n
\n
var imageModule = require(\"ui/image\");
camera.takePicture()   
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";
camera.takePicture({).
    then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
var imageModule = require(\"ui/image\");

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
import { Image } from \"ui/image\";

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
camera.takePicture(options).
    then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
var isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-ts":{"name":"tns-template-blank-ts","version":"6.5.4","license":"Apache-2.0","readme":"

NativeScript Core with TypeScript Blank Template

\n

App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

\n

Quick Start

\n

Execute the following command to create an app from this template:

\n
tns create my-blank-ts --template tns-template-blank-ts
\n
\n

Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-blank-ts).

\n
\n

If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

\n
# clone nativescript-app-templates monorepo locally
git clone git@github.com:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
tns create my-blank-ts --template nativescript-app-templates/packages/template-blank-ts
\n

NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

\n

Walkthrough

\n

Architecture

\n

The application root module:

\n\n

There is a single blank page module that sets up an empty layout:

\n\n

Home page has the following components:

\n\n

Get Help

\n

The NativeScript framework has a vibrant community that can help when you run into problems.

\n

Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

\n

If you have found an issue with this template, please report the problem in the NativeScript repository.

\n

Contributing

\n

We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@billow/nsv-http":{"name":"@billow/nsv-http","version":"1.0.5","license":"MIT","readme":"

NativeScript-Vue Http

\n

A wrapper for the default http module in NativeScript. It also fixes some quirks with Android and gzip.

\n

Installation

\n
npm i @billow/nsv-http
\n

Usage

\n
// backend.js example.

import { Http } from \"@billow/nsv-http\"
import { isAndroid } from 'platform'
import { getString } from \"application-settings\" // Example Only

let http = new Http({

  // Configure a base url for all requests
  baseUrl: 'https://api.test.com',

  // Example headers, typically this is what we use when interacting with a Laravel Passport API.
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json;charset=utf-8',
    'Accept-Encoding': isAndroid ? 'identity' : 'gzip, deflate, br', // Android requests fail when the server is gzipping responses, this is a work around.
    'X-Requested-With': 'XMLHttpRequest',
    'Authorization': 'Bearer ' + getString('token', '')
  }
})

http.post('/path', {...}, successCallback, errorCallback)
http.get('/path', successCallback, errorCallback)
\n

As a Vue plugin

\n
import Http from '@billow/nsv-http'

Vue.use(Http, {

  // Configure a base url for all requests
  baseUrl: 'https://api.test.com',

  headers: {...}
})

methods: {
  loadUser() {
    this.$http.get('/user/1', content => {
      let responsePayload = content
    }, error => {
      // handle the error
    })
  },
  createUser() {
    this.$http.post('/user', {
      name: 'John',
      surname: 'Doe'
    }, content => {
      let responsePayload = content
    }, error => {
      // handle the error
    })
  }
}
\n

Updating the Authorization Header

\n
let http = new Http({...})

let token = '12345'

http.setAuthorizationHeader(`Bearer ${token}`)
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ncenerar/nativescript-hello-world":{"name":"@ncenerar/nativescript-hello-world","version":"1.0.3","license":"Apache-2.0","readme":"

@ncenerar/nativescript-hello-world

\n
ns plugin add @ncenerar/nativescript-hello-world
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-flashlight":{"name":"@essent/nativescript-flashlight","version":"2.1.1","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ncenerar/nativescript-activelook-sdk":{"name":"@ncenerar/nativescript-activelook-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

@ncenerar/nativescript-activelook-sdk

\n
ns plugin add @ncenerar/nativescript-activelook-sdk
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-fix":{"name":"nativescript-nfc-fix","version":"5.1.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-filepicker":{"name":"nativescript-simple-filepicker","version":"1.1.2","license":"MIT","readme":"

NativeScript Simple FilePicker Plugin

\n

A simple plugin for providing file picker functionality to your NativeScript app.

\n

Installation

\n
tns plugin add nativescript-simple-filepicker
\n

Usage

\n
import { openFilePicker } from 'nativescript-simple-filepicker';

openFilePicker({
    extensions?: string[]; // Defaults to all
    multipleSelection?: boolean; // Defaults to false
}).then((data) => {
    console.log(data.files);
});
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-square-reader":{"name":"nativescript-square-reader","version":"1.0.6","license":"Apache-2.0","readme":"

NativeScript Square Reader

\n

iOS only (for now) nativescript plugin for the Square Reader SDK https://squareup.com/us/en/developers/reader-sdk

\n

Note: will only work for iOS 11+. To support older versions, consider using\nhttps://github.com/fhackenb/nativescript-square-plugin

\n

Installation

\n

tns plugin add nativescript-square-reader

\n

Setup

\n

iOS setup guide: https://docs.connect.squareup.com/payments/readersdk/setup-ios

\n
    \n
  1. tns plugin add nativescript-square-reader
    2. \n
  2. Follow steps 1 - 2 on the above list to get a SquareReaderSDK.framework
    3. \n
  3. Add the SquareReaderSDK.framework to your build path
    4. \n
  4. Update your Info.plist with usage descriptions (Step 3 from link)
    5. \n
  5. Get an auth code https://docs.connect.squareup.com/payments/readersdk/mobile-authz-guide
    6. \n
  6. Get coding!
    7. \n
\n

Usage

\n

See demo app for more detailed example usage

\n

Authenticate:

\n
this.squareReader = new SquareReader();
this.squareReader.authenticate(this.code)
    .then( (res: SquareAuthStatus) => {
        if (res.code === 0) {
            // authenticated
        } else {
            // not authenticated
        }
    });
\n

Check out:

\n
this.squareReader.startCheckout(100, this.page.ios)
    .subscribe( (result: SquareCheckoutResult) => {
        switch (result.status) {
            case 1:
            console.log(\"Cancelled!\");
            break;
            case 2:
            console.log(\"Failed!\");
            break;
            case 0:
            console.log(\"Succeeded!\");
            console.log(\"LocationId:\", result.checkoutResult.locationID);
            console.log(\"Tenders:\", result.checkoutResult.tenders);
            break;
        }
    });
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-typedoc-theme":{"name":"nativescript-typedoc-theme","version":"1.1.0","license":"Apache-2.0","readme":"

nativescript-typedoc-theme

\n

A TypeDoc theme for the\nNativeScript Cross-Platform Modules\nAPI-Refefence.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fklingler/nativescript-image-zoom":{"name":"@fklingler/nativescript-image-zoom","version":"4.1.5","license":"Apache-2.0","readme":"

Nativescript nativescript-image-zoom

\n
ns plugin add @triniwiz/nativescript-image-zoom
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-uuid":{"name":"nativescript-ios-uuid","version":"1.0.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-tooltip":{"name":"@triniwiz/nativescript-tooltip","version":"3.0.0","license":"Apache-2.0","readme":"

Nativescript nativescript-tooltip

\n
ns plugin add @triniwiz/nativescript-tooltip
\n

API documentation

\n

Documentation for the latest stable release

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/test1":{"name":"@jcassidyav/test1","version":"1.0.3","license":"Apache-2.0","readme":"

@nativescript/test1

\n
ns plugin add @nativescript/test1
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbaselite":{"name":"nativescript-couchbaselite","version":"1.0.11","license":"GNU General Public License 3","readme":"

nativescript-couchbaselite

\n

A nativescript plugin that brings you all couchbase features:

\n\n

Author

\n\n

How to use it

\n

1- Import dependency

\n
tns plugin add nativescript-couchbaselite
\n

2- Samples

\n

Import lib

\n
import {
    QueryResult, LiveQuery, QueryListener, Revision,
    DatabaseManager, Document, Database, AttachmentFactory, Emitter, AttachmentImage
} from 'nativescript-couchbaselite';

class User implements Document {
    docId: string;
    docRev: string;
    docType: string = \"USER\";
    name: string;
    registerAt: number;
    secure: boolean = false;
    set registerAtDate(d: Date) {
        this.registerAt = d.getTime();
    }
    get registerAtDate() {
        return this.registerAt ? new Date(this.registerAt) : null;
    }
    @Type(() => Group) group: Group = new Group;
    getName() {
        return this.name;
    }
}
\n

Create Database encrypted

\n
let dbTest = DatabaseManager.getOrCreate({ name: \"test\", encryptionKey: \"SECURE\", create: true });
\n

Map Typescript Objects

\n
let mapping = new Map<string, any>();
mapping.set(\"USER\", User);
dbTest.setMapping(mapping);
\n

CRUD Document

\n
let user = new User;
user.name = \"user1\";
user.group.name = \"group1\";
user.registerAtDate = now;
user.secure = true;       
dbTest.createDocument(user, \"ID\", { ttl: new Date() });
let fetched: User = <User>dbTest.getDocument(user.docId);
console.log(fetched.getName()); 
fetched.group.name = \"group2\";
dbTest.updateDocument(fetched.docId, fetched);               
let success = dbTest.deleteDocument(user.docId);
\n

Crud Attachment

\n
let source = fromResource(\"icon\");
let attach = AttachmentFactory.fromSource(source, \"yeah\", AttachmentImage.PNG);
dbTest.setAttachment(\"ID\", attach);
let attachments = dbTest.getAttachmentNames(\"ID\");
let attach = dbTest.getAttachment(\"ID\", \"yeah\");
removeAttachment(\"ID\",\"yeah\")
\n

Create view

\n
dbTest.createView({
    name: \"users\",
    revision: \"1\",
    map: (doc: User, emitter) => {
        if (doc.docType == \"USER\") {
            emitter.emit(doc.name.toLowerCase(), null);
        }
    }
})
\n

Query View

\n
let founded = dbTest.queryView(\"users\", { mapOnly: true });
founded = dbTest.queryView(\"users\", { mapOnly: true, startKey: \"user4\" });
founded = dbTest.queryView(\"users\", { mapOnly: true, endKey: \"user0\" });
founded = dbTest.queryView(\"users\", { mapOnly: true, startKeyDocID: \"ID4\" });
founded = dbTest.queryView(\"users\", { mapOnly: true, endKeyDocID: \"ID0\" });
founded = dbTest.queryView(\"users\", { mapOnly: true, descending: true });
founded = dbTest.queryView(\"users\", { mapOnly: true, limit: 2 });
founded = dbTest.queryView(\"users\", { mapOnly: true, skip: 3 });
founded = dbTest.queryView(\"users\", { mapOnly: true, keys: [\"user1\", \"user2\"] });
\n

Use compound keys

\n
dbTest.createView({
    name: \"users_compound\",
    revision: \"1\",
    map: (doc: User, emitter) => {
        if (doc.docType == \"USER\") { 
            emitter.emit([doc.getName().toLowerCase(), doc.group.name.toLowerCase(), doc.registerAt, doc.registerAtDate, doc.secure], null); 
        }
    }
})
\n

Use MapReduce

\n
dbTest.createView({
    name: \"users_bygroup\",
    revision: \"1\",
    map: (doc: User, emitter) => {
        if (doc.docType == \"USER\") {
            emitter.emit([doc.group.name, doc.getName().toLowerCase()], doc.name);
        }
    },
    reduce: (keys: any[], values: any[], rereduce: boolean) => {
        return values.length;
    }
});
\n

Group by levels

\n
let founded = dbTest.queryView(\"users_bygroup\", { mapOnly: false, groupLevel: 1 });
let groups = founded.getValues();
\n

Query Result manager

\n
let founded = dbTest.queryView(\"users_bygroup\", { mapOnly: false, groupLevel: 1 });
let groups = founded.getValues();
let value = founded.firstValue();
let docs = <User[]>founded.getDocuments();
let doc = founded.firstDocument();
let docIds = founded.getDocumentIds();
\n

Query all docs

\n
let founded = dbTest.queryAllDocuments({ mapOnly: true });
\n

Use LiveQuery

\n
let listener = { 
    onRows(rows: QueryResult) { 
    }
};
let live = dbTest.liveQuery(\"users_live\", { mapOnly: true }, l);
live.start();
live.waitForRows();
live.stop();
\n

Push Replication

\n
let url = \"http://localhost:4984/test/\";
let push = dbTest.createPushReplication(url);
push.setBasicAuthenticator(\"user\", \"password\");
dbTest.createFilter({
    name: \"filter\",
    filter: (doc: Revision<Document>, params: Map<string, any>) => {
        return doc.id == \"ID1\";
    }
});
push.setFilter(\"filter\");
let listener = {
    count: 0,
    onChange: (p) => {
        l.count = p.changesCount;
    }
};
push.addChangeListener(listener)
push.start();
\n

Pull replication

\n
let url = \"http://localhost:4984/test/\";
let pull = dbTest.createPullReplication(url);
pull.setBasicAuthenticator(\"user\", \"password\");
let pullCallback = {
    countEvent: 0,
    onChange: (p) => {
        pullCallback.countEvent++;
    }
}
pull.channels([\"channel4\"]);
pull.setDocIds([\"ID1\"]);
pull.addChangeListener(pullCallback);
pull.start();
\n

Conflict management

\n
let conflicts = dbTest.getConflicts(\"ID\");
let merged = mergeConflict(conflicts);
dbTest.resolveConflict(\"ID\", merged);
\n

Listen database events

\n
dbTest.addChangeListener({
    onChange:(params:DatabaseListenerParam[])=>{

    }
});
\n

Add any kind of attachment

\n
class CustomAttachment implements Attachment{
    getName() => {
        return name;//String
    },
    getStream () => {
        return bs;//InputStream or NSData
    },
    getType () => {
        return \"any/any\";//Content Type
    }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns7-swiss-army-knife":{"name":"ns7-swiss-army-knife","version":"1.0.0","license":"Apache-2.0","readme":"

@nativescript/swiss-army-knife

\n

support Nativescript 7

\n
ns plugin add @nativescript/swiss-army-knife
\n

Usage

\n

Common Functions

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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.

\n

dismissSoftKeyboard Dismiss the soft keyboard.

\n

ActionBar Utilities\nactionBarSetTitle Programmatically set title on ActionBar

\n

actionBarAddButton Programmatically add button to the ActionBar

\n

actionBarClearButtons Programmatically remove all buttons from the ActionBar

\n

Contributor\nhttps://github.com/JoshDSommer/nativescript-swiss-army-knife

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-complete-edit-text":{"name":"nativescript-auto-complete-edit-text","version":"1.1.8","license":"Apache-2.0","readme":"

NativeScript Auto Complete Edit Text

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@db3dev/flexwrap":{"name":"@db3dev/flexwrap","version":"1.0.2","license":"MIT","readme":"

FlexWrap an Angular 2 Wrapper For Flexbox

\n

I recommend this guide to familiarize yourself with the meanings to flexbox css and a better understanding on when you would want to use these directives.\nhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

\n

Usage

\n

To create a flexbox container use the "flex" attribute directive.\nTo create a flexbox item inside a flexbox container use the "flexItem" attribute directive.

\nExample Use

\n
<div flex flexJContent=\"center\">
  <div flexItem flexGrow=2>
    Test
  </div> <!-- flexbox Item -->
</div> <!-- flexbox container -->
\n

The flex Attribute Directive

\n

The flex attribute is used to define how to set 'flex-flow'.
\nBy default flex sets itself as 'row'. Optionally it can be configured to equal either:

\n\n

Also several optional attributes can be used...

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDefaultDescription
flexWrapFalse (nowrap)Can be true or false to toggle wrap/nowrap into the flex-flow style.
flexJContent'flex-start'Configures the justify-content style.
flexAItems'stretch'Configures the align-items style.
flexAContent'stretch'Configures the align-content style.
\n

The flexItem Attribute Directive

\n

The flexItem attribute is used to set the min-width, max-width and flex-basis styles. By default it is set to 'auto' but will take in any css string for sizing, such as '10px'.

\n

Also several optional attributes can be used...

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDefaultDescription
flexOffset'0%'Configures the 'margin-left' style with a css size string.
flexGrow0Takes in a number to configure the style flex-grow.
flexShrink1Takes in a number to configure the style flex-shrink.
flexASelfnullConfigures the style align-self.
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@billow/nsv-easy-nav":{"name":"@billow/nsv-easy-nav","version":"1.0.3","license":"MIT","readme":"

Nativescript Vue - Easy Nav

\n

First off this is not a replacement for VueRouter in NSV. A true router for NSV is still a ways off.

\n

Easy Nav is a simple wrapper for the built-in $navigateTo() functionality. This removes the need to import the component everytime you want to navigate to it and also allows you to interact with your routing layer in a more VueRouter like way.

\n

Installation

\n
npm i @billow/nsv-easy-nav
\n

Setup

\n
import Router from '@billow/nsv-easy-nav'

let routes = new Router({
  routes: [
    {
      name: 'welcome',
      component: Welcome
    }
  ]
})

// When the application comes out of a closed state, we need to determine which component 
// to render. If the user is not authenticated show the Welcome component and visa versa.
//
// Note: userIsAuthenticated is only an example, your application must handle authentication. 

let StartUpComponent = (userIsAuthenticated) ? Dashboard : Welcome

new Vue({

  router,
  
  render: h => h('frame', [h(StartUpComponent)]),

}).$start()
\n

Usage

\n
<StackLayout>
  <Button @tap=\"$router.go('dashboard')\">Dashboard</Button> // Navigates with history
  <Button @tap=\"$router.clear.go('dashboard')\">Dashboard</Button> // Navigates and clears back stack.
  <Button @tap=\"$router.go('user-edit', {
    userId: 1
  })\">Edit User</Button> // Props passed as second argument
  <Button @tap=\"$router.back()\">Back</Button> // Navigates with back stack
</StackLayout>
\n

Usage within instance.

\n

export default {

  methods: {
    goToDashboard() {
      this.$router.go('dashboard') // Navigates with history
    },
    
    editUser(userId) {
      this.$router.go('user-edit', { // Navigates with a prop passed as second argument
        userId
      })
    },
  }

}
\n

Go

\n

The go method accepts 3 arguments with a few defaults for Android.

\n
  go(name, props = {}, transitions = {
    android: {
      name: 'slide',
      curve: enums.AnimationCurve.ease
    }
  })
\n

Clear

\n

Typically paired with go(), this method accepts no arguements.

\n
  this.$router.clear.go()
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-drawer-template":{"name":"nativescript-angular-drawer-template","version":"2.0.0","license":"MIT","readme":"

Nativescript-Angular-Drawer-Template

\n

A starter template to quickly create nativescript angular projects with drawer pages.

\n

Usage

\n

tns create my-project-name --template nativescript-angular-drawer-template

\n

Preview

\n

Android

\n

\"android-preview\"

\n

iOS

\n

\"ios-preview\"

\n

How To Change Menu Items

\n

You can change the menu items of drawer from app/modules/shared/side-drawer-page/side-drawer-page.component.ts file as shown below:

\n
navMenu: any[] = [
    { name: 'Home', commands: ['/'] },
    { name: 'About', commands: ['/about'] },
    { name: 'Contact', commands: ['/contact'] }
];
\n

How To Create New Page

\n

You just need to wrap the content template of the new page inside <side-drawer-page> tag as shown below:

\n
<side-drawer-page>
    <GridLayout>
        <Label text=\"Hello World\"></Label>
    </GridLayout>
</side-drawer-page>
\n

You can refer home, contact or about sample modules for reference.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tobydeh/nativescript-segment":{"name":"@tobydeh/nativescript-segment","version":"1.1.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ios-working-with-sandbox-plugin":{"name":"ios-working-with-sandbox-plugin","version":"1.0.2","license":"Apache-2.0","readme":"

ios-working-with-sandbox-plugin

\n

Plugin used for testing sandbox-pod and pod support in nativescript-cli.\nThis plugin will try to create file called I_MADE_THIS_FILE.txt in <project_name>/platforms/app/ directory.\nThe build .ipa should contain this file.

\n

How to use

\n

NativeScript CLI:

\n

In your project execute:

\n
$ tns plugin add ios-working-with-sandbox-plugin
\n

or add the following entry in your package.json:

\n
\"dependencies\": {
\t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
}
\n

AppBuilder

\n

Add the following entry in your package.json:

\n
\"dependencies\": {
\t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
}
\n

AppBuilder CLI

\n

In your project execute:

\n
$ appbuilder plugin add ios-working-with-sandbox-plugin
\n

or add the following entry in your package.json:

\n
\"dependencies\": {
\t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
}
\n

Expected result when building the project

\n

NativeScript CLI

\n

In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file. The file should be created in <project_dir>/platforms/ios/<project_name>/app/.

\n

In case you open <cli_install_dir>/config/config.json and set USE_POD_SANDBOX to false, the build should do the same.

\n

AppBuilder

\n

In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file.\nThe build will fail in case this plugin is not whitelisted.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-rtl/ui":{"name":"@nativescript-rtl/ui","version":"0.2.2","license":"MIT","readme":"

@nativescript-rtl/ui

\n

Add right-to-left UI support to NativeScript framework

\n

Installation

\n

to install plugin write:

\n

NativeScript 7 and higher

\n
tns plugin add @nativescript-rtl/ui
\n

Support NativeScript older then version 7

\n
tns plugin add @nativescript-rtl/ui@0.1.7
\n

Preview

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LTRLayoutRTL
\"screenshotAbsoluteLayout\"screenshot
\"screenshotDockLayout\"screenshot
\"screenshotGridLayout\"screenshot
\"screenshotStackLayout\"screenshot
\"screenshotWrapLayout\"screenshot
\n

Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefaultDescription
isRtltrueisRtl use to change layout direction by default is true that mean layout from right to left but you can change it to false that change layout direction from left to right
\n

CSS Properties

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefaultDescription
directionrtluse to change layout direction by default is rtl that mean layout from right to left but you can change it to ltr that change layout to direction from left to right
\n

How to use

\n

declare plugin in XML then use it.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:rtl=\"@nativescript-rtl/ui\">
  <rtl:WrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\">
    <Label text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"/>
    <Label text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"/>
    <Label text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"/>
    <Label text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"/>
  </rtl:WrapLayout>
</Page>
\n

For Angular/Vue 'registerElement` must be used to register each RTL element

\n

example:\nregister elements in app.module.ts

\n
import { registerElement } from \"nativescript-angular/element-registry\";
registerElement(
  \"RGridLayout\",
  () => require(\"@nativescript-rtl/ui\").GridLayout
);
registerElement(
  \"RWrapLayout\",
  () => require(\"@nativescript-rtl/ui\").WrapLayout
);
registerElement(
  \"RAbsoluteLayout\",
  () => require(\"@nativescript-rtl/ui\").AbsoluteLayout
);
registerElement(
  \"RDockLayout\",
  () => require(\"@nativescript-rtl/ui\").DockLayout
);
registerElement(
  \"RStackLayout\",
  () => require(\"@nativescript-rtl/ui\").StackLayout
);
\n

now you can use RGridLayout, RWrapLayout, RAbsoluteLayout, RDockLayout and RStackLayout in your angular project

\n

example:

\n
  <RWrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\">
    <Label text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"></Label>
    <Label text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"></Label>
    <Label text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"></Label>
    <Label text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"></Label>
  </RWrapLayout>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"popup-shashanka-sap":{"name":"popup-shashanka-sap","version":"1.0.0","license":"Apache-2.0","readme":"

@myscope/popup-shashanka

\n
ns plugin add @myscope/popup-shashanka
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/test2":{"name":"@jcassidyav/test2","version":"1.0.1","license":"Apache-2.0","readme":"

@jcassidyav/test2

\n
ns plugin add @jcassidyav/test2
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dom-free":{"name":"nativescript-dom-free","version":"2.0.6","license":"Unsupported","readme":"

Free version for nativescript-dom (renamed to nativescript-dom-free)

\n

A rather maintained version of nativescript-dom. This is simply a fork of nativescript-dom which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

\n

To use this, simply install with NPM using:

\n

npm install nativescript-dom-free

\n

All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-authentication":{"name":"nativescript-authentication","version":"1.0.4","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-urihandler":{"name":"tns-urihandler","version":"1.0.1","license":"MIT","readme":"

tns-urihandler

\n

A NativeScript Module for inner-app communication URI handling

\n

How to custom scheme in NativeScript Projects

\n

Android
\nAdd following code to your AndroidManifest.xml, where you can find through /app/App_Resources/Android/AndroidManifest.xml

\n
<activity android:launchMode=\"singleTop\">

    <!-- Copy from here -->
    <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\"/>
        <category android:name=\"android.intent.category.BROWSABLE\" />
        <data android:scheme=\"yourscheme\" />
    </intent-filter>
    <!-- Copy end here -->

</activity>
\n

NOTE: the attribute android:launchMode="singleTop" prevent OS start multiple activities.

\n

iOS
\nAdd following code to your Info.plist, where you can find it in /app/App_Resources/iOS/Info.plist

\n
<dict>
    <!-- Copy from here -->
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>your.app.id</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>yourscheme</string>
            </array>
        </dict>
    </array>
    <!-- Copy end here -->
</dict>
\n

NOTE: After modified AndroidManifest.xml or Info.plist, please remove the entire platform and re-add the platform. This is also recommended by official document.

\n

How to install Plugin?

\n

Run command

\n
    tns plugin add tns-urihandler
\n

or

\n
    tns plugin add tns-urihandler-1.0.0.tgz
\n

How to use Plugin?

\n

imcoming URI: myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment

\n
    import { URIHandler } from 'tns-urihandler';

    export class MyApp{
        foo(): void{
            let uriHandler = new URIHandler();
            console.log(uriHandler.getURI()); // myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment
        }
    }
\n

APIs

\n
    uriHandler.getURI();            // myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment
    uriHandler.getHost();           // home
    uriHandler.getFragment();       // fragment
    uriHandler.getScheme();         // myapp
    uriHandler.getQuery();          // from=anotherApp
    uriHandler.getPath();           // path/to/my/page
    uriHandler.getUser();           // Jacky (if there's any Username)
    uriHandler.getPassword();       // Passw0rd (if there's any Password)

    // experimental function, returns object
    uriHandler.search();            // { form: 'antherApp' }
\n

Thanks

\n

I would like to thank hypery2k's nativescript-urlhandler.\nMy inspiration comes from his great work.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unimag":{"name":"nativescript-unimag","version":"1.1.1","license":"MIT","readme":"

Develop a NativeScript plugin

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. cd myplugin
    3. \n
  3. npm run postclone
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-unimag-swiper
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Unittesting

\n

This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API execute one of these commands in the plugin root:

\n
npm run test.ios
npm run test.android
\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"helloworld_shashanka":{"name":"helloworld_shashanka","version":"1.0.2","license":"Apache-2.0","readme":"

@myscope/helloworld

\n
ns plugin add @myscope/helloworld
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/template-snippet":{"name":"@nativescript-community/template-snippet","version":"1.1.13","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-google-login":{"name":"@bigin/ns-google-login","version":"1.0.2","license":"Apache-2.0","readme":"

@bigin/ns-google-login

\n
ns plugin add @bigin/ns-google-login
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"timeline-checking":{"name":"timeline-checking","version":"1.0.0","license":"Apache-2.0","readme":"

@errorgod/timeline

\n
ns plugin add @errorgod/timeline
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardreader":{"name":"nativescript-cardreader","version":"1.1.3","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/app-dynamics":{"name":"@skhye05/app-dynamics","version":"1.0.3","license":"Apache-2.0","readme":"

@skhye05/app-dynamics

\n
ns plugin add @skhye05/app-dynamics
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-acs-usb":{"name":"nativescript-acs-usb","version":"1.0.1","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-arduino-usb":{"name":"nativescript-arduino-usb","version":"1.0.1","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xutodra/nativescript-mobile-pubnub":{"name":"@xutodra/nativescript-mobile-pubnub","version":"1.0.3","license":"Apache-2.0","readme":"

@xutodra/nativescript-mobile-pubnub

\n
ns plugin add @xutodra/nativescript-mobile-pubnub
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/openapp":{"name":"@carployee/openapp","version":"1.0.1","license":"Apache-2.0","readme":"

NativeScript Open App plugin

\n

A NativeScript plugin for opening other applications on the device (with app store fallback)

\n

Reference

\n

This plugin is a copy of https://github.com/ludwiktrammer/nativescript-open-app\nYou can find more examples there. The API did not change, only the way you import the function (see below)

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add @carployee/openapp
\n

Usage

\n

Android

\n

To open an app, you need its id (for example "com.facebook.katana" for Facebook and "com.twitter.android" for Twitter).\nYou can easily find it in app's URL on https://play.google.com.

\n

Examples

\n
import { OpenApp } from '@carployee/openapp';

OpenApp.open('message://');
\n

iOS

\n

To open an app on iOS you need a schema registered by the app.\nAdditionally you are required to whitelist the schemas for all apps you want to be able to open. Add them to your app/App_Resources/iOS/Info.plist (and additionally include "itms-apps" schema used by the App Store):

\n
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>itms-apps</string>
    <string>twitter</string>
  </array>
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-facebook":{"name":"nativescript-plugin-facebook","version":"2.2.1","license":"Apache 2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-awesome-webview-with-custom-menu-items":{"name":"nativescript-awesome-webview-with-custom-menu-items","version":"70.1.1","license":"Apache-2.0","readme":"

nativescript-awesome-webview-with-custom-menu-items

\n\n

A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

\n\n

Prerequisites / Requirements

\n

As of now, there aren't any prerequisites. This should work with any device, any OS.

\n

Installation

\n

For tns projects (Angular, Typescript, Javascript)

\n
tns plugin add nativescript-awesome-webview-with-custom-menu-items
\n

For vue-cli projects (Nativescript-Vue)

\n
npm install nativescript-awesome-webview-with-custom-menu-items
\n

Usage

\n

Require

\n

Javascript -

\n
const {init, openWebView} = require('nativescript-awesome-webview-with-custom-menu-items');
\n

Typescript -

\n
import {init, openWebView} from 'nativescript-awesome-webview-with-custom-menu-items';
\n

1. Initialise (optional, only Android)

\n
init()
\n

NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

\n

Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

\n

2. Open an URL

\n
    openWebView({
      url: 'http://google.com',
      toolbarColor: '#2277aa',
      toolbarControlsColor: '#eebb99'
    });
\n

openWebView options

\n

AwesomeWebviewOptions structure (the object you pass into openWebView)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
urlrequiredThe URL to open
showTitlefalseShows title bar in the webview
toolbarColorundefinedColor of the toolbar
toolbarControlsColorundefined(only iOS) color of buttons on toolbar
isClosedundefinedcallback function that will be called when webview is closed
\n

License

\n

This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

\n
Apache License Version 2.0, January 2004\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-utilities":{"name":"nativescript-utilities","version":"0.1.0","license":"MIT","readme":"

nativescript-utilities

\n

A (currently small) collection of reusable NativeScript utility classes and functions.

\n

Usage

\n

Check out the API docs for the current utilities' documentation. Every class and function can be imported by name:

\n
import { Logger, convertUint8ArrayToReference } from 'nativescript-utilities';


try {
    let bytesReference = convertUint8ArrayToReference(new Uint8Array([ 0x90, 0xC3, 0xFF ]));
    // Do something with the interop.Reference instance, like pass it to some native C library.
} catch (error) {
    logger.error(`Something happened while trying to send the buffer.`, { error });
}
\n

building

\n

This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

\n
npm run build
\n

There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

\n

linting

\n
npm run lint
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-sweet-alert":{"name":"ns-sweet-alert","version":"1.1.3","license":{"type":"MIT","url":"https://github.com/tomasdv2@gmail.com/nativescript-alert-sweet-ns/blob/master/LICENSE"},"readme":"

ns-sweet-alert

\n

an implementation of sweet alert dialog for nativescript

\n

Fill in a little about your plugin!

\n

License

\n

This plugin is licensed under the MITlicense by Tomas

\n

Based on

\n

Android: sweet-alert-dialog by @pedant\niOS: (wip) SweetAlert-iOS by @codestergit

\n

Current State

\n

For now you can do not so many things but i will be adding new stuff in the next days.

\n

Installation

\n

To install type

\n
tns plugin add ns-sweet-alert
\n

Usages

\n

Once added into the project\nIn your main-page.js like file do something like this

\n
var app = require('application');
var SweetAlert = require('ns-sweet-alert');

var alertNice = function() {
  SweetAlert.simpleAlert(app.android.foregroundActivity).setTitleText(\"hey!\").setContentText(\"this is a sweetmessage\");
}

var inError = function(args) {
  SweetAlert.errorAlert(app.android.foregroundActivity).setTitleText(\"Oops!\").setContentText(args);
}

exports.alertNice = alertNice;
exports.inError = inError;
\n

Current Types

\n
simpleAlert(context)
errorAlert(context)
warningAlert(context)
successAlert(context)

//you can use various methods with the dialog result
.setTitleText
.setContentText
.setConfirmText
\n

I will be continue adding more things, like iOS support sometime this week!

\n

And that's it!

\n

Enjoy it.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-material":{"name":"tns-material","version":"1.1.4","license":"MIT","readme":"

TNS MATERIAL

\n

MaterialUi for Nativescript Angular

\n

Screenshot

\n

\"ezgif

\n

Installation

\n

Run the following command from the root of your project:

\n
tns plugin add tns-material
\n

or

\n
npm i tns-material
\n

This command automatically installs the necessary files, as well as stores tns-material as a dependency in your project's package.json file.

\n

Configuration

\n

There is no additional configuration needed!

\n

API

\n

Events

\n\n

Usage

\n

You need to add FloatTextFieldModule to your page module, and then simply use <FloatTextField></FloatTextField>

\n

<FloatTextField hint=\"EMAIL\" focusColor=\"#4286f4\"></FloatTextField>
<FloatTextField hint=\"EMAIL\" focusColor=\"#4286f4\" secure=\"true\"></FloatTextField>

<FloatTextField [(model)]=\"name\" (messageChange)=\"name=$event\"></FloatTextField>
\n\n
//......
import { FloatTextFieldModule } from \"tns-material\";

@NgModule({
  //......
  imports: [
    //......
    FloatTextFieldModule
    //......
   ],
   //......
})
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ftp-client":{"name":"nativescript-ftp-client","version":"1.0.2","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/uuid":{"name":"@carployee/uuid","version":"1.0.1","license":"Apache-2.0","readme":"

@nativescript/uuid

\n
ns plugin add @nativescript/uuid
\n

This is a working NS8 version of https://github.com/owen-it/nativescript-uuid

\n

Usage

\n

JavaScript

\n
const nsUuid = require('nativescript-uuid');

const uuid = nsUuid.getUUID();
console.log(`The device UUID is ${uuid}`);
\n

TypeScript

\n
import { getUUID } from 'nativescript-uuid';

const uuid = getUUID();
console.log(`The device UUID is ${uuid}`);
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-rotors":{"name":"nativescript-custom-rotors","version":"0.0.3","license":"Apache-2.0","readme":"

nativescript-custom-rotors

\n
ns plugin add nativescript-custom-rotors
\n

Nativescript Custom Rotors

\n

The nativescript-custom-rotors adds easy to use properties to common {N} views to make them accessible to iOS Accessibility Custom Rotors. Accessibility Custom Rotors provide an elegant solution for screen-reader assisted navigation by associating views from various containers and geographies into a common a11y accessible group. Please see this video from Apple WWDC2020 for more information on iOS Accessibility Custom Rotors

\n

NOTE: this plugin ONLY works on iOS. In android, the plugin functionality is ignored.

\n

Expanded Classes

\n

ViewBase has been expanded with the following interface:

\n
interface RotorGroupItem {
  /**
   * @property rotorGroup
   * the name of the group that this view belongs to
  */
  rotorGroup:string;
  /**
   * @property rotorOrder
   * order within the rotor group. defaults to -1
  */
  rotorOrder:number;
}
\n

ContentView and BaseLayout have been expanded with the following interface:

\n
interface RotorContainerView {
  /**
   * @property rotorContainer
   * set the view as a RotorContainer
  */
  rotorContainer: boolean;
  /**
   * rotorGroups
   * a map<string,Array<View>> of rotor names and associated views
  */
  rotorGroups: any;
  /**
   * rotorGroupCallback
   * a map<string,Callback> of rotor names and callbacks to execute 
  */
  rotorGroupCallbacks: Map<string, Callback>;
  /**
   * @function removeRotorItem
   * removes a view from it's rotor group
  */
  removeRotorItem: (item: ViewBase) => boolean;
  /**
   * @function insertRotorItem
   * inserts an item into a rotor group at a specified index
  */
  insertRotorItem: (item: ViewBase, index?: number) => boolean;
  /**
   * @function addRotorGroup
   * adds a rotor group to a container
  */
  addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
}
\n

Usage

\n

initialize the custom-rotors plugin in\napp.ts:

\n
...
import {initCustomRotors} from 'nativescript-custom-rotors'
initCustomRotors();
...
Application.run(...);
\n

then set a ContentView or a BaseLayout as a rotorContainer:

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
...
</Page>
\n

or, in code:

\n
export function navigatingTo(e:NavigatedData):void {
  const page = e.object as Page;
  page.rotorContainer = true;
}
\n

The @nativescript/custom-rotor plugin will traverse the children of the container to create and add elements to specified groups:

\n
...
  <Button text=\"Group1 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
  <Button text=\"Group1 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
  <Button text=\"Group2 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
  <Button text=\"Group2 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
...
\n

Custom elements will also be traversed, so you don't need to specify rotor groups all in one .xml or .ts/.js file.

\n

Advanced Usage

\n

Individual elements can be part of their own rotor group, and custom handling can be provided to the CustomRotor. Consider a widget used to provide a rating for an item (inspired by this tutorial on ios CustomRotors.

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
...
<GridLayout id=\"rating-bar\" rows=\"90, *\" columns=\"*,*,*,*,*\" accessible=\"true\" rotorGroup=\"rating\" row=\"1\" col=\"1\">
  <GridLayout class='rating-item' row=\"1\" col=\"0\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"1\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"1\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"2\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"2\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"3\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"3\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"4\" />
  </GridLayout>
  <GridLayout class='rating-item' row=\"1\" col=\"4\">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"5\" />
  </GridLayout>
  <Label class='rating-desc' color=\"blue\" text=\"dial rotor to 'rating' then flick up and down to change the rating\" row=\"0\" col=\"0\" colSpan=\"5\" textWrap=\"true\"/>
</GridLayout>
...
</Page>
\n

The rating rotor group functionality can be handled using something like this:

\n
export function navigatingTo(d: NavigatedData): void {
  const page = d.object as Page;
  page.rotorGroupCallbacks.set('rating', ({ forward }) => {
    incrementOrDecrementRating(page, forward);
  });
}

let rating = 0;
function incrementOrDecrementRating(page: Page, increment: boolean): void {
  rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
  const ratingBar = page.getViewById('rating-bar') as GridLayout;
  for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
    const view = ratingBar.getChildAt(i);
    view.backgroundColor = i < rating ? 'green' : 'transparent';
  }
}
\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@freevse/nativescript-blufi":{"name":"@freevse/nativescript-blufi","version":"1.0.1","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-jest":{"name":"nativescript-vue-jest","version":"3.0.4","license":"MIT","readme":"

nativescript-vue-jest

\n

Jest Vue transformer with source map support and Nativescript support. Fork of vue-jest.

\n

This transformer defaults to web templates. To change that, change globals.vue-jest.platform to the desired platform.

\n
\n

NOTE: This is documentation for vue-jest@3.x. View the vue-jest@2.x documentation

\n
\n

Usage

\n
npm install --save-dev nativescript-vue-jest
\n

Setup

\n

To define nativescript-vue-jest as a transformer for your .vue files, map them to the nativescript-vue-jest module:

\n
{
  \"jest\": {
    \"transform\": {
      \"^.+\\\\.vue$\": \"nativescript-vue-jest\"
    }
}
\n

A full config will look like this.

\n
{
  \"jest\": {
    \"moduleFileExtensions\": [
      \"js\",
      \"json\",
      \"vue\"
    ],
    \"transform\": {
      \"^.+\\\\.js$\": \"babel-jest\",
      \"^.+\\\\.vue$\": \"nativescript-vue-jest\"
    }
  }
}
\n

If you're on a version of Jest older than 22.4.0, you need to set mapCoverage to true in order to use source maps.

\n

Example Projects

\n

Example repositories testing Vue components with jest and vue-jest:

\n\n

Supported langs

\n

nativescript-vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. Currently, SCSS, SASS and Stylus are the only style languages that are compiled.

\n

Supported script languages

\n\n

Global Jest options

\n

You can change the behavior of nativescript-vue-jest by using jest.globals.

\n
\n

Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a .js file

\n
\n

babelConfig

\n

Provide babelConfig in one of the following formats:

\n\n
Boolean
\n\n
\n

This is the default behavior if babelConfig is not defined.

\n
\n\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"babelConfig\": false
      }
    }
  }
}
\n
Object
\n

Provide inline Babel options:

\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"babelConfig\": {
          \"presets\": [
            [
              \"env\",
              {
                \"useBuiltIns\": \"entry\",
                \"shippedProposals\": true
              }
            ]
          ],
          \"plugins\": [
            \"syntax-dynamic-import\"
          ],
          \"env\": {
            \"test\": {
              \"plugins\": [
                \"dynamic-import-node\"
              ]
            }
          }
        }
      }
    }
  }
}
\n
String
\n

If a string is provided, it will be an assumed path to a babel configuration file (e.g. .babelrc, .babelrc.js).

\n\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"babelConfig\": \"path/to/.babelrc.js\"
      }
    }
  }
}
\n

To use the Config Function API, use inline options instead. i.e.:

\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"babelConfig\": {
          \"configFile\": \"path/to/babel.config.js\"
        }
      }
    }
  }
}
\n

tsConfig

\n

Provide tsConfig in one of the following formats:

\n\n
Boolean
\n\n
\n

This is the default behavior if tsConfig is not defined.

\n
\n\n
Object
\n

Provide inline TypeScript compiler options:

\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"tsConfig\": {
          \"importHelpers\": true
        }
      }
    }
  }
}
\n
String
\n

If a string is provided, it will be an assumed path to a TypeScript configuration file:

\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"tsConfig\": \"path/to/tsconfig.json\"
      }
    }
  }
}
\n

Supported template languages

\n\n

Supported style languages

\n\n

CSS options

\n

experimentalCSSCompile: Boolean Default true. Turn off CSS compilation\nhideStyleWarn: Boolean Default false. Hide warnings about CSS compilation\nresources:

\n
{
  \"jest\": {
    \"globals\": {
      \"vue-jest\": {
        \"hideStyleWarn\": true,
        \"experimentalCSSCompile\": true
      }
    }
  }
}
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-font-scale":{"name":"nativescript-font-scale","version":"1.1.4","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@schoolsquirrel/letter-avatar":{"name":"@schoolsquirrel/letter-avatar","version":"1.0.0","license":"MIT","readme":"

@schoolsquirrel/letter-avatar

\n

\"Build\" \"GitHub \"Maintenance\"

\n

With this plugin you can create beautiful looking letter avatars in your nativescript app!

\n

\"picture

\n

Limitation

\n

This plugin only supports NativeScript 7 or higher. In case you need to use an older NativeScript version, have a look at this archived repository.

\n

Installation

\n

Install the plugin from using ns plugin add @schoolsquirrel/letter-avatar.

\n

Usage

\n

NativeScript Core:

\n

Define the namespace

\n
<Page class=\"page\"
    loaded=\"pageLoaded\"
    navigatingTo=\"onNavigatingTo\" 
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:ns=\"@schoolsquirrel/letter-avatar\">
\n

Use the plugin:

\n
<ns:LetterAvatar id=\"myAvatar\" text=\"AB\"></ns:LetterAvatar>
\n

You can also add custom styles:

\n
<ns:LetterAvatar color=\"blue\" padding=\"5\" borderRadius=\"7\" id=\"myAvatar\" text=\"AB\"></ns:LetterAvatar>
\n
\n

Unfortunately, CSS properties are not supported.

\n
\n

For more info and examples check out the demo folder.

\n

Angular Version:

\n

In your app.module.ts include the library like so:

\n
import { LetterAvatarModule } from \"@schoolsquirrel/letter-avatar/angular\";
\n

and add it to the imports array:

\n
@NgModule({
    bootstrap:  [
        ...
    ],
    declarations: [
        ...
    ],
    imports: [
        ...
        LetterAvatarModule, // <--- add this here
    ],
    schemas: [
        ...
    ],
})
export class AppModule { }
\n

The use it in your .html file:

\n
<LetterAvatar text=\"AB\"></LetterAvatar>
\n

You can add custom styles:

\n
<LetterAvatar color=\"blue\" padding=\"5\" borderRadius=\"7\" text=\"AB\"></LetterAvatar>
\n
\n

Unfortunately, CSS properties are not supported.

\n
\n

For more info and examples check out the demo and the demo-angular folder.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appsee":{"name":"nativescript-appsee","version":"1.0.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unimag-swiper":{"name":"nativescript-unimag-swiper","version":"1.0.0","license":"MIT","readme":"

Develop a NativeScript plugin

\n

Getting started

\n
    \n
  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
    2. \n
  2. cd myplugin
    3. \n
  3. npm run postclone
    4. \n
  4. npm run setup
    5. \n
  5. Get to work.
    6. \n
\n

This seed expands on several things presented here.

\n

Usage

\n

The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

\n

Linking to CocoaPod or Android Arsenal plugins

\n

You will want to create these folders and files in the root:

\n
platforms --
  ios --
    Podfile
  android --
    include.gradle
\n

Doing so will open up those native apis to your plugin :)

\n

Take a look at these existing plugins for how that can be done very simply:

\n\n

Typical development workflow:

\n
    \n
  1. Make changes to plugin files
    2. \n
  2. Make changes in demo that would test those changes out
    3. \n
  3. npm run demo.ios or npm run demo.android (must be run from the root directory)
    4. \n
\n

Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

\n
cd demo

// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
tns plugin remove nativescript-unimag-swiper
tns plugin add ..

// manual platform adds
tns platform add ios
// and/or
tns platform add android
\n

Then use any of the available options from the tns command line:

\n\n

Unittesting

\n

This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

\n

You can read more about this topic here.

\n

Once you're ready to test your plugin's API execute one of these commands in the plugin root:

\n
npm run test.ios
npm run test.android
\n

Publish

\n

When you have everything ready to publish:

\n\n

Contributing - Want to make the seed better?

\n

Or at least help keep it up to date with NativeScript releases, which would be excellent.

\n
npm install -g typescript  // if you don't already have it
git clone https://github.com/NathanWalker/nativescript-plugin-seed
cd nativescript-plugin-seed

// Improve!
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tslib":{"name":"nativescript-tslib","version":"1.9.1-r1","license":"Apache-2.0","readme":"

tslib for nativescript

\n

tslib is a runtime library for TypeScript that contains all of the TypeScript helper functions.

\n

Unfortunately just importing tslib breaks NativeScript projects.

\n

This plugin solves this issue.

\n

Usage

\n

Install module

\n
npm i --save nativescript-tslib
\n

Edit: app/main.ts

\n
import 'nativescript-tslib'; // <-- Add this

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from 'nativescript-angular/platform';

import { AppModule } from './app.module';

// A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page.
// Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers.
// A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic,
// that sets up a NativeScript application and can bootstrap the Angular framework.
platformNativeScriptDynamic().bootstrapModule(AppModule);
\n

You can enable importHelpers in tsconfig.json, but you might break your app if you extend native-classes.

\n

Alternative

\n

You can set tsconfig.json target to es6, but when you can't extend native classes in your project.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-fileshare":{"name":"nativescript-simple-fileshare","version":"1.0.0","license":"MIT","readme":"

NativeScript Simple File Share Plugin

\n

Installation

\n
tns plugin add nativescript-simple-fileshare
\n

Usage

\n
    const shareFile = new ShareFile();
    shareFile.open({
        path: pathToFile,
        options: true,
        animated: true
    });
\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/menu":{"name":"@carployee/menu","version":"1.0.1","license":"Apache-2.0","readme":"

@carployee/menu

\n
ns plugin add @carployee/menu
\n

This plugin is an NS8 version of https://github.com/xlmnxp/nativescript-menu/blob/master/README.md\nAll credits to @xlmnxp

\n

A plugin that adds a pop-up menu to NativeScript

\n

Installation

\n

Demo

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AndroidiOS
\"screenshot\"screenshot
\n

Usage

\n

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
  xmlns:ui=\"nativescript-menu\">
  <StackLayout class=\"p-20\">
    <Button id=\"menuBtn\" text=\"getMenu\" tap=\"{{ buttonTap }}\"/>
  </StackLayout>
</Page>
\n
import { Menu } from 'nativescript-menu';

export class HelloWorldModel extends Observable {
\tpublic message: string;
\tprivate menu: Menu;

\tconstructor(public page: Page) {
\t\tsuper();
\t}

\tbuttonTap() {
\t\tMenu.popup({
\t\t\tview: this.page.getViewById('menuBtn'),
\t\t\tactions: ['Example', 'NativeScript', 'Menu'],
\t\t})
\t\t\t.then((action) => {
\t\t\t\talert(action.id + ' - ' + action.title);
\t\t\t})
\t\t\t.catch(console.log);
\t}
}
\n

with custom options

\n
import { Menu } from 'nativescript-menu';

export class HelloWorldModel extends Observable {
\tpublic message: string;
\tprivate menu: Menu;

\tconstructor(public page: Page) {
\t\tsuper();
\t}

\tbuttonTap() {
\t\tMenu.popup({
\t\t\tview: this.page.getViewById('menuBtn'),
\t\t\tactions: [
\t\t\t\t{ id: 'one', title: 'Example' },
\t\t\t\t{ id: 'two', title: 'NativeScript', customOption: 'Hello' },
\t\t\t\t{ id: 'three', title: 'Menu' },
\t\t\t],
\t\t})
\t\t\t.then((action) => {
\t\t\t\talert(JSON.stringify(action));
\t\t\t})
\t\t\t.catch(console.log);
\t}
}
\n

API

\n\n
export interface MenuOptions {
\ttitle?: string; // IOS Only
\tmessage?: string; // IOS Only
\tview: View;
\tactions: object[] | string[];
\tcancelButtonText?: string; // IOS Only
}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
popup(options: MenuOptions): Promise<{id: number, title: string} | actionObject | boolean>Create a pop-up menu and show it
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssoauth":{"name":"nativescript-ssoauth","version":"1.0.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-syntax-highlighter":{"name":"nativescript-syntax-highlighter","version":"4.0.0-alpha.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stario":{"name":"nativescript-stario","version":"1.0.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-shadow":{"name":"nativescript-ng-shadow","version":"2.1.0","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas":{"name":"nativescript-canvas","version":"3.0.10","license":"Apache-2.0","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-oauth":{"name":"@bigin/ns-oauth","version":"1.0.5","license":"Apache-2.0","readme":"

@bigin/ns-oauth

\n
ns plugin add @bigin/ns-oauth
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"native-autocomplete":{"name":"native-autocomplete","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/triniwiz/nativescript-autocomplete/blob/master/LICENSE"},"readme":"

Autocomplete for NativeScript

\n

I copied it from https://github.com/triniwiz/nativescript-autocomplete

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@schoolsquirrel/emoji-picker":{"name":"@schoolsquirrel/emoji-picker","version":"1.1.0","license":"Apache-2.0","readme":"

@schoolsquirrel/emoji-picker😃

\n

\"Build\" \"GitHub \"Maintenance\"

\n

There are many emoji pickers for Angular and the web, but no one for NativeScript?! Let's change this!

\n

How it looks like

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Keyboard viewEmoji picker view
\"screenshot\"screenshot
\n

Limitation

\n

The emoji picker currently only supports Android and NativeScript 7 or higher. In case you need to use an older NativeScript version, have a look at the old branch.

\n

Installation

\n

Install the plugin using ns plugin add @schoolsquirrel/emoji-picker

\n

Usage

\n

How does it work?

\n

This plugin will give you two elements, EmojiPicker and EmojiLabel. The first one will give you an editable textfield (very similar to the NativeScript TextView) and the second one is a label (similar to NativeScript Label), which will display your text with emojis correctly.

\n

NativeScript Core:

\n

Define the namespace

\n
<Page class=\"page\"
    loaded=\"pageLoaded\"
    navigatingTo=\"onNavigatingTo\"
    xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:ns=\"@schoolsquirrel/emoji-picker\">
\n

Use the plugin:

\n
<ns:EmojiPicker id=\"myEmojiPicker\"></ns:EmojiPicker>
<ns:EmojiLabel id=\"myEmojiLabel\"></ns:EmojiLabel>
\n

On the JS / TS Side you can toggle the keyboard or the popup window of the edit text field like this:

\n
const page = frame.Frame.topmost().currentPage;
page.getViewById('myEmojiPicker').togglePopup();
\n

The <EmojiPicker> class extends the TextField NativeScript class, which means that all of TextField's properties and methods are supported.\nIt is the same with <EmojiLabel> and the Label class.

\n

You can add custom styles by using ids, classes or the tag selector in (s)css:

\n
EmojiLabel {
\tbackground-color: rgba(14, 190, 221, 0.233);
\tpadding: 10;
\ttext-align: center;
\tfont-size: 20;
}

EmojiPicker {
\tpadding: 30;
\tcolor: green;
\tmargin: 20;
}
\n

For more info and examples check out the demo folder.

\n

Angular Version:

\n

In your app.module.ts include the library like so:

\n
import { EmojiPickerModule } from '@schoolsquirrel/emoji-picker/angular';
\n

and add it to the imports array:

\n
@NgModule({
    bootstrap:  [
        ...
    ],
    declarations: [
        ...
    ],
    imports: [
        ...
        EmojiPickerModule, // <--- add this here
    ],
    schemas: [
        ...
    ],
})
export class AppModule { }
\n

The use it in your .html file:

\n
<EmojiPicker #myEmojiPicker></EmojiPicker> <EmojiLabel #myEmojiLabel text=\"Have fun with @schoolsquirrel/emoji-picker\"></EmojiLabel>
\n

On the TS Side you can toggle the keyboard or the popup window of the edit text field like this:

\n
export class HomeComponent {
\t@ViewChild('myEmojiPicker', { static: false }) public myEmojiPicker: EmojiPicker;
\t@ViewChild('myEmojiLabel', { static: true }) public myEmojiLabel: EmojiLabel;

\tpublic onButtonTap(): void {
\t\tthis.myEmojiPicker.nativeElement.togglePopup();
\t}

\tpublic onCopyBtnTap(): void {
\t\tconsole.log('pressed!');
\t\tthis.myEmojiLabel.nativeElement.text = this.myEmojiPicker.nativeElement.text;
\t}
}
\n

The <EmojiPicker> class extends the TextField NativeScript class, which means that all of TextField's properties and methods are supported.\nIt is the same with <EmojiLabel> and the Label class.

\n

You can add custom styles by using ids, classes or the tag selector in (s)css:

\n
EmojiLabel {
\tbackground-color: rgba(14, 190, 221, 0.233);
\tpadding: 10;
\ttext-align: center;
\tfont-size: 20;
}

EmojiPicker {
\tpadding: 30;
\tcolor: green;
\tmargin: 20;
}
\n

For more info and examples check out the demo and the demo-angular folder.

\n

License

\n

MIT

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-browser-polyfill":{"name":"nativescript-browser-polyfill","version":"1.0.0-alpha8","license":"Apache-2.0","readme":"

nativescript-browser-polyfill

\n

Browser polyfill for NativeScript

\n

Installation

\n
npm i nativescript-browser-polyfill
\n

Usage

\n

Import the library into your JavaScript file:

\n
import 'nativescript-browser-polyfill';
\n

Implements

\n

DOM

\n

DOM is provided with very low support, these are used for libs like pixi.js that validate type.

\n
class Node
class Element
class Document
class HTMLImageElement
class Image
class ImageBitmap
class HTMLVideoElement
class Video
class HTMLCanvasElement
class Canvas
\n

Image, HTMLImageElement, ImageBitmap

\n

Image has support for loading callbacks, however the loaded uri must be passed to the src already.

\n
const image = new Image();
image.src = '';
image.onload = () => {
  const { src, width, height } = image;
};
image.addEventListener('loading', () => {});
image.addEventListener('error', () => {});
\n

Document

\n
const element = document.createElement('div');
const fakeContext = element.getContext('');
\n

Element

\n

All sizes return the window size:

\n
element.clientWidth;
element.clientHeight;
element.innerWidth;
element.innerHeight;
element.offsetWidth;
element.offsetHeight;
\n

Empty attributes that prevent libraries from crashing

\n
element.tagName;
element.addEventListener;
element.removeEventListener;
element.setAttributeNS;
element.createElementNS;
\n

Node

\n
node.ownerDocument;
node.className;
node.appendChild;
node.insertBefore;
node.removeChild;
node.setAttributeNS;
node.getBoundingClientRect;
\n

Debug flags

\n

For debugging base64 image transformations toggle:

\n
global.__debug_browser_polyfill_image = true;
\n

By default global.__debug_browser_polyfill_image is false.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vosk":{"name":"nativescript-vosk","version":"0.3.33","license":"Apache 2.0","readme":"

NativeScript Speech Recognition with Vosk Library

\n

This is a plugin for offline speech recognition in NativeScript library using Vosk library.

\n

See the demo in action.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"petfinder-angular-service":{"name":"petfinder-angular-service","version":"1.0.3","license":"ISC","readme":"

petfinder-angular-service

\n

Setup

\n

In order to make the service work you need to add an HttpModule to your @NgModule imports.

\n

For NativeScript use NativeScriptHttpClientModule

\n
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
\n
@NgModule({
  ...
  imports: [
    ...
    NativeScriptHttpClientModule
  ],
\n

For Web use HttpClientModule

\n
import { HttpClientModule } from '@angular/common/http';
\n
@NgModule({
  ...
  imports: [
    ...
    HttpClientModule
  ],
\n

API KEY

\n

You will also need to get a petfinder api key from here.

\n

When you get your key, you need to provide it to the @NgModule providers using the API_KEY_TOKEN InjectionToken from petfinder-angular-service.

\n
import { PetFinderService, API_KEY_TOKEN } from 'petfinder-angular-service';

@NgModule({
  ...
  providers: [
    ...
    { provide: API_KEY_TOKEN, useValue: 'your-key-here' },
    PetFinderService
  ],
\n

Examples of usage

\n

To use the service, just import what you need:

\n
import { PetFinderService } from \"petfinder-angular-service\";
import { Pet } from \"petfinder-angular-service/models\";
\n

Then inject the service in the constructor:

\n
constructor(private petFinderService: PetFinderService) { }
\n

Then to get a list of pets call:

\n
this.petFinderService.findPets('Boston, MA')
.then((pets: Pet[]) => {
  // Deal with the pets here
  console.log(JSON.stringify(pets));
})
\n

or with search options:

\n
this.petFinderService.findPets(
  'Boston, MA', 
  { age: 'Baby', size: 'M' })
.then((pets: Pet[]) => {
  // Deal with the pets here
  console.log(JSON.stringify(pets));
})
\n

API

\n

breedList(animal: string): Promise<string[]>

\n\n

getPet(id: string | number): Promise<Pet>

\n\n

getRandomPetId(options: RandomSearchOptions = {}): Promise<number>

\n\n

getRandomPet(options: RandomSearchOptions = {}, provideDescription: boolean = true): Promise<Pet>

\n\n

findPets(location: string, options: PetSearchOptions = {}): Promise<Pet[]>

\n\n

findShelterPets(id: string | number, options: ShelterPetSearchOptions = {}): Promise<Pet[]>

\n\n

findShelters(location: string, options: ShelterSearchOptions = {}): Promise<Shelter[]>

\n\n

getShelter(id: string | number): Promise<Shelter>

\n\n

findSheltersByBreed(animal:string, breed: string, options: ShelterSearchByBreedOptions = {}): Promise<Shelter[]>

\n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"akylas-nativescript-vue-template-compiler":{"name":"akylas-nativescript-vue-template-compiler","version":"2.1.14","license":"MIT","readme":"

nativescript-vue-template-compiler

\n
\n

This package is auto-generated from platform/nativescript/compiler

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-devtools":{"name":"nativescript-vue-devtools","version":"1.5.1","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-custom":{"name":"nativescript-camera-plus-custom","version":"1.0.0","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iadvize":{"name":"nativescript-iadvize","version":"1.0.3","readme":"

nativescript-iadvize

\n

A NativeScript plugin for integration of iAdvize chat into Android/iOS app.

\n

NativeScript plugin for iAdvize SDK

\n

\"npm

\n

This is a plugin to show the conversation from a iAdvize chat, using the iAdvize SDK (Android v2.0.0-beta1, iOS v2.0.0-beta1).

\n

Requirements

\n\n

Installation

\n

Run the following command from the root of your project:

\n
npm install nativescript-iadvize
\n

Activation

\n

When the user logs in to the your app call activate with your credentials (our example home.component.ts):

\n
IAdvize.activate(XXXX, 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', 'userId', () => {
  console.log('IAdvize conversation activated.');
});
\n

Chatting

\n

To open the chat window call presentChat():

\n
IAdvize.presentChat();
\n

Optional functions

\n

Hide default chat button

\n

To hide default chat button call hideDefaultChatButton():

\n
IAdvize.hideDefaultChatButton();
\n

UI customization

\n

To customize the chatbox UI call customize():

\n
const configuration: ChatConfiguration = {
  automaticMessage: 'Any question? Say Hello to Smart and we will answer you as soon as possible! 😊',
  font: 'fontPath',
  incomingMessageAvatar: 'avatar-icon',
  mainColor: '#4103fc',
  navigationBarBackgroundColor: '#4103fc',
  navigationBarMainColor: '#ffffff',
  navigationBarTitle: 'Chat Title'
};
IAdvize.customize(configuration);
\n

Logging Out

\n

To preserve the confidentiality of user conversation call logout().

\n
IAdvize.logout();
\n

Conversation events

\n

To add a listener to be informed in real time about conversation events call registerConversationListener().

\n
IAdvize.registerConversationListener((url: string) => {
  console.log('Handle clicked url - ' + url);
  return false;
}, (hasOngoingConversation: boolean) => {
    console.log('Ongoing conversation status changed - ' + hasOngoingConversation);
});
\n

Push Notifications

\n

To be informed of chat messages received when your app is not running call registerPushToken()

\n
IAdvize.registerPushToken('your-token', isProduction);
\n

Development setup

\n

For easier development and debugging purposes continue with the following steps:

\n

Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.

\n

Now go and make a change to your plugin. It will be automatically applied to the demo project.

\n

Clean plugin and demo files

\n

Sometimes you may need to wipe away all generated folders to reinstall them fresh.\nRun npm run clean to wipe those clean then you can can run plugin.prepare to install fresh dependencies.

\n

Sometimes you just need to wipe out the demo's platforms, node_modules and hooks directory only.\nRun npm run demo.reset to delete those.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ozymandiasthegreat/wakeword-zero":{"name":"@ozymandiasthegreat/wakeword-zero","version":"2.0.5","license":"MIT","readme":"

wakeword-zero

\n

Based on Machine Learning on Voice: a gentle introduction with Snips Personal Wake Word Detector

\n

Ported from node-personal-wakeword\nby Mathieu Quisefit

\n

Installation

\n
npm install @ozymandiasthegreat/wakeword-zero
\n

Usage

\n
import { DetectorBuilder } from \"@ozymandiasthegreat/wakeword-zero\";

const Detector = await DetectorBuilder();
const detector = new Detector({
  /*
  sampleRate: 16000,
  bitLength: 16,
  frameShiftMS: 10.0,
  frameLengthMS: 30.0, // Must be a multiple of frameShiftMS
  vad: true, // Use VAD detection
  vadMode: WakewordDetector.VadMode.AGGRESSIVE, // See node-vad modes
  vadDebounceTime: 500,
  band: 5, // DTW window width
  ref: 0.22, // See Snips paper for explanation about this parameter
  preEmphasisCoefficient: 0.97, // Pre-emphasis ratio
  */
  threshold: 0.5 // Default value
})

// *****

// KEYWORD MANAGEMENT

// Add a new keyword using multiple \"templates\"
await detector.addKeyword('alexa', [
  // WAV templates (trimmed with no noise!)
  './keywords/alexa1.wav',
  './keywords/alexa2.wav',
  './keywords/alexa3.wav'
], {
  // Options
  disableAveraging: true, // Disabled by default, disable templates averaging (note that resources consumption will increase)
  threshold: 0.52 // Per keyword threshold
})

// Keywords can be enabled/disabled at runtime
detector.disableKeyword('alexa')
detector.enableKeyword('alexa')

// *****

// EVENTS

// The detector will emit a \"ready\" event when its internal audio frame buffer is filled
detector.on('ready', () => {
  console.log('listening...')
})

// The detector will emit an \"error\" event when it encounters an error (VAD, feature extraction, etc.)
detector.on('error', err => {
  console.error(err.stack)
})

// The detector will emit a \"data\" event when it has detected a keyword in the audio stream
/* The event payload is:
  {
    \"keyword\"     : \"alexa\", // The detected keyword
    \"score\"       : 0.56878768987, // The detection score
    \"threshold\"   : 0.5, // The detection threshold used (global or keyword)
    \"frames\"      : 89, // The number of audio frames used in the detection
    \"timestamp\"   : 1592574404789, // The detection timestamp (ms)
    \"audioData\"   : <Buffer> // The utterance audio data (can be written to a file for debugging)
  }
*/
detector.on('data', ({keyword, score, threshold, timestamp}) => {
  console.log(`Detected \"${keyword}\" with score ${score} / ${threshold}`)
})

// *****

// Create readable stream and
// Pipe to wakeword detector
stream.pipe(detector)

// Or push audio data in chunks
detector.write(chunk)
\n

For a complete example check out the docs folder.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yolo":{"name":"nativescript-yolo","version":"1.0.20","license":"Apache-2.0","readme":"

Nativescript YOLO

\n

Implementation of YOLO v3 in {N} with iOS / Android support

\n

Installation

\n
tns plugin add nativescript-yolo
\n

Native Android Development

\n
    \n
  1. Build the package under platforms/android_lib using Android Studio.
    2. \n
  2. Locate the yololib-release.aar file platforms/android_lib/YOLO/yololib/build/outputs/aar
    3. \n
  3. Rename the file to .zip extension
    4. \n
  4. Extract the classes.jar file and copy it to platforms/android folder
    5. \n
\n

Native iOS Development

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"not-whlist-sandox-plugin":{"name":"not-whlist-sandox-plugin","version":"1.0.0","license":"Apache-2.0","readme":"

ios-working-with-sandbox-plugin

\n

Plugin used for testing sandbox-pod and pod support in nativescript-cli.\nThis plugin will try to create file called I_MADE_THIS_FILE.txt in <project_name>/platforms/app/ directory.\nThe build .ipa should contain this file.

\n

How to use

\n

NativeScript CLI:

\n

In your project execute:

\n
$ tns plugin add not-whlist-sandox-plugin
\n

or add the following entry in your package.json:

\n
\"dependencies\": {
\t\"not-whlist-sandox-plugin\": \"1.0.0\"
}
\n

AppBuilder

\n

Add the following entry in your package.json:

\n
\"dependencies\": {
\t\"not-whlist-sandox-plugin\": \"1.0.0\"
}
\n

AppBuilder CLI

\n

In your project execute:

\n
$ appbuilder plugin add not-whlist-sandox-plugin
\n

or add the following entry in your package.json:

\n
\"dependencies\": {
\t\"not-whlist-sandox-plugin\": \"1.0.0\"
}
\n

Expected result when building the project

\n

NativeScript CLI

\n

In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file. The file should be created in <project_dir>/platforms/ios/<project_name>/app/.

\n

In case you open <cli_install_dir>/config/config.json and set USE_POD_SANDBOX to false, the build should do the same.

\n

AppBuilder

\n

In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file.\nThe build will fail in case this plugin is not whitelisted.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-with-pitch":{"name":"nativescript-audio-with-pitch","version":"1.0.1","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-medallia":{"name":"nativescript-medallia","version":"2.0.0","license":"MIT","readme":"

Nativescript medallia

\n

Nativescript medallia plugin is used for integration of Medallia ( see https://www.medallia.com/ ) into Nativescript based Android and IOS applications.

\n

Prerequisites / Requirements

\n

The plugin is currently based on NativeScript 6.5.0 and XCode 11

\n

Installation

\n
tns plugin add nativescript-medallia
\n

Usage

\n

Initializing Medallia (should be done in app.ts):

\n
    import { Medallia } from 'nativescript-medallia';
    ...
    if (isIOS) {
      Medallia.init(\"...Put your IOS Medallia api key here...\");
    }

    app.run({ moduleName: \"main-page\" });

    if (isAndroid) {
      Medallia.init(\"...Put your Android Medallia api key here...\");
    }
\n

Showing medallia survey form:

\n
    Medallia.showForm(\"...survey form id here...\").subscribe(
      (success: boolean) => {
          
      },
      (error: string) => {
          
      });
\n

Demo

\n

The following steps should be performed in order to run demo app for first time:

\n
    \n
  1. Create global-config.ts file which exports two global constants (MEDALLIA_API_KEY_ANDROID and MEDALLIA_API_KEY_IOS).\nIt should look like this:
    2. \n
\n
export const MEDALLIA_API_KEY_ANDROID: string = \"...Put your Android Medallia api key here...\";
export const MEDALLIA_API_KEY_IOS: string = \"...Put your IOS Medallia api key here...\";
\n
    \n
  1. Place your global-config.ts file into demo/app folder
    2. \n
  2. execute "npm install" from "src" folder
    3. \n
  3. execute "npm run clean" from "src" folder
    4. \n
  4. execute "npm run plugin.prepare" from src folder
    5. \n
  5. execute "npm run demo.ios" or "npm run demo.android" from "src" folder
    6. \n
\n

For next demo app runs, it would be usually enough the perform the last step only, but that also depends on the changes you make on the project so some of the other steps could be needed as well.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/directions":{"name":"@codesthings/directions","version":"2.0.1","license":"Apache-2.0","readme":"

Nativescript directions

\n
ns plugin add @nativescript/directions
\n

Usage

\n

Demo app (XML + TypeScript)

\n

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

\n

You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

\n\n

Demo app (Angular)

\n

This plugin is part of the plugin showcase app I built using Angular.

\n

API

\n

available

\n

Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

\n
JavaScript
\n
// require the plugin
var directions = require('@nativescript/directions');

// instantiate the plugin
var directions = new directions.Directions();

directions.Directions.available().then(function (avail) {
\tconsole.log(avail ? 'Yes' : 'No');
});
\n
TypeScript
\n
// require the plugin
import { Directions } from '@nativescript/directions';

// instantiate the plugin
let directions = new Directions();

directions.available().then((avail) => {
\tconsole.log(avail ? 'Yes' : 'No');
});
\n

navigate

\n

This function opens the native Maps app with a predefined from and to address.

\n

If you don't pass from the current location of the user will be used.

\n

If an address is specified then lat and lng will be ignored.

\n

If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

\n

Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

\n
JavaScript
\n
directions
\t.navigate({
\t\tfrom: {
\t\t\t// optional, default 'current location'
\t\t\tlat: 52.215987,
\t\t\tlng: 5.282764,
\t\t},
\t\tto: {
\t\t\t// either pass in a single object or an Array (see the TypeScript example below)
\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
\t\t},
\t\t// for platform-specific options, see the TypeScript example below.
\t})
\t.then(
\t\tfunction () {
\t\t\tconsole.log('Maps app launched.');
\t\t},
\t\tfunction (error) {
\t\t\tconsole.log(error);
\t\t}
\t);
\n
TypeScript
\n
directions
\t.navigate({
\t\tfrom: {
\t\t\t// optional, default 'current location'
\t\t\tlat: 52.215987,
\t\t\tlng: 5.282764,
\t\t},
\t\tto: [
\t\t\t{
\t\t\t\t// if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
\t\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
\t\t\t},
\t\t\t{
\t\t\t\taddress: 'Aak 98, Wieringerwerf, Netherlands',
\t\t\t},
\t\t],
\t\ttype: 'walking', // optional, can be: driving, transit, bicycling or walking
\t\tios: {
\t\t\tpreferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
\t\t\tallowGoogleMapsWeb: true, // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
\t\t\tuseUniversalSyntax: true, // Prefer the Universal URL Syntax to the comgooglemaps:// url scheme. Useful if Google Maps does not load correctly.
\t\t},
\t\tandroid: {
\t\t\tnewTask: true, // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
\t\t},
\t})
\t.then(
\t\t() => {
\t\t\tconsole.log('Maps app launched.');
\t\t},
\t\t(error) => {
\t\t\tconsole.log(error);
\t\t}
\t);
\n

Future work

\n\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/filterable-listpicker":{"name":"@nstudio/filterable-listpicker","version":"1.0.1","license":"Apache-2.0","readme":"

\"Twitter

\n

nativescript-filterable-listpicker

\n

The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

\n \n

Installation

\n
tns plugin add nativescript-filterable-listpicker
\n

Usage

\n

In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

\n

NativeScript Core

\n
<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-filterable-listpicker\">
    <GridLayout rows=\"\" columns=\"\">
        <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
        <GridLayout rows=\"*, auto, *\">
            <StackLayout height=\"300\">
                <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
            </StackLayout>
        </GridLayout>
        <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
        <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
    </GridLayout>
</Page>
\n

Then in your code...

\n
public showPicker() {
    page.getViewById('myfilter').show();
}

public itemTapped(args) {
    alert(args.selectedItem + ' was tapped!')
}

public cancelFilterableList() {
    // this gets called if the user cancels the modal. 
}
\n

Use as Autocomplte

\n

You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

\n
let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

private filterableListpicker: FilterableListpicker;
private page: Page;
constructor(page: Page) {
    super();
    this.page = page;
    // Get filterableListpicker instance
    this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
    MyModel = this;
}

public showPickerAsAutocomplete() {
    // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
    this.filterableListpicker.isAutocomplete = true;
    this.filterableListpicker.show(frame.topmost());
    
    this.filterableListpicker.autocomplete((data) => {
        let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
        http.getJSON<Predictions>(url).then((res) => {
            //console.dir(res)
            const airportsCollection = res.predictions;
            const items = [];
            for (let i = 0; i < airportsCollection.length; i++) {
                items.push({
                    title: airportsCollection[i].description,
                    description: \"\",
                    source: airportsCollection[i]
                });
                
            }
            this.set(\"listitems\", items)
        }).catch((err) => {
            const message = 'Error fetching remote data from ' + url + ': ' + err.message;
            console.log(message);
            alert(message);
        });
    });
}
\n

NativeScript Angular

\n

In angular, you have to register the element in your app component like so:

\n
// app.component.ts
import {registerElement} from \"nativescript-angular/element-registry\";
registerElement(\"FilterableListpicker\", () => require(\"nativescript-filterable-listpicker\").FilterableListpicker);
\n

Then use it in your templates like...

\n
<GridLayout>
    <Image src=\"res://nicebackgroundimage.jpg\"></Image>
    <StackLayout>
        <Label text=\"Whats your favorite programming language?\"></Label>
        <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
    </StackLayout>
    <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
</GridLayout>
\n

Then in your code...

\n
@ViewChild('myfilter') myfilter: ElementRef;

cancelFilterableList() {
    console.log('canceled');
}

itemTapped(args) {
    alert(args.selectedItem)
}

showPicker() {
    this.myfilter.nativeElement.show();
}
\n

Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

\n

in android:

\n
@ViewChild('myContainer') myContainer: ElementRef;

public function showPicker() {
  this.myfilter.nativeElement.show(this.myContainer.nativeElement);
}
\n

Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

\n

Source Array

\n

As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
titleThe title, this is what your list will be filtered on, and it will display in bold.
imageOPTIONAL: This will display to the left of the title.
descriptionOPTIONAL: This will display under the title smaller and in gray.
\n

Here's some example code:

\n
public listitems = [
    {
        \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
        \"title\": \"Brown Bear\",
        \"description\": \"Brown bear brown bear, what do you see?\"
    },
    {
        \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
        \"title\": \"Red Bird\"
    },
    {
        \"title\": \"Purple Cat\",
        \"description\": \"Why are we teaching kids there are purple cats?\"
    }
];
\n

You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

\n

Here's how it will look in the picker:

\n\n

Webpack

\n

Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

\n

API

\n

The UI element accepts the following parameters:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
listWidth300The width of the modal element.
listHeight300The height of the modal element.
focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
canceledThis is just a function to call if the user cancels, probably rarely neccessary.
showCancelShow cancel button or not.
enableSearchAllow searching by showing the TextField at the top.
autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
\n

CSS Styling

\n
.flp-container .flp-list-container {
  border-radius: 10;
}
.flp-container .flp-list-container .flp-listview {
  background-color: white;
}

.flp-container .flp-list-container .flp-listview .flp-row {
  background-color: white;
}
/* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
  padding: 10;
} */
.flp-container .flp-list-container .flp-listview .flp-row .flp-image {
  margin: 10 0 10 5;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
  margin: 10 10 10 5;
  /* margin: 0 10 0 10; */
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
  font-weight: bold; 
  font-size: 16;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
  color: gray; 
  font-size: 13;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
  margin-left: 15; 
  padding: 10 0;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
  color: lightblue;
}

.flp-container .flp-hint-field {
  padding: 10 15; 
  height: 40; 
  background-color: #E0E0E0; 
  border-radius: 10 10 0 0;
}

.flp-container .flp-cancel-container {
  background-color: #E0E0E0; 
  height: 40; 
  border-radius: 0 0 10 10;
}

.flp-container .flp-cancel-container .flp-btn-cancel {
  font-weight: bold; 
  height: 40; 
  background-color: transparent; 
  border-color: transparent; 
  border-width: 1; 
  font-size: 12;
}
\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rsa":{"name":"nativescript-rsa","version":"1.2.0","license":"MIT","readme":"

No README found.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@renatotan/simple-login":{"name":"@renatotan/simple-login","version":"1.0.0","license":"Apache-2.0","readme":"

@renatotan/simple-login

\n
ns plugin add @renatotan/simple-login
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fingerprint-auth-custom":{"name":"nativescript-fingerprint-auth-custom","version":"7.0.2","license":"MIT","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dwaring87/nativescript-modal-datetimepicker":{"name":"@dwaring87/nativescript-modal-datetimepicker","version":"1.1.1","license":"Apache-2.0","readme":"

ERROR: No README data found!

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-libsodium":{"name":"nativescript-libsodium","version":"1.4.0","license":"Apache-2.0","readme":"

Nativescript libsodium

\n

Use native libsodium with nativescript. (mostly) API compatible with libsodium.js wrappers.

\n

Only Android is supported at this time.

\n

Installation

\n

tns plugin add nativescript-libsodium

\n

For Android - libsodium-jni requires either disallowing backup or making the following changes to your AndroidManifest.xml

\n

Don't use backup if you are storing secret keys as they would also get backed up

\n\n

Usage

\n

Use it the same way you use libsodium.js including their wrapper functions.

\n
import { Libsodium } from \"nativescript-libsodium\";
let keypair = Libsodium.crypto_box_keypair();
console.log(keypair.privateKey);  // It's a Uint8Array object
\n

For more examples, check out the unit tests

\n

Contributing

\n

Not all libsodium functions are wrapped in this project. But they are easy to add.\nLet's see how to add the crypto_box_seal_open function.

\n

Getting familiar

\n
    \n
  1. First run the project as is. You may run both the demo and unit tests. Read instructions here
    2. \n
  2. Review docs on the function from libsodium and libsodium.js
    3. \n
  3. Review type definitions for libsodium.js and libsodium-jni
    4. \n
\n

Adding new functions

\n\n
  public static crypto_box_seal(message: string | Uint8Array, publicKey: Uint8Array): Uint8Array {
    let messageBytes = this.force_java_bytes(message);
    let publicKeyBytes = this.force_java_bytes(publicKey);
    let ciphertext: JavaBytes = Array.create('byte', Sodium.crypto_box_sealbytes() + messageBytes.length);

    Sodium.crypto_box_seal(ciphertext, messageBytes, messageBytes.length, publicKeyBytes);

    return this.javaByteArrayToUint8Array(ciphertext);
  }
\n

Design decisions

\n\n

iOS Support?

\n

Please contribute! You would need to refactor the android specific code to .android files and build a wrapper for the .ios ones.

\n

It might make sense to make a generic class interface and have both Android and iOS implement it to ensure consistency.

\n

Need paid support?

\n

Do you need an iOS version sooner? Or maybe prefer us to add more libsodium functions that are important to you?

\n

Let us know at info AT burke software dot com.

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-conchecker":{"name":"tns-conchecker","version":"0.0.1","license":"ISC","readme":"

Install

\n
tns plugin add tns-conchecker
\n

Params

\n

lang: object containing:

\n\n

API

\n

ifInternet(fn,ifNot): if there is internet run fn() else run ifNot()

\n

onlyWithInternet(fn): run fn() only if there is internet

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/camera":{"name":"@codesthings/camera","version":"5.0.9","license":"Apache-2.0","readme":"

NativeScript Camera

\n

Working with the camera plugin

\n

Overview

\n

Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

\n

Installation

\n
npm install @nativescript/camera --save
\n

API

\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MethodDescription
takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
isAvailable()Is the device camera available to use.
\n

CameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultPlatformDescription
width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
\n
\n

Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

\n
\n

Usage

\n

Requesting permissions

\n

Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

\n
import { requestPermissions } from '@nativescript/camera';

requestPermissions().then(
    function success() {
        // permission request accepted or already granted
        // ... call camera.takePicture here ...
    },
    function failure() {
        // permission request rejected
        // ... tell the user ...
    }
);
\n
\n

Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

\n
\n
\n

Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

\n
\n
<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>
\n

Using the camera module to take a picture

\n

Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

\n

In order to use the camera module, just require it, as shown in Example 1:

\n
\n

Example 1: Require camera module in the application

\n
\n
// JavaScript
const camera = require(\"@nativescript/camera\");
\n
// TypeScript
import * as camera from \"@nativescript/camera\";
\n

Then you are ready to use it:

\n
\n

Example 2: How to take a picture and to receive image asset

\n
\n
// JavaScript
const { Image } = require(\"@nativescript/core\");

camera.takePicture()
    .then(function (imageAsset) {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"@nativescript/core\";

camera.takePicture()
    .then((imageAsset) => {
        console.log(\"Result is an image asset instance\");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

\n

Using the options to take memory efficient picture

\n

Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

\n\n

What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

\n

Example 3 shows how to use the options parameter:

\n
\n

Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

\n
\n
// JavaScript

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then(function (imageAsset) {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch(function (err) {
        console.log(\"Error -> \" + err.message);
    });
\n
// TypeScript
import { Image } from \"@nativescript/core\";

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then((imageAsset) => {
        console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
        console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
        console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
    }).catch((err) => {
        console.log(\"Error -> \" + err.message);
    });
\n

Save a picture

\n

To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

\n
import { ImageSource, knownFolders, path } from '@nativescript/core';

const source = new ImageSource();

source.fromAsset(imageAsset)
    .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName: string = \"test.jpg\";
        const filePath: string = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

        if (saved) {
            console.log(\"Gallery: \" + this._dataItem.picture_url);
            console.log(\"Saved: \" + filePath);
            console.log(\"Image saved successfully!\");
        }
    });
\n

This could be used to create thumbnails for quick display within your application.

\n

Check if the device has available camera

\n

The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

\n
const isAvailable = camera.isAvailable();
\n
\n

Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

\n
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@prabudevarrajan/filepicker":{"name":"@prabudevarrajan/filepicker","version":"2.0.0","license":"Apache-2.0","readme":"

@prabudevarrajan/filepicker

\n
ns plugin add @prabudevarrajan/filepicker
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zeroconf":{"name":"nativescript-zeroconf","version":"1.0.4","license":"MIT","readme":"

nativescript-zeroconf

\n

This nativescript-zeroconf plugin provides a Zeroconf/Bonjour implementation for both iOS and Android. Currently, it only supports discovering domains and services in the local network. Should there be any requests, I might implement the service registration parts as well (please open an issue to let me know).

\n

Demo Application

\n

This repository contains a demo application in the demo-angular folder that uses this plugin to display discovered Zeroconf domains and services. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run npm run demo.ios or npm run demo.android in the src folder.

\n

The demo app searches for by default for http services, but you can easily adjust the serviceType in app/zeroconf/zeroconf.provider.ts.

\n

Installation

\n
tns plugin add nativescript-zeroconf
\n

Usage

\n

First, import the plugin into your provider/component, and, since the plugin returns an Observable also the relevant types:

\n
import { Zeroconf } from 'nativescript-zeroconf';
import { Observable, PropertyChangeData } from 'tns-core-modules/data/observable';
\n

Then, instantiate a Zeroconf and define the event listeners:

\n
    this.zeroconf = new Zeroconf('_http._tcp.', 'local.'); // param 1 = service type, param 2 = domain

    /* define event listener */

    this.zeroconf.on(Observable.propertyChangeEvent, (data: PropertyChangeData) => {
      switch(data.propertyName.toString()) {
        case 'serviceFound': {
          console.log(`serviceFound: ${JSON.stringify(data.value)}`);
          break;
        }
      }
    });

    this.zeroconf.startServiceDiscovery();
\n

Tip: have a look at the demo project for an example implementation

\n

API

\n

Describe your plugin methods and properties here. See nativescript-feedback for example.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDefaultDescription
some propertyproperty default valueproperty description, default values, etc..
another propertyproperty default valueproperty description, default values, etc..
\n

Limitations

\n

License

\n

MIT license (see LICENSE file)

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-safetynet-helper":{"name":"nativescript-safetynet-helper","version":"0.1.1","license":"MIT","readme":"

NativeScript SafetyNet Helper

\n

A NativeScript module for checking device integrity using the SafetyNet API. It uses the SafetyNet Helper library

\n

Installation

\n

From the command prompt go to your app's root folder and execute:

\n
tns plugin add nativescript-safetynet-helper
\n

Usage

\n

Here are the supported functions:

\n

function: requestTest

\n

JavaScript

\n
let SafetyNetHelper = require('nativescript-safetynet-helper').SafetyNetHelper

let helper = new SafetyNetHelper(this._apiKey)

helper.requestTest((err, result) => {
    if (err) {
        console.log(err)
        this.updateMessage(err);
        return
    }

    console.log(`Basic Integrity - ${result.basicIntegrity}, CTS Profile Match - ${result.ctsProfileMatch}`)
});
\n

TypeScript

\n
import { SafetyNetHelper } from 'nativescript-safetynet-helper';

let helper = new SafetyNetHelper(this._apiKey)

helper.requestTest((err, result) => {
    if (err) {
        console.log(err)
        this.updateMessage(err);
        return
    }

    console.log(`Basic Integrity - ${result.basicIntegrity}, CTS Profile Match - ${result.ctsProfileMatch}`)
});
\n

Thanks

\n

Scott Alexander-Bown for his contributions to SafetyNet Helper

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-rad-imagepicker":{"name":"@nstudio/nativescript-rad-imagepicker","version":"2.0.5","license":"Apache-2.0","readme":"

NativeScript Rad Imagepicker Plugin \"apple\" \"android\"

\n

NativeScript plugin for whatsapp style image picking.\nThis Plugin uses PixImagePicker for Android and ImagePicker for iOS

\n

      

\n

Installation

\n
tns plugin add @nstudio/nativescript-rad-imagepicker
\n

Usage

\n
const RadImagepicker = require('@nstudio/nativescript-rad-imagepicker').RadImagepicker;
const PickerOptions = require('@nstudio/nativescript-rad-imagepicker').PickerOptions;
const radImagepicker = new RadImagepicker();
radImagepicker.pick(opts).then((selectedImages) => {
    if (selectedImages) {
        // Do something with selected images
        // currently 
        // the image will be of type nativescript image source
        // tns-core-modules/image-source
    }
});
\n

API

\n

Following picker options are available

\n
PickerOptions {
    doneButtonTitle?: string; // only affects ios
    noImagesTitle?: string; // only affects ios
    allowVideoSelection?: boolean; // only affects ios
    imageLimit?: number;
}
\n

Picker api

\n
pick(options: PickerOptions): Promise<Array<any>>;
\n

When the promise resolves, you will get array of imageSource

\n

Theming

\n

Android

\n

Add desired colors in app/App_Resources/Android/src/main/res/values/colors.xml

\n
<color name=\"ns_blue\">#272734</color>
<color name=\"colorPrimaryPix\">#075e54</color>
<color name=\"colorPrimaryLightPix\">#80075e54</color>
\n

Permissions

\n

Android

\n

Make sure these lines are in your Manifest.xml

\n
<uses-permission android:name=\"android.permission.CAMERA\" />
<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
<uses-feature android:name=\"android.hardware.camera\" />
\n

iOS

\n

Add these to info.plist, you can add more descriptive message here

\n
<key>NSCameraUsageDescription</key>
<string>This app uses your camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app uses your photo library</string>
\n
\n

Made With ♥️ for {N} Community by nStudio

\n

Special Thanks to Richard Smith and Osei Fortune :)

\n

License

\n

Apache License Version 2.0, January 2004

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-ilist":{"name":"nativescript-ngx-ilist","version":"1.0.2","license":"Apache-2.0","readme":"

nativescript-ngx-ilist

\n
ns plugin add nativescript-ngx-ilist
\n

Usage

\n

// TODO

\n

License

\n

Apache License Version 2.0

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchdb":{"name":"nativescript-couchdb","version":"0.6.23","license":"Apache-2.0","readme":"

nativescript-couchdb

\n

Nativescript plugin for couchdb\nA simple wrapper using nativescript http api to implement subset api compatible with PouchDB.

\n

Install

\n
tns plugin install nativescript-couchdb
\n

API

\n

constructor(couchdb_url, extraHeaders)\nSetup the database to connect to

\n\n

put(doc)

\n\n

get(docId)

\n\n

remove(doc)

\n\n

allDocs(options)

\n\n

query(design_view)

\n\n

Usage

\n

import * as dialog from \"ui/dialogs\";
import { CouchDB } from \"nativescript-couchdb\";

let db = new CouchDB(\"https://couchdb.server/dbname\", {
  \"Authorization\": \"Basic base64\\_encoded\\_string\"
});
let data = {
  _id: \"hello\",
  name: \"world\" 
}


// create and update
db.put(data)
  .then(res => dialog.alert(\"saved\"))
  .catch(err => dialog.alert(\"Failed\"));

// get data
db.get(\"hello\")
  .then(res => dialog.alert(JSON.stringify(res)))
  .catch(err => dialog.alert(\"Data not found));

// delete doc
db.remove(data)
  .then(res => dialog.alert(\"Data deleted\"))
  .catch(err => dialog.alert(\"Delete failed\"));

// alldocs
db.allDocs(options)
  .then(res => dialog.alert(res))
  .catch(err => dialog.alert(err));

// query views
db.query(\"user/top_contributor\", { group_level: 1, reduce: true })
  .then(res => dialog.alert(res))
  .catch(err => dialog.alert(err));
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stage-facebook-login":{"name":"nativescript-stage-facebook-login","version":"1.0.7","readme":"

nativescript-stage-facebook-login

\n

Example usage:

\n
    const FacebookLoginHandler = require(\"nativescript-stage-facebook-login\");

    // Initialize the handler
    FacebookLoginHandler.init(this._env.config.facebook.appId, this._env.config.facebook.appDisplayName);

    // Register our callbacks
    FacebookLoginHandler.registerCallback(this._loginFacebookSuccessCallback.bind(this), this.loginFacebookCancelCallback.bind(this), this.loginFacebookFailCallback.bind(this), this.loginFacebookDeclinedPermissions.bind(this));

    // Start the login process
    FacebookLoginHandler.logInWithReadPermissions([\"public_profile\", \"email\", \"user_friends\", \"user_birthday\"]);
\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-mapbox":{"name":"@nstudio/nativescript-mapbox","version":"6.0.0-rc.0","license":"MIT","readme":"

iOS builds errors

\n

If you get can't find symbol MGLMapView and the like remove node_modules and platforms\nfrom your project and rebuild.

\n

For reasons I have yet to figure out, linking to the src directory from a\nproject's package.json cause all kinds of errors.

\n

So build the plugin from the src directory using

\n
npm run build.dist
\n

and the reference

\n
file:<path_to>/nativescript-mapbox-fbs/publish/dist/package
\n

in your project's package.json.

\n

Typings

\n

When upgrading the underlying libraries the typings have to be re-generated.

\n

Remember to update the pod respositories list in case it's unable to find the\nupdated pod file.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pbkdf2":{"name":"nativescript-pbkdf2","version":"1.0.5","license":"MIT","readme":"

pbkdf2

\n

\"NPM\n\"Build\n\"Dependency

\n

\"js-standard-style\"

\n

This library provides the functionality of PBKDF2 with the ability to use any supported hashing algorithm returned from crypto.getHashes()

\n

Usage

\n
var pbkdf2 = require('pbkdf2')
var derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 1, 32, 'sha512')

...
\n

For more information on the API, please see the relevant Node documentation.

\n

For high performance, use the async variant (pbkdf2.pbkdf2), not pbkdf2.pbkdf2Sync, this variant has the oppurtunity to use window.crypto.subtle when browserified.

\n

Credits

\n

This module is a derivative of cryptocoinjs/pbkdf2-sha256, so thanks to JP Richardson for laying the ground work.

\n

Thank you to FangDun Cai for donating the package name on npm, if you're looking for his previous module it is located at fundon/pbkdf2.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-google-maps":{"name":"nativescript-danem-google-maps","version":"1.0.2","license":"Apache-2.0","readme":"

NativeScript plugin for the Google Maps SDK

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elvispos-loopback-sdk-builder":{"name":"elvispos-loopback-sdk-builder","version":"2.3.5","license":"MIT","readme":"

LoopBack SDK Builder

\n
\n

Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

\n
\n

The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

\n

The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

\n

NOTE: This sdk builder is not compatible with LoopBack 4.

\n

Installation

\n
$ cd to/loopback/project
$ npm install --save-dev @mean-expert/loopback-sdk-builder
\n

Documentation

\n

LINK TO WIKI DOCUMENTATION

\n

Contribute

\n

Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

\n

Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

\n

OIDC-SSO Service

\n

A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

\n\n

Register now and get the chance to have an unlimited annual enterprise membership for free.

\n

[REQUEST EARLY ACCESS HERE]

\n

Technology References:

\n\n

Contact

\n

Discuss features and ask questions on @johncasarrubias at Twitter.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-appcompat":{"name":"nativescript-plugin-appcompat","version":"22.2.1","license":"Apache-2.0","readme":"

nativescript-plugin-appcompat

\n

A plugin which installs the v7-appcompat Android Support library to your NativeScript project.

\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-camera":{"name":"@yoonit/nativescript-camera","version":"3.2.1","license":"MIT","readme":"

\n

NativeScript Yoonit Camera

\n

\"NativeScript\" \"Version\" \"Downloads\"

\n

\"Android\" \"iOS\" \"MIT

\n

A NativeScript plugin to provide:

\n\n
\n

More about...

\n

The plugin's core is the native layer. Every change in the native layer, reflects here. This plugin, the Yoonit Camera, we can say that is an aggregation of many Yoonit's native libs:

\n\n

All this native libs can be used independently.

\n
\n

Table Of Contents

\n\n

Installation

\n
npm i -s @yoonit/nativescript-camera
\n

Usage

\n

All the functionalities that the @yoonit/nativescript-camera provides is accessed through the YoonitCamera component, that includes the camera preview. Below we have the basic usage code, for more details, your can see the Methods, Events or the Demo Vue.

\n

VueJS Plugin

\n

main.js

\n
import Vue from 'nativescript-vue'  
import YoonitCamera from '@yoonit/nativescript-camera/vue'  
  
Vue.use(YoonitCamera)
\n

After that, you can access the camera object in your entire project using this.$yoo.camera

\n

Vue Component

\n

App.vue

\n
<template>
  <Page @loaded=\"onLoaded\">
    <YoonitCamera
      ref=\"yooCamera\"
      lens=\"front\"
      captureType=\"face\"
      imageCapture=true
      imageCaptureAmount=10
      imageCaptureInterval=500
      detectionBox=true
      @faceDetected=\"doFaceDetected\"
      @imageCaptured=\"doImageCaptured\"
      @endCapture=\"doEndCapture\"
      @qrCodeContent=\"doQRCodeContent\"
      @status=\"doStatus\"
      @permissionDenied=\"doPermissionDenied\"
    />
  </Page>
</template>

<script>
  export default {
    data: () => ({}),

    methods: {
      async onLoaded() {

        console.log('[YooCamera] Getting Camera view')
        this.$yoo.camera.registerElement(this.$refs.yooCamera)

        console.log('[YooCamera] Getting permission')
        if (await this.$yoo.camera.requestPermission()) {
          
          console.log('[YooCamera] Permission granted, start preview')
          this.$yoo.camera.preview()
        }
      },

      doFaceDetected({ 
        x, 
        y, 
        width, 
        height,
        leftEyeOpenProbability,
        rightEyeOpenProbability,
        smilingProbability,
        headEulerAngleX,
        headEulerAngleY,
        headEulerAngleZ
      }) {
        console.log(
          '[YooCamera] doFaceDetected',
          `
          x: ${x}
          y: ${y}
          width: ${width}
          height: ${height}
          leftEyeOpenProbability: ${leftEyeOpenProbability}
          rightEyeOpenProbability: ${rightEyeOpenProbability}
          smilingProbability: ${smilingProbability}
          headEulerAngleX: ${headEulerAngleX}
          headEulerAngleY: ${headEulerAngleY}
          headEulerAngleZ: ${headEulerAngleZ}
          `
        )
        if (!x || !y || !width || !height) {
          this.imagePath = null
        }
      },

      doImageCaptured({
        type,
        count,
        total,
        image: {
          path,
          source
        },
        inferences,
        darkness,
        lightness,
        sharpness
      }) {
        if (total === 0) {
          console.log('[YooCamera] doImageCreated', `${type}: [${count}] ${path}`)
          this.imageCreated = `${count}`
        } else {
          console.log('[YooCamera] doImageCreated', `${type}: [${count}] of [${total}] - ${path}`)
          this.imageCreated = `${count} de ${total}`
        }
        console.log('[YooCamera] Mask Pytorch', inferences)
        
        console.log('[YooCamera] Image Quality Darkness:', darkness)
        console.log('[YooCamera] Image Quality Lightness', lightness)
        console.log('[YooCamera] Image Quality Sharpness', sharpness)
        this.imagePath = source
      },

      doEndCapture() {
        console.log('[YooCamera] doEndCapture')
      },

      doQRCodeContent({ content }) {
        console.log('[YooCamera] doQRCodeContent', content)
      },

      doStatus({ status }) {
        console.log('[YooCamera] doStatus', status)
      },

      doPermissionDenied() {
        console.log('[YooCamera] doPermissionDenied')
      }
    }
  }
</script>
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropsInput/FormatDefault valueDescription
lens"front" or "back""front"The camera lens to use "front" or "back".
captureType"none", "front", "frame" or "qrcode""none"The capture type of the camera.
imageCapturebooleanfalseEnable/disabled save image capture.
imageCaptureAmountnumber0The image capture amount goal.
imageCaptureIntervalnumber1000The image capture time interval in milliseconds.
imageCaptureWidth"NNpx""200px"The image capture width in pixels.
imageCaptureHeight"NNpx""200px"The image capture height in pixels.
colorEncoding"RGB" or "YUV""RGB"Only for android. The image capture color encoding type: "RGB" or "YUV".
detectionBoxbooleanfalseShow/hide the face detection box.
detectionBoxColorstring#ffffffSet detection box color.
detectionMinSize"NN%""0%"The face minimum size percentage to capture.
detectionMaxSize"NN%""100%"The face maximum size percentage to capture.
detectionTopSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the top side of the detection. Use the detectionBox to have a visual result.
detectionRightSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the right side of the detection. Use the detectionBox to have a visual result.
detectionBottomSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the bottom side of the detection. Use the detectionBox to have a visual result.
detectionLeftSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the left side of the detection. Use the detectionBox to have a visual result.
roibooleanfalseEnable/disable the region of interest capture.
roiTopOffset"NN%""0%"Distance in percentage of the top face bounding box with the top of the camera preview.
roiRightOffset"NN%""0%"Distance in percentage of the right face bounding box with the right of the camera preview.
roiBottomOffset"NN%""0%"Distance in percentage of the bottom face bounding box with the bottom of the camera preview.
roiLeftOffset"NN%""0%"Distance in percentage of the left face bounding box with the left of the camera preview.
roiAreaOffsetbooleanfalseEnable/disable display of the region of interest area offset.
roiAreaOffsetColorstring'#ffffff73'Set display of the region of interest area offset color.
faceContoursbooleanfalseEnable/disable display list of points on a detected face.
faceContoursColorstring'#FFFFFF'Set face contours color.
computerVision (Android Only)booleanfalseEnable/disable computer vision model.
torchbooleanfalseEnable/disable device torch. Available only to camera lens "back".
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FunctionParametersValid valuesReturn TypeDescription
requestPermission--promiseAsk the user to give the permission to access camera.
hasPermission--booleanReturn if application has camera permission.
preview--voidStart camera preview if has permission.
startCapturetype: string
  • "none"
  • "face"
  • "qrcode"
  • "frame"
voidSet capture type "none", "face", "qrcode" or "frame". Default value is "none".
stopCapture--voidStop any type of capture.
destroy--voidDestroy preview.
toggleLens--voidToggle camera lens facing "front"/"back".
setCameraLenslens: string"front" or "back"voidSet camera to use "front" or "back" lens. Default value is "front".
getLens--stringReturn "front" or "back".
setImageCaptureenable: booleantrue or falsevoidEnable/disabled save image capture. Default value is false.
setImageCaptureAmountamount: IntAny positive Int valuevoidFor value 0, save infinity images. When the capture image amount is reached, the event onEndCapture is triggered. Default value is 0.
setImageCaptureIntervalinterval: numberAny positive number that represent time in millisecondsvoidSet the image capture time interval in milliseconds.
setImageCaptureWidthwidth: stringValue format must be in NNpxvoidSet the image capture width in pixels.
setImageCaptureHeightheight: stringValue format must be in NNpxvoidSet the image capture height in pixels.
setImageCaptureColorEncodingcolorEncoding: string"YUV" or "RGB"voidOnly for android. Set the image capture color encoding type: "RGB" or "YUV".
setDetectionBoxenable: booleantrue or falsevoidSet to show/hide the face detection box.
setDetectionBoxColorcolor: stringhexadecimalvoidSet detection box color.
setDetectionMinSizepercentage: stringValue format must be in NN%voidSet the face minimum size percentage to capture.
setDetectionMaxSizepercentage: stringValue format must be in NN%voidSet the face maximum size percentage to capture.
setDetectionTopSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the top side of the detection. Use the setDetectionBox to have a visual result.
setDetectionRightSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the right side of the detection. Use the setDetectionBox to have a visual result.
setDetectionBottomSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the bottom side of the detection. Use the setDetectionBox to have a visual result.
setDetectionLeftSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the left side of the detection. Use the setDetectionBox to have a visual result.
setROIenable: booleantrue or falsevoidEnable/disable face region of interest capture.
setROITopOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the top face bounding box with the top of the camera preview.
setROIRightOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the right face bounding box with the right of the camera preview.
setROIBottomOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the bottom face bounding box with the bottom of the camera preview.
setROILeftOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the left face bounding box with the left of the camera preview.
setROIMinSizepercentage: stringValue format must be in NN%voidSet the minimum face size related within the ROI.
setROIAreaOffsetenable: booleantrue or falsevoidEnable/disable display of the region of interest area offset.
setROIAreaOffsetColorcolor: stringHexadecimal colorvoidSet display of the region of interest area offset color.
setFaceContoursenable: booleantrue or falsevoidEnable/disable display list of points on a detected face.
setFaceContoursColorcolor: stringHexadecimal colorvoidSet face contours color.
setComputerVision (Android Only)enable: booleantrue or falsevoidEnable/disable computer vision model.
setComputerVisionLoadModels (Android Only)modelPaths: Array<string>Valid system path file to a PyTorch computer vision modelvoidSet model to be used when image is captured. To se more about it, Click Here.
computerVisionClearModels (Android Only)--voidClear models that was previous added using setComputerVisionLoadModels.
setTorchenable: booleantrue or falsevoidEnable/disable device torch. Available only to camera lens "back".
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventParametersDescription
imageCaptured{ type: string, count: number, total: number, image: object = { path: string, source: any, binary: any }, inferences: [{ ['model name']: model output }], darkness: number, lightness: number, sharpness: number }Must have started capture type of face/frame. Emitted when the face image file saved:
  • type: "face" or "frame"
    • count: current index
  • total: total to create
  • image.path: the face/frame image path
  • image.source: the blob file
  • image.binary: the blob file
  • inferences: An Array with models output
  • darkness: image darkness classification.
  • lightness: image lightness classification.
  • sharpness: image sharpness classification.
    faceDetected{ x: number, y: number, width: number, height: number, leftEyeOpenProbability: number, rightEyeOpenProbability: number, smilingProbability: number, headEulerAngleX: number, headEulerAngleY: number, headEulerAngleZ: number }Must have started capture type of face. Emit the face analysis, all parameters are null if no more face detecting.
    endCapture-Must have started capture type of face/frame. Emitted when the number of image files created is equal of the number of images set (see the method setImageCaptureAmount).
    qrCodeContent{ content: string }Must have started capture type of qrcode (see startCapture). Emitted when the camera read a QR Code.
    status{ type: 'error'/'message', status: string }Emit message error from native. Used more often for debug purpose.
    permissionDenied-Emit when try to preview but there is no camera permission.
    \n

    Face Analysis

    \n

    The face analysis is the response send by the onFaceDetected. Here we specify all the parameters.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypeDescription
    xnumberThe x position of the face in the screen.
    ynumberThe y position of the face in the screen.
    widthnumberThe width position of the face in the screen.
    heightnumberThe height position of the face in the screen.
    leftEyeOpenProbabilitynumberThe left eye open probability.
    rightEyeOpenProbabilitynumberThe right eye open probability.
    smilingProbabilitynumberThe smiling probability.
    headEulerAngleXnumberThe angle in degrees that indicate the vertical head direction. See Head Movements
    headEulerAngleYnumberThe angle in degrees that indicate the horizontal head direction. See Head Movements
    headEulerAngleZnumberThe angle in degrees that indicate the tilt head direction. See Head Movements
    \n

    Head Movements

    \n

    Here we're explaining the above gif and how reached the "results". Each "movement" (vertical, horizontal and tilt) is a state, based in the angle in degrees that indicate head direction;

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Head DirectionAttributev < -36°-36° < v < -12°-12° < v < 12°12° < v < 36°36° < v
    VerticalheadEulerAngleXSuper DownDownFrontalUpSuper Up
    HorizontalheadEulerAngleYSuper LeftLeftFrontalRightSuper Right
    TiltheadEulerAngleZSuper RightRightFrontalLeftSuper Left
    \n

    Image Quality

    \n

    The image quality is the classification of the three attributes: darkness, lightness and sharpness. Result available in the imageCapture event. Let's see each parameter specifications:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ThresholdClassification
    Darkness
    darkness > 0.7Too dark
    darkness <= 0.7Acceptable
    Lightness
    lightness > 0.65Too light
    lightness <= 0.65Acceptable
    Sharpness
    sharpness >= 0.1591Blurred
    sharpness < 0.1591Acceptable
    \n

    Messages

    \n

    Pre-define message constants used by the status event.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MessageDescription
    INVALID_MINIMUM_SIZEFace/QRCode width percentage in relation of the screen width is less than the set.
    INVALID_MAXIMUM_SIZEFace/QRCode width percentage in relation of the screen width is more than the set.
    INVALID_OUT_OF_ROIFace bounding box is out of the set region of interest.
    \n

    Contribute and make it better

    \n

    Clone the repo, change what you want and send PR.

    \n

    For commit messages we use Conventional Commits.

    \n

    Contributions are always welcome, some people that already contributed!

    \n

    \n
    \n

    Code with ❤ by the Cyberlabs AI Front-End Team

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@renatotan/basicform":{"name":"@renatotan/basicform","version":"1.0.1","license":"Apache-2.0","readme":"

    @renatotan/basicform

    \n
    ns plugin add @renatotan/basicform
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils":{"name":"nativescript-google-maps-utils","version":"0.1.3","license":"Unlicense","readme":"

    nativescript-google-maps-utils

    \n

    NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

    \n

    \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

    \n

    State

    \n

    Android implemented.

    \n

    iOS not implemented.

    \n

    Dependencies

    \n\n

    Install

    \n
    tns plugin add nativescript-google-maps-utils
    \n

    Usage

    \n
    var GoogleMaps = require('nativescript-google-maps-sdk');
    var GoogleMapsUtils = require('nativescript-google-maps-utils');


    function onMapReady(args) {

      var mapView = args.object;

    \tvar positionSet = [ /* GoogleMaps.Position... */ ];

    \tGoogleMapsUtils.setupHeatmap(mapView, positionSet);


    \tvar markerSet = [ /* GoogleMaps.Marker... */ ];

    \tGoogleMapsUtils.setupMarkerCluster(mapView, makerSet);

    }
    ...
    \n

    Usage with TypeScript

    \n

    import using either of

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-meteor":{"name":"nativescript-meteor","version":"0.0.6","license":"apache","readme":"

    Nativescript-Meteor

    \n

    Plugin to connect via DDP Meteor with NativeScript

    \n

    How to Install On Nativescript Project

    \n
    npm install nativescript-meteor --save
    \n

    How to use this package

    \n
    import DDPClient = require(\"nativescript-meteor\");

    var ddpclient = new DDPClient({
        host: \"localhost\",
        port: 3000,
        ssl: false,
        autoReconnect: true,
        autoReconnectTimer: 15000,
        maintainCollections: true,
        ddpVersion: '1',
        useSockJs: true
    });

    ddpclient.connect(function (error, wasReconnect) {
        if (error) {
            console.log('DDP connection error!');
            return;
        }

        if (wasReconnect) {
            console.log('Reestablishment of a connection.');
        }

        console.log('connected!');

        // CALL METHOD METEOR
        ddpclient.call(
                    'deleteSinglePost',             // name of Meteor Method being called
                    ['foo', 'bar'],            // parameters to send to Meteor Method
                    function (err, result) {   // callback which returns the method call results
                        console.log('deleteSinglePost result: ' + result);
                    },
                    function () {              // callback which fires when server has finished
                        console.log('deleteSinglePost finished');  // sending any updated documents as a result of
                    });

        // SUBSCRIBE COLLECTIONS
        ddpclient.subscribe(
            'todos',                  // name of Meteor Publish function to subscribe to
            [],                       // any parameters used by the Publish function
            function () {             // callback when the subscription is complete
                console.log('posts complete:');
                console.log(ddpclient.collections.todos);
                for (var _id in ddpclient.collections.todos) {
                    var todos = ddpclient.collections.todos[_id];
                    console.log(\"Adding available todos \" + _id + \" name: \" + todos.judul);
                }
            });
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-tk":{"name":"nativescript-audio-tk","version":"1.0.9","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-player-tk":{"name":"nativescript-audio-player-tk","version":"1.0.5","license":"LGPL-3.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@courthoang/nativescript-in-app-purchase":{"name":"@courthoang/nativescript-in-app-purchase","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-in-app-purchase

    \n

    NativeScript plugin to handle in app purchases and subscriptions on Android and iOS.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Refer to the mobile ecosystem provider on how to
    \ntest in app purchases.

    \n

    For Apple\nhead to developer.apple.com

    \n

    For Android Google Play Store head over to developer.android.com

    \n

    Installation

    \n

    Installing the plugin

    \n
    tns plugin add nativescript-in-app-purchase
    \n

    Usage

    \n

    Use this typings definition for Typescript and adding IntelliSense support.

    \n
        /// <reference path=\"./node_modules/nativescript-in-app-purchase/index.d.ts\" />
    \n

    Initialization

    \n

    First of all it is required to create an instance of InAppPurchaseManager.

    \n
        import { OnInit } from '@angular/core'
        import { InAppPurchaseManager, InAppPurchaseResultCode, InAppPurchaseStateUpdateListener, InAppPurchaseTransactionState, InAppPurchaseType } from 'nativescript-in-app-purchase'
        export class Test implements OnInit {
            private inAppPurchaseManager: InAppPurchaseManager
            constructor() { }
            ngOnInit(): void {
                const purchaseStateUpdateListener: InAppPurchaseStateUpdateListener = {
                    onUpdate: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                        if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                            // Item has been purchased, sync local items list ...
                        }
                    },
                    onUpdateHistory: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                        if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Restored) {
                            // Item has been  restored, sync local items list ...
                        }
                    }
                }
                InAppPurchaseManager.bootStrapInstance(purchaseStateUpdateListener).then(inAppPurchaseManager => {
                    this.inAppPurchaseManager = inAppPurchaseManager
                })
            }
        }
    \n

    Product list

    \n

    Get the list of in app products.
    \nTo retrieve the list of in app products you must query a known amount of product IDs.

    \n
        // additional imports required
        import { InAppPurchaseType, InAppListProductsResult, InAppProduct } from 'nativescript-in-app-purchase'

        // query products
        queryProducts() {
            const myProductIds = ['product_1', 'product_2']
            // For subscriptions change to `InAppPurchaseType.Subscription`
            const myProductType = InAppPurchaseType.InAppPurchase 

            this.inAppPurchaseManager.list(myProductIds, myProductType)
                .then((result: InAppListProductsResult) => {
                    const products: InAppProduct[] = result.products
                    for (const product of products) {
                        // get the products ...
                        console.log(product.title, product)
                    }
                })
        }
    \n

    Buy a product

    \n

    When buying a product the result InAppOrderResult is only related to the order transaction it self.
    \nThe purchase state of the product will be called on the InAppPurchaseStateUpdateListener#onUpdate method.
    \nThis is where you have to confirm the purchase to finish the whole purchasing transaction.
    \nThe App Store and Google Play Store will automatically refund orders that haven't been confirmed.

    \n

    Buying a product

    \n
        // additional imports required
        import { InAppOrderResult } from 'nativescript-in-app-purchase'

        // by product
        buy() {
            const myProducts: InAppProduct[] = []//...

            const productToBuy: InAppProduct = myProducts[0]
            this.inAppPurchaseManager.order(productToBuy)
                .then((result: InAppOrderResult) => {
                    if (result.success) {
                        // order has been processed
                        // ... expecting confirmation ...
                        // handle confirmation in `InAppPurchaseStateUpdateListener.onUpdate(...)`
                    }
                })
        }
    \n

    Confirming a product

    \n
        // additional imports required
        import { InAppOrderConfirmResult } from 'nativescript-in-app-purchase'

        ngOnInit(): void {
            const purchaseStateUpdateListener: InAppPurchaseStateUpdateListener = {
                onUpdate: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                    if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                        // Item has been purchased, sync local items list ...
                        this.confirmOrder(purchaseTransactionState)
                    }
                },
                onUpdateHistory: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                    if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Restored) {
                        // Item has been  restored, sync local items list ...
                    }
                }
            }
            // ...
        }

        confirmOrder(purchaseTransactionState: InAppPurchaseTransactionState) {
            const isConsumable = (productId: string): boolean => { 
                /* determine if is consumable and can be purchased more then once */
                return false }

            // only purchased products can be confirmed
            if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                const consumable: boolean = isConsumable(purchaseTransactionState.productIdentifier)
                this.inAppPurchaseManager.orderConfirm(purchaseTransactionState, consumable)
                    .then((result: InAppOrderConfirmResult) => {
                        if (result.success) {
                            // order confirmation has been processed
                        }
                    })

            }
        }
    \n

    Restore purchases

    \n

    Restore purchases will get you all items the user already purchased.
    \nThe purchase state of the restored product will be called on the InAppPurchaseStateUpdateListener#onUpdateHistory method.

    \n
        // additional imports required
        import { InAppOrderHistoryResult } from 'nativescript-in-app-purchase'

        restoreProducts() {
            this.inAppPurchaseManager.purchaseHistory()
                .then((result: InAppOrderHistoryResult) => {
                    if (result.success) {
                        // purchase history requested
                        // handle it in `InAppPurchaseStateUpdateListener.onUpdateHistory(...)`
                    }
                })
        }
    \n

    API

    \n\n

    DEMO App

    \n

    There is a demo angular app project included.
    \nCheckout this repo and read the DEMO Readme

    \n

    License

    \n

    Apache License Version 2.0, January 2020

    \n

    Donation

    \n

    Donate with Bitcoin
    \n3GFxvCK4nnTvHcLpVtFDQhdjANzRGBV6G6
    \n\"Open
    \nOpen in Wallet

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mapo80/nativescript-range-seek-bar":{"name":"@mapo80/nativescript-range-seek-bar","version":"1.0.3","license":"Apache-2.0","readme":"

    NativeScript Range Seek Bar

    \n

    A NativeScript Range Seek Bar widget.

    \n

    Based on

    \n

    TTRangeSlider for iOS

    \n

    Crystal Range Seekbar for Android

    \n

    Installation

    \n

    Run tns plugin add nativescript-range-seek-bar

    \n

    API

    \n

    Events

    \n\n

    Instance Properties

    \n\n

    Usage in Angular

    \n\n
    import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptUIRangeSeekBarModule,
            //......
    \t],
        //......
    })
    \n
    <!-- app.component.html -->
    <StackLayout>
        <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [minStartValue]=\"rangeSeekBarProp.minStartValue\"
            [maxStartValue]=\"rangeSeekBarProp.maxStartValue\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
            (rangeSeekBarChanged)=\"rangeSeekBarChanged($event)\" (rangeSeekBarFinalValue)=\"rangeSeekBarFinalValue($event)\" class=\"range-seek-bar\">    </RangeSeekBar>
    </StackLayout>
    \n
    /*app.css*/
    .range-seek-bar {
        bar-color: #8990C4;
        bar-highlight-color: #2434AD;
        thumb-color: #1A246D;
        bar-height: 10;
        corner-radius: 30;
    }
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

        public rangeSeekBarProp = {
            minValue: 0,
            maxValue: 100,
            minStartValue: 0,
            maxStartValue: 100,
            minRange: 0,
            step: 1
        };

        constructor() { }

        rangeSeekBarChanged(event: RangeSeekBarEventData) {
            console.log(\"rangeSeekBarChanged: \", event.value);
        }

        rangeSeekBarFinalValue(event: RangeSeekBarEventData) {
            console.log(\"rangeSeekBarFinalValue: \", event.value);
        }
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
    $ cd nativescript-range-seek-bar/src
    $ npm install
    $ npm run demo.ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

    \n

    If you want to run the Angular demo simply use the demo.ios.ng.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ngn-partials":{"name":"ngn-partials","version":"1.0.3","license":"MIT","readme":"

    ngn-partials-app

    \n

    This project was generated with Angular CLI version 6.1.0.

    \n

    Development server

    \n

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    \n

    Code scaffolding

    \n

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

    \n

    Build

    \n

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    \n

    Running unit tests

    \n

    Run ng test to execute the unit tests via Karma.

    \n

    Running end-to-end tests

    \n

    Run ng e2e to execute the end-to-end tests via Protractor.

    \n

    Further help

    \n

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-openid":{"name":"nativescript-openid","version":"1.2.7","license":"Apache-2.0","readme":"

    # Angular OIDC Client

    \n

    Universal OpenID Connect Client library for Angular

    \n

    Installation:

    \n

    npm install angular-oidc-client --save

    \n

    Usage

    \n

    auth.ts (NativeScript)

    \n
    import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        text=""\n        textWrap="true"\n        class="icon-moon rotating"\n        verticalAlignment="middle"\n        style="font-size: 30; display: inline-block;"\n        horizontalAlignment="center">\n    </Label>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    auth.ts (Web)

    \n
    declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router, ActivatedRoute } from "@angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""]);\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"]);\n                },\n                clientId: "...",\n                clientSecret: "...",\n                REDIRECT: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.queryParams\n        .subscribe((params) => {\n        let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n        });\n        this.loadStarted({url: window.location.href });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    app.module.ts

    \n
    ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService, AuthInterceptor } from "angular-oidc-client";\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
    \n

    Notes:

    \n

    Please setup the Redirect Condition OpenID setting to equal "*" (Any)

    \n

    Copyright (C)2018 @medozs Apache-2.0 License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dna-netservices":{"name":"nativescript-dna-netservices","version":"2.0.1","license":"Apache-2.0","readme":"

    NativeScript DNA NetServices

    \n

    \"nativescript-dna-netservices\"

    \n

    NativeScript 8.0 based plugin for Bonjour/ZeroConf and network monitoring. RxJS based APIs for service discovery, browsing and publication, and networking monitoring.

    \n

    The plugin offers cross-platform utility APIs to retrieve or query Bonjour/ZeroConf related information. The APIs are available for iOS and Android platforms.

    \n

    Kindly visit typescript demo repository for practical implementation guidance and hints. The demo is tested with iOS and Android devices.

    \n

    The Changelogs selection is located towards the end of the document.

    \n

    I welcome an appreciation email with suggestions and feedback. It will encourage me to provide new APIs and support.\nMy email-id is Deepak Arora. Enjoy and I will be looking forward to your valuable feedback.

    \n

    Features

    \n\n

    More about Bonjour/ZerConf can be found at:\nApple’s Bonjour implementation and Android mDNSResponder

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-dna-netservices
    \n

    This command automatically installs the necessary files, as well as stores nativescript-dna-netservices as a dependency in your project's package.json file.

    \n\n

    API

    \n

    NativeScript DNA NetServices APIs are classified into the following services:

    \n\n

    Each of these services with their APIs is covered below.

    \n

    - NetworkMonitorService

    \n

    Depending on the type of framework, NetworkMonitorService can be imported using one of the following ways:

    \n

    TypeScript:

    \n
    import { NetworkMonitorService } from \"nativescript-dna-netservices\";
    \n

    JavaScript:

    \n
    const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
    const NetworkMonitorService = nativescript_dna_netservices.NetworkMonitorService;
    \n

    Below are the APIs available in NetworkMonitorService:

    \n

    getWiFiIpAddress: Retrieves IPv4 address of a device assigned for communication in a WiFi network.

    \n
    NetworkMonitorService.getWiFiIpAddress().subscribe(
      ipAddr => console.info(ipAddr),
      err => console.error(err),
      () => console.log(\"completed\")
    );
    \n

    getCellularIpAddress: Gets IPv4 address of a device used for communication in a mobile/cellular network. It's not a public IP address.

    \n
    NetworkMonitorService.getCellularIpAddress().subscribe(
      ipAddr => console.info(ipAddr),
      err => console.error(err),
      () => console.log(\"completed\")
    );
    \n

    dumpIpAddress: Gets various addresses (IPv4 and IPv6) of a device attached to interface cards. Observer's next handler receives an array of type IAddress if addresses are retrieved successfully.

    \n
    NetworkMonitorService.dumpIpAddress().subscribe(
      addrs => console.info(addrs),
      err => console.error(err),
      () => console.log(\"completed\")
    );
    \n

    getNetworkStatus: Depending on a network type a device is connected to, it gets network status which includes connection type (wifi, cellular, or none) and IPv4 address. If for some reason the device is not on a network, then the status would be an empty address with the connection type none.

    \n
    NetworkMonitorService.getNetworkStatus().subscribe(
      networkStatus => console.info(networkStatus.connType, networkStatus.ipAddress),
      err => console.error(err),
      () => console.log(\"completed\")
    );
    \n

    monitorNetwork: It tracks and notifies of any changes in network condition a device sees. If for some reason the device is not on a network, then the status would be an empty address with the connection type none.

    \n
    const networkStatusSubscription = NetworkMonitorService.monitorNetwork()
    .subscribe(ns => {
      let connType = \"\";
      switch (ns.connType) {
        case networkType.wifi:
          connType = \"WiFi\";
          break;
        case networkType.cellular:
          connType = \"Cellular\";
          break;
        default:
          connType = \"Unavailable\";
      }
      console.info(connType, ns.ipAddress);
    });
    \n

    - ZeroConfService

    \n

    The ZeroConfService class represents a network service, either one your application publishes or is a client of. This class uses multicast DNS to convey information about network services to and from your application.

    \n

    Depending on the type of framework, ZeroConfService can be imported using one of the following ways:

    \n

    TypeScript:

    \n
    import { ZeroConfService } from \"nativescript-dna-netservices\";
    \n

    JavaScript:

    \n
    const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
    const ZeroConfService = nativescript_dna_netservices.ZeroConfService;
    \n

    Below are the APIs offered by ZeroConfService:

    \n

    publish: Provides a convenient way for publishing a network service of type type at the socket location specified by domain, name, and port. In the event of success, observer's next handler receives data of type ZeroConf. Furthermore, in the event of failure, the error handler receives an error object which looks like { errorCode: zeroConfError, zeroConf: ZeroConf }. Both ZeroConf and zeroConfError can be imported using one of the above-mentioned ways from nativescript-dna-netservices.

    \n
    const zeroConfService = new ZeroConfService();
    const registrationSubscription = zeroConfService
      .publish({
        domain: \"local.\",
        type: \"_my_special_radio_service._tcp.\",
        name: \"Radio Service\",
        port: 61234
      })
      .subscribe(data => console.info(data), error => console.error(error));
    \n\n

    resolve: Performs a resolve process for the service of a given type and name within a specified domain. If the service is available, observer's next handler receives ZeroConf data which contains socket information for your application to connect to the service. In the event of failure, the error handler receives an error object which looks like { errorCode: zeroConfError, zeroConf: ZeroConf }.

    \n
    const zeroConfService = new ZeroConfService();
    const registrationSubscription = zeroConfService
      .resolve({
        domain: \"local.\",
        type: \"_my_special_radio_service._tcp.\",
        name: \"Radio Service\"
      })
      .subscribe(data => console.info(data), error => console.error(error));
    \n

    - ZeroConfServiceBrowser

    \n

    The ZeroConfServiceBrowser class offers a possibility to browse services of a certain type within a given domain.

    \n

    Depending on the type of framework, ZeroConfServiceBrowser can be imported using one of the following ways:

    \n

    TypeScript:

    \n
    import { ZeroConfServiceBrowser } from \"nativescript-dna-netservices\";
    \n

    JavaScript:

    \n
    const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
    const ZeroConfServiceBrowser = nativescript_dna_netservices.ZeroConfServiceBrowser;
    \n

    Below are the APIs offered by ZeroConfServiceBrowser:

    \n

    searchForServicesOfTypeInDomain: Starts a search for services of a particular type within a specific domain.

    \n
    const zeroConfServiceBrowser = new ZeroConfServiceBrowser();
    const subscription = zeroConfServiceBrowser
        .searchForServicesOfTypeInDomain(\"_my_special_radio_service._tcp\", \"local.\")
        .subscribe(data => console.info(data), error => console.error(error));
    \n

    If the services are available, observer's next handler will be invoked multiple times with ZeroConf data which your application can use to resolve to socket info to make network connection. And, if there is an error, the error handler receives a zeroConfError error code.

    \n

    Combining ZeroConfService & ZeroConfServiceBrowser

    \n

    Sometimes functionalities from these services can be combined together to create new purposes.\nOne of the use cases is to have socket information for every browsed service. To accomplish this, RxJS pipeable operators come in handy. Below is the sample snippet illustrating the same.

    \n
    const patternToSearch = /^radio_channel/i;
    const serviceFinderTimeout = timer(3000);
    const serviceFinder = zeroConfServiceBrowser
      .searchForServicesOfTypeInDomain(\"_my_special_radio_service._tcp\", \"local.\")
      .pipe(
        filter(service => service.name && service.name.match(patternToSearch).length > 0),
        distinct(),
        concatMap(service =>
          zeroConfService.resolve(service).pipe(
            filter(service => service.status === zeroConfStatus.success),
            take(1),
            observeOn(asyncScheduler)
          )
        ),
        takeUntil(serviceFinderTimeout)
      );

    serviceFinder.subscribe(
      service => console.info(service),
      error => console.error(error),
      () => console.info(\"Completed Here...\")
    );
    \n

    Changelogs:

    \n\n

    License

    \n

    MIT license (see LICENSE file)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-clevertap":{"name":"nativescript-clevertap","version":"0.2.3","license":"Apache-2.0","readme":"

    NativeScript CleverTap Plugin

    \n

    Install and Integration

    \n

    tns plugin add nativescript-cleartap

    \n

    iOS

    \n

    Add the following to your Info.plist. under app/App_Resources/iOS

    \n
    \t<key>CleverTapAccountID</key>
    \t<string>YOUR-TEST-ACCOUNTID</string>
    \t<key>CleverTapToken</key>
    \t<string>YOUR-TEST-TOKEN</string>
    \n

    Android

    \n

    Add the following to your AndroidManifestxml. under app/App_Resources/Android/src/main

    \n
    \t<meta-data
    \t\tandroid:name=\"CLEVERTAP_ACCOUNT_ID\"
    \t\tandroid:value=\"YOUR-TEST-ACCOUNTID>\"/>

    \t<meta-data
    \t\tandroid:name=\"CLEVERTAP_TOKEN\"
    \t\tandroid:value=\"YOUR-TEST-TOKEN\"/>
    \n

    Additional Resources

    \n\n

    Example JS Usage

    \n

    Grab a reference

    \n

    import { cleverTap } from 'clevertap-react-native';

    \n

    Record an event

    \n

    cleverTap.pushEvent('testEvent', { attr1 : "val1"});

    \n

    Update a user profile

    \n

    cleverTap.updateProfile({'Name': 'testUserA1', 'Identity': '123456', 'Email': 'test@test.com', 'custom1': 123});

    \n

    For more:

    \n\n

    Road Ahead:

    \n

    Implement all the methods that are available in the sdk.

    \n

    Pull requests are always welcome!

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-handshake":{"name":"@yoonit/nativescript-handshake","version":"1.0.0","license":"MIT","readme":"

    nativescript-yoonit-handshake

    \n

    A NativeScript NPM implementing dynamic SSL pinning for Android and iOS.

    \n\n

    About

    \n

    The SSL pinning is a technique mitigating man-in-the-middle attacks against the secure HTTP communication, but has a drawback, the certificate's expiration date. This resolve this problem, implementing dynamic SSL pinning, providing easy to use fingerprint validation on the TLS handshake. The remote server must be the responsible to update the certificate(s).

    \n

    Installation

    \n
    npm i -s @yoonit/nativescript-handshake
    \n
    \n

    Special thanks and credits...

    \n

    The current version of the library depends on [Wultra SSL Pinning] ([Android]((https://github.com/wultra/ssl-pinning-android) and iOS)).

    \n
    \n

    Usage

    \n
    function updateFingerprint() {
      this.$yoo.handshake.updateFingerprints(
        \"YOUR PUBLIC KEY\",
        \"YOUR SERVICE URL\",
        (result) => {
          switch (result) {
            case HandshakeResult.OK:
              // - Everything is OK;
              // - No Action is required;
              return;

            case HandshakeResult.STORE_IS_EMPTY:
              // - The update request succeeded;
              // - Result is still an empty list of certificates;
              // - May loading & validating of remote data succeeded;
              // - All loaded certificates are already expired;\"
              return;

            case HandshakeResult.NETWORK_ERROR:
              // - The update request failed on a network communication.
              return;

            case HandshakeResult.INVALID_DATA:
              // The update request returned the data which did not pass the signature validation.
              return;

            case HandshakeResult.INVALID_SIGNATURE:
              // The update request returned the data which did not pass the signature validation.
              return;

            case HandshakeResult.INVALID_URL_SERVICE:
              // The url service does not exist or is invalid.
              return;
          }
        }
      );
    }
    \n

    API

    \n

    Method

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionParametersDescription
    updateFingerprintpublicKey: string, serviceUrl: string, callback: (result: string) => voidUpdate the list of fingerprints from the remote server. The method is asynchronous. Response can get in the callback.
    \n

    Handshake Result

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    HandshakeResultDescription
    "OK"
    • Everything is OK;
    • No Action is required;
    STORE_IS_EMPTY"
    • The update request succeeded;
    • Result is still an empty list of certificates;
    • May loading & validating of remote data succeeded;
    • All loaded certificates are already expired;
    • All loaded certificates are already expired;
    "NETWORK_ERROR"The update request failed on a network communication.
    "INVALID_DATA"The update request returned the data which did not pass the signature validation.
    "INVALID_SIGNATURE"The update request returned the data which did not pass the signature validation.
    "INVALID_URL_SERVICE"The url service does not exist or is invalid.
    \n

    To contribute and make it better

    \n

    Clone the repo, change what you want and send PR.

    \n

    For commit messages we use Conventional Commits.

    \n

    Contributions are always welcome!

    \n\n \n\n
    \n

    Code with ❤ by the Cyberlabs AI Front-End Team

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-images-generator-hook":{"name":"nativescript-images-generator-hook","version":"3.0.1","license":"MIT","readme":"

    Nativescript images generator hook

    \n

    Nativescript hook that generates App_Resources images based on a single high resolution image.

    \n

    Installation

    \n
    npm install nativescript-images-generator-hook --save-dev
    \n

    Usage

    \n

    Put all your 3x PNG images in App_Resources/images.

    \n

    For instance, if you put navbar_logo@3x.png in this folder, it will be available as res://navbar_logo.\nIf you put an image without scale suffix, it will use it as a x1 image. You can provide any integer scale from 1 to 5.

    \n

    License

    \n

    MIT License - Copyright (c) 2020 Creatiwity

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"whocode-nativescript-filepicker":{"name":"whocode-nativescript-filepicker","version":"1.0.17","license":"MIT","readme":"

    NativeScript Simple FilePicker Plugin

    \n

    A simple plugin for providing file picker functionality to your NativeScript app.

    \n

    Installation

    \n
    tns plugin add whocode-nativescript-filepicker
    \n

    Usage

    \n
    import { FilePicker } from 'nativescript-simple-filepicker';

    const myPicker = new FilePicker();

    myPicker.openFilePicker({
        extensions?: string[]; // Defaults to all
        multipleSelection?: boolean; // Defaults to false
    }).then((data) => {
        console.log(data.files);
    });
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vidplayer":{"name":"nativescript-vidplayer","version":"1.0.7","license":{"type":"MIT","url":"https://bitbucket.org/win_min_tun/nativescript-vidplayer/src/6246d11e592626b37c72996bbb82914aa86d8b56/LICENSE"},"readme":"

    NativeScript Video Player with Fullscreen support

    \n

    NativeScript Video Player with Fullscreen, auto-play, on complete and on error callbacks. Tested with mp4, mp3, mov

    \n

    Platform Support

    \n

    Currently only support Android. Any collaborator for iOS support is welcomed!

    \n

    ##Android side\n\"alt

    \n

    Usage

    \n

    The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo for full example.

    \n

    \n
        <Video:Vidplayer id=\"video\" src=\"{{ videoSrc }}\" autoPlay=\"true\" onComplete=\"{{ onComplete }}\" onError=\"{{ onError }}\" />
    \n

    Attributes

    \n\n

    Video source (online or local)

    \n\n

    Auto play true/false

    \n\n

    Default is true. Fullscreen button hide/show

    \n\n

    on complete callback

    \n\n

    on error (when video cannot be played) callback

    \n

    Credit

    \n

    Credit goes to the native android library (https://github.com/rtoshiro/FullscreenVideoView) by Toshiro (https://github.com/rtoshiro)

    \n

    Contributing - Support for iOS?

    \n

    Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-amplitude":{"name":"nativescript-amplitude","version":"0.2.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-fab":{"name":"nativescript-animated-fab","version":"0.1.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sample":{"name":"nativescript-sample","version":"0.0.9","license":"ISC","readme":"

    \"Build

    \n

    generate npm package

    \n

    This is cli to create boiler plate for npm package project.

    \n

    Getting Started

    \n

    Installation

    \n

    npm install -g nativescript-sample

    \n

    Usage

    \n

    $ nativescript-sample

    \n

    \"create\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionsDefaultDescription
    project namecreate-npm-packagenpm package name or project name
    semacntic releeasefalse or Noadd semantic denpendencies
    travis setupfalse or Noconfig travis setup .travis.yml
    install dependenciesfalse or Noinstall project dependencies after creating project
    \n

    Semantic Release

    \n
    npm install -g semantic-release-cli
    cd your-module
    semantic-release-cli setup
    \n\"semantic\"\n

    Travis CI Setup

    \n

    Project Structure

    \n

    \"project\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    File/FolderDescriptions
    project/index.jsentry file while creating npm module.
    src/lib/index.jsmain file that you want to publish in npm.
    src/lib/index.spec.jstest file for above file.
    styles/folder for styles if you are creating UI npm module.
    test/index.jsfor testing build files after build.
    .travis.ymlfor Travis CI
    \n

    Commands

    \n\n

    Create Simple NPM package

    \n

    cd your-module

    \n

    Install Dependencies

    \n

    npm installl

    \n

    Add Git Link

    \n

    package.json

    \n
    \"repository\": {
        \"type\": \"git\",
        \"url\": \"git_repository_link\"
    }
    \n

    npm publish - Using Semanctic Release

    \n
    npm install -g commitizen
    npm run commit
    git push
    \n

    npm publish - without Semantic Release LInk

    \n
    npm build
    npm login
    npm publish
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cast":{"name":"nativescript-cast","version":"0.3.0","license":"Apache-2.0","readme":"

    nativescript-cast

    \n

    Chromecast support for NativeScript 6.

    \n

    Requirements

    \n

    You must have a valid Chromecast Application ID. You can obtain one at the Google Cast Developer Console.

    \n

    NativeScript 6 or higher. For lower versions, you can use an older version of this plugin 0.1.2.

    \n

    Installation

    \n
    tns plugin add nativescript-cast
    \n

    Usage

    \n

    Android

    \n

    Set your Application ID.

    \n
    <!-- App_Resources/Android/src/main/res/values/strings.xml -->
    <string name=\"app_id\">4F8B3483</string>
    \n

    The Google Cast design checklist requires a sender app to provide an expanded controller. Include ExpandedControllerActivity in your AndroidManifest.xml.

    \n
    <!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
    <activity
      android:name=\"com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity\"
      android:label=\"@string/app_name\"
      android:launchMode=\"singleTask\"
      android:screenOrientation=\"portrait\">
      <intent-filter>
        <action android:name=\"android.intent.action.MAIN\"/>
      </intent-filter>
      <meta-data
        android:name=\"android.support.PARENT_ACTIVITY\"
        android:value=\"com.tns.NativeScriptActivity\"/>
    </activity>
    \n

    If you are using Webpack, add 'nativescript-cast/cast-options-provider' to appComponents. You will have to repeat this step after performing a tns update.

    \n
    // webpack.config.js
    const appComponents = [
      'tns-core-modules/ui/frame',
      'tns-core-modules/ui/frame/activity',
      'nativescript-cast/cast-options-provider'
    ];
    \n

    Alternatively you can create a custom webpack configuration. See the demo for an example.

    \n
    \n

    iOS

    \n

    Set your Application ID.

    \n
    <!-- App_Resources/iOS/Info.plist -->
    <key>AppID</key>
    <string>4F8B3483</string>
    \n

    Add the following before your application.run(). This will initialise the GCKCastContext with the Application ID from your Info.plist file.

    \n
    import * as application from 'tns-core-modules/application';
    import * as utils from 'tns-core-modules/utils/utils';

    application.on(application.launchEvent, (args) => {
      if (args.ios !== undefined) {
        // AppID value from Info.plist
        const mainBundle = utils.ios.getter(NSBundle, NSBundle.mainBundle);
        const appId = mainBundle.infoDictionary.objectForKey('AppID');

        const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
        GCKCastContext.setSharedInstanceWithOptions(castOptions);
      }
    });
    \n

    ⚠️ iOS 12+ & Xcode 10 ⚠️

    \n

    If developing using Xcode 10 and targeting iOS devices running iOS 12 or higher, the "Access WiFi Information" capability is required in order to discover and connect to Cast devices. The plugin comes with an app.entitlements which will add this capability to the workspace, however, you must also Add the Access WiFi information feature to your App ID .

    \n

    See iOS sender setup for more info.

    \n

    ⚠️ iOS 13+ & Guest Mode ⚠️

    \n

    iOS 13+ requires Bluetooth and Microphone permissions in order to use Guest Mode with Chromecast. This plugin sets these permissions in the Info.plist file.

    \n

    See iOS Guest Mode for more info.

    \n
    \n

    Place CastButton in to your view.

    \n

    NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      loaded=\"pageLoaded\"
      class=\"page\"
      xmlns:cast=\"nativescript-cast\"
    >
      <ActionBar title=\"App Name\">
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <cast:CastButton cast=\"{{ handleCastEvent }}\" />
          </StackLayout>
        </ActionItem>
      </ActionBar>
      <!-- ... -->
    </Page>
    \n

    Angular

    \n

    Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

    \n
    import { NativescriptCastModule } from 'nativescript-cast/angular';

    @NgModule({
      imports: [
        NativescriptCastModule
      ]
    });
    \n

    Include in your template.

    \n
    <ActionBar [title]=\"App Name\" >
      <ActionItem ios.position=\"right\">
        <StackLayout>
          <CastButton (cast)=\"handleCastEvent($event)\"></CastButton>
        </StackLayout>
      </ActionItem>
    </ActionBar>
    \n

    Vue

    \n

    Register the element in your app's main entry point, typically main.ts.

    \n
    Vue.registerElement('CastButton', () => require('nativescript-cast').CastButton);
    \n

    Include in your template.

    \n
    <ActionBar title=\"App Name\">
      <ActionItem ios.position=\"right\">
        <StackLayout>
          <CastButton @cast=\"handleCastEvent\" />
        </StackLayout>
      </ActionItem>
    </ActionBar>
    \n

    Event handler

    \n

    Set up an event handler for all cast events. The cast instance is available on args.object.

    \n
    handleCastEvent(args): void {
      console.log('cast: ' + args.object);
      console.log('eventName: ' + args.data.eventName);
    }
    \n

    Casting

    \n

    When the Cast receiver is ready, you can load your media.

    \n
    const mediaInfo = {
      contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
      contentType: 'video/mp4',
      streamType: 'BUFFERED',
      duration: undefined,
      metadata: {
        metadataType: 'MOVIE',
        title: 'Tears of Steel',
        subtitle: 'By Blender Foundation',
        description: 'Sintel is an independently produced short film, initiated by the Blender Foundation.',
        images: [
          {
            url: 'http://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
            width: 480,
            height: 270,
          }
        ]
      },
      textTracks: [
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
          contentType: 'text/vtt',
          name: 'English',
          language: 'en'
        },
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
          contentType: 'text/vtt',
          name: 'Spanish',
          language: 'es'
        }
      ],
      textTrackStyle: {
        foregroundColor: '#0000cc',
        backgroundColor: '#00cc00',
      },
      customData: {
        anything: 'you like'
      }
    };

    cast.loadMedia(mediaInfo);
    \n

    API

    \n

    Events

    \n

    Event names follow the Android naming structure.\niOS events are passed from GCKSessionManagerListener, GCKRemoteMediaClientListener and GCKMediaQueueDelegate.\nAndroid events are passed from SessionManagerListener, MediaRouter.Callback and MediaQueue.Callback.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NativeScriptAndroidiOS
    onSessionEndedonSessionEndeddidEndSession
    onSessionEndingonSessionEndingwillEndSession
    onSessionResumedonSessionResumeddidResumeSession
    onSessionResumingonSessionResumingwillResumeSession
    onSessionStartedonSessionStarteddidStartSession
    onSessionStartFailedonSessionStartFaileddidFailToStartSession
    onSessionStartingonSessionStartingwillStartSession
    onSessionSuspendedonSessionSuspendeddidSuspendSession
    onDeviceVolumeChangedonRouteVolumeChangeddidReceiveDeviceVolume
    onDeviceChangedonRouteChangeddidUpdateDevice
    onMediaStatusChangedonStatusUpdatedremoteMediaClientDidUpdateMediaStatus
    mediaQueueWillChangemediaQueueWillChangemediaQueueWillChange
    itemsReloadeditemsReloadedmediaQueueDidReloadItems
    itemsInsertedInRangeitemsInsertedInRangedidInsertItemsInRange
    itemsUpdatedAtIndexesitemsUpdatedAtIndexesdidUpdateItemsAtIndexes
    itemsRemovedAtIndexesitemsRemovedAtIndexesdidRemoveItemsAtIndexes
    mediaQueueChangedmediaQueueChangedmediaQueueDidChange
    \n

    All unlisted events are ignored. See related documentation for futher details.

    \n

    Android

    \n\n

    iOS

    \n\n

    Methods

    \n

    See cast.types for method options.

    \n\n

    TODO

    \n\n

    Acknowledgements

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tjw-dev/nativescript-microsoft-appcenter":{"name":"@tjw-dev/nativescript-microsoft-appcenter","version":"3.0.4","license":"Apache-2.0","readme":"

    Microsoft App Center plugin for NativeScript

    \n

    Requirements

    \n

    Before you begin, please make sure that the following prerequisites are met:

    \n

    Node.js

    \n\n

    NativeScript

    \n\n

    Microsoft App Center

    \n\n

    Installation

    \n
    tns plugin add nativescript-microsoft-appcenter
    \n

    Distribute Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    YESYES
    \n

    Diagnostics Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    CrashesYESYES
    \n

    Analytics Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    Overview: Active users, daily sessions per user, session duration, top devices, countries, languages and active users per version.YESYES
    Events: Event name, Count, Trend, Users, User Change and Per User.YESYES
    Log flowYESYES
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sexy-button":{"name":"nativescript-sexy-button","version":"0.1.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-autocomplete-x":{"name":"nativescript-autocomplete-x","version":"0.0.4","license":"MIT","readme":"

    [WORK - IN - PROGRESS ]

    \n

    [ only iOS so far ]

    \n

    nativescript-autocomplete-x

    \n

    nativescript-autocomplete-x is a NativeScript plugin for autocompleting (suggesting) text field content

    \n
    On iOS
    \n

    we are using:\nSearchTextField\nor actually my sweet fork ;)

    \n
    On Android
    \n

    that is not available yet

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/chrum/nativescript-autocomplete-x
    cd nativescript-autocomplete-x/src
    npm run demo.ios
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/chrum/nativescript-autocomplete-x
    cd nativescript-autocomplete-x/src
    npm run demo-angular.ios
    \n

    Installation

    \n
    tns plugin add nativescript-autocomplete-x
    \n

    Usage

    \n

    Core

    \n

    IMPORTANT !!! Make sure you include xmlns:acx="nativescript-autocomplete-x" on the Page element

    \n
    <Page class=\"page\" xmlns:acx=\"nativescript-autocomplete-x\">
        <StackLayout>
            <acx:AutocompleteX placeholder=\"check autocomplete...\"
                               currentTextInResultsPrefix=\"Use: \"
                               items=\"{{ ['First', 'Second', 'Third'] }}\"
                               selected=\"onSelected\">    </acx:AutocompleteX>
        </StackLayout>
    </Page>
    \n

    Angular

    \n

    Include AutocompleteXModule in your @NgModule
    \nIMPORTANT !!! you need to do it for every module that will be autocompleting things ;)

    \n
    import { AutocompleteXModule } from 'nativescript-autocomplete-x/angular';

    @NgModule({
        imports: [
            AutocompleteXModule,
            ...
        ],
        ...
    })
    \n
    <AutocompleteX [placeholder]=\"'Placeholder...'\"
                   [items]=\"items\"
                   [currentTextInResultsPrefix]=\"'Use: '\"
                   (selected)=\"onSelected($event)\">
    </AutocompleteX>
    \n

    API [ TODO ]

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    textstringGets or sets the text
    items[ ]Array<string>array with strings that should be used as autocomplete source
    hintstringPlaceholder
    editablefalseboolean
    currentTextInResultsPrefixstringIf set then typed text will appear as the first item on the suggestions list prefixed with this value.

    Example
    if this one is set to 'Use:'
    then first item on the suggestions list will be 'Use: {typed text}'
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    selected(args: { text: string}): voidfired when selected suggestion gets tapped
    \n

    Troubleshooting

    \n

    iOS

    \n

    TODO

    \n\n

    Authors

    \n

    Chrystian Ruminowicz

    \n

    License

    \n

    This project is licensed under the MIT license

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook":{"name":"nativescript-hook","version":"0.2.5","license":"Apache-2.0","readme":"

    nativescript-hook

    \n

    This module gives you an easier way to install hooks into NativeScript projects when using the tns install <module> command. A project hook is some sort of script that is configured to be executed when the NativeScript CLI executes some action.

    \n

    Hooks go into the hooks/ folder of a project. For example, when tns prepare ... is executed, all script files in the hooks/before-prepare/ and hooks/after-prepare/ folders are executed, as well.

    \n

    This module simplifies the process of installing the scripts into the right project folder.

    \n

    How to use

    \n

    Describe the hooks

    \n

    First, add a description of your hooks to the module's package.json. Here's an example:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"before-prepare\",
            \"script\": \"lib/before-prepare.js\"
          }
        ]
      },
    }
    \n

    The above specifies that the script lib/before-prepare.js should be executed when the tns prepare ... command is executed. the "type" property specifies the type of the hook to install. The "script" property specifies the path to the script to execute. You can add more hooks by extending the "hooks" array.

    \n

    Install the hooks

    \n

    Add a post-install and pre-uninstall script to your package.json, if you haven't done so already:

    \n
      \"scripts\": {
        ...
        \"postinstall\": \"node postinstall.js\",
        \"preuninstall\": \"node preuninstall.js\"
      },
    \n

    The post-install script (postinstall.js in the example) should contain the following line:

    \n
    require('nativescript-hook')(__dirname).postinstall();
    \n

    The pre-uninstall script (preuninstall.js in the example) should contain the following line:

    \n
    require('nativescript-hook')(__dirname).preuninstall();
    \n

    These two hooks will take care of installing and removing the hooks from the NativeScript project, when your module is installed or uninstalled.

    \n

    tns install <module>

    \n

    NativeScript modules that install hooks are intended to be installed using the tns install <module> command, not through npm directly. During module installation the NativeScript CLI provides information to the post-install script where to put the hooks. The following environment variables are defined when installing through tns install <module>:

    \n\n

    Modules installed this way can be uninstalled simply by running npm rm --save-dev.

    \n

    In-process hooks

    \n

    By default, hooks are executed in a child process and execution continues when the child process dies. This gives you flexibility when writing your hooks, but doesn't allow you to use any of the services of the CLI.

    \n

    To that end, in-process hooks allow you to execute your hooks in such a way so that you can use any of the services available from the injector. In-process hooks work only for JavaScript hooks. To enable in-process execution, all you need to have is a module.exports = ... statement in the hook. For example, if the hook script is:

    \n
    module.exports = function($logger) {
    };
    \n

    Then, the hook script will be require'd by the CLI and the exported function will be called through the injector.

    \n

    Hooks can take a special injected argument named hookArgs:

    \n
    module.exports = function(hookArgs) {
    };
    \n

    hookArgs is a hash containing all the arguments passed to the hooked method. For example, the prepare hook is activated by the CLI method preparePlatform(platform: string). Here, the hook will get the value of the platform argument in the hookArgs.platform property.

    \n

    If you execute asynchronous code in your hook, you need to return a promise, otherwise execution will continue before your hook completes:

    \n
    var mkdirp = require('mkdirp');
    module.exports = function($logger) {
      return new Promise(function(resolve, reject) {
          mkdirp('somedir', function(err) {
              if (err) {
                reject(err);
              else {
                resolve();
              }
            })
        });
    }
    \n

    And finally, when installing in-process hooks through this module, you need to explicitly specify that using the inject property of the script descriptor in the package.json:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"after-prepare\",
            \"script\": \"lib/after-prepare.js\",
            \"inject\": true
          }
        ]
      },
    }
    \n

    You have the ability to define a custom name to your hook in package.json, this attribute is optional and defaults to the plugin package name:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"after-prepare\",
            \"script\": \"lib/after-prepare.js\",
            \"name\": \"my-custom-hook\"
          }
        ]
      },
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-customerly":{"name":"nativescript-customerly","version":"0.1.0","license":"Apache-2.0","readme":"

    nativescript-customerly

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-customerly
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@parempi/couchbase-lite":{"name":"@parempi/couchbase-lite","version":"1.0.0-alpha.5","license":"Apache-2.0","readme":"

    @parempi/couchbase-lite

    \n

    It's a NativeScript plugin for Couchbase Lite. Since it's alpha stage project, you're better off using more mature and\nstable solution by Osei Fortune for now. I've been using his plugin extensively in a few projects. Although it features quite neat API, it forced me to go hucky in order to perform joins and execute\nCouchbase functions. Besides, it blocks the main thread, thus significantly degrades\napp responsiveness.\nI believe, plugins should build on top of native libraries not limiting their features.

    \n

    Disclaimer: work in progress, API is subject to change, no iOS support.

    \n
      \n
    1. What is Couchbase?
      2. \n
    2. Installing
      3. \n
    3. Usage\n
        \n
      1. Overview
        2. \n
      2. Demo app
        3. \n
      3. Native APIs access
        4. \n
      4. The plugin's API\n
          \n
        1. Databases
          2. \n
        2. Documents
          3. \n
        3. Transactions
          4. \n
        4. Queries
          5. \n
        \n
        5. \n
      \n
      4. \n
    4. License
      5. \n
    \n

    Introducing Couchbase Lite

    \n

    Source: https://docs.couchbase.com/couchbase-lite/2.8/index.html

    \n
    \n

    Couchbase Lite is an embedded, NoSQL JSON Document Style database for your mobile apps.

    \n
    \n
    \n

    You can use Couchbase Lite as a standalone embedded database within your mobile apps, or with Sync Gateway and Couchbase Server to provide a complete cloud to edge synchronized solution get the agility of sql and the flexibility of json

    \n
    \n
    \n

    Work locally . . .

    \n

    Couchbase Lite is designed to work with data stored locally and includes

    \n\n
    \n
    \n

    Sync at the edge . . .

    \n

    It manages data sync automatically through:

    \n\n
    \n

    Installing

    \n

    ns plugin add @parempi/couchbase-lite
    \nThe minimum required Android SDK is version 22 (Lollipop)

    \n

    If you're going to ship a zipped prebuilt database with your app, add the following line in webpack.config.js:
    \nwebpack.Utils.addCopyRule("**/*.zip");

    \n

    Usage

    \n

    Overview

    \n
    import {open, cbl} from \"@parempi/couchbase-lite\";

    const {Expression:{property, string, intValue}, Ordering:{property: orderingProperty}} = cbl;

    open(\"getting-started\").then(async (database) => {
      const mutableDoc = database.createDocument({version: 2.0, type: \"SDK\"});

      mutableDoc.languages = ['JavaScript', 'Java', 'Objective-C'];
      database.save(mutableDoc);
      

      const sdks = await database.fetch(
          query => query
            .where(property(\"type\").equalTo(string(\"SDK\")))
            .orderBy([orderingProperty(\"version\").descending()])
            .limit(intValue(5))
      )
        .rows();

      for (const sdk of sdks) {
        sdk.manyReleases = true;
      }
      try {
          await database.saveInBatch(sdks);
      } catch (e) {
          console.log(e.message);
      }
    });
    \n

    Demo app

    \n

    It's a very simple vanilla NativeScript app.\nTo be improved.

    \n

    Native APIs access

    \n

    As you might know, NativeScript gives you direct access to native APIs right through JavaScript. This plugin provides you with\nd.ts typings to enable IntelliSense. As of now, only Android is supported. JavaScript's syntax and NativeScript are enough\nto reproduce examples given in the official Android guide with near to no modifications.

    \n
    \nFor example, this JavaScript code corresponds\n
    import {Utils} from \"@nativescript/core\";
    import {knownFolders} from \"@nativescript/core/file-system\";



    // (1) Initialize the Couchbase Lite system and enable IntelliSense
    import \"@parempi/couchbase-lite\";
    // or you can import any of exported names (see API reference)
    import {cbl} from \"@parempi/couchbase-lite\";


    // then IDEs will import these for you as you code
    import CouchbaseLite = com.couchbase.lite.CouchbaseLite;
    import DatabaseConfiguration = com.couchbase.lite.DatabaseConfiguration;
    import Database = com.couchbase.lite.Database;
    import MutableDocument = com.couchbase.lite.MutableDocument;
    import SelectResult = com.couchbase.lite.SelectResult;
    import QueryBuilder = com.couchbase.lite.QueryBuilder;
    import DataSource = com.couchbase.lite.DataSource;
    import Expression = com.couchbase.lite.Expression;

    // here's an example of another style
    const {URLEndpoint, ReplicatorConfiguration, BasicAuthenticator, Replicator, ReplicatorChangeListener} = cbl;


    // (2) Get the database (and create it if it doesn’t exist).
    const config = new DatabaseConfiguration();

    config.setDirectory(knownFolders.currentApp().parent.path);

    const database = new cbl.Database(\"getting-started\", config);


    // (3) Create a new document (i.e. a record) in the database.
    let mutableDoc = new MutableDocument()
      .setFloat(\"version\", 2.0)
    .setString(\"type\", \"SDK\");

    // (4) Save it to the database.
    database.save(mutableDoc);

    // (5) Update a document.
    mutableDoc = database.getDocument(mutableDoc.getId()).toMutable();
    mutableDoc.setString(\"language\", \"JavaScript\");
    database.save(mutableDoc);
    const document = database.getDocument(mutableDoc.getId());
    // (6) Log the document ID (generated by the database) and properties
    console.log( \"Document ID :: \" + document.getId());
    console.log(\"Learning \" + document.getString(\"language\"));

    // (7) Create a query to fetch documents of type SDK.
    const query = QueryBuilder.select([SelectResult.all()])
      .from(DataSource.database(database))
      .where(Expression.property(\"type\").equalTo(Expression.string(\"SDK\")));
    const result = query.execute();
    console.log(\"Number of rows ::  \" + result.allResults().size());

    // (8) Create replicators to push and pull changes to and from the cloud.
    const targetEndpoint = new URLEndpoint(new java.net.URI(\"ws://localhost:4984/getting-started-db\"));
    const replConfig = new ReplicatorConfiguration(database, targetEndpoint);
    replConfig.setReplicatorType(ReplicatorConfiguration.ReplicatorType.PUSH_AND_PULL);

    // (9) Add authentication.
    replConfig.setAuthenticator(new BasicAuthenticator(\"sync-gateway\", \"password\"));

    // (10) Create replicator (be sure to hold a reference somewhere that will prevent the Replicator from being GCed)
    const replicator = new Replicator(replConfig);

    // (11) Listen to replicator change events.
    replicator.addChangeListener(new ReplicatorChangeListener({
      changed: change => {
        if (change.getStatus().getError() !== null) {
          console.log(\"Error code ::  \" + change.getStatus().getError().getCode());
        }
      }
    }));

    // (12) Start replication.
    replicator.start();
    \n
    \n
    \nto this Java code\n
    // (1) Initialize the Couchbase Lite system
    CouchbaseLite.init(context);

    // (2) Get the database (and create it if it doesn’t exist).
    DatabaseConfiguration config = new DatabaseConfiguration();

    config.setDirectory(context.getFilesDir().

      getAbsolutePath());

    Database database = new Database(\"getting-started\", config);


    // (3) Create a new document (i.e. a record) in the database.
    MutableDocument mutableDoc = new MutableDocument()
      .setFloat(\"version\", 2.0F)
      .setString(\"type\", \"SDK\");

    // (4) Save it to the database.
    database.save(mutableDoc);

    // (5) Update a document.
    mutableDoc = database.getDocument(mutableDoc.getId()).toMutable();
    mutableDoc.setString(\"language\", \"Java\");
    database.save(mutableDoc);
    Document document = database.getDocument(mutableDoc.getId());
    // (6) Log the document ID (generated by the database) and properties
    Log.i(TAG, \"Document ID :: \" + document.getId());
    Log.i(TAG, \"Learning \" + document.getString(\"language\"));

    // (7) Create a query to fetch documents of type SDK.
    Query query = QueryBuilder.select(SelectResult.all())
      .from(DataSource.database(database))
      .where(Expression.property(\"type\").equalTo(Expression.string(\"SDK\")));
    ResultSet result = query.execute();
    Log.i(TAG, \"Number of rows ::  \" + result.allResults().size());

    // (8)  Create replicators to push and pull changes to and from the cloud.
    Endpoint targetEndpoint = new URLEndpoint(new URI(\"ws://localhost:4984/getting-started-db\"));
    ReplicatorConfiguration replConfig = new ReplicatorConfiguration(database, targetEndpoint);
    replConfig.setReplicatorType(ReplicatorConfiguration.ReplicatorType.PUSH_AND_PULL);

    // (9) Add authentication.
    replConfig.setAuthenticator(new BasicAuthenticator(\"sync-gateway\", \"password\"));

    // (10) Create replicator (be sure to hold a reference somewhere that will prevent the Replicator from being GCed)
    Replicator replicator = new Replicator(replConfig);

    // (11) Listen to replicator change events.
    replicator.addChangeListener(change -> {
      if (change.getStatus().getError() != null) {
        Log.i(TAG, \"Error code ::  \" + change.getStatus().getError().getCode());
      }
    });

    // (12) Start replication.
    replicator.start();
    \n
    \n

    Disclaimer:\nOf course, iOS Couchbase Lite native library differs a bit, so I will have to write a shim, so that the same JavaScript code work seamlessly on both platforms.\nCurrently, this plugin does not support iOS.

    \n

    The plugin's API

    \n

    It's very impressive how much we can accomplish — thanks to NativeScript — simply calling native libraries.\nHowever, JavaScript is more dynamic and concise in comparison to some lower level languages Couchbase Lite is written in.\nA downside of JS is that it lacks multithreading.

    \n

    @parempi/couchbase-lite takes advantage of both worlds.

    \n

    Next sections will walk you through the convenient extensions over native Couchbase Lite that I've developed so far.

    \n

    It is highly recommended that you learn more on https://docs.couchbase.com/couchbase-lite/current/index.html.\nThat way you'll be able to set up sync gateway, troubleshoot, use cblite command line tool, and make most of Couchbase Lite.

    \n

    Databases

    \n

    You can create a new database and-or open an existing one, using open convenience function. Just pass in a database name or a PrebuiltDatabase object.

    \n
    const db = await open('exampe');
    \n

    If the database "example" does not exist, the function will unpack and install ${knownFolders.currentApp().path}/example.cblite2.zip archive, in case it's present.

    \n

    open operates in a background thread.

    \n

    You might want to specify a prebuilt database in more details.

    \n
    import PrebuiltDbFolder = com.parempi.couchbase.PrebuiltDbFolder;
    import PrebuiltDbZip = com.parempi.couchbase.PrebuiltDbZip;


    // a db bundled as a folder ${knownFolders.currentApp().path}/assets/example.cblite2 
    open(new PrebuiltDbFolder('example', knownFolders.currentApp().getFolder('assets').path));

    // You can implement your own PrebuiltDb.
    // Wouldn't it be fancy to install a database from cdn?
    open(new MyFancyCdnPrebuiltDb('    example', 'https://cdn.example.com/'));
    \n

    You may find and adb pull an installed database at /data/data/${APPLICATION_ID}/files/${DATABASE_NAME}.cblite2, i.e.knownFolders.currentApp().parent.path)

    \n

    It is highly recommended closing database when it's no longer needed.

    \n
    database.close();
    \n

    Documents

    \n

    // Plain Old JavaScript Object will do
    const POJODocument = {
      type: 'task',
      owner: 'todo',
      title: 'create readme.md',
      createdAt: new Date(),
      // \"id\" is the only property that bears a special meaning
      // if ommited Couchbase Lite will generate an id for you upon persisting in the database
      id: 'task_readme',
    };

    db.save(POJODocument);
    \n
    import {toNativeDate} from \"@parempi/couchbase-lite/toNativeCblConverter\";

    // here is a native document
    const nativeDocument = new MutableDocument('task_readme'); // again, it's possible to omit id

    // for those who prefer verbose syntax and explicit types or aim for extra performace
    nativeDocument
      .setString('    type', 'task')
      .setString('    owner', 'todo')
      .setString('    title', 'create readme.md')
      .setDate('    createdAt', toNativeDate(new Date()));

    db.save(nativeDocument);
    \n

    Now meet proxies.

    \n
    // queries a document from the database or initializes a new one; returns its proxy
    const proxyDocument = db.getDocument('task_readme'); // here an id is mandatory

    // this works
    proxyDocument
      .setString('type', 'task')
      .setString('owner', 'todo')
      .setString('title', 'create readme.md')
      .setDate('createdAt', toNativeDate(new Date()))
      .setArray('tags', 
        new MutableArray()
          .addString('open source')
          .addString('hobby')
      );

    // as well as this
    proxyDocument.type = 'task';
    proxyDocument['owner'] = 'todo';
    proxyDocument.title = 'create readme.md';
    proxyDocument.createdAt = new Date();
    proxyDocument.tags = ['open sorce', 'hobby',];

    db.save(proxyDocument);
    \n

    Why are proxies?\nThey hold references to native objects and mimic familiar Plain Old JavaScript Objects' behaviour while eliminating conversion to/from native types.\nHowever, they're the slowest to access properties because their conversion occurs on demand.

    \n

    So when saving a bunch of extensive documents or querying database becomes a bottleneck, this approach will spare some CPU cycles.

    \n
    // saves a new document and returns its proxy
    const proxyDocument = db.createDocument({
      type: 'task',
      owner: 'todo',
      title: 'create readme.md',
      createdAt: new Date(),
    });
    console.log(proxyDocument.title, proxyDocument.createdAt);

    console.assert(proxyDocument.title === db.getDocument(proxyDocument.getId()).title)

    // update the document
    proxyDocument.owner = 'todo1';
    proxyDocument.lastModified = new Date();
    db.save(proxyDocument);
    \n

    There might be several sources of updates. The same document may be getting updated by replicator and local Database.save call simultaneously.\nSee the official Couchbase Lite guides for details. You can choose a strategy for resolving such situations.

    \n
    import ConcurrencyControl = com.couchbase.lite.ConcurrencyControl;

    db.save({foo: 'bar',}, ConcurrencyControl.FAIL_ON_CONFLICT);
    \n

    Delete a document.

    \n
    db.deleteDocument('docId');
    \n

    Transactions

    \n

    If you’re making multiple changes to a database at once, it’s faster to group them together.\nDatabase.saveInBatch saves the overhead of multiple database commits, greatly improving performance. It prevents UI from blocking by running in a background thread.\nThe following example persists a few documents in batch.

    \n
    const docs = [];
    for (let i = 0; i < 10; i++) {
        docs.push({
            type: \"user\",
            name: \"user\" + i,
            admin: false,
        });
    }
    try {
      database.saveInBatch(docs);
    } catch (e) {
      console.log(e.message);
    }
    \n

    At the local level this operation is still transactional: no other Database instances, including ones managed by the replicator can make changes during the execution of the block, and other instances will not see partial changes.

    \n

    Queries

    \n

    db[ .setAlias(dbAlias: string) ]
    \n .fetch( queryBuilder?: (query: From) => AbstractQuery )
    \n [ .distinct() ]
    \n [ .plain() | .json() ]
    \n ( .rows(...props: SelectResult[]) | column(prop: SelectResult) | value(prop: SelectResult) )

    \n
    import {cbl} from \"@parempi/couchbase-lite\";

    const {Expression: {property, string}, SelectResult: {expression: selectExpression}, ArrayExpression: {every}} = cbl;

    // get list of all document types in the database 
    await database
      .fetch()
      .distinct()
      .plain() // POJO
      .column( selectExpression(property('type')) );  // select only one field




    // count airports in San Diego
    await database.fetch(
      query => query
        .where(
              property(\"type\").equalTo(string(\"airport\"))
          .and(
              property('city').equalTo(string('San Diego'))
          )
        )
    )
      // select the first field of the first row
      .value( selectExpression( Function.count(string(\"*\")) ) );



    // get hotels that welcome guests with pets
    await database.fetch(
      query => query
        .where(
          property(\"pets_ok\").equalTo(booleanValue(true))
        )
    )
      .documents();  // proxified documents


    // find how many top-rated accomodation options are in each city
    const countExpression = Function.count(Expression.all()),
      reviewVar = ArrayExpression.variable(\"review\"),
      overallVar = ArrayExpression.variable(\"review.ratings.Overall\");


    await dbdatabase.fetch(
      query => query
        .where(
              property(\"type\").equalTo(string(\"hotel\"))
          .and(
              property('city').notNullOrMissing())
          .and(
              every(reviewVar).in(property('reviews'))
              .satisfies( overallVar.greaterThanOrEqualTo(intValue(4)) )
            )
        )
        .groupBy( [property(\"city\")] )
        .having( countExpression.greaterThanOrEqualTo(intValue(10)) )
        .orderBy( [Ordering.expression(countExpression).descending()] )
    )
      .rows(
          selectExpression(property('country')),
          selectExpression(property('state')),
          selectExpression(property('city')),
          selectExpression(countExpression).as('hotels_qty')
      ); // proxified dictionaries of specified fields; all fields + meta.id by default (i.e.if nothing selected)




    //  get all flights departing from Riga airport
    const results = await database.setAlias('airline')  /* set alias for join clause */ .fetch(
      query => query
        .join([
            Join.join(DataSource.database(database).as(\"route\"))
            .on(
                Meta.id.from(\"airline\").equalTo(property(\"airlineid\").from(\"route\"))
            )
        ])
        .where(
              property(\"type\").from(\"route\").equalTo(string(\"route\"))
          .and(
              property(\"type\").from(\"airline\").equalTo(string(\"airline\"))
            )
          .and(
              property(\"sourceairport\").from(\"route\").equalTo(string(\"RIX\"))
          )
        )
    )
      .json()
      .rows(
          selectExpression(Function.upper( property(\"name\").from(\"airline\") )),
          selectExpression(property(\"callsign\").from(\"airline\")),
          selectExpression(Function.upper( property(\"destinationairport\").from(\"route\") )),
          selectExpression(property(\"stops\").from(\"route\")),
          selectExpression(Function.upper( property(\"airline\").from(\"route\") ))
      );
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-input-mask-viostec":{"name":"nativescript-input-mask-viostec","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript Input Mask

    \n

    Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

    \n

    This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

    \n

    Installation

    \n
    tns plugin add nativescript-input-mask-viostec
    \n

    Usage

    \n

    Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

    \n

    Documentation for masks is below (from here).

    \n
    \n

    Masks consist of blocks of symbols, which may include:

    \n\n

    Square brackets block may contain any number of special symbols:

    \n
      \n
    1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
      2. \n
    2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
      3. \n
    3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
      4. \n
    4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
      5. \n
    5. _ — mandatory symbol (digit or letter).
      6. \n
    6. - — optional symbol (digit or letter).
      7. \n
    \n

    Other symbols inside square brackets will cause a mask initialization error.

    \n

    Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

    \n

    Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

    \n

    Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

    \n\n

    Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

    \n

    Mask format examples:

    \n
      \n
    1. [00000000000]
      2. \n
    2. {401}-[000]-[00]-[00]
      3. \n
    3. [000999999]
      4. \n
    4. {818}-[000]-[00]-[00]
      5. \n
    5. [A][-----------------------------------------------------]
      6. \n
    6. [A][_______________________________________________________________]
      7. \n
    7. 8 [0000000000]
      8. \n
    8. 8([000])[000]-[00]-[00]
      9. \n
    9. [0000]{-}[00]
      10. \n
    10. +1 ([000]) [000] [00] [00]
      11. \n
    \n
    \n

    Angular

    \n

    Add the following lines to app/app.module.ts:

    \n
    import { InputMaskModule } from 'nativescript-input-mask/angular';

    @NgModule({
        // ...
        imports: [
            // ...
            InputMaskModule,
            // ...
        ],
        // ...
    })
    \n

    Use like a TextField with a mask property and other event properties:

    \n
    import { Component, NgZone, OnInit } from \"@angular/core\";

    @Component({
      selector: \"ns-app\",
      template: `
        <StackLayout>
            <InputMask
                mask=\"([000]) [000]-[0000]\"
                (extractedValueChange)=onExtractedValueChange($event)
                (completedChange)=\"onCompletedChage($event)\">
            </InputMask>
        </StackLayout>
          `    ,
    })
    export class AppComponent {
        onExtractedValueChange(args) {
            // `args.value` includes only extracted characters, for instance
            // `1235551111` would be logged while the UI would display `(123) 555-1111`.
            console.log('Extracted value:', args.value);
        }

        onCompletedChange(args) {
            // `args.value` indicates whether the field contains all mandatory characters.
            console.log('Completed:', args.value)
        }
    }
    \n

    Note that masks can be bound and changed on the fly. See demo app for a working implementation.

    \n

    API

    \n

    The InputMask class extends TextField and implements the following additional properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    mask""The mask property to apply to text entered into the field.
    extractedValue""The value extracted from the field.
    completedfalseIndicates whether all mandatory characters have been filled.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jbento/nativescript-sendbird":{"name":"@jbento/nativescript-sendbird","version":"1.0.33","license":"Apache-2.0","readme":"

    @nativescript/sendbird

    \n
    ns plugin add @nativescript/sendbird
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stomp-client":{"name":"nativescript-stomp-client","version":"0.5.0","license":"Apache-2.0","readme":"

    nativescript-stomp-client

    \n

    A stomp client for Nativescript. iOS only for now.

    \n

    See nativescript-stomp-client demo for example code.

    \n

    Installation

    \n
    tns plugin add nativescript-stomp-client
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    \t// Create the instance
    \tlet aDelegate: StompClientCallback = <your delegate>;
        let stompClient = new StompClient(aDelegate);
        
    \t// connect
    \tstompClient.openSocketWithURL('ws://<hostname>/<path>'); 
        ```)
        
    \t// subscribe to a topic
    \tlet topic = \"/topic/<my-topic>\";
        stompClient.subscribe(topic);
        
    \t// disconnect
    \tstompClient.disconnect();
    \n

    API

    \n
    export interface StompClientCallback {
        stompClientDidDisconnect(client: StompClientCommon)

        stompClientDidConnect(client: StompClientCommon)

        stompClientDidReceiveMessage(client: StompClientCommon, destination: string, jsonBody: string)

        serverDidSendReceipt(client: StompClientCommon, receiptId: string)

        serverDidSendError(client: StompClientCommon, description: string, message: string)

        serverDidSendPing();
    }
    \n

    Android limitations

    \n
      \n
    1. event serverDidSendPing is not yet implemented
      2. \n
    2. sendMessage: parameters withHeaders and withReceipt are ignored
      3. \n
    3. event serverDidSendReceipt doesn't contain the receiptId (it's always undefined)
      4. \n
    4. stompClientDidReceiveMessage: parameter destination is not sent (it's always undefined)
      5. \n
    \n

    TODO

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-floatingactionbutton":{"name":"@nstudio/nativescript-floatingactionbutton","version":"3.0.4","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appcenter-connector":{"name":"nativescript-appcenter-connector","version":"0.0.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chart":{"name":"nativescript-chart","version":"0.0.26","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Experimental plugin to draw charts using nativescript-canvas. It is a direct JS port of MPAndroidChart

    \n

    The main goal was to prevent the need for marshalling all datasets. This is extremelly heavy, costly and uncessary!

    \n

    The demo_vue app show the power of the future plugin:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-geo":{"name":"nativescript-fancy-geo","version":"0.0.1","license":"Apache-2.0","readme":"

    NativeScript Fancy Geo

    \n

    npm i nativescript-fancy-geo

    \n

    Usage

    \n

    TypeScript

    \n
    import { TNSFancyGeo, TNSFenceTransition } from 'nativescript-fancy-geo'

    let lat = 10.6918;
    let lon = 61.2225;
    TNSFancyGeo.hasPermission()
    .then(()=>{
         let notification =  {id: 0, title: \"Test\", body: \"Test Body\"};
                    let circle = {
                        id: null,
                        transition: TNSFenceTransition.ENTER_EXIT,
                        notification,
                        loiteringDelay: 0,
                        points: [lat, lon], radius: 1000
                        };
        
           TNSFancyGeo.createCircleFence(circle);
    }).catch(()=>{
        TNSFancyGeo.requestPermission({always: true})
    })

    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    setOnMessageListener(listener: Function)
    createCircleFence(options: FenceOptions)Promise<string>
    hasPermission()Promise<boolean>
    requestPermission(options: PermissionOptions)Promise<boolean>
    getCurrentLocation(options: LocationOptions)Promise<Location>
    getAllFences()Promise<Fence[]>
    getFence(id: string)Promise<Fence>
    removeAllFences()Promise<any>
    removeFence(id: string)Promise<any>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-conekta-sdk":{"name":"nativescript-conekta-sdk","version":"0.1.0","license":"Apache-2.0","readme":"

    Nativescript Conekta Sdk

    \n

    Works on ios and android

    \n

    Installation

    \n

    Install with following command:

    \n
    tns plugin add nativescript-conekta
    // or
    npm i nativescript-conekta
    \n

    So while cloning from the repo

    \n

    Usage

    \n

    TypeScript

    \n
    import { TNSConekta } from 'nativescript-conekta'

    private conekta: TNSConekta;

    this.conekta = new TNSConekta()

    this.conekta.setPublicKey('your_key')


    this.conekta.createToken(params) // Promise, params is required, (name, number, cvc, exp_month, exp_year)
    \n

    JavaScript

    \n
    const TNSConekta = require('nativescript-conekta').TNSConekta;

    const conekta = new TNSConekta()

    conekta.setPublicKey('your_key')
    conekta.setLanguage('en') // only in android
    conekta.createToken(params) // Promise, params is required, (name, number, cvc, exp_month, exp_year)
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-slider":{"name":"nativescript-na-slider","version":"1.1.3","license":"MIT","readme":"

    NativeScript NA Slider plugin

    \n

    NOTE! Android is currently not supported.

    \n

    A NativeScript slider. The successor of my previous, deprecated slideshow plugin, nativescript-na-slideshow.

    \n

    Installation

    \n

    $ tns plugin add nativescript-na-slider

    \n

    Usage

    \n

    Slides can be added statically inside the XML as below:

    \n
    <Page xmlns:NASlider=\"nativescript-na-slider\">
      
      <NASlider:NASlider id=\"slider\">
        <NASlider:NASliderContainer>
          <NASlider:NASliderSlide>
            <Label text=\"Slide 1\" />
          </NASlider:NASliderSlide>
          <NASlider:NASliderSlide>
            <Label text=\"Slide 2\" />
          </NASlider:NASliderSlide>
          <NASlider:NASliderSlide>
            <Label text=\"Slide 3\" />
          </NASlider:NASliderSlide>
        </NASlider:NASliderContainer>
      </NASlider:NASlider>
      
    </Page>
    \n

    Using <Repeater>

    \n

    For a more dynamic slider, a <Repeater> can be used:

    \n
    <Page xmlns:NASlider=\"nativescript-na-slider\">
      
      <NASlider:NASlider items=\"{{ slides }}\">
        <Repeater>
          <Repeater.itemsLayout>
            <NASlider:NASliderContainer />
          </Repeater.itemsLayout>
          <Repeater.itemTemplate>
            <NASlider:NASliderSlide>
              <Label text=\"{{ text }}\" />
            </NASlider:NASliderSlide>
          </Repeater.itemTemplate>
        </Repeater>
      </NASlider:NASlider>
      
    </Page>
    \n

    This way, a slider can simply be set up with an ObservableArray. The <NASliderContainer> will act as the Repeater's itemsLayout, while a <NASliderSlide> becomes the wrapper itemTemplate of the Repeater.

    \n

    Properties

    \n

    <NASlider>

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    bounceBoolean (default: false)Gets or sets scroll bouncing effect.
    currentSlideView<NASliderSlide> (read-only)Gets the current slide view.
    currentSlideIndexInteger (read-only)Gets the current slide index.
    forceFirstIndicatorVisibilityBoolean (default: false)Gets or sets the visibility of the first indicator if there is only one slide available.
    showIndicatorsBoolean (default: true)Gets or sets the indicators' visibility.
    indicatorBorderColorString (default: "#404040")Gets or sets indicators' border color.
    indicatorBorderWidthFloat (default: 0)Gets or sets indicators' border width.
    indicatorColorString (default: "808080")Gets or sets the indicator color for all slides.
    indicatorColorActiveString (default: null)Gets or sets the indicator color for all slides when active (current visible slide).
    indicatorHorizontalAlignmentString (default: null)Gets or sets indicators' horizontal alignment. Overrides indicatorPosition property.
    indicatorPositionString (default: "bottom")Gets or sets indicators' position.
    indicatorSizeFloat (default: 8)Gets or sets indicators' size.
    indicatorVerticalAlignmentString (default: null)Gets or sets indicators' vertical alignment. Overrides indicatorPosition property.
    itemsArray (default: undefined)Gets or sets the items array for a <Repeater>.
    orientationString (default: "horizontal")Gets or sets the slider orientation. Can be either "horizontal" or "vertical".
    scrollPositionFloat (read-only)Gets the current scroll position.
    slidesCountInteger (read-only)Gets the total amount of slides.
    \n

    <NASliderSlide>

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    indicatorColorString (default: null)Gets or sets the indicator color for specific slide.
    indicatorColorActiveString (default: null)Gets or sets the indicator color for specific slide when active (current visible slide).
    \n

    Methods

    \n

    getSlideAt

    \n

    getSlideAt(index: integer): <NASliderSlide>

    \n

    Returns the slide at specified index.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    indexIntegerThe index position of the slide to return.
    \n
    \n

    insertSlide

    \n

    insertSlide(view: <View>, props: object): Promise<NASliderSlide>

    \n

    Insert new slide with optional properties. Returns a Promise with the new slide.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    view<View>The view to insert as slide.
    propsObject (optional)Optional properties.
    \n
    props
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    atIndexInteger (default: this.slidesCount)Sets the index position. If not specified, the slide will become last.
    indicatorColorString (default: null)Sets the indicator color for specific slide.
    indicatorColorActiveString (default: null)Sets the indicator color for specific slide when active (current visible slide).
    \n
    \n

    removeSlide

    \n

    removeSlide(slide: <NASliderSlide>): Promise

    \n

    Remove the specified slide. Returns a Promise.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    slide<NASliderSlide>The slide to remove.
    \n
    \n

    removeSlideAt

    \n

    removeSlideAt(index : integer): Promise

    \n

    Remove slide at specified index. Returns a Promise.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    indexIntegerThe index position of the slide to remove.
    \n
    \n

    removeSlides

    \n

    removeSlides(): Promise

    \n

    Removes all slides. Returns a Promise.

    \n

    Will not work if <NASlider> instance is maintained by a Repeater.

    \n
    \n

    scrollToSlideAt

    \n

    scrollToSlideAt(index : integer, animated : boolean): void

    \n

    Scrolls to slide at specified index. Animated or not.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    indexIntegerThe slide to remove.
    animatedBoolean (default: false)Animates the scrolling effect.
    \n

    Events

    \n

    The following events can be observed with on() and addEventListener():

    \n

    slide

    \n

    Fired when sliding.

    \n
    Event data
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    eventNameStringGets the name of the event.
    objectObjectGets the <NASlider> instance.
    scrollPositionFloatGets the current scroll position. Will be either the horizontal or vertical position depending on orientation of the <NASlider> instance.
    \n
    \n

    slideChange

    \n

    Fired when the <NASlider> instance has changed slide.

    \n
    Event data
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    eventNameStringGets the name of the event.
    objectObjectGets the <NASlider> instance.
    slide<NASliderSlide>Gets the current visible slide.
    \n

    Known issues

    \n\n

    History

    \n

    Version 1.1.3 (February 10, 2017)

    \n\n

    Version 1.1.2 (February 8, 2017)

    \n\n

    Version 1.1.0 (February 7, 2017)

    \n\n

    Version 1.0.2 (February 6, 2017)

    \n\n

    Version 1.0.0 (February 6, 2017)

    \n\n

    Credits

    \n\n

    License

    \n

    MIT - for {N} version 2.5.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"gulp-babel-nativescript":{"name":"gulp-babel-nativescript","version":"1.0.0","license":"ISC","readme":"

    gulp-babel-nativescript

    \n

    replace gulp-babel compiled es5 content to match nativescript(now is v1.4.2)'s rule

    \n

    Usage:

    \n
    // babelNativescript signature: 
    //
    // babelNativescript(tnsCoreModules: {${moduleName}: true}, babelEs5CommonUtilFunctionsModulePath: string)
    //
    // About tnsCoreModules, see ./script/tns-core-modules.json for more infomation
    var babelNativescript = require('gulp-babel-nativescript')
    var getTnsCoreModules = require('./script/tns-core-modules')

    gulp.task('es6', function(){
      getTnsCoreModules(function(err, tnsCoreModules){
    \t\tgulp.src('./app-src/**/*.js')
    \t\t\t.pipe(babel())
    \t\t\t.pipe(babelNativescript(tnsCoreModules, path.join(__dirname, 'app-src/utils/babel-es5-common-helpers')))
    \t\t\t.pipe(gulp.dest('./app'))\t
    \t})
    })
    \n

    Notice:

    \n
      \n
    1. the name of the required tns-core-modules can not be renamed to another variable name after required. because the require of tns-core-module is find by RexExp string match.
      2. \n
    \n

    Example:

    \n
    // es6
    import * as observable from \"data/observable\";

    export class HelloWorldModel extends observable.Observable{
        constructor () {
            super()
            this.counter = 42
            this.set(\"message\", this.counter + \" taps left\");
        }
        tapAction () {
            this.counter--;
            if (this.counter <= 0) {
                this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
            }
            else {
                this.set(\"message\", this.counter + \" taps left\");
            }
        }
        set(name, value){
            console.log('override `set` method')
            super.set(name, value);
        }
        static aa(){
            super.aa()
        }
    }
    export var mainViewModel = new HelloWorldModel()
    \n
    // babel => es5,  this is horrible for nativescript
    //
    // 1. redundant es5 helper functions like `_createClass`, `_inherits` in every files
    //    => extract all babel-es5-helper-functions to a individual module, and then require it.
    // 2. babel module system is not ipentity with nativescript(cmd) like the `default` attribute in module.exports
    //    => stop `_interopRequireWildcard` and `_interopRequireDefault` the required object 
    //        that it add `default` attribute and replace all attribute from the origin to 
    //        a new object which the original object is bind to the system like `application.mainModule`!
    // 3. babel-es5's Class System is different with nativescript.
    //    => every class which inherit the tns-core-module will be replaced to the nativescript inheritence way.
    //    => nativescript's inheritence have weak feature that `__extends(Child, Super);` must be the 
    //        first sentence in the Class block, means if this sentence execute after any operate to 
    //        the Child-Class, nativescript will be crashed!!

    \"use strict\";

    Object.defineProperty(exports, \"__esModule\", {
        value: true
    });

    var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

    var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if (\"value\" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

    function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj[\"default\"] = obj; return newObj; } }

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }

    function _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

    var _dataObservable = require(\"data/observable\");

    var observable = _interopRequireWildcard(_dataObservable);

    var HelloWorldModel = (function (_observable$Observable) {
        _inherits(HelloWorldModel, _observable$Observable);

        function HelloWorldModel() {
            _classCallCheck(this, HelloWorldModel);

            _get(Object.getPrototypeOf(HelloWorldModel.prototype), \"constructor\", this).call(this);
            this.counter = 42;
            this.set(\"message\", this.counter + \" taps left\");
        }

        _createClass(HelloWorldModel, [{
            key: \"tapAction\",
            value: function tapAction() {
                this.counter--;
                if (this.counter <= 0) {
                    this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
                } else {
                    this.set(\"message\", this.counter + \" taps left\");
                }
            }
        }, {
            key: \"set\",
            value: function set(name, value) {
                console.log('override `set` method');
                _get(Object.getPrototypeOf(HelloWorldModel.prototype), \"set\", this).call(this, name, value);
            }
        }], [{
            key: \"aa\",
            value: function aa() {
                _get(Object.getPrototypeOf(HelloWorldModel), \"aa\", this).call(this);
            }
        }]);

        return HelloWorldModel;
    })(observable.Observable);

    exports.HelloWorldModel = HelloWorldModel;
    var mainViewModel = new HelloWorldModel();
    exports.mainViewModel = mainViewModel;
    \n
    // es5 after this tool replaced the babel-es5 content
    \"use strict\";
    // this module path is the function's second argument as a absolute path
    var _babelEs5CommonUtil = require(\"../utils/babel-es5-common-helpers\");

    Object.defineProperty(exports, \"__esModule\", {
        value: true
    });

    var _dataObservable = require(\"data/observable\");

    var observable = _dataObservable;

    var HelloWorldModel = (function (_observable$Observable) {
        __extends(HelloWorldModel, _observable$Observable);

        function HelloWorldModel() {
            _babelEs5CommonUtil._classCallCheck(this, HelloWorldModel);

            _observable$Observable.call(this);
            this.counter = 42;
            this.set(\"message\", this.counter + \" taps left\");
        }

        _babelEs5CommonUtil._createClass(HelloWorldModel, [{
            key: \"tapAction\",
            value: function tapAction() {
                this.counter--;
                if (this.counter <= 0) {
                    this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
                } else {
                    this.set(\"message\", this.counter + \" taps left\");
                }
            }
        }, {
            key: \"set\",
            value: function set(name, value) {
                console.log('override `set` method');
                _observable$Observable.prototype.set.call(this, name, value);
            }
        }], [{
            key: \"aa\",
            value: function aa() {
                _observable$Observable.aa.call(HelloWorldModel);
            }
        }]);

        return HelloWorldModel;
    })(observable.Observable);

    exports.HelloWorldModel = HelloWorldModel;
    var mainViewModel = new HelloWorldModel();
    exports.mainViewModel = mainViewModel;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braintree-temp":{"name":"nativescript-braintree-temp","version":"4.0.3","license":"Apache-2.0","readme":"

    Nativescript nativescript-braintree-temp

    \n
    ns plugin add @convosco/nativescript-braintree-temp
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kontaktio":{"name":"nativescript-kontaktio","version":"1.0.0","license":"ISC","readme":"

    nativescript-kontaktio

    \n

    NativeScript Plugin for Kontakt io Beacons

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-awesome-webview":{"name":"nativescript-awesome-webview","version":"0.1.1","license":"Apache-2.0","readme":"

    nativescript-awesome-webview

    \n\n

    A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

    \n\n

    Prerequisites / Requirements

    \n

    As of now, there aren't any prerequisites. This should work with any device, any OS.

    \n

    Installation

    \n

    For tns projects (Angular, Typescript, Javascript)

    \n
    tns plugin add nativescript-awesome-webview
    \n

    For vue-cli projects (Nativescript-Vue)

    \n
    npm install nativescript-awesome-webview
    \n

    Usage

    \n

    Require

    \n

    Javascript -

    \n
    const {init, openWebView} = require('nativescript-awesome-webview');
    \n

    Typescript -

    \n
    import {init, openWebView} from 'nativescript-awesome-webview';
    \n

    1. Initialise (optional, only Android)

    \n
    init()
    \n

    NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

    \n

    Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

    \n

    2. Open an URL

    \n
        openWebView({
          url: 'http://google.com',
          toolbarColor: '#2277aa',
          toolbarControlsColor: '#eebb99'
        });
    \n

    openWebView options

    \n

    AwesomeWebviewOptions structure (the object you pass into openWebView)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    urlrequiredThe URL to open
    showTitlefalseShows title bar in the webview
    toolbarColorundefinedColor of the toolbar
    toolbarControlsColorundefined(only iOS) color of buttons on toolbar
    isClosedundefinedcallback function that will be called when webview is closed
    \n

    License

    \n

    This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

    \n
    Apache License Version 2.0, January 2004\n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-beacon-ins":{"name":"nativescript-beacon-ins","version":"1.2.6","license":"Apache-2.0","readme":"

    INS Beacon Scanner for NativeScript

    \n

    The node module for the INS Beacon Scanner Plugin for NativeScript.

    \n

    Getting started

    \n\n

    Android

    \n

    API

    \n
    \t// Get reference to the push plugin module.
    \tvar beaconPlugin = require('nativescript-beacon-ins');
    \n\n
    \n

    startScanBeacon(settings, successCallback, errorCallback)

    \n
    \n

    \tvar settings = {
    \t\t// iOS settings
    \t\ttimeoutAfter: 15, // scan bluetooth timeout
    \t\tbaseURL: 'Your config URL',
    \t\tport: 'port',
    \t\torgId: 'orgId',
    \t\tinspectionId: 'inspectionId'
    \t};


    \tbeaconPlugin.startScanBeacon(settings,
    \t\t// Success callback
    \t\tfunction(token) {
    \t\t\talert('scan successfully');
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t}
    \t);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-sdk-8-4-0":{"name":"nativescript-google-maps-sdk-8-4-0","version":"2.0.0","license":"ISC","readme":"

    Deprecated Package

    \n

    This package is no longer supported and has been deprecated.

    \n

    To avoid malicious use, npm is hanging on to the package name.

    \n

    Please contact support@npmjs.com if you have questions about this package.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-skygear-sdk":{"name":"nativescript-skygear-sdk","version":"0.0.6","license":"Apache-2.0","readme":"

    Nativescript Skygear-Sdk Plugin

    \n

    This plugin allows you to use your nativescript application with a skygear.io or skygear-server application.

    \n

    Installation

    \n

    Install the plugin to your nativescript project.

    \n
    tns plugin add nativescript-skygear-sdk
    \n

    Usage

    \n

    To get started import the sdk, put in your app api key and the address to your skygear server

    \n
        import { SkygearSdk } from 'nativescript-skygear-sdk';

        const config = { apiKey: \"plugintest123\", address: \"localhost:3000\" };

        const skygearSDK = new SkygearSdk(config);
    \n

    and then you can use it like this:

    \n
        skygearSDK.auth.signupWithEmailPassword(\"email@example.com\", \"password\")
        .then(user => console.log(user))
        .catch(error => console.log(error))
    \n

    API

    \n

    The plugin is in 5 separate namespaces.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ModuleDescription
    authhandles signup, login, and logout. --password reset coming soon.
    chathandles interaction with the skygear chat plugin
    cloudhandles interaction with skygear cloud functions
    db(database)handles interaction with the public and private cloud database
    pubsubhandles interaction with the skygear pubsub module, --will eventually have support for push notifications.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-router-extended":{"name":"nativescript-vue-router-extended","version":"1.1.8","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-ngrx-debugger":{"name":"ns-ngrx-debugger","version":"0.0.7","license":"MIT","readme":"

    Nativescript @Ngrx/Store Debugger

    \n

    A minimal Nativescript (v3+) debugger for @ngrx/store & @ngrx/effects.

    \n

    How To

    \n\n
    npm i ns-ngrx-debugger --save
    \n\n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NSNgRxDebuggerModule } from \"ns-ngrx-debugger\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ],
      imports: [
        NativeScriptModule,
        NSNgRxDebuggerModule
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    export class AppModule { }
    \n\n
    <ActionBar title=\"Hello\"></ActionBar>

    <ns-ngrx-debugger [hidden]=\"false\"></ns-ngrx-debugger>
    \n\n

    Set up your @ngrx/store however you want. You get a log of all Actions going through the store and an option to dump States and Sub-States of the Store at request on the terminal.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-crypto":{"name":"nativescript-crypto","version":"0.9.11","license":"Apache-2.0","readme":"

    NativeScript Crypto

    \n

    ...

    \n

    (Optional) Prerequisites / Requirements

    \n

    ...

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-crypto
    \n

    Usage

    \n

    ...

    \n

    API

    \n

    ...

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-card-stack-view":{"name":"nativescript-card-stack-view","version":"0.0.6","license":"MIT","readme":"

    NativeScript Card Stack View

    \n

    A Tinder like card stack view component for NativeScript for iOS and Android with support for Angular.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSupportedNativeView
    iOSYesMDCSwipeToChoose
    AndroidYesCardStackView
    \n

    Demo screen capture

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Warning

    \n

    This plugin is a work in progress. All key features should work but please test thoroughly before deploying to production and report any issues.

    \n

    The angular demo is properly setup. The core should work but the demo is very basic.

    \n

    Installation

    \n

    Run tns plugin add nativescript-card-stack-view in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.

    \n

    Usage

    \n

    For any implementation make sure you use ObservableArray<Observable> for the items. You can push to the array and have the cards appear as they are added but any other array manipulations could result in issues. If you a have a specific case in mind write an issue.

    \n

    Core

    \n

    Make sure you include the namespace on the Page element:

    \n
    xmlns:ns=\"nativescript-card-stack-view\"
    \n
    <ns:CardStack id=\"cardStack\" height=\"100%\" width=\"100%\" color=\"white\" dragging=\"onDrag\" swiped=\"onSwiped\" items=\"{{ myDataArray }}\">
        <ns:CardStack.itemTemplate>
            <ns:CardStackItem backgroundColor=\"#ff0000\" verticalAlignment=\"middle\" margin=\"15\" borderRadius=\"6\">
                <GridLayout>
                    <Image src=\"{{image}}\" stretch=\"aspectFill\" height=\"100%\" width=\"100%\"  borderRadius=\"6\"/>
                    <Label text=\"{{title}}\" horizontalAlignment=\"center\" backgroundColor=\"#50000000\" height=\"30\" />
                    <Label text=\"WOW\" horizontalAlignment=\"center\" backgroundColor=\"#50000000\" height=\"30\" marginTop=\"50\" />
                </GridLayout>
            </ns:CardStackItem>
        </ns:CardStack.itemTemplate>

    </ns:CardStack>
    \n

    Angular

    \n

    Import the module:

    \n
    @NgModule({
      bootstrap: [AppComponent],
      imports: [
        ...,
        CardStackModule // Import the module!
      ],
      declarations: [AppComponent],
      ...
    })
    \n

    Create the layout:

    \n
    <CardStack #cardStack
               [items]=\"items\"
               (swiped)=\"onSwiped($event)\"
               (dragging)=\"onDrag($event)\"
               (canceled)=\"onDragCancel($event)\"
               (loaded)=\"onStackLoaded($event)\"
               [options]=\"cardStackOptions\">

      <ng-template let-i=\"index\" let-item=\"item\">
        <!-- Your template here -->
      </ng-template>
    </CardStack>
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    swipedFires when the cards is swiped and returns direction and position
    draggingFires when dragging occurs
    canceledFires when card swiping canceled and returns position of the card in the array
    loadedFires when the CardStack is loaded ant returns the instance
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    selectedIndexCurrent front card index
    \n

    DragEvent\nevent.object:

    \n
    {
      side :string; // `\"Left\"`,`\"Right\"` 
      ratio: number; // 0-1 ratio of center to right or left edge  
    }
    \n

    SwipedEvent\nevent.object:

    \n
    {
      direction :string; // `\"Left\"`,`\"Right\"` 
      position: number; // index of the swiped card
    }
    \n

    Attributes - Common

    \n\n
    {
      visibleCount: number; // how many cards should be visible in the stack
    }
    \n

    Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

    \n

    Changelog

    \n

    0.0.2

    \n\n

    0.0.1

    \n\n

    Author

    \n\n

    Resources

    \n

    Used the nativescript-carousel plugin as a scaffold.

    \n

    Learned from:

    \n\n

    Help

    \n

    I will accept pull requests that improve this and assign credit.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-opentok":{"name":"@triniwiz/nativescript-opentok","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript nativescript-opentok

    \n
    ns plugin add @triniwiz/nativescript-opentok
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker":{"name":"nativescript-modal-datetimepicker","version":"2.1.5","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/imagepicker":{"name":"@global66/imagepicker","version":"3.0.1","license":"Apache-2.0","readme":"

    @nativescript/imagepicker

    \n

    Contents

    \n\n

    Intro

    \n

    Imagepicker plugin supporting both single and multiple selection.

    \n\n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your app.

    \n
    npm install @nativescript/imagepicker
    \n

    Note: Version 3.0 contains breaking changes:

    \n\n

    Note: Version 2.0 contains breaking changes. In order supply more information about your selection, the ImageSource asset is nested in the response so you'll need to update your code to use result.asset instead of result as your src for your Images.

    \n

    Android required permissions

    \n

    Add the following permissions to the App_Resources/Android/src/main/AndroidManifest.xml file:

    \n\n
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

    <application android:requestLegacyExternalStorage=\"true\" ... >
        ...
      </application>
    \n\n
    <uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />

    <uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
    \n

    See the complete example here.

    \n

    iOS required permissions

    \n

    Using the plugin on iOS requires the NSPhotoLibraryUsageDescription permission. Modify the app/App_Resources/iOS/Info.plist file to add it as follows:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Description text goes here</string>
    \n

    Apple App Store might reject your app if you do not describe why you need this permission. The default message Requires access to photo library. might not be enough for the App Store reviewers.

    \n

    Pick images

    \n

    To pick images (and/or videos) with the plugin, take the steps below:

    \n
      \n
    1. Import the plugin
      2. \n
    \n\n
    import * as imagePickerPlugin from \"@nativescript/imagepicker\";
    \n
      \n
    1. Instantiate the picker with selection mode
      2. \n
    \n

    Instantiate the picker with selection mode by calling the create funciton of the plugin passing it an object that specifies mode(single or multiple) of media assets selection.

    \n\n
    let imagePickerObj: ImagePicker = imagePickerPlugin.create({
        mode: \"single\"});
    \n
      \n
    1. Pick the images
      2. \n
    \n\n\n
    imagePickerObj
        .authorize()
        .then((authResult) => {
            if(authResult.authorized) {
                return imagePickerObj.present()
                    .then(function(selection) {
                        selection.forEach(function(selected) {
                            this.imageSource = selected.asset;
                            this.type = selected.type;
                            this.filesize = selected.filesize;
                            //etc
                        });
                    });
            } else {
                // process authorization not granted.
            }
        })    
        .catch(function (e) {
            // process error
        });
    \n

    Demo

    \n

    You can play with the plugin on StackBlitz at any of the following links:

    \n\n

    API

    \n

    ImagePicker class

    \n

    The class that provides the media selection API. It offers the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    constructor(options: Options)ImagePickerInstanciates the ImagePicker class with the optional options parameter. See Options
    authorize()Promise<AuthorizationResult>Requests the required permissions. Call it before calling present(). In case of a failed authorization, consider notifying the user for degraded functionality. The returned AuthorizationResult will have it's authorized property set to true if permission has been granted.
    present()Promise<ImagePickerSelection[]>Presents the image picker UI.
    create(options: Options, hostView: View)ImagePickerCreates an instance of the ImagePicker class. The hostView parameter can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.
    \n

    Options

    \n

    An object passed to the create method to specify the characteristics of a media selection.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDefaultDescription
    modestringmultipleThe mode of the imagepicker. Possible values are single for single selection and multiple for multiple selection.
    minimumNumberOfSelectionnumber0Optional: (iOS-only) The minumum number of selected assets.
    maximumNumberOfSelectionnumber0Optional: (iOS-only) The maximum number of selected assets.
    showsNumberOfSelectedAssetsbooleantrueOptional: (iOS-only) Display the number of selected assets.
    promptstringundefinedOptional: (iOS-only) Display prompt text when selecting assets.
    numberOfColumnsInPortraitnumber4Optional: (iOS-only) Sets the number of columns in Portrait orientation
    numberOfColumnsInLandscapenumber7Optional: (iOS-only) Sets the number of columns in Landscape orientation.
    mediaTypeImagePickerMediaTypeAnyOptional: The type of media asset to pick whether to pick Image/Video/Any type of assets.
    copyToAppFolderstringundefinedOptional: If passed, a new folder will be created in your applications folder and the asset will be copied there.
    renameFileTostringundefinedOptional: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended.
    showAdvanced booleanfalseOptional:(Android-only) Show internal and removable storage options on Android (WARNING: not supported officially).
    android{read_external_storage: string;}Optional: (Android-only) Provides a reason for permission request to access external storage on API level above 23.
    \n

    ImagePickerMediaType

    \n

    The type of media assets to be selected.

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digitalglacier/nativescript-keyboard-tools":{"name":"@digitalglacier/nativescript-keyboard-tools","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-awesome-webview":{"name":"nativescript-ssi-awesome-webview","version":"0.1.2","license":"Apache-2.0","readme":"

    nativescript-ssi-awesome-webview

    \n\n

    Based on nativescript-awesome-webview. This has been updated only to reference androidx libs instead of android support.\nIt works with NS 6.1

    \n

    A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

    \n\n

    Prerequisites / Requirements

    \n

    As of now, there aren't any prerequisites. This should work with any device, any OS.

    \n

    Installation

    \n

    For tns projects (Angular, Typescript, Javascript)

    \n
    tns plugin add nativescript-ssi-awesome-webview
    \n

    For vue-cli projects (Nativescript-Vue)

    \n
    npm install nativescript-ssi-awesome-webview
    \n

    Usage

    \n

    Require

    \n

    Javascript -

    \n
    const {init, openWebView} = require('nativescript-ssi-awesome-webview');
    \n

    Typescript -

    \n
    import {init, openWebView} from 'nativescript-ssi-awesome-webview';
    \n

    1. Initialise (optional, only Android)

    \n
    init()
    \n

    NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

    \n

    Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

    \n

    2. Open an URL

    \n
        openWebView({
          url: 'http://google.com',
          toolbarColor: '#2277aa',
          toolbarControlsColor: '#eebb99'
        });
    \n

    openWebView options

    \n

    AwesomeWebviewOptions structure (the object you pass into openWebView)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    urlrequiredThe URL to open
    showTitlefalseShows title bar in the webview
    toolbarColorundefinedColor of the toolbar
    toolbarControlsColorundefined(only iOS) color of buttons on toolbar
    isClosedundefinedcallback function that will be called when webview is closed
    \n

    License

    \n

    This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

    \n
    Apache License Version 2.0, January 2004\n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-facebook":{"name":"@enduco/nativescript-facebook","version":"10.0.14","license":"Apache-2.0","readme":"

    @enduco/nativescript-facebook

    \n
    ns plugin add @enduco/nativescript-facebook
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-fonticon":{"name":"nativescript-vue-fonticon","version":"1.0.3","license":"MIT","readme":"

    A simpler way to use font icons with NativeScript + Vue.js

    \n

    \"LICENSE\"\n\"Contributions\"

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n\n
    /* app.css or styles.scss */
    .fa {
      font-family: FontAwesome;
    }
    \n\n
    <label class=\"fa\" text=\"\\uf293\"></label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname:

    \n
    <FontIcon name=\"fa-play\" @tap=\"tapAction\" />
    \n

    Prerequisites / Requirements

    \n

    You will have to manually install the fonts you want to use.

    \n

    Install

    \n
    npm install nativescript-vue-fonticon --save
    or
    yarn add nativescript-vue-fonticon
    \n

    Usage

    \n

    FontAwesome will be used in the following examples but you can use any custom font icon collection.

    \n\n
    fonts/FontAwesome.ttf
    \n\n
    /* app.css or styles.scss */
    .fa {
      font-family: FontAwesome;
    }
    \n

    NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

    \n\n
    assets/css/font-awesome.css
    \n

    Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

    \n\n
    import Vue from 'nativescript-vue'
    import FontIcon from 'nativescript-vue-fonticon'

    import './styles.scss'

    Vue.use(FontIcon, {
      componentName: 'FIcon', // <-- Optional. Will be the name for component icon.
      debug: true, // <-- Optional. Will output the css mapping to console.
      paths: {
        fa: './assets/css/font-awesome.css',
        ion: './assets/css/ionicons.css'
      }
    })

    ...
    \n

    API

    \n

    Installing

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDefaultDescription
    componentNameStringFontIconName for component icon.
    debugBooleanfalseShow output the css mapping to console.
    pathsObjectObject of paths to css fonts.
    \n

    Using

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDefaultDescription
    nameStringName of class icon.
    colorStringSets a solid-color value to the matched view’s foreground or can use class too.
    size[String, Number]15Size icon.
    typeStringfaCSS class icon to use.
    @tapFunctionListener of tap event.
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jnorkus/nativescript-svg":{"name":"@jnorkus/nativescript-svg","version":"1.1.2","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xzwiex/nativescript-googleplay-referrer":{"name":"@xzwiex/nativescript-googleplay-referrer","version":"1.0.5","license":"Apache-2.0","readme":"

    @xzwiex/nativescript-googleplay-referrer

    \n
    ns plugin add @xzwiex/nativescript-googleplay-referrer
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jiguang-push":{"name":"nativescript-jiguang-push","version":"0.0.1","license":"Apache-2.0","readme":"

    NativeScript Jiguang push plugin

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    Hist

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    need to config the android receiver

    \n
    <application>
        <!--JPush api核心消息接受器-->
        <receiver android:name=\"com.github.ayongw.jpushreceiver.MessageCenterJPushApiReceiver\"
                  android:exported=\"false\"
                  android:enabled=\"true\">
            <intent-filter>
                <action android:name=\"cn.jpush.android.intent.REGISTRATION\" /> <!--Required  用户注册SDK的intent-->
                <action android:name=\"cn.jpush.android.intent.MESSAGE_RECEIVED\" /> <!--Required  用户接收SDK消息的intent-->
                <action android:name=\"cn.jpush.android.intent.NOTIFICATION_RECEIVED\" /> <!--Required  用户接收SDK通知栏信息的intent-->
                <action android:name=\"cn.jpush.android.intent.NOTIFICATION_OPENED\" /> <!--Required  用户打开自定义通知栏的intent-->
                <action android:name=\"cn.jpush.android.intent.CONNECTION\" /><!-- 接收网络变化 连接/断开 since 1.6.3 -->

                <category android:name=\"__PACKAGE__\" />
            </intent-filter>
        </receiver>

        <!--用于接收种操作返回-->
        <receiver android:name=\"com.github.ayongw.jpushreceiver.MessageCenterJPushOperateMessageReceiver\">
            <intent-filter>
                <action android:name=\"cn.jpush.android.intent.RECEIVE_MESSAGE\" />

                <category android:name=\"__PACKAGE__\" />
            </intent-filter>
        </receiver>
    </application>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-intermec-printer":{"name":"@ticnat/nativescript-intermec-printer","version":"1.0.0","license":"Apache-2.0","readme":"

    @ticnat/nativescript-intermec-printer

    \n
    ns plugin add @ticnat/nativescript-intermec-printer
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pereirax/nativescript-twilio-video":{"name":"@pereirax/nativescript-twilio-video","version":"1.0.3","license":"Apache-2.0","readme":"

    @pereirax/nativescript-twilio-video

    \n
    ns plugin add @pereirax/nativescript-twilio-video
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tanco/login":{"name":"@tanco/login","version":"1.0.5","license":"Apache-2.0","readme":"

    @tanco/login

    \n
    ns plugin add @tanco/login
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-joystick":{"name":"nativescript-joystick","version":"0.4.4","license":{"type":"MIT","url":"https://github.com/sebawita/nativescript-joystick/blob/master/LICENSE"},"readme":"

    NativeScript-JoyStick

    \n

    An Android and iOS UI component for NativeScript that provides Virtual JoyStick

    \n

    \"Sample\"Sample

    \n

    Native Source

    \n

    Android

    \n

    This component is based on JoyStick component from AndroidArsenal created by erz05

    \n

    iOS

    \n

    This component is based on JoyStick component from cocoapods created by Cole Dunsby\nAnd then modified to work better with Objective C, into JoyStick another cocoapod by tzraikov

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:\ntns plugin add nativescript-joystick

    \n

    Usage

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"
      xmlns:js=\"nativescript-joystick\">
      <StackLayout>
        <Label text=\"JoyStick\"/>
        
        <Label text=\"{{'Angle:' + angle}}\" textWrap=\"true\" />
        <Label text=\"{{'Power:' + power}}\" textWrap=\"true\" />
        <Label text=\"{{'Horizontal:' + horizontal}}\" textWrap=\"true\" />
        <Label text=\"{{'Vertical:' + vertical}}\" textWrap=\"true\" />

        <js:JoyStick
          padColor=\"green\"
          buttonColor=\"pink\"
          width=\"50%\"
          angle=\"{{angle}}\"
          power=\"{{power}}\"
          horizontal=\"{{horizontal}}\"
          vertical=\"{{vertical}}\">
        </js:JoyStick>
      </StackLayout>
    </Page>
    \n

    Attributes

    \n

    padColor - (color string) - optional

    \n

    Attribute to specify the pad color to use.

    \n

    buttonColor - (color string) - optional

    \n

    Attribute to specify the button color to use.

    \n

    angle - (number) - optional

    \n

    Attribute (read only) to bind the button angle.\nValues range -180 to 180. Where 0: Left, 90: Up, 180 and -180: Right, -90: Down

    \n

    power - (number) - optional

    \n

    Attribute (read only) to bind the button power or how far it is from the centre.\nValues range 0 to 1. Where 0: centre, 1: at the edge.

    \n

    horizontal - (number) - optional

    \n

    Attribute (read only) to bind the horizontal position of the button.\nValues range -1 to 1. Where 0: centre, -1: left, 1: right.

    \n

    vertical - (number) - optional

    \n

    Attribute (read only) to bind the vertical position of the button.\nValues range -1 to 1. Where 0: centre, -1: down, 1: up.

    \n

    Methods

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-coremotion":{"name":"nativescript-coremotion","version":"0.1.7","license":"MIT","readme":"

    NativeScript Core Motion Plugin

    \n

    Core Motion plugin for NativeScript

    \n

    Installation

    \n
    tns plugin add nativescript-coremotion
    \n

    Usage

    \n
    var Coremotion = require('nativescript-coremotion');
    \n

    Accelerometer

    \n

    isAccelerometerAvailable()

    \n

    Will return a boolean indicating of the current device supports the accelerometer.

    \n
    Coremotion.isAccelerometerAvailable()
    \n

    isAccelerometerActive()

    \n

    Will return a boolean indicating if Core Motion is currently returning accelerometer data.

    \n
    Coremotion.isAccelerometerActive()
    \n

    setAccelerometerUpdateInterval()

    \n

    Accepts a number, allows changes to the update interval in seconds.

    \n
    Coremotion.setAccelerometerUpdateInterval(.2);
    \n

    startAccelerometerUpdates()

    \n

    Accepts a callback that returns acceleration as the following:

    \n
    \n

    {x, y, z}

    \n
    \n
    Coremotion.startAccelerometerUpdates(callback);
    \n

    stopAccelerometerUpdates()

    \n

    Stops Core Motion from sending accelerometer updates.

    \n
    Coremotion.stopAccelerometerUpdates()
    \n

    Gyroscope

    \n

    isGyroscopeAvailable()

    \n

    Will return a boolean indicating of the current device supports the gyroscope.

    \n
    Coremotion.isGyroscopeAvailable()
    \n

    isGyroscopeActive()

    \n

    Will return a boolean indicating if Core Motion is currently returning gyroscope data.

    \n
    Coremotion.isGyroscopeActive()
    \n

    setGyroscopeUpdateInterval()

    \n

    Accepts a number, allows changes to the update interval in seconds.

    \n
    Coremotion.setGyroscopeUpdateInterval(.2);
    \n

    startGyroscopeUpdates()

    \n

    Accepts a callback that returns rotationRate as the following:

    \n
    \n

    {x, y, z}

    \n
    \n
    Coremotion.startGyroscopeUpdates(callback);
    \n

    stopGyroscopeUpdates()

    \n

    Stops Core Motion from sending gyroscope updates.

    \n
    Coremotion.stopGyroscopeUpdates()
    \n

    Magnetrometer

    \n

    isMagnetometerAvailable()

    \n

    Will return a boolean indicating of the current device supports the magnetometer.

    \n
    Coremotion.isMagnetometerAvailable()
    \n

    isMagnetometerActive()

    \n

    Will return a boolean indicating if Core Motion is currently returning magnetometer data.

    \n
    Coremotion.isMagnetometerActive()
    \n

    setMagnetometerUpdateInterval()

    \n

    Accepts a number, allows changes to the update interval in seconds.

    \n
    Coremotion.setMagnetometerUpdateInterval(.2);
    \n

    startMagnetometerUpdates()

    \n

    Accepts a callback that returns magneticField as the following:

    \n
    \n

    {x, y, z}

    \n
    \n
    Coremotion.startMagnetometerUpdates(callback);
    \n

    stopMagnetometerUpdates()

    \n

    Stops Core Motion from sending magnetometer updates.

    \n
    Coremotion.stopMagnetometerUpdates()
    \n

    DeviceMotion

    \n

    isDeviceMotionAvailable()

    \n

    Will return a boolean indicating of the current device supports deviceMotion.

    \n
    Coremotion.isDeviceMotionAvailable()
    \n

    isDeviceMotionActive()

    \n

    Will return a boolean indicating if Core Motion is currently returning deviceMotion data.

    \n
    Coremotion.isDeviceMotionActive()
    \n

    setDeviceMotionUpdateInterval()

    \n

    Accepts a number, allows changes to the update interval in seconds.

    \n
    Coremotion.setDeviceMotionUpdateInterval(.2);
    \n

    startDeviceMotionUpdates()

    \n

    Accepts a callback that returns the following:

    \n
    \n

    attitude: {pitch, roll, yaw},

    \n

    gravity: {x, y, z},

    \n

    userAcceleration: {x, y, z},

    \n

    magneticField: {\naccuracy,\nfield: {x, y, z}\n},

    \n
    \n
    \n

    rotationRate: {x, y, z}

    \n
    \n
    Coremotion.startDeviceMotionUpdates(callback);
    \n

    stopDeviceMotionUpdates()

    \n

    Stops Core Motion from sending deviceMotion updates.

    \n
    Coremotion.stopDeviceMotionUpdates()
    \n

    Altimeter

    \n

    isRelativeAltitudeAvailable()

    \n

    Will return a boolean indicating of the current device supports Relative Altitude.

    \n
    Coremotion.isRelativeAltitudeAvailable()
    \n

    isRelativeAltitudeActive()

    \n

    Will return a boolean indicating if Core Motion is currently returning Relative Altitude data.

    \n
    Coremotion.isRelativeAltitudeActive()
    \n

    startRelativeAltitudeUpdates()

    \n

    Accepts a callback that returns the following:

    \n
    \n

    {pressure, relativeAltitude}

    \n
    \n
    Coremotion.startRelativeAltitudeUpdates(callback);
    \n

    stopDeviceMotionUpdates()

    \n

    Stops Core Motion from sending Relative Altitude updates.

    \n
    Coremotion.stopRelativeAltitudeUpdates()
    \n

    Notes

    \n

    Plugin is iOS only as Core Motion does not exist on Android.

    \n

    Plugin requires NativeScript 2.3.0 or higher, well, because it works on that.

    \n

    Plugin was tested against iOS 10 using Xcode 8.

    \n

    There was an existing nativescript-accelerometer that only exposed a small subset of Core Motion, would have made PRs against it if the namespace would have permitted.

    \n

    The isXYZActive() does not re-query Core Motion at this time, but simply returns a boolean set in the plugin.

    \n

    Warranty

    \n

    There is none. You accept any and all responsiblity and liability that comes with putting this into your app. Additionally, you agree to pay my legal bills if you use this and someone sues me because it was in your app.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpandroid-charts":{"name":"nativescript-mpandroid-charts","version":"0.0.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bezlepkin/nativescript-ar":{"name":"@bezlepkin/nativescript-ar","version":"1.0.4","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-play-services":{"name":"nativescript-plugin-google-play-services","version":"26.0.2","license":"Apache-2.0","readme":"

    nativescript-plugin-google-play-services

    \n

    A plugin which installs the Google Play Services library to your NativeScript project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-file-photoview":{"name":"nativescript-file-photoview","version":"0.1.5","license":"MIT","readme":"

    NativeScript Plugin - FilePhotoView

    \n

    A simple library for viewing an image file on Android from local storage.

    \n
    \n

    This plugin supports Android only. For iOS, recommend to use nativescript-photoview plugin.

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    FilePhotoView
    \n

    Background

    \n

    I have an app that reads images from a protected REST API endpoints, and download into NativeScript as ImageSource. I need a photo viewer so when the thumbnail was tapped, the viewer for the photo will display with zoom functionality.

    \n

    So I need a photo popup viewer that supports NS's ImageSource. I found the nativescript-photoviewer that works well in supporting this, but for Android, it only supports external URL strings that I can't provide.

    \n

    Also, I found that passing an ImageSource directly to an Android library is not that strict forward (it easily cause out of memory error).

    \n

    As a result, I come up a simple approach as follows:

    \n\n

    Installation

    \n

    Run tns plugin add nativescript-file-photoview in your ROOT directory of your project.

    \n

    Usage

    \n

    The usage is very simple. Import "nativescript-file-photoview" module and create a instance of it. Call the show(string) (string is the local storage image file path) function to present the photo.\nThe show() function accept a singe parameter, a string.

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { Observable } from 'rxjs/Rx';
    import * as nshttp from 'http';
    import * as fs from 'file-system';
    import * as enums from 'ui/enums';

    // Import the plugin
    import { FilePhotoview } from 'nativescript-file-photoview';

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })
    export class AppComponent implements OnInit { 

        imageUrl: string;

        filePhotoView = new FilePhotoview();

        ngOnInit() {

            this.imageUrl = 'https://controller1.skywidesoft.com/images/sample1.jpg';

        }

        viewPhoto() {
            console.log('View Photo');
            console.log(`imageUrl: ${this.imageUrl}`);

            // Download image and save file to application cache
            Observable.from(nshttp.getImage(this.imageUrl)).subscribe(
                image => {

                    // This is the application's cache folder
                    let folder = fs.knownFolders.temp();

                    // Construct a unique file name for saving the image file
                    let fileName = new Date().getTime() + '.jpg';
                    let path = fs.path.join(folder.path, fileName);

                    // Save the file
                    image.saveToFile(path, enums.ImageFormat.jpg);
                    console.log(`File: ${path} saved successfully`);

                    // Display the photo
                    this.filePhotoView.show(path);

                }
            );
        }

    }
    \n

    Screenshots

    \n

    \"Demo

    \n

    Help

    \n

    I will accept pull requests that improve this and assign credit.\nAll code is Apache 2.0 licensed.

    \n

    License

    \n

    Copyright 2017 SkywideSoft

    \n

    Licensed under the Apache License, Version 2.0 (the "License");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at

    \n

    http://www.apache.org/licenses/LICENSE-2.0

    \n

    Unless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubest":{"name":"nativescript-youtubest","version":"1.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-router":{"name":"nativescript-router","version":"1.1.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-pusher/channels":{"name":"@nativescript-pusher/channels","version":"2.0.0-alpha.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-charts":{"name":"nativescript-charts","version":"0.0.7","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-charts/blob/master/LICENSE"},"readme":"

    Chart plugin for Nativescript

    \n

    Standalone plugin, not part of Telerik UI

    \n

    Android uses https://github.com/PhilJay/MPAndroidChart

    \n

    iOS not implemented

    \n

    Plugin for now contains Line chart type

    \n

    Line type:

    \n

    Add namespace xmlns:LineChart="nativescript-charts/line-chart"

    \n

    chartSettings are type of ILineChart\nchartData are type of ILineSeries\nEach point is object of {x,y}\nBoth can be imported from nativescript-charts/line-chart

    \n

    Example for LineChart

    \n
    var points  = [
        {x:1,y:4},
        {x:3,y:5.9},
        {x:7,y:4},
        {x:8,y:10},
        {x:10,y:1}
    ];

    var lineData:ILineSeries = {
        lineData: points,
        color:\"green\",
        name:\"test\",  
    };

    var linechartOpts:ILineChart= <ILineChart>{
        Legend:{
            enabled:false,
            form:LegendForm.CIRCLE,
        },
        XAxis:{
            textSize:12,
            textColor:\"green\",
            position:XPosition.TOP,
            axisMinimum:-30,
            axisMaximum:30,
            drawGridLines:false,
            showOnlyMinMax:false,
            enabled:true
        },
        RightYAxis:{
            textSize:10,
            textColor:\"green\",
            position:YPosition.OUTSIDE_CHART,
            axisMaximum:120,
            axisMinimum:-10,
            showOnlyMinMax:false,
            drawGridLines:false,
            enabled:true
        },
        LeftYAxis:{
            textSize:10,
            textColor:\"green\",
            position:YPosition.OUTSIDE_CHART,
            axisMaximum:120,
            axisMinimum:-10,
            showOnlyMinMax:false,
            drawGridLines:false,
            enabled:true
        },
        BaseSettings:{
            enabledDescription:false,
            drawGridBackground:false,
        }
    };
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" 
        xmlns:LineChart=\"nativescript-charts/line-chart\">
        <LineChart:LineChart  chartSettings=\"{{chartSettings}}\" chartData=\"{{chartData}}\"/>
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-better-sqlite":{"name":"nativescript-better-sqlite","version":"0.3.2","license":"MIT","readme":"

    Nativescript-Better-Sqlite

    \n

    A Nativescript plugin providing easy SQLite access on Android.

    \n

    Installation:

    \n
    tns plugin add nativescript-better-sqlite
    \n

    What is working:

    \n\n

    Example

    \n

    The following code

    \n
    import * as Sqlite from \"nativescript-better-sqlite\";

    const database = new Sqlite.Database('users', { inMemory: true });

    database.pragma('journal_mode = WAL');

    database.execute(
        `CREATE TABLE
            user (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
                  name TEXT NOT NULL);`
    );

    const insert = database.prepare('INSERT INTO user (name) VALUES (?)');

    insert.run(['testName1']);
    insert.run(['testName2']);

    insert.close();

    const names = database.prepare('SELECT * FROM user', true).all();

    console.log(names);
    \n

    results in

    \n
    [
        {
            \"name\" : \"testName1\",
            \"id\" : 1
        },
        {
            \"name\" : \"testName2\",
            \"id\" : 2
        }
    ]
    \n

    this output.

    \n

    TODOs:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-pusher/beams":{"name":"@nativescript-pusher/beams","version":"2.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-camera":{"name":"nativescript-na-camera","version":"1.2.0","readme":"

    NativeScript NA Camera plugin

    \n\"Demo\n

    NOTE! Android is currently not supported.

    \n

    A NativeScript camera that utilizes AVFoundation for iOS.

    \n

    Installation

    \n

    $ tns plugin add nativescript-na-camera

    \n

    Usage

    \n

    XML

    \n
    <Page navigatingTo=\"navigatingTo\" xmlns:NACamera=\"nativescript-na-camera\">
      <StackLayout>
        <NACamera:Camera id=\"cameraPreview\" />
        <Button text=\"Capture\" id=\"capturePhoto\" tap=\"capturePhoto\" />
        <Button text=\"New photo\" id=\"newPhoto\" tap=\"newPhoto\" />
      </StackLayout>
    </Page>
    \n

    JS

    \n
    var NACamera = require(\"nativescript-na-camera\");

    var page;

    exports.navigatingTo = function(args) {
      page = args.object;
      
      NACamera.start();
    };

    exports.capturePhoto = function(args) {
      NACamera.capturePhoto({
        saveToLibrary: true
      }).then(function(image, savedToLibrary) {
        NACamera.stop();
        if(savedToLibrary) console.log(\"Photo was saved to library!\");
        // Do something more...
      }, function(error) {
        console.error(error);
      });
    };

    exports.newPhoto = function(args) {
      NACamera.start();
    };
    \n

    Note! NACamera.start() must be fired to initiate the camera preview. It is recommended to stop the camera once the preview is out of view in the UI using NACamera.stop().

    \n

    Methods

    \n

    capturePhoto()

    \n

    To capture a photo.

    \n

    The resolution of captured photo is the proportion of the camera preview.

    \n

    capturePhoto(props)

    \n\n
    NACamera.capturePhoto({
      saveToLibrary: true
    }).then(function(image, savedToLibrary) {
      NACamera.stop();
      if(savedToLibrary) console.log(\"Photo was saved to library!\");
      // Do something more...
    }, function(error) {
      console.error(error);
    });
    \n
    \n

    saveToLibrary()

    \n

    Save an image to the library.

    \n

    saveToLibrary(image)

    \n\n
    NACamera.saveToLibrary(image);
    \n
    \n

    setTorchMode()

    \n

    Set the torch mode (if available).

    \n

    setTorchMode(condition)

    \n\n
    NACamera.setTorchMode(true); // Torch on
    NACamera.setTorchMode(false); // Torch off
    \n
    \n

    setFlashMode()

    \n

    Set the flash mode (if available).

    \n

    setFlashMode(condition)

    \n\n
    NACamera.setFlashMode(true); // Flash on
    NACamera.setFlashMode(false); // Flash off
    \n
    \n

    setDevicePosition()

    \n

    Set the camera device position (back or front camera, if available).

    \n

    setDevicePosition(position)

    \n\n
    NACamera.setDevicePosition(\"back\"); // Back camera
    NACamera.setDevicePosition(\"front\"); // Front camera
    \n
    \n

    hasDevicePosition()

    \n

    Check if a camera device position is available.

    \n

    hasDevicePosition(position)

    \n\n
    var hasBackCamera = NACamera.hasDevicePosition(\"back\");
    var hasFrontCamera = NACamera.hasDevicePosition(\"front\");
    \n
    \n

    Other methods

    \n\n

    Known issues

    \n\n

    To-do list

    \n\n

    Please post an issue if you have any other ideas!

    \n

    History

    \n

    Version 1.1.0 (November 21, 2016)

    \n\n

    Version 1.0.0 (November 10, 2016)

    \n\n

    Credits

    \n\n

    License

    \n

    MIT - for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-sentry":{"name":"@finanzritter/nativescript-sentry","version":"1.10.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-https":{"name":"@nstudio/nativescript-https","version":"3.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tealium/nativescript-plugin":{"name":"@tealium/nativescript-plugin","version":"1.1.4","license":"Commercial","readme":"

    @tealium/nativescript-plugin

    \n
    ns plugin add @tealium/nativescript-plugin
    \n

    Usage

    \n

    See https://docs.tealium.com/platforms/nativescript for full documentation.

    \n

    License

    \n

    License Agreement

    \n

    Thank You for Your interest in our Tealium NativeScript Plugin (the "Software"), owned and licensed by Tealium Inc. (“Tealium,” "Our," “We,” or “Us”). Please read this license agreement (the "Agreement") carefully, as it contains the terms and conditions that govern Your use of and access to the Software.

    \n

    You may not access the Software if You are Our direct competitor, except with Our prior written consent. In addition, You may not access the Software for purposes of monitoring the availability, performance, or functionality, of any of our products and services or for any other benchmarking or competitive purposes.

    \n

    BY DOWNLOADING THE SOFTWARE OR BY EXECUTING A TEALIUM PROVIDED ORDER FORM THAT REFERENCES THIS AGREEMENT, YOU AGREE TO BE BOUND BY AND COMPLY WITH THIS AGREEMENT. IF YOU ARE ENTERING INTO THIS AGREEMENT ON BEHALF OF A COMPANY OR OTHER LEGAL ENTITY, YOU REPRESENT THAT YOU HAVE THE AUTHORITY TO BIND SUCH ENTITY AND ITS AFFILIATES TO THIS AGREEMENT, IN WHICH CASE THE TERMS "YOU" OR "YOUR" WILL REFER TO SUCH ENTITY AND ITS AFFILIATES. IF YOU DO NOT HAVE SUCH AUTHORITY, OR IF YOU DO NOT AGREE WITH THE TERMS OF THIS AGREEMENT, YOU MUST NOT USE THE SOFTWARE.

    \n

    The term of Your license to use the Software (the "Term") will begin when You accept this Agreement as set forth above and will continue until terminated pursuant to the provisions of the "Cancellation and Termination" section below. During the Term, We grant You a non-exclusive, non-transferable, royalty-free, limited license (with no right to sublicense) to use the Software to do the following:

    \n

    develop software applications and functionality designed to be used in conjunction with Tealium's products and services;\nconduct quality assurance testing to ensure compatibility between your software application and Tealium's products and services; and\nconduct support testing to troubleshoot compatibility between your software application and Tealium's products and services.

    \n

    During the Term, Tealium further grants to You a non-exclusive, non-transferable, royalty-free, limited world-wide license (with no right to sublicense) to market, reproduce, and distribute applications incorporating the integration You develop under this Agreement, either directly or through multiple levels of distributors, Your end users, but only under an end-user license agreement with terms that are as protective of Tealium's rights as this Agreement.

    \n

    We do not grant any other rights to the Software. You may only use the Software during the Term, we reserve all rights not expressly granted under this Agreement, and there are no implied rights or other rights We grant hereunder, whether by estoppel or otherwise. You may not: (i) copy or reproduce the Software (except for reasonable archival purposes); (ii) modify or create any derivative works of the Software; (iii) decompile, disassemble, or reverse engineer the Software (except to the extent expressly permitted under applicable law); or (iv) remove or alter any trademark, logo, copyright or other proprietary notices, legends, symbols or labels in the Software. Further, You may not use the Software for any illegal or unauthorized purpose.

    \n

    Tealium will retain all title, ownership, and Intellectual Property Rights in the Software and any derivative works thereof. “Intellectual Property Rights” will mean all patent, copyright, trade secret, trademark and other proprietary and intellectual property rights, including moral rights. The Software is protected by copyright and other intellectual property laws and by international treaties. You agree that We will own all suggestions, enhancements requests, feedback, recommendations, or other input provided by You or any other party relating to the Software. Other than the use licenses expressly granted in this Agreement, neither this Agreement nor its performance transfers from Us to You any Tealium intellectual property.

    \n

    General Conditions and Restrictions\nYour use of the Software is at Your sole risk.\nYou agree that Tealium is under no obligation to provide You with support for the Software, or to provide You with updates or error corrections ("Updates") to the Software. If Tealium, at its sole discretion, decides to provide You with Updates, Updates will be considered part of Software, and subject to the terms of this Agreement.\nYou agree not to reproduce, duplicate, copy, sell, resell, or exploit any portion or feature of the Software or access to the Software without express written permission from Tealium.

    \n

    No Warranty\nTHE SOFTWARE IS PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS, AND TEALIUM EXPRESSLY DISCLAIMS ANY WARRANTIES AND CONDITIONS OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, QUIET ENJOYMENT, ACCURACY, OR NON-INFRINGEMENT. WITHOUT LIMITING THE FOREGOING, TEALIUM DOES NOT WARRANT THAT THE SERVICE WILL MEET YOUR SPECIFIC REQUIREMENTS, THAT THE SERVICE WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE, THAT THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SOFTWARE WILL BE COMPLETE, ACCURATE, OR RELIABLE, THAT THE QUALITY OF ANY PRODUCTS, SERVICES, INFORMATION, OR OTHER MATERIAL PURCHASED OR OBTAINED BY YOU THROUGH THE SOFTWARE WILL MEET YOUR EXPECTATIONS, OR THAT ANY ERRORS IN THE SOFTWARE WILL BE CORRECTED.

    \n

    Limitation of Liability\nYOU EXPRESSLY UNDERSTAND AND AGREE THAT TEALIUM WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING BUT NOT LIMITED TO DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER INTANGIBLE LOSSES (EVEN IF TEALIUM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES), INCLUDING ANY SUCH DAMAGES RESULTING FROM THE USE OR THE INABILITY TO USE THE SOFTWARE; THE COST OF PROCUREMENT OF SUBSTITUTE GOODS AND SERVICES RESULTING FROM ANY GOODS, DATA, INFORMATION OR SERVICES PURCHASED OR OBTAINED OR MESSAGES RECEIVED OR TRANSACTIONS ENTERED INTO THROUGH OR FROM THE SOFTWARE; UNAUTHORIZED ACCESS TO OR ALTERATION OF YOUR TRANSMISSIONS OR DATA; STATEMENTS OR CONDUCT OF ANY THIRD PARTY ON THE SOFTWARE; TERMINATION OF YOUR ACCOUNT; OR ANY OTHER MATTER RELATING TO THE SOFTWARE.

    \n

    NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, TEALIUM’S LIABILITY TO YOU FOR ANY DAMAGES ARISING FROM OR RELATING TO THE SOFTWARE (FOR ANY CAUSE WHATSOEVER AND REGARDLESS OF THE FORM OF THE ACTION) WILL AT ALL TIMES BE LIMITED TO THE GREATER OR EITHER (1) THE AMOUNT YOU PAID TO TEALIUM IN THE SIX (6) MONTHS IMMEDIATELY PRECEDING THE INCIDENT GIVING RISE TO THE CLAIM OR (2) ONE HUNDRED FIFTY DOLLARS (USD 150.00).

    \n

    Cancellation and Termination\nTealium, in its sole discretion, may terminate your license, for any reason at any time.\nYou, in your sole discretion, may terminate this Agreement immediately upon written notice to Tealium.\nUpon termination or expiration of this Agreement, You will immediately cease use of and destroy the original and all copies of the Software in Your possession or control. Upon Tealium's written request, You will confirm to Tealium in writing that You have complied with all provisions of this Agreement.\nEither party may terminate this Agreement upon written notice to the other party, for any material breach by the other party, if such breach is not cured within thirty (30) days after the non-breaching party provides the allegedly breaching party with written notice of such breach.

    \n

    Miscellaneous\nThis Agreement will be governed by the laws of the State of California without giving effect to any conflicts of laws principles that may require the application of the law of a different jurisdiction. For any dispute or proceeding arising from or relating to this Agreement, You agree to submit to the jurisdiction of, and agree that venue is proper in, the state courts located in San Diego County, California, and in the federal courts located in the Southern District of California. The failure of Tealium to exercise or enforce any right or provision of this Agreement will not constitute a waiver of such right or provision. This Agreement constitutes the entire agreement between You and Tealium and governs Your use of the Service, superseding any prior agreements between You and Tealium (including, but not limited to, any prior versions of the Agreement).

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"digitaltown-nativescript-gif":{"name":"digitaltown-nativescript-gif","version":"4.0.2","license":"MIT","readme":"

    README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"cordova-admobsdk":{"name":"cordova-admobsdk","version":"8.13.0","license":"MIT","readme":"

    Google Mobile Ads SDK for Cordova

    \n

    This cordova plugin adds Google Mobile Ads SDK to Cordova projects, mainly as dependency for other plugins.

    \n

    Platform Versions

    \n

    Platforms supported:

    \n\n

    ChangeLog

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"a2c-nativescript-inappbrowser":{"name":"a2c-nativescript-inappbrowser","version":"3.0.1","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-keyboard":{"name":"nativescript-na-keyboard","version":"1.1.0","readme":"

    NativeScript NA Keyboard plugin

    \n

    NOTE! Android is currently not supported.

    \n

    A NativeScript keyboard observer that utilizes KWKeyboardListener for iOS.

    \n

    Installation

    \n

    $ tns plugin add nativescript-na-keyboard

    \n

    Usage

    \n

    Simply require the plugin and do as such:

    \n
    var NAKeyboard = require(\"nativescript-na-keyboard\");

    NAKeyboard.on(\"open close\", function(eventData) {
      console.log(eventData.eventName); // Returns either \"open\" or \"close\".
      console.dump(eventData.keyboardFrame); // Returns position and size of the keyboard.
    });
    \n

    Methods

    \n

    on()

    \n

    To observe keyboard activity.

    \n

    on(eventTypes, callback)

    \n\n
    \n

    setAvoidingView()

    \n

    Set a view that the keyboard should avoid.

    \n

    setAvoidingView(view)

    \n\n
    var view = page.getViewById(\"inputText\"); // The TextField view
    NAKeyboard.setAvoidingView(view);
    \n
    \n

    Other methods

    \n\n

    Known issues

    \n\n

    History

    \n

    Version 1.1.0 (22 October 2016)

    \n\n

    Version 1.0.1 (18 October 2016)

    \n\n

    Version 1.0.0 (18 October 2016)

    \n\n

    Credits

    \n\n

    License

    \n

    MIT - for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jnorkus/nativescript-ngx-shadow":{"name":"@jnorkus/nativescript-ngx-shadow","version":"7.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@heywhy/ns-secure-storage":{"name":"@heywhy/ns-secure-storage","version":"0.3.0","license":"Apache-2.0","readme":"

    @heywhy/ns-secure-storage

    \n

    \"NPM\n\"Twitter

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    ns plugin add @heywhy/ns-secure-storage
    \n

    Usage

    \n

    This plugin maintains the same API as @nativescript/secure-storage but with missing improvements.

    \n

    iOS Security++

    \n

    By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

    \n
    declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
    const secureStorage = new SecureStorage({accessibilityType: kSecAttrAccessibleWhenUnlockedThisDeviceOnly})
    \n

    iOS Simulator

    \n

    Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

    \n
    const secureStorage = new SecureStorage({disableFallbackToUserDefaults: true})
    \n

    If you're running into issues similar to issue_10, consider using the default behaviour again.

    \n

    iOS Keychain Access Groups

    \n

    You can share secrets between apps/extensions via Keychain access groups.

    \n

    To setup:

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@qlip/nativescript-checkbox":{"name":"@qlip/nativescript-checkbox","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript checkbox

    \n
    ns plugin add @qlip/nativescript-checkbox
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper-ios":{"name":"nativescript-imagecropper-ios","version":"1.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-file-picker":{"name":"nativescript-file-picker","version":"0.0.2","license":"MIT","readme":"

    /* not published yet */

    \n

    Android: https://github.com/spacecowboy/NoNonsense-FilePicker/

    \n

    copied from library page:

    \n

    \n\n

    <img src="https://raw.githubusercontent.com/spacecowboy/NoNonsense-FilePicker/master/screenshots/Nexus10-picker-dark.png"\nwidth="50%"\n

    \n

    \n

    \n\n

    <img src="https://raw.githubusercontent.com/spacecowboy/NoNonsense-FilePicker/master/screenshots/Nexus10-picker-light.png"\nwidth="50%"\n

    \n

    \n

    Include permission in your manifest

    \n
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    \n

    Include the file picker activity

    \n

    The intent filter is optional depending on your use case. Note that\nthe theme set in the manifest is important.

    \n
        <activity
           android:name=\"com.nononsenseapps.filepicker.FilePickerActivity\"
           android:label=\"@string/app_name\"
           android:theme=\"@style/FilePickerTheme\">
           <intent-filter>
              <action android:name=\"android.intent.action.GET_CONTENT\" />
              <category android:name=\"android.intent.category.DEFAULT\" />
           </intent-filter>
        </activity>
    \n

    Configure the theme

    \n

    You must set the theme on the activity, but you can configure it to\nmatch your existing application theme. You can also name it whatever\nyou like..

    \n
        </style>

            <style name=\"FilePickerTheme\" parent=\"NNF_BaseTheme.Light\">
            <!-- Set these to match your theme -->
            <item name=\"colorPrimary\">@color/ns_primary</item>
            <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
            <item name=\"colorAccent\">@color/ns_accent</item>

            <!-- Setting a divider is entirely optional -->
            <item name=\"nnf_list_item_divider\">?android:attr/listDivider</item>

            <!-- Need to set this also to style create folder dialog -->
            <item name=\"alertDialogTheme\">@style/FilePickerAlertDialogTheme</item>

            <!-- If you want to set a specific toolbar theme, do it here -->
            <!-- <item name=\"nnf_toolbarTheme\">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> -->
        </style>

        <style name=\"FilePickerAlertDialogTheme\" parent=\"Theme.AppCompat.Dialog.Alert\">
            <item name=\"colorPrimary\">@color/ns_primary</item>
            <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
        </style>
    \n

    docs:\nso..oo..on

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-in-app-purchase":{"name":"nativescript-in-app-purchase","version":"2.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@radworks/nativescript-multi-select":{"name":"@radworks/nativescript-multi-select","version":"1.0.4","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-nawah":{"name":"ns-nawah","version":"1.0.0","license":"Apache-2.0","readme":"

    ns-nawah

    \n

    This repo is the home of the source code of ns-nawah, Nawah SDK for Angular.

    \n

    Quick Start

    \n

    The current SDK has two dependencies:

    \n\n

    Install ns-nawah for NativeScript

    \n
    tns plugin add ns-nawah
    \n

    How to Use

    \n
      \n
    1. Import NsNawahModule in your module imports.
      2. \n
    2. Initiate the SDK, in your component, using:
      3. \n
    \n
    import { Component, OnInit } from '@angular/core';

    import { NawahService, Res } from 'ns-nawah'

    @Component({
    \tselector: 'app-root',
    \ttemplateUrl: './app.component.html',
    \tstyleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

    \tconstructor(private nawah: NawahService) {}

    \tngOnInit() {
    \t\tthis.nawah.init({
    \t\t\tapi: 'ws://localhost:8081/ws',
    \t\t\tanonToken: '__ANON_TOKEN_f00000000000000000000012',
    \t\t\tauthAttrs: ['email'],
    \t\t\tappId: 'APP_ID',
    \t\t});
    \t}
    }
    \n

    SDK Config

    \n

    When initialising the SDK, you should pass an object matching the interface SDKConfig, which has the following attributes:

    \n
      \n
    1. api (Required): The URI of Nawah app you are connecting to.
      2. \n
    2. anonToken (Required): Nawah app ANON_TOKEN.
      3. \n
    3. authAttrs (Required): Nawah apps don't have strict User module attrs structure. This includes the authentication attrs that are set per app. This attribute represents an Array<string> referring to the same authentication attrs of the app.
      4. \n
    4. debug (Optional): A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.
      5. \n
    5. fileChunkSize (Optional): A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to Nawah app. Default 512000.
      6. \n
    \n

    Best Practices

    \n

    You can use the SDK 100% per your style of development, however we have some tips:

    \n

    Session Reauth

    \n

    The best practice to handle a reauth scenario is by attempting to checkAuth as soon as the connection with Nawah app is made. This can be made by subscribing to inited$ subject which notifies subscriptions about any changes to SDK initialisation status reflected as inited attribute in the SDK. Which can be done like:

    \n
    this.nawah.inited$.subscribe((init: boolean) => {
    \tif (init) {
    \t\t// SDK is inited and ready for your calls:
    \t\ttry {
    \t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
    \t\t\tthis.nawah.checkAuth();
    \t\t} catch { }
    \t}
    }, (err: Res<Doc>) => {
    \tconsole.log('inited$.err', err);
    });
    \n

    Auth State Detection

    \n

    Although, you can detect the user auth state in the subscription of the calls auth, reauth and checkAuth, the best practice is to use the global authed$ state Subject. You can do this by subscripting to authed$ in the same component (usually AppComponent) you are initiating the SDK at. This assures a successful checkAuth as part of the api.init subscription can be handled. The model suggested is:

    \n
    this.nawah.authed$.subscribe((session: Doc) => {
    \tif (session) {
    \t\tconsole.log('We are having an `auth` condition with session:', session);
    \t} else {
    \t\tconsole.log('We just got unauthenticated');
    \t}
    });
    \n

    Reconnecting on Disconnects

    \n

    Websockets are always-alive connections. A lot can go wrong here resulting in the connection with your Nawah app. To make sure you can always get reconnected recall SDK init method upon SDK becoming not inited:

    \n
    import { Component, OnInit } from '@angular/core';

    import { NawahService, Res } from 'ns-nawah'

    @Component({
    \tselector: 'app-root',
    \ttemplateUrl: './app.component.html',
    \tstyleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

    \tconstructor(private nawah: NawahService) {
    \t\tthis.nawah.inited$.subscribe((init: boolean) => {
    \t\t\tif (init) {
    \t\t\t\t// SDK is inited and ready for your calls:
    \t\t\t\ttry {
    \t\t\t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
    \t\t\t\t\tthis.nawah.checkAuth();
    \t\t\t\t} catch { }
    \t\t\t} else {
    \t\t\t\t// SDK just got not inited, let's init SDK again:
    \t\t\t\tthis.init();
    \t\t\t}
    \t\t}, (err: Res<Doc>) => {
    \t\t\tconsole.log('    inited$.err', err);
    \t\t});
    \t}

    \tngOnInit() {
    \t\tthis.init();
    \t}

    \tinit(): void {
    \t\tthis.nawah.init({
    \t\t\tapi: '    ws://localhost:8081/ws',
    \t\t\tanonToken: '    __ANON_TOKEN_f00000000000000000000012',
    \t\t\tauthAttrs: ['    email'],
    \t\t\tappId: '    APP_ID',
    \t\t});
    \t}
    }
    \n

    API Reference

    \n

    debug

    \n

    A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.

    \n

    fileChunkSize

    \n

    A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to Nawah app. Default 512000.

    \n

    session

    \n

    A Doc object representing the current session. It has value only when the user is authenticated.

    \n

    authed

    \n

    A Boolean storing the current state of user authentication.

    \n

    authed$

    \n

    A Subject<Boolean | Doc> you can subscribe to handle changes to state of user authentication.

    \n

    init()

    \n

    The base method to initiate a connection with Nawah app. This method returns an Observable for chain subscription if for any reason you need to read every message being received from the API, however subscribing to it is not required. Method definition:

    \n
    init(api: String, anonToken: String): Observable<Res<Doc>> { /*...*/ }
    \n

    close()

    \n

    The method to close current connection with Nawah app. This method returns an Observable for chain subscription if for any reason you need to read the resposne of the close call, however subscribing to it is not required. Method definition:

    \n
    close(): Observable<Res<Doc>> { /*...*/ }
    \n

    auth()

    \n

    The method you can use to authenticate the user. This method returns an Observable for chain subscription if for any reason you need to read the response of the auth call, however subscribing to it is not required. Method definition:

    \n
    auth(authVar: string, authVal: string, password: string): Observable<Res<Doc>> { /*...*/ }
    \n

    reauth()

    \n

    The method you can use to reauthenticate the user. The method would fail if no sid and token attrs are cached from earlier successful authentication call. This method is not supposed to be called directly, rather use checkAuth(). This method returns an Observable for chain subscription if for any reason you need the response of the reauth call, however subscribing to it is not required. Method definition:

    \n
    reauth(sid: string = this.cache.get('sid'), token: string = this.cache.get('token')): Observable<Res<Doc>> { /*...*/ }
    \n

    signout()

    \n

    The method you can use to signout the current user. Upon success, this methods removes all the cached attrs of the session. This method returns an Observable for chain subscription if for any reason you need the response of the signout call, however subscribing to it is not required. Method definition:

    \n
    signout(): Observable<Res<Doc>> { /*...*/ }
    \n

    checkAuth()

    \n

    The method to check whether there is a cached session and attempt to reauthenticate the user. This method would throw an error if no credentials are cached, thus you need to always wrap it in try..catch. This method returns an Observable for chain subscription if for any reason you need the response of the checkAuth call, however subscribing to it is not required. Method definition:

    \n
    checkAuth(): Observable<Res<Doc>> { /*...*/ }
    \n

    generateAuthHash()

    \n

    The method to use to generate authentication hashes. This is used internally for the auth() call. However, you also need this to generate the values when creating a user. Method definition:

    \n
    generateAuthHash(authVar: string, authVal: string, password: string): string { /*...*/ }
    \n

    deleteWatch()

    \n

    The method to delete a watch in progress. You can pass the watch ID you want to delete or __all to delete all watches. This method returns an Observable for chain subscription if for any reason you need the response of the deleteWatch call, however subscribing to it is not required. Method definition:

    \n
    deleteWatch(watch: string | '__all'): Observable<Res<Doc>> { /*...*/ }
    \n

    call()

    \n

    The most important method in the SDK. This is the method you use to call different endpoints in your Nawah app. Although the callArgs object in the params is having full definition of all call attrs, you still usually only need to pass either query and/or doc in most of the cases. Third param awaitAuth specify wheter the call should be queued until session is authed. Method definition:

    \n
    call(endpoint: string, callArgs: callArgs, awaitAuth: boolean = false): Observable<Res<Doc>> { /*...*/ }
    \n

    Contribution Guidelines

    \n

    Thank you for your interest in ns-nawah.

    \n

    Please refer to Contribution Guidelines for more details on contributing to this project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-base-64-manager":{"name":"nativescript-base-64-manager","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-app-review":{"name":"@enduco/nativescript-app-review","version":"1.0.1","license":"Apache-2.0","readme":"

    @enduco/app-review

    \n
    ns plugin add @enduco/nativescript-app-review
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dottodot/nativescript-camera-plus":{"name":"@dottodot/nativescript-camera-plus","version":"2.0.6","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@flypapertech/nativescript-snackbar":{"name":"@flypapertech/nativescript-snackbar","version":"4.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-jpush":{"name":"nativescript-android-jpush","version":"1.0.0","license":"ISC","readme":"

    nativescript-android-jpush

    \n

    极光推送NS插件，android版

    \n

    License

    \n

    MIT@yilei

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zip2":{"name":"nativescript-zip2","version":"1.3.5","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-ngx-shadow":{"name":"@dsvishchov/nativescript-ngx-shadow","version":"7.0.3","license":"Apache-2.0","readme":"

    NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-ngx-shadow
    \n

    Demo

    \n

    \"N|Solid\"

    \n

    How to use it

    \n

    This is an Angular directive to make your life easier when it comes to native shadows.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the NgShadowModule

    \n
    // ...
    import { NgShadowModule } from \"nativescript-ngx-shadow\";

    @NgModule({
      imports: [
        NgShadowModule
        // ...
      ]
      // ...
    })
    export class MyModule {}
    \n

    Just use in your templates

    \n

    Simple attribute shadow:

    \n
    <Label shadow=\"2\"></Label>
    \n

    Of course you can property bind it:

    \n
    <Label [shadow]=\"myCustomShadow\"></Label>
    \n

    To provide other details, combine the shadow directive with other attributes:

    \n
    <Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypePlatformDescription
    shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
    default: 'RECTANGLE'    		AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    AndroidData and IOSData

    \n

    As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

    \n

    Component

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
    // ...
    export class MyComponent {
      fabShadow: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    In the template you can do:

    \n
    <Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

    \n\n

    If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-ngx-shadow\";
    class MyComponent {
      // ...
      ngOnInit(): init {
        this.mySnackBar.elevation = Elevation.SNACKBAR;
      }
      // ...
    }
    \n

    Notes about version 2+

    \n

    Here are the list of improvements on version 2.0:

    \n
      \n
    1. BugFix: Integer directive not rendering on iOS.
      2. \n
    2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
      3. \n
    3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
      4. \n
    4. 2.1.X Override Android default StateListAnimator as explained below:
      5. \n
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

    \n

    Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow:

    \n\n

    Changelog

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache-opada":{"name":"nativescript-image-cache-opada","version":"1.0.3","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alexbald/nativescript-intl":{"name":"@alexbald/nativescript-intl","version":"4.0.2","readme":"

    Welcome to the nativescript-intl plugin for NativeScript framework

    \n

    Prerequisites

    \n\n

    Install nativescript-intl plugin.

    \n

    Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-intl.

    \n

    This plugin provides similar to Intl.js API for date, time and number formatting on a mobile device (Android and iOS).

    \n

    How to use

    \n
    var intl = require(\"nativescript-intl\");
    var dateFormat = new intl.DateTimeFormat('en-US', {'year': 'numeric', 'month': 'short', 'day': 'numeric'}).format(new Date(2016, 2, 23));
    var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}).format(123456.789);

    console.log(\"dateFormat: \" + dateFormat);
    console.log(\"numberFormat: \" + numberFormat);
    // prints Mar 23, 2016
    // $123456.79
    \n

    Since localization formatting is not exactly same on Android, iOS and Intl.js there is another option to use this API.

    \n

    Custom pattern

    \n
    var intl = require(\"nativescript-intl\");
    var dateFormat = new intl.DateTimeFormat(null, null, 'y MMMM d, EEEE HH:mm:ss').format(new Date(2016, 2, 23, 12, 35, 40));
    var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}, '#,##0.00 ¤').format(123456.789);

    console.log(\"dateFormat: \" + dateFormat);
    console.log(\"numberFormat: \" + numberFormat);
    // prints 2016 March 23, Wednesday 2016 12:35:40
    // 123,456.79 $
    \n
    \n

    Omitting locale will use the current locale setting on device.

    \n
    \n
    \n

    Keep in mind that ICU versions differ accross device OS versions, so this plugin could produce different results on a different API level (Android) and OS version (iOS).

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photoviewer-ns7":{"name":"nativescript-photoviewer-ns7","version":"3.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-betterwebsockets":{"name":"nativescript-betterwebsockets","version":"1.0.0","license":"MIT & Apache 2.0","readme":"

    BetterWebsockets for Nativescript

    \n

    Java WebSockets Library implementation for Nativescript. Allows you to create a WebSocket Client and Server on Android.

    \n

    \"PayPal \"Bitcoin

    \n

    Requirements

    \n

    This plugin works on Android only!

    \n

    Installation

    \n

    To install this plugin:

    \n
    tns plugin add nativescript-betterwebsockets
    \n

    Usage

    \n
    import { WebSocketClient, WebSocketServer } from 'nativescript-betterwebsockets';
    \n

    WebSocketClient:

    \n
    /** Inside your page component **/
    let url = 'wss://echo.websocket.org';
    this.client = new WebSocketClient(url);
    // Open Event
    this.client.on('open', function(handshake){
    \tconsole.log('Opened!');
    \tthis.main(); // Do everything else here
    });
    // Message Event
    this.client.on('message', function(message){ 
    \tconsole.log('New message: ' + message);
    });
    // Close Event
    this.client.on('close', function(code, reason, remote){
    \tconsole.log('Closed!');
    });
    // Error Event
    this.client.on('error', function(ex){
    \tconsole.log('Error!');
    });
    // Connect (Do after setting the events!).
    this.client.connect();
    \n
    // This will be executed after the open event.
    main() {
    \tthis.client.send('Hey!');
    \tthis.client.close(); // Close the client :(
    }
    \n

    WebSocketServer:

    \n
    let port = 3000;
    this.server  =  new  WebSocketServer(port);
    // Start Event (Server Started successfully)
    this.server.on('start', () => {
    \tconsole.log('Server listening on *:'  +  port);
    });
    // Open Event (Someone connects)
    this.server.on('open', (conn, handshake) => {
    \tconsole.log('New Conenction!');
    \tconn.send('You are connected!'); // Send message to socket
    });
    // Message Event
    this.server.on('message', (conn, message) => {
    \tconsole.log('New message: ' + message);
    });
    // Close event
    this.server.on('close', (conn, code, reason, remote) => {
    \tconsole.log('Someone left!');
    });
    // Error event
    this.server.on('error', (conn, ex) => {
    \tconsole.log('Error!');
    });
    // Starts the server
    this.server.start();
    \n

    License

    \n

    MIT License - see LICENSE for more details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-meteor-client":{"name":"nativescript-meteor-client","version":"0.0.6","license":"MIT","readme":"

    Meteor integration in NativeScript using nativescript-websockets

    \n
    $ tns plugin add nativescript-meteor-client
    \n

    To init your Meteor connection and classes add this snippet just after the platformNativeScriptDynamic import:

    \n
    import {platformNativeScriptDynamic} from \"nativescript-angular/platform\";

    require('nativescript-meteor-client')({
        url: 'http://127.0.0.1:3000',
        debug: true,
        timeout: 5000
    }, require('nativescript-websockets'));

    ...
    \n

    debug and timeout are optional.

    \n

    An example application can be fount at nativescript-ng-drawer-seed.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-camera-plus":{"name":"@knotes/nativescript-camera-plus","version":"4.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mashdog/nativescript-photoviewer":{"name":"@mashdog/nativescript-photoviewer","version":"3.1.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fabric-cp":{"name":"nativescript-fabric-cp","version":"2.0.3","license":"MIT","readme":"

    NativeScript Fabric Plugin \"apple\" \"android\"

    \n

    \"Greenkeeper\n\"Build\n\"Donate

    \n

    \"npm\n\"Maintainability\"

    \n

    \"NPM\"

    \n

    \n
    \n

    Feel free to donate

    \n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

    \"Bitcoin\"

    \n

    Also via greenaddress

    \n
    \n

    Usage

    \n

    Installation

    \n

    Go to Crashlytics and pick of the needed API-Key and API-Secret:

    \n

    \"\"

    \n

    Create a file fabric.json in the project root folder and add the API-Key and API-Secret:

    \n
    {
        \"using_ios\": true,
        \"using_android\": true,
        \"api_key\": \"...\",
        \"api_secret\": \"...\"
    }
    \n
    $ tns plugin add nativescript-fabric
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add nativescript-fabric@next
    \n

    Android

    \n

    Add the API-Key to your AndroidManifest.xml:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\" package=\"__PACKAGE__\" android:versionCode=\"385\" android:versionName=\"1.0.14\">
     ....
      <application android:name=\"com.tns.NativeScriptApplication\" android:allowBackup=\"true\" android:icon=\"@drawable/icon\" android:label=\"@string/app_name\" android:theme=\"@style/AppTheme\">
        ...
        <meta-data android:name=\"io.fabric.ApiKey\" android:value=\"**<API-KEY>**\"/>
      </application>
    </manifest>
    \n

    iOS

    \n

    No further confiugration needed

    \n

    Additional information

    \n

    Android

    \n

    For more details see fabric.io/kits/android/crashlytics.

    \n

    iOS

    \n

    For more details see fabric.io/kits/ios/crashlytics.

    \n

    API

    \n

    Init the plugin in your app (for angular apps use main.ts):

    \n
    import { Fabric } from 'nativescript-fabric';
    Fabric.init();
    \n

    Afterwards you can use the instance methods for logging (general error logging is already added):

    \n\n

    Angular

    \n
    import { FabricModule } from 'nativescript-fabric/angular';

    NgModule({
      ...
      imports: [
        FabricModule.forRoot()
      ],
    \n

    Known Issues

    \n

    com.android.ide.common.process.ProcessException

    \n
    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ':app:transformClassesWithDexForF0F1F2F3F4F5Debug'.
    > com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: Cannot merge new index 69013 into a non-jumbo instruction!nto a non-jumbo instruction!
    \n

    set the following in your app.gradle:

    \n
    android {
        ...
        dexOptions {
            jumboMode true
        }

    }
    \n

    XML Parsing error

    \n
    Error:/app/build/intermediates/res/merged/debug/values/com_crashlytics_build_id.xml uncompiled XML file passed as argument. Must be compiled first into .flat file.
    \n

    Try adding:

    \n
    android.enableAapt2 = false
    \n

    to your gradle.properties file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photoviewer-s":{"name":"nativescript-photoviewer-s","version":"3.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/compiler":{"name":"@nativescript-vue/compiler","version":"3.0.0-dev.4","license":"MIT","readme":"

    @nativescript-vue/compiler

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-settings":{"name":"nativescript-app-settings","version":"1.0.0","readme":"

    App settings

    \n

    App settings is a nativescript plugin it allow user to open setting in Android and Ios .

    \n

    Installation

    \n
    tns plugin add nativescript-app-settings
    \n

    Usage

    \n
    const wifiSettings = require(\"nativescript-app-settings\");
    // open general settings
    wifiSettings.openGeneralSettingsOnDevice();

    // open wifi settings
    wifiSettings.openWifiSettingsOnDevice();

    // open bluetooth settings
    wifiSettings.openBluetoothSettingsOnDevice();
    \n

    Contributing

    \n

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"draggie-nativescript-loading-indicator":{"name":"draggie-nativescript-loading-indicator","version":"1.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radio":{"name":"nativescript-radio","version":"0.3.6","license":"Apache-2.0","readme":"

    NativeScript Radio Button Plugin

    \n

    Plugin for using the native Android RadioGroup and RadioButton widgets.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-radio
    \n

    Supported platforms

    \n

    Android only.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rob4226/nstudio-nativescript-snackbar":{"name":"@rob4226/nstudio-nativescript-snackbar","version":"2.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@qlip/nativescript-badge":{"name":"@qlip/nativescript-badge","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript badge

    \n
    ns plugin add @qlip/nativescript-badge
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-angular":{"name":"@progress/jsdo-angular","version":"6.0.0","license":"Apache-2.0","readme":"

    Progress Data Source for Angular

    \n

    The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript and Angular".

    \n

    Documentation

    \n

    Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

    \n

    The Data Source can be used by apps built using NativeScript, Angular and Node.

    \n

    License

    \n

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    \n

    http://www.apache.org/licenses/LICENSE-2.0

    \n

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@danieldent/nativescript-camera":{"name":"@danieldent/nativescript-camera","version":"4.2.0-2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signalr-core":{"name":"nativescript-signalr-core","version":"2.0.0","license":"Apache-2.0","readme":"

    Nativescript Signalr Core

    \n

    Plugin for signalr core in NativeScript\nAll my code is LICENSED under the MIT License

    \n

    Requirements

    \n

    This plugin dependent on NativeScript WebSockets plugin\nthanks for nathan@master-technology.com\nnativescript-websockets

    \n

    Installation

    \n
    tns plugin add nativescript-websockets
    npm install nativescript-signalr-core --save
    \n

    Android

    \n
    AndroidManifest.xml
    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    <application android:usesCleartextTraffic=\"true\">
    \n

    How To use nativescript signalr core ?

    \n
    main.tns.ts
    \n
        declare var require;
        var WebSocket = require('nativescript-websockets');
    \n
    Home.component.ts
    \n

    In NativeScript + Angular 7

    \n

    import {Component, OnInit, NgZone, ChangeDetectorRef} from '@angular/core';
    import { SignalrCore } from 'nativescript-signalr-core/angular';

    @Component({
        selector: 'app-home',
        templateUrl: './home.component.html',
        styleUrls: ['./home.component.scss'],
    })
    export class HomeComponent implements OnInit {
          header: SignalRCoreRHeaders;

        constructor(private zone: NgZone, private cd: ChangeDetectorRef) {
            this.signalrCore = new SignalrCore();
            this.header = new SignalRCoreRHeaders('Authorization', 'myToken');    //(this.header Optional)
            this.signalrCore.on('connected', (data) => {
                 console.log('connected');
            });

        }
        connectToServer() {
            this.signalrCore.start('http://server.com/ChatHub', this.header).then((isConnected: boolean) => {
                console.log('isConnected? ', isConnected);
            });
        }

        invoke() {
            this.signalrCore.invoke('initializeDeviceAsync', '');
        }

        stop() {
            this.signalrCore.close().then((res) => {
                console.log('closed...', res);
            });
        }
    \n

    API

    \n
    .start(url: string, header?: SignalRCoreRHeaders): Promise
    \n
    .on(event: string, data: any) : args
    \n
    .close()
    \n
    .invoke(...args): (data, date)
    \n
    .getStatus$(): observable<{id: number, name: string}>
    \n
    .getStatus(): string<{id: number, name: string}>
    \n
    SignalRCoreRHeaders = { key: string, value: string }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bluetooth":{"name":"nativescript-bluetooth","version":"3.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foaas":{"name":"nativescript-foaas","version":"1.0.5","readme":"

    NativeScript (FOAAS)

    \n

    Nativescript wrapper for FOAAS. You can now FO with Promises!

    \n

    What is Foaas?

    \n

    Methods

    \n\n

    Usage

    \n

    All methods return Promises

    \n
    var foaas = require(\"nativescript-foaas\");
    //Promise return
    /*args: {
        message: \"Cool story, bro.\",
        subtitle: \"- nativescript\",
        combined: \"Cool story, bro. - nativescript\"   
    }
    */

    //Simple
    foaas.coolstorybro(\"nativescript\").then(function(args){
        alert(args.combined);
    });

    //Nested Chain
    foaas.coolstorybro(\"nativescript\").then(function(args){
        //Alert Message
        alert(args.message).then(function(){
            //Call the next once it's closed
            foaas.bye(\"nativescript\").then(function(args){
                alert(args.combined); 
            });        
        });
    });
    \n

    Notes

    \n

    Left out a few of the very offensive ones...

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-google-maps-sdk":{"name":"@codesthings/nativescript-google-maps-sdk","version":"3.2.4","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opencv":{"name":"nativescript-opencv","version":"0.0.6","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bytpher/tslint-ns-angular":{"name":"@bytpher/tslint-ns-angular","version":"1.0.0","license":"MIT","readme":"

    TSLint NativeScript Angular

    \n

    Recommended tslint configuration for NativeScript Angular applications.

    \n

    Requirements

    \n

    This package works with prettier for an quick and easy code format

    \n
    npm i -D prettier prettier-tslint pretty-quick
    \n

    Packages:

    \n\n

    Installation

    \n
    npm i -D @bytpher/tslint-ns-angular
    \n

    Usage

    \n
    {
      \"extends\": [\"@bytpher/tslint-ns-angular\"]
    }
    \n

    Pre-Commit Hook

    \n

    You can use husky to configure a pre-commit hook to run pretty-quick

    \n
    npm i -D husky
    \n

    Create a .huskyrc.json in the root of yor project and add the following configuration

    \n
    {
      \"hooks\": {
        \"pre-commit\": \"pretty-quick --staged\"
      }
    }
    \n

    This configuration will run pretty-quick before each commit and formatting the staged files allowing us a seamless code format between all developers working in the project

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-local-notifications-ios":{"name":"nativescript-local-notifications-ios","version":"1.0.34","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@groupsosimple/nativescript-image-generator":{"name":"@groupsosimple/nativescript-image-generator","version":"1.0.1","license":"Apache-2.0","readme":"

    @groupsosimple/nativescript-image-generator

    \n
    ns plugin add @groupsosimple/nativescript-image-generator
    \n

    This is a direct fork of nativescript-images-generator-hook.\nIt solves the issue that the build crashes when 'platforms' folder doesn't exist on 'tns run' and updates the dependencies.

    \n

    Nativescript hook that generates App_Resources images based on a single high resolution image.

    \n

    Usage

    \n

    Put all your 3x PNG images in App_Resources/images.

    \n

    For instance, if you put navbar_logo@3x.png in this folder, it will be available as res://navbar_logo.\nIf you put an image without scale suffix, it will use it as a x1 image. You can provide any integer scale from 1 to 5.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-core":{"name":"@progress/jsdo-core","version":"6.0.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank":{"name":"tns-template-blank","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-blank-js --template tns-template-blank
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-blank).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-blank-js --template nativescript-app-templates/packages/template-blank
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module:

    \n\n

    There is a single blank page module that sets up an empty layout:

    \n\n

    Home page has the following components:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kde-audioplayer-tk":{"name":"nativescript-kde-audioplayer-tk","version":"1.0.3","license":"LGPL-3.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"symlink-resolver":{"name":"symlink-resolver","version":"0.2.1","license":"MIT","readme":"

    Symlink Resolver

    \n

    This tool allows to replace symbolic links by real files in given directory and revert the changes back to symlinks. All the magic in a simple cli command!

    \n

    Installation

    \n
    npm install symlink-resolver --save-dev
    \n

    Node.js v6.4+ and POSIX-standarized operating system are required.

    \n

    To your package.json scripts section add the following rule:

    \n
    \"scripts\": {
        \"symlink-resolver\": \"symlink-resolver\",
    }
    \n

    Basic Usage

    \n

    For fast usage you can simply run:

    \n\n

    First command will create ./symlinks/path/.symlinks.json file which contains changes that have been made in this directory. It will be removed by the second command, however you can still add to your .gitignore the following rule: .symlinks.json

    \n
    How to create a symlink?
    \n

    Use ln -s target source command, i.e.:

    \n
    ln -s ../../source/path/linked-dir ./project/src/linked-dir
    \n

    Advanced usage

    \n

    If you need this feature to make a build, then I strongly recommend to automatize your building process:

    \n
    \"scripts\": {
            \"symlink-resolver\": \"symlink-resolver\",
            \"prebuild\": \"npm run symlink-resolver build ./symlinks/path\",
            \"postbuild\": \"npm run symlink-resolver clear ./symlinks/path\",
            \"build\": \"your build command should be under this name\"
    }
    \n

    This way you will be able to make a build and edit your files without worries.

    \n

    However, in some cases like emulating a device, the "post" script will not be executed. If this is also your case then take a look at example workaround for NativeScript:

    \n
      \"scripts\": {
        \"symlink-resolver\": \"symlink-resolver\",
        \"prens-bundle\": \"npm run symlink-resolver build ./symlinks/path\",
        \"delay-clear\": \"sleep 22 && npm run symlink-resolver clear ./symlinks/path\",
        \"ns-bundle\": \"npm run delay-clear | ns-bundle\",
        \"start-android-bundle\": \"npm run ns-bundle --android --start-app\",
        \"start-ios-bundle\": \"npm run ns-bundle --ios --start-app\",
        \"build-android-bundle\": \"npm run ns-bundle --android --build-app\",
        \"build-ios-bundle\": \"npm run ns-bundle --ios --build-app\"
      },
    \n

    Advanced configuration

    \n

    You can adjust Config to your needs.

    \n\n
    export interface ConfigInterface {
        rootDir: string;
        symlinksFile: string;
        helperClass: typeof SymlinkHelper;
    }
    \n
    Happy developing!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-screenshot":{"name":"nativescript-screenshot","version":"0.0.2","license":"Apache-2.0","readme":"

    NativeScript Screenshot

    \n

    This is a plugin for iOS and Android that allows you to get NativeScript view as image.

    \n

    Installation

    \n

    tns plugin add nativescript-screenshot

    \n

    Usage

    \n

    \n
    <Page>
       <StackLayout loaded=\"stackLoaded\">
         <Button text=\"Test\" tap=\"buttonTap\" />
       </StackLayout>
    </Page>
    \n
    var image = require(\"ui/image\");
    var plugin = require(\"nativescript-screenshot\");

    var stackLayout;
    exports.stackLoaded = function(args){
      stackLayout = args.object
    }

    exports.buttonTap = function(args){
      var img = new image.Image();
      img.imageSource = plugin.getImage(args.object);
      stackLayout.addChild(img);
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-tabview":{"name":"nativescript-ngx-tabview","version":"1.0.1","license":"MIT","readme":"

    Nativescript-Ngx-TabView

    \n

    A Nativescript Angular UI Control for rendering a tabbed view with multiple\nconfigurable options

    \n

    Setup

    \n

    npm install nativescript-ngx-tabview --save

    \n

    Import the module into your app-module

    \n
    import { TabViewModule } from 'nativescript-ngx-tabview';
    \n

    Getting Started

    \n

    Define the TabView template as shown in the example below

    \n
    <TabView (tabChange)=\"watchTabChange($event)\">
      <TabStrip position=\"left\" overlay justifyContent=\"space-between\">
        <TabLabel>
          <!-- Define the Tab Label here -->
        </TabLabel>
        <TabLabel>
          <!-- Define the Tab Label here -->
        </TabLabel>
        <TabLabel>
          <!-- Define the Tab Label here -->
        </TabLabel>
      </TabStrip>
      <TabGroup>
        <Tab>
          <!-- Insert Tab Content here -->
        </Tab>
        <Tab>
          <!-- Insert Tab Content here -->
        </Tab>
        <Tab>
          <!-- Insert Tab Content here -->
        </Tab>
      </TabGroup>
    </TabView>
    \n

    Configuration

    \n

    The TabStrip allows for two main configuration settings:

    \n\n

    The overlay setting will overlay the tab strip on the Tab View, by default the Tab Strip and\nTab Content would appear in separate rows.

    \n

    The tabChange() event will emit the index on Tab Switch

    \n
    \n

    The TabStrip is a FlexboxLayout so all related styles can be applied

    \n
    \n

    Examples

    \n

    Provided in the demo app

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bugsee":{"name":"nativescript-bugsee","version":"0.1.0","license":"Apache-2.0","readme":"

    Bugsee for NativeScript

    \n

    This plugin adds Bugsee support to your NativeScript application. Record the last 30 seconds of your app before it crashes. Allow people to submit bugs by shaking or screenshotting your app.

    \n

    \"Demo

    \n

    Installation

    \n

    To install the plugin do:

    \n
    tns plugin add nativescript-bugsee
    \n

    Usage

    \n

    iOS

    \n

    Put this is your main application JS file:

    \n
    // Replace this with your actual token
    Bugsee.launchWithToken('0000000-0000-0000-0000-00000000000')
    \n

    Android

    \n

    This is a little trickier as it needs to extend the main Application class.

    \n

    Create this file at app/application.android.js:

    \n

    (Replace yourApplicationName with your app name, and the token with your Android token)

    \n
    /* global android com */
    const superProto = android.app.Application.prototype
    const Bugsee = com.bugsee.library.Bugsee

    // the first parameter of the `extend` call defines the package and the name for the native *.JAVA file generated.
    android.app.Application.extend('org.yourApplicationName.Application', {
      onCreate: function () {
        superProto.onCreate.call(this)
        // At this point modules have already been initialized
        Bugsee.launch(this, '0000000-0000-0000-0000-00000000000')
      },
      attachBaseContext: function (base) {
        superProto.attachBaseContext.call(this, base)
      }
    })
    \n

    In app/App_Resources/Android/src/AndroidManifest change from this:

    \n
    <application android:name=\"com.tns.NativeScriptApplication\"
    \n

    to this - to match the application name above:

    \n
    <application android:name=\"org.yourApplicationName.Application\"
    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appupdater":{"name":"nativescript-appupdater","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@planbook/nativescript-modal-datetimepicker":{"name":"@planbook/nativescript-modal-datetimepicker","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mdc":{"name":"nativescript-mdc","version":"0.5.0","license":"Apache-2.0","readme":"

    nativescript-mdc

    \n

    NativeScript-MDC provides Material Design Components using the official MDC libraries for iOS and Android.

    \n

    Currently only the following components have been implemented:

    \n\n

    Thanks to the following plugins for providing a reference when building this plugin:\nnativescript-bottom-navigation\nnativescript-cardview\nnativescript-floatingactionbutton\nnativescript-material-components

    \n

    (Optional) Prerequisites / Requirements

    \n

    You need NativeScript version ^6.0.0 to be able to use this plugin.

    \n

    Installation

    \n
    tns plugin add nativescript-mdc
    \n

    Usage

    \n

    Usage is per component.\nTo give an overview of how to use the components below is a very minimal example of the Bottom Navigation.

    \n

    XML

    \n

    You can set the tabs using the tabs property

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"nativescript-mdc\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout columns=\"*\" rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigation
                tabs=\"{{ tabs }}\"
                activeColor=\"blue\"
                inactiveColor=\"red\"
                loaded=\"bottomNavigationLoaded\"
                titleVisibility=\"always\"
                row=\"1\">
            </mdc:BottomNavigation>
        </GridLayout>
    </Page>
    \n
    import * as observable from 'tns-core-modules/data/observable';
    import * as pages from 'tns-core-modules/ui/page';
    import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from \"nativescript-mdc\";

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: observable.EventData) {
        // Get the event sender
        let page = <pages.Page>args.object;
        page.bindingContext = {
            tabs: [
                new BottomNavigationTab('First', 'ic_home'),
                new BottomNavigationTab('Second', 'ic_view_list', null, false),
                new BottomNavigationTab('Third', 'ic_menu'),
                new BottomNavigationTab('Forth', 'ic_view_list', 'ic_menu')
            ]
        };
    }

    export function bottomNavigationLoaded(args) {
        let bottomNavigation: BottomNavigation = args.object;
        // For some reason the tabSelected event doesn't work if you
        // handle it from the view, so you need to handle the event in this way.
        bottomNavigation.on('tabSelected', tabSelected);
    }

    export function tabSelected(args: OnTabSelectedEventData) {
        console.log('tab selected ' + args.newIndex);
    }
    \n

    Angular

    \n

    First you need to include the NativeScriptMDCModule in your app.module.ts

    \n
    import { NativeScriptMDCModule} from \"nativescript-mdc/angular\";

    @NgModule({
        imports: [
            NativeScriptMDCModule
        ],
        ...
    })
    \n

    You can declare the BottomNavigationTabs in your html directly

    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
           <Label text=\"content\"></Label>
        </StackLayout>
        <BottomNavigation
            activeColor=\"red\"
            inactiveColor=\"yellow\"
            (tabSelected)=\"onBottomNavigationTabSelected($event)\"
            titleVisibility=\"always\"
            row=\"1\">
            <BottomNavigationTab title=\"First\" icon=\"ic_home\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Second\" icon=\"ic_view_list\" selectable=\"false\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Third\" icon=\"ic_menu\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Forth\" icon=\"ic_view_list\" selectedIcon=\"ic_menu\"></BottomNavigationTab>
        </BottomNavigation>
    </GridLayout>
    \n
    import { Component, OnInit } from '@angular/core';
    import { OnTabSelectedEventData } from 'nativescript-mdc';

    @Component(
      {
        selector: 'ns-app',
        moduleId: module.id,
        templateUrl: './app.component.html',
      }
    )
    export class AppComponent {
      onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
        console.log(`Tab selected:  ${args.newIndex}`);
      }
    }
    \n

    API

    \n

    TODO\nDescribe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rachnerd/test-plugin":{"name":"@rachnerd/test-plugin","version":"0.0.3","license":"MIT","readme":"

    NativeScript tests hook

    \n

    Workaround for running unit tests located in source code (according to Angular style guide)

    \n

    Currently NativeScript runs spec files located in app/tests. This hook copies all source code (in app) to\na .tmp folder inside app/tests, so NativeScript can run unit tests that follow the Angular style guide.

    \n

    Example

    \n
    app
    |-- feature
         |- feature.component.html
         |- feature.component.ts
         |- feature.component.spec.ts
    \n

    Installation

    \n

    Npm

    \n
    npm install nativescript-tests-hook --save-dev
    \n

    Usage

    \n

    Unfortunately the test runner fetches the files before the hook is finished.\nTo get around this you'll have to prepare before executing the test command.

    \n
    tns prepare [platform] && tns test [platform]
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/sdk-jumio-ns":{"name":"@global66/sdk-jumio-ns","version":"0.2.7","license":"Apache-2.0","readme":"

    NativeScript Jumio

    \n

    Jumio Mobile SDK plugin for NativeScript.

    \n

    This plugin is compatible only with NativeScript 7.1+. Please file an issue or make a PR if you spot any problems or you have any further requests regarding the functionality.

    \n

    Currently only ID verification is implemented. Please check Usage or demo/ directory for more details.

    \n

    Prerequisites / Requirements

    \n

    Nativescript 7.1+ is required for the plugin to run properly.

    \n

    Installation

    \n
    tns plugin add @global66/sdk-jumio-ns

    or

    npm install @global66/sdk-jumio-ns
    \n

    Usage

    \n

    @global66/sdk-jumio-ns

    \n

    Make sure to include this activity inside the consumer's Android Manifest:

    \n
    <activity
        android:theme=\"@style/Theme.Netverify\"
        android:hardwareAccelerated=\"true\"
        android:name=\"com.jumio.nv.NetverifyActivity\"
        android:configChanges=\"orientation|screenSize|screenLayout|keyboardHidden\" />
    \n

    Ensure that Kotlin version is set to 1.4.30 inside gradle.properties file

    \n

    kotlinVersion=1.4.30

    \n
    import { Jumio } from '@global66/sdk-jumio-ns';

    try {
        const jumio = new Jumio({
            merchantApiToken: 'YOUR_API_TOKEN',
            merchantApiSecret: 'YOUR_API_SECRET',
            datacenter: 'EU | US | SG',
        });

        jumio.init({
            customerId: 'customerId',
            callbackUrl: 'Custom callback URL',
            preSelectedData: {
                country: 'Alpha2 Country Code',
                documentType: 'passport | identity_card | driver_license | visa',
            },
            cancelWithError: (error) => {
                // User cancelled after error
            },
            finishInitWithError: (error) => {
                // Finished initialization with an error
            },
            finishedScan: (documentData, scanReference) => {
                // Scan is successful
            },
        });
    } catch (err) {
        console.log(\"EXCEPTION\", err)
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeRequiredDefaultDescription
    merchantApiTokenstringyesAPI token
    merchantApiSecretstringyesAPI secret
    datacenterstringyesData Center to use
    customerIdstringyesCustomer ID
    callbackUrlstringNoCustom Callback URL
    preSelectedDataObjectNonullPre-selected country as alpha2 code and document type
    cancelWithErrorfunctCallback triggered when User cancels. It accepts error object with code and message.
    finishInitWithErrorfunctCallback triggered when initialization fails. It accepts error object with code and message.
    finishedScanfunctCallback triggered when scan is finished. It contains an extended Document Data with all necessary information about processing results.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nswitfy/stomp-connector":{"name":"@nswitfy/stomp-connector","version":"8.0.0-beta","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-mason":{"name":"nativescript-ngx-mason","version":"1.0.0","license":"MIT","readme":"

    Welcome to nativescript-ngx-mason 👋

    \n

    \n \"Version\"\n \n \"License:\n \n

    \n
    \n

    NativeScript Angular Layout Engine for scaffolding your mobile App along with a bunch of additional components that serve as building blocks for the UI

    \n
    \n

    ✨ [Demo](Demo included in the Project)

    \n

    Install

    \n
    npm install nativesript-ngx-mason
    \n

    Getting Started

    \n

    Author

    \n

    👤 TheMountHead

    \n\n

    Show your support

    \n

    Give a ⭐️ if this project helped you!

    \n
    \n

    This README was generated with ❤️ by readme-md-generator

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-localytics":{"name":"nativescript-localytics","version":"0.0.4","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-radiobutton":{"name":"@webileapps/nativescript-radiobutton","version":"0.2.7","license":"Apache 2.0","readme":"

    NativeScript-RadioButton

    \n

    This is a fork of other NativeScript plugin for the native radiogroup and radiobutton widget.

    \n

    Changes from the original plugin

    \n\n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android RadioGroupNONE
    Android RadioButtonNONE
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add @webileapps/nativescript-radiobutton

    \n

    Usage

    \n

    Demo App

    \n

    If you want a quickstart, clone the repo, cd src, and execute the following commands:

    \n
    npm install
    npm run demo.android
    \n

    Angular

    \n

    Import to NgModule for use

    \n
    import { RadioButtonModule } from '@webileapps/nativescript-radiobutton/angular'

    @NgModule({
        imports: [
            RadioButtonModule
        ]
    })
    \n

    Place this in your view.

    \n
    <StackLayout>
        <RadioGroup [(value)]=\"dataBoundVariable\">
            <RadioButton text=\"Selection 1\"></RadioButton>
            <RadioButton text=\"Selection 2\"></RadioButton>
            <RadioButton text=\"Selection 3\"></RadioButton>
        </RadioGroup>
    </StackLayout>
    \n

    NativeScript-Vue

    \n

    In your main.js register both RadioGroup and RadioButton elements

    \n
    Vue.registerElement('RadioGroup', () => require('@webileapps/nativescript-radiobutton').RadioGroup)
    Vue.registerElement('RadioButton', () => require('@webileapps/nativescript-radiobutton').RadioButton)
    \n

    And in your template, use it

    \n
    <RadioGroup
      @selected=\"onSelected\">
      <RadioButton
        v-for=\"item in someList\"
        :key=\"item.id\"
        :text=\"item.text\">
      </RadioButton>
    </RadioGroup>
    \n

    Supported Properties

    \n

    RadioButton

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidExample
    enabledenabled="true | false"
    texttext="a string"
    checkedchecked="true | false"
    \n

    RadioGroup

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidReturns
    valuethe index of the radio button selected
    \n

    Supported Events

    \n

    RadioGroup

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidType
    valueEventEmitter
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nsoauth":{"name":"nativescript-nsoauth","version":"0.0.10035","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onfido":{"name":"nativescript-onfido","version":"0.0.5","license":"Apache-2.0","readme":"

    NativeScript

    \n

    Plugin for using Onfido in your NativeScript app, IOS and Android (not started yet).

    \n

    \"FAB\n\"FAB

    \n

    Prerequisites

    \n

    In order to start integration, you will need the API token and the mobile SDK token. You can use our sandbox environment to test your integration, and you will find these two sandbox tokens inside your Onfido Dashboard.

    \n

    Warning: You MUST use the mobile SDK token and not the API token when configuring the SDK itself.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-onfido
    \n

    Usage

    \n

    Angular

    \n

    app.component.html

    \n
    <Onfido [settings]=\"onfidoSettings\"></Onfido>
    \n

    app.component.ts

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('Onfido', () => require('nativescript-onfido').Onfido);

    class AppComponent {
      onfidoSettings: any;

      constructor() {
        this.onfidoSettings = {
          applicantId: \"YOUR_APPLICANT_ID\",
          token: \"YOUR_SDK_TOKEN\",
          enable: true,
          responseHandler: (response: any) => {
            if (response.userCanceled) {  
              // Flow cancelled by the user
            } else if (response.results) {
              // User completed the flow
              // You can create your check here
            } else if (response.error) {
              // Some error happened
            }
          } 
        };
      }
    }
    \n

    JavaScript

    \n

    main-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-onfido\">
      <ui:Onfido settings=\"{{onfidoSettings}}\"></ui:Onfido>
    </Page>
    \n

    main-view-model.ts

    \n
    import { Observable } from 'tns-core-modules/data/observable';

    export class HelloWorldModel extends Observable {
      public onfidoSettings: any;

      constructor() {
        super();

        this.onfidoSettings = {
          applicantId: \"YOUR_APPLICANT_ID\",
          token: \"YOUR_SDK_TOKEN\",
          enable: true,
          responseHandler: (response: any) => {
            if (response.userCanceled) {  
              // Flow cancelled by the user
            } else if (response.results) {
              // User completed the flow
              // You can create your check here
            } else if (response.error) {
              // Some error happened
            }
          } 
        };
      }
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hifox/nativescript-apple-sign-in":{"name":"@hifox/nativescript-apple-sign-in","version":"1.1.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tglib":{"name":"nativescript-tglib","version":"0.2.0","license":"Apache-2.0","readme":"

    Nativescript Tglib \"apple\"

    \n

    Nativescript Library for building Telegram clients

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-tglib
    \n

    Features

    \n\n
    \n

    APIs

    \n

    tglib provide some useful methods that makes your Telegram app development easier.

    \n

    Most API classes/methods can be found in the official TDLib documentation.

    \n

    Authorizing an user

    \n
    const client = new TDJSON({
      apiId: 'YOUR_API_ID',
      apiHash: 'YOUR_API_HASH',
      auth: {
        type: 'user',
        value: 'YOUR_PHONE_NUMBER',
      },
    })
    \n

    Authorizing a bot

    \n
    const client = new TDJSON({
      apiId: 'YOUR_API_ID',
      apiHash: 'YOUR_API_HASH',
      auth: {
        type: 'bot',
        value: 'YOUR_BOT_TOKEN',
      },
    })
    \n

    \"\" Low Level APIs

    \n
    client.ready
    \n

    This promise is used for initializing tglib client and connect with Telegram.

    \n
    await client.ready
    \n
    client.registerCallback(key, callback) -> Void
    \n

    This API is provided by tglib, you can use this API to register your function in order to receive callbacks.

    \n

    The authorization process can be overridden here by registering td:getInput callback.

    \n
    client.registerCallback('td:update', (update) => console.log(update))
    client.registerCallback('td:error', (error) => console.error(error))
    client.registerCallback('td:getInput', async (args) => {
      const result = await getInputFromUser(args)
      return result
    })
    \n
    client.fetch(query) -> Promise -> Object
    \n

    This API is provided by tglib, you can use this API to send asynchronous message to Telegram and receive response.

    \n
    const chats = await client.fetch({
      '@type': 'getChats',
      'offset_order': '9223372036854775807',
      'offset_chat_id': 0,
      'limit': 100,
    })
    \n
    client.send(query) -> Promise -> Object
    \n

    This API is provided by TDLib, you can use this API to send asynchronous message to Telegram.

    \n
    await client.send({
      '@type': 'sendMessage',
      'chat_id': -123456789,
      'input_message_content': {
        '@type': 'inputMessageText',
        'text': {
          '@type': 'formattedText',
          'text': '👻',
        },
      },
    })
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-gps":{"name":"nativescript-background-gps","version":"0.0.2","license":"MIT","readme":"

    Nativescript Background GPS Plugin

    \n

    NOTE

    \n

    This plugin does not currently work in the background. The project is exploratory to create a simple background GPS service, but thus far it is not working.

    \n

    This is a plugin to receive gps location updates regardless of the app state.

    \n

    Getting started

    \n
      \n
    1. tns plugin add nativescript-background-gps
      2. \n
    \n

    Usage

    \n

    import { gps } from 'nativescript-background-gps';

    \n

    gps.on(function (location) { console.log(location); }

    \n

    Changes

    \n

    This project uses source code from nativescript-geolocation under the Apache 2.0 license.\nChanges can be found in the CHANGES.md file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-revenuecat":{"name":"nativescript-revenuecat","version":"0.1.4","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescrpt-snackbar":{"name":"nativescrpt-snackbar","version":"4.1.7","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http-gentle":{"name":"nativescript-http-gentle","version":"3.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio":{"name":"nativescript-twilio","version":"0.14.0","license":"Apache-2.0","readme":"

    NativeScript Twilio

    \n

    nativescript-twilio is a plugin that exposes the Twilio Voice SDK, the leading platform for Voice solutions.

    \n

    Note: For now it only for making outbound calls, both for Android and iOS

    \n

    Prerequisites / Requirements

    \n\n

    Plugin installation on your Nativescript app

    \n
    tns plugin add nativescript-twilio
    \n

    Usage

    \n

    Demo App

    \n

    Setup

    \n\n

    Running the Demo app

    \n\n

    Integrating into your NativeScript app

    \n\n

      import * as application from 'tns-core-modules/application';
      import { initTwilio } from 'nativescript-twilio';
      import { TwilioAppDelegate } from 'nativescript-twilio/delegate';

      // The following endpoint should return the raw token in the request body
      const accessTokenUrl = 'http://yourserver/path/to/access-token';
      const accessTokenHeaders = {'Authorization': 'Token sometoken'};

      initTwilio(accessTokenUrl, accessTokenHeaders);

      if (application.ios) {
        // register twilio app delegate in order to receive incoming calls
        application.ios.delegate = TwilioAppDelegate;
      }
    \n\n
      import { setupCallListener, setupPushListener } from 'nativescript-twilio';

      // listener for inbound/outbound calls
      const callListener = {
        onConnectFailure(call, error) {
          dialogs.alert(`connection failure: ${error}`);
        },
        onConnected (call) {
          dialogs.alert('call connected');
        },
        onDisconnected (call) {
          dialogs.alert('disconnected');
        }
      };

      setupCallListener(callListener);

      // listener for push notifications (incoming calls)
      const pushListener = {
        onPushRegistered(accessToken, deviceToken) {
          dialogs.alert('push registration succeded');
        },
        onPushRegisterFailure (error) {
          dialogs.alert(`push registration failed: ${error}`);
        }
      };

      setupPushListener(pushListener);
    \n\n

      import * as dialogs from 'tns-core-modules/ui/dialogs';
      import { getAccessToken, Twilio } from 'nativescript-twilio';

      const phoneNumber = '+1555365432';

      getAccessToken() // it will use the Twilio configuration set before
        .then((token) => {
          const twilio = new Twilio(token);

          const call = twilio.makeCall(phoneNumber);

          // example of muting the call after 10 seconds
          setTimeout(() => {
            console.log('Muting call after 10 seconds...');
            call.mute(true);
          }, 10000);

          // example of disconnecting the call after 30 seconds
          setTimeout(() => {
            console.log('Disconnecting call after 30 seconds...');
            call.disconnect();
          }, 30000);

        })
    \n

    API

    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    initTwilio(url: string, headers?: any)Initialize Twilio passing the endpoint to the access token backend
    getAccessToken(): Promise<string>Ask the backend for an access token. Returns a Promise with the token retrieved
    setupCallListener(listener: any)Setup the call listener, passing an object with onConnectFailure, onConnected and onDisconnected callbacks
    setupPushListener(listener: any)Setup the push notifications listener, passing an object with onPushRegistered and onPushRegisterFailure callbacks
    unregisterPushNotifications(token: string, deviceToken: string, callback?: (error: any) => void)Unregister push notifications (incoming calls)
    \n

    Twilio Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    makeCall(senderPhoneNumber: any, phoneNumber: any, options?: any): CallMake an outbound call.
    toggleAudioOutput(toSpeaker: boolean)iOS Only Set the audio session output to the speaker or not.
    \n

    Call Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    mute(value: boolean)Mute the call.
    disconnect()Hang-up the call.
    \n

    License

    \n

    Apache License Version 2.0, April 2018

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-transcoder":{"name":"nativescript-transcoder","version":"0.1.0-alpha.1","license":"Apache-2.0","readme":"

    nativescript-transcoder

    \n

    WARNING, WORK IN PROGRESS, v1.0 excepted end of March

    \n

    This plugins for nativescript brings video transcoding support.

    \n\n

    The plugins support observing events as well as promises.

    \n

    Only AAC audio is supported right now on Android, simulator camera is using 3GPP audio, so you can not test it with the simulator

    \n

    For hardware mode, only 720p resolution is supported on android, other resolutions may not work on some devices, a way to select the best profile may be developed\n(Note for above for future developments on this plugin: CamcorderProfile is the way to go to retrieve all possible encoding resolutions, then we just need to select the best one according to settings).

    \n

    Installation

    \n
    tns plugin add nativescript-transcoder
    \n

    Usage

    \n

    JavaScript

    \n
    const {
      Transcoder,
      TranscoderVideoCodec,
      TranscoderEventList,
    } = require('nativescript-transcoder');

    const transcoder = new Transcoder(inputFilePath, {
      videoBitrate: 1000 * 1000, // 1mbps
      resolutionConstraint: 720,
      videoCodec: TranscoderVideoCodec.H264,
    });

    transcoder.transcode().then(({ filePath }) => {
      console.log(`Output file path: ${filePath}`);
    }).catch((err) => {
      console.log(`Error: ${err.type} - ${err.message}`);
    });

    transcoder.on(TranscoderEventList.Progress, (progress) => {
      console.log(`Progress: ${progress}`);
    })
    \n

    TypeScript

    \n
    import {
      Transcoder,
      TranscoderVideoCodec,
    } from 'nativescript-transcoder';

    const transcoder = new Transcoder(inputFilePath, {
      videoBitrate: 1000 * 1000, // 1mbps
      resolutionConstraint: 720,
      videoCodec: TranscoderVideoCodec.H264,
    });

    transcoder.transcode().then(({ filePath }) => {
      console.log(`Output file path: ${filePath}`);
    }).catch((err: TranscoderException) => {
      console.log(`Error: ${err.type} - ${err.message}`);
    });

    transcoder.on(TranscoderEventList.Progress, (progress: number) => {
      console.log(`Progress: ${progress}`);
    })
    \n

    API

    \n

    Transcoder

    \n

    The main class you need to use, a transcoder can only be used for one transcoding.

    \n

    Constructor

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    constructor(filePath: string, options?: TranscoderOptions)TranscoderInitialize a transcoder, filePath is mandatory (input video).
    transcode()Promise<TranscoderResult>Launch the transcoding
    cancel()voidForce cancel of the thread running the task
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    @ObservableProperty progress: numbernullProgress of the transcoding, null if not applicable
    @ObservableProperty statusTranscoderStatus.IdleStatus of the transcoding process
    @readonly filePath: stringN/AFilePath of file which will be transcoded.
    @get/@set audioBitrate: numberfrom optionsset/get audio bitrate
    @get/@set videoBitrate: numberfrom optionsset/get video bitrate
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameCallbackDescription
    TranscoderEventList.Completed or completed(result: TranscoderResult) => voidEmitted when the transcoding is done. You can access the output path from result.filePath.
    TranscoderEventList.Canceled or canceled() => voidThe user has canceled the transcoding
    TranscoderEventList.Progress or progress(progress: number) => voidCalled each time the progress change.
    TranscoderEventList.Failed or failed(err: TranscoderException) => voidAn error occured while transcoding or attempting to transcode. See TranscoderException to see how to handle exceptions
    \n

    TranscoderOptions

    \n

    Construct an object to pass as options to new Transcoder(filePath, options).

    \n

    All options are optionals.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    videoBitrate: numbernullAdjust video bitrate
    Default to null.
    When null, try to use the same bitrate as input, but bitrate information can not always be retrieved on h264 on Android, as a result if encoding is necessary, bitrate will default to 1mbps (1000000).
    audioBitrate: numbernullAdjust audio bitrate (in bps), default to null (keep bitrate)
    videoCodec: TranscoderVideoCodecTranscoderVideoCodec.AutoDefine the video codec to use. Be careful, all device does not support all codecs, use TranscoderVideoCodec.Auto if not sure.
    audioCodec: TranscoderAudioCodecTranscoderVideoCodec.AacDefine the audio codec to use. Only AAC supported for now.
    nativeTranscoder: TranscoderNativeTranscoderTranscoderNativeTranscoder.HardwareDefine which native transcoder to use. Hardware is faster and better but FFMPEG is not dependant of what the device can or can not do. The hardware transcoder can always handle video taken by the device camera. Prefered choice is Hardware, but choose FFMPEG if video comes from unknown sources
    resolutionConstraint: numbernullDefine the output resolution of the video. Positive number represent a constraint on the smaller side of the video. Negative number represent a constraint on the larger side of the video. Important: the video will never be scalled up ! (null to keep the original format). Ex:
    - input: 1920x1080, resolutionConstraint: 720, output: 1280x720
    - input: 1920x1080, resolutionConstraint: -720, output: 720x405
    strictResolutionConstraint: booleanfalseIf this is true, the transcoder will through an error if the video can not be scaled according to the defined resolutionConstraint. Otherwise, it will use the nearest possible resolution. (ex: 480p can not be achieve with 3140x2160, if true then an exception will be thrown, if false then output resolution will be 848x477).
    \n

    TranscoderException

    \n

    Exemple

    \n
    transcoder.on(TranscoderEventList.Failed, (err: TranscoderException) => {
      switch (err.type) {
        case TranscoderExceptionType.InvalidOutputFormat:
          console.log('The device doesn\\'t support the asked output')
          break;
        default: // TranscoderExceptionType.Failed:
          console.log('Unable to trasncode')
          break;
      }
    })
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Property/methodDefaultDescription
    type: TranscoderExceptionTypenullType of transcoding error (see TranscoderExceptionType)
    nativeError: anyundefinedMay be the raw error rejected by the native transcoder.
    constructor(type: TranscoderExceptionType, message: string, nativeError?: any): TranscoderExceptionN/AInitialize a TranscoderException, prefered way is to inherit from that.
    \n

    TranscoderExceptionType

    \n

    An enum containing all possible types

    \n

    Prefered way is to use TranscoderExceptionType.Canceled instead of it's value ('CANCELED').

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValueDescription
    Canceled'CANCELED'User canceled exception
    Failed'FAILED'Generic failure error
    InvalidInputFormat'INVALID_INPUT'Generic error when Input can not be transcoded.
    InvalidOutputResolution'INVALID_INPUT'Happens when output resolution is not correct (like floating number).
    InvalidOutputVideoCodec'INVALID_OUTPUT_VIDEO_CODEC'Happens when no video codec correspond on the device.
    InvalidOutputFormat'INVALID_OUTPUT_FORMAT'Happens when at the end, the device is not capable to hardware transcode a given format
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio-custom":{"name":"nativescript-cardio-custom","version":"1.0.3","license":"MIT","readme":"

    nativescript-cardio-custom

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iot":{"name":"nativescript-iot","version":"0.1.4","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hyvapetteri/audio-dsp-tools":{"name":"@hyvapetteri/audio-dsp-tools","version":"1.0.4","license":"Apache-2.0","readme":"

    @hyvapetteri/audio-dsp-tools

    \n
    ns plugin add @hyvapetteri/audio-dsp-tools
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-whatsapp-template":{"name":"nativescript-whatsapp-template","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript WhatsApp Template \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Dependencies\"\n\"DevDependencies\"\n\"Twitter

    \n

    Installation

    \n

    From the command prompt, start a new Nativescript project doing:

    \n
    tns create your-project-name --template nativescript-whatsapp-template
    \n

    Introduction

    \n

    \"N|Solid\"

    \n

    This project is heavily based on this repo, created as part of the course:

    \n\n

    At the moment, only available in Portuguese, but English version is coming soon.\nReach out to us on Twitter \"Twitter if you want to push us to get it done sooner :)

    \n

    First run

    \n

    Right after creating a project and then npm install, it should be ready to go. Just move into your project's folder and execute the normal tns command to run any app:

    \n
    cd your-project-name
    npm i
    tns run
    \n

    Alternatively you can target any specifc platform:

    \n
    tns run android
    \n
    tns run ios
    \n

    That's pretty much what you should expect to see for the initial screen:

    \n

    - Screenshot 1: Chats tab (iOS / Android)

    \n

    \"N|Solid\"

    \n

    And that's the chat screen upon clicking on any chat item in the previous screen:

    \n

    - Screenshot 2: Chat screen (iOS / Android)

    \n

    \"N|Solid\"

    \n

    Removing initial data

    \n

    You might want to remove all the dummy data as well as some boilerplate code. The content shown relies upon the service core/chats.services.ts inside your app folder. Just replace the content returned there with what you need.

    \n

    Emptying chats.services.ts

    \n
    import { Injectable } from '@angular/core';

    import { Chat } from './models/chat.model';
    import { Message } from './models/message.model';

    @Injectable()
    export class ChatsService {
      get chats(): Chat[] {
        return [];
      }
      getMessages(chat: Chat): Message[] {
        return [];
      }
    }
    \n

    Another advisable tweak is removing the line which slices the list of messages in the selected chat to get only a chunck of initial 50 ones. The reason for that is just to illustrate that not all messages should appear on landing on that screen, but we wouldn't like to sound too opinionated at this point telling you how to fetch and show your own data.

    \n

    Replace the slice command on messages-area.component.ts

    \n
    export class MessagesAreaComponent implements OnInit {
      // ...
      ngOnInit() {
    -    this.messages = this.messages.slice(0, 50);
    +    // your own code
      }
      // ...
    }
    \n

    Changelog

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-healthkit":{"name":"@webileapps/nativescript-healthkit","version":"0.0.4","license":"Apache-2.0","readme":"

    nativescript-healthkit

    \n

    A NativeScript plugin to fetch data from iOS Healthkit.

    \n

    Installation

    \n
    tns plugin add @webileapps/nativescript-healthkit
    \n

    Entitlements

    \n

    Add the following file to your app/App_Resources/iOS/app.entitlements folder

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>com.apple.developer.healthkit</key>
    \t<true/>
    \t<key>com.apple.developer.healthkit.access</key>
    \t<array>
    \t\t<string>health-records</string>
    \t</array>
    </dict>
    </plist>
    \n

    Usage Strings.

    \n

    The following plist keys are injected by the plugin. Create or add to app/App_Resources/iOS/Info.plist to override these.

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>NSHealthClinicalHealthRecordsShareUsageDescription</key>
    \t<string>We need your clinical health data to aggregate your health stats over time.</string>
    \t<key>NSHealthShareUsageDescription</key>
    \t<string>We need your health data to aggregate your health stats over time.</string>
    </dict>
    </plist>
    \n

    Usage

    \n

    Find out if HealthKit is enabled on the device.

    \n
    import { isHealthDataAvailable } from \"@webileapps/nativescript-healthkit\"

    console.log(\"Is health data available\", isHealthDataAvailable());
    \n

    Get healthdata since a previous date. Say, for the past 60 days.

    \n
    import { getHealthDataSince } from \"@webileapps/nativescript-healthkit\";

    const date = new Date();
    date.setDate(date.getDate() - 60);
    try {
        const data = await getHealthDataSince(date);
        console.log(data.active_minutes, data.calories_expended, data.distance, data.heart_rate, data.step_count);
    } catch (error) {
        console.error(error);
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-botjet":{"name":"nativescript-plugin-botjet","version":"0.1.4","license":"Apache-2.0","readme":"

    nativescript-plugin-botjet

    \n

    Unofficial plugin to integrate BotJet.ai Webbased native sdks into your nativescript projects.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-plugin-botjet
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    import { BotJetSDK, BotJetConfig } from \"nativescript-plugin-botjet\";

    const config : BotJetConfig =  { 
        clientId : \"<--your client id-->\",
        botId : \"<!-- your bot id -->\",
        title : \"My Chat Bot\",
        accentColor : \"#323b8c\",
        senderId : '<!-- logged in user specific keys-->'
    }

    BotJetSDK.launchChatWithConfig(config);
    \n

    Change Log

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-ng":{"name":"tns-template-blank-ng","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript with Angular Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-blank-ng --template tns-template-blank-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-blank-ng).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-blank-ng --template nativescript-app-templates/packages/template-blank-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application component:

    \n\n

    There is a single blank component that sets up an empty layout:

    \n\n

    Home page has the following components:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rotate-3d":{"name":"nativescript-rotate-3d","version":"0.8.0","license":"Apache-2.0","readme":"

    NativeScript Rotate3D

    \n

    This is a nativescript plugin to add 3d rotaion (i.e around X, Y and Z).

    \n\n

    Installation

    \n
    tns plugin add nativescript-rotate-3d
    \n

    Example

    \n
    <Rotate3D rotate=\"40\" axis=\"Y\" cameraDistance=\"2000\">
         /* Whatever you want */
    </Rotate3D>
    \n

    Usage

    \n

    Since we're subclassing StackLayout, you can add <Rotate3D> to your view at any place where you'd otherwise use a StackLayout.

    \n

    In addition to any properties you can already set on a StackLayout you should add:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptiondefault
    rotateAxisthe axis whic the view will rotate around (X, Y, Z)Z
    cameraDistancethe distance between the view and view camera2000
    \n

    Next

    \n\n

    Contribute

    \n

    if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n

    Contact

    \n

    Twitter: hamdiwanis
    \nEmail: hamdiwanis@hotmail.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jumio":{"name":"nativescript-jumio","version":"1.1.11","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-hello-world":{"name":"tns-template-hello-world","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript JavaScript Template

    \n

    This template creates a "Hello, world" NativeScript app using JavaScript.

    \n

    This is the default template, so you can create a new app that uses it with the --template option:

    \n
    tns create my-hello-world-js --template tns-template-hello-world
    \n

    Or without it:

    \n
    tns create my-hello-world-js
    \n
    \n

    Note: Both commands will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-hello-world).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-hello-world-js --template nativescript-app-templates/packages/template-hello-world
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radial-gradient":{"name":"nativescript-radial-gradient","version":"0.8.0","license":"MIT","readme":"

    NativeScript Radial Gradient 🎨

    \n
    \n

    Note: This Plugin based on EddyVerbruggen linear gradient plugin.

    \n
    \n\n

    Installation

    \n
    tns plugin add nativescript-radial-gradient
    \n

    Example

    \n
    <Gradientcolors=\"#FF0077, red, #FF00FF\" radius=\"20\" center=\"{x: 0: y: 0}\">
      <Label class=\"p-20 c-white\" horizontalAlignment=\"center\" text=\"My gradients are the best.\" textWrap=\"true\"></Label>
      <Label class=\"p-10 c-white\" horizontalAlignment=\"center\" text=\"It's true.\" textWrap=\"true\"></Label>
    </Gradient>
    \n

    Usage

    \n

    Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

    \n

    In addition to any properties you can already set on a StackLayout you should add:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescription
    colorsPass a minimum number of two. Just use the value that you would otherwise pass to NativeScript's new Color("value"). So red, #FF0000, rgb(255, 0, 0), and even rgba(255, 0, 0, 0.5) (transparency!) will all work.
    radiusthe radius the radial gradient
    centerthe center point the radial gradient {x: number,y: number}
    \n

    Angular

    \n

    Add this to app.module.ts so you can use a Gradient tag in the view:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"Gradient\", () => require(\"nativescript-radial-gradient\").Gradient);
    \n

    How many colors can we pass to the plugin?

    \n

    Knock yourself out, but the minimum is two.

    \n

    Next

    \n\n

    Contribute

    \n

    if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n

    Contact

    \n

    Twitter: hamdiwanis
    \nEmail: hamdiwanis@hotmail.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uuid":{"name":"nativescript-uuid","version":"0.0.1","license":"Apache-2.0","readme":"

    NativeScript UUID

    \n

    This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

    \n

    Inspired from [StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?] (http://stackoverflow.com/questions/21878560/how-to-preserve-identifierforvendor-in-ios-after-uninstalling-ios-app-on-device).

    \n

    Uses SSKeychain Cocoa Pod.

    \n

    Installation

    \n

    tns plugin add nativescript-uuid

    \n

    Usage

    \n
    var plugin = require(\"nativescript-uuid\");
    var uuid = plugin.getUUID();
    console.log(\"The device UUID is \" + uuid);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-info":{"name":"nativescript-wifi-info","version":"0.0.5","license":"Apache-2.0","readme":"

    NativeScript Wifi Info Plugin \"apple\" \"android\"

    \n

    A plugin for retrieving device's wifi information details.

    \n

    Prerequisites / Requirements

    \n

    iOS

    \n

    Make sure that your app has Access WiFi Information capability.

    \n

    XCode > Open app > Capabilities > Access Wifi Information (ON)

    \n

    Installation

    \n
    tns plugin add nativescript-wifi-info
    \n

    Usage

    \n

    The wifi info plugin exposes a simple WifiInfo() class with several instance methods. To get the device's current Wifi SSID, instantiate an instance of WifiInfo and call its getSSID() method.

    \n

    Angular

    \n
    import {Component, OnInit} from '@angular/core';
    import {WifiInfo} from 'nativescript-wifi-info';

    @Component({
        selector: 'Home',
        moduleId: module.id,
        templateUrl: './home.component.html'
    })
    export class HomeComponent implements OnInit {

        ssid: string;
        nativeSsid: string;

        private wifiInfo: WifiInfo;

        constructor() {
            this.wifiInfo = new WifiInfo();
        }

        ngOnInit(): void {
            this.ssid = this.wifiInfo.getSSID();
            this.nativeSsid = this.wifiInfo.getNativeSSID();
        }
    }
    \n

    TypeScript

    \n
    import { WifiInfo } from 'nativescript-wifi-info';

    const wifiInfo = new WifiInfo();
    const ssid = wifiInfo.getSSID();
    const nativeSsid = wifiInfo.getNativeSSID();

    console.log('Wifi SSID', ssid);
    console.log('Wifi SSID (native)', nativeSsid);
    \n

    The plugin is currently set up to use:

    \n\n

    Additional Examples

    \n

    Scan Wifi Network and show available Wifi SSID list (Android only)

    \n

    In angular app there is a simple implementation of scanning wifi network and populating wifi ssid list.

    \n

    Known Issues

    \n

    Getting Wifi SSID is not working on iOS simulator (returns No WiFi Available). On Android it should detect a default demo Wifi Network AndroidWifi.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sonos":{"name":"nativescript-sonos","version":"0.5.1","license":"MIT","readme":"

    NativeScript Sonos Plugin (WIP)

    \n

    This plugin provides an interface for controlling a Sonos system on a local network from a NativeScript app. It is influenced heavily by the NodeJS Sonos library created by Ben Evans.

    \n

    This is an incomplete, work-in-process plugin. Use accordingly.

    \n

    Run the demo

    \n

    After cloning this repo, navigate to the repo folder in your terminal and run this command:

    \n
    $ npm run demo.ios
    \n

    This will build the lastest version of the plugin, add it to the demo project and launch the demo in the emulator.

    \n

    NOTE: The demo has only been tested for iOS, but the plugin should work on both iOS and Android.

    \n

    How to use this plugin?

    \n

    Add the plugin to a NativeScript application from the terminal:

    \n
    $ tns plugin add nativescript-sonos
    \n

    In your app, initialize the plugin with a valid Sonos IP address:

    \n
    import { Sonos } from \"nativescript-sonos\"

    let sonos = new Sonos(\"10.0.1.188\"); //Replace with your Sonos IP address
    \n

    You can now call methods to control a Sonos player. Unlike the original NodeJS library, this plugin uses Promises for all async methods. For example, to Play:

    \n
    this.sonos.play()
      .then(() => {
        // Command to play completed successfully
      })
      .catch((err) => {
        // Something went wrong; handle the error state
      });
    \n

    Supported operations

    \n

    This plugin does not yet support all of the methods from the original NodeJS library. Currently implemented methods are:

    \n\n

    Sonos device discovery APIs

    \n

    This plugin does not yet support the Discovery APIs (allowing you to automatially locate Sonos devices on the network) due to the lack of support in NativeScript for UDP socket connections.

    \n

    When UDP socket connections become possible, Discovery APIs should be possible in NativeScript.

    \n

    Contributions welcome. 😀

    \n

    What's next?

    \n

    Additional Sonos APIs from the NodeJS library will be exposed in this plugin. If there is an API you need that is not yet exposed, open an Issue and we'll try to prioritize it.

    \n

    Contributions and constructive feedback welcome.

    \n

    License

    \n

    MIT. Use it, transform it, whatever.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-view-private":{"name":"nativescript-pdf-view-private","version":"0.0.3","license":"MIT","readme":"

    NativeScript PDFView

    \n

    A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

    \n

    This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

    \n

    My aim is to keep the features consistent across iOS and Android.

    \n

    Installation

    \n
    tns plugin add nativescript-pdf-view
    \n

    Usage

    \n

    Vanilla NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pdf=\"nativescript-pdf-view\"
      loaded=\"pageLoaded\">
      <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
    </Page>
    \n

    Angular NativeScript

    \n
    import { PDFView } from 'nativescript-pdf-view';
    import { registerElement } from 'nativescript-angular';
    registerElement('PDFView', () => PDFView);
    \n
    <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
    \n

    Demo

    \n

    Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bradmartin/nativescript-input-mask":{"name":"@bradmartin/nativescript-input-mask","version":"0.1.2","license":"Apache-2.0","readme":"

    Nativescript Input Mask

    \n

    Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

    \n

    This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

    \n

    Installation

    \n
    tns plugin add nativescript-input-mask
    \n

    Usage

    \n

    Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

    \n

    Documentation for masks is below (from here).

    \n
    \n

    Masks consist of blocks of symbols, which may include:

    \n\n

    Square brackets block may contain any number of special symbols:

    \n
      \n
    1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
      2. \n
    2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
      3. \n
    3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
      4. \n
    4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
      5. \n
    5. _ — mandatory symbol (digit or letter).
      6. \n
    6. - — optional symbol (digit or letter).
      7. \n
    \n

    Other symbols inside square brackets will cause a mask initialization error.

    \n

    Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

    \n

    Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

    \n

    Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

    \n\n

    Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

    \n

    Mask format examples:

    \n
      \n
    1. [00000000000]
      2. \n
    2. {401}-[000]-[00]-[00]
      3. \n
    3. [000999999]
      4. \n
    4. {818}-[000]-[00]-[00]
      5. \n
    5. [A][-----------------------------------------------------]
      6. \n
    6. [A][_______________________________________________________________]
      7. \n
    7. 8 [0000000000]
      8. \n
    8. 8([000])[000]-[00]-[00]
      9. \n
    9. [0000]{-}[00]
      10. \n
    10. +1 ([000]) [000] [00] [00]
      11. \n
    \n
    \n

    Angular

    \n

    Add the following lines to app/app.module.ts:

    \n
    import { InputMaskModule } from 'nativescript-input-mask/angular';

    @NgModule({
        // ...
        imports: [
            // ...
            InputMaskModule,
            // ...
        ],
        // ...
    })
    \n

    Use like a TextField with a mask property and other event properties:

    \n
    import { Component, NgZone, OnInit } from \"@angular/core\";

    @Component({
      selector: \"ns-app\",
      template: `
        <StackLayout>
            <InputMask
                mask=\"([000]) [000]-[0000]\"
                (extractedValueChange)=onExtractedValueChange($event)
                (completedChange)=\"onCompletedChage($event)\">
            </InputMask>
        </StackLayout>
          `    ,
    })
    export class AppComponent {
        onExtractedValueChange(args) {
            // `args.value` includes only extracted characters, for instance
            // `1235551111` would be logged while the UI would display `(123) 555-1111`.
            console.log('Extracted value:', args.value);
        }

        onCompletedChange(args) {
            // `args.value` indicates whether the field contains all mandatory characters.
            console.log('Completed:', args.value)
        }
    }
    \n

    Note that masks can be bound and changed on the fly. See demo app for a working implementation.

    \n

    API

    \n

    The InputMask class extends TextField and implements the following additional properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    mask""The mask property to apply to text entered into the field.
    extractedValue""The value extracted from the field.
    completedfalseIndicates whether all mandatory characters have been filled.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-virtual-joystick":{"name":"nativescript-virtual-joystick","version":"0.1.5","license":"MIT","readme":"

    NativeScript-Virtual-Joystick

    \n

    NativeScript plugin for Virtual Joystick UI component.

    \n

    \"screenshot\"

    \n

    Installation

    \n
    tns plugin add nativescript-virtual-joystick
    \n

    Usage

    \n
    <Page class=\"page\"
    \tnavigatingTo=\"onNavigatingTo\"
    \txmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \txmlns:jv=\"nativescript-virtual-joystick\">
    \t<ActionBar class=\"action-bar\">
    \t\t<Label class=\"action-bar-title\" text=\"Virtual Joystick\"></Label>
    \t</ActionBar>

    \t<StackLayout>
    \t\t<Label text=\"{{ 'Angle: ' + angle }}\" />
    \t\t<Label text=\"{{ 'Strength: ' + strength }}\" />

    \t\t<Label text=\"{{ 'Left Horizontal: ' + lx }}\" />
    \t\t<Label text=\"{{ 'Left Vertical: ' + ly }}\" />

    \t\t<Label text=\"{{ 'Right Horizontal: ' + rx }}\" />
    \t\t<Label text=\"{{ 'Right Vertical: ' + ry }}\" />

    \t\t<StackLayout orientation=\"horizontal\">
    \t\t\t<jv:VirtualJoystick
    \t\t\t\tmove=\"onMove\"
    \t\t\t\tangle=\"{{ angle }}\"
    \t\t\t\tstrength=\"{{ strength }}\"
    \t\t\t\txAxis=\"{{ lx }}\"
    \t\t\t\tyAxis=\"{{ ly }}\"
    \t\t\t\tjvColor=\"#AA0000\"
    \t\t\t\tjvBackgroundColor=\"#0000AA\"
    \t\t\t\tjvBorderColor=\"#00AA00\"
    \t\t\t\twidth=\"50%\" />

    \t\t\t<jv:VirtualJoystick
    \t\t\t\tangle=\"{{ angle }}\"
    \t\t\t\tstrength=\"{{ strength }}\"
    \t\t\t\txAxis=\"{{ rx }}\"
    \t\t\t\tyAxis=\"{{ ry }}\"
    \t\t\t\tjvColor=\"#330000\"
    \t\t\t\tjvBackgroundColor=\"#000033\"
    \t\t\t\tjvBorderColor=\"#003300\"
    \t\t\t\tbuttonStickToBorder=\"true\"
    \t\t\t\twidth=\"50%\" />
    \t\t</StackLayout>
    \t</StackLayout>
    </Page>
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyCssTypeDefaultDescription
    angle-number-1Read only. The angle of the button. Counter-clockwise, 0 is right.
    strength-number0Read only. The distance from center in the range 0 - 100.
    xAxis-number0Read only. The distance from center on horizontal axis in the range of -1 (left) to 1 (right).
    yAxis-number0Read only. The distance from center on vertical axis in the range of -1 (down) to 1 (up).
    jvColorjv-colorColor#000000The color of the button. If image is provided this property is ignored.
    jvImagejv-imagestringundefinedThe image to use as button.
    jvBackgroundColorjv-background-colorColortransparentThe color of range circle.
    jvBorderColorjv-border-colorColortransparentThe color of range circle border.
    jvBorderWidthjv-border-widthnumber3The thickness of the range circle border.
    buttonAutoRecenter-booleantrue-
    buttonStickToBorder-booleanfalseIf set to true, button only has 2 states: centered (strength 0) or pushed (strength 100).
    buttonDirection-number0Restrict button movement. 0 means all directions, positive number restricts movement to vertical axis, negative number -- horizontal axis.
    buttonSizeRatio-number0.25Button size ratio relative to widget size.
    backgroundSizeRatio-number0.75Range circle size ratio relative to widget size.
    fixedCenter-booleantrueWhether button center (strength 0) is fixed to widget center or relative to touchdown point.
    enabled-booleantrueWhether widget accepts taps and emits events.
    \n

    Credits

    \n

    NativeScript-Virtual-Joystick uses Virtual Joystick Android library for Android native view.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/template-blank":{"name":"@nativescript-vue/template-blank","version":"3.0.0-beta.10","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-icam":{"name":"nativescript-icam","version":"2.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-google-signin":{"name":"@webileapps/nativescript-google-signin","version":"0.1.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@owen-it/nativescript-uuid":{"name":"@owen-it/nativescript-uuid","version":"0.0.4","license":"Apache-2.0","readme":"

    NativeScript UUID

    \n

    This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

    \n

    Inspired from StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?.

    \n

    Uses SAMKeychain Cocoa Pod.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @owen-it/nativescript-uuid
    \n

    Usage

    \n

    JavaScript

    \n
      const nsUuid = require(\"nativescript-uuid\");

      const uuid = nsUuid.getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n

    TypeScript

    \n
      import {getUUID} from 'nativescript-uuid';

      const uuid = getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-card-reader":{"name":"nativescript-nfc-card-reader","version":"0.0.6","license":"Apache-2.0","readme":"

    nativescript-nfc-card-reader

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n
    tns plugin add nativescript-nfc-card-reader
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jwplayer":{"name":"nativescript-jwplayer","version":"0.0.2","license":"MIT","readme":"

    NativeScript JW Player

    \n

    This plugin is provides an interface to use native jwplayer android/ios sdks in nativescript.

    \n

    Register at jwplayer.com and get JWPlayer License Key for android and ios.

    \n

    For Android Set it in AndroidManifest.xml's application meta-data file:

    \n
    \t<application
    \t\tandroid:name=\"com.tns.NativeScriptApplication\"
    \t\tandroid:allowBackup=\"true\"
    \t\tandroid:icon=\"@drawable/icon\"
    \t\tandroid:label=\"@string/app_name\"
    \t\tandroid:theme=\"@style/AppTheme\">

    \t\t<activity
    \t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
    \t\t\tandroid:label=\"@string/title_activity_kimera\"
    \t\t\tandroid:configChanges=\"keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode\"
    \t\t\tandroid:screenOrientation=\"portrait\"
    \t\t\tandroid:theme=\"@style/LaunchScreenTheme\">

    \t\t\t<meta-data android:name=\"SET_THEME_ON_LAUNCH\" android:resource=\"@style/AppTheme\" />

    \t\t\t<intent-filter>
    \t\t\t\t<action android:name=\"android.intent.action.MAIN\" />
    \t\t\t\t<category android:name=\"android.intent.category.LAUNCHER\" />
    \t\t\t</intent-filter>
    \t\t</activity>
    \t\t<activity android:name=\"com.tns.ErrorReportActivity\"/>

            <!--TODO Set your license key-->
            <meta-data
                android:name=\"JW_LICENSE_KEY\"
                android:value=\"YOUR_JW_LICENSE_KEY\" />

            <meta-data
                android:name=\"com.google.android.gms.version\"
                android:value=\"@integer/google_play_services_version\" />
    \t</application>
    \n

    For iOS set JW_LICENSE_KEY

    \n
    <key>JWPlayerKey</key>
    \t<string>YOUR_JW_LICENSE_KEY</string>
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-jwplayer
    \n

    Usage

    \n

    Typescript/Javascript with XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:jw=\"nativescript-jwplayer\">
       <GridLayout>
        <jw:JWPlayer src=\"{{src}}\" videoPlayerEventsOnPlayEvent=\"{{VideoPlayerEventsOnPlayEvent}}\"
            videoPlayerEventsOnPauseEvent=\"{{VideoPlayerEventsOnPauseEvent}}\">    </jw:JWPlayer>
    </GridLayout>
    </Page>
    \n

    Angular

    \n

    in app.module.ts

    \n
    import { registerElement } from \"@nativescript/angular\";
    registerElement(\"JWPlayer\", () => require(\"nativescript-jwplayer\").JWPlayer);
    \n
    <GridLayout>
      <JWPlayer
        [src]=\"src\"
        (videoPlayerEventsOnPlayEvent)=\"VideoPlayerEventsOnPlayEvent($event)\"
        (videoPlayerEventsOnPauseEvent)=\"VideoPlayerEventsOnPauseEvent($event)\"
      >    </JWPlayer>
    </GridLayout>
    \n\n

    Plugin API

    \n

    You can pass src property for video link and other details:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    urlVideo url to be played
    titleTitle of the video
    descriptionDescription of the video
    \n

    wrap these properties in an object and pass it to the src.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@squirrel-social/contacts":{"name":"@squirrel-social/contacts","version":"1.1.1","license":"Apache-2.0","readme":"

    @squirrel-social/contacts

    \n
    ns plugin add @squirrel-social/contacts
    \n

    Usage

    \n

    Based on https://github.com/abhayastudios/nativescript-contacts-lite

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-quickblox":{"name":"nativescript-quickblox","version":"2.9.2-beta","license":"(Apache-2.0)","readme":"

    NativeScript QuickBlox JavaScript SDK

    \n

    \"travis-ci\"\n\"Code\n\"npm\"\n\"npm\"

    \n

    The QuickBlox JavaScript SDK provides a JavaScript library making it even easier to access the QuickBlox cloud communication backend platform.

    \n

    QuickBlox is a suite of communication features & data services (APIs, SDKs, code samples, admin panel, tutorials) which help digital agencies, mobile developers and publishers to add great communication functionality to smartphone applications like in Skype, WhatsApp, Viber.

    \n

    Check out our API Reference for more detailed information about our SDK.

    \n

    Work in progress...

    \n

    Install

    \n
    npm install nativescript-quickblox --save
    \n

    And you're ready to go:

    \n
    var QB = require('nativescript-quickblox');

    // OR to create many QB instances
    var QuickBlox = require('nativescript-quickblox').QuickBlox;
    var QB1 = new QuickBlox();
    var QB2 = new QuickBlox();
    \n

    Download ZIP archive

    \n

    NativeScript QuickBlox JavaScript SDK, zip archive

    \n

    Documentation

    \n

    You can look at it here https://quickblox.com/developers/Javascript

    \n

    Questions and feedback

    \n

    Please raise questions, requests for help etc. via https://stackoverflow.com/questions/tagged/quickblox

    \n

    Feedback and suggestions for improvement always welcome :)

    \n

    License

    \n

    Apache 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"postcss-nativescript":{"name":"postcss-nativescript","version":"0.0.0","license":"MIT","readme":"

    PostCSS Plugin Nativescript

    \n

    \n

    Сreate new PostCSS plugins in a few steps:

    \n
      \n
    1. \n

      Clone this repository:

      \n
      git clone https://github.com/postcss/postcss-plugin-boilerplate.git
      \n
      2. \n
    2. \n

      Execute the wizard script. It will ask you a few questions\nand fill all files with your data.

      \n
      node ./postcss-plugin-boilerplate/start
      \n

      Call it with --yarn argument, if you prefer yarn\npackage manager:

      \n
      node ./postcss-plugin-boilerplate/start --yarn
      \n

      Or use --no-install if you want to skip dependencies installation.

      \n
      3. \n
    3. \n

      Your plugin repository will now have a clean Git history.\nCreate the GitHub repository\nand push your project there.

      \n
      4. \n
    4. \n

      Add your project to Travis CI.

      \n
      5. \n
    5. \n

      Write some code to index.js and tests to index.test.js.

      \n
      6. \n
    6. \n

      Execute npm test command

      \n
      7. \n
    7. \n

      Add input and output CSS examples to README.md.

      \n
      8. \n
    8. \n

      Add options descriptions if your plugin has them.

      \n
      9. \n
    9. \n

      Fill CHANGELOG.md with initial version and release it to npm.

      \n
      10. \n
    10. \n

      Fork PostCSS, add your plugin to the\nPlugins list\nand send a pull request.

      \n
      11. \n
    11. \n

      Follow @PostCSS to get the latest updates.

      \n
      12. \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-phaser-ce":{"name":"nativescript-phaser-ce","version":"1.0.0-alpha2","license":"Apache-2.0","readme":"

    nativescript-phaser-ce

    \n

    Tools for using Phaser-ce to build native 2D games in NativeScript 👾

    \n\n

    Installation

    \n
    npm i nativescript-phaser-ce
    \n

    Usage

    \n

    Import the library into your JavaScript file:

    \n
    import TNSPhaser from \"nativescript-phaser-ce\";
    \n

    Functions

    \n

    TNSPhaser.game({ canvas, renderer: Phaser.WEBGL || Phaser.CANVAS, ...extras })

    \n

    Given a canvas from a\nTNSCanvas, return a\nPhaser.Game\nthat draws into it.

    \n

    Props

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionDefault Value
    canvasTNSCanvasRequired: canvas that the Phaser.Game will render tonull
    renderernumber?Optional: choose the renderer type e.g Phaser.CANVAS (1) , Phaser.WEBGL(2)1
    widthnumber?Optional: height of the Phaser.Gamecanvas height
    heightnumber?Optional: width of the Phaser.Gamecanvas width
    titlestring?Optional: title of the Phaser.Game"tns-phaser-game"
    preventLoopboolean?Optional: Prevents the app from calling canvas.nativeView.flush() every framefalse
    \n

    Returns

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    gamePhaser.GameThe Phaser-ce game used for rendering game logic
    \n

    Example

    \n
    const game = TNSPhaser.game({ canvas });
    \n

    What does it do?

    \n

    Under the hood, TNSPhaser is maintaining global instances of a few libraries.

    \n\n
    window.PIXI = require(\"phaser-ce/build/custom/pixi\");
    window.p2 = require(\"phaser-ce/build/custom/p2\");
    window.Phaser = require(\"phaser-ce/build/phaser\");
    \n

    Other libs can be included but are not required. For instance you can import the custom Creature lib the same way.\nWe also override the PIXI.WebGLRenderer.updateTexture to make it compatible with NativeScript.

    \n

    Finally when a new instance of TNSPhaser.Game is created, we set the document.readyState to 'complete' and save the global instance of context

    \n
    global.__context = context;
    global.document.readyState = \"complete\";
    \n

    Then we create a standard render loop and call canvas.nativeView.flush() to flush the frame queue and render our context.

    \n
    const render = () => {
      requestAnimationFrame(render);
      canvas.nativeView.flush();
    };
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-localize":{"name":"nativescript-localize","version":"4.2.2","license":"MIT","readme":"

    NativeScript 7

    \n\n

    If using 6 and below, see the following:

    \n

    nativescript-localize

    \n

    \"npm\"\n\"npm\"

    \n

    This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is inspired from nativescript-i18n

    \n

    Credits

    \n

    A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

    \n

    Table of contents

    \n\n

    Installation

    \n
    tns plugin add nativescript-localize
    \n

    Usage

    \n

    Create a folder i18n in the app folder with the following structure:

    \n
    app
      | i18n
          | en.json           <-- english language
          | fr.default.json   <-- french language (default)
          | es.js
    \n

    You need to set the default langage and make sure it contains\nthe application name to avoid any error.

    \n

    Angular

    \n

    app.module.ts

    \n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptLocalizeModule } from \"nativescript-localize/angular\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [AppComponent],
      bootstrap: [AppComponent],
      imports: [
        NativeScriptModule,
        NativeScriptLocalizeModule
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    export class AppModule { }
    \n

    Template

    \n
    <Label text=\"{{ 'Hello world !' | L }}\"/>
    <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
    \n

    Script

    \n
    import { localize } from \"nativescript-localize\";

    console.log(localize(\"Hello world !\"));
    \n

    Javascript / XML

    \n

    app.js

    \n
    const application = require(\"application\");
    const localize = require(\"nativescript-localize\");
    application.setResources({ L: localize });
    \n

    Template

    \n
    <Label text=\"{{ L('Hello world !') }}\"/>
    <Label text=\"{{ L('I am %s', 'user name') }}\"/>
    \n

    Script

    \n
    const localize = require(\"nativescript-localize\");

    console.log(localize(\"Hello world !\"));
    \n

    Quirks

    \n

    ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

    \n
      const page = args.object;
      page.bindingContext = new Observable();
    \n

    Vue

    \n

    app.js

    \n
    import { localize } from \"nativescript-localize\";

    Vue.filter(\"L\", localize);
    \n

    Template

    \n
    <Label :text=\"'Hello world !'|L\"></Label>
    <Label :text=\"'I am %s'|L('user name')\"></Label>
    \n

    File format

    \n

    Each file is imported using require, use the file format of your choice:

    \n

    JSON

    \n
    {
      \"app.name\": \"My app\",
      \"ios.info.plist\": {
        \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      },
      \"user\": {
        \"name\": \"user.name\",
        \"email\": \"user.email\"
      },
      \"array\": [
        \"split the translation into \",
        \"multiples lines\"
      ],
      \"sprintf\": \"format me %s\",
      \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
    }
    \n

    Javascript

    \n
    const i18n = {
      \"app.name\": \"My app\"
    };

    module.exports = i18n;
    \n

    Frequently asked questions

    \n

    How to set the default language?

    \n

    Add the .default extension to the default language file to set it as the fallback language:

    \n
    fr.default.json
    \n

    How to localize the application name?

    \n

    The app.name key is used to localize the application name:

    \n
    {
      \"app.name\": \"My app\"
    }
    \n

    How to localize iOS properties?

    \n

    Keys starting with ios.info.plist. are used to localize iOS properties:

    \n
    {
      \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    }
    \n

    How to change the language dynamically at runtime?

    \n

    This plugin uses the native capabilities of each platform, language selection is therefore made by the OS.

    \n

    On iOS you can programmatically override this language since plugin version 4.2.0 by doing this:

    \n
    import { overrideLocale } from \"nativescript-localize/localize\";
    const localeOverriddenSuccessfully = overrideLocale(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n

    On Android you can programatically override this language since plugin version 4.2.1 by doing this:

    \n

    In your app.ts / main.ts / app.js

    \n
    import { on, launchEvent } from '@nativescript/core/application';
    import { androidLaunchEventLocalizationHandler } from 'nativescript-localize/localize';

    on(launchEvent, (args) => {
      if (args.android) {
        androidLaunchEventLocalizationHandler();
      }
    });
    \n

    And in your settings page where user chooses the language:

    \n
    import { overrideLocale } from \"nativescript-localize/localize\";
    const localeOverriddenSuccessfully = overrideLocale(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n
    \n

    Important: In both cases, after calling override Locale, you must ask the user to restart the app

    \n
    \n

    For Example:

    \n
    import { android as _android } from '@nativescript/core/application';
    import { overrideLocale } from 'nativescript-localize/localize';

    alert({
      title: 'Switch Language',
      message: 'The application needs to be restarted to change language',
      okButtonText: 'Quit!'
    }).then(() => {
      L.localize.overrideLocale(selectedLang);
      if (isAndroid) {
        _android.foregroundActivity.finish();
      } else {
        exit(0);
      }
    });
    \n
    \n

    Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

    \n
    \n
    android {

      // there maybe other code here //

      bundle {
        language {
          enableSplit = false
        }
      }
    }
    \n
    \n

    Tip: you can get the default language on user's phone by using this

    \n
    \n
    import { device } from '@nativescript/core/platform';

    console.log(\"user's language is\", device.language.split('-')[0]);
    \n
    \n

    Tip: overrideLocale method stores the language in a special key in app-settings,\nyou can access it like this,

    \n
    \n
    import { getString } from '@nativescript/core/application-settings'; 

    console.log(getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
    \n

    Troubleshooting

    \n

    The angular localization pipe does not work when in a modal context

    \n

    As a workaround, you can trigger a change detection from within your component constructor:

    \n
    constructor(
      private readonly params: ModalDialogParams,
      private readonly changeDetectorRef: ChangeDetectorRef,
    ) {
      setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
    }
    \n

    Starting from Android N, there is a weird side effect while using a WebView.

    \n

    For unknown reasons, the very first creation of it resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is native bug and the workaround is

    \n
     <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
    \n
    import {overrideLocale, androidLaunchEventLocalizationHandler} from \"nativescript-localize/localize\";
    import {getString} from '@nativescript/core/application-settings';
    const locale = getString('__app__language__')

    function webViewLoaded(){
        overrideLocale(locale)
        androidLaunchEventLocalizationHandler()
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animation-spring":{"name":"nativescript-animation-spring","version":"0.0.3","license":"MIT","readme":"

    NOTE: You can use this animation effect by itself, or you can get the nativescript-effects plugin, which not only has this effect built in, but has a bunch of other convenient effects

    \n

    NativeScript Spring Animation

    \n

    A NativeScript plugin that adds the Spring effect to animations. The iOS curves that are supported include Linear, EaseIn, EaseOut and EaseInOut, but no Spring. Currently this module supports only iOS, but since Android animation curves include a 'spring-type' of animation, a similar effect already exists.

    \n

    \"\"

    \n

    Installation

    \n
    $ tns plugin add nativescript-animation-spring
    \n

    This command automatically installs the necessary files, as well as stores nativescript-animation-spring as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the animation spring module you must first require() it. After you require() the module you have access to its APIs.

    \n
    var animationSpringModule = require(\"nativescript-animation-spring\");
    \n

    API

    \n

    View.animate Method

    \n

    Use the View.animate() method as you normally would just as described in the NativeScript Docs in the Animation Section. In order to get the Spring effect, there are several options that need to be specified besides the standard ones like transform and scale:

    \n\n

    The full set of options is documented on the Apple developer site. Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).

    \n
    myView.animate({
                translate: {
                    x: 0,
                    y: -100
                },
                scale: {
                    x: 2,
                    y: 2
                },
                duration: 10000,
                delay: 0,
                dampingRatio: 0.3,
                velocity: 2.0,
                options: null,
                curve: \"spring\" //<---set this to \"spring\" to use the spring animation
            })
    \n

    Whether you include this plugin or not, calling the animate function above will work as the extra parameters will be ignored by the NativeScript animate function.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsyelpapi":{"name":"nsyelpapi","version":"1.0.1","license":"Apache-2.0","readme":"

    NSYelpApi

    \n

    Native implementation of the Official Native YelpApi Implementation

    \n

    (Optional) Prerequisites / Requirements

    \n

    A YelpApi api key is required. Sign up at https://www.yelp.com/developers

    \n

    Installation

    \n
    tns plugin add NSYelpApi
    \n

    Usage

    \n

    General Setup

    \n
        import { NSYelpApi } from 'NSYelpApi';


        export class HelloWorldModel extends Observable {
            public message: string;
            private api: NSYelpApi;

        constructor() {
        super();
        this.api = new NSYelpApi(YOUR_API_KEY);
        this.api.businessSearchWithId('9MzzaGTQdvkhGKvUsLD2kw')
            .then((t) => console.log(t))
            .catch(err => console.error(err));

        const coordinates = {latitude: 41.313822, longitude: -72.91276};
        this.api.searchWithQuery(coordinates, null, false, 50, 9, null, 'best_match', 'pizza')
            .then((a) => console.log(a, 't'))
            .catch(err => console.log(err, 'a'));
        }
    }
    \n

    Getting A Business With an Id

    \n
        searchById() {
            this.api.businessSearchWithId('CP_IN_SbHWCvcD5zYxbP0A')
                .then((results: Business) => {
                    const parsedResults = results.name;
                    const data: NavigationExtras = {
                        queryParams: {
                            business: JSON.stringify(results)
                        }
                    };
                    this.router.navigate(['/business'], data);
                })
                .catch(err => console.error(err));
        }
    \n

    Getting A Business By Phone

    \n
        searchByPhone() {
            this.api.businessSearchWithNumber('2037765306')
                .then((results: Business) => {
                    const parsedResults = results.name;
                    const data: NavigationExtras = {
                        queryParams: {
                            business: JSON.stringify(results)
                        }
                    };
                    this.router.navigate(['/business'], data);
                })
                .catch(err => console.error(err));
        }
    \n

    Getting reviews by business ID

    \n
        reviewsById() {
            this.api.businessReviewsWithId('CP_IN_SbHWCvcD5zYxbP0A')
                .then((results: Reviews) => {
                    const review = results.reviews[0];
                    const total = results.total;
                    const data: NavigationExtras = {
                        queryParams: {
                            review: JSON.stringify(review),
                            total: total
                        }
                    };

                    this.router.navigate(['/reviews'], data);
                });
            }
    \n

    Example Response of Reviews

    \n

        const reviews = {
            reviews: [
                message: \"I just love Modern Apizza. Every couple of weeks I crave for modern and go back there to have a custom made pizza. The combo I like a lot and would...\",
                rating: 5,
                timeCreate: \"2019-03-09T22:36:58.000Z\",
                user: \"Akshay A.\"
            ],
            total: 1
        }
    \n

    Example Reponse of Business

    \n

        const business = {
                id: \"jfqLSA2Ic9gC9BpahJLbTA\",
                name: \"Frank Pepe Pizzeria Napoletana\",
                closed: false,
                website: \"https://www.yelp.com/biz/frank-pepe-pizzeria-napoletana-new-haven?adjust_creative=Jx7qaHGmn1sKws49NEEdHA&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=Jx7qaHGmn1sKws49NEEdHA\",
                categories: [
                    {
                        alias: \"pizza\",
                        name: \"Pizza\"
                    },
                    {
                        alias: \"italian\",
                        name: \"Italian\"
                    },
                    {
                        alias: \"wine_bars\",
                        name: \"Wine Bars\"
                    }
                ],
                location: {
                    address: \"157 Wooster St\",
                    city: \"New Haven\",
                    coordinates: {
                        latitude: 41.302918,
                        longitude: -72.916899
                    },
                    countryCode: \"US\",
                    postalCode: \"06511\",
                    stateCode: \"CT\"
                },
                rating: 4,
                imageUrl: \"https://s3-media1.fl.yelpcdn.com/bphoto/eHWOn8Ew9iE4TfrYcHv9tg/o.jpg\",
                reviewCount: 2
        }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ip-protocol":{"name":"nativescript-ip-protocol","version":"0.2.2","license":"MIT","readme":"

    nativescript-ip-protocol

    \n

    This plugin was created to use simple IP protocols over native platforms (iOS and Android).

    \n

    Currently it is supported only UDP messages.

    \n

    Installation

    \n
    tns plugin add nativescript-ip-protocol
    \n

    Usage

    \n

    You can see demo-angular in the repository, but basic usage can be seen below

    \n
        import { UdpProtocol } from 'nativescript-ip-protocol';

        public startReceiving() {
            const udpSocket: UdpProtocol = new UdpProtocol();
            udpSocket.receiveWithTimeout(this.port, this.timeout)
            .subscribe((msg) => {
                this.receivedMessage = msg;
            }, (error) => {
                console.error(error);
            });
        }

        public receiveOnce() {
            const udpSocket: UdpProtocol = new UdpProtocol();
            udpSocket.receiveOnce(Number(this.port))
            .subscribe((msg) => {
                this.receivedMessage = msg;
            }, (error) => {
                console.error(error);
            });
        }

        public sendBroadcast() {
            const udpSocket: UdpProtocol = new UdpProtocol();
            this.message = msgDefault + this.messageCount;
            udpSocket.sendBroadcast(this.port, this.message)
            .subscribe(() => {
                this.status = \"Broadcast message sent\";
                this.messageCount++;
            });
        }

        public sendUnicast() {
            const udpSocket: UdpProtocol = new UdpProtocol();
            this.message = msgDefault + this.messageCount;
            udpSocket.sendUnicast(this.ip, this.port, this.message)
            .subscribe(() => {
                this.status = \"Unicast message sent\";
                this.messageCount++;
            });
        }
    \n

    License

    \n

    MIT

    \n

    Thanks to

    \n

    Special thanks to NathanaelA who helped to solve outstanding issues

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-lite":{"name":"nativescript-contacts-lite","version":"0.2.7","license":"MIT","readme":"

    NativeScript Contacts Lite

    \n

    This nativescript-contacts-lite plugin provides pretty fast (but hey it's all relative) read-only access to the iOS and Android contact directory. By limiting the scope of the result set through the desiredFields, it is possible to obtain a JSON object containing the relevant data of the contact directory within a couple of hundred milliseconds.

    \n

    Demo Application

    \n

    This repository contains a demo application in the demo-angular folder that uses this plugin to display a contact picker. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run tns run <platform> in the demo-angular folder.

    \n

    Installation

    \n

    Run tns plugin add nativescript-contacts-lite

    \n

    Usage

    \n

    To use the contacts module you must first require() it.

    \n
    var Contacts = require(\"nativescript-contacts-lite\");
    \n

    Methods

    \n

    getContacts & getContactsWorker

    \n

    Both methods retrieve contacts and share the same interface. The difference is that the former runs in the main thread and the latter within a web worker.

    \n

    Argument 1: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. Possible values are:

    \n
    [
      'address',
      'display_name',
      'email',
      'name_details',
      'nickname',
      'note',
      'organization',
      'phone',
      'photo',
      'thumbnail',
      'website'
    ]
    \n

    Argument 2: searchTerm (optional)\nA string with a search term to limit the result set to only contacts whose display_name contain the term. Defaults to fetching all relevant contacts if an empty search term is provided or none at all.

    \n

    Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

    \n

    Example using getContacts

    \n
    let desiredFields = ['display_name','phone'];
    let searchTerm = 'Jon';

    console.log('Loading contacts...');
    let timer = new Date().getTime();

    Contacts.getContacts(desiredFields,searchTerm).then((result) => {
      console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
      console.log(`Found ${result.length} contacts.`);
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    Example using getContactsWorker

    \n
    let desiredFields = ['display_name','phone','thumbnail','email','organization'];

    console.log('Loading contacts...');
    let timer = new Date().getTime();

    Contacts.getContactsWorker(desiredFields).then((result) => {
      console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
      console.log(`Found ${result.length} contacts.`);
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    getContactById

    \n

    Get contact details for a specific contact.

    \n

    Argument 1: contactId\nThe identifier of the contact you wish to obtain details of (obtained through the getContacts(Worker) methods).

    \n

    Argument 2: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. See getContacts method for possible values.

    \n

    Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

    \n

    Example

    \n
    let contact_id = contact.contact_id // get id from result of getContacts method

    let desiredFields = [
      'address',
      'display_name',
      'email',
      'name_details',
      'nickname',
      'note',
      'organization',
      'phone',
      'photo',
      'thumbnail',
      'website'
    ]

    Contacts.getContactById(contact_id,desiredFields).then((result) => {
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    Performance

    \n

    Considerations

    \n

    Running in main thread versus web worker

    \n

    The plugin provides both methods that run in either the main/UI thread or within a web worker. Although offloading the processing to a separate thread adds web worker initialization time, it guarantees that the main UI thread will continue to work smoothly.

    \n

    If you are implementing an autocomplete where on each key you are querying a smaller subset of the contacts, you will probably want to go with the non-worker variant to avoid web worker initialization time while the user is waiting. On the other hand, if you are reading the entire contact directory while initializing your app, you probably want this to happen in the background to avoid the UI getting stuck while processing. In the latter case you probably would want to use the web worker variant.

    \n

    Contact Picker Example

    \n

    Another way to speed up performance is possible in certain cases like when you are building a contact picker. In this case it is probably good enough to first provide a narrow array of desiredFields like ['display_name','thumbnail'] to getContacts to display the list. Only when the user selects a specific contact, you can obtain all details for a specific contact by supplying a wider array of desiredFields to getContactById. This example has been implemented in the demo app located in this repository.

    \n

    Benchmarks

    \n

    Android

    \n

    On a relatively old Samsung Galaxy S4 a list of ~600 contacts is returned somewhere between ~300ms up to ~2s depending on the desired fields and whether you run in the main thread or in a web worker.

    \n

    iOS

    \n

    Tests on an iPhone 7 plus with ~600 contacts returned in ~105ms when running getContacts(['display_name', 'phone']) (so non worker). This could use some more real iOS device data in different modes (e.g. more fields & web worker mode) if anyone has some.

    \n

    Notes

    \n

    Bundling with Webpack

    \n

    This plugin is compatible with webpack bundling through the nativescript-dev-webpack plugin as of NativeScript 3.2. However, if you are using the web worker functions, we need to ensure that the web worker resources are included in the package. For this purpose, you should add the nativescript-worker-loader to your project: npm i -D nativescript-worker-loader.

    \n

    Photo & Thumbnail Images

    \n

    The plugin returns photo & thumbnail images as a base64 encoded string ready to be used as the source attribute of an image, e.g. <Image *ngIf="item.thumbnail" [src]="item.thumbnail"></Image>

    \n

    Android Specifics

    \n

    Permissions

    \n

    This plugin uses the nativescript-permissions plugin by Nathanael Anderson for obtaining read-only permissions to the phone's contacts on Android 6 and above.

    \n

    iOS Specifics

    \n

    Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n

    Permissions

    \n

    As of iOS 10 it has become mandatory to add the NSContactsUsageDescription key to your application's Info.plist (see Apple's developer documentation).

    \n

    Therefore you should add something like this to your ~/app/App_Resources/iOS/Info.plist:

    \n
    <key>NSContactsUsageDescription</key>
    <string>This application requires access to your contacts to function properly.</string>
    \n

    Acknowledgements

    \n

    The iOS part of this plugin is based on code from the nativescript-contacts plugin.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mdnx/loopback-sdk-builder":{"name":"@mdnx/loopback-sdk-builder","version":"2.3.1-1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-toast":{"name":"nativescript-android-toast","version":"0.3.0","license":"MIT","readme":"

    Nativescript Android Toast

    \n

    \"npm\"\n\"GitHub\"\n\"Build\n\"npm\"\n\"GitHub\n\"Status\"\n\"Twitter

    \n

    Installation:

    \n

    tns plugin add nativescript-android-toast

    \n
    \n

    API (Methods)

    \n
    MakeToast(text : String, duration : \"long\" or \"short\");
    \n
    \n

    API (Properties)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeRequireDescription
    textStringRequiredText you want to toast
    durationStringOptional"long" or "short" duration
    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo 1Demo 2
    \"Demo\"Demo
    \n
    \n

    Usage

    \n

    TypeScript

    \n
    import Toast from \"nativescript-android-toast\";

    showToast() {
        Toast.MakeToast(\"Hello Typescript\",\"short\");
    }
    \n
    \n
    <Button text=\"click\" (tap)=\"showToast();\">
    \n
    \n

    JavaScript

    \n
    var Toast = require(\"nativescript-android-toast\");

    showToast() {
        Toast.MakeToast(\"Hello Javascript\",\"long\");
    }
    \n
    \n

    https://developer.android.com/reference/android/widget/Toast

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"n7-google-places-autocomplete":{"name":"n7-google-places-autocomplete","version":"1.0.11","license":"Apache-2.0","readme":"

    Nativescript Google Places Autocomplete

    \n

    \"npm\n\"Twitter

    \n

    Add location autocomplete to your Nativescript application

    \n

    \"\"

    \n

    Prerequisites

    \n

    Create and grap your Api key from https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en

    \n

    Installation

    \n
    tns plugin add nativescript-google-places-autocomplete
    \n

    Usage

    \n
        import { GooglePlacesAutocomplete } from 'nativescript-google-places-autocomplete';
    \t
    \tlet API_KEY = \"your_api_Key\";
    \tlet googlePlacesAutocomplete = new GooglePlacesAutocomplete(API_KEY);

    \tgooglePlacesAutocomplete.search(params)
    \t      .then((places: any) => {
    \t\t      // place predictions list
               }, (error => {
                  console.log(error)
              }));
              
    \tgooglePlacesAutocomplete.getPlaceById(place.placeId).then((place) => {
    \t   .then(function () { });
            }, error => {
                console.log(error)
            })
    \n

    Plugin Auther : Aymen Labidi

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sirl-io/loopback-sdk-builder":{"name":"@sirl-io/loopback-sdk-builder","version":"2.4.1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is a clone of @mean-expert/loopback-sdk-builder by the author Jonathan Casarrubias. Given the project is no longer in active management we are making and contributing changes to this version.

    \n
    \n

    The @sirl-io/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @sirl-io/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tbaluyan/loopback-sdk-builder":{"name":"@tbaluyan/loopback-sdk-builder","version":"2.3.2","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-office365":{"name":"nativescript-office365","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/alexziskind1/nativescript-office365/blob/master/LICENSE"},"readme":"

    Office 365 Graph API plugin for NativeScript

    \n

    \"Office

    \n

    Manage Office 365 Users, Groups, Mail, Calendars, Contacts, Files,\nTasks, People, Notes and more — all from a single endpoint

    \n

    Note: iOS only, for now

    \n

    Features

    \n

    For readability the supported features have been moved to their own README's:

    \n\n

    Prerequisites

    \n

    You should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

    \n

    Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

    \n
      \n
    1. Click the "Add Platform" button and select "Mobile application"
      2. \n
    2. Copy the "Client Id" GUID from the Mobile Application section.
      3. \n
    3. Click "Save" at the bottom.
      4. \n
    \n

    Setup

    \n

    Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-office365
    \n

    Then open references.d.ts in the root of your project and add this line to get autocompletion and type-checking for this plugin:

    \n
    /// <reference path=\"./node_modules/nativescript-office365/office365.d.ts\" />
    \n

    Usage

    \n

    If you want a quickstart, get the demo app here.

    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.ts and add this before application.start();:

    \n
    TypeScript
    \n
    import * as o365 from 'nativescript-office365';

    var o365InitOptions : o365.InitOptions = {
        clientId: '<enter GUID here>', //client id for application (GUID)
        scopes: ['Files.ReadWrite']
    };
    o365.init(o365InitOptions);
    \n

    Note 1: Enter the client id GUID value that was generated for you when you registered your app in the Prerequisites section.

    \n

    Note 2: The scope listed above gives your NativeScript app SharePoint (OneDrive) file read/write permissions. Add/replace with other scope strings to give your app permissions to do other activities. More scopes are listed here

    \n

    Future work

    \n\n

    Credits

    \n

    The starting point for this plugin was the NativeScript Plugin Seed by Nathan Walker.\nThe MS Graph Client iOS version wouldn't have worked without the iOS ninja expertise of Jason Zhekov

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mwz-apple-sign-in":{"name":"mwz-apple-sign-in","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ably":{"name":"nativescript-ably","version":"0.2.0","license":{"type":"MIT","url":"https://github.com/atende/nativescript-ably/blob/master/LICENSE"},"readme":"

    NativeScript Ably Plugin

    \n

    A wrapper around ably.io libraries for Android and IOS

    \n

    Strategy

    \n

    To goal is to separate API from implementation:

    \n\n

    The application just need to import nativescript-ably module.\nExample:

    \n

    import {AblyRealtime, Message, ConnectionStateChange, ConnectionState} from "nativescript-ably"

    \n

    It will import the ably.js file that is generated from ably.android.ts, or ably.ios.ts. Depending on the platform

    \n

    You should not:

    \n
    Import the API folder, unless you are exposing the API in a implementation\nImport the implementation folder, unless you know what you are doing :-)\n
    \n

    Android implemetation will be added first, while learning the API, after tests IOS will be added

    \n

    Demo

    \n

    https://github.com/atende/nativescript-ably-demo

    \n

    Typical development workflow:

    \n
    git clone https://github.com/atende/nativescript-ably\ngit clone https://github.com/atende/nativescript-ably-demo\ncd nativescript-ably\ntsc --watch\ncd ../nativescript-ably-demo\n
    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run live.android or npm run live.ios (must be run from the demo directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a gaurantee to remove the plugin and add it back
    tns plugin remove nativescript-ably // replace with your plugin name
    tns plugin add ../nativescript-ably

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/nativescript-firebase-env":{"name":"@global66/nativescript-firebase-env","version":"1.0.1","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-media-generator":{"name":"nativescript-media-generator","version":"1.0.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vkontakte":{"name":"nativescript-vkontakte","version":"0.1.7","license":"MIT","readme":"

    nativescript-vkontakte

    \n

    A VKontakte NativeScript module for Android and iOS

    \n

    install npm package

    \n
    tns plugin add nativescript-vkontakte
    \n

    Setup

    \n

    Android

    \n

    Initialize inside application onCreate\n(extend application doc)

    \n
    var vk = require(\"nativescript-vkontakte\");
        ...
        onCreate: function() 
        {
            superProto.onCreate.call(this);
            // Enter custom initialization code here
            var context = this.getApplicationContext();
            vk.initialize(context);
        },
    \n

    Subscribe on activityResult

    \n
    import * as application from \"application\";
    import * as vk from \"nativescript-vkontakte\";

    application.android.on('activityResult', data => 
    {
        let res = vk.onActivityResult(data.requestCode, data.resultCode, data.intent, token => 
        {
            console.log('VKCallback userId: ' + token.userId);
        }, error => 
        {
            console.log('VKCallback error: ' + error.errorCode);
        });
        console.log('onActivityResult ' + res.toString());
    });
    \n

    Add AppID to strings.xml

    \n
    <integer name=\"com_vk_sdk_AppId\">YOUR_APP_ID</integer>
    \n

    iOS

    \n

    Add AppID to Info.plist

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>vkYOUR_APP_ID</string>
        </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>vk</string>
        <string>vk-share</string>
        <string>vkauthorize</string>
    </array>
    \n

    Links:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-signin":{"name":"nativescript-google-signin","version":"0.1.0","license":{"type":"","url":"https://github.com/carvarr/nativescript-google-signin/LICENSE"},"readme":"

    nativescript-google-signin

    \n

    plugin for nativescript apps using signin with google

    \n

    Prerequisites

    \n

    You need to get the configuration file "google-services.json" copied to platforms/android/ directory and the prerequisites established by google must be set

    \n

    Installation

    \n\n

    Usage

    \n
    var googleSignIn = require(\"nativescript-google-signin\");
    \n

    create a config object

    \n
    var config = {
            authCode: \"your-auth-code\",
            requestProfile: true
    };
    \n\n

    authCode or requestToken must be set if you doesn't create the string variable in the xml file as explained before

    \n

    Also as second param, you need to pass callbacks function for success or failed events:

    \n
    var callbacks = {

            onSuccess: function(result){
            },

            onFailed: function(e){
            }

        };
    \n\n

    invoke the singIn using the config created

    \n
    googleSignIn.singIn(config, callbacks);
    \n

    Notes

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbar":{"name":"nativescript-toolbar","version":"0.3.0","license":"MIT","readme":"

    NativeScript tool bar plugin

    \n

    A plugin for using your tool bars in iOS part of your native script app.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-toolbar
    \n

    This command automatically installs the necessary files, as well as stores nativescript-toolbar as a dependency in your project's package.json file.

    \n

    Modal screens.

    \n

    Toolbar can help with working around an issue with pages not having an actionbar on iOS when the page is presented as a modal. There is a barPosition property which can be set to 3 i.e. UIBarPositionTopAttached to make the toolbar look like an action bar for your modal pages.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
        xmlns:tools=\"nativescript-toolbar\">
      <DockLayout stretchLastChild=\"false\">
        <tools:ToolBar dock=\"top\" style=\"margin-bottom:0.5\" barPosition=\"3\">
            <tools.ToolBar.barItems>
                <tools:ToolBarItem text=\"Done\"/>
            </tools.ToolBar.barItems>
        </tools:ToolBar>
      </DockLayout>
    </Page>
    \n

    Examples

    \n

    The code below creates a tool bar in xml with tint color for buttons as green and the background as blue.

    \n
    <!-- my-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    \txmlns:tools=\"nativescript-toolbar\">
      <StackLayout style=\"vertical-align : bottom\">
      \t<tools:ToolBar style=\"background-color : blue; color: green\">
      \t\t<tools.ToolBar.barItems>
      \t\t\t<tools:ToolBarItem text=\"Done\"/>
      \t\t</tools.ToolBar.barItems>
      \t</tools:ToolBar>
      </StackLayout>
    </Page>
    \n

    The code below creates a tool bar in xml using ios system bar button items.

    \n

    The value should be a number from the UIBarButtonSystemItem enumeration

    \n\n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    \txmlns:tools=\"nativescript-toolbar\">
      <StackLayout style=\"vertical-align : bottom\">
      \t<tools:ToolBar>
    \t\t\t<tools:ToolBar.barItems>
    \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"5\"/><!-- Flexible space item-->
    \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"1\"/> <!-- Cancel button -->
    \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"0\" tap=\"onDoneButtonTapped\"/> <!-- Done button -->
    \t\t\t</tools:ToolBar.barItems>
    \t\t</tools:ToolBar>
      </StackLayout>
    </Page>
    \n\n\n

    NPM publish

    \n

    Clone this repository and install typescript plugin globally. Use the typescript compiler to convert to ts files javascript

    \n
    $ tsc
    \n

    Make sure js files are updated with your changes

    \n
    npm publish .
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xmlking/nativescript-ngx-microsoftband":{"name":"@xmlking/nativescript-ngx-microsoftband","version":"0.1.5","license":"MIT","readme":"

    MicrosoftBand Plugin for Telerik NativeScript

    \n

    This NativeScript plugin enables building Mobile apps to display Microsoft Band sensors data.\nThis plugin uses MicrosoftBand CocoaPod written in Swift and Band SDK.

    \n

    \"Demo\"

    \n

    Install

    \n

    Prerequisites

    \n
      \n
    1. Node > 8.0.0
      2. \n
    2. NativeScript CLI > 3.0.0
      yarn global add nativescript --ignore-engines
      \n
      3. \n
    3. Cocoapods
      gem install cocoapods
      pod repo update
      \n
      4. \n
    \n

    Plugin

    \n
    tns plugin add @xmlking/nativescript-ngx-microsoftband
    \n

    Usage

    \n

    1. import the MicrosoftBandModule module

    \n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { MicrosoftBandModule } from '@xmlking/nativescript-ngx-microsoftband';

    import { AppComponent } from \"./app.component\";

    @NgModule({
      imports: [
        NativeScriptModule,
        MicrosoftBandModule.forRoot()
      ],
      declarations: [
        AppComponent
      ],
      bootstrap: [
        AppComponent
      ],
      schemas: [
        NO_ERRORS_SCHEMA
      ]
    })
    export class AppModule { }
    \n

    2. use it in your service/component

    \n

    Refer app.component.ts and heart-rate.component.ts

    \n

    Build

    \n
    \n

    Building and publishing the plugin.

    \n
    \n

    Setup

    \n
    yarn run setup
    \n

    Build

    \n
    yarn run build
    \n

    Publish

    \n
    cd dist
    npm publish
    \n

    Example App

    \n
    \n

    Setup and Run Example app

    \n
    \n

    Setup

    \n
    cd src
    tns plugin remove @xmlking/nativescript-ngx-microsoftband; tns plugin add ../dist
    # tns platform remove ios # cleanup?
    \n

    Run

    \n
    cd src
    tns prepare ios
    tns build ios --release
    # open src/platforms/ios/src.xcworkspace project in xcode and run on attached iOS devise.
    \n

    Credits

    \n

    Idea came from NathanWalker, Minko Gechev

    \n

    Contributors

    \n

    License

    \n

    MIT

    \n

    https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/#Usage_with_TypeScript

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timepicker-slider":{"name":"nativescript-timepicker-slider","version":"0.1.2","license":"MIT","readme":"

    NativeScript date picker slider plugin

    \n

    A plugin that enables you to use the cocoapod at https://github.com/rajivnarayana/TimePickerSlider in your native script app.

    \n

    Installation

    \n

    Run the following command from the root of your project

    \n
    $ tns plugin add https://github.com/rajivnarayana/NativeScriptTimePickerSliderPlugin.git
    \n

    This command automatically install the necessary ios files from the cocoapod github repository and adds as a dependency in your package.json file

    \n

    Examples

    \n

    There is an sample application at the folder "Example". To run it (assuming you have nativescript plugin installed globally)

    \n
    $ sudo npm install typescript -g
    $ tsc
    $ cd Example
    $ tns plugin add ../
    \n

    Run the application from your mac onto your iOS simulator by typing

    \n
    $ tns emulate ios --device=iPhone\\ 5s
    \n

    The following code from Example/app/main.xml show you a way to add Time picker to your layout

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:tools=\"nativescript-timepicker-slider\">
      <DockLayout stretchLastChild=\"false\" style=\"background-color: gray\">
        <tools:TimeIntervalSlider 
            hour=\"8\" 
            minute=\"30\" 
            dock=\"bottom\" 
            fillColor=\"#e00000\"
            strokeColor=\"#0000e0\"
            loaded=\"onSliderLoaded\"
            />
      </DockLayout>
    </Page>
    \n

    Following code from Exaple/app/main.js shows a way to listen to value changes

    \n
    function onSliderLoaded(args) {
        var slider = args.object;
        slider.on(observableModule.Observable.propertyChangeEvent, (args) => {
            if (args.propertyName == sliderModule.Slider.valueProperty.name) {
                console.log('Do something with the data '+slider.value);
            }
        }, this);
    }

    exports.onSliderLoaded = onSliderLoaded;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/root-detection":{"name":"@nstudio/root-detection","version":"2.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-printer":{"name":"nativescript-ichi-printer","version":"0.9.9","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-printer/blob/master/LICENSE"},"readme":"

    nativescript-ichi-printer

    \n

    POS printer for NativeScript.

    \n

    Supported platforms

    \n\n

    There is no support for iOS yet!

    \n

    Installing

    \n
    tns plugin add nativescript-ichi-printer
    \n

    Usage

    \n

    Here is a TypeScript example:

    \n
    import {PrintClient} from \"nativescript-ichi-printer\";

    // new Printer Client, param:  0: TCP, 1: USB, 2: Bluetooth
    var printClient = new PrintClient(0);
    printClient.onData = (data: Array<number>) => {
        console.log(\"Data from Printer: \", data);
    };
    printClient.onError = (id: number, message: string) => {
        console.log(\"Print client error for action #\", id, \": \", message);
    };
    printClient.onConnected = (id: number) => {
        console.log(\"Print client connected action #: \", id);
        var message = \"Print test String!\";
        var bytes = [];
        for (var i = 0; i < message.length; i++) {
            var c = message.charCodeAt(i);
            bytes.push(c & 0xFF);
        }
        printClient.send(bytes);
    };
    printClient.onSent = (id: number) => {
        console.log(\"Print client sent action #: \", id);
        // When we are finished
        printClient.close();
    };
    printClient.onClosed = (id: number) => {
        console.log(\"Print client closed action #: \", id);
    };

    // Connect printer (type: TCP), param: IP, port
    printClient.connect(\"192.168.1.192\", 9100);

    // // Connect printer (type: USB), param: printer Name by getUsbPrinters()
    // printClient.connect(\"USB Support Printer 1\", 0);

    // // Connect printer (type: Bluetooth), param: printer Name by getBlueToothPrinters()
    // printClient.connect(\"58 POS printer\", 0);

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-akylas":{"name":"svelte-native-akylas","version":"0.7.4-alpha.7","license":"MIT","readme":"

    Svelte Native

    \n

    Create Mobile applications using native widgets via Svelte Svelte and NativeScript.

    \n

    See https://svelte-native.technology for docs and tutorials

    \n

    \"todo

    \n

    Features

    \n

    Svelte-Native includes Svelte specific integrations such as

    \n\n

    Work In Progress

    \n

    While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

    \n\n

    Installation

    \n

    You can get started developing with this using the latest template

    \n
    $ npm install -g nativescript
    $ tns create myapp --template tns-template-blank-svelte
    \n

    A fresh Svelte Native app will be found in the myapp folder

    \n

    Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

    \n

    Usage

    \n

    App.svelte

    \n
    <page>
        <actionBar title=\"Svelte Native\"></actionBar>
        <stackLayout>
            <label text={msg}></label>
            <button text=\"Change\" on:tap=\"{toggle}\"></button>
        </stackLayout>
    </page>

    <script>
      export let msg = 'Hello World!'
      const toggle = () => {
          msg = \"Hi from svelte\"
      }
    </script>
    \n

    Main.ts

    \n
    import App from './components/App.svelte';

    import { svelteNative } from 'svelte-native'

    svelteNative(App, {msg: \"Hi from launcher\"});
    \n

    Examples

    \n

    Svelte Native HackerNews

    \n

    Simple HackerNews client in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-hackernews for the repo.

    \n

    \"HackerNews

    \n

    Svelte Native Grocery

    \n

    Grocery app example in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-grocery for the repo.

    \n

    \"Grocery

    \n

    Svelte Native Realworld

    \n

    Realworld implementation app in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-realworld for the repo.

    \n

    \"Realworld

    \n

    Credits

    \n

    The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-upgrade":{"name":"nativescript-upgrade","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-upgrade/blob/master/LICENSE"},"readme":"

    nativescript-upgrade

    \n

    upgrade for NativeScript.

    \n

    Supported platforms

    \n\n

    There is no support for iOS yet!

    \n

    Installing

    \n
    tns plugin add nativescript-upgrade
    \n

    Usage

    \n

    Here is a TypeScript example:

    \n
    import {MyUpgradeHelper} from \"nativescript-upgrade\";

    var upgradeHelper = new MyUpgradeHelper();
    upgradeHelper.check(\"http://www.upgrade.com/upgrade?version=3\");
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-epub":{"name":"nativescript-epub","version":"0.1.0","license":"MIT","readme":"

    NativeScript ePub Reader Plugin

    \n

    NativeScript plugin to open and read ePub files natively. Currently only supported on iOS.

    \n

    Getting Started

    \n\n

    Code Sample

    \n
    import {Observable} from 'data/observable';
    import {EPubReader} from 'nativescript-epub';

    export class HelloWorldModel extends Observable {

      constructor() {
        super();

        let epubReader = new EPubReader();
        epubReader.open('book');
      }

    }
    \n

    Example

    \n

    \"Image\"

    \n

    Credits

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-presentation":{"name":"nativescript-ichi-presentation","version":"0.7.0","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-presentation/blob/master/LICENSE"},"readme":"

    nativescript-ichi-presentation

    \n

    Presentation for NativeScript.

    \n

    Supported platforms

    \n\n

    There is no support for iOS yet!

    \n

    Installing

    \n
    tns plugin add nativescript-ichi-presentation
    \n

    Usage

    \n

    Here is a TypeScript example:

    \n
    import {PresentationClient} from \"nativescript-ichi-presentation\";

    // data for show
    var order = {
        items: [],
        coupons: [],        
        finalFee: 0.0,
    }
    var orderItem = {
        name: \"product\",
        qty: 2,
        fee: 14,
    }
    var orderItem2 = {
        name: \"product2\",
        qty: 3,
        fee: 45,
    }
    var couponItem = {
        name: \"coupon\",
        fee: 5,
    }
    order.items.push(orderItem);
    order.items.push(orderItem2);
    order.coupons.push(couponItem);
    order.finalFee = 54;


    // new Presentation Client
    var client = new PresentationClient();

    if (client.generate())
    {
        // show Presentation
        client.showPresentation();

        // set data whil showed
        client.setShowType(2);
        client.setOrder(order);

        // imgPath
        // client.setShowType(1);
        // client.setImage(imgPath);

        // videoPath
        // client.setShowType(1);
        // client.setVideo(videoPath);

        // black screan
        // client.setShowType(0);

        // media from web
        // url response json string like: {\"mediaFiles\":[\"http://192.168.1.5/800.jpg\"],\"menus\":[\"http://192.168.1.5/menu1.jpg\"]} 
        // var url = \"http://192.168.1.5/media/\";
        // client.downloadAndShow(url);

        // var resp = \"{\\\"mediaFiles\\\":[\\\"http://192.168.1.5/800.jpg\\\"],\\\"menus\\\":[\\\"http://192.168.1.5/menu1.jpg\\\"]}\";
        // client.setMediaJsonAndShow(resp);

        // show \"menus\" by downloadAndShow
        // client.ShowMenu();

        // show \"mediaFiles\" by downloadAndShow
        // client.ShowMedia();

        // clean Files downloaded by downloadAndShow
        // var deleteAll = false;
        // client.cleanCacheFile(deleteAll);

        // close Presentation
        // client.closePresentation(videoPath);
    }
    else
    {
        console.log(\"Presentation Client generate failed\");
    };


    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-estimote-plugin":{"name":"nativescript-estimote-plugin","version":"0.0.6","license":{"type":"MIT","url":"https://github.com/progress/estimote-nativeScript-plugin/blob/master/LICENSE"},"readme":"

    Original repository: "https://www.npmjs.com/package/nativescript-estimote-sdk"

    \n

    Estimote Plugin for NativeScript

    \n

    Estimote Beacon is a super small device. It has a powerful 32-bit ARM® Cortex M0 CPU with 256kB flash memory, accelerometer, temperature sensor and most importantly – a 2.4 GHz Bluetooth 4.0 Smart (also known as BLE or Bluetooth low energy) bidirectional radio.

    \n

    You can think of the beacon as a small lighthouse tower that's installed in a fixed location and broadcasts its presence to all the ships (smartphones) around. They could be as close as 2 inches and as far as 230 feet (approx. 70 metres) away.

    \n

    The plugin is implemented on top of the Estimote native SDKs that lets you track beacon devices around you. It defines a global estimote object, which defines various operations that are used for tracking a beacon device.

    \n

    Prerequisites

    \n

    NativeScript 1.5+ (tns --version), please upgrade if you need to.

    \n

    installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-estimote-plugin
    \n

    Methods

    \n\n

    You can initialize the plugin for a region in the following way:

    \n
    var Estimote = require('nativescript-estimote-plugin');\n\nvar options = {\n  region : 'Progress', // optional\n  callback : function(beacons){\n    /* This is called everytime beacons are discovered or proximity changes\n\n      for (var i = 0; i < beacons.count; i++) {\n         var beacon = beacons[i];\n         if (beacon.major > 0){\n             var distance = "NA";\n             var identifier = "Major:" + beacon.major + " Minor:" + beacon.minor;\n\n             if (beacon.proximity) {\n               distance = beacon.proximity;\n             }\n\n             items.push({\n                 "proximity" : beacon.proximity,\n                 "identifier": identifier,\n                 "distance":  "Distance: " + distance,\n                 "rssi": "Power: " +  beacon.rssi + "dBm"\n             });\n\n             console.log(json);\n         }\n    }\n  */\n}\n\nvar estimote = new Estimote(options);\n
    \n

    estimote.startRanging

    \n

    The method initializes the estimote beacon manager to monitor for beacons for a specified region.

    \n
    estimote.startRanging();\n
    \n

    If an existing region with the same identifier is already being monitored by the application, the old region is replaced by the new one. The regions you add using this method are shared by all beacon and location manager objects in your application.

    \n

    estimote.stopRanging

    \n

    The method stops the estimote beacon manager for monitoring beacons.

    \n
    estimote.stopRanging();\n
    \n

    Platform

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lan-scan":{"name":"nativescript-lan-scan","version":"0.3.1","license":"MIT","readme":"

    NativeScript LanScan [Beta]

    \n

    (iOS Only)

    \n

    Getting started

    \n

    This plugin is a wrapper around the iOS MMLanScan library:\nhttps://github.com/mavris/MMLanScan

    \n

    To use this plugin in a NativeScript app:

    \n
      \n
    1. Run: tns plugin add nativescript-lan-scan
      2. \n
    \n

    What does it do?

    \n

    This plugin will scan a local network and return an array of all detected IP and MAC addresses. See the original MMLanScan for more details.

    \n

    How do you use it?

    \n

    Add the plugin to your NativeScript app

    \n
    tns plugin add nativescript-lan-scan
    \n

    Include the plugin in your application. You will need to include a few of the event classes as well if you are using TypeScript - just so TypeScript is happy.

    \n
    import { LanScan, FoundDeviceEventData, DeviceInfo, PingProgressEvent, PingProgress }

    var lanScan = new LanScan();

    // Wire up callback events from the Lan Scanner

    // Fires whenever a devices is discovered
    this._lanScan.on(LanScan.foundNewDeviceEvent, (args: FoundDeviceEventData) => {
        // Device info is found on the args.deviceInfo object...
        // args.deviceInfo.ipAddress
        // args.deviceInfo.macAddress
    });

    // Fires everytime an address on the subnet is pinged
    this._lanScan.on(LanScan.progressPingedEvent, (args: PingProgressEventData) => {
        // args.pingProgress.overallHosts - total number hosts that the scanner will ping through
        // args.pingProgress.pingedHosts - current number of hosts that have been pinged
    });

    this._lanScan.on(LanScan.scanningFinishedEvent, (args) => {
        // Status: enum...
        // 0: Finished
        // 1: Stopped
    });

    // Start the Lan Scanner
    lanScan.start();


    // If, in the middle of the operation you want to stop the scan
    lanScan.stop();

    // Get the SSID
    // Note that this doesn't work in the simulator,
    // it will say \"No Wifi Available\"
    let ssid = lanScan.fetchSSIDInfo();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-version":{"name":"nativescript-dev-version","version":"0.2.0","license":"ISC","readme":"

    Nativescript hook plugin to maintain native app version

    \n

    This plugin takes the version and versionNumber properties from package.json and puts on the specific platform resources: AndroidManifest.xml file for the Android sources, and Info.plist for iOS sources.

    \n

    Compatible with NS 6.

    \n

    How to use

    \n
    $ tns plugin add nativescript-dev-version
    \n

    The above command installs this module and installs the necessary NativeScript hooks.

    \n

    Then, specify and maintain the desired release version on the ./package.json file under the nativescript.version property, for example:

    \n
    {
      \"nativescript\": {
        \"id\": \"org.nativescript.MySampleApp\",
        \"version\": \"1.2.3\",
        \"versionNumber\": \"1\"
        ...
      },
      ...
    }
    \n

    or:

    \n
    {
      \"version\": \"1.2.3\",
      \"versionNumber\": \"1\"
      ...
    }
    \n

    When running tns prepare ... the hooks will take care of the native resources.

    \n

    On iOS, your Info.plist will get:

    \n
    <key>CFBundleShortVersionString</key>
    <string>1.2.3</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    \n

    On Android, AndroidManifest.xml will have:

    \n
    <manifest
      (...) android:versionCode=\"10203001\" android:versionName=\"1.2.3\"
    \n

    Breaking changes

    \n

    When upgading to v0.1.3, for iOS you MUST add "versionNumber": "[value]" to correctly apply on CFBundleVersion in the Info.plist

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-listview-header":{"name":"nativescript-listview-header","version":"0.2.1","license":"MIT","readme":"

    Nativescript ListView header plugin.

    \n

    A plugin for adding headerView i.e. tableHeaderView to ListView for iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-listview-header
    \n

    Examples

    \n

    Include the plugin in your xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
            loaded=\"pageLoaded\" 
            xmlns:tools=\"nativescript-listview-header\">
        <tools:ListViewWithHeader items=\"{{items}}\" loaded=\"onListViewLoaded\" rowHeight=\"44\">
        </tools:ListViewWithHeader>
    </Page>
    \n

    Set your header view in code behind

    \n
    var searchBarModule = require(\"ui/search-bar\");
    exports.onListViewLoaded = function(args) {
        var listView = args.object;
        listView.tableHeaderView = new searchBarModule.SearchBar();
    }
    \n

    Screen shot

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-screen-orientation":{"name":"nativescript-screen-orientation","version":"2.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nickykln/nativescript-google-analytics":{"name":"@nickykln/nativescript-google-analytics","version":"0.4.4","license":"Apache-2.0","readme":"

    Nativescript Google Analytics Plugin

    \n\n

    Watch the video

    \n

    \"Watch

    \n

    Release Notes

    \n

    0.4.3

    \n\n

    0.4.0

    \n\n

    0.3.5

    \n\n

    0.3.2

    \n\n

    0.3.0

    \n\n

    0.2.9

    \n\n

    0.2.8

    \n\n

    0.2.7

    \n\n

    0.2.6

    \n\n

    0.2.5

    \n\n

    0.2.3

    \n\n

    0.2.0

    \n\n

    0.1.9

    \n\n

    0.1.7

    \n\n

    0.1.5

    \n\n

    0.1.5

    \n\n

    0.1.4

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship":{"name":"@nstudio/nativescript-airship","version":"0.0.4","license":"Apache-2.0","readme":"

    @nstudio/nativescript-airship

    \n
    ns plugin add @nstudio/nativescript-airship
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-downloadmanager":{"name":"nativescript-downloadmanager","version":"0.1.0","license":"MIT","readme":"

    Nativescript DownloadManager

    \n

    DownloadManager is a library that allows downloading files from Nativescript in Android using the Android Download Manager. Why not use Http.getFile() ? Pretty much because as i see it it's pretty much broken if you want to download something thats not just a few kilobytes.

    \n

    Installing

    \n
      \n
    1. \n

      tns plugin add nativescript-downloadmanager

      \n
      2. \n
    2. \n

      Make sure the following permissions are in your android manifest

      \n
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
      <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
      <uses-permission android:name=\"android.permission.INTERNET\"/>
      \n
      3. \n
    \n

    Usage

    \n

    Usage is pretty much straightforward: This is a commented example on top of a simplified version of the default Hello world application (aka. just removed the tap count stuff and added a download method).

    \n

    TLDR: check the download method.

    \n
    import {Observable} from 'data/observable';
    // Import the class.
    import {DownloadManager} from 'nativescript-downloadmanager'

    export class HelloWorldModel extends Observable {

        private _message: string;

        constructor() {
            super();
        }

        public download() {
        \t// Instantiate a Download Manager. The way it's done (it uses a BroadcastReceiver), 
        \t// it'    s mean to be kept alive during all the application lifetime. But we can kill unsubscribe 
            let dm = new DownloadManager();
            // We download a file, in this example a 10mb test file. 
            // This is the Most simple version of doing it.
            // Aside from that there are optional parameters for. Directory (always inside android/data/yourapp/),
            // The file name, and title and description for the notification bar. By default it uses the file name 
            // as title, and no description.
            dm.downloadFile(\"http://cachefly.cachefly.net/10mb.test\", function(result,uri) {
                // result is a boolean, if the download was successful, it will return true
                console.log(result);
                // Uri in file:// format of the downloaded file.
                console.log(uri);
                // unregisterBroadcast is used to unregister the broadcast (For example if you just want to 
                // download a single file).
                dm.unregisterBroadcast();
            })
        }
    }
    \n

    Todo

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation":{"name":"tns-template-drawer-navigation","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-drawer-js --template tns-template-drawer-navigation
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-drawer-js --template nativescript-app-templates/packages/template-drawer-navigation
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a folder that is used for setting RadSideDrawer instance as an application root:

    \n\n

    RadSideDrawer has the following component structure:

    \n\n

    The template has the following blank page modules:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-payments":{"name":"nativescript-payments","version":"0.1.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-mqtt":{"name":"nativescript-ichi-mqtt","version":"0.1.3","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-mqtt/blob/master/LICENSE"},"readme":"

    nativescript-ichi-mqtt

    \n

    mqtt client for NativeScript.

    \n

    Supported platforms

    \n\n

    There is no support for iOS yet!

    \n

    Installing

    \n
    tns plugin add nativescript-ichi-mqtt
    \n

    Usage

    \n

    Here is a TypeScript example:

    \n
    import {MqttClient} from \"nativescript-ichi-mqtt\";

    // new Mqtt Client
     var mqttClient = new MqttClient(\"productKey\", \"deviceName\", \"deviceSecret\",
            \"serverUri\", \"subscriptionTopic\", \"publishTopic\");

    // LogLevel : 1 DEBUG, 2 INFO, 3 WARN, 4 ERROR
    mqttClient.setLogLevel(3);

    var stateListener = {
            onConnectFail: function(message) {
                console.log(\"stateListener onConnectFail: \", message);
            },
            onConnected: function() {
                console.log(\"stateListener onConnected\");
            },
            onDisconnect: function() {
                console.log(\"stateListener onDisconnect\");
            }
        }
    mqttClient.setConnectionStateListener(stateListener);

    var subscribeListener = {
            onSuccess: function(topic) {
                console.log(\"subscribeListener onSuccess: \", topic);
            },
            onFailed: function(topic, error) {
                console.log(\"subscribeListener onFailed: \", topic);
            },
            needUISafety: function() {
                console.log(\"subscribeListener needUISafety\");
                return true;
            }
        }
    mqttClient.setSubscribeListener(subscribeListener);

    var pushListener = {
            onCommand: function(topic, data) {
                console.log(\"pushListener onCommand: \", topic);
            },
            shouldHandle: function(topic) {
                console.log(\"pushListener shouldHandle\", topic);
                return true;
            }
        }
    mqttClient.setPushListener(pushListener);

    var callListener = {
            onSuccess: function(request, response) {
                console.log(\"callListener onSuccess: \");
            },
            onFailed: function(request, error) {
                console.log(\"callListener onFailed: \");
            },
            needUISafety: function() {
                console.log(\"callListener needUISafety\");
                return true;
            }
        }
    mqttClient.setCallListener(callListener);


    mqttClient.startListener();

    // mqttClient.subscribeTopic(\"subscribeTopic2\");
    // mqttClient.unSubscribeTopic(\"subscribeTopic\");

    mqttClient.publishMessage(\"publishMessage\", \"publishTopic2\");


    // mqttClient.stopListener();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkpreview":{"name":"nativescript-linkpreview","version":"0.0.1","license":"MIT","readme":"

    Develop a NativeScript plugin now (w/ TypeScript)

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. npm install -g typescript
      3. \n
    3. cd myplugin
      4. \n
    4. npm run postclone
      5. \n
    5. npm run setup
      6. \n
    6. Get to work.
      7. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-linkpreview
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n\n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation":{"name":"tns-template-tab-navigation","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-tab-js --template tns-template-tab-navigation
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-tab-navigation).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-tab-js --template nativescript-app-templates/packages/template-tab-navigation
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n\n

    The template has the following pages used for the tab content items:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-passportscanner-custom":{"name":"nativescript-passportscanner-custom","version":"1.0.5","license":"MIT","readme":"

    nativescript-passportscanner-custom

    \n

    Nativescript Password Scanner

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation-ts":{"name":"tns-template-tab-navigation-ts","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-tab-ts --template tns-template-tab-navigation-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-tab-ts --template nativescript-app-templates/packages/template-tab-navigation-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n\n

    The template has the following pages used for the tab content items:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-flashlight":{"name":"nativescript-flashlight","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/tjvantoll/nativescript-flashlight/blob/master/LICENSE"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsngdaftools":{"name":"nsngdaftools","version":"1.1.1","license":"GPL-3.0","readme":"

    NsNgDaFTools

    \n

    This extension adds 3 CLI programs useful\nfor NativeScript Angular projects.

    \n

    How to launch them

    \n

    Using relatively new versions of npm\nthe package npx is installed by default,\nso to execute the CLI utility x (even if\nonly local) npx x arguments... is\nsufficient.

    \n

    Utilities list

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kontaktio-v2":{"name":"nativescript-kontaktio-v2","version":"1.0.2","license":"ISC","readme":"

    nativescript-kontaktio

    \n

    NativeScript Plugin for Kontakt io Beacons

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-date-range-picker":{"name":"nativescript-date-range-picker","version":"0.1.3","license":"MIT","readme":"

    NativeScript Date range picker plugin

    \n

    An iOS plugin for choosing a date range from a calendar. This is built on top of native ios library by PeteC.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-date-range-picker
    \n

    This command automatically installs the necessary files, as well as stores nativescript-date-range-picker as a dependency in your project's package.json file.

    \n

    Examples

    \n

    The code below creates a date range picker in xml with text color for all the date labes as #AA0000 (~red) and selection color as #0000AA (~blue).

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:tools=\"nativescript-date-range-picker\">
      <StackLayout>
        <tools:DateRangePicker textColor=\"#AA0000\" selectionColor=\"#0000AA\" draggedTo=\"onUserDraggedTo\" />
      </StackLayout>
    </Page>
    \n

    The following code listen to drag events

    \n
    exports.onUserDraggedTo = function(eventData) {
        console.log(eventData.dayView);
    }
    \n

    Screen Shots

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-amap":{"name":"tns-amap","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-location":{"name":"nativescript-location","version":"0.1.3","license":"ISC","readme":"

    NativeScript location plugin

    \n

    A nativescript ios plugin to obtain location permission for ios 8 and above.

    \n

    Installation

    \n

    Run the following command from the root of your project

    \n
    $ tns plugin add nativescript-location
    \n

    This command automatically install the necessary ios files from the cocoapod github repository and adds as a dependency in your package.json file

    \n

    Examples

    \n

    There is an sample application at the folder "Sample". To run it (assuming you have nativescript plugin installed globally)

    \n
    $ sudo npm install typescript -g
    $ tsc
    $ cd Example
    $ tns plugin add ../
    \n

    Run the application from your mac onto your iOS simulator by typing

    \n
    $ tns emulate ios --device=iPhone\\ 5s
    \n

    Following code from Sample/app/main.js shows a way to listen to location permission changes

    \n

    var nativeScriptLocationPermissionModule = require(\"nativescript-location\");
    var locationModule = require(\"location\");
    function pageLoaded(args) {
        var page = args.object;
        page.bindingContext = vmModule.mainViewModel;
        var locationManager = new nativeScriptLocationPermissionModule.LocationManager();
        locationManager.requestLocation().then(function(successResponse){
            locationModule.getLocation().then(function(location) {
    \t\t\t//do something with the location obtained.
    \t\t});
        },function(reason){
            console.log(\"Failed \"+reason);
        });
    }
    exports.pageLoaded = pageLoaded;
    \n\n

    Modify key NSLocationWhenInUseUsageDescription key in Info.plist to show your own message instead of "Need location when in use".

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@spryteam/nativescript-oauth2":{"name":"@spryteam/nativescript-oauth2","version":"1.6.0","license":"MIT","readme":"

    OAuth 2 Plugin for NativeScript

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Library for interacting with OAuth 2.0 in NativeScript applications that provides simplified direct client access with a OAuth providers that support the OAuth 2.0 protocol such as Microsoft, Facebook, and Google, but not limited to any login providers, and even allows you to plug in your own. This library doesn't use any native libraries and relies only on what comes in the box - making it really lightweight.

    \n

    NOTE: This is the new version of the old nativescript-oauth plugin

    \n\"NativeScript\n
    \n

    Tested against Microsoft, Facebook, and Google providers. More providers are coming soon.\nThanks to all those who contributed providers to the old plugin - please do the same for this one.

    \n

    Introduction

    \n

    Some providers are OpenId certified (Google, Microsoft) so they are a bit more secure in that they don't have to store the client secret on the client (which can always be pwned by folks that are savvy enough to get into your app). Google doesn't allow client secrets to be passed and requires an out-of-app browser to be used for auth. This plugin supports this method for any providers that require it, but there are a few extra configuration steps that have to be performed to get this working, more on that below.

    \n

    Facebook doesn't support OpenId and works with the in-app WebView implementation of the auth process. So while this requires less configuration, there is an slight security risk of keeping your client secret in the app. If you have strict security requirements, you have to implement Facebook login by using your backend as a proxy between this plugin and Facebook auth servers.

    \n

    Prerequisites

    \n

    Office 365 / Microsoft

    \n

    For logging in with your Office 365 account, you should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

    \n

    Keep an eye out on my YouTube channel for a video on how to set up Facebook with with plugin.

    \n

    Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

    \n
      \n
    1. Click the "Add Platform" button and select "Mobile application"
      2. \n
    2. Copy the "Client Id" GUID from the Mobile Application section.
      3. \n
    3. Click "Save" at the bottom.
      4. \n
    \n

    Microsoft login will work either with the in-app webview method, in which case your redirectUri config property can be set to urn:ietf:wg:oauth:2.0:oob. Or it can use the more secure method that doesn't require a client secret, but it will need to have a custom URL scheme registered (see below).

    \n

    Facebook account

    \n

    For logging in with your Facebook account, you should have a Facebook developer account. If you don't have one yet, you can get one here.

    \n

    Keep an eye out on my YouTube channel for a video on how to set up Facebook with with plugin.

    \n

    Register your mobile app by following the wizard under "My Apps" -> "Add a new app".

    \n
      \n
    1. Go to https://developers.facebook.com/apps and create a new app
      2. \n
    2. If you see the Product Setup page, select Facebook login
      3. \n
    3. Make sure to turn ON the option "Embedded Browser OAuth Login"
      4. \n
    4. Click Save
      5. \n
    5. Copy the App ID and the App Secret from the Dashboard page to bootstrap your app. These will be the ClientID and ClientSecret respectively.
      6. \n
    \n

    Google account

    \n

    For logging in with your Google account, you should have a Google developer account. If you don't have one yet, you can get one here.

    \n

    Keep an eye out on my YouTube channel for a video on how to set up Google with this plugin.

    \n

    Register your mobile app by following the wizard in the Developer Console.\n(more info coming soon)

    \n

    Google login will only work with the out-of-app browser. You must register a custom URL scheme for your app (see below).

    \n

    LinkedIn Account

    \n

    For logging in with your LinkedIn account, you should have a LinkedIn developer account. If you don't have one yet, you can get one here.

    \n
      \n
    1. Click on My Apps and login with your LinkedIn credentials or click on Join Now to create a new account.
      2. \n
    2. Once logged in click on Create Application.
      3. \n
    3. Fill out all fields with the app's information and Click submit.
      4. \n
    4. If everything goes well you should get your app's authentication keys which consists of a client id and a client secret.
      5. \n
    5. In this page, make sure to add an Authorized Redirect URL. (This can be any url starting with http:// or https://).
      6. \n
    6. Copy the Authentication Keys and the Authorized Redirect URL.
      7. \n
    \n

    Setup

    \n

    Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    npm install nativescript-oauth2 --save
    \n

    Usage

    \n

    If you want a quickstart, you can start with one of two demo apps:

    \n\n

    Bootstrapping

    \n

    When your app starts up, you'll have to register one or more auth providers to use with the nativescript-oauth2 plugin. You'll use the code below to register the providers.

    \n

    NativeScript Core

    \n

    If you are using NativeScript Core, open app.ts and add the following registration code before application.start();

    \n

    NativeScript with Angular

    \n

    If you are using Angular AND you are NOT using <page-router-outlet, you'll need to enable frames in order for the plugin to open up a new native page with a login screen. To do that open your main.ts file. You will need to explicitly use frames, so make sure to pass an options object to platformNativeScriptDynamic with the createFrameOnBootstrap flag set to true, like this.

    \n
    // main.ts
    platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(
      AppModule
    );
    \n

    You don't need to do this if you already have <page-router-outlet> in your component.

    \n

    then add add the registration code below somewhere before you call login, most likely in your Auth service, as in the demo-angular project.

    \n

    NativeScript-Vue

    \n

    If you are using NativeScript-Vue, then you'll have to add this registration code somewhere when your app bootstraps. A Vue demo app is included with the GitHub repo.

    \n
    // This is the provider registration example code

    import { configureTnsOAuth } from \"nativescript-oauth2\";

    import {
      TnsOaProvider,
      TnsOaProviderOptionsFacebook,
      TnsOaProviderFacebook,
      TnsOaProviderOptionsGoogle,
      TnsOaProviderGoogle,
      TnsOaProviderOptionsMicrosoft,
      TnsOaProviderMicrosoft
    } from \"nativescript-oauth2/providers\";

    function configureOAuthProviderGoogle(): TnsOaProvider {
      const googleProviderOptions: TnsOaProviderOptionsGoogle = {
        openIdSupport: \"oid-full\",
        clientId:
          \"932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb.apps.googleusercontent.com\",
        redirectUri:
          \"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb:/auth\",
        urlScheme:
          \"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb\",
        scopes: [\"email\"]
      };
      const googleProvider = new TnsOaProviderGoogle(googleProviderOptions);
      return googleProvider;
    }

    function configureOAuthProviderFacebook(): TnsOaProvider {
      const facebookProviderOptions: TnsOaProviderOptionsFacebook = {
        openIdSupport: \"oid-none\",
        clientId: \"691208554415641\",
        clientSecret: \"d8725ac416fa1bb1917ccffd1670e3c7\",
        redirectUri: \"https://www.facebook.com/connect/login_success.html\",
        scopes: [\"email\"]
      };
      const facebookProvider = new TnsOaProviderFacebook(facebookProviderOptions);
      return facebookProvider;
    }

    configureTnsOAuth([
      configureOAuthProviderGoogle(),
      configureOAuthProviderFacebook()
    ]);
    \n

    The plugin comes with helpful interfaces that you can implement for the providers as well as the options that can be passed into each provider's constructor. You don't have to use these interfaces, but they are helpful guides. The code above shows these interfaces.

    \n

    The last call to configureTnsOAuth() takes an array of providers and registers them as available for use.

    \n

    Logging in

    \n

    When you're ready to login, or as a response to a tap event on a login button, you can create a new instance of the TnsOAuthClient and call loginWithCompletion() on the instance, passing in the provider you want to login with. The provider is of the type TnsOaProviderType, or it can be a string 'google', 'facebook', 'microsoft', etc.

    \n
    import { TnsOAuthClient, ITnsOAuthTokenResult } from \"nativescript-oauth2\";

    const client = new TnsOAuthClient(providerType);

    client.loginWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
      if (error) {
        console.error(\"back to main page with error: \");
        console.error(error);
      } else {
        console.log(\"back to main page with access token: \");
        console.log(tokenResult);
      }
    });
    \n

    After login is done, the completion handler will be called with the results.

    \n

    Refreshing the Access Token

    \n

    Once you have logged in, you can call refreshTokenWithCompletion() on your TnsOAuthClient instance to attempt to refresh your access token. In order to do this, the following criteria must be met:

    \n\n

    If that criteria is met, then you can refresh the token like so:

    \n
    import { TnsOAuthClient, ITnsOAuthTokenResult } from \"nativescript-oauth2\";

    ...

    client.refreshTokenWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
      if (error) {
        console.error(\"Unable to refresh token with error: \");
        console.error(error);
      } else {
        console.log(\"Successfully refreshed access token: \");
        console.log(tokenResult);
      }
    });
    \n

    Creating a custom provider

    \n

    If you don't see an auth provider that you need, you can just implement your own - see the demo-custom-provider project in the GitHub repo for an example on how to do this.

    \n

    You need to implement two interfaces: provider options that suits your provider (more below), and TnsOaProvider for the provider endpoint details.

    \n

    Provider Options

    \n

    Implement your provider's options by extending the TnsOaUnsafeProviderOptions interface if your provider is not Open Id compliant, or the TnsOaOpenIdProviderOptions interface if your provider is Open Id compliant.

    \n
    \n

    Note: the interface is named with the word 'unsafe' in the name because non-open id compliant providers (like Facebook) usually make you use a client secret to send to the provider in exchange for the token. Storing the secret somewhere other than the client app is recommended (like a proxy), but most people don't do this and just store the secret with the app - thus unsafe.

    \n
    \n
    //Provider options example

    export interface TnsOaMyCustomProviderOptions extends TnsOaUnsafeProviderOptions { }
    \n

    TnsOaProvider

    \n

    Then you can create your provider class by implementing the TnsOaProvider interface:

    \n
    //Provider implementation example

    export class TnsOaProviderMyCustomProvider implements TnsOaProvider {
        public options: TnsOaProviderOptions;
        public openIdSupport: OpenIdSupportNone = \"oid-none\";
        public providerType = \"myCustomProvider\";
        public authority = \"https://www.facebook.com/v3.1/dialog\";
        public tokenEndpointBase = \"https://graph.facebook.com\";
        public authorizeEndpoint = \"/oauth\";
        public tokenEndpoint = \"/v3.1/oauth/access_token\";
        public cookieDomains = [\"facebook.com\"];

        constructor(options: TnsOaMyCustomProviderOptions) {
            this.options = options;
        }

        public parseTokenResult(jsonData): ITnsOAuthTokenResult {
            return jsonData;
        }
    }
    \n

    Finally, you'll use your provider when you register it with the app.

    \n
    // app.ts

    import * as application from \"tns-core-modules/application\";
    import { configureOAuthProviders } from \"./auth-service\";
    configureOAuthProviders();
    application.run({ moduleName: \"app-root\" });
    \n
    // auth-service.ts

    export function configureOAuthProviders() {
      const myCustomProvider = configureOAuthProviderMyCustomProvider();
      configureTnsOAuth([myCustomProvider]);
    }
    function configureOAuthProviderMyCustomProvider(): TnsOaProvider {
      const facebookProviderOptions: TnsOaMyCustomProviderOptions = {
        openIdSupport: \"oid-none\",
        clientId: \"<your client/app id>\",
        clientSecret: \"<your client secret>\",
        redirectUri: \"<redirect Uri>\",
        scopes: [\"email\"],
        customQueryParams: {
          foo: \"bar\"
        }
      };
      const facebookProvider = new TnsOaProviderMyCustomProvider(facebookProviderOptions);
      return facebookProvider;
    }
    \n

    Custom URL Scheme

    \n

    If you are using an OpenId certified provider and need to use an out-of-app browser to authenticate, then you must register a custom URL scheme with your app.\nThis is easy to do with NativeScript. The first step is to register your custom scheme with your provider when you register your app.

    \n

    Android

    \n

    To register a custom URL scheme for Android, open your Android app resources, which are in this path: app/App_Resources/Android/src/main/AndroidManifest.xml.\nThe AndroidManifest.xml file used to be right in the Android folder, but now it's been moved down a bit. It's still the same file though.

    \n

    Find the <activity> section named com.tns.NativeScriptActivity and add the attribute android:launchMode="singleTask" (or singleTop).\nThen inside the activity add a new <intent-filter> section with your custom url scheme(s).

    \n

    Here is an example of the entire <activity> section:

    \n
    \t\t<activity android:name=\"com.tns.NativeScriptActivity\" android:launchMode=\"singleTask\" android:label=\"@string/title_activity_kimera\" android:configChanges=\"keyboardHidden|orientation|screenSize\" android:theme=\"@style/LaunchScreenTheme\">

    \t\t\t<meta-data android:name=\"SET_THEME_ON_LAUNCH\" android:resource=\"@style/AppTheme\" />

    \t\t\t<intent-filter>
    \t\t\t\t<action android:name=\"android.intent.action.MAIN\" />
    \t\t\t\t<category android:name=\"android.intent.category.LAUNCHER\" />
    \t\t\t</intent-filter>

    \t\t\t<intent-filter>
    \t\t\t\t<action android:name=\"android.intent.action.VIEW\"/>
    \t\t\t\t<category android:name=\"android.intent.category.DEFAULT\" />
    \t\t\t\t<category android:name=\"android.intent.category.BROWSABLE\" />
    \t\t\t\t<!-- Custom URL Schemes -->
    \t\t\t\t<data android:scheme=\"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb\"/>
    \t\t\t\t<data android:scheme=\"msalf376fa87-64a9-89a1-8b56-e0d48fc08107\"/>
    \t\t\t</intent-filter>

    \t\t</activity>
    \n

    Notice in the config above, I've registered TWO custom URL schemes for my app - this is the <data> element with the path and scheme attributes.

    \n

    iOS

    \n

    To register a custom URL scheme for iOS, open your iOS app resources, which are in this path: app/App_Resources/iOS/Info.plist. In the key/value dictionary in this file, add a key for CFBundleURLTypes, if it's not already there. And add the value for that key as an array. The entire addition is listed here:

    \n
    \t<key>CFBundleURLTypes</key>
    \t<array>
    \t\t<dict>
    \t\t\t<key>CFBundleTypeRole</key>
    \t\t\t<string>Editor</string>
    \t\t\t<key>CFBundleURLName</key>
    \t\t\t<string>org.nativescript.testnsazmobaplugin</string>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>msalf376fa87-64a9-49a1-8b57-e0d48fc08107</string>
    \t\t\t\t<string>fb691208554415647</string>
    \t\t\t\t<string>com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb</string>
    \t\t\t</array>
    \t\t</dict>
    \t</array>
    \n

    Notice that for the key CFBundleURLSchemes, there are three string listed as custom URL schemes, all of them will open your app.

    \n

    Contributing

    \n
      \n
    1. Follow the plugin authoring guidelines in the NativeScript docs.
      2. \n
    2. Use the Pull Request Template that can be found here to submit the PR.
      3. \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-version-ssi":{"name":"nativescript-dev-version-ssi","version":"0.1.1","license":"ISC","readme":"

    Nativescript hook plugin to maintain native app version

    \n

    This plugin just takes the nativescript.version property from package.json and puts on the specific platform resources: AndroidManifest.xml file for the Android sources, and Info.plist for iOS sources.

    \n

    How to use

    \n
    $ tns plugin add nativescript-dev-version-ssi
    \n

    This forked version of nativescript-dev-version will expand the version number into a version code that increments properly. XYYYZZZZ is generated as the version code from version X.Y.Z. For example, 1.2.3 becomes 10020003

    \n

    The above command installs this module and installs the necessary NativeScript hooks.

    \n

    Then, specify and maintain the desired release version on the package.json file under the nativescript.version property, for example:

    \n
    {
      \"nativescript\": {
        \"id\": \"org.nativescript.MySampleApp\",
        \"version\": \"1.2.3\"
        ...
      },
      ...
    }
    \n

    When running tns prepare ... the hooks will take care of the native resources, and your app will get the 1.2.3 version number!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-teststudio":{"name":"nativescript-teststudio","version":"1.1.5","license":"SEE LICENSE IN LICENSE.md","readme":"

    nativescript-teststudio

    \n

    This plugin provides support for nativescript applications testing with Progress Test Studio.

    \n

    #NativeScript Testing Plugin\nEasily instrument your NativeScript app to make it testable with Test Studio. Leverage a specifically built for the purpose plugin to extend your app with a few quick commands.

    \n

    ##Test Any NativeScript App

    \n

    Create automated tests for your NativeScript apps and run them against real devices or simulators without a single line of code. Whether you are using Angular, JavaScript or TypeScript, Test Studio provides first-class support for your truly native mobile apps.

    \n

    ##Easily Update Tests

    \n

    Test Studio will help you reduce test maintenance too. Test elements are stored, shared and referenced from a central repository. Updating a test element across multiple tests now takes just a click or two.

    \n

    ##Code Your Own Steps

    \n

    Easily collaborate with testers. Code more complex testing scenarios and test step Code more complex testing scenarios and test steps that can be easily added to your testers’ recorded tests.

    \n

    ##Run Tests Around The Clock

    \n

    Use the Test Studio Runner to plug your tests into your continuous integration process to empower testers to schedule their mobile test lists and run them 24/7.

    \n

    ##Test on Hundreds of Devices

    \n

    Record and test multiple gestures such as scroll, zoom, swipe and pinch, then run your test across 500+ unique Android and iOS devices. Get a detailed online report accompanied with a screenshot of every single test step you've created.

    \n

    Installation

    \n
    tns plugin add nativescript-teststudio\n
    \n

    For more information on configuring your NativeScript app check documentation pages.

    \n

    Supported Platforms

    \n

    NativeScript v.2.0.0+

    \n

    ###NOTE:\nNote that this plugin should only be used\tin debug builds, and should NOT be deployed with production apps.

    \n

    License

    \n

    Test Studio plugin for NativeScript applications testing is licensed under the Telerik End User License Agreement for Test Studio.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-multi-drawer-update":{"name":"nativescript-vue-multi-drawer-update","version":"0.0.4","license":"MIT","readme":"

    NativeScript-Vue Multi Drawer

    \n

    A plugin which provides a drawer component that supports multiple drawers.

    \n\n

    All drawers are optional, and can be configured individually.

    \n

    Features:

    \n\n

    Quick Start

    \n
    $ npm i --save nativescript-vue-multi-drawer
    \n
    // main.js
    import Vue from 'nativescript-vue'
    ...
    + import MultiDrawer from 'nativescript-vue-multi-drawer'
    + Vue.use(MultiDrawer)
    \n

    Optionally set default options by passing options when installing the plugin:

    \n
    Vue.use(MultiDrawer, { 
      // override any option here
      // for example enable debug mode
      debug: true
    })
    \n

    For the available options check the source of defaultOptions

    \n
    <MultiDrawer>
      <StackLayout slot=\"left\">
        <Label text=\"Im in the left drawer\" />  
      </StackLayout>
      <StackLayout slot=\"right\">
        <Label text=\"Im in the right drawer\" />  
      </StackLayout>
      <StackLayout slot=\"top\">
        <Label text=\"Im in the top drawer\" />  
      </StackLayout>
      <StackLayout slot=\"bottom\">
        <Label text=\"Im in the bottom drawer\" />  
      </StackLayout>
      
      <Frame /> <!-- main content goes into the default slot -->
    </MultiDrawer>
    \n

    The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

    \n

    Opening a drawer from code

    \n

    Assign a ref to the Drawer component

    \n
    <MultiDrawer ref=\"drawer\" />
    \n

    And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

    \n

    Using v-model to toggle the drawer

    \n

    The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

    \n
    <MultiDrawer v-model=\"drawerState\" />
    \n
    export default {
      data() {
        return {
          drawerState: false // closed
        }
      },
      
      methods: {
        doStuff() {
          // do stuff
          this.drawerState = 'left' // this will open the left drawer
        }
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation-ts":{"name":"tns-template-drawer-navigation-ts","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-drawer-ts --template tns-template-drawer-navigation-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-drawer-ts --template nativescript-app-templates/packages/template-drawer-navigation-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a folder that is used for setting RadSideDrawer instance as an application root:

    \n\n

    RadSideDrawer has the following component structure:

    \n\n

    The template has the following blank page modules:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/cfalert":{"name":"@carployee/cfalert","version":"1.0.0","license":"Apache-2.0","readme":"

    @carployee/cfalert

    \n
    ns plugin add @carployee/cfalert
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fs-noclear":{"name":"nativescript-fs-noclear","version":"1.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-common":{"name":"nativescript-plugin-firebase-common","version":"0.10.11","license":"MIT","readme":"

    NativeScript Firebase Common plugin

    \n

    How this plugin differs from nativescript-plugin-firebase:

    \n

    This plugin aims to provide a common interface for firebase instances that can be easily used across Android, iOS, and the Web.\nThis means that the API surface should be limited as much as possible and should try to mimic the\ndetail of the native APIs as much as possible.

    \n

    As it currently stands, the nativescript-plugin-firebase project does not offer an API that is similar to any\nof the Firebase SDK APIs and offers high-level functionality at the expense of composability.

    \n

    For this project right now, the common API is quite limited, but can easily be expanded to encapsulate additional features.

    \n

    Use when

    \n\n

    Prerequisites

    \n

    NativeScript 1.3.0 (tns --version) is required for smooth installation, so please upgrade if you need to.

    \n

    Head on over to firebase.com and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via a URL\nlike https://resplendent-fire-4211.firebaseio.com/.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-firebase-common
    \n

    Usage

    \n

    createNew

    \n
      var Firebase = require(\"nativescript-plugin-firebase-common\").Firebase;

      var firebase = Firebase.createNew({
        url: 'https://resplendent-fire-4211.firebaseio.com'
        // persist: false // turn off offline disk persistence
      });
    \n

    All further examples assume firebase has been required.

    \n

    child

    \n

    Gets a firebase reference for the location at the specified relative path.

    \n
        var categories = firebase.child(\"categories\");
    \n

    set

    \n

    Replaces the data at the current firebase location.\nAnalogous to set() in the Firebase JavaScript SDK.

    \n

      // to store a JSON object
      var promise = firebase.set(
          {'foo':'bar'}
      );

      // to store an array of JSON objects
      var otherPromise = firebase.set(
          [
            {name: 'Telerik', country: 'Bulgaria'},
            {name: 'Google', country: 'USA'}
          ]
      );
    \n

    push

    \n

    This function will store the given object as a new child at the current location:

    \n
      var promise = firebase.push(
          {
            'first': 'Eddy',
            'last': 'Verbruggen',
            'birthYear': 1977,
            'isMale': true,
            'address': {
              'street': 'foostreet',
              'number': 123
            }
          }
      );
    \n

    on

    \n

    To listen for changes in your database you can pass in a listener callback function.\nThe possible event types are:

    \n\n

    The plugin will take care of serializing native data structures to JSON data.

    \n
      var onChildAdded = function(result) {
        console.log(\"Key: \" + result.key());
        console.log(\"Value: \" + JSON.stringify(result.val()));
      };

      var users = firebase.child(\"users\");

      // listen to new \"children\" in the /users path
      var cancellationToken = users.on(\"child_added\", onChildAdded);
      
      // to disable the event listener:
      users.off(\"child_added\", cancellationToken);
    \n

    This method and the related off() method have been designed to be analogous to the Firebase JavaScript SDK versions.

    \n

    remove

    \n

    You can remove the entire database content by omitting the param,\nbut if you only want to wipe everything at '/users', do this:

    \n
      var promise = firebase.remove(\"/users\");
    \n

    login

    \n

    v 1.1.0 of this plugin adds the capability to log your users in. Either anonymously or by email and password.\nYou need to add support for those features in your Firebase instance at the 'Login & Auth' tab.

    \n

    You can expect more login mechanisms to be added in the future.

    \n

    Anonymous login

    \n
      firebase.login({
        // note that you need to enable anonymous login in your firebase instance
        type: firebase.loginType.ANONYMOUS
      }).then(
          function (result) {
            // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token
            JSON.stringify(result);
          },
          function (errorMessage) {
            console.log(errorMessage);
          }
      )
    \n

    Password login

    \n
      firebase.login({
          // note that you need to enable email-password login in your firebase instance
        type: firebase.loginType.PASSWORD,
        email: 'useraccount@provider.com',
        password: 'theirpassword'
      }).then(
          function (result) {
            // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token
            JSON.stringify(result);
          },
          function (errorMessage) {
            console.log(errorMessage);
          }
      )
    \n

    Creating a Password account

    \n
      firebase.createUser({
        email: 'eddyverbruggen@gmail.com',
        password: 'firebase'
      }).then(
          function (uid) {
            dialogs.alert({
              title: \"User created\",
              message: \"uid: \" + uid,
              okButtonText: \"Nice!\"
            })
          },
          function (errorMessage) {
            dialogs.alert({
              title: \"No user created\",
              message: errorMessage,
              okButtonText: \"OK, got it\"
            })
          }
      )
    \n

    logout

    \n

    Shouldn't be more complicated than:

    \n
      firebase.logout();
    \n

    Credits

    \n

    The starting point for this plugin was this great Gist by John Bristowe.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-svg-hw":{"name":"nativescript-svg-hw","version":"1.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-firebase-env":{"name":"@altabsrl/nativescript-firebase-env","version":"0.0.7","license":"Apache-2.0","readme":"

    Nativescript Firebase Env

    \n

    Separate environment for nativescript-firebase

    \n

    Setup

    \n

    For iOS you can put your GoogleService-Info.plist.dev and GoogleService-Info.plist.prod at your project root.\nFor Android you can put your google-services.json.dev and google-services.json.prod at your project root.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-updated":{"name":"nativescript-plugin-firebase-updated","version":"2210.4.0","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    \"Firebase\"/

    \n
    \n

    Plugin version 10.0.0 works with NativeScript 5.2+, and 6.1+ is recommended. Using an older version? Stick to plugin version < 10.

    \n
    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n\n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n\n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n\n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timedatepicker-renet":{"name":"nativescript-timedatepicker-renet","version":"1.2.1","license":{"type":"","url":"https://github.com/leocaseiro/nativescript-timedatepicker/blob/master/LICENSE"},"readme":"

    nativescript-timedatepicker

    \n

    A NativeScript plugin providing native date and time pickers for Android and iOS.

    \n

    ##Android side\n\"alt\n##iOS side\n\"alt

    \n

    Usage

    \n

    //Import the plugin
    import * as TimeDatePicker from 'nativescript-timedatepicker';

    //Create a callback function
    let mCallback =  ((result) => {
      if (result) {
        alert(\"the time is \"+result);
      }
    });

    //Initialize the PickerManager (.init(yourCallback, title, initialDate))
    TimeDatePicker.init(mCallback,null,null);

    //Show the dialog
    TimeDatePicker.showDatePickerDialog();
    \n

    For more examples of usage see the demo main-view-model.ts.

    \n

    ##Credits\nThis plugin abstract two native libraries, hence here are the project and deserved merit to the creators.

    \n

    For iOS https://github.com/hackiftekhar/IQActionSheetPickerView
    \nFor Android https://github.com/CiTuX/datetimepicker

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pereirax/ns-twilio-video":{"name":"@pereirax/ns-twilio-video","version":"1.0.10","license":"Apache-2.0","readme":"

    @pereirax/ns-twilio-video

    \n
    ns plugin add @pereirax/ns-twilio-video
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-l":{"name":"nativescript-l","version":"4.2.3","license":"MIT","readme":"

    nativescript-l

    \n

    \"npm\"\n\"npm\"

    \n

    This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is a direct fork of nativescript-localize

    \n

    Differences

    \n

    This plugin was created to have a different behavior from nativescript-localize:

    \n\n

    Credits

    \n

    A lot of thanks goes out to Eddy Verbruggen and Ludovic Fabrèges (@lfabreges) for developing and maintaining nativescript-localize.

    \n

    Table of contents

    \n\n

    Installation

    \n
    tns plugin add nativescript-l
    \n

    Usage

    \n

    Create a folder i18n in the app folder with the following structure:

    \n
    app
      | i18n
          | en.json           <-- english language
          | fr.default.json   <-- french language (default)
          | es.js
    \n

    You need to set the default langage and make sure it contains\nthe application name to avoid any error.

    \n

    Angular

    \n

    app.module.ts

    \n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptLocalizeModule } from \"nativescript-l/angular\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [AppComponent],
      bootstrap: [AppComponent],
      imports: [
        NativeScriptModule,
        NativeScriptLocalizeModule
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    export class AppModule { }
    \n

    Template

    \n
    <Label text=\"{{ 'Hello world !' | L }}\"/>
    <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
    \n

    Script

    \n
    import { localize } from \"nativescript-l\";

    console.log(localize(\"Hello world !\"));
    \n

    Javascript / XML

    \n

    app.js

    \n
    const application = require(\"application\");
    const localize = require(\"nativescript-l\");
    application.setResources({ L: localize.l });
    \n

    Template

    \n
    <Label text=\"{{ L('Hello world !') }}\"/>
    <Label text=\"{{ L('I am %s', 'user name') }}\"/>
    \n

    Script

    \n
    const localize = require(\"nativescript-l\");

    console.log(localize(\"Hello world !\"));
    \n

    Quirks

    \n

    ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

    \n
      const page = args.object;
      page.bindingContext = new Observable();
    \n

    Vue

    \n

    app.js

    \n
    import { l } from \"nativescript-l\";

    Vue.filter(\"L\", l);
    \n

    Template

    \n
    <Label :text=\"'Hello world !'|L\"></Label>
    <Label :text=\"'I am %s'|L('user name')\"></Label>
    \n

    File format

    \n

    Each file is imported using require, use the file format of your choice:

    \n

    JSON

    \n
    {
      \"app.name\": \"My app\",
      \"ios.info.plist\": {
        \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      },
      \"user\": {
        \"name\": \"user.name\",
        \"email\": \"user.email\"
      },
      \"array\": [
        \"split the translation into \",
        \"multiples lines\"
      ],
      \"sprintf\": \"format me %s\",
      \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
    }
    \n

    Javascript

    \n
    const i18n = {
      \"app.name\": \"My app\"
    };

    module.exports = i18n;
    \n

    Frequently asked questions

    \n

    How to set the default language?

    \n

    Add the .default extension to the default language file to set it as the fallback language:

    \n
    fr.default.json
    \n

    How to localize the application name?

    \n

    The app.name key is used to localize the application name:

    \n
    {
      \"app.name\": \"My app\"
    }
    \n

    How to localize iOS properties?

    \n

    Keys starting with ios.info.plist. are used to localize iOS properties:

    \n
    {
      \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    }
    \n

    How to change the language dynamically at runtime?

    \n

    Seeing this module now uses JSON objects. Overriding consist of 3 steps:

    \n\n
    import { overrideLocaleNative } from \"nativescript-l/localize\";
    const localeOverriddenSuccessfully = overrideLocaleNative(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n
    \n

    Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

    \n
    \n
    android {

      // there maybe other code here //

      bundle {
        language {
          enableSplit = false
        }
      }
    }
    \n
    \n

    Tip: you can get the default language on user's phone by using this

    \n
    \n
    import { device } from '@nativescript/core/platform';

    console.log(\"user's language is\", device.language.split('-')[0]);
    \n
    \n

    Tip: overrideLocaleNative method stores the language in a special key in app-settings,\nyou can access it like this,

    \n
    \n
    import { getString } from '@nativescript/core/application-settings'; 

    console.log(getString('__app__language__')); // only available after the first time you use overrideLocaleNative(langName);
    \n

    Troubleshooting

    \n

    The angular localization pipe does not work when in a modal context

    \n

    As a workaround, you can trigger a change detection from within your component constructor:

    \n
    constructor(
      private readonly params: ModalDialogParams,
      private readonly changeDetectorRef: ChangeDetectorRef,
    ) {
      setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"crank-native":{"name":"crank-native","version":"0.7.0","license":"MIT","readme":"

    Crank Native

    \n
    \n

    🔧🤖

    \n

    There is no logo yet

    \n
    \n

    \n \"npm\n \n \n \n \n \n \n

    \n

    Crank Native is a crank.js custom renderer for apps hosted on iOS and Android, based on NativeScript. In other words, it's a library that allows you to write native mobile apps using Crank.

    \n

    Setup

    \n
    # Make sure that you have `tns` (the NativeScript CLI) installed:
    #   https://docs.nativescript.org/start/quick-setup

    tns create myApp --template tns-template-blank-crank

    cd myApp
    npm install

    tns preview --no-hmr
    # or
    tns run ios --no-hmr
    # or
    tns run android --no-hmr

    # And to debug in Google Chrome:
    tns debug ios --no-hmr --debug-brk
    \n

    Documentation

    \n

    Nothing yet. It's based on React NativeScript, so you can read the React NativeScript docs for now. You can also read the NativeScript Core docs, which are equally applicable.

    \n

    The main difference from React NativeScript is that, while RNS component names have the format <$ContentView> (they are class components), Crank Native elements have the format <contentView> (they are JSX intrinsic elements).

    \n

    Sample app

    \n

    After initialising the sample app, you'll see the following simple view, renderered by this code app/components/AppContainer.tsx:

    \n\n \n \n \n \n \n
    \n \n
    \n

    The code for setting styles is somewhat verbose at present, but I'll be improving these things in time.

    \n

    Try without setting up your desktop environment (like an Expo Snack)

    \n

    I've hacked together an experimental NativeScript Playground template pinned at versions crank-native@0.6.0 and crank@0.1.0. You can try it out by scanning a QR code in the NativeScript Playground app, which will open it in the NativeScript Preview app.

    \n

    Note: Although this does run on iOS, I expect that it doesn't on Android, as the Android version of NativeScript Playground doesn't support the node module resolution trick I'm using to supply the Crank Native dependencies.

    \n

    Be warned that the NativeScript core team do not (yet) officially support Crank Native, and so this NativeScript Playground boilerplate is explicitly not representative of the full potential of either Crank or Crank Native. Some things are very likely to be broken in it (e.g. I would be surprised if async/await and generators work, and that's most of the essence of Crank).

    \n

    But at the very least, you can get a picture for the potential of the framework for now without having to set up a desktop environment.

    \n

    About Crank

    \n
    \n

    Write JSX-driven components with functions, promises and generators.

    \n

    Documentation is available at https://crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.

    \n
    \n

    Completed so far

    \n\n

    Roadmap 🛣

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fiftoine/loopback-sdk-builder":{"name":"@fiftoine/loopback-sdk-builder","version":"2.1.0-rc.13.3","license":"MIT","readme":"

    \"npm \"Build \"dependencies\"

    \n

    \"LoopBack

    \n

    LoopBack SDK Builder

    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Features

    \n

    LINK TO FEATURES

    \n

    FireLoop API (NEW)

    \n

    Are you willing to build pure and modern Real-Time applications?? Then CHECK THIS OUT

    \n

    \"FireLoop.io\"

    \n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-fetch":{"name":"nativescript-background-fetch","version":"1.2.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dschewchenko/nativescript-svg":{"name":"@dschewchenko/nativescript-svg","version":"1.0.3","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@quadrant2/keyword-recognizer":{"name":"@quadrant2/keyword-recognizer","version":"1.0.5","license":"Apache-2.0","readme":"

    @quadrant2/keyword-recognizer

    \n
    ns plugin add @quadrant2/keyword-recognizer
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nswitfy/jitsi-meet":{"name":"@nswitfy/jitsi-meet","version":"8.0.0-beta","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pointzi":{"name":"nativescript-pointzi","version":"0.1.0","license":"Apache-2.0","readme":"

    nativescript-pointzi

    \n

    Prerequisites / Requirements

    \n

    Head on over to https://dashboard.pointzi.com/ and sign up for an account.

    \n

    Installation

    \n

    Follow the instructions on https://dashboard.pointzi.com/setting to install Pointzi on your NativeScript app.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"local-file-encrypto":{"name":"local-file-encrypto","version":"1.0.9","license":"MIT","readme":"

    @my-plugins-scope/encrypto

    \n
    ns plugin add @my-plugins-scope/encrypto
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-windowed-modal":{"name":"@bigin/ns-windowed-modal","version":"7.0.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-comments-sw":{"name":"nativescript-comments-sw","version":"1.1.16","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-utils":{"name":"nativescript-utils","version":"1.0.83","license":"MIT","readme":"

    NativeScript Utils

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-share-plugin":{"name":"nativescript-wechat-share-plugin","version":"0.0.1","license":"MIT","readme":"

    Nativescript-wechat-share-plugin

    \n

    This plugin can not receive any message from wechat both app request and the result of sharing. I haven't found a way to add a custom activity in Android or define a delegate in iOS on nativescript platform.

    \n

    Install

    \n
    $ tns plugin add nativescript-wechat-share-plugin
    \n

    note: In iOS platform which i tested has a issue, it can not link an ios static library twice even though that static library has been remove. So if met some error like 'Can not find variable WXApiDelegate' in runtime, please follow steps as below and test again.

    \n
    $ tns platform remove ios
    $ tns platform add ios
    $ tns prepare ios
    \n

    iOS Configuration

    \n

    add below into <YOUR_PROJECT_DIR>/app/App_Resources/iOS/Info.plist

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleTypeRole</key>
    \t\t<string>Editor</string>
    \t\t<key>CFBundleURLName</key>
    \t\t<string>weixin</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string><!--YOUR_WECHAT_APP_ID--></string>
    \t\t</array>
    \t</dict>
    </array>
    \n

    Usage

    \n

    WechatSharingScene object defined in here. It has three options can be used:

    \n
    WechatSharingScene.SESSION //share to someone or a group
    WechatSharingScene.TIMELINE //share to Moments
    WechatSharingScene.FAVORITE //add to self favorite
    \n
    sharing text
    \n
    import {WechatSharePlugin, WechatSharingScene} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      text: \"this is a test text.\"
    };

    wechatSharePlugin.share(sharingOptions);
    \n
    sharing url
    \n
    import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);
      
    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      messages: {
        media: {
          type: WechatSharingType.TYPE_SHARING_WEBPAGE,
          webpageUrl: \"https://open.weixin.qq.com/\"
        }
      }
    };
    wechatSharePlugin.share(sharingOptions);
    \n
    sharing local image
    \n
    import * as fs from 'file-system';
    const appPath = fs.knownFolders.currentApp();
    const applePath = fs.path.join(appPath.path, \"img\", \"apple.jpg\");

    import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      messages: {
        title: \"test title\",
        description: \"test description\",
        media: {
          type: WechatSharingType.TYPE_SHARING_IMAGE,
          image: applePath
        }
      }
    }
    wechatSharePlugin.share(sharingOptions);
    \n
    sharing online image
    \n
    import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      messages: {
        title: \"shareOnlineImageToWechat title\",
        description: \"shareOnlineImageToWechat description\",
        media: {
          type: WechatSharingType.TYPE_SHARING_IMAGE,
          image: \"http://mmbiz.qpic.cn/mmbiz/PiajxSqBRaEIVJ6bW5EhIpIVZuxavukF9zUCzuoAKicofAtxibTBZOzsgP73GtO7jkkH2MQke21fOFC6Pnm0JvC6Q/0?wx_fmt=png/\"
        }
      }
    }
    wechatSharePlugin.share(sharingOptions);
    \n
    sharing music
    \n
    import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      messages: {
        title: \"shareMusicToWechat title\",
        description: \"shareMusicToWechat description\",
        media: {
          type: WechatSharingType.TYPE_SHARING_MUSIC,
          image: \"http://staff2.ustc.edu.cn/~wdw/softdown/index.asp/0042515_05.ANDY.mp3\"
        }
      }
    }
    wechatSharePlugin.share(sharingOptions);
    \n
    sharing video
    \n
    import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

    let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

    let sharingOptions = {
      scene: WechatSharingScene.TIMELINE,
      messages: {
        title: \"shareVideoToWechat title\",
        description: \"shareVideoToWechat description\",
        media: {
          type: WechatSharingType.TYPE_SHARING_VIDEO,
          image: \"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
        }
      }
    }
    wechatSharePlugin.share(sharingOptions);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arktivetour/phone-input":{"name":"@arktivetour/phone-input","version":"1.0.3","license":"Apache-2.0","readme":"

    @arktivetour/phone-input

    \n
    ns plugin add @arktivetour/phone-input
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-entitlements":{"name":"nativescript-custom-entitlements","version":"0.2.0","license":"MIT","readme":"

    Nativescript Xcode 8 custom entitlements

    \n

    Nativescript hook for supporting custom xcode 8 entitlements, see https://github.com/NativeScript/nativescript-cli/issues/2075

    \n

    \"npm

    \n

    Installation

    \n

    Npm

    \n
    npm install nativescript-custom-entitlements --save-dev
    \n

    Configuration

    \n

    You'll need to have a entitlements file app.entitlements in the app/App_Resources/iOS folder.

    \n

    TIP You can open the project in xcode 8 and activate the entitlements you need. xcode will generate an entitlements file which you can copy to your nativescript project

    \n

    Example entitlements file

    \n

    app/App_Resources/iOS/app.entitlements

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>aps-environment</key>
    \t<string>development</string>
    </dict>
    </plist>
    \n

    Run Demo

    \n
    npm run setup
    npm run demo.ios
    \n

    Check entitlements

    \n
    npm run setup
    npm run resetdemo
    cd demo
    tns build ios --for-device
    cp demo/platforms/ios/build/device/demo.ipa build/demo/platforms/ios/build/device/demo.zip
    unzip demo/platforms/ios/build/device/demo.zip -d demo/platforms/ios/build/device/
    codesign -d --entitlements :- \"demo/platforms/ios/build/device/Payload/demo.app\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rootbeer":{"name":"nativescript-rootbeer","version":"1.0.0","license":"Apache License 2.0","readme":"

    NativeScript RootBeer

    \n

    A NativeScript module for detecting root on Android. It uses the RootBeer library

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-rootbeer
    \n

    Usage

    \n

    Here are the supported functions:

    \n

    function: isRooted

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer')

      rootBeer.isRooted();
    \n

    TypeScript

    \n
      import { isRooted } from 'nativescript-rootbeer'

      isRooted()
    \n

    function: detectRootManagementApps

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer')

      rootBeer.detectRootManagementApps();
    \n

    TypeScript

    \n
      import { detectRootManagementApps } from 'nativescript-rootbeer'

      detectRootManagementApps()
    \n

    function: detectPotentiallyDangerousApps

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.detectPotentiallyDangerousApps();
    \n

    TypeScript

    \n
      import { detectPotentiallyDangerousApps } from 'nativescript-rootbeer'

      detectPotentiallyDangerousApps()
    \n

    function: detectTestKeys

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.detectTestKeys();
    \n

    TypeScript

    \n
      import { detectTestKeys } from 'nativescript-rootbeer'

      detectTestKeys()
    \n

    function: checkForBusyBoxBinary

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkForBusyBoxBinary();
    \n

    TypeScript

    \n
      import { checkForBusyBoxBinary } from 'nativescript-rootbeer'

      checkForBusyBoxBinary()
    \n

    function: checkForSuBinary

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkForSuBinary();
    \n

    TypeScript

    \n
      import { checkForSuBinary } from 'nativescript-rootbeer'

      checkForSuBinary()
    \n

    function: checkSuExists

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkSuExists();
    \n

    TypeScript

    \n
      import { checkSuExists } from 'nativescript-rootbeer'

      checkSuExists()
    \n

    function: checkForRWPaths

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkForRWPaths();
    \n

    TypeScript

    \n
      import { checkForRWPaths } from 'nativescript-rootbeer'

      checkForRWPaths()
    \n

    function: checkForDangerousProps

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkForDangerousProps();
    \n

    TypeScript

    \n
      import { checkForDangerousProps } from 'nativescript-rootbeer'

      checkForDangerousProps()
    \n

    function: checkForRootNative

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.checkForRootNative();
    \n

    TypeScript

    \n
      import { checkForRootNative } from 'nativescript-rootbeer'

      checkForRootNative()
    \n

    function: detectRootCloakingApps

    \n

    JavaScript

    \n
      let rootBeer = require('nativescript-rootbeer');

      rootBeer.detectRootCloakingApps();
    \n

    TypeScript

    \n
      import { detectRootCloakingApps } from 'nativescript-rootbeer'

      detectRootCloakingApps()
    \n

    Thanks

    \n

    Scott Alexander-Bown and Matthew Rollings for their contributions to RootBeer

    \n

    License

    \n

    Apache License, Version 2.0

    \n
    Copyright (C) 2015, Scott Alexander-Bown, Mat Rollings, Ryan Edge\n\nLicensed under the Apache License, Version 2.0 (the "License");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n     http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules-xml":{"name":"tns-core-modules-xml","version":"2.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oauth2":{"name":"nativescript-oauth2","version":"3.0.10","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-share-file":{"name":"nativescript-akylas-share-file","version":"1.1.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fabric":{"name":"nativescript-fabric","version":"2.0.2","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dudipsh/markdown":{"name":"@dudipsh/markdown","version":"1.0.8","license":"Apache-2.0","readme":"

    @ns-markdown/markdown

    \n
    ns plugin add @ns-markdown/markdown
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ez-nativescript-fonticon":{"name":"ez-nativescript-fonticon","version":"1.0.1","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-native-chess-oex-scanner-android":{"name":"react-native-chess-oex-scanner-android","version":"0.1.2","license":"MIT","readme":"

    react-native ChessOexScannerAndroid

    \n

    Use your installed chess OEX engines on your android device in your React Native applications.

    \n

    Installation

    \n
    npm install react-native-chess-oex-scanner-android
    \n

    Usage

    \n

    Here a full example in typescript. First, some notes :

    \n\n
    import * as React from 'react';

    import { StyleSheet, View, Text, ScrollView, Button } from 'react-native';
    import Toast from 'react-native-easy-toast';
    import Dialog from 'react-native-dialog';
    import ChessOexScannerAndroid from 'react-native-chess-oex-scanner-android';

    export default function App() {
      const toast = React.useRef<Toast | null>(null);
      const [commandValue, setCommandValue] = React.useState('');
      const [commandDialogVisible, setCommandDialogVisible] = React.useState(false);
      const [enginesStoreList, setEnginesStoreList] = React.useState<Array<string>>(
        []
      );
      const [enginesInstalledList, setEnginesInstalledList] = React.useState<
        Array<string>
      >([]);

      function askForCommand(_e: any) {
        setCommandDialogVisible(true);
      }

      async function readOutputsFromEngine() {
        try {
          const lines = await ChessOexScannerAndroid.readCurrentEnginePendingOutputs();
          if (lines.length > 0) {
            lines.forEach((singleLine) => console.log(singleLine));
          }
        } catch (err) {
          console.error(err);
        }
      }

      function handleCancelCommandDialog() {
        setCommandDialogVisible(false);
      }

      async function sendCommandToEngine() {
        setCommandDialogVisible(false);
        try {
          const command = commandValue;
          await ChessOexScannerAndroid.sendCommandToRunningEngine(command);
        } catch (err) {
          console.error(err);
        }
      }

      async function getStoreEnginesList() {
        const engines = await ChessOexScannerAndroid.getMyStoreEnginesNames();
        return engines;
      }

      async function getInstalledEnginesList() {
        function stripNameFromLibName(libName: string) {
          let result = libName;
          result = result.substring(3);
          result = result.substring(0, result.length - 3);
          return result;
        }

        const engines = await ChessOexScannerAndroid.listInstalledEngines();
        return engines.map((item) => stripNameFromLibName(item));
      }

      async function installStoreEngine(index: number) {
        try {
          await ChessOexScannerAndroid.installEngineFromMyStore(index);
          toast.current?.show('Engine installed');
        } catch (err) {
          console.error(err);
          toast.current?.show('Failed to install engine !');
        }
      }

      async function playWithEngine(index: number) {
        try {
          const allEngines = await ChessOexScannerAndroid.listInstalledEngines();
          const engineName = allEngines[index];

          console.log('Launching engine ' + engineName);
          await ChessOexScannerAndroid.executeInstalledEngine(index);
        } catch (err) {
          console.error(err);
          toast.current?.show('Failed to launch engine !');
        }
      }

      React.useEffect(() => {
        async function setup() {
            // In setupEngineUtils, you give the android application id
          await ChessOexScannerAndroid.setupEngineUtils(
            'com.example.reactnativechessoexscannerandroid'
          );
        }

        setup()
          .then(() => {})
          .catch((err) => console.error(err))    ;
        getStoreEnginesList()
          .then((engines) => setEnginesStoreList(engines))
          .catch((err) => {
            console.error(err);
            toast.current?.show('Failed to get engines list from your store !');
          });
        getInstalledEnginesList()
          .then((engines) => setEnginesInstalledList(engines))
          .catch((err) => {
            console.error(err);
            toast.current?.show('Failed to get installed engines list !');
          });

        return function () {
          ChessOexScannerAndroid.stopCurrentRunningEngine();
        };
      }, []);

      React.useEffect(() => {
        let timer = setInterval(readOutputsFromEngine, 1000);
        return function () {
          clearInterval(timer);
        };
      }, []);

      return (
        <View style={styles.container}>
          <Toast ref={toast} />
          <Dialog.Container visible={commandDialogVisible}>
            <Dialog.Title>Send command</Dialog.Title>
            <Dialog.Input
              label=\"Command:\"
              value={commandValue}
              onChangeText={setCommandValue}
            />
            <Dialog.Button label=\"Cancel\" onPress={handleCancelCommandDialog} />
            <Dialog.Button label=\"Send\" onPress={sendCommandToEngine} />
          </Dialog.Container>
          <Button onPress={askForCommand} title=\"Send command\" />
          <View style={styles.storeZone}>
            <Text style={styles.listHeader}>Engines from store</Text>
            <ScrollView>
              {enginesStoreList.map((engineName, index) => {
                return (
                  <Text
                    key={engineName}
                    onPress={() => installStoreEngine(index)}
                    style={styles.listText}
                  >
                    {engineName}
                  </Text>
                );
              })}
            </ScrollView>
          </View>
          <View style={styles.installedZone}>
            <Text style={styles.listHeader}>Engines installed</Text>
            <ScrollView>
              {enginesInstalledList.map((engineName, index) => {
                return (
                  <Text
                    key={engineName}
                    onPress={() => playWithEngine(index)}
                    style={styles.listText}
                  >
                    {engineName}
                  </Text>
                );
              })}
            </ScrollView>
          </View>
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
      storeZone: {
        width: '100%',
        height: '40%',
        backgroundColor: 'lightgreen',
        marginTop: 10,
      },
      installedZone: {
        width: '100%',
        height: '40%',
        backgroundColor: 'lightyellow',
      },
      listHeader: {
        color: 'blue',
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 5,
      },
      listText: {
        marginLeft: 10,
        marginTop: 8,
        marginBottom: 8,
        color: 'magenta',
      },
    });
    \n

    Contributing

    \n

    See the contributing guide to learn how to contribute to the repository and the development workflow.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-mlkit-unofficial":{"name":"nativescript-plugin-firebase-mlkit-unofficial","version":"5.3.1-beta2","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    NOTE: THIS IS JUST A BUILD OF THIS BRANCH: issue699-mlkit-support

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    \"Firebase\"/

    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n\n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    If you're using this template: vue-cli-template, then copy firebase.nativescript.json to the template folder. You could also symlink it: firebase.nativescript.json -> template/firebase.nativescript.json.

    \n

    And also, require the plugin before Vue.start runs (probably in main.js), but run firebase.init() afterwards (although it may work before). You could wrap it in a timeout to make sure.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function (instance) {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    import firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      instance => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    import firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          instance => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:10.A.B, but version 11.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"11.8.0\"
      }
    }
    \n

    Where "11.8.0" is best set to the same value as the firebaseVersion value in this file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-settings":{"name":"nativescript-wifi-settings","version":"1.1.2","readme":"

    Wifi settings

    \n

    Wifi settings is a nativescript plugin it allow user to open wifi setting in Android and Ios .

    \n

    Installation

    \n
    tns plugin add nativescript-wifi-settings
    \n

    Usage

    \n
    const wifiSettings = require(\"nativescript-wifi-settings\");

    wifiSettings.openWifiSettingsOnDevice();
    \n

    Contributing

    \n

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"eamplugin":{"name":"eamplugin","version":"1.0.3","license":"Apache-2.0","readme":"

    @kopisplugin/eamplugin

    \n
    ns plugin add @kopisplugin/eamplugin
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-hook-versioning":{"name":"@altabsrl/nativescript-hook-versioning","version":"7.0.5","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"shumih-tns-popup":{"name":"shumih-tns-popup","version":"1.6.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-vue-template-compiler":{"name":"nativescript-akylas-vue-template-compiler","version":"2.3.5","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync-cli":{"name":"nativescript-app-sync-cli","version":"1.0.1","license":"MIT","readme":"

    NativeScript AppSync Management CLI

    \n

    Please refer to the NativeScript plugin docs.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-video-recorder":{"name":"tns-video-recorder","version":"0.2.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dchovhan/helloworld":{"name":"@dchovhan/helloworld","version":"1.0.2","license":"Apache-2.0","readme":"

    @dchovhan/helloworld

    \n
    ns plugin add @dchovhan/helloworld
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/localize":{"name":"@vallemar/localize","version":"5.0.6","license":"Apache-2.0","readme":"

    Nativescript localize

    \n

    This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities of each platform. It is inspired from nativescript-i18n

    \n

    Credits

    \n

    A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me. Eddy then joined NativeScript's Technical Steering Committe and to vastly improve plugin maintenance it was scoped and moved here!

    \n

    Table of contents

    \n\n

    Installation

    \n
    tns plugin add @nativescript/localize
    \n

    Usage

    \n

    Create a folder i18n in the src folder with the following structure:

    \n
    src
      | i18n
          | en.json           <-- english language
          | fr.default.json   <-- french language (default)
          | es.js
    \n

    You need to set the default langage and make sure it contains\nthe application name to avoid any error.

    \n

    Angular

    \n

    app.module.ts

    \n
    import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    import { NativeScriptLocalizeModule } from '@nativescript/localize/angular';
    import { NativeScriptModule } from '@nativescript/angular';

    import { AppComponent } from './app.component';

    @NgModule({
    \tdeclarations: [AppComponent],
    \tbootstrap: [AppComponent],
    \timports: [NativeScriptModule, NativeScriptLocalizeModule],
    \tschemas: [NO_ERRORS_SCHEMA],
    })
    export class AppModule {}
    \n

    Template

    \n
    <Label text=\"{{ 'Hello world !' | L }}\"/>
    <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
    \n

    Script

    \n
    import { localize } from '@nativescript/localize';

    console.log(localize('Hello world !'));
    \n

    Javascript / XML

    \n

    app.js

    \n
    const application = require('application');
    const { localize } = require('@nativescript/localize');
    application.setResources({ L: localize });
    \n

    Template

    \n
    <Label text=\"{{ L('Hello world !') }}\"/>
    <Label text=\"{{ L('I am %s', 'user name') }}\"/>
    \n

    Script

    \n
    const { localize } = require('@nativescript/localize');

    console.log(localize('Hello world !'));
    \n

    Quirks

    \n

    ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

    \n
    const page = args.object;
    page.bindingContext = new Observable();
    \n

    Vue

    \n

    app.js

    \n
    import { localize } from '@nativescript/localize';

    Vue.filter('L', localize);
    \n

    Template

    \n
    <label :text=\"'Hello world !'|L\"></label> <label :text=\"'I am %s'|L('user name')\"></label>
    \n

    File format

    \n

    Each file is imported using require, use the file format of your choice:

    \n

    JSON

    \n
    {
    \t\"app.name\": \"My app\",
    \t\"ios.info.plist\": {
    \t\t\"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    \t},
    \t\"user\": {
    \t\t\"name\": \"user.name\",
    \t\t\"email\": \"user.email\"
    \t},
    \t\"array\": [\"split the translation into \", \"multiples lines\"],
    \t\"sprintf\": \"format me %s\",
    \t\"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
    }
    \n

    Javascript

    \n
    export const i18n = {
    \t'app.name': 'My app',
    };
    \n

    Frequently asked questions

    \n

    How to set the default language?

    \n

    Add the .default extension to the default language file to set it as the fallback language:

    \n
    fr.default.json
    \n

    How to localize the application name?

    \n

    The app.name key is used to localize the application name:

    \n
    {
    \t\"app.name\": \"My app\"
    }
    \n

    How to localize iOS properties?

    \n

    Keys starting with ios.info.plist. are used to localize iOS properties:

    \n
    {
    \t\"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    }
    \n

    How to change the language dynamically at runtime?

    \n

    This plugin uses the native capabilities of each platform, language selection is therefore made by the OS.

    \n

    On iOS you can programmatically override this language since plugin version 4.2.0 by doing this:

    \n
    import { overrideLocale } from '@nativescript/localize';
    const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n

    On Android you can programatically override this language since plugin version 4.2.1 by doing this:

    \n

    In your app.ts / main.ts / app.js

    \n
    import { Application } from '@nativescript/core';
    import { androidLaunchEventLocalizationHandler } from '@nativescript/localize';

    Application.on(Application.launchEvent, (args) => {
    \tif (args.android) {
    \t\tandroidLaunchEventLocalizationHandler();
    \t}
    });
    \n

    And in your settings page where user chooses the language:

    \n
    import { overrideLocale } from '@nativescript/localize';
    const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n
    \n

    Important: In both cases, after calling override Locale, you must ask the user to restart the app

    \n
    \n

    For Example:

    \n
    import { Application } from '@nativescript/core';
    import { overrideLocale } from '@nativescript/localize';

    alert({
    \ttitle: 'Switch Language',
    \tmessage: 'The application needs to be restarted to change language',
    \tokButtonText: 'Quit!',
    }).then(() => {
    \tL.localize.overrideLocale(selectedLang);
    \tif (isAndroid) {
    \t\t(Application.android.foregroundActivity || Application.android.startActivity).finish();
    \t} else {
    \t\texit(0);
    \t}
    });
    \n
    \n

    Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

    \n
    \n
    android {

      // there maybe other code here //

      bundle {
        language {
          enableSplit = false
        }
      }
    }
    \n
    \n

    Tip: you can get the default language on user's phone by using this

    \n
    \n
    import { Device } from '@nativescript/core';

    console.log(\"user's language is\", Device.language.split('-')[0]);
    \n
    \n

    Tip: overrideLocale method stores the language in a special key in app-settings,\nyou can access it like this,

    \n
    \n
    import { ApplicationSettings } from '@nativescript/core';

    console.log(ApplicationSettings.getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
    \n

    Troubleshooting

    \n

    The angular localization pipe does not work when in a modal context

    \n

    As a workaround, you can trigger a change detection from within your component constructor:

    \n
    constructor(
      private readonly params: ModalDialogParams,
      private readonly changeDetectorRef: ChangeDetectorRef,
    ) {
      setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
    }
    \n

    Starting from Android N, there is a weird side effect while using a WebView.

    \n

    For unknown reasons, the very first creation of it resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is native bug and the workaround is

    \n
     <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
    \n
    import { overrideLocale, androidLaunchEventLocalizationHandler } from '@nativescript/localize';
    import { ApplicationSettings } from '@nativescript/core';
    const locale = ApplicationSettings.getString('__app__language__');

    function webViewLoaded() {
    \toverrideLocale(locale);
    \tandroidLaunchEventLocalizationHandler();
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-launchkit":{"name":"nativescript-launchkit","version":"0.1.2","license":"Apache-2.0","readme":"

    Nativescript LaunchKitSDK Wrapper

    \n

    #Setup LaunchKit Account#

    \n

    Live Demo

    \n

    \"Preview\"

    \n

    Setup

    \n

    Add this in your app.js

    \n
    if (application.ios) {
        var __extends = this.__extends || function (d, b) {
            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
            function __() { this.constructor = d; }
            __.prototype = b.prototype;
            d.prototype = new __();
        };
        
        var appDelegate = (function (_super) {
            __extends(appDelegate, _super);
            function appDelegate() {
                _super.apply(this, arguments);
            }
            
            appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (app, launchOptions) {
                launchkit.initalize({
                    token: \"OjMwhQZ5WgFFNZAQVBOYtWtAcXv1Kw2inxkzPEx_j6sK\" 
                });
            };
            
            appDelegate.ObjCProtocols = [UIApplicationDelegate];
            return appDelegate;
        })(UIResponder);
        application.ios.delegate = appDelegate;
    }
    \n

    API

    \n
    var launchkit = require(\"nativescript-launchkit\");
    \n
    launchkit.initalize({
        token: \"\",  //From https://launchkit.io/sdk/install/,
        debug: false //tells all methods that have debug flags to use them
    });
    \n

    isSuperUser: Returns bool

    \n
    launchkit.isSuperUser();
    \n

    setUser

    \n
    launchkit.setUser({
        id: \"someid\",
        name: \"steve\",
        email: \"steve@launchkitsdk.com\"
    });
    \n

    showOnboarding: Returns Promise (args: args)

    \n
    launchkit.showOnboarding();
    \n
    \n

    Onboarding needs to be called from a view, will fail in app.js due to there being no UIWindow yet

    \n
    \n

    showReleaseNotes: Returns Promise (args: didPresent)

    \n
    launchkit.showAppReviewCard({
        page: page //args.object from your onNavigatingTo, or onPageLoaded events
    });
    \n

    showAppReviewCard: Returns Promise (args: didPresent, flowResult)

    \n
    launchkit.showAppReviewCard({
        page: page //args.object from your onNavigatingTo, or onPageLoaded events
    });
    \n

    Note: Unofficial plugin just wrapping the official iOS SDK

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kiip":{"name":"nativescript-kiip","version":"0.1.3","license":"Apache-2.0","readme":"

    Nativescript Kiip Wrapper

    \n

    Setup

    \n

    Add this to the app.js to run before application.start

    \n
    if (application.ios) {
        //iOS
        var __extends = this.__extends || function (d, b) {
            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
            function __() { this.constructor = d; }
            __.prototype = b.prototype;
            d.prototype = new __();
        };
        
        var appDelegate = (function (_super) {
            __extends(appDelegate, _super);
            function appDelegate() {
                _super.apply(this, arguments);
            }
            
            appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (app, launchOptions) {
                kiip.initalize({
                    key: \"<YOUR KEY>\",
                secret: \"<YOUR SECRET>\",
                    testMode: true
                }); 
            };
            
            appDelegate.ObjCProtocols = [UIApplicationDelegate, KiipDelegate];
            return appDelegate;
        })(UIResponder);
        application.ios.delegate = appDelegate;
    }else{
        //ANDROID
        application.on(application.launchEvent, function (args) {
            kiip.initalize({
                key: \"<YOUR KEY>\",
                secret: \"<YOUR SECRET>\",
                testMode: true
            }); 
        });
    }
    \n

    iOS

    \n

    Looks like kiip uses http, so in iOS we need to allow http in the info.plist per the guide

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n

    METHODS

    \n
    var kiip = require(\"nativescript-kiip\");
    \n

    Save Moment

    \n
    kiip.saveMoment({
            id: \"open_app\"
        }).then(function (args) {

            if (args.poptart != null) {
                if (app.android) {
                    var context = app.android.currentContext;
                    args.poptart.show(context); //<-- CRASH HERE
                }else if(app.ios){
                    debugger;
                    args.poptart.show();
                }
            }

            viewModel.debug = \"Saved Moment \" + new Date()
        }, function (args) {
            viewModel.debug = \"Save Moment Failed\";
        });
    \n

    OPTIONS

    \n
    exports.onSetEmail = function (args) {
        kiip.setEmail(viewModel.email);
    }

    exports.onSetBirthday = function (args) {
        kiip.setBirthday(viewModel.birthday);
    }

    exports.onSetGender = function (args) {
        kiip.setGender(viewModel.gender);
    }

    //iOS Only
    exports.onStartSession = function (args) {
        kiip.startSession().then(function (args) {
            viewModel.debug = \"Session Started \" + new Date()
        }, function (args) {
            viewModel.debug = \"Session Start Failed\"
        });
    }

    //iOS Only
    exports.onEndSession = function (args) {
        kiip.endSession().then(function (args) {
            viewModel.debug = \"Session Ended \" + new Date()
        }, function (args) {
            viewModel.debug = \"Session End Failed\"
        });
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-snapshot":{"name":"nativescript-angular-snapshot","version":"1.5.2-5.5.372.32","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"proxy-lib":{"name":"proxy-lib","version":"0.4.0","license":"Apache-2.0","readme":"

    proxy-lib

    \n

    Proxy library used in NativeScript tooling.\nThis library gives you methods to get, set and clear proxy settings respected by NativeScript tooling.

    \n

    Contents

    \n\n

    API

    \n

    getProxySettings

    \n

    This method returns the proxy information. In case there's no proxy settings file, the returned promise is resolved with null.

    \n

    getProxySettings definition

    \n
    /**
     * Get information about current proxy settings.
     * @param {string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }} params @optional CredentialsKey and path to file from which to get the information.
     * @returns {Promise<{ proxy: string, rejectUnauthorized: boolean, username: string, password: string, protocol: string, port: string, hostname: string }>} Information about proxy settings
     */
    getProxySettings(params: string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }): Promise<{proxy: string, rejectUnauthorized: boolean, username: string, password: string, protocol: string, port: string, hostname: string}>;
    \n

    getProxySettings examples

    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.getProxySettings({ credentialsKey: \"myCredKey\" })
    \t.then(proxySettings => console.log(proxySettings))
    \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.getProxySettings({ credentialsKey: \"myCredKey\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
    \t.then(proxySettings => console.log(proxySettings))
    \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.getProxySettings(\"myCredKey\")
    \t.then(proxySettings => console.log(proxySettings))
    \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
    \n

    setProxySettings

    \n

    This method sets the proxy information to a specified file (or default location). In case proxy requires authentication, you can pass credentials and they'll be stored securely in Windows Credentials Manager.

    \n

    setProxySettings definition

    \n
    /**
     * Sets new proxy settings.
     * @param {string | { proxyUrl: string, credentialsKey: string, rejectUnauthorized: boolean, username: string, password: string, userSpecifiedSettingsFilePath: string }} params Proxy settings
     * @returns {Promise<void>}
     */
    setProxySettings(params: string | { proxyUrl: string, credentialsKey: string, rejectUnauthorized: boolean, username: string, password: string, userSpecifiedSettingsFilePath: string }): Promise<void>;
    \n

    setProxySettings parameters and examples

    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", credentialsKey: \"myCredKey\", rejectUnauthorized: true, username: \"myUsername\", password: \"myPassword\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n

    or

    \n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings(\"http://192.168.1.102:8888\")
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n

    The proxyUrl may also contain the authentication information, in this case the call will be:

    \n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://myUsername:myPassword@192.168.1.102:8888\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n

    or

    \n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings(\"http://myUsername:myPassword@192.168.1.102:8888\")
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", rejectUnauthorized: false })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", username: \"myUsername\", password: \"myPassword\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", username: \"myUsername\", password: \"myPassword\", credentialsKey: \"myKey\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
    \t.then(() => console.log(\"Successfully set proxy settings.\"))
    \t.catch(err => console.error(\"Unable to set proxy settings\", err));
    \n

    clearProxySettings

    \n

    This method clears the proxy settings by removing the proxy file and removing the specified entry from Credentials Manager.

    \n

    clearProxySettings definition

    \n
    /**
     * Clears proxy settings.
     * @param {string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }} params @optional Options for credentials key and path to be cleaned.
     * @returns {Promise<void>}
     */
    clearProxySettings(params: string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }): Promise<void>;
    \n

    clearProxySettings examples

    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.clearProxySettings()
    \t.then(() => console.log(\"Successfully cleared proxy settings file.\"))
    \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.clearProxySettings({ userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
    \t.then(() => console.log(\"Successfully cleared custom proxy settings file.\"))
    \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
    \n\n
    const proxyLib = require(\"proxy-lib\");
    proxyLib.clearProxySettings({ credentialsKey: \"myKey\" })
    \t.then(() => console.log(\"Successfully cleared custom proxy settings file and custom entry.\"))
    \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-7":{"name":"nativescript-facebook-7","version":"7.0.4","license":"Apache 2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"firebase-for-nativescript":{"name":"firebase-for-nativescript","version":"1.0.5","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk":{"name":"nativescript-zendesk","version":"0.3.4","license":"Apache-2.0","readme":"

    Zendesk Plugin for the NativeScript framework

    \n

    Setup

    \n\n

    Add the plugin

    \n
    var zendeskModule = require(\"nativescript-zendesk\");
    var zendesk = null; // Place to store the activated object

    //Somewhere on load
    zendesk = zendeskModule.init({
        appId: \"\", //required
        url: \"\", //required
        clientId: \"\", //required
    \tadditionalInfo: \"Some extra details\", //(optional)
    \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
        enableLogging: true, //(optional), bool
        locale: \"en-us\" //(optional), string
    });
    \n

    Open the Help Center

    \n
    //Loads the main all category view
    zendesk.openHelpCenter();

    //Loads up a specific category
    zendesk.openHelpCenter({
            type: \"Category\",
            id: 202551987,//CategoryID: Must be a number, not a string
            name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
        });
        
    //Loads up a specific section
    zendesk.openHelpCenter({
            type: \"Section\",
            id: 203791988, //SectionID: Must be a number, not a string
            name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
        });
    \n

    Open the Request Contact List, shows previous conversations and ability to create new

    \n
    zendesk.openContactList();
    \n

    Open the Create new Request screen

    \n
    zendesk.createContactRequest();
    \n

    Options

    \n

    Set identify a user

    \n
        zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
            
        zendesk.createContactRequest();
    \n

    iOS Theme

    \n

    Docs

    \n

    //Create the theme
    //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
    var myTheme = {
    \tZDKSupportView: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttableBackgroundColor: \"#E0E0E0\",
    \t\tseparatorColor: \"#E0E0E0\",
    \t
    \t\t//0 = light, 1=dark
    \t\tsearchBarStyle: 0,
    \t\t
    \t\tnoResults: {
    \t\t\tfoundLabelColor: \"#E0E0E0\",
    \t\t\tfoundLabelBackground: \"#E0E0E0\",
    \t\t\tcontactButtonBackground: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
    \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
    \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\t\tcontactButtonBorderWidth: 1.0,
    \t\t\tcontactButtonCornerRadius: 4.0
    \t\t} 
    \t},
    \tZDKSupportTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportArticleTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\tparentsLabelColor: \"#E0E0E0\",
    \t\tparnetsLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tlabelBackground: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportAttachmentCell: {
    \t\tbackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tfileSizeLabelBackground: \"#E0E0E0\",
    \t\tfileSizeLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKNavigationBar: {
    \t\t\ttintColor: \"#E0E0E0\",
    \t\t\tbarTintColor: \"#E0E0E0\",
    \t\t\ttitleColor: \"#E0E0E0\",
    \t}
    };
    \t
    //Load the theme
    zendesk.setTheme(myTheme);
    \n

    Android Theme

    \n

    None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

    \n

    Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

    \n
    <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
    \n

    And add your custom theme to the App_resources/Android/values/styles.xml

    \n
    <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
    \t<!-- THIS is where you can set the accent color -->
    \t<item name=\"colorAccent\">@color/ns_accent</item>
    \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
    </style>

    <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
        <!-- THIS is where you can color the back arrow! -->
        <item name=\"colorControlNormal\">@color/ns_accent</item>
    </style>
    \n

    Zendesk documentation is:

    \n

    Docs

    \n

    Other Notes

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-chat":{"name":"nativescript-zendesk-chat","version":"0.0.1","license":"Apache-2.0","readme":"

    Zendesk Plugin for the NativeScript framework

    \n

    Setup

    \n\n

    Add the plugin

    \n
    var zendeskModule = require(\"nativescript-zendesk\");
    var zendesk = null; // Place to store the activated object

    //Somewhere on load
    zendesk = zendeskModule.init({
        appId: \"\", //required
        url: \"\", //required
        clientId: \"\", //required
    \tadditionalInfo: \"Some extra details\", //(optional)
    \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
        enableLogging: true, //(optional), bool
        locale: \"en-us\" //(optional), string
    });
    \n

    Open the Help Center

    \n
    //Loads the main all category view
    zendesk.openHelpCenter();

    //Loads up a specific category
    zendesk.openHelpCenter({
            type: \"Category\",
            id: 202551987,//CategoryID: Must be a number, not a string
            name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
        });
        
    //Loads up a specific section
    zendesk.openHelpCenter({
            type: \"Section\",
            id: 203791988, //SectionID: Must be a number, not a string
            name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
        });
    \n

    Open the Request Contact List, shows previous conversations and ability to create new

    \n
    zendesk.openContactList();
    \n

    Open the Create new Request screen

    \n
    zendesk.createContactRequest();
    \n

    Options

    \n

    Set identify a user

    \n
        zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
            
        zendesk.createContactRequest();
    \n

    iOS Theme

    \n

    Docs

    \n

    //Create the theme
    //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
    var myTheme = {
    \tZDKSupportView: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttableBackgroundColor: \"#E0E0E0\",
    \t\tseparatorColor: \"#E0E0E0\",
    \t
    \t\t//0 = light, 1=dark
    \t\tsearchBarStyle: 0,
    \t\t
    \t\tnoResults: {
    \t\t\tfoundLabelColor: \"#E0E0E0\",
    \t\t\tfoundLabelBackground: \"#E0E0E0\",
    \t\t\tcontactButtonBackground: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
    \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
    \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\t\tcontactButtonBorderWidth: 1.0,
    \t\t\tcontactButtonCornerRadius: 4.0
    \t\t} 
    \t},
    \tZDKSupportTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportArticleTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\tparentsLabelColor: \"#E0E0E0\",
    \t\tparnetsLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tlabelBackground: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportAttachmentCell: {
    \t\tbackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tfileSizeLabelBackground: \"#E0E0E0\",
    \t\tfileSizeLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKNavigationBar: {
    \t\t\ttintColor: \"#E0E0E0\",
    \t\t\tbarTintColor: \"#E0E0E0\",
    \t\t\ttitleColor: \"#E0E0E0\",
    \t}
    };
    \t
    //Load the theme
    zendesk.setTheme(myTheme);
    \n

    Android Theme

    \n

    None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

    \n

    Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

    \n
    <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
    \n

    And add your custom theme to the App_resources/Android/values/styles.xml

    \n
    <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
    \t<!-- THIS is where you can set the accent color -->
    \t<item name=\"colorAccent\">@color/ns_accent</item>
    \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
    </style>

    <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
        <!-- THIS is where you can color the back arrow! -->
        <item name=\"colorControlNormal\">@color/ns_accent</item>
    </style>
    \n

    Zendesk documentation is:

    \n

    Docs

    \n

    Other Notes

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-gradient":{"name":"nativescript-ng-gradient","version":"0.0.2","license":"MIT","readme":"

    Nativescript + Angular Gradients

    \n

    An Angular directive for adding Gradients to your Nativescript UI.

    \n

    How To

    \n\n
    tns plugin add nativescript-ng-gradient
    \n\n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NSGradientDirectiveModule } from \"nativescript-ng-gradient\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ],
      imports: [
        NativeScriptModule,
        NSGradientDirectiveModule
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    export class AppModule { }
    \n\n
    import { Component } from \"@angular/core\";
    import { Types, Orientation } from \"nativescript-ng-gradient\";

    @Component({
      selector: 'ns-app',
      template: `
        <ActionBar title=\"Hello\"></ActionBar>

        <StackLayout [nsgrad]=\"gColors\" [nsgradType]=\"gType\" [nsgradOrient]=\"gOrient\" [nsgradRadius]=\"gRadius\">
          <Label text=\"Hello World\"></Label>
        </StackLayout>
          `
    })
    export class AppComponent {
      public gColors = ['#666666', '#eeeeee'];
      public gType = Types.LINEAR_GRADIENT;
      public gOrient = Orientation.LEFT_RIGHT;
      public gRadius = 0;
    }
    \n

    Properties

    \n

    [nsgrad] : Initiates the Directive with an optional value of an array of colors. Defaults to a gradient from black to white.

    \n

    [nsgradType] : Specifies the type of gradient to use. Defaults to Types.LINEAR_GRADIENT

    \n

    [nsgradOrient] : Specifies the Orientation of the gradient. Defaults to Orientation.LEFT_RIGHT

    \n

    [nsgradRadius] : Specifies the Radius of the gradient is any. Defaults to 0 (none);

    \n

    Note

    \n

    Still can't seem to get RADIAL_GRADIENT to work and this only supported on Android for now.

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cloudpayments":{"name":"nativescript-cloudpayments","version":"0.0.1","license":"Apache-2.0","readme":"

    @alexlnos/nativescript-cloudpayments

    \n
    ns plugin add @alexlnos/nativescript-cloudpayments
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/apple-pay":{"name":"@nativescript/apple-pay","version":"0.1.1","license":"Apache-2.0","readme":"

    @nativescript/apple-pay

    \n
    ns plugin add @nativescript/apple-pay
    \n

    Usage

    \n

    In order for Apple Pay to work in your iOS application you will need to complete the following steps. These steps are also outlined in the Apple PassKit documentation.

    \n\n

    Follow the instructions in Configure Apple Pay (iOS, watchOS), which guide you to create the following:

    \n\n

    For a video showing the configuration steps, see: Configuring Your Developer Account for Apple Pay.

    \n

    Once that configuration is done for your Apple developer account, you will be able to use the PassKit framework for Apple Pay inside your iOS application.

    \n
    <ios>
        <ApplePayBtn
            tap=\"onApplePayTap\"
            buttonType=\"InStore\"
        >    </ApplePayBtn>
    </ios>
    \n
    import { ApplePayBtn, ApplePayContactFields, ApplePayEvents, ApplePayItems, ApplePayMerchantCapability, ApplePayNetworks, ApplePayPaymentItemType, ApplePayRequest, ApplePayTransactionStatus, AuthorizePaymentEventData } from '@nativescript/apple-pay';

    export function onApplePayTap() {
    \ttry {
    \t\t// just ensuring this runs only on iOS
    \t\tif (global.isIOS) {
    \t\t\tconst applePayBtn = args.object as ApplePayBtn;

    \t\t\t// setup the event listeners for the delegate for apple pay for our button
    \t\t\tapplePayBtn.once(ApplePayEvents.DidAuthorizePaymentHandler, async (args: AuthorizePaymentEventData) => {
    \t\t\t\tconsole.log(ApplePayEvents.DidAuthorizePaymentHandler);

    \t\t\t\t// this is where you do backend processing with your payment provider (Stripe, PayPal, etc.)
                    // this payload is just a sample, your payload to a provider will likely be different
                    // you can see here how to access the encrypted values from Apple Pay inside the `args.data.paymentData`
    \t\t\t\tconst payloadToBackend = {
    \t\t\t\t\ttransaction_type: 'purchase',
    \t\t\t\t\tmerchant_ref: args.data.paymentData.header.transactionId,
    \t\t\t\t\tmethod: '3DS',
    \t\t\t\t\t'3DS': {
    \t\t\t\t\t\tmerchantIdentifier: <SomeIdentifierFromPaymentProvider>,
    \t\t\t\t\t\tdata: args.data.paymentData.data,
    \t\t\t\t\t\tsignature: args.data.paymentData.signature,
    \t\t\t\t\t\tversion: args.data.paymentData.version,
    \t\t\t\t\t\theader: args.data.paymentData.header
    \t\t\t\t\t}
    \t\t\t\t};

                    const result = await someHttpMethodToYourProviderBackend(payloadToBackend);

    \t\t\t\tif (result && result.value === true) {
    \t\t\t\t\t// need this to call when the payment is successful to close the payment sheet correctly on iOS
    \t\t\t\t\targs.completion(ApplePayTransactionStatus.Success);
    \t\t\t\t\t// now you can follow through with your user flow since the transactin has been successful with your provider
    \t\t\t\t} else {
                        // payment failed on the backend, so show the FAILURE to close the Apple Pay sheet
    \t\t\t\t\targs.completion(ApplePayTransactionStatus.Failure);
    \t\t\t\t}
    \t\t\t});

                // these are the items your customer is paying for
    \t\t\tconst paymentItems = [
    \t\t\t\t{
    \t\t\t\t\tamount: 20.50,
    \t\t\t\t\tlabel: 'Balance',
    \t\t\t\t\ttype: ApplePayPaymentItemType.Final,
    \t\t\t\t},
    \t\t\t] as ApplePayItems[];

    \t\t\tconst request = {
    \t\t\t\tpaymentItems,
    \t\t\t\tmerchantId: <Your_Apple_Pay_Merchant_ID>, // the merchant ID for this app
    \t\t\t\tmerchantCapabilities: ApplePayMerchantCapability.ThreeDS,
    \t\t\t\tcountryCode: 'US',
    \t\t\t\tcurrencyCode: 'USD',
    \t\t\t\tshippingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
    \t\t\t\tbillingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
    \t\t\t\tsupportedNetworks: [ApplePayNetworks.Amex, ApplePayNetworks.Visa, ApplePayNetworks.Discover, ApplePayNetworks.MasterCard],
    \t\t\t} as ApplePayRequest;

                // `createPaymentRequest` will call into the Apple Pay SDK and present the user with the payment sheet for the configuration provided
    \t\t\tawait applePayBtn.createPaymentRequest(request).catch((err) => {
    \t\t\t\tconsole.log('Apple Pay Error', err);
    \t\t\t});
    \t\t}
    \t} catch (error) {
    \t\tconsole.log(error);
    \t}
    }
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    createPaymentRequest(request: ApplePayRequest)Creates the Apple Pay payment request and presents the user with the payment sheet.
    \n

    Enums

    \n

    ApplePayEvents

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    DidAuthorizePaymentHandlerTells the delegate that the user has authorized the payment request and asks for a result.
    AuthorizationDidFinishTells the delegate that payment authorization has completed.
    \n

    ApplePayContactFields

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    EmailAddressIndicates an email address field.
    NameIndicates a name field.
    PhoneNumberIndicates a phone number field.
    PhoneticNameIndicates a phonetic name field.
    PostalAddressIndicates a postal address field.
    \n

    ApplePayNetworks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Key
    Amex
    CarteBancaire
    CarteBancaires
    ChinaUnionPay
    Discover
    Eftpos
    Electron
    Elo
    IDCredit
    Interac
    Jcb
    Mada
    Maestro
    MasterCard
    PrivateLabel
    QuicPay
    Suica
    Visa
    VPay
    \n

    ApplePayMerchantCapability

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    ThreeDSPKMerchantCapability.Capability3DS
    EMVPKMerchantCapability.CapabilityEMV
    CreditPKMerchantCapability.CapabilityCredit
    DebitPKMerchantCapability.CapabilityDebit
    \n

    ApplePayMerchantCapaApplePayTransactionStatusbility

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    SuccessPKPaymentAuthorizationStatus.Success
    FailurePKPaymentAuthorizationStatus.Failure
    InvalidBillingPostalAddressPKPaymentAuthorizationStatus.InvalidBillingPostalAddress
    InvalidShippingPostalAddressPKPaymentAuthorizationStatus.InvalidShippingPostalAddress
    InvalidShippingContactPKPaymentAuthorizationStatus.InvalidShippingContact
    PINRequiredPKPaymentAuthorizationStatus.PINRequired
    PINIncorrectPKPaymentAuthorizationStatus.PINIncorrect
    PINLockoutPKPaymentAuthorizationStatus.PINLockout,
    \n

    ApplePayPaymentItemType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    FinalPKPaymentSummaryItemType.Final
    PendingPKPaymentSummaryItemType.Pending
    \n

    ApplePayButtonType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    PlainPKPaymentButtonType.Plain
    BuyPKPaymentButtonType.Buy
    BookPKPaymentButtonType.Book
    CheckoutPKPaymentButtonType.Checkout
    DonatePKPaymentButtonType.Donate
    InStorePKPaymentButtonType.Book
    SubscribePKPaymentButtonType.Subscribe
    \n

    ApplePayButtonStyle

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    WhitePKPaymentButtonStyle.White
    WhiteOutlinePKPaymentButtonStyle.WhiteOutline
    BlackPKPaymentButtonStyle.Black
    \n

    Interfaces

    \n

    ApplePayRequest

    \n
    interface ApplePayRequest {
    \tpaymentItems: Array<ApplePayItems>;
    \tmerchantId: string; // the merchant ID for this app
    \tmerchantCapabilities: number;
    \tcountryCode: string;
    \tcurrencyCode: string;
    \tsupportedNetworks: Array<ApplePayNetworks>;
    \tbillingContactFields?: Array<ApplePayContactFields>;
    \tshippingContactFields?: Array<ApplePayContactFields>;
    \tshippingMethods?: Array<ApplePayShippingMethods>;
    }
    \n

    ApplePayItems

    \n
    interface ApplePayItems {
    \tlabel: string;
    \tamount: number;
    \ttype: ApplePayPaymentItemType;
    }
    \n

    AuthorizePaymentEventData

    \n
    interface AuthorizePaymentEventData extends EventData {
    \teventName: string;
    \tobject: any;
    \tdata?: {
    \t\tpayment: PKPayment;
    \t\ttoken: PKPaymentToken;
    \t\tpaymentData: ApplePayPaymentData;
    \t\tbillingAddress;
    \t\tbillingContact: PKContact;
    \t\tshippingAddress;
    \t\tshippingContact: PKContact;
    \t\tshippingMethod: PKShippingMethod;
    \t};
    \tcompletion: (status: ApplePayTransactionStatus) => void;
    }
    \n

    AuthorizationDidFinishEventData

    \n
    interface AuthorizationDidFinishEventData extends EventData {
    \teventName: string;
    \tobject: any;
    }
    \n

    ApplePayPaymentData

    \n
    interface ApplePayPaymentData {
    \t/**
    \t * Encrypted payment data.
    \t */
    \tdata;

    \t/**
    \t * Additional version-dependent information used to decrypt and verify the payment.
    \t */
    \theader;

    \t/**
    \t * Signature of the payment and header data. The signature includes the signing certificate, its intermediate CA certificate, and information about the signing algorithm.
    \t */
    \tsignature;

    \t/**
    \t * Version information about the payment token.
    \t * The token uses EC_v1 for ECC-encrypted data, and RSA_v1 for RSA-encrypted data.
    \t */
    \tversion: string;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/typeorm":{"name":"@nativescript-community/typeorm","version":"0.2.29","license":"MIT","readme":"
    \n \n \n \n
    \n
    \n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n \n \"Codecov\"\n \n\t\n\t\t\n\t\n
    \n
    \n
    \n

    TypeORM is an ORM\nthat can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms\nand can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8).\nIts goal is to always support the latest JavaScript features and provide additional features\nthat help you to develop any kind of application that uses databases - from\nsmall applications with a few tables to large scale enterprise applications\nwith multiple databases.

    \n

    TypeORM supports both Active Record and Data Mapper patterns,\nunlike all other JavaScript ORMs currently in existence,\nwhich means you can write high quality, loosely coupled, scalable,\nmaintainable applications the most productive way.

    \n

    TypeORM is highly influenced by other ORMs, such as Hibernate,\nDoctrine and Entity Framework.

    \n

    Features

    \n\n

    And more...

    \n

    With TypeORM your models look like this:

    \n
    import {Entity, PrimaryGeneratedColumn, Column} from \"typeorm\";

    @Entity()
    export class User {

        @PrimaryGeneratedColumn()
        id: number;

        @Column()
        firstName: string;

        @Column()
        lastName: string;

        @Column()
        age: number;

    }
    \n

    And your domain logic looks like this:

    \n
    const repository = connection.getRepository(User);

    const user = new User();
    user.firstName = \"Timber\";
    user.lastName = \"Saw\";
    user.age = 25;
    await repository.save(user);

    const allUsers = await repository.find();
    const firstUser = await repository.findOne(1); // find by id
    const timber = await repository.findOne({ firstName: \"Timber\", lastName: \"Saw\" });

    await repository.remove(timber);
    \n

    Alternatively, if you prefer to use the ActiveRecord implementation, you can use it as well:

    \n
    import {Entity, PrimaryGeneratedColumn, Column, BaseEntity} from \"typeorm\";

    @Entity()
    export class User extends BaseEntity {

        @PrimaryGeneratedColumn()
        id: number;

        @Column()
        firstName: string;

        @Column()
        lastName: string;

        @Column()
        age: number;

    }
    \n

    And your domain logic will look this way:

    \n
    const user = new User();
    user.firstName = \"Timber\";
    user.lastName = \"Saw\";
    user.age = 25;
    await user.save();

    const allUsers = await User.find();
    const firstUser = await User.findOne(1);
    const timber = await User.findOne({ firstName: \"Timber\", lastName: \"Saw\" });

    await timber.remove();
    \n

    Installation

    \n
      \n
    1. \n

      Install the npm package:

      \n

      npm install typeorm --save

      \n
      2. \n
    2. \n

      You need to install reflect-metadata shim:

      \n

      npm install reflect-metadata --save

      \n

      and import it somewhere in the global place of your app (for example in app.ts):

      \n

      import "reflect-metadata";

      \n
      3. \n
    3. \n

      You may need to install node typings:

      \n

      npm install @types/node --save-dev

      \n
      4. \n
    4. \n

      Install a database driver:

      \n
        \n
      • \n

        for MySQL or MariaDB

        \n

        npm install mysql --save (you can install mysql2 instead as well)

        \n
        • \n
      • \n

        for PostgreSQL or CockroachDB

        \n

        npm install pg --save

        \n
        • \n
      • \n

        for SQLite

        \n

        npm install sqlite3 --save

        \n
        • \n
      • \n

        for Microsoft SQL Server

        \n

        npm install mssql --save

        \n
        • \n
      • \n

        for sql.js

        \n

        npm install sql.js --save

        \n
        • \n
      • \n

        for Oracle

        \n

        npm install oracledb --save

        \n

        To make the Oracle driver work, you need to follow the installation instructions from\ntheir site.

        \n
        • \n
      • \n

        for SAP Hana

        \n
        npm config set @sap:registry https://npm.sap.com
        npm i @sap/hana-client
        npm i hdb-pool
        \n

        SAP Hana support made possible by sponsorship of Neptune Software.

        \n
        • \n
      • \n

        for MongoDB (experimental)

        \n

        npm install mongodb --save

        \n
        • \n
      • \n

        for NativeScript, react-native and Cordova

        \n

        Check documentation of supported platforms

        \n
        • \n
      \n

      Install only one of them, depending on which database you use.

      \n
      5. \n
    \n
    TypeScript configuration
    \n

    Also, make sure you are using TypeScript version 3.3 or higher,\nand you have enabled the following settings in tsconfig.json:

    \n
    \"emitDecoratorMetadata\": true,
    \"experimentalDecorators\": true,
    \n

    You may also need to enable es6 in the lib section of compiler options, or install es6-shim from @types.

    \n

    Quick Start

    \n

    The quickest way to get started with TypeORM is to use its CLI commands to generate a starter project.\nQuick start works only if you are using TypeORM in a NodeJS application.\nIf you are using other platforms, proceed to the step-by-step guide.

    \n

    First, install TypeORM globally:

    \n
    npm install typeorm -g
    \n

    Then go to the directory where you want to create a new project and run the command:

    \n
    typeorm init --name MyProject --database mysql
    \n

    Where name is the name of your project and database is the database you'll use.\nDatabase can be one of the following values: mysql, mariadb, postgres, cockroachdb, sqlite, mssql, oracle, mongodb,\ncordova, react-native, expo, nativescript.

    \n

    This command will generate a new project in the MyProject directory with the following files:

    \n
    MyProject
    ├── src              // place of your TypeScript code
    │   ├── entity       // place where your entities (database models) are stored
    │   │   └── User.ts  // sample entity
    │   ├── migration    // place where your migrations are stored
    │   └── index.ts     // start point of your application
    ├── .gitignore       // standard gitignore file
    ├── ormconfig.json   // ORM and database connection configuration
    ├── package.json     // node module dependencies
    ├── README.md        // simple readme file
    └── tsconfig.json    // TypeScript compiler options
    \n
    \n

    You can also run typeorm init on an existing node project, but be careful - it may override some files you already have.

    \n
    \n

    The next step is to install new project dependencies:

    \n
    cd MyProject
    npm install
    \n

    While installation is in progress, edit the ormconfig.json file and put your own database connection configuration options in there:

    \n
    {
       \"type\": \"mysql\",
       \"host\": \"localhost\",
       \"port\": 3306,
       \"username\": \"test\",
       \"password\": \"test\",
       \"database\": \"test\",
       \"synchronize\": true,
       \"logging\": false,
       \"entities\": [
          \"src/entity/**/*.ts\"
       ],
       \"migrations\": [
          \"src/migration/**/*.ts\"
       ],
       \"subscribers\": [
          \"src/subscriber/**/*.ts\"
       ]
    }
    \n

    Particularly, most of the time you'll only need to configure\nhost, username, password, database and maybe port options.

    \n

    Once you finish with configuration and all node modules are installed, you can run your application:

    \n
    npm start
    \n

    That's it, your application should successfully run and insert a new user into the database.\nYou can continue to work with this project and integrate other modules you need and start\ncreating more entities.

    \n
    \n

    You can generate an even more advanced project with express installed by running\ntypeorm init --name MyProject --database mysql --express command.

    \n
    \n
    \n

    You can generate docker-compose file by running\ntypeorm init --name MyProject --database postgres --docker command.

    \n
    \n

    Step-by-Step Guide

    \n

    What are you expecting from ORM?\nFirst of all, you are expecting it will create database tables for you\nand find / insert / update / delete your data without the pain of\nhaving to write lots of hardly maintainable SQL queries.\nThis guide will show you how to setup TypeORM from scratch and make it do what you are expecting from an ORM.

    \n

    Create a model

    \n

    Working with a database starts from creating tables.\nHow do you tell TypeORM to create a database table?\nThe answer is - through the models.\nYour models in your app are your database tables.

    \n

    For example, you have a Photo model:

    \n
    export class Photo {
        id: number;
        name: string;
        description: string;
        filename: string;
        views: number;
        isPublished: boolean;
    }
    \n

    And you want to store photos in your database.\nTo store things in the database, first you need a database table,\nand database tables are created from your models.\nNot all models, but only those you define as entities.

    \n

    Create an entity

    \n

    Entity is your model decorated by an @Entity decorator.\nA database table will be created for such models.\nYou work with entities everywhere with TypeORM.\nYou can load/insert/update/remove and perform other operations with them.

    \n

    Let's make our Photo model as an entity:

    \n
    import {Entity} from \"typeorm\";

    @Entity()
    export class Photo {
        id: number;
        name: string;
        description: string;
        filename: string;
        views: number;
        isPublished: boolean;
    }
    \n

    Now, a database table will be created for the Photo entity and we'll be able to work with it anywhere in our app.\nWe have created a database table, however what table can exist without columns?\nLet's create a few columns in our database table.

    \n

    Adding table columns

    \n

    To add database columns, you simply need to decorate an entity's properties you want to make into a column\nwith a @Column decorator.

    \n
    import {Entity, Column} from \"typeorm\";

    @Entity()
    export class Photo {

        @Column()
        id: number;

        @Column()
        name: string;

        @Column()
        description: string;

        @Column()
        filename: string;

        @Column()
        views: number;

        @Column()
        isPublished: boolean;
    }
    \n

    Now id, name, description, filename, views and isPublished columns will be added to the photo table.\nColumn types in the database are inferred from the property types you used, e.g.\nnumber will be converted into integer, string into varchar, boolean into bool, etc.\nBut you can use any column type your database supports by explicitly specifying a column type into the @Column decorator.

    \n

    We generated a database table with columns, but there is one thing left.\nEach database table must have a column with a primary key.

    \n

    Creating a primary column

    \n

    Each entity must have at least one primary key column.\nThis is a requirement and you can't avoid it.\nTo make a column a primary key, you need to use @PrimaryColumn decorator.

    \n
    import {Entity, Column, PrimaryColumn} from \"typeorm\";

    @Entity()
    export class Photo {

        @PrimaryColumn()
        id: number;

        @Column()
        name: string;

        @Column()
        description: string;

        @Column()
        filename: string;

        @Column()
        views: number;

        @Column()
        isPublished: boolean;
    }
    \n

    Creating an auto generated column

    \n

    Now, let's say you want your id column to be auto-generated (this is known as auto-increment / sequence / serial / generated identity column).\nTo do that, you need to change the @PrimaryColumn decorator to a @PrimaryGeneratedColumn decorator:

    \n
    import {Entity, Column, PrimaryGeneratedColumn} from \"typeorm\";

    @Entity()
    export class Photo {

        @PrimaryGeneratedColumn()
        id: number;

        @Column()
        name: string;

        @Column()
        description: string;

        @Column()
        filename: string;

        @Column()
        views: number;

        @Column()
        isPublished: boolean;
    }
    \n

    Column data types

    \n

    Next, let's fix our data types. By default, string is mapped to a varchar(255)-like type (depending on the database type).\nNumber is mapped to a integer-like type (depending on the database type).\nWe don't want all our columns to be limited varchars or integers.\nLet's setup correct data types:

    \n
    import {Entity, Column, PrimaryGeneratedColumn} from \"typeorm\";

    @Entity()
    export class Photo {

        @PrimaryGeneratedColumn()
        id: number;

        @Column({
            length: 100
        })
        name: string;

        @Column(\"text\")
        description: string;

        @Column()
        filename: string;

        @Column(\"double\")
        views: number;

        @Column()
        isPublished: boolean;
    }
    \n

    Column types are database-specific.\nYou can set any column type your database supports.\nMore information on supported column types can be found here.

    \n

    Creating a connection to the database

    \n

    Now, when our entity is created, let's create an index.ts (or app.ts whatever you call it) file and set up our connection there:

    \n
    import \"reflect-metadata\";
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection({
        type: \"mysql\",
        host: \"localhost\",
        port: 3306,
        username: \"root\",
        password: \"admin\",
        database: \"test\",
        entities: [
            Photo
        ],
        synchronize: true,
        logging: false
    }).then(connection => {
        // here you can start to work with your entities
    }).catch(error => console.log(error));
    \n

    We are using MySQL in this example, but you can use any other supported database.\nTo use another database, simply change the type in the options to the database type you are using:\nmysql, mariadb, postgres, cockroachdb, sqlite, mssql, oracle, cordova, nativescript, react-native,\nexpo, or mongodb.\nAlso make sure to use your own host, port, username, password and database settings.

    \n

    We added our Photo entity to the list of entities for this connection.\nEach entity you are using in your connection must be listed there.

    \n

    Setting synchronize makes sure your entities will be synced with the database, every time you run the application.

    \n

    Loading all entities from the directory

    \n

    Later, when we create more entities we need to add them to the entities in our configuration.\nThis is not very convenient, so instead we can set up the whole directory, from where all entities will be connected and used in our connection:

    \n
    import {createConnection} from \"typeorm\";

    createConnection({
        type: \"mysql\",
        host: \"localhost\",
        port: 3306,
        username: \"root\",
        password: \"admin\",
        database: \"test\",
        entities: [
            __dirname + \"/entity/*.js\"
        ],
        synchronize: true,
    }).then(connection => {
        // here you can start to work with your entities
    }).catch(error => console.log(error));
    \n

    But be careful with this approach.\nIf you are using ts-node then you need to specify paths to .ts files instead.\nIf you are using outDir then you'll need to specify paths to .js files inside outDir directory.\nIf you are using outDir and when you remove or rename your entities make sure to clear outDir directory\nand re-compile your project again, because when you remove your source .ts files their compiled .js versions\naren't removed from output directory and still are loaded by TypeORM because they are present in the outDir directory.

    \n

    Running the application

    \n

    Now if you run your index.ts, a connection with database will be initialized and a database table for your photos will be created.

    \n
    +-------------+--------------+----------------------------+
    |                         photo                           |
    +-------------+--------------+----------------------------+
    | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
    | name        | varchar(100) |                            |
    | description | text         |                            |
    | filename    | varchar(255) |                            |
    | views       | int(11)      |                            |
    | isPublished | boolean      |                            |
    +-------------+--------------+----------------------------+
    \n

    Creating and inserting a photo into the database

    \n

    Now let's create a new photo to save it in the database:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(connection => {

        let photo = new Photo();
        photo.name = \"Me and Bears\";
        photo.description = \"I am near polar bears\";
        photo.filename = \"photo-with-bears.jpg\";
        photo.views = 1;
        photo.isPublished = true;

        return connection.manager
                .save(photo)
                .then(photo => {
                    console.log(\"Photo has been saved. Photo id is\", photo.id);
                });

    }).catch(error => console.log(error));
    \n

    Once your entity is saved it will get a newly generated id.\nsave method returns an instance of the same object you pass to it.\nIt's not a new copy of the object, it modifies its "id" and returns it.

    \n

    Using async/await syntax

    \n

    Let's take advantage of the latest ES8 (ES2017) features and use async/await syntax instead:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        let photo = new Photo();
        photo.name = \"Me and Bears\";
        photo.description = \"I am near polar bears\";
        photo.filename = \"photo-with-bears.jpg\";
        photo.views = 1;
        photo.isPublished = true;

        await connection.manager.save(photo);
        console.log(\"Photo has been saved\");

    }).catch(error => console.log(error));
    \n

    Using Entity Manager

    \n

    We just created a new photo and saved it in the database.\nWe used EntityManager to save it.\nUsing entity manager you can manipulate any entity in your app.\nFor example, let's load our saved entity:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let savedPhotos = await connection.manager.find(Photo);
        console.log(\"All photos from the db: \", savedPhotos);

    }).catch(error => console.log(error));
    \n

    savedPhotos will be an array of Photo objects with the data loaded from the database.

    \n

    Learn more about EntityManager here.

    \n

    Using Repositories

    \n

    Now let's refactor our code and use Repository instead of EntityManager.\nEach entity has its own repository which handles all operations with its entity.\nWhen you deal with entities a lot, Repositories are more convenient to use than EntityManagers:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        let photo = new Photo();
        photo.name = \"Me and Bears\";
        photo.description = \"I am near polar bears\";
        photo.filename = \"photo-with-bears.jpg\";
        photo.views = 1;
        photo.isPublished = true;

        let photoRepository = connection.getRepository(Photo);

        await photoRepository.save(photo);
        console.log(\"Photo has been saved\");

        let savedPhotos = await photoRepository.find();
        console.log(\"All photos from the db: \", savedPhotos);

    }).catch(error => console.log(error));
    \n

    Learn more about Repository here.

    \n

    Loading from the database

    \n

    Let's try more load operations using the Repository:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let allPhotos = await photoRepository.find();
        console.log(\"All photos from the db: \", allPhotos);

        let firstPhoto = await photoRepository.findOne(1);
        console.log(\"First photo from the db: \", firstPhoto);

        let meAndBearsPhoto = await photoRepository.findOne({ name: \"Me and Bears\" });
        console.log(\"Me and Bears photo from the db: \", meAndBearsPhoto);

        let allViewedPhotos = await photoRepository.find({ views: 1 });
        console.log(\"All viewed photos: \", allViewedPhotos);

        let allPublishedPhotos = await photoRepository.find({ isPublished: true });
        console.log(\"All published photos: \", allPublishedPhotos);

        let [allPhotos, photosCount] = await photoRepository.findAndCount();
        console.log(\"All photos: \", allPhotos);
        console.log(\"Photos count: \", photosCount);

    }).catch(error => console.log(error));
    \n

    Updating in the database

    \n

    Now let's load a single photo from the database, update it and save it:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let photoToUpdate = await photoRepository.findOne(1);
        photoToUpdate.name = \"Me, my friends and polar bears\";
        await photoRepository.save(photoToUpdate);

    }).catch(error => console.log(error));
    \n

    Now photo with id = 1 will be updated in the database.

    \n

    Removing from the database

    \n

    Now let's remove our photo from the database:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let photoToRemove = await photoRepository.findOne(1);
        await photoRepository.remove(photoToRemove);

    }).catch(error => console.log(error));
    \n

    Now photo with id = 1 will be removed from the database.

    \n

    Creating a one-to-one relation

    \n

    Let's create a one-to-one relation with another class.\nLet's create a new class in PhotoMetadata.ts. This PhotoMetadata class is supposed to contain our photo's additional meta-information:

    \n
    import {Entity, Column, PrimaryGeneratedColumn, OneToOne, JoinColumn} from \"typeorm\";
    import {Photo} from \"./Photo\";

    @Entity()
    export class PhotoMetadata {

        @PrimaryGeneratedColumn()
        id: number;

        @Column(\"int\")
        height: number;

        @Column(\"int\")
        width: number;

        @Column()
        orientation: string;

        @Column()
        compressed: boolean;

        @Column()
        comment: string;

        @OneToOne(type => Photo)
        @JoinColumn()
        photo: Photo;
    }
    \n

    Here, we are using a new decorator called @OneToOne. It allows us to create a one-to-one relationship between two entities.\ntype => Photo is a function that returns the class of the entity with which we want to make our relationship.\nWe are forced to use a function that returns a class, instead of using the class directly, because of the language specifics.\nWe can also write it as () => Photo, but we use type => Photo as a convention to increase code readability.\nThe type variable itself does not contain anything.

    \n

    We also add a @JoinColumn decorator, which indicates that this side of the relationship will own the relationship.\nRelations can be unidirectional or bidirectional.\nOnly one side of relational can be owning.\nUsing @JoinColumn decorator is required on the owner side of the relationship.

    \n

    If you run the app, you'll see a newly generated table, and it will contain a column with a foreign key for the photo relation:

    \n
    +-------------+--------------+----------------------------+
    |                     photo_metadata                      |
    +-------------+--------------+----------------------------+
    | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
    | height      | int(11)      |                            |
    | width       | int(11)      |                            |
    | comment     | varchar(255) |                            |
    | compressed  | boolean      |                            |
    | orientation | varchar(255) |                            |
    | photoId     | int(11)      | FOREIGN KEY                |
    +-------------+--------------+----------------------------+
    \n

    Save a one-to-one relation

    \n

    Now let's save a photo, its metadata and attach them to each other.

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";
    import {PhotoMetadata} from \"./entity/PhotoMetadata\";

    createConnection(/*...*/).then(async connection => {

        // create a photo
        let photo = new Photo();
        photo.name = \"Me and Bears\";
        photo.description = \"I am near polar bears\";
        photo.filename = \"photo-with-bears.jpg\";
        photo.isPublished = true;

        // create a photo metadata
        let metadata = new PhotoMetadata();
        metadata.height = 640;
        metadata.width = 480;
        metadata.compressed = true;
        metadata.comment = \"cybershoot\";
        metadata.orientation = \"portrait\";
        metadata.photo = photo; // this way we connect them

        // get entity repositories
        let photoRepository = connection.getRepository(Photo);
        let metadataRepository = connection.getRepository(PhotoMetadata);

        // first we should save a photo
        await photoRepository.save(photo);

        // photo is saved. Now we need to save a photo metadata
        await metadataRepository.save(metadata);

        // done
        console.log(\"Metadata is saved, and relation between metadata and photo is created in the database too\");

    }).catch(error => console.log(error));
    \n

    Inverse side of the relationship

    \n

    Relations can be unidirectional or bidirectional.\nCurrently, our relation between PhotoMetadata and Photo is unidirectional.\nThe owner of the relation is PhotoMetadata, and Photo doesn't know anything about PhotoMetadata.\nThis makes it complicated to access PhotoMetadata from the Photo side.\nTo fix this issue we should add an inverse relation, and make relations between PhotoMetadata and Photo bidirectional.\nLet's modify our entities:

    \n
    import {Entity, Column, PrimaryGeneratedColumn, OneToOne, JoinColumn} from \"typeorm\";
    import {Photo} from \"./Photo\";

    @Entity()
    export class PhotoMetadata {

        /* ... other columns */

        @OneToOne(type => Photo, photo => photo.metadata)
        @JoinColumn()
        photo: Photo;
    }
    \n
    import {Entity, Column, PrimaryGeneratedColumn, OneToOne} from \"typeorm\";
    import {PhotoMetadata} from \"./PhotoMetadata\";

    @Entity()
    export class Photo {

        /* ... other columns */

        @OneToOne(type => PhotoMetadata, photoMetadata => photoMetadata.photo)
        metadata: PhotoMetadata;
    }
    \n

    photo => photo.metadata is a function that returns the name of the inverse side of the relation.\nHere we show that the metadata property of the Photo class is where we store PhotoMetadata in the Photo class.\nInstead of passing a function that returns a property of the photo, you could alternatively simply pass a string to @OneToOne decorator, like "metadata".\nBut we used this function-typed approach to make our refactoring easier.

    \n

    Note that we should use @JoinColumn decorator only on one side of a relation.\nWhichever side you put this decorator on will be the owning side of the relationship.\nThe owning side of a relationship contains a column with a foreign key in the database.

    \n

    Loading objects with their relations

    \n

    Now let's load our photo and its photo metadata in a single query.\nThere are two ways to do it - using find* methods or using QueryBuilder functionality.\nLet's use find* methods first.\nfind* methods allow you to specify an object with the FindOneOptions / FindManyOptions interface.

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";
    import {PhotoMetadata} from \"./entity/PhotoMetadata\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let photoRepository = connection.getRepository(Photo);
        let photos = await photoRepository.find({ relations: [\"metadata\"] });

    }).catch(error => console.log(error));
    \n

    Here, photos will contain an array of photos from the database, and each photo will contain its photo metadata.\nLearn more about Find Options in this documentation.

    \n

    Using find options is good and dead simple, but if you need a more complex query, you should use QueryBuilder instead.\nQueryBuilder allows more complex queries to be used in an elegant way:

    \n
    import {createConnection} from \"typeorm\";
    import {Photo} from \"./entity/Photo\";
    import {PhotoMetadata} from \"./entity/PhotoMetadata\";

    createConnection(/*...*/).then(async connection => {

        /*...*/
        let photos = await connection
                .getRepository(Photo)
                .createQueryBuilder(\"photo\")
                .innerJoinAndSelect(\"photo.metadata\", \"metadata\")
                .getMany();


    }).catch(error => console.log(error));
    \n

    QueryBuilder allows creation and execution of SQL queries of almost any complexity.\nWhen you work with QueryBuilder, think like you are creating an SQL query.\nIn this example, "photo" and "metadata" are aliases applied to selected photos.\nYou use aliases to access columns and properties of the selected data.

    \n

    Using cascades to automatically save related objects

    \n

    We can setup cascade options in our relations, in the cases when we want our related object to be saved whenever the other object is saved.\nLet's change our photo's @OneToOne decorator a bit:

    \n
    export class Photo {
        /// ... other columns

        @OneToOne(type => PhotoMetadata, metadata => metadata.photo, {
            cascade: true,
        })
        metadata: PhotoMetadata;
    }
    \n

    Using cascade allows us not to separately save photo and separately save metadata objects now.\nNow we can simply save a photo object, and the metadata object will be saved automatically because of cascade options.

    \n
    createConnection(options).then(async connection => {

        // create photo object
        let photo = new Photo();
        photo.name = \"Me and Bears\";
        photo.description = \"I am near polar bears\";
        photo.filename = \"photo-with-bears.jpg\";
        photo.isPublished = true;

        // create photo metadata object
        let metadata = new PhotoMetadata();
        metadata.height = 640;
        metadata.width = 480;
        metadata.compressed = true;
        metadata.comment = \"cybershoot\";
        metadata.orientation = \"portrait\";

        photo.metadata = metadata; // this way we connect them

        // get repository
        let photoRepository = connection.getRepository(Photo);

        // saving a photo also save the metadata
        await photoRepository.save(photo);

        console.log(\"Photo is saved, photo metadata is saved too.\")

    }).catch(error => console.log(error));
    \n

    Notice that we now set the photo's metadata property, instead of the metadata's photo property as before. The cascade feature only works if you connect the photo to its metadata from the photo's side. If you set the metadata's side, the metadata would not be saved automatically.

    \n

    Creating a many-to-one / one-to-many relation

    \n

    Let's create a many-to-one / one-to-many relation.\nLet's say a photo has one author, and each author can have many photos.\nFirst, let's create an Author class:

    \n
    import {Entity, Column, PrimaryGeneratedColumn, OneToMany, JoinColumn} from \"typeorm\";
    import {Photo} from \"./Photo\";

    @Entity()
    export class Author {

        @PrimaryGeneratedColumn()
        id: number;

        @Column()
        name: string;

        @OneToMany(type => Photo, photo => photo.author) // note: we will create author property in the Photo class below
        photos: Photo[];
    }
    \n

    Author contains an inverse side of a relation.\nOneToMany is always an inverse side of relation, and it can't exist without ManyToOne on the other side of the relation.

    \n

    Now let's add the owner side of the relation into the Photo entity:

    \n
    import {Entity, Column, PrimaryGeneratedColumn, ManyToOne} from \"typeorm\";
    import {PhotoMetadata} from \"./PhotoMetadata\";
    import {Author} from \"./Author\";

    @Entity()
    export class Photo {

        /* ... other columns */

        @ManyToOne(type => Author, author => author.photos)
        author: Author;
    }
    \n

    In many-to-one / one-to-many relation, the owner side is always many-to-one.\nIt means that the class that uses @ManyToOne will store the id of the related object.

    \n

    After you run the application, the ORM will create the author table:

    \n
    +-------------+--------------+----------------------------+
    |                          author                         |
    +-------------+--------------+----------------------------+
    | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
    | name        | varchar(255) |                            |
    +-------------+--------------+----------------------------+
    \n

    It will also modify the photo table, adding a new author column and creating a foreign key for it:

    \n
    +-------------+--------------+----------------------------+
    |                         photo                           |
    +-------------+--------------+----------------------------+
    | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
    | name        | varchar(255) |                            |
    | description | varchar(255) |                            |
    | filename    | varchar(255) |                            |
    | isPublished | boolean      |                            |
    | authorId    | int(11)      | FOREIGN KEY                |
    +-------------+--------------+----------------------------+
    \n

    Creating a many-to-many relation

    \n

    Let's create a many-to-one / many-to-many relation.\nLet's say a photo can be in many albums, and each album can contain many photos.\nLet's create an Album class:

    \n
    import {Entity, PrimaryGeneratedColumn, Column, ManyToMany, JoinTable} from \"typeorm\";

    @Entity()
    export class Album {

        @PrimaryGeneratedColumn()
        id: number;

        @Column()
        name: string;

        @ManyToMany(type => Photo, photo => photo.albums)
        @JoinTable()
        photos: Photo[];
    }
    \n

    @JoinTable is required to specify that this is the owner side of the relationship.

    \n

    Now let's add the inverse side of our relation to the Photo class:

    \n
    export class Photo {
        /// ... other columns

        @ManyToMany(type => Album, album => album.photos)
        albums: Album[];
    }
    \n

    After you run the application, the ORM will create a album_photos_photo_albums junction table:

    \n
    +-------------+--------------+----------------------------+
    |                album_photos_photo_albums                |
    +-------------+--------------+----------------------------+
    | album_id    | int(11)      | PRIMARY KEY FOREIGN KEY    |
    | photo_id    | int(11)      | PRIMARY KEY FOREIGN KEY    |
    +-------------+--------------+----------------------------+
    \n

    Don't forget to register the Album class with your connection in the ORM:

    \n
    const options: ConnectionOptions = {
        // ... other options
        entities: [Photo, PhotoMetadata, Author, Album]
    };
    \n

    Now let's insert albums and photos to our database:

    \n
    let connection = await createConnection(options);

    // create a few albums
    let album1 = new Album();
    album1.name = \"Bears\";
    await connection.manager.save(album1);

    let album2 = new Album();
    album2.name = \"Me\";
    await connection.manager.save(album2);

    // create a few photos
    let photo = new Photo();
    photo.name = \"Me and Bears\";
    photo.description = \"I am near polar bears\";
    photo.filename = \"photo-with-bears.jpg\";
    photo.views = 1
    photo.isPublished = true
    photo.albums = [album1, album2];
    await connection.manager.save(photo);

    // now our photo is saved and albums are attached to it
    // now lets load them:
    const loadedPhoto = await connection
        .getRepository(Photo)
        .findOne(1, { relations: [\"albums\"] });
    \n

    loadedPhoto will be equal to:

    \n
    {
        id: 1,
        name: \"Me and Bears\",
        description: \"I am near polar bears\",
        filename: \"photo-with-bears.jpg\",
        albums: [{
            id: 1,
            name: \"Bears\"
        }, {
            id: 2,
            name: \"Me\"
        }]
    }
    \n

    Using QueryBuilder

    \n

    You can use QueryBuilder to build SQL queries of almost any complexity. For example, you can do this:

    \n
    let photos = await connection
        .getRepository(Photo)
        .createQueryBuilder(\"photo\") // first argument is an alias. Alias is what you are selecting - photos. You must specify it.
        .innerJoinAndSelect(\"photo.metadata\", \"metadata\")
        .leftJoinAndSelect(\"photo.albums\", \"album\")
        .where(\"photo.isPublished = true\")
        .andWhere(\"(photo.name = :photoName OR photo.name = :bearName)\")
        .orderBy(\"photo.id\", \"DESC\")
        .skip(5)
        .take(10)
        .setParameters({ photoName: \"My\", bearName: \"Mishka\" })
        .getMany();
    \n

    This query selects all published photos with "My" or "Mishka" names.\nIt will select results from position 5 (pagination offset),\nand will select only 10 results (pagination limit).\nThe selection result will be ordered by id in descending order.\nThe photo's albums will be left-joined and their metadata will be inner joined.

    \n

    You'll use the query builder in your application a lot.\nLearn more about QueryBuilder here.

    \n

    Samples

    \n

    Take a look at the samples in sample for examples of usage.

    \n

    There are a few repositories which you can clone and start with:

    \n\n

    Extensions

    \n

    There are several extensions that simplify working with TypeORM and integrating it with other modules:

    \n\n

    Contributing

    \n

    Learn about contribution here and how to setup your development environment here.

    \n

    This project exists thanks to all the people who contribute:

    \n

    \n

    Sponsors

    \n

    Open source is hard and time-consuming. If you want to invest into TypeORM's future you can become a sponsor and make our core team to spend more time on TypeORM's improvements and new features. Become a sponsor

    \n

    \n

    Gold Sponsors

    \n

    Become a gold sponsor and get a premium technical support from our core contributors. Become a gold sponsor

    \n

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/hook":{"name":"@nativescript/hook","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/hook

    \n

    This module gives you an easier way to install hooks into NativeScript projects when using the tns install <module> command. A project hook is some sort of script that is configured to be executed when the NativeScript CLI executes some action.

    \n

    Hooks go into the hooks/ folder of a project. For example, when tns prepare ... is executed, all script files in the hooks/before-prepare/ and hooks/after-prepare/ folders are executed, as well.

    \n

    This module simplifies the process of installing the scripts into the right project folder.

    \n

    How to use

    \n

    Describe the hooks

    \n

    First, add a description of your hooks to the module's package.json. Here's an example:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"before-prepare\",
            \"script\": \"lib/before-prepare.js\"
          }
        ]
      },
    }
    \n

    The above specifies that the script lib/before-prepare.js should be executed when the tns prepare ... command is executed. the "type" property specifies the type of the hook to install. The "script" property specifies the path to the script to execute. You can add more hooks by extending the "hooks" array.

    \n

    Install the hooks

    \n

    Add a post-install and pre-uninstall script to your package.json, if you haven't done so already:

    \n
      \"scripts\": {
        ...
        \"postinstall\": \"node postinstall.js\",
        \"preuninstall\": \"node preuninstall.js\"
      },
    \n

    The post-install script (postinstall.js in the example) should contain the following line:

    \n
    require('@nativescript/hook')(__dirname).postinstall();
    \n

    The pre-uninstall script (preuninstall.js in the example) should contain the following line:

    \n
    require('@nativescript/hook')(__dirname).preuninstall();
    \n

    These two hooks will take care of installing and removing the hooks from the NativeScript project, when your module is installed or uninstalled.

    \n

    tns install <module>

    \n

    NativeScript modules that install hooks are intended to be installed using the tns install <module> command, not through npm directly. During module installation the NativeScript CLI provides information to the post-install script where to put the hooks. The following environment variables are defined when installing through tns install <module>:

    \n\n

    Modules installed this way can be uninstalled simply by running npm rm --save-dev.

    \n

    In-process hooks

    \n

    By default, hooks are executed in a child process and execution continues when the child process dies. This gives you flexibility when writing your hooks, but doesn't allow you to use any of the services of the CLI.

    \n

    To that end, in-process hooks allow you to execute your hooks in such a way so that you can use any of the services available from the injector. In-process hooks work only for JavaScript hooks. To enable in-process execution, all you need to have is a module.exports = ... statement in the hook. For example, if the hook script is:

    \n
    module.exports = function($logger) {
    };
    \n

    Then, the hook script will be require'd by the CLI and the exported function will be called through the injector.

    \n

    Hooks can take a special injected argument named hookArgs:

    \n
    module.exports = function(hookArgs) {
    };
    \n

    hookArgs is a hash containing all the arguments passed to the hooked method. For example, the prepare hook is activated by the CLI method preparePlatform(platform: string). Here, the hook will get the value of the platform argument in the hookArgs.platform property.

    \n

    If you execute asynchronous code in your hook, you need to return a promise, otherwise execution will continue before your hook completes:

    \n
    var mkdirp = require('mkdirp');
    module.exports = function($logger) {
      return new Promise(function(resolve, reject) {
          mkdirp('somedir', function(err) {
              if (err) {
                reject(err);
              else {
                resolve();
              }
            })
        });
    }
    \n

    And finally, when installing in-process hooks through this module, you need to explicitly specify that using the inject property of the script descriptor in the package.json:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"after-prepare\",
            \"script\": \"lib/after-prepare.js\",
            \"inject\": true
          }
        ]
      },
    }
    \n

    You have the ability to define a custom name to your hook in package.json, this attribute is optional and defaults to the plugin package name:

    \n
    {
      \"nativescript\": {
        \"hooks\": [
          {
            \"type\": \"after-prepare\",
            \"script\": \"lib/after-prepare.js\",
            \"name\": \"my-custom-hook\"
          }
        ]
      },
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-star-rating":{"name":"nativescript-vue-star-rating","version":"0.0.5","license":"MIT","readme":"

    NativeScript-Vue Star Rating

    \n

    A plugin which provides a 1 to 5 Star Rating component to display and rate.

    \n

    Features:

    \n\n

    Screenshots

    \n

    \"Screenshot

    \n

    Installation

    \n
    npm i --save nativescript-vue-star-rating
    \n
    // main.js
    import Vue from 'nativescript-vue';
    ...
    import StarRating from 'nativescript-vue-star-rating';
    Vue.use(StarRating);
    \n

    Use in template:

    \n
    ...
    <StarRating :value=\"rating\" size=\"90\" />
    ...
    \n

    ## Props

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropTypeDescriptionDefault Value
    valueNumberThe rating value1
    sizeString, NumberSize in pixels of width and height of the star75
    fillColorStringCSS color for the filled stars'#FFEB0A'
    emptyColorStringCSS color for the empty stars'#ABABAB'
    outlineColorStringCSS color for the star outline'#000'
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventReturnsDescription
    ratingSelectedNumberReturns the rating selected by tap from 1 to 5
    \n

    If you want to use the component as display only, just don't add an event listener for this event.

    \n

    Caveats

    \n

    Star outline is a work in progress, you can customize the color but the outline width is still missing.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuxstep/nativescript-spotify":{"name":"@nuxstep/nativescript-spotify","version":"0.4.0","license":"Apache-2.0","readme":"

    @nuxstep/nativescript-spotify

    \n
    \n

    IMPORTANT: This project is in early development

    \n
    \n

    About

    \n

    This project surged from our own needs, as there's no Spotify plugin available for NativeScript (or at least updated).

    \n

    For now, the goal of this plugin is simple: Integrate Spotify into your app through the Spotify App Remote SDK, so you can control playback and get the user recommended content items.

    \n

    Later (maybe), we can implement the Spotify Authentication SDK and Web API for more features, but that will depend on our available time and needs, so, feel free to help the project through issue submissions and pull requests.

    \n

    Setup

    \n

    Add the plugin to your NativeScript project with:

    \n
    ns plugin add @nuxstep/nativescript-spotify
    \n

    Android

    \n

    In your app project, head over to App_Resources/Android/src/main/res and open AndroidManifest.xml. Inside the <activity> tag with the name com.tns.NativeScriptActivity, add the property android:launchMode="singleTask", as follows:

    \n
    <activity
      android:name=\"com.tns.NativeScriptActivity\"
      android:label=\"@string/title_activity_kimera\"
      android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode\"
      android:theme=\"@style/LaunchScreenTheme\"
      android:launchMode=\"singleTask\">
    \n

    Before the first <activity> tag is closed, add the following:

    \n
    <!-- Custom URI schemes -->
    <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />

      <data
        android:scheme=\"plugindemo\"
        android:host=\"spotify-login-callback\" />
    </intent-filter>
    \n

    Here you will set the Redirect URI for the Spotify App Remote authentication (it reads as plugindemo://spotify-login-callback). Change the android:scheme to something related to your app (like myapp) and host you can keep it as spotify-login-callback. Write down your Redirect URI, you will need it to set up the SpotifyAppRemote class.

    \n

    Before the <application> tag closes, add the following:

    \n
    <!-- Spotify Activity -->
    <activity
      android:name=\"com.spotify.sdk.android.authentication.LoginActivity\"
      android:theme=\"@android:style/Theme.Translucent.NoTitleBar\" />
    \n

    For Android 11 or higher, you also need to specify which other applications your application can query (read about it here). To do that, simply add the following snippet one level below the <manifest> tag:

    \n
    <queries>
      <package android:name=\"com.spotify.music\" />
    </queries>
    \n

    You'll need an App Fingerprint too. Refer to https://developer.spotify.com/documentation/android/quick-start/#register-app-fingerprints on how to create one. Write it down because you will need it later.

    \n

    iOS

    \n

    In your app project, head over to App_Resources/iOS and open Info.plist. At the end of the file, before the last </dict> tag closes, add the following:

    \n
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>spotify</string>
    </array>
    \n

    This allows the Spotify SDK to open the Spotify app through its URL scheme. After that, add the following:

    \n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLName</key>
        <string>com.nuxstep.nativescript.plugindemo</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>plugindemo</string>
        </array>
      </dict>
    </array>
    \n

    Change com.nuxstep.nativescript.plugindemo to your app bundle name. Also, change plugindemo to your app URL scheme. Use the same URL scheme from Android for the sake of simplicity.

    \n

    In your app entry point (usually app.ts), import isIOS and SpotifyAppRemote at the top of the file:

    \n
    import { isIOS } from '@nativescript/core';
    import { SpotifyAppRemote } from '@nuxstep/nativescript-spotify';
    \n

    Then, implement a custom app delegate before your app starts, usually before Application.run() if you are using plain NativeScript.

    \n
    /**
     * Implement a custom AppDelegate on iOS so we can get the access token
     * returned from Spotify and store it on SpotifyAppRemote class
     */
    if (isIOS) {
    \t@NativeClass()
    \tclass AppDelegate extends UIResponder implements UIApplicationDelegate {
    \t\tpublic static ObjCProtocols = [UIApplicationDelegate];

    \t\tapplicationOpenURLOptions(_application: UIApplication, url: NSURL, _options: any): boolean {
    \t\t\tSpotifyAppRemote.setAuthorizationParameters(url);
    \t\t\treturn true;
    \t\t}
    \t}
    \tApplication.ios.delegate = AppDelegate;
    }
    \n

    If you are not using TypeScript, refer to https://v7.docs.nativescript.org/core-concepts/application-lifecycle#ios-uiapplicationdelegate on how to implement the app delegate with JavaScript.

    \n

    Spotify Developer

    \n

    Head over to https://developer.spotify.com/dashboard and register a developer account.

    \n

    In the dashboard, click on CREATE AN APP and provide a name and an description.

    \n

    Inside your app dashboard, click on EDIT SETTINGS. Set the Redirect URI as you have defined before (e.g. myapp://spotify-login-callback) and click on ADD.

    \n

    On section Bundle IDs, insert your app bundle name (e.g. com.example.myapp) and click on ADD. This one is for iOS.

    \n

    On section Android Packages, insert your app package name (e.g. com.example.myapp) and insert the App Fingerprint you've created before. Click on ADD and then on SAVE to finish.

    \n

    Write down your Client ID, you will need it to set up the SpotifyAppRemote class.

    \n

    Usage

    \n

    First, you need to pass the Client ID and Redirect URI to the SpotifyAppRemote class. You can do that in your app entry point before the custom app delegate:

    \n
    SpotifyAppRemote.setClientId('SPOTIFY_CLIENT_ID');
    SpotifyAppRemote.setRedirectUri('APP_REDIRECT_URI');
    \n

    In the page where you want to use SpotifyAppRemote, add to the top of the file:

    \n
    import { isIOS } from '@nativescript/core';
    import { SpotifyAppRemote } from '@nuxstep/nativescript-spotify';
    \n

    Then, somewhere you want, connect to SpotifyAppRemote:

    \n
    /**
     * If platform is iOS, we need to open the app and start playback
     * before connecting to SpotifyAppRemote. This is an iOS-specific
     * limitation.
     */
    if (isIOS) {
    \tawait SpotifyAppRemote.authorizeAndPlayURI();
    }

    await SpotifyAppRemote.connect();
    \n

    You can pass any Spotify URI to authorizeAndPlayURI(). If you pass an empty string or no parameter at all, it'll try to play the user's last played song.

    \n

    To understand how to use the plugin, refer to:

    \n\n

    This README will be updated with the available methods at a later time.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-with-chat":{"name":"nativescript-zendesk-with-chat","version":"0.2.4","license":"Apache-2.0","readme":"

    Zendesk Plugin for the NativeScript framework

    \n

    Setup

    \n\n

    Add the plugin

    \n
    var zendeskModule = require(\"nativescript-zendesk\");
    var zendesk = null; // Place to store the activated object

    //Somewhere on load
    zendesk = zendeskModule.init({
        appId: \"\", //required
        url: \"\", //required
        clientId: \"\", //required
    \tadditionalInfo: \"Some extra details\", //(optional)
    \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
        enableLogging: true, //(optional), bool
        locale: \"en-us\" //(optional), string
    });
    \n

    Open the Help Center

    \n
    //Loads the main all category view
    zendesk.openHelpCenter();

    //Loads up a specific category
    zendesk.openHelpCenter({
            type: \"Category\",
            id: 202551987,//CategoryID: Must be a number, not a string
            name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
        });
        
    //Loads up a specific section
    zendesk.openHelpCenter({
            type: \"Section\",
            id: 203791988, //SectionID: Must be a number, not a string
            name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
        });
    \n

    Open the Request Contact List, shows previous conversations and ability to create new

    \n
    zendesk.openContactList();
    \n

    Open the Create new Request screen

    \n
    zendesk.createContactRequest();
    \n

    Options

    \n

    Set identify a user

    \n
        zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
            
        zendesk.createContactRequest();
    \n

    iOS Theme

    \n

    Docs

    \n

    //Create the theme
    //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
    var myTheme = {
    \tZDKSupportView: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttableBackgroundColor: \"#E0E0E0\",
    \t\tseparatorColor: \"#E0E0E0\",
    \t
    \t\t//0 = light, 1=dark
    \t\tsearchBarStyle: 0,
    \t\t
    \t\tnoResults: {
    \t\t\tfoundLabelColor: \"#E0E0E0\",
    \t\t\tfoundLabelBackground: \"#E0E0E0\",
    \t\t\tcontactButtonBackground: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
    \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
    \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
    \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\t\tcontactButtonBorderWidth: 1.0,
    \t\t\tcontactButtonCornerRadius: 4.0
    \t\t} 
    \t},
    \tZDKSupportTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportArticleTableViewCell: {
    \t\tviewBackgroundColor: \"#E0E0E0\",
    \t\tparentsLabelColor: \"#E0E0E0\",
    \t\tparnetsLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tlabelBackground: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKSupportAttachmentCell: {
    \t\tbackgroundColor: \"#E0E0E0\",
    \t\ttitleLabelBackground: \"#E0E0E0\",
    \t\ttitleLabelColor: \"#E0E0E0\",
    \t\tfileSizeLabelBackground: \"#E0E0E0\",
    \t\tfileSizeLabelColor: \"#E0E0E0\",
    \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
    \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
    \t},
    \tZDKNavigationBar: {
    \t\t\ttintColor: \"#E0E0E0\",
    \t\t\tbarTintColor: \"#E0E0E0\",
    \t\t\ttitleColor: \"#E0E0E0\",
    \t}
    };
    \t
    //Load the theme
    zendesk.setTheme(myTheme);
    \n

    Android Theme

    \n

    None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

    \n

    Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

    \n
    <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
    \n

    And add your custom theme to the App_resources/Android/values/styles.xml

    \n
    <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
    \t<!-- THIS is where you can set the accent color -->
    \t<item name=\"colorAccent\">@color/ns_accent</item>
    \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
    </style>

    <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
        <!-- THIS is where you can color the back arrow! -->
        <item name=\"colorControlNormal\">@color/ns_accent</item>
    </style>
    \n

    Zendesk documentation is:

    \n

    Docs

    \n

    Other Notes

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-dynamo":{"name":"nativescript-vue-dynamo","version":"0.1.0","license":"MIT","readme":"

    Nativescript-Vue-Dynamo

    \n

    Nativescript-Vue-Dynamo is a dynamic component router implementation that is suitable for NativeScript-Vue.

    \n

    It uses Vue Dynamic Components to simulate the normal navigation patterns of a Nativescript-Vue app. It does this by plugging into Vue-Router and Vuex. This implementation also supports "Child Routes" by using the same Dynamic Component behavior, in a nested manner, to allow you to navigate within the parent/child routes.

    \n

    To be clear: we are not actually using the underlying mechanics of Vue-Router to navigate through the app as this has been problematic issue when trying to use Nativescript-Vue historically. However, we are doing things like plugging into the main Route Config as a common shared configuration and then using a router.afterEach hook to update the route history that we are keeping in the state manager. When the route history state changes, the dynamic components will cause the app to load a new route or Page. This effectively mimcs normal navigation patterns.

    \n

    A further point must be made: we are also not using the underlying mechanics of Nativescript-Vue to navigate. There is no $navigateTo or $navigateBack going on. Thus, we keep something similar to Nativescript's navigation stack inside of our state manager so that we can track forwards and backwards movement as needed.

    \n

    This project takes many of the same ideas in Vuex-Router-Sync and Nativescript-Vue-Navigator and combines them in a way that simulates the traditional routing experience withing a Nativescript-Vue app.

    \n

    Quick Start

    \n
    npm install --save nativescript-vue-dynamo
    \n

    Main entry point (main.js or main.native.js)

    \n
    import Vue from 'nativescript-vue';
    import App from './App.vue';
    import store from './store';
    import router, { routes } from './router';

    import Dynamo from 'nativescript-vue-dynamo';
    Vue.use( Dynamo, {
      store,
      router,
      routes,
    });
    \n

    Vue-Router Config

    \n

    Inside or your Vue-Router config, you will want to split out your route config into it's own array as modeled below. You can then use many of the extra options provided by Vue-Router out of the box such as adding the meta object. Most built in router hooks should be available to help assist you as well. Notice the routeHistoryName in the meta tags for all routes. Also, for child routes, notice the parentRouteHistoryName. These two items should be used in this manner to help assist Dynamo with tracking where it is at and where it needs to go. Finally, also notice the alias property in the first child route. This helps tell Dynamo which child route is the default child route.

    \n
    export const routes = [
      {
        name: 'home',
        path: '/home',
        component: () => import(/* webpackChunkName: \"home\" */ '~/views/Home'),
        meta: {
          title: 'Home',
          auth: true,
          routeHistoryName: 'main',
        },
      },
      {
        name: 'login',
        path: '/login',
        component: () => import(/* webpackChunkName: \"login\" */ '~/views/Login'),
        meta: {
          title: 'Login',
          auth: false,
          routeHistoryName: 'main',
        },
      },
        {
        name: '',
        path: '/first',
        component: () => import(/* webpackChunkName: \"first\" */ '~/views/First'),
        props: true,
        meta: {
          title: 'First',
          auth: true,
          routeHistoryName: 'main',
        },
        children: [
          {
            name: 'dynamo-one',
            alias: '/',
            path: '/dynamo-one',
            component: () => import(/* webpackChunkName: \"dynamo-one\" */ '~/views/Dynamo-One'),
            meta: {
              title: 'Dynamo One',
              auth: true,
              routeHistoryName: 'first',
              parentRouteHistoryName: 'main',
            },
          },
          {
            name: 'dynamo-two',
            path: '/dynamo-two',
            component: () => import(/* webpackChunkName: \"dynamo-two\" */ '~/views/Dynamo-Two'),
            meta: {
              title: 'Dynamo Two',
              auth: true,
              routeHistoryName: 'first',
              parentRouteHistoryName: 'main',
            },
          },
        ],
      }
    ]
    \n

    App.vue

    \n

    Inside of your App.vue, you can do something simple as below. Notice we are sending two required props into the component:

    \n
      \n
    1. defaultRoute - This will make sure that the first page loaded is the one specified by this value. It must also match an actual route in your router config.
      2. \n
    2. routeHistoryName - This name will end up being the id of the frame/div loaded and will also be used to track via state manager which frame/div we are navigating within.
      3. \n
    \n

    These two options are mandatory for this package to work correctly.

    \n
    <template>
      <Page actionBarHidden=\"true\">
        <Dynamo
          :routeHistoryName=\"'main'\"
          :defaultRoute=\"'home'\"
        />
      </Page>
    </template>
    \n

    Inside of App.vue, you could even provide your own wrapper around the Dynamo component. This could be a StackLayout or any of the other layout components such as GridLayout. Just be aware that any alternative layout items will not be replaced when the Dynamo component updates itself. This might be useful if you want a bottom navigation button area and then have the buttons selected switch out the item in the first row of the Grid:

    \n
    <template>
      <Page actionBarHidden=\"true\">
        <GridLayout row=\"*, auto, auto, auto\">
          <Dynamo
            :routeHistoryName=\"'main'\"
            :defaultRoute=\"defaultRoute\"
            row=\"0\"
          />
          <Button text=\"First\" @tap=\"$goTo({ path: '/first'})\" row=\"0\" />
          <Button text=\"Second\" @tap=\"$goTo({ name: 'second', params: { msg: 'Hello, this is a prop' }})\" row=\"1\" />
          <Button text=\"Logout\" @tap=\"$logout('main')\" row=\"2\" />
        </GridLayout>
      </Page>
    </template>
    \n

    Navigating

    \n

    Because we are plugging into Vue-Router, many of the same programmatic navigation aides available there should be usable within Nativescript-Vue. So things like route.push() and route.back() should work. Others may not and if you find something that is not working, please submit an issue.

    \n

    In the example above, we are providing two different ways to route within the $goTo navigation aide. Refer to the Navigation Aides section below for more information about this function.\nThe first passes an object that should look similiar to something you pass for a route.push with vue-router, while the second also passes params to the route. Any params passed to the route will be forwarded on to the route as a prop. This allows you to dynamically pass props to your route.

    \n

    Child routes

    \n

    You can use "child route" like features as well. You will build out your child route config as you normally would with Vue-Router except you must add a meta tag into the child route's config:

    \n
    meta: {
      title: 'Dynamo One',
      auth: true,
      routeHistoryName: 'first',
      parentRouteHistoryName: 'main',
    },
    \n

    By adding the meta take and then adding the parentRouteHistoryName property you will effecively activate the parent/child relationship between components and this will mimic many of the parent/child functions of Vue-Router. Notice that the parentRouteHistoryName property is equal to the previously used routeHistoryName and routeHistoryName is now something entirely different. You would then just add a Dynamo component into the Parent view as normal. Notice the routeHistoryName in the route config above matches the routeHistoryName prop in the component below.

    \n
    <template>
      <Page>
        <ActionBar :title=\"navbarTitle\" />
        <Dynamo
          :routeHistoryName=\"'first'\"
          :defaultRoute=\"'dynamo-one'\"
        />
      </Page>
    </template>
    \n

    You can also provide an option of simulating Nativescript's built in clearHistory navigation option. You can provide a route parameter named clearHistory and this will reset the route history state for the corrosponding routeHistoryName.

    \n

    For example, given you are on a Login page, and successfully log in you would navigate to the Home page with

    \n
    $router.push({ name: 'home', params: { routeHistoryName: 'main', clearHistory: 'true'}});
    \n

    or

    \n
    this.$goTo('home', true);
    \n

    Note that we used clearHistory: true to prevent the back button from going back to the login page or just passed true as the 2nd prop in this.$goTo.

    \n

    Optional Navigation Aides

    \n

    This package is also providing some additional Navigation Aides via Vue.prototype that will help assist you navigating within your app.

    \n
      \n
    1. \n

      $goTo(location, routeHistoryName, parentRouteHistoryName?, clearHistory?, onComplete?, onAbort?)

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeRequiredPurpose
      locationstring or LocationXWhere you want to go. If this is a string, then it will navigate to that route. If it is a vue-router Location Object, then it will take the included options into account when navigating.
      clearHistorybooleanclear the navigation history being kept in the state manager. Will default to false
      onCompleteFunctionCallback to be called when the navigation successfully completes (after all async hooks are resolved).
      onAbortError HandlerCallback for when the navigation is aborted (navigated to the same route, or to a different route before current navigation has finished)
      \n

      For convience we are constructing a router.push behind the scenes. We did this as a matter of convience since we are adding a required route parameter as well as some optional route parameters to help us track navigation. You could just as easily still use router.push if you want as seen in the Login example above.

      \n
      2. \n
    2. \n

      $goBack() - It will check to see if you are navigating back to a sibling route, or going backwards to a parent route. It will also check to see if this is the last page left in the frame and if there is a parent route, it will transition to it.

      \n
      3. \n
    3. \n

      $goBackToParent(routeHistoryName, parentRouteHistoryName) - Provide the child routeHistoryName and the parentRouteHistoryName and it will navigate back up the route tree. This method is actually called for you if when you use $goBack() and there is a need to transition backwards to a parent Route.

      \n
      4. \n
    \n

    Event Handling and Refs

    \n

    The Dynamo component is acting as a "middle-man" between the components you are concerned with. Thus, the relationship looks something like this Parent -> Child(Dynamo) -> Grandchild. This means you won't be able to handle events or use refs to call functions on the grandchild as you normally would. Because of this, we have provided a way to handle both of these common patterns.

    \n

    Event Handling

    \n

    When you call the Dynamo component, you can add an additional parameter that has a very specific way of referencing it whereby it must include the routeHistoryName within it. Notice that with the v-on we are including first as the first string in the kebab case name. The pattern you will need to use is "routeHistoryName + -event-handler". This lets Dynamo know which parent component to bubble the event up to.

    \n
    <Dynamo
      :routeHistoryName=\"'first'\"
      :defaultRoute=\"'dynamo-one'\"
      :functionHandler=\"functionHandler\"
      @first-event-handler=\"eventHandler\"
    />
    \n

    Then inside your parent component you can include a function similar to this:

    \n
    public eventHandler(e){
      console.log('first.vue - eventHandler - ', e);
    }
    \n

    Inside your grandchild component you can then emit an event as you normally would: this.$emit('dynamo-event', "emit event one");. Notice the event name is dynamo-event. This is the required event name as it is hard coded into the Dynamo component.

    \n

    In theory, you can use this single event handler to do multiple things in the parent component via something like a switch statement, or even get more advanced and pass an object back up through the event and convert it into calling a method somewhere else. Here's an example object: { function: 'anotherMethod', data: 'data' } and then within your eventHandler function you could do something like below and it would automatically call your anotherMethod method and pass it the data:

    \n
    public eventHandler(e){
      this[e.function](e.data)
    }
    \n

    Refs & calling grandchild functions

    \n

    In your Dynamo component you can include an option named functionHandler and then have it reference a property in your parent component. In reality what we are doing is passing a Prop to the Dynamo component which in turn is passing that Prop down to the grandchild component.

    \n

    For the sake of convienence, we've named the function functionHandler in the example below.

    \n
    <Dynamo
      :routeHistoryName=\"'first'\"
      :defaultRoute=\"'dynamo-one'\"
      :functionHandler=\"functionHandler\"
      @first-event-handler=\"eventHandler\"
    />
    \n

    Then you could do something like below inside your script tag's export. The parentButton method is just a convience provided in the example that is called after a button click. In turn, the parentButton method replaces the value of this.functionHandler. The object provided works much like the eventHandler example above, but in reverse. It references a method to call on the grandchild: parentToChild and some data to pass to the grandchild's method.

    \n
    public functionHandler: object = {};

    public parentButton() {
      console.log('parentButton clicked');
      this.functionHandler = { method: 'parentToChild', data: 'hello there' };
    }
    \n

    Then inside your grandchild component you could do something like below. Notice we've setup the Prop but also setup a watcher. This allows us to use this single Prop to act as a gateway to calling multiple methods in the grandchild component. Think of it as a one-to-many relationship. Inside the watcher we've included an example where we dynamically call other methods.

    \n

    In the example above, we are passing in parentToChild as the method to call with the data of hello there. This means in the example below, we will write the following to the console: parentToChild - hello there. Also notice we've included an example of emitting an event back up as well. This is optional and is not necessary.

    \n
    @Prop() functionHandler: object = {};
    @Watch('functionHandler')
    onfunctionHandlerChanged(val: Function) {
      this[val.method](val.data);
    }

    public parentToChild(data: string) {
      console.log('parentToChild - ', data);
      this.$emit('dynamo-event', \"emit event two from parentToChild function\");
    }
    \n

    Demo project

    \n

    Take a look at the demo project for a simplistic project that implements this plugin with many of the examples discussed above. Notice within the utils/global-mixin-native class file there is an example of intercepting the Android back button behavior and then plugging it into the $goBack() navigation aide.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-code-push-sdk":{"name":"nativescript-code-push-sdk","version":"1.0.4","license":"MIT","readme":"

    NativeScript CodePush Management SDK

    \n

    Please refer to the NativeScript plugin docs.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mehyaa/nativescript-common":{"name":"@mehyaa/nativescript-common","version":"1.2.1","license":"GPL-3.0-or-later","readme":"

    NativeScript Common Library \"Build \"Version\" \"License\"

    \n

    Miscellaneous NativeScript utilities for general use.

    \n

    Install with npm:

    \n
    $ npm install @mehyaa/nativescript-common
    \n

    Install with yarn:

    \n
    $ yarn add @mehyaa/nativescript-common
    \n

    Just a few notes for anyone who wishes to use this library:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tsx":{"name":"nativescript-tsx","version":"0.0.7","license":"Apache-2.0","readme":"

    TSX support in NativeScript apps

    \n

    The tns app need the following flags in its tsconfig.json:

    \n
      \"jsx\": \"react\",
      \"reactNamespace\": \"UIBuilder\"
    \n

    tsx will enable tsx and tsx compilation, reactNamespace will emit "UIBuilder.createElement" instead "React.createElement",\njust enough to make it work, yet show we don't support full blown React experience yet.

    \n

    Also the following to references.d.ts to pull global object declarations:

    \n
    /// <reference path=\"./node_modules/nativescript-tsx/tsx.d.ts\" /> Enable tsx typechecking.
    /// <reference path=\"./node_modules/nativescript-tsx/core.d.ts\" /> Patch core modules with properties.
    \n

    You can a Page UI in page such as main-page.tsx:

    \n
    import {View} from \"ui/core/view\";
    import {Page} from \"ui/page\";
    import {StackLayout} from \"ui/layouts/stack-layout\";
    import {Label} from \"ui/label\";
    import {Button} from \"ui/button\";
    import {EventData} from \"data/observable\";

    // Provide the UIBuilder used by tsx output to querry createElement calls.
    import {UIBuilder} from \"nativescript-tsx\";

    import { HelloWorldModel } from \"./main-view-model\";

    function navigatingTo(args: EventData) {
        console.log(\"Get that context...\");
        let page = args.object as Page;
        page.bindingContext = new HelloWorldModel();
    }

    export var createPage = () =>
    <Page navigatingTo={navigatingTo}>
        <StackLayout orientation=\"vertical\">
            <Label text=\"Tap the button\" class=\"title\" /> 
            <Button text=\"TAP\" tap=\"{{ onTap }}\" />
            <Label text=\"{{ message }}\" class=\"message\" textWrap={true} />
        </StackLayout>
    </Page>;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-app-id-changer":{"name":"nativescript-dev-app-id-changer","version":"0.0.5","license":"MIT","readme":"

    'nativescript-dev-app-id-changer' a NativeScript dev plugin

    \n

    This is a very simple package that when installed will try to change the id/applicationId of the NativeScript application to which it is being installed to by adding a random string at the end of the current ID. After installing the nativescript-dev-app-id-changer make sure you DO NOT COMMIT the changes to the package.json and app.gradle files of your project (those files are updated/changed by the package)

    \n

    Purpose

    \n

    While working with real devices of IOS and applications that are under a corporate certificate/provisioning it is often the case that executing tns run ios will throw and error that the current dev team is not correct etc. In this case if you only want to work on the app an do not intent to ship it immediately after building it the most common "workaround" is to change the ID of the app before you try to deploy it to the real device. This package automates the renaming of the related fields of the NativeScript app by adding a random string of characters to the current app's ID.

    \n

    How to use

    \n

    You should only need to use this once before starting to work on app you intent to deploy to a real device FOR DEVELOPMENT purposes only so simply install it from npm:

    \n

    npm i nativescript-dev-app-id-changer --no-save

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-rollup-template":{"name":"nativescript-vue-rollup-template","version":"0.1.0","license":"MIT","readme":"

    NativeScript Vue.js Template

    \n

    This repo serves as the starting point for NativeScript + Vue.js projects, using nativescript-vue.

    \n

    This template creates a project ready to use with Vue single file components* (.vue files)!

    \n

    It creates a project with the structure:

    \n
    my-app
     |
     |-app   # your app code
     |  |-components
     |  |-...
     |
     |-tns   # the generated tns project
     |  |-app
     |  |-...
     |...
    \n

    This template supports:

    \n\n

    Usage

    \n
      \n
    1. \n

      Install NativeScript tools (see http://docs.nativescript.org/start/quick-setup)

      \n
      2. \n
    2. \n

      Create app from this template

      \n
      3. \n
    \n
    tns create hello-ns-vue --template nativescript-vue-rollup-template

    cd hello-ns-vue
    \n
      \n
    1. Watch for changes while developing
      2. \n
    \n

    In two separate terminals run:

    \n
    # terminal 1
    rollup -c -w

    # terminal 2
    cd tns
    tns run android
    # or
    tns run ios
    \n
      \n
    1. Code!\nCheck Groceries Vue to see this template\nin action in a complete app.
      2. \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-empty-template":{"name":"nativescript-empty-template","version":"1.0.0","readme":"

    Nativescript empty template

    \n

    This is a Nativescript template to create an empty project with minimum files and setup.

    \n

    You can use it when creating a new Nativescript blank project:

    \n
    tns create NewProject --template nativescript-empty-template/
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/shared":{"name":"@nativescript-vue/shared","version":"3.0.0-dev.4","license":"MIT","readme":"

    @nativescript-vue/shared

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/schematics-executor":{"name":"@nativescript/schematics-executor","version":"0.0.2","license":"Apache-2.0","readme":"

    Schematics executor

    \n

    This package provides JS API for running schematics.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-cardio":{"name":"thinkdigital-nativescript-cardio","version":"1.0.3","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-camera":{"name":"nativescript-fancy-camera","version":"0.0.1","license":"Apache-2.0","readme":"

    NativeScript Fancy Camera

    \n

    Installation

    \n

    tns plugin add nativescript-fancy-camera

    \n

    Usage

    \n

    Basic Camera

    \n

    takePhoto

    \n
    import { FancyCamera } from 'nativescript-fancy-camera';
    const fc = new FancyCamera();
    fc.takePhoto().then(data => {
            if (data && data.file) {
                vm.set('src', data.file);
            }
        });
    \n

    recordVideo

    \n
    import { FancyCamera } from 'nativescript-fancy-camera';
    const fc = new FancyCamera();

    fc.record().then(data => {
            if (data && data.file) {
                vm.set('src', data.file);
            }
        });
    \n

    showCamera

    \n

    Allows taking photos (tap) or recording videos (using longPress)

    \n
    import { FancyCamera } from 'nativescript-fancy-camera';
    const fc = new FancyCamera();

    fc.show().then(data => {
            if (data && data.file && data.type) {
                if (data.type === 'video') {
                }

                if (data.type === 'photo') {
                }

                vm.set('src', data.file);
            }
        });
    \n

    Camera View

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
     xmlns:ui=\"nativescript-fancy-camera/view\">
    <ui:CameraView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
    \n
    const cameraView = page.getViewById(\"camera\");
    cameraView.startRecording();
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    startvoidStarts the camera preview
    stopvoidStop the camera preview
    startRecordingvoidStart recording camera preview.
    stopRecordingvoidStop recording camera preview.
    toggleCameravoidToggles between front or the back camera.
    durationintGet the current recording video duration.
    cameraPositionBACKvoidGets or Sets camera position
    qualityMAX_480PvoidGets or sets Video Quality
    toggleFlashoffvoidToggle the device flash mode
    takePhotovoidCapture photo
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidIOS
    Coming Soon\"Recording\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-yogalayout":{"name":"@triniwiz/nativescript-yogalayout","version":"0.4.1","license":"Apache-2.0","readme":"

    Nativescript nativescript-yogalayout

    \n
    ns plugin add @triniwiz/nativescript-yogalayout
    \n

    Usage

    \n

    Documentation for the latest stable release

    \n

    In React NativeScript

    \n

    First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

    \n
    import { registerYogaLayout } from \"@triniwiz/nativescript-yogalayout/react\";

    registerYogaLayout();
    \n

    Example usage

    \n
    import * as React from \"react\";

    export function YogaLayoutExample() {
        return (
            <yoga>
                <yoga backgroundColor=\"aqua\" margin={50} padding={30} borderRadius={10} borderWidth={5} borderColor=\"purple\">
                    <yoga backgroundColor=\"red\" padding={2}>
                        <yoga flex={.3} backgroundColor=\"green\">
                            <label alignSelf=\"center\" color=\"black\" text=\"First\"/>
                        </yoga>
                        <yoga flex={.5} backgroundColor=\"white\">
                            <label alignSelf=\"center\" color=\"black\" text=\"Second\"/>
                        </yoga>
                        <yoga backgroundColor=\"pink\">
                            <label alignSelf=\"center\" color=\"black\" text=\"Third\"/>
                        </yoga>
                        <label alignSelf=\"center\" color=\"blue\" text=\"Something\"/>
                    </yoga>
                    <yoga position=\"absolute\" bottom=\"10\" right=\"10\" width=\"100\" height=\"100\" backgroundColor=\"yellow\" padding=\"10\">
                        <label color=\"black\" text=\"Absolute\"/>
                    </yoga>
                </yoga>
            </yoga>
        );
    }
    \n

    Troubleshooting

    \n

    If you see an error like this when writing e.g. <yoga> into your JSX:

    \n
    \n

    Property 'yoga' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

    \n
    \n

    Make sure that you have:

    \n
      \n
    1. Installed the react-nativescript npm module.
      2. \n
    2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
      3. \n
    3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
      4. \n
    4. Registered the component as described above (i.e. import and run the registerYogaLayout() method).
      5. \n
    5. If using Visual Studio Code, option-click the import @triniwiz/nativescript-yogalayout/react to jump to the file; opening the file will force it to load its provided typings.
      6. \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-bluetooth":{"name":"nativescript-akylas-bluetooth","version":"1.2.5","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-analytics-demographics":{"name":"nativescript-google-analytics-demographics","version":"0.3.5","license":"Apache-2.0","readme":"

    Nativescript Google Analytics

    \n

    Release Notes

    \n\n

    Add Plugin

    \n
    tns plugin add nativescript-google-analytics-demographics
    \n

    Get Config files

    \n\n

    Initalize the tracker in app.js

    \n

    PLAIN JS

    \n
    var application = require(\"application\");
    var googleAnalytics = require(\"nativescript-google-analytics\");
    application.mainModule = \"main-page\";
    application.cssFile = \"./app.css\";

    if (application.ios) {
        //iOS
        var __extends = this.__extends || function (d, b) {
            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
            function __() { this.constructor = d; }
            __.prototype = b.prototype;
            d.prototype = new __();
        };
        
        var appDelegate = (function (_super) {
            __extends(appDelegate, _super);
            function appDelegate() {
                _super.apply(this, arguments);
            }
            
            appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                initAnalytics(); //Module Code to initalize
            };
            
            appDelegate.ObjCProtocols = [UIApplicationDelegate];
            return appDelegate;
        })(UIResponder);
        application.ios.delegate = appDelegate;
    }else{
        //ANDROID
        application.on(application.launchEvent, function (args) {
            initAnalytics(); //Module Code to initalize
        });

    }

    application.start();

    function initAnalytics(){
        googleAnalytics.initalize({
                    trackingId: \"UA-XXXXXXXX-1\", //YOUR Id from GA
                    //userId: \"9ac7a034-ffde-4783-8374-f78b3df39d32\", //Optional
                    dispatchInterval: 5,
                    logging: {
                        native: true,
                        console: false
                    }
                });
    }
    \n

    Typescript

    \n
    var application = require(\"application\");
    import * as googleAnalytics from \"nativescript-google-analytics\";
    application.mainModule = \"main-page\";
    application.cssFile = \"./app.css\";

    if (application.ios) {
        //iOS
        class MyDelegate extends UIResponder implements UIApplicationDelegate {
            public static ObjCProtocols = [UIApplicationDelegate];

            applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
                initAnalytics(); //Module Code to initalize
                return true;
            }

        }

        application.ios.delegate = MyDelegate;

    }else{
        //ANDROID
        application.on(application.launchEvent, function (args) {
            initAnalytics(); //Module Code to initalize
        });

    }

    application.start();

    function initAnalytics(){
        googleAnalytics.initalize({
                    trackingId: \"UA-XXXXXXXX-1\", //YOUR Id from GA
                    //userId: \"9ac7a034-ffde-4783-8374-f78b3df39d32\", //Optional
                    dispatchInterval: 5,
                    logging: {
                        native: true,
                        console: false
                    }
                });
    }
    \n

    Methods

    \n

    Initalize Options

    \n
    // category and action are not optional, label and value are
    googleAnalytics.initalize(
        {
          trackingId: \"UA-XXXXXXX-1\",
          userId: \"(some userid value)\", //Optional! Needs to be enabled on the tracking account: https://support.google.com/analytics/answer/3123666#FindTheUserID
          dispatchInterval: 30, //(Value in seconds)...Default Android is 30 minutes, default iOS is 2 minutes (120 seconds).  Disable by setting to 0.
          logging: {
             native: false, //Default false, should not be used in production
             console: false   
          }
        });
    \n

    Log Event

    \n
    // category and action are not optional, label and value are
    googleAnalytics.logEvent(
        {
          category: \"MyCategory\",
          action: \"MyAction\",
          label: \"MyLabel\",
          value: 7
        });
    \n

    Log ScreenView

    \n
    // category and action are not optional, label and value are
    googleAnalytics.logView(\"Secondary-Page\");
    \n

    Flush Message queue (dispatch)

    \n
    googleAnalytics.dispatch();
    \n

    Log exceptions

    \n
    googleAnalytics.logException({
            description: \"Cat tried to divide by 0...\",
            fatal: true //Optional, default false... if true will be a \"Crash\" in GA.  False is an \"Exception\"
        });
    //or
    googleAnalytics.logException(\"Ergmagerd excerpshern\");
    \n

    Log timings

    \n
        //OPTION 1: Auto (Time is stored internally, just call stopTimer when you're done)
        googleAnalytics.startTimer(\"Logo Timer\", {
                                    category: \"Animations\",
                                    name: \"Rotate the logo\", //Optional
                                    label: (application.ios) ? \"iOS\" : \"Android\"  //Optional
                                });
        /* ... time passes as you do something ... */
        googleAnalytics.stopTimer(\"Logo Timer\");
        

        //OPTION 2: Raw, calculate and send yourself
        googleAnalytics.logTimingEvent({
            category: \"Animations\",
            value: diffMilliseconds, //Milliseconds, example 4000
            name: \"Rotate the logo\", //Optional
            label: \"Some Label\" //Optional
        });
    \n

    Issues

    \n

    Android

    \n

    Error: Could not find com.google.android.gms:play-services-analytics:8.4.0

    \n

    Resolution:\n*Open the Android Studio SDK manager, make sure all of your build tools are up to date. Then make sure your Google Play Services and Google Repository packages are up to date. In the Android Studio sdk manager, you'll find these under the "SDK Tools" tab. If you are using the standalone sdk manager, you would scroll down to the "Extras" section at the bottom and update them there\n*

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-geolocation":{"name":"nativescript-background-geolocation","version":"0.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textinputlayout":{"name":"nativescript-textinputlayout","version":"2.0.7","license":"MIT","readme":"

    ../README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-login":{"name":"nativescript-login","version":"1.0.1","license":"WTFPL","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-util":{"name":"thinkdigital-nativescript-util","version":"1.0.12","license":"ISC","readme":"

    thinkdigital-nativescript-util

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-androidx-migrate":{"name":"ns-androidx-migrate","version":"1.0.5","license":"Apache-2.0","readme":"

    Tool that migrates Support Library namespaces to the new AndroidX namespaces.

    \n

    By default it searches recursively .java,.js,.ts,.xml and .gradle files.\nYou can exclude files with specific extensions passing comma separated array at the end.

    \n

    How to use:

    \n
      \n
    1. Install package globally npm install ns-androidx-migrate -g
      2. \n
    2. ns-androidx-migrate <project-folder> <[ext1,ext2,..]>\nThis command will search and replace all Support Library namespace to the new AndroidX namespaces.\nIt will also output suggestions, that should be made manually, for changing Support Library artifacts to AndroidX.\nPlease do revise all changes manually after that!\nThis operation may take a few minutes to execute (depends on your project structure size).
      3. \n
    \n

    Examples:\nns-androidx-migrate test-plugin - search and replace test-plugin folder for all default file types\nns-androidx-migrate test-plugin [js] - search and replace test-plugin folder for all default files except .js ones.\nns-androidx-migrate test-plugin [ts,java] - search and replace test-plugin folder for all default files except .ts and .java ones.\nConsider passing comma separated extensions with no . or whitespaces between them.

    \n

    This tool does not migrate any 3rd party packages or plugins that your project relies on.

    \n

    Consider updating your project package.json dependencies with AndroidX versions.

    \n

    Consider deleting your node_modules folder for faster migration.\nDemo test-plugin included.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-odata":{"name":"thinkdigital-nativescript-odata","version":"1.0.3","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-play-livesync":{"name":"nativescript-play-livesync","version":"0.0.13","license":"Apache-2.0","readme":"

    NativeScript PlayLiveSync

    \n

    This plugin is used for communication between NativeScript Playground website and NativeScript Preview applications(iOS and Android).

    \n

    The communication between the site and the mobile applications is made through PubNub. The repository contains the native implementation in Java and Objective-C respectively.

    \n

    To debug the plugin you can follow the steps from here.

    \n

    Installation

    \n
    tns plugin add nativescript-play-livesync
    \n

    Configuration

    \n

    As the plugin needs the a scheme to restart the current application when needed, the following configurations should be present in the application's App_Resources folder:

    \n

    Android

    \n

    The following activity configuration should be added to the AndroidManifest.xml file somewhere above <activity android:name="com.tns.ErrorReportActivity"/> if you want to use nsplay scheme:

    \n
    <activity
        android:name=\"com.tns.playlivesync.NativeScriptActivity\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\"
        android:launchMode=\"singleTask\">

            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\" />
            <category android:name=\"android.intent.category.BROWSABLE\" />
            <data android:scheme=\"nsplay\"/>
        </intent-filter>
    </activity>
    \n

    iOS

    \n

    Add in Info.plist file the following configurations:

    \n
    <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLName</key>
                <string>org.nativescript.playground</string>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>nsplay</string>
                </array>
            </dict>
        </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>nsplayqr</string>
    </array>
    \n

    In the configuration above there are 3 values that need to be set:

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"apolloai-nativescript-status-bar":{"name":"apolloai-nativescript-status-bar","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-video":{"name":"nativescript-twilio-video","version":"1.1.6","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"karma-nativescript-launcher":{"name":"karma-nativescript-launcher","version":"0.4.0","license":"Apache-2.0","readme":"

    Karma launcher for NativeScript unit tests

    \n

    How to use

    \n
    $ npm install -g nativescript
    $ tns create myproject
    $ cd myproject
    $ tns test init
    $ tns test android
    $ tns test ios
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-declarations":{"name":"nativescript-ios-declarations","version":"4.0.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-nativescript-mock":{"name":"preact-nativescript-mock","version":"0.0.7","license":"MIT","readme":"

    Mocks for preact-to-nativescript

    \n

    Usage with Jest

    \n

    Add the following to your package.json

    \n
    {
      \"jest\": {
        \"testEnvironment\": \"node\",
        \"moduleNameMapper\": {
          \"tns-core-modules(.*)\": \"preact-nativescript-mock$1\"
        }
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@microexcel-csd/nativescript-hide-action-bar":{"name":"@microexcel-csd/nativescript-hide-action-bar","version":"2.0.3","readme":"

    NativeScript Hide Action Bar

    \n

    \"Short

    \n

    Description

    \n

    This is a simple plugin for the Angular flavor of NativeScript. With it, you can hide the ActionBar of any view by adding the directive to an element anywhere in the component.

    \n

    This is especially useful for NativeScript code sharing projects as trying to access the Page object in a component would break your web build.

    \n

    Installation

    \n

    From the root folder of your project, execute the following command:

    \n
    tns plugin add @microexcel-csd/nativescript-hide-action-bar
    \n

    Usage

    \n

    Once the plugin is added to your project, you need to add the HideActionBarModule to your imports array in your desired feature module or the SharedModule:

    \n
        import { HideActionBarModule } from '@microexcel-csd/nativescript-hide-action-bar';

        @NgModule({
            // ...
            imports: [
                HideActionBarModule,
                // ...
            ],
            // ...
        })
        export class SharedModule { }
    \n
    \n

    NOTE: Simply importing the HideActionBarModule into your AppModule will not work.

    \n
    \n

    Afterwards, simply add the directive to any element as follows:

    \n
    <Label hideActionBar text=\"Sayonara, ActionBar!\"></Label>
    \n

    You'll want to make sure that the element is actually present on the page. For example, an element nested within an *ngIf that evaluates to false will not cause the ActionBar to be hidden.

    \n

    Support Our Packages

    \n

    \"paypal\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mht-printer":{"name":"nativescript-mht-printer","version":"1.1.5","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-copilot/vue":{"name":"@nativescript-copilot/vue","version":"0.2.2","license":"MIT","readme":"

    Nativescript Copilot

    \n

    \n Step-by-step walkthrough for your Nativescript app!\n

    \n

    \n \"Vue-Demo\"\n

    \n

    Inspired by the awesome React Native Copilot plugin

    \n

    Nativescript-Copilot is a component that is currently only suitable for NativeScript-Vue. If you'd like to see a Nativescript-Core or Nativescript-Angular implementation, then please submit a PR.

    \n

    Quick Start - Vue

    \n
    npm install --save @nativescript-copilot/vue
    \n

    Main entry point

    \n
    import Copilot from '@nativescript-copilot/vue';
    Vue.use(Copilot)
    \n

    Nativescript-Vue Usage

    \n

    This can be used on a Page by Page basis. The primary way the tour is driven is by passing in a ref for each step. For example below, we have a ref named step1 in the Image component.

    \n
      <StackLayout col=\"0\" verticalAlignment=\"bottom\" horizontalAlignment=\"left\">
        <Image ref=\"step1\" src=\"~/assets/logo.png\" height=\"75%\" width=\"75%\" borderWidth=\"1\"/>
      </StackLayout>
    \n

    You can combine multiple refs to create a tour. You will need to create an object array that carries the config for the tour for a particular page. For example:

    \n
          this.steps = [
            {
              name: 'First',
              text: 'here is some text',
              order: 1,
              target: this.$refs.step1.nativeView,
              animated: true,
              isFirstStep: true
            },
            {
              name: 'Second',
              text: 'here is some text with a rounded highlighted zone and padding',
              order: 2,
              target: this.$refs.step2.nativeView,
              animated: true,
              highlightBorderRadius: 10,
              highlighPadding: 5,
            },
            {
              name: 'Third',
              text: 'here is some text that should hopefully be long enought to cause a wrap.  What will happen if the text is too long. Find out!',
              order: 3,
              target: this.$refs.step3.nativeView,
              animated: true
            },
            {
              name: 'Fourth',
              text: 'This has a veritcal offset of -5 which will push the step 5dp towards the top',
              order: 4,
              target: this.$refs.step4.nativeView,
              animated: false,
              verticalOffset: -5,
            },
            {
              name: 'Fifth',
              text: '',
              order: 4,
              target: this.$refs.step3.nativeView,
              animated: false,
              isCustom: true,
              itemTemplate: '<Label text=\"This is a custom template!\" color=\"green\"/>',
              customBackgroundColor: 'black',
              customBorderRadius: '15',
              numberAccentColor: 'white',
              numberBackgroundColor: 'green',
               customTooltipStyle:  {
                fontFamily: 'Avenir-Bold',
                tooltipFontSize: 12,
                tooltipTextColor: 'white',
                buttonFontSize: 12,
                accentColor: 'white'
              },
              customLabels: {
                skip: 'Stop',
                previous: 'Before',
                next: 'Continue',
                finish: 'Done'
              }
            },
            {
              name: 'Sixth',
              text: 'This will darken the whole page and center the tool tip',
              order: 4,
              target: this.$refs.step4.nativeView,
              animated: false,
              darkenWholePage: true,
              isLastStep: true
            }
          ]
    \n

    There are several configuration items in a Step object:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    namestringPurely for decoration/organizational purposes
    textstringThe descriptive text to display in the tooltip
    ordernumberwhich step this is in the page's tour
    targetstringthe specific component that you want the tour to stop at. This must be in the format of this.$refs.step1.nativeView where step1 is the name of the actual ref
    animatedbooleanDefault is true, but if you don't want a step to animate to the next step, then set this and it will jump to the next location without any animation
    verticalOffsetnumberUse in case you need to vertically offset the area highlighted by the step. This can be a positive or negative number
    isFirstStepbooleanUsed to tell the plugin which step is first so that it will hide the Previous button
    isLastStepbooleanUsed to tell the plugin which step is last so that it will hide the Next button and show the 'Finish' button
    isLastStepbooleanUsed to tell the plugin which step is last so that it will hide the Next button and show the 'Finish' button
    darkenWholePagebooleanUsed to tell the plugin if a step has no highlighted value, to darken the whole screen, and center the text box vertically and horizontally
    showNumberbooleanUse in the case of not wanting to show the step number on a specific step
    numberBackgroundColorstringUsed in the case of wanting a custom number background color on a specific step
    numberAccentColorstringUsed in the case of wanting a custom number accent color on a specific step
    customBackgroundColorstringUse in the case of wanting a custom background tool tip color on a specific step
    customBorderRadiusstringUse in the case of wanting a custom border radius for the tool tip on a specific step
    highlightPaddingnumberUse in the case of wanting a custom padding on the highlightedzone of the mask
    highlightBorderRadiusnumberUse in the case of wanting a custom border radius on the highlightedzone of the mask on a specific step (Warning: when using border radius, with how this plugin functions, having too high of a border radius / too high of a border radius near the edge of the device will cause IOS UI to misfunction, it is suggested to descrease your border radius) (Note: using border radius will decrease your highlighted area, use padding to increase it again)
    isCustombooleanUse in the case of wanting a customized tool tip, along with the itemTemplate option
    itemTemplatestringUsed if custom component is true on the step, pass in a string value of XML ( events and dynamic props do not work )
    customTooltipStyleobjectUsed in the case of wanting a custom style for the tool tip on a specific step
    customLabelsobjectUsed in the case of wanting a custom style for the tool tip on a specific step
    \n

    You will then pass the step config into the Copilot component as the steps prop. In the example below, we are using a computed property to feed the steps prop:

    \n
      <Copilot
        :steps=\"computedSteps\"
        :animationDuration=\"animationDuration\"
        :labels=\"labels\"
        :tooltipStyle=\"tooltipStyle\"
        :overlayColor=\"overlayColor\"
        :backgroundColor=\"backgroundColor\"
        :accentColor=\"accentColor\"
        ref=\"copilot\"
      />
    \n

    There are several other props that can be passed into the Copilot component. They are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefaultDescription
    animationDurationstring300Number of ms the animation will take to move to the next step
    labelsobject{ skip: 'Skip', next: 'Next', previous: 'Previous', finish: 'Finish' }The names of the four buttons used in the toolsip to move between tour steps. Skip will end the tour at any step while Finish will only end at the very last step.
    tooltipStyleobject{ fontFamily: Avenir-Light, tooltipFontSize: 14, tooltipTextColor: 'black', buttonFontSize: 14, accentColor: 'green' }Used to control the overall apperance of the tooltip
    overlayColorstringrgba(0, 0, 0, 0.4)Used to control the overlay color
    numberBackgroundColorstringwhiteUsed to set the default number background color
    numberAccentColorstringgreenUsed to set the default number accent color
    toolTipBackgroundColorstringwhiteUsed to set the default tool tip background color
    toolTipBorderRadiusstring'3'Used to set the default tool tip border radius
    highlightBorderRadiusnumber0Used to set the default highlight border radius on the mask (Warning: when using border radius, with how this plugin functions, having too high of a border radius / too high of a border radius near the edge of the device will cause IOS UI to misfunction, it is suggested to descrease your border radius) (Note: using border radius will decrease your highlighted area, use padding to increase it again)
    highlightPaddingnumber5Used to set the default highlight padding on the mask
    \n

    An initialization example of the above options (done in typescript):

    \n
    private animationDuration: number = 300;
    private androidStatusBarVisible: boolean = false;
    private labels: object = {
      skip: 'Skip',
      previous: 'Previous',
      next: 'Next',
      finish: 'Finish'
    };
    private tooltipStyle: object = {
      fontFamily: 'Avenir-Light',
      tooltipFontSize: 14,
      tooltipTextColor: 'black',
      buttonFontSize: 14,
      accentColor: 'green'
    }
    private overlayColor: string = 'rgba(0, 0, 0, 0.4)';
    private numberAccentColor: string = 'green';
    private numberBackgroundColor: string = 'white';
    private toolTipBackgroundColor: string = 'white';
    private toolTipBorderRadius: string = '3';
    private highlightPadding: number = 5;
    private highlightBorderRadius: number = 10;
    \n

    There are several events emitted by the Copilot component:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    step-changeobjectEmitted when a step progresses forward or backward, emits an object containing stepLeaving and stepArriving
    stop--Emitted when the copilot is stopped
    start--Emitted when the copilot is started
    not-ready--Emitted when the copilot receives an invalid layout
    highlight-tap--Emitted when the copilot's highlightedzone is tapped
    \n

    You will call the event from the Copilot component as the name of the chosen event. In the example below, we are calling a function on the event:

    \n
      <Copilot
        :steps=\"computedSteps\"
        @step-change=\"stepChanged\"
        @stop=\"copilotStopped\"
        @not-ready=\"copilotNotReady\"
        @start=\"copilotStarted\"
        @highlight-tap=\"copilotHighlightTap\"
        ref=\"copilot\"
      />
    \n

    To start a tour on a particular page you will need to call the Copilot start function. An example of this is: this.$refs.copilot.start();

    \n

    Vue Demo project

    \n

    Take a look at the demo project for a simplistic project that implements this plugin with many of the options discussed above.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-walkyou":{"name":"nativescript-walkyou","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ugs-nativescript-files-progress":{"name":"ugs-nativescript-files-progress","version":"1.2.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-web-ns":{"name":"@synerty/peek-web-ns","version":"0.3.2","license":"MIT","readme":"

    Peek WEB NS

    \n

    This is a utility package that enables code reuse between an AngularCLI and\nNativeScript + Typescript + Angular2 project.

    \n

    Usage

    \n

    Platform Selection

    \n

    Insert this at the top of your main.ts for your native script application.
    This tells the utility that we're compiling for NativeScript

    ::

        import {PeekCoreConfigService} from \"@synerty/peek-web-ns\";
        PeekCoreConfigService.PLATFORM_TARGET = PeekCoreConfigService.PLATFORMS.MOBILE_NATIVE;


    Component Template Selection
    \n

    Angular CLI can handle templates with no paths, while NativeScript requires a path\nrelative to app/.

    \n

    Use this utility to switch the component templates for each platform.\nThe files required are all in the same directory and named as follows:

    \n\n

    Under the hood : When the template is compiled on nativescript, it's using NODE, so we can use\nmodule.filename. We use this to find the relative path to app, then take the templateUrl\nadd the path and replace .web.html with .ns.html.

    \n

    ::

    \n
    import {Component} from "@angular/core";\n\n@Component({\n    selector: "peek-main-home",\n    templateUrl: 'main-home.component.web.html',\n    moduleFilename : module.filename\n})\nexport class MainHomeComponent {\n    testMsg: string = "Unified home Update2";\n\n}\n
    \n

    Router Selection

    \n

    Angular CLI and NativeScript require different router modules, this utility helps switch
    between them.

    You will still need separate main AppModule files.

    app.ns.module.ts
    ::

        @NgModule({
            declarations: [
                AppComponent,
                // declarations
            ],
            bootstrap: [AppComponent],
            imports: [
                NativeScriptModule,
                NativeScriptRouterModule,
                PeekRouterModule.forRoot(staticRoutes), // <-- HERE
                // other imports
            ],
            schemas: [NO_ERRORS_SCHEMA],
            providers: [{
                    provide: NgModuleFactoryLoader,
                    useClass: PeekModuleFactoryLoader
                },
                // Other providers
            ]
        })
        export class AppNsModule {

        }


    app.web.module.ts
    ::

        @NgModule({
            declarations: [
                AppComponent,
                // declarations
            ],
            imports: [
                RouterModule,
                PeekRouterModule.forRoot(staticRoutes), // <-- HERE
                BrowserModule,
                FormsModule,
                HttpModule,
                // other imports
            ],
            providers: [
                // Other providers
            ],
            bootstrap: [AppRootComponent]
        })
        export class AppWebModule {
        }

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-walkme":{"name":"nativescript-walkme","version":"1.0.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-plugin-nativescript-vue-web":{"name":"vue-cli-plugin-nativescript-vue-web","version":"0.0.2","license":"MIT","readme":"

    nativescript-vue-web-cli-plugin

    \n

    WORK IN PROGRESS

    \n

    A Vue Cli 3.x plugin,

    \n

    Forked from https://github.com/Nativescript-Vue-Web/vue-cli-plugin-nativescript-vue

    \n

    Extending the work of Igor Randjelovic with added support for Web builds using NativeScript-Vue components.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-fcm":{"name":"@nstudio/nativescript-airship-fcm","version":"0.0.2","license":"Apache-2.0","readme":"

    @nstudio/nativescript-airship-fcm

    \n
    ns plugin add @nstudio/nativescript-airship-fcm
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pushwoosh":{"name":"nativescript-pushwoosh","version":"1.0.3","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msf":{"name":"nativescript-msf","version":"1.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wootric":{"name":"nativescript-wootric","version":"1.0.7","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-test":{"name":"@tremho/jove-test","version":"0.6.9-pre-release.280","license":"UNLICENSED","readme":"

    @tremho/jove-test

    \n

    (formerly thunderbolt)

    \n\n

    project

    \n

    wiki

    \n

    thunderbolt-test

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kinvey-list":{"name":"nativescript-kinvey-list","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"observable-sectioned-array":{"name":"observable-sectioned-array","version":"0.1.2","license":"ISC","readme":"

    Observable sectioned array.

    \n

    A nativescript plugin to use sections of items for data binding. This can be used alongside Sectioned List View to support sections.

    \n

    Installation

    \n

    Run the following command from the root of your project

    \n
    $ tns plugin add observable-sectioned-array
    \n

    This command automatically installs the necessary files, as well as stores observable-sectioned-array as a dependency in your project's package.json file.

    \n

    Examples

    \n

    Following code imports the module

    \n
    var observableSectionArrayModule = require(\"observable-sectioned-array\");
    \n

    Following code creates an array and adds sections to it.

    \n
        var students = [
        \t{\"name\" : \"Alice\", gender:\"female\"},
        \t{\"name\": \"Adam\", gender: \"male\"},
        \t{\"name\": \"Bob\", gender: \"male\"},
        \t{\"name\": \"Brittany\", gender: \"female\"},
        \t{\"name\": \"Evan\", gender: \"male\"}
        ];

        var boys = students.filter(function(student) { return student.gender ===\"male\";});

        var girls = students.filter(function(student) { return student.gender ===\"female\";});

        var sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
        sectionedArray.addSection(\"Boys\", boys);
        sectionedArray.addSection(\"Girls\", girls);

        sectionedArray.on(observableSectionArrayModule.ObservableSectionArray.CHANGE, function (args) {
            //Fired when we add \"Eve\" below.
        \tconsole.log(\"Event name: \" + args.eventName + \", action: \" + args.action);
            //Event name: change, action: add
            
        \tconsole.log(\"args.row: \" + args.row + \", args.section: \" + args.section + \", added count: \"+args.addedCount);
            //args.row: 2, args.section: null, added count: 1
    \t});

    \tconsole.log('No of sections: ' + sectionedArray.getNoOfSections());
        //No of sections: 2
        
        console.log('No of items in section 1: ' + sectionedArray.getNoOfItemsInSection(1));
        //No of items in section 1: 2
        
        console.log('Item at {1,1}: ' + JSON.stringify(sectionedArray.getItem(1,1)));
        //Item at {1,1}: { \"name\": \"Brittany\", gender: \"female\" }

        //Now add a new student \"Eve\" to girls after some delay. 
        setTimeout(function() {
        \tsectionedArray.push([{\"name\": \"Eve\", gender:\"female\"}], 1);
        }, 3000);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bengrantswifi":{"name":"nativescript-bengrantswifi","version":"1.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates-ng":{"name":"tns-page-templates-ng","version":"3.2.4","license":"Apache-2.0","readme":"

    nativescript-page-templates-ng

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@b3nm4r/nativescript-oauth2":{"name":"@b3nm4r/nativescript-oauth2","version":"2.4.2","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates":{"name":"tns-page-templates","version":"3.2.4","license":"Apache-2.0","readme":"

    nativescript-page-templates

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@4you-free/ns-appversion":{"name":"@4you-free/ns-appversion","version":"0.0.1-alpha.4","license":"MIT","readme":"

    ns-appversion

    \n

    Usage

    \n
    import * as AppVersion from `ns-appversion`;
    class MyClass{
      constructor(private appVersion: AppVersion) {
        console.log(this.appVersion.getApplicationVersion());
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tdallau/nativescript":{"name":"@tdallau/nativescript","version":"0.0.26","license":"ISC","readme":"

    This package contains some helper functions for nativescript.\nSome examples are:

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"test-nativescript-utils":{"name":"test-nativescript-utils","version":"1.0.1","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-build-info":{"name":"nativescript-dev-build-info","version":"0.1.0","license":"Apache-2.0","readme":"

    nativescript-dev-build-info

    \n

    Provides build information (commit sha, branch, date, etc...) at runtime.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rad-imagepicker-with-loc":{"name":"nativescript-rad-imagepicker-with-loc","version":"2.0.7","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-new":{"name":"nativescript-wifi-new","version":"1.0.27","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-node":{"name":"@progress/jsdo-node","version":"5.0.0-2018-05-11-00002","license":"Apache-2.0","readme":"

    Progress Data Source for Node

    \n

    The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript and Angular".

    \n

    Documentation

    \n

    Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

    \n

    The Data Source can be used by apps built using NativeScript, Angular and Node.

    \n

    License

    \n

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    \n

    http://www.apache.org/licenses/LICENSE-2.0

    \n

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@wezyy1/nativescript-google-maps-sdk":{"name":"@wezyy1/nativescript-google-maps-sdk","version":"4.0.10","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates-ts":{"name":"tns-page-templates-ts","version":"3.2.4","license":"Apache-2.0","readme":"

    nativescript-page-templates-ts

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-unit-test-runner":{"name":"nativescript-akylas-unit-test-runner","version":"0.8.3","license":"Apache-2.0","readme":"

    Unit test runner for NativeScript

    \n

    Refer to the documentation of NativeScript CLI's tns test init command for usage.

    \n

    If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-i18n":{"name":"tns-i18n","version":"0.0.10","license":"ISC","readme":"

    tns-i18n

    \n

    This is a Nativescript plugin that implements i18n easily.

    \n

    It adds _L function to global variable and XML files so you can use it anywhere in the app.

    \n

    It is inspired by nativescript-i18n, The only difference between them is that with this plugin you don't need to rebuild the app with every change, so you can continue watching the app smoothly.

    \n

    The module detects the preferred user language and displays text in this language if it is handled by the app, if not, it will load the text in the default language you chose.

    \n

    Prefer Videos ?

    \n

    Here is a short video tutorial on this plugin.

    \n

    Installation

    \n
    tns plugin add tns-i18n
    \n

    Usage

    \n

    Import

    \n

    Import the module in app.js before anything else:

    \n
    \n

    You have to mention the default language code

    \n
    \n
    require('tns-i18n')('en'); // We set 'en' as default language
    var application = require(\"application\");

    application.start({ moduleName: \"./home\" });
    \n

    Creating locales

    \n

    Now, create a i18n folder in app folder.

    \n
    app
    |___ i18n
        |___ en.js
        |___ ar.js
        .
        .
        .
    .
    .
    .
    \n

    Must export in files

    \n

    The files containing the strings, must export an object of the strings.

    \n

    Eg: en.js

    \n
    module.exports = {
        greetings: 'Hello %s',
        bye: 'Nice to meet you %s, see you in %s days'
    };
    \n

    Load strings

    \n

    XML

    \n

    In XML files:

    \n
    <Label text=\"{{_L('greetings')}}\"></Label>
    \n

    JS

    \n
    _L(\"greetings\")
    \n

    Replacements

    \n

    The module supports replacements of %s.

    \n

    Eg:

    \n
    <Label text=\"{{_L('greetings', 'My friend')}}\"></Label>
    <!-- Will give: Hello My friend -->
    \n

    Multiple replacements

    \n

    For multiple replacements, you can use an array, separate arguments or even both.

    \n

    Eg:

    \n
    <Label text=\"{{_L('bye', 'My friend', '5')}}\"></Label>
    <!-- Will give: Nice to meet you My friend, see you in 5 days -->
    \n

    Or:

    \n
    <Label text=\"{{_L('bye', ['My friend', '5'])}}\"></Label>
    <!-- Will give: Nice to meet you My friend, see you in 5 days -->
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-notification-banner":{"name":"nativescript-notification-banner","version":"1.1.6","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-groceries":{"name":"nativescript-template-groceries","version":"3.4.0","readme":"

    NativeScript Groceries Template

    \n

    This repo serves as the starting point for building the NativeScript Groceries sample as part of the NativeScript JavaScript Getting Started Guide.

    \n

    Please file any issues with this template on the NativeScript/docs repository, which is where the tutorial content lives.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-target":{"name":"nativescript-vue-target","version":"0.1.0","license":"MIT","readme":"

    NativeScript-Vue target

    \n

    Webpack target for NativeScript-Vue without the need for nativescript-dev-weback.

    \n

    Credits

    \n

    Based on nativescript-dev-webpack

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-filepicker":{"name":"@martinbuezas/nativescript-filepicker","version":"0.1.0","license":"Apache-2.0","readme":"

    @martinbuezas/nativescript-filepicker

    \n
    ns plugin add @martinbuezas/nativescript-filepicker
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-mobileauth":{"name":"tns-mobileauth","version":"0.0.5","license":"ISC","readme":"

    Install

    \n
    tns plugin add tns-mobileauth
    \n

    Params

    \n

    origin: origin url of server

    \n

    lang: function returning string by attribute.

    \n

    test: if working on test set true to get console messages.

    \n

    API

    \n

    getSessionFile: returns session file from phone

    \n

    getClientSession(success,fail): runs success() if session file has the right format else runs fail()

    \n

    ifSessionOk(uri,ifOk,ifNotOk): verify session and return user data

    \n

    login(uri,user,success,fail): login

    \n

    logout(callback): logout

    \n

    postWithSession(uri,json,success,fail): posts data in operation property and adds session to verify it on server

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"karma-nsnodeunit":{"name":"karma-nsnodeunit","version":"0.2.1","license":"MIT","readme":"

    karma-nsnodeunit

    \n

    Adapter for the Nodeunit testing framework for NativeScript.

    \n

    This is based on both the Karma-NodeUnit located at https://github.com/karma-runner/karma-nodeunit\nAnd the actual nodeunit from https://github.com/caolan/nodeunit\nThey have both been modified to work inside the NativeScript test runner environment.

    \n

    Usage

    \n
      \n
    1. tns test init To initialize the testing system, Choose Mocha.
      2. \n
    2. npm install karma-nsnodeunit --save-dev
      3. \n
    3. Update the karma.conf.js file and set the frameworks: ['nsnodeunit']
      4. \n
    4. Write your nodeunit tests inside the app/tests folder.
      5. \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-multi-drawer":{"name":"nativescript-vue-multi-drawer","version":"0.0.4","license":"MIT","readme":"

    NativeScript-Vue Multi Drawer

    \n

    A plugin which provides a drawer component that supports multiple drawers.

    \n\n

    All drawers are optional, and can be configured individually.

    \n

    Features:

    \n\n

    Quick Start

    \n
    $ npm i --save nativescript-vue-multi-drawer
    \n
    // main.js
    import Vue from 'nativescript-vue'
    ...
    + import MultiDrawer from 'nativescript-vue-multi-drawer'
    + Vue.use(MultiDrawer)
    \n

    Optionally set default options by passing options when installing the plugin:

    \n
    Vue.use(MultiDrawer, { 
      // override any option here
      // for example enable debug mode
      debug: true
    })
    \n

    For the available options check the source of defaultOptions

    \n
    <MultiDrawer>
      <StackLayout slot=\"left\">
        <Label text=\"Im in the left drawer\" />  
      </StackLayout>
      <StackLayout slot=\"right\">
        <Label text=\"Im in the right drawer\" />  
      </StackLayout>
      <StackLayout slot=\"top\">
        <Label text=\"Im in the top drawer\" />  
      </StackLayout>
      <StackLayout slot=\"bottom\">
        <Label text=\"Im in the bottom drawer\" />  
      </StackLayout>
      
      <Frame /> <!-- main content goes into the default slot -->
    </MultiDrawer>
    \n

    The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

    \n

    Opening a drawer from code

    \n

    Assign a ref to the Drawer component

    \n
    <MultiDrawer ref=\"drawer\" />
    \n

    And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

    \n

    Using v-model to toggle the drawer

    \n

    The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

    \n
    <MultiDrawer v-model=\"drawerState\" />
    \n
    export default {
      data() {
        return {
          drawerState: false // closed
        }
      },
      
      methods: {
        doStuff() {
          // do stuff
          this.drawerState = 'left' // this will open the left drawer
        }
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-oauth":{"name":"nativescript-facebook-oauth","version":"0.0.1","license":"MIT","readme":"

    nativescript-facebook-oauth

    \n

    Facebook SDKを使用して、iOS、Android共にOAuth認証を実現するNativeScriptプラグインです。

    \n

    使い方

    \n

    インストール

    \n
    npm install nativescript-facebook-oauth
    \n

    Android

    \n

    your_app/App_Resources/Android/values/strings.xmlを作成し下記のコードを入力してください。

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"app_name\">sample</string>
        <string name=\"title_activity_kimera\">sample</string>
        <string name=\"facebook_app_id\">{your-app-id}</string>
    </resources>
    \n

    your_app/App_Resources/Android/AndroidManifest.xmlに下記のuses-permission meta-data activityを追加してください。

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest>
    \t<uses-permission android:name=\"android.permission.INTERNET\"/>
        ...
    \t<application>
            ...
    \t\t<meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
    \t\t<activity android:name=\"com.facebook.FacebookActivity\"
    \t\t          android:configChanges=\"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
    \t\t          android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
    \t\t          android:label=\"@string/app_name\"/>
            ...
    \t</application>
    </manifest>
    \n

    iOS

    \n

    your_app/App_Resources/iOS/Info.plistの最下部にある</dict>の前に下記のコードを追加してください(詳細)。

    \n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>fb{your-app-id}</string>
        </array>
      </dict>
    </array>
    <key>FacebookAppID</key>
    <string>{your-app-id}</string>
    <key>FacebookDisplayName</key>
    <string>{your-app-name}</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>fbapi</string>
      <string>fb-messenger-api</string>
      <string>fbauth2</string>
      <string>fbshareextension</string>
    </array>
    \n

    下記のコードを追加し、Objective-CのAppDelegateクラスをFBSDKApplicationDelegateにconnectしてください(詳細)。

    \n
    import { connectToFacebookDelegate } from \"nativescript-facebook-oauth\";
    connectToFacebookDelegate();
    application.start({ moduleName: \"main-page\" });
    \n

    Android/iOS共通

    \n
    import { FacebookLoginHandler } from \"nativescript-facebook-oauth\";

    // コールバックの処理
    const successCallback = function(result) {
      console.log(result.token);
    };

    const cancelCallback = function() {
      console.log(\"Login was cancelled\");
    };

    const failCallback = function(error) {
      console.log(error);
    };

    // ログインの処理
    const facebookLoginHandler = new FacebookLoginHandler();
    facebookLoginHandler.logInWithReadPermissions([\"email\"], successCallback, cancelCallback, failCallback); // Permissionsを追加 https://developers.facebook.com/docs/facebook-login/permissions
    \n

    検証の手順

    \n

    sample以下にサンプルアプリケーションを作成してあります。

    \n

    Facebook Applicationの作成

    \n

    Facebook developersで検証用のアプリケーションを作成します。

    \n

    \"\"

    \n

    basic setupを選択します。

    \n

    \"\"

    \n

    Display Name Contact Email Categoryを入力します。

    \n

    Create App IDでApplicationが作成されます。Settingを選択し、+Add Platformをクリック、Androidを選択します。

    \n

    \"\"

    \n

    検証用なので、Google Play Package Nameだけ入力します。これでApplicationの作成は完了です。

    \n

    Application IDの読み込み

    \n

    Androidの検証ではsample/app/App_Resources/Android/values/strings.xmlの{your-app-id}を作成したアプリケーションのApplication IDに、iOSの検証ではsample/app/App_Resources/iOS/Info.plistの{your-app-id}を作成したアプリケーションのApplication IDに、{your-app-name}をアプリケーションの名前に置き換えてください。

    \n

    サンプルアプリの実行

    \n

    下記コマンドで実行できます。

    \n

    初回

    \n
    cd sample
    tns install
    tns platform add [ios | android]
    tns run [ios | android]
    \n

    2回目以降

    \n
    cd sample
    tns plugin remove nativescript-facebook-oauth && tns plugin add ../
    tns run [ios | android]
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ogg-vorbis":{"name":"nativescript-ogg-vorbis","version":"0.0.1","license":"MIT","readme":"

    Ogg Vorbis plugin for NativeScript

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-i18n-deep":{"name":"tns-i18n-deep","version":"0.0.13","license":"ISC","readme":"

    tns-i18n-deep

    \n

    This is a Nativescript plugin that implements i18n easily. It supports deep nested localized strings

    \n

    It adds _L function to global variable and XML files so you can use it anywhere in the app.

    \n

    It is based on the tns-i18n module, The only difference is that this module supports deep nested strings, so you can more easily organize your localizations.

    \n

    The module detects the preferred user language and displays text in this language if it is handled by the app, if not, it will load the text in the default language you chose.

    \n

    Installation

    \n
    tns plugin add tns-i18n-deep
    \n

    Usage

    \n

    Import

    \n

    Import the module in app.js before anything else. See example below:

    \n
    import Vue from 'nativescript-vue';
    import HelloWorld from './components/HelloWorld';

    //> You have to mention the default language code
    const i18n = require('tns-i18n-deep')('en');

    // Uncommment the following to see NativeScript-Vue output logs
    //Vue.config.silent = false;

    new Vue({
        i18n,
        render: h => h('frame', [h(HelloWorld)])

    }).$start();
    ```javascript

    ## Creating locales
    Now, create a **i18n** folder in the **app** folder.
    \n

    app\n|___ i18n\n|___ en.js\n|___ sv.js\n.\n.\n.\n.\n.\n.

    \n

    ### Must export in files
    The files containing the strings, must export an object of the strings.

    Eg: **en.js**
    ```javascript
    module.exports = {
        greetings: 'Hello %s',
        bye: 'Nice to meet you %s, see you in %s days',
        weekdays: {
            monday: \"Monday\",
            tuesday: \"Tuesday\",
            tuesday: \"Wednesday\",
        }
    };
    \n

    Load strings

    \n

    XML

    \n

    In XML files:

    \n
    <Label text=\"{{_L('greetings')}}\"></Label>
    \n

    JS

    \n
    _L(\"greetings\")
    \n

    JS with deep string

    \n
    _L(\"weekdays.monday\")
    \n

    Replacements

    \n

    The module supports replacements of %s.

    \n

    Eg:

    \n
    <Label text=\"{{_L('greetings', 'My friend')}}\"></Label>
    <!-- Will give: Hello My friend -->
    \n

    Multiple replacements

    \n

    For multiple replacements, you can use an array, separate arguments or even both.

    \n

    Eg:

    \n
    <Label text=\"{{_L('bye', 'My friend', '5')}}\"></Label>
    <!-- Will give: Nice to meet you My friend, see you in 5 days -->
    \n

    Or:

    \n
    <Label text=\"{{_L('bye', ['My friend', '5'])}}\"></Label>
    <!-- Will give: Nice to meet you My friend, see you in 5 days -->
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch-notifications":{"name":"nativescript-batch-notifications","version":"0.4.5","license":"MIT","readme":"

    Nativescript Batch plugin

    \n

    Welcome to Batch's Nativescript Plugin!
    \nBatch is a fully fledged mobile engagement platform to execute CRM tactics over iOS, Android & mobile websites.
    \nThe purpose of this plugin is to manage Push notifications, in-app messages and more.., for Android and IOS.
    \nThis repository contains the plugin's source code and a demo application.

    \n

    Installation

    \n

    NPM

    \n
    npm i nativescript-batch-notifications
    \n

    Prerequisites / Requirements

    \n

    First of all, you must create a batch account;
    \nThen a configuration is required for each platform;
    \nThis process is explained through simple steps in batch official documentation.
    \nIOS setup
    \nAndroid setup
    \nWhen you add your Firebase android project, download the google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

    \n

    For a quick start using the demo app :

    \n\n

    How it works

    \n

    A picture is worth a thousand words\n\"Global

    \n

    Android initialization

    \n

    We must override the OnCreate method.
    \nIn order to do so, change the application name value in the AndroidManifest from com.tns.NativeScriptApplication to something like org.myApp.Application.
    \nThen, in the root dir, create a typescript file named : 'application.android.ts' and enter the bellow code.

    \n
    const firebase = require("nativescript-plugin-firebase");\n// @ts-ignore\nimport { Batch } from 'nativescript-batch-notifications';\n\n@JavaProxy("org.myApp.Application")\nclass Application extends android.app.Application {\n    public onCreate(): void {\n        super.onCreate();\n        let batch = new Batch();\n        batch.init('YOUR_BATCH_API_KEY');\n        this.registerActivityLifecycleCallbacks(batch.activityLifeCycleHelper());\n        firebase.init().catch(e => console.dir(e));\n    }\n}\n
    \n

    IOS initialization

    \n

    We must setup a custom delegate; Override the app.ts in the root dir with the bellow code:

    \n
    import * as app from "tns-core-modules/application";\nimport {run as applicationRun} from "tns-core-modules/application";\n// @ts-ignore\nimport { Batch } from 'nativescript-batch-notifications';\n\nif (app.ios) {\nclass customDelegate extends UIResponder implements UIApplicationDelegate {\n    public static ObjCProtocols = [UIApplicationDelegate];\n\n    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {\n        console.log("IOS Entered");\n        let batch = new Batch();\n        batch.initIOS('YOUR_BATCH_API_KEY');\n        return true;\n    }\n}\napp.ios.delegate = customDelegate;\napplicationRun({ moduleName: "main-page" });\n} else {\napplicationRun({ moduleName: "app-root" });\n}\n
    \n

    Important notes !!

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-autocomplete-last-version":{"name":"nativescript-google-places-autocomplete-last-version","version":"1.0.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ni-facebooklogin":{"name":"ni-facebooklogin","version":"2.0.1","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hprt":{"name":"nativescript-hprt","version":"0.9.7","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-desktop":{"name":"@tremho/jove-desktop","version":"0.7.0-pre-release.70","license":"UNLICENSED","readme":"

    jove-desktop

    \n

    (formerly Thunderbolt)

    \n

    Desktop (electron+riot) dependencies for a Jove project

    \n

    project\nwiki

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-qr":{"name":"@nstudio/nativescript-qr","version":"0.1.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-qr

    \n
    ns plugin add @nstudio/nativescript-qr
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-settings":{"name":"tns-template-settings","version":"2.1.0","license":"BSD","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat":{"name":"nativescript-wechat","version":"0.0.3","license":"MIT","readme":"

    Develop a NativeScript plugin

    \n

    Getting started

    \n

    npm

    \n
    npm version patch
    \n

    Credit

    \n
    https://github.com/NathanWalker/nativescript-plugin-seed
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-bottomsheet":{"name":"nativescript-ng-bottomsheet","version":"0.0.9","license":"Apache-2.0","readme":"

    NativeScript Angular Bottom Sheet Plugin

    \n

    Installation

    \n
    tns plugin add nativescript-ng-bottomsheet
    \n

    Usage

    \n

    iOS note: Shadows will be added later. :(

    \n

    The bottom sheet plugin extends a GridLayout and exposes a simple BottomSheet class with property state and method named setState(state). Also plugin exposes interface BottomSheetState that helps to manage state of Bottom Sheet.

    \n

    XML

    \n
        <Page
            navigatingTo=\"onNavigatingTo\"
            xmlns=\"http://schemas.nativescript.org/tns.xsd\"
            xmlns:ui=\"nativescript-ng-bottomsheet/ng-bottomsheet\">

            <ActionBar>
                <Label text=\"Home\"></Label>
            </ActionBar>

            <GridLayout>
                <!-- Add your page content here -->
                <ui:BottomSheet stateChange=\"onStateChange\" />
            </GridLayout>
        </Page>
    \n

    Angular

    \n

    Don't forget to register the component in app.module.ts.

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { BottomSheet } from 'nativescript-ng-bottomsheet/ng-bottomsheet';
    registerElement('BottomSheet', () => BottomSheet);
    \n

    HTML

    \n
        <NgBottomSheet (stateChange)=\"onStateChange($event)\"></NgBottomSheet>
    \n

    Typescript

    \n

    Typescript

    \n
        onStateChange(args) {
            const {eventName, object, state} = args;
            console.log(state); // it represents one of BottomSheetState values

            // If you want to change state via code, use method setState()
            // object.setState(BottomSheetState.COLLAPSED);
            // object.setState(BottomSheetState.HALF_EXPANDED);
            // object.setState(BottomSheetState.EXPANDED);
        }
    \n

    To run the Angular demo

    \n
    cd src
    npm run demo-angular.<platform>
    \n

    To run the plain Nativescript demo

    \n
    cd src
    npm run demo.<platform>
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-hms":{"name":"@nstudio/nativescript-airship-hms","version":"0.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-airship-hms

    \n
    ns plugin add @nstudio/nativescript-airship-hms
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-duplicator":{"name":"nativescript-app-duplicator","version":"1.0.3","license":"MIT","readme":"

    nativescript-app-duplicator

    \n

    A tool to manage duplicated app in same project

    \n

    What mean this package

    \n

    Sometimes in our business we have two o more app than are the same but with differents UI. Instead of create more project, this tools helps you to manage multiples app with one project for {N}.

    \n

    Install

    \n

    Use it with npx

    \n
    npm install -g npx
    \n

    then

    \n
    npm install nativescript-app-duplicator
    \n

    How it works

    \n

    In first place, this plugin works with webpack flow for {N} and every commands needs a project "state" to work. Lets see commands

    \n
    npx ns-dup [APPNAME] [--option]
    \n

    Options than require APPNAME:

    \n\n

    Not require APPNAME:

    \n\n

    Starting a new project

    \n

    After you've created a new project with {N} cli, you have to enter in a multiproject state, so you must execute

    \n
    npx ns-dup [FIRST_PROJECT_NAME] --restore
    \n

    STATES

    \n

    Working state

    \n

    When a project is in a "working state" it means that you can work on it, the other project will not be affected ƒrom your changes on it.

    \n

    Neutral state

    \n

    No project are in working state

    \n

    Phisically meaing of states

    \n

    Projects structure

    \n

    app

    \n

    |- App_Resources_[PROJECT NAME]

    \n

    |-..

    \n

    ..

    \n

    [PROJECT NAME]_package.json

    \n

    --

    \n

    The duplicator renames resources and package.json to works with {N} CLI

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-core":{"name":"nativescript-mongo-stitch-core","version":"0.0.3","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-adm":{"name":"@nstudio/nativescript-airship-adm","version":"0.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-airship-adm

    \n
    ns plugin add @nstudio/nativescript-airship-adm
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-gradle":{"name":"@akylas/nativescript-gradle","version":"0.0.3","license":"UNLICENSED","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msgraph":{"name":"nativescript-msgraph","version":"0.1.4","license":{"type":"MIT","url":"https://github.com/alexziskind1/nativescript-msgraph/blob/master/LICENSE"},"readme":"

    MS Graph API plugin for NativeScript

    \n

    NOTE: This library is currently being developed and is pre-alpha at this time

    \n

    \"MS

    \n

    Manage Office 365 Users, Groups, Mail, Calendars, Contacts, Files,\nTasks, People, Notes and more — all from a single endpoint

    \n

    Prerequisites

    \n

    You should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

    \n

    Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

    \n
      \n
    1. Click the "Add Platform" button and select "Mobile application"
      2. \n
    2. Copy the "Client Id" GUID from the Mobile Application section.
      3. \n
    3. Click "Save" at the bottom.
      4. \n
    \n

    Setup

    \n

    Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-msgraph
    \n

    Usage

    \n

    coming soon

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-settings-ts":{"name":"tns-template-settings-ts","version":"2.1.0","license":"BSD","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cifrate":{"name":"nativescript-cifrate","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-openid-client":{"name":"angular-openid-client","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-firebase-env":{"name":"@vulksoft/nativescript-firebase-env","version":"0.0.6","license":"Apache-2.0","readme":"

    Nativescript Firebase Env

    \n

    Separate environment for nativescript-firebase

    \n

    Setup

    \n

    For iOS you can put your GoogleService-Info.plist.dev and GoogleService-Info.plist.prod at your project root.\nFor Android you can put your google-services.json.dev and google-services.json.prod at your project root.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-hello-world-ts-vision":{"name":"@nativescript/template-hello-world-ts-vision","version":"8.6.2","license":"Apache-2.0","readme":"

    NativeScript with TypeScript for visionOS

    \n
    ns run visionos --no-hmr
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescriptfilterselectnoclear":{"name":"nativescriptfilterselectnoclear","version":"1.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ffmpeg-plugin-fixed":{"name":"nativescript-ffmpeg-plugin-fixed","version":"0.1.0","license":"Apache-2.0","readme":"

    NativeScript FFmpeg

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Installation

    \n
    tns plugin add nativescript-ffmpeg-plugin-fixed
    \n

    Usage

    \n
      \n
    1. \n

      Execute commands.

      \n
        \n
      • Use execute() method with a single command line and an argument delimiter
        • \n
      \n
      import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin-fixed';

      FFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4', ' ').then(result => console.log(\"FFmpeg process exited with result \" + result));
      \n
        \n
      • Use executeWithArguments() method with an array of arguments
        • \n
      \n
      import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin-fixed';

      FFmpeg.executeWithArguments([\"-i\", \"file1.mp4\", \"-c:v\", \"mpeg4\", \"file2.mp4\"]).then(result => console.log(\"FFmpeg process exited with result \" + result));
      \n
      2. \n
    2. \n

      Check execution output. Zero represents successful execution, non-zero values represent failure.

      \n
      FFmpeg.getLastReturnCode().then(result => {
          console.log(\"Last return code: \" + result);
      });

      FFmpeg.getLastCommandOutput().then(result => {
          console.log(\"Last command output: \" + result;
      });
      \n
      3. \n
    3. \n

      Stop an ongoing operation.

      \n
      FFmpeg.cancel();
      \n
      4. \n
    4. \n

      Get media information for a file.

      \n
        \n
      • Print all fields
        • \n
      \n
      FFmpeg.getMediaInformation('<file path or uri>').then(info => {
          console.log('Result: ' + JSON.stringify(info));
      });
      \n
        \n
      • Print selected fields
        • \n
      \n
      FFmpeg.getMediaInformation('<file path or uri>').then(info => {
          console.log('Result: ' + JSON.stringify(info));
          console.log('Media Information');
          console.log('Path: ' + info.path);
          console.log('Format: ' + info.format);
          console.log('Duration: ' + info.duration);
          console.log('Start time: ' + info.startTime);
          console.log('Bitrate: ' + info.bitrate);
          if (info.streams) {
              for (var i = 0; i < info.streams.length; i++) {
                  console.log('Stream id: ' + info.streams[i].index);
                  console.log('Stream type: ' + info.streams[i].type);
                  console.log('Stream codec: ' + info.streams[i].codec);
                  console.log('Stream full codec: ' + info.streams[i].fullCodec);
                  console.log('Stream format: ' + info.streams[i].format);
                  console.log('Stream full format: ' + info.streams[i].fullFormat);
                  console.log('Stream width: ' + info.streams[i].width);
                  console.log('Stream height: ' + info.streams[i].height);
                  console.log('Stream bitrate: ' + info.streams[i].bitrate);
                  console.log('Stream sample rate: ' + info.streams[i].sampleRate);
                  console.log('Stream sample format: ' + info.streams[i].sampleFormat);
                  console.log('Stream channel layout: ' + info.streams[i].channelLayout);
                  console.log('Stream sar: ' + info.streams[i].sampleAspectRatio);
                  console.log('Stream dar: ' + info.streams[i].displayAspectRatio);
                  console.log('Stream average frame rate: ' + info.streams[i].averageFrameRate);
                  console.log('Stream real frame rate: ' + info.streams[i].realFrameRate);
                  console.log('Stream time base: ' + info.streams[i].timeBase);
                  console.log('Stream codec time base: ' + info.streams[i].codecTimeBase);
              }
          }
      });
      \n
      5. \n
    5. \n

      Enable log callback and redirect all FFmpeg logs to a console/file/widget.

      \n
      logCallback = (logData) => {
          console.log(logData.text);
      };
      ...
      FFmpeg.enableLogCallback(logCallback);
      \n
      6. \n
    6. \n

      Enable statistics callback and follow the progress of an ongoing operation.

      \n
      statisticsCallback = (statisticsData) => {
          console.log('Statistics; frame: ' + statisticsData.videoFrameNumber.toFixed(1) + ', fps: ' + statisticsData.videoFps.toFixed(1) + ', quality: ' + statisticsData.videoQuality.toFixed(1) +
          ', size: ' + statisticsData.size + ', time: ' + statisticsData.time);
      };
      ...
      FFmpeg.enableStatisticsCallback(statisticsCallback);
      \n
      7. \n
    7. \n

      Poll statistics without implementing statistics callback.

      \n
      FFmpeg.getLastReceivedStatistics().then(stats => console.log('Stats: ' + JSON.stringify(stats)));
      \n
      8. \n
    8. \n

      Reset statistics before starting a new operation.

      \n
      FFmpeg.resetStatistics();
      \n
      9. \n
    9. \n

      Set log level.

      \n
      FFmpeg.setLogLevel(LogLevel.AV_LOG_WARNING);
      \n
      10. \n
    10. \n

      Register your own fonts by specifying a custom fonts directory, so they are available to use in FFmpeg filters. Please note that this function can not work on relative paths, you need to provide full file system path.

      \n
        \n
      • Without any font name mappings
        • \n
      \n
      FFmpeg.setFontDirectory('<folder with fonts>', null);
      \n
        \n
      • Apply custom font name mappings. This functionality is very useful if your font name includes ' ' (space) characters in it.
        • \n
      \n
      FFmpeg.setFontDirectory('<folder with fonts>', { my_easy_font_name: \"my complex font name\" });
      \n
      11. \n
    11. \n

      Use your own fontconfig configuration.

      \n
      FFmpeg.setFontconfigConfigurationPath('<fontconfig configuration directory>');
      \n
      12. \n
    12. \n

      Disable log functionality of the library. Logs will not be printed to console and log callback will be disabled.

      \n
      FFmpeg.disableLogs();
      \n
      13. \n
    13. \n

      Disable statistics functionality of the library. Statistics callback will be disabled but the last received statistics data will be still available.

      \n
      FFmpeg.disableStatistics();
      \n
      14. \n
    14. \n

      List enabled external libraries.

      \n
      FFmpeg.getExternalLibraries().then(externalLibraries => {
          console.log(externalLibraries);
      });
      \n
      15. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    See Also

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"oidc-angular":{"name":"oidc-angular","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codelab/nativescript-cast":{"name":"@codelab/nativescript-cast","version":"0.4.1","license":"Apache-2.0","readme":"

    nativescript-cast

    \n

    Chromecast support for NativeScript 7+.

    \n

    Requirements

    \n

    You must have a valid Chromecast Application ID. You can obtain one at the Google Cast Developer Console.

    \n

    Installation

    \n

    Note: Since NativeScript 7, the package name is now @codelab/nativescript-cast.

    \n
    # NativeScript 7
    ns plugin add @codelab/nativescript-cast

    # Nativescript 6
    tns plugin add nativescript-cast@0.3.0

    # NativeScript 5
    tns plugin add nativescript-cast@0.1.2
    \n

    Usage

    \n

    Android

    \n

    Set your Application ID.

    \n
    <!-- App_Resources/Android/src/main/res/values/strings.xml -->
    <string name=\"app_id\">4F8B3483</string>
    \n

    The Google Cast design checklist requires a sender app to provide an expanded controller. Include ExpandedControllerActivity in your AndroidManifest.xml.

    \n
    <!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
    <activity
      android:name=\"com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity\"
      android:label=\"@string/app_name\"
      android:launchMode=\"singleTask\"
      android:screenOrientation=\"portrait\">
      <intent-filter>
        <action android:name=\"android.intent.action.MAIN\"/>
      </intent-filter>
      <meta-data
        android:name=\"android.support.PARENT_ACTIVITY\"
        android:value=\"com.tns.NativeScriptActivity\"/>
    </activity>
    \n

    If you are using Webpack, you will need to include '@codelab/nativescript-cast/cast-options-provider' in appComponents.

    \n

    To do this, create a custom webpack configuration. See the demo for an example.

    \n
    \n

    iOS

    \n

    Set your Application ID.

    \n
    <!-- App_Resources/iOS/Info.plist -->
    <key>AppID</key>
    <string>4F8B3483</string>
    \n

    You'll need to set up a delegate to initialise the GCKCastContext with your AppID. See the demo for an example.

    \n
    import { Application } from '@nativescript/core';

    if (global.isIOS) {
      @NativeClass()
      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate, GCKLoggerDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {
          const appId = NSBundle.mainBundle.objectForInfoDictionaryKey('AppID');
          const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
          GCKCastContext.setSharedInstanceWithOptions(castOptions);

          // Optional logger
          const delegate: MyLoggerDelegateImpl = MyLoggerDelegateImpl.new();
          GCKLogger.sharedInstance().delegate = delegate;

          return true;
        }
      }

      Application.ios.delegate = MyDelegate;
    }
    \n

    ⚠️ iOS 12+ & Xcode 10 ⚠️

    \n

    If developing using Xcode 10 and targeting iOS devices running iOS 12 or higher, the "Access WiFi Information" capability is required in order to discover and connect to Cast devices. The plugin comes with an app.entitlements which will add this capability to the workspace, however, you must also Add the Access WiFi information feature to your App ID .

    \n

    See iOS sender setup for more info.

    \n

    ⚠️ iOS 13+ & Guest Mode ⚠️

    \n

    iOS 13+ requires Bluetooth and Microphone permissions in order to use Guest Mode with Chromecast. This plugin sets these permissions in the Info.plist file.

    \n

    See iOS Guest Mode for more info.

    \n

    ⚠️ iOS 14+ ⚠️

    \n

    iOS 14+ has some permission changes. See iOS Permission Changes for more info.

    \n

    Be sure to set NSBonjourServices with your AppID as explained in the documentation above. See the demo for an example.

    \n
    \n

    Place CastButton in to your view.

    \n

    NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      loaded=\"pageLoaded\"
      class=\"page\"
      xmlns:cast=\"@codelab/nativescript-cast\"
    >
      <ActionBar title=\"App Name\">
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <cast:CastButton cast=\"{{ handleCastEvent }}\" />
          </StackLayout>
        </ActionItem>
      </ActionBar>
      <!-- ... -->
    </Page>
    \n

    Angular

    \n

    Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

    \n
    import { NativescriptCastModule } from '\"@codelab/nativescript-cast/angular';

    @NgModule({
      imports: [
        NativescriptCastModule
      ]
    });
    \n

    Include in your template.

    \n
    <ActionBar [title]=\"App Name\" >
      <ActionItem ios.position=\"right\">
        <StackLayout>
          <CastButton (cast)=\"handleCastEvent($event)\"></CastButton>
        </StackLayout>
      </ActionItem>
    </ActionBar>
    \n

    Vue

    \n

    Register the element in your app's main entry point, typically main.ts.

    \n
    Vue.registerElement('CastButton', () => require('n\"@codelab/ativescript-cast').CastButton);
    \n

    Include in your template.

    \n
    <ActionBar title=\"App Name\">
      <ActionItem ios.position=\"right\">
        <StackLayout>
          <CastButton @cast=\"handleCastEvent\" />
        </StackLayout>
      </ActionItem>
    </ActionBar>
    \n

    Event handler

    \n

    Set up an event handler for all cast events. The cast instance is available on args.object.

    \n
    handleCastEvent(args): void {
      console.log('cast: ' + args.object);
      console.log('eventName: ' + args.data.eventName);
    }
    \n

    Casting

    \n

    When the Cast receiver is ready, you can load your media.

    \n
    const mediaInfo = {
      contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
      contentType: 'video/mp4',
      streamType: 'BUFFERED',
      duration: undefined,
      metadata: {
        metadataType: 'MOVIE',
        title: 'Tears of Steel',
        subtitle: 'By Blender Foundation',
        description: 'Sintel is an independently produced short film, initiated by the Blender Foundation.',
        images: [
          {
            url: 'http://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
            width: 480,
            height: 270,
          }
        ]
      },
      textTracks: [
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
          contentType: 'text/vtt',
          name: 'English',
          language: 'en'
        },
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
          contentType: 'text/vtt',
          name: 'Spanish',
          language: 'es'
        }
      ],
      textTrackStyle: {
        foregroundColor: '#0000cc',
        backgroundColor: '#00cc00',
      },
      customData: {
        anything: 'you like'
      }
    };

    cast.loadMedia(mediaInfo);
    \n

    API

    \n

    Events

    \n

    Event names follow the Android naming structure.\niOS events are passed from GCKSessionManagerListener, GCKRemoteMediaClientListener and GCKMediaQueueDelegate.\nAndroid events are passed from SessionManagerListener, MediaRouter.Callback and MediaQueue.Callback.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NativeScriptAndroidiOS
    onSessionEndedonSessionEndeddidEndSession
    onSessionEndingonSessionEndingwillEndSession
    onSessionResumedonSessionResumeddidResumeSession
    onSessionResumingonSessionResumingwillResumeSession
    onSessionStartedonSessionStarteddidStartSession
    onSessionStartFailedonSessionStartFaileddidFailToStartSession
    onSessionStartingonSessionStartingwillStartSession
    onSessionSuspendedonSessionSuspendeddidSuspendSession
    onDeviceVolumeChangedonRouteVolumeChangeddidReceiveDeviceVolume
    onDeviceChangedonRouteChangeddidUpdateDevice
    onMediaStatusChangedonStatusUpdatedremoteMediaClientDidUpdateMediaStatus
    mediaQueueWillChangemediaQueueWillChangemediaQueueWillChange
    itemsReloadeditemsReloadedmediaQueueDidReloadItems
    itemsInsertedInRangeitemsInsertedInRangedidInsertItemsInRange
    itemsUpdatedAtIndexesitemsUpdatedAtIndexesdidUpdateItemsAtIndexes
    itemsRemovedAtIndexesitemsRemovedAtIndexesdidRemoveItemsAtIndexes
    mediaQueueChangedmediaQueueChangedmediaQueueDidChange
    \n

    All unlisted events are ignored. See related documentation for futher details.

    \n

    Android

    \n\n

    iOS

    \n\n

    Methods

    \n

    See cast.types for method options.

    \n\n

    TODO

    \n\n

    Acknowledgements

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-xss":{"name":"nativescript-test-xss","version":"0.0.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-library":{"name":"nativescript-na-library","version":"0.2.0","license":"MIT","readme":"

    NativeScript NA Library plugin

    \n

    NOTE! Android is currently not supported.

    \n

    A NativeScript library plugin that utilizes PHPhotoLibrary for iOS.

    \n

    Installation

    \n

    Prerequisites: TNS 2.4.0+

    \n

    $ tns plugin add nativescript-na-library

    \n

    Usage

    \n

    Soon...

    \n

    Known issues

    \n\n

    To-do list

    \n

    Please post an issue if you have any other ideas!

    \n

    History

    \n

    Version 0.1.0 (November 30, 2016)

    \n\n

    Credits

    \n\n

    License

    \n

    MIT - for {N} version 2.4.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-":{"name":"@zalastax/nolb-nativescript-","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pyze-nativescript":{"name":"pyze-nativescript","version":"0.0.9","license":"Apache-2.0","readme":"

    Pyze Nativescript

    \n

    Getting started

    \n

    visit https://pyze.com/ for integration help

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-i18n":{"name":"nativescript-ssi-i18n","version":"1.0.9","license":"MIT","readme":"

    nativescript-i18n

    \n

    This is a plugin for Nativescript that implements i18n in an easy manner.

    \n

    It uses the native capabilities of each platform without the need of a separate JS or JSON file.

    \n

    It is heavily inspired from NativeLang and this thread

    \n

    The plugin defines an L() method at the application level so it will be accessible both from the XML and JS files.

    \n

    Please don't forget to read the IMPORTANT section! :smile:

    \n

    Credits

    \n
    \n

    Most thanks goes out to Dan Tamas (@rborn) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

    \n
    \n

    Thanks to @TheBrousse and @ValioStoychev for the help with iOS and @alejonext for creating the initial module.

    \n

    Also a big thanks to all the contributors that made this repo better :)

    \n

    Usage

    \n

    Install the plugin in your app

    \n
    npm install --save nativescript-i18n
    \n

    Create a folder i18n in the app folder with the following structure:

    \n
    App_Resources
    i18n
      |
      |-- en
      |\t\t|- strings.xml
      |
      |-- es
      \t\t|- strings.xml
    \n

    Require nativescript-i18n and globals in app.js as early as possible (I do it even before I require the application module, the very first 2 lines).

    \n
    \trequire('globals');
    \trequire('nativescript-i18n');
    \n

    If you use TypeScript and want to use L() in the code you will need to cast the global var to any like belowin the file you intend to use L(). You can read more about this in https://github.com/rborn/nativescript-i18n/issues/57

    \n
    \tdeclare var global:any;
    \n

    And in the code use it like this:

    \n

    XML files

    \n

    Simple string

    \n
    \t<Label text=\"{{ L('hello') }}\">
    \n

    It supports one or multiple replacements, directly or from the model

    \n
    \t<Label text=\"{{ L('hello') }}\" class=\"title\" textWrap=\"true\" />
    \t<Label text=\"{{ L('hello_replace','my friend') }}\" class=\"message\" textWrap=\"true\" />
    \t<Label text title=\"{{ L('multi_replace','direct replacement', modelReplacement) }}\">
    \n

    Assuming you have defined in strings.xml the definitions and in the model the replacement modelReplacement variable

    \n
    \t<string name=\"hello\">Hello!</string>
    \t<string formatted=\"false\" name=\"hello_replace\">Hello %s!</string>
    \t<string formatted=\"false\" name=\"multi_replace\">We can replace directly in xml: %s or from the model: %s</string>
    \n

    To define a custom path for the i18n files (other than App_Resources/i18n), add this configuration to your project's package.json

    \n
    \"nativescript-i18n\": {
        \"customLangPath\": \"app/resources/i18n\"
    }
    \n

    Language defaults to english if the phone's language doesn't match any of your defined languages. If you want to set your own default language, add this configuration to your project's package.json

    \n

    Keep in mind that on iOS the language picked by the device will be based on the order in Settings -> Language & Region -> Preferred language order

    \n
    \"nativescript-i18n\": {
        \"defaultLang\": \"es\"
    }
    \n

    IMPORTANT

    \n\n

    JS files

    \n
    \tconsole.log(L('home'));
    \tconsole.log(L('multi_replace', 'ONE', 'TWO'));
    \n

    Angular

    \n

    In case you use Angular for your app, things get a little more complicated.

    \n

    My Angular skills are zero but @alejonext has a solution for it in this comment.

    \n

    Update 28.06.2016

    \n

    @AirMike and @loloof64 did a great job by testing and further improving @alejonext's PR so the plugin includes now support for Angular :bow:

    \n

    After you import the plugin in the app in the usual way just need to import the module NativeScriptI18nModule from nativescript-i18n/angular in your file (main.ts)

    \n

    (Please be aware that the below intructions are in typescript not pure js)

    \n
    \timport { NativeScriptI18nModule } from \"nativescript-i18n/angular\";
    \n

    and then import it in your app module

    \n
    \t@NgModule({


          imports: [
            NativeScriptI18nModule
          ]


        })
        export class AppModule { }
    \n

    Angular usage is {{ value | L:args }}

    \n
    \t<Button text=\"{{ 'Login' | L }}\"></Button>
    \n

    As for a more detailed example :

    \n

    You can put a code like this in your main.ts :

    \n
        import { NativeScriptI18nModule } from 'nativescript-i18n/angular';

        import { NativeScriptModule } from \"nativescript-angular/platform\";
        import { NgModule } from \"@angular/core\";
        import { AppComponent } from \"./app.component\";


        @NgModule({

          imports: [
            NativeScriptModule,
            NativeScriptI18nModule
          ],

          declarations: [
            AppComponent,
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
    \n

    For the main component, let's say that the following html template is used (the strings definitions follow next):

    \n
        <GridLayout rows=\"*,*,*\">
            <label row=\"0\" text=\"{{'menuitem_new_file' | L }}\"></label>
            <label row=\"1\" text=\"{{'menuitem_new_folder' | L }}\"></label>
            <label row=\"2\" text=\"{{'menuitem_new' | L:'---':'***':124.25693 }}\"></label>
        </GridLayout>
    \n

    And let's say that these are the string definitions for "en" (put in app/i18n/en/strings.xml)

    \n
        <resources>
            <string name=\"app_name\">Chess Exercices Cupboard</string>
            <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

            <string formatted=\"false\" name=\"menuitem_new\">%s New... %s %0.2f</string>
            <string name=\"menuitem_new_file\">File</string>
            <string name=\"menuitem_new_folder\">Folder</string>
        </resources>
    \n

    And the french translations (put in app/i18n/fr/srings.xml)

    \n
        <resources>
            <string name=\"app_name\">Chess Exercices Cupboard</string>
            <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

            <string formatted=\"false\" name=\"menuitem_new\">%s Nouveau... %s %0.2f</string>
            <string name=\"menuitem_new_file\">Fichier</string>
            <string name=\"menuitem_new_folder\">Dossier</string>
        </resources>
    \n

    Then if your phone is configured for french you'll see something like this :

    \n
        Fichier
        Dossier
        --- Nouveau... *** 124.25693
    \n

    Or, if configured for english or "unrecognized" language :

    \n
        File
        Folder
        --- New... *** 124.25693
    \n

    Demo

    \n

    Please have a look in the demo folder for a working example.

    \n

    iOS Permission text

    \n

    Add this special keys to app/i18n/(lang)/strings.xml used to notify user, in configured language while showing permission alerts.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription of key
    NSAppleMusicUsageDescriptionSpecifies the reason for your app to use the media library
    NSBluetoothPeripheralUsageDescriptionSpecifies the reason for your app to use Bluetooth
    NSCalendarsUsageDescriptionSpecifies the reason for your app to access the user’s calendars
    NSCameraUsageDescriptionSpecifies the reason for your app to access the device’s camera
    NSContactsUsageDescriptionSpecifies the reason for your app to access the user’s contacts
    NSHealthShareUsageDescriptionSpecifies the reason for your app to read the user’s health data
    NSHealthUpdateUsageDescriptionSpecifies the reason for your app to make changes to the user’s health data
    NSHomeKitUsageDescriptionSpecifies the reason for your app to access the user’s HomeKit configuration data
    NSLocationAlwaysUsageDescriptionSpecifies the reason for your app to access the user’s location information at all times
    NSLocationWhenInUseUsageDescriptionSpecifies the reason for your app to access the user’s location information while your app is in use
    NSMicrophoneUsageDescriptionSpecifies the reason for your app to access any of the device’s microphones
    NSMotionUsageDescriptionSpecifies the reason for your app to access the device’s accelerometer
    NSPhotoLibraryUsageDescriptionSpecifies the reason for your app to access the user’s photo library
    NSRemindersUsageDescriptionSpecifies the reason for your app to access the user’s reminders
    NSSiriUsageDescriptionSpecifies the reason for your app to send user data to Siri
    NSSpeechRecognitionUsageDescriptionSpecifies the reason for your app to send user data to Apple’s speech recognition servers
    \n

    (Pseudo) roadmap/ideas

    \n

    The following ideas are inspired by this comment and issues posted by the users of this plugin

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cast-ns6-beta":{"name":"nativescript-cast-ns6-beta","version":"0.1.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mip-ble":{"name":"nativescript-mip-ble","version":"0.2.5","license":{"type":"MIT","url":"https://github.com/sebawita/nativescript-mip-ble/blob/master/LICENSE"},"readme":"

    NativeScript-mip-ble

    \n

    This plugin is designed to communicate with WowWee MiP robots.\nIt provides the functionality to scan, connect and issue various commands.

    \n

    Install the plugin

    \n

    Call the following command from the root of your project.

    \n
    tns plugin add nativescript-mip-ble
    \n

    Getting started

    \n

    Here is a brief overview of how to use this plugin.\nFor more advanced examples see:\nSimple ng2 demo\nJS Core example\nng2 example

    \n

    Connecting to your MiP

    \n

    Before you take control of your MiP, you need to find it first.\nWe will use BluetoothScanner for this, which will provide us with all available MipDevice objects.

    \n

    Imports

    \n

    Add the following imports to your TypeScript code:

    \n
    import { BluetoothScanner } from \"nativescript-mip-ble/bluetooth.scanner\";
    import { MipDevice } from \"nativescript-mip-ble/mip-device\";
    \n

    Scanning

    \n

    The scan function requires a callback, which is triggered for every ble device found and it returns a callback when the scan is finished.

    \n

    You can call it as follows:

    \n
    var devices: Array<MipDevice> = [];
    var scanner = new BluetoothScanner();

    scanner.scan( (mip) => devices.push(mip))
        .then(() => {
            console.log(\"Finished Scanning\");
        })
    \n

    This will fill in the devices array with all ble devices in the area.

    \n

    Each MipDevice object contains: name, UUID and status, which you could use to display on the screen.

    \n
    \n

    Make sure to enable Bluetooth on your device before trying to scan for devices.

    \n
    \n

    Connecting to a device

    \n

    All you need to do is to grab the MipDevice object you want to connect to and call connect().\nThis function takes a callback function for when the device gets disconnected and it returns a promise when the connection is established.

    \n

    You could call it as follows:

    \n
    var selectedIndex = 0;
    var selectedDevice: MipDevice = devices[selectedIndex];

    selectedDevice.connect( (mip) => {
        console.log(\"disconnected from: \" + mip.name);
    })
    .then(() => {
        console.log(\"connected to: \" + selectedDevice.name);
    })
    \n

    Sending instructions

    \n

    Now that you are connected to your MiP, you should be able to call various instructions to make him move, change the color of the chest LED or make him talk.\nTo do that just use mipController from the MipDevice.

    \n

    Here are a few examples:

    \n
    import { Direction, TurnDirection } from \"nativescript-mip-ble/mip-types\";

    // --- MOVE ----
    var distance = 10;
    //move Fwd 
    selectedDevice.mipController.distanceDrive(Direction.Forward, distance, TurnDirection.Left, 0);

    // move Bwd
    selectedDevice.mipController.distanceDrive(Direction.Backward, distance, TurnDirection.Left, 0);

    // --- TURN ----
    var turnAngle = 45;
    //turn left
    selectedDevice.mipController.turnLeftByAngle(angle / 5, 0);

    //turn Right
    selectedDevice.mipController.turnRightByAngle(angle / 5, 0);

    // --- SOUND ---
    //mute
    selectedDevice.mipController.setVolume(0);

    //set max volume
    selectedDevice.mipController.setVolume(7);

    //make noise
    var soundIndex = 10; // value from 1 - 106
    selectedDevice.mipController.playOneSound(soundIndex, 0, 0);

    // --- LED ---
    //set Led to red
    selectedDevice.mipController.setChestLED(255, 0, 0);
    }
    //set Led to green
    selectedDevice.mipController.setChestLED(0, 255, 0);
    }
    //set Led to blue
    selectedDevice.mipController.setChestLED(0, 0, 255);
    }
    \n

    Continous move

    \n

    The best way to control robots movement is to use the drive function, which instructs the robot to move in a given direction for a short period of 50ms.\nYou need to call this function at intervals of 50ms contiously sending new instructions.

    \n

    A good example is to use the nativescript-accelerometer plugin.

    \n

    Here is the code you need to make it work:

    \n
    import { MipDevice } from \"nativescript-mip-ble/mip-device\";
    import {startAccelerometerUpdates, stopAccelerometerUpdates} from \"nativescript-accelerometer\"

    export class AccelerometerComponent {
        private turnSpeed: number = 0;
        private speed: number = 0;

        private selectedDevice: MipDevice;

        constructor(mip: MipDevice) {
            this.selectedDevice = mip;
        }

        public startAccelerometer() {

            startAccelerometerUpdates( data => {
                this.turnSpeed = data.x; // lean left (0 to -1) / right (0 to 1)
                this.speed = data.y; // lean forward (0 to -1) / back (0 to 1)
            } )

            this.startContinousMove();
        }

        public startContinousMove() {
            setInterval( () => {
                this.selectedDevice.drive(this.speed, this.turnSpeed);
            }, 50);
        }
    }
    \n

    Making changes to the plugin

    \n

    If you want to make changes to the plugin, you need first set up your environment correctly.\nFirst run at the root first, which will let you then use the demo projects.

    \n
    tns install
    \n

    To rebuild the plugin for the JavaScript core demo project

    \n
    npm run preparedemo
    \n

    To rebuild the plugin for the angular demo-ng project

    \n
    npm run preparedemo-ng
    \n

    To run the demo project:

    \n
    cd demo

    tns platform add android
    tns run android

    and/or

    tns platform add ios
    tns platform run ios
    \n

    To run the demo-ng project:

    \n
    cd demo-ng

    tns platform add android
    tns run android

    and/or

    tns platform add ios
    tns platform run ios
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"wevue-native":{"name":"wevue-native","version":"1.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"groceries-angular-service":{"name":"groceries-angular-service","version":"0.1.0","license":"ISC","readme":"

    groceries-angular-service

    \n

    Setup

    \n

    In order to make the service work you need to add an HttpModule to your @NgModule imports.

    \n

    For NativeScript use NativeScriptHttpModule

    \n
    import { NativeScriptHttpModule } from \"nativescript-angular/http\";
    \n
    @NgModule({
      ...
      imports: [
        ...
        NativeScriptHttpModule
      ],
    \n

    For Web use HttpModule

    \n
    import { HttpModule } from '@angular/http';
    \n
    @NgModule({
      ...
      imports: [
        ...
        NativeScriptHttpModule
      ],
    \n

    Adding to providers

    \n

    To provide the GroceryListService and UserService services, just import them from groceries-angular-service and add them to the @NgModule providers:

    \n
    import { GroceryListService, UserService } from 'groceries-angular-service';

    @NgModule({
      ...
      providers: [
        ...
        GroceryListService,
        UserService
      ],
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"i18nh":{"name":"i18nh","version":"0.0.5","license":"MIT","readme":"

    Install

    \n

    Support

    \n\n

    NPM

    \n
    npm install i18nh --save
    \n

    YARN

    \n
    yarn add i18nh
    \n

    Use

    \n

    To use it is simple just look at the steps below

    \n
    import i18nh, { useT } from 'i18nh'

    // Create a language object containing the 
    // translations as in the example below
    const languages = {
        en: {
            hello: 'Hello',
            about: 'About',
            goodMorning: 'Good Morning',
        },
        pt: {
            hello: 'Olá',
            about: 'Sobre',
            goodMorning: 'Bom Dia',
        },
    }

    // i18nh load the language object containing 
    // the translations and also the default language argument
    i18nh({
        languages, 
        defaultLanguage: 'en'
    });

    const [t] = useT();

    console.log(t('hello')) 
    // Hello
    console.log(t('about')) 
    // About
    console.log(t('goodMorning')) 
    // Good Morning

    console.log(t('hello', 'pt')) 
    // Olá
    console.log(t('about', 'pt')) 
    // Sobre
    console.log(t('goodMorning', 'pt')) 
    // Bom Dia
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"easy-suite-native":{"name":"easy-suite-native","version":"0.1.11","license":"ISC","readme":"

    Easy-Suite for Material Design for Angular (and later ionic)

    \n

    This is the home for Easy-Suite. Built for Angular using Material Design.

    \n

    Component abstraction to allow easy dynamic pages. Build pages from component or in HTML.

    \n

    Installation

    \n

    The latest release of Easy-Suite can be installed from npm

    \n

    npm install --save easy-suite

    \n

    Project status

    \n

    Easy Suite is currently in beta and under active development.\nDuring beta, new features will be added regularly and APIs will evolve based on user feedback.

    \n

    Feature status:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureStatus
    cardsAvailable
    tabsAvailable
    buttonAvailable
    checkboxAvailable
    checkbox-groupAvailable
    radioAvailable
    inputAvailable
    selectAvailable
    selectKeyValueAvailable
    autocompleteAvailable
    datepickerAvailable
    data-tableAvailable
    \n

    "Available" means that the components or feature is published and available for use, but may still\nbe missing some behaviors or polish.

    \n

    Getting started

    \n

    Step 1: Install Easy Suite

    \n
    npm install --save easy-suite
    \n

    Step 2: Import the component modules

    \n

    Import the NgModule:

    \n
    import {EasyModule} from 'easy-suite';

    @NgModule({
      ...
      imports: [EasyModule],
      ...
    })
    \n

    Step 3: Hello World

    \n

    import { Component} from '@angular/core';
    import { EasyForm, EasyFormService, EasyField, EasyNotification, Colors, ButtonTypes } from 'easy-suite';

    @Component({
      selector: 'hello-world',
      template: '<easy-form [form]=\"form\"></easy-form>'
    })

    export class HelloWorldComponent {

      form: EasyForm;

      constructor(public easyFormService: EasyFormService) { 
      \tthis.form = this.easyFormService.createForm();
      \tthis.buildForm();
      } 

      buildForm() {
        let container = this.form.addCardContainer(\"Hello World Title\");

        container.addInputField('helloWorldInput', 'Hello World');

        container.addButtonField('Save', () => this.save(), { key:\"1\", color: Colors.color_primary, type: ButtonTypes.button_fab, icon: 'done' });

        let tabs = this.form.addTabContainer(\"Tab 1\");

        let tab1 = tabs.container;
        tab1.addInputField(\"Input 1\");

        let tab2 = tabs.tabs.addTabToTabContainer(\"Tab 2\");
        tab2.addInputField(\"Input 2\");
      }

      save() {
        let fields = this.form.fields;

        let text = fields.filter(x => x.key == \"helloWorldInput\")[0].value;

        alert('Saving ' + text)
        }

    }
    \n

    ###Validation\nAt runtime field names are validated to ensure only one key is added to the collection.

    \n

    One of these exceptions can be thrown

    \n
    FieldWithSameKeyAlreadyExistsException 
    FieldWithKeyDoesNotExistException
    MultipleFieldsWithSameKeyExistException
    \n

    ###More Methods

    \n

    ####Containers :

    \n

    form.addTabContainer(header: string, options: FieldOptions = {})
    form.addCardContainer(header: string, options: FieldOptions = {})
    form.addModalContainer(header: string, options: FieldOptions = {})
    \n

    ####Fields:

    \n
    container.addInputField(label: string, options: FieldOptions = {})
    container.addAutocompleteField(label: string, options: Array<KeyValue>)
    container.addAutocompleteKeyValueField(label: string, options: Array<KeyValue>)
    container.addCheckBoxField(label: string)
    container.addSelectField(label: string, items: Array<string>
    container.addSelectKeyValueField(label: string, items: Array<string>)
    container.addButtonField(label: string, action: Function, options: FieldOptions = {})
    container.addDatePickerField(label: string)
    container.addRadioButtonField(label: string)
    container.addCheckboxGroupField(label: string,items:[\"AA\",\"AB\"],{value:[\"AA\"]})
    container.addTableField<T>(key: string)
    \n

    ####Floating Action Buttons (FABS):

    \n
    this.form = this.easyFormService.createForm();
    this.form.addAction(\"Save\", () => this.save(), { icon: Icons.icon_done, color: Colors.color_primary });
    this.form.addAction(\"Back\", () => this.back(), { icon: Icons.icon_arrow_back, color: Colors.color_warn });
    \n

    ####Modal:

    \n

    constructor( private easyModal: EasyModalService) {  }

    let modal = form.addModalContainer(header: string, options: FieldOptions = {})
    modal.addInputField(\"Test\");
    modal.addAction(\"Save\", () => alert('save'));
    this.easyModal.showModal(modal);
    \n

    ####FieldOptions:

    \n
    export class FieldOptions<T> {
        color?: string
        icon?: string
        type?: string
        format?: string
        showLoader?: boolean
        columnSpan?: number
        value?: T
        key?: string
        label?: string
        required?: boolean
        order?: number
        controlType?: string
        action?: Function
        items?: Array<any>
        xsColumnSize?: string
        smColumnSize?: string
        mdColumnSize?: string
        lgColumnSize?: string
        xlColumnSize?: string
        hide?: boolean;
        maxLength?: number;
        validators?: Validator[]
        updateAction?: Function;
        onEnter?:Function;
    }
    \n

    Available static types

    \n
    Icons, InputTypes, ButtonTypes, Colors, DateFormats

    Usage : 

    import { ButtonTypes, Icons, Colors, InputTypes } from 'easy-suite';

    tab.addInputField('Test Input', { type: InputTypes.input_type_password });
    \n

    Step 4: Events

    \n

    OnChange

    \n

    All fields expose a subscription property which can be subscribed to for field changes.\nUse this when fields are dependent on one another or you just need to know when something changes.

    \n

    Example :

    \n
    let field = container.addInputField('Hello World');

    field.onChange.subscribe(x=>{
    \talert(x.value);
    });
    \n

    OnEnter

    \n

    Example :

    \n
    let field = container.addInputField('Hello World',{onEnter:()=>alert('Enter Pressed')});
    \n

    Step 5 : Handling results

    \n

    To auto map a dto to the fields collection use the mapFields method on EasyForm\nNB!!! Ensure the properties on the dto have been assigned values otherwise the properties aren't accessible to TypeScript

    \n
    export class TestDto {
      name: string = ''; //Default value assigned.
    }

     this.form.mapFields<TestDto>(this.testDto);
    \n

    To bind updates directly to a dto use the updateAction Function in the field options

    \n
     container.addInputField('Hello World', {updateAction:(field:EasyField) => foo = field.value;});
    \n

    The Form object exposes a fields array. As fields are upated this KeyValue Array is also updated.

    \n
     let fields = this.form.fields;

     this.field = fields.filter(x => x.key == \"helloWorldInput\")[0].value;
    \n

    Step 7 Component Validators.

    \n

    Import EasyValidator

    \n
    import { EasyValidator } from 'easy-suite';
    \n

    Add validators to field

    \n
    container.addInputField('Hello World', {validators: [EasyValidator.Required(\"Message to display\")]});
    \n

    Available validators

    \n
    EasyValidator.Required(\"Message to display\")
    EasyValidator.MinLength(5,\"Message to display\")
    EasyValidator.MaxLength(5,\"Message to display\")
    EasyValidator.Pattern(\"some regex\",\"Message to display\")
    \n

    Prebuilt validators

    \n
    EasyValidator.Email(\"Optional Message\")
    EasyValidator.IdentityNumber(\"Optional Message\")
    EasyValidator.TelephoneNumber(\"Optional Message\")
    \n

    Checking field validation state before submitting form

    \n
    let validationResult = this.form.validateForm();
    \n

    This will return a valid flag and an array of invalid fields. Invalid fields will also be highlighted on the webpage.

    \n

    Step 7 (Optional): Usage as component directives.

    \n
      <easy-checkbox [placeholder]=\"field.label\" [(value)]=\"field.value\"></easy-checkbox>

      <easy-input [placeholder]=\"field.label\" [(value)]=\"field.value\" (change)=\"valueChanged()\"></easy-input>

      <easy-select [placeholder]=\"field.label\" [(selectedValue)]=\"field.value\" [items]=\"field.items\" (selectedValueChange)=\"valueChanged()\"></easy-select>

      <easy-select-key-value [placeholder]=\"field.label\" [(selectedValue)]=\"field.value\" [items]=\"field.items\" (selectedValueChange)=\"valueChanged()\"></easy-select-key-value>

      <easy-autocomplete [placeholder]=\"field.label\" [items]=\"field.options\"></easy-autocomplete>

      <easy-button [color]=\"field.color\" [icon]=\"field.icon\" [type]=\"field.type\" [displayValue]=\"field.label\" [showLoader]=\"field.showLoader\" (onClicked)=\"executeAction(field.action)\"></easy-button>

      <easy-table [rows]=\"field.rows\" [columns]=\"field.columns\" [actions]=\"field.actions\"></easy-table>

      <easy-date-picker [placeholder]=\"field.label\" [(value)]=\"field.value\"></easy-date-picker>
    \n

    Appendix: Configuring SystemJS

    \n

    If your project is using SystemJS for module loading, you will need to add easy-suite\nto the SystemJS configuration:

    \n
    System.config({
      // existing configuration options
      map: {
        // ...
        'easy-suite': 'npm:easy-suite/src/',
        'easy-core': 'npm:easy-core/src/'
        // ...
      },

      packages: {
        // ...
          'easy-core': {
            main: 'index.js',
            defaultExtension: 'js'
          },
          'easy-suite': {
            main: 'index.js',
            defaultExtension: 'js'
          }
        // ...
        }

    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner-angular-compatibility-hook":{"name":"nativescript-unit-test-runner-angular-compatibility-hook","version":"0.0.2","license":"MIT","readme":"

    NativeScript tests hook

    \n

    Workaround for running unit tests located in source code (according to Angular style guide)

    \n

    Currently NativeScript runs spec files located in app/tests. This hook copies all source code (in app) to\na .tmp folder inside app/tests, so NativeScript can run unit tests that follow the Angular style guide.

    \n

    Example

    \n
    app
    |-- feature
         |- feature.component.html
         |- feature.component.ts
         |- feature.component.spec.ts
    \n

    Installation

    \n

    Npm

    \n
    npm install nativescript-tests-hook --save-dev
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/nativescript-oauth2":{"name":"@res0/nativescript-oauth2","version":"3.0.8","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-alogent-design-lib":{"name":"nativescript-alogent-design-lib","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws":{"name":"nativescript-aws","version":"1.0.0","license":"MIT","readme":"

    NativeScript AWS plugin

    \n
    \n

    Never check in your AWS keys! Bots scan public repos and will create server instances you'll get billed for.

    \n
    \n

    Q & A

    \n

    Q. Why this module and not use the AWS JS SDK directly?

    \n

    A. Because you can't due to dependencies on Node and/or the browser (crypto, path, DOMParser, etc). Both of which are not available in a NativeScript context.

    \n

    Q. So is this plugin not using the AWS JS SDK then?

    \n

    A. Oh yes it is but upon installation the plugin will modify a few bits in the AWS SDK so it's NativeScript-compatible.

    \n

    Q. Lol. Wut? Modify AWS?

    \n

    A. The main trick here is a postinstall hook that scans the aws-sdk module for package.json files,\nlooks for browser configuration nodes, and find-replaces any matching require() calls in that package and its dependencies.

    \n

    Q. But doesn't browserify / Webpack solve this for us?

    \n

    A. Not in this case, at least not without further modifications. Feel free to submit a PR for a nicer implementation, but this is the best I could think of.

    \n

    Q. Not bad actually, can we use this approach for other npm modules that depend on node built-ins?

    \n

    A. Thanks. And good point. Most of this should apply to more generic usages so expect me to release some universal plugin this one will depend on.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-aws
    \n

    Make sure you use TypeScript (as our demo app does), because this plugin exposes the AWS SDK's\nTypeScript definitions so you'll have an easier time interacting with Amazon's services.

    \n

    Demo app

    \n

    Really, check the demo! It shows how to interact with S3 and Dynamo,\nbut you should be able to interact with all other AWS services as well.

    \n

    Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

    \n

    iOS & Android screenshots

    \n\n\n

    API

    \n

    100% equal to the aws-sdk module. Look at their docs and use TypeScript to make your life easier.

    \n

    Disclaimer

    \n

    I've tried to iron out all compatibility issues between AWS and NativeScript,\nbut you may use some service that throws an error at runtime because it's require-ing some\nunsupported node module. Please open an issue in that case and I'll take a look!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-plugin-nativescript-vue-preset":{"name":"vue-cli-plugin-nativescript-vue-preset","version":"0.1.8","license":"MIT","readme":"

    vue add nativescript-vue-preset

    \n

    Fixes most errors caused by installing <nativescript-vue> plugin.

    \n

    BEFORE installing: create project using vue create --preset vpiskunov/preset-vue-ns {your-project-name}

    \n

    IMPORTANT: run "vue invoke nativescript-vue-preset" twice after adding.

    \n

    What does it do:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"device-checks":{"name":"device-checks","version":"1.0.5","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sim-info":{"name":"nativescript-sim-info","version":"2.0.0","license":"Apache-2.0","readme":"

    nativescript-sim-info

    \n

    NativeScript-Sim-Info is a plugin for NativeScript which allows access to the sim card information.

    \n

    Installation

    \n

    Go to your app's root folder and execute:

    \n
    tns plugin add nativescript-sim-info
    \n

    Usage

    \n
        import { SimInfo } from \"nativescript-sim-info\";

        load(): void {
            const simInfo = new SimInfo();
            simInfo.getData()
                .then((simData) => {
                    console.log(simData)
                }).catch((error) => {
                    console.error(error);
                });
        }
    \n

    Android Output

    \n

    Single Sim

    \n
    [
        {
            \"isoCountryCode\": \"at\",
            \"simOperator\": \"23XXX\",
            \"carrierName\": \"A1\",
            \"callState\": null,
            \"dataActivity\": null,
            \"phoneType\": 1,
            \"simState\": 5,
            \"isNetworkRoaming\": true,
            \"mcc\": 232,
            \"mnc\": 1,
            \"phoneNumber\": \"\",
            \"deviceSoftwareVersion\": \"01\",
            \"simSerialNumber\": \"894301561923869XXXX\",
            \"subscriberId\": \"23201163022XXXX\",
            \"isDefaultSim\": true,
            \"networkType\": 13,
            \"deviceImei\": \"35404611160XXXX\",
            \"deviceMeid\": \"\",
            \"subscriptionId\": 1
        }
    ]
    \n

    Dual Sim

    \n
    [
        {
            \"isoCountryCode\": \"at\",
            \"simOperator\": \"23XXX\",
            \"carrierName\": \"spusu\",
            \"callState\": null,
            \"dataActivity\": 4,
            \"phoneType\": 1,
            \"simState\": 5,
            \"isNetworkRoaming\": true,
            \"mcc\": 232,
            \"mnc\": 17,
            \"phoneNumber\": \"+4366XXXXXXXX\",
            \"deviceSoftwareVersion\": \"00\",
            \"simSerialNumber\": \"894317008000176XXXX\",
            \"subscriberId\": \"23217004025XXXX\",
            \"isDefaultSim\": true,
            \"networkType\": 13,
            \"deviceImei\": \"86760103133XXXX\",
            \"deviceMeid\": \"9900111506XXXX\",
            \"subscriptionId\": 1
        },
        {
            \"isoCountryCode\": \"at\",
            \"carrierName\": \"A1\",
            \"isNetworkRoaming\": true,
            \"phoneNumber\": \"+4366XXXXXXX\",
            \"mcc\": 232,
            \"mnc\": 1,
            \"subscriptionId\": 4,
            \"simSerialNumber\": \"894301561520280XXXX\",
            \"isDefaultSim\": false
        }
    ]
    \n
    \nPossible errors\n

    The plugin will request more or less permission items depending on the Android version. If any of the permissions are rejected by the user, an object will be returned as a rejected promise.

    \n
    {
        \"android.permission.READ_PHONE_STATE\": false,
        \"android.permission.READ_SMS\": false,
        \"android.permission.READ_PHONE_NUMBERS\": false,
    }
    \n
    \n

    iOS Output

    \n

    Single Sim

    \n
    [
        {
            \"mnc\": \"232\",
            \"isoCountryCode\": \"at\",
            \"carrierName\": \"A1\",
            \"allowsVOIP\": true,
            \"mcc\": \"1\"
        }
    ]
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyPlatformAndroid VersioniOS VersionTypeDescription
    isoCountryCodecommon11stringReturns the ISO-3166 country code equivalent for the SIM provider's country code.
    carrierNamecommon11stringReturns the MCC+MNC (mobile country code + mobile network code) of the provider of the SIM. 5 or 6 decimal digits.
    mcccommon11string - number - nullReturns the mobile country code (MCC).
    mnccommon11string - number - nullReturns the mobile network code (MNC).
    simOperatorandroid1-stringReturns the Service Provider Name (SPN).
    callStateandroid1-number - nullReturns the state of all calls on the device.
    dataActivityandroid1-number - nullReturns a constant indicating the type of activity on a data connection (cellular).
    phoneTypeandroid1-number - nullReturns a constant indicating the device phone type.
    simStateandroid1-number - nullReturns a constant indicating the state of the default SIM card.
    isNetworkRoamingandroid1-boolean - nullReturns true if the device is considered roaming on the current network, for GSM purposes.
    phoneNumberandroid1-stringReturns the phone number string for line 1, for example, the MSISDN for a GSM phone. Returns null if it is unavailable.
    deviceSoftwareVersionandroid1-stringReturns the software version number for the device, for example, the IMEI/SV for GSM phones.
    simSerialNumberandroid1-stringReturns the serial number of the SIM, if applicable.
    subscriberIdandroid1-stringReturns the unique subscriber ID, for example, the IMSI for a GSM phone.
    subscriptionIdandroid5.1 (Api: 22)-number - nullReturns the subscription.
    simSerialNumberandroid5.1 (Api: 22)-stringReturns SIM unique serial number (ICCID).
    networkTypeandroid7 (Api: 24)-number - nullReturns a constant indicating the radio technology (network type) currently in use on the device for data transmission.
    deviceImeiandroid8 (Api: 26)-stringreturns IMEI for GSM.
    isDefaultSimandroid--boolean - nullReturns true if the sim is considered the default.
    allowsVOIPios-1boolean - nullIndicates if the carrier allows making VoIP calls on its network.
    \n

    Android

    \n

    Dual-Sim Support

    \n

    From Api Level 22, A.K.A LOLLIPOP_MR1 or Android 5.1, there is support for dual sim. I would like to point out that there is a difference in number of information attributes between what Android considers the default subscription (TelephonyManager) and the subscriptions (SubscriptionManager).

    \n

    iOS

    \n

    Dual-Sim Support

    \n

    From iOS 12 on, Apple supports dual sim. The available information attributes are the same for the default and secondary sim.\nAt the moment, I could not test how is the support for e-sim cards. I would appreciate if anyone is able to test it and let me know

    \n

    Phone Number

    \n

    Apple does not allow the access to the phone number under any circumstance. More information on this topic can be found under the point 2.5.2 of the guidelines.

    \n

    Acknowledgements

    \n

    This plugin is based on the Nativescript-Telephony and uses the following dependencies:

    \n

    NativeScript-Permissions: https://github.com/NathanaelA/nativescript-permissions

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-phone-validation":{"name":"nativescript-phone-validation","version":"0.0.2","license":"MIT","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mean-expert/loopback-sdk-builder":{"name":"@mean-expert/loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-util-ns":{"name":"@synerty/peek-util-ns","version":"0.7.5","license":"MIT","readme":"

    PeekClientFeUtil

    \n

    This project was generated with angular-cli version 1.0.0-beta.21.

    \n

    Development server

    \n

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    \n

    Code scaffolding

    \n

    Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

    \n

    Build

    \n

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

    \n

    Running unit tests

    \n

    Run ng test to execute the unit tests via Karma.

    \n

    Running end-to-end tests

    \n

    Run ng e2e to execute the end-to-end tests via Protractor.\nBefore running the tests make sure you are serving the app via ng serve.

    \n

    Deploying to Github Pages

    \n

    Run ng github-pages:deploy to deploy to Github Pages.

    \n

    Further help

    \n

    To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"molpay-mobile-xdk-nativescript":{"name":"molpay-mobile-xdk-nativescript","version":"3.29.0","readme":"\n\n

    rms-mobile-xdk-nativescript

    \n

    This is the functional Razer Merchant Services NativeScript payment module that is ready to be implemented into any NativeScript project npm install module. An example application project (MOLPayXDKExample) is provided for Razer Merchant Services XDK framework integration reference.

    \n

    Recommended configurations

    \n\n

    Installation

    \n
    tns plugin add molpay-mobile-xdk-nativescript
    \n

    Sample Result

    \n
    =========================================
    Sample transaction result in JSON string:
    =========================================

    {\"status_code\":\"11\",\"amount\":\"1.01\",\"chksum\":\"34a9ec11a5b79f31a15176ffbcac76cd\",\"pInstruction\":0,\"msgType\":\"C6\",\"paydate\":1459240430,\"order_id\":\"3q3rux7dj\",\"err_desc\":\"\",\"channel\":\"Credit\",\"app_code\":\"439187\",\"txn_ID\":\"6936766\"}

    Parameter and meaning:

    \"status_code\" - \"00\" for Success, \"11\" for Failed, \"22\" for *Pending. 
    (*Pending status only applicable to cash channels only)
    \"amount\" - The transaction amount
    \"paydate\" - The transaction date
    \"order_id\" - The transaction order id
    \"channel\" - The transaction channel description
    \"txn_ID\" - The transaction id generated by Razer Merchant Services

    * Notes: You may ignore other parameters and values not stated above

    =====================================
    * Sample error result in JSON string:
    =====================================

    {\"Error\":\"Communication Error\"}

    Parameter and meaning:

    \"Communication Error\" - Error starting a payment process due to several possible reasons, please contact MOLPay support should the error persists.
    1) Internet not available
    2) API credentials (username, password, merchant id, verify key)
    3) Razer Merchant Services server offline.
    \n

    Prepare the Payment detail object

    \n
    var paymentDetails = {
        // Optional, REQUIRED when use online Sandbox environment and account credentials.
        'mp_dev_mode': false,

        // Mandatory String. Values obtained from Razer Merchant Services.
        'mp_username' : 'username',
        'mp_password' : 'password',
        'mp_merchant_ID' : 'merchantid',
        'mp_app_name' : 'appname',
        'mp_verification_key' : 'vkey123', 

        // Mandatory String. Payment values.
        'mp_amount' : '1.10',, // Minimum 1.01
        'mp_order_ID' : 'orderid123', 
        'mp_currency' : 'MYR',
        'mp_country' : 'MY',  
        
        // Optional String.
        'mp_channel' : '', // Use 'multi' for all available channels option. For individual channel seletion, please refer to https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/channel_list.tsv.
        'mp_bill_description' : '',
        'mp_bill_name' : '',
        'mp_bill_email' : '',
        'mp_bill_mobile' : '',
        'mp_channel_editing' : false, // Option to allow channel selection.
        'mp_editing_enabled' : false, // Option to allow billing information editing.
        
        // Optional, but required payment values. User input will be required when values not passed.
        'mp_channel' : 'multi', // Use 'multi' for all available channels option. For individual channel seletion, please refer to https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/channel_list.tsv.
        'mp_bill_description' : 'billdesc',
        'mp_bill_name' : 'billname',
        'mp_bill_email' : 'email@domain.com',
        'mp_bill_mobile' : '+1234567',

        // Optional, allow channel selection. 
        'mp_channel_editing' : false,

        // Optional, allow billing information editing.
        'mp_editing_enabled' : false,

        // Optional, for Escrow.
        'mp_is_escrow': '0', // Put \"1\" to enable escrow

        // Optional, for credit card BIN restrictions and campaigns.
        'mp_bin_lock' : ['414170', '414171'],   

        // Optional, for mp_bin_lock alert error.
        'mp_bin_lock_err_msg': 'Only UOB allowed',
        
        // WARNING! FOR TRANSACTION QUERY USE ONLY, DO NOT USE THIS ON PAYMENT PROCESS.
        // Optional, provide a valid cash channel transaction id here will display a payment instruction screen. Required if mp_request_type is 'Receipt'.
        'mp_transaction_id': '',
        // Optional, use 'Receipt' for Cash channels, and 'Status' for transaction status query.
        'mp_request_type': '',

        // Optional, use this to customize the UI theme for the payment info screen, the original XDK custom.css file can be obtained at https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/custom.css.
        'mp_custom_css_url': '',

        // Optional, set the token id to nominate a preferred token as the default selection, set \"new\" to allow new card only.
        'mp_preferred_token': '',

        // Optional, credit card transaction type, set \"AUTH\" to authorize the transaction.
        'mp_tcctype': '',

        // Optional, required valid credit card channel, set true to process this transaction through the recurring api, please refer the Razer Merchant Services Recurring API pdf. 
        'mp_is_recurring': false,

        // Optional, show nominated channels.
        'mp_allowed_channels': ['credit', 'credit3'],

        // Optional, simulate offline payment, set boolean value to enable. 
        'mp_sandbox_mode': true,

        // Optional, required a valid mp_channel value, this will skip the payment info page and go direct to the payment screen.
        'mp_express_mode': true,

        // Optional, extended email format validation based on W3C standards.
        'mp_advanced_email_validation_enabled': true,

        // Optional, extended phone format validation based on Google i18n standards.
        'mp_advanced_phone_validation_enabled': true,

        // Optional, explicitly force disable user input.
        'mp_bill_name_edit_disabled': true,
        'mp_bill_email_edit_disabled': true,
        'mp_bill_mobile_edit_disabled': true,
        'mp_bill_description_edit_disabled': true,

        // Optional, EN, MS, VI, TH, FIL, MY, KM, ID, ZH.
        'mp_language': 'EN',

        // Optional, Cash channel payment request expiration duration in hour.
        'mp_cash_waittime': 48,
        
        // Optional, allow bypass of 3DS on some credit card channels.
        'mp_non_3DS': true,

        // Optional, disable card list option.
        'mp_card_list_disabled': true,

        // Optional for channels restriction, this option has less priority than mp_allowed_channels.
        'mp_disabled_channels': ['credit']  
        
    };
    \n

    Start the payment module

    \n
    //XML view ready a view for Razer Merchant Services to display
    <GridLayout id=\"molpayExampleView\"></GridLayout>

    //Typescript
    //import Razer Merchant Services package
    import * as molpay from 'molpay-mobile-xdk-nativescript';

    //Javascript
    //import Razer Merchant Services package
    var molpay = require(\"molpay-mobile-xdk-nativescript\");

    exports.pageLoaded = function(args) {
        var page = args.object;
        
        //set the view
        var molpayView = page.getViewById(\"molpayExampleView\");

        //start Razer Merchant Services payment pass the view and the payment Details
        molpay.startMolpay(molpayView ,paymentDetails , function(data){
            //callback after payment success
            console.log(data);
            alert(data);
        });
    };

    \n

    Cash channel payment process (How does it work?)

    \n
    This is how the cash channels work on XDK:\n\n1) The user initiate a cash payment, upon completed, the XDK will pause at the “Payment instruction” screen, the results would return a pending status.\n\n2) The user can then click on “Close” to exit the Razer Merchant Services XDK aka the payment screen.\n\n3) When later in time, the user would arrive at say 7-Eleven to make the payment, the host app then can call the XDK again to display the “Payment Instruction” again, then it has to pass in all the payment details like it will for the standard payment process, only this time, the host app will have to also pass in an extra value in the payment details, it’s the “mp_transaction_id”, the value has to be the same transaction returned in the results from the XDK earlier during the completion of the transaction. If the transaction id provided is accurate, the XDK will instead show the “Payment Instruction" in place of the standard payment screen.\n\n4) After the user done the paying at the 7-Eleven counter, they can close and exit Razer Merchant Services XDK by clicking the “Close” button again.\n
    \n

    XDK built-in checksum validator caveats

    \n
    All XDK come with a built-in checksum validator to validate all incoming checksums and return the validation result through the "mp_secured_verified" parameter. However, this mechanism will fail and always return false if merchants are implementing the private secret key (which the latter is highly recommended and prefereable.) If you would choose to implement the private secret key, you may ignore the "mp_secured_verified" and send the checksum back to your server for validation. \n
    \n

    Private Secret Key checksum validation formula

    \n
    chksum = MD5(mp_merchant_ID + results.msgType + results.txn_ID + results.amount + results.status_code + merchant_private_secret_key)\n
    \n

    Support

    \n

    Submit issue to this repository or email to our support-sa@razer.com

    \n

    Merchant Technical Support / Customer Care : support-sa@razer.com
    \nSales/Reseller Enquiry : sales-sa@razer.com
    \nMarketing Campaign : marketing-sa@razer.com
    \nChannel/Partner Enquiry : channel-sa@razer.com
    \nMedia Contact : media-sa@razer.com
    \nR&D and Tech-related Suggestion : technical-sa@razer.com
    \nAbuse Reporting : abuse-sa@razer.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-services-mongodb-remote":{"name":"nativescript-mongo-stitch-services-mongodb-remote","version":"0.0.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsblestream":{"name":"nsblestream","version":"0.1.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-task-dispatcher":{"name":"nativescript-task-dispatcher","version":"3.1.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner":{"name":"nativescript-unit-test-runner","version":"0.7.0","license":"Apache-2.0","readme":"

    Unit test runner for NativeScript

    \n

    Refer to the documentation of NativeScript CLI's tns test init command for usage.

    \n

    If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gigya":{"name":"nativescript-gigya","version":"0.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-actioncable":{"name":"nativescript-actioncable","version":"0.0.2","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-preact":{"name":"nativescript-preact","version":"0.0.3","license":"MIT","readme":"

    NativeScript Preact

    \n

    This plugin integrates Preact and NativeScript, allowing you to build cross-platform iOS and Android apps using Preact.

    \n

    Why? Because I prefer the (P)React pattern of building UIs over what Angular offers, and find that NativeScript has several technical advantages over ReactNative.

    \n

    Getting Started

    \n

    A proper template repo and documentation is needed. For now, you can copy the demo-app folder from this repo as a starting point.

    \n

    This is Alpha Software!

    \n

    This is a very early working example, and should not be used for a production app unless you really know what you're doing. I hope to build a side-project using this as well as add unit tests for all NativeScript components.

    \n

    How it Works

    \n

    This was made possible by undom library, allowing Preact to rending into a pure JavaScript DOM, within the NativeScript runtime. Currently, I'm shipping a modified undom with basic MutationObserver API implemented which is what nativescript-preact uses to sync changes from the DOM to the NativeScript widgets. I aimed to keep this code generalized (and hopefully small), so the bridge code is easier to maintain and less prone to bugs.

    \n

    Get Involved!

    \n

    File issues! Feel free to post questions as issues here or look for the #preact channel on the NativeScript Slack Community.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-nativescript":{"name":"@progress/jsdo-nativescript","version":"5.0.0","license":"Apache-2.0","readme":"

    Progress Data Source for NativeScript

    \n

    The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript"

    \n

    Documentation

    \n

    Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

    \n

    The Data Source can be used by mobile apps built using NativeScript.

    \n

    License

    \n

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    \n

    http://www.apache.org/licenses/LICENSE-2.0

    \n

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-css-loader":{"name":"nativescript-css-loader","version":"0.26.1","license":"MIT","readme":"

    NativScript css loader for webpack

    \n

    This is a fork of the official css loader for webpack.

    \n

    License

    \n

    MIT (http://www.opensource.org/licenses/mit-license.php)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-app-template":{"name":"@tremho/jove-app-template","version":"8.2.3-pre-release.2","license":"ISC","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-typescript":{"name":"nativescript-dev-typescript","version":"0.10.0","license":"Apache-2.0","readme":"

    NativeScript TypeScript

    \n

    nativescript-dev-typescript is deprecated in favour of bundle workflow, which will be introduced with CLI v6.0. More info about the upcoming new approach can be found here.

    \n

    A package providing TypeScript support for NativeScript.

    \n

    NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Angular is one of the most popular open source JavaScript frameworks for application development. We worked closely with developers at Google to make Angular in NativeScript a reality. The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular web apps, with the performance you’d expect from native code. Read more about building truly native mobile apps with NativeScript and Angular.

    \n

    How to use in NativeScript projects

    \n
    $ npm install -D nativescript-dev-typescript
    \n

    The above command adds nativescript-dev-typescript package as dev dependency and installs the necessary hooks. TypeScript compilation happens when the project is prepared for build. A file named tsconfig.json that specifies compilation options will be created in the project folder and should be committed to source control. Read more about tsconfig.json options.

    \n

    How it works

    \n

    When the plugin installed what it will do out of the box is to add

    \n\n

    How to use in NativeScript plugins

    \n

    This package is not meant to be used in plugins. It's applicable for NativeScript projects only.

    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/plugin-tools":{"name":"@nativescript/plugin-tools","version":"5.1.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules-xsd-schema":{"name":"tns-core-modules-xsd-schema","version":"1.7.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-peek-update":{"name":"nativescript-peek-update","version":"0.2.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cowboyd/nativescript-unit-test-runner":{"name":"@cowboyd/nativescript-unit-test-runner","version":"0.5.1","license":"Apache-2.0","readme":"

    Unit test runner for NativeScript

    \n

    Refer to the documentation of NativeScript CLI's tns test init command for usage.

    \n

    If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-dialog":{"name":"nativescript-easy-dialog","version":"0.0.3","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-login-webpack":{"name":"nativescript-facebook-login-webpack","version":"0.2.3","license":{"type":"","url":"https://github.com/sis0k0/nativescript-facebook-login/blob/master/LICENSE"},"readme":"

    nativescript-facebook-login

    \n

    A NativeScript module providing Facebook login for Android and iOS.\nThe plugin is using the version 4.7.0 for iOS and the version 4.6.0 for Android

    \n

    Prerequisites

    \n

    NativeScript 1.3.0 for Android and iOS since we are using cocoapods and .aar libraries

    \n

    Plugin architecture

    \n
    .
    ├── app  <----------------run npm install from here
    │   ├── node_modules
    │   │   └── nativescript-facebook-login <-- The install will place the module's code here
    │   │       ├──platforms
    │   │       │  ├──android
    │   │       │  │  └─libs
    │   │       │  │    └─facebook-release.aar <-- This is the SDK for android as a .aar library
    │   │       │  └──ios
    │   │       │     └─Podfile <-- This is the SDK for iOS as a cocoapods dependency 
    │   │       ├──facebook-handler.android.js
    │   │       ├──facebook-handler.ios.js 
    │   │       ├──LICENSE
    │   │       ├──README
    │   │       └──package.json
    │   ├── package.json <-- The install will register \"nativescript-facebook-login as a dependency here
    │   └── tns_modules
    │       └── ...
    └──
    \n

    Installation

    \n

    tns plugin add nativescript-facebook-login

    \n

    iOS

    \n

    For ios you need to add this to your app.ios to initialize the SDK

    \n
    var application = require(\"application\");

    class MyDelegate extends UIResponder implements UIApplicationDelegate {
      public static ObjCProtocols = [UIApplicationDelegate];

      applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
       return FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions);
      }
      
      applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
        return FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation);
      }
      
      applicationDidBecomeActive(application: UIApplication): void {
          FBSDKAppEvents.activateApp();
      }

      applicationWillTerminate(application: UIApplication): void {
        //Do something you want here
      }

      applicationDidEnterBackground(application: UIApplication): void {
        //Do something you want here
      }
    }

    application.ios.delegate = MyDelegate;
    application.start();
    \n

    Add to your Info.plist(the one inside platforms/ios/yourApp) the Facebook App ID credentials

    \n

    <key>CFBundleURLTypes</key>
    \t<array>
    \t\t<dict>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
            <string>fb{your-app-id}</string>
    \t\t\t</array>
    \t\t</dict>
    \t</array>
    \t<key>CFBundleVersion</key>
    \t<string>1.0</string>
    \t<key>FacebookAppID</key>
      <string>{your-app-id}</string>
    \t<key>FacebookDisplayName</key>
    \t<string>FacebookLoginDemo</string>
    \t<key>LSApplicationQueriesSchemes</key>
    \t<array>
    \t\t<string>fbauth2</string>
    \t\t<string>fbapi</string>
    \t\t<string>fb-messenger-api</string>
    \t\t<string>fbshareextension</string>
    \t</array>
    \n

    For more information you can consult the official Facebook page for iOS\nhttps://developers.facebook.com/docs/ios

    \n

    Android

    \n

    Add to your AndroidManifest.xml (the one inside platforms/android/src/main) the Facebook App ID credentials

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    application android:label=\"@string/app_name\" ...>
        ...
        <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
        <activity android:name=\"com.facebook.FacebookActivity\"
              android:configChanges=
                     \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
              android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
              android:label=\"@string/app_name\" />
    </application>
    \n

    Add to your Strings (platforms/android/src/main/res/values/strings.xml) your facebook app id

    \n
    <string name=\"facebook_app_id\">your-app-id</string>
    \n

    For more information you can consult the official Facebook page for Android\nhttps://developers.facebook.com/docs/android

    \n

    Common to iOS and Android

    \n

    Require the plugin whenever you want to use it

    \n
    var FacebookLoginHandler = require(\"nativescript-facebook-login\");
    \n

    Create the callbacks to handle the result of the login

    \n
     var successCallback = function(result) {
                //Do something with the result, for example get the AccessToken
                var token;
                if (topmost().android){
                  token = result.getAccessToken().getToken();
                }
                else if (topmost().ios){
                  token = result.token.tokenString
                }
                alert(token);
            }

            var cancelCallback = function() {
                alert(\"Login was cancelled\");
            }

            var failCallback = function(error) {
                var errorMessage = \"Error with Facebook\";
               //Try to get as much information as possible from error
               if (error) {
                    if (topmost().ios) {
                        if (error.localizedDescription) {
                            errorMessage += \": \" + error.localizedDescription;
                        }
                        else if (error.code) {
                            errorMessage += \": Code \" + error.code;
                        }
                        else {
                            errorMessage += \": \" + error;   
                        }
                    }
                    else if (topmost().android) {
                        if (error.getErrorMessage) {
                            errorMessage += \": \" + error.getErrorMessage();
                        }
                        else if (error.getErrorCode) {
                            errorMessage += \": Code \" + error.getErrorCode();
                        }
                        else {
                            errorMessage += \": \" + error;   
                        }
                    }
                }
                alert(errorMessage);
            }
    \n

    And finally you can start the login process like this

    \n
      //Here we select the login behaviour

        //Recomended system account with native fallback for iOS
        if (topmost().ios) {
            FacebookLoginHandler.init(2);
        }
        //Recomended default for android 
        else if (topmost().android) {
            FacebookLoginHandler.init();
        }
        //Register our callbacks
        FacebookLoginHandler.registerCallback(successCallback, cancelCallback, failCallback);
        //Start the login process
        FacebookLoginHandler.logInWithPublishPermissions([\"publish_actions\"]);
    \n

    Known issues

    \n

    Sometimes the .aar library with the sdk for android don't get linked to the platform after installing the plugin. This end up in the error:
    \nTypeError: Cannot read property 'FacebookSdk' of undefined\nFile: "/data/data/com.ladeezfirstmedia.ThisOrThat/files/app/tns_modules/nativescript-facebook-login/facebook-handler.js line: 9 column:16

    \n

    You can try to sync the platform\ntns livesync android

    \n

    You can try cleaning the platform.\n-remove the plugin\n-remove the platform\n-add the plugin\n-add the platform in that order

    \n

    You can try to add manually the dependency\nchange the build.gradle (platforms/android/build.gradle) like this:

    \n
    dependencies {
    \t....
            ....
        compile \"com.android.support:support-v4:$suppotVer\"
        compile \"com.android.support:appcompat-v7:$suppotVer\"

        //Facebook sdk
        compile 'com.facebook.android:facebook-android-sdk:4.6.0'
         \t....
            ....
        
    }
    \n

    Frequently asked questions

    \n

    Why Xcode is not building my iOS platform?

    \n

    After installing the plugin CocoaPods creates a .xcworkspace file, use this one to open the project in Xcode instead of the .xcodeproj

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bottombar":{"name":"nativescript-bottombar","version":"3.0.8","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ravepay-simple":{"name":"nativescript-ravepay-simple","version":"0.0.5","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hex-string":{"name":"nativescript-hex-string","version":"0.0.4","license":"Apache-2.0","readme":"
    sha256('abcd');
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils-ns5":{"name":"nativescript-google-maps-utils-ns5","version":"0.1.2","license":"Unlicense","readme":"

    nativescript-google-maps-utils-ns5

    \n
    Improved version
    \n

    NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

    \n

    \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

    \n

    State

    \n

    Android implemented.

    \n

    iOS not implemented.

    \n

    Dependencies

    \n\n

    Install

    \n
    tns plugin add nativescript-google-maps-utils-ns5
    \n

    Usage with TypeScript

    \n

    import using either of

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@msaelices/nativescript-radiobutton":{"name":"@msaelices/nativescript-radiobutton","version":"0.3.0","license":"Apache 2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-audio-recorder":{"name":"@nstudio/nativescript-audio-recorder","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-webpack-template":{"name":"nativescript-akylas-webpack-template","version":"1.0.15","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-layout":{"name":"nativescript-wear-os-layout","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-sdk":{"name":"nativescript-mongo-stitch-sdk","version":"0.0.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-listview":{"name":"nativescript-wear-os-listview","version":"0.1.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-carousel-swipeable":{"name":"nativescript-ng2-carousel-swipeable","version":"0.1.6","license":"MIT","readme":"

    {N} + Angular Carousel Slider

    \n

    A simple NativeScript + Angular images carousel for iOS and Android.

    \n

    Tested on:

    \n\n

    You can download older versions here for previous versions of Angular and Nativescript.

    \n

    I would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue.

    \n

    Demo

    \n

    You can check a reference application here created to show how to integrate the "{N} + Angular Carousel Slider".

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOsAndroid
    \"\"\"\"
    \n

    Getting started

    \n

    See demo for further details.

    \n
      \n
    1. Download and install the module via npm to your Nativescript project:
      2. \n
    \n
    \ncd your_tns_project_path/\nnpm install nativescript-ng2-carousel --save\n
    \n
      \n
    1. Add the CarouselDirective class to the declarations NgMoudle metadata:
      2. \n
    \n
    \n@NgModule({\n    declarations: [AppComponent, CarouselDirective],\n    bootstrap: [AppComponent],\n    imports: [NativeScriptModule],\n    schemas: [NO_ERRORS_SCHEMA]\n})\n
    \n
      \n
    1. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
      2. \n
    \n
    \n<GridLayout [carousel]=\"images\" carouselLabelOverlay=\"true\" carouselSpeed=\"2000\">\n    \n</GridLayout>\n
    \n

    Add images from URL to your component:

    \n
    \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
    \n

    You can also add images from your assets folder or resources folder using file attribute instead of url attribute:

    \n
    \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },\n            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
    \n
      \n
    1. CSS styling:
      2. \n
    \n
    \n/** Slider image */\n.slider-image {\n\n}\n\n/** Slider title format */\n.slider-title {\n    color: #fff;\n    font-weight: bold;\n    background-color: rgba(125, 125, 125);\n    padding: 8;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n/** Arrows */\n.arrow {\n    color: #ffffff;\n    font-size: 32;\n    vertical-align: middle;\n    padding: 10;\n}\n\n/** Arrow left wrapper */\n.arrow.arrow-left {\n\n}\n\n/** Arrow right */\n.arrow.arrow-right {\n\n}\n
    \n

    Supported attributes

    \n

    Currently directive supported attributes:

    \n\n

    Changelog

    \n

    Version 0.1.0

    \n\n

    Version 0.0.5

    \n\n

    Version 0.0.4

    \n\n

    Version 0.0.3

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fetch":{"name":"nativescript-fetch","version":"0.0.1","license":"MIT","readme":"

    NativeScript Fetch

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-language":{"name":"nativescript-language","version":"0.1.0","license":"MIT","readme":"

    NativeScript Language Plugin

    \n
    \n

    A NativeScript Language Plugin for Android.

    \n
    \n

    ... in development

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bip39":{"name":"nativescript-bip39","version":"1.0.5","license":"ISC","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-crypto":{"name":"nativescript-webview-crypto","version":"0.1.5","license":"MIT","readme":"

    nativescript-webview-crypto

    \n

    \"npm\"\n\"Dependency

    \n

    This brings window.Crypto to your Native Script application. It does this\nby communicating with a hidden WebView, which performs the actual\ncomputation.

    \n

    Refer to the webview-crypto\nrepo for most of the code and some cavaets.

    \n

    If you are using Angular2 with Nativescript, you should use\nnativescript-angular-webview-crypto.

    \n

    This project is funded by Burke Software and Consulting LLC for passit. We are available for hire for any improvement and integration needs on this project. Open an issue to start a conversation or email info @ burke software dot come.

    \n

    Install

    \n

    This requires being setup properly with NativeScript\nfirst. Then install this as a plugin:

    \n
    tns plugin add nativescript-webview-crypto
    \n\n

    Quickstart

    \n

    Rendering the PolyfillCrypto components will start up a WebView to\ntransparently proxy all the crypto calls to. It will also set the crypto\nglobal variable.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:WebViewCrypto=\"nativescript-webview-crypto\">
      <WebViewCrypto:WebViewCrypto />
      ...
    </Page>
    \n

    Now, in any of your code, you can access window.Crypto, just like you would\nin a browser.

    \n

    You can look at an example repo\nrunning this example for symmetric encryption\nin NativeScript.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-box-inset-layout":{"name":"nativescript-wear-os-box-inset-layout","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bcryptjs":{"name":"nativescript-bcryptjs","version":"1.0.1","license":"GNU General Public License 3","readme":"

    nativescript-bcrypt.js

    \n

    A nativescript plugin that integrate bcrypt.js plugin in order to hash, compare passwords...

    \n

    Author

    \n\n

    How to use it

    \n
    import {bcrypt} from ('nativescript-bcryptjs');
    let salt = bcrypt.genSaltSync(10);
    let hash2 = bcrypt.hashSync(\"password\", salt);
    let hash = bcrypt.hashSync(\"password\", 4);
    let comp = bcrypt.compareSync(\"password\", hash);
    bcrypt.genSalt(10, (err, salt) => {
        bcrypt.hash(\"B4c0/\\/\", salt, (err, hash) => {
            bcrypt.compare(\"B4c0/\\/\", hash, function (err, res) {
            });
        });
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-document-picker":{"name":"nativescript-document-picker","version":"1.0.7","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-instagram-auth":{"name":"nativescript-instagram-auth","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-instagram-auth

    \n

    Easily integrate Instagram login for your NativeScript app (ready only for apps made with angular at the moment)

    \n

    Installation

    \n
    tns plugin add nativescript-instagram-auth
    \n

    Configuration

    \n

    Register the module and configure it with your credentials

    \n

    Note: the redirect uri need to be the same you set on the instagram developers website > manage clients > security

    \n
    import {InstagramAuthModule} from \"nativescript-instagram-auth/angular\";
    // ...
    // Register this module to your angular app
    InstagramAuthModule.forRoot({
    \tclientId: 'YOUR_CLIENT_ID',
    \tredirectUri: 'A_VALID_REDIRECT_URL'
    })
    \n

    Launch the login screen (as a modal only)

    \n
    private igLogin(): Promise<InstagramLoginResponse> {
    \tconst options: ModalDialogOptions = {
    \t\tviewContainerRef: this.vcRef,
    \t        context: {},
    \t        fullscreen: true
            };
            return this.modalService.showModal(LoginComponent, options);
    }

    ngOnInit(): void {
    \tthis.igLogin().then(({error, token}) => {
    \t\tif (error) {
                    // the user cancelled the login process or an error raised
    \t\t} else {
    \t\t\tconsole.log(`access token: ${token}`);
    \t\t}
            });
        }
    \n

    Example

    \n

    Full example available in demo-angular folder

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-ng-tutorial":{"name":"nativescript-template-ng-tutorial","version":"6.0.0","readme":"

    NativeScript Tutorial Angular Template

    \n

    This repo serves as the starting point for NativeScript’s Angular Getting Started Guide.

    \n

    Please file any issues with this template on the NativeScript/docs repository, which is where the tutorial content lives.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nawah/nativescript":{"name":"@nawah/nativescript","version":"2.0.0-a5","readme":"

    nativescript

    \n

    This library was generated with Nx.

    \n

    Running unit tests

    \n

    Run nx test nativescript to execute the unit tests.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jsx":{"name":"nativescript-jsx","version":"0.0.1","license":"MIT","readme":"

    NativeScript JSX

    \n

    Work in progress. Stay tuned.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-android":{"name":"tns-android","version":"6.5.3","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-file-loader":{"name":"nativescript-dev-file-loader","version":"0.1.2","license":"Apache-2.0","readme":"

    File-loader like hook for NativeScript

    \n

    This provides the functionality to import normal files as modules (url string) in NativeScript.

    \n

    Currently, only files with jpg, png, gif and svg extension is processed.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitudearchitectview":{"name":"nativescript-wikitudearchitectview","version":"0.4.6","license":"MIT","readme":"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-navigation-tabbar":{"name":"nativescript-navigation-tabbar","version":"0.1.2","license":"ISC","readme":"

    NavigationTabBar

    \n

    This is a nativescript port of Devlight's Android TabBar Implementation

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slider-test":{"name":"nativescript-slider-test","version":"1.0.0-test","license":{"type":"Apache-2.0"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-generator":{"name":"nativescript-app-generator","version":"0.0.2","license":"ISC","readme":"

    \"Build

    \n

    generate npm package

    \n

    This is cli to create boiler plate for npm package project.

    \n

    Getting Started

    \n

    Installation

    \n

    npm install -g nativescript-app-generator

    \n

    Usage

    \n

    $ nativescript-app-generator

    \n

    \"create\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionsDefaultDescription
    project namecreate-npm-packagenpm package name or project name
    semacntic releeasefalse or Noadd semantic denpendencies
    travis setupfalse or Noconfig travis setup .travis.yml
    install dependenciesfalse or Noinstall project dependencies after creating project
    \n

    Semantic Release

    \n
    npm install -g semantic-release-cli
    cd your-module
    semantic-release-cli setup
    \n\"semantic\"\n

    Travis CI Setup

    \n

    Project Structure

    \n

    \"project\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    File/FolderDescriptions
    project/index.jsentry file while creating npm module.
    src/lib/index.jsmain file that you want to publish in npm.
    src/lib/index.spec.jstest file for above file.
    styles/folder for styles if you are creating UI npm module.
    test/index.jsfor testing build files after build.
    .travis.ymlfor Travis CI
    \n

    Commands

    \n\n

    Create Simple NPM package

    \n

    cd your-module

    \n

    Install Dependencies

    \n

    npm installl

    \n

    Add Git Link

    \n

    package.json

    \n
    \"repository\": {
        \"type\": \"git\",
        \"url\": \"git_repository_link\"
    }
    \n

    npm publish - Using Semanctic Release

    \n
    npm install -g commitizen
    npm run commit
    git push
    \n

    npm publish - without Semantic Release LInk

    \n
    npm build
    npm login
    npm publish
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pekevski/typeorm":{"name":"@pekevski/typeorm","version":"1.0.8","license":"Apache-2.0","readme":"

    @pekevski/typeorm

    \n

    Usage

    \n
      \n
    1. \n

      Install the dependencies for nativescript sqlite and typeorm in your Nativescript project.

      \n
      npm i typeorm reflect-metadata nativescript-sqlite
      ns plugin add @pekevski/typeorm
      \n
      2. \n
    2. \n

      Create a database connection in your applications entry point eg. main.ts

      \n
      let driver = require('nativescript-sqlite');

      // use an iife to run it before angular starts
      (async () => {
          console.log('START APP')
          try {
              const connection = await createConnection({
                  database: 'test.db',
                  type: 'nativescript',
                  driver,
                  entities: [
                      User,
                      // ... more models here
                  ],
                  logging: true
              })

              // Dangerously drops all tables on app start if true
              // connection.synchronize(true);

              console.log(\"Connection Created\")
          } catch (err) {
              console.error(err)
          }
      })();
      \n
      3. \n
    3. \n

      Then follow the instructions on how to use TypeOrm

      \n
      4. \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ali":{"name":"nativescript-ali","version":"0.0.1","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-fab":{"name":"nativescript-vue-fab","version":"2.0.4","license":"Apache-2.0","readme":"

    nativescript-vue-fab

    \n

    A Vue component that shows Material Design Fab button

    \n

    Installation

    \n
    npm i --save vue-clock-simple
    \n
    import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
    import CardViewPlugin from 'nativescript-material-cardview/vue';
    import FabPlugin from 'nativescript-vue-fab';
    Vue.use(ButtonPlugin);
    Vue.use(CardViewPlugin);
    Vue.use(FabPlugin);
    \n

    You also need to import the css style from your app style file. The reason is that this way you can easily override any css class.

    \n
    @import '../node_modules/nativescript-vue-fab/style';
    \n

    Usage

    \n

    Once installed, it can be used in a template as simply as:

    \n
    <Fab title=\"test\" iconClass=\"mdi\" :icon=\"'mdi-plus' | fonticon\" :iconOn=\"'mdi-share-variant' | fonticon\" @tap=\"onTap('main', $event)\">
        <FabItem title=\"test6\" iconClass=\"mdi\" icon=\"e\" color=\"red\" @tap=\"onTap('test6', $event)\" />
        <FabItem title=\"test5\" iconClass=\"mdi\" icon=\"d\" color=\"red\" @tap=\"onTap('test5', $event)\" />
        <FabItem title=\"test4\" iconClass=\"mdi\" icon=\"c\" color=\"red\" @tap=\"onTap('test4', $event)\" />
        <FabItem title=\"test3\" iconClass=\"mdi\" icon=\"b\" color=\"red\" @tap=\"onTap('test3', $event)\" />
        <FabItem title=\"test\" iconClass=\"mdi\" icon=\"a\" color=\"blue\" @tap=\"onTap('test', $event)\" />
    </Fab>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-drawer-ts":{"name":"nativescript-template-drawer-ts","version":"1.4.0","license":"MIT","readme":"

    NativeScript Drawer Template

    \n

    A quick-and-dirty template for starting a new NativeScript app with drawer navigation pre-scaffolded in TypeScript.

    \n

    Full credit to TJ Van Toll for the original JavaScript version of this template.

    \n

    Usage

    \n

    tns create my-project-name --template nativescript-template-drawer-ts

    \n

    Screenshots

    \n

    \"\"\n\"\"

    \n
    \n

    \"\"\n\"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ylprogressbar":{"name":"nativescript-ylprogressbar","version":"0.0.5","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-list-item":{"name":"nativescript-list-item","version":"1.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-five-sdk":{"name":"nativescript-five-sdk","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Five Sdk

    \n

    (Optional) Prerequisites / Requirements

    \n

    NativeScript 5.4 above.

    \n

    Installation

    \n
    tns plugin add nativescript-five-sdk
    \n

    Add following dependencies to your app.gradle

    \n
    implementation 'com.google.android.gms:play-services-ads-identifier:+'
    \n

    Usage

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-externals":{"name":"nativescript-vue-externals","version":"0.2.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner-essent":{"name":"nativescript-unit-test-runner-essent","version":"0.3.6","license":"Apache-2.0","readme":"

    Unit test runner for NativeScript

    \n

    Refer to the documentation of NativeScript CLI's tns test init command for usage.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pose":{"name":"nativescript-pose","version":"0.0.1","license":"ISC","readme":"

    Work in Progress

    \n

    Don't hesitate, if you want to contribute, your help is welcome :)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-fusion-icon":{"name":"nativescript-ngx-fusion-icon","version":"0.1.3","license":"Apache 2.0","readme":"

    Develop a NativeScript plugin \"Build

    \n
    \n

    This repo is heavily based on @NathanWalker's Plugin Seed. Thanks Nathan!

    \n
    \n\n\n\n\n

    TL;DR

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

    \n
      \n
    1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript--yourplugin is the name of your plugin.
      2. \n
    2. cd nativescript-yourplugin/src
      3. \n
    3. npm run postclone
      4. \n
    4. npm run demo.ios or npm run demo.android to run the demo.
      5. \n
    5. In another command prompt/terminal npm run plugin.tscwatch to watch to typescript changes in the plugin and to autmatically apply them in the demo.
      6. \n
    \n

    Long Description

    \n

    What is NativeScript plugin seed?

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

    \n\n

    \"Plugin

    \n

    Plugin folder structure

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Folder/File nameDescription
    demoThe plugin demo source code
    demo/testsThe tests for your plugin
    srcThe plugin source code
    src/platform/androidPlugin Android specific configuration
    src/platform/iosPlugin ios specific configuration
    src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
    src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
    publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
    \n

    Getting started

    \n
      \n
    1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript--yourplugin is the name of your plugin..
      2. \n
    2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
      3. \n
    3. Execute npm run postclone to:\n
        \n
      • configure your github username - it will be changed in the package.json for you
        • \n
      • configure your plugin name - all files and classes in the seed will be renamed for you
        • \n
      • stub your plugin README.md file
        • \n
      • create a new repository for your plugin
        • \n
      • npm link your plugin the demo app - this will install the plugin dependencies and will add a sym link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
        • \n
      \n
      4. \n
    \n

    Now you can continue with the development of your plugin by using the Development setup described below.

    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n
      \n
    1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
      2. \n
    2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
      3. \n
    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the src folder in order to use native APIs:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

    \n
      \n
    1. Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
      2. \n
    \n

    Unittesting

    \n

    The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API go to src folder and execute one of these commands:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish to NPM

    \n

    When you have everything ready to publish:

    \n\n

    If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

    \n

    NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

    \n

    TravisCI

    \n

    The plugin structure comes with fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is commited to a branch TravisCI will trigger a build testing the code.

    \n

    To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-vuex-persist":{"name":"ns-vuex-persist","version":"0.1.0","license":"MIT","readme":"

    ns-vuex-persist

    \n

    A Vuex plugin that enables you to save the state of your NativeScript app to the SharedPreferences on Android and NSUserDefaults on iOS via the Application Settings module

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"jsx-to-nativescript":{"name":"jsx-to-nativescript","version":"0.0.1","license":"MIT","readme":"

    WIP.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-tools":{"name":"ns-tools","version":"0.0.3","license":"ISC","readme":"

    NativeScript Tools

    \n

    Convenience Tools for working with NativeScript

    \n

    Install

    \n

    npm install -g ns-tools

    \n

    Usage

    \n
      Usage: nst [options] <cmd> <subCmd> [param...]

      Options:

        -h, --help         output usage information
        -V, --version      output the version number
        --css              Create CSS file only
        --js               Create JS file only
        --xml              Create XML file only
        --force-overwrite  Force overwrite existing files. !!USE WITH CAUTION!!
    \n

    Create new controller

    \n

    nst create controller test/newpage

    \n

    Results:

    \n
      Created: test/newpage.js
      Created: test/newpage.css
      Created: test/newpage.xml
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@microexcel-csd/nativescript-create-pdf":{"name":"@microexcel-csd/nativescript-create-pdf","version":"1.1.1","license":"ISC","readme":"

    Nativescript Create PDF

    \n

    A plugin to help create and save a PDF file to the users device that includes text and images.

    \n

    Prerequisites / Requirements

    \n

    Install the Nativescript-permissions plugin from: https://www.npmjs.com/package/nativescript-permissions

    \n
    npm i nativescript-permissions
    \n

    Your PDF will not be written without permission to READ and WRITE to the filesystem.

    \n

    Installation

    \n
    tns plugin add @microexcel-csd/nativescript-create-pdf
    \n

    Usage

    \n

    Import the plugin into your component

    \n
    import { CreatePdf } from \"@microexcel-csd/nativescript-create-pdf\";
    \n

    Init the plugin

    \n
    createPdf = new CreatePdf();
    \n

    Request proper Android permissions:

    \n
     ngOnInit(): void {
            permissions.requestPermission([
                \"android.permission.READ_EXTERNAL_STORAGE\",
                \"android.permission.WRITE_EXTERNAL_STORAGE\",
            ], \"We need these permissions to save pdf\")
            .then(function (res) {
            })
            .catch(function () {
            });
        }
    \n

    Create your PDF file settings:

    \n
    fileSettings = {
            orientation: 'portrait',
            units: 'mm',
            paperSize: 'Letter',
            fileName: 'pdf-export.pdf', // Name your file with the extension
            folderName: 'App-Exports' // Name the folder being created where your pdf will be saved
        }
    \n

    Add your text:

    \n
    text = [
        {
            data: 'Page 1 Sample Text', // this is what appears on the page
            xPos: 10, // x coordinate from top left
            yPos: 20, // y coordinate from top left
            fontSize: 18,
            pageNum: 1 // the page your text will appear on
        },
        {
            data: 'Page 2 Sample Text',
            xPos: 10,
            yPos: 20,
            fontSize: 14,
            pageNum: 2
        }
    ];
    \n

    Change font color:

    \n

    Add fontColor to your text object with your RGB color values in an array. If fontColor is not included the default color is black.

    \n
    fontColor: [8, 134, 255]
    \n

    Add your images:

    \n
    images = [
        {
            path: './app/assets/image.jpg', // where your image is located
            type: 'JPEG', // img type
            xPos: 10, // x coordinate from top left
            yPos: 40, // y coordinate from top left
            width: 30, // width of your image in same unit size as your file settings (mm in this example)
            height: 30, // height of your image in same unit size as your file settings (mm in this example)
            alias: null,
            compression: 'FAST',
            pageNum: 1 // the page your image will appear on
        },
        {
            path: './app/assets/image.jpg',
            type: 'JPEG',
            xPos: 10,
            yPos: 40,
            width: 100,
            height: 125,
            alias: null,
            compression: 'FAST',
            pageNum: 2
        }
    ];
    \n

    Pass data and create your pdf:

    \n
    this.createPdf.create(this.fileSettings, this.text, this.images);
    // this will create your pdf and write it to the device
    \n

    Credits

    \n

    https://www.npmjs.com/package/jspdf\nhttps://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html

    \n

    ISC License

    \n

    Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

    \n

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

    \n

    Support Our Packages

    \n

    \"paypal\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-observable-array":{"name":"nativescript-windowed-observable-array","version":"0.0.1","license":"MIT","readme":"

    Observable Windowed FIFO Array

    \n

    Based in original NativeScript Observable Array.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"speigg-nativescript-geolocation":{"name":"speigg-nativescript-geolocation","version":"0.0.9-patch.0","readme":"

    Welcome to the nativescript-geolocation plugin for NativeScript framework

    \n

    Prerequisites

    \n\n

    Install nativescript-geolocation plugin.

    \n

    Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-geolocation.

    \n

    This project can be used as an example how to use nativescript-geolocation and nativescript-googlemaps plugins.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-drawer":{"name":"nativescript-template-drawer","version":"1.3.1","license":"MIT","readme":"

    NativeScript Drawer Template

    \n

    A quick-and-dirty template for starting a new NativeScript JavaScript app with drawer navigation pre-scaffolded.

    \n
    \n

    NOTE: Want to use TypeScript instead? Check out @ignaciofuentes’ TypeScript drawer template.

    \n
    \n

    Usage

    \n

    tns create my-project-name --template nativescript-template-drawer

    \n

    Screenshots

    \n

    \"\"\n\"\"

    \n
    \n

    \"\"\n\"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-firebase":{"name":"nativescript-firebase","version":"0.1.1","license":{"type":"MIT"},"readme":"

    nativescript-firebase

    \n

    This is a Nativescript-compatible wrapper for the Firebase node.js SDK.

    \n

    License

    \n

    This module is licensed under the MIT license. Firebase and other modules have different licenses.

    \n

    Installation

    \n
    tns plugin add nativescript-firebase \n
    \n

    Usage

    \n

    Exactly the same as Firebase for node.js:

    \n
    var Firebase = require(\"nativescript-firebase\");

    var fb = new Firebase(\"some-app.firebaseio.com\");
    \n

    This module uses the actual Firebase node.js SDK (see package.json dependencies).

    \n

    How it works

    \n

    This module provides some dependencies required by the Firebase node.js SDK in the form of bundled modules. Versions 0.0.1 and 0.0.2 used a modified require function but I changed this because around version 1.5.0 of Nativescript it seems they replaced the global require with a parameter supplied to each module, meaning it couldn't be overwritten.

    \n

    The bundled modules are mostly just wrappers around other modules, or internal Nativescript functionality. They are:

    \n\n

    I've set the version number of the faye-websocket and inherits wrappers to 999.9.9 to override the modules in deeper dependencies.

    \n

    The following modules are also used, and are Nativescript-compatible out of the box:

    \n\n

    The following global variables are also created to make the modified modules and Firebase work:

    \n\n

    This is made possible by a modified version of NathanaelA's nativescript-websockets module, with a workaround for an SSL issue. This module is the substitute for the faye-websocket module required by Firebase.

    \n

    Limitations and warnings

    \n

    This module hasn't been rigorously tested. Here's what's working for me:

    \n\n

    Most features should be working, but there might be more bugfixes to come. I'm using this in a project of mine so it'll get further tested as I use it more.

    \n

    Note that this might have problems with Nativescript 1.5.1 due to this issue.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-limp":{"name":"ns-limp","version":"6.1.0-dev","license":"Apache-2.0","readme":"

    ns-limp

    \n

    Official NativeScript Angular SDK for LIMP.

    \n

    Quick Start

    \n

    The current SDK has two dependencies:

    \n\n

    Install ns-limp for NativeScript

    \n
    tns plugin add ns-limp
    \n

    How to Use

    \n
      \n
    1. Initiate the API, in your component, using :
      2. \n
    \n
    import { Component, OnInit } from '@angular/core';

    import { ApiService, Res } from 'ns-limp/api.service';

    @Component({
    \tselector: 'app-root',
    \ttemplateUrl: './app.component.html',
    \tstyleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

    \tconstructor(private api: ApiService) {}

    \tngOnInit() {
    \t\tthis.api.init({
    \t\t\tapi: 'ws://localhost:8081/ws',
    \t\t\tanonToken: '__ANON',
    \t\t\tauthAttrs: ['email']
    \t\t});
    \t}
    }
    \n

    SDK Config

    \n

    When initialising the SDK, you should pass an object matching the interface SDKConfig, which has the following attributes:

    \n
      \n
    1. api (Required): The URI of LIMP app you are connecting to.
      2. \n
    2. anonToken (Required): LIMP app ANON_TOKEN.
      3. \n
    3. authAttrs (Required): As of LIMP APIv5.8, LIMP apps don't have strict User module attrs structure. This includes the authentication attrs that are set per app. This attribute represents an Array<string> referring to the same authentication attrs of the app.
      4. \n
    4. debug (Optional): A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.
      5. \n
    5. fileChunkSize (Optional): A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to LIMP app. Default 512000.
      6. \n
    6. authHashLevel (Optional): Either 5.0 or 5.6. With the change to auth hash generation introduced in APIv5.6 of LIMP, some legacy apps are left without the ability to upgrade to APIv5.6 and beyond due to hashes difference. SDKv5.7 is adding authHashLevel to allow developers to use higher APIs and SDKs with legacy apps. Default 5.6;
      7. \n
    \n

    Best Practices

    \n

    You can use the SDK 100% per your style of development, however we have some tips:

    \n

    Session Reauth

    \n

    The best practice to handle a reauth scenario is by attempting to checkAuth as soon as the connection with LIMP app is made. This can be made by subscribing to inited$ subject which notifies subscriptions about any changes to SDK initialisation status reflected as inited attribute in the SDK. Which can be done like:

    \n
    this.api.inited$.subscribe((init: boolean) => {
    \tif (init) {
    \t\t// SDK is inited and ready for your calls:
    \t\ttry {
    \t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
    \t\t\tthis.api.checkAuth();
    \t\t} catch { }
    \t}
    }, (err: Res<Doc>) => {
    \tconsole.log('inited$.err', err);
    });
    \n

    Auth State Detection

    \n

    Although, you can detect the user auth state in the subscription of the calls auth, reauth and checkAuth, the best practice is to use the global authed$ state Subject. You can do this by subscripting to authed$ in the same component (usually AppComponent) you are initiating the SDK at. This assures a successful checkAuth as part of the api.init subscription can be handled. The model suggested is:

    \n
    this.api.authed$.subscribe((session: Doc) => {
    \tif (session) {
    \t\tconsole.log('We are having an `auth` condition with session:', session);
    \t} else {
    \t\tconsole.log('We just got unauthenticated');
    \t}
    });
    \n

    Reconnecting on Disconnects

    \n

    Websockets are always-alive connections. A lot can go wrong here resulting in the connection with your LIMP app. To make sure you can always get reconnected recall SDK init method upon SDK becoming not inited:

    \n
    import { Component, OnInit } from '@angular/core';

    import { ApiService, Res } from 'ns-limp/api.service';

    @Component({
    \tselector: 'app-root',
    \ttemplateUrl: './app.component.html',
    \tstyleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

    \tconstructor(private api: ApiService) {
    \t\tthis.api.inited$.subscribe((init: boolean) => {
    \t\t\tif (init) {
    \t\t\t\t// SDK is inited and ready for your calls:
    \t\t\t\ttry {
    \t\t\t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
    \t\t\t\t\tthis.api.checkAuth();
    \t\t\t\t} catch { }
    \t\t\t} else {
    \t\t\t\t// SDK just got not inited, let's init SDK again:
    \t\t\t\tthis.init();
    \t\t\t}
    \t\t}, (err: Res<Doc>) => {
    \t\t\tconsole.log('    inited$.err', err);
    \t\t});
    \t}

    \tngOnInit() {
    \t\tthis.init();
    \t}

    \tinit(): void {
    \t\tthis.api.init({
    \t\t\tapi: '    ws://localhost:8081/ws',
    \t\t\tanonToken: '    __ANON',
    \t\t\tauthAttrs: ['    email']
    \t\t});
    \t}
    }
    \n

    API Reference

    \n

    debug

    \n

    A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.

    \n

    fileChunkSize

    \n

    A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to LIMP app. Default 512000.

    \n

    session

    \n

    A Doc object representing the current session. It has value only when the user is authenticated.

    \n

    authed

    \n

    A Boolean storing the current state of user authentication.

    \n

    authed$

    \n

    A Subject<Boolean | Doc> you can subscribe to handle changes to state of user authentication.

    \n

    init()

    \n

    The base method to initiate a connection with LIMP app. This method returns an Observable for chain subscription if for any reason you need to read every message being received from the API, however subscribing to it is not required. Method definition:

    \n
    init(api: String, anonToken: String): Observable<Res<Doc>> { /*...*/ }
    \n

    close()

    \n

    The method to close current connection with LIMP app. This method returns an Observable for chain subscription if for any reason you need to read the resposne of the close call, however subscribing to it is not required. Method definition:

    \n
    close(): Observable<Res<Doc>> { /*...*/ }
    \n

    auth()

    \n

    The method you can use to authenticate the user. This method returns an Observable for chain subscription if for any reason you need to read the response of the auth call, however subscribing to it is not required. Method definition:

    \n
    auth(authVar: string, authVal: string, password: string): Observable<Res<Doc>> { /*...*/ }
    \n

    reauth()

    \n

    The method you can use to reauthenticate the user. The method would fail if no sid and token attrs are cached from earlier successful authentication call. This method is not supposed to be called directly, rather use checkAuth(). This method returns an Observable for chain subscription if for any reason you need the response of the reauth call, however subscribing to it is not required. Method definition:

    \n
    reauth(sid: string = this.cache.get('sid'), token: string = this.cache.get('token')): Observable<Res<Doc>> { /*...*/ }
    \n

    signout()

    \n

    The method you can use to signout the current user. Upon success, this methods removes all the cached attrs of the session. This method returns an Observable for chain subscription if for any reason you need the response of the signout call, however subscribing to it is not required. Method definition:

    \n
    signout(): Observable<Res<Doc>> { /*...*/ }
    \n

    checkAuth()

    \n

    The method to check whether there is a cached session and attempt to reauthenticate the user. This method would throw an error if no credentials are cached, thus you need to always wrap it in try..catch. This method returns an Observable for chain subscription if for any reason you need the response of the checkAuth call, however subscribing to it is not required. Method definition:

    \n
    checkAuth(): Observable<Res<Doc>> { /*...*/ }
    \n

    generateAuthHash()

    \n

    The method to use to generate authentication hashes. This is used internally for the auth() call. However, you also need this to generate the values when creating a user. Method definition:

    \n
    generateAuthHash(authVar: string, authVal: string, password: string): string { /*...*/ }
    \n

    deleteWatch()

    \n

    The method to delete a watch in progress. You can pass the watch ID you want to delete or __all to delete all watches. This method returns an Observable for chain subscription if for any reason you need the response of the deleteWatch call, however subscribing to it is not required. Method definition:

    \n
    deleteWatch(watch: string | '__all'): Observable<Res<Doc>> { /*...*/ }
    \n

    call()

    \n

    The most important method in the SDK. This is the method you use to call different endpoints in your LIMP app. Although the callArgs object in the params is having full definition of all call attrs, you still usually only need to pass either query and/or doc in most of the cases. Third param awaitAuth specify wheter the call should be queued until session is authed. Method definition:

    \n
    call(endpoint: string, callArgs: callArgs, awaitAuth: boolean = false): Observable<Res<Doc>> { /*...*/ }
    \n

    Contribution Guidelines

    \n

    Thank you for your interest in ns-limp.

    \n

    Please refer to Contribution Guidelines for more details on contributing to this project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-doorbell.io":{"name":"nativescript-doorbell.io","version":"0.0.6","readme":"

    nativescript-doorbell.io

    \n

    Doorbell.io plugin for nativescript

    \n

    Installation

    \n

    tns plugin add nativescript-doorbell.io

    \n

    Usage

    \n
    import { showDoorbellFeedback } from 'nativescript-doorbell.io';
    import { isIOS } from 'tns-core-modules/platform';

    const viewController = isIOS ? this.feedbackContainer.nativeElement.ios.viewController : null;
    showDoorbellFeedback(appId, appKey, viewController);
    \n

    FeedbackContainer is a StackLayout in the html of the page where the function is called from. It does not need to have any particular alignment. It is only used by iOS.

    \n

    appId and appKey can be obtained from Doorbell.io

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appsee-ios":{"name":"nativescript-appsee-ios","version":"0.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-jade":{"name":"nativescript-dev-jade","version":"0.0.6","license":"Apache-2.0","readme":"

    Jade support for NativeScript projects.

    \n

    How to use

    \n
    $ tns install jade
    \n

    The above command installs this module and installs the necessary hooks. Jade processing of all .jade files inside app folder happens when the project is prepared for build.

    \n

    Example:

    \n
    Page(xmlns=\"http://schemas.nativescript.org/tns.xsd\")
      StackLayout
        Label(text=\"This is Label\")
        Button(text=\"This is Button\")
    \n

    Result:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\">
      <StackLayout>
        <Label text=\"This is Label\"></Label>
        <Button text=\"This is Button\"></Button>
      </StackLayout>
    </Page>
    \n

    More info at http://jade-lang.com/.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-hello-world-ts":{"name":"tns-template-hello-world-ts","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript TypeScript Template

    \n

    This template creates a NativeScript app with the NativeScript hello world example,\nhowever, in this template the example is built with TypeScript.

    \n

    You can create a new app that uses this template with either the --template option.

    \n
    tns create my-hello-world-ts --template tns-template-hello-world-ts
    \n

    Or the --tsc shorthand.

    \n
    tns create my-hello-world-ts --tsc
    \n
    \n

    Note: Both commands will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-hello-world-ts).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-hello-world-ts --template nativescript-app-templates/packages/template-hello-world-ts
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/ng2-balloon-msg-ns":{"name":"@synerty/ng2-balloon-msg-ns","version":"0.4.3","license":"MIT","readme":"

    Angular2 Balloon Message

    \n

    What it does : Shows a baloon on the top right corner\nof the screen to the user.

    \n

    It has 4 types of messages Success, Info, Warning and Error.

    \n

    The Error requires clicking on it before it will dismiss

    \n

    This balloon message NPM is written in TypeScript for Angular2 and uses bootstrap3 classes for style.

    \n

    Setup and example usgage usage :

    \n

    build file - angular-cli.json

    \n

    Add the bootstrap css file to your package builder file, in the case of angular-cli, add it to the apps.styles array

    \n
    {\n  ...\n  "apps": [\n    {\n      ...\n\n      "styles": [\n        ...\n        "../node_modules/bootstrap/dist/css/bootstrap.min.css"\n      ],\n
    \n

    app.component.html

    \n

    Add the following in your main component.html

    \n
    <ng2-balloon-msg></ng2-balloon-msg>\n
    \n

    app.module.ts

    \n

    Add the following lines to your apps main module imports (app.module.ts?)

    \n
    import { Ng2BalloonMsgModule, Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";\n
    \n

    Again, in the main module, Add Ng2BalloonMsgModule to the "imports" array.

    \n
    Ng2BalloonMsgModule\n
    \n

    And finally, Ng2BalloonMsgService to the "providers" array

    \n
    Ng2BalloonMsgService\n
    \n

    Example:

    \n
    @NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    Ng2BalloonMsgModule\n  ],\n  providers: [Ng2BalloonMsgService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n
    \n

    where-ever.component.ts

    \n

    To use the balloon service anywhere in your app :

    \n

    Import the service

    \n
    import {Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";\n
    \n

    Add it to your component constructor.

    \n
    constructor(private msgService: Ng2BalloonMsgService) {\n
    \n

    Now call the show functions

    \n
        this.msgService.showSuccess("This is a test SUCCESS");\n    this.msgService.showInfo("This is a test info");\n    this.msgService.showWarning("This is a test warning");\n    this.msgService.showError("This is a test error");\n
    \n

    You can also create modal dialogs

    \n
        let p = this.msgService.showMessage(\n        "This is a Error Confirm Cancel.",\n        UsrMsgLevel.Error,\n        UsrMsgType.ConfirmCancel, {\n            confirmText: "OK Confirm",      // Optional\n            cancelText: "Cancel xx",        // Optional\n            dialogTitle: "Awesome title"    // Optional\n    \n        }\n    );\n    \n    p.catch(err => {\n        console.log("Ignoring reject call from promise for this test.");\n    });\n
    \n

    Scaffold

    \n

    This project was generated with angular-cli version 1.0.0-beta.20-4.

    \n

    The default angular-cli test app was used as a test bed to show the messages.\nBelow are the standard instructions for the angular-cli usage.

    \n

    Development server

    \n

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    \n

    Code scaffolding

    \n

    Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

    \n

    Build

    \n

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

    \n

    Running unit tests

    \n

    Run ng test to execute the unit tests via Karma.

    \n

    Running end-to-end tests

    \n

    Run ng e2e to execute the end-to-end tests via Protractor.\nBefore running the tests make sure you are serving the app via ng serve.

    \n

    Deploying to Github Pages

    \n

    Run ng github-pages:deploy to deploy to Github Pages.

    \n

    Further help

    \n

    To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-coffeescript":{"name":"nativescript-dev-coffeescript","version":"0.0.6","license":"Apache-2.0","readme":"

    CoffeeScript support for NativeScript projects

    \n

    \"npm

    \n

    How to use

    \n
    $ tns install coffeescript
    \n

    The above command installs this module and installs the necessary hooks. CoffeeScript processing of all .coffee files inside app folder happens when the project is prepared for build.

    \n

    More info at http://coffeescript.org/.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsprogresshud":{"name":"nsprogresshud","version":"1.0.1","license":"Apache-2.0","readme":"

    NSProgressHud

    \n

    Installation

    \n
    tns plugin add NSProgressHud
    \n

    API

    \n
        import { NSProgressHud } from 'NSProgressHud';

    export class DemoComponent implements OnInit {
        private hud: NSProgressHud;
        constructor() {}

        ngOnInit() {
            this.hud = new NSProgressHud();
        }


        show(type: string) {
            if (type === 'indeterminate') {
            this.hud.showProgress(null, { progressType: 'indeterminate', size: {height: 150, width: 150}});

            setTimeout(() => {
                this.hud.dismiss();
            }, 2000);
            }

            if (type === 'determinate') {
            this.hud.showProgress(null, {hudColor: '#080452', progressType: 'determinate', size: {height: 150, width: 150}});
            }

            if (type === 'bar') {
            this.hud.showProgress(null, {hudColor: '#080452', progressType: 'bar', size: {height: 150, width: 150}});
            }

            if (type === 'annular') {
            this.hud.showProgress(null, {hudColor: '#080452', progressType: 'annular', size: {height: 150, width: 150}});
            }
        }

        showWithTimer() {
            let progress = 0;
            const taskWithTime = new BehaviorSubject({progress});
            this.hud.showProgress('Loading', {progressType: 'annular', size: {height: 150, width: 150}}. taskWithTime);
            setTimeout(() => {
                progress += 1;
                taskWithTime.next({progress})
            }, 1000)
        }
    }

            // Example Typing
        showProgress(message?: String, options?: ColorOption, progressStatus?: BehaviorSubject<{progress: number}>);

        export interface ColorOption {
            backgroundColor?: string;
            hudColor?: string;
            activityColor?: string;
            tintColor?: string;
            labelColor?: string;
            progressTick?: number;
            minShowTime?: number;
            tickInterval?: number;
            backgroundOpacity?: number;
            size?: {width: number, height: number};
            progressType: 'annular' | 'determinate' | 'bar' | 'indeterminate';
        }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finalsite/rich-text-editor":{"name":"@finalsite/rich-text-editor","version":"0.1.1","license":"Apache-2.0","readme":"

    @finalsite/rich-text-editor

    \n
    ns plugin add @finalsite/rich-text-editor
    \n

    Installation

    \n

    Copy the assets folder to your project. You can choose to only copy the contenteditable or ckeditor4 files if your only going to use one or the other. Avoid updating these files in case of future updates. (The js file is the code that bridges the button commands to the chosen editor and the html file sets up the editor in the webview.)

    \n

    For NS8

    \n

    Add the following to your webpack.config.js

    \n
      webpack.Utils.addCopyRule({
        from: '@finalsite/rich-text-editor/assets/html/default.html',
        to: 'assets/html',
        context: webpack.Utils.project.getProjectFilePath('node_modules'),
      });

      webpack.Utils.addCopyRule({
        from: '@finalsite/rich-text-editor/assets/js/contenteditable.js',
        to: 'assets/js',
        context: webpack.Utils.project.getProjectFilePath('node_modules'),
      });
    \n

    For NS7

    \n

    e.g

    \n
    cp node_modules/@finalsite/rich-text-editor/assets/html/contenteditable.html app/assets/html/
    cp node_modules/@finalsite/rich-text-editor/assets/js/contenteditable.js app/assets/js/
    \n

    Using the default icon set

    \n
    cp node_modules/@finalsite/rich-text-editor/fonts/MaterialIcons-Regular.ttf app/fonts/
    \n

    And include the css file

    \n
    @import '~@finalsite/rich-text-editor/css/default.css';
    \n

    Goals

    \n\n

    Usage (Core)

    \n

    Important In order for the toolbar to display correctly you must use a GridLayout or RootLayout as your root layout

    \n

    See demo for usage

    \n

    Usage (Angular)

    \n

    // TODO

    \n

    Dependencies/Credit

    \n

    Depends on https://github.com/Notalib/nativescript-webview-ext for communicating with the web view

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-regions":{"name":"nativescript-plugin-regions","version":"1.0.2","license":"MIT","readme":"

    nativescript-plugin-regions

    \n

    This module installs a NativeScript after prepare hook that gives you full control about the development region and\nknown regions which are set in the auto generated platforms/ios/app-name.xcodeproj/project.pbxproj file.

    \n

    How to use

    \n

    Install

    \n
    tns plugin install nativescript-plugin-regions
    \n

    Configuration

    \n

    Create a file called region.nativescript.json in your project directory:

    \n
    {
      \"developmentRegion\": \"de\",
      \"knownRegions\": [
        \"de\"
      ]
    }
    \n

    Apply your configuration. Multiple known regions are supported.

    \n

    Please also make sure that you apply correct config inside your app/App_Resources/iOS/Info.plist file.\nAn example for the above region config would be:

    \n
    <key>CFBundleDevelopmentRegion</key>
    <string>de</string>
    <key>CFBundleLocalizations</key>
    <array>
      <string>de</string>
    </array>
    \n

    Usage

    \n

    You will need to execute tns platform clean ios in the CLI and tns prepare ios for the changes to take effect.

    \n

    Example workflow for a release build

    \n
    tns platform clean ios
    tns prepare ios --release
    tns build ios --bundle --env.uglify --env.aot  --release --forDevice
    \n

    Manual steps after project has been built

    \n

    This step is only required if you target a single language.

    \n

    In order to make iTunes Connect recognize a single language only you will need to open up your\nplatforms/ios/app-name.xcodeproj file, or platforms/ios/app-name.xcworkspace if available, with Xcode.

    \n

    Within Xcode apply the changes described in the following graphic.

    \n

    \"Manual

    \n

    You will only have to make these manual changes when you are creating an archive for iTunes Connect.\nIt doesn't really matter during development.

    \n

    License

    \n

    The NativeScript plugin nativescript-plugin-regions is open-sourced software licensed under the MIT license.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-jade-html":{"name":"nativescript-dev-jade-html","version":"0.0.7","license":"Apache-2.0","readme":"

    Jade support for NativeScript projects.

    \n

    How to use

    \n
    $ tns install jade
    \n

    The above command installs this module and installs the necessary hooks. Jade processing of all .jade files inside app folder happens when the project is prepared for build.

    \n

    Example:

    \n
    StackLayout
      Label(text=\"This is Label\")
      Button(text=\"This is Button\")
    \n

    Result:

    \n
    <StackLayout>
      <Label text=\"This is Label\"></Label>
      <Button text=\"This is Button\"></Button>
    </StackLayout>
    \n

    More info at http://jade-lang.com/.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-notification":{"name":"nativescript-notification","version":"0.0.1","license":"MIT","readme":"

    nativescript-notification

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-cucumber":{"name":"nativescript-dev-cucumber","version":"0.1.4","license":"MIT","readme":"

    nativescript-dev-cucumber

    \n

    A helper package to make running E2E Appium tests in NativeScript apps easier.

    \n

    Usage

    \n

    Install it with:

    \n

    $ tns install cumcumber

    \n

    It will produce a sample test below the features dir. Now, run it with:

    \n
    $ npm run cucumber-android
    \n

    or

    \n
    $ npm run cucumber-ios-simulator
    \n

    The tests are standard Cumcumber.js tests.

    \n

    Getting started

    \n

    Create a new NativeScript Application (if necessary):

    \n

    $ tns create cucumberSample --ng

    \n

    Update the template to add "automationText" attributes (for Angular2 NS applications).

    \n

    app.component.html:

    \n
    <StackLayout>
        <Label text=\"Tap the button\" class=\"title\"></Label>
        
        <Button text=\"TAP\" (tap)=\"onTap()\" automationText=\"tapButton\"></Button>

        <Label [text]=\"message\" class=\"message\" textWrap=\"true\" automationText=\"messageLabel\"></Label>
    </StackLayout>
    \n

    Install cucumber:

    \n

    $ tns install cucumber

    \n

    Execute tests:

    \n
    $ npm run cucumber-android
    \n

    or

    \n
    $ npm run cucumber-ios-simulator
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-preview":{"name":"nativescript-image-preview","version":"0.1.0","readme":"

    NativeScript Image Preview

    \n

    A lightweight NativeScript plugin that wraps the JTSImageViewController CocoaPod.

    \n

    Installation

    \n
    tns install nativescript-image-preview
    \n

    Usage

    \n
    var imagePreview = require(\"nativescript-image-preview\");
    imagePreview.showImage(\"https://i.imgur.com/sKh7Z6R.png\");
    \n

    You can alternatively just use JTSImageViewController APIs documented on http://cocoadocs.org/docsets/JTSImageViewController/. This plugin makes them all available.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-filter-modules":{"name":"nativescript-hook-filter-modules","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-hook-filter-modules/blob/master/LICENSE"},"readme":"

    NativeScript-hook-filter-modules

    \n

    Shrinking size of built application by deleting defined set of node_modules inside tns_modules

    \n

    License

    \n

    This plugin is licensed under the MIT license by Marek Maszay

    \n

    Installation

    \n
    tns plugin add nativescript-hook-filter-modules
    \n

    Usages

    \n

    You don't use all the modules exposed by NativeScript in the core-modules. By default they're bundled with your application during a build.\nThis leads to a larger file size in the end. This hook will remove those modules during the build phase to reduce the overall application size.\nThis isn't as sophisticated as webpack but it works and is pretty simple to setup and use to reduce your app size on the device.

    \n

    The more you remove the smaller the final build will be of course. Remove only what you don't need or the app will crash if it tries to require a module.\nThis is easily fixed by updating the filter-modules.json and rebuilding your application.

    \n

    Example

    \n
    filter-modules.json
    \n

    In this example the hook will remove the connectivity module from your built application.

    \n
    {
        \"to_be_deleted\": [
            \"connectivity\"
        ],
        \"to_be_kept\": [

        ]
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tests-hook":{"name":"nativescript-tests-hook","version":"0.0.1","license":"MIT","readme":"

    Nativescript tests hook

    \n

    Nativescript plugin that lets you handling your Nativescript tests like the angular style guide

    \n

    Nativescript is configured by default to let you put all your tests into tests folder but sometimes it can be a little annoying, as apps grow in size and components, having unit-tests next to implementations makes easier maintaining these tests, when we do development for web version of angular application, we put the test files in respective feature folders with .spec.ts or .spec.js suffix as per the angular style guide.

    \n

    Example

    \n
    app
    |-- myFeature
         |- myFeature.component.html
         |- myFeature.component.ts
         |- myFeature.component.spec.ts
    \n

    Just keep your .spec.ts or .spec.js files next to implementations and that's it. It moves all your tests from wherever they are into app to tests folder at tns' before-prepare hook time.

    \n

    Installation

    \n

    Npm

    \n
    npm install nativescript-tests-hook --save-dev
    \n

    Configuration

    \n

    The only thing you need to be aware of is when importing file dependencies in your tests you have to reference them as loading files from the app bundle according to Nativescript's Location Rules Docs to keep their references when they will move.

    \n

    Example

    \n
    import { MyFeatureComponent } from '~/myFeature/myFeature.component';
    import { AppComponent } from '~/app.component';

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-universal-links":{"name":"nativescript-plugin-universal-links","version":"2.0.0","license":"MIT","readme":"

    Nativescript plugin Universal Links

    \n

    Universal links (IOS) and App Links (Android) support for NativeScript apps.

    \n

    When a user clicks a link to a website, it opens in the default web browser (Safari/Chrome). Universal linking allows your app to open instead of the web browser.

    \n

    Apple calls this Universal Links and Google calls it App Links, but they mean the same thing.

    \n

    Install this plugin using:\nnpm install nativescript-plugin-universal-links

    \n

    Implementing Universal Links

    \n

    Both iOS (9.0 and newer) and Android (all versions) provide good APIs for universal linking.

    \n

    IOS

    \n

    Apple introduced a new deep linking API in iOS 9.0 called “Universal Links”. It provides a better user experience than the hacky deep linking options that existed in iOS 8.0 and below.

    \n

    First step is to add a file to the root of your website called apple-app-site-association. This is a JSON file and it looks like this:

    \n
    {
        \"applinks\": {
            \"apps\": [],
            \"details\": [
                {
                    \"appID\": \"your-team-id.com.example\",
                    \"paths\": [ \"/blog/*\"]
                }
            ]
        }
    }
    \n\n

    Check out Apples' docs for more info.

    \n

    Next, you need to add the Associated Domains to your IOS project, either using XCode or manually adding the following code to your App_Resources/IOS/app.entitlements file. Please note the applinks: prefix, it won't work without it.

    \n
    <key>com.apple.developer.associated-domains</key>
    <array>
      <string>applinks:www.example.com</string>
    </array>
    \n

    Android

    \n

    In Android, universal linking is implemented using Intent Filters. By adding a BROWSABLE intent filter, you are saying that your app can be started by a user clicking on a website url.

    \n

    You don't need any server side changes for Android, only modify your app to add the Intent Filter.\nAdd this code to your App_Resources/Android/src/main/AndroidManifest.xml file:

    \n
    <activity
        android:name=\"com.tns.NativeScriptActivity\"
        android:label=\"@string/title_activity_kimera\" >

        <!-- Add this new section to your Activity -->
        <intent-filter>
            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\" />
            <category android:name=\"android.intent.category.BROWSABLE\" />

            <!-- Handle urls starting with \"https://www.example.com/blog\" -->
            <data android:scheme=\"https\"
                  android:host=\"www.example.com\"
                  android:pathPrefix=\"/blog\" />
        </intent-filter>
    </activity>
    \n

    Using the plugin

    \n

    Call the registerUniversalLinkCallback in your AppComponent's ngOnInit method to provide a callback method which will receive an Universal Link object every time your app is opened by a website link:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { registerUniversalLinkCallback } from \"nativescript-plugin-universal-links\";

    @Component({
      selector: \"my-app\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
      constructor() {}

      ngOnInit() {
        registerUniversalLinkCallback(ul => {
          // use the router to navigate to the screen
        });
      }
    }
    \n

    The universal link object has the following structure:

    \n
    {
      \"href\": \"https://www.example.com/blog?title=welcome\",
      \"origin\": \"https://www.example.com\",
      \"pathname\": \"/blog\",
      \"query\": \"?title=welcome\"
    }
    \n

    There is also a getUniversalLink() method that will return the last universal link which opened the app. This is useful in scenarios where your app is protected by a login screen. Check if the user is authenticated and then navigate to the desired path.

    \n
    import { getUniversalLink } from \"nativescript-plugin-universal-links\";

    const ul = getUniversalLink();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"4dev-nativescript-admob":{"name":"4dev-nativescript-admob","version":"0.0.5","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alexkunin/loopback-sdk-builder":{"name":"@alexkunin/loopback-sdk-builder","version":"2.3.2","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-carousel":{"name":"nativescript-ng2-carousel","version":"0.1.0","license":"MIT","readme":"

    {N} + Angular Carousel Slider

    \n

    A simple NativeScript + Angular images carousel for iOS and Android.

    \n

    Tested on:

    \n\n

    You can download older versions here for previous versions of Angular and Nativescript.

    \n

    I would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue.

    \n

    Demo

    \n

    You can check a reference application here created to show how to integrate the "{N} + Angular Carousel Slider".

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOsAndroid
    \"\"\"\"
    \n

    Getting started

    \n

    See demo for further details.

    \n
      \n
    1. Download and install the module via npm to your Nativescript project:
      2. \n
    \n
    \ncd your_tns_project_path/\nnpm install nativescript-ng2-carousel --save\n
    \n
      \n
    1. Add the CarouselDirective class to the declarations NgMoudle metadata:
      2. \n
    \n
    \n@NgModule({\n    declarations: [AppComponent, CarouselDirective],\n    bootstrap: [AppComponent],\n    imports: [NativeScriptModule],\n    schemas: [NO_ERRORS_SCHEMA]\n})\n
    \n
      \n
    1. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
      2. \n
    \n
    \n<GridLayout [carousel]=\"images\" carouselLabelOverlay=\"true\" carouselSpeed=\"2000\">\n    \n</GridLayout>\n
    \n

    Add images from URL to your component:

    \n
    \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
    \n

    You can also add images from your assets folder or resources folder using file attribute instead of url attribute:

    \n
    \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },\n            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
    \n
      \n
    1. CSS styling:
      2. \n
    \n
    \n/** Slider image */\n.slider-image {\n\n}\n\n/** Slider title format */\n.slider-title {\n    color: #fff;\n    font-weight: bold;\n    background-color: rgba(125, 125, 125);\n    padding: 8;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n/** Arrows */\n.arrow {\n    color: #ffffff;\n    font-size: 32;\n    vertical-align: middle;\n    padding: 10;\n}\n\n/** Arrow left wrapper */\n.arrow.arrow-left {\n\n}\n\n/** Arrow right */\n.arrow.arrow-right {\n\n}\n
    \n

    Supported attributes

    \n

    Currently directive supported attributes:

    \n\n

    Changelog

    \n

    Version 0.1.0

    \n\n

    Version 0.0.5

    \n\n

    Version 0.0.4

    \n\n

    Version 0.0.3

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swift-3.0":{"name":"nativescript-swift-3.0","version":"1.0.0","readme":"

    NativeScript Swift 3.0

    \n

    A NativeScript plugin that sets Swift version to 3.0

    \n
    npm install --save nativescript-swift-3.0
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-env-files":{"name":"nativescript-hook-env-files","version":"0.1.1","readme":"

    nativescript-hook-env-files

    \n

    A nativescript hook to replace file according to NODE_ENV value.\nInspired by nativescript-hook-debug-production

    \n

    Example

    \n

    Project directory structure

    \n
    app
    ├ env.development.json # {\"production\": false}
    ├ env.production.json  # {\"production\": true}
    ├ main.ts
    ├ ...
    \n

    In your app code

    \n
    const env = require('./env.json');

    console.log(env.production); // 'true' if tns build or run with NODE_ENV=production, otherwise 'false'.
    \n

    Webpack+Angular support

    \n

    Add hostReplacementPaths option to NativescriptAngularCompilerPlugin in your webpack.config.js.

    \n
    // utility method for getting replacement targets.
    const { getReplacementPaths } = require('nativescript-hook-env-files/webpack');
    \n
    new nsWebpack.NativeScriptAngularCompilerPlugin({
        entryModule: resolve(appPath, \"app.module#AppModule\"),
        tsConfigPath: join(__dirname, \"tsconfig.esm.json\"),
        skipCodeGeneration: !aot,
        platformOptions: {
            platform,
            platforms,
        },
        hostReplacementPaths: getReplacementPaths(appFullPath, process.env.NODE_ENV || 'development'), // add this line
    }),
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-vue":{"name":"tns-template-blank-vue","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Vue Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-blank-vue --template tns-template-blank-vue
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-blank-vue --template nativescript-app-templates/packages/template-blank-vue
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a single blank component located in:

    \n\n

    Home page has the following components:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places":{"name":"nativescript-google-places","version":"0.0.3","readme":"

    nativescript-gplaces

    \n

    Read Google Places API Documentation at https://developers.google.com/places/android-api/?hl=pt-br

    \n

    All Credits for https://github.com/mobilemindtec/nativescript-google-places

    \n

    Api Configuration

    \n

    Create a new key to Google Places Api Web Service

    \n

    Use in app

    \n
      var GPlaces = require(\"nativescript-gplaces\");
      GPlaces.init({
                    googleServerApiKey: 'your_api_Key',
                    language: 'es',
                    radius: '100000',
                    location: '20.651130,-103.426464',
                    errorCallback: function(text){console.log(text)}
                   );
    \n

    Place autocomplete

    \n
      // run autocomplete
      GPlaces.queryAutoComplete(textSearch.text, types).then(function(result){
          // predictions list
      })
    \n

    Place search

    \n
      // run search
      GPlaces.search(textSearch.text, types).then(function(result){
          // search list
      })
    \n

    Get place details

    \n
     // get place details
      GPlaces.details(placeId).then(function(place){
          // place result
      })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"herbecon-loopback-sdk-builder":{"name":"herbecon-loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-oidc-client":{"name":"angular-oidc-client","version":"1.0.9","license":"Apache-2.0","readme":"

    # Angular OIDC Client

    \n

    Universal OpenID Connect Client library for Angular

    \n

    Installation:

    \n

    npm install angular-oidc-client --save

    \n

    Usage

    \n

    auth.ts (NativeScript)

    \n
    import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        text=""\n        textWrap="true"\n        class="icon-moon rotating"\n        verticalAlignment="middle"\n        style="font-size: 30; display: inline-block;"\n        horizontalAlignment="center">\n    </Label>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    auth.ts (Web)

    \n
    declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router, ActivatedRoute } from "@angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""]);\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"]);\n                },\n                clientId: "...",\n                clientSecret: "...",\n                REDIRECT: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.queryParams\n        .subscribe((params) => {\n        let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n        });\n        this.loadStarted({url: window.location.href });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    app.module.ts

    \n
    ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService, AuthInterceptor } from "angular-oidc-client";\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
    \n

    Notes:

    \n

    Please setup the Redirect Condition OpenID setting to equal "*" (Any)

    \n

    Copyright (C)2018 @medozs Apache-2.0 License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"chimp-bits-teco-nativescript":{"name":"chimp-bits-teco-nativescript","version":"0.1.2","license":"MIT","readme":"

    Chimp Bits Template Compiler - Nativescript

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swift-2.3":{"name":"nativescript-swift-2.3","version":"1.0.0","readme":"

    NativeScript Swift 2.3

    \n

    A NativeScript plugin that sets Swift version to 2.3

    \n
    npm install --save nativescript-swift-2.3
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-crank":{"name":"tns-template-blank-crank","version":"6.5.3","license":"Apache-2.0","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vishnuchd/nativescript-woocommerce-api":{"name":"@vishnuchd/nativescript-woocommerce-api","version":"1.0.2","license":"Apache-2.0","readme":"

    @vishnuchd/nativescript-woocommerce-api

    \n

    A wrapper that connects Nativescript to the WooCommerce API

    \n

    Installation

    \n
    ns plugin add @vishnuchd/nativescript-woocommerce-api
    \n

    License

    \n

    Apache License Version 2.0

    \n

    Setup

    \n

    You will need a consumer key and consumer secret to call your store's WooCommerce API. You can find instructions here

    \n

    Include the 'NativescriptWoocommerceApi' module within your script and instantiate it with a config:

    \n
    import { NativescriptWoocommerceApi} from '@vishnuchd/nativescript-woocommerce-api';

    const WooCommerceAPI = {
      url: 'https://yourstore.com', // Your store URL
      ssl: true,
      consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
      consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
      wpAPI: true, // Enable the WP REST API integration
      version: 'wc/v3', // WooCommerce WP REST API version
      queryStringAuth: true
    };
    \n

    Instantiating a WooCommerceAPI instance without a url, consumerKey or secret will result in an error being thrown

    \n

    Calling the API

    \n

    Your WooCommerce API can be called once the WooCommerceAPI object has been instantiated (see above).

    \n

    GET

    \n
    let WooCommerceAPI = new NativescriptWoocommerceApi(options)
    WooCommerceAPI.invokeGet('products')
              .then(data => {
              \tconsole.log(data);
              })
              .catch(error => {
              \tconsole.log(error);
              });
    \n

    GET WITH PARAMETER

    \n
    WooCommerceAPI.invokeGet('orders', { customer: userID, per_page: 100 })
              .then(data => {
              \tconsole.log(data);
              })
              .catch(error => {
              \tconsole.log(error);
              });
    \n

    POST

    \n

    For this example you have a Order object.

    \n
    WooCommerceAPI.invokePost('products', {
      product: {
        title: 'Premium Quality',
        type: 'simple',
        regular_price: '21.99'
        }
      })
      .then(data => {
              \tconsole.log(data);
              })
      .catch(error => {
              \tconsole.log(error);
              });
    \n

    PUT

    \n
    WooCommerceAPI.invokePut('orders/123', {
      order: {
        status: 'completed'
      }
      })
      .then(data => {
              \tconsole.log(data);
              })
      .catch(error => {
              \tconsole.log(error);
              });
    \n

    DELETE

    \n
    WooCommerceAPI.invokeDelete('coupons/123')
    .then(data => {
              \tconsole.log(data);
              })
      .catch(error => {
              \tconsole.log(error);
              });
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mobile-nativescript":{"name":"mobile-nativescript","version":"0.0.1","license":"ISC","readme":"

    \"Build

    \n

    generate npm package

    \n

    This is cli to create boiler plate for npm package project.

    \n

    Getting Started

    \n

    Installation

    \n

    npm install -g mobile-nativescript

    \n

    Usage

    \n

    $ mobile-nativescript

    \n

    \"create\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionsDefaultDescription
    project namecreate-npm-packagenpm package name or project name
    semacntic releeasefalse or Noadd semantic denpendencies
    travis setupfalse or Noconfig travis setup .travis.yml
    install dependenciesfalse or Noinstall project dependencies after creating project
    \n

    Semantic Release

    \n
    npm install -g semantic-release-cli
    cd your-module
    semantic-release-cli setup
    \n\"semantic\"\n

    Travis CI Setup

    \n

    Project Structure

    \n

    \"project\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    File/FolderDescriptions
    project/index.jsentry file while creating npm module.
    src/lib/index.jsmain file that you want to publish in npm.
    src/lib/index.spec.jstest file for above file.
    styles/folder for styles if you are creating UI npm module.
    test/index.jsfor testing build files after build.
    .travis.ymlfor Travis CI
    \n

    Commands

    \n\n

    Create Simple NPM package

    \n

    cd your-module

    \n

    Install Dependencies

    \n

    npm installl

    \n

    Add Git Link

    \n

    package.json

    \n
    \"repository\": {
        \"type\": \"git\",
        \"url\": \"git_repository_link\"
    }
    \n

    npm publish - Using Semanctic Release

    \n
    npm install -g commitizen
    npm run commit
    git push
    \n

    npm publish - without Semantic Release LInk

    \n
    npm build
    npm login
    npm publish
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-template-js":{"name":"ns-template-js","version":"6.0.0","license":"Apache-2.0","readme":"

    NativeScript Core Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-blank-js --template ns-template-js
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/ns-template-js).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone repo locally
    git clone git@github.com:shiv19/ns-js-template.git

    # create app template from local source
    tns create my-blank-js --template ns-template-js
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root component is located at:

    \n\n

    There is a single blank component located in:

    \n\n

    Home page has the following components:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loopback-sdk-builder-ny":{"name":"loopback-sdk-builder-ny","version":"2.3.1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-flex-nativescript":{"name":"ns-flex-nativescript","version":"0.0.4","license":"ISC","readme":"

    \"Build

    \n

    generate npm package

    \n

    This is cli to create boiler plate for npm package project.

    \n

    Getting Started

    \n

    Installation

    \n

    npm install -g ns-flex-nativescript

    \n

    Usage

    \n

    $ ns-flex-nativescript

    \n

    \"create\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionsDefaultDescription
    project namecreate-npm-packagenpm package name or project name
    semacntic releeasefalse or Noadd semantic denpendencies
    travis setupfalse or Noconfig travis setup .travis.yml
    install dependenciesfalse or Noinstall project dependencies after creating project
    \n

    Semantic Release

    \n
    npm install -g semantic-release-cli
    cd your-module
    semantic-release-cli setup
    \n\"semantic\"\n

    Travis CI Setup

    \n

    Project Structure

    \n

    \"project\"

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    File/FolderDescriptions
    project/index.jsentry file while creating npm module.
    src/lib/index.jsmain file that you want to publish in npm.
    src/lib/index.spec.jstest file for above file.
    styles/folder for styles if you are creating UI npm module.
    test/index.jsfor testing build files after build.
    .travis.ymlfor Travis CI
    \n

    Commands

    \n\n

    Create Simple NPM package

    \n

    cd your-module

    \n

    Install Dependencies

    \n

    npm installl

    \n

    Add Git Link

    \n

    package.json

    \n
    \"repository\": {
        \"type\": \"git\",
        \"url\": \"git_repository_link\"
    }
    \n

    npm publish - Using Semanctic Release

    \n
    npm install -g commitizen
    npm run commit
    git push
    \n

    npm publish - without Semantic Release LInk

    \n
    npm build
    npm login
    npm publish
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-navigation-tabbar":{"name":"ns-navigation-tabbar","version":"0.1.2","license":"ISC","readme":"

    NavigationTabBar

    \n

    This is a nativescript port of Devlight's Android TabBar Implementation

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-stylus":{"name":"nativescript-dev-stylus","version":"0.0.3","license":"Apache-2.0","readme":"

    Stylus for NativeScript

    \n

    How to use

    \n
    $ tns install stylus
    \n

    The above command installs this module and installs the necessary hooks. Stylus CSS pre-processing of all .styl files inside app folder happens when the project is prepared for build.\nThis is based off the less plugin.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ajax":{"name":"tns-ajax","version":"0.0.5","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubesdk":{"name":"nativescript-youtubesdk","version":"0.0.2","license":{"type":"MIT"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"surplus-nativescript":{"name":"surplus-nativescript","version":"1.0.1","license":"ISC","readme":"

    surplus-nativescript

    \n

    Nativescript and s.js entegration. An example project is here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-nativescript-date-picker":{"name":"react-nativescript-date-picker","version":"1.0.2","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation-ng":{"name":"tns-template-drawer-navigation-ng","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript with Angular Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-drawer-ng --template tns-template-drawer-navigation-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-drawer-ng --template nativescript-app-templates/packages/template-drawer-navigation-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The RadSideDrawer component is set up as an application root view in:

    \n\n

    RadSideDrawer has the following component structure:

    \n\n

    There are five blank components located in these folders:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@lupascudan/loopback-sdk-builder":{"name":"@lupascudan/loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jadoux/loopback-sdk-builder":{"name":"@jadoux/loopback-sdk-builder","version":"2.3.3","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n\n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n\n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"oauth2-oidc-client":{"name":"oauth2-oidc-client","version":"1.2.3","license":"Apache-2.0","readme":"

    # OAUTH2/OIDC Client

    \n

    Universal OAUTH2/OpenID Connect Client library

    \n

    Installation:

    \n

    npm install oauth2-oidc-client --save

    \n

    Usage

    \n

    auth.ts (Angular NativeScript)

    \n
    import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "oauth2-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport { map, filter, switchMap, timeout } from "rxjs/operators";\nimport "rxjs/add/operator/switchMap";\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <ActivityIndicator row="1" #activityIndicator [busy]="loading" width="100" height="100" class="activity-indicator"></ActivityIndicator>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                // username: "?...",\n                // password: "?...",\n                // REDIRECT: "?...",\n                // SCOPE: "openid+email+profile", // default\n                // state: Math.random().toString(36).substring(7),\n                // nonce: "?...",\n                oauth2Config: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    // authorization_code login authentication\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLData(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let state = parsedURL.query ? parsedURL.query.params["state"] : null;\n        let nonce = parsedURL.query ? parsedURL.query.params["nonce"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return {code, state, nonce};\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authData = this.parseURLData(e.url);\n        if (authData && authData.state === this.authService.config.state) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authData.code); //  null for password grant\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    auth.ts (Angular Web)

    \n
    declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router } from "@angular/router";\nimport * as url from "urlparser";\nimport { AuthService } from "oauth2-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                // username: "?...",\n                // password: "?...",\n                REDIRECT: window.location.href,\n                // SCOPE: "openid+email+profile", // default\n                // state: Math.random().toString(36).substring(7),\n                // nonce: "?...",\n                oauth2Config: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    // authorization_code login authentication\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                let authData = this.parseURLData(window.location.href);\n                if (authData && authData.state === this.authService.config.state) {\n                    this.loading = true;\n                    this.authURL = "";\n                    this.authService.init(authData.code); //  null for password grant\n                } else { \n                    this.login();\n                }\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLData(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let state = parsedURL.query ? parsedURL.query.params["state"] : null;\n        let nonce = parsedURL.query ? parsedURL.query.params["nonce"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return {code, state, nonce};\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }        \n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    app.module.ts (Angular)

    \n
    ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService } from "oauth2-oidc-client";\n\nimport {\n    HttpRequest,\n    HttpHandler,\n    HttpEvent,\n    HttpInterceptor,\n    HttpHeaders\n} from "@angular/common/http;\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n    constructor(private authService: AuthService) {}\n    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n\n        const token = `Bearer ${this.authService.getToken()}`;\n        req = req.clone({\n        setHeaders: {\n            Authorization: token\n        }\n        });\n        return next.handle(req);\n    }\n}\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
    \n

    Auth.js (Web)

    \n
    const authService = new (require("oauth2-oidc-client").AuthService)();\nauthService.config = {...}\nauthService.init(/*code*/);\nvar token = authService.getToken();\n...........\n
    \n

    Notes:

    \n
    Please setup the Redirect Condition OAuth2/OpenID setting to equal "*" (Any)  \n
    \n

    Copyright (C)2018 @medozs Apache-2.0 License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-breeze":{"name":"nativescript-breeze","version":"0.0.4","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-ns-update":{"name":"@synerty/peek-ns-update","version":"0.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-react":{"name":"nativescript-react","version":"0.0.2","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"install-nativescript":{"name":"install-nativescript","version":"0.3.3","license":"Apache 2.0","readme":"

    install-nativescript

    \n

    Package that helps you install Node.js, npm and nativescript-cli from within an Electron app. Works only on Windows and Mac.

    \n

    Usage

    \n
      \n
    1. First install the package:
      2. \n
    \n
    npm install --save install-nativescript
    \n
      \n
    1. Now use it in your code:
      2. \n
    \n
    const installNativeScript = require(\"install-nativescript\");

    installNativeScript.ensureNode()
        .then(() => {
            return installNativeScript.ensureCLI();
        })
    \n

    Public API

    \n\n

    ensureNode

    \n

    The ensureNode method checks if node is installed on the machine. In case it cannot detect it, the method downloads a node installer and runs it. You can pass a specific node version to install. In case it is not provided, the method installs version 10.15.3.

    \n

    Note: This method changes process.env so that after it succeeds, you can install and detect globally installed npm modules.

    \n

    Usage:

    \n
    const installNativeScript = require(\"install-nativescript\");

    installNativeScript.ensureNode();
    \n

    ensureCLI

    \n

    The ensureCLI method checks if you have NativeScript CLI installed globally on your machine.

    \n\n

    Usage:

    \n
    const installNativeScript = require(\"install-nativescript\");

    installNativeScript.ensureCLI();
    \n

    getNPMFoldersWithMissingPermissions

    \n

    One of the reasons why ensureCLI method may fail on Mac machines, is in case some npm folders require root access. This method can help you detect this case. Just pass the error from ensureCLI and it will return an array of folders that might require root access. In case the array is empty, the error is not related to missing permissions.

    \n

    Usage:

    \n
    const installNativeScript = require(\"install-nativescript\");

    installNativeScript.ensureCLI()
        .catch((error) => {
            const permissionsFolders = installNativeScript.getNPMFoldersWithMissingPermissions(error);
        });
    \n

    fixMissingNPMPermissions

    \n

    The fixMissingNPMPermissions method accepts an array of folders and tries to change their permissions.

    \n

    Usage:

    \n
    const installNativeScript = require(\"install-nativescript\");

    installNativeScript.ensureCLI()
        .catch((error) => {
            const permissionsFolders = installNativeScript.getNPMFoldersWithMissingPermissions(error);

            if (permissionsFolders.length === 0) {
                return Promise.reject(error);
            }

            // It is a good idea to ask the user at this point if they approve the change and then change the permissions.

            return installNativeScript.fixMissingNPMPermissions(permissionsFolders)
                .then(() => {
                    return installNativeScript.ensureCLI();
                });
        });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rfid":{"name":"nativescript-rfid","version":"0.3.6","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ios-um":{"name":"ios-um","version":"0.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-device-contacts":{"name":"nativescript-device-contacts","version":"1.0.0-alpha.2.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-vivmer-ng":{"name":"tns-template-vivmer-ng","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript Angular Template - VIVMER Architecture

    \n

    This template creates a "Hello, world" NativeScript app using Angular following the VIVMER architecture.

    \n

    You can create a new app that uses this template with either the --template option.

    \n
    tns create my-app --template tns-template-vivmer-ng
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview":{"name":"nativescript-webview","version":"0.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-livesync":{"name":"nativescript-plugin-livesync","version":"0.17.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-xss2":{"name":"nativescript-test-xss2","version":"0.0.5","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-meteor":{"name":"nativescript-ng2-meteor","version":"1.0.3","license":"MIT","readme":"

    NativeScript ng2 Meteor

    \n

    Deprecated, use nativescript-meteor-client

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altech/keepup-interfaces-tns":{"name":"@altech/keepup-interfaces-tns","version":"4.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey-ts":{"name":"tns-template-master-detail-kinvey-ts","version":"6.5.0","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Master Detail Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-master-detail-kinvey-ts --template tns-template-master-detail-kinvey-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey-ts).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-master-detail-kinvey-ts --template nativescript-app-templates/packages/template-master-detail-kinvey-ts
    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n\n

    The template has the following page modules:

    \n\n

    There is one model to represent the data items:

    \n\n

    The template also provides a data service:

    \n\n

    Kinvey integration

    \n

    The templates uses the {N} Kinvey plugin. The initialization is done before the app starts in the /app/app.ts file. The initialization script is located at /app/shared/kinvey.common.ts.

    \n

    [Optional] Kinvey database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Each component has 3 style files located in its folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pf_nsa_styleguide":{"name":"pf_nsa_styleguide","version":"0.0.0-alpha.2","license":"SEE LICENSE IN ","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation-ng":{"name":"tns-template-tab-navigation-ng","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript with Angular Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-tab-ng --template tns-template-tab-navigation-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-tab-navigation-ng).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-tab-ng --template nativescript-app-templates/packages/template-tab-navigation-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The tab navigation is set up in the application component:

    \n\n

    There are four components used for the tab content items located in these folders:

    \n\n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triarensplugins/drplugin":{"name":"@triarensplugins/drplugin","version":"0.0.1","license":"Apache-2.0","readme":"

    @triarensplugins/drplugin

    \n
    npm install @triarensplugins/drplugin
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync-sdk":{"name":"nativescript-app-sync-sdk","version":"1.0.1","license":"MIT","readme":"

    NativeScript AppSync Management SDK

    \n

    Please refer to the NativeScript plugin docs.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-livepatch":{"name":"nativescript-plugin-livepatch","version":"1.0.2","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey":{"name":"tns-template-master-detail-kinvey","version":"6.5.0","license":"Apache-2.0","readme":"

    NativeScript Core Master-Detail App Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n\n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-master-detail-kinvey-js --template tns-template-master-detail-kinvey
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-master-detail-kinvey --template nativescript-app-templates/packages/template-master-detail-kinvey
    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n\n

    The template has the following page modules:

    \n\n

    There is one model to represent the data items:

    \n\n

    The template also provides a data service:

    \n\n

    Kinvey integration

    \n

    The templates uses the {N} Kinvey plugin. The initialization is done before the app starts in the /app/app.js file. The initialization script is located at /app/shared/kinvey.common.js.

    \n

    [Optional] Kinvey database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n\n

    Each component has 3 style files located in its folder:

    \n\n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@toolisticon/nativescript-buildhelper":{"name":"@toolisticon/nativescript-buildhelper","version":"0.4.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-windows":{"name":"tns-windows","version":"0.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rosen-test-ns-extension":{"name":"rosen-test-ns-extension","version":"0.1.0","license":"Apache-2.0","readme":"

    rosen-test-ns-extension

    \n

    just a test

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-code-push-cli":{"name":"nativescript-code-push-cli","version":"1.0.7","license":"MIT","readme":"

    NativeScript CodePush Management CLI

    \n

    Please refer to the NativeScript plugin docs.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-less":{"name":"nativescript-dev-less","version":"0.0.12","license":"Apache-2.0","readme":"

    LESS CSS pre-processor for NativeScript projects.

    \n

    How to use

    \n
    $ tns install less
    \n

    The above command installs this module and installs the necessary hooks. LESS CSS pre-processing of all .less files inside app folder happens when the project is prepared for build.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-remote-builds":{"name":"nativescript-remote-builds","version":"1.1.1","license":"SEE LICENSE IN LICENSE","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mcms-node-beacons":{"name":"mcms-node-beacons","version":"0.0.1","license":"MIT","readme":"

    Some docs

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textfield-ng":{"name":"nativescript-textfield-ng","version":"0.0.2","readme":"

    nativescript-textfield-ng

    \n

    nativescript textfield with focus event handler, but without ngModel support %)

    \n

    Installation

    \n

    tns plugin add textfield-ng

    \n

    or as local:

    \n

    cd ${ns_project}\ngit clone https://github.com/syncro/nativescript-textfield-ng.git\ntns plugin add nativescript-textfield-ng

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@drifters/nativescript-notification":{"name":"@drifters/nativescript-notification","version":"0.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mytoast":{"name":"nativescript-mytoast","version":"1.1.1","readme":"

    NativeScript myToast

    \n

    Apprendre

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cordova":{"name":"nativescript-cordova","version":"0.1.3","license":"Apache-2.0","readme":"

    Nativescript Cordova

    \n

    Add Cordova as a dependency for you {N} app.

    \n

    Installation

    \n
    tns plugin add nativescript-cordova
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tweenjs":{"name":"nativescript-tweenjs","version":"0.9.0","license":{"type":"MIT","url":"https://github.com/tralves/nativescript-tweenjs/blob/master/LICENSE"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simplecam":{"name":"nativescript-simplecam","version":"0.6.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-generator":{"name":"tns-generator","version":"1.0.14","license":"ISC","readme":"

    Scaffolder for Nativscript Apps

    \n

    How to use

    \n

    Install: (might need to install with -g if it doesn't work)

    \n
    $ npm install tns-generator
    \n

    Usage:

    \n
    $ ng2gen -f folder -n componentname
    $ ng2gen -f components -n home
    \n

    This will create a folder: app/foldername/name with three files:

    \n\n

    It will check for tns-dev-stylus, tns-dev-jade and tns-dev-typescript and generate\nvariants, .jade, .styl and .ts if needed.

    \n

    If you are using typescript, it will also generate a component template for you.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@melonwd/melonalert":{"name":"@melonwd/melonalert","version":"1.4.5","license":"MIT","readme":"

    MelonAlerts

    \n

    The purpose of this repo and library is to swap out functionality provided by SweetAlert2 at transpile time and provide Nativescript friendly code/views.

    \n

    Installation

    \n

    Install the package with

    \n

    npm install @melonwd/melonalert

    \n

    and then in the correct tsconfig.json you need to define the following path:

    \n
    \"sweetalert2\":[
    \t\"node_modules/@melonwd/melonalerts\"
    ]
    \n

    After this, whenever you require or import something from sweetalert2 it will instead grab the member out of the melonalerts library instead.

    \n

    Usage

    \n

    Once the above has been done, you should be able to use swal normally (with limited functionality.)

    \n

    You need to import MelonAlertModule and place it within your app.module.ts.

    \n

    You need to put <mwd-alert></mwd-alert> in the root of your project.

    \n

    Supported Alert Flags

    \n

    title - Title of which to be shown in the alert

    \n

    text - Text to be shown underneath the paragraph

    \n

    confirmButtonText - Text shown on the confirmation button

    \n

    cancelButtonText - Text shown on the cancellation button

    \n

    showConfirmButton - If the confirmation button should display.

    \n

    showCancelButton - If the cancellation button should display.

    \n

    cancelButtonStyle - Object of styles to apply to the cancellation button.

    \n

    confirmButtonStyle - Object of styles to apply to the confirmation button.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-xmlxsd":{"name":"nativescript-dev-xmlxsd","version":"0.1.0","license":"Apache-2.0","readme":"

    XML validation against XSD schema for NativeScript projects.

    \n

    How to use

    \n
    $ tns install xmlxsd
    \n

    The above command installs this module and installs the necessary hooks. XSD validation of all XML files inside app folder happens when the project is prepared for build.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paythunder":{"name":"nativescript-paythunder","version":"0.0.1","readme":"

    PayThunder Plugin

    \n

    Installing the plugin

    \n
    tns plugin add <path>\\PaythunderPlugin
    \n
    \n

    Using the plugin

    \n
    var PaythunderPlugin = require(\"nativescript-paythunder\");

    public payWithPayThunder() {
        PaythunderPlugin.launchPayThunder();
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sass":{"name":"nativescript-sass","version":"0.1.1","license":"Apache-2.0","readme":"

    Sorry I ate the README!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mwz-ns-apple-signin":{"name":"mwz-ns-apple-signin","version":"1.0.1","license":"mwz","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"acs-bluetooth":{"name":"acs-bluetooth","version":"1.0.0","license":"MIT","readme":"

    #ACSBluetooth

    \n

    An Android module for native script that can be used for scanning for and connecting to ACS Bluetooth readers

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-firebase":{"name":"@bigin/ns-firebase","version":"11.1.2","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mrtechsupport/firebase":{"name":"@mrtechsupport/firebase","version":"1.0.5","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-ava-ts":{"name":"tns-template-ava-ts","version":"1.0.8","license":"MIT","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-activity-detection":{"name":"nativescript-activity-detection","version":"0.1.1","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oauth2-forked":{"name":"nativescript-oauth2-forked","version":"2.4.3","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@7isys/loopback-sdk-builder":{"name":"@7isys/loopback-sdk-builder","version":"2.3.11","license":"MIT","readme":"

    LoopBack SDK Builder

    \n

    Please do not use this repository. There are some personal projects specific changes.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fallen90/nativescript-template-generate":{"name":"@fallen90/nativescript-template-generate","version":"0.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onyxbeacon":{"name":"nativescript-onyxbeacon","version":"1.0.5","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils-fork":{"name":"nativescript-google-maps-utils-fork","version":"0.1.0","license":"License","readme":"

    nativescript-google-maps-utils-fork

    \n

    NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

    \n

    \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

    \n

    State

    \n

    Android implemented.

    \n

    iOS not implemented.

    \n

    Dependencies

    \n\n

    Install

    \n
    tns plugin add nativescript-google-maps-utils-fork
    \n

    Usage

    \n
    var GoogleMaps = require('nativescript-google-maps-sdk');
    var GoogleMapsUtils = require('nativescript-google-maps-utils-fork');


    function onMapReady(args) {

      var mapView = args.object;

    \tvar positionSet = [ /* GoogleMaps.Position... */ ];

    \tGoogleMapsUtils.setupHeatmap(mapView, positionSet);


    \tvar markerSet = [ /* GoogleMaps.Marker... */ ];

    \tGoogleMapsUtils.setupMarkerCluster(mapView, makerSet);

    }
    ...
    \n

    Usage with TypeScript

    \n

    import using either of

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-starter-kits":{"name":"nativescript-starter-kits","version":"0.3.5","license":"Apache-2.0","readme":"

    nativescript-starter-kits

    \n

    A NativeScript CLI extension for managing templates

    \n

    Automatic Installation

    \n

    You can install this extension using the Nativescript CLI

    \n
    $ tns extension install nativescript-starter-kits
    \n

    Manual Installation and Development

    \n

    Download the GIT repository in you favorite projects directory

    \n
    $ git clone git@github.com:NativeScript/nativescript-starter-kits.git
    \n

    Run the following commands to install all dependencies, transpile all Ts files and to pack the extension.

    \n
    $ npm i --ignore-scripts
    $ npm i -g grunt-cli (only in case you do not have it installed globally)

    $ grunt
    $ grunt pack
    \n

    These commands will create a .tgz file in the extension folder

    \n

    Install the npm package

    \n
    $ tns extension install <path to nativescript-starter-kits>.tgz
    \n

    Public API

    \n

    Get proper nativescript reference

    \n
    const pathToPackage = require(\"global-modules-path\").getPath(\"nativescript\", \"tns\");
    const tns = require(pathToPackage);
    \n

    Load all available extensions

    \n
    /**
         * @name loadExtensions
         * @description Loads all currently installed extensions
         * @return {Promise<any>[]} - On Success: Array of Promises, one for each installed extension
    */
    Promise.all(tns.extensibilityService.loadExtensions()).then((loadedExtensions) => {
        console.log(\"All extensions loaded successfully!\");
    }).catch((error) => {
        console.error(error);
    });
    \n
    Get details for all installed templates
    \n
    /**
         * @name getTemplates
         * @description List all available templates
         * @return {Promise<Array<any>>} - On Success: Array of Objects with Details about each template
    */
    tns.templateService.getTemplates().then((templates) => {
        console.log(templates);
    }).catch((error) => {
        console.error(error);
    });
    \n
    Get details for a single App template
    \n
    /**
         * @name getAppTemplateDetails
         * @description The method returns details about a single app template.
         * @param {string} templateName - The name of the template
         * @returns {Promise<any>} - Object with details about the app template
         */
        getAppTemplateDetails(templateName: string): any;
        
    tns.templateService.getAppTemplateDetails(\"templateName\").then((details) => {
        console.log(details);
    }).catch((error) => {
        console.error(error);
    });
    \n

    Run tests

    \n

    Before running the test you need to transpile all files and dependencies.

    \n
    $ grunt pack
    $ npm run test
    \n

    Issues

    \n

    If you have found an issue with this extension, please report the problem in the Issues section.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey-ng":{"name":"tns-template-master-detail-kinvey-ng","version":"6.5.0","license":"SEE LICENSE IN ","readme":"

    NativeScript with Angular Master Detail Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Editable master-detail interface
      • \n
    • Integration with Kinvey database
      • \n
    • Works offline
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-master-detail-kinvey-ng --template tns-template-master-detail-kinvey-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey-ng).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-master-detail-kinvey-ng --template nativescript-app-templates/packages/template-master-detail-kinvey-ng
    \n

    Walkthrough

    \n

    Architecture

    \n

    The application component:

    \n
      \n
    • /src/app/app.component - sets up a page router outlet that lets you navigate between pages.
      • \n
    \n

    The template has the following components:

    \n
      \n
    • /src/app/cars/car-list.component - the master list component. It gets the data and displays it in a list. On item tap, it navigates to the item details component.
      • \n
    • /src/app/cars/car-detail/car-detail.component - the item details component. Displays the details of the tapped item. Has an Edit button that leads to the edit component.
      • \n
    • /src/app/cars/car-detail-edit/car-detail-edit.component - the item details edit component. Provides edit options for the selected item. The Done button saves the changes.
      • \n
    \n

    There is one model to represent the data items:

    \n
      \n
    • /src/app/cars/shared/car.model
      • \n
    \n

    The template also provides a data service:

    \n
      \n
    • /src/app/cars/shared/car.service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
      • \n
    \n

    Kinvey integration

    \n

    The template uses the {N} Kinvey plugin. The initialization is done in the src/app/app.module.ts file with the KinveyModule import.

    \n

    [Optional] Kinvey database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Each component has 3 style files located in its folder:

    \n
      \n
    • ../_{page-name}.component.scss - the component common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • ../{page-name}.component.android.scss - the component Android style sheet. These style rules are applied to Android only.
      • \n
    • ../{page-name}.component.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ionic":{"name":"@nativescript/ionic","version":"0.0.3","readme":"

    @nativescript/ionic

    \n

    NativeScript for Ionic

    \n

    Install

    \n
    npm install @nativescript/ionic
    npx cap sync
    \n

    Docs: Coming Soon

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appsync":{"name":"@nativescript/appsync","version":"3.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/runtime":{"name":"@nativescript-vue/runtime","version":"3.0.0-dev.4","license":"MIT","readme":"

    @nativescript-vue/runtime

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}}} \ No newline at end of file +{"angular2-seed-advanced":{"name":"angular2-seed-advanced","version":"1.0.5","license":"MIT","readme":"

    \"Angular

    \n

    \"Angular\n\"Build\n\"MIT\n\"Dependency\n\"devDependency

    \n

    This is an advanced seed project for Angular apps based on Minko Gechev's angular-seed that expands on all of its great features to include core support for:

    \n

    Integration with:

    \n
      \n
    • ngrx/store RxJS powered state management, inspired by Redux
      • \n
    • ngrx/effects Side effect model for @ngrx/store
      • \n
    • ngx-translate for i18n\n
        \n
      • Usage is optional but on by default
        • \n
      • Up to you and your team how you want to utilize it. It can be easily removed if not needed.
        • \n
      \n
      • \n
    • angulartics2 Vendor-agnostic analytics for Angular applications.\n
        \n
      • Out of box support for Segment\n
          \n
        • When using the seed, be sure to change your write_key here
          • \n
        \n
        • \n
      • Can be changed to any vendor, learn more here
        • \n
      \n
      • \n
    • lodash Helps reduce blocks of code down to single lines and enhances readability
      • \n
    • NativeScript cross platform mobile (w/ native UI) apps. Setup instructions here.
      • \n
    • Electron cross platform desktop apps (Mac, Windows and Linux). Setup instructions here.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Multiple
    The zen of multiple platforms. Chrome, Android and iPhone all running the same code.
    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Desktop\"
    Programming Nirvana. Mac and Windows desktop both running the same code.
    \n

    Table of Contents

    \n\n

    Advice: If your project is intended to target a single platform (i.e, web only), then angular-seed is likely more than suitable for your needs. However if your project goals are to target multiple platforms (web, native mobile and native desktop), with powerful out of the box library support and highly configurable/flexible testing options, then you might want to keep reading.

    \n

    Too Much?!: Don't worry it's ok, I completely understand. There is a simplified version of this seed which still allows web + mobile + desktop without the extra libraries and features like ngrx or analytics. Give this a shot: https://github.com/jlooper/angular-starter

    \n

    It's built with a lot of the same structure found here so things work the same but is definitely easier to start with if just getting into multi-platform development.

    \n

    Prerequisites

    \n

    Note you should have node v6.5.0 or higher and npm 3.10.3 or higher.

    \n
      \n
    • To run the NativeScript app (currently supports 3.x):
      • \n
    \n
    npm install -g nativescript
    \n

    How to start

    \n
    # install the project's dependencies
    $ npm install
    # fast install (via Yarn, https://yarnpkg.com)
    $ yarn install  # or yarn

    # watches your files and uses livereload by default
    $ npm start
    # api document for the app
    # npm run build.docs

    # generate api documentation
    $ npm run compodoc
    $ npm run serve.compodoc

    # to start deving with livereload site and coverage as well as continuous testing
    $ npm run start.deving

    # dev build
    $ npm run build.dev
    # prod build
    $ npm run build.prod
    \n

    How to start with AoT

    \n

    Note that AoT compilation requires node v6.5.0 or higher and npm 3.10.3 or higher.

    \n

    In order to start the seed with AoT use:

    \n
    # prod build with AoT compilation, will output the production application in `dist/prod`
    # the produced code can be deployed (rsynced) to a remote server
    $ npm run build.prod.aot
    \n

    Mobile app

    \n

    The mobile app is provided via NativeScript, an open source framework for building truly native mobile apps.

    \n

    Setup

    \n
    npm install -g nativescript
    \n

    Dev Workflow

    \n

    You can make changes to files in src/client/app or nativescript/src/app folders. A symbolic link exists between the web src/client/app and the nativescript/src/app folder so changes in either location are mirrored because they are the same directory inside.

    \n

    Create .tns.html and .tns.scss NativeScript view files for every web component view file you have. You will see an example of the app.component.html as a NativeScript view file here.

    \n

    The root module for the mobile app is nativescript/src/native.module.ts: NativeModule.

    \n

    Run

    \n
    iOS:                      npm run start.ios   
    iOS (device):             npm run start.ios.device

    // or...

    Android:                      npm run start.android
    Android (device):             npm run start.android.device
    \n\n

    OR...

    \n\n
    Building with Webpack for release builds
    \n

    Create AoT builds for deployment to App Store and Google Play.

    \n
    Android:   npm run build.android
    iOS:       npm run build.ios
    \n

    Desktop app

    \n

    The desktop app is provided via Electron, cross platform desktop apps\nwith JavaScript, HTML, and CSS.

    \n

    Develop

    \n
    Mac:      npm run start.desktop
    Windows:  npm run start.desktop.windows
    \n

    Develop with livesync

    \n
    Mac:      npm run start.livesync.desktop
    Windows:  npm run start.livesync.desktop.windows
    \n

    Release: Package Electron App for Mac, Windows or Linux

    \n
    Mac:      npm run build.desktop.mac
    Windows:  npm run build.desktop.windows
    Linux:    npm run build.desktop.linux
    \n

    Running tests

    \n
    $ npm test

    # Development. Your app will be watched by karma
    # on each change all your specs will be executed.
    $ npm run test.watch
    # NB: The command above might fail with a \"EMFILE: too many open files\" error.
    # Some OS have a small limit of opened file descriptors (256) by default
    # and will result in the EMFILE error.
    # You can raise the maximum of file descriptors by running the command below:
    $ ulimit -n 10480


    # code coverage (istanbul)
    # auto-generated at the end of `npm test`
    # view coverage report:
    $ npm run serve.coverage

    # e2e (aka. end-to-end, integration) - In three different shell windows
    # Make sure you don't have a global instance of Protractor

    # npm install webdriver-manager <- Install this first for e2e testing
    # npm run webdriver-update <- You will need to run this the first time
    $ npm run webdriver-start
    $ npm run serve.e2e
    $ npm run e2e

    # e2e live mode - Protractor interactive mode
    # Instead of last command above, you can use:
    $ npm run e2e.live
    \n

    You can learn more about Protractor Interactive Mode here

    \n

    Web configuration options

    \n

    Default application server configuration

    \n
    var PORT             = 5555;
    var LIVE_RELOAD_PORT = 4002;
    var DOCS_PORT        = 4003;
    var APP_BASE         = '/';
    \n

    Configure at runtime

    \n
    npm start -- --port 8080 --reload-port 4000 --base /my-app/
    \n

    Environment configuration

    \n

    If you have different environments and you need to configure them to use different end points, settings, etc. you can use the files dev.ts or prod.ts in./tools/env/. The name of the file is environment you want to use.

    \n

    The environment can be specified by using:

    \n
    $ npm start -- --env-config ENV_NAME
    \n

    Currently the ENV_NAMEs are dev, prod, staging, but you can simply add a different file "ENV_NAME.ts". file in order to alter extra such environments.

    \n

    Tools documentation

    \n

    A documentation of the provided tools can be found in tools/README.md.

    \n

    Code organization overview

    \n
      \n
    • nativescript: Root of this directory is reserved for mobile app.\n
        \n
      • src: mobile app src.\n
          \n
        • app: Symbolic link of shared code from web app.
          • \n
        • App_Resources: iOS and Android platform specific config files and images.
          • \n
        • mobile: Mobile specific services, etc. Build out mobile specific services here as well as overrides for web services that need to be provided for in the mobile app. Safe to import {N} modules here.
          • \n
        • native.module.ts: Root module for the mobile app provided by NativeScript. Override/provide native mobile implementations of services here.
          • \n
        \n
        • \n
      \n
      • \n
    • src/client: Root of this directory is reserved for web and desktop.\n
        \n
      • app: All the code in this directory is shared with the mobile app via a symbolic link.\n
          \n
        • components: Reserved for primary routing components. Since each app usually has it's own set of unique routes, you can provide the app's primary routing components here.
          • \n
        • shared: Shared code across all platforms. Reusable sub components, services, utilities, etc.\n
            \n
          • analytics: Provides services for analytics. Out of the box, Segment is configured.
            • \n
          • core: Low level services. Foundational layer.
            • \n
          • electron: Services specific to electron integration. Could be refactored out in the future since this is not needed to be shared with the mobile app.
            • \n
          • i18n: Various localization features.
            • \n
          • ngrx: Central ngrx coordination. Brings together state from any other feature modules etc. to setup the initial app state.
            • \n
          • sample: Just a sample module pre-configured with a scalable ngrx setup.
            • \n
          • test: Testing utilities. This could be refactored into a different location in the future.
            • \n
          \n
          • \n
        \n
        • \n
      • assets: Various locale files, images and other assets the app needs to load.
        • \n
      • css: List of the main style files to be created via the SASS compilation (enabled by default).
        • \n
      • scss: Partial SASS files - reserved for things like _variables.scss and other imported partials for styling.
        • \n
      • index.html: The index file for the web and desktop app (which share the same setup).
        • \n
      • main.desktop.ts: The file used by Electron to start the desktop app.
        • \n
      • main.web.prod.ts: Bootstraps the AoT web build. Generally won't modify anything here
        • \n
      • main.web.ts: Bootstraps the development web build. Generally won't modify anything here
        • \n
      • package.json: Used by Electron to start the desktop app.
        • \n
      • system-config.ts: This loads the SystemJS configuration defined here and extended in your own app's customized project.config.ts.
        • \n
      • tsconfig.json: Used by compodoc - The missing documentation tool for your Angular application - to generate api docs for your code.
        • \n
      • web.module.ts: The root module for the web and desktop app.
        • \n
      \n
      • \n
    • src/e2e: Integration/end-to-end tests for the web app.
      • \n
    \n

    How-tos

    \n

    i18n

    \n
      \n
    • how to add a language?\n
        \n
      • src/client/assets/i18n/\n
          \n
        • add [language code].json (copy existing one and adapt the translation strings)
          • \n
        \n
        • \n
      • https://github.com/NathanWalker/angular-seed-advanced/blob/master/src/client/web.module.ts#L98-L101\n
          \n
        • Configure Languages InjectionToken with array of supported languages
          • \n
        \n
        • \n
      • src/client/app/modules/i18n/components/lang-switcher.component.spec.ts\n
          \n
        • fix test
          • \n
        \n
        • \n
      \n
      • \n
    \n

    Logging

    \n
      \n
    • \n

      what is the basic API surface around logging?

      \n
        \n
      • LogService is the main class that consumer code should use to write diagnostic information to one or more configured targets
        • \n
      • LogTarget is an abstraction of where the log output is written. (e.g. ConsoleTarget writes diagnostics to the console)
        • \n
      • LogTargetBase is a base abstract class that makes it easier to implement custom log target. It provides a way for inheritors to filter messages by importance.
        • \n
      • LogLevel is level of importance associated with every log message (e.g. Debug, Info, Warning, Error)
        • \n
      \n
      • \n
    • \n

      how to control amount of information logged?

      \n
        \n
      • If a log target is derrived from LogTargetBase the target can be configured to filter messages by importance. You can pass minLogLevel as LogTargetOptions
        • \n
      • LogService additionally uses Config.Debug switches as a global treshhold to further filter verbosity of the log messages.
        • \n
      \n
      • \n
    • \n

      how to implement custom log target?

      \n
        \n
      • Derrive from LogTargetBase class and implement writeToLog method (see ConsoleTarget). You can configure several log targets at a time inside main application module. For example:
        • \n
      \n
      CoreModule.forRoot([
          { provide: WindowService, useFactory: (win) },
          { provide: ConsoleService, useFactory: (cons) },
          { provide: LogTarget, useFactory: (consoleLogTarget), deps: [ConsoleService], multi: true },
          { provide: LogTarget, useFactory: () => new LogStashTarget({minLogLevel: LogLevel.Debug}) }
        ]),
      \n
      • \n
    \n

    General best practice guide to sharing code

    \n

    There’s actually only a few things to keep in mind when sharing code between web/mobile. The seed does take care of quite a few of those things but here’s a brief list:

    \n
      \n
    • Don’t import {N} modules into your components/services. {N} modules can only be used inside the {N} app therefore cannot be shared. To get around this, use InjectionToken's. Learn more here. A great example of how to integrate 2 different plugins (1 for web, 1 for {N}) and share all the code exists in this wiki article: How to integrate Firebase across all platforms written by the awesome Scott Lowe.
      • \n
    • Use the conditional hooks provided by the seed in shared methods where you may need to handle something differently in {N} than you do on the web. For example, see here.
      • \n
    • Don’t use window global. Inject the WindowService provided by the seed instead. This includes usage of alert, confirm, etc. For example:
      • \n
    \n

    If you were thinking about doing: alert('Something happened!');, Don't.\nInstead inject WindowService:

    \n
    constructor(private win: WindowService) {}

    public userAction() {
      if (success) {
        // do stuff
      } else {
        this.win.alert('Something happened!');
      }
    }
    \n

    This ensures that when the same code is run in the {N} app, the native dialogs module will be used.

    \n
      \n
    • Lastly, understand this video: http://www.nativescriptsnacks.com/videos/2016/06/13/zoned-callbacks.html … As far as dealing with {N} and 3rd party plugins, you want to understand that.
      • \n
    \n

    The advice I like to give is:

    \n
    \n

    Code with web mentality first. Then provide the native capability using Angular’s {provide: SomeWebService, useClass: SomeNativeService } during bootstrap.

    \n
    \n

    There are some cases where you may want to use useValue vs. useClass, and other times may need to use useFactory. Read the Angular docs here to learn more about which you may need for your use case.

    \n

    How best to use for your project

    \n

    Setup

    \n

    NOTE: This should be done first before you start making any changes and building out your project.

    \n
      \n
    1. git clone https://github.com/NathanWalker/angular-seed-advanced.git [your-project-name]
      2. \n
    2. cd [your-project-name]
      3. \n
    3. git remote set-url origin [your-project-git-repo] - This will setup origin properly.
      4. \n
    4. git remote add upstream https://github.com/NathanWalker/angular-seed-advanced.git - This will setup upstream properly to merge in upstream changes later.
      5. \n
    5. git push - Go ahead and push up the initial project.
      6. \n
    6. Now you have git setup and ready to develop your app as well as merge in upstream changes in the future.
      7. \n
    7. npm install (and all other usage docs in this README apply) - continue following instructions here.
      8. \n
    8. Create a new folder (or several sub-folders) for your app in src/client/app/shared to build your codebase out. Say your app is called AwesomeApp, then create awesomeapp and start building out all your components and services in there. Create other frameworks as you see fit to organize.
      9. \n
    \n

    Merging latest upstream changes

    \n
      \n
    1. git fetch upstream - This will fetch latest upstream.
      2. \n
    2. git merge upstream/master - This will merge in upstream changes.
      3. \n
    3. Handle any conflicts to get latest upstream into your app.
      4. \n
    4. Continue building your app.
      5. \n
    \n

    You can read more about syncing a fork here.

    \n

    If you have any suggestions to this workflow, please post here.

    \n

    Dockerization

    \n

    The application provides full Docker support. You can use it for both development as well as production builds and deployments.

    \n

    How to build and start the dockerized version of the application

    \n

    The Dockerization infrastructure is described in the docker-compose.yml (respectively docker-compose.production.yml.\nThe application consists of two containers:

    \n
      \n
    • angular-seed - In development mode, this container serves the angular app. In production mode it builds the angular app, with the build artifacts being served by the Nginx container
      • \n
    • angular-seed-nginx - This container is used only production mode. It serves the built angular app with Nginx.
      • \n
    \n

    Development build and deployment

    \n

    Run the following:

    \n
    $ docker-compose build
    $ docker-compose up -d
    \n

    Now open your browser at http://localhost:5555

    \n

    Production build and deployment

    \n

    Run the following:

    \n
    $ docker-compose -f docker-compose.production.yml build
    $ docker-compose -f docker-compose.production.yml up angular-seed   # Wait until this container has finished building, as the nginx container is dependent on the production build artifacts
    $ docker-compose -f docker-compose.production.yml up -d angular-seed-nginx  # Start the nginx container in detached mode
    \n

    Now open your browser at http://localhost:5555

    \n

    Contributing

    \n

    Please see the CONTRIBUTING file for guidelines.

    \n

    Awesome Contributors

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"mgechev\"\"NathanWalker\"\"ludohenin\"\"d3viant0ne\"\"Shyam-Chen\"\"Nightapes\"
    mgechevNathanWalkerludohenind3viant0neShyam-ChenNightapes
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"tarlepp\"\"karlhaas\"\"m-abs\"\"robstoll\"\"TheDonDope\"\"nareshbhatia\"
    tarleppkarlhaasm-absrobstollTheDonDopenareshbhatia
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"hank-ehly\"\"kiuka\"\"vyakymenko\"\"jesperronn\"\"daniru\"\"aboeglin\"
    hank-ehlykiukavyakymenkojesperronndaniruaboeglin
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"nulldev07\"\"eppsilon\"\"netstart\"\"sasikumardr\"\"gkalpak\"\"sfabriece\"
    nulldev07eppsilonnetstartsasikumardrgkalpaksfabriece
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"JakePartusch\"\"ryzy\"\"markwhitfeld\"\"jvitor83\"\"fulls1z3\"\"ivannugo\"
    JakePartuschryzymarkwhitfeldjvitor83fulls1z3ivannugo
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"pgrzeszczak\"\"treyrich\"\"natarajanmca11\"\"e-oz\"\"Kaffiend\"\"nosachamos\"
    pgrzeszczaktreyrichnatarajanmca11e-ozKaffiendnosachamos
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"jerryorta-dev\"\"alllx\"\"LuxDie\"\"JayKan\"\"JohnCashmore\"\"larsthorup\"
    jerryorta-devalllxLuxDieJayKanJohnCashmorelarsthorup
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"admosity\"\"irsick\"\"StefanKoenen\"\"llwt\"\"amedinavalencia\"\"odk211\"
    admosityirsickStefanKoenenllwtamedinavalenciaodk211
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"troyanskiy\"\"tsm91\"\"hellofornow\"\"domfarolino\"\"VladimirMakaev\"\"juristr\"
    troyanskiytsm91hellofornowdomfarolinoVladimirMakaevjuristr
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Karasuni\"\"turbohappy\"\"devanp92\"\"DmitriyPotapov\"\"evanplaice\"\"hAWKdv\"
    Karasuniturbohappydevanp92DmitriyPotapovevanplaicehAWKdv
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"JunaidZA\"\"c-ice\"\"markharding\"\"ojacquemart\"\"patrickmichalina\"\"rajeev-tripathi\"
    JunaidZAc-icemarkhardingojacquemartpatrickmichalinarajeev-tripathi
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"sanderbos1402\"\"Sn3b\"\"gotenxds\"\"yavin5\"\"divramod\"\"edud69\"
    sanderbos1402Sn3bgotenxdsyavin5divramodedud69
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"idready\"\"kbrandwijk\"\"Yonet\"\"smac89\"\"Green-Cat\"\"ip512\"
    idreadykbrandwijkYonetsmac89Green-Catip512
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"joshboley\"\"Marcelh1983\"\"Bigous\"\"robbatt\"\"TuiKiken\"\"alexweber\"
    joshboleyMarcelh1983BigousrobbattTuiKikenalexweber
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"vakrilov\"\"allenhwkim\"\"Falinor\"\"amaltsev\"\"yassirh\"\"bbarry\"
    vakrilovallenhwkimFalinoramaltsevyassirhbbarry
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"urmaul\"\"sonicparke\"\"brendanbenson\"\"brian428\"\"briantopping\"\"ckapilla\"
    urmaulsonicparkebrendanbensonbrian428briantoppingckapilla
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"cadriel\"\"Cselt\"\"dszymczuk\"\"dmurat\"\"peah90\"\"dstockhammer\"
    cadrielCseltdszymczukdmuratpeah90dstockhammer
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"dwido\"\"dcsw\"\"totev\"\"EddyVerbruggen\"\"ericdoerheit\"\"ericli1018\"
    dwidodcswtotevEddyVerbruggenericdoerheitericli1018
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Swiftwork\"\"fbascheper\"\"gsamokovarov\"\"koodikindral\"\"hpinsley\"\"NN77\"
    SwiftworkfbaschepergsamokovarovkoodikindralhpinsleyNN77
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"isidroamv\"\"JohnnyQQQQ\"\"jeffbcross\"\"jlooper\"\"Jimmysh\"\"Drane\"
    isidroamvJohnnyQQQQjeffbcrossjlooperJimmyshDrane
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"johnjelinek\"\"fourctv\"\"JunusErgin\"\"justindujardin\"\"lihaibh\"\"Brooooooklyn\"
    johnjelinekfourctvJunusErginjustindujardinlihaibhBrooooooklyn
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"tandu\"\"inkidotcom\"\"mpetkov\"\"daixtrose\"\"Doehl\"\"MathijsHoogland\"
    tanduinkidotcommpetkovdaixtroseDoehlMathijsHoogland
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"mjwwit\"\"oferze\"\"ocombe\"\"gdi2290\"\"typekpb\"\"peter-norton\"
    mjwwitoferzeocombegdi2290typekpbpeter-norton
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"pavlovich\"\"philipooo\"\"pidupuis\"\"redian\"\"robertpenner\"\"Sjiep\"
    pavlovichphilipooopidupuisredianrobertpennerSjiep
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"RoxKilly\"\"siovene\"\"SamVerschueren\"\"sclausen\"\"heavymery\"\"tjvantoll\"
    RoxKillysioveneSamVerschuerensclausenheavymerytjvantoll
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"tapas4java\"\"gitter-badger\"\"tsvetomir\"\"valera-rozuvan\"\"vogloblinsky\"\"vincentpalita\"
    tapas4javagitter-badgertsvetomirvalera-rozuvanvogloblinskyvincentpalita
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"ghys\"\"Yalrafih\"\"arioth\"\"arnaudvalle\"\"billsworld\"\"blackheart01\"
    ghysYalrafihariotharnaudvallebillsworldblackheart01
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"butterfieldcons\"\"danielcrisp\"\"gforceg\"\"guilhebl\"\"jgolla\"\"omerfarukyilmaz\"
    butterfieldconsdanielcrispgforcegguilhebljgollaomerfarukyilmaz
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"pbazurin-softheme\"\"ZuSe\"\"rossedfort\"\"ruffiem\"\"savcha\"\"s-f-a-g\"
    pbazurin-softhemeZuSerossedfortruffiemsavchas-f-a-g
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"ultrasonicsoft\"\"taguan\"
    ultrasonicsofttaguan
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":9,"lastWeek":35,"lastMonth":185}},"vt-nativescript":{"name":"vt-nativescript","version":"8.1.6","license":"MIT","readme":"

    \n \n \"NativeScript\"\n \n

    \n

    \"Build

    \n

    NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile development and can be utilized in a number of diverse use cases.

    \n

    Setup and Installation

    \n\n

    Contribute

    \n
    $ git clone https://github.com/NativeScript/NativeScript.git
    $ cd NativeScript

    # setup workspace for development
    $ npm run setup

    # list all available commands to run
    $ npm start
    \n

    We love you and your PR's 🤗. Please follow our contributing guide and see our code of governance to become as involved as you want to be.

    \n

    @nativescript/*

    \n\n

    Quick Links

    \n\n

    Other source repos

    \n

    Outside the source centralized in this repo, NativeScript consists of a few other source repos. Here are the major ones:

    \n
      \n
    • iOS runtime\n
        \n
      • \"npm\"
        • \n
      • This repo contains the NativeScript iOS runtime — the code that hosts NativeScript iOS apps, and allows JavaScript code to be executed on iOS devices. The iOS runtime is written in a fun mix of C++, Objective-C, and more.
        • \n
      \n
      • \n
    • Android runtime\n
        \n
      • \"npm\"
        • \n
      • This repo contains the NativeScript Android runtime — the code that hosts NativeScript Android apps, and allows JavaScript code to be executed on Android devices. The Android runtime is written in a fun mix of C++ and Java.
        • \n
      \n
      • \n
    • CLI\n
        \n
      • \"npm\"
        • \n
      • This repo contains the NativeScript command-line interface, which lets you create, build, and run apps using the NativeScript framework. The CLI is written in TypeScript.
        • \n
      \n
      • \n
    • Docs\n
        \n
      • \"Docs\"
        • \n
      • This repo contains the NativeScript framework documentation, which is available at http://docs.nativescript.org/. The docs are written in Markdown.
        • \n
      \n
      • \n
    \n

    License

    \n

    \"License\"

    \n

    Made with ❤️

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":5}},"s-nativescript-angular":{"name":"s-nativescript-angular","version":"15.0.1","license":"MIT","readme":"

    @nativescript/angular

    \n

    For usage with NativeScript for Angular 12, 13, 14+ projects.

    \n

    Clean and setup workspace:

    \n
    npm run clean.all
    \n

    Build packages:

    \n
    npm run build
    \n

    Run demo:

    \n
    npm run demo.ios
    // or...
    npm run demo.android
    \n

    Clean/Reset demo dependencies

    \n
    npm run demo.clean
    \n

    Unit tests for iOS and Android:

    \n
    npm run test.android
    npm run test.ios
    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":7}},"nativescript-advanced-webview":{"name":"nativescript-advanced-webview","version":"7.0.2","license":"MIT","readme":"\n

    NativeScript Advanced Webview

    \n    \n

    \nAn advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n

    \n

    Installation

    \n

    To install execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add nativescript-advanced-webview
    \n

    NativeScript < 7:

    \n
    tns plugin add nativescript-advanced-webview@5.0.0
    \n

    Here is a video showing off Chrome CustomTabs in NativeScript.

    \n

    Android

    \n

    CustomTabs

    \n

    iOS

    \n

    SFSafariViewController

    \n

    Why use this? Because Perf Matters

    \n

    Android Comparison

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Android\"iOS
    \n

    Example

    \n

    TypeScript

    \n

    Initiate the service before the app starts e.g app.ts, main.ts

    \n
    import { init } from 'nativescript-advanced-webview';
    init();
    \n
    import {
      AdvancedWebviewEvents,
      AdvancedWebViewOptions,
      init,
      NSAdvancedWebViewEventEmitter,
      openAdvancedUrl
    } from 'nativescript-advanced-webview';

    function whateverYouLike() {
      NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadStarted, () => {
        console.log('LOAD STARTED');
      });

      NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadFinished, () => {
        console.log('LOAD FINISHED');
      });

      NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadError, () => {
        console.log('LOAD ERROR');
      });

      NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.Closed, () => {
        console.log('CLOSED');
      });

      const opts: AdvancedWebViewOptions = {
        url: 'https://nativescript.org',
        showTitle: true,
        toolbarColor: '#336699',
        toolbarControlsColor: '#fff'
      };

      openAdvancedUrl(opts);
    }
    \n

    API

    \n
      \n
    • openAdvancedUrl(options: AdvancedWebViewOptions)
      • \n
    • close() _ iOS Only _ :: Closed the safari view controller.
      • \n
    \n

    AdvancedWebViewOptions Properties

    \n
      \n
    • url: string
      • \n
    • toolbarColor: string
      • \n
    • toolbarControlsColor: string - ** iOS only **
      • \n
    • showTitle: boolean - ** Android only **
      • \n
    \n

    Events

    \n
      \n
    • LoadStart
      • \n
    • LoadFinished
      • \n
    • LoadError
      • \n
    • Closed
      • \n
    \n
    Demo App
    \n
      \n
    • fork the repo
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios
      • \n
    \n","downloadStats":{"lastDay":43,"lastWeek":328,"lastMonth":1388}},"nativescript-ui-listview":{"name":"nativescript-ui-listview","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI ListView

    \n\n

    Overview

    \n

    The NativeScript UI ListView plugin is a virtualizing list component that provides the most popular features associated with scenarios where a list of items is used. All these features are embedded in one control with the idea to save developer time and provide better experience. The main features include:

    \n
      \n
    • Item animations
      • \n
    • Different layouts and orientations
      • \n
    • Smart defaults for many gestures - select on long press, execution of special action on swipe, reorder of items on long press and drag, refreshing the list on swipe or loading more items only when needed.
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-listview
    \n

    Documentation

    \n

    More information is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":252,"lastWeek":1414,"lastMonth":5651}},"nativescript-ui-sidedrawer":{"name":"nativescript-ui-sidedrawer","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI SideDrawer

    \n\n

    Overview

    \n

    The NativeScript UI SideDrawer plugin allows you to have a hidden view that contains navigation UI or common settings. A popular application that uses the drawer UI is the Android Play Store app. The hidden view can be displayed with a flick gesture and can be shown from any of the four edges of the screen. The view is also displayed with a transition which can be chosen from a set of pre-defined transitions.

    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-sidedrawer
    \n

    Documentation

    \n

    More information about the usage of the plugin available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":240,"lastWeek":1988,"lastMonth":8113}},"nativescript-baidu-push-notifications":{"name":"nativescript-baidu-push-notifications","version":"1.0.6","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    Baidu push notifications plugin for NativeScript

    \n

    Baidu is an alternative solution of Google FCM in China. This plugin will add Baidu push notification (http://push.baidu.com).

    \n

    Prerequisites / Requirements

    \n

    For getting API key follow: http://push.baidu.com/doc/guide/join

    \n

    For iOS need to follow 第七章 iOS证书指导 from http://push.baidu.com/doc/ios/api to setup Baidu.

    \n

    Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

    \n

    Installation

    \n
    tns plugin add nativescript-baidu-push-notifications
    \n

    Usage

    \n

    Your application ID is important here. Make sure that your Baidu API key & Application ID is correct.

    \n

    Import

    \n

    TS/Angular:

    \n
    import { IosRegistrationOptions, AndroidOptions } from \"nativescript-baidu-push-notifications\";
    import * as pushPlugin from \"nativescript-baidu-push-notifications\";
    \n

    JavaScript:

    \n
    pushPlugin = require(\"nativescript-baidu-push-notifications\");
    \n

    Android

    \n

    If you want to test in emulator then use Genymotion otherwise Baidu will send error message. Better to test with a real device.

    \n
    let opt: AndroidOptions = {
        apiKey: 'My API Key',
        icon: \"res://simple_notification_icon\" // optional App_Resouces/Android/drawable
    }

    pushPlugin.androidRegister(opt, function (data) {

        console.log(\"Got register\");
        console.log(\"userId: \" + data.get(\"userId\"));
        console.log(\"channelId: \" + data.get(\"channelId\"));
        console.log(\"appid: \" + data.get(\"appid\"));
        console.log(\"requestId: \" + data.get(\"requestId\"));
        console.log(\"errorCode: \" + data.get(\"errorCode\"));

    }, function (err) {
        console.log(\"not register\");
        console.dir(err)
    });

    pushPlugin.onMessageReceived(function (msg, customString) {
        console.log(\"got message\")
        console.log(msg);
        console.log(customString);
    });

    pushPlugin.onNotificationClicked(function (title, msg, customString) {
        console.log(\"clicked message\")
        console.log(title);
        console.log(msg);
        console.log(customString)
    });

    pushPlugin.onNotificationArrived(function (title, msg, customString) {
        console.log(\"onNotificationArrived\")
        console.log(title);
        console.log(msg);
        console.log(customString)
    });
    \n

    iOS

    \n

    iOS will require a real device. In simulator baidu will send error message.

    \n

    First of all need to add this config in App_Resource/iOS/Info.plist file:

    \n

    Development Environment:

    \n
    <key>insBPushAPIKey</key>
    <string>Your-Baidu-Key</string>
    <key>isDevBPushEnvironment</key>
    <true/>
    \n

    Production Environment:

    \n
    <key>insBPushAPIKey</key>
    <string>Your-Baidu-Key</string>
    <key>isDevBPushEnvironment</key>
    <false/>
    \n

    JS code:

    \n
    // check details https://github.com/NativeScript/push-plugin#using-the-plugin-in-ios

    let notificationSettings: IosRegistrationOptions = {
        badge: true,
        sound: true,
        alert: true,
        clearBadge: true,
        interactiveSettings: {
            actions: [{
                identifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
                identifier: 'CANCEL_IDENTIFIER',
                title: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
                identifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },

        notificationCallbackIOS: function (message) {
            console.log(\"notificationCallbackIOS : \" + JSON.stringify(message));
            alert(message.alert)
        }
    };

    pushPlugin.iosRegister(notificationSettings,
        //success callback
        function (result: any) {
            //Register the interactive settings
            if (notificationSettings.interactiveSettings) {

                pushPlugin.registerUserNotificationSettings(function () {
                    console.log(\"SUCCESSFULLY REGISTER BAIDU PUSH NOTIFICATION\")
                    console.dir(result);

                }, function (err) {
                    console.log(\"ERROR REGISTER PUSH NOTIFICATION: \" + JSON.stringify(err));
                })
            }
        },
        //error callback
        function (error) {
            console.log(\"REGISTER PUSH NOTIFICATION FAILED:\");
            console.dir(error);
        }
    );

    pushPlugin.areNotificationsEnabled(function (areEnabled) {
        console.log(\"Are Notifications enabled:\" + JSON.stringify(areEnabled));
    });
    \n

    Please check demo project for more details.

    \n

    All Methods/Options

    \n
    export interface IosInteractiveNotificationAction {
        identifier: string;
        title: string;
        activationMode?: string;
        destructive?: boolean;
        authenticationRequired?: boolean;
        behavior?: string;
    }
    export interface IosInteractiveNotificationCategory {
        identifier: string;
        actionsForDefaultContext: string[];
        actionsForMinimalContext: string[];
    }
    export interface IosRegistrationOptions {
        badge: boolean;
        sound: boolean;
        alert: boolean;
        clearBadge: boolean;
        interactiveSettings: {
            actions: IosInteractiveNotificationAction[];
            categories: IosInteractiveNotificationCategory[];
        };
        notificationCallbackIOS: (message: any) => void;
    }
    export interface NSError {
        code: number;
        domain: string;
        userInfo: any;
    }

    export interface AndroidOptions {
        apiKey: string;
        icon?: string;
    }

    // Android
    export declare function androidRegister(options: AndroidOptions, successCallback: any, errorCallback: any): void;
    export declare function androidUnregister(onSuccessCallback: any, onErrorCallback: any): void;
    export declare function onMessageReceived(callback: any): void;
    export declare function onNotificationArrived(callback: any): void;
    export declare function onNotificationClicked(callback: any): void;

    // iOS
    export declare function iosRegister(settings: IosRegistrationOptions, success: (token: any) => void, error: (NSError: any) => void): void;
    export declare function registerUserNotificationSettings(success: () => void, error: (error: NSError) => void): void;
    export declare function iosUnregister(success: (result: any) => void, error: (error: NSError) => void): void;
    export declare function areNotificationsEnabled(done: (areEnabled: Boolean) => void): void;
    \n

    Tips:

    \n
      \n
    • For Android push notification icon you will need to add icon sets in App_Resources/Android/src/main/res. Better to use 36X36 dimension for icon. Check the demo.
      • \n
    • For message notification can use nativescript-local-notifications plugin.
      • \n
    \n

    Credit

    \n

    Most of the work of this plugin has been followed/copied from this libaries:

    \n

    https://github.com/NativeScript/push-plugin

    \n

    https://www.npmjs.com/package/nativescript-baidu-push-ins

    \n

    https://www.npmjs.com/package/nativescript-baidu-push

    \n

    Special thanks to Phuc Bui and Quang Le Hong author of above 2 npm packages.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":42}},"nativescript-vue":{"name":"nativescript-vue","version":"2.9.3","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":296,"lastWeek":1611,"lastMonth":6221}},"nativescript-ng2-cli-magic":{"name":"nativescript-ng2-cli-magic","version":"1.0.0","license":"MIT","readme":"

    \"Angular\n\"MIT\n\"Dependency \"devDependency

    \n

    \"nativescript-ng2-cli-magic\"

    \n

    Magically drop a NativeScript app into your existing Angular2 web application and reuse all your code.*

    \n

    You will be adding NativeScript views, but you already knew that.

    \n\n

    Install

    \n
    npm i nativescript-ng2-cli-magic --save
    \n

    Usage

    \n
      \n
    1. Use Component from nativescript-ng2-cli-magic instead of @angular/core. Why?
      2. \n
    2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
      3. \n
    3. Run your truly native mobile app with NativeScript!
      4. \n
    \n

    Example

    \n

    A sample root component, app.component.ts:

    \n
    import {Component} from 'nativescript-ng2-cli-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html'
    })
    export class AppComponent {}
    \n

    Run for first time!

    \n

    You will need to have fully completed steps 1 and 2 above.

    \n

    Run your app in the iOS Simulator with:

    \n
    npm run start.ios
    \n

    Run your app in an Android emulator with:

    \n
    npm run start.android
    \n

    Welcome to the wonderfully magical world of NativeScript!

    \n

    How to create NativeScript views

    \n

    Based on our example above, assume app.component.html looks like this:

    \n
    <main>
      <div>This is my root component</div>
    </main>
    \n

    You would then create a new file in app.component.tns.html like this:

    \n
    <StackLayout>
      <Label text=\"This is my root component\"></Label>
    </StackLayout>
    \n

    You can also use platform specific views if desired with the platformSpecific Component metadata:

    \n
    import {Component} from 'nativescript-ng2-cli-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      platformSpecific: true
    })
    export class AppComponent {}
    \n

    Then you could create separate views for iOS and Android:

    \n
      \n
    • app.component.ios.html
      • \n
    • app.component.android.html
      • \n
    \n

    You can learn more about NativeScript view options here.

    \n

    You can also install helpful view snippets for VS Code here or Atom Editor here.

    \n

    You can learn more here about how this setup works and why.

    \n

    Why different Component?

    \n

    Component from nativescript-ng2-cli-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

    \n

    The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

    \n

    You can see more elaborate use cases of this magic with angular2-seed-advanced.

    \n

    Special Note About AoT

    \n

    Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

    \n
    import { Component } from '@angular/core';

    // just comment this out and use Component from 'angular/core'
    // import { Component } from 'nativescript-ng2-cli-magic';

    @Component({
      // etc.
    \n

    After doing the above, running AoT build will succeed. :)

    \n

    The Component from nativescript-ng2-cli-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ng2-cli-magic. Again this temporary inconvenience may be unnecessary in the future.

    \n

    Requirements

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":26,"lastMonth":110}},"nativescript":{"name":"nativescript","version":"8.6.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":2288,"lastWeek":5111,"lastMonth":30133}},"@nstudio/xplat":{"name":"@nstudio/xplat","version":"17.0.1","license":"MIT","readme":"

    Cross-platform (xplat) tools for Nx workspaces

    \n

    \n
    \n

    \"Build\n\"License\"\n\"NPM

    \n
    \n
    \n

    xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

    \n

    Currently supported platforms

    \n
      \n
    • Electron\n
      \n

      Build cross platform desktop apps with JavaScript, HTML, and CSS.

      \n
      \n
      • \n
    • Ionic\n
      \n

      Build amazing apps in one codebase, for any platform, with the web.

      \n
      \n
      • \n
    • NativeScript\n
      \n

      Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

      \n
      \n
      • \n
    \n

    Quickstart

    \n
    npx create-nx-workspace@latest

    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based or integrated? … 
    Integrated:    Nx creates a workspace structure most suitable for building apps.
    \n

    Init workspace

    \n

    Install the @nx/js plugin.

    \n
    npm install @nx/js -D
    \n

    Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install the tools:

    \n
    npm install @nstudio/xplat -D
    \n

    You are now ready to create apps:

    \n
    npx nx g @nstudio/xplat:app
    \n

    Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

    \n

    App generation examples

    \n

    The additional app generators can be used as follows:

    \n

    Electron

    \n

    Electron app generator can use any web app in the workspace as it's target.

    \n

    If you don't have a web app yet, create one first:

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose web

    \n
    \n

    You can now use the web app as the Electron target:

    \n
    npx nx g @nstudio/xplat:app desktop --target=web-sample
    \n
    \n

    choose electron

    \n
    \n

    Develop with:

    \n
    npm run start.electron.desktop
    \n

    Ionic

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose ionic

    \n
    \n

    Develop in browser with:

    \n
    npx nx serve ionic-sample
    \n

    Build Ionic app:

    \n
    npx nx build ionic-sample
    \n

    A. Capacitor iOS - Prepare for development

    \n
    npm run prepare.ionic.sample.ios
    \n

    You can now open in Xcode for further development:

    \n
    npm run open.ionic.sample.ios
    \n

    B. Capacitor Android - Prepare for development

    \n
    npm run prepare.ionic.sample.android
    \n

    You can now open in Android Studio for further development:

    \n
    npm run open.ionic.sample.android
    \n

    NativeScript

    \n
    nx g @nstudio/xplat:app mobile
    \n
    \n

    choose nativescript

    \n
    \n

    A. iOS

    \n
    npx nx run nativescript-mobile:ios
    \n

    B. Android

    \n
    npx nx run nativescript-mobile:android
    \n

    Documentation

    \n\n

    Talks

    \n\n

    Recommended extra tooling

    \n\n

    Example repos for different scenarios

    \n
      \n
    • Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
      • \n
    • Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing
      • \n
    \n

    Context

    \n\n","downloadStats":{"lastDay":246,"lastWeek":2110,"lastMonth":10363}},"@nativescript/nx":{"name":"@nativescript/nx","version":"17.0.0","license":"Apache-2.0","readme":"

    NativeScript Plugin for Nx

    \n

    \n
    \n

    \"License\"\n\"NPM

    \n
    \n
    \n

    Requires at least NativeScript CLI v8.x.x or higher. You can confirm your CLI version by running ns -v.

    \n
    \n

    Table of Contents

    \n\n\n\n\n

    Getting started

    \n

    Create a new Nx workspace

    \n
    # Using npm
    npx create-nx-workspace@latest

    # Using yarn
    yarn create-nx-workspace@latest
    \n

    At the prompts, you can use:

    \n
    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based monorepo, integrated monorepo, or standalone project?
    Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
    \n

    Init workspace

    \n

    Initialize a TypeScript project -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install NativeScript plugin

    \n
    # Using npm
    npm install --save-dev @nativescript/nx

    # Using yarn
    yarn add -D @nativescript/nx
    \n

    Create an app

    \n
    # Using npm
    npx nx g @nativescript/nx:app <app-name> [...options]

    # Using yarn
    yarn nx g @nativescript/nx:app <app-name> [...options]
    \n

    This will generate:

    \n
    apps/nativescript-<app-name>
    \n

    The NativeScript Nx plugin will prefix apps by default to help distinguish them against other apps in your workspace for clarity.

    \n

    --framework [angular|vanilla]

    \n

    You will be prompted to choose a framework when this flag is ommitted.

    \n

    Use this option to explicitly choose a specific frontend framework integration app.

    \n

    This setting will be saved with plugin settings the first time it's used to automatically choose this frontend framework integration for subsequent usages and with other generators without having to specify the flag again.

    \n

    --groupByName

    \n

    If you prefer you can also provide a flag to suffix instead:

    \n
    npx nx g @nativescript/nx:app <app-name> --groupByName
    \n

    This will generate:

    \n
    apps/<app-name>-nativescript
    \n

    Develop on simulators and devices

    \n

    Android:

    \n
    npx nx run <app-name>:android
    \n

    iOS: (Mac only)

    \n
    npx nx run <app-name>:ios
    \n

    Configuration options

    \n

    A custom executor is provided via @nativescript/nx:build with the following options:

    \n
    \"debug\": {
      \"type\": \"boolean\",
      \"default\": true,
      \"description\": \"Use 'ns debug' instead of 'ns run'. Defaults to true\"
    },
    \"device\": {
      \"type\": \"string\",
      \"description\": \"Device identifier to run app on.\",
      \"alias\": \"d\"
    },
    \"emulator\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Explicitly run with an emulator or simulator\"
    },
    \"noHmr\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Disable HMR\"
    },
    \"uglify\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Enable uglify during the webpack build\"
    },
    \"verbose\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Enable verbose logging\"
    },
    \"release\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Enable release mode during build using the --release flag\"
    },
    \"forDevice\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Build in device mode using the --for-device flag\"
    },
    \"production\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"Build in production mode using the --env.production flag\"
    },
    \"copyTo\": {
      \"type\": \"string\",
      \"description\": \"When building, copy the package to this location.\"
    },
    \"provision\": {
      \"type\": \"string\",
      \"description\": \"(iOS Only) When building, use this provision profile name.\"
    },
    \"aab\": {
      \"type\": \"boolean\",
      \"default\": false,
      \"description\": \"(Android Only) When building, create an Android App Bundle (.aab file).\"
    },
    \"keyStorePath\": {
      \"type\": \"string\",
      \"description\": \"(Android Only) When building, use the keystore file at this location.\"
    },
    \"keyStorePassword\": {
      \"type\": \"string\",
      \"description\": \"(Android Only) When building, use this keystore password.\"
    },
    \"keyStoreAlias\": {
      \"type\": \"string\",
      \"description\": \"(Android Only) When building, use this keystore alias.\"
    },
    \"keyStoreAliasPassword\": {
      \"type\": \"string\",
      \"description\": \"(Android Only) When building, use this keystore alias password.\"
    }
    \n

    The options follow the NativeScript command line option flags.

    \n

    Here's an example app config:

    \n
    \"nativescript-mobile\": {
      \"projectType\": \"application\",
      \"sourceRoot\": \"apps/nativescript-mobile/src\",
      \"prefix\": \"\",
      \"targets\": {
        \"build\": {
          \"executor\": \"@nativescript/nx:build\",
          \"options\": {
            \"noHmr\": true,
            \"production\": true,
            \"uglify\": true,
            \"release\": true,
            \"forDevice\": true
          },
          \"configurations\": {
            \"prod\": {
              \"fileReplacements\": [
                {
                  \"replace\": \"./src/environments/environment.ts\",
                  \"with\": \"./src/environments/environment.prod.ts\"
                }
              ]
            }
          }
        },
        \"ios\": {
          \"executor\": \"@nativescript/nx:build\",
          \"options\": {
            \"platform\": \"ios\"
          },
          \"configurations\": {
            \"build\": {
              \"provision\": \"AppStore Profile\",
              \"copyTo\": \"./dist/build.ipa\"
            },
            \"prod\": {
              \"combineWithConfig\": \"build:prod\"
            }
          }
        },
        \"android\": {
          \"executor\": \"@nativescript/nx:build\",
          \"options\": {
            \"platform\": \"android\"
          },
          \"configurations\": {
            \"build\": {
              \"aab\": true,
              \"keyStorePath\": \"./tools/keystore.jks\",
              \"keyStorePassword\": \"your-password\",
              \"keyStoreAlias\": \"keystore-alias\",
              \"keyStoreAliasPassword\": \"keystore-alias-password\",
              \"copyTo\": \"./dist/build.aab\"
            },
            \"prod\": {
              \"combineWithConfig\": \"build:prod\"
            }
          }
        },
        \"test\": {
          \"executor\": \"@nativescript/nx:test\",
          \"outputs\": [\"coverage/apps/nativescript-mobile\"],
          \"options\": {
            \"coverage\": false
          },
          \"configurations\": {
            \"android\": {},
            \"ios\": {}
          }
        },
        \"clean\": {
          \"executor\": \"@nativescript/nx:build\",
          \"options\": {
            \"clean\": true
          }
        }
      }
    }
    \n

    Run with a specific configuration

    \n

    Android:

    \n
    npx nx run <app-name>:android:prod
    \n

    iOS: (Mac only)

    \n
    npx nx run <app-name>:ios:prod
    \n

    Run tests

    \n

    Android:

    \n
    npx nx run <app-name>:test:android
    \n

    iOS: (Mac only)

    \n
    npx nx run <app-name>:test:ios
    \n

    You can generate coverage reports by using the flag with iOS or Android, for example:

    \n
    npx nx run <app-name>:test:ios --coverage
    \n

    You can also set this option in the config, for example:

    \n
    \"test\": {
      \"executor\": \"@nativescript/nx:test\",
      \"outputs\": [\"coverage/apps/nativescript-mobile\"],
      \"options\": {
        \"coverage\": true // can set to always be on for both platforms
      },
      \"configurations\": {
        \"android\": {
          \"coverage\": false // or can override per platform if needed
        },
        \"ios\": {
          \"coverage\": true
        }
      }
    }
    \n

    Create a build

    \n

    Instead of running the app on a simulator or device you can create a build for the purposes of distribution/release. Various release settings will be needed for iOS and Android which can be passed as additional command line arguments. See more in the NativeScript docs here. Any additional cli flags as stated in the docs can be passed on the end of the nx build command that follows.

    \n

    Build with an environment configuration enabled (for example, with prod):

    \n

    Android:

    \n
    npx nx run <app-name>:build:prod --platform=android
    \n

    You can pass additional NativeScript CLI options as flags on the end of you build command.

    \n
      \n
    • example of building AAB bundle for upload to Google Play:
      • \n
    \n
    npx nx run <app-name>:build:prod --platform=android \\
      --aab \\
      --key-store-path=<path-to-your-keystore> \\
      --key-store-password=<your-key-store-password> \\
      --key-store-alias=<your-alias-name> \\
      --key-store-alias-password=<your-alias-password> \\
      --copyTo=./dist/build.aab
    \n

    iOS: (Mac only)

    \n
    npx nx run <app-name>:build:prod --platform=ios
    \n

    As mentioned, you can pass any additional NativeScript CLI options as flags on the end of your nx build command:

    \n
      \n
    • example of building IPA for upload to iOS TestFlight:
      • \n
    \n
    npx nx run <app-name>:build:prod --platform=ios \\
      --provision <provisioning-profile-name> \\
      --copy-to ./dist/build.ipa
    \n

    Clean

    \n

    It can be helpful to clean the app at times. This will clear out old dependencies plus iOS/Android platform files to give your app a nice reset.

    \n
    npx nx run <app-name>:clean
    \n

    Create NativeScript library

    \n

    You can create a library of NativeScript components or plugins or whatever you'd like.

    \n
    npx nx g @nativescript/nx:library buttons
    \n

    This will generate a nativescript-buttons library where you could build out an entire suite of button behaviors and styles for your NativeScript apps.

    \n
    import { PrimaryButton } from '@myorg/nativescript-buttons';
    \n

    The NativeScript Nx plugin will prefix libraries by default to help distinguish them against other apps and libraries in your workspace for clarity.

    \n

    --groupByName

    \n

    If you prefer you can also provide a flag to suffix instead:

    \n
    npx nx g @nativescript/nx:library buttons --groupByName
    \n

    Which would generate a buttons-nativescript library.

    \n
    import { PrimaryButton } from '@myorg/buttons-nativescript';
    \n

    Using NativeScript plugins

    \n

    NativeScript plugins can be used in Nx workspaces in one of the two following methods:

    \n

    Installing NativeScript plugins at app-level

    \n

    If the plugin is needed by one app only, and not others, you can install it for the specific app:

    \n
    cd apps/<app-name>
    npm install <plugin-name>
    \n

    Installing NativeScript plugins at workspace-level

    \n

    Alternatively, you can install the plugins at the workspace (root), so it is accesible to all your workspace apps:

    \n
    npm install --save <plugin-name>
    \n

    Known issues

    \n

    If a plugin contains platforms folder with native includes, the plugin must be added to app package.json at moment. https://github.com/NativeScript/nx/issues/17#issuecomment-841680719

    \n","downloadStats":{"lastDay":167,"lastWeek":1694,"lastMonth":7985}},"@global66/nativescript-urlhandler":{"name":"@global66/nativescript-urlhandler","version":"1.0.0","license":"MIT","readme":"

    NativeScript URL Handler Plugin \"apple\" \"android\"

    \n

    \"Greenkeeper\n\"Build\n\"Donate

    \n

    \"npm\"Maintainability\"

    \n

    \"NPM\"

    \n

    \n
    \n

    Feel free to donate

    \n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

    \"Bitcoin\"

    \n

    Also via greenaddress

    \n
    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    @Component({
      selector: \"gr-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
        } 
        
        ngOnInit(){
            handleOpenURL((appURL: AppURL) => {
                console.log('Got the following appURL', appURL);
            });
         }
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

    handleOpenURL(function(appURL) {
      console.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    handleOpenURL((appURL: AppURL) => {
      console.log('Got the following appURL', appURL);
    });
    \n
    \n

    Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

    \n
    \n

    Installation

    \n
    $ tns plugin add nativescript-urlhandler
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add nativescript-urlhandler@next
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" /> 
        <action android:name=\"android.intent.action.VIEW\" /> 
        <category android:name=\"android.intent.category.DEFAULT\" /> 
        <category android:name=\"android.intent.category.BROWSABLE\" /> 
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" /> 
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
    \n

    FAQ

    \n

    Callback handling

    \n

    The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    \n
        No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
    \n

    Webpack

    \n

    TypeScript Config

    \n

    If your Webpack Build is failing, try adapting your tsconfig to this:

    \n
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"emitDecoratorMetadata\": true,
            \"noEmitHelpers\": true,
            \"noEmitOnError\": true,
            \"lib\": [
                \"es6\",
                \"dom\",
                \"es2015.iterable\"
            ],
            \"baseUrl\": \".\",
            \"paths\": {
                \"*\": [
                    \"./node_modules/tns-core-modules/*\",
                    \"./node_modules/*\"
                ]
            }
        },
        \"exclude\": [
            \"node_modules\",
            \"platforms\",
            \"**/*.aot.ts\"
        ]
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":26}},"@nativescript-community/arraybuffers":{"name":"@nativescript-community/arraybuffers","version":"1.1.3","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/arraybuffers

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Utility methods to work with Array Buffers in Nativescript
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/arraybuffers

    \n

    \n

    API

    \n

    This is a simple Array Buffers helpers for Nativescript to use optimized arrays on Android\nIt exposes a few methods:

    \n
    type FloatArray = Float32Array | Float64Array | Uint8Array;
    type TypedArray = FloatArray | Uint8Array;
    function createArrayBuffer(length: number, useInts?: boolean): TypedArray;
    function createNativeArray(length: number, useInts?: boolean): number[];
    function pointsFromBuffer(typedArray: TypedArray, useInts?: boolean, canReturnBuffer?: boolean): number[] | TypedArray;
    function arrayToNativeArray(array, useInts?: boolean, canReturnBuffer?: boolean): number[];
    function nativeArrayToArray(array): number[];
    function supportsDirectArrayBuffers(): boolean;
    \n","downloadStats":{"lastDay":73,"lastWeek":396,"lastMonth":1693}},"@nativescript-community/perms":{"name":"@nativescript-community/perms","version":"2.3.0","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/perms

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n An unified permissions API for NativeScript on iOS and Android.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/perms

    \n

    \n

    API

    \n

    Permissions statuses

    \n

    Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Return valueNotes
    authorizedUser has authorized this permission
    deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
    limitediOS - this means the permission is granted but with limitations
    restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
    undeterminedUser has not yet been prompted with a permission dialog
    \n

    Supported permissions types

    \n

    The current supported permissions are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeiOSAndroid
    Locationlocation✔✔
    Cameracamera✔✔
    Microphonemicrophone✔✔
    Photosphoto✔✔
    Videosvideo❌✔ (api >= 33)
    Audioaudio❌✔ (api >= 33)
    Contactscontacts✔✔
    Eventsevent✔✔
    Bluetoothbluetooth✔✔(api >= 31)
    Remindersreminder✔❌
    Push Notificationsnotification✔❌
    Background RefreshbackgroundRefresh✔❌
    Speech RecognitionspeechRecognition✔❌
    Media LibrarymediaLibrary✔❌
    Motion Activitymotion✔❌
    Storagestorage❌️✔
    Phone CallcallPhone❌️✔
    Read SMSreadSms❌️✔
    Receive SMSreceiveSms❌️✔
    Media LocationmediaLocation❌️✔(api >= 29)
    Bluetooth ScanbluetoothScan❌️✔(api >= 31)
    Bluetooth ConnectbluetoothConnect❌️✔(api >= 31)
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method NameArgumentsNotes
    check()type- Returns a promise with the permission status. See iOS Notes for special cases
    request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
    checkMultiple(){[key:string]:Record<string, any>}- Accepts an array of permission types and returns a promise with an object mapping permission types to statuses
    getTypes()none- Returns an array of valid permission types
    openSettings()none- Switches the user to the settings page of your app
    canOpenSettings()none- Returns a boolean indicating if the device supports switching to the settings page
    \n

    iOS Notes

    \n
      \n
    • Permission type bluetooth represents the status of the\nCBPeripheralManager. Don't use this if only need CBCentralManager
      • \n
    • Permission type location accepts a second parameter for request() and\ncheck(); the second parameter is a string, either always or whenInUse\n(default).
      • \n
    • Permission type notification accepts a second parameter for request(). The\nsecond parameter is an array with the desired alert types. Any combination of\nalert, badge and sound (default requests all three).
      • \n
    • iOS 12+: The second parameter also takes this type inside of the array providesAppNotificationSettings.
      • \n
    • If you are not requesting mediaLibrary then you can remove MediaPlayer.framework from the xcode project
      • \n
    \n
    import { check as checkPermission, request as requestPermission } from '@nativescript-community/perms';

    // example
    checkPermission('location', { type: 'always' }).then(response => {
      this.setState({ locationPermission: response[0] })
    })

    requestPermission('location', { type: 'always' }).then(response => {
      this.setState({ locationPermission: response[0] })
    })

    requestPermission('notification', { type: ['alert', 'badge'] }).then(
      response => {
        this.setState({ notificationPermission: response[0] })
      },
    )
    \n
      \n
    • You cannot request microphone permissions on the simulator.
      • \n
    • With Xcode 8, you now need to add usage descriptions for each permission you\nwill request. Open Xcode ➜ Info.plist ➜ Add a key (starting with "Privacy -\n...") with your kit specific permission.
      • \n
    \n

    Example: If you need Contacts permission you have to add the key Privacy - Contacts Usage Description.

    \n\"3cde3b44-7ffd-11e6-918b-63888e33f983\"\n

    App Store submission disclaimer

    \n

    If you need to submit you application to the AppStore, you need to add to your\nInfo.plist all *UsageDescription keys with a string value explaining to the\nuser how the app uses this data. Even if you don't use them.

    \n

    So before submitting your app to the App Store, make sure that in your\nInfo.plist you have the following keys:

    \n
    <key>NSBluetoothPeripheralUsageDescription</key>
    <string>Some description</string>
    <key>NSCalendarsUsageDescription</key>
    <string>Some description</string>
    <key>NSCameraUsageDescription</key>
    <string>Some description</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Some description</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>Some description</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Some description</string>
    <key>NSSpeechRecognitionUsageDescription</key>
    <string>Some description</string>
    <key>NSAppleMusicUsageDescription</key>
    <string>Some description</string>
    <key>NSMotionUsageDescription</key>
    <string>Some description</string>
    \n

    This is required because during the phase of processing in the App Store\nsubmission, the system detects that you app contains code to request the\npermission X but don't have the UsageDescription key and then it rejects the\nbuild.

    \n
    \n

    Please note that it will only be shown to the users the usage descriptions of\nthe permissions you really require in your app.

    \n
    \n

    You can find more information about this issue in #46.

    \n

    Android Notes

    \n
      \n
    • \n

      check and request also allows you to directly pass android permission(s) as a value or an array. This would allow to request any new permission without a required update of this plugin

      \n
      • \n
    • \n

      All required permissions also need to be included in the AndroidManifest.xml\nfile before they can be requested. Otherwise request() will immediately\nreturn denied.

      \n
      • \n
    • \n

      You can request write access to any of these types by also including the\nappropriate write permission in the AndroidManifest.xml file. Read more\nhere.

      \n
      • \n
    • \n

      Permissions are automatically accepted for targetSdkVersion < 23 but you\ncan still use check() to check if the user has disabled them from Settings.

      \n
      • \n
    \n

    You might need to elevate the targetSdkVersion version in your\nbuild.gradle:

    \n
    android {
      compileSdkVersion 23 // ← set at least 23
      buildToolsVersion \"23.0.1\"  // ← set at least 23.0.0

      defaultConfig {
        minSdkVersion 16
        targetSdkVersion 23 // ← set at least 23
        // ...
    \n

    \n

    Troubleshooting

    \n

    Q: iOS - App crashes as soon as I request permission

    \n
    \n

    A: Starting with Xcode 8, you need to add permission descriptions. See iOS\nnotes for more details. Thanks to @jesperlndk\nfor discovering this.

    \n
    \n

    Q: iOS - App crashes when I change permission from settings

    \n
    \n

    A: This is normal. iOS restarts your app when your privacy settings change.\nJust google "iOS crash permission change"

    \n
    \n","downloadStats":{"lastDay":287,"lastWeek":2608,"lastMonth":11497}},"@nstudio/nativescript-angular":{"name":"@nstudio/nativescript-angular","version":"17.0.1","license":"MIT","readme":"

    Cross-platform (xplat) tools for Nx workspaces

    \n

    \n
    \n

    \"Build\n\"License\"\n\"NPM

    \n
    \n
    \n

    xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

    \n

    Currently supported platforms

    \n
      \n
    • Electron\n
      \n

      Build cross platform desktop apps with JavaScript, HTML, and CSS.

      \n
      \n
      • \n
    • Ionic\n
      \n

      Build amazing apps in one codebase, for any platform, with the web.

      \n
      \n
      • \n
    • NativeScript\n
      \n

      Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

      \n
      \n
      • \n
    \n

    Quickstart

    \n
    npx create-nx-workspace@latest

    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based or integrated? … 
    Integrated:    Nx creates a workspace structure most suitable for building apps.
    \n

    Init workspace

    \n

    Install the @nx/js plugin.

    \n
    npm install @nx/js -D
    \n

    Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install the tools:

    \n
    npm install @nstudio/xplat -D
    \n

    You are now ready to create apps:

    \n
    npx nx g @nstudio/xplat:app
    \n

    Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

    \n

    App generation examples

    \n

    The additional app generators can be used as follows:

    \n

    Electron

    \n

    Electron app generator can use any web app in the workspace as it's target.

    \n

    If you don't have a web app yet, create one first:

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose web

    \n
    \n

    You can now use the web app as the Electron target:

    \n
    npx nx g @nstudio/xplat:app desktop --target=web-sample
    \n
    \n

    choose electron

    \n
    \n

    Develop with:

    \n
    npm run start.electron.desktop
    \n

    Ionic

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose ionic

    \n
    \n

    Develop in browser with:

    \n
    npx nx serve ionic-sample
    \n

    Build Ionic app:

    \n
    npx nx build ionic-sample
    \n

    A. Capacitor iOS - Prepare for development

    \n
    npm run prepare.ionic.sample.ios
    \n

    You can now open in Xcode for further development:

    \n
    npm run open.ionic.sample.ios
    \n

    B. Capacitor Android - Prepare for development

    \n
    npm run prepare.ionic.sample.android
    \n

    You can now open in Android Studio for further development:

    \n
    npm run open.ionic.sample.android
    \n

    NativeScript

    \n
    nx g @nstudio/xplat:app mobile
    \n
    \n

    choose nativescript

    \n
    \n

    A. iOS

    \n
    npx nx run nativescript-mobile:ios
    \n

    B. Android

    \n
    npx nx run nativescript-mobile:android
    \n

    Documentation

    \n\n

    Talks

    \n\n

    Recommended extra tooling

    \n\n

    Example repos for different scenarios

    \n
      \n
    • Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
      • \n
    • Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing
      • \n
    \n

    Context

    \n\n","downloadStats":{"lastDay":70,"lastWeek":1317,"lastMonth":6857}},"@nativescript-community/ui-canvas":{"name":"@nativescript-community/ui-canvas","version":"4.6.7","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-canvas

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Implement Canvas into your NativeScript apps.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-canvas

    \n

    Usage

    \n

    The nativescript Canvas is based on the Android Canvas class.\nThe android API is actually a direct subclass with some Additions

    \n

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:cv="@nativescript-community/ui-canvas" on the Page element

    \n

    XML

    \n
    <Page xmlns:cv=\"@nativescript-community/ui-canvas\">
        <StackLayout horizontalAlignment=\"center\">
            <cv:CanvasView width=\"100\" height=\"100\" draw=\"draw\"/>
       </StackLayout>
    </Page>
    \n

    \n

    NativeScript + Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { CanvasView } from '@nativescript-community/ui-canvas';
    registerElement('CanvasView', () => CanvasView);
    \n
    <CanvasView width=\"100\" height=\"100\" (draw)=\"draw($event)></CanvasView>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import CanvasPlugin from '@nativescript-community/ui-canvas/vue';

    Vue.use(CanvasPlugin);
    \n
    <CanvasView  width=\"100\" height=\"100\" @draw=\"draw\"/>
    \n

    \n

    Draw Method

    \n
    function draw(event: { canvas: Canvas }) {
        const paint = new Paint();
        paint.setColor(new Color('black'));
        paint.strokeWidth = 10;
        canvas.drawRect(createRect(0, 0, 200, 100), paint);
    }
    \n

    Examples:

    \n
      \n
    • Simple\n
        \n
      • A basic example
        • \n
      \n
      • \n
    • Image\n
        \n
      • An example drawing an image
        • \n
      \n
      • \n
    • Shapes\n
        \n
      • An example drawing shapes using template
        • \n
      \n
      • \n
    • Animation\n
        \n
      • An example of animating a shape
        • \n
      \n
      • \n
    • Complex\n
        \n
      • An example of animating a shape
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":72,"lastWeek":632,"lastMonth":3339}},"@nativescript-community/text":{"name":"@nativescript-community/text","version":"1.5.33","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/text
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Usage

    \n

    For now this plugin only brings "shared" property for other plugins using verticalTextAlignment

    \n","downloadStats":{"lastDay":69,"lastWeek":1004,"lastMonth":5404}},"@nativescript-community/ui-collectionview":{"name":"@nativescript-community/ui-collectionview","version":"5.3.2","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-collectionview

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-collectionview

    \n

    \n

    API

    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    itemLoadingTriggered when generating an item in the CollectionView.
    itemTapTriggered when the user taps on an item in the CollectionView.
    loadMoreItemsTriggered when the generated items reached the end of the items property.
    scrollTriggered on collectionview scroll.
    scrollEndTriggered on collectionview scroll end.
    itemReorderStartingTriggered when a reorder is starting. Changing the returnValue of the event data allows you to cancel it
    itemReorderStartedTriggered when a reorder started.
    itemReorderedTriggered when a reorder finished.
    dataPopulatedTriggered when a refresh has been called.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    iosUICollectionViewGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.
    androidandroid.support.v7.widget.RecyclerViewGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
    itemsarray or ItemsSourceGets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method.
    itemTemplatestringGets or sets the item template of the CollectionView.
    rowHeightPercentLengthGets or sets the height for every row in the CollectionView.
    colWidthPercentLengthGets or sets the width for every column in the CollectionView.
    spanSizefunctionTriggered when an item is loaded. Returns the number of columns that the element should occupy taking into account colWidth when the device is vertical and rowHeight when horizontal. Parameters: (item, index: number).
    scrollOffsetnumberGets the current scroll.
    orientationvertical or horizontalSets the orientation of the CollectionView. Defaults to vertical.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    refresh()voidForces the CollectionView to reload all its items.
    refreshVisibleItem()voidForces CollectionView to reload visible items.
    scrollToIndex(index: number, animated: boolean = true)voidScrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated.
    isItemAtIndexVisible(index: number)booleanReturns a boolean indicating whether the item is visible.
    \n

    \n

    Usage

    \n

    You need to add xmlns:gv="@nativescript-community/ui-collectionview" to your page tag, and then simply use <gv:CollectionView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

    \n

    Simple Example

    \n

    Create a simple array of objects in your JS/TS file.

    \n
    const items = [
        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
        { index: 1, name: 'EMERALD', color: '#2ecc71' },
        { index: 2, name: 'PETER RIVER', color: '#3498db' },
        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
        { index: 5, name: 'GREEN SEA', color: '#16a085' },
        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
    ];
    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" loaded=\"pageLoaded\">
        <GridLayout>
            <gv:CollectionView items=\"items\" colWidth=\"50%\" rowHeight=\"100\">
                <gv:CollectionView.itemTemplate>
                    <Label text=\"value\" verticalAlignment=\"center\"/>
                </gv:CollectionView.itemTemplate>
            </gv:CollectionView>
        </GridLayout>
    </Page>
    \n

    Templates Example

    \n

    You can also have multiple templates the same way you add them in the builtin ListView control:

    \n
    <gv:CollectionView id=\"gv\" row=\"0\" class=\"cssClass\" items=\"items\" 
                    colWidth=\"colWidth\" rowHeight=\"rowHeight\" itemTemplateSelector=\"templateSelector\"
                    itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
        <gv:CollectionView.itemTemplates>
            <template key=\"odd\">
                <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                    <Label text=\"value\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>

            <template key=\"even\">
                <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                    <Label row=\"0\" text=\"value\" verticalAlignment=\"center\"/>
                    <Label row=\"1\" text=\"value\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>
        </gv:CollectionView.itemTemplates>
    </gv:CollectionView>
    \n
    export function templateSelector(item: any, index: number, items: any) {
        return index % 2 === 0 ? \"even\" : \"odd\";
    }
    \n

    \n

    Usage in Angular

    \n

    Import the module into your project.

    \n
    import { CollectionViewModule } from '@nativescript-community/ui-collectionview/angular';

    @NgModule({
        imports: [
            CollectionViewModule,
        ],
    })
    \n

    Simple Example

    \n

    Create a simple array of objects in your Typescript file.

    \n
    items = [
        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
        { index: 1, name: 'EMERALD', color: '#2ecc71' },
        { index: 2, name: 'PETER RIVER', color: '#3498db' },
        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
        { index: 5, name: 'GREEN SEA', color: '#16a085' },
        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
    ];
    \n

    Add the following to your component HTML.

    \n
    <CollectionView [items]=\"items\" colWidth=\"50%\" rowHeight=\"100\">
        <ng-template let-item=\"item\">
            <Label [text]=\"item.name\"></Label>
        </ng-template>
    </CollectionView>
    \n

    Templates Example

    \n

    If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control. The only difference is that due to current limitations instead of using the nsTemplateKey directive you need to use the cvTemplateKey directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the CollectionView as well)

    \n
    <CollectionView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
        <ng-template cvTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>
    </CollectionView>
    \n

    For a more complete example, look in the demo-ng directory.

    \n

    \n

    Usage in Vue 3

    \n

    Register the plugin in your app.ts.

    \n
    import CollectionView from '@nativescript-community/ui-collectionview/vue3';

    const app = createApp(YourComponent);
    app.use(CollectionView);
    app.start();
    \n

    Simple Example

    \n

    In your component, add the following to make a simple array of objects.

    \n
    <script setup lang=\"ts\">
    import { ObservableArray } from '@nativescript/core';
    import { ref } from \"nativescript-vue\";

    const itemList = ref(new ObservableArray([
        { name: 'TURQUOISE', color: '#1abc9c' },
        { name: 'EMERALD', color: '#2ecc71' },
        { name: 'PETER RIVER', color: '#3498db' },
        { name: 'AMETHYST', color: '#9b59b6' },
        { name: 'WET ASPHALT', color: '#34495e' }
    ]));
    </script>
    \n

    Then add the following XML to your component.

    \n
    <CollectionView :items=\"itemList\" colWidth=\"50%\" rowHeight=\"100\">
         <template #default=\"{ item }\">
            <StackLayout :backgroundColor=\"item.color\" >
                <Label :text=\"item.name\"/>
            </StackLayout>
        </template>
    </CollectionView>
    \n

    For a more complete example, look in the demo-vue3 and demo-snippets/vue3 directory.

    \n

    \n

    Usage in Vue 2

    \n

    Register the plugin in your app.ts.

    \n
    import CollectionView from '@nativescript-community/ui-collectionview/vue';
    Vue.use(CollectionView);
    \n

    Simple Example

    \n

    In your component, add the following to make a simple array of objects.

    \n
    export default {
        // ...
        data() {
            const items = [
                { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
                { index: 1, name: 'EMERALD', color: '#2ecc71' },
                { index: 2, name: 'PETER RIVER', color: '#3498db' },
                { index: 3, name: 'AMETHYST', color: '#9b59b6' },
                { index: 4, name: 'WET ASPHALT', color: '#34495e' },
                { index: 5, name: 'GREEN SEA', color: '#16a085' },
                { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
                { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
                { index: 8, name: 'WISTERIA', color: '#8e44ad' },
                { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
            ];
            return {
                itemList: items
            };
        },
        // ...
    };
    \n

    Then add the following XML to your component.

    \n
    <CollectionView
        :items=\"itemList\"
        colWidth=\"50%\"
        rowHeight=\"100\"
    >
        <v-template>
            <Label :text=\"item.name\"></Label>
        </v-template>
    </CollectionView>
    \n

    For a more complete example, look in the demo-vue directory.

    \n

    \n

    Usage in Svelte

    \n

    Register the plugin in your app.ts.

    \n
    import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
    CollectionViewElement.register();
    \n

    Simple Example

    \n

    In you component, add the following to import Svelte Templates and to create a simple array of objects.

    \n
    import { Template } from 'svelte-native/components';

    const items = [
        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
        { index: 1, name: 'EMERALD', color: '#2ecc71' },
        { index: 2, name: 'PETER RIVER', color: '#3498db' },
        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
        { index: 5, name: 'GREEN SEA', color: '#16a085' },
        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
    ];
    \n

    Then add the following XML to your component:

    \n
    <collectionView 
        {items} 
        colWidth=\"50%\"
        rowHeight=\"100\"
    >
        <Template let:item>
            <label text=\"{item.name}\" />
        </Template>
    </collectionView>
    \n

    For a more complete example, look in the demo-svelte directory.

    \n

    \n

    Usage in React

    \n

    Register the plugin in your app.ts.

    \n
    import { registerCollectionView } from '@nativescript-community/ui-collectionview/react';
    registerCollectionView();
    \n

    Simple Example

    \n

    In your component, add the following code to create a simple list.

    \n
    import { CollectionView } from '@nativescript-community/ui-collectionview/react';

    const items = [
        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
        { index: 1, name: 'EMERALD', color: '#2ecc71' },
        { index: 2, name: 'PETER RIVER', color: '#3498db' },
        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
        { index: 5, name: 'GREEN SEA', color: '#16a085' },
        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
    ];

    interface Item {
        index: number;
        name: string;
        color: string;
    }

    const cellFactory = (item: Item) => (
        <label text={item.name} />
    );

    export function First() {
        return (
            <CollectionView items={items} colWidth=\"50%\" rowHeight=\"100\" cellFactory={cellFactory} width=\"100%\" height=\"100%\" />
        );
    }
    \n

    For a more complete example, look in the demo-react directory.

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-collectionview
    $ cd ui-collectionview
    $ npm i
    $ npm run setup
    $ npm run build # && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":28,"lastWeek":295,"lastMonth":2456}},"@nstudio/nativescript":{"name":"@nstudio/nativescript","version":"17.0.1","license":"MIT","readme":"

    Cross-platform (xplat) tools for Nx workspaces

    \n

    \n
    \n

    \"Build\n\"License\"\n\"NPM

    \n
    \n
    \n

    xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

    \n

    Currently supported platforms

    \n
      \n
    • Electron\n
      \n

      Build cross platform desktop apps with JavaScript, HTML, and CSS.

      \n
      \n
      • \n
    • Ionic\n
      \n

      Build amazing apps in one codebase, for any platform, with the web.

      \n
      \n
      • \n
    • NativeScript\n
      \n

      Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

      \n
      \n
      • \n
    \n

    Quickstart

    \n
    npx create-nx-workspace@latest

    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based or integrated? … 
    Integrated:    Nx creates a workspace structure most suitable for building apps.
    \n

    Init workspace

    \n

    Install the @nx/js plugin.

    \n
    npm install @nx/js -D
    \n

    Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install the tools:

    \n
    npm install @nstudio/xplat -D
    \n

    You are now ready to create apps:

    \n
    npx nx g @nstudio/xplat:app
    \n

    Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

    \n

    App generation examples

    \n

    The additional app generators can be used as follows:

    \n

    Electron

    \n

    Electron app generator can use any web app in the workspace as it's target.

    \n

    If you don't have a web app yet, create one first:

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose web

    \n
    \n

    You can now use the web app as the Electron target:

    \n
    npx nx g @nstudio/xplat:app desktop --target=web-sample
    \n
    \n

    choose electron

    \n
    \n

    Develop with:

    \n
    npm run start.electron.desktop
    \n

    Ionic

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose ionic

    \n
    \n

    Develop in browser with:

    \n
    npx nx serve ionic-sample
    \n

    Build Ionic app:

    \n
    npx nx build ionic-sample
    \n

    A. Capacitor iOS - Prepare for development

    \n
    npm run prepare.ionic.sample.ios
    \n

    You can now open in Xcode for further development:

    \n
    npm run open.ionic.sample.ios
    \n

    B. Capacitor Android - Prepare for development

    \n
    npm run prepare.ionic.sample.android
    \n

    You can now open in Android Studio for further development:

    \n
    npm run open.ionic.sample.android
    \n

    NativeScript

    \n
    nx g @nstudio/xplat:app mobile
    \n
    \n

    choose nativescript

    \n
    \n

    A. iOS

    \n
    npx nx run nativescript-mobile:ios
    \n

    B. Android

    \n
    npx nx run nativescript-mobile:android
    \n

    Documentation

    \n\n

    Talks

    \n\n

    Recommended extra tooling

    \n\n

    Example repos for different scenarios

    \n
      \n
    • Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
      • \n
    • Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing
      • \n
    \n

    Context

    \n\n","downloadStats":{"lastDay":84,"lastWeek":1348,"lastMonth":6909}},"nativescript-spotify-auth":{"name":"nativescript-spotify-auth","version":"2.0.6","license":"MIT","readme":"

    Demo

    \n

    App: https://7jpsan.github.io/spotify-auth-demo/\nRepo: https://github.com/7jpsan/spotify-auth-demo/

    \n

    Spotify Auth - Angular 5

    \n

    This is a simple library that handles the authentication workflow for an angular 5 application interacting with angular api in a JS only environment, no backend service is required!

    \n

    Features (v2+):

    \n
      \n
    • An auth library for spotify api v1 and angular 5
      • \n
    • A demo application that exemplifies the use.
      • \n
    \n

    Coming next:

    \n
      \n
    • Handle token expiration / invalidity
      • \n
    • Handle session persistence
      • \n
    \n

    Difference of this fork

    \n

    This is a fork/implementation of https://github.com/cyrilletuzi/angular-quickstart-lib which was forked from https://github.com/filipesilva/angular-quickstart-lib go ahead and read their work, it is awesome!

    \n

    Gotchas

    \n

    After a lot of time, using the @angular/router and/or RouterModule in a library is quite complicated... I have decided to remove it and expose the mechanisms to the consumer app.

    \n

    Requirements

    \n

    Make sure you have at least Node 6.9 and NPM 3.0 installed.

    \n

    Install

    \n

    npm install spotify-auth

    \n

    Usage

    \n
      \n
    • \n

      Inherit the http Interceptor spotify-auth.interceptor.ts

      \n
      import { Injectable } from  '@angular/core';
      import  'rxjs/add/operator/do'; //Required, yes!
      import { TokenService, SpotifyAuthInterceptor } from  'spotify-auth';

      @Injectable()
      export  class  SpotifyAuthInterceptor2  extends  SpotifyAuthInterceptor {
      \t
      \tdoOnError(err:  any):  void {}
      \t
      \tconstructor(tokenSvc:  TokenService) {
      \t\tsuper(tokenSvc);
      \t}
      }
      \n
      • \n
    • \n

      Listen for the authService.authorizedStream and route accordingly. When the login is complete, the stream will emit a true value, which means everything is ok (it hit the authorized url with the right stuff, you should now go to a route you have defined in your router module.

      \n

      app.component.ts

      \n
      import { Component, OnInit } from  '@angular/core';
      import { AuthService, ScopesBuilder, AuthConfig, TokenService } from  'spotify-auth';
      ...
      constructor(
      \tprivate  infoSvc:  InfoService,
      \tprivate  tokenSvc:  TokenService,
      \tprivate  authService:  AuthService,
      \tprivate  router:  Router
      ) {}

      ngOnInit():  void {
      \tthis.authService.authorizedStream.pipe(filter(x  =>  x)).subscribe(() => {
      \t\tthis.router.navigate(['user']);\t
      \t});
      }
      ...
      \n
      • \n
    • \n

      Create an authorize/login method that uses the module:\nlogin.component.ts

      \n
      \timport { Component, OnInit } from  '@angular/core';
      \timport { AuthService, ScopesBuilder, AuthConfig } from 'spotify-auth';
      \t...
      \t@Component({...});
      \texport class SomeClass(){
      \t\tconstructor(
      \t\t\tprivate  authService:  AuthService,
      \t\t\tprivate  tokenSvc:  TokenService,
      \t\t\tprivate  router:  Router) { }
      \t\t...
      \t\tpublic  login():  void {
      \t\t\tconst scopes = new ScopesBuilder()/* .withScopes(ScopesBuilder.LIBRARY) */.build();
      \t\t\t\tconst ac:  AuthConfig  = {
      \t\t\t\t\t// WebPortal App Id. Your application id from spotify
      \t\t\t\t\tclient_id:  \"3af5f43840144db2a5ef883b56c5fb7e\", 
      \t\t\t\t\tresponse_type:  \"token\",
      \t\t\t\t\t// Whitelisted URL, must end with the authozed path for the magic to happen.
      \t\t\t\t\t//i.e:(http://your-domain/yourapp/authorized Or http://localhost:4200/authorized)
      \t\t\t\t\tredirect_uri:  \"http://7jpsan.github.io/spotify-auth-demo/authorized\", 
      \t\t\t\t\tstate:  \"\",
      \t\t\t\t\tshow_dialog:  true,
      \t\t\t\t\tscope:  scopes
      \t\t\t\t};
      \t\t\t\tthis.authService.configure(ac).authorize(); // Magic happens here
      \t\t}
      \t}
      \n
      • \n
    • \n

      app.module.ts and/or app-routing.module.ts :

      \n
      \timport { NgModule, Injectable } from  '@angular/core';
      \t...
      \timport { SpotifyAuthModule } from  'spotify-auth';
      \timport { SpotifyAuthInterceptor2 } from  './spotify-auth.interceptor';

          const  routes:  Routes  = [

      {
      \tpath:  '',
      \tredirectTo:  'user',
      \tpathMatch:  'full'
      },
      {
      \tpath:  'user',
      \tcomponent:  UserComponent
      },
      ...,
      \tSpotifyAuthModule.authRoutes()[0] //(Static guarded route with component)
      ];
      NgModule({
      \timports: [
      \tBrowserModule,
      \tHttpClientModule,
      \tHttpModule,
      \tSpotifyAuthModule.forRoot(),  //forRoot!!!!
      \tRouterModule.forRoot(routes),
      \t],
      \tdeclarations: [ AppComponent, UserComponent, LoginComponent, AlbumsComponent ],
      \tbootstrap: [ AppComponent ],
      \texports: [],
      \tproviders: [
      \t\t\tInfoService,
      \t\t\t{
      \t\t\t\tprovide:  HTTP_INTERCEPTORS,
      \t\t\t\t//Force interception to use your new shiny headers!
      \t\t\t\tuseClass:  SpotifyAuthInterceptor2,
      \t\t\t\tmulti:  true
      \t\t\t}
      \t\t]
      \t})
      export  class  AppModule {}
      \n
      • \n
    \n

    That is it! The code should take care of the rest for you. Enjoy! There is a demo app here https://github.com/7jpsan/spotify-auth-demo.\nIgnore the one present in this repo. It was split, but never removed. Self TODO :)

    \n

    If anything goes wrong, please raise an issue!

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":9}},"ngx-cc-template":{"name":"ngx-cc-template","version":"1.0.4","license":"MIT","readme":"

    ngx-cc-template

    \n

    \"Build

    \n

    ngx-cc-template is an Angular module for generating forms in your application.

    \n

    Work still in progress - help will be appreciated. :)

    \n

    Features

    \n
      \n
    • generates correct angular form based on provided settings
      • \n
    • ...
      • \n
    \n

    Installation

    \n
    npm install --save-dev ngx-cc-template\n
    \n

    Usage

    \n
    <ngx-cc-template [settings]="settings" (onSubmit)="onSubmit($event)"></ngx-cc-template>\n
    \n

    Where settings look like:

    \n
    settings = {\n  inputs: {\n    field: {\n      label: 'Field',\n      type: 'text',\n    },\n  },\n}\n
    \n

    and onSubmit:

    \n
    onSubmit(form) {\n  this.items.push(form);\n}\n
    \n

    Future features

    \n
      \n
    • custom classes
      • \n
    • custom buttons
      • \n
    • generating forms based on passed model
      • \n
    \n

    TODOs

    \n
      \n
    • Docs
      • \n
    • Ghpages - better example site
      • \n
    • E2E tests - protractor
      • \n
    \n

    Thanks to

    \n

    Thanks to Ly Tran,\nI used this repo as a point of start to create an angular2+ module.

    \n

    Credits

    \n

    Crossbrowser testing sponsored by Browser Stack\n\"Browser

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":19}},"@nativescript-community/ui-image":{"name":"@nativescript-community/ui-image","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-image

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-image

    \n

    \n

    setup

    \n
    import imageModule = require(\"@nativescript-community/ui-image\");

    //do this before creating any image view
    imageModule.initialize({ isDownsampleEnabled: true });
    \n

    \n

    API

    \n

    Events

    \n

    finalImageSet - arguments FinalEventData

    \n

    This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

    \n
    <@nativescript-community/ui-image:Img finalImageSet=\"onFinalImageSet\"/>
    \n

    JavaScript:

    \n
    function onFinalImageSet(args) {
        var imageModuleEventData = args;
        var img = imageModuleEventData.object;
    }
    exports.onFinalImageSet = onFinalImageSet;
    \n

    TypeScript:

    \n
    import {Img, FinalEventData } from \"@nativescript-community/ui-image\";

    export function onFinalImageSet(args: FinalEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • failure - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the final image failed.

    \n
    <@nativescript-community/ui-image:Img failure=\"onFailure\"/>
    \n

    JavaScript:

    \n
    function onFailure(args) {
        var img = args.object;
    }
    exports.onFailure = onFailure;
    \n

    TypeScript:

    \n
    import {Img, FailureEventData } from \"@nativescript-community/ui-image\";

    export function onFailure(args: FailureEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • intermediateImageSet - arguments IntermediateEventData (Android only)
      • \n
    \n

    This event is fired after any intermediate image has been set.

    \n
    <@nativescript-community/ui-image:Img intermediateImageSet=\"onIntermediateImageSet\"/>
    \n

    JavaScript:

    \n
    function onIntermediateImageSet(args) {
        var img = args.object;
    }
    exports.onIntermediateImageSet = onIntermediateImageSet;
    \n

    TypeScript:

    \n
    import {Img, IntermediateEventData } from \"@nativescript-community/ui-image\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • intermediateImageFailed - arguments FailureEventData (Android only)
      • \n
    \n

    This event is fired after the fetch of the intermediate image failed.

    \n
    <@nativescript-community/ui-image:Img intermediateImageFailed=\"onIntermediateImageFailed\"/>
    \n

    JavaScript:

    \n
    function intermediateImageFailed(args) {
        var img = args.object;
    }
    exports.intermediateImageFailed = intermediateImageFailed;
    \n

    TypeScript:

    \n
    import {Img, FailureEventData } from \"@nativescript-community/ui-image\";

    export function intermediateImageFailed(args: FailureEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • submit - arguments EventData (Android only)
      • \n
    \n

    This event is fired before the image request is submitted.

    \n
    <@nativescript-community/ui-image:Img submit=\"onSubmit\"/>
    \n

    JavaScript:

    \n
    function onSubmit(args) {
        var img = args.object;
    }
    exports.onSubmit = onSubmit;
    \n

    TypeScript:

    \n
    import {Img, EventData } from \"@nativescript-community/ui-image\";

    export function onSubmit(args: EventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • release - arguments EventData (Android only)
      • \n
    \n

    This event is fired after the controller released the fetched image.

    \n
    <@nativescript-community/ui-image:Img release=\"onRelease\"/>
    \n

    JavaScript:

    \n
    function onRelease(args) {
        var img = args.object;
    }
    exports.onRelease = onRelease;
    \n

    TypeScript:

    \n
    import {Img, EventData } from \"@nativescript-community/ui-image\";

    export function onRelease(args: EventData) {
        var img = args.object as Img;
    }
    \n

    Event arguments

    \n

    Instances of this class are provided to the handlers of the finalImageSet.

    \n
    import {Img, FinalEventData, ImageInfo, AnimatedImage } from \"@nativescript-community/ui-image\";

    export function onFinalImageSet(args: FinalEventData) {
        var info: ImageInfo  = args.imageInfo;
        var animatable: AnimatedImage = args.animatable;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
    }
    \n
      \n
    • FailureEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

    \n
    import {Img, FailureEventData, imageModuleError } from \"@nativescript-community/ui-image\";

    export function onFailure(args: FailureEventData) {
        var error: imageModuleError = args.error;
        var message: string = error.getMessage();
        var type: string = error.getErrorType();
        var fullError: string = error.toString();
    }
    \n
      \n
    • IntermediateEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the intermediateImageSet.

    \n
    import {Img, IntermediateEventData, ImageInfo } from \"@nativescript-community/ui-image\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var info: ImageInfo  = args.imageInfo;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
    \n
      \n
    • EventData
      • \n
    \n

    Instances of this class are provided to the handlers of the release and submit.

    \n
    import {Img, EventData } from \"@nativescript-community/ui-image\";

    export function onSubmit(args: EventData) {
        var img = args.object as Img;
    }
    \n

    Properties

    \n
      \n
    • src
      • \n
    \n

    String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

    \n
    <@nativescript-community/ui-image:Img src=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
    \n
      \n
    • placeholderImageUri
      • \n
    \n

    String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your Img instances.

    \n
    <@nativescript-community/ui-image:Img placeholderImageUri=\"~/placeholder.jpg\"/>
    \n
      \n
    • failureImageUri
      • \n
    \n

    String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the src is not successful.

    \n
    <@nativescript-community/ui-image:Img failureImageUri=\"~/failure.jpg\"/>
    \n

    Advanced optional attributes

    \n

    There are a couple of optional attributes that could be set on the Img instance to achieve advanced behaviors:

    \n
      \n
    • backgroundUri (Android only)
      • \n
    \n

    String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the Img.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your Img instances.

    \n
    <@nativescript-community/ui-image:Img backgroundUri=\"~/image.jpg\"/>
    \n
      \n
    • stretch
      • \n
    \n

    String value used by Img image scale type. This property can be set to:

    \n

    'center' - Performs no scaling.

    \n

    'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'centerInside' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitCenter' - Scales the child so that it fits entirely inside the parent.

    \n

    'aspectFit' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitStart' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitEnd' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'fill' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'aspectFill' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n
    <@nativescript-community/ui-image:Img stretch=\"centerInside\"/>
    \n
      \n
    • fadeDuration
      • \n
    \n

    Number value used for the fade-in duration. This value is in milliseconds.

    \n
    <@nativescript-community/ui-image:Img fadeDuration=\"3000\"/>
    \n
      \n
    • blurRadius
      • \n
    \n

    Number value greater than zero, used as input for the blur function. Larger value means slower processing. For example a value of 10 means that each pixel in the image will be blurred using all adjacent pixels up to a distance of 10.

    \n
    <@nativescript-community/ui-image:Img blurRadius=\"25\"/>
    \n
      \n
    • blurDownSampling (Android only)
      • \n
    \n

    Number value greater than zero, used to scale the image before applying the blur function. Larger value means faster processing. For example a value of 2 means that the image will be scaled by a factor of two before applying blur.

    \n
    <@nativescript-community/ui-image:Img blurDownSampling=\"2\"/>
    \n
      \n
    • aspectRatio
      • \n
    \n

    Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

    \n

    Note: In some layout scenarios it is necessary to set the verticalAlignment of the Img to 'top' or 'bottom' in order to "anchor" the img and achieve dynamic sizing.

    \n
    <@nativescript-community/ui-image:Img aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
    \n
      \n
    • decodeWidth (downsampling) - make sure to enable downsample (isDownsampleEnabled) in the initialize function of the plugin otherwise this property is disregarded.
      • \n
    \n

    Number value used as the downsampled width of the imageModule drawable.

    \n
    <@nativescript-community/ui-image:Img decodeWidth=\"100\"/>
    \n
      \n
    • decodeHeight (downsampling) - make sure to enable downsample (isDownsampleEnabled) in the initialize function of the plugin otherwise this property is disregarded.
      • \n
    \n

    Number value used as the downsampled width of the imageModule drawable.

    \n
    <@nativescript-community/ui-image:Img decodeHeight=\"100\"/>
    \n
      \n
    • progressiveRenderingEnabled
      • \n
    \n

    Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

    \n
    <@nativescript-community/ui-image:Img progressiveRenderingEnabled=\"true\"/>
    \n
      \n
    • showProgressBar (Android only)
      • \n
    \n

    Boolean value used for showing or hiding the progress bar.

    \n
    <@nativescript-community/ui-image:Img showProgressBar=\"true\"/>
    \n
      \n
    • progressBarColor (Android only)
      • \n
    \n

    String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

    \n
    <@nativescript-community/ui-image:Img progressBarColor=\"blue\"/>
    \n
      \n
    • roundAsCircle
      • \n
    \n

    Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

    \n
    <@nativescript-community/ui-image:Img roundAsCircle=\"true\"/>
    \n
      \n
    • roundTopLeftRadius
      • \n
    \n

    Radius of the Top Left corner in

    \n
    <@nativescript-community/ui-image:Img roundTopLeftRadius=\"50\"/>
    \n
      \n
    • roundTopRightRadius
      • \n
    \n

    Radius of the Top Right corner in

    \n
    <@nativescript-community/ui-image:Img roundTopRightRadius=\"50\"/>
    \n
      \n
    • roundBottomLeftRadius
      • \n
    \n

    Radius of the Bottom Left corner in

    \n
    <@nativescript-community/ui-image:Img roundBottomLeftRadius=\"50\"/>
    \n
      \n
    • roundBottomRightRadius
      • \n
    \n

    Radius of the Bottom Right corner in

    \n
    <@nativescript-community/ui-image:Img roundBottomRightRadius=\"50\"/>
    \n
      \n
    • autoPlayAnimations
      • \n
    \n

    Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

    \n
    <@nativescript-community/ui-image:Img autoPlayAnimations=\"true\"/>
    \n
      \n
    • tapToRetryEnabled (Android only)
      • \n
    \n

    Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.

    \n
    <@nativescript-community/ui-image:Img tapToRetryEnabled=\"true\"/>
    \n

    Cache

    \n

    The @nativescript-community/ui-image {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

    \n

    'Refresh' the 'src'

    \n

    Not so rarely you may have a scenario where the actual image on your remote service from the src of the Img has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the src by calling the updateImageUri():

    \n
    // 'img' is the instance the 'Img' in the project.
    img.updateImageUri();
    \n

    Clear everything from the cache

    \n

    Managing the caches in @nativescript-community/ui-image is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

    \n
    var imageModuleModel = require(\"@nativescript-community/ui-image\");

    var imagePipeLine = imageModuleModel.getImagePipeline();
    \n
      \n
    • Clear both the memory and disk caches
      • \n
    \n
    imagePipeLine.clearCaches();
    \n
      \n
    • Clear the memory cache
      • \n
    \n
    imagePipeLine.clearMemoryCaches();
    \n
      \n
    • Clear the disk cache
      • \n
    \n
    imagePipeLine.clearDiskCaches();
    \n

    Evict all images with a specific URI from the cache

    \n

    If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (src). Evicting is done again via the ImagePipeline:

    \n
    var imageModuleModel = require(\"@nativescript-community/ui-image\");

    var imagePipeLine = imageModuleModel.getImagePipeline();
    \n
      \n
    • Evict URI from both the memory and disk caches
      • \n
    \n
    imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the memory cache
      • \n
    \n
    imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the disk cache
      • \n
    \n
    imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
    \n

    Manually shut down the native imageModule library

    \n

    In very very rare occasions the native Android imageModule library may experience strange memory leak issues, in such scenarios as a last resort you may want to "shut down" the library forcing all of the managed memory to possibly be released. You can do that by calling the shutDown function exposed by the @nativescript-community/ui-image module, one good application lifecycle event to call it inside may be in the exit event of the application:

    \n
    import * as app from \"application\";
    import * as imageModuleModule from \"@nativescript-community/ui-image\";

    if (app.android) {
        app.on(app.exitEvent, (args) => {
            imageModuleModule.shutDown();
        });
    }
    \n

    \n

    Flavors

    \n

    Using core

    \n
    <Page
        xmlns=\"http://www.nativescript.org/tns.xsd\" 
        xmlns:@nativescript-community/ui-image=\"@nativescript-community/ui-image\">
        <@nativescript-community/ui-image:Img width=\"250\" height=\"250\"
                                          src=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
    </Page>
    \n

    Other flavors are presented in the demo apps that you can find under demo-snippets

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-image
    $ cd ui-image
    $ npm i
    $ npm run setup
    $ npm run build # && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":37,"lastWeek":131,"lastMonth":2317}},"nativescript-geofence-manager":{"name":"nativescript-geofence-manager","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript Geofence Manager

    \n

    A NativeScript plugin to work with Geofences

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-geofence-manager

    \n

    This command automatically installs the necessary files, as well as stores nativescript-geofence-manager as a dependency in your project's package.json file.

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      enterRegion
      \nTriggered when the the device reports that it enters a geofence region.

      \n
      • \n
    • \n

      exitRegion
      \nTriggered when the the device reports that it exists a geofence region.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      enterRegionEvent - string
      \nString value used when hooking to enterRegion event.

      \n
      • \n
    • \n

      exitRegionEvent - string
      \nString value used when hooking to exitRegion event.

      \n
      • \n
    • \n

      activeGeofenceIds - string[]
      \nGets the currently active Geofence IDs.

      \n
      • \n
    \n

    Methods

    \n
      \n
    • \n

      canMonitor(): boolean
      \nReturn if the device currently is capable of monitoring geofences.

      \n
      • \n
    • \n

      startMonitoringRegion(region: CircularRegion): void
      \nStarts monitoring the geofence defined by given circular region.

      \n
      • \n
    • \n

      stopMonitoringRegion(identifier: string): void
      \nStops monitoring the given geofence id.

      \n
      • \n
    • \n

      stopMonitoringAllRegions(): void
      \nStops monitoring all geofences defined by the app.

      \n
      • \n
    \n

    Usage (Core)

    \n

    You need to import the geofence manager in the start up file for the app. This setups the needed native event listeners.
    \nIt is recommended to also subscribe to the manager's events in the main app file to ensure that when the device is awaken by the OS you will receive the notification. Note that this has to be done before calling run() for your app

    \n
    import { GeofenceManager, RegionChangedEventData } from \"nativescript-geofence-manager\";

    GeofenceManager.on(GeofenceManager.enterRegionEvent, (args: RegionChangedEventData) => {
        console.log(\"GeofenceManager.enterRegionEvent\", args.region.identifier);
    });

    GeofenceManager.on(GeofenceManager.exitRegionEvent, (args: RegionChangedEventData) => {
        console.log(\"GeofenceManager.exitRegionEvent\", args.region.identifier);
    });

    Application.run({ moduleName: \"app-root\" });
    \n

    In order to receive event notifications even when the app is in the background you need to request always location usage permissions. This has some caveats deppending on what platform and for android even on what SDK version is your app running. You can check the code of the demo app to see what I found to work best, but you can change this to better suit your needs as needed.

    \n

    In order to start monitoring for a given region you can simply call the startMonitoring method and pass the circular region you want to monitor as well as if you want to monitor enter, exit, or both events. The identifier must be unique as if you call a second time startMonitoringRegion with the same identifier it will simply edit previous region.

    \n
    import { GeofenceManager } from \"nativescript-geofence-manager\";

    GeofenceManager.startMonitoringRegion({
        identifier: \"Apple HQ\",
        center: { latitude: 37.330551, longitude: -122.030583 },
        radius: 30,
        notifyOnEntry: true,
        notifyOnExit: true,
    });
    \n

    Once you are no longer intereseted in a region remember to call stopMonitoringRegion

    \n
    GeofenceManager.stopMonitoringRegion(\"Apple HQ\");
    \n

    Usage in other NativeScript flavors (Angular, Vue, etc.)

    \n

    Currently the plugin has not been tested nor made to support other NS flavors, since I'm not actively using those. If you are such a dev, I'm happily accepting PRs to support all the NS flavors ot there :)

    \n

    Caveats

    \n
      \n
    • Each platform has different limitations to maximum allowed geofences. For iOS this 20 while for android this is 100. Once that number is reached calls to startMonitoringRegion will stop adding further geofences.
      • \n
    • Testing for android in emulator is supbar. Although you can define a route and start it, seems location isn't updated correctly. The only way I managed to get it working is to start the route AND open Google Maps on the device. This seems to be forcing the emulator to crrectly report position and trigger the events.
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":20}},"ably-nativescript":{"name":"ably-nativescript","version":"1.2.1","license":"Apache-2.0","readme":"

    Ably

    \n

    Ably is the platform that powers synchronized digital experiences in realtime. Whether attending an event in a virtual venue, receiving realtime financial information, or monitoring live car performance data – consumers simply expect realtime digital experiences as standard. Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime for more than 250 million devices across 80 countries each month. Organizations like Bloomberg, HubSpot, Verizon, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale. For more information, see the Ably /documentation.

    \n

    This is a Nativescript client library for Ably.

    \n

    This repo is a wrapper for the ably-js client library which introduces a dependency needed by Nativescript. See the ably-js README for usage details of the ably-js client library.

    \n

    For complete API documentation, see the Ably Realtime documentation.

    \n

    How to use this library

    \n

    Installation from npm

    \n
    npm install ably-nativescript\n
    \n

    Installation from tns

    \n
    tns plugin add ably-nativescript\n
    \n

    Usage

    \n

    For the realtime library:

    \n
    var realtime = require('ably-nativescript').Realtime;
    \n

    For the rest-only library:

    \n
    var realtime = require('ably-nativescript').Rest;
    \n

    API usage, tests, contributing, etc.

    \n

    See the ably-js repo.

    \n

    FAQs

    \n

    Is this repo actively maintained?

    \n

    Yes, this repo typically has very few recent commits because this repo doesn't do very much: it's a very thin wrapper around the ably-js repo.

    \n

    License

    \n

    Copyright (c) 2017 Ably Real-time Ltd, Licensed under the Apache License, Version 2.0. Refer to LICENSE for the license terms.

    \n

    \"npm\"

    \n","downloadStats":{"lastDay":2,"lastWeek":10,"lastMonth":114}},"nativescript-vue-web":{"name":"nativescript-vue-web","version":"0.9.4","license":"MIT","readme":"

    Nativescript-Vue-Web

    \n

    \"CircleCI\n\"npm\"\n\"Codecov\"\n\"NpmLicense\"\n\"Total\n\"Language

    \n

    \"GitHub\n\"npm\"\n\"Maintenance\"\n\"David\"\n\"David\"

    \n

    Web components for Nativescript-Vue

    \n

    WIP

    \n

    Remaining Items

    \n
      \n
    • Vue CLI 3.x plugin supporting NativeScript-Vue-Web add-on
      • \n
    • NativeScript-Vue Manual Routing mapping to vue-router for Web
      • \n
    \n
    Project setup
    \n
    npm install
    \n
    Lints and fixes files
    \n
    npm run lint
    \n
    Run unit tests
    \n
    npm run test:unit
    \n","downloadStats":{"lastDay":1,"lastWeek":39,"lastMonth":124}},"@nativescript-community/ui-material-textfield":{"name":"@nativescript-community/ui-material-textfield","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Text field

    \n

    Material Design's Text field component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-textfield
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-textfield
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-textfield@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mdt=\"@nativescript-community/ui-material-textfield\">
        <StackLayout horizontalAlignment=\"center\">
            <mdt:TextField text=\"raised textfield\"/>
            <mdt:TextField variant=\"flat\" text=\"flat textfield\"/>
            <mdt:TextField variant=\"text\" text=\"text textfield\"/>
            <mdt:TextField elevation=\"5\" rippleColor=\"red\" text=\"raised custom textfield\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdtextfield {
        ripple-color: blue;
        elevation: 4;
        stroke-color: blue;             /* the border color when active */
        stroke-inactive-color: green;   /* the border color when inactive */
        floating-color: blue;           /* the floating placeholder color when active */
        floating-inactive-color: green; /* the floating placeholder color when inactive */
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTextFieldModule } from \"@nativescript-community/ui-material-textfield/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTextFieldModule,
            ...
        ],
        ...
    })
    \n
    <MDTextField  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
            (textChange)=\"onTextChange($event)\">    </MDTextField>
    \n

    \n

    NativeScript + Vue

    \n
    import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';

    Vue.use(TextFieldPlugin);
    \n
    <MDTextField helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
            @textChange=\"onTextChange\"/>
    \n

    Also, you can bind the text to some instance data using the v-model directive:

    \n
    <MDTextField v-model=\"value\" />
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript TextField so it already has all the same attributes.

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield

    \n
      \n
    • errorColor optional
      • \n
    \n

    An attribute to set the error color of the textfield.

    \n
      \n
    • helper optional
      • \n
    \n

    An attribute to set the helper text of the textfield.

    \n
      \n
    • floating optional
      • \n
    \n

    A boolean attribute to set the floating state of the textfield.

    \n","downloadStats":{"lastDay":31,"lastWeek":449,"lastMonth":5043}},"nativescript-audience-network":{"name":"nativescript-audience-network","version":"1.0.3","license":"Apache-2.0","readme":"\n

    nativescript-audience-network

    \n\n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-audience-network
    \n

    iOS currently not supported

    \n

    Android

    \n

    BANNER

    \n\n

    Here are the supported functions:

    \n

    createBanner

    \n

    TypeScript

    \n
    import * as AudienceNetwork from 'nativescript-audience-network';
    import { isIOS } from \"tns-core-modules/platform\";

    export class HomeComponent implements OnInit {


      ngOnInit(): void {
        
        // Init audienceNetwork SDK here.
        AudienceNetwork.initAds();
      }

      testing = true;
      createBanner() {
        let option: CreateBannerOptions = {
          // global test banner id
          androidBannerId: \"<Your audience network banner id>\",
          margins: {
            bottom: 10,
            // top:10
          },
          testing: true,
          size: AD_SIZE.STANDARD_BANNER,
        };
        AudienceNetwork.createBanner(option).then(
          () => (this.message = \"Banner created\"),
          (error) => (this.message = \"Error creating banner: \" + error)
        );
      }
    }
    \n\n

    INTERSTITIAL

    \n

    To show a fullscreen ad, you can use this function. Note that Interstitial banners need to be loaded before\nthey can be shown, and there are two ways to do that:

    \n

    preloadInterstitial

    \n

    Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showInterstitial).

    \n
    preloadInterstitial(){
        let option: CreateInterstitialOptions = {
                \"androidInterstitialId\": \"<Your audience network Interstitial id>\",
                \"testing\": true,
                \"onAdClosed\": this.onInterstitialClosed.bind(this),
                \"onAdClicked\": this.onInterstitialClicked.bind(this)
        }
        AudienceNetwork.preloadInterstitial(option).then(
         ()=> {
          console.log(
            \"interstitial preloaded - you can now call 'showInterstitial' whenever you're ready to do so\"
          );
        }, (error)=> {
          console.log(\"preloadInterstitial error: \" + error);
        }
      );
      }
      onInterstitialClosed() {
          console.log(\"ad closed\");
      };
      onInterstitialClicked() {
          console.log(\"ad clicked\");
      }
    \n

    showInterstitial

    \n

    At any moment after preloadInterstitial successfully resolves, you can call showInterstitial.

    \n

    Note that when you want to use showInterstitial again, you also have to use preloadInterstitial again because those ads can't be reused.

    \n
     showInterstitial(){
        AudienceNetwork.showInterstitial()
     }
    \n

    preloadRewardedVideoAd

    \n

    Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showRewardedVideoAd).

    \n
     preloadRewardedVideoAd(){
        let option = {
          androidAdPlacementId: \"<Your audience network RewardedVideo id>\"
        }
        AudienceNetwork.preloadRewardedVideoAd(option).then(()=> {
          console.log(
            \"RewardedVideoAd preloaded - you can now call 'showRewardedVideoAd' whenever you're ready to do so\"
          );
        },(error)=> {
          console.log(\"preloadRewardedVideoAd error: \" + error);
        }
      );
     }
    \n

    showRewardedVideoAd

    \n

    At any moment after preloadRewardedVideoAd successfully resolves, you can call showRewardedVideoAd.

    \n

    Note that when you want to use showRewardedVideoAd again, you also have to use preloadRewardedVideoAd again because those ads can't be reused.

    \n

    onRewarded is probably the only callback you need to worry about.

    \n
     showRewardedVideoAd(){
       let option: ShowRewardedOptions = {
            \"onRewardedVideoAdClosed\":this.onRewardedVideoAdClosed.bind(this),
            \"onRewardedVideoAdOpened\":this.onRewardedVideoAdOpened.bind(this),
            \"onRewardedVideoCompleted\":this.onRewardedVideoCompleted.bind(this),

          }
        AudienceNetwork.showRewardedVideoAd(option)
     }
      onRewardedVideoAdClosed(){
        console.log(\"onRewardedVideoAdClosed\")
      }

      onRewardedVideoAdOpened(){
        console.log(\"reward clicked\")
      }
      onRewardedVideoCompleted(){
        console.log(\"reward complete\")
      }
    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":17}},"@nstudio/nativescript-loading-indicator":{"name":"@nstudio/nativescript-loading-indicator","version":"4.3.4","license":"Apache-2.0","readme":"\n

    NativeScript Loading Indicator

    \n    \n

    \nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation

    \n

    NativeScript 7+:

    \n
    npm install @nstudio/nativescript-loading-indicator
    \n

    NativeScript lower than 7:

    \n
    npm install @nstudio/nativescript-loading-indicator@3.0.x
    \n

    Screenshots

    \n

    iOS

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"iOS\"\"iOS\"\"iOS\"\"iOS\"
    \n \n

    \n

    Android

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Android\"\"Android\"\"Android\"\"Android\"
    \n

    \n

    Example

    \n

    TypeScript

    \n
    import {
      LoadingIndicator,
      Mode,
      OptionsCommon,
    } from '@nstudio/nativescript-loading-indicator';

    const indicator = new LoadingIndicator();

    const options: OptionsCommon = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      color: '#4B9ED6', // color of indicator and labels
      // background box around indicator
      // hideBezel will override this if true
      backgroundColor: 'yellow',
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.AnnularDeterminate, // see options below
      android: {
        view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: someButton.ios, // Target view to show on top of (Defaults to entire window)
        square: false,
      },
    };

    indicator.show(options);

    // after some async event maybe or a timeout hide the indicator
    indicator.hide();
    \n

    javascript

    \n
    const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
      .LoadingIndicator;
    const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

    const loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    const options = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      color: '#4B9ED6', // color of indicator and labels
      // background box around indicator
      // hideBezel will override this if true
      backgroundColor: 'yellow',
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.AnnularDeterminate, // see options below
      android: {
        view: android.view.View, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: UIView, // Target view to show on top of (Defaults to entire window)
      },
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Common Options

    \n
    export interface OptionsCommon {
      /**
       * Message in the loading indicator.
       */
      message?: string;

      /**
       * Details message in the loading indicator.
       */
      details?: string;

      /**
       * Color of the message text.
       */
      color?: string;

      /**
       * Background color of the loading indicator.
       */
      backgroundColor?: string;

      /**
       * Progress of the indicator when not using CustomView or Text Mode.
       */
      progress?: number;

      /**
       * Margin for the message/indicator to the edge of the bezel.
       */
      margin?: number;

      /**
       * Set true to allow user interaction.
       */
      userInteractionEnabled?: boolean;

      /**
       * Dim the background behind the indicator.
       */
      dimBackground?: boolean;

      /**
       * Hide bezel around indicator
       */
      hideBezel?: boolean;

      /**
       * The mode of the loading indicator.
       */
      mode?: Mode;

      /**
       * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
       */
      customView?: any;

      /**
       * iOS specific configuration options.
       */
      ios?: OptionsIOS;

      /**
       * Android specific configuration options.
       */
      android?: OptionsAndroid;
    }
    \n

    Android Specific

    \n
    export interface OptionsAndroid {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: android.view.View;
      max?: number;
      progressNumberFormat?: string;
      progressPercentFormat?: number;
      progressStyle?: number;
      secondaryProgress?: number;
      cancelable?: boolean;
      cancelListener?: (dialog: any) => void;
      elevation?: number;
    }
    \n

    iOS Specific

    \n
    export interface OptionsIOS {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: UIView;
      square?: boolean;
    }
    \n

    Mode Enum

    \n
    export enum Mode {
      Indeterminate = 0,
      Determinate = 1,
      DeterminateHorizontalBar = 2,
      AnnularDeterminate = 3,
      CustomView = 4,
      Text = 5,
    }
    \n","downloadStats":{"lastDay":107,"lastWeek":1242,"lastMonth":6027}},"@nativescript-community/ui-label":{"name":"@nativescript-community/ui-label","version":"1.3.8","license":"Apache-2.0","readme":"

    # NativeScript Label widget

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Label widget. It is a direct replacement for the {N} Label widget.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add @nativescript-community/ui-label

    \n

    This command automatically installs the necessary files, as well as stores nativescript-community/ui-label as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    It works exactly the same way as the {N} plugin. However it adds a few improvements

    \n

    Angular

    \n
    import { registerElement } from '@nativescript/angular';

    registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
    \n
    <!-- Normal Label Usage -->
    <HTMLLabel html=\"<b>Hello, I am BOLD!></b>\" fontFamily=\"OpenSans\" fontSize=\"16\" margin=\"2 5 5 5\" textWrap=\"true\"></HTMLLabel>

    <!-- Clickable Link Usage -->
    <HTMLLabel
        [html]=\"someBindedUrl\"
        linkColor=\"#336699\"
        linkUnderline=\"true\"
        (linkTap)=\"onLinkTap($event)\"
        fontFamily=\"OpenSans\"
        fontSize=\"16\"
        margin=\"2 5 5 5\"
        textWrap=\"true\"
    >    </HTMLLabel>
    \n
    import { Utils } from '@nativescript/core';

    export someComponentClass() {
        someBindedUrl = '<a href=\\\"https://youtube.com\\\">Open Youtube.com</a>'

        // Event binded to the linkTap function on the HTMLLabel
        onLinkTap(args) {
            const link = args.link;
            // expected to be https://youtube.com from the binded `<a>` tag href value
            // be sure to encodeURIComponent of any query string parameters if needed.
            Utils.openUrl(link);
        }
    }

    \n

    Vue

    \n
    import Vue from 'nativescript-vue';

    Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
    \n
    <!-- Normal Label Usage -->
    <HTMLLabel
        fontSize=\"50\"
        fontFamily=\"Cabin Sketch,res/cabinsketch\"
        width=\"100%\"
        paddingTop=\"5\"
        color=\"#336699\"
        textWrap=\"true\"
        :html=\"someBindedValue\"
        verticalAlignment=\"top\"
    />

    <!-- Clickable Link Usage -->
    <HTMLLabel
        html=\"<a href='https://youtube.com'>Open Youtube.com</a>\"
        linkColor=\"pink\"
        linkUnderline=\"false\"
        @linkTap=\"onLinkTap($event)\"
        fontFamily=\"OpenSans\"
        fontSize=\"16\"
        margin=\"2 5 5 5\"
        textWrap=\"true\"
    >    </HTMLLabel>
    \n
    <script lang=\"ts\">
    import Vue from 'vue';

    export default Vue.extend({
        data() {
            return {
                someBindedValue: \"<p>This is really powerful. <b>Amazing to be quite honest</b></p>\",
            };
        },
        methods: {
            // event binded to the linkTap on the HTMLLabel
            onLinkTap(args) {
                Utils.openUrl(args.link);
            },
        },
        beforeDestroy() {},
    });
    </script>
    \n

    Properties

    \n
      \n
    • \n

      html
      \nHtml text that will be used to render text. HTML supported tags are a bit different on iOS and Android. To make sure it works as expected, for now only used Android supported ones.

      \n

      If using a url with parameters, be sure to encode the query string so Android can open the link accordingly.

      \n
      • \n
    • \n

      verticalTextAlignment
      \nYou can also set it through css with vertical-text-alignment

      \n
      • \n
    • \n

      textShadow
      \nYou can also set it through css with text-shadow. The format is offsetx offsety blurradius color

      \n
      • \n
    • \n

      linkColor\nColor for any <a> tags inside the HTMLLabel.

      \n
      • \n
    • \n

      linkUnderline\nBoolean to enable underline for any <a> tags inside the HTMLLabel.

      \n
      • \n
    • \n

      linkTap\nEvent to handle taps of any <a> tags inside the HTMLLabel. Access the link property of the event data from the linkTap event. See Samples above for example.

      \n
      • \n
    \n

    Improvements

    \n
      \n
    • Override the {N} font loading system to make it much faster
      • \n
    • faster creation of FormattedString
      • \n
    • faster label creation and drawing, especially on android
      • \n
    \n","downloadStats":{"lastDay":36,"lastWeek":722,"lastMonth":4179}},"@bradmartin/nativescript-urlhandler":{"name":"@bradmartin/nativescript-urlhandler","version":"2.0.1","license":"MIT","readme":"

    NativeScript URL Handler Plugin \"apple\" \"android\"

    \n

    \"Greenkeeper\n\"Build\n\"Donate

    \n

    \"npm\"Maintainability\"

    \n

    \"NPM\"

    \n

    \n
    \n

    Feel free to donate

    \n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

    \"Bitcoin\"

    \n

    Also via greenaddress

    \n
    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    @Component({
      selector: \"gr-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
        } 
        
        ngOnInit(){
            handleOpenURL((appURL: AppURL) => {
                console.log('Got the following appURL', appURL);
            });
         }
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

    handleOpenURL(function(appURL) {
      console.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    handleOpenURL((appURL: AppURL) => {
      console.log('Got the following appURL', appURL);
    });
    \n
    \n

    Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

    \n
    \n

    Installation

    \n
    $ tns plugin add nativescript-urlhandler
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add nativescript-urlhandler@next
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" /> 
        <action android:name=\"android.intent.action.VIEW\" /> 
        <category android:name=\"android.intent.category.DEFAULT\" /> 
        <category android:name=\"android.intent.category.BROWSABLE\" /> 
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" /> 
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
    \n

    FAQ

    \n

    Callback handling

    \n

    The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    \n
        No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
    \n

    Webpack

    \n

    TypeScript Config

    \n

    If your Webpack Build is failing, try adapting your tsconfig to this:

    \n
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"emitDecoratorMetadata\": true,
            \"noEmitHelpers\": true,
            \"noEmitOnError\": true,
            \"lib\": [
                \"es6\",
                \"dom\",
                \"es2015.iterable\"
            ],
            \"baseUrl\": \".\",
            \"paths\": {
                \"*\": [
                    \"./node_modules/tns-core-modules/*\",
                    \"./node_modules/*\"
                ]
            }
        },
        \"exclude\": [
            \"node_modules\",
            \"platforms\",
            \"**/*.aot.ts\"
        ]
    \n

    HTTPS intent

    \n

    This lib also support HTTPS intent, you can define a host for it. Here is an example on Android with both custom & HTTPS scheme :

    \n
    <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />
      <data android:scheme=\"my-app\" />
    </intent-filter>
    <intent-filter>
      <action android:name=\"android.intent.action.VIEW\" />
      <category android:name=\"android.intent.category.DEFAULT\" />
      <category android:name=\"android.intent.category.BROWSABLE\" />
      <data android:scheme=\"https\" android:host=\"my-website.com\" />
    </intent-filter>
    \n

    Let's suppose your put a <a href="https://my-website.com/check-our-app">Check our mobile app</a> link on your website to open your mobile app.\nBecause https intent is also linked to the mobile browser, when user will tap on the link, a popup will appears to let the user choose between the browser and your mobile app to open this link.

    \n

    In the other hand, if you setup a android:scheme="my-app" that only your app react to, putting a <a href="my-app://check-our-app">Check our mobile app</a> link like this on your website will avoid this popup and open your mobile app directly.

    \n","downloadStats":{"lastDay":85,"lastWeek":442,"lastMonth":1685}},"@nativescript-community/gesturehandler":{"name":"@nativescript-community/gesturehandler","version":"2.0.17","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/gesturehandler

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Declarative API exposing platform native touch and gesture system to NativeScript.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/gesturehandler

    \n

    \n

    API

    \n

    We need to do some wiring when your app starts, so open app.ts and add this before creating any View/App/Frame:

    \n
    TypeScript
    \n
    import { install } from \"@nativescript-community/gesturehandler\";
    install();
    \n

    You create a gesture handler using something like this:

    \n
    import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler';


    function onGestureTouch(args: GestureTouchEventData) {
        const { state, extraData, view } = args.data;
        view.translateX = extraData.translationX;
        view.translateY = extraData.translationY;
    }
    function onGestureState(args: GestureStateEventData) {
        const { state, prevState, extraData, view } = args.data;
        console.log('onGestureState', state, prevState, view, extraData);
    }
    const manager = Manager.getInstance();
    const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
        shouldCancelWhenOutside: false
    });
    gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
    gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
    gestureHandler.attachToView(view);
    \n

    Right now you must not forget to store the gestureHandler somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.

    \n

    Now about the API. All the gestures for the react counterpart exist with the same options and the same event extraData.

    \n

    \n

    GestureRootView

    \n

    For the gestures to work correctly we need a root view which knows how to handle the gestures.\nIf using Page (thus Frame) you don't need to do anything.\nIn case you don't (drawer root view, modals, ...) then you can wrap your views in a GestureRootView which inherits GridLayout

    \n

    \n

    Overriding Nativescript gestures

    \n

    This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes tap and longpress

    \n

    To do that

    \n

    \n

    Credits

    \n

    This is a port of react-native-gesturehandler.\nThe source is based on the source code by Krzysztof Magiera. Dont hesitate to go and thank him for his work!

    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic example showing that overriding N gestures works, even in modals
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":96,"lastWeek":481,"lastMonth":2466}},"@nativescript-community/sqlite":{"name":"@nativescript-community/sqlite","version":"3.4.2","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/sqlite

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n SQLite for Nativescript
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/sqlite

    \n

    \n

    Usage

    \n

    You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

    \n
    import { openOrCreate, deleteDatabase } from \"@nativescript-community/sqlite\";

    const sqlite = openOrCreate(\"path/to/db\");
    sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
    sqlite.transaction(cancelTransaction => {
        // Calling cancelTransaction will rollback all changes made to db
        names.forEach((name, id) =>
            sqlite.execute(
                \"INSERT INTO names (id, name) VALUES (?, ?)\",
                [id, name]
            )
        );
    });
    \n","downloadStats":{"lastDay":21,"lastWeek":617,"lastMonth":2593}},"@nativescript-community/ui-lottie":{"name":"@nativescript-community/ui-lottie","version":"5.0.6","license":"MIT","readme":"\n

    nativescript-community/ui-lottie

    \n    \n

    NativeScript plugin to expose Airbnb Lottie for awesome animations.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"Action\n \n \n \"stars\"\n \n \n \"donate\"\n \n

    \n

    Changelog

    \n

    All notable changes to this project will be documented in the changelog.

    \n

    Demo Screen

    \n

    The .gif does not do the fluid animations justice

    \n

    \"LottieView\"

    \n

    Installation

    \n

    To install execute:

    \n
    tns plugin add @nativescript-community/ui-lottie
    \n

    Usage

    \n

    NativeScript (Core)

    \n

    XML

    \n
    <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:Lottie=\"@nativescript-community/ui-lottie\" navigatingTo=\"navigatingTo\" class=\"page\">
        <StackLayout>
            <Lottie:LottieView src=\"PinJump.json\" height=\"130\" loop=\"true\" autoPlay=\"true\" loaded=\"yourLoadedEvent\" />
        </StackLayout>
    </Page>
    \n

    TS

    \n
    import { LottieView } from \"@nativescript-community/ui-lottie\";

    public yourLoadedEvent(args) {
        this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
    }
    \n
    \n

    NativeScript Angular

    \n

    Module

    \n

    First you need to include the NativeScriptLottieModule in your app.module.ts

    \n
    import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';

    @NgModule({
        imports: [
            NativeScriptLottieModule
        ],
        ...
    })
    \n

    XML

    \n
    <StackLayout>
        <LottieView width=\"100\" height=\"150\" [src]=\"src\" [loop]=\"loop\" [autoPlay]=\"autoPlay\" (loaded)=\"lottieViewLoaded($event)\">     </LottieView>
    </StackLayout>
    \n

    Component

    \n
    import { Component } from '@angular/core';
    import { LottieView } from '@nativescript-community/ui-lottie';

    @Component({
      templateUrl: 'home.component.html',
      moduleId: module.id
    })
    export class HomeComponent {
      public loop: boolean = true;
      public src: string;
      public autoPlay: boolean = true;
      public animations: Array<string>;

      private _lottieView: LottieView;

      constructor() {
        this.animations = [
          'Mobilo/A.json',
          'Mobilo/D.json',
          'Mobilo/N.json',
          'Mobilo/S.json'
        ];
        this.src = this.animations[0];
      }

      lottieViewLoaded(event) {
        this._lottieView = <LottieView>event.object;
      }
    }
    \n
    \n

    NativeScript Vue

    \n

    Bootstrap

    \n

    If you want to use this plugin with Vue, do this in your app.js or main.js:

    \n
    import LottieView from '@nativescript-community/ui-lottie/vue';

    Vue.use(LottieView);
    \n

    This will install and register LottieView component to your Vue instance and now you can use the plugin.

    \n

    Component

    \n
    <template>
        <Page class=\"page\">
            <StackLayout>
                <LottieView height=\"130\" src=\"PinJump.json\" :loop=\"true\" :autoPlay=\"true\" @loaded=\"lottieViewLoaded\"></LottieView>
            </StackLayout>
        </page
    </template>

    <script>
        export default {
            methods: {
                lottieViewLoaded(args) {
                    this._lottieView = args.object;
                },
            },
            data() {
                return {
                    _lottieView: null,
                }
            }
        };
    </script>
    \n
    \n

    Assets

    \n

    :fire: You can find animations in the sample-effects folder.

    \n

    Android

    \n

    Place your animation files in the NS app's app/App_Resources/Android/src/main/assets folder.

    \n

    Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

    \n

    iOS

    \n

    Place your animations files in your app/App_Resources/iOS/ folder.

    \n

    Properties (bindable)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    autoPlaybooleanfalseStart LottieView animation on load if true.
    loopbooleanfalseLoop continuously animation if true.
    srcstringnullAnimation path to .json file.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    completionBlock(boolean) => voidnullCompletion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
    durationnumbernullGet the duration of the animation.
    progressnumber0Get/set the progress of the animation.
    speednumber1Get/set the speed of the animation.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnParametersDescription
    cancelAnimationvoidNonePauses the animation for the LottieView instance.
    isAnimatingbooleanNoneReturns true if the LottieView is animating, else false.
    playAnimationvoidNonePlays the animation for the LottieView instance.
    playAnimationFromProgressToProgressvoidstartProgress, endProgressPlays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
    setColorValueDelegateForKeyPathvoidvalue, keyPathSets the provided color value on each property that matches the specified keyPath in the LottieView instance.
    setOpacityValueDelegateForKeyPathvoidvalue, keyPathSets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.
    \n

    Contributors

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Brad\"Nathan\"Jean-Baptiste\"HamdiWanis\"
    bradmartinNathanWalkerrhanbHamdiWanis
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"itstheceo\"\"itstheceo\"
    itstheceomudlabs
    \n","downloadStats":{"lastDay":65,"lastWeek":903,"lastMonth":4292}},"@nativescript-community/ui-material-button":{"name":"@nativescript-community/ui-material-button","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Button

    \n

    Material Design's Button component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n\n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-button
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-button
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-button@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdb="@nativescript-community/ui-material-button" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdb=\"@nativescript-community/ui-material-button\">
        <StackLayout horizontalAlignment=\"center\">
            <mdb:Button text=\"raised button\"/>
            <mdb:Button variant=\"flat\" text=\"flat button\"/>
            <mdb:Button variant=\"text\" text=\"text button\"/>
            <mdb:Button elevation=\"5\" rippleColor=\"red\" text=\"raised custom button\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdbutton {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialButtonModule } from \"@nativescript-community/ui-material-button/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialButtonModule,
            ...
        ],
        ...
    })
    \n
    <MDButton rippleColor=\"blue\" text=\"text button\"></MDButton>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import ButtonPlugin from '@nativescript-community/ui-material-button/vue';

    Vue.use(ButtonPlugin);
    \n
    <MDButton rippleColor=\"blue\" text=\"text button\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript Button so it already has all the same attributes.

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the button. Can be flat or text. No value means raised button

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the button.

    \n","downloadStats":{"lastDay":15,"lastWeek":299,"lastMonth":3799}},"@nativescript-community/ui-material-tabs":{"name":"@nativescript-community/ui-material-tabs","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Tabs

    \n

    Material Design's Tabs component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    \n
    ns plugin add @nativescript-community/ui-material-tabs
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-tabs" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mdt=\"@nativescript-community/ui-material-tabs\">
        <mdt:Tabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <mdt:TabStrip>
                <mdt:TabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </TabStripItem>
                <mdt:TabStripItem> class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </mdt:TabStripItem>
                <mdt:TabStripItem> class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </mdt:TabStripItem>
            </mdt:TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </mdt:TabContentItem>
        </mdt:Tabs>
    </Page>
    \n

    CSS

    \n
    Tabs.bottom-nav {
        background-color: orangered;
        color: gold;
        font-size: 18;
    }

    TabStripItem.tabstripitem-active {
        background-color: teal;
    }

    TabStripItem.tabstripitem-active:active {
        background-color: yellowgreen;
    }

    TabContentItem.first-tabcontent {
        background-color: seashell;
        color: olive;
    }
    TabContentItem.second-tabcontent {
        background-color: slategray;
        color: aquamarine;
    }
    TabContentItem.third-tabcontent {
        background-color: blueviolet;
        color: antiquewhite;
    }
    Tabs MDTabStrip {
        highlight-color: red;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-tabs/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTabsModule,
            ...
        ],
        ...
    })
    \n
        <MDTabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <MDTabStrip>
                <MDTabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </MDTabStripItem>
            </MDTabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
        </MDTabs>
    \n

    \n

    NativeScript + Vue

    \n
    import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';

    Vue.use(TabsPlugin);
    \n
    <MDTabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <MDTabStrip>
                <MDTabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </MDTabStripItem>
            </MDTabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
        </MDTabs>
    \n

    \n

    NativeScript + React

    \n

    First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

    \n
    import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
    import { registerTabs } from '@nativescript-community/ui-material-tabs/react';

    registerTabNavigationBase();
    registerTabs();
    \n

    Normally it would be best to use this component via the tabNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:

    \n
    import * as React from 'react';

    export function Tabs() {
        const [selectedIndex, setSelectedIndex] = React.useState(0);

        return (
            <tabs
                selectedIndex={selectedIndex}
                onSelectedIndexChanged={(args) => {
                    setSelectedIndex(args.newIndex);
                }}
                style={{ backgroundColor: 'orange' }}
            >
                {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
                <tabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Home</label>
                        <image nodeRole=\"image\" src=\"font://&#xf015;\" className=\"fas\" />
                    </tabStripItem>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Account</label>
                        <image nodeRole=\"image\" src=\"font://&#xf007;\" className=\"fas\" />
                    </tabStripItem>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Search</label>
                        <image nodeRole=\"image\" src=\"font://&#xf00e;\" className=\"fas\" />
                    </tabStripItem>
                </tabStrip>

                {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'blue' }}>
                        <label style={{ color: 'white' }}>Home Page</label>
                    </gridLayout>
                </tabContentItem>
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'cyan' }}>
                        <label style={{ color: 'black' }}>Account Page</label>
                    </gridLayout>
                </tabContentItem>
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'magenta' }}>
                        <label style={{ color: 'black' }}>Search Page</label>
                    </gridLayout>
                </tabContentItem>
            </tabs>
        );
    }
    \n

    Troubleshooting

    \n

    If you see an error like this when writing e.g. <tabs> into your JSX:

    \n
    \n

    Property 'tabs' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

    \n
    \n

    Make sure that you have:

    \n
      \n
    1. Installed the react-nativescript npm module.
      2. \n
    2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
      3. \n
    3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
      4. \n
    4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerTabs() methods).
      5. \n
    5. If using Visual Studio Code, option-click the import @nativescript-community/ui-material-tabs/react to jump to the file; opening the file will force it to load its provided typings.
      6. \n
    \n

    API

    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    itemsArrayGets or sets the items of the BottomNavigation.
    selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
    swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
    offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
    tabStripTabStripGets or sets the tab strip of the BottomNavigation.
    tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    selectedIndexChangedEmitted when the selectedIndex property is changed.
    loadedEmitted when the view is loaded.
    unloadedEmitted when the view is unloaded.
    layoutChangedEmitted when the layout bounds of a view changes due to layout processing.
    \n","downloadStats":{"lastDay":180,"lastWeek":1651,"lastMonth":8925}},"@nativescript-community/ui-pager":{"name":"@nativescript-community/ui-pager","version":"14.1.8","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-pager

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-pager

    \n

    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    itemsarray or ItemsSource
    selectedIndexnumber
    canGoRightboolean
    canGoLeftboolean
    spacingPercentLengthType
    peakingPercentLengthType
    perPagenumber
    indicatorstring ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')
    circularModeboolean
    autoPlayDelaynumber
    autoPlayboolean
    orientationstring ('horizontal' or 'vertical')
    autoPlayboolean
    disableSwipeboolean
    showIndicatorboolean
    transformersstring
    \n
    Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
    \n

    \n

    Usage in Angular

    \n

    Import the module into your project.

    \n
    import { PagerModule } from \"@nativescript-community/ui-pager/angular\";

    @NgModule({
        imports: [
            PagerModule,
        ],
    })
    \n

    Examples

    \n
      \n
    • Static Pager\n
        \n
      • A simple pager example using static content.
        • \n
      \n
      • \n
    • Basic Pager\n
        \n
      • A simple pager example using dynamic content.
        • \n
      \n
      • \n
    \n

    \n

    Usage in React

    \n

    Import the module into your project.

    \n
    import { Pager } from '@nativescript-community/ui-pager/react';
    \n

    Examples

    \n
      \n
    • Basic Pager\n
        \n
      • A simple pager example using dynamic content.
        • \n
      \n
      • \n
    \n

    \n

    Usage in Svelte

    \n

    Import the module into your project.

    \n
    import { registerNativeViewElement } from 'svelte-native/dom';

    import PagerElement from '@nativescript-community/ui-pager/svelte';
    import { PagerItem } from '@nativescript-community/ui-pager';

    PagerElement.register();
    registerNativeViewElement('pageritem', () => PagerItem);
    \n

    Examples

    \n
      \n
    • Static Pager\n
        \n
      • A simple pager example using static content.
        • \n
      \n
      • \n
    • Basic Pager\n
        \n
      • A simple pager example using dynamic content.
        • \n
      \n
      • \n
    \n

    \n

    Usage in Vue

    \n

    Import the module into your project.

    \n
    import Vue from 'nativescript-vue';
    import Pager from '@nativescript-community/ui-pager/vue';

    Vue.use(Pager);
    \n

    Examples

    \n
      \n
    • Static Pager\n
        \n
      • A simple pager example using static content.
        • \n
      \n
      • \n
    • Basic Pager\n
        \n
      • A simple pager example using dynamic content.
        • \n
      \n
      • \n
    \n

    \n

    Custom Transformer

    \n

    You can define custom transformer for iOS/Android

    \n

    You can follow the Scale example for iOS and Android to create your custom transformer.

    \n

    Then you can register your transformer on app start with (this example registered the included but not registered Scale transformer):

    \n
    import { Pager } from '@nativescript-community/ui-pager';
    import transformer from '@nativescript-community/ui-pager/transformers/Scale';

    Pager.registerTransformer('scale', transformer)
    \n

    Then you can use that transformer with the transformers property of Pager

    \n","downloadStats":{"lastDay":43,"lastWeek":729,"lastMonth":4106}},"@nativescript-community/ui-collectionview-waterfall":{"name":"@nativescript-community/ui-collectionview-waterfall","version":"5.3.2","license":"ISC","readme":"\n\n

    @nativescript-community/ui-collectionview-waterfall

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript CollectionView waterfall Plugin.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-collectionview-waterfall

    \n

    \n

    Configuration

    \n

    To install the plugin run:

    \n
    import install from '@nativescript-community/ui-collectionview-waterfall';
    install();
    \n

    then simply use the layoutStyle="waterfall" as a collectionview property

    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":5,"lastWeek":123,"lastMonth":1522}},"@nativescript-community/ui-zoomimage":{"name":"@nativescript-community/ui-zoomimage","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-zoomimage

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Zoomable image view based on @nativescript-community/ui-image
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-zoomimage

    \n

    \n

    setup

    \n
    import imageModule = require(\"@nativescript-community/ui-zoomimage\");

    //do this before creating any image view
    imageModule.initialize({ isDownsampleEnabled: true });
    \n

    This component directly inherint @nativescript-community/ui-image so you can find the doc here

    \n

    It adds a few properties

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-image
    $ cd ui-image
    $ npm i
    $ npm run setup
    $ npm run build # && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":10,"lastWeek":19,"lastMonth":802}},"@nativescript-community/ui-checkbox":{"name":"@nativescript-community/ui-checkbox","version":"2.0.9","license":"ISC","readme":"\n\n

    @nativescript-community/ui-checkbox

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin for checkbox.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-checkbox

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    \n

    API

    \n

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nativecript-community/ui-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"checkProp\" text=\"myCheckText\" fillColor=\"myCheckColor\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n

    \n

    import { CheckBox } from '@nativecript-community/ui-checkbox';
    import { topmost } from '@nativescript/core/ui/frame';

    public toggleCheck() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nativecript-community/ui-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    Vue.registerElement(
      'CheckBox',
      () => require('@nativecript-community/ui-checkbox').CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-checkbox
    $ cd ui-checkbox
    $ npm i
    $ npm run setup
    $ npm run build # && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":11,"lastWeek":23,"lastMonth":117}},"@nativescript-community/https":{"name":"@nativescript-community/https","version":"4.1.4","license":"MIT","readme":"\n\n

    @nativescript-community/https

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Nativescript plugin for https requests
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n
    * [Installation](#installation)\n\t\t* [A drop-in replacement for the [default http module](https://docs.nativescript.org/cookbook/http).](#a-drop-in-replacement-for-the-default-http-modulehttpsdocsnativescriptorgcookbookhttp)\n* [Features](#features)\n* [FAQ](#faq)\n* [Installation](#installation-1)\n* [Examples](#examples)\n\t* [Hitting an API using `GET` method](#hitting-an-api-using-get-method)\n* [Configuration](#configuration)\n\t* [Installing your SSL certificate](#installing-your-ssl-certificate)\n\t\t* [Enabling SSL pinning](#enabling-ssl-pinning)\n\t\t* [Disabling SSL pinning](#disabling-ssl-pinning)\n\t* [useLegacy](#uselegacy)\n\t* [Cookie](#cookie)\n\t* [Enabling Cache](#enabling-cache)\n\t* [Multipart form data](#multipart-form-data)\n\t* [Options](#options)\n* [Webpack / bundling](#webpack--bundling)\n* [`iOS` Troubleshooting](#ios-troubleshooting)\n* [`Android` troubleshooting](#android-troubleshooting)\n
    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/https

    \n

    Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

    \n
    \n

    Android: version 4.x using okhttp 4.x changing minSDKVersion to 21! If lower needed stick to 3.x

    \n
    \n
    \n

    Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

    \n
    \n

    A drop-in replacement for the default http module.

    \n

    \n

    Features

    \n
      \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP
      • \n
    • HTTP/2 support
      • \n
    • Multiform part
      • \n
    • Cache
      • \n
    • Basic Cookie support
      • \n
    \n

    \n

    FAQ

    \n
    \n

    What the flip is SSL pinning and all this security mumbo jumbo?

    \n
    \n

    How to make your apps more secure with SSL pinning.

    \n
    \n

    Do I have to use SSL pinning?

    \n
    \n

    No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

    \n

    \n

    Installation

    \n
    tns plugin add @nativescript-community/https
    \n

    \n

    Examples

    \n

    Hitting an API using GET method

    \n
    import * as Https from '@nativescript-community/https';
    Https.request({
        url: 'https://httpbin.org/get',
        method: 'GET',
        timeout: 30, // seconds (default 10)
    })
        .then(function (response) {
            console.log('Https.request response', response);
        })
        .catch(function (error) {
            console.error('Https.request error', error);
        });
    \n

    \n

    Configuration

    \n

    Installing your SSL certificate

    \n

    Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

    \n

    \"Installing

    \n

    Enabling SSL pinning

    \n
    import { knownFolders } from 'file-system';
    import * as Https from '@nativescript-community/https';
    let dir = knownFolders.currentApp().getFolder('assets');
    let certificate = dir.getFile('httpbin.org.cer').path;
    Https.enableSSLPinning({ host: 'httpbin.org', certificate });
    \n

    Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

    \n

    Disabling SSL pinning

    \n
    import * as Https from '@nativescript-community/https';
    Https.disableSSLPinning();
    \n

    All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

    \n

    useLegacy

    \n

    There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

    \n
      \n
    • the content returned by a request is not the resulting string but an object. It follows HTTPContent format for the most part. You can call toJSON or toFile. The only difference is that toFile returns a Promise<File> which means that it is async and run in a background thread!
      • \n
    • an error return a content too allowing you to read its content.
      • \n
    \n

    Cookie

    \n

    By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

    \n

    Enabling Cache

    \n
    import { knownFolders, path } from '@nativescript/core/file-system';
    import * as Https from '@nativescript-community/https';
    Https.setCache({
        diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
        diskSize: 10 * 1024 * 1024, // 10 MiB
    });

    /// later on when calling your request you can use the cachePolicy option
    \n

    Multipart form data

    \n

    If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

    \n
    {
    \tdata: any
        parameterName: string,
        fileName?: string
        contentType?: string
    }
    \n

    if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

    \n

    Options

    \n
    export interface HttpsSSLPinningOptions {
        host: string;
        certificate: string;
        allowInvalidCertificates?: boolean;
        validatesDomainName?: boolean;
        commonName?: string;
    }
    import { HttpRequestOptions } from 'tns-core-modules/http';
    export interface HttpsRequestOptions extends HTTPOptions {
        useLegacy?: boolean;
        cachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache';
        onProgress?: (current: number, total: number) => void;
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    SSLPinning OptionDescription
    host: stringThis must be the request domain name eg sales.company.org.
    commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
    certificate: stringThe uri path to your .cer certificate file.
    allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
    validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Requests OptionDescription
    useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
    `cachePolicy?: 'noCache''onlyCache'
    onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
    \n

    \n

    Webpack / bundling

    \n

    Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

    \n

    \n

    iOS Troubleshooting

    \n
    \n

    Please educate yourself on iOS's App Transport Security before starting beef!

    \n
    \n

    If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n
    \n

    This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

    \n
    \n

    \n

    Android troubleshooting

    \n

    If you app crashes with a message that it's doing too much networking on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

    \n

    \n

    Thanks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WhoWhy
    Robert LavertyFor creating and maintaining this plugin for a long time
    Jeff WhelpleFor contributing
    Eddy VerbruggenFor maintaining this before it got transferred
    AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
    Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic example
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":76,"lastWeek":267,"lastMonth":1297}},"nativescript-modal-datetimepicker-ssi":{"name":"nativescript-modal-datetimepicker-ssi","version":"3.0.0","license":"Apache-2.0","readme":"

    nativescript-modal-datetimepicker-ssi \"Build \"npm\" \"npm\"

    \n

    \"Twitter

    \n

    \"NPM\"

    \n

    This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

    \n

    Android Screenshots

    \n

    Date Picker

    \n \n

    Time Picker

    \n \n

    iOS

    \n \n

    Installation

    \n
    tns plugin add nativescript-modal-datetimepicker-ssi
    \n

    Configuration

    \n

    For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

    \n

    This can be changed in App_Resources/Android/values-21/styles.xml

    \n
    <!-- Default style for DatePicker - in spinner mode -->
    <style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
        <item name=\"android:datePickerMode\">calendar</item>
    </style>

    <!-- Default style for TimePicker - in spinner mode -->
    <style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
        <item name=\"android:timePickerMode\">clock</item>
    </style>
    \n

    Usage

    \n

    NativeScript Core

    \n

    const ModalPicker = require(\"nativescript-modal-datetimepicker-ssi\").ModalDatetimepicker;

    const picker = new ModalPicker();

    // Pick Date
    exports.selectDate = function() {
        picker.pickDate({
            title: \"Select Your Birthday\",
            theme: \"light\",
            maxDate: new Date()
        }).then((result) => {
            // Note the month is 1-12 (unlike js which is 0-11)
            console.log(\"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year);
            var jsdate = new Date(result.year, result.month - 1, result.day);
        }).catch((error) => {
            console.log(\"Error: \" + error);
        });
    };

    // Pick Time
    exports.selectTime = function() {
        picker.pickTime()
            .then((result) => {
                console.log(\"Time is: \" + result.hour + \":\" + result.minute);
            })
            .catch((error) => {
                console.log(\"Error: \" + error);
            });
    };
    \n

    API

    \n

    pickDate(options): Promise<{}>;

    \n

    Returns a promise that resolves to date object (Note: the month is 1-12, unlike js which is 0-11)

    \n
    date: {
        day: number,
        month: number,
        year: number
    }
    \n

    pickTime(options): Promise<{}>;

    \n

    Returns a promise that resolves to time object

    \n
    time: {
        hour: number,
        minute: number
    }
    \n

    options conform to the following interface:

    \n
    export interface PickerOptions {
        title?: string, // iOS ONLY: The title to display above the picker, defaults to \"Choose A Time\" or \"Choose A Date\"
        theme?: string, // iOS ONLY: light for a light blurry effect, dark for a dark blurry effect - defaults to dark
        maxDate?: Date,
        minDate?: Date,
        startingHour?: number, // Ignored on pickDate()
        startingMinute?: number, // Ignored on pickDate()
        startingDate?: Date // Ignored on pickTime()
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":26}},"@nativescript-community/universal-links":{"name":"@nativescript-community/universal-links","version":"3.0.1","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/universal-links

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Universal links (IOS) and App Links (Android) support for NativeScript.
    \n \n

    \n
    \n

    When a user clicks a link to a website, it opens in the default web browser (Safari/Chrome). Universal linking allows your app to open instead of the web browser.

    \n

    Apple calls this Universal Links and Google calls it App Links, but they mean the same thing.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Migration to 3.x

    \n

    In version 3.0.0 the returned object is now simply the link as a string. It is not "parsed" anymore. The reason for that is that url-parse package used for this is pretty huge and not needed by most.\nYou can still parse like so:

    \n
    import * as urlparse from 'url-parse';

    function parseLink(link: string) {
      const url = urlparse(link, true);
      return {
        href: url.href,
        origin: url.origin
        pathname: url.pathname,
        query: url.query
      }
      
    }
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/universal-links

    \n

    \n

    Implementing Universal Links

    \n

    Both iOS (9.0 and newer) and Android (all versions) provide good APIs for universal linking.

    \n

    iOS

    \n

    Apple introduced a new deep linking API in iOS 9.0 called “Universal Links”. It provides a better user experience than the hacky deep linking options that existed in iOS 8.0 and below.

    \n

    First step is to add a file to the root of your website called apple-app-site-association. This is a JSON file and it looks like this:

    \n
    {
        \"applinks\": {
            \"apps\": [],
            \"details\": [
                {
                    \"appID\": \"TEAM_ID.BUNDLE_ID\", // ex: \"9JA89QQLNQ.com.apple.wwdc\"
                    \"paths\": [ \"/blog/*\"]
                }
            ]
        }
    }
    \n
      \n
    • This file will be downloaded automatically by every single user that installs or upgrades your iOS app.
      • \n
    • It MUST be served over HTTPS with a valid SSL certificate. If you need to test this, I recommend using https://ngrok.io.
      • \n
    • This file is only fetched once when the user first installs or upgrades the app. It must live on your website before your app is released. This also means that you can’t add new deep linking url patterns to your app until you push out a new app update to force users to refresh the file.
      • \n
    • I suggest using this Apple App Site Association (AASA) Validator to confirm your apple-app-site-association is correct.
      • \n
    \n

    Check out Apples' docs for more info.

    \n

    Next, you need to add the Associated Domains to your IOS project, either using XCode or manually adding the following code to your App_Resources/IOS/app.entitlements file. Please note the applinks: prefix, it won't work without it.

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
      <dict>
        <key>com.apple.developer.associated-domains</key>
        <array>
          <string>applinks:www.example.com</string>
        </array>
      </dict>
    </plist>
    \n

    Android

    \n

    In Android, universal linking is implemented using Intent Filters. By adding a BROWSABLE intent filter, you are saying that your app can be started by a user clicking on a website url.

    \n

    You don't need any server side changes for Android, only modify your app to add the Intent Filter.\nAdd this code to your App_Resources/Android/src/main/AndroidManifest.xml file:

    \n
    <activity
        android:name=\"com.tns.NativeScriptActivity\"
        android:label=\"@string/title_activity_kimera\" >

        <!-- Add this new section to your Activity -->
        <intent-filter>
            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\" />
            <category android:name=\"android.intent.category.BROWSABLE\" />

            <!-- Handle urls starting with \"https://www.example.com/blog\" -->
            <data android:scheme=\"https\"
                  android:host=\"www.example.com\"
                  android:pathPrefix=\"/blog\" />
        </intent-filter>
    </activity>
    \n

    \n

    Usage

    \n

    Call the registerUniversalLinkCallback somewhere in the startup of your app. This Angular example puts it in the AppComponent's ngOnInit method to provide a callback method which will receive an Universal Link object every time your app is opened by a website link:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { registerUniversalLinkCallback } from \"@nativescript-community/universal-links\";

    @Component({
      selector: \"my-app\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
      constructor() {}

      ngOnInit() {
        registerUniversalLinkCallback(ul => {
          // use the router to navigate to the screen
        });
      }
    }
    \n

    The universal link object has the following structure:

    \n
    {
      \"href\": \"https://www.example.com/blog?title=welcome\",
      \"origin\": \"https://www.example.com\",
      \"pathname\": \"/blog\",
      \"query\": \"?title=welcome\"
    }
    \n

    There is also a getUniversalLink() method that will return the last universal link which opened the app. This is useful in scenarios where your app is protected by a login screen. Check if the user is authenticated and then navigate to the desired path.

    \n
    import { getUniversalLink } from \"nativescript-plugin-universal-links\";

    const ul = getUniversalLink();
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":36,"lastWeek":284,"lastMonth":1613}},"@nativescript-community/css-theme":{"name":"@nativescript-community/css-theme","version":"1.2.10","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/css-theme
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Usage

    \n

    The theme will style your application using Element selectors - you don't need to add CSS classes on every element you\nneed to style.

    \n
    import \"@nativescript-community/css-theme\";
    \n

    This JS takes care of updating several classes on the app root elements, something that got\nincluded in @nativescript/core in {N} 6.1.

    \n

    Setting Dark or Light mode

    \n

    Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and\nset .ns-dark class to it - this will change all colorization to dark tones. For instance, if your page root is\nRadSideDrawer, just add a class to it, like this:

    \n
    <drawer:RadSideDrawer class=\"ns-dark\" xmlns:drawer=\"nativescript-ui-sidedrawer\">
        ...
    </drawer:RadSideDrawer>
    \n

    If your root is a frame, you can do this

    \n
    <Frame class=\"ns-dark\" defaultPage=\"root\"></Frame>
    \n

    For Angular, if your root is a page-router-outlet, you can set the .ns-dark class on it - it will pass it down to the\nFrame it renders.

    \n

    Setting Dark or Light mode from JavaScript

    \n

    Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with\nyour preferred mode - either Theme.Light or Theme.Dark, like this:

    \n
    import Theme from \"@nativescript-community/css-theme\";

    Theme.setMode(Theme.Dark); // Or Theme.Light
    \n

    Keep in mind that in {N} 6.2 these changes will override the default system mode. To\nrestore it, use Theme.Auto (available since Theme 2.3.0):

    \n
    import Theme from \"@nativescript-community/css-theme\";

    Theme.setMode(Theme.Auto);
    \n

    Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode\nor with a boolean parameter to ensure light or dark mode is set:

    \n
    import Theme from \"@nativescript-community/css-theme\";

    Theme.toggleDarkMode(); // to toggle between the modes

    // or

    Theme.toggleDarkMode(true);  // to ensure dark mode
    Theme.toggleDarkMode(false); // to ensure light mode
    \n
    A note of warning
    \n

    Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll\nhave to resort to requiring it:

    \n
    const Theme = require(\"@nativescript-community/css-theme\");

    Theme.setMode(Theme.Dark); // Or Theme.Light
    \n

    More root classes

    \n

    In addition to .ns-light and .ns-dark classes, the theme's little JavaScript file introduces .ns-root on the root element,\n.ns-android/.ns-ios depending on the current platform (which the theme extensively uses) and additionally\n.ns-portrait/.ns-landscape and .ns-phone/.ns-tablet, which should be self-explanatory.\nOf course .ns-portrait/.ns-landscape get updated on orientation change, so you can use it to show a two pane layout\nin landscape, for instance.

    \n

    Using Theme variables

    \n

    There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using\nSASS/SCSS.

    \n

    If you need to access specific theme variables like simple colors or sizes, do it through the const function:

    \n
    Button {
        background-color: const(forest);
        height: const(btn-height);
    }
    \n

    You can get light/dark colors:

    \n
    Button {
        color: light(primary);

        .ns-dark & {
            color: dark(primary);
        }
    }
    \n","downloadStats":{"lastDay":1,"lastWeek":6,"lastMonth":159}},"@nativescript-community/ble":{"name":"@nativescript-community/ble","version":"3.1.15","license":"MIT","readme":"\n\n

    @nativescript-community/ble

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Connect to and interact with Bluetooth LE peripherals.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ble

    \n

    \n

    API

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, mix and match these functions as you see fit:

    \n

    Prerequisites

    \n\n

    Discovery

    \n\n

    Connectivity

    \n\n

    Interaction

    \n\n

    Debugging

    \n\n

    isBluetoothEnabled

    \n

    Reports if bluetooth is enabled.

    \n
    // require the plugin
    import { Bluetooth } from '@nativescript-community/ble';
    var bluetooth = new Bluetooth();

    bluetooth.isBluetoothEnabled().then(
      function(enabled) {
        console.log(\"Enabled? \" + enabled);
      }
    );
    \n

    hasLocationPermission

    \n

    Since plugin version 1.2.0 the startScanning function will handle this internally so it's no longer mandatory to add permission checks to your code.

    \n

    On Android 6 you need to request permission to be able to interact with a Bluetooth peripheral (when the app is in the background) when targeting API level 23+. Even if the uses-permission tag for ACCESS_COARSE_LOCATION is present in AndroidManifest.xml.

    \n

    Note that for BLUETOOTH and BLUETOOTH_ADMIN you don't require runtime permission; adding those to AndroidManifest.xml suffices (which the plugin does for you).

    \n

    Note that hasLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using a device running Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
    bluetooth.hasLocationPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestLocationPermission' now
        console.log(\"Has Location Permission? \" + granted);
      }
    );
    \n

    requestLocationPermission

    \n

    Since plugin version 1.2.0 the startScanning function will handle this internally so it's no longer mandatory to add permission checks to your code.

    \n
    // if no permission was granted previously this will open a user consent screen
    bluetooth.requestLocationPermission().then(
      function(granted) {
        console.log(\"Location permission requested, user granted? \" + granted);
      }
    );
    \n

    enable (Android only)

    \n

    The promise will be rejected on iOS

    \n
    // This turns bluetooth on, will return false if the user denied the request.
    bluetooth.enable().then(
      function(enabled) {
        // use Bluetooth features if enabled is true 
      }
    );
    \n

    startScanning

    \n

    A few of the optional params require a bit of explanation:

    \n

    seconds

    \n

    Scanning for peripherals drains the battery quickly, so you better not scan any longer than necessary. If a peripheral is in range and not engaged in another connection it usually pops up in under a second. If you don't pass in a number of seconds you will need to manually call stopScanning.

    \n

    avoidDuplicates

    \n

    Set this to true if you don't want duplicates with the same serviceUUID reported in "onDiscovered" callback.\nIf true, only the first discovered peripheral with the same serviceUUID will be reported.

    \n

    skipPermissionCheck

    \n

    Set this to true if you don't want the plugin to check (and request) the required Bluetooth permissions.\nParticularly useful if you're running this function on a non-UI thread (ie. a Worker).\nRelevant on Android only.

    \n

    filters

    \n

    It's inefficient to scan for all available Bluetooth peripherals and have them report all services they offer.\nMoreover on Android if we don't use filters we must have location permissions and have GPS enabled

    \n

    If you're only interested in finding a heartrate peripheral for instance, pass in service UUID '180d' like this: filters: [{serviceUUID:'180d'}]. If you add 2 or more (comma separated) services then only peripherals supporting ALL those services will match.

    \n

    Note that UUID's are ALWAYS strings; don't pass integers.

    \n

    onDiscovered

    \n

    While scanning the plugin will immediately report back uniquely discovered peripherals.

    \n

    This function will receive an object representing the peripheral which contains these properties (and types):

    \n
      \n
    • UUID: string
      • \n
    • name: string
      • \n
    • RSSI: number (relative signal strength, can be used for distance measurement)
      • \n
    • services?: (optional - this is set once connected to the peripheral)
      • \n
    • manufacturerId?: number (optional)
      • \n
    • advertismentData?: { localName?:string manufacturerData?: ArrayBuffer; serviceUUIDs?: string[]; txPowerLevel?:number, flags?:number } (optional)
      • \n
    \n
    bluetooth.startScanning({
      filters: [{serviceUUID:'180d'}],
      seconds: 4,
      onDiscovered: function (peripheral) {
      \tconsole.log(\"Periperhal found with UUID: \" + peripheral.UUID);
      }
    }).then(function() {
      console.log(\"scanning complete\");
    }, function (err) {
      console.log(\"error while scanning: \" + err);
    });
    \n

    stopScanning

    \n

    At any time during a scan, being one where you passed in a number or seconds or not, you can stop the scan by calling this function.

    \n

    You may for instance want to stop scanning when the peripheral you found in startScanning's onDiscovered callback matches your criteria.

    \n
    bluetooth.stopScanning().then(function() {
      console.log(\"scanning stopped\");
    });
    \n

    connect

    \n

    Pass in the UUID of the peripheral you want to connect to and once a connection has been established the onConnected callback function will be invoked. This callback will received the peripheral object as before, but it's now enriched with a services property. An example of the returned peripheral object could be:

    \n
      peripheral: {
        UUID: '3424-542-4534-53454',
        name: 'Polar P7 Heartrate Monitor',
        RSSI: '-57',
        services: [{    
          UUID: '180d',
          name: 'Heartrate service',
          characteristics: [{
            UUID: '34534-54353-234324-343',
            name: 'Heartrate characteristic',
            properties: {
              read: true,
              write: false,
              writeWithoutResponse: false,
              notify: true
            }
          }]
        }]
      }
    \n

    Here's the connect function in action with an implementation of onConnected that simply dumps the entire peripheral object to the console:

    \n
    bluetooth.connect({
      UUID: '04343-23445-45243-423434',
      onConnected: function (peripheral) {
      \tconsole.log(\"Periperhal connected with UUID: \" + peripheral.UUID);

      \t// the peripheral object now has a list of available services:
      \tperipheral.services.forEach(function(service) {
      \t  console.log(\"service found: \" + JSON.stringify(service));
       });
      },
      onDisconnected: function (peripheral) {
      \tconsole.log(\"Periperhal disconnected with UUID: \" + peripheral.UUID);
      }
    });
    \n

    Also note that onDisconnected function: if you try to interact with the peripheral after this event you risk crashing your app.

    \n

    disconnect

    \n

    Once done interacting with the peripheral be a good citizen and disconnect. This will allow other applications establishing a connection.

    \n
    bluetooth.disconnect({
      UUID: '34234-5453-4453-54545'
    }).then(function() {
      console.log(\"disconnected successfully\");
    }, function (err) {
      // in this case you're probably best off treating this as a disconnected peripheral though
      console.log(\"disconnection error: \" + err);
    });
    \n

    read

    \n

    If a peripheral has a service that has a characteristic where properties.read is true then you can call the read function to retrieve the current state (value) of the characteristic.

    \n

    The promise will receive an object like this:

    \n
    {
      value: <ArrayBuffer>, // an ArrayBuffer which you can use to decode (see example below)
      ios: <72>, // the platform-specific binary value of the characteristic: NSData (iOS), byte[] (Android)
      android: <72>, // the platform-specific binary value of the characteristic: NSData (iOS), byte[] (Android)
      characteristicUUID: '434234-234234-234234-434'
    }
    \n

    Armed with this knowledge, let's invoke the read function:

    \n
    bluetooth.read({
      peripheralUUID: '34234-5453-4453-54545',
      serviceUUID: '180d',
      characteristicUUID: '3434-45234-34324-2343'
    }).then(function(result) {
      // fi. a heartrate monitor value (Uint8) can be retrieved like this:
      var data = new Uint8Array(result.value);
      console.log(\"Your heartrate is: \" + data[1] + \" bpm\");  
    }, function (err) {
      console.log(\"read error: \" + err);
    });
    \n

    write

    \n

    If a peripheral has a service that has a characteristic where properties.write is true then you can call the write function to update the current state (value) of the characteristic.

    \n

    The value may be a string or any array type value. If you pass a string you should pass the encoding too

    \n
    bluetooth.write({
      peripheralUUID: '34134-5453-4453-54545',
      serviceUUID: '180e',
      characteristicUUID: '3424-45234-34324-2343',
      value: [1]
    }).then(function(result) {
      console.log(\"value written\");
    }, function (err) {
      console.log(\"write error: \" + err);
    });
    \n

    writeWithoutResponse

    \n

    Same API as write, except that when the promise is invoked the value has not been written yet; it has only been requested to be written an no response will be received when it has.

    \n

    startNotifying

    \n

    If a peripheral has a service that has a characteristic where properties.notify is true then you can call the startNotifying function to retrieve the value changes of the characteristic.

    \n

    Usage is very much like read, but the result won't be sent to the promise, but to the onNotify callback function you pass in. This is because multiple notifications can be received and a promise can only resolve once. The value of the object sent to onNotify is the same as the one you get in the promise of read.

    \n
    bluetooth.startNotifying({
      peripheralUUID: '34234-5453-4453-54545',
      serviceUUID: '180d',
      characteristicUUID: '3434-45234-34324-2343',
      onNotify: function (result) {
        // see the read example for how to decode ArrayBuffers
    \tconsole.log(\"read: \" + JSON.stringify(result));
      }  
    }).then(function() {
      console.log(\"subscribed for notifications\");
    });
    \n

    stopNotifying

    \n

    Enough is enough. When you're no longer interested in the values the peripheral is sending you do this:

    \n
    bluetooth.stopNotifying({
      peripheralUUID: '34234-5453-4453-54545',
      serviceUUID: '180d',
      characteristicUUID: '3434-45234-34324-2343'
    }).then(function() {
      console.log(\"unsubscribed for notifications\");
    }, function (err) {
      console.log(\"unsubscribe error: \" + err);
    });
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic example showing that overriding N gestures works, even in modals
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":22,"lastWeek":57,"lastMonth":874}},"@nativescript-community/ui-collectionview-swipemenu":{"name":"@nativescript-community/ui-collectionview-swipemenu","version":"5.3.2","license":"ISC","readme":"\n\n

    @nativescript-community/ui-collectionview-swipemenu

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript CollectionView SwipeMenu Plugin.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-collectionview-swipemenu

    \n

    \n

    Configuration

    \n

    To install the plugin run:

    \n
    import install from '@nativescript-community/ui-collectionview-swipemenu';
    install();
    \n

    \n

    API

    \n

    \n

    CollectionView extensions

    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    swipeMenuOpenTriggered when a menu is opened in the CollectionView.
    swipeMenuCloseTriggered when a menu is closed in the CollectionView.
    \n

    Propert

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    closeCurrentMenu()voidClose any opened menu in the CollectionView.
    \n

    \n

    Usage

    \n

    First very important note. For this plugin to work correctly, collectionview items must be an object!\nThe plugin will add startingSide property to your items as needed to keep knowledge of which menu is opened and notify the template SwipeMenu. Might change in the future

    \n

    You need to add xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu" to your page tag, and then simply use <gvs:SwipeMenu/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

    \n

    Simple Example

    \n

    Create a simple array of objects in your JS/TS file.

    \n
    const items = [
        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
        { index: 1, name: 'EMERALD', color: '#2ecc71' },
        { index: 2, name: 'PETER RIVER', color: '#3498db' },
        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
        { index: 5, name: 'GREEN SEA', color: '#16a085' },
        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
    ];
    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" xmlns:gvs=\"@nativescript-community/ui-collectionview-swipemenu\" >
        <GridLayout>
            <gv:CollectionView items=\"items\" rowHeight=\"100\">
                <gv:CollectionView.itemTemplate>
                    <gvs:SwipeMenu startingSide=\"startingSide\">
                        <Label text=\"value\" verticalAlignment=\"center\"/>
                    </gvs:SwipeMenu>
                </gv:CollectionView.itemTemplate>
            </gv:CollectionView>
        </GridLayout>
    </Page>
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":1,"lastWeek":54,"lastMonth":402}},"@nativescript-community/sensors":{"name":"@nativescript-community/sensors","version":"1.4.0","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/sensors

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Nativescript plugin for Carto Mobile SDK
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/sensors

    \n

    \n

    Usage

    \n

    Here is a simple example. You can find more in the doc here

    \n
    import { startListeningForSensor, stopListeningForSensor } from '@nativescript-community/sensors';
    function onSensor(sensorData, sensorId: string) {

    }
    startListeningForSensor(sensor, this.onSensor);

    stopListeningForSensor(sensor, this.onSensor);
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":8,"lastWeek":10,"lastMonth":245}},"@nativescript/angular":{"name":"@nativescript/angular","version":"16.0.1","license":"Apache-2.0","readme":"

    @nativescript/angular

    \n

    For usage with NativeScript for Angular 12+ (13, etc.) projects.

    \n","downloadStats":{"lastDay":360,"lastWeek":2583,"lastMonth":13357}},"@nativescript-community/ui-material-activityindicator":{"name":"@nativescript-community/ui-material-activityindicator","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Circular progress indicator

    \n

    Material Design's Circular progress indicator component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-activityindicator
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-activityindicator
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-activityindicator@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mda="@nativescript-community/ui-material-activityindicator" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mda=\"@nativescript-community/ui-material-activityindicator\">
        <StackLayout horizontalAlignment=\"center\">
            <mda:ActivityIndicator busy=\"true\"/>
        </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdactivityindicator {
        color: #fff;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialActivityIndicatorModule } from \"@nativescript-community/ui-material-activityindicator/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialActivityIndicatorModule,
            ...
        ],
        ...
    })
    \n
    <MDActivityIndicator busy=\"true\"></MDActivityIndicator>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';

    Vue.use(ActivityIndicatorPlugin);
    \n
    <MDActivityIndicator busy=\"true\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript Activity Indicator so it already has all the same attributes

    \n","downloadStats":{"lastDay":13,"lastWeek":262,"lastMonth":3799}},"@nativescript-community/ui-image-colorfilter":{"name":"@nativescript-community/ui-image-colorfilter","version":"4.3.19","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-image-colorfilter

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n color matrix filters for @nativescript-community/ui-image
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-image-colorfilter

    \n

    \n

    setup

    \n
    import { installMixins } from \"@nativescript-community/ui-image-colorfilter\";

    //do this before creating any image view
    installMixins();
    \n

    It adds one property colorMatrix which is a number[]\nYou can find samples color matrix here

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-image
    $ cd ui-image
    $ npm i
    $ npm run setup
    $ npm run build # && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":865}},"@nativescript-community/ui-material-bottomsheet":{"name":"@nativescript-community/ui-material-bottomsheet","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Bottom sheet

    \n

    Material Design's Bottom sheet component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-bottomsheet
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-bottomsheet
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-bottomsheet@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    API

    \n
    export interface BottomSheetOptions {
        view: string | ViewBase; 
        // View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root.
        context?: any; 
        // Any context you want to pass to the view shown in bottom sheet. This same context will be available in the arguments of the shownInBottomSheet event handler.
        animated?: boolean; 
        // An optional parameter specifying whether to show the sheet view with animation.
        dismissOnBackgroundTap?: boolean; 
        // An optional parameter specifying whether to dismiss the sheet when clicking on background.
        dismissOnDraggingDownSheet?: boolean; 
        // An optional parameter specifying whether to disable dragging the sheet to dismiss.
        dismissOnBackButton?: boolean; 
        // An optional parameter that specifies whether to close the sheet when pressing the back button.
        closeCallback?: Function; 
        //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
        trackingScrollView?: string; 
        // optional id of the scroll view to track
        transparent?: boolean; 
        // optional parameter to make the bottomsheet transparent
        ignoreTopSafeArea?: boolean; 
        // optional ios parameter to top safe area. Default is true
        ignoreBottomSafeArea?: boolean; 
        // optional ios parameter to bottom safe area. Default is false
        disableDimBackground?: boolean; 
        // optional parameter to remove the dim background
        skipCollapsedState?: boolean; 
        // optional Android parameter to skip midway state when view is greater than 50%. Default is false
        peekHeight?: number; 
        // optional parameter to set the collapsed sheet height. To work on iOS you need to set trackingScrollView. Also ensure the scrollView is taking the full height of the bottomsheet content. Otherwise the \"full\" height wont be computed correctly
        ignoreKeyboardHeight?: boolean; 
        //(iOS only) A Boolean value that controls whether the height of the keyboard should affect the bottom sheet's frame when the keyboard shows on the screen. (Default: true)
        onChangeState?: onChangeStateBottomSheet; 
        // One works to be called on the scroll of the sheet. Parameters: state (CLOSED, DRAGGING, DRAGGING, COLLAPSED) and slideOffset is the new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.
        canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true.
    }
    \n

    Usage

    \n

    Plain NativeScript

    \n

    We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

    \n

    JavaScript

    \n
    var material = require(\"@nativescript-community/ui-material-bottomsheet\");

    material.install();
    \n

    TypeScript

    \n
    import { install } from \"@nativescript-community/ui-material-bottomsheet\";
    install();
    \n

    Uses the same kind of API as NativeScript Modals.

    \n

    TS

    \n
    const modalViewModulets = \"ns-ui-category/modal-view/basics/modal-ts-view-page\";
    export function openBottomSheet(args) {
        const mainView: Button = <Button>args.object;
        const context = { username: \"test_username\", password: \"test\" };
        const fullscreen = true;
        mainView.showBottomSheet({
            view: modalViewModulets,
            context,
            closeCallback: (username, password) => {
                bottom-sheet
                alert(`Username: ${username} : Password: ${password}`);
            },
            fullscreen
        });
    }
    \n

    \n

    NativeScript + Vue 2

    \n
    import Vue from 'nativescript-vue';
    import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
    import { install } from \"@nativescript-community/ui-material-bottomsheet\";
    install();

    Vue.use(BottomSheetPlugin);
    \n

    Then you can show a Vue component:

    \n
    import MyComponent from 'MyComponent.vue';

    //inside another Vue component
    const options: VueBottomSheetOptions = {
        // props to be passed to MyComponent
        props: {
            someProp: true,
            anotherProp: false
        },
        // listeners to be connected to MyComponent
        on: {
            someEvent: (value) => { console.log(value) }
        }
    };
    this.$showBottomSheet(MyComponent, options)
    \n

    NativeScript + Vue 3

    \n
    import { createApp } from 'nativescript-vue';
    import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
    import { install } from \"@nativescript-community/ui-material-bottomsheet\";
    install();

    const app = createApp(...);
    app.use(BottomSheetPlugin);
    \n

    Then you can show a Vue component:

    \n
    import { useBottomSheet } from \"@nativescript-community/ui-material-bottomsheet/vue3\";
    import MyComponent from 'MyComponent.vue';


    const options: VueBottomSheetOptions = {
        // props to be passed to MyComponent
        props: {
            someProp: true,
            anotherProp: false
        },
        // listeners to be connected to MyComponent
        on: {
            someEvent: (value) => { console.log(value) }
        }
    };

    const { showBottomSheet, closeBottomSheet } = useBottomSheet()

    showBottomSheet(MyComponent, options);
    closeBottomSheet();
    \n

    \n

    NativeScript + Angular

    \n

    First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

    \n
    import { NativeScriptMaterialBottomSheetModule} from \"@nativescript-community/ui-material-bottomsheet/angular\";

    @NgModule({
        imports: [
            // This will call the install method and inject a global service called BottomSheetService
            NativeScriptMaterialBottomSheetModule.forRoot()
        ],
        ...
    })
    \n

    now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

    \n

    ItemComponent

    \n
    import { Component,  ViewContainerRef } from '@angular/core';
    import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';
    import { ShareOptionsComponent } from './share-options.component';

    @Component({
        selector: 'ns-item',
        templateUrl: './item.component.html',
        moduleId: module.id
    })
    export class ItemComponent {
        constructor(
            private bottomSheet: BottomSheetService, 
            private containerRef: ViewContainerRef,
        ) {}

        showOptions() {
            const options: BottomSheetOptions = {
                viewContainerRef: this.containerRef,
                context: ['Facebook', 'Google', 'Twitter']
            };

            this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
                console.log('Option selected:', result);
            });
        }
    }
    \n

    ShareOptionsComponent

    \n
    <ListView
        [items]=\"options\"
        (itemTap)=\"onTap($event)\"
        separatorColor=\"white\"
        class=\"list-group\"
        height=\"200\"
    >
        <ng-template let-option=\"item\">
            <Label
                class=\"list-group-item\"
                [text]=\"option\"
            >    </Label>
        </ng-template>
    </ListView>
    \n
    import { Component, OnInit } from '@angular/core';
    import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';
    import { ItemEventData } from '@nativescript/core/ui/list-view';

    @Component({
        selector: 'ns-share-options',
        templateUrl: 'share-options.component.html'
    })
    export class ShareOptionsComponent implements OnInit {
        options: string[];
        
        // The BottomSheetService injects the BottomSheetParams to the component
        // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
        constructor(private params: BottomSheetParams) {}

        ngOnInit() {
            this.options = this.params.context;
        }

        onTap({ index }: ItemEventData) {
            this.params.closeCallback(this.options[index]);
        }
    }
    \n","downloadStats":{"lastDay":122,"lastWeek":831,"lastMonth":5395}},"@nativescript-community/ui-material-textview":{"name":"@nativescript-community/ui-material-textview","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Text view

    \n

    Material Design's Text view component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-textview
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-textview
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-textview@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textview" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mdt=\"@nativescript-community/ui-material-textview\">
        <StackLayout horizontalAlignment=\"center\">
            <mdt:TextView text=\"raised textview\"/>
            <mdt:TextView variant=\"flat\" text=\"flat textview\"/>
            <mdt:TextView variant=\"text\" text=\"text textview\"/>
            <mdt:TextView elevation=\"5\" rippleColor=\"red\" text=\"raised custom textview\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdtextview {
        ripple-color: blue;
        elevation: 4;
        stroke-color: blue;             /* the border color when active */
        stroke-inactive-color: green;   /* the border color when inactive */
        floating-color: blue;           /* the floating placeholder color when active */
        floating-inactive-color: green; /* the floating placeholder color when inactive */
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTextViewModule } from \"@nativescript-community/ui-material-textview/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTextViewModule,
            ...
        ],
        ...
    })
    \n
    <MDTextView  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
            (textChange)=\"onTextChange($event)\">    </MDTextView>
    \n

    \n

    NativeScript + Vue

    \n
    import TextViewPlugin from '@nativescript-community/ui-material-textview/vue';

    Vue.use(TextViewPlugin);
    \n
    <MDTextView helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
            @textChange=\"onTextChange\"/>
    \n

    Also, you can bind the text to some instance data using the v-model directive:

    \n
    <MDTextView v-model=\"value\" />
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript TextView so it already has all the same attributes.

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the textview. Can be outline or underline or filled. No value means underline textview

    \n
      \n
    • errorColor optional
      • \n
    \n

    An attribute to set the error color of the textview.

    \n
      \n
    • helper optional
      • \n
    \n

    An attribute to set the helper text of the textview.

    \n
      \n
    • floating optional
      • \n
    \n

    A boolean attribute to set the floating state of the textview.

    \n","downloadStats":{"lastDay":5,"lastWeek":250,"lastMonth":4175}},"@nativescript-community/ui-material-ripple":{"name":"@nativescript-community/ui-material-ripple","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Ripple

    \n

    Material Design's Ripple component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-ripple
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-ripple
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-ripple@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdr=\"@nativescript-community/ui-material-ripple\">
        <StackLayout horizontalAlignment=\"center\">
            <mdr:Ripple rippleColor=\"green\" width=\"100\" height=\"100\" />
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdripple {
        ripple-color: blue;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialRippleModule } from \"@nativescript-community/ui-material-ripple/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialRippleModule,
            ...
        ],
        ...
    })
    \n
    <MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"></MDRipple>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';

    Vue.use(RipplePlugin);
    \n
    <MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript StackLayout.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the ripple.

    \n","downloadStats":{"lastDay":78,"lastWeek":654,"lastMonth":5090}},"@nativescript-community/ui-chart":{"name":"@nativescript-community/ui-chart","version":"1.2.32","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/ui-chart
      • \n
    \n
    \n

    Usage

    \n

    For gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):

    \n
    import { install } from '@nativescript-community/ui-chart';
    install();
    \n

    You can also check Wiki for any useful material.

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:ch="@nativescript-community/ui-chart" on the Page element.

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ch=\"@nativescript-community/ui-chart\">
        <ScrollView>
            <StackLayout>
                <Label text=\"Line Chart\" fontSize=\"20\"/>
                <ch:LineChart id=\"line-chart\" backgroundColor=\"lightgray\" width=\"300\" height=\"350\" loaded=\"onLineChartLoaded\"/>
            </StackLayout>
        </ScrollView>
    </Page>
    \n

    TypeScript

    \n
    import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
    import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
    import { LineData } from '@nativescript-community/ui-chart/data/LineData';

    export function onLineChartLoaded(args) {
        const chart = args.object as LineChart;

        chart.setScaleEnabled(true);
        chart.setDragEnabled(true);

        const data = new Array(500).fill(0).map((v, i) => ({
            index: i,
            value: Math.random() * 1,
        }))    ;

        const sets = [];
        const set = new LineDataSet(data, 'Legend Label', 'index', 'value');
        set.setColor('blue');
        sets.push(set);

        // Create a data object with the data sets
        const ld = new LineData(sets);

        // Set data
        chart.setData(ld);
    }
    \n

    NativeScript + Vue

    \n
    Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
    \n
    <LineChart ref=\"chart\" width=\"300\" height=\"400\" @loaded=\"onChartLoaded\"> </LineChart>
    \n
    import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
    import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
    import { LineData } from '@nativescript-community/ui-chart/data/LineData';
    \n
    onChartLoaded() {
        const chart = this.$refs.chart['nativeView'] as LineChart;
        chart.backgroundColor = 'white';

        // enable touch gestures
        chart.setTouchEnabled(true);

        chart.setDrawGridBackground(false);

        // enable scaling and dragging
        chart.setDragEnabled(true);
        chart.setScaleEnabled(true);

        // force pinch zoom along both axis
        chart.setPinchZoom(true);

        // disable dual axis (only use LEFT axis)
        chart.getAxisRight().setEnabled(false);

        const myData = new Array(500).fill(0).map((v, i) => ({
            index: i,
            value: Math.random() * 1,
        }));

        const sets = [];
        const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
        set.setColor('blue');
        sets.push(set);

        // Create a data object with the data sets
        const ld = new LineData(sets);

        // Set data
        chart.setData(ld);
    }
    \n

    NativeScript + Angular

    \n

    Register the element in app.module.ts

    \n
    registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
    \n
    <LineChart width=\"300\" height=\"400\" (loaded)=\"onChartLoaded($event)\"> </LineChart>
    \n
    import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
    import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
    import { LineData } from '@nativescript-community/ui-chart/data/LineData';
    \n
    onChartLoaded(args) {
        const chart = args.object as LineChart;
        chart.backgroundColor = 'white';

        // enable touch gestures
        chart.setTouchEnabled(true);

        chart.setDrawGridBackground(false);

        // enable scaling and dragging
        chart.setDragEnabled(true);
        chart.setScaleEnabled(true);

        // force pinch zoom along both axis
        chart.setPinchZoom(true);

        // disable dual axis (only use LEFT axis)
        chart.getAxisRight().setEnabled(false);

        const myData = new Array(500).fill(0).map((v, i) => ({
            index: i,
            value: Math.random() * 1,
        }));

        const sets = [];
        const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
        set.setColor('blue');
        sets.push(set);

        // Create a data object with the data sets
        const ld = new LineData(sets);

        // Set data
        chart.setData(ld);
    }
    \n

    About

    \n

    This plugin is based on MPAndroidChart, a powerful & easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of MPAndroidChart and the rest of his team.

    \n

    Instead of directly importing existing native libraries, this library has been rewritten in TypeScript, using @nativescript-community/ui-canvas plugin API as a basis. Plugin 'ui-canvas' is an extremely powerful tool that converts Android Native Canvas API to a cross-platform API for NativeScript framework. In few words, 'ui-chart' has the same code-base for both Android and iOS.

    \n

    Additionally, @nativescript-community/gesturehandler plugin is used for handling chart gestures.

    \n

    In short, these are the benefits of rewriting library into a NativeScript plugin:

    \n
      \n
    • Same codebase for Android and iOS. Makes maintaining the library very easy.
      • \n
    • Smaller apps size because there are no native libs or native frameworks to consume space. All done with the power of {N}
      • \n
    \n

    Originally, the main goal was to prevent the need for marshalling all datasets. This is extremely heavy, costly and unnecessary!

    \n

    Upon running demo samples, one can conclude it is the fastest drawing library, in comparison to nativescript-ui-chart and nativescript-mpchart.

    \n

    That is because:

    \n
      \n
    • It does not marshal or recreate any subset of the data sets, but directly uses the provided array instead
      • \n
    • It can share the same data array between multiple datasets
      • \n
    • It can still use the power of native arrays to NOT marshal arrays of positions while drawing lines with @nativescript-community/ui-canvas
      • \n
    \n

    Documentation

    \n

    The NativeScript 'ui-chart' plugin is based on the MPAndroidChart library.\nIn few words, its API is identical. The possibility to add API reference will be considered in the future.

    \n","downloadStats":{"lastDay":24,"lastWeek":175,"lastMonth":2228}},"@nativescript-community/ui-canvaslabel":{"name":"@nativescript-community/ui-canvaslabel","version":"1.2.10","license":"ISC","readme":"\n\n

    @nativescript-community/ui-canvaslabel

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    A NativeScript Label widget. This widget takes a different approch from other label components. It is based on nativescript-canvas and allows drawing\nmultiple labels within one single widget.\nIt allows extreme complexity and customization.

    \n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-canvaslabel

    \n

    \n

    Configuration

    \n

    It works almost like a normal label.\nYou can create spans, just like with the {N} labels. However there is a big difference with the {N} component.\nCSpan do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.

    \n

    For now CanvasLabel do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.

    \n

    The CanvasLabel component supports most labels properties:\ncolor, fontSize,fontFamily,fontStyle, fontWeight,textAlignment. Those can be defined through css.

    \n

    Now with CanvasLabel you don't set the text directly. Instead you create CSpan or CGroup

    \n

    Here is a complex Vue layout as an example

    \n
    <CanvasLabel id=\"canvaslabel\" fontSize=\"10\" color=\"white\" backgroundColor=\"darkgray\">
        <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
            <CSpan :text=\"item.text1\" fontWeight=\"bold\" />
            <CSpan :text=\"'\\n' + item.text2\" color=\"#ccc\" fontSize=\"16\" />
        </CGroup>

        <CGroup fontSize=\"12\" verticalAlignment=\"bottom\" paddingLeft=\"20\" paddingBottom=\"1\">
            <CSpan :text=\"item.icon1\" fontSize=\"20\" color=\"green\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon1\" verticalTextAlignment=\"center\" />
            <CSpan :text=\"'   ' + item.icon2\" fontSize=\"20\" color=\"red\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon2\" verticalTextAlignment=\"center\" />
            <CSpan :text=\"'   ' + item.icon3\" fontSize=\"20\" color=\"yellow\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon3\" verticalTextAlignment=\"center\" />
        </CGroup>

        <CGroup fontSize=\"12\" verticalAlignment=\"middle\" horizontalAlignment=\"center\" textAlignment=\"right\" paddingRight=\"20\" color=\"brown\" width=\"60\">
            <CSpan :text=\"item.icon1\" fontSize=\"14\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"'\\n' + item.texticon1\" paddingRight=\"10\" />
        </CGroup>
        <CSpan :text=\"item.text4\" color=\"lightgray\" fontSize=\"14\" textAlignment=\"right\" paddingRight=\"20\" paddingTop=\"4\" />
    </CanvasLabel>
    \n

    For full example / doc look at the vue demo and the typings.

    \n

    \n

    Performances

    \n

    CanvasLabel is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.\nThat technique is used by many apps looking for the best performances. One of the best examples is Telegram.

    \n

    \n

    TODO / Limitations

    \n
      \n
    • For now there is no accessibility support (but it should be possible)
      • \n
    • The label can't size itself. I will add some ways of doing that. But possibly not in the way you are used to.
      • \n
    • no ellipsize support yet. Will come (this could be a solution)
      • \n
    • a lot of canvas features can be added like shadows, gradient ...
      • \n
    • transform supoort should be possible at least for groups and top spans.
      • \n
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic SVG example
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":10,"lastWeek":192,"lastMonth":1543}},"@nativescript-community/audio":{"name":"@nativescript-community/audio","version":"6.4.4","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/audio

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin to record and play audio.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/audio

    \n

    \n

    Installation

    \n
    ns plugin add @nativescript-community/audio
    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Permissions

    \n

    iOS

    \n

    You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Android

    \n

    If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

    \n
        <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
    \n

    \n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from '@nativescript-community/audio';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        // You can pass a duration hint to control the behavior of other application that may
        // be holding audio focus.
        // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
        // Then when you play a song, the previous owner of the
        // audio focus will stop. When your song stops
        // the previous holder will resume.
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('@nativescript-community/audio');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function () {
        console.log('finished playing');
      },
      errorCallback: function (errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function (args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log('something went wrong...', err);
      });
    \n

    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":8,"lastWeek":15,"lastMonth":311}},"@nativescript-community/ui-material-snackbar":{"name":"@nativescript-community/ui-material-snackbar","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Snackbar

    \n

    Material Design's Snackbar component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage
      5. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-snackbar
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-snackbar
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-snackbar@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    TypeScript

    \n
    import { SnackBar } from '@nativescript-community/ui-material-snackbar';

    const snackbar = new SnackBar();

    export function showSimpleSnackbar() {
        snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
    }

    export function showActionSnackbar() {
        snackbar
            .action({
                message: `I'm a snackbar with an action`,
                actionText: 'Dismiss',
                hideDelay: 2000
            })
            .then(result => console.log('Action Snackbar:', result));
    }

    export function showColorfulSnackbar() {
        snackbar
            .action({
                message: `I'm a colorful snackbar`,
                textColor: 'blue',
                actionTextColor: 'yellow',
                backgroundColor: 'green',
                actionText: 'Dismiss',
                hideDelay: 2000
            })
            .then(result => console.log('Action Snackbar:', result));
    }
    \n","downloadStats":{"lastDay":15,"lastWeek":279,"lastMonth":3846}},"@nativescript-community/motion-activity":{"name":"@nativescript-community/motion-activity","version":"1.1.4","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/motion-activity

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin for Motion Activity Detection
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/motion-activity

    \n

    iOS

    \n

    Dont forget to add NSMotionUsageDescription to your app Info.plist

    \n

    \n

    Usage

    \n
    import ActivityRecognition from '@nativescript-community/motion-activity'
    import { request } from '@nativescript-community/perms'
    const activityRecognition = ActivityRecognition.getInstance();

    activityRecognition.on(ActivityRecognition.activityEvent, function (eventData) {
    \tconst activityType = eventData.activity.type;
    \tconst activityConfidence = eventData.activity.confidence;

    \t...
    });

    if (__ANDROID__ && android.os.Build.VERSION.SDK_INT >= 29) {
    \t// on android >= 29 you need to request permission at runtime
    \tconst result = await request('android.permission.ACTIVITY_RECOGNITION');
    \tif (result[0] !== 'authorized') {
    \t\tthrow new Error('missing ACTIVITY_RECOGNITION permission: ' + result[0])
    \t}
    }
    activityRecognition.start();
    \n

    Examples:

    \n
      \n
    • Basic \n
        \n
      • A basic usage example.
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":118}},"@nativescript-community/ui-webview-rtc":{"name":"@nativescript-community/ui-webview-rtc","version":"1.4.9","license":"ISC","readme":"

    NativeScript WebView RTC

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Plugin to add webRTC support to @nativescript-community/ui-webview

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add @nativescript-community/ui-webview-rtc

    \n

    This command automatically installs the necessary files, as well as stores @nativescript-community/ui-webview-rtc as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    To install the plugin run

    \n
    import install from '@nativescript-community/ui-webview-rtc';
    install();
    \n

    then simply use the webRTC="true" as a webview property

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":297}},"@nativescript-community/ui-material-floatingactionbutton":{"name":"@nativescript-community/ui-material-floatingactionbutton","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Floating action button

    \n

    Material Design's Floating action button component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-floatingactionbutton
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-floatingactionbutton
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-floatingactionbutton@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdf=\"@nativescript-community/ui-material-floatingactionbutton\">
        <StackLayout horizontalAlignment=\"center\">
            <mdf:FloatingActionButton src=\"res://ic_action_add\"/>
            <mdf:FloatingActionButton elevation=\"5\" src=\"res://ic_action_add\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdfloatingactionbutton {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { registerElement } from '@nativescript/angular/element-registry';
    import { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton';
    registerElement('MDFloatingActionButton', () => FloatingActionButton);
    \n
    <MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"></MDFloatingActionButton>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue';

    Vue.use(FloatingActionButtonPlugin);
    \n
    <MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript Button so it already has all the same attributes.

    \n
      \n
    • src optional
      • \n
    \n

    An attribute to set the floatingactionbutton icon. For now FAB only support images as icon

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the floatingactionbutton.

    \n","downloadStats":{"lastDay":13,"lastWeek":265,"lastMonth":3998}},"nativescript-swipe-view":{"name":"nativescript-swipe-view","version":"1.2.1","license":"Apache-2.0","readme":"

    NativeScript Swipe View

    \n

    A NativeScript plugin to create a swipe view with actions. This is mainly to be used as items for ListView to add swipe actions for items. But can also be used in other scenarios

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-swipe-view

    \n

    This command automatically installs the necessary files, as well as stores nativescript-swipe-view as a dependency in your project's package.json file.

    \n

    Usage (Core)

    \n
    <ListView items=\"{{ items }}\">
        <ListView.itemTemplate>
            <sv:SwipeView>
                <sv:SwipeView.leftActionsTemplate>
                    <StackLayout backgroundColor=\"blue\" color=\"white\" tap=\"onStar\">
                        <Label text=\"Star\"/>
                    </StackLayout>
                </sv:SwipeView.leftActionsTemplate>
                <sv:SwipeView.rightActionsTemplate>
                    <StackLayout backgroundColor=\"red\" color=\"white\" tap=\"onDelete\">
                        <Label text=\"Delete\" />
                    </StackLayout>
                </sv:SwipeView.rightActionsTemplate>

                <GridLayout backgroundColor=\"white\">
                    <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </sv:SwipeView>
        </ListView.itemTemplate>
    </ListView>
    \n

    Usage in other NativeScript flavors (Angular, Vue, etc.)

    \n

    Currently the plugin has not been tested nor made to support other NS flavors, since I'm not actively using those. If you are such a dev, I'm happily accepting PRs to support all the NS flavors ot there :)

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":18}},"@nativescript-community/ui-material-progress":{"name":"@nativescript-community/ui-material-progress","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Linear progress indicator

    \n

    Material Design's Linear progress indicator component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-progress
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-progress
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-progress@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdp=\"@nativescript-community/ui-material-progress\">
        <StackLayout horizontalAlignment=\"center\">
            <mdp:Progress value=\"50\" maxValue=\"100\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdprogress {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialProgressModule } from \"@nativescript-community/ui-material-progress/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialProgressModule,
            ...
        ],
        ...
    })
    \n
    <MDProgress v-model=\"value\" maxValue=\"100\"></MDProgress>
    \n

    \n

    NativeScript + Vue

    \n
    import ProgressPlugin from '@nativescript-community/ui-material-progress/vue';

    Vue.use(ProgressPlugin);
    \n
    <MDProgress value=\"50\" maxValue=\"100\"></MDProgress>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript Progress so it already has all the same attributes.

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the progress.

    \n","downloadStats":{"lastDay":15,"lastWeek":255,"lastMonth":4138}},"@nativescript-community/ui-material-dialogs":{"name":"@nativescript-community/ui-material-dialogs","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Dialogs

    \n

    Material Design's Dialogs component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage
      5. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-dialogs
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-dialogs
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-dialogs@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Uses the same API as NativeScript Dialogs.

    \n

    Adds one option for alert:

    \n
      \n
    • view : can be a NativeScript View or a path to to XML component. The custom view will be added to the dialog. Possibilities become endless.
      • \n
    \n

    \n

    TS

    \n
    import { login, alert, prompt } from \"@nativescript-community/ui-material-dialogs\";

    alert(\"Your message\").then(()=> {
        console.log(\"Dialog closed!\");
    });
    \n","downloadStats":{"lastDay":12,"lastWeek":232,"lastMonth":3735}},"@nativescript-community/ui-material-bottom-navigation":{"name":"@nativescript-community/ui-material-bottom-navigation","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Bottom navigation

    \n

    Material Design's Bottom navigation component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n
    ns plugin add @nativescript-community/ui-material-bottom-navigation
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mdt=\"@nativescript-community/ui-material-bottom-navigation\">
        <mdt:BottomNavigation width=\"100%\" id=\"main-tabview\" class=\"main-tabview\"
                    selectedIndexChanged=\"{{onSelectedIndexChanged}}\"
                    iosOverflowSafeArea=\"true\" selectedIndex=\"0\" tabsPosition=\"bottom\" swipeEnabled=\"false\">
                <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
                <mdt:TabStrip backgroundColor=\"{{ color('dark')}}\" color=\"{{ color('blue')}}\">
                    <mdt:TabStripItem  class=\"tab-item\">
                        <Image src=\"font://&#xe1b0;\" class=\"fal\"></Image>
                        <Label text=\"Home\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                    </mdt:TabStripItem>
                    <mdt:TabStripItem class=\"tab-item\">
                        <Label text=\"{{ L('search') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                        <Image src=\"font://&#xe024;\" class=\"fal\"></Image>
                    </mdt:TabStripItem>
                    <mdt:TabStripItem  class=\"tab-item\">
                        <Label text=\"{{ L('trips') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                        <Image src=\"font://&#xf03a;\" class=\"fal\"></Image>
                    </mdt:TabStripItem>
                    <mdt:TabStripItem class=\"tab-item\">
                        <Label text=\"{{ L('inbox') }}\" ios:fontSize=\"10\" android:fontSize=\"12\"></Label>
                        <Image src=\"font://&#xf4b6;\" class=\"fal\" id=\"tab-inbox-icon-fal\"></Image>
                    </mdt:TabStripItem>
                </mdt:TabStrip>

                <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
                <mdt:TabContentItem>
                    <GridLayout>
                        <Label text=\"Home\" class=\"h2 text-center\"></Label>
                    </GridLayout>
                </mdt:TabContentItem>
                <mdt:TabContentItem>
                    <GridLayout>
                        <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                    </GridLayout>
                </mdt:TabContentItem>
                <mdt:TabContentItem>
                    <GridLayout>
                        <Label text=\"TRansactions\" class=\"h2 text-center\"></Label>
                    </GridLayout>
                </mdt:TabContentItem>
                <mdt:TabContentItem>
                    <GridLayout>
                        <Label text=\"Inbox\" class=\"h2 text-center\"></Label>
                    </GridLayout>
                </mdt:TabContentItem>
            </mdt:BottomNavigation>
    </Page>
    \n

    CSS

    \n
    BottomNavigation.bottom-nav {
        background-color: orangered;
        color: gold;
        font-size: 18;
    }

    MDTabStripItem.tabstripitem-active {
        background-color: teal;
    }

    MDTabStripItem.tabstripitem-active:active {
        background-color: yellowgreen;
    }

    MDTabContentItem.first-tabcontent {
        background-color: seashell;
        color: olive;
    }
    MDTabContentItem.second-tabcontent {
        background-color: slategray;
        color: aquamarine;
    }
    MDTabContentItem.third-tabcontent {
        background-color: blueviolet;
        color: antiquewhite;
    }
    BottomNavigation TabStrip {
        highlight-color: red;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-bottom-navigation/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialBottomNavigationModule,
            ...
        ],
        ...
    })
    \n
        <MDBottomNavigation selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <MDTabStrip>
                <MDTabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </MDTabStripItem>
            </MDTabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
        </MDBottomNavigation>
    \n

    \n

    NativeScript + Vue

    \n
    import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

    Vue.use(BottomNavigation);
    \n
    <MDBottomNavigation selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <MDTabStrip>
                <MDTabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </MDTabStripItem>
                <MDTabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </MDTabStripItem>
            </MDTabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
            <MDTabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </MDTabContentItem>
        </MDBottomNavigation>
    \n

    \n

    NativeScript + React

    \n

    First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

    \n
    import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
    import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';

    registerTabNavigationBase();
    registerBottomNavigation();
    \n

    When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the bottomNavigationNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:

    \n
    import * as React from 'react';

    export function BottomNavigation() {
        const [selectedIndex, setSelectedIndex] = React.useState(0);

        return (
            <bottomNavigation
                selectedIndex={selectedIndex}
                onSelectedIndexChanged={(args) => {
                    setSelectedIndex(args.newIndex);
                }}
                style={{ backgroundColor: 'orange' }}
            >
                {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
                <tabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Home</label>
                        <image nodeRole=\"image\" src=\"font://&#xf015;\" className=\"fas\" />
                    </tabStripItem>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Account</label>
                        <image nodeRole=\"image\" src=\"font://&#xf007;\" className=\"fas\" />
                    </tabStripItem>
                    <tabStripItem nodeRole=\"items\">
                        <label nodeRole=\"label\">Search</label>
                        <image nodeRole=\"image\" src=\"font://&#xf00e;\" className=\"fas\" />
                    </tabStripItem>
                </tabStrip>

                {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'blue' }}>
                        <label style={{ color: 'white' }}>Home Page</label>
                    </gridLayout>
                </tabContentItem>
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'cyan' }}>
                        <label style={{ color: 'black' }}>Account Page</label>
                    </gridLayout>
                </tabContentItem>
                <tabContentItem nodeRole=\"items\">
                    <gridLayout style={{ backgroundColor: 'magenta' }}>
                        <label style={{ color: 'black' }}>Search Page</label>
                    </gridLayout>
                </tabContentItem>
            </bottomNavigation>
        );
    }
    \n

    Troubleshooting

    \n

    If you see an error like this when writing e.g. <bottomNavigation> into your JSX:

    \n
    \n

    Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

    \n
    \n

    Make sure that you have:

    \n
      \n
    1. Installed the react-nativescript npm module.
      2. \n
    2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
      3. \n
    3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
      4. \n
    4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerBottomNavigation() methods).
      5. \n
    5. If using Visual Studio Code, option-click the import @nativescript-community/ui-material-bottom-navigation/react to jump to the file; opening the file will force it to load its provided typings.
      6. \n
    \n

    API

    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    itemsArrayGets or sets the items of the BottomNavigation.
    selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
    swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
    offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
    tabStripTabStripGets or sets the tab strip of the BottomNavigation.
    tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
    iOSTabBarItemsAlignment"leading", "justified", "center", "centerSelected"iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    selectedIndexChangedEmitted when the selectedIndex property is changed.
    loadedEmitted when the view is loaded.
    unloadedEmitted when the view is unloaded.
    layoutChangedEmitted when the layout bounds of a view changes due to layout processing.
    \n","downloadStats":{"lastDay":212,"lastWeek":1265,"lastMonth":6708}},"@nativescript-community/ui-material-cardview":{"name":"@nativescript-community/ui-material-cardview","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Card

    \n

    Material Design's Card component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For N 7.0

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-cardview
      • \n
    \n

    \n

    For N 6.x

    \n
      \n
    • tns plugin add nativescript-material-cardview
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-cardview@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-material-cardview" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdc=\"@nativescript-community/ui-material-cardview\">
        <StackLayout horizontalAlignment=\"center\">
            <mdc:CardView width=\"100\" height=\"100\"/>
            <mdc:CardView elevation=\"5\" rippleColor=\"red\"  width=\"100\" height=\"100\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdcardview {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialCardViewModule } from \"@nativescript-community/ui-material-cardview/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialCardViewModule,
            ...
        ],
        ...
    })
    \n
    <MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"></MDCardView>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';

    Vue.use(CardViewPlugin);
    \n
    <MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript StackLayout

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the cardview.

    \n","downloadStats":{"lastDay":9,"lastWeek":258,"lastMonth":3893}},"@oliverphaser/nativescript-eventify":{"name":"@oliverphaser/nativescript-eventify","version":"1.0.13","license":"MIT","readme":"

    \"npm\"\n\"apple\"\n\"android\"\n
    \n\"support\"

    \n

    NativeScript Eventify

    \n

    NativeScript has a method called notify you can use to notify an observable of changes. But you can't use it to trigger events like tap or swipe, enter NativeScript Eventify.

    \n

    NativeScript 8

    \n

    This will work only on NativeScript 8.

    \n

    Supported Events

    \n
      \n
    • tap
      • \n
    \n

    Roadmap

    \n
      \n
    • Add support for doubleTap events
      • \n
    • Add support for longPress events
      • \n
    • Add support for swipe events
      • \n
    • Add support for pan events
      • \n
    • Add support for pinch events
      • \n
    • Add support for rotate events
      • \n
    • Add support for touch events
      • \n
    \n

    Installation

    \n
    ns plugin add @oliverphaser/nativescript-eventify
    \n

    Usage

    \n

    Just require it once.

    \n
    //app.js
    require(\"@oliverphaser/nativescript-eventify\");
    \n
    /**
    * home-page.js
    *
    * Assume the view already has the event listner(s) setup.
    */

    // Simulates a tap event
    view.eventify({ eventName: \"tap\", object: view });
    \n

    Take a look at this Playground for a working example.

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertiesRequiredDescription
    EventDataYesThe eventName and object, just like using notify.
    InfoSometimesSome of the events (i.e. swipe) will need extra information
    \n

    Info

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventRequiredPropertiesDescription
    tapNon/an/a
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":205}},"@nativescript-community/ui-mapbox":{"name":"@nativescript-community/ui-mapbox","version":"6.2.20","license":"MIT","readme":"\n\n

    @nativescript-community/ui-mapbox

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Prerequisites

    \n

    You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

    \n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-mapbox

    \n

    \n

    Configuration

    \n

    Add any other additional configuration instructions here.

    \n

    \n

    Issues

    \n

    If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\nns platform remove ios and ns platform add ios.

    \n

    On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

    \n
      <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
    \n

    If you get an error related to TelemetryService then please check it's there.

    \n

    \n

    Usage

    \n

    XML

    \n

    You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

    \n

    A simple layout could look like this:

    \n\n

    Could be rendered by a definition like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"@nativescript-community/ui-mapbox\" navigatingTo=\"navigatingTo\">
      <StackLayout>
        <Label text=\"Nice map, huh!\" class=\"title\"/>
        <ContentView height=\"240\" width=\"240\">
          <map:MapboxView
              accessToken=\"your_token\"
              mapStyle=\"traffic_night\"
              latitude=\"52.3702160\"
              longitude=\"4.8951680\"
              zoomLevel=\"3\"
              showUserLocation=\"true\"
              mapReady=\"onMapReady\">
          </map:MapboxView>
        </ContentView>
      </StackLayout>
    </Page>
    \n

    Angular

    \n

    Component:

    \n
    import { registerElement } from '@nativescript/angular';
    registerElement(\"Mapbox\", () => require(\"@nativescript-community/ui-mapbox\").MapboxView);
    \n

    View:

    \n
      <ContentView height=\"100%\" width=\"100%\">
        <Mapbox
            accessToken=\"your_token\"
            mapStyle=\"traffic_day\"
            latitude=\"50.467735\"
            longitude=\"13.427718\"
            hideCompass=\"true\"
            zoomLevel=\"18\"
            showUserLocation=\"false\"
            disableZoom=\"false\"
            disableRotation=\"false\"
            disableScroll=\"false\"
            disableTilt=\"false\"
            (mapReady)=\"onMapReady($event)\">
        </Mapbox>
      </ContentView>
    \n

    \n

    API

    \n

    All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondefaultdescription
    accesstoken-see 'Prerequisites' above
    delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
    mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
    latitude -Set the center of the map by passing this in
    longitude-.. and this as well
    zoomLevel00-20
    showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
    hideCompass falseDon't show the compass in the top right corner during rotation of the map
    hideLogofalseMapbox requires false if you're on a free plan
    hideAttribution trueMapbox requires false if you're on a free plan
    disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
    disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
    disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
    disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    moveBeginEvent-The name of a function to be called when the map has begun to move.
    moveEndEvent-The name of a function to be called when the map has completed moving.
    locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
    locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
    \n

    \n

    Markers

    \n

    This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

    \n

    Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

    \n
    var mapbox = require(\"@nativescript-community/ui-mapbox\");

    function onMapReady(args) {
      // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
      var nativeMapView = args.ios ? args.ios : args.android;
      console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

      // .. or use the convenience methods exposed on args.map, for instance:
      args.map.addMarkers([
        {
          lat: 52.3602160,
          lng: 4.8891680,
          title: 'One-line title here',
          subtitle: 'Really really nice location',
          selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
          onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
        }]
      );
    }

    exports.onMapReady = onMapReady;
    \n

    \n

    Viewport

    \n
    var mapbox = require(\"@nativescript-community/ui-mapbox\");

    function onMapReady(args) {
      args.map.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true
          }
      );
    }

    exports.onMapReady = onMapReady;
    \n

    The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

    \n

    Check out the usage details on the functions below.

    \n

    \n

    Declaring Programmatically

    \n

    Add a container to your view XML where you want to programmatically add the map. Give it an id.

    \n
    <ContentView id=\"mapContainer\" />
    \n

    \n

    Methods

    \n

    show

    \n

        const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

        const settings = {

          // NOTE: passing in the container here.

          container: contentView,
          accessToken: ACCESS_TOKEN,
          style: MapStyle.LIGHT,
          margins: {
            left: 18,
            right: 18,
            top: isIOS ? 390 : 454,
            bottom: isIOS ? 50 : 8
          },
          center: {
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 9, // 0 (most of the world) to 20, default 0
          showUserLocation: true, // default false
          hideAttribution: true, // default false
          hideLogo: true, // default false
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disableTilt: false, // default false
          markers: [
            {
              id: 1,
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location',
              iconPath: 'res/markers/green_pin_marker.png',
              onTap: () => console.log(\"'Nice location' marker tapped\"),
              onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
            }
          ]
        };

        console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

        const mapView = new MapboxView();

        // Bind some event handlers onto our newly created map view. 

        mapView.on( 'mapReady', ( args : any ) => {

          console.log( \"main-view-model: onMapReady fired.\" );

          // this is an instance of class MapboxView

          this.mapboxView = args.map;

          // get a reference to the Mapbox API shim object so we can directly call its methods.

          this.mapbox = this.mapboxView.getMapboxApi();

          this.mapbox.setOnMapClickListener( point => {
            console.log(`>> Map clicked: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnMapLongClickListener( point => {
            console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnScrollListener((point: LatLng) => {
            // console.log(`>> Map scrolled`);
          });

          this.mapbox.setOnFlingListener(() => {
            console.log(`>> Map flinged\"`);
          }).catch( err => console.log(err) );

        });

        mapView.setConfig( settings );
        contentView.content = mapView;
    \n

    hide

    \n

    All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

    \n
      mapbox.hide();
    \n

    unhide

    \n

    If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

    \n
      mapbox.unhide();
    \n

    destroy 💥

    \n

    To clean up the map entirely you can destroy instead of hide it:

    \n
      mapbox.destroy();
    \n

    setMapStyle

    \n

    You can update the map style after you've loaded it.

    \n
    \n

    With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

    \n
    \n
      mapbox.setMapStyle(mapbox.MapStyle.DARK);
    \n

    addMarkers

    \n
      import { MapboxMarker } from \"@nativescript-community/ui-mapbox\";

      const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
        id: 2, // can be user in 'removeMarkers()'
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        title: 'One-line title here', // no popup unless set
        subtitle: 'Infamous subtitle!',
        // icon: 'res://cool_marker', // preferred way, otherwise use:
        icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
        iconPath: '~/assets/markers/home_marker.png',
        selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
        onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
        onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
      };

      mapbox.addMarkers([
        firstMarker,
        {
          // more markers..
        }
      ])
    \n

    Updating markers

    \n

    Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

    \n
      firstMarker.update({
        lat: 52.3622160,
        lng: 4.8911680,
        title: 'One-line title here (UPDATE)',
        subtitle: 'Updated subtitle',
        selected: true, // this will trigger the callout upon update
        onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
        onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
      })
    \n

    removeMarkers

    \n

    You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

    \n
      // remove all markers
      mapbox.removeMarkers();

      // remove specific markers by id
      mapbox.removeMarkers([1, 2]);
    \n

    setViewport

    \n

    If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

    \n
      mapbox.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true // default true
          }
      )
    \n

    getViewport

    \n
      mapbox.getViewport().then(
          function(result) {
            console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
          }
      )
    \n

    setCenter

    \n
      mapbox.setCenter(
          {
            lat: 52.3602160, // mandatory
            lng: 4.8891680, // mandatory
            animated: false // default true
          }
      )
    \n

    getCenter

    \n

    Here the promise callback makes sense, so adding it to the example:

    \n
      mapbox.getCenter().then(
          function(result) {
            console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getCenter error: \" + error);
          }
      )
    \n

    setZoomLevel

    \n
      mapbox.setZoomLevel(
          {
            level: 6.5, // mandatory, 0-20
            animated: true // default true
          }
      )
    \n

    getZoomLevel

    \n
      mapbox.getZoomLevel().then(
          function(result) {
            console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getZoomLevel error: \" + error);
          }
      )
    \n

    animateCamera

    \n
      // this is a boring triangle drawn near Amsterdam Central Station
      mapbox.animateCamera({
        // this is where we animate to
        target: {
            lat: 52.3732160,
            lng: 4.8941680
        },
        zoomLevel: 17, // Android
        altitude: 2000, // iOS (meters from the ground)
        bearing: 270, // Where the camera is pointing, 0-360 (degrees)
        tilt: 50,
        duration: 5000 // default 10000 (milliseconds)
      })
    \n

    setTilt (Android only)

    \n
      mapbox.setTilt(
          {
            tilt: 40, // default 30 (degrees angle)
            duration: 4000 // default 5000 (milliseconds)
          }
      )
    \n

    getTilt (Android only)

    \n
      mapbox.getTilt().then(
          function(tilt) {
            console.log(\"Current map tilt: \" +  tilt);
          }
      )
    \n

    getUserLocation

    \n

    If the user's location is shown on the map you can get their coordinates and speed:

    \n
      mapbox.getUserLocation().then(
          function(userLocation) {
            console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
            console.log(\"Current user speed: \" +  userLocation.speed);
          }
      )
    \n

    trackUser

    \n

    In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

    \n
      mapbox.trackUser({
        mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
        animated: true
      });
    \n

    addSource

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

    \n

    Supported source types:

    \n
      \n
    • Vector
      • \n
    • GeoJson
      • \n
    • Raster
      • \n
    \n

    Adds a vector to GeoJSON source to the map.

    \n
      mapbox.addSource( id, {
        type: 'vector',
        url: 'url to source'
      } );
    \n

    -or-

    \n
      mapbox.addSource( id, {
        'type': 'geojson',
        'data': {
          \"type\": \"Feature\",
            \"geometry\": {
            \"type\": \"LineString\",
              \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
            }
          }
        }
      );
    \n

    removeSource

    \n

    Remove a source by id

    \n
      mapbox.removeSource( id );
    \n

    addLayer

    \n

    https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

    \n

    Supported layer types:

    \n
      \n
    • Line
      • \n
    • Circle
      • \n
    • Fill
      • \n
    • Symbol
      • \n
    • Raster
      • \n
    \n

    To add a line:

    \n
      mapbox.addLayer({
        'id': someid,
        'type': 'line',
        'source': {
          'type': 'geojson',
          'data': {
            \"type\": \"Feature\",
              \"geometry\": {
              \"type\": \"LineString\",
                \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
              }
            }
          }
        },
        'layout': {
          'line-cap': 'round',
          'line-join': 'round'
        },    
        'paint': {
          'line-color': '#ed6498',
          'line-width': 5,
          'line-opacity': .8,
          'line-dash-array': [ 1, 1, 1, ..]
        }
      });
    \n

    To add a circle:

    \n
      mapbox.addLayer({
        \"id\": someid,
        \"type\": 'circle',
        \"source\": {
          \"type\": 'geojson',
          \"data\": {
            \"type\": \"Feature\",
            \"geometry\": {
              \"type\": \"Point\",
              \"coordinates\": [ lng, lat ]
            }
          }
        }, 
        \"paint\": {
          \"circle-radius\": {
            \"stops\": [
              [0, 0],
              [20, 8000 ]
            ],
            \"base\": 2
          },
          'circle-opacity': 0.05,
          'circle-color': '#ed6498',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ed6498'
        } 
      });
    \n

    Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

    \n

    removeLayer

    \n

    Remove a layer added with addLayer() by id.

    \n
      mapbox.removeLayer( id );
    \n

    queryRenderedFeatures

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures\nReturns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

    \n
    mapbox
      .queryRenderedFeatures({
        point: {
          lat: 52.3701494345567,
          lng: 4.823684692382513,
      \t},
        layers: ['circle-with-source-object'],
        filter: ['==', ['get', 'querySample'], '2'],
      })
      .then((result) => console.log('query rendered features', result))
    \n

    querySourceFeatures

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures\nReturns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

    \n
    mapbox
      .querySourceFeatures('source_id', { filter: ['==', ['get', 'querySample'], '2'] })
      .then((result) => console.log('query source features', result));
    \n

    addLinePoint

    \n

    Dynamically add a point to a line.

    \n
      mapbox.addLinePoint( <id of line layer>, lnglat )
    \n

    where lnglat is an array of two points, a longitude and a latitude.

    \n

    addPolygon (deprecated, use addLayer() instead)

    \n

    Draw a shape. Just connect the dots like we did as a toddler.

    \n

    The first person to tweet a snowman drawn with this function gets a T-shirt (from @eddyverbruggen ;-)).

    \n
      // after adding this, scroll to Amsterdam to see a semi-transparent red square
      mapbox.addPolygon(
          {
            id: 1, // optional, can be used in 'removePolygons'
            fillColor: new Color(\"red\"),
            fillOpacity: 0.7,

            // stroke-related properties are only effective on iOS
            strokeColor: new Color(\"green\"),
            strokeWidth: 8,
            strokeOpacity: 0.5,

            points: [
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              },
              {
                lat: 52.35421556258807,
                lng: 4.9308013916015625
              },
              {
                lat: 52.353796172573944,
                lng: 4.8799896240234375
              },
              {
                lat: 52.3864966440161,
                lng: 4.8621368408203125
              },
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              }
            ]
          })
          .then(result => console.log(\"Mapbox addPolygon done\"))
          .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
    \n

    removePolygons

    \n

    You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

    \n
      // remove all polygons
      mapbox.removePolygons();

      // remove specific polygons by id
      mapbox.removePolygons([1, 2]);
    \n

    addPolyline

    \n

    Deprecated. Use addLayer() instead.

    \n

    Draw a polyline. Connect the points given as parameters.

    \n
      // Draw a two segment line near Amsterdam Central Station
      mapbox.addPolyline({
          id: 1, // optional, can be used in 'removePolylines'
          color: '#336699', // Set the color of the line (default black)
          width: 7, // Set the width of the line (default 5)
          opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
          points: [
              {
                  'lat': 52.3833160, // mandatory
                  'lng': 4.8991780 // mandatory
              },
              {
                  'lat': 52.3834160,
                  'lng': 4.8991880
              },
              {
                  'lat': 52.3835160,
                  'lng': 4.8991980
              }
          ]
      });
    \n

    removePolylines

    \n

    Deprecated. Use removeLayer() instead.

    \n

    You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

    \n
      // remove all polylines
      mapbox.removePolylines();

      // remove specific polylines by id
      mapbox.removePolylines([1, 2]);
    \n

    setOnMapClickListener

    \n

    Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

    \n
      mapbox.setOnMapClickListener((point: LatLng) => {
        console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnMapLongClickListener

    \n

    Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

    \n
      mapbox.setOnMapLongClickListener((point: LatLng) => {
        console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnScrollListener

    \n

    Add a listener to retrieve lat and lng of where the user scrolls to on the map.

    \n
      mapbox.setOnScrollListener((point?: LatLng) => {
        console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    \n

    Offline maps

    \n

    For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

    \n

    Important read: the offline maps documentation by Mapbox.

    \n

    downloadOfflineRegion

    \n

    This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

    \n
      mapbox.downloadOfflineRegion(
        {
          accessToken: accessToken, // required for Android in case no map has been shown yet
          name: \"Amsterdam\", // this name can be used to delete the region later
          style: mapbox.MapStyle.OUTDOORS,
          minZoom: 9,
          maxZoom: 11,
          bounds: {
            north: 52.4820,
            east: 5.1087,
            south: 52.2581,
            west: 4.6816
          },
          // this function is called many times during a download, so
          // use it to show an awesome progress bar!
          onProgress: function (progress) {
            console.log(\"Download progress: \" + JSON.stringify(progress));
          }
        }
      ).then(
        function() {
          console.log(\"Offline region downloaded\");
        },
        function(error) {
          console.log(\"Download error: \" + error);
        }
      );
    \n

    Advanced example: download the current viewport

    \n

    Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

    \n
      // I spare you the error handling on this one..
      mapbox.getViewport().then(function(viewport) {
        mapbox.downloadOfflineRegion(
          {
            name: \"LastViewport\", // anything you like really
            style: mapbox.MapStyle.LIGHT,
            minZoom: viewport.zoomLevel,
            maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
            bounds: viewport.bounds,
            onProgress: function (progress) {
              console.log(\"Download %: \" + progress.percentage);
            }
          }
        );
      });
    \n

    listOfflineRegions

    \n

    To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

    \n
      mapbox.listOfflineRegions({
        // required for Android in case no map has been shown yet
        accessToken: accessToken
      }).then(
        function(regions) {
          console.log(JSON.stringify(JSON.stringify(regions));
        },
        function(error) {
          console.log(\"Error while listing offline regions: \" + error);
        }
      );
    \n

    deleteOfflineRegion

    \n

    You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

    \n
      mapbox.deleteOfflineRegion({
        name: \"Amsterdam\"
      }).then(
        function() {
          console.log(\"Offline region deleted\");
        },
        function(error) {
          console.log(\"Error while deleting an offline region: \" + error);
        }
      );
    \n

    \n

    Permissions

    \n

    hasFineLocationPermission / requestFineLocationPermission

    \n

    On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

    \n

    You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

    \n

    Note that hasFineLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
      mapbox.hasFineLocationPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestFineLocationPermission' now
            console.log(\"Has Location Permission? \" + granted);
          }
      );

      // if no permission was granted previously this will open a user consent screen
      mapbox.requestFineLocationPermission().then(
          function() {
            console.log(\"Location permission requested\");
          }
      );
    \n

    Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

    \n

    \n

    Using marker images from the internet

    \n

    If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

    \n
    \t<key>NSAppTransportSecurity</key>
    \t<dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
    \t</dict>
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":65,"lastWeek":230,"lastMonth":839}},"@akylas/nativescript":{"name":"@akylas/nativescript","version":"8.5.10","license":"Apache-2.0","readme":"

    \n \n \"NativeScript\"\n \n

    \n

    @nativescript/core

    \n

    A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.

    \n

    Learn more at docs.nativescript.org

    \n","downloadStats":{"lastDay":13,"lastWeek":25,"lastMonth":970}},"esolution-nativescript-photoviewer":{"name":"esolution-nativescript-photoviewer","version":"3.0.1-alpha-3","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript PhotoViewer

    \n

    A simple photo-viewer/gallery component for NativeScript.

    \n

    Limitations

    \n

    Since the plugin is based on two different libraries for two different platforms their features are also somewhat diferent:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformStateRemote images (url)Local images (resource)Titles/CreditsAlbum ViewColor Palette
    iOS:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
    Android:x: (Broken):white_check_mark::x::x::white_check_mark::white_check_mark:
    \n

    If anyone has tips on a better android library that has same or similar features to the iOS, let us know.

    \n

    Latest version

    \n

    3.0.0

    \n
      \n
    • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
      • \n
    • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.
      • \n
    \n

    Installation

    \n

    Run tns plugin add nativescript-photoviewer in your root directory of your project.

    \n

    Usage

    \n

    It's best to take a look at the included demo app(s) for advanced usages. Below is just a simple example on how to get the plugin running with minimal effort using vanilla nativescript (ts). For Angular, see demo-ng.

    \n
    // Include the module
    import { PhotoViewer, PhotoViewerOptions, PaletteType, NYTPhotoItem } from \"nativescript-photoviewer\";
    var photoViewer: PhotoViewer; 

    // Create a new instace of PhotoViewer in the onLoaded event. Very important to do the init here! 
    export function pageLoaded(args: EventData) {\t
        photoViewer = new PhotoViewer();
    }

    // Show gallery
    export function openGallery(args: EventData){

        let image1 = \"https://blabla/image1.jpg\";
        let image2 = \"https://blabla/image2.jpg\";
        let image3 = \"https://blabla/image3.jpg\";
        let image4 = \"https://blabla/image4.jpg\";
        let myImages = [image1, image2, image3, image4];

        // Example on how to use the options class (optional)
        let photoviewerOptions: PhotoViewerOptions = {
            startIndex: 0,
            ios: {
                completionCallback: galleryLoaded 
            },
            android: {
                paletteType: PaletteType.DarkVibrant,
                showAlbum: false
            }
        };
    \t
        photoViewer.showGallery(myImages, photoviewerOptions);
    }
    \n

    Changelog

    \n

    3.0.0

    \n
      \n
    • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
      • \n
    • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.
      • \n
    \n

    2.1.5

    \n
      \n
    • Fix for iOS datasource issue (premature garbage collect) - caused images to dissapear when using gallery.
      • \n
    \n

    2.1.1

    \n
      \n
    • Forgot to inlcude the photoviewer.d.ts file in the npm package. Add a reference to it in your references.d.ts.
      • \n
    • Added a vanilla js demo app demo-js.
      • \n
    \n

    2.1.0

    \n
      \n
    • Fixed Android & iOS promise handling, will resolve properly now when gallery is closed (both in vanilla tns and Angular).
      • \n
    • Added Angular demo app demo-ng.
      • \n
    • Known issue 1: Gallery does not work when opened from another modal.
      • \n
    • Known issue 2: When using Android Pie (9), for some reason, images don't appear untill you zoom (on simulator, not tested on real device).
      • \n
    \n

    2.0.2

    \n
      \n
    • Code refactor to TypeScript, added typings.
      • \n
    • Renamed showViewer() to showGallery() that now has 1 mandatory param and 1 optional param.
      • \n
    • Fixed the issue where the image datasource would be GC'ed on iOS (important to init the plugin in the onLoaded event)
      • \n
    • Updated demo app to reflect the changes, added album demo for Android.
      • \n
    • Known issue: Gallery does not work when opened from another modal.
      • \n
    \n

    1.5.0

    \n
      \n
    • Photo Viewer now works inside Modal Views, typo fix for 'completionCallback'. Big thanks to @Eonfuzz
      • \n
    • Fixed the iOS datasource to be more strong referenced & the _android ref. Big thanks to @miex0r
      • \n
    • Known issue: [iOS]If loading high-res images via urls, the images are being loaded before the gallery is shown. So the UI might freeze. A workaround for this could be to use the completionCallback and show a spinner when opening the gallery.
      • \n
    \n

    1.4.0

    \n
      \n
    • Moved param for index to a property: startIndex
      • \n
    • (iOS) Added property to set completionCallback
      • \n
    • (Android) Added option to show album first or go directly to fullscreen slides. More similar to iOS.
      • \n
    • (Android) Added property to set background color palette for fullscreen slides.
      • \n
    • Fixed demo app
      • \n
    • Changed license to MIT
      • \n
    \n

    1.3.0

    \n
      \n
    • Updated iOS pod to newer version (fixed minor breaking changes)
      • \n
    • Added a second paramter to the showViewer(ARRAY, INDEX?) function. Makes the gallery init on that image: photoViewer.showViewer(myImages,1);
      • \n
    \n

    Screenshots

    \n

    \"Demo \"Demo\n\"Demo \"Demo

    \n

    Contribution

    \n

    I'll review & accept pull requests that improve the plugin and assign credit.

    \n

    Credits

    \n

    The plugin is based on the following libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    NYTPhotoViewerImageGallery
    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":25}},"@nativescript-community/ui-material-speeddial":{"name":"@nativescript-community/ui-material-speeddial","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Speed dial

    \n

    Material Design's Speed dial component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage
      5. \n
    \n

    Installation

    \n
    ns plugin add @nativescript-community/ui-material-speeddial
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';

    Vue.use(speeddialPlugin);
    \n
    <MDSpeedDial buttonFontSize=\"26\" text=\"mdi-one-up\"  buttonClass=\"mdi\" buttonBackgroundColor=\"yellow\" @tap=\"onTap\">
        <MDSpeedDialItem icon=\"res://ic_action_add\" title=\"test1\" backgroundColor=\"red\"  @tap=\"onTap\"/>
        <MDSpeedDialItem text=\"mdi-card-account-mail\" title=\"test2\" buttonClass=\"mdi\" backgroundColor=\"green\"  @tap=\"onTap\"/>
        <MDSpeedDialItem backgroundImage=\"~/images/iu.jpg\"  backgroundColor=\"blue\"  @tap=\"onTap\"/>
        <MDSpeedDialItem icon=\"res://ic_action_add\" title=\"test4\" backgroundColor=\"orange\" @tap=\"onTap\"/>
    </MDSpeedDial>
    \n","downloadStats":{"lastDay":4,"lastWeek":177,"lastMonth":2870}},"nativescript-theme-core":{"name":"nativescript-theme-core","version":"2.0.24","license":"Apache-2.0","readme":"

    NativeScript Theme: Core V2

    \n

    \"npm\"\n\"npm\"

    \n

    Home of the core NativeScript theme 2.0 beta. The documentation of the beta theme will live here, until it gets final.

    \n\n

    Breaking changes

    \n
      \n
    • The theme requires 2 files to be loaded - the core theme and a skin on top of it. Read Usage for more info.
      • \n
    • The theme is now applied using Element selectors, if you need the old classes approach - it has moved to\n.compat CSS/SCSS files, e.g. core.compat.css and blue.compat.css.
      • \n
    • Theme 2.0 beta requires some JavaScript to be loaded for {N} before 6.1 which helps with the styling.
      • \n
    • Theme 2.0 replaces node-sass with sass which is more up to date feature-wise and doesn't have a native dependency.\nIt does still work with node-sass though.
      • \n
    \n

    Usage

    \n

    The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just\nload the core CSS (the default skin was added in 2.0.18):

    \n
     @import \"~nativescript-theme-core/css/core.css\";
    \n

    or alternatively SCSS:

    \n
    @import \"~nativescript-theme-core/core\";
    \n

    If you want, you can choose from several different skins. To do that, you can include a second CSS/SCC file just after\nyou load the core CSS/SCSS (if you use Theme 2.017 or earlier, you will have to include both files for the styling\nto work.

    \n
    @import \"~nativescript-theme-core/css/core.css\";
    @import \"~nativescript-theme-core/css/blue.css\";
    \n

    or

    \n
    @import \"~nativescript-theme-core/core\";
    @import \"~nativescript-theme-core/blue\";
    \n

    In order to import just the Theme variables in one of your modules, use this:

    \n
    @import \"~nativescript-theme-core/scss/variables\";
    \n

    It will import just the variables and mixins, without any additional styling.

    \n

    Here is the old list of Theme skins - the first two are now the Core default Light and Dark skins, the rest are\nall the Light skins available, listed by name.

    \n

    \"Multiple

    \n

    The theme will style your application using Element selectors - you don't need to add CSS classes on every element you\nneed to style.

    \n

    Additionally, if you need to create you own skin, you can start just from the core theme - it includes the sizing and\ninitial styling of the components.

    \n

    Usage before NativeScript 6.1

    \n

    In order to use the 2.0 beta theme before {N} 6.1, you will also need to include a small JS file in your project:

    \n
    import \"nativescript-theme-core\";
    \n

    This JS takes care of updating several classes on the app root elements, something that got\nincluded in tns-core-modules in {N} 6.1.

    \n

    Setting Dark or Light mode

    \n

    Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and\nset .ns-dark class to it - this will change all colorization to dark tones. For instance, if your page root is\nRadSideDrawer, just add a class to it, like this:

    \n
    <drawer:RadSideDrawer class=\"ns-dark\" xmlns:drawer=\"nativescript-ui-sidedrawer\">
        ...
    </drawer:RadSideDrawer>
    \n

    If your root is a frame, you can do this

    \n
    <Frame class=\"ns-dark\" defaultPage=\"root\"></Frame>
    \n

    For Angular, if your root is a page-router-outlet, you can set the .ns-dark class on it - it will pass it down to the\nFrame it renders.

    \n

    Setting Dark or Light mode from JavaScript

    \n

    Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with\nyour preferred mode - either Theme.Light or Theme.dark, like this:

    \n
    import Theme from \"nativescript-theme-core\";

    Theme.setMode(Theme.Dark); // Or Theme.Light
    \n

    Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode\nor with a boolean parameter to ensure light or dark mode is set:

    \n
    import Theme from \"nativescript-theme-core\";

    Theme.toggleMode(); // to toggle between the modes

    // or

    Theme.toggleMode(true);  // to ensure dark mode
    Theme.toggleMode(false); // to ensure light mode
    \n
    A note of warning
    \n

    Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll\nhave to resort to requiring it:

    \n
    const Theme = require(\"nativescript-theme-core\");

    Theme.setMode(Theme.Dark); // Or Theme.Light
    \n

    More root classes

    \n

    In addition to .ns-light and .ns-dark classes, the theme's little JavaScript file introduces .ns-root on the root element,\n.ns-android/.ns-ios depending on the current platform (which the theme extensively uses) and additionally\n.ns-portrait/.ns-landscape and .ns-phone/.ns-tablet, which should be self-explanatory.\nOf course .ns-portrait/.ns-landscape get updated on orientation change, so you can use it to show a two pane layout\nin landscape, for instance.

    \n

    The newest addition is .ns-statusbar-transparent since 2.0.4 - add this class to your root element, if you have enabled\ntransparent status bar in the OS and your ActionBar gets underneath it.

    \n
    \n

    Keep in mind that Android APIs before 21 don't support transparent status bars and this will result\nin an undesired top ActionBar padding!

    \n
    \n

    Using Theme variables

    \n

    There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using\nSASS/SCSS.

    \n

    If you need to access specific theme variables like simple colors or sizes, do it through the const function:

    \n
    Button {
        background-color: const(forest);
        height: const(btn-height);
    }
    \n

    You can get light/dark colors:

    \n
    Button {
        color: light(primary);

        .ns-dark & {
            color: dark(primary);
        }
    }
    \n

    or alternatively set them both in one go - does the same as the upper example:

    \n
    Button {
        @include colorize($color: primary);
    }
    \n

    You can darken/lighten a color depending on its background (darken for light theme and lighten for dark theme):

    \n
    Button {
        @include colorize($contrasted-border-color: accent background 20%);
    }
    \n

    The above example uses the contrasted function to check the contrast level of the background and adjust the lightness of\nthe accent color according to it.

    \n

    CSS variables

    \n

    Since 2.0.17 beta, the Theme now exports all its internal variables to CSS ones in the .ns-root and .ns-modal classes.\nThis is also done for Kendo based skins. You can use them to inherit your styles from the Theme.\nA list of the supported CSS variables follows:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Simple ColorsConstantsLight ColorsDark Colors
    --color-black--const-font-size--light-primary--dark-primary
    --color-white--const-background-alt-10--light-background--dark-background
    --color-grey--const-btn-color-secondary--light-accent--dark-accent
    --color-grey-light--const-btn-color-disabled--light-ab-color--dark-background-alt-5
    --color-charcoal--const-btn-font-size--light-ab-background--dark-background-alt-10
    --color-transparent--const-btn-min-width--light-background-alt-5--dark-background-alt-20
    --color-aqua--const-btn-height--light-background-alt-10--dark-secondary
    --color-blue--const-btn-padding-x--light-background-alt-20--dark-disabled
    --color-brown--const-btn-padding-y--light-secondary--dark-ab-color
    --color-forest--const-btn-margin-x--light-disabled--dark-ab-background
    --color-grey-dark--const-btn-margin-y--light-text-color--dark-text-color
    --color-purple--const-btn-radius--light-headings-color--dark-headings-color
    --color-lemon--const-headings-margin-bottom--light-tab-text-color--dark-tab-text-color
    --color-lime--const-headings-font-weight--light-accent-dark--dark-accent-dark
    --color-orange--const-border-width--light-accent-light--dark-accent-light
    --color-ruby--const-border-radius--light-accent-transparent--dark-accent-transparent
    --color-sky--const-border-radius-sm--light-primary-accent--dark-primary-accent
    --color-error--const-border-radius-lg--light-background-accent--dark-background-accent
    --const-border-radius-rounded--light-background-dark-accent--dark-background-dark-accent
    --const-icon-font-size--light-item-active-color--dark-item-active-color
    --const-icon-font-size-lg--light-item-active-background--dark-item-active-background
    --const-disabled-opacity--light-btn-color--dark-btn-color
    --light-ab-background-dark--dark-ab-background-dark
    --light-item-active-icon-color--dark-item-active-icon-color
    --light-btn-color-inverse--dark-btn-color-inverse
    --light-btn-color-secondary--dark-btn-color-secondary
    \n

    Use them like this:

    \n
    .my-accented-class {
        color: var(--light-accent);
    }
    \n

    For now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned\nfor after HSL color support comes in NativeScript 6.2.

    \n

    Kendo UI ThemeBuilder support

    \n

    The theme now supports inheriting the Kendo UI ThemeBuilder theme variables. Just head\nthere, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS\nthat you can use to style your web app, and variables.scss - the one you need for your NativeScript theme. It will look\nsomething like this:

    \n
    $base-theme:Default;
    $skin-name:test;
    $swatch-name:Default Purple;
    $border-radius: 10px;
    $accent: #bf70cc;
    $info: #3e80ed;
    $success: #5ec232;
    $warning: #fdce3e;
    $error: #d51923;
    $text-color: #656565;
    $bg-color: #ffffff;
    $base-text: #656565;
    $base-bg: #f6f6f6;
    $hovered-text: #656565;
    $hovered-bg: #ededed;
    $selected-text: #ffffff;
    $selected-bg: #bf70cc;
    $series-a: #ff6358;
    $series-b: #ffd246;
    $series-c: #78d237;
    $series-d: #28b4c8;
    $series-e: #2d73f5;
    $series-f: #aa46be;
    \n

    Take this file, add the following under it:

    \n
    // Uncomment this row, if you target compat styling:
    // $compat: true;

    @import '~nativescript-theme-core/index';
    \n

    And load the file after your core theme. It should just work™. If it doesn't - head for the issues section.

    \n

    Theme classes and compatibility

    \n

    The old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world -\nif you want to use them, you should load them separately, like this:

    \n
    @import \"~nativescript-theme-core/core.compat\";
    @import \"~nativescript-theme-core/blue.compat\";
    \n

    There might be bugs with these in the beta, you might want to hold off upgrading if you want to use the old classes.

    \n

    As of 2.0, the theme now utilizes a simplified BEM approach for the new element classes, that might be needed here or there.\nFor instance, the buttons need .-primary and .-outline modifiers, instead of the old .btn-primary and\n.btn-outline classes. All element classes (which are not needed by default, except if you want to style a component\nto look like another one) are namespaced, so for instance a button is .nt-button, an action bar is .nt-action-bar and a ListView is\n.nt-list-view.

    \n

    Should I use sass or node-sass

    \n

    Theme 2.0 is developed using SASS. The NPM package used was sass (formerly dart-sass), however it can be used with either sass or node-sass. The difference between them is that sass doesn't depend on a native module (unless you add fibers) and is a little slower (30%) than node-sass, however it doesn't need recompilation if you change Node versions often. If you decide to use it, you should update your webpack config and change the sass-loader options to load sass instead (node-sass is the default sass-loader implementation), like this:

    \n
    {
        loader: \"sass-loader\",
        options: {
            implementation: require(\"sass\")
        }
    }
    \n

    Why Beta

    \n
      \n
    • Firstly, we want to gather feedback from the community and create a theme that is useful and if possible - beautiful.
      • \n
    • Secondly, the theme needs the classes inside the core modules to work properly without loading additional JavaScript\n(this is now released with {N} 6.1).
      • \n
    • And thirdly - {N} core modules should have a way to propagate OS theme changes inside the app, so that it can act accordingly\n(planned for {N} 6.2).
      • \n
    \n

    The theme is relatively stable, try the latest version \"npm\"\nand report if you notice problems.

    \n

    Screenshots

    \n

    \"\"\n\"\"\n\"\"\n
    \n\"\"\n\"\"\n\"\"

    \n

    Contributing

    \n

    Clone this repo, and then use the tns run command to launch the demo app on your device or emulator of choice.

    \n
    tns run ios

    // or

    tns run android
    \n

    If you’d like to toggle the color scheme from light to dark, open the sidedrawer, scroll down to "Themes" at the bottom, and toggle away.

    \n

    Publishing

    \n

    NOTE: Only authorized authors can publish updates.

    \n

    IMPORTANT: Always make sure you have run the demo app in iOS or Android to verify any changes as well as ensure the latest css has been built before doing the following:

    \n
      \n
    • Bump version in nativescript-theme-core.json
      • \n
    • Adjust nativescript-theme-core.md if any changes to the published README are needed.
      • \n
    \n
    npm run builder
    cd nativescript-theme-core
    npm publish
    \n

    IMPORTANT: Never modify the contents of nativescript-theme-core folder directly. The builder creates that everytime and any change you make there will be overwritten.

    \n

    Setup changelog generation:

    \n
    npm install -g conventional-changelog-cli
    \n

    Generate changelog workflow:

    \n
      \n
    1. Make changes
      2. \n
    2. Commit those changes - using these conventions.
      3. \n
    3. Make sure Travis turns green
      4. \n
    4. Bump version in package.json and nativescript-theme-core.json
      5. \n
    5. conventional-changelog -p angular -i CHANGELOG.md -s
      6. \n
    6. Commit package.json and CHANGELOG.md files
      7. \n
    7. Tag
      8. \n
    8. Push
      9. \n
    \n

    Awesome Contributors

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"NathanWalker\"\"TheOriginalJosh\"\"tjvantoll\"\"NathanaelA\"\"triniwiz\"\"sis0k0\"
    NathanWalkerTheOriginalJoshtjvantollNathanaelAtriniwizsis0k0
    \"sitefinitysteve\"\"vakrilov\"\"bradmartin\"\"firescript\"\"valentinstoychev\"\"enchev\"
    sitefinitystevevakrilov　bradmartin　　firescript　　valentinstoychev　　enchev　　
    \"bundyo\"
    　　bundyo　　
    \n

    LICENSE

    \n

    Apache 2.0

    \n","downloadStats":{"lastDay":206,"lastWeek":1923,"lastMonth":8411}},"@nativescript-community/ui-material-slider":{"name":"@nativescript-community/ui-material-slider","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Slider

    \n

    Material Design's Slider component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-slider
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-slider
      • \n
    \n

    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-slider@2.5.4
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-slider" on the Page element.

    \n

    XML

    \n
    <Page xmlns:mds=\"@nativescript-community/ui-material-slider\">
        <StackLayout horizontalAlignment=\"center\">
            <mds:Slider value=\"50\" minValue=\"0\" maxValue=\"100\" />
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdslider {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialSliderModule } from \"@nativescript-community/ui-material-slider/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialSliderModule,
            ...
        ],
        ...
    })
    \n
    <MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\"></MDSlider>
    \n

    \n

    NativeScript + Vue

    \n
    import SliderPlugin from '@nativescript-community/ui-material-slider/vue';

    Vue.use(SliderPlugin);
    \n
    <MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\" @valueChange=\"onValueChanged\"/>
    \n

    Or you can bind the value to some instance data using the v-model directive:

    \n
    <MDSlider v-model=\"value\" minValue=\"0\" maxValue=\"100\"/>
    \n

    API

    \n

    Attributes

    \n

    Inherite from NativeScript Slider so it already has all the same attributes.

    \n
      \n
    • \n

      stepSize optional

      \n
        \n
      • An attribute to set the step size of the slider. Without this attribute, it behaves as a continuous slider.
        • \n
      \n
      • \n
    • \n

      elevation optional

      \n
        \n
      • An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.
        • \n
      \n
      • \n
    • \n

      rippleColor optional

      \n
        \n
      • An attribute to set the ripple color of the slider.
        • \n
      \n
      • \n
    • \n

      trackFillColor optional

      \n
        \n
      • Sets the color of the filled track.
        • \n
      • Defaults to your theme's colorPrimary.
        • \n
      \n
      • \n
    • \n

      trackBackgroundColor optional

      \n
        \n
      • Sets the color of the background track.
        • \n
      \n
      • \n
    • \n

      thumbColor optional

      \n
        \n
      • Sets the color of the slider's thumb.
        • \n
      • Defaults to your theme's colorPrimary.
        • \n
      \n
      • \n
    \n","downloadStats":{"lastDay":7,"lastWeek":295,"lastMonth":3848}},"@nativescript-community/ui-pager-indicator":{"name":"@nativescript-community/ui-pager-indicator","version":"14.1.8","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-pager-indicator

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript Indicator for Pager / Carousel /CollectionView
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-pager-indicator

    \n

    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    colorColor or string
    selectedColorColor or string
    \n
    PagerIndicator add page control for Pager or other Paging Views.
    \n

    \n

    Usage in Vue

    \n

    Import the module into your project.

    \n
    import Vue from 'nativescript-vue';
    Vue.registerElement('PagerIndicator', () => require('@nativescript-community/ui-pager-indicator').PagerIndicator);
    \n

    then in your template:

    \n
    <Pager id=\"pager\" :items=\"items\"
        ...
    </Pager>
    <PagerIndicator pagerViewId=\"pager\"/>
    \n

    Examples

    \n
      \n
    • Indicator Pager\n
        \n
      • A simple pager example using dynamic content and indicator.
        • \n
      \n
      • \n
    \n","downloadStats":{"lastDay":1,"lastWeek":16,"lastMonth":240}},"@navara/nativescript-adal":{"name":"@navara/nativescript-adal","version":"1.0.6","license":"MIT","readme":"

    NativeScript Active Directory Authentication Library Plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"BCH

    \n

    This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app

    \n

    Prerequisites / Requirements

    \n

    Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

    \n

    Installation

    \n
    tns plugin add @navara/nativescript-adal
    \n

    Usage (Angular example)

    \n

    Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

    \n
    import { Injectable } from '@angular/core';
    import { AdalContext } from '@navara/nativescript-adal';

    const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
    const clientId: string = '{your-application-id}';
    const resourceId: string = '00000002-0000-0000-c000-000000000000';

    @Injectable()
    export class AdalService {

      public adalContext: AdalContext;

      constructor() {
        this.adalContext = new AdalContext(authority, clientId, resourceId);
      }
    }
    \n

    ...and consume this service in your application!

    \n
    export class AppComponent {

      constructor(private adalService: AdalService) { }

      public login() {
        this.adalService.adalContext.login().then((result) => {
          console.log('Success!');
        })
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    License

    \n

    See LICENSE for details.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":112}},"cordova-plugin-admobpro":{"name":"cordova-plugin-admobpro","version":"8.13.1","license":"MIT","readme":"

    AdMob Plugin Pro

    \n

    Cordova / PhoneGap Plugin for Google Ads, including AdMob / DFP (doubleclick for publisher) and mediations to other Ad networks.

    \n

    Contents

    \n
      \n
    1. Description
      2. \n
    2. History
      3. \n
    3. Features
      4. \n
    4. Demo
      5. \n
    5. Quick Start
      6. \n
    6. Installation
      7. \n
    7. Usage
      8. \n
    8. API
      9. \n
    9. Wiki and Docs
      10. \n
    10. Important Tips & Warning
      11. \n
    11. Video Tutorial
      12. \n
    12. Screenshots
      13. \n
    13. License
      14. \n
    14. Credits
      15. \n
    \n

    Description

    \n

    This Cordova / PhoneGap plugin enables displaying mobile Ads with single line of javascript code. Designed for the use in HTML5-based cross-platform hybrid games and other applications.

    \n

    History

    \n

    Community-driven project. Designed and maintained by Raymond Xie since August 2014. It also features integration in AngularJS projects via [ngCordova] (http://www.ngcordova.com).

    \n

    It was published to Cordova registry with id "com.google.cordova.admob" since Aug 2014, and has been downloaded more than 120,000 times. Now it's the No. 1 monetization plugin for Cordova community.

    \n

    \"ScreenShot\"

    \n

    From May 2015, Cordova team announced the deprecation of Cordova registry, and suggest all plugins to be moved to npm repository. Now, the AdMob plugin is published to npm and renamed as "cordova-plugin-admobpro".

    \n

    Features

    \n

    Platforms supported:

    \n\n

    Ad Types:

    \n
      \n
    • [x] Banner
      • \n
    • [x] Interstitial (text, picture, video), highly recommended. :fire:
      • \n
    • [x] Reward Video, highly recommended. :fire:
      • \n
    • [ ] Reward Interstitial (on roadmap)
      • \n
    • [ ] Native Ads (not applicable to Cordova web apps)
      • \n
    • [ ] Native Ads Advanced (not applicable to Cordova web apps)
      • \n
    \n

    Mediation to other Ad networks:

    \n
      \n
    • [x] AdMob (built-in)
      • \n
    • [x] DFP (DoubleClick for Publisher, built-in)
      • \n
    • [x] Meta Audience Network
      • \n
    • [x] Flurry
      • \n
    • [x] InMobi
      • \n
    • [x] Millennial Media
      • \n
    • [x] MobFox
      • \n
    \n

    Quick Demo

    \n

    Wanna quickly see the mobile ad on your simulator or device? Try the following commands.

    \n
        # install cordova CLI
        [sudo] npm install cordova -g

        # install a small utility to run all the commands for you
        [sudo] npm install plugin-verify -g

        # Demo 1: run admob demo with sample index.html
        plugin-verify cordova-plugin-admobpro

        # Demo 2/3: run admob demo in game powered by PIXI/phaser HTML5 engine
        plugin-verify admob-demo-game-pixi ios --landscape
        plugin-verify admob-demo-game-phaser ios --landscape

        # Demo 4: run admob demo in app powered by ionic/angular framework
        plugin-verify admob-demo-app-ionic ios --portrait
    \n

    Quick start

    \n
    \t# create a demo project
        cordova create test1 com.rjfun.test1 Test1
        cd test1
        cordova platform add android
        cordova platform add ios

        # now add the plugin, cordova CLI will handle dependency automatically
        cordova plugin add cordova-plugin-admobpro

        # now remove the default www content, copy the demo html file to www
        rm -r www/*;
        cp plugins/cordova-plugin-admobpro/test/* www/;

    \t# now build and run the demo in your device or emulator
        cordova prepare; 
        cordova run android; 
        cordova run ios;
        # or import into Xcode / eclipse
    \n

    Installation

    \n
      \n
    • If use with Cordova CLI:
      • \n
    \n
    cordova plugin add cordova-plugin-admobpro

    cordova plugin add cordova-plugin-admobpro --save --variable PLAY_SERVICES_VERSION=20.4.0 --variable ADMOB_ANDROID_APP_ID=\"__your_admob_android_app_id___\" --variable ADMOB_IOS_APP_ID=\"__your_admob_ios_app_id___\"
    \n

    If use other tools or online build services, see:

    \n\n

    Notice:

    \n
      \n
    • If build locally using cordova-plugin-admobpro, to avoid build error, you need install some extras in Android SDK manager (type android sdk to launch it):\n\"android
      • \n
    \n

    Usage

    \n

    Show Mobile Ad with single line of javascript code.

    \n

    Step 1: Create Ad Unit Id for your banner and interstitial, in AdMob portal, then write it in your javascript code.

    \n
    // select the right Ad Id according to platform
      var admobid = {};
      if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
        admobid = {
          banner: 'ca-app-pub-xxx/xxx', // or DFP format \"/6253334/dfp_example_ad\"
          interstitial: 'ca-app-pub-xxx/yyy'
        };
      } else { // for ios
        admobid = {
          banner: 'ca-app-pub-xxx/zzz', // or DFP format \"/6253334/dfp_example_ad\"
          interstitial: 'ca-app-pub-xxx/kkk'
        };
      }
    \n

    Step 2: Want cheap and basic banner? single line of javascript code.

    \n
    // it will display smart banner at top center, using the default options
    if(AdMob) AdMob.createBanner({
      adId: admobid.banner,
      position: AdMob.AD_POSITION.TOP_CENTER,
      autoShow: true });
    \n

    Step 3: Want interstitial Ad to earn more money ? Easy, 2 lines of code.

    \n
    // preppare and load ad resource in background, e.g. at begining of game level
    if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );

    // show the interstitial later, e.g. at end of game level
    if(AdMob) AdMob.showInterstitial();
    \n

    Or, you can just copy this admob_simple.js to your project, change the ad unit id to your own, and simply reference it in your index.html, like this:

    \n
    <script type=\"text/javascript\" src=\"admob_simple.js\"></script>
    \n

    Remember to remove isTesting:true if release for production.

    \n

    AdMob Mediation Adapters

    \n

    Optional mediations to increase your revenue (Read about AdMob Mediation Networks):

    \n
    cordova plugin add cordova-plugin-admob-facebook
    cordova plugin add cordova-plugin-admob-flurry
    cordova plugin add cordova-plugin-admob-unityads
    cordova plugin add cordova-plugin-admob-inmobi
    cordova plugin add cordova-plugin-admob-mmedia
    cordova plugin add cordova-plugin-admob-mobfox
    \n

    Notice: If you want to add multiple mediations, please balance flexibility and binary size.

    \n

    API

    \n

    Methods:

    \n
    // use banner
    createBanner(adId/options, success, fail);
    removeBanner();
    showBanner(position);
    showBannerAtXY(x, y);
    hideBanner();

    // use interstitial
    prepareInterstitial(adId/options, success, fail);
    showInterstitial();
    isInterstitialReady(function(ready){ if(ready){ } });

    // use reward video
    prepareRewardVideoAd(adId/options, success, fail);
    showRewardVideoAd();

    // set values for configuration and targeting
    setOptions(options, success, fail);

    // get user ad settings
    getAdSettings(function(inf){ inf.adId; inf.adTrackingEnabled; }, fail);
    \n

    Events:

    \n
    // onAdLoaded
    // onAdFailLoad
    // onAdPresent
    // onAdDismiss
    // onAdLeaveApp
    document.addEventListener('onAdFailLoad', function(e){
        // handle the event
    });
    \n

    Use AdMobPro with Ionic

    \n

    Use with Capacitor:

    \n
    $ npm install cordova-plugin-admobpro
    $ npm install @awesome-cordova-plugins/admob-pro
    $ ionic cap sync
    \n

    Or, use with Cordova:

    \n
    $ ionic cordova plugin add cordova-plugin-admobpro
    $ npm install @awesome-cordova-plugins/admob-pro
    \n

    Code for Angular:

    \n
    import { AdMobPro } from '@awesome-cordova-plugins/admob-pro/ngx';
    import { Platform } from '@ionic/angular';

    constructor(private admob: AdMobPro, private platform: Platform ) { }

    ionViewDidLoad() {
      this.admob.onAdDismiss()
        .subscribe(() => { console.log('User dismissed ad'); });
    }

    onClick() {
      let adId;
      if(this.platform.is('android')) {
        adId = 'YOUR_ADID_ANDROID';
      } else if (this.platform.is('ios')) {
        adId = 'YOUR_ADID_IOS';
      }
      this.admob.prepareInterstitial({adId: adId})
        .then(() => { this.admob.showInterstitial(); });
    }
    \n

    See more:\nhttps://ionicframework.com/docs/native/admob-pro

    \n

    Wiki and Docs

    \n

    Quick start, simply copy & paste:

    \n\n

    API Reference:

    \n\n

    Other Documentations:

    \n\n

    Demo projects:

    \n\n

    Video Tutorial

    \n
      \n
    • Using Cordova CLI to Add AdMob Plugin:
      • \n
    \n

    \"Video\"

    \n
      \n
    • Run AdMob Demo App on Android:
      • \n
    \n

    \"Video\"

    \n

    More video by developers:

    \n\n

    Screenshots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iPhone BanneriPhone Interstitial
    \"ScreenShot\"\"ScreenShot\"
    Android BannerAndroid Interstitial
    \"ScreenShot\"\"ScreenShot\"
    \n

    Tips

    \n

    Some important tips, FYI.

    \n
      \n
    • [x] Why Google AdMob is recommended ?
      • \n
    \n

    Advertisement is main business and income source of Google, so clients are all around the world. Google is one of the most rialable partners for its high standard service.

    \n
      \n
    • High fill rate, nearly 100% all around world.
      • \n
    • High quality Ad, bring high RPM.
      • \n
    • Stable price, auto pay on time. Pay on every 20th next month.
      • \n
    \n
      \n
    • [x] Strongly recommend Interstitial, more than 10 times profit than banner Ad.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Ad FormatBannerInterstitial
    Click Rate< 1%3-15%
    RPM (revenue per 1000 impression)US$ 0.5~4US$ 10~50
    \n
      \n
    • [x] Using SMART_BANNER to auto-fit the screen width, avoid using BANNER or FULL_BANNER (unless you are using DFP)
      • \n
    \n

    ⚠：Remember Google's slogan: "Don't be evil". Invalid usage violating Google rules, may cause your AdMob account suspended !

    \n
      \n
    • \n

      AdMob publisher may NOT abuse or encourage abuse any Google products, including Google Play, YouTube or Blogger, incuding allow user downloading YouTube video, or embed YouTube video in your own apps.

      \n
      • \n
    • \n

      Publishers may NOT click their own ads or use any means to inflate impressions and/or clicks artificially, including manual methods. Testing your own ads by clicking on them is not allowed.

      \n
      • \n
    \n

    More details, please read AdMob & AdSense policies

    \n

    License

    \n

    You can use the plugin for free, or you can also pay to get a license. IMPORTANT!!! Before using the plugin, please read the following content and accept the agreement. THIS WILL AVOID POTENTIAL PROBLEM AND DISPUTE.

    \n

    There are 3 license options, fully up to you:

    \n
      \n
    1. Free and Open Source, no support
      2. \n
    2. Commercial, with email/skype support
      3. \n
    3. Win-win partnership, with forum support
      4. \n
    \n

    If you hope to get a fully open source plugin (either need DIY, or hope to get full control on the code), use this open source one instead. Fork and pull request is welcome, but please mention it's derived source. Simply renaming then publishing to npm is forbidden. Open source project URL:\nhttps://github.com/floatinghotpot/cordova-plugin-admob

    \n

    If use in commercial project, please get a license, or, you have monetized more than $1000 using this plugin, you are also required to either get a commercial license ($20). As a commercial customer, you will be supported with high priority, via private email or even Skype chat.

    \n

    If you don't want to get a license as your apps may not earn too much, or you don't have a PayPal account to pay, here is a compromised option. You don't have to pay, we are also okay if just share 2 percent user traffic, so that we can cover our effort and focus on maintenance and online support. (We have maintained this project since Aug 2014, and closed more than 560 support issues)

    \n

    Please read the License Agreement for details.

    \n

    Credits

    \n

    This project is created and maintained by Raymond Xie.

    \n

    More Cordova/PhoneGap plugins by Raymond Xie, find them in plugin registry, or find them in npm.

    \n

    Project outsourcing and consulting service is also available. Please contact us if you have the business needs.

    \n","downloadStats":{"lastDay":7,"lastWeek":118,"lastMonth":926}},"@nativescript-community/ui-material-bottomnavigationbar":{"name":"@nativescript-community/ui-material-bottomnavigationbar","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Bottom navigation bar

    \n

    Material Design's Bottom navigation component for NativeScript.

    \n

    \"npm\" \"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API\n\n
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-bottomnavigationbar
      • \n
    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-bottomnavigationbar
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Before start using the plugin you need to add the icons for Android & iOS in your App_Resources directory.

    \n

    Plain NativeScript

    \n

    You can set the tabs using the tabs property

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              tabs=\"{{ tabs }}\"
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >    </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n
    import { EventData } from '@nativescript/core/data/observable';
    import { Page } from '@nativescript/core/ui/page';
    import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: EventData) {
        // Get the event sender
        let page = <Page>args.object;
        page.bindingContext = {
            tabs: [
                new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
                new BottomNavigationTab({
                    title: 'Second',
                    icon: 'res://ic_view_list',
                    isSelectable: false
                }),
                new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
            ]
        };
    }

    export function tabSelected(args: TabSelectedEventData) {
        console.log('tab selected ' + args.newIndex);
    }
    \n

    or you can add the tabs directly in your xml view

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >
              <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
              <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
              <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
            </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n

    Angular

    \n

    First you need to include the NativeScriptMaterialBottomNavigationBarModule in your app.module.ts

    \n
    import { NativeScriptMaterialBottomNavigationBarModule} from \"@nativescript-community/ui-material-bottomnavigationbar/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialBottomNavigationBarModule
        ],
        ...
    })
    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <BottomNavigationBar
            [tabs]=\"tabs\"
            activeColor=\"red\"
            inactiveColor=\"yellow\"
            backgroundColor=\"black\"
            (tabSelected)=\"onBottomNavigationTabSelected($event)\"
            (tabPressed)=\"onBottomNavigationTabPressed($event)\"
            row=\"1\"
        >    </BottomNavigationBar>
    </GridLayout>
    \n

    or you can declare the BottomNavigationTab in your html directly

    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <BottomNavigationBar
            activeColor=\"red\"
            inactiveColor=\"yellow\"
            backgroundColor=\"black\"
            (tabSelected)=\"onBottomNavigationTabSelected($event)\"
            (tabPressed)=\"onBottomNavigationTabPressed($event)\"
            row=\"1\"
        >
            <BottomNavigationTab title=\"First\" icon=\"res://ic_home\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" [isSelectable]=\"false\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\"></BottomNavigationTab>
        </BottomNavigationBar>
    </GridLayout>
    \n

    Vue

    \n

    If you want to use this plugin with Vue, do this in your app.js or main.js:

    \n
    import BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue';

    Vue.use(BottomNavigationBar);
    \n

    This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <MDBottomNavigationBar activeColor=\"red\" inactiveColor=\"yellow\" backgroundColor=\"black\" @tabSelected=\"onBottomNavigationTabSelected\" row=\"1\">
            <MDBottomNavigationTab title=\"First\" icon=\"ic_home\" />
            <MDBottomNavigationTab title=\"Second\" icon=\"ic_view_list\" isSelectable=\"false\" />
            <MDBottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
        </MDBottomNavigationBar>
    </GridLayout>
    \n

    You can find more information of how to use nativescript plugins with Vue Here!

    \n

    CSS Styling

    \n

    You can also use your css file to set or change the activeColor, inactiveColor & backgroundColor of the Bottom Navigation Bar.

    \n
    .botom-nav {
        active-color: green;
        inactive-color: black;
        background-color: blue;
    }
    \n

    API

    \n
      \n
    • Properties (bindable): Properties settable through XML/HTML
      • \n
    • Properties (internal): Properties accessible through JS/TS instance
      • \n
    • Events: Event properties settable thew XML/HTML
      • \n
    \n

    Bottom Navigation Bar

    \n

    Properties (bindable)

    \n

    Properties settable through XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
    titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
    inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
    backgroundColorfalse"white"StringColor of the BottomNavigation background
    badgeColorfalse"red"StringColor of the BottomNavigationTab badge background
    badgeTextColorfalse"white"StringColor of the BottomNavigationTab badge text
    \n

    Properties (internal)

    \n

    Properties accessible through JS/TS instance

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    items[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
    selectedTabIndex0NumberIndex of the selected tab
    titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColornew Color('black')ColorColor of the BottomNavigationTab when it's selected
    inactiveColornew Color('gray')ColorColor of the BottomNavigationTab when it's not selected
    backgroundColornew Color('white')ColorColor of the BottomNavigation background
    badgeColornew Color('red')ColorColor of the BottomNavigationTab badge background
    badgeTextColornew Color('white')ColorColor of the BottomNavigationTab badge text
    \n

    Events

    \n

    Event properties settable thew XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
    tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
    tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
    \n

    Methods

    \n

    Methods accessible through JS/TS instance

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    selectTab(index: number)voidSelect a tab programmatically
    showBadge(index: number, value?: number)voidShow a badge for an specific tab, if you want to show a badge as a red dot no value should be passed to the function
    \n

    Bottom Navigation Tab

    \n

    Properties (bindable)

    \n

    Properties settable through XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    titletruenullstringTitle of the tab
    icontruenullstringIcon of the tab
    isSelectablefalsetruebooleanDetermine if the tab can be selected or not
    \n","downloadStats":{"lastDay":66,"lastWeek":455,"lastMonth":4397}},"@nativescript-community/gps":{"name":"@nativescript-community/gps","version":"3.1.10","license":"MIT","readme":"\n\n

    @nativescript-community/gps

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Tracks GPS location updates regardless of the app state. Does not depend on Google Play Services.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/gps

    \n

    \n

    Usage

    \n

    Here is a simple example. You can find more in the doc here

    \n
    import { GPS } from '@nativescript-community/gps';

    const gps = new GPS();
    const location = await gps.getCurrentLocation<LatLonKeys>({
        minimumUpdateTime,
        desiredAccuracy,
        timeout,
        skipPermissionCheck: true
    });
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":20,"lastWeek":38,"lastMonth":419}},"@nativescript/types":{"name":"@nativescript/types","version":"8.6.1","license":"Apache-2.0","readme":"

    @nativescript/types

    \n

    NativeScript Types for all supported platforms

    \n","downloadStats":{"lastDay":622,"lastWeek":3767,"lastMonth":15376}},"@klippa/nativescript-http":{"name":"@klippa/nativescript-http","version":"3.0.4","license":"MIT","readme":"

    nativescript-http

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Build

    \n

    :rocket: The best way to do HTTP requests in NativeScript :rocket:

    \n

    A drop-in replacement for the core HTTP with important improvements and additions like proper connection pooling, form data support and certificate pinning.

    \n

    Features

    \n
      \n
    • Ability to use without any code change
      • \n
    • Ability to make all http and image-cache requests go through this plugin
      • \n
    • Backwards compatible (behaves the same as core HTTP)
      • \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Control over concurrency/connection pooling
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP to shrink response size
      • \n
    • HTTP/2 and SPDY support
      • \n
    • Support for directly posting ArrayBuffer/File/Blob/native(such as java.io.File and NSData.dataWithContentsOfFile) objects in the content property
      • \n
    • Multipart form data (multipart/form-data) support (for file uploads), supports ArrayBuffer, File, Blob and native objects (like java.io.File and NSData.dataWithContentsOfFile)
      • \n
    • Ability to set a global user agent
      • \n
    • Ability to control cookies
      • \n
    • Ability to control background image parsing
      • \n
    • Certificate/SSL pinning
      • \n
    • WebSockets
      • \n
    • ImageCache
      • \n
    \n

    NativeScript Version Support

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NS Versionnativescript-http versionInstall commandDocs
    ^8.0.0^3.0.0ns plugin add @klippa/nativescript-http@^3.0.0This page
    ^7.0.0^2.0.0ns plugin add @klippa/nativescript-http@^2.0.0Here
    ^6.0.0^1.0.0tns plugin add @klippa/nativescript-http@^1.0.0Here
    \n

    Installation (NS 8)

    \n
    ns plugin add @klippa/nativescript-http@^3.0.0
    \n

    Usage (NS 8)

    \n

    Automatically use this plugin for all HTTP calls

    \n

    Since this is a drop-in replacement for the core HTTP,\nwe can automatically use this plugin for all HTTP calls in NativeScript that use the XHR framework to do HTTP calls, this includes:

    \n
      \n
    • Any JavaScript/Angular/Vue plugin that was created to be used in the browser\n
        \n
      • Axios
        • \n
      • Angular HTTPClient
        • \n
      • vue-resource
        • \n
      \n
      • \n
    • Any NativeScript http method\n
        \n
      • request
        • \n
      • fetch
        • \n
      • getString, getJSON, getImage, getFile, getBinary
        • \n
      \n
      • \n
    • NativeScript image-cache
      • \n
    • Any NativeScript plugin that uses above methods internally
      • \n
    \n

    The way to do this is quite simple, we only have to import a plugin and add the plugin to the webpack config.

    \n

    Open the file webpack.config.js, it may look like this:

    \n
    const webpack = require(\"@nativescript/webpack\");

    module.exports = (env) => {
       webpack.init(env);

       // Learn how to customize:
       // https://docs.nativescript.org/webpack

       return webpack.resolveConfig();
    };
    \n

    Import our webpack implementation and add a line before webpack.resolveConfig(), like this:

    \n
    const webpack = require(\"@nativescript/webpack\");
    const NativeScriptHTTPPlugin = require(\"@klippa/nativescript-http/webpack\"); // Import NativeScriptHTTPPlugin

    module.exports = (env) => {
       webpack.init(env);

       // Learn how to customize:
       // https://docs.nativescript.org/webpack

       webpack.chainWebpack(config => {
          config.plugin('NativeScriptHTTPPlugin').use(NativeScriptHTTPPlugin)
       });

       return webpack.resolveConfig();
    };
    \n

    The NativeScriptHTTPPlugin can be given an object with the following properties: replaceHTTP (true/false) and replaceImageCache (true/false). This way you can control what the plugin replaces. If you don't give this options object we will replace both.\nThe options can be passed like this:

    \n
    webpack.chainWebpack(config => {
       config.plugin('NativeScriptHTTPPlugin').use(NativeScriptHTTPPlugin, [
          {
             replaceHTTP: true,
             replaceImageCache: false
          }
       ])
    });
    \n

    Note: if you do this, you don't have to do the other integrations.

    \n

    Validate whether the automatic integration works by adding a self-check

    \n

    If you are dependant on new functionality in this plugin, like handling form data or certificate pinning and you want to make sure the automatic integration always works, or you just want to play it safe, you can add the following self-check to your code:

    \n

    For core NativeScript / Vue / Angular:

    \n
    import { Http, Dialogs } from \"@nativescript/core\";

    Http.request({
        method: \"GET\",
        url: \"https://nativescript-http-integration-check.local\",
    }).then((res) => {
        const jsonContent = res.content.toJSON();
        if (!jsonContent || !jsonContent.SelfCheck || jsonContent.SelfCheck !== \"OK!\") {
            Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
        }
    }).catch((e) => {
        Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
    });
    \n

    For Angular HttpClient:

    \n
    import { Dialogs } from \"@nativescript/core\";

    // Don't forget to inject HttpClient into your component.

    // Add the following code in a place where you want to do the self-check in Angular.
    this.http.get(\"https://nativescript-http-integration-check.local\", {
        responseType: \"json\",
    }).toPromise().then((res) => {
        // @ts-ignore
        if (!res || !res.SelfCheck || res.SelfCheck !== \"OK!\") {
            Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
        }
    }).catch((e) => {
        Dialogs.alert(\"nativescript-http automatic integration failed! Request to https://nativescript-http-integration-check.local failed\");
    });
    \n

    The URL https://nativescript-http-integration-check.local is hardcoded internally in this plugin to always return the same result.

    \n

    If the request fails, or the content isn't the same as what we expect, we know something is wrong and we will get a dialog message that the automatic integration failed.

    \n

    Integration in code

    \n

    Since this is a drop-in replacement for the core HTTP, you can execute the requests in the same way as with the Core HTTP, the only thing different is the import:

    \n

    The format of options and the output of the request are the same as in core HTTP.

    \n
    import { HttpResponse } from \"@nativescript/core\";
    import { Http } from \"@klippa/nativescript-http\";

    Http.request({
       url: \"https://httpbin.org/get\",
       method: \"GET\"
    }).then((response: HttpResponse) => {
       // Argument (response) is HttpResponse
    }, (e) => {
    });
    \n

    Integration in Angular

    \n

    We also provide a drop-in replacement NativeScriptHttpClientModule from the nativescript-angular project.

    \n

    In order to make Angular use our HTTP implementation, import our module like this:

    \n
    import { NativeScriptHttpClientModule } from \"@klippa/nativescript-http/angular\";

    @NgModule({
        imports: [
            NativeScriptHttpClientModule
        ]
    \n

    From now on you can make requests using Angular's HttpClient service like explained here.

    \n

    Be aware that this plugin tries to parse your image in the background so you won't have to do this in javascript (core HTTP does the same).\nThis value is not reachable from the Angular HTTP client, only through response.content.toImage(), so I would advice to use the HTTP client directly (so without the Angular HTTP client) if you are going to download images and display them directly.

    \n

    ImageCache

    \n

    If you use the WebPack plugin, you don't have to do anything to use our ImageCache. It behaves the same as core so you don't have to change anything.

    \n

    If you don't use the plugin. You can import the ImageCache class from @klippa/nativescript-http. It has the same API as the core ImageCache.

    \n

    Important note for apps with support for < Android 5 (SDK 21)

    \n

    The default minSdk of NativeScript is 17, this is Android 4.2. We use OkHttp version 4, which does not have support for Android 4.

    \n

    If you do not care about Android 4 users

    \n

    If you do not care about Android 4 users, edit the file App_Resources/Android/app.gradle and change the minSdk to 21:

    \n
    android {
      defaultConfig {
        minSdkVersion 21
        // ... other config.
      }
      // ... other config.
    }
    \n

    This let's the play store know the app can't be installed on anything lower than Android 5.

    \n

    If you do care about Android 4 users

    \n

    Luckily, OkHtpp has a special support branch called okhttp_3.12.x for older Android version, and because OkHttp is binary safe, which means all the methods have the same signature, we can just replace the version and everything just works™.

    \n

    I don't mind using an older OkHttp version

    \n

    If you don't mind everyone having an older OkHttp version, you can do the following easy™ fix:

    \n

    Edit the file App_Resources/Android/app.gradle, add the following lines:

    \n
    android {
      // ... other config.
      configurations.all {
        resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
      }
    }
    \n

    This will force your build to use the support version of OkHttp.

    \n

    Please note that this okhttp_3.12.x branch is support through December 31, 2020, and it will only get fixes for severe bugs or security issues.

    \n

    This means you won't get any cool features from version 4.

    \n

    I want to use the latest version for Android 5, and version 3.12 for Android 4

    \n

    NOTE: there is currently an open issue in the Android runtime that makes it impossible for the configuration below to work

    \n

    Luckily, this is also a possibility, but a little bit more difficult because you have to split your builds.

    \n

    Edit the file App_Resources/Android/app.gradle, add the following lines:

    \n
    android {
      // ... other config.
      flavorDimensions \"api\"

      productFlavors {
        minApi21 {
          dimension \"api\"
          minSdkVersion 21
          versionNameSuffix \"-minApi21\"
        }

        minApi17 {
          dimension \"api\"
          minSdkVersion 17
          versionNameSuffix \"-minApi17\"
        }
      }
    }

    android.applicationVariants.all { variant ->
      if (variant.name.contains(\"minApi17\")) {
        variant.getCompileConfiguration().resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
        variant.getRuntimeConfiguration().resolutionStrategy.force \"com.squareup.okhttp3:okhttp:3.12.+\"
      }

      variant.outputs.each { output ->
        if (variant.name.contains(\"minApi17\")) {
          output.versionCodeOverride = 10000000 + variant.versionCode
        } else {
          output.versionCodeOverride = 20000000 + variant.versionCode
        }
      }
    }
    \n

    The part in android is to create 2 product flavors, one for minSdk 17, and one for minSdk 21.

    \n

    The part in android.applicationVariants consists of two things:

    \n
      \n
    1. Making sure flavor minApi17 uses version 3.12.+ for minSdk 17
      2. \n
    2. Making sure that every flavor has it's own build versionCode. It takes the version from the manifest and does (10000000 + manifestVersionCode) for minApi17 and (20000000 + manifestVersionCode) for minApi21.
      3. \n
    \n

    This will create 2 APK's when you build a release, one for Android 4 (app-minApi17-release.apk), and one for Android 5 (app-minApi21-release.apk).\nYou can also combine this with ABI splitting.

    \n

    When you upload both APK's to the Playstore, Google will make sure the proper APK get's distributed to the different devices.

    \n

    Comparison with other NativeScript HTTP Clients

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PluginAndroidiOSBackground threadsSupports form dataProper connection poolingCan replace core httpCertificate / SSL PinningWebSocketsImageCache
    @nativescript/core/http:heavy_check_mark: using Java HttpURLConnection:heavy_check_mark: using NSURLSession:heavy_check_mark::x::x: bad Android implementation-:x::x:-
    nativescript-background-http:heavy_check_mark: using gotev/android-upload-service:heavy_check_mark: using NSURLSession:heavy_check_mark: (with a service):x:Unknown:x::x::x::x:
    nativescript-http-formdata:heavy_check_mark: using OkHttp4:heavy_check_mark: using OMGHTTPURLRQ:x::heavy_check_mark::x: bad OkHttp implementation:x::x::x::x:
    nativescript-okhttp:heavy_check_mark: using OkHttp2:x::x::x::x: bad OkHttp implementation:x::x::x::x:
    nativescript-https:heavy_check_mark: using OkHttp3:heavy_check_mark: using AFNetworking:heavy_check_mark::x::heavy_check_mark: shared client:white_check_mark: by manually replacing calls, data structures are (almost) the same:heavy_check_mark::x::x:
    @klippa/nativescript-http:heavy_check_mark: using OkHttp4:heavy_check_mark: using NSURLSession:heavy_check_mark::heavy_check_mark::heavy_check_mark: shared client:heavy_check_mark: automatically and manually:heavy_check_mark::heavy_check_mark::heavy_check_mark:
    \n

    Implementation differences with NativeScript Core HTTP

    \n
      \n
    • We only try to parse the response as Image when the Content-Type starts with image/
      • \n
    • We use a default timeout of 60s for connect/write/read, you can change this using the timeout option
      • \n
    • While the code of Core HTTP looks like it supports FormData, it only supports key/value and not files, we do support it with our HTTPFormData class.
      • \n
    \n

    API

    \n

    Form data

    \n

    By default this client behaves the same as the Core HTTP for FormData objects, meaning it will just encode it as key=value pairs and it does not support Blob/File objects.\nIt will be posted as application/x-www-form-urlencoded unless you override it using a custom header.

    \n

    If you want to create multipart form data (multipart/form-data) requests, you can use the HTTPFormData class from this plugin.\nYou can create form data requests like this:

    \n
    import { HttpResponse } from \"@nativescript/core\";
    import { Http, HTTPFormData, HTTPFormDataEntry } from \"@klippa/nativescript-http\";

    const form = new HTTPFormData();
    form.append(\"value\", \"Test\");
    // You can also append ArrayBuffer/File/Blob/native(such as java.io.File and NSData.dataWithContentsOfFile) objects directly to form here, but please keep in mind that only the File object has the ability to set a filename. And only Blob/File objects have the ability to set a content type.
    // Use HTTPFormDataEntry if you want more control.

    // formFile data can be a JavaScript ArrayBuffer but also native file objects like java.io.File and NSData.dataWithContentsOfFile.
    const formFile = new HTTPFormDataEntry(new java.io.File(fileLocation), \"test.png\", \"image/png\");
    form.append(\"file\", formFile);

    Http.request({
        url: \"https://httpbin.org/post\",
        method: \"POST\",
        content: form
    }).then((response: HttpResponse) => {
        // Argument (response) is HttpResponse
    }, (e) => {
    });
    \n

    Note: this does not work with the Angular HTTPClient, because it tries to transform the HTTPFormData to json. Use the request() method for Multipart posting.

    \n

    Controlling image decode (Android only)

    \n

    The NativeScript HTTP implementation always tries to decode responses as image to make sure toImage() works fast.\nHowever, a lot of times you don't want it to do this, as you are not expecting images.\nBy default this plugin only works like this when the endpoint returns a proper image content type (ImageParseMethod.CONTENTTYPE).\nWith this method you can control this behaviour, with ImageParseMethod.ALWAYS you revert to Core HTTP behaviour, with ImageParseMethod.NEVER you can completely disable it.

    \n

    Note: only has affect on Android, on iOS image decoding already only happens when you use toImage().

    \n
    import { setImageParseMethod, ImageParseMethod } from \"@klippa/nativescript-http\";

    // Add this line where you want to change the image parse mode.
    // Options are: NEVER/CONTENTTYPE/ALWAYS.
    setImageParseMethod(ImageParseMethod.ALWAYS);
    \n

    Controlling cookies

    \n

    Clear all cookies:

    \n
    import { clearCookies } from \"@klippa/nativescript-http\";

    // Add this line where you want to clear cookies.
    clearCookies();
    \n

    Controlling concurrency / connection pool limits

    \n

    Note: only the domain limit has effect on iOS.

    \n
    import { setConcurrencyLimits } from \"@klippa/nativescript-http\";

    // Add this line where you want to set the concurrency limits.
    // First argument is total limit, second per domain.
    setConcurrencyLimits(20, 5);
    \n

    Setting a global User Agent

    \n
    import { setUserAgent } from \"@klippa/nativescript-http\";

    // Add this line where you want to set the user agent.
    setUserAgent(\"MyCoolApp\");
    \n

    WebSockets

    \n

    Note: certificate pinning is not available for websockets on iOS. Sadly SocketRocket removed support for that.

    \n

    Creating a WebSocket is quite simple in this plugin:

    \n
    import { newWebsocketConnection } from \"@klippa/nativescript-http/websocket\";

    newWebsocketConnection({
        url: \"wss://echo.websocket.org\",
        method: \"GET\",
    }, {
        // It's important to wrap callbacks in ngZone for Angular when you do anything binding related.
        // If you don'    t do this, Angular won't update the views.
        onClosed: (code: number, reason: string) => {
            // Invoked when both peers have indicated that no more messages will be transmitted and the connection has been successfully released.
            // No further calls to this callback will be made.
            console.log(\"onClosed\", code, reason);
        },
        onFailure: (error) => {
            // Invoked when a web socket has been closed due to an error reading from or writing to the network.
            // Both outgoing and incoming messages may have been lost. No further calls to this callback will be made.
            console.log(\"onFailure\", error);
        },
        onOpen: () => {
            // Invoked when a web socket has been accepted by the remote peer and may begin transmitting messages.
            console.log(\"onOpen\");
        },
        onClosing: (code: number, reason: string) => {
            // Invoked when the remote peer has indicated that no more incoming messages will be transmitted.
            // This method will not be called on iOS.
            console.log(\"onClosing\", code, reason);
        },
        onMessage: (text: string) => {
            // Invoked when a text (type 0x1) message has been received.
            console.log(\"onMessage\", text);
        },
        onBinaryMessage: (data: ArrayBuffer) => {
            // Invoked when a binary (type 0x2) message has been received.
            console.log(\"onBinaryMessage\", data);
        }
    }).then((webSocket) => {
        // With the webSocket object you can send messages and close the connection.
        // Receiving a WebSocket here does not mean the connection worked, you have to check onFailure and onOpen for that.
    });
    \n

    Certificate pinning

    \n

    Please read about certificate pinning before you enable it.\nIt can have serious consequences. Good articles are here and here.

    \n

    You can use this question on Stack Overflow to learn how to get the certificate hashes.

    \n

    Always provide at least one backup pin

    \n

    In order to prevent accidentally locking users out of your app, make sure you have at least one backup pin and that you have procedures in place to transition to using the backup pin if your primary pin can no longer be used. For example, if you pin to the public key of your server's certificate, you should generate a backup key that is stored somewhere safe. If you pin to an intermediate CA or a root CA, then you should also select an alternative CA that you are willing to switch to if your current CA (or their intermediate CA) becomes invalid for some reason.

    \n

    If you do not have a backup pin, you could inadvertently prevent your app from working until you released a new version of your app, and your users updated it. One such incident led to a bank having to ask their CA to issue a new certificate using a deprecated intermediate CA in order to allow their users to use the app, or face weeks of the app being unusable.

    \n
    import { certificatePinningAdd, certificatePinningClear } from \"@klippa/nativescript-http\";

    // Add this line where you want to pin the certificate to a specific domain. The second argument are the certificate hashes that you want to pin.
    // You can use *.mydomain.com to also use this for direct subdomains, and **.mydomain.com for any subdomain.
    // Note: for iOS, *.publicobject.com also behaves as **.publicobject.com due to limitation in TrustKit.
    // Note 2: for Android, if you use the older version of OkHttp, the **. prefix does not work.
    // Note 3: for iOS, you need to have at least 2 hashes, because Trustkit requires you to have a backup certificate.
    certificatePinningAdd(\"mydomain.com\", [\"DCU5TkA8n3L8+QM7dyTjfRlxWibigF+1cxMzRhlJV4=\", \"Lh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg=\", \"Vjs8r4z+80wjNcr1YKepWQboSIRi63WsWXhIMN+eWys=\"]);

    // Use this to clear all certificate pins.
    certificatePinningClear();
    \n

    Roadmap

    \n
      \n
    • Cache control
      • \n
    • Allowing self signed certificates (WIP in feature/self-signed)
      • \n
    \n

    About Klippa

    \n

    Klippa is a scale-up from Groningen, The Netherlands and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.

    \n

    We help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.

    \n

    License

    \n

    The MIT License (MIT)

    \n","downloadStats":{"lastDay":28,"lastWeek":137,"lastMonth":1296}},"@nativescript/core":{"name":"@nativescript/core","version":"8.6.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":1104,"lastWeek":7403,"lastMonth":50837}},"@nativescript-community/ui-carto":{"name":"@nativescript-community/ui-carto","version":"1.8.15","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-carto

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin for CARTO Mobile SDK
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-carto

    \n

    \n

    API

    \n

    The API documentation for this plugin is available here.

    \n

    \n

    Usage in Svelte

    \n

    Examples

    \n\n

    \n

    Usage in Vue

    \n

    Examples

    \n\n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@nativescript-community/ui-carto.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":546}},"@ngx-formly/nativescript":{"name":"@ngx-formly/nativescript","version":"6.2.1","license":"MIT","readme":"
    \n \n \n \n
    \n JSON powered / Dynamic forms in Angular\n

    \n

    \"Npm\n\"Downloads\"\n\"Gitter\"\n\"Build\n\"Twitter\"\n\"Gitpod

    \n
    \n
    \n

    Formly is a dynamic (JSON powered) form library for Angular that brings unmatched maintainability to your application's forms.

    \n

    Features

    \n
      \n
    • 🔥 Automatic forms generation
      • \n
    • 📝 Easy to extend with custom field types, validation, wrappers and extensions.
      • \n
    • ⚡️ Supports multiple schemas:\n
        \n
      • Formly Schema (core)
        • \n
      • JSON Schema
        • \n
      \n
      • \n
    • 😍 A bunch of themes, out of the box!
      • \n
    • 💪 Built on top of Angular Reactive Forms
      • \n
    • 📹 @eggheadio course - 20 lessons & 78 minutes
      • \n
    \n

    Docs

    \n\n

    Resources

    \n\n

    Supported UI libs

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    UI
    BootstrapDemoStackBlitz
    Material2DemoStackBlitz
    IonicDemoStackBlitz
    PrimeNGDemoStackBlitz
    KendoDemoStackBlitz
    NG-ZORROStackBlitz
    NativeScript
    \n

    Which Version to use?

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Angular versionFormly version
    Angular >= 13@ngx-formly/core@6.x
    Angular >= 7@ngx-formly/core@5.x
    Angular >= 6@ngx-formly/core@4.x
    Angular >= 5@ngx-formly/core@3.x
    Angular >= 4@ngx-formly/core@2.x
    Angular >= 2ng-formly@1.x
    \n

    Core Team

    \n\n \n \n \n \n \n \n \n \n
    \n \n \n
    \n Abdellatif Ait boudad\n     \n     		\n \n \n
    \n Juri Strumpflohner\n     \n     		\n \n \n
    \n Mohammed Zama Khan\n     \n     		\n \n \n
    \n Bram Borggreve\n     \n     		\n \n \n
    \n Keni Steward\n     \n     		\n \n \n
    \n Max Kless\n     \n
    \n

    Contributors

    \n

    Thanks goes to these wonderful people:

    \n\n

    \"aitboudad\"\"mohammedzamakhan\"\"divyakumarjain\"\"MaxKless\"\"couzic\"\"juristr\"\"franzeal\"\"beeman\"

    \n

    \"FritzHerbers\"\"klemenoslaj\"\"samtsai\"\"thorgod\"\"kenisteward\"\"dwaldrum\"\"skrtheboss\"\"intellix\"

    \n

    \"Krustie101\"\"manuelmeister\"\"MarcosEllys\"\"rehleinBo\"\"ryanjerskine\"\"Devqon\"\"vstiebe\"\"AlexTalcura\"

    \n

    \"alex-novikov-1990\"\"andmoredev\"\"vitale232\"\"AmGarera\"\"bhaidar\"\"cyrilletuzi\"\"Dayvisson\"\"dereekb\"

    \n

    \"eduardoRoth\"\"enricouniurb\"\"erikvdv1\"\"fynnfeldpausch\"\"internalsystemerror\"\"jrgleason\"\"johannesjo\"\"jdpnielsen\"

    \n

    \"TheMcMurder\"\"kentcdodds\"\"Lehoczky\"\"LennardWesterveld\"\"logvinoleg89\"\"LucasJAlba\"\"lucienbertin\"\"waffle-iron\"

    \n

    \"mathijshoogland\"\"mrbusche\"\"NanFengCheong\"\"Pouja\"\"rafaelss95\"\"Riron\"\"milasevicius\"\"rternavskyi\"

    \n

    \"blowsie\"\"ThomasBower\"\"thm1118\"\"Tom-V\"\"VyacheslavPritykin\"\"akamyshanov\"\"danielcrisp\"\"francisco-sanchez-molina\"

    \n

    \"kapsiR\"\"marfer\"\"mburger81\"\"n3xus\"\"neminovno\"\"wenqi73\"\"yoni333\"

    \n\n","downloadStats":{"lastDay":1,"lastWeek":9,"lastMonth":3083}},"angular2-loki":{"name":"angular2-loki","version":"1.0.0","license":"MIT","readme":"

    angular2-loki

    \n

    Lokijs for angular2, Ionic 2, NativeScript with Angualr.

    \n

    How to use

    \n
    npm i angualr2-loki --save
    \n
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { LokiModule } from './loki/loki.module';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        LokiModule,
        .....
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    \n
    import { Component } from '@angular/core';
    import { LokiService } from 'angular2-loki';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      constructor(private loki: LokiService) {
        let db = loki.init('mydb.txt');
        // db will export lokijs object
        // full docs at https://rawgit.com/techfort/LokiJS/master/jsdoc/Loki.html
        let users = db.addCollection('users');
        users.insert({
            name: 'Odin',
            age: 50,
            address: 'Asgard'
        });

        console.log(users.findOne({ name: 'Odin' }));
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":28}},"@nativescript-community/ui-material-switch":{"name":"@nativescript-community/ui-material-switch","version":"7.2.4","license":"Apache-2.0","readme":"

    NativeScript Material Switch

    \n

    Material Design's Switch component for NativeScript.

    \n

    \"npm\"\n\"npm\"

    \n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Changelog
      3. \n
    3. FAQ
      4. \n
    4. Usage\n\n
      5. \n
    5. API
      6. \n
    \n

    Installation

    \n

    For NativeScript 7.0+

    \n
      \n
    • tns plugin add @nativescript-community/ui-material-switch
      • \n
    \n

    \n

    For NativeScript 6.x

    \n
      \n
    • tns plugin add nativescript-material-switch
      • \n
    \n

    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Changelog

    \n

    FAQ

    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdp=\"@nativescript-community/ui-material-switch\">
        <StackLayout horizontalAlignment=\"center\">
            <mdp:Switch />
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdswitch{
        ripple-color: blue;
        elevation: 4;
    }
    \n

    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialSwitchModule } from \"@nativescript-community/ui-material-switch/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialSwitchModule,
            ...
        ],
        ...
    })
    \n
    <MDSwitch v-model=\"value\"></MDSwitch>
    \n

    \n

    NativeScript + Vue

    \n
    import SwitchPlugin from '@nativescript-community/ui-material-switch/vue';

    Vue.use(SwitchPlugin);
    \n
    <MDSwitch></MDSwitch>
    \n

    API

    \n

    Attributes

    \n

    Inherits from NativeScript Switch so it already has all the same attributes.

    \n","downloadStats":{"lastDay":4,"lastWeek":26,"lastMonth":410}},"nativescript-sentry.io":{"name":"nativescript-sentry.io","version":"1.0.4","license":"ISC","readme":"

    Sentry.io for nativescript

    \n

    This plugin uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

    \n

    NOTE: If you have a native exeption and the app exits the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior

    \n

    Installation

    \n
    tns plugin add nativescript-sentry.io
    \n

    Usage

    \n

    Without Angular

    \n
    import { Sentry } from 'nativescript-sentry.io';
    const dsn = 'https://<key>:<secret>@host/<project>';
    Sentry.init(dsn);
    \n

    With Angular

    \n
    import { SentryModule } from 'nativescript-sentry.io/angular';

    NgModule({
      ...
      imports: [
           SentryModule.forRoot({dsn: 'https://<key>:<secret>@host/<project>'})
      ],
    \n

    Note: this plugin adds a custom ErrorHandler and automatically provides it

    \n

    API

    \n

    Init Sentry

    \n

    Sentry.init(dsn: string, options: SentryOptions)

    \n

    Capture Exception

    \n

    Sentry.captureException(exeption: Error, options: SentryOptions)

    \n

    Example:

    \n
    try {
        throw 'try catch Exception example'
    } catch(error) {
        Sentry.captureException(error, {});
    }
    \n

    Capture Message

    \n

    Sentry.captureMessage(message: string, options: SentryOptions)

    \n

    Capture BreadCrumb

    \n

    Sentry.captureBreadcrumb(breadcrumb:SentryBreadcrumb)

    \n

    Set Current user

    \n

    Sentry.setContextUser(user: SentryUser)

    \n

    Context Tags

    \n

    Sentry.setContextTags(tags: any)

    \n

    Context Extra

    \n

    Sentry.setContextExtra(extra: any)

    \n

    Clear context

    \n

    `Sentry.clearContext()``

    \n","downloadStats":{"lastDay":4,"lastWeek":17,"lastMonth":72}},"@nativescript/local-notifications":{"name":"@nativescript/local-notifications","version":"6.1.1","license":"MIT","readme":"

    @nativescript/local-notifications

    \n

    \"NPM\n\"Downloads\"

    \n

    A plugin that allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @nativescript/local-notifications
    \n

    Usage

    \n

    If, on iOS 10+, notifications are not being received or the method addOnMessageReceivedCallback is not invoked, you can try wiring to the UNUserNotificationCenterDelegate

    \n\n

    Importing

    \n
    // either
    import { LocalNotifications } from '@nativescript/local-notifications';
    // or (if that doesn't work for you)
    import * as LocalNotifications from '    @nativescript/local-notifications';
    \n

    Requesting For Permissions

    \n

    Automatically, the schedule() method prompts the user for the permission. For the manual permission request, use the requestPermission method:

    \n
    // then use it as:
    LocalNotifications.requestPermission();
    \n

    Scheduling A Notification

    \n

    To schedule a notificaton, call the schedule() method and pass it an array of the notification objects with the ScheduleOptions properties.

    \n
    LocalNotifications.schedule([
    \t{
    \t\tid: 1, // generated id if not set
    \t\ttitle: 'The title',
    \t\tbody: 'Recurs every minute until cancelled',
    \t\tticker: 'The ticker',
    \t\tcolor: new Color('red'),
    \t\tbadge: 1,
    \t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
    \t\tgroupSummary: 'Summary of the grouped messages above', //android only
    \t\tongoing: true, // makes the notification ongoing (Android only)
    \t\ticon: 'res://heart',
    \t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
    \t\tthumbnail: true,
    \t\tinterval: 'minute',
    \t\tchannel: 'My Channel', // default: 'Channel'
    \t\tsound: isAndroid ? 'customsound' : 'customsound.wav',
    \t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
    \t},
    ]).then(
    \t(scheduledIds) => {
    \t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
    \t},
    \t(error) => {
    \t\tconsole.log('scheduling error: ' + error);
    \t}
    );
    \n

    Getting IDs Of All The Scheduled Notifications

    \n

    To get the IDs of all the scheduled notifications, call the getScheduledIds() method:

    \n
    LocalNotifications.getScheduledIds().then((ids: number[]) => {
    \tconsole.log(\"ID's: \" + ids);
    });
    \n

    Cancelling a Scheduled Notification

    \n

    To cancel a scheduled notification, use the cancel() method.

    \n
    LocalNotifications.cancel(5).then((foundAndCanceled: boolean) => {
    \tif (foundAndCanceled) {
    \t\tconsole.log(\"OK, it's gone!\");
    \t} else {
    \t\tconsole.log('No ID 5 was scheduled');
    \t}
    });
    \n

    Listening to A Notification Tap Event

    \n

    Tapping a notification in the notification center will launch your app.

    \n

    Note that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n

    To handle a notification tap, call the addMessageReceivedCallback() method and pass it a callback function. The callback receives a notification object of type ReceivedNotification.

    \n
    LocalNotifications.addOnMessageReceivedCallback((notification) => {
    \tconsole.log('ID: ' + notification.id);
    \tconsole.log('Title: ' + notification.title);
    \tconsole.log('Body: ' + notification.body);
    }).then(() => {
    \tconsole.log('Listener added');
    });
    \n

    API

    \n

    schedule()

    \n
    scheduledNotificationsIDs: Array<number> = await LocalNotifications.schedule(scheduleOptions)
    \n

    Schedules the specified scheduleOptions notification(s), if the user has granted the permission. If the user has not been prompted for the permission, it prompts and schedule the notifcation(s) if permission is granted. For manual permission request, use the requestPermission() method.

    \n
    \n

    ScheduleOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idnumberOptional: A unique notification identifier. Will be generated if not set.
    titlestringOptional: The title that is shown in the statusbar.
    subtitlestringOptional: Shown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
    bodystringOptional: The text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't launch.
    colorstringOptional: (Android-only)Custom color for the notification icon and title that will be applied when the notification center is expanded.
    bigTextStylebooleanOptional: (Android-only)Allow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false.
    groupedMessagesArray<string>Optional: An array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set .
    groupSummarystringOptional: An inboxStyle notification summary. Default empty
    tickerstringOptional: On Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atDateOptional: A JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
    badgebooleanOptional: On iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundstringOptional: Notification sound. For custom notification sound, copy the file to App_Resources/iOS and App_Resources/Android/src/main/res/raw. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalScheduleIntervalOptional: Sets to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
    iconstringOptional: On Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below). See icon and silhouetteIcon Options (Android-only) for more details
    silhouetteIconstringOptional: Same as icon, but should be an alpha-only image and will be used in Android >= Lollipop (21). Defaults to res://ic_stat_notify_silhouette, or the app icon if not present. See icon and silhouetteIcon Options (Android-only) for more details
    imagestringOptional: A url of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
    thumbnailboolean | stringOptional: (Android-only)Custom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. Default not set.
    ongoingbooleanOptional: (Android-only) Sets whether the notification is ongoing. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.
    channelstringOptional: Sets the channel name for Android API >= 26, which is shown when the user longpresses a notification. Default is Channel.
    forceShowWhenInForegroundbooleanOptional: Indicates whether to always show the notification. On iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
    prioritynumberOptional: Overrides forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details. Default is 0.
    actionsNotificationActionOptional: An array of NotificationAction objects for adding buttons or text input to a notification with which the use can interact.
    notificationLedboolean | ColorOptional: (Android Only) Indicates whether to enable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device).Default not set.
    \n

    NotificationAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringAn id so you can easily distinguish your actions.
    type'button' | 'input'The type of the view.
    titlestringOptional: The label for type = button.
    launchbooleanOptional: Launch the app when the action completes. This will only work in apps targeting Android 11 or lower (target SDK < 31).
    submitLabelstringOptional: The submit button label for type = input.
    placeholderstringOptional: The placeholder text for type = input.
    choicesArray<string>Optional: (Android-only) For type = 'input'
    editablebooleanOptional: (Android-only) For type = 'input'. Defaults to true
    \n

    icon and silhouetteIcon Options (Android-only)

    \n

    These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

    \n

    These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi18 × 18120
    mdpi24 × 24160
    hdpi36 × 36240
    xhdpi48 × 48320
    xxhdpi72 × 72480
    xxxhdpi96 × 96640 approx.
    \n

    Source: Density Qualifier Docs

    \n

    addOnMessageReceivedCallback()

    \n
    LocalNotifications.addOnMessageReceivedCallback((notification: ReceivedNotification) => {
    \t//Handle the received notification
    }).then(() => {
    \tconsole.log('Listener added');
    });
    \n

    Responds to a notification tap event.

    \n

    ReceivedNotification

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idnumberOptional: The notification id.
    foregroundbooleanOptional: Whether the app was in foreground when the notification was received
    titlestringOptional: The notification title.
    bodystringOptional: The notification body.
    eventstringOptional: Whether the response was through a button or an input
    responsestringOptional: The user's response to the notification, either what they input in the text field or the option chosen from the button.
    payloadanyOptional: The data sent to the user with the notification
    \n
    \n

    addOnMessageClearedCallback()

    \n
    LocalNotifications.addOnMessageClearedCallback((notification: ReceivedNotification) => {
    \t//Handle the received notification
    }).then(() => {
    \tconsole.log('Listener added');
    });
    \n

    Responds to a notification clear event.\nSee ReceivedNotification for more info.

    \n
    \n

    getScheduledIds()

    \n
    LocalNotifications.getScheduledIds().then((ids: number[]) => {
    \tconsole.log(\"ID's: \" + ids);
    });
    \n

    Returns the ids of all the scheduled notifications.

    \n
    \n

    cancel()

    \n
    LocalNotifications.cancel(id).then((foundAndCanceled: boolean) => {
    \tif (foundAndCanceled) {
    \t\t//
    \t} else {
    \t\t//
    \t}
    });
    \n

    Cancels the scheduled notification with the specified id.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    idnumberThe of the scheduled notification to be cancelled.
    \n
    \n

    cancelAll()

    \n
    LocalNotifications.cancelAll();
    \n

    Cancels all the scheduled notifications.

    \n
    \n

    requestPermission()

    \n
    LocalNotifications.requestPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n

    Requests for the user's permissions for the app to send her notifications.\nIf the permission has already been granted, it returns true. Otherwise, it returns false.

    \n
    \n

    hasPermission()

    \n
    LocalNotifications.hasPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n

    Checks if the application has the permission to notify the user.

    \n","downloadStats":{"lastDay":209,"lastWeek":1085,"lastMonth":4899}},"@nativescript/imagepicker":{"name":"@nativescript/imagepicker","version":"3.0.0","license":"Apache-2.0","readme":"

    @nativescript/imagepicker

    \n

    Contents

    \n\n

    Intro

    \n

    Imagepicker plugin supporting both single and multiple selection.

    \n
      \n
    • Plugin supports iOS8+ and uses QBImagePicker cocoapod.
      • \n
    • For Android it uses Intents to open the stock images or file pickers. For Android 6 (API 23) and above, the permissions to read file storage should be explicitly required.
      • \n
    \n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your app.

    \n
    npm install @nativescript/imagepicker
    \n

    Note: Version 3.0 contains breaking changes:

    \n
      \n
    • authorize() now returns a Promise<AuthorizationResult> for both android and ios.
      • \n
    • In the returned result from present() each result[i].thumbnail is now an ImageSource.
      • \n
    • result[i].duration is now typed correctly as a number.
      • \n
    \n

    Note: Version 2.0 contains breaking changes. In order supply more information about your selection, the ImageSource asset is nested in the response so you'll need to update your code to use result.asset instead of result as your src for your Images.

    \n

    Android required permissions

    \n

    Add the following permissions to the App_Resources/Android/src/main/AndroidManifest.xml file:

    \n
      \n
    • targetSdkVersion < 33
      • \n
    \n
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

    <application android:requestLegacyExternalStorage=\"true\" ... >
        ...
      </application>
    \n
      \n
    • targetSdkVersion >=33(Android 13+)
      • \n
    \n
    <uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />

    <uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
    \n

    See the complete example here.

    \n

    iOS required permissions

    \n

    Using the plugin on iOS requires the NSPhotoLibraryUsageDescription permission. Modify the app/App_Resources/iOS/Info.plist file to add it as follows:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Description text goes here</string>
    \n

    Apple App Store might reject your app if you do not describe why you need this permission. The default message Requires access to photo library. might not be enough for the App Store reviewers.

    \n

    Pick images

    \n

    To pick images (and/or videos) with the plugin, take the steps below:

    \n
      \n
    1. Import the plugin
      2. \n
    \n\n
    import * as imagePickerPlugin from \"@nativescript/imagepicker\";
    \n
      \n
    1. Instantiate the picker with selection mode
      2. \n
    \n

    Instantiate the picker with selection mode by calling the create funciton of the plugin passing it an object that specifies mode(single or multiple) of media assets selection.

    \n\n
    let imagePickerObj: ImagePicker = imagePickerPlugin.create({
        mode: \"single\"});
    \n
      \n
    1. Pick the images
      2. \n
    \n
      \n
    • Request for permission\nRequest for permission to access photo library by calling the asynchronous authorize method.
      • \n
    • Present the list of media assets\nIf authorization request promise has resolved(e.i. the user has granted the permission), present the list of media assets to be picked from by calling the present method.
      • \n
    • Process the selection\nThe present method resolves with the selected media assets that can you to process and consume.
      • \n
    \n\n
    imagePickerObj
        .authorize()
        .then((authResult) => {
            if(authResult.authorized) {
                return imagePickerObj.present()
                    .then(function(selection) {
                        selection.forEach(function(selected) {
                            this.imageSource = selected.asset;
                            this.type = selected.type;
                            this.filesize = selected.filesize;
                            //etc
                        });
                    });
            } else {
                // process authorization not granted.
            }
        })    
        .catch(function (e) {
            // process error
        });
    \n

    Demo

    \n

    You can play with the plugin on StackBlitz at any of the following links:

    \n\n

    API

    \n

    ImagePicker class

    \n

    The class that provides the media selection API. It offers the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    constructor(options: Options)ImagePickerInstanciates the ImagePicker class with the optional options parameter. See Options
    authorize()Promise<AuthorizationResult>Requests the required permissions. Call it before calling present(). In case of a failed authorization, consider notifying the user for degraded functionality. The returned AuthorizationResult will have it's authorized property set to true if permission has been granted.
    present()Promise<ImagePickerSelection[]>Presents the image picker UI.
    create(options: Options, hostView: View)ImagePickerCreates an instance of the ImagePicker class. The hostView parameter can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.
    \n

    Options

    \n

    An object passed to the create method to specify the characteristics of a media selection.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDefaultDescription
    modestringmultipleThe mode of the imagepicker. Possible values are single for single selection and multiple for multiple selection.
    minimumNumberOfSelectionnumber0Optional: (iOS-only) The minumum number of selected assets.
    maximumNumberOfSelectionnumber0Optional: (iOS-only) The maximum number of selected assets.
    showsNumberOfSelectedAssetsbooleantrueOptional: (iOS-only) Display the number of selected assets.
    promptstringundefinedOptional: (iOS-only) Display prompt text when selecting assets.
    numberOfColumnsInPortraitnumber4Optional: (iOS-only) Sets the number of columns in Portrait orientation
    numberOfColumnsInLandscapenumber7Optional: (iOS-only) Sets the number of columns in Landscape orientation.
    mediaTypeImagePickerMediaTypeAnyOptional: The type of media asset to pick whether to pick Image/Video/Any type of assets.
    copyToAppFolderstringundefinedOptional: If passed, a new folder will be created in your applications folder and the asset will be copied there.
    renameFileTostringundefinedOptional: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended.
    showAdvanced booleanfalseOptional:(Android-only) Show internal and removable storage options on Android (WARNING: not supported officially).
    android{read_external_storage: string;}Optional: (Android-only) Provides a reason for permission request to access external storage on API level above 23.
    \n

    ImagePickerMediaType

    \n

    The type of media assets to be selected.

    \n
      \n
    • Any = 0,
      • \n
    • Image = 1,
      • \n
    • Video = 2
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":219,"lastWeek":2284,"lastMonth":9759}},"nativescript-sqlite":{"name":"nativescript-sqlite","version":"2.8.6","license":"MIT","readme":"

    \"License\" \"License\" \"Proplugins\" \"NativeScriptCore\" \"Twitter

    \n

    NativeScript sqlite

    \n

    A NativeScript module providing sqlite actions for Android and iOS. (with multi-threading)

    \n

    License

    \n

    There are two possible licenses this is released under;

    \n

    \"npm\"\n\"license\"

    \n

    NativeScript-Sqlite Free version

    \n

    This part of the library is released under the MIT License, meaning you are free to include this code any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please see http://nativescript.tools

    \n

    NativeScript-SQLite Commercial/Encrypted Version

    \n

    This also has a commercial license version, allowing you to use the commercial version of the plugin in your projects.

    \n

    The commercial version comes with the following enhancements:

    \n
      \n
    • TypeScript definitions
      • \n
    • Totally backwards compatible with the free version
      • \n
    • Prepared statements
      • \n
    • Multilevel transaction support
      • \n
    • Encryption
      • \n
    • multiple sql statements per query
      • \n
    • Full source code
      • \n
    • Multi-threading
      • \n
    \n

    Note: On iOS when installing the encryption, you might have to delete the following file:\nnode_modules/nativescript-sqlite/platforms/ios/module.modulemap. And then run a tns platform clean ios\nThis file is REQUIRED for normal un-encrypted sqlite; but it can conflict with encryption on some versions of XCode. When you run the app; if you get a console line about encryption not being linked in; then this is the cause.

    \n

    Example Application

    \n

    An example application can be downloaded or cloned from https://github.com/NathanaelA/nativescript-sqlite\nTo use you need to do:

    \n
      \n
    • npm i
      • \n
    • tns run
      • \n
    \n

    optional

    \n
      \n
    • tns plugin add nativescript-sqlite-commercial-???.tgz
      • \n
    • tns plugin add nativescript-sqlite-encrypted-???.tgz
      • \n
    • tns plugin add nativescript-sqlite-sync-???.tgz
      • \n
    \n

    Then run the app the normal way you would.

    \n

    Installation

    \n

    Run tns plugin add nativescript-sqlite in your ROOT directory of your project.

    \n

    optional

    \n
      \n
    • tns plugin add ./plugins/nativescript-sqlite-commercial-???.tgz
      • \n
    • tns plugin add ./plugins/nativescript-sqlite-encrypted-???.tgz
      • \n
    • tns plugin add ./plugins/nativescript-sqlite-sync-???.tgz
      • \n
    \n

    Webpacking (NativeScript 8 / Webpack 5)

    \n

    You don't have to do anything! It will automatically add all *.sqlite files in your project.

    \n

    Webpacking (NativeScript 5, 6 & 7 / Webpack 4)

    \n

    If you are including your own sqlite database embedded in your app; and you are webpacking then around line 100 of the webpack.config.js is\na section that looks like so:

    \n
                // Copy assets to out dir. Add your own globs as needed.
                new CopyWebpackPlugin([
                    { from: { glob: \"fonts/**\" } },
                    { from: { glob: \"**/*.jpg\" } },
                    { from: { glob: \"**/*.png\" } },
                    { from: { glob: \"**/*.sqlite\" }},
                ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] })
    \n

    Add a new line { from: { glob: "**/*.sqlite" } }, so that it will pick up your sqlite file while bundling the application.

    \n

    In addition, if you are not using the Sync, Commercial or Encrypted plugin; you would need to add to the webpack.config.js file any you are not using:

    \n
            externals.push('nativescript-sqlite-commercial');
            externals.push('nativescript-sqlite-encrypted');
            externals.push('nativescript-sqlite-sync');
    \n

    so that it ignores those during webpacking, right below the line that says\n'const externals = nsWebpack.getConvertedExternals(env.externals)'

    \n

    Usage

    \n

    To use the sqlite module you must first require() it:

    \n
    const Sqlite = require( \"nativescript-sqlite\" );
    \n

    (or with TypeScript, if using the commercial version)

    \n
    import Sqlite from \"nativescript-sqlite\";
    \n

    After you have a reference to the module you can then call the available methods.\nThe database defaults to returning result sets in arrays; i.e. [[field1, field2, ...], [field1, field2], [field1, field2] ...] you can change this to returning them in objects if you desire.

    \n

    Shipping a Database with the application

    \n

    If you are planning on shipping a database with the application; drop the file in your projects /app folder (src if using Angular). The Sqlite.copyDatabase("database_name") will copy the database from that folder to the proper database folder on your platform.

    \n

    Callbacks

    \n
      \n
    • All callbacks have the standard (Error, result) prototype
      • \n
    • USE CALLBACKS or PROMISES; it is not recommended to use both
      • \n
    \n

    Promises

    \n
      \n
    • Will either call your reject with the error or the resolve with the answer
      • \n
    • USE CALLBACKS or PROMISES; it is not recommended to use both
      • \n
    \n

    Constants

    \n
      \n
    • \n

      Sqlite.RESULTSASARRAY - Returns results as Arrays (ex: select name, phone --- results [[name,phone]])

      \n
      • \n
    • \n

      Sqlite.RESULTSASOBJECT - Returns results as Objects (ex: select name, phone --- results [{name: name, phone: phone}]

      \n
      • \n
    • \n

      Sqlite.VALUESARENATIVE - Returns the values as the native values; i.e. Integer = Integer, Float = Number

      \n
      • \n
    • \n

      Sqlite.VALUESARESTRINGS - Returns all the values as a string; so the Integer 1 would be returned as "1"

      \n
      • \n
    • \n

      Sqlite.HAS_COMMERCIAL - will be true if commercial library is loaded.

      \n
      • \n
    • \n

      Sqlite.HAS_ENCRYPTION - will be true if encryption library is loaded.

      \n
      • \n
    • \n

      Sqlite.HAS_SYNC - will be true if sync library is loaded.

      \n
      • \n
    \n

    Methods

    \n

    new Sqlite(dbname, options, callback)

    \n

    promise = Sqlite(dbname, options, callback)

    \n
    Parameters
    \n
      \n
    • dbname: your database name. This can be ":memory:" for a memory Database. This can be "" for a Temporary Database.
      • \n
    • options\n
        \n
      • "readOnly", which if set to true will make the db read only when it opens it
        • \n
      • "key", used for using/opening encrypted databases (See Encryption at bottom of document, require Commercial version)
        • \n
      • "multithreading", enable background multitasking. All SQL is ran on a background worker thread. (Requires Commercial version)
        • \n
      • "migrate", migrates a Encrypted Sql database from v3 to the new v4. If you are a new user you do not need to set this flag as new created databases will already be in v4. If you are upgrading a app that used v1.3.0 or earlier of NS-Sqlite-Encrypted; then you will probably want to set this flag to true.
        • \n
      \n
      • \n
    • (optional) callback (error, db): db is the fully OPEN database object that allows interacting with the db.
      • \n
    • RETURNS: promise of the DB object
      • \n
    \n

    You should choose either to use a promise or a callback; you can use whichever you are most comfortable with -- however, as with this example, you CAN use both if you want; but side effects WILL occur with some functions.

    \n
    // Promise based example
    const Sqlite = require( \"nativescript-sqlite\" );

    const db = await Sqlite(\"MyTable\");
    console.log(\"Are we open yet (Promise based)? \", db.isOpen() ? \"Yes\" : \"No\"); // Yes
    \n

    or

    \n
    // Callback based example
    const Sqlite = require( \"nativescript-sqlite\" );
    new Sqlite(\"MyTable\", function(err, db) {
        if (err) {
          console.error(\"We failed to open database\", err);
        } else {
          // This should ALWAYS be true, db object is open in the \"Callback\" if no errors occurred
          console.log(\"Are we open yet (Callback based)? \", db.isOpen() ? \"Yes\" : \"No\"); // Yes
        }
    });
    \n

    Sqlite.isSqlite()

    \n
    Parameters
    \n
      \n
    • object to check
      • \n
    • RETURNS: Boolean, True or False if the object passed to this function is a sqlite database
      • \n
    \n
    // my-page.js
    new Sqlite(\"test.db\", function(err, db) {
      console.log(\"Is a Sqlite Database:\", Sqlite.isSqlite(db) ? \"Yes\" : \"No\");  // Should print \"Yes\"
    });
    \n

    Sqlite.exists(dbName)

    \n
    Parameters
    \n
      \n
    • dbName - database name
      • \n
    • RETURNS: Boolean, True if the database exists in the App/OS Database folder
      • \n
    \n

    Sqlite.deleteDatabase(dbName)

    \n
      \n
    • dbName - database name to delete in the App/OS Database folder
      • \n
    • RETURNS: Nothing
      • \n
    \n

    Sqlite.copyDatabase(dbName, destName)

    \n
      \n
    • dbName - database name to copy from your app folder to the proper database folder on the OS
      • \n
    • destName - (OPTIONAL) - if you want the database destination name to be something different than the source
      • \n
    • RETURNS: True if copy was successful
      • \n
    • NOTES: This will only copy the file if it does not already exist at the destination.
      • \n
    \n
    // If we are in Debug Code, we always delete the database first so that the latest copy of the database is used...
    if (DEBUGMODE && Sqlite.exists(\"mydatabase.sqlite\")) {
      Sqlite.deleteDatabase(\"mydatabase.sqlite\");
    }
    if (!Sqlite.exists(\"mydatabase.sqlite\")) {
      // Example: Copying a different name to mydatabase.sqlite
      // Sqlite.copyDatabase(\"original.sqlite\", \"mydatabase.sqlite\");
      // OR copy mydatabase to where it belongs...
      Sqlite.copyDatabase(\"mydatabase.sqlite\");
    }
    \n

    DB Methods = Returned Database Object from Constructor

    \n

    DB.version()

    \n
    Parameters
    \n
      \n
    • Value to set it to, or a Callback for retrieving the value.\nIf Callback Value will have the version. On a new Database it will be Zero\nIf Version number, then the database will be changed to the version you passed to this function
      • \n
    • RETURNS: Promise.
      • \n
    \n
    new Sqlite(\"test.db\", function(err, db) {
      db.version(function(err, ver) {
        if (ver === 0) {
          db.execSQL(\"Create table....\");
          db.version(1); // Sets the version to 1
        }
      });
    });
    \n

    DB.isOpen()

    \n
      \n
    • RETURNS: Boolean, Is the current database open true/false\nPlease note; it is possible that this value could be wrong initially in multithreading as the db might still be in the process of opening. For compatibility we set this to true automatically in multithreading after you do an open.
      • \n
    \n

    DB.resultType(Sqlite.YYY)

    \n
    Parameters
    \n
      \n
    • Pass in Sqlite.RESULTSASOBJECT or Sqlite.RESULTSASARRAY to change the result sets configuration\nThis will set the database to return the results in which ever choice you make. (Default is RESULTSASARRAY)
      • \n
    \n

    DB.valueType(Sqlite.YYY)

    \n
    Parameters
    \n
      \n
    • Pass in Sqlite.VALUESARENATIVE or Sqlite.VALUESARESTRING to change the result sets configuration\nThis will set the database to return the results to which ever choice you make. (Default is VALUESARENATIVE)
      • \n
    \n

    DB.close()

    \n
      \n
    • Closes the database
      • \n
    • RETURNS: Promise\nNOTE: Any DB calls after this will throw errors.
      • \n
    \n

    DB.execSQL(SQL statement, params, callback)

    \n

    DB.execSQL([multiple statements], [params], callback) - Commercial Version Feature

    \n
    Parameters
    \n
      \n
    • SQL statements to run, can use ? for Parameters
      • \n
    • Params (Optional) - an array of Parameters
      • \n
    • Callback will either return null or the last id inserted or the record count of update/delete\nThis routine you can use for "update", "insert", "delete" and any other sqlite command where you are not expecting a result set back.\nIf this is a Insert it will return the last row id of the new inserted record. If it is a update/insert it will return the number of rows affected.\nIf you send multiple queries, then you will get an array of results.
      • \n
    • RETURNS: Promise; resolved results are the same as the callback values.
      • \n
    \n
    // new SQLite(....
    db.execSQL(\"insert into Hello (word) values (?)\", [\"Hi\"], function(err, id) {
      console.log(\"The new record id is:\", id);
    });
    \n
    // NOTE: Sending Arrays of queries is only available in Commercial version...
    // new SQLite(....
    const promise = db.execSQL([\"insert into Hello (word) values (?)\", \"insert into Hello (word) values (?)\"], [[\"Hi\"], [\"Hello\"]]);
    promise.then(function(ids) {
            console.log(\"The new record ids are:\", ids[0], ids[1]);
    });
    \n

    DB.get(statement, params, callbacks)

    \n

    DB.get([multiple statements], [params], callback) - Commercial Version Feature

    \n
    Parameters
    \n
      \n
    • SQL SELECT statement, can use ? for parameters
      • \n
    • Params (Optional)
      • \n
    • Callback will have the first row of the result set.
      • \n
    • RETURNS: Promise, will has have first row.
      • \n
    \n
    // new SQLite(...
    db.get('select * from Hello where id=?', [1], function(err, row) {
      console.log(\"Row of data was: \", row);  // Prints [[\"Field1\", \"Field2\",...]]
    });
    \n
    // new SQLite(...
    const promise = db.get('select * from Hello where id=?', [1]);
    promise.then(function(row) {
        console.log(\"Row of data was: \", row);  // Prints [[\"Field1\", \"Field2\",...]]
    });
    \n

    DB.all(query, params, callback)

    \n

    DB.all([multiple queries], [params], callback) - Commercial Version Feature

    \n
    Parameters
    \n
      \n
    • SQL SELECT statement, can use ? for parameters
      • \n
    • Params (Optional)
      • \n
    • Callback will have the all the rows of the result set.
      • \n
    • RETURNS: Promise, will have all the rows of the result set.
      • \n
    \n
    // new SQLite(...
    db.all('select * from Hello where id > ? and id < ?', [1,100], function(err, resultSet) {
      console.log(\"Result set is:\", resultSet); // Prints [[\"Row_1 Field_1\" \"Row_1 Field_2\",...], [\"Row 2\"...], ...]
    });
    \n
    // new SQLite(...
    const promise = db.all('select * from Hello where id > ? and id < ?', [1,100]);
    promise.then(function(resultSet) {
      console.log(\"Result set is:\", resultSet); // Prints [[\"Row_1 Field_1\" \"Row_1 Field_2\",...], [\"Row 2\"...], ...]
    });
    \n

    DB.each()

    \n
    Parameters
    \n
      \n
    • SQL Select statement, can use ? for parameters
      • \n
    • Params (Optional)
      • \n
    • Callback (REQUIRED) will be called for EACH row of the result set with the current row value
      • \n
    • Finished_Callback (Optional) will be called when it is complete with the number of rows handled.
      • \n
    • RETURNS: Promise; please note the per row CALLBACK is still required; otherwise you won't have any results...
      • \n
    \n
    // new SQLite(...
    db.each('select * from Hello where id >= ? and id <= ?', [1, 100],
    function (err, row) {
      console.log(\"Row results it:\", row); // Prints [\"Row x Field_1\", \"Row x Field 2\"...] for each row passed to it
    },
    function (err, count) {
      console.log(\"Rows displayed:\", count); // Prints 100  (Assuming their are a 100 rows found)
    });
    \n
    // new SQLite(...
    const promise = db.each('select * from Hello where id >= ? and id <= ?', [1, 100],
    function (err, row) {
      console.log(\"Row results it:\", row); // Prints [\"Row x Field_1\", \"Row x Field 2\"...] for each row passed to it
    });
    promise.then(function (count) {
      console.log(\"Rows displayed:\", count); // Prints 100  (Assuming their are a 100 rows found)
    });
    \n

    Commercial Only Features

    \n

    To enable the optional features

    \n

    To enable encryption: tns plugin add nativescript-sqlite-encrypted-1.2.1.tgz

    \n

    To enable commercial: tns plugin add nativescript-sqlite-commercial-1.2.0.tgz

    \n

    Encryption Support

    \n

    Pass the encryption key into database open function using the options.key and it will be applied. Please note the database itself MUST be created with encryption to use encryption. So if you create a plain database, you can not retroactively add encryption to it.
    \nIf you pass a blank ("") empty key, then it will treat it as no key. But, it will still use the encrypted driver in case you need certain features from the more modern sqlite driver; but don't need encryption.

    \n

    Note: Enabling/Compiling in the encryption driver adds about 3 megs to the size to the application APK on android and about 2 megs to a iOS application.

    \n

    Encryption Upgrade

    \n

    There is a NEW upgrade option you can pass to the database constructor. if you were using an older version (1.3.0 or earlier) of this NS-Sqlite-Encryption.

    \n
      \n
    • "migrate", migrates a Encrypted Sql database from v3 to the new v4. If you are a new user you do not need to set this flag as new created databases will already be in v4. If you are upgrading a app that used v1.3.0 or earlier of NS-Sqlite-Encrypted; then you will probably want to set this flag to true.
      • \n
    \n

    iOS Encryption Notes

    \n

    If you see SQLCipher does not seem to be linked into the application

    \n

    Sometimes iOS decides it really wants to bring in the native SQLite over the encrypted version.\nA couple things you can try:

    \n
      \n
    • Delete some files that aren't needed when using encryption that might bring in the standard sqlite plugin.\n
        \n
      • rm node_modules/nativescript-sqlite/platforms/ios/build.xcconfig
        • \n
      • rm node_modules/nativescript-sqlite/platforms/ios/module.modulemap
        • \n
      • Then tns platform clean ios
        • \n
      \n
      • \n
    \n

    Multitasking / Multithreading

    \n

    The commercial version supports putting all SQL access into a background thread, so your UI doesn't freeze while doing data access. To enable; just pass in {multithreading: true} as an option when creating a new Sqlite connection.

    \n

    Prepared Queries

    \n

    DB.prepare(SQL)

    \n
    Parameter:
    \n
      \n
    • SQL Statement
      • \n
    • Returns Prepared Statement
      • \n
    \n

    PREPAREDSTATEMENT.execute(param1, param2, param3, optional_callback)

    \n

    PREPAREDSTATEMENT.execute([param1, param2, param3], optional_callback)

    \n

    PREPAREDSTATEMENT.execute([ [ p1, p2, p3], [p1, p2, p3], ...], optional_callback)

    \n
    Parameters:
    \n
      \n
    • Pass in values, Array of values, or Array of Arrays
      • \n
    • Pass in an optional callback last for when finished.
      • \n
    • Returns a Promise
      • \n
    \n

    PREPAREDSATEMENT.finished()

    \n
      \n
    • Cleans up and destroys this prepared statement. Use when you are all done with the prepared statement.
      • \n
    \n
    const prep = db.prepare('insert into names (first, last) values (?,?)');
    for (let i=0;i<10;i++) {
    \tprep.execute([\"Name\", i]);
    }
    prep.finished();
    \n

    Transactions

    \n

    DB.begin()

    \n
    Parameters
    \n
      \n
    • callback (Optional)
      • \n
    • RETURNS promise\nThis starts a new transactions, if you start a nested transaction, until you commit the first transaction nothing is written.
      • \n
    \n

    DB.commit()

    \n
    Parameters
    \n
      \n
    • callback (Optional)
      • \n
    • RETURNS promise\nThis commits a single transaction, if this is a nested transaction; the changes are not written until the first/final transaction is committed.
      • \n
    \n

    DB.commitAll()

    \n
    Parameters
    \n
      \n
    • callback (Optional)
      • \n
    • RETURNS promise\nThis commits the entire transaction group, everything is written and any open transactions are committed.
      • \n
    \n

    DB.rollback()

    \n
    Parameters
    \n
      \n
    • callback (Optional)
      • \n
    • RETURNS promise\nThis rolls back a single transaction, if this is a nested transaction; only the outermost nested transaction is rolled back.
      • \n
    \n

    DB.rollbackAll()

    \n
    Parameters
    \n
      \n
    • callback (Optional)
      • \n
    • RETURNS promise\nThis rolls back the entire transaction group; everything is cancelled.
      • \n
    \n

    Tutorials

    \n

    Need a little more to get started? Check out these tutorials for using SQLite in a NativeScript Android and iOS application.

    \n\n

    Error Notes

    \n
      \n
    • If you get an error about opening a SQL table android.database.sqlite.SQLiteException: Failed to change locale for db <dbname> to 'en_US'.\nYou need to create the table and insert the locale it is failing on:
      • \n
    \n
    CREATE TABLE android_metadata ( locale TEXT );
    insert into android_metadata values ('en_us');
    \n

    Or pass the .androidFlags value of 16 to the open statement.

    \n","downloadStats":{"lastDay":151,"lastWeek":705,"lastMonth":1868}},"nativescript-connectycube":{"name":"nativescript-connectycube","version":"3.27.4","license":"Apache-2.0","readme":"

    ConnectyCube NativeScript SDK for messaging and video calling apps

    \n

    ConnectyCube NativeScript SDK.

    \n

    ConnectyCube is a messaging and video calling platform for iOS, Android, Web, React Native, NativeScript and Cordova apps.

    \n

    Check our comprehensive guide for NativeScript SDK.

    \n

    Features

    \n
      \n
    • Messaging - first-class messaging API to build 1-1 and group chats, broadcast channels and so on. Different chat attachments are supported in the cloud.
      • \n
    • Video calling - peer-to-peer and group video calling up to 10 people based on modern WebRTC technologies. Various quality settings and audio/video codecs supported.
      • \n
    • Push notifications - never miss your chat messages with automatic push notifications to offline users. Also receive a push to all your devices when somebody calls you in a video chat.
      • \n
    • Authentication & Users - manage all the things related to user accounts handling, authentication, account data, password reminding etc. Integration with your own user base via external auth mechanisms.
      • \n
    • Chat bots - use chat bots to enable users to conversationally interact with your service or your product. Bots are fully automated services.
      • \n
    \n

    For more details check the ConnectyCube features page

    \n

    Connect SDK

    \n

    Simply install the package in a normal way:

    \n
    npm install nativescript-connectycube --save
    \n

    and you're ready to go:

    \n
    import ConnectyCube from 'nativescript-connectycube'

    const credentials = {
        appId: 21,
        authKey: 'hhf87hfushuiwef',
        authSecret: 'jjsdf898hfsdfk'
    };

    const config = {
        debug: { mode: 1 }
    };

    ConnectyCube.init(credentials, config);
    \n

    Contribution

    \n

    See more information at CONTRIBUTING.md

    \n

    License

    \n

    Apache 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":101,"lastMonth":304}},"swtc-nativescript-brorand":{"name":"swtc-nativescript-brorand","version":"1.1.2","license":"MIT","readme":"

    Brorand

    \n

    LICENSE

    \n

    This software is licensed under the MIT License.

    \n

    Copyright Fedor Indutny, 2014.

    \n

    Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

    \n

    The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

    \n

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":19}},"@nstudio/xplat-utils":{"name":"@nstudio/xplat-utils","version":"17.0.1","license":"MIT","readme":"

    Cross-platform (xplat) tools for Nx workspaces

    \n

    \n
    \n

    \"Build\n\"License\"\n\"NPM

    \n
    \n
    \n

    xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

    \n

    Currently supported platforms

    \n
      \n
    • Electron\n
      \n

      Build cross platform desktop apps with JavaScript, HTML, and CSS.

      \n
      \n
      • \n
    • Ionic\n
      \n

      Build amazing apps in one codebase, for any platform, with the web.

      \n
      \n
      • \n
    • NativeScript\n
      \n

      Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

      \n
      \n
      • \n
    \n

    Quickstart

    \n
    npx create-nx-workspace@latest

    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based or integrated? … 
    Integrated:    Nx creates a workspace structure most suitable for building apps.
    \n

    Init workspace

    \n

    Install the @nx/js plugin.

    \n
    npm install @nx/js -D
    \n

    Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install the tools:

    \n
    npm install @nstudio/xplat -D
    \n

    You are now ready to create apps:

    \n
    npx nx g @nstudio/xplat:app
    \n

    Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

    \n

    App generation examples

    \n

    The additional app generators can be used as follows:

    \n

    Electron

    \n

    Electron app generator can use any web app in the workspace as it's target.

    \n

    If you don't have a web app yet, create one first:

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose web

    \n
    \n

    You can now use the web app as the Electron target:

    \n
    npx nx g @nstudio/xplat:app desktop --target=web-sample
    \n
    \n

    choose electron

    \n
    \n

    Develop with:

    \n
    npm run start.electron.desktop
    \n

    Ionic

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose ionic

    \n
    \n

    Develop in browser with:

    \n
    npx nx serve ionic-sample
    \n

    Build Ionic app:

    \n
    npx nx build ionic-sample
    \n

    A. Capacitor iOS - Prepare for development

    \n
    npm run prepare.ionic.sample.ios
    \n

    You can now open in Xcode for further development:

    \n
    npm run open.ionic.sample.ios
    \n

    B. Capacitor Android - Prepare for development

    \n
    npm run prepare.ionic.sample.android
    \n

    You can now open in Android Studio for further development:

    \n
    npm run open.ionic.sample.android
    \n

    NativeScript

    \n
    nx g @nstudio/xplat:app mobile
    \n
    \n

    choose nativescript

    \n
    \n

    A. iOS

    \n
    npx nx run nativescript-mobile:ios
    \n

    B. Android

    \n
    npx nx run nativescript-mobile:android
    \n

    Documentation

    \n\n

    Talks

    \n\n

    Recommended extra tooling

    \n\n

    Example repos for different scenarios

    \n
      \n
    • Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
      • \n
    • Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing
      • \n
    \n

    Context

    \n\n","downloadStats":{"lastDay":316,"lastWeek":2200,"lastMonth":10273}},"@oliverphaser/nativescript-bitmap-factory":{"name":"@oliverphaser/nativescript-bitmap-factory","version":"1.0.16","license":"MIT","readme":"

    \"npm\"\n\"apple\"\n\"android\"\n
    \n\"support\"

    \n

    NativeScript Bitmap Factory

    \n

    A NativeScript module for creating and manipulating bitmap images.

    \n

    NativeScript 8

    \n

    This will work only on NativeScript 8.

    \n

    NativeScript Toolbox

    \n

    The originial module is part of nativescript-toolbox.

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n
    ns plugin add @oliverphaser/nativescript-bitmap-factory
    \n

    Usage

    \n
    import BitmapFactory = require(\"@oliverphaser/nativescript-bitmap-factory\");
    import KnownColors = require(\"@nativescript/core/color/known-colors\");

    // create a bitmap with 640x480
    var bmp = BitmapFactory.create(640, 480);

    // work with bitmap and
    // keep sure to free memory
    // after we do not need it anymore
    bmp.dispose(() => {
        // draw an oval with a size of 300x150
        // and start at position x=0, y=75
        // and use
        // \"red\" as border color and \"black\" as background color.
        bmp.drawOval(\"300x150\", \"0,75\",
                     KnownColors.Red, KnownColors.Black);
          
        // draw a circle with a radius of 80
        // at the center of the bitmap (null => default)
        // and use
        // \"dark green\" as border color           
        bmp.drawCircle(80, null,
                       KnownColors.DarkGreen);
                    
        // draws an arc with a size of 100x200
        // at x=10 and y=20
        // beginning at angle 0 with a sweep angle of 90 degrees
        // and a black border and a yellow fill color    
        bmp.drawArc(\"100x200\", \"10,20\",
                    0, 90,
                    KnownColors.Black, KnownColors.Yellow);
                       
        // set a yellow point at x=160, y=150
        bmp.setPoint(\"160,150\", \"ff0\");
        
        // draws a line from (0|150) to (300|75)
        // with blue color
        bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
        
        // writes a text in yellow color
        // at x=100, y=100
        // by using \"Roboto\" as font
        // with a size of 10
        bmp.writeText(\"This is a test!\", \"100,100\", {
            color: KnownColors.Yellow,
            size: 10,
            name: \"Roboto\"
        });
        
        // returns the current bitmap as data URL
        // which can be used as ImageSource
        // in JPEG format with a quality of 75%
        var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and in Base64 format
        var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and as ImageSource
        var imgSrc = bmp.toImageSource();
    });
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    asBitmapReturns a value as wrapped bitmap.
    createCreates a new bitmap instance.
    getDefaultOptionsReturns the default options for creating a new bitmap.
    makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
    setDefaultOptionsSets the default options for creating a new bitmap.
    \n

    Platform specific stuff

    \n

    You can access the nativeObject property to access the platform specific object.

    \n

    For Android this is a Bitmap object and for iOS this is an UIImage object.

    \n

    To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

    \n

    Android

    \n

    You also can access the underlying Canvas object by __canvas property.

    \n

    iOS

    \n

    You also can access the underlying CGImage object by__CGImage property.

    \n

    Data types

    \n

    IArgb

    \n

    Stores data of an RGB value with alpha value.

    \n

    These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

    \n
    interface IArgb {
        /**
         * Gets the alpha value.
         */
        a: number;

        /**
         * Gets the red value.
         */
        r: number;

        /**
         * Gets the green value.
         */
        g: number;

        /**
         * Gets the blue value.
         */
        b: number;
    }
    \n

    IBitmapData

    \n

    Used by toObject() method.

    \n
    interface IBitmapData {
        /**
         * Gets the data as Base64 string.
         */
        base64: string;

        /**
         * Gets the mime type.
         */
        mime: string;
    }
    \n

    IFont

    \n

    Font settings.

    \n
    interface IFont {
        /**
         * Anti alias or not.
         */
        antiAlias?: boolean;

        /**
         * Gets the custom forground color.
         */
        color?: string | number | IArgb;
        
        /**
         * Gets the name.
         */
        name?: string;

        /**
         * Gets the size.
         */
        size?: number;
    }
    \n

    IPoint2D

    \n

    Coordinates, can also be a string like 0,0 or 150|300.

    \n
    interface IPoint2D {
        /**
         * Gets the X coordinate.
         */
        x: number;
        
        /**
         * Gets the Y coordinate.
         */
        y: number;
    }
    \n

    IPoint2D

    \n

    Size, can also be a string like 0,0 or 150x300.

    \n
    interface ISize {
        /**
         * Gets the height.
         */
        height: number;
        
        /**
         * Gets the width.
         */
        width: number;
    }
    \n

    OutputFormat

    \n

    Supported output formats.

    \n
    enum OutputFormat {
        /**
         * PNG
         */
        PNG = 1,

        /**
         * JPEG
         */
        JPEG = 2,
    }
    \n

    Bitmap

    \n
    interface IBitmap {
        /**
         * Get the android specific object provided by 'application' module.
         */
        android: AndroidApplication;

        /**
         * Clones that bitmap.
         */
        clone(): IBitmap;

        /**
         * Crops that bitmap and returns its copy.
         */
        crop(leftTop?: IPoint2D | string,
             size?: ISize | string): IBitmap;

        /**
         * Gets or sets the default color.
         */
        defaultColor: IPoint2D | string | number;

        /**
         * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
         */
        dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                            tag?: T): TResult;

        /**
         * Draws a circle.
         */
        drawCircle(radius?: number,
                   center?: IPoint2D | string,
                   color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws an arc.
         */
        drawArc(size?: ISize | string,
                leftTop?: IPoint2D | string,
                startAngle?: number,
                sweepAngle?: number,
                color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a line.
         */
        drawLine(start: IPoint2D | string, end: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Draws an oval circle.
         */
        drawOval(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a rectangle.
         */
        drawRect(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Gets the color of a point.
         */
        getPoint(coordinates?: IPoint2D | string): IArgb;

        /**
         * Gets the height of the bitmap.
         */
        height: number;

        /**
         * Get the iOS specific object provided by 'application' module.
         */
        ios: iOSApplication;

        /**
         * Inserts another image into that bitmap.
         */
        insert(other: any,
               leftTop?: IPoint2D | string): IBitmap;
        
        /**
         * Gets if the object has been disposed or not.
         */
        isDisposed: boolean;

        /**
         * Gets the native platform specific object that represents that bitmap.
         */
        nativeObject: any;

        /**
         * Normalizes a color value.
         */
        normalizeColor(value: string | number | IArgb): IArgb;

        /**
         * Creates a copy of that bitmap with a new size.
         */
        resize(newSize: ISize | string): IBitmap;

        /**
         * Resizes that image by defining a new height by keeping ratio.
         */
        resizeHeight(newHeight: number): IBitmap;

        /**
         * Resizes that image by defining a new (maximum) size by keeping ratio.
         */
        resizeMax(maxSize: number): IBitmap;

        /**
         * Resizes that image by defining a new width by keeping ratio.
         */
        resizeWidth(newWidth: number): IBitmap;

        /**
         * Rotates the image.
         */
        rotate(degrees?: number): IBitmap;

        /**
         * Sets a pixel / point.
         */
        setPoint(coordinates?: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Gets the size.
         */
        size: ISize;

        /**
         * Converts that image to a Base64 string.
         */
        toBase64(format?: OutputFormat, quality?: number): string;

        /**
         * Converts that image to a data URL.
         */
        toDataUrl(format?: OutputFormat, quality?: number): string;

        /**
         * Returns that image as ImageSource.
         */
        toImageSource(): ImageSource;

        /**
         * Converts that image to an object.
         */
        toObject(format?: OutputFormat, quality?: number): IBitmapData;

        /**
         * Writes a text.
         */
        writeText(txt: any,
                  leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

        /**
         * Gets the width of the bitmap.
         */
        width: number;
    }
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":2,"lastWeek":5,"lastMonth":256}},"nativescript-drop-down":{"name":"nativescript-drop-down","version":"6.0.2","license":"Apache-2.0","readme":"

    Contribution - help wanted

    \n

    This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

    \n

    Creating a PR checklist:

    \n
      \n
    • Fork the repo
      • \n
    • Add new functionality or fix an issue and push it to your fork
      • \n
    • Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android)
      • \n
    • From your fork create a PR targeting the 'master' branch of this repository
      • \n
    \n

    Thank you for your contribution.

    \n

    NativeScript DropDown widget

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a UILabel with an inputView set to an UIPickerView which displays the items. For Android it wraps up the Spinner widget.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-drop-down

    \n

    This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      opened
      \nTriggered when the DropDown is opened.

      \n
      • \n
    • \n

      closed
      \nTriggered when the DropDown is closed.

      \n
      • \n
    • \n

      selectedIndexChanged
      \nTriggered when the user changes the selection in the DropDown

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      openedEvent - String
      \nString value used when hooking to opened event.

      \n
      • \n
    • \n

      closedEvent - String
      \nString value used when hooking to closed event.

      \n
      • \n
    • \n

      selectedIndexChangedEvent - String
      \nString value used when hooking to selectedIndexChanged event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UILabel
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.widget.Spinner
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the DropDown. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      selectedIndex - Number
      \nGets or sets the selected index of the DropDown.

      \n
      • \n
    • \n

      hint - String
      \nGets or sets the hint for the DropDown.

      \n
      • \n
    • \n

      isEnabled - boolean
      \nGets or sets whether the drop down is enabled. If you want to apply a specific style you can use the :disabled pseudo css selector.

      \n
      • \n
    • \n

      accessoryViewVisible - boolean (Default: true)
      \nGets/sets whether there will be an accessory view (toolbar with Done button) under iOS. Valid only when running on iOS.

      \n
      • \n
    • \n

      itemsTextAlignment - String\nGets or sets the alignment for items in the DropDown.

      \n
      • \n
    • \n

      itemsPadding - String\nGets or sets the padding for items in the DropDown.

      \n
      • \n
    \n

    Methods

    \n
      \n
    • \n

      open(): void
      \nOpens the drop down.

      \n
      • \n
    • \n

      close(): void
      \nCloses the drop down.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:dd="nativescript-drop-down" to your page tag, and then simply use <dd:DropDown/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:dd=\"nativescript-drop-down\">
      <GridLayout rows=\"auto, auto, *\" columns=\"auto, *\">
        <dd:DropDown items=\"{{ items }}\" selectedIndex=\"{{ selectedIndex }}\" 
                     opened=\"dropDownOpened\" closed=\"dropDownClosed\" 
                     selectedIndexChanged=\"dropDownSelectedIndexChanged\"
                     row=\"0\" colSpan=\"2\" />
        <Label text=\"Selected Index:\" row=\"1\" col=\"0\" fontSize=\"18\" verticalAlignment=\"bottom\"/>
        <TextField text=\"{{ selectedIndex }}\" row=\"1\" col=\"1\" />
      </GridLayout>
    </Page>
    \n
    // test-page.ts
    import observable = require(\"data/observable\");
    import observableArray = require(\"data/observable-array\");
    import pages = require(\"ui/page\");
    import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

    var viewModel: observable.Observable;

    export function pageLoaded(args: observable.EventData) {
        var page = <pages.Page>args.object;
        var items = new observableArray.ObservableArray();

        viewModel = new observable.Observable();

        for (var loop = 0; loop < 20; loop++) {
            items.push(\"Item \" + loop.toString());
        }

        viewModel.set(\"items\", items);
        viewModel.set(\"selectedIndex\", 15);

        page.bindingContext = viewModel;
    }

    export function dropDownOpened(args: EventData) {
        console.log(\"Drop Down opened\");
    }

    export function dropDownClosed(args: EventData) {
        console.log(\"Drop Down closed\");
    }

    export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
    }
    \n

    Usage in Angular

    \n
    Migration to 3.0+
    \n
      \n
    • Remove:
      • \n
    \n
    registerElement(\"DropDown\", () => require(\"nativescript-drop-down/drop-down\").DropDown);`
    \n
      \n
    • Import DropDownModule in NgModule:
      • \n
    \n
    import { DropDownModule } from \"nativescript-drop-down/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tDropDownModule,
            //......
    \t],
        //......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { DropDownModule } from \"nativescript-drop-down/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            DropDownModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <GridLayout rows=\"auto, auto, *\"
                    columns=\"auto, *\">
            <DropDown #dd
                      backroundColor=\"red\"
    \t\t  itemsTextAlignment=\"center\"
                      [items]=\"items\"
                      [(ngModel)]=\"selectedIndex\"
                      (selectedIndexChanged)=\"onchange($event)\"
                      (opened)=\"onopen()\"
                      (closed)=\"onclose()\"
                      row=\"0\"
                      colSpan=\"2\">    </DropDown>
            <Label text=\"Selected Index:\"
                   row=\"1\"
                   col=\"0\"
                   fontSize=\"18\"
                   verticalAlignment=\"bottom\">    </Label>
            <TextField [text]=\"selectedIndex\"
                       row=\"1\"
                       col=\"1\">    </TextField>
        </GridLayout>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public selectedIndex = 1;
        public items: Array<string>;
     
        constructor() {
            this.items = [];
            for (var i = 0; i < 5; i++) {
                this.items.push(\"data item \" + i);
            }
        }

        public onchange(args: SelectedIndexChangedEventData) {
            console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
        }

        public onopen() {
            console.log(\"Drop Down opened.\");
        }

        public onclose() {
            console.log(\"Drop Down closed.\");
        }
    }
    \n
    Set the selectedIndex value in Angular
    \n

    Get an instance of the child drop down component like this:

    \n
    @ViewChild('dd') dropDown: ElementRef;
    // set the index programatically from the parent component
    this.dropDown.nativeElement.selectedIndex = <some number from code>
    \n

    Working with value and display members

    \n

    It is a common case that you want to have one thing displayed in the drop down and then get some backend value\ntied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida)\nand then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be\nset to either Array of objects or a custom object that implements getItem(index: number): any function and length proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario:

    \n
    import { ValueList } from \"nativescript-drop-down\";
    \n

    Then you can set the items property of the DropDown to an instance of ValueList:

    \n
    let dd = page.getViewById<DropDown>(\"dd\");
    let itemSource = new ValueList<string>([
        { value: \"FL\", display: \"Florida\" }, 
        { value: \"MI\", display: \"Michigan\" }
    ]);
    dd.items = itemSource;
    \n

    This enables you to do things like:
    \n1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with:

    \n
    dd.selectedIndex = itemSource.getIndex(\"FL\");
    \n

    2.You can get the backend value of what the user selected using:

    \n
    let selectedValue = itemSource.getValue(dd.selectedIndex);
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-drop-down
    $ cd nativescript-drop-down
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":68,"lastWeek":502,"lastMonth":2178}},"@nativescript-community/ui-pulltorefresh":{"name":"@nativescript-community/ui-pulltorefresh","version":"2.5.3","license":"MIT","readme":"\n

    NativeScript-PullToRefresh

    \n    \n

    \nNativeScript plugin to use Pull to Refresh on any view.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation

    \n

    ns plugin add @nativescript-community/ui-pulltorefresh

    \n

    Android - SwipeRefreshLayout

    \n

    iOS - UIRefreshControl

    \n

    Sample Screen

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Android\"iOS
    \n

    Usage

    \n

    NativeScript Core

    \n

    XML

    \n
    <page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:PullRefresh=\"@nativescript-community/ui-pulltorefresh\"
          loaded=\"pageLoaded\">
        <PullRefresh:PullToRefresh refresh=\"refreshList\">
            <list-view items=\"{{ users }}\">
                <list-view.itemTemplate>
                    <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
                </list-view.itemTemplate>
            </list-view>
        </PullRefresh:PullToRefresh>
    </page>
    \n

    JS

    \n
    function refreshList(args) {
      // Get reference to the PullToRefresh component;
      var pullRefresh = args.object;

      // Do work here... and when done call set refreshing property to false to stop the refreshing
      loadItems().then(
        resp => {
          // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
          setTimeout(() => {
            pullRefresh.refreshing = false;
          }, 1000);
        },
        err => {
          pullRefresh.refreshing = false;
        }
      );
    }
    exports.refreshList = refreshList;
    \n

    Angular NativeScript

    \n
    import { registerElement } from '@nativescript/angular';
    import { PullToRefresh } from '@nativescript-community/ui-pulltorefresh';
    registerElement('PullToRefresh', () => PullToRefresh);

    refreshList(args) {
             const pullRefresh = args.object;
             setTimeout(function () {
                pullRefresh.refreshing = false;
             }, 1000);
        }
    \n

    HTML

    \n
    <PullToRefresh (refresh)=\"refreshList($event)\">
      <ListView [items]=\"itemList\">
        <template let-item=\"item\">
          <label [text]=\"item.id\"></label>
        </template>
      </ListView>
    </PullToRefresh>
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';

    Vue.registerElement(
      'PullToRefresh',
      () => require('@nativescript-community/ui-pulltorefresh').PullToRefresh
    );
    \n

    Component

    \n
    <template>
      <Page>
        <PullToRefresh @refresh=\"refreshList\">
          <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
            <v-template>
              <!-- Shows the list item label in the default color and style. -->
              <label :text=\"item.text\" />
            </v-template>
          </ListView>
        </PullToRefresh>
      </Page>
    </template>

    <script>
    export default {
      methods: {
        refreshList(args) {
          var pullRefresh = args.object;
          setTimeout(function() {
            pullRefresh.refreshing = false;
          }, 1000);
        }
      }
    };
    </script>
    \n

    Properties

    \n
      \n
    • refresh : function required
      • \n
    • refreshing: boolean - Notifies the widget that the refresh state has\nchanged.
      • \n
    • indicatorColor: Color - The color of the indicator icon.
      • \n
    • indicatorFillColor: Color - The background color of the indicator.
      • \n
    \n

    Changelog

    \n

    Contributing

    \n","downloadStats":{"lastDay":137,"lastWeek":1297,"lastMonth":5520}},"@swtc/nativescript":{"name":"@swtc/nativescript","version":"1.1.2","license":"BSD-2-Clause","readme":"

    SWTC Library Nativescript ready

    \n

    npm install swtc-nativescript

    \n

    update webpack.config.js

    \n

    ...require('nativescript').aliases,

    \n

    replace node_modules/swtc-lib/src/server.js

    \n

    with src/server.js

    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":194}},"nativescript-share-file-enduco":{"name":"nativescript-share-file-enduco","version":"1.0.9","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install nativescript-akylas-share-file
    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from 'nativescript-akylas-share-file';
        import * as fs from '@nativescript/core/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    intentTitle: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":24}},"nativescript-test":{"name":"nativescript-test","version":"1.0.8","license":"Apache-2.0","readme":"

    nativescript-test

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-test
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":3,"lastWeek":3,"lastMonth":33}},"react-nativescript-navigation":{"name":"react-nativescript-navigation","version":"5.0.0","license":"MIT","readme":"

    react-nativescript-navigation

    \n

    React NativeScript Navigation is the official navigation library for React NativeScript.

    \n

    For implementing the native stack view, we re-implement the same APIs that react-native-screens implement for React Native, but for NativeScript (and have thus renamed it react-nativescript-screens to reduce bewilderment).

    \n

    For implementing the native tabs, I've simply followed the React Navigation docs; no Screens library was needed.

    \n

    This is a provisional implementation; aspects beyond the core functionality of a stack that pushes and pops screens (such as the customisation of its appearance) may not be fully working yet.

    \n

    Installation

    \n
    npm install --save react-nativescript-navigation @react-navigation/native
    \n

    You do not need to install any of react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view as mentioned in the "Getting Started" section of React Navigation. Those are only for React Native projects. react-nativescript-navigation brings all the dependencies it needs.

    \n

    Documentation

    \n
      \n
    • React Navigation: https://reactnavigation.org/docs/getting-started
      • \n
    • React NativeScript: https://react-nativescript.netlify.com/
      • \n
    • Navigation in React NativeScript: https://react-nativescript.netlify.app/docs/core-concepts/navigation
      • \n
    \n

    For the full list of configurable options, see the typings:

    \n\n

    Example usage

    \n
    import * as React from \"react\";
    import { BaseNavigationContainer } from '@react-navigation/core';
    import { stackNavigatorFactory, tabNavigatorFactory } from \"react-nativescript-navigation\";

    const TabNavigator = tabNavigatorFactory();
    const StackNavigator = stackNavigatorFactory();

    /* Tabs Navigator. */
    const TabsAppContainer = () => (
        <BaseNavigationContainer>
            <TabNavigator.Navigator initialRouteName=\"first\">
                <TabNavigator.Screen name=\"first\" component={First}/>
                <TabNavigator.Screen name=\"second\" component={Second}/>
            </TabNavigator.Navigator>
        </BaseNavigationContainer>
    );

    /* Stack Navigator. */
    const StackAppContainer = () => (
        <BaseNavigationContainer>
            <StackNavigator.Navigator
                initialRouteName=\"first\"
                screenOptions={{
                    headerShown: true,
                }}
            >
                <StackNavigator.Screen name=\"first\" component={First}/>
                <StackNavigator.Screen name=\"second\" component={Second}/>
            </StackNavigator.Navigator>
        </BaseNavigationContainer>
    );

    function First({ navigation }){
        function onButtonTap(){
            navigation.navigate('second');
        }

        return (
            <flexboxLayout
                style={{
                    flexGrow: 1,
                    width: \"100%\",
                    height: \"100%\",
                    flexDirection: \"column\",
                    alignItems: \"center\",
                    justifyContent: \"center\",
                    backgroundColor: \"yellow\",
                }}
            >
                <label fontSize={24} text={\"You're viewing the first route!\"}/>
                <button onTap={onButtonTap} fontSize={24} text={\"Go to next route\"}/>
            </flexboxLayout>
        );
    }

    function Second({ navigation }){
        function onButtonTap(){
            navigation.goBack();
        }

        return (
            <flexboxLayout
                style={{
                    flexGrow: 1,
                    flexDirection: \"column\",
                    alignItems: \"center\",
                    justifyContent: \"center\",
                    backgroundColor: \"gold\",
                }}
            >
                <label fontSize={24} text={\"You're viewing the second route!\"}/>
                <button onTap={onButtonTap} fontSize={24} text={\"Go back\"}/>
            </flexboxLayout>
        );
    }

    // export default TabsAppContainer;
    export default StackAppContainer;
    \n

    Limitations

    \n

    React NativeScript Navigation's TabNavigator and StackNavigator have fewer configurable options than React Navigation's ones – this is because the React NativeScript Navigation navigators are fully native, and so are ultimately limited by the styling options that are possible natively (and the way that NativeScript Core wraps them).

    \n

    This library is also a work in progress and I simply don't have time to implement everything all on my own. If you need more configurability, please consider making a Pull Request.

    \n

    To see the full list of configurable options, see the typings:

    \n\n

    Disclaimer: the library is young, so there is a very good chance that I've incorrectly implemented some of the configuration options listed in the typings. For the happy path, I recommend starting out simple and being flexible in your design if the navigators just don't appear to be able to support it.

    \n","downloadStats":{"lastDay":2,"lastWeek":21,"lastMonth":174}},"@nativescript-community/xml-ui-loader":{"name":"@nativescript-community/xml-ui-loader","version":"3.3.1-alpha.3","license":"Apache-2.0","readme":"

    @nativescript-community/xml-ui-loader

    \n

    \"npm\"\n\"npm\"

    \n

    This loader provides support for using @nativescript-community/xml-ui-compiler in Webpack.

    \n

    Installation

    \n
    npm install @nativescript-community/xml-ui-loader --save-dev
    \n

    Usage

    \n

    webpack.config.js

    \n
    const webpack = require('@nativescript/webpack');
    const { getEntryDirPath, getPlatformName } = require('@nativescript/webpack/dist/helpers/platform');
    const { chainLoaderConfiguration } = require(\"@nativescript-community/xml-ui-loader/helpers\");

    module.exports = (env) => {
      webpack.init(env);

      // Learn how to customize:
      // https://docs.nativescript.org/webpack

      webpack.chainWebpack((config) => {
        chainLoaderConfiguration(config, {
          appPath: getEntryDirPath(),
          platform: getPlatformName()
        });
      });

      return webpack.resolveConfig();
    };
    \n

    There are also few preprocessing options that are useful for applying output customizations.

    \n
    chainLoaderConfiguration(config, {
      appPath: getEntryDirPath(),
      platform: getPlatformName(),
      useDataBinding: false, // Set this to false if you don't want to use data binding system
      preprocess: {
        // Format attribute value
        attributeValueFormatter: (value, attributeName, tagName, attributes) => value.toUpperCase(),
        // Manage AST result
        transformAst: (ast, generateFunc) => generateFunc(ast).code,
      }
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":480}},"nativescript-geolocation":{"name":"nativescript-geolocation","version":"5.1.0","license":"Apache-2.0","readme":"

    NativeScript Geolocation \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Geolocation plugin to use for getting current location, monitor movement, etc.

    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-geolocation
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import * as geolocation from \"nativescript-geolocation\";
    import { Accuracy } from \"tns-core-modules/ui/enums\"; // used to describe at what accuracy the location should be get
    \n

    Javascript

    \n
    var geolocation = require(\"nativescript-geolocation\");
    \n

    Request permissions

    \n
    geolocation.enableLocationRequest();
    \n

    Call plugin methods

    \n
    // Get current location with high accuracy
    geolocation.getCurrentLocation({ desiredAccuracy: Accuracy.high, maximumAge: 5000, timeout: 20000 })
    \n

    API

    \n

    Properties

    \n

    Location

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    latitude-The latitude of the geolocation, in degrees.
    longitude-The longitude of the geolocation, in degrees.
    altitude-The altitude (if available), in meters above sea level.
    horizontalAccuracy-The horizontal accuracy, in meters.
    verticalAccuracy-The vertical accuracy, in meters.
    speed-The speed, in meters/second over ground.
    timestamp-The time at which this location was determined.
    \n

    Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    desiredAccuracy?Accuracy.highThis will return the finest location available but use more power than any option. Accuracy.any is considered to be about 100 meter accuracy. Using a coarse accuracy such as this often consumes less power.
    updateDistanceNo filterUpdate distance filter in meters. Specifies how often to update the location. Read more in Apple document and/or Google documents
    updateTime1 minuteInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
    minimumUpdateTime5 secsMinimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
    maximumAge-How old locations to receive in ms.
    timeout5 minutesHow long to wait for a location in ms.
    iosAllowsBackgroundLocationUpdatesfalseIf enabled, UIBackgroundModes key in info.plist is required (check the hint below). Allow the application to receive location updates in background (ignored on Android). Read more in Apple document
    iosPausesLocationUpdatesAutomaticallytrueAllow deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
    iosOpenSettingsIfLocationHasBeenDeniedfalseArgument on the enableLocationRequest. If true, the settings app will open on iOS so the user can change the location services permission.
    \n
    \n

    If iosAllowsBackgroundLocationUpdates is set to true, the following code is required in the info.plist file:

    \n
    <key>UIBackgroundModes</key>
    <array>
       <string>location</string>
    </array>
    \n
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    getCurrentLocation(options: Options)PromiseGet current location applying the specified options (if any). Since version 5.0 of the plugin, it will use requestLocation API for devices using iOS 9.0+. In situation of poor or no GPS signal, but available Wi-Fi it will take 10 sec to return location.
    watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options: Options)numberMonitor for location change.
    clearWatch(watchId: number)voidStop monitoring for location change. Parameter expected is the watchId returned from watchLocation.
    enableLocationRequest(always?: boolean)Promise<void>Ask for permissions to use location services. The option always is applicable only for iOS. For a custom prompt message on IOS, the following keys are required. NSLocationAlwaysUsageDescription, NSLocationUsageDescription and NSLocationWhenInUseUsageDescription Read more about its usage .
    isEnabledPromise<boolean>Resolves true or false based on the location services availability.
    distance(loc1: Location, loc2: Location)numberCalculate the distance between two locations. Returns the distance in meters.
    \n

    Known Issues

    \n

    Version Conflicts – Google Play Services

    \n

    If you have installed multiple plugins that use the Google Play Services you might run into version conflicts. For example, you may encounter the error below when using the nativescript-google-maps-sdk plugin:

    \n
    Cannot enable the location service. Error: java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzbck;
    \n

    In order to fix this you might pin the version number in your app/App_Resources/Android/before-plugins.gradle file (if the file does not exist, just create it):

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"16.+\"
      }
    }
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":8,"lastWeek":94,"lastMonth":364}},"nativescript-socketio":{"name":"nativescript-socketio","version":"3.3.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    nativescript-socketio

    \n

    Usage

    \n
    npm install nativescript-socketio
    \n

    or

    \n
    tns plugin add nativescript-socketio
    \n

    NativeScript Core

    \n

    Set connection string and options then connect

    \n
    var SocketIO = require('nativescript-socketio').SocketIO; 
    var socketIO = new SocketIO(url, opts);
    \n

    Alternatively:

    \n
    import { SocketIO } from 'nativescript-socketio';
    var socketIO = new SocketIO(url, opts);
    \n

    Connect to server

    \n
    socketIO.connect()
    \n

    Send data to the server

    \n
    socketIO.emit(event,data)
    \n

    Listen for data

    \n
    socketIO.on(event,callback)
    \n

    Set instance

    \n
    new SocketIO(null,null,oldInstance)
    \n

    Angular

    \n
    // app.module.ts
    import { SocketIOModule } from \"nativescript-socketio/angular\";

    @NgModule({
      imports: [
        SocketIOModule.forRoot(server),
      ]
    })
    \n
    // app.component.ts
    import { Component, OnInit, OnDestroy } from \"@angular/core\";
    import { SocketIO } from \"nativescript-socketio\";

    @Component({
      // ...
    })
    export class AppComponent implements OnInit, OnDestroy {
      constructor(private socketIO: SocketIO) { }

      ngOnInit() {
        this.socketIO.connect();
      }

      ngOnDestroy() {
        this.socketIO.disconnect();
      }
    }
    \n
    // test.component.ts
    import { Component, OnInit, NgZone } from \"@angular/core\";
    import { SocketIO } from \"nativescript-socketio\";

    @Component({
      // ...
    })
    export class TestComponent implements OnInit {
      constructor(
        private socketIO: SocketIO,
        private ngZone: NgZone
      ) { }

      ngOnInit() {
        this.socketIO.on(\"test\", data => {
          this.ngZone.run(() => {
            // Do stuff here
          });
        });
      }

      test() {
        this.socketIO.emit(\"test\", { test: \"test\" });
      }
    }
    \n

    Running Demo

    \n

    Start socketio server

    \n
    cd demo/demo-server
    npm install
    node app
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    constructor(url)voidCreates a SocketIO instance with a url
    constructor(url, options:{})voidCreates a SocketIO instance with url and options
    constructor(null,null,nativeSocket)voidCreates a SocketIO instance from a native socket instance
    connect()voidConnect to the server.
    disconnect()voidDisconnects the socket.
    connected()booleanChecks if the socket is connected
    on(event: string,(data: Object , ack? : Function))FunctionAdds a handler for a client event. Return a function to remove the handler.
    once(event: string,(data: Object , ack? : Function))FunctionAdds a single-use handler for a client event. Return a function to remove the handler.
    off(event: string)voidRemoves handler(s) based on an event name.
    emit(event: string,data: {},ack?: Function)voidSend an event to the server, with optional data items.
    joinNamespace(name: string)SocketIOReturn SocketIO instance with the namespace
    leaveNamespace()voidCall when you wish to leave a namespace and disconnect this socket.
    \n

    Example Image

    \n

    \"socketio\"

    \n","downloadStats":{"lastDay":10,"lastWeek":104,"lastMonth":457}},"@oliverphaser/nativescript-printer":{"name":"@oliverphaser/nativescript-printer","version":"1.0.1","license":"MIT","readme":"

    \"npm\"\n\"apple\"\n\"android\"\n
    \n\"support\"

    \n
    \n

    Think about the environment before printing!

    \n
    \n

    NativeScript Printer plugin

    \n

    A NativeScript module for sending an image, PDF or the screen contents to a physical printer.

    \n

    NativeScript 8

    \n

    This will work only on NativeScript 8.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    ns plugin add @oliverphaser/nativescript-printer
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo! Otherwise, continue reading.

    \n

    Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

    \n

    Android screenshots

    \n

        

    \n

    iOS screenshots

    \n

        

    \n

    API

    \n

    isSupported

    \n

    Not all devices support printing, so it makes sense to check the device capabilties beforehand.

    \n
    TypeScript
    \n
    // require the plugin
    import { Printer } from \"@oliverphaser/nativescript-printer\";

    // instantiate the plugin
    let printer = new Printer();

    printer.isSupported().then((supported) => {
      alert(supported ? \"Yep!\" : \"Nope :'(\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printImage

    \n
    TypeScript
    \n
    // let's load an image that we can print. In this case from a local folder.
    let fs = require(\"file-system\");
    let appPath = fs.knownFolders.currentApp().path;
    let imgPath = appPath + \"/res/printer.png\";
    let imgSrc = new ImageSource();
    imgSrc.loadFromFile(imgPath);

    printer.printImage({
      imageSrc: imgSrc
    }).then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printPDF

    \n
    TypeScript
    \n
    import { knownFolders } from \"@nativescript/core\";

    printer.printPDF({
      pdfPath: knownFolders.currentApp().path + \"/pdf-test.pdf\"
    }).then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printScreen

    \n

    Prints the current screen contents. Anything off screen will not be printed.

    \n
    TypeScript
    \n
    printer.printScreen().then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    You can also print a specific portion of the screen, which also enables you to print\nviews that are larger than the viewport. This is an example of a non-Angular NativeScript app:

    \n

    Note\nIf the view is either of the following depending on the size of it's contents it would break into multiple pages.

    \n

    Label | TextView | HtmlView | WebView

    \n
      <StackLayout id=\"printMe\">
        <Label text=\"Print me :)\" />
      </StackLayout>

      <Button text=\"Print\" tap=\"{{ print }}\" />
    \n
      public print(args) {
        printer.printScreen({
          view: args.object.page.getViewById(\"printMe\")
        });
      }
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":34}},"nativescript-google-maps-sdk":{"name":"nativescript-google-maps-sdk","version":"3.0.2","license":"MIT","readme":"

    NativeScript plugin for the Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling:

    \n

    Nativescript 7+

    \n
    tns plugin add nativescript-google-maps-sdk
    \n

    Nativescript < 7

    \n
    tns plugin add nativescript-google-maps-sdk@2.9.1
    \n

    Setup

    \n

    See demo code included here

    \n

    See a live demo here

    \n

    Configure API Key for Android

    \n

    Nativescript < 4

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
    \n

    Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    Nativescript 4+

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) { 
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
        <GridLayout>
            <maps:mapView
                latitude=\"{{ latitude }}\"
                longitude=\"{{ longitude }}\"
                zoom=\"{{ zoom }}\"
                bearing=\"{{ bearing }}\" 
                tilt=\"{{ tilt }}\"
                mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
                padding=\"{{ padding }}\"
                mapReady=\"onMapReady\"  
                markerSelect=\"onMarkerSelect\"
                markerBeginDragging=\"onMarkerBeginDragging\"
                markerEndDragging=\"onMarkerEndDragging\"
                markerDrag=\"onMarkerDrag\"
                cameraChanged=\"onCameraChanged\" 
                cameraMove=\"onCameraMove\"
            />
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

    \n

    Basic Example

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-google-maps-sdk\");

    function onMapReady(args) {
        var mapView = args.object;
        
        console.log(\"Setting a marker...\");
        var marker = new mapsModule.Marker();
        marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.userData = { index : 1};
        mapView.addMarker(marker);
        
        // Disabling zoom gestures
        mapView.settings.zoomGesturesEnabled = false;
    }

    function onMarkerSelect(args) {
        console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    function onCameraMove(args) {
        console.log(\"Camera moving: \"+JSON.stringify(args.camera));
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    exports.onCameraMove = onCameraMove;
    \n

    Custom Info Windows (Beta)

    \n
    \n

    [!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

    \n
    \n
    var mapView = null;

    export function onMapReady(args) {
        mapView = args.object;
        mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
            <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
            <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
            <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
            <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
        </StackLayout>`    ;
    }
    \n

    To use custom marker info windows, define a template in your view like so:

    \n
    <!-- /app/main-page.xml -->
    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
      <GridLayout>
           <maps:mapView mapReady=\"onMapReady\">
                <!-- Default Info Window Template -->       \t\t
                <maps:mapView.infoWindowTemplate>
                    <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                    </StackLayout>
                </maps:mapView.infoWindowTemplate>
                <!-- Keyed Info Window Templates -->   
                <maps:mapView.infoWindowTemplates>
                    <template key=\"testWindow\">
                        <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                            <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                            <Label text=\"Let's Begin!\" className=\"title\" />
                        </StackLayout>
                    </template>
                </maps:mapView.infoWindowTemplates>
            </maps:mapView>
      </GridLayout>
    </Page>
    \n

    ...and set the infoWindowTemplate property like so:

    \n
    var marker = new mapsModule.Marker();
    marker.infoWindowTemplate = 'testWindow';
    \n

    This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

    \n

    ** Known issue: remote images fail to display in iOS info windows (local images work fine)

    \n

    Usage with Angular

    \n

    See Angular demo code included here

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register MapView plugin in order to use in Angular templates
    registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <MapView (mapReady)=\"onMapReady($event)\"></MapView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"MapView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Angular 8 Support

    \n

    If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

    \n
    @ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":3,"lastWeek":109,"lastMonth":370}},"nativescript-fonticon":{"name":"nativescript-fonticon","version":"8.0.2","license":"Apache-2.0","readme":"

    A simpler way to use font icons with NativeScript

    \n

    Usage

    \n
    npm install nativescript-fonticon --save
    \n

    NOTE: If you were using v7 or lower, you were using TNS prefix naming whereas v8+ drops the prefix since no longer needed. Also nativescript-fonticon is now combined here to be accessibly like other packages via nativescript-fonticon/angular - See usage examples below.

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n
      \n
    • css
      • \n
    \n
    .fa {
      font-family: FontAwesome;
    }
    \n
      \n
    • view
      • \n
    \n
    <Label class=\"fa\" text=\"\\uf293\"></Label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname.

    \n

    Including font icons in your app

    \n

    FontAwesome will be used in the following examples but you can use any custom font icon collection.

    \n
      \n
    • Place font icon .ttf file in app/fonts, for example:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n
      \n
    • Create base class in app.css global file, for example:
      • \n
    \n
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
    }
    \n

    NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.

    \n
      \n
    • Copy css to app somewhere, for example:
      • \n
    \n
    app/assets/font-awesome.css
    \n

    Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

    \n
      \n
    • Import the FontIconModule passing a configuration with the location to the .css file to forRoot:
      • \n
    \n

    Use the classname prefix as the key and the css filename as the value relative to directory where your app.module.ts is, then require the css file.

    \n

    Vanilla

    \n

    Configure your fonts and setup the converter if using vanilla NativeScript:

    \n
    import { Application } from 'application';
    import { FontIconFactory, fonticon } from 'nativescript-fonticon';

    // Optional. Will output the css mapping to console.
    FontIconFactory.debug = true;

    // Configure paths to font icon css
    FontIconFactory.paths = {
      'fa': 'font-awesome.css',
      'ion': 'ionicons.css'
    };

    // Load the css
    FontIconFactory.loadCss();

    Application.setResources( { fonticon } );
    Application.run({ moduleName: 'main-page' });
    \n

    Use the fonticon pipe in your markup.

    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
    \n

    Angular

    \n

    Setup your module:

    \n
    import { FontIconModule } from 'nativescript-fonticon/angular';

    @NgModule({
    \tdeclarations: [
    \t\tDemoComponent,
    \t],
    \tbootstrap: [
    \t\tDemoComponent,
    \t],
    \timports: [
    \t\tNativeScriptModule,
    \t\tFontIconModule.forRoot({
    \t\t\t'fa': require('~/app/assets/css/fa-5.css'),
    \t\t\t'ion': require('~/app/assets/css/ionicons.css')
    \t\t})
    \t]
    })
    \n

    Use the fonticon pipe in your markup.

    \n
    <Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label>
    \n
      \n
    • Optional Configure the service with DEBUGGING on
      • \n
    \n

    When working with a new font collection, you may need to see the mapping the service provides. Passing true as seen below will cause the mapping to be output in the console to determine if your font collection is being setup correctly.

    \n
    import { FontIconModule, FontIconService } from 'nativescript-fonticon/angular';
    // turn debug on
    FontIconService.debug = true;

    @NgModule({
    \tdeclarations: [
    \t\tDemoComponent,
    \t],
    \tbootstrap: [
    \t\tDemoComponent,
    \t],
    \timports: [
    \t\tNativeScriptModule,
    \t\tFontIconModule.forRoot({
    \t\t\t'fa': require('~/app/assets/css/fa-5.css')
    \t\t})
    \t]
    })
    \n

    Credits

    \n

    Idea came from Bradley Gore's post here.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":67,"lastWeek":937,"lastMonth":3929}},"@gavant/nativescript-exoplayer":{"name":"@gavant/nativescript-exoplayer","version":"4.0.3","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    NativeScript ExoPlayer

    \n

    A NativeScript plugin to provide the ability to play local and remote videos using Google's ExoPlayer.

    \n

    Developed by

    \n

    \"MasterTech\"

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Google ExoPlayeriOS AVPlayer
    For a 100% NativeScript plugin use the NativeScript-VideoPlayer.
    \n

    Based on

    \n

    This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

    \n

    Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

    \n

    The Google ExoPlayer adds about a meg and a half plugin to the Android application.

    \n

    Sample Usage

    \n
                Sample 1             |              Sample 2\n
    \n

    -------------------------------------| -------------------------------------\n\"Sample | \"Sample

    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add nativescript-exoplayer

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:exoplayer=\"nativescript-exoplayer\">
            <StackLayout>
                   
                <exoplayer:Video id=\"nativeexoplayer\"
                controls=\"true\" finished=\"{{ videoFinished }}\"
                loop=\"true\" autoplay=\"false\" height=\"280\" 
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
                
            </StackLayout>
    </Page>
    \n

    Angular Native (NativeScript Angular) Usage

    \n
    // somewhere at top of your component or bootstrap file
    import {registerElement} from \"nativescript-angular/element-registry\";
    registerElement(\"exoplayer\", () => require(\"nativescript-exoplayer\").Video);
    // documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
    \n

    With AngularNative you have to explicitly close all components so the correct template code is below.

    \n
      <exoplayer
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\" 
          height=\"300\"></exoplayer>
    \n

    Properties

    \n
      \n
    • src - required
      • \n
    \n

    Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n
      \n
    • enableSubtitles
      • \n
    \n

    By default, subtitle support is off. Use this flag to turn them on.

    \n
      \n
    • subtitles
      • \n
    \n

    Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

    \n
      \n
    • autoplay - (boolean) - optional
      • \n
    \n

    Set if the video should start playing as soon as possible or to wait for user interaction.

    \n
      \n
    • finished - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n
      \n
    • controls - (boolean) - optional
      • \n
    \n

    Set to use the native video player's media playback controls.

    \n
      \n
    • muted - (boolean) - optional
      • \n
    \n

    Mutes the native video player.

    \n
      \n
    • loop - (boolean) - optional
      • \n
    \n

    Sets the native video player to loop once playback has finished.

    \n
      \n
    • fill - (VideoFill) - optional
      • \n
    \n

    Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

    \n

    iOS:

    \n
      \n
    • VideoFill.default = AVLayerVideoGravityResize
      • \n
    • VideoFill.aspect = AVLayerVideoGravityResizeAspect
      • \n
    • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill
      • \n
    \n

    See here for explanation.

    \n
      \n
    • playbackReady - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video is ready to play.

    \n
      \n
    • seekToTimeComplete - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video has finished seekToTime.

    \n
      \n
    • observeCurrentTime - (boolean) - optional
      • \n
    \n

    If set to true, currentTimeUpdated callback is possible.

    \n
      \n
    • currentTimeUpdated - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the time is updated.

    \n

    API

    \n
      \n
    • play() - Start playing the video
      • \n
    • pause() - Pause the video
      • \n
    • seekToTime(time: number) - Seek the video to a time (milliseconds)
      • \n
    • getCurrentTime() - Returns the current time in the video duration (milliseconds)
      • \n
    • getDuration() - Returns the duration of the video (milliseconds)
      • \n
    • destroy() - Destroy the video player and free resources
      • \n
    • mute(boolean) - Mute the current video
      • \n
    • setVolume() - Set the volume - Must be between 0 and 1.
      • \n
    \n

    Android only

    \n
      \n
    • stop() - Stop the playback - this resets the player and remove the video src
      • \n
    \n

    Breaking Changes

    \n
      \n
    • Android will now attach/detach to the application suspend/resume and de-register/re-register video
      • \n
    • Subtile support will by default be disabled.
      • \n
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":40}},"nativescript-barcodescanner":{"name":"nativescript-barcodescanner","version":"4.1.2","license":"MIT","readme":"

    NativeScript BarcodeScanner

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    💡 Plugin version 4.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 3.4.2.

    \n
    \n
    \n

    ⚠️ With 4.1.0+ you can use beepOnScan on iOS again (it used to crash in older 4.x versions).

    \n
    \n

    Want a quick demo?

    \n
    \n

    Note that running this only makes sense on a real device.

    \n
    \n
    git clone https://github.com/EddyVerbruggen/nativescript-barcodescanner barcodedemo
    cd barcodedemo/src
    \n

    Fullscreen, programmatically (iOS and Android)

    \n
    npm run demo.android (or demo.ios / demo.ios.device)
    \n

    Embedded (iOS only)

    \n
    npm run demo.ios
    \n

    Supported barcode types

    \n

    iOS and Android

    \n
      \n
    • CODE_39
      • \n
    • CODE_93
      • \n
    • CODE_128
      • \n
    • DATA_MATRIX
      • \n
    • EAN_8
      • \n
    • EAN_13
      • \n
    • ITF (also known as ITF14)
      • \n
    • PDF_417 (on Android only when passed in explicity via formats)
      • \n
    • QR_CODE
      • \n
    • UPC_A
      • \n
    • UPC_E
      • \n
    \n

    Android only

    \n
      \n
    • CODABAR
      • \n
    • MAXICODE
      • \n
    • RSS_14
      • \n
    \n

    iOS only

    \n
      \n
    • AZTEC
      • \n
    • CODE_39_MOD_43
      • \n
    • INTERLEAVED_2_OF_5
      • \n
    \n

    A note about UPC_A and EAN_13

    \n

    When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-barcodescanner
    \n

    Embedding the scanner (iOS)

    \n
    \n

    If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

    \n
    \n\n

    As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

    \n
    \n

    💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

    \n
    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"nativescript-barcodescanner\">
    \n

    Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

    \n
    <iOS>
        <Barcode:BarcodeScannerView
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          pause=\"{{ pause }}\"
          scanResult=\"{{ onScanResult }}\" />
    </iOS>
    \n

    Embedding in Angular

    \n

    Component / Module:

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"BarcodeScanner\", () => require(\"nativescript-barcodescanner\").BarcodeScannerView);
    \n

    View:

    \n
    <BarcodeScanner
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          [pause]=\"pause\"
          (scanResult)=\"onScanResult($event)\">
    </BarcodeScanner>
    \n

    Embedding in Vue

    \n

    main.ts:

    \n
    Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)
    \n

    View:

    \n
    <BarcodeScanner
        row=\"1\"
        height=\"300\"
        formats=\"QR_CODE, EAN_13, UPC_A\"
        beepOnScan=\"true\"
        reportDuplicates=\"true\"
        preferFrontCamera=\"false\"
        :pause=\"pause\"
        @scanResult=\"onScanResult\"
        v-if=\"isIOS\">
    </BarcodeScanner>
    \n

    See 'demo-vue' for details.

    \n

    iOS runtime permission reason

    \n

    You've probably seen a permission popup like this before (this plugin will trigger one as well, automatically):

    \n\n

    iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

    \n

    You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSCameraUsageDescription</key>
      <string>My reason justifying fooling around with your camera</string>
    \n

    To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

    \n

    Usage

    \n

    Tip: during a scan you can use the volume up/down buttons to toggle the torch.

    \n

    function: scan (single mode)

    \n

    TypeScript

    \n
      import { BarcodeScanner } from \"nativescript-barcodescanner\";
      let barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE, EAN_13\",
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
        openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
        presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
      }).then((result) => {
          // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
          alert({
            title: \"Scan result\",
            message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
            okButtonText: \"OK\"
          });
        }, (errorMessage) => {
          console.log(\"No scan. \" + errorMessage);
        }
      );
    \n
    \n

    Note that result.format above is one of these.

    \n
    \n

    JavaScript

    \n
      var BarcodeScanner = require(\"nativescript-barcodescanner\").BarcodeScanner;
      var barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
        openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
      }).then(
          function(result) {
            console.log(\"Scan format: \" + result.format);
            console.log(\"Scan text:   \" + result.text);
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: scan (bulk / continuous mode)

    \n

    In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

    \n

    The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

    \n

    Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

    \n

    JavaScript

    \n
      var count = 0;
      barcodescanner.scan({
        formats: \"QR_CODE\",
        // this callback will be invoked for every unique scan in realtime!
        continuousScanCallback: function (result) {
          count++;
          console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
          if (count === 3) {
            barcodescanner.stop();
          }
        },
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
        reportDuplicates: false // which is the default
      }).then(
          function() {
            console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: available

    \n

    Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

    \n

    JavaScript

    \n
      var barcodescanner = require(\"nativescript-barcodescanner\");

      barcodescanner.available().then(
          function(avail) {
            console.log(\"Available? \" + avail);
          }
      );
    \n

    function: hasCameraPermission / requestCameraPermission

    \n

    On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

    \n

    On iOS 10+ there's something similar going on.

    \n

    Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

    \n

    JavaScript

    \n
      barcodescanner.hasCameraPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestCameraPermission' now
            console.log(\"Has Camera Permission? \" + result);
          }
      );

      // if no permission was granted previously this wil open a user consent screen
      barcodescanner.requestCameraPermission().then(
          function() {
            console.log(\"Camera permission requested\");
          }
      );
    \n

    Usage with nativescript-angular

    \n

    You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

    \n

    So instead of:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from 'nativescript-barcodescanner';

    @Component({ ... })
      export class MyComponent {
        constructor(private barcodeScanner: BarcodeScanner) {
      }

      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        this.barcodeScanner.scan({ ... });
      }
    }
    \n

    Simply do:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from 'nativescript-barcodescanner';

    @Component({ ... })
      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        new BarcodeScanner().scan({ ... });
      }
    }
    \n

    Webpack usage

    \n

    If you run into an error when Webpacking, open app.module.ts and add this:

    \n
    import { BarcodeScanner } from \"nativescript-barcodescanner\";

    export function createBarcodeScanner() {
      return new BarcodeScanner();
    }

    providers: [
      { provide: BarcodeScanner, useFactory: (createBarcodeScanner) }
    ]
    \n

    Troubleshooting

    \n

    If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

    \n
      \n
    1. Delete the app from your device
      2. \n
    2. Remove the folder platforms/android. This triggers a complete rebuild
      3. \n
    3. run tns run android
      4. \n
    \n

    Dependencies / Related Projects

    \n

    This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

    \n

    iOS

    \n

    Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

    \n

    Android

    \n

    ZXing: https://github.com/zxing/zxing/releases

    \n

    As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/EddyVerbruggen/barcodescanner-lib-aar/

    \n","downloadStats":{"lastDay":32,"lastWeek":268,"lastMonth":719}},"@nativescript-community/ui-barcodeview":{"name":"@nativescript-community/ui-barcodeview","version":"3.6.1","license":"MIT","readme":"

    NativeScript BarcodeView

    \n

    Supported barcode types

    \n

    iOS and Android

    \n
      \n
    • CODE_39
      • \n
    • CODE_93
      • \n
    • CODE_128
      • \n
    • DATA_MATRIX
      • \n
    • EAN_8
      • \n
    • EAN_13
      • \n
    • ITF (also known as ITF14)
      • \n
    • PDF_417 (on Android only when passed in explicity via formats)
      • \n
    • QR_CODE
      • \n
    • UPC_A
      • \n
    • UPC_E
      • \n
    \n

    Android only

    \n
      \n
    • CODABAR
      • \n
    • MAXICODE
      • \n
    • RSS_14
      • \n
    \n

    iOS only

    \n
      \n
    • AZTEC
      • \n
    • CODE_39_MOD_43
      • \n
    • INTERLEAVED_2_OF_5
      • \n
    \n

    A note about UPC_A and EAN_13

    \n

    When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/ui-barcodeview
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Usage

    \n

    The nativescript BarcodeView is base on nativescript-barcodescanner from [Eddy Verbruggen]\n(https://github.com/EddyVerbruggen)

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-barcodeview" on the Page element

    \n

    XML

    \n
    <Page xmlns:bc=\"@nativescript-community/ui-barcodeview\">
        <StackLayout horizontalAlignment=\"center\">
            <bc:BarcodeView width=\"100\" height=\"100\" scanResult=\"onScanResult\"/>
       </StackLayout>
    </Page>
    \n

    NativeScript + Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { BarcodeView } from '@nativescript-community/ui-barcodeview';
    registerElement('BarcodeView', () => BarcodeView);
    \n
    <BarcodeView width=\"100\" height=\"100\" (scanResult)=\"onScanResult($event)\"></CanvasView>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    (<any>Vue).registerElement('BarcodeView', () => require('@nativescript-community/ui-barcodeview').BarcodeView);
    \n
    <BarcodeView  width=\"100\" height=\"100\"  @scanResult=\"onScanResult\"/>
    \n

    Whatever the UI framework you will receive the event in :

    \n
    function onScanResult(text:string, barcodeFormat:string) {

    }
    \n

    Properties

    \n
      \n
    • \n

      formats
      \ncoma separated list of format to decode

      \n
      • \n
    • \n

      preferFrontCamera
      \nwhether to prefer front camera

      \n
      • \n
    • \n

      beepOnScan
      \nshould i beep?

      \n
      • \n
    • \n

      reportDuplicates
      \nshould i keep on reporting?

      \n
      • \n
    • \n

      pause
      \npause camera

      \n
      • \n
    • \n

      torchOn
      \nyou guess right?

      \n
      • \n
    \n

    Methods

    \n
      \n
    • pauseScanning
      • \n
    • resumeScanning
      • \n
    \n

    Android

    \n

    ZXing: https://github.com/zxing/zxing/releases\nZXing Android Embedded: https://github.com/journeyapps/zxing-android-embedded

    \n

    With latest ZXing versions android minSdkVersion is bumped to 24. You can still lower it https://github.com/journeyapps/zxing-android-embedded#option-2-desugaring-advanced

    \n","downloadStats":{"lastDay":6,"lastWeek":35,"lastMonth":335}},"nativescript-appversion":{"name":"nativescript-appversion","version":"1.4.4","license":"MIT","readme":"

    NativeScript AppVersion

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Read the current Package ID and Version (name and code) of your NativeScript app.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-appversion
    \n

    Usage

    \n

    To use this plugin you must first require / import it:

    \n

    JavaScript

    \n
    var appversion = require(\"nativescript-appversion\");
    \n

    TypeScript

    \n
    import * as appversion from \"nativescript-appversion\";
    \n

    getVersionName(Sync)

    \n

    getVersionNameSync is the same as getVersionName, except it doesn't return a Promise.

    \n

    JavaScript

    \n
      appversion.getVersionName().then(function(v) {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionName().then((v: string) => {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    getVersionCode(Sync)

    \n

    JavaScript

    \n
      appversion.getVersionCode().then(function(v) {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionCode().then((v: string) => {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    getAppId(Sync)

    \n

    JavaScript

    \n
      appversion.getAppId().then(function(id) {
          console.log(\"Your app's id is: \" + id);
      });
    \n

    TypeScript

    \n
      appversion.getAppId().then((id: string) => {
          console.log(\"Your app's id is: \" + id);
      });
    \n","downloadStats":{"lastDay":88,"lastWeek":454,"lastMonth":1689}},"@nstudio/nativescript-camera-plus":{"name":"@nstudio/nativescript-camera-plus","version":"4.2.0","license":"Apache-2.0","readme":"\n

    NativeScript Camera Plus

    \n    \n

    A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

    \n

    \n\n \"LiveShopper\n \n

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n
    \n

    Installation

    \n
    npm install @nstudio/nativescript-camera-plus
    \n

    Note :- Android\nPlease add the following to your app.gradle

    \n
    android {
    ...
     compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
    }
    \n

    Sample

    \n

    Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

    \n

    \"Camera

    \n

    Demo

    \n

    The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

    \n

    Android Emulator Note

    \n

    The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefaultDescription
    debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
    confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
    confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
    confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
    saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
    galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
    showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
    showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
    showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
    showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
    enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
    \n

    Static Properties

    \n

    Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
    defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
    \n

    Android Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
    flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
    toggleCameraIconstringName of app_resource drawable for the toggle camera button.
    takePicIconstringName of app_resource drawable for the take picture (capture) button.
    galleryIconstringName of app_resource drawable for the open gallery (image library) button.
    autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
    \n

    iOS Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
    \n

    Cross Platform Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    isCameraAvailable()Returns true if the device has at least one camera.
    toggleFlash()Toggles the flash mode on the active camera.
    toggleCamera()Toggles the active camera on the device.
    chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
    takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
    getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
    record(opts?: IVideoOptions)Starts recording a video.
    stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
    \n

    Android Only Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
    hasCameraPermission()Returns true if the application has been granted access to the device camera.
    requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
    hasStoragePermissions()Returns true if the application has been granted access to the device storage.
    getNumberOfCameras()Returns the number of cameras on the device.
    hasFlash()Returns true if the active camera has a flash mode.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    errorEventExecutes when an error is emitted from CameraPlus
    photoCapturedEventExecutes when a photo is taken.
    toggleCameraEventExecutes when the device camera is toggled.
    imagesSelectedEventExecutes when images are selected from the device library/gallery.
    videoRecordingStartedEventExecutes when video starts recording.
    videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
    videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
    confirmScreenShownEventExecutes when the picture confirm dialog is shown..
    confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
    \n

    Option Interfaces

    \n
    export interface ICameraOptions {
      confirm?: boolean;
      saveToGallery?: boolean;
      keepAspectRatio?: boolean;
      height?: number;
      width?: number;
      autoSquareCrop?: boolean;
      confirmRetakeText?: string;
      confirmSaveText?: string;
    }
    \n
    export interface IChooseOptions {
      width?: number;
      height?: number;
      keepAspectRatio?: boolean;
      showImages?:  boolean;
      showVideos?: boolean;
    }
    \n
    export interface IVideoOptions {
      quality?: CameraVideoQuality;
      confirm?: boolean;
      saveToGallery?: boolean;
      height?: number;
      width?: number;
      disableHEVC?: boolean;
      androidMaxVideoBitRate?: number;
      androidMaxFrameRate?: number;
      androidMaxAudioBitRate?: number;
    }
    \n","downloadStats":{"lastDay":26,"lastWeek":189,"lastMonth":1781}},"@nativescript/android":{"name":"@nativescript/android","version":"8.6.2","readme":"

    Android Runtime for NativeScript

    \n

    \"Build

    \n

    Contains the source code for the NativeScript's Android Runtime. NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Each mobile platform has its own ecosystem and offers completely different development tools and language(s) - Java for Android and Objective C (Swift) for iOS. In order to translate JavaScript code to the corresponding native APIs some kind of proxy mechanism is needed. This is exactly what the "Runtime" parts of NativeScript are responsible for. The Android Runtime may be thought of as "The Bridge" between the JavaScript and Android worlds. A NativeScript application for Android is a standard native package (apk) which besides the JavaScript files embed the runtime as well.

    \n\n\n\n

    Additional docs

    \n

    Several Wiki pages describe some internal topics about the runtime here

    \n

    Main Projects

    \n

    The repo is structured in the following projects (ordered by dependencies):

    \n
      \n
    • android-metadata-generator - generates metadata necessary for the Android Runtime.
      • \n
    • android-binding-generator - enables Java & Android types to be dynamically created at runtime. Needed by the extend routine.
      • \n
    • android-runtime - contains the core logic behind the NativeScript's Android Runtime. This project contains native C++ code and needs the Android NDK to build properly.
      • \n
    • android-runtime-testapp - this is a vanilla Android Application, which contains the tests for the runtime project.
      • \n
    \n

    Helper Projects

    \n\n

    Architecture Diagram

    \n

    The NativeScript Android Runtime architecture can be summarized in the following diagram.

    \n

    \"Android

    \n

    For more details on how it works, read the documentation.

    \n

    Build Prerequisites

    \n

    Following are the minimal prerequisites to build the runtime package.

    \n
      \n
    • Install the latest Android Studio.
      • \n
    • From the SDK Manager (Android Studio -> Tools -> Android -> SDK Manager) install the following components:\n
        \n
      • Android API Level 23, 24, 25, 26, 27
        • \n
      • Android NDK
        • \n
      • Android Support Repository
        • \n
      • Download Build Tools
        • \n
      • CMake
        • \n
      • LLDB
        • \n
      \n
      • \n
    • Clone this repository as well as the submodules: git clone --recurse-submodules git@github.com:NativeScript/android-runtime.git
      • \n
    \n

    Working with the Runtime in Android Studio

    \n
      \n
    • Open the test-app folder in Android Studio. It represents a valid Android project and you are able to build and run a test application working with the Runtime from the source.
      • \n
    \n

    Note: You might need to run the Android Studio from the command line in order to preserve the environment variables. This is in case you get errors like "missing npm" if starting the studio the usual way.

    \n

    How to Build

    \n
      \n
    • \n

      Install dependencies from NPM:

      \n
      cd test-app/build-tools/jsparser
      npm install
      \n
      • \n
    • \n

      Set environment variables:

      \n
        \n
      • JAVA_HOME such that $JAVA_HOME/bin/java points to your Java executable
        • \n
      • ANDROID_HOME pointing to where you have installed the Android SDK
        • \n
      • ANDROID_NDK_HOME pointing to the version of the Android NDK needed for this version of NativeScript
        • \n
      \n
      • \n
    • \n

      Run command

      \n

      Windows:

      \n
      gradlew
      \n

      Mac/Linux:

      \n
      ./gradlew
      \n
      • \n
    • \n

      The build process includes building of the runtime package (both optimized and with unstripped v8 symbol table), as well as all supplementary tools used for the android builds: metadata-generator, binding-generator, metadata-generator, static-binding-generator

      \n
      • \n
    • \n

      The result of the build will be in the dist folder.

      \n

      Note: To cut the build time in half and package only the optimized (stripped) version of the runtime package comment out 'tasks.generateRuntimeAar.execute()' in the build.gradle script.

      \n
      • \n
    \n

    How to Run Tests

    \n
      \n
    • \n

      Go to subfolder test-app after you built the runtime.

      \n
      • \n
    • \n

      Start an emulator or connect a device.

      \n

      Note: Keep in mind the device or emulator needs to have an sdcard mounted.

      \n
      • \n
    • \n

      Run command

      \n
      • \n
    \n
    gradlew runtests
    \n

    How to Connect the Inspector

    \n
      \n
    • Install dependencies: run command
      • \n
    \n
    cd test-app
    npm install
    \n
      \n
    • Run the test app in Android Studio, or manually in the emulator.
      • \n
    • Run command
      • \n
    \n
    npx ns debug android --start
    \n

    (If you instead have the nativescript NPM module installed globally,\nyou can omit the npm install and the npx prefix.)

    \n
      \n
    • This will print out a URL, such as\ndevtools://devtools/bundled/inspector.html?ws=localhost:40000.\nOpen this URL in Chrome or Chromium.
      • \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Misc

    \n\n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":628,"lastWeek":4101,"lastMonth":18067}},"@nativescript/secure-storage":{"name":"@nativescript/secure-storage","version":"3.0.3","license":"MIT","readme":"

    @nativescript/secure-storage

    \n

    Secure Storage using SAMKeychain on iOS and Hawk on Android.

    \n
    npm install @nativescript/secure-storage
    \n

    API

    \n

    set | setSync

    \n
    // require the plugin
    import { SecureStorage } from \"@nativescript/secure-storage\";

    // instantiate the plugin
    const secureStorage = new SecureStorage();

    // async
    secureStorage.set({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    }).then(success => console.log(\"Successfully set a value? \" + success));

    // sync
    const success = secureStorage.setSync({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    });
    \n

    get | getSync

    \n

    Will return null if not found.

    \n
    // async
    secureStorage.get({
      key: \"foo\"
    }).then(value => console.log(\"Got value: \" + value));

    // sync
    const value = secureStorage.getSync({
      key: \"foo\"
    });
    \n

    remove | removeSync

    \n
    // async
    secureStorage.remove({
      key: \"foo\"
    }).then(success => console.log(\"Successfully removed a value? \" + success));

    // sync
    const success = secureStorage.removeSync({
      key: \"foo\"
    });
    \n

    removeAll | removeAllSync

    \n
    // async
    secureStorage.removeAll().then(success => console.log(\"Successfully removed a value? \" + success));

    // sync
    const success = secureStorage.removeAllSync();
    \n

    clearAllOnFirstRun | clearAllOnFirstRunSync

    \n

    These functions can be used if you want to clear data when your app is reinstalled.

    \n

    This is only really useful on iOS because if you write something (through this plugin) to the Keychain, this data won't be removed when the app is uninstalled.\nSo the next time the same app is installed, it will find the data in the keychain.

    \n

    So if you want to clear 'lingering' data from a previous install, make sure you run one of these\nmethods before using other methods this plugin provides.

    \n
    // async
    secureStorage.clearAllOnFirstRun().then(success => {
        console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
    });

    // sync
    const success = secureStorage.clearAllOnFirstRunSync();
    \n

    isFirstRun | isFirstRunSync

    \n

    As a bonus, you can piggyback the 'first run' mechanism to do anything you want when the plugin detects\nthis is the first run (after an install or install-delete-reinstall).

    \n
    // sync
    if (secureStorage.isFirstRunSync()) {
      // do whatever you want
    }

    // async
    secureStorage.isFirstRun().then(isFirst => {
      // if isFirst is true, do whatever you like
    });
    \n

    iOS Security++

    \n

    By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

    \n
    declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
    const secureStorage = new SecureStorage(kSecAttrAccessibleWhenUnlockedThisDeviceOnly);
    \n

    iOS Simulator

    \n

    Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

    \n

    If you're running into issues similar to issue_10, consider using the default behaviour again.

    \n

    iOS Keychain Access/App Groups

    \n

    You can share secrets between iOS apps/extensions via Keychain access groups, or App Groups, see here for details.

    \n

    To setup:

    \n
      \n
    • \n

      Add a keychain access group entitlement to your app\nby adding an entry in the app/App_Resources/iOS/<someName>.entitlements file.

      \n

      e.g.

      \n
      <key>keychain-access-groups</key>
      <array>
        <string>$(AppIdentifierPrefix)com.my.app.sharedgroup</string>
      </array>
      \n
      • \n
    • \n

      Then in your app specify the accessGroup property when getting/setting values.\ne.g.

      \n
      import { SecureStorage } from \"nativescript-secure-storage\";
      export class MyComponent {
        secureStorage = new SecureStorage();
        // a method that can be called from your view
        setSecureValue() {
          this.secureStorage.set({
            accessGroup:\"<TeamID>.com.my.app.sharedgroup\",
            key: 'myKey',
            value: 'my value'
          }).then(success => { console.log(success)});
        }
      }
      \n
      • \n
    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":211,"lastWeek":857,"lastMonth":2608}},"perfectedtech-loopback-sdk-builder":{"name":"perfectedtech-loopback-sdk-builder","version":"3.0.4","license":"MIT","readme":"

    \"npm \"Build \"dependencies\" \"Known

    \n

    \"LoopBack

    \n

    LoopBack SDK Builder

    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Features

    \n

    LINK TO FEATURES

    \n

    FireLoop API (NEW)

    \n

    Are you willing to build pure and modern Real-Time applications?? Then CHECK THIS OUT

    \n

    \"FireLoop.io\"

    \n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":27}},"esolution-nativescript-google-maps-sdk":{"name":"esolution-nativescript-google-maps-sdk","version":"3.0.2-alpha-1","license":"MIT","readme":"

    NativeScript plugin for the Google Maps SDK

    \n

    This repository is forked from dapriett/nativescript-google-maps-sdk

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling:

    \n

    Nativescript 7+

    \n
    tns plugin add nativescript-google-maps-sdk
    \n

    Nativescript < 7

    \n
    tns plugin add nativescript-google-maps-sdk@2.9.1
    \n

    Setup

    \n

    See demo code included here

    \n

    See a live demo here

    \n

    Configure API Key for Android

    \n

    Nativescript < 4

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
    \n

    Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    Nativescript 4+

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) { 
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
        <GridLayout>
            <maps:mapView
                latitude=\"{{ latitude }}\"
                longitude=\"{{ longitude }}\"
                zoom=\"{{ zoom }}\"
                bearing=\"{{ bearing }}\" 
                tilt=\"{{ tilt }}\"
                mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
                padding=\"{{ padding }}\"
                mapReady=\"onMapReady\"  
                markerSelect=\"onMarkerSelect\"
                markerBeginDragging=\"onMarkerBeginDragging\"
                markerEndDragging=\"onMarkerEndDragging\"
                markerDrag=\"onMarkerDrag\"
                cameraChanged=\"onCameraChanged\" 
                cameraMove=\"onCameraMove\"
            />
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

    \n

    Basic Example

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-google-maps-sdk\");

    function onMapReady(args) {
        var mapView = args.object;
        
        console.log(\"Setting a marker...\");
        var marker = new mapsModule.Marker();
        marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.userData = { index : 1};
        mapView.addMarker(marker);
        
        // Disabling zoom gestures
        mapView.settings.zoomGesturesEnabled = false;
    }

    function onMarkerSelect(args) {
        console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    function onCameraMove(args) {
        console.log(\"Camera moving: \"+JSON.stringify(args.camera));
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    exports.onCameraMove = onCameraMove;
    \n

    Custom Info Windows (Beta)

    \n
    \n

    [!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

    \n
    \n
    var mapView = null;

    export function onMapReady(args) {
        mapView = args.object;
        mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
            <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
            <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
            <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
            <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
        </StackLayout>`    ;
    }
    \n

    To use custom marker info windows, define a template in your view like so:

    \n
    <!-- /app/main-page.xml -->
    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
      <GridLayout>
           <maps:mapView mapReady=\"onMapReady\">
                <!-- Default Info Window Template -->       \t\t
                <maps:mapView.infoWindowTemplate>
                    <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                    </StackLayout>
                </maps:mapView.infoWindowTemplate>
                <!-- Keyed Info Window Templates -->   
                <maps:mapView.infoWindowTemplates>
                    <template key=\"testWindow\">
                        <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                            <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                            <Label text=\"Let's Begin!\" className=\"title\" />
                        </StackLayout>
                    </template>
                </maps:mapView.infoWindowTemplates>
            </maps:mapView>
      </GridLayout>
    </Page>
    \n

    ...and set the infoWindowTemplate property like so:

    \n
    var marker = new mapsModule.Marker();
    marker.infoWindowTemplate = 'testWindow';
    \n

    This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

    \n

    ** Known issue: remote images fail to display in iOS info windows (local images work fine)

    \n

    Usage with Angular

    \n

    See Angular demo code included here

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register MapView plugin in order to use in Angular templates
    registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <MapView (mapReady)=\"onMapReady($event)\"></MapView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"MapView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Angular 8 Support

    \n

    If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

    \n
    @ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":7}},"nativescript-cloud":{"name":"nativescript-cloud","version":"1.21.2","license":"Apache-2.0","readme":"

    nativescript-cloud

    \n

    Used for cloud support in NativeScript CLI

    \n

    Contents

    \n\n

    Public API

    \n

    This section describes all methods that can be invoked when you have installed the nativescript-cloud extension and NativeScript CLI is required as library. You must load the installed extensions by calling loadExtensions method. After that you will be able to call methods from nativescript-cloud extension:

    \n
    const tns = require(\"nativescript\");
    Promise.all(tns.extensibilityService.loadExtensions())
    \t.then(loadedExtensionsData => {
    \t\t// Write your code here, after all extensions are loaded.
    \t});
    \n
    \n

    NOTE: The extension must be installed before using it. You can do it by calling installExtension method of the CLI:

    \n
    \n
    tns.extensibilityService.installExtension(\"nativescript-cloud@latest\")
    \t.then(extensionData => console.log(`Successfully installed extension ${extensionData.extensionName}.`))
    \t.catch(err => console.log(\"Failed to install extension.\"));
    \n

    Contents

    \n\n

    nsCloudBuildService

    \n

    The nsCloudBuildService allows build of applications in the cloud. You can call the following methods:

    \n

    build method

    \n

    build method validates passed arguments and tries to build the application in the cloud. In case of successful build, the build result (.apk, .aab, .ipa or .zip) is downloaded. The result contains information about the whole build process, path to the downloaded build result and information used to generate a QR code, pointing to the latest build result (in S3).
    \nDefinition:

    \n
    /**
     * Builds the specified application in the cloud and returns information about the whole build process.
     * @param {INSCloudProjectSettings} projectSettings Describes the current project - project dir, application identifier, name and nativescript data, as well as additional options to control the build workflow.
     * @param {string} platform The mobile platform for which the application should be built: Android or iOS.
     * @param {string} buildConfiguration The build configuration - Debug or Release.
     * @param {string} accountId the account which will be charged for the build.
     * @param {IAndroidBuildData} androidBuildData Android specific information for the build.
     * @param {IIOSBuildData} iOSBuildData iOS specific information for the build.
     * @returns {Promise<IBuildResultData>} Information about the build process. It is returned only on successful build. In case the build fails, the Promise is rejected with the server information.
     */
    build(projectSettings: INSCloudProjectSettings,
    \tplatform: string,
    \tbuildConfiguration: string,
    \taccountId: string,
    \tandroidBuildData?: IAndroidBuildData,
    \tiOSBuildData?: IIOSBuildData): Promise<IBuildResultData>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    nsCloudBuildService events

    \n

    nsCloudBuildService raises the following events:

    \n
    buildOutput
    \n

    buildOutput event contains parts of the current build output:

    \n
    interface IBuildLog {
    \tcloudOperationId: string;
    \tdata: string;
    \tpipe: string;
    }
    \n
    stepChanged
    \n

    stepChanged event contains the name of the changed build step and its progress:

    \n
    /**
    * Describes build step.
    */
    interface IBuildStep {
    \t/**
    \t* The ID of the cloud operation.
    \t*/
    \tcloudOperationId: string;

    \t/**
    \t* The name of the step - prepare, upload, build or download.
    \t*/
    \tstep: string;

    \t/**
    \t* The progress of the step in percents. The value will be between 0 and 100.
    \t*/
    \tprogress: number;
    }
    \n
    Events usage
    \n
    const tns = require(\"nativescript\");
    const fs = require(\"fs\");
    const path = require(\"path\");
    const packageJsonContent = JSON.parse(fs.readFileSync(\"./package.json\", \"utf8\").toString());

    const projectSettings = {
    \tprojectDir: process.cwd(),
    \tprojectId: packageJsonContent.nativescript.id,
    \tprojectName: path.dirname(process.cwd()),
    \tnativeScriptData: packageJsonContent.nativescript,
    \tbundle: true,
    \tenv: {
    \t\tuglify: true
    \t}
    };

    const androidReleaseConfigurationData = {
    \tpathToCertificate: \"./myCertificate.p12\",
    \tcertificatePassword: \"123456\"
    };

    const platform = \"android\";
    const buildConfiguration = \"release\";

    tns.nsCloudBuildService.on(\"buildOutput\", (data) => {
    \tconsole.log(data);
    \t/*
    \t\tSample data object:
    \t\t{
    \t\t\t\"cloudOperationId\": \"2fb2e19c-3720-4fd1-9446-1df98f5e3531\",
    \t\t\t\"pipe\": \"stdout\",
    \t\t\t\"data\": \"Add platform ios with runtime version 2.5.*\"
    \t\t}
    \t*/
    });

    tns.nsCloudBuildService.on(\"stepChanged\", (data) => {
    \tconsole.log(data);
    \t/*
    \t\tSample data object:
    \t\t{
    \t\t\t\"cloudOperationId\": \"2fb2e19c-3720-4fd1-9446-1df98f5e3531\",
    \t\t\t\"step\": \"build\";
    \t\t\t\"progress\": 100;
    \t\t}
    \t*/
    });

    const accountId = \"d0ce3ac0-36c2-427f-8d27-955915ffe189\";

    tns.nsCloudBuildService
    \t.build(projectSettings, platform, buildConfiguration, accountId, androidReleaseConfigurationData)
    \t.then(buildResult => console.log(buildResult))
    \t.catch(err => console.error(err));
    \n

    validateBuildProperties

    \n

    validateBuildProperties method validates all properties required for specific platform. This includes a check if current application identifier matches the CodeSigning identity for iOS operations, a check if the specified device identifier (in case it is passed) is included in the mobile provision, validation of the password, etc.\n
    \nDefinition:

    \n
    /**
     * Validates the build properties for specified platform (Android or iOS).
     * The result promise is rejected with the error found. In case everything is correct, the promise is resolved.
     * @param {string} platform The mobile platform for which the application should be built: Android or iOS.
     * @param {string} buildConfiguration The build configuration - Debug or Release.
     * @param {string} projectId Application identifier of the project.
     * @param {IAndroidBuildData} androidBuildData Android speicific information for the build.
     * @param {IIOSBuildData} iOSBuildData iOS speicific information for the build.
     * @returns {Promise<void>}
     */
    validateBuildProperties(platform: string,
    \tbuildConfiguration: string,
    \tprojectId: string,
    \tandroidBuildData?: IAndroidBuildData,
    \tiOSBuildData?: IIOSBuildData): Promise<void>;
    \n

    Detailed description of each parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    const fs = require(\"fs\");
    const path = require(\"path\");
    const packageJsonContent = JSON.parse(fs.readFileSync(\"./package.json\", \"utf8\").toString());

    const projectId = packageJsonContent.nativescript.id;

    const androidReleaseConfigurationData = {
    \tpathToCertificate: \"./myCertificate.p12\",
    \tcertificatePassword: \"123456\"
    };

    const platform = \"android\";
    const buildConfiguration = \"release\";

    tns.nsCloudBuildService
    \t.validateBuildProperties(platform, buildConfiguration, projectId, androidReleaseConfigurationData)
    \t.then(buildResult => console.log(\"Data is valid\"))
    \t.catch(err => console.error(\"Data is invalid:\", err));
    \n

    getBuildOutputDirectory

    \n

    getBuildOutputDirectory - Returns the path to the directory where the build output may be found.

    \n
    \n

    This method is currently available only for backwards compatibility. The module now implements base module for server operations that exposes same functionality with more generic method:\ngetServerOperationOutputDirectory. Detailed description of the parameter can be found here.\n
    \nDefinition:

    \n
    \n
    /**
     * Returns the path to the directory where the build output may be found.
     * @param {ICloudBuildOutputDirectoryOptions} options Options that are used to determine the build output directory.
     * @returns {string} The build output directory.
     */
    getBuildOutputDirectory(options: ICloudBuildOutputDirectoryOptions): string;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    const cloudBuildOutputDirectory = tns.nsCloudBuildService
    \t\t\t.getBuildOutputDirectory({
    \t\t\t\tplatform: \"ios\",
    \t\t\t\tprojectDir: \"/tmp/myProject\"
    \t\t\t\temulator: false
    \t\t\t});
    \n

    nsCloudCodesignService

    \n

    The nsCloudCodesignService allows generation of codesign files (currently only iOS .p12 and .mobileprovision) in the cloud. You can call the following methods:

    \n

    generateCodesignFiles

    \n

    generateCodesignFiles method validates passed arguments and tries to generate codesign files in the cloud. In case of success, the result files (.p12 and/or .mobileprovision) are downloaded. The result contains information about errors, if any, and path to the downloaded codesign files (in S3).
    \nDefinition:

    \n
    /**
     * Generates codesign files in the cloud and returns s3 urls to certificate or/and provision.
     * @param {ICodesignData} codesignData Apple speicific information.
     * @param {string} projectDir The path of the project.
     * @returns {Promise<ICodesignResultData>} Information about the generation process. It is returned only on successfull generation. In case there is some error, the Promise is rejected with the server information.
     */
    generateCodesignFiles(codesignData: ICodesignData, projectDir: string): Promise<ICodesignResultData>;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    const codesignResultData = tns.nsCloudBuildService
    \t\t\t.generateCodesignFiles({
    \t\t\t\tusername:'appleuser@mail.com',
    \t\t\t\tpassword:'password',
    \t\t\t\tplatform: \"ios\",
    \t\t\t\tclean: true,
    \t\t\t\tattachedDevices: [{
    \t\t\t\t\tdisplayName: 'iPhone',
    \t\t\t\t\tidentifier: 'cc3653b16f1beab6cf34a53af84c8a94cb2f0c9f'
    \t\t\t\t}]
    \t\t\t}, '/tmp/projects/myproj');
    \n

    getServerOperationOutputDirectory

    \n

    getServerOperationOutputDirectory method returns the path to the directory where the server request output files may be found, if any. In this implementation - the generated codesign files.
    \nDefinition:

    \n
    /**
     * Returns the path to the directory where the server request output may be found.
     * @param {ICloudServerOutputDirectoryOptions} options Options that are used to determine the build output directory.
     * @returns {string} The build output directory.
     */
    getServerOperationOutputDirectory(options: ICloudServerOutputDirectoryOptions): string;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    const generateCodesignFilesOutputDirectory = tns.nsCloudBuildService
    \t\t\t\t.getServerOperationOutputDirectory({
    \t\t\t\t\tplatform: \"ios\",
    \t\t\t\t\tprojectDir: \"/tmp/myProject\"
    \t\t\t\t\temulator: false
    \t\t\t\t});
    \n

    nsCloudPublishService

    \n

    The nsCloudPublishService allows publishing build packages to an application store (either GooglePlay or iTunesConnect). You can call the following methods:

    \n

    publishToItunesConnect

    \n

    publishToItunesConnect method -will try to publish the provided package to iTunes Connect.
    \nDefinition:

    \n
    /**
     * Publishes the given .ipa packages to iTunes Connect.
     * @param {IItunesConnectPublishData} publishData Data needed to publish to iTunes Connect.
     * @returns {Promise<void>}
     */
    publishToItunesConnect(publishData: IItunesConnectPublishData): Promise<void>;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    tns.nsCloudPublishService
    \t.publishToItunesConnect({
    \t\tcredentials: {
    \t\t\tusername: \"user\",
    \t\t\tpassword: \"pass\"
    \t\t},
    \t\tpackagePaths: [\"/tmp/myReleaseIpa.ipa\"],
    \t\tprojectDir: \"/tmp/myProject\"
    \t})
    \t.then(() => {
    \t\tconsole.log(\"Publishing succeeded\");
    \t})
    \t.catch(err => console.error(err))    ;
    \n

    publishToGooglePlay

    \n

    publishToGooglePlay method will try to publish the provided packages to Google Play.
    \nDefinition:

    \n
    /**
     * Publishes the given .apk packages to Google Play.
     * @param {IGooglePlayPublishData} publishData Data needed to publish to Google Play.
     * @returns {Promise<void>}
     */
    publishToGooglePlay(publishData: IGooglePlayPublishData): Promise<void>;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    tns.nsCloudPublishService
    \t.publishToGooglePlay({
    \t\ttrack: \"alpha\",
    \t\tpathToAuthJson: \"/tmp/myAuthJson.json\",
    \t\tpackagePaths: [\"/tmp/myReleaseApk.apk\"],
    \t\tprojectDir: \"/tmp/myProject\"
    \t})
    \t.then(() => {
    \t\tconsole.log(\"Publishing succeeded\");
    \t})
    \t.catch(err => console.error(err))    ;
    \n

    nsCloudApplicationService

    \n

    The nsCloudApplicationService allows for application management and gathering more information about the app's current state. You can call the following methods:

    \n

    shouldBuild

    \n

    shouldBuild method will determine whether the current application should be built or not.
    \nDefinition:

    \n
    /**
    * Determines whether the application should be built or not.
    * @param {IApplicationBuildConfig} config Settings used to help decide whether the project should be built or not.
    * @returns {Promise<boolean>}
    */
    shouldBuild(config: IApplicationBuildConfig): Promise<boolean>;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    tns.nsCloudApplicationService
    \t.shouldBuild({
    \t\tprojectDir: \"/tmp/myProject\",
    \t\tplatform: \"android\",
    \t\toutputPath: \"/tmp/myProject/.cloud/android\" // for cloud builds
    \t})
    \t.then((shouldBuild) => {
    \t\tconsole.log(\"Should build? \", shouldBuild);
    \t})
    \t.catch(err => console.error(err))    ;
    \n

    shouldInstall

    \n

    shouldInstall method will determine whether the current application's package should be installed on the given device or not.
    \nDefinition:

    \n
    /**
    * Determines whether the application's output package should be installed on the given device or not.
    * @param {IApplicationInstallConfig} config Settings used to help decide whether the project'    s output should be installed or not.
    * @returns {Promise<boolean>}
    */
    shouldInstall(config: IApplicationInstallConfig): Promise<boolean>;
    \n

    Detailed description of the parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");
    tns.nsCloudPublishService
    \t.shouldInstall({
    \t\tprojectDir: \"/tmp/myProject\",
    \t\tdeviceIdentifier: \"192.168.56.101:5555\",
    \t\toutputPath: \"/tmp/myProject/.cloud/ios\" // for cloud builds
    \t})
    \t.then((shouldInstall) => {
    \t\tconsole.log(\"Should install?\", shouldInstall);
    \t})
    \t.catch(err => console.error(err))    ;
    \n

    nsCloudAuthenticationService

    \n

    The nsCloudAuthenticationService is used for authentication related operations (login, logout etc.). You can call the following methods

    \n

    login

    \n

    login mehod starts localhost server on which the login response will be returned. After that if there is options.openAction it will be used to open the login url. If this option is not defined the default opener will be used. After successful login returns the user information.\n
    \nDefinition:

    \n
    /**
     * Opens login page and after successfull login saves the user information.
     * If options.openAction is provided, it will be used to open the login url instead of the default opener.
     * @param {ILoginOptions} options Optional settings for the login method.
     * @returns {Promise<IUser>} Returns the user information after successful login.
     */
    login(options?: ILoginOptions): Promise<IUser>;
    \n

    Detailed description of each parameter can be found here.\n
    \nUsage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAuthenticationService
    \t.login()
    \t.then(userInfo => console.log(userInfo))
    \t.catch(err => console.error(err));
    \n
    const tns = require(\"nativescript\");
    const childProcess = require(\"child_process\");

    const openAction = url => {
    \tconst isWin = /^win/.test(process.platform);
    \tconst openCommand = isWin ? \"start\" : \"open\";
    \tchildProcess.execSync(`${openCommand} ${url}`);
    };
    const loginOptions = { openAction: openAction };

    tns.nsCloudAuthenticationService
    \t.login(loginOptions)
    \t.then(userInfo => console.log(userInfo))
    \t.catch(err => console.error(err));
    \n

    logout

    \n

    logout method invalidates the current user authentication data.\n
    \nDefinition:

    \n
    /**
     * Invalidates the current user authentication data.
     * If options.openAction is provided, it will be used to open the logout url instead of the default opener.
     * @param {IOpenActionOptions} options Optional settings for the logout method.
     * @returns {void}
     */
    logout(options?: IOpenActionOptions): void;
    \n
    \nUsage:\n
    const tns = require(\"nativescript\");

    tns.nsCloudAuthenticationService.logout();
    \n
    const tns = require(\"nativescript\");
    const childProcess = require(\"child_process\");

    const openAction = url => {
    \tconst isWin = /^win/.test(process.platform);
    \tconst openCommand = isWin ? \"start\" : \"open\";
    \tchildProcess.execSync(`${openCommand} ${url}`);
    };
    const logoutOptions = { openAction: openAction };

    tns.nsCloudAuthenticationService.logout(logoutOptions);
    \n

    isUserLoggedIn

    \n

    isUserLoggedIn method checks if the access token of the current user is valid. If it is - the method will return true. If it isn't - the method will try to issue new access token. If the method can't issue new token it will return false.\n

    \n

    Definition:

    \n
    /**
     * CheChecks if there is user info and the access token of the current user is valid. The method will try to issue new access token if the current is not valid.
     * @returns {Promise<boolean>} Returns true if the user is logged in.
     */
    isUserLoggedIn(): Promise<boolean>;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAuthenticationService
    \t.isUserLoggedIn()
    \t.then(isLoggedIn => console.log(isLoggedIn))
    \t.catch(err => console.error(err));
    \n

    refreshCurrentUserToken

    \n

    refreshCurrentUserToken method uses the refresh token of the current user to issue new access token.\n

    \n

    Definition:

    \n
    /**
     * Uses the refresh token of the current user to issue new access token.
     */
    refreshCurrentUserToken(): Promise<void>;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAuthenticationService.refreshCurrentUserToken()
    \t.then(() => console.log(\"Success\"))
    \t.catch(err => console.error(err));
    \n

    cancelLogin

    \n

    cancelLogin method stops the current login process and rejects the login promise with an error.\n

    \n

    Definition:

    \n
    /**
     * Stops the current login process and rejects the login promise with an error.
     * @returns {void}
     */
    cancelLogin(): void;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAuthenticationService
    \t.login()
    \t.then(userInfo => console.log(userInfo))
    \t.catch(err => console.error(err));

    tns.nsCloudAuthenticationService.cancelLogin();
    \n

    Interfaces

    \n
    interface IUser {
    \temail: string;
    \tfirstName: string;
    \tlastName: string;
    }

    interface IAuthenticationService {
    \t/**
    \t * Uses username and password for login and after successfull login saves the user information.
    \t * @param {string} username The username of the user.
    \t * @param {string} password The password of the user.
    \t * @returns {Promise<IUser>} Returns the user information after successful login.
    \t */
    \tdevLogin(username: string, password: string): Promise<IUser>;

    \t/**
    \t * Opens login page and after successfull login saves the user information.
    \t * If options.openAction is provided, it will be used to open the login url instead of the default opener.
    \t * @param {ILoginOptions} options Optional settings for the login method.
    \t * @returns {Promise<IUser>} Returns the user information after successful login.
    \t */
    \tlogin(options?: ILoginOptions): Promise<IUser>;


    \t/**
    \t * Invalidates the current user authentication data.
    \t * If options.openAction is provided, it will be used to open the logout url instead of the default opener.
    \t * @param {IOpenActionOptions} options Optional settings for the logout method.
    \t * @returns {void}
    \t */
    \tlogout(options?: IOpenActionOptions): void;

    \t/**
    \t * Uses the refresh token of the current user to issue new access token.
    \t */
    \trefreshCurrentUserToken(): Promise<void>;

    \t/**
    \t * Checks the token state of the current user.
    \t * @returns {Promise<ITokenState>} Returns the token state
    \t */
    \tgetCurrentUserTokenState(): Promise<ITokenState>;

    \t/**
    \t * Stops the current login process and rejects the login promise with an error.
    \t * @returns {void}
    \t */
    \tcancelLogin(): void;
    }

    interface IOpenActionOptions {
    \t/**
    \t * Action which will receive url and decide how to open it.
    \t */
    \topenAction?: (url: string) => void;
    }

    interface ILoginOptions extends IOpenActionOptions {
    \t/**
    \t * Sets the ammount of time which the login method will wait for login response in non-interactive terminal.
    \t */
    \ttimeout?: string;
    }

    interface ITokenState {
    \t/**
    \t * True if the access token is valid.
    \t */
    \tisTokenValid: boolean;

    \t/**
    \t * The expiration timestamp. (1494.923982727)
    \t */
    \texpirationTimestamp: number;
    }
    \n

    nsCloudUserService

    \n

    The nsCloudUserService is used to get information aboud the current user or modify it. You can call the following methods

    \n

    hasUser

    \n

    hasUser method checks if there is user information.\n
    \nDefinition:

    \n
    /**
     * Checks if there is user information.
     * @returns {boolean} Returns true if there is user information.
     */
    hasUser(): boolean;
    \n
    \nUsage:\n
    const tns = require(\"nativescript\");

    const hasUser = tns.nsCloudUserService.hasUser();
    console.log(hasUser);
    \n

    getUser

    \n

    getUser method returns the current user information.\n
    \nDefinition:

    \n
    /**
     * Returns the current user information.
     * @returns {IUser} The current user information.
     */
    getUser(): IUser;
    \n
    \nUsage:\n
    const tns = require(\"nativescript\");

    const user = tns.nsCloudUserService.getUser();
    console.log(user);
    \n

    Sample result for user will be:

    \n
    {
    \t\"email\": \"some@mail.com\",
    \t\"firstName\": \"First\",
    \t\"lastName\": \"Last\"
    }
    \n

    getUserData

    \n

    getUserData method returns the user information and the authentication data for the current user.\n

    \n

    Definition:

    \n
    /**
     * Returns the user information and the authentication data for the current user.
     * @returns {IUserData} The user information and the authentication data for the current user.
     */
    getUserData(): IUserData;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    const userData = tns.nsCloudUserService.getUserData();
    console.log(userData);
    \n

    Sample result for userData will be:

    \n
    {
    \t\"accessToken\": \"some token\",
    \t\"refreshToken\": \"some refresh token\",
    \t\"userInfo\": {
    \t\t\"email\": \"some@mail.com\",
    \t\t\"firstName\": \"First\",
    \t\t\"lastName\": \"Last\"
    \t}
    }
    \n

    setUserData

    \n

    setUserData method sets the user information and the authentication data for the current user.\n

    \n

    Definition:

    \n
    /**
     * Sets the user information and the authentication data for the current user.
     * @param {IUserdata} userData The user data to set.
     * @returns {void}
     */
    setUserData(userData: IUserData): void;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    const userData = {
    \taccessToken: \"some token\",
    \trefreshToken: \"some refresh token\",
    \tuserInfo: {
    \t\temail: \"some@mail.bg\",
    \t\tfirstName: \"First\",
    \t\tlastName: \"Last\"
    \t}
    };

    tns.nsCloudUserService.setUserData(userData);
    \n

    setToken

    \n

    setToken method sets only the token of the current user.\n

    \n

    Definition:

    \n
    /**
     * Sets only the token of the current user.
     * @param {ITokenData} token The token data.
     * @returns void
     */
    setToken(token: ITokenData): void;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    const token = {
    \taccessToken: \"some token\"
    };

    tns.nsCloudUserService.setToken(token);
    \n

    clearUserData

    \n

    clearUserData method removes the current user data.\n

    \n

    Definition:

    \n
    /**
     * Removes the current user data.
     */
    clearUserData(): void;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudUserService.clearUserData();
    \n

    getUserAvatar

    \n

    getUserAvatar methods returns the URL where the avatar picture can be downloaded from.\n
    \nDefinition:

    \n
    /**
    * Return the URL where the avatar picture can be downloaded from.
    * @returns {Promise<string>} Return the URL where the avatar picture can be downloaded from. It will return null if the user does not have avatar or it is not logged in.
    */
    getUserAvatar(): Promise<string>;
    \n
    \nUsage:\n
    const tns = require(\"nativescript\");

    tns.nsCloudUserService.getUserAvatar()
    \t.then(userAvatar => console.log(userAvatar));
    \n

    Interfaces:

    \n
    interface IUserService {
    \t/**
    \t * Checks if there is user information.
    \t * @returns {boolean} Returns true if there is user information.
    \t */
    \thasUser(): boolean;

    \t/**
    \t * Returns the current user information.
    \t * @returns {IUser} The current user information.
    \t */
    \tgetUser(): IUser;

    \t/**
    \t * Returns the user information and the authentication data for the current user.
    \t * @returns {IUserData} The user information and the authentication data for the current user.
    \t */
    \tgetUserData(): IUserData;

    \t/**
    \t * Sets the user information and the authentication data for the current user.
    \t * @param {IUserdata} userData The user data to set.
    \t * @returns {void}
    \t */
    \tsetUserData(userData: IUserData): void;

    \t/**
    \t * Sets only the token of the current user.
    \t * @param {ITokenData} token The token data.
    \t * @returns void
    \t */
    \tsetToken(token: ITokenData): void;

    \t/**
    \t * Removes the current user data.
    \t */
    \tclearUserData(): void;

    \t/**
    \t * Return the URL where the avatar picture can be downloaded from.
    \t * @returns {Promise<string>} Return the URL where the avatar picture can be downloaded from. It will return null if the user does not have avatar or it is not logged in.
    \t */
    \tgetUserAvatar(): Promise<string>;
    }
    \n

    nsCloudAccountsService

    \n

    The nsCloudAccountsService provides methods for working with accounts. You can call the following methods:

    \n

    getMyAccounts

    \n

    getMyAccounts method returns the accounts which the current user can use. Each user will have personal account and shared accounts. Shared accounts are those accounts in which the user is added as developer.
    \nDefinition:

    \n
    /**
     * Returns all accounts which can be used from the current user.
     * Each user can have personal account and shared accounts.
     * @returns {Promise<IAccount[]>}
     */
    getMyAccounts(): Promise<IAccount[]>
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAccountsService.getMyAccounts()
    \t.then(accounts => console.log(accounts));
    \n

    getUsageInfo

    \n

    getUsageInfo method returns the usage information for the provided account.
    \nDefinition:

    \n
    /**
     * Returns the usage information for the provided account.
     * @param {string} accountId Account id which will be used to get the usage info.
     * @returns {Promise<IUsageInfo[]>}.
     */
    getUsageInfo(accountId: string): Promise<IUsageInfo[]>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAccountsService.getUsageInfo(\"d0ce3ac0-36c2-427f-8d27-955915ffe189\")
    \t.then(usageInfo => console.log(usageInfo));
    \n

    getAccountFeatures

    \n

    getAccountFeatures method returns information about all subscription features of the provided account.
    \nDefinition:

    \n
    /**
     * Returns information about all subscription features of the provided account.
     * @param accountIdOption Account id which will be parsed and used to find account.
     */
    getAccountFeatures(accountIdOption: string): Promise<IDictionary<IFeatureInfo>>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudAccountsService.getAccountFeatures(\"d0ce3ac0-36c2-427f-8d27-955915ffe189\")
    \t.then(featuresInfo => console.log(featuresInfo));
    \n

    nsCloudEulaService

    \n

    nsCloudEulaService allows interaction with EULA - check if current EULA should be accepted, accepting it, etc.

    \n

    getEulaData

    \n

    getEulaData method gives information for the current EULA - url where to find it and if the user should accept it. When this method is called, it will download the latest EULA in case it has not been already downloaded in the current process. EULA must be accepted in the following condition:

    \n
      \n
    • In case it has never been accepted.
      • \n
    • In case it has been accepted before, but current EULA is different, i.e. user had not accepted it before.
      • \n
    \n

    In all other cases (current EULA is the same as the one user had accepted before, new EULA cannot be downloaded, but user had accepted EULA in the past), the method will return that EULA should not be accepted.

    \n

    Definition:

    \n
    /**
     * Gives information about the EULA. This method downloads the EULA to a local file (once for process).
     * @returns {Promise<IEulaData>} Information about the EULA - url and should the user accept it.
     */
    getEulaData(): Promise<IEulaData>;
    \n

    The returned result is of the following type:

    \n
    /**
     * Contains information about EULA.
     */
    interface IEulaData {
    \t/**
    \t * URL where the EULA can be found.
    \t */
    \turl: string;

    \t/**
    \t * Defines if EULA should be accepted by user.
    \t */
    \tshouldAcceptEula: boolean;
    }
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudEulaService.getEulaData()
    \t.then(eulaData => console.log(`EULA url is: ${eulaData.url}. This EULA should ${eulaData.shouldAcceptEula ? \"\" : \"not\" } be accepted.`));
    \n

    getEulaDataWitCache

    \n

    getEulaDataWithCache method gives information for the current EULA - url where to find it and if the user should accept it. When this method is called, it will download the latest EULA ONLY in case it has not been downloaded in the latest 24 hours. That's the main difference between this method and getEulaData. EULA must be accepted in the following condition:

    \n
      \n
    • In case it has never been accepted.
      • \n
    • In case it has been accepted before, but current EULA is different, i.e. user had not accepted it before.
      • \n
    \n

    In all other cases (current EULA is the same as the one user had accepted before, new EULA cannot be downloaded, but user had accepted EULA in the past), the method will return that EULA should not be accepted.

    \n

    Definition:

    \n
    /**
     * Gives information about the EULA. This method downloads the EULA to a local file (once for process)
     * only in case the local copy has not been modified for more than 24 hours.
     * @returns {Promise<IEulaData>} Information about the EULA - url and should the user accept it.
     */
    getEulaDataWithCache(): Promise<IEulaData>;
    \n

    The returned result has the same type as the one returned by getEulaData.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudEulaService.getEulaDataWithCache()
    \t.then(eulaData => console.log(`EULA url is: ${eulaData.url}. This EULA should ${eulaData.shouldAcceptEula ? \"\" : \"not\" } be accepted.`));
    \n

    acceptEula

    \n

    acceptEula method downloads the latest EULA (in case it has not been downloaded in the current process), calculates its shasum and saves it in the user setings file. In case any of the operations fails, the acceptEula Promise will be rejected with the error.\n
    \nDefinition:

    \n
    /**
     * Accepts the EULA. The method first downloads the latest EULA (in case it has not been already downloaded in current process) and saves its shasum to user settings file.
     * @returns {Promise<void>}
     */
    acceptEula(): Promise<void>;
    \n
    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudEulaService.acceptEula()
    \t.then(() => console.log(`Successfully accepted EULA.`))
    \t.catch(err => console.error(\"Unable to accept EULA. Error is: \", err));
    \n

    nsCloudProjectService

    \n

    The nsCloudProjectService allows to manage cloud projects. You can call the following methods:

    \n

    cleanupProject method

    \n

    cleanupProject method cleans all cloud build data which is used for optimizations. The method will clean all AWS CodeCommit and build machine artefacts if they exist.
    \nDefinition:

    \n
    /**
     * Cleans all AWS CodeCommit data and build machines artefacts if they exist.
     * @param {ICleanupProjectDataBase} cleanupProjectData Data needed for project cleaning.
     * @returns {Promise<ICleanupProjectResult>} Information about the cleanup. It includes AWS CodeCommit result and the result from the cleanup on each build machine.
     * If the promise is rejected the error will contain cloudOperationId property.
     */
    cleanupProject(cleanupProjectData: ICleanupProjectDataBase): Promise<ICleanupProjectResult>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudProjectService.cleanupProject({ appIdentifier: \"org.nativescript.test\", projectName: \"test\" })
    \t.then((result) => console.log(`Cleanup result: ${result}`))
    \t.catch(err => console.error(\"Unable to clean cloud project. Error is: \", err));
    \n

    nsCloudKinveyService

    \n

    The nsCloudKinveyService allows working with Kinvey mBaaS. You can call the following methods:

    \n

    getApps method

    \n

    getApps method returns information for all applications of the current user.
    \nDefinition:

    \n
    /**
     * Returns information for all applications of the current user.
     * @returns {Promise<IKinveyApplication[]>}
     */
    getApps(): Promise<IKinveyApplication[]>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudKinveyService.getApps()
    \t.then(result => console.log(`Apps: ${result}`))
    \t.catch(err => console.error(\"Unable to get apps. Error is: \", err));
    \n

    createApp method

    \n

    createApp method creates application in the account of the current user.
    \nDefinition:

    \n
    /**
     * Creates application in the account of the current user.
     * @param input Input required to create application.
     * @returns {Promise<IKinveyApplication>}
     */
    createApp(input: ICreateKinveyAppInput): Promise<IKinveyApplication>;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");
    const createAppInput = {
    \tname: \"ns-cloud\"
    };

    tns.nsCloudKinveyService.createApp(createAppInput)
    \t.then(result => console.log(`Created app: ${result}`))
    \t.catch(err => console.error(\"Unable to create app. Error is: \", err));
    \n

    createAuthService method

    \n

    createAuthService method creates identity store. Then it creates authentication service in this identity store. Then it sets the default authentication service in the provided environment. Then it sets the default authentication service in the provided environment to the newly created service. Currently the supported providers are OAuth2, OIDC and SAML-Redirect.
    \nDefinition:

    \n
    /**
     * First this method creates identity store. Then it creates authentication service
     * in this identity store. Then it sets the default authentication service in the provided environment
     * to the newly created service.
     * @param input Input required to create authentication service.
     * @returns {Promise<IKinveyAuthService>}
     */
    createAuthService(input: ICreateKinveyAuthService): Promise<IKinveyAuthService>;
    \n

    Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    // Create OAuth2 aithentication service.
    const createOAuth2Options = {
    \tname: \"my-oauth2-service\",
    \tprovider: {
    \t\ttype: \"OAuth2\",
    \t\tremoteService: \"https://test.com/oauth/token\",
    \t\toptions: {
    \t\t\tgrantEndpoint: \"https://test.com/authorize\",
    \t\t\tclientId: \"<cleint-id>\",
    \t\t\tclientSecret: \"<client-secret>\",
    \t\t\tuserIdEndpoint: \"https://test.com/userinfo\",
    \t\t\tscope: \"<scope (e.g. openid)>\"
    \t\t}
    \t}
    };

    const oauth2Input = {
    \tappId: \"<app-id>\",
    \tenvironmentId: \"<env-id>\",
    \tredirectUri: [\"https://auth.kinvey.com/oauth2/redirect\", \"http://example.com\"],
    \tauthServiceOptions: createOAuth2Options
    };

    tns.nsCloudKinveyService.createAuthService(oauth2Input)
    \t.then(result => console.log(`Created OAuth2 auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to create OAuth2 auth service. Error is: \", err));

    // Create OIDC authentication service.
    const createOIDCOptions = {
    \tname: \"my-oidc-service\",
    \tprovider: {
    \t\ttype: \"OIDC\",
    \t\tremoteService: \"https://test.com/oauth/token\",
    \t\toptions: {
    \t\t\tgrantEndpoint: \"https://test.com/authorize\",
    \t\t\tclientId: \"<client-id>\",
    \t\t\tclientSecret: \"<client-secret>\",
    \t\t\tissuerId: \"https://test.com\",
    \t\t\tscope: \"<scope (e.g. profile)>\"
    \t\t}
    \t}
    };

    const oidcInput = {
    \tappId: \"<app-id>\",
    \tenvironmentId: \"<env-id>\",
    \tredirectUri: [\"http://example.com\"],
    \tauthServiceOptions: createOIDCOptions
    };

    tns.nsCloudKinveyService.createAuthService(oidcInput)
    \t.then(result => console.log(`Created OIDC auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to create OIDC auth service. Error is: \", err));

    // Create SAML-Redirect authentication service.
    const createSAMLRedirectOptions = {
    \tname: \"my-auth-service\",
    \tprovider: {
    \t\ttype: \"SAML-Redirect\",
    \t\tremoteService: \"https://test.com/samlp/<some-id>\",
    \t\toptions: {
    \t\t\tidpCertificate: \"<certificate>\"
    \t\t}
    \t}
    };

    const samlRedirectInput = {
    \tappId: \"<app-id>\",
    \tenvironmentId: \"<env-id>\",
    \tredirectUri: [\"http://example.com\"],
    \tauthServiceOptions: createSAMLRedirectOptions
    };

    tns.nsCloudKinveyService.createAuthService(samlRedirectInput)
    \t.then(result => console.log(`Created SAML-Redirect auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to create SAML-Redirect auth service. Error is: \", err));
    \n

    updateAuthService method

    \n

    updateAuthService method updates the provided authentication service.
    \nDefinition:

    \n
    /**
     * Updates the provided authentication service.
     * @param input The id of the authentication service and full authentication service object.
     * @returns {Promise<IKinveyAuthService>}
     */
    updateAuthService(input: IUpdateKinveyAuthService): Promise<IKinveyAuthService>;
    \n

    Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudKinveyService.getDefaultAuthService({ environmentId: \"<env-id>\" })
    \t.then(authService => {
    \t\tconst id = authService.id;
    \t\t// The update auth service input can't contain the id parameter.
    \t\tdelete authService.id;
    \t\tauthService.name = \"new-name\";

    \t\tconst updateAuthServiceInput = {
    \t\t\tauthServiceId: id,
    \t\t\tauthService
    \t\t};

    \t\treturn tns.nsCloudKinveyService.updateAuthService(updateAuthServiceInput);
    \t})
    \t.then(result => console.log(`Updated auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to update auth service. Error is: \", err));
    \n

    getAuthServices method

    \n

    getAuthServices method returns all authentication services which allow access to the provided environment.
    \nDefinition:

    \n
    /**
     * Returns all authentication services which allow access to the provided environment.
     * The result is grouped by the identity store id.
     * @param input The environment id.
     * @returns {Promise<IDictionary<IKinveyAuthService[]>>}
     */
    getAuthServices(input: IGetKinveyAuthServices): Promise<IDictionary<IKinveyAuthService[]>>;
    \n

    Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudKinveyService.getAuthServices({ environmentId: \"<env-id>\" })
    \t.then(result => console.log(`Auth services: ${result}`))
    \t.catch(err => console.error(\"Unable to get auth services. Error is: \", err));
    \n

    getDefaultAuthService method

    \n

    getDefaultAuthService method returns the default authentication service for the provided environment.
    \nDefinition:

    \n
    /**
     * Returns the default authentication service for the provided environment.
     * @param input The environment id.
     * @returns {Promise<IKinveyAuthService>}
     */
    getDefaultAuthService(input: IGetDefaultKinveyAuthService): Promise<IKinveyAuthService>;
    \n

    Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudKinveyService.getDefaultAuthService({ environmentId: \"<env-id>\" })
    \t.then(result => console.log(`Default auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to get dafault auth service. Error is: \", err));
    \n

    changeDefaultAuthService method

    \n

    changeDefaultAuthService method changes the default authentication service in the provided environment.
    \nDefinition:

    \n
    /**
     * Changes the default authentication service in the provided environment.
     * @param input Input required to change the default authentication service.
     * @returns {Promise<IKinveyAuthService>}
     */
    changeDefaultAuthService(input: IChangeDefaultKinveyAuthService): Promise<IKinveyAuthService>;
    \n

    Description of each parameter can be found here.\nDetailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudKinveyService.getAuthServices({ environmentId: \"<env-id>\" })
    \t.then(authServices => {
    \t\tconst identityStoreId = Object.keys(authServices)[0];
    \t\tconst authServiceId = authServices[identityStoreId][0].id;

    \t\tconst changeDefaultAuthServiceInput = {
    \t\t\tenvironmentId: \"<env-id>\",
    \t\t\tauthServiceId,
    \t\t\tidentityStoreId
    \t\t};

    \t\treturn tns.nsCloudKinveyService.changeDefaultAuthService(changeDefaultAuthServiceInput);
    \t})
    \t.then(result => console.log(`New default auth service: ${result}`))
    \t.catch(err => console.error(\"Unable to change dafault auth service. Error is: \", err));
    \n

    nsCloudConfigManager

    \n

    The nsCloudConfigManager allows to manage cloud configuration. You can call the following methods:

    \n

    reset method

    \n

    reset resets the current cloud configuration to the default one - production.
    \nDefinition:

    \n
    /**
     * Resets config.json to it's default values.
     * @returns {void}
     */
    reset(): void;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudConfigManager.reset();
    \n

    applyConfig method

    \n

    applyConfig applies specific configuration and saves it in config.json.
    \nDefinition:

    \n
    /**
     * Applies specific configuration and saves it in config.json
     * @param {string} configName The name of the configuration to be applied.
     * @param {IConfigOptions} [options] The config options.
     * @param {IServerConfigBase} [globalServerConfig] The global server configuration which will
     * be used when changing the configuration. This parameter will override the default global configuration.
     * @returns {void}
     */
    applyConfig(configName: string, options?: IConfigOptions, globalServerConfig?: IServerConfigBase): void;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudConfigManager.applyConfig(\"test\");
    \n

    getCurrentConfigData method

    \n

    getCurrentConfigData returns the current cloud configuration.
    \nDefinition:

    \n
    /**
     * Returns the current cloud configuration.
     * @returns {IServerConfig}
     */
    getCurrentConfigData(): IServerConfig;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    console.log(tns.nsCloudConfigManager.getCurrentConfigData());
    \n

    getServiceDomainName method

    \n

    getServiceDomainName returns the domain of the provided cloud service.
    \nDefinition:

    \n
    /**
     * Returns the domain of the provided cloud service.
     * @param serviceName The name of the cloud service.
     * @returns {string}
     */
    getServiceDomainName(serviceName: string): string;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    console.log(tns.nsCloudConfigManager.getServiceDomainName(\"accounts-service\"));
    \n

    getCloudServicesDomainNames method

    \n

    getCloudServicesDomainNames returns the domain names of all cloud services.
    \nDefinition:

    \n
    /**
     * Returns the domain names of all cloud services.
     * @returns {string[]} The domain names of all cloud services.
     */
    getCloudServicesDomainNames(): string[];
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    console.log(tns.nsCloudConfigManager.getCloudServicesDomainNames());
    \n

    getServiceValueOrDefault method

    \n

    getServiceValueOrDefault returns the value stored in the configuration of the provided service or the default value stored in the global configuration.
    \nDefinition:

    \n
    /**
     * Returns the value stored in the configuration of the provided service or the default value stored in the
     * global configuration.
     * @param serviceName The name of the cloud service.
     * @param valueName The name of the value.
     * @returns {string} The value specified in the provided service config or the value specified in the global config.
     */
    getServiceValueOrDefault(serviceName: string, valueName: string): string;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    console.log(tns.nsCloudConfigManager.getServiceValueOrDefault(\"accounts-service\", \"serverProto\"));
    \n

    printConfigData method

    \n

    printConfigData prints the current cloud configuration on the stdout of the process.
    \nDefinition:

    \n
    /**
     * Prints the current cloud configuration on the stdout of the process.
     * @returns {void}
     */
    printConfigData(): void;
    \n

    Detailed description of each parameter can be found here.\n

    \n

    Usage:

    \n
    const tns = require(\"nativescript\");

    tns.nsCloudConfigManager.printConfigData();
    \n

    Development

    \n

    The project is written in TypeScript. After cloning it, you can set it up by executing the following commands in your terminal:

    \n
      \n
    • $ npm i --ignore-scripts - NOTE: --ignore-scripts is a must.
      • \n
    • $ npm i -g grunt-cli (only in case you do not have it installed globally)
      • \n
    • $ grunt test (first execution of this command might take a little bit longer, consecutive calls will work much faster)
      • \n
    \n

    After that you can make changes in the code. In order to transpile them, just execute:

    \n
      \n
    • $ grunt
      • \n
    \n

    You can pack a new version of the library by executing:

    \n
      \n
    • $ grunt pack
      • \n
    \n","downloadStats":{"lastDay":7,"lastWeek":154,"lastMonth":505}},"nativescript-ui-core":{"name":"nativescript-ui-core","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI Core

    \n

    Contains common native source code (Java and Objective C) used by various NativeScript plugins like nativescript-ui-chart, nativescript-ui-listview, etc. It is not intended to be used as a standalone plugin but rather as a dependency for other plugins.

    \n","downloadStats":{"lastDay":582,"lastWeek":3496,"lastMonth":13689}},"swtc-nativescript":{"name":"swtc-nativescript","version":"1.0.2","license":"BSD-2-Clause","readme":"

    SWTC Library Nativescript ready

    \n

    npm install swtc-nativescript

    \n

    update webpack.config.js

    \n

    ...require('nativescript').aliases,

    \n

    replace node_modules/swtc-lib/src/server.js

    \n

    with src/server.js

    \n","downloadStats":{"lastDay":0,"lastWeek":18,"lastMonth":49}},"@nativescript/types-ios":{"name":"@nativescript/types-ios","version":"8.6.1","license":"Apache-2.0","readme":"

    @nativescript/types-ios

    \n

    NativeScript Types for iOS

    \n","downloadStats":{"lastDay":632,"lastWeek":3779,"lastMonth":15439}},"nativescript-baidu-push":{"name":"nativescript-baidu-push","version":"2.0.2","license":"Apache-2.0","readme":"

    Push Plugin for NativeScript

    \n

    The code for the Push Plugin for NativeScript.

    \n\n

    Getting started

    \n
      \n
    • \n

      Create a new NativeScript application

      \n
        tns create MyApp\n
      \n

      or use an existing one.

      \n
      • \n
    • \n

      Add the Push Plugin (from NPM). This will install the push plugin in the node_modules folder, in the root of the project. When adding a new platform (or using an existing one) the plugin will be added there as well. Go to the application folder and add the push plugin:

      \n
        tns plugin add nativescript-push-notifications\n
      \n
      • \n
    \n

    Android

    \n
    \n

    See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

    \n
    \n
      \n
    • \n

      Go to the application folder and add the Android platform to the application

      \n
        tns platform add android\n
      \n
      • \n
    • \n

      Add sample code in app/main-view-model.js in the function HelloWorldModel() like this one to subscribe and receive messages (enter your Firebase Cloud Messaging Sender ID in the options of the register method):

      \n
      • \n
    \n
    \tvar pushPlugin = require(\"nativescript-push-notifications\");
    \tvar self = this;
    \tpushPlugin.register({ senderID: '<ENTER_YOUR_PROJECT_NUMBER>' }, function (data){
    \t\tself.set(\"message\", \"\" + JSON.stringify(data));
    \t}, function() { });

    \tpushPlugin.onMessageReceived(function callback(data) {
    \t\tself.set(\"message\", \"\" + JSON.stringify(data));
    \t});
    \n
      \n
    • \n

      Attach your phone to the PC, ensure "adb devices" command lists it and run the app on the phone:

      \n
        tns run android\n
      \n
      • \n
    • \n

      The access token is written in the console and in the message area, after subscribing (Look for ObtainTokenThread log record). When sending a notification, the message below the TAP button should be changed with the message received.

      \n
      • \n
    \n

    The plugin will default to version 10.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion like so:

    \n
    ```\n// in the root level of /app/App_Resources/Android/app.gradle:\n\nproject.ext {\n    firebaseMessagingVersion = "+" // OR the version you wish\n}\n```\n
    \n

    iOS

    \n
      \n
    • \n

      Edit the package.json file in the root of application, by changing the bundle identifier to match the one from your Push Certificate. For example:\n"id": "com.telerik.PushNotificationApp"

      \n
      • \n
    • \n

      Go to the application folder and add the iOS platform to the application

      \n
        tns platform add ios\n
      \n
      • \n
    • \n

      Add sample code in app/main-view-model.js in the function HelloWorldModel() like this one to subscribe and receive messages (Enter your google project id in the options of the register method):

      \n
      • \n
    \n
    \tvar pushPlugin = require(\"nativescript-push-notifications\");
            var self = this;
            var iosSettings = {
                badge: true,
                sound: true,
                alert: true,
                interactiveSettings: {
                    actions: [{
                        identifier: 'READ_IDENTIFIER',
                        title: 'Read',
                        activationMode: \"foreground\",
                        destructive: false,
                        authenticationRequired: true
                    }, {
                        identifier: 'CANCEL_IDENTIFIER',
                        title: 'Cancel',
                        activationMode: \"foreground\",
                        destructive: true,
                        authenticationRequired: true
                    }],
                    categories: [{
                        identifier: 'READ_CATEGORY',
                        actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                        actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                    }]
                },
                notificationCallbackIOS: function (data) {
                    self.set(\"message\", \"\" + JSON.stringify(data));
                }
            };

            pushPlugin.register(iosSettings, function (data) {
                self.set(\"message\", \"\" + JSON.stringify(data));

                // Register the interactive settings
                    if(iosSettings.interactiveSettings) {
                        pushPlugin.registerUserNotificationSettings(function() {
                            alert('Successfully registered for interactive push.');
                        }, function(err) {
                            alert('Error registering for interactive push: ' + JSON.stringify(err));
                        });
                    }
            }, function() { });
    \n
      \n
    • \n

      Run the code

      \n

      tns run ios

      \n
      • \n
    • \n

      Send notifications

      \n
      • \n
    \n

    API

    \n
    \t// Get reference to the push plugin module.
    \tvar pushPlugin = require('nativescript-push-notifications');
    \n
      \n
    • register - use to subscribe device for push notifications
      • \n
    \n
    \n

    register(settings, successCallback, errorCallback)

    \n
    \n

    \tvar settings = {
    \t\t// Android settings
    \t\tsenderID: '<ENTER_YOUR_PROJECT_NUMBER>', // Android: Required setting with the sender/project number
    \t\tnotificationCallbackAndroid: function(message, pushNotificationObject) { // Android: Callback to invoke when a new push is received.
            \talert(JSON.stringify(message));
            },

    \t\t// iOS settings
            badge: true, // Enable setting badge through Push Notification
            sound: true, // Enable playing a sound
            alert: true, // Enable creating a alert

            // Callback to invoke, when a push is received on iOS
            notificationCallbackIOS: function(message) {
            \talert(JSON.stringify(message));
            }
    \t};


    \tpushPlugin.register(settings,
    \t\t// Success callback
    \t\tfunction(token) {
                            // if we're on android device we have the onMessageReceived function to subscribe
    \t\t\t// for push notifications
    \t\t\tif(pushPlugin.onMessageReceived) {
    \t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
    \t\t\t}

    \t\t\talert('Device registered successfully');
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t}
    \t);
    \n
      \n
    • unregister - use to unsubscribe from Push Notifications
      • \n
    \n
    \n

    unregister(successCallback, errorCallback, settings)

    \n
    \n

    \tpushPlugin.unregister(
    \t\t// Success callback
    \t\tfunction(){
    \t\t\talert('Device unregistered successfully');
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t},

    \t\t// The settings from the registration phase
    \t\tsettings
    \t);
    \n
      \n
    • Register for interactive push notifications (iOS >= 8.0) - in order to handle interacitve notifications, you have to pass additional settings while registering your device. The message object in the notificationCallbackIOS will contain a property with the value of the identifier.
      • \n
    \n
    \n

    register(settings, successCallback, errorCallback)

    \n
    \n

    \tvar settings = {
    \t\tbadge: true,
    \t\tsound: true,
            alert: true,
            interactiveSettings: {
            \tactions: [{
                \tidentifier: 'READ_IDENTIFIER',
                    title: 'Read',
                    activationMode: \"foreground\",
                    destructive: false,
                    authenticationRequired: true
                }, {
                identifier: 'CANCEL_IDENTIFIER',
                \ttitle: 'Cancel',
                    activationMode: \"foreground\",
                    destructive: true,
                    authenticationRequired: true
                }],
                categories: [{
                \tidentifier: 'READ_CATEGORY',
                    actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                    actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                }]
            },
            notificationCallbackIOS: function(message) {
            \talert(JSON.stringify(message));
            }
    \t};


    \tpushPlugin.register(settings,
    \t\t// Success callback
    \t\tfunction(token){
    \t\t\t// if we're on android device we have the onMessageReceived function to subscribe
    \t\t\t// for push notifications
    \t\t\tif(pushPlugin.onMessageReceived) {
    \t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
    \t\t\t}

    \t\t        // Register the interactive settings
    \t\t\tif(settings.interactiveSettings) {
    \t\t\t\tpushPlugin.registerUserNotificationSettings(function() {
    \t\t\t\t\talert('Successfully registered for interactive push.');
    \t\t\t\t}, function(err) {
    \t\t\t\t\talert('Error registering for interactive push: ' + JSON.stringify(err));
    \t\t\t\t});
    \t\t\t}
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t}
    \t);
    \n
      \n
    • areNotificationsEnabled - check if the notifications for the device are enabled. Returns true/false. Applicable only for iOS, for Android always returns true.
      • \n
    \n
    \n

    areNotificationsEnabled(callback)

    \n
    \n

    \tpushPlugin.areNotificationsEnabled(function(areEnabled) {
    \t\talert('Are Notifications enabled: ' + areEnabled);
        });
    \n
      \n
    • onTokenRefresh - Android only, subscribe for the token refresh event (Used to obtain the new token in cases where google revoke the old one)
      • \n
    \n
    \n

    onTokenRefresh(callback)

    \n
    \n

    \tpushPlugin.onTokenRefresh(function(token){
    \t\t\talert(token);
    \t\t});
    \n

    Troubleshooting

    \n

    In case the application doesn't work as expected. Here are some things you can verify

    \n

    Android

    \n
      \n
    • Ensure that the AndroindManifest.xml located at platforms\\android contains the following snippets for registering the GCM listener:
      • \n
    \n
    \t<activity android:name=\"com.telerik.pushplugin.PushHandlerActivity\"/>
    \t<receiver
    \t\tandroid:name=\"com.google.android.gms.gcm.GcmReceiver\"
    \t    android:exported=\"true\"
    \t    android:permission=\"com.google.android.c2dm.permission.SEND\" >
    \t    <intent-filter>
    \t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
    \t        <category android:name=\"com.pushApp.gcm\" />
    \t    </intent-filter>
    \t</receiver>
    \t<service
    \t\tandroid:name=\"com.telerik.pushplugin.PushPlugin\"
    \t    android:exported=\"false\" >
    \t    <intent-filter>
    \t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
    \t    </intent-filter>
    \t</service>
    \n
      \n
    • Ensure that the AndroindManifest.xml located at platforms\\android contains the following permissions for push notifications:
      • \n
    \n
    \t<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    \t<uses-permission android:name=\"android.permission.WAKE_LOCK\" />
    \t<uses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" />
    \n

    iOS

    \n
      \n
    • Error "Error registering: no valid 'aps-environment' entitlement string found for application" - this means that the certificates are not correctly set in the xcodeproject. Open the xcodeproject, fix them and you can even run the application from xcode to verify it's setup correctly. The bundle identifier in xcode should be the same as the "id" in the package.json file in the root of the project.
      • \n
    \n

    Using with Telerik Backend Services

    \n

    In order to use the plugin with Telerik Backend Services take a look at the official sample:

    \n

    Telerik Backend Services NativeScript Push Sample

    \n

    Android Configuration for using Firebase Cloud Messaging

    \n

    From version 0.1.0 the nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

    \n
      \n
    1. Add the FCM SDK
      2. \n
    \n
    \n

    Since version 0.1.1 thе google-services plugin is added via a hook. You can skip this step for versions 0.1.1 and above.

    \n
    \n
    - Navigate to the project `platforms/android/` folder and locate the application-level `build.gradle` file\n- Add the `google-services` plugin to the list of other dependencies in your app's `build.gradle` file\n\n\n```Groovy\ndependencies {\n\t// ...\n\tclasspath "com.google.gms:google-services:3.0.0"\n\t// ...\n}\n```\n\n- Add the following line be at the bottom of your `build.gradle` file to enable the Gradle plugin\n\n```Groovy\napply plugin: 'com.google.gms.google-services'\n```\n
    \n
      \n
    1. \n

      Add the google-services.json file

      \n

      To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

      \n

      Place the file in your app's App_Resources/Android folder

      \n
      2. \n
    2. \n

      Obtain the FCM Server Key

      \n

      This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

      \n

      If you are using the Telerik Platform Notifications service refer to this article for instructions how to set up this key.

      \n
      3. \n
    \n

    Receive and Handle Messages from FCM on Android

    \n

    The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

    \n

    The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the onMessageReceived(message, data, notification) method of the NativeScript module.

    \n

    The behavior of the onMessageReceived callback in the module follows the behavior of the FCM service.

    \n

    Handling Data Messages

    \n

    The onMessageReceived method of the plugin is called each time a data notification is received.

    \n

    When in background mode, a notification is constructed according to the values of the key specified above and placed in the tray. Tapping the notification launches the app and invokes the onMessageReceived callback.

    \n

    Handling Notification Messages

    \n

    If the app is in foreground, it invokes the onMessageReceived callback with three arguments (message, data, notification).

    \n

    If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the onMessageReceived callback.

    \n

    Handling Mixed Messages

    \n

    Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

    \n
      \n
    • The app is in foreground, the onMessageReceived callback is invoked with parameters (message, data)
      • \n
    • The app is in background, the onMessageReceived callback is not invoked. A notification is placed in the system tray. If the notification in the tray is tapped, the data part of the mixed message is available in the extras of the intent of the activity and are available in the respective application event of NativeScript.
      • \n
    \n

    Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

    \n
    application.on(application.resumeEvent, function(args) {
        if (args.android) {
            var act = args.android;
            var intent = act.getIntent();
            var extras = intent.getExtras();
            if (extras) {
                // for (var key in extras) {
                //     console.log(key + ' -> ' + extras[key]);
                // }
                var msg = extras.get('someKey');
            }
        }
    });
    \n

    Parameters of the onMessageReceived Callback

    \n

    Depending on the notification event and payload, the onMessageReceived callback is invoked with up to three arguments.

    \n
      \n
    • message - String. A string representation of the data.message value in the notification payload.
      • \n
    • data - Object. A JSON representation of the data value in the notification payload.
      • \n
    • notification - RemoteMessage.Notification. A representation of the RemoteMessage.Notification class which can be accessed according to its public methods. This parameter is available in case the callback was called from a message with a notification key in the payload.
      • \n
    \n

    Setting Notification Icon and Color

    \n
    \n

    From version 0.1.0 the module no longer adds as default a large icon of the notification because this was forcing developers to always use a large icon which is not the native behavior.

    \n
    \n

    The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray. More information on these keys is available in the documentation of the Telerik Platform Notifications service documentation article.

    \n

    Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

    \n
    \t<meta-data
    \t\tandroid:name=\"com.google.firebase.messaging.default_notification_icon\"
    \t\tandroid:resource=\"@drawable/ic_stat_ic_notification\" />
    \t<meta-data
    \t\tandroid:name=\"com.google.firebase.messaging.default_notification_color\"
    \t\tandroid:resource=\"@color/colorAccent\" />
    \n
    \n

    For more info visit the Edit the app manifest article.

    \n
    \n","downloadStats":{"lastDay":2,"lastWeek":4,"lastMonth":108}},"@nativescript/types-android":{"name":"@nativescript/types-android","version":"8.6.1","license":"Apache-2.0","readme":"

    @nativescript/types-android

    \n

    NativeScript Types for Android

    \n","downloadStats":{"lastDay":633,"lastWeek":3791,"lastMonth":15469}},"react-nativescript":{"name":"react-nativescript","version":"5.0.0","license":"MIT","readme":"

    react-nativescript

    \n

    Docs: https://react-nativescript.netlify.app

    \n","downloadStats":{"lastDay":5,"lastWeek":30,"lastMonth":323}},"nativescript-videoplayer":{"name":"nativescript-videoplayer","version":"5.0.1","license":"MIT","readme":"\n

    NativeScript VideoPlayer

    \n    \n

    A NativeScript plugin to provide the ability to play local and remote videos.

    \n

    \"Build\n\"npm\"\n\"npm\"

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    NativeScript Version 7+:\ntns plugin add nativescript-videoplayer

    \n

    NativeScript version prior to 7:\ntns plugin add nativescript-videoplayer@4.2.1

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android MediaPlayeriOS AVPlayer
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample\"Sample
    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:VideoPlayer=\"nativescript-videoplayer\">
            <StackLayout>

                <VideoPlayer:Video id=\"nativeVideoPlayer\"
                controls=\"true\" loop=\"true\" autoplay=\"false\" height=\"280\"
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

            </StackLayout>
    </Page>
    \n
    import { Video } from 'nativescript-videoplayer';

    const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
    // Setting event listeners on the Video
    video.on(Video.pausedEvent, () => {
      console.log('Video has been paused.');
    });

    video.on(Video.mutedEvent, () => {
      console.log('Video has been muted.');
    });

    // changing the src
    video.src = 'some video file or url';

    // set loop
    video.loop = false;
    \n

    Angular NativeScript Usage

    \n
    // somewhere at top of your component or bootstrap file
    import { registerElement } from \"nativescript-angular/element-registry\";
    import { Video } from 'nativescript-videoplayer';
    registerElement(\"VideoPlayer\", () => Video);
    // documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
    \n

    With AngularNative you have to explicitly close all components so the correct template code is below.

    \n
      <VideoPlayer
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\"
          height=\"300\"></VideoPlayer>
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    srcThe src file for the video. Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.
    autoplay - (boolean)Set if the video should start playing as soon as possible or to wait for user interaction.
    controls - (boolean)Set to use the native video player's media playback controls.
    muted - (boolean)Mutes the native video player.
    loop - (boolean)Sets the native video player to loop once playback has finished.
    fill - (boolean)If true, the aspect ratio of the video will not be honored and it will fill the entire space available.
    observeCurrentTime - (boolean)If true, currentTimeUpdated callback is possible.
    headers - (Map<string, string>)Set headers to add when loading a video from URL.
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    playStart playing the video.
    pausePause the video
    seekToTime(time: number)Seek the video to a time (milliseconds)
    getCurrentTimeReturns the current time in the video duration (milliseconds)
    getDurationReturns the current time in the video duration (milliseconds)
    destroyDestroy the video player and free resources
    mute(boolean)If true, mutes the video. If false, unmute the video.
    setVolume(volume: number)Set the volume - Must be between 0 and 1.
    ANDROID ONLY - stopStop the playback - this resets the player and remove the video src
    \n

    Observable Properties

    \n
      \n
    • currentTime() - Current time of video.
      • \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    errorEventThis event fires when an error in the source code is thrown.
    playbackReadyEventThis event fires when the video is ready.
    playbackStartEventThis event fires when video starts playback.
    seekToTimeCompleteEventThis event fires when seeking is complete.
    currentTimeUpdatedEventThis event fires when the current time of playing video is changed.
    finishedEventThis event fires when the video is complete.
    mutedEventThis event fires when video is muted.
    unmutedEventThis event fires when video is unmutedEvent.
    pausedEventThis event fires when video is paused.
    volumeSetEventThis event fires when the volume is set.
    \n

    iOS Logging

    \n

    When running the iOS Simulator, after playing a video the iOS system may write\nlog messages to the console every few seconds of the form

    \n
    [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
    \n

    They will continue being logged even after the video has been properly destroyed.\nThese messages can be safely ignored. To turn them off completely, run the following\ncommand in your shell before running tns run ios:

    \n
    export SIMCTL_CHILD_OS_ACTIVITY_MODE=\"disable\"
    \n","downloadStats":{"lastDay":52,"lastWeek":733,"lastMonth":3372}},"nativescript-feedback":{"name":"nativescript-feedback","version":"2.0.0","license":"MIT","readme":"

    NativeScript Feedback

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.5.0.

    \n
    \n

           \n

    \n

    iOS and Android running the included demo - much better framerate on YouTube!

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-feedback
    cd nativescript-feedback/src
    npm run demo.ios # or demo.android
    \n

    NativeScript-Angular

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    NativeScript-Vue

    \n

    Check out the demo-vue folder. This is how to clone and run it:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-feedback
    cd nativescript-feedback/src
    npm run demo-vue.ios # or demo-vue.android
    \n

    Installation

    \n
    tns plugin add nativescript-feedback
    \n

    API

    \n

    requiring / importing the plugin

    \n

    JavaScript

    \n
    var FeedbackPlugin = require(\"nativescript-feedback\");
    var feedback = new FeedbackPlugin.Feedback();
    \n

    TypeScript

    \n
    import { Feedback, FeedbackType, FeedbackPosition } from \"nativescript-feedback\";

    export class MyClassWithFeedback {
      private feedback: Feedback;
      
      constructor() {
        this.feedback = new Feedback();
      }
    }
    \n

    show

    \n

    Showing feedback can be as easy as:

    \n
    this.feedback.show({
      message: \"Easiest thing ever, right?\"
    });
    \n

    That uses a bunch of sane defaults.\nHowever, there are a lot of things you may want to tweak. All of which are optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    titleundefinedThe bold title at the top.
    titleColornew Color("white")The title's color.
    titleFontBold system fontiOS needs the font name and android the file name. See the demo for examples.
    titleSize16The size of the title font.
    messageundefinedThe message below the title.
    messageColornew Color("white")The message's color.
    messageFontSystem fontiOS needs the font name and android the file name. See the demo for examples.
    messageSize13The size of the message font.
    duration4000The duration to show the feedback (milliseconds).
    typeFeedbackType.CustomOne of .Custom, .Success, .Warning, .Error, .Info. Each with a distinct style as show in the animations above. You can still override all other properties according to your liking.
    positionFeedbackPosition.TopEither .Top or .Bottom.
    backgroundColorDepends on the typeThe background's color.
    iconDepends on the typeA custom icon shown on the left. Loaded from App_Resources/<platform> folders. Example here. Want no icon at all? Don't set a type.
    android.iconColorSee descriptionOn iOS the icon color is as-is, but on Android it's white. Set this color to override the latter (also see the TypeScript example below).
    android.iconPulseEnabledtrueOn Android you can disable the pulsating effect of the icon.
    onTapundefinedA callback function that gets invoked when the user tapped your feedback.
    onShowundefinedA callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done.
    onHideundefinedA callback for when the feedback is hidden.
    \n

    One of the examples in the demo app shows a custom icon and alternative colors. You'd get there by doing:

    \n

    JavaScript

    \n
    var FeedbackType = require (\"nativescript-feedback\").FeedbackType;
    var FeedbackPosition = require (\"nativescript-feedback\").FeedbackPosition;
    var color = require(\"color\");

    this.feedback.show({
      title: \"Thumbs up!\",
      titleColor: new color.Color(\"#222222\"),
      position: FeedbackPosition.Bottom, // iOS only
      type: FeedbackType.Custom, // this is the default type, by the way
      message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
      messageColor: new color.Color(\"#333333\"),
      duration: 3000,
      backgroundColor: new color.Color(\"yellowgreen\"),
      icon: \"customicon\", // in App_Resources/platform folders
      onTap: function() { console.log(\"showCustomIcon tapped\") },
      onShow: function(animating) { console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\") },
      onHide: function() { console.log(\"showCustomIcon hidden\") }
    });
    \n

    TypeScript

    \n
    import { FeedbackType, FeedbackPosition } from \"nativescript-feedback\";
    import { Color } from \"tns-core-modules/color\";

    this.feedback.show({
      title: \"Thumbs up!\",
      titleColor: new Color(\"#222222\"),
      position: FeedbackPosition.Bottom,
      type: FeedbackType.Custom, // this is the default type, by the way
      message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
      messageColor: new Color(\"#333333\"),
      duration: 3000,
      backgroundColor: new Color(\"yellowgreen\"),
      icon: \"customicon\", // in App_Resources/platform folders
      android: {
        iconColor: new Color(\"#222222\") // optional, leave out if you don't need it
      },
      onTap: () => console.log(\"showCustomIcon tapped\"),
      onShow: animating => console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\"),
      onHide: () => console.log(\"showCustomIcon hidden\")
    });
    \n

    hide

    \n

    Hiding a message can be done automatically (see duration), by a gesture (tap / swipe), or programmatically as shown here:

    \n
    this.feedback.hide();
    \n

    Convenience functions

    \n

    Since in many cases you want to only show success / info / warning / error messages anyway, this plugin's got you covered. You can call any of these functions and still pass in any of the aforementioned properties to tweak it to your liking:

    \n

    success

    \n
    this.feedback.success({
      title: \"Awesome\",
      message: \"That was great!\"
    });
    \n

    info

    \n
    this.feedback.info({
      title: \"Info <> Data\",
      message: \"Info is relevant data, not just any data.\"
    });
    \n

    warning

    \n
    this.feedback.warning({
      message: \"Your battery is almost empty\"
    });
    \n

    error

    \n
    this.feedback.error({
      title: \"KABOoooOOM!\",
      titleColor: new Color(\"black\")
    });
    \n

    Credits

    \n

    On Android we're using the Alerter library by Tapadoo,\nand on iOS ISMessages by ilyainyushin.

    \n","downloadStats":{"lastDay":98,"lastWeek":527,"lastMonth":2179}},"@chasexc/nativescript-firebase":{"name":"@chasexc/nativescript-firebase","version":"11.1.5","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Firebase\"/

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n
    \n

    🚨🚨🚨 I'M NO LONGER ABLE TO MAINTAIN THIS PROJECT - I'm archiving the project for now, but if you want to take over, please don't open an issue, but hit me up on Twitter @eddyverbruggen. Alternatively, please check out this excellent plugin: https://github.com/NativeScript/firebase

    \n
    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute this for NativeScript 7+:

    \n
    tns plugin add @nativescript/firebase
    \n

    or for NativeScript 6:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n
    \n

    Be advised. Enabling some features (such as Admob) in the firebase.nativescript.json may require additional configuration. If you are experiencing crashes or bugs after installing this plugin please consult the documentation for each of the features you've enabled to ensure that no additioal configuration is required.

    \n
    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n
      \n
    • cd src.
      • \n
    • npm i (just answer 'n' to any prompts as they are ignored anyway).
      • \n
    • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
      • \n
    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    // NativeScript 7+
    var firebase = require(\"@nativescript/firebase\").firebase;

    // NativeScript 6-
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    // NativeScript 7+
    import { firebase } from \"@nativescript/firebase\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    // NativeScript 7+
    import { firebase } from \"@nativescript/firebase\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n
      \n
    • dev will be selected if you run with either --env.dev, --env.development or --env.staging flags.
      • \n
    • prod will be selected if you run with either --env.prod or --env.production.
      • \n
    \n

    Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

    \n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":2,"lastWeek":7,"lastMonth":85}},"nativescript-mapbox":{"name":"nativescript-mapbox","version":"5.0.1","license":"MIT","readme":"\n \n\n

    NativeScript Mapbox plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Awesome native OpenGL-powered maps - by Mapbox

    \n\n
    \n

    There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

    \n
    \n

    Before you begin - Prerequisites

    \n

    You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

    \n

    You will also need to set up your development environment. Please refer to the NativeScript documentation.

    \n

    Installation

    \n
    $ npm install --save nativescript-mapbox
    \n

    DEMOS

    \n

    Two demo applications are available in the repository.

    \n

    To run them, you'll need to clone the github repository and build the plugin. See below.

    \n

    You will also need an access token. Your access_token can then be set in the top level mapbox_config.ts file.

    \n

    The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

    \n
    \n

    NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

    \n
    \n

    To run the Angular demo

    \n
    cd src
    npm run build.release
    cd ../demo-angular
    tns run <platform>
    \n

    To run the plain Nativescript demo

    \n
    cd src
    npm run build.release
    cd ../demo
    tns run <platform>
    \n

    Debug Build

    \n

    To come up to speed on the plugin, I added extensive trace messages.\nThese can be turned on by replacing 'npm run build.release' with 'npm run build.debug' in the commands above.

    \n

    Breaking Changes

    \n

    This version includes breaking API changes.

    \n

    The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

    \n

    Issues

    \n

    If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

    \n

    On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

    \n
      <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
    \n

    If you get an error related to TelemetryService then please check it's there.

    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

    \n

    Demo app (Angular)

    \n

    There is also the beginnings of an Angular demo in demo-angular in this repository.

    \n

    Declaring a map in the view

    \n

    XML

    \n

    You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

    \n

    A simple layout could look like this:

    \n\n

    Could be rendered by a definition like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
      <StackLayout>
        <Label text=\"Nice map, huh!\" class=\"title\"/>
        <ContentView height=\"240\" width=\"240\">
          <map:MapboxView
              accessToken=\"your_token\"
              mapStyle=\"traffic_night\"
              latitude=\"52.3702160\"
              longitude=\"4.8951680\"
              zoomLevel=\"3\"
              showUserLocation=\"true\"
              mapReady=\"onMapReady\">
          </map:MapboxView>
        </ContentView>
      </StackLayout>
    </Page>
    \n

    Angular

    \n

    Component:

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
    \n

    View:

    \n
      <ContentView height=\"100%\" width=\"100%\">
        <Mapbox
            accessToken=\"your_token\"
            mapStyle=\"traffic_day\"
            latitude=\"50.467735\"
            longitude=\"13.427718\"
            hideCompass=\"true\"
            zoomLevel=\"18\"
            showUserLocation=\"false\"
            disableZoom=\"false\"
            disableRotation=\"false\"
            disableScroll=\"false\"
            disableTilt=\"false\"
            (mapReady)=\"onMapReady($event)\">
        </Mapbox>
      </ContentView>
    \n

    Available XML/Angular options

    \n

    All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondefaultdescription
    accesstoken-see 'Prerequisites' above
    delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
    mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
    latitude -Set the center of the map by passing this in
    longitude-.. and this as well
    zoomLevel00-20
    showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
    hideCompass falseDon't show the compass in the top right corner during rotation of the map
    hideLogofalseMapbox requires false if you're on a free plan
    hideAttribution trueMapbox requires false if you're on a free plan
    disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
    disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
    disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
    disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    moveBeginEvent-The name of a function to be called when the map is moved.
    locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
    locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
    \n

    Want to add markers?

    \n

    This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

    \n

    Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
      var nativeMapView = args.ios ? args.ios : args.android;
      console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

      // .. or use the convenience methods exposed on args.map, for instance:
      args.map.addMarkers([
        {
          lat: 52.3602160,
          lng: 4.8891680,
          title: 'One-line title here',
          subtitle: 'Really really nice location',
          selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
          onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
        }]
      );
    }

    exports.onMapReady = onMapReady;
    \n

    .. or want to set the viewport bounds?

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      args.map.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true
          }
      );
    }

    exports.onMapReady = onMapReady;
    \n

    The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

    \n

    Check out the usage details on the functions below.

    \n

    Declaring a map programmatically

    \n

    Add a container to your view XML where you want to programmatically add the map. Give it an id.

    \n
    <ContentView id=\"mapContainer\" />
    \n

    show

    \n

        const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

        const settings = {

          // NOTE: passing in the container here.

          container: contentView,
          accessToken: ACCESS_TOKEN,
          style: MapStyle.LIGHT,
          margins: {
            left: 18,
            right: 18,
            top: isIOS ? 390 : 454,
            bottom: isIOS ? 50 : 8
          },
          center: {
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 9, // 0 (most of the world) to 20, default 0
          showUserLocation: true, // default false
          hideAttribution: true, // default false
          hideLogo: true, // default false
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disableTilt: false, // default false
          markers: [
            {
              id: 1,
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location',
              iconPath: 'res/markers/green_pin_marker.png',
              onTap: () => console.log(\"'Nice location' marker tapped\"),
              onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
            }
          ]
        };

        console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

        const mapView = new MapboxView();

        // Bind some event handlers onto our newly created map view. 

        mapView.on( 'mapReady', ( args : any ) => {

          console.log( \"main-view-model: onMapReady fired.\" );

          // this is an instance of class MapboxView

          this.mapboxView = args.map;

          // get a reference to the Mapbox API shim object so we can directly call its methods.

          this.mapbox = this.mapboxView.getMapboxApi();

          this.mapbox.setOnMapClickListener( point => {
            console.log(`>> Map clicked: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnMapLongClickListener( point => {
            console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnScrollListener((point: LatLng) => {
            // console.log(`>> Map scrolled`);
          });

          this.mapbox.setOnFlingListener(() => {
            console.log(`>> Map flinged\"`);
          }).catch( err => console.log(err) );

        });

        mapView.setConfig( settings );
        contentView.content = mapView;
    \n

    hide

    \n

    All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

    \n
      mapbox.hide();
    \n

    unhide

    \n

    If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

    \n
      mapbox.unhide();
    \n

    destroy 💥

    \n

    To clean up the map entirely you can destroy instead of hide it:

    \n
      mapbox.destroy();
    \n

    setMapStyle

    \n

    You can update the map style after you've loaded it.

    \n
    \n

    With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

    \n
    \n
      mapbox.setMapStyle(mapbox.MapStyle.DARK);
    \n

    addMarkers

    \n
      import { MapboxMarker } from \"nativescript-mapbox\";

      const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
        id: 2, // can be user in 'removeMarkers()'
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        title: 'One-line title here', // no popup unless set
        subtitle: 'Infamous subtitle!',
        // icon: 'res://cool_marker', // preferred way, otherwise use:
        icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
        iconPath: 'res/markers/home_marker.png',
        selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
        onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
        onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
      };

      mapbox.addMarkers([
        firstMarker,
        {
          // more markers..
        }
      ])
    \n

    Updating markers

    \n

    Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

    \n
      firstMarker.update({
        lat: 52.3622160,
        lng: 4.8911680,
        title: 'One-line title here (UPDATE)',
        subtitle: 'Updated subtitle',
        selected: true, // this will trigger the callout upon update
        onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
        onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
      })
    \n

    removeMarkers

    \n

    You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

    \n
      // remove all markers
      mapbox.removeMarkers();

      // remove specific markers by id
      mapbox.removeMarkers([1, 2]);
    \n

    setViewport

    \n

    If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

    \n
      mapbox.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true // default true
          }
      )
    \n

    getViewport

    \n
      mapbox.getViewport().then(
          function(result) {
            console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
          }
      )
    \n

    setCenter

    \n
      mapbox.setCenter(
          {
            lat: 52.3602160, // mandatory
            lng: 4.8891680, // mandatory
            animated: false // default true
          }
      )
    \n

    getCenter

    \n

    Here the promise callback makes sense, so adding it to the example:

    \n
      mapbox.getCenter().then(
          function(result) {
            console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getCenter error: \" + error);
          }
      )
    \n

    setZoomLevel

    \n
      mapbox.setZoomLevel(
          {
            level: 6.5, // mandatory, 0-20
            animated: true // default true
          }
      )
    \n

    getZoomLevel

    \n
      mapbox.getZoomLevel().then(
          function(result) {
            console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getZoomLevel error: \" + error);
          }
      )
    \n

    animateCamera

    \n
      // this is a boring triangle drawn near Amsterdam Central Station
      mapbox.animateCamera({
        // this is where we animate to
        target: {
            lat: 52.3732160,
            lng: 4.8941680
        },
        zoomLevel: 17, // Android
        altitude: 2000, // iOS (meters from the ground)
        bearing: 270, // Where the camera is pointing, 0-360 (degrees)
        tilt: 50,
        duration: 5000 // default 10000 (milliseconds)
      })
    \n

    setTilt (Android only)

    \n
      mapbox.setTilt(
          {
            tilt: 40, // default 30 (degrees angle)
            duration: 4000 // default 5000 (milliseconds)
          }
      )
    \n

    getTilt (Android only)

    \n
      mapbox.getTilt().then(
          function(tilt) {
            console.log(\"Current map tilt: \" +  tilt);
          }
      )
    \n

    getUserLocation

    \n

    If the user's location is shown on the map you can get their coordinates and speed:

    \n
      mapbox.getUserLocation().then(
          function(userLocation) {
            console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
            console.log(\"Current user speed: \" +  userLocation.speed);
          }
      )
    \n

    trackUser

    \n

    In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

    \n
      mapbox.trackUser({
        mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
        animated: true
      });
    \n

    addSource

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

    \n

    Adds a vector to GeoJSON source to the map.

    \n
      mapbox.addSource( id, {
        type: 'vector',
        url: 'url to source'
      } );
    \n

    -or-

    \n
      mapbox.addSource( id, {
        'type': 'geojson',
        'data': {
          \"type\": \"Feature\",
            \"geometry\": {
            \"type\": \"LineString\",
              \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
            }
          }
        }
      );
    \n

    removeSource

    \n

    Remove a source by id

    \n
      mapbox.removeSource( id );
    \n

    addLayer

    \n

    NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

    \n

    https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

    \n

    To add a line:

    \n
      mapbox.addLayer({
        'id': someid,
        'type': 'line',
        'source': {
          'type': 'geojson',
          'data': {
            \"type\": \"Feature\",
              \"geometry\": {
              \"type\": \"LineString\",
                \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
              }
            }
          }
        },
        'layout': {
          'line-cap': 'round',
          'line-join': 'round'
        },    
        'paint': {
          'line-color': '#ed6498',
          'line-width': 5,
          'line-opacity': .8,
          'line-dash-array': [ 1, 1, 1, ..]
        }
      });
    \n

    To add a circle:

    \n
      mapbox.addLayer({
        \"id\": someid,
        \"type\": 'circle',
        \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
        \"source\": {
          \"type\": 'geojson',
          \"data\": {
            \"type\": \"Feature\",
            \"geometry\": {
              \"type\": \"Point\",
              \"coordinates\": [ lng, lat ]
            }
          }
        }, 
        \"paint\": {
          \"circle-radius\": {
            \"stops\": [
              [0, 0],
              [20, 8000 ]
            ],
            \"base\": 2
          },
          'circle-opacity': 0.05,
          'circle-color': '#ed6498',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ed6498'
        } 
      });
    \n

    Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

    \n

    removeLayer

    \n

    Remove a layer added with addLayer() by id.

    \n
      mapbox.removeLayer( id );
    \n

    addLinePoint

    \n

    Dynamically add a point to a line.

    \n
      mapbox.addLinePoint( <id of line layer>, lnglat )
    \n

    where lnglat is an array of two points, a longitude and a latitude.

    \n

    addPolygon

    \n

    Draw a shape. Just connect the dots like we did as a toddler.

    \n

    The first person to tweet a snowman drawn with this function gets a T-shirt.

    \n
      // after adding this, scroll to Amsterdam to see a semi-transparent red square
      mapbox.addPolygon(
          {
            id: 1, // optional, can be used in 'removePolygons'
            fillColor: new Color(\"red\"),
            fillOpacity: 0.7,

            // stroke-related properties are only effective on iOS
            strokeColor: new Color(\"green\"),
            strokeWidth: 8,
            strokeOpacity: 0.5,

            points: [
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              },
              {
                lat: 52.35421556258807,
                lng: 4.9308013916015625
              },
              {
                lat: 52.353796172573944,
                lng: 4.8799896240234375
              },
              {
                lat: 52.3864966440161,
                lng: 4.8621368408203125
              },
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              }
            ]
          })
          .then(result => console.log(\"Mapbox addPolygon done\"))
          .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
    \n

    removePolygons

    \n

    You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

    \n
      // remove all polygons
      mapbox.removePolygons();

      // remove specific polygons by id
      mapbox.removePolygons([1, 2]);
    \n

    addPolyline

    \n

    Deprecated. Use addLayer() instead.

    \n

    Draw a polyline. Connect the points given as parameters.

    \n
      // Draw a two segment line near Amsterdam Central Station
      mapbox.addPolyline({
          id: 1, // optional, can be used in 'removePolylines'
          color: '#336699', // Set the color of the line (default black)
          width: 7, // Set the width of the line (default 5)
          opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
          points: [
              {
                  'lat': 52.3833160, // mandatory
                  'lng': 4.8991780 // mandatory
              },
              {
                  'lat': 52.3834160,
                  'lng': 4.8991880
              },
              {
                  'lat': 52.3835160,
                  'lng': 4.8991980
              }
          ]
      });
    \n

    removePolylines

    \n

    Deprecated. Use removeLayer() instead.

    \n

    You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

    \n
      // remove all polylines
      mapbox.removePolylines();

      // remove specific polylines by id
      mapbox.removePolylines([1, 2]);
    \n

    addSource

    \n

    Add a source that can be used by addLayer. Note only vector type is currently supported.

    \n
      mapbox.addSource(
        id: \"terrain-source\", // required
        type: \"vector\", // supported types: vector
        url: \"mapbox://mapbox.mapbox-terrain-v2\"
      );
    \n

    removeSource

    \n

    Remove a source by id.

    \n
      mapbox.removeSource(\"terrain-source\");
    \n

    addLayer

    \n

    Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

    \n
      mapbox.addLayer(
        id: \"terrain-data\",  // required
        source: \"terrain-source\",  // id of source
        sourceLayer: \"contour\",  // id of layer from source
        type: \"line\", // supported types: circle, fill, line
        lineJoin: \"round\",
        lineCap: \"round\",
        lineColor: \"#ff69b4\",
        lineWidth: 1,
      );
    \n

    removeLayer

    \n

    Remove a layer by id.

    \n
      mapbox.removeLayer(\"terrain-data\");
    \n

    setOnMapClickListener

    \n

    Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

    \n
      mapbox.setOnMapClickListener((point: LatLng) => {
        console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnMapLongClickListener

    \n

    Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

    \n
      mapbox.setOnMapLongClickListener((point: LatLng) => {
        console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnScrollListener

    \n

    Add a listener to retrieve lat and lng of where the user scrolls to on the map.

    \n
      mapbox.setOnScrollListener((point?: LatLng) => {
        console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    Offline maps

    \n

    For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

    \n

    Important read: the offline maps documentation by Mapbox.

    \n

    downloadOfflineRegion

    \n

    This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

    \n
      mapbox.downloadOfflineRegion(
        {
          accessToken: accessToken, // required for Android in case no map has been shown yet
          name: \"Amsterdam\", // this name can be used to delete the region later
          style: mapbox.MapStyle.OUTDOORS,
          minZoom: 9,
          maxZoom: 11,
          bounds: {
            north: 52.4820,
            east: 5.1087,
            south: 52.2581,
            west: 4.6816
          },
          // this function is called many times during a download, so
          // use it to show an awesome progress bar!
          onProgress: function (progress) {
            console.log(\"Download progress: \" + JSON.stringify(progress));
          }
        }
      ).then(
        function() {
          console.log(\"Offline region downloaded\");
        },
        function(error) {
          console.log(\"Download error: \" + error);
        }
      );
    \n

    Advanced example: download the current viewport

    \n

    Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

    \n
      // I spare you the error handling on this one..
      mapbox.getViewport().then(function(viewport) {
        mapbox.downloadOfflineRegion(
          {
            name: \"LastViewport\", // anything you like really
            style: mapbox.MapStyle.LIGHT,
            minZoom: viewport.zoomLevel,
            maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
            bounds: viewport.bounds,
            onProgress: function (progress) {
              console.log(\"Download %: \" + progress.percentage);
            }
          }
        );
      });
    \n

    listOfflineRegions

    \n

    To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

    \n
      mapbox.listOfflineRegions({
        // required for Android in case no map has been shown yet
        accessToken: accessToken
      }).then(
        function(regions) {
          console.log(JSON.stringify(JSON.stringify(regions));
        },
        function(error) {
          console.log(\"Error while listing offline regions: \" + error);
        }
      );
    \n

    deleteOfflineRegion

    \n

    You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

    \n
      mapbox.deleteOfflineRegion({
        name: \"Amsterdam\"
      }).then(
        function() {
          console.log(\"Offline region deleted\");
        },
        function(error) {
          console.log(\"Error while deleting an offline region: \" + error);
        }
      );
    \n

    Permissions

    \n

    hasFineLocationPermission / requestFineLocationPermission

    \n

    On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

    \n

    You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

    \n

    Note that hasFineLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
      mapbox.hasFineLocationPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestFineLocationPermission' now
            console.log(\"Has Location Permission? \" + granted);
          }
      );

      // if no permission was granted previously this will open a user consent screen
      mapbox.requestFineLocationPermission().then(
          function() {
            console.log(\"Location permission requested\");
          }
      );
    \n

    Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

    \n

    Using marker images from the internet

    \n

    If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

    \n
    \t<key>NSAppTransportSecurity</key>
    \t<dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
    \t</dict>
    \n","downloadStats":{"lastDay":2,"lastWeek":69,"lastMonth":258}},"@nativescript/firebase-messaging-core":{"name":"@nativescript/firebase-messaging-core","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-messaging-core

    \n
    ns plugin add @nativescript/firebase-messaging-core
    \n

    What does it do?

    \n

    Firebase Messaging Core is a lite package which enables you to use a third-party push service on Android and iOS.

    \n

    On Android it will always use FCM.

    \n

    Usage

    \n

    iOS - Requesting permissions

    \n

    iOS prevents messages containing notification (or 'alert') payloads from being displayed unless you have received explicit permission from the user.

    \n

    This module provides a requestPermission method which triggers a native permission dialog requesting the user's permission:

    \n
    import { MessagingCore, AuthorizationStatus } from '@nativescript/firebase-messaging-core';

    async function requestUserPermission() {
    \tconst authStatus = await MessagingCore.getInstance().requestPermission({
    \t\tios: {
    \t\t\talert: true,
    \t\t},
    \t});
    \tconst enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;

    \tif (enabled) {
    \t\tconsole.log('Authorization status:', authStatus);

    \t\tconst didRegister = await MessagingCore.getInstance().registerDeviceForRemoteMessages();
    \t}
    }
    \n

    The permissions API for iOS provides much more fine-grain control over permissions and how they're handled within your application. To learn more, view the advanced iOS Permissions documentation.

    \n

    On Android, you do not need to request user permission. This method can still be called on Android devices; however, and will always resolve successfully.

    \n

    Foreground state messages

    \n

    To listen to messages in the foreground, call the onMessage method inside of your application code. Code executed via this handler is able to interact with your application (e.g. updating the state or UI).

    \n

    For example, the Alert API could be used to display a new Alert each time a message is delivered'

    \n
    import { alert } from '@nativescript/core';
    import { MessagingCore } from '@nativescript/firebase-messaging-core';

    MessagingCore.getInstance().addOnMessage(async (remoteMessage) => {
    \tif(MessagingCore.inForeground){
    \t\talert('A new Push message arrived with application inForeground!', JSON.stringify(remoteMessage));
    \t}else{
    \t\talert('A new Push message arrived with application in background!', JSON.stringify(remoteMessage));
    \t}
    });
    \n

    Always show notifications when the application is in foreground

    \n

    If you always want to display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification, you need to set the showNotificationsWhenInForeground option to true:

    \n
    import { MessagingCore } from '@nativescript/firebase-messaging-core';
    MessagingCore.getInstance().showNotificationsWhenInForeground = true;
    \n

    Device tokens

    \n

    To send a message to a device, you must access its unique token. A token is automatically generated by the device and can be accessed using the Messaging module. The token should be saved inside your systems data-store and should be easily accessible when required.

    \n

    The examples below use a NativeScript ApplicationSettings to store and manage the tokens. You can however use any datastore.

    \n
    \n

    Note: If using iOS, ensure you have completed the setup & requested user permission before trying to receive messages!

    \n
    \n

    Saving tokens

    \n

    Once your application has started, you can call the getToken method on the Cloud Messaging module to get the unique device token (if using a different push notification provider, such as Amazon SNS, you will need to call getAPNSToken on iOS):

    \n
    import { ApplicationSettings } from '@nativescript/core';
    import { MessagingCore } from '@nativescript/firebase-messaging-core';

    async function saveTokenToDatabase(token) {
    \tApplicationSettings.setString(token);
    }

    // Get the device token
    MessagingCore.getInstance()
    \t.getCurrentToken()
    \t.then((token) => {
    \t\tsaveTokenToDatabase(token);
    \t});

    // Listen to whether the token changes
    MessagingCore.getInstance().addOnToken((token) => {
    \tsaveTokenToDatabase(token);
    });
    \n

    Android Integration

    \n

    Push notification icon and color

    \n

    If you want to use a specific icon for the push notification, it has to be configured in the tag in the AndroidManifest.xml

    \n
    <meta-data android:name=\"com.google.firebase.messaging.default_notification_icon\"
               android:resource=\"@drawable/your_drawable_name\" />
    <meta-data android:name=\"com.google.firebase.messaging.default_notification_color\"
               android:resource=\"@color/ns_primary\" />
    \n

    Apple Integration

    \n

    Enable push support in Xcode

    \n

    Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):\n\"push-xcode-config\"

    \n
    \n

    Note: Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

    \n
    \n

    Copy the entitlements file

    \n

    The previous step created a the file platforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nMove and rename that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

    \n
    <key>aps-environment</key>
    <string>development</string>
    \n

    Allow processing when a background push is received

    \n

    Open app/App_Resources/iOS/Info.plist and add this to the bottom:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>remote-notification</string>
    </array>
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":204,"lastWeek":1087,"lastMonth":5493}},"esolution-nativescript-orientation":{"name":"esolution-nativescript-orientation","version":"2.2.4-alpha.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    nativescript-orientation

    \n

    This plugin has been updated so that it can be used for nativescript >= 7

    \n

    This repository is forked from NathanaelA/nativescript-orientation.

    \n

    A NativeScript plugin to deal with Declarative UI and Screen Orientation\nThis handles both sides of the orientation issues; both the events on when the orientation changes; and the ability to change the orientation manually.

    \n

    ProPlugins

    \n

    We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

    \n

    \n

    Community

    \n

    Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

    \n

    Developed by

    \n

    \"MasterTech\"

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Sample Snapshot

    \n

    \"Sample1\"\nThanks to TJ VanToll for the awesome animated gif.

    \n

    Installation

    \n

    tns plugin add nativescript-orientation

    \n

    NativeScript 2.x.x

    \n

    tns plugin add nativescript-orientation@1.6.1

    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    require( \"nativescript-orientation\" );
    \n

    This plugin has two separate abilities; the first ability is to setup the cool ability to run a function and setup the css when the screen is rotated.\nFor this ability, you do NOT need to keep a reference to it for the orientation event handling and css. You only need to load it once. I recommend you add it to your app.js file and forget about it.\nIt will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.\nWhat this does is automatically add and remove the "landscape" to the current Page's cssClass variable (and does other magic behind the scenes allowing it to actually work).

    \n

    If you want to manually control the orientation, then you will need to require it and use the functions you need.

    \n

    You ask, how exactly does this help?

    \n

    Well, guess what Cascading means in CSS?
    \nYes, this means this works now:

    \n

    Plain Awesome NativeScript (PAN)

    \n
    StackLayout {
      background-color: red;
    }

    .landscape StackLayout {
      background-color: green;
    }
    \n

    NativeScript Angular (NAN)

    \n

    /deep/ .landscape StackLayout  {
        background-color: green;
    }
    \n

    I was recently informed the :host is a better options, as it causes less potential isolation side effects in Angular.

    \n
    StackLayout {
        background-color : red;
    }


    .landscape :host StackLayout {
      background-color: green;
    }
    \n

    So in portrait the background would be red, in landscape the color is green.\nPlease note in Angular, you need to prefix the .landscape with /deep/ for it to work!\nIn addition, for Angular I was recently informed that :host is also a valid option, I have not tested this; but I wanted to get it documented.

    \n

    Why use this?

    \n

    You can set ALL the normal CSS values this way include width, height, font-size.\nBy using the css to control any normal items and your own page's exports.orientation to control anything not controllable by css you can change the look completely between Landscape/Portrait.

    \n

    You can add to any page you need it the following Function:

    \n

    exports.orientation(args)

    \n
    args.landscape = true | false
    \n
    args.object = the current page
    \n

    This function (if it exists) will be ran when the page is first created so you can set any needed defaults. (This is ran at the same time as the PageNavigatingTo event)\nThis function (if it exists) will be ran each time the orientation changes.\nSince at this moment some items can't be controlled by CSS like orientation on ScrollView, this event allows you to control change those things when the orientation changes via your code.

    \n

    Please note, there is also a built in event in NativeScript called orientationChanged event. The differences between these is that the built in event only gets called when the orientation changes;\nThis event is called on every screen navigation and any time the device rotates; allowing you to setup any rotation stuff during the creation of the screen.
    \nANGULAR NOTE: The exports.orientation function event does NOT work in Angular since Angular does not have the same concept. You can use the orientation.addOrientationApplier instead.

    \n

    Additional Helper Method

    \n
    var orientation = require('nativescript-orientation');
    \n

    orientation.getOrientation(sensors?)

    \n
    optional sensor === true, will return you sensor values on android verses screen size calculation
    \n
    Some android tablets lie about port vs landscape; so we determine the orientation based on the current screen sizes
    \n
      var orientation = require('nativescript-orientation');
      console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value
    \n

    orientation.setOrientation(direction, animation)

    \n
    Direction - "portrait" | "landscape" | "landscapeleft" | "landscaperight" | enum DeviceOrientation
    \n
    Animation === false, disabled animation on iOS. (iOS ONLY currently)
    \n

    This will automatically disable rotation support after it changes the orientation.

    \n
      var orientation = require('nativescript-orientation');
      orientation.setOrientation(\"landscape\");
    \n

    orientation.enableRotation() - enable orientation

    \n

    This will enable automatic orientation support

    \n
      var orientation = require('nativescript-orientation');
      orientation.enableRotation();  // The screen will rotate to whatever the current settings are...
    \n

    orientation.disableRotation() - disables orientation

    \n

    This will disable automatic orientation support and lock it to the current orientation

    \n
      var orientation = require('nativescript-orientation');
      orientation.disableRotation(); // The screen will no longer rotate
    \n

    orientation.setFullScreen(value) - true/false

    \n

    Orientation Appliers

    \n

    Orientation Appliers serve as hooks into the orientation application logic for nativescript-orientation. Whenever nativescript-orientation applies its orientation logic it also calls any Orientation Appliers that you've added. This allows you to easily execute your own logic when orientation needs to be considered/applied. Orientation Appliers are simple functions that receive 1 parameter: the current orientation in string form (the same as is returned from the orientation.getOrientation() method). Methods to add and remove Orientation Appliers, as well as examples, are supplied below.

    \n

    oprientationApplierCallback

    \n
    args.landscape = true | false
    \n
    args.object = the current page
    \n

    The callback receives the same arguments as the exports.orientation event in normal NativeScript.

    \n

    orientation.addOrientationApplier(orientationApplierCallback)

    \n

    This adds an Orientation Applier

    \n
    var MyModule = (function() {
      var orientation = require('nativescript-orientation');

      this.boundProperty = \"some value\";


      function myCallback(args) {
          if (args.landscape) {
            // Do something landscap-y
            return;
          }

          // Do something portrait-y
          // Assume this includes updating boundProperty on this module's scope.      
          this.boundProperty = \"a different value\";
      }

      orientation.addOrientationApplier(myCallback.bind(this));

      return {
        boundProperty: this.boundProperty
      };
    })();

    exports.MyModule = MyModule;
    \n

    orientation.removeOrientationApplier(orientationApplierCallback)

    \n

    This removes an Orientation Applier from the set of Orientation Appliers that will be executed.

    \n
    var MyModule = (function() {
      var orientation = require('nativescript-orientation');

     function myCallback(args) {
          if (args.landscape) {
            // Do something landscap-y
            return;
          }

          // Do something portrait-y
          // Assume this includes updating boundProperty on this module's scope.      
          this.boundProperty = \"a different value\";
      }

      var myOrientationApplier = myCallback.bind(this);
      orientation.addOrientationApplier(myOrientationApplier);

      // Somewhere later in your code...
      orientation.removeOrientationApplier(myOrientationApplier);

      return {
        boundProperty: this.boundProperty
      };
    })();

    exports.MyModule = MyModule;
    \n

    Two key things to remember when using this functionality:

    \n
      \n
    1. Use myCallback.bind(this) when adding your Orientation Applier (this preserves the correct 'this' scope for your callback method).
      2. \n
    2. In Nativescript Angular, the orientation change event does not trigger an Angular Change Detection cycle. Because of this you'll need to manually trigger Change Detection within your Orientation Applier by injecting ChangeDetectorRef from @angular/core into your Component and calling this.changeDetectorRef.detectChanges() from within your Orientation Applier;
      3. \n
    \n

    Contributors

    \n
      \n
    • Ashton Cummings
      • \n
    • Dick Smith
      • \n
    • Dimitar Tachev
      • \n
    • Emiel Beeksma
      • \n
    • Zsolt Racz
      • \n
    • Brad Linard
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":7}},"@approov/nativescript-approov":{"name":"@approov/nativescript-approov","version":"3.1.1","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":2,"lastWeek":4,"lastMonth":88}},"nativescript-ng2-parallax":{"name":"nativescript-ng2-parallax","version":"0.1.9","license":"MIT","readme":"

    #NativeScript Angular2 parallax view component

    \n

    \"npm\"\n\"npm\"

    \n

    \"NativeScript

    \n

    ###Install\n$ tns plugin add nativescript-ng2-parallax

    \n

    ###Example useage

    \n
    import {Component} from '@angular/core';

    // import parallaxView
    import {ParallaxView} from 'nativescript-ng2-parallax/nativescript-ng2-parallax';

    @Component({
    \tselector: 'app',
    \ttemplate: `
    \t<ActionBar title=\"NativeScript + Angular2 Parallax View\">
    \t</ActionBar>
    \t<parallax-view head-height=\"200\" [controls-to-fade]=\"['headerLabel','headerLabel2']\">
    \t\t<StackLayout class=\"header-template\" head>
    \t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
    \t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
    \t\t</StackLayout>
    \t\t<StackLayout class=\"body-template\" body>
    \t\t\t<Label id=\"titleLabel\" text=\"Angular 2 Parallax Template\"></Label>
    \t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

    \t\t\tUt at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.\"    >
    \t\t\t</TextView>
    \t\t</StackLayout>
    \t</parallax-view>
    \t`    ,
    \tdirectives: [
    \t\tParallaxView
    \t],
    \tstyles: [`
    \t\t#headerLabel2{
    \t\t\tfont-size: 45;
    \t\t\thorizontal-align: center;
    \t\t\tmargin-top:-25;
    \t\t\tcolor:#B2EBF2;
    \t\t}
    \t\t#headerLabel{
    \t\t\tfont-size: 45;
    \t\t\thorizontal-align: center;
    \t\t\tpadding-top:75;
    \t\t\tcolor:#B2EBF2;
    \t\t}
    \t\t.header-template{
    \t\t\tbackground-color:#212121;
    \t\t\tbackground-image:url('~/images/mountains.png');
    \t\t\tbackground-size:cover;
    \t\t\theight:250;
    \t\t}
    \t\t.body-template textview{
    \t\t\tfont-size:20;
    \t\t\tpadding:5 15;
    \t\t\tborder:none;
    \t\t}
    \t\t#titleLabel{
    \t\t\tfont-weight:bold;
    \t\t\tfont-size:30;
    \t\t\tpadding:5 15;

    \t\t}
    `    ]

    })
    class DemoComponent {
    \tpublic message: string = \"Your {N} + Angular 2 plugin is working.\"

    \tconstructor() { }
    }
    \n

    To use the parallax scroll view you need to have to containers inside of the <parallax-view></parallax-view> tag.\none container needs the head attribute and the other the body. In the above example they are both StackLayouts

    \n

    You can specify the head containers height with\n<parallax-view head-height="<VALUE>">

    \n

    If you have controls you want to fade out with the scroll of the head container their id's can be passed as array of strings like so:\n<parallax-view [controls-to-fade]="['control1','control2']">.

    \n

    Both the head-height and controls-to-fade are not required. If no head-height value is set then it defaults to 300.

    \n

    Special thanks to Nathan Walker for setting up the Angular 2 Plugin seed that I used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-ng2-plugin-seed

    \n

    Contributors

    \n\n

    ##License

    \n

    MIT

    \n","downloadStats":{"lastDay":7,"lastWeek":50,"lastMonth":115}},"nativescript-ui-calendar":{"name":"nativescript-ui-calendar","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI Calendar

    \n\n

    Overview

    \n

    Here are some of the features of the NativeScript UI Calendar:

    \n
      \n
    • different view modes: week, month, year and day
      • \n
    • support for appointments
      • \n
    • different selection modes: single, range, multiple
      • \n
    • animated transitions
      • \n
    • styling customizations
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-calendar
    \n

    Documentation

    \n

    More information about the plugin features is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":108,"lastWeek":1106,"lastMonth":4295}},"@nstudio/schematics":{"name":"@nstudio/schematics","version":"17.0.1","license":"MIT","readme":"

    Cross-platform (xplat) tools for Nx workspaces

    \n

    \n
    \n

    \"Build\n\"License\"\n\"NPM

    \n
    \n
    \n

    xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

    \n

    Currently supported platforms

    \n
      \n
    • Electron\n
      \n

      Build cross platform desktop apps with JavaScript, HTML, and CSS.

      \n
      \n
      • \n
    • Ionic\n
      \n

      Build amazing apps in one codebase, for any platform, with the web.

      \n
      \n
      • \n
    • NativeScript\n
      \n

      Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

      \n
      \n
      • \n
    \n

    Quickstart

    \n
    npx create-nx-workspace@latest

    ✔ Where would you like to create your workspace? · {your-workspace-name}

    # Choose \"None\"

    ? Which stack do you want to use? … 
    None:          Configures a minimal structure without specific frameworks or technologies.

    # Choose \"Integrated\"

    ? Package-based or integrated? … 
    Integrated:    Nx creates a workspace structure most suitable for building apps.
    \n

    Init workspace

    \n

    Install the @nx/js plugin.

    \n
    npm install @nx/js -D
    \n

    Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

    \n
    npx nx g @nx/js:init
    \n

    Install the tools:

    \n
    npm install @nstudio/xplat -D
    \n

    You are now ready to create apps:

    \n
    npx nx g @nstudio/xplat:app
    \n

    Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

    \n

    App generation examples

    \n

    The additional app generators can be used as follows:

    \n

    Electron

    \n

    Electron app generator can use any web app in the workspace as it's target.

    \n

    If you don't have a web app yet, create one first:

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose web

    \n
    \n

    You can now use the web app as the Electron target:

    \n
    npx nx g @nstudio/xplat:app desktop --target=web-sample
    \n
    \n

    choose electron

    \n
    \n

    Develop with:

    \n
    npm run start.electron.desktop
    \n

    Ionic

    \n
    npx nx g @nstudio/xplat:app sample
    \n
    \n

    choose ionic

    \n
    \n

    Develop in browser with:

    \n
    npx nx serve ionic-sample
    \n

    Build Ionic app:

    \n
    npx nx build ionic-sample
    \n

    A. Capacitor iOS - Prepare for development

    \n
    npm run prepare.ionic.sample.ios
    \n

    You can now open in Xcode for further development:

    \n
    npm run open.ionic.sample.ios
    \n

    B. Capacitor Android - Prepare for development

    \n
    npm run prepare.ionic.sample.android
    \n

    You can now open in Android Studio for further development:

    \n
    npm run open.ionic.sample.android
    \n

    NativeScript

    \n
    nx g @nstudio/xplat:app mobile
    \n
    \n

    choose nativescript

    \n
    \n

    A. iOS

    \n
    npx nx run nativescript-mobile:ios
    \n

    B. Android

    \n
    npx nx run nativescript-mobile:android
    \n

    Documentation

    \n\n

    Talks

    \n\n

    Recommended extra tooling

    \n\n

    Example repos for different scenarios

    \n
      \n
    • Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
      • \n
    • Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing
      • \n
    \n

    Context

    \n\n","downloadStats":{"lastDay":58,"lastWeek":646,"lastMonth":5386}},"@valor/nativescript-websockets":{"name":"@valor/nativescript-websockets","version":"1.0.5","license":"MIT","readme":"

    @valor/nativescript-websockets

    \n
    ns plugin add @valor/nativescript-websockets
    \n

    Usage

    \n

    To use this plugin simply add this to your polyfills.ts on angular (before importing zone.js) or on your entrypoint (app.ts, main.ts) on other flavors:

    \n
    import '@valor/nativescript-websockets';
    \n

    Beware that import order matters! If needed you can also add the plugin to your bundle directly with webpack.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":23,"lastWeek":120,"lastMonth":719}},"@nativescript-community/ui-neumorphiclayout":{"name":"@nativescript-community/ui-neumorphiclayout","version":"2.0.5","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    @nativescript-community/ui-neumorphiclayout

    \n

    A plugin that adds support for neumorphism styling to NativeScript layout containers.\n

    \n

    \n\n\n\n

    \n

    Installation

    \n
    ns plugin add @nativescript-community/ui-neumorphiclayout
    or
    npm i @nativescript-community/ui-neumorphiclayout
    \n

    Usage

    \n

    Importing plugin at startup is all it takes to add support for neumorphism styling to your application.

    \n

    NOTE: Scrollable views like ListView or ScrollView must NEVER be direct siblings of a view with neumorphism because of android clipChildren effect.\nInstead, add those views inside a layout container.

    \n

    Plain NativeScript

    \n

    TypeScript

    \n
    import { Application } from '@nativescript/core';
    import '@nativescript-community/ui-neumorphiclayout';

    Application.run({ moduleName: 'app-root' });
    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
        <Page.actionBar>
            <ActionBar title=\"Neumorphism\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>
        <StackLayout class=\"px-20\" backgroundColor=\"#e0e1e3\">
            <StackLayout verticalAlignment=\"center\" width=\"200\" height=\"200\" marginTop=\"30\" neumorphism=\"convex\" fillColor=\"#e0e1e3\" lightShadowColor=\"#ffffff\" darkShadowColor=\"#bebfc1\" cornerRadius=\"100\">
                <Label text=\"Tap me!\" textAlignment=\"center\" fontSize=\"24\" color=\"#6d707d\" fontWeight=\"bold\"/>
            </StackLayout>
        </StackLayout>
    </Page>
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefaultDescription
    neumorphismstringnullDetermines the view neumorphism styling. Possible types: flat, concave, convex, pressed, pressed-in-out.
    touchStatestrubgnullDetermines the view neumorphism styling for tap effect.
    fillColorColor#ffffffDetermines the color that view will use to set background color.
    lightShadowColorColor#ffffffDetermines the color that view will use to set light shadow color.
    darkShadowColorColor#d9d9d9Determines the color that view will use to set dark shadow color.
    cornerRadiusnumber0Determines the rounding of the view corners.
    shadowDistancenumber10Determines the offset of the view shadows. The value is subtracted from the offset of the first shadow and added to the offset of the second one.
    shadowRadiusnumbershadowDistance*2Determines the radius for the view shadows.
    isTouchedbooleanfalseA flag indicating whether view is currently touched or not.
    \n

    About

    \n

    This plugin adds support for neumorphism styling to NativeScript layout containers. It also includes basic gesture support for tap effect.

    \n

    Its functionality is inspired by Neumorphism.io.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":221}},"@nativescript/capacitor":{"name":"@nativescript/capacitor","version":"5.0.2","license":"Apache-2.0","readme":"

    @nativescript/capacitor

    \n

    NativeScript for Capacitor

    \n

    Install

    \n
    yarn add @nativescript/capacitor
    yarn build:mobile
    npx cap sync
    \n

    Docs

    \n

    See https://capacitor.nativescript.org/

    \n

    Contribute to docs here

    \n","downloadStats":{"lastDay":44,"lastWeek":467,"lastMonth":2483}},"nativescript-clipboard":{"name":"nativescript-clipboard","version":"2.1.1","license":"MIT","readme":"

    NativeScript Clipboard

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    A NativeScript plugin to copy and paste data from and to the device clipboard.

    \n
    \n

    💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.0.

    \n
    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-clipboard
    \n

    Usage

    \n
    \n

    TIP: Check out the demo app for TypeScript examples.

    \n
    \n

    To use this plugin you must first require() it:

    \n
    var clipboard = require(\"nativescript-clipboard\");
    \n

    setText

    \n
      clipboard.setText(\"Something relevant to put on the clipboard.\").then(function() {
          console.log(\"OK, copied to the clipboard\");
      })
    \n

    setTextSync

    \n

    This is the synchronous version of setText, available since plugin version 1.2.0.

    \n
      clipboard.setTextSync(\"Something relevant to put on the clipboard.\");
    \n

    getText

    \n
      clipboard.getText().then(function(content) {
          console.log(\"Read from clipboard: \" + content);
      })
    \n

    getTextSync

    \n

    This is the synchronous version of getText, available since plugin version 1.2.0.

    \n
      var content = clipboard.getText();
      console.log(\"Read from clipboard: \" + content);
    \n

    Future work

    \n

    Implement support for storing data (image, etc) on the clipboard. Open an issue or PR in case you like to have that.

    \n","downloadStats":{"lastDay":136,"lastWeek":832,"lastMonth":3159}},"@nativescript/template-blank-svelte":{"name":"@nativescript/template-blank-svelte","version":"8.6.1","license":"Apache-2.0","readme":"

    NativeScript Core with Svelte Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-svelte --template @nativescript/template-blank-svelte
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-svelte --template nativescript-app-templates/packages/template-blank-svelte
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":9,"lastWeek":158,"lastMonth":784}},"svelte-native":{"name":"svelte-native","version":"1.0.9","license":"MIT","readme":"

    Svelte Native

    \n

    Create Mobile applications using native widgets via Svelte and NativeScript.

    \n

    See https://svelte-native.technology for docs and tutorials

    \n

    \"todo

    \n

    Features

    \n

    Svelte-Native includes Svelte specific integrations such as

    \n
      \n
    • The ability to use svelte components to create native applications on top of NativeScript core
      • \n
    • Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
      • \n
    • Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
      • \n
    • Integration with sveltes scoped styles
      • \n
    • Complete coverage of the Nativescript core UI modules
      • \n
    • Uses unmodified Svelte and Nativescript modules
      • \n
    \n

    Work In Progress

    \n

    While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

    \n
      \n
    • [x] At least 1 emoji in readme.md :+1:
      • \n
    • [ ] More Tests 😳 #54
      • \n
    \n

    Installation

    \n

    You can get started developing with this using the latest template

    \n
    $ npm install -g nativescript
    $ tns create myapp --template @nativescript/template-blank-svelte
    \n

    A fresh Svelte Native app will be found in the myapp folder

    \n

    Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

    \n

    Usage

    \n

    App.svelte

    \n
    <page>
        <actionBar title=\"Svelte Native\"></actionBar>
        <stackLayout>
            <label text={msg}></label>
            <button text=\"Change\" on:tap=\"{toggle}\"></button>
        </stackLayout>
    </page>

    <script>
      export let msg = 'Hello World!'
      const toggle = () => {
          msg = \"Hi from svelte\"
      }
    </script>
    \n

    Main.ts

    \n
    import App from './components/App.svelte';

    import { svelteNative } from 'svelte-native'

    svelteNative(App, {msg: \"Hi from launcher\"});
    \n

    Examples

    \n

    Svelte Native HackerNews

    \n

    Simple HackerNews client in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-hackernews for the repo.

    \n

    \"HackerNews

    \n

    Svelte Native Grocery

    \n

    Grocery app example in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-grocery for the repo.

    \n

    \"Grocery

    \n

    Svelte Native Realworld

    \n

    Realworld implementation app in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-realworld for the repo.

    \n

    \"Realworld

    \n

    Credits

    \n

    The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

    \n","downloadStats":{"lastDay":24,"lastWeek":259,"lastMonth":1294}},"nativescript-uxcam":{"name":"nativescript-uxcam","version":"1.0.2","license":"MIT","readme":"

    NativeScript UXCam

    \n

    Installation

    \n

    tns plugin add nativescript-uxcam

    \n

    NB: UXCam on iOS needs a minimum version of iOS 11.0

    \n

    Usage

    \n

    Setup

    \n
    import { NSUXCam } from 'nativescript-uxcam';

    NSUXCam.optIntoSchematicRecordings();
    const blur = {
          'type': 3,
          'hideGestures': true,
          'blurRadius': 20,
          'screens': ['Home Screen']
        }

    var config = {
            'userAppKey': '<your-app-key>',
            'occlusions': [blur]
        }
         
    NSUXCam.startWithConfiguration(config);
    \n

    Hiding sensitive view

    \n
    const sensitiveView = page.getViewById(\"<id-of-sensitive-view>\");
    NSUXCam.occludeSensitiveView(sensitiveView);

    // Angular - replace <elementRefToOcclude> with your element reference after page is loaded
    const sensitiveView = this.
    <elementRefToOcclude>.nativeElement;
        NSUXCam.occludeSensitiveView(sensitiveView);
    \n

    Event logging

    \n
    // log event
    NSUXCam.logEvent(\"<Event name>\");

    // log event with properties
    NSUXCam.logEventWithProperties(\"<Event name>\", {
        \"prop-key\": \"<prop-value>\"
    });
    \n

    Manual Screen Name Tagging

    \n
    import { HostListener } from \"@angular/core\";

    @HostListener('loaded')
      pageOnInit() {
        NSUXCam.tagScreenName(\"<screen-name>\");
      }
    \n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":1115}},"@nativescript-community/texttospeech":{"name":"@nativescript-community/texttospeech","version":"3.1.2","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    @nativescript-community/texttospeech :loudspeaker:

    \n

    A Text to Speech NativeScript plugin for Android & iOS

    \n

    Native Controls

    \n\n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @nativescript-community/texttospeech
    \n

    This command automatically installs the necessary files, as well as stores @nativescript-community/texttospeech as a dependency in your project's package.json file.

    \n

    Video Tutorial

    \n

    egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

    \n

    Usage

    \n
    /// javascript
    const TextToSpeech = require('@nativescript-community/texttospeech');

    /// TypeScript
    import { TNSTextToSpeech, SpeakOptions } from '@nativescript-community/texttospeech';

    const TTS = new TNSTextToSpeech();

    const speakOptions: SpeakOptions = {
        text: 'Whatever you like', /// *** required ***
        speakRate: 0.5, // optional - default is 1.0
        pitch: 1.0, // optional - default is 1.0
        volume: 1.0, // optional - default is 1.0
        locale: 'en-GB', // optional - default is system locale,
        finishedCallback: Function, // optional
    };

    // Call the `speak` method passing the SpeakOptions object
    TTS.speak(speakOptions).then(
        () => {
            // everything is fine
        },
        (err) => {
            // oops, something went wrong!
        }
    );
    \n

    API

    \n
      \n
    • \n

      speak(options: SpeakOptions): Promise<any> - start speaking with the given options

      \n
      • \n
    • \n

      pause(): void - pause the speech

      \n
      • \n
    • \n

      resume(): void - resume the speech

      \n
      • \n
    • \n

      destroy(): void - release resources for the speech synthesizer/engine

      \n
      • \n
    • \n

      SpeakOptions = {}

      \n
        \n
      • text: string ** required **
        • \n
      • queue?: boolean = false
        • \n
      • pitch?: number = 1.0
        • \n
      • speakRate?: number = 1.0
        • \n
      • volume?: number = 1.0
        • \n
      • locale?: string = default system locale or language
        • \n
      • finishedCallback?: Function
        • \n
      \n
      • \n
    \n

    If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code.

    \n

    The plugin checks whether the supplied locale code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

    \n

    Example with language code only:

    \n
    const speakOptions: SpeakOptions = {
        text: 'Whatever you like', // *** required ***
        locale: 'en', // english language will be used
    };
    \n

    Example with locale:

    \n
    const speakOptions: SpeakOptions = {
        text: 'Whatever you like', // *** required ***
        locale: 'en-AU', // australian english language will be used
    };
    \n

    Tip

    \n
      \n
    • The speech synthesizer takes a moment to initialize on most devices. A simple way to get around this (tested in the demo app) is to create your new instance of the TNSTextToSpeech and then immediately call the init method . This will force the synthesizer to "warm up" . Now when you call the speak method for your app's functionality it will already have "warmed up" the synthesizer so the delay should be minimal.\nIt's possible this "Warm up" process could be put into the plugin source itself, I don't have time to do it right now but welcome any contribution that is well tested to make this the default behavior of the synthesizers.
      • \n
    \n

    Android Only Methods

    \n
      \n
    • getAvailableLanguages(): Promise<Array<Language>>; - returns an array of available languages (use to prevent using non-existing language/local codes)
      • \n
    \n

    Credits

    \n

    Inspired by James Montemagno's TextToSpeech Xamarin plugin

    \n

    Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

    \n","downloadStats":{"lastDay":12,"lastWeek":22,"lastMonth":323}},"nativescript-toolbox":{"name":"nativescript-toolbox","version":"3.0.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-toolbox/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Toolbox

    \n

    A NativeScript module that is a composition of useful classes, tools and helpers.

    \n

    The module contains the following sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    crypto-jsLibrary of crypto standards.
    JS-YAMLYAML 1.2 parser / writer.
    markdownMarkdown parser.
    MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
    nativescript-apiclientSimply call HTTP based APIs.
    nativescript-batchImplement batch operations.
    nativescript-bitmap-factoryCreate and manipulate bitmap images.
    nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
    nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
    nativescript-lazyProvides an OOP version of the build-in lazy function.
    nativescript-routed-valuesImplement routed value graphs.
    nativescript-sqlite (free)Provides sqlite actions.
    nativescript-stringformatHelpers for handling strings.
    nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-toolbox
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import Toolbox = require('nativescript-toolbox');
    \n

    The module provides the following function that are short hands for the included sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
    asBitmapReturns a value as bitmap object.
    asEnumerableReturns a value as sequence.
    createBitmapCreates a new bitmap.
    decryptDecrypts a value / an object with AES.
    encryptEncrypts a value / an object with AES.
    formatFormats a string.
    formatArrayFormats a string.
    fromMarkdownConverts Markdown code.
    fromXmlAlias for 'parseXml'.
    fromYamlAlias for 'parseYaml'.
    getApplicationContextReturns the current application context.
    getClipboardReturns an object that handles the clipboard of the device.
    getNativeViewReturns the native view of the app.
    getOrientationGets the current orientation of the device (based on nativescript-orientation).
    getPlatformReturns information of the current platform.
    getValueTries to return a value / object that is stored in the application settings.
    guidAlias for 'uuid'.
    hashGeneric hash function.
    hasValueChecks if a value / object is stored in the application settings.
    hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
    invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    invokeForOrientationInvokes a callback for specific orientation mode.
    invokeForPlatformInvokes an action for a specific platform.
    isEnumerableChecks if a value is a sequence.
    keepAwakeKeeps the device awake (based on nativescript-insomnia).
    markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
    markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
    md5Hashes a value with MD5.
    newBatchCreates a new batch.
    newClientCreates a new API client.
    nowGets the current time.
    openDatabaseOpens a (SQLite) database (connection).
    openUrlOpen an URL on the device.
    openWifiSettingsOpens the WiFi settings on the device.
    parseXmlParses a XML string to an object.
    parseYamlParses YAML data to an object.
    removeValueRemoves a value / object that is stored in the application settings.
    setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
    setValueStores a value / object in the application settings.
    sha1Hashes a value with SHA-1.
    sha256Hashes a value with SHA-256.
    sha3Hashes a value with SHA-3.
    sha384Hashes a value with SHA-384.
    sha512Hashes a value with SHA-512.
    showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
    startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    toYamlConverts an object / a value to YAML.
    uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
    vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
    \n

    Sub modules

    \n

    crypto-js

    \n

    Here are some examples of common algorithms:

    \n
    Encrypters
    \n
    var AES = require(\"nativescript-toolbox/crypto-js/aes\");
    \n
    Hashes
    \n
    var MD5 = require('nativescript-toolbox/crypto-js/md5');
    var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
    var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
    var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
    var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
    var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
    \n

    JS-YAML

    \n
    var YAML = require('nativescript-toolbox/js-yaml');
    \n

    markdown

    \n
    var Markdown = require('nativescript-toolbox/markdown').markdown;

    var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                              'Maruku');
    var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                               'Maruku');
    \n

    Moment

    \n
    import Moment = require('nativescript-toolbox/moment');
    \n

    nativescript-apiclient

    \n
    import ApiClient = require('nativescript-toolbox/apiclient');
    \n

    nativescript-batch

    \n
    import Batch = require('nativescript-toolbox/batch');
    \n

    nativescript-bitmap-factory

    \n
    import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
    \n

    nativescript-email

    \n
    import Email = require('nativescript-toolbox/email');
    \n

    nativescript-enumerable

    \n
    import Enumerable = require('nativescript-toolbox/enumerable');
    \n

    nativescript-lazy

    \n
    import Lazy = require('nativescript-toolbox/lazy');
    \n

    nativescript-routed-values

    \n
    import RoutedValues = require('nativescript-toolbox/routed-values');
    \n

    nativescript-sqlite

    \n
    var SQLite = require('nativescript-toolbox/sqlite');
    \n

    nativescript-stringformat

    \n
    import StringFormat = require('nativescript-toolbox/stringformat');
    \n

    nativescript-xmlobjects

    \n
    import XmlObjects = require('nativescript-toolbox/xmlobjects');
    \n","downloadStats":{"lastDay":5,"lastWeek":118,"lastMonth":374}},"@arepa/country-code":{"name":"@arepa/country-code","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript country-code.

    \n\n \"npm\"\n\n

    @arepa/country-code

    \n
    ns plugin add @arepa/country-code
    \n

    Usage

    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    getCurrentPais(addPlus:boolean)Returns a Promise country, code, numCell (numCell only for Android).
    listaCodigosReturns an array with the countries' name, name, nom, iso2, iso3, code, flag.
    showListPaisesOpen a modal with a search box and a list of countries. Returns the selected item.
    \n","downloadStats":{"lastDay":2,"lastWeek":11,"lastMonth":226}},"nativescript-esc-pos":{"name":"nativescript-esc-pos","version":"1.2.9","license":"Apache-2.0","readme":"

    nativescript-esc-pos

    \n

    This plugin provides nativescript applications the ability to interact with thermal printers using ESC / POS protocol.

    \n

    Currently it only connects to printers made by HRPT. Only supports Android 4+ at the moment.

    \n

    Based on

    \n

    https://github.com/ebc81/Esc_pos_android

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-esc-pos
    \n

    Usage

    \n

    Please review the source code under 'src/esc-pos.android.ts' for all android functionality.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":7}},"@nativescript-community/ui-material-core":{"name":"@nativescript-community/ui-material-core","version":"7.2.4","license":"Apache-2.0","readme":"

    Nativescript Material Core

    \n

    Core module for all Nativescript material components

    \n","downloadStats":{"lastDay":336,"lastWeek":2586,"lastMonth":12145}},"@arepa/launch-navigator":{"name":"@arepa/launch-navigator","version":"1.0.1","license":"Apache-2.0","readme":"

    launch-navigator

    \n\n \"npm\"\n\n

    @arepa/launch-navigator

    \n
    npm install @arepa/launch-navigator
    \n

    Usage

    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    checkInstalledApp(packageName: string or SupportedApps)Checks if the app is installed on Android (com.id.pack) or iOS (urlscheme://). You can also use SupportedApps, which returns a boolean.
    openGoogleMaps(OpcionesGoogleMaps)Opens the Google Maps app. Returns a Promise.
    openWaze(OpcionesWaze)Opens the Waze app. Returns a Promise.
    openBaidumap(OpcionesBaidumap)Opens the BaiduMap app. Returns a Promise.
    openAppleMaps(OpcionesAppleMaps)Opens the Apple Maps app. Returns a Promise.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    SupportedApps
    Google MapAndroid e iOS
    WazeAndroid e iOS
    Apple MapsiOS
    \n

    Response

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    errorBoolean. Indicates whether an error occurred or not.
    errorTextString error message.
    \n

    TransporteGoogleMaps

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    DRIVING
    WALKING
    BICYCLING
    TRANSIT
    \n

    Options

    \n

    OpcionesGoogleMaps

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    daddrstring or ArrayDestination address
    saddr?string or ArrayStarting address
    modoTransporteTransporteGoogleMapsTransportation type
    tipoMapaTURN_BY_TURN or MAPSIf it's TURN_BY_TURN on Android, it will start navigation automatically
    avoid?stringSets characteristics the route should try to avoid. Values "t", "h", or "f"
    \n

    OpcionesWaze

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    destinostring or ArrayDestination address
    navigatestringValues yes or `no, starts or doesn't start navigation in the Waze app
    \n

    OpcionesAppleMaps

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescrDescriptionipción
    tipostringValues s, k, h, or r. Map type transit, standard, etc.
    daddrstring or ArrayDestination address
    saddrstring or ArrayStarting address
    dirflgstringValues d, w, or r. Transportation mode
    \n

    Ejemplos

    \n

    Verificar si la app esta instalada

    \n
    checkAppInstalada(AppsSoportadas.WAZE o AppsSoportadas.APPLE_MAPS o AppsSoportadas.BAIDUMAP o AppsSoportadas.GOOGLE_MAPS): boolean
    \n

    Google Maps

    \n
    openGoogleMaps({
      daddr:\"Maracay aragua venezuela\",
      modoTransporte:TransporteGoogleMaps.DRIVING,
      tipoMapa:\"TURN_BY_TURN\",
      saddr:\"Villa de cura aragua venezuela\",
      avoid:\"fth\"
     }).then((res)=>{
      //Ok
     }).catch((err)=>{
      //Error
     })
    \n

    Waze

    \n
    openWaze({
      destino:\"tia el recreo quito pichincha ecuador\",
      navigate:\"yes\"
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    })
    \n

    Apple Maps solo para iOS

    \n
    openAppleMaps({
      daddr:\"Tia el recreo quito ecuador\",
      dirflg:\"d\",
      tipo:\"s\",
      saddr:\"Maracay aragua veneuzela\",
    }).then((res)=>{
      console.log(res);
    }).catch((err)=>{
      console.log(err);
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":85}},"nativescript-imagepicker":{"name":"nativescript-imagepicker","version":"7.1.0","license":"Apache-2.0","readme":"

    NativeScript Image Picker \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Imagepicker plugin supporting both single and multiple selection.\n
    Plugin supports iOS8+ and uses QBImagePicker cocoa pod.\n
    For Android it uses Intents to open the stock images or file pickers. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required. See demo for implementation details.

    \n\n\n\n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-imagepicker
    tns run
    \n

    Configuration

    \n

    No additional configuration required!

    \n

    Migrating from 5.x.x to 6.x.x

    \n

    With version 6.x.x the dependency to the nativescript-ui-listview plugin is removed and for iOS the QBImagePicker cocoa pod is used. Now the plugin supports some new features, fixes some bugs and has a more native look in iOS. You should remove any dependencies to nativescript-pro-ui, nativescript-ui-listview, etc. in case you've added them in your app specifically for this plugin. Also the options fileUri, doneText, cancelText, albumsText, newestFirst and the methods cancel() and done() are no longer applicable. The image picker now returns the basic {N} ImageAsset class (and not custom asset as before). If you have been using the fileUri property of the returned assets to get a file path in versions prior to 6.x.x, you should refer to the following issue comment for an alternative way to get the path - https://github.com/NativeScript/nativescript-imagepicker/issues/181#issuecomment-384585293.

    \n

    Migrating from 4.x.x to 5.x.x

    \n

    With version 5.x.x major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the nativescript-ui-listview plugin (part of the NativeScript Pro UI components). Recently the monolithic NativeScript Pro UI plugin was split in multiple plugins, each of them representing a single component. Now, instead of the monolithic package, nativescript-imagepicker uses only the component it needs. To use version 5.x.x of the plugin, you need to update any dependencies to nativescript-pro-ui in your project with the single component alternatives as described in the migration guide.

    \n

    Migrating from 3.x.x to 4.x.x

    \n

    With the 4.x.x major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the nativescript-pro-ui plugin (previously known as nativescript-telerik-ui) which has bee updated and made 100% free. This means that if your project is using the deprecated nativescript-telerik-ui/pro plugins adding the latest version of the nativescript-imagepicker plugin will cause your project to throw an build error when working with iOS. This is because the nativescript-imagepicker has a dependency to the new nativescript-pro-ui plugin and when your project also depends on the old nativescript-telerik-ui plugin there is a native frameworks collision.

    \n

    In order to solve this you simply have to update to the latest nativescript-pro-ui, more details on how to migrate from nativescript-telerik-ui/pro to nativescript-pro-ui can be found here.

    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect both demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.\nIn demo-angular is the usage in an Angular app. Refer to demo-angular/app/app.component.ts.

    \n

    In addition to the plugin usage, both apps are webpack configured.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import * as imagepicker from \"nativescript-imagepicker\";
    \n

    Javascript

    \n
    var imagepicker = require(\"nativescript-imagepicker\");
    \n

    Create imagepicker

    \n

    Create imagepicker in single or multiple mode to specifiy if the imagepicker will be used for single or multiple selection of images

    \n

    TypeScript

    \n
    let context = imagepicker.create({
        mode: \"single\" // use \"multiple\" for multiple selection
    });
    \n

    Javascript

    \n
    var context = imagepicker.create({ mode: \"single\" }); // use \"multiple\" for multiple selection
    \n

    Request permissions, show the images list and process the selection

    \n
    context
        .authorize()
        .then(function() {
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                // process the selected image
            });
            list.items = selection;
        }).catch(function (e) {
            // process error
        });
    \n
    \n

    NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

    \n
    \n
    \n

    NOTE: Using the plugin on iOS requres photo library permission. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

    \n
    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Description text goes here</string>
    \n

    API

    \n

    Methods

    \n
      \n
    • create(options) - creates instance of the imagepicker. Possible options are:
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionPlatformDefaultDescription
    modebothmultipleThe mode if the imagepicker. Possible values are single for single selection and multiple for multiple selection.
    minimumNumberOfSelectioniOS0The minumum number of selected assets.
    maximumNumberOfSelectioniOS0The maximum number of selected assets.
    showsNumberOfSelectedAssetsiOSTrueDisplay the number of selected assets.
    promptiOSundefinedDisplay prompt text when selecting assets.
    numberOfColumnsInPortraitiOS4Set the number of columns in Portrait orientation.
    numberOfColumnsInLandscapeiOS7Set the number of columns in Landscape orientation.
    mediaTypebothAnyChoose whether to pick Image/Video/Any type of assets.
    showAdvancedAndroidfalseShow internal and removable storage options on Android (WARNING: not supported officially).
    \n

    The hostView parameter can be set to the view that hosts the image picker. Applicable in iOS only, intended to be used when open picker from a modal page.

    \n
      \n
    • authorize() - request the required permissions.
      • \n
    • present() - show the albums to present the user the ability to select images. Returns an array of the selected images.
      • \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":10,"lastWeek":120,"lastMonth":516}},"@nativescript/firebase-core":{"name":"@nativescript/firebase-core","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-core

    \n

    A plugin to initialize FirebaseApp in your app.

    \n

    Use this plugin with any of the following plugins:

    \n\n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-core
    \n

    Configure Firebase for Android

    \n

    To configure Firebase for Android, see Add Firebase to your Android project and follow the steps below.

    \n\n

    Configure Firebase for iOS

    \n

    To set up Firebase for iOS, see Add Firebase to your Apple project and follow the steps below:

    \n\n

    Use @nativescript/firebase-core

    \n

    🚨 Plugin requires both @nativescript/firebase-core and any other @nativescript/firebase-* plugin to successfully initialize.

    \n

    Instantiate Firebase and initialize a default app

    \n

    Import the firebase function and call it to create a NativeScript Firebase instance. Next, call the initializeApp method on the Firebase instance to instantiate the native FirebaseApp.

    \n
    import { firebase } from '@nativescript/firebase-core'
    const defaultApp = await firebase().initializeApp();
    \n

    Initialize Secondary App

    \n
    import { firebase, FirebaseOptions } from '@nativescript/firebase-core'
    const config = new FirebaseOptions()
    const secondaryApp = await firebase().initializeApp(config, 'SECONDARY_APP');
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":229,"lastWeek":1219,"lastMonth":7121}},"@nativescript/firebase-analytics":{"name":"@nativescript/firebase-analytics","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-analytics

    \n\n

    Intro

    \n

    This plugin allows you to add Google Analytics for Firebase\nto your app.

    \n
    \n

    Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase in your app.

    \n
    \n

    Analytics collects usage and behavior data for your app. Its two primary concerns are:

    \n
      \n
    • \n

      Events: These are events that occur in your app, such as user actions, system events, or errors. Google Analytics collects information for 3 types of events: Automatically collected, Recommended and Custom events.

      \n
      • \n
    • \n

      user properties: Attributes you define to describe segments of your user base, such as language preference or geographic location.

      \n
      • \n
    \n

    \"image\"

    \n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-analytics
    \n

    Use @nativescript/firebase-analytics

    \n

    The examples below show you how to use @nativescript/firebase-analytics to log custom and predefined events.

    \n

    Log custom events

    \n

    Analytics also allows developers to log custom events. If you're already familiar with Google Analytics, this method is equivalent to using the event command in gtag.js.

    \n

    To log a custom event to Analytics, call the logEvent method on an instance of the Analytics class passing it the name of the custom event as the first argument and the event data object as the second argument.

    \n

    Please be aware that primitive data types or arrays of primitive data types are logged in your Firebase Analytics console.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-analytics';

    firebase()
    \t.analytics()
    \t.logEvent('basket', {
    \t\tid: 3745092,
    \t\titem: 'mens grey t-shirt',
    \t\tdescription: ['round neck', 'long sleeved'],
    \t\tsize: 'L',
    \t});
    \n

    After calling logEvent, look for your event name in the Analytics Realtime data to see if it's logged.

    \n

    Log Predefined Events

    \n

    To help you get started, Google Analytics automatically logs events that are common among different types of apps, including retail and e-commerce, travel, and gaming apps.

    \n

    To log a predefined event, call the logEvent method on the Analytics class instance passing it the event name and the event data object.

    \n

    The following example demonstrates logging the select_content event.

    \n
    import { firebase } from '@nativescript/firebase-core';

    // Logs in the firebase analytics console as \"select_content\" event
    // only accepts the two object properties which accept strings.
    firebase().analytics().logEvent('select_content', {
    \tcontent_type: 'clothing',
    \titem_id: 'abcd',
    });
    \n

    After calling logEvent, look for your event name in the Analytics Realtime data to see if it's logged.

    \n

    Reserved Events

    \n

    In Analytics, the names of the automatically logged events are referred to as Reserved Events. Creating custom events with those names results in an error. Below are some of the Reserved Events names:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Reserved Events Names
    app_clear_data
    error
    first_open_time
    notification_dismiss
    notification_receive
    screen_view
    ad_click
    adunit_exposure
    \n

    For more Reserved event names, visit Event naming rules.

    \n

    Get the app instance id

    \n

    To get the app instance id of the application, call the getAppInstanceId method. This returns null on Android if ConsentType.Analytics_Storage = ConsentStatus.Denied.

    \n
    import { firebase } from '@nativescript/firebase-core';

    const appInstanceId = firebase().analytics().getAppInstanceId();
    \n

    Disable Identifier for Advertisers usage with analytics on iOS

    \n

    Apple strictly bans an app from being in the Kids category if the app accesses Identifier for Advertisers(IDFA) iOS symbols.

    \n

    Additionally, if an app accesses IDFA iOS symbols, it must implement Apple's App Tracking Transparency(or ATT). However, if an app does not use IDFA and otherwise handles data in an ATT-compatible way, it eliminates this ATT requirement.

    \n

    If you need to avoid IDFA usage while still using analytics, define the following variable in your Podfile:

    \n
    $NSFirebaseAnalyticsWithoutAdIdSupport = true
    \n

    During pod install, using that variable installs a new Analytics With No Ad Ids pod that the firebase-ios-sdk team created, and allows both the use of Firebase Analytics in Kids Category apps and Firebase Analytics without needing the App Tracking Transparency handling (assuming no other parts of your app handles data in a way that requires ATT)

    \n
    \n

    Note that configuring Firebase Analytics for use without IDFA is incompatible with AdMob.

    \n
    \n

    Demo app

    \n

    You can find the demo app here.

    \n

    Analytics class

    \n

    The plugin offers you the Analytics class through which you can manage Firebase Analytics.\nThe Analytics class has the following properties and methods.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    appInstanceIdstring
    \n

    logEvent()

    \n
    firebase().analytics()
    \t\t.logEvent(name, parameters)
    \n

    Sends the specified event data to Google Analytics.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    namestringThe name of the event to log.
    parametersEventParameterAn object specifying the event data. For the list of supported properties for parameters for a Reserved event, visit FirebaseAnalytics.Param Constants Summary.
    \n
    \n

    setUserId()

    \n
    firebase().analytics().setUserId(userId)
    \n

    Allows you to store a user ID for the individual using your app. Read more about setting user ID here.

    \n
    \n

    resetAnalyticsData()

    \n
    firebase().analytics().resetAnalyticsData()
    \n

    See the description here.

    \n
    \n

    setAnalyticsCollectionEnabled()

    \n
    firebase().analytics().setAnalyticsCollectionEnabled(analyticsCollectionEnabled: boolean)
    \n

    A method used to manually disable or enable the collection of analytics data.

    \n
      \n
    • analyticsCollectionEnabled: A boolean value. If set to true analytics data is collected. If set to false analytics collection is disabled.
      • \n
    \n
    \n

    setUserProperty()

    \n
    firebase().analytics().setUserProperty(name: string, value: string)
    \n

    Sets a user property. For more details, see Set user properties.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    namestringThe name of the user property to set.
    valuestringThe value of the user property.
    \n
    \n

    setSessionTimeoutInterval()

    \n
    firebase().analytics().setSessionTimeoutInterval(sessionTimeoutInterval: number)
    \n

    For the description, see setSessionTimeoutDuration.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    sessionTimeoutIntervalnumberThe duration of inactivity, in milliseconds. Defaults to 1800000 (30 minutes).
    \n
    \n

    setDefaultEventParameters()

    \n
    firebase().analytics().setDefaultEventParameters(parameters)
    \n

    Read the description here.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    parametersEventParameterParameters object. For the list of supported properties for parameters for a Reserved event, visit FirebaseAnalytics.Param Constants Summary.
    \n

    EventParameter

    \n
    interface EventParameter {
    \t[key: string]: any;
    }
    \n
    \n

    setConsent()

    \n
    firebase().analytics().setConsent(consentSettings)
    \n

    See the description here.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    consentSettingsMap<ConsentType,ConsentStatus>
    \n

    ConsentType

    \n
    enum ConsentType {
    \tAd_Storage,
    \tAnalytics_Storage,
    }
    \n

    ConsentStatus

    \n
    enum ConsentStatus {
    \tDenied,
    \tGranted,
    }
    \n
    \n

    handleOpenURL()

    \n
    firebase().analytics().handleOpenURL(url)
    \n

    (iOS-specific)Handles the event when the app is launched by a URL.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    urlstringThe URL from which to open the app.
    \n
    \n

    handleUserActivity()

    \n
    firebase().analytics().handleUserActivity(userActivity)
    \n

    (iOS-specific)Handles the event when the app receives data associated with user activity that includes a Universal Link (on iOS 9.0 and above).

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    userActivityanyThe URL from which to open the app.
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":156,"lastWeek":749,"lastMonth":4994}},"@benedictstrube/ui-mapbox":{"name":"@benedictstrube/ui-mapbox","version":"1.2.7","license":"MIT","readme":"\n\n

    @benedictstrube/ui-mapbox

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Prerequisites

    \n

    You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

    \n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @benedictstrube/ui-mapbox

    \n

    \n

    Configuration

    \n

    Add any other additional configuration instructions here.

    \n

    \n

    Issues

    \n

    If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\nns platform remove ios and ns platform add ios.

    \n

    On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

    \n
      <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
    \n

    If you get an error related to TelemetryService then please check it's there.

    \n

    \n

    Usage

    \n

    XML

    \n

    You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

    \n

    A simple layout could look like this:

    \n\n

    Could be rendered by a definition like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"@nativescript-community/ui-mapbox\" navigatingTo=\"navigatingTo\">
      <StackLayout>
        <Label text=\"Nice map, huh!\" class=\"title\"/>
        <ContentView height=\"240\" width=\"240\">
          <map:MapboxView
              accessToken=\"your_token\"
              mapStyle=\"traffic_night\"
              latitude=\"52.3702160\"
              longitude=\"4.8951680\"
              zoomLevel=\"3\"
              showUserLocation=\"true\"
              mapReady=\"onMapReady\">
          </map:MapboxView>
        </ContentView>
      </StackLayout>
    </Page>
    \n

    Angular

    \n

    Component:

    \n
    import { registerElement } from '@nativescript/angular';
    registerElement(\"Mapbox\", () => require(\"@nativescript-community/ui-mapbox\").MapboxView);
    \n

    View:

    \n
      <ContentView height=\"100%\" width=\"100%\">
        <Mapbox
            accessToken=\"your_token\"
            mapStyle=\"traffic_day\"
            latitude=\"50.467735\"
            longitude=\"13.427718\"
            hideCompass=\"true\"
            zoomLevel=\"18\"
            showUserLocation=\"false\"
            disableZoom=\"false\"
            disableRotation=\"false\"
            disableScroll=\"false\"
            disableTilt=\"false\"
            (mapReady)=\"onMapReady($event)\">
        </Mapbox>
      </ContentView>
    \n

    \n

    API

    \n

    All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondefaultdescription
    accesstoken-see 'Prerequisites' above
    delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
    mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
    latitude -Set the center of the map by passing this in
    longitude-.. and this as well
    zoomLevel00-20
    showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
    hideCompass falseDon't show the compass in the top right corner during rotation of the map
    hideLogofalseMapbox requires false if you're on a free plan
    hideAttribution trueMapbox requires false if you're on a free plan
    disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
    disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
    disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
    disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    moveBeginEvent-The name of a function to be called when the map has begun to move.
    moveEndEvent-The name of a function to be called when the map has completed moving.
    locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
    locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
    \n

    \n

    Markers

    \n

    This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

    \n

    Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

    \n
    var mapbox = require(\"@nativescript-community/ui-mapbox\");

    function onMapReady(args) {
      // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
      var nativeMapView = args.ios ? args.ios : args.android;
      console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

      // .. or use the convenience methods exposed on args.map, for instance:
      args.map.addMarkers([
        {
          lat: 52.3602160,
          lng: 4.8891680,
          title: 'One-line title here',
          subtitle: 'Really really nice location',
          selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
          onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
        }]
      );
    }

    exports.onMapReady = onMapReady;
    \n

    \n

    Viewport

    \n
    var mapbox = require(\"@nativescript-community/ui-mapbox\");

    function onMapReady(args) {
      args.map.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true
          }
      );
    }

    exports.onMapReady = onMapReady;
    \n

    The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

    \n

    Check out the usage details on the functions below.

    \n

    \n

    Declaring Programmatically

    \n

    Add a container to your view XML where you want to programmatically add the map. Give it an id.

    \n
    <ContentView id=\"mapContainer\" />
    \n

    \n

    Methods

    \n

    show

    \n

        const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

        const settings = {

          // NOTE: passing in the container here.

          container: contentView,
          accessToken: ACCESS_TOKEN,
          style: MapStyle.LIGHT,
          margins: {
            left: 18,
            right: 18,
            top: isIOS ? 390 : 454,
            bottom: isIOS ? 50 : 8
          },
          center: {
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 9, // 0 (most of the world) to 20, default 0
          showUserLocation: true, // default false
          hideAttribution: true, // default false
          hideLogo: true, // default false
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disableTilt: false, // default false
          markers: [
            {
              id: 1,
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location',
              iconPath: 'res/markers/green_pin_marker.png',
              onTap: () => console.log(\"'Nice location' marker tapped\"),
              onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
            }
          ]
        };

        console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

        const mapView = new MapboxView();

        // Bind some event handlers onto our newly created map view. 

        mapView.on( 'mapReady', ( args : any ) => {

          console.log( \"main-view-model: onMapReady fired.\" );

          // this is an instance of class MapboxView

          this.mapboxView = args.map;

          // get a reference to the Mapbox API shim object so we can directly call its methods.

          this.mapbox = this.mapboxView.getMapboxApi();

          this.mapbox.setOnMapClickListener( point => {
            console.log(`>> Map clicked: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnMapLongClickListener( point => {
            console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnScrollListener((point: LatLng) => {
            // console.log(`>> Map scrolled`);
          });

          this.mapbox.setOnFlingListener(() => {
            console.log(`>> Map flinged\"`);
          }).catch( err => console.log(err) );

        });

        mapView.setConfig( settings );
        contentView.content = mapView;
    \n

    hide

    \n

    All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

    \n
      mapbox.hide();
    \n

    unhide

    \n

    If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

    \n
      mapbox.unhide();
    \n

    destroy 💥

    \n

    To clean up the map entirely you can destroy instead of hide it:

    \n
      mapbox.destroy();
    \n

    setMapStyle

    \n

    You can update the map style after you've loaded it.

    \n
    \n

    With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

    \n
    \n
      mapbox.setMapStyle(mapbox.MapStyle.DARK);
    \n

    addMarkers

    \n
      import { MapboxMarker } from \"@nativescript-community/ui-mapbox\";

      const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
        id: 2, // can be user in 'removeMarkers()'
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        title: 'One-line title here', // no popup unless set
        subtitle: 'Infamous subtitle!',
        // icon: 'res://cool_marker', // preferred way, otherwise use:
        icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
        iconPath: '~/assets/markers/home_marker.png',
        selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
        onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
        onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
      };

      mapbox.addMarkers([
        firstMarker,
        {
          // more markers..
        }
      ])
    \n

    Updating markers

    \n

    Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

    \n
      firstMarker.update({
        lat: 52.3622160,
        lng: 4.8911680,
        title: 'One-line title here (UPDATE)',
        subtitle: 'Updated subtitle',
        selected: true, // this will trigger the callout upon update
        onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
        onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
      })
    \n

    removeMarkers

    \n

    You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

    \n
      // remove all markers
      mapbox.removeMarkers();

      // remove specific markers by id
      mapbox.removeMarkers([1, 2]);
    \n

    setViewport

    \n

    If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

    \n
      mapbox.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true // default true
          }
      )
    \n

    getViewport

    \n
      mapbox.getViewport().then(
          function(result) {
            console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
          }
      )
    \n

    setCenter

    \n
      mapbox.setCenter(
          {
            lat: 52.3602160, // mandatory
            lng: 4.8891680, // mandatory
            animated: false // default true
          }
      )
    \n

    getCenter

    \n

    Here the promise callback makes sense, so adding it to the example:

    \n
      mapbox.getCenter().then(
          function(result) {
            console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getCenter error: \" + error);
          }
      )
    \n

    setZoomLevel

    \n
      mapbox.setZoomLevel(
          {
            level: 6.5, // mandatory, 0-20
            animated: true // default true
          }
      )
    \n

    getZoomLevel

    \n
      mapbox.getZoomLevel().then(
          function(result) {
            console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getZoomLevel error: \" + error);
          }
      )
    \n

    animateCamera

    \n
      // this is a boring triangle drawn near Amsterdam Central Station
      mapbox.animateCamera({
        // this is where we animate to
        target: {
            lat: 52.3732160,
            lng: 4.8941680
        },
        zoomLevel: 17, // Android
        altitude: 2000, // iOS (meters from the ground)
        bearing: 270, // Where the camera is pointing, 0-360 (degrees)
        tilt: 50,
        duration: 5000 // default 10000 (milliseconds)
      })
    \n

    setTilt (Android only)

    \n
      mapbox.setTilt(
          {
            tilt: 40, // default 30 (degrees angle)
            duration: 4000 // default 5000 (milliseconds)
          }
      )
    \n

    getTilt (Android only)

    \n
      mapbox.getTilt().then(
          function(tilt) {
            console.log(\"Current map tilt: \" +  tilt);
          }
      )
    \n

    getUserLocation

    \n

    If the user's location is shown on the map you can get their coordinates and speed:

    \n
      mapbox.getUserLocation().then(
          function(userLocation) {
            console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
            console.log(\"Current user speed: \" +  userLocation.speed);
          }
      )
    \n

    trackUser

    \n

    In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

    \n
      mapbox.trackUser({
        mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
        animated: true
      });
    \n

    addSource

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

    \n

    Supported source types:

    \n
      \n
    • Vector
      • \n
    • GeoJson
      • \n
    • Raster
      • \n
    \n

    Adds a vector to GeoJSON source to the map.

    \n
      mapbox.addSource( id, {
        type: 'vector',
        url: 'url to source'
      } );
    \n

    -or-

    \n
      mapbox.addSource( id, {
        'type': 'geojson',
        'data': {
          \"type\": \"Feature\",
            \"geometry\": {
            \"type\": \"LineString\",
              \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
            }
          }
        }
      );
    \n

    removeSource

    \n

    Remove a source by id

    \n
      mapbox.removeSource( id );
    \n

    addLayer

    \n

    https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

    \n

    Supported layer types:

    \n
      \n
    • Line
      • \n
    • Circle
      • \n
    • Fill
      • \n
    • Symbol
      • \n
    • Raster
      • \n
    \n

    To add a line:

    \n
      mapbox.addLayer({
        'id': someid,
        'type': 'line',
        'source': {
          'type': 'geojson',
          'data': {
            \"type\": \"Feature\",
              \"geometry\": {
              \"type\": \"LineString\",
                \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
              }
            }
          }
        },
        'layout': {
          'line-cap': 'round',
          'line-join': 'round'
        },    
        'paint': {
          'line-color': '#ed6498',
          'line-width': 5,
          'line-opacity': .8,
          'line-dash-array': [ 1, 1, 1, ..]
        }
      });
    \n

    To add a circle:

    \n
      mapbox.addLayer({
        \"id\": someid,
        \"type\": 'circle',
        \"source\": {
          \"type\": 'geojson',
          \"data\": {
            \"type\": \"Feature\",
            \"geometry\": {
              \"type\": \"Point\",
              \"coordinates\": [ lng, lat ]
            }
          }
        }, 
        \"paint\": {
          \"circle-radius\": {
            \"stops\": [
              [0, 0],
              [20, 8000 ]
            ],
            \"base\": 2
          },
          'circle-opacity': 0.05,
          'circle-color': '#ed6498',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ed6498'
        } 
      });
    \n

    Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

    \n

    removeLayer

    \n

    Remove a layer added with addLayer() by id.

    \n
      mapbox.removeLayer( id );
    \n

    queryRenderedFeatures

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures\nReturns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

    \n
    mapbox
      .queryRenderedFeatures({
        point: {
          lat: 52.3701494345567,
          lng: 4.823684692382513,
      \t},
        layers: ['circle-with-source-object'],
        filter: ['==', ['get', 'querySample'], '2'],
      })
      .then((result) => console.log('query rendered features', result))
    \n

    querySourceFeatures

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures\nReturns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

    \n
    mapbox
      .querySourceFeatures('source_id', { filter: ['==', ['get', 'querySample'], '2'] })
      .then((result) => console.log('query source features', result));
    \n

    addLinePoint

    \n

    Dynamically add a point to a line.

    \n
      mapbox.addLinePoint( <id of line layer>, lnglat )
    \n

    where lnglat is an array of two points, a longitude and a latitude.

    \n

    addPolygon (deprecated, use addLayer() instead)

    \n

    Draw a shape. Just connect the dots like we did as a toddler.

    \n

    The first person to tweet a snowman drawn with this function gets a T-shirt (from @eddyverbruggen ;-)).

    \n
      // after adding this, scroll to Amsterdam to see a semi-transparent red square
      mapbox.addPolygon(
          {
            id: 1, // optional, can be used in 'removePolygons'
            fillColor: new Color(\"red\"),
            fillOpacity: 0.7,

            // stroke-related properties are only effective on iOS
            strokeColor: new Color(\"green\"),
            strokeWidth: 8,
            strokeOpacity: 0.5,

            points: [
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              },
              {
                lat: 52.35421556258807,
                lng: 4.9308013916015625
              },
              {
                lat: 52.353796172573944,
                lng: 4.8799896240234375
              },
              {
                lat: 52.3864966440161,
                lng: 4.8621368408203125
              },
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              }
            ]
          })
          .then(result => console.log(\"Mapbox addPolygon done\"))
          .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
    \n

    removePolygons

    \n

    You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

    \n
      // remove all polygons
      mapbox.removePolygons();

      // remove specific polygons by id
      mapbox.removePolygons([1, 2]);
    \n

    addPolyline

    \n

    Deprecated. Use addLayer() instead.

    \n

    Draw a polyline. Connect the points given as parameters.

    \n
      // Draw a two segment line near Amsterdam Central Station
      mapbox.addPolyline({
          id: 1, // optional, can be used in 'removePolylines'
          color: '#336699', // Set the color of the line (default black)
          width: 7, // Set the width of the line (default 5)
          opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
          points: [
              {
                  'lat': 52.3833160, // mandatory
                  'lng': 4.8991780 // mandatory
              },
              {
                  'lat': 52.3834160,
                  'lng': 4.8991880
              },
              {
                  'lat': 52.3835160,
                  'lng': 4.8991980
              }
          ]
      });
    \n

    removePolylines

    \n

    Deprecated. Use removeLayer() instead.

    \n

    You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

    \n
      // remove all polylines
      mapbox.removePolylines();

      // remove specific polylines by id
      mapbox.removePolylines([1, 2]);
    \n

    setOnMapClickListener

    \n

    Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

    \n
      mapbox.setOnMapClickListener((point: LatLng) => {
        console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnMapLongClickListener

    \n

    Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

    \n
      mapbox.setOnMapLongClickListener((point: LatLng) => {
        console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnScrollListener

    \n

    Add a listener to retrieve lat and lng of where the user scrolls to on the map.

    \n
      mapbox.setOnScrollListener((point?: LatLng) => {
        console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    \n

    Offline maps

    \n

    For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

    \n

    Important read: the offline maps documentation by Mapbox.

    \n

    downloadOfflineRegion

    \n

    This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

    \n
      mapbox.downloadOfflineRegion(
        {
          accessToken: accessToken, // required for Android in case no map has been shown yet
          name: \"Amsterdam\", // this name can be used to delete the region later
          style: mapbox.MapStyle.OUTDOORS,
          minZoom: 9,
          maxZoom: 11,
          bounds: {
            north: 52.4820,
            east: 5.1087,
            south: 52.2581,
            west: 4.6816
          },
          // this function is called many times during a download, so
          // use it to show an awesome progress bar!
          onProgress: function (progress) {
            console.log(\"Download progress: \" + JSON.stringify(progress));
          }
        }
      ).then(
        function() {
          console.log(\"Offline region downloaded\");
        },
        function(error) {
          console.log(\"Download error: \" + error);
        }
      );
    \n

    Advanced example: download the current viewport

    \n

    Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

    \n
      // I spare you the error handling on this one..
      mapbox.getViewport().then(function(viewport) {
        mapbox.downloadOfflineRegion(
          {
            name: \"LastViewport\", // anything you like really
            style: mapbox.MapStyle.LIGHT,
            minZoom: viewport.zoomLevel,
            maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
            bounds: viewport.bounds,
            onProgress: function (progress) {
              console.log(\"Download %: \" + progress.percentage);
            }
          }
        );
      });
    \n

    listOfflineRegions

    \n

    To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

    \n
      mapbox.listOfflineRegions({
        // required for Android in case no map has been shown yet
        accessToken: accessToken
      }).then(
        function(regions) {
          console.log(JSON.stringify(JSON.stringify(regions));
        },
        function(error) {
          console.log(\"Error while listing offline regions: \" + error);
        }
      );
    \n

    deleteOfflineRegion

    \n

    You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

    \n
      mapbox.deleteOfflineRegion({
        name: \"Amsterdam\"
      }).then(
        function() {
          console.log(\"Offline region deleted\");
        },
        function(error) {
          console.log(\"Error while deleting an offline region: \" + error);
        }
      );
    \n

    \n

    Permissions

    \n

    hasFineLocationPermission / requestFineLocationPermission

    \n

    On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

    \n

    You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

    \n

    Note that hasFineLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
      mapbox.hasFineLocationPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestFineLocationPermission' now
            console.log(\"Has Location Permission? \" + granted);
          }
      );

      // if no permission was granted previously this will open a user consent screen
      mapbox.requestFineLocationPermission().then(
          function() {
            console.log(\"Location permission requested\");
          }
      );
    \n

    Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

    \n

    \n

    Using marker images from the internet

    \n

    If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

    \n
    \t<key>NSAppTransportSecurity</key>
    \t<dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
    \t</dict>
    \n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@benedictstrube/ui-mapbox.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":178}},"@nativescript/mlkit-core":{"name":"@nativescript/mlkit-core","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-core

    \n
    npm install @nativescript/mlkit-core
    \n

    Usage

    \n

    Core

    \n
    \n

    Important: Ensure you've included xmlns:ui="@nativescript/mlkit-core" on the Page element

    \n
    \n
    <ui:MLKitView
      cameraPosition=\"back\"
       detectionType=\"all\" 
       detection=\"onDetection\"
    />
    \n

    Angular

    \n
    import { MLKitModule } from '@nativescript/mlkit-core/angular';

    @NgModule({
        imports: [
        MLKitModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
    <MLKitView
    cameraPosition=\"back\"
    detectionType=\"all\" 
    (detection)=\"onDetection($event)\"
    >    </MLKitView>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue'
    import MLKit from '@nativescript/mlkit-core/vue'

    Vue.use(MLKit)
    \n
    <MLKitView
    cameraPosition=\"back\"
    detectionType=\"all\" 
    @detection=\"onDetection\"
    />
    \n

    Optional modules

    \n
    \n

    Important: Detection works only for optional modules installed

    \n
    \n

    Barcode Scanning

    \n
    npm install @nativescript/mlkit-barcode-scanning
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { BarcodeResult } from '@nativescript/mlkit-barcode-scanning';
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Barcode){
            const barcode: BarcodeResult[] = event.data;
        }
    }
    \n

    Face Detection

    \n
    npm install @nativescript/mlkit-face-detection
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { FaceResult } from '@nativescript/mlkit-face-detection';
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Face){
            const faces: FaceResult[] = event.data;
        }
    }
    \n

    Image Labeling

    \n
    npm install @nativescript/mlkit-image-labeling
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { ImageLabelingResult } from '@nativescript/mlkit-image-labeling';
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Image){
            const labels: ImageLabelingResult[] = event.data;
        }
    }
    \n

    Object Detection

    \n
    npm install @nativescript/mlkit-object-detection
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { ObjectResult } from '@nativescript/mlkit-object-detection'
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Object){
            const objects: ObjectResult[] = event.data;
        }
    }
    \n

    Pose Detection

    \n
    npm install @nativescript/mlkit-pose-detection
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { PoseResult } from '@nativescript/mlkit-pose-detection';
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Pose){
            const poses: PoseResult = event.data;
        }
    }
    \n

    Text Recognition

    \n
    npm install @nativescript/mlkit-text-recognition
    \n
    import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
    import { TextResult } from '@nativescript/mlkit-text-recognition';
    onDetection(event: DetectionEvent){
        if(event.type === DetectionType.Text){
            const text: TextResult = event.data;
        }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":63,"lastWeek":942,"lastMonth":4272}},"@nativescript/firebase-crashlytics":{"name":"@nativescript/firebase-crashlytics","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-crashlytics

    \n\n

    A plugin that allows you to add Firebase Crashlytics to your NativeScript app.

    \n
    \n

    Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase.

    \n
    \n

    Crashlytics helps you to collect analytics and details about crashes and errors that occur in your app. It does this through three aspects:

    \n
      \n
    • Logs: Log events in your app to be sent with the crash report for context when your app crashes.
      • \n
    • Crash reports: Every crash is automatically turned into a crash report and sent.
      • \n
    • Stack traces: Even when an error is caught and your app recovers, the JavaScript stack trace can still be sent.
      • \n
    \n

    \"image\"

    \n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-crashlytics
    \n

    Use @nativescript/firebase-crashlytics

    \n

    Log a crash context

    \n

    Use the log method throughout your app to accumulate extra context for possible crashes that can happen.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

    const crashlytics = firebase().crashlytics();
    crashlytics.log('User signed in.');
    \n

    Set crash attributes for more context data

    \n

    For additional context, Crashlytics also offers various methods to set attributes for the crash report.

    \n
      \n
    • To set a single attribute, call the setAttribute method passing it the attribute name as the first argument and its value as the second argument.
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

    const crashlytics = firebase().crashlytics();

    crashlytics().setAttribute('credits', String(user.credits));
    \n
      \n
    • To set multiple attributes at once, call the setAttributes method with an object containing the attributes.
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

    const crashlytics = firebase().crashlytics();

    crashlytics().setAttributes({
      role: 'admin',
      followers: '13',
      email: user.email,
      username: user.username,
    });
    \n

    You can use set methods to set predefined attributes, but you can also set your own custom attributes.

    \n
      \n
    • You can also set the user ID. To do that call the setUserId method on firebase().crashlytics()
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-crashlytics'; // only needs to be imported 1x

    const crashlytics = firebase().crashlytics();

    crashlytics.setUserId(user.uid);
    \n

    Test crashlytics

    \n

    To test Crashlytics for your app, call the crash method to force a crash and in Firebase Console, see if the crash is logged.

    \n
    firebase().crashlytics().crash();
    \n

    Report errors manually

    \n

    Crashlytics also supports sending JavaScript stack traces to the Firebase console. This can be used in any situation where an error occurs but is caught by your code to recover gracefully.

    \n

    To send a stack trace, pass a JavaScript Error to the recordError method.

    \n

    Even if you catch unexpected errors, for your app to recover and behave smoothly you can still report them through Crashlytics using the recordError method. This will also provide you with the associated stack trace.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().crashlytics().log('Updating user count.');

    try {
      if (users) {
        someMethodToCatch();
      }
    } catch (error) {
      crashlytics().recordError(error);
      console.log(error);
    }
    \n

    Manually enable or disable crashlytics collection

    \n

    As Crashlytics will be sending certain information regarding the user, users may want to opt out of the crash reporting. To disable crashlytics collection, call the setCrashlyticsCollectionEnabled method on firebase().crashlytics() passing it false This can be done throughout the app with a simple method call to setCrashlyticsCollectionEnabled:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().crashlytics().setCrashlyticsCollectionEnabled(false);
    \n

    API

    \n

    Crashlytics

    \n

    The Crashlytics class has the following members.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    iosreadonly
    androidreadonly
    appFirebaseAppreadonly
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    checkForUnsentReports()Promise<boolean>
    crash()void
    deleteUnsentReports()void
    didCrashOnPreviousExecution()boolean
    log(message: string)void
    recordError(error: any)void
    sendUnsentReports()void
    setAttribute(name: string, value: string | number | boolean)void
    setAttributes(attributes: { [key: string]: string | number | boolean })void
    setCrashlyticsCollectionEnabled(enabled: boolean)void
    setUserId(userId: string)void
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":67,"lastWeek":368,"lastMonth":3083}},"@arepa/store-update":{"name":"@arepa/store-update","version":"1.0.0","license":"Apache-2.0","readme":"

    store-update

    \n

    NativeScript Plugin check and update app.

    \n\n \"npm\"\n\n

    @arepa/store-update

    \n
    npm install @arepa/store-update
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescriptionAndroidiOS
    getVersionCode()Return versionCode of the app.✓✓
    getVersionName()Return versionName of the app.✓✓
    getVersionNube()Return versionCode of the app in playstore and appstore.✓✓
    checkUpdate(force?:boolean)Check if there is a new version on the App Store and Play Store.✓✓
    checkUpdateNative()Update the Android app without exiting the app.✓❌
    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":90}},"nativescript-background-http":{"name":"nativescript-background-http","version":"4.2.1","license":"Apache-2.0","readme":"

    Background Upload NativeScript plugin \"Build

    \n

    A cross platform plugin for the NativeScript framework, that provides background upload for iOS and Android.

    \n

    There is a stock NativeScript http module that can handle GET/POST requests that work with strings and JSONs. It however comes short in features when it comes to really large files.

    \n

    The plugin uses NSURLSession with background session configuration for iOS; and a fork of the gotev/android-upload-service library for Android.

    \n

    Installation

    \n
    tns plugin add nativescript-background-http
    \n

    Usage

    \n

    The below attached code snippets demonstrate how to use nativescript-background-http to upload single or multiple files.

    \n

    Uploading files

    \n

    Sample code for configuring the upload session. Each session must have a unique id, but it can have multiple tasks running simultaneously. The id is passed as a parameter when creating the session (the image-upload string in the code bellow):

    \n

    // file path and url
    var file =  \"/some/local/file/path/and/file/name.jpg\";
    var url = \"https://some.remote.service.com/path\";
    var name = file.substr(file.lastIndexOf(\"/\") + 1);

    // upload configuration
    var bghttp = require(\"nativescript-background-http\");
    var session = bghttp.session(\"image-upload\");
    var request = {
            url: url,
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/octet-stream\"
            },
            description: \"Uploading \" + name
        };
    \n

    For a single file upload, use the following code:

    \n
    var task = session.uploadFile(file, request);
    \n

    For multiple files or to pass additional data, use the multipart upload method. All parameter values must be strings:

    \n
    var params = [
       { name: \"test\", value: \"value\" },
       { name: \"fileToUpload\", filename: file, mimeType: \"image/jpeg\" }
    ];
    var task = session.multipartUpload(params, request);
    \n

    In order to have a successful upload, the following must be taken into account:

    \n
      \n
    • the file must be accessible from your app. This may require additional permissions (e.g. access documents and files on the device). Usually this is not a problem - e.g. if you use another plugin to select the file, which already adds the required permissions.
      • \n
    • the URL must not be blocked by the OS. Android Pie or later devices require TLS (HTTPS) connection by default and will not upload to an insecure (HTTP) URL.
      • \n
    \n

    Upload request and task API

    \n

    The request object parameter has the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    urlstringThe request url (e.g.https://some.remote.service.com/path).
    methodstringThe request method (e.g. POST).
    headersobjectUsed to specify additional headers.
    descriptionstringUsed to help identify the upload task locally - not sent to the remote server.
    utf8boolean(Android only/multipart only) If true, sets the charset for the multipart request to UTF-8. Default is false.
    androidDisplayNotificationProgressboolean(Android only) Used to set if progress notifications should be displayed or not. Please note that since API26, Android requires developers to use notifications when running background tasks. https://developer.android.com/about/versions/oreo/background
    androidNotificationTitlestring(Android only) Used to set the title shown in the Android notifications center.
    androidAutoDeleteAfterUploadboolean(Android only) Used to set if files should be deleted automatically after upload.
    androidMaxRetriesnumber(Android only) Used to set the maximum retry count. The default retry count is 0. https://github.com/gotev/android-upload-service/wiki/Recipes#backoff
    androidAutoClearNotificationboolean(Android only) Used to set if notifications should be cleared automatically upon upload completion. Default is false. Please note that setting this to true will also disable the ringtones.
    androidRingToneEnabledboolean(Android only) Used to set if a ringtone should be played upon upload completion. Default is true. Please note that this flag has no effect when androidAutoClearNotification is set to true.
    androidNotificationChannelIDstring(Android only) Used to set the channel ID for the notifications.
    \n

    The task object has the following properties and methods, that can be used to get information about the upload:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    uploadnumberBytes uploaded.
    totalUploadnumberTotal number of bytes to upload.
    statusstringOne of the following: error, uploading, complete, pending, cancelled.
    descriptionstringThe description set in the request used to create the upload task.
    cancel()voidCall this method to cancel an upload in progress.
    \n

    Handling upload events

    \n

    After the upload task is created you can monitor its progress using the following events:

    \n
    task.on(\"progress\", progressHandler);
    task.on(\"error\", errorHandler);
    task.on(\"responded\", respondedHandler);
    task.on(\"complete\", completeHandler);
    task.on(\"cancelled\", cancelledHandler); // Android only
    \n

    Each event handler will receive a single parameter with event arguments:

    \n
    // event arguments:
    // task: Task
    // currentBytes: number
    // totalBytes: number
    function progressHandler(e) {
        alert(\"uploaded \" + e.currentBytes + \" / \" + e.totalBytes);
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // error: java.lang.Exception (Android) / NSError (iOS)
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function errorHandler(e) {
        alert(\"received \" + e.responseCode + \" code.\");
        var serverResponse = e.response;
    }


    // event arguments:
    // task: Task
    // responseCode: number
    // data: string
    function respondedHandler(e) {
        alert(\"received \" + e.responseCode + \" code. Server sent: \" + e.data);
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function completeHandler(e) {
        alert(\"received \" + e.responseCode + \" code\");
        var serverResponse = e.response;
    }

    // event arguments:
    // task: Task
    function cancelledHandler(e) {
        alert(\"upload cancelled\");
    }
    \n

    Testing the plugin

    \n

    In order to test the plugin, you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. http://httpbin.org/post However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it:

    \n
    cd demo-server
    npm i
    node server 8080
    \n

    The above commands will start a server listening on port 8080. Remember to update the URL in your app to match the address/port where the server is running.

    \n
    \n

    Note: If you are using the iOS simulator then http://localhost:8080 should be used to upload to the demo server. If you are using an Android emulator, http://10.0.2.2:8080 should be used instead.

    \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    License

    \n

    Apache License Version 2.0, January 2004\n\"\"

    \n","downloadStats":{"lastDay":4,"lastWeek":46,"lastMonth":324}},"@nativescript-community/ui-webview":{"name":"@nativescript-community/ui-webview","version":"1.4.9","license":"Apache-2.0","readme":"

    # @nativescript-community/ui-webview

    \n

    Extended WebView for NativeScript which adds many options.\nThe code is originally based on nativescript-webview-ext

    \n

    Features

    \n
      \n
    • \n

      Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.

      \n
        \n
      • Note: For iOS 11+ WKWebView is used, but for iOS <11 UIWebView is used
        • \n
      \n
      • \n
    • \n

      Adds support for capturing URLs.

      \n
        \n
      • This allows the app to open external links in an external browser and handle tel-links
        • \n
      \n
      • \n
    • \n

      Added functions like:

      \n
        \n
      • executeJavaScript(code: string) for executing JavaScript-code and getting result.
        • \n
      • executePromise(code: string) for calling promises and getting the result.
        • \n
      • getTitle() returns document.title.
        • \n
      \n
      • \n
    • \n

      Adds functions to inject css- and javascript-files.

      \n
        \n
      • Into the current page.
        • \n
      • Auto-injected on page load.
        • \n
      \n
      • \n
    • \n

      Supports:

      \n
        \n
      • Android 19+
        • \n
      • iOS 9+
        • \n
      \n
      • \n
    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @nativescript-community/ui-webview
    \n

    Angular support

    \n

    Import AWebViewModule from @nativescript-community/ui-webview/angular and add it to your NgModule.

    \n

    This registers the element AWebView. Replace the tag with

    \n

    Vue support

    \n
    import Vue from 'nativescript-vue';
    import WebViewPlugin from '@nativescript-community/ui-webview/vue';

    Vue.use(WebViewPlugin);
    \n

    This registers the element AWebView. Replace the tag with

    \n

    Usage

    \n

    Limitations

    \n

    In order to intercept requests for the custom scheme, we use UIWebView for iOS 9 and 10 and WKWebView for iOS 11+.

    \n

    iOS 11 added support for setting a WKURLSchemeHandler on the WKWebView.\nPrior to iOS 11 there isn't support for intercepting the URL with WKWebView, so we use a custom NSURLProtocol + UIWebView.

    \n

    Important:

    \n

    The custom NSURLProtocol used with UIWebView is shared with all instances of the AWebView, so mapping x-local://local-filename.js => file://app/full/path/local-filename.js is shared between them.

    \n

    API

    \n

    NativeScript View

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValueDescription
    readonly isUIWebViewtrue / falseIs the native webview an UIWebView? True if iOS <11
    readonly isWkWebViewtrue / falseIs the native webview an WKWebView? True if iOS >=11
    srcLoad src
    autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
    builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
    cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
    databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
    debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
    displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
    domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
    scalesPageToFitUIWebView: Should webpage scale to fit the view? Defaults to false
    scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
    supportZoomtrue / falseAndroid: should the webview support zoom
    viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
    limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
    scrollBarIndicatorVisiblefalseAllow to hide scrollbars.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
    registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
    unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
    getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
    loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
    autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
    autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
    executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
    executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
    emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
    getTitle()Returns a promise with the current document title.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
    loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
    loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
    shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
    titleChangedDocument title changed
    webAlertRaised when window.alert is triggered inside the webview, needed to use customs dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed. NOTE: Not supported by UIWebView
    webConfirmRaised when window.confirm is triggered inside the webview, needed to use customs dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed. NOTE: Not supported by UIWebView
    webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
    webPromptRaised when window.prompt is triggered inside the webview, needed to use customs dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
    Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
    \n

    WebView

    \n

    Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
    window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
    window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the AWebView as any other event, data will be a part of the WebViewEventData-object
    \n

    Possible features to come:

    \n
      \n
    • Cookie helpers?
      • \n
    • Setting view-port metadata?
      • \n
    • Share cache with native-layer?
      • \n
    \n

    Android

    \n
      \n
    • Settings\n
        \n
      • AppCache?
        • \n
      • User agent?
        • \n
      \n
      • \n
    \n

    iOS

    \n
      \n
    • Settings?
      • \n
    \n

    Demo and unit tests

    \n

    Running the demo

    \n

    To run the demo-project, the plugin must be build locally and a http-server must be running.

    \n

    The easiest way to run the demo is to follow these steps:

    \n
      \n
    • Clone the git repository from https://github.com/nativescript-community/ui-webview.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run demo.ios
        • \n
      • npm run demo.android
        • \n
      \n
      • \n
    \n

    Running the unit-tests

    \n
      \n
    • Clone the git repository from https://github.com/nativescript-community/ui-webview.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run test.ios
        • \n
      • npm run test.android
        • \n
      \n
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    About Nota

    \n

    Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

    \n","downloadStats":{"lastDay":9,"lastWeek":82,"lastMonth":693}},"nativescript-carousel":{"name":"nativescript-carousel","version":"7.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Carousel

    \n

    A simple carousel component for NativeScript.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSupportedVersionNativeView
    iOSYesiOS 8.1+DKCarouselView
    AndroidYesAPI 15+ViewPager with PageIndicatorView
    \n

    Installation

    \n

    NativeScript 7+:

    \n
    ns plugin add nativescript-carousel
    \n

    NativeScript less than NS7:

    \n
    tns plugin add nativescript-carousel@6.1.1
    \n

    Limitations

    \n
      \n
    • (iOS) PagerIndicator animations not available for iOS, only Android.
      • \n
    • (Android) Auto- and Infinite-paging not available.
      • \n
    • (Android) Carousel still needs to be wrapped in a GridLayout for the indicator to overlap.
      • \n
    \n

    Usage

    \n

    Check out the demos included in this repo for instructions on how to use the Carousel with your choice of framework:

    \n

    Vanilla TS demo

    \n

    Angular demo

    \n

    Vue demo

    \n

    Attributes - Common

    \n
      \n
    • items optional (must be used with itemTemplate)
      • \n
    \n

    Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

    \n
      \n
    • itemTemplate optional (must be used with items)
      • \n
    \n

    Defines the view template for each slide-view to be generated.

    \n
      \n
    • selectedPage optional
      • \n
    \n

    Sets/Gets the active page by index

    \n
      \n
    • showIndicator optional
      • \n
    \n

    Shows or hides the page-indicator

    \n
      \n
    • indicatorColor optional
      • \n
    \n

    Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

    \n
      \n
    • indicatorColorUnselected
      • \n
    \n

    Sets the color of unselected indicators

    \n
      \n
    • indicatorOffset optional
      • \n
    \n

    By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

    \n

    Attributes - iOS specific

    \n
      \n
    • finite optional
      • \n
    \n

    If true last slide will wrap back to first and visa versa

    \n
      \n
    • bounce optional
      • \n
    \n

    If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

    \n
      \n
    • autoPagingInterval optional
      • \n
    \n

    Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

    \n
      \n
    • scrollEnabled optional
      • \n
    \n

    Enables/Disables user scroll on the Carousel.

    \n
      \n
    • ios
      • \n
    \n

    Returns the DKCarouselView object.

    \n

    Attributes - Android specific

    \n
      \n
    • android
      • \n
    \n

    Returns the ViewPager object.

    \n
      \n
    • indicatorAnimation
      • \n
    \n

    Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

    \n
      \n
    • indicatorAnimationDuration
      • \n
    \n

    Sets the pager-indicator animation duration in milliseconds. Default is 500.

    \n
      \n
    • indicatorAlignment
      • \n
    \n

    Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

    \n
      \n
    • indicatorRadius
      • \n
    \n

    Sets the pager-indicator dot radius.

    \n
      \n
    • indicatorPadding
      • \n
    \n

    Sets the pager-indicator dot padding.

    \n
      \n
    • pageIndicatorCount
      • \n
    \n

    Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Indicator animations (Android only!)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NONECOLORSCALESLIDE
    \"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WORMTHIN_WORMFILLDROPSWAP
    \"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
    \n

    Changelog

    \n

    7.0.1

    \n
      \n
    • Hotfix release: Fixes issues with the @NativeClass() decorator.
      • \n
    \n

    7.0.0

    \n
      \n
    • Plugin updated to support NativeScript v7.0 release. Thanks to @BradMartin, @NathanWalker & @rickwalking for all the PRs and making sure the code compiles & runs. :clap:
      • \n
    \n

    6.1.0

    \n
      \n
    • Fix for iOS safe-area issues. No need to use the custom css-padding-hack any more.
      • \n
    • DKCarouselView pod updated to version 2.5.0 (fix safe-area layout).
      • \n
    • Known bugs: Orientation change render-issues on iOS (DKCarouselView) (help wanted).
      • \n
    • Demos updated.
      • \n
    \n

    6.0.0

    \n
      \n
    • NativeScript 6.0 & AndroidX migration.
      • \n
    • IndicatorView gradle bumped to 1.0.3 (androidx).
      • \n
    • Some refactorings on the Android side for the plugin to work better with Angular & Vue.
      • \n
    • Demos updated, again.
      • \n
    • Instructions for each demo updated.
      • \n
    \n

    4.2.5

    \n
      \n
    • Fix for the dreadded PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! error on Android.
      • \n
    • Hotfix on the AndroidX migration.
      • \n
    • Minor refactor in the refresh() function. Safer to call on demand.
      • \n
    • Redesigned all demo apps. Added more advanced examples.
      • \n
    • 4.x will be the last Nativescript 5.x version. All future versions will be Nativescript 6.x only and that includes AndroidX.
      • \n
    \n

    4.2.1

    \n
      \n
    • Hotfix for static items. Sorry!
      • \n
    \n

    4.2.0

    \n
      \n
    • AndroidX update for NS6. Thanks @bradmartin!
      • \n
    • Code cleanup, typings fix.
      • \n
    • Demos updated. Proper Vue-demo added.
      • \n
    \n

    4.1.0

    \n
      \n
    • Added setter for pageIndicatorCount for Android to enable dynamically changing the length of the carousel items array without Android throwing a crash about the adapster set changing incorrectly.
      • \n
    \n

    4.0.2

    \n
      \n
    • Carousel now extends from GridLayout instead of AbsoluteLayout (better positioning). (Thanks @bradmartin)
      • \n
    \n

    4.0.0

    \n
      \n
    • Mirgration to TypeScript, typings added (Thanks @bradmartin)
      • \n
    • Cleanup in demo app, added ng-demo (Thanks @bradmartin)
      • \n
    \n

    3.1.1

    \n
      \n
    • Made comaptible for recent TNS 3.2.x releases.
      • \n
    • Merged fix regarding the notifyDataSetChanged issue. Thanks @OPADA-Eng
      • \n
    • Fixed issue on iOS when having only 2 slides. Thanks @sitefinitysteve
      • \n
    \n

    3.1.0

    \n
      \n
    • Made comaptible for recent TNS 3.1.x releases.
      • \n
    • Updated Android indicator library to latest version.
      • \n
    \n

    3.0.2

    \n
      \n
    • Fixed an issue with events not working on Android (affected all events).
      • \n
    \n

    3.0.1

    \n
      \n
    • Fixed a critical bug on Android during refresh when navigating back to a view with a Carousel.
      • \n
    \n

    3.0.0

    \n
      \n
    • Finally! Support for TNS 3.x. Big thanks to @MattNer0, @sitefinitysteve, @hristo, @NickIliev
      • \n
    • Fixed the "refresh observable" issue on Android, thanks @MattNer0.
      • \n
    • New property to enable/disable scroll, thanks @sitefinitysteve.
      • \n
    • New property for Android: indicatorOffset, thanks @sitefinitysteve.
      • \n
    • Fixed issue with orientation change on iOS. Please use nativescript-orientation plugin in order to trigger UI-refresh.
      • \n
    • Code refactor & cleanup, introduced common.js
      • \n
    • Updated Pod & Android-IndicatorView to latest version.
      • \n
    \n

    2.4.2

    \n
      \n
    • Added bounce property to the plugin and the Pod. Thanks to @sitefinitysteve.
      • \n
    \n

    2.4.1

    \n
      \n
    • Fixed an issue on iOS when updating Items binding, would not refresh Carousel-view.
      • \n
    \n

    2.4.0

    \n
      \n
    • Added new event, 'pageScrolling'. Thanks to @sitefinitysteve!
      • \n
    • Updated gradle for 'PageIndicatorView' to version 0.1.2
      • \n
    • Updated package.json with 'plugin' metadata to comply with the upcomming 3.0 plugin standard
      • \n
    • Potential fix for ViewPager.populate exception on Android.
      • \n
    \n

    2.3.1

    \n
      \n
    • Potential fix for ng2 & webpack users (Trying to link invalid 'this' to a Java object). Thanks @peterstaev.
      • \n
    • Updated android indicators gradle plugin. New animation: swap!
      • \n
    \n

    2.3.0

    \n
      \n
    • Changed the iOS Pod to point to our own repo! We have the control ;)
      • \n
    • New property available for iOS: indicatorColorUnselected. Allows you to set color to the unselected dots.
      • \n
    \n

    2.2.0

    \n
      \n
    • Fixed issue with the refresh function that could cause a crash or removal of slides (Android).
      • \n
    • Updated Android-indicators gradle library to v0.1.0. More stable and more animations! New animations are: drop, scale and thin_worm.
      • \n
    • Fixed issue with a small white bar being shown if the indicators are disabled (Android). Thanks to @EddyVerbruggen.
      • \n
    • Fixed, another, potential bug that would cause app to crash when resuming he activity (Android).
      • \n
    \n

    2.1.2

    \n
      \n
    • Fixed a critical bug that would cause the app to crash when resuming the activity (Android). Thanks to @EddyVerbruggen.
      • \n
    \n

    2.1.1

    \n
      \n
    • Corrected README, iOS does indeed allow for tap-events innside the CarouselItems. Thanks @terreb!
      • \n
    • Fixed the selectedPage property on iOS, now also returns selected index.
      • \n
    • Updated iOS Podfile to 1.4.12
      • \n
    \n

    2.1.0

    \n
      \n
    • Added Android support!
      • \n
    • Android gets animated pager-indicators made by @romandanylyk.
      • \n
    \n

    1.1.0

    \n
      \n
    • Updated pod with version '1.4.10'
      • \n
    • Fixed page-change-event when finite is set to 'true'
      • \n
    • Added new property 'selectedPage' (set active page by index).
      • \n
    • Updated demo app
      • \n
    \n

    1.0.0

    \n
      \n
    • Initial release
      • \n
    \n

    Author

    \n\n

    Collaborators

    \n\n

    Contributing

    \n

    I will accept pull requests that improve this and assign credit.

    \n
      \n
    • Fork and clone the repository
      • \n
    • cd src && npm run setup
      • \n
    • npm run demo.android for android development
      • \n
    • npm run demo.ios for iOS development
      • \n
    • npm run demo-ng.ios for iOS Angular app
      • \n
    • npm run demo-ng.android for Android Angular
      • \n
    • npm run demo-vue.ios for iOS Vue app
      • \n
    • npm run demo-vue.android for Android Vue
      • \n
    \n","downloadStats":{"lastDay":37,"lastWeek":113,"lastMonth":418}},"@nativescript/email":{"name":"@nativescript/email","version":"2.1.0","license":"Apache-2.0","readme":"

    @nativescript/Email

    \n

    You can use this plugin to compose an e-mail, have the user edit the draft manually, and send it.

    \n
    \n

    Note: This plugin depends on the default mail app. If you want a fallback to a third party client app like Gmail or Outlook, then check for availability, and if not available use a solution like the Social Share plugin.

    \n
    \n

    Installation

    \n
    npm install @nativescript/email
    \n

    Usage

    \n

    Importing

    \n

    Once you've installed the plugin, the next step is to import it before using it.

    \n
    import * as email from '@nativescript/email';
    // or
    import { compose } from '@nativescript/email';
    // or even
    import { compose as composeEmail } from '@nativescript/email';
    \n

    Checking the availability

    \n

    To check if the device has a mail app installed, call the available method.

    \n
    email.available().then((avail: boolean) => {
    \tconsole.log('Email available? ' + avail);
    });
    \n

    Composing an email

    \n

    To compose an email, use the compose method.

    \n
    // let's first create a File object
    import { knownFolders } from '@nativescript/core';
    var appPath = knownFolders.currentApp().path;
    var logoPath = appPath + '/res/telerik-logo.png';

    email
    \t.compose({
    \t\tsubject: 'Yo',
    \t\tbody: 'Hello <strong>dude</strong> :)',
    \t\tto: ['eddyverbruggen@gmail.com', 'to@person2.com'],
    \t\tcc: ['ccperson@somewhere.com'],
    \t\tbcc: ['eddy@combidesk.com', 'eddy@x-services.nl'],
    \t\tattachments: [
    \t\t\t{
    \t\t\t\tfileName: 'arrow1.png',
    \t\t\t\tpath: 'base64://iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAYAAAD6xArmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAHGlET1QAAAACAAAAAAAAABQAAAAoAAAAFAAAABQAAAB5EsHiAAAAAEVJREFUSA1iYKAimDhxYjwIU9FIBgaQgZMmTfoPwlOmTJGniuHIhlLNxaOGwiNqNEypkwlGk9RokoIUfaM5ijo5Clh9AAAAAP//ksWFvgAAAEFJREFUY5g4cWL8pEmT/oMwiM1ATTBqONbQHA2W0WDBGgJYBUdTy2iwYA0BrILDI7VMmTJFHqv3yBUEBQsIg/QDAJNpcv6v+k1ZAAAAAElFTkSuQmCC',
    \t\t\t\tmimeType: 'image/png',
    \t\t\t},
    \t\t\t{
    \t\t\t\tfileName: 'telerik-logo.png',
    \t\t\t\tpath: logoPath,
    \t\t\t\tmimeType: 'image/png',
    \t\t\t},
    \t\t],
    \t})
    \t.then(
    \t\tfunction () {
    \t\t\tconsole.log('Email composer closed');
    \t\t},
    \t\tfunction (err) {
    \t\t\tconsole.log('Error: ' + err);
    \t\t}
    \t);
    \n

    API

    \n

    Method(s)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn TypeDescription
    available()Promise<boolean>Checks for availability of a mail app.
    compose(options: ComposeOptions)Promise<boolean>Composes and sends a ComposeOptions email.
    \n

    Attachment

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    fileNamestringThe name used for the attachment.
    Example: fileName: 'Cute-Kitten.png'
    pathstringThe to the file to be attached.
    mimeTypestring(iOS-only)Used to help the iOS device figure out how to send the file.Example:mimeType: 'image/png'
    \n

    ComposeOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    subjectstringOptional: The subject of the email.
    bodystringOptional: The body of the email. The plugin will automatically handle plain and html email content.
    bodystringOptional: The body of the email. The plugin will automatically handle plain and html email content.
    tostring[]Optional: An array of email addresses of the direct recipients. On Android only the first item in the array is used.
    ccstring[]Optional: An array of email addresses of the cc recipients.
    bccstring[]Optional: An array of email addresses of the bcc recipients.
    attachmentsArray<Attachment>The files to be attached to the email.
    iosViewControlleranyOptional: (iOS-only) iOS View Controller to open compose from.
    \n

    Usage with Angular

    \n

    Check out this tutorial (YouTube) to learn how to use this plugin in a NativeScript-Angular app.

    \n

    Known issues

    \n

    On iOS you can't use the simulator to test the plugin because of an iOS limitation.\nTo prevent a crash, this plugin returns false when available is invoked on the iOS simulator.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":81,"lastWeek":893,"lastMonth":3852}},"nativescript-slides":{"name":"nativescript-slides","version":"2.3.0","license":{"type":"MIT","url":"https://github.com/JoshDSommer/nativescript-slides/blob/master/LICENSE"},"readme":"

    NativeScript Slides for iOS and Android

    \n

    \"npm\"\n\"npm\"

    \n

    The plugin formally known as nativescript-intro-slides

    \n

    Intro slides example:

    \n

    \"Nativescript

    \n

    Image carousel example:

    \n

    \"Nativescript

    \n

    videos by Brad Martin

    \n

    Example Usage:

    \n

    XML

    \n

    \t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\">
    \t\t\t<Slides:Slide class=\"slide-1\">
    \t\t\t\t<Label text=\"This is Panel 1\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-2\">
    \t\t\t\t<Label text=\"This is Panel 2\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-3\">
    \t\t\t\t<Label text=\"This is Panel 3\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-4\">
    \t\t\t\t<Label text=\"This is Panel 4\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-5\">
    \t\t\t\t<Label text=\"This is Panel 5\"  />
    \t\t\t</Slides:Slide>
    \t</Slides:SlideContainer>
    \n

    CSS

    \n
    .slide-1 {
      background-color: darkslateblue;
    }

    .slide-2 {
      background-color: darkcyan;
    }
    .slide-3 {
      background-color: darkgreen;
    }

    .slide-4 {
      background-color: darkgoldenrod;
    }
    .slide-5 {
      background-color: darkslategray;
    }
    label {
      text-align: center;
      width: 100%;
      font-size: 35;
      margin-top: 35;
    }
    \n

    Great for Intros/Tutorials to Image Carousels.

    \n

    To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

    \n

    when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

    \n

    add as many <Slides:Slide> as you want.

    \n

    Methods for SlideContainer

    \n
      \n
    • nextSlide() - navigate to the next slide (right direction)
      • \n
    • previousSlide() - navigate to the previous slide (left direction)
      • \n
    • goToSlide(index) : - goes to the slide at the specified index
      • \n
    \n

    Attributes for SlideContainer

    \n
      \n
    • \n

      loop : boolean - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

      \n
      • \n
    • \n

      disablePan : boolean - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.

      \n
      • \n
    • \n

      pagerOffset : string - Margin-top for the pager. Number or percentage, default 88%.

      \n
      • \n
    • \n

      pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

      \n
      • \n
    • \n

      **slideWidth: number - set the width of your slides. (Only currently works on android).

      \n
      • \n
    \n

    Indicators

    \n

    If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

    \n
    .slide-indicator-inactive {
      background-color: #fff;
      opacity: 0.4;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }

    .slide-indicator-active {
      background-color: #fff;
      opacity: 0.9;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }
    \n

    Events

    \n
      \n
    • start - Start pan
      • \n
    • changed - Transition complete
      • \n
    • cancelled - User didn't complete the transition, or at start\\end with no slides
      • \n
    • finished - Last slide has come into view
      • \n
    \n

    Angular 2 compatibility

    \n

    I've started working on a Angular 2 version they can be checked out here:\nAngular 2 version of slides

    \n

    If you want to use this plugin with Angular 2 the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

    \n

    Plugin Development Work Flow:

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

    Known issues

    \n
      \n
    • There appears to be a bug with the loop resulting in bad transitions going right to left.
      • \n
    • Currently in Android there is an known issue when a slide component inside of a scroll view.
      • \n
    \n

    How To: Load slides dynamically

    \n

    You want to hook into the loaded event of the view and then create your view elements.

    \n

    Demo Code

    \n
    <Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
    \n
    import * as slides from 'nativescript-slides/nativescript-slides';

    export function onSlideContainerLoaded(args) {
      let slideContainer = <slides.SlideContainer>args.object;

      //Construct the slides
      slideContainer.addChild(getSlide('Page 1', 'slide-1'));
      slideContainer.addChild(getSlide('Page 2', 'slide-2'));
      slideContainer.addChild(getSlide('Page 3', 'slide-3'));
      slideContainer.addChild(getSlide('Page 4', 'slide-4'));
      slideContainer.addChild(getSlide('Page 5', 'slide-5'));
    }

    function getSlide(labelText: string, className: string) {
      let slide = new slides.Slide();
      slide.className = className;
      let label = new labelModule.Label();
      label.text = labelText;
      slide.addChild(label);

      return slide;
    }
    \n

    Thanks to these awesome contributors!

    \n

    Brad Martin

    \n

    Obsessive Inc/Abhijith Reddy

    \n

    Victor Nascimento

    \n

    Steve McNiven-Scott

    \n

    Leo Caseiro

    \n

    Todd Anglin

    \n

    Andrew Lo

    \n

    Raúl Uranga

    \n

    And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

    \n

    Contributing guidelines

    \n

    Contributing guidelines

    \n

    License

    \n

    MIT

    \n

    for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":52,"lastMonth":169}},"@nstudio/nativescript-exoplayer":{"name":"@nstudio/nativescript-exoplayer","version":"6.1.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-exoplayer

    \n

    NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

    \n
    npm install @nstudio/nativescript-exoplayer
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Google ExoPlayeriOS AVPlayer
    \n

    For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

    \n

    Based on

    \n

    This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

    \n

    Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

    \n

    The Google ExoPlayer adds about a meg and a half plugin to the Android application.

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
            <StackLayout>

                <exoplayer:Video id=\"nativeexoplayer\"
                controls=\"true\" finished=\"{{ videoFinished }}\"
                loop=\"true\" autoplay=\"false\" height=\"280\"
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

            </StackLayout>
    </Page>
    \n

    NativeScript Angular Usage

    \n
    // somewhere at top of your component or bootstrap file
    import { registerElement } from \"@nativescript/angular\";
    import { Video } from '@nstudio/nativescript-exoplayer';
    registerElement(\"Video\", () => Video);
    \n
      <Video
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\"
          height=\"300\"></Video>
    \n

    Properties

    \n
      \n
    • src - required
      • \n
    \n

    Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n
      \n
    • srcType - (Android Only)
      • \n
    \n
      \n
    • 0 = DETECT (from src)
      • \n
    • 1 = SS
      • \n
    • 2 = DASH
      • \n
    • 3 = HLS
      • \n
    • 4 = OTHER
      • \n
    \n
      \n
    • enableSubtitles
      • \n
    \n

    By default, subtitle support is off. Use this flag to turn them on.

    \n
      \n
    • subtitles
      • \n
    \n

    Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

    \n
      \n
    • autoplay - (boolean) - optional
      • \n
    \n

    Set if the video should start playing as soon as possible or to wait for user interaction.

    \n
      \n
    • finished - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n
      \n
    • controls - (boolean) - optional
      • \n
    \n

    Set to use the native video player's media playback controls.

    \n
      \n
    • muted - (boolean) - optional
      • \n
    \n

    Mutes the native video player.

    \n
      \n
    • loop - (boolean) - optional
      • \n
    \n

    Sets the native video player to loop once playback has finished.

    \n
      \n
    • backgroundAudio - (boolean) - optional
      • \n
    \n

    If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

    \n
      \n
    • fill - (VideoFill) - optional
      • \n
    \n

    Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

    \n

    iOS:

    \n
      \n
    • VideoFill.default = AVLayerVideoGravityResize
      • \n
    • VideoFill.aspect = AVLayerVideoGravityResizeAspect
      • \n
    • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill
      • \n
    \n

    See here for explanation.

    \n
      \n
    • playbackReady - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video is ready to play.

    \n
      \n
    • seekToTimeComplete - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video has finished seekToTime.

    \n
      \n
    • observeCurrentTime - (boolean) - optional
      • \n
    \n

    If set to true, currentTimeUpdated callback is possible.

    \n
      \n
    • currentTimeUpdated - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the time is updated.

    \n
      \n
    • iosAudioSessionCategory - (string) - optional
      • \n
    \n

    (iOS only) Static attribute to specify the device audio session playback category. 'backgroundAudio' on the class instance must be false for this to take effect. Available categories:

    \n
      \n
    1. AVAudioSessionCategoryAmbient
      2. \n
    2. AVAudioSessionCategoryAudioProcessing
      3. \n
    3. AVAudioSessionCategoryMultiRoute
      4. \n
    4. AVAudioSessionCategoryPlayAndRecord
      5. \n
    5. AVAudioSessionCategoryPlayback
      6. \n
    6. AVAudioSessionCategoryRecord
      7. \n
    7. AVAudioSessionCategorySoloAmbient
      8. \n
    8. AVAudioSessionCategoryAudioProcessing (Deprecated in iOS 10)
      9. \n
    \n

    Details for these categories can be found on the AVAudioSessionCategory documentation.

    \n

    Example usage:

    \n
    import { NgModule } from '@angular/core';
    import { Video } from '@nstudio/nativescript-exoplayer';

    @NgModule({
      // stuff
    })
    export class AppModule {
      constructor() {
        Video.iosAudioSessionCategory = 'AVAudioSessionCategoryPlayback';
      }
    }
    \n

    API

    \n
      \n
    • play() - Start playing the video
      • \n
    • pause() - Pause the video
      • \n
    • seekToTime(time: number) - Seek the video to a time (milliseconds)
      • \n
    • getCurrentTime() - Returns the current time in the video duration (milliseconds)
      • \n
    • getDuration() - Returns the duration of the video (milliseconds)
      • \n
    • destroy() - Destroy the video player and free resources
      • \n
    • mute(boolean) - Mute the current video
      • \n
    • setVolume() - Set the volume - Must be between 0 and 1.
      • \n
    \n

    Android only

    \n
      \n
    • stop() - Stop the playback - this resets the player and remove the video src
      • \n
    \n

    Breaking Changes

    \n
      \n
    • Android will now attach/detach to the application suspend/resume and de-register/re-register video
      • \n
    • Subtitle support will by default be disabled.
      • \n
    \n

    ExoPlayer Encryption (Android only)

    \n

    Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

    \n
      \n
    • openssl enc -aes-256-ctr -k secret -P --nosalt\nWill output because we aren't using a salt:
      • \n
    \n
    key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
    iv =015E42FF678B2B90B743111A396EF850
    \n

    Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

    \n
    salt=42D57450DAF116BD
    key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
    iv =ED07304DF8D0D0AFA2EB9B13D75BD817
    \n

    Create the Encrypted video file

    \n
      \n
    • openssl enc --nosalt -aes-256-ctr -in small.mp4 -out video.enc -K 2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B -iv 015E42FF678B2B90B743111A396EF850
      • \n
    • \n
        \n
      • you can use -S <your_salt_value> to set the salt value instead of --nosalt
        • \n
      \n
      • \n
    \n

    Contributors

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":73,"lastWeek":947,"lastMonth":4420}},"@arepa/time-range":{"name":"@arepa/time-range","version":"1.0.10","license":"Apache-2.0","readme":"

    Nativescript TimeRange

    \n\n \"npm\"\n\n

    @arepa/time-range

    \n

    Instalation

    \n
    npm install @arepa/time-range
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:tr=\"@arepa/time-range\" on the Page element

    \n
    <Page xmlns:tr=\"@arepa/time-range\">
        <StackLayout class=\"p-20\">
          <tr:TimeRange width=\"100%\" height=\"100%\" drag=\"onDrag\"/>
        </StackLayout>
    </Page>
    \n
    onDrag(ev) {
        console.log('onDrag ', ev.data);
      }
    \n

    Nativescript Angular

    \n
    import { NativeScriptTimeRangeModule } from '@arepa/time-range/angular';

    //addd NativeScriptTimeRangeModule to angular NgModule>imports
    @NgModule({
        imports: [
            NativeScriptTimeRangeModule,
        ],
    })
    \n
    <TimeRange (drag)=\"onDrag($event)\"></TimeRange>
    \n
    onDrag(ev) {
        console.log('onDrag ', ev.data);
      }
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefault valueDescriptioniOSAndroid
    startTimestring00:00The time format is Hh:Mm, for example, 12:00. startTime defines the start time, it is not required.✓✓
    endTimestring00:00The time format is Hh:Mm, for example, 12:00. endTime defines the end time, it is not required.✓✓
    sliderColorstringgraysliderColor defines the background color of the slider. Default is gray.✓✓
    clockLabelColorstringwhiteclockLabelColor defines the color of the numbers.✓✓
    clockTickColorstringwhiteclockTickColor defines the color of the lines not numbers (in the case of Android, also the lines. iOS not have lines).❌✓
    maxDurationMinutesnumber0Set the maximum selectable duration by providing minutes between 0 and 1440❌✓
    sliderRangeColorstringgrayThe color of the active part of the slider wheel.✓✓
    thumbColorstringgrayThe background color of the thumbs.✓✓
    sliderRangeGradientStartstringgraySet the starting gradient color of the active part of the slider wheel. Please note that both sliderRangeGradientStart and sliderRangeGradientEnd need to be configured.❌✓
    sliderRangeGradientMiddlestringgrayOptional for gradient: set the middle gradient color of the active part of the slider wheel.❌✓
    sliderRangeGradientEndstringgraySet the ending gradient color of the active part of the slider wheel.Please note that both sliderRangeGradientStart and trp_sliderRangeGradientEnd need to be configured.❌✓
    timeStepMinutesnumber0Determines at what interval the time should be rounded. Setting it to a less accurate number (e.g. 10 minutes) makes it easier for a user to select his desired time.❌✓
    clockVisiblebooleantrueWhether the clock face in the middle should be visible.✓✓
    clockLabelSizenumber16Whether the clock face in the middle should be visibleThe text size of the hour labels in the clock (1, 2, 3, etc.). This value is recommended to be set as scale-independent pixels (sp).✓✓
    sliderWidthnumber10The width of the slider wheel.✓✓
    thumbIconSizenumber24The size of the thumb icons.❌✓
    thumbSizenumber28The size of both the starting and ending thumb.✓✓
    thumbIconStartResstringnullSet the start thumb icon.✓✓
    thumbIconEndResstringnullSet the end thumb icon.✓✓
    clockFacestringAPPLEThere a two different clock faces (appearance of the inner clock) you can use, both mimicking the Clock apps: APPLE and SAMSUNG✓✓
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arepa/screen-orientation":{"name":"@arepa/screen-orientation","version":"1.0.0","license":"Apache-2.0","readme":"

    screen-orientation

    \n

    NativeScript Plugin change the screen orientation.

    \n\n \"npm\"\n\n

    @arepa/screen-orientation

    \n
    npm install @arepa/screen-orientation
    \n

    Use

    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    getOrientacion()Obtiene la orientación actual de la pantalla" se traduce al inglés como "Gets the current screen orientation.
    setOrientacion(Orientacion)Change the screen orientation. Returns a Promise.
    \n

    Supported orientation types.

    \n

    Orientation

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OrientationDescriptions
    ANYOrientation is unlocked: all orientations are supported.
    PORTRAITChange the screen rotation to PORTRAIT mode.
    PORTRAIT_REVERSEChange the screen rotation to PORTRAIT_REVERSE mode.
    LANDSCAPEChange the screen rotation to LANDSCAPE mode
    LANDSCAPE_REVERSEChange the screen rotation to LANDSCAPE_REVERSE mode
    UNSPECIFIEDDoes not change orientation.
    \n

    ###Orientation types for Android only.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OrientationDescription
    PORTRAIT_SENSORChange the screen rotation to PORTRAIT_SENSOR mode when the mobile is rotated in PORTRAIT or PORTRAIT by rotating the screen 180°.
    LANDSCAPE_SENSORChange the screen rotation to LANDSCAPE_SENSOR mode when the mobile is rotated in LANDSCAPE or LANDSCAPE by rotating the screen 270°.
    \n

    Get the screen orientation.

    \n
    //Gets the current orientation in string format.
    let orientacion = getOrientacion();
    \n

    Change the screen orientation.

    \n
    //change the orientation;
    setOrientacion(Orientacion.ANY).then((res:boolean)=>{
      console.log(res)
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":41}},"nativescript-ui-dataform":{"name":"nativescript-ui-dataform","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI DataForm

    \n\n

    Overview

    \n

    The NativeScript UI DataForm plugin provides an easy and versatile approach for building mobile forms based on a provided data object's public members. Use DataForm to:

    \n
      \n
    • Bind a form to a data object with a single line of code;
      • \n
    • Take advantage of more than 15 built-in editors (or provide your own custom editor);
      • \n
    • Create groups of editors, allow them to be collapsed and style them;
      • \n
    • Display a form in ReadOnly mode;
      • \n
    • Take control over collected data with built-in data validation - use a provided validator or create a custom one.
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-dataform
    \n

    Documentation

    \n

    To use the DataForm plugin, you need to add an instance of RadDataForm and bind the source property to your business object that you want to edit with the form.\nMore information is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":7,"lastWeek":102,"lastMonth":474}},"@nativescript/firebase-performance":{"name":"@nativescript/firebase-performance","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-performance

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use the Firebase Performance Monitoring API in your NativeScript app.

    \n

    \"image\"

    \n

    Set up your app for Firebase

    \n

    You need to set up your app for Firebase before you can enable Firebase Performance Monitoring. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Add the Firebase Performance Monitoring SDK to your app

    \n

    To add the Firebase Performance Monitoring to your app, follow these steps:

    \n
      \n
    1. Install the @nativescript/firebase-performance plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-performance
    \n
      \n
    1. Add the SDK by importing the @nativescript/firebase-performance module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-performance';
    \n

    Add custom tracing

    \n

    You can use custom traces to measure the amount of time it takes for your app to complete a specific task.

    \n

    You start your custom trace by calling the startTrace method with a string to identify the trace. You can then add custom attributes and metrics to the trace. Finally, you stop the trace by calling the stop method.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-performance';
    async function customTrace() {
    \t// Define & start a trace
    \tconst trace = await firebase().perf().startTrace('custom_trace');

    \t// Define trace meta details
    \ttrace.putAttribute('user', 'abcd');
    \ttrace.putMetric('credits', 30);

    \t// Stop the trace
    \tawait trace.stop();
    }
    \n

    Add HTTP Request Tracing

    \n

    To create a trace for a network request, follow these steps:

    \n
      \n
    • Create an instance of the HttpMetric class with the URL to which the request is being made and the HTTP method used.
      • \n
    \n
    const metric = await firebase().perf().newHttpMetric(url, 'GET');
    \n
      \n
    • Add custom attributes to the metric.
      • \n
    \n
    metric.putAttribute('user', 'abcd');
    \n
      \n
    • Start the metric.
      • \n
    \n
    await metric.start();
    \n
      \n
    • Perform the HTTP request and provide response information.
      • \n
    \n
    const response = await fetch(url);
    metric.setHttpResponseCode(response.statusCode);
    metric.setResponseContentType(response.headers['Content-Type']);
    metric.setResponsePayloadSize(response.headers['Content-Length']);
    \n
      \n
    • Stop the metric.
      • \n
    \n
    await metric.stop();
    \n

    The above steps combined would look as follows:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-performance';

    async function getRequest(url) {
    \t// Define the network metric
    \tconst metric = await firebase().perf().newHttpMetric(url, 'GET');

    \t// Define meta details
    \tmetric.putAttribute('user', 'abcd');

    \t// Start the metric
    \tawait metric.start();

    \t// Perform a HTTP request and provide response information
    \tconst response = await fetch(url);
    \tmetric.setHttpResponseCode(response.statusCode);
    \tmetric.setResponseContentType(response.headers['Content-Type']);
    \tmetric.setResponsePayloadSize(response.headers['Content-Length']);

    \t// Stop the metric
    \tawait metric.stop();

    \treturn response.toJSON();
    }

    // Call API
    getRequest('https://api.com').then((json) => {
    \tconsole.log(json);
    });
    \n

    API

    \n

    Performance class

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    performanceAndroid: com.google.firebase.perf.FirebasePerformance = firebase().perf().android;
    \n

    A read-only property that returns the Performance Monitoring instance for Android.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    performanceIOS: FIRPerformance = firebase().perf().ios;
    \n

    A read-only property that returns the Performance Monitoring instance for iOS.

    \n
    \n

    app

    \n
    import { firebase } from '@nativescript/firebase-core';

    performanceApp: FirebaseApp = firebase().perf().app;
    \n

    A read-only property that returns the FirebaseApp instance for the current app.

    \n
    \n

    isPerformanceCollectionEnabled

    \n
    import { firebase } from '@nativescript/firebase-core';

    isPerformanceCollectionEnabled: boolean = firebase().perf().isPerformanceCollectionEnabled;
    // or
    firebase().perf().isPerformanceCollectionEnabled = true;
    \n

    A read-write property that returns true or false depending on whether performance monitoring is enabled or not. You can also set this property to enable or disable performance monitoring.

    \n
    \n

    newHttpMetric()

    \n
    import { firebase } from '@nativescript/firebase-core';

    httpMetric: HttpMetric = firebase().perf().newHttpMetric(url, httpMethod);
    \n

    Creates a new HttpMetric instance, used to represent an HTTP request tracing, with the given URL and httpMethod.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    urlstring
    httpMethodHttpMethod
    \n
    \n

    newTrace()

    \n
    import { firebase } from '@nativescript/firebase-core';

    trace: Trace = firebase().perf().newTrace(identifier);
    \n

    Creates a new Trace instance with the given identifier.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    identifierstring
    \n
    \n

    startTrace()

    \n
    import { firebase } from '@nativescript/firebase-core';

    trace: Trace = firebase().perf().startTrace(identifier);
    \n

    Creates and starts a new Trace instance with the given identifier.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    identifierstring
    \n
    \n

    HttpMetric class

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    httpMetricAndroid: com.google.firebase.perf.metrics.HttpMetric = httpMetric.android;
    \n

    A read-only property that returns the HttpMetrics instance for Android.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    httpMetricIOS: FIRHTTPMetric = httpMetric.ios;
    \n

    A read-only property that returns the HttpMetric instance for iOS.

    \n
    \n

    getAttribute()

    \n
    someAttribute: string = httpMetric.getAttribute(attribute);
    \n

    Returns the value for the specified attribute.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    attributestringThe name of the attribute to retrieve the value for.
    \n
    \n

    getAttributes()

    \n
    attributes: { [key: string]: string } = httpMetric.getAttributes();
    \n
    \n

    putAttribute()

    \n
    httpMetric.putAttribute(attribute, value);
    \n

    For the description of this method, see putAttribute() on the Firebase documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    attributestringThe name of the attribute to set.
    valuestringThe value of the attribute to set.
    \n
    \n

    removeAttribute()

    \n
    httpMetric.removeAttribute(attribute);
    \n

    Remove the specified attribute from the tracing metric.

    \n
    \n

    setHttpResponseCode()

    \n
    httpMetric.setHttpResponseCode(code);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    codenumberThe HTTP response code.
    \n
    \n

    setRequestPayloadSize()

    \n
    httpMetric.setRequestPayloadSize(bytes);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    bytesnumberThe size of the request payload.
    \n
    \n

    setResponseContentType()

    \n
    httpMetric.setResponseContentType(contentType);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    contentTypestringThe content type of the HTTP response. Examples: text/html, application/json
    \n
    \n

    start()

    \n
    httpMetric.start();
    \n

    Marks the start of an HTTP request/response tracing.

    \n
    \n

    stop()

    \n
    httpMetric.stop();
    \n

    Marks the end time of the response and queues the network request metric on the device for transmission.

    \n
    \n

    Trace class

    \n

    android

    \n
    traceAndroid: com.google.firebase.perf.metrics.Trace = trace.android;
    \n

    A read-only property that returns the Trace instance for Android.

    \n
    \n

    ios

    \n
    traceIOS: FIRTrace = trace.ios;
    \n

    A read-only property that returns the Trace instance for iOS.

    \n
    \n

    getAttribute()

    \n
    someAttribute: string = trace.getAttribute(attribute);
    \n

    Returns the value for the specified attribute of the trace.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    attributestringThe name of the attribute to retrieve the value for.
    \n
    \n

    getMetric()

    \n
    someMetric: number = trace.getMetric(metricName);
    \n

    Gets the value of the metric with the given name in the current trace. For more, information see getMetric() on the Firebase documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    metricNamestringThe name of the metric to retrieve the value for.
    \n
    \n

    getMetrics()

    \n
    metrics: { [key: string]: number } = trace.getMetrics();
    \n
    \n

    incrementMetric()

    \n
    trace.incrementMetric(metricName, incrementBy);
    \n

    For the description of this method, see incrementMetric() on the Firebase documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    metricNamestringThe name of the trace metric to increment.
    incrementBynumberThe value to increment the metric by.
    \n
    \n

    putAttribute()

    \n
    trace.putAttribute(attribute, value);
    \n

    For the description of this method, see putAttribute() on the Firebase documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    attributestring
    valuestring
    \n
    \n

    putMetric()

    \n
    trace.putMetric(metricName, value);
    \n

    For the description of this method, see putMetric() on the Firebase documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    metricNamestringThe name of the trace metric to set.
    valuenumberThe value to set the metric to.
    \n
    \n

    removeMetric()

    \n
    trace.removeMetric(metricName);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    metricNamestringThe name of the trace metric to remove from the Trace instance.
    \n
    \n

    start()

    \n
    trace.start();
    \n

    Marks the start time of the trace.

    \n
    \n

    stop()

    \n
    trace.stop();
    \n

    Marks the end time of the trace and queues the trace on the device for transmission.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":28,"lastWeek":121,"lastMonth":2000}},"nativescript-ui-autocomplete":{"name":"nativescript-ui-autocomplete","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI AutoComplete

    \n\n

    Overview

    \n

    Here are some of the features of the NativeScript UI AutoComplete:

    \n
      \n
    • Suggest modes - you can choose to show suggestions in a drop-down list, one suggestion at a time in the text input, or a combination of both;
      • \n
    • Completion modes - StartsWith and Contains which differ in whether the input text will be searched in the whole list with acceptable items or only at the start;
      • \n
    • Display modes - Plain - in which only one item can be selected - and Tokens - allowing multiple selection of suggestions (each displayed as a token).
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-autocomplete
    \n

    Documentation

    \n

    To use the autocomplete plugin, you need to add an instance of RadAutoCompleteTextView.\nOptionally you can set its displayMode, completionMode and suggestMode.\nMore information about the plugin features is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":17,"lastWeek":196,"lastMonth":962}},"@nativescript-community/ui-drawer":{"name":"@nativescript-community/ui-drawer","version":"0.1.25","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-drawer

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Easily add a side drawer (side menu) to your projects.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-drawer

    \n

    \n

    Configuration

    \n

    For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

    \n
    import { install } from '@nativescript-community/ui-drawer';
    install();
    \n

    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    leftDrawerundefinedViewView containing the content for the left side drawer
    rightDrawerundefinedViewView containing the content for the right side drawer
    topDrawerundefinedViewView containing the content for the top side drawer
    bottomDrawerundefinedViewView containing the content for the bottom side drawer
    mainContentundefinedViewView containing the main content of the app
    gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
    backdropTapGestureEnabledtruebooleanAllow tapping the backdrop to close the drawer
    backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
    leftDrawerModeslideMode ('under' or 'slide')The drawer's enter-animation behavior
    rightDrawerModeslideMode ('under' or 'slide')The drawer's enter-animation behavior
    gestureMinDist10numberThe min "swipe" distance to trigger the menu gesture
    gestureHandlerOptionsnullPanGestureHandlerOptionsOptions to customize the pan gesture handler
    leftSwipeDistance40numberThe "left" zone size from where the gesture is recognized
    rightSwipeDistance40numberThe "right" zone size from where the gesture is recognized
    topSwipeDistance40numberThe "top" zone size from where the gesture is recognized
    bottomSwipeDistance40numberThe "bottom" zone size from where the gesture is recognized
    leftOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
    rightOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
    topOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
    bottomOpenedDrawerAllowDragingtruebooleanAllow dragging the opened menu
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    open()voidProgramatically open the drawer
    close()voidProgramatically close the drawer
    toggle()voidProgramatically toggle the state of the drawer
    install()voidInstall gestures
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameEvent DataDescription
    openside, durationDrawer opens
    closeside, durationDrawer closes
    \n

    \n

    Usage in Angular

    \n

    Import the module into your project.

    \n
    import { DrawerModule } from \"@nativescript-community/ui-drawer/angular\";

    @NgModule({
        imports: [
            DrawerModule
        ]
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })

    export class AppModule { }
    \n

    Examples:

    \n
      \n
    • Basic Drawer\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of drawers on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Usage in React

    \n

    Register the plugin in your app.ts.

    \n
    import DrawerElement from '@nativescript-community/ui-drawer/react';
    DrawerElement.register();
    \n

    Examples:

    \n
      \n
    • Basic Drawer\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of drawers on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Usage in Svelte

    \n

    Register the plugin in your app.ts.

    \n
    import DrawerElement from '@nativescript-community/ui-drawer/svelte';
    DrawerElement.register();
    \n

    Examples:

    \n
      \n
    • Basic Drawer\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of drawers on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Usage in Vue

    \n

    Register the plugin in your app.js.

    \n
    import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
    Vue.use(DrawerPlugin);
    \n

    Examples:

    \n
      \n
    • Basic Drawer\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of drawers on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Usage in Vue3

    \n

    Register the plugin in your app.js.

    \n
    import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'

    app.use(DrawerPlugin);
    \n

    Examples:

    \n
      \n
    • Basic Drawer\n
        \n
      • A basic sliding drawer.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of drawers on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":70,"lastWeek":353,"lastMonth":1783}},"@nativescript/template-blank-ng":{"name":"@nativescript/template-blank-ng","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Angular Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-ng --template @nativescript/template-blank-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-ng --template nativescript-app-templates/packages/template-blank-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application component:

    \n
      \n
    • /src/app/app.component - sets up a page router outlet that lets you navigate between pages.
      • \n
    \n

    There is a single blank component that sets up an empty layout:

    \n
      \n
    • /src/app/home/home.component
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":597}},"@nativescript/firebase-firestore":{"name":"@nativescript/firebase-firestore","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-firestore

    \n\n

    Intro

    \n

    This plugin allows you to add Firebase Cloud Firestore to your NativeScript app.

    \n

    \"image\"

    \n

    Set up Firebase

    \n
      \n
    • To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.
      • \n
    \n

    Create your Firestore database

    \n

    To create your Firestore database, follow the instructions at Create a Cloud Firestore database.

    \n

    Add the Firestore SDK to your app

    \n

    To add the Cloud Firestore SDK to your app, install and import the @nativescript/firebase-firestore plugin.

    \n
      \n
    1. Install the plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-firestore
    \n
      \n
    1. To add the Firestore SDK, import the @nativescript/firebase-firestore plugin. You should import the plugin once in your app project and the ideal place to do that is the app bootstrapping file( app.ts, main.ts, etc).
      2. \n
    \n

    Initialize Cloud Firestore

    \n

    To initialize your Firestore database, create its instance by calling the firestore method on the FirebaseApp instance returned by the firebase method imported from the @nativescript/firebase-core plugin.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-firestore';
    const firestore = firebase().firestore();
    \n

    By default, this allows you to interact with Firestore using the default Firebase App used whilst installing Firebase on your platform. However, if you'd like to use Firestore with a secondary Firebase App, pass the secondary app instance when calling the firestore method:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-firestore';

    // create secondary app instance
    const config = new FirebaseOptions();
    const secondaryApp = firebase().initializeApp(config, 'SECONDARY_APP');

    const firestore = firebase().firestore(secondaryApp);
    \n

    Firestore collections and documents

    \n

    Firestore stores data within documents, which are contained within collections. Documents can also contain nested collections. For example, our users would each have their own "document" stored inside the "users" collection.

    \n

    Writing Data

    \n

    Before you write data to Firestore, see Structure your data for the best practices for structuring your data.

    \n

    Adding Documents

    \n

    To add a new document to a collection, first, get the collection instance by calling the collection method on the Firestore instance with the collection's name. Next, call the add method on the CollectionReference instance with the data for the document.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.add({
    \t\tname: 'Ada Lovelace',
    \t\tage: 30,
    \t})
    \t.then(() => {
    \t\tconsole.log('User added!');
    \t});
    \n

    The add method adds the new document to your collection with a random unique ID. If you'd like to specify an ID, call the set method on a DocumentReference instead:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.set({
    \t\tname: 'Ada Lovelace',
    \t\tage: 30,
    \t})
    \t.then(() => {
    \t\tconsole.log('User added!');
    \t});
    \n

    The set method replaces any existing data on a given DocumentReference instance.

    \n

    Updating data

    \n

    To update a document's data, call the update method on the document passing it the object of data to update.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.update({
    \t\tage: 31,
    \t})
    \t.then(() => {
    \t\tconsole.log('User updated!');
    \t});
    \n

    The method also provides support for updating deeply nested values via the dot notation. The following example updates the zipcode property of the address object which is a property of an info object.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.update({
    \t\t'info.address.zipcode': 94040,
    \t})
    \t.then(() => {
    \t\tconsole.log('User updated!');
    \t});
    \n

    Update geolocation points

    \n

    To update geolocation data, instantiate the GeoPoint class with the latitude and longitude and use the instance as the value to update with.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { GeoPoint } from '@nativescript/firebase-firestore';

    firebase()
    \t.firestore()
    \t.doc('users/ABC')
    \t.update({
    \t\t'info.address.location': new GeoPoint(53.483959, -2.244644),
    \t});
    \n\n

    Update timestamps

    \n

    To create a timestamp value, call the serverTimestamp static method on the FieldValue class and pass the timestamp to the update method as shown below. When your code passes the timestamp to the database, the Firebase servers write a new timestamp based on their time, rather than that of the client. This helps resolve any data consistency issues with different client timezones.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { FieldValue } from '@nativescript/firebase-firestore';

    firebase().firestore().doc('users/ABC').update({
    \tcreatedAt: FieldValue.serverTimestamp(),
    });
    \n

    Update data in an array

    \n

    To help manage(adding or removing) the values with an array, the API exposes an arrayUnion and arrayRemove methods on the FieldValue class.

    \n
      \n
    • The code below adds(if it does not exist) 'ABCDE123456' to the fcmTokens array:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.doc('users/ABC')
    \t.update({
    \t\tfcmTokens: firestore.FieldValue.arrayUnion('ABCDE123456'),
    \t});
    \n
      \n
    • The code below removes(if it exists) 'ABCDE123456' from the fcmTokens array:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { FieldValue } from '@nativescript/firebase-firestore';

    firebase()
    \t.firestore()
    \t.doc('users/ABC')
    \t.update({
    \t\tfcmTokens: FieldValue.arrayRemove('ABCDE123456'),
    \t});
    \n

    Removing data

    \n
      \n
    • To delete a document within Cloud Firestore, get the document and call the delete method on the document reference.
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.delete()
    \t.then(() => {
    \t\tconsole.log('User deleted!');
    \t});
    \n
      \n
    • To remove a specific property from a document, rather than the document itself, call the delete method on the FieldValue class:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { FieldValue } from '@nativescript/firebase-firestore';

    firebase().firestore().collection('users').doc('ABC').update({
    \tfcmTokens: FieldValue.delete(),
    });
    \n

    Update data with transactions

    \n

    Transactions are a way to always ensure a data write occurs with the latest information available on the server.

    \n

    Imagine a scenario whereby an app can "like" user posts. Whenever a user presses the "Like" button, a "likes" value (number of likes) on a "Posts" collection document increments. Without transactions, we'd first need to read the existing value and then increment that value in two separate operations.

    \n

    On a high-traffic application, the value on the server could already have changed by the time the operation sets a new value, causing the actual number to not be consistent.

    \n

    Transactions remove this issue by atomically updating the value on the server. If the value changes whilst the transaction is executing, it will retry. This always ensures the value on the server is used rather than the client value.

    \n

    You can read more about transactions at Update data with transactions.

    \n

    To update a document data with a transaction, follow these steps:

    \n
      \n
    1. \n

      Get the reference of the document you want to update.

      \n
      2. \n
    2. \n

      Call the runTransaction method on the database instance to instantiate a transaction. passing it a callback function that receives the transaction instance.

      \n
      3. \n
    3. \n

      In the callback function, read the document obtained in step 1 by passing it to the get method.

      \n
      4. \n
    4. \n

      Update the document by calling the transaction object's update method with the document reference as the first argument and the object with the data to update as the second argument.

      \n
      5. \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    function onPostLike(postId) {
      // 1. Create a reference to the post

    const postReference = firebase().firestore().doc(`posts/${postId}`);
    // 2. Instantiate a transaction.
      return firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const postSnapshot = await transaction.get(postReference);

        if (!postSnapshot.exists) {
          throw '    Post does not exist!';
        }
    // 4. Update the document
        transaction.update(postReference, {
          likes: postSnapshot.data().likes + 1,
        });
      });
    }

    onPostLike('    ABC')
      .then(() => console.log('    Post likes incremented via a transaction'))
      .catch(error => console.error(error));
    \n

    Batched writes

    \n

    If you do not need to read any documents in your operation set, you can execute multiple write operations as a single batch that contains any combination of set, update, or delete operations. A batch of writes completes atomically and can write to multiple documents.

    \n

    To execute a batched write, follow these steps:

    \n
      \n
    1. \n

      Get the reference of the documents to operate on.

      \n
      2. \n
    2. \n

      Create a new WriteBatch instance by calling the batch method on the Firestore database instance.

      \n
      3. \n
    3. \n

      Perform operations() on the batch instance.

      \n
      4. \n
    4. \n

      After calling the batch operations method, commit the batch instance by calling the commit method on the WriteBatch instance.

      \n
      5. \n
    \n

    The example below shows how to delete all documents in a collection in a single operation:

    \n
    import { firebase } from '@nativescript/firebase-core';

    async function massDeleteUsers() {
      // 1. Documents references
      const usersQuerySnapshot = await firebase().firestore().collection('users').get();

      // Create a new batch instance
      const batch = firebase().firestore().batch();
    // Batch operation: delete
      usersQuerySnapshot.forEach(documentSnapshot => {
        batch.delete(documentSnapshot.ref);
      });
    // Commit the batch operation
      return batch.commit();
    }

    massDeleteUsers().then(() => console.log('All users deleted in a single batch operation.'));
    \n

    Secure your data

    \n

    You must understand how to write rules in your Firebase Console to ensure that your data is secure. To learn about Firestore security rules, see Get Started with Cloud Firestore Security Rules.

    \n

    Offline Capabilities

    \n

    Firestore provides out-of-the-box support for offline capabilities. When reading and writing data, Firestore uses a local database that synchronizes automatically with the server. Firestore functionality continues even when users are offline, and automatically handles data migration to the server when they regain connectivity.

    \n

    This functionality is enabled by default. However, you can disable it whenever you need to(e.g. on apps containing sensitive information) by setting the settings property of the Firestore instance to false. You should set the property before any Firestore interaction is performed. Otherwise, it will only take effect on the next app launch:

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().firestore().settings.persistence = false;
    \n

    Read Data

    \n

    Cloud Firestore gives you the ability to read the value of a collection or a document. This can be a one-time read or a read that occurs whenever the data within a query changes.

    \n

    One-time read

    \n

    To read a collection or document once, call the Query.get or DocumentReference.get methods, for a collection or document respectively.

    \n
    import { firebase } from '@nativescript/firebase-core';
    const users = firebase().firestore().collection('users');

    users
    \t.doc(documentId)
    \t.get()
    \t.then((snapshot) => {
    \t\tif (snapshot && !snapshot.exists) {
    \t\t\tconosle.log('Document does not exist');
    \t\t\treturn;
    \t\t}
    \t\tconsole.log(`Full Name: ${snapshot.data()['full_name']} ${snapshot.data()['last_name']}`);
    \t})
    \t.catch((error) => console.error('Failed to add user:', error))    ;
    \n

    Listen to real-time data changes

    \n

    To react to any changes to a collection or a document, call the onSnapshot method on the collection or document with an event handler function. The example below watches for changes in the users collection.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.onSnapshot(
    \t\t(snapshot) => {
    \t\t\tconsole.log('Got Users collection result.');
    \t\t},
    \t\t(error) => {
    \t\t\tconsole.error(error);
    \t\t}
    \t);
    \n

    The example below watches for changes in the userId document:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const unsubscriber = firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc(userId)
    \t.onSnapshot((documentSnapshot) => {
    \t\tconsole.log('User data: ', documentSnapshot.data())    ;
    \t});

    unsubscriber();
    \n

    Firestore snapshots

    \n

    Once a query has returned a result, Firestore returns either a QuerySnapshot (for collection queries) or a DocumentSnapshot (for document queries). These snapshots provide the ability to view the data, view query metadata (such as whether the data was from a local cache), whether the document exists or not and more.

    \n

    Handle QuerySnapshot

    \n

    A QuerySnapshot returned by the get method of a collection query allows you to inspect the collection, such as how many documents exist within it, access to the documents within the collection, any changes since the last query and more.

    \n

    To access the documents within a QuerySnapshot object, call the forEach method:

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase()
    \t.firestore()
    \t.collection('users')
    \t.get()
    \t.then((querySnapshot) => {
    \t\tconsole.log('Total users: ', querySnapshot.size);

    \t\tquerySnapshot.forEach((documentSnapshot) => {
    \t\t\tconsole.log('User ID: ', documentSnapshot.id, documentSnapshot.data())    ;
    \t\t});
    \t});
    \n

    Each child document of a QuerySnapshot is a QueryDocumentSnapshot, which allows you to access specific information about a document (see below).

    \n

    Handle DocumentSnapshot

    \n

    A DocumentSnapshot is returned from a query to a specific document, or as part of the documents returned via a QuerySnapshot. The snapshot provides the ability to view a document's data, metadata and whether a document exists.

    \n
      \n
    • To view a document's data, call the data method on the snapshot:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.get()
    \t.then((documentSnapshot) => {
    \t\tconsole.log('User exists: ', documentSnapshot.exists);

    \t\tif (documentSnapshot.exists) {
    \t\t\tconsole.log('User data: ', documentSnapshot.data())    ;
    \t\t}
    \t});
    \n
      \n
    • A snapshot also provides a helper function to easily access deeply nested data within a document. Call the get method with a dot-notated path:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.firestore()
    \t.collection('users')
    \t.doc('ABC')
    \t.get()
    \t.then((documentSnapshot) => {
    \t\treturn documentSnapshot.get('info.address.zipcode');
    \t})
    \t.then((zipCode) => {
    \t\tconsole.log('Users zip code is: ', zipCode);
    \t});
    \n

    Firestore querying

    \n

    Cloud Firestore offers advanced capabilities for querying collections. Queries work with both one-time reads or subscribing to changes

    \n

    Filtering data

    \n

    To filter documents within a collection, call the where method on a collection reference. Filtering supports equality checks and "in" queries. For example, to filter users whose age is greater than 20 years, call where as follows:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .where('age', '>', 20)
      .get()
      .then(...);
    \n

    Firestore also supports array queries. For example, to filter users who speak English (en) or Italian (it), use the arrayContainsAny filter:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .where('language', 'array-contains-any', ['en', 'it'])
      .get()
      .then(...);
    \n

    To learn more about all of the querying capabilities Cloud Firestore has to offer, see Perform simple and compound queries in Cloud Firestore.

    \n

    Limiting data

    \n

    To limit the number of documents returned from a query, use the limit method on a collection reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .limit(2)
      .get()
      .then(...);
    \n

    You can also limit to the last documents within the collection query by using the limitToLast method:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .orderBy('age')
      .limitToLast(2)
      .get()
      .then(...);
    \n

    Ordering data

    \n

    To order the documents by a specific value, use the orderBy method:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .orderBy('age', descending: true)
      .get()
      .then(...);
    \n

    Start and End Cursors

    \n

    To start and/or end a query at a specific point within a collection, you can pass a value to the startAt, endAt, startAfter or endBefore methods.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .orderBy('age')
      .orderBy('company')
      .startAt([4, 'Alphabet Inc.'])
      .endAt([21, 'Google LLC'])
      .get()
      .then(...);
    \n

    You can also specify a DocumentSnapshot instead of a specific value, by passing it to the startAfterDocument, startAtDocument, endAtDocument or endBeforeDocument methods. For example:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().firestore()
      .collection('users')
      .orderBy('age')
      .startAfterDocument(documentSnapshot)
      .get()
      .then(...);
    \n

    Query Limitations

    \n

    Cloud Firestore does not support the following types of queries:

    \n
      \n
    • Queries with range filters on different fields, as described in the previous section.
      • \n
    • Logical OR queries. In this case, you should create a separate query for each OR condition and merge the query results in your app.
      • \n
    • Queries with a != clause. In this case, you should split the query into a greater-than query and a less-than query. For example, the query clause where("age", '!=', 30) is not supported. However, you can get the same result set by combining two queries, one with the clause where("age", '<', 30) and one with the clause where("age", '>', 30).
      • \n
    \n

    API

    \n

    Firestore class

    \n

    This class is a wrapper for the FirebaseFirestore class that represents a Cloud Firestore database and is the entry point for all Cloud Firestore operations.

    \n

    app

    \n
    firebaseApp: = firestore.app
    \n

    The FirebaseApp instance through which the Firestore database is accessed.

    \n

    android

    \n
    firestoreAndroid: com.google.firebase.firestore.FirebaseFirestore = firebase().firestore().android
    \n

    The Firestore database instance for Android.

    \n

    ios

    \n
    firestoreIOS: FIRFirestore = firebase().firestore().ios
    \n

    The Firestore database instance for iOS.

    \n
    \n

    settings

    \n
    settings: Settings = firebase().firestore().settings
    // 
    settings = new Settings()

    firebase().firestore().settings = settings
    \n

    For the description, see getFirestoreSettings() on the FirebaseFirestore class documentation.

    \n
    \n

    useEmulator()

    \n
    firebase().firestore().useEmulator(host, port)
    \n

    For the description, see useEmulator on the FirebaseFirestore class documentation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    hoststring
    portnumber
    \n
    \n

    batch()

    \n
    writeBatch: WriteBatch = firebase().firestore().batch()
    \n

    Creates a write batch instance. For more information, see batch() on the FirebaseFirestore class documentation.

    \n
    \n

    collection()

    \n
    collectionReference: CollectionReference = firebase().firestore().collection(collectionPath)
    \n

    Gets the CollectionReference in the database at the specified path.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    collectionPathstringThe slash-separated path string of the collection.
    \n
    \n

    clearPersistence()

    \n
    firebase().firestore().clearPersistence().then(()=>{
    \t// do something after clearing
    }).catch( (err) =>{

    })
    \n

    For the description, see clearPersistence() on the FirebaseFirestlre class documentation.

    \n
    \n

    collectionGroup()

    \n
    collectionGroup: Query = firebase().firestore().collectionGroup(collectionId)
    \n

    For the description, see the collectionGroup method on the documentation of the FirebaseFirestore class.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    collectionIdstring
    \n
    \n

    disableNetwork()

    \n
    firebase().firestore().disableNetwork().then(()=>{
    \t// do something after disabling network
    }).catch( (err) =>{

    })
    \n

    For the description, see the description of the disableNetwork() method on the FirebaseFirestore documentation.

    \n
    \n

    enableNetwork()

    \n
    firebase().firestore().enableNetwork().then(()=>{
    \t// do something after disabling network
    }).catch( (err) =>{

    })
    \n

    For the description, see the description of the enableNetwork() method on the FirebaseFirestore documentation.

    \n
    \n

    doc()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    \n

    Gets the DocumentReference instance for the document at the specified path.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    documentPathstringThe slash-separated path string for a document in the database.
    \n
    \n

    runTransaction()

    \n
    firebase().firestore().runTransaction(updateFunction).then((result: any)=>{

    }).catch((err)=>{

    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    updateFunction(transaction: Transaction) => Promise<any>
    \n
    \n

    terminate()

    \n
    firebase().firestore().terminate().then(()=>{
    \t// do something after disabling network
    }).catch( (err) =>{

    })
    \n

    For the description, see the description of the terminate() method on the FirebaseFirestore class documentation.

    \n
    \n

    waitForPendingWrites()

    \n
    firebase().firestore().waitForPendingWrites().then(()=>{
    \t// do something after disabling network
    }).catch( (err) =>{

    })
    \n

    For the description, see the description of the waitForPendingWrites method on the FirebaseFirestore class documentation.

    \n
    \n

    CollectionReference object

    \n

    An object that represents a collection on the database.

    \n

    id

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReferenceId: string = collectionReference.id
    \n

    A readonly property that returns the ID of the collection.

    \n
    \n

    path

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReferencePath: string = collectionReference.path
    \n

    A readonly property that returns the path of the collection.

    \n
    \n

    parent

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReferenceParent: DocumentReference = collectionReference.parent
    \n

    A readonly property that returns the DocumentReference containing this collection, if the collection is a sub-collection. If the collection is a root collection, null gets returned.

    \n
    \n

    ios

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReferenceIOS: FIRCollectionReference = collectionReference.ios
    \n

    A readonly property that returns the CollectionReference instance for iOS.

    \n
    \n

    android

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReferenceAndroid: com.google.firebase.firestore.CollectionReference = collectionReference.android
    \n

    A readonly property that returns the CollectionReference instance for Android.

    \n
    \n

    add()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReference.add(dataObject).then((docReference: DocumentReference<T>)=>{

    }).catch((err)=>{

    })
    \n

    Adds a new document to this collection with the specified data, assigning it a document ID automatically.

    \n
    \n

    doc()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    document: IDocumentReference<T> = collectionReference.doc(documentPath).doc(documentPath)
    \n

    Gets a DocumentReference instance that refers to the document at the specified path within this collection.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    documentPathstringThe document path.
    \n
    \n

    endAt()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.endAt(snapshot)
    // or 
    query: Query = collectionReference.endAt(fieldValues)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    snapshotDocumentSnapshot
    fieldValuesDocumentSnapshot | FieldValue[]
    \n
    \n

    endBefore()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.endBefore(snapshot)
    // or 
    query: Query = collectionReference.endBefore(fieldValues)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    snapshotDocumentSnapshot
    fieldValuesDocumentSnapshot | FieldValue[]
    \n
    \n

    get()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReference.get(options).then((querySnapshot: QuerySnapshot) =>{

    }).catch(err =>{

    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    optionsGetOptionsOptional
    \n
    \n

    limit()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.limit(limit)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    limitnumberOptional
    \n
    \n

    limitToLast()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.limitToLast(limitToLast)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    limitToLastnumberOptional
    \n
    \n

    onSnapshot()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    collectionReference.onSnapshot(observer)
    //OR
    collectionReference.onSnapshot(options,observer)
    //OR
    collectionReference.onSnapshot(onNext, onError, onCompletion)
    //OR
    collectionReference.onSnapshot(options,onNext, onError,onCompletion)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    observerIObserver
    optionsSnapshotListenOptions
    onNext(snapshot: QuerySnapshot) => voidOptional
    onError(error: Error) => voidOptional
    onCompletion() => voidOptional
    \n

    Observer interface

    \n
    interface IObserver { 
    \tcomplete?: () => void;
    \t error?: (error: Error) => void;
    \tnext?: (snapshot: QuerySnapshot) => void 
    \t}
    \n
    \n

    orderBy()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.orderBy(fieldPath,directionStr)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    fieldPathkeyof DocumentData
    directionStr'asc' | 'desc'Defaults to 'asc'
    \n
    \n

    startAfter()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.startAfter(snapshot)
    // or 
    query: Query = collectionReference.startAfter(fieldValues)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    snapshotDocumentSnapshot
    fieldValuesDocumentSnapshot | FieldValue[]
    \n
    \n

    startAt()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.startAt(snapshot)
    // or 
    query: Query = collectionReference.startAt(fieldValues)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    snapshotDocumentSnapshot
    fieldValuesDocumentSnapshot | FieldValue[]
    \n
    \n

    where()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    query: Query = collectionReference.where(fieldPath,opStr,value)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    fieldPathFieldPath | keyof DocumentData
    opStrWhereFilterOp
    valueany
    \n
    \n

    isEqual()

    \n
    collectionReference = firebase().firestore().collection(collectionPath)
    isEqual: boolean = collectionReference.isEqual(other)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    otherany
    \n
    \n

    DocumentReference object

    \n

    An object that represents a document on the database.

    \n

    firestore

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentReferenceFirestore: Firestore = document.firestore
    \n

    A readonly property that returns the Firestore database instance for this document.

    \n
    \n

    id

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentReferenceId: string = document.id
    \n

    A readonly property that returns the ID of the doocument.

    \n
    \n

    path

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentPath: string = document.path
    \n

    A readonly property that returns the path of the document.

    \n
    \n

    parent

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentParent: CollectionReference = document.parent
    \n

    A readonly property that returns the CollectionReference that contains this document.

    \n
    \n

    ios

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentIOS: FIRDocumentReference = document.ios
    \n

    A readonly property that returns the DocumentReference instance for iOS.

    \n
    \n

    android

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    documentAndroid: com.google.firebase.firestore.DocumentReference = document.android
    \n

    A readonly property that returns the DocumentReference instance for Android.

    \n
    \n

    collection()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    document.collection(collectionPath)
    \n
    \n

    delete()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    document.delete().then(()=>{
    \t//
    }).catch(err =>{

    })
    \n

    Asynchronously delete this document.

    \n
    \n

    get()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \t//handle the document data
    }).catch(err =>{

    })
    \n

    Reads the data from the document.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    optionsGetOptionsOptional settings object for the get operation.
    \n

    GetOptions interface

    \n
    enum GetOptions {
    \tDefault = 'default',
    \tServer = 'server',
    \tCache = 'cache',
    }
    \n
    \n

    set()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    document.set(data, options).then(()=>{

    }).catch(err =>{

    })
    \n

    Overwrites the data of this document with the specified data, if the document exists. Otherwise, it creates the document and saves the data to the document.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    dataanyThe data to save.
    optionsSetOptionsOptional settings object for the set operation.
    \n

    SetOptions interface

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDescription
    mergeundefined | false | trueFor the description, see merge on the Firebase documentation.
    mergeFieldsstring[] | IFieldPath[]For the description, see mergeFields andmergeFields on the Firebase documentation.
    \n
    \n

    onSnapshot()

    \n
    document: DocumentReference = firebase().firestore().doc(documentPath)
    document.onSnapshot(observer)
    \n

    Allows you to add a function to listen for the document's real-time changes event. The onSnapshot method has the following additional overloads:

    \n
    document.onSnapshot(observer)
    //OR
    document.onSnapshot(options,observer)
    //OR
    document.onSnapshot(onNext, onError, onCompletion)
    //OR
    document.onSnapshot(options,onNext, onError,onCompletion)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    observerIObserver
    optionsSnapshotListenOptions
    onNext(snapshot: QuerySnapshot) => voidOptional
    onError(error: Error) => voidOptional
    onCompletion() => voidOptional
    \n
    \n

    update()

    \n
    update(data).then(()=>{

    }).catch(err =>{

    })
    //OR
    update(field,value,moreFieldsAndValues).then(()=>{

    }).catch(err =>{

    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    data`Partial<{ [K in keyof T]: FieldValueT[K] }>)`
    fieldFieldPath
    valueany
    moreFieldsAndValuesany[]
    \n

    Allows you to update this document with the specified data.

    \n

    DocumentSnapshot object

    \n

    exists

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocExists: boolean = snapshot.exists
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns true if the document exists or false otherwise.

    \n
    \n

    id

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocID: string = snapshot.id
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns the ID of the snapshot.

    \n
    \n

    metadata

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tsnapshotMetadata: SnapshotMetadata = snapshot.metadata
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns metadata about the snapshot, describing the state of the snapshot.

    \n
    \n

    ref

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocReference: DocumentReference = snapshot.ref
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns the DocumentReference instance of the document.

    \n
    \n

    android

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocumentSnapshotAndroid: com.google.firebase.firestore.DocumentSnapshot = snapshot.android
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns the DocumentSnapshot instance for Android.

    \n
    \n

    ios

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocumentSnapshotIOS: FIRDocumentSnapshot = snapshot.ios
    }).catch(err =>{
    // handle any error here
    })
    \n

    A readonly property that returns the DocumentSnapshot instance for iOS.

    \n
    \n

    data()

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocumentSnapshotData: any = snapshot.data()
    }).catch(err =>{
    // handle any error here
    })
    \n

    Extracts the fields of the document data.

    \n
    \n

    get()

    \n
    document.get(options).then((snapshot: DocumentSnapshot<T>)=>{
    \tdocumentField: fieldType = snapshot.get(fieldPath)
    }).catch(err =>{
    // handle any error here
    })
    \n

    Returns the value for the specified field. If the field does not exist, it returns null.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    fieldPathstring | number | FieldPath"Returns the value at the field or null if the field doesn't exist."
    \n
    \n

    Transaction class

    \n

    android

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const transactionAndroid: com.google.firebase.firestore.Transaction  = transaction.android;

      });
    \n

    Returns the Transaction object for Android.

    \n
    \n

    ios

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const transactionIOS: FIRTransaction = transaction.ios;

      });
    \n

    Returns the Transaction object for iOS.

    \n
    \n

    get()

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const documentSnapshot: DocumentSnapshot = await transaction.get(documentReference);

      });
    \n

    Reads the specified document.

    \n
    \n

    delete()

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        transactionAfterDelete = transaction.delete(documentReference);

      });
    }
    \n

    Deletes the specified DocumentReference instance.

    \n
    \n

    update()

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const documentSnapshot = await transaction.get(documentReference);

        if (!documentSnapshot.exists) {
          throw '    Document does not exist!';
        }
    // 4. Update the document
        transactionAfterUpdate = transaction.update(documentReference, data);
    \t// OR 
    \ttransactionAfterUpdate = transaction.update(documentReference, field, value, moreFieldsAndValues);
    \t//OR
    \ttransactionAfterUpdate = transaction.update(documentReference, data);


      });
    \n

    Updates the specified document with the provided data and return the transaction.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    documentReferenceDocumentReference objectThe DocumentReference instance to update.
    fieldanyThe document field to update.
    valueanyThe new value to set.
    moreFieldsAndValuesany[]
    \n
    \n

    set()

    \n
    firestore().runTransaction(async transaction => {
        // 3. Read the document's data
        const documentSnapshot = await transaction.get(documentReference);

    // 4. Set document data
        transactionAfterSet = transaction.set(documentReference, data);
      });
    \n

    Saves data to the specified DocumentReference. If the document does not exist, it creates the document.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":23,"lastWeek":53,"lastMonth":1897}},"nativescript-android-fs":{"name":"nativescript-android-fs","version":"1.3.0","license":"MIT","readme":"

    NativeScript Android Filesystem

    \n

    This plugin allows Android apps to work with files and folders in external/shared storage, and it's very easy to use. It works on all Android versions, including 11+.

    \n

    Features

    \n
      \n
    • Save to external storage
      • \n
    • Import to app's files in internal storage
      • \n
    • Check if a file exists
      • \n
    • Create text files
      • \n
    • Read text files
      • \n
    • Delete files
      • \n
    • List directories and files
      • \n
    • Check permission to modify a file (Android 11)
      • \n
    \n

    Instalation

    \n
    tns plugin add nativescript-android-fs
    \n

    Usage

    \n
    let storage = require(\"nativescript-android-fs\");
    \n

    First instructions

    \n

    This plugin works by copying files to and from internal and external storage. All files you want to save inside a folder in external storage must come from your /data/user/0/com.package.name/files. For example, if you want to transfer "my-image.jpg" to /Pictures, that file must be inside your app internal storage located at /data/user/0/com.package.name/files. You can get the direct path to your app files directory by using this: application.android.context.getFilesDir(), but feel free to use any method you want, as long as it returns the right path to the files folder inside your app internal storage. When you import files to your app, they'll be saved in that folder too.

    \n

    Android 11

    \n

    With Android 11, apps don't need to request permission to use public folders, such as Documents, Download, Pictures, Music, etc., but your app can only read and modify files it creates. For example, if someone installs your app and saves a backup in /Documents/backup, and then uninstalls the app, when he installs it again, that backup file can't be used by the app anymore. So let your users know about this important detail.

    \n

    Also, except for Documents and Download, only the appropriate files format can be saved in Pictures (images), Music (audio), Movies (videos), and other public folders.

    \n

    Android 10 and below

    \n

    On Android 10 devices, you can disable scoped storage if you want to by adding the following to your AndroidManifest.xml:

    \n
    <application android:requestLegacyExternalStorage=\"true\">
    \n

    For all the other versions below 10, you also need to add the following lines:

    \n
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" android:maxSdkVersion=\"29\"/>
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" android:maxSdkVersion=\"29\"/>
    \n

    And, of course, you need to request user permission in your app code. You can use the nativescript-permissions plugin for that task.

    \n

    List of arguments

    \n

    Before presenting the functions that you can use in this plugin, let's know their arguments first.

    \n

    folder

    \n

    The target folder with or without a subfolder where you want to save files. If the folder or subfolder doesn't exist, it'll be created automatically. On Android 11, only public folders can be created in the root directory. For example, if you target the Download folder but it doesn't exist, the plugin will create it.

    \n

    Important: Don't mistake Download for Downloads because they're not the same. The latter won't be created on Android 11.

    \n

    Example:

    \n
    \"/Documents\"
    \"/Documents/myfolder\"
    \"/Pictures\"
    \n

    Always begin the string with a slash "/" but don't include one at the end. If you pass an empty string "", files will be saved in the root directory on Android 10 and below. On Android 11, apps can't use the root directory.

    \n

    fileName

    \n

    When saving to external storage, it's the name of the file located in /data/user/0/com.package.name/files. When importing to your app's folder, it's the name of the file located in the external storage.

    \n

    Example:

    \n
    \"myfile.txt\"
    \"myimage.jpg\"
    \n

    text

    \n

    The string with the text you want to write to the file created with the storage.create function.

    \n

    type

    \n

    This argument is only used in the storage.content function when you want to retrieve a list of files or directories. So you should specify if it's "file" or "directory" what you want.

    \n

    Functions

    \n

    storage.save

    \n

    It copies a file from /data/user/0/com.package.name/files to external storage.

    \n
    storage.save(folder, fileName);
    \n

    Example:

    \n
    let file = storage.save(\"/Documents\", \"my-file.doc\");

    if (file) {

    // File copied to external storage

    }
    \n

    If a file with the same name already exists inside the destination folder, it'll be overwritten on Android 10 and below, but on Android 11, the function will fail if your app doesn't own the file.

    \n

    storage.import

    \n

    It copies a file from external storage to /data/user/0/com.package.name/files.

    \n
    storage.import(folder, fileName);
    \n

    Example:

    \n
    let file = storage.import(\"/Pictures\", \"my-picture.jpg\");

    if (file) { 

    // File successfully imported

    }
    \n

    On Android 11, no file will be imported if your app doesn't own the file.

    \n

    storage.check

    \n

    It checks if a file exists. It’ll check all files, including the ones not belonging to your app. It’s useful to avoid conflicts in file names because, on Android 11, an app can’t override a file it didn’t create.

    \n
    storage.check(folder, fileName);
    \n

    Example:

    \n
    let file = storage.check(\"/Download\", \"my-file.txt\");

    if (file) {

    // File exists

    }
    \n

    storage.create

    \n

    It creates a text file.

    \n
    storage.create(folder, fileName, text);
    \n

    Example:

    \n
    let file = storage.create(\"/Documents\", \"new-file.txt\", \"Hey, this is my file!\");

    if (file) {

    // File created

    }
    \n

    storage.read

    \n

    It returns a string with the content of a text file.

    \n
    storage.read(folder, fileName);
    \n

    Example:

    \n
    let text = storage.read(\"/Documents\", \"my-file.txt\");
    \n

    storage.content

    \n

    It returns an array with a list of files or directories. On Android 11, you can only retrieve files created by your app.

    \n
    storage.content(type, folder);
    \n

    Example:

    \n
    let files = storage.content(\"file\", \"/Documents\");
    let directories = storage.content(\"directory\", \"/DCIM\");
    \n

    storage.delete

    \n

    It deletes any file on Android 10 and below, and only the files created by your app on Android 11.

    \n
    storage.delete(folder, fileName);
    \n

    Example:

    \n
    let file = storage.delete(\"/Documents\", \"my-file.doc\");

    if (file) {

    // File deleted

    }
    \n

    storage.permission (for Android 11 and above)

    \n

    Before your app can do anything with a file on Android 11, it first needs to know if it has permission. For example, an app can't read, replace, or rename a file without being the owner of that file.

    \n
    storage.permission(folder, fileName);
    \n

    Example:

    \n
    let file = storage.permission(\"/Documents\", \"my-file.doc\");

    if (file) {

        // Yes, I can work with that file.
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":33}},"nativescript-onegini":{"name":"nativescript-onegini","version":"1.0.1","license":"Apache-2.0","readme":"

    Onegini NativeScript Plugin

    \n

    The Onegini NativeScript Plugin is a NativeScript plugin that allows you to utilize the Onegini Mobile SDKs in your NativeScript applications.

    \n","downloadStats":{"lastDay":2,"lastWeek":12,"lastMonth":33}},"@nativescript/firebase-database":{"name":"@nativescript/firebase-database","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-database

    \n\n

    Intro

    \n

    A plugin that allows you to add Firebase Realtime Databse to your NativeScript app.

    \n
    \n

    Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase.\nNativeScript Firebase provides integration with the Android & iOS Firebase SDKs, supporting both realtime data sync and offline capabilities.

    \n
    \n

    \"image\"

    \n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-database
    \n

    Use @nativescript/firebase-database

    \n
    \n

    Note The Firebase documentation provides great examples of best practices on how to structure your data. We highly recommend reading the guide before building out your database.

    \n
    \n

    Import the plugin

    \n

    Make the Realtime Database SDK available to your app by importing it once, in the app.ts file.

    \n
    import '@nativescript/firebase-database'; // only needs to be imported 1x
    \n

    Create a database instance

    \n

    To create a new Firebase Database instance, call the database method on the firebase instance as follows:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const database = firebase().database();
    \n

    By default, this allows you to interact with Firebase Database using the default Firebase App used whilst installing Firebase on your platform. If however you'd like to use a secondary Firebase App, pass the secondary app instance when calling the database method:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-database';

    // create secondary app instance
    const config = new FirebaseOptions();
    const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

    const database = firebase().database(secondaryApp);
    \n

    Get or create a reference

    \n

    A core concept to understanding Realtime Database is references - a reference to a specific node within your database. A node can be a specific property or sub-nodes.

    \n

    To create a Reference, call the ref method on the database instance passing it the path of the reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const reference = firebase().database().ref('/users/123');
    \n

    Read a reference data

    \n

    You can read a reference data in two ways: once or whenever there is a change in the reference or its children.

    \n

    One-time read

    \n

    To read the value once, call the once method on a reference passing it the value event name:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.database()
    \t.ref('/users/123')
    \t.once('value')
    \t.then((snapshot) => {
    \t\tconsole.log('User data: ', snapshot.val())    ;
    \t});
    \n

    Listen to real-time changes in a reference

    \n

    To set up an active listener to react to any changes to the node and its children, call the on method passing it the value event as the first parameter and the event handler as the second paramater:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.database()
    \t.ref('/users/123')
    \t.on('value', (snapshot) => {
    \t\tconsole.log('User data: ', snapshot.val());
    \t});
    \n

    The event handler will be called straight away with the snapshot data, and further called when any changes to the node occur.

    \n

    Listen to events of a reference's child

    \n

    To listen any of the following events of a reference's child, call the on method on the reference passing it the event name as the first argument and the event handler as the second argument.\npass the event name to the on method as first argument and, as a second argument, pass\nThe above example demonstrates how to subscribe to events whenever a value within the node changes. In some cases, you may need to only subscribe to events whenever a child node is

    \n
      \n
    • child_added
      • \n
    • child_changed
      • \n
    • child_removed\n_ child_moved
      • \n
    \n

    If you are listening to a node with many children, only listening to data you care about helps reduce network bandwidth and speeds up your application.

    \n
    import { firebase } from '@nativescript/firebase-core';

    const onChildAdd = firebase()
    \t.database()
    \t.ref('/users')
    \t.on('child_added', (snapshot) => {
    \t\tconsole.log('A new node has been added', snapshot.val());
    \t});

    // Stop listening for updates when no longer required
    firebase().database().ref('/users').off('child_added', onChildAdd);
    \n

    Remove a reference event listener

    \n

    To unsubscribe from an event, call the off method on the reference passing it the event name and the function that the on method returned. This can be used within any useEffect hooks to automatically unsubscribe when the hook needs to unsubscribe itself.

    \n
    import { firebase } from '@nativescript/firebase-core';

    const onValueChange = firebase()
    \t.database()
    \t.ref(`/users/${userId}`)
    \t.on('value', (snapshot) => {
    \t\tconsole.log('User data: ', snapshot.val());
    \t});

    // Stop listening for updates when no longer required
    firebase().database().ref(`/users/${userId}`).off('value', onValueChange);
    \n

    Data querying

    \n

    Realtime Database provides support for basic querying of your data. When a reference node contains children, you can both order & limit the returned results.

    \n

    If your application requires more advanced query capabilities, it is recommended you use Cloud Firestore. For available query API, see the Query class.

    \n

    Ordering data

    \n

    By default, results are ordered based on the node keys. However, if you are using custom keys you can order your data by calling one of the orderBy* methods a Query instance.

    \n

    For example, if all of the children nodes are scalar values (string, number or boolean) you can use the orderByValue method, and Firebase will automatically order the results. The example below would return the def node before the abc node:

    \n
    import { firebase } from '@nativescript/firebase-core';

    /*
     * {
     *   'scores': {
     *     'abc: 30,
     *     '    def': 50,
     *   }
     * }
     */

    const scores = await firebase().database().ref('    scores').orderByValue().once('value');
    \n

    Please note that the ordering will not be respected if you do not use the forEach method provided on the DataSnapshot.

    \n
    scores.forEach((snapShot)=>{
    \t// do someting
    })
    \n

    Limit the number of results

    \n

    You can limit the number of results returned from a query by using one of the limitTo* methods. For example, to limit to the first 10 results, you call the limitToFirst(10) on the reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const users = firebase().database().ref('users').limitToFirst(10).once('value');
    \n

    Firebase also provides the ability to return the last set of results in a query via the limitToLast method.

    \n

    Instead of limiting to a specific number of documents, you can also start from, or end at a specific reference node value:

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().database().ref('users').orderByChild('age').startAt(21).once('value');
    \n

    Writing data

    \n

    You write data to a reference using either the set or update method.

    \n

    Setting data

    \n

    Calling the set method on a Reference overwrites all of the existing data at that reference node. The value can be anything; a string, number, object etc:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.database()
    \t.ref('/users/123')
    \t.set({
    \t\tname: 'Ada Lovelace',
    \t\tage: 31,
    \t})
    \t.then(() => console.log('Data set.'));
    \n

    If you set the value to null, Firebase will automatically class the node as removed, and delete it from the database.

    \n

    Updating data

    \n

    Rather than overwriting all existing data, the update method updates any existing data on the reference node. Firebase automatically merges the data depending on what currently exists.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.database()
    \t.ref('/users/123')
    \t.update({
    \t\tage: 32,
    \t})
    \t.then(() => console.log('Data updated.'));
    \n

    Generate a new child reference

    \n

    To generate a new child reference for a reference, call the push on the reference optionally passing the value to store.\nThe push method automatically generates a new key. To store a value in the child reference, call the set method passing the value to store.

    \n
    import { firebase } from '@nativescript/firebase-core';

    const newReference = firebase().database().ref('/users').push();

    console.log('Auto generated key: ', newReference.key);

    newReference
    \t.set({
    \t\tage: 32,
    \t})
    \t.then(() => console.log('Data updated.'));
    \n

    The keys generated are ordered to the current time, so the list of items returned from Firebase will be chronologically sorted by default.

    \n

    Remove data from a reference

    \n

    To remove data from a reference, call the remove method on the reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().database().ref('/users/123').remove();
    \n

    Optionally, you can also set the value of a reference node to null to remove it from the database:

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().database().ref('/users/123').set(null);
    \n

    Save data as transactions

    \n

    Transactions are a way to always ensure a write occurs with the latest information available on the server. Transactions never partially apply writes & all writes execute at the end of a successful transaction.

    \n

    Imagine a scenario where an app can "like" user posts. Whenever a user presses the "Like" button, the /likes/:postId value (number of likes) on the database increments. Without transactions, we'd first need to read the existing value and then increment that value in two separate operations.

    \n

    On a high-traffic application, the value on the server could already have changed by the time the operation sets a new value, causing the actual number to not be consistent.

    \n

    Transactions remove this issue by atomically updating the value on the server. If the value changes whilst the transaction is executing, it will retry. This always ensures the value on the server is used rather than the client value.

    \n

    To execute a new transaction, call the transaction method on a reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    function onPostLike(postId) {
    \tconst reference = firebase().database().ref(`/likes/${postId}`);

    \t// Execute transaction
    \treturn reference.transaction((currentLikes) => {
    \t\tif (currentLikes === null) return 1;
    \t\treturn currentLikes + 1;
    \t});
    }

    // When post \"567\" is liked
    onPostLike('567').then((transaction) => {
    \tconsole.log('New post like count: ', transaction.snapshot.val())    ;
    });
    \n

    API

    \n

    Database class

    \n

    The database class has the following members.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    androidcom.google.firebase.database.FirebaseDatabaseA readonly database instance for Android.
    iosFIRDatabaseA readonly database instance for iOS.
    appFirebaseAppreadonly
    persistenceCacheSizeBytesnumber
    persistenceEnabledboolean
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    constructor(app?: FirebaseApp)voidCreates a Firebase Realtime Database instance.
    useEmulator(host: string, port: number)voidFor the description, see useEmulator on Firebase documentation.
    refFromURL(url: string)ReferenceFor the description, see refFromURL on Firebase documentation.
    setLoggingEnabled(enabled: boolean)void
    ref(path?: string)ReferenceReturns a Reference instance.
    goOffline()voidFor the description, see goOffline on Firebase documentation.
    goOnline()voidFor the description, see goOnline on Firebase documentation.
    \n

    Reference class

    \n

    The Reference class has the following properties:

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    androidcom.google.firebase.database.ReferenceA readonly native Android instance the Reference class.
    iosFIRDatabaseReferenceA readonly native iOS instance the Reference class.
    keystringreadonly. For the description, see key on Firebase documentation.
    parentReferencereadonly. For the description, see parent on Firebase documentation.
    refReferencereadonly. For the description, see ref on Firebase documentation.
    rootReferencereadonly. For the description, see root on Firebase documentation.
    \n

    Methods

    \n

    The Reference class has the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturns
    child(path: string)Reference
    onDisconnect()OnDisconnect
    push(value?: any, onComplete?: () => void)IThenableReference
    remove(onComplete?: (error: FirebaseError) => void)Promise<void>
    set(value: any, onComplete?: (error: FirebaseError) => void)Promise<void>
    `setPriority(priority: stringnumber, onComplete?: (error: FirebaseError) => void)`
    `setWithPriority(newVal: any, newPriority: stringnumber, onComplete?: (error: FirebaseError) => void)`
    transaction(transactionUpdate: (currentData: object) => object, onComplete?: (error: FirebaseError, committed: boolean, finalResult: any) => void, applyLocally: boolean = true)Promise<TransactionResult>
    update(values: { [key: string]: any }, onComplete?: (error: FirebaseError) => void)Promise<void>
    \n

    OnDisconnect class

    \n
    Properties
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    androidcom.google.firebase.database.OnDisconnectreadonly
    iosFIRDatabaseReferencereadonly
    \n
    Methods
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    cancel(onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see cancel on Firebase documentation.
    remove(onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see remove on Firebase documentation.
    set(value: any, onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see set on Firebase documentation.
    `setWithPriority(value: any, priority: stringnumber, onComplete?: (error: FirebaseError) => void)`Promise<void>
    update(values: { [key: string]: any }, onComplete?: (error: FirebaseError) => void)Promise<void>For the description, see update on Firebase documentation.
    \n

    Query class

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    androidcom.google.firebase.database.QueryA readonly Android instance of the Query class.
    iosFIRDatabaseQueryA readonly iOS instance of the Query class.
    refReferenceA Reference instance to the Query's location.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    `endAt(value: stringnumberboolean, key?: string)`
    `equalTo(value: stringnumberboolean, key?: string)`
    keepSynced(bool: boolean)
    limitToFirst(limit: number)QueryFor the description, see limitToFirst on Firebase documentation.
    limitToLast(limit: number)QueryFor the description, see limitToLast on Firebase documentation.
    off(eventType?: EventType, callback?: (a: DataSnapshot, b: string) => void, context?: Record<string, any>)void
    `on(eventType: EventType, callback: (data: DataSnapshot, previousChildKey: string) => void, cancelCallbackOrContext?: (a: FirebaseError) => voidRecord<string, any>, context?: Record<string, any>)`(a: DataSnapshot, b: string) => void
    `once(eventType: EventType, successCallback?: (a: DataSnapshot, b: string) => any, failureCallbackContext?: (a: FirebaseError) => voidRecord<string, any>): Promise`
    orderByChild(path: string)QueryFor the description, see orderByChild on Firebase documentation.
    orderByKey()QueryFor the description, see orderByKey on Firebase documentation.
    orderByPriority()QueryFor the description, see orderByPriority on Firebase documentation.
    orderByValue()QueryFor the description, see orderByValue on Firebase documentation.
    `startAt(value: stringnumberboolean, key?: string)`
    \n

    DataSnapShot class

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    androidcom.google.firebase.database.DataSnapshotreadonly
    iosFIRDataSnapshotreadonly
    keystringreadonly
    refReferencereadonly
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    child(path: string)DataSnapshotFor the description, see child.
    exists()booleanFor the description, see exists on Firebase documentation.
    exportVal()voidFor the description, see exportVal on Firebase documentation.
    forEach(action: (child: DataSnapshot) => true)booleanFind the descriptin forEach
    getPriority()string | numberFor the description, see getPriority on Firebase documentation.
    hasChild(path: string)booleanFor the description, see hasChild on Firebase documentation.
    hasChildren() booleanFor the description, see hasChildren on Firebase documentation.
    numChildren() numberFor the description, see numChildren on Firebase documentation.
    val()voidFor the description, see val on Firebase documentation.
    \n

    EventType

    \n

    The EventType consists can be any of the following event names:

    \n
      \n
    • 'value'
      • \n
    • 'child_added'
      • \n
    • 'child_changed'
      • \n
    • 'child_moved'
      • \n
    • 'child_removed'
      • \n
    \n

    TransactionResult

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    snapshotDataSnapshot
    committedboolean
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":6,"lastWeek":13,"lastMonth":1619}},"@global66/nativescript-segment":{"name":"@global66/nativescript-segment","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript-Segment

    \n

    A NativeScript 8.x.x compatible plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

    \n\n

    Installation

    \n
    ns plugin add @global66/nativescript-segment
    \n

    For access to the native SDK type definitions, specify the definitions in your references.d.ts

    \n
    /// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
    /// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
    \n

    Warning: Depending on your project structure, the paths shown above may be inaccurate.

    \n

    Usage

    \n

    Example

    \n

    All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

    \n
    const config: SegmentConfig = {
      trackLifeCycleEvents: true,
      recordScreenViews: true,
    };
    Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
    \n
    import { Segment } from 'nativescript-segment';

    public someInteraction(type: string) {
        Segment.track(type);
    }
    \n

    For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

    \n
    // iOS
    Segment.ios.track(\"some event\");

    // Android
    Segment.android.track(\"some event\");
    \n

    Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

    \n

    Platform specifics

    \n

    Android

    \n

    Requires the internet permission if not already enabled in your app.

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    \n

    iOS best practice

    \n

    In your application's delegate:

    \n
    import { Segment } from 'nativescript-segment';

    public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
        const config = {
            setDebug: true; // set to show full debug logging by the native APIs
        }
        Segment.configure(key, config);
        return true;
    }
    \n

    API

    \n

    configure

    \n
    const config: SegmentConfig = {
      trackLifeCycleEvents: true,
      recordScreenViews: true,
    };
    Segment.configure(\"your segment write key\", config);
    \n

    SegmentConfig Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
    recordScreenViewstrueenable or disable auto tracking of screen views
    optionsDefault integration options, see SegmentOptions
    proxyUrlnullforward all Segment calls through a proxy
    setLoggingfalseset base INFO logging in Android SDK and plugin itself
    setDebugfalseSets full debug logging in Android and iOS
    middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
    middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
    \n

    SegmentOptions Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    useAlltrueenables all integrations (default for Segment SDKs)
    excluded[]exclude Segment from integrating with the specified services
    included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
    \n

    identify

    \n

    Identify the current user. Additional traits are supported, and custom traits are available.

    \n
    const traits: SegmentTraits = {
        firstName: 'Dave',
        email: 'dave@domain.com'
    };
    const customTraits: any {
        favoriteColor: 'blue'
    };
    Segment.identify('userId', traits, customTraits);
    \n

    SegmentTraits Properties (all optional)

    \n

    Please see Segment's official spec for all available traits and their descriptions.

    \n

    track

    \n

    Track an event.

    \n
    Segment.track(\"Some event\");

    const properties = {
      productName: \"Bread\",
      revenue: 4,
    };
    Segment.track(\"Product Purchased\", properties);
    \n

    Please see Segment's official spec for details on properties to add to track calls.

    \n

    screen

    \n

    Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

    \n
    Segment.screen(\"signup\", \"verify password\");
    \n

    Please see Segment's official spec for details on screen calls.

    \n

    group

    \n

    Associate current user with a group. A user can belong to multiple groups.

    \n
    Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
      name: \"Initech\",
      industry: \"Technology\",
      employees: 329,
      plan: \"enterprise\",
      \"total billed\": 830,
    });
    \n

    Please see Segment's official spec for details on group calls.

    \n

    alias

    \n

    alias is how you associate one identity with another.

    \n
    Segment.alias(newId);
    \n

    Please see Segment's official spec for details on alias calls.

    \n

    optout

    \n

    Disables or enables all analytics, remains set throughout app restarts.

    \n
    Segment.optOut(true);
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":55}},"@nativescript/firebase-admob":{"name":"@nativescript/firebase-admob","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-admob

    \n

    A plugin that allows you to monetize your NativeScript app by integrating the Google Mobile Ads SDK into the app.

    \n
    \n

    Note: Before you use this plugin, if you haven't already, setup your app for Firebase by following the instructions at @nativescript/firebase-core.

    \n
    \n

    The @nativescript/firebase-admob plugin currently supports loading and displaying the following ad types:

    \n\n

    Contents

    \n\n\n\n

    Installation

    \n

    To install @nativescript/firebase-admob, run the following command in the root directory of the project:

    \n
    npm install @nativescript/firebase-admob
    \n

    Setup Admob for iOS

    \n

    Update your Info.plist file at App_Resources/iOS with a GADApplicationIdentifier key with a string value of your AdMob app ID (identified in the AdMob UI).

    \n
    <key>GADApplicationIdentifier</key>
    <string>ca-app-pub-3940256099942544~1458002511</string>
    \n

    For more information about configuring the Info.plist and setting up your App ID, see Update your Info.plist.

    \n

    Setup Admob for Android

    \n

    Add AdMob App ID (identified in the AdMob UI) to the app's AndroidManifest.xml file, found at App_Resources/Android/src/main. Failure to do so will result in a crash on app launch. Add the ID by adding a <meta-data> tag with name com.google.android.gms.ads.APPLICATION_ID, as shown below. For android:value insert your own AdMob App ID in quotes.

    \n
    <application>
      <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
      <meta-data
        android:name=\"com.google.android.gms.ads.APPLICATION_ID\"
        android:value=\"ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy\"
      />
    </application>
    \n

    See step 3. of Configure your app for more information about configuring AndroidManifest.xml and setting up the App ID.

    \n

    Use @nativescript/firebase-admob

    \n

    To use the @nativescript/firebase-admob plugin, follow the steps below:

    \n

    1. Initialize the Mobile Ads SDK

    \n

    Before loading ads, initialize the Mobile Ads SDK by calling the static init method on the Admob class. Call this method once, ideally right before the app boots, in the main.ts file.

    \n
    import { Admob } from '@nativescript/firebase-admob'

    Admob.init()
    \n

    2. Add your preferred ad format to the app

    \n

    The Mobile Ads SDK is now imported and you're ready to implement an ad. Click any of the links below to get detailed implementation steps for your desired ad format.

    \n\n

    Banner ads

    \n

    Banner ads are rectangular ads that appear at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period. If you're new to mobile advertising, they're a great place to start.

    \n

    Testing Banner ads in development mode

    \n
    \n

    Note: When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.

    \n
    \n

    To enable dedicated test ad unit ID for banners, visit the links below:

    \n\n

    Below are examples of adding a Banner ad in several NativeScript flavors.

    \n

    Add Banner ad in NativeScript Core

    \n

    Register the plugin namespace in the Page element under a prefix(ui for example), access the BannerAd view from the namespace via the prefix and add it to your XML.

    \n

    The BannerAd requires the following attributes to be set:

    \n
      \n
    • unitId
      • \n
    • BannerAdSize: You can set this value in the callback function of the layoutChanged event. For more information, see Customize the banner ad size
      • \n
    • height and width
      • \n
    \n\n
    <Page xmlns:ui=\"@nativescript/firebase-admob\" >

      <StackLayout>
        <ui:BannerAd
          height=\"100\"
          width=\"100\"
          unitId=\"{{bannerAdUnit}}\"
          layoutChanged=\"{{bannerLoaded}}\"
    />
      </StackLayout>
    \n

    Add Banner ad in NativeScript Angular

    \n

    Register the BannerAd view by adding its AdmobModule to the imports array of the @NgModule decorator of the component where you want to use the view.

    \n
    import { AdmobModule } from '@nativescript/firebase-admob/angular';

    @NgModule({
        imports: [
        AdmobModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Next, add the BannerAd view to HTML. The BannerAd requires the following attributes to be set:

    \n
      \n
    • unitId
      • \n
    • BannerAdSize: You can set this value in the callback function of the layoutChanged event. For more information, see Customize the banner ad size
      • \n
    • height and width
      • \n
    \n
    <BannerAd
      height=\"100\"
      width=\"100\"
      [unitId]=\"bannerAdUnit\"
      (layoutChanged)=\"bannerLoaded($event)\">
    </BannerAd>
    \n

    Add Banner ad in NativeScript Vue

    \n

    Register the BannerAd view in the app.ts file as follows:

    \n
    import { createApp } from 'nativescript-vue';
    import Admob from '@nativescript/firebase-admob/vue'
    import Home from './components/Home.vue';

    const app = createApp(Home)
    app.use(Admob)
    \n

    And then add it to markup as follows. The BannerAd requires the following attributes to be set:

    \n
      \n
    • unitId
      • \n
    • BannerAdSize: You can set this value in the callback function of the layoutChanged event. For more information, see Customize the banner ad size
      • \n
    • height and width
      • \n
    \n
    <BannerAd
      height=\"100\"
      width=\"100\"
      :unitId=\"bannerAdUnit\"
      @layoutChanged=\"bannerLoaded\"/>
    \n

    Customize the banner ad size

    \n

    To define a custom banner size, you have 2 options:

    \n
      \n
    • Instantiate the BannerAdSize class with the desired width and height and set it to the size attribute of BannerAd.
      • \n
    \n
    import { BannerAdSize } from \"@nativescript/firebase-admob\"

    const adSize = new BannerAdSize(300, 50)

    banner.size = adSize
    \n
      \n
    • Set the size to any of the constants of the BannerAdSize class.
      • \n
    \n

    The table below lists the available constants and the sizes they represent.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AdSize ConstantSize in dp (WxH)Description
    BANNER320x50Standard Banner
    LARGE_BANNER320x100Large Banner
    MEDIUM_RECTANGLE320x250Medium Rectangle
    FULL_BANNER468x60Full-Size Banner
    LEADERBOARD728x90Leaderboard
    createAnchoredAdaptiveBanner(width, orientation)Provided width x Adaptive heightAdaptive Banner
    createInLineAdaptiveBanner(width, orientation)Provided width x Adaptive heightAdaptive Banner
    \n

    Listen to a banner ad lifecycle events

    \n

    The plugin enables you to listen to different lifecycle events of an ad, such as when an ad is loaded. Register the events handlers before calling the load method.

    \n
    const bannerView = event.object;

    // Called when an ad is successfully received.
    bannerView.on('adLoaded', (args) =>{
    console.log('Ad loaded.'),
    });

     // Called when an ad request failed.
    bannerView.on('adFailedToLoad', (args) =>{
       console.log('Ad failed to load: ', args.error);
    });

     // Called when the user removes an overlay that covers the screen.
    bannerView.on('adClosed', (args) =>{
       console.log('Ad closed.');
    });

     // Called when an impression occurs on the ad.
    bannerView.on('adImpression', (args) =>{
       console.log('Ad impression.');
    });

     // Called when an tap/touch/click occurs on the ad.
    bannerView.on('adClicked', (args) =>{
       console.log('Ad tapped');
    });
    \n

    Display a banner ad to the user

    \n

    To display a banner ad to the user, get the reference to the BannerAd view and call the load method on it.

    \n
    bannerView.load()
    \n

    Add an Interstitial ad

    \n

    Interstitial ads are full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.

    \n

    Testing Interstitial ads in development

    \n
    \n

    Note: When your app is in development mode, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.\nTo enable dedicated test ad unit ID, visit the links below:

    \n
    \n\n

    Display an Interstitial ad to the user

    \n

    To display an Interstitial ad to the user, follow the steps below:

    \n
      \n
    1. Import the InterstitialAd class from @nativescript/firebase-admob.
      2. \n
    \n
    import { InterstitialAd } from '@nativescript/firebase-admob'
    \n
      \n
    1. Create an Interstitial ad instance.
      2. \n
    \n

    Create an Interstitial ad instance by calling the static createForAdRequest on the class. The createForAdRequest method requires an adUnitId and you can optionally pass a RequestOptions object.

    \n
    import { InterstitialAd } from '@nativescript/firebase-admob'
    const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
    \n
      \n
    1. Listen to the ad lifecycle events
      2. \n
    \n

    To listen for the ad lifecycle events, such as when the ad is display or dismissed, call the onAdEvent method on the ad instance, before displaying the ad, passing it a callback function to handle the events.

    \n
    import { InterstitialAd } from '@nativescript/firebase-admob'
    const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

    ad.onAdEvent((event, error, data) => {
      switch (event) {
        case AdEventType.LOADED:
          break
        case AdEventType.CLOSED:
          break
        case AdEventType.OPENED:
          break
        case AdEventType.IMPRESSION:
          break
        case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
          break
      }
    })
    \n
      \n
    1. Load the ad\nYou load the ad by calling the load method on the ad instance.
      2. \n
    \n
    import { InterstitialAd } from '@nativescript/firebase-admob'
    const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

    ad.onAdEvent((event, error, data) => {
      switch (event) {
        case AdEventType.LOADED:
          break
        case AdEventType.CLOSED:
          break
        case AdEventType.OPENED:
          break
        case AdEventType.IMPRESSION:
          break
        case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
          break
      }
    })

    ad.load()
    \n
      \n
    1. Display the the ad
      2. \n
    \n

    To display the ad, call the show method on the ad instance. This method is called after the load method.

    \n
    import { InterstitialAd } from '@nativescript/firebase-admob'
    const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')

    ad.onAdEvent((event, error, data) => {
      switch (event) {
        case AdEventType.LOADED:
          break
        case AdEventType.CLOSED:
          ad.show()
          break
        case AdEventType.OPENED:
          break
        case AdEventType.IMPRESSION:
          break
        case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
          break
      }
    })

    ad.load()
    \n

    Next steps

    \n\n

    Native Ads

    \n

    Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same types of views with which you're already building your layouts, and can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.

    \n

    Adding a Native ad in NativeScript Core

    \n

    To add a Native ad to your {N} Core app, follow these steps:

    \n
      \n
    1. Register the plugin namespace under a prefix, ui (this can be any name), with the Page element.
      2. \n
    \n
    <Page xmlns:ui=\"@nativescript/firebase-admob\" >

    </Page>
    \n
      \n
    1. Use the prefix to access the NativeAdView and add it to markup.
      2. \n
    \n
    <Page xmlns:ui=\"@nativescript/firebase-admob\" >
    <ActionBar title=\"Admob\" />
    <StackLayout>

      <ui:NativeAdView height=\"400\" loaded=\"{{nativeAdLoaded}}\" />

    </StackLayout>
    </Page>
    \n

    Testing Native ads in development mode

    \n
    \n

    Note: When developing your app, make sure you use test ad unit IDs rather than live, production ads. Failure to do so can lead to suspension of your account. Just make sure you replace the test ad unit ID with your own ad unit ID before publishing your app.

    \n
    \n

    To enable dedicated test ad unit ID, visit the links below:

    \n\n
      \n
    1. Import the NativeAdLoader class from @nativescript/firebase-admob in the view model file.
      2. \n
    \n
    import { NativeAdLoader } from '@nativescript/firebase-admob'
    \n

    The NativeAdLoader class is an interface for managing the the Native ad.

    \n
      \n
    1. Instantiate NativeAdLoader.\nCreate an instance of NativeAdLoader by calling its constructor function. The constructor function accepts 3 parameters. The required adUnitId as the first parameter, optional RequestOptions and NativeAdOptions objects as the second and third parameter, respectively.
      2. \n
    \n
    const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null, {
      nativeAdOptions: {
        adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT
      }
    })
    \n
      \n
    1. Listen to the Native ad lifecycle events
      2. \n
    \n

    To listen to the Native ad lifecycle events, call the onAdEvent method on the NativeAdLoader instance when the NativeAdView has loaded.

    \n
    <ui:NativeAdView height=\"400\" loaded=\"{{ nativeAdLoaded }}\">
      <GridLayout height=\"300\" width=\"300\">
        <Label id=\"headLineView\" />
        <ui:MediaView id=\"mediaView\" height=\"100%\"/>
        <Label id=\"bodyView\" />
        <Button id=\"callToActionView\" />
      </GridLayout>
    </ui:NativeAdView>
    \n
    nativeAdLoaded(event){
    const view = event.object;
    loader.onAdEvent((event, error, data) => {
    \tif (event === NativeAdEventType.LOADED) {
    \t\tconst ad = data as NativeAd;

    \t\tconst headLineView = view.getViewById('headLineView');
    \t\theadLineView.text = ad.headline;
    \t\tconst mediaView = view.getViewById('mediaView');
    \t\tview.mediaView = mediaView;
    \t\tmediaView.mediaContent = ad.mediaContent;
    \t\tconst callToActionButton = view.getViewById('callToActionView');
    \t\tview.callToActionView = callToActionButton;
    \t\tcallToActionButton.text = ad.callToAction;
    \t\tconst bodyView = view.getViewById('bodyView');
    \t\tbodyView.text = ad.body;
    \t\tview.nativeAd = ad;
    \t\tconsole.log('nativead loaded');
    \t} else if (event === 'adFailedToLoad') {
    \t\tconsole.log('nativead failed to load', error);
    \t}
    });
    }
    \n
      \n
    1. Display the Native ad\nTo display the Native ad, call the load method on a NativeAdLoader instance.
      2. \n
    \n
    loader.load()
    \n

    NativeAdOptions interface

    \n

    A NativeAdOptions object is used to set the following options on the native ad.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    returnUrlsForImageAssetsbooleanOptional: If set to true, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to false.
    multipleImagesbooleanOptional: Some image assets contain a series of images. Setting this property to true tells the app to display all the images of an asset. The false(the default) value informs the app to display the first image from the series of images in an image asset.
    adChoicesPlacementAdChoicesPlacementOptional: The AdChoices overlay is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following:
    videoOptionsvideoOptionsOptional: Used to set video options for video assets returned as part of a native ad. If an ad contains a video(if ad.mediaContent.hasVideoContent = true), display the video.
    mediaAspectRatioMediaAspectRatioOptional: This sets the aspect ratio for image or video to be returned for the native ad.
    \n

    AdChoicesPlacement

    \n
    enum AdChoicesPlacement {
    \tTOP_LEFT = 'topLeft',
    \tTOP_RIGHT = 'topRight',
    \tBOTTOM_RIGHT = 'bottomRight',
    \tBOTTOM_LEFT = 'bottomLeft',
    }
    \n

    videoOptions

    \n

    The videoOptions property is an object with the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeOptional
    startMutedbooleanYes
    clickToExpandRequestedbooleanYes
    customControlsRequestedbooleanYes
    \n

    MediaAspectRatio

    \n
    enum MediaAspectRatio {
    \tLANDSCAPE = 'landscape',
    \tPORTRAIT = 'portrait',
    \tSQUARE = 'square',
    \tANY = 'any',
    }
    \n

    That's it! Your app is now ready to display native ads.

    \n

    Next steps

    \n\n

    Rewarded Ads

    \n

    Rewarded ads are ads that users have the option of interacting with in exchange for in-app rewards.

    \n

    Testing Rewarded ads in development mode

    \n
    \n

    Note: When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.

    \n
    \n

    To enable dedicated test ad unit ID, visit the links below:

    \n\n

    Display a Rewarded ad

    \n

    Follow these steps to display a Rewarded ad:

    \n
      \n
    1. Import the RewardedAd class from @nativescript/firebase-admob.
      2. \n
    \n
    import { RewardedAd } from '@nativescript/firebase-admob'
    \n
      \n
    1. Create a RewardedAd instance
      2. \n
    \n

    Create a Rewarded ad instance by calling the createForAdRequest static method on the RewardedAd class and passing it the ad unit id.

    \n
    import { RewardedAd } from '@nativescript/firebase-admob'
    const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
    \n
      \n
    1. Listen to the ad lifecycle events\nBefore you call the load method to load the ad, call the onAdEvent method passing it a callback function to handle the ad events.
      2. \n
    \n
    import { RewardedAd } from '@nativescript/firebase-admob'
    const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

    ad.onAdEvent((event, error, data) => {
      if (event === AdEventType.LOADED) {
        console.log('rewarded', 'loaded')
      } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
        console.error('loading error', error)
      }
    })
    \n
      \n
    1. Load the ad\nTo load the ad, call the load method on the RewardAd instance.
      2. \n
    \n
    import { RewardedAd } from '@nativescript/firebase-admob'
    const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

    ad.onAdEvent((event, error, data) => {
      if (event === AdEventType.LOADED) {
        console.log('rewarded', 'loaded')
      } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
        console.error('loading error', error)
      }
    })
    ad.load()
    \n
      \n
    1. Display the ad
      2. \n
    \n

    To show the ad on the screen, call the show() method on the ad instance.

    \n
    import { RewardedAd } from '@nativescript/firebase-admob'
    const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')

    ad.onAdEvent((event, error, data) => {
      if (event === AdEventType.LOADED) {
          console.log('rewarded', 'loaded')
          ad.show()
      } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
        console.error('loading error', error)
      }
    })
    ad.load()
    \n

    Rewarded ad Events

    \n

    RewardAd emits the following lifecycle events that you can listen to:

    \n
    ad.onAdEvent((event, error, data) => {
      switch (event) {
        case AdEventType.LOADED:
          break
        case AdEventType.CLOSED:
          break
        case AdEventType.OPENED:
          break
        case AdEventType.IMPRESSION:
          break
        case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
          break
      }
    })
    \n

    onAdEvent with the event rewarded_earned_reward'is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.

    \n

    Targeting

    \n

    The RequestConfiguration object collects the global configuration for every ad request and is applied by firebase().admob().setRequestConfiguration().

    \n

    Child-directed ads setting

    \n

    For child-directed ads setting, read Child-directed setting.

    \n

    The following example indicates that you want your content treated as child-directed for purposes of COPPA:

    \n
    import { Admob, RequestConfiguration } from '@nativescript/firebase-admob';
    const requestConfiguration: RequestConfiguration = {
      tagForChildDirectedTreatment: true
    }
    Admob.getInstance().requestConfiguration = requestConfiguration;
    \n

    Handle ads requests for users under the age of consent

    \n

    To handle ads requests for users under the age of consent, read Users under the age of consent.

    \n

    The following example indicates that you want TFUA included in your ad request.

    \n
    import { Admob, RequestConfiguration } from '@nativescript/firebase-admob';
    const requestConfiguration: RequestConfiguration = {
      tagForUnderAgeOfConsent: true
    }
    Admob.getInstance().requestConfiguration = requestConfiguration;
    \n

    If the tags to enable the Child-directed setting and tagForUnderAgeOfConsentare both set to true, the child-directed setting takes precedence.

    \n

    Ad content filtering

    \n

    This setting can be set via RequestConfiguration.maxAdContentRating:

    \n

    AdMob ads returned for these requests have a content rating at or below that level. The possible values for this network extra are based on digital content label classifications, and should be one of the following MaxAdContentRating objects:

    \n
      \n
    • MaxAdContentRating.G
      • \n
    • MaxAdContentRating.PG
      • \n
    • MaxAdContentRating.T
      • \n
    • MaxAdContentRating.MA
      • \n
    \n

    The following code configures a RequestConfiguration object to specify that an ad content returned should correspond to a digital content label designation no higher than G:

    \n
    import { Admob, MaxAdContentRating, RequestConfiguration } from '@nativescript/firebase-admob';
    const requestConfiguration: RequestConfiguration = {
      maxAdContentRating: MaxAdContentRating.G
    }
    Admob.getInstance().requestConfiguration = requestConfiguration;
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":10,"lastWeek":20,"lastMonth":1760}},"@nativescript/eslint-plugin":{"name":"@nativescript/eslint-plugin","version":"0.0.4","license":"Apache-2.0","readme":"

    NativeScript ESLint Plugin

    \n

    ESLint rules for NativeScript projects.

    \n

    Installation and setup

    \n
      \n
    1. Install
      2. \n
    \n
    npm i -D @nativescript/eslint-plugin @typescript-eslint/parser eslint
    \n
      \n
    1. Add an .eslintrc.json config file with the following content.
      2. \n
    \n

    .eslintrc.json

    \n
    {
      \"parser\": \"@typescript-eslint/parser\",
      \"parserOptions\": {
        \"sourceType\": \"module\",
        \"ecmaVersion\": 2015
      },
      \"plugins\": [\"@nativescript\"],
      \"extends\": [
        \"plugin:@nativescript/recommended\"
      ]
    }
    \n
      \n
    1. Lint the project.
      2. \n
    \n
    npx eslint --ext=ts src/
    \n

    Notice that you need to provide the path to your source code. In the example above, we use src/. Change that to match your project setup.

    \n
      \n
    1. Fix all auto-fixable problems.
      2. \n
    \n
    npx eslint --ext=ts --fix src/
    \n
      \n
    1. [Optional] Set up VSCode to use eslint.
      2. \n
    \n
      \n
    • Install the dbaeumer.vscode-eslint extension.
      • \n
    • Add the following to your settings.json file:
      • \n
    \n
    \"eslint.validate\": [ \"typescript\", \"javascript\" ],
    \n","downloadStats":{"lastDay":44,"lastWeek":274,"lastMonth":1513}},"@nativescript/firebase-installations":{"name":"@nativescript/firebase-installations","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-installations

    \n
    npm install @nativescript/firebase-installations
    \n

    What does it do

    \n

    The Firebase installations service:

    \n
      \n
    • provides a unique identifier for a Firebase installation
      • \n
    • provides an auth token for a Firebase installation
      • \n
    • provides an API to perform GDPR-compliant deletion of a Firebase installation.\nEach configured FirebaseApp has a corresponding single instance of Installations. An instance of the class provides access to the installation info for the FirebaseApp as well as the ability to delete it. A Firebase Installation is unique by FirebaseApp.name and FirebaseApp.options.googleAppID
      • \n
    \n

    Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":6,"lastWeek":21,"lastMonth":1690}},"@imagene.me/nativescript-toast":{"name":"@imagene.me/nativescript-toast","version":"2.0.3","license":"MIT","readme":"

    Imagene-nativescript-toast based on nativescript-toasty

    \n

    Install

    \n

    NativeScript 7.0+

    \n

    tns plugin add @imagene-me/nativescript-toast

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from \"@imagene-me/nativescript-toast\"
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty(
        {
            text: 'Toast message',
            variant: ToastVariant.Success
        }
    );
    toast.show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      ios: {
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24,
      },
    });
    \n

    JavaScript

    \n
    var toasty = require('@imagene-me/nativescript-toast').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n
    export enum ToastDuration {
      'Short',
      'Long',
    }

    export enum ToastVariant {
      'Success' = 'success',
      'Error' = 'error',
    }

    /**
     * Custom Variant params
     */
    export interface ToastVariantParams {
      backgroundColor: string;
      textColor: string;
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Change Toast Variant - default SUCCESS
       */
      variant?: ToastVariant;

      /**
       * Set specific background and text color
       */
      customVariantParams?: ToastVariantParams;

      /**
       * Android specific configuration options.
       */
      android?: any;

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":156}},"nativescript-parallax":{"name":"nativescript-parallax","version":"1.4.0","license":"MIT","readme":"

    NativeScript Parallax View Plugin for Android & iOS.

    \n

    \"npm\"\n\"npm\"

    \n

    Parallax Scroll

    \n

    \"NativeScript

    \n

    Parallax Scroll with Anchor.

    \n

    \"NativeScript

    \n

    Install

    \n

    $ tns plugin add nativescript-parallax

    \n

    Example xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \t xmlns:parallax=\"nativescript-parallax\"
    \tloaded=\"pageLoaded\">
      \t<parallax:ParallaxView controlsToFade=\"headerLabel,headerLabel2\">
    \t\t<parallax:Header class=\"header-template\" dropShadow=\"true\">
    \t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
    \t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
    \t\t</parallax:Header>
    \t\t<parallax:Anchored class=\"anchor\">
    \t\t\t<Label id=\"titleLabel\" text=\"Parallax Template\"></Label>
    \t\t</parallax:Anchored>
    \t\t<parallax:Content class=\"body-template\">
    \t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

    \t\t\tUt at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.\"    >
    \t\t\t</TextView>
    \t\t</parallax:Content>
    \t</parallax:ParallaxView>
    </Page>
    \n

    Example css

    \n
    #headerLabel2
    {
    \tfont-size: 45;
    \thorizontal-align: center;
    \tmargin-top:-25;
    \tcolor:#B2EBF2;
    }
    #headerLabel{
    \tfont-size: 45;
    \thorizontal-align: center;
    \tpadding-top:75;
    \tcolor:#B2EBF2;
    }
    .header-template{
    \tbackground-color:#212121;
    \tbackground-image:url('~/images/mountains.png');
    \tbackground-size: cover;
    \theight: 200;
    }
    .body-template TextView{
    \tfont-size:20;
    \tpadding:5 15;
    \tborder:none;
    }
    .anchor{
    \theight: 55;
    \twidth:100%;
    \tbackground-color:#616161;
    }
    #titleLabel{
    \tfont-weight:bold;
    \tfont-size:25;
    \tpadding:5 15;
    \tcolor:#fff;

    }
    \n

    To use the parallax plugin you need to first import it into your xml layout with xmlns:parallax="nativescript-parallax"

    \n

    when using the parallax plugin you need at least two layout views inside of the <parallax:ParallaxView> element. <parallax:Header> and <parallax:Content>. there is an optional third view called\n<parallax:Anchored> which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.

    \n

    To add views such as labels you want to fade out in the <parallax:Parallaxiew> add the controlsToFade attribute and pass it a comma delimited string with each control ID you want to fade out. In the above example it looks like controlsToFade="headerLabel,headerLabel2" and will fade out both of those labels.

    \n

    The <parallax:Anchored> has a property called dropShadow if set to true it will create a small drop shadow effect on the bottom of the anchor.

    \n

    If the inner content of <parallax:Content> isn't long enough to cause the page to scroll. If not it will not show the Parallax effect.

    \n

    As of version 1.1.0 the bounce/overscroll effect is disable by default to turn it back on set bounce=true on the ParallaxView element.

    \n

    Events

    \n
      \n
    • scroll: Happens on scroll
      • \n
    • anchored: When the anchor hits
      • \n
    • unanchored: When the anchor comes loose
      • \n
    \n

    Plugin Development Work Flow.

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

    Special thanks to:

    \n

    Nathanael Anderson for helping with understand how plugins in {N} work.\nAlso Thanks to Nathan Walker for setting up the {N} plugin seed that I used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed\nAlso maybe Steve McNiven-Scott for optimizations, events and getting plugin working on v3+

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":26,"lastMonth":78}},"@nativescript/firebase-storage":{"name":"@nativescript/firebase-storage","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-storage

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use the native Firebase SDKs for Cloud Storage in your Nativescript app.

    \n

    \"image\"

    \n

    Set up and initialize Firebase for your app

    \n

    To use Firebase Cloud Storage, you initialize Firebase first. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Create a default Cloud Storage bucket

    \n

    To create a default Cloud Storage bucket, follow the instructions at Create a default Cloud Storage bucket.

    \n

    Add the Firebase Cloud Storage SDK to your app

    \n

    To add the Cloud Storage SDK to your app, install and import the @nativescript/firebase-storage plugin.

    \n
      \n
    1. Install the plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-storage
    \n
      \n
    1. To add the Firestore SDK, import the @nativescript/firebase-storage plugin. You should import the plugin once in your app project and the ideal place to do that is the app bootstrapping file( app.ts, main.ts, etc).
      2. \n
    \n

    Create a Firebase Storage instance

    \n

    To create a new Storage instance, call the instance getter, storage(), method on the FirebaseApp instance.:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const storage = firebase().storage();
    \n

    By default, this allows you to interact with Firebase Storage using the default Firebase App used whilst installing Firebase on your platform. However, if you'd like to use a secondary Firebase App, pass the secondary app instance when calling the storage method:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-storage';

    // create secondary app instance
    const config = new FirebaseOptions();
    const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

    const storage = firebase().storage(secondaryApp);
    \n

    You can view your buckets on the Firebase Console.

    \n

    Creating a file reference

    \n

    A reference is a local pointer to some file on your bucket. This can either be a file that already exists or one which does not exist yet.

    \n
      \n
    • To create a reference, call the ref method passing it the file name, with extension, on the Storage instance:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-storage';

    const reference = firebase().storage().ref('black-t-shirt-sm.png');
    \n
      \n
    • You can also specify a file located in a deeply nested directory:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    const reference = firebase().storage().ref('/images/t-shirts/black-t-shirt-sm.png');
    \n

    Upload a file

    \n

    To upload a file directly from the user's device, follow these steps:

    \n
      \n
    1. Create a reference to the file you want to upload.
      2. \n
    \n
    import { firebase } from '@nativescript/firebase-core';

    const reference = firebase().storage().ref('black-t-shirt-sm.png');
    \n

    -2. Get the path to the file on the users device. For example,

    \n
    import { knownfolders } from '@nativescript/core';

    const pathToFile = knownFolders.documents().getFile('black-t-shirt-sm.png');
    const filePath = pathToFile.path;
    \n
      \n
    • Call the putFile method on the reference, passing it the path to the local file.
      • \n
    \n
    await reference.putFile(filePath);
    \n

    Dealing with tasks

    \n

    The putFile method in the preceding example returns a Task object, that allows you to hook into information such as the current upload progress.

    \n

    Checking upload/download task progress

    \n

    To check the current task progress, you can listen to the state_changed event on the task:

    \n
    const task = reference.putFile(pathToFile);

    task.on('state_changed', (taskSnapshot) => {
    \tconsole.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);
    });

    task.then(() => {
    \tconsole.log('Image uploaded to the bucket!');
    });
    \n

    Pausing & resuming tasks

    \n

    A task also provides the ability to pause and resume ongoing operations. To pause a task, call the pause method and to resume, call the resume method:

    \n
    const task = reference.putFile(pathToFile);

    task.pause();

    // Sometime later...
    task.resume();
    \n

    Generate a new download URL

    \n

    A common use case for Cloud Storage is to use it as a global Content Delivery Network (CDN) for your images. When uploading files to a bucket, they are not automatically available for consumption via an HTTP URL. To generate a new Download URL, you need to call the getDownloadURL method on a reference:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const url = firebase().storage().ref('images/profile-1.png').getDownloadURL();
    \n

    List files and directories in bucket reference

    \n

    To view a full list of the current files & directories within a particular bucket reference, call list on a reference instance. The results are paginated, and if more results are available you can pass a page token into the request:

    \n
    import { firebase } from '@nativescript/firebase-core';

    function listFilesAndDirectories(reference, pageToken) {
    \treturn reference.list({ pageToken }).then((result) => {
    \t\t// Loop over each item
    \t\tresult.items.forEach((ref) => {
    \t\t\tconsole.log(ref.fullPath);
    \t\t});

    \t\tif (result.nextPageToken) {
    \t\t\treturn listFilesAndDirectories(reference, result.nextPageToken);
    \t\t}

    \t\treturn Promise.resolve();
    \t});
    }

    const reference = firebase().storage().ref('images');

    listFilesAndDirectories(reference).then(() => {
    \tconsole.log('Finished listing');
    });
    \n

    Customizing security rules

    \n

    By default your bucket will come with rules which allow only authenticated users on your project to access it. You can, however, fully customize the security rules to your application's requirements.

    \n

    To learn more, see Get started with Firebase Security Rules documentation on the Firebase website.

    \n

    Switching storage buckets

    \n

    A single Firebase project can have multiple storage buckets. The module will use the default bucket if no bucket argument is passed to the storage instance. To switch buckets, provide the module with the gs:// bucket URL found on the Firebase Console, under Storage > Files.

    \n
    import { firebase, FirebaseOptions } from '@nativescript/firebase-core';
    const defaultStorageBucket = firebase().storage();
    const config = new FirebaseOptions();
    config.storageBucket = 'gs://my-secondary-bucket.appspot.com';
    const secondaryApp = firebase.app(config, 'SECONDARY_APP');
    const secondaryStorageBucket = firebase().storage(secondaryApp);
    \n

    API

    \n

    Storage class

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    storageAndroid: com.google.firebase.storage.FirebaseStorage = firebase().storage().android;
    \n

    A read-only property that returns the underlying native Android object.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    storageIOS: FIRStorage = firebase().storage().ios;
    \n

    A read-only property that returns the underlying native iOS object.

    \n
    \n

    app

    \n
    import { firebase } from '@nativescript/firebase-core';

    storageApp: FirebaseApp = firebase().storage().app;
    \n

    A read-only property that returns the FirebaseApp instance to which this Storage belongs.

    \n
    \n

    maxDownloadRetryTime

    \n
    import { firebase } from '@nativescript/firebase-core';

    maxDownloadRetryTime: number = firebase().storage().maxDownloadRetryTime;
    // or
    \n

    Returns or sets the maximum time, in milliseconds, to retry downloads in the case of a failure.

    \n
    \n

    maxOperationRetryTime

    \n
    import { firebase } from '@nativescript/firebase-core';

    maxOperationRetryTime: number = firebase().storage().maxOperationRetryTime;
    \n

    Returns or sets the maximum time, in milliseconds, to retry operations other than uploads or downloads in the case of a failure.

    \n
    \n

    maxUploadRetryTime

    \n
    import { firebase } from '@nativescript/firebase-core';

    maxUploadRetryTime: number = firebase().storage().maxUploadRetryTime;
    \n

    Gets or sets the maximum time, in milliseconds, to retry uploads in the case of a failure.

    \n
    \n

    constructor()

    \n
    import { firebase } from '@nativescript/firebase-core';

    new Storage(app);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    appFirebaseAppOptional : The FirebaseApp instance to which this Storage belongs.
    \n
    \n

    useEmulator()

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().storage().useEmulator(host, port);
    \n

    Attempts to connect to the Storage emulator running locally on the given host and port.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    hoststringThe emulator host.
    portnumberThe emulator port.
    \n
    \n

    ref()

    \n
    import { firebase } from '@nativescript/firebase-core';

    reference: Reference = firebase().storage().ref(path);
    \n

    Creates a new storage reference initialized at the root Firebase Storage location, if no path argument is provided, or at the given path if a path argument is provided.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    pathstringOptional : The path to initialize the reference at.
    \n
    \n

    refFromURL()

    \n
    import { firebase } from '@nativescript/firebase-core';

    reference: Reference = firebase().storage().refFromURL(url);
    \n

    Creates a new storage reference initialized from the specific URL.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    urlstringThe URL to initialize the reference from.
    \n
    \n

    Reference object

    \n

    android

    \n
    referenceAndroid: com.google.firebase.storage.StorageReference = reference.android;
    \n

    A read-only property that returns the underlying native StorageReference object for Android.

    \n
    \n

    ios

    \n
    referenceIOS: FIRStorageReference = reference.ios;
    \n

    A read-only property that returns the underlying native StorageReference object for iOS.

    \n
    \n

    bucket

    \n
    bucket: string = reference.bucket;
    \n

    A read-only property that returns the name of the bucket containing this reference's object.

    \n
    \n

    fullPath

    \n
    fullPath: string = reference.fullPath;
    \n

    A read-only property that returns the full path to this object, not including the Google Cloud Storage bucket.

    \n
    \n

    name

    \n
    name: string = reference.name;
    \n

    A read-only property that returns the short name of this object's path, which is the last component of the full path.

    \n
    \n

    parent

    \n
    parent: Reference = reference.parent;
    \n

    A read-only property that returns a reference to the parent of the current reference, or null if the current reference is the root.

    \n
    \n

    root

    \n
    root: Reference = reference.root;
    \n

    A read-only property that returns a reference to the root of the current reference's bucket.

    \n
    \n

    storage

    \n
    storage: Storage = reference.storage;
    \n

    A read-only property that returns the Storage instance associated with the reference.

    \n
    \n

    child()

    \n
    reference: Reference = reference.child(path);
    \n

    Returns a reference to a relative path from the current reference. For more information, see child on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    pathstringThe child path.
    \n
    \n

    delete()

    \n
    reference.delete();
    \n

    Deletes the object at the current reference's location.

    \n
    \n

    getDownloadURL()

    \n
    downloadURL: string = await reference.getDownloadURL();
    \n

    Asynchronously retrieves a long-lived download URL with a revokable token. For more information, see getDownloadUrl on the Firebase website.

    \n
    \n

    getMetadata()

    \n
    metadata: Metadata = await reference.getMetadata();
    \n

    Asynchronously retrieves metadata associated with an object at the current reference's location. For more information description about this method, see getMetadata on the Firebase website.

    \n

    You can find the properties of the Metadata object here.

    \n
    \n

    list()

    \n
    listResult: ListResult = await reference.list(options);
    \n

    Returns items (files) and prefixes (folders) under this StorageReference.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    optionsListOptionsOptional : An object to configure the listing operation. The ListOptions properties are described in the list method on the Firebase docs.
    \n

    ListOptions interface

    \n
    interface ListOptions {
    \tmaxResults: undefined | number;
    \tpageToken: undefined | string;
    }
    \n
    \n

    listAll()

    \n
    listResult: ListResult = await reference.listAll();
    \n

    Asynchronously returns a list of all items (files) and prefixes (folders) under this StorageReference. For more information, see listAll on the Firebase website.

    \n
    \n

    put()

    \n
    task: Task = reference.put(data, metadata);
    \n

    Uploads data to this reference's location. For more information, see putBytes on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    dataBlob | Uint8Array | ArrayBufferThe data to upload.
    metadataMetadataOptional : The metadata to associate with this upload.
    \n
    \n

    putString()

    \n
    stringTask: Task = reference.putString(data, format, metadata);
    \n

    Uploads bytes data from a string to this reference's location.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    datastringThe base64 string to upload .
    formatStringFormatThe format of the string to upload.
    metadataMetadataOptional : The metadata to associate with this upload.
    \n

    StringFormat enum

    \n
    enum StringFormat {
    \tRAW = 'raw',
    \tBASE64 = 'base64',
    \tBASE64URL = 'base64url',
    \tDATA_URL = 'data_url',
    }
    \n
    \n

    putFile()

    \n
    fileTask: Task = reference.putFile(path, metadata);
    \n

    Uploads a file to this reference's location.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    pathstringThe path to the file to upload.
    metadataMetadataOptional : The metadata to associate with this upload.
    \n
    \n

    updateMetadata()

    \n
    updatedMetadata: FullMetadata = await reference.updateMetadata(metadata);
    \n

    Updates the specified metadata associated with this reference. For more information, see updateMetadata on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    metadataMetadataThe metadata to update.
    \n
    \n

    writeToFile()

    \n
    fileWriteTask: Task = reference.writeToFile(localFilePath);
    \n

    Downloads the object at this reference's location to the specified system file path. For more information, see writeToFile on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    localFilePathstringThe path to which the file should be downloaded.
    \n
    \n

    Task object

    \n

    android

    \n
    taskAndroid: com.google.firebase.storage.FileDownloadTask.TaskSnapshot | com.google.firebase.storage.UploadTask.TaskSnapshot = task.android;
    \n

    A read-only property that returns the native Android object.

    \n
    \n

    ios

    \n
    taskIOS: FIRStorageUploadTask | FIRStorageDownloadTask = task.ios;
    \n

    A read-only property that returns the native iOS object.

    \n
    \n

    snapshot

    \n
    taskSnapshot: TaskSnapshot = task.snapshot;
    \n
    \n

    on()

    \n
    task.on(event, nextOrObserver, error, complete);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventTaskEventThe event name.
    nextOrObserver((a: TaskSnapshot) => any) | TaskSnapshotObserverOptional : The observer object or a function to be called on each event.
    error(a: FirebaseError) => anyOptional : The function to be called on error.
    complete() => voidOptional : The function to be called on completion.
    \n

    TaskEvent enum

    \n
    enum TaskEvent {
    \tSTATE_CHANGED = 'state_changed',
    }
    \n

    cancel()

    \n
    cancelled: boolean = task.cancel();
    \n

    Cancels the current upload or download task.

    \n
    \n

    pause()

    \n
    paused: boolean = task.pause();
    \n

    Pauses the current upload or download task.

    \n
    \n

    resume()

    \n
    resumed: boolean = task.resume();
    \n

    Resumes the current upload or download task.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":6,"lastWeek":14,"lastMonth":1863}},"@nota/nativescript-audioplayer":{"name":"@nota/nativescript-audioplayer","version":"8.4.2","license":"LGPL-3.0","readme":"

    Nativescript plugin for Audio playback (Nativescript 8+)

    \n

    Usage

    \n

    This plugin is prepared to allow you to test and try it out via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Android Notification

    \n

    The Android foreground notification channel can be customized via the string resource keys: tns_audioplayer_notification_title and tns_audioplayer_notification_desc. See the demo strings.xml for an example.\nThe notification icon can be set by having a drawable named tns_audioplayer_small_icon or icon (checks in that order) in your App_Resources/Android/src/main/res.

    \n

    Development

    \n

    Install typescript: npm install -g typescript

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove @nota/nativescript-audioplayer
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":1605}},"@nativescript/firebase-functions":{"name":"@nativescript/firebase-functions","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-functions

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use Firebase Cloud Functions with NativeScript.

    \n

    \"image\"

    \n

    Set up your app for Firebase

    \n
      \n
    • To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.
      • \n
    \n\n

    Add the Firebase Functions SDK to your app

    \n

    To add the Cloud Firebase Functions SDK to your app, install the @nativescript/firebase-functions plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-functions
    \n

    Use @nativescript/firebase-functions

    \n

    The Cloud Functions module provides the functionality to directly trigger deployed HTTPS callable functions, without worrying about security or implementing an HTTP request library.

    \n

    Functions deployed to Firebase have unique names, allowing you to easily identify which endpoint you wish to send a request to.

    \n

    Calling an endpoint

    \n

    Assuming we have to deploy a callable endpoint named listProducts. To call the endpoint, the library exposes a httpsCallable method. For example:

    \n
    // Deployed HTTPS callable
    exports.listProducts = functions.https.onCall(() => {
    \treturn [
    \t\t/* ... */
    \t\t// Return some data
    \t];
    });
    \n

    Within the application, the list of products returned can be directly accessed by passing the name of the endpoint to the httpsCallable method:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-functions';
    firebase()
    \t.functions()
    \t.httpsCallable('listProducts')()
    \t.then((response) => {
    \t\tsetProducts(response.data);
    \t\tsetLoading(false);
    \t});
    \n

    Set and access regional Cloud Functions endpoints

    \n

    Cloud Functions are regional, which means the infrastructure that runs your Cloud Function is located in specific regions.

    \n

    By default, functions run in the us-central1 region. To see supported regions, see supported regions.

    \n

    Set regional function endpoint

    \n

    To run functions in a different region after initializing Firebase App, set the region using firebase().app().functions(region).

    \n

    The code below shows an example of setting a regional function endpoint(europe-west2):

    \n
    // Deployed HTTPS callable
    exports.listProducts = functions.region(\"europe-west2\").https.onCall(() => {
    \treturn [
    \t\t/* ... */
    \t\t// Return some data
    \t];
    });
    \n

    Access regional function endpoint

    \n

    To access a regional function endpoint, call the firebase().app().functions(region) method on the Firebase App instance:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-functions';

    firebase().initializeApp();
    firebase().app().functions(\"europe-west2\");

    firebase()
    \t.functions()
    \t.httpsCallable('listProducts')()
    \t.then((response) => {
    \t\tsetProducts(response.data);
    \t\tsetLoading(false);
    \t});
    \n

    Test Cloud Functions with a local emulator

    \n

    Whilst developing your application with Cloud Functions, you can run the functions inside of a local emulator.

    \n

    To call the emulated functions, connect the Cloud Functions to a local emulator by calling the useEmulator method on the Functions instance with the host and port of the emulator.

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().functions().useEmulator('localhost', 5000);
    \n

    API

    \n

    Functions class

    \n

    ios

    \n
    functionsIOs: FIRFunctions = firebase.functions().ios;
    \n

    A readonly property that returns the native iOS FIRFunctions instance.

    \n
    \n

    android

    \n
    functionsAndroid: com.google.firebase.functions.FirebaseFunctions = firebase.functions().android;
    \n

    A readonly property that returns the native Android com.google.firebase.functions.FirebaseFunctions instance.

    \n
    \n

    app

    \n
    app: FirebaseApp = firebase().functions().app;
    \n

    A readonly property that returns the FirebaseApp instance associated with the Functions instance.

    \n
    \n

    constructor()

    \n
    functions: Functions = new Functions(app);
    \n

    Creates a new Functions instance.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    appFirebaseAppAn optional FirebaseApp instance to use.
    \n
    \n

    httpsCallable()

    \n
    task: HttpsCallable = firebase().functions().httpsCallable(name, options);

    httpsCallable(data).then((response: HttpsCallableResult) => {
    \t// Do something with the response
    }).catch((error: HttpsCallableError) => {
    \tconsole.log(error.code, error.message, error.details);

    });
    \n

    Returns a task function that can be called with optional data. The task function returns a Promise that will be resolved with the result(HttpsCallableResult) of the function execution. If the task fails, the Promise will be rejected with an HttpsCallableError.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    namestringThe name of the reference to the Callable HTTPS trigger.
    optionsHttpsCallableOptionsAn optional object that sets the length of timeout, in seconds, for calls for this Functions instance.
    \n
    \n

    useEmulator()

    \n
    firebase().functions().useEmulator(host, port);
    \n

    Allows you to test Cloud Functions locally by connecting to the emulator.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    hoststringThe host of the emulator to connect to.
    portnumberThe port of the emulator to connect to.
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":5,"lastWeek":9,"lastMonth":1585}},"@nativescript/template-hello-world":{"name":"@nativescript/template-hello-world","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript JavaScript Template

    \n

    This template creates a "Hello, world" NativeScript app using JavaScript.

    \n

    This is the default template, so you can create a new app that uses it with the --template option:

    \n
    ns create my-hello-world-js --template @nativescript/template-hello-world
    \n

    Or without it:

    \n
    ns create my-hello-world-js
    \n
    \n

    Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-hello-world-js --template nativescript-app-templates/packages/template-hello-world
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":10,"lastWeek":71,"lastMonth":702}},"@nativescript/types-minimal":{"name":"@nativescript/types-minimal","version":"8.6.1","license":"Apache-2.0","readme":"

    @nativescript/types-minimal

    \n

    NativeScript 'Minimal' Types for only the latest Android and iOS sdks.

    \n","downloadStats":{"lastDay":4,"lastWeek":14,"lastMonth":355}},"@nativescript/firebase-auth":{"name":"@nativescript/firebase-auth","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-auth

    \n\n

    Intro

    \n

    A plugin that allows you to add Firebase Authentification to your NativeScript app.

    \n

    \"image\"

    \n
    \n

    Note: Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase in your app.

    \n
    \n

    Installation

    \n

    Install the plugin by running the following command in the root directory of your project.

    \n
    npm install @nativescript/firebase-auth
    \n

    Use @nativescript/firebase-auth

    \n

    Before using Firebase Auth, ensure to initialize Firebase.

    \n

    To create a new Firebase Auth instance, call the auth method on the firebase instance as follow:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth'; // only needs to be imported 1x

    const auth = firebase().auth();
    \n

    By default, this allows you to interact with Firebase Auth using the default Firebase App used whilst installing Firebase on your platform. If, however, you'd like to use a secondary Firebase App, call the auth method with the FirebaseApp instance.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth';

    // create secondary app instance
    const config = new FirebaseOptions();
    const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');

    const auth = firebase().auth(secondaryApp);
    \n

    Listen to the authentication state change

    \n

    To subscribe to auth state change event, call the addAuthStateChangeListener method on your FirebaseAuth class returned by firebase().auth():

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth';

    firebase().auth()
      .addAuthStateChangeListener((user) => {
        if (!user) {
          console.log('User is currently signed out!');
        } else {
          console.log('User is signed in!');
        }
      }))
    \n

    Sign a user in anonymously

    \n

    To sign a user in anonymously, call the signInAnonymously method on the instance of the FirebaseAuth class returned by firebase().auth().

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth';

    firebase()
    \t.auth()
    \t.signInAnonymously()
    \t.then((cred: [UserCredential]()) => {})
    \t.catch((error) => {});
    \n

    Create a user account with email and password

    \n
    \n

    Note To authenticate a user with email and password, enable Email/Password sign-in provider Firebase Console following the steps below:
    1. Go to Firebase Console.
    2. Click on your project.
    3. On the left sidebar, select Authentication.
    4. Click on the Sign-in method tab.
    5. Click on the Email\\password provider.
    5. Turn Enable switch on.

    \n
    \n

    Next, to create a user account with an email and password, call the createUserWithEmailAndPassword method on the FirebaseAuth instance(firebase().auth()) passing it the user's email and secure password.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth';

    firebase()
    \t.auth()
    \t.createUserWithEmailAndPassword('myemail@myemail.com', 'password')
    \t.then((cred: [UserCredential]()) => {})
    \t.catch((error) => {});
    \n

    Sign in a user with email and password

    \n

    To sign in a user with their registered email and password, call signInWithEmailAndPassword method, with the email and password, on firebase().auth()

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-auth';

    firebase()
    \t.auth()
    \t.signInWithEmailAndPassword('myemail@myemail.com', 'password')
    \t.then((cred: [UserCredential]()) => {})
    \t.catch((error) => {});
    \n

    Send a user's email verification email

    \n

    To send an email to the user to request them to verify their email, call the sendEmailVerification method on User object.

    \n
    const user = firebase().auth().currentUser;

    if (user && !user.emailVerified) {
    \tuser.sendEmailVerification();
    }
    \n

    Sign a user out

    \n

    To sign a user out, call the signOut method on firebase().auth().

    \n
    firebase().auth().signOut()
    .then(res => {
      if(res) {
        // user signed out
        return
      }
      // else do staff
    });

    // OR

    let signedOut = await firebase().auth().signOut();
    \n

    Sign in a user with Apple

    \n

    Apple announced that any applications using 3rd party login services (such as Facebook, Twitter, Google etc) must also have an Apple Sign-In method. Apple Sign-In is not required for Android devices.

    \n\n
    import { firebase } from '@nativescript/firebase-core';
    import { AppleAuthProvider } from '@nativescript/firebase-auth';
    import { signIn, User } from \"@nativescript/apple-sign-in\";

    signIn(
        {
            scopes: [\"EMAIL\", \"FULLNAME\"]
        })
        .then((result: User) => {
    \t\tconst oauthCredential = AppleAuthProvider.credential(result.identityToken, result.nonce);

    \t\tfirebase().auth().signInWithCredential(oauthCredential);
        })
        .catch(err => console.log(\"Error signing in: \" + err))    ;
    \n

    Sign in with Facebook account

    \n
      \n
    • \n

      Before getting started, follow the steps at Facebook Developer App to enable Facebook login and obtain the Facebook App ID and App secret that you need for setting the Facebook sign-in provider.

      \n
      • \n
    • \n

      Enable the Facebook sign-in provider by following the steps below:

      \n
        \n
      1. Go to Firebase Console.
        2. \n
      2. Click on your project.
        3. \n
      3. On the left sidebar, select Authentication.
        4. \n
      4. Click on the Sign-in method tab.
        5. \n
      5. Click on the Facebook provider.
        6. \n
      6. Switch on Enable
        7. \n
      7. Enter your App ID and App secret, and click on Save.
        8. \n
      \n
      • \n
    • \n

      Install the @nativescript/facebook plugin and call the logInWithPermissions method on the LoginManager class to get the user's credentials from Facabook that you pass to Firebase.

      \n
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { FacebookAuthProvider } from '@nativescript/firebase-auth';
    import { LoginManager, AccessToken } from '@nativescript/facebook';


    LoginManager.logInWithPermissions(['public_profile', 'email']).then((result) => {
    \t// Once signed in, get the users AccesToken
    \tconst data = await AccessToken.currentAccessToken();

    \t// Create a Firebase credential with the AccessToken
    \tconst facebookCredential = FacebookAuthProvider.credential(data.tokenString);

    \t// Sign-in the user with the credential
    \treturn firebase().auth().signInWithCredential(facebookCredential);
    });

    \n
    \n

    Note: Firebase will not set the User.emailVerified property to true if your user logs in with Facebook. Should your user login using a provider that verifies email (e.g. Google sign-in) then this will be set to true.

    \n
    \n

    Sign in with Twitter account

    \n
      \n
    • \n

      Before you authenticate the user with their Twitter account, follow steps 1-5 at Before you begin to enable the Twitter sign-in provider.

      \n
      • \n
    • \n

      Install the @nativescript/twitter plugin and call the logIn method on the TwitterSignIn class to get the user's credentials from Twitter, as shown below, that you pass to Firebase.

      \n
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { TwitterAuthProvider } from '@nativescript/firebase-auth';
    import { Twitter, TwitterSignIn } from '@nativescript/twitter';

    Twitter.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET'); // called earlier in the app

    // Perform the login request
    TwitterSignIn.logIn().then((data) => {
    \tconst twitterAuthCredential = TwitterAuthProvider.credential(data.authToken, data.authTokenSecret);

    \tfirebase().auth().signInWithCredential(twitterAuthCredential);
    });

    \n

    Sign in with GitHub account

    \n
      \n
    • \n

      Set up a GitHub OAuth App from your GitHub Developer Settings and enable GitHub sign-in provider by following steps 1-5 at Before you begin using GitHub\nA 3rd party library is required to both install the GitHub SDK and trigger the authentication flow. The credential method of the GithubAuthProvider class achieves that.

      \n
      • \n
    • \n

      Call the signInWithCredential method on firebase().auth() passing it the GitHub credentials.

      \n
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { GithubAuthProvider } from '@nativescript/firebase-auth';
    const githubAuthCredential = GithubAuthProvider.credential(token);

    firebase().auth().signInWithCredential(githubAuthCredential);
    \n

    Sign in with Google account

    \n

    Most configuration is already set up when using Google Sign-In with Firebase. However, you need to ensure your machine's SHA1 key has been configured for use with Android. You can see how to generate the key on the Authenticating Your Client documentation.

    \n
      \n
    • Install the nativescript/google-signin plugin, configure Google Sign-in by calling the configure method, sign in the user to their Google account to obtain the ID and access tokens. Pass the obtained tokens to Firebase.
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    import { GoogleAuthProvider } from '@nativescript/firebase-auth';
    import { GoogleSignin } from '@nativescript/google-signin';

    GoogleSignin.configure(); // called earlier in the app

    GoogleSignin.signIn().then((user) => {
    \tconst credential = GoogleAuthProvider.credential(user.idToken, user.accessToken);

    \tfirebase().auth().signInWithCredential(credential);
    });
    \n

    Phone number authentication

    \n

    Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message containing a unique code is sent to the user (using the provided phone number). Once the code has been authorized, the user can sign in into Firebase.

    \n
    \n

    Note: Phone numbers that end users provide for authentication will be sent and stored by Google to improve spam and abuse prevention across Google services, including , but not limited to Firebase. Developers should ensure they have the appropriate end-user consent prior to using the Firebase Authentication phone number sign-in service.

    \n
    \n

    Firebase Phone Authentication is not supported in all countries. Please see their FAQs for more information.

    \n

    Phone number auth setup

    \n

    Before starting with Phone Authentication, ensure you have followed these steps:

    \n
      \n
    1. Enable Phone as a Sign-In method in the Firebase console.
      2. \n
    2. Android: If you haven't already set your app's SHA-1 hash in the Firebase console, do so. See Authenticating Your Client for information about finding your app's SHA-1 hash.
      3. \n
    3. iOS: In Xcode, enable push notifications for your project & ensure your APNs authentication key is configured with Firebase Cloud Messaging (FCM). To view an in-depth explanation of this step, view the Firebase iOS Phone Auth documentation.
      4. \n
    \n

    Note; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.

    \n

    Sign in user with phone number

    \n

    The user's phone number must be first verified before the user can either sign in or link their account with a PhoneAuthCredential. Verify the phone number by calling the verifyPhoneNumber method with the number. Once the number is verified, pass the verification id and code to Firebase.

    \n
    import { PhoneAuthProvider } from '@nativescript/firebase-auth';
    PhoneAuthProvider.provider()
    \t.verifyPhoneNumber('+44 7123 123 456')
    \t.then((verificationId) => {
    \t\t// present ui to allow user to enter verificationCode
    \t\t// use the verificationCode entered by the user to create PhoneAuthCredentials
    \t\tconst credential = PhoneAuthProvider.provider().credential(verificationId, verificationCode);
    \t\tfirebase().auth().signInWithCredential(credential);
    \t});
    \n

    Testing phone number auth

    \n

    Firebase provides support for locally testing phone numbers:

    \n
      \n
    • \n

      On the Firebase Console, enable the "Phone" authentication provider and click on the "Phone numbers for testing" dropdown by following the steps at .

      \n
      • \n
    • \n

      Enter a new phone number (e.g. +44 7444 555666) and a test code (e.g. 123456).\nIf providing a test phone number to either the verifyPhoneNumber or signInWithPhoneNumber methods, no SMS will be sent. You can instead provide the test code directly to the PhoneAuthProvider or with signInWithPhoneNumbers confirmation result handler.

      \n
      • \n
    \n

    API

    \n

    Auth class

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    appFirebaseAppreadonly
    currentUserUser | nullreadonly
    languageCodebooleanreadonly
    settingsAuthSettingsreadonly
    tenantIdstringA readonly only property that returns the tenant ID of the Auth class instance. Read more at tenantId.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    useEmulator(host: string, port: number)voidFor the description, see useEmulator on the Firebase documentation.
    applyActionCode(code: string)Promise<void>For the description, see applyActionCode on the Firebase documentation.
    checkActionCode(code: string)Promise<ActionCodeInfo>For the description, see checkActionCode on the Firebase documentation.
    confirmPasswordReset(code: string, newPassword: string)Promise<void>For the description, see confirmPasswordReset on the Firebase documentation.
    createUserWithEmailAndPassword(email: string, password: string)Promise<UserCredential>For the description, see createUserWithEmailAndPassword on the Firebase documentation.
    fetchSignInMethodsForEmail(email: string)Promise<string[]>For the description, see fetchSignInMethodsForEmail on the Firebase documentation.
    isSignInWithEmailLink(emailLink: string)booleanFor the description, see isSignInWithEmailLink on the Firebase documentation.
    addAuthStateChangeListener(listener: (user: User) => void)voidFor the description, see onAuthStateChanged on the Firebase documentation.
    removeAuthStateChangeListener(listener: (user: User) => void)void
    addIdTokenChangeListener(listener: (user: User) => void)voidFor the description, see onIdTokenChanged on the Firebase documentation.
    removeIdTokenChangListener(listener: (user: User) => void)void
    sendPasswordResetEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendPasswordResetEmail on the Firebase documentation.
    sendSignInLinkToEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendSignInLinkToEmail( on the Firebase documentation.
    signInAnonymously()Promise<UserCredential>For the description, see signInAnonymously on the Firebase documentation.
    signInWithProvider(provider: OAuthProvider)Promise<UserCredential>
    getProviderCredential(provider: OAuthProvider)Promise<OAuthCredential>
    signInWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see signInWithCredential on the Firebase documentation.
    signInWithCustomToken(customToken: string)Promise<UserCredential>For the description, see signInWithCustomToken on the Firebase documentation.
    signInWithEmailAndPassword(email: string, password: string)Promise<UserCredential>For the description, see signInWithEmailAndPassword on the Firebase documentation.
    signInWithEmailLink(email: string, emailLink: string)Promise<UserCredential>For the description, see signInWithEmailLink on the Firebase documentation.
    signOut()booleanSigns the user out.
    useUserAccessGroup(userAccessGroup: string)Promise<void>
    verifyPasswordResetCode(code: string)Promise<string>For the description, see verifyPasswordResetCode on the Firebase documentation.
    \n

    User

    \n

    The user object has the following members.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    uidstringreadonly
    displayNamestringreadonly
    anonymousbooleanreadonly
    emailVerifiedbooleanreadonly
    emailstringreadonly
    phoneNumber stringreadonly
    providerIdstringreadonly
    photoURLstringreadonly
    metadataUserMetadatareadonly`
    providerDataUserInfo[]readonly
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    delete()Promise<void>For the description, see delete on the Firebase documentation.
    getIdToken(forceRefresh?: undefined | false | true)Promise<string>For the description, see getIdToken on the Firebase documentation.
    getIdTokenResult(forceRefresh?: undefined | false | true)Promise<AuthTokenResult>
    linkWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see linkWithCredential on the Firebase documentation.
    reauthenticateWithProvider(provider: OAuthProvider)Promise<UserCredential>
    reauthenticateWithCredential(credential: AuthCredential)Promise<UserCredential>For the description, see reauthenticateWithCredential on the Firebase documentation.
    reload()Promise<void>For the description, see reload on the Firebase documentation.
    sendEmailVerification(actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see sendEmailVerification on the Firebase documentation.
    unlink(providerId: string)Promise<User>For the description, see unlink on the Firebase documentation.
    updateEmail(email: string)Promise<void>For the description, see updateEmail on the Firebase documentation.
    updatePassword(password: string) Promise<void>For the description, see updatePassword on the Firebase documentation.
    updatePhoneNumber(credential: AuthCredential)Promise<void>For the description, see updatePhoneNumber on the Firebase documentation.
    updateProfile(updates: UserProfileChangeRequest)Promise<void>For the description, see updateProfile on the Firebase documentation.
    verifyBeforeUpdateEmail(email: string, actionCodeSettings?: ActionCodeSettings)Promise<void>For the description, see verifyBeforeUpdateEmail on the Firebase documentation.
    \n

    UserCredential

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    additionalUserInfo<AdditionalUserInfo>
    user<User>
    credential<AuthCredential>
    \n

    AdditionalUserInfo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    newUserboolean
    profileRecord<string, any>
    providerIdstring
    usernamestring
    \n

    AuthCredential

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    iosFIRAuthCredential `
    androidcom.google.firebase.auth.AuthCredentialreadonly
    signInMethodstringreadonly
    idTokenstringreadonly
    accessTokenstringreadonly
    secretstringreadonly
    \n

    OAuthCredential

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    iosreadonly
    androidreadonly
    signInMethodstring
    idTokenstringreadonly
    accessTokenstringreadonly
    secretstringreadonly
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":24,"lastWeek":57,"lastMonth":1884}},"nativescript-camera":{"name":"nativescript-camera","version":"4.5.0","license":"Apache-2.0","readme":"

    NativeScript Camera \"Build

    \n

    Welcome to the nativescript-camera plugin for NativeScript framework

    \n

    (Optional) Prerequisites / Requirements

    \n\n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n

    Navigate to project folder and run NativeScript-CLI command

    \n
    tns plugin add nativescript-camera
    \n

    Plugin could be added as a standard npm dependency running command

    \n
    npm install nativescript-camera --save
    \n
    \n

    Note: the --save flag will add the plugin as dependency in your package.json file

    \n
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
    requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
    requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
    requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
    isAvailable()Is the device camera available to use.
    \n

    CameraOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultPlatformDescription
    width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
    saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
    allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
    cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
    \n
    \n

    Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

    \n
    \n

    Usage

    \n

    Requesting permissions

    \n

    Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    camera.requestPermissions().then(
    function success() {
    // permission request accepted or already granted 
    // ... call camera.takePicture here ...
    }, 
    function failure() {
    // permission request rejected
    // ... tell the user ...
    }
    );
    \n
    \n

    Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

    \n
    \n
    \n

    Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

    \n
    \n
    <key>NSCameraUsageDescription</key>
    <string>enter your camera permission request text here</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>enter your photo library permission request text here</string>
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    var camera = require(\"nativescript-camera\");
    \n
    import * as camera from \"nativescript-camera\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to receive image asset

    \n
    \n
    var imageModule = require(\"tns-core-modules/ui/image\");
    camera.takePicture()   
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new imageModule.Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"tns-core-modules/ui/image\";
    camera.takePicture().
        then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the original taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • allowsEditing: (iOS Only) A boolean parameter that indicates if the camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    var imageModule = require(\"tns-core-modules/ui/image\");

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options)   
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"tns-core-modules/ui/image\";

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options).
        then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    var isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":11,"lastWeek":92,"lastMonth":563}},"@herefishyfish/requery-sqlite":{"name":"@herefishyfish/requery-sqlite","version":"3.4.2","license":"Apache-2.0","readme":"

    Nativescript: Requery Sqlite

    \n

    \"npm\"\n\"npm\"

    \n

    Fork of the @nativescript-community/sqlite package to use the requery SQLite implementation which supports modern android SQLite features.

    \n

    Installation

    \n
    npm i @herefishyfish/requery-sqlite
    \n

    Usage

    \n

    You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

    \n
    import { openOrCreate, deleteDatabase } from \"@herefishyfish/requery-sqlite\";

    const sqlite = openOrCreate(\"path/to/db\");
    sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
    sqlite.transaction(cancelTransaction => {
        // Calling cancelTransaction will rollback all changes made to db
        names.forEach((name, id) =>
            sqlite.execute(
                \"INSERT INTO names (id, name) VALUES (?, ?)\",
                [id, name]
            )
        );
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":22}},"@nativescript/firebase-dynamic-links":{"name":"@nativescript/firebase-dynamic-links","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-dynamic-links

    \n\n

    Intro

    \n

    This plugin allows you to add the Firebase Dynamic Links SDK to your app, create dynamic links and receive links that launch a screen on your app.

    \n

    \"image\"

    \n

    Set up Firebase and the Dynamic Links SDK

    \n
      \n
    • \n

      To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

      \n
      • \n
    • \n

      Install and import the @nativescript/firebase-dynamic-links to add the Dynamic Links SDK.

      \n
        \n
      1. \n

        Install the plugin by running the following command in the root directory of your project.

        \n
        npm install @nativescript/firebase-dynamic-links
        \n
        2. \n
      2. \n

        To add the Dynamic Links SDK, import the @nativescript/firebase-dynamic-links plugin. You should import the plugin once in your app project and the ideal place to do that is the app bootstrapping file( app.ts, main.ts, etc).

        \n
        3. \n
      \n
      • \n
    \n
    \n

    Tip For an optimal experience with Dynamic Links, the Firebase Dynamic Links documentation recommends you to enable Google Analytics by adding the Firebase SDK for Google Analytics to your app. To add and use Firebase SDK for Google Analytics in your NativeScript app, see the @nativescript/firebase-analytics plugin documentation.

    \n
    \n
      \n
    • \n

      Add a URL prefix for your Dynamic Links with the following steps:

      \n
        \n
      • Go to the Firebase Console
        • \n
      • Click on Dynamic Link
        • \n
      • Click on Get started and enter your URL prefix in the form that follows.
        • \n
      \n
      • \n
    • \n

      Recommended: Specify the URL patterns allowed in your deep links and fallback links. For more information, refer to Allow specific URL patterns.

      \n
      • \n
    \n

    iOS: Confirm that your Firebase project is properly configured

    \n

    For instructions to confirm that your Firebase project is properly configured to use Dynamic Links for iOS, see configuration step 4.

    \n

    Use @nativescript/firebase-dynamic-links to create and receive dynamic links

    \n

    Create a dynamic link from parameters

    \n

    You can create a dynamic link via the Firebase console, your app or even your custom API. To create a dynamic link from parameters with the plugin, call the buildLink method on the DynamicLinks class instance passing it a literal object of parameters or an instance of DynamiclinkParameters returned by the createLink or createShortLink method.

    \n

    ShortLinkType

    \n
    enum ShortLinkType {
    \tDEFAULT = 'default',
    \tSHORT = 'short',
    \tUNGUESSABLE = 'unguessable',
    }
    \n
    \n

    buildLink()

    \n
    dynamicLinks = firebase().dynamicLinks()

    link: string = dynamicLinks.buildLink(linkParameters)
    \n

    Builds a dynamic link from parameters and returns the link as a string. Use the returned link to direct the user to your desired content.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkParametersDynamicLinkParametersThe dynamic link parameters used to create a dynamic link.
    \n

    onLink()

    \n
    dynamicLinks: DynamicLinks = firebase().dynamicLinks()
    listener = (link: DynamicLink | null, error: FirebaseError | null) => {
    \t// handle the link event
    }
    dynamicLinks.onLink(listener)
    \n

    Allows you to add a callback function that gets called when your app's screen is launched by a dynamic link.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    listenerOnLinkListenerThe function to be called when the app's screen is launched by a dynamic link.
    \n
    OnLinkListener type
    \n
    type OnLinkListener = (link: DynamicLink | null, error: FirebaseError | null) => void;
    \n
    \n

    resolveLink()

    \n
    dynamicLinks: DynamicLinks = firebase().dynamicLinks()

    dynamicLinks.resolveLink(link).then((dynamicLink: DynamicLink)=>{

    })
    \n

    Create the parameters of a dynamic link

    \n

    As mentioned in the Create a Dynamic Link from parameters section above, you can create a dynamic link's parameters with the createLink or createShortLink method. To create a dynamic link's parameters, call either of the methods with the deep link(the link to open when the dynamic link is clicked) and your URL prefix as the first and second arguments, respectively.

    \n
    const dynamicLinks = firebase().dynamicLinks()

    const link = dynamicLinks.createShortLink('https://docs.nativescript.org', 'https://triniwiz.page.link');

    link.social = new DynamicLinkSocialParameters();
    link.social.imageUrl = 'https://art.nativescript.org/logo/export/NativeScript_Logo_White_Blue_Rounded.png';

    let dynamiLink = await dynamicLinks.buildLink(link)
    \n

    Receive Dynamic Links

    \n

    Android: Add intent filters for deep links

    \n

    To receive a dynamic link with a deep link to your scheme, add an intent-filter to your app's AndroidManifest.xml file located at app/App_Resources/src/main as follows.

    \n
    <activity ...>
    \t....
    <intent-filter>
            \t\t<action android:name=\"android.intent.action.VIEW\" />
            \t\t<category android:name=\"android.intent.category.DEFAULT\" />
            \t\t<category android:name=\"android.intent.category.BROWSABLE\" />
            \t\t<data android:scheme=\"YOUR_SCHEME\" />
        \t\t</intent-filter>
    </activity>
    \n

    Add a callback function to receive the links

    \n

    To receive the deep link that launches a screen of your app, call the onLink method on an instance of the DynamicLinks class with the function to be notified with the link.

    \n
    const dynamicLinks = firebase().dynamicLinks();

    dynamicLinks.onLink((link: DynamicLink) => {
    \tconsole.log('onLink', link);
    });
    \n

    API

    \n

    DynamicLinks class

    \n

    ios

    \n
    dynamicLinks = firebase().dynamicLinks()
    dynamicLinksIOS: FIRDynamicLinks  = firebase().dynamicLinks().ios
    \n

    A readonly property that returns the iOS instance of FIRDynamicLinks wrapped by the DynamicLinks class.

    \n
    \n

    android

    \n
    dynamicLinks = firebase().dynamicLinks()
    dynamicLinksAndroid = firebase().dynamicLinks().android
    \n

    A readonly property that returns the Android instance of FirebaseDynamicLinks wrapped by the DynamicLinks class.

    \n
    \n

    app

    \n
    dynamicLinks = firebase().dynamicLinks()
    dynamicLinksApp: FirebaseApp = firebase().dynamicLinks().app
    \n

    A readonly property that returns the FirebaseApp instance.

    \n
    \n

    createLink()

    \n
    dynamicLinks = firebase().dynamicLinks()

    dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createLink(link, domainUri)
    \n

    Creates parameters for a dynamic link and returns a DynamicLinkParameters object to be passed to the method to create a dynamic link.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkstringThe link the app will open when the dynamic link is tapped. For more information, see the description at Dynamic Link parameters.
    domainUriPrefixstringYour domain prefix registered under Dynamic Links on Firebase Console.
    \n
    \n

    createShortLink()

    \n
    dynamicLinks = firebase().dynamicLinks()

    dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createShortLink(link, domainUri, shortLinkType)
    \n

    Creates parameters for a dynamic link and returns a DynamicLinkParameters object to be passed to the method to create a dynamic link.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkstringThe link the app will open when the dynamic link is tapped. For more information, see the description at Dynamic Link parameters.
    domainUriPrefixstringYour domain prefix registered under Dynamic Links on Firebase Console.
    shortLinkTypeShortLinkTypeOptional
    \n

    ShortLinkType

    \n
    enum ShortLinkType {
    \tDEFAULT = 'default',
    \tSHORT = 'short',
    \tUNGUESSABLE = 'unguessable',
    }
    \n
    \n

    buildLink()

    \n
    dynamicLinks = firebase().dynamicLinks()

    link: string = dynamicLinks.buildLink(linkParameters)
    \n

    Builds a dynamic link from parameters and returns the link as a string. Use the returned link to direct the user to your desired content.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkParametersDynamicLinkParametersThe dynamic link parameters used to create a dynamic link.
    \n

    onLink()

    \n
    dynamicLinks: DynamicLinks = firebase().dynamicLinks()
    listener = (link: DynamicLink | null, error: FirebaseError | null) => {
    \t// handle the link event
    }
    dynamicLinks.onLink(listener)
    \n

    Allows you to add a callback function that gets called when your app's screen is launched by a dynamic link.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    listenerOnLinkListenerThe function to be called when the app's screen is launched by a dynamic link.
    \n
    OnLinkListener type
    \n
    type OnLinkListener = (link: DynamicLink | null, error: FirebaseError | null) => void;
    \n
    \n

    resolveLink()

    \n
    dynamicLinks: DynamicLinks = firebase().dynamicLinks()

    dynamicLinks.resolveLink(link).then((dynamicLink: DynamicLink)=>{

    })
    \n

    Resolves the passed string and returns it as a DynamicLink if it's valid. Otherwise, it returns an error.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkstringThe string to be resolved.
    \n
    \n

    DynamicLinkAnalyticsParameters class

    \n

    Used to create Analytics parameters for a dynamic link.

    \n

    ios

    \n
    ios = dynamicLinkAnalyticsParameters.ios
    \n

    --

    \n

    android

    \n
    android = dynamicLinkAnalyticsParameters.android
    \n
    \n

    campaign

    \n
    campaign: undefined | string = dynamicLinkAnalyticsParameters.campign
    \n
    \n

    content

    \n
    content: undefined | string = dynamicLinkAnalyticsParameters.content
    // or
    \n
    \n

    source

    \n
    source: undefined | string = dynamicLinkAnalyticsParameters.source
    \n
    \n

    term

    \n
    term: undefined | string = dynamicLinkAnalyticsParameters.term
    \n

    DynamicLinkParameters class

    \n

    analytics

    \n
    dynamicAnalytics: DynamicLinkAnalyticsParameters = dynamicLinkParameters.analytics
    \n
    \n

    android

    \n
    dynamicLinkParametersAndroid: DynamicLinkAnalyticsParameters = dynamicLinkParameters.android
    \n
    \n

    ios

    \n
    dynamicLinkParametersIOS: DynamicLinkAnalyticsParameters = dynamicLinkParameters.ios
    \n
    \n

    domainUriPrefix

    \n
    dynamicDomainUriPrefix: string = dynamicLinkParameters.domainUriPrefix
    \n

    The URL prefix of the dynamic link.

    \n
    \n

    itunes

    \n
    dynamicLinkITunesParameters: DynamicLinkITunesParameters = dynamicLinkParameters.itunes
    \n
    \n

    navigation

    \n
    dynamicLinkNavigationParameters: DynamicLinkNavigationParameters = dynamicLinkParameters.navigation
    \n

    Gets or sets navigation info parameters.

    \n
    \n

    social

    \n
    dynamicLinkSocialParameters: DynamicLinkSocialParameters = dynamicLinkParameters.social
    \n
    \n

    DynamicLink object

    \n

    This object represents data of the link received by your app.

    \n

    ios

    \n
    linkIOS: FIRDynamicLink = link.ios
    \n
    \n

    android

    \n
    linkAndroid: com.google.firebase.dynamiclinks.PendingDynamicLinkData  = link.android
    \n
    \n

    minimumAppVersion

    \n
    minimumAppVersion: string = link.minimumAppVersion
    \n

    For the description of this property, see the description of getMinimumAppVersion() on the PendingDynamicLinkData class documentation.

    \n
    \n

    url

    \n
    url: string = link.url
    \n

    For the description of this property, see the description of getUrl() on the PendingDynamicLinkData class documentation.

    \n
    \n

    utmParameters

    \n
    utmParameters: Record<string, string> = link.utmParameters
    \n

    For the description of this property, see the description of getUtmParameters() on the PendingDynamicLinkData class documentation.

    \n

    Resolves the passed string and returns it as a DynamicLink if it's valid. Otherwise, it returns an error.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    linkstringThe string to be resolved.
    \n
    \n

    DynamicLinkAnalyticsParameters class

    \n

    Used to create Analytics parameters for a dynamic link.

    \n

    ios

    \n
    ios = dynamicLinkAnalyticsParameters.ios
    \n

    --

    \n

    android

    \n
    android = dynamicLinkAnalyticsParameters.android
    \n
    \n

    campaign

    \n
    campaign: undefined | string = dynamicLinkAnalyticsParameters.campign
    \n
    \n

    content

    \n
    content: undefined | string = dynamicLinkAnalyticsParameters.content
    // or
    \n
    \n

    source

    \n
    source: undefined | string = dynamicLinkAnalyticsParameters.source
    \n
    \n

    term

    \n
    term: undefined | string = dynamicLinkAnalyticsParameters.term
    \n

    DynamicLinkParameters class

    \n

    analytics

    \n
    dynamicAnalytics: DynamicLinkAnalyticsParameters = dynamicLinkParameters.analytics
    \n
    \n

    android

    \n
    dynamicLinkParametersAndroid: DynamicLinkAnalyticsParameters = dynamicLinkParameters.android
    \n
    \n

    ios

    \n
    dynamicLinkParametersIOS: DynamicLinkAnalyticsParameters = dynamicLinkParameters.ios
    \n
    \n

    domainUriPrefix

    \n
    dynamicDomainUriPrefix: string = dynamicLinkParameters.domainUriPrefix
    \n

    The URL prefix of the dynamic link.

    \n
    \n

    itunes

    \n
    dynamicLinkITunesParameters: DynamicLinkITunesParameters = dynamicLinkParameters.itunes
    \n
    \n

    navigation

    \n
    dynamicLinkNavigationParameters: DynamicLinkNavigationParameters = dynamicLinkParameters.navigation
    \n

    Gets or sets navigation info parameters.

    \n
    \n

    social

    \n
    dynamicLinkSocialParameters: DynamicLinkSocialParameters = dynamicLinkParameters.social
    \n
    \n

    DynamicLink object

    \n

    This object represents data of the link received by your app.

    \n

    ios

    \n
    linkIOS: FIRDynamicLink = link.ios
    \n
    \n

    android

    \n
    linkAndroid: com.google.firebase.dynamiclinks.PendingDynamicLinkData  = link.android
    \n
    \n

    minimumAppVersion

    \n
    minimumAppVersion: string = link.minimumAppVersion
    \n

    For the description of this property, see the description of getMinimumAppVersion() on the PendingDynamicLinkData class documentation.

    \n
    \n

    url

    \n
    url: string = link.url
    \n

    For the description of this property, see the description of getUrl() on the PendingDynamicLinkData class documentation.

    \n
    \n

    utmParameters

    \n
    utmParameters: Record<string, string> = link.utmParameters
    \n

    For the description of this property, see the description of getUtmParameters() on the PendingDynamicLinkData class documentation.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":24,"lastWeek":235,"lastMonth":2641}},"@swtc/brorand":{"name":"@swtc/brorand","version":"1.0.0","license":"MIT","readme":"

    Brorand

    \n

    LICENSE

    \n

    This software is licensed under the MIT License.

    \n

    Copyright Fedor Indutny, 2014.

    \n

    Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

    \n

    The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

    \n

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":19}},"nativescript-appinfo":{"name":"nativescript-appinfo","version":"0.4.1","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":1,"lastWeek":51,"lastMonth":152}},"@nativescript/template-blank":{"name":"@nativescript/template-blank","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-js --template @nativescript/template-blank
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-js --template nativescript-app-templates/packages/template-blank
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module:

    \n
      \n
    • /app/app-root - sets up a Frame that lets you navigate between pages.
      • \n
    \n

    There is a single blank page module that sets up an empty layout:

    \n
      \n
    • /app/home/home-page
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":1,"lastWeek":9,"lastMonth":447}},"@nativescript/google-signin":{"name":"@nativescript/google-signin","version":"2.0.6","license":"Apache-2.0","readme":"

    @nativescript/google-signin

    \n

    Contents

    \n\n

    Intro

    \n

    A plugin that allows you to authenticate users with Google Sign-In.

    \n

    Installation

    \n

    Install the plugin by running the following command at the root of the project.

    \n
    npm install @nativescript/google-signin
    \n

    Android prerequisites

    \n
      \n
    1. To use GoogleSignIn for Android, visit Add Firebase to your Android project and follow the 2 steps below.
      2. \n
    \n\n

    You don't need to include the google-services.json file mentioned in Add a Firebase configuration file in your app unless you are using other Google services that require it.

    \n
      \n
    1. Generate debug SHA-1 fingerprint and add it to your Firebase project.
      2. \n
    \n

    Generate the SHA-1 fingerprint for the debug keystore on your machine and add it to your app's Firebase project. Failure to do so will result in the Error: 10 error.

    \n

    To generate the SHA-1 fingerprint for the debug keystore with the following commands. For the debug keystore, the password is android.

    \n
      \n
    • macOS/Linux
      • \n
    \n
    keytool -list -v \\
    -alias androiddebugkey -keystore ~/.android/debug.keystore
    \n
      \n
    • Windows
      • \n
    \n
    keytool -list -v \\
    -alias androiddebugkey -keystore %USERPROFILE%\\.android\\debug.keystore
    \n
      \n
    1. Enable the OAuth APIs that you want, using the Google Cloud Platform API manager.\nMake sure you've filled out all the required fields in the console for OAuth consent screen. Otherwise, you may encounter APIException errors.
      2. \n
    \n

    iOS prerequisites

    \n
      \n
    1. \n

      This plugin requires iOS 9.0+.

      \n
      2. \n
    2. \n

      To use GoogleSignIn for iOS, set up the app with Firebase with the following steps at Add Firebase to your Apple project:

      \n
        \n
      1. Create a Firebase project
        2. \n
      2. Register your app with Firebase
        3. \n
      3. Add a Firebase configuration file, GoogleService-Info.plist. to App_Resources/iOS/.
        4. \n
      \n
      3. \n
    3. \n

      Open Xcode

      \n
        \n
      1. Right-click on the Runner directory and select Add Files to Runner.
        2. \n
      2. Select GoogleService-Info.plist from the file manager.
        3. \n
      3. Select the Runner target from the dialog that appears.
        4. \n
      \n
      4. \n
    4. \n

      Add the CFBundleURLTypes and GIDClientID attributes below to the App_Resources/iOS/Info.plist file.

      \n
      5. \n
    \n
    <!-- Google Sign-in Section -->
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleTypeRole</key>
    \t\t<string>Editor</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<!-- TODO Replace this value: -->
    \t\t\t<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
    \t\t\t<string>com.googleusercontent.apps.292142294722-23nmrq9mn8rhpqipjc1bt4qecga3qgsf</string>
    \t\t</array>
    \t</dict>
    </array>
    <key>GIDClientID</key>
    <!-- Copied from GoogleService-Info.plist key CLIENT_ID -->
    <string><749673967192-c24phj29u2otpict36e71ocjo2g5i3hs.apps.googleusercontent.com/string>
    <!-- End of the Google Sign-in Section -->
    \n
    \n

    Note that according to https://developer.apple.com/sign-in-with-apple/get-started, starting June 30, 2020, the apps that use login services must also offer a Sign in with Apple option when submitting to the Apple App Store. For that, consider using the@nativescript/apple-sign-in plugin.

    \n
    \n

    Use @nativescript/google-signin

    \n

    Sign in

    \n

    To sign in a user with GoogleSignIn, follow the steps below.

    \n
      \n
    1. Register and add the GoogleSignInButton to your markup to be able to initiate GoogleSigIn.
      2. \n
    \n
      \n
    • Core
      • \n
    \n
    <Page xmlns:ui=\"@nativescript/google-signin\">
    \t<ui:GoogleSigninButton tap=\"handleSignIn\" colorScheme='auto' colorStyle='standard'/>
    </Page>
    \n
      \n
    • Angular
      • \n
    \n

    Register the button as follows:

    \n
    import { registerElement } from '@nativescript/angular';
    registerElement('GoogleSignInButton', () => require('@nativescript/google-signin').GoogleSignInButton);
    \n

    Next, add it to your html file setting the desired option for colorScheme and colorStyle as:

    \n
    <GoogleSignInButton colorScheme='auto' colorStyle='standard' (tap)=\"yourGoogleSigninFunction()\"></GoogleSignInButton>
    \n

    Vue

    \n

    To register the button, add the following code to the main.ts file.

    \n
    registerElement('GoogleSignInButton',()=> require(\"@nativescript/google-signin\").GoogleSignInButton)
    \n

    Then use it in a .vue file as follows:

    \n
    <GoogleSignInButton colorScheme='auto' colorStyle='standard' @tap=\"yourGoogleSigninFunction\"></GoogleSignInButton>
    \n
      \n
    1. Call the signIn() method on GoogleSignInButton tap
      2. \n
    \n

    Before you call the signIn() or the signInSilently() method to sign in the user, call configure() to initialize Firebase. If you do want to set any configuration options, you can pass an empty object {} as a parameter to configure.

    \n
    import { GoogleSignin } from '@nativescript/google-signin';

    try {
    \tawait GoogleSignin.configure({});
    \tconst user = await GoogleSignin.signIn();
    } catch (e) {}
    \n

    Styling the GoogleSignInButton

    \n

    GoogleSignInButton is a View instance so you can use the View class styling properties. Additionally, the plugin offers the colorScheme and colorStyle properties.

    \n

    API

    \n

    GoogleSignIn

    \n

    The class that provides GoogleSignIn API. It has the following methods:

    \n

    configure()

    \n
    await GoogleSignIn.configure(configuration)
    \n

    Specifies the properties of the sign-in request, such as scopes,accountName, etc.

    \n

    Call this method before calling the signIn() or signInSilently() method. Call it only once, after your app starts.

    \n

    The configuration parameter is an optional Configuration object.

    \n

    Configuration

    \n

    The Configuration object has the following properties. All properties are optional.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    scopesstring[]
    signInOptions'default' | 'games'
    clientIdstring
    serverClientIdstring
    accountNamestring
    hostedDomainstring
    \n
    \n

    signIn()

    \n
    user: User = await GoogleSignin.signIn()
    \n

    Prompts a modal to let the user sign in into the application.

    \n
    \n

    signInSilently()

    \n
    user: User = await GoogleSignin.signInSilently()
    \n
    \n

    isSignedIn()

    \n
    isUserSignedIn: boolean
     = GoogleSignin.isSignedIn()
    \n

    Checks whether the user is currently signed in.

    \n
    \n

    playServicesAvailable()

    \n
    isPlayServicesAvailable: boolean = await GoogleSignin.playServicesAvailable();
    \n

    Checks if device has Google Play Services installed. Always resolves to true on iOS.

    \n

    Presence of up-to-date Google Play Services is required to show the sign in modal.

    \n
    \n

    signOut()

    \n
    GoogleSignin.signOut()
    \n

    Signs out the current user.

    \n
    \n

    disconnect()

    \n
    await GoogleSignin.disconnect()
    \n

    Disconnects the current user.

    \n
    \n

    getTokens()

    \n
    tokens: { idToken: string; accessToken: string;} = await GoogleSignin.getTokens()
    \n

    Resolves with an object containing { idToken: string, accessToken: string, } or rejects with an error. Note that using accessToken for identity assertion on your backend server is discouraged.

    \n
    \n

    getCurrentUser()

    \n
    user : User | null = GoogleSignin.getCurrentUser()
    \n

    This method resolves with null or a User object.

    \n

    User

    \n

    The user object has the following members:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringreadonly
    displayNamestringreadonly
    emailstringreadonly
    givenNamestringreadonly
    familyNamestringreadonly
    idTokenstringreadonly
    accessTokenstringreadonly
    grantedScopesstring[]readonly
    photoUrlstringreadonly
    serverAuthCodestringreadonly
    requestScopes(scopes: string[])Promise<IUser>See User for the properties of IUser
    nativecom.google.android.gms.auth.api.signin.GoogleSignInAccount | GIDGoogleUserPlatform-specific instance.
    \n

    GoogleSignInButton

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    colorScheme"dark" | "light" | "auto"
    colorStyle"standard" | "wide" | "icon"
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":7,"lastWeek":53,"lastMonth":668}},"@global66/nativescript-sms-receiver":{"name":"@global66/nativescript-sms-receiver","version":"1.1.2","license":"Apache-2.0","readme":"

    nativescript-sms-receiver

    \n

    This is simple library for receiving sms in android with new SMS Retriever API.

    \n

    Requirements

    \n

    Minimum sdk is 21.

    \n

    Installation

    \n
    tns plugin add nativescript-sms-receiver
    \n

    Usage

    \n

    Step 1. Register SMSBroadcastReceiver in manifest file

    \n

    Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

    \n
    <receiver android:name=\"com.pravinkumarputta.android.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
    \t<intent-filter>
    \t\t<action android:name=\"com.google.android.gms.auth.api.phone.SMS_RETRIEVED\"/>
    \t</intent-filter>
    </receiver>
    \n

    Step 2. Import SmsReceiver

    \n
    import { SmsReceiver } from 'nativescript-sms-receiver';
    \n

    Step 3. Instantiate SmsReceiver

    \n

    Call this method once before starting SMS listener

    \n
    SmsReceiver.getInstance();
    \n

    Note: Call above method only after page loaded.

    \n

    Step 4. Start SMS listening

    \n
    // register Sms Listener to get SMS callbacks
    SmsReceiver.getInstance().registerListeners(
        function () {
            // onSMSReceiverStarted
            ...
        }.bind(this),
        function (exception) {
            // onSMSReceiverFailed
            ...
        }.bind(this),
        function (message) {
            // onSMSReceived
            ...
                // handle sms here
            ...

            // deregister Sms Listener to avoid invalid operations
            SmsReceiver.getInstance().deregisterListeners();
        }.bind(this),
        function () {
            // onSMSReceiverTimeOut
            ...
        }.bind(this)
    );

    // start sms receiver for single message
    SmsReceiver.getInstance().startReceiver();
    \n

    Construct a verification message

    \n

    The verification message that you will send to the user's device. This message must:

    \n
      \n
    • Be no longer than 140 bytes
      • \n
    • Begin with the prefix <#>
      • \n
    • Contain a one-time code that the client sends back to your server to complete the verification flow (see Generating a one-time code)
      • \n
    • End with an 11-character hash string that identifies your app (see Computing your app's hash string)
      • \n
    \n

    Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

    \n
    <#> Your ExampleApp code is: 123ABC78
    FA+9qCX9VSu
    \n

    (For more information visit here)

    \n

    Generating 11-character hash string for your app

    \n

    After instantiating SMSReceiver access hash string using:

    \n
    SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
    \n

    Request for phone number saved in your device

    \n
    SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
        // phoneNumber is null if no number is selected.
        ...
    })
    \n

    Used libraries

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":52}},"nativescript-plugin-appsflyer":{"name":"nativescript-plugin-appsflyer","version":"6.12.7","license":{"type":"MIT","url":"https://github.com/AppsFlyerSDK/nativescript-plugin-appsflyer/blob/master/LICENSE"},"readme":"\n

    appsflyer-nativescript-plugin

    \n

    Nativescript Library for AppsFlyer SDK

    \n

    \"npm

    \n

    Table of content

    \n\n

    This plugin is built for

    \n
      \n
    • iOS AppsFlyerSDK v6.12.0
      • \n
    • Android AppsFlyerSDK v6.12.1
      • \n
    \n

    Breaking Changes

    \n

    v6.5.4

    \n

    Android: deepLinkResult will return an object instead of a string

    \n

    Installation

    \n

    $ tns plugin add nativescript-plugin-appsflyer

    \n

    Integration

    \n
    \n

    Call module by adding (native javascript):

    \n

    var appsFlyer = require("nativescript-plugin-appsflyer");

    \n
    \n
    appsFlyer.initSdk(options, callback): void
    \n

    initializes the SDK.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectSDK configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    nametypedefaultdescription
    devKeystringAppsflyer Dev key
    appIdstringApple Application ID (for iOS only)
    isDebugbooleanfalsedebug mode (optional)
    onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
    onConversionDataFailurefunction
    \n

    Example:

    \n
     var options = {
                devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
                appId: \"975313579\",
                isDebug: true,
                timeToWaitForATTUserAuthorization: 60,
                onConversionDataSuccess: function(_res){
                    console.log(JSON.stringify(_res));
                },
                onConversionDataFailure: function(_res){
                    console.warn(\"failure: \" + JSON.stringify(_res));
                },
            };

            appsFlyer.initSdk(options).then(function(result) {
                viewModel.set(\"initSdkResponse\", result.status);
            }, function(err) {
                viewModel.set(\"initSdkResponse\", JSON.stringify(err));
            });
    \n
    \n
    appsFlyer.logEvent(options): Promise<any>
    \n
      \n
    • These in-app events help you measure how loyal users discover your app, and attribute them to specific\ncampaigns/media-sources. Please take the time define the event/s you want to measure to allow you\nto measure the ROI (Return on Investment) and LTV (Lifetime Value).
      • \n
    • The logEvent method allows you to send in-app events to AppsFlyer analytics. This method allows you to add events dynamically by adding them directly to the application code.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectlog event configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
    eventValuesObjectevent details (see example bellow)
    \n

    Example: (native javascript)

    \n
     
            var options = {
                eventName: \"af_add_to_cart\",
                eventValues: {
                    \"af_content_id\": \"id123\",
                    \"af_currency\": \"USD\",
                    \"af_revenue\": \"2\"
                }
            };
            appsFlyer.logEvent(options).then(function(result) {
                viewModel.set(\"logEventResponse\", result);
            }, function(err) {
                viewModel.set(\"logEventResponse\", JSON.stringify(err));
            });
    \n

    Demo

    \n

    This plugin has a demo project bundled with it. To give it a try , clone this repo and from root a.e. nativescript-plugin-appsflyer execute the following:

    \n
    npm run setup
    \n
      \n
    • Run npm run demo.ios or npm run demo.android will run for the appropriate platform.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":42,"lastMonth":152}},"nativescript-accordion":{"name":"nativescript-accordion","version":"6.0.0-beta.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Accordion

    \n

    \"Buy

    \n

    Install

    \n

    tns plugin add nativescript-accordion

    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:accordion="nativescript-accordion" on the Page element

    \n

    Data

    \n

    By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

    \n
    this.items = [
          {
            title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
            blah: [
              { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
              { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
            ]
          }
        ]
    \n
    selectedIndexes = [0,3]
    \n

    Core

    \n
    <accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
                <accordion:Accordion.headerTemplate>
                    <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                        <Label text=\"{{title}}\"/>
                        <Label col=\"1\" text=\"+\"/>
                    </GridLayout>
                </accordion:Accordion.headerTemplate>

                <accordion:Accordion.itemHeaderTemplate>
                    <StackLayout>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </accordion:Accordion.itemHeaderTemplate>
                
                
                <accordion:Accordion.itemContentTemplate>
                                <StackLayout>
                                    <Image src=\"{{image}}\"/>
                                </StackLayout>
                  </accordion:Accordion.itemContentTemplate>

                <accordion:Accordion.footerTemplate>
                    <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                        <Label text=\"{{footer}}\"/>
                        <Label col=\"1\" text=\"-\"/>
                    </GridLayout>
                </accordion:Accordion.footerTemplate>

            </accordion:Accordion>
    \n

    Multi Template

    \n
    <accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                                 items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                                 headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                                 itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                                 itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                                 footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
            >

                <Accordion.headerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.headerTemplates>


                <Accordion.itemHeaderTemplates>
                    <template key=\"odd\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemHeaderTemplates>

                <Accordion.itemContentTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemContentTemplates>

                <Accordion.footerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.footerTemplates>

            </accordion:Accordion>
    \n

    Vue

    \n

    import Vue from 'nativescript-vue'
    import Pager from 'nativescript-accordion/vue'

    Vue.use(Pager)
    \n
    <Accordion row=\"1\" for=\"item of items\">

    \t\t\t\t<v-template name=\"header\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"title\">
    \t\t\t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
    \t\t\t\t\t</GridLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template name=\"content\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"footer\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Multi Template

    \n
    <Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
    \t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"header-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"title-even\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t\t\t   :src=\"item.image\">    </Image>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"content-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Angular

    \n
    import { AccordionModule } from \"nativescript-accordion/angular\";

    @NgModule({
        imports: [
            AccordionModule
        ]
        })
    \n
    <Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
    \t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
    \t\t\t</GridLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Multi Template

    \n
    <Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
    \t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
    \t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
    \t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
    \t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
    \t>
    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t   [src]=\"item.image\">    </Image>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Config

    \n
    public selectedIndexes = [0,3]
    \n
    <Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidIOS
    \"SS\"\"SS\"
    \n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":120}},"@valor/nativescript-feedback":{"name":"@valor/nativescript-feedback","version":"2.0.2","license":"MIT","readme":"

    NativeScript Feedback

    \n

    This is a fork from https://github.com/EddyVerbruggen/nativescript-feedback with updated dependencies. Huge thanks to @EddyVerbruggen for the great work as always!

    \n

           \n

    \n

    iOS and Android running the included demo - much better framerate on YouTube!

    \n

    Installation

    \n
    tns plugin add @valor/nativescript-feedback
    \n

    API

    \n

    requiring / importing the plugin

    \n

    JavaScript

    \n
    var FeedbackPlugin = require(\"@valor/nativescript-feedback\");
    var feedback = new FeedbackPlugin.Feedback();
    \n

    TypeScript

    \n
    import { Feedback, FeedbackType, FeedbackPosition } from \"@valor/nativescript-feedback\";

    export class MyClassWithFeedback {
      private feedback: Feedback;
      
      constructor() {
        this.feedback = new Feedback();
      }
    }
    \n

    show

    \n

    Showing feedback can be as easy as:

    \n
    this.feedback.show({
      message: \"Easiest thing ever, right?\"
    });
    \n

    That uses a bunch of sane defaults.\nHowever, there are a lot of things you may want to tweak. All of which are optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    titleundefinedThe bold title at the top.
    titleColornew Color("white")The title's color.
    titleFontBold system fontiOS needs the font name and android the file name. See the demo for examples.
    titleSize16The size of the title font.
    messageundefinedThe message below the title.
    messageColornew Color("white")The message's color.
    messageFontSystem fontiOS needs the font name and android the file name. See the demo for examples.
    messageSize13The size of the message font.
    duration4000The duration to show the feedback (milliseconds).
    typeFeedbackType.CustomOne of .Custom, .Success, .Warning, .Error, .Info. Each with a distinct style as show in the animations above. You can still override all other properties according to your liking.
    positionFeedbackPosition.TopEither .Top or .Bottom.
    backgroundColorDepends on the typeThe background's color.
    iconDepends on the typeA custom icon shown on the left. Loaded from App_Resources/<platform> folders. Example here. Want no icon at all? Don't set a type.
    android.iconColorSee descriptionOn iOS the icon color is as-is, but on Android it's white. Set this color to override the latter (also see the TypeScript example below).
    android.iconPulseEnabledtrueOn Android you can disable the pulsating effect of the icon.
    onTapundefinedA callback function that gets invoked when the user tapped your feedback.
    onShowundefinedA callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done.
    onHideundefinedA callback for when the feedback is hidden.
    \n

    One of the examples in the demo app shows a custom icon and alternative colors. You'd get there by doing:

    \n

    JavaScript

    \n
    var FeedbackType = require (\"@valor/nativescript-feedback\").FeedbackType;
    var FeedbackPosition = require (\"@valor/nativescript-feedback\").FeedbackPosition;
    var color = require(\"color\");

    this.feedback.show({
      title: \"Thumbs up!\",
      titleColor: new color.Color(\"#222222\"),
      position: FeedbackPosition.Bottom, // iOS only
      type: FeedbackType.Custom, // this is the default type, by the way
      message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
      messageColor: new color.Color(\"#333333\"),
      duration: 3000,
      backgroundColor: new color.Color(\"yellowgreen\"),
      icon: \"customicon\", // in App_Resources/platform folders
      onTap: function() { console.log(\"showCustomIcon tapped\") },
      onShow: function(animating) { console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\") },
      onHide: function() { console.log(\"showCustomIcon hidden\") }
    });
    \n

    TypeScript

    \n
    import { FeedbackType, FeedbackPosition } from \"@valor/nativescript-feedback\";
    import { Color } from \"tns-core-modules/color\";

    this.feedback.show({
      title: \"Thumbs up!\",
      titleColor: new Color(\"#222222\"),
      position: FeedbackPosition.Bottom,
      type: FeedbackType.Custom, // this is the default type, by the way
      message: \"Custom colors and icon. Loaded from the App_Resources folder.\",
      messageColor: new Color(\"#333333\"),
      duration: 3000,
      backgroundColor: new Color(\"yellowgreen\"),
      icon: \"customicon\", // in App_Resources/platform folders
      android: {
        iconColor: new Color(\"#222222\") // optional, leave out if you don't need it
      },
      onTap: () => console.log(\"showCustomIcon tapped\"),
      onShow: animating => console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\"),
      onHide: () => console.log(\"showCustomIcon hidden\")
    });
    \n

    hide

    \n

    Hiding a message can be done automatically (see duration), by a gesture (tap / swipe), or programmatically as shown here:

    \n
    this.feedback.hide();
    \n

    Convenience functions

    \n

    Since in many cases you want to only show success / info / warning / error messages anyway, this plugin's got you covered. You can call any of these functions and still pass in any of the aforementioned properties to tweak it to your liking:

    \n

    success

    \n
    this.feedback.success({
      title: \"Awesome\",
      message: \"That was great!\"
    });
    \n

    info

    \n
    this.feedback.info({
      title: \"Info <> Data\",
      message: \"Info is relevant data, not just any data.\"
    });
    \n

    warning

    \n
    this.feedback.warning({
      message: \"Your battery is almost empty\"
    });
    \n

    error

    \n
    this.feedback.error({
      title: \"KABOoooOOM!\",
      titleColor: new Color(\"black\")
    });
    \n

    Credits

    \n

    On Android we're using the Alerter library by Tapadoo,\nand on iOS ISMessages by ilyainyushin.

    \n","downloadStats":{"lastDay":39,"lastWeek":777,"lastMonth":3283}},"nativescript-pager":{"name":"nativescript-pager","version":"12.0.0-alpha.9","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Pager

    \n

    Install

    \n

    NativeScript 6x

    \n
      \n
    • tns plugin add nativescript-pager
      • \n
    \n

    NativeScript 5x

    \n
      \n
    • tns plugin add nativescript-pager@9.x
      • \n
    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-pager@8.0.2
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-pager@7.2.3
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-pager@2.3.0
      • \n
    \n

    Usage

    \n

    Note v11+

    \n
    Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
    \n

    IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

    \n
    <pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <pager:Pager.itemTemplate>
                    <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                        <Label text=\"{{title}}\"/>
                        <Image row=\"1\" src=\"{{image}}\"/>
                    </GridLayout>
                </pager:Pager.itemTemplate>
    </pager:Pager>
    \n

    Multi Template

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
          <Pager.itemTemplates>
            <template key=\"even\">
              <GridLayout rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
            <template key=\"odd\">
              <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <StackLayout row=\"2\">
                  <Label text=\"{{image}}\"/>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
          </Pager.itemTemplates>
          <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
        </c:Pager>
    \n

    Static Views

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                     showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <c:PagerItem backgroundColor=\"red\">
                    <Label text=\"First\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"white\">
                    <Label text=\"Second\" ></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"black\">
                    <Label text=\"Third\" color=\"white\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"green\">
                    <Label text=\"Fourth\"></Label>
                </c:PagerItem>
            </c:Pager>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import Pager from 'nativescript-pager/vue';

    Vue.use(Pager);
    \n
    <template>
        <Pager for=\"item in items\">
            <v-template>
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Label :text=\"item.title\" />
                    <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
                </GridLayout>
            </v-template>
            <v-template if=\"$odd\">
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Image  stretch=\"fill\" :src=\"item.image\" />
                    <Label :text=\"item.title\" row=\"1\"/>
                </GridLayout>
            </v-template>
        </Pager>
    </template>
    \n

    Static Views

    \n
    <Pager height=\"100%\" :selectedIndex=\"1\">
      <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
      <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
      <PagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </PagerItem>
      <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
    </Pager>
    \n

    Angular

    \n
    import { PagerModule } from \"nativescript-pager/angular\";

    @NgModule({
        imports: [
        PagerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Angular v2

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </template>
    </Pager>
    \n

    Angular v4+

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <ng-template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Multi Template

    \n
     public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
      }
    \n
    <Pager
      row=\"1\"
      [items]=\"items | async\"
      [itemTemplateSelector]=\"templateSelector\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
      backgroundColor=\"lightsteelblue\"
    >
      <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
        <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
          <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>

      <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto,auto,auto,*\"
          columns=\"*\"
          backgroundColor=\"white\"
        >
          <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
          <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Static Views

    \n
    <Pager
      backgroundColor=\"orange\"
      row=\"1\"
      #pager
      [selectedIndex]=\"1\"
      height=\"100%\"
    >
      <StackLayout *pagerItem backgroundColor=\"red\">
        <label text=\"First\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"white\">
        <label text=\"Second\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"green\">
        <label text=\"Fourth\"></label>
      </StackLayout>
    </Pager>
    \n

    React

    \n
    import {$Pager} from 'nativescript-pager/react';
    return (
    <$Pager
                    height={{ unit: \"%\", value: 100 }}
                       selectedIndex={this.selectedIndex}
                       selectedIndexChange={this.selectedIndexChange.bind(this)}
                        items={this.items}
                         cellFactory={
                        (item, ref) => {
                            return (
                                <$StackLayout id={item.title} ref={ref}>
                                    <$Label text={item.title}/>
                                    <$ImageCacheIt stretch={'aspectFill'}
                                            src={item.image}/>
                                </$StackLayout>
                            );
                        }
                    }/>
    )
    \n

    Static Views

    \n
    return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                               <$PagerItem backgroundColor={'red'}>
                                   <$Label text={'First'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'white'}>
                                   <$Label text={'Second'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'black'}>
                                   <$Label text={'Third'} color={new Color('white')}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'green'}>
                                   <$Label text={'Fourth'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'pink'}>
                                   <$Label text={'Fifth'}/>
                               </$PagerItem>
                           </$Pager>)
    \n

    Config

    \n
    <Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"ios\"\"android\"
    \n","downloadStats":{"lastDay":8,"lastWeek":18,"lastMonth":425}},"nativescript-local-notifications":{"name":"nativescript-local-notifications","version":"4.2.1","license":"MIT","readme":"

    NativeScript Local Notifications Plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n
    \n

    ⚠️ Plugin version 4.0.0 should be used with NativeScript 6+. If you have an older tns --version, please use an older plugin version.

    \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-local-notifications
    \n

    Setup (since plugin version 3.0.0)

    \n

    Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

    \n

    You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

    \n
    require (\"nativescript-local-notifications\");
    \n

    Now you can import the plugin as an object into your .ts file as follows:

    \n
    // either
    import { LocalNotifications } from \"nativescript-local-notifications\";
    // or (if that doesn't work for you)
    import * as LocalNotifications from \"nativescript-local-notifications\";

    // then use it as:
    LocalNotifications.hasPermission()
    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    This demo is the one with the most options, so it's a cool one to check out:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo.ios # or demo.android
    \n

    NativeScript-Angular

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    There's also a simple Angular demo in this repo:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo-ng.ios # or demo-ng.android
    \n

    NativeScript-Vue

    \n

    We also have a Vue demo:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo-vue.ios # or demo-vue.android
    \n

    Plugin API

    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Will be generated if not set.
    titleThe title which is shown in the statusbar. Default not set.
    subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
    bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
    colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
    bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
    groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
    groupSummaryAn inboxStyle notification summary. Default empty
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalSet to one of second, minute, hour, day, week, month, year if you want a recurring notification.
    iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
    silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
    imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
    thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
    ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
    channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
    forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
    priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
    actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
    notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
    \n

    NotificationAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idAn id so you can easily distinguish your actions.
    typeEither button or input.
    titleThe label for type = button.
    launchLaunch the app when the action completes.
    submitLabelThe submit button label for type = input.
    placeholderThe placeholder text for type = input.
    \n
      LocalNotifications.schedule([{
        id: 1, // generated id if not set
        title: 'The title',
        body: 'Recurs every minute until cancelled',
        ticker: 'The ticker',
        color: new Color(\"red\"),
        badge: 1,
        groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
        groupSummary:\"Summary of the grouped messages above\", //android only
        ongoing: true, // makes the notification ongoing (Android only)
        icon: 'res://heart',
        image: \"https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg\",
        thumbnail: true,
        interval: 'minute',
        channel: 'My Channel', // default: 'Channel'
        sound: \"customsound-ios.wav\", // falls back to the default sound on Android
        at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
      }]).then(
          function(scheduledIds) {
            console.log(\"Notification id(s) scheduled: \" + JSON.stringify(scheduledIds));
          },
          function(error) {
            console.log(\"scheduling error: \" + error);
          }
      )
    \n

    Notification icons (Android)

    \n

    These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

    \n

    silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

    \n

    These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi18 × 18120
    mdpi24 × 24160
    hdpi36 × 36240
    xhdpi48 × 48320
    xxhdpi72 × 72480
    xxxhdpi96 × 96640 approx.
    \n

    Source: Density Qualifier Docs

    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
      LocalNotifications.addOnMessageReceivedCallback(
          function (notification) {
            console.log(\"ID: \" + notification.id);
            console.log(\"Title: \" + notification.title);
            console.log(\"Body: \" + notification.body);
          }
      ).then(
          function() {
            console.log(\"Listener added\");
          }
      )
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n

    Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

    \n
      LocalNotifications.getScheduledIds().then(
          function(ids) {
            console.log(\"ID's: \" + ids);
          }
      )
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
      LocalNotifications.cancel(5 /* the ID */).then(
          function(foundAndCanceled) {
              if (foundAndCanceled) {
                console.log(\"OK, it's gone!\");
              } else {
                console.log(\"No ID 5 was scheduled\");
              }
          }
      )
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
      LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
      LocalNotifications.requestPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
      LocalNotifications.hasPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n","downloadStats":{"lastDay":8,"lastWeek":123,"lastMonth":450}},"nativescript-email":{"name":"nativescript-email","version":"1.6.0","license":"MIT","readme":"

    NativeScript Email

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    You can use this plugin to compose an e-mail, have the user edit the draft manually, and send it.

    \n
    \n

    Note that this plugin depends on the default mail app. If you want a fallback to a third party client app like Gmail or Outlook, then check for availability, and if not available use a solution like the Social Share plugin.

    \n
    \n

    Installation

    \n

    Run this command from the root of your project:

    \n
    tns plugin add nativescript-email
    \n

    API

    \n

    To use this plugin you must first require/import it:

    \n

    TypeScript

    \n
    import * as email from \"nativescript-email\";
    // or
    import { compose } from \"nativescript-email\";
    // or even
    import { compose as composeEmail } from \"nativescript-email\";
    \n

    JavaScript

    \n
    var email = require(\"nativescript-email\");
    \n

    available

    \n

    TypeScript

    \n
      email.available().then((avail: boolean) => {
          console.log(\"Email available? \" + avail);
      })
    \n

    JavaScript

    \n
      email.available().then(function(avail) {
          console.log(\"Email available? \" + avail);
      })
    \n

    compose

    \n

    JavaScript

    \n
      // let's first create a File object using the tns file module
      var fs = require(\"file-system\");
      var appPath = fs.knownFolders.currentApp().path;
      var logoPath = appPath + \"/res/telerik-logo.png\";

      email.compose({
          subject: \"Yo\",
          body: \"Hello <strong>dude</strong> :)\",
          to: ['eddyverbruggen@gmail.com', 'to@person2.com'],
          cc: ['ccperson@somewhere.com'],
          bcc: ['eddy@combidesk.com', 'eddy@x-services.nl'],
          attachments: [
            {
                fileName: 'arrow1.png',
                path: 'base64://iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAYAAAD6xArmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAHGlET1QAAAACAAAAAAAAABQAAAAoAAAAFAAAABQAAAB5EsHiAAAAAEVJREFUSA1iYKAimDhxYjwIU9FIBgaQgZMmTfoPwlOmTJGniuHIhlLNxaOGwiNqNEypkwlGk9RokoIUfaM5ijo5Clh9AAAAAP//ksWFvgAAAEFJREFUY5g4cWL8pEmT/oMwiM1ATTBqONbQHA2W0WDBGgJYBUdTy2iwYA0BrILDI7VMmTJFHqv3yBUEBQsIg/QDAJNpcv6v+k1ZAAAAAElFTkSuQmCC',
                mimeType: 'image/png'
            },
            {
                fileName: 'telerik-logo.png',
                path: logoPath,
                mimeType: 'image/png'
          }]
      }).then(
        function() {
          console.log(\"Email composer closed\");
        }, function(err) {
          console.log(\"Error: \" + err);
        });
    \n

    Full attachment support has been added to 1.3.0 per the example above.

    \n

    Since 1.4.0 the promise will be rejected in case a file can't be found.

    \n

    Usage with Angular

    \n

    Check out this tutorial (YouTube) to learn how to use this plugin in a NativeScript-Angular app.

    \n

    Known issues

    \n

    On iOS you can't use the simulator to test the plugin because of an iOS limitation.\nTo prevent a crash this plugin returns false when available is invoked on the iOS sim.

    \n","downloadStats":{"lastDay":10,"lastWeek":58,"lastMonth":214}},"@nativescript/firebase-remote-config":{"name":"@nativescript/firebase-remote-config","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-remote-config

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use the Firebase Remote Config API in your NativeScript app.

    \n

    \"image\"

    \n

    Set up your app for Firebase

    \n

    You need to set up your app for Firebase before you can enable Firebase Remote Config. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Add the Firebase Remote Config SDK to your app

    \n

    To add the Firebase Remote Config to your app, follow these steps:

    \n
      \n
    1. Install the @nativescript/firebase-remote-config plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-remote-config
    \n
      \n
    1. Add the SDK by importing the @nativescript/firebase-remote-config module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-remote-config';
    \n

    Create in-app default parameters

    \n

    Default in-app values help ensure that your application code runs as expected in scenarios where the device has not yet retrieved the values from the remote server.

    \n

    To create default in-app Remote Config parameters, follow the steps:

    \n
      \n
    1. Firebase Console and select your project.
      2. \n
    2. On the Remote Config dashboard, click Create configuration to create a parameter.
      3. \n
    3. You can add default in-app parameter values through either of the two options below. In both options, add the values to the Remote Config object early in your app's lifecycle, ideally in your bootstrap file (e.g. app.ts or main.ts)\n
        \n
      1. Download and add the .xml file with the parameter values to your app.\n
          \n
        • Add the in-app default parameters in the .xml file to the Remote Config object by calling the setDefaultsFromResource method.
          • \n
        \n
        import { firebase } from '@nativescript/firebase-core';

        firebase()
        \t.remoteConfig()
        \t.setDefaultsFromResource(\"remote_config_defaults\")
        \t.then(() => {
        \t\tconsole.log('Default values set.');
        \t});
        \n
        2. \n
      2. Add the in-app parameter values to the Remote Config object by passing them in an object to the setDefaults method.
        import { firebase } from '@nativescript/firebase-core';

        firebase()
        \t.remoteConfig()
        \t.setDefaults({
        \t\tawesome_new_feature: 'disabled',
        \t})
        \t.then(() => {
        \t\tconsole.log('Default values set.');
        \t});
        \n
        3. \n
      \n
      4. \n
    \n

    Set parameter values in the Remote Config backend

    \n

    To create new server-side default values that override the in-app values, see Set parameter values in the Remote Config backend

    \n

    Fetch and activate values

    \n

    Once you've created your parameters in the Remote Config backend, you can fetch them from the server and activate them in your app. You can first fetch the values from the server and then activate them, or you can combine the two tasks into a single flow with the fetchAndActivate method.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.remoteConfig()
    \t.setDefaults({
    \t\tawesome_new_feature: 'disabled',
    \t})
    \t.then(() => remoteConfig().fetchAndActivate())
    \t.then((fetchedRemotely) => {
    \t\tif (fetchedRemotely) {
    \t\t\tconsole.log('Configs were retrieved from the backend and activated.');
    \t\t} else {
    \t\t\tconsole.log('No configs were fetched from the backend, and the local configs were already activated');
    \t\t}
    \t});
    \n

    Set a minimum fetch interval

    \n

    Although Remote Config is a data storage, it is not designed for frequent reads. By default, Firebase caches the parameters for 12 hours. By design, this prevents the values from being able to change frequently and potentially causes users confusion.

    \n
      \n
    • To set a different minimum fetch interval, pass it, in seconds, to the fetch method:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    // Fetch and cache for 5 minutes
    await firebase().remoteConfig().fetch(300);
    \n
      \n
    • To bypass caching fully, you can pass a value of 0.
      • \n
    \n
    \n

    Note Be warned Firebase may start to reject your requests if values are requested too frequently.

    \n
    \n
      \n
    • You can also apply a global cache frequency by setting the minimumFetchIntervalMillis property of the RemoteConfigSettings object to the number of milliseconds to cache the values for. This can be done in the bootstrap file before the app starts:
      • \n
    \n
    import { firebase } from '@nativescript/firebase-core';
    remoteConfig().settings.minimumFetchIntervalMillis = 30000;
    \n

    Reading parameters values

    \n

    To read the fetched and activated parameters in your app, you can Read a single parameter or Read all parameters at once.

    \n

    Read a single parameter

    \n

    To read a single parameter value from the activated parameter values, call the getValue method on the Remote Config object. The getValue method returns a ConfigValue object, which you can use to get the value as a specific type (e.g. string, number, boolean, etc).

    \n
    import { firebase } from '@nativescript/firebase-core';

    const awesomeNewFeature = firebase().remoteConfig().getValue('awesome_new_feature');

    // resolves value to string
    if (awesomeNewFeature.asString() === 'enabled') {
    \tenableAwesomeNewFeature();
    }
    // resolves value to number
    // if it is not a number or source is 'static', the value will be 0
    if (awesomeNewFeature.asNumber() === 5) {
    \tenableAwesomeNewFeature();
    }
    // resolves value to boolean
    // if value is any of the following: '1', 'true', 't', 'yes', 'y', 'on', it will resolve to true
    // if source is 'static', value will be false
    if (awesomeNewFeature.asBoolean() === true) {
    \tenableAwesomeNewFeature();
    }
    \n

    Read all parameters at once

    \n

    To read all the parameters from the Remote Config object at once, call the getAll method. The getAll method returns an object with the parameter keys as the object keys and the ConfigValue objects as the object values.

    \n
    import { firebase } from '@nativescript/firebase-core';

    const parameters = firebase().remoteConfig().getAll();

    Object.entries(parameters).forEach((item) => {
    \tconst [key, entry] = item;
    \tconsole.log('Key: ', key);
    \tconsole.log('Source: ', entry.getSource())    ;
    \tconsole.log('Value: ', entry.asString());
    });
    \n

    Get the source of a parameter's value

    \n

    When a value is read, it contains source data about the parameter. If a value is read before it has been fetched & activated then the value will fall back to the default in-app value set. If you need to validate whether the value returned from the module was local or remote, call the getSource method on the ConfigValue object:

    \n
    import { firebase } from '@nativescript/firebase-core';

    const awesomeNewFeature: ConfigValue = firebase().remoteConfig().getValue('awesome_new_feature');

    if (awesomeNewFeature.getSource() === 'remote') {
    \tconsole.log('Parameter value was from the Firebase servers.');
    } else if (awesomeNewFeature.getSource() === 'default') {
    \tconsole.log('Parameter value was from a default value.');
    } else {
    \tconsole.log('Parameter value was from a locally cached value.');
    }
    \n

    API

    \n

    RemoteConfig class

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigAndroid: com.google.firebase.remoteconfig.FirebaseRemoteConfig = firebase().remoteConfig().android;
    \n

    A read-only property that returns the naive object for Android wrapped by the instance of the RemoteConfig class.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigIos: FIRRemoteConfig = firebase().remoteConfig().ios;
    \n

    A read-only property that returns the naive object for iOS wrapped by the instance of the RemoteConfig class.

    \n
    \n

    app

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigApp: FirebaseApp = firebase().remoteConfig().app;
    \n

    A read-only property that returns the FirebaseApp instance for the current app.

    \n
    \n

    fetchTimeMillis

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigFetchTimeMillis: number = firebase().remoteConfig().fetchTimeMillis;
    \n

    A read-only property that returns the timestamp (milliseconds since epoch) of the last successful fetch, regardless of whether the fetch was activated or not.

    \n
    \n

    lastFetchStatus

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigLastFetchStatus: 'success' | 'failure' | 'no_fetch_yet' | 'throttled' = firebase().remoteConfig().lastFetchStatus;
    \n

    A read-only property that returns the status of the most recent fetch attempt.

    \n
    \n

    settings

    \n
    import { firebase } from '@nativescript/firebase-core';

    remoteConfigSettings: ConfigSettings = firebase().remoteConfig().settings;
    // or
    firebase().remoteConfig().settings = {
    \tfetchTimeMillis: 43200000,
    \tminimumFetchIntervalMillis: 30000,
    };
    \n

    Gets or sets the settings for this RemoteConfig instance.

    \n
    \n

    activate()

    \n
    import { firebase } from '@nativescript/firebase-core';

    activated: boolean = await firebase().remoteConfig().activate();
    \n

    Asynchronously activates the most recently fetched configs, so that the fetched key-value pairs take effect. For more information, see activate() on the Firebase website.

    \n
    \n

    ensureInitialized()

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().remoteConfig().ensureInitialized();
    \n
    \n

    fetch()

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().remoteConfig().fetch(expirationDurationSeconds);
    \n

    Fetches parameter values from the Remote Config backend, adhering to the default or specified minimum fetch interval. For more information, see fetch() on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    expirationDurationSecondsnumber
    \n
    \n

    fetchAndActivate()

    \n
    import { firebase } from '@nativescript/firebase-core';

    activated: boolean = await firebase().remoteConfig().fetchAndActivate();
    \n

    Asynchronously fetches and then activates the fetched configs. For more information, see fetchAndActivate() on the Firebase website.

    \n
    \n

    getAll()

    \n
    import { firebase } from '@nativescript/firebase-core';

    parameters: Record<string, ConfigValue> = firebase().remoteConfig().getAll();
    \n

    Returns an object with all the parameters in the Remote Config.

    \n
    \n

    getBoolean()

    \n
    import { firebase } from '@nativescript/firebase-core';

    value: boolean = firebase().remoteConfig().getBoolean(key);
    \n

    Returns the parameter value for the given key as a boolean.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    keystringThe key of the parameter to get.
    \n
    \n

    getNumber()

    \n
    import { firebase } from '@nativescript/firebase-core';

    value: number = firebase().remoteConfig().getNumber(key);
    \n

    Returns the parameter value for the given key as a number.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    keystringThe key of the parameter to get.
    \n
    \n

    getString()

    \n
    import { firebase } from '@nativescript/firebase-core';

    value: string = firebase().remoteConfig().getString(key);
    \n

    Returns the parameter value for the given key as a string.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    keystringThe key of the parameter to get.
    \n
    \n

    getValue()

    \n
    import { firebase } from '@nativescript/firebase-core';

    value: ConfigValue = firebase().remoteConfig().getValue(key);
    \n

    Returns the parameter value for the given key as a ConfigValue.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    keystringThe key of the parameter to get.
    \n
    \n

    reset()

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().remoteConfig().reset();
    \n

    Deletes all activated, fetched and default configurations and resets all Firebase Remote Config settings.

    \n
    \n

    setDefaults()

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().remoteConfig().setDefaults(defaults);
    \n

    Sets default configs from a ConfigDefaults object.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    defaultsConfigDefaultsThe default configs object to set.
    \n

    ConfigDefaults

    \n
    interface ConfigDefaults {
    \t[key: string]: number | string | boolean;
    }
    \n
    \n

    setDefaultsFromResource()

    \n
    import { firebase } from '@nativescript/firebase-core';

    await firebase().remoteConfig().setDefaultsFromResource(resourceName);
    \n

    Sets default configs using an XML resource.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    resourceNamestringThe resource name of the XML resource in the package's res folder.
    \n
    \n

    ConfigValue object

    \n

    This object is returned by the getValue() method and represents a parameter value for a given key. It provides several methods to get the value as a boolean, number or string.

    \n

    android

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    configValueAndroid: com.google.firebase.remoteconfig.FirebaseRemoteConfigValue = configValue.android;
    \n

    Returns an instance of ConfigValue for Android.

    \n
    \n

    ios

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    configValueIOS: FIRRemoteConfigValue = configValue.ios;
    \n

    Returns an instance of ConfigValue for iOS.

    \n
    \n

    asBoolean()

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    value: boolean = configValue.asBoolean();
    \n

    Gets the parameter value as a boolean.

    \n
    \n

    asNumber()

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    value: number = configValue.asNumber();
    \n

    Gets the parameter value as a number.

    \n
    \n

    asString()

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    value: string = configValue.asString();
    \n

    Gets the parameter value as a string.

    \n
    \n

    getSource()

    \n
    configValue: ConfigValue = firebase().remoteConfig().getValue(key)

    source: 'default' | 'static' | 'remote' = configValue.getSource();
    \n

    Gets the source of the parameter value.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":19,"lastWeek":129,"lastMonth":2144}},"@akylas/nativescript-audio":{"name":"@akylas/nativescript-audio","version":"6.3.2","license":"Apache-2.0","readme":"\n\n

    @akylas/nativescript-audio

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin to record and play audio.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @akylas/nativescript-audio

    \n

    \n

    Installation

    \n
    ns plugin add @akylas/nativescript-audio
    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Permissions

    \n

    iOS

    \n

    You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Android

    \n

    If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

    \n
        <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
    \n

    \n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        // You can pass a duration hint to control the behavior of other application that may
        // be holding audio focus.
        // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
        // Then when you play a song, the previous owner of the
        // audio focus will stop. When your song stops
        // the previous holder will resume.
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function () {
        console.log('finished playing');
      },
      errorCallback: function (errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function (args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log('something went wrong...', err);
      });
    \n

    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@akylas/nativescript-audio.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":2,"lastWeek":41,"lastMonth":285}},"@nativescript/firebase-app-check":{"name":"@nativescript/firebase-app-check","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-app-check

    \n
    npm install @nativescript/firebase-app-check
    \n
    \n

    Note: (iOS) App Check requires you set the minimum iOS Deployment version in ios/Podfile to 11.0 or greater.

    \n
    \n

    What does it do

    \n

    App Check works alongside other Firebase services to help protect your backend resources from abuse, such as billing fraud or phishing. With App Check, devices running your app will use an app or device attestation provider that attests to one or both of the following:

    \n

    Requests originate from your authentic app\nRequests originate from an authentic, untampered device\nThis attestation is attached to every request your app makes to your Firebase backend resources.

    \n

    \"image\"

    \n

    This App Check module has built-in support for using the following services as attestation providers:

    \n

    DeviceCheck on iOS\nSafetyNet on Android\nApp Check currently works with the following Firebase products:

    \n

    Realtime Database\nCloud Storage\nCloud Functions (callable functions)\nThe official Firebase App Check documentation has more information, including about the iOS AppAttest provider, and testing/ CI integration, it is worth a read.

    \n

    Usage

    \n

    Activate

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { AppCheck } from '@nativescript/firebase-app-check';

    AppCheck.setProviderFactory(); // call before the fb app is initialized 
    firebase.initializeApp()
    .then(app =>{
        firebase().appCheck().activate(true);
    })

    \n

    The only configuration possible is the token auto refresh. When you call activate, the provider stays the same but the token auto refresh setting will be changed based on the argument provided.

    \n

    You must call activate prior to calling any firebase back-end services for App Check to function.

    \n

    Custom Provider

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { AppCheck, AppCheckProviderFactory, AppCheckProvider } from '@nativescript/firebase-app-check';


    class AppCheckProviderFactoryImpl extends AppCheckProviderFactory {
    \tcreateProvider(app: FirebaseApp) {
            // we could potentiall do something with the app 
            return new AppCheckProviderImpl();
        }
    }


    class AppCheckProviderImpl extends AppCheckProvider {
        getToken(done){
            // do some call probably http
            // finally call done when you're ready passing in a token along with the expirationDate
            done({
                token: someToken,
                expirationDate: someDate 
            })
        }
    }



    AppCheck.setProviderFactory(new AppCheckProviderFactoryImpl()); // call before the fb app is initialized 
    firebase.initializeApp()
    .then(app =>{
        firebase().appCheck().activate(true);
    })

    \n

    Automatic Data Collection

    \n

    App Check has an "tokenAutoRefreshEnabled" setting. This may cause App Check to attempt a remote App Check token fetch prior to user consent. In certain scenarios, like those that exist in GDPR-compliant apps running for the first time, this may be unwanted.

    \n

    If unset, the "tokenAutoRefreshEnabled" setting will defer to the app's "automatic data collection" setting, which may be set in the Info.plist or AndroidManifest.xml

    \n

    Using App Check tokens for non-firebase services

    \n

    The official documentation shows how to use getToken to access the current App Check token and then verify it in external services.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":15,"lastMonth":1683}},"@nativescript/template-hello-world-ts":{"name":"@nativescript/template-hello-world-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript TypeScript Template

    \n

    This template creates a NativeScript app with the NativeScript hello world example,\nhowever, in this template the example is built with TypeScript.

    \n

    You can create a new app that uses this template with either the --template option.

    \n
    ns create my-hello-world-ts --template @nativescript/template-hello-world-ts
    \n

    Or the --tsc shorthand.

    \n
    ns create my-hello-world-ts --tsc
    \n
    \n

    Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-hello-world-ts --template nativescript-app-templates/packages/template-hello-world-ts
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":3,"lastWeek":31,"lastMonth":584}},"nativescript-toasty":{"name":"nativescript-toasty","version":"3.0.0-alpha.2","license":"MIT","readme":"

    NativeScript-Toasty

    \n

    \"npm\"\n\"npm\"

    \n

    Install

    \n

    tns plugin add nativescript-toasty

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from 'nativescript-toasty';
    import { isIOS } from 'tns-core-modules/platform';
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty({ text: 'Toast message' });
    toast.show();

    // you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
    new Toasty({ text: 'Some Message' })
      .setToastDuration(ToastDuration.LONG)
      .setToastPosition(ToastPosition.BOTTOM)
      .setTextColor(new Color('white'))
      .setBackgroundColor('#ff9999')
      .show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      position: ToastPosition.TOP,
      yAxisOffset: 100,
      xAxisOffset: 10,
      ios: {
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24
      },
      anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
    });

    toasty.duration = ToastDuration.SHORT;
    toasty.textColor = '#fff';
    toasty.backgroundColor = new Color('purple');
    toasty.show();
    \n

    JavaScript

    \n
    var toasty = require('nativescript-toasty').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n

      constructor(opts: ToastyOptions);

      position: ToastPosition;

      duration: ToastDuration;

      textColor: Color | string;

      backgroundColor: Color | string;

      yAxisOffset?: Length | number;

      xAxisOffset?: Length | number;

      readonly width: number;

      readonly height: number;


      /**
       * Show the Toasty
       */
      show();

      /**
       * Cancels the Toasty
       */
      cancel();

    /**
     * Sets the Toast position.
     */
      setToastPosition(value: ToastPosition): Toasty;

    /**
     * Sets the Toast duration.
     */
      setToastDuration(value: ToastDuration): Toasty;

    /**
      * Set the text color of the toast.
      * @param value [Color | string] - Color of the string message.
      */
      setTextColor(value: Color | string): Toasty;

    /**
      * Set the background color of the toast.
      * @param value [Color |  string] - Color of the background.
      * On Android this currently removes the default Toast rounded borders.
      */
      setBackgroundColor(value: Color | string): Toasty;
    \n
    export enum ToastDuration {
      'SHORT',
      'LONG'
    }

    export enum ToastPosition {
      'BOTTOM',
      'BOTTOM_LEFT',
      'BOTTOM_RIGHT',
      'CENTER',
      'CENTER_LEFT',
      'CENTER_RIGHT',
      'TOP',
      'TOP_LEFT',
      'TOP_RIGHT'
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Position of the Toast.
       */
      position?: ToastPosition;

      /**
       * Text color of the Toast message.
       */
      textColor?: Color | string;

      /**
       * Background Color of the Toast.
       */
      backgroundColor?: Color | string;

      /**
       * Android specific configuration options.
       */
      android?: any;

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":27,"lastWeek":139,"lastMonth":553}},"@nativescript/template-blank-vue":{"name":"@nativescript/template-blank-vue","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Vue Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-vue --template @nativescript/template-blank-vue
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-vue --template nativescript-app-templates/packages/template-blank-vue
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a single blank component located in:

    \n
      \n
    • /app/components/Home.vue - sets up an empty page layout.
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":4,"lastWeek":32,"lastMonth":591}},"@nativescript/twitter":{"name":"@nativescript/twitter","version":"1.0.1","license":"Apache-2.0","readme":"

    @nativescript/twitter

    \n

    A plugin that allows you to authenticate a user with their Twitter account.

    \n\n

    Contents

    \n\n

    Installation

    \n
    npm install @nativescript/twitter
    \n

    Prerequisites

    \n
      \n
    • \n

      Go to Twitter Apps and create your app to obtain the API key and secret.

      \n
      • \n
    • \n

      Set a Callback Url with the Twitter.callback property. Whatever will work.\nFor iOS, add the following code to the App_Resources/ios/Info.plist file, and replace the yourscheme text with your URL.

      \n
      • \n
    \n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>yourscheme></string>
        </array>
      </dict>
    </array>
    \n
      \n
    • Request for the user's permission for your app to retrieve their email. By default, Twitter won't allow you to grab a user's email.
      • \n
    \n

    Here is what callbacks would look like:

    \n

    \"callback

    \n

    Usage

    \n

    Initializing Twitter Sign-in

    \n

    To set up Twitter Sign in, call the Twitter class's init() method passing it the consumer key and the consumer secret.

    \n
    import { Twitter, TwitterSignIn } from '@nativescript/twitter';

    Twitter.callback = 'yourscheme://';

    Twitter.init(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET);
    \n

    Sign in a user

    \n

    To sign a user in, call the logIn() method on the TwitterSignIn class.

    \n
    TwitterSignIn.logIn()
    \t.then((session) => {
    \t\t// session.authToken
    \t\t// session.authTokenSecret
    \t})
    \t.catch((e) => {});
    \n

    API

    \n

    Twitter

    \n

    callback

    \n
    Twitter.callback = \"the callback url\"
    \n

    The callback URL

    \n
    \n

    init()

    \n
    Twitter.init(consumerKey, consumerSecret)
    \n

    Initializes the Twitter authentification with the specified key and secret.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterType
    consumerKeystring
    consumerSecretstring
    \n
    \n

    TwitterSignIn

    \n

    logIn()

    \n
    TwitterSignIn.logIn().then((session: Session) =>{

    }).catch((err) =>{

    })
    \n

    Session

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    authTokenstringreadonly
    authTokenSecretstringreadonly
    userNamestringreadonly
    userIdstringreadonly
    iosanyreadonly
    androidanyreadonly
    \n
    \n

    getCurrentUser()

    \n
    TwitterSignIn.getCurrentUser().then((user: TwitterUser) =>{

    }).catch((err) =>{

    })
    \n
    \n

    TwitterUser

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    formattedScreenNamestringreadonly
    isProtectedbooleanreadonly
    isVerifiedbooleanreadonly
    namestringreadonly
    profileImageUrlstringreadonly
    profileUrlstringreadonly
    screenNamestringreadonly
    userIdstringreadonly
    \n
    \n

    logOut()

    \n
    TwitterSignIn.logIn()
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":160}},"@nativescript/firebase-in-app-messaging":{"name":"@nativescript/firebase-in-app-messaging","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-in-app-messaging

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use the Firebase In-App Messaging SDK in your NativeScript app.

    \n

    \"image\"

    \n

    Set up your app for Firebase

    \n

    You need to set up your app for Firebase before you can use the Firebase in-app messaging. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Add the Firebase In-App Messaging SDK to your app

    \n

    To add the Firebase In-App Messaging SDK to your app follow these steps:

    \n
      \n
    1. Install the @nativescript/firebase-in-app-messaging plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-in-app-messaging
    \n
      \n
    1. Add the SDK by importing the @nativescript/firebase-in-app-messaging module in your app's main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-in-app-messaging';
    \n

    Firebase In-App Messaging limitations

    \n

    According to a github issue https://github.com/firebase/firebase-ios-sdk/issues/4768, Firebase In-App Messaging allows only 1 campaign per day on app foreground or app launch. This limit is to prevent you from accidentally overwhelming your users with non-contextually appropriate messages. However, if you use contextual triggers (for example Analytics events or programmatically triggered in-app-messaging campaigns), there is no daily rate limit.

    \n

    Create message campaigns

    \n

    To create a message campaign, go to the In-App Messaging page in the Firebase Console and follow the instructions there. You can create campaigns and customize elements such as Image, Banner, Modal & Cards to appear on predefined events (e.g. purchase).

    \n

    Any published campaigns from the Firebase Console are automatically handled and displayed on your user's device.

    \n

    Control messages display

    \n

    To control whether to display messages or not, set the isMessagesDisplaySuppressed property of the InAppMessaging instance to true or false. The InAppMessaging instance is returneb calling the inAppMessaging() on the FirebaseApp instance. By default, isMessagesDisplaySuppressed is set to false which means messages will be displayed.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-in-app-messaging';

    async function bootstrap() {
      firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
    }

    async function onSetup(user) {
      await setupUser(user);
      // Allow user to receive messages now setup is complete
      firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
    }
    \n
    \n

    Note: The suppressed state is not persisted between restarts, so ensure it is called as early as possible ideally in the app bootstrapping file(app.ts or main.ts).

    \n
    \n

    Trigger contextual messages

    \n

    To trigger contextual messages, call the triggerEvent() method of the InAppMessaging instance with the event name as a parameter. This triggers the display of any messages that are configured on the Firebase Console.

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase().inAppMessaging().triggerEvent('purchase');
    \n

    API

    \n

    InAppMessaging class

    \n

    app

    \n
    inAppMessagingApp = firebase().inAppMessaging().app;
    \n

    The app property returns the FirebaseApp instance that the current InAppMessaging instance is associated with.

    \n
    \n

    isAutomaticDataCollectionEnabled

    \n
    firebase().inAppMessaging().isAutomaticDataCollectionEnabled = true;
    \n

    For the description of this property, see isAutomaticDataCollectionEnabled on the Firebase documentation.

    \n
    \n

    isMessagesDisplaySuppressed

    \n
    firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
    // or
    firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
    \n

    For the description of this property, see areMessagesSuppressed on the Firebase documentation.

    \n
    \n

    triggerEvent()

    \n
    firebase().inAppMessaging().triggerEvent(eventId);
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventIdstringThe name of the event to trigger.
    \n

    For the description of this method, see triggerEvent on the Firebase documentation.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":11,"lastWeek":61,"lastMonth":1654}},"@nativescript/template-blank-ts":{"name":"@nativescript/template-blank-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-ts --template @nativescript/template-blank-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-ts --template nativescript-app-templates/packages/template-blank-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module:

    \n
      \n
    • /app/app-root - sets up a Frame that lets you navigate between pages.
      • \n
    \n

    There is a single blank page module that sets up an empty layout:

    \n
      \n
    • /app/home/home-page
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":481}},"@nativescript-community/document-scanner":{"name":"@nativescript-community/document-scanner","version":"0.0.1","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/document-scanner

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript plugin to scan documents
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/document-scanner

    \n

    \n

    Usage

    \n

    To use that plugin you need camera permission.\nDont forget to ask for it at runtime using something like

    \n
        import { request } from '@nativescript-community/perms';
        await request('camera');
    \n

    After that:

    \n
        const documentScanner = new DocumentScanner();
        try {
            const result: string[] | any[] /* UIImage[] on iOS */ = await documentScanner.startScan();
            console.log('scan result', result);
        } catch (error) {
            console.error(error);
        }
    \n

    You can see the options in the typings.

    \n

    iOS

    \n

    On ios the result is an array of UIImage

    \n

    \n

    Demos

    \n

    This repository includes Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/document-scanner
    $ cd document-scanner
    $ npm run i
    $ npm run setup
    $ npm run build
    $ cd demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":2,"lastWeek":4,"lastMonth":37}},"nativescript-stripe":{"name":"nativescript-stripe","version":"6.6.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    Requires I0S 9.x +

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-stripe
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-stripe@3.3.0
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-stripe@1.0.1
      • \n
    \n

    Configure

    \n\n

    Android

    \n

    Stripe Android v10.2.1 SDK is being used

    \n

    iOS

    \n

    Stripe iOS 19.0.1 SDK (pod) is being used

    \n

    Angular

    \n

    To use the Custom Integration's CreditCardView in Angular,\nregister the Angular wrapper in the main module (typically app.module.ts), as follows:

    \n
    ...
    import { CreditCardViewModule } from \"nativescript-stripe/angular\";
    ...
    @NgModule({
      imports: [
        ...
        CreditCardViewModule,
        ...
      ],
      ...
    })
    export class AppModule { }
    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:stripe="nativescript-stripe" on the Page tag

    \n

    Using from view

    \n
    <stripe:CreditCardView id=\"card\"/>
    \n

    Add extra details to card

    \n

    JavaScript

    \n
    const ccView = page.getViewById(\"card\");
    const cc = ccView.card;
    cc.name = \"Osei Fortune\";
    \n

    TypeScript

    \n
    import { CreditCardView, Card } from 'nativescript-stripe';
    const ccView:CreditCardView = page.getViewById(\"card\");
    const cc:Card = ccView.card;
    cc.name = \"Osei Fortune\";
    \n

    Using from code

    \n
    import { Card } from 'nativescript-stripe';
    const cc = new Card(\"1111111111111111\",2,18,\"123\");
    cc.name = \"Osei Fortune\";
    \n

    Standard Integration

    \n

    The demo and demo-angular folders contain demos that use the Standard Integration.\nThey can be used as a starting point, and provide information on how to invoke the\nStandard Integration components. For more information, see the README in the\ndemo folders.

    \n

    Set Stripe configuration values:

    \n
    StripeConfig.shared().backendAPI = <Your API Service>;
    StripeConfig.shared().publishableKey = <Your Stripe Key>;
    StripeConfig.shared().companyName = <Your Company Name>;
    // To support Apple Pay, set appleMerchantID.
    StripeConfig.shared().appleMerchantID = <Your Apple Merchant ID>;
    \n

    Create a Customer Session

    \n
    let customerSession = new StripeCustomerSession();
    \n

    Create a Payment Session

    \n
    let paymentSession = new StripePaymentSession(page, customerSession, price, \"usd\", listener);
    \n

    See Stripe Docs for more information.

    \n

    Strong Customer Authentication

    \n

    PSD2 regulations in Europe will require Strong Customer Authentication\nfor some credit card purchases. Stripe supports this, though most of the work to make it happen is\nrequired on the backend server and in the mobile app, outside the nativescript-stripe plugin.

    \n

    To support SCA, follow the instructions for iOS\nand Android on using PaymentIntents instead\nof tokens when interacting with your backend server. The nativescript-stripe plugin has\ncross-platform data structures and method calls that might be helpful. In index.d.ts see:

    \n
      \n
    • PaymentMethod and related classes
      • \n
    • StripePaymentIntent and related classes
      • \n
    • Methods Stripe.createPaymentMethod, Stripe.retrievePaymentIntent, Stripe.confirmPaymentIntent and Stripe.confirmSetupIntent
      • \n
    \n

    Handling secondary customer input

    \n

    SCA requires the customer to enter additional information with some charge cards. Stripe takes care of this\nif you properly handle the redirect from the StripePaymentIntent returned from the server.

    \n

    If you're using the automatic confirmation flow, confirmPaymentIntent and confirmSetupIntent will automatically manage the SCA validation by showing and validating the payment authentification.

    \n

    If you're using the manual confirmation flow, where back-end creates the PaymentIntent|SetupIntent and requires an Intent authentification from the customer, authenticatePaymentIntent and authenticateSetupIntent will allow to manage that extra step before sending back the Intent to your server.

    \n

    Status

    \n

    demo-angular now supports SetupIntent and PaymentIntent SCA integration. Any credit card verification will be automatically prompted to the user.

    \n

    Known Issues

    \n

    const enum not found

    \n

    When building with NativeScript v6, it builds using the webpack-only flow in "transpileOnly" mode. A webpack issue means that const enum values cannot be found in the final output.

    \n

    This problem is not present in Angular projects and likely won't be an issue if you do not use any of the exported enums.

    \n

    Unfortunately, the only fix I've found for this is to follow the advice in that issue and modify webpack.config.js in your app to set transpileOnly to false.

    \n

    Note: This may no longer be needed once this TypeScript bug is fixed.

    \n

    TODO

    \n
      \n
    • Android Pay
      • \n
    • Apple Pay (supported by Standard Integration, not by Custom Integration)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":148}},"nativescript-drawingpad":{"name":"nativescript-drawingpad","version":"3.1.0","license":"Apache-2.0","readme":"\n

    NativeScript DrawingPad

    \n    \n
    \nNativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.
    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"build\n \n \n \"stars\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    NativeScript

    \n

    tns plugin add nativescript-drawingpad

    \n

    Samples

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Sample1\"\"Sample2\"
    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    gcacace/android-signaturepadSignatureView
    \n

    Video Tutorial

    \n

    Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

    \n

    Written Tutorial

    \n

    Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

    \n

    Usage

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:DrawingPad=\"nativescript-drawingpad\" loaded=\"pageLoaded\">
        <ActionBar title=\"NativeScript-DrawingPad\" />
        <ScrollView>
            <StackLayout>

                <DrawingPad:DrawingPad
                height=\"400\"
                id=\"drawingPad\"
                penColor=\"{{ penColor }}\" penWidth=\"{{ penWidth }}\" />

            </StackLayout>
        </ScrollView>
    </Page>
    \n

    TS:

    \n
    import { topmost } from 'ui/frame';
    import { DrawingPad } from 'nativescript-drawingpad';

    // To get the drawing...

      public getMyDrawing() {
          const drawingPad = topmost().getViewById('myDrawingPad');
          drawingPad.getDrawing().then((res) => {
              console.log(res);
           });
        }


    // If you want to clear the signature/drawing...
    public clearMyDrawing() {
        const drawingPad = topmost().getViewById('myDrawingPad');
        drawingPad.clearDrawing();
    }
    \n

    Angular:

    \n
    import { Component, ElementRef, ViewChild } from '@angular/core';
    import { registerElement } from 'nativescript-angular/element-registry';

    registerElement(
      'DrawingPad',
      () => require('nativescript-drawingpad').DrawingPad
    );

    @Component({
      selector: 'drawing-pad-example',
      template: `
        <ScrollView>
            <StackLayout>
                <DrawingPad #DrawingPad 
                height=\"400\" 
                id=\"drawingPad\" 
                penColor=\"#ff4081\" penWidth=\"3\">
                </DrawingPad>

                <StackLayout orientation=\"horizontal\">
                    <Button text=\"Get Drawing\" (tap)=\"getMyDrawing()\"></Button>
                    <Button text=\"Clear Drawing\" (tap)=\"clearMyDrawing()\"></Button>
                </StackLayout>
            </StackLayout>
        </ScrollView>
            `
    })
    export class DrawingPadExample {
      @ViewChild('DrawingPad') DrawingPad: ElementRef;

      getMyDrawing(args) {
        // get reference to the drawing pad
        const pad = this.DrawingPad.nativeElement;

        // then get the drawing (Bitmap on Android) of the drawingpad
        let drawingImage;
        pad.getDrawing().then(
          data => {
            console.log(data);
            drawingImage = data;
          },
          err => {
            console.log(err);
          }
        );
      }

      clearMyDrawing(args) {
        const pad = this.DrawingPad.nativeElement;
        pad.clearDrawing();
      }
    }
    \n

    Properties

    \n

    penColor - (Color) - optional\nProperty to specify the pen (stroke) color to use.

    \n

    penWidth - (int) - optional\nProperty to specify the pen (stroke) width to use.

    \n

    clearOnLongPress - (boolean = true) - optional iOS Only\nGets/sets whether a long press will clear the view.

    \n

    Methods

    \n

    getDrawing() - Promise (returns image if successful)

    \n

    clearDrawing() - clears the drawing from the DrawingPad view.

    \n

    getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)

    \n

    Android Only

    \n
      \n
    • getTransparentDrawing() - Promise (returns a bitmap with a transparent background)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":23,"lastMonth":137}},"@open-native/core":{"name":"@open-native/core","version":"1.0.0-alpha.38","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":21,"lastWeek":630,"lastMonth":3554}},"@nativescript-community/ui-cameraview":{"name":"@nativescript-community/ui-cameraview","version":"0.0.4","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-cameraview

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A CameraView allowing custom live processing for NativeScript
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-cameraview

    \n

    Usage

    \n

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-cameraview" on the Page element

    \n

    XML

    \n
    <Page xmlns:bc=\"@nativescript-community/ui-cameraview\">
        <StackLayout horizontalAlignment=\"center\">
            <bc:CameraView width=\"100\" height=\"100\"/>
       </StackLayout>
    </Page>
    \n

    \n

    NativeScript + Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { CameraView } from '@nativescript-community/ui-cameraview';
    registerElement('CameraView', () => CameraView);
    \n
    <CameraView width=\"100\" height=\"100\"></CameraView>
    \n

    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    (<any>Vue).registerElement('CameraView', () => require('@nativescript-community/ui-cameraview').CameraView);
    \n
    <CameraView  width=\"100\" height=\"100\"/>
    \n

    \n

    Demos

    \n

    This repository includes Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-cameraview
    $ cd ui-cameraview
    $ npm run i
    $ npm run setup
    $ npm run build
    $ cd demo-svelte
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":97}},"nativescript-apiclient":{"name":"nativescript-apiclient","version":"3.0.0","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-apiclient/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript API Client

    \n

    A NativeScript module for simply calling HTTP based APIs.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-apiclient
    \n

    inside your app project to install the module.

    \n

    Demo

    \n

    For quick start have a look at the plugin/index.ts or use the "IntelliSense" of your IDE to learn how it works.

    \n

    Otherwise...

    \n

    Usage

    \n

    Import

    \n
    import ApiClient = require(\"nativescript-apiclient\");
    \n

    Example

    \n
    import ApiClient = require(\"nativescript-apiclient\");
    import HTTP = require(\"http\");

    interface IUser {
        displayName?: string;
        id?: number;
        name?: string;
    }

    var client = ApiClient.newClient({
        baseUrl: \"https://api.example.com/users\",
        route: \"{id}\",  
    });

    client.beforeSend(function(opts: HTTP.HttpRequestOptions, tag: any) {
                          console.log(\"Loading user: \" + tag);
                          
                          // prepare the request here
                      })
          .clientError(function(result: ApiClient.IApiClientResult) {
                           // handle all responses with status code 400 to 499
                       })
          .serverError(function(result: ApiClient.IApiClientResult) {
                           // handle all responses with status code 500 to 599
                       })
          .success(function(result: ApiClient.IApiClientResult) {
                        // handle all responses with that were NOT
                        // handled by 'clientError()' and 'serverError()'
                        // 
                        // especially with status code less than 400 and greater than 599
                        
                        var user = result.getJSON<IUser>();
                   })
          .error(function(err: ApiClient.IApiClientError) {
                     // handle API client errors
                 })
          .completed(function(ctx: ApiClient.IApiClientCompleteContext) {
                         // invoked after \"result\" and \"error\" actions
                     });

    var credentials = new ApiClient.BasicAuth(\"Marcel\", \"p@ssword!\");

    for (var userId = 1; userId <= 100; userId++) {
        // start a GET request
        // 
        // [GET]  https://api.example.com/users/{id}?ver=1.6.6.6
        client.get({
            authorizer: credentials,
        
            // request headers
            headers: {
                'X-MyHeader-TM': '5979',
                'X-MyHeader-MK': '23979'
            },
            
            // URL parameters
            params: {
                ver: '1.6.6.6'
            },
        
            // route parameters
            routeParams: {
                id: userId.toString()  // {id}
            },
            
            // global value for all callbacks 
            tag: userId
        });
    }
    \n

    Routes

    \n

    Routes are suffixes for a base URL.

    \n

    You can define one or parameters inside that route, which are replaced when you start a request.

    \n

    If you create a client like this

    \n
    var client = ApiClient.newClient({
        baseUrl: \"https://api.example.com/users\",
        route: \"{id}/{resource}\",  
    });
    \n

    and start a request like this

    \n
    client.get({
        routeParams: {
            id: \"5979\",  // {id}
            resource: \"profile\"  // {resource}
        }
    });
    \n

    the client will call the URL

    \n
    [GET]  https://api.example.com/users/5979/profile
    \n

    Parameter values can also be functions, what means that the value that is returned by that functions is used as value:

    \n
    var getUserId = function() : string {
        // load the user ID from somewhere
    };

    client.get({
        routeParams: {
            id: getUserId,  // {id}
            resource: \"profile\"  // {resource}
        }
    });
    \n

    A function must have the following structure:

    \n
    function (paramName: string, routeParams: any, match: string, formatExpr: string, funcDepth: string) : any {
        return <THE-VALUE-TO-USE>;
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    paramNameThe name of the parameter. For {id} this will be id
    routeParamsThe list of submitted route parameters with their values. IMPORTANT: Keep sure to return strings as values! Otherwise you might have problems to convert the values to an URL part.
    matchThe complete (unhandled) expression of the argument.
    formatExprThe optional format expression of the argument. For {id:number} this will be number.
    funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
    \n

    Formatting values

    \n

    Followed by a : char a route parameter definition can additionally contain a "format expression".

    \n

    These expressions can help you to parse and format parameter values.

    \n

    The first step to do this is to define a so called "format provider" callback in a client:

    \n
    client.addFormatProvider((ctx : ApiClient.IFormatProvider) => {
        var toStringSafe = function() : string { 
            return ctx.value ? ctx.value.toString() : \"\";
        };

        if (ctx.expression === \"upper\") {    
            ctx.handled = true;
            return toStringSafe().toUpperCase();  // the new value
        }
        else if (ctx.expression === \"number\") {
            var n = parseInt(toStringSafe().trim())    ;
            if (isNaN(n)) {
                throw \"'\" + ctx.value + \"' is NOT a number!\";
            }
            
            ctx.handled = true;
            return n.toString();
        }
    });
    \n

    Here we defined the two expressions upper (convert to upper case chars) and number (keep sure to have a valid number).

    \n

    To use them you can define a route like this:

    \n
    {id:number}/{resource:upper}
    \n

    Now if you setup your client

    \n
    var client = ApiClient.newClient({
        baseUrl: \"https://api.example.com/users\",
        route: \"{id:number}/{resource:upper}\",  
    });
    \n

    and start a request like this

    \n
    client.get({
        routeParams: {
            id: \"5979\",
            resource: \"profile\"
        }
    });
    \n

    the client will call the URL

    \n
    [GET]  https://api.example.com/users/5979/PROFILE
    \n

    The ctx object in the format provider call of addFormatProvider() has the following structure:

    \n
    interface IFormatProviderContext {
        /**
         * Gets the format expression.
         */
        expression: string;
        
        /**
         * Gets if the expression has been handled or not.
         */
        handled: boolean;
        
        /**
         * Gets the underlying (unhandled) value.
         */
        value: any;
    }
    \n

    Authorization

    \n

    You can submit an optional IAuthorizer object when you start a request:

    \n
    interface IAuthorizer {
        /**
         * Prepares a HTTP request for authorization.
         * 
         * @param {HTTP.HttpRequestOptions} reqOpts The request options.
         */
        prepare(reqOpts: HTTP.HttpRequestOptions);
    }
    \n

    The plugin provides the following implementations:

    \n

    AggregateAuthorizer

    \n
    var authorizer = new ApiClient.AggregateAuthorizer();
    authorizer.addAuthorizers(new ApiClient.BasicAuth(\"Username\", \"Password\"),
                              new ApiClient.BearerAuth(\"MySecretToken\"));
    \n

    BasicAuth

    \n
    var authorizer = new ApiClient.BasicAuth(\"Username\", \"Password\");
    \n

    BearerAuth

    \n
    var authorizer = new ApiClient.BearerAuth(\"MySecretToken\");
    \n

    OAuth

    \n
    var authorizer = new ApiClient.OAuth(\"MySecretToken\");
    authorizer.setField('oauth_field1', 'field1_value');
    authorizer.setField('oauth_field2', 'field2_value');
    \n

    TwitterOAuth

    \n
    var authorizer = new ApiClient.TwitterOAuth(\"<CONSUMER_KEY>\", \"<CONSUMER_SECRET>\",
                                                \"<TOKEN>\", \"<TOKEN_SECRET>\");
    \n

    Requests

    \n

    GET

    \n
    // ?TM=5979&MK=23979
    client.get({
        params: {
            TM: '5979',
            MK: '23979'
        }
    });
    \n

    POST

    \n
    client.post({
        content: {
            id: 5979,
            name: \"Tanja\"
        },
        
        type: ApiClient.HttpRequestType.JSON
    });
    \n

    PUT

    \n
    client.put({
        content: '<user><id>23979</id><name>Marcel</name></user>',
        
        type: ApiClient.HttpRequestType.XML
    });
    \n

    PATCH

    \n
    client.patch({
        content: '<user id=\"241279\"><name>Julia</name></user>',
        
        type: ApiClient.HttpRequestType.XML
    });
    \n

    DELETE

    \n
    client.delete({
        content: {
            id: 221286
        },
        
        type: ApiClient.HttpRequestType.JSON
    });
    \n

    Custom

    \n
    client.request(\"FOO\", {
        content: {
            TM: 5979,
            MK: 23979
        },
        
        type: ApiClient.HttpRequestType.JSON
    });
    \n

    Logging

    \n

    If you want to log inside your result / error callbacks, you must define one or more logger actions in a client:

    \n
    var client = ApiClient.newClient({
        baseUrl: \"https://example.com/users\",
        route: \"{id}\",  
    });

    client.addLogger(function(msg : ApiClient.ILogMessage) {
        console.log(\"[\" + ApiClient.LogSource[msg.source] + \"]: \" + msg.message);
    });
    \n

    Each action receives an object of the following type:

    \n
    interface ILogMessage {
        /**
         * Gets the category.
         */
        category: LogCategory;
        
        /**
         * Gets the message value.
         */
        message: any;
        
        /**
         * Gets the priority.
         */
        priority: LogPriority;
        
        /**
         * Gets the source.
         */
        source: LogSource;
        
        /**
         * Gets the tag.
         */
        tag: string;
        
        /**
         * Gets the timestamp.
         */
        time: Date;
    }
    \n

    Now you can starts logging in your callbacks:

    \n
    client.clientError(function(result : ApiClient.IApiClientResult) {
                           result.warn(\"Client error: \" + result.code);
                       })
          .serverError(function(result : ApiClient.IApiClientResult) {
                           result.err(\"Server error: \" + result.code);
                       })
          .success(function(result : ApiClient.IApiClientResult) {
                        result.info(\"Success: \" + result.code);
                   })
          .error(function(err : ApiClient.IApiClientError) {
                     result.crit(\"API CLIENT ERROR!: \" + err.error);
                 })
          .completed(function(ctx : ApiClient.IApiClientCompleteContext) {
                         result.dbg(\"Completed action invoked.\");
                     });
    \n

    The IApiClientResult, IApiClientError and IApiClientCompleteContext objects using the ILogger interface:

    \n
    interface ILogger {
        /**
         * Logs an alert message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        alert(msg : any, tag?: string,
              priority?: LogPriority) : ILogger;
        
        /**
         * Logs a critical message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        crit(msg : any, tag?: string,
             priority?: LogPriority) : ILogger;
        
        /**
         * Logs a debug message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        dbg(msg : any, tag?: string,
            priority?: LogPriority) : ILogger;
        
        /**
         * Logs an emergency message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        emerg(msg : any, tag?: string,
              priority?: LogPriority) : ILogger;
        
        /**
         * Logs an error message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        err(msg : any, tag?: string,
            priority?: LogPriority) : ILogger;
        
        /**
         * Logs an info message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        info(msg : any, tag?: string,
             priority?: LogPriority) : ILogger;
        
        /**
         * Logs a message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogCategory} [category] The optional log category. Default: LogCategory.Debug
         * @param {LogPriority} [priority] The optional log priority.
         */
        log(msg : any, tag?: string,
            category?: LogCategory, priority?: LogPriority) : ILogger;
        
        /**
         * Logs a notice message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        note(msg : any, tag?: string,
             priority?: LogPriority) : ILogger;
         
        /**
         * Logs a trace message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        trace(msg : any, tag?: string,
              priority?: LogPriority) : ILogger;
            
        /**
         * Logs a warning message.
         * 
         * @param any msg The message value.
         * @param {String} [tag] The optional tag value.
         * @param {LogPriority} [priority] The optional log priority.
         */
        warn(msg : any, tag?: string,
             priority?: LogPriority) : ILogger;
    }
    \n

    URL parameters

    \n

    You can befine additional parameters for the URL.

    \n

    If you create a client like this

    \n
    var client = ApiClient.newClient({
        baseUrl: \"https://api.example.com/users\"
    });
    \n

    and start a request like this

    \n
    client.get({
        params: {
            id: '23979',
            resource: \"profile\"
        }
    });
    \n

    The client will call the URL

    \n
    [GET]  https://api.example.com/users?id=23979&resource=profile
    \n

    Like route parameters you can also use functions for defining URL parameters:

    \n
    var getUserId = function() : string {
        // load the user ID from somewhere
    };

    client.get({
        params: {
            id: getUserId,  // {id}
            resource: \"profile\"  // {resource}
        }
    });
    \n

    A function must have the following structure:

    \n
    function (paramName: string, index: number, funcDepth: string) : any {
        return <THE-VALUE-TO-USE>;
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    paramNameThe name of the parameter. For {id} this will be id
    indexThe zero based index of the handled URL parameter.
    funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
    \n

    IMPORTANT: It is also recommended to use / return strings a parameter values to prevent problems when converting the values to an URL string.

    \n

    Responses

    \n

    Callbacks

    \n

    Simple

    \n
    client.success(function(result : ApiClient.IApiClientResult) {
                        // handle any response
                   });
    \n

    The result object has the following structure:

    \n
    interface IApiClientResult extends ILogger {
        /**
         * Gets the underlying API client.
         */
        client: IApiClient;

        /**
         * Gets the HTTP response code.
         */
        code: number;
        
        /**
         * Gets the raw content.
         */
        content: any;
        
        /**
         * Gets the underlying (execution) context.
         */
        context: ApiClientResultContext;
        
        /**
         * Gets the response headers.
         */
        headers: HTTP.Headers;
        
        /**
         * Returns the content as wrapped AJAX result object.
         * 
         * @return {IAjaxResult<TData>} The ajax result object.
         */
        getAjaxResult<TData>() : IAjaxResult<TData>;
        
        /**
         * Returns the content as file.
         * 
         * @param {String} [destFile] The custom path of the destination file.
         * 
         * @return {FileSystem.File} The file.
         */
        getFile(destFile?: string) : FileSystem.File;
        
        /**
         * Tries result the content as image source.
         */
        getImage(): Promise<Image.ImageSource>;
        
        /**
         * Returns the content as JSON object.
         */
        getJSON<T>() : T;
        
        /**
         * Returns the content as string.
         */
        getString() : string;
        
        /**
         * Gets the information about the request.
         */
        request: IHttpRequest;
        
        /**
         * Gets the raw response.
         */
        response: HTTP.HttpResponse;
    }
    \n

    Errors

    \n
    client.error(function(err : ApiClient.IApiClientError) {
                     // handle an HTTP client error here
                 });
    \n

    The err object has the following structure:

    \n
    interface IApiClientError extends ILogger {
        /**
         * Gets the underlying client.
         */
        client: IApiClient;
        
        /**
         * Gets the context.
         */
        context: ApiClientErrorContext;
        
        /**
         * Gets the error data.
         */
        error: any;
        
        /**
         * Gets or sets if error has been handled or not.
         */
        handled: boolean;
        
        /**
         * Gets the information about the request.
         */
        request: IHttpRequest;
    }
    \n

    Conditional callbacks

    \n

    You can define callbacks for any kind of conditions.

    \n

    A generic way to do this is to use the if() method:

    \n
    client.if(function(result : IApiClientResult) : boolean {
                  // invoke if 'X-My-Custom-Header' is defined
                  return undefined !== result.headers[\"X-My-Custom-Header\"];
              },
              function(result : IApiClientResult) {
                  // handle the response
              });
    \n

    If no condition matches, the callback defined by success() method is used.

    \n

    For specific status codes you can use the ifStatus() method:

    \n
    client.ifStatus((statusCode) => statusCode === 500,
                    function(result : IApiClientResult) {
                        // handle the internal server error
                    });
    \n

    Or shorter:

    \n
    client.status(500,
                  function(result : IApiClientResult) {
                      // handle the internal server error
                  });
    \n
    Short hand callbacks
    \n
    client.clientError(function(result : ApiClient.IApiClientResult) {
                           // handle status codes between 400 and 499
                       });
                       
    client.ok(function(result : ApiClient.IApiClientResult) {
                           // handle status codes with 200, 204 or 205
                       });
                       
    client.serverError(function(result : ApiClient.IApiClientResult) {
                           // handle status codes between 500 and 599
                       });
    \n

    The following methods are also supported:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    badGatewayHandles a request with status code 502.
    badRequestHandles a request with status code 400.
    clientOrServerErrorHandles a request with a status code between 400 and 599.
    conflictHandles a request with status code 409.
    forbiddenHandles a request with status code 403.
    gatewayTimeoutHandles a request with status code 504.
    goneHandles a request with status code 410.
    informationalHandles a request with a status code between 100 and 199.
    insufficientStorageHandles a request with status code 507.
    internalServerErrorHandles a request with status code 500.
    lockedHandles a request with status code 423.
    methodNotAllowedHandles a request with status code 405.
    notFoundHandles a request with status code 404.
    notImplementedHandles a request with status code 501.
    partialContentHandles a request with status code 206.
    payloadTooLargeHandles a request with status code 413.
    redirectionHandles a request with a status code between 300 and 399.
    serviceUnavailableHandles a request with status code 503.
    succeededRequestHandles a request with a status code between 200 and 299.
    tooManyRequestsHandles a request with status code 429.
    unauthorizedHandles a request with status code 401.
    unsupportedMediaTypeHandles a request with status code 415.
    uriTooLongHandles a request with status code 414.
    \n","downloadStats":{"lastDay":0,"lastWeek":46,"lastMonth":141}},"@nativescript/template-blank-vue-ts":{"name":"@nativescript/template-blank-vue-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Vue Blank Typescript Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-blank-vue-ts --template @nativescript/template-blank-vue-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-blank-vue-ts --template nativescript-app-templates/packages/template-blank-vue-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a single blank component located in:

    \n
      \n
    • /app/components/Home.vue - sets up an empty page layout.
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":2,"lastWeek":26,"lastMonth":428}},"nativescript-star-printer":{"name":"nativescript-star-printer","version":"4.2.1","license":"MIT","readme":"

    NativeScript Star Printer

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n\n

    That's the demo app in action, printing on a Star Micronics TSP650II

    \n

    Installation

    \n
    \n

    For NativeScript 7+, please use plugin version 4+

    \n
    \n
    tns plugin add nativescript-star-printer
    \n

    API

    \n

    requiring / importing the plugin

    \n

    All examples below assume you're using TypeScript, but here's how to require the plugin with plain old JS as well:

    \n

    JavaScript

    \n
    var StarPrinterPlugin = require(\"nativescript-star-printer\");
    var starPrinter = new StarPrinterPlugin.StarPrinter();
    \n

    TypeScript

    \n
    import { StarPrinter, SPPrinter, SPCommands } from \"nativescript-star-printer\";

    export Class MyPrintingClass {
      private starPrinter: StarPrinter;
      
      constructor() {
        this.starPrinter = new StarPrinter();
      }
    }
    \n

    searchPrinters

    \n

    If you're searching for a Bluetooth printer, enable Bluetooth in the device settings\nand pair/connect the printer. Then do:

    \n
    this.starPrinter.searchPrinters().then(
        (printers: Array<SPPrinter>) => {
          console.log(`Found ${printers.length} printers`);
        }, (err: string) => {
          console.log(`Search printers error: ${err}`);
        });
    \n

    The most useful property on the SPPrinter class is the portName which you will need\nin other API methods.

    \n

    The only other property is modelName.

    \n

    connect

    \n

    Once you know the printer port name, you can connect to it.

    \n
    \n

    Note that there's no need to connect if you want to print as the print function does this automatically.

    \n
    \n
    this.starPrinter.connect({
      portName: thePortName
    }).then((result: SPPrinterStatusResult) => console.log(\"Connected: \" + result.connected));
    \n

    getPrinterStatus

    \n

    After connecting to a printer, you can use this method to poll for the 'online' and 'paper' statuses.

    \n
    this.starPrinter.getPrinterStatus({
      portName: this.lastConnectedPrinterPort
    }).then(result => {
      const online: boolean = result.online;
      const onlineStatus: PrinterOnlineStatus = result.onlineStatus;
      const paperStatus: PrinterPaperStatus = result.paperStatus;
    });
    \n

    print

    \n

    Once you've got the port of the printer you want to print to, just do:

    \n
    this.starPrinter.print({
      portName: this.selectedPrinterPort,
      commands: commands
    });
    \n

    So what are those commands? Let's recreate the fake receipt below to answer that (see the TypeScript definition for all options):

    \n\n
    const image = ImageSource.fromFile(\"~/res/mww-logo.png\");

    // Note that a standard 3 inch roll is 48 characters wide - we use that knowledge for our \"columns\"
    let commands = new SPCommands()
        .image(
            image,
            true, // diffuse
            true // align center (set to 'false' to align left)
         )
        // alternatively, you can use imagePositioned for a bit more control (on Android this behaves the same as 'image' though)
        .imagePositioned(
            image,
            80, // width
            20, // position
            true, // both scale
            true, // diffuse
            true // align center (set to 'false' to align left)
         )
        .alignCenter()
        .text(\"My Awesome Boutique\").newLine()
        .text(\"In a shop near you\").newLine()
        .setFont(\"smaller\")
        .text(\"Planet Earth\").newLine()
        .setFont(\"default\")
        .newLine()
        .text(\"Date: 11/11/2017                   Time: 3:15 PM\")
        .horizontalLine() // you can pass in the character and the nr of characters (use 48 for a 3\" roll, 42 for a smaller one)
        .newLine()
        .textBold(\"    SKU           Description                  Total\").newLine()
        .text(\"    300678566     Plain White Tee             €10.99\").newLine()
        .text(\"    300692003     Black Dénim                 €29.99\").newLine()
        .text(\"    300651148     Blue Denim                  €29.99\").newLine()
        .newLine()
        .newLine()
        .barcode({
          type: \"    Code128\",
          value: \"    12345678\",
          width: \"    large\",
          height: 60,
          appendEncodedValue: false
        })
        .newLine()
        .cutPaper();

    this.starPrinter.print({
      portName: this.selectedPrinterPort,
      commands: commands
    });
    \n

    openCashDrawer

    \n

    In case a cash drawer is connected via the UTP (network) connector of the Star printer,\nyou can open the drawer from your code!

    \n
    this.starPrinter.openCashDrawer({
      portName: this.selectedPrinterPort
    });
    \n

    iOS runtime permission reason

    \n

    iOS 10+ requires a permission popup when connecting (the first) time to a Bluetooth peripheral explaining why it needs to connect.

    \n

    You can provide your own reason by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSBluetoothPeripheralUsageDescription</key>
      <string>My reason justifying fooling around with your Bluetooth</string>
    \n

    To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specified yourself. You're welcome.

    \n

    Known limitations

    \n

    On iOS you want to run this on a real device.

    \n

    Future work

    \n

    Possibly add more print formatting options.

    \n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":69}},"@nativescript/google-pay":{"name":"@nativescript/google-pay","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/google-pay

    \n

    A plugin that allows you to offer Google Pay in your Android app.

    \n

    Contents

    \n\n

    Installation

    \n
    ns plugin add @nativescript/google-pay
    \n

    Prerequisites

    \n

    Before you get started, review the following prerequisites:

    \n\n

    Important note about payment token

    \n

    If you're using a payments service provider, you need a valid payment token for your app in production mode. You can view the configuration for a number of providers in the Google documentation..

    \n

    During development you can use the example below for the gateway token configuration when creating a payment request.

    \n
    parameters: {
        gateway: 'example', // in production replace with your gateway provider
        gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID
    }
    \n

    Use @nativescript/google-pay

    \n

    To implement Google Pay in your app, follow the steps below:

    \n
      \n
    1. Register GooglePayBtn view in your app and add it markup.
      2. \n
    \n
    <android>
        <GooglePayBtn
            cardNetworks=\"VISA, AMEX, DISCOVER\"
            authMethods=\"PAN_ONLY, CRYPTOGRAM_3DS\"
            tap=\"onGooglePayTap\"
            width=\"100%\"
            height=\"40\"
            buttonType=\"PAY_BLACK\"
        >    </GooglePayBtn>
    </android>
    \n
      \n
    1. Listen to the GooglePayBtn tap event
      2. \n
    \n

    Tapping the GooglePayBtn initiates payment with Google Pay. In the tap event handler(onGooglePayTap function ), manage the payments with Google Pay as follows:

    \n
      \n
    1. Listen to the GooglePayEvents.PaymentSuccess event on the button instance.
      2. \n
    \n
      \n
    • The event is emitted when a user approves your app to make payments with their Google Pay payments data.
      • \n
    • The GooglePayEvents.PaymentSuccess event's callback receives a token and other data, of PaymentSuccessEventData from Google Pay. You send that to your payments services provider for payment processing.
      • \n
    \n
    googlePayBtn.once(
            GooglePayEvents.PaymentSuccess,
            async (args: PaymentSuccessEventData) => {

              const payloadToBackend = {
                  amount: 25.20,
                  method: '3DS',
                  '3DS': {
                    signature:
                      args.data.paymentMethodData.tokenizationData.token.signature,
                    type: 'G', // for Google
                    version:
                      args.data.paymentMethodData.tokenizationData.token
                        .protocolVersion,
                    data:
                      args.data.paymentMethodData.tokenizationData.token
                        .signedMessage
                  }
                };

                // send the user payments data to your payments services provider here
                const result = await someHttpCallToPaymentServiceProvider(
                  payloadToBackend
                );

            })
    \n
    2. Present the user with the payment sheet.\n\nTo present the user with the payment sheet to complete the transaction, call the\n`createPaymentRequest()` passing it a [GooglePayRequest](#googlepayrequest) object.\n\n  ```ts\n  const options = {\n    environment: 'development', // change this to production when in prod mode\n    theme: 'light',\n    merchantInfo: {\n      merchantName: 'YOUR_MERCHANT_NAME'\n    },\n    allowedPaymentMethods: {\n      type: AllowedPaymentMethodsType.CARD,\n      parameters: {\n        allowPrepaidCards: true,\n        allowCreditCards: true,\n        billingAddressRequired: true,\n        billingAddressParameters: {\n          format: BillingAddressParametersFormat.MIN, // FULL\n          phoneNumberRequired: true\n        }\n      },\n      tokenizationSpecification: {\n        type: TokenizationSpecificationType.PAYMENT_GATEWAY,\n        parameters: {\n          gateway: 'example', // in production replace with your gateway provider\n          gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID\n        }\n      }\n    },\n    transactionInfo: {\n      currencyCode: 'USD',\n      countryCode: 'US',\n      // transactionId: '283999292929929', // A unique ID that identifies a transaction attempt. Merchants can use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API.\n      totalPriceStatus: TotalPriceStatusValue.FINAL,\n      totalPrice: 25.20,\n      totalPriceLabel: 'Total',\n      checkoutOption: CheckoutOptionValue.DEFAULT\n    },\n    emailRequired: true,\n    shippingAddressRequired: true,\n    shippingAddressParameters: {\n      allowedCountryCodes: ['US'],\n      phoneNumberRequired: true\n    }\n  } as GooglePayRequest;\n\n  googlePayBtn.createPaymentRequest(options).catch(err => {\n    console.log('error with create payment request', err);\n  });\n  ```\n
    \n

    You can find a complete code example for above stepshere

    \n

    API

    \n

    GooglePayBtn class

    \n

    A class to initiate and manage payment with Google Pay.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    createPaymentRequest(args: GooglePayRequest)Promise<unknown>Creates the Google Pay payment request and presents the user with the payment sheet.
    \n

    Enums

    \n

    GooglePayAuthMethods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    PAN_ONLYThis authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
    CRYPTOGRAM_3DSThis authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
    \n

    GooglePayCardNetworks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    AMEX'AMEX'
    DISCOVER'DISCOVER'
    INTERAC'INTERAC'
    JCB'JCB'
    MASTERCARD'MASTERCARD'
    VISA'VISA'
    \n

    GooglePayEvents

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    PaymentCancelled'PaymentCancelled'
    PaymentError'PaymentError'
    PaymentSuccess'PaymentSuccess'
    \n

    TokenizationSpecificationType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EnumDescription
    PAYMENT_GATEWAYTo retrieve payment and customer information from a payment gateway that's supported by the Google Pay API, set type to PAYMENT_GATEWAY
    DIRECTThe Direct integration allows merchants to decrypt the Google Pay response on their servers. To qualify, you must be Payments Card Industry (PCI) Data Security Standard (DSS) Level 1 compliant. Your servers also need to have the required infrastructure to securely handle users' payment credentials.
    \n

    BillingAddressParametersFormat

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    MINName, country code, and postal code (default).
    FULLName, street address, locality, region, country code, and postal code.
    \n

    AllowedPaymentMethodsType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    CARD'CARD'
    \n

    TotalPriceStatusValue

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    NOT_CURRENTLY_KNOWNUsed for a capability check. Do not use this property if the transaction is processed in an EEA country.
    ESTIMATEDTotal price may adjust based on the details of the response, such as sales tax collected based on a billing address.
    FINALTotal price doesn't change from the amount presented to the shopper.
    \n

    CheckoutOptionValue

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription
    DEFAULTStandard text applies for the given totalPriceStatus (default).
    COMPLETE_IMMEDITATE_PURCHASEThe selected payment method is charged immediately after the payer confirms their selections. This option is only available when totalPriceStatus is set to FINAL.
    \n

    GooglePayButtonType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValue
    PAY_WHITE'PAY_WHITE'
    PAY_WHITE_NO_SHADOW'PAY_WHITE_NO_SHADOW'
    BUY_WHITE'BUY_WHITE'
    BUY_WHITE_NO_SHADOW'BUY_WHITE_NO_SHADOW'
    PAY_BLACK'PAY_BLACK'
    BUY_BLACK'BUY_BLACK'
    DONATE_BLACK'DONATE_BLACK'
    \n

    Interfaces

    \n

    GooglePayRequest

    \n
    interface GooglePayRequest {
      /**
       * Sets the ENVIRONMENT for testing Google Pay
       */
      environment: 'development' | 'production';

      /**
       * Sets the theme for the payment sheet UI.
       */
      theme: 'dark' | 'light';
      /**
       * Major API version. The value is 2 for this specification.
       */
      apiVersion: number;
      /**
       * Minor API version. The value is 0 for this specification.
       */
      apiVersionMinor: number;
      merchantInfo: {
        /**
         * Merchant name encoded as UTF-8. Merchant name is rendered in the payment sheet. In TEST environment, or if a merchant isn't recognized, a “Pay Unverified Merchant” message is displayed in the payment sheet.
         */
        merchantName: string;
      };

      allowedPaymentMethods: {
        /**
         * A short identifier for the supported payment method.
         * Only CARD and PAYPAL currently are supported entries
         */
        type: string;

        parameters: {
          /**
           * Fields supported to authenticate a card transaction.
           * PAN_ONLY: This authentication method is associated with payment cards stored on file with the user'    s Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
           * CRYPTOGRAM_3DS: This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
           */
          allowedAuthMethods: Array<string>;

          /**
           * One or more card networks that you support, also supported by the Google Pay API.
           * AMEX
           * DISCOVER
           * INTERAC
           * JCB
           * MASTERCARD
           * VISA
           */
          allowedCardNetworks: string;

          /**
           * Set to false if you don't support prepaid cards. Default: The prepaid card class is supported for the card networks specified.
           */
          allowPrepaidCards?: boolean;

          /**
           * Set to false if you don'    t support credit cards. Default: The credit card class is supported for the card networks specified.
           */
          allowCreditCards?: boolean;

          /**
           * Set to true to request assuranceDetails. This object provides information about the validation performed on the returned payment data.
           */
          assuranceDetailsRequired?: boolean;

          /**
           * Set to true if you require a billing address. A billing address should only be requested if it's required to process the transaction. Additional data requests can increase friction in the checkout process and lead to a lower conversion rate.
           */
          billingAddressRequired?: boolean;

          /**
           * The expected fields returned if billingAddressRequired is set to true.
           */
          billingAddressParameters?: {
            /**
             * Billing address format required to complete the transaction.
             * MIN: Name, country code, and postal code (default).
             * FULL: Name, street address, locality, region, country code, and postal code.
             */
            format?: string;

            /**
             * Set to true if a phone number is required to process the transaction.
             */
            phoneNumberRequired?: boolean;
          };
        };

        /**
         * Configure an account or decryption provider to receive payment information.
         * This property is required for the CARD payment method.
         */
        tokenizationSpecification?: {
          /**
           * A payment method tokenization type is supported for the given PaymentMethod.
           * For CARD payment method, use PAYMENT_GATEWAY or DIRECT.
           * For PAYPAL PaymentMethod, use DIRECT with no parameter.
           */
          type: TokenizationSpecificationType;

          /**
           * Parameters specific to the selected payment method tokenization type.
           */
          parameters: {
            gateway: string;
            gatewayMerchantId: string;
          };
        };
      };

      /**
       * Details about the authorization of the transaction based upon whether the user agrees to the transaction or not. Includes total price and price status.
       * https://developers.google.com/pay/api/android/reference/request-objects#TransactionInfo
       */
      transactionInfo: {
        /**
         * Array containing the transaction items for the transaction (item, shipping, tax, etc.)
         */
        displayItems: Array<GoogelPayDisplayItems>;
        /**
         * ISO 4217 alphabetic currency code.
         */
        currencyCode: string;

        /**
         * ISO 3166-1 alpha-2 country code where the transaction is processed. This is required for merchants based in European Economic Area (EEA) countries.
         */
        countryCode?: string;

        /**
         * A unique ID that identifies a transaction attempt. Merchants may use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API.
         */
        transactionId?: string;

        /**
         * The status of the total price used.
         */
        totalPriceStatus: TotalPriceStatusValue;

        /**
         * Total monetary value of the transaction with an optional decimal precision of two decimal places. This field is required unless totalPriceStatus is set to NOT_CURRENTLY_KNOWN.
         * The format of the string should follow the regex format: ^[0-9]+(\\.[0-9][0-9])?$
         */
        totalPrice?: string;

        /**
         * Custom label for the total price within the display items.
         */
        totalPriceLabel?: string;

        /**
         * Affects the submit button text displayed in the Google Pay payment sheet.
         */
        checkoutOption?: CheckoutOptionValue;
      };

      /**
       * Set to true to request an email address.
       */
      emailRequired?: boolean;

      /**
       * Set to true to request a full shipping address.
       */
      shippingAddressRequired?: boolean;

      /**
       * If shippingAddressParameters is set to true, specify shipping address restrictions.
       */
      shippingAddressParameters?: {
        /**
         * ISO 3166-1 alpha-2 country code values of the countries where shipping is allowed. If this object isn'    t specified, all shipping address countries are allowed.
         */
        allowedCountryCodes?: Array<string>;
        /**
         * Set to true if a phone number is required for the provided shipping address.
         */
        phoneNumberRequired?: boolean;
      };
    }
    \n

    PaymentCancelledEventData

    \n
    interface PaymentCancelledEventData extends EventData {
      eventName: string;
      object: any;
    }
    \n

    PaymentErrorEventData

    \n
    interface PaymentErrorEventData extends EventData {
      eventName: string;
      object: any;
      data: {
        statusCode: number;
      };
    }
    \n

    PaymentSuccessEventData

    \n
    interface PaymentSuccessEventData extends EventData {
      eventName: string;
      object: any;
      data: {
        /**
         * Data about the selected payment method.
         */
        paymentMethodData: {
          /**
           * PaymentMethod type selected in the Google Pay payment sheet.
           */
          type: string;

          /**
           * User-facing message to describe the payment method that funds this transaction.
           */
          description: string;

          /**
           * The value of this property depends on the payment method type returned. For CARD, see CardInfo.
           */
          info: {
            /**
             * The details about the card. This value is commonly the last four digits of the selected payment account number.
             */
            cardDetails: string;

            /**
             * This object provides information about the validation performed on the returned payment data if assuranceDetailsRequired is set to true in the CardParameters.
             */
            assuranceDetails: {
              /**
               * If true, indicates that Cardholder possession validation has been performed on returned payment credential.
               */
              accountVerified: boolean;

              /**
               * If true, indicates that identification and verifications (ID&V) was performed on the returned payment credential.
               * If false, the same risk-based authentication can be performed as you would for card transactions. This risk-based authentication can include, but not limited to, step-up with 3D Secure protocol if applicable.
               */
              cardHolderAuthenticated: boolean;
            };

            /**
             * The payment card network of the selected payment. Returned values match the format of allowedCardNetworks in CardParameters.
             * This card network value should not be displayed to the buyer. It's used when the details of a buyer's card are needed. For example, if customer support needs this value to identify the card a buyer used for their transaction. For a user-visible description, use the description property of PaymentMethodData instead.
             */
            cardNetwork: string;

            /**
             * The billing address associated with the provided payment method, if billingAddressRequired is set to true in CardParameters.
             */
            billingAddress?: Address;
          };

          /**
           * Payment tokenization data for the selected payment method.
           */
          tokenizationData: {
            /**
             * \tThe type of tokenization to be applied to the selected payment method. This value matches the type set in PaymentMethodTokenizationSpecification.
             */
            type: string;

            /**
             * The generated payment method token.
             * PAYMENT_GATEWAY: JSON object string that contains a chargeable token issued by your gateway.
             * DIRECT: protocolVersion, signature, and a signedMessage for decryption. See Payment method token structure for more information.
             */
            token: {
              /**
               * Identifies the encryption or signing scheme under which the message is created. It allows the protocol to evolve over time, if needed.
               */
              protocolVersion: string;

              /**
               * Verifies that the message came from Google. It's base64-encoded, and created with ECDSA by the intermediate signing key.
               */
              signature: string;

              /**
               * A JSON object serialized as a string that contains the encryptedMessage, ephemeralPublicKey, and tag. It'    s serialized to simplify the signature verification process.
               */
              signedMessage: string;

              /**
               * JSON object string that contains a chargeable token issued by your gateway
               */
              rawToken: string;
            };
          };
        };

        /**
         * Email address, if emailRequired is set to true in the PaymentDataRequest. If another request has the property set to true there's no effect.
         */
        email: string;

        /**
         * Shipping address, if shippingAddressRequired is set to true in the PaymentDataRequest.
         */
        shippingAddress: Address;
      };
    }
    \n

    Address

    \n
    Address {
    \t/**
    \t * The full name of the addressee.
    \t */
    \tname;

    \t/**
    \t * The postal or ZIP code.
    \t */
    \tpostalCode;

    \t/**
    \t * ISO 3166-1 alpha-2 country code.
    \t */
    \tcountryCode;

    \t/**
    \t * A telephone number, if phoneNumberRequired is set to true in the PaymentDataRequest.
    \t */
    \tphoneNumber;

    \t/**
    \t * The first line of the address.
    \t */
    \taddress1;

    \t/**
    \t * The second line of the address.
    \t */
    \taddress2;

    \t/**
    \t * The third line of the address.
    \t */
    \taddress3;

    \t/**
    \t * City, town, neighborhood, or suburb.
    \t */
    \tlocality;

    \t/**
    \t * A country subdivision, such as a state or province.
    \t */
    \tadministrativeArea;

    \t/**
    \t * The sorting code.
    \t */
    \tsortingCode;
    }
    \n

    GooglePayDisplayItems

    \n
    interface GoogelPayDisplayItems {
      label: string;
      type: string;
      price: string;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":2,"lastWeek":13,"lastMonth":144}},"@nativescript/payments":{"name":"@nativescript/payments","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/payments

    \n\n

    A plugin that allows your app to use in-app purchases and subscriptions using Apple AppStore and Google PlayStore purchasing systems.

    \n

    This plugin uses a RxJS Observable to emit the events to handle the purchase flow. To avoid threading errors with the platform purchasing flow, you can use toMainThread() as a pipe on the Observable so that the purchase logic executes on the main thread. paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {...

    \n

    In-App Purchase exmple should give a good starting point on how to use the Observable and setup the purchasing mechanism.

    \n

    Payments on iOS example

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Example Item ListPurchasConfirmationPurchase DonePurchase Successful
    \"Purchase\"Purchase\"Purchase\"Purchase
    \n

    Payments on Android example

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Example Item ListPurchas ConfirmationPurchase Successful
    \"Item\"Purchase\"Purchase
    \n

    Contents

    \n\n

    Installation

    \n
    ns plugin add @nativescript/payments
    \n

    Prerequisites

    \n

    Before you get started, review the following prerequisites:

    \n

    iOS prerequisites

    \n

    To offer in app purchases for your iOS app. You will need to create items for the app on AppStoreConnect.Apple.Com.

    \n

    \"In

    \n

    On the form to create the in app purchase item, the Product ID is the value you will use to fetch your items for the user to purchase in your app.\n\"Product

    \n

    Once you complete creating an item you will see a list of all items for the app listed on the AppStore Connect.\n\"List

    \n

    To test iOS purchases fully, you will need a real iOS device. You will also need a test user in the sandbox environment on your appstore account.

    \n

    \"Sandbox

    \n

    Android prerequisites

    \n
      \n
    1. \n

      To offer in-app purchases for your Android app, you will need to upload at least ONE apk/aab to the Google Play Console.

      \n
      2. \n
    2. \n

      Create in-app products on the console.\n\"Create

      \n
      3. \n
    \n

    On the form to create your product, the Product ID is the value you will use to fetch your products for the user to purchase.

    \n

    Important note about Google items

    \n
      \n
    • \n

      Google does not like numeric values in the ID field. It seems to ignore the Sku when querying for your items and only returns one item instead of multiple values if the IDs contain numeric values.\n\"Product

      \n
      • \n
    • \n

      Google in app products will not work until Google has reviewed the app. They will appear in the list of products, but the API will error trying to purchase them. The title of the item when you call `fetchItems(['your.product.id']) should be suffixed with (in review) or something similar when returned at this point. You will not be able to finish the purchase flow until the review period has passed.

      \n
      • \n
    \n

    \"Active,

    \n

    To test Android purchases completely, you should use a real device with Google Play setup and logged into an account. You can use test accounts\nfor Google Play Billing for the work flow. This will allow you to test the app in development properly. For more info: https://support.google.com/googleplay/android-developer/answer/6062777

    \n

    Use @nativescript/payments

    \n

    Standard usage flow

    \n

    Below is the standard flow of the plugin's methods calls:

    \n
    // This sets up the internal system of the plugin
    init();
    // Connect the RxJS Observable
    paymentEvents.connect();
    // Establish the Subscription with your event handling
    paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {...

    // fetchItems(['item.id', ...]) will query the store for the items requested.
    // Handle these items inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
    fetchItems(['item.id']);

    // buyItem('item.id') will start the purchase flow on Android & iOS.
    // Next handle the PaymentEvent.Context.PROCESSING_ORDER for SUCCESS or FAILURE.
    // If SUCCESS then you can call the last method to the `finalizeOrder(payload)` method.
    buyItem('item.id');

    // finalizeOrder(payload) will complete the purchase flow.
    // The payload argument here is provided in the PaymentEvent.Context.PROCESSING_ORDER - SUCCESS event (see below example for detailed usage).
    finalizeOrder(payload)

    // at this point you would process the order with your backend given the receiptToken from the purchase flow
    \n

    In-App Purchase example

    \n
    import { buyItem, BuyItemOptions, canMakePayments, fetchItems, finalizeOrder, init as initPayments, Item, PaymentEvent, paymentEvents, toMainThread } from '@nativescript/payments';

    export class SomeViewModel {
      private item: Item;

      pageLoaded() {
        // Connect to the RxJS Observable
        paymentEvents.connect();

        // Subscribe to the RxJS Observable
        // You do not have to handle all of the events
        // RETRIEVING_ITEMS && PROCESSING_ORDER are the ones you'll want to use to handle the purchase flow
        const subscription = paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {
          switch (event.context) {
            case PaymentEvent.Context.CONNECTING_STORE:
              console.log('    Store Status: ' + event.result);
              if (event.result === PaymentEvent.Result.SUCCESS) {
                const canPay = canMakePayments();
                if (canPay) {
                  // pass in your product IDs here that you want to query for
                  fetchItems(['    io.nstudio.iapdemo.coinsfive', 'io.nstudio.iapdemo.coinsone', 'io.nstudio.iapdemo.coinsonethousand']);
                }
              }
              break;
            case PaymentEvent.Context.RETRIEVING_ITEMS:
              if (event.result === PaymentEvent.Result.SUCCESS) {
                // if you passed multiple items you will need to handle accordingly for your app
                this.item = event.payload;
              }
              break;
            case PaymentEvent.Context.PROCESSING_ORDER:
              if (event.result === PaymentEvent.Result.FAILURE) {
                console.log(`🛑 Payment Failure - ${event.payload.description} 🛑`);
                // handle the failure of the purchase
              } else if (event.result === PaymentEvent.Result.SUCCESS) {
                // handle the successful purchase
                console.log('    🟢 Payment Success 🟢');
                console.log(`Order Date: ${event.payload.orderDate}`);
                console.log(`Receipt Token: ${event.payload.receiptToken}`);
                finalizeOrder(event.payload);
              }
              break;
            case PaymentEvent.Context.FINALIZING_ORDER:
              if (event.result === PaymentEvent.Result.SUCCESS) {
                console.log('    Order Finalized');
              }
              break;
            case PaymentEvent.Context.RESTORING_ORDERS:
              console.log(event);
              break;
            default:
              console.log(`Invalid EventContext: ${event}`);
              break;
          }
        });

        // This initializes the internal payment system for the plugin
        initPayments();
      }

      buttonTap() {
        const opts: BuyItemOptions = {
          accountUserName: '    someuseraccount123@test.orgbizfree',
          android: {
            vrPurchase: true,
          },
          ios: {
            quantity: 1,
            simulatesAskToBuyInSandbox: true,
          },
        };

        // This method will kick off the platform purchase flow
        // We are passing the item and an optional object with some configuration
        buyItem(this.item, opts);
      }
    }
    \n

    API

    \n
      \n
    • init() Sets up the internal system of the plugin.
      • \n
    • paymentEvents The RxJS Observable to emit the events to handle the purchase flow.
      • \n
    \n

    The following methods get called in response to the events emitted by paymentEvents.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    fetchItems(itemIds: Array<string>)Queries the store for the items requested. You should handle these items inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
    buyItem(item: Item, options?: BuyItemOptions)Starts the purchase flow on Android & iOS and emits PaymentEvent.Context.PROCESSING_ORDER with SUCCESS or FAILURE. If SUCCESS then you can call the last method to the finalizeOrder(payload).
    fetchSubscriptions(itemIds: Array<string>)Queries the store for the subscriptions offered by the app. You should handle these subscriptions inside the PaymentEvent.Context.RETRIEVING_ITEMS event.
    startSubscription(item: Item, userData?: string)Android only. Lanches the billing flow by presenting the Google Store subscription UI interface.
    restoreOrders(skuType?: string)Returns the purchase made by the user for each product. You call this method to install purchases on additional devices or restore purchases for an application that the user deleted and reinstalled.
    canMakePayments()Returns true or false indicating whether the billing service is available and is setup successfully.
    tearDown()Closes the connection to the billing service to free up resources.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":9,"lastWeek":35,"lastMonth":319}},"nativescript-appavailability":{"name":"nativescript-appavailability","version":"1.3.2","license":"MIT","readme":"

    NativeScript AppAvailability

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    A plugin to check for availability of other apps on the device.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-appavailability
    \n

    Usage

    \n
    \n

    Note that version 1.3.0 added a synchronous version of this method that doesn't return a Promise. Need that? Use availableSync instead of available.

    \n
    \n

    TypeScript

    \n
    const isAppAvailable = require(\"nativescript-appavailability\").available;

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appavailability.available(\"twitter://\").then((avail: boolean) => {
      console.log(\"App available? \" + avail);
    })
    \n

    TypeScript + Angular

    \n
    import * as appavailability from \"nativescript-appavailability\";

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appavailability.available(\"twitter://\").then((avail: boolean) => {
      console.log(\"App available? \" + avail);
    })
    \n

    JavaScript

    \n
    var appAvailability = require(\"nativescript-appavailability\");

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appAvailability.available(\"com.facebook.katana\").then(function(avail) {
      console.log(\"App available? \" + avail);
    })
    \n

    Opening an app (with web fallback)

    \n

    Now that you know whether an app is installed or not, you probably want to launch it.\nHere's a snippet that opens the mobile Twitter app and falls back to the website if it's not installed.

    \n
    import { available } from \"nativescript-appavailability\";
    import { openUrl } from \"tns-core-modules/utils/utils\";

    const twitterScheme = \"twitter://\";
    available(twitterScheme).then(available => {
      if (available) {
        // open in the app
        openUrl(twitterScheme + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
      } else {
        // open in the default browser
        openUrl(\"https://twitter.com/eddyverbruggen\");
      }
    })
    \n

    And a more concise, synchronous way would be:

    \n
    import { availableSync } from \"nativescript-appavailability\";
    import { openUrl } from \"tns-core-modules/utils/utils\";

    if (availableSync(\"twitter://\")) {
      openUrl(\"twitter://\" + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
    } else {
      openUrl(\"https://twitter.com/eddyverbruggen\");
    }
    \n

    iOS whitelisting

    \n

    To get useful results on iOS 9 and up you need to whitelist the URL Scheme\nyou're querying in the application's .plist.

    \n

    Luckily NativeScript made this pretty easy. Just open app/App_ResourcesiOS/Info.plist\nand add this if you want to query for both twitter:// and fb://:

    \n
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>fb</string>
        <string>twitter</string>
      </array>
    \n

    You may wonder how one would determine the correct identifier for an app.

    \n
      \n
    • Android: simply search the Play Store and use the id in the URL. For Twitter this is com.twitter.android because the URL is https://play.google.com/store/apps/details?id=com.twitter.android.
      • \n
    • iOS: this one is a bit harder but this site should cover most apps you're interested in. When in doubt you can always fire up Safari on your iPhone and type for example 'twitter://' in the address bar, if the app launches you're good.
      • \n
    \n","downloadStats":{"lastDay":18,"lastWeek":49,"lastMonth":194}},"@global66/nativescript-plugin-appsflyer":{"name":"@global66/nativescript-plugin-appsflyer","version":"2.0.5","license":{"type":"MIT","url":"https://github.com/AppsFlyerSDK/nativescript-plugin-appsflyer/blob/master/LICENSE"},"readme":"\n

    appsflyer-nativescript-plugin

    \n

    Nativescript Library for AppsFlyer SDK

    \n

    \"npm

    \n

    Table of content

    \n\n

    This plugin is built for

    \n
      \n
    • iOS AppsFlyerSDK v6.12.0
      • \n
    • Android AppsFlyerSDK v6.12.1
      • \n
    \n

    Breaking Changes

    \n

    v6.5.4

    \n

    Android: deepLinkResult will return an object instead of a string

    \n

    Installation

    \n

    $ tns plugin add nativescript-plugin-appsflyer

    \n

    Integration

    \n
    \n

    Call module by adding (native javascript):

    \n

    var appsFlyer = require("nativescript-plugin-appsflyer");

    \n
    \n
    appsFlyer.initSdk(options, callback): void
    \n

    initializes the SDK.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectSDK configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    nametypedefaultdescription
    devKeystringAppsflyer Dev key
    appIdstringApple Application ID (for iOS only)
    isDebugbooleanfalsedebug mode (optional)
    onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
    onConversionDataFailurefunction
    \n

    Example:

    \n
     var options = {
                devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
                appId: \"975313579\",
                isDebug: true,
                timeToWaitForATTUserAuthorization: 60,
                onConversionDataSuccess: function(_res){
                    console.log(JSON.stringify(_res));
                },
                onConversionDataFailure: function(_res){
                    console.warn(\"failure: \" + JSON.stringify(_res));
                },
            };

            appsFlyer.initSdk(options).then(function(result) {
                viewModel.set(\"initSdkResponse\", result.status);
            }, function(err) {
                viewModel.set(\"initSdkResponse\", JSON.stringify(err));
            });
    \n
    \n
    appsFlyer.logEvent(options): Promise<any>
    \n
      \n
    • These in-app events help you measure how loyal users discover your app, and attribute them to specific\ncampaigns/media-sources. Please take the time define the event/s you want to measure to allow you\nto measure the ROI (Return on Investment) and LTV (Lifetime Value).
      • \n
    • The logEvent method allows you to send in-app events to AppsFlyer analytics. This method allows you to add events dynamically by adding them directly to the application code.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectlog event configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
    eventValuesObjectevent details (see example bellow)
    \n

    Example: (native javascript)

    \n
     
            var options = {
                eventName: \"af_add_to_cart\",
                eventValues: {
                    \"af_content_id\": \"id123\",
                    \"af_currency\": \"USD\",
                    \"af_revenue\": \"2\"
                }
            };
            appsFlyer.logEvent(options).then(function(result) {
                viewModel.set(\"logEventResponse\", result);
            }, function(err) {
                viewModel.set(\"logEventResponse\", JSON.stringify(err));
            });
    \n

    Demo

    \n

    This plugin has a demo project bundled with it. To give it a try , clone this repo and from root a.e. nativescript-plugin-appsflyer execute the following:

    \n
    npm run setup
    \n
      \n
    • Run npm run demo.ios or npm run demo.android will run for the appropriate platform.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":95}},"@essent/nativescript-webview-ext":{"name":"@essent/nativescript-webview-ext","version":"9.0.1","license":"Apache-2.0","readme":"

    @essent/nativescript-webview-ext

    \n

    Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

    \n

    NOTE: This extends and updates the excellent: https://github.com/Notalib/nativescript-webview-ext

    \n
    npm install @essent/nativescript-webview-ext
    \n

    Features

    \n
      \n
    • Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.\n
        \n
      • Note: This is not supported on iOS <11
        • \n
      \n
      • \n
    • Adds support for capturing URLs.\n
        \n
      • This allows the app to open external links in an external browser and handle tel-links
        • \n
      \n
      • \n
    • Added functions like:\n
        \n
      • executeJavaScript(code: string) for executing JavaScript-code and getting result.
        • \n
      • executePromise(code: string) for calling promises and getting the result.
        • \n
      • getTitle() returns document.title.
        • \n
      \n
      • \n
    • Two-Way event listeners between NativeScript and WebView\n
        \n
      • From NativeScript to WebView
        • \n
      • From WebView to NativeScript
        • \n
      \n
      • \n
    • Adds functions to inject css- and javascript-files.\n
        \n
      • Into the current page.
        • \n
      • Auto-injected on page load.
        • \n
      \n
      • \n
    • Polyfills:\n
        \n
      • Promise
        • \n
      • Fetch API (overrides Native API on Android to support x-local:// and file://)
        • \n
      \n
      • \n
    • Allows alert, confirm and prompt with WkWebView.
      • \n
    • Supports:\n
        \n
      • Android 19+
        • \n
      • iOS 11+: Full support
        • \n
      • iOS <11: Partial support
        • \n
      \n
      • \n
    \n

    Update minSdkVersion to 19 or higher

    \n

    Android SDK 19 is required, update App_Resources/Android/app.gradle:

    \n
    android {
      defaultConfig {
        minSdkVersion 19 // change this line
        generatedDensities = []
      }
      aaptOptions {
        additionalParameters \"--no-version-vectors\"
      }
    }
    \n

    Core support

    \n

    Load in template like this:

    \n
    <Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:essent=\"@essent/nativescript-webview-ext\">
        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <essent:WebViewExt src=\"https://nota.dk\"></<essent:WebViewExt>
    </Page>
    \n

    Angular support

    \n

    Import WebViewExtModule from @essent/nativescript-webview-ext/angular and add it to your NgModule.

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Vue support

    \n

    Import @essent/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Usage

    \n

    Limitations

    \n

    The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

    \n

    Custom-scheme support for iOS <11 was removed because of ITMS-90809.

    \n

    API

    \n

    NativeScript View

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValueDescription
    readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
    srcLoad src
    autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
    builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
    cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
    databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
    debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
    displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
    domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
    scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
    supportZoomtrue / falseAndroid: should the webview support zoom
    viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
    limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
    registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
    unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
    getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
    loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
    autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
    autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
    executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
    executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
    emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
    getTitle()Returns a promise with the current document title.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
    loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
    loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
    shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
    titleChangedDocument title changed
    webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
    webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
    webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
    webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
    Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
    \n

    WebView

    \n

    Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
    window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
    window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
    \n

    Waiting for nsWebViewBridge to be available

    \n
        window.addEventListener(\"ns-bridge-ready\", function(e) {
            var nsWebViewBridge = e.detail || window.nsWebViewBridge;

            // do stuff here
        });
    \n

    Possible features to come:

    \n
      \n
    • Cookie helpers?
      • \n
    • Share cache with native-layer?
      • \n
    \n

    Android

    \n
      \n
    • Settings\n
        \n
      • AppCache?
        • \n
      • User agent?
        • \n
      \n
      • \n
    \n

    iOS

    \n
      \n
    • Settings?
      • \n
    \n

    About Nota

    \n

    Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":10,"lastWeek":57,"lastMonth":419}},"nativescript-videorecorder":{"name":"nativescript-videorecorder","version":"3.0.0-beta.6","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript VideoRecorder

    \n

    Install

    \n

    tns plugin add nativescript-videorecorder

    \n

    QuickStart

    \n

    JavaScript

    \n
    var vr = require('nativescript-videorecorder');

    var options = {
        saveToGallery: true,
        duration: 30,
        format: 'mp4',
        size: 10,
        hd: true,
        explanation: 'Why do i need this permission'
    }

    var videorecorder = new vr.VideoRecorder(options);

    videorecorder.record().then((data)=>{
      console.log(data.file)
    }).catch((err)=>{
      console.log(err)
    })
    \n

    TypeScript

    \n
    import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder';

    const options: VideoRecorderOptions = {
        hd: true
        saveToGallery: true
    }
    const videorecorder = new VideoRecorder(options)

    videorecorder.record().then((data) => {
        console.log(data.file)
    }).catch((err) => {
        console.log(err)
    })
    \n

    VideoRecorder

    \n

    Options

    \n

    Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

    \n
      \n
    • hd?: boolean - If true, highest quality of device, if false MMS quality (default: false)
      • \n
    • saveToGallery?: boolean - Enable to save the video in the device Gallery, otherwise it will be store within the sandbox of the app (default: false)
      • \n
    • duration?: number - Limit the duration of the video, 0 for unlimited (default: 0)
      • \n
    • position?: 'front' | 'back' | 'none' - Force which device camera should be used, 'none' for no preferences (default: none)
      • \n
    \n

    Additional parameters for Android:

    \n
      \n
    • size?: number - Limit the size of the video, 0 for unlimited (default: 0)
      • \n
    • explanation?: string - Why permissions should be accepted, optional on api > 23
      • \n
    \n

    Additional parameters for iOS:

    \n
      \n
    • format?: 'default' | 'mp4' - allows videos to be played on android devices (default: 'default') recommended for cross platform apps
      • \n
    \n

    VideoRecorder attributes:

    \n
      \n
    • options: Options Option object (see above section), can be set from the constructor
      • \n
    \n

    VideoRecorder methods:

    \n
      \n
    • record(options?: Options): Promise<{ file?: string } > Return a Promise with an object containing the filepath as file key. It may not be there if the video has been saved to the gallery. An optional options parameter can be given to override instance options, this is deprecated.
      • \n
    • requestPermissions(): Promise Return a Promise, resolved if permissions are OK (ask for permissions if not), rejected if user didn't have accepted the permissions. This method is implicitely called by record()
      • \n
    • isAvailable(): boolean Check if device has a camera and is compatible with what has been set in options
      • \n
    \n

    Promises above can be rejected with:

    \n
      \n
    • { event: 'denied'} - Permissions have not been accepted
      • \n
    • { event: 'cancelled'} - Video capture have been canceled
      • \n
    • { event: 'failed'} - Generic error
      • \n
    \n

    AdvancedVideoView

    \n

    AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

    \n

    Requires API 21+ on Android 🤖

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder/advanced\">
    <recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
    \n
    const advancedView = page.getViewById(\"camera\");
    advancedView.startRecording();
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    start()voidStarts the camera preview
    stop()voidStop the camera preview
    startRecording()voidStart recording camera preview.
    stopRecording()voidStop recording camera preview.
    toggleCamera()voidToggles between front or the back camera.
    toggleTorch()voidToggles the torch (iOS only for now)
    durationintGet the current recording video duration.
    cameraPositionBACKvoidGets or Sets camera position
    outputOrientationPORTRAITvoidGets or Sets output video orientation
    isTorchAvailablebooleanReadOnly: is the torch supported for this camera
    torchfalsebooleanEnable/Disable torch (iOS only for now)
    qualityMAX_480PvoidGets or sets Video Quality
    \n

    outputOrientation

    \n

    Be careful to not change orientation while recording, it's not supported.

    \n

    Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

    \n

    This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

    \n","downloadStats":{"lastDay":1,"lastWeek":45,"lastMonth":151}},"@valor/nativescript-view-shot":{"name":"@valor/nativescript-view-shot","version":"1.0.0","license":"Apache-2.0","readme":"

    @valor/nativescript-view-shot

    \n

    Take a screenshot of an existing view, or render a view in the background and take a screenshot of it.

    \n
    ns plugin add @valor/nativescript-view-shot
    \n

    Usage

    \n

    Core/flavor agnostic

    \n

    Render a visible view:

    \n
    <GridLayout id=\"visibleView\">
        <Label backgroundColor=\"LightGreen\" text=\"View to screenshot\" class=\"h1\" textWrap=\"true\"/>
    </GridLayout>
    \n
      renderVisible() {
        const hostView: GridLayout = this.page.getViewById('visibleView');
        const result = renderToImageSource(hostView);
        // work with result
      }
    \n

    Render an invisible view:

    \n
    <viewShot:LogicalViewContainer>
    <!-- this view is completely detached! Handle measuring/layout yourself! -->
        <GridLayout id=\"hostView\">
        <Label backgroundColor=\"LightBlue\" text=\"Hello World\" class=\"h1\" textWrap=\"true\"/>
        </GridLayout>
    </viewShot:LogicalViewContainer>
    \n
      render() {
        const hostView: GridLayout = this.page.getViewById('hostView');
        // measure and layout the detached view with the desired width/height
        measureAndLayout(hostView, Screen.mainScreen.widthDIPs);
        const result = renderToImageSource(hostView);
        // work with result
      }
    \n

    Create and render a view completely detached:

    \n
      renderDetached() {
        const myView = new GridLayout();
        const renderedViewData = loadViewInBackground(myView);
        // measure and layout the detached view with the desired width/height
        measureAndLayout(renderedViewData.hostView, Screen.mainScreen.widthDIPs);
        const result = renderToImageSource(renderedViewData.hostView);
        disposeBackgroundView(renderedViewData);
        // work with result
      }
    \n

    API

    \n
    import { ImageSource, View } from '@nativescript/core';

    export interface BackgroundViews {
      // parent of the view that will be rendered to ensure margins are respected
      hostView: View;
      // a view that wraps the hostView and is collapsed
      hiddenHost: View;
      // a view container that will be inserted in the view tree to make it part of the view hierarchy
      // (enables CSS inheritance)
      logicalContainer?: View;
    }
    export function measureAndLayout(hostView: View, width?: number, height?: number): void;

    export class LogicalViewContainer extends LayoutBase {}

    export function renderToImageSource(hostView: View): ImageSource;

    export function loadViewInBackground(view: View, host?: View): BackgroundViews;

    export function disposeBackgroundView(backgroundViews: BackgroundViews): void;
    \n

    Angular

    \n
    <StackLayout>
      <Button text=\"Render detached view\" (tap)=\"renderTemplate(myTemplate, true)\" class=\"btn btn-primary\"></Button>
      <Button text=\"Render detached in root (check css)\" (tap)=\"renderTemplate(myTemplate, false)\" class=\"btn btn-primary\"></Button>
      <Button text=\"Take screenshot of view\" (tap)=\"screenshotView(myView)\" class=\"btn btn-primary\"></Button>
      <!-- the view will be rendered in ViewHost for the purposes of CSS handling -->
      <ng-container #viewHost></ng-container>
      <GridLayout #myView>
        <Label class=\"h1\" backgroundColor=\"lightblue\">Screenshot view</Label>
      </GridLayout>
      <Label *ngIf=\"loading\">Loading image...</Label>
      <Label>result:</Label>
      <ng-template #myTemplate>
        <GridLayout>
          <Image [src]=\"webImage2\"></Image>
          <Label class=\"child-label h2\">some text</Label>
        </GridLayout>
      </ng-template>
    </StackLayout>
    \n
    export class NativescriptViewShotComponent {
      viewShotService = inject(ViewShotService);
      @ViewChild('viewHost', { read: ViewContainerRef }) vcRef: ViewContainerRef;

      srcUrl = `https://picsum.photos/${Screen.mainScreen.widthPixels}/200`;
      webImage$ = ImageSource.fromUrl(this.srcUrl);
      webImage2: ImageSource;
      imgSrc: ImageSource;

      async renderTemplate(template: TemplateRef<unknown>, attached: boolean) {
        const width = Screen.mainScreen.widthDIPs;
        // reusing imageSource on iOS sometimes doesn't work, so we create a new one each time
        this.webImage2 = new ImageSource((await this.webImage$).ios);
        this.loading = false;
        this.imgSrc = await this.viewShotService.captureInBackground(template, {
          logicalHost: attached ? this.vcRef : undefined,
          width,
          delay: 0,
        });
      }

      screenshotView(view: View) {
        this.imgSrc = renderToImageSource(view);
      }
    }
    \n

    API

    \n
    import { Injector, TemplateRef, Type, ViewContainerRef } from '@angular/core';
    import { NgViewRef } from '@nativescript/angular';
    import { ImageSource, View, ViewBase } from '@nativescript/core';
    export interface DrawableOptions<T = unknown> {
        /**
         * target width of the view and image, in dip. If not specified, the measured width of the view will be used.
         */
        width?: number;
        /**
         * target height of the view and image, in dip. If not specified, the measured height of the view will be used.
         */
        height?: number;
        /**
         * injector to use for the component. If not specified, the injector of the logical host will be used.
         * if there is not logical host, then this service's injector will be used. (most likely the root injector)
         */
        injector?: Injector;
        /**
         * how much should we delay the rendering of the view into the image.
         * This is useful if you want to wait for an image to load before rendering the view.
         * If using a function, it will be called with the NgViewRef as the first argument.
         * The NgViewRef can be used to get the EmbeddedViewRef/ComponentRef and the NativeScript views.
         * This is useful as you can fire an event in your views when the view is ready, and then complete
         * the promise to finish rendering to image.
         */
        delay?: number | ((viewRef: NgViewRef<T>) => Promise<void>);
        /**
         * The logical host of the view. This is used to specify where in the DOM this view should lie.
         * The practical use of this is if you want the view to inherit CSS styles from a parent.
         * If this is not specified, the view will be handled as a root view,
         * meaning no ancestor styles will be applied, similar to dropping the view in app.component.html
         */
        logicalHost?: ViewBase | ViewContainerRef;
    }
    export declare class ViewShotService {
        captureInBackground<T>(type: Type<T> | TemplateRef<T>, options?: DrawableOptions<T>): Promise<ImageSource>;
        captureRenderedView(view: View): ImageSource;
    }
    \n

    Important details

    \n

    Some views (like images) take a while to load. So you might need to add a delay between start rendering a view and generating the image. In angular, the delay option is available for this purpose, and it can be a number, for a simple wait, or a function that will receive the NgViewRef as a parameter and must return a promise. This can be used to listen to events on the view, or to wait for a specific amount of time.

    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":22,"lastWeek":150,"lastMonth":680}},"nativescript-angular":{"name":"nativescript-angular","version":"10.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":49,"lastWeek":1006,"lastMonth":3836}},"@voicethread/nativescript-downloader":{"name":"@voicethread/nativescript-downloader","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript Downloader \"apple\" \"android\"\"npm\"

    \n
    \n

    @voicethread/nativescript-downloader

    \n
    \n

    This downloader plugin exports class Downloader that has a single function download().

    \n

    For iOS, Downloader uses NSURLSession to initiate a download from a valid URL.

    \n

    For Android, Downloader uses DownloadManager to initiate a download from a valid URL.

    \n

    https://github.com/VoiceThread/nativescript-plugins/assets/20136906/80d40e3f-2c42-4d61-8213-52b84e965ac9

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @voicethread/nativescript-downloader --save
    \n

    OR

    \n
    ns plugin add @voicethread/nativescript-downloader
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application page by looking at apps/demo/src/plugin-demos/nativescript-downloader.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { Downloader, DownloadOptions, MessageData } from '@voicethread/nativescript-downloader';
    \n
      \n
    1. Create a downloader instance.
      2. \n
    \n
    const dp = new Downloader();
    \n
      \n
    1. Download a file.
      2. \n
    \n
    const dlfile = await dp.download({ url: 'https://some.domain.com/file.txt' });
    \n

    The only required option is the URL to be downloaded. You can also pass other options as listed in DownloadOptions below before starting the download.

    \n

    You can listen to events emitted by the download during operation in case you want to update a download status message/indicator or handle an error. Upon success, the plugin will return a File reference to the downloaded file located in the app cache directory for Android and the app document's directory for iOS, which can then be used directly by the dev without extra permissions for any other operations on the file.

    \n
    dp.on(Downloader.DOWNLOAD_STARTED, (payload: MessageData) => {
      console.log('started', payload?.data?.contentLength);
    });
    dp.on(Downloader.DOWNLOAD_PROGRESS, (payload: MessageData) => {
      console.log(' >>>>>  ', payload?.data?.progress, payload?.data?.url, payload?.data?.destinationFilename);
    });
    dp.on(Downloader.DOWNLOAD_COMPLETE, (payload: MessageData) => {
      console.log('finished', payload?.data?.filepath);
    });
    dp.on(Downloader.DOWNLOAD_ERROR, (payload: MessageData) => {
      console.log('ERROR!', payload?.data);
    });
    dp.download({ url: 'https://some.domain.com/file.txt' }).then((file: File) => {
      if (!file) {
        return console.error('Failed to download file!');
      }
      console.log('Finished downloading file ', file.path);
    });
    \n

    Supported Downloader Options

    \n
    interface DownloadOptions {
      url: string; //must be a valid url, usually https unless you allow http in your app
      request?: RequestOptions; //request header strings to be passed to the https connection
      destinationPath?: string; //must be a valid path for app to create a new file (existing directory with valid filename)
      destinationFilename?: string; //must be a string like XXXX[].[YYYYYY] without any path preceding
      copyPicker?: boolean; //present user with UI to choose destination directory to save a copy of download
      copyGallery?: boolean; //iOS only, if download has a recognized image/video file name extension, save a copy to iOS Photos, ignored on Android
      copyDownloads?: boolean; //Android only, adds a copy to device Downloads directory using legacy DIRECTORY_DOWNLOADS, or MediaStore for 29+
      notification?: boolean; //Android-only. Show system notification for download success/failure. defaults to false
    }
    \n

    For both platforms, the plugin will attempt to download the file with the filename/path supplied by the user in options, or try to find a filename to use from the url. In either case, if a file already exists at any of the output paths where a copy is being saved, it will instead append a '-#' to the filename before saving to ensure there is no conflict.

    \n

    Android Specifics

    \n

    Android apps will download files by default to the app's cache directory, which is the only directory supported by DownloadManager and no special permissions are necessary. This will correspond to android.content.Context.getExternalCacheDir() if the device has an sd card, or android.content.Context.getCacheDir() if not. This file can then be used directly for other purposes in the app without any additional permissions/requests.

    \n

    By default, the plugin disabled Android system notifications of downloads, which also requires you to add that permission to the Android Manifest like so:

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.DOWNLOAD_WITHOUT_NOTIFICATION\"/>
    \n

    You can choose to enable these notifications which will show the user progress and completion/failure notifications.

    \n

    Android version of the plugin supports two destination copy approaches:

    \n
      \n
    1. \n

      copyPicker will first download the file to the default cache directory, and then present the user with a picker UI so that they select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice.

      \n
      2. \n
    2. \n

      copyDownloads will save a copy to the device's Download directory in case the user wants to use that file in another application from an easy to find location. API versions > 28 use MediaStore, and no extra permissions are necessary. For API versions 28 and below, you'll need to ensure you have Android Manifest permissions defined using:

      \n
      3. \n
    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
      <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
    \n

    Tested and working on Android API 25-33.

    \n

    iOS Specifics

    \n

    iOS applications will download files by default to the application's documents directory, which is defined in Nativescript as knownFolders.documents() and does not require any extra permissions from the user. This also has the advantage of being the location where an application can make downloaded files visible to other apps once it has been configured as a document provider.

    \n

    The iOS version of the plugin supports two destination copy approaches:

    \n
      \n
    1. \n

      copyPicker will first download the file to the application documents directory, and then present the user with a picker UI so that they can select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice. Note: This is only available on iOS 14+

      \n
      2. \n
    2. \n

      copyGallery will save a copy to the device's Photos Gallery in case the user wants to use that file in another application from an easy to find location. This approach requires the user to grant photo library permission first in order to save the downloaded file. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding something like the following:

      \n
      <key>NSPhotoLibraryUsageDescription</key>
      <string>Requires access to save downloaded media to photo library.</string>
      \n
      3. \n
    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n

    Tested and working on iOS 12.x-16.x with caveats noted above.

    \n

    Acknowledgements

    \n

    This plugin was inspired by https://github.com/tobydeh/nativescript-download-progress

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":104}},"@nativescript/template-hello-world-ng":{"name":"@nativescript/template-hello-world-ng","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Angular Template

    \n

    This template creates a "Hello, world" NativeScript app using TypeScript and Angular.

    \n

    You can create a new app that uses this template with either the --template option.

    \n
    ns create my-hello-world-ng --template @nativescript/template-hello-world-ng
    \n

    Or the --ng shorthand.

    \n
    ns create my-hello-world-ng --ng
    \n
    \n

    Note: Both commands will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-hello-world-ng --template nativescript-app-templates/packages/template-hello-world-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":18,"lastWeek":104,"lastMonth":1142}},"@nativescript-dom/vue-types":{"name":"@nativescript-dom/vue-types","version":"1.0.15","license":"MIT","readme":"

    vue-types

    \n

    Typescript types for nativescript-vue 3 that work in .vue files to give you proper and complete intellisense in code editors.

    \n

    Installtion

    \n
      \n
    1. Install the core and vue types in your project
      2. \n
    \n
    npm install @nativescript-dom/core-types @nativescript-dom/vue-types --save-dev
    \n
      \n
    1. Configure tsconfig.json as below
      2. \n
    \n
    {
      \"compilerOptions\": {
        ...
        \"types\": [
            \"node\",
            \"@nativescript-dom/core-types\",
            \"@nativescript-dom/vue-types\"
            ],
    ...
      }
    \n

    That's it, enjoy a fully typed nativescript-vue experience.

    \n

    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":273}},"@nativescript/firebase-ui":{"name":"@nativescript/firebase-ui","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-ui

    \n

    Contents

    \n\n

    Intro

    \n

    With this plugin, you can use the FirebaseUI for Auth library in your NativeScript app. FirebaseUI for Auth is a library that provides a drop-in auth solution that handles the UI flows for signing up and signing in users with email and password, phone number, Google, Facebook, Twitter, and more.

    \n

    Set up your app for Firebase

    \n

    You need to set up your app for Firebase before you can enable FirebaseUI for Auth. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Add the FirebaseUI for Auth SDK to your app

    \n

    To add the FirebaseUI SDK to your app follow these steps:

    \n
      \n
    1. Install the npm install @nativescript/firebase-ui plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-ui
    \n
      \n
    1. Add the SDK by importing the @nativescript/firebase-messaging module once in your app, ideally in the main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-ui';
    \n

    Enable sign-in methods in the Firebase console

    \n

    Just like with @nativescript/firebase-auth, you need to go to the Firebase console and enable the sign-in methods you want to offer to your users. For more information on how to do that, see Set up sign-in methods.

    \n

    Invoke the FirebaseUI auth flow

    \n

    To invoke the FirebaseUI auth flow, call the show method on the UI object - returned by firebase().ui()- with an object of type Config specifying the auth options.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { AppleProvider, EmailProvider, GithubProvider, GoogleProvider, MicrosoftProvider, TwitterProvider, YahooProvider } from '@nativescript/firebase-ui';

    firebase()
        .ui()
        .show({
            providers: [
                new AppleProvider(),
                new GoogleProvider(),
                new TwitterProvider(),
                new GithubProvider(),
                new EmailProvider(),
                new MicrosoftProvider(),
                new YahooProvider()],
        })
        .then((result: IIdpResponse) => {
            console.log(result.user);
            console.log(result.hasCredentialForLinking);
            console.log(result.providerType);
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Sign out a user

    \n

    To sign out a user, call the signOut method on the UI object returned by firebase().ui().

    \n
    import { firebase } from '@nativescript/firebase-core';


    firebase()
        .ui()
        .signOut()
        .then(() => {
            console.log('signOut complete');
        })
        .catch((e) => {
            console.error('signOut error:', e);
        });
    \n

    API

    \n

    UI object

    \n

    The UI object provides the API for the FirebaseUI for Auth library and has the following members.

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    uiAndroid: com.firebase.ui.auth.AuthUI = firebase().ui().android;
    \n

    A readonly property that returns the UI object for Android.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    uiIOS: FUIAuth = firebase().ui().ios;
    \n

    A readonly property that returns the UI object for iOS.

    \n
    \n

    app

    \n
    import { firebase } from '@nativescript/firebase-core';

    app: FirebaseApp = firebase().ui().app;
    \n

    A readonly property that returns the FirebaseApp instance for your app.

    \n
    \n

    useEmulator()

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .useEmulator(host, port);
    \n

    Allows you to point a com.firebase.ui.auth.AuthUI instance to an emulator at a specific host and port.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamTypeDescription
    hoststringThe host of the emulator.
    portnumberThe port of the emulator.
    \n
    \n

    show()

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            console.log(result.user);
            console.log(result.hasCredentialForLinking);
            console.log(result.providerType);
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Presents auth UI with a list of federated identity providers (IDPs) that a user can choose from to sign in or sign up with. If the user chooses to sign in with a federated IDP, the sign-in flow will be completed using the IDP's sign-in SDK and the returned IDP credential will be linked to the current user.\nThis method returns a Promise that resolves with an IIdpResponse object.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamTypeDescription
    configConfigThe config parameter specifies auth options such as federated identity providers list to use for user auth and more.
    \n
    \n

    delete()

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .delete()
        .then(() => {
            console.log('delete complete');
        })
        .catch((e) => {
            console.error('delete error:', e);
        });
    \n

    Asynchronously deletes the current user's account.

    \n
    \n

    signOut()

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .signOut()
        .then(() => {
            console.log('signOut complete');
        })
        .catch((e) => {
            console.error('signOut error:', e);
        });
    \n

    Asynchronously signs out the current user.

    \n
    \n

    Config interface

    \n

    The Config object specifies the auth flow options such as the available identity providers, email link, the UI theme and other options.

    \n
    export interface Config {
    \tproviders: IProvider[];
    \tanonymousUsersAutoUpgrade?: boolean;
    \temailLink?: string;
    \tresetPasswordSettings?: IActionCodeSettings;
    \ttheme?: number; // Android only
    \tlockOrientation?: boolean;
    \ttosAndPrivacyPolicy?: {
    \t\ttos: string;
    \t\tprivacyPolicy: string;
    \t};

    \talwaysShowSignInMethodScreen?: boolean;
    }
    \n
    \n

    IIdpResponse object

    \n

    When the show method of the UI object resolves successfully, it returns the IIdpResponse object which has the following members.

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            responseAndroid: com.firebase.ui.auth.IdpResponse = result.android;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    A read-only property that returns the IdpResponse instance for Android.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            responseIOS: com.firebase.ui.auth.IdpResponse = result.ios;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    A read-only property that returns the IdpResponse instance for iOS.

    \n
    \n

    isNewUser

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            isNewUser: boolean = result.isNewUser;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Returns true if the user has just signed up for the first time, otherwise false.

    \n
    \n

    hasCredentialForLinking

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            hasCredentialForLinking: boolean = result.hasCredentialForLinking;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Returns true if any of the federated identity providers (IDPs) has credentials for the user to link Firebase account with, otherwise false.

    \n
    \n

    email

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            email: string = result.email;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Returns the emails the user used to sign in.

    \n
    \n

    idpSecret

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            idpSecret: boolean = result.idpSecret;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    (Twitter only)Returns the token secret received as a result of logging in with Twitter.

    \n
    \n

    idpToken

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            idpToken: boolean = result.idpToken;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Gets the token received as a result of logging in with the specified IDP.

    \n
    \n

    phoneNumber

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            phoneNumber: string = result.phoneNumber;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Gets the phone number used to sign in.

    \n
    \n

    providerType

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            providerType: string = result.providerType;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Gets the type of provider. e.g. {@link GoogleAuthProvider#PROVIDER_ID}.

    \n
    \n

    user

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
        .ui()
        .show(config)
        .then((result: IIdpResponse) => {
            user: User = result.user;
        })
        .catch((error) => {
            console.error('show error:', error);
        });
    \n

    Returns the user data object.

    \n
    \n

    User object

    \n

    This object represents the user data provided by a federated identity provider (IDP).

    \n

    android

    \n
    userAndroid: com.firebase.ui.auth.data.model.User = user.android;
    \n

    A read-only property that returns the User instance for Android.

    \n
    \n

    ios

    \n
    userIOS: FIRUser = user.ios;
    \n

    A read-only property that returns the FIRUser instance for iOS.

    \n
    \n

    name

    \n
    name: string = user.name;
    \n

    A read-only property that returns the user's display name.

    \n
    \n

    email

    \n
    email: string = user.email;
    \n

    A read-only property that returns the email of the user.

    \n
    \n

    phoneNumber

    \n
    phoneNumber: string = user.phoneNumber;
    \n

    A read-only property that returns the phone number of the user.

    \n
    \n

    photoUri

    \n
    photoUri: string = user.photoUri;
    \n

    A read-only property that returns the user's profile photo URL.

    \n
    \n

    providerId

    \n
    providerId: string = user.providerId;
    \n

    A read-only property that returns a string that uniquely identifies the identity provider providing the current user's data.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":2,"lastWeek":3,"lastMonth":146}},"@nativescript/firebase-app-check-debug":{"name":"@nativescript/firebase-app-check-debug","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-app-check-debug

    \n
    npm install @nativescript/firebase-app-check-debug
    \n
    \n

    Warning: The debug provider allows access to your Firebase resources from unverified devices. Don't use the debug provider in production builds of your app, and don't share your debug builds with untrusted parties.

    \n
    \n
    \n

    Note: (iOS) App Check requires you set the minimum iOS Deployment version in ios/Podfile to 11.0 or greater.

    \n
    \n

    What does it do

    \n

    App Check works alongside other Firebase services to help protect your backend resources from abuse, such as billing fraud or phishing. With App Check, devices running your app will use an app or device attestation provider that attests to one or both of the following:

    \n

    Requests originate from your authentic app\nRequests originate from an authentic, untampered device\nThis attestation is attached to every request your app makes to your Firebase backend resources.

    \n

    \"image\"

    \n

    This App Check module has built-in support for using the following services as attestation providers:

    \n

    DeviceCheck on iOS\nSafetyNet on Android\nApp Check currently works with the following Firebase products:

    \n

    Realtime Database\nCloud Storage\nCloud Functions (callable functions)\nThe official Firebase App Check documentation has more information, including about the iOS AppAttest provider, and testing/ CI integration, it is worth a read.

    \n

    Usage

    \n

    Activate

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { AppCheck } from '@nativescript/firebase-app-check-debug';

    AppCheck.setProviderFactory(); // call before the fb app is initialized 
    firebase.initializeApp()
    .then(app =>{
        firebase().appCheck().activate(true);
    })

    \n

    The only configuration possible is the token auto refresh. When you call activate, the provider stays the same but the token auto refresh setting will be changed based on the argument provided.

    \n

    You must call activate prior to calling any firebase back-end services for App Check to function.

    \n

    Automatic Data Collection

    \n

    App Check has an "tokenAutoRefreshEnabled" setting. This may cause App Check to attempt a remote App Check token fetch prior to user consent. In certain scenarios, like those that exist in GDPR-compliant apps running for the first time, this may be unwanted.

    \n

    If unset, the "tokenAutoRefreshEnabled" setting will defer to the app's "automatic data collection" setting, which may be set in the Info.plist or AndroidManifest.xml

    \n

    Using App Check tokens for non-firebase services

    \n

    The official documentation shows how to use getToken to access the current App Check token and then verify it in external services.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":2,"lastWeek":4,"lastMonth":826}},"@voicethread/nativescript-filepicker":{"name":"@voicethread/nativescript-filepicker","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript Filepicker \"apple\" \"android\"

    \n

    \"npm\"

    \n
    \n

    @voicethread/nativescript-filepicker

    \n
    \n

    This file picker plugin exports function filePicker() that supports both single and multiple selection (for iOS, multiple selection feature depends on OS version) using only native picker approaches.

    \n

    For iOS, filePicker() uses UIDocumentPicker to allow selection from publicly available files that can be accessed via iOS Files app. When selecting from Files, UIDocumentPicker supports multiple selections.

    \n

    iOS also has access to the galleryPicker() function which selects from the iOS Photos Gallery. This picker uses UIImagePicker for iOS 13 and below, which only supports single selections. PHPicker is used for iOS 14+ which does support multiple selections from the Photos Gallery. This picker does require user permission before allowing access to media on iOS.

    \n

    For Android, filePicker() uses Intents to open the stock file picker. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required in AndroidManifest. See demo for implementation details. Note: galleryPicker() will just call filePicker() internally.

    \n

    https://github.com/VoiceThread/nativescript-plugins/assets/20136906/ba6dcba1-bfd6-4a9d-a02e-f5351c252cdb

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @voicethread/nativescript-filepicker --save
    \n

    OR

    \n
    ns plugin install @voicethread/nativescript-filepicker
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to look at the demo app included in this repo.\nIn the apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/filepicker.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { Filepicker, MediaType } from '@voicethread/nativescript-filepicker';
    \n
      \n
    1. Create a filepicker instance.
      2. \n
    \n
    let picker = new Filepicker();
    \n
      \n
    1. Decide which types of files to include, and whether single or multiple selections allowed, then call the file picker.
      2. \n
    \n
    try {
      pickedFiles = await picker.filePicker(MediaType.IMAGE + MediaType.VIDEO + MediaType.AUDIO, true);
    } catch (err) {
      if (err) alert(err?.message);
    } finally {
      this.handleFiles(pickedFiles);
    }
    \n

    Android Permissions

    \n

    To request permissions in the demo app, we use the @nativescript-community perms plugin. While this is not required for all OS versions and their system pickers, just to be safe you should request it so user is aware.

    \n

    Be sure to have permissions add the following lines in AndroidManifest.xml if targeting API 26+.

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

      <application android:requestLegacyExternalStorage=\"true\" ... >
        ...
      </application>
    </manifest>
    \n

    For API 33+, you'll also need to add the following to the Android Manifest as well as request additional permissions:

    \n
    <uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />
    <uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
    <uses-permission android:name=\"android.permission.READ_MEDIA_AUDIO\" />
    \n

    Before launching the picker on API 33+, you'll need to request the following permissions to allow picker access to all file types:

    \n
    request('photo');
    request('video');
    request('audio');
    \n

    For an example, look at the pickAll function inside the filepicker.ts file in the dmeo app.

    \n

    iOS Permissions

    \n

    Using the plugin on iOS to select from the Photos gallery with galleryPicker() requires user to grant photo library permission first in order to access the selected image, otherwise it will return without any files. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Requires access to photo library to upload media.</string>
    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n

    Supported Picker File Types

    \n
    MediaType {
      IMAGE,
      AUDIO,
      VIDEO,
      ARCHIVE,
      DOCUMENT,
      ALL     =>   (IMAGE | AUDIO | VIDEO | ARCHIVE | DOCUMENT )
    }
    \n

    Each platform natively supports a different set of file/mime types, you can see those that are used by the plugin by looking at per-platform plugin package source.

    \n

    Android

    \n

    The Android stock file picker also supports selecting files from Google Photos and Google Drive if you have an account signed in on the Android device. Other document provider apps installed on your device may also offer additional services.

    \n

    Tested and working on Android API 25-33.

    \n

    iOS

    \n

    The iOS pickers also support selecting files from an associated iCloud account if the user has signed in on the device. Note that for a production application, you'll need to add the iCloud capability to your iOS application, and register that entitlement via the Apple Developer site for that package id. After that, update the relevant keys as shown in the demo application's Info.plist.

    \n

    Tested and working on iOS 12.x-16.x

    \n

    Additional Utils

    \n

    This plugin also exports a function getFreeMBs which a dev can use to check free space on the current device/app's cache folder which is where picked files get copied to. This is useful when working with larger video files to ensure you have enough free space before picking/copying the video file for use in your app.

    \n

    Acknowledgements

    \n

    This plugin was based on code from nativescript-mediafilepicker and ui-document-picker

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":56}},"@nativescript-dom/core-types":{"name":"@nativescript-dom/core-types","version":"1.0.29","license":"MIT","readme":"
    \n\n
    \n

    \nSingle, centralized TypeScript types for NativeScript web frameworks.\n

    \n

    NativeScript's core has been first-class Typescript since very long but sadly the benefits in terms of better auto-complete/intellisense for end-developers in code editors hasn't been properly propgated down especially when you use NativeScript with Vue, Svelte, React and other web frameworks. The main reason for this is that all these frameworks require all the core views to be like HTML elements. Hence it requires rewriting the types or generating them from core which are hard to maintain and do not have the best quality as compared to @nativescript/core. If types change in core or a new prop is added or some part of the JSDoc get's updated, it's not transferred down to the end-developer until a new version of the flavor is released.

    \n

    We need something better.

    \n

    A single types system

    \n

    Finally we have a solution to this. A single & undocked type system that combines DOM & core into a single interface that can be used across all web frameworks. So now we update the types in one place and everyone will get improved and better types automatically without doing any extra work or any flavor updates.

    \n
      \n
    • Types work like a bridge between core, dom & the web renderer
      • \n
    • JSDoc support, If some prop has JSDoc in core, it shows up in code-editor automatically, better core, better types
      • \n
    • Fully conforms & extends libdom.d.ts to provide complete HTML DOM types
      • \n
    • Prop filtering, props and attributes are filtered, only types that should be exposed in DOM are there. No pollution from @nativescript/core
      • \n
    • Easy to maintain, we just need to update types in one place and everyone gets better and updated types automatically.
      • \n
    • Easy to support new frameworks, takes 10 minutes at most.
      • \n
    • Work hand-in-hand with existing renderers, just install and get better intellisense
      • \n
    • Platform prefixed props such as android:text or ios:backgroundColor
      • \n
    • Fully typed Events for each View
      • \n
    • Support for Plugins
      • \n
    \n

    Installation

    \n

    Get the types packages for your project and boost DX of your team while developing NativeScript apps to the next level.

    \n

    @nativescript-dom/core-types

    \n

    Renderer agnostic typeScript definitions for @nativescript/core views exposed as HTML DOM elements

    \n

    @nativescript-dom/react-types

    \n

    TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for react

    \n

    @nativescript-dom/solidjs-types

    \n

    TypeScript definitions for@nativescript/core views exposed as JSX intrinsic elements for solidjs

    \n

    @nativescript-dom/svelte-types

    \n

    TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for svelte

    \n

    @nativescript-dom/vue-types

    \n

    TypeScript definitions for @nativescript/core views exposed as JSX intrinsic elements for vue

    \n

    @nativescript-dom/angular-types

    \n

    Typescript definitions for @nativescript/angular that expose @nativescript/coree views as DOM elements in HTML templates and provide 100% complete intellisense in code editors

    \n

    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":1,"lastWeek":10,"lastMonth":534}},"nativescript-plugin-firebase":{"name":"nativescript-plugin-firebase","version":"10.6.3","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    \"Firebase\"/

    \n
    \n

    Plugin version 10.0.0 works with NativeScript 6.1+. Using an older version? Stick to plugin version < 10.

    \n
    \n
    \n

    For NativeScript 7 compatibiliy, install @nativescript/firebase version 11+.

    \n
    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    or for NativeScript 7+:

    \n
    tns plugin add @nativescript/firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n
      \n
    • cd src.
      • \n
    • npm i (just answer 'n' to any prompts as they are ignored anyway).
      • \n
    • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
      • \n
    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n
      \n
    • dev will be selected if you run with either --env.dev, --env.development or --env.staging flags.
      • \n
    • prod will be selected if you run with either --env.prod or --env.production.
      • \n
    \n

    Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

    \n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":13,"lastWeek":325,"lastMonth":1425}},"nativescript-calendar-weekview":{"name":"nativescript-calendar-weekview","version":"1.0.6","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    NativeScript-Calendar-WeekView :calendar:

    \n

    NativeScript Calendar Week View provides week view and day view.It allow creating events and viewing them in week view.The plugin is highly under construction so any feedbacks and PRs are most Welcome.

    \n

    Under Construction

    \n
      \n
    • [x] Plugin Setup
      • \n
    • [x] WeekView with Properties Enabled
      • \n
    • [x] Adding of Event
      • \n
    • [ ] Delete Event
      • \n
    • [ ] Async Event
      • \n
    • [ ] Gesture Events
      • \n
    \n

    Demo Run

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    1 Day View3 Day View7 Day View
    \"alt\"alt\"alt
    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    alamkanak/Android-Week-View
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm i nativescript-calendar-weekview --save

    \n

    Usage

    \n

    XML:

    \n
    <Page  xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
        xmlns:CalendarWeekView=\"nativescript-calendar-weekview\" loaded=\"pageLoaded\" class=\"page\">
        <ActionBar title=\"NativeScript-Calendar-WeekView\" />
        <ScrollView>
             <StackLayout>
       <CalendarWeekView:CalendarWeekView headerColumnBackground=\"#ffffff\" todayBackgroundColor=\"#1848adff\" noOfVisibleDays=\"3\"  dayBackgroundColor=\"#05000000\" headerRowBackgroundColor=\"#ffefefef\" columnGap=\"30\" headerColumnTextColor=\"#8f000000\" headerRowPadding=\"30\" headerColumnPadding=\"30\" hourHeight=\"120\" textSize=\"30\" />
        </StackLayout>
        </ScrollView>
    </Page>
    \n

    TS:

    \n

    import {CalendarWeekView} from 'nativescript-calendar-weekview';
    public CalendarWeekView: CalendarWeekView;
    \n

    Angular + Typescript:

    \n
    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    registerElement(\"CalendarWeekView\", () => require(\"nativescript-calendar-weekview\").CalendarWeekView);

    @Component({
        selector: 'calendar-weekview-example',
        template: `
            <ActionBar title=\"Nativescript-Calendar-WeekView\"  style=\"background-color:#ED2831; color:white\">
            <ActionItem  (tap)=\"addEvent()\">
            <Label class=\"actionItemLabel\" text=\"Add\" color=\"white\" ></Label>
            </ActionItem>
            </ActionBar>
            <StackLayout>
            <CalendarWeekView #CalendarWeekView  headerColumnBackground=\"#ffffff\" todayBackgroundColor=\"#1848adff\" noOfVisibleDays=\"3\"  dayBackgroundColor=\"#05000000\" headerRowBackgroundColor=\"#ffefefef\" columnGap=\"30\" headerColumnTextColor=\"#8f000000\" headerRowPadding=\"30\" headerColumnPadding=\"30\" hourHeight=\"120\" textSize=\"30\" >
        </CalendarWeekView>
            </StackLayout>
        
            `
    })
    export class CalendarViewExample {

         @ViewChild(\"CalendarWeekView\") CalendarWeekView: ElementRef;

          addEvent() {
            let event = this.CalendarWeekView.nativeElement;
            // provide params in this order
            // addEvent(id,name,startYear, startMonth, startDay,startHour,startMinute,endYear,endMonth, endDay, endHour,endMinute,eventColor)
            event.addEvent(1, \"first Event\", 2017, 3, 14, 3, 3, 2017, 3, 14, 7, 5, \"#87d288\");
            event.addEvent(2, \"Second Event\", 2017, 3, 15, 5, 3, 2017, 3, 15, 7, 5, \"#59DBE0\");
            event.addEvent(3, \"Third Event\", 2017, 3, 14, 8, 3, 2017, 3, 14, 10, 5, \"#F66C4E\");

        }
        }

    }
    \n

    Attributes

    \n

    textSize - (int) - optional

    \n

    Attribute to specify the size of text in weekview.

    \n

    hourHeight - (int) - optional

    \n

    Attribute to specify the size of text in weekview.

    \n

    headerColumnPadding - (int) - optional

    \n

    Attribute to specify the padding between header columns in weekview.

    \n

    headerRowPadding - (int) - optional

    \n

    Attribute to specify the padding between header rows in weekview.

    \n

    headerColumnTextColor - (color string) - optional

    \n

    Attribute to specify the text color of column headers in weekview.

    \n

    columnGap - (int) - optional

    \n

    Attribute to specify the gap between columns in weekview.

    \n

    headerRowBackgroundColor - (color string) - optional

    \n

    Attribute to specify the background color of header rows in weekview.

    \n

    dayBackgroundColor - (color string) - optional

    \n

    Attribute to specify the color of day i.e. not today in weekview.

    \n

    noOfVisibleDays - (int) - optional

    \n

    Attribute to specify the visibility of days (i.e.1,3,7 days) in weekview.

    \n

    todayBackgroundColor - (color string) - optional

    \n

    Attribute to specify the color of today bacground in weekview.

    \n

    headerColumnBackground - (color string) - optional

    \n

    Attribute to specify the background color of column headers in weekview.

    \n

    Methods

    \n

    addEvent ( id, name, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, eventColor )

    \n

    Add Event with necessary Parameters passed and rendered in calendar.

    \n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":39}},"@nativescript/google-maps":{"name":"@nativescript/google-maps","version":"1.6.0","license":"Apache-2.0","readme":"

    @nativescript/google-maps

    \n

    A plugin that allows you to use the Maps SDK to access Google Maps features.

    \n

    Contents

    \n\n

    Prerequisites

    \n
      \n
    1. \n

      To use the Google Maps API, register your app in the Google API Console and obtain an API key.

      \n
      2. \n
    2. \n

      Add the Google Maps API key to your app.

      \n
      3. \n
    \n

    Android

    \n

    To add the API key for Android, modify the AndroidManifest.xml file and add the <meta-data> tag with the com.google.android.geo.API_KEY as its name and the key as the value.

    \n
    <application
      android:name=\"com.tns.NativeScriptApplication\"
      android:allowBackup=\"true\"
      android:icon=\"@mipmap/ic_launcher\"
      android:label=\"@string/app_name\"
      android:theme=\"@style/AppTheme\"
      android:hardwareAccelerated=\"true\">

      <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"yourKey\"/>
    </application>
    \n

    iOS

    \n

    To add the API key for iOS, add the TNSGoogleMapsAPIKey key and the API key as the value to the Info.plist file, located\nat App_Resources/iOS.

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
      <dict>
        <key>TNSGoogleMapsAPIKey</key>
        <string>yourKey</string>
      </dict>
    </plist>
    \n

    Installation

    \n
    npm install @nativescript/google-maps
    \n

    To use the plugin in the different NativeScript flavors, modify the main.ts to import and then register it.

    \n

    Use @nativescript/google-maps with core

    \n
      \n
    1. Register the plugin namespace with Page's xmlns attribute providing your prefix( map, for example).
      2. \n
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:map=\"@nativescript/google-maps\">
    \n
      \n
    1. Access the <MapView> using the the map prefix.
      2. \n
    \n
    <map:MapView ...
    \n

    Below is the complete code from the 2 preceding steps:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:map=\"@nativescript/google-maps\">
    \t<map:MapView
    \t\tlat=\"{{lat}}\"
    \t\tlng=\"{{lng}}\"
    \t\tzoom=\"{{zoom}}\"
    \t\tbearing=\"{{bearing}}\"
    \t\ttilt=\"{{tilt}}\"
    \t\tmapTap=\"{{onTap}}\"
    \t\tmapLongPress=\"{{onLongPress}}\"
    \t\tmarkerTap=\"{{onMarkerTap}}\"
    \t/>
    </Page>
    \n
      \n
    1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
      2. \n
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:map=\"@nativescript/google-maps\">
    \t<map:MapView
    \t\tlat=\"{{lat}}\"
    \t\tlng=\"{{lng}}\"
    \t\tzoom=\"{{zoom}}\"
    \t\tbearing=\"{{bearing}}\"
    \t\ttilt=\"{{tilt}}\"

    \t\tready=\"{{onReady}}\" 👈

    \t\tmapTap=\"{{onTap}}\"
    \t\tmapLongPress=\"{{onLongPress}}\"
    \t\tmarkerTap=\"{{onMarkerTap}}\"
    \t/>
    </Page>
    \n

    To use the plugin in the different NativeScript flavors, modify the main.ts to register it.

    \n

    Use @nativescript/google-maps with Angular

    \n
      \n
    1. Register the plugin by adding the GoogleMapsModule to the imports array of the AppModule, in app.module.ts as follows:
      2. \n
    \n
    import { GoogleMapsModule } from '@nativescript/google-maps/angular';

    // Registering
    @NgModule({
        imports: [
          GoogleMapsModule
        ],
        declarations: [
          AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
      \n
    1. Add MapView to your markup.
      2. \n
    \n
    <MapView
    \t(mapTap)=\"onTap($event)\"
    \t(mapLongPress)=\"onLongPress($event)\"
    \t(markerTap)=\"onMarkerTap($event)\"
    >
    </MapView>
    \n
      \n
    1. Manage
      2. \n
    \n
    <MapView
    \t(ready)=\"onReady($event)\" 
    \t(mapTap)=\"onTap($event)\"
    \t(mapLongPress)=\"onLongPress($event)\"
    \t(markerTap)=\"onMarkerTap($event)\"
    >
    </MapView>
    \n
      \n
    1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
      2. \n
    \n
    \n

    Use @nativescript/google-maps with Vue

    \n
      \n
    1. In the app.ts file, register the plugin by passing its reference to the use() method to the app instance.
      2. \n
    \n
    \n

    Vue

    \n
    import { createApp,registerElement } from 'nativescript-vue';
    import GoogleMaps from '@nativescript/google-maps/vue'

    import Home from './components/Home.vue';

    const app = createApp(Home)
    app.use(GoogleMaps)
    \n
    \n

    Note To handle the map features, see the GoogleMap object API.

    \n
    \n
    \n
      \n
    1. Add the MapView component to the markup.
      2. \n
    \n
    <MapView
    \t@ready=\"onReady\"
    \t@mapTap=\"onTap\"
    \t@mapLongPress=\"onLongPress\"
    \t@markerTap=\"onMarkerTap\"

    />
    \n
    \n

    Note To handle the map features, see the GoogleMap object API.

    \n
    \n
      \n
    1. To manage the mapping features, listen to the map view's ready event and get the reference to the GoogleMap instance from the event data.
      2. \n
    \n

    Control the camera

    \n

    To programmatically update the camera position, call the animateCamera() method on the GoogleMap object and pass it a CameraUpdate instance.

    \n
    import { CameraUpdate } from '@nativescript/google-maps';

    googleMap.animateCamera(
    \tCameraUpdate.fromCoordinate({
    \t\t\tlat: -32.1234,
    \t\t\tlng: 125.1234
    \t\t},
    \t\tgoogleMap.cameraPosition.zoom
    \t)
    );
    \n

    Set the map type

    \n

    To set the map type, set the mapType property to one of the MapType options.

    \n
    import { GoogleMap, MapType } from '@nativescript/google-maps';

    map: GoogleMap;
    map.mapType = MapType.Hybrid;
    \n

    See CameraUpdate for more methods you can call and pass to the animateCamera() method.

    \n

    Styling the map

    \n

    You can style the map's items, such as roads, parks, businesses, and other points of interest.

    \n

    Styling works only on the normal map type. Styling does not affect indoor maps.

    \n

    To style your map, use a JSON file generated by the Google Maps APIs Styling Wizard. In addition to changing the appearance of features, you can also hide features completely.

    \n
    [
      {
        \"featureType\": \"all\",
        \"stylers\": [
          { \"color\": \"#C0C0C0\" }
        ]
      },{
        \"featureType\": \"road.arterial\",
        \"elementType\": \"geometry\",
        \"stylers\": [
          { \"color\": \"#CCFFFF\" }
        ]
      },{
        \"featureType\": \"landscape\",
        \"elementType\": \"labels\",
        \"stylers\": [
          { \"visibility\": \"off\" }
        ]
      }
    ]
    \n

    To apply a custom style to your map you can set the mapStyle property on your GoogleMap object:

    \n
    import { GoogleMap } from '@nativescript/google-maps';

    map: GoogleMap;
    map.mapStyle = [{
    \t\"featureType\": \"landscape\",
    \t\"elementType\": \"labels\",
    \t\"stylers\": [
    \t\t{ \"visibility\": \"off\" }
    \t]
    }];
    \n

    API

    \n

    MapView Class

    \n

    Properties

    \n

    The following properties are available for adjusting the camera view on initialization:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    latnumberLatitude, in degrees
    lngnumberLongitude, in degrees
    zoomnumberZoom level (described here)
    bearingnumberBearing, in degrees
    tiltnumberTilt, in degrees
    \n

    Events

    \n

    MapView provides the following events:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    readyFires when the MapView is ready for use and provides a GoogleMap instance for managing mapping featurees.
    mapTapFires when a coordinate is tapped on the map
    mapLongPressFires when a coordinate is long-pressed on the map
    markerTapFires when a marker is tapped
    myLocationTapFires when 'My Location' is tapped
    myLocationButtonTapFires when the 'My Location' button is tapped
    markerDragStartFires when a marker begins dragging
    markerDraggingFires while a marker is being dragged
    markerDragEndFires when a marker ends dragging
    tileRenderingStartFires when tile rendering begins
    tileRenderingEndFires when tile rendering ends
    cameraPositionFires when the map viewport state changes, camera states include idle | start | moving
    circleFires when a circle is tapped
    polygonFires when a polygon is tapped
    polylineFires when a polyline is tapped
    poiFires when a POI is tapped
    groundOverlayFires when a ground overlay is tapped
    infoWindowTapFires when a marker's info window is tapped
    infoWindowLongPressFires when a marker's info window is long-pressed
    infoWindowCloseFires when a marker's info window is closed
    markerInfoContentsIf this method returns a view, it will be placed within the default info window frame.
    markerInfoWindowCalled when a marker is about to become selected, and provides an optional custom info window to use for that marker if this method returns a view.
    activeBuildingFires when a building is focused on
    activeLevelFires when the level of the focused building changes
    \n

    GoogleMap Object

    \n

    This class provides the mapping features and its instance is available from the MapView instance's ready event:

    \n
    function onReady(event: MapReadyEvent) {
    \tconst map: GoogleMap = event.map;
    }
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    buildingsEnabledbooleanEnables Buildings
    maxZoomLevelnumberMaximum level of zoom
    minZoomLevelnumberMinimum level of zoom
    myLocationEnabledbooleanEnables "My Location"
    trafficEnabledbooleanEnables traffic
    cameraPositionCameraPositionSee Camera Position
    projectionProjectionSee Projection
    uiSettingsIUISettingsSee UISettings Interface
    mapStyleStyle[]See Map Styles
    mapTypeMapTypeSee MapType
    nativeanyreadonly: Platform-specific instance of the GoogleMap class. com.google.android.gms.maps.GoogleMap for Android and GMSMapView for iOS.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    addMarker(marker: MarkerOptions)MarkerAdds a marker to the map
    removeMarker(marker: Marker)voidRemoves a marker from the map
    addTileOverlay(options: TileOverlayOptions)TileOverlayAdds a tile overlay to the map
    removeTileOverlay(overlay: TileOverlay)voidRemoves a tile overlay from the map
    addCircle(circle: CircleOptions)CircleAdds a circle to the map
    removeCircle(circle: Circle)voidRemoves a circle from the map
    addGroundOverlay(options: GroundOverlayOptions)GroundOverlayAdds a ground overlay to the map
    removeGroundOverlay(groundOverlay: GroundOverlay)Removes a ground overlay from the map
    addPolygon(options: PolygonOptions)PolygonAdds a polygon to the map
    removePolygon(polygon: Polygon)Removes a polygon from the map
    addPolyline(options: PolylineOptions)PolylineAdds a polyline to the map
    removePolyline(polyline: Polyline)voidRemoves a polyline from the map
    animateCamera(update: CameraUpdate)voidAnimates camera to a new position
    snapshot()Promise<ImageSource>Returns a platform-specific image of the map's current viewport
    clear()voidClears all objects added to the map
    \n

    Native Map Object

    \n

    GoogleMap gives you access to the platforms native map objects native | android | ios

    \n

    consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    Camera Position

    \n

    The map's current camera position can be read from the cameraPosition property of a GoogleMap object.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    targetCoordinateThe camera target is the location of the center of the map, specified as lat and lng.
    bearingnumberThe direction in which the camera points measured in degrees clockwise from north.
    tiltnumberThe viewing angle of the camera measured in degrees
    zoomnumberThe scale of the map
    \n

    CameraUpdate Class

    \n

    CameraUpdate provides multiple methods to create a target CameraPosition.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    fromCoordinate(coordinate: Coordinate, zoom: number)Returns a CameraUpdate from a single coordinate
    fromCoordinates(coordinates: Coordinate[], padding: number)Returns a CameraUpdate from multiple coordinates
    fromCoordinates(coordinates: Coordinate[], width: number, height: number, padding: number)Returns a CameraUpdate from multiple coordinates with specified height, width and padding
    fromCameraPosition(position: CameraPosition)Returns a CameraUpdate from a CameraPosition
    zoomIn()Returns a CameraUpdate that has zoomed in
    zoomOut()Returns a CameraUpdate that has zoomed out
    zoomTo(value: number)Returns a CameraUpdate that has zoomed to a value
    zoomBy(amount: number, point?: { x: number; y: number })Returns a CameraUpdate that has zoomed and panned
    scrollBy(x: number, y: number)Returns a panned CameraUpdate
    \n

    Projection

    \n

    A projection is used to translate between on screen location and geographic coordinates on the surface of the Earth.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    fromScreenLocation(point: { x: number; y: number })Returns the geographic location that corresponds to a screen location.
    getVisibleRegion()Gets a projection of the viewing frustum for converting between screen coordinates and geo-latitude/longitude coordinates.
    toScreenLocation(coordinate: Coordinate)Returns a screen location that corresponds to a geographical coordinate.
    containsCoordinate(coordinate: Coordinate)Returns true if the coordinate is visible in the current viewport.
    \n

    UISettings Interface

    \n

    You can adjust the maps UI settings from the GoogleMap object by configuring the following properties of the uiSettings property:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    compassEnabledbooleanWhether the compass is enabled or not
    indoorLevelPickerEnabledbooleanWhether the indoor level picker is enabled or not
    mapToolbarEnabledbooleanWhether the map toolbar is enabled or not
    myLocationButtonEnabledbooleanWhether the 'My Location' button is enabled or not
    rotateGesturesEnabledbooleanWhether the compass is enabled or not
    scrollGesturesEnabledbooleanWhether map scroll gestures are enabled or not
    tiltGesturesEnabledbooleanWhether map tilt gestures are enabled or not
    zoomGesturesEnabledbooleanWhether map zoom gestures are enabled or not
    zoomControlsEnabledbooleanWhether map zoom controls are enabled or not
    scrollGesturesEnabledDuringRotateOrZoombooleanWhether scroll gestures are enabled while rotating or zooming
    \n

    MapType enum

    \n

    The Google Maps API offers the following five types of maps:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    NoneNo tiles. The map is rendered as an empty grid with no tiles loaded.
    NormalTypical road map. Shows roads, some features built by humans, and important natural features such as rivers. Road and feature labels are also visible.
    SatelliteSatellite photograph data. Road and feature labels are not visible.
    TerrainTopographic data. The map includes colors, contour lines and labels, and perspective shading. Some roads and labels are also visible.
    HybridSatellite photograph data with road maps added. Road and feature labels are also visible.
    \n

    Markers

    \n

    Adding Markers

    \n

    You can create markers using the GoogleMap's object addMarker method by passing it a MarkerOptions object.

    \n
    function addMarker(map: GoogleMap, markerOptions: MarkerOptions): Marker {
    \treturn map.addMarker(markerOptions);
    }
    \n

    addMarker returns a Marker

    \n

    Marker Object

    \n

    It implements the [MarkerOptions] interface and has the following additional methods.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturns
    hideInfoWindow()void
    showInfoWindow()void
    \n

    MarkerOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    positionCoordinateThe position of the marker, specified as lat and lng
    colorstring | ColorColor of the marker, shades are unavailable.
    opacitynumberOpacity of the marker.
    titlestringA string that's displayed in the info window when the user taps the marker
    snippetstringAdditional text that's displayed below the title
    iconImageSource | UIImage | BitmapA image that's displayed in place of the default marker image
    draggablebooleanSet to true if you want to allow the user to move the marker. Defaults to false
    flatbooleanBy default, markers are oriented against the screen, and will not rotate or tilt with the camera. Flat markers are oriented against the surface of the earth, and will rotate and tilt with the camera
    rotationbooleanThe orientation of the marker, specified in degrees clockwise
    anchorUnumberHorizontal icon offset from the marker position
    anchorVnumberVertical icon offset from the marker position
    userDataanyAdditional information assigned to the marker
    zIndexnumberZ-index of the marker
    \n

    Coordinate

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    latnumber
    lngnumber
    \n

    Removing Markers

    \n

    To remove a marker from the map, call the removeMarker() method on the GoogleMap instance and pass it the marker to be removed.

    \n
    function removeMarker(map: GoogleMap, marker: Marker) {
    \tmap.removeMarker(marker);
    }
    \n

    Circles

    \n

    Adding Circles

    \n

    To add a circle to the map, call the addCircle() method and specify its properties with a CircleOptions object.

    \n
    function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
    \treturn map.addCircle(circleOptions);
    }
    \n

    CircleOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    centerCoordinate
    fillColorColor | string
    radiusnumber
    strokeColorColor | string
    strokePatternPatternItem & Partial<NativeObject>[]
    strokeWidthnumber
    tappableboolean
    visibleboolean
    zIndexnumber
    userData{ [key: string]: any }
    \n

    Removing Circles

    \n

    You can remove a circle using the GoogleMap's removeCircle() method.

    \n
    function removeCircle(map: GoogleMap, circle: Circle) {
    \tmap.removeCircle(circle);
    }
    \n

    Polygons

    \n

    Adding Polygons

    \n

    You can create polygons using the GoogleMap's object addPolygon() method by passing in the specified PolygonOptions.

    \n
    function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
    \treturn map.addPolygon(polygonOptions);
    }
    \n

    PolygonOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    pointsCoordinate[]
    holesCoordinate[]
    tappableboolean
    strokeWidthnumber
    strokeColorColor | string
    fillColorColor | string
    strokePatternPatternItem & Partial<NativeObject>[]
    zIndexnumber
    geodesicboolean
    strokeJointTypeJointType
    visibleboolean
    userData{ [key: string]: any }
    \n

    Removing Polygons

    \n

    You can remove a Polygon using the GoogleMap's removePolygon function, like so:

    \n
    function removePolygon(map: GoogleMap, polygon: Polygon) {
    \tmap.removePolygon(polygon);
    }
    \n

    Polylines

    \n
    Adding Polylines
    \n

    You can create Polylines using the GoogleMap's object addPolyline function by passing it a PolylineOptions object.

    \n
    function addPolyline(map: GoogleMap, polylineOptions: PolylineOptions): Polyline {
    \treturn map.addPolyline(polylineOptions);
    }
    \n

    PolylineOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    widthnumber
    pointsCoordinate[]
    tappableboolean
    geodesicboolean
    visibleboolean
    zIndexnumber
    jointTypeJointType
    patternPatternItem & Partial<NativeObject>[]
    colorColor | string
    startCapCap & Partial<NativeObject>
    endCapCap & Partial<NativeObject>
    userData{ [key: string]: any }
    \n

    Removing Polylines

    \n

    You can remove a Polyline using the GoogleMap's removePolyline function, like so:

    \n
    function removePolyline(map: GoogleMap, polyline: Polyline) {
    \tmap.removePolyline(polyline);
    }
    \n

    Ground Overlays

    \n
    Adding Ground Overlays
    \n

    You can create Ground Overlays using the GoogleMap's object addGroundOverlay function by passing in the specified GroundOverlay Options.

    \n
    function addGroundOverlay(map: GoogleMap, groundOverlayOptions: GroundOverlayOptions): GroundOverlay {
    \treturn map.addGroundOverlay(groundOverlayOptions);
    }
    \n

    GroundOverlayOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    zIndexnumber
    visibleboolean
    transparencynumber
    positionCoordinate
    boundsCoordinateBounds
    tappableboolean
    bearingnumber
    imageImageSource
    userDataany
    widthnumber
    heightnumber
    anchorUnumber
    anchorVnumber
    \n

    Removing Ground Overlays

    \n

    You can remove a GroundOverlay using the GoogleMap's removeGroundOverlay function, like so:

    \n
    function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
    \tmap.removeGroundOverlay(groundOverlay);
    }
    \n

    Tile Overlays

    \n

    Adding Tile Overlays

    \n

    You can create Tile Overlays using the GoogleMap's object addTileOverlay function by passing in the specified TileOverlay Options.

    \n
    function addTileOverlay(map: GoogleMap, tileOverlayOptions: TileOverlayOptions): TileOverlay {
    \treturn map.addTileOverlay(tileOverlayOptions);
    }
    \n

    TileOverlayOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyType
    fadeInboolean
    transparencynumber
    visibleboolean
    tileProviderTileProvider & Partial<NativeObject>
    zIndexnumber
    clearTileCache()void
    \n

    Setting tile overlay options after the tile overlay has been added to the map can have no effect on the tile overlay. To update the tile overlay, you may need to call clearTileCache().

    \n

    Removing Tile Overlays

    \n

    You can remove a TileOverlay using the GoogleMap's removeTileOverlay function, like so:

    \n
    function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
    \tmap.removeTileOverlay(tileOverlay);
    }
    \n

    Tile Providers

    \n

    Tile providers are objects that provide tiles to be used in a Tile Overlay.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderDescription
    TileProviderBase class for tile providers
    UrlTileProviderTile provider that returns a tile from a URL
    \n

    For example a UrlTileProvider can be created like so:

    \n
    const tileProvider = new UrlTileProvider((x, y, z) => {
    \treturn `https://tiles.example.com/${z}/${x}/${y}.png`;
    });
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":6,"lastWeek":68,"lastMonth":986}},"@nativescript-community/observable":{"name":"@nativescript-community/observable","version":"2.0.11","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/observable
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    this is a simple subclass of TNS Observable class which let the observable know when a listener was added or removed.\nVery useful to create native object to listen for native event only when necessary

    \n","downloadStats":{"lastDay":99,"lastWeek":403,"lastMonth":1083}},"@nativescript-community/xml-ui-compiler":{"name":"@nativescript-community/xml-ui-compiler","version":"1.0.0-alpha.3","license":"Apache-2.0","readme":"

    @nativescript-community/xml-ui-compiler

    \n

    \"npm\"\n\"npm\"

    \n

    A Node compiler that converts NativeScript XML view content to AST.

    \n

    Installation

    \n
    npm install @nativescript-community/xml-ui-compiler --save-dev
    \n

    Usage

    \n
    import fs from 'fs';
    import generate from '@babel/generator';
    import { compile } from '@nativescript-community/xml-ui-compiler';

    const filePath = 'views/home/home.xml';
    const content = fs.readFileSync(filePath, 'utf8');

    const { output } = compile(content, filePath, 'android');

    // Convert AST to JS and print
    console.log(generate(output).code);
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":71}},"@nativescript/haptics":{"name":"@nativescript/haptics","version":"3.0.2","license":"Apache-2.0","readme":"

    @nativescript/haptics

    \n

    A plugin that allows you to add haptics to your app.

    \n
    \n

    Playing haptics can engage people's sense of touch and bring their familiarity with the physical world into your app or game.\n~ Developer docs

    \n
    \n

    Thanks to Eddy Verbruggen for providing nativescript-taptic-engine as this continues its evolution by streamlining the API and adding Android support, inspired by react-native-haptic-feedback.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @nativescript/haptics
    \n

    Use @nativescript/haptics

    \n

    Find an example of @nativescript/haptics usage here on StackBlitz.

    \n

    API

    \n

    The plugin provides the API below.

    \n

    isSupported()

    \n
    isHapticsSupported: boolean = Haptics.isSupported()
    \n

    Checks if haptics is supported on the device.

    \n
    \n

    is6SAnd6SPlusSupported()

    \n
    isHapticsSupported: boolean = Haptics.is6SAnd6SPlusSupported()
    \n

    Checks if Haptics is supported on iOS.

    \n
    \n

    selection()

    \n
    import { Haptics } from \"@nativescript/haptics\";

    Haptics.selection();
    \n

    notification()

    \n
    import { Haptics, HapticNotificationType } from \"@nativescript/haptics\";

    Haptics.notification(HapticNotificationType.ERROR);
    \n

    Use notification feedback generators to indicate success, failure, and warning.

    \n

    Other haptic notification types are:

    \n
      \n
    • SUCCESS(default)
      • \n
    • WARNING
      • \n
    \n

    impact()

    \n
    import { Haptics, HapticImpactType } from \"@nativescript/haptics\";

    Haptics.impact(HapticImpactType.HEAVY);
    \n

    Use impact feedback generators to indicate that an impact has occurred.\nFor example, you might trigger impact feedback when a user interface object\ncollides with something or snaps into place.

    \n

    There are 3 impact types:

    \n
      \n
    • LIGHT
      • \n
    • MEDIUM (default)
      • \n
    • HEAVY.
      • \n
    \n

    HapticsFallback

    \n

    To use the haptics fallbacks, check if there is support:

    \n
    if (!Haptics.isSupported() && Haptics.is6SAnd6SPlusSupported()) {
      // use HapticsFallback
    }
    \n

    BEWARE This uses an undocumented feature that may get your app rejected when reviewed by Apple.\nPeople have used this approach without problems though.

    \n

    weakBoom()

    \n

    This triggers the same effect as the 'Peek' in 'Peek & Pop', a very brief vibration.

    \n
    import { HapticsFallback } from \"@nativescript/haptics\";

    HapticsFallback.weakBoom();
    \n

    strongBoom()

    \n
    import { HapticsFallback } from \"@nativescript/haptics\";

    HapticsFallback.strongBoom();
    \n

    This triggers the Pop effect of Peek & Pop, which is a bit more profound than the Peek effect.

    \n

    burst()

    \n
    import { HapticsFallback } from \"@nativescript/haptics\";

    HapticsFallback.burst();
    \n

    This triggers the Nope effect you get when force-touching a home icon that doesn't have any action. It's a short burst of 3-ish 'weak booms'.

    \n

    Changelog

    \n
      \n
    • 3.0.0 Moved to @nativescript/haptics and added Android support. Adjusted naming conventions.
      • \n
    • 2.1.0 Modernized the code a little, migrated to the plugin seed structure, and added a Vue demo.
      • \n
    • 2.0.0 Added official API for iPhone 7. Moved the old API to TapticEngineUnofficial.*. Requires Xcode 8 to build.
      • \n
    • 1.0.0 Initial release, unofficial API only. Compatible with any Xcode version.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":66}},"@nativescript/keyboard-toolbar":{"name":"@nativescript/keyboard-toolbar","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/keyboard-toolbar

    \n
    npm install @nativescript/keyboard-toolbar
    \n

    Thank you to Eddy Verbruggen for all the excellent work!

    \n

    iOS and Android running the included demo - much better framerate on YouTube!

    \n

    What The Keyboard!?

    \n

    Glad you asked 😅!

    \n
      \n
    • ⌨️ Mobile keyboards are a compromise at best. Let's make them easier to work with by attaching a toolbar on top of it.
      • \n
    • 🥅 Design goal = declare any NativeScript layout and stick it on top of the soft keyboard.
      • \n
    • 🏒 Make the toolbar stick to the keyboard, no matter its shape or form.
      • \n
    • 🙅‍♀️ No third party dependencies; use only stuff from @nativescript/core (which your app already has).
      • \n
    • ♾ Allow multiple toolbar designs on one page.
      • \n
    \n

    General usage instructions

    \n

    The plugin works by grabbing your declared toolbar layout and moving it off-screen.

    \n

    Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

    \n

    For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

    \n

    So if your layout structure is currently this:

    \n
    <ActionBar/>
    <StackLayout/>
    \n

    Change it to this:

    \n
    <ActionBar/>
    <GridLayout>
        <StackLayout/>
        <Toolbar/>
    </GridLayout>
    \n

    Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

    \n
    \n

    Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

    \n
    \n

    Usage with Core

    \n

    Mind the comments in the example below.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"@nativescript/keyboard-toolbar\">

        <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
        <GridLayout>

            <StackLayout>
                <Label text=\"Some text\"/>
                <!-- Add an 'id' property that we can reference below -->
                <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
            </StackLayout>

            <!-- The 'forId' and 'height' properties are mandatory -->
            <kt:Toolbar forId=\"priceTextField\" height=\"44\">
                <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                    <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
                </GridLayout>
            </kt:Toolbar>

        </GridLayout>
    </Page>
    \n

    Usage with Angular

    \n

    Register the plugin in a specific module, or globally in the app module:

    \n
    import { registerElement } from \"@nativescript/angular\";
    import { Toolbar } from 'nativescript-keyboard-toolbar';
    registerElement(\"KeyboardToolbar\", () => Toolbar);
    \n

    In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

    \n
    <ActionBar>
      <TextField #textField1 id=\"tf1\"></TextField>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <!-- Add whatever visible layout you need here -->
      <ListView [items]=\"items\">
        <ng-template let-item=\"item\">
          <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
        </ng-template>
      </ListView>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
       The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tf1\" height=\"44\">
        <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
          <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
          <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
          <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
        </GridLayout>
      </KeyboardToolbar>
    </GridLayout>
    \n

    Usage with Vue

    \n

    Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

    \n
    import Vue from \"nativescript-vue\";
    Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
        <GridLayout>

          <StackLayout>
            <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
          </StackLayout>

          <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
             The '    forId' and 'height' properties are mandatory -->
          <KeyboardToolbar forId=\"tv2\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
              <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
              <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
              <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
            </GridLayout>
          </KeyboardToolbar>

        </GridLayout>
      </Page>
    </template>

    <script>
      import { Frame } from \"@nativescript/core\";

      export default {
        methods: {
          appendToTextView2(args) {
            const textView = Frame.topmost().currentPage.getViewById(\"tv2\");
            textView.text += args.object.text;
          }
        }
      }
    </script>
    \n

    What about IQKeyboardManager?

    \n

    If you have IQKeyboardManager installed for better keyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset IQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

    \n

    You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

    \n

    Future work

    \n
      \n
    • Orientation-change support.
      • \n
    • Dismiss keyboard on iOS when tapping outside the keyboard (configurable). Fot the time being you can add and configure IQKeyboardManager as mentioned above.
      • \n
    • Auto-scroll the view if the keyboard overlaps the text field (on iOS you can already do that with IQKeyboardManager).
      • \n
    • Modal support on Android (currently you can't use the toolbar in a modal because the toolbar is behind the modal)
      • \n
    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":98}},"@nativescript-community/ui-svg":{"name":"@nativescript-community/ui-svg","version":"0.1.19","license":"ISC","readme":"\n\n

    @nativescript-community/ui-svg

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Adds support for SVGs in your NativeScript apps.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-svg

    \n

    \n

    Configuration

    \n

    For now only vue (and core) is supported.

    \n
    import CanvasSVG from '@nativescript-community/ui-svg/vue';
    Vue.use(CanvasSVG);
    \n

    It works in 3 ways!.

    \n

    CanvasSVG extending Canvas

    \n
    <CanvasSVG>
        <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"100%\" stretch=\"aspectFit\" />
    </CanvasSVG>
    \n

    or SVGView which is a basic svg view with support for auto sizing

    \n
    <SVGView height=\"30%\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" stretch=\"aspectFit\" backgroundColor=\"red\" />
    \n

    Or within and Canvas View extending CanvasView like CanvasLabel

    \n
    <CanvasLabel>
     <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
            <CSpan text=\"test\" fontWeight=\"bold\" />
            <CSpan text=\"test2\" color=\"#ccc\" fontSize=\"16\" />
        </CGroup>
        <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"10\" stretch=\"aspectFit\" />
    </CanvasSVG>
    \n

    Examples:

    \n
      \n
    • Basic\n
        \n
      • A basic SVG example
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":45,"lastWeek":312,"lastMonth":1358}},"@valor/nativescript-in-app-review":{"name":"@valor/nativescript-in-app-review","version":"1.1.0","license":"Apache-2.0","readme":"

    @valor/nativescript-in-app-review

    \n

           \n

    \n
    ns plugin add @valor/nativescript-in-app-review
    \n

    Usage

    \n
    import { InAppReview } from '@valor/nativescript-in-app-review';

    InAppReview.requestReviewPopup();
    \n

    Quotas and limitations

    \n

    Due to limitations on both Android and iOS, there are no guarantees that the user will be presented with the popup after\ninvoking the requestReviewPopup() method. And there's no way of knowing if the user was prompted for a review or not,\nnor if they left a review. Because of that, it's not recommended to invoke the method upon an user action (like a button\ntap).

    \n

    Android

    \n
      \n
    • Production builds have a quota of around 1 prompt per month;
      • \n
    • Development builds will never show the popup;
      • \n
    • Internal testing builds will always show the popup, however, there's a bug on the play store that requires its app\ndata to be cleaned up after a successful prompt. You can read more about the issue and the workaround\nhere;
      • \n
    \n

    You can read more about quotas and testing for Android here.

    \n

    iOS

    \n
      \n
    • Production builds have a quota of 3 prompts per year for each unique build number (i.e., bundle id).
      • \n
    • Development builds will always show the popup.
      • \n
    • TestFlight builds will never show the popup.
      • \n
    \n

    You can read more about quotas and testing for iOS here.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":21,"lastWeek":185,"lastMonth":760}},"nativescript-phone":{"name":"nativescript-phone","version":"3.0.3","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":109,"lastWeek":1260,"lastMonth":5253}},"@nativescript/template-drawer-navigation":{"name":"@nativescript/template-drawer-navigation","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Side drawer navigation
      • \n
    • Five blank pages hooked to the drawer navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-drawer-js --template @nativescript/template-drawer-navigation
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-drawer-js --template nativescript-app-templates/packages/template-drawer-navigation
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a folder that is used for setting RadSideDrawer instance as an application root:

    \n
      \n
    • /app/app-root/app-root - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
      • \n
    \n

    RadSideDrawer has the following component structure:

    \n
      \n
    • RadSideDrawer - The component to display a drawer on the page.
      • \n
    • RadSideDrawer.drawerContent - Part of the RadSideDrawer, it holds a custom component drawer that displays the contents of the drawer.
      • \n
    • RadSideDrawer.mainContent - Part of the RadSideDrawer, it holds the main content for the page.
      • \n
    \n

    The template has the following blank page modules:

    \n
      \n
    • /app/home/home-page
      • \n
    • /app/browse/browse-page
      • \n
    • /app/search/search-page
      • \n
    • /app/featured/featured-page
      • \n
    • /app/settings/settings-page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":2,"lastWeek":14,"lastMonth":499}},"jgraffite-typescript-modules":{"name":"jgraffite-typescript-modules","version":"1.7.5","license":"MIT","readme":"

    JgraffiteTypescriptModules

    \n

    This library was generated with Angular CLI version 11.2.12.

    \n

    Code scaffolding

    \n

    Run ng generate component component-name --project jgraffite-typescript-modules to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project jgraffite-typescript-modules.

    \n
    \n

    Note: Don't forget to add --project jgraffite-typescript-modules or else it will be added to the default project in your angular.json file.

    \n
    \n

    Build

    \n

    Run ng build jgraffite-typescript-modules to build the project. The build artifacts will be stored in the dist/ directory.

    \n

    Publishing

    \n

    After building your library with ng build jgraffite-typescript-modules, go to the dist folder cd dist/jgraffite-typescript-modules and run npm publish.

    \n

    Running unit tests

    \n

    Run ng test jgraffite-typescript-modules to execute the unit tests via Karma.

    \n

    Further help

    \n

    To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

    \n","downloadStats":{"lastDay":0,"lastWeek":59,"lastMonth":181}},"nativescript-device-uuid":{"name":"nativescript-device-uuid","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript UUID

    \n

    This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

    \n

    Uses SAMKeychain Cocoa Pod.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    yarn add nativescript-device-uuid
    ns plugin add nativescript-device-uuid
    npm install nativescript-device-uuid
    \n

    Usage

    \n

    JavaScript

    \n
      const nsUuid = require(\"nativescript-device-uuid\");

      const uuid = nsUuid.getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n

    TypeScript

    \n
      import { getUUID } from 'nativescript-device-uuid';

      const uuid = getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":7}},"@nativescript-community/ui-popover":{"name":"@nativescript-community/ui-popover","version":"0.1.9","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-popover

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n Popover plugn
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-popover

    \n

    \n

    API

    \n

    Using Svelte

    \n
      import { showPopover } from '@nativescript-community/ui-popover/svelte';

      showPopover({
        view: YourInnerSvelteComponent,
        props: {}
      });
    \n

    Using Vue

    \n
      import PopoverPlugin from '@nativescript-community/ui-popover/vue';
      Vue.use(PopoverPlugin);

      //in your components
      this.$showPopover(YourInnerVueComponent, {
        props: {}
      });
    \n

    Methods

    \n
     interface PopoverOptions {
        anchor: View;
        vertPos?: VerticalPosition;
        horizPos?: HorizontalPosition;
        x?: number;
        y?: number;
        fitInScreen?: boolean;
        onDismiss?: Function;
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    showPopover(options: PopoverOptions)voidProgramatically open the popover
    closePopover(options: PopoverOptions)voidProgramatically close the popover
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":1,"lastWeek":7,"lastMonth":149}},"@nativescript-community/ui-range-seek-bar":{"name":"@nativescript-community/ui-range-seek-bar","version":"2.0.3","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-range-seek-bar

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript Range Seek Bar widget
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-range-seek-bar

    \n

    Based on

    \n

    TTRangeSlider for iOS

    \n

    Crystal Range Seekbar for Android

    \n

    \n

    API

    \n

    Events

    \n
      \n
    • valueChanged
      \nTriggered when user has changed minimum value or maximum value on the Range Seek Bar.
      • \n
    • finaValueChanged
      \nTriggered when user has finished touch on the Range Seek Bar.
      • \n
    \n

    Instance Properties

    \n
      \n
    • minValue - Number
      \nGets or sets minimum value of the Range Seek Bar.
      • \n
    • maxValue - Number
      \nGets or sets maximum value of the Range Seek Bar.
      • \n
    • valueMin - Number
      \nGets or sets minimum start value of the Range Seek Bar.
      • \n
    • valueMax - Number
      \nGets or sets maximum start value of the Range Seek Bar.
      • \n
    • minRange - Number
      \nGets or sets minimum range of two thumb.
      • \n
    • step - Number
      \nGets or sets minimum steps between range, default is 1.
      • \n
    • cornerRadius - Number
      \nGets or sets corner radius of two thumb.
      • \n
    • barHeight - Number
      \nGets or sets bar height of the Range Seek Bar.
      • \n
    • barColor - Color
      \nGets or sets bar color of the Range Seek Bar.
      • \n
    • barHighlightColor - Color
      \nGets or sets bar highlight color of the Range Seek Bar.
      • \n
    • thumbColor - Color
      \nGets or sets color of two thumb.
      • \n
    \n

    \n

    Usage in Angular

    \n
      \n
    • Import NativeScriptUIRangeSeekBarModule in NgModule:
      • \n
    \n
    import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptUIRangeSeekBarModule,
            //......
    \t],
        //......
    })
    \n
    <!-- app.component.html -->
    <StackLayout>
        <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [valueMin]=\"rangeSeekBarProp.valueMin\"
            [valueMax]=\"rangeSeekBarProp.valueMax\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
            (valueChanged)=\"valueChanged($event)\" (finaValueChanged)=\"finaValueChanged($event)\" class=\"range-seek-bar\">    </RangeSeekBar>
    </StackLayout>
    \n
    /*app.css*/
    .range-seek-bar {
        bar-color: #8990C4;
        bar-highlight-color: #2434AD;
        thumb-color: #1A246D;
        bar-height: 10;
        corner-radius: 30;
    }
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

        public rangeSeekBarProp = {
            minValue: 0,
            maxValue: 100,
            valueMin: 0,
            valueMax: 100,
            minRange: 0,
            step: 1
        };

        constructor() { }

        valueChanged(event: RangeSeekBarEventData) {
            console.log(\"valueChanged: \", event.value);
        }

        finaValueChanged(event: RangeSeekBarEventData) {
            console.log(\"finaValueChanged: \", event.value);
        }
    }
    \n

    Examples:

    \n
      \n
    • Basic range-seek-bar\n
        \n
      • A basic sliding range-seek-bar.
        • \n
      \n
      • \n
    • All Sides\n
        \n
      • An example of range-seek-bars on all sides: left, right, top, bottom.
        • \n
      \n
      • \n
    \n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@nativescript-community/ui-range-seek-bar.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":102}},"@nstudio/nativescript-appcues":{"name":"@nstudio/nativescript-appcues","version":"1.0.1","license":"Apache-2.0","readme":"

    Appcues NativeScript Plugin

    \n

    Appcues NativeScript Plugin allows you to integrate Appcues experiences into your iOS and Android devices.

    \n\n

    🚀 Getting Started

    \n

    Prerequisites

    \n

    Android - your application's App_Resources/Android/app.gradle must have a compileSdkVersion of 33+ and minSdkVersion of 21+

    \n
    android {
        compileSdkVersion 33

        defaultConfig {
            minSdkVersion 21
        }
    }
    \n

    iOS - your application must target iOS 11+ to install the SDK, and iOS 13+ to render Appcues content. Update the App_Resources/iOS/build.xcconfig to set the deployment target, if needed. In the application's App_Resources/iOS/Podfile, include at least this minimum version.

    \n
    # Podfile
    platform :ios, '11.0'
    \n

    Installation

    \n

    In your app's root directory, run:

    \n
    npm install @nstudio/nativescript-appcues
    \n

    One Time Setup

    \n

    Initializing the SDK

    \n

    An instance of the Appcues SDK should be initialized when your app launches.

    \n
    import { Application } from '@nativescript/core';
    import { AppcuesSDK } from '@nstudio/nativescript-appcues';

    Application.on(Application.launchEvent, () => {
        AppcuesSDK.init('APPCUES_ACCOUNT_ID', 'APPCUES_APPLICATION_ID');
    });
    \n

    Initializing the SDK requires you to provide two values, an Appcues account ID, and an Appcues mobile application ID. These values can be obtained from your Appcues settings. Refer to the help documentation on Registering your mobile app in Studio for more information.

    \n

    Identifying Users

    \n

    In order to target content to the right users at the right time, you need to identify users and send Appcues data about them. A user is identified with a unique ID.

    \n
    // Identify a user
    AppcuesSDK.identify('my-user-id')
    // Identify a user with property
    AppcuesSDK.identify('my-user-id', { company: \"Appcues\"})
    \n

    Tracking Screens and Events

    \n

    Events are the “actions” your users take in your application, which can be anything from clicking a certain button to viewing a specific screen. Once you’ve installed and initialized the Appcues NativeScript Plugin, you can start tracking screens and events using the following methods:

    \n
    // Track event
    AppcuesSDK.track(\"Sent Message\")
    // Track event with property
    AppcuesSDK.track(\"Deleted Contact\", { id: 123 })

    // Track screen
    AppcuesSDK.screen(\"Contact List\")   
    // Track screen with property
    AppcuesSDK.screen(\"Contact List\", { reference: \"abc\" })
    \n

    📝 Documentation

    \n

    API is available here.

    \n
    \n

    Full documentation is available at https://docs.appcues.com/

    \n
    \n

    🎬 Examples

    \n

    The demo example in this repository contains example iOS/Android app to providing references for correct installation and usage of the Appcues API.

    \n

    📄 License

    \n

    This project is licensed under the Apache 2.0 License. See LICENSE for more information.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":37}},"@kefah/nativescript-otp":{"name":"@kefah/nativescript-otp","version":"1.0.8","license":"Apache-2.0","readme":"

    @kefah/nativescript-otp

    \n

    Social buttons

    \n

    \"@kefahB\n\"stars\n\"dependency

    \n

    Repo metadata

    \n

    \"License\"\n\"issues

    \n

    A Nativescript plugin to auto fill the One Time Code OTP for IOS and Android

    \n

    Documentation

    \n
    \n

    \"view

    \n
    \n

    Table of contents

    \n\n

    Install

    \n
    ns plugin add @kefah/nativescript-otp
    \n

    OR

    \n
    npm i @kefah/nativescript-otp
    \n

    Limitations

    \n

    IOS: This feature is available from IOS 12.0 it will not working with older versions

    \n

    Setup

    \n

    The only setup is for Android that need a hash code to be append to the sms, the procedure is a little complicated, this plugin has a helper getAppSignatures() on it that that can generate the hash code for the development, it is not sure that the same hash work for production, for that you need to generate it manually.

    \n

    Get you development hash code by calling getAppSignatures() this will log the flowing into the console:

    \n
    \n

    PS: please use getAppSignatures() to get the hash code then comment it, it is not needed any more

    \n
    \n
    JS: packageName: org.nativescript.plugindemo Hash: I+D7XdR0yWS
    \n\n

    Before start

    \n
    \n

    An OTP in most case it is a integers values, please avoid using alphabet characters if possible.

    \n
    \n
    \n

    For some reason on IOS the OTP dectection not workin some time with a default keyboard type, if you experiencing a problem try to set the keyboard type to integer

    \n
    \n
    <notp:NativescriptOtp keyboardType=\"integer\" hint=\"{{ L('activation_code') }}\" text=\"{{ code }}\" autocorrect=\"false\" class=\"otp\"/>
    \n

    Some best practice in order to successfully receive the SMS

    \n
      \n
    • Try to use thoes keywords into your sms Code Passcode Password is
      • \n
    • begin your sms by <#> I am not sure about this as it not on the docs
      • \n
    • do not put multilines between the msg and the hash code
      • \n
    • use a short code
      • \n
    • use numbers and alphabetical characters only
      • \n
    \n
    <#> your code is: 1234988
    I+D7XdR0yWS
    \n

    Usage

    \n

    This plugin implement the Nativescript TextField, so you can use it instead of the regular TextField.

    \n

    Begin by including the plugin in your page

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:notp=\"@kefah/nativescript-otp\" navigatingTo=\"navigatingTo\" class=\"page\">
    \n

    Then use the plugin instead of the TextField

    \n
    <notp:NativescriptOtp hint=\"OTP\" class=\"otp\" text=\"{{ otp }}\"/>
    \n

    Full example

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:notp=\"@kefah/nativescript-otp\" navigatingTo=\"navigatingTo\" class=\"page\">
        <Page.actionBar>
            <ActionBar title=\"otp\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>

        <StackLayout class=\"p-20\">
            <ScrollView class=\"h-full\">
              <StackLayout>
                <Button text=\"Test otp >\" tap=\"{{ testIt }}\" class=\"btn btn-primary\"/>
                <notp:NativescriptOtp hint=\"OTP\" class=\"otp\" text=\"{{ otp }}\"/>
              </StackLayout> 
            </ScrollView>
        </StackLayout>
    </Page>
    \n

    Register the plugin to watch the incoming SMS and passe a callback function ont it to receive the OTP, this callback will be filled once the plugin captured the SMS.

    \n

    View Model

    \n
    import {NativescriptOtp, OTPResultInterface} from '@kefah/nativescript-otp';


    export class DemoSharedOtp extends DemoSharedBase {


        constructor() {
            super();
            console.log('test nativescript-otp!');
            let otp = new NativescriptOtp();
            otp.registerForOTP((otp: OTPResultInterface) => {
                if(otp) {
                    console.error(\"OTP\", otp);
                    this.set(\"otp\", otp.otp)
                    // do other staff
                    // trigger verify...
                    return;
                }
                // No OTP was found
            })
        }
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodtypeDescriptionIOSAndroid
    registerForOTP: (cb)Functionregister the plugin to watch the incoming SMSxx
    unregisterForOTPFunctionUnregister the watchxx
    parseMsg(msg, regex)Functionthis will parse the SMS to extract the code, you don't need to call it unless your code is special and you need a diffrent regex then pass your raged as second paramsx
    getAppSignatures()FunctionA helper to get a development hash code for Androidx
    \n

    Generate Android hash code

    \n
    package=_yourp_package_name_
    keystore=debug.keystore
    keystorepass=android
    alias=androiddebugkey

    keytool -exportcert -alias $alias -keystore $keystore -storepass $keystorepass | xxd -p | tr -d \"[:space:]\" | echo -n $package `cat` | openssl sha256 test.txt | tr -d \"[:space:]-\" | xxd -r -p | base64 | cut -c1-11
    \n
    keytool -exportcert -alias androiddebugkey -keystore debug.keystore -storepass android | xxd -p | tr -d \"[:space:]\" | echo -n $package `cat` | openssl sha256 | tr -d \"[:space:]-\" | xxd -r -p | base64 | cut -c1-11
    \n

    How to test

    \n

    IOS

    \n

    Unfortunately an IOS You need to test the SMS on a real device, apple doesn't allow to simulate a incomming sms on the simulator.

    \n

    Android

    \n

    It is very easy, please see the image below

    \n\"Capture\n\"Capture\n

    License

    \n

    Released under MIT by @kefahB.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":140}},"@bezlepkin/nativescript-keyboard-opening":{"name":"@bezlepkin/nativescript-keyboard-opening","version":"1.0.1","license":"Apache-2.0","readme":"

    @bezlepkin/nativescript-keyboard-opening

    \n

    A plugin that allows you to track keyboard opening, changing, closing and returns keyboard height.

    \n
    npm install @bezlepkin/nativescript-keyboard-opening
    \n

    Usage

    \n
    import { keyboardOpening } from '@bezlepkin/nativescript-keyboard-opening';

    keyboardOpening().on('opened', async (args: any) => {
        console.log('The keyboard is opened', args.data.height);
    });

    keyboardOpening().on('changed', async (args: any) => {
        console.log('The keyboard is changed', args.data.height);
    });

    keyboardOpening().on('closed', async (args: any) => {
        console.log('The keyboard is closed');
    });
    \n

    To stop tracking when you switch to another screen, you need to unsubscribe from the actions:

    \n
    keyboardOpening().off('opened');
    keyboardOpening().off('changed');
    keyboardOpening().off('closed');
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":7,"lastWeek":22,"lastMonth":139}},"@nstudio/nativescript-smartlook":{"name":"@nstudio/nativescript-smartlook","version":"1.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-smartlook

    \n

    Smartlook SDK for NativeScript.

    \n

    Comprehensive product analytics & visual user insights.

    \n
    npm install @nstudio/nativescript-smartlook
    \n

    For iOS, configure your nativescript.config.ts to use the Swift Package:

    \n
    ios: {
        SPMPackages: [
            {
                name: \"SmartlookAnalytics\",
                libs: [\"SmartlookAnalytics\"],
                repositoryURL: \"https://github.com/smartlook/analytics-swift-package.git\",
                version: \"2.2.4\"
            }
        ]
    }
    \n

    Usage

    \n

    Initialize the SDK with your api key before the app boots:

    \n
    Application.on(Application.launchEvent, () => {
      Smartlook.start('<api-key>');
    });

    // bootstrap app...
    \n

    API

    \n
      \n
    • Smartlook.start(key: string): Start the sdk session and recording.
      • \n
    • Smartlook.stop(): Stop recording.
      • \n
    • Smartlook.isRecording(): boolean: Check status of recording.
      • \n
    • Smartlook.sessionUrl(withTimestamp?: boolean): string: Get the current session url.
      • \n
    • Smartlook.setRenderingMode(mode?: SmartlookRenderMode): void: Set current rendering mode.
      • \n
    • Smartlook.getRenderingMode(): number: Get current rendering mode.
      • \n
    • Smartlook.setSensitivity(view: View, sensitive: boolean): Set sensitivity to specific View.
      • \n
    • Smartlook.setUser(id: string, name?: string, email?: string, extraData?: any): Set user details.
      • \n
    • Smartlook.trackEvent(name: string, properties?: any): void: Track event with optional properties.
      • \n
    • Smartlook.trackNavigationEvent(name: string): Track navigation event.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":42}},"@akylas/nativescript-inappbrowser":{"name":"@akylas/nativescript-inappbrowser","version":"3.1.8","license":"MIT","readme":"

    InAppBrowser for NativeScript

    \n

    Provides access to the system's web browser and supports handling redirects

    \n

    Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

    \n

    \n \n

    \n

    Who is using InAppBrowser?

    \n

    Do you want to see this package in action? Check these awesome projects, yay! 🎉

    \n
      \n
    • Oxycar - Offers innovative ways to facilitate home-work journeys.
      • \n
    • Pegus Digital - Your innovation partner in digital product development.
      • \n
    \n

    Share your awesome project here! ❤️

    \n

    Getting started

    \n
    tns plugin add @akylas/nativescript-inappbrowser
    \n

    Manual installation

    \n
      \n
    • \n

      Android Platform with Android Support:

      \n

      Modify your android/build.gradle configuration:

      \n
      buildscript {
        ext {
          buildToolsVersion = \"28.0.3\"
          minSdkVersion = 16
          compileSdkVersion = 28
          targetSdkVersion = 28
          // Only using Android Support libraries
          supportLibVersion = \"28.0.0\"
        }
      \n
      • \n
    • \n

      Android Platform with AndroidX:

      \n

      Modify your android/build.gradle configuration:

      \n
      buildscript {
        ext {
          buildToolsVersion = \"28.0.3\"
          minSdkVersion = 16
          compileSdkVersion = 28
          targetSdkVersion = 28
          // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
          androidXBrowser = \"1.0.0\"
          // Put here other AndroidX dependencies
        }
      \n
      • \n
    \n

    Usage

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsAction
    openOpens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari.
    closeDismisses the system's presented web browser.
    openAuthOpens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection).
    closeAuthDismisses the current authentication session.
    isAvailableDetect if the device supports this plugin.
    \n

    iOS Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    dismissButtonStyle (String)The style of the dismiss button. [done/close/cancel]
    preferredBarTintColor (String)The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF]
    preferredControlTintColor (String)The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080]
    readerMode (Boolean)A value that specifies whether Safari should enter Reader mode, if it is available. [true/false]
    animated (Boolean)Animate the presentation. [true/false]
    modalPresentationStyle (String)The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover]
    modalTransitionStyle (String)The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl]
    modalEnabled (Boolean)Present the SafariViewController modally or as push instead. [true/false]
    enableBarCollapsing (Boolean)Determines whether the browser's tool bars will collapse or not. [true/false]
    ephemeralWebSession (Boolean)Prevent re-use cookies of previous session (openAuth only) [true/false]
    \n

    Android Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    showTitle (Boolean)Sets whether the title should be shown in the custom tab. [true/false]
    toolbarColor (String)Sets the toolbar color. [gray/#808080]
    secondaryToolbarColor (String)Sets the color of the secondary toolbar. [white/#FFFFFF]
    navigationBarColor (String)Sets the navigation bar color. [gray/#808080]
    navigationBarDividerColor (String)Sets the navigation bar divider color. [white/#FFFFFF]
    enableUrlBarHiding (Boolean)Enables the url bar to hide as the user scrolls down on the page. [true/false]
    enableDefaultShare (Boolean)Adds a default share item to the menu. [true/false]
    animations (Object)Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }]
    headers (Object)The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }]
    forceCloseOnRedirection (Boolean)Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false]
    backButtonDrawableId (String)Sets a custom drawable instead of the X
    browserPackage (String)Package name of a browser to be used to handle Custom Tabs.
    showInRecents (Boolean)Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]
    \n

    Demo

    \n
    import { Utils, Dialogs } from '@nativescript/core';
    import { InAppBrowser } from '@akylas/nativescript-inappbrowser';

    ...
      openLink = async () => {
        try {
          const url = 'https://www.proyecto26.com'
          if (await InAppBrowser.isAvailable()) {
            const result = await InAppBrowser.open(url, {
              // iOS Properties
              dismissButtonStyle: 'cancel',
              preferredBarTintColor: '#453AA4',
              preferredControlTintColor: 'white',
              readerMode: false,
              animated: true,
              modalPresentationStyle: 'fullScreen',
              modalTransitionStyle: 'coverVertical',
              modalEnabled: true,
              enableBarCollapsing: false,
              // Android Properties
              showTitle: true,
              toolbarColor: '#6200EE',
              secondaryToolbarColor: 'black',
              navigationBarColor: 'black',
              navigationBarDividerColor: 'white',
              enableUrlBarHiding: true,
              enableDefaultShare: true,
              forceCloseOnRedirection: false,
              // Specify full animation resource identifier(package:anim/name)
              // or only resource name(in case of animation bundled with app).
              animations: {
                startEnter: 'slide_in_right',
                startExit: 'slide_out_left',
                endEnter: 'slide_in_left',
                endExit: 'slide_out_right'
              },
              headers: {
                'my-custom-header': 'my custom header value'
              },
              hasBackButton: true,
              browserPackage: '',
              showInRecents: false
            });
            Dialogs.alert({
              title: 'Response',
              message: JSON.stringify(result),
              okButtonText: 'Ok'
            });
          }
          else {
            Utils.openUrl(url);
          }
        }
        catch(error) {
          Dialogs.alert({
            title: 'Error',
            message: error.message,
            okButtonText: 'Ok'
          });
        }
      }
    ...
    \n

    Authentication Flow using Deep Linking

    \n

    In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,\ndefine your app scheme and replace my-scheme and my-host with your info.

    \n\n
    <activity
      ...
      android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" />
          <data android:scheme=\"my-scheme\" android:host=\"my-host\" android:pathPrefix=\"\" />
      </intent-filter>
    </activity>
    \n\n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>my-scheme</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>my-scheme</string>
        </array>
      </dict>
    </array>
    \n
      \n
    • utilities.ts
      • \n
    \n
    export const getDeepLink = (path = \"\") => {
      const scheme = 'my-scheme';
      const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
      return prefix + path;
    }
    \n
      \n
    • home-page.ts
      • \n
    \n
    import { Utils, Dialogs } from '@nativescript/core';
    import { InAppBrowser } from '@akylas/nativescript-inappbrowser';
    import { getDeepLink } from './utilities';
    ...
      async onLogin() {
        const deepLink = getDeepLink('callback')
        const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
        try {
          if (await InAppBrowser.isAvailable()) {
            InAppBrowser.openAuth(url, deepLink, {
              // iOS Properties
              ephemeralWebSession: false,
              // Android Properties
              showTitle: false,
              enableUrlBarHiding: true,
              enableDefaultShare: false
            }).then((response) => {
              if (
                response.type === 'success' &&
                response.url
              ) {
                Utils.openUrl(response.url)
              }
            })
          } else Utils.openUrl(url)
        } catch {
          Utils.openUrl(url)
        }
      }
    ...
    \n

    StatusBar

    \n

    The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.

    \n

    Authentication

    \n

    Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.

    \n

    Credits 👍

    \n\n

    Contributing ✨

    \n

    When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
    \nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
    \nYou can learn more about how you can contribute to this project in the contribution guide.

    \n

    Contributors ✨

    \n

    Please do contribute! Issues and pull requests are welcome.

    \n

    Code Contributors

    \n

    This project exists thanks to all the people who contribute. [Contribute].

    \n

    \"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"

    \n

    Collaborators

    \n\n\n\n\n\n\n\n\n
    \"jdnichollsc\"
    Juan Nicholls
    ✉    		\"NathanaelA\"
    Nathanael Anderson
    ✉
    \n\n

    Individuals

    \n

    \n

    Credits 👍

    \n\n","downloadStats":{"lastDay":34,"lastWeek":268,"lastMonth":1167}},"@nativescript/template-tab-navigation":{"name":"@nativescript/template-tab-navigation","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n
      \n
    • Tab navigation
      • \n
    • Five blank pages hooked to the tab navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-tab-js --template @nativescript/template-tab-navigation
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-tab-js --template nativescript-app-templates/packages/template-tab-navigation
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n
      \n
    • /app/app-root - sets up the tab navigation with individual navigation frames in each content item.
      • \n
    \n

    The template has the following pages used for the tab content items:

    \n
      \n
    • /app/home/home-items-page - the master home page. Displays a list of items and navigates to the item details page on item tap.
      • \n
    • /app/home/home-item-detail/home-item-detail-page - the item details page. Displays the details of the tapped item.
      • \n
    • /app/browse/browse-page - blank page
      • \n
    • /app/search/search-page - blank page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":2,"lastWeek":11,"lastMonth":471}},"@nativescript-dom/angular-types":{"name":"@nativescript-dom/angular-types","version":"1.0.7","license":"MIT","readme":"

    angular-types

    \n

    Typescript definitions for @nativescript/angular that expose @nativescript/core views as DOM elements in HTML templates and provide 100% complete intellisense in code editors

    \n

    Installtion

    \n
      \n
    1. Install the core and angular types in your project
      2. \n
    \n
    npm install @nativescript-dom/core-types @nativescript-dom/angular-types --save-dev
    \n
      \n
    1. Configure tsconfig.json as below
      2. \n
    \n
    {
      \"compilerOptions\": {
        ...
        \"types\": [
            \"node\",
            \"@nativescript-dom/core-types\",
            \"@nativescript-dom/angular-types\"
            ],
    ...
      }
    \n

    Configure vscode

    \n

    If you use vscode, configure .vscode/settings.json.

    \n

    Create a .vscode folder inside the root of your project and add a settings.json file with the following contents:

    \n
    {
      \"html.customData\": [
        \"./node_modules/@nativescript-dom/angular-types/metadata.json\"
      ]
    }
    \n

    No extra steps are required for webstorm.

    \n

    That's it, enjoy a fully typed @nativescript/angular experience.

    \n

    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":162}},"nativescript-photoviewer":{"name":"nativescript-photoviewer","version":"3.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript PhotoViewer

    \n

    A simple photo-viewer/gallery component for NativeScript.

    \n

    Limitations

    \n

    Since the plugin is based on two different libraries for two different platforms their features are also somewhat diferent:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformStateRemote images (url)Local images (resource)Titles/CreditsAlbum ViewColor Palette
    iOS:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
    Android:x: (Broken):white_check_mark::x::x::white_check_mark::white_check_mark:
    \n

    If anyone has tips on a better android library that has same or similar features to the iOS, let us know.

    \n

    Latest version

    \n

    3.0.0

    \n
      \n
    • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
      • \n
    • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.
      • \n
    \n

    Installation

    \n

    Run tns plugin add nativescript-photoviewer in your root directory of your project.

    \n

    Usage

    \n

    It's best to take a look at the included demo app(s) for advanced usages. Below is just a simple example on how to get the plugin running with minimal effort using vanilla nativescript (ts). For Angular, see demo-ng.

    \n
    // Include the module
    import { PhotoViewer, PhotoViewerOptions, PaletteType, NYTPhotoItem } from \"nativescript-photoviewer\";
    var photoViewer: PhotoViewer; 

    // Create a new instace of PhotoViewer in the onLoaded event. Very important to do the init here! 
    export function pageLoaded(args: EventData) {\t
        photoViewer = new PhotoViewer();
    }

    // Show gallery
    export function openGallery(args: EventData){

        let image1 = \"https://blabla/image1.jpg\";
        let image2 = \"https://blabla/image2.jpg\";
        let image3 = \"https://blabla/image3.jpg\";
        let image4 = \"https://blabla/image4.jpg\";
        let myImages = [image1, image2, image3, image4];

        // Example on how to use the options class (optional)
        let photoviewerOptions: PhotoViewerOptions = {
            startIndex: 0,
            ios: {
                completionCallback: galleryLoaded 
            },
            android: {
                paletteType: PaletteType.DarkVibrant,
                showAlbum: false
            }
        };
    \t
        photoViewer.showGallery(myImages, photoviewerOptions);
    }
    \n

    Changelog

    \n

    3.0.0

    \n
      \n
    • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
      • \n
    • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.
      • \n
    \n

    2.1.5

    \n
      \n
    • Fix for iOS datasource issue (premature garbage collect) - caused images to dissapear when using gallery.
      • \n
    \n

    2.1.1

    \n
      \n
    • Forgot to inlcude the photoviewer.d.ts file in the npm package. Add a reference to it in your references.d.ts.
      • \n
    • Added a vanilla js demo app demo-js.
      • \n
    \n

    2.1.0

    \n
      \n
    • Fixed Android & iOS promise handling, will resolve properly now when gallery is closed (both in vanilla tns and Angular).
      • \n
    • Added Angular demo app demo-ng.
      • \n
    • Known issue 1: Gallery does not work when opened from another modal.
      • \n
    • Known issue 2: When using Android Pie (9), for some reason, images don't appear untill you zoom (on simulator, not tested on real device).
      • \n
    \n

    2.0.2

    \n
      \n
    • Code refactor to TypeScript, added typings.
      • \n
    • Renamed showViewer() to showGallery() that now has 1 mandatory param and 1 optional param.
      • \n
    • Fixed the issue where the image datasource would be GC'ed on iOS (important to init the plugin in the onLoaded event)
      • \n
    • Updated demo app to reflect the changes, added album demo for Android.
      • \n
    • Known issue: Gallery does not work when opened from another modal.
      • \n
    \n

    1.5.0

    \n
      \n
    • Photo Viewer now works inside Modal Views, typo fix for 'completionCallback'. Big thanks to @Eonfuzz
      • \n
    • Fixed the iOS datasource to be more strong referenced & the _android ref. Big thanks to @miex0r
      • \n
    • Known issue: [iOS]If loading high-res images via urls, the images are being loaded before the gallery is shown. So the UI might freeze. A workaround for this could be to use the completionCallback and show a spinner when opening the gallery.
      • \n
    \n

    1.4.0

    \n
      \n
    • Moved param for index to a property: startIndex
      • \n
    • (iOS) Added property to set completionCallback
      • \n
    • (Android) Added option to show album first or go directly to fullscreen slides. More similar to iOS.
      • \n
    • (Android) Added property to set background color palette for fullscreen slides.
      • \n
    • Fixed demo app
      • \n
    • Changed license to MIT
      • \n
    \n

    1.3.0

    \n
      \n
    • Updated iOS pod to newer version (fixed minor breaking changes)
      • \n
    • Added a second paramter to the showViewer(ARRAY, INDEX?) function. Makes the gallery init on that image: photoViewer.showViewer(myImages,1);
      • \n
    \n

    Screenshots

    \n

    \"Demo \"Demo\n\"Demo \"Demo

    \n

    Contribution

    \n

    I'll review & accept pull requests that improve the plugin and assign credit.

    \n

    Credits

    \n

    The plugin is based on the following libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    NYTPhotoViewerImageGallery
    \n","downloadStats":{"lastDay":1,"lastWeek":16,"lastMonth":91}},"@nativescript/template-drawer-navigation-vue":{"name":"@nativescript/template-drawer-navigation-vue","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Vue Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Side drawer navigation
      • \n
    • Five blank pages hooked to the drawer navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-drawer-vue --template @nativescript/template-drawer-navigation-vue
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-drawer-vue --template nativescript-app-templates/packages/template-drawer-navigation-vue
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a component that is used for setting RadSideDrawer instance as an application root view:

    \n
      \n
    • /app/components/App.vue - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
      • \n
    \n

    RadSideDrawer has the following component structure:

    \n
      \n
    • RadSideDrawer - The component to display a drawer on the page.
      • \n
    • RadSideDrawer.drawerContent - Part of the RadSideDrawer, it holds a slot drawerContent that displays the contents of the drawer.
      • \n
    • RadSideDrawer.mainContent - Part of the RadSideDrawer, it holds the main content for the page.
      • \n
    \n

    The template has the following blank page components:

    \n
      \n
    • /app/components/Home.vue
      • \n
    • /app/components/Browse.vue
      • \n
    • /app/components/Search.vue
      • \n
    • /app/components/Featured.vue
      • \n
    • /app/components/Settings.vue
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":3,"lastWeek":8,"lastMonth":460}},"@nativescript/template-tab-navigation-vue":{"name":"@nativescript/template-tab-navigation-vue","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Vue Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a BottomNavigation component for navigation.

    \n

    \n

    Key Features

    \n
      \n
    • Tabbed navigation
      • \n
    • Three blank pages hooked to the bottom navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code through extensive code comments
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-tab-vue --template @nativescript/template-tab-navigation-vue
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-tab-vue --template nativescript-app-templates/packages/template-tab-navigation-vue
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root component is located at:

    \n
      \n
    • /app/components/App.vue - sets up the tab navigation with individual navigation frames in each content item.
      • \n
    \n

    The template has the following pages used for the tab content items:

    \n
      \n
    • /app/components/Items.vue - the master home page. Displays a list of items and navigates to the item details page on item tap.
      • \n
    • /app/components/ItemDetails.vue - the item details page. Displays the details of the tapped item.
      • \n
    • /app/components/Browse.vue - blank page
      • \n
    • /app/components/Search.vue - blank page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":2,"lastWeek":12,"lastMonth":469}},"@global66/nativescript-appsflyer":{"name":"@global66/nativescript-appsflyer","version":"1.0.17","license":"Apache-2.0","readme":"\n

    @global66/nativescript-appsflyer

    \n

    Nativescript Library for AppsFlyer SDK

    \n

    \"npm

    \n

    Table of content

    \n\n

    This plugin is built for

    \n
      \n
    • iOS AppsFlyerSDK v6.8.0
      • \n
    • Android AppsFlyerSDK v6.8.0
      • \n
    \n

    Installation

    \n

    $ tns plugin add @global66/nativescript-appsflyer

    \n

    Updates the spec repos located

    \n

    $ pod repo update

    \n

    API Methods

    \n
    \n

    Call module by adding (native javascript):

    \n

    var appsFlyer = require("@global66/nativescript-appsflyer");

    \n
    \n
    appsFlyer.initSdk(options, callback): void
    \n

    initializes the SDK.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectSDK configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    nametypedefaultdescription
    devKeystringAppsflyer Dev key
    appIdstringApple Application ID (for iOS only)
    isDebugbooleanfalsedebug mode (optional)
    onConversionDataSuccessfunctionAppsFlyer allows you to access the user attribution data in real-time for every new install, directly from the SDK level. By doing this you can serve users with personalized content or send them to specific activities within the app, which can greatly enhance their engagement with your app. For Android; for iOS
    onConversionDataFailurefunction
    \n

    Example:

    \n
    var options = {
        devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
        appId: \"975313579\",
        isDebug: true,
        timeToWaitForATTUserAuthorization: 60,
        onConversionDataSuccess: function(_res) {
            console.log(JSON.stringify(_res));
        },
        onConversionDataFailure: function(_res) {
            console.warn(\"failure: \" + JSON.stringify(_res));
        },
    };

    appsFlyer.initSdk(options).then(function(result) {
        viewModel.set(\"initSdkResponse\", result.status);
    }, function(err) {
        viewModel.set(\"initSdkResponse\", JSON.stringify(err));
    });
    \n
    \n

    ##### appsFlyer.logEvent(options): Promise<any>

    \n
      \n
    • These in-app events help you measure how loyal users discover your app, and attribute them to specific\ncampaigns/media-sources. Please take the time define the event/s you want to measure to allow you\nto measure the ROI (Return on Investment) and LTV (Lifetime Value).
      • \n
    • The logEvent method allows you to send in-app events to AppsFlyer analytics. This method allows you to add events dynamically by adding them directly to the application code.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    optionsObjectlog event configuration
    \n

    options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    eventNamestringcustom event name, is presented in your dashboard. See the Event list HERE
    eventValuesObjectevent details (see example bellow)
    \n

    Example: (native javascript)

    \n
    var options = {
        eventName: \"af_add_to_cart\",
        eventValues: {
            \"af_content_id\": \"id123\",
            \"af_currency\": \"USD\",
            \"af_revenue\": \"2\"
        }
    };
    appsFlyer.logEvent(options).then(function(result) {
        viewModel.set(\"logEventResponse\", result);
    }, function(err) {
        viewModel.set(\"logEventResponse\", JSON.stringify(err));
    });
    \n
    \n
    \n

    Deep Linking

    \n\n

    The 3 Deep Linking Types:

    \n

    Since users may or may not have the mobile app installed, there are 2 types of deep linking:

    \n
      \n
    1. Deferred Deep Linking - Serving personalized content to new or former users, directly after the installation.
      2. \n
    2. Direct Deep Linking - Directly serving personalized content to existing users, which already have the mobile app installed.
      3. \n
    3. Unified deep linking - Unified deep linking sends new and existing users to a specific in-app activity as soon as the app is opened.
      4. \n
    \n

    For more info please check out the OneLink™ Deep Linking Guide.

    \n

    1. Deferred Deep Linking (Get Conversion Data)

    \n

    Handle the Deferred deeplink in the following callback:

    \n
    var options = {
        onConversionDataSuccess: function(_res) {
            console.log(\"Get conversion data success: \" + JSON.stringify(_res));
        },
    }
    \n

    Check out the deferred deeplinkg guide from the AppFlyer knowledge base here

    \n

    2. Direct Deeplinking

    \n

    Handle the Direct deeplink in the 'onAppOpenAttribution' callback:

    \n
    var options = {
        devKey: 'devKey',
        appId: \"appId\",
        isDebug: true,
        onAppOpenAttribution: function(_res) {
            console.log(\"onAppOpenAttribution: \" + JSON.stringify(_res));
        },
        onAppOpenAttributionFailure: function(_res) {
            console.log(\"onAppOpenAttributionFailure: \" + JSON.stringify(_res));
        },
    };
    \n

    When a deeplink is clicked on the device the AppsFlyer SDK will return the link in the onAppOpenAttribution method.

    \n

    3. Unified deep linking

    \n

    Handle the Unified deeplink in the 'onDeepLinking' callback (if onDeepLinking callback is define, onAppOpenAttribution won't be called):

    \n
    var options = {
        devKey: 'devKey',
        appId: \"appId\",
        isDebug: true,
        onDeepLinking: function(_res) {
            console.log(\"onDeepLinking: \" + JSON.parse(_res))
        },
    };
    \n

    For more information about this api, please check OneLink Guide Here

    \n

    Android Deeplink Setup

    \n

    URI Scheme

    \n

    In your app’s manifest add the following intent-filter to your relevant activity:

    \n
    <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />
        <data android:scheme=\"your unique scheme\" />
    </intent-filter>
    \n

    NOTE: On Android, AppsFlyer SDK inspects activity intent object during onResume(). Because of that, for each activity that may be configured or launched with any non-standard launch mode the following code was added to MainActivity.java in android/app/src/main/java/com...

    \n

    Java:

    \n
    @Override
    public void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
    }
    \n

    Kotlin:

    \n
    override fun onNewIntent(intent : Intent){
        super.onNewIntent(intent)
        setIntent(intent)
    }
    \n

    App Links

    \n

    In your app’s manifest add the following intent-filter to your relevant activity:

    \n
    <intent-filter android:autoVerify=\"true\">
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />
        <data android:scheme=\"your unique scheme\" />
        <data android:scheme=\"https\"
            android:host=\"yourcompany.onelink.me\" 
            android:pathPrefix=\"your path prefix\" />
    </intent-filter>
    \n

    For more on App Links check out the guide here.

    \n

    iOS Deeplink Setup

    \n

    URI Scheme

    \n
      \n
    1. \n

      Create custom app delegate

      \n
      2. \n
    2. \n

      Add the following iOS method and AppsFlyer API

      \n
      3. \n
    \n
    @NativeClass()
    export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationOpenURLOptions(application: UIApplication, urlOptions: NSURL, options: NSDictionary<string, any>): boolean {
            console.log(\"applicationOpenURLOptions\");
            AppsFlyerLib.shared().handleOpenUrlOptions(urlOptions, options);
            return true;
        }

        // Open URI-scheme for iOS 8 and below
        applicationOpenURLSourceApplicationAnnotation(application: UIApplication, url: NSURL, sourceApplication: string, annotation: any): boolean {
            console.log(\"applicationOpenURLSourceApplicationAnnotation\");
            AppsFlyerLib.shared().handleOpenURLSourceApplicationWithAnnotation(url, sourceApplication, annotation);
            return true;
        }
    };
    \n

    For more on URI-schemes check out the guide here

    \n

    Universal Links

    \n
      \n
    1. \n

      Create custom app delegate

      \n
      2. \n
    2. \n

      Add the following iOS method and AppsFlyer API

      \n
      3. \n
    \n
    @NativeClass()
    export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate{
        public static ObjCProtocols = [UIApplicationDelegate];

        // Open Universal Links
        applicationContinueUserActivityRestorationHandler?(application: UIApplication, userActivity: NSUserActivity, restorationHandler: (p1: NSArray<UIUserActivityRestoring>) => void): boolean{
            console.log(\"applicationContinueUserActivityRestorationHandler\");
            AppsFlyerLib.shared().continueUserActivityRestorationHandler(userActivity, restorationHandler);
            return true;
        }
    };
    \n

    More on Universal Links:\nEssentially, the Universal Links method links between an iOS mobile app and an associate website/domain, such as AppsFlyer’s OneLink domain (xxx.onelink.me). To do so, it is required to:

    \n
      \n
    1. \n

      Get your SHA256 fingerprint:

      \n

      a. Creating A Keystore

      \n

      b. Generate Fingerprint

      \n
      2. \n
    2. \n

      Configure OneLink sub-domain and link to mobile app in the AppsFlyer onelink setup on your dashboard, add the fingerprint there (AppsFlyer takes care of hosting the ‘apple-app-site-association’ file)

      \n
      3. \n
    3. \n

      Configure the mobile app to register approved domains:

      \n
      4. \n
    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
        <dict>
            <key>com.apple.developer.associated-domains</key>
            <array>
                <string>applinks:test.onelink.me</string>
            </array>
        </dict>
    </plist>
    \n

    For more on Universal Links check out the guide here.

    \n
    \n

    Set plugin for IOS 14

    \n
      \n
    1. Add a custom App Delegate and inside add the ATT consent dialog for IDFA collection:
      2. \n
    \n
    @NativeClass()
    export class CustomAppDelegate extends UIResponder, ATTrackingManager implements UIApplicationDelegate{
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
            if (parseFloat(UIDevice.currentDevice.systemVersion) >= 14) {
                console.log(\"iOS 14\");
                ATTrackingManager.requestTrackingAuthorizationWithCompletionHandler((status) => {

                });
            }
            console.log(\"applicationDidFinishLaunchingWithOptions\");
        }

    };
    \n
      \n
    1. In the app.ts add:
      2. \n
    \n
    import { CustomAppDelegate } from \"./custom-app-delegate\";

    if (Application.ios) {
        Application.ios.delegate = CustomAppDelegate;
    }
    \n
      \n
    1. \n

      Add Privacy - Tracking Usage Description inside your .plist file in Xcode.

      \n
      2. \n
    2. \n

      Optional: Set the timeToWaitForATTUserAuthorization property in the options to delay the sdk initazliation for a number of x seconds until the user accept the consent dialog:

      \n
      3. \n
    \n
    var options = {
        devKey:  'WdpTVAcYwmxsaQ4WeTspmh',
        appId: \"975313579\",
        isDebug: true,
        timeToWaitForATTUserAuthorization: 60
    };
    \n

    For more info visit our Full Support guide for iOS 14:

    \n

    https://support.appsflyer.com/hc/en-us/articles/207032066#integration-33-configuring-app-tracking-transparency-att-support

    \n
    \n

    ##Sharing filter\n(GDPR/CCPA COMPLIANT - Read more information in the following article

    \n

    In some cases, advertisers may want to stop sharing user-level data with ad networks/partners for specific users.\nReasons for this include:\nPrivacy policies such as CCPA or GDPR\nUser opt-out mechanisms\nCompetition with some partners (ad networks, 3rd parties)\nAppsFlyer provides two API methods to stop sharing data with some or all partners:

    \n

    ##### appsFlyer.setSharingFilter(partners): Promise<any>

    \n
      \n
    • setSharingFilter: Used by advertisers to set some (one or more) networks/integrated partners to exclude from getting data.
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    parametertypedescription
    partnersArrayExclude (one or more) networks/integrated partners from getting data
    \n

    Example: (native javascript)

    \n
    var partners = [\"\"];

    appsFlyer.setSharingFilter(partners).then(function(result) {
        viewModel.set(\"setSharingFilterResponse\", result.status);
    }, function(err) {
        viewModel.set(\"setSharingFilter Response\", JSON.stringify(err));
    });
    \n

    ##### appsFlyer.setSharingFilterForAllPartners(): Promise<any>

    \n
      \n
    • setSharingFilterForAllPartners: Used by advertisers to exclude all networks/integrated partners from getting data.
      • \n
    \n

    Example: (native javascript)

    \n
    appsFlyer.setSharingFilterForAllPartners().then(function(result) {
        viewModel.set(\"setSharingFilterForAllPartners\", result.status);
    }, function(err) {
        viewModel.set(\"setSharingFilterForAllPartners Response\", JSON.stringify(err));
    });
    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":261}},"@nstudio/nativescript-aptabase":{"name":"@nstudio/nativescript-aptabase","version":"1.1.3","license":"Apache-2.0","readme":"

    \"Aptabase\"

    \n

    @nstudio/nativescript-aptabase

    \n

    Instrument your NativeScript apps with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.

    \n

    Install

    \n

    Install the SDK using your preferred JavaScript package manager

    \n
    pnpm add @nstudio/nativescript-aptabase
    # or
    npm add @nstudio/nativescript-aptabase
    # or
    yarn add @nstudio/nativescript-aptabase
    \n

    For iOS, configure your nativescript.config.ts to use the Swift Package:

    \n
    ios: {
        SPMPackages: [
            {
                name: 'Aptabase',
                libs: ['Aptabase'],
                repositoryURL: 'https://github.com/aptabase/aptabase-swift.git',
                version: '0.1.0'
            }
        ]
    }
    \n

    Usage

    \n

    First you need to get your App Key from Aptabase, you can find it in the Instructions menu on the left side menu.

    \n

    Initialize the SDK using your App Key and the initialize function. We would recommend calling it as early as possible in your app life cycle.

    \n
    import { Aptabase } from '@nstudio/nativescript-aptabase';

    Aptabase.initialize('<YOUR_APP_KEY>'); // 👈 this is where you enter your App Key
    \n

    Afterwards you can start tracking events with track:

    \n
    import { Aptabase } from '@nstudio/nativescript-aptabase';

    // Track an event
    Aptabase.track(\"connect_click\");
     
    // Track events with custom properties
    Aptabase.track(\"play_music\", {
      name: \"Here comes the sun\"
    });
    \n

    A few important notes:

    \n
      \n
    1. The SDK will automatically enhance the event with some useful information, like the OS, the app version, and other things.
      2. \n
    2. You're in control of what is sent to Aptabase. This SDK does not automatically track any events, you need to call track manually.\n
        \n
      • Because of this, it's generally recommended to at least track an event at startup
        • \n
      \n
      3. \n
    3. You do not need to await the track function, it'll run in the background.
      4. \n
    4. Only strings and numbers values are allowed on custom properties
      5. \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":179}},"nativescript-social-login":{"name":"nativescript-social-login","version":"4.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Social Login

    \n

    NativeScript module for social (token based) log-ins.

    \n

    \"Donate\"

    \n

    Implementations

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderAndroidiOS
    GoogleYesYes
    FacebookYesYes
    TwitterNoNo
    \n

    License

    \n

    MIT license

    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Changes

    \n

    v1.4.x to 1.5.x

    \n

    Google

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.3.x to 1.4.x

    \n

    Facebook

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.2.x to 1.3.x

    \n

    Google

    \n
      \n
    • The default value for ILoginConfiguration.google.isRequestAuthCode is (false) now. This behavior will not be changed in the future again!
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-social-login
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n
    Permissions
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <!-- ... -->

        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <!-- ... -->
    </manifest>
    \n
    Strings
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
        <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
    </resources>
    \n

    Setup Android Google Sign in for Debug Builds

    \n
      \n
    1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
      2. \n
    \n
    keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    \n

    The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

    \n
      \n
    1. Create an app here on Google Developer site.\n
        \n
      • Enter the App name. This can be anything but it will display to the user who is authenticating.
        • \n
      • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
        • \n
      • Next configure the Google services.
        • \n
      • Select Google Sign-In
        • \n
      • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
        • \n
      • Enable Google Sign-In\n
          \n
        • If only enabling Google Sign-In you do not need the configuration file inside your application.
          • \n
        \n
        • \n
      \n
      2. \n
    2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
      3. \n
    \n

    iOS

    \n

    GoogleService-Info.plist

    \n

    You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <!-- FACEBOOK AND GOOGLE LOGIN -->
    <key>CFBundleURLTypes</key>
        <array>
            <!-- GOOGLE START -->
    \t\t<dict>
    \t\t\t<key>CFBundleTypeRole</key>
    \t\t\t<string>Editor</string>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                    <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                    <!-- Get it from your GoogleService-Info.plist -->
                    <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t\t</array>
    \t\t</dict>
    \t\t<!-- GOOGLE END -->
    \t\t<!-- FACEBOOK START -->
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
            <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
                </array>
            </dict>
        </array>
        <key>CFBundleVersion</key>
        <string>1.0</string>
        <key>FacebookAppID</key>
        <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
        <key>FacebookDisplayName</key>
        <string>FacebookLoginDemo</string>
        <!-- FACEBOOK END -->
    \n

    https://developers.facebook.com/docs/ios

    \n

    Application main file

    \n

    Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

    \n
    TypeScript
    \n
    if (application.ios) {

      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
          let gglDelegate = false;

          try {
            const errorRef = new interop.Reference();
            GGLContext.sharedInstance().configureWithError(errorRef);

            const signIn = GIDSignIn.sharedInstance();
            gglDelegate = true;
          } catch (error) {
            console.log(error);
          }

          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

          return gglDelegate || fcbDelegate;
        }

        applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
          const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

          return fcbDelegate || gglDelegate;
        }
      }

      application.ios.delegate = MyDelegate;
    }
    \n
    JavaScript
    \n
    if (application.ios) {
        var MyDelegate = (function (_super) {
            __extends(MyDelegate, _super);
            function MyDelegate() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                var gglDelegate = false;
                try {
                    var errorRef = new interop.Reference();
                    GGLContext.sharedInstance().configureWithError(errorRef);
                    var signIn = GIDSignIn.sharedInstance();
                    gglDelegate = true;
                }
                catch (error) {
                    console.log(error);
                }
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
                return gglDelegate || fcbDelegate;
            };
            MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
                var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
                return fcbDelegate || gglDelegate;
            };
            return MyDelegate;
        }(UIResponder));
        MyDelegate.ObjCProtocols = [UIApplicationDelegate];
        application.ios.delegate = MyDelegate;
    }
    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    import SocialLogin = require(\"nativescript-social-login\");
    \n

    Initialize

    \n
    import Application = require(\"application\");
    import SocialLogin = require(\"nativescript-social-login\");

    if (Application.android) {
        Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
            let result = SocialLogin.init({
                activity: event.activity,
            });
        });
    }
    \n

    The init() function receives an (optional) object with the following structure:

    \n
    interface ILoginConfiguration {
        /**
         * The underlying custom activity to use.
         */
        activity?: android.app.Activity;

        /**
         * Facebook specific configuration.
         */
        facebook?: {
            /**
             * Initialize Facebook or not. Default: (true)
             */
            initialize?: boolean;
            /**
             * Should Logout current Facebook session or not. Default: (false)
             */
            clearSession?: boolean;
        }

        /**
         * Google specific configuration.
         */
        google?: {
            /**
             * Initialize Google or not. Default: (true)
             */
            initialize?: boolean;

           /**
            * The server client ID for requesting server auth token.
            */
            serverClientId?: string;

            /**
             * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
             * It will be set in authCode property of result object.
             *
             * If false (default), it will request for token id. it will be set in authToken property of result object.
             */
            isRequestAuthCode?: boolean;
        }

        /**
         * Fallback action for the result of the underlying activity.
         */
        onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
    }
    \n

    The result object that is returned by init() has the following structure:

    \n
    interface IInitializationResult {
        facebook: {
            error: any,
            isInitialized: boolean,
        },
        google: {
            error: any,
            isInitialized: boolean,
        },
        twitter: {
            error: any,
            isInitialized: boolean,
        }
    }
    \n

    The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

    \n

    The error properties are only defined if an exception was thrown while initialization.

    \n

    Login

    \n

    If you want to use a login functions you have to submit a callback that receives an object with the following structure:

    \n
    interface ILoginResult {
        /**
         * Gets the auth token (if requested).
         */
        authToken?: string;

        /**
         * Offline auth code used by servers to request new auth tokens.
         */
        authCode?: string;

        /**
         * Gets the result code.
         */
        code: LoginResultType;

        /**
         * The display name.
         */
        displayName?: string;

        /**
         * First name of the user.
         */
        firstName?: string;

        /**
         * Last name of the user.
         */
        lastName?: string;

        /**
         * Gets the error (if defined).
         */
        error?: any;

        /**
         * The ID of the user.
         */
        id?: string;

        /**
         * The photo URL.
         */
        photo?: string;

        /**
         * Gets the underlying provider.
         */
        provider?: string;

        /**
         * The user token, like email address.
         */
        userToken?: string;
    }
    \n

    The following functions are implemented:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderProvider
    loginWithFacebookFacebook
    loginWithGoogleGoogle
    \n

    Example

    \n
    SocialLogin.loginWithFacebook(
        (result) => {
            console.log(\"code: \" + result.code);
            console.log(\"error: \" + result.error);
            console.log(\"userToken: \" + result.userToken);
            console.log(\"displayName: \" + result.displayName);
            console.log(\"photo: \" + result.photo);
            console.log(\"authToken: \" + result.authToken);
        }
    );
    \n

    It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

    \n
    import { Component, NgZone } from \"angular/core\";

    @Component({})
    class SigninComponent {
        constructor(private ngZone: NgZone) {}

        login() {
            SocialLogin.loginWithFacebook((result) => {
                this.ngZone.run(() => {
                    console.log(\"code: \" + result.code);
                    console.log(\"error: \" + result.error);
                    console.log(\"userToken: \" + result.userToken);
                    console.log(\"displayName: \" + result.displayName);
                    console.log(\"photo: \" + result.photo);
                    console.log(\"authToken: \" + result.authToken);
                });
            });
        }
    }
    \n

    There is also a great example by dgomezs that shows how to configure your app for Facebook.

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

    \n
    SocialLogin.addLogger(function(msg: any, tag: string) {
        console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
    });
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":60,"lastMonth":190}},"nativescript-fingerprint-auth":{"name":"nativescript-fingerprint-auth","version":"7.0.2","license":"MIT","readme":"

    NativeScript Fingerprint Authentication

    \n
    \n

    Also works with Face ID on iPhone X(s) 🚀

    \n
    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n\n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-fingerprint-auth
    \n

    Then open App_Resources/Android/AndroidManifest.xml and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line:

    \n
      <uses-sdk
          android:minSdkVersion=\"17\"
          android:targetSdkVersion=\"__APILEVEL__\"
          tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
    \n

    Demo

    \n

    If you want a quickstart, check out the demo app. Run it locally using these commands:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-fingerprint-auth
    cd nativescript-fingerprint-auth/src
    npm run demo.android # or demo.ios
    \n

    \n

    API

    \n

    Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

    \n

    available

    \n

    JavaScript

    \n
    var fingerprintAuthPlugin = require(\"nativescript-fingerprint-auth\");
    var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

    fingerprintAuth.available().then(
        function(avail) {
          console.log(\"Available? \" + avail);
        }
    )
    \n

    TypeScript

    \n
    import { FingerprintAuth, BiometricIDAvailableResult } from \"nativescript-fingerprint-auth\";

    class MyClass {
      private fingerprintAuth: FingerprintAuth;

      constructor() {
        this.fingerprintAuth = new FingerprintAuth();
      }

      this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
        console.log(`Biometric ID available? ${result.any}`);
        console.log(`Touch? ${result.touch}`);
        console.log(`Face? ${result.face}`);
      });
    }
    \n

    verifyFingerprint

    \n

    Note that on the iOS simulator this will just resolve().

    \n
    fingerprintAuth.verifyFingerprint(
    \t{
    \t  title: 'Android title', // optional title (used only on Android)
    \t  message: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
    \t  authenticationValidityDuration: 10, // optional (used on Android, default 5)
    \t  useCustomAndroidUI: false // set to true to use a different authentication screen (see below)
    \t})
    \t.then((enteredPassword?: string) => {
    \t  if (enteredPassword === undefined) {
    \t    console.log(\"Biometric ID OK\")
    \t  } else {
    \t    // compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
    \t  }
    \t})
    \t.catch(err => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`))    ;
    \n

    A nicer UX/UI on Android (useCustomAndroidUI: true)

    \n

    The default authentication screen on Android is a standalone screen that (depending on the exact Android version) looks kinda 'uninteresting'.\nSo with version 6.0.0 this plugin added the ability to override the default screen and offer an iOS popover style which you can activate by passing in useCustomAndroidUI: true in the function above.

    \n

    One important thing to realize is that the 'use password' option in this dialog doesn't verify the entered password against\nthe system password. It must be used to compare the entered password with an app-specific password the user previously configured.

    \n
    Optional change
    \n

    If you want to override the default texts of this popover screen, then drop a file strings.xml in your project and override the properties you like. See the demo app for an example.

    \n
    ⚠️ Important note when using NativeScript < 5.4.0
    \n

    Use plugin version < 7.0.0 to be able to use this feature with NativeScript < 5.4.0

    \n
    \n

    Skip this section if you're on NativeScript 5.4.0 or newer because it's all handled automatically!

    \n
    \n

    To be able to use this screen, a change to App_Resources/Android/AndroidManifest.xml is required as our NativeScript activity needs to extend AppCompatActivity (note that in the future this may become the default for NativeScript apps).

    \n

    To do so, open the file and replace <activity android:name="com.tns.NativeScriptActivity" by <activity android:name="org.nativescript.fingerprintplugin.AppCompatActivity".

    \n

    Note that if you forget this and set useCustomAndroidUI: true the plugin will reject the Promise with a relevant error message.

    \n

    Mandatory changes for webpack and snapshot builds (again, for NativeScript < 5.4.0 only)

    \n

    If you are using Webpack with or without snapshot there are couple more changes required in order to make the custom UI work in your production builds.
    \nFirst you need to edit your vendor-platform.android.ts file and add require("nativescript-fingerprint-auth/appcompat-activity");. You can see the changed file in the demo app here.
    \nThe second change should be made in your webpack.config.js file. Find the place where the NativeScriptSnapshotPlugin is pushed to the webpack plugins and add "nativescript-fingerprint-auth" in the tnsJavaClassesOptions.packages array. The result should look something like:

    \n
    // ...
        if (snapshot) {
            config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
                chunk: \"vendor\",
                projectRoot: __dirname,
                webpackConfig: config,
                targetArchs: [\"arm\", \"arm64\", \"ia32\"],
                tnsJavaClassesOptions: {
                    packages: [\"tns-core-modules\", \"nativescript-fingerprint-auth\"],
                },
                useLibs: false
            }));
        }
    // ...
    \n

    verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

    \n

    Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

    \n
    fingerprintAuth.verifyFingerprintWithCustomFallback({
      message: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
      fallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
      authenticationValidityDuration: 10 // optional (used on Android, default 5)
    }).then(
        () => {
          console.log(\"Fingerprint was OK\");
        },
        error => {
          // when error.code === -3, the user pressed the button labeled with your fallbackMessage
          console.log(\"Fingerprint NOT OK. Error code: \" + error.code + \". Error message: \" + error.message);
        }
    );
    \n

    Face ID (iOS)

    \n

    iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

    \n

    You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSFaceIDUsageDescription</key>
      <string>For easy authentication with our app.</string>
    \n

    Security++ (iOS)

    \n

    Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

    \n

    So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

    \n
    fingerprintAuth.available().then(avail => {
        if (!avail) {
          return;
        }
        fingerprintAuth.didFingerprintDatabaseChange().then(changed => {
            if (changed) {
              // re-auth the user by asking for his credentials before allowing a fingerprint scan again
            } else {
              // call the fingerprint scanner
            }
      });
    });
    \n

    Changelog

    \n
      \n
    • 6.2.0 Fixed a potential bypass on iOS.
      • \n
    • 6.1.0 Fixed potentioal bypasses on Android.
      • \n
    • 6.0.3 Android interfered with other plugins' Intents.
      • \n
    • 6.0.2 Plugin not working correctly on iOS production builds / TestFlight.
      • \n
    • 6.0.1 Fixed a compatibility issues with NativeScript 3.4.
      • \n
    • 6.0.0 Allow custom UI on Android.
      • \n
    • 5.0.0 Better Face ID support. Breaking change, see the API for available.
      • \n
    • 4.0.1 Aligned with the official NativeScript plugin seed. Requires NativeScript 3.0.0+. Thanks, @angeltsvetkov!
      • \n
    • 4.0.0 Converted to TypeScript. Changed the error response type of verifyFingerprintWithCustomFallback.
      • \n
    • 3.0.0 Android support added. Renamed nativescript-touchid to nativescript-fingerprint-auth (sorry for any inconvenience!).
      • \n
    • 2.1.1 Xcode 8 compatibility - requires NativeScript 2.3.0+.
      • \n
    • 2.1.0 Added didFingerprintDatabaseChange for enhanced security.
      • \n
    • 2.0.0 Added verifyFingerprintWithCustomFallback, verifyFingerprint now falls back to the passcode.
      • \n
    • 1.2.0 You can now use the built-in passcode interface as fallback.
      • \n
    • 1.1.1 Added TypeScript definitions.
      • \n
    • 1.1.0 Added Android platform which will always return false for touchid.available.
      • \n
    \n","downloadStats":{"lastDay":6,"lastWeek":55,"lastMonth":263}},"nativescript-webview-interface":{"name":"nativescript-webview-interface","version":"1.4.4","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    Nativescript-WebView-Interface

    \n

    Nativescript Plugin for bi-directional communication between WebView and Android/iOS

    \n

    Installation

    \n

    From the terminal, go to your app's root folder and execute:

    \n
    tns plugin add nativescript-webview-interface
    \n

    Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

    \n
    cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
    \n

    Usage

    \n

    For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

    \n

    Inside Native App

    \n

    Insert a web-view somewhere in your page.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    ....
    <web-view id=\"webView\"></web-view>
    ....
    </Page>
    \n

    Initialize WebViewInterface Plugin in your javascript file.

    \n
    var webViewInterfaceModule = require('nativescript-webview-interface');
    var oWebViewInterface;

    function pageLoaded(args){
        page = args.object;
        setupWebViewInterface(page) 
    }

    // Initializes plugin with a webView
    function setupWebViewInterface(page){
        var webView = page.getViewById('webView');
        oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
    }
    \n

    Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

    \n

    Use any API Method of WebViewInterface Class

    \n
    function handleEventFromWebView(){
        oWebViewInterface.on('anyEvent', function(eventData){
            // perform action on event
        });
    }

    function emitEventToWebView(){
        oWebViewInterface.emit('anyEvent', eventData);
    }

    function callJSFunction(){
        oWebViewInterface.callJSFunction('functionName', args, function(result){
            
        });
    }
    \n

    If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

    \n
    webView.on('loadFinished', (args) => {
        if (!args.error) {
            // emit event to webView or call JS function of webView
        }
    });
    \n

    Inside WebView

    \n

    Import nativescript-webview-interface.js in your html page.

    \n
    <html>
        <head></head>
        <body>
            <script src=\"path/to/nativescript-webview-interface.js\"></script>
            <script src=\"path/to/your-custom-script.js\"></script>        
        </body>
    </html>
    \n

    Use any API Method of window.nsWebViewInterface inside webview

    \n
    var oWebViewInterface = window.nsWebViewInterface;

    // register listener for any event from native app
    oWebViewInterface.on('anyEvent', function(eventData){
        
    });

    // emit event to native app
    oWebViewInterface.emit('anyEvent', eventData);

    // function which can be called by native app
    window.functionCalledByNative = function(arg1, arg2){
        // do any processing
        return dataOrPromise;
    }
    \n

    API

    \n

    Native App API

    \n

    Constructor:

    \n

    WebViewInterface(webView: WebView, src?: string)

    \n

    webView is an instance of nativescript web-view.

    \n

    src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

    \n

    API Methods of WebViewInterface Class:

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emitted from webView.

    \n

    Callback will be executed with the data sent from webView in any format.

    \n

    off(eventOrCmdName: string, callback?: (eventData: any) => void): void

    \n

    Use this method to de-register listener of any event/command emitted from webView.

    \n

    If callback is not set, all the event listeners for this event will be de-registered.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from native app to webView with data in any format.

    \n

    callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

    \n

    Use this method to call to any javascript function in global scope in webView.

    \n

    Arguments are optional. But if supplied, must be in array format.

    \n

    If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
    \nIf the function execution generates any error, the errorHandler will be called with the error.

    \n

    destroy(): void

    \n

    Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

    \n

    WebView API

    \n

    API Methods available in window.nsWebViewInterface global variable.

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emited from native app.

    \n

    Callback will be executed with the data sent from native app in any format.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from webView to native app with data in any format.

    \n","downloadStats":{"lastDay":58,"lastWeek":488,"lastMonth":2001}},"@voicethread/nativescript-audio-recorder":{"name":"@voicethread/nativescript-audio-recorder","version":"1.0.2","license":"Apache-2.0","readme":"

    @voicethread/nativescript-audio-recorder

    \n

    Nativescript audio recorder \"apple\" \"android\"

    \n

    \"npm\"

    \n

    This plugin provides an audio recorder for Android and iOS that supports recording of audio from a device microphone input and saved to an MP4/AAC audio file. It also provides a function to merge multiple audio recordings together.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @voicethread/nativescript-audio-recorder --save
    \n

    OR

    \n
    ns plugin add @voicethread/nativescript-audio-recorder
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-recorder.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { AudioRecorder, AudioRecorderOptions } from '@voicethread/nativescript-audio-recorder';
    \n
      \n
    1. Record an audio file.
      2. \n
    \n
    this.recorder = new AudioRecorder();
    //you can tie into these events to update control UI state
    this.recorder.on('RecorderFinished', () => {
      console.log('RecorderFinished');
    });
    this.recorder.on('RecorderFinishedSuccessfully', () => {
      console.log('RecorderFinishedSuccessfully');
    });
    let recOptions: AudioRecorderOptions = {
        filename: path.join(knownFolders.documents().path, 'audiorecording-1.mp4');,
        infoCallback: infoObject => {
          console.log('AudioRecorder infoCallback: ', JSON.stringify(infoObject));
        },
        errorCallback: errorObject => {
          console.error('AudioRecorder errorCallback: ', JSON.stringify(errorObject));
        },
      };
    try {
      this.recorder
        .record(recOptions)
        .then(() => {
          console.log('recording audio started');
        })
        .catch(err => {
          console.error(err);
        });
    } catch (err) {
      alert(err?.message);
    }
    \n
      \n
    1. (Optional) Merge multiple recordings into a single file.
      2. \n
    \n
    let audioFiles: [string] = ['PATH/TO/audiorecording-1.mp4','PATH/TO/audiorecording-2.mp4'];
    let finalfile = await this.recorder.mergeAudioFiles(this.audioFiles, 'PATH/TO/audiorecording.mp4');
    \n

    Android Specifics

    \n

    In order to record audio, you'll need to add the following permission to your AndroidManifest.xml:

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
      ...
    </manifest>
    \n

    To request permissions in the demo app, we use the @nativescript-community perms plugin.

    \n

    iOS Specifics

    \n

    In order to record audio, iOS will require permission to access the microphone. Add the following to your Info.plist:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>This app requires access to your microphone to record audio</string>
    \n

    Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission.

    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n

    Supported Audio Recorder options

    \n
    export interface AudioRecorderOptions {
      /**
       * Gets or sets the recorded file name.
       */
      filename: string;

      /**
       * Sets the source for recording ***ANDROID ONLY for now ***
       */
      source?: any;

      /**
       * Gets or set the max duration of the recording session.
       * Input in milliseconds, which is Android's format.
       * Will be converted appropriately for iOS.
       */
      maxDuration?: number;

      /**
       * Enable metering. Off by default.
       */
      metering?: boolean;

      /**
       * Channels
       */
      channels?: any;

      /**
       * Sampling rate
       */
      sampleRate?: any;

      /**
       * Bit rate
       */
      bitRate?: any; //Android only, use iosAudioQuality for iOS

      /**
       * Sets the ios audio quality setting. Options are Min|Low|Medium|High|Max. Set to Medium by default.
       */
      iosAudioQuality?: string;

      /**
       * Gets or sets the callback when an error occurs with the media recorder.
       * @returns {Object} An object containing the native values for the error callback.
       */
      errorCallback?: Function;

      /**
       * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
       * @returns {Object} An object containing the native values for the info callback.
       */
      infoCallback?: Function;
    }
    \n

    Audio Recorder exports

    \n
    export class AudioRecorder extends Observable implements IAudioRecorder {
      readonly ios: any; //Native iOS recorder instance
      readonly android: any;  //Native Android recorder instance

      /**
       * Starts a recording session with the provided options.
       * @param options [AudioRecorderOptions]
       */
      record(options: AudioRecorderOptions): Promise<any>;

      /**
       * Stops the recording
       */
      stop(): Promise<File>;

      /**
       * Disposes of the recorder session
       */
      dispose(): Promise<any>;

      /**
       * Returns the maximum absolute amplitude that was sampled since the last call to this method.
       * @param channel [number]
       */
      getMeters(channel?: number): any;

      /**
       * Returns value indicating the recorder is currently recording.
       */
      isRecording(): boolean;

      /**
       * Merges all files with file paths specified in audioFiles into a new file at outputPath. This only supports MP4/AAC audio files currently
       * Note: For Android, API 26+ is required.
       */
      mergeAudioFiles(audioFiles: string[], outputPath: string): Promise<File>;
    }
    \n

    Acknowledgements

    \n

    This plugin is based on https://github.com/nstudio/nativescript-audio

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":44}},"nativescript-sse":{"name":"nativescript-sse","version":"4.0.2","license":"Apache-2.0","readme":"

    NativeScript Server Sent Events

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    A NativeScript client for the Server Sent Events (SSE).

    \n

    Install

    \n

    npm install nativescript-sse

    \n

    Usage

    \n
    import { SSE } from 'nativescript-sse';

    let sse = new SSE(serverApi: string, headers: object);
    sse.events.on('onConnect', (data) => {
        console.log(data.object.connected);
    });
    sse.events.on('onMessage', (data) => {
        this.list.push(JSON.parse(data.object.message.data))
    });
    sse.events.on('onError', (data) => {
        console.log(data.object.error);
    });
    see.close();
    \n","downloadStats":{"lastDay":0,"lastWeek":21,"lastMonth":70}},"nativescript-ui-chart":{"name":"nativescript-ui-chart","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI Chart

    \n\n

    Overview

    \n

    The NativeScript UI Chart plugin can be used to visualize data in a human-readable way through lines, areas, bars, pies, and more. Some features include:

    \n
      \n
    • Wide array of accepted data types: numbers, texts or dates depending on the chart you want to visualize;
      • \n
    • Smooth interaction and zooming;
      • \n
    • Annotations, tooltips, and trackball;
      • \n
    • Support for multiple axes.
      • \n
    • Various chart series options:\n
        \n
      • Show trends with Line, Area, and Spline Area charts;
        • \n
      • Compare sets of data with Bar charts;
        • \n
      • Illustrate proportions with Pie and Donut charts;
        • \n
      • Spline and Spline Area charts to plot data that require the use of curve fittings;
        • \n
      • Show relationships among values using Scatter and Bubble series;
        • \n
      • Use Financial series and indicators;
        • \n
      \n
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-chart
    \n

    Documentation

    \n

    The NativeScript UI Chart plugin has two types of charts - chartesian and pie.\nThey are presented by the RadChartesianChart & RadPieChart classes.\nEach of them can visualize data with different types of series. With the chartesian chart you can also specify the axes that are used.\nMore information is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":158,"lastWeek":1007,"lastMonth":4489}},"@nativescript-dom/react-types":{"name":"@nativescript-dom/react-types","version":"1.0.4","license":"MIT","readme":"

    react-types

    \n

    Typescript types for react-nativescript that give you proper and complete intellisense in code editors.

    \n

    Installtion

    \n
      \n
    1. Install the core and react types in your project
      2. \n
    \n
    npm install @nativescript-dom/core-types @nativescript-dom/react-types --save-dev
    \n
      \n
    1. Configure tsconfig.json as below
      2. \n
    \n
    {
      \"compilerOptions\": {
        ...
        \"types\": [
            \"node\",
            \"@nativescript-dom/core-types\",
            \"@nativescript-dom/react-types\"
            ],
    ...
      }
    \n

    That's it, enjoy a fully typed react-nativescript experience.

    \n

    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":78}},"@nativescript/template-drawer-navigation-ts":{"name":"@nativescript/template-drawer-navigation-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Side drawer navigation
      • \n
    • Five blank pages hooked to the drawer navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-drawer-ts --template @nativescript/template-drawer-navigation-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-drawer-ts --template nativescript-app-templates/packages/template-drawer-navigation-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    There is a folder that is used for setting RadSideDrawer instance as an application root:

    \n
      \n
    • /app/app-root/app-root - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
      • \n
    \n

    RadSideDrawer has the following component structure:

    \n
      \n
    • RadSideDrawer - The component to display a drawer on the page.
      • \n
    • RadSideDrawer.drawerContent - Part of the RadSideDrawer, it holds a custom component drawer that displays the contents of the drawer.
      • \n
    • RadSideDrawer.mainContent - Part of the RadSideDrawer, it holds the main content for the page.
      • \n
    \n

    The template has the following blank page modules:

    \n
      \n
    • /app/home/home-page
      • \n
    • /app/browse/browse-page
      • \n
    • /app/search/search-page
      • \n
    • /app/featured/featured-page
      • \n
    • /app/settings/settings-page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":3,"lastWeek":10,"lastMonth":487}},"@nstudio/nativescript-input-mask":{"name":"@nstudio/nativescript-input-mask","version":"1.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-input-mask

    \n

    Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

    \n

    This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

    \n

    Installation

    \n
    npm install @nstudio/nativescript-input-mask
    \n

    If you were using 0.1.x, please note the following breaking changes in 1.0.0 release:

    \n
      \n
    • Removed property extractedValue. Property text will keep that value from now on.
      • \n
    • Added property maskedValue for retrieving the value with mask format.
      • \n
    \n

    Usage

    \n

    Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current text value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

    \n

    Documentation for masks is below (from here).

    \n
    \n

    Masks consist of blocks of symbols, which may include:

    \n
      \n
    • [] — a block for valueable symbols written by user.
      • \n
    \n

    Square brackets block may contain any number of special symbols:

    \n
      \n
    1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
      2. \n
    2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
      3. \n
    3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
      4. \n
    4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
      5. \n
    5. _ — mandatory symbol (digit or letter).
      6. \n
    6. - — optional symbol (digit or letter).
      7. \n
    \n

    Other symbols inside square brackets will cause a mask initialization error.

    \n

    Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

    \n

    Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

    \n

    Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

    \n
      \n
    • {} — a block for valueable yet fixed symbols, which could not be altered by the user.
      • \n
    \n

    Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

    \n

    Mask format examples:

    \n
      \n
    1. [00000000000]
      2. \n
    2. {401}-[000]-[00]-[00]
      3. \n
    3. [000999999]
      4. \n
    4. {818}-[000]-[00]-[00]
      5. \n
    5. [A][-----------------------------------------------------]
      6. \n
    6. [A][_______________________________________________________________]
      7. \n
    7. 8 [0000000000]
      8. \n
    8. 8([000])[000]-[00]-[00]
      9. \n
    9. [0000]{-}[00]
      10. \n
    10. +1 ([000]) [000] [00] [00]
      11. \n
    \n
    \n

    Angular

    \n

    Add the following lines to app/app.module.ts:

    \n
    import { registerElement } from '@nativescript/angular';
    import { InputMask } from '@nstudio/nativescript-input-mask';

    registerElement('InputMask', () => InputMask);
    \n

    Use like a TextField with a mask property and other event properties:

    \n
    import { Component, OnInit } from '@angular/core';

    @Component({
    \tselector: 'ns-app',
    \ttemplate: `
    \t\t<StackLayout>
    \t\t\t<InputMask mask=\"([000]) [000]-[0000]\" text=\"1235551111\" (maskedValueChange)=\"onMaskedValueChange($event)\" (completedChange)=\"onCompletedChage($event)\"> </InputMask>
    \t\t</StackLayout>
    \t    `    ,
    })
    export class AppComponent {
    \tonMaskedValueChange(args) {
    \t\t// e.g. `(123) 555-1111`
    \t\tconsole.log('Masked value:', args.value);
    \t}

    \tonCompletedChange(args) {
    \t\t// `args.value` indicates whether the field contains all mandatory characters.
    \t\tconsole.log('Completed:', args.value);
    \t}
    }
    \n

    Note that masks can be bound and changed on the fly. See demo app for a working implementation.

    \n

    API

    \n

    The InputMask class extends TextField and implements the following additional properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    mask""The mask property to apply to text entered into the field.
    maskedValue""A formatted value of original input using mask.
    completedfalseIndicates whether all mandatory characters have been filled.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":3,"lastWeek":11,"lastMonth":112}},"@nativescript/template-master-detail-vue":{"name":"@nativescript/template-master-detail-vue","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Vue Master Detail Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Editable master-detail interface
      • \n
    • Integration with Firebase database
      • \n
    • Works offline
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-master-detail-vue --template @nativescript/template-master-detail-vue
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-master-detail-vue --template nativescript-app-templates/packages/template-master-detail-vue
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The template has the following components:

    \n
      \n
    • /app/components/CarList.vue - the master list page. It gets the data and displays it in a list. On item tap, it navigates to the item details page.
      • \n
    • /app/components/CarDetails.vue - the item details page. Displays the details of the tapped item. Has an Edit button that leads to the edit page.
      • \n
    • /app/components/CarDetailsEdit.vue - the item details edit page. Provides edit options for the selected item. The Done button saves the changes.
      • \n
    \n

    There is one model to represent the data items:

    \n
      \n
    • /app/shared/cars/car-model
      • \n
    \n

    The template also provides a data service:

    \n
      \n
    • /app/shared/cars/car-service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
      • \n
    \n

    Firebase integration

    \n

    The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app/app.js file.

    \n

    [Optional] Firebase database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":1,"lastWeek":5,"lastMonth":382}},"nativescript-secure-storage":{"name":"nativescript-secure-storage","version":"2.6.2","license":"MIT","readme":"

    NativeScript Secure Storage plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-secure-storage
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device.

    \n\n

    PRO TIP: Want to store objects instead of strings? Use JSON.stringify with set and JSON.parse with get.

    \n

    API

    \n

    set | setSync

    \n
    \n

    "In order to GET something you first need to SET it."

    \n

    -- Eddy Verbruggen

    \n
    \n
    JavaScript
    \n
    // require the plugin
    var SecureStorage = require(\"nativescript-secure-storage\").SecureStorage;

    // instantiate the plugin
    var secureStorage = new SecureStorage();

    // async
    secureStorage.set({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    }).then(
      function(success) {
        console.log(\"Successfully set a value? \" + success);
      }
    );

    // sync
    var success = secureStorage.setSync({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    });
    \n
    TypeScript
    \n
    // require the plugin
    import { SecureStorage } from \"nativescript-secure-storage\";

    // instantiate the plugin
    let secureStorage = new SecureStorage();

    // async
    secureStorage.set({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    }).then(success => console.log(\"Successfully set a value? \" + success));

    // sync
    const success = secureStorage.setSync({
      key: \"foo\",
      value: \"I was set at \" + new Date()
    });
    \n

    get | getSync

    \n

    Will return null if not found.

    \n
    JavaScript
    \n
    // async
    secureStorage.get({
      key: \"foo\"
    }).then(
      function(value) {
        console.log(\"Got value: \" + value);
      }
    );

    // sync
    var value = secureStorage.getSync({
      key: \"foo\"
    });
    \n
    TypeScript
    \n
    // async
    secureStorage.get({
      key: \"foo\"
    }).then(value => console.log(\"Got value: \" + value));

    // sync
    const value = secureStorage.getSync({
      key: \"foo\"
    });
    \n

    remove | removeSync

    \n
    JavaScript
    \n
    // async
    secureStorage.remove({
      key: \"foo\"
    }).then(
      function(success) {
        console.log(\"Removed value? \" + success);
      }
    );

    // sync
    var success = secureStorage.removeSync({
      key: \"foo\"
    });
    \n
    TypeScript
    \n
    // async
    secureStorage.remove({
      key: \"foo\"
    }).then(success => console.log(\"Successfully removed a value? \" + success));

    // sync
    const success = secureStorage.removeSync({
      key: \"foo\"
    });
    \n

    removeAll | removeAllSync

    \n
    JavaScript
    \n
    // async
    secureStorage.removeAll().then(
      function(success) {
        console.log(\"Removed value? \" + success);
      }
    );

    // sync
    var success = secureStorage.removeAllSync();
    \n
    TypeScript
    \n
    // async
    secureStorage.removeAll().then(success => console.log(\"Successfully removed a value? \" + success));

    // sync
    const success = secureStorage.removeAllSync();
    \n

    clearAllOnFirstRun | clearAllOnFirstRunSync

    \n

    These functions can be used if you want to clear data when your app is reinstalled.

    \n

    This is only really useful on iOS because if you write something (through this plugin) to the Keychain, this data won't be removed when the app is uninstalled.\nSo the next time the same app is installed, it will find the data in the keychain.

    \n

    So if you want to clear 'lingering' data from a previous install, make sure you run one of these\nmethods before using other methods this plugin provides.

    \n
    JavaScript
    \n
    // async
    secureStorage.clearAllOnFirstRun().then(
      function(success) {
          console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
      }
    );

    // sync
    var success = secureStorage.clearAllOnFirstRunSync();
    \n
    TypeScript
    \n
    // async
    secureStorage.clearAllOnFirstRun().then(success => {
        console.log(success ? \"Successfully removed all data on the first run\" : \"Data not removed because this is not the first run\");
    });

    // sync
    const success = secureStorage.clearAllOnFirstRunSync();
    \n

    isFirstRun | isFirstRunSync

    \n

    As a bonus, you can piggyback the 'first run' mechanism to do anything you want when the plugin detects\nthis is the first run (after an install or install-delete-reinstall).

    \n
    TypeScript
    \n
    // sync
    if (secureStorage.isFirstRunSync()) {
      // do whatever you want
    }

    // async
    secureStorage.isFirstRun().then(isFirst => {
      // if isFirst is true, do whatever you like
    });
    \n

    Usage with Angular

    \n

    In your view:

    \n
    <Button text=\"set secure value\" (tap)=\"setSecureValue()\"></Button>
    \n

    In your @Component:

    \n
    import { SecureStorage } from \"nativescript-secure-storage\";

    export class MyComponent {
      secureStorage = new SecureStorage();

      // a method that can be called from your view
      setSecureValue() {
        this.secureStorage.set({
          key: 'myKey',
          value: 'my value'
        }).then(success => { console.log(success)});
      }
    }
    \n

    iOS Security++

    \n

    By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

    \n
    declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
    const secureStorage = new SecureStorage(kSecAttrAccessibleWhenUnlockedThisDeviceOnly);
    \n

    iOS Simulator

    \n

    Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

    \n

    If you're running into issues similar to issue_10, consider using the default behaviour again.

    \n

    Credits

    \n\n","downloadStats":{"lastDay":26,"lastWeek":87,"lastMonth":546}},"nativescript-texttospeech":{"name":"nativescript-texttospeech","version":"3.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript-TextToSpeech :loudspeaker:

    \n

    A Text to Speech NativeScript plugin for Android & iOS

    \n

    Native Controls

    \n\n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-texttospeech
    \n

    This command automatically installs the necessary files, as well as stores nativescript-texttospeech as a dependency in your project's package.json file.

    \n

    Video Tutorial

    \n

    egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

    \n

    Usage

    \n
    /// javascript
    var TextToSpeech = require('nativescript-texttospeech');

    /// TypeScript
    import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeech';

    let TTS = new TNSTextToSpeech();

    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', /// *** required ***
      speakRate: 0.5, // optional - default is 1.0
      pitch: 1.0, // optional - default is 1.0
      volume: 1.0, // optional - default is 1.0
      locale: 'en-GB', // optional - default is system locale,
      finishedCallback: Function // optional
    };

    // Call the `speak` method passing the SpeakOptions object
    TTS.speak(speakOptions).then(
      () => {
        // everything is fine
      },
      err => {
        // oops, something went wrong!
      }
    );
    \n

    API

    \n
      \n
    • \n

      speak(options: SpeakOptions): Promise<any> - start speaking with the given options

      \n
      • \n
    • \n

      pause(): void - pause the speech

      \n
      • \n
    • \n

      resume(): void - resume the speech

      \n
      • \n
    • \n

      destroy(): void - release resources for the speech synthesizer/engine

      \n
      • \n
    • \n

      SpeakOptions = {}

      \n
        \n
      • text: string ** required **
        • \n
      • queue?: boolean = false
        • \n
      • pitch?: number = 1.0
        • \n
      • speakRate?: number = 1.0
        • \n
      • volume?: number = 1.0
        • \n
      • locale?: string = default system locale
        • \n
      • language?: string = default system language ** Android only **
        • \n
      • finishedCallback?: Function
        • \n
      \n
      • \n
    \n

    If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code. If both are set, the custom locale will be used.

    \n

    The plugin checks whether the supplied locale/language code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

    \n

    Example with language code only:

    \n
    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', // *** required ***
      language: 'en' // english language will be used
    };
    \n

    Example with locale:

    \n
    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', // *** required ***
      locale: 'en-AU' // australian english language will be used
    };
    \n

    Tip

    \n
      \n
    • The speech synthesizer takes a moment to initialize on most devices. A simple way to get around this (tested in the demo app) is to create your new instance of the TNSTextToSpeech and then immediately call the speak method with the options objects text value = "". This will force the synthesizer to "warm up" and not speak anything. Now when you call the speak method for your app's functionality it will already have "warmed up" the synthesizer so the delay should be minimal.\nIt's possible this "Warm up" process could be put into the plugin source itself, I don't have time to do it right now but welcome any contribution that is well tested to make this the default behavior of the synthesizers.
      • \n
    \n

    Android Only Methods

    \n
      \n
    • getAvailableLanguages(): Promise<Array<Language>>; - returns an array of available languages (use to prevent using non-existing language/local codes)
      • \n
    \n

    Credits

    \n

    Inspired by James Montemagno's TextToSpeech Xamarin plugin

    \n

    Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

    \n","downloadStats":{"lastDay":11,"lastWeek":59,"lastMonth":380}},"@nativescript/template-master-detail":{"name":"@nativescript/template-master-detail","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core Master-Detail App Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Editable master-detail interface
      • \n
    • Integration with Firebase database
      • \n
    • Works offline
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-master-detail-js --template @nativescript/template-master-detail
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-master-detail-js --template nativescript-app-templates/packages/template-master-detail
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n
      \n
    • /app/app-root - sets up a Frame that lets you navigate between pages.
      • \n
    \n

    The template has the following page modules:

    \n
      \n
    • /app/cars/cars-list-page - the master list page. It gets the data and displays it in a list. On item tap, it navigates to the item details page.
      • \n
    • /app/cars/car-detail-page/car-detail-page - the item details page. Displays the details of the tapped item. Has an Edit button that leads to the edit page.
      • \n
    • /app/cars/car-detail-edit-page/car-detail-edit-page - the item details edit page. Provides edit options for the selected item. The Done button saves the changes.
      • \n
    \n

    There is one model to represent the data items:

    \n
      \n
    • /app/cars/shared/car-model
      • \n
    \n

    The template also provides a data service:

    \n
      \n
    • /app/cars/shared/car-service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
      • \n
    \n

    Firebase integration

    \n

    The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app/app.js file. The initialization script is located at /app/shared/firebase.common.js.

    \n

    [Optional] Firebase database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Each component has 3 style files located in its folder:

    \n
      \n
    • ../_{page-name}-common.scss - the component common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • ../{page-name}.android.scss - the component Android style sheet. These style rules are applied to Android only.
      • \n
    • ../{page-name}.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":3,"lastWeek":7,"lastMonth":371}},"nativescript-ar":{"name":"nativescript-ar","version":"1.1.0","license":"MIT","readme":"

    NativeScript Augmented Reality

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    Tip: give this article by TJ a read if you want a nice introduction to AR in NativeScript. It uses an older version of the plugin, but it's still quite relevant.

    \n
    \n

    Supported platforms

    \n
      \n
    • iPhone SE, 6s, iPad Pro, iPad 2017, or newer support ARKit. Running iOS 11 or newer.
      • \n
    • Many Android devices support ARCore nowadays. Obviously the faster the device, the better the experience.
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-ar
    \n

    Embedding an AR view

    \n\n

    Types of AR experiences

    \n\n

    Using the AR API

    \n\n

    Running the demos

    \n

    To dive in quickly, install NativeScript if you don't have it yet: npm i -g nativescript,\nthen clone this repo:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-ar
    cd nativescript-ar/src
    \n

    In the src folder you'll find a package.json which has the commands to build and run these demos:

    \n

    Solar System (Vue)

    \n
    npm run demo.solarsystem.ios 
    npm run demo.solarsystem.android
    \n

    Pokémon (Angular)

    \n
    npm run demo.pokemon.ios
    npm run demo.pokemon.android
    \n

    Glasses (Angular)

    \n
    npm run demo.glasses.ios
    npm run demo.glasses.android
    \n

    TypeScript demo

    \n

    This is just a kitchen sink demo with a lot of random stuff.

    \n
    npm run demo.ios
    npm run demo.android
    \n

    JavaScript demo

    \n

    This is a super simple demo which show how to integrate this plugin with plain JavaScript NativeScript apps.

    \n
    npm run demo.plainjs.ios
    npm run demo.plainjs.android
    \n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":79}},"nativescript-code-push":{"name":"nativescript-code-push","version":"2.0.2","license":"MIT","readme":"

    NativeScript plugin for CodePush

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    A live-update service for your NativeScript apps!

    \n
    \n

    📣 UPDATE May 27 2019: we're most likely renaming this solution before officially launching it. Hold your breath!

    \n
    \n
    \n Optional reading: what this is, and how it works\n

    A NativeScript app is composed of XML/HTML, CSS and JavaScript files and any accompanying images, which are bundled together by the NativeScript CLI and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.

    \n

    The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your code and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!

    \n

    In order to ensure that your end users always have a functioning version of your app, the CodePush plugin maintains a copy of the previous update, so that in the event that you accidentally push an update which includes a crash, it can automatically roll back. This way, you can rest assured that your newfound release agility won't result in users becoming blocked before you have a chance to roll back on the server. It's a win-win-win!

    \n\n

    Architectural overview of the solution - you don't need to worry about all of this

    \n
    \n

    What can (and will) be CodePushed?

    \n
      \n
    • Anything inside your /app folder.
      • \n
    • Anything inside your /node_modules folder.
      • \n
    \n
    \n

    💁‍♂️ Note that we don't actually use those folders, but the app folder in platforms/ios/<appname>/app and platforms/android/app/src/main/assets/app, the benefit of which is we don't "care" if you use Webpack or Uglify or whatever tools you use to minify or scramble your app's assets.

    \n
    \n

    What can't (and won't):

    \n
      \n
    • NativeScript platform updates. Example: bumping tns-android from version 2.5.1 to 2.5.2.
      • \n
    • Plugins updates that also require a different version of a native library it depends on.
      • \n
    \n

    So as long as you don't change versions of dependencies and tns platforms in your package.json you\ncan push happily. And if you do bump a version of a dependency make sure there are no changed platform libraries.

    \n

    Getting Started

    \n

    Globally install the NativeScript CodePush CLI

    \n
    npm i -g nativescript-code-push-cli
    \n
    \n

    💁‍♂️ This will also add the global nativescript-code-push command to your machine. You can check the currently installed version with nativescript-code-push -v.

    \n
    \n

    Login or register with the service

    \n

    Check if you're already logged in, and with which email address:

    \n
    nativescript-code-push whoami
    \n

    Log in if you already have an account:

    \n
    nativescript-code-push login
    \n

    Register if you don't have an account yet:

    \n
    nativescript-code-push register
    \n

    This will open a browser where you can provide your credentials, after which you can create an access key that\nyou can paste in the console.

    \n

    You should now have a .nativescript-code-push.config file in your home folder which will automatically\nauthenticate you with the server on this machine from now on.

    \n
    \n

    Note that you could use a that web interface for managing you apps, but the CLI is much more sophisticated, so it's recommended to use the command line interface.

    \n
    \n

    To log out, you can run nativescript-code-push logout which will also remove the config file.

    \n

    To perform a headless login (without opening a browser), you can do: nativescript-code-push login --accessKey <access key>.

    \n

    Register your app with the service

    \n

    Create an app for each platform you target. That way you can roll out release seperately for iOS and Android.

    \n
    \n

    ⚠️ The appname must be unique, and should not contain dashes (-).

    \n
    \n
    nativescript-code-push app add <appname> <platform>

    # examples:
    nativescript-code-push app add MyAppIOS ios
    nativescript-code-push app add MyAppAndroid android
    \n
    \n

    💁‍♂️ This will show you your deployment keys you'll need when connecting to the CodePush server. If you want to list those keys at any later time, use nativescript-code-push deployment ls <appName> --displayKeys.

    \n
    \n
    \n

    💁‍♂️ All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels. If you need more channels/deployments, simply run: nativescript-code-push deployment add <appName> <deploymentName>.

    \n
    \n
    \n

    💁‍♂️ Want to rename your app? At any time, use the command: nativescript-code-push app rename <oldName> <newName>

    \n
    \n
    \n

    💁‍♂️ Want to delete an app? At any time, use the command: nativescript-code-push app remove <appName> - this means any apps that have been configured to use it will obviously stop receiving updates.

    \n
    \n

    List your registered apps

    \n
    nativescript-code-push app ls
    \n

    Add this plugin to your app

    \n
    tns plugin add nativescript-code-push
    \n
    \n

    ⚠️ If you're restricting access to the internet from within your app, make sure you whitelist our CodePush server (https://nativescript-codepush-server.herokuapp.com) and File server (https://s3.eu-west-1.amazonaws.com).

    \n
    \n

    Checking for updates

    \n

    With the CodePush plugin installed and configured, the only thing left is to add the necessary code to your app to control when it checks for updates.

    \n

    If an update is available, it will be silently downloaded, and installed.

    \n

    Then based on the provided InstallMode the plugin either waits until the next cold start (InstallMode.ON_NEXT_RESTART),\nwarm restart (InstallMode.ON_NEXT_RESUME), or a positive response to a user prompt (InstallMode.IMMEDIATE).

    \n

    Note that Apple doesn't want you to prompt the user to restart your app, so use InstallMode.IMMEDIATE on iOS only for Enterprise-distributed apps (or when testing your app through TestFlight for instance).

    \n
    \n

    💁‍♂️ Check out the demo for a solid example.

    \n
    \n
    // import the main plugin classes
    import { CodePush } from \"nativescript-code-push\";

    // and at some point in your app:
    CodePush.sync({
      deploymentKey: \"your-deployment-key\" // note that this key depends on the platform you're running on (see the example below)
    });
    \n

    There's a few things you can configure - this TypeScript example has all the possible options:

    \n
    import { CodePush, InstallMode, SyncStatus } from \"nativescript-code-push\";
    import { isIOS } from \"tns-core-modules/platform\";

    CodePush.sync({
        deploymentKey: isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
        installMode: InstallMode.ON_NEXT_RESTART, // this is the default install mode; the app updates upon the next cold boot (unless the --mandatory flag was specified while pushing the update) 
        mandatoryInstallMode: isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE, // the default is InstallMode.ON_NEXT_RESUME which doesn't bother the user as long as the app is in the foreground. InstallMode.IMMEDIATE shows an installation prompt. Don't use that for iOS AppStore distributions because Apple doesn't want you to, but if you have an Enterprise-distributed app, go right ahead!
        updateDialog: { // only used for InstallMode.IMMEDIATE
          updateTitle: \"Please restart the app\", // an optional title shown in the update dialog 
          optionalUpdateMessage: \"Optional update msg\",   // a message shown for non-\"--mandatory\" releases 
          mandatoryUpdateMessage: \"Mandatory update msg\", // a message shown for \"--mandatory\" releases
          optionalIgnoreButtonLabel: \"Later\", // if a user wants to continue their session, the update will be installed on next resume
          mandatoryContinueButtonLabel: isIOS ? \"Exit now\" : \"Restart now\", // On Android we can kill and restart the app, but on iOS that'    s not possible so the user has to manually restart it. That's why we provide a different label in this example.
          appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to CodePush
        }
      }, (syncStatus: SyncStatus): void => {
        console.log(\"CodePush syncStatus: \" + syncStatus);
        if (syncStatus === SyncStatus.UP_TO_DATE) {
          console.log(\"CodePush: no pending updates; you'    re running the latest version!\");
        } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
          console.log(\"    CodePush: update installed - it will be activated upon next cold boot\");
        }
    });
    \n
    \n Click here to see a JavaScript example\n
    var CodePush = require(\"nativescript-code-push\").CodePush;
    var InstallMode = require(\"nativescript-code-push\").InstallMode;
    var SyncStatus = require(\"nativescript-code-push\").SyncStatus;
    var platform = require(\"tns-core-modules/platform\");

    CodePush.sync({
        deploymentKey: platform.isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
        installMode: InstallMode.ON_NEXT_RESTART,
        mandatoryInstallMode: platform.isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE,
        updateDialog: {
          optionalUpdateMessage: \"Optional update msg\",
          updateTitle: \"Please restart the app\",
          mandatoryUpdateMessage: \"Mandatory update msg\",
          optionalIgnoreButtonLabel: \"Later\",
          mandatoryContinueButtonLabel: platform.isIOS ? \"Exit now\" : \"Restart now\",
          appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to CodePush
        }
    }, function (syncStatus) {
        if (syncStatus === SyncStatus.UP_TO_DATE) {
          console.log(\"CodePush: no pending updates; you're running the latest version!\");
        } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
          console.log(\"CodePush: update installed - it will be activated upon next cold boot\");
        }
    });
    \n
    \n

    When should this check run?

    \n

    It's recommended to check for updates more than once in a cold boot cycle,\nso it may be easiest to tie this check to the resume event (which usually also runs on app startup):

    \n
    import * as application from \"tns-core-modules/application\";
    import { CodePush } from \"nativescript-code-push\";

    // add this in some central place that's executed once in a lifecycle
    application.on(application.resumeEvent, () => {
      CodePush.sync(...);
    });
    \n
    \n Click here to see a JavaScript example\n
    var application = require(\"tns-core-modules/application\");

    application.on(application.resumeEvent, function () {
      // call the sync function
    });
    \n
    \n

    Releasing an update

    \n

    Once your app has been configured and distributed to your users, and you've made some code and/or asset changes,\nit's time to instantly unleash those changes onto your users!

    \n
    \n

    ⚠️ Make sure to create a release build first, so use the same command that you'd use for app store distribution, just don't send it to the AppStore. You can even Webpack and Uglify your app, it's all transparent to this plugin.

    \n
    \n
    \n

    💁‍♂️ When releasing updates to CodePush, you do not need to bump your app's version since you aren't modifying the app store version at all. CodePush will automatically generate a "label" for each release you make (e.g. v3) in order to help identify it within your release history.

    \n
    \n

    The easiest way to do this is to use the release command in our CodePush CLI. Its (most relevant) options are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    paramaliasdefaultdescription
    deploymentNamed"Staging"Deploy to either "Staging" or "Production".
    descriptiondesnot setDescription of the changes made to the app with this release.
    targetBinaryVersiontApp_ResourcesSemver expression that specifies the binary app version(s) this release is targeting (e.g. 1.1.0, ~1.2.3). The default is the exact version in App_Resources/iOS/Info.plist or App_Resources/Android/AndroidManifest.xml.
    mandatorymnot setThis specifies whether or not the update should be considered "urgent" (e.g. it includes a critical security fix). This attribute is simply round tripped to the client, who can then decide if and how they would like to enforce it. If this flag is not set, the update is considered "not urgent" so you may choose to wait for the next cold boot of the app.
    \n

    Have a few examples for both platforms:

    \n

    iOS

    \n
    nativescript-code-push release <codepush-ios-appname> ios # deploy to Staging
    nativescript-code-push release <codepush-ios-appname> ios --d Production # deploy to Production (default: Staging)
    nativescript-code-push release <codepush-ios-appname> ios --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in Info.plist)
    nativescript-code-push release <codepush-ios-appname> ios --mandatory --description \"My mandatory iOS version\" # a release for iOS that needs to be applied ASAP.
    \n

    Android

    \n
    nativescript-code-push release <codepush-android-appname> android # deploy to Staging
    nativescript-code-push release <codepush-android-appname> android --d Production # deploy to Production (default: Staging)
    nativescript-code-push release <codepush-android-appname> android --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in AndroidManifest.xml)
    \n
    \n Click here to learn more about the --targetBinaryVersion param\nThe `targetBinaryVersion` specifies the store/binary version of the application you are releasing the update for, so that only users running that version will receive the update, while users running an older and/or newer version of the app binary will not. This is useful for the following reasons:\n
      \n
    1. \n

      If a user is running an older binary version, it's possible that there are breaking changes in the CodePush update that wouldn't be compatible with what they're running.

      \n
      2. \n
    2. \n

      If a user is running a newer binary version, then it's presumed that what they are running is newer (and potentially incompatible) with the CodePush update.

      \n
      3. \n
    \n

    If you ever want an update to target multiple versions of the app store binary, we also allow you to specify the parameter as a semver range expression. That way, any client device running a version of the binary that satisfies the range expression (i.e. semver.satisfies(version, range) returns true) will get the update. Examples of valid semver range expressions are as follows:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Range ExpressionWho gets the update
    1.2.3Only devices running the specific binary app store version 1.2.3 of your app
    *Any device configured to consume updates from your CodePush app
    1.2.xDevices running major version 1, minor version 2 and any patch version of your app
    1.2.3 - 1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (inclusive)
    >=1.2.3 <1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (exclusive)
    1.2Equivalent to >=1.2.0 <1.3.0
    ~1.2.3Equivalent to >=1.2.3 <1.3.0
    ^1.2.3Equivalent to >=1.2.3 <2.0.0
    \n

    *NOTE: If your semver expression starts with a special shell character or operator such as >, ^, or **\n, the command may not execute correctly if you do not wrap the value in quotes as the shell will not supply the right values to our CLI process. Therefore, it is best to wrap your targetBinaryVersion parameter in double quotes when calling the release command, e.g. code-push release MyApp-iOS updateContents ">1.2.3".

    \n

    NOTE: As defined in the semver spec, ranges only work for non pre-release versions: https://github.com/npm/node-semver#prerelease-tags. If you want to update a version with pre-release tags, then you need to write the exact version you want to update (1.2.3-beta for example).

    \n

    The following table outlines the version value that CodePush expects your update's semver range to satisfy for each respective app type:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSource of app store version
    NativeScript (iOS)The CFBundleShortVersionString key in the App_Resources/iOS/Info.plist file
    NativeScript (Android)The android:versionName key in the App_Resources/Android/AndroidManifest.xml file
    \n

    NOTE: If the app store version in the metadata files are missing a patch version, e.g. 2.0, it will be treated as having a patch version of 0, i.e. 2.0 -> 2.0.0. The same is true for app store version equal to plain integer number, 1 will be treated as 1.0.0 in this case.

    \n
    \n

    Gaining insight in past releases

    \n

    Here are a few CodePush CLI commands you may find useful:

    \n

    Which releases did I create and what are the install metrics?

    \n

    Using a command like this will tell you how many apps have the update installed:

    \n
    nativescript-code-push deployment history <codepush-appname> Staging
    \n

    Which produces something like this:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    LabelRelease TimeApp VersionMandatoryDescriptionInstall Metrics
    v2an hour ago1.0.0YesMandatory iOS version!Active: 11% (2 of 19)
    Total: 2
    v12 hours ago1.0.0NoAwesome iOS version!Active: 26% (5 of 19)
    Total: 5
    \n

    Give me the details of the current release!

    \n

    This dumps the details of the most recent release for both the Staging and Production environments of your app:

    \n
    nativescript-code-push deployment ls <codepush-appname>
    \n

    And if you want to dump your deployment keys as well, use:

    \n
    nativescript-code-push deployment ls <codepush-appname> --displayKeys
    \n

    Which produces something like this:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDeployment KeyUpdate MetadataInstall Metrics
    Productionr1DVaLfKjc0Y5d6BzqX4..No updates releasedNo installs recorded
    StagingYTmVMy0GLCknVu3GVIyn..Label: v5Active: 11% (2 of 19)
    App Version: 1.0.0Total: 2
    Mandatory: Yes
    Release Time: an hour ago
    Released By: eddyverbruggen@gmail.com
    Description: Mandatory iOS version!
    \n

    Clearing the release history

    \n

    This won't roll back any releases, but it cleans up the history metadata (of the Staging app, in this case):

    \n
    nativescript-code-push deployment clear <codepush-appname> Staging
    \n

    Advanced topics

    \n

    Testing CodePush packages during development

    \n

    You may want to play with CodePush before using it in production (smart move!).\nPerform these steps once you've pushed an update and added the sync command to your app:

    \n
      \n
    • $ tns run <platform>. On an iOS device add the --release flag so LiveSync doesn't interfere.
      • \n
    • kill and restart the app after the update is installed
      • \n
    \n

    Running the demo app

    \n

    You may also play with CodePush by using its demo app. Here are the steps you need to perform in order to observe an app update:

    \n
      \n
    • register with the service (nativescript-code-push register) and add the demo app to your account (nativescript-code-push app add <appname> <platform> nativescript)
      • \n
    • once the app is registered you will see its deployment keys in the console, use them to update the ones in the demo
      • \n
    • go to src and run npm run preparedemo - this will build the plugin and add a reference to the demo app
      • \n
    • prepare an app that will be used as an "update version" (for example, uncomment one of the CODEPUSH labels and comment the APPSTORE label), then run tns build <platform>
      • \n
    • release the update (nativescript-code-push release <appname> <platform>)
      • \n
    • you can ensure it appears in the list with updates (nativescript-code-push deployment history <appname> Staging)
      • \n
    • prepare an app that will be used as an "official release version" (for example, comment the CODEPUSH label and uncomment the APPSTORE label), then run tns run <platform>
      • \n
    • when the app is deployed on the device, you should see the "official release version" along with information about an installed update
      • \n
    • close the app (and remove it from device's recent apps to ensure its next start will be a cold start) and run it again - you should now see the "update version" of the app
      • \n
    \n

    Patching Update Metadata

    \n

    After releasing an update, there may be scenarios where you need to modify one or more of the metadata attributes associated with it\n(e.g. you forgot to mark a critical bug fix as mandatory.

    \n
    \n Read all about patching metadata by clicking here.\n

    You can update metadata by running the following command:

    \n
    nativescript-code-push patch <appName> <deploymentName>
    [--label <releaseLabel>]
    [--mandatory <isMandatory>]
    [--description <description>]
    [--targetBinaryVersion <targetBinaryVersion>]
    \n
    \n

    ⚠️ This command doesn't allow modifying the actual update contents of a release. If you need to respond to a release that has been identified as being broken, you should use the rollback command to immediately roll it back, and then if necessary, release a new update with the approrpriate fix when it is available.

    \n
    \n

    Aside from the appName and deploymentName, all parameters are optional, and therefore, you can use this command to update just a single attribute or all of them at once.\nCalling the patch command without specifying any attribute flag will result in a no-op.

    \n
    # Mark the latest production release as mandatory
    nativescript-code-push patch MyAppiOS Production -m

    # Add a \"mina and max binary version\" to an existing release
    nativescript-code-push patch MyAppiOS Staging -t \"1.0.0 - 1.0.5\"
    \n
    \n

    Promoting Updates

    \n
    \n Read this if you want to easily promote releases from Staging to Production\n

    Once you've tested an update against a specific deployment (e.g. Staging),\nand you want to promote it (e.g. dev->staging, staging->production),\nyou can simply use the following command to copy the release from one deployment to another:

    \n
    nativescript-code-push promote <appName> <sourceDeploymentName> <destDeploymentName>
    [--description <description>]
    [--label <label>]
    [--mandatory]
    [--targetBinaryVersion <targetBinaryVersion]

    # example
    nativescript-code-push promote CodePushDemoIOS Staging Production --description 'Promoted from Staging to Production'
    \n

    The promote command will create a new release for the destination deployment, which includes the exact code and metadata (description, mandatory and target binary version) from the latest release of the source deployment.\nWhile you could use the release command to "manually" migrate an update from one environment to another, the promote command has the following benefits:

    \n
      \n
    1. \n

      It's quicker, since you don't need to reassemble the release assets you want to publish or remember the description/app store version that are associated with the source deployment's release.

      \n
      2. \n
    2. \n

      It's less error-prone, since the promote operation ensures that the exact thing that you already tested in the source deployment (e.g. Staging) will become active in the destination deployment (e.g. Production).

      \n
      3. \n
    \n
    \n

    💁‍♂️ Unless you need to make changes to your code, the recommended workflow is taking advantage of the automatically created Staging and Production environments, and do all releases directly to Staging, and then perform a promote from Staging to Production after performing the appropriate testing.

    \n
    \n
    \n

    Rolling Back Updates

    \n
    \n Read this if you want to learn all about rollbacks\n

    A deployment's release history is immutable, so you cannot delete or remove individual updates once they have been released without deleting all of the deployment's release history.\nHowever, if you release an update that is broken or contains unintended features,\nit is easy to roll it back using the rollback command:

    \n
    nativescript-code-push rollback <appName> <deploymentName>

    #example
    nativescript-code-push rollback MyAppiOS Production
    \n

    This has the effect of creating a new release for the deployment that includes the exact same code and metadata as the version prior to the latest one.\nFor example, imagine that you released the following updates to your app:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ReleaseDescriptionMandatory
    v1Initial release!Yes
    v2Added new featureNo
    v3Bug fixesYes
    \n

    If you ran the rollback command on that deployment, a new release (v4) would be created that included the contents of the v2 release.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ReleaseDescriptionMandatory
    v1Initial release!Yes
    v2Added new featureNo
    v3Bug fixesYes
    v4 (Rollback from v3 to v2)Added new featureNo
    \n

    End-users that had already acquired v3 would now be "moved back" to v2 when the app performs an update check.\nAdditionally, any users that were still running v2, and therefore, had never acquired v3, wouldn't receive an update since they are already running the latest release\n(this is why our update check uses the package hash in addition to the release label).

    \n

    If you would like to rollback a deployment to a release other than the previous (e.g. v3 -> v2), you can specify the optional --targetRelease parameter:

    \n
    nativescript-code-push rollback MyAppiOS Production --targetRelease v34
    \n
    \n

    ⚠️ This rolls back the release to the previous CodePush version, NOT the AppStore version (if there was one in between).

    \n
    \n
    \n

    💁‍♂️ The release produced by a rollback will be annotated in the output of the deployment history command to help identify them more easily.

    \n
    \n
    \n

    App Collaboration

    \n
    \n Working on one app with multiple developers? Click here!\n

    If you will be working with other developers on the same CodePush app, you can add them as collaborators using the following command:

    \n
    nativescript-code-push collaborator add <appName> <collaboratorEmail>
    \n

    NOTE: This expects the developer to have already registered with CodePush using the specified e-mail address, so ensure that they have done that before attempting to share the app with them.

    \n

    Once added, all collaborators will immediately have the following permissions with regards to the newly shared app:

    \n
      \n
    1. View the app, its collaborators, deployments and release history.
      2. \n
    2. Release updates to any of the app's deployments.
      3. \n
    3. Rollback any of the app's deployments
      4. \n
    \n

    Inversely, that means that an app collaborator cannot do any of the following:

    \n
      \n
    1. Rename or delete the app
      2. \n
    2. Create, rename or delete new deployments within the app
      3. \n
    3. Clear a deployment's release history
      4. \n
    4. Add or remove collaborators from the app (although a developer can remove themself as a collaborator from an app that was shared with them).
      5. \n
    \n

    Over time, if someone is no longer working on an app with you, you can remove them as a collaborator using the following command:

    \n
    nativescript-code-push collaborator rm <appName> <collaboratorEmail>
    \n

    If at any time you want to list all collaborators that have been added to an app, you can simply run the following command:

    \n
    nativescript-code-push collaborator ls <appName>
    \n
    \n

    Using CodePush behind a proxy

    \n
    \n Click here to read all about Proxy Support\nBy default, the `login` command will automatically look for a system-wide proxy, specified via an `HTTPS_PROXY` or `HTTP_PROXY` environment variable, and use that to connect to the server.\nIf you'd like to disable this behavior, and have the CLI establish a direct connection, simply specify the `--noProxy` parameter when logging in:\n
    nativescript-code-push login --noProxy
    \n

    I'd you like to explicitly specify a proxy server that the CLI should use, without relying on system-wide settings,\nyou can instead pass the --proxy parameter when logging in:

    \n
    nativescript-code-push login --proxy https://foo.com:3454
    \n

    Once you've logged in, any inferred and/or specified proxy settings are persisted along with your user session.\nThis allows you to continue using the CLI without needing to re-authenticate or re-specify your preferred proxy.\nIf at any time you want to start or stop using a proxy, simply logout, and then log back in with the newly desired settings.

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":35}},"@voicethread/nativescript-audio-player":{"name":"@voicethread/nativescript-audio-player","version":"1.0.1","license":"Apache-2.0","readme":"

    @voicethread/nativescript-audio-player

    \n

    Nativescript audio player \"apple\" \"android\"

    \n

    \"npm\"

    \n
    \n

    @voicethread/nativescript-audio-player

    \n
    \n

    This plugin provides an audio player for Android and iOS that supports playback of both local files and remote URL audio files. For Android, MediaPlayer will internally cache remote files after first prepare/play. For iOS, the plugin will download and cache remote files on first prepare/play.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @voicethread/nativescript-audio-player --save
    \n

    OR

    \n
    ns plugin add @voicethread/nativescript-audio-player
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-player.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { AudioPlayer, AudioPlayerOptions } from '@voicethread/nativescript-audio-player';
    \n
      \n
    1. Play an audio file.
      2. \n
    \n
    protected _playOptions: AudioPlayerOptions = {
        audioFile: knownFolders.currentApp().path + '/audio/example.m4a';,
        loop: false,
        audioMixing: false,
        completeCallback: async result => {
            console.log('AudioPlayer - Audio file playback complete.', result);
        },
        errorCallback: errorObject => {
            console.error('AudioPlayer error!', JSON.stringify(errorObject));
        },
        infoCallback: infoObject => {
            console.info('AudioPlayer info: ', JSON.stringify(infoObject));
        },
    };
    this.player.prepareAudio(this._playOptions).then(status => {
        if (status) {    
            this.player.play();    
        } else {
            console.log('ERROR! Unable to prepare audio!');
        }
    });
    \n

    NOTE: If you want to play an HTTP URL, you'll also need to make some adjustments to your application to allow unsecure connections or URL access will fail silently.\nFor iOS, add the following to your app's Info.plist:

    \n
    <key>NSAppTransportSecurity</key>  
    <dict>  
        <key>NSAllowsArbitraryLoads</key>
        <true />  
    </dict>
    \n

    For Android, ensure your application tag in App_Resources/Android/src/main/AndroidManifest.xml has the following:

    \n
    android:usesCleartextTraffic=\"true\"
    \n

    Supported Audio Player options

    \n
    export interface AudioPlayerOptions {
      /**
       * Gets or sets the audio file url.
       */
      audioFile: string;

      /**
       * Gets or sets the callback when the currently playing audio file completes.
       * @returns {Object} An object containing the native values for the callback.
       */
      completeCallback?: Function;

      /**
       * Get or sets the player to loop playback.
       */
      loop: boolean;

      audioMixing?: boolean;

      /**
       * Gets or sets the callback when an error occurs with the audio player.
       * @returns {Object} An object containing the native values for the error callback.
       */
      errorCallback?: Function;

      /**
       * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
       * @returns {Object} An object containing the native values for the info callback.
       */
      infoCallback?: Function;
    }
    \n

    Audio Player exports

    \n
    export interface AudioPlayer {
      /**
       * native instance getters
       */
      readonly ios?: any;
      readonly android?: any;

      /**
       * Volume getter/setter
       */
      volume: any;

      /**
       * Prepare Audio player by preloading an audio file from file oath or URL
       * @function prepareAudio
       * @param options
       */
      prepareAudio(options: AudioPlayerOptions): Promise<boolean>;

      /**
       * Play current audio file that has been prepared by calling prepareAudio(options)
       */
      play(): Promise<boolean>;

      /**
       * Pauses playing audio file.
       */
      pause(): Promise<boolean>;

      /**
       * Seeks to specific time.
       */
      seekTo(time: number): Promise<boolean>;

      /**
       * Releases resources from the audio player.
       */
      dispose(): Promise<boolean>;

      /**
       * Check if the audio is actively playing.
       */
      isAudioPlaying(): boolean;

      /**
       * Get the duration of the audio file playing.
       */
      getAudioTrackDuration(): Promise<string>;

      /**
       * current time
       */
      readonly currentTime: number;
    }
    \n

    Acknowledgements

    \n

    This plugin is based on https://github.com/nstudio/nativescript-audio

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":2,"lastMonth":26}},"@nativescript/template-drawer-navigation-ng":{"name":"@nativescript/template-drawer-navigation-ng","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Angular Drawer Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Side drawer navigation
      • \n
    • Five blank pages hooked to the drawer navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-drawer-ng --template @nativescript/template-drawer-navigation-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-drawer-ng --template nativescript-app-templates/packages/template-drawer-navigation-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The RadSideDrawer component is set up as an application root view in:

    \n
      \n
    • /src/app/app-component - sets up the side drawer content and defines a page router outlet for the pages.
      • \n
    \n

    RadSideDrawer has the following component structure:

    \n
      \n
    • RadSideDrawer - The component to display a drawer on the page.
      • \n
    • tkDrawerContent directive - Marks the component that will hold the drawer content.
      • \n
    • tkMainContent directive - Marks the component that will hold the app main content.
      • \n
    \n

    There are five blank components located in these folders:

    \n
      \n
    • /src/app/browse/browse.component
      • \n
    • /src/app/featured/featured.component
      • \n
    • /src/app/home/home.component
      • \n
    • /src/app/search/search.component
      • \n
    • /src/app/settings/settings.component
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":636}},"@nativescript-community/ui-parallax":{"name":"@nativescript-community/ui-parallax","version":"0.0.2","license":"MIT","readme":"

    @nativescript-community/ui-parallax

    \n

    \"npm\"\n\"npm\"

    \n

    Install

    \n

    $ npm install @nativescript-community/ui-parallax

    \n

    Example xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \t xmlns:parallax=\"@nativescript-community/ui-parallax\"
    \tloaded=\"pageLoaded\">
      \t<parallax:ParallaxView controlsToFade=\"headerLabel,headerLabel2\">
    \t\t<parallax:Header class=\"header-template\" dropShadow=\"true\">
    \t\t\t<Label id=\"headerLabel\" text=\"Parallax\"></Label>
    \t\t\t<Label id=\"headerLabel2\" text=\"Component\"></Label>
    \t\t</parallax:Header>
    \t\t<parallax:Anchored class=\"anchor\">
    \t\t\t<Label id=\"titleLabel\" text=\"Parallax Template\"></Label>
    \t\t</parallax:Anchored>
    \t\t<parallax:Content class=\"body-template\">
    \t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.\">
    \t\t\t</TextView>
    \t\t</parallax:Content>
    \t</parallax:ParallaxView>
    </Page>
    \n

    Example CSS

    \n
    #headerLabel2
    {
    \tfont-size: 45;
    \thorizontal-align: center;
    \tmargin-top:-25;
    \tcolor:#B2EBF2;
    }
    #headerLabel{
    \tfont-size: 45;
    \thorizontal-align: center;
    \tpadding-top:75;
    \tcolor:#B2EBF2;
    }
    .header-template{
    \tbackground-color:#212121;
    \tbackground-image:url('~/images/mountains.png');
    \tbackground-size: cover;
    \theight: 200;
    }
    .body-template TextView{
    \tfont-size:20;
    \tpadding:5 15;
    \tborder:none;
    }
    .anchor{
    \theight: 55;
    \twidth:100%;
    \tbackground-color:#616161;
    }
    #titleLabel{
    \tfont-weight:bold;
    \tfont-size:25;
    \tpadding:5 15;
    \tcolor:#fff;

    }
    \n

    When using the parallax plugin you need at least two layout views inside of the <parallax:ParallaxView> element. <parallax:Header> and <parallax:Content>.
    \nThere is an optional third view called <parallax:Anchored> which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.

    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    controlsToFadepass it a comma delimited string with each control ID you want to fade out. In the above example it looks like controlsToFade="headerLabel,headerLabel2"
    dropShadowThe <parallax:Anchored> has a property called `` if set to true it will create a small drop shadow effect on the bottom of the anchor
    bounceon parallaxView you can set bounce to true to cause bounce effect
    onScrollfunction to handle onscroll event
    anchoredfunction to handle anchored event
    unanchoredfunction to handle unanchored event
    \n

    React

    \n

    In the root app.ts file

    \n
    import { registerParallax } from \"@nativescript-community/ui-parallax/react\"
    registerParallax()
    \n

    Component

    \n
            <parallaxView bounce controlsToFade=\"headerLabel,headerLabel2\"
                onLoaded={(args) => {
                    args.object.on('anchored', () => console.log('anchored'))
                    args.object.on('unanchored', () => console.log('unanchored'))
                    args.object.on('scroll', () => console.log('scroll'))
                }}>
                <parallaxHeader class=\"header-template\" height=\"300\">
                    <label id=\"headerLabel\" backgroundColor=\"purple\" text=\"Parallax\" width=\"100%\" />
                    <label id=\"headerLabel2\" text=\"Header Component\" />
                </parallaxHeader>
                <parallaxAnchored className=\"anchor\" iosIgnoreSafeArea>
                    <label id=\"titleLabel\" text=\"Mr. Anchor\" />
                </parallaxAnchored>
                <parallaxContent class=\"body-template\">
                    <label text=\"Content\" class=\"header\" textWrap=\"true\" />

                    <label textWrap=\"true\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet.\">
                    </label>
                </parallaxContent>
            </parallaxView>
    \n

    Plugin Development Work Flow.

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

    Special thanks to:

    \n

    JoshDSommer who developed the original plugin.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":38}},"nativescript-3dtouch":{"name":"nativescript-3dtouch","version":"1.2.2","license":{"type":"MIT","url":"https://github.com/EddyVerbruggen/nativescript-3dtouch/blob/master/LICENSE"},"readme":"

    NativeScript 3D Touch plugin

    \n
    \n

    DEPRECATED: Android 7.1 added support for app shortcuts, so for sake of feature parity this plugin has been upgraded to support Android as well, which meant I thought it would be best to rename it. So please consider upgrading to https://www.npmjs.com/package/nativescript-app-shortcuts.

    \n
    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Use when you want to

    \n
      \n
    • add those fancy home icon actions to your iPhone app,
      • \n
    • add them either statically or dynamically,
      • \n
    • use those to optionally deeplink inside your app.
      • \n
    \n\n

    Supported platforms

    \n
      \n
    • iPhone 6s / 6s Plus or newer, running iOS 9 or newer
      • \n
    • A simulator running the above, with a 3D Touch enabled touchpad
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-3dtouch
    \n

    And do yourself a favor by adding TypeScript support to your nativeScript app:

    \n
    tns install typescript
    \n

    Then open references.d.ts in the root of your project and add this line\nto get autocompletion and type-checking for this plugin:

    \n
    /// <reference path=\"./node_modules/nativescript-3dtouch/3dtouch.d.ts\" />
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device (see package.json for other commands).

    \n

    API

    \n

    available

    \n

    Check whether or not the device is capable.\nAndroid devices will also report false, so you can use this cross platform.

    \n
    JavaScript
    \n
    // require the plugin
    var ThreeDeeTouch = require(\"nativescript-3dtouch\").ThreeDeeTouch;

    // instantiate the plugin
    var threeDeeTouch = new ThreeDeeTouch();

    threeDeeTouch.available().then(
      function(available) {
        if (available) {
          console.log(\"This device is 3D Touch capable\");
        } else {
          console.log(\"No 3D Touch capability, ask the user to upgrade\");
        }
      }
    );
    \n
    TypeScript
    \n
    // require the plugin
    import {ThreeDeeTouch} from \"nativescript-3dtouch\";

    // instantiate the plugin
    let threeDeeTouch = new ThreeDeeTouch();

    threeDeeTouch.available().then((available) => {
      if (available) {
        console.log(\"This device is 3D Touch capable\");
      } else {
        console.log(\"No 3D Touch capability, ask the user to upgrade\");
      }
    });
    \n

    configureQuickActions

    \n

    When your app is running you can add those fancy Quick Actions to the Home Screen icon. You can configure up to four icons and they are 'cached' by iOS until you pass in a new set of icons. So you don't need to do this every time your app loads, but it can't really hurt of course.

    \n

    The type param (see the code sample below) is the most convenient way to relate the icon to the event you'll receive when the action was used to launch your app. So make sure it's unique amongst your icons.

    \n

    There are two types of icons currently supported: iconType and iconTemplate.

    \n

    iconType

    \n

    A value from a fixed list of icons which have been provided by Apple and look great (scroll down to the Objective-C enum and look at the sample below how to use them).

    \n

    iconTemplate

    \n

    Can be used to provide your own icon. It must be a valid name of an icon template in your Assets catalog. NativeScript allows you to add the icon to the app/App_Resources/iOS folder. If you add a file called Eye.png then reference it as Eye. More on these images below when we discuss static actions.

    \n
    JavaScript
    \n
    threeDeeTouch.configureQuickActions([
      {
        type: \"capturePhoto\",
        title: \"Snag a pic\",
        subtitle: \"You have 23 snags left\",
        iconType: UIApplicationShortcutIconTypeCapturePhoto
      },
      {
        type: \"beer\",
        title: \"Beer-tastic!\",
        subtitle: \"Check in & share\",
        iconTemplate: \"Beer\"
      }
    ]).then(function () {
      alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
    }, function(errorMessage) {
      alert(errorMessage);
    });
    \n
    TypeScript
    \n
    threeDeeTouch.configureQuickActions([
      {
        type: \"capturePhoto\",
        title: \"Snag a pic\",
        subtitle: \"You have 23 snags left\",
        iconType: UIApplicationShortcutIconType.CapturePhoto
      },
      {
        type: \"beer\",
        title: \"Beer-tastic!\",
        subtitle: \"Check in & share\",
        iconTemplate: \"Beer\"
      }
    ]).then(() => {
      alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
    }, (errorMessage) => {
      alert(errorMessage);
    });
    \n

    Capturing the Action

    \n

    When a home icon is pressed, your app launches. You probably want to perform different actions based on the home icon action\nthat was picked (like routing to a different page), so you need a way to capture the event.

    \n

    NativeScript with XML

    \n

    In a non-Angular NativeScript app we need to extend app.js or app.ts and import the plugin,\nthen call the setQuickActionCallback function. So in case of app.ts change it from something like this:

    \n
    import * as application from \"application\";
    application.start({ moduleName: \"main-page\" });
    \n

    To this:

    \n
    import * as application from \"application\";

    // import the plugin
    import { ThreeDeeTouch } from \"nativescript-3dtouch\";

    // instantiate it and call setQuickActionCallback
    new ThreeDeeTouch().setQuickActionCallback(function(shortcutItem) {
        console.log(\"app was launched by shortcut type '\" + shortcutItem.type + \"' with title '\" + shortcutItem.localizedTitle + \"'\");
        // this is where you handle any specific case for the shortcut
        if (shortcutItem.type === \"beer\") {
            // this is an example of 'deeplinking' through a shortcut
            let frames = require(\"ui/frame\");
            frames.topmost().navigate(\"beer-page\");
        } else {
            // .. any other shortcut handling
        }
    });

    application.start({ moduleName: \"main-page\" });
    \n

    NativeScript with Angular

    \n

    If you're using Angular, the best place to add the handler is in app.module.ts,\nand use NgZone to help Angular knowing about the route change you're performing:

    \n
    import { NgZone } from \"@angular/core\";
    import { isIOS } from \"tns-core-modules/platform\";
    import { RouterExtensions } from \"nativescript-angular\";
    import { ThreeDeeTouch } from \"nativescript-3dtouch\";

    export class AppModule {
      constructor(private routerExtensions: RouterExtensions,
                  private zone: NgZone) {

        if (isIOS) {
          new ThreeDeeTouch().setQuickActionCallback(shortcutItem => {
            console.log(`The app was launched by shortcut type '${shortcutItem.type}' with title '${shortcutItem.localizedTitle}`);

            // this is where you handle any specific case for the shortcut, based on its type
            if (shortcutItem.type === \"page1\") {
              this.deeplink(\"/page1\");
            } else if (shortcutItem.type === \"page2\") {
              this.deeplink(\"/page2\");
            }
          });
        }
      }

      private deeplink(to: string): void {
        this.zone.run(() => {
          this.routerExtensions.navigate([to], {
            animated: false
          });
        });
      }
    }
    \n

    Configuring Static Actions

    \n

    With configureQuickActions you can configure dynamic actions,\nbut what if you want actions to be available immediately after the app\nwas installed from the AppStore?

    \n

    You can, but you need to manually edit the .plist.\nFortunately NativeScript allows you to change this file through app/App_Resources/iOS/Info.plist. Anything added there is added to the final .plist during a build.

    \n

    Note that dynamic actions will never replace static actions, so if you have two static actions you can add up to two dynamic ones. Any more will be ignored.

    \n

    Here's an example which you can paste anywhere in the .plist file:

    \n
    <key>UIApplicationShortcutItems</key>
    <array>
      <dict>
        <key>UIApplicationShortcutItemIconFile</key>
        <string>Eye</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Eye from plist</string>
        <key>UIApplicationShortcutItemSubtitle</key>
        <string>Awesome subtitle</string>
        <key>UIApplicationShortcutItemType</key>
        <string>eyefromplist</string>
      </dict>
      <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeCompose</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Compose</string>
        <key>UIApplicationShortcutItemType</key>
        <string>compose</string>
      </dict>
    </array>
    \n

    These XML tags deserve a bit of explanation

    \n

    UIApplicationShortcutItemIconFile

    \n

    The second action above uses the built-in UIApplicationShortcutIconTypeCompose icon, but the first one uses a custom icon: Eye. This expects the file app/App_Resources/iOS/Eye.png. According to Apple's docs this needs to be a single color, transparent, square, 35x35 icon - but that size will look pixelated on retina devices so go ahead and use a 70x70 or 105x105 icon if you please.

    \n

    UIApplicationShortcutItemTitle / UIApplicationShortcutItemSubtitle

    \n

    You can guess what those do, right? Only the title is mandatory.

    \n

    UIApplicationShortcutItemType

    \n

    This is the same as the type param of configureQuickActions, so it's what you'll receive in the callback you may have configured in app.js / app.ts as payload.type. Just do something cool with that info (like routing to a specific page and loading some content).

    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":29}},"@nativescript/template-tab-navigation-ts":{"name":"@nativescript/template-tab-navigation-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n
      \n
    • Tab navigation
      • \n
    • Five blank pages hooked to the tab navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code through extensive code comments
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-tab-ts --template @nativescript/template-tab-navigation-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-tab-ts --template nativescript-app-templates/packages/template-tab-navigation-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n
      \n
    • /app/app-root - sets up the tab navigation with individual navigation frames in each content item.
      • \n
    \n

    The template has the following pages used for the tab content items:

    \n
      \n
    • /app/home/home-items-page - the master home page. Displays a list of items and navigates to the item details page on item tap.
      • \n
    • /app/home/home-item-detail/home-item-detail-page - the item details page. Displays the details of the tapped item.
      • \n
    • /app/browse/browse-page - blank page
      • \n
    • /app/search/search-page - blank page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":2,"lastWeek":10,"lastMonth":479}},"@nativescript-dom/svelte-types":{"name":"@nativescript-dom/svelte-types","version":"1.0.6","license":"MIT","readme":"

    svelte-types

    \n

    Typescript types for svelte-native that work in .svelte files to give you proper and complete intellisense in code editors.

    \n

    Installtion

    \n
      \n
    1. Install the core and svelte types in your project
      2. \n
    \n
    npm install @nativescript-dom/core-types @nativescript-dom/svelte-types --save-dev
    \n
      \n
    1. Configure tsconfig.json as below
      2. \n
    \n
    {
      \"compilerOptions\": {
        ...
        \"types\": [
            \"node\",
            \"@nativescript-dom/core-types\",
            \"@nativescript-dom/svelte-types\"
            ],
    ...
      }
    \n

    That's it, enjoy a fully typed svelte-native experience.

    \n

    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":108}},"dominative":{"name":"dominative","version":"0.0.9-alpha.4","license":"MIT","readme":"

    DOMiNATIVE

    \n

    \"NPM\"

    \n

    Minimally viable DOM Document implementation for NativeScript

    \n
    \n

    Installation

    \n

    Via npm:

    \n

    npm install dominative undom-ng

    \n

    Note: undom-ng is a peer dependency, you have to install it manually.

    \n
    \n

    Usage

    \n

    Vanilla

    \n

    app.js

    \n
    import { Application } from '@nativescript/core'
    import { document } from 'dominative'

    const page = document.body
    const actionBar = document.createElement('ActionBar')

    actionBar.title = 'Hello World!'

    page.appendChild(actionBar)

    Application.run({
    \tcreate: () => document
    })
    \n

    with ef.js

    \n

    Playground

    \n

    App.eft

    \n
    >ActionBar
    \t#title = Hello World!
    \t>ActionBarItem
    \t\t#text = Button
    >StackLayout
    \t>Label
    \t\t.Welcome to the wonderland of ef.native!
    \n

    app.js

    \n
    import { Application } from '@nativescript/core'
    import { domImpl, document } from 'dominative'
    import { setDOMImpl } from 'ef-core'
    import App from 'App.eft'

    setDOMImpl(domImpl)

    const app = new App()
    app.$mount({target: document.body})

    Application.run({
    \tcreate: () => document
    })
    \n

    with SingUI

    \n

    Playground

    \n

    app.js

    \n
    import { Application } from '@nativescript/core'
    import { document } from 'dominative'
    import { browser, prop, setGlobalCtx, useTags, useElement, build } from 'singui'

    setGlobalCtx(browser(document))

    const tags = useTags(false)

    const app = (target) =>
    \tbuild(({attach}) => {
    \t\tconst { ActionBar, NavigationButton, ActionItem, StackLayout, Label, Button } = tags

    \t\tActionBar(() => {
    \t\t\tprop.title = 'Hello World!'
    \t\t})

    \t\tStackLayout(() => {
    \t\t\tlet count = 0

    \t\t\tconst {ret: updateText} = Label(() => {
    \t\t\t\treturn text().$textContent(
    \t\t\t\t\t() => `You have tapped ${count} time${count === 1 ? '' : 's'}`
    \t\t\t\t)
    \t\t\t})

    \t\t\tButton(() => {
    \t\t\t\tprop.text = 'Tap me!'
    \t\t\t\ton('tap', () => {
    \t\t\t\t\tcount += 1
    \t\t\t\t\tupdateText()
    \t\t\t\t})
    \t\t\t})

    \t\t\tupdateText()
    \t\t})

    \t\tattach(target)
    \t})

    app(document.body)

    Application.run({
    \tcreate: () => {
    \t\treturn document
    \t},
    })
    \n

    with React + react-dom

    \n

    Playground - by Ammar Ahmed

    \n

    Note: This demo might have some issues with Chrome. Use Firefox if necessary.

    \n

    with Vue 3 + runtime-dom + DOMiNATIVE-Vue

    \n

    Playground

    \n

    app.js

    \n
    import { Application } from '@nativescript/core'
    import { createApp } from '@dominative/vue'
    import App from './App.vue'

    const app = createApp(App)

    app.$run()
    \n

    with SolidJS + DOMiNATIVE-Solid

    \n

    Playground

    \n

    app.jsx

    \n
    import { Application } from \"@nativescript/core\"
    import { render } from \"@dominative/solid\"
    import { createSignal } from \"solid-js\"

    const App = () => {
    \tconst [count, setCount] = createSignal(0)
    \tconst increment = () => {
    \t\tsetCount(c => c + 1)
    \t}
    \treturn <>
    \t<actionbar title=\"Hello, SolidJS!\"></actionbar>
    \t<stacklayout>
    \t\t<label>You have taapped {count()} time(s)</label>
    \t\t<button class=\"-primary\" on:tap={increment}>Tap me!</button>
    \t</stacklayout>
    \t</>
    }

    render(App, document.body)

    const create = () => document

    Application.run({ create })
    \n
    \n

    Prepare global environment

    \n

    Automatically register document, window and related variables globally:

    \n
    import { globalRegister } from 'dominative'

    globalRegister(global)
    \n
    \n

    Register Elements

    \n
    import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
    import { RadListView } from 'nativescript-ui-listview'
    import { registerElement, makeListView } from 'dominative'

    // If you cannot determin what the component is based on, you can register it directly.
    registerElement('RadSideDrawer', RadSideDrawer)
    // Register with a specific type by using a pre-defined maker. Usually we check for inheritance, but with force we can make magic happen
    registerElement('RadListView', makeListView(RadListView, {force: true}))
    \n
    \n

    Virtual Elements

    \n

    Virtual elements are not real elements, but they appear as DOM elements to help organizing composition.

    \n

    Prop

    \n

    Helper to put it's child/children to it's parent node's property by key

    \n

    Attributes:

    \n

    key: String: RW The prop name to set on parent.

    \n

    type: <'array'|'key'>: RW Property type, could be an array prop or a single object prop. Once set, this prop couldn't be changed.

    \n

    value: any: RW Value to be set to parent. Usually children of this current node. Don't touch unless you know what you're doing.

    \n

    parent: Element: R Parent node of this node.

    \n

    class: String: RW Helper to set key and type, could be key:type or multi.level.key:type

    \n

    Events:

    \n

    None.

    \n

    KeyProp

    \n

    Prop but type already set to key.

    \n

    ArrayProp

    \n

    Prop but type already set to array.

    \n

    ItemTemplate

    \n

    * Template was renamed to ItemTemplate to avoid conflict with HTML template tag.

    \n

    An ItemTemplate element holds a template to be replicated later, or can create views programmatically.

    \n

    Attributes:

    \n

    Share mostly from Prop. Differences are listed below:

    \n

    key: String: RW Same form Prop, also serves the key name of a KeyedTemplate. Default to itemTemplate.

    \n

    type: 'single': R Should not be able to set type on a ItemTemplate.

    \n

    value: Function<T extends ViewBase>: R Same as createView.

    \n

    content: <T extends ViewBase>: RW The single child of this node. Don't touch unless you know what you're doing.

    \n

    patch: Function<T extends ViewBase>(PatchOptions): R Method to patch an existing clone.

    \n

    createView: Function<T extends ViewBase>: R Function to create view from this template.

    \n

    Events:

    \n

    itemLoading: Triggered when patching and template has no content. Set event.view to change the view of this item. Additional props on event: view, index, item, data. This event's callback argument doesn't extend from NativeScript's data object.

    \n

    createView: Triggered when creating view from the template and template has no content. Set created view to event.view. If not set, view will be created by cloning the template. This event's callback argument doesn't extend from NativeScript's data object.

    \n

    Note:

    \n

    ItemTemplate element could only have one element child. If you'd like to have multiple children in a template, just use a different type of view or layout as the only child and insert your other contents inside.

    \n

    KeyedTemplates

    \n

    By simpling putting ItemTemplates inside an array Prop we could set up a KeyedTemplate.

    \n

    Example:

    \n
    <ListView itemTemplateSelector=\"$item % 2 ? 'odd' : 'even'\">
    \t<Prop key=\"itemTemplates\" type=\"array\">
    \t\t<ItemTemplate key=\"odd\">
    \t\t\t<Label text=\"odd\"/>
    \t\t</ItemTemplate>
    \t\t<ItemTemplate key=\"even\">
    \t\t\t<Label text=\"even\"/>
    \t\t</ItemTemplate>
    \t</Prop>
    </ListView>
    \n

    Template Handling for Custom Components

    \n

    There's a special maker caller makeTemplateReceiver, which you can use when a NativeScript component accepts templates.

    \n

    Example:

    \n
    import { RadListView } from 'nativescript-ui-listview'
    import { registerElement, makeTemplateReceiver } from 'dominative'

    registerElement('RadListView', makeTemplateReceiver(RadListView, {
    \ttemplateProps: ['itemTemplate'],
    \tloadingEvents: ['itemLoading']
    }))
    \n

    templateProps: Array<String>: Props that accepts a template. Do not write keyed template props.

    \n

    loadingEvents: Array<String>: Events that will fire on the component when items loading.

    \n

    itemEvents: Array<String>: Custom events that will fire on the component referencing to an item.

    \n
    \n

    Tweaking

    \n

    All elements added with registerElement is automatically extended with tweaking ability.

    \n

    Tweakable.defineEventOption(eventName: string, option: EventOption)

    \n

    Define how a event should be initialized. If an event is defined with bubbles: true or captures: true, they'll automatically be registered to native at element creation.

    \n

    Event option:

    \n
    {
    \tbubbles: boolean // should this event bubble, default false
    \tcaptures: boolean // should this event have capture phase, default false
    \tcancelable: boolean // should this event be cancelable, defalut true
    }
    \n

    Usage:

    \n
    const ButtonElement = document.defaultView.Button
    ButtonElement.defineEventOption('tap', {
    \tbubbles: true,
    \tcaptures: true
    })
    \n

    Tweakable.mapEvent(fromEvent: string, toEvent: string)

    \n

    See below

    \n

    Tweakable.mapProp(fromProp: string, toProp: string)

    \n

    See below

    \n
    \n

    Tree shaking

    \n

    Tree shaking is off by default, but if you want a smaller bundle size, you can enable it manually by setting __UI_USE_EXTERNAL_RENDERER__ global variable to true in your project's webpack config. For example:

    \n
    const { merge } = require('webpack-merge');

    module.exports = (env) => {
    \twebpack.init(env);

    \twebpack.chainWebpack((config) => {
    \t\tconfig.plugin('DefinePlugin').tap((args) => {
    \t\t\targs[0] = merge(args[0], {
    \t\t\t\t__UI_USE_EXTERNAL_RENDERER__: true, // Set true to enable tree shaking
    \t\t\t\t__UI_USE_XML_PARSER__: false, // Usually XML parser isn't needed as well, so disabling it as well
    \t\t\t});

    \t\t\treturn args;
    \t\t});
    \t});

    \treturn webpack.resolveConfig();
    };
    \n

    But, PLEASE NOTICE, after tree shaking is enabled, you'll need to register {N} core components manually, otherwise they won't be available as elements. For example:

    \n
    import { AbsoluteLayout, StackLayout, Label, Button, registerElement } from 'dominative'

    registerElement('AbsoluteLayout', AbsoluteLayout)
    registerElement('StackLayout', StackLayout)
    registerElement('Label', Label)
    registerElement('Button', Button)
    \n

    or you can just register them all with registerAllElements, although it's pointless when tree shaking is enabled:

    \n
    import { registerAllElements } from 'dominative'

    registerAllElements()
    \n

    Frame, Page and ContentView are registered by default.

    \n
    \n

    Caveats

    \n

    Hardcoding in Frameworks

    \n

    Frameworks are great, but they're not great when it comes to hardcoded things. We have to invest methods to counter the harm done by those hardcodings.

    \n

    Hardcoding is harmful, please do not hardcode.

    \n

    Always lowercased tag names

    \n

    Sometimes frameworks are just too thoughtful for you, they translate all your tag names to lowercase when compiling, which means your camelCase or PascalCase tag names won't work as intended.

    \n

    We can alias our tag names to lowercase if you like:

    \n
    import { aliasTagName } from 'dominative'

    const tagNameConverter = (PascalCaseName) => {
    \t// ...whatever your transformation code here
    \t// This is useful when your framework/renderer doesn't support document.createElement with uppercase letters.
    \tconst transformedName = PascalCaseName.toLowerCase()
    \treturn transformedName
    }

    // Convert all built-in tag names
    aliasTagName(tagNameConverter)
    \n

    Hardcoded events and props

    \n

    Some frameworks work like magic by providing lots of "just works" features that you don't even need to think about what's going on behind. They're actually done by heavily assuming you're on a specific platform - browser, and hardcoded these features to browser specific features.

    \n

    We have to mimic the events and props they hardcoded in order to make these frameworks happy:

    \n
    import { document } from 'dominative'

    const TextFieldElement = document.defaultView.TextField
    const ButtonElement = document.defaultView.Button

    TextFieldElement.mapEvent('input', 'inputChange') // This is redirecting event handler registering for 'input' to 'inputChange'
    TextFieldElement.mapProp('value', 'text') // This is redirecting access from 'value' prop to 'text' prop

    ButtonElement.mapEvent('click', 'tap') // Redirect 'click' event to 'tap'

    const input = document.createElement('TextField')
    input.addEventListener('input', (event) => { // This is actually registered to `inputChange`
    \tconsole.log(event.target.value) // This is actually accessing `event.target.text`
    })
    \n

    Then the following code could work:

    \n
    <TextField v-model=\"userInput\"/>
    <!-- 'v-model' hardcoded with `input` or `change` event and `value` or `checked` prop, so we have to provide it with a emulated `input` event and `value` prop -->
    \n
    <button onClick=\"onTapHandler\"></button> // 'onTapHandler' is actually registered to 'tap', since some frameworks hardcoded \"possible\" event names so they can know it's an event handler
    \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":2,"lastWeek":59,"lastMonth":235}},"@nativescript/template-master-detail-ts":{"name":"@nativescript/template-master-detail-ts","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Master Detail Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Editable master-detail interface
      • \n
    • Integration with Firebase database
      • \n
    • Works offline
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-master-detail-ts --template @nativescript/template-master-detail-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-master-detail-ts --template nativescript-app-templates/packages/template-master-detail-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module is located at:

    \n
      \n
    • /app/app-root - sets up a Frame that lets you navigate between pages.
      • \n
    \n

    The template has the following page modules:

    \n
      \n
    • /app/cars/cars-list-page - the master list page. It gets the data and displays it in a list. On item tap, it navigates to the item details page.
      • \n
    • /app/cars/car-detail-page/car-detail-page - the item details page. Displays the details of the tapped item. Has an Edit button that leads to the edit page.
      • \n
    • /app/cars/car-detail-edit-page/car-detail-edit-page - the item details edit page. Provides edit options for the selected item. The Done button saves the changes.
      • \n
    \n

    There is one model to represent the data items:

    \n
      \n
    • /app/cars/shared/car-model
      • \n
    \n

    The template also provides a data service:

    \n
      \n
    • /app/cars/shared/car-service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
      • \n
    \n

    Firebase integration

    \n

    The template uses the {N} Firebase plugin. The initialization is done before the app starts in the /app.ts file. The initialization script is located at /shared/firebase.common.ts.

    \n

    [Optional] Firebase database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Each component has 3 style files located in its folder:

    \n
      \n
    • ../_{page-name}-common.scss - the component common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • ../{page-name}.android.scss - the component Android style sheet. These style rules are applied to Android only.
      • \n
    • ../{page-name}.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":1,"lastWeek":3,"lastMonth":372}},"@nstudio/nativescript-variable-blur-view":{"name":"@nstudio/nativescript-variable-blur-view","version":"1.0.3","license":"Apache-2.0","readme":"

    @nstudio/nativescript-variable-blur-view

    \n

    Variable Blur View for NativeScript. Inspired by @jtrivedi, @aheze, and @candlefinance

    \n

    Preview

    \n

    https://github.com/nstudio/nativescript-ui-kit/assets/457187/8d82d1b4-1dfc-421f-89b1-697c3c433b26

    \n
    npm install @nstudio/nativescript-variable-blur-view
    \n

    Usage

    \n

    Note: iOS Only (at the moment)

    \n

    Register the element for usage in your markup:

    \n
    import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view'

    // Angular
    import { registerElement } from '@nativescript/angular'
    registerElement('VariableBlurView', () => VariableBlurView)

    // Solid
    import { registerElement } from 'dominative';
    registerElement('variableBlurView', VariableBlurView);

    // Svelte
    import { registerNativeViewElement } from 'svelte-native/dom'
    registerNativeViewElement('variableBlurView', () => VariableBlurView);

    // React
    import { registerElement } from 'react-nativescript';
    registerElement('variableBlurView', () => VariableBlurView);

    // Vue
    import Vue from 'nativescript-vue'
    Vue.registerElement('VariableBlurView', () => VariableBlurView)
    \n

    Place on top of any UI in your layouts you want blurred:

    \n
    <VariableBlurView width=\"100%\" height=\"200\"/>
    \n

    Tip: You can flip the blur view vertically by doing this:

    \n
    <VariableBlurView width=\"100%\" height=\"200\" scaleY=\"-1\"/>
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":68}},"@triniwiz/nativescript-image-cache-it":{"name":"@triniwiz/nativescript-image-cache-it","version":"7.4.0","license":"Apache-2.0","readme":"

    NativeScript-ImageCacheIt

    \n

    Installation

    \n
    tnpm install @triniwiz/nativescript-image-cache-it
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":86,"lastWeek":612,"lastMonth":3106}},"@nativescript/template-master-detail-ng":{"name":"@nativescript/template-master-detail-ng","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Angular Master Detail Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Firebase as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

    \n

    \n

    Key Features

    \n
      \n
    • Editable master-detail interface
      • \n
    • Integration with Firebase database
      • \n
    • Works offline
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-master-detail-ng --template @nativescript/template-master-detail-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-master-detail-ng --template nativescript-app-templates/packages/template-master-detail-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application component:

    \n
      \n
    • /src/app/app.component - sets up a page router outlet that lets you navigate between pages.
      • \n
    \n

    The template has the following components:

    \n
      \n
    • /src/app/cars/car-list.component - the master list component. It gets the data and displays it in a list. On item tap, it navigates to the item details component.
      • \n
    • /src/app/cars/car-detail/car-detail.component - the item details component. Displays the details of the tapped item. Has an Edit button that leads to the edit component.
      • \n
    • /src/app/cars/car-detail-edit/car-detail-edit.component - the item details edit component. Provides edit options for the selected item. The Done button saves the changes.
      • \n
    \n

    There is one model to represent the data items:

    \n
      \n
    • /src/app/cars/shared/car.model
      • \n
    \n

    The template also provides a data service:

    \n
      \n
    • /src/app/cars/shared/car.service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
      • \n
    \n

    Firebase integration

    \n

    The templates uses the {N} Firebase plugin. The initialization is done before the app starts in the /src/main.ts file. The initialization script is located at /src/app/shared/firebase.common.ts.

    \n

    [Optional] Firebase database setup

    \n

    By design the app is connected to a read-only copy of the sample data in Firebase. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Firebase setup. You can find detailed instructions how to achieve that here.

    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Each component has 3 style files located in its folder:

    \n
      \n
    • ../_{page-name}.component.scss - the component common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • ../{page-name}.component.android.scss - the component Android style sheet. These style rules are applied to Android only.
      • \n
    • ../{page-name}.component.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":487}},"nativescript-vibrate":{"name":"nativescript-vibrate","version":"4.0.1","license":"MIT","readme":"

    \"Codacy\n\"Travis\"\n\"version\"\n\"License\"\n\"FOSSA

    \n

    NativeScript Vibrate \"apple\" \"android\"

    \n

    A vibrate NativeScript plugin for Android and iOS

    \n

    Read this in other languages: English, Español

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ ns plugin add nativescript-vibrate
    \n

    This command automatically installs the necessary files, as well as stores nativescript-vibrate as a dependency in your project's package.json file.

    \n

    Permissions

    \n

    Android

    \n

    To use the vibrate functionality on Android your app must request permission access the vibrator. The plugin automatically adds the required permission shown below for you so you don't need to worry about editing the Android Manifest.

    \n
    <uses-permission android:name=\"android.permission.VIBRATE\" />
    \n

    Example of use

    \n

    To use the vibrate module you must first require() it:

    \n
    var Vibrate = require(\"nativescript-vibrate\").Vibrate;
    var vibrator = new Vibrate();
    \n

    If you use Typescript, you can import it this way:

    \n
    import { Vibrate } from 'nativescript-vibrate';
    let vibrator = new Vibrate();
    \n

    After you have a reference to the module you can then call its vibrate(milliseconds) method.

    \n
    // my-page.js
    vibrator.vibrate(2000);
    \n

    If you prefer to use a vibration pattern, you could try:

    \n
    // my-page.js
    vibrator.vibrate([1000, 300, 500, 2000]);
    \n

    Notes

    \n

    iOS

    \n

    There is no API to vibrate for a specific amount of time or vibration pattern, so it will vibrate for the default period of time no matter what.

    \n

    API

    \n

    Only one method is available: vibrate(). Below are all the supported properties you can play around.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescriptionAndroidiOS
    time300The number of milliseconds to vibrate. It can be also an array of longs of times for which to turn the vibrator on or off.✔︎✘
    repeat-1The index into pattern at which to repeat, or -1 if you don't want to repeat.✔︎✘
    \n

    Documentation & Support

    \n\n

    Professional Support

    \n

    This project is sponsored by me, a Full Stack Developer. If you require assistance on your project(s), please contact me at https://marquez.co.

    \n

    Contributing

    \n

    Please make sure to read the Contributing Guide before making a pull request.

    \n

    Code of Conduct

    \n

    Everyone participating in this project is expected to agree to abide by the Code of Conduct.

    \n

    License

    \n

    Code released under the MIT License.

    \n

    \"\"

    \n

    \"FOSSA

    \n","downloadStats":{"lastDay":20,"lastWeek":132,"lastMonth":606}},"nativescript-star-ratings":{"name":"nativescript-star-ratings","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Star Ratings

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-star-ratings
    \n

    Configuration

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-star-ratings" on the\nPage element

    \n
    <ui:StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"2\" max=\"5\"/>
    \n

    Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);
    \n
    <StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"{{value}}\" max=\"{{max}}\"></StarRating>
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    emptyBorderColorbluestring
    • - [ ]
    		IOS only
    emptyColorwhitestring
    • - [ ]
    filledBorderColorbluestring
    • - [ ]
    		IOS only
    filledColorbluestring
    • - [ ]
    value0number
    • - [ ]
    max5number
    • - [ ]
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [ ] Custom images
      • \n
    \n","downloadStats":{"lastDay":1,"lastWeek":16,"lastMonth":32}},"@nativescript-community/l":{"name":"@nativescript-community/l","version":"4.2.26","license":"MIT","readme":"

    @nativescript-community/l

    \n

    \"npm\"\n\"npm\"

    \n

    This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is a direct fork of nativescript-localize.

    \n

    Differences

    \n

    This plugin was created to have a different behavior from nativescript-localize:

    \n
      \n
    • the default localize method was renamed to l
      • \n
    • the default l method tries to load from a local JSON object
      • \n
    • you can load such a JSON object with loadLocalJSON passing either the JSON or the path to it
      • \n
    • if no local JSON, l load natively
      • \n
    • keys are not encoded anymore, meaning keys are the same in native/js worlds.
      • \n
    • the locale JSON must now be a trully nested object (no . in keys names)
      • \n
    • special characters support has been dropped in keys names.
      • \n
    \n

    Credits

    \n

    A lot of thanks goes out to Eddy Verbruggen and Ludovic Fabrèges (@lfabreges) for developing and maintaining nativescript-localize.

    \n

    Table of contents

    \n\n

    Installation

    \n
    tns plugin add @nativescript-community/l
    \n

    Usage

    \n

    Create a folder i18n in the app folder with the following structure:

    \n
    app
      | i18n
          | en.json           <-- english language
          | fr.default.json   <-- french language (default)
          | es.js
    \n

    You need to set the default langage and make sure it contains\nthe application name to avoid any error.

    \n

    Angular

    \n

    app.module.ts

    \n
    import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
    import { NativeScriptLocalizeModule } from \"@nativescript-community/l/angular\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [AppComponent],
      bootstrap: [AppComponent],
      imports: [
        NativeScriptModule,
        NativeScriptLocalizeModule
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    export class AppModule { }
    \n

    Template

    \n
    <Label text=\"{{ 'Hello world !' | L }}\"/>
    <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
    \n

    Script

    \n
    import { localize } from \"@nativescript-community/l\";

    console.log(localize(\"Hello world !\"));
    \n

    Javascript / XML

    \n

    app.js

    \n
    const application = require(\"application\");
    const localize = require(\"@nativescript-community/l\");
    application.setResources({ L: localize.l });
    \n

    Template

    \n
    <Label text=\"{{ L('Hello world !') }}\"/>
    <Label text=\"{{ L('I am %s', 'user name') }}\"/>
    \n

    Script

    \n
    const localize = require(\"@nativescript-community/l\");

    console.log(localize(\"Hello world !\"));
    \n

    Quirks

    \n

    ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

    \n
      const page = args.object;
      page.bindingContext = new Observable();
    \n

    Vue

    \n

    app.js

    \n
    import { l } from \"@nativescript-community/l\";

    Vue.filter(\"L\", l);
    \n

    Template

    \n
    <Label :text=\"'Hello world !'|L\"></Label>
    <Label :text=\"'I am %s'|L('user name')\"></Label>
    \n

    File format

    \n

    Each file is imported using require, use the file format of your choice:

    \n

    JSON

    \n
    {
      \"app.name\": \"My app\",
      \"ios.info.plist\": {
        \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      },
      \"user\": {
        \"name\": \"user.name\",
        \"email\": \"user.email\"
      },
      \"array\": [
        \"split the translation into \",
        \"multiples lines\"
      ],
      \"sprintf\": \"format me %s\",
      \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
    }
    \n

    Javascript

    \n
    const i18n = {
      \"app.name\": \"My app\"
    };

    module.exports = i18n;
    \n

    Frequently asked questions

    \n

    How to set the default language?

    \n

    Add the .default extension to the default language file to set it as the fallback language:

    \n
    fr.default.json
    \n

    How to localize the application name?

    \n

    The app.name key is used to localize the application name:

    \n
    {
      \"app.name\": \"My app\"
    }
    \n

    How to localize iOS properties?

    \n

    Keys starting with ios.info.plist. are used to localize iOS properties:

    \n
    {
      \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    }
    \n

    How to change the language dynamically at runtime?

    \n

    Seeing this module now uses JSON objects. Overriding consist of 3 steps:

    \n
      \n
    • overriding native language, done with overrideLocaleNative
      • \n
    • overriding json language, done with loadLocalJSON
      • \n
    • updating all labels, buttons.... your job!
      • \n
    \n
    import { overrideLocaleNative } from \"@nativescript-community/l/localize\";
    const localeOverriddenSuccessfully = overrideLocaleNative(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n
    \n

    Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

    \n
    \n
    android {

      // there maybe other code here //

      bundle {
        language {
          enableSplit = false
        }
      }
    }
    \n
    \n

    Tip: you can get the default language on user's phone by using this

    \n
    \n
    import { device } from '@nativescript/core/platform';

    console.log(\"user's language is\", device.language.split('-')[0]);
    \n
    \n

    Tip: overrideLocaleNative method stores the language in a special key in app-settings,\nyou can access it like this,

    \n
    \n
    import { getString } from '@nativescript/core/application-settings'; 

    console.log(getString('__app__language__')); // only available after the first time you use overrideLocaleNative(langName);
    \n

    Troubleshooting

    \n

    The angular localization pipe does not work when in a modal context

    \n

    As a workaround, you can trigger a change detection from within your component constructor:

    \n
    constructor(
      private readonly params: ModalDialogParams,
      private readonly changeDetectorRef: ChangeDetectorRef,
    ) {
      setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
    }
    \n","downloadStats":{"lastDay":8,"lastWeek":9,"lastMonth":44}},"@nativescript/template-tab-navigation-ng":{"name":"@nativescript/template-tab-navigation-ng","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript with Angular Tab Navigation Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    App template featuring a TabView component for navigation.

    \n

    \n

    Key Features

    \n
      \n
    • Tab navigation
      • \n
    • Five blank pages hooked to the tab navigation
      • \n
    • Customizable theme
      • \n
    • UX and development best practices
      • \n
    • Easy to understand code
      • \n
    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    ns create my-tab-ng --template @nativescript/template-tab-navigation-ng
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    ns create my-tab-ng --template nativescript-app-templates/packages/template-tab-navigation-ng
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The tab navigation is set up in the application component:

    \n
      \n
    • /src/app/app.component - sets up the tab navigation and defines page router outlets for its items.
      • \n
    \n

    There are four components used for the tab content items located in these folders:

    \n
      \n
    • /src/app/home/home.component - the master home page. Displays a list of items and navigates to the item details page on item tap.
      • \n
    • /src/app/home/item-detail/item-detail.component - the item details page. Displays the details of the tapped item.
      • \n
    • /src/app/browse/browse.component - blank page
      • \n
    • /src/app/search/search.component - blank page
      • \n
    \n

    Styling

    \n

    This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

    \n

    It has 3 global style files that are located at the root of the app folder:

    \n
      \n
    • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
      • \n
    • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
      • \n
    • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Discord. The Discord channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":616}},"@global66/nativescript-contacts-lite":{"name":"@global66/nativescript-contacts-lite","version":"1.0.0","license":"MIT","readme":"

    NativeScript Contacts Lite

    \n

    This nativescript-contacts-lite plugin provides pretty fast (but hey it's all relative) read-only access to the iOS and Android contact directory. By limiting the scope of the result set through the desiredFields, it is possible to obtain a JSON object containing the relevant data of the contact directory within a couple of hundred milliseconds.

    \n

    Demo Application

    \n

    This repository contains a demo application in the demo-angular folder that uses this plugin to display a contact picker. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run tns run <platform> in the demo-angular folder.

    \n

    Installation

    \n

    Run tns plugin add nativescript-contacts-lite

    \n

    Usage

    \n

    To use the contacts module you must first require() it.

    \n
    var Contacts = require(\"nativescript-contacts-lite\");
    \n

    Methods

    \n

    getContacts & getContactsWorker

    \n

    Both methods retrieve contacts and share the same interface. The difference is that the former runs in the main thread and the latter within a web worker.

    \n

    Argument 1: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. Possible values are:

    \n
    [
      'address',
      'display_name',
      'email',
      'name_details',
      'nickname',
      'note',
      'organization',
      'phone',
      'photo',
      'thumbnail',
      'website'
    ]
    \n

    Argument 2: searchTerm (optional)\nA string with a search term to limit the result set to only contacts whose display_name contain the term. Defaults to fetching all relevant contacts if an empty search term is provided or none at all.

    \n

    Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

    \n

    Example using getContacts

    \n
    let desiredFields = ['display_name','phone'];
    let searchTerm = 'Jon';

    console.log('Loading contacts...');
    let timer = new Date().getTime();

    Contacts.getContacts(desiredFields,searchTerm).then((result) => {
      console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
      console.log(`Found ${result.length} contacts.`);
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    Example using getContactsWorker

    \n
    let desiredFields = ['display_name','phone','thumbnail','email','organization'];

    console.log('Loading contacts...');
    let timer = new Date().getTime();

    Contacts.getContactsWorker(desiredFields).then((result) => {
      console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
      console.log(`Found ${result.length} contacts.`);
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    getContactById

    \n

    Get contact details for a specific contact.

    \n

    Argument 1: contactId\nThe identifier of the contact you wish to obtain details of (obtained through the getContacts(Worker) methods).

    \n

    Argument 2: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. See getContacts method for possible values.

    \n

    Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

    \n

    Example

    \n
    let contact_id = contact.contact_id // get id from result of getContacts method

    let desiredFields = [
      'address',
      'display_name',
      'email',
      'name_details',
      'nickname',
      'note',
      'organization',
      'phone',
      'photo',
      'thumbnail',
      'website'
    ]

    Contacts.getContactById(contact_id,desiredFields).then((result) => {
      console.dir(result);
    }, (e) => { console.dir(e); });
    \n

    Performance

    \n

    Considerations

    \n

    Running in main thread versus web worker

    \n

    The plugin provides both methods that run in either the main/UI thread or within a web worker. Although offloading the processing to a separate thread adds web worker initialization time, it guarantees that the main UI thread will continue to work smoothly.

    \n

    If you are implementing an autocomplete where on each key you are querying a smaller subset of the contacts, you will probably want to go with the non-worker variant to avoid web worker initialization time while the user is waiting. On the other hand, if you are reading the entire contact directory while initializing your app, you probably want this to happen in the background to avoid the UI getting stuck while processing. In the latter case you probably would want to use the web worker variant.

    \n

    Contact Picker Example

    \n

    Another way to speed up performance is possible in certain cases like when you are building a contact picker. In this case it is probably good enough to first provide a narrow array of desiredFields like ['display_name','thumbnail'] to getContacts to display the list. Only when the user selects a specific contact, you can obtain all details for a specific contact by supplying a wider array of desiredFields to getContactById. This example has been implemented in the demo app located in this repository.

    \n

    Benchmarks

    \n

    Android

    \n

    On a relatively old Samsung Galaxy S4 a list of ~600 contacts is returned somewhere between ~300ms up to ~2s depending on the desired fields and whether you run in the main thread or in a web worker.

    \n

    iOS

    \n

    Tests on an iPhone 7 plus with ~600 contacts returned in ~105ms when running getContacts(['display_name', 'phone']) (so non worker). This could use some more real iOS device data in different modes (e.g. more fields & web worker mode) if anyone has some.

    \n

    Notes

    \n

    Bundling with Webpack

    \n

    This plugin is compatible with webpack bundling through the nativescript-dev-webpack plugin as of NativeScript 3.2. However, if you are using the web worker functions, we need to ensure that the web worker resources are included in the package. For this purpose, you should add the nativescript-worker-loader to your project: npm i -D nativescript-worker-loader.

    \n

    Photo & Thumbnail Images

    \n

    The plugin returns photo & thumbnail images as a base64 encoded string ready to be used as the source attribute of an image, e.g. <Image *ngIf="item.thumbnail" [src]="item.thumbnail"></Image>

    \n

    Android Specifics

    \n

    Permissions

    \n

    This plugin uses the nativescript-permissions plugin by Nathanael Anderson for obtaining read-only permissions to the phone's contacts on Android 6 and above.

    \n

    iOS Specifics

    \n

    Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n

    Permissions

    \n

    As of iOS 10 it has become mandatory to add the NSContactsUsageDescription key to your application's Info.plist (see Apple's developer documentation).

    \n

    Therefore you should add something like this to your ~/app/App_Resources/iOS/Info.plist:

    \n
    <key>NSContactsUsageDescription</key>
    <string>This application requires access to your contacts to function properly.</string>
    \n

    Acknowledgements

    \n

    The iOS part of this plugin is based on code from the nativescript-contacts plugin.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":24}},"@nstudio/nativescript-fluid-segmented-bar":{"name":"@nstudio/nativescript-fluid-segmented-bar","version":"1.0.2","license":"Apache-2.0","readme":"

    @nstudio/nativescript-fluid-segmented-bar

    \n

    Fluid Segmented Bar to liven up any standard SegmentedBar control.

    \n
      \n
    • iOS: Uses SJFluidSegmentedControl
      • \n
    • Android: Uses standard SegementedBar - Jetpack Compose will be added in future to replicate
      • \n
    \n

    Usage

    \n
    npm install @nstudio/nativescript-fluid-segmented-bar
    \n

    Use within any view layout:

    \n
    <FluidSegmentedBar items=\"{{items}}\" gradientColorSides=\"{{gradientColorSides}}\" selectedIndexChanged=\"{{selectedIndexChanged}}\" didScrollOffset=\"{{didScrollOffset}}\"/>
    \n

    Provide bindings for properties and events:

    \n
    const items: Array<FluidSegmentedBarItem> = [
        {
            title: 'Enjoy',
            colors: [new Color('#485ae6'), new Color('#87aeed')],
        },
        {
            title: 'Your',
            colors: [new Color('#87aeed'), new Color('#e53ca9')],
        },
        {
            title: 'Life',
            colors: [new Color('#c2c96a'), new Color('#678d50')],
        },
    ];
    const gradientColorSides: FluidSegmentedBarGradientColorSides = {
        left: [new Color('#87aeed')],
        right: [new Color('#c2c96a')],
    };

    function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
        console.log('selectedIndexChanged:', args.newIndex);
    }
    function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
        console.log('didScrollOffset:', args.offset);
    }
    \n

    When using flavors, you can just register the element for usage in your markup:

    \n
    import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar'

    // Angular
    import { registerElement } from '@nativescript/angular'
    registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

    // Solid
    import { registerElement } from 'dominative';
    registerElement('fluidSegmentedBar', FluidSegmentedBar);

    // Svelte
    import { registerNativeViewElement } from 'svelte-native/dom'
    registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);

    // React
    import { registerElement } from 'react-nativescript';
    registerElement('fluidSegmentedBar', () => FluidSegmentedBar);

    // Vue
    import Vue from 'nativescript-vue'
    Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar)
    \n

    API

    \n

    Properties

    \n
      \n
    • items: Array<FluidSegmentedBarItem>: Collection of bar items with title and colors.
      • \n
    • gradientColorSides: FluidSegmentedBarGradientColorSides: The gradiated side colors.
      • \n
    \n

    Events

    \n
      \n
    • selectedIndexChanged: When the selectedIndex changes.
      • \n
    • didScrollOffset: Whenever the control animates it's selected position, the offset and maxOffset will be emitted to provide ability to animate other visuals based on it's movement.
      • \n
    \n

    License

    \n\n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":48}},"@triniwiz/nativescript-accordion":{"name":"@triniwiz/nativescript-accordion","version":"7.0.0","license":"Apache-2.0","readme":"

    NativeScript Accordion

    \n

    Install

    \n

    npm install nativescript-accordion

    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:accordion="@triniwiz/nativescript-accordion" on the Page element

    \n

    Data

    \n

    By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

    \n
    this.items = [
          {
            title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
            blah: [
              { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
              { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
            ]
          }
        ]
    \n
    selectedIndexes = [0,3]
    \n

    Core

    \n
    <accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
                <accordion:Accordion.headerTemplate>
                    <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                        <Label text=\"{{title}}\"/>
                        <Label col=\"1\" text=\"+\"/>
                    </GridLayout>
                </accordion:Accordion.headerTemplate>

                <accordion:Accordion.itemHeaderTemplate>
                    <StackLayout>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </accordion:Accordion.itemHeaderTemplate>
                
                
                <accordion:Accordion.itemContentTemplate>
                                <StackLayout>
                                    <Image src=\"{{image}}\"/>
                                </StackLayout>
                  </accordion:Accordion.itemContentTemplate>

                <accordion:Accordion.footerTemplate>
                    <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                        <Label text=\"{{footer}}\"/>
                        <Label col=\"1\" text=\"-\"/>
                    </GridLayout>
                </accordion:Accordion.footerTemplate>

            </accordion:Accordion>
    \n

    Multi Template

    \n
    <accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                                 items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                                 headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                                 itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                                 itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                                 footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
            >

                <Accordion.headerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.headerTemplates>


                <Accordion.itemHeaderTemplates>
                    <template key=\"odd\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemHeaderTemplates>

                <Accordion.itemContentTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemContentTemplates>

                <Accordion.footerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.footerTemplates>

            </accordion:Accordion>
    \n

    Vue

    \n

    import Vue from 'nativescript-vue'
    import Pager from 'nativescript-accordion/vue'

    Vue.use(Pager)
    \n
    <Accordion row=\"1\" for=\"item of items\">

    \t\t\t\t<v-template name=\"header\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"title\">
    \t\t\t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
    \t\t\t\t\t</GridLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template name=\"content\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"footer\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Multi Template

    \n
    <Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
    \t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"header-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"title-even\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t\t\t   :src=\"item.image\">    </Image>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"content-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Angular

    \n
    import { AccordionModule } from \"nativescript-accordion/angular\";

    @NgModule({
        imports: [
            AccordionModule
        ]
        })
    \n
    <Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
    \t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
    \t\t\t</GridLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Multi Template

    \n
    <Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
    \t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
    \t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
    \t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
    \t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
    \t>
    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t   [src]=\"item.image\">    </Image>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Config

    \n
    public selectedIndexes = [0,3]
    \n
    <Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":26}},"@nativescript/datetimepicker":{"name":"@nativescript/datetimepicker","version":"2.1.13","license":"Apache-2.0","readme":"

    @nativescript/datetimepicker

    \n

    A plugin that provides the UI elements DatePickerField, TimePickerField and DateTimePickerFields for picking a date and a time. The DatePickerField and TimePickerField components extend the TextField view, while the DateTimePickerFields extends the GridLayout layout container that contains instances of the DatePickerField and TimePickerField components. There is also a DateTimePicker class which provides static methods pickDate() and pickTime() that can be called to show the same dialog picker as the fields.

    \n\"DatePickerField\n\"TimePickerField\n

    Table of Contents

    \n\n

    Installation

    \n
    npm install @nativescript/datetimepicker
    \n

    Usage

    \n

    Core

    \n
    <Page
       xmlns=\"http://schemas.nativescript.org/tns.xsd\"
       xmlns:datetime=\"@nativescript/datetimepicker\">
       <datetime:DatePickerField hint=\"select date\"/>
       <datetime:TimePickerField hint=\"select time\"/>
       <datetime:DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"/>
    \n

    Angular

    \n

    Import the plugin's module:

    \n
    import { NativeScriptDateTimePickerModule } from \"@nativescript/datetimepicker/angular\";
    ...
    @NgModule({
        imports: [
            NativeScriptCommonModule,
            NativeScriptDateTimePickerModule,
            ...
        ],
        ...
    \n

    Then use it in HTML as follows:

    \n
    <DatePickerField hint=\"select date\"></DatePickerField>
    <TimePickerField hint=\"select time\"></TimePickerField>
    <DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
    \n

    Vue

    \n

    Once the plugin has been installed, register it in the main.ts file:

    \n
    import DateTimePicker   from \"@nativescript/datetimepicker/vue\"

    import Home from './components/Home.vue';

    const app = createApp(Home).use(DateTimePicker)

    app.start();
    \n

    Then use it in a template as follows:

    \n
    <DatePickerField hint=\"select date\"></DatePickerField>
    <TimePickerField hint=\"select time\"></TimePickerField>
    <DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
    \n

    Setting The Selected Date and Time

    \n

    To set the selected time of the TimePickerField, use the time property.

    \n
    <TimePickerField time=\"01:00\"></TimePickerField>
    \n

    The DatePickerField and DateTimePickerFields components both use the date property to set their selected date(and the time for DateTimePickerFields) value.

    \n
    <DatePickerField date=\"2019/02/24\"></DatePickerField>

    <DateTimePickerFields date=\"2019/02/24 01:00\"></DateTimePickerFields>
    \n

    Changing the Picker Titles and Buttons Labels

    \n

    To change the titles and the button labels of the picker's popups, use the pickerOkText, pickerCancelText and pickerTitle properties.

    \n
    <DatePickerField hint=\"tap to choose\" pickerOkText=\"Approve\" pickerCancelText=\"Reject\" pickerTitle=\"Confirm predefined date selection\" pickerDefaultDate=\"2019/05/15\"></DatePickerField>
    \n

    The DateTimePickerFields has the additional pickerTitleDate for the date picker title and the pickerTitleTime for the time picker title.

    \n
    <DateTimePickerFields hintDate=\"tap to choose date\" hintTime=\"tap to choose time\"
                            pickerOkText=\"Approve\" pickerCancelText=\"Reject\"
                            pickerTitleDate=\"Confirm predefined date selection\"
                            pickerTitleTime=\"Confirm predefined time selection\"
                            pickerDefaultDate=\"2019/05/15 22:00\" autoPickTime=\"true\">    </DateTimePickerFields>
    \n

    Setting Localization

    \n

    To localize the DatePickerField and DateTimePickerFields components, use the locale property.

    \n
    <DatePickerField locale=\"en_GB\" hint=\"select date\"></DatePickerField> 
    <!-- DateTimePickerFields -->
    <DateTimePickerFields locale=\"de_DE\" hintDate=\"datum auswählen\" hintTime=\"zeit wählen\"
                            pickerOkText=\"Bestätigen\" pickerCancelText=\"Stornieren\"
                            pickerTitleDate=\"Datum auswählen\" pickerTitleTime=\"Zeit wählen\" />
    \n

    Formatting the Date and Time

    \n

    Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. To customize the date format, use the dateFormat property.

    \n
    <DatePickerField date=\"2019/02/24\" dateFormat=\"'my date': dd-MMMM-yyyy\"/>
    \n

    The TimePickerField will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format setting of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property.

    \n
    <TimePickerField time=\"16:00\" timeFormat=\"h:mm a\" locale=\"en_US\" />
    \n

    For the DateTimePickerFields picker, use the same properties( dateFormat, timeFormat and locale) for custom date and time formats.

    \n
    <DateTimePickerFields date=\"2019/02/24 16:00\" timeFormat=\"h:mm a\" locale=\"en_US\" />
    \n

    Setting the Minimum and Maximum Dates

    \n

    To set the minimum and maximum dates, use the minDate and maxDate properties for the DatePickerField and DateTimePickerFields components.

    \n
    <DatePickerField minDate=\"2020/02/02\" maxDate=\"2021/02/02\" hint=\"tap to select\"/>
    <!-- DateTimePickerFields -->
    <DateTimePickerFields minDate=\"2020/02/02\" maxDate=\"2021/02/02\"
                            hintDate=\"tap to select date\" hintTime=\"tap to select time\" />
    \n

    DateTimePickerFields pickers orientation

    \n

    To lay out the picker fields in the horizontal(default) or vertical direction, use the orientation property.

    \n
    <DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"
                            orientation=\"vertical\">    </DateTimePickerFields>
    \n

    Styling the pickers with CSS

    \n

    You can use CSS to style the DatePickerField and the TimePickerField pickers. The same styling applies to the pickers contained in DateTimePickerFields component. The picker supports changing its colors through the following predefined CSS classes:

    \n
      \n
    • date-time-picker: picker background and title text color)
      • \n
    • date-time-picker-spinners: background and text color of the date/time selecting spinners
      • \n
    • date-time-picker-buttons: background and text color of the OK/Cancel buttons
      • \n
    • date-time-picker-button-ok and date-time-picker-button-cancel: to provide a separate style for each button.
      • \n
    \n
    \n

    Note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.

    \n
    \n\"DatePickerField\n\n
    timepickerfield,
    datepickerfield     {
        padding: 12 4;
    }

    timepickerfield.apply-css,
    datepickerfield.apply-css     {
        color: #CDDC39;
        background-color: #00796B;
        font-size: 20;
        font-weight: bold;
        padding: 20;
    }

    .date-time-picker.apply-css {
        color: #00796B;
        background-color: #CDDC39;
    }

    .date-time-picker-spinners.apply-css {
        color: #CDDC39;
        background-color: #00796B;
    }

    .date-time-picker-buttons.apply-css {
        color: #00796B;
    }
    Footer
    \n

    To apply styles at runtime when opening the DateTimePicker you can do the following:

    \n
    import { DateTimePicker, DateTimePickerStyle } from '@nativescript/datetimepicker';
    import { Application, View} from '@nativescript/core';
    function createPicker(args: EventData) {
    \tconst dateTimePickerStyle = DateTimePickerStyle.create(args.object as any);

        // This example handles styling the calendar for light and dark mode of the device settings
    \tif (Application.systemAppearance() === 'dark') {
          // style for dark mode
          dateTimePickerStyle.buttonsBackgroundColor = new Color('#202125');
          dateTimePickerStyle.dialogBackgroundColor = new Color('#202125');
          dateTimePickerStyle.titleTextColor = new Color('#fff');
          dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
          dateTimePickerStyle.spinnersBackgroundColor = new Color('#202125');
          dateTimePickerStyle.spinnersTextColor = new Color('#fff');
        } else {
          // style for light mode
          dateTimePickerStyle.buttonsBackgroundColor = new Color('#fff');
          dateTimePickerStyle.dialogBackgroundColor = new Color('#fff');
          dateTimePickerStyle.titleTextColor = new Color('#0067a6');
          dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
          dateTimePickerStyle.spinnersBackgroundColor = new Color('#fff');
          dateTimePickerStyle.spinnersTextColor = new Color('#0067a6');
        }

         DateTimePicker.pickDate(
          {
            context: (args.object as View)._context,
            minDate: new Date((new Date() as any) -1),
            title: 'DatePicker',
            okButtonText: 'Okay',
            cancelButtonText: 'Cancel',
            locale: 'es'
          },
          dateTimePickerStyle
        ).then((result) => {
            // handle the result
        })
    }
    \n

    Using DateTimePicker

    \n

    Internally DatePickerField and TimePickerField call the pickDate and pickTime methods of the DateTimePicker which are public, so they can also be manually called in case a more customized picker is desired. The pickDate method accepts DatePickerOptions, while the pickTime method accepts TimePickerOptions. These options allow having the same features as in the fields.

    \n
    function onPickDateTap (args: EventData) {
                    const dateToday = new Date();
                    const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
                    const dateNextWeek = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 7);
                    
                    DateTimePicker
                        .pickDate({
                            context: args.object._context,
                            date: dateTomorrow,
                            minDate: dateTomorrow,
                            maxDate: dateNextWeek,
                            okButtonText: \"OK\",
                            cancelButtonText: \"Cancel\",
                            title: \"choose date\",
                            locale: \"en_GB\"
                        })
                        .then(selectedDate => {
                            if (selectedDate) {
                                this.dateText = this.getFormattedDate(selectedDate);
                            }
                        });
                },
    \n
    function onPickTimeTap (args: EventData) {
                    const dateToday = new Date();
                    const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
                    dateTomorrow.setHours(8);
                    dateTomorrow.setMinutes(0);
                    DateTimePicker
                        .pickTime({
                            context: args.object._context,
                            time: dateTomorrow,
                            okButtonText: \"OK\",
                            cancelButtonText: \"Cancel\",
                            title: \"choose time\",
                            locale: \"en_GB\",
                            is24Hours: true
                        })
                        .then(selectedTime => {
                            if (selectedTime) {
                                this.timeText = this.getFormattedTime(selectedTime);
                            }
                        });
                },
    \n

    API

    \n

    DatePickerField

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    dateDateThe date the picker field is currently displaying. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
    minDateDateThe minimum date the picker field can select.
    maxDateDateThe maximum date the picker field can select.
    localestringIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month) (default is based on the device’s locale settings).
    hintstringGets or sets the hint text. Hint is the text that is displayed in the field when date is null.
    dateFormatstringFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
    pickerTitlestringText that will be displayed as title of the picker, default is undefined.
    pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    pickerCancelTextstringText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    TimePickerField

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    timeDateThe time the picker field is currently displaying. If it is in ISO 8601 format, it is passed to the JS Date constructor.
    localestringGets or sets a locale for displaying the date in the field, and also for the picker. Default value is undefined, meaning that the format will be based on the device's settings.
    hintstringGets or sets the hint text. Hint is the text that is displayed in the field when time is null.
    timeFormatstringFormat used for the text in the picker field (on Android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
    pickerTitlestringText that will be displayed as title of the picker, default is undefined.
    pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings).
    pickerCancelTextstringText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on Android (based on the devices locale settings)).
    \n

    DateTimePickerFields

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    dateDateThe date the picker fields are currently displaying.
    minDateDateGets or sets the min date. Note that this property only affects the date component.
    maxDateDateGets or sets the max date. Note that this property only affects the date component.
    localestringGets or sets a locale for displaying the date in the field, and also for the picker.
    Default value is undefined, meaning that the format will be based on the device's settings.
    Note that changing the locale will not affect the pickerOkText, pickerCancelText and pickerTitle or hint properties
    dateFormatstringFormat used for the text in the picker field (on Android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
    timeFormatstringFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
    pickerTitleDatestringText that will be displayed as title of the picker when the date component is tapped.
    pickerTitleTimestringText that will be displayed as title of the picker, when the time component is tapped.
    pickerOkTextstringText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    pickerCancelTextstringText for the Cancel button of the picker (default is Cancel on iOS, localized version of Cancel on Android (based on the devices locale settings)).
    autoPickTimebooleanValue that indicates whether the time component should be assigned a value as soon as a date is picked by the date component. Defaults to false.
    orientation'horizontal' | 'vertical'Value that indicates how the date and time components will be arranged, default is "horizontal", which means that they will be on the same row.
    hintDatestringText displayed in the date component when date is null.
    hintTimestringText displayed in the time component when date is null.
    \n

    DateTimePicker Class

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn TypeDescription
    pickDate(options: DatePickerOptions, style?: DateTimePickerStyle)Promise<Date>Picks a date from a dialog picker initialized with the provided options and styled with the optionally provided style.
    pickTime(options: TimePickerOptions, style?: DateTimePickerStyle)Promise<Date>Picks a time from a dialog picker initialized with the provided options and styled with the optionally provided style.
    \n

    DatePickerOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    contextanyView's context. Obtained from the _context property of a View instance.
    dateDateOptional: The date that will be displayed in the picker, (if not provided, the picker will display today).
    minDateDateOptional: The minimum date that can be selected.
    maxDateDateOptional: The maximum date that can be selected.
    localestringOptional: Identifier of a locale that will be used to localize month names and am/pm texts.
    titlestringOptional: Text that will be displayed as title of the picker.
    okButtonTextstringOptional: Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    cancelButtonTextstringOptional: Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    TimePickerOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    contextanyView's context. Obtained from the _context property of a View instance.
    timeDateOptional: The time that will be displayed in the picker, (if not provided, the picker will display now).
    is24HoursbooleanOptional: This value will be used only on Android to determine whether the picker will be in 12 or 24 hour format.
    localestringOptional: Identifier of a locale that will be used to localize month names and am/pm texts.
    titlestringOptional: Text that will be displayed as title of the picker.
    okButtonTextstringOptional: Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    cancelButtonTextstringOptional: Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    DateTimePickerStyle

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titleTextColorColorColor to be used for the title text.
    dialogBackgroundColorColorColor to be used as a background of the dialog picker.
    spinnersTextColorColorColor to be used for the texts of the date/time spinners.
    spinnersBackgroundColorColorColor to be used as a background of the date/time spinners.
    buttonsTextColorColorColor to be used for the texts of the ok/cancel buttons.
    buttonsBackgroundColorColorColor to be used as a background of the ok/cancel buttons.
    buttonOkTextColorColorColor to be used for the texts of the ok button.
    buttonOkBackgroundColorColorColor to be used as a background of the ok button.
    buttonCancelTextColorColorColor to be used for the texts of the cancel button.
    buttonCancelBackgroundColorColorColor to be used as a background of the cancel button.
    create(view: View)DateTimePickerStyleCreates a style based on any css provided. The parameter is a View with the properly setup css class name.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":175,"lastWeek":1300,"lastMonth":5305}},"@nativescript/geolocation":{"name":"@nativescript/geolocation","version":"8.3.1","license":"Apache-2.0","readme":"

    @nativescript/geolocation

    \n

    Contents

    \n\n

    Intro

    \n

    A geolocation plugin to use for getting current location, monitor movement, etc.

    \n

    Installation

    \n

    To install the plugin, run the following command in the root of your project.

    \n
    npm install @nativescript/geolocation
    \n

    Android permissions requirements

    \n

    To use geolocation on Android, you need to add the following permissions to your app's AndroidManifest.xml inside the App_Resources/Android/src/main directory:

    \n
      <!-- Always include this permission -->
      <!-- This permission is for \"approximate\" location data -->
      <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />

      <!-- Include only if your app benefits from precise location access. -->
      <!-- This permission is for \"precise\" location data -->
      <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />

      <!-- Required only when requesting background location access on
           Android 10 (API level 29) and higher. -->
      <uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" />
    \n

    More information can be found in the Android docs here.

    \n

    iOS permissions requirements

    \n

    If iosAllowsBackgroundLocationUpdates property of the options object is set to true, the following code is required in the App_Resources/iOS/Info.plist file:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>location</string>
    </array>
    \n

    Use @nativescript/geolocation

    \n

    Get current location

    \n

    Before you call any method that gets the user's location, request for the user's permission by calling the enableLocationRequest method. Once the user has granted the permission, you can call the getCurrentLocation() method, passing it a options object to get the user's current location.

    \n
    import * as geolocation from '@nativescript/geolocation';
    import { CoreTypes } from '@nativescript/core' // used to describe at what accuracy the location should get

    geolocation.enableLocationRequest().then(() => {
        
        geolocation.getCurrentLocation({ desiredAccuracy: CoreTypes.Accuracy.high, maximumAge: 5000, timeout: 20000 }).then((currentLocation) => {

          console.log(\"My current latitude: \", currentLocation.latitude)
        })
      })
    \n

    API

    \n

    Plugin functions

    \n

    The plugin provides the following functions for getting current location and more:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    getCurrentLocation(options: Options)Promise<Location>Gets current location applying the specified options (if any). Since version 5.0 of the plugin, it will use requestLocation API for devices using iOS 9.0+. In situation of poor or no GPS signal, but available Wi-Fi it will take 10 sec to return the location.
    The options parameter is optional.
    watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options?: Options)numberMonitors location change.
    watchPermissionStatus(permissionCallback: permissionCallbackType, errorCallback: errorCallbackType)number(iOS-only)Monitors a change in location permission.
    clearWatch(watchId: number)voidStops monitoring a change in location. The watchId parameter is returned from the watchLocation() method.
    enableLocationRequest(always?: boolean, openSettingsIfLocationHasBeenDenied?: booleanPromise<void> Asks for permissions to use location services. On iOS if always is true, add the following keys to the Info.plist: NSLocationAlwaysAndWhenInUseUsageDescription (iOS 11.0+) OR NSLocationAlwaysUsageDescription (iOS 8.0-10.0) and NSLocationWhenInUseUsageDescription. Read more about request always usage. On Android SDK >= 29, the always parameter set to true requires the ACCESS_BACKGROUND_LOCATION permission to be added to the AndroidManifest.xml. That results in the user getting a system dialog with the option 'allow all the time' option. Read about Android location permissions here and here. If openSettingsIfLocationHasBeenDenied is true and the permission has previously been denied then the Settings app will open so the user can change the location services permission. See the exception to this.
    isEnabled(options?: Options)Promise<boolean>Resolves true or false based on the location services availability.
    distance(loc1: Location, loc2: Location)number Calculates the distance between two locations. Returns the distance in meters.
    getIOSLocationManagerStatus()CLAuthorizationStatusReturns the status of the Location Authorization permission.
    \n

    Location class

    \n

    This is a data class that encapsulates the following common properties for a geolocation.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    latitudenumberThe latitude of the geolocation, in degrees.
    longitudenumberThe longitude of the geolocation, in degrees.
    altitudenumberThe altitude (if available), in meters above sea level.
    horizontalAccuracynumberThe horizontal accuracy, in meters.
    verticalAccuracynumberThe vertical accuracy, in meters.
    speednumberThe speed, in meters/second over ground.
    timestampDateThe time at which this location was determined.
    \n

    Options interface

    \n

    The following are the properties of the options object that you pass to the geolocation functions of the plugin.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    desiredAccuracyCoreTypes.AccuracyOptional: Specifies if high accuracy or any is required. Defaults to CoreTypes.Accuracy.high which returns the finest location available but use more power than the CoreTypes.Accuracy.any option. Accuracy.any is considered to be about 100 meter accuracy.
    updateDistancenumberOptional: Specifies how often to update the location. Update distance filter in meters. Read more in Apple document and/or Google documents
    updateTimenumberInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document. Defaults to 1 minute
    minimumUpdateTimenumberOptional: Minimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
    maximumAgenumberOptional: The maximum age of the location data, in ms.
    timeoutnumberOptional: It indicates how long, in ms, to wait for a location. Defaults to 5 minutes.
    iosAllowsBackgroundLocationUpdatesbooleanOptional: Indicates whether to allow the application to receive location updates in the background (ignored on Android). Defaults to false. If enabled, the UIBackgroundModes key in Info.plist is required. A. Read more in Apple document
    iosPausesLocationUpdatesAutomaticallybooleanIndicates whether to allow the deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
    \n

    Known issues

    \n

    openSettingsIfLocationHasBeenDenied on Android API level 30

    \n

    If the user declines the permission twice during the installation lifetime of the app on Android API level 30 , the user won't be taken to the settings even if the openSettingsIfLocationHasBeenDenied option is true for enableLocationRequest().

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":263,"lastWeek":2086,"lastMonth":7023}},"@nstudio/nativescript-label-glitch":{"name":"@nstudio/nativescript-label-glitch","version":"1.0.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-label-glitch

    \n

    Label with a Glitch!

    \n
    npm install @nstudio/nativescript-label-glitch
    \n

    Usage

    \n

    Use within any view layout:

    \n
    <LabelGlitch text=\"Hello\" />
    \n

    When using flavors, you can register the element for usage in your markup:

    \n
    import { LabelGlitch } from '@nstudio/nativescript-label-glitch'

    // Angular
    import { registerElement } from '@nativescript/angular'
    registerElement('LabelGlitch', () => LabelGlitch)

    // Solid
    import { registerElement } from 'dominative';
    registerElement('LabelGlitch', LabelGlitch);

    // Svelte
    import { registerNativeViewElement } from 'svelte-native/dom'
    registerNativeViewElement('LabelGlitch', () => LabelGlitch);

    // React
    import { registerElement } from 'react-nativescript';
    registerElement('LabelGlitch', () => LabelGlitch);

    // Vue
    import Vue from 'nativescript-vue'
    Vue.registerElement('LabelGlitch', () => LabelGlitch)
    \n

    License

    \n\n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":22}},"nativescript-filter-select":{"name":"nativescript-filter-select","version":"1.3.0","license":"MIT","readme":"

    FilterSelect

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin to provide an listview widget to select AND filter items.

    \n

    Sample Screenshots

    \n

    Android and ios

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n

    Installation

    \n
    NativeScript 4.x
    \n
      \n
    • tns plugin add nativescript-filter-select
      • \n
    \n

    import css

    \n

    @import 'nativescript-filter-select/styles.css';

    \n

    *Be sure to run a new build after adding plugins to avoid any issues

    \n

    Vanilla NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:FS="nativescript-filter-select" on the Page element

    \n

    XML

    \n
    <Page xmlns:FS=\"nativescript-filter-select\">
       <StackLayout>     
         <FS:FilterSelect 
         items=\"{{ countries }}\"
         hint=\"Please select some countries\" 
         modal_title=\"Countries\" search_param=\"name\" 
         primary_key=\"code\" 
         change=\"{{ onSelect }}\"
         />
       </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n

    Regiter plugin in Component class

    \n

    import { registerElement } from 'nativescript-angular/element-registry';
    import { FilterSelect } from 'nativescript-filter-select';
    registerElement('FilterSelect', () => FilterSelect);
    \n

    HTML

    \n
        <FilterSelect 
            height=\"100%\"
            [items]=\"items\"
            (change)=\"onitemselected($event)\"
            hint=\"Please select some items\" 
            modal_title=\"item\" search_param=\"name\" 
            primary_key=\"id\">

        </FilterSelect>
    \n

    Attributes

    \n

    see demo examples for more information

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeDescriptionDefault
    renderto render "tags" or "label" or "drop"string : tags
    multipleto limit the options selected to one if set to falseboolean : true
    search_paramindex of the string value in the items object to search on itstring : name
    item_templatexml template for the listview itemsstring : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" />
    changechange event treger when select is donefunction : optional change(args) and selected item can be accessed as args.selected
    modal_titletitle of the filter modalString : Please select items
    hintstring to show when no items selectedPlease select some items
    itemsarray of objects to populate the list of optionsObservableArray :[]
    primary_keyunique index of the items objectstring : id
    selectedarray of objects to mark some options as selected and it will be the result when select is doneArray: []
    disabledto disable select bottonboolean : false
    allowSearchto enable/disable search bar in the modalboolean : true
    refreshto refresh the filter select with new values good with remote datafunction
    searchHintsearch placeholder or hint in the items modal"Search for item"
    xbtnremove tag text you can use tag icon here"x"
    closeTextclose button text"Close"
    doneTextdone button text"Done"
    clearTextclear button text"Clear"
    selectTextselect button text"Select"
    autofocuskeyboard up when you open modal so you can start searchfalse
    open()open modal programmaticallyfunction
    closeclose event treger when modal is closedyou can get the selected array by args.selected if the modal closed without any selection the array will be empty
    \n

    CSS core-theme styles is required for modal page if you dont have them just make your own

    \n

    see styles.css so you can override or make your own

    \n
      \n
    • and don't forget to share with us your nice styles :D
      • \n
    \n

    font icons

    \n
      \n
    • \n

      font icons are required if you are using dropdown render

      \n

      and you can add fontawsome icon as a select triger ( hint="{{'fa-list-ul' | fonticon}}" )

      \n

      see demo

      \n
      • \n
    \n

    For contributing

    \n

    just do a pull request with description of your changes or open issue with your ideas

    \n

    i need help with this issue

    \n","downloadStats":{"lastDay":1,"lastWeek":6,"lastMonth":130}},"nativescript-swipe-card":{"name":"nativescript-swipe-card","version":"1.0.8","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"twitter:

    \n

    \"NPM\"

    \n

    Nativescript Swipe Card plugin

    \n

    This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe

    \n

    Nativescript-swipe-card

    \n

    Tender cards, allow you to drag them, and detect swipe events.

    \n

    Developed with :heart: by the team NativeBaguette 🥖

    \n

    To know more about the {N} ambassador's program, you can check this video, or read this article.

    \n

    \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-swipe-card
    \n

    Usage

    \n

    Typescript NativeScript

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
          xmlns:customControls=\"nativescript-swipe-card\"
          loaded=\"pageLoaded\" class=\"page\">
        <StackLayout>
            <customControls:SwipeCard id=\"swipe\" 
                                      height=\"90%\"
                                      width=\"80%\" 
                                      items=\"{{ stackCards }}\" 
                                      cardHeight=\"60\" 
                                      cardWidth=\"70\"
                                      isRandomColor=\"1\"
                                      cardBorderRadius=\"20\"
                                      cardBorderWidth=\"2\"
                                      />
      </StackLayout>
    </Page>
    \n

    main-page

    \n
    import * as observable from 'tns-core-modules/data/observable';
    import * as pages from 'tns-core-modules/ui/page';
    import {HelloWorldModel} from './main-view-model';
    import {SwipeEvent} from 'nativescript-swipe-card';

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: observable.EventData) {
        // Get the event sender
        let page = <pages.Page>args.object;
        page.bindingContext = new HelloWorldModel();
        let swipeCard = page.getViewById(\"swipe\");
        swipeCard.on(\"swipeEvent\", (args:SwipeEvent) => {
            if (args.direction === 1) {
                        //right
                        console.log('Swiped to right');
            } else {
                        //left
                        console.log('Swiped to left');
            }
        });
    }
    \n

    main-view-model

    \n
    import {Observable} from 'tns-core-modules/data/observable';
    import {Layout} from \"tns-core-modules/ui/layouts/layout\";
    import {StackLayout} from \"tns-core-modules/ui/layouts/stack-layout\";
    import {GridLayout, ItemSpec} from \"tns-core-modules/ui/layouts/grid-layout\";
    import {Label} from \"tns-core-modules/ui/label\";
    import {Image} from \"tns-core-modules/ui/image\";
    import {Button} from \"tns-core-modules/ui/button\";

    export class HelloWorldModel extends Observable {
      public stackCards:Layout[];

      constructor() {
        super();

        let Grid = new GridLayout();
        let Label1 = new Label();
        let Label2 = new Label();
        Label1.text = \"The Swipable Card plugin\";
        Label1.textWrap=true;
        Label2.text = \"Welcome to {N} we present you\";
        Label2.textWrap=true;
        Grid.addChild(Label1);
        Grid.addChild(Label2);
        // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
        var firstRow = new ItemSpec(1, \"auto\");
        var secondRow = new ItemSpec(1, \"auto\");
        Grid.addRow(firstRow);
        Grid.addRow(secondRow);
        GridLayout.setRow(Label1,0);
        GridLayout.setRow(Label2,1);


        let stack2 = new StackLayout();
        let image = new Image();
        image.src=\"~/images/apple.jpg\"
        image.height=100;
        image.width=100;
        stack2.verticalAlignment = \"middle\";
        stack2.addChild(image);
        

        let stack3 = new StackLayout();
        let button = new Button();
        button.text=\"Click me!\";
        button.width=100;
        button.textAlignment = \"center\";
        stack3.verticalAlignment = \"middle\";
        stack3.addChild(button);
        this.stackCards = [stack3,stack2,Grid];
      }
      
    }
    \n

    Fun fact! Team Time-Travel (Luna Kang, Stefan Medjo and mentor Jen Looper used the plugin to complete their 'Fetching' app - a Tinder app for dogs that uses the Petfinder API to help dogs to find puppy playdates in their area!\nhttps://github.com/jlooper/fetching-app-vanilla

    \n

    Angular NativeScript

    \n

    XML

    \n
            <SwipeCard  height=\"75%\"
                        width=\"100%\" 
                        [items]=\"stackCards\"
                        (swipeEvent)=\"swipeEvent($event)\"
                        cardHeight=\"50\" 
                        cardWidth=\"80\"
                        isRandomColor=\"1\"
                        cardBorderRadius=\"15\"
                        cardBorderWidth=\"1\">
            </SwipeCard>
    \n

    Component

    \n
    import {Layout} from \"tns-core-modules/ui/layouts/layout\";
    import {StackLayout} from \"tns-core-modules/ui/layouts/stack-layout\";
    import {GridLayout, ItemSpec} from \"tns-core-modules/ui/layouts/grid-layout\";
    import {Label} from \"tns-core-modules/ui/label\";
    import {Image} from \"tns-core-modules/ui/image\";
    import {Button} from \"tns-core-modules/ui/button\";
    import * as elementRegistryModule from 'nativescript-angular/element-registry';
    elementRegistryModule.registerElement(\"SwipeCard\", () => require(\"nativescript-swipe-card\").SwipeCard);
    import {SwipeEvent} from 'nativescript-swipe-card';
    @Component({
        moduleId: module.id,
        templateUrl: \"helloworld.html\"
    })
    export class helloworldComponent {

      public stackCards:Array<Layout>=[];
      
      constructor() {
        let Grid = new GridLayout();
        let Label1 = new Label();
        let Label2 = new Label();
        Label1.text = \"The Swipable Card plugin\";
        Label1.textWrap=true;
        Label2.text = \"Welcome to {N} we present you\";
        Label2.textWrap=true;
        Grid.addChild(Label1);
        Grid.addChild(Label2);
        // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
        var firstRow = new ItemSpec(1, \"auto\");
        var secondRow = new ItemSpec(1, \"auto\");
        Grid.addRow(firstRow);
        Grid.addRow(secondRow);
        GridLayout.setRow(Label1,0);
        GridLayout.setRow(Label2,1);

        let stack2 = new StackLayout();
        let image = new Image();
        image.src=\"~/images/apple.jpg\"
        image.height=100;
        image.width=100;
        stack2.verticalAlignment = \"middle\";
        stack2.addChild(image);

        let stack3 = new StackLayout();
        let button = new Button();
        button.text=\"Click me!\";
        button.width=100;
        button.textAlignment = \"center\";
        stack3.verticalAlignment = \"middle\";
        stack3.addChild(button);
        this.stackCards = [stack3,stack2,Grid];
      }
      swipeEvent(args:SwipeEvent) {
            if (args.direction === 1) {
                        //right
                        console.log('Swiped to right');
            } else {
                        //left
                        console.log('Swiped to left');
            }
      };   
    }
    \n

    PS: I used this plugin in other application built in Angular, you can check it here:\nhttps://github.com/rkhayyat/SyrianForumFrance

    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    swipeEventfunctionSwipeEventCallback called when the layout is swiped to the right or left and the swipe animation is done. Return args:SwipeEvent:
    1- direction (1 if right/2 if left),
    2- cardIndex contain the card index
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnDescription
    itemsArray<Layout>Array of card's layout, in which we can define the content of each card.
    cardHeight (optional)numberCard's height in percentage of their container's height.
    cardWidth (optional)numberCard's width in percentage of their container's width.
    cardBorderRadius (optional)numberCard's border radius.
    cardBorderWidth (optional)numberCard's border's width.
    isRandomColor (optional)number1: Set card's colors randomly & automatically.
    2: Set card's colors manually.
    Default is 1.
    \n

    NativeBaguette 🥖

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Jean-Baptiste\"Rachid\"triniwiz\"\"BradMartin\"\"JenLooper\"
    rhanbrkhayyattriniwizbradmartinjlooper
    \n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":52}},"nativescript-ui-gauge":{"name":"nativescript-ui-gauge","version":"15.2.3","license":"Apache-2.0","readme":"

    NativeScript UI Gauge

    \n\n

    Overview

    \n

    The NativeScript UI Gauge plugin allows you to display the current status of a value within a range of upper and lower bounds, illustrate progress towards a goal, or a summary of a fluctuating metric. Some features include:

    \n
      \n
    • Add one or more RadialScale instances to your gauge;
      • \n
    • Use Bar indicators to visualize a range of values or a Needle indicator to point to a specific value;
      • \n
    • Include ready-to-use animations for smooth transition effects.
      • \n
    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-ui-gauge
    \n

    Documentation

    \n

    To use the gauge plugin, you need to add an instance of RadRadialGauge. It has a scales collection, which allows you to add a number of instances of type RadialScale.\nEach scale has an indicators collection that allows you to add different indicators. The indicator can be either of type RadialBarIndicator or RadialNeedle.\nMore information is available in the Guides for:

    \n\n

    API Reference

    \n

    Here is the API Reference section.

    \n

    Sample Apps

    \n

    The features of the plugin are demonstrated in the Sample apps for:

    \n\n

    Release Notes

    \n

    The release notes are available here.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":39,"lastWeek":339,"lastMonth":1402}},"@nativescript-community/ui-material-core-tabs":{"name":"@nativescript-community/ui-material-core-tabs","version":"7.2.4","license":"Apache-2.0","readme":"

    Nativescript Material Core

    \n

    Core module for all Nativescript material components

    \n","downloadStats":{"lastDay":229,"lastWeek":1789,"lastMonth":7845}},"nativescript-dynamsoft-barcode-reader":{"name":"nativescript-dynamsoft-barcode-reader","version":"1.1.2","license":"Apache-2.0","readme":"

    nativescript-dynamsoft-barcode-reader

    \n

    Nativescript plugin for Dynamsoft Barcode Reader.

    \n

    We can use it read barcodes from sources like the camera frames or static images.

    \n

    Installation

    \n
    npm install nativescript-dynamsoft-barcode-reader
    \n

    Usage

    \n

    Initialization

    \n
    this.dbr = new BarcodeReader();
    this.dbr.initLicense(\"DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==\"); //1-day public trial.
    \n

    Decoding

    \n
      \n
    1. \n

      Decode from a camera frame

      \n
      let results = this.dbr.decodeFrame(this.dce.captureFrame()); //get a camera frame from Dynamsoft Camera Enhancer
      \n
      2. \n
    2. \n

      Start live scanning with Dynamsoft Camera Enhancer.

      \n
      //bind Dynamsoft Camera Enhancer to Dynamsoft Barcode Reader
      this.dbr.setCameraEnhancer(this.dce.getCameraEnhancer()); 
      //set the text result listener
      this.dbr.setTextResultListener(function (textResults:TextResult[]) {
        console.log(textResults);
      })
      //start scanning from the camera
      this.dbr.startScanning();
      \n
      3. \n
    \n

    You can apply a trial license here.

    \n

    API

    \n

    Methods:

    \n
    initLicense(license:string,licenseListener?:LicenseListener):void;
    initRuntimeSettingsWithString(template:string);
    decodeFrame(frame:any):TextResult[];
    decodeFrameAsync(frame:any):Promise<TextResult[]>;
    decodeBitmap(bitmap:any):TextResult[];
    decodeBase64(base64:string):TextResult[];
    decodeFile(file:string):TextResult[];
    setCameraEnhancer(dce:any):void;
    startScanning():void;
    stopScanning():void;
    setTextResultListener(listener: TextResultListener);
    \n

    Interfaces:

    \n
    export interface TextResultListener{
      (results:TextResult[]):void;
    }

    export interface LicenseListener{
      (isSuccess:boolean,error:any):void;
    }

    export interface TextResult {
      barcodeText:string;
      barcodeFormat:string;
      x1:number;
      x2:number;
      x3:number;
      x4:number;
      y1:number;
      y2:number;
      y3:number;
      y4:number;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":20}},"@nativescript-community/xml-ui-core":{"name":"@nativescript-community/xml-ui-core","version":"1.0.0-alpha.3","license":"Apache-2.0","readme":"

    @nativescript-community/xml-ui-core

    \n

    \"npm\"\n\"npm\"

    \n

    This package contains utilities used by @nativescript-community/xml-ui-compiler.

    \n

    Installation

    \n
    npm install @nativescript-community/xml-ui-core
    \n

    Usage

    \n

    In your app/main.ts, append the following import:

    \n
    import '@nativescript-community/xml-ui-core';
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":66}},"@lmslopes/nativescript-stripe":{"name":"@lmslopes/nativescript-stripe","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript Stripe

    \n

    forked from https://github.com/triniwiz/nativescript-plugins

    \n

    Installation

    \n
    npm install @lmslopes/nativescript-stripe
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":55}},"@nativescript/ionic-portals":{"name":"@nativescript/ionic-portals","version":"1.2.1","license":"Apache-2.0","readme":"

    @nativescript/ionic-portals

    \n

    https://ionic.io/docs/portals

    \n
    \n

    Ionic Portals are supercharged native WebView components for iOS and Android that let you add web-based experiences to native mobile apps.

    \n
    \n

    \"Ionic

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @nativescript/ionic-portals
    \n

    Prerequisites

    \n\n

    Usage

    \n

    1. Registering portals

    \n

    To register your Ionic Portals, call the [IonicPortalManager] class's register method with the Portal API key.

    \n
    import { Application } from '@nativescript/core';

    import { IonicPortalManager } from '@nativescript/ionic-portals';

    Application.on(Application.launchEvent, () => {
    \t// Register IonicPortals
    \tIonicPortalManager.register('<portal-api-key>');
    });

    // boot app here, for example:
    Application.run({ moduleName: 'app-root' });
    \n

    Create as many Portals as you need to use in your app.

    \n

    The app will look for folders within its resources where the folder name is equal to the portal id you used to define each portal.

    \n

    Given the following examples, ensure your web portal is built into the following folders:

    \n
      \n
    • For iOS: App_Resources/iOS/webPortal
      • \n
    • For Android: App_Resources/Android/src/main/asssets/webPortal
      • \n
    \n

    2. Use it in markup

    \n

    Core

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:ionic=\"@nativescript/ionic-portals\">
      <StackLayout class=\"p-20\">
        <ionic:IonicPortal id=\"webPortal\">
        </ionic:IonicPortal>
      </StackLayout>
    </Page>
    \n

    Angular

    \n
    import { registerElement } from '@nativescript/angular';
    import { IonicPortal } from '@nativescript/ionic-portals';
    registerElement('IonicPortal', () => IonicPortal);
    \n
    <IonicPortal id=\"webPortal\"></IonicPortal>;
    \n

    Vue

    \n
    import { IonicPortal } from '@nativescript/ionic-portals';

    registerElement(\"IonicPortal\", ()=> IonicPortal)
    \n
     <gridLayout height=\"300\" class=\"mt-3 p-3\">
        <IonicPortal id=\"webPortal\"/>
    </gridLayout>
    \n

    Svelte

    \n
    import { IonicPortal } from '@nativescript/ionic-portals';

    import {registerNativeViewElement} from \"svelte-native/dom\"
    registerNativeViewElement(\"ionicPortal\", ()=> IonicPortal)
    \n
    <gridLayout height=\"300\" class=\"mt-3 p-3\">
        <ionicPortal id=\"webPortal\"/>
    </gridLayout>
    \n

    Sending events from NativeScript to any web portal

    \n

    To send events from NativeScript to any web portal, use the publishTopic() method:

    \n
    IonicPortalManager.publishTopic('hello', { name: 'data from NativeScript' });
    \n

    Subscribing to events sent from web portals

    \n

    To subscribe to events sent from any web portal, call the subscribeToTopic method with the event name as the first argument and the event handler as the second argument.

    \n
    const subscriptionId = IonicPortalManager.subscribeToTopic('useful-web-event', result => {
      console.log('received web portal useful-web-event with data:', result.data);
    });
    \n

    Unsubscribing from events sent from web portals

    \n

    To unsubscribe from events sent from any web portal, call the unsubscribeFromTopic() method with the event name as the first argument and the subscription id as the second argument.

    \n
    IonicPortalManager.unsubscribeFromTopic('useful-web-event', subscriptionId);
    \n

    IonicPortalManager API

    \n

    Allows you to interact with and configure portals via the following APIs.

    \n

    register()

    \n
    IonicPortalManager.register(apiKey)
    \n

    Registers portals. Call it in the main.ts file, before the app boots, in the handler of the Application.launchEvent event.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    apiKeystringYour portal API key
    \n

    setInitialContext()

    \n
    IonicPortalManager.setInitialContext(id,initialContext)
    \n

    Used to set the initial context of any portal id before the portal is shown.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    idstringThe portal id.
    initialContextstringData provided as the initial context to the portal.
    \n
    \n

    setAndroidPlugins()

    \n
    IonicPortalManager.setAndroidPlugins(plugins)
    \n

    Defines the usage of non-official Capacitor Plugins via Android package names

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    plugins Array<string>A list of non-official Capacitor package names.
    \n

    publishTopic()

    \n
    IonicPortalManager.publishTopic(topic, data)
    \n

    Sends a message to any web portal by publishing a topic (aka. event)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    topic stringThe name of the topic/event
    data anyOptional: The payload to send with the topic.
    \n

    subscribeToTopic()

    \n
    subscriptionId: number = IonicPortalManager.subscribeToTopic(topic, (data?: any) => void))
    \n

    Listens to any message sent from any web portal by subscribing to the specified topic. It returns a subscription id used to later unsubscribe from the topic.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    topic stringThe name of the topic/event to subscribe to.
    callbackfunctionThe function invoked every time a message is sent via the topic with an optional data parameter.
    \n
    \n

    unsubscribeFromTopic()

    \n
    IonicPortalManager.unsubscribeFromTopic(topic, subscriptionId)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    topic stringThe name of the topic/event to unsubscribe from.
    subscriptionIdnumberThe subscription id returned by subscribeToTopic().
    \n

    configureLiveUpdates

    \n

    Note: configure before displaying the portal.

    \n
    IonicPortalManager.configureLiveUpdates('webPortal', {
    \tappId: 'e2abc12',
    \tchannel: 'production',
    \tsyncOnAdd: true
    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    portalId stringThe portal id.
    configIonicPortalLiveUpdateConfigLive update configuration.
    \n

    syncNow

    \n
    IonicPortalManager.syncNow(['e2abc12'], false, status => {
    \tconsole.log('sync complete:', status)
    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    appIdsArray<string>Portal app ids to sync.
    isParallelbooleanWhether to sync in parallel or not.
    complete(status: string) => voidComplete callback.
    \n

    getLastSync

    \n
    const lastSync = IonicPortalManager.getLastSync('e2abc12')
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    appIdstringPortal app id to check last sync.
    \n

    Using Capacitor Plugins with Ionic Portals

    \n

    Refer to this blog post.

    \n

    Notes

    \n
    \n

    For iOS:\nYou may need to add IPHONEOS_DEPLOYMENT_TARGET = 12.0 to your App_Resources/iOS/build.xcconfig file.\nIf your project contains App_Resources/iOS/Podfile, you may need to remove any post install handling which removes deployment targets, for example:\nRemove anything like this: config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'

    \n
    \n

    Additional Resources

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":21,"lastWeek":93,"lastMonth":582}},"@nativescript/facebook":{"name":"@nativescript/facebook","version":"2.2.0","license":"Apache-2.0","readme":"

    @nativescript/facebook

    \n

    Installation

    \n
    npm install @nativescript/facebook
    \n

    Prerequisites

    \n

    Android

    \n

    Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

    \n

    iOS

    \n

    Follow step 3 in the Getting Started Guide for Facebook SDK for iOS.

    \n

    Usage

    \n

    First of all, you should initialize the LoginManager by calling the init method.

    \n
    import { LoginManager } from '@nativescript/facebook';

    LoginManager.init()
    \n

    Then to log the user in, use the logInWithPermissions method.\nYou can also use the Login Manager with custom UI to perform Login.

    \n
    import { LoginManager, AccessToken } from '@nativescript/facebook';

    try {
    \tconst result = await LoginManager.logInWithPermissions(['public_profile']); // LoginResult
    \tconst accessToken = AccessToken.currentAccessToken();
    } catch (e) {}
    \n

    To log the user out, call the logOut method.

    \n
    LoginManager.logOut()
    \n

    API

    \n

    AccessToken

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    appIDstring
    dataAccessExpirationDateDatereadonly
    dataAccessExpiredbooleanreadonly
    declinedPermissionsstring[]readonly
    expirationDateDatereadonly
    expiredbooleanreadonly
    expiredPermissionsstring[]readonly
    graphDomainstringreadonly
    permissionsstring[]readonly
    refreshDateDatereadonly
    tokenStringstringreadonly
    userIDstringreadonly
    currentAccessToken()AccessTokenA static method that returns an access token.
    currentAccessTokenIsActivebooleanreadonly
    iosFBSDKAccessTokenreadonly. iOS access token.
    androidAccessTokenreadonly. Android access token.
    \n

    LoginResult Class

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    androidLoginManagerreadonly. Native instance for Android.
    iosFBSDKLoginManagerreadonly. Native instance for iOS.
    grantedPermissionsstring[]readonly
    isCancelledbooleanreadonly
    tokenAccessTokenreadonly
    \n

    LoginManager Class

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameType/Return TypeDescription
    static init()voidInitializes the LoginManager. You should call this method early in the app lifecycle and the best place for that is the main.ts.
    static logInWithPermissions(permissions: string[], context?: any)Promise<LoginResult>Opens the login window in the optionally provided context(a UIViewController instance on iOS and an [Activity](https://developer.android.The permissions parameter indicates the data about the user the app would like to get from Facebook.
    static logout()voidLogs out the user.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":2,"lastWeek":43,"lastMonth":408}},"nativescript-dynamsoft-camera-enhancer":{"name":"nativescript-dynamsoft-camera-enhancer","version":"1.1.2","license":"Apache-2.0","readme":"

    nativescript-dynamsoft-camera-enhancer

    \n

    Nativescript plugin for Dynamsoft Camera Enhancer.

    \n

    We can use it for camera preview, which is the base of building a barcode scanner, a text scanner, a document scanner, etc.

    \n

    Installation

    \n
    npm install nativescript-dynamsoft-camera-enhancer
    \n

    Usage

    \n

    Add the camera view in the layout:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
        xmlns:dce=\"nativescript-dynamsoft-camera-enhancer\"
        navigatingTo=\"navigatingTo\" class=\"page\">
        <GridLayout rows=\"*, auto, auto\">
            <dce:CameraEnhancer 
            loaded=\"{{ dceLoaded }}\" 
            rowSpan=\"3\" 
            active=\"{{ isActive }}\"
            cameraID=\"{{ desiredCamera }}\"
            torch=\"{{ desiredTorchStatus }}\">    </dce:CameraEnhancer>
        </GridLayout>
    </Page>
    \n

    Get the camera enhancer intanse in the code behind:

    \n
    dce:CameraEnhancer;
    dceLoaded(args: EventData) {
      this.dce = <CameraEnhancer>args.object;
    }
    \n

    Methods:

    \n
    captureFrame(): any;
    captureFrameAsBase64(): string;
    getAllCameras(): string[];
    getSelectedCamera(): string;
    getCameraEnhancer(): any;
    getResolution(): Resolution;
    setResolution(resolution:Resolution): void;
    setZoom(factor:number);
    getMaxZoomFactor(): number;
    open(): void;
    close(): void;
    \n

    Properties:

    \n
    active:boolean //whether the camera is open
    torch:boolean  //whether the torch is on
    cameraID:string //the selected camera ID
    \n

    Interfaces:

    \n
    export interface Resolution {
      width: number;
      height: number;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":20}},"@nativescript/mlkit-barcode-scanning":{"name":"@nativescript/mlkit-barcode-scanning","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-barcode-scanning

    \n
    npm install @nativescript/mlkit-barcode-scanning
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":59,"lastWeek":934,"lastMonth":4230}},"nativescript-comments":{"name":"nativescript-comments","version":"1.1.9","license":"Apache-2.0","readme":"

    Nativescript Comments

    \n

    \"npm\"\n\"npm\"

    \n

    Comments box ready for integration inside you'r native script app

    \n

    \"Sample1\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-comments
      • \n
    \n

    add comments.ios.css and comments.android.css css for styling

    \n

    *Be sure to run a new build after adding plugins to avoid any issues

    \n

    Usage

    \n
        <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:UI=\"nativescript-comments\">
        <UI:Comments  like=\"{{ like }}\" add=\"{{ add }}\" items=\"{{ comments }}\"   />
        </page>
    \n

    access events

    \n
         public like(args) {
            // args.object.toggle(args.to) function increase or decrease the like count inside the comment
            // args.to has the id of the liked item 
            args.object.toggle(args.to);
            console.log(this.comments.getItem(0).isLike);
        }

        public add(args) {
            // args.object.busy(true) show the activity indicator
            // args.object.busy(false) hide the activity indicator
            // args.object.push({}) push new comment to the items 
            let self = this;
            args.object.busy(true)

            // setTimeout is just to emulate server delay time 
            setTimeout(function () {
            args.object.push({ image: \"~/images/icon-50.png\", id: self.random(1000), comment: args.comment, replyTo: args.to, username: \"Demo User\", likes: 0, isLike: false, datetime: Date.now() });
            console.log(self.comments.length);
            args.object.busy(false);
            }, 2000);
        }

        public edit(args) {
            // the edited comment 
            alert(args.comment);
            //the id of the edited comment
            alert(args.id)
        }

            public delete(args) {
            //the id of the deleted comment
            alert(args.id);
        }
    \n

    you can edit or delete by longPress on the comment that have {editing:true} in the comment object

    \n

    API

    \n

    see demo for more details

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    itemsrequiredArray of comment object { image:" image src ", id: "unique identifier of the comment", comment: "comment text ", username: "user name ", likes: " number of how many likes ", isLike: "boolean is the user like this or not ", datetime: "datetime of the comment" }
    addfunction(arg){}event on comment added you can access the object to push the comment buy args.object.push($comment-object) and you can get the id of the comment that replyed to by args.to
    likefunction(arg){}event on like clicked send with obj.to and you can toggle the like with args.object.toggle(args.to)
    scrolltrueenable or disable scrollview inside the comments holder
    canCommenttruedisable or enable submission
    imagetagthe xml element of the image so you can change it if you need to add cache plugin or something
    pluginempty stringplugin include statment like xmlns:IC="nativescript-web-image-cache"
    titleCommentsthe title of the comments box
    replyTextreplythe reply button text
    likeTextlikethe like button text
    toTextreplying to :replying to text
    sendTextcommentthe comment send button text
    fontClassfathe font library class
    editingTextediting your commentthe editing help text when you hit edit
    xbtnxthe exit edit or reply text can be font icon
    textviewfalseboolean flag to make comment field textview or textfield
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":24,"lastMonth":76}},"nat-test":{"name":"nat-test","version":"1.0.1","license":"MIT","readme":"

    Develop a nativescript-angular plugin now

    \n

    \"Angular\n\"MIT\n\"Dependency

    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Demo\"
    Android and iPhone running the same {N} + Angular plugin.
    \n

    The seed is setup to allow you to create a nativescript-angular plugin quickly.

    \n
      \n
    • Sample demo app ready for you to try out your plugin as you develop it.
      • \n
    • Sample Component, Directive, Pipe and Service created for you (tests coming soon) to get started right away.
      • \n
    • Customize whichever is helpful to your plugin and remove the others.
      • \n
    \n

    Get started

    \n
      \n
    1. Download a zip of this seed.
      2. \n
    2. cd ... path/to/unzip/folder ...
      3. \n
    3. npm install -g nativescript
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    Changes needed

    \n

    You will want to change a couple things for your plugin.

    \n
      \n
    1. Replace all instances of nativescript-ngx-yourplugin with name of your plugin:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/package.json
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/package.json#L22
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/tsconfig.json#L13 (And likely modify more to tailor to your specific plugins typescript definition needs)
      • \n
    \n
      \n
    1. Modify the demo to import your plugin files, etc:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/main.ts#L12
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/main.ts#L18
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/app.component.ts#L3
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/app.component.ts#L22
      • \n
    \n
      \n
    1. Replace the 'YourPluginModule' with your plugin module name:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/nativescript-ngx-yourplugin.ts#L30
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/main.ts#L12
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/src/app/main.ts#L18
      • \n
    \n
      \n
    1. If you modified the name of services,components,... or created new ones that you want to export them:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ngx-plugin-seed/blob/master/nativescript-ngx-yourplugin.ts#L3-L28
      • \n
    \n

    Develop Workflow

    \n

    Make changes to plugin files, then:

    \n
    npm run demo.ios

    // or...

    npm run demo.android
    \n

    Build Plugin

    \n

    You'll want to run this before publishing.

    \n
    npm run build
    \n

    Publishing

    \n

    packagedev.json should always mirror your package.json for development.\nAfter installing dependencies for your plugin and running your demo, just copy contents of package.json to packagedev.json.

    \n

    Then to publish:

    \n
      \n
    1. Setup packagepublish.json the way you want your plugin published (Bumping correct version and setting the description, author, keywords, repo, main, and typings correctly for instance).
      2. \n
    2. node prep publish (This will set your package.json to be your packagepublish.json).
      3. \n
    3. npm run build (Create a fresh build of your library)
      4. \n
    4. npm publish
      5. \n
    \n

    Back to development

    \n

    After publishing, it's a good idea to set your package.json back to development mode before committing your changes. Your packagedev.json should be exactly what your development mode package was before publishing above.

    \n
      \n
    1. node prep dev
      2. \n
    2. Continue developing.
      3. \n
    \n

    Troubleshooting

    \n

    When preparing your demo if you get the following error message:

    \n
    Plugin \"nativescript-ngx-yourplugin\" is not installed.
    Sending exception report (press Ctrl+C to stop).....
    \n

    This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":31}},"nativescript-purchase":{"name":"nativescript-purchase","version":"2.0.14","license":"Apache-2.0","readme":"

    NativeScript In-App Purchases plugin

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript plugin for making in-app purchases.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-purchase

    \n

    This command automatically installs the necessary files, as well as stores nativescript-purchase as a dependency in your project's package.json file.

    \n

    In order to get IntelliSense and make TypeScript compile without problems, add the following to your references.d.ts:

    \n
    /// <reference path=\"./node_modules/nativescript-purchase/nativescript-purchase.d.ts\" />
    \n

    Configuration

    \n

    In order for your in-app purchases to be recognized by the plugin, you must configure those on the Google/iTunes side. You can check the in-depth tutorials at the bottom of the page to see how to do it step-by-step.

    \n

    API

    \n

    Static Properties

    \n
      \n
    • transactionUpdatedEvent - String
      \nString value used when hooking to transactionUpdated event.
      • \n
    \n

    Static methods

    \n
      \n
    • \n

      init(string[]): Promise
      \nInitializes the plugin for work with the specified in-app purchase identifiers.

      \n
      • \n
    • \n

      getProducts(): Promise<Product[]>
      \nReturns the product details (see below) for the in-app purchase identifiers that were used in init.

      \n
      • \n
    • \n

      canMakePayments(): boolean
      \nChecks whether the current user is allowed to make in-app purchases.

      \n
      • \n
    • \n

      buyProduct(Product, string?): void
      \nBuys the given product. On Android you can send custom string data that will be present in the Transaction.

      \n
      • \n
    • \n

      consumePurchase(string): Promise
      \nConsumes the purchases represented by the given transaction token. If the promise returns 0 the consume was successful. Note that this is needed only for Android. For iOS each purchase is automatically consumed when it is set up as a consumabel product in iTunes.

      \n
      • \n
    • \n

      restorePurchases(): Promise\nRestores previous purchased items for the current user. On Android, returns a promise for when the purchases have been restored. On iOS, returns a completed promise (as you can use getStoreReceipt to get the receipt instantly anytime).

      \n
      • \n
    • \n

      getStoreReceipt(): string
      \nGets the application's Base64 encoded store receipt for the currently logged in store user. This is useful when checking subscription status under iOS. For Android the function always returns undefined.

      \n
      • \n
    • \n

      refreshStoreReceipt(): Promise\nRefreshes the store receipt for the currently logged in store user. This is useful when a transaction is invalid or missing. On iOS, returns a completed promise once the refresh is complete.

      \n
      • \n
    \n

    Events

    \n
      \n
    • transactionUpdated
      \nTriggered a buy/restore transaction changes its state. You receive a Transaction object where you can check the status and other properties (see below) of the transaction.
      • \n
    \n

    Product properties

    \n
      \n
    • \n

      nativeValue
      \nThe native object representing the product. On iOS this will be an instance of SKProduct, and on Android this will be a org.json.JSONObject

      \n
      • \n
    • \n

      productIdentifier - string
      \nThe in-app product identifier as setup on iTunes Connect or Google Store.

      \n
      • \n
    • \n

      localizedTitle - string
      \nThe title of the product based on the user's phone localization.

      \n
      • \n
    • \n

      localizedDescription - string
      \nThe description of the product based on the user's phone localization.

      \n
      • \n
    • \n

      priceAmount - number
      \nThe numerical value of the price for this in-app product based on the currency of the user's app store.

      \n
      • \n
    • \n

      priceFormatted - string
      \nThe formatted priceAmount with the corresponding currency symbol of the user's app store.

      \n
      • \n
    • \n

      priceCurrencyCode - string
      \nThe ISO4217 currency code of the price (BGN, EUR, USD, etc.)

      \n
      • \n
    • \n

      productType - "inapp" | "subs"
      \nThe type of the product - in-app purchase or subscription.

      \n
      • \n
    • \n

      subscriptionPeriod - string
      \nThe ISO8601 duration of the subscription. For example P1D stands for a daily subscription, P1M is a monthly subscription, P3M is a three month subscription. The property has a value only for products of type "subs".

      \n
      • \n
    \n

    Transaction properties

    \n
      \n
    • \n

      nativeValue
      \nThe native value representing the transaction. On iOS this will be an instance of SKPaymentTransactio and on Android this will be a org.json.JSONObject.

      \n
      • \n
    • \n

      transactionState - string
      \nThe state of the transaction. Can be one of the following:

      \n
        \n
      • Purchased
        • \n
      • Restored
        • \n
      • Failed
        • \n
      • Deferred (iOS only)
        • \n
      • Purchasing (iOS only)
        • \n
      • Refunded (Android only)
        • \n
      \n
      • \n
    • \n

      productIdentifier - string
      \nThe in-app product identifier that triggerred this transaction.

      \n
      • \n
    • \n

      transactionIdentifier - string
      \nThe unique identifier of the transaction.

      \n
      • \n
    • \n

      transactionDate - Date
      \nThe date of the transaction.

      \n
      • \n
    • \n

      transactionReceipt - string
      \nThe Base64 encoded transaction receipt. You can use this to do additional verification on your backend.

      \n
      • \n
    • \n

      originalTransaction - Transaction
      \nThis will be present only when restoring purchases and will contain the original transaction that purchased a given product.

      \n
      • \n
    • \n

      developerPayload - string
      \nCustom data sent with buyProduct.

      \n
      • \n
    • \n

      dataSignature - string (Android only)
      \nThe signature for the transaction.

      \n
      • \n
    \n

    Usage

    \n

    First we need to initialize the plugin with a list for product identifier that will be available for purchase. This is best to be done before the application starts.

    \n

    Note that it is possible that the initialization of the plugin takes more time than the application to boot. So especially in the cases that you load the products on your landing page, it is best that to save the Promise returned by the init() method and then check it before trying to get your products.

    \n
    import *  as purchase from \"nativescript-purchase\";
    (global as any).purchaseInitPromise = purchase.init([\"com.sample.purchase.coolproduct1\", \"com.sample.purchase.coolproduct2\"]);
    \n

    To get the actual products with details (like title, price, currency, etc.) you should use:

    \n
    import { Product } from \"nativescript-purchase/product\";

    (global as any).purchaseInitPromise.then(() => {
        purchase.getProducts().then((products: Array<Product>) => {
            products.forEach((product: Product) => {
                console.log(product.productIdentifier);
                console.log(product.localizedTitle);
                console.log(product.priceFormatted);
            });
        });
    });
    \n

    Before proceeding with buying items you should hook up to the transactionUpdated event. This way you will receive information about the transaction state while it is executing and take necessary action when the transaction completes:

    \n
    import { Transaction, TransactionState } from \"nativescript-purchase/transaction\";
    import * as applicationSettings from \"application-settings\";

    purchase.on(purchase.transactionUpdatedEvent, (transaction: Transaction) => {
        if (transaction.transactionState === TransactionState.Purchased) {
            alert(`Congratulations you just bought ${transaction.productIdentifier}!`);
            console.log(transaction.transactionDate);
            console.log(transaction.transactionIdentifier);
            applicationSettings.setBoolean(transaction.productIdentifier, true);
        }
        else if (transaction.transactionState === TransactionState.Restored) {
            console.log(`Purchase of ${transaction.originalTransaction.productIdentifier} restored.`);
            console.log(transaction.originalTransaction);
            console.log(transaction.originalTransaction.transactionDate);
            applicationSettings.setBoolean(transaction.originalTransaction.productIdentifier, true);
        }
        else if (transaction.transactionState === TransactionState.Failed) {
            alert(`Purchase of ${transaction.productIdentifier} failed!`);
        }    
    });
    \n

    Now let's buy a product!

    \n
    if (purchase.canMakePayments()) {
        // NOTE: 'product' must be the same instance as the one returned from getProducts()
        purchase.buyProduct(product);
    }
    else {
        alert(\"Sorry, your account is not eligible to make payments!\");
    }
    \n

    NOTE: Because of the difference between iOS and Android in terms of consuming purchases - for iOS this is defined\nin the product you add in iTunes Connect and it is consumed automatically, where for Android it has to be done manually -\nif you will be supporting Android you will have to manually consume the purchase by calling the consumePurchase method.\nThe methods takes a single parameter that is the receipt from the transaction:

    \n
    purchase.on(purchase.transactionUpdatedEvent, (transaction: Transaction) => {
        if (transaction.transactionState === TransactionState.Purchased && transaction.productIdentifier.indexOf(\".consume\") >= 0) {
            purchase.consumePurchase(transaction.transactionReceipt)
                .then((responseCode) => console.log(responseCode)) // If responseCode === 0 the purchase has been successfully consumed
                .catch((e) => console.log(e));
        }    
    });
    \n

    And to restore previous purchases to the user's device:

    \n
    purchase.restorePurchases();
    \n

    Demo

    \n

    This repository includes a plain NativeScript demo. Note that in order to set up and run the demo you need to have the Grunt CLI installed globally. If you don't have it installed, you can do it by running the following in your shell:

    \n
    $ npm install -g grunt-cli
    \n

    Once you have Grunt CLI set up in order to set it up the demo run the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-purchase
    $ cd nativescript-purchase
    $ npm install
    $ grunt compile
    $ cd demo
    \n

    You will not be able to directly run the demo, becuase you need to add your purchases to the stores. Also since I already registered the application ID you will have to change that in the package.json file located in the demo folder. So make sure you read and follow the in-depth tutorials below in order to get started with the demo.

    \n

    In-depth Tutorial

    \n
      \n
    1. Adding the plugin to your application and creating a purchase workflow
      2. \n
    2. Configuring iTunes Connect and making purchases on iOS
      3. \n
    3. Configuring Google Play Store and making purchases on Android
      4. \n
    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":31,"lastMonth":167}},"@voicethread/nativescript-custom-rotors":{"name":"@voicethread/nativescript-custom-rotors","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Custom Roters \"apple\"

    \n
    \n

    @voicethread/nativescript-custom-rotors

    \n
    \n

    The nativescript-custom-rotors adds easy to use properties to common {N} views to make them accessible to iOS Accessibility Custom Rotors. Accessibility Custom Rotors provide an elegant solution for screen-reader assisted navigation by associating views from various containers and geographies into a common a11y accessible group. Please see this video from Apple WWDC2020 for more information on iOS Accessibility Custom Rotors

    \n
    \n

    NOTE: this plugin ONLY works on iOS. In android, the plugin functionality is ignored.

    \n
    \n

    Contents

    \n\n

    Installation

    \n
    npm install @voicethread/nativescript-custom-rotors
    \n

    Expanded Classes

    \n

    ViewBase has been expanded with the following interface:

    \n
    interface RotorGroupItem {
      /**
       * @property rotorGroup
       * the name of the group that this view belongs to
       */
      rotorGroup: string;
      /**
       * @property rotorOrder
       * order within the rotor group. defaults to -1
       */
      rotorOrder: number;
    }
    \n

    ContentView and BaseLayout have been expanded with the following interface:

    \n
    interface RotorContainerView {
      /**
       * @property rotorContainer
       * set the view as a RotorContainer
       */
      rotorContainer: boolean;
      /**
       * rotorGroups
       * a map<string,Array<View>> of rotor names and associated views
       */
      rotorGroups: any;
      /**
       * rotorGroupCallback
       * a map<string,Callback> of rotor names and callbacks to execute
       */
      rotorGroupCallbacks: Map<string, Callback>;
      /**
       * @function removeRotorItem
       * removes a view from it's rotor group
       */
      removeRotorItem: (item: ViewBase) => boolean;
      /**
       * @function insertRotorItem
       * inserts an item into a rotor group at a specified index
       */
      insertRotorItem: (item: ViewBase, index?: number) => boolean;
      /**
       * @function addRotorGroup
       * adds a rotor group to a container
       */
      addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
    }
    \n

    Usage

    \n

    initialize the custom-rotors plugin in\napp.ts:

    \n
    ...
    import {initCustomRotors} from 'nativescript-custom-rotors'
    initCustomRotors();
    ...
    Application.run(...);
    \n

    then set a ContentView or a BaseLayout as a rotorContainer:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
    ...
    </Page>
    \n

    or, in code:

    \n
    export function navigatingTo(e:NavigatedData):void {
      const page = e.object as Page;
      page.rotorContainer = true;
    }
    \n

    The @nativescript/custom-rotor plugin will traverse the children of the container to create and add elements to specified groups:

    \n
    ...
      <Button text=\"Group1 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
      <Button text=\"Group1 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
      <Button text=\"Group2 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
      <Button text=\"Group2 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
    ...
    \n

    Custom elements will also be traversed, so you don't need to specify rotor groups all in one .xml or .ts/.js file.

    \n

    Advanced Usage

    \n

    Individual elements can be part of their own rotor group, and custom handling can be provided to the CustomRotor. Consider a widget used to provide a rating for an item (inspired by this tutorial on ios CustomRotors.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
    ...
    <GridLayout id=\"rating-bar\" rows=\"90, *\" columns=\"*,*,*,*,*\" accessible=\"true\" rotorGroup=\"rating\" row=\"1\" col=\"1\">
      <GridLayout class='rating-item' row=\"1\" col=\"0\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"1\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"1\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"2\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"2\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"3\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"3\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"4\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"4\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"5\" />
      </GridLayout>
      <Label class='rating-desc' color=\"blue\" text=\"dial rotor to 'rating' then flick up and down to change the rating\" row=\"0\" col=\"0\" colSpan=\"5\" textWrap=\"true\"/>
    </GridLayout>
    ...
    </Page>
    \n

    The rating rotor group functionality can be handled using something like this:

    \n
    export function navigatingTo(d: NavigatedData): void {
      const page = d.object as Page;
      page.rotorGroupCallbacks.set('rating', ({ forward }) => {
        incrementOrDecrementRating(page, forward);
      });
    }

    let rating = 0;
    function incrementOrDecrementRating(page: Page, increment: boolean): void {
      rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
      const ratingBar = page.getViewById('rating-bar') as GridLayout;
      for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
        const view = ratingBar.getChildAt(i);
        view.backgroundColor = i < rating ? 'green' : 'transparent';
      }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":19}},"test-tns-web-angular-2":{"name":"test-tns-web-angular-2","version":"1.0.0","readme":"

    Test Tns Web Angular 2

    \n

    \"NPM\n\"NPM\n\"Build\n\"Test

    \n
    \n

    Installation

    \n
    npm install test-tns-web-angular-2 --save
    \n

    Usage

    \n
    var testTnsWebAngular2 = require('test-tns-web-angular-2')

    testTnsWebAngular2() //=> \"Hello World!\"
    \n

    License

    \n

    MIT license

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":17}},"@nativescript-community/md5":{"name":"@nativescript-community/md5","version":"1.0.4","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/md5

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin for fast MD5 computation for files
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/md5

    \n

    \n

    API

    \n

    The API documentation for this plugin is available here.

    \n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@nativescript-community/md5.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":45}},"swtc-brorand":{"name":"swtc-brorand","version":"1.1.1","license":"MIT","readme":"

    Brorand

    \n

    LICENSE

    \n

    This software is licensed under the MIT License.

    \n

    Copyright Fedor Indutny, 2014.

    \n

    Permission is hereby granted, free of charge, to any person obtaining a\ncopy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit\npersons to whom the Software is furnished to do so, subject to the\nfollowing conditions:

    \n

    The above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.

    \n

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS\nOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\nNO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\nDAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\nOTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\nUSE OR OTHER DEALINGS IN THE SOFTWARE.

    \n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":13}},"nativescript-awesome-loaders":{"name":"nativescript-awesome-loaders","version":"1.2.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-awesome-loaders

    \n

    #Usage

    \n
    import {AwesomeLoaders} from 'nativescript-awesome-loaders';
    let al = new AwesomeLoaders();
    \n

    Set Width

    \n

    al.width = 60

    \n

    Set Height

    \n

    al.height = 60

    \n

    Set Indicator

    \n

    al.indicator = "Pacman"

    \n

    Set Indicator Color

    \n

    al.indicatorColor= "#FFEB3B"

    \n

    TypeScript

    \n
    import {AwesomeLoaders} from 'nativescript-awesome-loaders';

     let li = new AwesomeLoaders();
        al.width = 60;
        al.height = 60;
        al.indicator = \"SemiCircleSpin\";
        al.indicatorColor= \"black\";
    \n

    JavaScript

    \n
    var AwesomeLoaders = require('nativescript-awesome-loaders').AwesomeLoaders;
     let li = new AwesomeLoaders();
        al.width = 60;
        al.height = 60;
        al.indicator = \"SemiCircleSpin\";
        al.indicatorColor= \"black\";
    \n

    ###Xml markup settings

    \n

    IMPORTANT: Make sure you include xmlns:al="nativescript-awesome-loaders" on the Page element

    \n

    e.g\n <al:AwesomeLoaders width="60" height="60" indicator="Pacman" indicatorColor="#FFEB3B" />

    \n

    ##Screenshot

    \n

    \"ss\"

    \n

    ##Indicators

    \n

    As seen above in the Screenshot, the indicators are as follows:

    \n

    Row 1

    \n
      \n
    • BallPulse
      • \n
    • BallGridPulse
      • \n
    • BallClipRotate
      • \n
    • BallClipRotatePulse
      • \n
    \n

    Row 2

    \n
      \n
    • SquareSpin
      • \n
    • BallClipRotateMultiple
      • \n
    • BallPulseRise
      • \n
    • BallRotate
      • \n
    \n

    Row 3

    \n
      \n
    • CubeTransition
      • \n
    • BallZigZag
      • \n
    • BallZigZagDeflect
      • \n
    • BallTrianglePath
      • \n
    \n

    Row 4

    \n
      \n
    • BallScale
      • \n
    • LineScale
      • \n
    • LineScaleParty
      • \n
    • BallScaleMultiple
      • \n
    \n

    Row 5

    \n
      \n
    • BallPulseSync
      • \n
    • BallBeat
      • \n
    • LineScalePulseOut
      • \n
    • LineScalePulseOutRapid
      • \n
    \n

    Row 6

    \n
      \n
    • BallScaleRipple
      • \n
    • BallScaleRippleMultiple
      • \n
    • BallSpinFadeLoader
      • \n
    • LineSpinFadeLoader
      • \n
    \n

    Row 7

    \n
      \n
    • TriangleSkewSpin
      • \n
    • Pacman
      • \n
    • BallGridBeat
      • \n
    • SemiCircleSpin
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":16}},"nativescript-multiple-environments-building":{"name":"nativescript-multiple-environments-building","version":"0.8.2","license":"Apache-2.0","readme":"

    nativescript-multiple-environments-building

    \n

    \"NPM\n\"Downloads\"

    \n

    This Hook aims to provide a better support for building a NativeScript application with multiple environments, such as:

    \n
      \n
    • Easily use different App Bundle ID in different environments.
      • \n
    • Quickly apply the Version # from package.json to the actual destinations (Info.plist on iOS and AndroidManifest.xml on Android).\n
        \n
      • With the new autoBuildNumber config, you could easily auto generate a Version Code and use it when in the RELEASE mode.
        • \n
      \n
      • \n
    • Safely configure the File Copying strategies to any type of file under different environments, like:\n
        \n
      • Using diff. Info.plist or strings.xml to set diff. App Name or other configs.
        • \n
      • Having dif. GoogleService-Info.plist for Google services.
        • \n
      \n
      • \n
    • Simply generate dedicated App Icon image for each environment.
      • \n
    \n
    \n

    Credits to federicorp, the original creator of this amazing idea (via @nativescript-dev/multiple-environments), as well as jitendraP-ashutec who helped add the support to separate env. rule files for iOS and Android (via @nativescript-dev/multiple-environments).

    \n
    \n

    Installation

    \n
    npm i nativescript-multiple-environments-building --save-dev
    \n

    How to use?

    \n

    Add two Env Rules files into the project's root folder, and they will contain the configurations for iOS and Android separately.

    \n
      \n
    • environment-rules.ios.json - for iOS.
      • \n
    • environment-rules.android.json - for Android.
      • \n
    \n

    An example Env Rules file looks like this:

    \n
    {
        \"version\": \"1.6.6\",
        \"buildNumber\": \"66\",
        \"versionCode\": \"1060666\",
        \"autoVersionCode\": true,
        \"default\": \"staging\",
        \"extraPaths\": [
            \"environments\"
        ],
        \"directCopyRules\": {
            \"Info.plist\": \"App_Resources/iOS/Info.plist\",
        },
        \"appIconPath\": \"environments/app-icon/icon.png\",
        \"envFilesMatchRules\": \"staging|release\",
        \"environments\": [
            {
                \"name\": \"staging\",
                \"appBundleId\": \"org.nativescript.appId.staging\",
                \"matchRules\": \"(.*\\\\.staging\\\\..*)\"
            },
            {
                \"name\": \"release\",
                \"appBundleId\": \"org.nativescript.appId.release\",
                \"matchRules\": \"(.*\\\\.release\\\\..*)\"
            }
        ]
    }
    \n

    With it, using --env.use.ENV_NAME to specify the actual environment to process while {NS} doing the prepare process. For example:

    \n
    # Debug iOS app with `staging` env. configs.
    ns debug ios --env.use.staging

    # Build a final release
    ns run ios --bundle --env.aot --env.uglify --env.use.release
    \n

    Environment rules

    \n

    The Env Rules file currently support the following configurations:

    \n
      \n
    • default - The default Env. Name to use if the cmd does not include --env.use.ENV_NAME.
      • \n
    • extraPaths - The additional paths to check the env. files and do the file copy if needed. For example, adding environments will help choose right environment.ts for Angular to use.\n
        \n
      • By default, it checks the App_Resources folder. And the extraPaths will help cover other places.
        • \n
      • The paths in extraPaths are relative to the project root folder.
        • \n
      \n
      • \n
    • environments - It defines for each environment, including:\n
        \n
      • name - The Env. Name, used by --env.use.ENV_NAME.
        • \n
      • appBundleId - The target App Bundle ID.
        • \n
      • matchRules - The matching rule to help find the source env. file and do the file copy.\n
          \n
        • For example, (.*\\\\.staging\\\\..*) will help locate the file Info.staging.plist.
          • \n
        \n
        • \n
      \n
      • \n
    • directCopyRules - The direct copying rules conducted AFTER the normal file copy. Typically, it is used to help prepare the files on iOS.\n
        \n
      • Each pair includes two parts: the source filename and the destination path (relative to the project root folder).
        • \n
      • For example: { "Info.plist":"App_Resources/iOS/Info.plist" } means to copy the Info.plist to the App_Resources folder once it gets copied from its env. version (like Info.dev.plist).
        • \n
      • NOTE: The direct file copying ONLY happens after done a normal file copy. In other words, if the source filename is not for a output file of a normal file copy, it will be ignored.
        • \n
      \n
      • \n
    • appIconPath - The file path used for ns resources generate icons CMD. This is very useful when the app has diff. App Icon under diff. environments on IOS.\n
        \n
      • Still, the path is relative to the project root folder.
        • \n
      • NOTE: On Android, the diff. App Icon under diff. environments could be still inside the App_Resources folder which could be safely deleted AFTER the prepare process.
        • \n
      \n
      • \n
    • envFilesMatchRules - The specific matching rules to help identify all the env. files that could be deleted AFTER a prepare.\n
        \n
      • For example, if the matchRules use the words (dev and release) to help identify the env files, the value of envFilesMatchRules should be dev|release.
        • \n
      • NOTE: This should be an Android ONLY config. On iOS, it more relies on directCopyRules config to help achieve the goals.
        • \n
      • If not set, it will use the default value - development|dev|edge|test|uat|beta|staging|sta|release|prod|production.
        • \n
      \n
      • \n
    • version - The version #, same as the one in the package.json.
      • \n
    • buildNumber - The build # that changes each time when building the app.
      • \n
    • versionCode - The version code that is used to fill CFBundleVersion (on iOS) or VersionCode (on Android).
      • \n
    • autoVersionCode - The flag to indicate if using the built-in logic to auto generate Version Code based on Version # and Build #.
      • \n
    \n

    Discussions

    \n

    Usage of directCopyRules

    \n

    Given the case that the ns prepare process will add all files inside the App_Resources/iOS folder into the Xcode project which will include all env. files for other environments, the rules inside directCopyRules will help conduct the file copy OUTSIDE the App_Resources/iOS folder.

    \n

    And for Android, since it still can be safe to delete those env. files AFTER the ns prepare process, the deletion process is just simply added to the after-prepare Hook.

    \n

    In other words, directCopyRules would be probably used on iOS side unless you are still having some other needs for Android.

    \n

    App Icon Generation

    \n

    The generation of App Icon is conducted by the built-in {NS} CMD - ns resources generate icons.

    \n

    By default, if the icon.png file is inside the App_Resources folder for both iOS and Android, the process can help prepare the App Icon files for both iOS and Android. However, the NEW Android OS versions are actually NOT using icon.png to be the App Icon. Instead, it uses a mipmap style (by an xml file to define both foreground and background). Luckily, the new method could be still under the realm of env. based file copying.

    \n

    Example of ic_launcher.xml file:

    \n
    <adaptive-icon xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <background android:drawable=\"@color/ic_launcher_background\"/>
        <foreground android:drawable=\"@mipmap/ic_launcher_foreground\"/>
    </adaptive-icon>
    \n
    \n

    NOTE: In order to make the ns resources generate icons CMD working, please be sure to NOT delete the default icon.png files from App_Resources folder. Otherwise, the generation process may fail!!!

    \n
    \n

    App Versioning

    \n

    With the new added related Version Info of the Env Rules file, now you could manage the App Version in the following ways:

    \n
      \n
    • The Manual way - Enter a free value to those fields into the Env Rules file every time BEFORE the app building.\n
        \n
      • In this way, set the flag autoVersionCode to false and totally ignore buildNumber.
        • \n
      \n
      • \n
    • The Auto way - By setting autoVersionCode to true, before the app building, it will automatically generate a new Version Code based on the given values of Version # and Build #.\n
        \n
      • For example, a version # (1.16.6) and build # (22) will generate a new Version Code as 1160622.
        • \n
      \n
      • \n
    \n

    For buildNumber,

    \n
      \n
    • It is a number between 0 and 99.
      • \n
    • When the app gets building, if the Version # does not change, it will be added by 1 automatically.\n
        \n
      • If changed, it will be reset to 1 from the start - meaning "the FIRST build of the new version".
        • \n
      \n
      • \n
    \n
    \n

    NOTES:

    \n
      \n
    • In order to make the Version Code generation process works, the miner, patch parts of Version # and Build # should not exceed 99. This limitation should cover most of the cases - typically you may have already bumped the upper part of the version number.
      • \n
    • The whole updating logic of Build # and Version Code is ONLY used in the RELEASE mode!! With it, it will not bring too much hassle while in the Dev mode.
      • \n
    • With the "NEW" Android building structure, the "version info" could be added to the gradle file. In other words, we could simply update them BEFORE the prepare process.
      • \n
    \n
    \n
    // Example of adding \"version info\" to `gradle` file
    android {
      defaultConfig {
        // Version Information
        versionCode 1060606
        versionName \"1.6.6\"
      }
    }
    \n

    Also, the iOS and Android manage their Version Info separately. In the normal case, if you build the app against both platforms at the same time, the generated Version Code (as well as the buildNumber) should be identical for each release. However, if it does not (due to some unexpected reasons), it should be very easy to fix it by Manually change it to a correct value inside the Env Rules file.

    \n
    \n

    Made with ❤️ for the NativeScript community

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":24}},"nativescript-status-bar":{"name":"nativescript-status-bar","version":"1.2.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A simple NativeScript plugin for controlling status bar visibility.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-status-bar

    \n

    This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

    \n

    API

    \n
    // Get reference to the Status Bar plugin module
    import statusBar = require(\"nativescript-status-bar\");
    \n

    For Angular:

    \n
    // Get reference to the Status Bar plugin module
    import * as statusBar from 'nativescript-status-bar'
    \n
      \n
    • \n

      show()
      \nShows the status bar.

      \n
      • \n
    • \n

      hide()
      \nHides the status bar.

      \n
      • \n
    \n","downloadStats":{"lastDay":3,"lastWeek":39,"lastMonth":174}},"@eclairab/nativescript-webrtc":{"name":"@eclairab/nativescript-webrtc","version":"1.0.4","license":"ISC","readme":"

    NativeScript WebRTC

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Uses this for Android and this for iOS.

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-webrtc-plugin
      • \n
    \n

    Android

    \n

    Add the following to your app.gradle located in app/App_Resources

    \n
    android {
    ....
    compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
      }
    }
    \n

    How to make a call

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
    \n

    IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

    \n
    <webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
    <webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
    \n

    Using Angular ?

    \n

    Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import WebRTCView from 'nativescript-webrtc-plugin/vue';

    Vue.use(WebRTCView);
    \n
    <WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
    <WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
    \n

    Standard Api :sparkles: New :sparkles:

    \n

    This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

    \n

    Basic Api

    \n

    Caller

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
      const object = args.object;
      const remoteVideoTrack = object.get('remoteVideoTrack');
      remoteStream = object.get('stream');
      const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
      video.videoTrack = remoteVideoTrack;
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type');
      if (type === 'answer') {
        webrtc.handleAnswerReceived({
          sdp: sdp,
          type: type
        });
      } else {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    webrtc.makeOffer();
    \n

    Callee

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type') as WebRTCSdpType;
      if (type === WebRTCSdpType.ANSWER) {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    // sdp received from the signaling server
    webrtc.createAnswerForOfferReceived({
      type: sdp.type,
      sdp: sdp.sdp
    });
    \n

    Deploy by executing

    \n

    npm publish --access=public --otp=<OTP_FROM_AUTHENTICATOR>

    \n

    Using demo

    \n

    Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

    \n
      \n
    1. \n

      Start demo-server by running npm i && node app

      \n
      2. \n
    2. \n

      Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

      \n
      3. \n
    3. \n

      Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

      \n
      4. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":2,"lastWeek":3,"lastMonth":53}},"nativescript-grid-view":{"name":"nativescript-grid-view","version":"5.1.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript GridView widget. The GridView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-grid-view

    \n

    This command automatically installs the necessary files, as well as stores nativescript-grid-view as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      itemLoading
      \nTriggered when generating an item in the GridView.

      \n
      • \n
    • \n

      itemTap
      \nTriggered when the user taps on an item in the GridView.

      \n
      • \n
    • \n

      loadMoreItems
      \nTriggered when the generated items reached the end of the items property.

      \n
      • \n
    • \n

      scroll
      \nTriggered when the GrdiView is scrolled by the user. from the args you can get the new horizonta/vertical offset.

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      itemLoadingEvent - String
      \nString value used when hooking to itemLoadingEvent event.

      \n
      • \n
    • \n

      itemTapEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    • \n

      loadMoreItemsEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    • \n

      scrollEvent - String
      \nString value used when hooking to scroll event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UICollectionView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v7.widget.RecyclerView
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the GridView. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      itemTemplate - String
      \nGets or sets the item template of the GridView.

      \n
      • \n
    • \n

      rowHeight - PercentLength
      \nGets or sets the height for every row in the GridView.

      \n
      • \n
    • \n

      colWidth - PercentLength
      \nGets or sets the width for every column in the GridView.

      \n
      • \n
    \n

    Instance Methods

    \n
      \n
    • \n

      refresh()
      \nForces the GridView to reload all its items.

      \n
      • \n
    • \n

      scrollToIndex(index: number, animated: boolean = true)
      \nScrolls the GridView to the item with the given index. This can be either animated or not. Defaults to animated.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:gv="nativescript-grid-view" to your page tag, and then simply use <gv:GridView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-grid-view\" loaded=\"pageLoaded\">
      <GridLayout>
        <gv:GridView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
          <gv:GridView.itemTemplate>
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
              <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
          </gv:GridView.itemTemplate>
        </gv:GridView>
      </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { GridItemEventData } from \"nativescript-grid-view\";

    let viewModel: Observable;

    export function pageLoaded(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        for (let loop = 0; loop < 200; loop++) {
            items.push({ value: \"test \" + loop.toString() });
        }
        viewModel = new Observable();
        viewModel.set(\"items\", items);

        page.bindingContext = viewModel;
    }

    export function gridViewItemTap(args: GridItemEventData) {
        console.log(\"tap index \" + args.index.toString());
    }

    export function gridViewItemLoading(args: GridItemEventData) {
        console.log(\"item loading \" + args.index.toString());
    }

    export function gridViewLoadMoreItems(args: EventData) {
        console.log(\"load more items\");
    }
    \n

    You can also have multiple templates the same way you add them in the builtin ListView control:

    \n
    <gv:GridView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                    colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                    itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
        <gv:GridView.itemTemplates>
            <template key=\"odd\">
                <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                    <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>

            <template key=\"even\">
                <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                    <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                    <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>
        </gv:GridView.itemTemplates>
    </gv:GridView>
    \n
    export function templateSelector(item: any, index: number, items: any) {
        return index % 2 === 0 ? \"even\" : \"odd\";
    }
    \n

    Usage in Angular

    \n

    Import GridViewModule in your NgModule:

    \n
    import { GridViewModule } from 'nativescript-grid-view/angular';

    @NgModule({
        //......
        imports: [
            //......
            GridViewModule,
            //......
        ],
        //......
    })
    \n

    Example Usage

    \n
    // app.module.ts
    import { GridViewModule } from \"nativescript-grid-view/angular\";

    @NgModule({
        bootstrap: [
            AppComponent
        ],
        imports: [
            NativeScriptModule,
            AppRoutingModule,
            GridViewModule,
        ],
        declarations: [
            AppComponent,
            ItemsComponent,
            ItemDetailComponent
        ],
        providers: [
            ItemService
        ],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class AppModule { }
    \n
    <!-- my.component.html -->
    <GridLayout class=\"page\">
      <GridView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
        <ng-template let-item=\"item\" let-odd=\"odd\">
          <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
          </StackLayout>
        </ng-template>
      </GridView>
    </GridLayout>
    \n

    If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control.

    \n
    <GridView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
        <ng-template nsTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>
    </GridView>
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-grid-view
    $ cd nativescript-grid-view
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":49,"lastMonth":217}},"nativescript-tasks":{"name":"nativescript-tasks","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-tasks/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Tasks

    \n

    A NativeScript module for simply handling background tasks via web workers.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Requirements

    \n\n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-tasks
    \n

    inside your app project to install the module.

    \n

    Example

    \n
    import Tasks = require(\"nativescript-tasks\");

    Tasks.startNew((ctx) => {
                       return 23979 + ctx.state;
                   },
                   5979)  // 5979 will be stored in 'state'
                          // property of 'ctx' 
         .then((result) => {
                   console.log('Result: ' + result.data);  // 29958
                   // result.state = 5979
               })
         .catch((result) => {
                   console.log('ERROR: ' + result.error);
                   // result.state = 5979
                });
    \n

    Limitations

    \n
      \n
    • You can only submit and return serializable objects and values!
      • \n
    • All task functions are 'closures', what means that you CANNOT access variables or modules outside such functions. All functions are serialized as strings and submitted to the worker script where "external stuff" is NOT available! The only way to share data with the functions is to submit an optional and serializable "state value".
      • \n
    \n

    Read the official documentation to get more information.

    \n","downloadStats":{"lastDay":0,"lastWeek":10,"lastMonth":45}},"nativescript-ocr":{"name":"nativescript-ocr","version":"1.0.0","license":"MIT","readme":"

    NativeScript OCR

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    \n

    Optical Character Recognition - powered by Tesseract

    \n

    Installation

    \n
    tns plugin add nativescript-ocr
    \n

    Setup

    \n

    You'll need to add language files to help Tesseract recognizing text in the images you feed it.

    \n

    Download version 3.04.00 of the tessdata files here and\nadd your required language to the app/tesseract/tessdata/ folder of your app.

    \n

    Note that if your language(s) has multiple files (like English: there's 9 files matching eng.*), copy all those files to the folder.

    \n

    iOS

    \n

    iOS searches for the tessdata folder in app/App_Resources/iOS, but instead of dulicating the folder\nyou can create a symbolic link:

    \n
    cd app/App_Resources/iOS
    ln -s ../../tesseract/tessdata
    \n

    API

    \n

    retrieveText

    \n

    JavaScript

    \n

    This is just a basic example using the default settings, look at the TypeScript code below\nfor a more elaborate example.

    \n
    var OCRPlugin = require(\"nativescript-ocr\");
    var ocr = new OCRPlugin.OCR();

    ocr.retrieveText({
      image: myImage
    }).then(
        function (result) {
          console.log(\"Result: \" + result.text);
        },
        function (error) {
          console.log(\"Error: \" + error);
        }
    );
    \n

    TypeScript

    \n

    This example shows how to use all possible (but optional) options you can pass into retrieveText:

    \n
    import { OCR, RetrieveTextResult } from \"nativescript-ocr\";
    import { ImageSource } from \"image-source\";

    export Class MyOCRClass {
      private ocr: OCR;
      
      constructor() {
        this.ocr = new OCR();
      }

      doRecognize(): void {
        let img: ImageSource = new ImageSource();

        img.fromFile(\"~/samples/scanned.png\").then((success: boolean) => {
          if (success) {
            this.ocr.retrieveText({
              image: img,
              whitelist: \"ABCDEF\",     // you can include only certain characters in the result
              blacklist: \"0123456789\", // .. or you can exclude certain characters from the result
              onProgress: (percentage: number ) => {
                console.log(`Decoding progress: ${percentage}%`);
              }
            }).then(
                (result: RetrieveTextResult) => {
                  this.set(HelloWorldModel.BUSY_KEY, false);
                  console.log(`Result: ${result.text}`);
                }, (error: string) => {
                  console.log(`Error: ${err}`);
                })
          }
        });
      }
    }
    \n","downloadStats":{"lastDay":7,"lastWeek":28,"lastMonth":108}},"nativescript-ngx-fusion-library":{"name":"nativescript-ngx-fusion-library","version":"0.1.38","license":"Apache 2.0","readme":"

    Develop a NativeScript plugin \"Build

    \n
    \n

    This repo is heavily based on @NathanWalker's Plugin Seed. Thanks Nathan!

    \n
    \n\n\n\n\n

    TL;DR

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

    \n
      \n
    1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript--yourplugin is the name of your plugin.
      2. \n
    2. cd nativescript-yourplugin/src
      3. \n
    3. npm run postclone
      4. \n
    4. npm run demo.ios or npm run demo.android to run the demo.
      5. \n
    5. In another command prompt/terminal npm run plugin.tscwatch to watch to typescript changes in the plugin and to autmatically apply them in the demo.
      6. \n
    \n

    Long Description

    \n

    What is NativeScript plugin seed?

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

    \n
      \n
    • the plugin structure with option for easy development and debugging (see Development setup section below)
      • \n
    • a simple working plugin
      • \n
    • a demo project working with the plugin. It is useful during development and for running tests via Travis CI
      • \n
    • plugin tests
      • \n
    • a guideline how to structure your plugin README file that will be published to NPM
      • \n
    • a shell script to create your plugin package
      • \n
    • a proper .gitignore to keep GitHub tidy
      • \n
    • a proper .npmignore to ensure everyone is happy when you publish your plugin to NPM.
      • \n
    \n

    \"Plugin

    \n

    Plugin folder structure

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Folder/File nameDescription
    demoThe plugin demo source code
    demo/testsThe tests for your plugin
    srcThe plugin source code
    src/platform/androidPlugin Android specific configuration
    src/platform/iosPlugin ios specific configuration
    src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
    src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
    publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
    \n

    Getting started

    \n
      \n
    1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript--yourplugin is the name of your plugin..
      2. \n
    2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
      3. \n
    3. Execute npm run postclone to:\n
        \n
      • configure your github username - it will be changed in the package.json for you
        • \n
      • configure your plugin name - all files and classes in the seed will be renamed for you
        • \n
      • stub your plugin README.md file
        • \n
      • create a new repository for your plugin
        • \n
      • npm link your plugin the demo app - this will install the plugin dependencies and will add a sym link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
        • \n
      \n
      4. \n
    \n

    Now you can continue with the development of your plugin by using the Development setup described below.

    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n
      \n
    1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
      2. \n
    2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
      3. \n
    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the src folder in order to use native APIs:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

    \n
      \n
    1. Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
      2. \n
    \n

    Unittesting

    \n

    The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API go to src folder and execute one of these commands:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish to NPM

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in src/package.json
      • \n
    • Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)
      • \n
    \n

    If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

    \n

    NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

    \n

    TravisCI

    \n

    The plugin structure comes with fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is commited to a branch TravisCI will trigger a build testing the code.

    \n

    To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

    \n","downloadStats":{"lastDay":0,"lastWeek":40,"lastMonth":127}},"@nativescript-community/systemui":{"name":"@nativescript-community/systemui","version":"1.1.15","license":"MIT","readme":"

    NativeScript System UI

    \n

    A NativeScript plugin to change System UI.

    \n

    IOS

    \n

    To show/hide the statusBar you need to have UIViewControllerBasedStatusBarAppearance set to false in your Info.plist

    \n

    Usage

    \n
    npm install @nativescript-community/systemui --save
    \n

    If you are using version ^1.0.0 then we now use mixins

    \n
    import { installMixins } from '@nativescript-community/systemui';
    installMixins();
    \n

    Then new properties are added to the Page class

    \n
      \n
    • statusBarColor (css property status-bar-color)
      • \n
    • navigationBarColor (css property navigation-bar-color)
      • \n
    \n

    For versions < 1.0.0

    \n

    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.

    \n

    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.

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

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

    \n

    \"status-bar-light\"

    \n

    Note The SystemUI 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.

    \n

    With Vue.js

    \n

    In your root app.js:

    \n
    import StatusBarPlugin from '@nativescript-community/systemui/vue';
    Vue.use(StatusBarPlugin);
    \n

    In your component:

    \n
    <Page class=\"page\" actionBarHidden=\"true\" backgroundSpanUnderStatusBar=\"true\">
          <StatusBar barColor=\"#32475b\" />
          <NavigationBar barColor=\"#32475b\" />
    <Page/>
    \n

    That's is.

    \n

    Development workflow

    \n

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

    \n
      \n
    • Fork the repository locally
      • \n
    • Open the repository in your favorite terminal
      • \n
    • Navigate to the src code that contains the plugin's code cd /src
      • \n
    • Execute the npm script nmp run build.wrappers or npm run build.wrappers.watch
      • \n
    • When running the Vanila NativeScript demo app execute: npm run demo.android or npm run demo.ios
      • \n
    • When running the Angular NativeScript demo app execute: npm run demo.angular.android or npm run demo.angular.ios
      • \n
    \n","downloadStats":{"lastDay":23,"lastWeek":46,"lastMonth":395}},"nativescript-ng2-magic":{"name":"nativescript-ng2-magic","version":"1.9.0","license":"MIT","readme":"

    \"Angular\n\"MIT\n\"Dependency \"devDependency

    \n

    \"nativescript-ng2-magic\"

    \n

    Magically drop a NativeScript app into your existing Angular2 web application and reuse all your code.*

    \n

    You will be adding NativeScript views, but you already knew that.

    \n\n

    Install

    \n
    npm i nativescript-ng2-magic --save
    \n

    Usage

    \n
      \n
    1. Use Component from nativescript-ng2-magic instead of @angular/core. Why?
      2. \n
    2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
      3. \n
    3. Run your truly native mobile app with NativeScript!
      4. \n
    \n

    Example

    \n

    A sample root component, app.component.ts:

    \n
    import {Component} from 'nativescript-ng2-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html'
    })
    export class AppComponent {}
    \n

    Run for first time!

    \n

    You will need to have fully completed steps 1 and 2 above.

    \n

    Run your app in the iOS Simulator with:

    \n
    npm run start.ios
    \n

    Run your app in an Android emulator with:

    \n
    npm run start.android
    \n

    Welcome to the wonderfully magical world of NativeScript!

    \n

    How to create NativeScript views

    \n

    Based on our example above, assume app.component.html looks like this:

    \n
    <main>
      <div>This is my root component</div>
    </main>
    \n

    You would then create a new file in app.component.tns.html like this:

    \n
    <StackLayout>
      <Label text=\"This is my root component\"></Label>
    </StackLayout>
    \n

    You can also use platform specific views if desired with the platformSpecific Component metadata:

    \n
    import {Component} from 'nativescript-ng2-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      platformSpecific: true
    })
    export class AppComponent {}
    \n

    Then you could create separate views for iOS and Android:

    \n
      \n
    • app.component.ios.html
      • \n
    • app.component.android.html
      • \n
    \n

    You can learn more about NativeScript view options here.

    \n

    You can also install helpful view snippets for VS Code here or Atom Editor here.

    \n

    You can learn more here about how this setup works and why.

    \n

    Supported Projects

    \n\n

    Why different Component?

    \n

    Component from nativescript-ng2-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

    \n

    The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

    \n

    You can see more elaborate use cases of this magic with angular2-seed-advanced.

    \n

    Special Note About AoT

    \n

    Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

    \n
    import { Component } from '@angular/core';

    // just comment this out and use Component from 'angular/core'
    // import { Component } from 'nativescript-ng2-magic';

    @Component({
      // etc.
    \n

    After doing the above, running AoT build will succeed. :)

    \n

    The Component from nativescript-ng2-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ng2-magic. Again this temporary inconvenience may be unnecessary in the future.

    \n

    Requirements

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":59,"lastMonth":194}},"@nativescript-community/ui-persistent-bottomsheet":{"name":"@nativescript-community/ui-persistent-bottomsheet","version":"0.0.29","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-persistent-bottomsheet

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
    \n \n

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-persistent-bottomsheet

    \n

    \n

    Configuration

    \n

    For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

    \n
    import { install } from '@nativescript-community/ui-persistent-bottomsheet';
    install();
    \n

    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    bottomSheetundefinedViewView containing the content for the bottomsheet
    gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
    stepIndex0numberthe index of current step (mutable)
    steps[70]number[]the different available steps
    backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    install()voidInstall gestures
    \n

    \n

    Usage in Angular

    \n

    Import the module into your project.

    \n
    import { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";

    @NgModule({
        imports: [
            PBSModule
        ]
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })

    export class AppModule { }
    \n

    Then in your component add the following:

    \n
    <BottomSheet>
        <StackLayout backgroundColor=\"white\">
          <Label text=\"This is the main content\"></Label>
        </StackLayout>
        <GridLayout bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\"></Label>
        </GridLayout>

       
    </BottomSheet>
    \n

    For a more complete example, look in the demo-ng directory.

    \n

    \n

    Usage in Vue

    \n

    Register the plugin in your app.js.

    \n
    import BottomSheetPlugin from '~/components/drawer/vue';
    Vue.use(BottomSheetPlugin);
    \n

    Add this at the top of your webpack config file:

    \n
    const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');

    NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {
        model: {
            prop: 'stepIndex',
            event: 'stepIndexChange'
        }
    });
    \n

    Then in your component add the following:

    \n
    <BottomSheet>
        <StackLayout backgroundColor=\"white\">
          <Label text=\"This is the main content\" />
        </StackLayout>
        <GridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\" />
        </GridLayout>

    </BottomSheet>
    \n

    For a more complete example, look in the demo-vue directory.

    \n

    \n

    Usage in Svelte

    \n

    Register the plugin in your app.ts.

    \n
    import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
    BottomSheetElement.register();
    \n

    Then in your component, add the following:

    \n
    <bottomsheet>
        <stacklayout  backgroundColor=\"white\">
          <Label text=\"This is the main content\" />
        </stacklayout>
        <gridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\" />
        </gridlayout>

    </bottomsheet>
    \n

    For a more complete example, look in the demo-svelte directory.

    \n

    \n

    Usage in React

    \n

    Register the plugin in your app.ts.

    \n
    import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
    BottomSheetElement.register();
    \n

    Then in your component, add the following:

    \n
    import { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"
    \n
    <BottomSheet>
      <stackLayout backgroundColor=\"white\">
        <label text=\"This is the main content\" />
      </stackLayout>
      <gridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\">
        <label text=\"This is the side drawer content\" />
      </gridLayout>

    </BottomSheet>
    \n

    For a more complete example, look in the demo-react directory.

    \n

    \n

    Demos

    \n

    This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
    $ cd ui-drawer
    $ npm run i
    $ npm run setup
    $ npm run build && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte or demo-react
    $ ns run ios|android
    \n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":3,"lastWeek":68,"lastMonth":519}},"@comporell/nativescript-accordion":{"name":"@comporell/nativescript-accordion","version":"7.0.4","license":"Apache-2.0","readme":"

    NativeScript Accordion

    \n

    Install

    \n

    ns plugin add nativescript-accordion

    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:accordion="@triniwiz/nativescript-accordion" on the Page element

    \n

    Data

    \n

    By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

    \n
    this.items = [
          {
            title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
            blah: [
              { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
              { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
            ]
          }
        ]
    \n
    selectedIndexes = [0,3]
    \n

    Core

    \n
    <accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
                <accordion:Accordion.headerTemplate>
                    <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                        <Label text=\"{{title}}\"/>
                        <Label col=\"1\" text=\"+\"/>
                    </GridLayout>
                </accordion:Accordion.headerTemplate>

                <accordion:Accordion.itemHeaderTemplate>
                    <StackLayout>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </accordion:Accordion.itemHeaderTemplate>
                
                
                <accordion:Accordion.itemContentTemplate>
                                <StackLayout>
                                    <Image src=\"{{image}}\"/>
                                </StackLayout>
                  </accordion:Accordion.itemContentTemplate>

                <accordion:Accordion.footerTemplate>
                    <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                        <Label text=\"{{footer}}\"/>
                        <Label col=\"1\" text=\"-\"/>
                    </GridLayout>
                </accordion:Accordion.footerTemplate>

            </accordion:Accordion>
    \n

    Multi Template

    \n
    <accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                                 items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                                 headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                                 itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                                 itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                                 footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
            >

                <Accordion.headerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.headerTemplates>


                <Accordion.itemHeaderTemplates>
                    <template key=\"odd\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemHeaderTemplates>

                <Accordion.itemContentTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemContentTemplates>

                <Accordion.footerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.footerTemplates>

            </accordion:Accordion>
    \n

    Vue

    \n

    import Vue from 'nativescript-vue'
    import Pager from 'nativescript-accordion/vue'

    Vue.use(Pager)
    \n
    <Accordion row=\"1\" for=\"item of items\">

    \t\t\t\t<v-template name=\"header\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"title\">
    \t\t\t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label height=\"100%\" :text=\"item.title\"></Label>
    \t\t\t\t\t</GridLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template name=\"content\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template name=\"footer\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Multi Template

    \n
    <Accordion row=\"2\" height=\"100%\" ref=\"accordion\" allowMultiple=\"true\" childItems=\"children\" for=\"item of items\">
    \t\t\t\t<v-template if=\"$odd\" name=\"header-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"green\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"header-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"orange\" :text=\"item.headerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"title-odd\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"title-even\">
    \t\t\t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t\t\t<Label :text=\"item.title\"></Label>
    \t\t\t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t\t\t   :src=\"item.image\">    </Image>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>


    \t\t\t\t<v-template if=\"$odd\" name=\"content-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"content-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" :src=\"item.image\"></Image>
    \t\t\t\t\t\t<Label :text=\"item.text\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$odd\" name=\"footer-odd\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"yellow\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>

    \t\t\t\t<v-template if=\"$even\" name=\"footer-even\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label backgroundColor=\"blue\" :text=\"item.footerText\"></Label>
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</v-template>
    \t\t\t</Accordion>
    \n

    Angular

    \n
    import { AccordionModule } from \"nativescript-accordion/angular\";

    @NgModule({
        imports: [
            AccordionModule
        ]
        })
    \n
    <Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
    \t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
    \t\t\t</GridLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Multi Template

    \n
    <Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
    \t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
    \t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
    \t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
    \t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
    \t>
    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t   [src]=\"item.image\">    </Image>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Config

    \n
    public selectedIndexes = [0,3]
    \n
    <Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":67}},"@nativescript-community/algolia":{"name":"@nativescript-community/algolia","version":"2.0.2","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/algolia

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n NativeScript plugin for Algolia search. This plugin is designed to mirror, as closely as possible, the structure of Algolia’s JavaScript client.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/algolia

    \n

    \n

    Initialize the client

    \n

    You first need to initialize the client. For that, you will need your Application ID and API Key.\nYou can find both of them on your Algolia account.

    \n
    import { Algolia } from \"@nativescript-community/algolia\";

    const client = new Algolia('APP_ID', 'API_KEY');
    const index = client.initIndex('items');
    \n

    \n

    Push Data

    \n

    Add or replace an existing object in your index with an updated set of attributes.

    \n
    const contacts = [
        { 
            objectID: \"1234567890\",
            firstname: \"John\", 
            lastname: \"Smith\",
            zip_code: 78787
        },
        { 
            objectID: \"987654321\",
            firstname: \"Billy\", 
            lastname: \"Bob\",
            zip_code: 54321
        },
    ];

    index.addObjects(contacts)
      .then(result => {
          console.log(result);
      })
      .catch(error => {
          console.log(\"ERROR!\", error);
      });
    \n

    \n

    Simple Search

    \n

    With objects added to your index, you can now utilize the searching capabilities.

    \n
    index.search(\"bob\")
      .then(content => {
          console.log(content.hits)
      })
      .catch(error => {
          console.log(\"ERROR\", error)
      });
    \n

    \n

    Advanced Search

    \n

    There is also the ability to pass in search parameters for more advanced searching such as geolocation. See available search parameters here.

    \n
    index.search(\"\", {
        aroundLatLng: \"38.846693, -104.861354\",
        aroundRadius: 200000 // meters
    })
      .then(content => {
          console.log(content.hits);
      })
      .catch(error => {
          console.log(\"ERROR\", error);
      });
    \n

    \n

    Configure

    \n

    Settings can be customized to tune the search behavior. For example, you can add a custom sort by number of followers to the already great built-in relevance:

    \n
    index.setSettings({
      customRanking: ['desc(firstname)']
    })
      .then(result => {
          console.log(\"Setting saved\", result);
      })
      .catch(error => {
          console.log(\"ERROR\", error);
      });
    \n

    You can also configure the list of attributes you want to index by order of importance (ex: firstname = most important):

    \n

    Note: Since the engine is designed to suggest results as you type, you'll generally search by prefix.\nIn this case the order of attributes is very important to decide which hit is the best:

    \n
    index.setSettings({
      searchableAttributes: [
        'lastname',
        'firstname',
        'company',
        'email',
        'city',
        'address'
      ]
    })
      .then(result => {
          console.log(\"Setting saved\", result);
      })
      .catch(error => {
          console.log(\"ERROR\", error);
      });
    \n

    \n

    Breaking Changes in Version 2

    \n

    Switched to Promise based method calls instead of callbacks.

    \n

    Before:

    \n
    index.search('bob', function(content, err) {
      console.log(content.hits);
    });
    \n

    After:

    \n
    index.search(\"bob\")
      .then(content => {
          console.log(content.hits)
      })
      .catch(error => {
          console.log(\"ERROR\", error)
      });
    \n

    The method addObjects is now deprecated and has been removed and replaced with saveObjects.

    \n

    \n

    Demos and Development

    \n

    Setup

    \n

    To run the demos, you must clone this repo recursively.

    \n
    git clone https://github.com/@nativescript-community/algolia.git --recursive
    \n

    Install Dependencies:

    \n
    npm i # or 'yarn install' or 'pnpm install'
    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build

    npm run build.angular # or for Angular
    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":1,"lastWeek":4,"lastMonth":107}},"@valor/nativescript-barcodescanner":{"name":"@valor/nativescript-barcodescanner","version":"4.1.5","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":1,"lastWeek":2,"lastMonth":33}},"ebs-nativescript-exoplayer":{"name":"ebs-nativescript-exoplayer","version":"5.1.4","license":"Apache-2.0","readme":"

    @nstudio/nativescript-exoplayer

    \n

    NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

    \n
    npm install @nstudio/nativescript-exoplayer
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Google ExoPlayeriOS AVPlayer
    \n

    For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

    \n

    Based on

    \n

    This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

    \n

    Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

    \n

    The Google ExoPlayer adds about a meg and a half plugin to the Android application.

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
            <StackLayout>

                <exoplayer:Video id=\"nativeexoplayer\"
                controls=\"true\" finished=\"{{ videoFinished }}\"
                loop=\"true\" autoplay=\"false\" height=\"280\"
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

            </StackLayout>
    </Page>
    \n

    NativeScript Angular Usage

    \n
    // somewhere at top of your component or bootstrap file
    import { registerElement } from \"@nativescript/angular\";
    import { Video } from '@nstudio/nativescript-exoplayer';
    registerElement(\"Video\", () => Video);
    \n
      <Video
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\"
          height=\"300\"></Video>
    \n

    Properties

    \n
      \n
    • src - required
      • \n
    \n

    Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n
      \n
    • srcType - (Android Only)
      • \n
    \n
      \n
    • 0 = DETECT (from src)
      • \n
    • 1 = SS
      • \n
    • 2 = DASH
      • \n
    • 3 = HLS
      • \n
    • 4 = OTHER
      • \n
    \n
      \n
    • enableSubtitles
      • \n
    \n

    By default, subtitle support is off. Use this flag to turn them on.

    \n
      \n
    • subtitles
      • \n
    \n

    Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

    \n
      \n
    • autoplay - (boolean) - optional
      • \n
    \n

    Set if the video should start playing as soon as possible or to wait for user interaction.

    \n
      \n
    • finished - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n
      \n
    • controls - (boolean) - optional
      • \n
    \n

    Set to use the native video player's media playback controls.

    \n
      \n
    • muted - (boolean) - optional
      • \n
    \n

    Mutes the native video player.

    \n
      \n
    • loop - (boolean) - optional
      • \n
    \n

    Sets the native video player to loop once playback has finished.

    \n
      \n
    • backgroundAudio - (boolean) - optional
      • \n
    \n

    If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

    \n
      \n
    • fill - (VideoFill) - optional
      • \n
    \n

    Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

    \n

    iOS:

    \n
      \n
    • VideoFill.default = AVLayerVideoGravityResize
      • \n
    • VideoFill.aspect = AVLayerVideoGravityResizeAspect
      • \n
    • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill
      • \n
    \n

    See here for explanation.

    \n
      \n
    • playbackReady - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video is ready to play.

    \n
      \n
    • seekToTimeComplete - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video has finished seekToTime.

    \n
      \n
    • observeCurrentTime - (boolean) - optional
      • \n
    \n

    If set to true, currentTimeUpdated callback is possible.

    \n
      \n
    • currentTimeUpdated - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the time is updated.

    \n

    API

    \n
      \n
    • play() - Start playing the video
      • \n
    • pause() - Pause the video
      • \n
    • seekToTime(time: number) - Seek the video to a time (milliseconds)
      • \n
    • getCurrentTime() - Returns the current time in the video duration (milliseconds)
      • \n
    • getDuration() - Returns the duration of the video (milliseconds)
      • \n
    • destroy() - Destroy the video player and free resources
      • \n
    • mute(boolean) - Mute the current video
      • \n
    • setVolume() - Set the volume - Must be between 0 and 1.
      • \n
    \n

    Android only

    \n
      \n
    • stop() - Stop the playback - this resets the player and remove the video src
      • \n
    \n

    Breaking Changes

    \n
      \n
    • Android will now attach/detach to the application suspend/resume and de-register/re-register video
      • \n
    • Subtitle support will by default be disabled.
      • \n
    \n

    ExoPlayer Encryption (Android only)

    \n

    Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

    \n
      \n
    • openssl enc -aes-256-ctr -k secret -P --nosalt\nWill output because we aren't using a salt:
      • \n
    \n
    key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
    iv =015E42FF678B2B90B743111A396EF850
    \n

    Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

    \n
    salt=42D57450DAF116BD
    key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
    iv =ED07304DF8D0D0AFA2EB9B13D75BD817
    \n

    Create the Encrypted video file

    \n
      \n
    • openssl enc --nosalt -aes-256-ctr -in small.mp4 -out video.enc -K 2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B -iv 015E42FF678B2B90B743111A396EF850
      • \n
    • \n
        \n
      • you can use -S <your_salt_value> to set the salt value instead of --nosalt
        • \n
      \n
      • \n
    \n

    Contributors

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":1,"lastWeek":28,"lastMonth":125}},"@duicorn/nativescript-sse":{"name":"@duicorn/nativescript-sse","version":"5.0.2","license":"Apache-2.0","readme":"

    Nativescript nativescript-sse

    \n
    npm install @triniwiz/nativescript-sse
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":40}},"@comporell/nativescript-sms-receiver":{"name":"@comporell/nativescript-sms-receiver","version":"1.0.6","license":"Apache-2.0","readme":"

    nativescript-sms-receiver

    \n

    This is simple library for receiving sms in android with new SMS Retriever API.

    \n

    Requirements

    \n

    Minimum sdk is 21.

    \n

    Installation

    \n
    tns plugin add nativescript-sms-receiver
    \n

    Usage

    \n

    Step 1. Register SMSBroadcastReceiver in manifest file

    \n

    Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

    \n
    <receiver android:name=\"com.pravinkumarputta.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
    \t<intent-filter>
    \t\t<action android:name=\"com.google.gms.auth.api.phone.SMS_RETRIEVED\"/>
    \t</intent-filter>
    </receiver>
    \n

    Step 2. Add googlePlayServicesVersion to before-plugins

    \n

    Add below code to {your-app-module}/App_Resources/Android/before-plugins.gradle

    \n
    project.ext {
      googlePlayServicesVersion = \"17.+\" 
    }
    \n

    Step 3. Import SmsReceiver

    \n
    import { SmsReceiver } from 'nativescript-sms-receiver';
    \n

    Step 4. Instantiate SmsReceiver

    \n

    Call this method once before starting SMS listener

    \n
    SmsReceiver.getInstance();
    \n

    Note: Call above method only after page loaded.

    \n

    Step 5. Start SMS listening

    \n
    // register Sms Listener to get SMS callbacks
    SmsReceiver.getInstance().registerListeners(
        function () {
            // onSMSReceiverStarted
            ...
        }.bind(this),
        function (exception) {
            // onSMSReceiverFailed
            ...
        }.bind(this),
        function (message) {
            // onSMSReceived
            ...
                // handle sms here
            ...

            // deregister Sms Listener to avoid invalid operations
            SmsReceiver.getInstance().deregisterListeners();
        }.bind(this),
        function () {
            // onSMSReceiverTimeOut
            ...
        }.bind(this)
    );

    // start sms receiver for single message
    SmsReceiver.getInstance().startReceiver();
    \n

    Construct a verification message

    \n

    The verification message that you will send to the user's device. This message must:

    \n
      \n
    • Be no longer than 140 bytes
      • \n
    • Begin with the prefix <#>
      • \n
    • Contain a one-time code that the client sends back to your server to complete the verification flow (see Generating a one-time code)
      • \n
    • End with an 11-character hash string that identifies your app (see Computing your app's hash string)
      • \n
    \n

    Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

    \n
    <#> Your ExampleApp code is: 123ABC78
    FA+9qCX9VSu
    \n

    (For more information visit here)

    \n

    Generating 11-character hash string for your app

    \n

    After instantiating SMSReceiver access hash string using:

    \n
    SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
    \n

    Request for phone number saved in your device

    \n
    SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
        // phoneNumber is null if no number is selected.
        ...
    })
    \n

    Used libraries

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":70}},"@nativescript/social-share":{"name":"@nativescript/social-share","version":"2.3.0","license":"Apache-2.0","readme":"

    @nativescript/social-share

    \n
    npm install @nativescript/social-share
    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"@nativescript/social-share\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"@nativescript/social-share\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"@nativescript/social-share\");
    var imageSourceModule = require(\"@nativescript/core\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"@nativescript/social-share\";
    import { ImageSource } from \"@nativescript/core\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\");
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText('I love NativeScript!')
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText('I love NativeScript!', 'How would you like to share this text?')
    \n

    sharePdf(File pdf, [optional] String subject)

    \n

    The sharePdf() method expects a File instance:

    \n
    let pdf = File.fromPath(\"~/path/to/myPdf.pdf\");
    SocialShare.sharePdf(pdf)
    \n

    Like shareImage(), you can optionally pass sharePdf() a second argument to configure the subject on Android:

    \n
    SocialShare.sharePdf(pdf, 'How would you like to share this text?')
    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript')
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl(
      'https://www.nativescript.org/',
      'Home of NativeScript',
      'How would you like to share this url?'
    )
    \n

    shareViaTwitter(text?: string, url?: string): Promise<void>;

    \n

    Share text or url via Twitter.

    \n
    SocialShare.shareViaTwitter('Home of NativeScript', 'https://www.nativescript.org/')
    \n

    shareViaFacebook(text?: string, url?: string): Promise<void>;

    \n

    Share url via Facebook. Note that text will usually be suppressed due to Facebook security/abuse prevention, but the url will come through.

    \n
    SocialShare.shareViaFacebook('Home of NativeScript', 'https://www.nativescript.org/')
    \n
      \n
    • Android Only NOTE:
      • \n
    \n

    If you are already using the Facebook Share SDK in your project you likely do not have to add the following.

    \n

    If you are not using the sdk explicitly in your project yet, add to your app.gradle:

    \n
    dependencies {
    \timplementation 'com.facebook.android:facebook-share:[5,6)'
    }
    \n
      \n
    • Add a meta-data section and provider section ot your AndroidManifest.xml so it becomes similar to this:
      • \n
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
      xmlns:tools=\"http://schemas.android.com/tools\"
      ...>
       \t<application
       \t\tandroid:name=\"com.tns.NativeScriptApplication\"
       \t\t..>

       \t\t<meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>

          <provider android:authorities=\"com.facebook.app.FacebookContentProvider{your-facebook-appid}\"
              android:name=\"com.facebook.FacebookContentProvider\"
              android:exported=\"true\"
              tools:replace=\"android:authorities\"/>

       \t\t<activity
       \t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
       \t\t\t..>
    \n
      \n
    • Create a file facebooklogin.xml in App_Resources/Android/src/main/res/values/. Add this to the file (replace the id):
      • \n
    \n
    <?xml version='1.0' encoding='utf-8' ?>
    <resources>
      <string name=\"facebook_app_id\">126035687816994</string>
    </resources>
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":87,"lastWeek":1024,"lastMonth":4399}},"nativescript-youtube-parser":{"name":"nativescript-youtube-parser","version":"2.0.1","license":"MIT","readme":"

    NOT MAINTAINED - SHOULD NOT BE USED IN PRODUCTION\nThis is a html-parser, use with caution. Your app could be suspended from appstores.

    \n

    \"npm\"\n\"npm\"

    \n

    NativeScript YouTube Parser

    \n

    A util to extract raw video-URLs and format information from a YouTube-video page. This way you can play YouTube videos in the native video player.\nThe plugin is based on npm package youtube-parser and adapted to the NativeScript framework (removed cli & excess dependencies).\nWorks on iOS and Android.

    \n

    Installation

    \n

    Run npm i nativescript-youtube-parser in the ROOT directory of your project.

    \n

    Usage

    \n

    getURL(url, format)

    \n
      \n
    • url - 'watch video' page on YouTube.
      • \n
    • format - Object { quality: 'small | medium | high', container: 'mp4 | flv | 3pg | webm' }
      • \n
    • return value - A promise object to resolve with an array of URL/format info objects that match the requested format.
      • \n
    \n
    var youtubeParser = require('nativescript-youtube-parser');

    youtubeParser.getURL('https://youtu.be/C_vqnySNhQ0', { quality: 'medium', container: 'mp4' })
        .then(function (urlList) {
            console.log(\"YouTube mp4 video url: \", urlList[0].url);
        }
    );
    \n

    Changelog

    \n

    2.0.1

    \n
      \n
    • Fixed issue with common.js include
      • \n
    \n

    2.0.0

    \n
      \n
    • Code refactor, api-changes
      • \n
    \n

    1.1.0

    \n
      \n
    • Fixed an https issue on Android that would cause the plugin not to work
      • \n
    \n

    1.0.0

    \n
      \n
    • Initial release
      • \n
    \n

    Author

    \n\n

    Original Author/Plugin

    \n\n","downloadStats":{"lastDay":2,"lastWeek":11,"lastMonth":103}},"nativescript-ripple":{"name":"nativescript-ripple","version":"4.0.3","license":"Apache-2.0","readme":"

    Nativescript-Ripple

    \n

    This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, as well as CSS styles.

    \n

    Installation

    \n
    tns plugin add @edusperoni/nativescript-ripple
    \n

    Usage

    \n

    This will only work on Android Lollipop 5.0 or later and any version of iOS.

    \n

    XML

    \n

    ENSURE TO BIND A TAP LISTENER TO THE CHILD ELEMENT, OR THIS WON'T WORK ON ANDROID

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\" 
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:RL=\"@edusperoni/nativescript-ripple\">
        <ActionBar class=\"action-bar\"><Label class=\"action-bar-title\" text=\"Home\"></Label></ActionBar>
        <ScrollView>
            <StackLayout>
                <RL:Ripple rippleColor=\"#d50000\">
                    <Label text=\"Red Ripples!!!\" class=\"message\" textWrap=\"true\" tap=\"dummy\" />
                </RL:Ripple>

                <RL:Ripple rippleColor=\"#fff000\">
                    <Image src=\"~/home/images/batman.png\" margin=\"10\" stretch=\"aspectFit\" tap=\"dummy\"/>
                </RL:Ripple>

                <RL:Ripple>
                    <Label text=\"Default Ripple\" class=\"message\" textWrap=\"true\" tap=\"dummy\"/>
                </RL:Ripple>

                <RL:Ripple rippleColor=\"#fff\">
                    <GridLayout backgroundColor=\"#FF4081\" borderRadius=\"30\" height=\"60\" width=\"60\" tap=\"dummy\">
                        <Label text=\"B\" fontSize=\"30\" color=\"#fff\" verticalAlignment=\"center\" horizontalAlignment=\"center\" textWrap=\"true\"/>
                    </GridLayout>
                </RL:Ripple>

                <RL:Ripple rippleColor=\"#c8c8c8\">
                    <Label class=\"label-button\" text=\"Lighter Ripple\" textWrap=\"true\" tap=\"dummy\"/>
                </RL:Ripple>

                <RL:Ripple rippleColor=\"#f5f5f5\">
                    <Label text=\"Possibilities\" color=\"#fff\" padding=\"10\" textWrap=\"true\" tap=\"tapEvent\" class=\"dark-button\"/>
                </RL:Ripple>

            </StackLayout>
        </ScrollView>
    </Page>
    \n

    Ripple Options

    \n

    rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".

    \n

    rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.

    \n

    rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).

    \n

    rippleEnabled can be set to "false" (rippleEnabled="false") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).

    \n

    Angular

    \n

    Import the NgRippleModule

    \n

    If you're using other modules that change the background (like https://github.com/Especializa/nativescript-ng-shadow), ensure to import it LAST, otherwise the Ripple background will be overwritten.

    \n
    import { NgRippleModule } from '@edusperoni/nativescript-ripple/angular';

    @NgModule({
        imports: [
            NgRippleModule,
            // ...
        ],
        // ...
    })
    export class MyModule { }
    \n

    Use it in the templates:

    \n

    ENSURE TO BIND A TAP LISTENER, OR THIS WON'T WORK ON ANDROID

    \n

    <Label ripple text="my label text" (tap)="tapfn()"></Label>

    \n
    <StackLayout ripple rippleColor=\"#00ff00\" style=\"padding: 30; border-radius: 10;\" (tap)=\"tapfn()\">
    <Label text=\"this is inside the layout!\"></Label>
    </StackLayout>
    \n

    Implementation details

    \n

    On Android, if the view does not have a background, we assign a transparent one. Otherwise, turning the screen off and then on again makes the background the same as the mask color (black).

    \n

    Ripple Options

    \n

    rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".

    \n

    rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.

    \n

    rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).

    \n

    ripple can be set to "off" (ripple="off") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).

    \n

    Known Issues

    \n

    No Ripple on Android

    \n

    If your Ripple is not working on Android, try the following:

    \n
      \n
    1. Verify the view you're applying the Ripple to has a tap event
      2. \n
    2. If the view is a Text-like view (Buttons, Labels, etc), there is a bug that prevents any foreground to be applied to it when textWrap is not true and textAlignment is center or right. There are many fixes (only one is needed):\n
        \n
      1. Wrap the View in another layout (like a GridLayout)
        2. \n
      2. Change the rippleLayer to background
        3. \n
      3. Use textWrap="true"
        4. \n
      4. Disable HorizontallyScrolling for your View (yourLabel.android.setHorizontallyScrolling(false);). Warning: this is set to true every time textAlignment changes
        5. \n
      \n
      3. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":77,"lastWeek":509,"lastMonth":2183}},"@akylas/svelte-native":{"name":"@akylas/svelte-native","version":"1.0.6","license":"MIT","readme":"

    Svelte Native

    \n

    Create Mobile applications using native widgets via Svelte and NativeScript.

    \n

    See https://svelte-native.technology for docs and tutorials

    \n

    \"todo

    \n

    Features

    \n

    Svelte-Native includes Svelte specific integrations such as

    \n
      \n
    • The ability to use svelte components to create native applications on top of NativeScript core
      • \n
    • Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
      • \n
    • Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
      • \n
    • Integration with sveltes scoped styles
      • \n
    • Complete coverage of the Nativescript core UI modules
      • \n
    • Uses unmodified Svelte and Nativescript modules
      • \n
    \n

    Work In Progress

    \n

    While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

    \n
      \n
    • [x] At least 1 emoji in readme.md :+1:
      • \n
    • [ ] More Tests 😳 #54
      • \n
    \n

    Installation

    \n

    You can get started developing with this using the latest template

    \n
    $ npm install -g nativescript
    $ tns create myapp --template @nativescript/template-blank-svelte
    \n

    A fresh Svelte Native app will be found in the myapp folder

    \n

    Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

    \n

    Usage

    \n

    App.svelte

    \n
    <page>
        <actionBar title=\"Svelte Native\"></actionBar>
        <stackLayout>
            <label text={msg}></label>
            <button text=\"Change\" on:tap=\"{toggle}\"></button>
        </stackLayout>
    </page>

    <script>
      export let msg = 'Hello World!'
      const toggle = () => {
          msg = \"Hi from svelte\"
      }
    </script>
    \n

    Main.ts

    \n
    import App from './components/App.svelte';

    import { svelteNative } from 'svelte-native'

    svelteNative(App, {msg: \"Hi from launcher\"});
    \n

    Examples

    \n

    Svelte Native HackerNews

    \n

    Simple HackerNews client in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-hackernews for the repo.

    \n

    \"HackerNews

    \n

    Svelte Native Grocery

    \n

    Grocery app example in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-grocery for the repo.

    \n

    \"Grocery

    \n

    Svelte Native Realworld

    \n

    Realworld implementation app in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-realworld for the repo.

    \n

    \"Realworld

    \n

    Credits

    \n

    The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":135}},"ns-vue-nami":{"name":"ns-vue-nami","version":"0.1.0-alpha.3","license":"MIT","readme":"

    ns-vue-nami \"CircleCI\"

    \n

    Router companion for Nativescript-Vue 2.0's Manual Routing.

    \n

    Yep, that's her, Nami from One Piece. Why? Coz she's a navigator.

    \n

    Installation

    \n

    npm

    \n

    npm install ns-vue-nami

    \n

    yarn

    \n

    yarn add ns-vue-nami

    \n

    Recommended Implementation

    \n

    Create a router folder with an index.js file within your app folder.

    \n
    app
    |- components
    |- router
       |- index.js
    \n

    index.js

    \n
    import Vue from 'nativescript-vue';
    import NsVueNami from 'ns-vue-nami';
    import login from '~/components/login';
    import dashboard from '~/components/dashboard';
    import isAuthenticated from 'some-authentication-module';

    Vue.use(NsVueNami);

    const vm = new Vue();

    vm.$nami.authGuard((next) => {
      if(isAuthenticated) {
        next();
      } else {
        next('login');
      }
    });

    // register all routes here.
    vm.$nami.init({
      routes: [
        {
          name: 'login',
          component: login,
          noAuth: true,
          entry: !isAuthenticated
        },
        {
          name: 'dashboard',
          component: dashboard,
          entry: isAuthenticated
        }
      ]
    });
    \n

    main.js

    \n

    Just invoke the router in your main.js.

    \n
    import entry from './router';

    new Vue({
      store,
      render: h => h('frame', [h(entry)])
    }).$start();
    \n

    Sample Usage

    \n

    From the template

    \n
    <button @tap=\"$nami.navigate('foo')\">Go to foo</button>
    \n

    From script

    \n
    export default {
      methods: {
        someFunc() {
          this.$nami.navigate('bar');
        }
      }
    }
    \n

    API

    \n

    .init()

    \n
    \n

    Sets all the routable components across the whole app.\nReturns the entry component to be used in main.js as frame entry.

    \n
    \n

    Router properties:

    \n
      \n
    1. name: String - The component name of your choice.
      2. \n
    2. component: Vue component - The vue component.
      3. \n
    3. noAuth: Boolean: default - false - The component will NOT require authentication if set to true.
      4. \n
    4. entry: Boolean - Set a particular component as entry point.
      5. \n
    \n
    import login from '~/components/login';
    import dashboard from '~/components/dashboard';

    vm.$nami.init({
      routes: [
        {
          name: 'login',
          component: login,
          entry: true
        },
        {
          name: 'dashboard',
          component: dashboard
        }
      ]
    })
    \n

    .authGuard()

    \n
    \n

    Will decide whether the component is routable or not based on authentication status.

    \n
    \n
    import Vue from 'nativescript-vue';
    import NsVueNami from '../plugins/ns-vue-nami';

    import login from '~/components/login';
    import dashboard from '~/components/dashboard';

    // Dummy authentication status.
    const isAuthenticated = true;

    Vue.use(NsVueNami);

    const vm = new Vue();

    vm.$nami.authGuard((next) => {
      if(isAuthenticated) {
        next();
      } else {
        next('login');
      }
    });

    export default vm.$nami.init({
      routes: [
        {
          name: 'login',
          component: login,
          noAuth: true,
          entry: !isAuthenticated // login will be the entry if isAuthenticated is false
        },
        {
          name: 'dashboard',
          component: dashboard,
          entry: isAuthenticated // dashboard will be the entry if isAuthenticated is true
        }
      ]
    });
    \n

    .register()

    \n
    \n

    Adds a new route to the list of routes on the fly.

    \n
    \n
    import cat from '~/components/cat';

    vm.$nami.register({name: 'cat', component: cat});
    \n

    .navigate()

    \n
    // Basic
    this.$nami.navigate('cat-component');

    // With props
    this.$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'});
    \n
    <button @tap=\"$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'})\">View Cat</button>
    \n

    .modal()

    \n
    \n

    Just like .navigate() but shows the component on a modal.

    \n
    \n
    // Basic
    this.$nami.modal('cat-component');

    // With props
    this.$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'});
    \n
    <button @tap=\"$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'})\">View Cat in a Modal</button>
    \n

    .back()

    \n
    \n

    Goes back to the previous component.

    \n
    \n
    this.$nami.back();
    \n
    <button @tap=\"$nami.back()\">Go back</button>
    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":38}},"@nativescript/doctor":{"name":"@nativescript/doctor","version":"2.0.11","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":306,"lastWeek":1980,"lastMonth":9364}},"nativescript-android-iosswitch":{"name":"nativescript-android-iosswitch","version":"1.0.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    Nativescript-Android-iOSSwitch

    \n

    A lightweight iOS switch view style for Android.Feedbacks and PRs are most Welcome.

    \n

    Demo

    \n

    |\n---------- |\n\"alt |

    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    luongvo/iOS-SwitchView
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm i nativescript-android-iosswitch --save

    \n

    Usage

    \n

    XML:

    \n
    <Page 
        xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
        xmlns:AndroidIosSwitch=\"nativescript-android-iosswitch\" loaded=\"pageLoaded\"> 
        <Page.actionBar>
          <ActionBar title=\"Nativescript Android iosSwitch\" />
      </Page.actionBar>
      <StackLayout height=\"150\" width=\"80\">
       
          <AndroidIosSwitch:AndroidIosSwitch id=\"sb\" color=\"red\"/>
          
           <Button text=\"True\"  tap=\"{{ onTrue }}\" />
           <Button text=\"false\"  tap=\"{{ onFalse}}\" />
          
            
      </StackLayout>
    </Page>
    \n

    TS:

    \n
    import {AndroidIosSwitch} from 'nativescript-android-iosswitch';
    private npb: AndroidIosSwitch;
      constructor(mainPage: Page) {
        super();
        this.npb = <AndroidIosSwitch>mainPage.getViewById('sb');

      }
         public onTrue() {
            this.npb.toggleSwitch(true);
        }
      public onFalse() {
            this.npb.setChecked(false);
        }
    \n

    Methods

    \n

    isChecked()

    \n

    /**

    \n
      \n
    • @return the state of switch view\n*/
      • \n
    \n

    setChecked(boolean)

    \n

    /**

    \n
      \n
    • if set true , the state change to on;
      • \n
    • if set false, the state change to off
      • \n
    • @param isChecked\n*/
      • \n
    \n

    toggleSwitch(boolean)

    \n

    /**

    \n
      \n
    • if set true , the state change to on;
      • \n
    • if set false, the state change to off
      • \n

    • change state with animation
      • \n
    • @param isChecked\n*/
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":12}},"@kefah/nativescript-google-maps":{"name":"@kefah/nativescript-google-maps","version":"1.0.7","license":"Apache-2.0","readme":"

    NativeScript plugin for the Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    ===

    \n
    \n

    This project is a fork from dapriett/nativescript-google-maps-sdk I've created it beaucse of the owner doesn't mantain it often.

    \n
    \n
    \n

    This version include the new maps Renderer for android that Google Maps just annonce it

    \n
    \n

    \"NPM

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling:

    \n
    tns plugin add @kefah/nativescript-google-maps
    \n

    Setup

    \n

    Demo

    \n

    Please clone this plugin demo and go to tools/assets/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml and change Your_KEY by your real google maps key.

    \n

    Then run npm start and choose apps.demo-angular.android for Angular or whatever your technologie...

    \n

    Configure API Key for Android

    \n

    Nativescript < 4

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
    \n

    Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    Nativescript 4+

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) { 
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:lm=\"@kefah/nativescript-google-maps\" navigatingTo=\"navigatingTo\"  loaded=\"pageLoaded\" class=\"page\">
        <Page.actionBar>
            <ActionBar title=\"nativescript-google-maps\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>
        <GridLayout>
            <lm:GoogleMaps
            latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\"
    \t\t\tzoom=\"{{ zoom }}\" minZoom=\"{{ minZoom }}\" maxZoom=\"{{ maxZoom }}\"
    \t\t\ttilt=\"{{ tilt }}\" bearing=\"{{ bearing }}\"
    \t\t\tmapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
    \t\t\ti-padding=\"50,50,50,50\" padding=\"{{ padding }}\"
    \t\t\tmapReady=\"onMapReady\"
    \t\t\tcoordinateTapped=\"onCoordinateTapped\"
    \t\t\tmarkerSelect=\"onMarkerEvent\"
    \t\t\tmarkerBeginDragging=\"onMarkerEvent\" markerEndDragging=\"onMarkerEvent\" markerDrag=\"onMarkerEvent\"
    \t\t\tmarkerInfoWindowTapped=\"onMarkerEvent\" markerInfoWindowClosed=\"onMarkerEvent\"
    \t\t\tcameraChanged=\"onCameraChanged\"
    \t\t\tcameraMove=\"onCameraMove\"
    \t\t\tindoorBuildingFocused=\"onIndoorBuildingFocused\"
    \t\t\tindoorLevelActivated=\"onIndoorLevelActivated\">
            </lm:GoogleMaps>
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

    \n

    Basic Example

    \n
    //  /app/main-page.js
    import { Observable, EventData, Page, Color, Application } from '@nativescript/core';
    import { DemoSharedNativescriptGoogleMaps } from '@demo/shared';
    import { Bounds, Circle, GoogleMaps, Marker, Polygon, Polyline, Position } from '@kefah/nativescript-google-maps';
    import * as permissions from \"nativescript-permissions\";
    let mapView = null;

    let vmModule: DemoModel;
    let style = require('./map-style.json');

    export function navigatingTo(args: EventData) {
        requestPermissions()
    \tconst page = <Page>args.object;
    \tpage.bindingContext = new DemoModel();
        vmModule = page.bindingContext;
    }

    export function onMapReady(args) {
        mapView = args.object;

        console.log(\"onMapReady\");
        mapView.settings.compassEnabled = true;
        mapView.settings.myLocationButtonEnabled = true;

        console.log(\"Setting a marker...\");
        let marker = new Marker();
        marker.position = Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.color = \"green\";
        marker.userData = {index: 1};
        marker.draggable = true;
        mapView.addMarker(marker);
    }
    \n

    Custom Info Windows (Beta)

    \n

    To use custom marker info windows, define a template in your view like so:

    \n
    <!-- /app/main-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    xmlns:lm=\"@kefah/nativescript-google-maps\" navigatingTo=\"navigatingTo\"  loaded=\"pageLoaded\" class=\"page\">
        <Page.actionBar>
            <ActionBar title=\"nativescript-google-maps\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>
        <GridLayout>
            <lm:GoogleMaps
            latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\"
    \t\t\tzoom=\"{{ zoom }}\" minZoom=\"{{ minZoom }}\" maxZoom=\"{{ maxZoom }}\"
    \t\t\ttilt=\"{{ tilt }}\" bearing=\"{{ bearing }}\"
    \t\t\tmapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
    \t\t\ti-padding=\"50,50,50,50\" padding=\"{{ padding }}\"
    \t\t\tmapReady=\"onMapReady\"
    \t\t\tcoordinateTapped=\"onCoordinateTapped\"
    \t\t\tmarkerSelect=\"onMarkerEvent\"
    \t\t\tmarkerBeginDragging=\"onMarkerEvent\" markerEndDragging=\"onMarkerEvent\" markerDrag=\"onMarkerEvent\"
    \t\t\tmarkerInfoWindowTapped=\"onMarkerEvent\" markerInfoWindowClosed=\"onMarkerEvent\"
    \t\t\tcameraChanged=\"onCameraChanged\"
    \t\t\tcameraMove=\"onCameraMove\"
    \t\t\tindoorBuildingFocused=\"onIndoorBuildingFocused\"
    \t\t\tindoorLevelActivated=\"onIndoorLevelActivated\">
                <lm:GoogleMaps.infoWindowTemplate>
                    <StackLayout orientation=\"vertical\" width=\"200\" >
                        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                    </StackLayout>
                </lm:GoogleMaps.infoWindowTemplate>
            </lm:GoogleMaps>
        </GridLayout>
    </Page>
    \n

    ...and set the infoWindowTemplate property like so:

    \n
    var marker = new mapsModule.Marker();
    marker.infoWindowTemplate = 'testWindow';
    \n

    This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

    \n

    ** Known issue: remote images fail to display in iOS info windows (local images work fine)

    \n

    Usage with Angular

    \n

    See Angular demo code included here

    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":9,"lastWeek":18,"lastMonth":181}},"nativescript-grid-template":{"name":"nativescript-grid-template","version":"1.0.1","license":"ISC","readme":"

    NativeScript Grid Template

    \n

    This little helper allows you to use NativeScript GridLayout with CSS grid-template-areas values.

    \n

    Example usage with Svelte Native (config adapted from https://www.cssgridplayground.com/):

    \n
    <script>
      import gridTemplateAreas from \"nativescript-grid-template\";
      const areas = gridTemplateAreas(`
        header header header
        sidebar main aside
        sidebar footer footer
          `    );
    </script>

    <gridLayout rows=\"*, 5*, *\" columns=\"*, 5*, 2*\" orientation=\"vertical\">
      <label text=\"header\" {...areas.header} />
      <label text=\"sidebar\" {...areas.sidebar} />
      <label text=\"main\" {...areas.main} />
      <label text=\"aside\" {...areas.aside} />
      <label text=\"footer\" {...areas.footer} />
    </gridLayout>
    \n

    This is only tested briefly. For invalid inputs, like this one:

    \n
    a a a
    a b b
    a b c
    \n

    behaviour is undefined. MRs adding validation are welcome!

    \n","downloadStats":{"lastDay":1,"lastWeek":1,"lastMonth":7}},"nativescript-dev-appium":{"name":"nativescript-dev-appium","version":"6.1.3","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":17,"lastWeek":381,"lastMonth":1181}},"nativescript-mdk-alert":{"name":"nativescript-mdk-alert","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-mdk-alert

    \n
    npm install nativescript-mdk-alert
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":8}},"@nativescript-community/extendedinfo":{"name":"@nativescript-community/extendedinfo","version":"1.3.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/extendedinfo
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Plugin to get diverse device infos. This plugin caches results to make it faster.

    \n
    function isSimulator(): boolean;
    function getAppId(): Promise<string>;
    function getAppIdSync(): string;
    function getVersionName(): Promise<string>;
    function getVersionNameSync(): string;
    function getAppName(): Promise<string>;
    function getAppNameSync(): string;
    function getBuildNumber(): Promise<number>;
    function getBuildNumberSync(): number;
    \n","downloadStats":{"lastDay":8,"lastWeek":13,"lastMonth":127}},"@nativescript/iqkeyboardmanager":{"name":"@nativescript/iqkeyboardmanager","version":"2.1.1","license":"Apache-2.0","readme":"

    @nativescript/iqkeyboardmanager

    \n

    NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

    \n

    \"Example

    \n
    npm install @nativescript/iqkeyboardmanager
    \n

    Usage

    \n

    For any view which contains an input you want the keyboard manager to auto handle, just ensure the root/top node of the view is wrapped in a ScrollView as that will ensure keyboard manager can auto pan it properly, for example:

    \n
      \n
    • Incorrect:
      • \n
    \n
    <GridLayout>
      <TextField></TextField>
    <GridLayout>
    \n
      \n
    • Correct:
      • \n
    \n
    <ScrollView>
      <GridLayout>
        <TextField></TextField>
      <GridLayout>
    </ScrollView>
    \n

    Other than that, IQKeyboardManager takes care of all initialization when your app starts up by default.

    \n

    Advanced usage

    \n

    Grouping related textfields (previous / next buttons)

    \n

    If your UI layout has sibling text fields, then IQKeyboardManager is able to automatically\nadd previous / next buttons to the accessory bar which the user can use to jump back and forth.\nSee those < and > buttons in the video above.

    \n

    In case those fields were not direct siblings, until version 1.3.0 of this plugin, you had no way\nto force the previous / next buttons to appear. However, now you can:

    \n

    NativeScript /w XML usage

    \n

    Note in the example below that the two <TextField> controls are not siblings (both have parent <StackLayout> containers). Because of this, IQKeyboardManager will not automatically provide an optimized keyboard by default.

    \n

    However, if you surround the controls with this plugin's <PreviousNextView> control, as the example below shows, you will continue to get an optimized keyboard as expected.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
      <ScrollView>
        <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
          <StackLayout>
              <TextField hint=\"Email\"/>
              <TextField hint=\"Password\"/>
          </StackLayout>
        </IQKeyboardManager:PreviousNextView>
      </ScrollView>
    </Page>
    \n

    NativeScript /w Angular usage

    \n

    In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the PreviousNextView element:

    \n
    import { registerElement } from '@nativescript/angular';
    import { PreviousNextView } from '@nativescript/iqkeyboardmanager';
    registerElement('PreviousNextView', () => PreviousNextView);
    \n

    Then in the view, use that element like this (again, we went nuts with the <StackLayout>s:

    \n
    <ScrollView>
    \t<PreviousNextView
    \t\t>    <!-- add this 'wrapper' to enable those previous / next buttons -->
    \t\t<StackLayout>
    \t\t\t\t<TextField hint=\"Email\"></TextField>
    \t\t\t\t<TextField hint=\"Password\"></TextField>
    \t\t</StackLayout>
    \t</PreviousNextView>
    </ScrollView>
    \n

    NativeScript /w Vue usage

    \n

    Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

    \n
    Vue.registerElement('PreviousNextView', () => require('@nativescript/iqkeyboardmanager').PreviousNextView);
    \n

    Adding a placeholder/hint on a TextView's accessory bar

    \n

    Looking at the gif above you may notice when focusing the Email address and password fields,\nthe placeholder/hint of those TextFields is shown in the accessory bar above the keyboard.

    \n

    But when you use a TextView instead of a TextField, the placeholder is not shown because\nof an iOS limitation. You can work around this limitation by using the TextViewWithHint\nprovided by this plugin. So whenever you want to use a TextView with a placeholder,\nuse TextViewWithHint instead.

    \n

    NativeScript /w XML usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"@nativescript/iqkeyboardmanager\">
      <ScrollView>
        <StackLayout>
          <TextView hint=\"Not working TextView hint\"/>
          <IQKeyboardManager:TextViewWithHint hint=\"Working TextView hint 🤪\"/>
        </StackLayout>
      </ScrollView>
    </Page>
    \n

    NativeScript /w Angular usage

    \n

    In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the TextViewWithHint element:

    \n
    import { registerElement } from '@nativescript/angular';
    import { TextViewWithHint } from '@nativescript/iqkeyboardmanager';
    registerElement('TextViewWithHint', () => TextViewWithHint);
    \n

    Then in the view, use that element like this:

    \n
    <StackLayout>
    \t<TextView hint=\"Not working TextView hint\"></TextView>
    \t<TextViewWithHint hint=\"Working TextView hint 🤪\"></TextViewWithHint>
    </StackLayout>
    \n

    NativeScript /w Vue usage

    \n

    Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

    \n
    Vue.registerElement('TextViewWithHint', () => require('@nativescript/iqkeyboardmanager').TextViewWithHint);
    \n

    Tweaking the appearance and behavior

    \n

    Start by adding the following two paths into your app’s references.d.ts file. (See this repo’s demo app for a specific example.)

    \n
    /// <reference path=\"./node_modules/@nativescript/types/index.d.ts\" />
    /// <reference path=\"./node_modules/@nativescript/iqkeyboardmanager/index.d.ts\" />
    \n
    \n

    NOTE: You might also need to npm install --save-dev @nativescript/types to bring in NativeScript’s TypeScript definitions for native iOS development.

    \n
    \n

    Next, initialize an instance of IQKeyboardManager with the following line of code.

    \n
    const iqKeyboard = IQKeyboardManager.sharedManager();
    \n

    You now have the full IQKeyboardManager APIs available for you to use. For example you could use the following code to switch to a dark keyboard.

    \n
    const iqKeyboard = IQKeyboardManager.sharedManager();
    iqKeyboard.overrideKeyboardAppearance = true;
    iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;
    \n

    For more examples of what's possible, run the demo app (shown in the gif below) and check out the app's main-view-model.ts file.

    \n\n

    Multi-factor one-time code auto-fill

    \n

    While the following is not a feature specific to IQKeyboardManager, you are here because you want the best keyboard experience for your NativeScript app and this may be helpful to know about.

    \n

    iOS has a feature where a text field's QuickType search suggestion bar can suggest one-time code values for multi-factor authentication that were texted to your device.

    \n

    If the field is specially-identified as a one-time code field, the suggestion will appear for about 3 minutes after being received, and the user simply has to tap the suggestion to fill in the value—no short term memorization or copy/paste gestures required. Examples of message formats are:

    \n
      \n
    • 123456 is your App Name code.
      • \n
    • 123456 is your App Name login code.
      • \n
    • 123456 is your App Name verification code.
      • \n
    \n

    To implement this functionality in your own app, first declare UITextContentTypeOneTimeCode near your component imports:

    \n
    declare var UITextContentTypeOneTimeCode;
    \n

    Then, set the field's ios.textContentType property:

    \n
    // This code assumes this.page exists as a reference to the current Page.
    const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
    if (mfaCodeField !== null && mfaCodeField.ios) {
    \tmfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
    }
    \n

    There are other textContentType values you might want to use. You can read more about the property in this article.

    \n

    Documentation

    \n

    For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

    \n

    Maintainers

    \n

    For maintainer’s of this plugin’s source code: when the IQKeyboardManager Podfile updates, you should generate new typings for for this plugin to reflect those changes.

    \n

    To do so, execute these commands.

    \n
    cd demo
    TNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios
    TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios
    \n

    Next, locate IQKeyboardManager’s generated typings file in the demo/typings folder and override the IQKeyboardManager.d.ts file in this repo’s root.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":227,"lastWeek":1628,"lastMonth":7375}},"nativescript-confettiview":{"name":"nativescript-confettiview","version":"3.0.3","license":"MIT","readme":"

    NativeScript ConfettiView Plugin

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin to create an animated confetti view on iOS and Android.

    \n

    Getting Started

    \n
      \n
    • npm install nativescript-confettiview
      • \n
    • Import the ConfettiView into your page and start confetti!
      • \n
    \n
    import {Observable} from 'data/observable';
    import {ConfettiView} from 'nativescript-confettiview';

    export class HelloWorldModel extends Observable {

      private confettiView: any;

      constructor() {
        super();
        this.confettiView = new ConfettiView();
        this.confettiView.startConfetti();
      }

      public stopConfetti() {
        this.confettiView.stopConfetti();
      }

      public startConfetti() {
        this.confettiView.startConfetti();
      }

    }
    \n

    Note: On first run, you may see a console log regarding an incorrect local file path. Let the install finish and you will notice the package.json will reflect your local file path to the plugin.

    \n

    Available Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Call SignatureDefault
    intensity(number)0.5
    colors(array)UIColor[]
    startConfetti()
    stopConfetti()
    \n

    Example

    \n

    \"Image\"

    \n

    Credits

    \n
      \n
    • https://github.com/sudeepag/SAConfettiView for the original Pod
      • \n
    • https://github.com/NathanWalker/SAConfettiView Nathan Walker for the upgrades to the Pod and this plugin
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":12,"lastMonth":38}},"nativescript-bored-rudolph":{"name":"nativescript-bored-rudolph","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-bored-rudolph/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Bored-Rudolph :recycle:

    \n

    NativeScript plugin for a custom hidden game inside a pull-to-refresh layout.

    \n

    Demo

    \n

    \"Demo\"

    \n

    Native Library

    \n

    Bored Rudolph

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    tns plugin add nativescript-bored-rudolph

    \n

    Usage

    \n

    XML

    \n
    <page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:BR=\"nativescript-bored-rudolph\" loaded=\"pageLoaded\">
      <ActionBar title=\"Bored Rudolph\" backgroundColor=\"#BF4066\" color=\"#fff\" />
      <stack-layout>
        <BR:BoredRudolph refresh=\"{{ stopRefresh }}\" id=\"rudolph\">
          <list-view items=\"{{ users }}\">
            <list-view.itemTemplate>
              <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
            </list-view.itemTemplate>
          </list-view>
        </BR:BoredRudolph>
      </stack-layout>
    </page>
    \n

    TS

    \n

      public stopRefresh(args: any) {
        // Load more data here and then set 'refreshing = false' to end the refresh
        let boredRudolph: BoredRudolph = args.object;
        boredRudolph.refreshing = false;
      }
    \n

    Attributes

    \n

    refresh : function optional - this event is triggered when you set the BoredRudoplh refresh property equal to false.

    \n

    API

    \n

    refreshing

    \n

    Property. Notifies the widget that the refresh state has changed.

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":8}},"@nativescript-community/ui-document-picker":{"name":"@nativescript-community/ui-document-picker","version":"1.1.13","license":"Apache-2.0","readme":"\n\n

    @nativescript-community/ui-document-picker

    \n

    \n\t\t\"Downloads\n\"NPM\n\t

    \n

    \n A NativeScript plugin that allows you to select files from the device.
    \n \n

    \n
    \n

    \n

    Table of Contents

    \n\n

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/ui-document-picker

    \n

    \n

    Configuration

    \n

    Add any other additional configuration instructions here.

    \n

    \n

    API

    \n

    There is one function exported:

    \n
    export interface FilePickerOptions {
        extensions: string[];
        multipleSelection?: boolean;
        pickerMode?: number; //iOS only
    }

    export function openFilePicker(params: FilePickerOptions): Promise<{ files: string[]; ios?: NSURL; android?: android.net.Uri }>;
    \n

    Vue

    \n

    Examples

    \n\n

    \n

    Demos and Development

    \n

    Repo Setup

    \n

    The repo uses submodules. If you did not clone with --recursive then you need to call

    \n
    git submodule update --init
    \n

    The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

    \n

    To develop and test:\nif you use yarn then run yarn\nif you use pnpm then run pnpm i

    \n

    Interactive Menu:

    \n

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    \n

    Build

    \n
    npm run build.all
    \n

    WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

    \n

    Demos

    \n
    npm run demo.[ng|react|svelte|vue].[ios|android]

    npm run demo.svelte.ios # Example
    \n

    Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]\nInstead you work in demo-snippets/[ng|react|svelte|vue]\nYou can start from the install.ts of each flavor to see how to register new demos

    \n

    \n

    Contributing

    \n

    Update repo

    \n

    You can update the repo files quite easily

    \n

    First update the submodules

    \n
    npm run update
    \n

    Then commit the changes\nThen update common files

    \n
    npm run sync
    \n

    Then you can run yarn|pnpm, commit changed files if any

    \n

    Update readme

    \n
    npm run readme
    \n

    Update doc

    \n
    npm run doc
    \n

    Publish

    \n

    The publishing is completely handled by lerna (you can add -- --bump major to force a major release)\nSimply run

    \n
    npm run publish
    \n

    modifying submodules

    \n

    The repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify ~/.gitconfig and add

    \n
    [url \"ssh://git@github.com/\"]
    \tpushInsteadOf = https://github.com/
    \n

    \n

    Questions

    \n

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    \n","downloadStats":{"lastDay":56,"lastWeek":946,"lastMonth":4013}},"nativescript-image-filters":{"name":"nativescript-image-filters","version":"4.0.0","license":"MIT","readme":"

    \"Build\n\"npm\"\n\"GitHub

    \n

    NativeScript-Image-Filters

    \n

    Nativescript plugin for native image filters.

    \n

    Sample

    \n

    \"Demo\"

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    NativeScript Version 7+:\ntns plugin add nativescript-image-filters

    \n

    NativeScript Verion prior to 7:\ntns plugin add nativescript-image-filters@3.0.0

    \n

    Usage

    \n

    JS:

    \n
    import { Frame } from '@nativescript/core/ui/frame';
    import { ImageFilters } from 'nativescript-image-filters';

    const filters = new ImageFilters();

    public effectOne() {
      const pic = Frame.topmost().currentPage.getViewById('myPicture');

          filters.invert(pic).then((result) => {

          // set the pic imageSource equal to the new imageSource
          pic.imageSource = result;

        }).catch((err) => {
          console.log('applyFilter ERROR: ' + err);
        });
    }
    \n

    IMPORTANT NOTE

    \n

    Not all methods have been tested. The code needs to be cleaned up to reduce duplication in methods. The methods also need to be 1:1 for common methods. Right now not all iOS & Android methods are named correctly for the image filter. Pull requests are very welcome to improve the API for this plugin.

    \n

    API

    \n
      \n
    • highlightImage(img: Image, color: string, radius?: number): Promise<ImageSource>
      • \n
    • invert(img: Image): Promise<ImageSource>
      • \n
    • blackAndWhite(img: Image): Promise<ImageSource>
      • \n
    • gamma(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • colorFilter(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • sepiaEffect(img: Image, depth: number, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • decreaseColorDepth(img: Image, bitOffset: number): Promise<ImageSource>
      • \n
    • contrast(img: Image, value: number): Promise<ImageSource>
      • \n
    • rotate(img: Image, degree: number): Promise<ImageSource>
      • \n
    • brightness(img: Image, value: number): Promise<ImageSource>
      • \n
    • gaussianBlur(img: Image): Promise<ImageSource>
      • \n
    • createShadow(img: Image): Promise<ImageSource>
      • \n
    • sharpen(img: Image, weight: number): Promise<ImageSource>
      • \n
    • meanRemoval(img: Image): Promise<ImageSource>
      • \n
    • smooth(img: Image, value: number): Promise<ImageSource>
      • \n
    • emboss(img: Image): Promise<ImageSource>
      • \n
    • engrave(img: Image): Promise<ImageSource>
      • \n
    • boost(img: Image, type: number, percent: number): Promise<ImageSource>
      • \n
    • roundCorner(img: Image, round: number): Promise<ImageSource>
      • \n
    • waterMark(img: Image, watermark: string, location: android.graphic.Point, color: string, alpha: number, size: number, underline: boolean): Promise<ImageSource>
      • \n
    • flip(img: Image, type: number): Promise<ImageSource>
      • \n
    • tintImage(img: Image, degree: number): Promise<ImageSource>
      • \n
    • fleaEffect(img: Image): Promise<ImageSource>
      • \n
    • blackFilter(img: Image): Promise<ImageSource>
      • \n
    • snowEffect(img: Image): Promise<ImageSource>
      • \n
    • shadingFilter(img: Image, shadingColor: number): Promise<ImageSource>
      • \n
    • saturationFilter(img: Image, level: number): Promise<ImageSource>
      • \n
    • hueFilter(img: Image, level: number): Promise<ImageSource>
      • \n
    • reflection(img: Image): Promise<ImageSource>
      • \n
    • replaceColor(img: Image, fromColor: string, toColor: string): Promise<ImageSource>
      • \n
    \n","downloadStats":{"lastDay":2,"lastWeek":32,"lastMonth":174}},"nativescript-directions":{"name":"nativescript-directions","version":"1.4.0","license":"MIT","readme":"

    NativeScript Directions plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-directions
    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

    \n\n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    API

    \n

    available

    \n

    Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

    \n
    JavaScript
    \n
    // require the plugin
    var Directions = require(\"nativescript-directions\").Directions;

    // instantiate the plugin
    var directions = new Directions();

    directions.available().then(
      function(avail) {
        console.log(avail ? \"Yes\" : \"No\");
      }
    );
    \n
    TypeScript
    \n
    // require the plugin
    import { Directions } from \"nativescript-directions\";

    // instantiate the plugin
    let directions = new Directions();

    directions.available().then(avail => {
        console.log(avail ? \"Yes\" : \"No\");
    });
    \n

    navigate

    \n

    This function opens the native Maps app with a predefined from and to address.

    \n

    If you don't pass from the current location of the user will be used.

    \n

    If an address is specified then lat and lng will be ignored.

    \n

    If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

    \n

    Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

    \n
    JavaScript
    \n
    directions.navigate({
      from: { // optional, default 'current location'
        lat: 52.215987,
        lng: 5.282764
      },
      to: { // either pass in a single object or an Array (see the TypeScript example below)
        address: \"Hof der Kolommen 34, Amersfoort, Netherlands\"
      }
      // for platform-specific options, see the TypeScript example below.
    }).then(
      function() {
        console.log(\"Maps app launched.\");
      },
      function(error) {
        console.log(error);
      }
    );
    \n
    TypeScript
    \n
    directions.navigate({
      from: { // optional, default 'current location'
        lat: 52.215987,
        lng: 5.282764
      },
      to: [{ // if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
        address: \"Hof der Kolommen 34, Amersfoort, Netherlands\",
      },
      {
        address: \"Aak 98, Wieringerwerf, Netherlands\"
      }],
      type: \"walking\", // optional, can be: driving, transit, bicycling or walking
      ios: {
        preferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
        allowGoogleMapsWeb: true // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
      },
      android: {
        newTask: true // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
      }
    }).then(() => {
        console.log(\"Maps app launched.\");
    }, error => {
        console.log(error);
    });
    \n

    Future work

    \n
      \n
    • Perhaps add Android-specific options like opening the map in StreetView mode, or pre-defining the transportation type (walk/bike/car).
      • \n
    \n","downloadStats":{"lastDay":3,"lastWeek":8,"lastMonth":103}},"nativescript-angular-cli":{"name":"nativescript-angular-cli","version":"0.1.9","license":"Apache-2.0","readme":"

    nativescript-angular-cli

    \n

    NativeScript CLI command extensions to add some of the Angular CLI commands.

    \n

    Installation

    \n

    Just execute tns extension install nativescript-angular-cli

    \n

    The package will be installed to:

    \n
      \n
    • ~/.local/share/.nativescript-cli/extensions/ on macOS and Linux
      • \n
    • %APPDATA%/.nativescript-cli/extensions/on Windows
      • \n
    \n
    \n

    NOTE: You need NativeScript CLI 3.0.0 or later. You can install latest version by executing npm i -g nativescript.

    \n
    \n

    Usage

    \n

    To generate a component, run:

    \n
      \n
    • tns generate component <component-name>
      • \n
    • tns g c <component-name>
      • \n
    \n

    To create a component inside a module, run:

    \n
      \n
    • tns generate component <component-name> <module-name>
      • \n
    • tns g c <component-name> <module-name>
      • \n
    \n

    To create a module, run:

    \n
      \n
    • tns generate module <module-name>
      • \n
    • tns g m <module-name>
      • \n
    \n

    To create a service, run:

    \n
      \n
    • tns generate service <service-name>
      • \n
    • tns g s <service-name>
      • \n
    \n

    TeamMaestro Shareable Components/Modules generators

    \n

    To generate a shareable module run:

    \n
      \n
    • tns generate shared-module <module-name>
      • \n
    • tns g sm <module-name>
      • \n
    \n","downloadStats":{"lastDay":3,"lastWeek":24,"lastMonth":60}},"@nativescript-community/ui-vue-unlock-slider":{"name":"@nativescript-community/ui-vue-unlock-slider","version":"1.0.0","license":"MIT","readme":"

    A NativeScript-Vue component for "Slide to unlock"

    \n

    Slide to unlock in iOS style with animations made with NativeScript-Vue. Works on iOS and Android.

    \n

    \"npm\"

    \n\n

    Installation

    \n
    ns plugin add @nativescript-community/ui-vue-unlock-slider
    \n

    Usage

    \n
    // app.js
    import Vue from 'nativescript-vue'
    ...
    + import UnlockSlider from '@nativescript-community/ui-vue-unlock-slider'
    + Vue.use(UnlockSlider)
    \n
    <UnlockSlider ref=\"unlockSlider\" @change=\"sliderChange\" />
    \n
    export default {
      data() {
        return {
          slidePercent: 0
        }
      },
      methods: {
        sliderChange(percent) {
          this.slidePercent = percent;
        },
        reset() {
          this.$refs.unlockSlider.reset();
        }
      }
    }
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefault value
    heightNumber70
    radiusNumber70
    containerBackgroundColorStringlightgray
    buttonTextString→
    buttonTextSizeNumber20
    buttonTextColorStringblack
    buttonTextFontWeightStringnormal
    buttonBackgroundColorStringwhite
    infoTextStringSlide to unlock
    infoTextSizeNumber16
    infoTextColorStringblack
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeValue
    changeNumber0.00-1.00
    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":41}},"nativescript-sms-inbox":{"name":"nativescript-sms-inbox","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/jgithaiga/nativescript-sms-inbox/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Sms Inbox

    \n

    A NativeScript plugin to read text messages on android phone inbox using undocumented android api.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-sms-inbox
    \n

    Android

    \n

    To read sms inbox in the phone without user interaction on Android your app must request permission. The following must be added to your app's AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.READ_SMS\" />
    \n

    Usage

    \n

    To use the phone module you must first require() it from your project's node_modules directory:

    \n
    var inbox = require( \"nativescript-sms-inbox\" );
    \n

    After you have a reference to the module you can then call the available methods.

    \n

    Methods

    \n

    getInboxes: fetch all text message in the inbox

    \n
    Parameters
    \n
      \n
    • options: A map of parameters e.g. max (for max results), etc..
      • \n
    \n

    For example, the code below gets the last 10 smses from the device inbox:

    \n
    // my-page.js
    var inbox = require( \"nativescript-sms-inbox\" );
    inbox.getInboxes({ max: 10 }).then(function(res) {
        console.log(JSON.stringify(res));
    }, function(err) {
        console.log(\"Error: \" + err);
    });
    \n

    getInboxesFromNumber: Get all text messages in the sms inbox sent by provided fromNumber

    \n
    Parameters
    \n
      \n
    • fromNumber - The number on which to filter SMS inbox messages.
      • \n
    • options - A map of parameters e.g. max (for max results), etc.
      • \n
    \n

    For example, the code below gets the last 10 smses from the device inbox sent by the provided fromNumber:

    \n
    // my-page.js
    var inbox = require( \"nativescript-sms-inbox\" );
    inbox.getInboxesFromNumber(\"0712345678\", { max: 10 }).then(function(res) {
        console.log(JSON.stringify(res));
    }, function(err) {
        console.log(\"Error: \" + err);
    });
    \n

    TypeScript example

    \n

    import * as TNSInbox from 'nativescript-sms-inbox';

    // Get the last 10 inbox messages
    public getInboxMessages() {    
        TNSInbox.getInboxes({ max: 10 }).then((res) => {
            console.log(JSON.stringify(res))    ;
        }, (err) => {
            console.log('Error: ' + err);
        });
    }

    // Get the last 10 inbox messages sent by the provided fromNumber
    public getInboxMessagesFromNumber(fromNumber: string) { //fromNumber = \"0712345678\"
        TNSInbox.getInboxesFromNumber(fromNumber, { max: 10 }).then((res) => {
            console.log(JSON.stringify(res))    ;
        }, (err) => {
            console.log('Error: ' + err);
        });
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":20,"lastMonth":60}},"nativescript-checkbox-spms":{"name":"nativescript-checkbox-spms","version":"2.0.6","license":"Apache-2.0","readme":"

    @nstudio/nativescript-checkbox

    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n
    npm install @nstudio/nativescript-checkbox
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Usage

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { Frame } from '@nativescript/core';

    public toggleCheck() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    Vue.registerElement(
      'CheckBox',
      () => CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":6,"lastMonth":44}},"nativescript-emoji":{"name":"nativescript-emoji","version":"1.1.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Emoji 😀😊🚀

    \n

    A simple library to add Emoji support to your NativeScript app. Working on Android and iOS

    \n

    \"Emoji\"

    \n

    Instalation

    \n

    tns plugin add nativescript-emoji

    \n

    Usage

    \n
    XML
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Emoji=\"nativescript-emoji\" navigatingTo=\"navigatingTo\" class=\"page\">  
        <Page.actionBar>
            <ActionBar title=\"NativeScript Emoji\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>
        <StackLayout orientation=\"horizontal\">
            <Label text=\"I'm happy \"> </Label>
            <Emoji:Emoji name=\"joy\" />
            <Emoji:Emoji name=\"joy\" />
            <Emoji:Emoji name=\"joy\" />
        </StackLayout>
    </Page>
    \n
    TS
    \n
    import { Emoji } from 'nativescript-emoji';
    \n
    ANGULAR
    \n
    import { registerElement } from \"nativescript-angular/element-registry\";

    registerElement(\"Emoji\", () => require(\"nativescript-emoji\").Emoji);
    \n

    How to use

    \n

    Set emoji property name with the short-name of the emoji.

    \n

    <Emoji:Emoji name="joy" />

    \n

    Available Properties

    \n

    name: emoji short-name

    \n

    size: size to display emoji

    \n

    The full list you can access on the link below.\nhttp://apps.timwhitlock.info/emoji/tables/unicode

    \n","downloadStats":{"lastDay":0,"lastWeek":7,"lastMonth":35}},"nativescript-image-cache-it":{"name":"nativescript-image-cache-it","version":"6.3.6","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    Image-Cache-It

    \n

    Glide - Android

    \n

    SDWebImage - IOS

    \n

    Install

    \n

    NativeScript 6.5x

    \n
      \n
    • tns plugin add nativescript-image-cache-it
      • \n
    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-image-cache-it@5.0.0-beta.20
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-image-cache-it@3.0.7
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-image-cache-it@1.6.0
      • \n
    \n

    Usage

    \n
    import { ImageCacheIt } from 'nativescript-image-cache-it';
    // **new** call in your app.ts/ main.ts/ app.js to enable image-cache to hook into the device's lowmemory events
    ImageCacheIt.enableAutoMM();
    \n

    Set image url to load.

    \n
    load = image;
    \n

    Set placeholder while images are downloading.

    \n
    placeHolder = '~/assets/images/ph.png';
    \n

    Set placeholder for images are that failed to download.

    \n
    errorHolder = '~/assets/images/broken.png';
    \n

    Set decoded image size.

    \n
    decodedWidth = '300';
    decodedHeight = '300';
    \n

    Stretch

    \n
    stretch = \"aspectFit\" // (optional) aspectFit || aspectFill || fill || none
    \n

    Prefetch

    \n
    import { ImageCacheIt } from 'nativescript-image-cache-it';
    ImageCacheIt.fetchItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();
    \n

    Delete item from cache

    \n
    import { ImageCacheIt } from 'nativescript-image-cache-it';
    ImageCacheIt.deleteItem('https://source.unsplash.com/random').then().catch();
    \n

    Get item from cache

    \n
    import { ImageCacheIt } from 'nativescript-image-cache-it';
    ImageCacheIt.getItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();
    \n

    e.g

    \n
    import { ImageCacheIt } from 'nativescript-image-cache-it';
    let cache = new ImageCacheIt();
    cache.src = image;
    cache.placeHolder = '~/assets/images/broken.png';
    cache.errorHolder = '~/assets/images/ph.png';
    cache.decodedWidth = '300';
    cache.decodedHeight = '300';
    cache.filter = 'blur(10px);';
    cache.stretch = 'aspectFit';
    return cache;
    \n

    Xml markup settings

    \n
    decodedWidth=\"300\"; <!-- (optional) -->
    decodedHeight=\"300\"; <!-- (optional) -->
    placeHolder=\"~/assets/images/ph.png\" <!-- (optional) -->
    errorHolder=\"~/assets/images/broken.png\"  <!-- (optional) -->
    stretch = \"aspectFit\" <!-- (optional) -->
    src= \"http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg\" <!-- (required) -->
    \n

    IMPORTANT: Make sure you include xmlns:i="nativescript-image-cache-it" on the Page element

    \n

    e.g

    \n
    <i:ImageCacheIt stretch=\"aspectFit\"  resize=\"300,300\" placeHolder=\"~/assets/images/ph.png\" errorHolder=\"~/assets/images/broken.png\" src=\"http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg\"/>
    \n

    Angular

    \n
    import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';

    @NgModule({
        imports: [
        TNSImageCacheItModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Screenshots

    \n

    Repeater

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ImageImageCacheIt
    \"image_repeater\"\"imagecacheit_repeater\"
    \n

    ListView

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ImageImageCacheIt
    \"image_listview\"\"imagecacheit_listview\"
    \n","downloadStats":{"lastDay":1,"lastWeek":115,"lastMonth":412}},"router-vue-native":{"name":"router-vue-native","version":"2.1.0","license":"Apache-2.0","readme":"

    NativeScript Vue Router

    \n

    \"NPM \"Blazing \"Code \"npm \"install

    \n

    nativescript-vue-router-extended

    \n

    NativeScript Vue Router brings easier routing handling to mobile apps, with an API compatibility with web version of Vue Router.

    \n

    Please file an issue or make a PR if you spot any problems or you have any further requests regarding the functionality.

    \n

    Table of Contents

    \n\n

    Features

    \n
      \n
    • Same hooks and guards for mobile and web
      • \n
    • Additional action dispatcher to dispatch actions to store automatically when changing routes
      • \n
    • Vue-Router 4 API compatibility
      • \n
    • NativeScript-Vue compatible
      • \n
    • TypeScript Support out of the box
      • \n
    \n

    Prerequisites / Requirements

    \n

    Nativescript 7.1+ is required for the plugin to run properly. It might be working on previous NS6 although the plugin is no longer officially supported for NativeScript 6.

    \n

    Installation

    \n
    ns plugin add router-vue-native

    or

    npm install router-vue-native

    or

    yarn add router-vue-native
    \n

    \"NPM\"

    \n

    Usage & Examples

    \n

    To use this plugin you need to import it and initialize the router using createRouter() function. Global and per component Vue-Router hooks and guards are supported.

    \n

    Vue 3 example

    \n

    Add your router to vue app

    \n
    // app.ts

    import { createApp } from 'nativescript-vue';
    import App from './App.vue';
    import {router} from \"~/plugins/router\";
    const app = createApp(App);
    app.use(router)
    app.start();
    \n

    Create router

    \n
    // /plugins/router.ts

    import {createRouter} from \"router-vue-native\";
    import Home from \"~/views/Home.vue\";
    import Login from \"~/views/Login.vue\";

    const routes = [
        {
            path: \"/\",
            component: Home,
        },
        {
            path: \"/login\",
            component: Login,
        }
    ];

    const router = createRouter(
        {routes},
    );

    export {
        router
    }
    \n

    Define the default path of your application

    \n
    // App.vue
    <template>
      <RouterView defaultRoute=\"/login\"></RouterView>
    </template>

    // OR

    <script setup lang=\"ts\">
    const getDefaultRouteExample = () => {
      if (isLoginUser) {
        return \"/login\"
      } else {
        return \"/\"
      }
    }
    </script>
    <template>
      <RouterView :defaultRoute=\"getDefaultRouteExample\"></RouterView>
    </template>
    \n

    Use on setup template

    \n
    <script lang=\"ts\" setup>
    import {useRouter} from \"router-vue-native\";

    // get router
    const router = useRouter();

    const onNavigete = () => {
      // navigate
      router.push(\"/your_path\")
    }

    </script>
    \n

    Vue 2 and full options

    \n
    import Vue from \"nativescript-vue\";
    import { createRouter } from \"nativescript-vue-router-extended\";

    // Initialize Example Routes
    import Home from \"./pages/Home.vue\";
    import Login from \"./pages/Login.vue\";

    const routes = [
      {
        path: \"/\",
        component: Home,

        // Optional
        meta: {
          isVertical: true,
          // Example actions to dispatch automatically when page is visited
          // Remember that you need to implement actions in your Vuex store
          store: {
            // Call action to hide navigation buttons
            showNavigationButtons: false,

            // Call \"showMovies\" action in \"categories\" module with payload \"all\"
            \"categories/showMovies\": \"all\",

            // Call action without payload
            showNavigationButtons: null,
          },
        },
        {
            path: \"/login\",
            component: Login,
        }

        // Optional, per route guards are supported
        // More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
        beforeEnter: (to, from) => {
          if (to.props.passUser) {
             // Continue navigation
             return true;
          }

          // Reject the navigation
          return false;
        },
      },
    ];

    // Initialize Router
    // Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settings
    const router = createRouter(
      { routes },
      {
        // Optional settings below

        // Set first page to redirect to when there's no page to redirect back to
        routeBackFallbackPath: \"/login\",

        // Do something straight before navigation or adjust NS routing settings
        routeToCallback: (to, options) => {
          // For example, change page navigation transition for the vertical on iOS
          if (to.meta.isVertical) {
            options.transition = {
              name: \"fade\",
            };
          }
        },

        // Do something straight before navigation or adjust NS routing settings
        routeBackCallback: (_to, options) => {
          // Do something...
        },

        // Set a custom logger (console.log by default)
        logger: console.log,

        // Set custom frame, by default it's taken from @nativescript/core/ui/frame
        frame: Frame,
      }
    );

    // Register a global guard (optional)
    // You can also use global router.beforeResolve guard and router.afterEach hook
    router.beforeEach((to) => {
      // For example, verify per route access rules
      if (!canAccessRoute(to)) {
        return false;
      }

      return true;
    });

    // From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:
    this.$routeTo(\"/movies\", {
      // Clear History is a NativeScript setting
      clearHistory: true,
      
      // Route inside of custom Frame
      frame: \"myFrameId\",

      // Pass props to the page
      props: {
        movieId: 12,
      },
    });
    \n

    New hooks for pages

    \n

    You can use hooks directly on particular pages. It is discouraged to use them inside of mixins or components for the time being. Example below:

    \n
    <template>
        <Page>
        </Page>
    </template>

    <script>

    export default {
        name: 'movies',

        beforeRouteEnter(to, from, next) {
            // Do something before to enter to the route
            next((vm) => {
                // Do something once navigation is done
                // Instead of `this`, use `vm`
            });
        },

        beforeRouteLeave() {
            // Do something before to leave the route
            // You can use `this` inside of this hook
        },

        beforeRouteUpdate() {
            // Do something before to leave the route
            // before redirecting to another route with same path
            // You can use `this` inside of this hook
        },

        mounted() {
           // Output current route object with name, path etc.
           console.log(this.$route);
        },
    };
    </script>
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NS EventMapped asDescription
    navigatingFrombeforeRouteLeaveBefore user leaves the route
    navigatingTobeforeRouteEnterBefore user enters a route
    -beforeRouteUpdateBefore route is changed but view remains the same. This can happen when path is exactly the same but you change e.g. passed prop to the route. Please refer to Vue-Router docs for more details.
    navigatedTobeforeRouteEnterTo trigger it properly you need to access component instance. You can use next(vm => ...) callback within beforeRouteEnter(). Please check Vue-Router docs for more details.
    navigatedFrom-This event is tricky to control for developers. There is no exact mapping of it in the router. For store state cleanup use build-in meta dispatcher instead. For component state you could opt for using beforeRouteLeave().
    \n

    TypeScript Support

    \n

    If you need a TS support and it's not detected automatically in your project for some reason, you can use typings/shims.vue.d.ts to bring proper support in .vue files. You can specify it in your shims.vue.d.ts file (attention! Please ensure that path is relative to your node_modules directory):

    \n
    /// <reference path=\"./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts\" />
    \n

    API Differences to Web

    \n

    Vue Router compatibility

    \n

    This plugin aims for compatibility with Vue Router 3+ and Vue Router 4+. Both should be easily supported. Please refer to Vue Router Docs for more information.

    \n

    DOM & related hooks

    \n

    There are some limitations like lack of DOM accessibility and related hooks and guards.

    \n

    RouterLink Component

    \n

    There's a lack of component due to performance reasons.

    \n

    Passing props to pages

    \n

    All props are passed automatically to components. Therefore you don't need to use props: true in your routes list.

    \n

    Meta Dispatcher

    \n

    An additional option that allows you to dispatch actions to Vuex store directly from routes list using meta.store object. To utilize it you may need to define Vue.prototype.$store = store; after to register your Vue store.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Troubleshooting

    \n

    Please file an issue. You can use the template but it is not required. Just simply write what is your issue so we can try to reproduce and fix it.

    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":20}},"@nativescript/template-blank-react":{"name":"@nativescript/template-blank-react","version":"8.6.0","license":"Apache-2.0","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":1,"lastWeek":14,"lastMonth":523}},"@nativescript/mlkit-text-recognition":{"name":"@nativescript/mlkit-text-recognition","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-text-recognition

    \n
    npm install @nativescript/mlkit-text-recognition
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":332}},"nativescript-dev-xcode":{"name":"nativescript-dev-xcode","version":"0.5.0","license":"Apache-2.0","readme":"\n

    nativescript-dev-xcode

    \n\n

    \"Build

    \n

    Parser utility for xcodeproj project files

    \n

    Allows you to edit xcodeproject files and write them back out.

    \n

    Forked from: apache/cordova-node-xcode

    \n

    Example

    \n
    // API is a bit wonky right now
    var xcode = require('xcode'),
        fs = require('fs'),
        projectPath = 'myproject.xcodeproj/project.pbxproj',
        myProj = xcode.project(projectPath);

    // parsing is async, in a different process
    myProj.parse(function (err) {
        myProj.addHeaderFile('foo.h');
        myProj.addSourceFile('foo.m');
        myProj.addFramework('FooKit.framework');
       
        fs.writeFileSync(projectPath, myProj.writeSync());
        console.log('new project written');
    });
    \n

    Working on the parser

    \n

    If there's a problem parsing, you will want to edit the grammar under\nlib/parser/pbxproj.pegjs. You can test it online with the PEGjs online thingy\nat https://pegjs.org/online - I have had some mixed results though.

    \n

    Tests under the test/parser directory will compile the parser from the\ngrammar. Other tests will use the prebuilt parser (lib/parser/pbxproj.js).

    \n

    To rebuild the parser js file after editing the grammar, run:

    \n
    npm run pegjs\n
    \n

    (and be sure to restore the Apache license notice in\nlib/parser/pbxproj.js before committing)

    \n

    License

    \n

    Apache V2

    \n","downloadStats":{"lastDay":401,"lastWeek":2304,"lastMonth":9977}},"nativescript-bottom-navigation":{"name":"nativescript-bottom-navigation","version":"2.0.5","license":"Apache-2.0","readme":"

    Nativescript Material Bottom Navigation Bar

    \n

    Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.

    \n

    \"npm\" \"npm\" \"Build

    \n
    \n

    IMPORTANT: This package will be deprecated, this is the last release on this repository, the component will be moved to nativescript-material-components

    \n
    \n\"iOS\"\n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Usage with Javascript
      3. \n
    3. Usage with Angular
      4. \n
    4. Usage with Vue
      5. \n
    5. Css Styling
      6. \n
    6. API
      7. \n
    \n

    Prerequisites / Requirements

    \n

    You need the version of NS6 or later to use this plugin.

    \n

    Installation

    \n
    tns plugin add nativescript-bottom-navigation
    \n

    if you want to use the plugin with NS5 and above use the version 1.5.1

    \n
    tns plugin add nativescript-bottom-navigation@1.5.1
    \n

    BREAKING CHANGES

    \n
      \n
    • BottomNavigation class now is BottomNavigationBar
      • \n
    • NativescriptBottomNavigationModule now is NativeScriptBottomNavigationBarModule
      • \n
    • res:// should be used to reference icons in the tabs
      • \n
    • The prefix On of the Event interfaces was removed:\n
        \n
      • Example: OnTabPressedEventData now is TabPressedEventData
        • \n
      \n
      • \n
    • The prefix tab of Css properties was removed:\n
        \n
      • Example: tab-active-color now is active-color
        • \n
      \n
      • \n
    • The documentation was updated review it :D
      • \n
    \n

    NEW FEATURES

    \n
      \n
    • Badge now are supported using the method: showBadge(index, value)\n
        \n
      • NOTE: if you want to show a badge as a red dot no value should be passed to the function.
        • \n
      \n
      • \n
    \n

    Usage

    \n

    Before start using the plugin you need to add the icons for android & iOS in your App_Resources\u001d directory.

    \n

    XML

    \n

    You can set the tabs using the tabs property

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"nativescript-bottom-navigation\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              tabs=\"{{ tabs }}\"
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >    </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n
    import { EventData } from 'tns-core-modules/data/observable';
    import { Page } from 'tns-core-modules/ui/page';
    import {
      BottomNavigationTab,
      TabSelectedEventData,
    } from 'nativescript-bottom-navigation';

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: EventData) {
      // Get the event sender
      let page = <Page>args.object;
      page.bindingContext = {
        tabs: [
          new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
          new BottomNavigationTab({
            title: 'Second',
            icon: 'res://ic_view_list',
            isSelectable: false,
          }),
          new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }),
        ],
      };
    }

    export function tabSelected(args: TabSelectedEventData) {
      console.log('tab selected ' + args.newIndex);
    }
    \n

    or you can add the tabs directly in your xml view

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"nativescript-bottom-navigation\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >
              <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
              <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
              <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
            </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n

    Angular

    \n

    First you need to include the NativeScriptBottomNavigationBarModule in your app.module.ts\u001b`

    \n
    import { NativeScriptBottomNavigationBarModule} from \"nativescript-bottom-navigation/angular\";

    @NgModule({
        imports: [
            NativeScriptBottomNavigationBarModule
        ],
        ...
    })
    \n
    <GridLayout rows=\"*, auto\">
      <StackLayout row=\"0\">
        <label text=\"content\"></label>
      </StackLayout>
      <BottomNavigationBar
        [tabs]=\"tabs\"
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
      >    </BottomNavigationBar>
    </GridLayout>
    \n

    or you can declare the BottomNavigationTab in your html directly

    \n
    <GridLayout rows=\"*, auto\">
      <StackLayout row=\"0\">
        <label text=\"content\"></label>
      </StackLayout>
      <BottomNavigationBar
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        (tabSelected)=\"onBottomNavigationTabSelected($event)\"
        (tabPressed)=\"onBottomNavigationTabPressed($event)\"
        row=\"1\"
      >
        <BottomNavigationTab
          title=\"First\"
          icon=\"res://ic_home\"
        >    </BottomNavigationTab>
        <BottomNavigationTab
          title=\"Second\"
          icon=\"res://ic_view_list\"
          [isSelectable]=\"false\"
        >    </BottomNavigationTab>
        <BottomNavigationTab
          title=\"Third\"
          icon=\"res://ic_menu\"
        >    </BottomNavigationTab>
      </BottomNavigationBar>
    </GridLayout>
    \n

    Vue

    \n

    If you want to use this plugin with Vue, do this in your app.js or main.js:

    \n
    import BottomNavigationBar from 'nativescript-bottom-navigation/vue';

    Vue.use(BottomNavigationBar);
    \n

    This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

    \n
    <GridLayout rows=\"*, auto\">
      <StackLayout row=\"0\">
        <label text=\"content\"></label>
      </StackLayout>
      <BottomNavigationBar
        activeColor=\"red\"
        inactiveColor=\"yellow\"
        backgroundColor=\"black\"
        @tabSelected=\"onBottomNavigationTabSelected\"
        row=\"1\"
      >
        <BottomNavigationTab title=\"First\" icon=\"ic_home\" />
        <BottomNavigationTab
          title=\"Second\"
          icon=\"ic_view_list\"
          isSelectable=\"false\"
        />
        <BottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
      </BottomNavigationBar>
    </GridLayout>
    \n

    You can find more information of how to use nativescript plugins with Vue Here!

    \n

    CSS Styling

    \n

    You can also use your css file to set or change the activeColor\u001d, inactiveColor & backgroundColor of the Bottom Navigation Bar.

    \n
    .botom-nav {
      active-color: green;
      inactive-color: black;
      background-color: blue;
    }
    \n

    API

    \n
      \n
    1. BottomNavigationBar
      2. \n
    2. BottomNavigationTab
      3. \n
    \n
      \n
    • Properties (bindable): Properties settable through XML/HTML
      • \n
    • Properties (internal): Properties accessible through JS/TS instance
      • \n
    • Events: Event properties settable thew XML/HTML
      • \n
    \n

    Bottom Navigation Bar

    \n

    Properties (bindable)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
    titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
    inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
    backgroundColorfalse"white"StringColor of the BottomNavigation background
    \n

    Properties (internal)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    selectedTabIndex0NumberIndex of the selected tab
    titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColor"black"StringColor of the BottomNavigationTab when it's selected
    inactiveColor"gray"StringColor of the BottomNavigationTab when it's not selected
    backgroundColor"white"StringColor of the BottomNavigation background
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
    tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
    tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    selectTab(index: number)voidSelect a tab programmatically
    showBadge(index: number, value?: number)voidShow a badge for an specific tab
    \n

    Bottom Navigation Tab

    \n

    Properties (bindable)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    titletruenullstringTitle of the tab
    icontruenullstringIcon of the tab
    isSelectablefalsetruebooleanDetermine if the tab can be selected or not
    \n","downloadStats":{"lastDay":7,"lastWeek":27,"lastMonth":210}},"@nativescript/firebase-messaging":{"name":"@nativescript/firebase-messaging","version":"3.2.0","license":"Apache-2.0","readme":"

    @nativescript/firebase-messaging

    \n

    Contents

    \n\n

    Intro

    \n

    This plugin allows you to use Firebase Cloud Messaging in your NativeScript app.

    \n

    \"image\"

    \n

    Using FCM, you can notify a client app that new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload of up to 4 KB to a client app.

    \n

    FCM messages can be sent to real Android/iOS devices and Android emulators. iOS simulators however do not handle cloud messages.

    \n

    Common use cases for handling messages could be:

    \n\n

    Set up your app for Firebase

    \n

    You need to set up your app for Firebase before you can enable Firebase Messaging. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.

    \n

    Add the Firebase Cloud Messaging SDK to your app

    \n

    To add the Firebase Cloud Messaging SDK to your app follow these steps:

    \n
      \n
    1. Install the @nativescript/firebase-messaging plugin by running the following command in the root directory of your project.
      2. \n
    \n
    npm install @nativescript/firebase-messaging
    \n
      \n
    1. Add the SDK by importing the @nativescript/firebase-messaging module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-messaging';
    \n

    iOS: Requesting permissions

    \n

    iOS prevents messages containing notification (or 'alert') payloads from being displayed unless you have received explicit permission from the user.

    \n

    To request permission, call the requestPermission method on the Messaging class instance returned by firebase().messaging(). This method triggers a native permission dialog requesting the user's permission. The user can choose to allow or deny the request.

    \n
    import { firebase } from '@nativescript/firebase-core';
    import { AuthorizationStatus } from '@nativescript/firebase-messaging-core';

    async function requestUserPermission() {
    \tconst authStatus = await firebase()
    \t\t.messaging()
    \t\t.requestPermission({
    \t\t\tios: {
    \t\t\t\talert: true,
    \t\t\t},
    \t\t});
    \tconst enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;

    \tif (enabled) {
    \t\tconsole.log('Authorization status:', authStatus);

    \t\tconst didRegister = await firebase().messaging()
                    .registerDeviceForRemoteMessages();
    \t}
    }
    \n

    Android: Requesting permissions

    \n

    On Android, you do not need to request user permission. This method can still be called on Android devices; however, and will always resolve successfully.

    \n

    Firebase Cloud Messages types and how the user app affects delivery

    \n

    FCM allows you to send the following two types of messages:

    \n\n

    How these messages are delivered depends on whether the app is in the foreground or background.

    \n

    Notifications messages delivery and app state

    \n

    The following table shows how the notification messages are delivered to the user app depending on the app state.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Notification messages typesApp state
    ForegroundBackground
    Notification onlyDisplayed to the user by the FCM SDKPassed to the onMessage handler for the app code to handle
    Notification + optional dataApp receives a message object with both payloads available.App receives the notification payload in the notification tray, and when the user taps on the notification, the data payload is passed to the onMessage handler
    \n

    Always show notifications in the foreground

    \n

    If you want to always display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification, set the showNotificationsWhenInForeground property of the Messaging instance to true:

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().showNotificationsWhenInForeground = true;
    \n

    Listen to notification messages in the foreground

    \n

    Since notification messages are displayed automatically(see Notifications messages delivery and app state) when the app is in the background, sometimes you may want to handle the display of the message manually. To listen to a message being received when the app is in the foreground or manually handle the display of the message when the app is in the background, pass a callback function to the onMessage method of the instance of Messaging class. The callback will. Code executed via this handler can interact with your application (e.g. updating the state or UI).

    \n

    For example, you could display a new Alert each time a message is delivered:

    \n
    import { alert } from '@nativescript/core';
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.messaging()
    \t.onMessage(async (remoteMessage) => {
    \t\talert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    \t});
    \n

    Data-only messages delivery and app state

    \n

    The following table shows how the data messages are delivered to the user app depending on the app state.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ForegroundBackground
    App receives the data payload in a callback function passed to the onMessage method.App receives the data payload in a callback function passed to the onMessage method.
    \n
      \n
    • When the client app is not in the foreground, both Android & iOS treat the message as low priority and will ignore it (i.e. no event will be sent). To allow data-only messages to trigger, set the payload priority property to high for Android and the contentAvailable property to true for iOS.
      • \n
    \n

    For example, if using the Node.js firebase-admin package to send a message, you would set the payload as follows:

    \n
    admin.messaging().sendToDevice(
    \t[], // device fcm tokens...
    \t{
    \t\tdata: {
    \t\t\towner: JSON.stringify(owner),
    \t\t\tuser: JSON.stringify(user),
    \t\t\tpicture: JSON.stringify(picture),
    \t\t},
    \t},
    \t{
    \t\t// Required for background/quit data-only messages on iOS
    \t\tcontentAvailable: true,
    \t\t// Required for background/quit data-only messages on Android
    \t\tpriority: 'high',
    \t}
    );
    \n
      \n
    • For iOS, in addition to setting the contentAvailable property to true, the payload must contain appropriate APNs headers. For more information about the APN headers, see Sending Notification Requests to APNs. For example, if using the Node.js firebase-admin package to send a message, the payload would look like this:
      • \n
    \n
    admin.messaging().send({
    \tdata: {
    \t\t//some data
    \t},
    \tapns: {
    \t\tpayload: {
    \t\t\taps: {
    \t\t\t\tcontentAvailable: true,
    \t\t\t},
    \t\t},
    \t\theaders: {
    \t\t\t'apns-push-type': 'background',
    \t\t\t'apns-priority': '5',
    \t\t\t'apns-topic': '', // your app bundle identifier
    \t\t},
    \t},
    \t//must include token, topic, or condition
    \t//token: //device token
    \t//topic: //notification topic
    \t//condition: //notification condition
    });
    \n

    Send messages from your servers

    \n

    The Cloud Messaging module provides the tools required to enable you to send custom messages directly from your servers. For example, you could send an FCM message to a specific device when a new chat message is saved to your database and display a notification, or update local device storage, so the message is instantly available.

    \n

    Firebase provides several SDKs for that purpose in different languages such as Node.JS, Java, Python, C# and Go. It also supports sending messages over HTTP. These methods allow you to send messages directly to your user's devices via the FCM servers.

    \n

    Send messages using user device tokens

    \n

    To send a message to a device, you must access its unique token. A token is automatically generated by the device and can be accessed using the Cloud Messaging module. The token should be saved on your servers and should be easily accessible when required.

    \n

    The examples below use a Cloud Firestore database to store and manage the tokens, and Firebase Authentication to manage the user's identity. You can however use any data store or authentication method of your choice.

    \n

    Saving tokens

    \n

    Once your application has started, you can call the getToken method on the Messaging instance to get the unique device token. If you are using a different push notification provider, such as Amazon SNS, you will need to call getAPNSToken on iOS:

    \n
    import { firebase } from '@nativescript/firebase-core';
    import '@nativescript/firebase-messaging';
    import { FieldValue } from '@nativescript/firebase-auth';
    import '@nativescript/firebase-firestore';

    async function saveTokenToDatabase(token) {
      // Assume user is already signed in
      const userId = firebase().auth().currentUser.uid;

      // Add the token to the users datastore
      await firebase().firestore()
        .collection('users')
        .doc(userId)
        .update({
          tokens: FieldValue.arrayUnion(token),
        });
    }

    // Get the device token
        firebase().messaging()
          .getToken()
          .then(token => {
            return saveTokenToDatabase(token);
          });

        // If using other push notification providers (ie Amazon SNS, etc)
        // you may need to get the APNs token instead for iOS:
        //  if (global.isIOS) {
        //      saveTokenToDatabase(firebase().messaging().getAPNSToken());
        // }


        // Listen to whether the token changes
        firebase().messaging().onToken(token => {
          saveTokenToDatabase(token);

    }
    \n

    The above code snippet stores the device FCM token on a remote database.

    \n

    Inside the saveTokenToDatabase method, we store the token in the current user's document. Notice that the token is being added via the FieldValue.arrayUnion method. A user can have more than one token (for example using 2 devices) so it's important to ensure that we store all tokens in the database and the FieldValue.arrayUnion allows us to do that.

    \n

    Using the stored tokens

    \n

    With the tokens stored in a secure data store, we can now send messages via FCM to those devices.

    \n
    \n

    Note: The following example uses the Node.JS firebase-admin package to send messages to our devices. However, you can use any of the SDKs listed above can be used.

    \n
    \n

    Go ahead and set up the firebase-tools library on your server environment. Once setup, our script needs to perform two actions:

    \n
      \n
    1. Fetch the tokens required to send the message.
      2. \n
    2. Send a data payload to the devices that the tokens are registered for.\nImagine our application being similar to Instagram. Users can upload pictures, and other users can "like" those pictures. Each time a post is liked, we want to send a message to the user that uploaded the picture. The code below simulates a function that is called with all of the information required when a picture is liked:
      3. \n
    \n
    // Node.js
    var admin = require('firebase-admin');

    // ownerId - who owns the picture someone liked
    // userId - id of the user who liked the picture
    // picture - metadata about the picture

    async function onUserPictureLiked(ownerId, userId, picture) {
    \t// Get the owners details
    \tconst owner = admin.firestore().collection('users').doc(ownerId).get();

    \t// Get the users details
    \tconst user = admin.firestore().collection('users').doc(userId).get();

    \tawait admin.messaging().sendToDevice(
    \t\towner.tokens, // ['token_1', 'token_2', ...]
    \t\t{
    \t\t\tdata: {
    \t\t\t\towner: JSON.stringify(owner),
    \t\t\t\tuser: JSON.stringify(user),
    \t\t\t\tpicture: JSON.stringify(picture),
    \t\t\t},
    \t\t},
    \t\t{
    \t\t\t// Required for background/quit data-only messages on iOS
    \t\t\tcontentAvailable: true,
    \t\t\t// Required for background/quit data-only messages on Android
    \t\t\tpriority: 'high',
    \t\t}
    \t);
    }
    \n

    Handle tokens when authenticating users

    \n

    Firebase Cloud Messaging tokens are associated with the instance of the installed app. By default, only token expiration or uninstalling/reinstalling the app will generate a fresh token.

    \n

    This means that by default, if two users login into your app from the same device, the same FCM token will be used for both users. Usually, this is not what you want, so you must take care to cycle the FCM token at the same time you handle user logout/login.

    \n

    How and when you invalidate a token and generate a new one will be specific to your project, but a common pattern is to delete the FCM token during logout and update your back end to remove it. Then, you fetch the FCM token during login and update your backend systems to associate the new token with the logged-in user.

    \n

    Note that when a token is deleted by calling the deleteToken method, it is immediately and permanently invalid.

    \n

    Send messages via topics

    \n

    Topics are mechanisms that allow a device to subscribe and unsubscribe from named PubSub channels, all managed via FCM. Rather than sending a message to a specific device by FCM token, you can instead send a message to a topic and any devices subscribed to that topic will receive the message.

    \n

    Topics allow you to simplify FCM server integration as you do not need to keep a store of device tokens. There are, however, some things to keep in mind about topics:

    \n
      \n
    • Messages sent to topics should not contain sensitive or private information.
      • \n
    • Do not create a topic for a specific user to subscribe to.
      • \n
    • Topic messaging supports unlimited subscriptions for each topic.
      • \n
    • One app instance can be subscribed to no more than 2000 topics.
      • \n
    • The frequency of new subscriptions is rate-limited per project. If you send too many subscription requests in a short period, FCM servers will respond with a 429 RESOURCE_EXHAUSTED ("quota exceeded") response. Retry with exponential backoff.
      • \n
    • A server integration can send a single message to multiple topics at once. However, this is limited to 5 topics.
      • \n
    \n

    To learn more about how to send messages to devices subscribed to topics, see Topic messaging on Android or Send messages to topics on Apple platforms.

    \n

    Subscribing to topics

    \n

    To subscribe a device to a topic, call the subscribeToTopic method on the Messsaging instance with the topic name (must not include ´/´):

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.messaging()
    \t.subscribeToTopic('weather')
    \t.then(() => console.log('Subscribed to topic!'));
    \n

    Unsubscribing to topics

    \n

    To unsubscribe from a topic, call the unsubscribeFromTopic method with the topic name:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.messaging()
    \t.unsubscribeFromTopic('weather')
    \t.then(() => console.log('Unsubscribed fom the topic!'));
    \n

    Send messages to a user device via topics

    \n

    Topics are mechanisms that allow a device to subscribe and unsubscribe from named PubSub channels, all managed via FCM. Rather than sending a message to a specific device by FCM token, you can instead send a message to a topic and any devices subscribed to that topic will receive the message.

    \n

    Topics allow you to simplify FCM server integration as you do not need to keep a store of device tokens. There are, however, some things to keep in mind about topics:

    \n
      \n
    • Messages sent to topics should not contain sensitive or private information.
      • \n
    • Do not create a topic for a specific user to subscribe to.
      • \n
    • Topic messaging supports unlimited subscriptions for each topic.
      • \n
    • One app instance can be subscribed to no more than 2000 topics.
      • \n
    • The frequency of new subscriptions is rate-limited per project. If you send too many subscription requests in a short period, FCM servers will respond with a 429 RESOURCE_EXHAUSTED ("quota exceeded") response.
      • \n
    • A server integration can send a single message to multiple topics at once. However, this is limited to 5 topics.
      • \n
    \n

    To learn more about how to send messages to devices subscribed to topics, see Topic messaging on Android or Send messages to topics on Apple platforms.

    \n

    Subscribing to topics

    \n

    To subscribe a device to a topic, call the subscribeToTopic method on the Messaging instance with the topic name (must not include /):

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.messaging()
    \t.subscribeToTopic('weather')
    \t.then(() => console.log('Subscribed to topic!'));
    \n

    Unsubscribing from topics

    \n

    To unsubscribe from a topic, call the unsubscribeFromTopic method with the topic name:

    \n
    import { firebase } from '@nativescript/firebase-core';

    firebase()
    \t.messaging()
    \t.unsubscribeFromTopic('weather')
    \t.then(() => console.log('Unsubscribed fom the topic!'));
    \n

    Send messages to a user device via topics

    \n

    Using the firebase-admin Admin SDK as an example, we can send a message to devices subscribed to a topic(weather):

    \n
    const admin = require('firebase-admin');

    const message = {
    \tdata: {
    \t\ttype: 'warning',
    \t\tcontent: 'A new weather warning has been created!',
    \t},
    \ttopic: 'weather',// topic name
    };

    admin
    \t.messaging()
    \t.send(message)
    \t.then((response) => {
    \t\tconsole.log('Successfully sent message:', response);
    \t})
    \t.catch((error) => {
    \t\tconsole.log('Error sending message:', error);
    \t});
    \n

    Use conditions to send a messages to more than one topic at once

    \n

    To send a message to a combination of topics, specify a condition, which is a boolean expression that specifies the target topics. For example, the following condition will send messages to devices that are subscribed to weather and either news or traffic tpoics:

    \n
    condition: \"'weather' in topics && ('news' in topics || 'traffic' in topics)\";
    \n

    To send a message to this condition, replace the topic key with the condition:

    \n
    const admin = require('firebase-admin');

    const message = {
    \tdata: {
    \t\tcontent: 'New updates are available!',
    \t},
    \tcondition: \"'weather' in topics && ('news' in topics || 'traffic' in topics)\",
    };

    admin
    \t.messaging()
    \t.send(message)
    \t.then((response) => {
    \t\tconsole.log('Successfully sent message:', response);
    \t})
    \t.catch((error) => {
    \t\tconsole.log('Error sending message:', error);
    \t});
    \n

    Send an image in the notification payload

    \n

    Both the Notifications composer and the FCM API support image links in the message payload.

    \n

    iOS-specific options

    \n

    To successfully send an image using the Admin SDK, set the ApnsConfig options with the apns property for iOS:

    \n
    const payload = {
    \tnotification: {
    \t\tbody: 'This is an FCM notification that displays an image!',
    \t\ttitle: 'FCM Notification',
    \t},
    \tapns: {
        payload: {
          aps: {
            'mutable-content': 1,
          },
        },
        fcmOptions: {
          imageUrl: 'image-url',
        },
      },
    };
    \n
    \n

    Note: To see the list of available configuration for iOS, check out the official Firebase documentation.

    \n
    \n

    Android-specific options

    \n

    Similarly to iOS, some configurations specific to Android are needed:

    \n
    const payload = {
    \tnotification: {
    \t\tbody: 'This is an FCM notification that displays an image!',
    \t\ttitle: 'FCM Notification',
    \t},
    \tandroid: {
    \t\tnotification: {
    \t\t\timage: 'image-url',
    \t\t},
    \t},
    };
    \n
    \n

    Note: For more information about sending an image on Android, see Send an image in the notification payload.

    \n
    \n

    Send one image notification for both iOS and Android

    \n

    It's possible to send one notification that will be delivered to both platforms using the Admin SDK:

    \n
    const admin = require('firebase-admin');

    // Create a list containing up to 500 registration tokens.
    // These registration tokens come from the client FCM SDKs.
    const registrationTokens = ['YOUR_REGISTRATION_TOKEN_1', 'YOUR_REGISTRATION_TOKEN_2'];

    const message = {
    \ttokens: registrationTokens,
    \tnotification: {
    \t\tbody: 'This is an FCM notification that displays an image!',
    \t\ttitle: 'FCM Notification',
    \t},
    \tapns: {
        payload: {
          aps: {
            'mutable-content': 1,
          },
        },
        fcmOptions: {
          imageUrl: 'image-url',
        },
      },
      android: {
        notification: {
          imageUrl: 'image-url',
        },
      },
    };

    admin
    \t.messaging()
    \t.send(message)
    \t.then((response) => {
    \t\tconsole.log('Successfully sent message:', response);
    \t})
    \t.catch((error) => {
    \t\tconsole.log('Error sending message:', error);
    \t});
    \n

    Android: Configure Push notification icon and color

    \n

    If you want to use a specific icon and color for the push notification, configure them in in the App_Resources/Android/src/main/AndroidManifest.xml file:

    \n
    <meta-data android:name=\"com.google.firebase.messaging.default_notification_icon\"
      android:resource=\"@drawable/your_drawable_name\" />
    <meta-data android:name=\"com.google.firebase.messaging.default_notification_color\"
      android:resource=\"@color/ns_primary\" />
    \n

    iOS: Enable the support for the delivery of push notifications in the background in Xcode

    \n

    Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):\n\"push-xcode-config\"

    \n
    \n

    Note: Without this enabled you will receive push messages in the foreground, but NOT in the background.

    \n
    \n

    Copy the entitlements file

    \n

    The previous step created the file platforms/ios/YourAppName/Resources/YourAppName.entitlements.\nTo prevent the file from being deleted when you run ns clean, move and rename it to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents). The relevant content for background push in that file is:

    \n
    \t<key>aps-environment</key>
    \t<string>development</string>
    \n

    Allow processing received a background push notification

    \n

    Open app/App_Resources/iOS/Info.plist and add the following code at the bottom:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>remote-notification</string>
    </array>
    \n\n

    API

    \n

    Messaging class

    \n

    android

    \n
    import { firebase } from '@nativescript/firebase-core';

    messagingAndroid: com.google.firebase.messaging.FirebaseMessaging = firebase().messaging().android;
    \n

    A read-only property that returns the instance of the Messaging class for Android.

    \n
    \n

    ios

    \n
    import { firebase } from '@nativescript/firebase-core';

    messagingIos: MessagingCore = firebase().messaging().ios;
    \n

    A read-only property that returns the instance of the Messaging class for iOS.

    \n
    \n

    app

    \n
    import { firebase } from '@nativescript/firebase-core';
    messageApp: FirebaseApp = firebase().messaging().app;
    \n

    A read-only property that returns the instance of the FirebaseApp class associated with this Cloud Messaging instance.

    \n
    \n

    isAutoInitEnabled

    \n
    import { firebase } from '@nativescript/firebase-core';
    isAutoInitEnabled: boolean = firebase().messaging().isAutoInitEnabled;
    // or
    firebase().messaging().isAutoInitEnabled = true;
    \n

    Determines whether to enable or disable auto-initialization of Firebase Cloud Messaging. For more information about this property for iOS, see autoInitEnabled.

    \n
    \n

    showNotificationsWhenInForeground

    \n
    import { firebase } from '@nativescript/firebase-core';
    showNotificationsWhenInForeground: boolean = firebase().messaging().showNotificationsWhenInForeground;
    // or
    firebase().messaging().showNotificationsWhenInForeground = true;
    \n

    Allows you to always display notifications while the application is in the foreground without sending additional parameters/data when sending the push notification

    \n
    \n

    isDeviceRegisteredForRemoteMessages

    \n
    import { firebase } from '@nativescript/firebase-core';
    isDeviceRegisteredForRemoteMessages: boolean = firebase().messaging().isDeviceRegisteredForRemoteMessages;
    \n

    A property that returns a boolean value indicating whether the app is registered to receive remote notifications or not.

    \n
    \n

    getToken()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().getToken()
    \t.then((token: string) => {
    \t\tconsole.log('Token: ', token);
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n

    Gets the user's device token. For more information, see getToken()

    \n
    \n

    getAPNSToken()

    \n
    import { firebase } from '@nativescript/firebase-core';
    aPNSToken: string | null = firebase().messaging().getAPNSToken()
    \n

    Returns an Apple Push Notification service (APNs) token for the app’s current device. For more information, see apnsToken.

    \n
    \n

    hasPermission()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().hasPermission()
    \t.then((status: AuthorizationStatus) => {
    \t\tconsole.log('Authorization status: ', status);
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n

    Checks if the app, on iOS, has permission to send notifications to the user.

    \n
    \n

    onMessage()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().onMessage(listener);
    \n

    Registers a callback function that is invoked when a new message is received.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    listener(message: RemoteMessage) => anyA callback function that is invoked when a new message is received
    \n
    \n

    onNotificationTap()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().onNotificationTap(listener);
    \n

    Registers a callback function that is invoked when a user taps on a notification.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    listener(message: RemoteMessage) => anyA callback function that is invoked when a new message is received
    \n
    \n

    onToken()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().onToken(listener);
    \n

    Registers a callback function that is invoked when a user's device changes its registration token.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    listener(token: string) => anyA callback function that is invoked when
    \n
    \n

    registerDeviceForRemoteMessages()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().registerDeviceForRemoteMessages()
    \t.then(() => {
    \t\tconsole.log('Device registered for remote messages');
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n
    \n

    requestPermission()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().requestPermission(permissions)
    \t.then((status: AuthorizationStatus) => {
    \t\tconsole.log('Authorization status: ', status);
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    permissionsPermissionsAn object containing the permissions to request.
    \n
    \n

    subscribeToTopic()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().subscribeToTopic(topic)
    \t.then(() => {
    \t\tconsole.log('Subscribed to topic');
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n

    For the description of this method, visit subscribeToTopic() on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    topicstringThe name of the topic to subscribe to.
    \n
    \n

    unsubscribeFromTopic()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().unsubscribeFromTopic(topic)
    \t.then(() => {
    \t\tconsole.log('Unsubscribed from topic');
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n

    For the description of this method, visit unsubscribeToTopic() on the Firebase website.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    topicstringThe name of the topic to unsubscribe from.
    \n
    \n

    unregisterDeviceForRemoteMessages()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().unregisterDeviceForRemoteMessages()
    \t.then(() => {
    \t\tconsole.log('Device unregistered for remote messages');
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n
    \n

    deleteToken()

    \n
    import { firebase } from '@nativescript/firebase-core';
    firebase().messaging().deleteToken()
    \t.then(() => {
    \t\tconsole.log('Token deleted');
    \t}).catch((error: Error) => {
    \t\tconsole.log('Error: ', error);
    \t});
    \n

    For the description of the deleteToken method, visit deleteToken() on the Firebase website.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":198,"lastWeek":1044,"lastMonth":6405}},"@angelengineering/flashlight":{"name":"@angelengineering/flashlight","version":"1.1.0","license":"Apache-2.0","readme":"

    @angelengineering/flashlight

    \n

    Nativescript flashlight \"apple\" \"android\"

    \n

    This plugin allows you to enable/disable the flashlight/torch on your iOS/Android device.

    \n
    ns plugin add @angelengineering/flashlight
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin repository.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/flashlight.ts.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import { Flashlight } from '@angelengineering/flashlight';
    \n

    Create filepicker instance

    \n

    TypeScript

    \n
    Flashlight.isOn; //boolean
    Flashlight.isAvailable; //boolean
    Flashlight.toggle(); //boolean
    Flashlight.enable(); //boolean
    Flashlight.disable(); //boolean
    \n

    Important Note

    \n

    In general, this util should not be used when an application is using the camera ( video preview, photo taking, video recording, etc. ) as it will throw an error trying to control the flashlight at the same time that the camera hardware is active.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":2,"lastMonth":141}},"@nativescript/mlkit-object-detection":{"name":"@nativescript/mlkit-object-detection","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-object-detection

    \n
    npm install @nativescript/mlkit-object-detection
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":4,"lastWeek":5,"lastMonth":328}},"@nativescript-community/push":{"name":"@nativescript-community/push","version":"1.1.11","license":"Apache-2.0","readme":"

    [npm-image]:http://img.shields.io/npm/v/@nativescript-community/push.svg\n[npm-url]:https://npmjs.org/package/@nativescript-community/push\n[downloads-image]:http://img.shields.io/npm/dm/@nativescript-community/push.svg

    \n

    This plugin is an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

    \n

    Thanks to Eddy for allowing this!

    \n

    Android

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

    \n

    There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

    \n

    iOS

    \n

    Enable push support in Xcode

    \n

    Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

    \n\"Push\n
    \n

    Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

    \n
    \n

    Copy the entitlements file

    \n

    The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

    \n
    \t<key>aps-environment</key>
    \t<string>development</string>
    \n
    \n

    Note that the filename should be app.entitlements, see the path above.

    \n
    \n

    Configure push notifications in Info.plist

    \n

    Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

    \n
    <key>UseExternalPushProvider</key>
    <true/>
    \n

    And to allow processing when a background push is received, add this as well:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>remote-notification</string>
    </array>
    \n

    The end result should look like this.

    \n

    \n

    API

    \n

    init

    \n

    In your main application JS file, you must call init().

    \n
    import * as messaging from '@nativescript-community/push';
    messaging.init();
    \n

    areNotificationsEnabled

    \n

    On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

    \n
    import * as messaging from \"@nativescript-community/push\";

    console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
    \n

    registerForPushNotifications

    \n

    The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

    \n
    import * as messaging from \"@nativescript-community/push\";

    messaging.registerForPushNotifications({
      onPushTokenReceivedCallback: (token: string): void => {
        console.log(\"Firebase plugin received a push token: \" + token);
      },

      onMessageReceivedCallback: (message: messaging.Message) => {
        console.log(\"Push message received:\", message));
      },

      // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
      showNotifications: true,

      // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
      showNotificationsWhenInForeground: true
    }).then(() => console.log(\"Registered for push\"));
    \n
    \n

    Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

    \n
    \n
    \n

    With the token received in onPushTokenReceivedCallback you can send a notification to this device.

    \n
    \n

    getCurrentPushToken

    \n

    If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

    \n
    import * as messaging from \"@nativescript-community/push\";

    messaging.getCurrentPushToken()
        .then(token => console.log(`Current push token: ${token}`));
    \n

    Interactive notifications (iOS only for now)

    \n

    To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

    \n

    Each action has either type button or input, and you can set options to do any or all of:

    \n
      \n
    • Launch the app: foreground.
      • \n
    • Only allow the action when the device is unlocked: authenticationRequired.
      • \n
    • Make the text red to indicate something will be removed/deleted/killed: destructive.
      • \n
    \n

    Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

    \n

    \"Interactive \"Interactive \"Interactive \"Interactive

    \n
    import * as messaging from \"@nativescript-community/push\";

    const model = new messaging.PushNotificationModel();
    model.iosSettings = new messaging.IosPushSettings();
    model.iosSettings.badge = false;
    model.iosSettings.alert = true;

    model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
    model.iosSettings.interactiveSettings.actions = [
      {
        identifier: \"OPEN_ACTION\",
        title: \"Open the app (if closed)\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground
      },
      {
        identifier: \"AUTH\",
        title: \"Open the app, but only if device is not locked with a passcode\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply without opening the app\",
        type: \"input\",
        submitLabel: \"Fire!\",
        placeholder: \"Load the gun...\"
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply and open the app\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground,
        type: \"input\",
        submitLabel: \"OK, send it\",
        placeholder: \"Type here, baby!\"
      },
      {
        identifier: \"DELETE_ACTION\",
        title: \"Delete without opening the app\",
        options: messaging.IosInteractiveNotificationActionOptions.destructive
      }
    ];

    model.iosSettings.interactiveSettings.categories = [{
      identifier: \"GENERAL\"
    }];

    model.onNotificationActionTakenCallback = (actionIdentifier: string, message: messaging.Message) => {
      console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
    };

    messaging.registerForInteractivePush(model);
    \n

    To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

    \n
    {
      \"aps\": {
        \"alert\": {
          \"title\": \"Realtime Custom Push Notifications\",
          \"subtitle\": \"Now with iOS 10 support!\",
          \"body\": \"Add multimedia content to your notifications\"
        },
        \"sound\": \"default\",
        \"badge\": 1,
        \"category\": \"GENERAL\",
        \"showWhenInForeground\": true,
        \"data\": {
          \"foo\": \"bar\"
        }
      }
    }
    \n
    \n

    IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

    \n
    \n

    Testing push notifications

    \n

    iOS

    \n

    For testing notifications on iOS the easiest tool I found is Pusher:

    \n\"Pusher\"/\n

    Android

    \n

    For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

    \n

    \"Postman \"Postman

    \n","downloadStats":{"lastDay":0,"lastWeek":5,"lastMonth":209}},"@nativescript/mlkit-pose-detection":{"name":"@nativescript/mlkit-pose-detection","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-pose-detection

    \n
    npm install @nativescript/mlkit-pose-detection
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":322}},"nativescript-textdrawable":{"name":"nativescript-textdrawable","version":"1.0.2","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-textdrawable

    \n

    ##Usage

    \n
    import {TextDrawable} from 'nativescript-textdrawable'
    var image = new TextDrawable();
    \n

    Text to display

    \n

    image.text = 'O'

    \n

    Text color

    \n

    image.textColor = 'white' //Color can be set using hex || short hex || name || arbg

    \n

    Font Size

    \n

    image.fontSize = 75

    \n

    Image width

    \n

    image.width = 100

    \n

    Image height

    \n

    image.height = 100

    \n

    Border

    \n

    image.withBorder = 5

    \n

    Uppercase

    \n

    image.toUpperCase = true

    \n

    Background Color

    \n

    image.bgColor = red //Color can be set using hex || short hex || name || arbg ... Random color is used if unset

    \n

    Bold

    \n

    image.bold = true

    \n

    Type / Shape

    \n

    Retangle\nimage.type = 'rect'

    \n

    Round\nimage.type = 'round'

    \n

    Round Rectangle

    \n

    image.type = 'roundRect'

    \n

    image.radius = 30 //default 10

    \n

    ###Xml markup settings

    \n

    IMPORTANT: Make sure you include xmlns:td="nativescript-textdrawable" on the Page element

    \n

    e.g\n<td:TextDrawable width="75" height="75" text="of" textColor="white" toUpperCase="true" withBorder="1" type="round" bgColor="#2196F3"/>

    \n

    ##Screenshot

    \n

    \"ss\"

    \n","downloadStats":{"lastDay":0,"lastWeek":4,"lastMonth":15}},"nativescript-xmpp-client":{"name":"nativescript-xmpp-client","version":"1.2.0","license":"MIT","readme":"

    An XMPP websocket client plugin for Nativescript

    \n

    Installation

    \n

    tns install nativescript-xmpp-client

    \n

    Usage

    \n
    import {Client, IQ} from \"nativescript-xmpp-client\";

    ....
       
           var client = new Client({
                   websocket: {url: 'ws://127.0.0.1:5280'},
                   jid: 'client2@127.0.0.1',
                   password: 'secret'
               });
               
           client.on('online', function (data) {
               //Request roaster
               client1.send(new IQ({from: data.jid, type: 'get', id: 'rand'}).c('query', {xmlns: 'jabber:iq:roster'}));
           });
           
           client.on('stanza', function (stanza) {
               console.log(stanza.root().toString());
           });
               
           client.on('error', function (error) {
               console.log('client2', error)
           })
    \n","downloadStats":{"lastDay":5077,"lastWeek":35219,"lastMonth":153838}},"@nativescript/mlkit-selfie-segmentation":{"name":"@nativescript/mlkit-selfie-segmentation","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-selfie-segmentation

    \n
    npm install @nativescript/mlkit-selfie-segmentation
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":295}},"cmbsdk-nativescript":{"name":"cmbsdk-nativescript","version":"1.2.271","license":"SEE LICENSE IN LICENSE","readme":"

    Nativescript Cognex Mobile Barcode Scanner SDK

    \n

    Documentation and integration info

    \n

    Nativescript cmbSDK integration info:

    \n

    Nativescript cmbSDK Documentation

    \n

    API Methods

    \n

    All of the API methods, usage and examples can be found here.

    \n

    Changelog

    \n

    Detailed changelog can be found on our developer network site

    \n","downloadStats":{"lastDay":2,"lastWeek":11,"lastMonth":126}},"@angelengineering/filepicker":{"name":"@angelengineering/filepicker","version":"1.1.0","license":"Apache-2.0","readme":"

    @angelengineering/filepicker

    \n

    Nativescript filepicker \"apple\" \"android\"

    \n

    This file picker plugin exports function filePicker() that supports both single and multiple selection (for iOS, multiple selection feature depends on OS version) using only native picker approaches.
    \n
    For iOS, filePicker() uses UIDocumentPicker to allow selection from publicly available files that can be accessed via iOS Files app. When selecting from Files, UIDocumentPicker supports multiple selections.

    iOS also has access to the galleryPicker() function which selects from the iOS Photos Gallery. This picker uses UIImagePicker for iOS 13 and below, which only supports single selections. PHPicker is used for iOS 14+ which does support multiple selections from the Photos Gallery. This picker does require user permission before allowing access to media on iOS.

    \n


    For Android, filePicker() uses Intents to open the stock file picker. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required in AndroidManifest. See demo for implementation details. Note: galleryPicker() will just call filePicker() internally.

    \n
    ns plugin add @angelengineering/filepicker
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to look at the demo app included in this repo.\nIn the apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/filepicker.ts.

    \n
    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { Filepicker, MediaType } from '@angelengineering/filepicker';
    \n
      \n
    1. Create a filepicker instance.
      2. \n
    \n
    let picker = new Filepicker();
    \n
      \n
    1. Decide which types of files to include, and whether single or multiple selections allowed, then call the file picker.
      2. \n
    \n
        try {
          pickedFiles = await picker.filePicker(MediaType.IMAGE + MediaType.VIDEO + MediaType.AUDIO, true);
        } catch (err) {
          if (err) alert(err?.message);
        } finally {
          this.handleFiles(pickedFiles);
        }
    \n



    \n

    Android Permissions

    \n

    To request permissions in the demo app, we use the @nativescript-community perms plugin. While this is not required for all OS versions and their system pickers, just to be safe you should request it so user is aware.

    \n

    Be sure to have permissions add the following lines in AndroidManifest.xml if targeting API 26+.

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

      <application android:requestLegacyExternalStorage=\"true\" ... >
        ...
      </application>
    </manifest>
    \n

    For API 33+, you'll also need to add the following to the Android Manifest as well as request additional permissions:

    \n
    <uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />
    <uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
    <uses-permission android:name=\"android.permission.READ_MEDIA_AUDIO\" />
    \n

    Before launching the picker on API 33+, you'll need to request the following permissions to allow picker access to all file types:

    \n
    request('photo')
    request('video')
    request('audio')
    \n

    For an example, look at the pickAll function inside the filepicker.ts file in the dmeo app.

    \n



    \n

    iOS Permissions

    \n

    Using the plugin on iOS to select from the Photos gallery with galleryPicker() requires user to grant photo library permission first in order to access the selected image, otherwise it will return without any files. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

    \n
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Requires access to photo library to upload media.</string>
    \n



    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n
    \n

    Supported Picker File Types

    \n
    MediaType {
      IMAGE,
      AUDIO,
      VIDEO,
      ARCHIVE,
      DOCUMENT,
      ALL     =>   (IMAGE | AUDIO | VIDEO | ARCHIVE | DOCUMENT )
    }
    \n

    Each platform natively supports a different set of file/mime types, you can see those that are used by the plugin by looking at per-platform plugin package source.

    \n
    \n

    Android

    \n

    The Android stock file picker also supports selecting files from Google Photos and Google Drive if you have an account signed in on the Android device. Other document provider apps installed on your device may also offer additional services.

    \n
    \n

    iOS

    \n

    The iOS pickers also support selecting files from an associated iCloud account if the user has signed in on the device. Note that for a production application, you'll need to add the iCloud capability to your iOS application, and register that entitlement via the Apple Developer site for that package id. After that, update the relevant keys as shown in the demo application's Info.plist.

    \n
    \n

    Additional Utils

    \n

    This plugin also exports a function getFreeMBs which a dev can use to check free space on the current device/app's cache folder which is where picked files get copied to. This is useful when working with larger video files to ensure you have enough free space before picking/copying the video file for use in your app.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n
    \n

    Acknowledgements

    \n

    This plugin was based on code from https://github.com/jibon57/nativescript-mediafilepicker and https://github.com/nativescript-community/ui-document-picker

    \n","downloadStats":{"lastDay":4,"lastWeek":14,"lastMonth":151}},"@triniwiz/nativescript-pager":{"name":"@triniwiz/nativescript-pager","version":"14.0.2","license":"Apache-2.0","readme":"

    Nativescript nativescript-pager

    \n
    ns plugin add @triniwiz/nativescript-pager
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":11,"lastWeek":87,"lastMonth":644}},"nativescript-enumerable":{"name":"nativescript-enumerable","version":"3.5.2","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-enumerable/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Enumerable

    \n

    A NativeScript module providing LINQ style extensions for handling arrays and lists.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-enumerable
    \n

    inside your app project to install the module.

    \n

    Usage

    \n

    Create a sequence

    \n
    import Enumerable = require(\"nativescript-enumerable\");

    // from a list of values / objects with variable length
    var seq1 = Enumerable.create(1, 'MK', true, null, {});

    // from an array / list
    var seq2 = Enumerable.fromArray([11, 22, 33, 44]);

    // from object
    var seq3 = Enumerable.fromObject({
        MK: 23979,
        TM: 5979
    });

    // range of numbers: 2, 3, 4, 5, 6
    var seq4 = Enumerable.range(2, 5);

    // 50979 'TM' strings
    var seq5 = Enumerable.repeat('TM', 50979);
    \n

    Work with them

    \n
    var seq = Enumerable.create(5979, 23979, null, '23979', 1781, 241279);

    var newSeq = seq.where((x) => x !== null)  // remove all elements that are (null)
                    .skip(1)  // skip one element (5979)
                    .take(3)  // take next remaining 3 elements (23979, 23979, 1781)
                    .distinct()  // remove duplicates
                    .select((x) => \"\" + x)  // convert to strings
                    .order();  // order by element ascending

    newSeq.each((item) => {
        // [0] 1781
        // [1] 23979
        console.log(item);
    });
    \n

    Most methods are chainable as in .NET context.

    \n

    Functions and lambda expression

    \n

    Many methods require one or more function.

    \n

    Instead using a function like

    \n
    .where(function(x) {
               return x !== null;
           })
    \n

    you can write

    \n
    .where('x => x !== null')
    \n

    instead.

    \n

    Documentation

    \n

    The full documentation with all functions and methods can be found on readme.io.

    \n

    Demo app

    \n

    The demo app contains examples to all functions and methods.

    \n

    It also contains a code editor where you can enter own code and run it!

    \n\n\n\n

    The wiki describes how it works.

    \n

    Examples

    \n

    Filters

    \n
    // distinct()
    // 1, 2, 4, 3
    Enumerable.create(1, 2, 4, 2, 3)
              .distinct();
     
    // except()
    // 2.0, 2.1, 2.3, 2.4, 2.5
    Enumerable.create(2.0, 2.1, 2.2, 2.3, 2.4, 2.5)
              .except([2.2]); 
     
    // intersect()
    // 26, 30
    Enumerable.create(44, 26, 92, 30, 71, 38)
              .intersect([30, 59, 83, 47, 26, 4, 3]);
           
    // ofType()
    // '2', 'Tanja'
    Enumerable.create(1, '2', 2, 'Tanja', 3)
              .ofType('string');  // typeof x == 'string'
              
    // union()
    // 5, 3, 9, 7, 8, 6, 4, 1, 0
    Enumerable.create(5, 3, 9, 7, 5, 9, 3, 7)
              .union([8, 3, 6, 4, 4, 9, 1, 0]);
              
    // where()
    // 1, 2, 3
    Enumerable.create(1, 2, 3, 4)
              .where((x) => x < 4);
    \n

    Sort elements

    \n
    // orderBy(), thenBy()
    //
    // \"apple\", \"grape\", \"mango\", \"banana\",
    // \"orange\", \"blueberry\", \"raspberry\", \"passionfruit\"
    Enumerable.create(\"grape\", \"passionfruit\", \"banana\", \"mango\", 
                      \"orange\", \"raspberry\", \"apple\", \"blueberry\")
              .orderBy((x) => x.length)  // complement: orderByDescending()
              .thenBy((x) => x);  // complement: thenByDescending()
                                  // shorter: then()

    // reverse()
    // 4, 3, 2, 1
    Enumerable.create(1, 2, 3, 4)
              .reverse();
    \n

    Take / skip elements

    \n
    // skip()
    // 3, 4
    Enumerable.create(0, 1, 2, 3, 4)
              .skip(3);

    // skipLast()
    // 0, 1, 2, 3
    Enumerable.create(0, 1, 2, 3, 4)
              .skipLast();
              
    // skipWhile()
    // 55, 666, 77
    Enumerable.create(22, 33, 44, 55, 666, 77)
              .skipWhile((x) => x < 50);
              
    // take()
    // 0, 1, 2
    Enumerable.create(0, 1, 2, 3, 4)
              .take(3);

    // takeWhile()
    // 22, 33, 44
    Enumerable.create(22, 33, 44, 55)
              .takeWhile((x) => x < 50);
    \n

    Get one element

    \n
    // elementAt()
    // 33
    Enumerable.create(11, 22, 33, 44)
              .elementAt(2);
              
    // elementAtOrDefault()
    // 'TM'
    Enumerable.create(11, 22, 33, 44)
              .elementAtOrDefault(4, 'TM');  // out of range
              
    // first()
    // 11
    Enumerable.create(11, 22, 33, 44)
              .first();
              
    // firstOrDefault()
    // 'MK'
    Enumerable.create()
              .firstOrDefault('MK');
              
    // last()
    // 44
    Enumerable.create(11, 22, 33, 44)
              .last();
              
    // lastOrDefault()
    // 'PZ'
    Enumerable.create()
              .lastOrDefault('PZ');

    // single()
    // EXCEPTION, because we have more than one element
    Enumerable.create(11, 22, 33, 44)
              .single();
              
    // singleOrDefault()
    // 11
    Enumerable.create(11)
              .singleOrDefault('YS');
    \n

    All methods with NO OrDefault suffix will throw exceptions if no element was found.

    \n

    You also can use a function as first argument for all of these methods that works as filter / condition:

    \n
    // first()
    // 22
    Enumerable.create(11, 22, 33, 44)
              .first((x) => x >= 20);
    \n

    Accumulators

    \n
    // aggregate()
    // \"Marcel Joachim Kloubert\"
    Enumerable.create('Marcel', 'Joachim', 'Kloubert')
              .aggregate((result: string, x: string) => {
                             return result += \" \" + x;
                         });

    // average()
    // 2.5
    Enumerable.create(1, 2, 3, 4)
              .average();
              
    // sum()
    // 10
    Enumerable.create(1, 2, 3, 4)
              .sum();
    \n

    Minimum / maximum values

    \n
    // max()
    // 3
    Enumerable.create(1, 3, 2)
              .max(); 
              
    // min()
    // 1
    Enumerable.create(2, 3, 1, 2)
              .min();
    \n

    Joins

    \n
    class Person {
        constructor(name: string) {
            this.name = name;
        }

        public name: string;
    }

    class Pet: {
        constructor(name: string, owner: Person) {
            this.name = name;
            this.owner = owner;
        }

        public name: string;
        public owner: Person;
    }

    var persons: Person[] = [
        new Person(\"Tanja\"),
        new Person(\"Marcel\"),
        new Person(\"Yvonne\"),
        new Person(\"Josefine\")
    ];

    var pets: Pet[] = [
        new Pet(\"Gina\", persons[1]),
        new Pet(\"Schnuffi\", persons[1]),
        new Pet(\"Schnuffel\", persons[2]),
        new Pet(\"WauWau\", persons[0]),
        new Pet(\"Lulu\", persons[3]),
        new Pet(\"Asta\", persons[1]),
    ];

    // groupJoin()
    // 
    // [0] 'Owner: Tanja; Pets: WauWau, Sparky'
    // [1] 'Owner: Marcel; Pets: Gina, Schnuffi, Asta'
    // [2] 'Owner: Yvonne; Pets: Schnuffel'
    // [3] 'Owner: Josefine; Pets: Lulu'
    Enumerable.fromArray(persons)
              .groupJoin(pets,
                         (person: Person) => person.name,
                         (pet: Pet) => pet.owner.name,
                         (person: Person, petsOfPerson: Enumerable.IEnumerable<Pet>) => {
                             var petList = petsOfPerson
                                 .select((pet: Pet) => pet.name)
                                 .aggregate((result: string, petName: string) => {
                                                return result += \", \" + petName;
                                            });
                         
                             return 'Owner: ' + person.name + '; Pets: ' + petList;
                         });

    // join()
    // 
    // [0] 'Owner: Tanja; Pet: WauWau'
    // [1] 'Owner: Marcel; Pet: Gina'
    // [2] 'Owner: Marcel; Pet: Schnuffi'
    // [3] 'Owner: Marcel; Pet: Asta'
    // [4] 'Owner: Yvonne; Pet: Schnuffel'
    // [5] 'Owner: Josefine; Pet: Lulu'
    Enumerable.fromArray(persons)
              .join(pets,
                    (person: Person) => person.name,
                    (pet: Pet) => pet.owner.name,
                    (person: Person, pet: Pet) => {
                        return 'Owner: ' + person.name + '; Pet: ' + pet.name;
                    });
    \n

    Groupings

    \n
    // groupBy()
    Enumerable.create(\"grape\", \"passionfruit\", \"banana\",
                      \"apple\", \"blueberry\")
              .groupBy((x: string) => x[0])
              .each(function(grouping: Enumerable.IGrouping<string, string>) {
                        // grouping[0].key = 'g'
                        // grouping[0][0] = 'grape'
                        
                        // grouping[1].key = 'p'
                        // grouping[1][0] = 'passionfruit'
                        
                        // grouping[2].key = 'b'
                        // grouping[2][0] = 'banana'
                        // grouping[2][1] = 'blueberry'
                        
                        // grouping[3].key = 'a'
                        // grouping[3][0] = 'apple'
                    });
    \n

    Projection

    \n
    // select()
    // \"MARCEL\", \"KLOUBERT\"
    Enumerable.create(\"Marcel\", \"Kloubert\")
              .select((x: string) => x.toUpperCase());
              
    // selectMany()
    // 1, 10, 100, 2, 20, 200, 3, 30, 300
    Enumerable.create(1, 2, 3)
              .selectMany((x: number) => [x, x * 10, x * 100]);

    // zip()
    // \"Marcel Kloubert\", \"Bill Gates\", \"Albert Einstein\"
    Enumerable.create('Marcel', 'Bill', 'Albert')
              .zip(['Kloubert', 'Gates', 'Einstein', 'Adenauer'],
                   (firstName: string, lastName: string) => {
                       return firstName + \" \" + lastName;
                   });
    \n

    Checks / conditions

    \n
    // all()
    // (false)
    Enumerable.create(1, 2, '3', 4)
              .all((x) => typeof x !== \"string\");
              
    // contains()
    // (true)
    Enumerable.create(1, 2, '3')
              .contains(3);

    // any()
    // (true)
    Enumerable.create(1, 2, '3', 4)
              .any((x) => typeof x === \"string\");
     
    // sequenceEqual()
    // (false)         
    Enumerable.create([1, 2, 3])
              .sequenceEqual([1, 3, 2]);
    \n

    Conversions

    \n
    // toArray()
    var jsArray = Enumerable.create(1, 2, 3, 4)
                            .toArray();
      
    // toObject()
    var obj = Enumerable.create(1, 2, 3, 4)
                        .toObject((item, index) => \"item\" + index);  
      
    // toObservable()
    var o = Enumerable.create(1, 2, 3, 4)
                      .toObservable((item, index) => \"item\" + index);
      
    // toObservableArray()
    var oa = Enumerable.create(1, 2, 3, 4)
                       .toObservableArray();  
      
    // toLookup()
    // 
    // lookup['A'][0] = 'Albert'
    // lookup['B'][0] = 'Bill'
    // lookup['B'][1] = 'Barney'
    // lookup['K'][0] = 'Konrad'
    // lookup['M'][0] = 'Marcel'
    var lookup = Enumerable.create('Bill', 'Marcel', 'Barney', 'Albert', 'Konrad')
                           .toLookup((x: string) => x[0]);
    \n

    Count

    \n
    // 3
    Enumerable.create(0, 1, 2)
              .count();
              
    // 2
    Enumerable.create(0, 1, 2)
              .count((x) => x > 0);
    \n

    More

    \n

    concat

    \n
    // 0, 1, 2, 'PZ', 'TM', 'MK'
    Enumerable.create(0, 1, 2)
              .concat(['PZ', 'TM', 'MK']);
    \n

    defaultIfEmpty

    \n
    // 0, 1, 2
    Enumerable.create(0, 1, 2)
              .defaultIfEmpty('PZ', 'TM', 'MK');
              
    // 'PZ', 'TM', 'MK'
    Enumerable.create()
              .defaultIfEmpty('PZ', 'TM', 'MK');
    \n

    moveNext / current

    \n
    var seq = Enumerable.create(0, 1, 2);
    while (seq.moveNext()) {
        console.log(seq.current);
    }
    \n

    reset

    \n
    var seq = Enumerable.create(0, 1, 2);

    seq.each((x: number) => {
                 console.log(x);
             });

    seq.reset()
       .each((x: number) => {
                 console.log(x * 2);
             });
    \n","downloadStats":{"lastDay":1,"lastWeek":32,"lastMonth":100}},"@nativescript/mlkit-face-detection":{"name":"@nativescript/mlkit-face-detection","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-face-detection

    \n
    npm install @nativescript/mlkit-face-detection
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":329}},"nativescript-pdf-view":{"name":"nativescript-pdf-view","version":"3.0.0-1","license":"MIT","readme":"

    \"Build

    \n

    \"npm

    \n

    NativeScript PDFView

    \n
    \n

    Remark This repository is a fork of the original by Merott that will be used with his consent to provide further maintenance of this NativeScript plugin.

    \n
    \n

    A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

    \n

    This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

    \n

    My aim is to keep the features consistent across iOS and Android.

    \n

    Installation

    \n
    ns plugin add nativescript-pdf-view
    \n

    Usage

    \n

    Vanilla NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pdf=\"nativescript-pdf-view\"
      loaded=\"pageLoaded\">
      <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
    </Page>
    \n

    Angular NativeScript

    \n

    Import in module

    \n
    import { PDFViewModule } from 'nativescript-pdf-view/angular';
    \n
    <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
    \n

    Demo

    \n

    Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

    \n

    Samples

    \n

    There are sample applications avalable:

    \n\n","downloadStats":{"lastDay":18,"lastWeek":179,"lastMonth":684}},"nativescript-bottomnavigation":{"name":"nativescript-bottomnavigation","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/kobby-sun/nativescript-bottomnavigation/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Bottom Navigation

    \n

    NativeScript plugin for AHBottomNavigation.\nhttps://github.com/aurelhubert/ahbottomnavigation

    \n

    Install

    \n
    tns plugin add nativescript-bottomnavigation
    \n

    Usage

    \n
    ...
    xmlns:bottomnav=\"nativescript-bottomnavigation\"
    ...

    <bottomnav:BottomNavigation tabSelected=\"tabSelected\">
      <bottomnav:BottomNavigation.items>
        <bottomnav:BottomNavigationItem title=\"Cake\" icon=\"ic_cake_white_24dp\" color=\"#4CAF50\" />
        <bottomnav:BottomNavigationItem title=\"Favorites\" icon=\"ic_favorite_white_24dp\" color=\"#2196F3\" />
        <bottomnav:BottomNavigationItem title=\"Settings\" icon=\"ic_settings_white_24dp\" color=\"#FF4081\" />
      </bottomnav:BottomNavigation.items>
    </bottomnav:BottomNavigation>
    \n","downloadStats":{"lastDay":0,"lastWeek":9,"lastMonth":20}},"@nativescript/mlkit-image-labeling":{"name":"@nativescript/mlkit-image-labeling","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-image-labeling

    \n
    npm install @nativescript/mlkit-image-labeling
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":305}},"@nativescript-community/fonts":{"name":"@nativescript-community/fonts","version":"1.0.5","license":"MIT","readme":"

    Using font icons with NativeScript

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n
      \n
    • CSS
      • \n
    \n
    .fa {
      font-family: FontAwesome;
    }
    \n
      \n
    • view
      • \n
    \n
    <Label class=\"fa\" text=\"\\uf293\"></Label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname:

    \n
    <Label class=\"fas\" text=\"fa-bluetooth\"></Label>
    \n

    Install

    \n
    npm install @nativescript-community/fonts --save-dev
    \n

    Usage

    \n

    The plugin performs two pieces of processing on your project when enabled at build time:

    \n
      \n
    • It will scan your code for the relevant character tokens, replacing them with the actual character.
      • \n
    • It will parse your font file and remove all unused characters, which depending on your particular usage will greatly reduce the size of the font.
      • \n
    \n

    This processing is configured in your webpack.config.js and occurs at build time.

    \n

    FontAwesome

    \n

    FontAwesome is distributed as a npm package so we can make use of that to add it to our project.

    \n
      \n
    • Install as a dev dependency
      • \n
    \n
    npm i @fortawesome/fontawesome-free --save-dev
    \n
      \n
    • \n

      Create classes in app.css/scss global file, for each font you wise to use:

      \n
      .fas {
      font-family: 'Font Awesome 6 Free', 'fa-solid-900';
      font-weight: 900;
      }

      .far {
      font-family: 'Font Awesome 6 Free', 'fa-regular-400';
      font-weight: 400;
      }

      .fab {
      font-family: 'Font Awesome 6 Brands', 'fa-brands-400';
      font-weight: 400;
      }
      \n
      • \n
    • \n

      Use the icon name in the text and set the class for the font, for example:

      \n
      <Label class=\"fas\" text=\"fa-trash-can\"></Label>
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigFontAwesome, FontAwesomeFontType } = require('@nativescript-community/fonts');
      \n

      Configure the fonts that you are using:

      \n
      addFontsConfigFontAwesome({ 
        fontTypes: [FontAwesomeFontType.solid, FontAwesomeFontType.brands, FontAwesomeFontType.regular], stripCharactersFromFont: true });
      \n
      • \n
    \n

    Material Design Fonts

    \n

    Material Design Fonts are also available as a npm package.

    \n
      \n
    • \n

      Install as a dev dependency

      \n
      npm i @mdi/font --save-dev
      \n
      • \n
    • \n

      Create classes in app.css/scss global file, for the font:

      \n
      .mdi {
      font-family: 'Material Design Icons', 'materialdesignicons-webfont';
      font-weight: 400;
      }
      \n
      • \n
    • \n

      Use the icon name in the text and set the class for the font, for example:

      \n
      <Label class=\"mdi\" text=\"trash-can\"></Label>
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigMDIFont } = require('@nativescript-community/fonts');
      \n

      Configure the fonts that you are using:

      \n
       addFontsConfigMDIFont({
        stripCharactersFromFont: true,
        });
      \n
      • \n
    \n

    Other fonts

    \n

    You can also use any other fonts:

    \n

    An example where we explicitly define the tokens for the font icofont.

    \n
      \n
    • \n

      Download the font and place it in your project e.g. fonts\\icofont.ttf

      \n
      • \n
    • \n

      Add the css

      \n
      .icoFont {
          font-family: 'IcoFont', 'icofont';
          font-weight: 400;
      }
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigCustom } = require('@nativescript-community/fonts');

      \n

      Configure the fonts that you are using:

      \n
          addFontsConfigCustom({
            pathToFont: 'fonts/icofont.ttf',
            tokenPrefix: 'icofont-',   // text text before the icon name in your source code
            tokenValues: {
            trash: 'ee09', // token name, character code
            },
            stripCharactersFromFont: true,
        });
      \n
      • \n
    • \n

      Use the font:

      \n
        <Label text=\"icofont-trash\" class=\"icoFont\"/>
      \n
      • \n
    \n

    An example where we are not using icons but want to optimize the font size, Google Monoton.

    \n
      \n
    • \n

      Download the font and place it in your project e.g. fonts\\Monoton-Regular.ttf

      \n
      • \n
    • \n

      Add the css

      \n
      .monoton {
      font-family: 'Monoton', 'Monoton-Regular';
      font-weight: 400;
      }
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigCustom } = require('@nativescript-community/fonts');

      \n

      Configure the fonts that you are using:

      \n
        addFontsConfigCustom({ pathToFont: 'fonts/Monoton-Regular.ttf', extraCharacters: 'trash-can', stripCharactersFromFont: true });
      \n

      We are not using this font for icons, so here we simply wish to optimize the font, and we pass in the few characters that we use this font for.

      \n
      • \n
    • \n

      Use the font:

      \n
      <Label text=\"trash-can\" class=\"monoton\"/>
      \n
      • \n
    \n

    An example where we define the tokens for the font in an scss file, dripicons.

    \n
      \n
    • \n

      Download the font and place it in your project e.g. fonts\\dripicons-v2.ttf

      \n
      • \n
    • \n

      Add a scss file e.g. fonts\\dripicons.scss with the contents:

      \n
      $trash-can: \\e053;
      \n
      • \n
    • \n

      Add the css

      \n
      .drip {
      font-family: 'dripicons-v2', 'dripicons-v2';
      font-weight: 400;
      }
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigCustom } = require('@nativescript-community/fonts');

      \n

      Configure the fonts that you are using:

      \n

        addFontsConfigCustom({ 
            pathToFont: 'fonts/dripicons-v2.ttf', 
            tokenPrefix: 'drip-', 
            tokenScss: 'fonts/dripicons.scss', 
            stripCharactersFromFont: true }
        );
      \n
      • \n
    • \n

      Use the font:

      \n
          <Label text=\"drip-trash-can\" class=\"drip\"/>
      \n
      • \n
    \n

    icomoon

    \n

    This is also an example where the definitions for the tokens for the font are in an scss file, IcoMoon.

    \n
      \n
    • \n

      Generate and Download your pack, making sure you generate sass.

      \n
      • \n
    • \n

      Place the font and the variables.scss in your project e.g. in the fonts\\icomoon directory.

      \n
      • \n
    • \n

      Add the css

      \n
      .icon {
        font-family: 'icomoon', 'iconmoon';
        font-weight: 400;
      }
      \n
      • \n
    • \n

      Configure in your webpack.config.js

      \n

      Import the required function/enum:

      \n
      const { addFontsConfigCustom } = require('@nativescript-community/fonts');

      \n

      Configure the fonts that you are using:

      \n

        addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', 
          tokenPrefix: 'icon-', 
          tokenScss: 'fonts/icomoon/variables.scss', 
          tokenScssPrefix:'$icon-',
          stripCharactersFromFont: true });
      \n
      • \n
    • \n

      Use the font:

      \n
          <Label text=\"icon-spades\" class=\"btn btn-primary icon\"/>
      \n
      • \n
    \n

    Full Example webpack.config.js

    \n
    const webpack = require(\"@nativescript/webpack\");
    const { addFontsConfigFontAwesome, addFontsConfigMDIFont, 
    \tFontAwesomeFontType, addFontsConfigCustom } = require('@nativescript-community/fonts');
    module.exports = (env) => {
    \twebpack.init(env);

    \taddFontsConfigFontAwesome({ 
    \t\tfontTypes: [FontAwesomeFontType.solid, 
    \t\t\t\t\tFontAwesomeFontType.brands, 
    \t\t\t\t\tFontAwesomeFontType.regular],
    \t\t stripCharactersFromFont: true });
    \t  
    \t  addFontsConfigMDIFont({
    \t\tstripCharactersFromFont: true,
    \t  });
    \t  
    \t  addFontsConfigCustom({ 
    \t\tpathToFont: 'fonts/Monoton-Regular.ttf', 
    \t\textraCharacters: 'trash-can', 
    \t\tstripCharactersFromFont: true });
    \t  
    \t  addFontsConfigCustom({
    \t\tpathToFont: 'fonts/icofont.ttf',
    \t\ttokenPrefix: 'icofont-',
    \t\ttokenValues: {
    \t\t  trash: 'ee09',
    \t\t},
    \t\tstripCharactersFromFont: true,
    \t  });
    \t  
    \t  addFontsConfigCustom({ 
    \t\tpathToFont: 'fonts/dripicons-v2.ttf', 
    \t\ttokenPrefix: 'drip-', 
    \t\ttokenScss: 'fonts/dripicons.scss', 
    \t\tstripCharactersFromFont: true });

        addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', 
              tokenPrefix: 'icon-', 
              tokenScss: 'fonts/icomoon/variables.scss', 
              tokenScssPrefix:'$icon-',
              stripCharactersFromFont: true });

    \treturn webpack.resolveConfig();
    };
    \n

    Usage Notes

    \n

    In the examples above stripCharactersFromFont is set to true. This ensures tha the unused characters are stripped from the fonts.

    \n

    For a better development experience you want to set this to false during development, one option is to set it to the value env.production which should be true on release builds.

    \n

    Credits

    \n

    Idea came from farfromrefug's post here.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":1,"lastWeek":2,"lastMonth":86}},"nativescript-pubnub":{"name":"nativescript-pubnub","version":"2.0.3","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    nativescript-pubnub

    \n

    ##Usage\ntns plugin add nativescript-pubnub

    \n

    ##Android

    \n

    ###Initialize

    \n

    Using Typescript

    \n
    import {PubNub} from 'nativescript-pubnub';
    \n

    Using javascript

    \n
    var pn = require('nativescript-pubnub');
    var pubnub = new pn.PubNub(\"pubKey\",\"subKey\");
    \n

    Use any of the following methods to initialize PubNub;

    \n
    new PubNub(pubKey: String, subKey: String);

    new PubNub(pubKey: String, subKey: String, enableSSL: Boolean);

    new PubNub(pubKey: String, subKey: String, secretKey: String);

    new PubNub(pubKey: String, subKey: String, secretKey: String, enableSSL: Boolean);

    new PubNub(pubKey: String, subKey: String, secretKey: String, cipherKey: String, enableSSL: Boolean);

    new PubNub(pubKey: String, subKey: String, secretKey: String, cipherKey: String, enableSSL: Boolean, iv: String);
    \n

    ###Subscribe

    \n

    Use any of the following methods to subscribe to a channel or multiple channels;

    \n
    .subscribe(channel): Promise;

    .subscribe(channel:String,timetoken:Number): Promise

    .subscribe(channel:String, timetoken:String): Promise

    .subscribe(channels:String[], timetoken:String): Promise

    .subscribe(channels:String[], timetoken:Number): Promise

    .subscribe(channels:String[] ): Promise
    \n

    ###Publish

    \n

    Use any of the following methods to publish data;

    \n
    \n

    Message Data:\nThe message argument can contain any JSON serializable data, including: Objects, Arrays, Ints and Strings.

    \n
    \n
    .publish(channel: String, message: any, storeInHistory: Boolean, metadata:String): Promise;
    .publish(channel: String, message: any, storeInHistory: Boolean): Promise;
    .publish(channel: String, message: any, metadata): Promise;
    .publish(channel: String, message: any): Promise;
    \n

    ###History\nUse any of the following methods to retrieve pubnub's history;

    \n
    .history(channel, count): Promise;
    .history(channel, reverse): Promise;
    .history(channel, start, end): Promise;
    .history(channel, count, reverse): Promise;
    .history(channel, start, reverse): Promise;
    .history(channel, start, count): Promise;
    .history(channel, includeTimetoken, count): Promise;
    .history(channel, start, count, reverse): Promise;
    .history(channel, start, end, count): Promise;
    .history(channel, start, end, count, reverse, includeTimetoken): Promise;
    .history(channel: String, start: Number, end: Number, count: Number, reverse: Boolean, includeTimetoken: Boolean): Promise;
    \n

    ###Unsubscribe

    \n
    .unsubscribe(channels);
    .unsubscribe(channels: String)
    \n

    ###Here Now

    \n
    .hereNow(channel: String, state, disable_uuids): Promise;
    .hereNow(state: String, disable_uuids: Boolean): Promise;
    .hereNow(channel: String): Promise;
    \n

    ###Grant

    \n
    .pamGrant(channel: String, auth_key: String, read: Boolean, write: Boolean, int: number): Promise;
    .pamGrant(channel: String, auth_key: String, read: Boolean, write: Boolean): Promise;
    .pamGrant(channel: String, read: Boolean, write: Boolean, int: number): Promise;
    .pamGrant(channel: String, read: Boolean, write: Boolean): Promise;
    .pamGrant(channel, auth_key, read, write, int): Promise;
    \n

    ###Add Channels to Channel Group

    \n
    .channelGroupAddChannel(group: String, channels): Promise;
    .channelGroupAddChannel(group: String, channels): Promise;
    \n

    ###Where Now

    \n
    .whereNow(uuid: String): Promise;
    .whereNow(): Promise;
    \n

    ###Audit Channel Group

    \n
    .pamAuditChannelGroup(group): Promise;
    .pamAuditChannelGroup(group, auth_key): Promise;
    \n

    ###Channel Group Grant

    \n
    .pamGrantChannelGroup(group, auth_key, read, management, ttl): Promise;
    .pamGrantChannelGroup(group, auth_key, read, management): Promise;
    .pamGrantChannelGroup(group, read, management, ttl): Promise;
    .pamGrantChannelGroup(group, read, management): Promise;
    \n

    ###Remove Channel Group

    \n

    .channelGroupRemoveChannel(group, channels): Promise;
    .channelGroupRemoveChannel(group, channel: String): Promise;
    \n","downloadStats":{"lastDay":0,"lastWeek":8,"lastMonth":36}},"@nativescript/ios":{"name":"@nativescript/ios","version":"8.6.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":533,"lastWeek":4158,"lastMonth":0}},"@angelengineering/downloader":{"name":"@angelengineering/downloader","version":"1.1.0","license":"Apache-2.0","readme":"

    NativeScript Downloader \"apple\" \"android\"\"npm\"

    \n
    \n

    @angelengineering/downloader

    \n
    \n

    This downloader plugin exports class Downloader that has a single function download().

    \n

    For iOS, Downloader uses NSURLSession to initiate a download from a valid URL.

    \n

    For Android, Downloader uses DownloadManager to initiate a download from a valid URL.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @angelengineering/downloader --save
    \n

    OR

    \n
    ns plugin add @angelengineering/downloader
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application page by looking at apps/demo/src/plugin-demos/downloader.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { Downloader, DownloadOptions, MessageData } from '@angelengineering/downloader';
    \n
      \n
    1. Create a downloader instance.
      2. \n
    \n
    const dp = new Downloader();
    \n
      \n
    1. Download a file.
      2. \n
    \n
    const dlfile = await dp.download({ url: 'https://some.domain.com/file.txt' });
    \n

    The only required option is the URL to be downloaded. You can also pass other options as listed in DownloadOptions below before starting the download.

    \n

    You can listen to events emitted by the download during operation in case you want to update a download status message/indicator or handle an error. Upon success, the plugin will return a File reference to the downloaded file located in the app cache directory for Android and the app document's directory for iOS, which can then be used directly by the dev without extra permissions for any other operations on the file.

    \n
    dp.on(Downloader.DOWNLOAD_STARTED, (payload: MessageData) => {
      console.log('started', payload?.data?.contentLength);
    });
    dp.on(Downloader.DOWNLOAD_PROGRESS, (payload: MessageData) => {
      console.log(' >>>>>  ', payload?.data?.progress, payload?.data?.url, payload?.data?.destinationFilename);
    });
    dp.on(Downloader.DOWNLOAD_COMPLETE, (payload: MessageData) => {
      console.log('finished', payload?.data?.filepath);
    });
    dp.on(Downloader.DOWNLOAD_ERROR, (payload: MessageData) => {
      console.log('ERROR!', payload?.data);
    });
    dp.download({ url: 'https://some.domain.com/file.txt' }).then((file: File) => {
      if (!file) {
        return console.error('Failed to download file!');
      }
      console.log('Finished downloading file ', file.path);
    });
    \n

    Supported Downloader Options

    \n
    interface DownloadOptions {
      url: string; //must be a valid url, usually https unless you allow http in your app
      request?: RequestOptions; //request header strings to be passed to the https connection
      destinationPath?: string; //must be a valid path for app to create a new file (existing directory with valid filename)
      destinationFilename?: string; //must be a string like XXXX[].[YYYYYY] without any path preceding
      copyPicker?: boolean; //present user with UI to choose destination directory to save a copy of download
      copyGallery?: boolean; //iOS only, if download has a recognized image/video file name extension, save a copy to iOS Photos, ignored on Android
      copyDownloads?: boolean; //Android only, adds a copy to device Downloads directory using legacy DIRECTORY_DOWNLOADS, or MediaStore for 29+
      notification?: boolean; //Android-only. Show system notification for download success/failure. defaults to false
    }
    \n

    For both platforms, the plugin will attempt to download the file with the filename/path supplied by the user in options, or try to find a filename to use from the url. In either case, if a file already exists at any of the output paths where a copy is being saved, it will instead append a '-#' to the filename before saving to ensure there is no conflict.

    \n

    Android Specifics

    \n

    Android apps will download files by default to the app's cache directory, which is the only directory supported by DownloadManager and no special permissions are necessary. This will correspond to android.content.Context.getExternalCacheDir() if the device has an sd card, or android.content.Context.getCacheDir() if not. This file can then be used directly for other purposes in the app without any additional permissions/requests.

    \n

    By default, the plugin disabled Android system notifications of downloads, which also requires you to add that permission to the Android Manifest like so:

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.DOWNLOAD_WITHOUT_NOTIFICATION\"/>
    \n

    You can choose to enable these notifications which will show the user progress and completion/failure notifications.

    \n

    Android version of the plugin supports two destination copy approaches:

    \n
      \n
    1. \n

      copyPicker will first download the file to the default cache directory, and then present the user with a picker UI so that they select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice.

      \n
      2. \n
    2. \n

      copyDownloads will save a copy to the device's Download directory in case the user wants to use that file in another application from an easy to find location. API versions > 28 use MediaStore, and no extra permissions are necessary. For API versions 28 and below, you'll need to ensure you have Android Manifest permissions defined using:

      \n
      3. \n
    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
      <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
    \n

    Tested and working on Android API 25-33.

    \n

    iOS Specifics

    \n

    iOS applications will download files by default to the application's documents directory, which is defined in Nativescript as knownFolders.documents() and does not require any extra permissions from the user. This also has the advantage of being the location where an application can make downloaded files visible to other apps once it has been configured as a document provider.

    \n

    The iOS version of the plugin supports two destination copy approaches:

    \n
      \n
    1. \n

      copyPicker will first download the file to the application documents directory, and then present the user with a picker UI so that they can select where they'd like a copy saved. This approach avoids permission requirements since the user is involved in the destination choice. Note: This is only available on iOS 14+

      \n
      2. \n
    2. \n

      copyGallery will save a copy to the device's Photos Gallery in case the user wants to use that file in another application from an easy to find location. This approach requires the user to grant photo library permission first in order to save the downloaded file. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding something like the following:

      \n
      <key>NSPhotoLibraryUsageDescription</key>
      <string>Requires access to save downloaded media to photo library.</string>
      \n
      3. \n
    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n

    Tested and working on iOS 12.x-16.x with caveats noted above.

    \n

    Acknowledgements

    \n

    This plugin was inspired by https://github.com/tobydeh/nativescript-download-progress

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":46}},"@codeus/aria-nativescript":{"name":"@codeus/aria-nativescript","version":"2.0.1","license":"Apache-2.0","readme":"

    @codeus/aria-nativescript

    \n
    ns plugin add @codeus/aria-nativescript
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":3,"lastWeek":0,"lastMonth":0}},"godot-rust-helper":{"name":"godot-rust-helper","version":"2.2.0","license":"MIT","readme":"

    \n \n

    \n

    Godot Rust Helper

    \n

    A simple CLI tool to help you create and update Rust modules for your Godot projects.

    \n

    \n

    \"NPM\n\"Known\n\"npm\"\n\"NPM\n\"issues\"\n\"license\"\n\"Gitter\"

    \n
    \n

    Note: This is the documentation for the new 2.x version of godot-rust-helper. If you are looking for 1.x and below, you can find it here.

    \n

    Install

    \n

    Since godot-rust-helper is a CLI tool that is meant to be used whenever you want, you should install it globally like so:

    \n
    $ npm install -g godot-rust-helper
    \n

    Step 1: Creating the Project's Library

    \n

    For each game you create in Godot you will have to create a new library. The library itself is a cargo library and it holds all of the modules used in your game.

    \n

    To create the project's library, navigate to where you would like to store the modules (outside of your Godot project directory) and use the new command:

    \n
    $ godot-rust-helper new <library_name> <path_to_godot_project> [options]
    \n

    Let's go over the arguments and options in detail with some examples.

    \n

    Arguments:

    \n
      \n
    • library_name The name of the library that will contain your Rust modules. The name of the library is recommended to be the same or similar in name to your game. Also keep in mind that the library is created using cargo new so you should abide by the cargo project naming standards.
      • \n
    • path_to_godot_project This is the path to the root directory of the Godot project that the modules will belong to.
      • \n
    \n

    Options:

    \n
      \n
    • --targets Native modules in Godot can target multiple platforms and godot-rust-helper needs to know ahead of time what platforms you plan to target your modules for with the available options currently being: windows, linux, and osx. For example if you are targeting Windows and OSX, you need to have have cargo set to build a dll and a dylib file and you would pass --targets=windows,osx as the targets. By default if no targets are passed then just --targets=windows will be set.
      • \n
    • --extensions If this flag is passed the extensions dependency will be added to the library. The extensions are a new and growing feature so stay tuned to see what gets added to them and check out the documention in the extensions repository to see if and how you can use it in your modules.
      • \n
    \n

    examples:

    \n

    Creating a default library for Windows only builds:

    \n
    $ godot-rust-helper new breakout_modules ~/Documents/projects/breakout
    \n

    Creating an library for Windows, Linux, and OSX builds:

    \n
    $ godot-rust-helper new breakout-modules ~/Documents/projects/breakout windows,linux,osx
    \n

    Note: The src/lib.rs file is completely managed by godot-rust-helper and should not be modified. Any modifications to the file will result in the modules not functioning properly or they will be overwritten when a module is created/destroyed. Custom mods can be added to the file through godot-rust-helper mod as shown here (coming soon).

    \n

    Step 2: Creating Modules

    \n

    Now that you've created the library, you can go into the newly created folder and see the config file. This config file contains the path to the Godot project directory and the targets passed from the new command. This config file should not be modified manually as godot-rust-helper depends on it heavily.

    \n

    From this directory, we can now begin to make modules with the create command like so:

    \n
    $ godot-rust-helper create <class_name>
    \n
      \n
    • name The name passed to this command should be the class name of the module. Class names must start with capital letters. Examples include 'Player', 'Princess', 'Mob', 'HUD', etc.
      • \n
    \n

    What this does is create a src/<name>.rs file for the module and adds an entry for it in the src/lib.rs file. If you attach this script as it is to a Node and run the game then "hello, world" will print to the godot console.

    \n

    Note: This command has to be run from the library's directory.

    \n

    examples:

    \n
    $ godot-rust-helper create Player
    \n
    $ godot-rust-helper create HUD
    \n

    Step 3: Building Modules

    \n

    After you have created your module (or you can do this with the default contents to try it out) you're ready to run a build using:

    \n
    $ godot-rust-helper build
    \n

    What this does is first run cargo build and then it moves the build files into the Godot project directory.

    \n

    Note: This command has to be run from the library's directory.

    \n

    Note: The first time you run this it will take a while as it have to reach out and download the necessary dependencies, every build after that will be much quicker.

    \n

    The build command also supports the --watch option which will watch the src directory of your module for changes and re-build it automatically.

    \n

    examples:

    \n

    Running the build command:

    \n
    $ godot-rust-helper build
    \n

    Running the build command and watching for changes to any modules in the library.

    \n
    $ godot-rust-helper build --watch
    \n

    Step 4: Using the Module in Godot

    \n

    The last step that has to be done to use your module in your Godot project is creating the script and attaching it to the node that needs to use it.

    \n

    After you have created a module and run a build, you can attach the script to a node like so:

    \n
      \n
    1. Choose the node to add the script to and in the inspector go to the script dropdown and choose to add a new script.
      2. \n
    2. In the Attach Node Script modal, set the following options:
      3. \n
    \n
      \n
    • Language: NativeScript
      • \n
    • Class Name: The name you passed to godot-rust-helper create which is the class name of the Rust module you created.
      • \n
    \n
      \n
    1. Change the name of the script to match the class name and save the script to the rust-modules folder
      2. \n
    2. Click on the newly created .gdns file (or after the steps above it should be active in the inspector already) and in the Library dropdown choose load and select the "library_name.gdnlib" file in the rust-modules folder. This library name is the same name passed to godot-rust-helper new.
      3. \n
    3. Click on the newly created Node.gdns (or whatever you named it above if you chose a custom name).
      4. \n
    \n

    Now if you run your game you will see your script's functionality up and running!

    \n

    Note: If you update your Rust module you do not have to update the corresponding .gdnlib file in Godot, it will be updated automatically.

    \n

    Other Commands

    \n

    The following are commands are situational but are not needed for the basic setup.

    \n

    destroy

    \n

    Removes a Rust module from the library. You will still need to remove the script reference from your node in Godot as it will throw an error if you attempt to run the game since the script no longer exists.

    \n
    $ godot-rust-helper destroy <class_name>
    \n
      \n
    • class_name The name of the class to destroy. This should be the same name that was used when it was created with godot-rust-helper create.
      • \n
    \n

    examples:

    \n
    $ godot-rust-helper destroy Player
    \n
    $ godot-rust-helper destroy HUD
    \n

    mod

    \n

    Coming soon!

    \n

    import

    \n

    Imports a Rust module from another library into the current library.

    \n
    $ godot-rust-helper import <path_to_library> <class_name>
    \n
      \n
    • path_to_library The path to the library that contains the module to import.
      • \n
    • class_name The class name of the module to import. This should be the same name that was passed to godot-rust-helper create when it was created.
      • \n
    \n

    examples:

    \n
    $ godot-rust-helper import ../kinematic_character Player
    \n
    $ godot-rust-helper import ../kinematic_character Princess
    \n

    Tests

    \n
    $ npm run test
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/audio-player":{"name":"@angelengineering/audio-player","version":"1.1.0","license":"Apache-2.0","readme":"

    @angelengineering/audio-player

    \n

    Nativescript audio player \"apple\" \"android\"

    \n

    \"npm\"

    \n
    \n

    @angelengineering/audio-player

    \n
    \n

    This plugin provides an audio player for Android and iOS that supports playback of both local files and remote URL audio files. For Android, MediaPlayer will internally cache remote files after first prepare/play. For iOS, the plugin will download and cache remote files on first prepare/play.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @angelengineering/audio-player --save
    \n

    OR

    \n
    ns plugin add @angelengineering/audio-player
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/audio-player.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { AudioPlayer, AudioPlayerOptions } from '@angelengineering/audio-player';
    \n
      \n
    1. Play an audio file.
      2. \n
    \n
    protected _playOptions: AudioPlayerOptions = {
        audioFile: knownFolders.currentApp().path + '/audio/example.m4a';,
        loop: false,
        audioMixing: false,
        completeCallback: async result => {
            console.log('AudioPlayer - Audio file playback complete.', result);
        },
        errorCallback: errorObject => {
            console.error('AudioPlayer error!', JSON.stringify(errorObject));
        },
        infoCallback: infoObject => {
            console.info('AudioPlayer info: ', JSON.stringify(infoObject));
        },
    };
    this.player.prepareAudio(this._playOptions).then(status => {
        if (status) {    
            this.player.play();    
        } else {
            console.log('ERROR! Unable to prepare audio!');
        }
    });
    \n

    NOTE: If you want to play an HTTP URL, you'll also need to make some adjustments to your application to allow unsecure connections or URL access will fail silently.\nFor iOS, add the following to your app's Info.plist:

    \n
    <key>NSAppTransportSecurity</key>  
    <dict>  
        <key>NSAllowsArbitraryLoads</key>
        <true />  
    </dict>
    \n

    For Android, ensure your application tag in App_Resources/Android/src/main/AndroidManifest.xml has the following:

    \n
    android:usesCleartextTraffic=\"true\"
    \n

    Supported Audio Player options

    \n
    export interface AudioPlayerOptions {
      /**
       * Gets or sets the audio file url.
       */
      audioFile: string;

      /**
       * Gets or sets the callback when the currently playing audio file completes.
       * @returns {Object} An object containing the native values for the callback.
       */
      completeCallback?: Function;

      /**
       * Get or sets the player to loop playback.
       */
      loop: boolean;

      audioMixing?: boolean;

      /**
       * Gets or sets the callback when an error occurs with the audio player.
       * @returns {Object} An object containing the native values for the error callback.
       */
      errorCallback?: Function;

      /**
       * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
       * @returns {Object} An object containing the native values for the info callback.
       */
      infoCallback?: Function;
    }
    \n

    Audio Player exports

    \n
    export interface AudioPlayer {
      /**
       * native instance getters
       */
      readonly ios?: any;
      readonly android?: any;

      /**
       * Volume getter/setter
       */
      volume: any;

      /**
       * Prepare Audio player by preloading an audio file from file oath or URL
       * @function prepareAudio
       * @param options
       */
      prepareAudio(options: AudioPlayerOptions): Promise<boolean>;

      /**
       * Play current audio file that has been prepared by calling prepareAudio(options)
       */
      play(): Promise<boolean>;

      /**
       * Pauses playing audio file.
       */
      pause(): Promise<boolean>;

      /**
       * Seeks to specific time.
       */
      seekTo(time: number): Promise<boolean>;

      /**
       * Releases resources from the audio player.
       */
      dispose(): Promise<boolean>;

      /**
       * Check if the audio is actively playing.
       */
      isAudioPlaying(): boolean;

      /**
       * Get the duration of the audio file playing.
       */
      getAudioTrackDuration(): Promise<string>;

      /**
       * current time
       */
      readonly currentTime: number;
    }
    \n

    Tested and working on Android API 25-33.\nTested and working on iOS 12.x-16.x.

    \n

    Acknowledgements

    \n

    This plugin is based on https://github.com/nstudio/nativescript-audio

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":3,"lastMonth":30}},"nativescript-popup":{"name":"nativescript-popup","version":"1.5.0","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    tns plugin add nativescript-popup

    \n

    Screenshots

    \n

    \"Popup

    \n

    Usage

    \n
        <Button tap=\"openPopup\"/>
    \n
        import { Popup } from 'nativescript-popup';

        function openPopup(args){
        const popup = new Popup({
            backgroundColor:'white' | '#fff',
            height:100,
            width:100,
            unit:'dp' | 'px' | '%',
            elevation:10, // android only
            borderRadius:25 // android only
        });
        const view = new Label();
        view.text = \"Test\";

        /* IOS */
        const nativeView = UILabel.new();
        nativeView.text = \"Native Button\";
        nativeView.frame = CGRectMake(0,0,50,50);
        /* -- IOS */

        /* Android */
        const nativeView = new new android.widget.TextView(context);
        nativeView.setText(\"Native Button\");
        nativeView.setWidth(50);
        nativeView.setHeight(50);
        /* -- Android */

        popup.showPopup(anchor: View | nativeView , view: View | nativeView);
        }
    \n

    API

    \n

    Constructor

    \n

    Popup(options: PopupOptions)

    \n

    Constructor Example

    \n
    import { Popup, PopupOptions } from \"nativescript-popup\";

    const opts: PopupOptions = {
      backgroundColor: \"white\" | \"#fff\",
      height: 100,
      width: 100,
      unit: \"dp\" | \"px\" | \"%\",
      elevation: 10, // android only
      borderRadius: 25 // android only
    };

    const popup = new Popup(opts);
    \n

    Popup Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    showPopup(source: any, view: any): PromiseShows the popup anchored to the source argument with the view argument as the popup contents. The view argument can be a native Android/iOS view, a NativeScript View, or a string path to a template within the app directory.
    hidePopup(data?: any): PromiseHides the popup and removes it from the view hierarchy.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/audio-recorder":{"name":"@angelengineering/audio-recorder","version":"1.1.0","license":"Apache-2.0","readme":"

    @angelengineering/nativescript-audio-recorder

    \n

    Nativescript audio recorder \"apple\" \"android\"

    \n

    \"npm\"

    \n

    This plugin provides an audio recorder for Android and iOS that supports recording of audio from a device microphone input and saved to an MP4/AAC audio file. It also provides a function to merge multiple audio recordings together.

    \n

    Contents

    \n\n

    Installation

    \n
    npm install @angelengineering/nativescript-audio-recorder --save
    \n

    OR

    \n
    ns plugin add @angelengineering/nativescript-audio-recorder
    \n

    Usage

    \n

    The best way to understand how to use the plugin is to study the demo app included in this repo. You can see how the plugin is used in a TypeScript application by looking at apps/demo/src/plugin-demos/nativescript-audio-recorder.ts.

    \n
      \n
    1. Import the plugin.
      2. \n
    \n
    import { AudioRecorder, AudioRecorderOptions } from '@angelengineering/nativescript-audio-recorder';
    \n
      \n
    1. Record an audio file.
      2. \n
    \n
    this.recorder = new AudioRecorder();
    //you can tie into these events to update control UI state
    this.recorder.on('RecorderFinished', () => {
      console.log('RecorderFinished');
    });
    this.recorder.on('RecorderFinishedSuccessfully', () => {
      console.log('RecorderFinishedSuccessfully');
    });
    let recOptions: AudioRecorderOptions = {
        filename: path.join(knownFolders.documents().path, 'audiorecording-1.mp4');,
        infoCallback: infoObject => {
          console.log('AudioRecorder infoCallback: ', JSON.stringify(infoObject));
        },
        errorCallback: errorObject => {
          console.error('AudioRecorder errorCallback: ', JSON.stringify(errorObject));
        },
      };
    try {
      this.recorder
        .record(recOptions)
        .then(() => {
          console.log('recording audio started');
        })
        .catch(err => {
          console.error(err);
        });
    } catch (err) {
      alert(err?.message);
    }
    \n
      \n
    1. (Optional) Merge multiple recordings into a single file.
      2. \n
    \n
    let audioFiles: [string] = ['PATH/TO/audiorecording-1.mp4','PATH/TO/audiorecording-2.mp4'];
    let finalfile = await this.recorder.mergeAudioFiles(this.audioFiles, 'PATH/TO/audiorecording.mp4');
    \n

    Android Specifics

    \n

    NOTE: This plugin will only work on API26+ devices if you want to merge audio segments together. Single file recordings only on API 25 or below.

    \n

    In order to record audio, you'll need to add the following permission to your AndroidManifest.xml:

    \n
    <manifest ... >
      <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
      ...
    </manifest>
    \n

    To request permissions in the demo app, we use the @nativescript-community perms plugin.

    \n

    iOS Specifics

    \n

    In order to record audio, iOS will require permission to access the microphone. Add the following to your Info.plist:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>This app requires access to your microphone to record audio</string>
    \n

    Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission.

    \n
    \n

    NOTE: if you do use the perms plugin in a production app, make sure to read their README.md first, as using this plugin in production apps will require you to add all iOS Info.plist permission strings to avoid being rejected by automatic processing since the plugin includes code for all permission types.

    \n
    \n

    Supported Audio Recorder options

    \n
    export interface AudioRecorderOptions {
      /**
       * Gets or sets the recorded file name.
       */
      filename: string;

      /**
       * Sets the source for recording ***ANDROID ONLY for now ***
       */
      source?: any;

      /**
       * Gets or set the max duration of the recording session.
       * Input in milliseconds, which is Android's format.
       * Will be converted appropriately for iOS.
       */
      maxDuration?: number;

      /**
       * Enable metering. Off by default.
       */
      metering?: boolean;

      /**
       * Channels
       */
      channels?: any;

      /**
       * Sampling rate
       */
      sampleRate?: any;

      /**
       * Bit rate
       */
      bitRate?: any; //Android only, use iosAudioQuality for iOS

      /**
       * Sets the ios audio quality setting. Options are Min|Low|Medium|High|Max. Set to Medium by default.
       */
      iosAudioQuality?: string;

      /**
       * Gets or sets the callback when an error occurs with the media recorder.
       * @returns {Object} An object containing the native values for the error callback.
       */
      errorCallback?: Function;

      /**
       * Gets or sets the callback to be invoked to communicate some info and/or warning about the media or its playback.
       * @returns {Object} An object containing the native values for the info callback.
       */
      infoCallback?: Function;
    }
    \n

    Audio Recorder exports

    \n
    export class AudioRecorder extends Observable implements IAudioRecorder {
      readonly ios: any; //Native iOS recorder instance
      readonly android: any;  //Native Android recorder instance

      /**
       * Starts a recording session with the provided options.
       * @param options [AudioRecorderOptions]
       */
      record(options: AudioRecorderOptions): Promise<any>;

      /**
       * Stops the recording
       */
      stop(): Promise<File>;

      /**
       * Disposes of the recorder session
       */
      dispose(): Promise<any>;

      /**
       * Returns the maximum absolute amplitude that was sampled since the last call to this method.
       * @param channel [number]
       */
      getMeters(channel?: number): any;

      /**
       * Returns value indicating the recorder is currently recording.
       */
      isRecording(): boolean;

      /**
       * Merges all files with file paths specified in audioFiles into a new file at outputPath. This only supports MP4/AAC audio files currently
       * Note: For Android, API 26+ is required.
       */
      mergeAudioFiles(audioFiles: string[], outputPath: string): Promise<File>;
    }
    \n

    Tested and working on Android API 26-33.\nTested and working on iOS 12.x-16.x.

    \n

    Acknowledgements

    \n

    This plugin is based on https://github.com/nstudio/nativescript-audio

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wave-refresh":{"name":"nativescript-wave-refresh","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-wave-refresh/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Wave-Refresh :recycle:

    \n

    NativeScript plugin for a custom pull-to-refresh layout.

    \n

    Demo

    \n

    \"Demo\"

    \n

    Native Library

    \n

    Wave Swipe Refresh Layout

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    tns plugin add nativescript-wave-refresh

    \n

    Usage

    \n

    XML

    \n
    <page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:WR=\"nativescript-wave-refresh\" loaded=\"pageLoaded\">
      <ActionBar title=\"Wave Refresh\" backgroundColor=\"#FF4081\" color=\"#fff\" />
      <stack-layout>
        <WR:WaveRefresh backgroundColor=\"#FF4081\" refresh=\"{{ stopRefresh }}\" id=\"waveRefresh\">
          <list-view items=\"{{ users }}\">
            <list-view.itemTemplate>
              <label text=\"{{ name }}\" row=\"0\" col=\"1\" textWrap=\"true\" class=\"message\" />
            </list-view.itemTemplate>
          </list-view>
        </WR:WaveRefresh>
      </stack-layout>
    </page>
    \n

    TS

    \n
    import { WaveRefresh } from \"nativescript-wave-refresh\"

      public stopRefresh(args: any) {
        // Load more data here and then set 'refreshing = false' to end the refresh
        let waveRefresh: WaveRefresh = args.object;
        waveRefresh.refreshing = false;
      }
    \n

    Attributes

    \n

    refresh : function optional - function executed when the WaveRefresh starts refreshing.

    \n

    backgroundColor is supported to specify the background color of the wave refresh. This will help to blend it in with the ActionBar.

    \n

    API

    \n

    refreshing

    \n

    Property. Notifies the widget that the refresh state has changed.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-socketio-ns":{"name":"nativescript-socketio-ns","version":"0.11.1","license":"Unlicense","readme":"

    NOTE

    \n

    This fork allow using this library with newer gradle versions, so it affects only the Android part.\nsee the original issue for information

    \n

    nativescript-socket.io

    \n

    Full-featured Socket.IO client implementation for NativeScript.

    \n

    Status

    \n

    \"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

    \n

    This library is production-ready. Both Android and iOS implementations are stable and in sync.

    \n

    Please check releases and changelog and roadmap for more information.

    \n

    Dependencies

    \n

    Android: Socket.IO-client Java v1.*

    \n

    iOS: Socket.IO-Client-Swift v12.*

    \n

    Install

    \n
    tns plugin add nativescript-socket.io
    \n

    Usage

    \n
    const SocketIO = require('nativescript-socket.io');

    SocketIO.enableDebug(); // optionnal

    // or use your own debug function
    // SocketIO.enableDebug(myCustomDebugFunction);

    const options = {
      query: {
        token: 'SOME_TOKEN_HERE',
      },
      android: {
        // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
      }
      ios: {
        // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
      }
    };

    const socketio = SocketIO.connect('http://somewhere/namespace', options);

    socketio.on('connect', function(){
      console.log('connect');
    });

    socketio.on('hello', function(){
      console.log('hello', arguments);
    });

    socketio.on('request', function(info, ack){
      console.log('request', info);
      if (info === 'datetime') {
        ack(new Date());
      } elseif (info === 'random') {
        ack(Math.random());
      } else {
        ack(null);
      }
    });

    socketio.emit('hello', {
      username: 'someone',
    });

    socketio.emit('hello-ack', {
      username: 'someone',
    }, function ack(){
      console.log('hello-ack', arguments);
    })
    \n

    Usage with TypeScript

    \n

    import using either of the following:

    \n
    import * as SocketIO from \"nativescript-socket.io\"`

    // OR

    const SocketIO = require(\"nativescript-socket.io\")
    \n

    Demo

    \n
      \n
    1. \n

      replace all instance of 192.168.1.111 with your IP address or domain.

      \n
      2. \n
    2. \n

      start the socket.io demo server

      \n
      3. \n
    \n
    cd ./demo.server
    npm start
    \n
      \n
    1. build and run the app
      2. \n
    \n
    cd ./demo
    tns run android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":5}},"nativescript-taskpie":{"name":"nativescript-taskpie","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-taskpie/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Task Pie

    \n

    A NativeScript module for drawing Microsoft Planner like progress charts.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS (currently in progress!)
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-taskpie
    \n

    inside your app project to install the module.

    \n

    Demo

    \n

    The demo app can be found here.

    \n

    \"Demo

    \n

    Documentation

    \n

    Have a look at the index.ts file to get an overview of all types, methods and properties.

    \n

    Otherwise...

    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:taskPie=\"nativescript-taskpie\"
          navigatingTo=\"onNavigatingTo\">

      <taskPie:TaskPie id=\"my-taskpie\"
                       description=\"79 days left\"
                       pieText=\"16\" pieSubText=\"tasks left\" />
    </Page>
    \n

    Add this CSS to your app.css, e.g.

    \n

    It is possible that you have to customize some properties:

    \n
    .nsTaskPie-pieArea .nsTaskPie-textArea {
        margin-top: -16;
    }

    .nsTaskPie-pieArea .nsTaskPie-textArea .nsTaskPie-text {
        text-align: center;
        font-size: 40;
        color: #a6a6a6;
        padding: 0;
    }

    .nsTaskPie-pieArea .nsTaskPie-textArea .nsTaskPie-subText {
        text-align: center;
        font-size: 20;
        color: #a6a6a6;
        margin-top: -8;
        padding: 0;
    }

    .nsTaskPie-description {
        font-size: 20;
        margin-bottom: 12;
    }

    .nsTaskPie-categories .nsTaskPie-category {
        margin-left: 4;
        margin-right: 4;
    }

    .nsTaskPie-categories .nsTaskPie-border {
        height: 8;
    }

    .nsTaskPie-categories .nsTaskPie-count,
    .nsTaskPie-categories .nsTaskPie-name,
    .nsTaskPie-description     {
        text-align: center;
        color: #333333;
    }

    .nsTaskPie-categories .nsTaskPie-count {
        font-size: 16;
        margin-top: 4;
    }

    .nsTaskPie-categories .nsTaskPie-name {
        font-size: 12;
    }
    \n

    The following XML shows the structure of a TaskPie view:

    \n
    <TaskPie cssClass=\"nsTaskPie\"
             rows=\"auto,auto,auto\" columns=\"*\">
      
      <!-- pieGrid() -->
      <GridLayout cssClass=\"nsTaskPie-pieArea\"
                  rows=\"auto\" columns=\"1*,4*,1*\"
                  horizontalAlignment=\"stretch\" verticalAlignment=\"center\">
            
        <!-- pieImage() -->        
        <Image cssClass=\"nsTaskPie-pie\"
               col=\"1\" row=\"0\"
               horizontalAlignment=\"stretch\" verticalAlignment=\"center\" />
               
        <!-- pieTextArea() -->
        <StackLayout cssClass=\"nsTaskPie-textArea\"
                     col=\"0\" row=\"0\" colspan=\"3\"
                     horizontalAlignment=\"stretch\" verticalAlignment=\"center\">
        
          <!-- pieTextField() --> 
          <Label cssClass=\"nsTaskPie-text\" />
          
          <!-- pieSubTextField() --> 
          <Label cssClass=\"nsTaskPie-subText\" />
        </StackLayout>
        
        <!-- descriptionField() -->
        <Label cssClass=\"nsTaskPie-description\"
               col=\"0\" row=\"1\" />
               
        <!-- categoryGrid() --> 
        <GridLayout cssClass=\"nsTaskPie-categories\"
                    rows=\"*\" columns=\"*,*,*,*\">
                    
          <!-- [0] \"Not started\" -->
          <StackLayout cssClass=\"nsTaskPie-category\"
                       row=\"0\" col=\"0\">
                       
            <Border cssClass=\"nsTaskPie-border\"
                    backgroundColor=\"#ffc90e\"
                    horizontalAlignment=\"stretch\" />
            
            <Label cssClass=\"nsTaskPie-count\"
                   horizontalAlignment=\"stretch\"
                   text=\"0\" textWrap=\"true\" />
            
            <Label cssClass=\"nsTaskPie-name\"
                   horizontalAlignment=\"stretch\"
                   text=\"Not started\" textWrap=\"true\" />
          </StackLayout>
          
          <!-- [1] \"Late\" -->
          <StackLayout cssClass=\"nsTaskPie-category\"
                       col=\"1\" row=\"0\">
                       
            <Border cssClass=\"nsTaskPie-border\"
                    backgroundColor=\"#d54130\"
                    horizontalAlignment=\"stretch\" />
            
            <Label cssClass=\"nsTaskPie-count\"
                   horizontalAlignment=\"stretch\"
                   text=\"0\" textWrap=\"true\" />
            
            <Label cssClass=\"nsTaskPie-name\"
                   horizontalAlignment=\"stretch\"
                   text=\"Late\" textWrap=\"true\" />
          </StackLayout>
          
          <!-- [2] \"In progress\" -->
          <StackLayout cssClass=\"nsTaskPie-category\"
                       col=\"2\" row=\"0\">
                       
            <Border cssClass=\"nsTaskPie-border\"
                    backgroundColor=\"#4cabe1\"
                    horizontalAlignment=\"stretch\" />
            
            <Label cssClass=\"nsTaskPie-count\"
                   horizontalAlignment=\"stretch\"
                   text=\"0\" textWrap=\"true\" />
            
            <Label cssClass=\"nsTaskPie-name\"
                   horizontalAlignment=\"stretch\"
                   text=\"In progress\" textWrap=\"true\" />
          </StackLayout>
          
          <!-- [3] \"Completed\" -->
          <StackLayout cssClass=\"nsTaskPie-category\"
                       col=\"3\" row=\"0\">
                       
            <Border cssClass=\"nsTaskPie-border\"
                    backgroundColor=\"#88be39\"
                    horizontalAlignment=\"stretch\" />
            
            <Label cssClass=\"nsTaskPie-count\"
                   horizontalAlignment=\"stretch\"
                   text=\"0\" textWrap=\"true\" />
            
            <Label cssClass=\"nsTaskPie-name\"
                   horizontalAlignment=\"stretch\"
                   text=\"Completed\" textWrap=\"true\" />
          </StackLayout>
        </GridLayout>
      </GridLayout>
    </TaskPie>
    \n

    Dependency properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescriptionCSS class
    categoriesThe custom category list.nsTaskPie-categories
    categoryStyleCSS style for category area.nsTaskPie-categories
    countChangedEvent that is raised when a count value of a task category changed.---
    countsThe list of the category's count values.---
    descriptionThe description (text under the pie).nsTaskPie-description
    descriptionStyleCSS style of the description.nsTaskPie-description
    pieGridStyleCSS style of the grid tat contains the pie and its texts.nsTaskPie-pieArea
    pieSizeThe size the pie is drawed with. The higher the better is the quality, but needs more memory. Default: 300nsTaskPie-pie
    pieStyleCSS style of the pie image.nsTaskPie-pie
    pieSubTextThe sub text of the pie.nsTaskPie-subText
    pieSubTextStyleCSS style of the pie's sub text.nsTaskPie-subText
    pieTextThe pie text.nsTaskPie-text
    pieTextAreaStyleCSS style of the area that contains the pie texts.nsTaskPie-textArea
    pieTextStyleCSS style of the pie's text.nsTaskPie-text
    \n

    Categories

    \n

    By default you have the following categories:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameColorType (TaskCategoryType)
    Not startedffc90eNotStarted
    Lated54130NotStarted
    In progress4cabe1InProgress
    Completed88be39Completed
    \n

    Add own

    \n

    You can use the addCategory() method to add categories.

    \n
    import TaskPieModule = require('nativescript-taskpie');

    export function onNavigatingTo(args) {
        var page = args.object;
        
        var pie = <TaskPieModule.TaskPie>page.getViewById('my-taskpie'));
        
        // this switches the view in 'edit mode'
        // what means that is not refresh until the action
        // has been finished
        pie.edit(() => {
            pie.clearCategories();
            
            pie.addCategory('Pending', 'ffc90e', TaskPieModule.TaskCategoryType.NotStarted)
               .addCategory('Late!', 'd54130', TaskPieModule.TaskCategoryType.NotStarted)
               .addCategory('On work', '4cabe1', TaskPieModule.TaskCategoryType.InProgress)
               .addCategory('Complete', '88be39', TaskPieModule.TaskCategoryType.Completed);
        });
    }
    \n

    You also can use the categories (dependency) property to set an own list of items.

    \n
    pie.categories = [
        {
            name: 'Pending',
            color: 'ffc90e',
            type: TaskPieModule.TaskCategoryType.NotStarted,
        },
        
        {
            name: 'Late!',
            color: 'd54130',
            type: TaskPieModule.TaskCategoryType.NotStarted,
        },
        
        {
            name: 'On work',
            color: '4cabe1',
            type: TaskPieModule.TaskCategoryType.InProgress,
        },
        
        {
            name: 'Complete',
            color: '88be39',
            type: TaskPieModule.TaskCategoryType.Completed,
        },
    ];
    \n

    Each item has the following structure:

    \n
    interface ITaskCategory {
        /**
         * The color.
         */
        color?: string | number | Color.Color;

        /**
         * Number of tasks.
         */
        count?: number;

        /**
         * The name.
         */
        name: string;

        /**
         * The type.
         */
        type?: TaskCategoryType;
    }
    \n

    The recommed way is to use the addCategory() method. These method creates ITaskCategory objects that raise change events for its properties, so this has better support for data binding.

    \n

    Data binding

    \n

    The following example is similar to the demp app.

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:taskPie=\"nativescript-taskpie\"
          navigatingTo=\"onNavigatingTo\">

      <taskPie:TaskPie id=\"my-taskpie\"
                       counts=\"{{ taskCounts }}\"
                       pieSize=\"{{ pieSize }}\"
                       description=\"{{ daysLeft ? (daysLeft + ' days left') : null }}\"
                       pieText=\"{{ pie.totalLeft }}\" pieSubText=\"tasks left\"
                       countChanged=\"{{ taskCountChanged }}\" />
    </Page>
    \n

    ViewModel

    \n
    import Observable = require(\"data/observable\");
    import TaskPieModule = require('nativescript-taskpie');

    export function onNavigatingTo(args) {
        var page = args.object;
        var pie = <TaskPieModule.TaskPie>page.getViewById('my-taskpie');

        var viewModel: any = new Observable.Observable();
        viewModel.set('daysLeft', 79);  // value for description
        viewModel.set('pie', pie);
        viewModel.set('pieSize', 720);  // draw pie with 720x720
        viewModel.set('taskCounts', [11, 4, 1, 11]);  // initial count values
        
        viewModel.taskCountChanged = (category, newValue, oldValue, pie) => {
            console.log(\"Value of category '\" + category.name + \"' changed from '\" + oldValue + \"' to '\" + newValue + \"'.\");
        };
        
        page.bindingContext = viewModel;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":23}},"nativescript-number-progressbar":{"name":"nativescript-number-progressbar","version":"1.0.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    Nativescript-Number-ProgressBar

    \n

    NativeScript Number ProgressBar provides simple ProgressBar with styling.Feedbacks and PRs are most Welcome.

    \n

    Demo

    \n

    |\n---------- |\n\"alt |

    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    daimajia/NumberProgressBar
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm i nativescript-number-progressbar --save

    \n

    Usage

    \n

    XML:

    \n
    <Page 
        xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
        xmlns:NumberProgressBar=\"nativescript-number-progressbar\" loaded=\"pageLoaded\"> 
        <Page.actionBar>
          <ActionBar title=\"Nativescript Number ProgressBar\" />
      </Page.actionBar>
      <StackLayout padding=\"10\">
          <NumberProgressBar:NumberProgressBar  id=\"sb\" marginTop=\"20\" />
            <NumberProgressBar:NumberProgressBar  id=\"sb1\" marginTop=\"30\"  progress_text_size=\"30\" progress_text_color=\"#2BAB42\" progress_unreached_bar_height=\"5\" progress_reached_bar_height=\"10\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#2BAB42\" />
           <NumberProgressBar:NumberProgressBar  id=\"sb2\" marginTop=\"30\"  progress_text_size=\"40\" progress_text_color=\"#F0D812\" progress_unreached_bar_height=\"10\" progress_reached_bar_height=\"20\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#F0D812\"  />
           <NumberProgressBar:NumberProgressBar  id=\"sb3\" marginTop=\"30\"  progress_text_size=\"50\" progress_text_color=\"#F43B5A\" progress_unreached_bar_height=\"20\" progress_reached_bar_height=\"40\" progress_unreached_color=\"#ededed\" progress_reached_color=\"#F43B5A\"  />
           <NumberProgressBar:NumberProgressBar  id=\"sb4\" marginTop=\"30\"  progress_text_size=\"60\" progress_text_color=\"#D726EC\" progress_unreached_bar_height=\"20\" progress_reached_bar_height=\"40\" progress_unreached_color=\"#34EC1A\" progress_reached_color=\"#D726EC\"  />

            
      </StackLayout>
    </Page>
    \n

    TS:

    \n

    import {NumberProgressBar} from 'nativescript-number-progressbar';
    private npb: NumberProgressBar;
    this.npb = <NumberProgressBar>mainPage.getViewById('sb');
    this.npb.incrementProgressBy(1);
    \n

    Attributes

    \n

    There are several attributes you can set:

    \n

    \"\"

    \n

    The reached area and unreached area:

    \n
      \n
    • color
      • \n
    • height
      • \n
    \n

    The text area:

    \n
      \n
    • color
      • \n
    • text size
      • \n
    • visibility
      • \n
    • distance between reached area and unreached area
      • \n
    \n

    The bar:

    \n
      \n
    • max progress
      • \n
    • current progress
      • \n
    \n

    progress_text_size - (int) - optional

    \n

    Attribute to specify the size of text in Progress Bar.

    \n

    progress_text_color - (color string) - optional

    \n

    Attribute to specify the color of text in Progress Bar.

    \n

    progress_unreached_color - (color string) - optional

    \n

    Attribute to specify the color of progress unreached area in Progress Bar.

    \n

    progress_reached_color - (color string) - optional

    \n

    Attribute to specify the color of progress reached area in Progress Bar.

    \n

    progress_unreached_bar_height - (int) - optional

    \n

    Attribute to specify the height of unreached Progress Bar.

    \n

    progress_reached_bar_height - (int) - optional

    \n

    Attribute to specify the height of reached Progress Bar.

    \n

    Methods

    \n

    incrementProgressBy(int)

    \n

    Increment the progress bar with any value.

    \n

    getProgress()

    \n

    To know the current progress bar value at a time.

    \n

    setProgress(int)

    \n

    To set the progress bar value.

    \n

    getProgressMax()

    \n

    To know the progress bar maximum value.

    \n

    setProgressMax(int)

    \n

    To set the progress bar maximum value.

    \n","downloadStats":{"lastDay":0,"lastWeek":1,"lastMonth":0}},"@essent/nativescript-appdynamics":{"name":"@essent/nativescript-appdynamics","version":"22.8.4","license":"Apache-2.0","readme":"

    @essent/nativescript-appdynamics

    \n
    ns plugin add @essent/nativescript-appdynamics
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angelengineering/sleepcontrol":{"name":"@angelengineering/sleepcontrol","version":"1.1.0","license":"Apache-2.0","readme":"

    @angelengineering/sleepcontrol

    \n

    Nativescript sleepcontrol \"apple\" \"android\"

    \n

    This plugin allows you to keep your device awake while the current app is running, or allow it to sleep while the current app is running. This will not affect other apps, and the screen will be prevented from sleep only while the current application is running.

    \n
    ns plugin add @angelengineering/sleepcontrol
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin repository.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/plugin-demos/sleepcontrol.ts.

    \n

    In short here are the steps:

    \n

    Import the plugin functions

    \n

    TypeScript

    \n
    import { allowSleep, denySleep, isSleepAllowed } from '@angelengineering/sleepcontrol';
    \n

    Use the plugin

    \n
    allowSleep();
    denySleep();
    \n

    Exposed properties

    \n
    export function isSleepAllowed(): boolean;
    export function denySleep(): void;
    export function allowSleep(): void;
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@busychild/nativescript-exoplayer":{"name":"@busychild/nativescript-exoplayer","version":"6.0.3","license":"Apache-2.0","readme":"

    @nstudio/nativescript-exoplayer

    \n

    NativeScript plugin that uses the ExoPlayer video player on Android and AVPlayerViewController on iOS to play local and remote videos.

    \n
    npm install @nstudio/nativescript-exoplayer
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Google ExoPlayeriOS AVPlayer
    \n

    For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

    \n

    Based on

    \n

    This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

    \n

    Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

    \n

    The Google ExoPlayer adds about a meg and a half plugin to the Android application.

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:exoplayer=\"@nstudio/nativescript-exoplayer\">
            <StackLayout>

                <exoplayer:Video id=\"nativeexoplayer\"
                controls=\"true\" finished=\"{{ videoFinished }}\"
                loop=\"true\" autoplay=\"false\" height=\"280\"
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

            </StackLayout>
    </Page>
    \n

    NativeScript Angular Usage

    \n
    // somewhere at top of your component or bootstrap file
    import { registerElement } from \"@nativescript/angular\";
    import { Video } from '@nstudio/nativescript-exoplayer';
    registerElement(\"Video\", () => Video);
    \n
      <Video
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\"
          height=\"300\"></Video>
    \n

    Properties

    \n
      \n
    • src - required
      • \n
    \n

    Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n
      \n
    • srcType - (Android Only)
      • \n
    \n
      \n
    • 0 = DETECT (from src)
      • \n
    • 1 = SS
      • \n
    • 2 = DASH
      • \n
    • 3 = HLS
      • \n
    • 4 = OTHER
      • \n
    \n
      \n
    • enableSubtitles
      • \n
    \n

    By default, subtitle support is off. Use this flag to turn them on.

    \n
      \n
    • subtitles
      • \n
    \n

    Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

    \n
      \n
    • autoplay - (boolean) - optional
      • \n
    \n

    Set if the video should start playing as soon as possible or to wait for user interaction.

    \n
      \n
    • finished - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n
      \n
    • controls - (boolean) - optional
      • \n
    \n

    Set to use the native video player's media playback controls.

    \n
      \n
    • muted - (boolean) - optional
      • \n
    \n

    Mutes the native video player.

    \n
      \n
    • loop - (boolean) - optional
      • \n
    \n

    Sets the native video player to loop once playback has finished.

    \n
      \n
    • backgroundAudio - (boolean) - optional
      • \n
    \n

    If set to true, the audio for the video won't pause any existing audio playing. Instead it will play simultaneously with the existing audio. This is similar to how instagram and facebook play their video audio.

    \n
      \n
    • fill - (VideoFill) - optional
      • \n
    \n

    Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

    \n

    iOS:

    \n
      \n
    • VideoFill.default = AVLayerVideoGravityResize
      • \n
    • VideoFill.aspect = AVLayerVideoGravityResizeAspect
      • \n
    • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill
      • \n
    \n

    See here for explanation.

    \n
      \n
    • playbackReady - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video is ready to play.

    \n
      \n
    • seekToTimeComplete - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video has finished seekToTime.

    \n
      \n
    • observeCurrentTime - (boolean) - optional
      • \n
    \n

    If set to true, currentTimeUpdated callback is possible.

    \n
      \n
    • currentTimeUpdated - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the time is updated.

    \n

    API

    \n
      \n
    • play() - Start playing the video
      • \n
    • pause() - Pause the video
      • \n
    • seekToTime(time: number) - Seek the video to a time (milliseconds)
      • \n
    • getCurrentTime() - Returns the current time in the video duration (milliseconds)
      • \n
    • getDuration() - Returns the duration of the video (milliseconds)
      • \n
    • destroy() - Destroy the video player and free resources
      • \n
    • mute(boolean) - Mute the current video
      • \n
    • setVolume() - Set the volume - Must be between 0 and 1.
      • \n
    \n

    Android only

    \n
      \n
    • stop() - Stop the playback - this resets the player and remove the video src
      • \n
    \n

    Breaking Changes

    \n
      \n
    • Android will now attach/detach to the application suspend/resume and de-register/re-register video
      • \n
    • Subtitle support will by default be disabled.
      • \n
    \n

    ExoPlayer Encryption (Android only)

    \n

    Create a key based on the password "secret", outputs salt, key, and iv... (You can redirect to a file if you want)

    \n
      \n
    • openssl enc -aes-256-ctr -k secret -P --nosalt\nWill output because we aren't using a salt:
      • \n
    \n
    key=2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B
    iv =015E42FF678B2B90B743111A396EF850
    \n

    Normally you would not want to add the --nosalt, but to make this easier to follow as the key & iv will be the same with --nosalt\nWhich would then give you output like this, but every difference in salt you get a different key/iv:

    \n
    salt=42D57450DAF116BD
    key=E8E82C95A1A4FEFE5334578678CAD5699091D34322FDD5811A786BE82961DD00
    iv =ED07304DF8D0D0AFA2EB9B13D75BD817
    \n

    Create the Encrypted video file

    \n
      \n
    • openssl enc --nosalt -aes-256-ctr -in small.mp4 -out video.enc -K 2BB80D537B1DA3E38BD30361AA855686BDE0EACD7162FEF6A25FE97BF527A25B -iv 015E42FF678B2B90B743111A396EF850
      • \n
    • \n
        \n
      • you can use -S <your_salt_value> to set the salt value instead of --nosalt
        • \n
      \n
      • \n
    \n

    Contributors

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-jwt":{"name":"nativescript-angular-jwt","version":"1.0.9","license":"MIT","readme":"

    nativescript-angular-jwt

    \n

    \"npm

    \n

    NOTE: This library is now at version 5 and is published on npm as nativescript-angular-jwt. If you're looking for the pre-v1.0 version of this library, it can be found in the pre-v1.0 branch and on npm as angular2-jwt.

    \n

    Version v5 of this library has some breaking changes concerning the allowedDomains and disallowedRoutes.

    \n

    nativescript-angular-jwt v5 is to be used with Angular v10+ and RxJS v6+. For Angular v6+ to v9, use nativescript-angular-jwt v4

    \n

    This library provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.

    \n

    This library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or in a cookie if successful.

    \n
    \n

    Note: This library can only be used with Angular 4.3 and higher because it relies on an HttpInterceptor from Angular's HttpClient. This feature is not available on lower versions.

    \n
    \n

    Installation

    \n
    # installation with npm
    npm install nativescript-angular-jwt

    # installation with yarn
    yarn add nativescript-angular-jwt
    \n

    Usage: Standalone

    \n

    If you are only interested in the JWT Decoder, and are not interested in extended\ninjectable features, you can simply create an instance of the utility and use it\ndirectly:

    \n
    import { JwtHelperService } from \"nativescript-angular-jwt\";

    const helper = new JwtHelperService();

    const decodedToken = helper.decodeToken(myRawToken);
    const expirationDate = helper.getTokenExpirationDate(myRawToken);
    const isExpired = helper.isTokenExpired(myRawToken);
    \n

    Usage: Injection

    \n

    Import the JwtModule module and add it to your imports list. Call the forRoot method and provide a tokenGetter function. You must also add any domains to the allowedDomains, that you want to make requests to by specifying an allowedDomains array.

    \n

    Be sure to import the HttpClientModule as well.

    \n
    import { JwtModule } from \"nativescript-angular-jwt\";
    import { HttpClientModule } from \"@angular/common/http\";

    export function tokenGetter() {
      return localStorage.getItem(\"access_token\");
    }

    @NgModule({
      bootstrap: [AppComponent],
      imports: [
        // ...
        HttpClientModule,
        JwtModule.forRoot({
          config: {
            tokenGetter: tokenGetter,
            allowedDomains: [\"example.com\"],
            disallowedRoutes: [\"http://example.com/examplebadroute/\"],
          },
        }),
      ],
    })
    export class AppModule {}
    \n

    Any requests sent using Angular's HttpClient will automatically have a token attached as an Authorization header.

    \n
    import { HttpClient } from \"@angular/common/http\";

    export class AppComponent {
      constructor(public http: HttpClient) {}

      ping() {
        this.http.get(\"http://example.com/api/things\").subscribe(
          (data) => console.log(data),
          (err) => console.log(err)
        );
      }
    }
    \n

    Configuration Options

    \n

    tokenGetter: function(HttpRequest): string

    \n

    The tokenGetter is a function which returns the user's token. This function simply needs to make a retrieval call to wherever the token is stored. In many cases, the token will be stored in local storage or session storage.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        tokenGetter: () => {
          return localStorage.getItem(\"access_token\");
        },
      },
    });
    \n

    If you have multiple tokens for multiple domains, you can use the HttpRequest passed to the tokenGetter function to get the correct token for each intercepted request.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        tokenGetter: (request) => {
          if (request.url.includes(\"foo\")) {
            return localStorage.getItem(\"access_token_foo\");
          }

          return localStorage.getItem(\"access_token\");
        },
      },
    });
    \n

    allowedDomains: array

    \n

    Authenticated requests should only be sent to domains you know and trust. Many applications make requests to APIs from multiple domains, some of which are not controlled by the developer. Since there is no way to know what the API being called will do with the information contained in the request, it is best to not send the user's token to all APIs in a blind fashion.

    \n

    List any domains you wish to allow authenticated requests to be sent to by specifying them in the allowedDomains array. Note that standard http port 80 and https port 443 requests don't require a port to be specified. A port is only required in the allowed domains host name if you are authenticating against a non-standard port e.g. localhost:3001

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        allowedDomains: [\"localhost:3001\", \"foo.com\", \"bar.com\"],
      },
    });
    \n

    disallowedRoutes: array

    \n

    If you do not want to replace the authorization headers for specific routes, list them here. This can be useful if your\ninitial auth route(s) are on an allowed domain and take basic auth headers. These routes need to be prefixed with the correct protocol (http://, https://). If you want to add a route to the list of disallowed routes regardless of the protocol, you can prefix it with //.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        disallowedRoutes: [
          \"http://localhost:3001/auth/\",
          \"https://foo.com/bar/\",
          \"//foo.com/bar/baz\",
          /localhost:3001\\/foo\\/far.*/,
        ], // strings and regular expressions
      },
    });
    \n

    Note: If requests are sent to the same domain that is serving your Angular application, you do not need to add that domain to the allowedDomains array. However, this is only the case if you don't specify the domain in the Http request.

    \n

    For example, the following request assumes that the domain is the same as the one serving your app. It doesn't need to be allowed in this case.

    \n
    this.http.get('/api/things')
      .subscribe(...)
    \n

    However, if you are serving your API at the same domain as that which is serving your Angular app and you are specifying that domain in Http requests, then it does need to be explicitely allowed.

    \n
    // Both the Angular app and the API are served at
    // localhost:4200 but because that domain is specified
    // in the request, it must be allowed
    this.http.get('http://localhost:4200/api/things')
      .subscribe(...)
    \n

    headerName: string

    \n

    The default header name is Authorization. This can be changed by specifying a custom headerName which is to be a string value.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        headerName: \"Your Header Name\",
      },
    });
    \n

    authScheme: string | function(HttpRequest): string

    \n

    The default authorization scheme is Bearer followed by a single space. This can be changed by specifying a custom authScheme. You can pass a string which will prefix the token for each request.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        authScheme: \"Basic \",
      },
    });
    \n

    If you want to change the auth scheme dynamically, or based on the request, you can configure a getter function which returns a string.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        authScheme: (request) => {
          if (request.url.includes(\"foo\")) {
            return \"Basic \";
          }

          return \"Bearer \";
        },
      },
    });
    \n

    throwNoTokenError: boolean

    \n

    Setting throwNoTokenError to true will result in an error being thrown if a token cannot be retrieved with the tokenGetter function. Defaults to false.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        throwNoTokenError: true,
      },
    });
    \n

    skipWhenExpired: boolean

    \n

    By default, the user's JWT will be sent in HttpClient requests even if it is expired. You may choose to not allow the token to be sent if it is expired by setting skipWhenExpired to true.

    \n
    // ...
    JwtModule.forRoot({
      config: {
        // ...
        skipWhenExpired: true,
      },
    });
    \n

    Using a Custom Options Factory Function

    \n

    In some cases, you may need to provide a custom factory function to properly handle your configuration options. This is the case if your tokenGetter function relies on a service or if you are using an asynchronous storage mechanism (like Ionic's Storage).

    \n

    Import the JWT_OPTIONS InjectionToken so that you can instruct it to use your custom factory function.

    \n

    Create a factory function and specify the options as you normally would if you were using JwtModule.forRoot directly. If you need to use a service in the function, list it as a parameter in the function and pass it in the deps array when you provide the function.

    \n
    import { JwtModule, JWT_OPTIONS } from 'nativescript-angular-jwt';
    import { TokenService } from './app.tokenservice';

    // ...

    export function jwtOptionsFactory(tokenService) {
      return {
        tokenGetter: () => {
          return tokenService.getAsyncToken();
        },
        allowedDomains: [\"example.com\"]
      }
    }

    // ...

    @NgModule({
      // ...
      imports: [
        JwtModule.forRoot({
          jwtOptionsProvider: {
            provide: JWT_OPTIONS,
            useFactory: jwtOptionsFactory,
            deps: [TokenService]
          }
        })
      ],
      providers: [TokenService]
    })
    \n

    Note:: If a jwtOptionsFactory is defined, then config is ignored. Both configuration alternatives can't be defined at the same time.

    \n

    Configuration for Ionic 2+

    \n

    The custom factory function approach described above can be used to get a token asynchronously with Ionic's Storage.

    \n
    import { JwtModule, JWT_OPTIONS } from 'nativescript-angular-jwt';
    import { Storage } from '@ionic/storage';

    export function jwtOptionsFactory(storage) {
      return {
        tokenGetter: () => {
          return storage.get('access_token');
        },
        allowedDomains: [\"example.com\"]
      }
    }

    // ...

    @NgModule({
      // ...
      imports: [
        JwtModule.forRoot({
          jwtOptionsProvider: {
            provide: JWT_OPTIONS,
            useFactory: jwtOptionsFactory,
            deps: [Storage]
          }
        })
      ]
    })
    \n

    Note:: If a jwtOptionsFactory is defined, then config is ignored. Both configuration alternatives can't be defined at the same time.

    \n

    Configuration Options

    \n

    JwtHelperService: service

    \n

    This service contains helper functions:

    \n

    isTokenExpired (old tokenNotExpired function)

    \n
    import { JwtHelperService } from 'nativescript-angular-jwt';
    // ...
    constructor(public jwtHelper: JwtHelperService) {}

    ngOnInit() {
    console.log(this.jwtHelper.isTokenExpired()); // true or false
    }
    \n

    getTokenExpirationDate

    \n
    import { JwtHelperService } from 'nativescript-angular-jwt';
    // ...
    constructor(public jwtHelper: JwtHelperService) {}

    ngOnInit() {
    console.log(this.jwtHelper.getTokenExpirationDate()); // date
    }
    \n

    decodeToken

    \n
    import { JwtHelperService } from 'nativescript-angular-jwt';
    // ...
    constructor(public jwtHelper: JwtHelperService) {}

    ngOnInit() {
    console.log(this.jwtHelper.decodeToken(token)); // token
    }
    \n

    What is Auth0?

    \n

    Auth0 helps you to:

    \n
      \n
    • Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, among others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
      • \n
    • Add authentication through more traditional username/password databases.
      • \n
    • Add support for linking different user accounts with the same user.
      • \n
    • Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
      • \n
    • Analytics of how, when and where users are logging in.
      • \n
    • Pull data from other sources and add it to the user profile, through JavaScript rules.
      • \n
    \n

    Create a free Auth0 account

    \n
      \n
    1. Go to Auth0 and click Sign Up.
      2. \n
    2. Use Google, GitHub or Microsoft Account to login.
      3. \n
    \n

    Issue Reporting

    \n

    If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

    \n

    Author

    \n

    Auth0

    \n

    License

    \n

    This project is licensed under the MIT license. See the LICENSE file for more info.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal":{"name":"nativescript-paypal","version":"2.6.9","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-paypal/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript PayPal

    \n

    NativeScript module for implementing simple PayPal checkouts using official SDK.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    \n

    Roadmap

    \n\n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-paypal
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n

    Keep sure to define the following permissions, activities and other data in your manifest file:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

        <uses-permission android:name=\"android.permission.INTERNET\" />
        <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />    
        <uses-permission android:name=\"android.permission.CAMERA\" />
        <uses-permission android:name=\"android.permission.VIBRATE\" />
        
        <action android:name=\"android.intent.action.MAIN\" />
     
        <category android:name=\"android.intent.category.LAUNCHER\" />

        <uses-feature android:name=\"android.hardware.camera\"
                      android:required=\"false\" />
        <uses-feature android:name=\"android.hardware.camera.autofocus\"
                      android:required=\"false\" />

        <application>
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.LoginActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentMethodActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentConfirmActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PayPalFuturePaymentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentConsentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentInfoActivity\" />
            <activity android:name=\"io.card.payment.DataEntryActivity\" />
    \t\t
    \t    <service android:name=\"com.paypal.android.sdk.payments.PayPalService\"
                     android:exported=\"false\" />
        </application>
        
    </manifest>
    \n

    app.gradle

    \n

    Keep sure to have a reference to the PayPal SDK in your app/App_Resources/Android/app.gradle file of your project.

    \n
    dependencies {
        // PayPal
        compile 'com.paypal.sdk:paypal-android-sdk:2.14.2'
    }
    \n

    Demo

    \n

    For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

    \n

    Otherwise ...

    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    var PayPal = require(\"nativescript-paypal\");
    \n

    Initialize

    \n

    Initialize the environment:

    \n
    function onPageLoaded(args) {
        PayPal.init({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
    exports.onPageLoaded = onPageLoaded;
    \n

    The (optional) object that is submitted to the PayPal.init function has the following structure:

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    acceptCreditCards[OPTIONAL] Accept credit cards or not. Default: (true)
    account[OPTIONAL] Defines information about the account.
    clientIdThe PayPal ID for your app that was generated in the PayPal Developer Portal.
    defaults[OPTIONAL] Defines default data.
    environment[OPTIONAL] The environment to use. Possible values are: 0 = ENVIRONMENT_SANDBOX, 1 = ENVIRONMENT_PRODUCTION, 2 = ENVIRONMENT_NO_NETWORK.
    onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
    rememberUser[OPTIONAL] Remember the last user for the next payment or not. Default: (true)
    requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 230958624
    \n
    account
    \n

    The account object has the following structure:

    \n
    Properties
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    name[OPTIONAL] The name of the merchant.
    privacyPolicy[OPTIONAL] The URI to the privacy policy of the merchant.
    userAgreement[OPTIONAL] The URI to the user agreement of the merchant.
    \n
    defaults
    \n

    The defaults object has the following structure:

    \n
    Properties
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    userEmail[OPTIONAL] The default user email.
    userPhone[OPTIONAL] The default user phone.
    userPhoneCountryCode[OPTIONAL] The default user phone country code.
    \n

    Start a payment

    \n
    function buyProduct(args) {
        // configure
        var payment = PayPal.newPayment()
            .setDescription('My product')
            .setAmount(59.79);

        // start checkout / payment
        payment.start(function(cbResult) {
            switch (cbResult.code) {
                case 0:
                    // SUCCESS
                    // pay key is stored in 'cbResult.key'
                    break;
                    
                case 1:
                    // operation was CANCELLED
                    break;
                    
                case -1:
                    // checkout FAILED
                    break;
                    
                case -2:
                    // \"unhandled exception\"
                    break;
            }
        });
    }
    exports.buyProduct = buyProduct;
    \n

    The payment object that is created by PayPal.newPayment function has the following structure.

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    getAmountGets the price. Example: var a = payment.getAmount();
    getBnCodeGets the BN code. Example: var bc = payment.getBnCode();
    getCurrencyGets the custom currency to use. Example: var c = payment.getCurrency();
    getCustomGets the custom value for the payment. Example: var c = payment.getCustom();
    getDescriptionGets the (short) description. Example: var d = payment.getDescription();
    getDetailsGets an object with the payment details. Example: var d = payment.getDetails();
    getInvoiceNumberGets the custom invoice number. Example: var i = payment.getInvoiceNumber();
    setAmountSets the price. Example: payment.setAmount(1.25);
    setBnCodeSets a BN code. Example: payment.setBnCode('Your BN Code');
    setCurrencySets the custom currency to use. Example: payment.setCurrency('EUR');
    setCustomSets the custom value for the payment. Example: payment.setCustom('MY-PRODUCT-ID');
    setDetailsSets details (shipping, subtotal & tax). Example: payment.setDetails(4.95, 199.99, 1.19);
    setDescriptionSets the (short) description. Example: payment.setDescription('This is really awesom!');
    setInvoiceNumberSets the custom invoice number. Example: payment.setInvoiceNumber('MY_INVOICE-666');
    startStarts the payment / checkout process.
    \n
    start
    \n

    The callback that is submitted to the payment.start method receives an object with the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    codeThe result code. 0 = success, -3 = JSON parse error, -2 = unhandled exception, -1 = checkout failed, 1 = cancelled, 2 = no confirm data, 3 = no JSON data
    keyThe key of the payment (if code = 0)
    \n

    Enhancements

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use PayPal.addLogger function to add a callback that receives a message from the module:

    \n
    PayPal.addLogger(function(msg) {
        console.log('[nativescript-paypal]: ' + msg);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-searchable-select":{"name":"@ticnat/nativescript-searchable-select","version":"2.0.5","license":"Apache-2.0","readme":"

    @ticnat/nativescript-searchable-select

    \n

    Since nativescript changed the way it fill up ObservableArray and breaking changes so\nFor nativescript >= 8.3.0

    \n
    ns plugin add @ticnat/nativescript-searchable-select
    \n

    For nativescript < 8.3.0

    \n
    ns plugin add @ticnat/nativescript-searchable-select@1.0.7
    \n

    FilterSelect

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin to provide an listview widget to select AND filter items.

    \n

    Sample Screenshots

    \n

    Android and ios

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n

    Installation

    \n
    NativeScript 7.x
    \n
      \n
    • tns plugin add @ticnat/nativescript-searchable-select
      • \n
    \n

    import css

    \n

    @import '@ticnat/nativescript-searchable-select/styles.css';

    \n

    *Be sure to run a new build after adding plugins to avoid any issues

    \n

    Vanilla NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:SS="@ticnat/nativescript-searchable-select" on the Page element

    \n

    XML

    \n
    <Page xmlns:SS=\"@ticnat/nativescript-searchable-select\">
       <StackLayout>
         <SS:SearchableSelect
         items=\"{{ countries }}\"
         hint=\"Please select some countries\"
         modal_title=\"Countries\" search_param=\"name\"
         primary_key=\"code\"
         change=\"{{ onSelect }}\"
         />
       </StackLayout>
    </Page>
    \n

    or with inner template option:

    \n
    <Page xmlns:SS=\"@ticnat/nativescript-searchable-select\">
        <SS:SearchableSelect render=\"label\" selected=\"{{ selected }}\" items=\"{{ countries }}\" hint=\"Please select some countries\" modal_title=\"Countries\" search_param=\"name\" primary_key=\"code\" change=\"{{ onSelect }}\">
              <SS:SearchableSelect.itemTemplate>
                <GridLayout class=\"item\" height=\"50\" columns=\"*,100\">
                  <Label col=\"0\" class=\"text-center\" text=\"{{ name }}\" textWrap=\"true\" />
                  <Label col=\"1\" class=\"text-center\" text=\"{{ code }}\" textWrap=\"true\" />
                </GridLayout>
              </SS:SearchableSelect.itemTemplate>
            </SS:SearchableSelect>
    </Page>
    \n

    Angular NativeScript

    \n

    Regiter plugin in Component class

    \n

    import { registerElement } from 'nativescript-angular/element-registry';
    import { FilterSelect } from '@ticnat/nativescript-searchable-select';
    registerElement('FilterSelect', () => FilterSelect);
    \n

    HTML

    \n
        <FilterSelect
            height=\"100%\"
            [items]=\"items\"
            (change)=\"onitemselected($event)\"
            hint=\"Please select some items\"
            modal_title=\"item\" search_param=\"name\"
            primary_key=\"id\">

        </FilterSelect>
    \n

    Attributes

    \n

    see demo examples for more information

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeDescriptionDefault
    renderto render "tags" or "label" or "drop"string : tags
    multipleto limit the options selected to one if set to falseboolean : true
    search_paramindex of the string value in the items object to search on itstring : name
    item_templatexml template for the listview itemsstring : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" />
    changechange event treger when select is donefunction : optional change(args) and selected item can be accessed as args.selected
    modal_titletitle of the filter modalString : Please select items
    hintstring to show when no items selectedPlease select some items
    itemsarray of objects to populate the list of optionsObservableArray :[]
    primary_keyunique index of the items objectstring : id
    selectedarray of objects to mark some options as selected and it will be the result when select is doneArray: []
    disabledto disable select bottonboolean : false
    allowSearchto enable/disable search bar in the modalboolean : true
    windowHeightto specify the height of the select windownumber : 70
    refreshto refresh the filter select with new values good with remote datafunction
    searchHintsearch placeholder or hint in the items modal"Search for item"
    xbtnremove tag text you can use tag icon here"x"
    closeTextclose button text"Close"
    doneTextdone button text"Done"
    clearTextclear button text"Clear"
    selectTextselect button text"Select"
    autofocuskeyboard up when you open modal so you can start searchfalse
    open()open modal programmaticallyfunction
    closeclose event treger when modal is closedyou can get the selected array by args.selected if the modal closed without any selection the array will be empty
    \n

    CSS core-theme styles is required for modal page if you dont have them just make your own

    \n

    see styles.css so you can override or make your own

    \n
      \n
    • and don't forget to share with us your nice styles :D
      • \n
    \n

    font icons

    \n
      \n
    • \n

      font icons are required if you are using dropdown render

      \n

      and you can add fontawsome icon as a select triger ( hint="{{'fa-list-ul' | fonticon}}" )

      \n

      see demo

      \n
      • \n
    \n

    License

    \n

    This plugin is built and maintained based on this plugin and many thanks for @moayadnajd

    \n

    For contributing

    \n

    just do a pull request with description of your changes or open issue with your ideas

    \n

    Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-insomnia":{"name":"nativescript-insomnia","version":"2.0.0","license":"MIT","readme":"

    NativeScript Insomnia

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.3.

    \n
    \n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-insomnia
    \n

    Usage

    \n

    To use this plugin you must first require() it:

    \n

    JavaScript

    \n
    var insomnia = require(\"nativescript-insomnia\");
    \n

    TypeScript

    \n

    You could do the same as in JS, but this looks fancier, right?

    \n
    import { keepAwake, allowSleepAgain } from \"nativescript-insomnia\";
    \n

    keepAwake

    \n
      insomnia.keepAwake().then(function() {
          console.log(\"Insomnia is active\");
      })
    \n

    allowSleepAgain

    \n
      insomnia.allowSleepAgain().then(function() {
          console.log(\"Insomnia is inactive, good night!\");
      })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-explosionfield":{"name":"nativescript-explosionfield","version":"1.1.1","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-explosionfield/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"PayPal

    \n

    NativeScript-ExplosionField

    \n

    NativeScript plugin to create an exploding dust effect animation for Android {N} apps.

    \n

    ExplosionField - tyrantgit

    \n

    Android Only

    \n

    Installation

    \n

    npm install nativescript-explosionfield

    \n

    Sample

    \n

    \"GifExample\"

    \n

    This .gif does not do the animation justice, please watch the YouTube video\nto see how smooth it really is. Watch here on YouTube

    \n

    Usage

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
      <StackLayout>
        <Button text=\"Boom\" tap=\"goBoom\" />
        <Label text=\"Explode This\" tap=\"goBoom\" />
      </StackLayout> 
    </Page>
    \n

    JS

    \n
    // require the plugin module
    var explosion = require(\"nativescript-explosionfield\");

    function goBoom(args) {    
        // call the *explode* method on the plugin passing in a view
        // on tap events in Nativescript this will be args.object.
        explosion.explode(args.object);
    }
    exports.goBoom = goBoom;
    \n

    API

    \n

    explode(view)

    \n
      \n
    • executes the animation
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elm-native-js":{"name":"elm-native-js","version":"1.1.1","license":"AGPL-3.0","readme":"

    Elm custom elements bindings for Nativescript

    \n

    This library should be used with elm-native elm library

    \n

    How it works

    \n

    We will use CustomElements feature to create mobile UI elements with nativescript objects and control the nativescript object from elm.

    \n

    Here's a simple representation of how UI elements are created

    \n

    Elm -> Nativescript -> Mobile

    \n

    When we listen for / receive an event,

    \n

    Mobile -> Nativescript -> Elm

    \n

    Consider this flow while building an application. This will help you to overcome performance issues if you encounter them.

    \n

    Supported Features

    \n
      \n
    • Dialog
      • \n
    • Page transitions animations
      • \n
    • Modal page
      • \n
    • Execution of OS specific property assignment and Native code (Be careful)
      • \n
    • Navigating page back and forth using frame functions
      • \n
    • Has bindings for all Nativescript UI elements
      • \n
    • Calling methods/setting attributes in the event object within elm (Will be improved in future)
      • \n
    • Simple and complex listviews templates
      • \n
    • Define and use custom nativescript elements / plugins and much more
      • \n
    \n

    More features will be added soon.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collapsing-header":{"name":"nativescript-collapsing-header","version":"2.0.0","license":"MIT","readme":"

    #NativeScript Collapsing Header Plugin for Android & iOS.

    \n

    \"NativeScript\n###Install\n$ tns plugin add nativescript-collapsing-header

    \n

    ###Example xml useage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \t xmlns:collapsingHeader=\"nativescript-collapsing-header\"
    \tloaded=\"pageLoaded\">
      \t<collapsingHeader:CollapsingHeader>
    \t\t<collapsingHeader:Header class=\"header-template\">
    \t\t\t<Label id=\"headerLabel\" text=\"Collapsing Header\"></Label>
    \t\t</collapsingHeader:Header>
    \t\t<collapsingHeader:Content class=\"body-template\">
    \t\t\t<TextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

    \t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

    \t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.
    \t\t\t\"    >
    \t\t\t</TextView>
    \t\t</collapsingHeader:Content>
    \t</collapsingHeader:CollapsingHeader>
    </Page>
    \n

    ###Example css

    \n
    #headerLabel{
    \tfont-size: 25;
    \thorizontal-align: center;
    \tcolor:#B2EBF2;
    \tmargin-top: 20;
    }
    .header-template{
    \tbackground-color:#212121;
    \theight: 65;
    \twidth: 100%;
    }
    .body-template TextView{
    \tfont-size:20;
    \tpadding:5 15;
    \tborder:none;
    }
    \n

    To use the collapsing header plugin you need to first import it into your xml layout with xmlns:collapsingHeader="nativescript-collapsing-header"

    \n

    when using the collapsing header plugin you need at least two layout views inside of the <collapsingHeader:CollapsingHeader> element. <collapsingHeader:Header> and <collapsingHeader:Content>.

    \n

    The <collapsingHeader:Header> has a property called dropShadow if set to true it will create a small drop shadow effect on the bottom of the header.

    \n

    ##{N} ListView support.\nAs of version 2.0.0 list view support has been added. Instead of a <collapsingHeader:Content> elment, add a <ListView> like you would normally, see below for and example.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \t xmlns:collapsingHeader=\"nativescript-collapsing-header\"
    \tloaded=\"pageLoaded\">
      \t<collapsingHeader:CollapsingHeader>
    \t\t<collapsingHeader:Header class=\"header-template\">
    \t\t\t<Label id=\"headerLabel\" text=\"Collapsing Header\"></Label>
    \t\t</collapsingHeader:Header>
    \t\t<ListView id=\"songList\" items=\"{{items}}\"  separatorColor=\"#333\">
    \t\t\t<ListView.itemTemplate>
    \t\t\t<GridLayout columns=\"auto, *, auto\" rows=\"auto\"  class=\"list-item\">
    \t\t\t\t<StackLayout row=\"0\" col=\"1\">
    \t\t\t\t<Label text=\"{{title}}\" textWrap=\"true\" class=\"title\"></Label>
    \t\t\t\t<Label text=\"{{artist}}\" textWrap=\"true\" class=\"title-sub\"></Label>
    \t\t\t\t</StackLayout>
    \t\t\t</GridLayout>
    \t\t\t</ListView.itemTemplate>
    \t\t</ListView>
    \t</collapsingHeader:CollapsingHeader>
    </Page>
    \n

    iOS Only

    \n

    to change the status bar color you there is a property for the <collapsingHeader:CollapsingHeader> element called statusIosBarBackgroundColor if not it defaults to white.

    \n

    ###Plugin Development Work Flow.

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

    ###Special thanks to:\nNathan Walker for setting up the {N} plugin seed that I used to get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

    \n

    ##License

    \n

    MIT

    \n

    for {N} version 1.7.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"v8-natives":{"name":"v8-natives","version":"1.2.5","license":{"type":"MIT","url":"https://github.com/Nathanaela/v8-natives/blob/master/LICENSE"},"readme":"

    v8-Natives

    \n

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    Updated:

    \n

    Last Tested on Node 14 & Chrome 80+

    \n

    Access v8 Engine Natives easily in Chrome & Node

    \n

    I was reading a blog/wiki article at https://github.com/petkaantonov/bluebird/wiki/Optimization-killers and it presents some really low level diagnostic commands that I was totally unaware of; and so I found them to be totally awesome in scope for several things I do. The V8 engine has a large array of commands that you can call that can get and/or set status in the actual v8 engine. This library is my attempt to make my life a lot easier and eliminate the errors in trying to use the v8 native commands. These low level commands allow you access to tell the v8 engine to optimize a routine and then find out if a routine can/is optimized.

    \n

    Now, you can call the v8 native commands directly (for example %CollectGarbage()); however if you forget to use the --allow-natives-syntax then the v8 engine will immediately stop parsing the file as the v8 commands all start with a '%' which is invalid JavaScript... What this library does is it is a simple wrapper that wraps those calls; so that I can do (v8.CollectGarbage()). If you forgot the --allow-natives-syntax it will still run your code fine; it just won't do anything.

    \n

    In the examples folder is a browser example; to show you how it works in Chrome/Chromium (chrome --js-flags="--allow-natives-syntax" browser.html). You can run it in a non-v8 browser and it will just use the dummy shim.
    \nIn addition there is a NodeJS example to show you the same support in NodeJS. (node --allow-natives-syntax node.js)

    \n

    Please note the examples and helper commands can show you how to use a good chunk of the optimization, general and Memory calls in the library. If someone wants to work up some examples using the variable/object information commands; they would gladly be accepted!

    \n

    Installing V8 Natives

    \n
    npm install v8-natives
    \n

    Breaking changes

    \n

    Removed from recent versions of V8

    \n
      \n
    • setFlags
      • \n
    • getV8Version
      • \n
    \n

    Renamed in v8

    \n
      \n
    • functionGetName = getFunctionName
      • \n
    \n

    Usage

    \n

    Browser:

    \n
    <script src=\"v8-browser.js\" onload=\"waitForV8(some_callback)\"></script>
    <script>function some_callback() { 
      v8.collectGarbage(); 
      /* more v8.commands */}
    </script>
    \n

    Node:

    \n
    var v8 = require('v8-natives');   
    v8.collectGarbage(); 
    /* more v8 commands */
    \n

    Commands

    \n

    Helper Commands

    \n
      \n
    • helpers.testOptimization(func[, funcNames]) - This will automatically call the function once, call the optimizeOnNextCall; call the function again, and then call printStatus on the function.\nYou can also do: testOptimization([func1, func2, func3]) this is so that if you have func1 which called func2 & func3 you can see if all three get optimized. It will automatically call func1, set the optimization flag on all three funcs, and then call func1 and then printStatus on all three funcs.
      • \n
    • helpers.printStatus(func) - Prints the function optimization results to the console
      • \n
    • helpers.benchmark(count, func) - Runs a func in a loop count times. This will automatically set the optimization flag; run it count times, run garbageCollection start the time; run func for count times; and then return the total time taken.
      • \n
    • window.waitForV8(callback) - [Browser ONLY]; this will wait until the v8 namespace is loaded properly and then call your callback.
      • \n
    \n

    General Commands

    \n
      \n
    • isNative() - Is the Native Support mode enabled (i.e. true = uses real wrapper; false = use dummy wrapper)
      • \n
    • functionGetName(func) - Gets the string name of a function
      • \n
    \n

    Memory Commands

    \n
      \n
    • getHeapUsage() - Shows how much heap is used
      • \n
    • collectGarbage() - Force a full Garbage Collection
      • \n
    \n

    Optimization Commands

    \n
      \n
    • deoptimizeNow -
      • \n
    • optimizeFunctionOnNextCall(func) - Tells v8 to optimizes the function the next time you call it
      • \n
    • deoptimizeFunction(func) - De-optimize a function
      • \n
    • neverOptimizeFunction(func) - Never Optimize a function
      • \n
    • getOptimizationStatus(func) - Get the functions optimization status [1 = Optimized, 2 = Un-optimized, 3 = Always Optimized, 4 = Never Optimized, 5 = ?, 6 = Maybe Optimized]\nI've only seen 1 & 2 from my tests; but according to the blog/wiki article I read 3, 4 & 6 are valid also)
      • \n
    \n

    Variable/Object information Commands

    \n
      \n
    • hasFastProperties(obj)
      • \n
    • hasFastSmiElements(obj)
      • \n
    • hasFastObjectElements(obj)
      • \n
    • hasFastDoubleElements(obj)
      • \n
    • hasDictionaryElements(obj)
      • \n
    • hasFastHoleyElements(obj)
      • \n
    • haveSameMap(obj1, obj2)
      • \n
    • isValidSmi(obj)
      • \n
    • isSmi(obj)
      • \n
    • hasFastSmiOrObjectElements(obj)
      • \n
    • hasSloppyArgumentsElements(obj)
      • \n
    \n

    Notes

    \n

    optimizedFunctionOnNextCall(func) needs the function ran before it can tag it for optimization. So the procedure is:

    \n
      \n
    • Run your function
      • \n
    • Run your function (Have to do this TWICE)
      • \n
    • Tag your function for optimization
      • \n
    • Run your Function
      • \n
    • Verify that the v8 Engine optimized it. If it did not optimized it; then that means you have code that can't be optimized in it.
      • \n
    \n

    ChangeLog

    \n

    v8 Internal function list has changed the following functions have been removed:

    \n
      \n
    • getOptimizationCount
      • \n
    \n

    v8 Renamed:

    \n
      \n
    • ClearFunctionTypeFeedback to ClearFunctionFeedback
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hendrickson-tyler/eslint-config":{"name":"@hendrickson-tyler/eslint-config","version":"4.2.0","license":"MIT","readme":"

    Lint Rules

    \n

    \"CodeQL\"

    \n

    Description

    \n

    This package contains a set of ESLint configs for a variety of languages, libraries, and frameworks. This is meant to ensure each of my personal projects has the same set of rules to keep them consistent. You are welcome to use these for your own projects.

    \n

    Configs

    \n

    Config files exist for the following use cases and are summarized below. You can mix and match these as needed and several configs inherit other configs automatically.

    \n
      \n
    • javascript - Recommended rules for projects using JavaScript.
      • \n
    • typescript - Recommended rules for projects using TypeScript.\n
        \n
      • Includes and modifies the rules from javascript as TypeScript is a superset of JavaScript.
        • \n
      \n
      • \n
    • angular - Recommended rules for projects using Angular.\n
        \n
      • Includes and modifies the rules from typescript and rxjs as Angular uses TypeScript and RxJS by default.
        • \n
      \n
      • \n
    • angular-html - Recommended template (HTML) rules for projects using Angular.\n
        \n
      • Used in conjunction with @angular-eslint/template-parser.
        • \n
      \n
      • \n
    • rxjs - Recommended rules for projects using the RxJS library.
      • \n
    • nativescript - Recommended rules for vanilla NativeScript projects.
      • \n
    • nativescript-angular - Recommended rules for NativeScript projects using Angular.\n
        \n
      • Includes the rules from nativescript.
        • \n
      \n
      • \n
    \n

    Installation

    \n

    From the root folder of your project, install the package with the following command:

    \n
    npm i @hendrickson-tyler/eslint-config --save-dev
    \n

    Angular Support

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Package VersionAngular Version Support
    1.x.x13
    2.x.x14
    3.x.x15
    4.x.x16
    \n

    Usage

    \n

    Once the package is installed, add the desired configs to the "extends" section of the eslintrc.json in the root of your project:

    \n
    {
        \"root\": true,
        \"ignorePatterns\": [
            \"projects/**/*\"
        ],
        \"overrides\": [
            {
                \"files\": [
                    \"*.ts\"
                ],
                \"parserOptions\": {
                    \"project\": [
                        \"tsconfig.json\"
                    ],
                    \"createDefaultProgram\": true
                },
                \"extends\": [
                    \"@hendrickson-tyler/eslint-config/angular\"
                ],
                ...
            }
            ...
        ]
    }
    \n

    Afterwards, you will be able to run your desired lint command to use the newly-imported lint rules.

    \n
    \n

    NOTE: Keeping this package up to date is highly recommended. Be sure that the version number in your package.json contains a ^ before the version number to update to the newest minor version when using npm update.

    \n
    \n

    Example:

    \n
    \"devDependencies\": {
        ...
        \"@hendrickson-tyler/eslint-config\": \"^4.0.0\",
        ...
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share":{"name":"nativescript-social-share","version":"1.6.0","license":"MIT","readme":"

    NativeScript Social Share Plugin

    \n

    A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

    \n

    \"\"\n\"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-social-share
    \n

    This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");
    var imageSourceModule = require(\"image-source\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    import { ImageSource } from \"image-source\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\");
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText(\"I love NativeScript!\");
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/drawingpad":{"name":"@nativescript-community/drawingpad","version":"4.1.0","license":"Apache-2.0","readme":"\n

    NativeScript DrawingPad

    \n    \n
    \nNativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.
    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add @nativescript-community/drawingpad
    \n

    NativeScript < 7:

    \n
    tns plugin add nativescript-drawingpad
    \n

    Samples

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Sample1\"\"Sample2\"
    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    gcacace/android-signaturepadSignatureView
    \n

    Video Tutorial

    \n

    Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

    \n

    Written Tutorial

    \n

    Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

    \n

    Usage

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:DrawingPad=\"@nativescript-community/drawingpad\" loaded=\"pageLoaded\">
        <ActionBar title=\"NativeScript-DrawingPad\" />
        <ScrollView>
            <StackLayout>

                <DrawingPad:DrawingPad
                height=\"400\"
                id=\"drawingPad\"
                penColor=\"{{ penColor }}\" penWidth=\"{{ penWidth }}\" />

            </StackLayout>
        </ScrollView>
    </Page>
    \n

    TS:

    \n
    import { Frame, ImageSource } from '@nativescript/core';
    import { DrawingPad } from '@nativescript-community/drawingpad';

    // To get the drawing...
    public getMyDrawing() {
        const drawingPad = Frame.topmost().getViewById('myDrawingPad');
        drawingPad.getDrawing().then((res) => {
            console.log(res);
            // At this point you have a native image (Bitmap on Android or UIImage on iOS)
            // so lets convert to a NS Image using the ImageSource
            const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NSapplication now.
            // now you might want a base64 version of the image
            const base64imageString = image.toBase64String('jpg'); // if you need it as base64
        });
    }


    // If you want to clear the signature/drawing...
    public clearMyDrawing() {
        const drawingPad = Frame.topmost().getViewById('myDrawingPad');
        drawingPad.clearDrawing();
    }
    \n

    Angular:

    \n
    import { Component, ElementRef, ViewChild } from '@angular/core';
    import { registerElement } from '@nativescript/angular';
    import { ImageSource } from '@nativescript/core';
    import { DrawingPad } from '@nativescript-community/drawingpad';

    registerElement('DrawingPad', () => DrawingPad);

    @Component({
      selector: 'drawing-pad-example',
      template: `
        <ScrollView>
          <StackLayout>
            <DrawingPad
              #DrawingPad
              height=\"400\"
              id=\"drawingPad\"
              penColor=\"#ff4081\"
              penWidth=\"3\"
            >
            </DrawingPad>

            <StackLayout orientation=\"horizontal\">
              <Button text=\"Get Drawing\" (tap)=\"getMyDrawing()\"></Button>
              <Button text=\"Clear Drawing\" (tap)=\"clearMyDrawing()\"></Button>
            </StackLayout>
          </StackLayout>
        </ScrollView>
          `
    })
    export class DrawingPadExample {
      @ViewChild('DrawingPad') DrawingPad: ElementRef;

      getMyDrawing(args) {
        // get reference to the drawing pad
        const pad = this.DrawingPad.nativeElement;

        // then get the drawing (Bitmap on Android) of the drawingpad
        let drawingImage;
        pad.getDrawing().then(
          data => {
            console.log(data);
            // At this point you have a native image (Bitmap on Android or UIImage on iOS)
            // so lets convert to a NS Image using the ImageSource
            const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NS
            drawingImage = img; // to set the src of an Image if needed.
            // now you might want a base64 version of the image
            const base64imageString = image.toBase64String('jpg'); // if you need it as base64
          },
          err => {
            console.log(err);
          }
        );
      }

      clearMyDrawing(args) {
        const pad = this.DrawingPad.nativeElement;
        pad.clearDrawing();
      }
    }
    \n

    Properties

    \n

    penColor - (Color) - optional\nProperty to specify the pen (stroke) color to use.

    \n

    penWidth - (int) - optional\nProperty to specify the pen (stroke) width to use.

    \n

    clearOnLongPress - (boolean = true) - optional iOS Only\nGets/sets whether a long press will clear the view.

    \n

    Methods

    \n

    getDrawing() - Promise (returns image if successful)

    \n

    getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise (returns image as base64 string if successful)

    \n

    clearDrawing() - clears the drawing from the DrawingPad view.

    \n

    getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)

    \n

    Android Only

    \n
      \n
    • getTransparentDrawing() - Promise (returns a bitmap with a transparent background)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancyalert":{"name":"nativescript-fancyalert","version":"3.1.1","license":"MIT","readme":"

    NativeScript 7 or higher

    \n\n

    If using 6 and below, see the following:

    \n

    Fancy alerts for NativeScript.

    \n

    Based on:

    \n\n

    Install

    \n

    NativeScript 4x

    \n
    tns plugin add nativescript-fancyalert
    \n

    NativeScript 3x and older

    \n
    tns plugin add nativescript-fancyalert@1.2.0
    \n

    \"Sample

    \n

    \"Sample

    \n

    iOS Specifications

    \n

    Usage Examples

    \n
    import { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";

    // show success
    TNSFancyAlert.showSuccess(
      \"Success!\",
      \"Fancy alerts are nice.\",
      \"Yes they are!\"
    );

    // set customizations
    TNSFancyAlert.showAnimationType =
      TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;
    TNSFancyAlert.hideAnimationType =
      TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;
    TNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;
    TNSFancyAlert.soundURL = \"bell.mp3\";
    TNSFancyAlert.showSuccess(
      \"Sound?\",
      \"You can use sound and customize many aspects like animation in/out, color, background style and much more.\",
      \"Amazing!\"
    );

    // show custom image
    TNSFancyAlert.showCustomImage(
      \"nativescript.png\",
      \"#2B33FF\",
      \"Custom Image\",
      `Using your own images is sure nice.`,
      \"Yes!\"
    );

    // show custom button timer
    TNSFancyAlert.showCustomButtonTimer(
      0,
      true,
      undefined,
      undefined,
      \"Mission Impossible\",
      `This will self-destruct in 5 seconds.`,
      \"Ok\"
    );

    // show custom buttons
    let buttons = [
      new TNSFancyAlertButton({
        label: \"One\",
        action: () => {
          console.log(\"One\");
        }
      }),
      new TNSFancyAlertButton({
        label: \"Two\",
        action: () => {
          console.log(\"Two\");
        }
      }),
      new TNSFancyAlertButton({
        label: \"Three\",
        action: () => {
          console.log(\"Three\");
        }
      }),
      new TNSFancyAlertButton({
        label: \"Four\",
        action: () => {
          console.log(\"Four\");
        }
      }),
      new TNSFancyAlertButton({
        label: \"Really? More?\",
        action: () => {
          console.log(\"more\");
        }
      })
    ];
    TNSFancyAlert.showCustomButtons(
      buttons,
      undefined,
      undefined,
      \"Got Buttons?\",
      `Add as many as you'd like.`,
      \"Ok\"
    );

    // show with custom width
    TNSFancyAlert.showSuccess(
      \"Success!\",
      \"This uses a custom width of 300.\",
      `Oh that's nice.`,
      0,
      300
    );

    // show textfield
    let initialValue = null;
    TNSFancyAlert.showTextField(
      \"Enter your name\",
      initialValue,
      new TNSFancyAlertButton({
        label: \"Save\",
        action: (value: any) => {
          console.log(`User entered ${value}`);
        }
      }),
      undefined,
      undefined,
      \"User Input?\",
      `Yeah, sure we can.`,
      \"Ok, lots of options.\"
    );

    // show switch
    TNSFancyAlert.showSwitch(
      `Don't show again`,
      \"#58B136\",
      new TNSFancyAlertButton({
        label: \"Save\",
        action: (isSelected: boolean) => {
          console.log(`Don't show again was selected: ${isSelected}`);
        }
      }),
      \"switch.png\",
      \"#B3714F\",
      \"Need a switch?\",
      `It can be useful.`,
      \"Got it.\"
    );
    \n

    TNSFancyAlert - Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    TNSFancyAlert.SUPPORTED_TYPES: IFancyAlertSupportedTypesDifferent supported style types.
    TNSFancyAlert.shouldDismissOnTapOutside: booleanShould dismiss when tapped outside.
    TNSFancyAlert.dismissCallback: () => voidCallback for when alert is dismissed.
    TNSFancyAlert.hideAnimationType: IFancyAlertHideAnimationTypesUse TNSFancyAlert.HIDE_ANIMATION_TYPES to set. Supports: FadeOut, SlideOutToBottom, SlideOutToTop, SlideOutToLeft, SlideOutToRight, SlideOutToCenter, SlideOutFromCenter.
    TNSFancyAlert.showAnimationType: IFancyAlertShowAnimationTypesUse TNSFancyAlert.SHOW_ANIMATION_TYPES to set. Supports: FadeIn, SlideInFromBottom, SlideInFromTop, SlideInFromLeft, SlideInFromRight, SlideInFromCenter, SlideInToCenter.
    TNSFancyAlert.backgroundType: IFancyAlertBackgroundTypesUse TNSFancyAlert.BACKGROUND_TYPES to set. Supports: Shadow, Blur, Transparent.
    TNSFancyAlert.customViewColor: stringOverwrite (Buttons, top circle and borders) colors.
    TNSFancyAlert.iconTintColor: stringSet custom tint color for icon image.
    TNSFancyAlert.titleColor: stringSet custom title color.
    TNSFancyAlert.bodyTextColor: stringSet custom body text color.
    TNSFancyAlert.tintTopCircle: stringOverride top circle tint color with background color
    TNSFancyAlert.cornerRadius: numberSet custom corner radius.
    TNSFancyAlert.backgroundViewColor: stringOverwrite background color
    TNSFancyAlert.useLargerIcon: booleanMake the top circle icon larger
    TNSFancyAlert.soundURL: stringUse mp3 from App_Resources when alert shows.
    TNSFancyAlert.textDisplayOptions: IFancyAlertTextOptionsIOS Only. Text display options
    \n

    TNSFancyAlert - Methods

    \n
      \n
    • showSuccess(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showError(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showNotice(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showWarning(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showInfo(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showEdit(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showWaiting(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showQuestion(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showCustomButtonTimer(buttonIndex: number, reverse?: boolean, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomImage(imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomButtons(buttons: Array<TNSFancyAlertButton>, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomTextAttributes(attributionBlock: Function, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showTextField(placeholder: string, initialValue: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showSwitch(switchLabel: string, switchColor: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomView(customView: any, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • show(type: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showCustom(alert: any, imageName: string, color: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number)
      • \n
    • createAlert(width?: number)
      • \n
    \n

    Android Specifications

    \n

    Usage Examples

    \n

    NOTE: Android supports only a subset of the iOS features, but will return a Promise on every call:

    \n
    import { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";

    // show success
    TNSFancyAlert.showSuccess(
      \"Success!\",
      \"Fancy alerts are nice.\",
      \"Yes they are!\"
    ).then(() => {
      /* user pressed the button */
    });

    // show error
    TNSFancyAlert.showError(\"Error!\", \"Something bad happened.\", \"Close\").then(
      () => {
        /* user pressed the button */
      }
    );
    \n

    TNSFancyAlert - Methods

    \n
      \n
    • showSuccess(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showError(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showNotice(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showWarning(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showInfo(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • \n
      showColorDialog(
        title: string,
        subTitle?: string,
        okBtnTitle?: string,
        cancelBtnTitle?: string,
        backgroundColor?: string,
        titleTextColor?: string,
        contextTextColor?: string,
        contentImage?: any
      ): Promise<any>```
      \n
      • \n
    \n

    TNSFancyAlertButton (iOS only)

    \n

    This class can be instantiated on iOS to configure buttons in the fancy alerts.

    \n
    export class TNSFancyAlertButton {
      public label: string;
      public action: Function;
      public applyStyle: (btn: any) => void;

      constructor(model?: any) {
        if (model) {
          this.label = model.label;
          this.action = model.action;
          this.applyStyle = model.applyStyle;
        }
      }
    }
    \n
      \n
    • label: display text on the button
      • \n
    • action: the method to invoke when the button is tapped on
      • \n
    • applyStyle: a method you can configure to style the button however you'd like using iOS properties. This method will hand back an instance of SLCButton which inherits from UIButton. You can see more of what methods are available on this class here.
      • \n
    \n

    Here's an example of how to setup a custom background color:

    \n
    new TNSFancyAlertButton({
      label: 'Ok',
      action: () => {
        // the action to take
      },
      applyStyle: (btn: UIButton) => {
        // we can use UIButton typing when using tns-platform-declarations
        // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )
        // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize

        (<any>btn).buttonFormatBlock = () => {
          // set a custom backgroundColor
          return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);
        }
      }
    }),
    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    Tutorials

    \n

    Need extra help getting these fancy alerts working in your application? Check out these tutorials that make use of the plugin:

    \n

    Fancy Alerts in a NativeScript with Angular Application

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/localize":{"name":"@nativescript/localize","version":"5.2.0","license":"Apache-2.0","readme":"

    @nativescript/localize

    \n

    Contents

    \n\n

    Intro

    \n

    A plugin that implements internationalization (i18n) using the native capabilities of each platform. It is inspired by nativescript-i18n

    \n

    Installation

    \n

    To install the plugin, run the following command in the root directory of your project.

    \n
    npm install @nativescript/localize
    \n

    Use @nativescript/localize

    \n

    This section describes how to use the @nativescript/localize plugin in several flavors that NativeScript supports.

    \n

    Localization in NativeScript Core

    \n
      \n
    1. Create a folder named i18n in the app folder, with the following structure:
      2. \n
    \n
    app
      | i18n
          | en.json           <-- english language
          | es.default.json   <-- spanish language (default)
    \n

    es.default.json example:

    \n
    {
        \"app.name\" : \"Comida Rica!\",
        
        \"user\":{
            \"name\": \"Paula\"
        }
    }
    \n
      \n
    1. In the main.ts file, register the localize function with the setResources method of the Appilcation class, as follows.
      2. \n
    \n
    import { Application } from \"@nativescript/core\";
    import { localize } from '@nativescript/localize';

    Application.setResources({ L: localize });
    \n

    Then, use the L property in the markup.

    \n

      <StackLayout>
        <Label text=\"{{ 'Hello world !' | L }}\" />
        <Label text=\"{{ 'I am ' + L('user.name') }}\" />
      </StackLayout>
    \n

    To localize in code-behind, just call the localize method directly.

    \n
    import { localize } from '@nativescript/localize';

    console.log(localize('Hello world !'));
    \n

    Quirks

    \n

    ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

    \n
    const page = args.object;
    page.bindingContext = new Observable();
    \n

    Localization in Angular

    \n
      \n
    1. Create a folder i18n in the src folder, with the following structure:
      2. \n
    \n
    src
      | i18n
          | en.json           <-- english language
          | fr.default.json   <-- french language (default)
          | es.js
    \n

    You need to set the default langage and make sure it contains\nthe application name to avoid any errors.

    \n
      \n
    1. Register the localizing module(NativeScriptLocalizeModule) in the app.module.ts file
      2. \n
    \n
    import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    import { NativeScriptLocalizeModule } from '@nativescript/localize/angular';
    import { NativeScriptModule } from '@nativescript/angular';

    import { AppComponent } from './app.component';

    @NgModule({
    \tdeclarations: [AppComponent],
    \tbootstrap: [AppComponent],
    \timports: [NativeScriptModule, NativeScriptLocalizeModule],
    \tschemas: [NO_ERRORS_SCHEMA],
    })
    export class AppModule {}
    \n
      \n
    1. Then, in an HTML file, use the localizer as follows:
      2. \n
    \n
    <Label text=\"{{ 'Hello world !' | L }}\"/>
    <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
    \n

    Localization in Vue

    \n
      \n
    1. Create a folder named i18n in the app folder, with the following structure:
      2. \n
    \n
    app
      | i18n
          | en.json           <-- english language
          | es.default.json   <-- spanish language (default)
    \n

    es.default.json example:

    \n
    {
        \"app.name\" : \"Comida Rica!\",
        
        \"user\":{
            \"name\": \"Paula\"
        }
    }
    \n
      \n
    1. To localize in Vue3, import the localize method\nand call it in markup.
      2. \n
    \n
    import { localize } from '@nativescript/localize';
    \n
    <ActionBar>
    \t<Label :text=\"localize('app.name')\" class=\"font-bold text-lg bg-black\" />
    </ActionBar>

    <StackLayout class=\"px-4\">
    \t<Label :text=\"localize('user.name')\" textWrap=\"true\" />
    </StackLayout>
    \n

    Localization in Svelte

    \n
      \n
    1. Create a folder named i18n in the app folder, with the following structure:
      2. \n
    \n
    app
      | i18n
          | en.json           <-- english language
          | es.default.json   <-- spanish language (default)
    \n

    es.default.json example:

    \n
    {
        \"app.name\" : \"Comida Rica!\",
        
        \"user\":{
            \"name\": \"Paula\"
        }
    }
    \n
      \n
    1. To localize in Svelte, import the localize method and then call it in markup.
      2. \n
    \n
    import { localize } from '@nativescript/localize';
    \n
    <actionBar>
    \t<label text={ localize('app.name') } class=\"font-bold text-lg bg-black\" />
    </actionBar>

    <stackLayout class=\"px-4\">
    \t<label text={ 'Nombre: ' + localize('user.name')}/>
    </stackLayout>
    \n

    Setting the default language

    \n

    To set the default language, add a .default extension to the name of the default language file.

    \n
    fr.default.json
    \n

    Make sure it contains the application name to avoid any errors.

    \n

    Android uses the locale file corresponding to the device's language. For example, if the device's language is set to Spanish, the es.json will be used.

    \n

    Localizing the application name

    \n

    To localize the application name, use the app.name key.

    \n
    {
    \t\"app.name\": \"My app\"
    }
    \n

    File format

    \n

    Each file is imported using require, so use the file format of your choice:

    \n

    JSON

    \n
    {
    \t\"app.name\": \"My app\",
    \t\"ios.info.plist\": {
    \t\t\"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    \t},
    \t\"user\": {
    \t\t\"name\": \"user.name\",
    \t\t\"email\": \"user.email\"
    \t},
    \t\"array\": [\"split the translation into \", \"multiples lines\"],
    \t\"sprintf\": \"format me %s\",
    \t\"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
    }
    \n

    Javascript

    \n
    export const i18n = {
    \t'app.name': 'My app',
    };
    \n

    Localizing iOS properties

    \n

    To localize an iOS property, prefix it with ios.info.plist.. The example below shows how to localize the NSLocationWhenInUseUsageDescription property.

    \n
    {
    \t\"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
    }
    \n

    Changing the language dynamically at runtime

    \n

    To change the language dynamically at runtime, use the overrideLocale method.

    \n

    iOS

    \n
    import { overrideLocale } from '@nativescript/localize';
    const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n

    Android

    \n

    For Android, first, call the androidLaunchEventLocalizationHandler method in the launchEvent handler, in the main.ts file.

    \n
    import { Application } from '@nativescript/core';
    import { androidLaunchEventLocalizationHandler } from '@nativescript/localize';

    Application.on(Application.launchEvent, (args) => {
    \tif (args.android) {
    \t\tandroidLaunchEventLocalizationHandler();
    \t}
    });
    \n

    Then, in your settings page where the user chooses the language, call the overrideLocale method:

    \n
    import { overrideLocale } from '@nativescript/localize';
    const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
    \n
    \n

    Important: On both platforms, after calling overrideLocale method, you must ask the user to restart the app.

    \n
    \n

    For Example:

    \n
    import { Application } from '@nativescript/core';
    import { overrideLocale } from '@nativescript/localize';

    alert({
    \ttitle: 'Switch Language',
    \tmessage: 'The application needs to be restarted to change language',
    \tokButtonText: 'Quit!',
    }).then(() => {
    \tL.localize.overrideLocale(selectedLang);
    \tif (isAndroid) {
    \t\t(Application.android.foregroundActivity || Application.android.startActivity).finish();
    \t} else {
    \t\texit(0);
    \t}
    });
    \n
    \n

    Important: In case you are using Android app bundle to release your android app, add the following to App_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

    \n
    \n
    android {

      // there maybe other code here //

      bundle {
        language {
          enableSplit = false
        }
      }
    }
    \n
    \n

    Tip: you can get the default language on user's phone via the language property of the Device class.

    \n
    \n
    import { Device } from '@nativescript/core';

    console.log(\"user's language is\", Device.language.split('-')[0]);
    \n
    \n

    Tip: The overrideLocale method stores the language in a special key in app-settings, you can access it like this

    \n
    \n
    import { ApplicationSettings } from '@nativescript/core';

    console.log(ApplicationSettings.getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
    \n

    Troubleshooting

    \n

    Angular localization pipe and the modal context

    \n

    The angular localization pipe does not work when in a modal context.\nAs a workaround, you can trigger a change detection from within your component constructor:

    \n
    constructor(
      private readonly params: ModalDialogParams,
      private readonly changeDetectorRef: ChangeDetectorRef,
    ) {
      setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
    }
    \n

    Issues with WebView on Android N+

    \n

    On Android N+, the first creation of a WebView resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is a native bug and the workaround is

    \n
     <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
    \n
    import { overrideLocale, androidLaunchEventLocalizationHandler } from '@nativescript/localize';
    import { ApplicationSettings } from '@nativescript/core';
    const locale = ApplicationSettings.getString('__app__language__');

    function webViewLoaded() {
    \toverrideLocale(locale);
    \tandroidLaunchEventLocalizationHandler();
    }
    \n

    API

    \n

    The plugin provides the following functions.

    \n

    localize()

    \n
    localizeString: string = localize(key, ...args)
    \n

    Retrieves the translation for the specified key from a .json file in the i18n directory.

    \n
    \n

    overrideLocale()

    \n
    isLocaleOverwritten: boolean = overrideLocale(locale)
    \n

    Overrides the current locale with the specified locale parameter.

    \n
    \n

    androidLaunchEventLocalizationHandler()

    \n
    androidLaunchEventLocalizationHandler()
    \n
    \n

    Credits

    \n

    A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me. Eddy then joined NativeScript's Technical Steering Committee and to vastly improve plugin maintenance it was scoped and moved here

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iqkeyboardmanager":{"name":"nativescript-iqkeyboardmanager","version":"1.5.1","license":"MIT","readme":"

    NativeScript IQKeyboardManager Plugin

    \n

    NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

    \n

    \"Example

    \n

    Installation

    \n
    $ tns plugin add nativescript-iqkeyboardmanager
    \n

    Usage

    \n

    That's it! IQKeyboardManager takes care of all initialization when your app starts up by default.

    \n

    Advanced usage

    \n

    Grouping related textfields (previous / next buttons)

    \n

    If your UI layout has sibling text fields, then IQKeyboardManager is able to automatically\nadd previous / next buttons to the accessory bar which the user can use to jump back and forth.\nSee those < and > buttons in the video above.

    \n

    In case those fields were not direct siblings, until version 1.3.0 of this plugin, you had no way\nto force the previous / next buttons to appear. However, now you can:

    \n

    NativeScript /w XML usage

    \n

    Note in the example below that the two <TextField> controls are not siblings (both have parent <StackLayout> containers). Because of this, IQKeyboardManager will not automatically provide an optimized keyboard by default.

    \n

    However, if you surround the controls with this plugin's <PreviousNextView> control, as the example below shows, you will continue to get an optimized keyboard as expected.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
      <StackLayout>
        <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
          <StackLayout>
            <StackLayout>
              <TextField hint=\"Email\"/>
            </StackLayout>
            <StackLayout>
              <TextField hint=\"Password\"/>
            </StackLayout>
          </StackLayout>
        </IQKeyboardManager:PreviousNextView>
      </Stacklayout>
    </Page>
    \n

    NativeScript /w Angular usage

    \n

    In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the PreviousNextView element:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"PreviousNextView\", () => require(\"nativescript-iqkeyboardmanager\").PreviousNextView);
    \n

    Then in the view, use that element like this (again, we went nuts with the <StackLayout>s:

    \n
    <StackLayout>
      <PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
        <StackLayout>
          <StackLayout>
            <TextField hint=\"Email\"></TextField>
          </StackLayout>
          <StackLayout>
            <TextField hint=\"Password\"></TextField>
          </StackLayout>
        </StackLayout>
      </PreviousNextView>
    </Stacklayout>
    \n

    NativeScript /w Vue usage

    \n

    Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

    \n
    Vue.registerElement(\"PreviousNextView\", () => require(\"nativescript-iqkeyboardmanager\"). PreviousNextView)
    \n

    Adding a placeholder/hint on a TextView's accessory bar

    \n

    Looking at the gif above you may notice when focusing the Email address and password fields,\nthe placeholder/hint of those TextFields is shown in the accessory bar above the keyboard.

    \n

    But when you use a TextView instead of a TextField, the placeholder is not shown because\nof an iOS limitation. You can work around this limitation by using the TextViewWithHint\nprovided by this plugin. So whenever you want to use a TextView with a placeholder,\nuse TextViewWithHint instead.

    \n

    NativeScript /w XML usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IQKeyboardManager=\"nativescript-iqkeyboardmanager\">
      <StackLayout>
        <TextView hint=\"Not working TextView hint\"/>
        <IQKeyboardManager:TextViewWithHint hint=\"Working TextView hint 🤪\"/>
      </StackLayout>
    </Page>
    \n

    NativeScript /w Angular usage

    \n

    In the .modules.ts file where you want to use this feature (or the app.module.ts),\nregister the TextViewWithHint element:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"TextViewWithHint\", () => require(\"nativescript-iqkeyboardmanager\").TextViewWithHint);
    \n

    Then in the view, use that element like this:

    \n
    <StackLayout>
      <TextView hint=\"Not working TextView hint\"></TextView>
      <TextViewWithHint hint=\"Working TextView hint 🤪\"></TextViewWithHint>
    </Stacklayout>
    \n

    NativeScript /w Vue usage

    \n

    Vue usage is very similar to Angular usage, the only difference is in how the element is registered. Open your app's entry file, and add this:

    \n
    Vue.registerElement(\"TextViewWithHint\", () => require(\"nativescript-iqkeyboardmanager\").TextViewWithHint)
    \n

    Tweaking the appearance and behavior

    \n

    Start by adding the following two paths into your app’s references.d.ts file. (See this repo’s demo app for a specific example.)

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/ios/ios.d.ts\" />
    /// <reference path=\"./node_modules/nativescript-iqkeyboardmanager/index.d.ts\" />
    \n
    \n

    NOTE: You might also need to npm install --save-dev tns-platform-declarations to bring in NativeScript’s TypeScript definitions for native iOS development.

    \n
    \n

    Next, initialize an instance of IQKeyboardManager with the following line of code.

    \n
    const iqKeyboard = IQKeyboardManager.sharedManager();
    \n

    You now have the full IQKeyboardManager APIs available for you to use. For example you could use the following code to switch to a dark keyboard.

    \n
    const iqKeyboard = IQKeyboardManager.sharedManager();
    iqKeyboard.overrideKeyboardAppearance = true;
    iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;
    \n

    For more examples of what's possible, run the demo app (shown in the gif below) and check out the app's main-view-model.ts file.

    \n\n

    Multi-factor one-time code auto-fill

    \n

    While the following is not a feature specific to IQKeyboardManager, you are here because you want the best keyboard experience for your NativeScript app and this may be helpful to know about.

    \n

    iOS has a feature where a text field's QuickType search suggestion bar can suggest one-time code values for multi-factor authentication that were texted to your device.

    \n

    If the field is specially-identified as a one-time code field, the suggestion will appear for about 3 minutes after being received, and the user simply has to tap the suggestion to fill in the value—no short term memorization or copy/paste gestures required. Examples of message formats are:

    \n
      \n
    • 123456 is your App Name code.
      • \n
    • 123456 is your App Name login code.
      • \n
    • 123456 is your App Name verification code.
      • \n
    \n

    To implement this functionality in your own app, first declare UITextContentTypeOneTimeCode near your component imports:

    \n
    declare var UITextContentTypeOneTimeCode;
    \n

    Then, set the field's ios.textContentType property:

    \n
    // This code assumes this.page exists as a reference to the current Page.
    const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
    if (mfaCodeField !== null && mfaCodeField.ios) {
      mfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
    }
    \n

    There are other textContentType values you might want to use. You can read more about the property in this article.

    \n

    Documentation

    \n

    For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

    \n

    Maintainers

    \n

    For maintainer’s of this plugin’s source code: when the IQKeyboardManager Podfile updates, you should generate new typings for for this plugin to reflect those changes.

    \n

    To do so, execute these commands.

    \n
    cd demo
    TNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios
    TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios
    \n

    Next, locate IQKeyboardManager’s generated typings file in the demo/typings folder and override the IQKeyboardManager.d.ts file in this repo’s root.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/unit-test-runner":{"name":"@nativescript/unit-test-runner","version":"3.0.4","license":"Apache-2.0","readme":"

    Unit test runner for NativeScript

    \n

    Refer to the documentation of NativeScript CLI's ns test init command for usage.

    \n

    If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

    \n

    Troubleshooting

    \n

    If you see an error like this:

    \n
    Error: connect ECONNREFUSED ::1:9876
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1195:16)
    \n

    When using node 17 or higher, make sure your karma.conf.js contains a server hostname setting, for example:

    \n
    // web server hostname (ensure this is present)
    hostname: '127.0.0.1',

    // web server port
    port: 9876,
    \n

    See here for changeset in CLI which adds that to all newly initialized unit test setups.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-rxdb":{"name":"@herefishyfish/nativescript-rxdb","version":"1.0.5","license":"Apache-2.0","readme":"

    @herefishyfish/nativescript-rxdb

    \n
    npm i @herefishyfish/nativescript-rxdb
    \n

    Thin wrappers for RxDB compatibility with NativeScript.

    \n

    See RxDB docs for more info on how to use RxDB.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ontrackms/nativescript-dotenv":{"name":"@ontrackms/nativescript-dotenv","version":"1.0.1","license":"ISC","readme":"

    NativeScript Dotenv Plugin

    \n

    Developed by Ontrack!

    \n

    Installation

    \n

    npm i -D @ontrackms/nativescript-dotenv

    \n

    Usage

    \n
    // webpack.config.js
    const { NativeScriptDotenv } = require(\"@ontrackms/nativescript-dotenv\");

    module.exports = (env) => {
      //..

      NativeScriptDotenv.init(webpack);
      
      //..
    };
    \n

    Configuration

    \n
    NATIVESCRIPT_BUNDLE_ID=com.corp.app.test
    NATIVESCRIPT_BUNDLE_VERSION=3.2.1
    NATIVESCRIPT_APPLE_TEAM_ID=ASDFG1234
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-media-query":{"name":"@nativescript-use/nativescript-media-query","version":"0.0.4","license":"Apache-2.0","readme":"

    @nativescript-use/nativescript-media-query

    \n
    npm install @nativescript-use/nativescript-media-query
    \n

    Usage

    \n
    import { matchMedia, MediaQueryList } from \"@nativescript-use/nativescript-media-query\"

    const mql: MediaQueryList = matchMedia(\"(min-width: 400)\");

    if (mql.matches) {
      /* The screen is at least 400 dpi wide */
    } else {
      /* The screen is less than 400 dpi wide */
    }


    // Add listener
    mql.onchange = (event: MediaQueryListEvent) => {
          // some logic
    }); 

    const myListener = () => console.log(\"Change!\");
        
    mql.addListener(myListener);

    // Remove listener
    mql.removeListener(myListener);
    \n

    Type declaration

    \n
    export interface MediaQueryList {
        readonly matches: boolean;
        readonly media: string;
        onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
        addListener(listener: MediaQueryListListener): void;
        removeListener(listener: MediaQueryListListener): void;
    }

    export type MediaQueryListListener = (mql: MediaQueryList) => void;

    export interface MediaQueryListEvent {
        readonly matches: boolean;
        readonly media: string;
    }

    export declare function matchMedia(mediaQueryString: string): MediaQueryList;
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bancha/nativescript-checkbox":{"name":"@bancha/nativescript-checkbox","version":"2.0.13","license":"Apache-2.0","readme":"

    @bancha/nativescript-checkbox

    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n
    ns plugin add @bancha/nativescript-checkbox
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Usage

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@bancha/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n
    import { CheckBox } from '@bancha/nativescript-checkbox';
    import { Frame } from '@nativescript/core';

    public toggleCheck() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@bancha/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    import { CheckBox } from '@bancha/nativescript-checkbox';
    Vue.registerElement(
      'CheckBox',
      () => CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-swipe":{"name":"nativescript-image-swipe","version":"5.0.1","license":"Apache-2.0","readme":"

    Contribution - help wanted

    \n

    This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

    \n

    Creating a PR checklist:

    \n
      \n
    • Fork the repo
      • \n
    • Add new functionality or fix an issue and push it to your fork
      • \n
    • Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android)
      • \n
    • From your fork create a PR targeting the 'master' branch of this repository
      • \n
    \n

    Thank you for your contribution.

    \n

    NativeScript Image Swipe widget

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

    \n

    Screenshot

    \n

    \"Screenshot\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-image-swipe

    \n

    This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • pageChanged
      \nTriggered when the user swipes to the next/previous image in the list.
      • \n
    \n

    Static Properties

    \n
      \n
    • pageChangedEvent - String
      \nString value used when hooking to pageChanged event.
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UIScrollView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v4.view.ViewPager
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ObservableArray
      \nGets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      pageNumber - Number
      \nGets or sets the currently visible image.

      \n
      • \n
    • \n

      imageUrlProperty - string
      \nGets or sets the property inside the items' object that defines the Url from where to load the images

      \n
      • \n
    • \n

      allowZoom - boolean (default: true)
      \nGets or sets whether zoom is enabled

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
        <GridLayout>
            <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                           pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
            </is:ImageSwipe>
        </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { PageChangeEventData } from \"nativescript-image-swipe\";

    let viewModel: Observable;

    export function navigatingTo(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

        viewModel = new Observable();
        viewModel.set(\"items\", items);
        viewModel.set(\"pageNumber\", 3);

        page.bindingContext = viewModel;
    }

    export function pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
    \n

    Usage in Angular

    \n

    In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

    \n
    // main.ts
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { registerElement } from \"nativescript-angular/element-registry\";

    import { AppModule } from \"./app.module\";

    registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

    platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n
    <!-- test.component.html -->
    <GridLayout>
        <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                    [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
        </ImageSwipe>
    </GridLayout>
    \n
    // test.component.ts
    import { Component, OnInit } from \"@angular/core\";
    import { PageChangeEventData } from \"nativescript-image-swipe\";

    @Component({
        selector: \"demo\",
        moduleId: module.id,
        templateUrl: \"./test.component.html\",
    })
    export class ImageSwipeComponent implements OnInit {
        public items: any[] = [];
        public pageNumber: number = 3;

        ngOnInit(): void {
            this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
        }

        public pageChanged(e: PageChangeEventData) {
            console.log(`Page changed to ${e.page}.`);
        }
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-image-swipe
    $ cd nativescript-image-swipe
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-echo-ns":{"name":"nativescript-echo-ns","version":"1.4.10","license":"Apache-2.0","readme":"

    README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/picker":{"name":"@nativescript/picker","version":"4.1.0","license":"Apache-2.0","readme":"

    @nativescript/picker

    \n

    A NativeScript plugin that provides ui element for picking an object/value from a list opened in a modal popup.

    \n
    npm install @nativescript/picker
    \n

    Usage

    \n\n

    Screenshots

    \n

    \"PickerField\"PickerField

    \n

    Configuration

    \n

    No additional configuration required!

    \n

    Usage

    \n

    To use the PickerField in markup you need to:

    \n
      \n
    • If you are developing a NativeScript Core app, you need to register the plugin namespace in the xml:
      • \n
    \n
    <Page
       xmlns=\"http://schemas.nativescript.org/tns.xsd\"
       xmlns:picker=\"@nativescript/picker\">
       <picker:PickerField hint=\"Click here\" items=\"{{ pickerItems }}\"/>
    ...
    \n

    Or with item template

    \n
    <picker:PickerField focusOnShow=\"true\" filterKeyName=\"name\" showFilter=\"{{ enableFilter }}\" pickerTitle=\"Nativescript Picker\" rowHeight=\"60\" id=\"picker\" hint=\"Click here\" textField=\"name\" padding=\"10\" pickerOpened=\"{{ pickerOpened }}\" pickerClosed=\"{{ pickerClosed }}\"
                        items=\"{{ pickerItems }}\" >
        <picker:PickerField.itemTemplate>
            <GridLayout height=\"60\">
                <Label text=\"{{ name}}\" textWrap=\"true\" verticalAlignment=\"center\" />
                
            </GridLayout>
        </picker:PickerField.itemTemplate>
    </picker:PickerField>
    \n

    Data filter

    \n

    You can filter the data by setting showFilter="true", by default the plugin will look at the name key on the items source, but you can control this by setting filterKeyName="title" assuming your data Items contains a title key :

    \n
    \n

    focus the search bar by setting focusOnShow="true"

    \n
    \n
    let dataItems = new ObservableArray<{title: string, age: number}>();

    for(let i = 0; i <= 30; i++) {
        dataItems.push({
            title: \"Title\" + i,
            age: 30 + i
        })
    }
    \n\n

    Get selected item

    \n

    You need to register the callback from pickerClosed property pickerClosed="onSelectedItem" this will return the selectedIndex :

    \n
    onSelectedItem(args) {
        let index = args.object?.selectedIndex;
        console.log('Picker > closed', index);
        console.log('Picker > closed', dataItems[index].title);
    }
    \n

    Style

    \n

    You can targed the Picker via thoes css class ex: .pickerRootModal:

    \n
      \n
    • pickerRootModal targetting the Modal
      • \n
    • pickerPage targetting the Page
      • \n
    • pickerGridLayout targetting the GridLayout wraper that contains all the views
      • \n
    • pickerListView targetting the ListView
      • \n
    • pearchBarContainer targetting the search bar container StackLayout
      • \n
    • pickerSearchBar targetting the search bar TextField
      • \n
    \n

    See here also

    \n
      \n
    • If you are developing a NativeScript Angular app, you need to import the plugin module in the module of your component:
      • \n
    \n
    import { NativeScriptPickerModule } from \"@nativescript/picker/angular\";
    ...
    @NgModule({
        imports: [
            NativeScriptPickerModule,
            ...
        ],
        ...
    \n

    Then you will be able to declare the fields in the html of your component:

    \n
    <PickerField hint=\"Click here\" [items]=\"pickerItems\"></PickerField>
    \n

    Custom item template

    \n

    You can also define your own item template in the list that is opened:

    \n
    <PickerField hint=\"Click here\" class=\"picker-field\" textField=\"name\" [pickerTitle]=\"'Select item from list'\" [items]=\"items\">
    \t<ng-template let-item=\"item\">
    \t\t<GridLayout columns=\"auto, *\" rows=\"auto, *\">
    \t\t\t<Label text=\"Static text:\" col=\"0\"></Label>
    \t\t\t<Label [text]=\"item?.name\" col=\"0\" row=\"1\"></Label>
    \t\t\t<Image [src]=\"item?.imageUrl\" col=\"1\" row=\"0\" rowSpan=\"2\"></Image>
    \t\t</GridLayout>
    \t</ng-template>
    </PickerField>
    \n

    With the following bindings:

    \n
    interface IDataItem {
    \tname: string;
    \tid: number;
    \tdescription: string;
    \timageUrl: string;
    }

    this.items = new ObservableArray<IDataItem>();
    for (let i = 0; i < 20; i++) {
    \tthis.items.push({
    \t\tname: 'Item ' + i,
    \t\tid: i,
    \t\tdescription: 'Description ' + i,
    \t\timageUrl: 'https://picsum.photos/150/70/?random',
    \t});
    }
    \n
      \n
    • If you are developing a NativeScript Vue app, you need to install the plugin in you app.js file:
      • \n
    \n
    import Vue from 'nativescript-vue';
    import PickerField from '@nativescript/picker/vue';

    Vue.use(PickerField);
    \n

    Then you will be able to declare the fields in the template of your component:

    \n
    <PickerField hint=\"Click here\"></PickerField>
    \n

    Features

    \n

    PickerField

    \n

    The PickerField is a NativeScript TextField which means that any functionality the default TextField provides is also available in the PickerField component. The only difference is that by design it is in "read-only" mode, or simply put you cannot change its text by input or select that text. Changing the text of the PickerField is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it.

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    pickerTitleThe title of the modal view.
    itemsThe source collection used to populate the list of the modal view.
    itemTemplateТhe UI template for list view items of the list of the modal view.
    modalAnimatedOptional parameter specifying whether to show the modal view with animation.
    textFieldThe 'property' of the object from the 'items' collection that will be used by the 'text' property of the PickerField.
    valueFieldThe 'property' of the object from the 'items' collection that will be used by when setting the 'selectedValue' property of the PickerField.
    selectedValueThe object selected from the list in the modal view.
    selectedIndexThe index of the object from the 'items' collection that has been selected from the list in the modal view.
    iOSCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
    iOSCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
    androidCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
    androidCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
    showFilterShow the search bar
    filterKeyNameSet object key to use when filtering (see the doc)
    focusOnShowSet the focus to the serach bar
    hintTextSet the hint of the search bar
    \n

    PickerField

    \n

    The PickerField can be targeted in CSS through its element selector and additionally by setting a class. The PickerField also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the PickerPage selector and through it style all picker modals with selectors like PickerPage ActionBar and PickerPage ListView. In addition to that, if you set a class on the PickerField, it will be transferred on the PickerPage and with it you can style individual modals.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio":{"name":"nativescript-audio","version":"6.2.6","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-onfido":{"name":"@nstudio/nativescript-onfido","version":"4.0.0","license":"Apache-2.0","readme":"

    Onfido SDK for NativeScript

    \n\n
    npm install @nstudio/nativescript-onfido
    \n

    Usage

    \n
    import { OnfidoUtils, Onfido, OnfidoCaptureType } from '@nstudio/nativescript-onfido';

    OnfidoUtils.init('<token>', '<app id>');

    Onfido.debugMode = true;
    Onfido.start({
        sdkToken: token,
        flowSteps: {
            welcome: true,
            captureDocument: {},
            captureFace: {
              type: OnfidoCaptureType.PHOTO,
            },
        },
    }).then(data => {
        // onfido data
    }).catch((error) => {
        // onfido data
    });
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-checkbox-fix-ios":{"name":"nativescript-checkbox-fix-ios","version":"2.0.5-fix-ios","license":"Apache-2.0","readme":"

    @nstudio/nativescript-checkbox

    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n
    npm install @nstudio/nativescript-checkbox
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Usage

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { Frame } from '@nativescript/core';

    public toggleCheck() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    Vue.registerElement(
      'CheckBox',
      () => CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sms-receiver-spms":{"name":"nativescript-sms-receiver-spms","version":"1.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-fix-uid":{"name":"nativescript-nfc-fix-uid","version":"1.0.44","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@evanyung/nativescript-amap":{"name":"@evanyung/nativescript-amap","version":"1.0.4","license":"Apache-2.0","readme":"

    @evanyung/nativescript-amap

    \n
    npm install @evanyung/nativescript-amap
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-player":{"name":"nativescript-audio-player","version":"1.0.3","license":"MIT","readme":"\n

    NativeScript Audio Player

    \n    \n

    NativeScript plugin to play audio files for Android and iOS.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n

    \n
    \n

    Installation

    \n

    tns plugin add nativescript-audio-player

    \n
    \n

    Native Classes

    \n\n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio-player';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio-player');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function() {
        console.log('finished playing');
      },
      errorCallback: function(errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function(args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position.
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-troisjs":{"name":"nativescript-troisjs","version":"0.3.9","license":"MIT","readme":"

    ✨ TroisJS + NativeScript-Vue3 ⚡

    \n

    I wanted something similar to react-three-fiber but for Nativescript + VueJS.

    \n

    So I found TroisJS and adapted it.

    \n
      \n
    • \n

      Changed Renderer Component to allow passing in custom Canvas instance.

      \n
      • \n
    • \n

      Added <NsRenderer> Component to

      \n
        \n
      • properly wait for the Canvas to be loaded
        • \n
      • pass loaded canvas into Renderer
        • \n
      • apply width, height & scaling via wrapper ContentView
        • \n
      \n
      • \n
    • \n

      Changed Renderer's onMounted, onBeforeRender, onAfterRender & onResize callbacks to be register directly as props

      \n
      \n

      Ex: <NsRenderer @before-render="fn" />

      \n
      \n
      • \n
    \n
    \n

    \"NPM\n\"NPM

    \n

    Usage (NativeScript-Vue3)

    \n

    Install

    \n
    npm i three @nativescript/canvas @nativescript/canvas-polyfill nativescript-troisjs
    \n

    Register canvas element & apply polyfill

    \n
    // app.ts|js

    import '@nativescript/canvas-polyfill'
    registerElement('canvas', () => require('@nativescript/canvas').Canvas)

    // ...
    \n

    Example usage

    \n

    Simply use <NsRenderer> instead of <Renderer>.

    \n
    <script lang=\"ts\" setup>
    import { ref } from 'nativescript-vue'
    import chroma from 'chroma-js'
    import {
      Camera,
      ToonMaterial,
      AmbientLight,
      PointLight,
      Torus,
      Scene,
      NsRenderer,
      type RenderEventInterface,
    } from 'troisjs'

    const n = ref(30)
    const cscale = chroma.scale(['#dd3e1b', '#0b509c'])
    const color = (i: number) => cscale(i / n.value).css()
    const meshRefs = ref<(typeof Torus)[]>([])

    // https://troisjs.github.io/examples/loop.html
    const onBeforeRender = (_e: RenderEventInterface) => {
      const t = Date.now()
      let mesh, ti
      for (let i = 1; i <= n.value; i++) {
        if (meshRefs.value?.[i]?.mesh) {
          mesh = meshRefs.value[i].mesh
          ti = t - i * 500
          mesh.rotation.x = ti * 0.00015
          mesh.rotation.y = ti * 0.0002
          mesh.rotation.z = ti * 0.00017
        }
      }
    }
    </script>

    <template>
      <GridLayout rows=\"*\" class=\"bg-base-200\">
        <NsRenderer @before-render=\"onBeforeRender\" alpha>
          <Camera :position=\"{ z: 15 }\" />
          <Scene>
            <AmbientLight color=\"#808080\" />
            <PointLight color=\"#ffffff\" :position=\"{ y: 50, z: 0 }\" />
            <PointLight color=\"#ffffff\" :position=\"{ y: -50, z: 0 }\" />
            <PointLight color=\"#ffffff\" :position=\"{ y: 0, z: 0 }\" />
            <Torus
              v-for=\"i in n\"
              :key=\"i\"
              ref=\"meshRefs\"
              :radius=\"i * 0.2\"
              :tube=\"0.1\"
              :radial-segments=\"8\"
              :tubular-segments=\"(i + 2) * 4\"
            >
              <ToonMaterial :color=\"color(i)\" />
            </Torus>
          </Scene>
        </NsRenderer>
      </GridLayout>
    </template>
    \n

    Read more on https://troisjs.github.io/guide/

    \n
      \n
    • 💻 Examples (wip) : https://troisjs.github.io/ (sources)
      • \n
    • 📖 Doc (wip) : https://troisjs.github.io/guide/ (repo)
      • \n
    • 🚀 Codepen examples : https://codepen.io/collection/AxoWoz
      • \n
    \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n

    Issues

    \n

    If you encounter any issues, please open a new issue with as much detail as possible. This is beta software, so there might be bugs.

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@it-serve/flashlight":{"name":"@it-serve/flashlight","version":"1.0.14","license":"Apache-2.0","readme":"

    @it-serve/flashlight

    \n
    ns plugin add @it-serve/flashlight
    \n

    Usage

    \n

    // IT Serve LLC for nativescript developers apps above 8+ core

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-frameworks":{"name":"nativescript-ios-frameworks","version":"1.0.5","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@portalest/nativescript-gif-more":{"name":"@portalest/nativescript-gif-more","version":"1.0.1","license":"Apache-2.0","readme":"

    @portalest/nativescript-gif-more

    \n
    npm install @portalest/nativescript-gif-more
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-uid":{"name":"nativescript-nfc-uid","version":"6.0.8","license":"Apache-2.0","readme":"

    nativescript-nfc-uid

    \n
    npm install nativescript-nfc-uid
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/nativescript-iterable":{"name":"@global66/nativescript-iterable","version":"1.0.12","license":"Apache-2.0","readme":"

    @global66/nativescript-iterable

    \n
    ns plugin add @global66/nativescript-iterable
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-storage":{"name":"nativescript-azure-storage","version":"1.2.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    nativescript-azure-storage

    \n

    Installation

    \n

    tns plugin add nativescript-azure-storage

    \n

    Usage

    \n
    import { NativeScriptAzureStorage } from 'nativescript-azure-storage';
    let azureStorage = new NativeScriptAzureStorage(this.azureStorageConnectionString);
    \n

    Available Methods for Android and iOS

    \n

    createBlobContainer: Create a blob container

    \n
    azureStorage.createBlobContainer('blobContainer')
    .then(() => console.log(`Blog container Created!`))
    .catch((err) => console.log(`Error creating blob container: ${err}`));
    \n

    deleteBlobContainer: Delete a blob container

    \n
    azureStorage.deleteBlobContainer('blobContainer')
    .then(() => console.log(`Blog container deleted!`))
    .catch((err) => console.log(`Error deleting blob container: ${err}`));
    \n

    uploadBlob: Upload blob

    \n
    azureStorage.uploadBlob('blobContainer', 'blobName', 'Hello World!')
    .then(() => console.log(`Uploaded successfuly`))
    .catch((err) => console.log(`Error uploading: ${err}`));
    \n

    deleteBlob: Delete blob

    \n
    azureStorage.deleteBlob('blobContainer', 'blobName')
    .then(() => console.log(`Blob deleted successfuly`))
    .catch((err) => console.log(`Error deleting blob: ${err}`));
    \n

    downloadBlob: Download blob

    \n
    azureStorage.downloadBlob('blobContainer', 'blobName')
    .then((blob) => console.log(`Blob downloaded successfuly`))
    .catch((err) => console.log(`Error getting tables: ${err}`));
    \n

    Available Methods only for Android (for now)

    \n

    createTable: Create table with the specified name

    \n
    azureStorage.createTable('table')
    .then(() => console.log(`Table Created!`))
    .catch((err) => console.log(`Error creating table: ${err}`));
    \n

    addRow: Insert new row from an object

    \n
    azureStorage.addRow('table', { foo: 'bar' }, 'partitionKey', 'rowKey')
    .then(() => console.log(`Row created successfuly!`))
    .catch((err) => console.log(`Error creating row: ${err}`));
    \n

    addRows: Insert new row from a list of object

    \n
    let array = new Array<any>();
    array.push({ foo: 'bar' });
    azureStorage.addRows('table', 'partitionKey', 'foo', array)
    .then(() => console.log(`Rows created successfuly!`))
    .catch((err) => console.log(`Error creating rows: ${err}`));
    \n

    listTables: List all tables from storage

    \n
    azureStorage.listTables()
    .then((tables) => {
        tables.forEach((table) => {
            console.log(`Table:${table}`);
        });
    })
    .catch((err) => console.log(`Error getting tables: ${err}`))    ;
    \n

    listRows: List all rows from a specified table

    \n
    azureStorage.listRows('table')
    .then((rows) => {
        rows.forEach((row) => {
            console.log(`Row:${row.partitionKey} | ${row.rowKey} | ${row.getTimestamp() }`);
        });
    })
    .catch((err) => console.log(`Error getting rows: ${err}`))    ;
    \n

    Next Version (available soon)

    \n

    updateRow;

    \n

    deleteRow;

    \n

    tables methods for iOS

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cchoici/nativescript-loading-indicator":{"name":"@cchoici/nativescript-loading-indicator","version":"4.1.3","license":"Apache-2.0","readme":"\n

    NativeScript Loading Indicator

    \n    \n

    \nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Note

    \n

    Add parsDim in OptionsCommon to change dimBackground's color & transparence

    \n

    Installation

    \n

    NativeScript 7+:

    \n
    ns plugin add @cchoici/nativescript-loading-indicator
    \n

    NativeScript lower than 7:

    \n
    tns plugin add @cchoici/nativescript-loading-indicator@3.0.x
    \n

    Screenshots

    \n

    iOS

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"iOS\"\"iOS\"\"iOS\"\"iOS\"
    \n \n

    \n

    Android

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Android\"\"Android\"\"Android\"\"Android\"
    \n

    \n

    Example

    \n

    TypeScript

    \n
    import {
      LoadingIndicator,
      Mode,
      OptionsCommon,
    } from '@cchoici/nativescript-loading-indicator';

    const indicator = new LoadingIndicator();

    const options: OptionsCommon = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      parsDim: ['#000000', 0.2], // parameters if dimBackground is true, [string of hex, number of alpha]
      color: '#4B9ED6', // color of indicator and labels
      backgroundColor: 'yellow', // background box around indicator, hideBezel will override this if true
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.Indeterminate, // see options below
      android: {
        // view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: someButton.ios, // Target view to show on top of (Defaults to entire window)
        square: false,
      },
    };

    indicator.show(options);

    // after some async event maybe or a timeout hide the indicator
    indicator.hide();
    \n

    javascript

    \n
    const LoadingIndicator =
      require('@cchoici/nativescript-loading-indicator').LoadingIndicator;
    const Mode = require('@cchoici/nativescript-loading-indicator').Mode;

    const loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    const options = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      parsDim: ['#000000', 0.2], // parameters if dimBackground is true, [string of hex, number of alpha]
      color: '#4B9ED6', // color of indicator and labels
      backgroundColor: 'yellow', // background box around indicator, hideBezel will override this if true
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.Indeterminate, // see options below
      android: {
        // view: android.view.View, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: UIView, // Target view to show on top of (Defaults to entire window)
      },
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Common Options

    \n
    export interface OptionsCommon {
      /**
       * Message in the loading indicator.
       */
      message?: string;

      /**
       * Details message in the loading indicator.
       */
      details?: string;

      /**
       * Color of the message text.
       */
      color?: string;

      /**
       * Background color of the loading indicator.
       */
      backgroundColor?: string;

      /**
       * Progress of the indicator when not using CustomView or Text Mode.
       */
      progress?: number;

      /**
       * Margin for the message/indicator to the edge of the bezel.
       */
      margin?: number;

      /**
       * Set true to allow user interaction.
       */
      userInteractionEnabled?: boolean;

      /**
       * Dim the background behind the indicator.
       */
      dimBackground?: boolean;

      /**
       * parameters if dimBackground is true
       */
      parsDim?: [string, number];

      /**
       * Hide bezel around indicator
       */
      hideBezel?: boolean;

      /**
       * The mode of the loading indicator.
       */
      mode?: Mode;

      /**
       * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
       */
      customView?: any;

      /**
       * iOS specific configuration options.
       */
      ios?: OptionsIOS;

      /**
       * Android specific configuration options.
       */
      android?: OptionsAndroid;
    }
    \n

    Android Specific

    \n
    export interface OptionsAndroid {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: android.view.View;
      max?: number;
      progressNumberFormat?: string;
      progressPercentFormat?: number;
      progressStyle?: number;
      secondaryProgress?: number;
      cancelable?: boolean;
      cancelListener?: (dialog: any) => void;
      elevation?: number;
    }
    \n

    iOS Specific

    \n
    export interface OptionsIOS {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: UIView;
      square?: boolean;
    }
    \n

    Mode Enum

    \n
    export enum Mode {
      Indeterminate = 0,
      Determinate = 1,
      DeterminateHorizontalBar = 2,
      AnnularDeterminate = 3,
      CustomView = 4,
      Text = 5,
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-couchbase":{"name":"@triniwiz/nativescript-couchbase","version":"1.4.0","license":"Apache-2.0","readme":"

    NativeScript-Couchbase

    \n

    Installation

    \n
    tns plugin add @triniwiz/nativescript-couchbase
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/appurl":{"name":"@nativescript-community/appurl","version":"1.4.2","license":"MIT","readme":"

    NativeScript URL Handler Plugin \"apple\" \"android\"

    \n

    this is a direct fork/rewrite of nativescript-urlhandler by Martin Reinhardt\nIt did not seem to be maintained anymore and was not working as expected

    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { handleOpenURL, AppURL } from '@nativescript-community/appurl';

    @Component({
      selector: \"gr-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
        } 
        
        ngOnInit(){
            handleOpenURL((appURL: AppURL) => {
                console.log('Got the following appURL', appURL);
            });
         }
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require(\"@nativescript-community/appurl\").handleOpenURL;

    handleOpenURL(function(appURL) {
      console.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from '@nativescript-community/appurl';

    handleOpenURL((appURL: AppURL) => {
      console.log('Got the following appURL', appURL);
    });
    \n
    \n

    Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

    \n
    \n

    Installation

    \n
    $ tns plugin add @nativescript-community/appurl
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add @nativescript-community/appurl@next
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" /> 
        <action android:name=\"android.intent.action.VIEW\" /> 
        <category android:name=\"android.intent.category.DEFAULT\" /> 
        <category android:name=\"android.intent.category.BROWSABLE\" /> 
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" /> 
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
    \n

    FAQ

    \n

    Callback handling

    \n

    The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    \n
        No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
    \n

    Webpack

    \n

    TypeScript Config

    \n

    If your Webpack Build is failing, try adapting your tsconfig to this:

    \n
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"emitDecoratorMetadata\": true,
            \"noEmitHelpers\": true,
            \"noEmitOnError\": true,
            \"lib\": [
                \"es6\",
                \"dom\",
                \"es2015.iterable\"
            ],
            \"baseUrl\": \".\",
            \"paths\": {
                \"*\": [
                    \"./node_modules/@nativescript/core/*\",
                    \"./node_modules/*\"
                ]
            }
        },
        \"exclude\": [
            \"node_modules\",
            \"platforms\",
            \"**/*.aot.ts\"
        ]
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-coachmarks":{"name":"@nstudio/nativescript-coachmarks","version":"3.0.0","license":"Apache-2.0","readme":"

    NativeScript plugin to display user coach marks utilizing shape cutouts over an existing UI. This approach leverages your actual UI as part of the onboarding process for your user.

    \n

    Based on MPCoachMarks.

    \n

    You can view screenshots here.

    \n

    Install

    \n
    npm install @nstudio/nativescript-coachmarks --save
    \n\n

    Usage

    \n

    Android

    \n
    import { CoachMarks, CoachMark } from '@nstudio/nativescript-coachmarks';

    // assuming page is defined
    let AndroidButton = page.getViewById('my-button')
    let AndroidLabel = page.getViewById('my-label');
    let cm = new CoachMarks();
    cm.initEvents(); //If you want events

    cm.events.on('click', (eventData) => {
      // clicked on item at step index: eventData.data.index
    });
    cm.events.on('cleanup', (eventData) => {
      // clean up any instances in your implementation
    });
    cm.events.on('navigate', (eventData) => {
      // navigated to index
    });

    let marks = [
      new CoachMark({
        caption: '1. My Button.',
        view: AndroidButton
      }),
      new CoachMark({
        caption: '2. My Label.',
        view: AndroidLabel
      })
    ];

    cm.start(marks);
    \n

    Simple

    \n

    Use static methods to show coachmarks.

    \n
    import { CoachMarks, CoachMark } from '@nstudio/nativescript-coachmarks';

    // assuming page is defined
    let iOSButton = page.getViewById('my-button').ios;
    let iOSLabel = page.getViewById('my-label').ios;

    let marks = [
      new CoachMark({
        position: CGRectMake(
          iOSButton.frame.origin.x - 5,
          iOSButton.frame.origin.y + 20,
          iOSButton.frame.size.width + 10,
          iOSButton.frame.size.height
        ),
        caption: '1. My Button.',
        shape: CoachMark.SHAPES.DEFAULT,
        labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
        labelAlignment: CoachMark.LABEL_ALIGNMENTS.LEFT,
        showArrow: true
      }),
      new CoachMark({
        position: CGRectMake(
          iOSLabel.frame.origin.x, 
          iOSLabel.frame.origin.y + 64, 
          iOSLabel.frame.size.width, 
          iOSLabel.frame.size.height
        ),
        caption: '2. My Label.',
        shape: CoachMark.SHAPES.DEFAULT,
        labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
        labelAlignment: CoachMark.LABEL_ALIGNMENTS.CENTER,
        showArrow: true
      })
    ];

    CoachMarks.start(marks);
    \n

    Advanced

    \n

    Configure advanced options by creating an instance to listen to events and further customize coachmarks.

    \n
    import { CoachMarks, CoachMark, ICoachMarkOptions } from '@nstudio/nativescript-coachmarks';

    // define custom options
    let options: ICoachMarkOptions = {
      continueLabelText: 'Tap Screen for Next Tip',
      skipButtonText: 'Exit',
      lblSpacing: 15,
      maskColor: UIColor.colorWithRedGreenBlueAlpha(0.30, 0.46, 0.89, .9)
    };

    // create a CoachMarks instance
    let coachMarksInstance = new CoachMarks();

    // initialize events
    coachMarksInstance.initEvents();

    // wire up events

    // fired each time user taps screen and advances to next step (including the first step display)
    coachMarksInstance.events.on('navigate', (eventData) => {
      console.log(`navigated to index: ${eventData.data.index}`);

      // customize 'continue' label or 'skip' button
      // their style can be changed upon each step or only once on first step
      // first, grab the coachmarks instance
      let instance = eventData.data.instance;

      // wanna change the arrow image for each step?
      instance.arrowImage.image = UIImage.imageNamed('custom-arrow.png');

      if (instance.lblContinue) {
        // customize continue button
        // only available when the first step fires (disappears after first tap)
        let labelContinue = instance.lblContinue.frame;
        instance.lblContinue.frame = CGRectMake(labelContinue.origin.x, labelContinue.origin.y - 20, labelContinue.size.width, labelContinue.size.height + 20);
        instance.lblContinue.backgroundColor = new Color('#FFE108').ios; 
        
        // custom caption color
        instance.lblCaption.textColor = new Color('#FFE108').ios;

        // customize skip button
        let btnSkip = instance.btnSkipCoach.frame;
        instance.btnSkipCoach.frame = CGRectMake(btnSkip.origin.x, btnSkip.origin.y - 20, btnSkip.size.width, btnSkip.size.height + 20);
      }    
    });
    coachMarksInstance.events.on('click', (eventData) => {
      // clicked on item at step index: eventData.data.index
    });
    coachMarksInstance.events.on('cleanup', (eventData) => {
      // clean up any instances in your implementation
    });

    // define your marks

    // assuming page is defined
    let iOSButton = page.getViewById('my-button').ios;
    let iOSLabel = page.getViewById('my-label').ios;

    let marks = [
      new CoachMark({
        position: CGRectMake(
          iOSButton.frame.origin.x - 5,
          iOSButton.frame.origin.y + 20,
          iOSButton.frame.size.width + 10,
          iOSButton.frame.size.height
        ),
        caption: '1. My Button.',
        shape: CoachMark.SHAPES.DEFAULT,
        labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
        labelAlignment: CoachMark.LABEL_ALIGNMENTS.LEFT,
        showArrow: true
      }),
      new CoachMark({
        position: CGRectMake(
          iOSLabel.frame.origin.x, 
          iOSLabel.frame.origin.y + 64, 
          iOSLabel.frame.size.width, 
          iOSLabel.frame.size.height
        ),
        caption: '2. My Label.',
        shape: CoachMark.SHAPES.DEFAULT,
        labelPosition: CoachMark.LABEL_POSITIONS.BOTTOM,
        labelAlignment: CoachMark.LABEL_ALIGNMENTS.CENTER,
        showArrow: true
      })
    ];

    CoachMarks.start(marks, options, coachMarksInstance);
    \n

    CoachMarks

    \n

    Used to configure and display coach marks.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    CoachMarks.APP_SETTINGS_KEY: stringThe persistence key used when saving whether your marks have been shown or not. Defaults to 'CoachMarks'.
    CoachMarks.DEBUG: booleanTurns on some helpful logging if you have trouble setting things up.
    CoachMarks.CONTINUE_LOCATIONS: ICONTINUE_LOCATIONUse with the continueLocation option to change position of the continue/skip bar. Supports: TOP, CENTER, BOTTOM.
    events: ObservableUsed when setting up instance events.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    CoachMarks.start(marks: Array<CoachMark>, options?: ICoachMarkOptions, instance?: CoachMarks): voidUsed to start the coachmarks.
    CoachMarks.HAS_SHOWN(): booleanWhether coachmarks have been shown.
    CoachMarks.PERSIST(): voidSimply persists true using the CoachMarks.APP_SETTINGS_KEY. You normally don't use this directly but is rather used internally when using the persist option when calling start.
    CoachMarks.RESET(): voidUsed to clear persisted value that marks had been shown.
    \n

    Options:

    \n
    interface ICoachMarkOptions {
      enableContinueLabel?: boolean;  // true
      enableSkipButton?: boolean;     // true
      continueLabelText?: string;     // 'Tap to continue'
      skipButtonText?: string;        // 'Skip'
      animationDuration?: number;     // .3
      continueLocation?: number;      // Bottom
      lblSpacing?: number;            // 35
      cutoutRadius?: number;          // 2
      maskColor?: any;                // 0,0,0 alpha 0.9
      maxLblWidth?: number;           // 230
      persist?: boolean;              // false
    }
    \n

    CoachMark

    \n

    Used to define your marks.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    position: anyAn iOS CGRect position object.
    caption: stringYour caption label text.
    shape: numberUse CoachMark.SHAPES. Supports: TOP, CENTER, BOTTOM.
    labelPosition: numberUse CoachMark.LABEL_POSITIONS. Supports: BOTTOM, LEFT, TOP, RIGHT, RIGHT_BOTTOM.
    labelAlignment: numberUse CoachMark.LABEL_ALIGNMENTS. Supports: CENTER, LEFT, RIGHT.
    showArrow: booleanShow arrow or not.
    view:ViewView to highlight . Android only
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leena-ai/sdk":{"name":"@leena-ai/sdk","version":"1.0.5","license":"Apache-2.0","readme":"

    @leena-ai/sdk

    \n
    ns plugin add @leena-ai/sdk
    \n

    Usage

    \n

    XML + Typescript

    \n
      \n
    1. \n

      Add xmlns to Page element

      \n
      2. \n
    2. \n

      Use the name of xmlns as a selector

      \n
      3. \n
    3. \n

      Leena SDK exports the component named Sdk which can be used to open a Leena bot

      \n

      Example:

      \n
      <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"    
      xmlns:ln=\"@leena-ai/sdk\" navigatingTo=\"navigatingTo\" class=\"page\">
       <!-- Here Goes your Header and any other UI -->
           <GridLayout>
               <ln:Sdk clientId=\"{{ clientId }}\" token=\"changeme\"></ln:Sdk>
           </GridLayout>
       </Page>

      \n
      4. \n
    \n

    Nativescript Angular

    \n
      \n
    1. Import NativeScriptSdkModule in the module you want to load Leena App
      2. \n
    2. Leena SDK exports a component named Sdk that can used like any other Angular component
      3. \n
    \n

    Note: Use a <GridLayout> instead of <StackLayout> if the UI does not load

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultRequiredDescription
    clientId-YesThe client ID for Leena bot.
    token-YesThe app token which will authenticate the user with Leena App
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-view":{"name":"nativescript-test-view","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-test-view

    \n
    npm install nativescript-test-view
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-messenger":{"name":"@triniwiz/nativescript-messenger","version":"1.0.0","license":"Apache-2.0","readme":"

    @triniwiz/nativescript-messenger

    \n
    npm install @triniwiz/nativescript-messenger
    \n

    Usage

    \n

    Method

    \n

    send: Sends a message to one or multiple recipients

    \n
    Parameters
    \n
      \n
    • numbers: An array of phone number strings. Supports just one or multiple. optional
      • \n
    • message: The body message. optional
      • \n
    • subject: The subject message. optional
      • \n
    • media: Attachments switches message to mms supports png,jpeg,mp4 optional
      • \n
    \n
    import {send, available} from \"@triniwiz/nativescript-messenger\";
    const numbers = [\"868-657-1234\", \"868-630-4321\", \"868-648-1122\"];
    send(numbers, \"My message\", \"Subject of Message\", [
                        {
    \t\t\t\t\t\tfileName: 'destiny_2.jpg',
    \t\t\t\t\t\tmimeType: 'image/jpg',
    \t\t\t\t\t\tpath: '~/assets/destiny_2.jpg',
    \t\t\t\t\t}
    ]);
    \n

    This method also returns a promise. Use as so to define actions after the user has either canceled or sent the message.

    \n
        send([\"868-555-5555\", \"868-555-4444\"], \"this is body\").then(function(args){
            console.log(args.response); 
            // either a string saying cancelled or sent
            console.log(args.message); 
            // just a string with more detail than response.
            
            /* you can do stuff here.. this happens back 
            in your app after the message window has 
            been dismissed */        
            
        }, function (e) {
            console.log(\"Error occurred \" + e); 
            // e will show a vague error message.
        });
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alogent/nativescript-zelle-coop":{"name":"@alogent/nativescript-zelle-coop","version":"3.0.2","license":"Apache-2.0","readme":"

    @alogent/nativescript-zelle-coop

    \n
    ns plugin add @alogent/nativescript-zelle-coop
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-blurview":{"name":"@nativescript-community/ui-blurview","version":"1.2.2","license":"Apache-2.0","readme":"

    NativeScript Blurview widget

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript BlurView widget.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add @nativescript-community/ui-blurview

    \n

    This command automatically installs the necessary files, as well as stores @nativescript-community/ui-blurview as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Usage

    \n

    You need to add xmlns:gv="@nativescript-community/ui-blurview" to your page tag, and then simply use <gv:BlurView/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-blurview\" loaded=\"pageLoaded\">
        <GridLayout rows=\"\" columns=\"\">
            <Image src=\"https://wallpaperscraft.com/image/rose_flower_colorful_close-up_petals_18824_960x544.jpg\" id=\"bgimage\" stretch=\"aspectFill\" />
            <bv:BlurView></bv:BlurView>
        </GridLayout>
    </Page>
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/nativescript-community/ui-blurview
    $ cd @nativescript-community/ui-blurview
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-adobe-experience-cloud":{"name":"@essent/nativescript-adobe-experience-cloud","version":"3.0.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-svelte-vision":{"name":"@nativescript/template-blank-svelte-vision","version":"8.6.5","license":"Apache-2.0","readme":"

    NativeScript with Svelte for visionOS

    \n
    ns run visionos --no-hmr
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-exit":{"name":"nativescript-exit","version":"1.0.1","readme":"

    \"Build\n\"NPM\n\"npm\n\"Dependency

    \n

    nativescript-exit

    \n

    A plugin for Nativescript framework implementing exit function for the application

    \n

    ##install\nnpm install nativescript-exit --save

    \n

    ##usage

    \n
    import {exit} from 'nativescript-exit';
    exit();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-perms":{"name":"nativescript-perms","version":"2.0.11","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-perms
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    This is a port of react-native-permissions

    \n

    API

    \n

    Permissions statuses

    \n

    Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Return valueNotes
    authorizedUser has authorized this permission
    deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
    restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
    undeterminedUser has not yet been prompted with a permission dialog
    \n

    Supported permissions types

    \n

    The current supported permissions are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeiOSAndroid
    Locationlocation✔✔
    Cameracamera✔✔
    Microphonemicrophone✔✔
    Photosphoto✔✔
    Contactscontacts✔✔
    Eventsevent✔✔
    Bluetoothbluetooth✔❌
    Remindersreminder✔❌
    Push Notificationsnotification✔❌
    Background RefreshbackgroundRefresh✔❌
    Speech RecognitionspeechRecognition✔❌
    Media LibrarymediaLibrary✔❌
    Motion Activitymotion✔❌
    Storagestorage❌️✔
    Phone CallcallPhone❌️✔
    Read SMSreadSms❌️✔
    Receive SMSreceiveSms❌️✔
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method NameArgumentsNotes
    check()type- Returns a promise with the permission status. See iOS Notes for special cases
    request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
    checkMultiple()[types]- Accepts an array of permission types and returns a promise with an object mapping permission types to statuses
    getTypes()none- Returns an array of valid permission types
    openSettings()none- (iOS only - 8.0 and later) Switches the user to the settings page of your app
    canOpenSettings()none- (iOS only) Returns a boolean indicating if the device supports switching to the settings page
    \n

    iOS Notes

    \n
      \n
    • Permission type bluetooth represents the status of the\nCBPeripheralManager. Don't use this if only need CBCentralManager
      • \n
    • Permission type location accepts a second parameter for request() and\ncheck(); the second parameter is a string, either always or whenInUse\n(default).
      • \n
    • Permission type notification accepts a second parameter for request(). The\nsecond parameter is an array with the desired alert types. Any combination of\nalert, badge and sound (default requests all three).
      • \n
    • If you are not requesting mediaLibrary then you can remove MediaPlayer.framework from the xcode project
      • \n
    \n
    // example
    Permissions.check('location', { type: 'always' }).then(response => {
      this.setState({ locationPermission: response[0] })
    })

    Permissions.request('location', { type: 'always' }).then(response => {
      this.setState({ locationPermission: response[0] })
    })

    Permissions.request('notification', { type: ['alert', 'badge'] }).then(
      response => {
        this.setState({ notificationPermission: response[0] })
      },
    )
    \n
      \n
    • You cannot request microphone permissions on the simulator.
      • \n
    • With Xcode 8, you now need to add usage descriptions for each permission you\nwill request. Open Xcode ➜ Info.plist ➜ Add a key (starting with "Privacy -\n...") with your kit specific permission.
      • \n
    \n

    Example: If you need Contacts permission you have to add the key Privacy - Contacts Usage Description.

    \n\"3cde3b44-7ffd-11e6-918b-63888e33f983\"\n

    App Store submission disclaimer

    \n

    If you need to submit you application to the AppStore, you need to add to your\nInfo.plist all *UsageDescription keys with a string value explaining to the\nuser how the app uses this data. Even if you don't use them.

    \n

    So before submitting your app to the App Store, make sure that in your\nInfo.plist you have the following keys:

    \n
    <key>NSBluetoothPeripheralUsageDescription</key>
    <string>Some description</string>
    <key>NSCalendarsUsageDescription</key>
    <string>Some description</string>
    <key>NSCameraUsageDescription</key>
    <string>Some description</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Some description</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>Some description</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Some description</string>
    <key>NSSpeechRecognitionUsageDescription</key>
    <string>Some description</string>
    <key>NSAppleMusicUsageDescription</key>
    <string>Some description</string>
    <key>NSMotionUsageDescription</key>
    <string>Some description</string>
    \n

    This is required because during the phase of processing in the App Store\nsubmission, the system detects that you app contains code to request the\npermission X but don't have the UsageDescription key and then it rejects the\nbuild.

    \n
    \n

    Please note that it will only be shown to the users the usage descriptions of\nthe permissions you really require in your app.

    \n
    \n

    You can find more information about this issue in #46.

    \n

    Android Notes

    \n
      \n
    • \n

      All required permissions also need to be included in the AndroidManifest.xml\nfile before they can be requested. Otherwise request() will immediately\nreturn denied.

      \n
      • \n
    • \n

      You can request write access to any of these types by also including the\nappropriate write permission in the AndroidManifest.xml file. Read more\nhere.

      \n
      • \n
    • \n

      The optional rationale argument will show a dialog prompt.

      \n
      • \n
    \n
    // example
    Permissions.request('camera', {
      rationale: {
        title: 'Cool Photo App Camera Permission',
        message:
          'Cool Photo App needs access to your camera ' +
          'so you can take awesome pictures.',
      },
    }).then(response => {
      this.setState({ cameraPermission: response[0] })
    })
    \n
      \n
    • Permissions are automatically accepted for targetSdkVersion < 23 but you\ncan still use check() to check if the user has disabled them from Settings.
      • \n
    \n

    You might need to elevate the targetSdkVersion version in your\nbuild.gradle:

    \n
    android {
      compileSdkVersion 23 // ← set at least 23
      buildToolsVersion \"23.0.1\"  // ← set at least 23.0.0

      defaultConfig {
        minSdkVersion 16
        targetSdkVersion 23 // ← set at least 23
        // ...
    \n

    Troubleshooting

    \n

    Q: iOS - App crashes as soon as I request permission

    \n
    \n

    A: Starting with Xcode 8, you need to add permission descriptions. See iOS\nnotes for more details. Thanks to @jesperlndk\nfor discovering this.

    \n
    \n

    Q: iOS - App crashes when I change permission from settings

    \n
    \n

    A: This is normal. iOS restarts your app when your privacy settings change.\nJust google "iOS crash permission change"

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-calendar":{"name":"nativescript-fancy-calendar","version":"3.0.2","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Fancy Calendar

    \n

    NativeScript plugin for iOS and Android.

    \n

    This plugin is not production ready, and there is still a lots of work to do on it. That's why I advise you to use the nativescript-pro-ui calendar which is supported by Telerik itself :beers:.

    \n

    Screenshots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Install

    \n
    tns plugin add nativescript-fancy-calendar
    \n

    Documentation

    \n

    component.html

    \n
    <Calendar backgroundColor=\"#686B74\" row=\"1\" [settings]=\"settings\" [events]=\"events\" [appearance]=\"appearance\"
            (dateSelected)=\"dateSelected($event)\" (monthChanged)=\"monthChanged($event)\" (loaded)=\"calendarLoaded($event)\">
    </Calendar>
    \n

    component.ts

    \n
    import {
        Calendar,
        SELECTION_MODE, // Multiple or single
        DISPLAY_MODE, // Week or month
        CalendarEvent, // little dots 
        Appearance, // style customisation
        SCROLL_ORIENTATION, // scroll orientation for iOS
        CalendarSubtitle, // subtitles for iOS
        Settings // Settings interface
    } from 'nativescript-fancy-calendar';

    registerElement('Calendar', () => Calendar);

    @Component({
        selector: \"ns-yourcomponent\",
        templateUrl: \"yourcomponent.component.html\",
    })
    export class YourComponent {
        settings: any;
        subtitles: CalendarSubtitle[];
        events: CalendarEvent[];
        public appearance: Appearance;
        private _calendar: Calendar;
        
        public calendarLoaded(event) {
             this.settings = <Settings>{
                displayMode: DISPLAY_MODE.MONTH, 
                scrollOrientation: SCROLL_ORIENTATION.HORIZONTAL,
                selectionMode: SELECTION_MODE.MULTIPLE,
                firstWeekday: 3, // SUN: O, MON: 1, TUES: 2 etc..
                maximumDate: nextMonth, // Can't go further than this date
                minimumDate: lastMonth // can'    t go earlier than this date
            };
            this.appearance = <Appearance>{
                weekdayTextColor: \"white\", //color of Tue, Wed, Thur.. (only iOS)
                headerTitleColor: \"white\", //color of the current Month (only iOS)
                eventColor: \"white\", // color of dots
                selectionColor: \"#FF3366\", // color of the circle when a date is clicked
                todayColor: \"#831733\", // the color of the current day
                hasBorder: true, // remove border (only iOS)
                todaySelectionColor: \"#FF3366\", // today color when seleted (only iOS)
                borderRadius: 25 // border radius of the selection marker
            };
        }
        
        public dateSelected(event) {
            console.log('date selected');
        }


        public monthChanged(event) {
            console.log('month selected');
        }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/insomnia":{"name":"@nativescript-community/insomnia","version":"2.0.2","license":"MIT","readme":"

    NativeScript Insomnia

    \n
    \n

    💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.3.

    \n
    \n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @nativescript-community/insomnia
    \n

    Usage

    \n

    To use this plugin you must first require() it:

    \n

    JavaScript

    \n
    var insomnia = require(\"@nativescript-community/insomnia\");
    \n

    TypeScript

    \n

    You could do the same as in JS, but this looks fancier, right?

    \n
    import { keepAwake, allowSleepAgain } from \"@nativescript-community/insomnia\";
    \n

    keepAwake

    \n
      insomnia.keepAwake().then(function() {
          console.log(\"Insomnia is active\");
      })
    \n

    allowSleepAgain

    \n
      insomnia.allowSleepAgain().then(function() {
          console.log(\"Insomnia is inactive, good night!\");
      })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-slides":{"name":"nativescript-ngx-slides","version":"6.1.0","license":"MIT","readme":"

    NativeScript + Angular Slides for iOS and Android

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Intro slides example:

    \n

    \"Nativescript

    \n

    Image carousel example:

    \n

    \"Nativescript

    \n

    videos are from the NativeScript Slides plugin. all features may not be implemented yet.

    \n

    videos by Brad Martin

    \n

    Example Usage:

    \n
    import { SlidesModule } from \"nativescript-ngx-slides\";

    import { AppComponent } from \"./app.component\";

    @NgModule({
      declarations: [AppComponent],
      bootstrap: [AppComponent],
      imports: [NativeScriptModule, SlidesModule],
      schemas: [NO_ERRORS_SCHEMA]
    })
    export class AppModule {}
    \n

    XML

    \n
    <slides>
        <slide class=\"slide-1\">
            <Label text=\"This is Panel 1\"></Label>
        </slide>
        <slide class=\"slide-2\">
            <Label text=\"This is Panel 2\"></Label>
        </slide>
        <slide class=\"slide-3\">
            <Label text=\"This is Panel 3\"></Label>
        </slide>
        <slide class=\"slide-4\">
            <Label text=\"This is Panel 4\"></Label>
        </slide>
        <slide class=\"slide-5\">
            <Label text=\"This is Panel 5\"></Label>
        </slide>
    </slides>
    \n

    CSS

    \n

    place this in the app.css file in the root of your project.

    \n
    .slide-1 {
      background-color: darkslateblue;
    }

    .slide-2 {
      background-color: darkcyan;
    }
    .slide-3 {
      background-color: darkgreen;
    }

    .slide-4 {
      background-color: darkgoldenrod;
    }
    .slide-5 {
      background-color: darkslategray;
    }
    label {
      text-align: center;
      width: 100%;
      font-size: 35;
      margin-top: 35;
      color: #fff;
    }
    \n

    Great for Intros/Tutorials to Image Carousels.

    \n

    This very much a work in progress. Please feel free to contribute.

    \n

    Attributes for SlideContainer

    \n
      \n
    • \n

      loop : boolean - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

      \n
      • \n
    • \n

      pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

      \n
      • \n
    • \n

      swipeSpeed : number - Determines the speed of swipe. The bigger swipeSpeed property is, the faster you swipe the slides. Default value is 3. Try changing it to 15 to see the result.

      \n
      • \n
    \n

    Indicators

    \n

    If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

    \n
    .slide-indicator-inactive {
      background-color: #fff;
      opacity: 0.4;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }

    .slide-indicator-active {
      background-color: #fff;
      opacity: 0.9;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }
    \n

    Plugin Development Work Flow:

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install to prepare the project
      • \n
    • Run and deploy to your device or emulator with npm run android or npm run ios
      • \n
    • Build a ngPackagr version with npm run build
      • \n
    \n

    Known issues

    \n
      \n
    • Does not work well inside of ScrollView or TabViews.
      • \n
    \n

    Contributors

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"TheOriginalJosh\"\"dobjek\"\"EddyVerbruggen\"\"Marco
    Josh SommerdobjekEddy VerbruggenCodeback Software
    \n

    Contributing guidelines

    \n

    Contributing guidelines

    \n

    License

    \n

    MIT

    \n

    for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase":{"name":"nativescript-couchbase","version":"1.0.18","license":"Apache-2.0","readme":"

    Couchbase Lite Plugin for Telerik NativeScript

    \n

    Couchbase Lite is a NoSQL embedded database for mobile devices. It is a replacement for common database technologies like SQLite and Core Data.

    \n

    Configuration

    \n

    To add this plugin to your Angular or vanilla JavaScript NativeScript project, execute the following from the Terminal or Command Prompt:

    \n
    tns plugin add nativescript-couchbase
    \n

    If you wish to try either of the demo applications that are bundled with this project, execute the following after cloning the repository:

    \n
    npm install
    npm run deploy-android-angular
    \n

    For the third line, the list of options are:

    \n
    npm run deploy-android-angular
    npm run deploy-android-vanilla
    npm run deploy-ios-angular
    npm run deploy-ios-vanilla
    \n

    If you're using TypeScript and wish to make use of the type definitions for this plugin, add the following line to your project's references.d.ts file:

    \n
    /// <reference path=\"./node_modules/nativescript-couchbase/couchbase.d.ts\" />
    \n

    Without the above line included, your TypeScript compiler may throw errors during the build.

    \n

    Usage

    \n

    Including the Plugin in Your Project

    \n
    var couchbaseModule = require(\"nativescript-couchbase\");
    \n

    Creating or Opening an Existing Database

    \n
    var database = new couchbaseModule.Couchbase(\"test-database\");
    \n

    Managing the Data with CRUD Operations

    \n

    Creating a New Document

    \n
    var documentId = database.createDocument({
        \"firstname\": \"Nic\",
        \"lastname\": \"Raboy\",
        \"address\": {
            \"city\": \"San Francisco\",
            \"state\": \"CA\",
            \"country\": \"USA\"
        }
        \"twitter\": \"https://www.twitter.com/nraboy\"
    });
    \n

    Retrieving an Existing Document

    \n
    var person = database.getDocument(documentId);
    \n

    Updating an Existing Document

    \n
    database.updateDocument(documentId, {
        \"firstname\": \"Nicolas\",
        \"lastname\": \"Raboy\",
        \"twitter\": \"https://www.twitter.com/nraboy\"
    });
    \n

    Deleting a Document

    \n
    var isDeleted = database.deleteDocument(documentId);
    \n

    Querying with MapReduce Views

    \n

    Knowing the document id isn't always an option. With this in mind, multiple documents can be queried using criteria defined in a view.

    \n

    Creating a MapReduce View

    \n

    A MapReduce View will emit a key-value pair. Logic can be placed around the emitter to make the views more specific.

    \n
    database.createView(\"people\", \"1\", function(document, emitter) {
        emitter.emit(document._id, document);
    });
    \n

    Querying a MapReduce View

    \n
    var rows = database.executeQuery(\"people\");
    for(var i = 0; i < rows.length; i++) {
        personList.push(rows[i]);
    }
    \n

    Synchronization with Couchbase Sync Gateway and Couchbase Server

    \n

    Couchbase Lite can work in combination with Couchbase Sync Gateway to offer synchronization support between devices and platforms. Couchbase Sync Gateway is not a requirement to use Couchbase Lite if the goal is to only use it for offline purposes.

    \n

    Couchbase Sync Gateway can be downloaded via the Couchbase Downloads Portal in the mobile section.

    \n

    A demo configuration file for Sync Gateway is included in the demo directory. It can be started by executing the following from a Command Prompt or Terminal:

    \n
    /path/to/sync/gateway/bin/sync_gateway /path/to/demo/sync-gateway-config.json
    \n

    In the demo configuration file, Couchbase Server is not used, but instead an in-memory database good for prototyping. It can be accessed via http://localhost:4985/_admin/ in your web browser.

    \n

    To replicate between the local device and server, the following must be added to your project:

    \n
    var couchbaseModule = require(\"nativescript-couchbase\");
    database = new couchbaseModule.Couchbase(\"test-database\");

    var push = database.createPushReplication(\"http://sync-gateway-host:4984/test-database\");
    var pull = database.createPullReplication(\"http://sync-gateway-host:4984/test-database\");
    push.setContinuous(true);
    pull.setContinuous(true);
    push.start();
    pull.start();
    \n

    Data will now continuously be replicated between the local device and Sync Gateway.

    \n

    Listening for Changes

    \n
    database.addDatabaseChangeListener(function(changes) {
        for(var i = 0; i < changes.length; i++) {
            console.log(changes[i].getDocumentId());
        }
    });
    \n

    Plugin Development

    \n

    The Couchbase NativeScript plugin is under active development. Changes to the API are infrequent in the underlying Couchbase Android and Couchbase iOS SDKs so as a result changes are infrequent in the JavaScript wrapper for NativeScript.

    \n

    If you feel something is missing or you've found a bug, open a ticket so it can be corrected or submit a pull request and be recognized for your contributions.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zip":{"name":"nativescript-zip","version":"4.0.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Zip

    \n

    Installation

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-zip
      • \n
    \n

    NativeScript 2x & 3x

    \n
      \n
    • tns plugin add nativescript-zip@2.0.4
      • \n
    \n

    Usage

    \n

    Zip

    \n
    import { Zip } from \"nativescript-zip\";
    import * as fs from \"tns-core-modules/file-system\";
    let path = fs.path.join(fs.knownFolders.temp().path, \"stuff\");
    let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
    Zip.zip({
        folder: path,
        destination: dest
    });
    \n

    Progress

    \n
    import { Zip } from \"nativescript-zip\";
    import * as fs from \"tns-core-modules/file-system\";
    let path = fs.path.join(fs.knownFolders.temp().path, \"stuff\");
    let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
    Zip.zip({
        folder: path,
        destination: dest,
        onProgress: onZipProgress
    });

    function onZipProgress(percent: number) {
        console.log(`unzip progress: ${percent}`);
    }
    \n

    Unzip

    \n
    import { Zip } from \"nativescript-zip\";
    import * as fs from \"tns-core-modules/file-system\";
    let zipPath = fs.path.join(fs.knownFolders.temp().path, \"stuff.zip\");
    let dest = fs.path.join(fs.knownFolders.documents().path, \"/assets\");
    Zip.unzip({
        archive: zipPath,
        destination: dest
    });
    \n

    Progress

    \n
    import { Zip } from \"nativescript-zip\";
    import * as fs from \"tns-core-modules/file-system\";
    let zipPath = fs.path.join(fs.knownFolders.temp().path, \"stuff.zip\");
    let dest = fs.path.join(fs.knownFolders.documennts().path, \"/assets\");
    Zip.unzip({
        archive: zipPath,
        destination: dest,
        onProgress: onUnZipProgress
    });

    function onUnZipProgress(percent: number) {
        console.log(`unzip progress: ${percent}`);
    }
    \n

    TODO

    \n
      \n
    • [x] Compress method
      • \n
    • [x] Progress
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-nfc":{"name":"@testjg/nativescript-nfc","version":"1.1.2","license":"Apache-2.0","readme":"

    @testjg/nativescript-nfc

    \n

    \"npm

    \n

    Based on the great and more complete: https://github.com/EddyVerbruggen/nativescript-nfc

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-nfc
    \n

    Usage

    \n

    Make sure your AndroidManifest.xml includes the permission:

    \n
    <uses-permission android:name=\"android.permission.NFC\"/>
    \n

    In your app code:

    \n
    import { NfcService } from '@testjg/nativescript-nfc';

    export class DemoNfc {
      private nfcService = new NfcService();

      async startListening() {
        const available = await this.nfcService.available();
        if (!available) return;

        const enabled = await this.nfcService.enabled();
        if (!enabled) return;

        this.nfcService.setOnNdefDiscoveredListener((nfcData) => console.log('Scanned', nfcData));
      }

      async stopListening() {
        this.nfcService.setOnNdefDiscoveredListener(null);
      }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@comporell/nativescript-mht-printer":{"name":"@comporell/nativescript-mht-printer","version":"1.2.5","license":"Apache-2.0","readme":"

    @comporell/nativescript-mht-printer

    \n
    ns plugin add @comporell/nativescript-mht-printer
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mastergui/in-app-review":{"name":"@mastergui/in-app-review","version":"1.1.0","license":"Apache-2.0","readme":"

    @mastergui/in-app-review

    \n
    ns plugin add @mastergui/in-app-review
    \n

    Usage

    \n

    Android

    \n

    The Google Play In-App Review API lets you prompt users to submit Play Store ratings and reviews without the inconvenience of leaving your app or game.

    \n

    \"\"

    \n
    \n

    In-app review flow for an Android user

    \n
    \n

    You must run this at the start of your app or at least before requesting to show the Review dialog. With the new In App Review API, it's Google who's in charge of deciding to show or not the dialog. Calling the init() method will initialize an instance of the ReviewManager and pre-cache a ReviewInfo object with the information needed for them to show it or not.

    \n
    import { InAppReview } from \"@mastergui/in-app-review\"

    InAppReview.init()
    \n

    To show the dialog, run the following method, and, depending on the ReviewInfo object previously obtained, the dialog will pop up or not.

    \n
    import { InAppReview } from \"@mastergui/in-app-review\"

    InAppReview.showReviewDialog()
    \n

    It's important to note that the dialog will only show if the app is on the Google Play Store. For development purposes, I added some toasts to understand if everything is going correctly.

    \n

    For more information on the In-App-Review API, check the official documentation

    \n

    iOS

    \n

    Presenting your users with a request for an App Store review using SKStoreReviewController is a good way to get feedback on your app.\n\"\"

    \n
    \n

    In-app review flow for a iOS user

    \n
    \n

    On iOS there's no need to pre-cache the SKStoreReviewController object, but calling the init()method will not result in an error either way; so just calling this should work.

    \n
    import { InAppReview } from \"@mastergui/in-app-review\"

    InAppReview.showReviewDialog()
    \n

    As in Android's case, it's now Apple who decide whether to show the review dialog or not. Depending on the iOS version, the dialog shown could be different (iOS<13). Apple prevents the dialog from showing more than 3 times a year.

    \n

    Apple provides some best practices on when and where to show the review dialog:

    \n
      \n
    • \n

      Try to make the request at a time that doesn’t interrupt what the user is trying to achieve in your app. For example, at the end of a sequence of events that the user successfully completes.

      \n
      • \n
    • \n

      Avoid showing a request for a review immediately when a user launches your app, even if it isn’t the first time that it launches.

      \n
      • \n
    • \n

      Avoid requesting a review as the result of a user action.

      \n
      • \n
    \n

    For more information on the Requesting App Store reviews, check the official documentation

    \n

    Acknowledgments

    \n

    Thanks to @triniwiz the plugin master and the NativeScript team for building such good tutorials on their blog

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-orientation":{"name":"@nativescript-use/nativescript-orientation","version":"0.0.3","license":"Apache-2.0","readme":"

    @nativescript-use/nativescript-orientation

    \n
    npm install @nativescript-use/nativescript-orientation
    \n

    Usage

    \n
    import { Orientation } from \"@nativescript-use/nativescript-orientation\"

    const orientation = new Orientation();

    // Get current orientation
    const currentOrientation = orientation.getOrientation();

    // Change orientation. values: 'landscape' | 'landscaperight' | 'landscapeleft' | 'portrait'
    orientation.setOrientation('landscape');

    // Enable rotation
    orientation.enableRotation();

    // Disable rotation
    orientation.disableRotation();

    // Add listener
    orientation.onChangedOrientation((newValue: CoreTypes.DeviceOrientationType) =>{
      console.log(newValue)
    });
    // Remove listener
    orientation.offChangedOrientation();
    \n

    Type declaration

    \n
    export declare class Orientation {
      getOrientation(): CoreTypes.DeviceOrientationType
      onChangedOrientation(callback: (newValue: CoreTypes.DeviceOrientationType) => void): void
      offChangedOrientation(): void
      enableRotation(): void
      disableRotation(): void
      setOrientation(value: 'landscape' | 'landscaperight' | 'landscapeleft' | 'portrait', animation: false): void
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/visionos":{"name":"@nativescript/visionos","version":"8.6.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@manojdcoder/nativescript-pedometer":{"name":"@manojdcoder/nativescript-pedometer","version":"2.3.0","license":"Apache-2.0","readme":"

    @manojdcoder/nativescript-pedometer

    \n
    ns plugin add @manojdcoder/nativescript-pedometer
    \n

    Usage

    \n

    Example

    \n

    Refer the demo app

    \n

    Android Settings

    \n

    Foreground service is used to continuously monitor step counts even app is in background or not running or killed. The webpack configuration must be adjusted to include the foreground service,

    \n
    const webpack = require('@nativescript/webpack');
    const { resolve } = require('path');

    module.exports = (env) => {
      // Copy the line below to your webpack.config.js
      env.appComponents = (env.appComponents || []).concat([resolve(__dirname, 'node_modules/@manojdcoder/nativescript-pedometer/step-counter-broadcast-receiver.android')]);

      webpack.init(env);
      webpack.useConfig('typescript');

      webpack.chainWebpack((config) => {
        // shared demo code
        config.resolve.alias.set('@demo/shared', resolve(__dirname, '..', '..', 'tools', 'demo'))    ;
      });

      // Example if you need to share images across demo apps:
      // webpack.Utils.addCopyRule({
      //   from: '../../../tools/images',
      // \tto: 'images',
      //   context: webpack.Utils.project.getProjectFilePath('node_modules')
      // });

      return webpack.resolveConfig();
    };
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leena-ai/nativescript-sdk":{"name":"@leena-ai/nativescript-sdk","version":"1.1.5","license":"Apache-2.0","readme":"

    @leena-ai/nativescript-sdk

    \n
    ns plugin add @leena-ai/nativescript-sdk
    \n

    Usage

    \n

    XML + Typescript

    \n
      \n
    1. \n

      Add xmlns to Page element

      \n
      2. \n
    2. \n

      Use the name of xmlns as a selector

      \n
      3. \n
    3. \n

      Leena SDK exports the component named Sdk which can be used to open a Leena bot

      \n

      Example:

      \n
      <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"    
      xmlns:ln=\"@leena-ai/sdk\" navigatingTo=\"navigatingTo\" class=\"page\">
       <!-- Here Goes your Header and any other UI -->
           <GridLayout>
               <ln:Sdk clientId=\"{{ clientId }}\" token=\"changeme\"></ln:Sdk>
           </GridLayout>
       </Page>
      \n
      4. \n
    \n

    Nativescript Angular

    \n
      \n
    1. Import NativeScriptSdkModule in the module you want to load Leena App
      2. \n
    2. Leena SDK exports a component named Sdk that can used like any other Angular component
      3. \n
    3. You can also provide a pageTransition if the sdk is opened as a new route with it's own component
      4. \n
    \n

    home.component.html

    \n
    <Button text=\"Leena AI\" [nsRouterLink]=\"['/leena']\" pageTransition=\"slideLeft\" ></Button>
    \n

    leena.component.html

    \n
    <GridLayout>
      <Sdk clientId=\"clientId\" token=\"changeme\"></Sdk>
    </GridLayout>
    \n

    Note: Use a <GridLayout> instead of <StackLayout> if the UI does not load

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultRequiredDescription
    clientId-YesThe client ID for Leena bot.
    token-YesThe app token which will authenticate the user with Leena App
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-nativescript-yidong-kaifa":{"name":"angular-nativescript-yidong-kaifa","version":"2023.207.0","license":"CC BY-NC-SA 4.0","readme":"

    Angular NativeScript 移动开发

    \n

    下载

    \n

    Docker

    \n
    docker pull apachecn0/angular-nativescript-yidong-kaifa
    docker run -tid -p <port>:80 apachecn0/angular-nativescript-yidong-kaifa
    # 访问 http://localhost:{port} 查看文档
    \n

    PYPI

    \n
    pip install angular-nativescript-yidong-kaifa
    angular-nativescript-yidong-kaifa <port>
    # 访问 http://localhost:{port} 查看文档
    \n

    NPM

    \n
    npm install -g angular-nativescript-yidong-kaifa
    angular-nativescript-yidong-kaifa <port>
    # 访问 http://localhost:{port} 查看文档
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ios-inspector":{"name":"tns-ios-inspector","version":"6.5.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-health-data":{"name":"nativescript-health-data","version":"1.4.0","license":"MIT","readme":"

    \n \n

    \n

    Health Data plugin for NativeScript

    \n

    This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Prerequisites

    \n

    Android

    \n

    Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

    \n
    keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
    \n
    \n

    Note that the default (debug) keystore password is empty.

    \n
    \n

    iOS

    \n

    Make sure you enable the HealthKit entitlement in your app ID.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI:

    \n
    tns plugin add nativescript-health-data
    \n

    API

    \n

    The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

    \n

    This is how you can import and instantiate the plugin, all examples expect this setup:

    \n
    import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

    export class MyHealthyClass {
      private healthData: HealthData;

      constructor() {
        this.healthData = new HealthData();
      }
    }
    \n

    isAvailable

    \n

    This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

    \n
    this.healthData.isAvailable(false)
        .then(available => console.log(available));
    \n

    isAuthorized

    \n

    This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

    \n
      \n
    • The name can be one of the 'Available Data Types'.
      • \n
    • The accessType can be one of read, write, or readAndWrite (note that this plugin currently only supports reading data, but that will change).
      • \n
    \n
    \n

    iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

    \n
    \n
    this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
        .then(authorized => console.log(authorized));
    \n

    requestAuthorization

    \n

    This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

    \n

    Note that this plugin currently only supports reading data, but that will change.

    \n
    const types: Array<HealthDataType> = [
    \t{name: \"height\", accessType: \"write\"},
    \t{name: \"weight\", accessType: \"readAndWrite\"},
    \t{name: \"steps\", accessType: \"read\"},
    \t{name: \"distance\", accessType: \"read\"}
    ];

    this.healthData.requestAuthorization(types)
        .then(authorized => console.log(authorized))
        .catch(error => console.log(\"Request auth error: \", error));
    \n

    query

    \n

    Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

    \n

    By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

    \n

    If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

    \n
    this.healthData.query(
        {
          startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
          endDate: new Date(), // now
          dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
          unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
          aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
          sortOrder: \"desc\" // optional, default \"asc\"
        })
        .then(result => console.log(JSON.stringify(result)))
        .catch(error => this.resultToShow = error);
    \n

    startMonitoring (iOS only, for now)

    \n

    If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

    \n

    Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

    \n
    \n

    Background notifications probably don't work on the iOS simulator, so please test those on a real device.

    \n
    \n
    this.healthData.startMonitoring(
        {
          dataType: \"heartRate\",
          enableBackgroundUpdates: true,
          backgroundUpdateFrequency: \"immediate\",
          onUpdate: (completionHandler: () => void) => {
            console.log(\"Our app was notified that health data changed, so querying...\");
            this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
          }
        })
        .then(() => this.resultToShow = `Started monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    stopMonitoring (iOS only, for now)

    \n

    It's best to call this method in case you no longer wish to receive notifications when health data changes.

    \n
    this.healthData.stopMonitoring(
        {
          dataType: \"heartRate\",
        })
        .then(() => this.resultToShow = `Stopped monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    Available Data Types

    \n

    With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

    \n

    Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

    \n

    The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
    distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
    stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
    caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
    heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
    weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
    heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
    fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
    \n

    Credits

    \n
      \n
    • Filipe Mendes for a superb first version of this repo, while working for SPMS, Shared Services for Ministry of Health (of Portugal). He kindly transferred this repo to me when he no longer had time to maintain it.
      • \n
    • Daniel Leal, for a great PR.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-inappbrowser":{"name":"nativescript-inappbrowser","version":"3.2.0","license":"MIT","readme":"

    \n \n \"MIT\n \n \n \"Current\n \n \n \"Build\n \n \n \"Maintenance\"\n \n \n \"Tidelift\n \n \n \n \n \n \"Downloads\"\n \n \n \"Total\n \n \n \"Follow\n \n

    \n

    InAppBrowser for NativeScript

    \n

    Provides access to the system's web browser and supports handling redirects

    \n

    Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

    \n

    \n \n

    \n

    Who is using InAppBrowser?

    \n

    Do you want to see this package in action? Check these awesome projects, yay! 🎉

    \n
      \n
    • Oxycar - Offers innovative ways to facilitate home-work journeys.
      • \n
    • Pegus Digital - Your innovation partner in digital product development.
      • \n
    \n

    Share your awesome project here! ❤️

    \n

    Getting started

    \n
    ns plugin add nativescript-inappbrowser
    \n

    Manual installation

    \n
      \n
    • \n

      Android Platform with Android Support:

      \n

      Modify your android/build.gradle configuration:

      \n
      buildscript {
        ext {
          buildToolsVersion = \"28.0.3\"
          minSdkVersion = 16
          compileSdkVersion = 28
          targetSdkVersion = 28
          // Only using Android Support libraries
          supportLibVersion = \"28.0.0\"
        }
      \n
      • \n
    • \n

      Android Platform with AndroidX:

      \n

      Modify your android/build.gradle configuration:

      \n
      buildscript {
        ext {
          buildToolsVersion = \"28.0.3\"
          minSdkVersion = 16
          compileSdkVersion = 28
          targetSdkVersion = 28
          // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
          androidXBrowser = \"1.0.0\"
          // Put here other AndroidX dependencies
        }
      \n
      • \n
    \n

    Usage

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsAction
    openOpens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari.
    closeDismisses the system's presented web browser.
    openAuthOpens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection).
    closeAuthDismisses the current authentication session.
    isAvailableDetect if the device supports this plugin.
    onStartInitialize a bound background service so the application can communicate its intention to the browser. After the service is connected, the client can be used to Warms up the browser to make navigation faster and indicates that a given URL may be loaded in the future. - Android Only.
    warmupWarm up the browser process - Android Only.
    mayLaunchUrlTells the browser of a likely future navigation to a URL. The most likely URL has to be specified first. Optionally, a list of other likely URLs can be provided. They are treated as less likely than the first one, and have to be sorted in decreasing priority order. These additional URLs may be ignored. All previous calls to this method will be deprioritized - Android Only.
    \n

    iOS Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    dismissButtonStyle (String)The style of the dismiss button. [done/close/cancel]
    preferredBarTintColor (String)The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF]
    preferredControlTintColor (String)The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080]
    readerMode (Boolean)A value that specifies whether Safari should enter Reader mode, if it is available. [true/false]
    animated (Boolean)Animate the presentation. [true/false]
    modalPresentationStyle (String)The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover]
    modalTransitionStyle (String)The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl]
    modalEnabled (Boolean)Present the SafariViewController modally or as push instead. [true/false]
    enableBarCollapsing (Boolean)Determines whether the browser's tool bars will collapse or not. [true/false]
    ephemeralWebSession (Boolean)Prevent re-use cookies of previous session (openAuth only) [true/false]
    formSheetPreferredContentSize (Object)Custom size for iPad formSheet modals [{width: 400, height: 500}]
    \n

    Android Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    showTitle (Boolean)Sets whether the title should be shown in the custom tab. [true/false]
    toolbarColor (String)Sets the toolbar color. [gray/#808080]
    secondaryToolbarColor (String)Sets the color of the secondary toolbar. [white/#FFFFFF]
    navigationBarColor (String)Sets the navigation bar color. [gray/#808080]
    navigationBarDividerColor (String)Sets the navigation bar divider color. [white/#FFFFFF]
    enableUrlBarHiding (Boolean)Enables the url bar to hide as the user scrolls down on the page. [true/false]
    enableDefaultShare (Boolean)Adds a default share item to the menu. [true/false]
    animations (Object)Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }]
    headers (Object)The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }]
    forceCloseOnRedirection (Boolean)Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false]
    hasBackButton (Boolean)Sets a back arrow instead of the default X icon to close the custom tab. [true/false]
    browserPackage (String)Package name of a browser to be used to handle Custom Tabs.
    showInRecents (Boolean)Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]
    includeReferrer (Boolean)Determining whether to include your package name as referrer for the website to track. [true/false]
    \n

    Demo

    \n
    import { Utils, Dialogs } from '@nativescript/core';
    import { InAppBrowser } from 'nativescript-inappbrowser';

    ...
      openLink = async () => {
        try {
          const url = 'https://www.proyecto26.com'
          if (await InAppBrowser.isAvailable()) {
            const result = await InAppBrowser.open(url, {
              // iOS Properties
              dismissButtonStyle: 'cancel',
              preferredBarTintColor: '#453AA4',
              preferredControlTintColor: 'white',
              readerMode: false,
              animated: true,
              modalPresentationStyle: 'fullScreen',
              modalTransitionStyle: 'coverVertical',
              modalEnabled: true,
              enableBarCollapsing: false,
              // Android Properties
              showTitle: true,
              toolbarColor: '#6200EE',
              secondaryToolbarColor: 'black',
              navigationBarColor: 'black',
              navigationBarDividerColor: 'white',
              enableUrlBarHiding: true,
              enableDefaultShare: true,
              forceCloseOnRedirection: false,
              // Specify full animation resource identifier(package:anim/name)
              // or only resource name(in case of animation bundled with app).
              animations: {
                startEnter: 'slide_in_right',
                startExit: 'slide_out_left',
                endEnter: 'slide_in_left',
                endExit: 'slide_out_right'
              },
              headers: {
                'my-custom-header': 'my custom header value'
              },
              hasBackButton: true,
              browserPackage: '',
              showInRecents: false
            });
            Dialogs.alert({
              title: 'Response',
              message: JSON.stringify(result),
              okButtonText: 'Ok'
            });
          }
          else {
            Utils.openUrl(url);
          }
        }
        catch(error) {
          Dialogs.alert({
            title: 'Error',
            message: error.message,
            okButtonText: 'Ok'
          });
        }
      }
    ...
    \n

    Android Optimizations

    \n

    On Android, you can warmup the in app browser client to make it launch siginificantly faster. To do so, add the following to your Custom Android Activity.

    \n
    import { InAppBrowser } from \"nativescript-inappbrowser\";
    @NativeClass()
    @JavaProxy(\"org.nativescript.demo.MainActivity\")
    export class Activity extends androidx.appcompat.app.AppCompatActivity {
      public onStart(): void {
        // InAppBrowser initialization for CustomTabsServiceConnection
        InAppBrowser.onStart();
      }
    }
    \n

    You can further optimize performance and pre-render pages by providing the urls that the user is likely to open.

    \n
    constructor() {
      super();
      // Do not call this every time the component render
      InAppBrowser.mayLaunchUrl(this._url, [
        \"https://twitter.com/NativeScript\",
        \"https://github.com/NativeScript/NativeScript\",
        \"https://openjsf.org\"
      ]);
    }
    \n

    Authentication Flow using Deep Linking

    \n

    In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,\ndefine your app scheme and replace my-scheme and my-host with your info.

    \n\n
    <activity
      ...
      android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" />
          <data android:scheme=\"my-scheme\" android:host=\"my-host\" android:pathPrefix=\"\" />
      </intent-filter>
    </activity>
    \n\n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>my-scheme</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>my-scheme</string>
        </array>
      </dict>
    </array>
    \n
      \n
    • utilities.ts
      • \n
    \n
    export const getDeepLink = (path = \"\") => {
      const scheme = 'my-scheme';
      const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
      return prefix + path;
    }
    \n
      \n
    • home-page.ts
      • \n
    \n
    import { Utils, Dialogs } from '@nativescript/core';
    import { InAppBrowser } from 'nativescript-inappbrowser';
    import { getDeepLink } from './utilities';
    ...
      async onLogin() {
        const deepLink = getDeepLink('callback')
        const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
        try {
          if (await InAppBrowser.isAvailable()) {
            InAppBrowser.openAuth(url, deepLink, {
              // iOS Properties
              ephemeralWebSession: false,
              // Android Properties
              showTitle: false,
              enableUrlBarHiding: true,
              enableDefaultShare: false
            }).then((response) => {
              if (
                response.type === 'success' &&
                response.url
              ) {
                Utils.openUrl(response.url)
              }
            })
          } else Utils.openUrl(url)
        } catch {
          Utils.openUrl(url)
        }
      }
    ...
    \n

    StatusBar

    \n

    The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.

    \n

    Authentication

    \n

    Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.

    \n

    Credits 👍

    \n\n

    Contributing ✨

    \n

    When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
    \nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
    \nYou can learn more about how you can contribute to this project in the contribution guide.

    \n

    Contributors ✨

    \n

    Please do contribute! Issues and pull requests are welcome.

    \n

    Code Contributors

    \n

    This project exists thanks to all the people who contribute. [Contribute].

    \n

    \"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"

    \n

    Collaborators

    \n\n\n\n\n\n\n\n\n
    \"jdnichollsc\"
    Juan Nicholls
    ✉    		\"NathanaelA\"
    Nathanael Anderson
    ✉
    \n\n

    Financial Contributors

    \n

    Become a financial contributor and help us sustain our community. [Contribute]

    \n

    Individuals

    \n

    \n

    Organizations

    \n

    Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

    \n

    \n\n\n\n\n\n\n\n\n

    \n

    Supporting 🍻

    \n

    I believe in Unicorns 🦄\nSupport me, if you do too.

    \n

    Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

    \n

    \"Wallet

    \n
    \n

    Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

    \n
    \n

    Please let us know your contributions! 🙏

    \n

    Enterprise 💼

    \n

    Available as part of the Tidelift Subscription.

    \n

    The maintainers of InAppBrowser for NativeScript and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

    \n

    Security contact information 🚨

    \n

    To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

    \n

    License ⚖️

    \n

    This repository is available under the MIT License.

    \n

    Happy coding 💯

    \n

    Made with ❤️

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@softpak/jsdo-core":{"name":"@softpak/jsdo-core","version":"6.0.1003","license":"Apache-2.0","readme":"

    JSDO

    \n

    The JSDO is a client side typescript library for Progress Data Object Services published by Progress Software Corporation. Its purpose is to provide an easy to understand API for querying, creating, updating and deleting Progress Data Objects as well as invoke server side business logic.\nThe JSDO is a free and open-source full-featured implementation that can be used in web, mobile web and hybrid mobile apps.

    \n

    Documentation

    \n

    Progress® Data Objects in an OpenEdge business application can be accessed using the JSDO on the client. For more information, see the Overview of Progress Data Objects, Services and Catalogs.

    \n

    Usage

    \n

    This is an npm package. This means that node and npm need to be installed to use it.

    \n

    To use the JSDO, you normally will simply install it from the public NPM registry via an npm install. You'll need to select a JSDO package depending on your environment:

    \n
    # For vanilla JS, e.g. running it in a browser:
    npm install @progress/jsdo-core

    # For usage with node:
    npm install @progress/jsdo-node

    # For usage with Angular:
    npm install @progress/jsdo-angular

    # For usage with Nativescript:
    npm install @progress/jsdo-nativescript
    \n

    If you want to add changes and build packages yourself from this repository, you will need to use the scripts in package.json. The package.json in the root folder corresponds to the @progress/jsdo-core package.

    \n

    Here is a quick overview of the npm scripts:

    \n

    npm install

    \n
    \n

    This installs the necessary dependencies that the JSDO has and needs to be run at least once.

    \n
    \n

    npm run build:jsdo

    \n
    \n

    This creates a build folder and produces in it a progress.jsdo.js file that can be used either via including it in a <script> tag or via a progress = require('/path/to/build/progress.jsdo.js').progress; in your Node app.

    \n
    \n

    npm run test

    \n
    \n

    This runs the build:jsdo script and then runs the Mocha tests found in the test folder. This can also be run manually by installing Mocha on your environment and then running mocha --recursive in the JSDO folder.

    \n
    \n

    npm run lint

    \n
    \n

    This runs eslint on the JSDO source files.

    \n
    \n

    JSDO and OpenEdge compatibility

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    JSDO versionOpenEdge version
    6.0.111.7.x, 12.0.x
    \n

    Download

    \n

    You can download a copy of the full JSDO to a zip file.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Source FilePurpose
    progress.jsJSDO core
    progress.session.jsJSDO session management
    progress.util.jsHelper classes for the JSDO
    progress.data.kendo.jsKendo UI DataSource for the JSDO
    auth/progress.auth.jsJSDO authentication provider
    auth/progress.auth.basic.jsJSDO authentication provider (BASIC auth)
    auth/progress.auth.form.jsJSDO authentication provider (FORM-based auth)
    auth/progress.auth.sso.jsJSDO authentication provider (SSO auth)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Lib FilePurpose
    progress.all.jsThe JSDO plus the Kendo UI DataSource for JSDO
    progress.all.min.jsThe JSDO plus the Kendo UI DataSource for JSDO minified for deployment
    progress.jsdo.jsThe JSDO core components (JSDO, Session, Util classes)
    progress.jsdo.min.jsThe JSDO core components (JSDO, Session, Util classes) minified for deployment
    \n

    The JSDO can be used by hybrid mobile apps, mobile web apps and web browser apps to access OpenEdge and Rollbase servers. Other implementations include a client in a mobile Hybrid App (a variation of the browser client), a Telerik® NativeScript client, a Node.js server, and a Java server. The JSDO has successfully been used with servers other than OpenEdge such as Node.js to export data created / aggregated in Modulus™ to a Progress® Rollbase Application.

    \n

    License

    \n

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    \n

    http://www.apache.org/licenses/LICENSE-2.0

    \n

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-keyboard":{"name":"@nativescript-use/nativescript-keyboard","version":"0.0.1","license":"Apache-2.0","readme":"

    @nativescript-use/nativescript-keyboard

    \n
    npm install @nativescript-use/nativescript-keyboard
    \n

    Usage

    \n
    import { Keyboard } from \"@nativescript-use/nativescript-keyboard\"

    const keyboard = new Keyboard();

    // Open keyboard with focus
    keyboard.keyboard(myView);

    // Close keyboard
    keyboard.close();

    // Add listener
    keyboard.onChangeVisibility((isOpen: boolean) =>{
      console.log(isOpen)
    });
    // Remove listener
    keyboard.offChangeVisibility();
    \n

    Type declaration

    \n
    export declare class Keyboard {
      onChangeVisibility(callback: (isOpen: boolean) => void): void
      offChangeVisibility(): void
      isOpen(): boolean
      open(view: View): void
      close(): void
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-clipboard":{"name":"@nativescript-use/nativescript-clipboard","version":"0.0.3","license":"Apache-2.0","readme":"

    @nativescript-use/nativescript-clipboard

    \n
    npm install @nativescript-use/nativescript-clipboard
    \n

    Usage

    \n
    import { Clipboard } from \"@nativescript-use/nativescript-clipboard\"

    const clipboard = new Clipboard();

    // Copy text
    clipboard.copy(\"My text\");

    // Read Clipboard
    const currentClipboardValue = clipboard.read();

    // Add listener
    clipboard.onCopy((textCopied: string) =>{
      console.log(textCopied)
    });
    // Remove listener
    clipboard.offCopy();
    \n

    Type declaration

    \n
    export declare class Clipboard {
        abstract onCopy(callback: (text: string) => void): void
        abstract offCopy(): void
        abstract copy(text: string): boolean
        abstract read(): string
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@valor/nativescript-ngrx-devtools":{"name":"@valor/nativescript-ngrx-devtools","version":"2.0.0","license":"MIT","readme":"

    nativescript-ngrx-devtools

    \n

    This plugin allows you to use NgRx devtools with NativeScript.

    \n

    Installation

    \n

    Firstly, run:

    \n
    npm i @valor/nativescript-ngrx-devtools @valor/nativescript-websockets
    \n

    Import @valor/nativescript-websockets in your polyfills.ts:

    \n
    /**
     * NativeScript Polyfills
     */

    // Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
    import '@nativescript/core/globals';

    import '@valor/nativescript-websockets'; // add this line!

    // Install @nativescript/angular specific polyfills
    import '@nativescript/angular/polyfills';

    /**
     * Zone.js and patches
     */
    // Add pre-zone.js patches needed for the NativeScript platform
    import '@nativescript/zone-js/dist/pre-zone-polyfills';

    // Zone JS is required by default for Angular itself
    import 'zone.js';

    // Add NativeScript specific Zone JS patches
    import '@nativescript/zone-js';
    \n

    Then add NativeScriptNgRxDevtoolsModule.forRoot() to your AppModule imports:

    \n
    @NgModule({
      imports: [
        StoreModule.forRoot(...),
        StoreDevtoolsModule.instrument(),
        NativeScriptNgRxDevtoolsModule.forRoot(),
      ],
      exports: [StoreModule],
    })
    export class AppModule {}
    \n

    By default the plugin will try to connect to the devtools on port 8000 on the default IPs provided by NativeScript (__NS_DEV_HOST_IPS__), but this can be configured by passing an options object to NativeScriptNgRxDevtoolsModule.forRoot().

    \n

    To start debugging install the latest @redux-devtools/cli:

    \n
    npm i -g @redux-devtools/cli
    \n

    Then open them:

    \n
    redux-devtools --open
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/nativescript-intersection-observer":{"name":"@nativescript-use/nativescript-intersection-observer","version":"0.0.2","license":"Apache-2.0","readme":"

    @nativescript-use/nativescript-intersection-observer

    \n
    npm install @nativescript-use/nativescript-intersection-observer
    \n

    Usage

    \n
    import { IntersectionObserver } from \"@nativescript-use/nativescript-intersection-observer\"

    const intersectionObserver = new IntersectionObserver();

    // Track if `targetView` is visible
    intersectionObserver.track(targetView, scollView, (isVisible) => {
        console.log(\"isVisible: \" + isVisible);
    })

    // Stop track
    intersectionObserver.stopTrack();

    // Check if is visible view
    const isVisible = intersectionObserver.isVisible(targetView, scollView);


    Type declaration
    ```ts
    export declare class IntersectionObserver {
        track(view: View, parentView: ScrollView, callback: (isVisible: boolean) => void): void;
        topTrack(parentView: ScrollView): void
        isVisible(view: View, parentView?: View): boolean;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-nativescript-yidong-kaifa-jifan":{"name":"angular-nativescript-yidong-kaifa-jifan","version":"2023.210.0","license":"CC BY-NC-SA 4.0","readme":"

    Angular NativeScript 移动开发（机翻）

    \n

    下载

    \n

    Docker

    \n
    docker pull apachecn0/angular-nativescript-yidong-kaifa-jifan
    docker run -tid -p <port>:80 apachecn0/angular-nativescript-yidong-kaifa-jifan
    # 访问 http://localhost:{port} 查看文档
    \n

    PYPI

    \n
    pip install angular-nativescript-yidong-kaifa-jifan
    angular-nativescript-yidong-kaifa-jifan <port>
    # 访问 http://localhost:{port} 查看文档
    \n

    NPM

    \n
    npm install -g angular-nativescript-yidong-kaifa-jifan
    angular-nativescript-yidong-kaifa-jifan <port>
    # 访问 http://localhost:{port} 查看文档
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/core":{"name":"@awarns/core","version":"1.1.0","license":"Apache-2.0","readme":"

    @awarns/core

    \n

    \"npm\n\"npm\"

    \n
    \n

    This is the only plugin required for the rest of the plugins to work.

    \n
    \n

    This plugin comes as a wrapper on top of the NativeScript Task Dispatcher (NTD), extending it with utilities that ease the development of context-aware applications in several ways:

    \n
      \n
    • A common model to represent entities that represent changes over time, the Record class. This is meant to be extended and used to encapsulate the information produced by the built-in framework tasks and the developer-defined tasks created using the framework.
      • \n
    • Tools to develop your own data providers, either obtaining internal or external data.
      • \n
    • Predefined tasks to make use of your providers. These offer a unified data acquisition process for all the built-in or custom components that can make use of them.
      • \n
    • Reexports everything offered by the NTD, through a single interface.
      • \n
    • Utilities to facilitate logging, testing, creating unique identifiers and serializing data.
      • \n
    \n

    In essence, the main goal of this plugin is to give access to the task model defined by the NTD and extend it with primitives for the development of data providers and data-providing tasks. It also offers a base model (Record) to be extended by any entity produced or consumed by built-in or custom framework tasks. Here, by extending the Record model, time-consuming tasks, like persistence, become greatly simplified.

    \n

    Installing the core package only requires one command line instruction:

    \n
    ns plugin add @awarns/core
    \n

    Usage

    \n

    You'll need to install and configure the core package the first time you integrate the framework in your app.

    \n

    Additionally, the core package might be optionally used from your application (or plugins) in other circumstances:

    \n
      \n
    • When you want to create your own class (which extends the Record model) for its persistence.
      • \n
    • When you want to develop your own data provider.
      • \n
    • When you want to incorporate your providers to a workflow using the built-in tasks.
      • \n
    • In more advanced use cases, when you want to use the built-in utilities.
      • \n
    \n

    Basic usage

    \n

    Initialization

    \n

    For the AwarNS framework to work properly, it must be initialized during the application startup. The code must be executed no matter if the application UI is going to be bootstrapped or not. The place to do this is the app.ts file inside the application src folder (main.ts for Angular apps).

    \n

    Framework initialization implies multiple aspects: (1) determining which built-in and/or custom tasks will be in use, (2) defining how these tasks will be invoked by the results of other tasks or isolated application events, (3) registering plugins that need to be initialized at application startup and (4) configuring behavioural aspects of the framework. This can be seen in more detail in the following code excerpt adapted from the demo application source code:

    \n
    // app.ts / main.ts
    // TypeScript App:
    import { Application } from '@nativescript/core';
    // or Angular App:
    import { runNativeScriptAngularApp, platformNativeScript } from '@nativescript/angular';
    import { AppModule } from './app/app.module';

    // AwarNS Framework imports
    // (always between esential imports and app initialization)
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks'; // An array, containing the lists of tasks that the application will use
    import { demoTaskGraph } from '../graph'; // The background workflow definition (task graph instance)
    import { registerHumanActivityPlugin } from '@awarns/human-activity';
    import { registerNotificationsPlugin } from '@awarns/notifications';
    import { registerTracingPlugin } from '@awarns/tracing';
    import { registerPersistencePlugin } from '@awarns/persistence';

    awarns
      .init(
        demoTasks, // (1)
        demoTaskGraph, // (2)
        [ // (3)
          // See bellow for more information regarding the items that this array can contain
          // See each plugin docs to learn more about their registration-time options
          registerHumanActivityPlugin(),
          registerNotificationsPlugin('Intervention alerts'),
          registerPersistencePlugin(),
          registerTracingPlugin(),
        ],
        { // (4)
          // See bellow for a description of the rest of the options
          enableLogging: true,
        }
      )
      .then(() => console.log('AwarNS framework successfully loaded'))
      .catch((err) => {
        console.error(`Could not load AwarNS framework: ${err.stack ? err.stack : err}`);
      });

    // TypeScript App:
    Application.run({ moduleName: 'app-root' });
    // Angular App:
    runNativeScriptAngularApp({
      appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
    });
    \n
    \n

    In (3), along with the built-in plugin registration functions, it is also possible to register custom loaders to run code during the framework initialization phase. You can do this by creating a function which must return another function compatible with the PluginLoader API. An example implementation of this can be found in this same page (see Instantiating push-based data provider tasks) and in the source of the human-activity, the notifications, the persistence and the tracing plugins.

    \n

    Important: we advise you to register here only short-lived functions, to ensure all the functionalities of the framework are ready before starting executing tasks. If you need to start a long process here, you can do it, but be sure that the main function does not wait for it to finish its execution (for example, using then/catch instead of await). Not following this recommendation may lead to unexpected and hard-to-debug behaviours.

    \n
    \n
    \n

    In (4), aside from indicating if the logging must be enabled or not, it is also possible to pass by a custom logger implementation to get more control over what is being logged. And also be able to store or send the log traces locally or remotely. More details in: A brief note on logging and the rest of the utilities.

    \n
    \n

    Managing tasks' readiness and emitting events from UI

    \n

    In the application UI you can interact with the framework to check if certain tasks are lacking some permissions or system features to be enabled. This can be done using the awarns singleton object seen in the previous example, which shares API with the NTD's taskDispatcher object:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn typeDescription
    isReady()Promise<boolean>Allows to check (and wait for) framework initialization status. It also iterates over your app's tasks to check if they are ready for their execution, by calling their checkIfCanRunMethod(). You should call this method before emitting any external event. The promise is stored internally, it is safe to call this method as many times as needed.
    tasksNotReady (property)Promise<Array<Task>>Method to be called if isReady() returns false. Here you can check the tasks that did not pass the ready check. Useful in case you want to customize te UI before calling prepare(). For example, to give an explanation to your users of why you are asking their consent
    prepare()Promise<void>Method to be called if isReady() returns false. If your app has one or more tasks that have reported not to be ready, it will call their prepare() method (e.g. to ask for missing permissions or enable disabled capabilities). WARNING! This method is only meant to be called while the UI is visible. Follow this guideline to foster the creation of a consistent task ecosystem.
    emitEvent(name: string, data?: EventData)voidA fire and forget method. Call this method whenever you want to propagate an external event towards the plugin. Dependant tasks will be executed inside a background environment. User can safely navigate to another app, we bootstrap an independent background execution context to ensure it completes its life-cycle (we guarantee a maximum of 3 minutes execution time). Optionally, You can provide an additional key-value data dictionary that will be delivered to the task handling the event
    \n

    Extending the Record class

    \n

    The Record class is central to the AwarNS framework. Extending it in your entities, means that they will speak the framework's common language regarding data sharing. This will greatly simplify certain operations like, for example, persistence and data exporting, to name a few.

    \n

    This class is ideal for representing things that change over time. Each extension (child) to the Record class must hold its type, which is a string. This string uniquely identifies each record's entity type, which is required later on, for example, to persist and query each type of entity individually. Records must hold a timestamp too, indicating when they were generated. Optionally, they can state a change, which can be: a start, an end or nothing (no change).

    \n

    The best way to see how the Record class can be extended is through some already existing examples in the framework:

    \n
    \nGeolocation\n

    The Geolocation record:

    \n
    import { Record } from '@awarns/core/entities';

    import { GeolocationLike as GL, Geolocation as NativeGeolocation } from 'nativescript-context-apis/geolocation';
    export type GeolocationLike = GL;

    export const GeolocationType = 'geolocation';

    export class Geolocation extends Record {
      constructor(
        public latitude: number,
        public longitude: number,
        public altitude: number,
        public horizontalAccuracy: number,
        public verticalAccuracy: number,
        public speed: number,
        public direction: number,
        capturedAt: Date
      ) {
        super(GeolocationType, capturedAt);
      }

      distance(to: Geolocation | GeolocationLike) {
        return new NativeGeolocation(this).distance(to);
      }
    }
    \n
    \n
    \nGeofencing\n

    The AoIProximityChange record:

    \n
    import { Change, Record } from '@awarns/core/entities';
    import { GeofencingProximity } from './proximity';

    export const AoIProximityChangeType = 'aoi-proximity-change';

    export class AoIProximityChange extends Record {
      constructor(
        public aoi: AreaOfInterest,
        public proximity: GeofencingProximity,
        change: Change,
        timestamp = new Date()
      ) {
        super(AoIProximityChangeType, timestamp, change);
      }
    }

    export interface AreaOfInterest {
      id: string;
      name: string;
      latitude: number;
      longitude: number;
      radius: number;
      category?: string;
      level?: number;
    }
    \n
    \n
    \nHuman activity\n

    The HumanActivityChange record:

    \n
    import { Record, Change } from '@awarns/core/entities';
    import { HumanActivity } from 'nativescript-context-apis/activity-recognition';

    export const HumanActivityChangeType = 'human-activity';

    export class HumanActivityChange extends Record {
      constructor(public activity: HumanActivity, change: Change, detectedAt: Date, public confidence?: number) {
        super(HumanActivityChangeType, detectedAt, change);
      }
    }

    export { HumanActivity } from 'nativescript-context-apis/activity-recognition';
    \n
    \n
    \nNotifications\n

    You can even create record hierarchies like:

    \n

    The NotificationTap record:

    \n
    import { NotificationEventBaseRecord } from './notification-event-base-record';
    import { TapAction } from '../notification';

    export const NotificationTapType = 'notification-tap';

    export class NotificationTapRecord extends NotificationEventBaseRecord {
      constructor(notificationId: number, tapAction: TapAction, timestamp?: Date) {
        super(NotificationTapType, notificationId, tapAction, timestamp);
      }
    }
    \n

    The NotificationDiscard record:

    \n
    import { NotificationEventBaseRecord } from './notification-event-base-record';
    import { TapAction } from '../notification';

    export const NotificationDiscardType = 'notification-discard';

    export class NotificationDiscardRecord extends NotificationEventBaseRecord {
      constructor(notificationId: number, tapAction: TapAction, timestamp?: Date) {
        super(NotificationDiscardType, notificationId, tapAction, timestamp);
      }
    }
    \n

    And the common base for the two, the NotificationEventBaseRecord:

    \n
    import { Change, Record } from '@awarns/core/entities';
    import { TapAction } from '../notification';

    export abstract class NotificationEventBaseRecord extends Record {
      protected constructor(
        public name: string,
        public notificationId: number,
        public tapAction: TapAction,
        timestamp: Date = new Date()
      ) {
        super(name, timestamp, Change.NONE);
      }
    }
    \n

    More examples inside this package are the QuestionnaireAnswers, the UserFeedback, the UserConfirmation or the UserReadContent records.

    \n
    \n

    Similarly, additional examples exist in the Wi-Fi (WifiScan), the BLE (BleScan) and the battery (BatteryLevel) packages. And in the framework README too (see Detailed usage and extension section).

    \n

    Developing your own data providers

    \n

    The most important aspect of a context-awareness framework is to be able to sense the environment. The first step to achieve this is to model what will be sensed. We have advanced towards this before, by extending the Record class. Now, we need a way to define how to sense / acquire these data.

    \n

    Here it is important to make a distinction. We understand that there are two ways to obtain data: actively and passively. This means, we can manually pull the data, or we can subscribe to obtain data pushes once the updates become available.

    \n

    Pull data providers

    \n

    The most common case to obtain data is to ask for it and, sometimes, after a short delay, obtain it. This is the case of, for example, the location of the phone, its battery level, the list of nearby bluetooth devices or Wi-Fi access points. The list is not limited to what the phone can provide. For example, we pull data when we perform a network request (e.g., to obtain the current weather).

    \n

    To develop data providers like this. We need to be able to code mechanisms to do the following things: (1) know if all the conditions are met to obtain the data (this means, all the permissions have been granted, the specific system capabilities are enabled, etc.), (2) in case not all the conditions are met, what needs to be done to meet them (i.e., ask permission, enable system services, etc.) and (3) determine how the next data update will be obtained. This last thing is needed because pull-based data providers work like iterators. Internally, the framework will ask them for the next value to be obtained, this is, when specified by the background execution workflow of your app.

    \n

    With that said, the best way to learn how to implement pull-based data providers is to see some examples already implemented in the framework. When implementing a new data provider, we advise to start using one of the following as a template. Here, they are listed from the simplest to the most complex:

    \n
    \nBattery\n

    The BatteryProvider:

    \n
    import { BatteryLevel, BatteryLevelType } from './battery-level';
    import { Application, isAndroid } from '@nativescript/core';
    import { PullProvider, ProviderInterruption } from '@awarns/core/providers';

    export class BatteryProvider implements PullProvider {
      get provides() {
        return BatteryLevelType;
      }

      constructor(private sdkVersion?: number) {
        if (isAndroid && !this.sdkVersion) {
          this.sdkVersion = android.os.Build.VERSION.SDK_INT;
        }
      }

      next(): [Promise<BatteryLevel>, ProviderInterruption] {
        const value = this.getBatteryPercentage();
        const batteryLevel = BatteryLevel.fromPercentage(value);

        return [Promise.resolve(batteryLevel), () => null];
      }

      checkIfIsReady(): Promise<void> {
        return Promise.resolve();
      }

      prepare(): Promise<void> {
        return Promise.resolve();
      }

      private getBatteryPercentage(): number {
        if (!isAndroid) {
          return -1;
        }
        if (this.sdkVersion >= 21) {
          const batteryManager: android.os.BatteryManager = Application.android.context.getSystemService(
            android.content.Context.BATTERY_SERVICE
          );

          return batteryManager.getIntProperty(android.os.BatteryManager.BATTERY_PROPERTY_CAPACITY);
        }
        const intentFilter = new android.content.IntentFilter(android.content.Intent.ACTION_BATTERY_CHANGED);
        const batteryStatus = Application.android.context.registerReceiver(null, intentFilter);

        const level = batteryStatus ? batteryStatus.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) : -1;
        const scale = batteryStatus ? batteryStatus.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) : -1;

        const batteryPercentage = level / scale;

        return Math.trunc(batteryPercentage * 100);
      }
    }
    \n
    \n
    \nWi-Fi\n

    The WifiScanProvider:

    \n
    import { ProviderInterrupter, ProviderInterruption, PullProvider } from '@awarns/core/providers';
    import { WifiScan, WifiScanType } from './scan';
    import {
      FingerprintGrouping,
      getWifiScanProvider as getNativeProvider,
      WifiFingerprint,
      WifiScanProvider as NativeProvider,
    } from 'nativescript-context-apis/wifi';
    import { firstValueFrom, map, of, Subject, takeUntil, timeout } from 'rxjs';

    export class WifiScanProvider implements PullProvider {
      get provides(): string {
        return WifiScanType;
      }

      constructor(
        private ensureIsNew: boolean,
        private timeout: number,
        private nativeProvider: () => NativeProvider = getNativeProvider
      ) {}

      async checkIfIsReady(): Promise<void> {
        const isReady = await this.nativeProvider().isReady();
        if (!isReady) {
          throw wifiScanProviderNotReadyErr;
        }
      }

      async prepare(): Promise<void> {
        return this.nativeProvider().prepare();
      }

      next(): [Promise<WifiScan>, ProviderInterruption] {
        const interrupter = new ProviderInterrupter();
        const scanResult = this.obtainWifiScan(interrupter);
        return [scanResult, () => interrupter.interrupt()];
      }

      private obtainWifiScan(interrupter: ProviderInterrupter): Promise<WifiScan> {
        const interrupted$ = new Subject<void>();
        interrupter.interruption = () => {
          interrupted$.next();
          interrupted$.complete();
        };

        return firstValueFrom(
          this.nativeProvider()
            .wifiFingerprintStream({
              ensureAlwaysNew: this.ensureIsNew,
              grouping: FingerprintGrouping.NONE,
              continueOnFailure: false,
            })
            .pipe(
              takeUntil(interrupted$),
              timeout({ each: this.timeout, with: () => of(null) }),
              map((fingerprint) => scanFromFingerprint(fingerprint))
            )
        );
      }
    }

    function scanFromFingerprint(fingerprint: WifiFingerprint): WifiScan {
      const { seen, isNew, timestamp } = fingerprint;
      return new WifiScan(seen, isNew, timestamp);
    }

    export const wifiScanProviderNotReadyErr = new Error(
      \"Wifi scan provider is not ready. Perhaps permissions haven't been granted, location services have been disabled or wifi is turn off\"
    );
    \n
    \n
    \nBLE\n

    The BleScanProvider:

    \n
    import { ProviderInterrupter, ProviderInterruption, PullProvider } from '@awarns/core/providers';
    import { BleScan, BleScanType } from './scan';
    import {
      getBleScanProvider as getNativeProvider,
      BleScanProvider as NativeProvider,
      BleScanMode,
      BleScanResult,
    } from 'nativescript-context-apis/ble';
    import { firstValueFrom, map, Subject, takeUntil, timer, toArray } from 'rxjs';

    export class BleScanProvider implements PullProvider {
      get provides(): string {
        return BleScanType;
      }

      constructor(
        private scanTime: number,
        private scanMode: BleScanMode,
        private iBeaconUuids: Array<string>,
        private nativeProvider: () => NativeProvider = getNativeProvider
      ) {}

      async checkIfIsReady(): Promise<void> {
        const isReady = await this.nativeProvider().isReady();
        if (!isReady) {
          throw bleScanProviderNotReadyErr;
        }
      }

      async prepare(): Promise<void> {
        return this.nativeProvider().prepare();
      }

      next(): [Promise<BleScan>, ProviderInterruption] {
        const interrupter = new ProviderInterrupter();
        const scanResult = this.obtainBleScan(interrupter);
        return [scanResult, () => interrupter.interrupt()];
      }

      private obtainBleScan(interrupter: ProviderInterrupter): Promise<BleScan> {
        const interrupted$ = new Subject<void>();
        interrupter.interruption = () => {
          interrupted$.next();
          interrupted$.complete();
        };

        return firstValueFrom(
          this.nativeProvider()
            .bleScanStream({
              reportInterval: 100 /* Lower report intervals don't seem to report anything in background*/,
              scanMode: this.scanMode,
              iBeaconUuids: this.iBeaconUuids,
            })
            .pipe(
              takeUntil(timer(this.scanTime)),
              toArray(),
              map((results) => scanFromResults(results))
            )
        );
      }
    }

    function scanFromResults(results: Array<BleScanResult>): BleScan {
      if (results.length === 0) {
        throw new Error('    No BLE devices were found nearby!');
      }
      return new BleScan(
        results.reduce((prev, curr) => [...prev, ...curr.seen], []),
        results[results.length - 1].timestamp
      );
    }

    const bleScanProviderNotReadyErr = new Error(
      \"BLE scan provider is not ready. Perhaps permissions haven'    t been granted, location services have been disabled or Bluetooth is turn off\"
    );
    \n
    \n
    \nGeolocation\n

    The GeolocationProvider:

    \n
    import { PullProvider, ProviderInterrupter, ProviderInterruption } from '@awarns/core/providers';
    import { Geolocation, GeolocationType } from './geolocation';

    import {
      GeolocationProvider as NativeProvider,
      Geolocation as NativeGeolocation,
      getGeolocationProvider as getNativeProvider,
    } from 'nativescript-context-apis/geolocation';

    import { firstValueFrom, from, Observable, of, Subject, throwError, timeout } from 'rxjs';
    import { map, mergeMap, take, takeUntil, toArray } from 'rxjs/operators';

    export class GeolocationProvider implements PullProvider {
      get provides(): string {
        return GeolocationType;
      }

      constructor(
        private bestOf: number,
        private timeout: number,
        private nativeProvider: () => NativeProvider = getNativeProvider
      ) {}

      async checkIfIsReady(): Promise<void> {
        const isReady = await this.nativeProvider().isReady();
        if (!isReady) {
          throw geolocationProviderNotReadyErr;
        }
      }

      prepare(): Promise<void> {
        return this.nativeProvider().prepare(false, true);
      }

      next(): [Promise<Geolocation>, ProviderInterruption] {
        const interrupter = new ProviderInterrupter();
        const bestLocation = this.obtainBestLocationAmongNext(this.bestOf, interrupter);
        return [bestLocation, () => interrupter.interrupt()];
      }

      private obtainBestLocationAmongNext(amount: number, interrupter: ProviderInterrupter): Promise<Geolocation> {
        const interrupted = new Subject<void>();
        interrupter.interruption = () => {
          interrupted.next();
          interrupted.complete();
        };

        return firstValueFrom(
          this.nativeProvider()
            .locationStream({
              highAccuracy: true,
              stdInterval: 1000,
              minInterval: 100,
              maxAge: 60000,
              saveBattery: false,
            })
            .pipe(
              takeUntil(interrupted),
              take(amount),
              timeout({ each: this.timeout, with: () => of(null) }),
              toArray(),
              map(pickBest),
              mergeMap((location) => this.ensureItGetsAtLeastOne(location)),
              map(toGeolocation)
            )
        );
      }

      private ensureItGetsAtLeastOne(location: NativeGeolocation): Observable<NativeGeolocation> {
        if (!location) {
          return from(
            this.nativeProvider().acquireLocation({
              highAccuracy: true,
              allowBackground: true,
            })
          ).pipe(
            timeout({
              each: this.timeout,
              with: () => throwError(() => new Error('Could not acquire location')),
            })
          );
        }
        return of(location);
      }
    }

    export const geolocationProviderNotReadyErr = new Error(
      \"Geolocation provider is not ready. Perhaps permissions haven't been granted or location services have been disabled\"
    );

    function pickBest(locations: Array<NativeGeolocation>): NativeGeolocation {
      const now = Date.now();
      return locations.reduce(
        (previous, current) =>
          current && (!previous || calculateScore(current, now) > calculateScore(previous, now)) ? current : previous,
        null
      );
    }

    function calculateScore(location: NativeGeolocation, now: number): number {
      const { horizontalAccuracy, timestamp } = location;
      const timeDiff = (now - timestamp.getTime()) / 1000;

      const limitedAccuracy = Math.min(horizontalAccuracy, 65);
      const limitedTimeDiff = Math.min(Math.max(timeDiff, 0), 60);

      const accuracyScore = 1 - limitedAccuracy / 65;
      const timeDiffScore = 1 - limitedTimeDiff / 60;

      return ((accuracyScore + timeDiffScore) / 2) * 10;
    }

    function toGeolocation(nativeGeolocation: NativeGeolocation): Geolocation {
      return new Geolocation(
        nativeGeolocation.latitude,
        nativeGeolocation.longitude,
        nativeGeolocation.altitude,
        nativeGeolocation.horizontalAccuracy,
        nativeGeolocation.verticalAccuracy,
        nativeGeolocation.speed,
        nativeGeolocation.direction,
        nativeGeolocation.timestamp
      );
    }
    \n
    \n

    Push data providers

    \n

    Sometimes we want to obtain data, but we don't know when that data will come. In those cases we will want to instruct a third party to notify our app regarding data updates. This is the case, for example, of human activity recognition, where updates will come only after the device starts being moved.

    \n

    The implementation of a push-based data provider has things in common with the pull-based data provider. Both need to know if they'll be able to obtain data and, if not, know what needs to be done to overcome this situation. The key difference is that instead of asking for the next value to be obtained (and wait for it), here we'll need two mechanisms to state that: (1) we are interested in obtaining data updates and (2) we are no longer interested in those updates. Like a subscribe / unsubscribe mechanism, but that persists after application shutdowns and phone reboots.

    \n

    A complete example implementation of a push-based provider can be seen in the human activity package (the HumanActivityProvider):

    \n
    import { PushProvider } from '@awarns/core/providers';
    import { ActivityRecognizer, getActivityRecognizer, Resolution } from 'nativescript-context-apis/activity-recognition';

    import { HumanActivityChangeType } from './human-activity-change';
    import { getLogger } from '@awarns/core/utils/logger';
    import { getHumanActivityChangeReceiver } from './receiver';

    const possibleResolutions: Array<Resolution> = [Resolution.LOW, Resolution.MEDIUM];

    export class HumanActivityProvider implements PushProvider {
      get provides() {
        return HumanActivityChangeType;
      }

      static setup() {
        possibleResolutions.forEach((resolution) => {
          getActivityRecognizer(resolution).listenActivityChanges((activityChange) => {
            getLogger('HumanActivityProvider').debug(`Got an activity change!: ${JSON.stringify(activityChange)}`);
            getHumanActivityChangeReceiver().onReceive(activityChange);
          });
        });
      }

      constructor(
        private resolution: Resolution,
        private detectionInterval: number = 0,
        private providerLoader: (resolution: Resolution) => ActivityRecognizer = getActivityRecognizer
      ) {}

      async checkIfIsReady(): Promise<void> {
        if (!this.activityRecognizer().isReady())     {
          throw new HumanActivityRecognizerNotReadyErr(this.resolution);
        }
      }

      async prepare(): Promise<void> {
        await this.activityRecognizer().prepare();
      }

      async startProviding(): Promise<void> {
        await this.activityRecognizer().startRecognizing({
          detectionInterval: this.detectionInterval,
        });
      }

      async stopProviding(): Promise<void> {
        await this.activityRecognizer().stopRecognizing();
      }

      private activityRecognizer(): ActivityRecognizer {
        return this.providerLoader(this.resolution);
      }
    }

    export class HumanActivityRecognizerNotReadyErr extends Error {
      constructor(resolution: Resolution) {
        super(
          `${resolution} resolution human activity recognizer. Perhaps the required permissions hadn't been granted. Be sure to call prepare() first`
        );
      }
    }

    export { Resolution } from 'nativescript-context-apis/activity-recognition';
    \n

    Using your data providers with the built-in tasks

    \n

    Once we have developed our own data providers, integrating them in the framework, to use them in our background workflows, is quite straight forward.

    \n

    For this aim, we have created a set of tasks which understand the API of the data providers and are able to obtain data from them in a unified way.

    \n

    Instantiating pull-based data provider tasks

    \n

    The framework comes with two mechanisms to acquire data from a pull-based data provider: a single data provider and a batch data provider. Both do what their name indicates. The former reads one value from the data provider and immediately emits it, whereas the latter can accumulate multiple values before emitting.

    \n

    These tasks are always used in the same way, although their behaviour can be configured. As an example, this is how both are used with the GeolocationProvider:

    \n
    import { Task, SinglePullProviderTask, BatchPullProviderTask } from '@awarns/core/tasks';
    import { GeolocationProvider } from './provider';

    const DEFAULT_SINGLE_BEST_OF = 3;
    const DEFAULT_SINGLE_TIMEOUT = 10000;

    const DEFAULT_BATCH_BEST_OF = 1;
    const DEFAULT_BATCH_TIMEOUT = 15000;

    export function acquirePhoneGeolocationTask(config: GeolocationTaskConfig = {}): Task {
      return new SinglePullProviderTask(
        new GeolocationProvider(config.bestOf ?? DEFAULT_SINGLE_BEST_OF, config.timeout ?? DEFAULT_SINGLE_TIMEOUT),
        'Phone',
        { foreground: true }
      );
    }

    export function acquireMultiplePhoneGeolocationTask(config: GeolocationTaskConfig = {}): Task {
      return new BatchPullProviderTask(
        new GeolocationProvider(config.bestOf ?? DEFAULT_BATCH_BEST_OF, config.timeout ?? DEFAULT_BATCH_TIMEOUT),
        'Phone',
        { foreground: true }
      );
    }

    export interface GeolocationTaskConfig {
      bestOf?: number;
      timeout?: number;
    }
    \n

    Both tasks have been carefully crafted to create predictable outputs. Instances of the SinglePullProviderTask will be named: acquire{prefix?}{record-type}, where the prefix is the second optional parameter to the task constructor and the record-type is obtained by asking the provider what does it provide. On the other hand, instances of the BatchPullProviderTask will be named: acquireMultiple{prefix?}{record-type}, where the placeholders are populated in the same way. The event produced by the two is in both cases the same: {record-type}Acquired. The only difference is that the single provider task outputs just one record, whereas the batch provider tasks outputs an array of them.

    \n
    \n

    Note: When implementing tasks which work on top of the result of a data provider, consider that the event can contain a single record or an array of them, depending on if they come from a single or a batch data provider task.

    \n
    \n

    These tasks allow some configuration. During their instantiation time, it is possible to indicate if they are required to run in the foreground or not, as seen above. This is required when collecting sensitive data. The foreground notification can be configured following the specific NTD instructions. In addition, while defining a workflow, the batch provider task can be configured to limit the maximum frequency at which new records can be collected, as it can be seen here, by using the maxInterval configuration parameter.

    \n
    \n

    Note: One big difference between the single provider task and the batch provider task, is that the latter will not finish until all the available time for running the task has been consumed. This is, if the batch task has been scheduled to run every minute, it will try to collect as many samples as possible during that minute before reporting. Keep this in mind for not to schedule long-lived tasks after a batch data collection, otherwise, they might not run at all. This task is intended for an exhaustive data collection with very little post-processing.

    \n
    \n

    Instantiating push-based data provider tasks

    \n

    Push-based data provider tasks are easier to instantiate, but a bit more difficult to integrate. Unlike the pull-based tasks, the process to set up push-based tasks requires three different steps.

    \n

    The first thing to do, is to instantiate the provider start and stop tasks. We have examples for that using HumanActivityProviders:

    \n
    import { Task, StartPushProviderTask, StopPushProviderTask } from '@awarns/core/tasks';

    import { HumanActivityProvider, Resolution } from './provider';

    export function startDetectingCoarseHumanActivityChangesTask(): Task {
      return new StartPushProviderTask(new HumanActivityProvider(Resolution.LOW), 'Coarse');
    }

    export function stopDetectingCoarseHumanActivityChangesTask(): Task {
      return new StopPushProviderTask(new HumanActivityProvider(Resolution.LOW), 'Coarse');
    }

    export function startDetectingIntermediateHumanActivityChangesTask(): Task {
      return new StartPushProviderTask(new HumanActivityProvider(Resolution.MEDIUM), 'Intermediate');
    }

    export function stopDetectingIntermediateHumanActivityChangesTask(): Task {
      return new StopPushProviderTask(new HumanActivityProvider(Resolution.MEDIUM), 'Intermediate');
    }
    \n

    In a similar way to the SingleProvider and BatchProvider tasks, the naming of the tasks has been standardized. For the start task, the name always follows this pattern: startDetecting{prefix?}{record-type}Changes, whereas for the stop task, it is always like this: stopDetecting{prefix?}{record-type}Changes.

    \n

    The key difference with the pull-based tasks is that, additionally, we also need to register a listener to receive the updates from the provider and emit them as framework events. Following with the example of the human activity recognition:

    \n
    import { awarns } from '@awarns/core';
    import { EventData } from '@awarns/core/events';

    import { ActivityChange, HumanActivity, Transition } from 'nativescript-context-apis/activity-recognition';
    import { HumanActivityChange } from './human-activity-change';
    import { Change } from '@awarns/core/entities';

    const DEFAULT_EVENT = 'userActivityChanged';

    export class HumanActivityChangeReceiver {
      constructor(private emitEvent: (eventName: string, eventData?: EventData) => void) {}

      onReceive(activityChange: ActivityChange) {
        const { type, timestamp, confidence } = activityChange;
        const change = activityChange.transition === Transition.STARTED ? Change.START : Change.END;
        const record = new HumanActivityChange(type, change, timestamp, confidence);
        this.emitEvent(DEFAULT_EVENT, record);
        this.emitEvent(generateEventNameFromActivityChange(record), record);
      }
    }

    function generateEventNameFromActivityChange(activityChange: HumanActivityChange) {
      const transition = activityChange.change === Change.START ? 'Started' : 'Finished';
      return `user${transition}${actionFromActivityType(activityChange.activity)}`;
    }

    function actionFromActivityType(type: HumanActivity) {
      switch (type) {
        case HumanActivity.STILL:
          return 'BeingStill';
        case HumanActivity.TILTING:
          return 'StandingUp';
        case HumanActivity.WALKING:
          return 'Walking';
        case HumanActivity.RUNNING:
          return 'Running';
        case HumanActivity.ON_BICYCLE:
          return 'RidingABicycle';
        case HumanActivity.IN_VEHICLE:
          return 'BeingInAVehicle';
      }
    }

    let _receiver: HumanActivityChangeReceiver;
    export function getHumanActivityChangeReceiver(): HumanActivityChangeReceiver {
      if (!_receiver) {
        _receiver = new HumanActivityChangeReceiver(awarns.emitEvent);
      }
      return _receiver;
    }
    \n

    The last thing to do is to register this listener at application startup. The best place to do it is by encapsulating the listener registration inside a function and invoke it at plugin registration time, as seen in the Basic usage section.

    \n

    This is how this function has been implemented in the human activity recognition plugin:

    \n
    import { PluginLoader } from '@awarns/core';
    import { Task } from '@awarns/core/tasks';
    import { HumanActivityProvider } from './internal/provider';


    export function registerHumanActivityPlugin(): PluginLoader {
      return async (_tasksInUse: Array<Task>) => {
        HumanActivityProvider.setup();
        // ...
      };
    }
    \n

    A brief note on logging and the rest of the utilities

    \n

    In addition to all the aforementioned features, the core package comes with a small set of tools consisting of typical reusable functionality pieces. These are classified in 4 different domains: logging, testing, unique identifiers and data serialization.

    \n

    Logging

    \n

    The AwarNS framework comes with a built-in console logger. However, it is possible to inject a custom logger during the framework initialization (see Basic usage - Initialization).

    \n

    Custom loggers can be used even for submitting crashes, even in the context of the framework, to a remote server. The following code fragment shows an example with a logger that submits errors to Firebase Crashlytics:

    \n
    import {
      Logger,
      AbstractLogger,
    } from \"@awarns/core/utils/logger\";
    import { FirebaseManager, firebaseManager } from \"../firebase\";
    import { DevLogger } from \"./dev\";
    import { isAndroid } from \"@nativescript/core\";

    export class ProdLogger extends AbstractLogger {
        constructor(
            tag: string,
            private firebase: FirebaseManager = firebaseManager,
            private auxLogger: Logger = new DevLogger(tag)
        ) {
            super(tag);
        }

        protected logDebug(message: string): void {
            return; // Do not print or send debug messages in production
        }

        protected async logInfo(message: string): Promise<void> {
            const crashlytics = await this.firebase.crashlytics();
            if (crashlytics) {
                crashlytics.log(message);
            } else {
                this.auxLogger.info(message);
            }
        }

        protected async logWarning(message: string): Promise<void> {
            const crashlytics = await this.firebase.crashlytics();
            if (crashlytics) {
                crashlytics.log(message);
            } else {
                this.auxLogger.warn(message);
            }
        }

        protected async logError(message: string): Promise<void> {
            const crashlytics = await this.firebase.crashlytics();
            if (!crashlytics) {
                this.auxLogger.error(message);
                return;
            }
            
            crashlytics.sendCrashLog(new java.lang.Exception(message));
        }
    }
    \n
    \n

    Note: To implement a custom logger, it is not needed to extend the AbstractLogger class. If, for some reason, you're not able to do it, or you want more freedom regarding how the messages are printed, you can always just implement the Logger interface.

    \n
    \n

    Instances of logger clases similar to the one above declare the following public API (same as for the Logger interface):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn typeDescription
    debug(message: any)voidAllows to display messages that are only useful during the development. Typically you'll want to have two separate loggers, one for development and another one for production. The production logger can simply ignore calls to this method, like it happens above.
    info(message: any)voidAllows to display regular information messages which might be useful to see while debugging log traces. This is used by each task's log() method.
    warning(message: any)voidAllows to log non-critical errors.
    error(message: any)voidAllows to log fatal application failures.
    \n

    With all the information from this section, if you want to use this optional framework feature, we advise you to implement a function to instantiate one or even different loggers (based on the current environment type) with a scope tag. Then, inject this new function to the framework configuration options object, using the customLogger(tag: string) property.

    \n

    Testing

    \n

    Inside the @awarns/core/testing/events folder, you'll find some functions to facilitate testing your own tasks in isolation from the rest of the framework:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn typeDescription
    createEvent(name: string, params?: CreateEventParams)DispatchableEventAllows to create a new NTD event, useful to invoke the execution of a task. The name of the event is mandatory. For the second optional parameter, see the CreateEventParams object API below.
    emit(dispatchableEvent: DispatchableEvent)voidEmits a newly created event. Typically you won't want to use this one unless you're testing complete background workflows.
    listenToEventTrigger(eventName: string, eventId: string)Promise<EventData>Listens and waits for a type of event (eventName) with a specific id (eventId, obtained from DispatchableEvent.id) to be emitted. Returns a promise containing the payload of the received event.
    \n

    This is the shape of the CreateEventParams object:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    dataEventDataA key-value object containing the payload of the event. If not present it will default to {} during the creation of the event.
    idstringA string uniquely identifying this instance of the event (must be unique for each task invoke). Defaults to a new UUID during the creation of the task.
    expirationTimestampnumberIndicates when the tasks handling this event should finish their execution. Defaults to nothing. If provided, must be a UNIX timestamp.
    \n
    \n

    For more information on how to use these APIs in your tests, you can see how we have implemented our own tests. Some examples are the SinglePullProvider Spec, the BatchPullProvider Spec, the StartPushProvider Spec and the StopPushProvider Spec.

    \n
    \n

    Unique identifiers

    \n

    Sometimes you'll need to create your own universally unique identifiers (UUIDs). Given we extensively use them throughout the framework, we have thought that it could be useful to expose a function to generate them, either for creating new plugins or features on top of the framework.

    \n

    Inside the @awarns/core/utils/uuid folder, you'll find a function with the following signature:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn typeDescription
    uuidstringUses the built-in mechanism in the underlying OS to generate a new UUID. In Android, it uses the UUID.randomUUID() method which generates an UUID v4. No other external dependencies are involved.
    \n

    Data serialization

    \n

    In certain cases, you might need to convert complex object structures to a string, and get back the original object somewhere else. In other cases, you might simply want to convert objects with a mix of properties containing plain objects and class instances.

    \n

    For these situations, you can use the built-in serialization functions that we extensively use throughout the framework, and that you can find inside the @awarns/core/utils/serialization folder:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturn typeDescription
    serialize(data: any)stringConverts any complex JavaScript object, class instance or array into a string which can be back-recovered. Works with objects containing Date properties too.
    deserialize(serializeData: string)anyThe reverse process to calling the serialize method. Please, note that class instances will be recovered as plain JavaScript objects, loosing their original nature.
    flatten(data: any)anyIdentical to chaining a serialize and a deserialize method call. Takes the advantage of the deserialize side-effect of turning class instances into plain objects to normalize complex object structures.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas":{"name":"@nativescript/canvas","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-image-zoom":{"name":"@triniwiz/nativescript-image-zoom","version":"4.2.0","license":"Apache-2.0","readme":"

    Nativescript nativescript-image-zoom

    \n
    ns plugin add @triniwiz/nativescript-image-zoom
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-statusbar":{"name":"nativescript-statusbar","version":"5.0.0","license":"MIT","readme":"

    NativeScript Status Bar

    \n

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

    \n

    Usage

    \n
    npm install nativescript-statusbar --save
    \n

    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.

    \n

    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.

    \n
    <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>
    \n

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

    \n

    \"status-bar-light\"

    \n

    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.

    \n

    Webpack

    \n

    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.

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

    Development workflow

    \n

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

    \n
      \n
    • Fork the repository locally
      • \n
    • Open the repository in your favorite terminal
      • \n
    • Navigate to the src code that contains the plugin's code cd /src
      • \n
    • Execute the npm script nmp run build.wrappers or npm run build.wrappers.watch
      • \n
    • When running the Vanila NativeScript demo app execute: npm run demo.android or npm run demo.ios
      • \n
    • When running the Angular NativeScript demo app execute: npm run demo.angular.android or npm run demo.angular.ios
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/camera":{"name":"@nativescript/camera","version":"5.0.15","license":"Apache-2.0","readme":"

    @nativescript/camera

    \n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n
    npm install @nativescript/camera --save
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
    requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
    requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
    requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
    isAvailable()Is the device camera available to use.
    \n

    CameraOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultPlatformDescription
    width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
    saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
    allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
    cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
    modalPresentationStyle0iOSSet a custom UIModalPresentationStyle (Defaults to UIModalPresentationStyle.FullScreen)
    \n
    \n

    Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

    \n
    \n

    Usage

    \n

    Requesting permissions

    \n

    Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    import { requestPermissions } from '@nativescript/camera';

    requestPermissions().then(
        function success() {
            // permission request accepted or already granted
            // ... call camera.takePicture here ...
        },
        function failure() {
            // permission request rejected
            // ... tell the user ...
        }
    );
    \n
    \n

    Note: (for Android) Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

    \n
    \n
    \n

    Note: (for iOS) If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

    \n
    \n
    <key>NSCameraUsageDescription</key>
    <string>enter your camera permission request text here</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>enter your photo library permission request text here</string>
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n

    Example 1: Require camera module in the application

    \n
    // JavaScript
    const camera = require(\"@nativescript/camera\");
    \n
    // TypeScript
    import * as camera from \"@nativescript/camera\";
    \n

    Then you are ready to use it:

    \n

    Example 2: How to take a picture and to receive image asset

    \n
    // JavaScript
    const { Image } = require(\"@nativescript/core\");

    camera.takePicture()
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"@nativescript/core\";

    camera.takePicture()
        .then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the original taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • allowsEditing: (iOS Only) A boolean parameter that indicates if the camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    // JavaScript

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"@nativescript/core\";

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)
        .then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Save a picture

    \n

    To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

    \n
    import { ImageSource, knownFolders, path } from '@nativescript/core';

    const source = new ImageSource();

    source.fromAsset(imageAsset)
        .then((imageSource: ImageSource) => {
            const folderPath: string = knownFolders.documents().path;
            const fileName: string = \"test.jpg\";
            const filePath: string = path.join(folderPath, fileName);
            const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

            if (saved) {
                console.log(\"Gallery: \" + this._dataItem.picture_url);
                console.log(\"Saved: \" + filePath);
                console.log(\"Image saved successfully!\");
            }
        });
    \n

    This could be used to create thumbnails for quick display within your application.

    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    const isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sentry":{"name":"nativescript-sentry","version":"2.0.1","license":"Apache-2.0","readme":"

    Sentry.io for NativeScript

    \n

    \"npm\"\n\"npm\"

    \n
    \n

    NativeScript plugin that uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

    \n
    \n
    \n

    :seven: – This is the documentation of v2 which is compatible with NativeScript 7
    \n:construction: – Currently in alpha state, use with caution!
    \n:six: – If you are using NativeScript 6, use a v1 release.

    \n
    \n

    Installation

    \n
    ns plugin add nativescript-sentry
    \n

    Configuration

    \n

    Android

    \n

    Add the following line to your AndroidManifest.xml within the <application>-tag:

    \n
    <meta-data android:name=\"io.sentry.dsn\" android:value=\"__YOUR_DSN_HERE__\" />
    \n

    Without Angular

    \n
    import { Sentry } from 'nativescript-sentry';
    const dsn = 'https://<key>:<secret>@host/<project>';
    Sentry.init(dsn);
    \n

    With Angular

    \n
    import { SentryModule } from 'nativescript-sentry/angular';

    NgModule({
      // ...
      imports: [
        SentryModule.forRoot({
          dsn: 'https://<key>:<secret>@host/<project>',
          discardUncaughtJsExceptions: true
        })
      ]
      // ...
    });
    \n

    Note: this plugin adds a custom ErrorHandler to your angular app

    \n

    Usage

    \n

    Capture an exception

    \n
    Sentry.captureException(exeption: Error, options?: ExceptionOptions);
    \n
    export interface ExceptionOptions {
      // Object of additional Key/value pairs which generate breakdowns charts and search filters in Sentry.
      tags?: object;

      // Object of unstructured data which is stored with events.
      extra?: object;
    }
    \n

    Example:

    \n
    try {
      throw new Error('Whoops!');
    } catch (error) {
      Sentry.captureException(error, {});
    }
    \n

    Capture a message

    \n
    Sentry.captureMessage(message: string, options?: MessageOptions)
    \n
    export interface MessageOptions {
      level?: Level;

      // Object of additional Key/value pairs which generate breakdowns charts and search filters.
      tags?: object;

      // Object of unstructured data which is stored with events.
      extra?: object;
    }

    export enum Level {
      Fatal = 'fatal',
      Error = 'error',
      Warning = 'warning',
      Info = 'info',
      Debug = 'debug'
    }
    \n

    Capture navigation breadcrumb

    \n
    Sentry.captureBreadcrumb(breadcrumb: BreadCrumb)
    \n
    export interface BreadCrumb {
      message: string;
      category: string;
      level: Level;
    }
    \n

    Set user

    \n
    Sentry.setContextUser(user: SentryUser)
    \n
    export interface SentryUser {
      id: string;
      email?: string;
      username?: string;
    }
    \n

    Set tags

    \n
    Sentry.setContextTags(tags: object)
    \n

    Set extra information

    \n
    Sentry.setContextExtra(extra: object)
    \n

    Clear context (user, tags, extra information)

    \n
    Sentry.clearContext();
    \n

    Troubleshooting and important remarks

    \n

    Native Exceptions / Crashes

    \n

    If you have a native exception and the app exits, the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior.

    \n

    Android SLF4J Log Error

    \n

    Sentry has an optional dependency on SLF4J on Android, which when not present will log an error about it not being in the application.

    \n
    System.err: SLF4J: Failed to load class \"org.slf4j.impl.StaticLoggerBinder\".
    System.err: SLF4J: Defaulting to no-operation (NOP) logger implementation
    System.err: SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
    \n

    To get rid of this log warning you can add a dependency to your app's app.gradle file located in App_Resources/Android/app.gradle to include:

    \n
    compile 'org.slf4j:slf4j-nop:1.7.25'
    \n

    in the dependencies. See the demo app.

    \n

    Demo Apps

    \n

    To run and test the demo apps you need to replace the placeholder __YOUR_DSN_HERE__ by your own DSN in the following files:

    \n
      \n
    • demo/App_Resources/Android/src/main/AndroidManifest.xml
      • \n
    • demo/app/app.ts
      • \n
    • demo-ng/App_Resources/Android/src/main/AndroidManifest.xml
      • \n
    • demo-ng/src/app.module.ts
      • \n
    \n

    Changelog

    \n

    2.0.1 - (25.03.2021)

    \n
      \n
    • fix issues with Angular
      • \n
    • fix issues with user data on android
      • \n
    \n

    Thanks to @jeremypele and @jerbob92!

    \n

    2.0.0-alpha.1 – (10.09.2020)

    \n
      \n
    • update Android SDK
      • \n
    • update for NativeScript 7
      • \n
    • add workflows for demo apps
      • \n
    \n

    Thanks to @bradmartin!

    \n

    1.10.3 – (10.09.2020)

    \n
      \n
    • Release new version under original name on npmjs.org
      • \n
    \n

    1.10.2 – (17.04.2020)

    \n
      \n
    • Fix GitHub Workflow to use existing publishing scripts
      • \n
    \n

    1.10.1 – (17.04.2020)

    \n
      \n
    • Set up GitHub Workflow for npm publising
      • \n
    \n

    1.10.0 – (15.04.2020)

    \n
      \n
    • Bumps to latest native SDK releases
      • \n
    • Stringifies data before writing it to Extras (Android)
      • \n
    \n
    \n

    Package was forked from the unmaintained package\ndanielgek/nativescript-sentry. Access to original npm package has been transfered. Many thanks to @danielgek for his original work on this plugin!

    \n
    \n

    1.8.0 – (02.02.2019)

    \n
      \n
    • bumps to latest native SDK releases
      • \n
    • implements improved data converter(#22)
      • \n
    • adds data to SentryUser
      • \n
    \n

    Thanks to @bradmartin and @jerbob92!

    \n

    1.6.1 – (28.11.2018)

    \n
      \n
    • back to native approach thanks to @bradmartin
      • \n
    • update dependencies
      • \n
    • update test app
      • \n
    • working native breadcrums for ios
      • \n
    • fix dsn init thanks to @kvnvelasco
      • \n
    \n

    1.5.0 – (11.12.2017)

    \n

    BREAKING CHANGES

    \n
      \n
    • capture() method was deprecated in favor of captureMessage/captureException
      • \n
    \n

    Features

    \n
      \n
    • Moving to an hybrid approach with both clients (web/native)
      • \n
    • breadcrumbs
      • \n
    • tags
      • \n
    • user info
      • \n
    • set tags and extra for each event
      • \n
    \n

    1.3.0 – (28.08.2017)

    \n
      \n
    • fix Aot compilation for angular apps
      • \n
    • fix typos thanks to @muratcorlu
      • \n
    \n

    1.2.0 – (02.08.2017)

    \n
      \n
    • update demos dependencies
      • \n
    • update ios and android native dependencies
      • \n
    • fix ios event capture
      • \n
    \n

    1.1.0 – (24.07.2017)

    \n
      \n
    • fix stringify
      • \n
    • fix angular error handler
      • \n
    \n

    Credits

    \n
      \n
    • @danielgek: for being the original author of this plugin danielgek/nativescript-sentry
      • \n
    • @hypery2k: for his nativescript-fabric (helped the original author a lot!)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swypelab-toasty":{"name":"nativescript-swypelab-toasty","version":"3.0.2","license":"MIT","readme":"

    nativescript-swypelab-toasty

    \n

    \"npm\"\n\"npm\"

    \n

    Install

    \n

    tns plugin add nativescript-swypelab-toasty

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from 'nativescript-swypelab-toasty';
    import { isIOS } from 'tns-core-modules/platform';
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty({ text: 'Toast message' });
    toast.show();

    // you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
    new Toasty({ text: 'Some Message' })
      .setToastDuration(ToastDuration.LONG)
      .setToastPosition(ToastPosition.BOTTOM)
      .setTextColor(new Color('white'))
      .setBackgroundColor('#ff9999')
      .show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      position: ToastPosition.TOP,
      yAxisOffset: 100,
      xAxisOffset: 10,
      ios: {
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24
      },
      anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
    });

    toasty.duration = ToastDuration.SHORT;
    toasty.textColor = '#fff';
    toasty.backgroundColor = new Color('purple');
    toasty.show();
    \n

    JavaScript

    \n
    var toasty = require('nativescript-swypelab-toasty').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n

      constructor(opts: ToastyOptions);

      position: ToastPosition;

      duration: ToastDuration;

      textColor: Color | string;

      backgroundColor: Color | string;

      yAxisOffset?: Length | number;

      xAxisOffset?: Length | number;

      readonly width: number;

      readonly height: number;


      /**
       * Show the Toasty
       */
      show();

      /**
       * Cancels the Toasty
       */
      cancel();

    /**
     * Sets the Toast position.
     */
      setToastPosition(value: ToastPosition): Toasty;

    /**
     * Sets the Toast duration.
     */
      setToastDuration(value: ToastDuration): Toasty;

    /**
      * Set the text color of the toast.
      * @param value [Color | string] - Color of the string message.
      */
      setTextColor(value: Color | string): Toasty;

    /**
      * Set the background color of the toast.
      * @param value [Color |  string] - Color of the background.
      * On Android this currently removes the default Toast rounded borders.
      */
      setBackgroundColor(value: Color | string): Toasty;
    \n
    export enum ToastDuration {
      'SHORT',
      'LONG'
    }

    export enum ToastPosition {
      'BOTTOM',
      'BOTTOM_LEFT',
      'BOTTOM_RIGHT',
      'CENTER',
      'CENTER_LEFT',
      'CENTER_RIGHT',
      'TOP',
      'TOP_LEFT',
      'TOP_RIGHT'
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Position of the Toast.
       */
      position?: ToastPosition;

      /**
       * Text color of the Toast message.
       */
      textColor?: Color | string;

      /**
       * Background Color of the Toast.
       */
      backgroundColor?: Color | string;

      /**
       * Android specific configuration options.
       */
      android?: any;

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appversion":{"name":"@nativescript/appversion","version":"2.0.0","license":"MIT","readme":"

    NativeScript AppVersion

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Read the current Package ID and Version (name and code) of your NativeScript app.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @nativescript/appversion
    \n

    Usage

    \n

    To use this plugin you must first require / import it:

    \n

    JavaScript

    \n
    var appversion = require(\"@nativescript/appversion\");
    \n

    TypeScript

    \n
    import * as appversion from \"@nativescript/appversion\";
    \n

    getVersionName(Sync)

    \n

    getVersionNameSync is the same as getVersionName, except it doesn't return a Promise.

    \n

    JavaScript

    \n
      appversion.getVersionName().then(function(v) {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionName().then((v: string) => {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    getVersionCode(Sync)

    \n

    JavaScript

    \n
      appversion.getVersionCode().then(function(v) {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionCode().then((v: string) => {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    getAppId(Sync)

    \n

    JavaScript

    \n
      appversion.getAppId().then(function(id) {
          console.log(\"Your app's id is: \" + id);
      });
    \n

    TypeScript

    \n
      appversion.getAppId().then((id: string) => {
          console.log(\"Your app's id is: \" + id);
      });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/phone-sensors":{"name":"@awarns/phone-sensors","version":"1.2.2","license":"Apache-2.0","readme":"

    @awarns/phone-sensors

    \n

    \"npm\n\"npm\"

    \n

    This module allows to collect data from the IMU sensors (i.e., accelerometer and gyroscope) and the magnetometer embedded\nin the mobile device.

    \n

    This plugin acts as a wrapper on top of the BackgroundSensors Android library,\nwhich enables the data collection even when the application is in the background or the device is idle. This module\noffers tasks for starting and stopping the data collection process.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/phone-sensors
    \n

    Usage

    \n

    After installing this plugin, you'll have access to two task groups with two tasks each to start and stop the data collection process.\nThe main difference between both tasks groups is the implementation of the underlying service that is being used for the data collection.\nOne group uses a standard data collection service, but the other one uses a special service that syncs the system clock with an NTP server\nto label the collected data with the most accurate timestamp.\nThe collected data from the sensors, will be a TriAxial record, described below.

    \n

    Setup (Optional)

    \n

    This plugin can be optionally registered using its loader during the framework initialization:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerPhoneSensorsPlugin } from '@awarns/phone-sensors';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerPhoneSensorsPlugin({ 
            enableVibrationOnStart: false
          })
        ]
      )
    // ... handle initialization promise
    \n

    Plugin loader parameter options:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    enableVibrationOnStartboolean(Optional) Enables or disables the generation of a vibration when the data collection service starts. Enabled by default.
    \n

    If the plugin is not registered, the vibration will be enabled by default.

    \n
    \n

    Warning: due to restrictions imposed by the OS, the plugin can only be registered once (i.e., the first time the plugin is initialized). In other words,\nif the plugin is first register with enableVibrationOnStart to true, and then the developer wants to disable the vibration,\nsetting enableVibrationOnStart to false will take no effect. If you want to change the value of enableVibrationOnStart,\nyou will have to uninstall the app.

    \n
    \n

    Tasks

    \n

    Standard collection service tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    startDetecting{prefix}Phone{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). The prefix can be used to distinguish among different configurations.
    stopDetectingPhone{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
    \n

    NTP synced collection service tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    startDetecting{prefix}PhoneNTPSynced{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). Before the collection starts, the system clock is synced with an NTP server to label the collected data with an accurate timestamp. The prefix can be used to distinguish among different configurations.
    stopDetectingPhoneNTPSynced{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
    \n

    Start data collection for a sensor with a specific configuration

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      startDetectingPhoneSensorChangesTask,
      PhoneSensor,
      SensorDelay,
    } from '@awarns/phone-sensors';

    export const demoTasks: Array<Task> = [
      startDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
      // startDetectingPhoneAccelerometerChanges
      
      startDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER, { sensorDelay: SensorDelay.FASTEST, batchSize: 50 }, 'Fast'),
      // startDetectingFastPhoneAccelerometerChanges

      startDetectingPhoneSensorChangesTask(PhoneSensor.GYROSCOPE, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
      // startDetectingPhoneGyroscopeChanges

      startDetectingPhoneNTPSyncedSensorChangesTask(PhoneSensor.GYROSCOPE, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
      // startDetectingPhoneNTPSyncedGyroscopeChanges

      startDetectingPhoneSensorChangesTask(PhoneSensor.MAGNETOMETER, { sensorDelay: SensorDelay.NORMAL, batchSize: 50 }),
      // startDetectingPhoneMagnetometerChanges

    ];
    \n
    \n

    Warning: the data collection for a PhoneSensor can only be started once, if startDetectingFastPhoneAccelerometerChanges is\nexecuted after startDetectingPhoneAccelerometerChanges and while the collection is in progress, startDetectingFastPhoneAccelerometerChanges\nwill be ignored. Therefore, if you want to dynamically change the collection's configuration while the collection is in progress,\nyou will have to stop the collection to start it again with the new desired configuration.

    \n
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter nameTypeDescription
    sensorPhoneSensorSensor to collect data from. See below.
    providerConfigurationProviderConfigurationCollection's configuration of the task. See below.
    prefix (Optional)stringAdds the prefix to the name of the task. Useful to create multiple tasks for the same sensor but with multiple configurations.
    \n
      \n
    • PhoneSensor
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ValueDescription
    ACCELEROMETERRepresents the phone's accelerometer sensor.
    GYROSCOPERepresents the phone's gyroscope sensor.
    MAGNETOMETERRepresents the phone's magnetometer sensor.
    \n
      \n
    • ProviderConfiguration
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    sensorDelaySensorDelay | numberIndicates the time between two consecutive samples. It can be a SensorDelay (i.e., UI, NORMAL, GAME or FASTEST) or a value in milliseconds.
    batchSizenumberIndicates the amount of samples to be delivered in each record.
    \n
    \n

    Note: the sensorDelay is taken as a suggestion by the Android OS. Samples could be delivered at a smaller or higher rate.

    \n
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

    \n

    However, once the start task has finished running, relevant events will be emitted by the internal listeners while the data collection is active. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingPhoneAccelerometerChanges'));
    on('startEvent', run('startDetectingPhoneGyroscopeChanges'));
    on('startEvent', run('startDetectingPhoneMagnetometerChanges'));

    on('accelerometerSamplesAcquired', run('writeRecords'));
    on('gyroscopeSamplesAcquired', run('writeRecords'));
    on('magnetometerSamplesAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Stop data collection for a sensor

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      stopDetectingPhoneSensorChangesTask,
      PhoneSensor,
    } from '@awarns/phone-sensors';

    export const demoTasks: Array<Task> = [
      stopDetectingPhoneSensorChangesTask(PhoneSensor.ACCELEROMETER),        // stopDetectingPhoneAccelerometerChanges
      stopDetectingPhoneNTPSyncedSensorChangesTask(PhoneSensor.GYROSCOPE),   // stopDetectingPhoneNTPSyncedGyroscopeChanges
      stopDetectingPhoneSensorChangesTask(PhoneSensor.MAGNETOMETER),         // stopDetectingPhoneMagnetometerChanges
    ];
    \n
    \n

    Note: a stop task of a specific PhoneSensor can be used to stop the collection started by any start task\nfor that PhoneSensor no matter the specific configuration.

    \n
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter nameTypeDescription
    sensorWatchSensorSensor to stop the data collection from.
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingPhoneAccelerometerChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingPhoneNTPSyncedGyroscopeChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingPhoneMagnetometerChanges').every(1, 'minute'));

    on('accelerometerSamplesAcquired', run('stopDetectingPhoneAccelerometerChanges'));
    on('gyroscopeSamplesAcquired', run('stopDetectingPhoneNTPSyncedGyroscopeChanges'));
    on('magnetometerSamplesAcquired', run('stopDetectingPhoneMagnetometerChanges'));
    \n

    Note: it makes no sense to use these tasks without using before their complementary tasks to start the data collection.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    accelerometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of an accelerometer sensor.
    gyroscopeSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a gyroscope sensor.
    magnetometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a magnetometer sensor.
    \n

    Records

    \n

    TriAxial

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringOne of the following values: accelerometer, gyroscope, or magnetometer.
    changeChangeAlways NONE.
    timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
    samplesTriAxialSample[]List with the collected samples.
    \n
    TriAxialSample
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    xnumberValue x of the sensor.
    ynumberValue y of the sensor.
    znumberValue z of the sensor.
    timestampnumberThe local time (UNIX timestamp) when the sample was collected.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-effects":{"name":"nativescript-effects","version":"3.0.0","license":"MIT","readme":"

    NativeScript Effects

    \n

    A NativeScript plugin that adds commonly used animation effects to views. This includes the nativescript-animation-spring as one of the effects so no need to get that plugin if you get this one.

    \n

    Installation

    \n
    $ npm install nativescript-effects --save
    \n

    This command automatically installs the necessary files, as well as stores nativescript-effects as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the animation effects plugin you must first require() its module. After you require() the module you have access to its APIs.

    \n

    In the demo app, this require line is added to the app.ts file, but you can also add it to a single code behind file where you will use the effects.

    \n
    var nsfx = require('nativescript-effects');
    \n

    TypeScript

    \n

    To avoid type checking errors, you must additionally configure TypeScript to recognize the method extensions to View. Simply add the following line to references.d.ts in the root of your project:

    \n
    /// <reference path=\"./node_modules/nativescript-effects/index.d.ts\" />
    \n

    Then get a reference to the view you want to animate and call one of the functions listed below. This view can be any child of the NativeScript View class such as Button, Label, etc.

    \n
    var myLabel = page.getViewById('lblMessage');
    myLabel.fadeIn()
           .then(function(){
               myLabel.fadeOut(10000);
           });
    \n

    API

    \n

    All extensions listed below return a Promise that will call it's then function once finished successfully.

    \n
    \n

    .fadeIn([duration])

    \n

    Description: Display the view by fading it to opaque.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .fadeOut([duration])

    \n

    Description: Hide the view by fading it to transparent.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .fadeTo([duration], [opacity])

    \n

    Description: Gradually adjust the opacity of the view.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    opacity (default: 1)\nType: Number
    \nA number between 0.0 and 1.0

    \n
    \n

    .fadeToggle([duration])

    \n

    Description: Display or hide the view by animating its opacity.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .floatIn([duration], [direction])

    \n

    Description: Display the view with a sliding motion in a certain direction.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    direction (default: 'up')\nType: String
    \nA constant representing the direction to float. Can be 'up', 'down', 'left', 'right'

    \n
    \n

    .floatOut([duration], [direction])

    \n

    Description: Hide the view with a sliding motion in a certain direction.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    direction (default: 'down')\nType: String
    \nA constant representing the direction to float. Can be 'up', 'down', 'left', 'right'

    \n
    \n

    .hide([duration])

    \n

    Description: Hide the view.

    \n

    duration (default: 1)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .shake()

    \n

    Description: Shake the view back and forth a few times, like a headshake "no"

    \n
    \n

    .show([duration])

    \n

    Description: Display the view.

    \n

    duration (default: 1)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .slideDown([duration], [distance])

    \n

    Description: Display the view with a sliding motion.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    distance (default: -100)\nType: Number
    \nA number determining how many points the view will slide.

    \n
    \n

    .slideUp([duration], [distance])

    \n

    Description: Hide the view with a sliding motion.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    distance (default: -100)\nType: Number
    \nA number determining how many points the view will slide.

    \n
    \n

    .slideToggle([duration])

    \n

    Description: Slide down or slide up the view based on current slide state.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n
    \n

    .spring([duration], [animation]) <- currently iOS only

    \n

    Description: Moves the view with a spring like bouncing motion.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n

    animation (default: see default object below)\nType: Object
    \nAn animation definition object as described in the "Spring Animation" section below.

    \n

    Default animation:

    \n
            animation = {
                    translate: {
                        x: 0,
                        y: -100
                    },
                    scale: {
                        x: 2,
                        y: 2
                    },
                    duration: msDuration,
                    delay: 0,
                    dampingRatio: 0.3,
                    velocity: 2.0,
                    options: null
                };
    \n

    ###Spring Animation options

    \n
      \n
    • translate: x and y distance translate animation
      • \n
    • scale: x and y scale animation
      • \n
    • delay: decimal (in ms)
      • \n
    • dampingRatio: float
      • \n
    • velocity: float
      • \n
    • options: object (UIViewAnimationOptions)
      • \n
    \n

    The full set of options is documented on the Apple developer site. Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).

    \n

    ###Example Usage

    \n
    myView.spring(10000, {
                translate: {
                    x: 0,
                    y: -100
                },
                scale: {
                    x: 2,
                    y: 2
                },
                delay: 0,
                dampingRatio: 0.3,
                velocity: 2.0,
                options: null,
            });
    \n
    \n

    .toggle([duration])

    \n

    Description: Display or hide the view.

    \n

    duration (default: 400)\nType: Number or String
    \nA string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@maximl/nativescript-dev-appium":{"name":"@maximl/nativescript-dev-appium","version":"6.1.3-r1","license":"MIT","readme":"

    nativescript-dev-appium

    \n

    A package to help with writing and executing e2e Appium tests.

    \n\n\n\n

    Features

    \n
      \n
    1. Cross-platform locators
      2. \n
    2. Find strategies: findElementByText, findElementByClassName, findElementByAccessibilityId, findElementByXPath
      3. \n
    3. Actions: tap, click, doubleTap, hold
      4. \n
    4. Gestures: scroll, scrollTo, swipe, drag
      5. \n
    5. Cross-platform element abstraction with exists, waitForExist, waitForNotExist, location, isDisplayed, size, text properties
      6. \n
    6. Ability to turn on/off “Don’t keep activities” setting in the Developer options for Android
      7. \n
    7. Direct access to driver
      8. \n
    8. Typings
      9. \n
    9. Async/Await
      10. \n
    10. Open source cloud builds integration, i. e. Sauce Labs
      11. \n
    11. Image comparison of: screen, rectangle; block out areas to ignore
      12. \n
    12. [WIP] Ability to verify animations/transitions through video/images; please refer to frame-comparer
      13. \n
    13. Mochawesome HTML report - including screenshots in report
      14. \n
    \n

    Requirements

    \n

    The nativescript-dev-appium plugin requires:

    \n\n

    Setup

    \n

    Add the plugin as a devDependency to your project:

    \n
    $ npm install -D nativescript-dev-appium
    \n
    \n

    After completion of the installation, if your project has a dependency to TypeScript, the plugin should have added an e2e folder containing predefined configs and samples.

    \n
    \n

    Then install Appium - we recommend a global installation to avoid adding it to every project you would like to test:

    \n
    $ npm install -g appium
    \n

    Install external dependencies of XCUITest driver for iOS via:

    \n\n
    $ brew install carthage
    $ brew install libimobiledevice --HEAD
    $ brew install ideviceinstaller
    $ brew install ios-webkit-debug-proxy
    \n\n
    $ npm install -g ios-deploy
    \n
    \n

    For detailed information on external dependencies, please, refer to the XCUITest repository.

    \n
    \n

    For correct functioning of the mobile-devices-controller for Android emulators, telnet is required to be available on your system.

    \n

    As the telnet was removed from macOS High Sierra, it could be installed as follows:

    \n
    $ brew install telnet
    \n

    Structure

    \n
        my-app\n    ├── app\n    ├── e2e\n        ├── config\n            ├── appium.capabilities.json\n            ├── mocha.opts\n        ├── sample.e2e-test.ts\n        ├── setup.ts\n        ├── tsconfig.json\n    ├── ...\n    ├── package.json\n    ├── tsconfig.json\n
    \n
    \n

    To avoid any incompatibilities between the source of e2e tests (ES6) and the source of the application (ES5), we recommend to exclude the e2e folder from the application's tsconfig.json file: exclude": [ "e2e" ].

    \n
    \n

    Files Preview

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FilePurpose
    config/appium.capabilities.jsonContains predefined configurations for test execution.
    config/mocha.optsA default mocha configuration file.
    sample.e2e-test.tsContains a predefined ready-to-execute sample tests of the default hello-world-ts template.
    setup.tsDefines the before and after test execution hooks responsible to start and stop the Appium server.
    tsconfig.jsonTypeScript compiler configuration file for the e2e tests.
    \n
    \n

    Note - the folders below are related to the image comparison feature:

    \n
      \n
    • e2e/reports - this folder is created during test execution and stores the actual images from comparison
      • \n
    • e2e/resources - this folder aims to store the expected images for comparison
      • \n
    \n
    \n

    Usage

    \n

    Before running the tests you will have to build your app for the platform on test or both. Navigate to your demo app folder from where you will execute the commands that follow.

    \n
    $ tns build android
    \n

    or

    \n
    $ tns build ios
    \n

    The command that will run the tests should specify the targeted capabilities configuration using the runType option as shown below. This way a capabilities will be selected from the capabilities configuration file.

    \n
    $ npm run e2e -- --runType android25
    \n

    or

    \n
    $ npm run e2e -- --runType sim.iPhone8.iOS110
    \n

    or for local runs during development

    \n
    $ npm run e2e android
    $ npm run e2e ios
    $ npm run e2e -- --device.name=/iPhone X/ --device.apiLevel=/12.1/
    \n

    Generated tests are standard Mocha tests.

    \n

    NOTE: When using Jasmine instead of Mocha, additional npm params (like runType) must have an equal sign (=) instead of a space.

    \n
    npm run e2e -- --runType=sim.iPhoneX
    \n

    Blogs

    \n

    2018, March 6th: Start Testing Your NativeScript Apps Properly

    \n

    Demos

    \n

    The official demos of the nativescript-dev-appium plugin: https://github.com/NativeScript/ns-dev-days-appium-plugin.

    \n

    These tests demonstrate:

    \n\n

    Tests on NativeScript Continuous Integration

    \n

    NativeScript/e2e/modal-navigation - use "Don't keep activities", run background (minimize/restore) app.

    \n

    nativescript-angular/e2e/renderer - use basics: locators, find strategies, assertions.

    \n

    nativescript-angular/e2e/router - use basics: locators, find strategies, assertions.

    \n

    nativescript-dev-webpack/demo/AngularApp - use data driven approach, compares element's images.

    \n

    nativescript-dev-webpack/demo/JavaScriptApp - use data driven approach, compares element's images.

    \n

    nativescript-dev-webpack/demo/TypeScriptApp - use data driven approach, compares element's images.

    \n

    Videos

    \n

    2018 March 6th: NativeScript Air 6 - UI Testing {N} apps with DevAppium

    \n

    2017 Sept 27th: NativeScript testing with Appium @ NativeScript Developer Day Europe 2017

    \n

    2017 Sept 19th: Introduction to Mobile UI Test Automation @ NativeScript Developer Day 2017

    \n

    Custom Appium Capabilities

    \n

    When installed, the plugin creates e2e folder containing sample test file and configuration folder config where your custom capabilities reside.\nThe existence of such capabilities is a runner's requirement which comes from Appium. Additional locations where the runner will search for the config file are:

    \n
    my-app
    ├── app
    ├── assets
    ├── package.json
    .
    .
    .
    └── appium.capabilities.json
    \n

    If the file structure assembles plugin repo structure like for example nativescript-plugin-seed the suggested location is:

    \n
    my-plugin
    ├── demo
    ├── demo-angular
    ├── src
    └── appium.capabilities.json
    \n

    Thus, the same configuration can be used by both apps without duplication of files.

    \n

    If you wish to use another location of the capabilities file instead default ones, you can specify it with --appiumCapsLocation option. Remember that the path provided has to be relative to the root directory.

    \n

    Notice that once custom capabilities are provided you will be able to pick any of them using the --runType option (e.g. --runType android25). See sample content of appium.capabilities.json file below. For more details regarding the Appium Capabilities read Appium documentation about Desired Capabilities:

    \n
    {
        \"android21\": {
                \"browserName\": \"\",
                \"platformName\": \"Android\",
                \"platformVersion\": \"5.0\",
                \"deviceName\": \"Android Emulator\",
                \"noReset\": false,
                \"app\": \"\"
            
        },
        \"android25\": {
                \"browserName\": \"\",
                \"platformName\": \"Android\",
                \"platformVersion\": \"7.0\",
                \"deviceName\": \"Android Emulator\",
                \"noReset\": false,
                \"app\": \"\"
            
        },
        \"sim.iPhone8.iOS110\": {
                \"browserName\": \"\",
                \"platformName\": \"iOS\",
                \"platformVersion\": \"11.0\",
                \"deviceName\": \"iPhone 8 110\",
                \"app\": \"\"
            
        }
    }
    \n

    As you can see, the app property can be left an empty string which will force the plugin to search for an app package in platforms folder. However, this search functionality depends on runType option so if you think of using it add android, device, sim strings as part of your runType option which in fact is your capability key in the config file. E.g --runType android23, --runType sim.iPhone8.iOS110. Thus, the runner will manage to look in the right location in order to search for app package.

    \n

    It is important to build your app in advance as explained in Usage section, because the runner expects to provide app package to it or such to exists in the search location.

    \n

    For faster testing when working on an app with livesync it would be better to use --devMode option or start a new session using --startSession option and run tests using --attachToDebug option and specify appium --port. Or simply start session with appium desktop application

    \n

    Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionDescriptionValue
    runTypeSelect the capabilities from your config file appium.capabilities.jsonConsider using android, device, sim strings as part of your runType option if you haven't provided app capability. Thus, the runner will look for app package in the right location for the current run.
    e.g. --runType ios-device10iPhone6
    appPathProvide location of the app package to be tested. This will overwrite all provided capabilities for appPossible values are:
    - app build package name (in case --sauceLab option is set it will prepend sauce-storage: in front of the app name so app has to be uploaded to Sauce Labs before execution starts)
    - path e.g. platforms/android/build/outputs/apk/demo.apk.
    Example: --appPath demo-debug.apk
    sauceLabEnable tests execution in Sauce Labs. As a prerequisite you will have to define SAUCE_USER and SAUCE_KEY as environment variablee.g. --sauceLab
    appiumCapsLocationChange the location where appium.capabilities.json config file can be. It should be relative to the root directorye.g. --appiumCapsLocation /e2e-tests
    portAppium server port
    storageSpecify remote image storage
    ignoreDeviceControllerSetting this option you will use default appium device controller which is recommended when tests are executed on cloud based solutions
    sessionIdIn order to attach to already started sessionOption --port is mandatory in this case. It will automatically set --devMode to true. Provides ability nativescript-dev-appium to be used with appium desktop client
    attachToDebugSame as sessionId but no need to provide session id.Option --port is mandatory in this case. It will automatically resolve --sessionId. Provides ability nativescript-dev-appium to be used with appium desktop client
    startSessionStart new appium server and initialize appium driver.
    cleanAppRemove application from device on server quit.
    \n

    Examples:

    \n

    Let say that we have a script in package.json like this

    \n
     \"scripts\": {
        \"e2e\": \"tsc -p e2e && mocha --opts ./config/mocha.opts --recursive e2e --appiumCapsLocation ./config/appium.capabilities.json\"
     }
    \n

    Run tests in sauceLab

    \n
    $ npm run e2e -- --runType android25 --sauceLab --appPath demo.apk
    \n

    Run tests in Kobiton

    \n
    $ npm run e2e -- --runType android25 --kobiton --appPath demo.apk
    \n

    Run tests locally

    \n
    $ npm run e2e -- --runType android25
    \n

    Starting new session will console log appium server port and session id

    \n
    $ node ./node_modules/.bin/ns-appium --runType android23 --startSession --port 8300
    \n

    Run tests with already started session. Specify session id and server port. Default value for server port is 8300

    \n
    $ npm run e2e -- --sessionId e72daf17-8db6-4500-a0cf-59a66effd6b9 --port 8300
    \n

    or simply use --attachToDebug which will attached to first available session. This is not recommended when more than one session is available.

    \n
    $ npm run e2e -- --attachToDebug --port 8300
    \n

    Troubleshooting

    \n

    Use the --verbose option to get error details:

    \n
    $ npm run e2e -- --runType android25 --verbose
    \n

    Common Problems

    \n
      \n
    1. Missing installed appium
      2. \n
    2. Misleading appPath or capabilities location. Please make sure that the path to the app or capabilities location is correct.
      3. \n
    3. Misleading details for device specified in appium config
      4. \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-hello-world-ng-vision":{"name":"@nativescript/template-hello-world-ng-vision","version":"8.6.3","license":"Apache-2.0","readme":"

    NativeScript with Angular for visionOS

    \n
    ns run visionos --no-hmr
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mobile-cli-lib":{"name":"mobile-cli-lib","version":"0.22.0","license":"Apache-2.0","readme":"

    mobile-cli-lib

    \n

    Provides an easy way for working with devices.\nContains common infrastructure for CLIs - mainly AppBuilder and NativeScript.

    \n

    Installation

    \n

    Latest version: 0.22.0

    \n

    Release date: 2016, December 15

    \n

    System Requirements

    \n

    Before installing the mobile-cli-lib, verify that your system meets the following requirements.

    \n

    Windows Systems

    \n

    Minimum Software Requirements

    \n
      \n
    • Windows 7 or later
      • \n
    • .NET 4.0 or later
      • \n
    • Node.js\n
        \n
      • (Windows 7 systems): Node.js 0.10.26 or a later stable official release except 0.10.34
        A known issue prevents the mobile-cli-lib from working properly with Node.js 0.10.34.
        • \n
      • (Windows 8 and later systems): Node.js 0.12.0 or a later stable official release
        A known issue in Inquirer.js prevents the interactive prompts from working properly in cmd shells on Windows 8 or later systems with Node.js 0.10.x.
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for iOS On-Device Deployment

    \n
      \n
    • iTunes (latest official)
      • \n
    • Node.js
      • \n
    \n
    \n

    The bitness of Node.js and iTunes must match.

    \n
    \n

    Additional Software Requirements for Android On-Device Deployment

    \n
      \n
    • Device drivers required by your system to recognize the connected Android device
      • \n
    • For testing in the native emulators\n
        \n
      • JDK 8 or later
        • \n
      • Android SDK 19 or later
        • \n
      • (Optional) Genymotion
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for Windows Phone On-Device Deployment

    \n
    \n

    In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

    \n
    \n

    OS X Systems

    \n

    Minimum Software Requirements

    \n
      \n
    • OS X Mavericks
      • \n
    • Node.js 0.10.26 or a later stable official release except 0.10.34
      A known issue prevents the mobile-cli-lib from working properly with Node.js 0.10.34.
      • \n
    • Mono 3.12 or later
      • \n
    \n

    Additional Software Requirements for iOS On-Device Deployment

    \n
      \n
    • iTunes (latest official)
      • \n
    • For testing in the native emulator\n
        \n
      • Xcode 5 or later
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for Android On-Device Deployment

    \n
      \n
    • Device drivers required by your system to recognize the connected Android device
      • \n
    • For testing in the native emulators\n
        \n
      • JDK 8 or later
        • \n
      • Android SDK 19 or later
        • \n
      • (Optional) Genymotion
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for Windows Phone On-Device Deployment

    \n
    \n

    In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

    \n
    \n

    Linux Systems

    \n

    Minimum Software Requirements

    \n
      \n
    • \n

      Ubuntu 14.04 LTS
      The mobile-cli-lib is tested and verified to run on Ubuntu 14.04 LTS. You might be able to run the mobile-cli-lib on other Linux distributions.

      \n
      • \n
    • \n

      Node.js 0.10.26 or a later stable official release except 0.10.34
      A known issue prevents the mobile-cli-lib from working properly with Node.js 0.10.34.

      \n
      \n

      TIP: You can follow the instructions provided here to install Node.js on your system.

      \n
      \n
      • \n
    • \n

      An Internet browser (latest official release)

      \n
      • \n
    • \n

      (64-bit systems) The runtime libraries for the ia32/i386 architecture

      \n
        \n
      • \n

        In the terminal, run the following command.

        \n
        sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386
        \n
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for iOS On-Device Deployment

    \n
    \n

    In this version of the mobile-cli-lib, you cannot deploy and LiveSync on connected iOS devices from the command line. You need to manually deploy the application package using iTunes.

    \n
    \n

    Additional Software Requirements for Android On-Device Deployment

    \n
      \n
    • Device drivers required by your system to recognize the connected Android device
      • \n
    • G++ compiler\n
        \n
      • In the terminal, run sudo apt-get install g++
        • \n
      \n
      • \n
    • For testing in the native emulators\n
        \n
      • JDK 8 or later
        • \n
      • Android SDK 19 or later
        • \n
      • (Optional) Genymotion
        • \n
      \n
      • \n
    \n

    Additional Software Requirements for Windows Phone On-Device Deployment

    \n
    \n

    In this version of the mobile-cli-lib, you cannot deploy and LiveSync to connected Windows Phone devices from the command line.

    \n
    \n

    Install the mobile-cli-lib

    \n

    The mobile-cli-lib should be added as dependency in your project's package.json.

    \n

    Usage

    \n

    In order to use mobile-cli-lib, just add a reference to it in your package.json:

    \n
    dependencies: {
    \t\"mobile-cli-lib\": \"0.4.0\"
    }
    \n

    After that execute npm install in the directory, where your package.json is located. This command will install all your dependencies in node_modules directory. Now you are ready to use mobile-cli-lib in your project:

    \n
    var common = require(\"mobile-cli-lib\");
    common.fs.getFileSize(\"D:\\\\Work\\\\t.txt\")
        .then(function (result) {
            console.log(\"File size is: \" + result);
            return result;
        }, function (err) {
            console.log(\"Error happened:\");
            console.log(err);
        });
    \n

    Sample application

    \n

    You can find a sample application here. Just download the zip file and execute npm install in the project directory.\nAfter that you can execute node index.js in your terminal. In case you have file D:\\Work\\t.txt, the application will show you its size. In case you do not have such file, the application will show an error.\nYou can change the filename in index.js.

    \n

    Public API

    \n

    This section contains information about each public method.

    \n

    Device related public API, exposes IDeviceInfo data, that contains the following information:

    \n
    /**
     * Describes available information for a device.
     */
    interface IDeviceInfo {
    \t/**
    \t * Unique identifier of the device.
    \t */
    \tidentifier: string;

    \t/**
    \t * The name of the device.
    \t * For Android this is the value of device's 'ro.product.name' property.
    \t * For iOS this is the value of device'    s 'DeviceName' property.
    \t */
    \tdisplayName: string;

    \t/**
    \t * Device model.
    \t * For Android this is the value of device's 'ro.product.model' property.
    \t * For iOS this is the value of device'    s 'ProductType' property.
    \t */
    \tmodel: string;

    \t/**
    \t * Version of the OS.
    \t * For Android this is the value of device's 'ro.build.version.release' property.
    \t * For iOS this is the value of device'    s 'ProductVersion' property.
    \t */
    \tversion: string;

    \t/**
    \t * Vendor of the device.
    \t * For Android this is the value of device's 'ro.product.brand' property.
    \t * For iOS the value is always \"Apple\".
    \t */
    \tvendor: string;

    \t/**
    \t * Device'    s platform.
    \t * Can be Android or iOS.
    \t */
    \tplatform: string;

    \t/**
    \t * Status of device describing if you can work with this device or there's communication error.
    \t * Can be Connected or Unreachable.
    \t */
    \tstatus: string;

    \t/**
    \t * Additional information for errors that prevents working with this device.
    \t * It will be null when status is Connected.
    \t */
    \terrorHelp: string;

    \t/**
    \t * Defines if the device is tablet or not.
    \t * For Android the value will be true when device'    s 'ro.build.characteristics' property contains \"tablet\" word or when the 'ro.build.version.release' is 3.x
    \t * For iOS the value will be true when device's 'ProductType' property contains \"ipad\" word.
    \t */
    \tisTablet: boolean;

    \t/**
    \t * Optional property describing the color of the device.
    \t * Available for iOS only - the value of device'    s 'DeviceColor' property.
    \t */
    \tcolor?: string;

    \t/**
    \t *  Optional property describing the architecture of the device
    \t *  Available for iOS only - can be \"armv7\" or \"arm64\"
    \t */
    \tactiveArchitecture?: string;
    }
    \n

    Module companionAppsService

    \n
    \n

    Stability 2 - Stable

    \n
    \n

    companionAppsService gives access to companion apps identifiers.

    \n
      \n
    • getAllCompanionAppIdentifiers: returns all companion app identifiers in a JSON object, where the top level keys are frameworks (cordova and nativescript) and inner keys are platforms (android, ios, wp8).\nSample usage:
      • \n
    \n
    var companionAppIdentifiers = require(\"mobile-cli-lib\").companionAppsService.getAllCompanionAppIdentifiers();
    \n

    Result object is something like:

    \n
    {
    \t'cordova': {
    \t\t'android': 'android.cordova.companion.app.identifier',
    \t\t'ios': 'ios.cordova.companion.app.identifier',
    \t\t'wp8': 'wp8.cordova.companion.app.identifier'
    \t},
    \t'nativescript': {
    \t\t'android': 'android.nativescript.companion.app.identifier',
    \t\t'ios': 'ios.nativescript.companion.app.identifier',
    \t\t'wp8': null
    \t}
    }
    \n
      \n
    • getCompanionAppIdentifier(framework: string, platform: string): string - returns companion app identifier for specified framework and platform.\nSample usage:
      • \n
    \n
    var companionAppIdentifiers = require(\"mobile-cli-lib\").companionAppsService.getCompanionAppIdentifier(\"cordova\", \"android\");
    \n

    Module deviceEmitter

    \n
    \n

    Stability 2 - Stable

    \n
    \n

    deviceEmitter module is used to emit different events related to devices attached to the system.\nYou can use deviceEmitter to add handles for the following events:

    \n
      \n
    • deviceFound - Raised when a new device is attached to the system. The callback function will receive one argument - deviceInfoData.\nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceFound\",  function(deviceInfoData) {
    \tconsole.log(\"Found device with identifier: \" + deviceInfoData.identifier);
    });
    \n
      \n
    • deviceLost - Raised when a device is detached from the system. The callback function will receive one argument - deviceInfoData.\nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceLost\",  function(deviceInfoData) {
    \tconsole.log(\"Detached device with identifier: \" + deviceInfoData.identifier);
    });
    \n
      \n
    • deviceLogData - Raised when attached device reports any information. This is the output of adb logcat for Android devices. For iOS this is the iOS SysLog.\nThe event is raised for any device that reports data. The callback function has two arguments - deviceIdentifier and reportedData.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"deviceLogData\",  function(identifier, reportedData) {
    \tconsole.log(\"Device \" + identifier + \" reports: \" + reportedData);
    });
    \n
      \n
    • applicationInstalled - Raised when application is installed on a device. The callback has two arguments - deviceIdentifier and applicationIdentifier.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"applicationInstalled\",  function(identifier, applicationIdentifier) {
    \tconsole.log(\"Application \" + applicationIdentifier  + \" has been installed on device with id: \" + identifier);
    });
    \n
      \n
    • applicationUninstalled - Raised when application is removed from device. The callback has two arguments - deviceIdentifier and applicationIdentifier.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"applicationUninstalled\",  function(identifier, applicationIdentifier) {
    \tconsole.log(\"Application \" + applicationIdentifier  + \" has been uninstalled from device with id: \" + identifier);
    });
    \n
      \n
    • debuggableAppFound - Raised when application on a device becomes available for debugging. The callback has one argument - applicationInfo.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"debuggableAppFound\",  function(applicationInfo) {
    \tconsole.log(\"Application \" + applicationInfo.appIdentifier  + \" is available for debugging on device with id: \" + applicationInfo.deviceIdentifier);
    });
    \n

    Sample result for applicationInfo will be:

    \n
    {
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.Fitness\",
    \t\"framework\": \"NativeScript\",
    \t\"title\": \"NativeScript Application\"
    }
    \n
      \n
    • debuggableAppLost - Raised when application on a device is not available for debugging anymore. The callback has one argument - applicationInfo.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"debuggableAppLost\",  function(applicationInfo) {
    \tconsole.log(\"Application \" + applicationInfo.appIdentifier  + \" is not available for debugging anymore on device with id: \" + applicationInfo.deviceIdentifier);
    });
    \n

    Sample result for applicationInfo will be:

    \n
    {
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.Fitness\",
    \t\"framework\": \"NativeScript\",
    \t\"title\": \"NativeScript Application\"
    }
    \n
      \n
    • debuggableViewFound - Raised when a new debuggable WebView is found. The callback has three arguments - deviceIdentifier, appIdentifier and webViewInfo.
      • \n
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\")
    \t.deviceEmitter.on(\"debuggableViewFound\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
    \tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" now has new WebView: \" + debuggableViewInfo);
    });
    \n

    Sample result for debuggableViewInfo will be:

    \n
    {
    \t\"description\": \"\",
    \t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
    \t\"id\": \"4050\",
    \t\"title\": \"New tab\",
    \t\"type\": \"page\",
    \t\"url\": \"chrome-native://newtab/\",
    \t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
    }
    \n
      \n
    • debuggableViewLost - Raised when a debuggable WebView is lost. The callback has three arguments - deviceIdentifier, appIdentifier and webViewInfo.
      • \n
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\")
    \t.deviceEmitter.on(\"debuggableViewLost\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
    \tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" now cannot debug WebView: \" + debuggableViewInfo);
    });
    \n

    Sample result for debuggableViewInfo will be:

    \n
    {
    \t\"description\": \"\",
    \t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
    \t\"id\": \"4050\",
    \t\"title\": \"New tab\",
    \t\"type\": \"page\",
    \t\"url\": \"chrome-native://newtab/\",
    \t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
    }
    \n
      \n
    • debuggableViewChanged - Raised when a property of debuggable WebView is changed, for example it's title. The callback has three arguments - deviceIdentifier, appIdentifier and webViewInfo.
      • \n
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\")
    \t.deviceEmitter.on(\"debuggableViewChanged\",  function(deviceIdentifier, appIdentifier, debuggableViewInfo) {
    \tconsole.log(\"On device \" + deviceIdentifier + \" the application \" + appIdentifier  + \" has changes in WebView: \" + debuggableViewInfo);
    });
    \n

    Sample result for debuggableViewInfo will be:

    \n
    {
    \t\"description\": \"\",
    \t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
    \t\"id\": \"4050\",
    \t\"title\": \"New tab 2\",
    \t\"type\": \"page\",
    \t\"url\": \"chrome-native://newtab/\",
    \t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
    }
    \n
      \n
    • companionAppInstalled - Raised when application is removed from device. The callback has two arguments - deviceIdentifier and framwork.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"companionAppInstalled\",  function(identifier, framwework) {
    \tconsole.log(\"Companion app for \" + framework  + \" has been installed on device with id: \" + identifier);
    });
    \n
      \n
    • companionAppUninstalled - Raised when application is removed from device. The callback has two arguments - deviceIdentifier and framwork.

      \nSample usage:
      • \n
    \n
    require(\"mobile-cli-lib\").deviceEmitter.on(\"companionAppUninstalled\",  function(identifier, framwework) {
    \tconsole.log(\"Companion app for \" + framework  + \" has been uninstalled from device with id: \" + identifier);
    });
    \n

    Module devicesService

    \n
    \n

    Stability: 2 - Stable

    \n
    \n

    This module allows interaction with devices. You can get a list of the attached devices or deploy on specific devices.

    \n
      \n
    • getDevices() - This function returns array of all connected devices. For each of them the following information is provided:\nSample usage:
      • \n
    \n
    var devices = require(\"mobile-cli-lib\").devicesService.getDevices();
    devices.forEach(function(device) {
    \tconsole.log(\"Device \" + device.identifier + \" is connected.\");
    });
    \n
      \n
    • deployOnDevices(deviceIdentifiers: string[], packageFile: string, packageName: string, framework: string) - Deploys the specified package to the specified devices.\nReturns array of Promises. Each of them will be rejected in case the file cannot be deployed on the device or in case there's no device with such identifier.\nThe function accepts three arguments:\n
        \n
      • deviceIdentifiers - array of the unique identifiers of the devices where the application will be deployed.
        • \n
      • packageFile - path to the specified package (.apk or .ipa);
        • \n
      • packageName - the identifier of the package. This corresponds to appId from .abproject.
        • \n
      • framework - the framework of the project. Valid values are Cordova and NativeScript.
        • \n
      \n
      • \n
    \n

    Sample usage:

    \n
    Promise.all(require(\"mobile-cli-lib\")
    \t\t\t\t.devicesService
    \t\t\t\t.deployOnDevices([\"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\"], \"./app.ipa\", \"com.telerik.testApp\", \"Cordova\"))
    \t\t\t.then(function(data) {
    \t\t\t\tconsole.log(data);
    \t\t\t}, function(err) {
    \t\t\t\tconsole.log(err);
    \t\t\t});
    \n
      \n
    • setLogLevel(logLevel: string, deviceIdentifier?: string) - Sets the logging level for device(s) to INFO or FULL.\nThe method has two parameters, only the first one is mandatory. When only logLevel is passed, it's value is used for all currently connected devices and all devices that will be connected in the future.\nBy default the logging level is set to INFO. For example when there are two devices attached and this method is called in the following way:
      • \n
    \n
    require(\"mobile-cli-lib\").devicesService.setLogLevel(\"FULL\");
    \n

    Everything that the devices report will be raised in deviceEmitter.deviceLogData event. When a new device is attached, all of the information that it reports will also be send.\nWhen the deviceIdentifier is passed, the value of the log level will be used only for this device. For example when all devices report all of their logs (FULL) level, you may call:

    \n
    require(\"mobile-cli-lib\").devicesService.setLogLevel(\"INFO\", \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\");
    \n

    This will set the logging level to INFO only for device with identifier 129604ab96a4d0053023b4bf5b288cf34a9ed5fa.

    \n
      \n
    • isAppInstalledOnDevices(deviceIdentifiers: string[], appIdentifier: string, framework: string): Promise<IAppInstalledInfo>[] - checks if the specified application is installed on each of the specified devices and is LiveSync supported for this application.\nThe returned type for each device is IAppInstalledInfo:
      • \n
    \n
    /**
     * Describes if LiveSync is supported for specific device and application.
     */
    interface IAppInstalledInfo extends ILiveSyncSupportedInfo {
    \t/**
    \t * Unique identifier of the device.
    \t */
    \tdeviceIdentifier: string;

    \t/**
    \t * Application identifier.
    \t */
    \tappIdentifier: string;

    \t/**
    \t * Defines if application is installed on device.
    \t */
    \tisInstalled: boolean;

    \t/**
    \t * Result, indicating is livesync supported for specified device and specified application.
    \t * `true` in case livesync is supported and false otherwise.
    \t */
    \tisLiveSyncSupported: boolean;
    }
    \n
    \n

    NOTE: This method will try to start the application on each device in order to understand is LiveSync supported.\nSample usage:

    \n
    \n
    Promise.all(require(\"mobile-cli-lib\")
    \t\t\t\t.devicesService
    \t\t\t\t.isAppInstalledOnDevices(devicesFound, \"com.telerik.myApp\", \"cordova\"))
    \t\t.then(function(data) {
    \t\t\tconsole.log(data);
    \t\t}, function(err) {
    \t\t\tconsole.log(err);
    \t\t});
    \n

    Sample result will be:

    \n
    [{
    \t\"deviceIdentifier\": \"deviceId1\",
    \t\"appIdentifier\": \"appId\",
    \t\"isInstalled\": true,
    \t\"isLiveSyncSupported\": true
    }, {
    \t\"deviceIdentifier\": \"deviceId2\",
    \t\"appIdentifier\": \"appId\",
    \t\"isInstalled\": false,
    \t\"isLiveSyncSupported\": false
    }]
    \n
      \n
    • isCompanionAppInstalledOnDevices(deviceIdentifiers: string[], framework: string): Promise<IAppInstalledInfo>[] - checks if the companion application is installed on each of the specified devices and is LiveSync supported for this application.\nThe returned type for each device is IAppInstalledInfo (check above for full description of the interface).\nSample usage:
      • \n
    \n
    Promise.all(require(\"mobile-cli-lib\")
    \t\t\t\t.devicesService
    \t\t\t\t.isCompanionAppInstalledOnDevices(devicesFound, \"cordova\"))
    \t\t.then(function(data) {
    \t\t\tconsole.log(data);
    \t\t}, function(err) {
    \t\t\tconsole.log(err);
    \t\t});
    \n

    Sample result will be:

    \n
    [{
    \t\"deviceIdentifier\": \"deviceId1\",
    \t\"appIdentifier\": \"com.telerik.AppBuilder\",
    \t\"isInstalled\": true,
    \t\"isLiveSyncSupported\": true
    }, {
    \t\"deviceIdentifier\": \"deviceId2\",
    \t\"appIdentifier\": \"com.telerik.AppBuilder\",
    \t\"isInstalled\": false,
    \t\"isLiveSyncSupported\": false
    }]
    \n
      \n
    • mapAbstractToTcpPort(deviceIdentifier: string, appIdentifier: string, framework: string): Promise<string> - This function forwards the abstract port of the web view on the device to available tcp port on the host and returns the tcp port.
      • \n
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\").devicesService.mapAbstractToTcpPort(\"4df18f307d8a8f1b\", \"com.telerik.test\", \"Cordova\")
    \t.then(function(port) {
    \t\tconsole.log(port);
    \t}, function(err) {
    \t\tconsole.log(err);
    \t});
    \n
      \n
    • getDebuggableApps(deviceIdentifiers: string[]): Promise<IDeviceApplicationInformation[]>[] - This function checks the proc/net/unix file of each device from the deviceIdentifiers argument for web views connected to abstract ports and returns information about the applications.
      • \n
    \n
    /**
     * Describes basic information about application on device.
     */
    interface IDeviceApplicationInformation {
    \t/**
    \t * The device identifier.
    \t */
    \tdeviceIdentifier: string;

    \t/**
    \t * The application identifier.
    \t */
    \tappIdentifier: string;

    \t/**
    \t * The framework of the project (Cordova or NativeScript).
    \t */
    \tframework: string;
    }
    \n

    Sample usage:

    \n
    Promise.all(require(\"mobile-cli-lib\").devicesService.getDebuggableApps([\"4df18f307d8a8f1b\", \"JJY5KBTW75TCHQUK\"]))
    \t.then(function(data) {
    \t\tdata.forEach(function(apps) {
    \t\t\tconsole.log(apps);
    \t\t});
    \t}, function(err) {
    \t\tconsole.log(err);
    \t});
    \n

    Sample result will be:

    \n
    [[{
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.Fitness\",
    \t\"framework\": \"NativeScript\"
    }, {
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.livesynctest\",
    \t\"framework\": \"Cordova\"
    }], [{
    \t\"deviceIdentifier\": \"JJY5KBTW75TCHQUK\",
    \t\"appIdentifier\": \"com.telerik.PhotoAlbum\",
    \t\"framework\": \"NativeScript\"
    }]]
    \n
      \n
    • getDebuggableApps(deviceIdentifiers: string[]): Promise<IDeviceApplicationInformation[]>[] - This function checks the proc/net/unix file of each device from the deviceIdentifiers argument for web views connected to abstract ports and returns information about the applications.
      • \n
    \n
    /**
     * Describes basic information about application on device.
     */
    interface IDeviceApplicationInformation {
    \t/**
    \t * The device identifier.
    \t */
    \tdeviceIdentifier: string;

    \t/**
    \t * The application identifier.
    \t */
    \tappIdentifier: string;

    \t/**
    \t * The framework of the project (Cordova or NativeScript).
    \t */
    \tframework: string;
    }
    \n

    Sample usage:

    \n
    Promise.all(require(\"mobile-cli-lib\").devicesService.getDebuggableApps([\"4df18f307d8a8f1b\", \"JJY5KBTW75TCHQUK\"]))
    \t.then(function(data) {
    \t\tdata.forEach(function(apps) {
    \t\t\tconsole.log(apps);
    \t\t});
    \t}, function(err) {
    \t\tconsole.log(err);
    \t});
    \n

    Sample result will be:

    \n
    [[{
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.Fitness\",
    \t\"framework\": \"NativeScript\"
    }, {
    \t\"deviceIdentifier\": \"4df18f307d8a8f1b\",
    \t\"appIdentifier\": \"com.telerik.livesynctest\",
    \t\"framework\": \"Cordova\"
    }], [{
    \t\"deviceIdentifier\": \"JJY5KBTW75TCHQUK\",
    \t\"appIdentifier\": \"com.telerik.PhotoAlbum\",
    \t\"framework\": \"NativeScript\"
    }]]
    \n
      \n
    • getDebuggableViews(deviceIdentifier: string, appIdentifier: string): Promise<IDebugWebViewInfo[]> - This function returns WebViews that can be debugged for specified application on specified device.
      • \n
    \n
    \n

    NOTE: This method works only for Cordova based applications. DO NOT pass appIdentifier of NativeScript application.

    \n
    \n
    /**
     * Describes information for WebView that can be debugged.
     */
    interface IDebugWebViewInfo {
    \t/**
    \t * Short description of the view.
    \t */
    \tdescription: string;

    \t/**
    \t * Url to the devtools.
    \t * @example http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4024
    \t */
    \tdevtoolsFrontendUrl: string;

    \t/**
    \t * Unique identifier of the web view. Could be number or GUID.
    \t * @example 4027
    \t */
    \tid: string;

    \t/**
    \t * Title of the WebView.
    \t * @example https://bit.ly/12345V is not available
    \t */
    \ttitle: string;

    \t/**
    \t * Type of the WebView.
    \t * @example page
    \t */
    \ttype: string;

    \t/**
    \t * URL loaded in the view.
    \t * @example https://bit.ly/12345V
    \t */
    \turl: string;

    \t/**
    \t * Debugger URL.
    \t * @example ws://127.0.0.1:53213/devtools/page/4027
    \t */
    \twebSocketDebuggerUrl: string;
    }
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\")
    \t.devicesService
    \t.getDebuggableViews(\"4df18f307d8a8f1b\", \"com.telerik.cordovaApp\")
    \t.then(function(data) {
    \t\tconsole.log(data);
    \t}, function(err) {
    \t\tconsole.log(err);
    \t});
    \n

    Sample result will be:

    \n
    [{
    \t\t\"description\": \"\",
    \t\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4050\",
    \t\t\"id\": \"4050\",
    \t\t\"title\": \"New tab\",
    \t\t\"type\": \"page\",
    \t\t\"url\": \"chrome-native://newtab/\",
    \t\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4050\"
    \t},

    \t{
    \t\t\"description\": \"\",
    \t\t\"devtoolsFrontendUrl\": \"http://chrome-devtools-frontend.appspot.com/serve_rev/@211d45a5b74b06d12bb016f3c4d54095faf2646f/inspector.html?ws=127.0.0.1:53213/devtools/page/4032\",
    \t\t\"id\": \"4032\",
    \t\t\"title\": \"New tab\",
    \t\t\"type\": \"page\",
    \t\t\"url\": \"chrome-native://newtab/\",
    \t\t\"webSocketDebuggerUrl\": \"ws://127.0.0.1:53213/devtools/page/4032\"
    \t}
    ]
    \n

    Module liveSyncService

    \n
    \n

    Stability: 1 - Could be changed due to some new requirments.

    \n
    \n

    This module allows LiveSync applications on different devices.

    \n

    The following types are used:

    \n
    /**
     * Describes the result of a single livesync operation started by Proton.
     */
    interface ILiveSyncOperationResult {
    \t/**
    \t * Defines if the operation is successful (set to true) or not (value is false).
    \t */
    \tisResolved: boolean;

    \t/**
    \t * Error when livesync operation fails. If `isResolved` is true, error will be undefined.
    \t */
    \terror?: Error;
    }

    /**
     * Describes result of all LiveSync operations per device.
     */
    interface IDeviceLiveSyncResult {
    \t/**
    \t * Identifier of the device.
    \t */
    \tdeviceIdentifier: string;

    \t/**
    \t * Result of LiveSync operation for application.
    \t */
    \tliveSyncToApp?: ILiveSyncOperationResult;

    \t/**
    \t * Result of LiveSync operation to companion app.
    \t */
    \tliveSyncToCompanion?: ILiveSyncOperationResult;
    }
    \n
      \n
    • livesync(devicesInfo: IDeviceLiveSyncInfo[], projectDir: string, filePaths?: string[]): Promise<IDeviceLiveSyncResult>[] - LiveSync changes on the specified devices.\nIn case filePaths are not specified, the whole project directory will be synced.\nThe devicesInfo array describes livesync operations for each device. Each object should be described with the following properties:
      • \n
    \n
    /**
     * Describes device's LiveSync information.
     */
    interface IDeviceLiveSyncInfo {
    \t/**
    \t * Unique identifier of the device.
    \t */
    \tdeviceIdentifier: string;

    \t/**
    \t * Defines if changes have to be synced to installed application.
    \t */
    \tsyncToApp: boolean;

    \t/**
    \t * Defines if changes have to be synced to companion app.
    \t */
    \tsyncToCompanion: boolean;
    }
    \n

    Sample usage:

    \n
    var deviceInfos = [{\"deviceIdentifier\": \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"syncToApp\": true, \"syncToCompanion\": false},
    \t\t\t\t\t{\"deviceIdentifier\": \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\", \"syncToApp\": true, \"syncToCompanion\": false}];
    // Full Sync - the whole project dir will be synced
    Promise.all(require(\"mobile-cli-lib\").liveSyncService.livesync(deviceInfos, projectDir))
    \t.then(function(result) {
    \t\t\tconsole.log(\"Finished with full sync, result is: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while livesyncing: \", err);
    \t});

    // Or use livesync only for some files:
    var filesToSync = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.xml\"),
    \t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.xml\")]
    Promise.all(require(\"mobile-cli-lib\").liveSyncService.livesync(deviceInfos, projectDir, filesToSync))
    \t.then(function(result) {
    \t\t\tconsole.log(\"Finished with partial sync, result is: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while livesyncing: \", err);
    \t});
    \n
      \n
    • deleteFiles(devicesInfo: IDeviceLiveSyncInfo[], projectDir: string, filePaths: string[]): Promise<IDeviceLiveSyncResult>[] - Deletes specified files from devices's livesync directories.\nThe devicesInfo array describes livesync operations for each device. Check livesync method above fore more information.
      • \n
    \n

    Sample usage:

    \n
    var deviceInfos = [{\"deviceIdentifier\": \"129604ab96a4d0053023b4bf5b288cf34a9ed5fa\", \"syncToApp\": true, \"syncToCompanion\": false},
    \t\t\t\t\t{\"deviceIdentifier\": \"153544fa45f4a5646543b5bf1b221fe31a8fa6bc\", \"syncToApp\": true, \"syncToCompanion\": false}];

    var filesToSync = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.xml\"),
    \t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.xml\")]
    Promise.all(require(\"mobile-cli-lib\").liveSyncService.deleteFiles(deviceInfos, projectDir, filesToSync))
    \t.then(function(result) {
    \t\t\tconsole.log(\"Finished with deleting files, result is: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while deleting files: \", err);
    \t});
    \n

    Module npmService

    \n
    \n

    Stability: 1 - Could be changed due to some new requirments.

    \n
    \n

    This module is used to install or uninstall packages from npm.

    \n

    The following types are used:

    \n
    /**
     * Describes information for single npm dependency that has to be installed.
     */
    interface INpmDependency {
    \t/**
    \t * Name of the dependency.
    \t */
    \tname: string;

    \t/**
    \t * @optional The version of the dependency that has to be installed.
    \t */
    \tversion?: string;

    \t/**
    \t * Defines if @types/<name> should be installed as well.
    \t */
    \tinstallTypes: boolean;
    }

    /**
     * Describes the result of npm install command.
     */
    interface INpmInstallResult {
    \t/**
    \t * The result of installing a single dependency.
    \t */
    \tresult?: INpmInstallDependencyResult,

    \t/**
    \t * The error that occurred during the operation.
    \t */
    \terror?: Error;
    }
    \n
      \n
    • install(projectDir: string, dependencyToInstall?: INpmDependency): Promise<INpmInstallResult> - Installs everything from package.json or specified dependency.\nIn case there's information which dependency to install, the method will check it and install only this dependency and possibly its @types.
      • \n
    \n

    Sample usage:

    \n
    // Install all dependencies from package.json.
    require(\"mobile-cli-lib\").npmService.install(\"D:\\\\test\\\\project\")
    \t.then(function(result) {
    \t\t\tconsole.log(\"The npm result is: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while installing packages from npm: \", err);
    \t});
    \n

    Sample result will be:

    \n
    {}
    \n
    // Install specific dependency from npm.
    var dependency = {
    \tname: \"lodash\",
    \tversion: \"4.15.0\",
    \tinstallTypes: true
    };

    require(\"mobile-cli-lib\").npmService.install(\"D:\\\\test\\\\project\", dependency)
    \t.then(function(result) {
    \t\t\tconsole.log(\"The npm result is: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while installing packages from npm: \", err);
    \t});
    \n

    Sample result will be:

    \n
    {
    \t\"result\": {
    \t\t\"isInstalled\": true,
    \t\t\"isTypesInstalled\": true
    \t}
    }
    \n
      \n
    • uninstall(projectDir: string, dependency: string): Promise - Uninstalls the dependency and the @types/ devDependency.\nThe method will remove them from package.json and from node_modules dir.
      • \n
    \n

    Sample usage:

    \n
    require(\"mobile-cli-lib\").npmService.uninstall(\"D:\\\\test\\\\project\", \"lodash\")
    \t.then(function() {
    \t\t\tconsole.log(\"The dependency is uninstalled.\");
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while uninstalling packages from npm: \", err);
    \t});
    \n

    Module typeScriptService

    \n
    \n

    Stability: 1 - Could be changed due to some new requirments.

    \n
    \n

    This module is used to transpile TypeScript files.

    \n

    The following types are used:

    \n
    interface ITypeScriptCompilerOptions {
    \t/**
    \t * Specify the codepage to use when opening source files.
    \t */
    \tcodePage?: number;

    \t/**
    \t * Generates corresponding .d.ts file.
    \t */
    \tdeclaration?: boolean;

    \t/**
    \t * Specifies the location where debugger should locate map files instead of generated locations.
    \t */
    \tmapRoot?: string;

    \t/**
    \t * Specify module code generation: 'commonjs' or 'amd'.
    \t */
    \tmodule?: string;

    \t/**
    \t * Warn on expressions and declarations with an implied 'any' type.
    \t */
    \tnoImplicitAny?: boolean;

    \t/**
    \t * Concatenate and emit output to single file.
    \t */
    \toutFile?: string;

    \t/**
    \t * Redirect output structure to the directory.
    \t */
    \toutDir?: string;

    \t/**
    \t * Do not emit comments to output.
    \t */
    \tremoveComments?: boolean;

    \t/**
    \t * Generates corresponding .map file.
    \t */
    \tsourceMap?: boolean;

    \t/**
    \t * Specifies the location where debugger should locate TypeScript files instead of source locations.
    \t */
    \tsourceRoot?: string;

    \t/**
    \t * Specify ECMAScript target version: 'ES3' (default), or 'ES5'.
    \t */
    \ttarget?: string;

    \t/**
    \t * Do not emit outputs if any errors were reported.
    \t */
    \tnoEmitOnError?: boolean;

    \t[key: string]: any;
    }

    /**
     * Describes the options for transpiling TypeScript files.
     */
    interface ITypeScriptTranspileOptions {
    \t/**
    \t * Describes the options in tsconfig.json file.
    \t */
    \tcompilerOptions?: ITypeScriptCompilerOptions;

    \t/**
    \t * The default options which will be used if there is no tsconfig.json file.
    \t */
    \tdefaultCompilerOptions?: ITypeScriptCompilerOptions;

    \t/**
    \t * Path to the default .d.ts files.
    \t */
    \tpathToDefaultDefinitionFiles?: string;
    }
    \n
      \n
    • transpile(projectDir: string, typeScriptFiles?: string[], definitionFiles?: string[], options?: ITypeScriptTranspileOptions): Promise<string> - Transpiles specified files or all files in the project directory.\nIf options are not specified the method will search for tsconfig.json file and get them from it.\nIf there is no tsconfig.json file the method will use default options.\nIf there are no typeScriptFiles all the files in the projectDir will be transpiled.\nThe returned result is the output of the TypeScript compiler.
      • \n
    \n

    Sample usage:

    \n
    // Transpile only 2 files.
    var projectDir = \"D:\\\\test\\\\project\";
    var filesToTranspile = [path.join(projectDir,\"app\",\"components\", \"homeView\", \"homeView.ts\"),
    \t\t\t\t\tpath.join(projectDir,\"app\",\"components\", \"addressView\", \"addressView.ts\")];

    require(\"mobile-cli-lib\").typeScriptService.transpile(projectDir, filesToTranspile)
    \t.then(function(result) {
    \t\t\tconsole.log(\"TypeScript compiler result: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while transpiling files: \", err);
    \t});
    \n

    Sample result if there are no errors will be:

    \n
    \"\"
    \n

    Sample result with errors will be:

    \n
    \"app/components/homeView/homeView.ts(19,1): error TS2304: Cannot find name 'a'.
    app/components/homeView/homeView.ts(20,1): error TS2304: Cannot find name 'b'.\"
    \n
    // Transpile all files in project.
    require(\"mobile-cli-lib\").typeScriptService.transpile(\"D:\\\\test\\\\project\")
    \t.then(function(result) {
    \t\t\tconsole.log(\"TypeScript compiler result: \", result);
    \t}).catch(function(err) {
    \t\t\tconsole.log(\"Error while transpiling files: \", err);
    \t});
    \n

    Technical details

    \n

    Injector

    \n

    Similar to AngularJS, mobile-cli-lib is using $injector to retrive object instances, instantiate types and load modules. Each module must be registered in the $injector, so when another module depends on it, the $injector will create a new instance of the dependency or reuse already created one.

    \n

    How to add new module

    \n
      \n
    • \n

      Add a new file with kebab-case (spinal-case) name. For example when the class that you'll add is called DeviceService, it is good practice to call the file device-service.ts.

      \n
      • \n
    • \n

      Add your class in the file. The class name should be in Pascal case

      \n
      • \n
    \n
    class DeviceService {
    }
    \n
    \n

    NOTE: The reference path at the top must point the the root of the project, where .d.ts file is created by grunt.

    \n
    \n
      \n
    • Register the class in the injector with the name that all other modules will use when they want instance of the DeviceService. The name should be in Camel case:
      • \n
    \n
    class DeviceService {
    }
    $injector.register(\"deviceService\", DeviceService);
    \n
      \n
    • Add the methods you need in your implementation:
      • \n
    \n
    class DeviceService {
    \tpublic listDevices(): void {
    \t\t// implementation is here
    \t}
    }
    $injector.register(\"deviceService\", DeviceService);
    \n
      \n
    • If your class depends on other modules, registered in the $injector, you can access them by adding them as parameters of the constructor:
      • \n
    \n
    class DeviceService {
    \tconstructor(private $fs: IFileSystem) { }
    }
    $injector.register(\"deviceService\", DeviceService);
    \n
    \n

    NOTE: In case you do not place access modifier (private, protected or public, you'll be able to use the dependant module only in the constructor.

    \n
    \n
    \n

    NOTE: The name of the module must be exactly the same as the one used for registering in the $injector, in this case this is fs module. The preceding dollar symbol $ is mandatory.\nNow you can access fs methods by using this.$fs.<method>.

    \n
    \n
      \n
    • The last step is to add your module to bootstrap.ts:
      • \n
    \n
    $injector.require(\"deviceService\", \"./device-service\");
    \n

    This line tells the $injector to look for module called "deviceService" in a file device-service located at the root of the mobile-cli-lib.

    \n
    \n

    NOTE: The name of the module must be the same as the one used in $injector.register call.\n$injector.require will not load the file. It will be loaded by $injector when someone asks for module "deviceService".

    \n
    \n

    How to make a method public

    \n

    In order to expose public API, we use TypeScript decorators and some "magic" in our bootstrapping. When you want to expose method B from class A, you have to do the following:

    \n
      \n
    • In bootstrap.ts make sure to use requirePublic method of the $injector when requiring the file:
      • \n
    \n
    $injector.requirePublic(\"deviceService\", \"./device-service\")
    \n
      \n
    • Add the exported decorator on the method which you want to expose: @decorators.exported('deviceService'), where decorators are imported from the root of the project: import decorators = require("./decorators");
      • \n
    \n
    \n

    IMPORTANT: exported decorator requires one parameter which MUST be the first parameter passed to requirePublic method. This is the name of the module that will be publicly exposed.

    \n
    \n

    After you have executed these two steps, you can start using your publicly available method:

    \n
    var common = require(\"mobile-cli-lib\");
    common.deviceService.listDevices() /* NOTE: here we are not using the class name DeviceService, but the module name - deviceService */
    \t.then(function (a) {
        \tconsole.log(\"After promise had returned.\");
        \treturn a;
    \t})
        .catch(function (err) {
        \tconsole.log(\"Error happened:\");
        \tconsole.log(err);
    \t});
    \n

    Behind the scenes of generating public API

    \n

    requirePublic method of the injector is doing some "magic" in order to support lazy loading, correct dependency resolving and exposing only some of the methods, not the whole power of the common lib.\nWhen you require mobile-cli-lib module, you receive $injector's publicApi - it is the "exported one". requirePublic method defines getter for each module that is passed, for example when you say:

    \n
    \t$injector.requirePublic(\"deviceService\", \"./device-service\")
    \n

    a new property is added to publicApi - deviceService and a getter is added for it. When you try to access this module, require("mobile-cli-lib").deviceService.listDevices(), the getter is called. It resolves the module, by parsing the provided file (./device-service)\nand that's the time when decorators are executed. For each decorated method, a new entry in $injector.publicApi.__modules__ is created. This is not the same method that you've decorated - it's entirely new method, that returns a Promise.\nThe new method will be used in the publicApi, while original implementation will still be used in all other places in the code. The promisified method will call the original one (in a separate Fiber) and will resolve the Promise with the result of the method.

    \n

    Issues

    \n

    Missing dependencies

    \n

    Some of our modules must be added: staticConfig, config, analyticsService, etc.

    \n

    Tests for injector

    \n

    Add more tests for yok and for register decorator.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-ad":{"name":"nativescript-azure-ad","version":"1.0.9","license":"MIT","readme":"

    NativeScript Active Directory Authentication Library Plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"BCH

    \n

    This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app

    \n

    Prerequisites / Requirements

    \n

    Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

    \n

    Installation

    \n
    tns plugin add nativescript-azure-ad
    \n

    Usage (Angular example)

    \n

    Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

    \n
    import { Injectable } from '@angular/core';
    import { AdalContext } from 'nativescript-azure-ad';

    const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
    const clientId: string = '{your-application-id}';
    const resourceId: string = '00000002-0000-0000-c000-000000000000';
    var redirectUri: string
    if (application.ios) {
      redirectUri = '{iOS application redirectUri}';
    } else {
      redirectUri = '{Android application redirectUri}';
    }

    @Injectable()
    export class AdalService {

      public adalContext: AdalContext;

      constructor() {
        this.adalContext = new AdalContext(authority, clientId, resourceId, redirectUri);
      }
    }
    \n

    ...and consume this service in your application!

    \n
    export class AppComponent {

      constructor(private adalService: AdalService) { }

      public login() {
        this.adalService.adalContext.login().then((result) => {
          console.log('Success!');
        })
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    License

    \n

    See LICENSE for details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-observable":{"name":"nativescript-observable","version":"2.0.7","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-observable
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    this is a simple subclass of TNS Observable class which let the observable know when a listener was added or removed.\nVery useful to create native object to listen for native event only when necessary

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@primeboard/nativescript-local-notifications":{"name":"@primeboard/nativescript-local-notifications","version":"5.0.3","license":"MIT","readme":"

    @nativescript/local-notifications

    \n

    \"NPM\n\"Downloads\"

    \n

    The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add @nativescript/local-notifications
    \n

    NativeScript prior to 7:

    \n
    tns plugin add nativescript-local-notifications@4.2.1
    \n

    Setup (since plugin version 3.0.0)

    \n

    Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

    \n

    You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

    \n
    // either
    import { LocalNotifications } from '@nativescript/local-notifications';
    // or (if that doesn't work for you)
    import * as LocalNotifications from '    @nativescript/local-notifications';

    // then use it as:
    LocalNotifications.hasPermission();
    \n

    NativeScript-Angular

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    There's also a simple Angular demo in this repo:

    \n

    NativeScript-Vue

    \n

    There is a Vue demo:

    \n

    Plugin API

    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission), or you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Will be generated if not set.
    titleThe title which is shown in the statusbar. Default not set.
    subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
    bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
    colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
    bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
    groupedMessagesAn array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set
    groupSummaryAn inboxStyle notification summary. Default empty
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundNotification sound. For custom notification sound, copy the file to App_Resources/iOS and App_Resources/Android/src/main/res/raw. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalSet to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
    iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
    silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
    imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
    thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
    ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
    channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
    forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
    priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
    actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
    notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
    \n

    NotificationAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idAn id so you can easily distinguish your actions.
    typeEither button or input.
    titleThe label for type = button.
    launchLaunch the app when the action completes.
    submitLabelThe submit button label for type = input.
    placeholderThe placeholder text for type = input.
    \n
    LocalNotifications.schedule([
    \t{
    \t\tid: 1, // generated id if not set
    \t\ttitle: 'The title',
    \t\tbody: 'Recurs every minute until cancelled',
    \t\tticker: 'The ticker',
    \t\tcolor: new Color('red'),
    \t\tbadge: 1,
    \t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
    \t\tgroupSummary: 'Summary of the grouped messages above', //android only
    \t\tongoing: true, // makes the notification ongoing (Android only)
    \t\ticon: 'res://heart',
    \t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
    \t\tthumbnail: true,
    \t\tinterval: 'minute',
    \t\tchannel: 'My Channel', // default: 'Channel'
    \t\tsound: isAndroid ? 'customsound' : 'customsound.wav',
    \t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
    \t},
    ]).then(
    \t(scheduledIds) => {
    \t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
    \t},
    \t(error) => {
    \t\tconsole.log('scheduling error: ' + error);
    \t}
    );
    \n

    Notification icons (Android)

    \n

    These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

    \n

    silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

    \n

    These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi18 × 18120
    mdpi24 × 24160
    hdpi36 × 36240
    xhdpi48 × 48320
    xxhdpi72 × 72480
    xxxhdpi96 × 96640 approx.
    \n

    Source: Density Qualifier Docs

    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
    LocalNotifications.addOnMessageReceivedCallback((notification) => {
    \tconsole.log('ID: ' + notification.id);
    \tconsole.log('Title: ' + notification.title);
    \tconsole.log('Body: ' + notification.body);
    }).then(() => {
    \tconsole.log('Listener added');
    });
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n
    LocalNotifications.getScheduledIds().then((ids) => {
    \tconsole.log(\"ID's: \" + ids);
    });
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
    LocalNotifications.cancel(5 /* the ID */).then((foundAndCanceled) => {
    \tif (foundAndCanceled) {
    \t\tconsole.log(\"OK, it's gone!\");
    \t} else {
    \t\tconsole.log('No ID 5 was scheduled');
    \t}
    });
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
    LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
    LocalNotifications.requestPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
    LocalNotifications.hasPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-cardview":{"name":"@nstudio/nativescript-cardview","version":"2.0.2","license":"Apache-2.0","readme":"

    @nstudio/nativescript-cardview

    \n

    Material Design CardView component for NativeScript

    \n
    npm install @nstudio/nativescript-cardview
    \n

    NativeScript prior to 7:

    \n
    npm install @nstudio/nativescript-cardview@1.0.0
    \n
    Material Design Card Spec
    \n
    CardView Android Documentation
    \n

    Usage

    \n

    iOS note: Setting a background-color will help if you do not see the card on the page.

    \n

    NativeScript Plain

    \n

    IMPORTANT: Make sure you include xmlns:Card="@nstudio/nativescript-cardview" on the Page element

    \n

    XML

    \n
    <Page xmlns:Card=\"@nstudio/nativescript-cardview\">
       <StackLayout>
          <Card:CardView class=\"cardStyle\" margin=\"10\" elevation=\"40\" radius=\"5\">
               <grid-layout rows=\"200, auto, auto\" columns=\"auto, auto, *\">
                   <image src=\"~/images/batman.jpg\" stretch=\"aspectFill\" colSpan=\"3\" row=\"0\" />
                   <label text=\"Batman wants to be friends?\" class=\"info\" textWrap=\"true\" row=\"1\" colSpan=\"3\" />
                   <button text=\"DECLINE\" tap=\"goAway\" row=\"2\" col=\"0\" />
                   <button text=\"ACCEPT\" row=\"2\" col=\"1\" />
               </grid-layout>
           </Card:CardView>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    .cardStyle {
      background-color: #3489db;
      color: #fff;
    }
    \n
    \n

    NativeScript Angular

    \n
    import { registerElement } from '@nativescript/angular';
    import { CardView } from '@nstudio/nativescript-cardview';
    registerElement('CardView', () => CardView);
    \n
    <CardView class=\"cardStyle\" margin=\"10\" elevation=\"40\" radius=\"1\">
      <GridLayout rows=\"10,30,30,250, auto, auto,10\" columns=\"10,40, *, 30,10\">
        <image
          src=\"res://profile\"
          stretch=\"aspectFit\"
          verticalAlignment=\"stretch\"
          col=\"1\"
          row=\"1\"
          rowSpan=\"2\"
        >    </image>
        <label
          class=\"createdBy text-left\"
          horizontalAlignment=\"left\"
          [text]=\"item.CreatedBy\"
          row=\"1\"
          col=\"2\"
          textWrap=\"true\"
        >    </label>
        <label
          class=\"createdOn text-left\"
          horizontalAlignment=\"left\"
          [text]=\"item.UpdatedDate\"
          row=\"2\"
          col=\"2\"
        >    </label>
        <image
          [src]=\"'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'\"
          stretch=\"aspectFit\"
          colSpan=\"3\"
          col=\"1\"
          row=\"3\"
        >    </image>
        <label
          horizontalAlignment=\"left\"
          [text]=\"item.Title\"
          colSpan=\"3\"
          row=\"4\"
          textWrap=\"true\"
          col=\"1\"
        >    </label>
        <label
          horizontalAlignment=\"left\"
          [text]=\"item.Summary\"
          textWrap=\"true\"
          col=\"1\"
          row=\"5\"
          colSpan=\"3\"
        >    </label>
      </GridLayout>
    </CardView>
    \n
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';
    Vue.registerElement(
      'CardView',
      () => require('@nstudio/nativescript-cardview').CardView
    );
    \n
    <card-view margin=\"10\" elevation=\"40\" radius=\"1\">
      <stack-layout>
        <label text=\"Hello World\"></label>
      </stack-layout>
    </card-view>
    \n
    \n

    Attributes

    \n
      \n
    • radius optional
      • \n
    \n

    An attribute to control the 'border-radius' of the card.

    \n

    Platform specific options

    \n

    Android

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.\nThere can be some performance impact when using a very high elevation value.

    \n
      \n
    • ripple optional
      • \n
    \n

    Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.

    \n

    iOS

    \n
      \n
    • shadowOffsetWidth optional
      • \n
    \n

    An attribute to offset the x position of the shadow behind the card.

    \n
      \n
    • shadowOffsetHeight optional
      • \n
    \n

    An attribute to offset the y position of the shadow behind the card.

    \n
      \n
    • shadowColor optional
      • \n
    \n

    An attribute to set the color of the shadow behind the card.

    \n
      \n
    • shadowOpacity optional
      • \n
    \n

    An attribute to set the opacity of the shadow behind the card.

    \n
      \n
    • shadowRadius optional
      • \n
    \n

    An attribute to set the radius of the shadow (shadow spread) behind the card.

    \n

    The default values are set to:

    \n
    radius = 2;
    shadowOffsetWidth = 0;
    shadowOffsetHeight = 2;
    shadowColor = new Color('#000').ios
    shadowOpacity = 0.4;
    shadowRadius = 1;
    \n

    Sample Screenshots

    \n

    Android

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n

    iOS

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n

    Run Demo

    \n
    git clone https://github.com/nstudio/nativescript-cardview.git

    npm run demo.ios

    // or...

    npm run demo.android
    \n

    Changelog

    \n

    Contributing

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-bottomsheet":{"name":"nativescript-custom-bottomsheet","version":"1.0.6","license":"Apache-2.0","readme":"

    Nativescript Custom Bottomsheet \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Overview

    \n

    Nativescript Custom Bottomsheet is a plugin that enable the show a custom beautiful actionsheet/bottomsheet.

    \n

    \n \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-custom-bottomsheet
    \n

    Usage

    \n

    TypeScript

    \n

    xml

    \n
    ...
        <StackLayout class=\"p-20\">
            <Button text=\"show\" class=\"t-20 text-center c-black\" tap=\"{{ onTap }}\"/>
        </StackLayout>
    ...
    \n

    main-view-model.ts

    \n
    import { Observable } from 'tns-core-modules/data/observable';
    import { CustomBottomsheet, CBSheetOption } from 'nativescript-custom-bottomsheet';

    export class HelloWorldModel extends Observable {
      private customBottomsheet: CustomBottomsheet;

      constructor() {
        super();
        this.customBottomsheet = new CustomBottomsheet();
      }

      public onTap(): void {
        const options: CBSheetOption = {
          icon: 'contact',
          title: 'John Doe',
          items: [{
            icon: 'call',
            title: 'Make a call'
          },
          {
            icon: 'sms',
            title: 'Send a text message'
          },
          {
            icon: 'email',
            title: 'Send an email'
          },
          {
            icon: 'comments',
            title: 'Leave a comment'
          },
          {
            icon: 'delete',
            title: 'Delete contact'
          }
          ],
          onItemTap: (index, item) => {
            console.log('index', index);
          },
          cancelButtonText: 'Cancel'
        };

        this.customBottomsheet.show(options);
      }
    }
    \n

    Angular

    \n

    your.component.html

    \n
    <GridLayout class=\"page\">
        <StackLayout class=\"p-20\">
            <Button text=\"show\" class=\"t-20 text-center c-black\" (tap)=\"onTap()\"></Button>
        </StackLayout>
    </GridLayout>
    \n

    your.component.ts

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-custom-bottomsheet';

    @Component({
        ...
    })
    export class YourComponent implements OnInit {
        private customBottomsheet: CustomBottomsheet;

        constructor() {
            this.customBottomsheet = new CustomBottomsheet();
        }

        ngOnInit(): void {
            ...
        } 
        
        public onTap(): void {
            const options: CBSheetOption = {
                icon: 'contact',
                title: 'John Doe',
                items: [{
                    icon: 'call',
                    title: 'Make a call'
                },
                {
                    icon: 'sms',
                    title: 'Send a text message'
                },
                {
                    icon: 'email',
                    title: 'Send an email'
                },
                {
                    icon: 'comments',
                    title: 'Leave a comment'
                },
                {
                    icon: 'delete',
                    title: 'Delete contact'
                }
                ],
                onItemTap: (index, item) => {
                    console.log('index', index);
                }
                cancelButtonText: 'Cancel'
            };

            this.customBottomsheet.show(options);
        }
    }
    \n

    Vue

    \n

    app.js

    \n

    your-component.vue

    \n
    <template>
      <Page class=\"page\">
        ...

        <GridLayout>
          <StackLayout class=\"p-20\">
            <Button text=\"show\" class=\"t-20 text-center c-black\" @tap=\"onTap\"></Button>
          </StackLayout>
        </GridLayout>
      </Page>
    </template>

    <script>
    import {
      CustomBottomsheet
    } from \"nativescript-custom-bottomsheet\";

    const customBottomsheet = new CustomBottomsheet();

    export default {
      methods: {
        onTap() {
          const options = {
            icon: \"contact\",
            title: \"John Doe\",
            items: [
              {
                icon: \"call\",
                title: \"Make a call\"
              },
              {
                icon: \"sms\",
                title: \"Send a text message\"
              },
              {
                icon: \"email\",
                title: \"Send an email\"
              },
              {
                icon: \"comments\",
                title: \"Leave a comment\"
              },
              {
                icon: \"delete\",
                title: \"Delete contact\"
              }
            ],
            onItemTap: (index, item) => {
              console.log(\"index\", index);
            },
            cancelButtonText: 'Cancel'
          };

          this.customBottomsheet.show(options);
        }
      }
    };
    </script>
    \n

    API

    \n

    CustomBottomsheet

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    show(options: CBSheetOption)VoidShow Bottomsheet\"android\" \"apple\"
    \n

    CBSheetOption

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    iconstringSet Bottomsheet header icon\"android\" \"apple\"
    titlestringSet Bottomsheet header title\"android\" \"apple\"
    itemsArray<CBSheetItem>Set Bottomsheet item's icon and title\"android\" \"apple\"
    onItemTapCallback FunctionCall when an item is clicked and pass the index of the clicked item and it's properties e.g. icon and title\"android\" \"apple\"
    cancelButtonTextstringSet the cancel button text on iOS\"apple\"
    \n

    CBSheetItem

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    iconstringSet Bottomsheet item icon\"android\" \"apple\"
    titlestringSet Bottomsheet item title\"android\" \"apple\"
    \n

    Limitations

    \n

    iOS

    \n

    Currently on ios adding more than four tabs will ressort having your text animations cut.

    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ui-charts":{"name":"@nativescript/ui-charts","version":"0.4.0","license":"Apache-2.0","readme":"

    @nativescript/ui-charts

    \n

    Highcharts SDK for NativeScript

    \n

    Usage

    \n
    npm install @nativescript/ui-charts
    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn apps/demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to apps/demo/src/chart-demos for different chart types.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:ui=\"@nativescript/ui-charts\">
      <GridLayout>
        <ui:UIChartsView options=\"{{ chartOptions }}\" />
      </GridLayout>
    </Page>
    \n

    The chartOptions is a HICharts options object,\nrefer to https://www.highcharts.com/demo/ for inspiration, and also checkout https://api.highcharts.com/highcharts/ for API reference

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sidedrawer":{"name":"nativescript-sidedrawer","version":"1.0.6","license":"MIT","readme":"

    NativeScript-SideDrawer

    \n

    A Nativescript plugin that allows developers to simply integrate the infamous side drawer pattern.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Features

    \n
      \n
    • Smooth animations
      • \n
    • Pull from side of screen
      • \n
    • Rebound/bounce back open
      • \n
    • Tap off drawer to close
      • \n
    • Follows both Material and Human Interface guidelines
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-sidedrawer
    \n

    Example

    \n

    Import the plugin.

    \n
    import { TnsSideDrawer } from 'nativescript-sidedrawer'
    \n

    Build the drawer with TnsSideDrawer.build passing config options.

    \n
    TnsSideDrawer.build({
    \ttemplates: [{
    \t\ttitle: 'Home',
    \t\tandroidIcon: 'ic_home_white_24dp',
    \t\tiosIcon: 'ic_home_white',
    \t}, {
    \t\ttitle: 'Judgment Day',
    \t\tandroidIcon: 'ic_gavel_white_24dp',
    \t\tiosIcon: 'ic_gavel_white',
    \t}, {
    \t\ttitle: 'Bank Roll',
    \t\tandroidIcon: 'ic_account_balance_white_24dp',
    \t\tiosIcon: 'ic_account_balance_white',
    \t}, {
    \t\ttitle: 'Fix Stuff',
    \t\tandroidIcon: 'ic_build_white_24dp',
    \t\tiosIcon: 'ic_build_white',
    \t}, {
    \t\ttitle: 'This Is Me',
    \t\tandroidIcon: 'ic_account_circle_white_24dp',
    \t\tiosIcon: 'ic_account_circle_white',
    \t}],
    \ttitle: 'This App Name',
    \tsubtitle: 'is just as awesome as this subtitle!',
    \tlistener: (index) => {
    \t\tthis.i = index
    \t},
    \tcontext: this,
    })
    \n

    Toggle the side drawer with TnsSideDrawer.toggle.

    \n
    TnsSideDrawer.toggle()
    \n

    Configuration

    \n

    Drawer

    \n
    TnsSideDrawerOptions {
    \ttemplates: Array<TnsSideDrawerItem> // see below
    \ttextColor?: Color // color of all text including title, subtitle, and items
    \theaderBackgroundColor?: Color
    \tbackgroundColor?: Color // background color under the header
    \tlogoImage?: ImageSource // defaults to your app icon
    \ttitle?: string // large text in the header
    \tsubtitle?: string // small text in the header
    \tlistener: TnsSideDrawerOptionsListener // see below
    \tcontext?: any // see below
    }
    \n

    Templates

    \n

    Template icons MUST be a resource string.

    \n
    TnsSideDrawerItem {
    \ttitle: string
    \tandroidIcon?: string
    \tiosIcon?: string
    }
    \n

    Listener

    \n

    The listener function ONLY gets called everytime a drawer item is successfully tapped.

    \n
    type TnsSideDrawerOptionsListener = (index: number) => void
    \n

    You can optionally pass a this context to the context option.

    \n

    iOS Quirks

    \n

    Because you can drag the edge of your screen to go back,

    \n

    \"back\"

    \n

    you'll need to manually add and remove the gesture recognition by calling their methods and passing the Page instance.

    \n

    Let's say this is your home page.

    \n
    export function onLoaded(args: EventData) {
    \tlet page: Page = <Page>args.object
    \tTnsSideDrawer.addGesture(page)
    }
    export function onUnloaded(args: EventData) {
    \tlet page: Page = <Page>args.object
    \tTnsSideDrawer.removeGesture(page)
    }
    \n

    Android Quirks

    \n

    None.

    \n

    Thanks to

    \n

    mikepenz for the Android MaterialDrawer implementation.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-videoplayer":{"name":"@gavant/nativescript-videoplayer","version":"4.2.8","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gif":{"name":"nativescript-gif","version":"5.0.0","license":"MIT","readme":"

    README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-ssi":{"name":"nativescript-audio-ssi","version":"4.0.6","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Audio

    \n

    NativeScript plugin to play and record audio files for Android and iOS.

    \n

    This forks from Brad Martin's plugin. It fixes an issue in ios when dispose is called before init from url completes.

    \n

    Uses the following native classes:

    \n

    Android

    \n\n

    iOS

    \n\n

    Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Installation

    \n

    The plugin is compatible with both Nativescript 3.x and 2.x versions. Install with:

    \n

    tns plugin add nativescript-audio

    \n

    Sample Screen

    \n

    \"AudioExample\"

    \n

    Sample Usage

    \n

    Just a simple example of how you could reuse player instances for a given file:

    \n
    import { TNSPlayer } from 'nativescript-audio';

    export class YourClass {
    \tprivate _player: TNSPlayer;
    \t
    \tconstructor() {
    \t\tthis._player = new TNSPlayer();
    \t\tthis._player.initFromFile({
    \t\t\taudioFile: '~/audio/song.mp3', // ~ = app directory
    \t\t\tloop: false,
    \t\t\tcompleteCallback: this._trackComplete.bind(this),
    \t\t\terrorCallback: this._trackError.bind(this)
    \t\t}).then(() => {

    \t\t\tthis._player.getAudioTrackDuration().then((duration) => {
    \t\t\t\t// iOS: duration is in seconds
    \t\t\t\t// Android: duration is in milliseconds
    \t\t\t\tconsole.log(`song duration:`, duration);
    \t\t\t});
    \t\t});
    \t}

    \tpublic togglePlay() {
    \t\tif (this._player.isAudioPlaying())     {
    \t\t\tthis._player.pause();
    \t\t} else {
    \t\t\tthis._player.play();
    \t\t}
    \t}

    \tprivate _trackComplete(args: any) {
    \t\tconsole.log('reference back to player:', args.player);

    \t\t// iOS only: flag indicating if completed succesfully
    \t\tconsole.log('whether song play completed successfully:', args.flag);
    \t}

    \tprivate _trackError(args: any) {
    \t\tconsole.log('reference back to player:', args.player);
    \t\tconsole.log('the error:', args.error);

    \t\t// Android only: extra detail on error
    \t\tconsole.log('extra info on the error:', args.extra);
    \t}
    }
    \n

    And a simple javascript example:

    \n
    var audio = require(\"nativescript-audio\");

    var player = new audio.TNSPlayer();
    var playerOptions = {
        audioFile: \"http://some/audio/file.mp3\",
        loop: false,
        completeCallback: function () {
            console.log('finished playing')
        },
        errorCallback: function (errorObject) {
            console.log(JSON.stringify(errorObject));
        },
        infoCallback: function (args) {
            console.log(JSON.stringify(args));
        }
    };

    player.playFromUrl(playerOptions)
        .then(function (res) {
            console.log(res);
        })
        .catch(function () {
            console.log(\"something went wrong...\");
        })
    \n

    API

    \n

    TNSRecorder

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): booleanDetermine if ready to record.
    start(options: AudioRecorderOptions): PromiseStart recording file.
    stop(): voidStop recording.
    pause(): Promise<any>Pause recording
    resume(): Promise<any>Resume recording.
    dispose(): voidFree up system resources when done with recorder.
    \n

    TNSPlayer

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseInitialize player instance with a file without auto-playing.
    playFromFile( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseAuto-play from a file.
    initFromUrl( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl( { audioFile: string, loop: boolean, completeCallback?: Function, errorCallback?: Function, infoCallback?: Function; } ): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position.
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>duration of media file assigned to mediaPlayer.
    currentTime: numberGet the current time in the media file's duration.
    volume: voidGet/Set the player volume. Value range from 0 to 1.
    \n

    You can access the underlying native class instance via ios and android getters on the respective platforms which will return you:

    \n
      \n
    • AVAudioPlayer on iOS
      • \n
    • MediaPlayer on Android
      • \n
    \n

    Platform specific:

    \n

    iOS:

    \n

    playAtTime(time: number): Play at a specific time.

    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@afa-ag/nativescript-webview-interface":{"name":"@afa-ag/nativescript-webview-interface","version":"1.4.5","license":{"type":"MIT","url":"https://github.com/alexander-mai/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    Nativescript-WebView-Interface

    \n

    Nativescript Plugin for bi-directional communication between WebView and Android/iOS

    \n

    Installation

    \n

    From the terminal, go to your app's root folder and execute:

    \n
    tns plugin add nativescript-webview-interface
    \n

    Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

    \n
    cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
    \n

    Usage

    \n

    For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

    \n

    Inside Native App

    \n

    Insert a web-view somewhere in your page.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    ....
    <web-view id=\"webView\"></web-view>
    ....
    </Page>
    \n

    Initialize WebViewInterface Plugin in your javascript file.

    \n
    var webViewInterfaceModule = require('nativescript-webview-interface');
    var oWebViewInterface;

    function pageLoaded(args){
        page = args.object;
        setupWebViewInterface(page) 
    }

    // Initializes plugin with a webView
    function setupWebViewInterface(page){
        var webView = page.getViewById('webView');
        oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
    }
    \n

    Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

    \n

    Use any API Method of WebViewInterface Class

    \n
    function handleEventFromWebView(){
        oWebViewInterface.on('anyEvent', function(eventData){
            // perform action on event
        });
    }

    function emitEventToWebView(){
        oWebViewInterface.emit('anyEvent', eventData);
    }

    function callJSFunction(){
        oWebViewInterface.callJSFunction('functionName', args, function(result){
            
        });
    }
    \n

    If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

    \n
    webView.on('loadFinished', (args) => {
        if (!args.error) {
            // emit event to webView or call JS function of webView
        }
    });
    \n

    Inside WebView

    \n

    Import nativescript-webview-interface.js in your html page.

    \n
    <html>
        <head></head>
        <body>
            <script src=\"path/to/nativescript-webview-interface.js\"></script>
            <script src=\"path/to/your-custom-script.js\"></script>        
        </body>
    </html>
    \n

    Use any API Method of window.nsWebViewInterface inside webview

    \n
    var oWebViewInterface = window.nsWebViewInterface;

    // register listener for any event from native app
    oWebViewInterface.on('anyEvent', function(eventData){
        
    });

    // emit event to native app
    oWebViewInterface.emit('anyEvent', eventData);

    // function which can be called by native app
    window.functionCalledByNative = function(arg1, arg2){
        // do any processing
        return dataOrPromise;
    }
    \n

    API

    \n

    Native App API

    \n

    Constructor:

    \n

    WebViewInterface(webView: WebView, src?: string)

    \n

    webView is an instance of nativescript web-view.

    \n

    src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

    \n

    API Methods of WebViewInterface Class:

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emitted from webView.

    \n

    Callback will be executed with the data sent from webView in any format.

    \n

    off(eventOrCmdName: string, callback?: (eventData: any) => void): void

    \n

    Use this method to de-register listener of any event/command emitted from webView.

    \n

    If callback is not set, all the event listeners for this event will be de-registered.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from native app to webView with data in any format.

    \n

    callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

    \n

    Use this method to call to any javascript function in global scope in webView.

    \n

    Arguments are optional. But if supplied, must be in array format.

    \n

    If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
    \nIf the function execution generates any error, the errorHandler will be called with the error.

    \n

    destroy(): void

    \n

    Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

    \n

    WebView API

    \n

    API Methods available in window.nsWebViewInterface global variable.

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emited from native app.

    \n

    Callback will be executed with the data sent from native app in any format.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from webView to native app with data in any format.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/solid-js":{"name":"@nativescript-community/solid-js","version":"0.0.4-alpha.5","license":"MIT","readme":"

    NativeScript SolidJS

    \n

    Custom render and patches for SolidJS to work with DOMiNATIVE on NativeScript

    \n

    Playground

    \n
    \n

    Installation

    \n

    Via npm:

    \n
    npm install @nativescript-community/solid-js dominative undom-ng solid-js
    \n

    Note: dominative, undom-ng, solid-js are peer dependencies, you have to install them manually. As the benefit for using peer dependencies, you'll be able to upgrade these dependencies directly from upstream, no need to wait for an update with @nativescript-community/solid-js

    \n
    \n

    Usage

    \n
    import { Application } from \"@nativescript/core\"
    import { render } from \"@nativescript-community/solid-js\"
    import { createSignal } from \"solid-js\"

    const App = () => {
    \tconst [count, setCount] = createSignal(0)
    \tconst increment = () => {
    \t\tsetCount(c => c + 1)
    \t}
    \treturn <>
    \t<actionbar title=\"Hello, SolidJS!\"></actionbar>
    \t<stacklayout>
    \t\t<label>You have taapped {count()} time(s)</label>
    \t\t<button class=\"-primary\" on:tap={increment}>Tap me!</button>
    \t</stacklayout>
    \t</>
    }

    const create = () => {
    \trender(App, document.body)
    \treturn document
    }

    Application.run({ create })
    \n
    \n

    Caveats

    \n

    Event handling

    \n

    Use on:raw-EventName and oncapture:RawEvent-Name to register event handlers instead of on___. It may be a little annoying, but NativeScript uses case sensitive event names and don't have native event bubbling, which means delegation couldn't function.

    \n

    To enable capture and bubble phase of an event, please refer to this doc

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-colors":{"name":"nativescript-image-colors","version":"1.1.0","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-image-colors/blob/master/LICENSE"},"readme":"

    NativeScript Image Colors

    \n

    \"npm\"\n\"npm\"

    \n

    \"NativeScript

    \n

    Example

    \n
    import { ImageColors  } from 'nativescript-image-colors';



    let image = page.getViewById<Image>(`image`);
    colors = ImageColors.getColorPalette(image);

    colors.color1;
    colors.color2;
    colors.color3;
    \n

    Usage

    \n

    returns a ColorPalette that has 3 color properties color1, color2, and color3. the Color Palette also contains a AndroidPalette and IosPalette object properties. The AndroidPalette has properties that correspond with https://developer.android.com/reference/android/support/v7/graphics/Palette.html. The IosPalette object corresponds with the SLColorArt object from the https://cocoapods.org/?q=ColorArt object. ColorPalette is a composite of these two so you don't have to do null and platform checks. please note the colors will not be consistent between platforms since the algorithms used are different.

    \n

    Libraries used:

    \n

    Android: https://developer.android.com/reference/android/support/v7/graphics/Palette.html\niOS: https://github.com/panicinc/ColorArt

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@muse.js/nativescript":{"name":"@muse.js/nativescript","version":"0.0.3","license":"MIT","readme":"

    nativescript

    \n

    This library was generated with Nx.

    \n

    Running unit tests

    \n

    Run nx test nativescript to execute the unit tests via Jest.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-cli":{"name":"@tremho/jove-cli","version":"0.7.0-pre-release.67","license":"UNLICENSED","readme":"

    Jove-cli

    \n

    Command-line tools for Jove development\n(formerly Thunderbolt)

    \n

    install under --save-dev

    \n

    project\nwiki

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-speech-recognition":{"name":"nativescript-speech-recognition","version":"2.0.0","license":"MIT","readme":"

    NativeScript Speech Recognition

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    This is the plugin demo in action..

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ..while recognizing Dutch 🇳🇱.. after recognizing American-English 🇺🇸
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add nativescript-speech-recognition
    \n

    NativeScript < 7:

    \n
    tns plugin add nativescript-speech-recognition@1.5.0
    \n

    Testing

    \n

    You'll need to test this on a real device as a Simulator/Emulator doesn't have speech recognition capabilities.

    \n

    API

    \n

    available

    \n

    Depending on the OS version a speech engine may not be available.

    \n

    JavaScript

    \n
    // require the plugin
    var SpeechRecognition = require(\"nativescript-speech-recognition\").SpeechRecognition;

    // instantiate the plugin
    var speechRecognition = new SpeechRecognition();

    speechRecognition.available().then(
      function(available) {
        console.log(available ? \"YES!\" : \"NO\");
      }
    );
    \n

    TypeScript

    \n
    // import the plugin
    import { SpeechRecognition } from \"nativescript-speech-recognition\";

    class SomeClass {
      private speechRecognition = new SpeechRecognition();
      
      public checkAvailability(): void {
        this.speechRecognition.available().then(
          (available: boolean) => console.log(available ? \"YES!\" : \"NO\"),
          (err: string) => console.log(err)
        );
      }
    }
    \n

    requestPermission

    \n

    You can either let startListening handle permissions when needed, but if you want to have more control\nover when the permission popups are shown, you can use this function:

    \n
    this.speechRecognition.requestPermission().then((granted: boolean) => {
      console.log(\"Granted? \" + granted);
    });
    \n

    startListening

    \n

    On iOS this will trigger two prompts:

    \n

    The first prompt requests to allow Apple to analyze the voice input. The user will see a consent screen which you can extend with your own message by adding a fragment like this to app/App_Resources/iOS/Info.plist:

    \n
    <key>NSSpeechRecognitionUsageDescription</key>
    <string>My custom recognition usage description. Overriding the default empty one in the plugin.</string>
    \n

    The second prompt requests access to the microphone:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>My custom microphone usage description. Overriding the default empty one in the plugin.</string>
    \n

    TypeScript

    \n
    // import the options
    import { SpeechRecognitionTranscription } from \"nativescript-speech-recognition\";

    this.speechRecognition.startListening(
      {
        // optional, uses the device locale by default
        locale: \"en-US\",
        // set to true to get results back continuously
        returnPartialResults: true,
        // this callback will be invoked repeatedly during recognition
        onResult: (transcription: SpeechRecognitionTranscription) => {
          console.log(`User said: ${transcription.text}`);
          console.log(`User finished?: ${transcription.finished}`);
        },
        onError: (error: string | number) => {
          // because of the way iOS and Android differ, this is either:
          // - iOS: A 'string', describing the issue. 
          // - Android: A 'number', referencing an 'ERROR_*' constant from https://developer.android.com/reference/android/speech/SpeechRecognizer.
          //            If that code is either 6 or 7 you may want to restart listening.
        }
      }
    ).then(
      (started: boolean) => { console.log(`started listening`) },
      (errorMessage: string) => { console.log(`Error: ${errorMessage}`); }
    ).catch((error: string | number) => {
      // same as the 'onError' handler, but this may not return if the error occurs after listening has successfully started (because that resolves the promise,
      // hence the' onError' handler was created.
    });
    \n
    Angular tip
    \n

    If you're using this plugin in Angular, then note that the onResult callback is not part of Angular's lifecycle.\nSo either update the UI in an ngZone as shown here,\nor use ChangeDetectorRef as shown here.

    \n

    stopListening

    \n

    TypeScript

    \n
    this.speechRecognition.stopListening().then(
      () => { console.log(`stopped listening`) },
      (errorMessage: string) => { console.log(`Stop error: ${errorMessage}`); }
    );
    \n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    Angular video tutorial

    \n

    Rather watch a video? Check out this tutorial on YouTube.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-testfairy":{"name":"nativescript-testfairy","version":"2.59.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cfalert-dialog":{"name":"nativescript-cfalert-dialog","version":"1.0.16","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-platform-declarations":{"name":"tns-platform-declarations","version":"6.5.15","license":"Apache-2.0","readme":"

    This plugin contains type information about the native platforms as exposed by the NativeScript framework.

    \n

    Offically supported entry points:

    \n
      \n
    • android.d.ts - For android SDK and runtime types.
      • \n
    • ios.d.ts - For iOS SDK and runtime types.
      • \n
    \n

    Using the declarations may conflict with DOM typings,\nconsider using TypeScript 2.x.x and the following settings in your tsconfig.json:

    \n
    {
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"lib\": [
                \"es6\",
                \"dom\"
            ]
        }
    }
    \n

    Create reference.d.tsand add the following content:

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
    /// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
    \n

    By default the android.d.ts file contains the typings for android API level 17. If your application has a higher minimum API level you can reference that level instead:

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/android-24.d.ts\" />
    \n

    d.ts files require a lot of memory and CPU. Consider adding skipLibCheck option to tsconfig file.

    \n

    Generate android .d.ts files

    \n
      \n
    • To generate android dependencies use android-dts-generator with the appropriate android version and androidx jars
      • \n
    • To regenerate android-*.d.ts file use the android-dts-generator passing the corresponding android jar (described here)
      • \n
    \n

    Generate new Android platform typings

    \n

    The easiest way is to use the makefile in the android-dts-generator repo.

    \n

    Open the makefile and check whether it already contains the command entry for the Android platform version you'd like to generate typings for. If it does not exist, add it. For example for api level 29 you need to add the following:

    \n
    android-platform-29:
            java -jar dts-generator/build/libs/dts-generator.jar -input ${ANDROID_HOME}/platforms/android-29/android.jar
            mv out/android.d.ts out/android-platform-29.d.ts
    \n

    Again in the makefile update the android-platform-all command like this:

    \n
    android-platform-all: android-platform-17 android-platform-18 android-platform-19 android-platform-20 android-platform-21 \\
            android-platform-22 android-platform-23 android-platform-24 android-platform-25 android-platform-26 android-platform-27 \\
            android-platform-28 android-platform-29
    \n

    Now execute from command line the following:

    \n
    make android-platform-29
    \n

    Copy the output from out/android-platform-29.d.ts to tns-platform-declarations/android folder in this repo.\nAgain in NativeScript repo create a new platform d.ts file in tns-platform-declarations folder by copying and updating an existing d.ts. For example as we are generating typings for api level 29 copy tns-platform-declarations/android-28.d.ts, rename it to tns-platform-declarations/android-29.d.ts and update its file contents like this:

    \n
    /// <reference path=\"./android/android-platform-29.d.ts\" />
    /// <reference path=\"./android/androidx-28.d.ts\" />
    /// <reference path=\"./android/common.d.ts\" />
    \n

    NOTE that at this point we did not update the androidx reference above. To avoid having androidx typings for every different API level we try to reuse androidx typings built with an older API level for a range of Android versions (e.g. androidx 26 typings can be used for both api levels 26 and 27). Now we need to check whether the new platform typings can use the existing androidx d.ts, or we need to generate new ones.

    \n

    In tns-platform-declarations folder in main NativeScript repo execute the following:

    \n
    # not mandatory, just to verify that the existing setup was ok (should complete without errors)
    tsc android-28.d.ts

    # this is the actual check for the new platform typings
    tsc android-29.d.ts
    \n

    If tsc command completed without errors, you are good to go; otherwise you need to generate the androidx typings with the same android API level super jar (more details here but you can also just follow the section below).

    \n

    Generate Androidx typings for new platform version

    \n

    You can find the Androidx 1.0.0 jars here but we'll demonstrate how to extract the jars from scratch that will be useful for androidx version update. As androidx needs the base android jar file to create its typings you need to pass the android.jar file as a super parameter to the generator.

    \n

    Open makefile in the android-dts-generator repo and the following (as we are generating typings for android api level 29):

    \n
    androidx-29:
    \t\tjava -jar dts-generator/build/libs/dts-generator.jar \\
    \t\t-input dts-generator/jar-files/ -input-generics libs/generics.txt \\
    \t\t-super ${ANDROID_HOME}/platforms/android-29/android.jar -skip-declarations
    \t\tmv out/android.d.ts out/androidx-29.d.ts
    \n

    Again in the makefile update the androidx-all command like this:

    \n
    androidx-all: androidx-17 androidx-23 androidx-26 androidx-28 androidx-29
    \n

    Now we need to extract all androidx jars indts-generator/jar-files folder (follow https://github.com/NativeScript/android-dts-generator#finding-package-dependencies. Note that the necessary androidx dependencies are commented out in the dts-generator/build.gradle file, you just need to temporarily uncomment them:

    \n
    // ...

    dependencies {
    implementation 'org.apache.bcel:bcel:6.2'
    implementation 'commons-io:commons-io:2.6'
    implementation 'com.google.code.findbugs:findbugs:3.0.1'

    // add your dependency here as the example bellow, make sure you are using testCompileOnly
    //AndroidX
    //testCompileOnly \"androidx.legacy:legacy-support-v4:1.0.0\" \t<------ uncomment but do not commit
    //testCompileOnly \"androidx.appcompat:appcompat:1.0.0\" \t\t\t<------ uncomment but do not commit
    //testCompileOnly \"com.google.android.material:material:1.0.0\" \t<------ uncomment but do not commit
    }

    // ...
    \n

    From dts-generator folder execute the following in command line (that will get the needed jars in dts-generator/jar-files folder):

    \n
    ./gradlew extractAllJars
    \n

    Now execute from command line the following:

    \n
    make android-platform-29
    \n

    Copy the output from out/androidx-29.d.ts to tns-platform-declarations/android folder in the main NativeScript repo. Again in main NativeScript repo update the contents of tns-platform-declarations/android-29.d.ts like this:

    \n
    /// <reference path=\"./android/android-platform-29.d.ts\" />
    /// <reference path=\"./android/androidx-29.d.ts\" />
    /// <reference path=\"./android/common.d.ts\" />
    \n

    In tns-platform-declarations folder in main NativeScript repo execute the following:

    \n
    # should complete without errors now
    tsc android-29.d.ts
    \n

    Generate ios .d.ts files

    \n

    The .d.ts files for iOS are generated using iOS Runtime's metadata generator. You can use the typings-gen.sh script like this:

    \n
    ./typings-gen.sh rc [<path-to-medatadata-generator-binary>]
    \n

    Where rc can be an NPM tag/version of tns-ios that will be used for generating the typings. If the metadata generator to be used has not been released in NPM, you can optionally specify its path as a 2nd argument.

    \n
    \n

    Note: Apply this commit on hand, due to a TypeScript error.

    \n
    \n
    \n

    The script expressly deletes the objc!MaterialComponents.d.ts file which distributes along with the tns-core-modules package to avoid plugins clashes.

    \n
    \n
    \n

    However, the metadata generator for iOS includes metadata and typings for the whole SDK and all native libraries in use, including MaterialComponents. Therefore, there are typings which reference types from objc!MaterialComponents.d.ts file and fail on transpilation.

    \n
    \n
    \n

    Currently, remove these by hand to avoid transpilation errors. A proposed Solution is to specify which entries to be generated metadata for and be accessible from JavaScript. These are the feature requests for Android and iOS

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cache":{"name":"nativescript-cache","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-cache/blob/master/LICENSE"},"readme":"

    nativescript-cache

    \n

    nativescript-cache is a persistent caching plugin for NativeScript. Use it to store arbitrary data locally for fast access.

    \n

    Built atop TMCache on iOS, and SharedPreferences on Android.

    \n

    Installation

    \n
    tns plugin add nativescript-cache
    \n

    Usage

    \n

    The cache plugin supports the following methods:

    \n
      \n
    • get(key)
      • \n
    • set(key, value)
      • \n
    • delete(key)
      • \n
    • clear
      • \n
    \n

    Note that the value of the cache entry must be a string. If you want to store complex data, use JSON.stringify before putting the data in the cache, and JSON.parse on the way out.

    \n
    var cache = require(\"nativescript-cache\");

    cache.set(\"key1\", \"val1\");
    cache.get(\"key1\"); // \"val1\"

    cache.delete(\"key1\");
    cache.get(\"key1\"); // undefined

    cache.set(\"key2\", \"val2\");
    cache.set(\"key3\", \"val3\");
    cache.clear();
    cache.get(\"key3\"); // undefined
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-advanced-permissions":{"name":"nativescript-advanced-permissions","version":"1.2.0","license":"Apache-2.0","readme":"

    nativescript-advanced-permissions

    \n

    \"npm

    \n

    \"Build

    \n

    This Plugin is a wrap around Nathanael's nativescript-permissions plugin, while providing IOS Permissions with a matching API.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-advanced-permissions
    \n

    Usage

    \n

    Right now to request the Camera Permissions, we use it like this

    \n
        
        import { hasCameraPermission, requestCameraPermission } from 'nativescript-advanced-permissions/camera';

        // also supports 'nativescript-advanced-permissions/files';
        // also supports 'nativescript-advanced-permissions/calendar';
        // also supports 'nativescript-advanced-permissions/location';


        if( !hasCameraPermission() ) {
            requestCameraPermission().then((hasPermission) => {
                if( hasPermission ) {
                    // do something cool
                } else {
                    // don't do something
                }
            });
        }
    \n

    API

    \n

    this plugin has been split into smaller 'sub-modules', which when use give access to the specified permissions.

    \n

    the sub-modules that we currently include are : files, calendar, location, camera

    \n

    and for each sub-module we follow the same naming convention: requestXPermission/hasXPermission where x is the capitalised sub-module name.

    \n

    Camera Module

    \n

    Usage

    \n
        import { hasCameraPermission, requestCameraPermission } from 'nativescript-advanced-permissions/camera';

        if( !hasCameraPermission() ) {
            requestCameraPermission().then((hasPermission) => {
                if( hasPermission ) {
                    // do something cool
                } else {
                    // don't do something
                }
            });
        }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionReturn TypeDescription
    hasCameraPermission()booleanreturns whether or not the application has the permissions to use the camera
    requestCameraPermission()Promiserequests the user to allow Camera Permissions, returns a truthy promise if they do, and returns falsy if they don't
    \n

    Location Module

    \n

    Usage

    \n
        import { goToAppSettings } from 'nativescript-advanced-permissions/core';
        import { hasLocationPermission, requestLocationPermission, isLocationEnabled } from 'nativescript-advanced-permissions/location';

        if ( isLocationEnabled() ) {

            if( !hasCameraPermission() ) {
                requestCameraPermission().then((hasPermission) => {
                    if( hasPermission ) {
                        // do something cool
                    } else {
                        // don't do something
                    }
                });
            }

        } else {
            // tell the user to enable Location Services.
            alert('Please Enable Location Settings...').then(() => goToAppSettings())    ;
        }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionReturn TypeDescription
    hasLocationPermission()booleanreturns whether or not the application has the permissions to use the Location Services
    requestLocationPermission()Promiserequests the user to allow Location Permissions, returns a truthy promise if they do, and returns falsy if they don't
    isLocationEnabled()booleanreturns whether or not the location services are enabled on device.
    \n

    Calendar Module

    \n

    Usage

    \n
        import { hasCalendarPermission, requestCalendarPermission } from 'nativescript-advanced-permissions/calendar';
            if( !hasCalendarPermission() ) {
                requestCalendarPermission().then((hasPermission) => {
                    if( hasPermission ) {
                        // do something cool
                    } else {
                        // don't do something
                    }
                });
            }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionReturn TypeDescription
    hasCalendarPermission()booleanreturns whether or not the application has the permissions to use the Calendar
    requestCalendarPermission()Promiserequests the user to allow Calendar Permissions, returns a truthy promise if they do, and returns falsy if they don't
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Special Thanks!

    \n

    Thanks to the genius Nathaniel Anderson for the Android Permissions Plugin, which i make use of in this plugin\n Nativescript-Permissions

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collectionview":{"name":"nativescript-collectionview","version":"2.0.36","license":"Apache-2.0","readme":"

    # NativeScript CollectionView widget\n\"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript CollectionView widget. The CollectionView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-collectionview

    \n

    This command automatically installs the necessary files, as well as stores nativescript-collectionview as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      itemLoading
      \nTriggered when generating an item in the CollectionView.

      \n
      • \n
    • \n

      itemTap
      \nTriggered when the user taps on an item in the CollectionView.

      \n
      • \n
    • \n

      loadMoreItems
      \nTriggered when the generated items reached the end of the items property.

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      itemLoadingEvent - String
      \nString value used when hooking to itemLoadingEvent event.

      \n
      • \n
    • \n

      itemTapEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    • \n

      loadMoreItemsEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UICollectionView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v7.widget.RecyclerView
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      itemTemplate - String
      \nGets or sets the item template of the CollectionView.

      \n
      • \n
    • \n

      rowHeight - PercentLength
      \nGets or sets the height for every row in the CollectionView.

      \n
      • \n
    • \n

      colWidth - PercentLength
      \nGets or sets the width for every column in the CollectionView.

      \n
      • \n
    \n

    Instance Methods

    \n
      \n
    • \n

      refresh()
      \nForces the CollectionView to reload all its items.

      \n
      • \n
    • \n

      scrollToIndex(index: number, animated: boolean = true)
      \nScrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:gv="nativescript-collectionview" to your page tag, and then simply use <gv:CollectionView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-collectionview\" loaded=\"pageLoaded\">
      <GridLayout>
        <gv:CollectionView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
          <gv:CollectionView.itemTemplate>
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
              <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
          </gv:CollectionView.itemTemplate>
        </gv:CollectionView>
      </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { CollectionViewItemEventData } from \"nativescript-collectionview\";

    let viewModel: Observable;

    export function pageLoaded(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        for (let loop = 0; loop < 200; loop++) {
            items.push({ value: \"test \" + loop.toString() });
        }
        viewModel = new Observable();
        viewModel.set(\"items\", items);

        page.bindingContext = viewModel;
    }

    export function gridViewItemTap(args: CollectionViewItemEventData) {
        console.log(\"tap index \" + args.index.toString());
    }

    export function gridViewItemLoading(args: CollectionViewItemEventData) {
        console.log(\"item loading \" + args.index.toString());
    }

    export function gridViewLoadMoreItems(args: EventData) {
        console.log(\"load more items\");
    }
    \n

    You can also have multiple templates the same way you add them in the builtin ListView control:

    \n
    <gv:CollectionView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                    colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                    itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
        <gv:CollectionView.itemTemplates>
            <template key=\"odd\">
                <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                    <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>

            <template key=\"even\">
                <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                    <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                    <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>
        </gv:CollectionView.itemTemplates>
    </gv:CollectionView>
    \n
    export function templateSelector(item: any, index: number, items: any) {
        return index % 2 === 0 ? \"even\" : \"odd\";
    }
    \n

    Usage in Angular

    \n

    Import CollectionViewModule in your NgModule:

    \n
    import { CollectionViewModule } from 'nativescript-collectionview/angular';

    @NgModule({
        //......
        imports: [
            //......
            CollectionViewModule,
            //......
        ],
        //......
    })
    \n

    Example Usage

    \n
    // app.module.ts
    import { CollectionViewModule } from \"nativescript-collectionview/angular\";

    @NgModule({
        bootstrap: [
            AppComponent
        ],
        imports: [
            NativeScriptModule,
            AppRoutingModule,
            CollectionViewModule,
        ],
        declarations: [
            AppComponent,
            ItemsComponent,
            ItemDetailComponent
        ],
        providers: [
            ItemService
        ],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class AppModule { }
    \n
    <!-- my.component.html -->
    <GridLayout class=\"page\">
      <CollectionView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
        <ng-template let-item=\"item\" let-odd=\"odd\">
          <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
          </StackLayout>
        </ng-template>
      </CollectionView>
    </GridLayout>
    \n

    If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control. The only difference is that due to current limitations instead of using the nsTemplateKey directive you need to use the cvTemplateKey directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the CollectionView as well)

    \n
    <CollectionView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
        <ng-template cvTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template cvTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>
    </CollectionView>
    \n

    Working with Webpack+Uglify

    \n

    In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The CollectionView widget exports those and you need to add them to the mangle exclude option of the uglifyjs plugin in the webpack.common.js file:

    \n
    var gridViewMangleExcludes = require(\"nativescript-collectionview/uglify-mangle-excludes\").default;
    //......
    module.exports = function (platform, destinationApp) {
        //......
        if (process.env.npm_config_uglify) {
            plugins.push(new webpack.LoaderOptionsPlugin({
                minimize: true
            }));

            //Work around an Android issue by setting compress = false
            var compress = platform !== \"android\";
            plugins.push(new webpack.optimize.UglifyJsPlugin({
                mangle: {
                    except: nsWebpack.uglifyMangleExcludes.concat(gridViewMangleExcludes),
                },
                compress: compress,
            }));
        }
       //......
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-collectionview
    $ cd nativescript-collectionview
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebookrebound":{"name":"nativescript-facebookrebound","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-facebookrebound :basketball:

    \n

    NativeScript plugin to provide access to Facebook's Spring Animations for Android.\nThis is just a simple wrapper to remove some of the complexity of Rebound, if you want to provide more "sugar"\non the native methods in the Rebound library then submit a PR :)

    \n

    FacebookRebound Usage

    \n

    \"FacebookRebound\"

    \n

    Installation

    \n

    npm install nativescript-facebookrebound

    \n

    Usage

    \n

    Typically, you'll want to attach a Spring during the loaded event for your view item

    \n

    XML:

    \n
     <Image tap=\"springThis\" height=\"240\" loaded=\"picLoaded\" src=\"~/images/deadpool2.jpg\" stretch=\"aspectFit\" />
    \n

    JS:

    \n
    var rebound = require(\"nativescript-facebookrebound\");


    function picLoaded (args) {

        // Getting the native android <img src=\"file:///C:\\Users\\Brad\\Source\\Repos\\nativescript-facebookrebound\\screens\\facebookRebound.gif\" />view (android.view.ImageView in this example)
        var view = args.object.android;

        // create a Rebound Spring() ( TENSION, FRICTION ) -- @returns a Spring() if successful
        rebound.createSpring(500, 10).then(function (result) {

            // Now we have a Spring to work with.
            Spring = result;       

            // called whenever the spring is updated
            rebound.onSpringUpdate(function () {
                var mappedValue = com.facebook.rebound.SpringUtil.mapValueFromRangeToRange(Spring.getCurrentValue(), 0, 1, 1, 0.5);
                view.setScaleX(mappedValue);
                view.setScaleY(mappedValue);
            });

            // called whenever the spring leaves its resting state
            rebound.onSpringActivate(function () {
                console.log('setSpringActivate started...');
            });

            // called whenever the spring notifies of displacement state changes
            rebound.onSpringAtEndState(function () {
                console.log('setSpringAtEndState...');
            });

            // called whenever the spring achieves a resting state
            rebound.onSpringAtRest(function () {
                console.log('setSpringAtRest...');
                // Here you could do something like hide a view or trigger more spring if you wanted...
            });

        }, function (err) {
            alert(\"Error in rebound.createSpring(): \" + err);
        });
    }
    exports.picLoaded = picLoaded;


    function springThis(args) {
        // quick boolean to check if we are going up or down
        if (mMovedUp) {
            // setEndValue():  set the rest value to determine the displacement for the spring
            Spring.setEndValue(0);
        } else {
            Spring.setEndValue(1);
        }
        mMovedUp = !mMovedUp;
    }
    exports.springThis = springThis;
    \n

    API

    \n
      \n
    • createSpring(tension: number, friction: damper) Promise...\n
        \n
      • returns - Spring()
        • \n
      \n
      • \n
    \n

    Once you have a Spring returned from createSpring(), you set your callbacks for the listener events:

    \n
      \n
    • onSpringUpdate(function)
      • \n
    • onSpringActivate(function)
      • \n
    • onSpringAtEndState(function)
      • \n
    • onSpringAtRest(function)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@planbook/nativescript-rater":{"name":"@planbook/nativescript-rater","version":"1.0.0","license":"MIT","readme":"

    Nativescript-rater

    \n

    \"npm\"\n\"npm\"\n\"Commitizen

    \n

    Reminds your app's users to review the app through PlayStore or AppStore. Love it, rate it!

    \n

    iOS 10.3 〜

    \n

    \"SwiftRater1\"

    \n

    For iOS 10.3 devices, SwiftRater uses SKStoreReviewController.

    \n

    〜 iOS 10.2

    \n

    \"SwiftRater2\"

    \n

    Android

    \n

    \"Android-Rate\"

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android-RateSwiftRater
    \n

    Requirements

    \n

    iOS iOS 8.0 or later, Xcode 8.2 or later.

    \n

    android API level 9 and up.

    \n

    Installation

    \n
    tns plugin add nativescript-rater
    \n

    Changelog

    \n

    src/CHANGELOG.md

    \n

    Usage

    \n
    import {appRater} from 'nativescript-rater';

    // put init before `application.start`
    // in ng application, you may have to put init before `platformNativeScriptDynamic`
    appRater.init({
    \tshowNeverButton:false,
    \tdebugMode:true
    });

    // check
    appRater.showRateDialogIfMeetsConditions();

    // show directly
    appRater.showRateDialog();
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    iosraw ios control, see below for advance usage
    androidraw android control, the value will be available after app is launched
    init(configs:AppRaterConfigs):voidLet rater know that your app is launched. See configs below
    incrementSignificantUsageCount():voidFor significantUsesUntilPrompt, you need to add incrementSignificantUsageCount. iOS only
    showRateDialogIfMeetsConditions():booleanShow rating dialog if meets conditions. The function will return if dialog is showed.
    showRateDialog():voidShow rating dialog
    \n

    Configs

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    daysUntilPrompt7Shows review request if days days passed since first app launch.
    usesUntilPrompt3Shows review request if users launch more than uses times.
    daysBeforeReminding5Days until reminder popup if the user chooses rate later. valid for ~iOS10.2 and Android
    significantUsesUntilPrompt0Shows review request if user does significant actions more than uses. iOS only
    debugModefalseShows review request every time. Default false. need to set false when you submit your app.
    showLaterButtontrueShow Later button in review request dialong. valid for ~iOS10.2 and Android
    showNeverButtontrueShow Never button in review request dialong. Android only
    \n

    You can also change the value via setter.

    \n
    import {appRater} from 'nativescript-rater';

    appRater
            .setDaysUntilPrompt(7)
            .setUsesUntilPrompt(3)
            .setSignificantUsesUntilPrompt(2)
            .setShowLaterButton(true)
            .setShowNeverButton(true)
            .setDebugMode(true);
    \n

    Custom dialog

    \n

    Android

    \n

    If you want to use your own dialog labels, override string xml resources on your application.

    \n
    <resources>
        <string name=\"rate_dialog_title\">Rate this app</string>
        <string name=\"rate_dialog_message\">If you enjoy playing this app, would you mind taking a moment to rate it? It won\\'t take more than a minute. Thanks for your support!</string>
        <string name=\"rate_dialog_ok\">Rate It Now</string>
        <string name=\"rate_dialog_cancel\">Remind Me Later</string>
        <string name=\"rate_dialog_no\">No, Thanks</string>
    </resources>
    \n

    iOS

    \n

    You can customize text in review request dialog for iOS10.2 or before devices. Set text in following properties.

    \n
    appRater.ios.setAlertTitle('title')
    appRater.ios.setAlertMessage('message')
    appRater.ios.setAlertCancelTitle('cancel')
    appRater.ios.setAlertRateTitle('rate')
    appRater.ios.setAlertRateLaterTitle('later')
    appRater.ios.setAppName('your app name')
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/biometrics":{"name":"@nativescript/biometrics","version":"1.3.1","license":"Apache-2.0","readme":"

    @nativescript/biometrics

    \n
    npm install @nativescript/biometrics
    \n

    Replaces @nativescript/fingerprint-auth

    \n

    This plugin replaces @nativescript/fingerprint-auth

    \n

    API

    \n

    Android Compatibility: API 23+

    \n

    available

    \n

    JavaScript

    \n
    var biometricAuthPlugin = require('@nativescript/biometrics');
    var biometricAuth = new biometricAuthPlugin.BiometricAuth();

    biometricAuth.available().then(function (avail) {
    \tconsole.log('Available? ' + avail);
    });
    \n

    TypeScript

    \n
    import { BiometricAuth, BiometricIDAvailableResult } from \"@nativescript/biometrics\";

    class MyClass {
      private biometricAuth: BiometricAuth;

      constructor() {
        this.biometricAuth = new BiometricAuth();
      }

      this.biometricAuth.available().then((result: BiometricIDAvailableResult) => {
        console.log(`Biometric ID available? ${result.any}`);
        console.log(`Touch? ${result.touch}`);
        console.log(`Face? ${result.face}`);
    \tconsole.log(`Biometrics? ${result.biometrics}`);
      });
    }
    \n

    verifyBiometric

    \n

    Note that on the iOS simulator use Features->Face ID menu items to enroll a face and signal successs/failure to recognize a face.\nverifyBiometric will fail on IOS simulator unless pinfallBack is used.

    \n
    biometricAuth
    \t.verifyBiometric({
    \t\ttitle: 'Android title', // optional title (used only on Android)
    \t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
    \t\tfallbackMessage: 'Enter your PIN', // this will be the text to show for the \"fallback\" button on the biometric prompt
    \t\tpinFallback: true, // allow fall back to pin/password
    \t})
    \t.then((result?: BiometricResult) => {
    \t\tif (result.code === ERROR_CODES.SUCCESS) {
    \t\t\tconsole.log('Biometric ID OK');
    \t\t}
    \t})
    \t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`))    ;
    \n

    Face ID (iOS)

    \n

    iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

    \n

    You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSFaceIDUsageDescription</key>
      <string>For easy authentication with our app.</string>
    \n

    Security++ (iOS)

    \n

    Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

    \n

    So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

    \n
    biometricAuth.available().then((avail) => {
    \tif (!avail) {
    \t\treturn;
    \t}
    \tbiometricAuth.didFingerprintDatabaseChange().then((changed) => {
    \t\tif (changed) {
    \t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
    \t\t} else {
    \t\t\t// call the fingerprint scanner
    \t\t}
    \t});
    });
    \n

    Biometrics and cryptography

    \n

    Normal operation

    \n

    If you do not pass any of the options (pinFallback / keyName) to the verify method then the plugin will create a secure key, call the authorization methods to trigger face/fingerprint and then attempt to use the key to encrypt some text. The idea being that the key will not be accessible unless the user has successfully authenticated.

    \n

    This however is not foolproof and the most secure method is to pass the secret and Keynameoptions to encrypt/decrypt text.

    \n

    Encrypting/Decrypting with Authentication

    \n

    The best practice is to use the options to encrypt some secret that is validated independently, this is more secure because the key used for decryption cannot be accessed without proper authentication, therefor your secret cannot be decrypted properly.

    \n
      \n
    1. \n

      Encrypt your secret

      \n

      Call verifyBiometric with the relevant properties.

      \n
      biometricAuth
      \t.verifyBiometric({
      \t\ttitle: 'Enter your password',
      \t\tmessage: 'Scan yer finger', // optional
      \t\tpinFallback: false, // do not allow pinFallback to enable crypto operations
      \t\tkeyName: 'MySecretKeyName', // The name of the key that will be created/used
      \t\tsecret: 'The Secret I want encrypted',
      \t})
      \t.then((result) => {
      \t\tconst encryptedText = result.encrypted; // The text encrypted with a key named \"MySecretKeyName\" (Android Only)
      \t\tconst IV = result.iv; // the  initialization vector used to encrypt (Android Only)

      \t\t// For IOS the secret is stored in the keycain
      \t})
      \t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`))      ;
      \n

      For Android the encrypted result and vector would then be stored in your app and used the next time the user logged in be calling the verifyBiometric again:

      \n
      2. \n
    2. \n

      Decrypt your secret

      \n
      biometricAuth
      \t.verifyBiometric({
      \t\ttitle: 'Enter your password',
      \t\tmessage: 'Scan yer finger', // optional
      \t\tkeyName: 'MySecretKeyName', // The name of the key that will be created/used
      \t\tpinFallback: false, // do not allow pinFallback to enable crypto operations
      \t\tandroid: {
      \t\t\tdecryptText: 'The encrypted text retrieved previously',
      \t\t\tiv: 'The IV retrieved previously',
      \t\t},
      \t\tios: { fetchSecret: true }, // Tell IOS to fetch the secret
      \t})
      \t.then((result) => {
      \t\tconst decryptedText = result.decrypted; // The unencrypted secret
      \t\tverifyMySecret(decryptedText); // verify the secret by some means, e.g. a call to a back end server.
      \t})
      \t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`))      ;
      \n
      3. \n
    \n

    Fallback to Pin

    \n

    Allowing the user to fallback on lock screen credentials ( pin etc. ) disables cryptography.

    \n

    Also on android for phones running API < 30 only fingerprint is used, because the old fingerprint api is called.

    \n

    e.g.

    \n
    biometricAuth
    \t.verifyBiometric({
    \t\ttitle: 'Enter your password',
    \t\tmessage: 'Scan yer finger', // optional
    \t\tfallbackMessage: 'Enter PIN', // optional
    \t\tpinFallback: true, // do not allow pinFallback to enable crypto operations
    \t\tios: { customFallback: false }, // passing true here will show the fallback message and allow you to handle this in a custom manner.
    \t})
    \t.then((result) => {
    \t\tconsole.log('Fingerprint/ PIN was OK');
    \t})
    \t.catch((err) => this.set('status', `Biometric ID NOT OK: \" + ${JSON.stringify(err)}`))    ;
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-share-file":{"name":"@nativescript-community/ui-share-file","version":"1.3.2","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install @nativescript-community/ui-share-file
    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from '@nativescript-community/ui-share-file';
        import * as fs from '@nativescript/core/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    title: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    title

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-advanced-webview":{"name":"nativescript-android-advanced-webview","version":"1.0.3","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Android Advanced Webview

    \n

    This plugin will allow you to use some of advance feature of Android Webview. This plugin is using following library

    \n

    Android: Android-AdvancedWebView\n

    \n

    Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do for better :)

    \n

    Installation

    \n
    tns plugin add nativescript-android-advanced-webview
    \n

    Usage (Angular)

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"AdvanceWebview\", () => require(\"nativescript-android-advanced-webview\").AndroidAdvancedWebview);

    ngAfterViewInit() {
        let advanceWebview: AndroidAdvancedWebview = this.page.getViewById(\"webview\");

        let optons: AndroidAdvanceWebviewOptions = {
            android: {
                setGeolocationEnabled: false,
                setCookiesEnabled: true,
            }
        }

        advanceWebview.setWebviewOptions(optons);

        advanceWebview.on(\"started\", function (res) {
            console.log(\"started\");
            console.dir(res);
        })
        advanceWebview.on(\"finished\", function (res) {
            console.log(\"finished\");
            console.dir(res);
        })
    }
    \n

    HTML:

    \n
    <AdvanceWebview id=\"webview\" src=\"https://google.com\"></AdvanceWebview>
    \n

    Advance Configuration for WebViewClient or WebChromeClient class. You will need to implement your own customized override methods. You can do almost everything here :). You can install tns-platform-declarations for avoiding typescript error. Please check the demo for more details.

    \n
    advanceWebview.setUpWebViewClient(new MyWebViewTestClient()); //android.webkit.WebViewClient class
    advanceWebview.setUpWebChromeClient(new MyWebChromeClient()); //android.webkit.WebChromeClient
    \n

    Class can be extend like this:

    \n
    export class MyWebViewTestClient extends android.webkit.WebViewClient {

        constructor() {
            super();
            return global.__native(this);
        }
        public onPageStarted(view: android.webkit.WebView, url: string, favicon: android.graphics.Bitmap): void {
            console.log(\"onPageStarted: \" + url);
        }
        public onPageFinished(view: android.webkit.WebView, url: string): void {
            console.log(\"onPageFinished\");
        }
        public onReceivedError(view: android.webkit.WebView, request, error): void {
            console.log(\"onReceivedError\");
        }
    }

    export class MyWebChromeClient extends android.webkit.WebChromeClient {

        constructor() {
            super();
            return global.__native(this);
        }

        public onReceivedTitle(view: android.webkit.WebView, title: string): void {
            console.log(title);
        }

        public onPermissionRequest(request: any): void {
            console.log(\"Permission asked !!\");
            request.grant(request.getResources());
        }
    }
    \n

    API

    \n

    Events: started, finished, error, downloadRequested, externalPageRequest

    \n

    You can get more events by extending WebViewClient or WebChromeClient class like onReceivedTitle, onPermissionRequest (for allowing microphone) etc. This plugin also has some limitations too. You can check the library repository for more details.

    \n
    android?: {
        setGeolocationEnabled?: boolean;
        addHttpHeader?: {
            request: string;
            value: string;
        };
        addPermittedHostname?: string;
        preventCaching?: boolean;
        setThirdPartyCookiesEnabled?: boolean;
        setCookiesEnabled?: boolean;
        setMixedContentAllowed?: boolean;
        setDesktopMode?: boolean;
        loadHtml?: boolean;
    };
    \n

    Details here: https://github.com/delight-im/Android-AdvancedWebView

    \n

    License

    \n

    MIT

    \n

    author: Jibon L. Costa

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-component":{"name":"nativescript-component","version":"1.2.0","license":"MIT","readme":"

    nativescript-component

    \n

    A simple way to create reusable NativeScript components without Angular.

    \n

    Benefits

    \n
      \n
    • Simple API for defining a component and binding properties to it.
      • \n
    • Multiple instances of a single component can be used in a page.
      • \n
    • Each component instance is automatically given its own separate state.
      • \n
    • Automatically binds XML attributes to the component's binding context.
      • \n
    • Parent components can safely pass dependencies to their children, because outer components are initialized before nested ones.
      • \n
    • Automatically binds context properties passed to the component view navigate() and showModal().
      • \n
    • A component instance is automatically disposed upon its view's unloaded event by default.
      • \n
    • A component can instead be defined as a singleton so that a single instance is kept throughout the application's lifetime.
      • \n
    \n

    Installation

    \n
    npm install nativescript-component --save
    \n

    Examples

    \n

    Example 1: sample-groceries app

    \n

    This example takes the canonical sample-groceries app from NativeScript's getting started guide and updates it to use ES 6 and nativescript-component for a component-based design. For reference, you can compare it to the original version.

    \n

    Example 2: Nested components

    \n

    In this example, we'll create a parent component named details-page which uses multiple instances of another component named editable-text to allow a user data record to viewed and edited.

    \n

    Directory structure

    \n
    app
     |
     |-- components
         |
         |-- details-page
         |    |
         |    |-- details-page.xml
         |    |-- details-page.js
         |
         |-- editable-text
              |
              |-- editable-text.xml
              |-- editable-text.js
    \n

    Styles are omitted from this example for simplicity, but it's good practice to group the component's styles in its directory (e.g. details-page/details-page.css and editable-text/editable-text.css). Check out the Nativescript LESS and SASS precompiler plugins for clean styling.

    \n

    details-page.xml

    \n

    The details-page component's template consists of an ActionBar with a single control: a button that for toggling the UI from "view" mode to "edit" mode and vice versa; and a GridLayout listing our fields: first name and last name.

    \n
    <Page navigatingTo=\"onNavigatingTo\" xmlns:e=\"components/editable-text\">

        <Page.actionBar>
            <ActionBar title=\"User Details\">
                <ActionItem text=\"Edit\" ios.position=\"right\" tap=\"edit\" visibility=\"{{ controls.edit, controls.edit ? 'collapsed' : 'visible' }}\"/>
                <ActionItem text=\"Save\" ios.position=\"right\" tap=\"save\" visibility=\"{{ controls.edit, controls.edit ? 'visible' : 'collapsed' }}\"/>
            </ActionBar>
        </Page.actionBar>

        <StackLayout>
            <GridLayout columns=\"*,*\" rows=\"auto,auto\">
                <Label text=\"First Name\" col=\"0\" row=\"0\"/>
                <e:editable-text class=\"name\" record=\"{{ user }}\" fieldName=\"firstName\" controls=\"{{ controls }}\" col=\"1\" row=\"0\"/>

                <Label text=\"Last Name\" col=\"0\" row=\"1\"/>
                <e:editable-text class=\"name\" record=\"{{ user }}\" fieldName=\"lastName\" controls=\"{{ controls }}\" col=\"1\" row=\"1\"/>
            </GridLayout>
        </StackLayout>
    </Page>
    \n
    Things of note:
    \n
      \n
    • \n

      The navigatingTo="onNavigatingTo" attribute hooks up the component's built-in onNavigatingTo() hook, which instantiates the component when the view loads.

      \n
      • \n
    • \n

      The xmlns:e="components/editable-text" attribute defines a namespace "e" for our component so that it can be referenced in the XML as <e:editable-text/>.

      \n
      • \n
    • \n

      In the attribute visibility="{{ controls.edit, controls.edit ? 'collapsed' : 'visible' }}", controls.edit is passed as the first argument to {{ }} in order to instruct NativeScript that the nested edit property is the source that should be observed for the expression following it, rather than the controls object in which it's contained. This requirement is documented in NativeScript's Data Binding documentation.

      \n
      • \n
    \n

    details-page.js

    \n

    For this example, let's assume that another page navigates to our details-page component by invoking navigate() like so:

    \n
    frames.topmost().navigate({
        moduleName: 'components/details-page/details-page',
        context: {
            user: new Observable({ firstName: 'Brendan', lastName: 'Eich' })
        }
    });
    \n

    The details-page component's JavaScript file would then look like so:

    \n
    import { Observable } from 'data/observable';
    import Component from 'nativescript-component';

    class DetailsPage extends Component {

        /**
        * Place initialization code in `init`, which is automatically called
        * after the parent is initialized and before child components are initialized.
        *
        * @override
        */
        init() {
            this.set('controls', new Observable({ edit: false }));
        }

        /**
        * Switches the UI from view mode to edit mode.
        */
        edit() {
            /** @todo: Check if `this.set('controls.edit', true)` correctly sets the nested proeprty and, if not, implement support for that. */
            let options = this.get('controls');
            options.set('edit', true);
        }

        /**
        * Switches the UI from edit mode to view mode.
        */
        save() {
            let options = this.get('controls');
            options.set('edit', false);
        }
    }

    DetailsPage.export(exports);
    \n
    Things of note:
    \n
      \n
    • \n

      The built-in init hook is automatically called after the component's parent (if any) has been initialized. Override this hook to perform any setup using the built-in methods and properties. this.get() and this.set() are used to get and set properties on the component's binding context. Properties set this way can be displayed in the component's template.

      \n
      • \n
    • \n

      Parameters passed to navigate() are automatically bound to the component's binding context, which means the user parameter in our example is accessible in JavaScript via this.get('user') and available in the XML template as {{ user }}.

      \n
      • \n
    • \n

      export() is used to export the class in the format that the NativeScript runtime expects.

      \n
      • \n
    \n

    editable-text.xml

    \n

    The editable-text component can be switched from "view" mode to "edit" mode and vice versa by its parent component (details-page), so its template has a read-only <Label/> that is shown in "view" mode and an editable <TextField/> that is shown in "edit" mode.

    \n
    <StackLayout loaded=\"onLoaded\">
        <Label id=\"label\" visibility=\"{{ controls.edit, controls.edit ? 'collapsed' : 'visible' }}\"/>
        <TextField id=\"input\" visibility=\"{{ controls.edit, controls.edit ? 'visible' : 'collapsed' }}\"/>
    </StackLayout>
    \n

    editable-text.js

    \n

    The editable-text component accepts three parameters from its parent component:

    \n
      \n
    • record - A data record object that contains a property that we want to view and edit
      • \n
    • fieldName - The name of the property in the record object we want to view and edit
      • \n
    • controls - An object with properties that allow the parent component to dynamically control the child. In this example, we just use a single controls.edit property to indicate whether the text field is in edit mode.
      • \n
    \n
    import Component from 'nativescript-component';

    class EditableText extends Component {

        /**
        * @override
        */
        init() {
            // Set up the two-way binding for the data record's specified property.
            // This must be done in JavaScript, because NativeScript's XML binding expressions don't currently support dynamic
            // property names.
            let label = this.view.getViewById('label'),
                input = this.view.getViewById('input'),
                record = this.get('record'),
                fieldName = this.get('fieldName');

            label.bind({
                sourceProperty: fieldName,
                targetProperty: 'text',
                twoWay: true
            }, record);

            input.bind({
                sourceProperty: fieldName,
                targetProperty: 'text',
                twoWay: true
            }, record);
        }
    }

    EditableText.export(exports);
    \n
    Things of note:
    \n
      \n
    • \n

      Parameters passed as XML attributes are automatically set on the component's binding context and are accessible using this.get().

      \n
      • \n
    • \n

      The component's view is accessible as this.view.

      \n
      • \n
    • \n

      Normally it's not necessary to set up bindings manually as shown here in init, but it's needed in this case in order to allow the fieldName property to dynamically specify the name of the property we're interested in.

      \n
      • \n
    \n

    For more information, check out the API docs.

    \n

    Caveats

    \n

    Embedding a component inside a ListView.itemTemplate or Repeater.itemTemplate

    \n
      \n
    • nativescript-component serves this scenario well, because it allows each list item to have its own separate state.
      • \n
    • However, as noted in the sample-groceries app, you must be aware that in this scenario, the list item is automatically set as the component's binding context and, most importantly, is immutable.
      • \n
    • This means that within your list item component, you can't use this.set('foo', foo) to set a new property on its binding context in order to display the property in the template; you must instead set that property before the object is passed to in an array to the ListView items attribute.
      • \n
    • You can still use this.foo = foo to set instance properties on the component, but they won't be available to the component's template.
      • \n
    \n

    Contributing

    \n

    Find an issue or have an idea for a feature? Feel free to submit a PR or open an issue.

    \n

    Building

    \n

    This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

    \n
    npm run build
    \n

    There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

    \n

    Linting

    \n
    npm run lint
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssl-pinning":{"name":"nativescript-ssl-pinning","version":"1.1.15","license":"Apache-2.0","readme":"

    NativeScript-SSL-Pinning

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n

    A drop-in replacement for the default http module.

    \n

    Note: This plugin is inspired by nativescript-ssl-pinning. Most of the code is taken from this.\nI've added angular support and also fixed some long term issues. Huge thanks to the original creator.

    \n

    Some of the fixed issues are as follows

    \n
      \n
    • No support for wild card certificates.
      • \n
    • The nativescript-https module did not handle any error responses (400 - 500).
      • \n
    • Out of the box angular support no need to update previous apps just update the HttpClient module import.
      • \n
    • Added support for multipart forms.
      • \n
    \n

    Features

    \n
      \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP
      • \n
    • HTTP/2 support
      • \n
    \n

    FAQ

    \n
    \n

    What the flip is SSL pinning and all this security mumbo jumbo?

    \n
    \n

    How to make your apps more secure with SSL pinning.

    \n
    \n

    Do I have to use SSL pinning?

    \n
    \n

    No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

    \n

    Demo

    \n
    git clone https://github.com/sai-gmbh/nativescript-ssl-pinning
    cd nativescript-ssl-pinning/src
    npm run demo.ios
    npm run demo.android
    npm run demo-angular.ios
    npm run demo-angular.android
    \n

    Installation

    \n

    Add tns-platform-declarations for Android and iOS to your references.d.ts!

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
    /// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
    \n

    We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

    \n

    Install the plugin:

    \n
    tns plugin add nativescript-ssl-pinning
    \n

    Examples

    \n

    Hitting an API using GET method

    \n
    import { SslPinning } from 'nativescript-ssl-pinning'
    SslPinning.request({
    \turl: 'https://httpbin.org/get',
    \tmethod: 'GET',
    })
    .then((response) => console.log('response', response))
    .catch((error) => console.error('error', error));
    \n

    Angular Support

    \n
    \n

    NativescriptSslPinningHttpClientModule internally overrides Angular's XHRBackend\nto make request through our SSL Plugin and transforms it back to angular responses.\nThis will keep the interceptors functionality intact.

    \n
    \n
    import {NativescriptSslPinningHttpClientModule} from \"nativescript-ssl-pinning/angular\"
    @NgModule({
      imports: [
        // ...
        NativescriptSslPinningHttpClientModule
      ],
      declarations: [
        ExampleComponent,
      ],
      schemas: [
        NO_ERRORS_SCHEMA
      ]
    })
    export class AppModule {
    }

    @Component({...})
    export class ExampleComponent implements OnInit {
      constructor(private http: HttpClient) {}
      
      ngOnInit() {
        this.http.get('https://httpbin.org/status/500').subscribe(res => console.log(res), err => console.log(err));
      }
    }
    \n

    Configuration

    \n

    Installing your SSL certificate

    \n

    Create a folder called assets in your projects app folder like so <project>/app/assets.

    \n

    Enabling SSL pinning

    \n
    import { knownFolders } from 'file-system'
    import { SslPinning } from 'nativescript-ssl-pinning'
    let dir = knownFolders.currentApp().getFolder('assets')
    let certificate = dir.getFile('httpbin.org.cer').path
    SslPinning.enableSSLPinning({ host: 'httpbin.org', certificate })
    \n

    Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

    \n

    Disabling SSL pinning

    \n
    import { SslPinning } from 'nativescript-ssl-pinning'
    SslPinning.disableSSLPinning()
    \n

    All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

    \n

    Options

    \n
    export interface HttpsSSLPinningOptions {
    \thost: string
    \tcertificate: string
    \tallowInvalidCertificates?: boolean
    \tvalidatesDomainName?: boolean
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionDescription
    host: stringThis must be the top level domain name eg httpbin.org.
    certificate: stringThe uri path to your .cer certificate file.
    allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
    validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
    \n

    Webpack / bundling

    \n

    Since you're probably shipping a certificate with your app,\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin

    \n
    new CopyWebpackPlugin([
        { from: { glob: \"fonts/**\" } },
        { from: { glob: \"**/*.jpg\" } },
        { from: { glob: \"**/*.png\" } },
        { from: { glob: \"**/*.cer\" } },  // add this line in webpack.config.js
    ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] })
    \n

    iOS Troubleshooting

    \n
    \n

    Please educate yourself on iOS's App Transport Security before starting beef!

    \n
    \n

    If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n
    \n

    This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

    \n
    \n

    Android troubleshooting

    \n

    If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

    \n

    Current Issues

    \n
      \n
    1. Multipart form requests are not supported by the plugin yet.\nFor Angular users they'll go through Angular's own XHR but for native users it might fail.
      2. \n
    \n

    Thanks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WhoWhy
    Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
    AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
    Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@randock/ui-charts":{"name":"@randock/ui-charts","version":"0.2.4","license":"Apache-2.0","readme":"

    @nativescript/ui-charts \"apple\" \"android\"

    \n\n

    Nativescript wrapper for Highcharts iOS and Android SDKs

    \n\n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add @nativescript/ui-charts
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/demos for different chart types.

    \n

    NativeScript Core

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:uc=\"@nativescript/ui-charts\">      <!-- Don't forget to declare the namespace -->
      <GridLayout>
        <uc:UIChartsView id=\"chartView\" loaded=\"chartViewLoaded\" />
      </GridLayout>
    </Page>
    \n
    export function chartViewLoaded(args) {
      chartView = args.object;
      chartView.setOptions(viewModel.get('chartOptions'));
    }
    \n

    The chartOptions is a HICharts options object,\nrefer to https://www.highcharts.com/demo/ for inspiration, and also checkout https://api.highcharts.com/highcharts/ for API reference

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/notifications":{"name":"@awarns/notifications","version":"1.0.2","license":"Apache-2.0","readme":"

    @awarns/notifications

    \n

    \"npm\n\"npm\"

    \n

    This module allows to deliver notifications to the user when an event occurs. It also defines some primitives (in form of framework records) to hold possible reactions and interactions of the user with the notification.

    \n

    This plugin acts as a wrapper of EddyVerbruggen's NativeScript Local Notifications plugin, adapted to work with the AwarNS Framework task model.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/notifications
    \n

    Usage

    \n

    After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

    \n
      \n
    1. The plugin API. Through it, you'll be able to manage the notifications which have been delivered and the possible reactions to them.
      2. \n
    2. The notification delivery tasks, which allow to locally display notifications to your users using system's services. Users can tap or discard the notifications. The plugin comes with specific records for direct reactions: the NotificationTap and the NotificationDiscard. It also comes with definitions of records for more specific notification tap actions.
      3. \n
    \n

    Setup

    \n

    This plugin requires you to register its loader during the framework initialization, like this:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerNotificationsPlugin } from '@awarns/notifications';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerNotificationsPlugin('App notifications'),
        ]
      )
      // ... handle initialization promise
    \n

    Plugin loader parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    notificationsChannelNameStringRequired by the OS. The channel name to be used for the notifications delivered using the framework, so the user can adjust their priority through the system settings
    \n

    API

    \n

    notificationsManager

    \n

    The notificationsManager singleton object allows to manage reactions to notifications. It offers the following actions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    onNotificationTap(callback: NotificationCallback)Promise<void>Sets a callback in your UI to handle notification taps from the system's tray. If the tap arrives before the callback has been set up, for example, when the app is not running, the tap is cached and will be delivered right after registering the callback
    onNotificationDiscard(callback: NotificationCallback)Promise<void>Sets a callback to receive updates on notifications being discarded from the system's tray
    markAsSeen(id: number)Promise<void>Indicate to the plugin that a notification has been handled / read. It will be removed from the list of pending notifications
    \n

    notifications

    \n

    The notifications singleton object allows to access the notifications that have been delivered but not yet handled / read. It offers the following actions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    list()Observable<Array<Notification>>Allows to observe changes in all the unread notifications. More details on the Notification interface, right after this table. It is recommended to install RxJS, to operate with the output of this method
    get(id: string)Promise<Notification>Allows to retrieve a stored notification by its id
    \n

    Notification

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idnumberThe unique identifier of the notification
    titlestringThe content of notification heading line
    bodystring(Optional) The notification content
    timestampDateThe moment when the notification was delivered
    tapActionTapAction(Optional) Additional metadata, to know how to handle the notification when tapped
    \n

    TapAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    typeTapActionType | stringThe type of action to conduct after the notification tap. See table below, to see some examples
    idstringThe specific id of the action inside its type
    metadataobjectAutomatically populated. Contains the payload (data) of the event that triggered the execution of the task that sent the notification
    \n

    TapActionType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionDescription
    OPEN_APPDefault action, when none is specified. It just opens the app. The notification tap callback does not get invoked when this action type is provided
    OPEN_CONTENTCan be used to indicate that the app must display some content for the user to see it. Check out the related UserReadContent record type
    DELIVER_QUESTIONSCan be used to indicate that the app must deliver some questions for the user to answer. Check out the related QuestionnaireAnswers record type
    ASK_FEEDBACKCan be used to indicate that the app must deliver some quick feedback for the user to answer (single question). Check out the related UserFeedback record type
    ASK_CONFIRMATIONCan be used to indicate that the app must deliver some yes/no confirmation question for the user to answer. Check out the related UserConfirmation record type
    \n

    Tasks

    \n

    Send a notification

    \n
    \n

    Task name: sendNotification

    \n

    Description: Sends a notification with the given information

    \n

    Execution requirements: None

    \n
    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { sendNotificationTask } from '@awarns/notifications';

    export const demoTasks: Array<Task> = [
      sendNotificationTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n
    \n

    This task doesn't produce significant events after it completes its execution, aside from the regular {task-name}Finished event: sendNotificationFinished.

    \n

    However, once it has finished running, relevant events will be emitted by the internal listeners. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('sendNotification', {
        title: 'New content available', // All notifications must contain a title
        body: 'This information may be valuable for you', // The body of the notification can be provided through here 
                                                          // or inside the payload (data) of the event trigger, inside a 
                                                          // property called body
        tapAction: { // (Optional) If not provided, defaults to OPEN_APP
          type: TapActionType.OPEN_CONTENT, // See the rest of the options in the TapActionType enum
          id: 'content-1', // For the app to distingish what content must be displayed after tapping the notification
        },
      })
    );

    on('notificationTapped', run('writeRecords'));
    on('notificationCleared', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Send a random notification among a set of options

    \n
    \n

    Task name: sendRandomNotification

    \n

    Description: Sends a random notification among a given set

    \n

    Execution requirements: None

    \n
    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { sendRandomNotificationTask } from '@awarns/notifications';

    export const demoTasks: Array<Task> = [
      sendRandomNotificationTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n
    \n

    This task doesn't produce significant events after it completes its execution, aside from the regular {task-name}Finished event: sendNotificationFinished.

    \n

    However, once it has finished running, relevant events will be emitted by the internal listeners. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('sendRandomNotification', {
        options: [
          {
            title: 'Would you like to rate the app?', // All notifications must contain a title
            // But the body is optional
          },
          {
            title: 'Do you like the app so far?',
            body: 'Your feedback can make us better', // Unlike the sendNotification task, 
                                                      // the notification body can only be set through here
          },
          {
            title: 'Your opinion is very valuable',
            tapAction: { // (Optional) Including a tap action inside one of the options will override the default one (see below)
              type: TapActionType.ASK_FEEDBACK,
              id: 'special-feedback',
            },
          },
        ],
        defaultTapAction: { // (Optional) Common tap action for all the notification options that don't declare one
              type: TapActionType.ASK_FEEDBACK,
              id: '    regular-feedback',
         },
      })
    );

    on('    notificationTapped', run('writeRecords'));
    on('    notificationCleared', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    notificationTappedNotificationTapRecordEmitted once a notification has been tapped by the user via the system's tray. This event is only emitted if a notification tap callback has been set up
    notificationDiscardedNotificationDiscardRecordEmitted once a notification has been discarded by the user via the system's tray. This event is only emitted if a notification discard callback has been set up
    \n

    Records

    \n

    This plugin includes records which can be classified into two categories: user reactions and user interactions.

    \n
    \nUser reactions\n

    User reactions include the NotificationTapRecord and the NotificationDiscardRecord.

    \n

    NotificationTapRecord

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways notification-tap
    changeChangeAlways none. Notification tap's starts and ends cannot be detected
    timestampDateThe local time when the notification was tapped
    notificationIdnumberThe id of the notification that has been tapped
    tapActionTapActionThe tap action of the notification that has been tapped
    \n

    NotificationDiscardRecord

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways notification-discard
    changeChangeAlways none. Notification discard's starts and ends cannot be detected
    timestampDateThe local time when the notification was discarded
    notificationIdnumberThe id of the notification that has been discarded
    tapActionTapActionThe tap action of the notification that has been discarded
    \n
    \n
    \nUser interactions\n

    User interactions include the UserReadContent, QuestionnaireAnswers, UserFeedback and UserConfirmation records.

    \n

    UserReadContent

    \n

    This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users close a content shown when handling an OPEN_CONTENT tap action.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways user-content-read
    changeChangeAlways none. This record is meant to be used after the user finishes seeing a content. The start is reflected by the NotificationTapRecord
    timestampDateThe local time when the content was closed
    contentIdstringThe id of the content seen by the user
    completelyReadbooleanAllows to indicate if the user has seen the content to its full extension. Defaults to false
    notificationIdnumber(Optional) The id of the notification that lead to this content being displayed
    \n

    QuestionnaireAnswers

    \n

    This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users submit a set of questions delivered when handling a DELIVER_QUESTIONS tap action.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways questionnaire-answers
    changeChangeAlways none. This record is meant to be used after the user finishes answering the delivered questions. The start is reflected by the NotificationTapRecord
    timestampDateThe local time when the questions were answered
    questionnaireIdstringThe id of the questionnaire answered by the user
    answersArray<QuestionnaireAnswerIncludes each of the user's answers to the questions that have been delivered. The table bellow describes each one of the properties of the QuestionnaireAnswer interface
    notificationIdnumber(Optional) The id of the notification that lead to this questionnaire being delivered
    \n
    QuestionnaireAnswer
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titlestringThe title of the question
    answernumber | string | booleanThe answer provided by the user
    millisecondsToAnswernumber(Optional) The amount of milliseconds that took the user to answer the question
    \n

    UserFeedback

    \n

    This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users submit some feedback they've been asked for when handling an ASK_FEEDBACK tap action.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways user-feedback
    changeChangeAlways none. This record is meant to be used after the user submits feedback. The start is reflected by the NotificationTapRecord
    timestampDateThe local time when the feedback was submitted
    feedbackIdstringThe id of the feedback form submitted by the user
    questionstringThe matter the user has been asked for
    feedbackstringThe answer submitted by the user
    notificationIdnumber(Optional) The id of the notification that lead to this feedback being asked
    \n

    UserConfirmation

    \n

    This record is meant to be manually created (and optionally emitted, using awarns.emit()), after users confirm or reject a statement presented when handling an ASK_CONFIRMATION tap action.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways user-confirmation
    changeChangeAlways none. This record is meant to be used after the user confirms or rejects a statement. The start is reflected by the NotificationTapRecord
    timestampDateThe local time when the statement was confirmed or rejected
    confirmationIdstringThe id of the confirmation form answered by the user
    questionstringThe confirmation the user has been asked for
    confirmedbooleanIndicates if the user has confirmed the statement or not
    notificationIdnumber(Optional) The id of the notification that lead to this confirmation being requested
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook":{"name":"nativescript-facebook","version":"4.2.1","license":"Apache 2.0","readme":"

    NativeScript : Facebook SDK \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript plugin, wrapper of native Facebook SDK for Android and iOS.

    \n

    \"demo\"

    \n\n\n\n

    Features

    \n
      \n
    • [x] Login & Logout
      • \n
    • [x] Share
      • \n
    • [ ] Graph API
      • \n
    • [x] Basic Analytics
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-facebook
    \n

    Configuration

    \n

    Android

    \n

    Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put provider under <application>
    \n{facebook_app_id} is your app id

    \n
    <provider android:authorities=\"com.facebook.app.FacebookContentProvider{facebook_app_id}\"
    \t\t\t\t  android:name=\"com.facebook.FacebookContentProvider\"
    \t\t\t\t  android:exported=\"true\"/>
    \n

    iOS

    \n

    Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains CFBundleURLTypes and LSApplicationQueriesSchemes like below:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
        <dict>
        ...

            <key>CFBundleURLTypes</key>
            <array>
                <dict>
                    <key>CFBundleURLSchemes</key>
                    <array>
                        <string>fb{facebook_app_id}</string>
                    </array>
                </dict>
            </array>
    \t\t<key>LSApplicationQueriesSchemes</key>
            <array>
                <string>fbapi</string>
                <string>fb-messenger-share-api</string>
                <string>fbauth2</string>
                <string>fbshareextension</string>
            </array>
        </dict>
    </plist>
    \n
    \n

    Make sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found here.

    \n
    \n

    Usage

    \n

    NativeScript Core

    \n

    Initialization

    \n

    Call init of nativescript-facebook module on application launch.

    \n

    app.ts

    \n
    import * as application from 'application';
    import { init } from \"nativescript-facebook\";

    application.on(application.launchEvent, function (args) {
        init(\"{facebook_app_id}\");
    });

    application.start({ moduleName: \"login-page\" });
    \n

    Login

    \n

    Facebook Login Button

    \n

    Add Facebook login button as simple as adding a Facebook:LoginButton tag in your view. Then you can define login event handler name. In the example below - onLogin.

    \n

    login-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Facebook:LoginButton login=\"{{ onLogin }}\"></Facebook:LoginButton>

        ...

    </Page>
    \n

    Implement onLogin event handler in your view-model. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

    \n

    login-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { Facebook:LoginButton } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      onLogin(eventData: LoginEventData) {
        if (eventData.error) {
          alert(\"Error during login: \" + eventData.error.message);
        } else {
          console.log(eventData.loginResponse.token);
        }
      }
    }
    \n

    Custom Login Button

    \n

    Add a button and define a tap event handler in your login view.

    \n

    login-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Button tap=\"{{ login }}\" text=\"Log in (custom)\"></Button>

        ...

    </Page>
    \n

    In the view model implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin. In the example below the login method from the plugin is imported as fbLogin.

    \n
    \n

    BEST PRACTICE:\nImport only the methods that you need instead of the entire file. It is crucial when you bundle your app with webpack.

    \n
    \n

    login-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { login as fbLogin } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      login() {
        fbLogin((err, fbData) => {
          if (err) {
            alert(\"Error during login: \" + err.message);
          } else {
            console.log(fbData.token);
          }
        });
      }

    }
    \n

    Log out

    \n

    Facebook Logout Button

    \n

    Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your view. Then you can define logout event handler name. In the example below - onLogout.

    \n

    home-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Facebook:LoginButton logout=\"{{ onLogout }}\"></Facebook:LoginButton>

        ...

    </Page>
    \n

    Implement onLogout event handler in your view-model.

    \n

    home-view-model.ts

    \n
    import { Observable } from 'data/observable';

    export class HomeViewModel extends Observable {

      onLogout() {
        console.log(\"logged out\");
      }

    }
    \n

    Custom Logout Button

    \n

    Add a button and define a tap event handler in your view. In this case - logout

    \n

    home-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Button tap=\"{{ logout }}\" text=\"Log out (custom)\"></Button>

        ...

    </Page>
    \n

    In the view model implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

    \n

    home-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { logout as fbLogout } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      logout() {
        fbLogout(() => {
          console.log(\"logged out\");
        });
      }

    }
    \n

    Share

    \n

    Create Sharing Content

    \n

    For sharing, you have to create sharing content first.\nCurrently the available content types are:

    \n
      \n
    • createShareLinksContent(link: string, quote?: string, addition?: ShareAdditionContent) available for every condition
      • \n
    • createSharePhotosContent(images: ImageSource[] | string[], userGenerated: boolean, addition?: ShareAdditionContent) available for ShareButton and showShareDialog ( only when user have native Facebook installed, version 7.0 or higher )
      • \n
    • createShareMessageGenericTemplateContent(contentConfig: MessageGenericTemplateContent) available for SendButton and showMessageDialog
      • \n
    • createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent) available for SendButton and showMessageDialog
      • \n
    \n

    You can see more information from https://developers.facebook.com/docs/sharing/overview#content and https://developers.facebook.com/docs/sharing/messenger#share-types

    \n
    import {
        LoginEventData,
        getCurrentAccessToken,
        createShareLinksContent,
        createSharePhotosContent,
        createShareMessageGenericTemplateContent,
        MessageGenericTemplateImageAspectRatio,
        showShareDialog,
        showMessageDialog,
        canShareDialogShow,
        canMessageDialogShow
    } from 'nativescript-facebook';

    const linkContent = createShareLinksContent('https://www.nativescript.org',
                'Create Native iOS and Android Apps With JavaScript',
                {
                    hashtag: '#Nativescript'
                });

    // you can also pass in imageUrls as string[] in here
    const logoImage = fromResource('logo');
    const photosContent = createSharePhotosContent([logoImage], false, {
                  hashtag: '#Nativescript'
              });
    const GenericTemplate = createShareMessageGenericTemplateContent({
                element: {
                    title: 'Nativescript',
                    subtitle: 'Create Native iOS and Android Apps With JavaScript',
                    imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
                    button: {
                        title: 'Check Doc',
                        url: 'https://docs.nativescript.org'
                    },
                    defaultAction: {
                        title: 'Go HomePage',
                        url: 'https://www.nativescript.org'
                    }
                },
                // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
                pageID: 'testestsett',
                imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
            });
    \n

    Facebook Share Button

    \n
    <Facebook:ShareButton content=\"{{ linkContent }}\"></Facebook:ShareButton>
    \n

    Facebook Send Button

    \n

    If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

    \n
    <Facebook:SendButton content=\"{{ genericContent }}\"></Facebook:SendButton>
    \n

    Show Share Dialog Programmatically

    \n

    Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

    \n
    showShareDialog(this.linkContent);
    showMessageDialog(this.linkContent);
    showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
        if(!error){
            console.log(result.android); // com.facebook.share.Sharer.Result
            console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
        }
    });
    \n

    Hide Custom Button If Can't share

    \n

    You can use this method to check if the content can be shared and hide the custom button if can't

    \n
    public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
    public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
    \n
    <Button tap=\"{{ onShareDialogPhotos }}\" text=\"Open Share dialog (photos)\" visibility=\"{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}\"></Button>
    <Button tap=\"{{ onSendGenericDialog }}\" text=\"Share Message Generic Template\" visibility=\"{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}\"></Button>
    \n

    NativeScript Angular

    \n

    Initialization

    \n

    Call init of nativescript-facebook module on application launch.

    \n

    app.module.ts

    \n
    ...
    import * as application from 'application';
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NativeScriptFacebookModule } from \"nativescript-facebook/angular\";

    let nsFacebook = require('nativescript-facebook');

    application.on(application.launchEvent, function (args) {
        nsFacebook.init(\"{facebook_app_id}\");
    });
    ...
    @NgModule({
        ...
        imports: [
            AppRoutingModule,
            NativeScriptModule,
            NativeScriptFacebookModule,
            ...
        ],
        ...
    })
    ...
    \n

    Login

    \n

    Facebook Login Button

    \n

    Add Facebook login button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define login event handler name. In the example below - onLogin. Bare in mind the $event argument.

    \n

    pages/login/login.component.html

    \n
    <StackLayout>
        <FacebookLoginButton (login)=\"onLogin($event)\"></FacebookLoginButton>
    </StackLayout>
    \n

    Implement onLogin event handler in your component. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

    \n

    pages/login/login.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"login\",
        templateUrl: \"login.component.html\",
    })
    export class LoginComponent { 
        onLogin(eventData: Facebook.LoginEventData) {
            if (eventData.error) {
                alert(\"Error during login: \" + eventData.error);
            } else {
                console.log(eventData.loginResponse.token);
            }
        }
    }
    \n

    Custom Login Button

    \n

    Add a button and define a tap event handler in your login component html.

    \n

    pages/login/login.component.html

    \n
    <StackLayout>
        <Button text=\"Login Button (custom)\" (tap)=\"login()\"></Button>
    </StackLayout>
    \n

    In the component implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin.

    \n

    pages/login/login.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"login\",
        templateUrl: \"login.component.html\",
    })
    export class LoginComponent { 
        login() {
            Facebook.login((error, fbData) => {
                if (error) {
                    alert(\"Error during login: \" + error.message);
                } else {
                    console.log(fbData.token);
                }
            });
        }
    }
    \n

    Logout

    \n

    Facebook Logout Button

    \n

    Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define logout event handler name. In the example below - onLogout. Bare in mind the $event argument.

    \n

    pages/home/home.component.html

    \n
    <StackLayout>
        <FacebookLoginButton (logout)=\"onLogout($event)\"></FacebookLoginButton>
    </StackLayout>
    \n

    Implement onLogout event handler.

    \n

    pages/home/home.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"home\",
        templateUrl: \"home.component.html\",
    })
    export class HomeComponent { 
        onLogout(eventData: Facebook.LoginEventData) {
            if (eventData.error) {
                alert(\"Error during login: \" + eventData.error);
            } else {
                console.log(\"logged out\");
            }
        }
    }
    \n

    Custom Logout Button

    \n

    Add a button and define a tap event handler in your view. In this case - logout

    \n

    pages/home/home.component.html

    \n
    <StackLayout>
        <Button text=\"Log out (custom)\" (tap)=\"logout()\"></Button>
    </StackLayout>
    \n

    In the component implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

    \n

    pages/home/home.component.ts

    \n
    import { Component } from \"@angular/core\";
    import { logout as fbLogout } from \"nativescript-facebook\";

    @Component({
        selector: \"home\",
        templateUrl: \"home.component.html\",
    })
    export class AppComponent { 
      logout() {
        fbLogout(() => {
          console.log(\"logged out\");
        });
      }
    }
    \n

    Share

    \n

    Create Sharing Content

    \n

    Read Nativescript chapter for this

    \n

    Facebook Share Button

    \n
    <FacebookShareButton [content] = \"linkContent\"></FacebookShareButton>
    \n

    Facebook Send Button

    \n

    If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

    \n
    <FacebookSendButton [content] = \"genericContent\"></FacebookSendButton>
    \n

    Show Share Dialog Programmatically

    \n

    Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

    \n
    showShareDialog(this.linkContent);
    showMessageDialog(this.linkContent);
    showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
        if(!error){
            console.log(result.android); // com.facebook.share.Sharer.Result
            console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
        }
    });
    \n

    Hide Custom Button If Can't share

    \n

    You can use this method to check if the content can be shared and hide the custom button if can't

    \n
    public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
    public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
    \n
    <Button (tap) = \"onShareDialogPhotos()\" text = \"Open Share dialog (photos)\" *ngIf = \"canShowPhotosShareDialog\"></Button>
    <Button (tap) = \"onSendGenericDialog()\" text = \"Share Message Generic Template\" *ngIf = \"canShowGenericMessageDialog\"></Button>
    \n

    Login Response

    \n

    The callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    tokenaccess token which will be used for further authentications
    \n

    Get Current Access Token

    \n

    The plugin allows to get the current access token, if any, via getCurrentAccessToken() method.

    \n

    Basic Analytics

    \n

    The plugin allows to log analytics events. At the initialization of the application you need to init analytics:

    \n
    application.on(application.launchEvent, function (args) {
        nsFacebook.init(\"{facebook_app_id}\");
        nsFacebook.initAnalytics();
    });
    \n

    Events logging:

    \n
    nsFacebook.logEvent('Lead');
    \n

    Logging event with parameters:

    \n
    const value = 5;
    const parameters = [{
        key: 'value',
        value: value.toString(),
    }];

    nsFacebook.logEvent(FundsAdded, parameters);
    \n

    Graph API Example

    \n

    Once the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.

    \n
      \n
    1. Get Facebook id of the logged in user
      2. \n
    2. Get the logged in user avatar (this is kind of workaround of this NativeScript issue. #2176)
      3. \n
    \n
    export class HomeComponent {
        accessToken: string = appSettings.getString(\"access_token\");
        userId: string;
        username: string;
        avatarUrl: string;

        constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
            // Get logged in user's info
            http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/me?access_token=\" + this.accessToken).then((res) => {
                this.username = res.name;
                this.userId = res.id;

                // Get logged in user'    s avatar
                // ref: https://github.com/NativeScript/NativeScript/issues/2176
                http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/\" + this.userId + \"/picture?type=large&redirect=false&access_token=\" + this.accessToken).then((res) => {
                    this.avatarUrl = res.data.url;
                    this.ref.detectChanges();
                }, function (err) {
                    alert(\"Error getting user info: \" + err);
                });
            }, function (err) {
                alert(\"Error getting user info: \" + err);
            });
        }
    \n

    This sample is part of the demo apps and can be observed here for Nativescript Code and here for NativeScript + Angular.

    \n

    Release notes

    \n

    Check out release notes here

    \n

    FAQ

    \n

    Check out our FAQ section here.

    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-login-linkedin":{"name":"nativescript-social-login-linkedin","version":"3.1.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Social Login

    \n

    NativeScript module for social (token based) log-ins.

    \n

    \"Donate\"

    \n

    Implementations

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderAndroidiOS
    GoogleYesYes
    FacebookYesYes
    TwitterNoNo
    \n

    License

    \n

    MIT license

    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Changes

    \n

    v1.4.x to 1.5.x

    \n

    Google

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.3.x to 1.4.x

    \n

    Facebook

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.2.x to 1.3.x

    \n

    Google

    \n
      \n
    • The default value for ILoginConfiguration.google.isRequestAuthCode is (false) now. This behavior will not be changed in the future again!
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-social-login
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n
    Permissions
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <!-- ... -->

        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <!-- ... -->
    </manifest>
    \n
    Strings
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
        <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
    </resources>
    \n

    Setup Android Google Sign in for Debug Builds

    \n
      \n
    1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
      2. \n
    \n
    keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    \n

    The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

    \n
      \n
    1. Create an app here on Google Developer site.\n
        \n
      • Enter the App name. This can be anything but it will display to the user who is authenticating.
        • \n
      • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
        • \n
      • Next configure the Google services.
        • \n
      • Select Google Sign-In
        • \n
      • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
        • \n
      • Enable Google Sign-In\n
          \n
        • If only enabling Google Sign-In you do not need the configuration file inside your application.
          • \n
        \n
        • \n
      \n
      2. \n
    2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
      3. \n
    \n

    iOS

    \n

    GoogleService-Info.plist

    \n

    You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <!-- FACEBOOK AND GOOGLE LOGIN -->
    <key>CFBundleURLTypes</key>
        <array>
            <!-- GOOGLE START -->
    \t\t<dict>
    \t\t\t<key>CFBundleTypeRole</key>
    \t\t\t<string>Editor</string>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                    <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                    <!-- Get it from your GoogleService-Info.plist -->
                    <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t\t</array>
    \t\t</dict>
    \t\t<!-- GOOGLE END -->
    \t\t<!-- FACEBOOK START -->
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
            <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
                </array>
            </dict>
        </array>
        <key>CFBundleVersion</key>
        <string>1.0</string>
        <key>FacebookAppID</key>
        <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
        <key>FacebookDisplayName</key>
        <string>FacebookLoginDemo</string>
        <!-- FACEBOOK END -->
    \n

    https://developers.facebook.com/docs/ios

    \n

    Application main file

    \n

    Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

    \n
    TypeScript
    \n
    if (application.ios) {

      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
          let gglDelegate = false;

          try {
            const errorRef = new interop.Reference();
            GGLContext.sharedInstance().configureWithError(errorRef);

            const signIn = GIDSignIn.sharedInstance();
            gglDelegate = true;
          } catch (error) {
            console.log(error);
          }

          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

          return gglDelegate || fcbDelegate;
        }

        applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
          const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

          return fcbDelegate || gglDelegate;
        }
      }

      application.ios.delegate = MyDelegate;
    }
    \n
    JavaScript
    \n
    if (application.ios) {
        var MyDelegate = (function (_super) {
            __extends(MyDelegate, _super);
            function MyDelegate() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                var gglDelegate = false;
                try {
                    var errorRef = new interop.Reference();
                    GGLContext.sharedInstance().configureWithError(errorRef);
                    var signIn = GIDSignIn.sharedInstance();
                    gglDelegate = true;
                }
                catch (error) {
                    console.log(error);
                }
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
                return gglDelegate || fcbDelegate;
            };
            MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
                var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
                return fcbDelegate || gglDelegate;
            };
            return MyDelegate;
        }(UIResponder));
        MyDelegate.ObjCProtocols = [UIApplicationDelegate];
        application.ios.delegate = MyDelegate;
    }
    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    import SocialLogin = require(\"nativescript-social-login\");
    \n

    Initialize

    \n
    import Application = require(\"application\");
    import SocialLogin = require(\"nativescript-social-login\");

    if (Application.android) {
        Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
            let result = SocialLogin.init({
                activity: event.activity,
            });
        });
    }
    \n

    The init() function receives an (optional) object with the following structure:

    \n
    interface ILoginConfiguration {
        /**
         * The underlying custom activity to use.
         */
        activity?: android.app.Activity;

        /**
         * Facebook specific configuration.
         */
        facebook?: {
            /**
             * Initialize Facebook or not. Default: (true)
             */
            initialize?: boolean;
            /**
             * Should Logout current Facebook session or not. Default: (false)
             */
            clearSession?: boolean;
        }

        /**
         * Google specific configuration.
         */
        google?: {
            /**
             * Initialize Google or not. Default: (true)
             */
            initialize?: boolean;

           /**
            * The server client ID for requesting server auth token.
            */
            serverClientId?: string;

            /**
             * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
             * It will be set in authCode property of result object.
             *
             * If false (default), it will request for token id. it will be set in authToken property of result object.
             */
            isRequestAuthCode?: boolean;
        }

        /**
         * Fallback action for the result of the underlying activity.
         */
        onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
    }
    \n

    The result object that is returned by init() has the following structure:

    \n
    interface IInitializationResult {
        facebook: {
            error: any,
            isInitialized: boolean,
        },
        google: {
            error: any,
            isInitialized: boolean,
        },
        twitter: {
            error: any,
            isInitialized: boolean,
        }
    }
    \n

    The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

    \n

    The error properties are only defined if an exception was thrown while initialization.

    \n

    Login

    \n

    If you want to use a login functions you have to submit a callback that receives an object with the following structure:

    \n
    interface ILoginResult {
        /**
         * Gets the auth token (if requested).
         */
        authToken?: string;

        /**
         * Offline auth code used by servers to request new auth tokens.
         */
        authCode?: string;

        /**
         * Gets the result code.
         */
        code: LoginResultType;

        /**
         * The display name.
         */
        displayName?: string;

        /**
         * First name of the user.
         */
        firstName?: string;

        /**
         * Last name of the user.
         */
        lastName?: string;

        /**
         * Gets the error (if defined).
         */
        error?: any;

        /**
         * The ID of the user.
         */
        id?: string;

        /**
         * The photo URL.
         */
        photo?: string;

        /**
         * Gets the underlying provider.
         */
        provider?: string;

        /**
         * The user token, like email address.
         */
        userToken?: string;
    }
    \n

    The following functions are implemented:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderProvider
    loginWithFacebookFacebook
    loginWithGoogleGoogle
    \n

    Example

    \n
    SocialLogin.loginWithFacebook(
        (result) => {
            console.log(\"code: \" + result.code);
            console.log(\"error: \" + result.error);
            console.log(\"userToken: \" + result.userToken);
            console.log(\"displayName: \" + result.displayName);
            console.log(\"photo: \" + result.photo);
            console.log(\"authToken: \" + result.authToken);
        }
    );
    \n

    It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

    \n
    import { Component, NgZone } from \"angular/core\";

    @Component({})
    class SigninComponent {
        constructor(private ngZone: NgZone) {}

        login() {
            SocialLogin.loginWithFacebook((result) => {
                this.ngZone.run(() => {
                    console.log(\"code: \" + result.code);
                    console.log(\"error: \" + result.error);
                    console.log(\"userToken: \" + result.userToken);
                    console.log(\"displayName: \" + result.displayName);
                    console.log(\"photo: \" + result.photo);
                    console.log(\"authToken: \" + result.authToken);
                });
            });
        }
    }
    \n

    There is also a great example by dgomezs that shows how to configure your app for Facebook.

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

    \n
    SocialLogin.addLogger(function(msg: any, tag: string) {
        console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
    });
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-themes":{"name":"nativescript-themes","version":"2.0.2","license":{"type":"MIT","url":"https://git.proplugins.org/proplugins/nativescript-themes/blob/master/LICENSE"},"readme":"

    \n

    NativeScript-Themes

    \n

    \n

    This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.

    \n

    Documentation for this plugin is located at here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-icon-changer":{"name":"nativescript-app-icon-changer","version":"1.0.4","license":"MIT","readme":"

    NativeScript App Icon Changer

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n\n
    \n

    That's the demo app in action, switching app icons like a boss!

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-app-icon-changer
    \n

    API

    \n

    requiring / importing the plugin

    \n

    All examples below assume you're using TypeScript, but here's how to require the plugin with regular JS as well:

    \n

    JavaScript

    \n
    var AppIconChangerPlugin = require(\"nativescript-app-icon-changer\");
    var appIconChanger = new AppIconChangerPlugin.AppIconChanger();
    \n

    TypeScript

    \n
    import { AppIconChanger } from \"nativescript-app-icon-changer\";

    export class MyClass {
      private appIconChanger: AppIconChanger;
      
      constructor() {
        this.appIconChanger = new AppIconChanger();
      }
    }
    \n

    isSupported

    \n

    Only iOS 10.3 and up support this feature, so you may want to check beforehand:

    \n
    this.appIconChanger.isSupported().then(
        supported => console.log(`Supported: ${supported}`));
    \n

    changeIcon

    \n

    To be able to switch to a different icon add it to App_Resources/iOS and App_Resources/iOS/Info.plist as explained below and pass iconName to changeIcon.

    \n

    To reset to the default icon, use iconName: null.

    \n

    Note 1: iOS will notify the user the icon changed, but this plugin allows you to suppress that message (it's the default even). It's probably not what Apple would like you to do, but no apps have been disapproved with suppression enabled.

    \n

    Note 2: Changing the app icon is only allowed when the app is in the foreground, so forget about that weather app which silently updates its app icon.

    \n
    this.appIconChanger.changeIcon({
      iconName: \"icon-blue\", // or null to reset to the default
      suppressUserNotification: true
    });
    \n

    currentAlternateIcon

    \n

    Want to know whether or not the app currently has an alternate icon configured? And if so, what its name is? Then use this:

    \n
    // synchronous
    const currentAppIconName: string = this.appIconChanger.currentAlternateIcon();
    \n

    Preparing your app for icon switching

    \n

    Apple doesn't allow switching to arbitrary icons, so they must be bundled with your app before releasing the app to the store.

    \n

    Add the icons you'd like your users to be able to switch to for all relevant resolutions as usual.

    \n
    \n

    Note that you DON'T NEED to provide all those resolutions; you could get away with adding just the largest resolution and refer to it in the plist file. iOS will scale it down to other resolutions for you.

    \n
    \n\n

    Then reference those icons in App_Resources/iOS/Info.plist as well:

    \n
    <plist>
    <dict>

      <!-- Add or merge this bit -->
      <key>CFBundleIcons</key>
      <dict>
        <key>CFBundleAlternateIcons</key>
        <dict>
          <!-- The name you use in code -->
          <key>icon-blue</key>
          <dict>
            <key>UIPrerenderedIcon</key>
            <true/>
            <key>CFBundleIconFiles</key>
            <array>
              <!-- The actual filenames. Don't list the @2x/@3x files here -->
              <string>icon-blue-57</string>
              <string>icon-blue-60</string>
              <string>icon-blue-72</string>
              <string>icon-blue-76</string>
            </array>
          </dict>
        </dict>
      </dict>

    </dict>
    </plist>
    \n
    \n

    Need iPad support as well? Just duplicate that plist config and change <key>CFBundleIcons</key> to <key>CFBundleIcons~ipad</key>.

    \n
    \n

    Want to see this configured in an actual project? Look at the demo app to see the gory details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-seed":{"name":"nativescript-plugin-seed","version":"1.0.2","license":"MIT","readme":"

    Develop a NativeScript plugin now (w/ TypeScript)

    \n

    Getting started

    \n
      \n
    1. Download a zip of this seed.
      2. \n
    2. npm install -g typescript
      3. \n
    3. cd ... path/to/unzip/folder ...
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Prepare

    \n

    You'll want to change a couple things right away:

    \n
      \n
    • Change the name of the plugin all throughout package.json (including github repo, etc.) and the filenames.
      • \n
    • Also in package.json, find this line:
      • \n
    \n
    \"preparedemo\": \"npm run build; cd demo; tns plugin remove nativescript-yourplugin; tns plugin add ..; tns install\",
    \n

    Replace nativescript-yourplugin with your actual plugin name.

    \n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a gaurantee to remove the plugin and add it back
    tns plugin remove nativescript-yourplugin // replace with your plugin name
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@courthoang/ns-stripeterminal":{"name":"@courthoang/ns-stripeterminal","version":"4.0.12","license":"Apache-2.0","readme":"

    @courthoang/nativescript-stripeterminal

    \n
    npm install @courthoang/nativescript-stripeterminal
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@busychild/nativescript-extended-webview":{"name":"@busychild/nativescript-extended-webview","version":"1.0.2","license":"Apache-2.0","readme":"

    @busychild/nativescript-extended-webview

    \n
    npm install @busychild/nativescript-extended-webview
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-autocomplete":{"name":"nativescript-autocomplete","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/triniwiz/nativescript-autocomplete/blob/master/LICENSE"},"readme":"

    Autocomplete for NativeScript

    \n

    ##Install

    \n
    npm install nativescript-autocomplete
    \n

    ##Usage

    \n

    IMPORTANT: Make sure you include xmlns:ac="nativescript-autocomplete" on the Page element

    \n

    e.g

    \n
    item:Array<string> = ['1','2','3','4']
    \n
    itemTapped(args){
        const eventName = args.eventName;
        const data = args.data;
        const view = args.view;
        const index = args.index;
        const object = args.object;
    }
    \n
    <ac:Autocomplete  items=\"{{list}}\" itemTap=\"itemTapped\"/>
    \n

    #ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    \"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-plugin":{"name":"tns-template-plugin","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/nathanaela/tns-template-plugin/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    tns-template-plugin

    \n

    Quickly builds a NativeScriot plugins\nThis will automatically create:

    \n
      \n
    • source code
      • \n
    • License
      • \n
    • Readme
      • \n
    • package.json
      • \n
    • ignore files
      • \n
    • installs a demo project
      • \n
    • installs typescript support (if needed)
      • \n
    • tsconfig (if needed)
      • \n
    \n

    It asks you several questions about this plugin, automatically saves the common answers (so that way it does not need to ask them ever again.)\nIf has entry line completions, and ability to list the valid answers (hit ).

    \n

    License

    \n

    This project itself is released under the MIT license; however the code generated is released under no license; so that you can release this under any license and claim all rights to the code contained here.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Screen

    \n

    \"Sample1\"

    \n

    Updates

    \n

    Please feel free to fork this repo and update it!!!

    \n

    Instructions

    \n

    Simple Instructions

    \n
    git clone https://github.com/NathanaelA/tns-template-plugin nativescript-plugin-name
    cd nativescript-plugin-name
    npm start
    \n

    Basically After cloning the repo into whereever you want it; type npm start, answer a couple questions and it will re-write the repo to match you plugin type you desire.

    \n

    Features

    \n

    $HOME/.tns-plugin/ folder is used to store settings and additional files you may want added to any new plugins.

    \n

    So if you would like to have your OWN custom readme.md or package.json template that you use used as the source; create a file in your %HOMEPATH% or $HOME /.tns-plugin/files/

    \n

    When parsing the files it will look for any [[name]], [[github]], [[plugin]], [[email]], [[os], and [[license] and replace them with the values you typed.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-calendar":{"name":"nativescript-calendar","version":"3.0.0","license":"MIT","readme":"

    NativeScript Calendar Plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    The Calendar plugin allows you to manipulate events in the user's native Calendar. You can find, create and delete events in either the default or a custom calendar.

    \n

    If you're looking for an awesome in-app UI for the native calendar, then check this out.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativeScript 7

    \n
    tns plugin add nativescript-calendar
    \n

    NativeScript 6

    \n
    tns plugin add nativescript-calendar@2.2.1
    \n

    iOS runtime permission reason

    \n

    You probably have seen a permission popup like this before (this plugin will trigger one as well, automatically):

    \n\n

    iOS 10+ requires not only this popup, but also a reason. In this case it's "Custom message from App_Resources".

    \n

    You can provide your own reason for accessing the calendar by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSCalendarsUsageDescription</key>
      <string>My reason justifying fooling around with your calendar</string>
    \n

    To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specified yourself. You're welcome.

    \n

    TypeScript Usage

    \n

    Of course you can use this plugin with TypeScript, just import the plugin and use\nthe functions summed up below like this:

    \n
    import * as Calendar from \"nativescript-calendar\";

    // example for listCalendars:
    Calendar.listCalendars().then(/* .. */);
    \n

    Usage

    \n

    If you want a quickstart, clone our demo app.

    \n

    createEvent

    \n
      var Calendar = require(\"nativescript-calendar\");

      // Only the `title`, `startDate` and `endDate` are mandatory, so this would suffice:
      var options = {
        title: 'Get groceries',
        // Make sure these are valid JavaScript Date objects.
        // In this case we schedule an Event for now + 1 hour, lasting 1 hour.
        startDate: new Date(new Date().getTime() + (60*60*1000)),
        endDate: new Date(new Date().getTime() + (2*60*60*1000))
      };

      // You can however add lots of properties to enrich the Event:
      options.location = 'The shop';
      options.notes = 'This event has reminders';

      // iOS has a separate 'url' field, but on Android the plugin appends this to the 'notes' field.
      options.url = 'http://my.shoppinglist.com';

      // You can also override the default reminder(s) of the Calendar (in minutes):
      options.reminders = {
        first: 30,
        second: 10
      };

      // You can make this Event recurring (this one repeats every other day for 10 days):
      options.recurrence = {
        frequency: \"daily\", // daily | weekly | monthly | yearly
        interval: 2, // once every 2 days
        endDate: new Date(new Date().getTime() + (10*24*60*60*1000)) // 10 days
      };

      // Want to use a custom calendar for your app? Pass in the 'name'.
      // If the name doesn't yet exist the plugin will create it for you.
      options.calendar = {
        name: \"NativeScript Cal\",
        // the color, in this case red
        color: \"#FF0000\",
        // Can be used on Android to group the calendars. Examples: Your app name, or an emailaddress
        accountName: \"My App Name\"
      };

      Calendar.createEvent(options).then(
          function(createdId) {
            console.log(\"Created Event with ID: \" + createdId);
          },
          function(error) {
            console.log(\"Error creating an Event: \" + error);
          }
      );
    \n

    If you want an 'all day event', make sure you set the dates to midnight like this:

    \n
      var d = new Date();
      d.setHours(0);
      d.setMinutes(0);
      d.setSeconds(0);

      // this will create an 'all day event' for tomorrow
      var startDate = new Date(d.getTime() + (24*60*60*1000));
      var endDate = new Date(d.getTime() + (2*24*60*60*1000));
      // .. now use these properties in the options object
    \n

    findEvents

    \n
      var options = {
        // when searching, dates are mandatory - the event must be within this interval
        startDate: new Date(new Date().getTime() - (50*24*60*60*1000)),
        endDate: new Date(new Date().getTime() + (50*24*60*60*1000))
      };

      // if you know the Event ID, set it here:
      options.id = '123456';

      // you can optionally pass in a few other properties, any event containing these will be returned:
      options.title = 'groceries';
      options.location = 'foo';
      options.notes = 'bar'; // iOS only

      Calendar.findEvents(options).then(
          function(events) {
            console.log(JSON.stringify(events));
          },
          function(error) {
            console.log(\"Error finding Events: \" + error);
          }
      );
    \n

    The returned 'events' object is an array of JSON events with these properties:

    \n
    id
    title
    location
    notes
    url
    startDate
    endDate
    allDay
    calendar {id, name}
    reminders {minutes}
    recurrence {frequency, interval, endDate}
    attendees {name, email, url, status, role, type}
    \n

    deleteEvents

    \n

    Usage is largely the same as findEvents, only the result is a bit different ;)

    \n
      var options = {
        // when searching, dates are mandatory - the event must be within this interval
        startDate: new Date(new Date().getTime() - (50*24*60*60*1000)),
        endDate: new Date(new Date().getTime() + (50*24*60*60*1000))
      };

      // if you know the Event ID, set it here:
      options.id = '123456';

      // you can optionally pass in a few other properties, any event containing these will be deleted:
      options.title = 'groceries'; // events _including_ this string will be included in the selection
      options.location = 'foo';
      options.notes = 'bar'; // iOS only

      Calendar.deleteEvents(options).then(
          function(deletedEventIds) {
            console.log(JSON.stringify(deletedEventIds));
          },
          function(error) {
            console.log(\"Error deleting Events: \" + error);
          }
      )
    \n

    listCalendars

    \n
      Calendar.listCalendars().then(
          function(calendars) {
            // a JSON array of Calendar objects is returned, each with an 'id' and 'name'
            console.log(\"Found these Calendars on the device: \" + JSON.stringify(calendars));
          },
          function(error) {
            console.log(\"Error while listing Calendars: \" + error);
          }
      )
    \n

    deleteCalendar

    \n
    TypeScript
    \n
    import * as Calendar from \"nativescript-calendar\";

    Calendar.deleteCalendar({
      name: \"My Calendar name\"
    }).then(id => {
      // id is null if nothing was deleted
      console.log(`Deleted Calendar with id ${id}`);
    });
    \n

    Breaking changes in 2.0.0

    \n

    See CHANGELOG.md.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swipe-layout":{"name":"nativescript-swipe-layout","version":"2.0.1","license":"Apache-2.0","readme":"

    Nativescript-swipe-layout

    \n

    \"npm\"\n\"npm\"

    \n

    \"NPM\"

    \n

    Simple swipeable layout, which allow you to drag it, detect swipe events, and perform swipe animations.

    \n

    Developed with :heart: by the team NativeBaguette 🥖

    \n

    \n

    Installation

    \n
    tns plugin add nativescript-swipe-layout
    \n

    Usage

    \n

    NativeScript with Angular

    \n

    Here is an example of how you can use this plugin to build a tinder like stack of cards. Here, the plugin nativescript-cardview is used.

    \n

    XML

    \n

    app.component.html

    \n
    <ActionBar title=\"swipe-layout\" icon=\"\" class=\"action-bar\">
    </ActionBar>
    <GridLayout rows=\"*, auto\" columns=\"*\" backgroundColor=\"#77849F\">
        <SwipeLayout *ngFor=\"let card of cards\" row=\"0\" colSpan=\"3\" col=\"0\" (loaded)=\"swipeLayoutLoaded($event)\" (swipeDown)=\"swipeDownCallback($event)\" (swipeUp)=\"swipeUpCallback($event)\" [animationState]=\"swipeLayoutAnimated\" [gestureMode]=\"gestureMode\">
            <CardView width=\"300\" height=\"300\" backgroundColor=\"white\" margin=\"10\" elevation=\"40\" radius=\"5\">
                <GridLayout rows=\"200, auto\" columns=\"*\">
                    <image [src]=\"card.img\" stretch=\"aspectFill\" colSpan=\"3\" row=\"0\"></image>
                    <label [text]=\"card.test\" class=\"info\" textWrap=\"true\" row=\"1\" colSpan=\"3\" class=\"p-20\"></label>
                </GridLayout>
            </CardView>
        </SwipeLayout>
        <GridLayout row=\"1\" rows=\"*\" columns=\"auto, auto, auto\">
            <Button (tap)=\"like()\" row=\"0\" col=\"0\" class=\"p-20\" class=\"btn btn-primary p-20\" text=\"LIKE\">
                    </Button>
            <Button text=\"SUPER\" (tap)=\"super()\" row=\"0\" col=\"1\" class=\"btn p-20\" backgroundColor=\"#5BD6BB\" color=\"white\"></Button>
            <Button text=\"DECLINE\" (tap)=\"decline()\" row=\"0\" col=\"2\" class=\"btn p-20\" backgroundColor=\"#B33A3A\" color=\"white\"></Button>
        </GridLayout>
    </GridLayout>
    \n

    Component

    \n

    app.component.ts

    \n
    import { Component, ElementRef, ViewChild } from \"@angular/core\";
    .
    . // other imports
    .
    registerElement(\"CardView\", () => CardView);
    registerElement('SwipeLayout', () => SwipeLayout);

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {
        private _swipeLayouts: Array<SwipeLayout>;
        private currentSwipeLayout: SwipeLayout;
        public swipeLayoutAnimated: ANIMATION_STATE;
        public gestureMode: GESTURE_MODE;

        public cards: Array<any> = [{ // dumb cards
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        },
        {
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        }, {
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        }, {
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        }, {
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        }, {
            img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",
            test: \"Batman is pretty cool right?\"
        }]

        constructor(private fonticon: TNSFontIconService) {
            this._swipeLayouts = new Array();
            this.swipeLayoutAnimated = ANIMATION_STATE.ON_EVENTS; // Will animate only on swipe down and up events
            this.gestureMode = GESTURE_MODE.DRAG; // Cards will be draggable
        }

        swipeLayoutLoaded(event) {
            this._swipeLayouts.push(<SwipeLayout>event.object); // Since it's an Array everytime a SwipeLayout load we add it
        }

        ngAfterViewInit(): void {
            this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
        }

        private next() {
            this._swipeLayouts.pop();
            this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
        }
        
        swipeLeftCallback(swipeLeftEvent: SwipeLeftEventData) { // never called (not binded to the XML)
            console.log('    swipeLeft');
            this.next();
        }

        swipeRightCallback(swipeRightEvent: SwipeRightEventData) { // never called (not binded to the XML)
            console.log('    swipeRight');
            this.next();
        }
        
        swipeUpCallback(swipeUpEvent: SwipeUpEventData) { // called once the swipe up animation is done
            console.log('    swipeUp');
            this.next();
        }
        
        swipeDownCallback(swipeDownEvent: SwipeDownEventData) { // called once the swipe down animation is done
            console.log('    swipeDown');
            this.next();
        }

        decline() { // red button  on tap callback
            let that = this;
            this.currentSwipeLayout.animateSwipeRight().then(() => {
                that.next();
                console.log('    swipeLeft done');
            });
        }


        like() { // blue button on tap callback
            let that = this;
            this.currentSwipeLayout.animateSwipeLeft().then(() => {
                that.next();
                console.log('    swipeRight done');
            });
        }

        super() { // green button on tap callback
            let that = this;
            this.currentSwipeLayout.animateSwipeUp().then(() => {
                that.next();
                console.log(\"swipeUp done\");
            });
        }
    }
    \n

    API

    \n

    Further reading here.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    swipeRightfunctionnullCallback called when the layout is swiped to the right and the swipe animation is done.
    swipeLeftfunctionnullCallback called when the layout is swiped to the left and the swipe animation is done.
    swipeUpfunctionnullCallback called when the layout is swiped up and the swipe animation is done.
    swipeDownfunctionnullCallback called when the layout is swiped down and the swipe animation is done.
    animationStateANIMATION_STATEANIMATION_STATE.ALWAYSEnable to perform animation when swipe events are fired, not at all or only on swipe events with a callback
    gestureModeGESTURE_MODEGESTURE_MODE.SWIPEAllow to choose between the drag behavior or the swipe behavior
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnParametersDescription
    animateSwipeRightPromise<void>NoneMethod to manually start the swipe right animation.
    animateSwipeLeftPromise<void>NoneMethod to manually start the swipe left animation
    animateSwipeUpPromise<void>NoneMethod to manually start the swipe up animation
    animateSwipeDownPromise<void>NoneMethod to manually start the swipe down animation
    swipePromise<void>(swipeEvent: SwipeEventData)Method to manually start the swipe animation but has a parameter. From the direction given, will perform the right animation
    \n

    All the method abose can be override, you can customise the animations as you want. If you wan't to override the animation which is performed on a swipe event you'll have to override the swipe method, since it's the one which is called when the event is fired :fire:

    \n

    NativeBaguette 🥖

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Rachid\"Jean-Baptiste\"triniwiz\"\"BradMartin\"\"JenLooper\"
    rkhayyatrhanbtriniwizbradmartinjlooper
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-cognito":{"name":"@gavant/nativescript-cognito","version":"1.1.5-alpha","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-crossplatform-aes":{"name":"nativescript-crossplatform-aes","version":"1.0.3","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    nativescript-crossplatform-aes

    \n

    Simple Cross platform 256bit AES encryption / decryption based on Cross-Platform-AES

    \n

    Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

    \n

    Platforms supported

    \n
      \n
    1. iOS
      2. \n
    2. Android
      3. \n
    3. NodeJS
      4. \n
    \n

    Features:

    \n
      \n
    1. \n

      Cross platform support. Encryption-Decryption works across iOS, Android and Node.js.

      \n
      2. \n
    2. \n

      Automatically RandomIV is added while encryption and remove first randomized blocks while decryption.

      \n
      3. \n
    3. \n

      Support for Random IV (initialization vector) for encryption and decryption. Randomization is crucial for encryption schemes to achieve semantic security, a property whereby repeated usage of the scheme under the same key does not allow an attacker to infer relationships between segments of the encrypted message.

      \n
      4. \n
    4. \n

      Support for SHA-256 for hashing the key. Never use plain text as encryption key. Always hash the plain text key and then use for encryption. AES permits the use of 256-bit keys. Breaking a symmetric 256-bit key by brute force requires 2^128 times more computational power than a 128-bit key. A device that could check a billion billion (10^18) AES keys per second would in theory require about 3×10^51 years to exhaust the 256-bit key space.

      \n
      5. \n
    \n

    Installation

    \n
    tns plugin add nativescript-crossplatform-aes
    \n

    Simple Usage in NativeScript

    \n
    import { CrossPlatformAES } from 'nativescript-crossplatform-aes';

    let cryptLib = new CrossPlatformAES();
    let plainText = \"this is my plain text\"
    let key = \"your key\"

    let cipherText = cryptLib.encryptPlainTextWithRandomIV(plainText, key);
    console.log(cipherText);

    let decryptedString = cryptLib.decryptCipherTextWithRandomIV(cipherText, key)
    console.log(decryptedString);
    \n

    Other Custom Methods

    \n
    encryptPlainTextWithSuppliedIV(plainText: string, key: string, iv: string);
    decryptCipherTextWithSuppliedIV(cipherText: string, key: string, iv: string);
    generateRandomIV16();
    \n

    NodeJS

    \n

    Install the library

    \n
    npm install @skavinvarnan/cryptlib --save
    \n

    Then use it

    \n
    const cryptLib = require('@skavinvarnan/cryptlib');

    const plainText = \"this is my plain text\";
    const key = \"your key\";

    const cipherText = cryptLib.encryptPlainTextWithRandomIV(plainText, key);
    console.log('cipherText %s', cipherText);

    const decryptedString = cryptLib.decryptCipherTextWithRandomIV(cipherText, key);
    console.log('decryptedString %s', decryptedString);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-shimmer":{"name":"@nstudio/nativescript-shimmer","version":"1.0.7","license":"Apache-2.0","readme":"

    @nstudio/nativescript-shimmer

    \n

    Shimmer for NativeScript

    \n
    npm install @nstudio/nativescript-shimmer
    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:ui=\"@nstudio/nativescript-shimmer\">
      ...
        <ui:Shimmer>
            <GridLayout>
                <ContentView height=\"20\" width=\"65%\" backgroundColor=\"#333\"/>
            </GridLayout>
        </ui:Shimmer>
    \n

    It can also be registered with various flavors, for example with Angular:

    \n
    import { registerElement } from '@nativescript/angular';
    import { Shimmer } from '@nstudio/nativescript-shimmer';

    registerElement('Shimmer', () => Shimmer);

    // can now be used in components:
    <Shimmer>
        <GridLayout>
            <ContentView height=\"20\" width=\"65%\" backgroundColor=\"#333\"/>
        </GridLayout>
    </Shimmer>
    \n

    Properties

    \n
      \n
    • autoStart: boolean: Default to true. <Shimmer autoStart="false"> to disable starting automatically
      • \n
    \n

    iOS Only:

    \n

    You can start shimmer on any view statically:

    \n
    import { Shimmer } from '@nstudio/nativescript-shimmer';

    loadedView(args) {
        view = args.object;
        // start shimmer
        Shimmer.start(view);
        // stop shimmer
        Shimmer.stop(view);
    }
    \n

    Android will always need a Shimmer instance to start the effect however you can statically stop the shimmer effect if that instance is passed into Shimmer.stop(view /* shimmer instance */).

    \n
      \n
    • Shimmer.defaults: you can adjust any of the default effect settings in your app (often in app.ts or main.ts before bootstrap depending on your flavor) to avoid passing in the same settings each time the effect is configured:
      • \n
    \n
    Shimmer.defaults = {
        speed: 0.9,
        direction: ShimmerDirection.topToBottom,
        repeat: 4,
        lightColor: 'rgba(255,255,255,.8)',
        darkColor: 'rgba(0,0,0,.7)',
    };

    // bootstrap app...
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appurl":{"name":"nativescript-appurl","version":"1.3.5","license":"MIT","readme":"

    NativeScript URL Handler Plugin \"apple\" \"android\"

    \n

    this is a direct fork/rewrite of nativescript-urlhandler by Martin Reinhardt\nIt did not seem to be maintained anymore and was not working as expected

    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { handleOpenURL, AppURL } from 'nativescript-appurl';

    @Component({
      selector: \"gr-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
        } 
        
        ngOnInit(){
            handleOpenURL((appURL: AppURL) => {
                console.log('Got the following appURL', appURL);
            });
         }
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require(\"nativescript-appurl\").handleOpenURL;

    handleOpenURL(function(appURL) {
      console.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from 'nativescript-appurl';

    handleOpenURL((appURL: AppURL) => {
      console.log('Got the following appURL', appURL);
    });
    \n
    \n

    Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

    \n
    \n

    Installation

    \n
    $ tns plugin add nativescript-appurl
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add nativescript-appurl@next
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" /> 
        <action android:name=\"android.intent.action.VIEW\" /> 
        <category android:name=\"android.intent.category.DEFAULT\" /> 
        <category android:name=\"android.intent.category.BROWSABLE\" /> 
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" /> 
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
    \n

    FAQ

    \n

    Callback handling

    \n

    The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    \n
        No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
    \n

    Webpack

    \n

    TypeScript Config

    \n

    If your Webpack Build is failing, try adapting your tsconfig to this:

    \n
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"emitDecoratorMetadata\": true,
            \"noEmitHelpers\": true,
            \"noEmitOnError\": true,
            \"lib\": [
                \"es6\",
                \"dom\",
                \"es2015.iterable\"
            ],
            \"baseUrl\": \".\",
            \"paths\": {
                \"*\": [
                    \"./node_modules/@nativescript/core/*\",
                    \"./node_modules/*\"
                ]
            }
        },
        \"exclude\": [
            \"node_modules\",
            \"platforms\",
            \"**/*.aot.ts\"
        ]
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/licenses":{"name":"@nativescript-community/licenses","version":"2.0.7","license":"Apache-2.0","readme":"

    [npm-image]: http://img.shields.io/npm/v/@nativescript-community/licenses.svg\n[npm-url]: https://npmjs.org/package/@nativescript-community/licenses\n[downloads-image]: http://img.shields.io/npm/dm/@nativescript-community/licenses.svg

    \n

    Installation

    \n

    On iOS you need to run this first:

    \n
    gem install cocoapods-acknowledgements
    \n

    Usage

    \n

    This plugin is a plugin to easily integrate licenses used your apps.\nThe plugin will automatically generate licenses.json\nYou simply need to load the licenses.json from anywhere in your app using either require('licenses.json') or require('~/licenses.json')\nYou can then simply require that file to use it in your app.\nHere is an example JSON file format (moduleDescription not present on Android):

    \n
    {
        \"dependencies\": [
            {
                \"moduleName\": \"com.airbnb.android:lottie\",
                \"moduleDescription\": \"description\",
                \"moduleUrl\": \"https://github.com/airbnb/lottie-android\",
                \"moduleVersion\": \"3.4.2\",
                \"moduleLicense\": \"Apache License, Version 2.0\",
                \"moduleLicenseUrl\": \"https://www.apache.org/licenses/LICENSE-2.0\"
            }
        ]
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-https":{"name":"nativescript-akylas-https","version":"3.0.1","license":"MIT","readme":"

    NativeScript-HTTPS

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    The definitive way to hit HTTP based APIs in Nativescript.

    \n

    Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

    \n
    \n

    Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

    \n
    \n

    A drop-in replacement for the default http module.

    \n

    Features

    \n
      \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP
      • \n
    • HTTP/2 support
      • \n
    • Multiform part
      • \n
    • Cache
      • \n
    • Basic Cookie support
      • \n
    \n

    FAQ

    \n
    \n

    What the flip is SSL pinning and all this security mumbo jumbo?

    \n
    \n

    How to make your apps more secure with SSL pinning.

    \n
    \n

    Do I have to use SSL pinning?

    \n
    \n

    No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

    \n

    Demo

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-https
    cd nativescript-https/src
    npm run demo.ios
    npm run demo.android
    \n

    Installation

    \n

    Add tns-platform-declarations for Android and iOS to your references.d.ts!

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
    /// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
    \n

    We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

    \n

    Install the plugin:

    \n
    tns plugin add nativescript-https
    \n

    Examples

    \n

    Hitting an API using GET method

    \n
    import * as Https from 'nativescript-https'
    Https.request({
    \turl: 'https://httpbin.org/get',
    \tmethod: 'GET',
    \ttimeout: 30 // seconds (default 10)
    }).then(function(response) {
    \tconsole.log('Https.request response', response)
    }).catch(function(error) {
    \tconsole.error('Https.request error', error)
    })
    \n

    Configuration

    \n

    Installing your SSL certificate

    \n

    Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

    \n

    \"Installing

    \n

    Enabling SSL pinning

    \n
    import { knownFolders } from 'file-system'
    import * as Https from 'nativescript-https'
    let dir = knownFolders.currentApp().getFolder('assets')
    let certificate = dir.getFile('httpbin.org.cer').path
    Https.enableSSLPinning({ host: 'httpbin.org', certificate })
    \n

    Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

    \n

    Disabling SSL pinning

    \n
    import * as Https from 'nativescript-https'
    Https.disableSSLPinning()
    \n

    All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

    \n

    useLegacy

    \n

    There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

    \n
      \n
    • the content returned by a request is not the resulting string but an object. It follows HTTPContent format for the most part. You can call toJSON or toFile. The only difference is that toFile returns a Promise<File> which means that it is async and run in a background thread!
      • \n
    • an error return a content too allowing you to read its content.
      • \n
    \n

    Cookie

    \n

    By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

    \n

    Enabling Cache

    \n
    import { knownFolders, path } from '@nativescript/core/file-system';
    import * as Https from 'nativescript-https'
    Https.setCache({
        diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
        diskSize: 10 * 1024 * 1024 // 10 MiB
    });

    /// later on when calling your request you can use the cachePolicy option
    \n

    Multipart form data

    \n

    If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

    \n
    {
    \tdata: any
        parameterName: string,
        fileName?: string
        contentType?: string
    }
    \n

    if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

    \n

    Options

    \n
    export interface HttpsSSLPinningOptions {
    \thost: string
    \tcertificate: string
    \tallowInvalidCertificates?: boolean
    \tvalidatesDomainName?: boolean
    \tcommonName?: string
    }
    import { HttpRequestOptions } from 'tns-core-modules/http';
    export interface HttpsRequestOptions extends HTTPOptions{
    \tuseLegacy?: boolean
    \tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
    \tonProgress?: (current: number, total: number) => void
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    SSLPinning OptionDescription
    host: stringThis must be the request domain name eg sales.company.org.
    commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
    certificate: stringThe uri path to your .cer certificate file.
    allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
    validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Requests OptionDescription
    useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
    `cachePolicy?: 'noCache''onlyCache'
    onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
    \n

    Webpack / bundling

    \n

    Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

    \n

    iOS Troubleshooting

    \n
    \n

    Please educate yourself on iOS's App Transport Security before starting beef!

    \n
    \n

    If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n
    \n

    This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

    \n
    \n

    Android troubleshooting

    \n

    If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

    \n

    Thanks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WhoWhy
    Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
    AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
    Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-circle":{"name":"nativescript-animated-circle","version":"1.2.0","license":"Apache-2.0","readme":"

    nativescript-animated-circle

    \n

    \"npm\"\n\"npm\"

    \n

    \"NPM\"

    \n

    Creates an animated circle (animates the border of the circle) on iOS and Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \n

    Installation

    \n
    tns plugin add nativescript-animated-circle
    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:ui=\"nativescript-animated-circle\">
        <ui:AnimatedCircle
            backgroundColor=\"transparent\"
            width=\"200\"
            height=\"200\"
            animated=\"true\"
            animateFrom=\"0\"
            rimColor=\"#FF5722\"
            barColor=\"#3D8FF4\"
            fillColor=\"#eee\"
            clockwise=\"true\"
            rimWidth=\"5\"
            progress=\"80\"
            text=\"bam\"
            textSize=\"28\"
            textColor=\"red\" />
    </Page>
    \n

    Angular

    \n

    To use this plugin in Angular, please register the element above your AppModule declaration.

    \n
    import { registerElement } from 'nativescript-angular/element-registry'

    registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);
    \n

    Then you can leverage the plugin using <AnimatedCircle></AnimatedCircle> in your templates.

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    rimColor#FF5722The filled portion of the circle border's color.
    barColor#3D8FF4The remaining (unfilled) portion of the circle border.
    clockwisetrueThe CW (true) or CCW (false) draw direction.
    rimWidth5The border radius of the circle.
    progress0The current progress value.
    startAngle0The angle to start drawing from.
    endAngle100iOS only the end angle to stop drawing at.
    animatedfalseAndroid only animation status.
    animateFrom0Android only the progress value to animate from.
    animationDuration1000Android only the duration to animate for.
    text""The text inside of the circle.
    textSize0Text size, 0 will hide the text
    textColor#ff0000Text color
    \n

    Available for Contract

    \n

    Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: sean@devonite.com to discuss project details.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"kinvey-nativescript-sdk":{"name":"kinvey-nativescript-sdk","version":"8.0.1","license":"Apache-2.0","readme":"

    Kinvey NativeScript SDK

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    npm i kinvey-nativescript-sdk
    \n

    Usage

    \n

    Initialize SDK

    \n

    We need to initialize the SDK before your app starts, so open app.js and add this before application.start();:

    \n

    JavaScript

    \n
    import * as Kinvey from 'kinvey-nativescript-sdk';

    Kinvey.init({
      appKey: '<yourAppKey>',
      appSecret: '<yourAppSecret>'
    });
    \n

    TypeScript

    \n
    import * as Kinvey from 'kinvey-nativescript-sdk';

    Kinvey.init({
      appKey: '<yourAppKey>',
      appSecret: '<yourAppSecret>'
    });
    \n

    Angular

    \n

    Import the KinveyModule in your app.module.ts like this to initialize the SDK:

    \n
    import { NgModule } from '@angular/core';
    import { KinveyModule } from 'kinvey-nativescript-sdk/angular';

    @NgModule({
      imports: [
        KinveyModule.init({
          appKey: '<yourAppKey>',
          appSecret: '<yourAppSecret>'
        })
      ]
    })
    export class AppModule { }
    \n

    Then you can use dependency injection to inject a Kinvey service in your module like this:

    \n
    import { Component } from '@angular/core';
    import { UserService } from 'kinvey-nativescript-sdk/angular';

    @Component()
    export class AppComponent {
      constructor(private userService: UserService) {}

      async login() {
        try {
          const user = await this.userService.login('<username>', '<password>');
          console.log(user);
        } catch (error) {
          console.log(error);
        }
      }
    }
    \n

    The following services are available to use with dependency injection:

    \n
      \n
    • DataStoreService
      • \n
    • EndpointService
      • \n
    • FilesService
      • \n
    • PingService
      • \n
    • UserService
      • \n
    \n

    Push

    \n

    You will need to install nativescript-plugin-firebase and follow the instructions at https://github.com/EddyVerbruggen/nativescript-plugin-firebase#prerequisites on how to setup your app. Make sure to require the nativescript-plugin-firebase plugin in your app.ts file as shown in the example app.

    \n

    You can then use the Push module to register the device running your app like this:

    \n
    import * as Push from 'kinvey-nativescript-sdk/push';

    function receivedPushNotificaiton(message) {
      console.log(\"Title: \" + message.title);
      console.log(\"Body: \" + message.body);
      // if your server passed a custom property called 'foo', then do this:
      console.log(\"Value of 'foo': \" + message.data.foo);
    }

    Push.register(receivedPushNotification)
      .then((deviceToken) => {
        console.log(`The device with device token ${deviceToken} is registered for push.`);
      })
      .catch((error) => {
        console.log(error);
      })
    \n

    To unregister the device running your app do this:

    \n
    import * as Push from 'kinvey-nativescript-sdk/push';

    Push.unregister()
      .then((deviceToken) => {
        console.log(`The device with device token ${deviceToken} has been unregistered for push.`);
      })
      .catch((error) => {
        console.log(error);
      })
    \n
    Angular
    \n

    You will need to import the KinveyPushModule in your app.module.ts like this:

    \n
    import { NgModule } from '@angular/core';
    import { KinveyModule } from 'kinvey-nativescript-sdk/angular';
    import { KinveyPushModule } from 'kinvey-nativescript-sdk/angular/push';

    @NgModule({
      imports: [
        KinveyModule.init({
          appKey: '<yourAppKey>',
          appSecret: '<yourAppSecret>'
        }),
        KinveyPushModule
      ]
    })
    export class AppModule { }
    \n

    Then you can use dependency injection to inject the PushService in your module like this:

    \n
    import { Component } from '@angular/core';
    import { PushService } from 'kinvey-nativescript-sdk/angular/push';

    @Component()
    export class AppComponent {
      constructor(private pushService: PushService) {}

      receivedPushNotificaiton(message) {
        console.log(\"Title: \" + message.title);
        console.log(\"Body: \" + message.body);
        // if your server passed a custom property called 'foo', then do this:
        console.log(\"Value of 'foo': \" + message.data.foo);
      }

      async registerForPush() {
        try {
          const deviceTokne = await this.pushService.register(this.receivedPushNotification);
          console.log(`The device with device token ${deviceToken} has been unregistered for push.`);
        } catch (error) {
          console.log(error);
        }
      }
    }
    \n

    Build

    \n

    If you would like to build the SDK yourself, clone the monorepo, then:

    \n
      \n
    • npm i
      • \n
    • npm run build
      • \n
    \n

    You can then install the SDK build by running npm i /<localpath>/packages/nativescript-sdk

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triarensplugins/damage-reporting":{"name":"@triarensplugins/damage-reporting","version":"1.0.0","license":"Apache-2.0","readme":"

    @triarensplugins/damage-reporting

    \n
    npm install @triarensplugins/damage-reporting
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sound":{"name":"nativescript-sound","version":"1.0.4","license":"MIT","readme":"

    NativeScript Sound

    \n

    Play a sound in your NativeScript app.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-sound
    \n

    Usage

    \n

    To use this plugin you must first require() it:

    \n
    var sound = require(\"nativescript-sound\");
    \n

    create and play

    \n

    It's important to preload the audio file into the sound module before playing it; there is a delay during creation due to the audio being processed:

    \n
    var tada = sound.create(\"~/sounds/tada.mp3\"); // preload the audio file

    // play the sound (i.e. tap event handler)
    tada.play();
    \n

    A good way to do this is to create a sound collection:

    \n
    sounds = {
    \t\"Tada\": sound.create(\"~/sounds/tada.mp3\"),
    \t\"Boo\": sound.create(\"~/sounds/boo.mp3\"),
    \t// ...
    };
    \n

    If you wish to play a sound due to a button being tapped, leverage the following code (where name refers to the name of the audio file to be played):

    \n
    this.playButtonPressed = function(name) {
    \tif (app.android) {
    \t\tsounds[name].play();
    \t} else {
    \t\tvar soundFile = sound.create(\"~/sounds/\" + name + \".mp3\");
    \t\tsoundFile.play();
    \t}
    }
    \n

    stop

    \n
    tada.stop();
    \n

    reset

    \n
    tada.reset();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paystack":{"name":"nativescript-paystack","version":"0.2.3","license":"Apache-2.0","readme":"

    Nativescript Paystack

    \n

    \"npm\n\"npm\"\n\"Build

    \n

    Nativescript-Paystack provides a wrapper that incorporate payments using Paystack from within your {N} applications. The integration is achieved using the Paystack Android/iOS SDK libraries. Hence, has full support for both Android & iOS.

    \n

    Installation

    \n

    The package should be installed via tns plugin for proper gradle and Pod setup.

    \n
    tns plugin add nativescript-paystack
    \n

    Usage

    \n

    Setup

    \n

    First import package into the main-page's model or app.component as the case may be for either {N} Core or {N} w/ Angular

    \n
    import { NSPaystack } from \"nativescript-paystack\";
    \n

    Then create an instance of NSPaystack.

    \n
    this.paystack = new NSPaystack();
    \n

    Initialize the instance with the publicKey gotten from Paystack

    \n
    this.paystack.initialize(publicKey);
    \n

    Charging a Card

    \n

    To charge a card, it is expected that the Form/UI responsible for handling the data collection is handled by you.

    \n
    const payment = this.paystack.payment(<NSPaymentParams>{
        amount: 500000, // In Kobo
        email: \"my.email@gmail.com\",
        number: \"4084084084084081\",
        cvc: \"408\",
        year: 2019,
        month: 3
    });

    payment
        // Add metadata
        .addMetadata(\"Hello\", \"World\")
        // Add custom data fields
        .addCustomField(\"Author\", \"Anonymous\");

    // Listen on when validation modal comes up
    payment.on(NSPayment.openDialogEvent, () => {
        console.log(NSPayment.openDialogEvent);
    });

    // Listen on when validation modal goes out
    payment.on(NSPayment.closeDialogEvent, () => {
        console.log(NSPayment.closeDialogEvent);
    });

    payment
        .charge()
        .then(({ reference }) => {
            alert(`Reference: ${reference}`);
        })
        .catch(({ code, message, reference }) => {
            alert(`An error occured`);
            console.log(`Code: ${code}`);
            console.log(`Message: ${message}`);
            console.log(`Reference: ${reference}`); // If any
        });
    \n

    API

    \n

    Payload Signature

    \n

    The payload signature is also available via the definition files.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ArgumentTypeDescription
    numberstringthe card number without any space seperator
    monthnumberthe card expiry month ranging from 1-12
    yearnumberthe card expiry year in a four-digits e.g 2019
    cvcstringthe card 3/4 digit security code
    amountnumberthe charge amount in kobo
    emailstringthe customer's email address
    \n

    Response Signature

    \n

    Promise response signature is also available via the definition files.

    \n

    Success Response

    \n
    interface NSPaystackSuccessResponse {
        reference: string;
    }
    \n

    Error Response

    \n
    export interface NSPaystackErrorResponse {
        code: number | string;
        message: string;
        reference?: string;
    }
    \n

    Note

    \n

    It is expected that all tests be carried out on an actual device.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-camera-plus":{"name":"@codesthings/nativescript-camera-plus","version":"4.0.4","license":"Apache-2.0","readme":"\n

    NativeScript Camera Plus

    \n    \n

    A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

    \n

    \n\n \"LiveShopper\n \n

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n
    \n

    Installation

    \n
    ns plugin add @nstudio/nativescript-camera-plus
    \n

    Note :- Android\nPlease add the following to your app.gradle

    \n
    android {
    ...
     compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
    }
    \n

    Sample

    \n

    Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

    \n

    \"Camera

    \n

    Demo

    \n

    The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

    \n

    Android Emulator Note

    \n

    The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefaultDescription
    debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
    confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
    confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
    confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
    saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
    galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
    showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
    showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
    showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
    showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
    enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
    \n

    Static Properties

    \n

    Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
    defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
    \n

    Android Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
    flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
    toggleCameraIconstringName of app_resource drawable for the toggle camera button.
    takePicIconstringName of app_resource drawable for the take picture (capture) button.
    galleryIconstringName of app_resource drawable for the open gallery (image library) button.
    autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
    \n

    iOS Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
    \n

    Cross Platform Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    isCameraAvailable()Returns true if the device has at least one camera.
    toggleFlash()Toggles the flash mode on the active camera.
    toggleCamera()Toggles the active camera on the device.
    chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
    takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
    getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
    record(opts?: IVideoOptions)Starts recording a video.
    stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
    \n

    Android Only Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
    hasCameraPermission()Returns true if the application has been granted access to the device camera.
    requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
    hasStoragePermissions()Returns true if the application has been granted access to the device storage.
    getNumberOfCameras()Returns the number of cameras on the device.
    hasFlash()Returns true if the active camera has a flash mode.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    errorEventExecutes when an error is emitted from CameraPlus
    photoCapturedEventExecutes when a photo is taken.
    toggleCameraEventExecutes when the device camera is toggled.
    imagesSelectedEventExecutes when images are selected from the device library/gallery.
    videoRecordingStartedEventExecutes when video starts recording.
    videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
    videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
    confirmScreenShownEventExecutes when the picture confirm dialog is shown..
    confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
    \n

    Option Interfaces

    \n
    export interface ICameraOptions {
      confirm?: boolean;
      saveToGallery?: boolean;
      keepAspectRatio?: boolean;
      height?: number;
      width?: number;
      autoSquareCrop?: boolean;
      confirmRetakeText?: string;
      confirmSaveText?: string;
    }
    \n
    export interface IChooseOptions {
      width?: number;
      height?: number;
      keepAspectRatio?: boolean;
      showImages?:  boolean;
      showVideos?: boolean;
    }
    \n
    export interface IVideoOptions {
      quality?: CameraVideoQuality;
      confirm?: boolean;
      saveToGallery?: boolean;
      height?: number;
      width?: number;
      disableHEVC?: boolean;
      androidMaxVideoBitRate?: number;
      androidMaxFrameRate?: number;
      androidMaxAudioBitRate?: number;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-libsodium":{"name":"nativescript-simple-libsodium","version":"1.0.6","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Simple Libsodium

    \n

    Sodium is a new, easy-to-use software library for encryption, decryption, signatures, password hashing and more. It's cross-compilable & support most of the modern devices. Using this plugin you will be able to use it directly with your NativeScript project.

    \n

    For iOS I have compiled it directly from source code. For Android I have used Lazysodium native library.

    \n

    Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

    \n

    Platforms supported

    \n
      \n
    1. iOS
      2. \n
    2. Android
      3. \n
    \n

    Libsodium can be use with other programming languages too. You can get more references from here: https://libsodium.gitbook.io/doc/bindings_for_other_languages

    \n

    Installation

    \n
    tns plugin add nativescript-simple-libsodium
    \n

    Usage

    \n

    Import

    \n

    TS/Angular:

    \n
    import { SimpleLibsodium, AEDMethod, AEDValues, Base64Variant, Keybytes, Noncebytes } from 'nativescript-simple-libsodium';

    let simpleLibsodium = new SimpleLibsodium();
    \n

    JavaScript:

    \n
    var mSimpleLibsodium = require(\"nativescript-simple-libsodium\");
    var simpleLibsodium = new mSimpleLibsodium.SimpleLibsodium();
    \n

    Please check the demo project for more details example.

    \n

    Generate Random Data:

    \n
    simpleLibsodium.generateRandomData();
     // OR
    simpleLibsodium.generateKeyWithSuppliedString(\"Jibon Costa\"); // Keep in mind that in order to produce the same key from the same password, the same algorithm, the same salt, and the same values for opslimit and memlimit have to be used. Therefore, these parameters have to be stored for each user.
    \n

    AED Encryption/Decryption:

    \n
    let key = this.simpleLibsodium.generateRandomData(AEDValues.XCHACHA20POLY1305_IETF_KEYBYTES);
    // or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", AEDValues.XCHACHA20POLY1305_IETF_KEYBYTES);

    let enc = this.simpleLibsodium.AEDEncrypt(AEDMethod.XCHACHA20_POLY1305_IETF, \"Hello World\", key.raw);

    console.dir(enc);

    let dec = this.simpleLibsodium.AEDDecrypt(AEDMethod.XCHACHA20_POLY1305_IETF, enc.rawCrypted, key.raw, enc.rawNonce);

    console.dir(dec);
    \n

    Secret Box:

    \n
    let key = this.simpleLibsodium.generateRandomData(Keybytes.SECRETBOX_KEYBYTES);
    // or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", Keybytes.SECRETBOX_KEYBYTES);

    let enc = this.simpleLibsodium.secretBoxEncrypt(\"Hello World\", key.raw);

    console.dir(enc);

    let dec = this.simpleLibsodium.secretBoxOpen(enc.rawCrypted, key.raw, enc.rawNonce);

    console.dir(dec);
    \n

    Salsa20:

    \n
    let key = this.simpleLibsodium.generateRandomData(Keybytes.STREAM_KEYBYTES);
    // or let key = this.simpleLibsodium.generateKeyWithSuppliedString(\"myKey\", Keybytes.STREAM_KEYBYTES);

    let enc = this.simpleLibsodium.xSalsa20Encrypt(\"Hello World\", key.raw);

    console.dir(enc);

    let dec = this.simpleLibsodium.xSalsa20Decrypt(enc.rawCrypted, key.raw, enc.rawNonce);

    console.dir(dec);
    \n

    Box Easy:

    \n
    let bob = this.simpleLibsodium.boxKeyPaired();
    let alice = this.simpleLibsodium.boxKeyPaired();

    // Bob sending message to Alice. So, here will need Alice's public key & Bob's private/secret key
    let enc = this.simpleLibsodium.boxEasy(\"Hello World\", alice.public_key, bob.private_key);

    console.dir(enc);

    // Alice got the message from Bob. Now Alice need his private key & Bob's public key.
    let dec = this.simpleLibsodium.boxOpenEasy(enc.rawCrypted, enc.rawNonce, bob.public_key, alice.private_key);

    console.dir(dec);
    \n

    Password Hash/Verification:

    \n
    let enc = this.simpleLibsodium.passwordHash(\"MyPassword\");

    console.dir(enc);

    if (this.simpleLibsodium.passwordHashVerify(enc.plainHash, \"MyPassword\")) {
      console.log(\"Password Matched!\");
    } else {
      console.log(\"Password invalid!\");
    }
    \n

    Crypto Authentication/Verification:

    \n
    let enc = this.simpleLibsodium.cryptoAuth(\"Jibon Costa\");

    console.dir(enc);

    if (this.simpleLibsodium.cryptoAuthVerify(enc.rawCrypted, \"Jibon Costa\", enc.rawKey)) {
      console.log(\"Matched !\")
    } else {
      console.log(\"Didn't match\")
    }
    \n

    SHA-256/512 Hash:

    \n
    let enc = this.simpleLibsodium.SHA2Hash(\"MyPassword\", 512); // or 256
    console.dir(enc);
    \n

    Methods/API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsDescriptionReference
    generateRandomData(length?: number)Generate Random Datahttps://libsodium.gitbook.io/doc/generating_random_data
    generateKeyWithSuppliedString(mykey: string, length?: number, salt?: any, opslimit?: number, memlimit?: number)Generate Random Data with Key. Algorithm: crypto_pwhash_ALG_ARGON2I13, opslimit: crypto_pwhash_OPSLIMIT_MIN, memlimit: crypto_pwhash_MEMLIMIT_MIN. If you don't provide anything for salt then it will generate automatically & return back as output. Keep in mind that in order to produce the same key from the same password, the same algorithm, the same salt, and the same values for opslimit and memlimit have to be used.https://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#key-derivation
    AEDEncrypt(method: AEDMethod, msg: string, key: any, nonce?: any, additionalMsg?: string)AED Encryption. Here nonce & additionalMsg are optional. If you don't insert anything as nonce then it will generate nonce automatically. If you don't insert anything as additionalMsg then Hexadecimal value of nonce will be use as additionalMsg.https://libsodium.gitbook.io/doc/secret-key_cryptography/aead
    AEDDecrypt(method: AEDMethod, encrypData: any, key: any, nonce: any, additionalMsg?: string)AED Decryption. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/aead
    secretBoxEncrypt(text: string, key: any, nonce?: any)Authenticated encryption. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/secret-key_cryptography/authenticated_encryption#combined-mode
    secretBoxOpen(encrypData: any, key: any, nonce: any)Authenticated decryption. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/authenticated_encryption#combined-mode
    xSalsa20Encrypt(message: string, key: any, nonce?: any)Stream cipher. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/advanced/stream_ciphers/xsalsa20
    xSalsa20Decrypt(encrypData: any, key: any, nonce: any)Stream cipher. Here encrypData, key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/advanced/stream_ciphers/xsalsa20
    boxEasy(msg: string, public_key: any, private_key: any, nonce?: any)Authenticated encryption with key pair. If you don't insert anything as nonce then it will generate nonce automatically.https://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption
    boxOpenEasy(ciphertext: any, public_key: any, private_key: any, nonce: any)Authenticated decryption with key pair. Here ciphertext, public_key, private_key & nonce should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption
    boxKeyPaired()Key pair generationhttps://libsodium.gitbook.io/doc/public-key_cryptography/authenticated_encryption#key-pair-generation
    passwordHash(password: string), opslimit?: number, memlimit?: numberPassword hash for storage. opslimit: crypto_pwhash_OPSLIMIT_INTERACTIVE, memlimit: crypto_pwhash_MEMLIMIT_INTERACTIVEhttps://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#password-storage
    passwordHashVerify(plainHash: any, password: string)Password verification. Here the value plainHash should need to plain text/string.https://libsodium.gitbook.io/doc/password_hashing/the_argon2i_function#password-storage
    cryptoAuth(msg: string)Authenticationhttps://libsodium.gitbook.io/doc/secret-key_cryptography/secret-key_authentication
    cryptoAuthVerify(ciphertext: any, msg: string, key: any)Authentication verification. Here the value ciphertext & key should need to be binary data. If you have Hexadecimal or base64 string then you will need to convert before using. In this case you can use hexTobin() or base64Tobytes() methods to convert.https://libsodium.gitbook.io/doc/secret-key_cryptography/secret-key_authentication#usage
    SHA2Hash(msg: string, type?: number)SHA-2 (SHA 256/512). The value of type will be either 256 or 512https://libsodium.gitbook.io/doc/advanced/sha-2_hash_function
    binTohex(binary: any)Hexadecimal encodinghttps://libsodium.gitbook.io/doc/helpers#hexadecimal-encoding-decoding
    hexTobin(hex: string)Hexadecimal decodinghttps://libsodium.gitbook.io/doc/helpers#hexadecimal-encoding-decoding
    bytesToBase64(data: any, variant?: Base64Variant)Base64 encodinghttps://libsodium.gitbook.io/doc/helpers#base64-encoding-decoding.
    base64Tobytes(base64String: string, variant?: Base64Variant)Base64 decodinghttps://libsodium.gitbook.io/doc/helpers#base64-encoding-decoding
    stringTodata(text: string)String text to BinaryNative Implementation
    dataTostring(data: any)Binary to textNative Implementation
    \n

    Note: You can add more methods or API from core sodium package to your project easily.

    \n

    Android:

    \n
    let simpleLibsodium = new SimpleLibsodium();
    let sodium = simpleLibsodium.sodium
    // now you can call any method/api from core sodium package.
    sodium.crypto_secretbox_keygen();
    \n

    iOS:

    \n
    // From iOS you will be able to call the methods directly.
    crypto_secretbox_keygen();
    \n

    For getting typescript typings support you can add following lines in you references.d.ts file:

    \n
    /// <reference path=\"./node_modules/nativescript-simple-libsodium/typingz/android.d.ts\" />
    /// <reference path=\"./node_modules/nativescript-simple-libsodium/typingz/objc!sodium.d.ts\" />
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-snapkit":{"name":"nativescript-snapkit","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Snap Kit plugin

    \n

    \"NPM\n\"Twitter

    \n

    \"Snap

    \n

    What!?

    \n

    Glad you asked. This repo implements a NativeScript plugin for Snapchat's Snap Kit SDK.\nIn its first iteration, this plugin only exposes the 'login' feature, called Login Kit.\nFeel free to open an issue requesting other features (other parts of the Snap Kit SDK are: Creative Kit, Bitmoji Kit, and Story Kit).

    \n

    Installation

    \n
    tns plugin add nativescript-snapkit
    \n

    Configuration

    \n

    Hop on over to the Snap Kit developer portal and create an app.

    \n

    Android

    \n

    Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

    \n
      \n
    • Open App_Resources/AndroidManifest.xml and add the com.snapchat.kit.sdk.clientId as shown here.
      • \n
    • While you're there, also add com.snapchat.kit.sdk.redirectUrl as shown here.
      • \n
    • And lastly, com.snapchat.kit.sdk.SnapKitActivity as shown here (make sure you adjust that android:scheme!).
      • \n
    \n

    iOS

    \n

    Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

    \n\n

    iOS startup wiring

    \n

    When using Login Kit's features on iOS, you will need to require (not import) the plugin before the app is bootstrapped.

    \n
    \n

    Failing to do so will mean Snapchat won't redirect back to your app after logging in.

    \n
    \n

    Demo app

    \n

    If you want to test logging in with your own Snapchat login, then the demo app is a good starting point.\nHowever, it only allows logging in with user eddyverbruggen so you'll need to update its configuration as mentioned above.

    \n

    Follow these steps to install the demo app:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-snapkit
    cd nativescript-snapkit/src
    npm i
    # change the configuration, then:
    npm run demo.ios # or demo.android
    \n

    API (Login Kit)

    \n

    login

    \n

    The login function takes a boolean parameter (default false) indicating whether or not you want the plugin to retrieve user details.

    \n
    import { LoginKit } from \"nativescript-snapkit\";

    LoginKit.login(true)
        .then(result => console.log(`Login successful, details: ${JSON.stringify(result)}`))
        .catch(error => console.log(`Login failed. Details: ${error}`));
    \n

    isLoggedIn

    \n

    This function takes the same boolean parameter as login (default false).\nIf false, this function will return a boolean. Otherwise it will return user details in case the user was indeed logged in, or false if he was not logged in.

    \n
    import { LoginKit } from \"nativescript-snapkit\";

    // use it either like this (no parameter, or 'false')
    LoginKit.isLoggedIn()
        .then(loggedIn => console.log(`User was logged in? ${loggedIn}`));

    // or use it like this, to get the details (in case the user was indeed logged in)
    LoginKit.isLoggedIn(true)
        .then(result => {
          if (!result) {
            console.log(`User was not logged in.`);
          } else {
            console.log(`User was logged in. User details: ${JSON.stringify(result)}`)
          }
        });
    \n

    logout

    \n
    import { LoginKit } from \"nativescript-snapkit\";

    LoginKit.logout()
        .then(() => console.log(\"Logged out\"));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-star-ratings-ext":{"name":"nativescript-star-ratings-ext","version":"1.0.0","license":"Apache-2.0","readme":"

    #ATENTION. DOES NOT INSTALL HIS LIBRARY. THIS IS A TEST PROJECT#. DOWNLOAD THE RIGHT LIBRARY

    \n

    #FORKED FROM:

    \n

    NativeScript Star Ratings

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-star-ratings
    \n

    Configuration

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-star-ratings" on the\nPage element

    \n
    <ui:StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"2\" max=\"5\"/>
    \n

    Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);
    \n
    <StarRating emptyBorderColor=\"white\" emptyColor=\"white\" filledBorderColor=\"black\" filledColor=\"red\" value=\"{{value}}\" max=\"{{max}}\" isindicator=\"false\"></StarRating>
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    emptyBorderColorbluestring
    • - [ ]
    		IOS only
    emptyColorwhitestring
    • - [ ]
    filledBorderColorbluestring
    • - [ ]
    		IOS only
    filledColorbluestring
    • - [ ]
    value0number
    • - [ ]
    max5number
    • - [ ]
    isindicatorfalseboolean
    • - [ ]
    		Android only
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [ ] Custom images
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sensors":{"name":"nativescript-sensors","version":"1.0.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-sensors
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Need to be written

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-cognitiveservices":{"name":"nativescript-azure-cognitiveservices","version":"1.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    nativescript-azure-cognitiveservices

    \n

    Azure cognitive services implementation for NativeScript. Both iOS & Android platfroms are supported.

    \n

    Features:

    \n
      \n
    • Speech to Text
      • \n
    • Text to Speech
      • \n
    • WAV recorder
      • \n
    \n

    Note: When you will use this service that time UI will keep block until any result will come. I'll recommend to use NativeScript Worker Loader to run the service in background

    \n

    Installation

    \n
    tns plugin add nativescript-azure-cognitiveservices
    \n

    Usage (Please check demo project for details)

    \n

    Import

    \n

    JavaScript:

    \n
    var azure = require(\"nativescript-azure-cognitiveservices\");
    var azureService = new azure.AzureCognitiveservices(\"API_KEY\", \"Region\");
    \n

    TS:

    \n
    import { AzureCognitiveservices, SpeechSynthesisResult, SpeechToTextResult } from \"nativescript-azure-cognitiveservices\";

    constructor() {
        this.azureService = new AzureCognitiveservices(\"API_KEY\", \"Region\");
    }
    \n

    Functions

    \n
    speechSynthesis(contents: any, voiceName?: string): any;
    speechToTextRecognizeOnce(audioFile?: string, recognitionLanguage?: string): any;
    startContinuousRecognition(recognitionLanguage?: string): any;
    stopContinuousRecognition(): void;
    startRecorder(fileName?: string): void;
    stopRecorder(): any;
    audioDataSaveAsMP3(audioData: any, fileName?: string): Promise<string>;
    \n

    Require Permission:

    \n

    Android:

    \n
    <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
    \n

    iOS:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvaslabel":{"name":"nativescript-canvaslabel","version":"1.0.10","license":"ISC","readme":"

    NativeScript Label widget

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Label widget. This widget takes a different approch from other label components. It is based on nativescript-canvas and allows drawing\nmultiple labels within one single widget.\nIt allows extreme complexity and customization.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-canvaslabel

    \n

    This command automatically installs the necessary files, as well as stores nativescript-canvaslabel as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    It works almost like a normal label.\nYou can create spans, just like with the {N} labels. However there is a big difference with the {N} component.\nCSpan do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.

    \n

    For now CanvasLabel do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.

    \n

    The CanvasLabel component supports most labels properties:\ncolor, fontSize,fontFamily,fontStyle, fontWeight,textAlignment. Those can be defined through css.

    \n

    Now with CanvasLabel you don't set the text directly. Instead you create CSpan or CGroup

    \n

    Here is a complex Vue layout as an example

    \n
    <CanvasLabel id=\"canvaslabel\" fontSize=\"10\" color=\"white\" backgroundColor=\"darkgray\">
        <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
            <CSpan :text=\"item.text1\" fontWeight=\"bold\" />
            <CSpan :text=\"'\\n' + item.text2\" color=\"#ccc\" fontSize=\"16\" />
        </CGroup>

        <CGroup fontSize=\"12\" verticalAlignment=\"bottom\" paddingLeft=\"20\" paddingBottom=\"1\">
            <CSpan :text=\"item.icon1\" fontSize=\"20\" color=\"green\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon1\" verticalTextAlignment=\"center\" />
            <CSpan :text=\"'   ' + item.icon2\" fontSize=\"20\" color=\"red\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon2\" verticalTextAlignment=\"center\" />
            <CSpan :text=\"'   ' + item.icon3\" fontSize=\"20\" color=\"yellow\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"' ' + item.texticon3\" verticalTextAlignment=\"center\" />
        </CGroup>

        <CGroup fontSize=\"12\" verticalAlignment=\"middle\" horizontalAlignment=\"center\" textAlignment=\"right\" paddingRight=\"20\" color=\"brown\" width=\"60\">
            <CSpan :text=\"item.icon1\" fontSize=\"14\" :fontFamily=\"mdiFontFamily\" />
            <CSpan :text=\"'\\n' + item.texticon1\" paddingRight=\"10\" />
        </CGroup>
        <CSpan :text=\"item.text4\" color=\"lightgray\" fontSize=\"14\" textAlignment=\"right\" paddingRight=\"20\" paddingTop=\"4\" />
    </CanvasLabel>
    \n

    For full example / doc look at the vue demo and the typings.

    \n

    Performances

    \n

    CanvasLabel is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.\nThat technique is used by many apps looking for the best performances. One of the best examples is Telegram.

    \n

    TODO / Limitations

    \n
      \n
    • For now there is no accessibility support (but it should be possible)
      • \n
    • The label can't size itself. I will add some ways of doing that. But possibly not in the way you are used to.
      • \n
    • no ellipsize support yet. Will come (this could be a solution)
      • \n
    • a lot of canvas features can be added like shadows, gradient ...
      • \n
    • transform supoort should be possible at least for groups and top spans.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/mlkit-digital-ink-recognition":{"name":"@nativescript/mlkit-digital-ink-recognition","version":"2.0.0","license":"Apache-2.0","readme":"

    @nativescript/mlkit-digital-ink-recognition

    \n
    npm install @nativescript/mlkit-digital-ink-recognition
    \n

    Usage

    \n

    See @nativescript/mlkit-core Usage

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tylerkanz/nativescript-nfc":{"name":"@tylerkanz/nativescript-nfc","version":"5.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@elgibor-solution/nativescript-sentry":{"name":"@elgibor-solution/nativescript-sentry","version":"1.0.1","license":"Apache-2.0","readme":"

    @esolution/nativescript-sentry

    \n

    This package was forked from the unmaintained package\ndanielgek/nativescript-sentry. We are currently\ncleaning up and updating the code.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stringformat":{"name":"nativescript-stringformat","version":"2.3.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-stringformat/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript StringFormat

    \n

    A NativeScript module for handling strings.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-stringformat
    \n

    inside your app project to install the module.

    \n

    Demo

    \n

    For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

    \n

    Otherwise ...

    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Examples

    \n

    Simple example

    \n
    import StringFormat = require('nativescript-stringformat');

    // \"TM + MK\"
    var newStr1 = StringFormat.format(\"{0} + {1}\",
                                      \"TM\",  // {0}
                                      \"MK\");  // {1}
                                     
    // the alternative:
    var newStr2 = StringFormat.formatArray(\"{0} + {1}\",
                                           [\"TM\", \"MK\"]);
    \n

    Custom order of arguments

    \n
    import StringFormat = require('nativescript-stringformat');

    // \"Marcel Kloubert\"
    var newStr = StringFormat.format(\"{1} {0}\",
                                     \"Kloubert\",   // {0}
                                     \"Marcel\");  // {1}
    \n

    Functions as arguments

    \n

    You can use functions that return the value that should be included into the target string:

    \n
    import StringFormat = require('nativescript-stringformat');

    // \"23091979 + 5091979 = 28183958\"
    var newStr = StringFormat.format(\"{0} + {1} = {2}\",
                                     23091979,  // {0}
                                     5091979,  // {1}
                                     function (index, args) {  // {2}
                                         return args[0] + args[1];  // 28183958
                                     });
    \n

    The full signature of a function:

    \n
    function (index, args, match, formatExpr, funcDepth) {
        return <THE-VALUE-TO-USE>;
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    indexThe index value of the argument. For {7} this will be 7
    argsThe values that were passed to the underlying format() or formatArray() function.
    matchThe complete (unhandled) expression of the argument.
    formatExprThe optional format expression of the argument. For {0:lower} this will be lower.
    funcDepthThis value is 0 at the beginning. If you return a function in that function again, this will increase until you stop to return a function.
    \n

    Format providers

    \n

    Separated by a : an argument can contain a format expression at the right side.

    \n

    So you can define custom logic to convert an argument value.

    \n

    Lets say we want to define a format provider that converts values to upper and lower case strings:

    \n
    import StringFormat = require(\"nativescript-stringformat\");

    StringFormat.addFormatProvider(function(ctx) {    
        var toStringSafe = function() { 
            return ctx.value ? ctx.value.toString() : \"\";
        }
        
        if (ctx.expression === \"upper\") {
            // UPPER case
            ctx.handled = true;
            return toStringSafe().toUpperCase();
        }
        
        if (ctx.expression === \"lower\") {
            // LOWER case
            ctx.handled = true;
            return toStringSafe().toLowerCase();
        }
    });
    \n

    Now you can use the extended logic in your code:

    \n
    import StringFormat = require('nativescript-stringformat');

    // MARCEL kloubert
    var newStr = StringFormat.format(\"{0:upper} {1:lower}\",
                                     \"Marcel\", \"KlOUBERT\");
    \n

    The ctx object of a provider callback has the following structure:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    expressionThe expression right to :. In that example upper and lower.
    handledDefines if value was handled or not. Is (false) by default.
    valueThe value that should be parsed. In that example Marcel and KlOUBERT.
    \n

    The parsed value has to be returned and ctx.handled has to be set to (true).

    \n

    All upcoming format providers will be skipped if the value has been marked as "handled".

    \n

    Helper functions and classes

    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    compareCompares two strings.
    concatJoins elements of an array to one string.
    isEmptyChecks if a string is undefined, (null) or empty.
    isEmptyOrWhitespaceChecks if a string is undefined, (null), empty or contains whitespaces only.
    isNullOrEmptyChecks if a string is (null) or empty.
    isNullOrUndefinedChecks if a string is (null) or undefined.
    isNullOrWhitespaceChecks if a string is (null), empty or contains whitespaces only.
    isWhitespaceChecks if a string is empty or contains whitespaces only.
    joinJoins elements of an array to one string by using a separator.
    similarityCalculates the similarity between two strings.
    \n

    Classes

    \n
    StringBuilder
    \n
    import StringFormat = require('nativescript-stringformat');

    var builder = new StringFormat.StringBuilder();

    for (var i = 0; i < 5; i++) {
        builder.appendFormat(\"Line #{1}: {0}\", i, i + 1)
               .appendLine();
    }

    // \"Line 1: 0
    // Line 2: 1
    // Line 3: 2
    // Line 4: 3
    // Line 5: 4\"
    var str = builder.toString();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shadowed-label":{"name":"nativescript-shadowed-label","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Shadowed Label

    \n\n \"npm\"\n\n\n \"npm\"\n\n\n \"stars\"\n\n\n \"donate\"\n\n

    A NativeScript plugin that extends the <Label> UI widget by adding the text-shadow CSS property.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    shadow examplessample from the playground
    \"\"\"\"
    \n

    Installation

    \n
    tns plugin add nativescript-shadowed-label
    \n

    Usage

    \n

    After installing the plugin, you can add the shadow to the shadowed label with the CSS syntax:

    \n

    text-shadow: <offset-x> <offset-y> <blur-radius> <color>

    \n

    E.g.

    \n
    .shadow1 {
        text-shadow: 1 1 3 blue;
    }

    .shadow2 {
        text-shadow: 10px 10px 10px rgba(100, 130, 200, 0.8);
    }
    \n

    You can also add the text shadow as a property (e.g. <ShadowedLabel textShadow="1 1 1 #55a">)

    \n

    iOS note: The blur radius appears scatters the shadow more on iOS and on Android.

    \n

    NativeScript Plain

    \n

    IMPORTANT: Make sure you include xmlns:shadowedLabel="nativescript-shadowed-label" on the Page element

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:shadowedLabel=\"nativescript-shadowed-label\">
      <StackLayout class=\"p-20\">
        <shadowedLabel:ShadowedLabel
          class=\"h1 text-center\"
          text=\"title with CSS shadow\"
        />
        <shadowedLabel:ShadowedLabel
          text=\"color shadow\"
          textShadow=\"2 10 4 rgb(255, 100, 100)\"
          fontStyle=\"italic\"
          fontSize=\"40\"
          class=\"m-b-20 text-center\"
        />
        <shadowedLabel:ShadowedLabel
          class=\"m-t-20 c-black\"
          style    =\"text-shadow: 1 1 1 #55a\"
          textWrap=\"true\"
          text=\"Shadow in 'style'!\"
        />
      </GridLayout>
    </Page>
    \n

    CSS

    \n
    .h1 {
        text-shadow: 2 2 2 #aaa;
        font-weight: bold;
    }
    \n
    \n

    NativeScript Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { ShadowedLabel } from 'nativescript-shadowed-label;
    registerElement('    ShadowedLabel', () => ShadowedLabel);
    \n
    <ShadowedLabel class=\"h1 text-center\" text=\"title with CSS shadow\" />
    <ShadowedLabel
        text=\"color shadow\"
        textShadow=\"2 10 4 rgb(255, 100, 100)\"
        fontStyle=\"italic\"
        fontSize=\"40\"
        class=\"m-b-20 text-center\"
    />
    <ShadowedLabel
        class=\"m-t-20 c-black\"
        style    =\"text-shadow: 1 1 1 #55a\"
        textWrap=\"true\"
        text=\"Shadow in 'style'!\"
    />
    \n
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';
    Vue.registerElement('ShadowedLabel', () => require('nativescript-shadowed-label').ShadowedLabel);
    \n
    <shadowed-label
        text=\"color shadow\"
        textShadow=\"2 10 4 rgb(255, 100, 100)\"
        fontStyle=\"italic\"
        fontSize=\"40\"
        class=\"m-b-20 text-center\"
    />
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/flutter":{"name":"@nativescript/flutter","version":"0.1.3","license":"Apache-2.0","readme":"

    @nativescript/flutter

    \n

    Use Flutter with NativeScript projects by creating a Flutter module in the root of your project.

    \n

    Usage

    \n

    Prerequisites:

    \n\n

    1. Add Flutter to a NativeScript app

    \n

    You can use Flutter in any existing NativeScript app or by creating a new one with ns create.

    \n

    We can then create a Flutter module at the root of the project directory:

    \n
    flutter create --template module flutter_views
    \n

    Note: You can run flutter run --debug or flutter build ios from inside this flutter_views folder as any normal Flutter project to develop it.

    \n

    Learn more from the Flutter documentation here.

    \n

    2. Configure your Dart code to have named entry points

    \n

    Named entry points allow us to use different Flutter views in our NativeScript app by matching the entry point with the view id, for example: <Flutter id="myFlutterView" />

    \n
      \n
    • main.dart
      • \n
    \n
    @pragma('vm:entry-point')
    void myFlutterView() => runApp(const MyFlutterView());
    \n

    3. Configure platforms for usage

    \n

    iOS

    \n

    App_Resources/iOS/Podfile should contain the following to reference our Flutter module.

    \n
    platform :ios, '14.0'

    flutter_application_path = '../../flutter_views'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    install_all_flutter_pods(flutter_application_path)

    post_install do |installer|
        flutter_post_install(installer) if defined?(flutter_post_install)
    end
    \n

    Add Flutter debug permissions to App_Resources/iOS/Info.plist:

    \n
    <key>NSLocalNetworkUsageDescription</key>
    <string>Allow Flutter tools to debug your views.</string>
    <key>NSBonjourServices</key>
    <array>
      <string>_dartobservatory._tcp</string>
    </array>
    \n

    Android

    \n

    App_Resources/Android/app.gradle should contain the following:

    \n
    android {
      // ...

      defaultConfig {
        // ...

        // Add this section:
        ndk {
          // Filter for architectures supported by Flutter.
          abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
        }
      }
    \n

    App_Resources/Android/settings.gradle (create file if needed) should contain the following:

    \n
    def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()

    def plugins = new Properties()
    def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
    if (pluginsFile.exists()) {
        pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
    }

    plugins.each { name, path ->
      def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
      include \":$name\"
      project(\":$name\").projectDir = pluginDirectory
    }

    setBinding(new Binding([gradle: this]))
    evaluate(new File(
      settingsDir.parentFile,
      // use the flutter module folder name you created here.
      // for example, a flutter module called 'flutter_views' exist at root of project
      '../flutter_views/.android/include_flutter.groovy'
    ))
    \n

    Build the module anytime you want to see your Dart changes reflected in NativeScript:

    \n
    cd flutter_views/.android

    # This will build debug mode
    ./gradlew Flutter:assemble

    # This will build release mode
    ./gradlew Flutter:assembleRelease
    \n

    4. Install @nativescript/flutter

    \n
    npm install @nativescript/flutter
    \n

    5. Use Flutter wherever desired

    \n

    Be sure to initialize the Flutter engine before bootstrapping your app, typically in app.ts or main.ts:

    \n
    import { init } from '@nativescript/flutter';
    init();

    // bootstrap app...
    \n

    When using flavors, you can just register the element for usage in your markup:

    \n
    import { Flutter } from '@nativescript/flutter'

    // Angular
    import { registerElement } from '@nativescript/angular'
    registerElement('Flutter', () => Flutter)

    // Solid
    import { registerElement } from 'dominative';
    registerElement('flutter', Flutter);

    // Svelte
    import { registerNativeViewElement } from 'svelte-native/dom'
    registerNativeViewElement('flutter', () => Flutter);

    // React
    import { registerElement } from 'react-nativescript';
    registerElement('flutter', () => Flutter);

    // Vue
    import Vue from 'nativescript-vue'
    Vue.registerElement('Flutter', () => Flutter)
    \n

    Use Flutter anywhere.

    \n
    <Flutter id=\"myFlutterView\"></Flutter>
    \n

    Troubleshooting

    \n

    Common troubleshooting tips:

    \n

    Android

    \n

    Before running Android, you will want to build the flutter module first. Otherwise you may see this error:

    \n
    Transform's input file does not exist: flutter_views/.android/Flutter/build/intermediates/flutter/debug/libs.jar
    \n

    You can fix by running the following:

    \n
    cd flutter_views/.android

    # This will build debug mode
    ./gradlew Flutter:assemble

    # This will build release mode
    ./gradlew Flutter:assembleRelease
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync":{"name":"nativescript-app-sync","version":"2.0.0","license":"MIT","readme":"

    NativeScript AppSync plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    A live-update service for your NativeScript apps!

    \n
    \n

    📣 NOTE: NativeScript AppSync is currently in beta and is not supported by the core NativeScript team. AppSync is based on Microsoft CodePush and we owe them thanks because this solution builds upon their work. ❤️

    \n
    \n
    \n Optional reading: what this is, and how it works\n

    A NativeScript app is composed of XML/HTML, CSS and JavaScript files and any accompanying images, which are bundled together by the NativeScript CLI and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.

    \n

    The AppSync plugin helps get product improvements in front of your end users instantly, by keeping your code and images synchronized with updates you release to the AppSync server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!

    \n

    In order to ensure that your end users always have a functioning version of your app, the AppSync plugin maintains a copy of the previous update, so that in the event that you accidentally push an update which includes a crash, it can automatically roll back. This way, you can rest assured that your newfound release agility won't result in users becoming blocked before you have a chance to roll back on the server. It's a win-win-win!

    \n\n

    Architectural overview of the solution - you don't need to worry about all of this

    \n
    \n

    What can (and will) be AppSync'ed?

    \n
      \n
    • Anything inside your /app folder (but not the App_Resources folder).
      • \n
    • Anything inside your /node_modules folder.
      • \n
    \n
    \n

    💁‍♂️ Note that we don't actually use those folders, but the app folder in platforms/ios/<appname>/app and platforms/android/app/src/main/assets/app, the benefit of which is we don't "care" if you use Webpack or Uglify or whatever tools you use to minify or scramble your app's assets.

    \n
    \n

    What can't (and won't):

    \n
      \n
    • NativeScript platform updates. Example: bumping tns-android from version 2.5.1 to 2.5.2.
      • \n
    • Plugins updates that also require a different version of a native library it depends on.
      • \n
    • Contents of the App_Resources folder, because those are part of the native binary as well.
      • \n
    \n

    So as long as you don't change versions of dependencies and tns platforms in your package.json you\ncan push happily. And if you do bump a version of a dependency make sure there are no changed platform libraries.

    \n

    Getting Started

    \n

    Globally install the NativeScript AppSync CLI

    \n
    npm i -g nativescript-app-sync-cli
    \n
    \n

    💁‍♂️ This will also add the global nativescript-app-sync command to your machine. You can check the currently installed version with nativescript-app-sync -v.

    \n
    \n

    Login or register with the service

    \n

    Check if you're already logged in, and with which email address:

    \n
    nativescript-app-sync whoami
    \n

    Log in if you already have an account:

    \n
    nativescript-app-sync login
    \n

    Register if you don't have an account yet:

    \n
    nativescript-app-sync register
    \n

    This will open a browser where you can provide your credentials, after which you can create an access key that\nyou can paste in the console.

    \n

    You should now have a .nativescript-app-sync.config file in your home folder which will automatically\nauthenticate you with the server on this machine from now on.

    \n
    \n

    Note that you could use a that web interface for managing you apps, but the CLI is much more sophisticated, so it's recommended to use the command line interface.

    \n
    \n

    To log out, you can run nativescript-app-sync logout which will also remove the config file.

    \n

    To perform a headless login (without opening a browser), you can do: nativescript-app-sync login --accessKey <access key>.

    \n

    Register your app with the service

    \n

    Create an app for each platform you target. That way you can roll out release seperately for iOS and Android.

    \n
    \n

    ⚠️ The appname must be unique, and should not contain dashes (-).

    \n
    \n
    nativescript-app-sync app add <appname> <platform>

    # examples:
    nativescript-app-sync app add MyAppIOS ios
    nativescript-app-sync app add MyAppAndroid android
    \n
    \n

    💁‍♂️ This will show you your deployment keys you'll need when connecting to the AppSync server. If you want to list those keys at any later time, use nativescript-app-sync deployment ls <appName> --displayKeys.

    \n
    \n
    \n

    💁‍♂️ All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels. If you need more channels/deployments, simply run: nativescript-app-sync deployment add <appName> <deploymentName>.

    \n
    \n
    \n

    💁‍♂️ Want to rename your app? At any time, use the command: nativescript-app-sync app rename <oldName> <newName>

    \n
    \n
    \n

    💁‍♂️ Want to delete an app? At any time, use the command: nativescript-app-sync app remove <appName> - this means any apps that have been configured to use it will obviously stop receiving updates.

    \n
    \n

    List your registered apps

    \n
    nativescript-app-sync app ls
    \n

    Add this plugin to your app

    \n
    tns plugin add nativescript-app-sync
    \n
    \n

    ⚠️ If you're restricting access to the internet from within your app, make sure you whitelist our AppSync server (https://appsync-server.nativescript.org) and File server (https://s3.eu-west-1.amazonaws.com).

    \n
    \n

    Checking for updates

    \n

    With the AppSync plugin installed and configured, the only thing left is to add the necessary code to your app to control when it checks for updates.

    \n

    If an update is available, it will be silently downloaded, and installed.

    \n

    Then based on the provided InstallMode the plugin either waits until the next cold start (InstallMode.ON_NEXT_RESTART),\nwarm restart (InstallMode.ON_NEXT_RESUME), or a positive response to a user prompt (InstallMode.IMMEDIATE).

    \n

    Note that Apple doesn't want you to prompt the user to restart your app, so use InstallMode.IMMEDIATE on iOS only for Enterprise-distributed apps (or when testing your app through TestFlight for instance).

    \n
    \n

    💁‍♂️ Check out the demo for a solid example.

    \n
    \n
    // import the main plugin classes
    import { AppSync } from \"nativescript-app-sync\";

    // and at some point in your app:
    AppSync.sync({
      deploymentKey: \"your-deployment-key\" // note that this key depends on the platform you're running on (see the example below)
    });
    \n

    There's a few things you can configure - this TypeScript example has all the possible options:

    \n
    import { AppSync, InstallMode, SyncStatus } from \"nativescript-app-sync\";
    import { isIOS } from \"tns-core-modules/platform\";

    AppSync.sync({
        enabledWhenUsingHmr: false, // this is optional and by default false so AppSync and HMR don't fight over app updates
        deploymentKey: isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
        installMode: InstallMode.ON_NEXT_RESTART, // this is the default install mode; the app updates upon the next cold boot (unless the --mandatory flag was specified while pushing the update) 
        mandatoryInstallMode: isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE, // the default is InstallMode.ON_NEXT_RESUME which doesn'    t bother the user as long as the app is in the foreground. InstallMode.IMMEDIATE shows an installation prompt. Don't use that for iOS AppStore distributions because Apple doesn't want you to, but if you have an Enterprise-distributed app, go right ahead!
        updateDialog: { // only used for InstallMode.IMMEDIATE
          updateTitle: \"Please restart the app\", // an optional title shown in the update dialog 
          optionalUpdateMessage: \"Optional update msg\",   // a message shown for non-\"--mandatory\" releases 
          mandatoryUpdateMessage: \"Mandatory update msg\", // a message shown for \"--mandatory\" releases
          optionalIgnoreButtonLabel: \"Later\", // if a user wants to continue their session, the update will be installed on next resume
          mandatoryContinueButtonLabel: isIOS ? \"Exit now\" : \"Restart now\", // On Android we can kill and restart the app, but on iOS that's not possible so the user has to manually restart it. That's why we provide a different label in this example.
          appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to AppSync
        }
      }, (syncStatus: SyncStatus, updateLabel?: string): void => {
        console.log(\"AppSync syncStatus: \" + syncStatus);
        if (syncStatus === SyncStatus.UP_TO_DATE) {
          console.log(`AppSync: no pending updates; you're running the latest version, which is ${updateLabel}`);
        } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
          console.log(`AppSync: update installed (${updateLabel}) - it will be activated upon next cold boot`);
        }
    });
    \n
    \n Click here to see a JavaScript example\n
    var AppSync = require(\"nativescript-app-sync\").AppSync;
    var InstallMode = require(\"nativescript-app-sync\").InstallMode;
    var SyncStatus = require(\"nativescript-app-sync\").SyncStatus;
    var platform = require(\"tns-core-modules/platform\");

    AppSync.sync({
        enabledWhenUsingHmr: false, // this is optional and by default false so AppSync and HMR don't fight over app updates
        deploymentKey: platform.isIOS ? \"your-ios-deployment-key\" : \"your-android-deployment-key\",
        installMode: InstallMode.ON_NEXT_RESTART,
        mandatoryInstallMode: platform.isIOS ? InstallMode.ON_NEXT_RESUME : InstallMode.IMMEDIATE,
        updateDialog: {
          optionalUpdateMessage: \"Optional update msg\",
          updateTitle: \"Please restart the app\",
          mandatoryUpdateMessage: \"Mandatory update msg\",
          optionalIgnoreButtonLabel: \"Later\",
          mandatoryContinueButtonLabel: platform.isIOS ? \"Exit now\" : \"Restart now\",
          appendReleaseDescription: true // appends the description you (optionally) provided when releasing a new version to AppSync
        }
    }, function (syncStatus, updateLabel) {
        if (syncStatus === SyncStatus.UP_TO_DATE) {
          console.log(\"AppSync: no pending updates; you're running the latest version, which is: \" + updateLabel);
        } else if (syncStatus === SyncStatus.UPDATE_INSTALLED) {
          console.log(\"AppSync: update (\" + updateLabel + \") installed - it will be activated upon next cold boot\");
        }
    });
    \n
    \n

    When should this check run?

    \n

    It's recommended to check for updates more than once in a cold boot cycle,\nso it may be easiest to tie this check to the resume event (which usually also runs on app startup):

    \n
    import * as application from \"tns-core-modules/application\";
    import { AppSync } from \"nativescript-app-sync\";

    // add this in some central place that's executed once in a lifecycle
    application.on(application.resumeEvent, () => {
      AppSync.sync(...);
    });
    \n
    \n Click here to see a JavaScript example\n
    var application = require(\"tns-core-modules/application\");

    application.on(application.resumeEvent, function () {
      // call the sync function
    });
    \n
    \n

    Releasing an update

    \n

    Once your app has been configured and distributed to your users, and you've made some code and/or asset changes,\nit's time to instantly unleash those changes onto your users!

    \n
    \n

    ⚠️ Make sure to create a release build first, so use the same command that you'd use for app store distribution, just don't send it to the AppStore. You can even Webpack and Uglify your app, it's all transparent to this plugin.

    \n
    \n
    \n

    💁‍♂️ When releasing updates to AppSync, you do not need to bump your app's version since you aren't modifying the app store version at all. AppSync will automatically generate a "label" for each release you make (e.g. v3) in order to help identify it within your release history.

    \n
    \n

    The easiest way to do this is to use the release command in our AppSync CLI. Its (most relevant) options are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    paramaliasdefaultdescription
    deploymentNamed"Staging"Deploy to either "Staging" or "Production".
    descriptiondesnot setDescription of the changes made to the app with this release.
    targetBinaryVersiontApp_ResourcesSemver expression that specifies the binary app version(s) this release is targeting (e.g. 1.1.0, ~1.2.3). The default is the exact version in App_Resources/iOS/Info.plist or App_Resources/Android/AndroidManifest.xml.
    mandatorymnot setThis specifies whether or not the update should be considered "urgent" (e.g. it includes a critical security fix). This attribute is simply round tripped to the client, who can then decide if and how they would like to enforce it. If this flag is not set, the update is considered "not urgent" so you may choose to wait for the next cold boot of the app. It does not mean users get to 'opt out' from an update; all AppSync updates will eventually be installed on the client.
    \n

    Have a few examples for both platforms:

    \n

    iOS

    \n
    nativescript-app-sync release <c-ios-appname> ios # deploy to Staging
    nativescript-app-sync release <AppSync-ios-appname> ios --d Production # deploy to Production (default: Staging)
    nativescript-app-sync release <AppSync-ios-appname> ios --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in Info.plist)
    nativescript-app-sync release <AppSync-ios-appname> ios --mandatory --description \"My mandatory iOS version\" # a release for iOS that needs to be applied ASAP.
    \n

    Android

    \n
    nativescript-app-sync release <AppSync-android-appname> android # deploy to Staging
    nativescript-app-sync release <AppSync-android-appname> android --d Production # deploy to Production (default: Staging)
    nativescript-app-sync release <AppSync-android-appname> android --targetBinaryVersion ~1.0.0 # release to users running any 1.x version (default: the exact version in AndroidManifest.xml)
    \n
    \n Click here to learn more about the --targetBinaryVersion param\nThe `targetBinaryVersion` specifies the store/binary version of the application you are releasing the update for, so that only users running that version will receive the update, while users running an older and/or newer version of the app binary will not. This is useful for the following reasons:\n
      \n
    1. \n

      If a user is running an older binary version, it's possible that there are breaking changes in the AppSync update that wouldn't be compatible with what they're running.

      \n
      2. \n
    2. \n

      If a user is running a newer binary version, then it's presumed that what they are running is newer (and potentially incompatible) with the AppSync update.

      \n
      3. \n
    \n

    If you ever want an update to target multiple versions of the app store binary, we also allow you to specify the parameter as a semver range expression. That way, any client device running a version of the binary that satisfies the range expression (i.e. semver.satisfies(version, range) returns true) will get the update. Examples of valid semver range expressions are as follows:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Range ExpressionWho gets the update
    1.2.3Only devices running the specific binary app store version 1.2.3 of your app
    *Any device configured to consume updates from your AppSync app
    1.2.xDevices running major version 1, minor version 2 and any patch version of your app
    1.2.3 - 1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (inclusive)
    >=1.2.3 <1.2.7Devices running any binary version between 1.2.3 (inclusive) and 1.2.7 (exclusive)
    1.2Equivalent to >=1.2.0 <1.3.0
    ~1.2.3Equivalent to >=1.2.3 <1.3.0
    ^1.2.3Equivalent to >=1.2.3 <2.0.0
    \n

    *NOTE: If your semver expression starts with a special shell character or operator such as >, ^, or **\n, the command may not execute correctly if you do not wrap the value in quotes as the shell will not supply the right values to our CLI process. Therefore, it is best to wrap your targetBinaryVersion parameter in double quotes when calling the release command, e.g. app-sync release MyApp-iOS updateContents ">1.2.3".

    \n

    NOTE: As defined in the semver spec, ranges only work for non pre-release versions: https://github.com/npm/node-semver#prerelease-tags. If you want to update a version with pre-release tags, then you need to write the exact version you want to update (1.2.3-beta for example).

    \n

    The following table outlines the version value that AppSync expects your update's semver range to satisfy for each respective app type:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSource of app store version
    NativeScript (iOS)The CFBundleShortVersionString key in the App_Resources/iOS/Info.plist file
    NativeScript (Android)The android:versionName key in the App_Resources/Android/AndroidManifest.xml file
    \n

    NOTE: If the app store version in the metadata files are missing a patch version, e.g. 2.0, it will be treated as having a patch version of 0, i.e. 2.0 -> 2.0.0. The same is true for app store version equal to plain integer number, 1 will be treated as 1.0.0 in this case.

    \n
    \n

    Gaining insight in past releases

    \n

    Here are a few AppSync CLI commands you may find useful:

    \n

    Which releases did I create and what are the install metrics?

    \n

    Using a command like this will tell you how many apps have the update installed:

    \n
    nativescript-app-sync deployment history <appsync-appname> Staging
    \n

    Which produces something like this:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    LabelRelease TimeApp VersionMandatoryDescriptionInstall Metrics
    v2an hour ago1.0.0YesMandatory iOS version!Active: 11% (2 of 19)
    Total: 2
    v12 hours ago1.0.0NoAwesome iOS version!Active: 26% (5 of 19)
    Total: 5
    \n

    Give me the details of the current release!

    \n

    This dumps the details of the most recent release for both the Staging and Production environments of your app:

    \n
    nativescript-app-sync deployment ls <appsync-appname>
    \n

    And if you want to dump your deployment keys as well, use:

    \n
    nativescript-app-sync deployment ls <appsync-appname> --displayKeys
    \n

    Which produces something like this:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDeployment KeyUpdate MetadataInstall Metrics
    Productionr1DVaLfKjc0Y5d6BzqX4..No updates releasedNo installs recorded
    StagingYTmVMy0GLCknVu3GVIyn..Label: v5Active: 11% (2 of 19)
    App Version: 1.0.0Total: 2
    Mandatory: Yes
    Release Time: an hour ago
    Released By: eddyverbruggen@gmail.com
    Description: Mandatory iOS version!
    \n

    Clearing the release history

    \n

    This won't roll back any releases, but it cleans up the history metadata (of the Staging app, in this case):

    \n
    nativescript-app-sync deployment clear <appsync-appname> Staging
    \n

    Advanced topics

    \n

    Testing AppSync packages during development

    \n

    You may want to play with AppSync before using it in production (smart move!).\nPerform these steps once you've pushed an update and added the sync command to your app:

    \n
      \n
    • $ tns run <platform>. On an iOS device add the --release flag so LiveSync doesn't interfere.
      • \n
    • kill and restart the app after the update is installed
      • \n
    \n

    Running the demo app

    \n

    You may also play with AppSync by using its demo app. Here are the steps you need to perform in order to observe an app update:

    \n
      \n
    • register with the service (nativescript-app-sync register) and add the demo app to your account (nativescript-app-sync app add <appname> <platform> nativescript)
      • \n
    • once the app is registered you will see its deployment keys in the console, use them to update the ones in the demo
      • \n
    • go to src and run npm run preparedemo - this will build the plugin and add a reference to the demo app
      • \n
    • prepare an app that will be used as an "update version" (for example, uncomment one of the APPSYNC labels and comment the APPSTORE label), then run tns build <platform>
      • \n
    • release the update (nativescript-app-sync release <appname> <platform>)
      • \n
    • you can ensure it appears in the list with updates (nativescript-app-sync deployment history <appname> Staging)
      • \n
    • prepare an app that will be used as an "official release version" (for example, comment the APPSYNC label and uncomment the APPSTORE label), then run tns run <platform>
      • \n
    • when the app is deployed on the device, you should see the "official release version" along with information about an installed update
      • \n
    • close the app (and remove it from device's recent apps to ensure its next start will be a cold start) and run it again - you should now see the "update version" of the app
      • \n
    \n

    Patching Update Metadata

    \n

    After releasing an update, there may be scenarios where you need to modify one or more of the metadata attributes associated with it\n(e.g. you forgot to mark a critical bug fix as mandatory.

    \n
    \n Read all about patching metadata by clicking here.\n

    You can update metadata by running the following command:

    \n
    nativescript-app-sync patch <appName> <deploymentName>
    [--label <releaseLabel>]
    [--mandatory <isMandatory>]
    [--description <description>]
    [--targetBinaryVersion <targetBinaryVersion>]
    \n
    \n

    ⚠️ This command doesn't allow modifying the actual update contents of a release. If you need to respond to a release that has been identified as being broken, you should use the rollback command to immediately roll it back, and then if necessary, release a new update with the approrpriate fix when it is available.

    \n
    \n

    Aside from the appName and deploymentName, all parameters are optional, and therefore, you can use this command to update just a single attribute or all of them at once.\nCalling the patch command without specifying any attribute flag will result in a no-op.

    \n
    # Mark the latest production release as mandatory
    nativescript-app-sync patch MyAppiOS Production -m

    # Add a \"mina and max binary version\" to an existing release
    nativescript-app-sync patch MyAppiOS Staging -t \"1.0.0 - 1.0.5\"
    \n
    \n

    Promoting Updates

    \n
    \n Read this if you want to easily promote releases from Staging to Production\n

    Once you've tested an update against a specific deployment (e.g. Staging),\nand you want to promote it (e.g. dev->staging, staging->production),\nyou can simply use the following command to copy the release from one deployment to another:

    \n
    nativescript-app-sync promote <appName> <sourceDeploymentName> <destDeploymentName>
    [--description <description>]
    [--label <label>]
    [--mandatory]
    [--targetBinaryVersion <targetBinaryVersion]

    # example
    nativescript-app-sync promote AppSyncDemoIOS Staging Production --description 'Promoted from Staging to Production'
    \n

    The promote command will create a new release for the destination deployment, which includes the exact code and metadata (description, mandatory and target binary version) from the latest release of the source deployment.\nWhile you could use the release command to "manually" migrate an update from one environment to another, the promote command has the following benefits:

    \n
      \n
    1. \n

      It's quicker, since you don't need to reassemble the release assets you want to publish or remember the description/app store version that are associated with the source deployment's release.

      \n
      2. \n
    2. \n

      It's less error-prone, since the promote operation ensures that the exact thing that you already tested in the source deployment (e.g. Staging) will become active in the destination deployment (e.g. Production).

      \n
      3. \n
    \n
    \n

    💁‍♂️ Unless you need to make changes to your code, the recommended workflow is taking advantage of the automatically created Staging and Production environments, and do all releases directly to Staging, and then perform a promote from Staging to Production after performing the appropriate testing.

    \n
    \n
    \n

    Rolling Back Updates

    \n
    \n Read this if you want to learn all about rollbacks\n

    A deployment's release history is immutable, so you cannot delete or remove individual updates once they have been released without deleting all of the deployment's release history.\nHowever, if you release an update that is broken or contains unintended features,\nit is easy to roll it back using the rollback command:

    \n
    nativescript-app-sync rollback <appName> <deploymentName>

    #example
    nativescript-app-sync rollback MyAppiOS Production
    \n

    This has the effect of creating a new release for the deployment that includes the exact same code and metadata as the version prior to the latest one.\nFor example, imagine that you released the following updates to your app:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ReleaseDescriptionMandatory
    v1Initial release!Yes
    v2Added new featureNo
    v3Bug fixesYes
    \n

    If you ran the rollback command on that deployment, a new release (v4) would be created that included the contents of the v2 release.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ReleaseDescriptionMandatory
    v1Initial release!Yes
    v2Added new featureNo
    v3Bug fixesYes
    v4 (Rollback from v3 to v2)Added new featureNo
    \n

    End-users that had already acquired v3 would now be "moved back" to v2 when the app performs an update check.\nAdditionally, any users that were still running v2, and therefore, had never acquired v3, wouldn't receive an update since they are already running the latest release\n(this is why our update check uses the package hash in addition to the release label).

    \n

    If you would like to rollback a deployment to a release other than the previous (e.g. v3 -> v2), you can specify the optional --targetRelease parameter:

    \n
    nativescript-app-sync rollback MyAppiOS Production --targetRelease v34
    \n
    \n

    ⚠️ This rolls back the release to the previous AppSync version, NOT the AppStore version (if there was one in between).

    \n
    \n
    \n

    💁‍♂️ The release produced by a rollback will be annotated in the output of the deployment history command to help identify them more easily.

    \n
    \n
    \n

    App Collaboration

    \n
    \n Working on one app with multiple developers? Click here!\n

    If you will be working with other developers on the same AppSync app, you can add them as collaborators using the following command:

    \n
    nativescript-app-sync collaborator add <appName> <collaboratorEmail>
    \n

    NOTE: This expects the developer to have already registered with AppSync using the specified e-mail address, so ensure that they have done that before attempting to share the app with them.

    \n

    Once added, all collaborators will immediately have the following permissions with regards to the newly shared app:

    \n
      \n
    1. View the app, its collaborators, deployments and release history.
      2. \n
    2. Release updates to any of the app's deployments.
      3. \n
    3. Rollback any of the app's deployments
      4. \n
    \n

    Inversely, that means that an app collaborator cannot do any of the following:

    \n
      \n
    1. Rename or delete the app
      2. \n
    2. Create, rename or delete new deployments within the app
      3. \n
    3. Clear a deployment's release history
      4. \n
    4. Add or remove collaborators from the app (although a developer can remove themself as a collaborator from an app that was shared with them).
      5. \n
    \n

    Over time, if someone is no longer working on an app with you, you can remove them as a collaborator using the following command:

    \n
    nativescript-app-sync collaborator rm <appName> <collaboratorEmail>
    \n

    If at any time you want to list all collaborators that have been added to an app, you can simply run the following command:

    \n
    nativescript-app-sync collaborator ls <appName>
    \n
    \n

    Using AppSync behind a proxy

    \n
    \n Click here to read all about Proxy Support\nBy default, the `login` command will automatically look for a system-wide proxy, specified via an `HTTPS_PROXY` or `HTTP_PROXY` environment variable, and use that to connect to the server.\nIf you'd like to disable this behavior, and have the CLI establish a direct connection, simply specify the `--noProxy` parameter when logging in:\n
    nativescript-app-sync login --noProxy
    \n

    I'd you like to explicitly specify a proxy server that the CLI should use, without relying on system-wide settings,\nyou can instead pass the --proxy parameter when logging in:

    \n
    nativescript-app-sync login --proxy https://foo.com:3454
    \n

    Once you've logged in, any inferred and/or specified proxy settings are persisted along with your user session.\nThis allows you to continue using the CLI without needing to re-authenticate or re-specify your preferred proxy.\nIf at any time you want to start or stop using a proxy, simply logout, and then log back in with the newly desired settings.

    \n
    \n

    Troubleshooting

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/sentry":{"name":"@nativescript-community/sentry","version":"4.6.12","license":"ISC","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/sentry
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Configuration

    \n

    Webpack

    \n

    You will need to add something like this to your webpack config so that the source maps gets uploaded. I dont set auth or project in the options as i use a .sentryclirc config file.

    \n
      \n
    • SOURCEMAP_REL_DIR: i almost always set it to ../../sourcemaps
      • \n
    • SENTRY_PREFIX: the default is app:///
      • \n
    \n
    if (!!sentry && !!uploadSentry) {
      config.devtool = false;
      config.plugins.push(
          new webpack.SourceMapDevToolPlugin({
              append: `\\n//# sourceMappingURL=${process.env.SENTRY_PREFIX}[name].js.map`,
              filename: join(process.env.SOURCEMAP_REL_DIR, '[name].js.map')
          })
      );
      let appVersion;
      let buildNumber;
      if (isAndroid) {
          const gradlePath = `${appResourcesPath}/Android/app.gradle`;
          const gradleData = readFileSync(gradlePath, 'utf8');
          appVersion = gradleData.match(/versionName \"((?:[0-9]+\\.?)+)\"/)[1];
          buildNumber = gradleData.match(/versionCode ([0-9]+)/)[1];
      } else if (isIOS) {
          const plistPath = `${appResourcesPath}/iOS/Info.plist`;
          const plistData = readFileSync(plistPath, 'utf8');
          appVersion = plistData.match(/<key>CFBundleShortVersionString<\\/key>[\\s\\n]*<string>(.*?)<\\/string>/)[1];
          buildNumber = plistData.match(/<key>CFBundleVersion<\\/key>[\\s\\n]*<string>([0-9]*)<\\/string>/)[1];
      }
      config.plugins.push(
          new SentryCliPlugin({
              release: appVersion,
              urlPrefix: 'app:///',
              rewrite: true,
              release: `${nconfig.id}@${appVersion}+${buildNumber}`,
              dist: `${buildNumber}.${platform}`,
              ignoreFile: '.sentrycliignore',
              include: [join(dist, process.env.SOURCEMAP_REL_DIR)]
          })
      );
    }
    \n

    ###debug

    \n

    For debug mode to work correctly you will need to add this to your webpack (see demo app)

    \n
    nsWebpack.chainWebpack(config=>{
        config.entry('bundle').prepend('@nativescript-community/sentry/process');
    });
    \n

    Fastlane

    \n

    If you use fastlane you can use it to create release and upload dsyms\nTo do that you need to install it:

    \n
    fastlane add_plugin sentry
    \n

    Also for now you should install nativescript-set-version as it is needed to read app version, build number.

    \n
    npm install -D nativescript-set-version
    \n

    Now you can setup your Fastfile

    \n
      \n
    • create release
      • \n
    \n
    version = \"\"
    versionCode = \"\"

    Dir.chdir(\"..\") do
      version  =  sh(\"./node_modules/.bin/get-version\", platform, \"version\").gsub(/\\n/,'')
      versionCode  =  sh(\"./node_modules/.bin/get-version\", platform, \"code\").gsub(/\\n/,'')
    end
    sentry_create_release(
      version: version, # release version to create
    )
    \n
      \n
    • upload dsyms
      • \n
    \n
    sentry_upload_dsym
    \n

    Usage in the app

    \n
    import * as Sentry from '@nativescript-community/sentry';

    const buildNumber = await getBuildNumber();
    const versionName = await getVersionName();
    const buildNumber = await getBuildNumber();
    const appId = await getAppId();
    Sentry.init({
        dsn: SENTRY_DSN,
        debug: true,
        enableAutoPerformanceTracking: true,
    });
    \n

    Reporting NativeScript errors

    \n

    The onerror method ensures all unhandled NativeScript errors will be caught by Sentry in production, using a custom error handler.

    \n

    Reporting handled errors

    \n

    If you would like to send a handled error to Bugsnag, you can pass any Error object to Sentry notify method:

    \n
    import * as Sentry from '@nativescript-community/sentry';
    try {
      // potentially crashy code
    } catch (error) {
      Sentry.captureException(error);
    }
    \n

    Reporting promise rejections

    \n

    To report a promise rejection, use notify() as a part of the catch block:

    \n
    import * as Sentry from '@nativescript-community/sentry';
    new Promise(function(resolve, reject) {
      /* potentially failing code */
    })
    .then(function () { /* if the promise is resolved */ })
    .catch(function (error) {
      Sentry.captureException(error);
    });
    \n

    Sending diagnostic data

    \n

    Automatically captured diagnostics

    \n

    Bugsnag will automatically capture and attach the following diagnostic data:

    \n
      \n
    • A full stacktrace
      • \n
    • Battery state
      • \n
    • Device model and OS version
      • \n
    • Thread state for all threads
      • \n
    • Release stage (production, debug, etc)
      • \n
    • App running duration in the foreground and/or background
      • \n
    • A device- and vendor-specific identifier
      • \n
    \n

    Identifying users

    \n

    In order to correlate errors with customer reports, or to see a list of users who experienced each error, it is helpful to capture and display user information. Information set on the Bugsnag client is sent with each error report:

    \n
    Sentry.setUser({\"email\": \"john.doe@example.com\"});
    \n

    Logging breadcrumbs

    \n

    In order to understand what happened in your application before each crash, it can be helpful to leave short log statements that we call breadcrumbs. The last several breadcrumbs are attached to a crash to help diagnose what events lead to the error.

    \n

    Automatically captured breadcrumbs

    \n

    By default, Bugsnag captures common events including:

    \n
      \n
    • Low memory warnings
      • \n
    • Device rotation (if applicable)
      • \n
    • Menu presentation
      • \n
    • Screenshot capture (not the screenshot itself)
      • \n
    • Undo and redo
      • \n
    • Table view selection
      • \n
    • Window visibility changes
      • \n
    • Non-fatal errors
      • \n
    • Log messages (off by default, see configuration options)
      • \n
    \n

    Attaching custom breadcrumbs

    \n

    To attach additional breadcrumbs, use the leaveBreadcrumb function:

    \n
    Sentry.addBreadcrumb({
        category: 'ui',
        message: 'load main view',
        level: 'info'
      });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-utils":{"name":"nativescript-android-utils","version":"1.0.2","license":"MIT","readme":"

    NativeScript Android Utility Classes and Helpers

    \n

    The package provides minimalistic Java implementations of classes that may prove somewhat problematic when using them in the context of a NativeScript application.

    \n

    Exposed Classes

    \n
      \n
    • android.app.IntentService exposed as com.pip3r4o.android.app.IntentService. The class now has a default empty constructor and can be extended freely to implement Background Services in NativeScript Android.
      • \n
    \n

    Usage

    \n

    Consuming classes from the list above is as easy as installing the package inside your NativeScript application.

    \n
    npm install nativescript-android-utils --save
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-algolia":{"name":"nativescript-algolia","version":"1.2.4","license":{"type":"MIT","url":"https://github.com/arpit2438735/nativescript-algolia/blob/master/LICENSE"},"readme":"

    NativeScript-Algolia

    \n

    \"Build

    \n

    NativeScript plugin for Algolia search.

    \n

    This plugin is designed to mirror, as closely as possible, the structure of Algolia’s JavaScript client. You don't have to change or add any extra logic for existing applications, it will work for NativeScript.

    \n

    License

    \n

    This plugin is licensed under the MIT license by Arpit Srivastava

    \n

    Installation

    \n

    To install, type

    \n
    tns plugin add nativescript-algolia
    \n

    Table of Contents

    \n
      \n
    1. \n

      Install

      \n\n
      2. \n
    2. \n

      Quick Start

      \n\n
      3. \n
    \n

    Getting Started

    \n

    Install

    \n

    NativeScript

    \n
    tns plugin add nativescript-algolia
    \n

    Quick Start

    \n

    In 30 seconds, this quick start tutorial will show you how to index and search objects.

    \n

    Initialize the client

    \n

    You first need to initialize the client. For that, you will need your Application ID and API Key.\nYou can find both of them on your Algolia account.

    \n
    import {Algolia} from \"nativescript-algolia\";
    var client = new Algolia('applicationID', 'apiKey');
    var index = client.initIndex('contacts');
    \n

    Push data

    \n

    Without any prior configuration, you can start indexing 500 contacts in the contacts index using the following code:

    \n
    var index = client.initIndex('contacts');
    var contactsJSON = require('./contacts.json');

    index.addObjects(contactsJSON, function(content, err) {
      if (err) {
        console.error(err);
      }
    });
    \n

    Search

    \n

    With these tasks complete, you can now search for contacts by querying fields such as firstname, lastname, company and more. As Algolia is typo tolerant, common misspellings can be handled with ease:

    \n
    // firstname
    index.search('jimmie', function(content, err) {
      console.log(content.hits);
    });

    // firstname with typo
    index.search('jimie', function(content, err) {
      console.log(content.hits);
    });

    // a company
    index.search('california paint', function(content, err) {
      console.log(content.hits);
    });

    // a firstname & company
    index.search('jimmie paint', function(content, err) {
      console.log(content.hits);
    });
    \n

    Configure

    \n

    Settings can be customized to tune the search behavior. For example, you can add a custom sort by number of followers to the already great built-in relevance:

    \n
    index.setSettings({
      'customRanking': ['desc(followers)']
    }, function(err, content) {
      console.log(content);
    });
    \n

    You can also configure the list of attributes you want to index by order of importance (ex: firstname = most important):

    \n

    Note: Since the engine is designed to suggest results as you type, you'll generally search by prefix.\nIn this case the order of attributes is very important to decide which hit is the best:

    \n
    index.setSettings({
      'searchableAttributes': [
        'lastname',
        'firstname',
        'company',
        'email',
        'city',
        'address'
      ]
    }, function(content, err) {
      console.log(content);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-filterable-listpicker":{"name":"@nstudio/nativescript-filterable-listpicker","version":"3.0.2","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

    \n \n

    Installation

    \n
    npm install @nstudio/nativescript-filterable-listpicker
    \n

    Usage

    \n

    In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

    \n

    NativeScript Core

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"@nstudio/nativescript-filterable-listpicker\">
        <GridLayout rows=\"\" columns=\"\">
            <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
            <GridLayout rows=\"*, auto, *\">
                <StackLayout height=\"300\">
                    <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                    <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                    <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                    <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
                </StackLayout>
            </GridLayout>
            <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
            <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
        </GridLayout>
    </Page>
    \n

    Then in your code...

    \n
    public showPicker() {
        page.getViewById('myfilter').show();
    }

    public itemTapped(args) {
        alert(args.selectedItem + ' was tapped!')
    }

    public cancelFilterableList() {
        // this gets called if the user cancels the modal. 
    }
    \n

    Use as Autocomplte

    \n

    You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

    \n
    let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

    private filterableListpicker: FilterableListpicker;
    private page: Page;
    constructor(page: Page) {
        super();
        this.page = page;
        // Get filterableListpicker instance
        this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
        MyModel = this;
    }

    public showPickerAsAutocomplete() {
        // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
        this.filterableListpicker.isAutocomplete = true;
        this.filterableListpicker.show(frame.topmost());
        
        this.filterableListpicker.autocomplete((data) => {
            let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
            http.getJSON<Predictions>(url).then((res) => {
                //console.dir(res)
                const airportsCollection = res.predictions;
                const items = [];
                for (let i = 0; i < airportsCollection.length; i++) {
                    items.push({
                        title: airportsCollection[i].description,
                        description: \"\",
                        source: airportsCollection[i]
                    });
                    
                }
                this.set(\"listitems\", items)
            }).catch((err) => {
                const message = 'Error fetching remote data from ' + url + ': ' + err.message;
                console.log(message);
                alert(message);
            });
        });
    }
    \n

    NativeScript Angular

    \n

    In angular, you have to register the element in your app component like so:

    \n
    // app.component.ts
    import {registerElement} from \"@nativescript/angular\";
    import {FilterableListpicker} from '@nstudio/nativescript-filterable-listpicker';
    registerElement(\"FilterableListpicker\", () => FilterableListpicker);
    \n

    Then use it in your templates like...

    \n
    <GridLayout>
        <Image src=\"res://nicebackgroundimage.jpg\"></Image>
        <StackLayout>
            <Label text=\"Whats your favorite programming language?\"></Label>
            <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
        </StackLayout>
        <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
    </GridLayout>
    \n

    Then in your code...

    \n
    @ViewChild('myfilter') myfilter: ElementRef;

    cancelFilterableList() {
        console.log('canceled');
    }

    itemTapped(args) {
        alert(args.selectedItem)
    }

    showPicker() {
        this.myfilter.nativeElement.show();
    }
    \n

    Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

    \n

    in android:

    \n
    @ViewChild('myContainer') myContainer: ElementRef;

    public function showPicker() {
      this.myfilter.nativeElement.show(this.myContainer.nativeElement);
    }
    \n

    Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

    \n

    Source Array

    \n

    As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    titleThe title, this is what your list will be filtered on, and it will display in bold.
    imageOPTIONAL: This will display to the left of the title.
    descriptionOPTIONAL: This will display under the title smaller and in gray.
    \n

    Here's some example code:

    \n
    public listitems = [
        {
            \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
            \"title\": \"Brown Bear\",
            \"description\": \"Brown bear brown bear, what do you see?\"
        },
        {
            \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
            \"title\": \"Red Bird\"
        },
        {
            \"title\": \"Purple Cat\",
            \"description\": \"Why are we teaching kids there are purple cats?\"
        }
    ];
    \n

    You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

    \n

    Here's how it will look in the picker:

    \n\n

    Webpack

    \n

    Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

    \n

    API

    \n

    The UI element accepts the following parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
    hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
    listWidth300The width of the modal element.
    listHeight300The height of the modal element.
    focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
    dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
    blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
    itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
    canceledThis is just a function to call if the user cancels, probably rarely neccessary.
    showCancelShow cancel button or not.
    enableSearchAllow searching by showing the TextField at the top.
    autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
    \n

    CSS Styling

    \n
    .flp-container .flp-list-container {
      border-radius: 10;
    }
    .flp-container .flp-list-container .flp-listview {
      background-color: white;
    }

    .flp-container .flp-list-container .flp-listview .flp-row {
      background-color: white;
    }
    /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
      padding: 10;
    } */
    .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
      margin: 10 0 10 5;
      width: 30;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
      margin: 10 10 10 5;
      /* margin: 0 10 0 10; */
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
      font-weight: bold; 
      font-size: 16;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
      color: gray; 
      font-size: 13;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
      margin-left: 15; 
      padding: 10 0;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
      color: lightblue;
    }

    .flp-container .flp-hint-field {
      padding: 10 15; 
      height: 40; 
      background-color: #E0E0E0; 
      border-radius: 10 10 0 0;
    }

    .flp-container .flp-cancel-container {
      background-color: #E0E0E0; 
      height: 40; 
      border-radius: 0 0 10 10;
    }

    .flp-container .flp-cancel-container .flp-btn-cancel {
      font-weight: bold; 
      height: 40; 
      background-color: transparent; 
      border-color: transparent; 
      border-width: 1; 
      font-size: 12;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xmlobjects":{"name":"nativescript-xmlobjects","version":"1.1.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-xmlobjects/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript XML Objects

    \n

    A NativeScript module that provides handling XML data as objects similar to LINQ to XML.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-xmlobjects
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import XmlObjects = require('nativescript-xmlobjects');

    var doc = XmlObjects.parse(`<PurchaseOrder PurchaseOrderNumber=\"99503\" OrderDate=\"1999-10-20\">
      <Address Type=\"Shipping\">
        <Name>Ellen Adams</Name>
        <Street>123 Maple Street</Street>
        <City>Mill Valley</City>
        <State>CA</State>
        <Zip>10999</Zip>
        <Country>USA</Country>
      </Address>
      <Address Type=\"Billing\">
        <Name>Tai Yee</Name>
        <Street>8 Oak Avenue</Street>
        <City>Old Town</City>
        <State>PA</State>
        <Zip>95819</Zip>
        <Country>USA</Country>
      </Address>
      <DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
      <Items>
        <Item PartNumber=\"872-AA\">
          <ProductName>Lawnmower</ProductName>
          <Quantity>1</Quantity>
          <USPrice>148.95</USPrice>
          <Comment>Confirm this is electric</Comment>
        </Item>
        <Item PartNumber=\"926-AA\">
          <ProductName>Baby Monitor</ProductName>
          <Quantity>2</Quantity>
          <USPrice>39.98</USPrice>
          <ShipDate>1999-05-21</ShipDate>
        </Item>
      </Items>
    </PurchaseOrder>`    );
    \n

    Enumerate nodes:

    \n
    // XElement
    var rootElement = doc.root;

    // XElement[]
    var allChildElements = rootElement.elements();

    var addressElements = rootElement.elements('Address');
    for (var i = 0; i < addressElements.length; i++) {
        var ae = addressElements[i];
        
        // XAttribute
        var typeAttribute = ae.attribute('Type');
        console.log('Type attribute: ' + typeAttribute.value);
    }

    // XNode[]
    var allNodes = rootElement.nodes();
    for (var i = 0; i < allNodes.length; i++) {
        var n = allNodes[i];
        
        if (n instanceof XmlObjects.XElement) {
            // XAttribute[]
            var allAttributes = n.attributes();  // the attributes
            
            console.log(\"I am an element with attributes: \" + n.value);
        }
        else if (n instanceof XmlObjects.XComment) {
            console.log(\"I am a comment: \" + n.value);
        }
        else if (n instanceof XmlObjects.XText) {
            console.log(\"I am a text.\" + n.value);
        }
        else if (n instanceof XmlObjects.XCData) {
            console.log(\"I am a CDATA: \" + n.value);
        }
    }

    // create XML string
    var xmlStr = rootElement.toString();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applist":{"name":"nativescript-applist","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-applist/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript AppList

    \n

    A NativeScript module to handle the list of installed apps on a device.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS (currently returns empty list!)
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-applist
    \n

    inside your app project to install the module.

    \n

    Demo

    \n

    For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

    \n

    Otherwise ...

    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    var AppList = require('nativescript-applist');
    \n

    Get installed apps

    \n
    AppList.getInstalledApps(function(apps) {
        for (var i = 0; i < apps.length; i++) {
            // TODO
        }
    });
    \n

    Each item of apps has the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    displayNameThe display name
    iconIf available: The icon as data url
    nameThe internal (package) name
    version.codeThe version code (Android only)
    version.nameThe version name
    \n

    Additional options

    \n
    // get apps with icons
    AppList.getInstalledApps(function(apps) {
        // TODO
    }, {
        withIcons: true
    });
    \n

    The 2nd parameter of AppList.getInstalledApps function has the following structure:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    icon.formatThe icon format. 0 = PNG, 1 = JPEG
    icon.qualityThe icon quality between 0 and 100
    withIconsAlso loads icons for each entry or not
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-share-file":{"name":"@finanzritter/nativescript-share-file","version":"2.1.0","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    \"npm\"\n\"npm\"\n\"Publish\"

    \n

    :construction: Work in progress

    \n

    This package was forked from the unmaintained package\nbraune-digital/nativescript-share-file.\nWe are currently cleaning up and updating the code.

    \n
    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install @finanzritter/nativescript-share-file
    \n

    Android FileProvider Setup

    \n

    On Android, you must add a FileProvider definition and specify available files, which is documented here or have a look at the demo app (AndroidManifest.xml and file_paths.xml).

    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
    import { ShareFile } from '@finanzritter/nativescript-share-file';
    import { Observable, knownFolders, path, File } from \"@nativescript/core\";

    export class TestClass extends Observable {
      shareFile;
      fileName;
      documents;
      path;
      file;

      constructor() {
        super();

        this.fileName = 'test.txt';
        this.documents = knownFolders.documents();
        this.path = path.join(this.documents.path, this.fileName);
        this.file = File.fromPath(this.path);

        this.shareFile = new ShareFile();

        this.shareFile.open({
          path: this.path,
          intentTitle: 'Open text file with:', // optional Android
          rect: { // optional iPad
            x: 110,
            y: 110,
            width: 0,
            height: 0
          },
          options: true, // optional iOS
          animated: true // optional iOS
        });
      }
    }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    Credits

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-local-notifications-android-flags":{"name":"nativescript-local-notifications-android-flags","version":"4.2.2","license":"MIT","readme":"

    NativeScript Local Notifications Plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n
    \n

    ⚠️ Plugin version 4.0.0 should be used with NativeScript 6+. If you have an older tns --version, please use an older plugin version.

    \n
    \n
    \n

    ⚠️ Looking for NativeScript 7 compatibilty? Go to the NativeScript/plugins repo.

    \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-local-notifications
    \n

    Setup (since plugin version 3.0.0)

    \n

    Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

    \n

    You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

    \n
    require (\"nativescript-local-notifications\");
    \n

    Now you can import the plugin as an object into your .ts file as follows:

    \n
    // either
    import { LocalNotifications } from \"nativescript-local-notifications\";
    // or (if that doesn't work for you)
    import * as LocalNotifications from \"nativescript-local-notifications\";

    // then use it as:
    LocalNotifications.hasPermission()
    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    This demo is the one with the most options, so it's a cool one to check out:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo.ios # or demo.android
    \n

    NativeScript-Angular

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    There's also a simple Angular demo in this repo:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo-ng.ios # or demo-ng.android
    \n

    NativeScript-Vue

    \n

    We also have a Vue demo:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
    cd nativescript-local-notifications/src
    npm run demo-vue.ios # or demo-vue.android
    \n

    Plugin API

    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Will be generated if not set.
    titleThe title which is shown in the statusbar. Default not set.
    subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
    bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
    colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
    bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
    groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
    groupSummaryAn inboxStyle notification summary. Default empty
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalSet to one of second, minute, hour, day, week, month, year if you want a recurring notification.
    iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
    silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
    imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
    thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
    ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
    channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
    forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
    priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
    actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
    notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
    \n

    NotificationAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idAn id so you can easily distinguish your actions.
    typeEither button or input.
    titleThe label for type = button.
    launchLaunch the app when the action completes.
    submitLabelThe submit button label for type = input.
    placeholderThe placeholder text for type = input.
    \n
      LocalNotifications.schedule([{
        id: 1, // generated id if not set
        title: 'The title',
        body: 'Recurs every minute until cancelled',
        ticker: 'The ticker',
        color: new Color(\"red\"),
        badge: 1,
        groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
        groupSummary:\"Summary of the grouped messages above\", //android only
        ongoing: true, // makes the notification ongoing (Android only)
        icon: 'res://heart',
        image: \"https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg\",
        thumbnail: true,
        interval: 'minute',
        channel: 'My Channel', // default: 'Channel'
        sound: \"customsound-ios.wav\", // falls back to the default sound on Android
        at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
      }]).then(
          function(scheduledIds) {
            console.log(\"Notification id(s) scheduled: \" + JSON.stringify(scheduledIds));
          },
          function(error) {
            console.log(\"scheduling error: \" + error);
          }
      )
    \n

    Notification icons (Android)

    \n

    These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

    \n

    silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

    \n

    These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi18 × 18120
    mdpi24 × 24160
    hdpi36 × 36240
    xhdpi48 × 48320
    xxhdpi72 × 72480
    xxxhdpi96 × 96640 approx.
    \n

    Source: Density Qualifier Docs

    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
      LocalNotifications.addOnMessageReceivedCallback(
          function (notification) {
            console.log(\"ID: \" + notification.id);
            console.log(\"Title: \" + notification.title);
            console.log(\"Body: \" + notification.body);
          }
      ).then(
          function() {
            console.log(\"Listener added\");
          }
      )
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n

    Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

    \n
      LocalNotifications.getScheduledIds().then(
          function(ids) {
            console.log(\"ID's: \" + ids);
          }
      )
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
      LocalNotifications.cancel(5 /* the ID */).then(
          function(foundAndCanceled) {
              if (foundAndCanceled) {
                console.log(\"OK, it's gone!\");
              } else {
                console.log(\"No ID 5 was scheduled\");
              }
          }
      )
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
      LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
      LocalNotifications.requestPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
      LocalNotifications.hasPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jailbreak-detector":{"name":"nativescript-jailbreak-detector","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript-Jailbreak-Detector

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n

    A Nativescript plugin that makes detection of root and jailbreak hassle free.

    \n

    Contributors

    \n

    RootBeer

    \n

    DTTJailbreakDetection

    \n

    Supported Platforms

    \n
      \n
    • iOS
      • \n
    • Android
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-jailbreak-detector
    \n

    iOS

    \n

    Does not need any configuration.

    \n

    Android

    \n

    Does not need any configuration.

    \n

    Usage

    \n

    Typescript

    \n
    import { JailbreakDetector } from 'nativescript-jailbreak-detector';
    if (new JailbreakDetector().isRooted()) {
       // Logic here
     }
    \n

    iOS

    \n

    JailbreakDetector contains isJailBroken() method for IOS.

    \n
    import { JailbreakDetector } from 'nativescript-jailbreak-detector';import {isIOS} from \"tns-core-modules/platform\";
    import {isIOS} from \"tns-core-modules/platform\";

    if (isIOS && new JailbreakDetector().isJailBroken()) {
      // Logic here
    }
    \n

    Note: isRooted() will call isJailBroken() internally for IOS devices so there is no need to check for platform before using isRooted() even on IOS.

    \n

    Android

    \n

    This plugin uses rootbeer package to find out is the device is rooted or not.\nHence it exposes all the other helper methods too.

    \n
    import { JailbreakDetector } from 'nativescript-jailbreak-detector';
    const jailDetector = new JailbreakDetector();

    // All the available methods
    jailDetector.isRooted();
    jailDetector.checkForBusyBoxBinary();
    jailDetector.checkForDangerousProps();
    jailDetector.checkForMagiskBinary();
    jailDetector.checkForRootNative();
    jailDetector.checkForRWPaths();
    jailDetector.checkForSuBinary();
    jailDetector.checkSuExists();
    jailDetector.detectPotentiallyDangerousApps();
    jailDetector.detectRootCloakingApps();
    jailDetector.detectRootManagementApps();
    jailDetector.detectTestKeys();
    jailDetector.isRootedOrBusyboxInstalled();
    jailDetector.isSelinuxFlagInEnabled();
    \n

    Demo

    \n
    # install required dependencies for demo and 
    cd src && npm run postclone
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@benedictstrube/highcharts-wrapper":{"name":"@benedictstrube/highcharts-wrapper","version":"1.0.7","license":"Apache-2.0","readme":"

    @benedictstrube/highcharts-wrapper

    \n
    ns plugin add @benedictstrube/highcharts-wrapper
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-fonticon":{"name":"nativescript-ng2-fonticon","version":"1.3.4","license":"MIT","readme":"

    A simpler way to use font icons with NativeScript + Angular2.

    \n

    \"Angular\n\"MIT

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n
      \n
    • css
      • \n
    \n
    .fa {
      font-family: FontAwesome;
    }
    \n
      \n
    • view
      • \n
    \n
    <Label class=\"fa\" text=\"\\uf293\"></Label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname:

    \n
    <Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label>
    \n

    Install

    \n
    npm install nativescript-ng2-fonticon --save
    \n

    Usage

    \n

    FontAwesome will be used in the following examples but you can use any custom font icon collection.

    \n
      \n
    • Place font icon .ttf file in app/fonts, for example:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n
      \n
    • Create base class in app.css global file, for example:
      • \n
    \n
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
    }
    \n

    NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.

    \n
      \n
    • Copy css to app somewhere, for example:
      • \n
    \n
    app/font-awesome.css
    \n

    Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

    \n
      \n
    • Import the TNSFontIconModule passing a configuration with the location to the .css file to forRoot:
      • \n
    \n

    Use the classname prefix as the key and the css filename as the value relative to the app directory.

    \n
    import { TNSFontIconModule } from 'nativescript-ng2-fonticon';

    @NgModule({
    \tdeclarations: [
    \t\tDemoComponent,
    \t],
    \tbootstrap: [
    \t\tDemoComponent,
    \t],
    \timports: [
    \t\tNativeScriptModule,
    \t\tTNSFontIconModule.forRoot({
    \t\t\t'fa': 'font-awesome.css'
    \t\t})
    \t]
    })
    \n
      \n
    • Optional Configure the service with DEBUGGING on
      • \n
    \n

    When working with a new font collection, you may need to see the mapping the service provides. Passing true as seen below will cause the mapping to be output in the console to determine if your font collection is being setup correctly.

    \n
    import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ng2-fonticon';
    // turn debug on
    TNSFontIconService.debug = true;

    @NgModule({
    \tdeclarations: [
    \t\tDemoComponent,
    \t],
    \tbootstrap: [
    \t\tDemoComponent,
    \t],
    \timports: [
    \t\tNativeScriptModule,
    \t\tTNSFontIconModule.forRoot({
    \t\t\t'fa': 'font-awesome.css'
    \t\t})
    \t]
    })
    \n
      \n
    • Setup your component
      • \n
    \n

    It is important to inject the service into the constructor of your root component. Otherwise Angular 2's DI system will not instantiate your service.

    \n
    import { Component } from 'angular2/core';
    import { TNSFontIconService } from 'nativescript-ng2-fonticon';

    @Component({
      selector: 'demo',
      template: '<Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"></Label> '
    })
    export class DemoComponent {
      constructor(private fonticon: TNSFontIconService) {
        // ^ IMPORTANT to cause Angular's DI system to instantiate the service!
      }
    }
    \n

    Configuration Options

    \n

    If your font collection name does not match the classname prefix, you can pass the font collection name as an argument to the pipe like this:

    \n
    <Label class=\"fa\" [text]=\"'fa-bluetooth' | fonticon:'fontawesome'\"></Label>
    \n

    With a configuration like this:

    \n
    @NgModule({
    \tdeclarations: [
    \t\tDemoComponent,
    \t],
    \tbootstrap: [
    \t\tDemoComponent,
    \t],
    \timports: [
    \t\tNativeScriptModule,
    \t\tTNSFontIconModule.forRoot({
    \t\t\t'fontawesome': 'font-awesome.css'
    \t\t})
    \t]
    })
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (iOS)Demo Ionicons (iOS)
    \"Sample1\"\"Sample2\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (Android)Demo Ionicons (Android)
    \"Sample3\"\"Sample4\"
    \n

    How about just NativeScript without Angular?

    \n

    The standard NativeScript converter is here:

    \n\n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    Credits

    \n

    Idea came from Bradley Gore's post here.

    \n

    Contributors

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chatview":{"name":"nativescript-chatview","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-chatview/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript ChatView

    \n

    A NativeScript UI module for implementing WhatsApp like chat applications.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-chatview
    \n

    inside your app project to install the module.

    \n

    Demo

    \n

    The demo app can be found here.

    \n

    \"Demo

    \n

    Usage

    \n

    Include

    \n
    import ChatView = require(\"nativescript-chatview\");
    \n

    Create view

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          navigatingTo=\"onNavigatingTo\">
    </Page>
    \n
    import ChatView = require(\"nativescript-chatview\");

    function getTime() : string {
        var now = new Date();
        
        var hours = now.getHours();
        return numberToString(hours == 12 ? 12 : (hours % 12)) + \":\" + numberToString(now.getMinutes()) + \" \" + 
               (hours < 13 ? \"AM\" : \"PM\");
    }

    export function onNavigatingTo(args) {
        var page = args.object;

        // create view
        var chatView = new ChatView.ChatView();
        
        // register event when user taps
        // on SEND button
        chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
            // add a chat message
            eventData.object.appendMessages({            
                date: getTime(),
                isRight: true,
                image: \"~/img/avatar.jpg\",
                message: eventData.message,    
            });
        });
        
        // focus text field
        chatView.focusMessageField();
        
        page.content = chatView;
    }
    \n

    The XML way

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:chatView=\"nativescript-chatview\"
          navigatingTo=\"onNavigatingTo\">
          
      <chatView:ChatView id=\"myChatView\" />
    </Page>
    \n

    Styling

    \n

    Add the following CSS to your code:

    \n
    .nsChatView-view .nsChatView-sendMessageArea {
        margin: 4,0,0,0;
        background-color: #e8e8e8;
    }

    .nsChatView-view .nsChatView-sendMessageArea Button {
        background-color: transparent;
        margin: 0;
    }

    .nsChatView-view .nsChatView-messageList {
        background-color: transparent;
        border-color: transparent;
        border-width: 0;
        margin: 0;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-avatar,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-avatar     {
        margin: 8;
        border-radius: 32;
        width: 64;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-separator,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-separator     {
        border-color: transparent;
        border-width: 0;
        width: 32;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-message,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-message     {
        margin: 8;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea     {
        border-radius: 8;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea {
        background-color: #edeef2;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea {
        background-color: #00b863;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content     {
        margin: 12,16,12,16;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea Label,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea Label     {
        margin: 0;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content Label {
        color: black;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content Label {
        color: white;
    }

    .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content .nsChatView-date,
    .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content .nsChatView-date     {
        font-size: 11;
        margin-bottom: 12;
    }

    .nsChatView-view .nsChatView-messageField {
        font-size: 14;
    }
    \n

    To understand how a ChatView is defined, you can have a look at the following XML definition:

    \n
    <ChatView className=\"nsChatView-view\"
              rows=\"*,auto\">
      
      <!-- list of messages -->
      <ListView className=\"nsChatView-messageList\"
                row=\"0\"
                items=\"{{ messages }}\"
                horizontalAlignment=\"stretch\"
                verticalAlignment=\"stretch\">
        
        <!-- template for an IChatMessage item -->
        <ListView.itemTemplate>
          <!-- chat message item -->
          <GridLayout className=\"{{ 'nsChatView-item-' + (isRight ? 'right' : 'left') }}\"
                      rows=\"auto\" columns=\"auto,*,auto\">

            <!-- avatar -->
            <Image row=\"0\" col=\"{{ isRight ? '2' : '0' }}\"
                   className=\"nsChatView-avatar\"
                   verticalAlignment=\"top\"
                   src=\"{{ image }}\"
                   visibility=\"{{ image ? 'visible' : 'collapsed' }}\" />
            
            <!-- the message -->
            <StackLayout row=\"0\" col=\"1\"
                         className=\"nsChatView-message\">
              
              <!-- the message area -->
              <Border className=\"nsChatView-messageArea\">
                <StackLayout className=\"nsChatView-content\"
                             verticalAlignment=\"top\" horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\">
                  
                  <!-- the date / time -->              
                  <Label className=\"nsChatView-date\"
                         horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\"
                         text=\"{{ date }}\"
                         visibility=\"{{ date ? 'visible' : 'collapsed' }}\" />
              
                  <!-- the message text -->
                  <Label className=\"nsChatView-messageText\"
                         horizontalAlignment=\"{{ isRight ? 'right' : 'left' }}\"
                         text=\"{{ message }}\" textWrap=\"true\" />
                </StackLayout>
              </Border>
            </StackLayout>

            <!-- The invisible separator -->
            <Border row=\"0\" col=\"{{ isRight ? '0' : '2' }}\"
                    className=\"nsChatView-separator\" />
          </GridLayout>
        </ListView.itemTemplate>
      </ListView>
      
      <!-- message input field and SEND button -->
      <GridLayout className=\"nsChatView-sendMessageArea\"
                  row=\"1\"
                  rows=\"*,auto\">
            
        <!-- chat message field -->
        <TextField className=\"nsChatView-messageField\"
                   col=\"0\" row=\"0\"
                   hint=\"{{ typeMessageHint }}\" />
          
        <!-- SEND button -->
        <Button className=\"nsChatView-sendMessageButton\"
                col=\"1\" row=\"0\"
                text=\"{{ sendMessageButtonCaption }}\" />
      </GridLayout>
    </ChatView>
    \n

    The following properties of a ChatView can be used to access the controls defined in the XML:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameCSS class
    messageFieldnsChatView-messageField
    messageListnsChatView-messageList
    sendMessageAreansChatView-sendMessageArea
    sendMessageButtonnsChatView-sendMessageButton
    \n

    Add messages

    \n

    Chat messages are wrapped into an IChatMessage object:

    \n
    export interface IChatMessage {
        /**
         * The date.
         */
        date?: any;
        
        /**
         * The image source.
         */
        image?: any;
        
        /**
         * Defines if the displayed item is aligned on the right side or not.
         */
        isRight?: boolean;
        
        /**
         * The message value.
         */
        message?: any;
    }
    \n

    Add

    \n

    Use appendMessages() method to add one or more chat messages:

    \n
    object.appendMessages({            
        date: getTime(),
        isRight: true,
        image: \"~/img/me.jpg\",
        message: \"My message\",    
    }, {            
        date: getTime(),
        isRight: false,
        image: \"~/img/friend.jpg\",
        message: \"Friend's message\",    
    });
    \n

    Insert

    \n

    Use insertMessages() method to insert one or more chat messages at a specific position:

    \n
    object.insertMessages(1, {            
        date: getTime(),
        isRight: true,
        image: \"~/img/me.jpg\",
        message: \"My message\",    
    }, {            
        date: getTime(),
        isRight: false,
        image: \"~/img/friend.jpg\",
        message: \"Friend's message\",    
    });
    \n

    Prepend

    \n

    Use insertMessages() method to prepend one or more chat messages:

    \n
    object.prependMessages({
        date: getTime(),
        isRight: true,
        image: \"~/img/me.jpg\",
        message: \"My message\",    
    }, {            
        date: getTime(),
        isRight: false,
        image: \"~/img/friend.jpg\",
        message: \"Friend's message\",    
    });
    \n

    SEND button

    \n

    Use the notifyOnSendMessageTap() method to register for a "click" event:

    \n
    chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
        // handle the event
    });
    \n

    The eventData object has the following structure:

    \n
    import Observable = require(\"data/observable\");

    export class SendMessageTappedEventData implements Observable.EventData {
        /** @inheritdoc */
        public eventName: string;
        
        /**
         * Focuses the chat message field.
         * 
         * @return {Boolean} Operation was successful or not.
         */
        public focusTextField(): boolean;
        
        /**
         * Gets the message to send.
         */
        public message: string;
        
        /** @inheritdoc */
        public object: ChatView;
        
        /**
         * Resets the message value.
         */
        public resetMessage();
        
        /**
         * Scrolls to bottom.
         */
        public scrollToBottom();
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-floatingactionbutton-enduco":{"name":"nativescript-floatingactionbutton-enduco","version":"3.0.0","license":"MIT","readme":"\n

    NativeScript-FloatingActionButton

    \n    \n

    NativeScript plugin for Material Design Floating Action Button UI component.

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n

    Installation

    \n

    Nativescript 7+:

    \n

    ns plugin add @nstudio/nativescript-floatingactionbutton

    \n

    NativeScript lower than 7:

    \n

    tns plugin add @nstudio/nativescript-floatingactionbutton@2.1.0

    \n

    Screenshot

    \n
    \n

    \"FAB\n\"FAB

    \n

    Multiple FAB/Swipe Animation Support

    \n

    \"FAB

    \n

    Usage

    \n

    The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.

    \n

    Plain NativeScript

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"
          xmlns:FAB=\"@nstudio/nativescript-floatingactionbutton\">
        <ActionBar title=\"Native FAB\" />
        <grid-layout rows=\"auto, *\">
            <list-view row=\"1\" items=\"{{ users }}\">
                <list-view.itemTemplate>
                    <label text=\"{{ name }}\" />
                </list-view.itemTemplate>
            </list-view>
                <FAB:fab tap=\"fabTap\"
                         row=\"1\"
                         icon=\"'~/assets/ic_add_white.png'\"
                         rippleColor=\"#f1f1f1\"
                         class=\"fab-button\" />
        </grid-layout>
    </Page>
    \n
    \n

    NativeScript Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement(
      'Fab',
      () => require('@nstudio/nativescript-floatingactionbutton').Fab
    );
    \n

    HTML

    \n
    <StackLayout>
        <FAB (tap)=\"fabTap()\" icon=\"'~/assets/ic_add_white.png'\" rippleColor=\"#f1f1f1\" class=\"fab-button\"></FAB>
    </StackLayout>
    \n
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';

    Vue.registerElement(
      'Fab',
      () => require('@nstudio/nativescript-floatingactionbutton').Fab
    );
    \n

    Template

    \n
    <template>
      <page>
        <grid-layout rows=\"auto, *\">
          <list-view row=\"1\" items=\"{{ users }}\">
            <list-view.itemTemplate>
              <label text=\"{{ name }}\" textWrap=\"true\" />
            </list-view.itemTemplate>
          </list-view>
          <fab
            @tap=\"fabTap\"
            row=\"1\"
            icon=\"res://ic_add_white\"
            rippleColor=\"#f1f1f1\"
            class=\"fab-button\"
          >    </fab>
        </grid-layout>
      </page>
    </template>
    \n
    \n

    CSS

    \n

    Recommended CSS styles.

    \n
    .fab-button {
      height: 70;
      width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles
      margin: 15;
      background-color: #ff4081;
      horizontal-align: right;
      vertical-align: bottom;
    }
    \n

    Use Icon Fonts

    \n

    First you need to setup icon fonts as described in NativeScript documentation.

    \n

    After this, you can use icon fonts on FAB by specifiying the unicode as text and add the fas/far class:

    \n
    <FAB:fab text=\"&#xf02a;\" class=\"fab-button fas\" />
    \n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyAndroidiOSDescriptionNote
    backgroundColorXXSets the background color of the button
    iconXXSupports the same image source options that NativeScript images supportRequired on android
    textXXAllows to use text instead of imageCan be styled with font-* and color CSS properties
    rippleColorXRipple color on lollipop devices, it will fill the FAB on pre-lollipop devicesNone
    hideOnSwipeOfViewXXDirects the fab to animate itself in and out on scrollPass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView"
    hideAnimationDurationXXHow many milliseconds it takes for the button to hide.Default if not set: 300ms
    swipeAnimationXXslideDown, slideUp, slideLeft, slideRight, scaleDefault is slideDown
    androidScaleTypeXcenter, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix
    for more details see Android-Docs    		Default is center
    \n

    iOS Notes

    \n
      \n
    • We're using MNFloatingActionButton by Matt Nydam
      • \n
    • Width\\Height are requried properties
      • \n
    • icon is a required property, if left as empty string default will be shown
      • \n
    \n

    Changelog

    \n

    Contributors

    \n\n\n\n\n\n\n\n\n\n\n

    Brad Martin
    Steve McNiven-Scott
    Nathanael Anderson
    Gabriel Marinho
    \n\n\n\n\n\n\n\n\n\n

    Alexander Vakrilov
    Lázaro Danillo Menezes
    Jofferson Ramirez Tiquez
    Ravi
    \n\n\n\n\n\n\n\n\n\n

    Samuel Ikechukwu
    Stanimira Vlaeva
    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-audio":{"name":"@dsvishchov/nativescript-audio","version":"6.2.1","license":"MIT","readme":"\n

    NativeScript Audio

    \n    \n

    NativeScript plugin to play and record audio files for Android and iOS.

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation

    \n

    NativeScript 7+:

    \n

    ns plugin add nativescript-audio

    \n

    NativeScript Version prior to 7:

    \n

    tns plugin add nativescript-audio@5.1.1

    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Permissions

    \n

    iOS

    \n

    You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Android

    \n

    If you are going to use the recorder capability for Android, you need to add the RECORD_AUDIO permission to your AndroidManifest.xml file located in App_Resources.

    \n
        <uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>
    \n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        // You can pass a duration hint to control the behavior of other application that may
        // be holding audio focus.
        // For example: new  TNSPlayer(AudioFocusDurationHint.AUDIOFOCUS_GAIN_TRANSIENT);
        // Then when you play a song, the previous owner of the
        // audio focus will stop. When your song stops
        // the previous holder will resume.
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function () {
        console.log('finished playing');
      },
      errorCallback: function (errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function (args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    Demo App

    \n
      \n
    • fork/clone the repository
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios (scripts are located in the scripts of the package.json in the src directory if you are curious)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@duicorn/nativescript-posthog":{"name":"@duicorn/nativescript-posthog","version":"0.2.2","license":"Apache-2.0","readme":"

    @duicorn/nativescript-posthog

    \n

    NativeScript plugin for PostHog product analytics. Not all configuration options are implemented yet, but basic event capturing and feature flags are supported.

    \n
    ns plugin add @duicorn/nativescript-posthog
    \n

    Usage

    \n
    import Posthog from '@duicorn/nativescript-posthog';

    // initialize with you posthog key
    Posthog.setup('<api_key>', {
        host: 'https://app.posthog.com',
        recordScreenViews: true,
        captureApplicationLifecycleEvents: true,
    });

    // capture an event 
    Posthog.capture('app event');

    // identify the user
    Posthog.identify('uniqueID', {email: ''});
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-iadvize":{"name":"@essent/nativescript-iadvize","version":"2.13.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@speigg/nativescript-urlhandler":{"name":"@speigg/nativescript-urlhandler","version":"1.0.0","license":"MIT","readme":"

    NativeScript URL Handler Plugin

    \n

    \"Greenkeeper\n\"Build\n\"npm

    \n

    \"NPM\"

    \n
    \n

    Feel free to donate

    \n

    Click here to lend your support and make a donation at www.pledgie.com !\n\n\"\"\n\nOr donate Bitcoins.

    \n

    Also via greenaddress

    \n
    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component } from \"@angular/core\";
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    @Component({
      selector: \"gr-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
          handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
          });
        }
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require(\"nativescript-urlhandler\").handleOpenURL;

    handleOpenURL(function(appURL) {
    console.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    handleOpenURL((appURL: AppURL) => {
        console.log('Got the following appURL', appURL);
    });
    \n

    Installation

    \n
    $ tns plugin add nativescript-urlhandler
    \n

    Or if you want to use the development version (nightly build), which maybe not stable!:

    \n
    $ tns plugin add nativescript-urlhandler@next
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" /> 
        <action android:name=\"android.intent.action.VIEW\" /> 
        <category android:name=\"android.intent.category.DEFAULT\" /> 
        <category android:name=\"android.intent.category.BROWSABLE\" /> 
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTop\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" /> 
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLName</key>
                <string>com.yourcompany.myapp</string>
            </dict>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>myapp</string>
                </array>
            </dict>
        </array>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/theme":{"name":"@nativescript/theme","version":"3.0.2","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-videorecorder-x":{"name":"nativescript-videorecorder-x","version":"1.0.4","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript VideoRecorder

    \n

    This is derived from nativescript-videorecorder with ONLY a change to work with AndroidX.\nOnce nativescript-videorecorder plugin is updated, this will be deprecated.

    \n

    Install

    \n

    tns plugin add nativescript-videorecorder-x

    \n

    QuickStart

    \n

    JavaScript

    \n
    var vr = require('nativescript-videorecorder-x');

    var options = {
        saveToGallery: true,
        duration: 30,
        format: 'mp4',
        size: 10,
        hd: true,
        explanation: 'Why do i need this permission'
    }

    var videorecorder = new vr.VideoRecorder(options);

    videorecorder.record().then((data)=>{
      console.log(data.file)
    }).catch((err)=>{
      console.log(err)
    })
    \n

    TypeScript

    \n
    import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder-x';

    const options: VideoRecorderOptions = {
        hd: true
        saveToGallery: true
    }
    const videorecorder = new VideoRecorder(options)

    videorecorder.record().then((data) => {
        console.log(data.file)
    }).catch((err) => {
        console.log(err)
    })
    \n

    VideoRecorder

    \n

    Options

    \n

    Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

    \n
      \n
    • hd?: boolean - If true, highest quality of device, if false MMS quality (default: false)
      • \n
    • saveToGallery?: boolean - Enable to save the video in the device Gallery, otherwise it will be store within the sandbox of the app (default: false)
      • \n
    • duration?: number - Limit the duration of the video, 0 for unlimited (default: 0)
      • \n
    • position?: 'front' | 'back' | 'none' - Force which device camera should be used, 'none' for no preferences (default: none)
      • \n
    \n

    Additionnal parameters for Android:

    \n
      \n
    • size?: number - Limit the size of the video, 0 for unlimited (default: 0)
      • \n
    • explanation?: string - Why permissions should be accepted, optional on api > 23
      • \n
    \n

    Additionnal parameters for iOS:

    \n
      \n
    • format?: 'default' | 'mp4' - allows videos to be played on android devices (default: 'default') recommended for cross platform apps
      • \n
    \n

    VideoRecorder attributes:

    \n
      \n
    • options: Options Option object (see above section), can be set from the constructor
      • \n
    \n

    VideoRecorder methods:

    \n
      \n
    • record(options?: Options): Promise<{ file?: string } > Return a Promise with an object containing the filepath as file key. It may not be there if the video has been saved to the gallery. An optional options parameter can be given to override instance options, this is deprecated.
      • \n
    • requestPermissions(): Promise Return a Promise, resolved if permissions are OK (ask for permissions if not), rejected if user didn't have accepted the permissions. This method is implicitely called by record()
      • \n
    • isAvailable(): boolean Check if device has a camera and is compatible with what has been set in options
      • \n
    \n

    Promises above can be rejected with:

    \n
      \n
    • { event: 'denied'} - Permissions have not been accepted
      • \n
    • { event: 'cancelled'} - Video capture have been canceled
      • \n
    • { event: 'failed'} - Generic error
      • \n
    \n

    AdvancedVideoView

    \n

    AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder-x/advanced\">
    <recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
    \n
    const advancedView = page.getViewById(\"camera\");
    advancedView.startRecording();
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    start()voidStarts the camera preview
    stop()voidStop the camera preview
    startRecording()voidStart recording camera preview.
    stopRecording()voidStop recording camera preview.
    toggleCamera()voidToggles between front or the back camera.
    toggleTorch()voidToggles the torch (iOS only for now)
    durationintGet the current recording video duration.
    cameraPositionBACKvoidGets or Sets camera position
    outputOrientationPORTRAITvoidGets or Sets output video orientation
    isTorchAvailablebooleanReadOnly: is the torch supported for this camera
    torchfalsebooleanEnable/Disable torch (iOS only for now)
    qualityMAX_480PvoidGets or sets Video Quality
    \n

    outputOrientation

    \n

    Be careful to not change orientation while recording, it's not supported.

    \n

    Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

    \n

    This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-getters":{"name":"nativescript-getters","version":"1.0.2","license":"MIT","readme":"

    NativeScript Getters Plugin

    \n

    \"NPM\n\"NPM\n\"NPM\n\"GitHub

    \n

    A NativeScript plugin that adds six new getters – in addition to the native getViewById method – to retrieve one or more views by tag, type, class, property, value pair or style.

    \n

    Getting Started

    \n

    Prerequisites

    \n

    Basics

    \n
      \n
    • NativeScript installed and configured. (see CLI setup)
      • \n
    • An IDE with intelligent code completion. (see VS Code)
      • \n
    • A functional project to use the plugin. (see app templates)
      • \n
    \n

    Minimum versions

    \n\n

    Installation

    \n

    In Command prompt or Terminal navigate to your application root folder and run one of the following commands to install the plugin. (see docs)

    \n
    ns plugin add nativescript-getters
    \n

    or

    \n
    npm install --save nativescript-getters
    \n
    \n

    The --save flag will add the plugin as dependency in your package.json file.

    \n
    \n

    Usage

    \n

    Import the plugin at the top of your JavaScript or TypeScript file. It can be imported only once into the application entry point file. (see docs)

    \n
    import 'nativescript-getters'
    \n
    \n

    New methods have been added into the Frame, Page, layouts, tabs and texts classes. (see methods)

    \n
    \n

    Examples

    \n

    Get views by tags

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive
      const foundViews = page.getViewsByTags('Label', 'Button')

      console.log('action bar:', actionBar)
      console.log('found views:', foundViews)
    }
    \n

    The list of possible tags can be found on the modules page of the NativeScript API documentation. (see "Classes")

    \n

    Get views by types

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const layouts = page.getViewsByTypes('layout')
      const foundViews = page.getViewsByTypes('field', 'list')

      console.log('layouts:', layouts)
      console.log('found views:', foundViews)
    }
    \n

    The list of available types: bar, picker, view, layout, list, text, tab, field and form. (see types.ts)

    \n

    Get views by classes

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const mainTitle = page.getViewsByClasses('h1')[0]
      const foundViews = page.getViewsByClasses('text-primary', 'font-italic')

      console.log('main title:', mainTitle)
      console.log('found views:', foundViews)
    }
    \n

    Get views by identifiers

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')
      const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')

      console.log('debug ids:', debugIds)
      console.log('found views:', foundViews)
    }
    \n

    Get views by properties

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')
      const foundViews = page.getViewsByProperties('columns', 'width')

      console.log('texts:', texts)
      console.log('found views:', foundViews)
    }
    \n

    The list of possible property names can be found on the view page of the NativeScript API documentation.

    \n

    Get views by val pairs

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const welcomeTexts = page.getViewsByValPairs(
        { name: 'text', value: 'Welcome' }
      )
      const foundViews = page.getViewsByValPairs(
        { name: 'columns', value: 'auto' },
        { name: 'width', value: '210' }
      )

      console.log('welcome texts:', welcomeTexts)
      console.log('found views:', foundViews)
    }
    \n

    The list of possible property names and their values can be found on the view page of the NativeScript API documentation.

    \n

    Get views by styles

    \n
    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const redViews = page.getViewsByStyles(
        { name: 'background', value: 'FF0000' }
      )
      const foundViews = page.getViewsByStyles(
        { name: 'visibility', value: 'collapsed' },
        { name: 'opacity', value: '0.5' }
      )

      console.log('red views:', redViews)
      console.log('found views:', foundViews)
    }
    \n
    \n

    Note: The color name (example: red or white) is converted by NativeScript to hexadecimal.

    \n
    \n

    The list of possible styles can be found on the style page of the NativeScript API documentation.

    \n

    Example in stand-alone mode

    \n
    import { getViewsByTags } from 'nativescript-getters'

    export function standaloneMode(view: View) {
      const foundViews = getViewsByTags.call(view, 'Label', 'Button')

      console.log('found views:', foundViews)
    }
    \n

    More info about call():

    \n\n

    API

    \n

    Methods

    \n

    All methods return an array of views, except for the native method getViewById.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameParameter(s)Returns
    getViewsByTags...tagNames: string[]View[]
    getViewsByTypes...typeNames: string[]View[]
    getViewsByClasses...classNames: string[]View[]
    getViewsByIdentifiers
    Alias: getViewsByIds    		...idNames: string[]View[]
    getViewsByProperties
    Alias: getViewsByProps    		...propNames: string[]View[]
    getViewsByValPairs...valPairs: ValPair[]
    ValPair: { name: string, value: string }    		View[]
    getViewsByStyles...styles: ValPair[]
    ValPair: { name: string, value: string }    		View[]
    \n

    Native method

    \n

    The native method returns only a view. Its name is written in the singular (getView...).

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameParameterReturns
    getViewByIdidName: stringView
    \n

    Known issues

    \n

    VSCode IntelliSense

    \n

    If the following TypeScript declaration error occurs, you need to open the application entry point file (and keep it open) or click on the tab of the file already open.

    \n
    Property 'getViewsBy...' does not exist on type 'View'. ts(2339)
    \n

    VSCode IntelliSense now remembers the entry point of the application and recognizes the declaration of new methods.

    \n

    Vue.js

    \n

    The plugin may not work properly with these symlinked. It is because webpack resolves symlinks to their real locations by default.

    \n

    A workaround for this issue is to manually disable symlinks resolution in webpack:

    \n
    const config = {
      resolve: {
        // resolve symlinks to symlinked modules
        symlinks: false
      }
    }
    \n

    Question? Idea?

    \n

    If you have a question about how nativescript-getters works or an idea to improve it, the Discussions tab in GitHub is the place to be.

    \n

    However, if you get an error, you should open an issue.

    \n

    Contributing

    \n

    See CONTRIBUTING for more information.

    \n

    License

    \n

    Distributed under the MIT License. See LICENSE for more information.

    \n

    Contact

    \n

    Benjamin Grand @bgrand_ch

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-collectionview-waterfall":{"name":"nativescript-collectionview-waterfall","version":"1.0.10","license":"ISC","readme":"

    NativeScript CollectionView waterfall Plugin

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript CollectionView waterfall Plugin.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-collectionview-waterfall

    \n

    This command automatically installs the necessary files, as well as stores nativescript-collectionview-waterfall as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    To install the plugin run

    \n
    import install from 'nativescript-collectionview-waterfall';
    install();
    \n

    then simply use the layoutStyle="waterfall" as a collectionview property

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fresco-compat":{"name":"nativescript-fresco-compat","version":"1.0.17","license":"ISC","readme":"

    Welcome to nativescript-fresco

    \n
    \n

    A NativeScript Plugin for Android apps.

    \n
    \n

    \"npm\"\n\"npm\"\n\"Dependency

    \n

    What is nativescript-fresco?

    \n

    nativescript-fresco is a NativeScript plugin that exposes the Fresco library used for efficiently displaying images on Android. More information about what Fresco is and how it works is available on its official website here.

    \n

    The nativescript-fresco plugin enables NativeScript developers to use the FrescoDrawee class which is extends the traditional Android ImageView component and adds the smart Fresco image management algorithms. The plugin exposes the drawee as a NativeScript view so you basically put it in the XML definition of your page and provide the URI to the image you would like to use.

    \n

    How to use nativescript-fresco?

    \n

    In vanila NativeScript

    \n

    From npm

    \n
      \n
    1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-fresco.
      2. \n
    2. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
      3. \n
    \n

    From local repo?

    \n
      \n
    1. Clone the repository and go to the root directory on your computer.
      2. \n
    2. Use tsc to transpile the .ts sources: tsc -p.
      3. \n
    3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-fresco-repo-dir>.
      4. \n
    4. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
      5. \n
    \n

    JavaScript:

    \n
    var application = require(\"application\");
    var fresco = require(\"nativescript-fresco\");

    if (application.android) {
        application.onLaunch = function (intent) {
            fresco.initialize();
        };
    }
    \n

    TypeScript:

    \n
    import application = require(\"application\");
    import fresco = require(\"nativescript-fresco\");

    if (application.android) {
        application.onLaunch = function (intent) {
            fresco.initialize();
        };
    }
    \n

    Use fresco in the XML definition of the page as follows:

    \n
    <Page
        xmlns=\"http://www.nativescript.org/tns.xsd\" 
        xmlns:nativescript-fresco=\"nativescript-fresco\">
        <nativescript-fresco:FrescoDrawee width=\"250\" height=\"250\"
                                          imageUri=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
    </Page>
    \n

    In NativeScript + Angular 2

    \n
      \n
    1. Import the TNSFrescoModule from nativescript-fresco/angular and add it to the imports of your initial @NgModule, like shown here.
      2. \n
    2. As described above make sure to initialize the nativescript-fresco plugin in the launch event of your {N} application.
      3. \n
    \n

    Examples

    \n

    You can refer the demo folder of the repo for runnable {N} project that demonstrates the nativescript-fresco plugin with all of its features in action.

    \n

    Features

    \n

    As documented by the Fresco library setting the height and width are mandatory, more details on this topic could be found here. So the first this you should do when declaring the FrescoDrawee is set its width and height attributes or set only one of them and set the FrescoDrawee's aspectRatio. The width and height of the FrescoDrawee in your {N} application supports percentages which makes it possible to declare for example width="50%" and aspectRatio="1.33" achieving exactly 50% width with dynamically calculated height based on the aspect ration of the loaded image from the imageUri.

    \n

    Basic attributes

    \n
      \n
    • imageUri
      • \n
    \n

    String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

    \n
    <nativescript-fresco:FrescoDrawee imageUri=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
    \n
      \n
    • placeholderImageUri
      • \n
    \n

    String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your FrescoDrawee instances.

    \n
    <nativescript-fresco:FrescoDrawee placeholderImageUri=\"~/placeholder.jpg\"/>
    \n
      \n
    • failureImageUri
      • \n
    \n

    String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the imageUri is not successful.

    \n
    <nativescript-fresco:FrescoDrawee failureImageUri=\"~/failure.jpg\"/>
    \n

    Advanced optional attributes

    \n

    There are a couple of optional attributes that could be set on the FrescoDrawee instance to achieve advanced behaviors:

    \n
      \n
    • backgroundUri
      • \n
    \n

    String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the FrescoDrawee.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your FrescoDrawee instances.

    \n
    <nativescript-fresco:FrescoDrawee backgroundUri=\"~/image.jpg\"/>
    \n
      \n
    • actualImageScaleType
      • \n
    \n

    String value used by FrescoDrawee image scale type. This property can be set to:

    \n

    'center' - Performs no scaling.

    \n

    'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'centerInside' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitCenter' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitStart' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitEnd' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n
    <nativescript-fresco:FrescoDrawee actualImageScaleType=\"centerInside\"/>
    \n
      \n
    • fadeDuration
      • \n
    \n

    Number value used for the fade-in duration. This value is in milliseconds.

    \n
    <nativescript-fresco:FrescoDrawee fadeDuration=\"3000\"/>
    \n
      \n
    • aspectRatio
      • \n
    \n

    Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

    \n

    Note: In some layout scenarios it is necessary to set the verticalAlignment of the FrescoDrawee to 'top' or 'bottom' in order to "anchor" the drawee and achieve dynamic sizing.

    \n
    <nativescript-fresco:FrescoDrawee aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
    \n
      \n
    • progressiveRenderingEnabled
      • \n
    \n

    Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

    \n
    <nativescript-fresco:FrescoDrawee progressiveRenderingEnabled=\"true\"/>
    \n
      \n
    • showProgressBar
      • \n
    \n

    Boolean value used for showing or hiding the progress bar.

    \n
    <nativescript-fresco:FrescoDrawee showProgressBar=\"true\"/>
    \n
      \n
    • progressBarColor
      • \n
    \n

    String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

    \n
    <nativescript-fresco:FrescoDrawee progressBarColor=\"blue\"/>
    \n
      \n
    • roundAsCircle
      • \n
    \n

    Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

    \n
    <nativescript-fresco:FrescoDrawee roundAsCircle=\"true\"/>
    \n
      \n
    • roundedCornerRadius
      • \n
    \n

    Number value used as radius for rounding the image's corners.

    \n
    <nativescript-fresco:FrescoDrawee roundedCornerRadius=\"50\"/>
    \n
      \n
    • roundBottomRight
      • \n
    \n

    Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundBottomRight=\"true\"/>
    \n
      \n
    • roundBottomLeft
      • \n
    \n

    Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundBottomLeft=\"true\"/>
    \n
      \n
    • roundTopLeft
      • \n
    \n

    Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundTopLeft=\"true\"/>
    \n
      \n
    • roundTopRight
      • \n
    \n

    Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundTopRight=\"true\"/>
    \n
      \n
    • autoPlayAnimations
      • \n
    \n

    Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

    \n
    <nativescript-fresco:FrescoDrawee autoPlayAnimations=\"true\"/>
    \n
      \n
    • tapToRetryEnabled
      • \n
    \n

    Boolean value used for enabling/disabling a tap to retry action for the download of the FrescoDrawee image.

    \n
    <nativescript-fresco:FrescoDrawee tapToRetryEnabled=\"true\"/>
    \n

    Events

    \n
      \n
    • finalImageSet - arguments FinalEventData
      • \n
    \n

    This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

    \n
    <nativescript-fresco:FrescoDrawee finalImageSet=\"onFinalImageSet\"/>
    \n

    JavaScript:

    \n
    function onFinalImageSet(args) {
        var frescoEventData = args;
        var drawee = frescoEventData.object;
    }
    exports.onFinalImageSet = onFinalImageSet;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FinalEventData } from \"nativescript-fresco\";

    export function onFinalImageSet(args: FinalEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • failure - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the final image failed.

    \n
    <nativescript-fresco:FrescoDrawee failure=\"onFailure\"/>
    \n

    JavaScript:

    \n
    function onFailure(args) {
        var drawee = args.object;
    }
    exports.onFailure = onFailure;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

    export function onFailure(args: FailureEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • intermediateImageSet - arguments IntermediateEventData
      • \n
    \n

    This event is fired after any intermediate image has been set.

    \n
    <nativescript-fresco:FrescoDrawee intermediateImageSet=\"onIntermediateImageSet\"/>
    \n

    JavaScript:

    \n
    function onIntermediateImageSet(args) {
        var drawee = args.object;
    }
    exports.onIntermediateImageSet = onIntermediateImageSet;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, IntermediateEventData } from \"nativescript-fresco\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • intermediateImageFailed - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the intermediate image failed.

    \n
    <nativescript-fresco:FrescoDrawee intermediateImageFailed=\"onIntermediateImageFailed\"/>
    \n

    JavaScript:

    \n
    function intermediateImageFailed(args) {
        var drawee = args.object;
    }
    exports.intermediateImageFailed = intermediateImageFailed;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

    export function intermediateImageFailed(args: FailureEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • submit - arguments EventData
      • \n
    \n

    This event is fired before the image request is submitted.

    \n
    <nativescript-fresco:FrescoDrawee submit=\"onSubmit\"/>
    \n

    JavaScript:

    \n
    function onSubmit(args) {
        var drawee = args.object;
    }
    exports.onSubmit = onSubmit;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onSubmit(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • release - arguments EventData
      • \n
    \n

    This event is fired after the controller released the fetched image.

    \n
    <nativescript-fresco:FrescoDrawee release=\"onRelease\"/>
    \n

    JavaScript:

    \n
    function onRelease(args) {
        var drawee = args.object;
    }
    exports.onRelease = onRelease;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onRelease(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n

    Event arguments

    \n

    All events exposed by 'nativescript-fresco' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

    \n
      \n
    • FinalEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the finalImageSet.

    \n
    import {FrescoDrawee, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-fresco\";

    export function onFinalImageSet(args: FinalEventData) {
        var info: ImageInfo  = args.imageInfo;
        var animatable: AnimatedImage = args.animatable;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
    }
    \n
      \n
    • FailureEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

    \n
    import {FrescoDrawee, FailureEventData, FrescoError } from \"nativescript-fresco\";

    export function onFailure(args: FailureEventData) {
        var error: FrescoError = args.error;
        var message: string = error.getMessage();
        var type: string = error.getErrorType();
        var fullError: string = error.toString();
    }
    \n
      \n
    • IntermediateEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the intermediateImageSet.

    \n
    import {FrescoDrawee, IntermediateEventData, ImageInfo } from \"nativescript-fresco\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var info: ImageInfo  = args.imageInfo;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
    \n
      \n
    • EventData
      • \n
    \n

    Instances of this class are provided to the handlers of the release and submit.

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onSubmit(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n

    Cache

    \n

    The nativescript-fresco {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

    \n

    'Refresh' the 'imageUri'

    \n

    Not so rarely you may have a scenario where the actual image on your remote service from the imageUri of the FrescoDrawee has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the imageUri by calling the updateImageUri():

    \n
    // 'drawee' is the instance the 'FrescoDrawee' in the project.
    drawee.updateImageUri();
    \n

    Clear everything from the cache

    \n

    Managing the caches in nativescript-fresco is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

    \n
    var frescoModel = require(\"nativescript-fresco\");

    var imagePipeLine = frescoModel.getImagePipeline();
    \n
      \n
    • Clear both the memory and disk caches
      • \n
    \n
    imagePipeLine.clearCaches();
    \n
      \n
    • Clear the memory cache
      • \n
    \n
    imagePipeLine.clearMemoryCaches();
    \n
      \n
    • Clear the disk cache
      • \n
    \n
    imagePipeLine.clearDiskCaches();
    \n

    Evict all images with a specific URI from the cache

    \n

    If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (imageUri). Evicting is done again via the ImagePipeline:

    \n
    var frescoModel = require(\"nativescript-fresco\");

    var imagePipeLine = frescoModel.getImagePipeline();
    \n
      \n
    • Evict URI from both the memory and disk caches
      • \n
    \n
    imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the memory cache
      • \n
    \n
    imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the disk cache
      • \n
    \n
    imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
    \n

    Sample Screenshots

    \n

    All of the images are sample images for showcasing purposes.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
    \"Placeholder\"Transition
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 3 - Image shown successfully from imageUriSample 4 - 'Failure' image shown
    \"Successfully\"Successfully
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-login-v2":{"name":"nativescript-social-login-v2","version":"1.0.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Social Login

    \n

    NativeScript module for social (token based) log-ins.

    \n

    \"Donate\"

    \n

    Implementations

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderAndroidiOS
    GoogleYesYes
    FacebookYesYes
    TwitterNoNo
    \n

    License

    \n

    MIT license

    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Changes

    \n

    v1.4.x to 1.5.x

    \n

    Google

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.3.x to 1.4.x

    \n

    Facebook

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.2.x to 1.3.x

    \n

    Google

    \n
      \n
    • The default value for ILoginConfiguration.google.isRequestAuthCode is (false) now. This behavior will not be changed in the future again!
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-social-login
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n
    Permissions
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <!-- ... -->

        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <!-- ... -->
    </manifest>
    \n
    Strings
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
        <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
    </resources>
    \n

    Setup Android Google Sign in for Debug Builds

    \n
      \n
    1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
      2. \n
    \n
    keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    \n

    The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

    \n
      \n
    1. Create an app here on Google Developer site.\n
        \n
      • Enter the App name. This can be anything but it will display to the user who is authenticating.
        • \n
      • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
        • \n
      • Next configure the Google services.
        • \n
      • Select Google Sign-In
        • \n
      • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
        • \n
      • Enable Google Sign-In\n
          \n
        • If only enabling Google Sign-In you do not need the configuration file inside your application.
          • \n
        \n
        • \n
      \n
      2. \n
    2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
      3. \n
    \n

    iOS

    \n

    GoogleService-Info.plist

    \n

    You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <!-- FACEBOOK AND GOOGLE LOGIN -->
    <key>CFBundleURLTypes</key>
        <array>
            <!-- GOOGLE START -->
    \t\t<dict>
    \t\t\t<key>CFBundleTypeRole</key>
    \t\t\t<string>Editor</string>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                    <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                    <!-- Get it from your GoogleService-Info.plist -->
                    <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t\t</array>
    \t\t</dict>
    \t\t<!-- GOOGLE END -->
    \t\t<!-- FACEBOOK START -->
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
            <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
                </array>
            </dict>
        </array>
        <key>CFBundleVersion</key>
        <string>1.0</string>
        <key>FacebookAppID</key>
        <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
        <key>FacebookDisplayName</key>
        <string>FacebookLoginDemo</string>
        <!-- FACEBOOK END -->
    \n

    https://developers.facebook.com/docs/ios

    \n

    Application main file

    \n

    Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

    \n
    TypeScript
    \n
    if (application.ios) {

      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
          let gglDelegate = false;

          try {
            const errorRef = new interop.Reference();
            GGLContext.sharedInstance().configureWithError(errorRef);

            const signIn = GIDSignIn.sharedInstance();
            gglDelegate = true;
          } catch (error) {
            console.log(error);
          }

          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

          return gglDelegate || fcbDelegate;
        }

        applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
          const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

          return fcbDelegate || gglDelegate;
        }
      }

      application.ios.delegate = MyDelegate;
    }
    \n
    JavaScript
    \n
    if (application.ios) {
        var MyDelegate = (function (_super) {
            __extends(MyDelegate, _super);
            function MyDelegate() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                var gglDelegate = false;
                try {
                    var errorRef = new interop.Reference();
                    GGLContext.sharedInstance().configureWithError(errorRef);
                    var signIn = GIDSignIn.sharedInstance();
                    gglDelegate = true;
                }
                catch (error) {
                    console.log(error);
                }
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
                return gglDelegate || fcbDelegate;
            };
            MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
                var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
                return fcbDelegate || gglDelegate;
            };
            return MyDelegate;
        }(UIResponder));
        MyDelegate.ObjCProtocols = [UIApplicationDelegate];
        application.ios.delegate = MyDelegate;
    }
    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    import SocialLogin = require(\"nativescript-social-login\");
    \n

    Initialize

    \n
    import Application = require(\"application\");
    import SocialLogin = require(\"nativescript-social-login\");

    if (Application.android) {
        Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
            let result = SocialLogin.init({
                activity: event.activity,
            });
        });
    }
    \n

    The init() function receives an (optional) object with the following structure:

    \n
    interface ILoginConfiguration {
        /**
         * The underlying custom activity to use.
         */
        activity?: android.app.Activity;

        /**
         * Facebook specific configuration.
         */
        facebook?: {
            /**
             * Initialize Facebook or not. Default: (true)
             */
            initialize?: boolean;
            /**
             * Should Logout current Facebook session or not. Default: (false)
             */
            clearSession?: boolean;
        }

        /**
         * Google specific configuration.
         */
        google?: {
            /**
             * Initialize Google or not. Default: (true)
             */
            initialize?: boolean;

           /**
            * The server client ID for requesting server auth token.
            */
            serverClientId?: string;

            /**
             * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
             * It will be set in authCode property of result object.
             *
             * If false (default), it will request for token id. it will be set in authToken property of result object.
             */
            isRequestAuthCode?: boolean;
        }

        /**
         * Fallback action for the result of the underlying activity.
         */
        onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
    }
    \n

    The result object that is returned by init() has the following structure:

    \n
    interface IInitializationResult {
        facebook: {
            error: any,
            isInitialized: boolean,
        },
        google: {
            error: any,
            isInitialized: boolean,
        },
        twitter: {
            error: any,
            isInitialized: boolean,
        }
    }
    \n

    The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

    \n

    The error properties are only defined if an exception was thrown while initialization.

    \n

    Login

    \n

    If you want to use a login functions you have to submit a callback that receives an object with the following structure:

    \n
    interface ILoginResult {
        /**
         * Gets the auth token (if requested).
         */
        authToken?: string;

        /**
         * Offline auth code used by servers to request new auth tokens.
         */
        authCode?: string;

        /**
         * Gets the result code.
         */
        code: LoginResultType;

        /**
         * The display name.
         */
        displayName?: string;

        /**
         * First name of the user.
         */
        firstName?: string;

        /**
         * Last name of the user.
         */
        lastName?: string;

        /**
         * Gets the error (if defined).
         */
        error?: any;

        /**
         * The ID of the user.
         */
        id?: string;

        /**
         * The photo URL.
         */
        photo?: string;

        /**
         * Gets the underlying provider.
         */
        provider?: string;

        /**
         * The user token, like email address.
         */
        userToken?: string;
    }
    \n

    The following functions are implemented:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderProvider
    loginWithFacebookFacebook
    loginWithGoogleGoogle
    \n

    Example

    \n
    SocialLogin.loginWithFacebook(
        (result) => {
            console.log(\"code: \" + result.code);
            console.log(\"error: \" + result.error);
            console.log(\"userToken: \" + result.userToken);
            console.log(\"displayName: \" + result.displayName);
            console.log(\"photo: \" + result.photo);
            console.log(\"authToken: \" + result.authToken);
        }
    );
    \n

    It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

    \n
    import { Component, NgZone } from \"angular/core\";

    @Component({})
    class SigninComponent {
        constructor(private ngZone: NgZone) {}

        login() {
            SocialLogin.loginWithFacebook((result) => {
                this.ngZone.run(() => {
                    console.log(\"code: \" + result.code);
                    console.log(\"error: \" + result.error);
                    console.log(\"userToken: \" + result.userToken);
                    console.log(\"displayName: \" + result.displayName);
                    console.log(\"photo: \" + result.photo);
                    console.log(\"authToken: \" + result.authToken);
                });
            });
        }
    }
    \n

    There is also a great example by dgomezs that shows how to configure your app for Facebook.

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

    \n
    SocialLogin.addLogger(function(msg: any, tag: string) {
        console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
    });
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@oscarlodriguez/nativescript-fresco":{"name":"@oscarlodriguez/nativescript-fresco","version":"1.0.17","license":"ISC","readme":"

    Welcome to nativescript-fresco

    \n
    \n

    A NativeScript Plugin for Android apps.

    \n
    \n

    \"npm\"\n\"npm\"\n\"Dependency

    \n

    What is nativescript-fresco?

    \n

    nativescript-fresco is a NativeScript plugin that exposes the Fresco library used for efficiently displaying images on Android. More information about what Fresco is and how it works is available on its official website here.

    \n

    The nativescript-fresco plugin enables NativeScript developers to use the FrescoDrawee class which is extends the traditional Android ImageView component and adds the smart Fresco image management algorithms. The plugin exposes the drawee as a NativeScript view so you basically put it in the XML definition of your page and provide the URI to the image you would like to use.

    \n

    How to use nativescript-fresco?

    \n

    In vanila NativeScript

    \n

    From npm

    \n
      \n
    1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-fresco.
      2. \n
    2. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
      3. \n
    \n

    From local repo?

    \n
      \n
    1. Clone the repository and go to the root directory on your computer.
      2. \n
    2. Use tsc to transpile the .ts sources: tsc -p.
      3. \n
    3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-fresco-repo-dir>.
      4. \n
    4. Initialize nativescript-fresco in the launch event of your {N} application by using the following code:
      5. \n
    \n

    JavaScript:

    \n
    var application = require(\"application\");
    var fresco = require(\"nativescript-fresco\");

    if (application.android) {
        application.onLaunch = function (intent) {
            fresco.initialize();
        };
    }
    \n

    TypeScript:

    \n
    import application = require(\"application\");
    import fresco = require(\"nativescript-fresco\");

    if (application.android) {
        application.onLaunch = function (intent) {
            fresco.initialize();
        };
    }
    \n

    Use fresco in the XML definition of the page as follows:

    \n
    <Page
        xmlns=\"http://www.nativescript.org/tns.xsd\" 
        xmlns:nativescript-fresco=\"nativescript-fresco\">
        <nativescript-fresco:FrescoDrawee width=\"250\" height=\"250\"
                                          imageUri=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
    </Page>
    \n

    In NativeScript + Angular 2

    \n
      \n
    1. Import the TNSFrescoModule from nativescript-fresco/angular and add it to the imports of your initial @NgModule, like shown here.
      2. \n
    2. As described above make sure to initialize the nativescript-fresco plugin in the launch event of your {N} application.
      3. \n
    \n

    Examples

    \n

    You can refer the demo folder of the repo for runnable {N} project that demonstrates the nativescript-fresco plugin with all of its features in action.

    \n

    Features

    \n

    As documented by the Fresco library setting the height and width are mandatory, more details on this topic could be found here. So the first this you should do when declaring the FrescoDrawee is set its width and height attributes or set only one of them and set the FrescoDrawee's aspectRatio. The width and height of the FrescoDrawee in your {N} application supports percentages which makes it possible to declare for example width="50%" and aspectRatio="1.33" achieving exactly 50% width with dynamically calculated height based on the aspect ration of the loaded image from the imageUri.

    \n

    Basic attributes

    \n
      \n
    • imageUri
      • \n
    \n

    String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

    \n
    <nativescript-fresco:FrescoDrawee imageUri=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
    \n
      \n
    • placeholderImageUri
      • \n
    \n

    String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your FrescoDrawee instances.

    \n
    <nativescript-fresco:FrescoDrawee placeholderImageUri=\"~/placeholder.jpg\"/>
    \n
      \n
    • failureImageUri
      • \n
    \n

    String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the imageUri is not successful.

    \n
    <nativescript-fresco:FrescoDrawee failureImageUri=\"~/failure.jpg\"/>
    \n

    Advanced optional attributes

    \n

    There are a couple of optional attributes that could be set on the FrescoDrawee instance to achieve advanced behaviors:

    \n
      \n
    • backgroundUri
      • \n
    \n

    String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the FrescoDrawee.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your FrescoDrawee instances.

    \n
    <nativescript-fresco:FrescoDrawee backgroundUri=\"~/image.jpg\"/>
    \n
      \n
    • actualImageScaleType
      • \n
    \n

    String value used by FrescoDrawee image scale type. This property can be set to:

    \n

    'center' - Performs no scaling.

    \n

    'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'centerInside' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitCenter' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitStart' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitEnd' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n
    <nativescript-fresco:FrescoDrawee actualImageScaleType=\"centerInside\"/>
    \n
      \n
    • fadeDuration
      • \n
    \n

    Number value used for the fade-in duration. This value is in milliseconds.

    \n
    <nativescript-fresco:FrescoDrawee fadeDuration=\"3000\"/>
    \n
      \n
    • aspectRatio
      • \n
    \n

    Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

    \n

    Note: In some layout scenarios it is necessary to set the verticalAlignment of the FrescoDrawee to 'top' or 'bottom' in order to "anchor" the drawee and achieve dynamic sizing.

    \n
    <nativescript-fresco:FrescoDrawee aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
    \n
      \n
    • progressiveRenderingEnabled
      • \n
    \n

    Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

    \n
    <nativescript-fresco:FrescoDrawee progressiveRenderingEnabled=\"true\"/>
    \n
      \n
    • showProgressBar
      • \n
    \n

    Boolean value used for showing or hiding the progress bar.

    \n
    <nativescript-fresco:FrescoDrawee showProgressBar=\"true\"/>
    \n
      \n
    • progressBarColor
      • \n
    \n

    String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

    \n
    <nativescript-fresco:FrescoDrawee progressBarColor=\"blue\"/>
    \n
      \n
    • roundAsCircle
      • \n
    \n

    Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

    \n
    <nativescript-fresco:FrescoDrawee roundAsCircle=\"true\"/>
    \n
      \n
    • roundedCornerRadius
      • \n
    \n

    Number value used as radius for rounding the image's corners.

    \n
    <nativescript-fresco:FrescoDrawee roundedCornerRadius=\"50\"/>
    \n
      \n
    • roundBottomRight
      • \n
    \n

    Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundBottomRight=\"true\"/>
    \n
      \n
    • roundBottomLeft
      • \n
    \n

    Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundBottomLeft=\"true\"/>
    \n
      \n
    • roundTopLeft
      • \n
    \n

    Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundTopLeft=\"true\"/>
    \n
      \n
    • roundTopRight
      • \n
    \n

    Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-fresco:FrescoDrawee roundTopRight=\"true\"/>
    \n
      \n
    • autoPlayAnimations
      • \n
    \n

    Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

    \n
    <nativescript-fresco:FrescoDrawee autoPlayAnimations=\"true\"/>
    \n
      \n
    • tapToRetryEnabled
      • \n
    \n

    Boolean value used for enabling/disabling a tap to retry action for the download of the FrescoDrawee image.

    \n
    <nativescript-fresco:FrescoDrawee tapToRetryEnabled=\"true\"/>
    \n

    Events

    \n
      \n
    • finalImageSet - arguments FinalEventData
      • \n
    \n

    This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

    \n
    <nativescript-fresco:FrescoDrawee finalImageSet=\"onFinalImageSet\"/>
    \n

    JavaScript:

    \n
    function onFinalImageSet(args) {
        var frescoEventData = args;
        var drawee = frescoEventData.object;
    }
    exports.onFinalImageSet = onFinalImageSet;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FinalEventData } from \"nativescript-fresco\";

    export function onFinalImageSet(args: FinalEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • failure - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the final image failed.

    \n
    <nativescript-fresco:FrescoDrawee failure=\"onFailure\"/>
    \n

    JavaScript:

    \n
    function onFailure(args) {
        var drawee = args.object;
    }
    exports.onFailure = onFailure;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

    export function onFailure(args: FailureEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • intermediateImageSet - arguments IntermediateEventData
      • \n
    \n

    This event is fired after any intermediate image has been set.

    \n
    <nativescript-fresco:FrescoDrawee intermediateImageSet=\"onIntermediateImageSet\"/>
    \n

    JavaScript:

    \n
    function onIntermediateImageSet(args) {
        var drawee = args.object;
    }
    exports.onIntermediateImageSet = onIntermediateImageSet;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, IntermediateEventData } from \"nativescript-fresco\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • intermediateImageFailed - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the intermediate image failed.

    \n
    <nativescript-fresco:FrescoDrawee intermediateImageFailed=\"onIntermediateImageFailed\"/>
    \n

    JavaScript:

    \n
    function intermediateImageFailed(args) {
        var drawee = args.object;
    }
    exports.intermediateImageFailed = intermediateImageFailed;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";

    export function intermediateImageFailed(args: FailureEventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • submit - arguments EventData
      • \n
    \n

    This event is fired before the image request is submitted.

    \n
    <nativescript-fresco:FrescoDrawee submit=\"onSubmit\"/>
    \n

    JavaScript:

    \n
    function onSubmit(args) {
        var drawee = args.object;
    }
    exports.onSubmit = onSubmit;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onSubmit(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n
      \n
    • release - arguments EventData
      • \n
    \n

    This event is fired after the controller released the fetched image.

    \n
    <nativescript-fresco:FrescoDrawee release=\"onRelease\"/>
    \n

    JavaScript:

    \n
    function onRelease(args) {
        var drawee = args.object;
    }
    exports.onRelease = onRelease;
    \n

    TypeScript:

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onRelease(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n

    Event arguments

    \n

    All events exposed by 'nativescript-fresco' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

    \n
      \n
    • FinalEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the finalImageSet.

    \n
    import {FrescoDrawee, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-fresco\";

    export function onFinalImageSet(args: FinalEventData) {
        var info: ImageInfo  = args.imageInfo;
        var animatable: AnimatedImage = args.animatable;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
    }
    \n
      \n
    • FailureEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

    \n
    import {FrescoDrawee, FailureEventData, FrescoError } from \"nativescript-fresco\";

    export function onFailure(args: FailureEventData) {
        var error: FrescoError = args.error;
        var message: string = error.getMessage();
        var type: string = error.getErrorType();
        var fullError: string = error.toString();
    }
    \n
      \n
    • IntermediateEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the intermediateImageSet.

    \n
    import {FrescoDrawee, IntermediateEventData, ImageInfo } from \"nativescript-fresco\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var info: ImageInfo  = args.imageInfo;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
    \n
      \n
    • EventData
      • \n
    \n

    Instances of this class are provided to the handlers of the release and submit.

    \n
    import {FrescoDrawee, EventData } from \"nativescript-fresco\";

    export function onSubmit(args: EventData) {
        var drawee = args.object as FrescoDrawee;
    }
    \n

    Cache

    \n

    The nativescript-fresco {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

    \n

    'Refresh' the 'imageUri'

    \n

    Not so rarely you may have a scenario where the actual image on your remote service from the imageUri of the FrescoDrawee has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the imageUri by calling the updateImageUri():

    \n
    // 'drawee' is the instance the 'FrescoDrawee' in the project.
    drawee.updateImageUri();
    \n

    Clear everything from the cache

    \n

    Managing the caches in nativescript-fresco is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

    \n
    var frescoModel = require(\"nativescript-fresco\");

    var imagePipeLine = frescoModel.getImagePipeline();
    \n
      \n
    • Clear both the memory and disk caches
      • \n
    \n
    imagePipeLine.clearCaches();
    \n
      \n
    • Clear the memory cache
      • \n
    \n
    imagePipeLine.clearMemoryCaches();
    \n
      \n
    • Clear the disk cache
      • \n
    \n
    imagePipeLine.clearDiskCaches();
    \n

    Evict all images with a specific URI from the cache

    \n

    If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (imageUri). Evicting is done again via the ImagePipeline:

    \n
    var frescoModel = require(\"nativescript-fresco\");

    var imagePipeLine = frescoModel.getImagePipeline();
    \n
      \n
    • Evict URI from both the memory and disk caches
      • \n
    \n
    imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the memory cache
      • \n
    \n
    imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the disk cache
      • \n
    \n
    imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
    \n

    Sample Screenshots

    \n

    All of the images are sample images for showcasing purposes.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
    \"Placeholder\"Transition
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 3 - Image shown successfully from imageUriSample 4 - 'Failure' image shown
    \"Successfully\"Successfully
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-icons":{"name":"nativescript-material-icons","version":"1.0.3","license":"MIT","readme":"

    Nativescript Material Icons

    \n

    This is a simple package which contains css classes for all material design icons and MaterialIcons font.

    \n

    Why This Plugin

    \n

    To use any font icons in nativescript project, there is a great plugin nativescript-fonticon for vanilla nativescript project and nativescript-ng2-fonticon for angular native projects.\nThat plugin requires a font file and a css file containing mapping of className and unicode of the icon.

    \n

    material-design-icons repository do not provide css file so we need to generate it manually.

    \n

    This plugin provides the ready to use css file containing mapping of className and its unicode. This plugin also automatically copy the MaterialIcons-Regular.ttf file to app/fonts folder and material-design-icons.css file to app/ directory. So you don't need to manually add those files. Also, upon uninstall of this plugin, it will remove those two files.

    \n

    Usage

    \n

    npm install nativescript-material-icons --save

    \n

    How to Use

    \n

    Check this step-by-step tutorial on how to use material design font icons in your nativescript angular applications.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-themes":{"name":"nativescript-akylas-themes","version":"2.0.2","license":{"type":"MIT","url":"https://github.com/Akylas/nativescript-themes/blob/master/LICENSE"},"readme":"

    \"npm\" \"npm\" \"npm\"

    \n

    nativescript-themes

    \n

    A NativeScript plugin to deal with dynamically loading UI Themes

    \n

    Installation

    \n

    NativeScript 2.x

    \n

    tns plugin add nativescript-themes@1.1.0

    \n

    NativeScript 5.x

    \n

    tns plugin add nativescript-themes

    \n

    Status:

    \n

    This plugin works in NativeScript 2.x and 5.x. It does NOT work in v3 or v4.

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program

    \n

    Sample Snapshot

    \n

    \"Sample1\"

    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    var themes = require('nativescript-themes');
    \n

    Setup in App

    \n

    Modify your startup app.js

    \n
    var themes = require('nativescript-themes');
    themes.applyTheme(themes.getAppliedTheme('red-theme.css'));
    \n

    This will automatically apply the "red-theme.css" theme if no other theme has ever been chosen as the default theme.

    \n

    You can also load a theme bundled by webpack using applyThemeCss:

    \n
    var themes = require('nativescript-themes');
    var cssText = require('~/assets/themes/dark.scss');
    themes.applyThemeCss(cssText, 'dark.scss');
    \n

    You ask, how exactly does this help?

    \n

    This allows you to dynamically theme an application just by calling the theme system. Your master app.css file is applied first, then the theme file and finally your page.css

    \n

    red-theme.css

    \n
    button {
        background-color: red;
    }
    \n

    green-theme.css

    \n
    button {
        background-color: green;
    }
    \n

    Demo

    \n

    Demo shows three sample themes, and shows how to load the last chosen theme at startup.

    \n

    Why use this?

    \n

    This allows you to apply a specific theme file globally so all pages get it.

    \n

    themes.applyTheme('cssFile', options);

    \n

    options.noSave = true, this will cause it not to save this info for the getAppliedTheme to retrieve, this would typically used if you needed temporarily apply a theme.

    \n
    var themes = require('nativescript-themes');
    themes.applyTheme('red-theme.css');
    \n

    theme.getAppliedTheme(<default_theme>);

    \n

    This returns the last theme applied; if no theme has been applied it will use the default_theme.

    \n
    var themes = require('nativescript-themes');
    var currentTheme = themes.getAppliedTheme('red-theme.css');
    if (currentTheme === 'red-theme.css') {
        console.log('We are using the default red-theme!');
    } else {
        console.log('We are using', currentTheme);
    }
    \n

    themes.applyThemeCss('textCss', 'filename');

    \n

    This function receives a string containing CSS and applies it. The filename is only for reference (no file will be actually loaded).

    \n
    var themes = require('nativescript-themes');
    themes.applyThemeCss('page {background-color: black;}', 'default-theme.css');
    \n

    Tutorials

    \n

    Need some extra help getting started? Check out these tutorials for dealing with NativeScript UI themes in an iOS and Android application.

    \n\n

    Contributors:

    \n
      \n
    • Brad Martin
      • \n
    • Tiago Alves
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-secure-android-keystore":{"name":"nativescript-secure-android-keystore","version":"1.0.3","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Twitter

    \n

    Secure data in android keystore

    \n

    Github

    \n

    Encrypt the data and decrypt whenever want to use\nIt save data in shared preferences using keystore encryption\nCurrently only works with Android

    \n

    Prerequisites / Requirements

    \n

    Android version Latest Version

    \n

    Installation

    \n
    tns plugin add nativescript-secure-android-keystore
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-secure-android-keystore

    \n

    Javascript

    \n
            
    const  SecureAndroidKeystore =  require(\"nativescript-secure-android-keystore\");

    function createViewModel() {
         ...
        var secure = new SecureAndroidKeystore.SecureAndroidKeystore();
        secure.storeData('mykey', 'pass1234');
        secure.retrieveData('mykey').then(res => {
            console.log(res);
        });
        ....
        return viewModel;
    }

    \n

    Typescript

    \n
         import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';

            
            private secureAndroidKeystore: SecureAndroidKeystore;

            //Inside some method         
                this.secureAndroidKeystore = new SecureAndroidKeystore();
                this.secureAndroidKeystore.storeData('mykey','pass1234');
                this.secureAndroidKeystore.retrieveData('mykey').then(res=>{
                this.message = res;
                console.log('message', this.message );
                })
    \n

    Angular Typescript

    \n
    app.module.ts
        ...
         import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';
         ....
         
    @NgModule({
        .
        .
        .
        bootstrap: [
            AppComponent
        ],
      
        providers: [
            SecureAndroidKeystore
        ],
        .
        .
        .
    })

    any.component.ts

            ...
         import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';
         ....

         constructor(private secureAndroidKeystore: SecureAndroidKeystore){

         }
            
         anyMethod(){
              //Inside some method         
                this.secureAndroidKeystore.storeData('mykey','pass1234');
                this.secureAndroidKeystore.retrieveData('mykey').then(res=>{
                this.message = res;
                console.log('message', this.message );
              })

         }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    Store data methodstoreData('key', 'passdata')method for saving any data,
    Get the dataretrieveDataMethod for data getting and using which return promise
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    For Any issue please raise issue in github repo

    \n

    Tutorials

    \n

    Need a little more to get started? Check out tutorial.

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gradient":{"name":"nativescript-gradient","version":"2.0.1","license":"MIT","readme":"

    NativeScript Gradient 🎨

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    \n

    Those are screenshots of the Angular and plain XML demo apps.

    \n

    Installation

    \n
    tns plugin add nativescript-gradient
    \n

    Usage

    \n

    Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

    \n

    In addition to any properties you can already set on a StackLayout you should add:

    \n
      \n
    • colors: Pass a minimum number of two. Just use the value that you would otherwise pass to NativeScript's new Color("value"). So red, #FF0000, rgb(255, 0, 0), and even rgba(255, 0, 0, 0.5) (transparency!) will all work.
      • \n
    • direction: One of "to bottom", "to top", "to right", "to left", "to bottom left", "to top left", "to bottom right", "to top right".
      • \n
    \n

    Angular

    \n

    Add this to app.module.ts so you can use a Gradient tag in the view:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"Gradient\", () => require(\"nativescript-gradient\").Gradient);
    \n

    These colors are also used in the screenshots above.

    \n
    <Gradient direction=\"to right\" colors=\"#FF0077, red, #FF00FF\">
      <Label class=\"p-20 c-white\" horizontalAlignment=\"center\" text=\"My gradients are the best.\" textWrap=\"true\"></Label>
      <Label class=\"p-10 c-white\" horizontalAlignment=\"center\" text=\"It's true.\" textWrap=\"true\"></Label>
    </Gradient>
    \n

    Plain XML

    \n

    Import the Gradient namespace in the Page tag and enjoy the colors!

    \n
    <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:Gradient=\"nativescript-gradient\" loaded=\"pageLoaded\">

      <Gradient:Gradient direction=\"to right\" colors=\"#FF0077, red, #FF00FF\">
        <Label text=\"Such a fancy gradient :)\" horizontalAlignment=\"center\"/>
      </Gradient:Gradient>
    \n

    Q & A

    \n

    Does this plugin use any third party libraries?

    \n

    Nope, it's as light as a feather!

    \n

    What kind of element is the Gradient tag?

    \n

    It's a StackLayout, so you can use all the regular StackLayout properties (like orientation="horizontal" and borderRadius="5") - and you can use the Gradient tag in any spot where you would otherwise use a StackLayout.

    \n

    How many colors can we pass to the plugin?

    \n

    Knock yourself out, but the minimum is two.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rave-nativescript":{"name":"rave-nativescript","version":"1.6.0","license":"Apache-2.0","readme":"

    Rave-Nativescript

    \n\n

    Version 1.6.0

    \n
      \n
    • Upgraded to rave-android:1.0.49.1
      • \n
    • iOS support
      • \n
    • NS 6.0 Support
      • \n
    • Fixed few noticed bugs
      • \n
    \n

    Version 1.1.0

    \n
      \n
    • Upgraded to rave-android:1.0.43
      • \n
    • Fixed few noticed bugs
      • \n
    \n

    Version 1.0.0

    \n
      \n
    • Using rave-android:1.0.39
      • \n
    • Initial Release
      • \n
    \n

    This plugin allows you to use flutterwave payment platform with Nativescript. For more information visit https://developer.flutterwave.com

    \n

    \"Plugin

    \n

    Requirements

    \n
      \n
    • \n

      Add the required permission\n<uses-permission android:name="android.permission.READ_PHONE_STATE" />\n<uses-permission android:name="android.permission.INTERNET" />

      \n

      REQUIRED PERMISSION

      \n

      This library requires the READ_PHONE_PERMISSION to get the build number for fraud detection and flagging as recommended here https://developer.android.com/training/articles/user-data-ids.html#i_abuse_detection_detecting_high_value_stolen_credentials

      \n
      • \n
    \n

    Installation

    \n
    tns plugin add rave-nativescript
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

    \n

    In addition to the plugin usage, both apps are webpack configured.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript\nimport * as RaveNativescript from 'rave-nativescript';

    \n

    Javascript\nvar Expresspay = require("rave-nativescript");

    \n

    Start RavePayManager

    \n
     let context = RaveNativescript.prepare({
          country: \"country\",
          currency: \"currency here\",
          fName: \"Customer first name\",
          lName: \"Customer last name\",
          email: \"customer email\",
          narration: \"Your narration here\",
          publicKey: \"your public key here\",
          encryptionKey: \"your encryption key here\",
          txRef: \"txRef\",
          amount: amount,
          acceptAccountPayments: true,
          acceptCardPayments: true,
          acceptGHMobileMoneyPayments: true,
          onStagingEnv: true,
          shouldDisplayFee: true,
          showStagingLabel: false,
          setSubAccounts: [{
            subAccountId : \"subAccountId\",
            transactionSplitRatio: 1
          }],
          setMeta: [{ metaname: \"Meta name here\", metavalue: \"meta value here\"}]
        });
    \n

    Full usage

    \n
    context.checkoutPayment()
        .then((response) => {
          console.log(\"payment process complete\")
          console.log(response)
        })
        .catch(e => {
        console.log(\"handle errors\")
        })
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionStatusDefaultDescription
    amountrequirednullThis is the amount to be charged from card/account
    countryrequirednullThis is the route country for the transaction with respect to the currency. You can find a list of supported countries and currencies here
    currencyrequirednullThis is the specified currency to charge the card in
    fNamerequirednullThis is the first name of the card holder or the customer
    lNamerequirednullThis is the last name of the card holder or the customer
    emailrequirednullThis is the email address of the customer
    narrationoptionalnullThis is a custom description added by the merchant. For Bank Transfer payments, this becomes the account name of the account to be paid into. See more details here
    publicKeyrequirednullMerchant's public key. Get your merchant keys here for staging and live
    encryptionKeyrequirednullMerchant's encryption key. Get your merchant keys here for staging and live
    txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
    acceptAccountPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
    acceptCardPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
    acceptMpesaPayments(boolean)optionalfalseSet to true if you want to accept Mpesa payments, else set to false . For this option to work, you should set your country to KE and your currency to KES
    acceptGHMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Ghana mobile money payments, else set to false . For this option to work, you should set your country to GH and your currency to GHS
    acceptUgMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Uganda mobile money payments, else set to false . For this option to work, you should set your country to UG and your currency to UGX
    acceptAchPayments(boolean)optionalfalseSet to true if you want to accept US ACH charges from your customers, else set to false . For this option to work, you should set your country to US and your currency to USD. You also have to set acceptAccountPayments(true)
    acceptBankTransferPayments(boolean)optionalfalseSet to true if you want to accept payments via bank transfer from your customers, else set to false . This option is currently only available for Nigerian Naira. See more details in the API Location
    onStagingEnv(boolean)requiredfalseSet to true if you want your transactions to run in the staging environment otherwise set to false. Defaults to false
    txRefrequirednullPass in any other custom data you wish to pass. It takes an array of Meta object {}
    txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
    \n

    Contribute

    \n

    We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telephony":{"name":"nativescript-telephony","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-telephony/blob/master/LICENSE"},"readme":"

    NativeScript-Telephony

    \n

    This is a Nativescript plugin to get data from the SIM card like the carrier name, mcc, mnc and country code and other system dependent additional info.

    \n

    Contributors

    \n

    Peter Bakondy for his work on\ncordova-plugin-sim.\nBasically this is his plugin. I followed his source code as a guide.

    \n

    Supported Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-telephony
    \n

    Usage

    \n

    Typescript

    \n
    import {Telephony} from 'nativescript-telephony';

    Telephony().then(function(resolved) {
    \tconsole.log('resolved >', resolved)
    \tconsole.dir(resolved);
    }).catch(function(error) {
    \tconsole.error('error >', error)
    \tconsole.dir(error);
    })
    \n

    ES6 Promises

    \n

    If you are unfamiliar with Promises, read up on these:

    \n\n

    iOS Quirks

    \n

    Promise.Resolves

    \n
    {
      \"carrierName\": String,
      \"countryCode\": String,
      \"mcc\": String,
      \"mnc\": String,
      \"allowsVOIP\": Boolean,
    }
    \n

    Sadly there's nothing more we can get here.

    \n

    Promise.Rejects

    \n

    When using an emulator or a sim card does not exist.

    \n

    Android Quirks

    \n

    All permission dialogues are built into the Telephony function.

    \n

    Promise.Resolves

    \n
    When Permission is DENIED to READ_PHONE_STATE
    \n
    {
    \t\"countryCode\": String,
    \t\"simOperator\": String,
    \t\"carrierName\": String,
    \t\"callState\": Number,
    \t\"dataActivity\": Number,
    \t\"networkType\": Number,
    \t\"phoneType\": Number,
    \t\"simState\": Number,
    \t\"isNetworkRoaming\": Boolean,
    \t\"mcc\": String,
    \t\"mnc\": String,
    }
    \n
    When Permission is GRANTED to READ_PHONE_STATE
    \n
    {
    \t// START GRANTED PERMISSIONS
    \t\"phoneNumber\": String,
    \t\"deviceId\": String,
    \t\"deviceSoftwareVersion\": String,
    \t\"simSerialNumber\": String,
    \t\"subscriberId\": String,
    \t// END GRANTED PERMISSIONS
    \t\"countryCode\": String,
    \t\"simOperator\": String,
    \t\"carrierName\": String,
    \t\"callState\": Number,
    \t\"dataActivity\": Number,
    \t\"networkType\": Number,
    \t\"phoneType\": Number,
    \t\"simState\": Number,
    \t\"isNetworkRoaming\": Boolean,
    \t\"mcc\": String,
    \t\"mnc\": String,
    }
    \n

    Promise.Rejects

    \n

    Never.

    \n

    Demo

    \n
    npm run setup
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-native-expo-fancy-alerts":{"name":"react-native-expo-fancy-alerts","version":"2.1.1","license":"MIT","readme":"

    React Native Fancy Alerts

    \n

    \"NPM\n\"Downloads\"\n\"License\"

    \n

    Adaptation of nativescript-fancyalert for react native. Compatible with expo 🤓

    \n\n\n\n\n\n\n\n\n
    \"Screenshot\"Screenshot\"Screenshot
    \n

    Quick Start

    \n
    $ npm i react-native-expo-fancy-alerts
    \n

    Or

    \n
    $ yarn add react-native-expo-fancy-alerts
    \n
    import React from 'react';
    import { Text, TouchableOpacity, View } from 'react-native';
    import { FancyAlert } from 'react-native-expo-fancy-alerts';

    const App = () => {
      const [visible, setVisible] = React.useState(false);
      const toggleAlert = React.useCallback(() => {
        setVisible(!visible);
      }, [visible]);

      return (
        <View>
          <TouchableOpacity onPress={toggleAlert}>
            <Text>Tap me</Text>
          </TouchableOpacity>

          <FancyAlert
            visible={visible}
            icon={<View style={{
              flex: 1,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'red',
              borderRadius: 50,
              width: '100%',
            }}><Text>🤓</Text></View>}
            style={{ backgroundColor: 'white' }}
          >
            <Text style={{ marginTop: -16, marginBottom: 32 }}>Hello there</Text>
          </FancyAlert>
        </View>
      )
    }

    export default App;
    \n

    Reference

    \n

    LoadingIndicator

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeRequiredDefaultDescription
    visibleboolyesn/aWhether the loading indicator should be shown
    \n

    FancyAlert

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeRequiredDefaultDescription
    visibleboolyesn/aWhether the alert should be visible
    iconnodeyesn/aThe icon to show in the alert
    styleobjectno{}Like your usual style prop in any View
    onRequestClosefuncno() => voidThe action to run when the user taps the button
    \n
      \n
    • NOTE -\nAlerts are not dismissed by tapping the blurry background
      • \n
    \n

    Examples

    \n

    The following example illustrates how you can create a loading indicator for your entire app.\nIf you're using redux you may have a part of your store which says whether you're loading something,\nyou can get that flag and show one of the loading indicators offered by this lib.

    \n
    import React from 'react';
    import { useSelector } from 'react-redux';
    import { LoadingIndicator } from 'react-native-expo-fancy-alerts';
    import { selectIsLoading } from 'selectors';

    const AppLoadingIndicator = () => {
      const isLoading = useSelector(selectIsLoading);
      return <LoadingIndicator visible={isLoading} />;
    }

    export default AppLoadingIndicator;
    \n

    This next one is an error message that is also managed globally through redux.

    \n
    import React from 'react';
    import { Platform, Text, View, StyleSheet } from 'react-native';
    import { useDispatch, useSelector } from 'react-redux';
    import { FancyAlert } from 'react-native-expo-fancy-alerts';
    import { Ionicons } from '@expo/vector-icons';
    import { ErrorCreators } from 'creators';
    import { selectError } from 'selectors';

    const AppErrorModal = () => {
      const dispatch = useDispatch();
      const { hasError, error } = useSelector(selectError);

      const onRequestClose = React.useCallback(
        () => {
          dispatch(ErrorCreators.hideError());
        },
        [dispatch],
      );

      return <FancyAlert
        style={styles.alert}
        icon={
          <View style={[ styles.icon, { borderRadius: 32 } ]}>
            <Ionicons
              name={Platform.select({ ios: 'ios-close', android: 'md-close' })}
              size={36}
              color=\"#FFFFFF\"
            />
          </View>
        }
        onRequestClose={onRequestClose}
        visible={hasError}
      >
        <View style={styles.content}>
          <Text style={styles.contentText}>{error ? error.message : ''}</Text>

          <TouchableOpacity style={styles.btn} onPress={onPress}>
            <Text style={styles.btnText}>OK</Text>
          </TouchableOpacity>
        </View>
      </FancyAlert>;
    }

    const styles = StyleSheet.create({
      alert: {
        backgroundColor: '#EEEEEE',
      },
      icon: {
        flex: 1,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#C3272B',
        width: '100%',
      },
      content: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: -16,
        marginBottom: 16,
      },
      contentText: {
        textAlign: 'center',
      },
      btn: {
        borderRadius: 32,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 8,
        paddingVertical: 8,
        alignSelf: 'stretch',
        backgroundColor: '#4CB748',
        marginTop: 16,
        minWidth: '50%',
        paddingHorizontal: 16,
      },
      btnText: {
        color: '#FFFFFF',
      },
    });

    export default AppErrorModal;
    \n

    Changelog

    \n
      \n
    • 0.0.1 - Initial implementation - has layout issues on Android that WILL be fixed
      • \n
    • 0.0.2 - Android issue fixed
      • \n
    • 0.0.3 - Added extra customization options
      • \n
    • 1.0.0 - Years later I decided to package everything and release 🎉🥳
      • \n
    • 2.0.0 - BREAKING CHANGES Updated FancyAlert to be more intuitive and more generic
      • \n
    • 2.0.1 - Updated docs to include some real-life examples
      • \n
    • 2.0.2 - Updated dependencies
      • \n
    • 2.1.0 - Added typescript typings
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vt-nativescript-advanced-webview":{"name":"vt-nativescript-advanced-webview","version":"5.0.1","license":"MIT","readme":"\n

    NativeScript Advanced Webview

    \n    \n

    \nAn advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n

    Here is a video showing off Chrome CustomTabs in NativeScript.

    \n

    Android

    \n

    CustomTabs

    \n

    iOS

    \n

    SFSafariViewController

    \n

    Why use this? Because Perf Matters

    \n

    Android Comparison

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Android\"iOS
    \n

    Installation

    \n

    To install execute

    \n
    tns plugin add nativescript-advanced-webview
    \n

    Example

    \n

    TypeScript

    \n

    Initiate the service before the app starts e.g app.ts, main.ts

    \n
    import { init } from 'nativescript-advanced-webview';
    init();
    \n
    import { openAdvancedUrl, AdvancedWebViewOptions } from 'nativescript-advanced-webview';

    public whateverYouLike() {

        const opts: AdvancedWebViewOptions = {
            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
            toolbarColor: '#ff4081',
            toolbarControlsColor: '#333', // iOS only
            showTitle: false, // Android only
            isClosed: (res) => {
                console.log('closed it', res);
            }
        };

        openAdvancedUrl(opts);
    }
    \n

    Javascript

    \n

    Initiate the service before the app starts e.g app.ts, main.ts

    \n
    var AdvancedWebView = require('nativescript-advanced-webview');

    AdvancedWebView.init();
    \n
    exports.whateverYouLike = function(args){
        var opts = {
            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
            toolbarColor: '#ff4081',
            toolbarControlsColor: '#333', // iOS only
            showTitle: false, // Android only
            isClosed: function (res) {
                console.log('closed it', res);
            }
        };

       AdvancedWebView.openAdvancedUrl(opts);
    \n

    API

    \n
      \n
    • openAdvancedUrl(options: AdvancedWebViewOptions)
      • \n
    \n
    AdvancedWebViewOptions Properties
    \n
      \n
    • url: string
      • \n
    • toolbarColor: string
      • \n
    • toolbarControlsColor: string - ** iOS only **
      • \n
    • showTitle: boolean - ** Android only **
      • \n
    • isClosed: Function - callback when the browser closes
      • \n
    \n
    Demo App
    \n
      \n
    • fork the repo
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-lottie":{"name":"nativescript-akylas-lottie","version":"4.0.14","license":"MIT","readme":"\n

    NativeScript-Lottie

    \n    \n

    NativeScript plugin to expose Airbnb Lottie for awesome animations.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"Action\n \n \n \"stars\"\n \n \n \"donate\"\n \n

    \n

    Changelog

    \n

    All notable changes to this project will be documented in the changelog.

    \n

    Demo Screen

    \n

    The .gif does not do the fluid animations justice

    \n

    \"LottieView\"

    \n

    Installation

    \n

    To install execute:

    \n
    tns plugin add nativescript-lottie
    \n

    Usage

    \n

    NativeScript (Core)

    \n

    XML

    \n
    <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:Lottie=\"nativescript-lottie\" navigatingTo=\"navigatingTo\" class=\"page\">
        <StackLayout>
            <Lottie:LottieView src=\"PinJump.json\" height=\"130\" loop=\"true\" autoPlay=\"true\" loaded=\"yourLoadedEvent\" />
        </StackLayout>
    </Page>
    \n

    TS

    \n
    import { LottieView } from \"nativescript-lottie\";

    public yourLoadedEvent(args) {
        this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
    }
    \n
    \n

    NativeScript Angular

    \n

    XML

    \n
    <StackLayout>
        <LottieView width=\"100\" height=\"150\" [src]=\"src\" [loop]=\"loop\" [autoPlay]=\"autoPlay\" (loaded)=\"lottieViewLoaded($event)\">     </LottieView>
    </StackLayout>
    \n

    Component

    \n
    import { Component } from '@angular/core';
    import { registerElement } from 'nativescript-angular';
    import { LottieView } from 'nativescript-lottie';

    registerElement('LottieView', () => LottieView);

    @Component({
      templateUrl: 'home.component.html',
      moduleId: module.id
    })
    export class HomeComponent {
      public loop: boolean = true;
      public src: string;
      public autoPlay: boolean = true;
      public animations: Array<string>;

      private _lottieView: LottieView;

      constructor() {
        this.animations = [
          'Mobilo/A.json',
          'Mobilo/D.json',
          'Mobilo/N.json',
          'Mobilo/S.json'
        ];
        this.src = this.animations[0];
      }

      lottieViewLoaded(event) {
        this._lottieView = <LottieView>event.object;
      }
    }
    \n
    \n

    NativeScript Vue

    \n

    Bootstrap (probably in app.js)

    \n
    Vue.registerElement(
      'LottieView',
      () => require('nativescript-lottie').LottieView
    );
    \n

    Component

    \n
    <template>
        <Page class=\"page\">
            <StackLayout>
                <LottieView height=\"130\" src=\"PinJump.json\" :loop=\"true\" :autoPlay=\"true\" @loaded=\"lottieViewLoaded\"></LottieView>
            </StackLayout>
        </page
    </template>

    <script>
        export default {
            methods: {
                lottieViewLoaded(args) {
                    this._lottieView = args.object;
                },
            },
            data() {
                return {
                    _lottieView: null,
                }
            }
        };
    </script>
    \n
    \n

    Assets

    \n

    :fire: You can find animations in the sample-effects folder.

    \n

    Android

    \n

    Place your animation files in the NS app's app/App_Resources/Android/src/main/assets folder.

    \n

    Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

    \n

    iOS

    \n

    Place your animations files in your app/App_Resources/iOS/ folder.

    \n

    Properties (bindable)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    autoPlaybooleanfalseStart LottieView animation on load if true.
    loopbooleanfalseLoop continuously animation if true.
    srcstringnullAnimation path to .json file.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    completionBlock(boolean) => voidnullCompletion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
    durationnumbernullGet the duration of the animation.
    progressnumber0Get/set the progress of the animation.
    speednumber1Get/set the speed of the animation.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnParametersDescription
    cancelAnimationvoidNonePauses the animation for the LottieView instance.
    isAnimatingbooleanNoneReturns true if the LottieView is animating, else false.
    playAnimationvoidNonePlays the animation for the LottieView instance.
    playAnimationFromProgressToProgressvoidstartProgress, endProgressPlays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
    setColorValueDelegateForKeyPathvoidvalue, keyPathSets the provided color value on each property that matches the specified keyPath in the LottieView instance.
    setOpacityValueDelegateForKeyPathvoidvalue, keyPathSets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.
    \n

    Contributors

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Brad\"Nathan\"Jean-Baptiste\"HamdiWanis\"
    bradmartinNathanWalkerrhanbHamdiWanis
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"itstheceo\"\"itstheceo\"
    itstheceomudlabs
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-spotify":{"name":"nativescript-spotify","version":"1.6.1","license":{"type":"MIT","url":"https://github.com/NathanWalker/nativescript-spotify/blob/master/LICENSE"},"readme":"

    \"alt

    \n

    A NativeScript plugin for the Spotify iOS and Android SDKs.

    \n\n

    Install

    \n
    npm install nativescript-spotify --save
    \n

    Prerequisites

    \n
      \n
    • Spotify streaming requires a Premium account.
      • \n
    • Create a Spotify Developer account here: https://developer.spotify.com/
      • \n
    • Create an app in your developer account and follow these instructions to get setup: https://developer.spotify.com/technologies/spotify-ios-sdk/tutorial/#creating-your-client-id-secret-and-callback-uri
      • \n
    \n

    Background

    \n\n

    Usage

    \n

    Platform Prerequisites

    \n

    iOS

    \n

    Setup

    \n
      \n
    • app.ts
      • \n
    \n

    Configure application launch phases to setup your Spotify App CLIENT_ID and REDIRECT_URL (the ones you created above in the developer account):

    \n
    import * as application from 'application';
    import {NSSpotifyConstants, NSSpotifyAuth} from 'nativescript-spotify';

    class MyDelegate extends UIResponder {
      public static ObjCProtocols = [UIApplicationDelegate];
      
      public applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
        
        NSSpotifyConstants.CLIENT_ID = 'your spotify premium account api key';
        TNSSpotifyAuth.REDIRECT_URL = 'your-app-custom-url-scheme://spotifylogin';
        return true;
      }
    }
    application.ios.delegate = MyDelegate;
    application.mainModule = \"main-page\";
    application.cssFile = \"./app.css\";
    application.start();
    \n
      \n
    • main-page.ts
      • \n
    \n
    import {SpotifyDemo} from \"./main-view-model\";

    function pageLoaded(args) {
      var page = args.object;
      page.bindingContext = new SpotifyDemo();
    }
    exports.pageLoaded = pageLoaded;
    \n
      \n
    • main-view-model.ts
      • \n
    \n
    import {Observable, EventData} from 'data/observable';
    import {Page} from 'ui/page';
    import {topmost} from 'ui/frame';
    import {AnimationCurve} from 'ui/enums';
    import * as loader from 'nativescript-loading-indicator';
    import {TNSSpotifyConstants, TNSSpotifyAuth, TNSSpotifyPlayer, TNSSpotifyPlaylist, TNSSpotifyRequest, Utils} from 'nativescript-spotify';

    export class SpotifyDemo extends Observable {
      private _spotify: TNSSpotifyPlayer;

      constructor() {
        super();
        
        this._spotify = new TNSSpotifyPlayer();
        
        // when using iOS delegates that extend NSObject, TypeScript constructors are not used, therefore a separate `initPlayer()` exists
        this._spotify.initPlayer(true); // passing `true` lets player know you want it to emit events (sometimes it's not desired)
        
        // small sample of events (see Documentation below for full list)
        this._spotify.audioEvents.on('    albumArtChange', (eventData) => {
          this.updateAlbumArt(eventData.data.url);
        });
        this._spotify.audioEvents.on('    authLoginSuccess', (eventData) => {
          this.loginSuccess();
        });
      }
      
      public login() {
        TNSSpotifyAuth.LOGIN();
      }
      
      public play(args?: EventData) {
        this._spotify.togglePlay('    spotify:track:58s6EuEYJdlb0kO7awm3Vp').then((isPlaying: boolean) => {
          console.log(isPlaying ? '    Playing!' : 'Paused!');
        }, (error) => {
          console.log(`Playback error: ${error}`);
        });
      }
      
      private updateAlbumArt(url: string) {
        this.set(`currentAlbumUrl`, url);
      }
      
      private loginSuccess() {
        console.log(`loginSuccess!`);
      } 
    }
    \n

    Screenshots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 3Sample 4
    \"Sample3\"\"Sample4\"
    \n

    Android

    \n

    Setup

    \n
      \n
    • Docs coming soon for Android...
      • \n
    \n

    Documentation

    \n

    TNSSpotifyPlayer

    \n

    TNSSpotifyPlayer implements SPTAudioStreamingPlaybackDelegate.

    \n

    Creating:

    \n
    // Option 1: simple
    this.spotify = new TNSSpotifyPlayer();
    this.spotify.initPlayer();

    // Option 2: advanced
    this.spotify = new TNSSpotifyPlayer();
    // passing `true` will let the player know it should emit events
    this.spotify.initPlayer(true);

    // it allows you to listen to events like so:
    this.spotify.audioEvents.on('startedPlayingTrack', (event) => {
      console.log(event.data.url); // spotify track url
    });

    // play/pause a track
    this.spotify.togglePlay('spotify:track:58s6EuEYJdlb0kO7awm3Vp').then((isPlaying: boolean) => {
      console.log(isPlaying ? 'Playing!' : 'Paused!');
    }, (error) => {
      console.log(`Playback error: ${error}`);
    });
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    togglePlay(track?: string): Promise<any>Allows toggle play/pause on a track, or changing a track. track must be a valid spotify track uri. Learn more here
    isPlaying(): booleanDetermine if player is currently playing
    isLoggedIn(): booleanDetermine if player is authenticated
    setVolume(value: number): Promise<any>Set the player volume
    loadedTrack(): stringDetermine current loaded track (spotify track uri)
    currentTrackMetadata(): ISpotifyTrackMetadataGet the current track's metadata. Learn more here
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    authLoginChangeSends along data = status: boolean When auth state changes.
    authLoginCheckWhen auth callback has returned and is verifying authentication
    authLoginSuccessWhen auth succeeded
    albumArtChangeSends along data = url: string When track triggers a play start, this will also trigger to send along the correct album art of the track.
    playerReadyWhen the session has been validated and the player is ready to play.
    changedPlaybackStatusSends along data = playing: boolean When playback state changes.
    seekedToOffsetSends along data = offset: number When player has seeked to a given offset.
    changedVolumeSends along data = volume: number When the player volume was changed.
    changedShuffleStatusSends along data = shuffle: number When shuffle setting was changed.
    changedRepeatStatusSends along data = repeat: number When repeat setting was changed.
    changedToTrackSends along data = metadata: any When track change occurs.
    failedToPlayTrackSends along data = url: string When track play fails. Provides the url of the track that failed.
    startedPlayingTrackSends along data = url: string When track play starts. Provides the url of the track that started.
    stoppedPlayingTrackSends along data = url: string When track play stops. Provides the url of the track that stopped.
    skippedToNextTrackWhen player skipped to next track.
    skippedToPreviousTrackWhen player skipped to previous track.
    activePlaybackDeviceWhen the audio streaming object becomes the active playback device on the user’s account.
    inactivePlaybackDeviceWhen the audio streaming object becomes an inactive playback device on the user’s account.
    poppedQueueWhen the audio streaming object becomes an inactive playback device on the user’s account.
    temporaryConnectionErrorA temporary connection error occurred.
    streamErrorSends along data = error: any when a streaming error occurred.
    receivedMessageSends along data = message: string when a message is received from the Spotify service.
    streamDisconnectedWhen the stream becomes disconnected.
    \n

    TNSSpotifyAuth

    \n

    TNSSpotifyAuth

    \n

    Provides static properties and methods to help with authentication handling and user management.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    REDIRECT_URL: stringUsed to set your spotify application redirect url, required for device auth redirect, ie: 'your-app-custom-url-scheme://spotifylogin'
    SESSION: SPTSessionRepresents the current auth session.
    CLEAR_COOKIES: booleanClear cookies in auth window to not remember last logged in user. Defaults false.
    PREMIUM_MSG: stringThe message which alerts when a non-premium user attempts to play a track.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    LOGIN(): voidInitiates login sequence.
    LOGIN_WITH_SESSION(session): voidLogs user in with session returned from the in-app browser auth window.
    LOGOUT(): voidClear's persisted user session and notifies of login change.
    HANDLE_AUTH_CALLBACK(url): booleanWhen using standard browser redirect auth, this can be used in application launch phase to handle the auth redirect back into the app. On older versions, this may be needed.
    VERIFY_SESSION(session?: any): Promise<any>Mainly used internally, but used to restore a session from local persistence and/or renew.
    SAVE_SESSION(session): voidMainly used internally, but can be used to persist a valid Spotify session.
    GET_STORED_SESSION(): anyGet the current user's session. Learn more here
    RENEW_SESSION(session): Promise<any>Can be used to pass an expired session to renew it.
    CURRENT_USER(): Promise<any>Get the current user object. Learn more here
    \n

    TNSSpotifySearch

    \n

    TNSSpotifyAuth

    \n

    Provides 1 static method to search Spotify.

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    QUERY(query: string, queryType: string, offset: number = 0): Promise<any>Search and paginate through query results of Spotify search results. Resolves an Object structure: {page: number (offset), hasNextPage: boolean, totalListLength: number, tracks: Array}. Right now using queryType = 'track' is supported. More query types coming soon.
    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-fixed-distorted":{"name":"nativescript-camera-plus-fixed-distorted","version":"1.0.7","license":"MIT","readme":"\n

    NativeScript Camera Plus

    \n    \n

    A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

    \n

    \n\n \"LiveShopper\n \n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n

    \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n
    tns plugin add @nstudio/nativescript-camera-plus
    \n

    Sample

    \n

    Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

    \n

    \"Camera

    \n

    Demo

    \n

    The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

    \n

    Android Emulator Note

    \n

    The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

    \n

    NOTE: You may want to run: npm run nuke first to clear and reset directories.

    \n

    Run Vanilla Demo

    \n

    Plug device in, then:

    \n
    npm run demo.ios.device
    // or...
    npm run demo.android.device
    \n

    Run Angular Demo

    \n

    Plug device in, then:

    \n
    npm run demo.ng.ios.device
    // or...
    npm run demo.ng.android.device
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    debugbooleanIf true logs will be output in the console to help debug the Camera Plus events.
    confirmPhotosbooleanIf true the default take picture event will present a confirmation dialog before saving. Default is true.
    confirmRetakeTextstringWhen confirming capture this text will be presented to the user to retake the photo. Default is 'Retake'
    confirmSaveTextstringWhen confirming capture this text will be presented to the user to save the photo. Default is 'Save'
    saveToGallerybooleanIf true the default take picture event will save to device gallery. Default is true.
    galleryPickerModestringThe gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images. Default is 'multiple'
    showFlashIconbooleanIf true the default flash toggle icon/button will show on the Camera Plus layout. Default is true.
    showToggleIconbooleanIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout. Default is true.
    showCaptureIconbooleanIf true the default capture (take picture) icon/button will show on the Camera Plus layout. Default is true.
    showGalleryIconbooleanIf true the choose from gallery/library icon/button will show on the Camera Plus layout. Default is true.
    enableVideobooleanIf true the CameraPlus instance can record video and videos are shown in the gallery.
    \n

    Static Properties

    \n

    Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
    defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
    \n

    Android Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
    flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
    toggleCameraIconstringName of app_resource drawable for the toggle camera button.
    takePicIconstringName of app_resource drawable for the take picture (capture) button.
    galleryIconstringName of app_resource drawable for the open gallery (image library) button.
    autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
    \n

    iOS Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
    \n

    Cross Platform Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    isCameraAvailable()Returns true if the device has at least one camera.
    toggleFlash()Toggles the flash mode on the active camera.
    toggleCamera()Toggles the active camera on the device.
    chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
    takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
    getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
    record(opts?: IVideoOptions)Starts recording a video.
    stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
    \n

    Android Only Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
    hasCameraPermission()Returns true if the application has been granted access to the device camera.
    requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
    hasStoragePermissions()Returns true if the application has been granted access to the device storage.
    getNumberOfCameras()Returns the number of cameras on the device.
    hasFlash()Returns true if the active camera has a flash mode.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    errorEventExecutes when an error is emitted from CameraPlus
    photoCapturedEventExecutes when a photo is taken.
    toggleCameraEventExecutes when the device camera is toggled.
    imagesSelectedEventExecutes when images are selected from the device library/gallery.
    videoRecordingStartedEventExecutes when video starts recording.
    videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
    videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
    confirmScreenShownEventExecutes when the picture confirm dialog is shown..
    confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
    \n

    Option Interfaces

    \n
    export interface ICameraOptions {
      confirm?: boolean;
      saveToGallery?: boolean;
      keepAspectRatio?: boolean;
      height?: number;
      width?: number;
      autoSquareCrop?: boolean;
      confirmRetakeText?: string;
      confirmSaveText?: string;
    }
    \n
    export interface IChooseOptions {
      width?: number;
      height?: number;
      keepAspectRatio?: boolean;
      showImages?:  boolean;
      showVideos?: boolean;
    }
    \n
    export interface IVideoOptions {
      confirm?: boolean;
      saveToGallery?: boolean;
      height?: number;
      width?: number;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-urban-airship":{"name":"nativescript-urban-airship","version":"7.1.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-loading-indicator":{"name":"@dsvishchov/nativescript-loading-indicator","version":"4.0.0","license":"Apache-2.0","readme":"\n

    NativeScript Loading Indicator

    \n    \n

    \nNativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.\n

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation

    \n

    NativeScript 7+:

    \n
    ns plugin add @nstudio/nativescript-loading-indicator
    \n

    NativeScript lower than 7:

    \n
    tns plugin add @nstudio/nativescript-loading-indicator@3.0.x
    \n

    Screenshots

    \n

    iOS

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"iOS\"\"iOS\"\"iOS\"\"iOS\"
    \n \n

    \n

    Android

    \n

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Android\"\"Android\"\"Android\"\"Android\"
    \n

    \n

    Example

    \n

    TypeScript

    \n
    import {
      LoadingIndicator,
      Mode,
      OptionsCommon,
    } from '@nstudio/nativescript-loading-indicator';

    const indicator = new LoadingIndicator();

    const options: OptionsCommon = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      color: '#4B9ED6', // color of indicator and labels
      // background box around indicator
      // hideBezel will override this if true
      backgroundColor: 'yellow',
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.AnnularDeterminate, // see options below
      android: {
        view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: someButton.ios, // Target view to show on top of (Defaults to entire window)
        square: false,
      },
    };

    indicator.show(options);

    // after some async event maybe or a timeout hide the indicator
    indicator.hide();
    \n

    javascript

    \n
    const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
      .LoadingIndicator;
    const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

    const loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    const options = {
      message: 'Loading...',
      details: 'Additional detail note!',
      progress: 0.65,
      margin: 10,
      dimBackground: true,
      color: '#4B9ED6', // color of indicator and labels
      // background box around indicator
      // hideBezel will override this if true
      backgroundColor: 'yellow',
      userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
      hideBezel: true, // default false, can hide the surrounding bezel
      mode: Mode.AnnularDeterminate, // see options below
      android: {
        view: android.view.View, // Target view to show on top of (Defaults to entire window)
        cancelable: true,
        cancelListener: function (dialog) {
          console.log('Loading cancelled');
        },
      },
      ios: {
        view: UIView, // Target view to show on top of (Defaults to entire window)
      },
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Common Options

    \n
    export interface OptionsCommon {
      /**
       * Message in the loading indicator.
       */
      message?: string;

      /**
       * Details message in the loading indicator.
       */
      details?: string;

      /**
       * Color of the message text.
       */
      color?: string;

      /**
       * Background color of the loading indicator.
       */
      backgroundColor?: string;

      /**
       * Progress of the indicator when not using CustomView or Text Mode.
       */
      progress?: number;

      /**
       * Margin for the message/indicator to the edge of the bezel.
       */
      margin?: number;

      /**
       * Set true to allow user interaction.
       */
      userInteractionEnabled?: boolean;

      /**
       * Dim the background behind the indicator.
       */
      dimBackground?: boolean;

      /**
       * Hide bezel around indicator
       */
      hideBezel?: boolean;

      /**
       * The mode of the loading indicator.
       */
      mode?: Mode;

      /**
       * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
       */
      customView?: any;

      /**
       * iOS specific configuration options.
       */
      ios?: OptionsIOS;

      /**
       * Android specific configuration options.
       */
      android?: OptionsAndroid;
    }
    \n

    Android Specific

    \n
    export interface OptionsAndroid {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: android.view.View;
      max?: number;
      progressNumberFormat?: string;
      progressPercentFormat?: number;
      progressStyle?: number;
      secondaryProgress?: number;
      cancelable?: boolean;
      cancelListener?: (dialog: any) => void;
      elevation?: number;
    }
    \n

    iOS Specific

    \n
    export interface OptionsIOS {
      /**
       * Native View instance to anchor the loading indicator to.
       */
      view?: UIView;
      square?: boolean;
    }
    \n

    Mode Enum

    \n
    export enum Mode {
      Indeterminate = 0,
      Determinate = 1,
      DeterminateHorizontalBar = 2,
      AnnularDeterminate = 3,
      CustomView = 4,
      Text = 5,
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/webview-interface":{"name":"@abbieben/webview-interface","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-sensors":{"name":"nativescript-android-sensors","version":"2.1.0","license":"Apache-2.0","readme":"\n

    NativeScript-Android-Sensors

    \n    \n

    NativeScript plugin for using android device sensors that run on a background thread.

    \n

    \n \n \"npm\"\n \n

    \n

    Installation

    \n

    NativeScript 7+:

    \n
    ns plugin add nativescript-android-sensors
    \n

    NativeScript version lower than 7:

    \n
    tns plugin add nativescript-android-sensors@1.5.0
    \n

    Android Sensors: https://developer.android.com/reference/android/hardware/Sensor.html

    \n

    Usage

    \n
    import { AndroidSensors, AndroidSensorListener, SensorDelay } from 'nativescript-android-sensors';

    const sensors = new AndroidSensors();
    const accelerometerSensor: android.hardware.Sensor;
    const gyroScope: android.hardware.Sensor;

    const sensorListener = new AndroidSensorListener({
        onAccuracyChanged: (
            sensor: android.hardware.Sensor,
            accuracy: number
          ) => {
            console.log('accuracy', accuracy);
        },
        onSensorChanged: (result: string) => {
            // result is being returned as a string currently
            const parsedData = JSON.parse(result);
            const rawSensorData = parsedData.data;
            const sensor = parsedData.sensor;
            const time = parsedData.time;
        }
    });

    this.sensors.setListener(sensorListener);


    someFunction() {
        accelerometerSensor = sensors.startSensor(android.hardware.Sensor.TYPE_LINEAR_ACCELERATION, SensorDelay.FASTEST);

        // here we are using the android const 4 which is for the TYPE_GYROSCOPE sensor
        // https://developer.android.com/reference/android/hardware/Sensor.html#TYPE_GYROSCOPE
        // we are passing the third argument to `startSensor` which is for maxReportLatency, if the sensor is able to support FIFO this will register the sensor with the reporting latency value, if not, the sensor registers on the background thread as normal
        const gyroScope =  sensors.startSensor(4, SensorDelay.NORMAL, 4000000);

        // maybe you wanna use a timeout and stop it after 8 seconds
        setTimeout(() => {
            sensors.stopSensor(gyroScope);
        }, 8000)
    }

    functionToStopTheSensorData() {
        sensors.stopSensor(accelerometerSensor);
    }
    \n

    API

    \n

    Constructor

    \n

    AndroidSensors (liteData: boolean = false)

    \n

    The boolean argument for liteData changes the JSON returned from the sensor event changes. This is helpful when you are storing large amounts of dataset by reducing the redundant data from the sensor changed event.

    \n
    import {
      AndroidSensors,
      AndroidSensorListener,
      SensorDelay,
    } from 'nativescript-android-sensors';

    const sensors = new AndroidSensors(true);
    \n

    Methods

    \n
      \n
    • setListener(listener: AndroidSensorListener): void\n
        \n
      • Set the event listener which returns data when the sensors change.
        • \n
      \n
      • \n
    • startSensor(sensor: android.hardware.Sensor, delay: SensorDelay, maxReportingDelay?: number): android.hardware.Sensor\n
        \n
      • Registers the sensor with the provided reporting delay. Returns the instance of the sensor so it can be passed to the stopSensor(sensor) method to unregister when finished with it. The third argument to startSensor is for maxReportLatency, if the sensor is able to support FIFO this will register the sensor with the reporting latency value, if not, the sensor registers on the background thread as normal
        • \n
      \n
      • \n
    • stopSensor(sensor: android.hardware.Sensor): void\n
        \n
      • Unregisters the sensor.
        • \n
      \n
      • \n
    • getDeviceSensors(): android.hardware.Sensor[]\n
        \n
      • Returns an array of the devices sensors.
        • \n
      \n
      • \n
    • flush(): boolean\n
        \n
      • Will flush event data from the listener. Returns true if successful in flushing.
        • \n
      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules-widgets":{"name":"tns-core-modules-widgets","version":"6.5.10","license":"Apache-2.0","readme":"

    NativeScript Core Modules Widgets

    \n

    \"Build

    \n

    This library represents native code (Java and Objective-C) used by the NativeScript core modules.

    \n

    NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

    \n\n\n\n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-security":{"name":"nativescript-security","version":"1.0.0","license":"MIT","readme":"

    NativeScript Security plugin (w/ TypeScript)

    \n

    iOS and Android fingerprint scanner for {N} apps.

    \n

    Installation

    \n
    tns plugin add nativescript-security
    \n

    Usage

    \n

    Check for availability

    \n
    import {Security} from 'nativescript-security';

    let security = new Security();

    let security.available().then(() => {
      
    }).catch((error:any)=>{
      console.log(error);
    });
    \n

    Verify Fingerprint

    \n
    import {Security, FingerprintOptions} from 'nativescript-security';

    let options:FingerprintOptions = {
      iOSMessage:'Your message:',
      androidTitle: 'Your title',
      androidMessage: 'Your message'
    };

    let security = new Security();

    let security.verifyFingerPrint(options).then(() => {
      console.log('Verified OK');
    }).catch((error) => {
      console.log(error);
    });
    \n

    Future plans

    \n
      \n
    • [ ] Detect if fingerprint has changed android/ios
      • \n
    • [ ] Store secret in android keystore / ios keychain
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper":{"name":"nativescript-imagecropper","version":"4.0.3","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache":{"name":"nativescript-web-image-cache","version":"5.0.0","license":"MIT(https://github.com/VideoSpike/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

    #Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for iOS and Facebook Fresco for android.\nSupports local Images.

    \n

    License

    \n

    Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

    \n

    Installation

    \n
    tns plugin add nativescript-web-image-cache\n
    \n

    ** Tested on NativeScript 2.3+ on both Angular 2 and VanillaJS, if any problems while running on previous versions, please update. This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin, please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

    \n

    Usage in Vue

    \n

    In main.js:

    \n
    const Vue = require(\"nativescript-vue\") // you already have something like this
    Vue.registerElement('WebImage', () => require('nativescript-web-image-cache').WebImage) // now add this
    \n

    Then in any .vue file:

    \n
    <OtherMarkup>
      <WebImage src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></WebImage>
    </OtherMarkup>
    \n

    Usage in Angular

    \n
    \n

    ⚠️ This was changed in plugin version 5.0.0!

    \n
    \n

    In app.module.ts, or any specific module you want to use this plugin:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"WebImage\", () => require(\"nativescript-web-image-cache\").WebImage);
    \n

    After initialisation, the markup tag <WebImage></WebImage> can be used in templates of components.

    \n
        <GridLayout rows='*' columns='*'>
            <WebImage stretch=\"fill\" row=\"0\"
                         col=\"0\" placeholder=\"localPlaceholderImgorResUrl\"
                         src=\"#your image url here\">
            </WebImage>
        </GridLayout>
    \n

    Caching the images

    \n
      \n
    • Add the element WebImage with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here\n-https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • Get the reference to the WebImage view by using angular template variable references and @ViewChild decorator and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    • Access the reference only after view is initialised, i.e. after ngAfterViewInit is called, getting the reference in ngOnInit can return undefined ( for detailed info, read about angular component lifecycle hooks ).
      • \n
    \n

    The Markup

    \n
        <WebImage stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </WebImage>\n
    \n

    The Backing Component Class Snippet

    \n
         @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
    \n

    Clearing the cache

    \n

    Import the module, call the method clearCache() , default time is for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

    \n
     import {clearCache} from "nativescript-web-image-cache";\n clearCache();\n
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    import {setCacheLimit} from "nativescript-web-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
    \n

    Usage in VanillaJS/TypeScript apps

    \n

    IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

    \n

    Initialising on android - in app.js

    \n
    var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
    \n

    After initialisation, add the namespace attribute xmlns:IC="nativescript-web-image-cache" to the opening page tag of xml. The markup tag <IC:WebImage></IC:WebImage> should be used to denote images.

    \n
        <Page xmlns:IC=\"nativescript-web-image-cache\">
            <GridLayout rows='*' columns='*'>
                <IC:WebImage stretch=\"fill\" row=\"0\"
                 col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
                 src=\"#image-url\">
                 </IC:WebImage>  
            </GridLayout>
        </Page>
    \n

    Caching the images

    \n
      \n
    • To the opening page tag of the xml, add\nxmlns:IC="nativescript-web-image-cache".
      • \n
    • Add the element IC:WebImage with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here\n-https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • To check if an image is loading, get the reference to the WebImage view by using page.getViewById("myWebImage") , and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");

    var myImage1 = page.getViewById(\"my-image-1\"),
        isLoading = myImage1.isLoading;
    \n

    Clearing the cache

    \n
      \n
    • Require the module, call the method clearCache() , default time for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.
      • \n
    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");
    imageCacheModule.clearCache();
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    var imageCache = require("nativescript-web-image-cache");\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);\n
    \n

    for android, you need to initialize in the application onlaunch event before clearing the cache

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal":{"name":"nativescript-onesignal","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

    NativeScript-OneSignal

    \n

    A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

    \n

    Contributors

    \n

    OneSignal-iOS-SDK

    \n

    OneSignal-Android-SDK

    \n

    Supported Platforms

    \n
      \n
    • iOS
      • \n
    • Android
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-onesignal
    \n

    iOS

    \n

    Does not need any configuration.

    \n

    Android

    \n

    Does not need any configuration.

    \n

    Usage

    \n

    Typescript

    \n
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
    \n

    iOS

    \n

    TnsOneSignal is the native iOS OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.ios) {
    \tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

    \t\tpublic static ObjCProtocols = [UIApplicationDelegate]

    \t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

    \t\t\ttry {

    \t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

    \t\t\t} catch (error) {
    \t\t\t\tconsole.error('error', error)
    \t\t\t}

    \t\t\treturn true
    \t\t}

    \t}
    \tapplication.ios.delegate = MyDelegate
    }
    \n

    Android

    \n

    TnsOneSignal is the native Android com.onesignal.OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.android) {
    \tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

    \t\ttry {

    \t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\tTnsOneSignal.startInit(application.android.context).init()

    \t\t} catch (error) {
    \t\t\tconsole.error('error', error)
    \t\t}

    \t})
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Typescript Typings

    \n

    iOS

    \n

    Android - In the works...

    \n

    Demo

    \n
    npm run setup
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-pulltorefresh":{"name":"nativescript-akylas-pulltorefresh","version":"2.3.2","license":"MIT","readme":"\n

    NativeScript-PullToRefresh

    \n    \n

    \nNativeScript plugin to use Pull to Refresh on any view.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    tns plugin add @nstudio/nativescript-pulltorefresh

    \n

    Android - SwipeRefreshLayout

    \n

    iOS - UIRefreshControl

    \n

    Sample Screen

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Android\"iOS
    \n

    Usage

    \n

    NativeScript Core

    \n

    XML

    \n
    <page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:PullRefresh=\"@nstudio/nativescript-pulltorefresh\"
          loaded=\"pageLoaded\">
        <PullRefresh:PullToRefresh refresh=\"refreshList\">
            <list-view items=\"{{ users }}\">
                <list-view.itemTemplate>
                    <label text=\"{{ name }}\" row=\"0\" col=\"1\"textWrap=\"true\" class=\"message\" />
                </list-view.itemTemplate>
            </list-view>
        </PullRefresh:PullToRefresh>
    </page>
    \n

    JS

    \n
    function refreshList(args) {
      // Get reference to the PullToRefresh component;
      var pullRefresh = args.object;

      // Do work here... and when done call set refreshing property to false to stop the refreshing
      loadItems().then(
        resp => {
          // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
          setTimeout(() => {
            pullRefresh.refreshing = false;
          }, 1000);
        },
        err => {
          pullRefresh.refreshing = false;
        }
      );
    }
    exports.refreshList = refreshList;
    \n

    Angular NativeScript

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"PullToRefresh\", () => require(\"@nstudio/nativescript-pulltorefresh\").PullToRefresh);

    refreshList(args) {
             const pullRefresh = args.object;
             setTimeout(function () {
                pullRefresh.refreshing = false;
             }, 1000);
        }
    \n

    HTML

    \n
    <PullToRefresh (refresh)=\"refreshList($event)\">
      <ListView [items]=\"itemList\">
        <template let-item=\"item\">
          <label [text]=\"item.id\"></label>
        </template>
      </ListView>
    </PullToRefresh>
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';

    Vue.registerElement(
      'PullToRefresh',
      () => require('@nstudio/nativescript-pulltorefresh').PullToRefresh
    );
    \n

    Component

    \n
    <template>
      <Page>
        <PullToRefresh @refresh=\"refreshList\">
          <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
            <v-template>
              <!-- Shows the list item label in the default color and style. -->
              <label :text=\"item.text\" />
            </v-template>
          </ListView>
        </PullToRefresh>
      </Page>
    </template>

    <script>
    export default {
      methods: {
        refreshList(args) {
          var pullRefresh = args.object;
          setTimeout(function() {
            pullRefresh.refreshing = false;
          }, 1000);
        }
      }
    };
    </script>
    \n

    Properties

    \n
      \n
    • refresh : function required
      • \n
    • refreshing: boolean - Notifies the widget that the refresh state has\nchanged.
      • \n
    \n

    Changelog

    \n

    Contributing

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in-knotes":{"name":"nativescript-apple-sign-in-knotes","version":"1.1.1","license":"Apache-2.0","readme":"

    Sign In with Apple, for NativeScript

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Requirements

    \n
      \n
    • Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.
      • \n
    • Open your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-apple-sign-in
    \n

    Demo app

    \n

    If you're stuck or want a quick demo of how this works, check out the demo app:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
    cd nativescript-apple-sign-in/src
    npm run demo.ios
    \n

    API

    \n

    isSignInWithAppleSupported

    \n

    Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

    \n
    import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

    const supported: boolean = isSignInWithAppleSupported();
    \n

    signInWithApple

    \n

    Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

    \n
    import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

    signInWithApple(
        {
            // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
            scopes: [\"EMAIL\", \"FULLNAME\"]
        })
        .then((result: SignInWithAppleAuthorization) => {
            console.log(\"Signed in, credential: \" + result.credential);
            console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
            // you can remember the user to check the sign in state later (see '    getSignInWithAppleState' below)
            this.user = result.credential.user;
        })
        .catch(err => console.log(\"Error signing in: \" + err));
    \n

    getSignInWithAppleState

    \n
    \n

    ⚠️ This does not seem to work on a simulator!

    \n
    \n

    If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

    \n
    import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

    const user: string = \"the id you got back from the signInWithApple function\";

    getSignInWithAppleState(user)
        .then(state => console.log(\"Sign in state: \" + state))
        .catch(err => console.log(\"Error getting sign in state: \" + err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-google-login":{"name":"@imagene.me/nativescript-google-login","version":"2.0.1","license":"Apache-2.0","readme":"

    #Setup\nAdd debug sh1\nkeytool -keystore ~/.android/debug.keystore -list -v\nhttps://github.com/mkloubert/nativescript-social-login#setup-android-google-sign-in-for-debug-builds

    \n

    Nativescript Google Login

    \n

    \"npm\n\"NPM\"

    \n

    Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

    \n

    It is inspired by the plugin nativescript-social-login

    \n

    Works with Android X, iOS 13

    \n

    Screenshots

    \n

    Android

    \n

    \"Screenshot

    \n

    iOS

    \n

    \"Screenshot

    \n

    Dependencies

    \n

    iOS

    \n
    pod 'GoogleSignIn', '~> 5.0'
    \n

    Android

    \n
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
    \n

    Installation

    \n
    tns plugin add nativescript-google-login
    \n

    iOS

    \n

    Get an OAuth client ID

    \n

    Get an Oauth client id from the Google website

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleTypeRole</key>
    \t\t<string>Editor</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
    \t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
    \t\t\t<!-- Get it from your GoogleService-Info.plist -->
    \t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t</array>
    \t</dict>
    </array>
    \n

    Usage

    \n
    ```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
    \n

    Result

    \n
    ```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-textfield":{"name":"nativescript-material-textfield","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-textfield
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-textfield@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textfield" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdt=\"nativescript-material-textfield\">
        <StackLayout horizontalAlignment=\"center\">
            <mdt:TextField text=\"raised textfield\"/>
            <mdt:TextField variant=\"flat\" text=\"flat textfield\"/>
            <mdt:TextField variant=\"text\" text=\"text textfield\"/>
            <mdt:TextField elevation=\"5\" rippleColor=\"red\" text=\"raised custom textfield\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdctextfield {
        ripple-color: blue;
        elevation: 4;
        stroke-color: blue;             // the border color when active
        stroke-inactive-color: green;   // the border color when inactive
        floating-color: blue;           // the floating placeholder color when active
        floating-inactive-color: green; // the floating placeholder color when inactive
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTextFieldModule } from \"nativescript-material-textfield/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTextFieldModule,
            ...
        ],
        ...
    })
    \n
    <MDTextField  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
            (textChange)=\"onTextChange($event)\">    </MDTextField>
    \n

    NativeScript + Vue

    \n
    import TextFieldPlugin from 'nativescript-material-textfield/vue';

    Vue.use(TextFieldPlugin);
    \n
    <MDTextField helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
            @textChange=\"onTextChange\"/>
    \n

    Also, you can bind the text to some instance data using the v-model directive:

    \n
    <MDTextField v-model=\"value\" />
    \n

    Attributes

    \n

    Inherite from Nativescript TextField so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield

    \n
      \n
    • errorColor optional
      • \n
    \n

    An attribute to set the error color of the textfield.

    \n
      \n
    • helper optional
      • \n
    \n

    An attribute to set the helper text of the textfield.

    \n
      \n
    • floating optional
      • \n
    \n

    A boolean attribute to set the floating state of the textfield.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-sim-info":{"name":"ns-sim-info","version":"1.0.0","license":"Apache-2.0","readme":"

    ns-sim-info

    \n

    This plugin is forked from nativescript-sim-info. This plugin uses @nativescript/plugin-seed. The plugin will not request phone number in Android in order to reduce requested permissions. manager.getLine1Number requires permissions for SMS and phone numbers in Android, which are difficult to grant in play store. iOS does not provide phone numbers.

    \n
    ns plugin add ns-sim-info
    \n

    Usage

    \n
        import { SimInfo } from \"ns-sim-info\";

        load(): void {
            const simInfo = new SimInfo();
            simInfo.getData()
                .then((simData) => {
                    console.log(simData)
                }).catch((error) => {
                    console.error(error);
                });
        }
    \n

    Android Output

    \n

    Single Sim

    \n
    [
        {
            \"isoCountryCode\": \"at\",
            \"simOperator\": \"23XXX\",
            \"carrierName\": \"A1\",
            \"callState\": null,
            \"dataActivity\": null,
            \"phoneType\": 1,
            \"simState\": 5,
            \"isNetworkRoaming\": true,
            \"mcc\": 232,
            \"mnc\": 1,
            \"phoneNumber\": \"\",
            \"deviceSoftwareVersion\": \"01\",
            \"simSerialNumber\": \"894301561923869XXXX\",
            \"subscriberId\": \"23201163022XXXX\",
            \"isDefaultSim\": true,
            \"networkType\": 13,
            \"deviceImei\": \"35404611160XXXX\",
            \"deviceMeid\": \"\",
            \"subscriptionId\": 1
        }
    ]
    \n

    Dual Sim

    \n
    [
        {
            \"isoCountryCode\": \"at\",
            \"simOperator\": \"23XXX\",
            \"carrierName\": \"spusu\",
            \"callState\": null,
            \"dataActivity\": 4,
            \"phoneType\": 1,
            \"simState\": 5,
            \"isNetworkRoaming\": true,
            \"mcc\": 232,
            \"mnc\": 17,
            \"phoneNumber\": \"\",
            \"deviceSoftwareVersion\": \"00\",
            \"simSerialNumber\": \"894317008000176XXXX\",
            \"subscriberId\": \"23217004025XXXX\",
            \"isDefaultSim\": true,
            \"networkType\": 13,
            \"deviceImei\": \"86760103133XXXX\",
            \"deviceMeid\": \"9900111506XXXX\",
            \"subscriptionId\": 1
        },
        {
            \"isoCountryCode\": \"at\",
            \"carrierName\": \"A1\",
            \"isNetworkRoaming\": true,
            \"phoneNumber\": \"\",
            \"mcc\": 232,
            \"mnc\": 1,
            \"subscriptionId\": 4,
            \"simSerialNumber\": \"894301561520280XXXX\",
            \"isDefaultSim\": false
        }
    ]
    \n
    \nPossible errors\n

    The plugin will request more or less permission items depending on the Android version. If any of the permissions are rejected by the user, an object will be returned as a rejected promise.

    \n
    {
        \"android.permission.READ_PHONE_STATE\": false,
    }
    \n
    \n

    iOS Output

    \n

    Single Sim

    \n
    [
        {
            \"mnc\": \"232\",
            \"isoCountryCode\": \"at\",
            \"carrierName\": \"A1\",
            \"allowsVOIP\": true,
            \"mcc\": \"1\"
        }
    ]
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyPlatformAndroid VersioniOS VersionTypeDescription
    isoCountryCodecommon11stringReturns the ISO-3166 country code equivalent for the SIM provider's country code.
    carrierNamecommon11stringReturns the MCC+MNC (mobile country code + mobile network code) of the provider of the SIM. 5 or 6 decimal digits.
    mcccommon11string - number - nullReturns the mobile country code (MCC).
    mnccommon11string - number - nullReturns the mobile network code (MNC).
    simOperatorandroid1-stringReturns the Service Provider Name (SPN).
    callStateandroid1-number - nullReturns the state of all calls on the device.
    dataActivityandroid1-number - nullReturns a constant indicating the type of activity on a data connection (cellular).
    phoneTypeandroid1-number - nullReturns a constant indicating the device phone type.
    simStateandroid1-number - nullReturns a constant indicating the state of the default SIM card.
    isNetworkRoamingandroid1-boolean - nullReturns true if the device is considered roaming on the current network, for GSM purposes.
    phoneNumberandroid--stringReturns the phone number string for line 1, for example, the MSISDN for a GSM phone. Returns null or "" if it is unavailable.
    deviceSoftwareVersionandroid1-stringReturns the software version number for the device, for example, the IMEI/SV for GSM phones.
    simSerialNumberandroid1-stringReturns the serial number of the SIM, if applicable.
    subscriberIdandroid1-stringReturns the unique subscriber ID, for example, the IMSI for a GSM phone.
    subscriptionIdandroid5.1 (Api: 22)-number - nullReturns the subscription.
    simSerialNumberandroid5.1 (Api: 22)-stringReturns SIM unique serial number (ICCID).
    networkTypeandroid7 (Api: 24)-number - nullReturns a constant indicating the radio technology (network type) currently in use on the device for data transmission.
    deviceImeiandroid8 (Api: 26)-stringreturns IMEI for GSM.
    isDefaultSimandroid--boolean - nullReturns true if the sim is considered the default.
    allowsVOIPios-1boolean - nullIndicates if the carrier allows making VoIP calls on its network.
    \n

    Android

    \n

    Dual-Sim Support

    \n

    From Api Level 22, A.K.A LOLLIPOP_MR1 or Android 5.1, there is support for dual sim. I would like to point out that there is a difference in number of information attributes between what Android considers the default subscription (TelephonyManager) and the subscriptions (SubscriptionManager).

    \n

    iOS

    \n

    Dual-Sim Support

    \n

    From iOS 12 on, Apple supports dual sim. The available information attributes are the same for the default and secondary sim.

    \n

    Phone Number

    \n

    Apple does not allow the access to the phone number under any circumstance. More information on this topic can be found under the point 2.5.2 of the guidelines.

    \n

    Testing phones

    \n
      \n
    • Mi 9
      • \n
    • iPhone 5s
      • \n
    \n

    Acknowledgements

    \n

    nativescript-sim-info

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codeus/aria-print":{"name":"@codeus/aria-print","version":"2.1.16","license":"Apache-2.0","readme":"

    @codeus/aria-print

    \n
    ns plugin add @codeus/aria-print
    \n

    Usage

    \n
    import { AriaPrint } from '@codeus/aria-print';
    const ariaPrint = new AriaPrint();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-datetimepicker":{"name":"nativescript-datetimepicker","version":"1.2.3","license":"Apache-2.0","readme":"

    NativeScript 7

    \n\n

    If using 6 and below, see the following:

    \n

    NativeScript DateTimePicker

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    A NativeScript plugin that provides ui elements for picking date and time. The plugin provides UI elements for picking date and time - DatePickerField, TimePickerField and DateTimePickerFields - they are all NativeScript Views that show selected date and/or time and allow picking another after being tapped. There is also a DateTimePicker class which provides static methods pickDate and pickTime that can be called to show the same dialog picker as the fields.

    \n\n\n

    Screenshots

    \n\"DatePickerField\n\"TimePickerField\n

    Installation

    \n
    tns plugin add nativescript-datetimepicker
    \n

    Configuration

    \n

    No additional configuration required!

    \n

    Usage

    \n

    To use one of the UI elements DatePickerField, TimePickerField or DateTimePickerFields in markup you need to:

    \n
      \n
    • If you are developing a NativeScript Core app, you need to register the plugin namespace in the xml:
      • \n
    \n
    <Page
       xmlns=\"http://schemas.nativescript.org/tns.xsd\"
       xmlns:datetime=\"nativescript-datetimepicker\">
       <datetime:DatePickerField hint=\"select date\"/>
       <datetime:TimePickerField hint=\"select time\"/>
       <datetime:DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"/>
    ...
    \n
      \n
    • If you are developing a NativeScript Angular app, you need to import the plugin module in the module of your component:
      • \n
    \n
    import { NativeScriptDateTimePickerModule } from \"nativescript-datetimepicker/angular\";
    ...
    @NgModule({
        imports: [
            NativeScriptCommonModule,
            NativeScriptDateTimePickerModule,
            ...
        ],
        ...
    \n

    Then you will be able to declare the fields in the html of your component:

    \n
    <DatePickerField hint=\"select date\"></DatePickerField>
    <TimePickerField hint=\"select time\"></TimePickerField>
    <DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
    \n
      \n
    • If you are developing a NativeScript Vue app, you need to install the plugin in you app.js file:
      • \n
    \n
    import Vue from \"nativescript-vue\";
    import DateTimePicker from \"nativescript-datetimepicker/vue\";
    Vue.use(DateTimePicker);
    \n

    Then you will be able to decrare the fields in the template of your component:

    \n
    <DatePickerField hint=\"select date\"></DatePickerField>
    <TimePickerField hint=\"select time\"></TimePickerField>
    <DateTimePickerFields hintDate=\"select date\" hintTime=\"select time\"></DateTimePickerFields>
    \n

    Features

    \n

    DatePickerField and TimePickerField

    \n

    The DatePickerField and the TimePickerField are NativeScript Views that extend TextField, when tapped, they open a picker dialog that allows date/time selection.

    \n
      \n
    • Getting/Setting Date and Time
      • \n
    \n

    The DatePickerField has a date property and the TimePickerField has a time property which can be used to get their current value. You can also set their value through markup. DatePickerField's date property will just pass the string you provide as a parameter to the Date constructor, while the TimePickerField's time property can parse values in ISO 8601 format. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • TextField Features
      • \n
    \n

    Both DatePickerField and TimePickerField extend TextField, so each TextField feature like the hint property, is also available for these fields. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Picker Texts
      • \n
    \n

    When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties pickerOkText, pickerCancelText and pickerTitle. By default, the texts of the buttons OK and Cancel are OK and Cancel on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on Android. The pickerTitle is undefined. Changing these values is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Localization
      • \n
    \n

    By default the DatePickerField and the TimePickerField will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified here as Locale ID. For example, using en_GB will result in month names spinner in the middle and values between 0 and 23 for the hours, while using en_US will result in month names spinner on the left and values between 1 and 12 for the hours. Changing the locale is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Formats
      • \n
    \n

    Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. The property controlling the format in the DatePickerField is called dateFormat and the property controlling the format in the TimePickerField is timeFormat. Changing the default formats is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Minimum and Maximum Dates
      • \n
    \n

    The DatePickerField has a minDate and maxDate properties that allow limiting the values that can be selected. This is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Using 12 h and 24 h Time Formats
      • \n
    \n

    The TimePickerField will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • CSS
      • \n
    \n

    You can use css to style the DatePickerField and the TimePickerField. The field itself can be styled just as every other TextField, additionally the picker supports changing of its colors through predefined css classes: date-time-picker (picker background and title text color), date-time-picker-spinners (background and text color of the date/time selecting spinners), date-time-picker-buttons (background and text color of the OK/Cancel buttons), date-time-picker-button-ok and date-time-picker-button-cancel (to provide a separate style for each button). Please note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.

    \n\"DatePickerField\n

    Here's the css used to achieve the above result, as used in the demo, demo-angular and demo-vue applications.

    \n

    DateTimePickerFields

    \n

    The DateTimePickerFields extends GridLayout that contains instances of DatePickerField and TimePickerField, when tapped, they open a picker dialog that allows date/time selection.

    \n
      \n
    • Getting/Setting Date and Time
      • \n
    \n

    The DateTimePickerFields has a date property which can be used to get its current value. You can also set its value through markup. DateTimePickerFields' date property will just pass the string you provide as a parameter to the Date constructor. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Orientation
      • \n
    \n

    The DateTimePickerFields have an orientation property which allows changing the way the fields are laid out. If the orientation is horizontal (the default), the fields are on the same row, if the orienation is vertical, the fields will be on separate rows. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Auto Pick Time
      • \n
    \n

    When a date is picked with the date component of the DateTimePickerFields, the value of the date property is updated with the value that is picked. Since the time component also controls the same property, it may be meaningful to display or not to display this value. The autoPickTime property controls whether the time component should display the time of the date property as soon as it is assigned (when date is picked). Default is false, which means that when the user selects a date, the time component will keep displaying its hint text until time is explicitly selected through the time spinners. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Picker Texts
      • \n
    \n

    When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties pickerOkText, pickerCancelText, pickerTitleDate and pickerTitleTime. By default, the texts of the buttons OK and Cancel are OK and Cancel on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on Android. The pickerTitleDate and pickerTitleTime are undefined. Changing these values is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Localization
      • \n
    \n

    By default the DateTimePickerFields will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified here as Locale ID. For example, using en_GB will result in month names spinner in the middle and values between 0 and 23 for the hours, while using en_US will result in month names spinner on the left and values between 1 and 12 for the hours. Changing the locale is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Formats
      • \n
    \n

    Aside from the default formats that are dependent on the value of the locale property, you can add your custom format that can include ordering of the date/time values and also custom text. The property controlling the format for the date component is called dateFormat and the property controlling the format in the time component is timeFormat. Changing the default formats is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Minimum and Maximum Dates
      • \n
    \n

    The DateTimePickerFields has a minDate and maxDate properties that allow limiting the values that can be selected. Note that the values of these properties have effect only on the date component, while the time component can not be limited - it will always allow any hour for any given date. This is demonstrated in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • Using 12 h and 24 h Time Formats
      • \n
    \n

    The time component will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property. Here's an example in the demo, demo-angular and demo-vue applications.

    \n
      \n
    • CSS
      • \n
    \n

    You can use css to style the DateTimePickerFields. The element can be styled like any other layout, additionally the DatePickerField and the TimePickerField that it contains can be styled as explained in their documentation section.

    \n

    DateTimePicker

    \n

    Internally DatePickerField and TimePickerField call DateTimePicker's pickDate and pickTime methods which are public, so they can also be manually called in case a more customized picker is desired. The pickDate method accepts DatePickerOptions, while the pickTime method accepts TimePickerOptions. These options allow having the same features as in the fields. These methods are demonstrated in the demo, demo-angular and demo-vue applications.

    \n

    API

    \n

    DatePickerField API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    dateThe date the picker field is currently displaying. Property is of type Date. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
    minDateThe minimum date the picker field can select. Parsing of dates is handled similarly as with date property.
    maxDateThe maximum date the picker field can select. Parsing of dates is handled similarly as with date property.
    localeIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month) (default is based on the device’s locale settings).
    dateFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
    pickerDefaultDateThe date that will be displayed in the picker, if it is opened while date is undefined (if pickerDefaultDate is undefined, the picker will display today). Parsing of dates is handled similarly as with date property.
    pickerTitleText that will be displayed as title of the picker, default is undefined.
    pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    TimePickerField API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    timeThe time the picker field is currently displaying. Property is of type Date. When used in markup, the provided string will be parsed to a new Date object if it is in ISO 8601 format.
    localeIdentifier of a locale that will be used to create locale-specific time formatter of the time (if the format is 12-Hour, with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used) (default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
    timeFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
    pickerDefaultTimeThe time that will be displayed in the picker, if it is opened while time is undefined (if defaultTime is undefined, the picker will display now). Parsing is handled similarly as with time property.
    pickerTitleText that will be displayed as title of the picker, default is undefined.
    pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    DateTimePickerFields API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    dateThe date the picker fields are currently displaying. Property is of type Date. When used in markup, the provided string will be passed to the Date constructor to create a new Date object.
    minDateThe minimum date the date component can select. Parsing of dates is handled similarly as with date property.
    maxDateThe maximum date the time component can select. Parsing of dates is handled similarly as with date property.
    localeIdentifier of a locale that will be used to localize the names of the month names, the order of the date spinners (with en_GB first spinner is day, with en_US first spinner is month), and to create locale-specific time formatter of the time (if the format is 12-Hour, with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used) (default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
    dateFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property).
    timeFormatFormat used for the text in the picker field (on android used as a pattern for a SimpleDateFormat, on iOS used as a dateFormat for NSDateFormatter, default is generated by the current value of the locale property), the format will also be used on Android to determine whether the picker will be in 12 or 24 hour format.
    pickerDefaultDateThe date and time that will be displayed in the pickers, if opened while date is undefined (if pickerDefaultDate is undefined, the picker will display now). Parsing of dates is handled similarly as with date property.
    pickerTitleDateText that will be displayed as title of the picker, when the date component is tapped, default is undefined.
    pickerTitleTimeText that will be displayed as title of the picker, when the time component is tapped, default is undefined.
    pickerOkTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    pickerCancelTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    autoPickTimeValue that indicates whether the time component should be assigned a value as soon as a date is picked by the date component, default is false.
    orientationValue that indicates how the date and time components will be arranged, default is "horizontal", which means that they will be on the same row.
    hintDateText displayed in the date component when date is null.
    hintTimeText displayed in the time component when date is null.
    \n

    DateTimePicker API

    \n

    DateTimePicker:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    pickDate(options: DatePickerOptions, style?: DateTimePickerStyle): Promise<Date>picks a date from a dialog picker initialized with the provided options and styled with the optionally provided style.
    pickTime(options: TimePickerOptions, style?: DateTimePickerStyle): Promise<Date>picks a time from a dialog picker initialized with the provided options and styled with the optionally provided style.
    \n

    DatePickerOptions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    contextView's context.
    dateThe date that will be displayed in the picker, (if not provided, the picker will display today).
    minDateThe minimum date that can be selected.
    maxDateThe maximum date that can be selected.
    localeIdentifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_GB first spinner is day, with en_US first spinner is month, default is based on the device’s locale settings).
    titleText that will be displayed as title of the picker, default is undefined.
    okButtonTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    cancelButtonTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    TimePickerOptions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    contextView's context.
    timeThe time that will be displayed in the picker, (if not provided, the picker will display now).
    is24HoursThis value will be used only on Android to determine whether the picker will be in 12 or 24 hour format.
    localeIdentifier of a locale that will be used to create locale-specific time formatter of the time (with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used, default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format.
    titleText that will be displayed as title of the picker, default is undefined.
    okButtonTextText for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)).
    cancelButtonTextText for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)).
    \n

    DateTimePickerStyle:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    titleTextColorColor to be used for the title text.
    dialogBackgroundColorColor to be used as a background of the dialog picker.
    spinnersTextColorColor to be used for the texts of the date/time spinners.
    spinnersBackgroundColorColor to be used as a background of the date/time spinners.
    buttonsTextColorColor to be used for the texts of the ok/cancel buttons.
    buttonsBackgroundColorColor to be used as a background of the ok/cancel buttons.
    buttonOkTextColorColor to be used for the texts of the ok button.
    buttonOkBackgroundColorColor to be used as a background of the ok button.
    buttonCancelTextColorColor to be used for the texts of the cancel button.
    buttonCancelBackgroundColorColor to be used as a background of the cancel button.
    create(view: View)Creates a style based on any css provided. The parameter is a View with the properly setup css class name.
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-mobile":{"name":"@tremho/jove-mobile","version":"0.7.0-pre-release.60","license":"UNLICENSED","readme":"

    @tremho/jove-mobile

    \n

    (formerly thunderbolt)

    \n
      \n
    • Mobile dependencies for Jove framework.
      • \n
    • Must combine with @tremho/jove-common.
      • \n
    • Requires @tremho/jove-cli for toolchain.
      • \n
    • Requires @tremho/jove-desktop for desktop builds.
      • \n
    \n

    project

    \n

    wiki

    \n
    \n
      \n
    • we touch this to force a publish operation (if we modify ComNormal and nothing else here)
      • \n
    • edited 1/28 10:38 am
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-template-nativescript":{"name":"vue-cli-template-nativescript","version":"1.0.2","license":"MIT","readme":"

    vue-cli-template-nativescript

    \n

    \"Commitizen\"\n\"semantic-release\"\n\"Npm\n\"Travis\n\"Greenkeeper

    \n
    \n

    Template for developing Nativescript-VueJS projects

    \n
    \n
    \n

    Bring all the additional tools to complete the Nativescript Vue workflow. Add linters, es6 support with babel, minified build generation, etc. Compatible with any tns testing tooling.

    \n
    \n
    \n

    Nativescript + VueJS + Rollup + Babel + SemanticRelease

    \n
    \n

    Usage

    \n
    $ npm install -g vue-cli
    $ vue init julon/vue-cli-template-nativescript my-project
    $ cd my-project
    $ npm install
    $ npm run dev

    # In another shell, to run on emulators which is going to refresh on file changes
    $ npm run android
    # or/and
    $ npm run ios
    \n

    What's included

    \n
      \n
    • npm run build : Production-ready build.\n
        \n
      • Export to CommonJS (dev & minified)
        • \n
      • Using Rollup to compute Vue, ES6 js files
        • \n
      • Pugjs and Stylus supported in vue files
        • \n
      \n
      • \n
    • npm run dev : Run a rollup build in watch mode\n
        \n
      • Pre-configured to update our src code inside the app folder
        • \n
      \n
      • \n
    • npm run lint\n
        \n
      • Rules based on prettier:recommended, vue:recommended
        • \n
      • Import errors and warning detection
        • \n
      • Use npm run lint:fix to fix eslint errors
        • \n
      \n
      • \n
    • npm run cz : Commitizen support\n
        \n
      • Loaded with Conventional-changelog rules
        • \n
      • Entrypoint to semantic-release automation
        • \n
      \n
      • \n
    • Semantic-release auto-deployment configuration\n
        \n
      • Auto-generate changelog
        • \n
      • Auto-commit computed package version in git
        • \n
      • Auto-release in github
        • \n
      • Enable this features by using the semantic-release-cli
        • \n
      \n
      • \n
    \n

    Fork It And Make Your Own

    \n

    You can fork this repo to create your own boilerplate, and use it with vue-cli:

    \n
    vue init username/repo my-project
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-partials":{"name":"nativescript-ngx-partials","version":"1.2.9","license":"MIT","readme":"

    Nativescript-Ngx-Partials

    \n

    A Nativescript Angular module to quickly create Pages and Layout fragments

    \n

    Setup

    \n

    npm install nativescript-ngx-partials --save

    \n

    Import the module into your app-module

    \n
    import { PartialsModule } from 'nativescript-ngx-partials';
    \n

    Getting Started

    \n

    Page

    \n

    The page layout consists of a root tag and nested attribute containers:

    \n
      \n
    • Page (root element)
      • \n
    • page-header
      • \n
    • page-content
      • \n
    • page-footer
      • \n
    • page-toolbar
      • \n
    \n

    The Page has the following options:

    \n
      \n
    • header=flow/float/fixed
      • \n
    • footert=flow/float/fixed
      • \n
    • toolbar=top-left/bottom-left (any combination of horizontal and vertical properties)
      • \n
    • debug (highlights the container elements)
      • \n
    \n

    Panel

    \n

    The Panel is a NativeScript Flex-box layout view that simplifies the process of nested elements by using row and column tags

    \n
    \n

    You can add the native Flexbox css styles to the Row/Col Panel

    \n
    \n

    Row

    \n

    RowPanel

    \n

    The RowPanel has the following nested containers:

    \n
      \n
    • panel-left
      • \n
    • panel-middle
      • \n
    • panel-right
      • \n
    \n

    Col

    \n

    ColPanel

    \n

    The ColPanel has the following nested containers:

    \n
      \n
    • panel-top
      • \n
    • panel-middle
      • \n
    • panel-bottom
      • \n
    \n

    Examples

    \n

    Provided in the demo app

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-converters":{"name":"nativescript-converters","version":"2.0.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A small utility package with userfull binding converters that can be used in Plain NativeScript applications.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/animated-circle":{"name":"@nativescript/animated-circle","version":"1.1.7","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loki":{"name":"nativescript-loki","version":"1.0.1","license":"MIT","readme":"

    NativeScript Loki

    \n
    \n

    Thin wrapper around Loki and Loki NativeScript adapter

    \n
    \n

    What is Loki

    \n
    \n

    LokiJS is a document oriented database written in javascript, published under MIT License. Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism. - LokiJS

    \n
    \n

    Installation

    \n

    Run the following command from the /app directory of your project:

    \n
    $ npm install nativescript-loki --save
    \n

    Usage

    \n
    // Requirements
    var Loki = require(\"./node_modules/nativescript-loki/nativescript-loki.js\");

    // Setup Loki
    var db = new Loki(\"loki\", { autosave: true });

    // Check if database exists
    if(db.exists()) {
        console.log(\"Database exists\");
    }

    // Rename database
    db.rename(\"new-name\").then(function() {
        console.log(\"Database renamed\");
    });

    // Remove database
    db.remove().then(function() {
        console.log(\"Database removed\");
    });
    \n

    Thanks

    \n

    The thanks goes to sect2k who has inspired me to create this package.

    \n

    To go deeper in Loki have a look at the documentation.

    \n

    \"npm

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/persistence":{"name":"@awarns/persistence","version":"1.1.1","license":"Apache-2.0","readme":"

    @awarns/persistence

    \n

    \"npm\n\"npm\"

    \n

    This module defines tasks to persist the output of other tasks (namely, entities extending the base Record model). Concretely, it includes:

    \n
      \n
    • A local, document-based store for entities meeting the Record interface.
      • \n
    • Optional one-way data synchronization of the local records store to any external store (e.g., a remote backend).
      • \n
    • The possibility to query and observe updates on the records stored locally.
      • \n
    • Ready-to-use data exporters to dump the stored records to JSON and CSV files.
      • \n
    • A generic data store class to define entity-specific persistence stores, for data models that don't meet the Record specification.
      • \n
    \n

    This plugin has been built as a wrapper of Triniwiz's NativeScript Couchbase plugin, adapted to work with the records and the task model of the AwarNS Framework.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/persistence
    \n

    Usage

    \n

    After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

    \n
      \n
    1. The plugin API. Through it, you'll be able to manage the stored records, query them and export them using the most common information exchange formats.
      2. \n
    2. A task to write Record interface-compliant entities, which allows to persist one or more records locally (with optional one-way server synchronization), to later query and/or export them.
      3. \n
    \n

    Setup

    \n

    This plugin requires you to register its loader during the framework initialization, like this:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerPersistencePlugin } from '@awarns/persistence';

    import { externalRecordsStore } from './external-store';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerPersistencePlugin({
            externalRecordsStore: externalRecordsStore,
            oldRecordsMaxAgeHours: 7 * 24 // 1 week
          }),
        ]
      )
      // ... handle initialization promise
    \n

    Plugin loader config parameter options:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    externalRecordsStoreRecordsStore(Optional) Inject an adapter to an external records store and enable one-way synchronization of the stored records. The table below describes the methods that this adapter needs to implement
    oldRecordsMaxAgeHoursnumber(Optional) Tell the plugin to regularly cleanup old local records. By default, all records are kept
    \n

    RecordsStore (external)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    insert(record: Record)Promise<void>Persist the given record. Throw an error if something goes wrong. The write will be retried during the next app initialization
    \n

    Due to that, for now, this plugin only supports one-way synchronization, the rest of the methods are meant for future use and don't need to be implemented at the moment. You can throw unimplemented errors inside them, so that you can more easily recognize when they start being used in future versions.

    \n

    API

    \n

    The API of this plugin can be classified in 3 groups: records' storage, data exporters and custom data stores.

    \n

    Records storage

    \n
    recordsStore
    \n

    In the records' storage group, there is the recordsStore singleton object, with the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    insert(record: Record)Promise<void>Persist the given record. On success, if provided during plugin initialization, it will try to automatically synchronize the new record to the external store
    getAll(reverseOrder?: boolean, limitSize?: number)Promise<Array<Record>>Allows to retrieve the current latest (by default) or first records, optionally limiting the resulting list in size
    list(size?: number)Observable<Record>Allows to observe the "n" most recent records, where "n" is determined by the value given to the size parameter. By default, size is 100
    listBy(recordType: string, order: 'asc' | 'desc', conditions?: Array)Observable<Array<Record>>Allows to observe all the records of a given type. The sorting of the records can be controlled using the order parameter. The default order is last records come first (desc). It is possible to filter the resulting records by one or more FetchConditions
    listLast(recordType: string, conditions?: Array<FetchCondition>)Observable<Record>Allows to obtain updates on the last record of a given type. It is possible to filter the resulting records by one or more FetchConditions
    listLastGroupedBy(recordType: string, groupByProperty: string, conditions?: Array<FetchCondition>)Observable<Array<Record>>Allows to obtain updates on the latest records of a given type, grouped by the unique values of a certain property. Property grouping allows nested property paths using the dot (.) character, e.g., property.nestedProperty. It is possible to filter the resulting records by one or more FetchConditions
    deleteBy(recordType: string)Promise<void>Allows to delete all the stored records of a given type from the local database
    clear()Promise<void>Allows to clear all the stored records from the local database. Use with care! To only remove old records, configure the oldRecordsMaxAgeHours option during plugin initialization
    changes (property)Observable<Array<string>>Listen to this observable property to know when a record has been created. It propagates updates on the ids of the records that have been recently stored
    \n
    \n

    Note: It is recommended to install RxJS, to operate with the methods that return an Observable.

    \n
    \n
    FetchCondition
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    propertystringThe path to the property where the condition will be applied. Works with nested property paths too, using the dot (.) character, e.g., property.nestedProperty
    comparison'='The comparison operation to apply over the property values. At the moment, only property equality (=) is supported
    valueunknownThe value to use in the comparison. At the moment, comparing complex objects is not supported
    \n

    Data exporters

    \n
    createRecordsExporter
    \n

    In the data exporters group, there is the createRecordsExporter() function, with the following parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    folderFolderSystem folder object. Use NativeScript FileSystem API to define where the exports file will be saved
    format'csv' | 'json'Select the information exchange format to use. Defaults to csv
    optionsRecordsExporterOptions(Optional) Object containing export options such as the file name to use for the exports file, or the type of records to include in the exports
    \n
    RecordsExporterOptions
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    fileNamestring(Optional) Specify the file name to use for the exports file (without extension). Defaults to current date and time
    recordTypesstring[](Optional) Specify the types of records to export
    \n

    The createRecordsExporter() returns an Exporter object.

    \n
    Exporter
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    export()Promise<ExportResult>Tell the exporter to export the records, and save them inside to the configured exports file. Returns an ExportResult once done
    \n
    ExportResult
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyReturn typeDescription
    exportCountnumberThe amount of records that have been exported
    fileNamestringThe name of the exports file that has been saved
    \n

    Custom data stores

    \n
    AwarnsStore
    \n

    In the final group, the custom data stores, the core entity is the generic AwarnsStore class. Each AwarnStore has the following methods (replace the T with the concrete entity type being stored):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    AwarnsStore(docType: string, serialize: (entity: T) => unknown, deserialize: (doc: unknown) => T)AwarnsStoreCreates a new AwarnsStore instance. Takes as parameters: a string to uniquely identify the type of the entity being stored, an entity serialization function and an entity deserialization function
    create(entity: T, id?: string)Promise<string>Inserts a new entity into the store. Optionally, an id can be provided. When not provided, an UUID will be generated. On success, returns the id of the newly stored entity
    insert(entities: Array<T>, id?: string)Promise<Array<string>>Bulk-inserts multiple entities into the store. On success, returns an array with the id of the newly stored entities (the order is kept)
    get(id: string)Promise<T>Searches for an entity using the given id
    fetch(q?: Query)Promise<Array<T>>Grants access to the more advanced underlying query interface. Provides the same API as the underlying Couchbase Lite DB query() method
    update(id: string, props: unknown)Promise<void>Updates an existing entity with the given id, using the provided properties. Only overrides the values of the given properties
    delete(id: string)Promise<void>Deletes an existing entity with the given id
    clear()Promise<void>Clears all the entities stored in this concrete AwarnsStore. This is, all the entities that share the same docType value. To clear all the records from all the stores see the clearAwarnsDB() function next
    \n
    clearAwarnsDB
    \n

    Inside the same group, there exists the clearAwarnsDB() function. Use this function to clear EVERYTHING persisted by this plugin. This is, the local records' database and any custom store created using an AwarnsStore instance. This function returns a Promise to inform about when the process has finished.

    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    writeRecordsPersists, inside the local records' database, one or more records contained in the invocation event's payload. If specified at plugin initialization time, it will also try to remotely synchronize the newly stored records. If the process fails, it will be retried during the next application start
    \n

    Persist records

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { writeRecordsTask } from '@awarns/persistence';

    export const demoTasks: Array<Task> = [
      writeRecordsTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task event output:

    \n
      \n
    • writeRecordsFinished (default, no content)
      • \n
    \n
    \n

    Example usage in the application task graph:

    \n

    This task is not meant to be used alone, check the docs of any other framework plugin of your choice to see how this task can be used with others. Some examples exist in the battery, human activity and geolocation packages, to name a few

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rater":{"name":"nativescript-rater","version":"3.0.0","license":"MIT","readme":"

    Nativescript-rater

    \n

    \"npm\"\n\"npm\"\n\"Commitizen

    \n

    Reminds your app's users to review the app through PlayStore or AppStore. Love it, rate it!

    \n

    iOS 10.3 〜

    \n

    \"SwiftRater1\"

    \n

    For iOS 10.3 devices, SwiftRater uses SKStoreReviewController.

    \n

    〜 iOS 10.2

    \n

    \"SwiftRater2\"

    \n

    Android

    \n

    \"Android-Rate\"

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android-RateSwiftRater
    \n

    Requirements

    \n

    iOS iOS 8.0 or later, Xcode 8.2 or later.

    \n

    android API level 9 and up.

    \n

    Installation

    \n
    tns plugin add nativescript-rater
    \n

    Changelog

    \n

    src/CHANGELOG.md

    \n

    Usage

    \n
    import {appRater} from 'nativescript-rater';

    // put init before `application.start`
    // in ng application, you may have to put init before `platformNativeScriptDynamic`
    appRater.init({
    \tshowNeverButton:false,
    \tdebugMode:true
    });

    // check
    appRater.showRateDialogIfMeetsConditions();

    // show directly
    appRater.showRateDialog();
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    iosraw ios control, see below for advance usage
    androidraw android control, the value will be available after app is launched
    init(configs:AppRaterConfigs):voidLet rater know that your app is launched. See configs below
    incrementSignificantUsageCount():voidFor significantUsesUntilPrompt, you need to add incrementSignificantUsageCount. iOS only
    showRateDialogIfMeetsConditions():booleanShow rating dialog if meets conditions. The function will return if dialog is showed.
    showRateDialog():voidShow rating dialog
    \n

    Configs

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    daysUntilPrompt7Shows review request if days days passed since first app launch.
    usesUntilPrompt3Shows review request if users launch more than uses times.
    daysBeforeReminding5Days until reminder popup if the user chooses rate later. valid for ~iOS10.2 and Android
    significantUsesUntilPrompt0Shows review request if user does significant actions more than uses. iOS only
    debugModefalseShows review request every time. Default false. need to set false when you submit your app.
    showLaterButtontrueShow Later button in review request dialong. valid for ~iOS10.2 and Android
    showNeverButtontrueShow Never button in review request dialong. Android only
    \n

    You can also change the value via setter.

    \n
    import {appRater} from 'nativescript-rater';

    appRater
            .setDaysUntilPrompt(7)
            .setUsesUntilPrompt(3)
            .setSignificantUsesUntilPrompt(2)
            .setShowLaterButton(true)
            .setShowNeverButton(true)
            .setDebugMode(true);
    \n

    Custom dialog

    \n

    Android

    \n

    If you want to use your own dialog labels, override string xml resources on your application.

    \n
    <resources>
        <string name=\"rate_dialog_title\">Rate this app</string>
        <string name=\"rate_dialog_message\">If you enjoy playing this app, would you mind taking a moment to rate it? It won\\'t take more than a minute. Thanks for your support!</string>
        <string name=\"rate_dialog_ok\">Rate It Now</string>
        <string name=\"rate_dialog_cancel\">Remind Me Later</string>
        <string name=\"rate_dialog_no\">No, Thanks</string>
    </resources>
    \n

    iOS

    \n

    You can customize text in review request dialog for iOS10.2 or before devices. Set text in following properties.

    \n
    appRater.ios.setAlertTitle('title')
    appRater.ios.setAlertMessage('message')
    appRater.ios.setAlertCancelTitle('cancel')
    appRater.ios.setAlertRateTitle('rate')
    appRater.ios.setAlertRateLaterTitle('later')
    appRater.ios.setAppName('your app name')
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-orientation":{"name":"@codesthings/nativescript-orientation","version":"3.0.0","license":{"type":"MIT","url":"https://proplugins.org/proplugins/nativescript-orientation/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    nativescript-orientation

    \n

    A NativeScript plugin to deal with Declarative UI and Screen Orientation\nThis handles both sides of the orientation issues; both the events on when the orientation changes; and the ability to change the orientation manually.

    \n

    ProPlugins

    \n

    We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

    \n

    \n

    Community

    \n

    Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

    \n

    Developed by

    \n

    \"MasterTech\"

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Sample Snapshot

    \n

    \"Sample1\"\nThanks to TJ VanToll for the awesome animated gif.

    \n

    Installation

    \n

    Nativescript 7.x.x

    \n

    tns plugin add nativescript-orientation

    \n

    NativeScript 3.x.x - 6.x.x

    \n

    tns plugin add nativescript-orientation@2.2.5

    \n

    NativeScript 2.x.x

    \n

    tns plugin add nativescript-orientation@1.6.1

    \n

    Migration to 3.0 for Nativescript 7 support and es2017 :)

    \n

    Replace all:

    \n
    var orientation = require( \"nativescript-orientation\" );
    \n

    with:

    \n
    import orientation from \"nativescript-orientation\";
    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    require( \"nativescript-orientation\" );
    \n

    This plugin has two separate abilities; the first ability is to setup the cool ability to run a function and setup the css when the screen is rotated.\nFor this ability, you do NOT need to keep a reference to it for the orientation event handling and css. You only need to load it once. I recommend you add it to your app.js file and forget about it.\nIt will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.\nWhat this does is automatically add and remove the "landscape" to the current Page's cssClass variable (and does other magic behind the scenes allowing it to actually work).

    \n

    If you want to manually control the orientation, then you will need to require it and use the functions you need.

    \n

    You ask, how exactly does this help?

    \n

    Well, guess what Cascading means in CSS?
    \nYes, this means this works now:

    \n

    Plain Awesome NativeScript (PAN)

    \n
    StackLayout {
      background-color: red;
    }

    .landscape StackLayout {
      background-color: green;
    }
    \n

    NativeScript Angular (NAN)

    \n

    /deep/ .landscape StackLayout  {
        background-color: green;
    }
    \n

    I was recently informed the :host is a better options, as it causes less potential isolation side effects in Angular.

    \n
    StackLayout {
        background-color : red;
    }


    .landscape :host StackLayout {
      background-color: green;
    }
    \n

    So in portrait the background would be red, in landscape the color is green.\nPlease note in Angular, you need to prefix the .landscape with /deep/ for it to work!\nIn addition, for Angular I was recently informed that :host is also a valid option, I have not tested this; but I wanted to get it documented.

    \n

    Why use this?

    \n

    You can set ALL the normal CSS values this way include width, height, font-size.\nBy using the css to control any normal items and your own page's exports.orientation to control anything not controllable by css you can change the look completely between Landscape/Portrait.

    \n

    You can add to any page you need it the following Function:

    \n

    exports.orientation(args)

    \n
    args.landscape = true | false
    \n
    args.object = the current page
    \n

    This function (if it exists) will be ran when the page is first created so you can set any needed defaults. (This is ran at the same time as the PageNavigatingTo event)\nThis function (if it exists) will be ran each time the orientation changes.\nSince at this moment some items can't be controlled by CSS like orientation on ScrollView, this event allows you to control change those things when the orientation changes via your code.

    \n

    Please note, there is also a built in event in NativeScript called orientationChanged event. The differences between these is that the built in event only gets called when the orientation changes;\nThis event is called on every screen navigation and any time the device rotates; allowing you to setup any rotation stuff during the creation of the screen.
    \nANGULAR NOTE: The exports.orientation function event does NOT work in Angular since Angular does not have the same concept. You can use the orientation.addOrientationApplier instead.

    \n

    Additional Helper Methods

    \n
    import orientation from \"nativescript-orientation\";
    \n

    orientation.getOrientation(sensors?)

    \n
    optional sensor === true, will return you sensor values on android verses screen size calculation
    \n
    Some android tablets lie about port vs landscape; so we determine the orientation based on the current screen sizes
    \n
      console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value
    \n

    orientation.setOrientation(direction, animation)

    \n
    Direction - "portrait" | "landscape" | "landscapeleft" | "landscaperight" | enum DeviceOrientation
    \n
    Animation === false, disabled animation on iOS. (iOS ONLY currently)
    \n

    This will automatically disable rotation support after it changes the orientation.

    \n
      orientation.setOrientation(\"landscape\");
    \n

    orientation.enableRotation() - enable orientation

    \n

    This will enable automatic orientation support

    \n
      orientation.enableRotation();  // The screen will rotate to whatever the current settings are...
    \n

    orientation.disableRotation() - disables orientation

    \n

    This will disable automatic orientation support and lock it to the current orientation

    \n
      orientation.disableRotation(); // The screen will no longer rotate
    \n

    orientation.setFullScreen(value) - true/false

    \n

    Orientation Appliers

    \n

    Orientation Appliers serve as hooks into the orientation application logic for nativescript-orientation. Whenever nativescript-orientation applies its orientation logic it also calls any Orientation Appliers that you've added. This allows you to easily execute your own logic when orientation needs to be considered/applied. Orientation Appliers are simple functions that receive 1 parameter: the current orientation in string form (the same as is returned from the orientation.getOrientation() method). Methods to add and remove Orientation Appliers, as well as examples, are supplied below.

    \n

    oprientationApplierCallback

    \n
    args.landscape = true | false
    \n
    args.object = the current page
    \n

    The callback receives the same arguments as the exports.orientation event in normal NativeScript.

    \n

    orientation.addOrientationApplier(orientationApplierCallback)

    \n

    This adds an Orientation Applier

    \n
    var MyModule = (function() {
      var orientation = require('nativescript-orientation');

      this.boundProperty = \"some value\";


      function myCallback(args) {
          if (args.landscape) {
            // Do something landscap-y
            return;
          }

          // Do something portrait-y
          // Assume this includes updating boundProperty on this module's scope.      
          this.boundProperty = \"a different value\";
      }

      orientation.addOrientationApplier(myCallback.bind(this));

      return {
        boundProperty: this.boundProperty
      };
    })();

    exports.MyModule = MyModule;
    \n

    orientation.removeOrientationApplier(orientationApplierCallback)

    \n

    This removes an Orientation Applier from the set of Orientation Appliers that will be executed.

    \n
    var MyModule = (function() {
      var orientation = require('nativescript-orientation');

     function myCallback(args) {
          if (args.landscape) {
            // Do something landscap-y
            return;
          }

          // Do something portrait-y
          // Assume this includes updating boundProperty on this module's scope.      
          this.boundProperty = \"a different value\";
      }

      var myOrientationApplier = myCallback.bind(this);
      orientation.addOrientationApplier(myOrientationApplier);

      // Somewhere later in your code...
      orientation.removeOrientationApplier(myOrientationApplier);

      return {
        boundProperty: this.boundProperty
      };
    })();

    exports.MyModule = MyModule;
    \n

    Two key things to remember when using this functionality:

    \n
      \n
    1. Use myCallback.bind(this) when adding your Orientation Applier (this preserves the correct 'this' scope for your callback method).
      2. \n
    2. In Nativescript Angular, the orientation change event does not trigger an Angular Change Detection cycle. Because of this you'll need to manually trigger Change Detection within your Orientation Applier by injecting ChangeDetectorRef from @angular/core into your Component and calling this.changeDetectorRef.detectChanges() from within your Orientation Applier;
      3. \n
    \n

    Contributors

    \n
      \n
    • Ashton Cummings
      • \n
    • Dick Smith
      • \n
    • Dimitar Tachev
      • \n
    • Emiel Beeksma
      • \n
    • Zsolt Racz
      • \n
    • Brad Linard
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc":{"name":"nativescript-nfc","version":"5.0.0","license":"MIT","readme":"

    NativeScript NFC plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativeScript Version 7+:

    \n
    ns plugin add nativescript-nfc
    \n

    NativeScript Version 6 and below:

    \n
    tns plugin add nativescript-nfc@4.1.0
    \n

    iOS Setup

    \n

    iOS requires you to enable 'NFC Tag Reading' for your App ID here.

    \n

    Also, add this to your App_Resources/iOS/app.entitlements (mind the name!) file:

    \n
    <key>com.apple.developer.nfc.readersession.formats</key>
    <array>
    \t<string>NDEF</string>
    </array>
    \n

    The demo app has this:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>com.apple.developer.nfc.readersession.formats</key>
    \t<array>
    \t\t<string>NDEF</string>
    \t</array>
    </dict>
    </plist>
    \n

    Android Setup

    \n
    \n

    ⚠️ Since plugin version 4.0.0 this section is no longer needed, but you'll HAVE to run NativeScript 5.4.0 or newer. If you're using an older NativeScript, please stick to a plugin version < 4.0.0.

    \n
    \n

    Update the activity entry in your App_Resources/Android/AndroidManifest.xml file:

    \n
    <activity
            android:name=\"com.tns.NativeScriptNfcActivity\"
            android:label=\"@string/title_activity_kimera\"
            android:configChanges=\"keyboardHidden|orientation|screenSize\">
    \n

    So replace com.tns.NativeScriptActivity with com.tns.NativeScriptNfcActivity.

    \n

    Webpack (again, no longer needed from plugin version 4.0.0)

    \n

    If you're using Webpack to bundle your app you'll need to add 1 line of configuration in case you're targeting Android.

    \n
      \n
    • Open webpack.config.js (it's in the root of your project).
      • \n
    • Look for an Array named appComponents, which likely contains stuff like "tns-core-modules/ui/frame".
      • \n
    • Add resolve(__dirname, "node_modules/nativescript-nfc/nfc-activity.android.js") as shown here.
      • \n
    \n

    Demo app (those screenshots above)

    \n

    Want to dive in quickly? Check out the demo!

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

    \n
    \n

    This is what it looks like in action on iOS!

    \n
    \n

    API

    \n

    available

    \n

    Not all devices have an NFC chip we can tap in to (and on iOS you need to build with Xcode 9+), so check this beforehand:

    \n
    JavaScript
    \n
    // require the plugin
    var Nfc = require(\"nativescript-nfc\").Nfc;

    // instantiate the plugin
    var nfc = new Nfc();

    nfc.available().then(function (avail) {
      console.log(avail ? \"Yes\" : \"No\");
    });
    \n
    TypeScript
    \n
    // require the plugin
    import { Nfc } from \"nativescript-nfc\";

    // instantiate the plugin
    let nfc = new Nfc();

    nfc.available().then(avail => {
      console.log(avail ? \"Yes\" : \"No\");
    });
    \n

    enabled

    \n

    A device may have an NFC chip, but it needs to be turned on ✅ in order to be available for this plugin. So if available returns true and enabled returns false you should prompt the user to turn NFC on in the device settings.

    \n
    JavaScript
    \n
    nfc.enabled().then(function (on) {
      console.log(on ? \"Yes\" : \"No\");
    });
    \n
    TypeScript
    \n
    nfc.enabled().then(on => {
      console.log(on ? \"Yes\" : \"No\");
    });
    \n

    setOnNdefDiscoveredListener

    \n

    You may want to get notified when an Ndef tag was discovered. You can pass in a callback function that gets invoked when that is the case.

    \n

    Note that blank/erased NFC tags are not returned here, but through setOnTagDiscoveredListener instead.

    \n

    See the definition of NfcNdefData to learn what is returned to the callback function.

    \n

    For iOS you can pass in these options (see the TypeScript example below):

    \n
      \n
    • stopAfterFirstRead: boolean (default false): don't continue scanning after a tag was read.
      • \n
    • scanHint: string (default undefined): Show a little hint in the scan UI.
      • \n
    \n
    JavaScript
    \n
    nfc
      .setOnNdefDiscoveredListener(function (data) {
        // see the TypeScript example below
      })
      .then(function () {
        console.log(\"OnNdefDiscovered listener added\");
      });
    \n
    TypeScript
    \n
    import { NfcNdefData } from \"nativescript-nfc\";

    nfc
      .setOnNdefDiscoveredListener(
        (data: NfcNdefData) => {
          // data.message is an array of records, so:
          if (data.message) {
            for (let m in data.message) {
              let record = data.message[m];
              console.log(
                \"Ndef discovered! Message record: \" + record.payloadAsString
              );
            }
          }
        },
        {
          // iOS-specific options
          stopAfterFirstRead: true,
          scanHint: \"Scan a tag, baby!\"
        }
      )
      .then(() => {
        console.log(\"OnNdefDiscovered listener added\");
      });
    \n

    You can pass in null instead of a callback function if you want to remove the listener.

    \n
    TypeScript
    \n
    nfc.setOnNdefDiscoveredListener(null).then(() => {
      console.log(\"OnNdefDiscovered listener removed\");
    });
    \n

    setOnTagDiscoveredListener (Android only)

    \n

    You may want to get notified when an NFC tag was discovered.\nYou can pass in a callback function that gets invoked when that is the case.

    \n

    Note that Ndef tags (which you may have previously written data to) are not returned here,\nbut through setOnNdefDiscoveredListener instead.

    \n

    See the definition of NfcTagData to learn what is returned to the callback function.

    \n
    JavaScript
    \n
    nfc
      .setOnTagDiscoveredListener(function (data) {
        console.log(\"Discovered a tag with ID \" + data.id);
      })
      .then(function () {
        console.log(\"OnTagDiscovered listener added\");
      });
    \n
    TypeScript
    \n
    import { NfcTagData } from \"nativescript-nfc\";

    nfc
      .setOnTagDiscoveredListener((data: NfcTagData) => {
        console.log(\"Discovered a tag with ID \" + data.id);
      })
      .then(() => {
        console.log(\"OnTagDiscovered listener added\");
      });
    \n

    You can pass in null instead of a callback function if you want to remove the listener.

    \n
    TypeScript
    \n
    nfc.setOnTagDiscoveredListener(null).then(() => {
      console.log(\"OnTagDiscovered listener removed\");
    });
    \n

    writeTag (Android only)

    \n

    You can write to a tag as well with this plugin. At the moment you can write either plain text or a Uri. The latter will launch the browser on an Android device if the tag is scanned (unless an app handling Ndef tags itself is active at that moment, like an app with this plugin - so just close the app to test this feature).

    \n

    Note that you can write multiple items to an NFC tag so the input is an object with Arrays of various types (textRecord and uriRecord are currently supported). See the TypeScript definition for details, but these examples should get you going:

    \n
    Writing 2 textRecords in JavaScript
    \n
    nfc
      .writeTag({
        textRecords: [
          {
            id: [1],
            text: \"Hello\"
          },
          {
            id: [3, 7],
            text: \"Goodbye\"
          }
        ]
      })
      .then(
        function () {
          console.log(\"Wrote text records 'Hello' and 'Goodbye'\");
        },
        function (err) {
          alert(err);
        }
      );
    \n
    Writing a uriRecord in TypeScript
    \n
    nfc
      .writeTag({
        uriRecords: [
          {
            id: [100],
            uri: \"https://www.progress.com\"
          }
        ]
      })
      .then(
        () => {
          console.log(\"Wrote Uri record 'https://www.progress.com\");
        },
        err => {
          alert(err);
        }
      );
    \n

    eraseTag (Android only)

    \n

    And finally, you can erase all content from a tag if you like.

    \n
    JavaScript
    \n
    nfc.eraseTag().then(function () {
      console.log(\"Tag erased\");
    });
    \n
    TypeScript
    \n
    nfc.eraseTag().then(() => {
      console.log(\"Tag erased\");
    });
    \n

    Tips

    \n

    Writing to an empty tag

    \n

    You first need to "discover" it with setOnTagDiscoveredListener (see below). While you're still "near" the tag you can call writeTag.

    \n

    Writing to a non-empty tag

    \n

    Same as above, but discovery is done through setOnNdefDiscoveredListener.

    \n

    Future work

    \n
      \n
    • Peer to peer communication between two NFC-enabled devices.
      • \n
    • Support for writing other types in addition to 'text' and 'uri'.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vt-nativescript-camera":{"name":"vt-nativescript-camera","version":"6.0.0","license":"Apache-2.0","readme":"

    NativeScript Camera \"Build

    \n

    Welcome to the nativescript-camera plugin for NativeScript framework

    \n

    (Optional) Prerequisites / Requirements

    \n\n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n

    Navigate to project folder and run NativeScript-CLI command

    \n
    tns plugin add nativescript-camera
    \n

    Plugin could be added as a standard npm dependency running command

    \n
    npm install nativescript-camera --save
    \n
    \n

    Note: the --save flag will add the plugin as dependency in your package.json file

    \n
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
    requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
    requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
    requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
    isAvailable()Is the device camera available to use.
    \n

    CameraOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultPlatformDescription
    width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
    saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
    allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
    cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
    \n
    \n

    Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

    \n
    \n

    Usage

    \n

    Requesting permissions

    \n

    Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    camera.requestPermissions().then(
        function success() {
            // permission request accepted or already granted 
            // ... call camera.takePicture here ...
        }, 
        function failure() {
            // permission request rejected
            // ... tell the user ...
        }
    );
    \n
    \n

    Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

    \n
    \n
    \n

    Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

    \n
    \n
    <key>NSCameraUsageDescription</key>
    <string>enter your camera permission request text here</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>enter your photo library permission request text here</string>
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    // JavaScript
    const camera = require(\"nativescript-camera\");
    \n
    // TypeScript
    import * as camera from \"nativescript-camera\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to receive image asset

    \n
    \n
    // JavaScript
    const imageModule = require(\"tns-core-modules/ui/image\");

    camera.takePicture()   
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new imageModule.Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"tns-core-modules/ui/image\";

    camera.takePicture()
        .then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the original taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • allowsEditing: (iOS Only) A boolean parameter that indicates if the camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    // JavaScript
    const imageModule = require(\"tns-core-modules/ui/image\");

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)   
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"tns-core-modules/ui/image\";

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)
        .then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Save a picture

    \n

    To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

    \n
    const source = new ImageSource();

    source.fromAsset(imageAsset)
        .then((imageSource: ImageSource) => {
            const folderPath: string = knownFolders.documents().path;
            const fileName: string = \"test.jpg\";
            const filePath: string = path.join(folderPath, fileName);
            const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

            if (saved) {
                console.log(\"Gallery: \" + this._dataItem.picture_url);
                console.log(\"Saved: \" + filePath);
                console.log(\"Image saved successfully!\");
            }
        });
    \n

    This could be used to create thumbnails for quick display within your application.

    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    const isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-https":{"name":"nativescript-https","version":"2.2.2","license":"MIT","readme":"

    NativeScript-HTTPS

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    The definitive way to hit HTTP based APIs in Nativescript.

    \n

    Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

    \n
    \n

    Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

    \n
    \n

    A drop-in replacement for the default http module.

    \n

    Features

    \n
      \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP
      • \n
    • HTTP/2 support
      • \n
    • Multiform part
      • \n
    • Cache
      • \n
    • Basic Cookie support
      • \n
    \n

    FAQ

    \n
    \n

    What the flip is SSL pinning and all this security mumbo jumbo?

    \n
    \n

    How to make your apps more secure with SSL pinning.

    \n
    \n

    Do I have to use SSL pinning?

    \n
    \n

    No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

    \n

    Demo

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-https
    cd nativescript-https/src
    npm run demo.ios
    npm run demo.android
    \n

    Installation

    \n

    Add tns-platform-declarations for Android and iOS to your references.d.ts!

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
    /// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
    \n

    We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

    \n

    Install the plugin:

    \n
    tns plugin add nativescript-https
    \n

    Examples

    \n

    Hitting an API using GET method

    \n
    import * as Https from 'nativescript-https'
    Https.request({
    \turl: 'https://httpbin.org/get',
    \tmethod: 'GET',
    \ttimeout: 30 // seconds (default 10)
    }).then(function(response) {
    \tconsole.log('Https.request response', response)
    }).catch(function(error) {
    \tconsole.error('Https.request error', error)
    })
    \n

    Configuration

    \n

    Installing your SSL certificate

    \n

    Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

    \n

    \"Installing

    \n

    Enabling SSL pinning

    \n
    import { knownFolders } from 'file-system'
    import * as Https from 'nativescript-https'
    let dir = knownFolders.currentApp().getFolder('assets')
    let certificate = dir.getFile('httpbin.org.cer').path
    Https.enableSSLPinning({ host: 'httpbin.org', certificate })
    \n

    Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

    \n

    Disabling SSL pinning

    \n
    import * as Https from 'nativescript-https'
    Https.disableSSLPinning()
    \n

    All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

    \n

    useLegacy

    \n

    There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

    \n
      \n
    • the content returned by a request is not the resulting string but an object. It follows HTTPContent format for the most part. You can call toJSON or toFile. The only difference is that toFile returns a Promise<File> which means that it is async and run in a background thread!
      • \n
    • an error return a content too allowing you to read its content.
      • \n
    \n

    Cookie

    \n

    By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

    \n

    Enabling Cache

    \n
    import { knownFolders, path } from '@nativescript/core/file-system';
    import * as Https from 'nativescript-https'
    Https.setCache({
        diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
        diskSize: 10 * 1024 * 1024 // 10 MiB
    });

    /// later on when calling your request you can use the cachePolicy option
    \n

    Multipart form data

    \n

    If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

    \n
    {
    \tdata: any
        parameterName: string,
        fileName?: string
        contentType?: string
    }
    \n

    if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

    \n

    Options

    \n
    export interface HttpsSSLPinningOptions {
    \thost: string
    \tcertificate: string
    \tallowInvalidCertificates?: boolean
    \tvalidatesDomainName?: boolean
    \tcommonName?: string
    }
    import { HttpRequestOptions } from 'tns-core-modules/http';
    export interface HttpsRequestOptions extends HTTPOptions{
    \tuseLegacy?: boolean
    \tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
    \tonProgress?: (current: number, total: number) => void
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    SSLPinning OptionDescription
    host: stringThis must be the request domain name eg sales.company.org.
    commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
    certificate: stringThe uri path to your .cer certificate file.
    allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
    validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Requests OptionDescription
    useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
    `cachePolicy?: 'noCache''onlyCache'
    onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
    \n

    Webpack / bundling

    \n

    Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

    \n

    iOS Troubleshooting

    \n
    \n

    Please educate yourself on iOS's App Transport Security before starting beef!

    \n
    \n

    If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n
    \n

    This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

    \n
    \n

    Android troubleshooting

    \n

    If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

    \n

    Thanks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WhoWhy
    Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
    AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
    Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-react-vision":{"name":"@nativescript/template-blank-react-vision","version":"8.6.2","license":"Apache-2.0","readme":"

    NativeScript Application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-local-notifications":{"name":"nativescript-ssi-local-notifications","version":"3.2.1","license":"MIT","readme":"

    NativeScript Local Notifications Plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-ssi-local-notifications
    \n

    TypeScript support

    \n

    And do yourself a favor by adding TypeScript support to your nativeScript app:

    \n
    tns install typescript
    \n

    Now you can import the plugin as an object into your .ts file as follows:

    \n
    import * as LocalNotifications from \"nativescript-ssi-local-notifications\";

    // then use it as:
    LocalNotifications.hasPermission()
    \n

    Demo app (XML)

    \n

    If you want a quickstart, clone our demo app.

    \n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Default 0.
    titleThe title which is shown in the statusbar. Default empty.
    bodyThe text below the title. Default empty.
    groupedMessagesAn array of atmost 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
    groupSummaryAn inboxStyle notification summary. Default empty
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default 'now'.
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundNotification sound. For custom notification sound, copy sound file in App_Resources/iOS (iOS) and App_Resources/Android/raw (Android). Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalSet to one of second minute hour day week month quarter year if you want a recurring notification.
    smallIconOn Android you can set a custom icon in the system tray. Pass in 'res://filename' (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we look for a file named 'ic_stat_notify.png' in the App_Resources/Android/drawable folders. Default: the app icon.
    largeIconSame as smallIcon, but this one is shown when you expand the notification center. The optional file we look for is not 'ic_stat_notify.png' but 'ic_notify.png'.
    ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.(Android Only)
    \n

    Note that after a reboot the smallIcon and largeIcon are not restored but fall back to the default (app icon). This is a known issue and can be fixed in a future version.

    \n
      LocalNotifications.schedule([{
        id: 1,
        title: 'The title',
        body: 'Recurs every minute until cancelled',
        ticker: 'The ticker',
        badge: 1,
        groupedMessages:[\"The first\", \"Second\", \"Keep going\", \"one more..\", \"OK Stop\"], //android only
        groupSummary:\"Summary of the grouped messages above\", //android only
        ongoing: true, // makes the notification ongoing (Android only)
        smallIcon: 'res://heart',
        interval: 'minute',
        sound: require(\"application\").ios ? \"customsound-ios.wav\" : \"customsound-android\", // can be also `null`, \"default\"
        at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
      }]).then(
          function() {
            console.log(\"Notification scheduled\");
          },
          function(error) {
            console.log(\"scheduling error: \" + error);
          }
      )
    \n

    Notification icons

    \n
    \n

    Background information: Local notifications may fail silently if you don't provide the notification icons in the correct dimensions. They may do work perfectly fine on one device but fail on the other. That's because android might fallback to your xxxhdpi launcher icon which is too big. This type of error is noticeable in logcat: !!! FAILED BINDER TRANSACTION !!! (parcel size = 1435376)

    \n
    \n

    Spec for ic_stat_notify.png (smallIcon)

    \n

    Android API Guides → Status Bar Icons

    \n

    Spec for ic_notify.png (largeIcon)

    \n

    Unfortunately it seems like there's no official guide for these. Anyways there's a dimen that's telling us the dp size which we can translate to the following spec:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi48 x 48120
    mdpi64 x 64160
    hdpi96 x 96240
    xhdpi128 x 128320
    xxhdpi192 x 192480
    \n

    Don't include xxxhdpi

    \n
    \n

    xxxhdpi: Extra-extra-extra-high-density uses (launcher icon only, see the note in Supporting Multiple Screens); approximately 640dpi. Added in API Level 18
    \nSource: Density Qualifier Docs

    \n
    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
      LocalNotifications.addOnMessageReceivedCallback(
          function (notification) {
            console.log(\"ID: \" + notification.id);
            console.log(\"Title: \" + notification.title);
            console.log(\"Body: \" + notification.body);
          }
      ).then(
          function() {
            console.log(\"Listener added\");
          }
      )
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n

    Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

    \n
      LocalNotifications.getScheduledIds().then(
          function(ids) {
            console.log(\"ID's: \" + ids);
          }
      )
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
      LocalNotifications.cancel(5 /* the ID */).then(
          function(foundAndCanceled) {
              if (foundAndCanceled) {
                console.log(\"OK, it's gone!\");
              } else {
                console.log(\"No ID 5 was scheduled\");
              }
          }
      )
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
      LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
      LocalNotifications.requestPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
      LocalNotifications.hasPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    Future work

    \n

    Let us know what you need by opening a Github issue.

    \n

    We're thinking about adding support for things like:

    \n
      \n
    • Interactive Notifications on iOS
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-snackbar":{"name":"@nstudio/nativescript-snackbar","version":"2.1.0","license":"Apache-2.0","readme":"\n

    NativeScript-Snackbar 🍭 🍫 🍦

    \n    \n

    \nNativeScript plugin for Material Design SnackBar component.\n

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n

    \n
    \n

    Installation:

    \n

    NativeScript 7+:\ntns plugin add @nstudio/nativescript-snackbar

    \n

    NativeScript version prior to 7:\ntns plugin add @nstudio/nativescript-snackbar@1.1.2

    \n

    Demo

    \n

    \"Snackbar\"

    \n

    Usage

    \n

    TS

    \n
    import { SnackBar, SnackBarOptions } from \"@nstudio/nativescript-snackbar\";

    // Create an instance of SnackBar
    const snackbar = new SnackBar();

    /// Show a simple snackbar with no actions
    public showSimple() {
        snackbar.simple('Snackbar', 'red', '#fff', 3, false).then((args) => {
             this.set('jsonResult', JSON.stringify(args))    ;
       })
    }

    /// Show an Action snack bar
    public showAction() {
      const options: SnackBarOptions = {
        actionText: this.get('actionText'),
        actionTextColor: '#ff4081',
        snackText: this.get('snackText'),
        textColor: '#346db2',
        hideDelay: 3500,
        backgroundColor: '#eaeaea',
        maxLines: 3, // Optional, Android Only
        isRTL: false,
        view: <View>someView, // Optional, Android Only, default to topmost().currentPage
        padding: number //Optional, iOS only
      };

      snackbar.action(options).then((args) => {
        if (args.command === \"Action\") {
          this.set('jsonResult', JSON.stringify(args))    ;
        } else {
          this.set('jsonResult', JSON.stringify(args));
        }
      });
    }
    \n

    API

    \n

    Show a simple SnackBar (color args will only work on Android)

    \n
      \n
    • simple(snackText: string, textColor?: string, backgroundColor?: string, maxLines?: number, isRTL?: boolean, view?: View): Promise
      • \n
    \n

    Show a SnackBar with Action.

    \n
      \n
    • action(options: SnackBarOptions): Promise
      • \n
    \n

    Manually dismiss an active SnackBar

    \n
      \n
    • dismiss(): Promise
      • \n
    \n

    SnackBarOptions Interface

    \n
      \n
    • actionText: string
      • \n
    • actionTextColor: string
      • \n
    • snackText: string
      • \n
    • hideDelay: number
      • \n
    • textColor: string
      • \n
    • backgroundColor: string
      • \n
    • maxLines: number
      • \n
    • isRTL: boolean
      • \n
    • view: View
      • \n
    • padding: number
      • \n
    \n

    Run Demo

    \n
    git clone https://github.com/nstudio/nativescript-snackbar.git
    cd nativescript-snackbar/src
    npm run build

    npm run demo.ios

    // or...

    npm run demo.android
    \n

    Changelog

    \n

    Contributing

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@klippa/nativescript-login":{"name":"@klippa/nativescript-login","version":"3.1.1","license":"MIT","readme":"

    nativescript-login

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Build

    \n

    :rocket: The best way to do social logins in NativeScript :rocket:

    \n

    A plugin with modern SDKs to allow authentication to various providers with access to all SDK features.

    \n

    Features

    \n\n

    NativeScript Version Support

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NS Versionnativescript-login versionInstall commandDocs
    ^8.0.0^3.0.0ns plugin add @klippa/nativescript-login@^3.0.0This page
    ^7.0.0^2.0.0ns plugin add @klippa/nativescript-login@^2.0.0Here
    ^6.0.0^1.0.0tns plugin add @klippa/nativescript-login@^1.0.0Here
    \n

    Installation (NS 8)

    \n
    ns plugin add @klippa/nativescript-login@^3.0.0
    \n

    Usage

    \n

    Facebook Login

    \n

    Android integration

    \n
      \n
    • Follow the 1. Select an App or Create a New App step in the manual
      • \n
    • Edit/create your App_Resources/Android/src/main/res/values/strings.xml file and add the following, replace the {{app-id}}, {{app-name}}, {{client-token}} values:
      • \n
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <!-- If your strings.xml already existed, add the following <string> elements -->
        <string name=\"app_name\">{{app-name}}</string>
        <string name=\"title_activity_kimera\">{{app-name}}</string>
        <string name=\"facebook_app_id\">{{app-id}}</string>
        <string name=\"fb_login_protocol_scheme\">fb{{app-id}}</string>
        <string name=\"facebook_client_token\">{{client-token}}</string>
    </resources>
    \n
      \n
    • Edit your App_Resources/Android/src/main/AndroidManifest.xml and add the following inside the <application> element.
      • \n
    \n
    <meta-data android:name=\"com.facebook.sdk.ApplicationId\" 
            android:value=\"@string/facebook_app_id\"/>

    <activity android:name=\"com.facebook.FacebookActivity\"
              android:configChanges=
                      \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
              android:label=\"@string/app_name\" />
    <activity
    android:name=\"com.facebook.CustomTabActivity\"
    android:exported=\"true\">
        <intent-filter>
            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\" />
            <category android:name=\"android.intent.category.BROWSABLE\" />
            <data android:scheme=\"@string/fb_login_protocol_scheme\" />
        </intent-filter>
    </activity>
    \n
      \n
    • Follow the 6. Provide the Development and Release Key Hashes for Your App step in the manual
      • \n
    • Logging in with your Facebook account should now work! The SDK takes care of the rest.
      • \n
    \n

    iOS integration

    \n
      \n
    • Follow the 1. Select an App or Create a New App step in the manual
      • \n
    • Enter your Bundle Identifier at the step 3. Register and Configure Your App with Facebook -> 3a. Add your Bundle Identifier\n** Open App_Resources/iOS/Info.plist and add the following, replace {{APP_ID}} with your own app ID, {{CLIENT_TOKEN}} with your client token and {{APP_NAME}} with your app name:
      • \n
    \n
    <key>CFBundleURLTypes</key>
    <array>
       <!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
       <dict>
       \t<key>CFBundleTypeRole</key>
           <string>Editor</string>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb{{APP_ID}}</string>
           </array>
       </dict>
    </array>
    <key>FacebookAppID</key>
    <string>{{APP_ID}}</string>
    <key>FacebookClientToken</key>
    <string>{{CLIENT_TOKEN}}</string>
    <key>FacebookDisplayName</key>
    <string>{{APP_NAME}}</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
       <!-- If you already have a LSApplicationQueriesSchemes key, only add the strings to the array -->
       <string>fbapi</string>
       <string>fbapi20130214</string>
       <string>fbapi20130410</string>
       <string>fbapi20130702</string>
       <string>fbapi20131010</string>
       <string>fbapi20131219</string>
       <string>fbapi20140410</string>
       <string>fbapi20140116</string>
       <string>fbapi20150313</string>
       <string>fbapi20150629</string>
       <string>fbapi20160328</string>
       <string>fbauth</string>
       <string>fb-messenger-share-api</string>
       <string>fbauth2</string>
       <string>fbshareextension</string>
    </array>
    \n

    NativeScript integration

    \n

    Only required for iOS:

    \n

    Normal NativeScript:\nEdit app/app.ts:

    \n
    import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInFacebookLogin();

    // ... Other code/wirings

    app.run({ moduleName: \"app-root\" });
    \n

    NativeScript Angular:\nEdit src/main.ts:

    \n

    // Other imports.
    import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInFacebookLogin();

    // ... Other code/wirings

    runNativeScriptAngularApp({
      appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
    });
    \n

    NativeScript Vue:\nEdit src/main.ts:

    \n

    // Other imports.
    import { wireInFacebookLogin } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInFacebookLogin();

    // ... Other code/wirings

    new Vue({
      render: (h) => h('frame', [h(Home)]),
    }).$start();
    \n
    \n
    import { startFacebookLogin, FacebookLoginOptions } from \"@klippa/nativescript-login\";

    // First create an options object:

    // The most basic sign in options.
    const loginOptions: FacebookLoginOptions = {};

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    startFacebookLogin(loginOptions).then((result) => {
        console.log(\"Facebook login result: \", result);
    }).catch((e) => {
        console.log(\"Error while logging in to Facebook: \", e);
    });
    \n

    Warning: Facebook's Automatically Logged Events

    \n

    When you use the Facebook SDK, certain events in your app are automatically logged and collected for Facebook Analytics unless you disable automatic event logging.\nYou can disable it on Android and on iOS by doing minor configuration changes.\nIf you are only using the Facebook SDK because of the login feature, I would advise to disable the "Automatically Logged Events" to prevent leaking information from your users to Facebook (even if there are not using Facebook).

    \n

    Google Sign In

    \n

    Android integration

    \n
      \n
    • Follow the Configure a Google API Console project step in the manual.
      • \n
    • Follow the Get your backend server's OAuth 2.0 client ID step in the manual if you want to request a server auth code to request the user information server side.
      • \n
    • Logging in with your Google account should now work! The SDK takes care of the rest.
      • \n
    \n

    iOS integration

    \n
      \n
    • Follow the Get an OAuth client ID step in the manual, note down the Client ID and download the credentials file.
      • \n
    • Open the credentials.plist and copy the value between <string> and </string> below <key>REVERSED_CLIENT_ID</key>.
      • \n
    • Open App_Resources/iOS/Info.plist and add the following, replace {{REVERSED_CLIENT_ID}} with the value you copied:
      • \n
    \n
    <key>CFBundleURLTypes</key>
    <array>
        <!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>{{REVERSED_CLIENT_ID}}</string>
            </array>
        </dict>
    </array>
    \n

    NativeScript integration

    \n

    Only required for iOS:

    \n

    Normal NativeScript:

    \n

    Edit app/app.ts:

    \n
    import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInGoogleSignIn(\"{{CLIENT_ID}}\");

    // ... Other code/wirings

    app.run({ moduleName: \"app-root\" });
    \n

    NativeScript Angular:

    \n

    Edit src/main.ts:

    \n

    // Other imports.
    import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInGoogleSignIn(\"{{CLIENT_ID}}\");

    // ... Other code/wirings

    runNativeScriptAngularApp({
      appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
    });
    \n

    NativeScript Vue:\nEdit src/main.ts:

    \n

    // Other imports.
    import { wireInGoogleSignIn } from \"@klippa/nativescript-login\";

    // ... Other code/wirings

    wireInGoogleSignIn(\"{{CLIENT_ID}}\");

    // ... Other code/wirings

    new Vue({
      render: (h) => h('frame', [h(Home)]),
    }).$start();
    \n

    Open the credentials.plist and copy the value between <string> and </string> below <key>CLIENT_ID</key>. Replace {{CLIENT_ID}} with the value you copied.

    \n
    \n
    import { GoogleSignInOptions, GoogleSignInType, startGoogleSignIn } from \"@klippa/nativescript-login\";

    // First create an options object:

    // The most basic sign in options.
    const signInOptions: GoogleSignInOptions = {
        SignInType: GoogleSignInType.Local,
        RequestEmail: true
    };

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    startGoogleSignIn(signInOptions).then((result) => {
        console.log(\"Google sign in result: \", result);
    }).catch((e) => {
       console.log(\"Error while singing in to Google: \", e);
    });
    \n

    Sign In with Apple

    \n
      \n
    • Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.
      • \n
    • Open your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.
      • \n
    \n

    Android integration (and iOS < 13)

    \n

    Sadly, Sign In with Apple does not support Android, due to the way they made the JS version, it's also not possible to create a version in a webview. You will always need a backend to handle it. I will write a how-to on this later.

    \n

    iOS integration (iOS >= 13)

    \n

    To start the login:

    \n
    import { SignInWithAppleOptions, startSignInWithApple, SignInWithAppleScope, signInWithAppleAvailable } from \"@klippa/nativescript-login\";
    import { Dialogs } from \"@nativescript/core\";

    if (signInWithAppleAvailable()) {
        // First create an options object:
        const signInOptions: SignInWithAppleOptions = {
            Scopes: [SignInWithAppleScope.EMAIL, SignInWithAppleScope.FULLNAME]
        };

        // Please note that result can also be a failure result.
        // The actual result is in the object.
        startSignInWithApple(signInOptions).then((result) => {
            console.log(\"Sign In with Apple result: \", result);
        }).catch((e) => {
           console.log(\"Error while using Sign In with Apple: \", e);
        });
    } else {
        Dialogs.alert(\"Sign In with Apple is not available for your device\");
    }
    \n

    To get the current state:

    \n
    import { getSignInWithAppleState, signInWithAppleAvailable } from \"@klippa/nativescript-login\";
    import { Dialogs } from \"@nativescript/core\";

    if (signInWithAppleAvailable()) {
        // User ID must be the ID that was previously received from the sign in.
        const userID = \"\";

        // Please note that result can also be a failure result.
        // The actual result is in the object.
        getSignInWithAppleState(userID).then((result) => {
            console.log(\"Sign in with Apple State result: \", result);
        }).catch((e) => {
           console.log(\"Error getting Sign in with Apple State: \", e);
        });
    } else {
        Dialogs.alert(\"Sign In with Apple is not available for your device\");
    }
    \n

    Other types of authentication

    \n

    To keep the scope of this project simple and clean, and to keep the dependencies small, we only support login providers that have native SDK's.\nIf you want to support other ways of logging in, please check out these projects:

    \n\n

    API

    \n

    Google

    \n

    GoogleSignInOptions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    SignInTypeThe type of sign in. GoogleSignInType.LOCAL is to use the information on the device, GoogleSignInType.ServerAuthCode for if you want to retrieve user information serverside.
    ServerClientIdThe Client ID of the server you are requesting a ServerAuthCode or IdToken. For when using login type is ServerAuthCode, or when RequestIdToken is true.
    ForceCodeForRefreshTokenUsed when type is ServerAuthCode. If true, the granted code can be exchanged for an access token and a refresh token. The first time you retrieve a code, a refresh_token will be granted automatically. Subsequent requests will require additional user consent. Use false by default; only use true if your server has suffered some failure and lost the user's refresh token. Only has effect on Android.
    HostedDomainSpecifies a hosted domain restriction. By setting this, sign in will be restricted to accounts of the user in the specified domain. Domain of the user to restrict (for example, "mycollege.edu"),
    AccountNameSpecifies an account name on the device that should be used. If this is never called, the client will use the current default account for this application. The account name on the device that should be used to sign in. Only has effect on Android.
    RequestIdTokenSpecifies that an ID token for authenticated users is requested. Requesting an ID token requires that the server client ID be specified. iOS always return the user ID Token.
    RequestIdSpecifies that user ID is requested by your application. For iOS you can't control this, ID is always returned.
    RequestEmailSpecifies that email info is requested by your application. Note that we don't recommend keying user by email address since email address might change. Keying user by ID is the preferable approach. For iOS you can't control this, use RequestProfile if you want the email.
    RequestProfileSpecifies that user's profile info is requested by your application. Default: true. On iOS you have to either set RequestProfile or give custom scopes.
    ExtraScopesA list of GoogleSignInScope values to specify OAuth 2.0 scopes for your application requests. Normally you will not need this.
    ForceAccountSelectionWhether you want to force account selection. If you enable this option we will logout the user for you in the app.
    \n

    GoogleSignInResult:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    ResultTypeThe result, either GoogleSignInResultType.FAILED or GoogleSignInResultType.SUCCESS.
    ErrorCodeWhen result type is GoogleSignInResultType.FAILED, the error code of the request.
    ErrorMessageWhen result type is GoogleSignInResultType.FAILED, the error message of the request.
    GrantedScopesA list of granted scopes.
    RequestedScopesA list of requested scopes. This is only filled in by the Android SDK.
    GivenName-
    IdThe ID of the user
    IdTokenThe ID token (JWT) to send to your backend
    DisplayName-
    FamilyName-
    PhotoUrl-
    Email-
    ServerAuthCodeThe Server Auth Code that your backend can use to retrieve user information.
    \n
    \n

    Facebook

    \n

    FacebookLoginOptions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    ScopesThe permissions to request. If you don't add this param, we will request public_profile and email for you.
    RequestProfileDataWhether to request profile data. If you don't enable this, you will only get an ID and a token. Perfect for server side handling. If you do enable this, we use the requested token on the Graph API to request the user profile. Not available when using LimitedLogin.
    ProfileDataFieldsThe fields to fetch when requesting the profile data. When not set, we get the following fields: id,name,first_name,last_name,picture.type(large),email. Some fields might return an object, like the picture field. Not available when using LimitedLogin.
    ForceAccountSelectionWhether you want to force account selection. If you enable this option we will logout the user for you in the app.
    LimitedLoginiOS only! Whether you want to use Limited Login. Facebook Login offers a Limited Login mode. When you use the limited version of Facebook Login, the fact that a person used Facebook Login with the app will not be used to personalize or measure advertising effectiveness. You will not get an access token when you enable this.
    \n

    FacebookLoginResult:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    ResultTypeThe result, either FacebookLoginResultType.FAILED, FacebookLoginResultType.CANCELED FacebookLoginResultType.SUCCESS.
    ErrorCodeWhen result type is FacebookLoginResultType.FAILED, the error code of the request.
    ErrorMessageWhen result type is FacebookLoginResultType.FAILED, the error message of the request.
    ProfileDataErrorCodeWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2, the error code of the profile request.
    ProfileDataErrorMessageWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2, the error message of the profile request.
    ProfileDataUserErrorMessageWhen result type is FacebookLoginResultType.FAILED, and ErrorCode is 2 the user error message of the profile request.
    DeniedScopesA list of denied scopes to validate whether the user gave permission for all requested scopes.
    GrantedScopesA list of granted scopes.
    IdThe ID of the user
    AccessTokenThe access token that your backend can use to retrieve user information. Not available when using LimitedLogin.
    ProfileDataFieldsAn object of of the profile fields that were requested in FacebookLoginOptions.ProfileDataFields or the basic profile when using the LimitedLogin option on iOS.
    \n
    \n

    Apple

    \n

    SignInWithAppleOptions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    UserNot required. Not sure what this value does. The value that will be put in the user property of ASAuthorizationAppleIDRequest.
    ScopesThe extra scopes to request. Normally you will only get the user ID. Note: a user can deny you access to these scopes. Possible values: SignInWithAppleScope.EMAIL and SignInWithAppleScope.FULLNAME
    \n

    SignInWithAppleResult:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    ResultTypeThe result, either SignInWithAppleResultType.ERROR, SignInWithAppleResultType.SUCCESS.
    ErrorCodeWhen result type is SignInWithAppleResultType.ERROR, the error code of the request.
    ErrorMessageWhen result type is SignInWithAppleResultType.ERROR, the error message of the request.
    IdentityTokenA JSON Web Token (JWT) that securely communicates information about the user to your app.
    AuthorizationCodeA short-lived token used by your app for proof of authorization when interacting with the app’s server counterpart.
    StateAn arbitrary string that your app provided to the request that generated the credential.
    UserAn identifier associated with the authenticated user.
    EmailWhen you added the EMAIL scope. The contact information the user authorized your app to access, it's possible that this is a @privaterelay.appleid.com when the user did not share their personal email address. Only available when the user authorizes your app for the first time. However, it is always available in the JWT token in the IdentityToken field.
    FullNameWhen you added the FULLNAME scope. The user’s name. Only available when the user authorizes your app for the first time.
    NameComponentsWhen you added the FULLNAME scope. The user’s name, represented as name components (e.g., first name, suffix, nickname). Only available when the user authorizes your app for the first time. See SignInWithAppleNameComponents.
    AuthorizedScopesA list of authorized scopes to validate whether the user gave permission for all requested scopes.
    RealUserStatusA value that indicates whether the user appears to be a real person.
    \n

    SignInWithAppleStateResult:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    ResultTypeThe result, either SignInWithAppleResultType.ERROR, SignInWithAppleResultType.SUCCESS.
    ErrorCodeWhen result type is SignInWithAppleResultType.ERROR, the error code of the request.
    ErrorMessageWhen result type is SignInWithAppleResultType.ERROR, the error message of the request.
    StateThe state of the authorization, either SignInWithAppleStateResultState.REVOKED, SignInWithAppleStateResultState.AUTHORIZED or SignInWithAppleStateResultState.NOTFOUND.
    \n

    SignInWithAppleNameComponents:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    GivenNameThe user's given (first) name.
    MiddleNameThe user's middle name.
    FamilyNameThe user's family (last) name.
    NamePrefixThe user's name prefix (e.g., Dr., Ms.).
    NameSuffixThe user's name suffix (e.g., Ph.D., Jr.).
    NicknameThe user's nickname.
    PhoneticRepresentationThe user's name, as pronounced phonetically, represented as name components (e.g., first name, suffix, nickname).
    \n

    About Klippa

    \n

    Klippa is a scale-up from Groningen, The Netherlands and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.

    \n

    We help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.

    \n

    License

    \n

    The MIT License (MIT)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sqlcipher":{"name":"nativescript-sqlcipher","version":"1.1.11","license":"MIT","readme":"

    Nativescript Sqlcipher

    \n

    A sqlcipher module for nativescript application.
    \nInspired by NathanaelA/Nativescript-Sqlite

    \n

    Create/Open Database

    \n

    Before creating database, nativescript-sqlcipher module must be imported.
    \nvar Database = require('nativescript-sqlcipher');
    \nThen create a new database:
    \nvar sqlcipher = new Database(dbname, options, callbackFn)
    \nwhere in nativescript-sqlite module, options only support readOnly property where now options can read key property as PRAGMA Key for database encryption.

    \n
      var options = {
        readOnly: false,
        key: 'Password'   // key must be a string
      }
    \n

    If property key is missing, or in a wrong format. Database would not be encrypted.

    \n

    Example

    \n
      var Database = require('nativescript-sqlcipher');

      var options = {
        key: 'Password'
      }
      var sqlcipher = new Database('myDatabase', options);  //sqlcipher is a Promise type
      sqlcipher
        .then( (db)=>{
          db.execSQL('CREATE TABLE my_first_table (name TEXT, age INTEGER);');
        }) 
        .catch( (err)=>{
          alert('Database creation failed.');
        })
    \n

    Update Log

    \n
    01 Dec 2017
    \n

    Fixed Compiling Error in Xcode 9

    \n
    06 Oct 2017
    \n

    Added all updates to sqlcipher.ios.js from NathanaelA/Nativescript-Sqlite.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-media":{"name":"@nativescript/canvas-media","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-touchid":{"name":"nativescript-touchid","version":"2.1.2","license":{"type":"MIT","url":"https://github.com/eddyverbruggen/nativescript-touchid/blob/master/LICENSE"},"readme":"

    NativeScript Touch ID Plugin

    \n
    \n

    Deprecated! Use nativescript-fingerprint-auth from now on (which has Android support!)

    \n
    \n\n

    Use when

    \n
      \n
    • You want to know if the device runing your app has enrolled for Touch ID,
      • \n
    • You want to leverage the TouchID sensor in your {N} app.
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-touchid
    \n

    Usage

    \n

    If you want a quickstart, clone our demo app.

    \n

    Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

    \n

    function: available

    \n
      var touchid = require(\"nativescript-touchid\");

      touchid.available().then(
          function(avail) {
            console.log(\"Available? \" + avail);
          }
      )
    \n

    function: verifyFingerprint

    \n
      touchid.verifyFingerprint({
        message: 'Scan yer finger' // optional, shown in the fingerprint dialog (default: 'Scan your finger').
      }).then(
          function() {
            console.log(\"Fingerprint was OK\");
          },
          function(error) {
            console.log(\"Fingerprint NOT OK\" + (error.code ? \". Code: \" + error.code : \"\"));
          }
      )
    \n

    function: verifyFingerprintWithCustomFallback

    \n
      touchid.verifyFingerprintWithCustomFallback({
        message: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
        fallbackMessage: 'Enter PIN' // optional, the button label when scanning fails (default: 'Enter password').
      }).then(
          function() {
            console.log(\"Fingerprint was OK\");
          },
          function(error) {
            console.log(\"Fingerprint NOT OK\" + (error.code ? \". Code: \" + error.code : \"\"));
          }
      )
    \n

    Security++

    \n

    Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

    \n

    So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

    \n
    touchid.available().then(
        function(avail) {
          if (avail) {
            touchid.didFingerprintDatabaseChange().then(
                function(changed) {
                  if (changed) {
                    // re-auth the user by asking for his credentials before allowing a fingerprint scan again
                  } else {
                    // call the fingerprint scanner
                  }
                }
            );
          }
        }
    )
    \n

    Changelog

    \n
      \n
    • 2.1.1 Xcode 8 compatibility - requires NativeScript 2.3.0+.
      • \n
    • 2.1.0 Added didFingerprintDatabaseChange for enhanced security.
      • \n
    • 2.0.0 Added verifyFingerprintWithCustomFallback, verifyFingerprint now falls back to the passcode.
      • \n
    • 1.2.0 You can now use the built-in passcode interface as fallback.
      • \n
    • 1.1.1 Added TypeScript definitions.
      • \n
    • 1.1.0 Added Android platform which will always return false for touchid.available.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"my-loopback-sdk-builder":{"name":"my-loopback-sdk-builder","version":"2.4.3","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n
      \n
    • Closed beta access will be active starting from July 2018.
      • \n
    \n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n
      \n
    • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
      • \n
    • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
      • \n
    • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
      • \n
    \n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pusher":{"name":"nativescript-pusher","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Pusher

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-pusher
    \n

    Usage

    \n
    const pusher = new Pusher(apiKey,options?);

    pusher.subscribeToChannelEvent('activities','running',(error,data)=>{});

    pusher.connect();
    \n

    Api key follow ➡\nlink to get\nyour api key

    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    connect(callback?:Function)voidConnects to Pusher.
    disconnect()voidDisconnect from Pusher.
    subscribeToChannel(channelName: string, callback?: Function)voidSubscribes to a public Channel with optional callback
    subscribeToChannelEvent(channelName: string,event: string,callback: Function)voidSubscribes to a public channel event.
    subscribePresence(channelName: string, callback?: Function)voidSubscribes to a PresenceChannel which requires authentication.
    subscribeToPrivateChannel(channelName: string, callback?: Function)voidSubscribes to a PrivateChannel which requires authentication.
    subscribeToPrivateChannelEvent(channelName: string,event: string,callback: Function)voidSubscribes to a private channel event.
    unsubscribe(channelName: string)voidUnsubscribes from a public channel using via the name of the channel.
    unsubscribePrivate(channelName: string)voidUnsubscribes from a private channel using via the name of the channel.
    unsubscribeAll()voidUnsubscribes from all channels.
    unsubscribeEvent(channelName: string, event: string)voidUnsubscribes a previously subscribed event on a public channel.
    unsubscribePrivateEvent(channelName: string, event: string)voidUnsubscribes a previously subscribed event on a private channel.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [ ] Push Notifications
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-socket.io":{"name":"nativescript-socket.io","version":"0.11.1","license":"Unlicense","readme":"

    nativescript-socket.io

    \n

    Full-featured Socket.IO client implementation for NativeScript.

    \n

    Status

    \n

    \"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

    \n

    This library is production-ready. Both Android and iOS implementations are stable and in sync.

    \n

    Please check releases and changelog and roadmap for more information.

    \n

    Dependencies

    \n

    Android: Socket.IO-client Java v1.*

    \n

    iOS: Socket.IO-Client-Swift v12.*

    \n

    Install

    \n
    tns plugin add nativescript-socket.io
    \n

    Usage

    \n
    const SocketIO = require('nativescript-socket.io');

    SocketIO.enableDebug(); // optionnal

    // or use your own debug function
    // SocketIO.enableDebug(myCustomDebugFunction);

    const options = {
      query: {
        token: 'SOME_TOKEN_HERE',
      },
      android: {
        // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
      }
      ios: {
        // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
      }
    };

    const socketio = SocketIO.connect('http://somewhere/namespace', options);

    socketio.on('connect', function(){
      console.log('connect');
    });

    socketio.on('hello', function(){
      console.log('hello', arguments);
    });

    socketio.on('request', function(info, ack){
      console.log('request', info);
      if (info === 'datetime') {
        ack(new Date());
      } elseif (info === 'random') {
        ack(Math.random());
      } else {
        ack(null);
      }
    });

    socketio.emit('hello', {
      username: 'someone',
    });

    socketio.emit('hello-ack', {
      username: 'someone',
    }, function ack(){
      console.log('hello-ack', arguments);
    })
    \n

    Usage with TypeScript

    \n

    import using either of the following:

    \n
    import * as SocketIO from \"nativescript-socket.io\"`

    // OR

    const SocketIO = require(\"nativescript-socket.io\")
    \n

    Demo

    \n
      \n
    1. \n

      replace all instance of 192.168.1.111 with your IP address or domain.

      \n
      2. \n
    2. \n

      start the socket.io demo server

      \n
      3. \n
    \n
    cd ./demo.server
    npm start
    \n
      \n
    1. build and run the app
      2. \n
    \n
    cd ./demo
    tns run android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-numeric-keyboard":{"name":"nativescript-numeric-keyboard","version":"5.0.2","license":"MIT","readme":"

    NativeScript Numeric Keyboard

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    For iOS. Falls back to the best platform-provided numeric keyboard on Android. Note that the iPad UI looks a bit sleeker than shown in the screenshot below.

    \n\n
    \n

    BREAKING CHANGE in plugin version 4.0.0: we used to extend a TextView, now it's a TextField, because I finally hacked my way around a problem that prevented a TextField from emitting a textChange event. Note that unless you use the decorate() function this will not affect you (bar some now-fixed UI glitches).

    \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    Since NativeScript 7

    \n
    tns plugin add nativescript-numeric-keyboard
    \n

    Before NativeScript 7

    \n
    tns plugin add nativescript-numeric-keyboard@4
    \n
    \n

    mind the @4 on the end, because since plugin version 5 we require NativeScript 7.

    \n
    \n

    Demo app

    \n

    Check out the demo to play with the keyboard. You can run it by typing npm run demo.iphone / npm run demo.ipad at the root of the project.

    \n

    How it works

    \n

    This plugin wraps a native keyboard library and extends a regular NativeScript TextField.\nYou can set any property you'd normally set on this widget (class, text, etc) and a few plugin-specific properties as well.

    \n

    You can either define the keyboard in XML or in code - use whichever tickles your fancy.

    \n

    Screenshot-driven documentation

    \n

    After adding the plugin you can add a namespace to your view (using NumKey below) and use the NumericKeyboardView tag to render a TextField powered by this plugin.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:NK=\"nativescript-numeric-keyboard\">
      <NK:NumericKeyboardView text=\"123.45\" maxLength=\"10\" returnKeyButtonBackgroundColor=\"#333333\" />
    </Page>
    \n

    For comparison sake we kick off with the default appearance of a TextField and then showcase the various properties this plugin exposes:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AppearanceDeclaration
    <TextField keyboardType="number" text="1.23"/>
    <TextField keyboardType="phone" text="12.34"/>
    <NK:NumericKeyboardView text="123.45"/>
    <NK:NumericKeyboardView returnKeyTitle="OK" text="234.56"/>
    <NK:NumericKeyboardView noDecimals="true" text="345"/>
    <NK:NumericKeyboardView noReturnKey="true" text="678"/>
    <NK:NumericKeyboardView locale="en_US" text="456.78"/>
    <NK:NumericKeyboardView locale="nl_NL" text="567,89"/>
    \n

    iPad appearance

    \n

    It's similar (although a bit cleaner than in these screenshots), except for some padding on both sides of the keyboard:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AppearanceDeclaration
    <TextField keyboardType="phone" text="12.34"/>
    <NK:NumericKeyboard text="123.45"/>
    \n

    Usage with Vue

    \n

    Open main.ts (or .js) and add this:

    \n
    Vue.registerElement('NumericKeyboard', () => require('nativescript-numeric-keyboard').NumericKeyboardView);
    \n

    Check this registerElement example, and this usage example.

    \n

    Usage with Angular

    \n

    Open app.module.ts and add:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"NumericKeyboard\", () => require(\"nativescript-numeric-keyboard\").NumericKeyboardView);
    \n

    For the views you can take a look at the examples above and just replace NumKey:NumericKeyboardView by NumericKeyboard :

    \n
    <NumericKeyboard noDecimals=\"true\"></NumericKeyboard>
    \n

    Programmatic usage

    \n

    Say you have a plain old TextField in your view:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
      <TextField id=\"myTextField\" maxlength=\"8\" keyboardType=\"number\" text=\"{{ myTextPlugin }}\" />
    </Page>
    \n

    Now you can enhance the TextField with this plugin by doing fi. this in the pageLoaded event you've defined in the <Page> tag above:

    \n
    import { NumericKeyboard } from \"nativescript-numeric-keyboard\";
    import { Color } from \"tns-core-modules/color\";

    export function pageLoaded(args: observable.EventData) {
      const page = <pages.Page>args.object;
      const textField = <TextField>page.getViewById(\"myTextField\");
      // or even textField.ios

      // this is an example with all possible properties, not that they make sense combined :)
      new NumericKeyboard().decorate({
        textField: textField,
        returnKeyTitle: \"Go!\",
        locale: \"en_US\", // or \"nl_NL\", or any valid locale really (to define the decimal char)
        noReturnKey: true,
        noDecimals: true,
        noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9
        returnKeyButtonBackgroundColor: new Color(\"red\"), // optional, set this to change the (default) blue color of the 'return' key
        onReturnKeyPressed: (): boolean => {
          // Your code here
          return true; // Return true to hide/collapse the keyboard, use false to keep the keyboard in place.
        }
      });
    }
    \n

    Note that on Android you'll just get a numeric keyboard as usual (since we specified keyboardType="number").

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-urban-airship":{"name":"@essent/nativescript-urban-airship","version":"9.0.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audioplay":{"name":"nativescript-audioplay","version":"1.0.1","license":"MIT","readme":"\n

    NativeScript Audio Play

    \n    \n

    NativeScript plugin to play audio files for Android and iOS.

    \n

    \n Ported from nativescript-audio (v4.3.5) to require lesser permissions for audio playback only. All credits go to original project contributors\n

    \n

    \n \n \"npm\"\n \n \n \"npm-downloads\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n

    \n

    Installation

    \n

    tns plugin add nativescript-audioplay

    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audioplay';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audioplay');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function() {
        console.log('finished playing');
      },
      errorCallback: function(errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function(args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position.
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    Credits

    \n

    nativescript-audio

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"generator-ng2-seed-advanced":{"name":"generator-ng2-seed-advanced","version":"1.0.0","license":"MIT","readme":"

    generator-ng2-seed-advanced \"NPM \"Build \"Dependency

    \n
    \n

    An advanced Angular2 project generator with support for ngrx/store, ng2-translate, angulartics2, lodash, NativeScript (native mobile), Electron (Mac, Windows and Linux desktop) and more.

    \n
    \n

    Installation

    \n

    First, install Yeoman and generator-ng2-seed-advanced using npm (we assume you have pre-installed node.js).

    \n
    npm install -g yo
    npm install -g generator-ng2-seed-advanced
    \n

    Generate your new project

    \n
    yo ng-2-seed-advanced
    \n

    Generate a new component

    \n
    \n

    Generate a new router

    \n
    \n

    Generate a new service

    \n
    \n

    Getting To Know Yeoman

    \n
      \n
    • Yeoman has a heart of gold.
      • \n
    • Yeoman is a person with feelings and opinions, but is very easy to work with.
      • \n
    • Yeoman can be too opinionated at times but is easily convinced not to be.
      • \n
    • Feel free to learn more about Yeoman.
      • \n
    \n

    License

    \n

    MIT © victorsosa

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular2-loki-fix":{"name":"angular2-loki-fix","version":"1.0.3","license":"MIT","readme":"

    angular2-loki

    \n

    Lokijs for angular2, Ionic 2, NativeScript with Angualr.

    \n

    How to use

    \n
    npm install angular2-loki
    \n
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { LokiModule } from './loki/loki.module';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        LokiModule,
        .....
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    \n
    import { Component } from '@angular/core';
    import { LokiService } from 'angular2-loki';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      constructor(private loki: LokiService) {
        let db = loki.init('mydb.txt');
        // db will export lokijs object
        // full docs at https://rawgit.com/techfort/LokiJS/master/jsdoc/Loki.html
        let users = db.addCollection('users');
        users.insert({
            name: 'Odin',
            age: 50,
            address: 'Asgard'
        });

        console.log(users.findOne({ name: 'Odin' }));
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dieover/jail-breaker":{"name":"@dieover/jail-breaker","version":"1.0.1","license":"Apache-2.0","readme":"

    @dieover/jail-breaker

    \n
    npm install @dieover/jail-breaker
    \n

    Usage

    \n

    This plugins use a rootbeer lib 0.1.0 of scottyab for Android to check if the Android is Rooted and for iOS always return false

    \n
    import { JailBreaker } from '@dieover/jail-breaker';

    ...

    isRooted(): void {
      if (JailBreaker.isRooted()) {
        // it's Rooted
      } else {
        // it'    s not Rooted
      }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sczerniawski/nativescript-social-login":{"name":"@sczerniawski/nativescript-social-login","version":"4.1.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Social Login

    \n

    NativeScript module for social (token based) log-ins.

    \n

    \"Donate\"

    \n

    Implementations

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderAndroidiOS
    GoogleYesYes
    FacebookYesYes
    TwitterNoNo
    \n

    License

    \n

    MIT license

    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Changes

    \n

    v1.4.x to 1.5.x

    \n

    Google

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.3.x to 1.4.x

    \n

    Facebook

    \n
      \n
    • Implemented login on iOS
      • \n
    \n

    v1.2.x to 1.3.x

    \n

    Google

    \n
      \n
    • The default value for ILoginConfiguration.google.isRequestAuthCode is (false) now. This behavior will not be changed in the future again!
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-social-login
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n
    Permissions
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <!-- ... -->

        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <!-- ... -->
    </manifest>
    \n
    Strings
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
        <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
    </resources>
    \n

    Setup Android Google Sign in for Debug Builds

    \n
      \n
    1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
      2. \n
    \n
    keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    \n

    The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

    \n
      \n
    1. Create an app here on Google Developer site.\n
        \n
      • Enter the App name. This can be anything but it will display to the user who is authenticating.
        • \n
      • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
        • \n
      • Next configure the Google services.
        • \n
      • Select Google Sign-In
        • \n
      • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
        • \n
      • Enable Google Sign-In\n
          \n
        • If only enabling Google Sign-In you do not need the configuration file inside your application.
          • \n
        \n
        • \n
      \n
      2. \n
    2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
      3. \n
    \n

    iOS

    \n

    GoogleService-Info.plist

    \n

    You should generate a GoogleService-Info.plist file for your application and add it to /app/App_Resources/iOS folder.\nYou can get this file and find more info here - https://developers.google.com/identity/sign-in/ios/start-integrating

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <!-- FACEBOOK AND GOOGLE LOGIN -->
    <key>CFBundleURLTypes</key>
        <array>
            <!-- GOOGLE START -->
    \t\t<dict>
    \t\t\t<key>CFBundleTypeRole</key>
    \t\t\t<string>Editor</string>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                    <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                    <!-- Get it from your GoogleService-Info.plist -->
                    <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t\t</array>
    \t\t</dict>
    \t\t<!-- GOOGLE END -->
    \t\t<!-- FACEBOOK START -->
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
            <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
                </array>
            </dict>
        </array>
        <key>CFBundleVersion</key>
        <string>1.0</string>
        <key>FacebookAppID</key>
        <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
        <key>FacebookDisplayName</key>
        <string>FacebookLoginDemo</string>
        <!-- FACEBOOK END -->
    \n

    https://developers.facebook.com/docs/ios

    \n

    Application main file

    \n

    Add this to the file where you start the application.\nAdd the following code just before application.start({ /* */ }); or platformNativeScriptDynamic().bootstrapModule(/* */) if you use Angular:

    \n
    TypeScript
    \n
    if (application.ios) {

      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
          let gglDelegate = false;

          try {
            const errorRef = new interop.Reference();
            GGLContext.sharedInstance().configureWithError(errorRef);

            const signIn = GIDSignIn.sharedInstance();
            gglDelegate = true;
          } catch (error) {
            console.log(error);
          }

          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

          return gglDelegate || fcbDelegate;
        }

        applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
          const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
          const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

          return fcbDelegate || gglDelegate;
        }
      }

      application.ios.delegate = MyDelegate;
    }
    \n
    JavaScript
    \n
    if (application.ios) {
        var MyDelegate = (function (_super) {
            __extends(MyDelegate, _super);
            function MyDelegate() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                var gglDelegate = false;
                try {
                    var errorRef = new interop.Reference();
                    GGLContext.sharedInstance().configureWithError(errorRef);
                    var signIn = GIDSignIn.sharedInstance();
                    gglDelegate = true;
                }
                catch (error) {
                    console.log(error);
                }
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
                return gglDelegate || fcbDelegate;
            };
            MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
                var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
                var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
                return fcbDelegate || gglDelegate;
            };
            return MyDelegate;
        }(UIResponder));
        MyDelegate.ObjCProtocols = [UIApplicationDelegate];
        application.ios.delegate = MyDelegate;
    }
    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    import SocialLogin = require(\"nativescript-social-login\");
    \n

    Initialize

    \n
    import Application = require(\"application\");
    import SocialLogin = require(\"nativescript-social-login\");

    if (Application.android) {
        Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
            let result = SocialLogin.init({
                activity: event.activity,
            });
        });
    }
    \n

    The init() function receives an (optional) object with the following structure:

    \n
    interface ILoginConfiguration {
        /**
         * The underlying custom activity to use.
         */
        activity?: android.app.Activity;

        /**
         * Facebook specific configuration.
         */
        facebook?: {
            /**
             * Initialize Facebook or not. Default: (true)
             */
            initialize?: boolean;
            /**
             * Should Logout current Facebook session or not. Default: (false)
             */
            clearSession?: boolean;
        }

        /**
         * Google specific configuration.
         */
        google?: {
            /**
             * Initialize Google or not. Default: (true)
             */
            initialize?: boolean;

           /**
            * The server client ID for requesting server auth token.
            */
            serverClientId?: string;

            /**
             * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
             * It will be set in authCode property of result object.
             *
             * If false (default), it will request for token id. it will be set in authToken property of result object.
             */
            isRequestAuthCode?: boolean;
        }

        /**
         * Fallback action for the result of the underlying activity.
         */
        onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
    }
    \n

    The result object that is returned by init() has the following structure:

    \n
    interface IInitializationResult {
        facebook: {
            error: any,
            isInitialized: boolean,
        },
        google: {
            error: any,
            isInitialized: boolean,
        },
        twitter: {
            error: any,
            isInitialized: boolean,
        }
    }
    \n

    The isInitialized can be (true) for succeeded, (false) for failed, (undefined) for "not supported" and (null) for providers that have been skipped.

    \n

    The error properties are only defined if an exception was thrown while initialization.

    \n

    Login

    \n

    If you want to use a login functions you have to submit a callback that receives an object with the following structure:

    \n
    interface ILoginResult {
        /**
         * Gets the auth token (if requested).
         */
        authToken?: string;

        /**
         * Offline auth code used by servers to request new auth tokens.
         */
        authCode?: string;

        /**
         * Gets the result code.
         */
        code: LoginResultType;

        /**
         * The display name.
         */
        displayName?: string;

        /**
         * First name of the user.
         */
        firstName?: string;

        /**
         * Last name of the user.
         */
        lastName?: string;

        /**
         * Gets the error (if defined).
         */
        error?: any;

        /**
         * The ID of the user.
         */
        id?: string;

        /**
         * The photo URL.
         */
        photo?: string;

        /**
         * Gets the underlying provider.
         */
        provider?: string;

        /**
         * The user token, like email address.
         */
        userToken?: string;
    }
    \n

    The following functions are implemented:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ProviderProvider
    loginWithFacebookFacebook
    loginWithGoogleGoogle
    \n

    Example

    \n
    SocialLogin.loginWithFacebook(
        (result) => {
            console.log(\"code: \" + result.code);
            console.log(\"error: \" + result.error);
            console.log(\"userToken: \" + result.userToken);
            console.log(\"displayName: \" + result.displayName);
            console.log(\"photo: \" + result.photo);
            console.log(\"authToken: \" + result.authToken);
        }
    );
    \n

    It is worth noting that for an Angular-based app, this callback should be wrapped within an NgZone to Angular handle updating the view properly when complete.

    \n
    import { Component, NgZone } from \"angular/core\";

    @Component({})
    class SigninComponent {
        constructor(private ngZone: NgZone) {}

        login() {
            SocialLogin.loginWithFacebook((result) => {
                this.ngZone.run(() => {
                    console.log(\"code: \" + result.code);
                    console.log(\"error: \" + result.error);
                    console.log(\"userToken: \" + result.userToken);
                    console.log(\"displayName: \" + result.displayName);
                    console.log(\"photo: \" + result.photo);
                    console.log(\"authToken: \" + result.authToken);
                });
            });
        }
    }
    \n

    There is also a great example by dgomezs that shows how to configure your app for Facebook.

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use SocialLogin.addLogger() function to add a callback that receives a message from the module:

    \n
    SocialLogin.addLogger(function(msg: any, tag: string) {
        console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
    });
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-play-pause-button":{"name":"nativescript-play-pause-button","version":"1.0.2","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-play-pause-button/blob/master/LICENSE"},"readme":"

    NativeScript Play Pause Button

    \n

    \"npm\"\n\"npm\"

    \n

    Android

    \n

    \"Nativescript

    \n

    iOS

    \n

    \"Nativescript

    \n

    Example:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
    \txmlns:PlayPause=\"nativescript-play-pause-button\"
    \tloaded=\"pageLoaded\">
    \t<StackLayout backgroundColor=\"#ececec\">
    \t\t<PlayPause:PlayPauseButton width=\"100\" height=\"100\" playPauseTap=\"PPTapped\"  buttonColor=\"#e11a60\" buttonBgColor=\"#ececec\" marginTop=\"100\"></PlayPause:PlayPauseButton>
    \t</StackLayout>
    </Page>
    \n

    The playPauseTap event contains event data with the state true is play and false is paused.

    \n

    ###Example

    \n
    export function PPTapped(args) {
        console.log(' Play Pause tapped : ' + args.eventData.state);
    }
    \n

    iOS only

    \n

    backgound color must be set with buttonBgColor or else the background will be black

    \n

    Libraries used:

    \n

    Android based on: https://github.com/recruit-lifestyle/PlayPauseButton

    \n

    iOS based on: https://github.com/suzuki-0000/AnimatablePlayButton

    \n

    Thank You Nathan Walker for helping get the iOS version up and running

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyframes":{"name":"nativescript-keyframes","version":"1.0.0","license":"MIT","readme":"

    NativeScript Facebook Keyframes plugin

    \n

    {N} wrapper for this awesome animation library

    \n\n

    Why use this?

    \n

    Good question, as NativeScript already has outstanding CSS animation support!

    \n

    Make sure you check that out as well, but if you or your designer is a sucker for After Effects\nto create crazily complex (and beautiful) animations then this is the plugin for you.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-keyframes
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device.

    \n

    API

    \n

    This plugin makes most sense when used from XML, which is done like this:

    \n
    <Page xmlns:Keyframes=\"nativescript-keyframes\">
      <Keyframes:KeyframesView
          class=\"keyframe\"
          width=\"200\"
          height=\"200\"
          source=\"keyframes/logo.json\">
      </Keyframes:KeyframesView>
    </Page>
    \n

    To make the image look transparent on Android currently,\nyou need to set the background color to that of the parent container, so in your css file add:

    \n
    .keyframe {
      background-color: #DDD;
    }
    \n

    The source property refers to a folder inside your app,\nso in this case we expect this file: app/keyframes/logo.json

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer":{"name":"nativescript-accelerometer","version":"3.0.0","license":"MIT","readme":"

    NativeScript Accelerometer Plugin

    \n

    Accelerometer plugin for NativeScript

    \n

    Installation

    \n
    tns plugin add nativescript-accelerometer
    \n

    This plugin is compatible with both NativeScript 2.x and 3.x versions.

    \n

    Usage

    \n
    var accelerometer = require(\"nativescript-accelerometer\");

    accelerometer.startAccelerometerUpdates(function(data) {
        console.log(\"x: \" + data.x + \"y: \" + data.y + \"z: \" + data.z);
    }, { sensorDelay: \"ui\" });
    \n

    Expected Values

    \n
      \n
    • x\n
        \n
      • Tilt Left from -1 to 0
        • \n
      • Tilt Right from 0 to 1
        • \n
      \n
      • \n
    • y\n
        \n
      • Tilt Forward from 0 to 1
        • \n
      • Tilt Back from -1 to 0
        • \n
      \n
      • \n
    • z\n
        \n
      • Face Up -1
        • \n
      • Face Down 1
        • \n
      • Sideways 0
        • \n
      \n
      • \n
    \n

    Options

    \n

    You can control how often the callback will be called by setting the sensorDelay option. The values are:

    \n
      \n
    • "normal" - Suitable for screen orientation changes. Around 0.2 seconds.
      • \n
    • "ui" - Suitable for the user interface. Around 0.06 seconds.
      • \n
    • "game" - Suitable for games. Around 0.02 seconds.
      • \n
    • "fastest" - Sensor data as fast as possible.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-dom/solidjs-types":{"name":"@nativescript-dom/solidjs-types","version":"1.0.15","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubeplayer":{"name":"nativescript-youtubeplayer","version":"3.0.1","license":"Apache-2.0","readme":"

    NativeScript YoutubePlayer

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer@2.2.6
      • \n
    \n

    Configuration

    \n

    Android

    \n

    Api key follow ➡\nlink to get\nyour api key

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

    \n
    <ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
    \n

    Angular

    \n
    import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

    @NgModule({
        imports: [
        YoutubePlayerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
    <YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    play()voidStarts video playback of the currently cued / loaded video.
    stop()voidStops and cancels loading of the current video.
    destroy()voidDestroy the video player and free resources.
    pause()voidPauses the currently playing video.
    isPlaying()falsebooleanReturns is current video is playing.
    toggleFullscreen()voidToggle fullscreen mode.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    srcnullstring
    • - [x]
    		Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
    optionsnullObject
    • - [ ]
    		Player options available IOS only
    isFullScreenfalseboolean
    • - [ ]
    		Returns if player is currently in fullscreen mode.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [x] IOS
      • \n
    • [x] toggleFullscreen IOS
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-menu":{"name":"nativescript-menu","version":"1.1.7","license":"MIT","readme":"

    nativescript-menu \"Build

    \n

    A plugin that adds a pop-up menu to NativeScript

    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:\ntns plugin add nativescript-menu

    \n

    Version lower then NativeScript 7

    \n

    tns plugin add nativescript-menu@1.1.6

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"screenshot\"screenshot
    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-menu\">
      <StackLayout class=\"p-20\">
        <Button id=\"menuBtn\" text=\"getMenu\" tap=\"{{ buttonTap }}\"/>
      </StackLayout>
    </Page>
    \n
    import { Menu } from \"nativescript-menu\";

    export class HelloWorldModel extends Observable {
      public message: string;
      private menu: Menu;

      constructor(public page: Page) {
        super();
      }

      buttonTap() {
        Menu.popup({
          view: this.page.getViewById(\"menuBtn\"),
          actions: [\"Example\", \"NativeScript\", \"Menu\"]
        })
          .then(action => {
            alert(action.id + \" - \" + action.title);
          })
          .catch(console.log);
      }
    }
    \n

    with custom options

    \n
    import { Menu } from \"nativescript-menu\";

    export class HelloWorldModel extends Observable {
      public message: string;
      private menu: Menu;

      constructor(public page: Page) {
        super();
      }

      buttonTap() {
        Menu.popup({
          view: this.page.getViewById(\"menuBtn\"),
          actions: [
            { id: \"one\", title: \"Example\" },
            { id: \"two\", title: \"NativeScript\", customOption: \"Hello\" },
            { id: \"three\", title: \"Menu\" }
          ]
        })
          .then(action => {
            alert(JSON.stringify(action));
          })
          .catch(console.log);
      }
    }
    \n

    API

    \n
      \n
    • MenuOptions
      • \n
    \n
    export interface MenuOptions {
      title?: string; // IOS Only
      message?: string; // IOS Only
      view: View;
      actions: object[] | string[];
      cancelButtonText?: string; // IOS Only
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    popup(options: MenuOptions): Promise<{id: number, title: string} | actionObject | boolean>Create a pop-up menu and show it
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/ns-onesignal":{"name":"@codesthings/ns-onesignal","version":"1.0.2","license":"Apache-2.0","readme":"

    @codesthings/ns-onesignal

    \n

    OneSignal integration for Nativescript. At the moment this plugin does not contain any custom code. It adds the required Onesignal libraries for iOS & Android, incl. their type definitions, which can then be integrated using the OneSignal docs.

    \n
    ns plugin add @codesthings/ns-onesignal
    \n

    Native Library Versions

    \n

    This plugin was last tested with the following versions of the OneSingal SDKs:

    \n

    iOS

    \n

    3.11.1\nPod: https://cocoapods.org/pods/OneSignal\nRepo: https://github.com/OneSignal/OneSignal-iOS-SDK

    \n

    Android

    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fortumo-sms":{"name":"nativescript-fortumo-sms","version":"1.1.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-fortumo-sms/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript fortumo SMS

    \n

    A NativeScript module providing access to Fortumo SMS Gateway.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-fortumo-sms
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n

    Keep sure to define the following permissions, activities and other data in your manifest file:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

        <uses-permission android:name=\"android.permission.INTERNET\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <!-- Open Stores -->
        <uses-permission android:name=\"org.onepf.openiab.permission.BILLING\" />
        <!-- Google -->
        <uses-permission android:name=\"com.android.vending.BILLING\" />
        <!-- Nokia -->
        <uses-permission android:name=\"com.nokia.payment.BILLING\" />
        <!-- Samsung -->
        <uses-permission android:name=\"com.sec.android.iap.permission.BILLING\" />
        <!-- Fortumo -->
        <uses-feature android:name=\"android.hardware.telephony\"
                      android:required=\"false\" />
        <uses-permission android:name=\"android.permission.RECEIVE_SMS\" />
        <uses-permission android:name=\"android.permission.SEND_SMS\" />
        <uses-permission android:name=\"android.permission.READ_PHONE_STATE\" />
        <!-- SlideME -->
        <uses-permission android:name=\"com.slideme.sam.manager.inapp.permission.BILLING\" />
        <!-- Skubit -->
        <uses-permission android:name=\"com.skubit.BILLING\" />

        <application>
            <!-- Amazon -->
            <receiver android:name=\"com.amazon.device.iap.ResponseReceiver\">
                <intent-filter>
                    <action android:name=\"com.amazon.inapp.purchasing.NOTIFY\"
                            android:permission=\"com.amazon.inapp.purchasing.Permission.NOTIFY\" />
                </intent-filter>
            </receiver>
            <!-- Amazon -->

            <!-- Fortumo -->
            <receiver android:name=\"mp.MpSMSReceiver\">
                <intent-filter>
                    <action android:name=\"android.provider.Telephony.SMS_RECEIVED\" />
                </intent-filter>
            </receiver>

            <service android:name=\"mp.MpService\" />
            <service android:name=\"mp.StatusUpdateService\" />

            <activity android:name=\"mp.MpActivity\"
                      android:configChanges=\"orientation|keyboardHidden|screenSize\"
                      android:theme=\"@android:style/Theme.Translucent.NoTitleBar\" />
            <!-- Fortumo -->
        </application>
        
    </manifest>
    \n

    Demo

    \n

    For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

    \n

    Otherwise ...

    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    var FortumoSMS = require('nativescript-fortumo-sms');
    \n

    Initialize

    \n

    Initialize the environment:

    \n
    function onPageLoaded(args) {
        FortumoSMS.init();
    }
    exports.onPageLoaded = onPageLoaded;
    \n

    The (optional) object that is submitted to the PayPal.init function has the following structure:

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
    requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 198612227
    \n

    Start purchase

    \n
    function buyProduct(args) {
        // configure
        var purchase = FortumoSMS.newPurchase()
            .setId('<PRODUCT-ID>')
            .setName('test product')
            .setSecret('<APP-SECRET>')
            .setDisplayName('A test product')
            .setAmount('1.95')
            .setCurrency('USD');

        // start purchase
        purchase.start(function(cbResult) {
            switch (cbResult.code) {
                case 0:
                    // SUCCESS
                    break;
                    
                case 1:
                    // CANCELLED
                    break;
                    
                case 2:
                    // FAILED
                    break;
                    
                case 3:
                    // PENDING
                    break;
                    
                case -1:
                    // \"unhandled exception\"
                    break;
            }
        });
    }
    exports.buyProduct = buyProduct;
    \n

    The purchase object that is created by FortumoSMS.newPurchase function has the following structure.

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    isConsumableGets if the product is consumable or not. Example: var c = purchase.isConsumable();
    getAmountGets the price. Example: var a = purchase.getAmount();
    getCreditsMultiplierGets the multiplier for the credits. Example: var m = purchase.getCreditsMultiplier();
    getCurrencyGets the currency. Example: var c = purchase.getCurrency();
    getIdGets the product ID. Example: var id = purchase.getId();
    getNameGets the product name. Example: var n = purchase.getName();
    getSecretGets the app secret. Example: var s = purchase.getSecret();
    setAmountSets the price. Example: payment.setAmount('1.25');
    setCreditsMultiplierSets the multiplier for the credits. Example: purchase.setCreditsMultiplier(1.23);
    setCurrencySets the currency. Example: purchase.setCurrency('USD');
    setIdSets the product ID. Example: purchase.setId('<PRODUCT-ID>');
    setIfConsumableSets if the product is consumable or not. Example: purchase.setIfConsumable(true);
    setNameSets the product name. Example: purchase.setName('My product');
    setSecretSets the app secret. Example: purchase.setSecret('<APP-SECRET>');
    startStarts the purchase process.
    \n
    start
    \n

    The callback that is submitted to the purchase.start method receives an object with the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    billing.statusThe billing status (if code = 0)
    codeThe result code. 0 = success, -1 = unhandled exception, 1 = canceled, 2 = failed, 3 = pending
    credit.amountThe credit amount (if code = 0)
    credit.currencyThe credit name (if code = 0)
    message.idThe message ID (if code = 0)
    payment.codeThe payment code (if code = 0)
    price.amountThe price amount (if code = 0)
    price.currencyThe price currency (if code = 0)
    product.nameThe product name (if code = 0)
    service.idThe service ID (if code = 0)
    skuSku (if code = 0)
    user.idThe user ID (if code = 0)
    \n

    Enhancements

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use FortumoSMS.addLogger function to add a callback that receives a message from the module:

    \n
    FortumoSMS.addLogger(function(msg) {
        console.log('[nativescript-fortumo-sms]: ' + msg);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-picker":{"name":"nativescript-picker","version":"2.1.2","license":"Apache-2.0","readme":"

    nativescript-picker

    \n

    \"Build\n\"npm\"\n\"npm\"\n\"Dependency\n\"peerDependencies

    \n

    A NativeScript plugin that provides ui element for picking an object/value from a list opened in a modal popup.

    \n\n

    Screenshots

    \n

    \"PickerField\"PickerField

    \n

    Installation

    \n
    tns plugin add nativescript-picker
    \n

    Configuration

    \n

    No additional configuration required!

    \n

    Usage

    \n

    To use the PickerField in markup you need to:

    \n
      \n
    • If you are developing a NativeScript Core app, you need to register the plugin namespace in the xml:
      • \n
    \n
    <Page
       xmlns=\"http://schemas.nativescript.org/tns.xsd\"
       xmlns:picker=\"nativescript-picker\">
       <picker:PickerField hint=\"Click here\" items=\"{{ pickerItems }}\"/>
    ...
    \n
      \n
    • If you are developing a NativeScript Angular app, you need to import the plugin module in the module of your component:
      • \n
    \n
    import { NativeScriptPickerModule } from \"nativescript-picker/angular\";
    ...
    @NgModule({
        imports: [
            NativeScriptPickerModule,
            ...
        ],
        ...
    \n

    Then you will be able to declare the fields in the html of your component:

    \n
    <PickerField hint=\"Click here\" [items]=\"pickerItems\"></PickerField>
    \n
      \n
    • If you are developing a NativeScript Vue app, you need to install the plugin in you app.js file:
      • \n
    \n
    import Vue from \"nativescript-vue\";
    import { PickerField } from 'nativescript-picker/vue';

    Vue.use(PickerField);
    \n

    Then you will be able to declare the fields in the template of your component:

    \n
    <PickerField hint=\"Click here\"></PickerField>
    \n

    Features

    \n

    PickerField

    \n

    The PickerField is a NativeScript TextField which means that any functionality the default TextField provides is also available in the PickerField component. The only difference is that by design it is in "read-only" mode, or simply put you cannot change its text by input or select that text. Changing the text of the PickerField is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it.

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    pickerTitleThe title of the modal view.
    itemsThe source collection used to populate the list of the modal view.
    itemTemplateТhe UI template for list view items of the list of the modal view.
    modalAnimatedOptional parameter specifying whether to show the modal view with animation.
    textFieldThe 'property' of the object from the 'items' collection that will be used by the 'text' property of the PickerField.
    valueFieldThe 'property' of the object from the 'items' collection that will be used by when setting the 'selectedValue' property of the PickerField.
    selectedValueThe object selected from the list in the modal view.
    selectedIndexThe index of the object from the 'items' collection that has been selected from the list in the modal view.
    iOSCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
    iOSCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
    androidCloseButtonPositionThe position of the 'close' button of the ActionBar of the modal view.
    androidCloseButtonIconThe icon of the 'close' button of the ActionBar of the modal view.
    \n

    Styling

    \n

    PickerField

    \n

    The PickerField can be targeted in CSS through its element selector and additionally by setting a class. The PickerField also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the PickerPage selector and through it style all picker modals with selectors like PickerPage ActionBar and PickerPage ListView. In addition to that, if you set a class on the PickerField, it will be transferred on the PickerPage and with it you can style individual modals.

    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"paygilant-native-script-plugin":{"name":"paygilant-native-script-plugin","version":"2.2.40","license":"Apache-2.0","readme":"

    paygilant-native-script-plugin

    \n
    ns plugin add paygilant-native-script-plugin
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-downloader":{"name":"nativescript-downloader","version":"2.1.5","license":"Apache-2.0","readme":"

    NativeScript Downloader

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-downloader
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-downloader@1.1.0
      • \n
    \n

    Usage

    \n

    TypeScript

    \n
    import { Downloader } from 'nativescript-downloader';
    Downloader.init(); // <= Try calling this after the app launches to start the downloader service
    Downloader.setTimeout(120); //Increase timeout default 60s
    \n
    import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';
    const downloader = new Downloader();
    const imageDownloaderId = Downloader.createDownload({
      url:
        'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
    });

    downloader
      .start(imageDownloaderId, (progressData: ProgressEventData) => {
        console.log(`Progress : ${progressData.value}%`);
        console.log(`Current Size : ${progressData.currentSize}%`);
        console.log(`Total Size : ${progressData.totalSize}%`);
        console.log(`Download Speed in bytes : ${progressData.speed}%`);
      })
      .then((completed: DownloadEventData) => {
        console.log(`Image : ${completed.path}`);
      })
      .catch(error => {
        console.log(error.message);
      });
    \n

    JavaScript

    \n
    var Downloader = require('nativescript-downloader').Downloader;
    Downloader.Downloader.init(); // <= Try calling this after the app launches to start the downloader service
    Downloader.setTimeout(120); //Increase timeout default 60s
    \n
    var Downloader = require('nativescript-downloader').Downloader;
    var downloader = new Downloader();
    var imageDownloaderId = downloadManager.createDownload({
      url:
        'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
    });

    downloader
      .start(imageDownloaderId, progressData => {
        console.log(`Progress : ${progressData.value}%`);
      })
      .then(completed => {
        console.log(`Image : ${completed.path}`);
      })
      .catch(error => {
        console.log(error.message);
      });
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    createDownload(options: DownloadOptions)stringCreates a download task it returns the id of the task
    getStatus(id: string)StatusCodeGets the status of a download task.
    start(id: string, progress?: Function)Promise<DownloadEventData>Starts a download task.
    resume(id: string)voidResumes a download task.
    cancel(id: string)voidCancels a download task.
    pause(id: string)voidPauses a download task.
    getPath(id: string)voidReturn the path of a download task.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    ##Angular

    \n

    Injection Root Component

    \n
    import { Downloader } from 'nativescript-downloader';
    ....
    ngOnInit() {
     Downloader.init(); // <= Try calling this after the app launches to start the downloader service
    }
    ...
    \n

    Custome Downloader option

    \n
      // Request format for Downlaoder
                 DownloadOptions {
                 url: string;
                 query?: Object | string;
                 headers?: Object;
                path?: string;
                 fileName?: string;
              }
    \n

    Service File To use any where

    \n
    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs';
    import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';



    @Injectable({
        providedIn: 'root',
    })


    export class DataDownLoadService {
        public database: any;
        downloader: Downloader = new Downloader();
        constructor() { }


        /**
        * @ngdoc method
        * @name downloadDb
        * @description  download generic method for nay file 
        * @memberof DataDownLoadService
        * @param apiUrl : - https://myserver.com/mypath
        * @param filename :- myfile.zip ...
        * @param downloadlocation : mobile local location
        */
        downloadFile(apiUrl, filename, downloadlocation) {
            const subject = new Subject<any>();
        
            // Request format for Downlaoder
            //      DownloadOptions {
            //     url: string;
            //     query?: Object | string;
            //     headers?: Object;
            //     path?: string;
            //     fileName?: string;
            //   }

            // Prepare the header with token work
        
            const headerHttp = {
                \"Content-Type\": \"application/json\",
                \"Authorization\": 'Bearer ' + 'Token...'
            }

            const url =  apiUrl;

            const zipDownloaderId = this.downloader.createDownload({
                url: url,
                headers: headerHttp,
                path: downloadlocation,
                fileName: filename
            });

            this.downloader
                .start(zipDownloaderId, (progressData: ProgressEventData) => {
                    console.log(`Progress : ${progressData.value}%`);
                    console.log(`Current Size : ${progressData.currentSize}%`);
                    console.log(`Total Size : ${progressData.totalSize}%`);
                    console.log(`Download Speed in bytes : ${progressData.speed}%`);
                })
                .then((completed: DownloadEventData) => {
                    console.log(`zip file saved at : ${completed.path}`);
                  
                   
                    
                    subject.next(true);
                  
                })
                .catch(error => {
                    console.log('downloadDb', error.message);
                    subject.error(error);

                });

            return subject.asObservable();
        }



    }
    \n

    TODO

    \n
      \n
    • [ ] Local Notifications
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-popup":{"name":"@triniwiz/nativescript-popup","version":"2.0.0","license":"Apache-2.0","readme":"

    Nativescript nativescript-popup

    \n
    npm install @triniwiz/nativescript-popup
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loki-nativescript-adapter":{"name":"loki-nativescript-adapter","version":"1.0.3","license":"MIT","readme":"

    Loki NativeScript adapter

    \n
    \n

    A Loki adapter for NativeScript apps.

    \n
    \n

    What is Loki

    \n
    \n

    LokiJS is a document oriented database written in javascript, published under MIT License. Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism. - LokiJS

    \n
    \n

    Demo

    \n

    Watch the example application on YouTube

    \n

    Installation

    \n

    Run the following command from the /app directory of your project:

    \n
    $ npm install lokijs --save
    $ npm install loki-nativescript-adapter --save
    \n

    Usage

    \n
    // Requirements
    var fs = require(\"file-system\");
    var Loki = require(\"./node_modules/lokijs/src/lokijs.js\");
    var LokiNativeScriptAdapter = require(\"./node_modules/loki-nativescript-adapter/loki-nativescript-adapter.js\");

    // Setup Loki
    var path = fs.path.join(fs.knownFolders.currentApp().path, \"database.db\");
    var db = new Loki(path, {
        adapter: new LokiNativeScriptAdapter()
    });

    // Save some movies
    var movies = db.addCollection(\"movies\");
    movies.insert({ title: \"Ghost Busters\", year: 1984 });
    movies.insert({ title: \"Ghost Busters II\", year: 1989 });
    movies.insert({ title: \"Ghost Busters\", year: 2016 });
    console.log(movies.data);
    db.saveDatabase();

    // Load and find some movies
    db.loadDatabase({}, function() {
        var movies = db.getCollection(\"movies\");
        console.log(movies.find({ title: \"Ghost Busters\" }));
    });
    \n

    To go deeper in Loki have a look at the documentation.

    \n

    \"npm

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/swift-ui":{"name":"@nativescript/swift-ui","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-platform-free":{"name":"nativescript-platform-free","version":"1.3.2","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    nativescript-platform-free

    \n

    A NativeScript plugin to easily deal with and detect which platform you are on. Since the original plugin requires a subscription now, this plugin is my attempt to maintain it to the point where it does not break.

    \n

    Developed by

    \n

    \"MasterTech\"

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Requirements

    \n

    Any version of NativeScript

    \n

    Installation

    \n

    tns plugin add nativescript-platform

    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    var myPlatform = require( \"nativescript-platform\" );
    if (myPlatform.android) {
      // do android specific stuff
    }
    \n

    please note you can also simple do, and then the nsPlatform will be available globally everywhere:

    \n
    require( \"nativescript-platform\" );
    if (nsPlatform.ios) {
     // do ios specific stuff
    }
    \n

    nsPlatform will be declared globally. My recommendation is just to include it in the app.js and then use it everywhere.

    \n

    You ask, how exactly does this help?

    \n

    This wraps up several simple ways to check for the platform you are on. This comes up commonly when you are trying to do stuff on just one platform.

    \n

    Breaking changes

    \n

    Removed initial windows phone support, its been 4 years -- I don't think NativeScript will ever build actual windows phone apps.

    \n

    API

    \n

    Functions

    \n
      \n
    • .isAndroid();
      • \n
    • .isIOS();\nreturns true or false depending on the platform it is on\nExample:
      • \n
    \n
    if (nsPlatform.isAndroid()) { /* do my android specific stuff */ }
    \n
      \n
    • .hasSoftNav();\nreturns if device is using Soft Navigation.
      • \n
    \n

    Variables

    \n
      \n
    • .ios
      • \n
    • .android
      • \n
    • Is set to either true or false for the platform it is on\nExample:
      • \n
    \n
    if (nsPlatform.ios) { /* do my ios specific stuff */ }
    \n

    Switch Statement support

    \n

    .platform

    \n
      \n
    • .type.IOS
      • \n
    • .type.ANDROID\nExample:
      • \n
    \n
    switch (nsPlatform.platform) {
      case nsPlatform.type.IOS:     // Do iOS stuff
      case nsPlatform.type.ANDROID: // Do Android stuff
    }
    \n

    .deviceType

    \n

    Tablet or Phone

    \n

    .screen

    \n
      \n
    • .width - Width of Screen (DIP)
      • \n
    • .height - Height of Screen (DIP)
      • \n
    • .scale - Scale of Screen (DIP)
      • \n
    • .widthPixels - Width of Screen (Pixels)
      • \n
    • .heightPixels - Height of Screen (Pixels)
      • \n
    \n

    .device

    \n
      \n
    • .emulator - True or False
      • \n
    • .model - Model number of device
      • \n
    • .name - Name of device (might be the same as model)
      • \n
    • .manufacturer - Manufacturer of the device
      • \n
    • .notch - true or false, if device has a notch.
      • \n
    • .buttonLess - true or false, APPLE only -- if the device has no home button. ( .hasSoftNav() supports both android and ios )
      • \n
    \n
    console.log(nsPlatform.manufacturer, nsPlatform.name);
    // Outputs: \"Apple iPhoneX\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pspdfkit":{"name":"nativescript-pspdfkit","version":"4.3.4","license":"Apache-2.0","readme":"

    Nativescript PSPDFKit

    \n

    \"npm\"\n\"npm\"

    \n

    NativeScript implementation of PSPDFKit (https://pspdfkit.com/). Currently for iOS only, Android support is coming soon.

    \n

    Please note that this plugin is not production ready. You will have to fork this project to get your licensed version POD installed correctly (currently).

    \n

    Installation

    \n

    npm install nativescript-pspdfkit

    \n

    Example Implementation

    \n

    Android

    \n

    Modify the activity entry within the AndroidManifest.xml file found in the app/App_Resources/Android/ folder

    \n
    <activity
            android:name=\"com.github.TeamMaestro.TNSFragmentActivity\"
            android:label=\"@string/title_activity_kimera\"
            android:configChanges=\"keyboardHidden|orientation|screenSize\">

            <activity android:name=\"com.pspdfkit.ui.PdfActivity\" android:windowSoftInputMode=\"adjustNothing\" />
            <meta-data android:name=\"pspdfkit_license_key\" android:value=\"youKey\"/>
    \n

    Modify the defaultConfig entry within the app.gradle file found in the app/App_Resources/Android/ folder

    \n
    defaultConfig {
        minSdkVersion 19
    \n
    import {TNSPSPDFKit} from 'nativescript-pspdfkit';
    let licenseKey = '';
    let pspdfkit = new TNSPSPDFKit(licenseKey);
    /*
     TNSPSPDFKitOptions {
      scrollDirection?: 'vertical' | 'horizontal';
      backgroundColor?: string;
      spreadFitting?: 'adaptive' | 'fit' | 'fill';
      thumbnailBar?: 'scrollable' | 'scrubber' | 'none';
      scrubberBar?: 'verticalRight' | 'verticalLeft';
      thumbnailSize?: string;
      pageMode?: 'automatic' | 'single' | 'double';
      minZoom?: number;
      maxZoom?: number;
    }

    */
    pspdfkit.display('~/example.pdf',{ scrollDirection: 'vertical' });
    \n

    IMPORTANT: Make sure you include xmlns:pspdfkit="nativescript-pspdfkit" on the Page tag

    \n
    <pdfView:TNSPSPDFView scrollDirection=\"horizontal\" scrubberBar=\"verticalRight\" thumbnailBar=\"scrubber\" spreadFitting=\"fill\" src=\"~/example.pdf\"/>
    \n

    Angular

    \n
    import { TNSPSPDFView } from 'nativescript-pspdfkit';
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"TNSPSPDFView\", () => require(\"nativescript-pspdfkit\").TNSPSPDFView);
    \n
    <TNSPSPDFView selectedIndexChange=\"pageChanged\" scrollDirection=\"horizontal\" scrubberBar=\"verticalRight\" thumbnailBar=\"scrubber\" spreadFitting=\"fill\" src=\"~/example.pdf\"></TNSPSPDFView>
    \n

    Webpack\nSetup worker loader -> link

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    scrollDirectionverticalstring
    • - [ ]
    scrubberBarhorizontalstring
    • - [ ]
    thumbnailBarnoneboolean
    • - [ ]
    spreadFitting"adaptive"string
    • - [ ]
    thumbnailSizeDefaults to 88x125 on iPad and 53x75 on iPhonestring
    • - [ ]
    pageModeautomaticstring
    • - [ ]
    minZoom1number
    • - [ ]
    maxZoom20number
    • - [ ]
    searchResultZoom2number
    • - [ ]
    formsEnabledtrueboolean
    • - [ ]
    srcnullstring
    • - [x]
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geocoding":{"name":"nativescript-geocoding","version":"3.0.0","license":"Apache-2.0","readme":"

    NativeScript Geocoding \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"

    \n

    Forward-geocoding requests take a user-readable address and find the corresponding latitude and longitude value and may also return additional information about the specified location, such as a point of interest or building at that location.

    \n

    Note\nVersion 3 and is for NativeScript 7 - use version 2 for NativeScript 4/5/6.

    \n

    \"\"

    \n

    Installation

    \n

    In a command prompt / terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-geocoding
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn the demo-angular folder you can find the usage of the plugin for an Angular application (demo-angular/src/app/home/home.component.ts.

    \n

    Steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import * as geocoding from \"nativescript-geocoding\";
    \n

    Javascript

    \n
    var geocoding = require(\"nativescript-geocoding\");
    \n

    Call the plugin

    \n
      geocoding.getLocationFromName('Copenhagen').then(loc => {
          console.log('Found ', loc);
      }, function (e) {
          console.log(\"Error: \" + (e.message || e));
      });
    \n

    or in case you may want to treat possible, multiple hits

    \n
    geocoding.getLocationListFromName(searchBar.text, 5).then(locations => {
                console.log('Found ', locations.length);
                if (locations.length > 0) {
                    this.location = locations[0];
                }
            }, function (e) {
                console.log('Error: ' + (e.message || e));
            });
    \n

    Demo

    \n

    To run the Angular demo:

    \n
    $ cd nativescript-geocoding/src
    $ npm run demo.ios
    $ npm run demo.android
    \n

    Native APIs

    \n

    Android implementation

    \n
      \n
    • Details: https://developer.android.com/reference/android/location/Geocoder
      • \n
    \n

    Returns an array of Addresses that are known to describe the named location, which may be a place name\nsuch as "Dalvik, Iceland", an address such as "1600 Amphitheatre Parkway, Mountain View, CA",\nan airport code such as "SFO", etc.. The returned addresses will be localized for the locale provided\nto this class's constructor.

    \n

    The query will block and returned values will be obtained by means of a network lookup. The\nresults are a best guess and are not guaranteed to be meaningful or correct. It may be useful to\ncall this method from a thread separate from your primary UI thread.

    \n

    Parameters\nlocationName String: a user-supplied description of a location\nmaxResults int: max number of results to return. Smaller numbers (1 to 5) are recommended

    \n

    iOS implementation

    \n
      \n
    • Details: https://developer.apple.com/documentation/corelocation/converting_between_coordinates_and_user-friendly_place_names
      • \n
    \n

    Depending on the precision of the user-provided information, you may receive one result or multiple results.\nFor example, passing a string of "100 Main St., USA" may return many results unless you also specify a search\nregion or additional details. To help you decide which result is correct, the geocoder actually returns\nCLPlacemark objects, which contain both the coordinate and the original information that you provided.

    \n

    Notes

    \n
      \n
    • \n

      For Android, the minimum API level is 21 in order to get detailed location info.

      \n
      • \n
    • \n

      On iOS you may receive this message

      \n
      • \n
    \n
     Error: iOS CLGeocoder error : The operation couldn’t be completed. (kCLErrorDomain error 8.)
    \n

    if the CLGeocoder was not able to find anything for the search string.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude":{"name":"nativescript-wikitude","version":"7.2.1-1.8.5","license":"Apache-2.0","readme":"

    nativescript-wikitude

    \n

    \"npm

    \n

    \"NPM\"

    \n

    Provides nativescript access to Wikitude AR.

    \n

    Versioning is as follows ${wikitude-version}-${plugin-version}\nexample : 7.2.1-1.1.0 is Wikitude Version 7.2.1, Plugin version 1.1.0.

    \n

    Screenshots coming soon!

    \n

    Prerequisites / Requirements

    \n

    Permissions

    \n

    before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

    \n

    Running the Demo

    \n

    WE include a very basic AR Sample in the Demo app,

    \n

    but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

    \n

    and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

    \n

    Installation

    \n

    to install for your project you can use :

    \n
    tns plugin add nativescript-wikitude
    \n

    for Nativescript Angular Projects you will need to import the Element in your app.component.ts

    \n
        import { Wikitude } from 'nativescript-wikitude';
        // ...snip....
        registerElement('Wikitude', () => Wikitude);
    \n

    and then in your ar.component.html :

    \n
        <Wikitude [url]=\"WikitudeURL\" 
                  (WorldLoaded)=\"onWorldLoaded($event)\" 
                  (JSONReceived)=\"onJSON($event)\">
        </Wikitude>
    \n

    and in your ar.component.ts:

    \n
        import { Wikitude } from 'nativescript-wikitude';

        // ...snip...

        WikitudeInstance: Wikitude;
        WikitudeURL: string = \"~/wikitude_world/index.html\";

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        }

        onJSON($event) {
            console.log(JSON.stringify($event.data));
        }

        // ...snip...
    \n

    and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

    \n
        (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
    \n

    And Voila! you have Wikitude AR working in your Nativescript Application!

    \n

    Usage

    \n

    using your own location provider

    \n

    by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

    \n

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
            this.WikitudeInstance.disableLocationProvider();
        }
    \n

    Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

    \n
        this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
    \n

    this is useful if you want a single location state.

    \n

    once you have disabled it you can re-enable it with the following :

    \n
        this.WikitudeInstance.enableLocationProvider();
    \n

    TODO

    \n
      \n
    • Plugins API Exposure, not sure how to go about this, Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API (an Example of a plugin would be face recognition). I'm unsure how to go about allowing users to do this. any advice would be appreciated...
      • \n
    • Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
      • \n
    • Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
      • \n
    • a better way to set the Wikitude LicenseKey and Required Features.
      • \n
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefault valueDescription
    url""the URL of the Wikitude "ARWorld"
    features` Features.ImageTrackingFeatures.InstantTracking
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionArgumentsDescription
    setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
    hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
    loadUrl()url: stringloads the URL in the Wikitude WebView
    reload()reloads the current Wikitude WebView
    clearCache()clears the wikitude Cache
    toggleFlash()Toggles the Devices Flash-light
    switchCamera()switches the Camera that wikitude uses
    captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
    disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
    enableLocationProvider()enables the location Provider
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescriptionType
    WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
    WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
    JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
    ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
    ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
    \n

    all can be imported from the index.d.ts.

    \n

    License

    \n

    Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-t3b-printer":{"name":"@ticnat/nativescript-t3b-printer","version":"1.0.7","license":"Apache-2.0","readme":"

    @ticnat/nativescript-t3b-printer

    \n

    Supported platforms:\n#iOS

    \n
    ns plugin add @ticnat/nativescript-t3b-printer
    \n

    Usage

    \n
    this.printer = new T3bPrinter();

    this.printer.connectWifi(\"192.168.1.240\");

    this.printer.printTxt(\"some text\");
    \n

    for full example see demo.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules":{"name":"tns-core-modules","version":"6.5.27","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-youtubeplayer":{"name":"@triniwiz/nativescript-youtubeplayer","version":"4.2.0","license":"Apache-2.0","readme":"

    Nativescript YoutubePlayer

    \n
    npm install @triniwiz/nativescript-youtubeplayer
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-messaging":{"name":"nativescript-wear-messaging","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Wear Messaging Plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Adding support for Wear Messaging using the MessageClient API.\nThis plugin is intended to be used to communicate between a handled app and an Android Wear app.

    \n

    Only Android Supported

    \n

    Installation

    \n

    Install the plugin:

    \n
    tns plugin add nativescript-wear-messaging
    \n

    Usage

    \n

    The idea of this plugin is to communicate between a wear device and a handled device. Both can act as receiver or sender, in fact, that's the\nmost common usage way and the one explained here. You need two apps that will communicate to each other, here is described how you can configure this plugin\nin both:

    \n

    In the Wear app

    \n

    Add the following to your AndroidManifest.xml inside your <application> tag. It will create the service listener that will be waiting\nfor the messages sent by the handled app.

    \n
    <service android:name=\"com.berriart.android.nativescriptwearmessaging.MessageListenerService\">
        <intent-filter>
            <action android:name=\"com.google.android.gms.wearable.MESSAGE_RECEIVED\" />
            <data android:scheme=\"wear\" android:host=\"*\" />
        </intent-filter>
    </service>
    \n

    Since multiple wearables can be connected to the handheld device, the wearable app needs to determine that a connected node\nis capable of launching the activity. In your wearable app, advertise that the node it runs on provides specific capabilities.\nWe will use this later when sending messages from the handled device.

    \n

    Create a wear.xml file inside app/App_Resources/Android/values to advertise the capabilities

    \n
    <resources>
        <string-array name=\"android_wear_capabilities\">
            <item>name_of_your_capabilty_wear</item>
        </string-array>
    </resources>
    \n

    Sending messages to the handled app:

    \n
    import { WearMessaging } from 'nativescript-wear-messaging';

    let client = new WearMessaging();
    client.send(\"/some/path\", \"some content\", \"name_of_your_capabilty_handled\"); // Last parameter is the capablity name of then handled device
    \n

    Receiving messages to from the handled app:

    \n
    import { WearMessaging } from 'nativescript-wear-messaging';

    let client = new WearMessaging();
    client.registerListener((path: string, content: string) => {
        if (path === \"/some/path\") {
            console.log(path + \" \" + content);
        }
    });
    client.startListener();
    \n

    *Include the following to your references.d.ts file if you are getting this error: TS2304: Cannot find name 'com'.

    \n
    /// <reference path=\"./node_modules/nativescript-wear-messaging/declarations.d.ts\" /> Needed for wear-messaging
    \n

    In the handled app

    \n

    Add the following to your AndroidManifest.xml inside your <application> tag. It will create the service listener that will be waiting\nfor the messages sent by the wear app.

    \n
    <service android:name=\"com.berriart.android.nativescriptwearmessaging.MessageListenerService\">
        <intent-filter>
            <action android:name=\"com.google.android.gms.wearable.MESSAGE_RECEIVED\" />
            <data android:scheme=\"wear\" android:host=\"*\" />
        </intent-filter>
    </service>
    \n

    Since multiple wearables can be connected to the handheld device, the wearable app needs to determine that a connected node\nis capable of launching the activity. In your wearable app, advertise that the node it runs on provides specific capabilities.\nWe will use this later when sending messages from the handled device.

    \n

    Create a wear.xml file inside app/App_Resources/Android/values to advertise the capabilities

    \n
    <resources>
        <string-array name=\"android_wear_capabilities\">
            <item>name_of_your_capabilty_handled</item>
        </string-array>
    </resources>
    \n

    Sending messages to the wear app:

    \n
    import { WearMessaging } from 'nativescript-wear-messaging';

    let client = new WearMessaging();
    client.send(\"/some/path\", \"some content\", \"name_of_your_capabilty_wear\"); // Last parameter is the capablity name of then handled device
    \n

    Receiving messages to from the wear app:

    \n
    import { WearMessaging } from 'nativescript-wear-messaging';

    let client = new WearMessaging();
    client.registerListener((path: string, content: string) => {
        if (path === \"/some/path\") {
            console.log(path + \" \" + content);
        }
    });
    client.startListener();
    \n

    *You should read the official Android doc anyway.

    \n

    License

    \n

    Apache License Version 2.0, January 2018

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"framework-consumer":{"name":"framework-consumer","version":"1.0.2","license":"Apache-2.0","readme":"

    framework-consumer

    \n
    npm install framework-consumer
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@erichlz/nativescript-pseudo-bubble-notification":{"name":"@erichlz/nativescript-pseudo-bubble-notification","version":"1.1.2","license":"Apache-2.0","readme":"

    @erichlz/nativescript-pseudo-bubble-notification

    \n
    ns plugin add @erichlz/nativescript-pseudo-bubble-notification
    \n

    Usage

    \n

    this plugin is using only with angular

    \n
    import { PseudoBubbleNotification, ETYPE_INIT_POSITION, OptionsNotification } from '@erichlz/nativescript-pseudo-bubble-notification';
    \n
      baseShowBubble(position, posName) {
        PseudoBubbleNotification.showBubbleFloating({
          image: '~/plugin-demos/hause.png',
          onTap: () => {
            console.log('on Tap Bubble: ', posName);
            console.log('test pseudo-bubble-notification!');
          },
          position: position,
            text:\"1\";
            show:true;
        }, {
          text:\"test message\";
          backgroundColor:\"blue\";
          textColor:\"white\";
          timeOpenShow:1000;
          timeCloseShow:3000;
        });
      }
    \n

      BubbleWhitSpecificPosition(){
        PseudoBubbleNotification.showBubbleFloating({
          image: '~/plugin-demos/hause.png',
          onTap: () => {
            console.log('on Tap Bubble: Specific Position');
            console.log('test pseudo-bubble-notification!');
          },
          positionX: 100,
          positionY: 140
        });
      }
    \n
      BubbleWhitNotification(){
        const options:OptionsNotification = {
          channelId: 'Chanel01',
    \t\t  contentText: 'Body Content Notification',
    \t\t  titleNotification: 'Title',
          notifyId: 111,
          optionBubble: {
            image: '~/plugin-demos/hause.png',
            onTap: () => {
              console.log('on Tap Bubble ');
              console.log('test pseudo-bubble-notification!');
            },
          },    
        } 

        PseudoBubbleNotification.showNotification(options)

        PseudoBubbleNotification.showNotification(options,  {
          text:\"test message\";
          backgroundColor:\"blue\";
          textColor:\"white\";
          timeOpenShow:1000;
          timeCloseShow:3000;
        })
      }
    \n

    the priorities you can use are as follows:

    \n
      \n
    • DEFAULT
      • \n
    • LOW
      • \n
    • MIN
      • \n
    • HIGH
      • \n
    • MAX\nWhich are in the enum ETYPE_PRIORITY
      • \n
    \n

    The Position initial you can use are as follows

    \n
      \n
    • TOP_CENTER,
      • \n
    • TOP_LEFT,
      • \n
    • TOP_RIGTH,
      • \n
    • MIDDLE_CENTER,
      • \n
    • MIDDLE_LEFT,
      • \n
    • MIDDLE_RIGTH,
      • \n
    • BOTTOM_CENTER,
      • \n
    • BOTTOM_LEFT,
      • \n
    • BOTTOM_RIGTH\nWhich are in the enum ETYPE_INIT_POSITION
      • \n
    \n
    interface OptionsBubble {
      image: string;
      onTap: Function;
      colorClear?: string;
      position?: ETYPE_INIT_POSITION;
      positionY?: number;
      positionX?: number;
    }

    interface OptionsNotification {
      channelId: string;
      contentText: string;
      titleNotification: string;
      notifyId: number;
      priority?: ETYPE_PRIORITY;
      autoCancel?: boolean;
      colorSmallIcon?: number;
      optionBubble: OptionsBubble;
    }

    export interface OptionsMessage{
      text:string;
      backgroundColor?:string;
      textColor?:string;
      timeOpenShow?:number;
      timeCloseShow?:number;
    }

    export interface OptionLabel{
      text:string;
      show:boolean;
      backgroundColor?:string;
      color?:string;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image":{"name":"nativescript-image","version":"3.0.12","license":"Apache-2.0","readme":"

    Welcome to NativeScript imageModule

    \n
    \n

    A NativeScript Plugin for Android apps.

    \n
    \n

    \"Build\n\"npm\"\n\"npm\"\n\"Dependency\n\"peerDependencies

    \n\n\n\n

    What is nativescript-image?

    \n

    nativescript-image is a NativeScript plugin for efficiently displaying images on iOS and Android. It uses imageModule on Android and SDWebImage on iOS

    \n

    How to use nativescript-image?

    \n

    In vanila NativeScript

    \n

    From npm

    \n
      \n
    1. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add nativescript-image.
      2. \n
    2. Initialize nativescript-image in the launch event of your {N} application by using the following code:
      3. \n
    \n

    From local repo?

    \n
      \n
    1. Clone the repository and go to the root directory on your computer.
      2. \n
    2. Use tsc to transpile the .ts sources: tsc -p.
      3. \n
    3. Go to the root folder of your {N} application where you would like to install the plugin and type tns plugin add <path-to-imageModule-repo-dir>.
      4. \n
    4. When working with "downsampling" you will need to initialize the image a configuration to the initialize function:
      5. \n
    \n
    import imageModule = require(\"nativescript-image\");

    //do this before creating any image view
    imageModule.initialize({ isDownsampleEnabled: true });
    \n

    Use imageModule in the XML definition of the page as follows:

    \n
    <Page
        xmlns=\"http://www.nativescript.org/tns.xsd\" 
        xmlns:nativescript-image=\"nativescript-image\">
        <nativescript-image:Img width=\"250\" height=\"250\"
                                          src=\"<uri-to-a-photo-from-the-web-or-a-local-resource>\"/>
    </Page>
    \n

    In NativeScript + Angular 2

    \n
      \n
    1. Import the TNSImageModule from nativescript-image/angular and add it to the imports of your initial @NgModule, like shown here.
      2. \n
    2. As described above make sure to initialize the nativescript-image plugin in the launch event of your {N} application.
      3. \n
    \n

    Examples

    \n

    You can refer the demo-angular folder of the repo for runnable {N} project that demonstrates the nativescript-image plugin with all of its features in action.

    \n

    Features

    \n

    Basic attributes

    \n
      \n
    • src
      • \n
    \n

    String value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.

    \n
    <nativescript-image:Img src=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/>
    \n
      \n
    • placeholderImageUri
      • \n
    \n

    String value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all placeholderImageUri of your Img instances.

    \n
    <nativescript-image:Img placeholderImageUri=\"~/placeholder.jpg\"/>
    \n
      \n
    • failureImageUri
      • \n
    \n

    String value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the src is not successful.

    \n
    <nativescript-image:Img failureImageUri=\"~/failure.jpg\"/>
    \n

    Advanced optional attributes

    \n

    There are a couple of optional attributes that could be set on the Img instance to achieve advanced behaviors:

    \n
      \n
    • backgroundUri (Android only)
      • \n
    \n

    String value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the Img.

    \n

    *Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all backgroundUri of your Img instances.

    \n
    <nativescript-image:Img backgroundUri=\"~/image.jpg\"/>
    \n
      \n
    • stretch
      • \n
    \n

    String value used by Img image scale type. This property can be set to:

    \n

    'center' - Performs no scaling.

    \n

    'centerCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'centerInside' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitCenter' - Scales the child so that it fits entirely inside the parent.

    \n

    'aspectFit' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitStart' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitEnd' - Scales the child so that it fits entirely inside the parent.

    \n

    'fitXY' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'fill' - Scales width and height independently, so that the child matches the parent exactly.

    \n

    'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n

    'aspectFill' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

    \n
    <nativescript-image:Img stretch=\"centerInside\"/>
    \n
      \n
    • fadeDuration
      • \n
    \n

    Number value used for the fade-in duration. This value is in milliseconds.

    \n
    <nativescript-image:Img fadeDuration=\"3000\"/>
    \n
      \n
    • blurRadius
      • \n
    \n

    Number value greater than zero, used as input for the blur function. Larger value means slower processing. For example a value of 10 means that each pixel in the image will be blurred using all adjacent pixels up to a distance of 10.

    \n
    <nativescript-image:Img blurRadius=\"25\"/>
    \n
      \n
    • blurDownSampling (Android only)
      • \n
    \n

    Number value greater than zero, used to scale the image before applying the blur function. Larger value means faster processing. For example a value of 2 means that the image will be scaled by a factor of two before applying blur.

    \n
    <nativescript-image:Img blurDownSampling=\"2\"/>
    \n
      \n
    • aspectRatio
      • \n
    \n

    Number value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height.

    \n

    Note: In some layout scenarios it is necessary to set the verticalAlignment of the Img to 'top' or 'bottom' in order to "anchor" the img and achieve dynamic sizing.

    \n
    <nativescript-image:Img aspectRatio=\"1.33\" verticalAlignment=\"top\"/>
    \n
      \n
    • decodeWidth (downsampling) - make sure to enable downsample (isDownsampleEnabled) in the initialize function of the plugin otherwise this property is disregarded.
      • \n
    \n

    Number value used as the downsampled width of the imageModule drawable.

    \n
    <nativescript-image:Img decodeWidth=\"100\"/>
    \n
      \n
    • decodeHeight (downsampling) - make sure to enable downsample (isDownsampleEnabled) in the initialize function of the plugin otherwise this property is disregarded.
      • \n
    \n

    Number value used as the downsampled width of the imageModule drawable.

    \n
    <nativescript-image:Img decodeHeight=\"100\"/>
    \n
      \n
    • progressiveRenderingEnabled
      • \n
    \n

    Boolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.

    \n
    <nativescript-image:Img progressiveRenderingEnabled=\"true\"/>
    \n
      \n
    • showProgressBar (Android only)
      • \n
    \n

    Boolean value used for showing or hiding the progress bar.

    \n
    <nativescript-image:Img showProgressBar=\"true\"/>
    \n
      \n
    • progressBarColor (Android only)
      • \n
    \n

    String value used for setting the color of the progress bar. You can set it to hex values ("#FF0000") and/or predefined colors ("green").

    \n
    <nativescript-image:Img progressBarColor=\"blue\"/>
    \n
      \n
    • roundAsCircle
      • \n
    \n

    Boolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.

    \n
    <nativescript-image:Img roundAsCircle=\"true\"/>
    \n
      \n
    • roundedCornerRadius
      • \n
    \n

    Number value used as radius for rounding the image's corners.

    \n
    <nativescript-image:Img roundedCornerRadius=\"50\"/>
    \n
      \n
    • roundBottomRight
      • \n
    \n

    Boolean value used for determining if the image's bottom right corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-image:Img roundBottomRight=\"true\"/>
    \n
      \n
    • roundBottomLeft
      • \n
    \n

    Boolean value used for determining if the image's bottom left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-image:Img roundBottomLeft=\"true\"/>
    \n
      \n
    • roundTopLeft
      • \n
    \n

    Boolean value used for determining if the image's top left corner will be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-image:Img roundTopLeft=\"true\"/>
    \n
      \n
    • roundTopRight
      • \n
    \n

    Boolean value used for determining if the image's top right corner should be rounded. The roundedCornerRadius is used as the rounding radius.

    \n
    <nativescript-image:Img roundTopRight=\"true\"/>
    \n
      \n
    • autoPlayAnimations
      • \n
    \n

    Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.

    \n
    <nativescript-image:Img autoPlayAnimations=\"true\"/>
    \n
      \n
    • tapToRetryEnabled (Android only)
      • \n
    \n

    Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.

    \n
    <nativescript-image:Img tapToRetryEnabled=\"true\"/>
    \n

    Events

    \n
      \n
    • finalImageSet - arguments FinalEventData
      • \n
    \n

    This event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the FinalEventData.animatable.start() function.

    \n
    <nativescript-image:Img finalImageSet=\"onFinalImageSet\"/>
    \n

    JavaScript:

    \n
    function onFinalImageSet(args) {
        var imageModuleEventData = args;
        var img = imageModuleEventData.object;
    }
    exports.onFinalImageSet = onFinalImageSet;
    \n

    TypeScript:

    \n
    import {Img, FinalEventData } from \"nativescript-image\";

    export function onFinalImageSet(args: FinalEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • failure - arguments FailureEventData
      • \n
    \n

    This event is fired after the fetch of the final image failed.

    \n
    <nativescript-image:Img failure=\"onFailure\"/>
    \n

    JavaScript:

    \n
    function onFailure(args) {
        var img = args.object;
    }
    exports.onFailure = onFailure;
    \n

    TypeScript:

    \n
    import {Img, FailureEventData } from \"nativescript-image\";

    export function onFailure(args: FailureEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • intermediateImageSet - arguments IntermediateEventData (Android only)
      • \n
    \n

    This event is fired after any intermediate image has been set.

    \n
    <nativescript-image:Img intermediateImageSet=\"onIntermediateImageSet\"/>
    \n

    JavaScript:

    \n
    function onIntermediateImageSet(args) {
        var img = args.object;
    }
    exports.onIntermediateImageSet = onIntermediateImageSet;
    \n

    TypeScript:

    \n
    import {Img, IntermediateEventData } from \"nativescript-image\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • intermediateImageFailed - arguments FailureEventData (Android only)
      • \n
    \n

    This event is fired after the fetch of the intermediate image failed.

    \n
    <nativescript-image:Img intermediateImageFailed=\"onIntermediateImageFailed\"/>
    \n

    JavaScript:

    \n
    function intermediateImageFailed(args) {
        var img = args.object;
    }
    exports.intermediateImageFailed = intermediateImageFailed;
    \n

    TypeScript:

    \n
    import {Img, FailureEventData } from \"nativescript-image\";

    export function intermediateImageFailed(args: FailureEventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • submit - arguments EventData (Android only)
      • \n
    \n

    This event is fired before the image request is submitted.

    \n
    <nativescript-image:Img submit=\"onSubmit\"/>
    \n

    JavaScript:

    \n
    function onSubmit(args) {
        var img = args.object;
    }
    exports.onSubmit = onSubmit;
    \n

    TypeScript:

    \n
    import {Img, EventData } from \"nativescript-image\";

    export function onSubmit(args: EventData) {
        var img = args.object as Img;
    }
    \n
      \n
    • release - arguments EventData (Android only)
      • \n
    \n

    This event is fired after the controller released the fetched image.

    \n
    <nativescript-image:Img release=\"onRelease\"/>
    \n

    JavaScript:

    \n
    function onRelease(args) {
        var img = args.object;
    }
    exports.onRelease = onRelease;
    \n

    TypeScript:

    \n
    import {Img, EventData } from \"nativescript-image\";

    export function onRelease(args: EventData) {
        var img = args.object as Img;
    }
    \n

    Event arguments

    \n

    All events exposed by 'nativescript-image' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:

    \n
      \n
    • FinalEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the finalImageSet.

    \n
    import {Img, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-image\";

    export function onFinalImageSet(args: FinalEventData) {
        var info: ImageInfo  = args.imageInfo;
        var animatable: AnimatedImage = args.animatable;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();
    }
    \n
      \n
    • FailureEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the failure and intermediateImageFailed.

    \n
    import {Img, FailureEventData, imageModuleError } from \"nativescript-image\";

    export function onFailure(args: FailureEventData) {
        var error: imageModuleError = args.error;
        var message: string = error.getMessage();
        var type: string = error.getErrorType();
        var fullError: string = error.toString();
    }
    \n
      \n
    • IntermediateEventData
      • \n
    \n

    Instances of this class are provided to the handlers of the intermediateImageSet.

    \n
    import {Img, IntermediateEventData, ImageInfo } from \"nativescript-image\";

    export function onIntermediateImageSet(args: IntermediateEventData) {
        var info: ImageInfo  = args.imageInfo;
        var quality: number = info.getQualityInfo().getQuality();
        var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();
        var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}
    \n
      \n
    • EventData
      • \n
    \n

    Instances of this class are provided to the handlers of the release and submit.

    \n
    import {Img, EventData } from \"nativescript-image\";

    export function onSubmit(args: EventData) {
        var img = args.object as Img;
    }
    \n

    Cache

    \n

    The nativescript-image {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms memory and disk, you can manually manage both of them with the following functionality.

    \n

    'Refresh' the 'src'

    \n

    Not so rarely you may have a scenario where the actual image on your remote service from the src of the Img has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the src by calling the updateImageUri():

    \n
    // 'img' is the instance the 'Img' in the project.
    img.updateImageUri();
    \n

    Clear everything from the cache

    \n

    Managing the caches in nativescript-image is done via the ImagePipeline. In order to get the reference of the ImagePipeline simply call the getImagePipeline() function:

    \n
    var imageModuleModel = require(\"nativescript-image\");

    var imagePipeLine = imageModuleModel.getImagePipeline();
    \n
      \n
    • Clear both the memory and disk caches
      • \n
    \n
    imagePipeLine.clearCaches();
    \n
      \n
    • Clear the memory cache
      • \n
    \n
    imagePipeLine.clearMemoryCaches();
    \n
      \n
    • Clear the disk cache
      • \n
    \n
    imagePipeLine.clearDiskCaches();
    \n

    Evict all images with a specific URI from the cache

    \n

    If clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (src). Evicting is done again via the ImagePipeline:

    \n
    var imageModuleModel = require(\"nativescript-image\");

    var imagePipeLine = imageModuleModel.getImagePipeline();
    \n
      \n
    • Evict URI from both the memory and disk caches
      • \n
    \n
    imagePipeLine.evictFromCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the memory cache
      • \n
    \n
    imagePipeLine.evictFromMemoryCache(\"<uri-to-a-photo-from-the-web>\");
    \n
      \n
    • Evict URI from the disk cache
      • \n
    \n
    imagePipeLine.evictFromDiskCache(\"<uri-to-a-photo-from-the-web>\");
    \n

    Manually shut down the native imageModule library

    \n

    In very very rare occasions the native Android imageModule library may experience strange memory leak issues, in such scenarios as a last resort you may want to "shut down" the library forcing all of the managed memory to possibly be released. You can do that by calling the shutDown function exposed by the nativescript-image module, one good application lifecycle event to call it inside may be in the exit event of the application:

    \n
    import * as app from \"application\";
    import * as imageModuleModule from \"nativescript-image\";

    if (app.android) {
        app.on(app.exitEvent, (args) => {
            imageModuleModule.shutDown();
        });
    }
    \n

    Sample Screenshots

    \n

    All of the images are sample images for showcasing purposes.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1 - Placeholder imageSample 2 - Transition (fade-in animation)
    \"Placeholder\"Transition
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 3 - Image shown successfully from srcSample 4 - 'Failure' image shown
    \"Successfully\"Successfully
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-circle-menu":{"name":"nativescript-circle-menu","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/DeviantJS/nativescript-circle-menu/blob/master/LICENSE"},"readme":"

    \n \"NativeScript\n\t
    \n

    \n## Ramotion Circle Menu {N} Plugin\n

    A plugin to bring the exceptional work of Ramotion into the {N} platform.

    \n

    Circle Menu is an expanding circular menu.

    \n

    As Ramotion is as forward thinking as they are super cool & talented, they open sourced it which allows us to make it available to the {N} community.

    \n

    Circle Menu Source for the iOS Platform

    \n

    Install

    \n
    npm i nativescript-circle-menu --save
    \n

    Usage

    \n
    import {Color} from 'color';
    import {TNSCircleMenu, TNSCircleButton} from 'nativescript-circle-menu';

    this.circleMenu = new TNSCircleMenu();
    this.circleMenu.initMenu([
        new TNSCircleButton({
            icon: \"home.png\",
            color: new Color('#B3714F').ios,
            action: () => {
                console.log('home selected');
            }
        }),
        new TNSCircleButton({
            icon: \"search.png\",
            color: new Color('#7C3FE8').ios,
            action: () => {
                console.log('search selected');
            }
        }),
        new TNSCircleButton({
            icon: \"notifications.png\",
            color: new Color('#4E75E2').ios,
            action: () => {
                console.log('notifications selected');
            }
        }),
        new TNSCircleButton({
            icon: \"settings.png\",
            color: new Color('#528100').ios,
            action: () => {
                console.log('settings selected');
            }
        }),
        new TNSCircleButton({
            icon: \"nearby.png\",
            color: new Color('#85D5FE').ios,
            action: () => {
                console.log('nearby selected');
            }
        })
    ]);
    \n

    Methods

    \n
    initMenu(items: Array<TNSCircleButton>, menuImage?: string, closeImage?: string, position?: CGRect, bgColor?: string, duration?: number, distance?: number);
    \n

    Issues

    \n
    \n

    Flooding the native implementations repo with {N} specific implementation problems is discourteous.\nThey were kind enough open source some really great UI / UX please respect the fact it is not their responsibility to investigate or solve issues using this plugin in NativeScript.

    \n
    \n

    Please create issues here first and only after it has been properly vetted to not be an {N} specific implementation problem\nshould you open an issue in the Circle Menu GitHub repo.

    \n

    Contributing

    \n

    Please see the CONTRIBUTING file for guidelines.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-apps":{"name":"nativescript-azure-mobile-apps","version":"2.0.4","license":"Apache-2.0","readme":"

    NativeScript Azure Mobile Apps plugin

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Azure Mobile Apps plugin.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-azure-mobile-apps

    \n

    This command automatically installs the necessary files, as well as stores nativescript-azure-mobile-apps as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    For most of the functions the plugin you only need to know the name of your Azure mobile apps portal. The only thing that requires additional configuration is the social sign-in under iOS. For that please follow the steps explained below

    \n

    Starting with version 2.0, due to updated libraries, Mircososft now reqiures the minimum SDK for Android to be 19. So you need to adjust 2 files in your app:

    \n
      \n
    1. In the app/App_Resources/Android/AndroidManifest.xml you must have android:minSdkVersion set to 19 or above.
      2. \n
    2. In the app/App_Resources/Android/app.gradle you must ensure that in your defaultConfig you have minSdkVersion set to the same number as the one you set in the AndroidManifest.xml file. So assuming you are setting it to 19, your file should look something like this:
      3. \n
    \n
    android {  
      defaultConfig {  
        generatedDensities = []
        applicationId = \"......\"
        minSdkVersion 19
      }  
    }
    \n

    API

    \n

    MobileServiceClient

    \n

    Static Methods

    \n
      \n
    • configureClientAuthAppDelegate(): void
      \nConfigures the iOS authentication delegate. You are required to call this before your applications starts in case you will be using social sign in under iOS!
      • \n
    \n

    Methods

    \n
      \n
    • \n

      onstructor(string)
      \nInitialize a new client with the given Azure portal url.

      \n
      • \n
    • \n

      getTable(string): MobileServiceTable
      \nGets a reference to the table with the given name.

      \n
      • \n
    • \n

      login(AuthenticationProvider, string?): Promise
      \nPerforms a social sign in with the given provider and url scheme.

      \n
      • \n
    • \n

      loginFromCache(): boolean
      \nTries to login the user from a previously cached authentication. Returns true if successful.

      \n
      • \n
    \n

    Properties

    \n
      \n
    • \n

      user - MobileServiceUser
      \nReturns the currently social signed in user.

      \n
      • \n
    • \n

      push - MobileServicePush\nReturns a MobileServicePush object which you can use to work with push notifications.

      \n
      • \n
    \n

    MobileServicePush

    \n

    Methods

    \n
      \n
    • \n

      register(string): Promise
      \nRegisters the given native push token for push notifications with Azure.

      \n
      • \n
    • \n

      registerWithTemplate(string, string, string): Promise
      \nRegisters the given native push token, template name and template for push notifications with Azure. For more information about templates see the usage below.

      \n
      • \n
    • \n

      registerWithTags(string, string[]): Promise
      \nRegisters the given native push token for push notifications with Azure and associates the given tags with the device installation. You can read more about tags here.

      \n
      • \n
    • \n

      registerWithTagsAndTemplate(string, string[], string, string): Promise
      \nThis combines the above 2 methods, so you can register both with a template and tags.

      \n
      • \n
    • \n

      unregister(): Promise
      \nUnregisters the device from Azure push notifications.

      \n
      • \n
    \n

    Properties

    \n
      \n
    • installationId - string\nReturns the installationId of the device what is registered with Azure's Notification Hubs. This is usefull, for example, in case you need custom tags and you need to call your backend to add the tags.
      • \n
    \n

    MobileServiceUser

    \n

    Static Methods

    \n
      \n
    • \n

      clearCachedAuthenticationInfo(): void
      \nClears the previously cached authentication info.

      \n
      • \n
    • \n

      getFromCache():MobileServiceUser
      \nReturns the previously cached user.

      \n
      • \n
    \n

    Methods

    \n
      \n
    • getProviderCredentials(): Promise
      \nReturns various details about the current user (for example surname, given name, user id, claims, etc.).
      • \n
    \n

    Properties

    \n
      \n
    • \n

      userId - string
      \nGets the user id for this user.

      \n
      • \n
    • \n

      authenticationToken - string
      \nGets the OAuth token for this user.

      \n
      • \n
    \n

    MobileServiceTable

    \n

    Methods

    \n
      \n
    • \n

      read(): Promise<Array>
      \nReturns all records in the table.

      \n
      • \n
    • \n

      insert(T): Promise
      \nAdds the given item to the table. Returns thie updated item (for example with id assigned).

      \n
      • \n
    • \n

      update(T): Promise
      \nUpdates a given item in the table. Returns the updated item.

      \n
      • \n
    • \n

      deleteById(number|string): Promise
      \nDeletes the item with the given id from the table.

      \n
      • \n
    • \n

      deleteItem(T): Promise
      \nDeletes the given item from the table.

      \n
      • \n
    • \n

      where(): MobileServiceQuery
      \nReturns a query object which you can use to filter, order and page through the data in the table.

      \n
      • \n
    \n

    MobileServiceQuery

    \n

    The query object provies a very easy to use chainable interface to filter, order and page through the data inside a table.

    \n

    Methods

    \n
      \n
    • \n

      field(string): this
      \nSpecifies that we will be filtering by the given field. After this you can apply one of the filtering operations.

      \n
      • \n
    • \n

      eq(string|number|boolean|Date): this
      \nFilters the table by a previously specified field so that its value equals the given value.

      \n
      • \n
    • \n

      ne(string|number|boolean|Date): this
      \nFilters the table by a previously specified field so that its value is different than the given value.

      \n
      • \n
    • \n

      gt(string|number||Date): this
      \nFilters the table by a previously specified field so that its value is greater than the given value.

      \n
      • \n
    • \n

      ge(string|number||Date): this
      \nFilters the table by a previously specified field so that its value is greater than or equal to the given value.

      \n
      • \n
    • \n

      lt(number||Date): this
      \nFilters the table by a previously specified field so that its value is lower than the given value.

      \n
      • \n
    • \n

      le(number||Date): this
      \nFilters the table by a previously specified field so that its value is lower than or equal to the given value.

      \n
      • \n
    • \n

      startsWith(string, string): this
      \nFilter the table by the given field so that the values start with the given value.

      \n
      • \n
    • \n

      endsWith(string, string): this
      \nFilter the table by the given field so that the values end with the given value.

      \n
      • \n
    • \n

      and(): this
      \nApplies a logcal AND operator after which you can start another filter condition.

      \n
      • \n
    • \n

      or(): this
      \nApplies a logcal OR operator after which you can start another filter condition.

      \n
      • \n
    • \n

      orderBy(string, SortDir): this
      \nOrders the resultset by thegive field and direction. This should be applied after specifying your filters!

      \n
      • \n
    • \n

      skip(number): this
      \nSkips the given number of records from the current resultset. This should be applied after all filters and sorting.

      \n
      • \n
    • \n

      top(number): this
      \nTakes only the given amount of records from the resultset. This should be applied after all filters and sorting.

      \n
      • \n
    • \n

      read(): Promise
      \nReads and returns the records of the currently filtered, ordered and windowed resultset.

      \n
      • \n
    \n

    Usage

    \n

    Note that there is no difference in using the plugin in Angular NativeScript apps, so the usage below is valid for Angular apps as well.

    \n

    Create a client

    \n
    import { MobileServiceClient } from \"nativescript-azure-mobile-apps/client\";
    var client = new MobileServiceClient(\"https://<PORTAL_NAME>.azurewebsites.net\");
    \n

    Get a reference to a table

    \n
    var todoItemTable = client.getTable(\"TodoItem\");
    \n

    Get all items in a table

    \n
    todoItemTable.read<TodoItem>().then(function(results) {
        // results is array of TodoItem-s
        console.log(results.length);
        console.log(results[0].id);
    });
    \n

    Add an item to a table

    \n
    var item = new TodoItem();
    item.text = \"NativeScript Rocks!\";
    todoItemTable.insert(item).then(function(result) {
        // result is the inserted item with the id changed
        console.log(result.id);
    });
    \n

    Update an item

    \n
    item.text = \"Changed Text\";
    todoItemTable.update(item).then(function(result) {
        // result is the updated item
        console.log(result);
    });
    \n

    Delete an item

    \n
    todoItemTable.deleteItem(item).then(function() {
        console.log(\"Deleted!\");
    });
    \n

    Delete an item by ID

    \n
    todoItemTable.deleteById(\"some id\").then(function() {
        console.log(\"Deleted!\");
    });
    \n

    Query table

    \n
    todoItemTable.where().field(\"completed\").eq(true).read().then(function(results) {
        console.log(\"There are \" + results.length.toString() + \"completed items\");
    });
    \n

    Sorting

    \n
    import { SortDir } from \"nativescript-azure-mobile-apps/query\";
    todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Desc).read().then(function(results) {
        // ...
    });
    \n

    Paging

    \n
    import { SortDir } from \"nativescript-azure-mobile-apps/query\";
    todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Asc).skip(2).top(3).read().then(function(results) {
        // Skips 2 completed tasks and returns the next 3 ordered chronologically by creation. 
    });
    \n

    User Authentication (Social Sign In)

    \n

    iOS login requirements

    \n

    In versions 1.0.0 and lower login on iOS leveraged an in-app browser. This will be banned so we needed to\nswitch to SafariViewController which is not "in-app". So we need to be able to switch back and forth between\nthe external browser. The main benefit is this browser can leverage cookies already set by for instance a Facebook\nlogin, so the user doesn't have to enter his credentials again.

    \n

    It's a bit of work, but it's a one time effort and should take you about 5 minutes to complete these steps:

    \n
    Custom URL Scheme
    \n

    Switching to the external browser is not a problem, but switching back requires you to configure a 'Custom URL Scheme'.\nOpen app/App_Resources/iOS/Info.plist and add:

    \n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>my.bundle.id</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>x-msauth-tns-azure-sample</string>
        </array>
      </dict>
    </array>
    \n

    Make sure the Custom URL Scheme string x-msauth-tns-azure-sample above is unique on the device of the user,\nso including your bundle id would be a good start (replace the dots by dashes).

    \n

    Also, replace my.bundle.id by your bundle id.

    \n
    Add ALLOWED EXTERNAL REDIRECT URLS
    \n

    Add x-msauth-tns-azure-sample://easyauth.callback to the 'ALLOWED EXTERNAL REDIRECT URLS' field in these screenshots of your Azure backend.

    \n

    Make sure to replace x-msauth-tns-azure-sample by your own Custom URL Scheme.

    \n
    App Delegate wiring
    \n

    Now that your app can be called from the external party it still can't switch back to the foreground unless\nyou wire up a method in the App Delegate. Don't worry, this plugin takes care of that for you, the only thing\nyou need to do is add this line just before app.start() in app.js / app.ts:

    \n
    // add this
    require(\"nativescript-azure-mobile-apps/client\").MobileServiceClient.configureClientAuthAppDelegate();

    // something like this is already there
    application.start({ moduleName: \"main-page\" });
    \n
    Passing the URL Scheme to login
    \n

    Note that calling login has changed a bit; you now need to pass a second parameter to this function to use the\nnew login mechanism. Failing to do so will fall back to the deprecated in-app browser authentication method.\nMake sure to replace x-msauth-tns-azure-sample by the scheme you configured in Info.plist before.\nYou can leave it out if you only target Android.

    \n
    import { AuthenticationProvider } from \"nativescript-azure-mobile-apps/user\";
    client.login(AuthenticationProvider.Google, \"x-msauth-tns-azure-sample\").then((user) => {  
        console.log(`Logged In! UserID:${user.userId}`);
    }, (e) => {
        console.log(\"Error Logging in!\", e);
    });
    \n

    Once authenticated the userId and token are cached so you can login by simply calling:

    \n
    client.loginFromCache(); // Will return true if there are cached credentials and will setup the client accordingly
    \n

    If you want to get additional information about the user (like provider token, name, email, profile photo etc.) you can do this by calling getProviderCredentials():

    \n
    client.user.getProviderCredentials().then((result) => {
        console.log(`Surname: ${result.surname}`);
        console.log(`Given Name: ${result.givenName}`);
        console.log(`Name: ${result.name}`);
    });
    \n

    Note: Since each provider provides different amount of details (also depends on what you have authorized in the Azure portal),\nif you are looking for some specific information, you should check the claims property of the result.\nIt is a dictionary containing all the information that is returned from Azure.

    \n

    If you want to remove the cached authentication info you should use:

    \n
    import { MobileServiceUser } from \"nativescript-azure-mobile-apps/user\";
    MobileServiceUser.clearCachedAuthenticationInfo();
    \n

    Push Notifications

    \n

    NOTE: In order to work with push notifications you also need to install the nativescript-plugin-firebase plugin.\nYou can do this by running the following command:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    When prompted answer Yes to use the plugin in Push Only setup (in case you won't be using anything from the Firebase plugin)\nYou can read more on how to use the firebase push only setup here.

    \n

    Register

    \n

    You need to call the push register with Azure in the onPushTokenReceivedCallback by passing the registration token\nreturned by the plugin.

    \n
    import { messaging } from \"nativescript-plugin-firebase/messaging\";

    messaging.registerForPushNotifications({
        onPushTokenReceivedCallback: (token) => {
            client.push.register(token)
                .then(() => { console.log(\"Azure Register OK!\", client.push.installationId); })
                .catch((e) => { console.error(e); });
        }
    });
    \n

    Register with a template

    \n

    If you want to use a custom template for the notifications, you can use the registerWithTemplate method to pass\nyour template name and body.

    \n
    import { messaging } from \"nativescript-plugin-firebase/messaging\";

    let pushTemplates = {};
    pushTemplates[platform.platformNames.android] = \"{\\\"data\\\":{\\\"message\\\":\\\"$(param)\\\"}}\";
    pushTemplates[platform.platformNames.ios] = \"{\\\"aps\\\":{\\\"alert\\\":\\\"$(param)\\\"}}\";

    messaging.registerForPushNotifications({
        onMessageReceivedCallback: (message) => {
            console.log(message);
        },
        onPushTokenReceivedCallback: (token) => {
            client.push.registerWithTemplate(token, \"MyTemplate\", pushTemplates[platform.device.os])
                .then(() => { console.log(\"Azure Register OK!\", client.push.installationId); })
                .catch((e) => { console.error(e); });
        },
    });
    \n

    Unregister

    \n
    import { messaging } from \"nativescript-plugin-firebase/messaging\";

    messaging.unregisterForPushNotifications()
        .then(() => {
            console.log(\"Device Unregister OK!\");
            client.push.unregister()
                .then(() => console.log(\"Azure Unregister OK!\"))
                .catch((e) => console.log(e));
        })
        .catch((e) => { console.error(e); });
    \n

    Demos

    \n

    This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-azure-mobile-apps
    $ cd nativescript-azure-mobile-apps
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nota/nativescript-accessibility-ext":{"name":"@nota/nativescript-accessibility-ext","version":"7.0.3","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediafilepicker":{"name":"nativescript-mediafilepicker","version":"4.0.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Build

    \n

    nativescript-mediafilepicker

    \n

    A complete file picker solution for NativeScript. You will be able to pickup any types of file. Capturing image, video & audio are supported. It's a combination features of nativescript-imagepicker and nativescript-camera plugin with some extended features using following native libaries:

    \n\n

    Old version (v1.X) can be found from this branch

    \n

    Features:

    \n
      \n
    • Image, Video, Audio & custom file picker.
      • \n
    • Capturing Image, Video and Audio from APP directly.
      • \n
    • Custom files like pdf, text etc support. For iOS I have used UIDocumentPickerViewController
      • \n
    • Single or Multiple selections.
      • \n
    • More...
      • \n
    \n

    Limitations

    \n
      \n
    • Anything those exists in Native Library. You can check the native libaries.
      • \n
    • In iOS after selecting file you may not be able to use it directly. In this case you will need to copy that file in your app directory. After using it you can delete it for reducing storage memory usage. Please check the demo for more details. Only for iOS Audio picker.
      • \n
    • At present selecting iCloud file isn't supported for iOS because of Native Library limitation.
      • \n
    \n

    Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

    \n

    NativeScript Version Support

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NS Versionnativescript-mediafilepicker versionInstall commandDocs
    ^7.0.0^4.0.0ns plugin add nativescript-mediafilepickerThis page
    ^6.0.0^3.0.0tns plugin add nativescript-mediafilepicker@^3.0.0Here
    \n

    Installation (NS 7)

    \n
    ns plugin add nativescript-mediafilepicker
    \n

    Usage (NS 7) (Please check demo project for details)

    \n

    Import

    \n

    JavaScript:

    \n
    var mPicker = require(\"nativescript-mediafilepicker\");
    var mediafilepicker = new mPicker.Mediafilepicker();
    \n

    TS:

    \n
    import { Mediafilepicker, ImagePickerOptions, VideoPickerOptions, AudioPickerOptions, FilePickerOptions } from 'nativescript-mediafilepicker';
    \n

    Image File Picker

    \n
    let options: ImagePickerOptions = {
        android: {
            isCaptureMood: false, // if true then camera will open directly.
            isNeedCamera: true,
            maxNumberFiles: 10,
            isNeedFolderList: true
        }, ios: {
            isCaptureMood: false, // if true then camera will open directly.
            isNeedCamera: true,
            maxNumberFiles: 10
        }
    };

    let mediafilepicker = new Mediafilepicker();
    mediafilepicker.openImagePicker(options);

    mediafilepicker.on(\"getFiles\", function (res) {
        let results = res.object.get('results');
        console.dir(results);
    });

    // for iOS iCloud downloading status
    mediafilepicker.on(\"exportStatus\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"error\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"cancel\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });
    \n

    Video File Picker

    \n
    let allowedVideoQualities = [];

    if (app.ios) {
        allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh];  // get more from here: https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
    }

    let options: VideoPickerOptions = {
        android: {
            isCaptureMood: false, // if true then camera will open directly.
            isNeedCamera: true,
            maxNumberFiles: 2,
            isNeedFolderList: true,
            maxDuration: 20,

        },
        ios: {
            isCaptureMood: false, // if true then camera will open directly.
            videoMaximumDuration: 10,
            allowedVideoQualities: allowedVideoQualities
        }
    };

    let mediafilepicker = new Mediafilepicker(); 
    mediafilepicker.openVideoPicker(options);

    mediafilepicker.on(\"getFiles\", function (res) {
        let results = res.object.get('results');
        console.dir(results);
    });

    // for iOS iCloud downloading status
    mediafilepicker.on(\"exportStatus\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"error\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"cancel\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });
    \n

    Audio File Picker

    \n
    let options: AudioPickerOptions = {
        android: {
            isCaptureMood: false, // if true then voice recorder will open directly.
            isNeedRecorder: true,
            maxNumberFiles: 2,
            isNeedFolderList: true,
            maxSize: 102400 // Maximum size of recorded file in bytes. 5900 = ~ 1 second
        },
        ios: {
            isCaptureMood: false, // if true then voice recorder will open directly.
            maxNumberFiles: 5,
            audioMaximumDuration: 10,
        }
    };

    let mediafilepicker = new Mediafilepicker(); 
    mediafilepicker.openAudioPicker(options);

    mediafilepicker.on(\"getFiles\", function (res) {
        let results = res.object.get('results');
        console.dir(results);
    });

    mediafilepicker.on(\"error\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"cancel\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });
    \n

    Custom File Picker

    \n
    let extensions = [];

    if (app.ios) {
        extensions = [kUTTypePDF, kUTTypeText]; // you can get more types from here: https://developer.apple.com/documentation/mobilecoreservices/uttype
    } else {
        extensions = ['txt', 'pdf'];
    }

    let options: FilePickerOptions = {
        android: {
            extensions: extensions,
            maxNumberFiles: 2
        },
        ios: {
            extensions: extensions,
            multipleSelection: true
        }
    };

    let mediafilepicker = new Mediafilepicker(); 
    mediafilepicker.openFilePicker(options);

    mediafilepicker.on(\"getFiles\", function (res) {
        let results = res.object.get('results');
        console.dir(results);
    });

    mediafilepicker.on(\"error\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });

    mediafilepicker.on(\"cancel\", function (res) {
        let msg = res.object.get('msg');
        console.log(msg);
    });
    \n

    Usage in Angular

    \n
    mediafilepicker.on(\"getFiles\", event => {
    \tthis._ngZone.run(() => {
    \t\t// do your stuff here
    \t\t// any UI changes will be reflected
    \t});
    });
    \n

    All Methods

    \n
    openImagePicker(params: ImagePickerOptions): void;
    openVideoPicker(params: VideoPickerOptions): void;
    openAudioPicker(params: AudioPickerOptions): void;
    openFilePicker(params: FilePickerOptions): void;

    // iOS only
    copyPHImageToAppDirectory(rawData: PHAsset, fileName: any): Promise<{}>;
    copyPHVideoToAppDirectory(asset: AVURLAsset, fileName: any): Promise<{}>;
    convertPHImageToUIImage(rawData: PHAsset): Promise<{}>;
    copyUIImageToAppDirectory(image: UIImage, fileName: any): Promise<{}>;
    copyMPMediaFileToAPPDirectory(mediaItem: MPMediaItem, filename: any): Promise<{}>;
    \n

    All options

    \n
    export interface ImagePickerOptions {
        android?: {
            isCaptureMood?: boolean;
            isNeedCamera?: boolean;
            maxNumberFiles?: number;
            isNeedFolderList?: boolean;
        };
        ios?: {
            isCaptureMood?: boolean;
            isNeedCamera?: boolean;
            maxNumberFiles?: number;
            hostView?: View;
        };
    }
    export interface VideoPickerOptions {
        android?: {
            isCaptureMood?: boolean;
            isNeedCamera?: boolean;
            maxNumberFiles?: number;
            isNeedFolderList?: boolean;
            maxDuration?: number;
            videoQuality?: number;
        };
        ios?: {
            isCaptureMood?: boolean;
            maxNumberFiles?: number;
            videoMaximumDuration?: number;
            allowedVideoQualities?: Array<string>; // https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
            hostView?: View;
        };
    }
    export interface AudioPickerOptions {
        android?: {
            isCaptureMood?: boolean;
            isNeedRecorder?: boolean;
            maxNumberFiles?: number;
            isNeedFolderList?: boolean;
            maxSize?: number;
        };
        ios?: {
            isCaptureMood?: boolean;
            maxNumberFiles?: number;
            audioMaximumDuration?: number;
            hostView?: View;
        };
    }
    export interface FilePickerOptions {
        android?: {
            extensions: Array<string>;
            maxNumberFiles?: number;
        };
        ios?: {
            extensions: Array<string>; // https://developer.apple.com/documentation/mobilecoreservices/uttype
            multipleSelection?: boolean;
            hostView?: View;
        };
    }
    \n

    Screenshots

    \n

    Android

    \n

    \"Android\"\n\"Android\"\n\"Android\"\n\"Android\"\n\"Android\"\n\"Android\"

    \n

    iOS

    \n

    \"ios\"\n\"ios\"\n\"ios\"\n\"ios\"\n\"ios\"

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ui-highcharts":{"name":"nativescript-ui-highcharts","version":"1.2.2","license":"Apache-2.0","readme":"

    NativeScript Highcharts

    \n
    \n

    :warning: If you are using NativeScript 7.0.0 and above: Use this package @mhtghn/nativescript-highcharts

    \n
    \n

    \n \n \n \"downloads\"\n \n \n \"License:\n \n

    \n

    \"NPM\"

    \n

    This plugins allows you to use Highcharts in NativeScript.

    \n

    Screenshots

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/nativescript-ui-highcharts
    cd nativescript-ui-highcharts/src
    npm run demo.ios # or demo.android
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/nativescript-ui-highcharts
    cd nativescript-ui-highcharts/src
    npm run demo-angular.ios # or demo-angular.android
    \n

    Installation

    \n
    tns plugin add nativescript-ui-highcharts
    \n

    Usage

    \n

    NativeScript-Core

    \n

    TypeScript

    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

    \n
    ...
    export class HomeViewModel extends Observable {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };
        chartOptionsString = JSON.stringify(this.chartOptions);
        ...
    }
    \n

    XML

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ui=\"nativescript-ui-highcharts\">

        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
        </GridLayout>
    </Page>
    \n

    NativeScript Angular

    \n

    TypeScript

    \n

    Import the HighchartsModule in your module.

    \n
    ...
    import {HighchartsModule} from \"nativescript-ui-highcharts/angular\";

    @NgModule({
        imports: [
            ...
            HighchartsModule
        ],
        ...
    })
    export class HomeModule { }
    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

    @Component({
        selector: \"Home\",
        moduleId: module.id,
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        chartOptionsString = JSON.stringify(this.chartOptions);
        ...
    }
    \n

    HTML

    \n
    <ActionBar class=\"action-bar\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout class=\"page\">
        <!-- Add your page content here -->
        <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
    </GridLayout>
    \n

    Highcharts Compatibility

    \n
      \n
    • highcharts.js: v7.2.0
      • \n
    • highcharts-more.js: v7.2.0
      • \n
    • highcharts-3d.js: v7.2.0
      • \n
    • sankey.js: v7.2.0
      • \n
    • organization.js: v7.2.0
      • \n
    \n

    About performance

    \n

    This plugin is addressed to people who really want to use Highcharts in their NS apps. Because it uses a WebView to display the chart. So performance-wise it is not the best solution. If you want a pure native solution you should use NativeScript UI's Chart component

    \n

    Tips

    \n
      \n
    • Add the next option to the chart options to disable the display of the Highcharts.com Hyperlink in the webview
      credits: {
         enabled: false
      }
      \n
      • \n
    \n

    Credit

    \n

    This plugin is greatly inspired by this demo from Eddy Verbruggen

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sec-spec/ns7-lib-ng-oauth-mobile-service":{"name":"@sec-spec/ns7-lib-ng-oauth-mobile-service","version":"1.0.5","license":"Apache-2.0","readme":"

    @sec-spec/nativescript-lib-ng-oauth-mobile-service

    \n
    ns plugin add @sec-spec/nativescript-lib-ng-oauth-mobile-service
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-vue-vision":{"name":"@nativescript/template-blank-vue-vision","version":"8.6.3","license":"Apache-2.0","readme":"

    NativeScript with Vue for visionOS

    \n
    ns run visionos --no-hmr
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webrtc-plugin":{"name":"nativescript-webrtc-plugin","version":"2.0.0-alpha.22","license":"Apache-2.0","readme":"

    NativeScript WebRTC

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Uses this for Android and this for iOS.

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-webrtc-plugin
      • \n
    \n

    Android

    \n

    Add the following to your app.gradle located in app/App_Resources

    \n
    android {
    ....
    compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
      }
    }
    \n

    How to make a call

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
    \n

    IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

    \n
    <webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
    <webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
    \n

    Using Angular ?

    \n

    Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import WebRTCView from 'nativescript-webrtc-plugin/vue';

    Vue.use(WebRTCView);
    \n
    <WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
    <WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
    \n

    Standard Api :sparkles: New :sparkles:

    \n

    This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

    \n

    Basic Api

    \n

    Caller

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
      const object = args.object;
      const remoteVideoTrack = object.get('remoteVideoTrack');
      remoteStream = object.get('stream');
      const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
      video.videoTrack = remoteVideoTrack;
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type');
      if (type === 'answer') {
        webrtc.handleAnswerReceived({
          sdp: sdp,
          type: type
        });
      } else {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    webrtc.makeOffer();
    \n

    Callee

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type') as WebRTCSdpType;
      if (type === WebRTCSdpType.ANSWER) {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    // sdp received from the signaling server
    webrtc.createAnswerForOfferReceived({
      type: sdp.type,
      sdp: sdp.sdp
    });
    \n

    Using demo

    \n

    Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

    \n
      \n
    1. \n

      Start demo-server by running npm i && node app

      \n
      2. \n
    2. \n

      Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

      \n
      3. \n
    3. \n

      Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

      \n
      4. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-folding-list-view":{"name":"nativescript-folding-list-view","version":"1.2.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    \"NativeScript+Ramotion=❤️\"

    \n

    A NativeScript ListView with foldable cells. Utilizes the wonderfull FoldingCell created by Ramotion!

    \n

    Screenshot

    \n

    \"ios\"\n\"android\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-folding-list-view

    \n

    This command automatically installs the necessary files, as well as stores nativescript-folding-list-view as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      itemLoading
      \nTriggered when generating an item in the FoldingListView.

      \n
      • \n
    • \n

      loadMoreItems
      \nTriggered when the generated items reached the end of the items property.

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      itemLoadingEvent - String
      \nString value used when hooking to itemLoadingEvent event.

      \n
      • \n
    • \n

      loadMoreItemsEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UITableView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.widget.ListView
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the FoldingListView. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      foregroundItemTemplate - String
      \nGets or sets the item template of that is displayed for folded cell.

      \n
      • \n
    • \n

      containerItemTemplate - String
      \nGets or sets the item template of that is displayed for unfolded cell.

      \n
      • \n
    • \n

      foldedRowHeight - Length
      \nGets or sets the height for folded cells in the list.

      \n
      • \n
    • \n

      foldsCount - number
      \nGets or sets the number of unfolds each cell will have. Minimum is 3.

      \n
      • \n
    • \n

      foldAnimationDuration - number
      \nGets or sets the miliseconds each fold/unfold should take. Default value is 330ms.

      \n
      • \n
    • \n

      backViewColor - Color
      \nGets or sets the color that will be displayed during the unfolding animation of the cell.

      \n
      • \n
    • \n

      toggleMode - boolean
      \nGets or sets whether the control will work in toggle mode. If set to true only a single cell can be expanded and if the user tries to expand another cell the first one will get folded.

      \n
      • \n
    • \n

      itemTemplateSelector - Function | string
      \nThis can be either a function that should return a string representing the template key to use, or it can be a string of a property which value will be pulled from the binding context for the current item. Note that the same template key will be used to pull the template for both the foreground and container views.

      \n
      • \n
    • \n

      detailDataLoader - Function
      \nGets or sets the a function that will be used for loading the data for the unfolded cell. By default, when this is not specified the widget binds both the folded and unfolded cells the current item. This means that the data for both views should be available in the item. If you set this function it will be called whenever the user taps on an item to unfold it. The function the current item and index and must return a Promise with the data item that should be bound to the unfolded cell.

      \n
      • \n
    \n

    Instance Methods

    \n
      \n
    • \n

      refresh()
      \nForces the FoldingListView to reload all its items.

      \n
      • \n
    • \n

      scrollToIndex(index: number, animated: boolean = true)
      \nScrolls the FoldingListView to the item with the given index. This can be either animated or not. Defaults to animated.

      \n
      • \n
    • \n

      invalidateChachedDetailData(index: number)
      \nInvalidates the cahced detail data for the given index. This will cause the detailDataLoader to be called when the cell at the given indexed is shown or the list is refreshed.

      \n
      • \n
    • \n

      isItemAtIndexVisible(index: number): boolean
      \nChecks if the given index is curently visible in the list.

      \n
      • \n
    • \n

      resetExpandedStates()
      \nResets expanded states for all cells in the list view. Useful when you are reloading the list with completely different data so all cells can start in folded state.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:flv="nativescript-folding-list-view" to your page tag, and then simply use <flv:FoldingListView/> in order to add the widget to your page. Use <flv:FoldingListView.foregroundItemTemplate/> to specify the template for folded cells and <flv:FoldingListView.containerItemTemplate/> to specify the template for unfolded cells:

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
          xmlns:flv=\"nativescript-folding-list-view\"
          navigatingTo=\"navigatingTo\" class=\"page\">

        <Page.actionBar>
            <ActionBar title=\"Folding LV\" icon=\"\" class=\"action-bar\">
            </ActionBar>
        </Page.actionBar>

        <GridLayout>
            <flv:FoldingListView items=\"{{ items }}\" foldsCount=\"5\" foldedRowHeight=\"95\" 
                detailDataLoader=\"detailDataLoader\">
                <flv:FoldingListView.foregroundItemTemplate>
                    <GridLayout columns=\"75, *\" class=\"folded-cell\">
                        <GridLayout row=\"0\" col=\"0\" rows=\"*, auto, auto, *\" class=\"item-nbr\">
                            <Label row=\"1\" text=\"Item\"/>
                            <Label row=\"2\" text=\"{{ '#' + item }}\"/>
                            <ActivityIndicator row=\"3\" busy=\"{{ isBusyIn }}\" />
                        </GridLayout>
                        <StackLayout col=\"1\" padding=\"10\">
                            <Label class=\"h2\" text=\"My Header\"/>
                            <Label class=\"label\" textWrap=\"true\" text=\"Short description. Tap to see more!\"/>
                        </StackLayout>
                    </GridLayout>
                </flv:FoldingListView.foregroundItemTemplate>
                
                <flv:FoldingListView.containerItemTemplate>
                    <StackLayout rows=\"auto, *, auto\" class=\"expanded-cell\">
                        <Label class=\"item-nbr\" text=\"{{ 'Item #' + item }}\" />
                        <Label class=\"label\" textWrap=\"true\" text=\"{{ details }}\" />
                        <Button id=\"btn\" class=\"btn btn-primary\" text=\"Click Me!\" />
                    </StackLayout>
                </flv:FoldingListView.containerItemTemplate>
            </flv:FoldingListView>
        </GridLayout>
    </Page>
    \n

    Multiple templates

    \n

    Using mutiple templates is dones the same way as you would in the buil-tin ListView control - the wdiget provides an itemTemplateSelector property that can be either set to a function that returns the correct template key for an item or to a string from which property the value of the key will be pulled. Note that same template key will be used for both the container and foreground views. If you want to have different template only for one type of view, then you can leave the single template for the other one

    \n
    <flv:FoldingListView id=\"lv\" items=\"{{ items }}\" foldsCount=\"5\" foldedRowHeight=\"95\" 
        loadMoreItems=\"loadMoreItems\" itemLoading=\"itemLoading\" detailDataLoader=\"detailDataLoader\"
        itemTemplateSelector=\"itemTemplateSelector\">
        <flv:FoldingListView.foregroundItemTemplates>
            <template key=\"odd\">
                <GridLayout columns=\"75, *\" class=\"folded-cell\">
                    <!-- ... -->
                </GridLayout>
            </template>
            <template key=\"even\">
                <GridLayout columns=\"75, *\" class=\"folded-cell even\">
                    <!-- ... -->
                </GridLayout>
            </template>
        </flv:FoldingListView.foregroundItemTemplates>

        <flv:FoldingListView.containerItemTemplates>
            <template key=\"odd\">
                <StackLayout class=\"expanded-cell\">
                    <!-- ... -->
                </StackLayout>
            </template>
            <template key=\"even\">
                <StackLayout class=\"expanded-cell even\">
                    <!-- ... -->
                </StackLayout>
            </template>
        </flv:FoldingListView.containerItemTemplates>
    </flv:FoldingListView>
    \n
    export function itemTemplateSelector(item: any, index: number, items: any) {
        return (index % 2 === 0 ? \"even\" : \"odd\");
    }
    \n

    Unfolded view height requirements

    \n

    Note that in order for the widget to function properly the unfolded view height must be more than two times the height of the folded view. In order to ensure this (especially in cases where you load the detail data on demand and do not know exactly the height of the item) it is a good idea to set min-height on the wrapping layout for the unfolded cells.

    \n

    Using detailDataLoader to load the bound item for the unfolded cells

    \n

    In many cases when you have complex layout or you want to display many details in the unfolded cells, it is a good practice to not load all that data with your folded cells items. The widget provides a function which you can use to load that data on demand when the user taps to unfold a given cell.

    \n
    export function detailDataLoader(item: any, index: number) {
        item.set(\"isBusyIn\", true);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                item.details = \"< ... some very long text ... >\";
                resolve(item);

                item.set(\"isBusyIn\", false);
            }, 3000);
        });
    }
    \n

    Note that this simply a bound function, it is not an event! The function should return a Promise that resolves the loaded data from you backend for the given cell.

    \n

    Having buttons inside the cells (Android)

    \n

    Under Android there are problems for the ListView android widget to intercept tap evens in cases when you have a Button inside the cells. In order to overcome this you need to subscribe to the itemLoading event and then set the button to not be focusable:

    \n
    export function itemLoading({ index, view }: ItemEventData) {
        if (isAndroid) {
            // HACK: Button inside the ListView prevents item click
            view.container.getViewById(\"btn\").android.setFocusable(false);
        }
    }
    \n

    Usage in Angular

    \n

    Currently the Folding List View does not support Angular projects out of the box!

    \n

    Demos

    \n

    This repository includes plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-folding-list-view
    $ cd nativescript-folding-list-view
    $ npm install
    $ npm run demo-ios
    \n

    This will run the NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auth0":{"name":"nativescript-auth0","version":"4.1.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@kopis/eamplugin":{"name":"@kopis/eamplugin","version":"1.0.43","license":"Apache-2.0","readme":"

    @kopis/eamplugin

    \n
    ns plugin add @kopis/eamplugin
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-login":{"name":"nativescript-wechat-login","version":"1.0.6","license":"Apache-2.0","readme":"

    NativeScript WeChat login plugin

    \n

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    Using this plugin you will be able implement wechat login feature in your APP. You can read more details from here

    \n

    Installation

    \n
    tns plugin add nativescript-wechat-login
    \n

    If you are using NativeScript 5.4.X then you can have a look this branch

    \n

    Android

    \n

    If installation was successful then wxapi.WXEntryActivity.android.ts file should be create to your src or app (based on nsconfig.json or webpack.config.js appPath value) directory with your APP ID. If it wasn't successfully created then you will have to create that file manually. You can get code of that file from here. In this case you will require to change YOUR_APP_ID to your app's ID.

    \n

    If you don't have wxapi.WXEntryActivity.android.ts file in your src or app directory then Android won't receive notification from wechat.

    \n

    Webpack

    \n

    You will have to add wxapi.WXEntryActivity.android.ts in your webpack.config.js file so that android runtime can generate appropriate java class. Check the demo custom-webpack.config.js file. You can read here for details.

    \n

    If you are using NativeScript version 6.4.0 or newer then you can create custom custom-webpack.config.js file & add that file in your nsconfig.json file as below

    \n

    custom-webpack.config.js

    \n
    const webpackConfig = require(\"./webpack.config\");
    const path = require(\"path\");

    module.exports = env => {

        env = env || {};

        const cnf = webpackConfig(env);

        env.appComponents = env.appComponents || [];
        env.appComponents.push(path.resolve(cnf.context, \"wxapi.WXEntryActivity.android.ts\")); 

        const config = webpackConfig(env);

        return config;
    }
    \n

    nsconfig.json

    \n
    ...
    \"webpackConfigPath\": \"./custom-webpack.config.js\"
    \n

    For NativeScript version 6.3.0 or older edit webpack.config.js manually.

    \n
    const appComponents = [
        \"tns-core-modules/ui/frame\",
        \"tns-core-modules/ui/frame/activity\",
        resolve(__dirname, \"src/wxapi.WXEntryActivity.android.ts\") // or resolve(__dirname, \"app/wxapi.WXEntryActivity.android.ts\") depends on nsconfig.json or webpack.config.js file's appPath value.
    ];
    \n

    iOS

    \n

    Open your Info.plist file from App_Resources/iOS location & add following lines

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleURLName</key>
    \t\t<string>weixin</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>WECHAT_APP_ID</string>
    \t\t</array>
    \t</dict>
    </array>
    \n

    Change WECHAT_APP_ID with your Wechat App ID. Check demo project demo/App_Resources/iOS/Info.plist

    \n

    Usage

    \n

    For details you can check the demo project.

    \n

    In your main.ts or app.ts need to import initWechatSdk(WECHAT_APP_ID) method with wechat app id.

    \n
    ....
    import { initWechatSdk } from \"nativescript-wechat-login\";

    initWechatSdk(\"wxd930ea5d5a258f4f\");
    \n

    In any other page

    \n
    ....
    import { WechatLogin } from \"nativescript-wechat-login\";
    import * as app from \"tns-core-modules/application\";
    \n

    Now call in a method

    \n
    let wechat = new WechatLogin();

    if (wechat.isWechatInstalled()) {
        wechat.doLogin(\"nativescript_demo\");
    } else {
        console.log(\"wechat isn't installed\")
    }
    \n

    You will get response from wxApiResponse event. So, you can register in that event like this:

    \n
    app.on('wxApiResponse', function(res){
    \tconsole.dir(res) // you will get wechat notification here.
    \tconsole.dir(res.object) // information from wechat
    }, this);
    \n

    Ref:

    \n

    https://open.wechat.com/cgi-bin/newreadtemplate?t=overseas_open/docs/mobile/login/guide#login_guide

    \n

    https://github.com/aaronbruckner/wechatAndroidLoginDemo

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-temporary-key-storage":{"name":"nativescript-temporary-key-storage","version":"1.0.6","license":"MIT","readme":"

    NativeScript Temporary Key Storage

    \n

    I wrote this simple plugin for my use, and it works well for what it's intended for. It temporarily stores a key in an SQLCipher database. The database uses a random encryption key that changes in a predefined period, and it'll keep changing its key for as long as the app is running. Once the user or system kills the app, the user will need to provide his password again.

    \n

    Installation

    \n
    tns plugin add nativescript-temporary-key-storage
    \n

    Usage

    \n

    Import the plugin:

    \n
    import { keyStorage, processDb } from 'nativescript-temporary-key-storage';
    \n

    Storing the key:

    \n
    keyStorage(myKeyGoesHere, 60000);
    \n

    Here we're calling the keyStorage function passing two arguments. The first one is the key itself, and the second is the amount of time (milliseconds) you want the database to change its encryption key. This function should be called right after the user logs in, so you can retrieve his key whenever your app needs it.

    \n

    Getting the key:

    \n
    let mainKey = {key:\"\"};
    let requestKey = new processDb();
        requestKey.getKey(); 
        setTimeout(function() { 
            mainKey.key = requestKey.returnKey();
             if (mainKey.key === \"\"){
           // Do something here!
        } else {
          // Do something else!
        }
        },0);
    \n

    We need to request the key inside a setTimout function; otherwise, it will return nothing. We also need to check if any key was returned, and that's why we used if (mainKey.key === "") in our example.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-printer":{"name":"nativescript-printer","version":"3.0.0","license":"MIT","readme":"

    NativeScript Printer plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    Think about the environment before printing!

    \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-printer
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo! Otherwise, continue reading.

    \n

    Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

    \n

    Android screenshots

    \n

        

    \n

    iOS screenshots

    \n

        

    \n

    API

    \n

    isSupported

    \n

    Not all devices support printing, so it makes sense to check the device capabilties beforehand.

    \n
    TypeScript
    \n
    // require the plugin
    import {Printer} from \"nativescript-printer\";

    // instantiate the plugin
    let printer = new Printer();

    printer.isSupported().then((supported) => {
      alert(supported ? \"Yep!\" : \"Nope :'(\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printImage

    \n
    TypeScript
    \n
    // let's load an image that we can print. In this case from a local folder.
    let fs = require(\"file-system\");
    let appPath = fs.knownFolders.currentApp().path;
    let imgPath = appPath + \"/res/printer.png\";
    let imgSrc = new ImageSource();
    imgSrc.loadFromFile(imgPath);

    printer.printImage({
      imageSrc: imgSrc
    }).then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printPDF

    \n
    TypeScript
    \n
    import { knownFolders } from \"tns-core-modules/file-system/file-system\";

    printer.printPDF({
      pdfPath: knownFolders.currentApp().path + \"/pdf-test.pdf\"
    }).then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    printScreen

    \n

    Prints the current screen contents. Anything off screen will not be printed.

    \n
    TypeScript
    \n
    printer.printScreen().then((success) => {
      alert(success ? \"Printed!\" : \"Not printed\");
    }, (error) => {
      alert(\"Error: \" + error);
    });
    \n

    You can also print a specific portion of the screen, which also enables you to print\nviews that are larger than the viewport. This is an example of a non-Angular NativeScript app:

    \n

    Note\nIf the view is either of the following depending on the size of it's contents it would break into multiple pages.

    \n

    Label | TextView | HtmlView | WebView

    \n
      <StackLayout id=\"printMe\">
        <Label text=\"Print me :)\" />
      </StackLayout>

      <Button text=\"Print\" tap=\"{{ print }}\" />
    \n
      public print(args) {
        printer.printScreen({
          view: args.object.page.getViewById(\"printMe\")
        });
      }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tooltip":{"name":"nativescript-tooltip","version":"2.1.2","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript ToolTip

    \n

    Install

    \n

    tns plugin add nativescript-tooltip

    \n

    Usage

    \n

    TypeScript

    \n
    import {ToolTip} from \"nativescript-tooltip\";
    const tip = new ToolTip(view,{text:\"Some Text\"});
    tip.show();  //.hide()
    \n

    JavaScript

    \n
    const ToolTip = require(\"nativescript-tooltip\").ToolTip;
    const tip = new ToolTip(view,{text:\"Some Text\"});
    tip.show();  //.hide()
    \n

    Styling

    \n

    Android

    \n

    Add the following to your styles.xml in app/App_Resources/Android/values

    \n
    <!-- Custom ToolTip -->

        <style name=\"CustomToolTipLayoutStyle\" parent=\"ToolTipLayoutDefaultStyle\">
            <item name=\"ttlm_backgroundColor\">#FFFF00</item>
            <item name=\"android:textColor\">#000000</item>
            </style>
    \n

    IOS

    \n

    TypeScript

    \n
    import {ToolTip} from \"nativescript-tooltip\";
    const tip = new ToolTip(view,{text:\"Some Text\",backgroundColor:\"pink\",textColor:\"black\"});
    tip.show();  //.hide()
    \n

    JavaScript

    \n
    const ToolTip = require(\"nativescript-tooltip\").ToolTip;
    const tip = new ToolTip(view,{text:\"Some Text\",backgroundColor:\"pink\",textColor:\"black\"});
    tip.show();  //.hide()
    \n

    Config

    \n
    const config = {
      position?: \"left\" | \"up\" | \"right\" | \"down\" | \"top\" | \"bottom\";;
      text: string;
      viewType?: \"native\";
      duration?: number;
      fadeDuration?: number,
      width?: number;
      delay?: number;
      hideArrow?: boolean;
      backgroundColor?: string;
      textColor?: string;
      style?:string;
    }
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidIOS
    \"ss\"\"splash\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-particle":{"name":"nativescript-particle","version":"2.1.0","license":"Apache-2.0","readme":"

    NativeScript Particle plugin

    \n

    \"NPM\n\"Twitter

    \n

    \"Particle.io

    \n

    Prerequisites

    \n

    Hop on over to the Particle.io store and order any or all of their cool devices.

    \n
    \n

    While developing this plugin and the demo app I used a Photon Kit and it was a joy to work with.

    \n

    Thanks, Brandon Satrom for sending one over!

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-particle
    \n

    iOS 12+ setup

    \n

    iOS 12 and up requires you to enable 'Access WiFi Information' for your App ID here.

    \n

    Also, add this to your App_Resources/iOS/app.entitlements (mind the name!) file:

    \n
    <key>com.apple.developer.networking.wifi-info</key>
    <true/>
    \n

    The demo app has this:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
      <key>com.apple.developer.networking.wifi-info</key>
      <true/>
    </dict>
    </plist>
    \n

    Demo app

    \n

    If you want to just play with your Particle device without writing code yet,\nfollow these steps to install the demo app I've created with NativeScript Core:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-particle
    cd nativescript-particle/src
    npm i
    npm run demo.ios # or demo.android
    \n
    \n

    Tip: If you get tired entering your login credentials every time you log in, set the PARTICLE_USERNAME and PARTICLE_PASSWORD properties to reflect your own.

    \n
    \n

    Want to see the demo in action? Check out this short video 📺.

    \n

    API

    \n

    All examples below assume you have these imports and instantiated the Particle class:

    \n
    import { Particle, TNSParticleDevice, TNSParticleEvent } from \"nativescript-particle\";
    const particle = new Particle();
    \n

    startDeviceSetupWizard

    \n

    To help registering devices to your account (and avoid having to use the Particle CLI) you can add devices to your account right from your app! 😎

    \n
    particle.startDeviceSetupWizard()
        .then(isSuccessful => console.log(\"Wizard success? \" + isSuccessful));
    \n

    login

    \n

    Communication between your app and a device is HTTP (REST) based,\nso the first step is authenticating yourself with the Particle Cloud:

    \n
    particle.login(
        {
          username: \"my-particle-username@mydomain.com\",
          password: \"my-particle-password\"
        })
        .then(() => console.log(\"Login successful\"))
        .catch(error => console.log(`Login error: ${error}`));
    \n

    loginWithToken

    \n

    Alternatively, you can login with an access token.

    \n
    particle.loginWithToken(\"the_token\");
    \n

    logout

    \n

    Once done interacting with your device(s) it's best to log out as this will do a little cleanup in the plugin and underlying SDK.

    \n

    There's no reason not to because it couldn't be easier:

    \n
    particle.logout();
    \n

    publish

    \n

    Publish an event from your app to the Particle Device Cloud.

    \n
    particle.publish(
        \"ledStatusApp123\", // the event name
        \"ON\", // the event data (string)
        true, // isPrivate (default true)
        30 // ttl (default 60)
    );
    \n

    subscribe

    \n

    Subscribe to the firehose of public events, plus the private events published by devices one owns.\nYou really want to use a unique prefix, otherwise you'll receive a lot of data (not only from your own devices!).

    \n
    particle.subscribe(
        \"ledStatusApp123\",
        (event: TNSParticleEvent) => console.log(`Got a ledStatus event for App 123 from the Particle Cloud: ${JSON.stringify(event)}`));
    \n

    unsubscribe

    \n

    To stop receiving published events, unsubscribe from the events. Make sure the prefix is equal to the one you previously subscribed with.

    \n
    particle.unsubscribe(\"ledStatusApp123\");
    \n

    listDevices

    \n

    Make sure you've claimed a device in your Particle account, then do this to list them in your app:

    \n
    particle.listDevices()
        .then((devices: Array<TNSParticleDevice>) => {
          if (devices.length === 0) {
            console.log(\"No devices have been claimed in this account.\");
          } else {
            console.log(\"Devices fetched.. now do something neat with 'em.\");
          }
        })
        .catch(error => console.log(`Error fetching devices: ${error}`))    ;
    \n

    The returned list of TNSParticleDevice objects has these properties and functions:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringThe unique ID of this device.
    namestringThe given name of this device.
    statusstringThe current status of the device, usually normal.
    connectedbooleanWhether or not the device is currently connected..
    typeTNSParticleDeviceTypeOne of Unknown, Core, Photon, P1, Electron, RaspberryPi, DigistumpOak, RedBearDuo, Bluz.
    functionsArray<string>The list of functions currently available on the device. You can invoke these with callFunction (see below).
    variablesArray<TNSParticleDeviceVariable>The list of variables currently available on the device. You can get their values with getVariable (see below).
    \n

    <device>.rename

    \n

    You can change the device name right from your app! 💪

    \n
    const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

    myDevice.rename(\"rocket_bubble\")
        .then(() => console.log(\"Device renamed\"))
        .catch(error => console.log(`Error renaming the device: ${error}`));
    \n

    <device>.callFunction

    \n

    You can invoke any of the functions you discovered on the device.

    \n

    As an example let's assume you've flashed this code tutorial to your device,\nso there's a led function which takes 1 argument: the value must be either "on", or "off":

    \n
    const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

    myDevice.callFunction(\"led\", \"on\")
        .then(result => console.log(`Result: ${result}`))
        .catch(error => console.log(`Error in callFunction: ${error}`));
    \n

    What if you have a function which takes multiple arguments? Let's assume you're using the tinker app and want to set "D7" to "HIGH" via the "digitalWrite" function:

    \n
    myDevice.callFunction(\"digitalWrite\", \"D7\", \"HIGH\")
        .then(result => console.log(`Result: ${result}`))
        .catch(error => console.log(`Error in callFunction: ${error}`));
    \n

    <device>.getVariable

    \n

    Getting a variable is quite similar to callFunction.

    \n

    Let's say you have a variable named "analogvalue", then this will give you the current state of that variable:

    \n
    const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

    myDevice.getVariable(\"analogvalue\")
        .then(result => console.log(`Result: ${result}`))
        .catch(error => console.log(`Error in getVariable: ${error}`));
    \n

    <device>.subscribe

    \n

    You can get notified in your app in case an app on one of your devices publishes an event.

    \n

    To suppress noise you can filter those events by supplying a prefix, in this case my-prefix-, so events like my-prefix-temp or my-prefix-sensorOn are caught:

    \n
    const myDevice: TNSParticleDevice = null; // you got this from 'listDevices'

    myDevice.subscribe(
        \"my-prefix-\",
        (event: TNSParticleEvent) => console.log(`device event: ${JSON.stringify(event)}`));
    \n

    <device>.unsubscribe

    \n

    To stop receiving published events from your devices, unsubscribe from the events. Make sure the prefix is equal to the one you previously subscribed with.

    \n
    myDevice.unsubscribe(\"my-prefix-\");
    \n

    <device>.unclaim

    \n

    Removes this device from your account.

    \n
    myDevice.unclaim();
    \n

    Thanks!

    \n

    markoImake for adding a few very cool features.

    \n

    Happy IoT'ing! 🕹🤖🚪🖲💡📸🎙⛈🚦🛎🔊

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webkit-webview":{"name":"nativescript-webkit-webview","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript WebKit WebView

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-webkit-webview
    \n

    Usage

    \n

    Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('WebView', () => require('nativescript-webkit-webview').TNSWKWebView);
    \n
    <WebView src=\"https://www.google.com\"></WebView>
    \n

    IMPORTANT: Make sure you include xmlns:wk="nativescript-webkit-webview" on the Page tag

    \n
    <wk:TNSWKWebView src=\"https://www.google.com\"/>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-zoom":{"name":"nativescript-image-zoom","version":"3.0.3","license":"Apache-2.0","readme":"

    NativeScript Image Zoom

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-image-zoom
    \n

    Configuration

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-image-zoom" on the\nPage element

    \n
    <ui:ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"/>
    \n

    Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
    \n
    <ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    maxZoom5number
    • - [ ]
    minZoom1number
    • - [ ]
    zoomScale1number
    • - [ ]
    		IOS only
    srcstring
    • - [x]
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-https-thelonecabbage":{"name":"nativescript-https-thelonecabbage","version":"2.2.0","license":"MIT","readme":"

    NativeScript-HTTPS

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    The definitive way to hit HTTP based APIs in Nativescript.

    \n

    Easily integrate the most reliable native networking libraries with the latest and greatest HTTPS security features.

    \n
    \n

    Plugin version 2.0.0 bumps AFNetworking on iOS to 4.0.0 which no longer relies on UIWebView. Make sure to run pod repo update to get the latest AFNetworking pod on your development machine.

    \n
    \n

    A drop-in replacement for the default http module.

    \n

    Features

    \n
      \n
    • Modern TLS & SSL security features
      • \n
    • Shared connection pooling reduces request latency
      • \n
    • Silently recovers from common connection problems
      • \n
    • Everything runs on a native background thread
      • \n
    • Transparent GZIP
      • \n
    • HTTP/2 support
      • \n
    • Multiform part
      • \n
    • Cache
      • \n
    • Basic Cookie support
      • \n
    \n

    FAQ

    \n
    \n

    What the flip is SSL pinning and all this security mumbo jumbo?

    \n
    \n

    How to make your apps more secure with SSL pinning.

    \n
    \n

    Do I have to use SSL pinning?

    \n
    \n

    No. This plugin works out of the box without any security configurations needed. Either way you'll still benefit from all the features listed above.

    \n

    Demo

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-https
    cd nativescript-https/src
    npm run demo.ios
    npm run demo.android
    \n

    Installation

    \n

    Add tns-platform-declarations for Android and iOS to your references.d.ts!

    \n
    /// <reference path=\"./node_modules/tns-platform-declarations/android.d.ts\" />
    /// <reference path=\"./node_modules/tns-platform-declarations/ios.d.ts\" />
    \n

    We also recommend adding "skipLibCheck": true, to your tsconfig.json.\nMore information on that can be found here.

    \n

    Install the plugin:

    \n
    tns plugin add nativescript-https
    \n

    Examples

    \n

    Hitting an API using GET method

    \n
    import * as Https from 'nativescript-https'
    Https.request({
    \turl: 'https://httpbin.org/get',
    \tmethod: 'GET',
    \ttimeout: 30 // seconds (default 10)
    }).then(function(response) {
    \tconsole.log('Https.request response', response)
    }).catch(function(error) {
    \tconsole.error('Https.request error', error)
    })
    \n

    Configuration

    \n

    Installing your SSL certificate

    \n

    Create a folder called assets in your projects app folder like so <project>/app/assets. Using chrome, go to the URL where the SSL certificate resides. View the details then drag and drop the certificate image into the assets folder.

    \n

    \"Installing

    \n

    Enabling SSL pinning

    \n
    import { knownFolders } from 'file-system'
    import * as Https from 'nativescript-https'
    let dir = knownFolders.currentApp().getFolder('assets')
    let certificate = dir.getFile('httpbin.org.cer').path
    Https.enableSSLPinning({ host: 'httpbin.org', certificate })
    \n

    Once you've enabled SSL pinning you CAN NOT re-enable with a different host or certificate file.

    \n

    Disabling SSL pinning

    \n
    import * as Https from 'nativescript-https'
    Https.disableSSLPinning()
    \n

    All requests after calling this method will no longer utilize SSL pinning until it is re-enabled once again.

    \n

    useLegacy

    \n

    There is a new option called useLegacy. You can set of every request options.\nWhen using that option the request will behave more like {N} http module.

    \n
      \n
    • the content returned by a request is not the resulting string but an object. It follows HTTPContent format for the most part. You can call toJSON or toFile. The only difference is that toFile returns a Promise<File> which means that it is async and run in a background thread!
      • \n
    • an error return a content too allowing you to read its content.
      • \n
    \n

    Cookie

    \n

    By default basic Cookie support is enabled to work like in {N} http module.\nIn the future more options will be added

    \n

    Enabling Cache

    \n
    import { knownFolders, path } from '@nativescript/core/file-system';
    import * as Https from 'nativescript-https'
    Https.setCache({
        diskLocation: path.join(knownFolders.documents().path, 'httpcache'),
        diskSize: 10 * 1024 * 1024 // 10 MiB
    });

    /// later on when calling your request you can use the cachePolicy option
    \n

    Multipart form data

    \n

    If you set the Content-Type header to "multipart/form-data" the request body will be evaluated as a multipart form data. Each body parameter is expected to be in this format:

    \n
    {
    \tdata: any
        parameterName: string,
        fileName?: string
        contentType?: string
    }
    \n

    if fileName and contentType are set then data is expected to be either a NSData on iOS or a native.Array<number> on Android.

    \n

    Options

    \n
    export interface HttpsSSLPinningOptions {
    \thost: string
    \tcertificate: string
    \tallowInvalidCertificates?: boolean
    \tvalidatesDomainName?: boolean
    \tcommonName?: string
    }
    import { HttpRequestOptions } from 'tns-core-modules/http';
    export interface HttpsRequestOptions extends HTTPOptions{
    \tuseLegacy?: boolean
    \tcachePolicy?: 'noCache' | 'onlyCache' | 'ignoreCache'
    \tonProgress?: (current: number, total: number) => void
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    SSLPinning OptionDescription
    host: stringThis must be the request domain name eg sales.company.org.
    commonName?: stringDefault: options.host, set if certificate CN is different from the host eg *.company.org (Android specific)
    certificate: stringThe uri path to your .cer certificate file.
    allowInvalidCertificates?: booleanDefault: false. This should always be false if you are using SSL pinning. Set this to true if you're using a self-signed certificate.
    validatesDomainName?: booleanDefault: true. Determines if the domain name should be validated with your pinned certificate.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Requests OptionDescription
    useLegacy?: booleanDefault: false. [IOS only] set to true in order to get the response data (when status >= 300)in the content directly instead of response.body.content.
    `cachePolicy?: 'noCache''onlyCache'
    onProgress?: (current: number, total: number) => void[IOS only] Set the progress callback.
    \n

    Webpack / bundling

    \n

    Since you're probably shipping a certificate with your app (like our demo does),\nmake sure it's bundled by Webpack as well. You can do this by adding the certificate(s) with the CopyWebpackPlugin.

    \n

    iOS Troubleshooting

    \n
    \n

    Please educate yourself on iOS's App Transport Security before starting beef!

    \n
    \n

    If you try and hit an https route without adding it to App Transport Security's whitelist it will not work!\nYou can bypass this behavior by adding the following to your projects Info.plist:

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    \n
    \n

    This plugin does not add NSAllowsArbitraryLoads to your projects Info.plist for you.

    \n
    \n

    Android troubleshooting

    \n

    If you app crashes with a message that it's doing too much networkin on the main thread,\nthen pass the option allowLargeResponse with value true to the request function.

    \n

    Thanks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WhoWhy
    Robert LavertyFor creating and maintaining this plugin for a long time, before transfering it to me, with the help of Jeff Whelpley of GetHuman.
    AFNetworkingAFNetworking A delightful networking framework for iOS, OS X, watchOS, and tvOS.
    Squareokhttp An HTTP+HTTP/2 client for Android and Java applications.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-brightness":{"name":"nativescript-brightness","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Brightness

    \n

    \"Build\n\"npm\"

    \n

    A plugin for manipulating your device's screeen brightness in NativeScript Android and iOS apps.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-brightness
    \n

    This command automatically installs the necessary files, as well as stores nativescript-brightness as a dependency in your project's package.json file.

    \n

    This plugin requires <uses-permission android:name="android.permission.WRITE_SETTINGS"/> to be added in the android manifest.

    \n

    Usage

    \n

    To use the brightness module you must first require() and instantiate it:

    \n
    // JavaScript
    var nativescriptBrightness = require(\"nativescript-brightness\");
    var brightness = new nativescriptBrightness.Brightness();
    \n

    Or if you’re using TypeScript, import the module:

    \n
    // TypeScript
    import { Brightness } from 'nativescript-brightness';
    const brightness = new Brightness();
    \n

    After you have a reference to the module you can then call its get() and set() methods. For example, the code below updates you screen's brightness with an intensity setting of 25%.

    \n

    The intensity can be set to a value from 1 to 100.

    \n
    // TypeScript
    import { Brightness } from 'nativescript-brightness';
    const brightness = new Brightness();

    brightness.set({
        intensity: 25
    });
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    set(options: BrightnessOptions)set screen's brightness to the desired intensity
    getreturns current screen brightness value as a number between 0 and 100
    getNativereturns current screen brightness value as returned from the native api: between 0.0 and 1.0 for iOS and 0 and 255 for android
    \n

    BrightnessOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    intensity100defines the desired brightness value, which should be a number between 0 and 100.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dec-sdk":{"name":"nativescript-dec-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

    Progress Sitefinity Digital Experience Cloud SDK plugin for NativeScript \"apple\" \"android\"

    \n

    \"NPM

    \n

    The purpose of this plugin is to help and ease the developers working with Progress Sitefinity Digital Experience Cloud API. It simplifies the sending of user Interactions to the DEC servers and the getting of Personalization information from there.

    \n

    Prerequisites

    \n

    A valid Digital Experience Cloud account is needed for the use of this plugin.

    \n

    Installation

    \n
    tns plugin add nativescript-dec-sdk
    \n

    Usage

    \n

    Require/Import the DecClient and then to initialize it with proper Options object.

    \n

    Javascript

    \n
    var DecClient = require(\"nativescript-dec-sdk\").DecClient;
    var client = new DecClient({
        apiKey: 'your DEC Data center Api key',
        source: 'the data source name used by the client',
        authToken: 'your DEC Data center Authentication token', // Not required - needed only if Personalization calls to DEC Data center are used.
        apiServerUrl: 'Api server url' // Not required - only use if the url is a custom one.
    });
    \n

    Typescript

    \n
    import { DecClient } from \"nativescript-dec-sdk\";
    let client = new DecClient({
        apiKey: 'your DEC Data center Api key',
        source: 'the data source name used by the client',
        authToken: 'your DEC Data center Authentication token', // Not required - needed only if Personalization calls to DEC Data center are used.
        apiServerUrl: 'Api server url' // Not required - only use if the url is a custom one.
    });
    \n

    API

    \n

    Personalization calls

    \n

    Function

    \n
    client.IsInPersonas(scoringIds, subjectKey)
    \n
      \n
    • scoringIds - an array of Persona Ids.
      • \n
    • subjectKey - the User's Id
      • \n
    \n
    \n

    Function

    \n
    client.IsInLeads(scoringIds, subjectKey);
    \n
      \n
    • scoringIds - an array of Lead Scoring Ids.
      • \n
    • subjectKey - the User's Id
      • \n
    \n
    \n

    Function

    \n
    client.IsInCampaigns(campaignIds, subjectKey);
    \n
      \n
    • campaignIds - an array of Lead Scoring Ids.
      • \n
    • subjectKey - the User's Id
      • \n
    \n
    \n
    \n

    Interactions

    \n

    Function

    \n
    client.writeInteraction(interaction);
    \n

    The interaction should follow this structure:

    \n
    {
        S: '', // The Interaction's Subject.
        P: '', // The Interaction's Predicate.
        O: '', // The Interaction's Object.
        SM: {}, // The Interaction's Subject Metadata. 
        OM: {}, // The Interaction's Object Metadata.
        MappedTo: {} // The Interaction's Mapping.
    }
    \n

    Important: A valid Interaction should always contain a Subject in combination with any number of the other properties.

    \n
    \n

    Function

    \n
    client.writeSubjectMetadata(subjectKey, metadata);
    \n
      \n
    • subjectKey - the User's Id
      • \n
    • metadata - a metadata object.
      • \n
    \n
    \n

    Function

    \n
    client.writeObjectMetadata(subjectKey, metadata);
    \n
      \n
    • subjectKey - the User's Id
      • \n
    • metadata - a metadata object.
      • \n
    \n
    \n

    Function

    \n
    client.addMapping(subjectKey, secondSubjectKey, secondDataSource);
    \n
      \n
    • subjectKey - the User's Id
      • \n
    • secondSubjectKey - the User's Id from the other source.
      • \n
    • secondDataSource - The other data source.
      • \n
    \n
    \n

    Function

    \n
    client.buildPersonalizationReportInteraction(personalizationReportParams);
    \n

    The personalizationReportParams should follow this structure (all properties are required!):

    \n
    {
        subjectKey: '', // The Subject key of the Application's user.
        pageGuid: '', // The guid of the page currently personalized.
        canonicalTitle: '', // The title of the page currently personalized.
        canonicalUrl: '', // The url of the page currently personalized. 
        segment: '', // The segment by which the page is personalized - the Persona, the Lead Scoring or the Campaign.
        language: '' // The language of the page currently personalized.
    }
    \n
    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"whocode-nativescript-webrtc":{"name":"whocode-nativescript-webrtc","version":"2.0.7","license":"Apache-2.0","readme":"

    NativeScript WebRTC

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Uses this for Android and this for iOS.

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-webrtc-plugin
      • \n
    \n

    Android

    \n

    Add the following to your app.gradle located in app/App_Resources

    \n
    android {
    ....
    compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
      }
    }
    \n

    How to make a call

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
    \n

    IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

    \n
    <webrtc:WebRTCView id=\"remoteVideoView\" height=\"50%\" />
    <webrtc:WebRTCView  id=\"localVideoView\" height=\"50%\" />
    \n

    Using Angular ?

    \n

    Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import WebRTCView from 'nativescript-webrtc-plugin/vue';

    Vue.use(WebRTCView);
    \n
    <WebRTCView #remoteVideoView height=\"50%\" ></WebRTCView>
    <WebRTCView #localVideoView height=\"50%\" ></WebRTCView>
    \n

    Standard Api :sparkles: New :sparkles:

    \n

    This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

    \n

    Basic Api

    \n

    Caller

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
      const object = args.object;
      const remoteVideoTrack = object.get('remoteVideoTrack');
      remoteStream = object.get('stream');
      const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
      video.videoTrack = remoteVideoTrack;
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type');
      if (type === 'answer') {
        webrtc.handleAnswerReceived({
          sdp: sdp,
          type: type
        });
      } else {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    webrtc.makeOffer();
    \n

    Callee

    \n
    import { WebRTC } from 'nativescript-webrtc-plugin';
    const webrtc = new WebRTC({
      enableAudio: true, // default true
      enableVideo: false, // default true
      iceServers: [
        // Optional defaults to google stun servers
        {
          url: 'stun:stun.l.google.com:19302'
        },
        {
          url: 'serverRequiresAuth',
          username: 'username',
          password: 'password'
        }
      ]
    });

    webrtc.on('webRTCClientStartCallWithSdp', args => {
      const sdp = args.object.get('sdp');
      const type = args.object.get('type') as WebRTCSdpType;
      if (type === WebRTCSdpType.ANSWER) {
        // send data to signaling server
      }
    });

    webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
      const iceCandidate = args.object.get('iceCandidate');
      // send data to signaling server
    });

    // Before using getUserMedia verify the app has the permissions and if not try requesting them

    if (!WebRTC.hasPermissions()) {
      try {
        await WebRTC.requestPermissions();
        localStream = await webrtc.getUserMedia(Quality.HIGHEST);
      } catch (e) {}
    }

    webrtc.connect();
    webrtc.addLocalStream(localStream);
    // sdp received from the signaling server
    webrtc.createAnswerForOfferReceived({
      type: sdp.type,
      sdp: sdp.sdp
    });
    \n

    Using demo

    \n

    Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

    \n
      \n
    1. \n

      Start demo-server by running npm i && node app

      \n
      2. \n
    2. \n

      Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

      \n
      3. \n
    3. \n

      Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

      \n
      4. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gameanalytics":{"name":"nativescript-gameanalytics","version":"3.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"MIT

    \n

    NativeScript-GameAnalytics

    \n

    NativeScript plugin for the GameAnalytics SDK for Android and iOS.

    \n

    Native Libraries:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    GA-SDK-ANDROIDGA-SDK-IOS
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    NativeScript (only 3.0+)

    \n

    tns plugin add nativescript-gameanalytics

    \n

    Usage

    \n
    import {
        GameAnalyticsSDK as GameAnalytics,
        EGAResourceFlowType,
        EGAProgressionStatus,
        EGAErrorSeverity,
        EGAGender
    } from 'nativescript-gameanalytics';

    // To initialize the SDK...

    public initializeGameAnalytics() {
        GameAnalytics.initialize(\"[INSERT_GAME_KEY]\", \"[INSERT_SECRET_KEY]\");
    }

    // To send events...
    public sendEvent() {
        GameAnalytics.addDesignEvent({
            eventId: \"design:event\"
        });
    }
    \n

    For more documentation click here.

    \n

    Changelog

    \n\n

    3.0.1

    \n
      \n
    • added session_num to init request
      • \n
    \n

    3.0.0

    \n
      \n
    • Remote Config calls have been updated and the old calls have deprecated. Please see GA documentation for the new SDK calls and migration guide
      • \n
    • A/B testing support added
      • \n
    \n

    2.1.3

    \n
      \n
    • removed enum from declaration file
      • \n
    \n

    2.1.2

    \n
      \n
    • dependencies updated
      • \n
    \n

    2.1.1

    \n
      \n
    • declaration file fixed
      • \n
    \n

    2.1.0

    \n
      \n
    • added enable/disable event submission function
      • \n
    \n

    2.0.4

    \n
      \n
    • updated nativescript version
      • \n
    \n

    2.0.3

    \n
      \n
    • small fixes to android
      • \n
    \n

    2.0.2

    \n
      \n
    • fixed business event validation
      • \n
    \n

    2.0.1

    \n
      \n
    • small bug fixes
      • \n
    \n

    2.0.0

    \n
      \n
    • added comand center functionality
      • \n
    \n

    1.1.8

    \n
      \n
    • updated native libs
      • \n
    \n

    1.1.7

    \n
      \n
    • reversed to tns-core-modules 3.4.0
      • \n
    \n

    1.1.6

    \n
      \n
    • another fix to gradle file
      • \n
    \n

    1.1.5

    \n
      \n
    • another fix to gradle file
      • \n
    \n

    1.1.4

    \n
      \n
    • small fix to gradle file
      • \n
    \n

    1.1.3

    \n
      \n
    • README updated
      • \n
    \n

    1.1.2

    \n
      \n
    • fixed specific method for android that kept app hanging
      • \n
    \n

    1.1.1

    \n
      \n
    • small fix to declaration file
      • \n
    \n

    1.1.0

    \n
      \n
    • added GA beta functionality from native libs
      • \n
    \n

    1.0.16

    \n
      \n
    • updated native libraries
      • \n
    \n

    1.0.15

    \n
      \n
    • fixed session length bug
      • \n
    • fixed not allowing to add events when session is not started
      • \n
    \n

    1.0.14

    \n
      \n
    • changed to use pod file for ios platform
      • \n
    \n

    1.0.13

    \n
      \n
    • updated google play services compiled with native android library
      • \n
    \n

    1.0.12

    \n
      \n
    • updated native libraries
      • \n
    \n

    1.0.11

    \n
      \n
    • updated native ios header for missing function (ios)
      • \n
    \n

    1.0.10

    \n
      \n
    • small bug fix in initialize function for ios (ios)
      • \n
    \n

    1.0.9

    \n
      \n
    • fixed version sent with events
      • \n
    \n

    1.0.8

    \n
      \n
    • fixed setting sdk version when initializing
      • \n
    \n

    1.0.7

    \n
      \n
    • updated version validator in native libraries
      • \n
    \n

    1.0.6

    \n
      \n
    • added sdk version to tracking
      • \n
    \n

    1.0.5

    \n
      \n
    • bug fix initialize for android
      • \n
    \n

    1.0.4

    \n
      \n
    • updated native ios library version used
      • \n
    \n

    1.0.3

    \n
      \n
    • updated native android library version used
      • \n
    \n

    1.0.2

    \n
      \n
    • small fix for clearing current custom dimension for iOS
      • \n
    \n

    1.0.1

    \n
      \n
    • readme updated
      • \n
    \n

    1.0.0

    \n
      \n
    • initial commit
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts":{"name":"nativescript-contacts","version":"1.6.4","license":"MIT","readme":"

    NativeScript Contacts

    \n

    A NativeScript module providing easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.\nWorking with groups available in 1.5.0. Create a group, add and remove contacts to the group, and delete a group.

    \n

    Installation

    \n

    Run tns plugin add nativescript-contacts

    \n

    Usage

    \n

    To use the contacts module you must first require() it.

    \n
    var contacts = require(\"nativescript-contacts\");
    \n

    iOS Caveats

    \n

    Add following key to Info.plist found in app/App_Resources/iOS/Info.plist

    \n
    <key>NSContactsUsageDescription</key>
    <string>Kindly provide permission to access contact on your device.</string>
    \n

    User will be asked for permissions when contacts are accessed by the app.

    \n

    Android Caveats

    \n

    From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your manifest:

    \n
    <uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    <uses-permission android:name=\"android.permission.READ_CONTACTS\" />
    <uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
    \n

    You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the great nativescript-permissions plugin):

    \n
    const contact = new Contact();
    (...)
    Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], \"I need these permissions because I'm cool\")
                .then(() => {
                    contact.save();
                });
    \n

    Methods

    \n

    getContact: Pick one contact and bring back its data.

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below

        // lets say you wanted to grab first name and last name
        console.log(contact.name.given + \" \" + contact.name.family);

        //lets say you want to get the phone numbers
        contact.phoneNumbers.forEach(function(phone) {
          console.log(phone.value);
        });

        //lets say you want to get the addresses
        contact.postalAddresses.forEach(function(address) {
          console.log(address.location.street);
        });
      }
    });
    \n

    Save a new contact

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"@nativescript/core/image-source\");

    var newContact = new contacts.Contact();
    newContact.name.given = \"John\";
    newContact.name.family = \"Doe\";
    newContact.phoneNumbers.push({
      label: contacts.KnownLabel.HOME,
      value: \"123457890\"
    }); // See below for known labels
    newContact.phoneNumbers.push({ label: \"My Custom Label\", value: \"11235813\" });
    newContact.photo = imageSource.fromFileOrResource(\"~/photo.png\");
    newContact.save();
    \n

    Update an existing contact

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"@nativescript/core/image-source\");

    contacts.getContact().then(function(args) {
      if (args.response === \"selected\") {
        var contact = args.data;
        contact.name.given = \"Jane\";
        contact.name.family = \"Doe\";

        imageSource
          .fromUrl(\"http://www.google.com/images/errors/logo_sm_2.png\")
          .then(function(src) {
            contact.photo = src;
            contact.save();
          });
      }
    });
    \n

    Delete a contact

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contact.delete();
      }
    });
    \n

    Check if contact is Unified/Linked (iOS Specific)

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        console.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
      }
    });
    \n

    getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getContactsByName(\"Hicks\", contactFields).then(
      function(args) {
        console.log(\"getContactsByName Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getAllContacts: Find all contacts. Returns an array of contact data.

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

      If not supplied, all available contactFields will be returned.
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getAllContacts(contactFields).then(
      function(args) {
        console.log(\"getAllContacts Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    var contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

    contacts.getContactById(contactId).then(
      function(args) {
        console.log(\"getContactById Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getGroups: Find groups. Returns an array of group data.

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          console.log(\"getGroups Complete\");
          console.log(JSON.stringify(args));
          /// Returns args:
          /// args.data: Generic cross platform JSON object, null if no groups were found.
          /// args.reponse: \"fetch\"

          if (args.data === null) {
            console.log(\"No Groups Found!\");
          } else {
            console.log(\"Group(s) Found!\");
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Save a new group

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    var groupModel = new contacts.Group();
    groupModel.name = \"Test Group\";
    //Save Argument (boolean)
    //iOS: [false=> Use Local Container, true=> Use Default Container]
    //Android: will always be true, setting this value will not affect android.
    groupModel.save(false);
    \n

    Delete a group

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getGroups(\"Test Group\").then(
      function(args) {
        console.log(\"getGroups Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no groups were found.
        /// args.reponse: \"fetch\"

        if (args.data !== null) {
          console.log(\"Group(s) Found!\");
          args.data[0].delete(); //Delete the first found group
        }
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    Add Member To Group

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contacts.getGroups(\"Test Group\").then(
          function(a) {
            if (a.data !== null) {
              var group = a.data[0];
              group.addMember(contact);
            }
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    });
    \n

    Remove Member From Group

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
                console.log(\"getContactsInGroup complete\");

                if (a.data !== null) {
                  a.data.forEach(function(c, idx) {
                    group.removeMember(c);
                  });
                }
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

    \n
    var app = require(\"@nativescript/core/application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                console.log(\"getContactsInGroup complete\");
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Single User Data Structure

    \n
    {
        id : \"\",
        name : {
            given: \"\",
            middle: \"\",
            family: \"\",
            prefix: \"\",
            suffix: \"\",
            displayname: \"\",
            phonetic : {
                given: \"\",
                middle: \"\",
                family: \"\"
            }
        },
        nickname : \"\",
        organization : {
            name: \"\",
            jobTitle: \"\",
            department: \"\",

            // Android Specific properties
            symbol: \"\",
            phonetic: \"\",
            location: \"\",
            type: \"\"
        },
        notes : \"\",
        photo: null, // {N} ImageSource instance

        phoneNumbers : [],
        emailAddresses : [],
        postalAddresses : [],
        urls : []
    }
    \n

    PhoneNumber / EmailAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        value: \"\"
    }
    \n

    Url structure

    \n
    {
        label: \"\",
        value: \"\"
    }
    \n

    PostalAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        location: {
            street: \"\",
            city: \"\",
            state: \"\",
            postalCode: \"\",
            country: \"\",
            countryCode: \"\"
        }
    }
    \n

    Known Labels (for Urls, Addresses and Phones)

    \n

    The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

    \n
      \n
    • HOME\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • WORK\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • OTHER\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • FAX_HOME\niOS - phone\nAndroid - phone
      • \n
    • FAX_WORK\niOS - phone\nAndroid - phone
      • \n
    • PAGER\niOS - phone\nAndroid - phone
      • \n
    • MAIN\niOS - phone\nAndroid - phone
      • \n
    • HOMEPAGE\niOS - url\nAndroid - url
      • \n
    • CALLBACK\nAndroid - phone
      • \n
    • CAR\nAndroid - phone
      • \n
    • COMPANY_MAIN\nAndroid - phone
      • \n
    • ISDN\nAndroid - phone
      • \n
    • OTHER_FAX\nAndroid - phone
      • \n
    • RADIO\nAndroid - phone
      • \n
    • TELEX\nAndroid - phone
      • \n
    • TTY_TDD\nAndroid - phone
      • \n
    • WORK_MOBILE\nAndroid - phone
      • \n
    • WORK_PAGER\nAndroid - phone
      • \n
    • ASSISTANT\nAndroid - phone
      • \n
    • MMS\nAndroid - phone
      • \n
    • FTP\nAndroid - url
      • \n
    • PROFILE\nAndroid - url
      • \n
    • BLOG\nAndroid - url
      • \n
    \n

    Those are the system labels but you can also use any custom label you want.

    \n

    Single Group Data Structure

    \n
    {
      id: \"\";
      name: \"\";
    }
    \n

    GetFetchResult Data Structure

    \n

    The object returned by contact fetch requests.

    \n
    {
      data: Contact[];
      response: string;
    }
    \n

    iOS

    \n

    See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

    \n

    NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-push-notifications":{"name":"nativescript-ssi-push-notifications","version":"1.4.4","license":"Apache-2.0","readme":"

    Push Plugin for NativeScript

    \n
    \n

    This plugin is deprecated. Feel free to use the Firebase Plugin for implementing push notifications in your NativeScript app. If you already have an app that use the Push Plugin, read the migrate-to-firebase doc for initial guidance.

    \n
    \n

    \"Build

    \n

    The code for the Push Plugin for NativeScript.

    \n\n\n\n

    Installation

    \n

    In the Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-push-notifications\n
    \n

    Configuration

    \n

    Android

    \n
    \n

    See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

    \n
    \n
      \n
    • \n

      Edit the package.json file in the root of application, by changing the bundle identifier to match the Firebase's project package name. For example:

      \n
      \"id\": \"org.nativescript.PushNotificationApp\"
      \n
      • \n
    • \n

      Edit the app/App_Resources/Android/app.gradle file of your application, by changing the application ID to match the bundle identifier from the package.json. For example:

      \n
      android {
      // ...
          defaultConfig {
              applicationId = \"org.nativescript.PushNotificationApp\"
          }
      // ...
      }
      \n
      • \n
    • \n

      Go to the application folder and add the Android platform to the application

      \n
      tns platform add android
      \n
      • \n
    • \n

      Add the google-settings.json file with the FCM configuration to the app/App_Resources/Android folder in your app. If this file is not added, building the app for android will fail.

      \n
      • \n
    \n

    The plugin will default to version 12.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion:

    \n
        // in the root level of /app/App_Resources/Android/app.gradle:
        project.ext {
            firebaseMessagingVersion = \"+\" // OR the version you wish
        }
    \n

    iOS

    \n
      \n
    • \n

      Ensure you have set up an App in your Apple Developer account, with Push Notifications enabled and configured. More on this in the Apple's AddingCapabilities documentation > Configuring Push Notifications section.

      \n
      • \n
    • \n

      Edit the package.json file in the root of application, by changing the bundle identifier to match the App ID. For example:

      \n
      \"id\": \"org.nativescript.PushNotificationApp\"
      \n
      • \n
    • \n

      Go to the application folder and add the iOS platform to the application

      \n
      tns build ios
      \n
      • \n
    • \n

      Go to (application folder)/platforms/ios and open the XCode project. Enable Push Notifications in the project Capabilities options. In case you don't have XCode, go to (application folder)/platforms/ios/(application folder name) , find *.entitlements file and add to it aps-environment key and its value as shown below:

      \n
      <plist version=\"1.0\">
      <dict>
          <key>aps-environment</key>
          <string>development</string>
      </dict>
      </plist>
      \n
      • \n
    \n

    Usage

    \n

    Using the plugin in Android

    \n

    Add code in your view model or component to subscribe and receive messages (don't forget to enter your Firebase Cloud Messaging Sender ID in the options of the register method):

    \n

    TypeScript

    \n
    import * as pushPlugin from \"nativescript-push-notifications\";
    private pushSettings = {
        senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
        notificationCallbackAndroid: (stringifiedData: String, fcmNotification: any) => {
            const notificationBody = fcmNotification && fcmNotification.getBody();
            this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
        }
    };
    pushPlugin.register(pushSettings, (token: String) => {
        alert(\"Device registered. Access token: \" + token);;
    }, function() { });
    \n

    Javascript

    \n
    var pushPlugin = require(\"nativescript-push-notifications\");
    var pushSettings = {
            senderID: \"<ENTER_YOUR_PROJECT_NUMBER>\", // Required: setting with the sender/project number
            notificationCallbackAndroid: function (stringifiedData, fcmNotification) {
                var notificationBody = fcmNotification && fcmNotification.getBody();
                _this.updateMessage(\"Message received!\\n\" + notificationBody + \"\\n\" + stringifiedData);
            }
        };
    pushPlugin.register(pushSettings, function (token) {
        alert(\"Device registered. Access token: \" + token);
    }, function() { });
    \n
      \n
    • \n

      Run the app on the phone or emulator:

      \n
      tns run android
      \n
      • \n
    • \n

      The access token is written in the console and displayed on the device after the plugin sucessfully subscribes to receive notifications. When a notification comes, the message will be displayed in the notification area if the app is closed or handled directly in the notificationCallbackAndroid callback if the app is open.

      \n
      • \n
    \n

    Using the plugin in iOS

    \n

    Add code in your view model or component to subscribe and receive messages:

    \n

    TypeScript

    \n
    import * as pushPlugin from \"nativescript-push-notifications\";
    const iosSettings = {
        badge: true,
        sound: true,
        alert: true,
        interactiveSettings: {
            actions: [{
                identifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
                identifier: 'CANCEL_IDENTIFIER',
                title: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
                identifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },
        notificationCallbackIOS: (message: any) => {
            alert(\"Message received!\\n\" + JSON.stringify(message));
        }
    };

    pushPlugin.register(iosSettings, (token: String) => {
        alert(\"Device registered. Access token: \" + token);

        // Register the interactive settings
        if(iosSettings.interactiveSettings) {
            pushPlugin.registerUserNotificationSettings(() => {
                alert('Successfully registered for interactive push.');
            }, (err) => {
                alert('Error registering for interactive push: ' + JSON.stringify(err))    ;
            });
        }
    }, (errorMessage: any) => {
        alert(\"Device NOT registered! \" + JSON.stringify(errorMessage));
    });
    \n

    Javascript

    \n
    var pushPlugin = require(\"nativescript-push-notifications\");
    var iosSettings = {
        badge: true,
        sound: true,
        alert: true,
        interactiveSettings: {
            actions: [{
                identifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
                identifier: 'CANCEL_IDENTIFIER',
                title: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
                identifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },
        notificationCallbackIOS: function (data) {
            alert(\"message\", \"\" + JSON.stringify(data));
        }
    };

    pushPlugin.register(iosSettings, function (data) {
        alert(\"Device registered. Access token\" + data);

        // Register the interactive settings
            if(iosSettings.interactiveSettings) {
                pushPlugin.registerUserNotificationSettings(function() {
                    alert('Successfully registered for interactive push.');
                }, function(err) {
                    alert('Error registering for interactive push: ' + JSON.stringify(err));
                });
            }
    }, function() { });
    \n
      \n
    • \n

      Run the app on the phone or simulator:

      \n
      tns run ios
      \n
      • \n
    • \n

      [HINT] Install the pusher app to send notifications to the device being debugged on. In the 'device push token' field paste the device access token generated in the {N} CLI / XCode debug console after launching the app.

      \n
      • \n
    \n

    API Reference

    \n

    Methods

    \n

    register(options, successCallback, errorCallback) - subscribe the device with Apple/Google push notifications services so the app can receive notifications

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionPlatformTypeDescription
    senderIDAndroidStringThe Sender ID for the FCM project. This option is required for Android.
    notificationCallbackAndroidAndroidFunctionCallback to invoke, when a push is received on Android.
    badgeiOSBooleanEnable setting the badge through Push Notification.
    soundiOSBooleanEnable playing a sound.
    alertiOSBooleanEnable creating a alert.
    clearBadgeiOSBooleanEnable clearing the badge on push registration.
    notificationCallbackIOSiOSFunctionCallback to invoke, when a push is received on iOS.
    interactiveSettingsiOSObjectInteractive settings for use when registerUserNotificationSettings is used on iOS.
    \n

    The interactiveSettings object for iOS can contain the following:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDescription
    actionsArrayA list of iOS interactive notification actions.
    categoriesArrayA list of iOS interactive notification categories.
    \n

    The actions array from the iOS interactive settings contains:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDescription
    identifierStringRequired. String identifier of the action.
    titleStringRequired. Title of the button action.
    activationModeStringSet to either "foreground" or "background" to launch the app in foreground/background and respond to the action.
    destructiveBooleanEnable if the action is destructive. Will change the action color to red instead of the default.
    authenticationRequiredBooleanEnable if the device must be unlocked to perform the action.
    behaviorStringSet if the action has a different behavior - e.g. text input.
    \n

    The categories array from the iOS interactive settings contains:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDescription
    identifierStringRequired. String identifier of the category.
    actionsForDefaultContextArrayRequired. Array of string identifiers of actions.
    actionsForMinimalContextArrayRequired. Array of string identifiers of actions.
    \n

    For more information about iOS interactive notifications, please visit the Apple Developer site

    \n
    var settings = {
        badge: true,
        sound: true,
        alert: true,
        interactiveSettings: {
            actions: [{
                identifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: \"foreground\",
                destructive: false,
                authenticationRequired: true
            }, {
            identifier: 'CANCEL_IDENTIFIER',
                title: 'Cancel',
                activationMode: \"foreground\",
                destructive: true,
                authenticationRequired: true
            }],
            categories: [{
                identifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
            }]
        },
        notificationCallbackIOS: function(message) {
            alert(JSON.stringify(message));
        }
    };


    pushPlugin.register(settings,
        // Success callback
        function(token){
            // Register the interactive settings
            if(settings.interactiveSettings) {
                pushPlugin.registerUserNotificationSettings(function() {
                    alert('Successfully registered for interactive push.');
                }, function(err) {
                    alert('Error registering for interactive push: ' + JSON.stringify(err));
                });
            }
        },
        // Error Callback
        function(error){
            alert(error.message);
        }
    );
    \n

    unregister(successCallback, errorCallback, options) - unsubscribe the device so the app stops receiving push notifications. The options object is the same as on the register method

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterPlatformTypeDescription
    successCallbackiOSFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
    successCallbackAndroidFunctionCalled when app is successfully unsubscribed. Has one string parameter with the result.
    errorCallbackAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
    optionsAndroidFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
    \n
    pushPlugin.unregister(
        // Success callback
        function(result) {
            alert('Device unregistered successfully');
        },
        // Error Callback
        function(errorMessage) {
            alert(errorMessage);
        },
        // The settings from the registration phase
        settings
    );
    \n

    areNotificationsEnabled(successCallback) - check if push notifications are enabled (iOS only, always returns true on Android)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterPlatformTypeDescription
    successCallbackiOS/AndroidFunctionCalled with one boolean parameter containing the result from the notifications enabled check.
    \n
    pushPlugin.areNotificationsEnabled(function(areEnabled) {
            alert('Are Notifications enabled: ' + areEnabled);
        });
    \n

    Android only

    \n

    onMessageReceived(callback) DEPRECATED - register a callback function to execute when receiving a notification. You should set this from the notificationCallbackAndroid registration option instead

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    stringifiedDataStringA string containing JSON data from the notification
    fcmNotificationObjectiOS/Android
    \n

    The fcmNotification object contains the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturns
    getBody()String
    getBodyLocalizationArgs()String[]
    getBodyLocalizationKey()String
    getClickAction()String
    getColor()String
    getIcon()String
    getSound()String
    getTag()String
    getTitle()String
    getTitleLocalizationArgs()String[]
    getTitleLocalizationKey()String
    \n

    onTokenRefresh(callback) - register a callback function to execute when the old token is revoked and a new token is obtained. Note that the token is not passed to the callback as an argument. If you need the new token value, you'll need to call register again or add some native code to obtain the token from FCM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    callbackFunctionCalled with no arguments.
    \n
    pushPlugin.onTokenRefresh(function() {
            alert(\"new token obtained\");
    });
    \n

    iOS only

    \n

    registerUserNotificationSettings(successCallback, errorCallback) - used to register for interactive push on iOS

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    successCallbackFunctionCalled when app is successfully unsubscribed. Has one object parameter with the result.
    errorCallbackFunctionCalled when app is NOT successfully unsubscribed. Has one parameter containing the error.
    \n

    Troubleshooting

    \n

    In case the application doesn't work as expected. Here are some things you can verify

    \n

    Troubleshooting issues in Android

    \n
      \n
    • \n

      When the application is started using tns run android (i.e. in debug mode with livesync) some background notifications might not be received correctly. This happens because the app is not started in a normal way for debugging and the resume from background happens differently. To receive all notifications correctly, stop the app (swipe it away it from the recent apps list) and start it again by tapping the app icon on the device.

      \n
      • \n
    • \n

      Thе google-services plugin is added automatically. If this fails, you can try adding it manually:

      \n
      • \n
    • \n
        \n
      • Navigate to the project platforms/android/ folder and locate the application-level build.gradle file
        • \n
      \n
      • \n
    • \n
        \n
      • Add the google-services plugin to the list of other dependencies in your app's build.gradle file
        dependencies {
        \t// ...
        \tclasspath \"com.google.gms:google-services:3.0.0\"
        \t// ...
        }
        \n
        • \n
      \n
      • \n
    • \n
        \n
      • Add the following line be at the bottom of your build.gradle file to enable the Gradle plugin
        apply plugin: 'com.google.gms.google-services'
        \n
        • \n
      \n
      • \n
    • \n

      Ensure that the AndroidManifest.xml located at platforms/android/build/... (do not add it in your "App_Resources/Android/AndroidManifest.xml" file) contains the following snippets for registering the GCM listener:

      \n
      <activity android:name=\"com.telerik.pushplugin.PushHandlerActivity\"/>
      <receiver
          android:name=\"com.google.android.gms.gcm.GcmReceiver\"
          android:exported=\"true\"
          android:permission=\"com.google.android.c2dm.permission.SEND\" >
          <intent-filter>
              <action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
              <category android:name=\"com.pushApp.gcm\" />
          </intent-filter>
      </receiver>
      <service
          android:name=\"com.telerik.pushplugin.PushPlugin\"
          android:exported=\"false\" >
          <intent-filter>
              <action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
          </intent-filter>
      </service>
      \n
      • \n
    • \n

      Ensure that the AndroidManifest.xml located at platforms/android/build/... contains the following permissions for push notifications:

      \n
      <uses-permission android:name=\"android.permission.WAKE_LOCK\" />
      <uses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" />
      \n
      • \n
    \n

    Troubleshooting issues in iOS

    \n
      \n
    • Error "Error registering: no valid 'aps-environment' entitlement string found for application" - this means that the certificates are not correctly set in the xcodeproject. Open the xcodeproject, fix them and you can even run the application from xcode to verify it's setup correctly. The bundle identifier in xcode should be the same as the "id" in the package.json file in the root of the project. Also make sure that "Push Notifications" is switched ON in the "Capabilities" page of the project settings.
      • \n
    \n

    Android Configuration for using Firebase Cloud Messaging

    \n

    The nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

    \n
      \n
    1. \n

      Add the google-services.json file

      \n

      To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

      \n

      Place the file in your app's App_Resources/Android folder

      \n
      2. \n
    2. \n

      Obtain the FCM Server Key (optional)

      \n

      This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

      \n
      3. \n
    \n

    Receive and Handle Messages from FCM on Android

    \n

    The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

    \n

    The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the notificationCallbackAndroid setting when calling the register method of the plugin.

    \n

    The behavior of the callback in the module follows the behavior of the FCM service.

    \n

    Handling Data Messages

    \n

    The notificationCallbackAndroid method of the plugin is called each time a data notification is received.

    \n

    If the app is stopped or suspended, NO notification is constructed and placed in the tray. Tapping the app icon launches the app and invokes the notificationCallbackAndroid callback where you will receive the notification data.

    \n

    If the app is active and in foreground, the notificationCallbackAndroid callback is invoked immediately with the notification data (fcmNotification).

    \n

    Handling Notification Messages

    \n

    If the app is active and in foreground, it invokes the notificationCallbackAndroid callback with two arguments (stringifiedData, fcmNotification).

    \n

    If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the notificationCallbackAndroid callback.

    \n

    Handling Mixed Messages

    \n

    Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

    \n
      \n
    • The app is in foreground, the notificationCallbackAndroid callback is invoked with parameters (stringifiedData, fcmNotification)
      • \n
    • The app is in background, the notificationCallbackAndroid callback is not invoked. A notification is placed in the system tray. If the notification in the tray is tapped, the data part of the mixed message is available in the extras of the intent of the activity and are available in the respective application event of NativeScript.
      • \n
    \n

    Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

    \n
    application.on(application.resumeEvent, function(args) {
        if (args.android) {
            var act = args.android;
            var intent = act.getIntent();
            var extras = intent.getExtras();
            if (extras) {
                // for (var key in extras) {
                //     console.log(key + ' -> ' + extras[key]);
                // }
                var msg = extras.get('someKey');
            }
        }
    });
    \n

    Parameters of the notificationCallbackAndroid Callback

    \n

    Depending on the notification event and payload, the notificationCallbackAndroid callback is invoked with two arguments.

    \n
      \n
    • stringifiedData - String. A stringified JSON representation of the data value in the notification payload.
      • \n
    • fcmNotification - RemoteMessage.Notification. A representation of the RemoteMessage.Notification class which can be accessed according to its public methods. This parameter is available in case the callback was called from a message with a notification key in the payload.
      • \n
    \n

    Setting Notification Icon and Color

    \n

    The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray.

    \n

    Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

    \n
    <meta-data
        android:name=\"com.google.firebase.messaging.default_notification_icon\"
        android:resource=\"@drawable/ic_stat_ic_notification\" />
    <meta-data
        android:name=\"com.google.firebase.messaging.default_notification_color\"
        android:resource=\"@color/colorAccent\" />
    \n
    \n

    For more info visit the Edit the app manifest article.

    \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@armpogart/nativescript-toasty":{"name":"@armpogart/nativescript-toasty","version":"2.0.2","license":"MIT","readme":"

    NativeScript-Toasty

    \n

    \"npm\"\n\"npm\"

    \n

    Install

    \n

    tns plugin add nativescript-toasty

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from 'nativescript-toasty';
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty({ text: 'Toast message' });
    toast.show();

    // you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
    new Toasty({ text: 'Some Message' })
      .setToastDuration(ToastDuration.LONG)
      .setToastPosition(ToastPosition.BOTTOM)
      .setTextColor(new Color('white'))
      .setBackgroundColor('#ff9999')
      .show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      position: ToastPosition.TOP,
      android: { yAxisOffset: 100 },
      ios: {
        anchorView: someButton.ios, // must be the native iOS view instance (button, page, action bar, tabbar, etc.)
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24
      }
    });

    toasty.duration = ToastDuration.SHORT;
    toasty.textColor = '#fff';
    toasty.backgroundColor = new Color('purple');
    toasty.show();
    \n

    JavaScript

    \n
    var toasty = require('nativescript-toasty').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n

      constructor(opts: ToastyOptions);

      position: ToastPosition;

      duration: ToastDuration;

      textColor: Color | string;

      backgroundColor: Color | string;

      /**
       * Show the Toasty
       */
      show();

      /**
       * Cancels the Toasty
       */
      cancel();

    /**
     * Sets the Toast position.
     */
      setToastPosition(value: ToastPosition): Toasty;

    /**
     * Sets the Toast duration.
     */
      setToastDuration(value: ToastDuration): Toasty;

    /**
      * Set the text color of the toast.
      * @param value [Color | string] - Color of the string message.
      */
      setTextColor(value: Color | string): Toasty;

    /**
      * Set the background color of the toast.
      * @param value [Color |  string] - Color of the background.
      * On Android this currently removes the default Toast rounded borders.
      */
      setBackgroundColor(value: Color | string): Toasty;
    \n
    export enum ToastDuration {
      'SHORT',
      'LONG'
    }

    export enum ToastPosition {
      'BOTTOM'
      'CENTER'
      'TOP'
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Position of the Toast.
       */
      position?: ToastPosition;

      /**
       * Text color of the Toast message.
       */
      textColor?: Color | string;

      /**
       * Background Color of the Toast.
       */
      backgroundColor?: Color | string;

      /**
       * Android specific configuration options.
       */
      android?: { yAxisOffset: number };

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/geofencing":{"name":"@awarns/geofencing","version":"1.1.0","license":"Apache-2.0","readme":"

    @awarns/geofencing

    \n

    \"npm\n\"npm\"

    \n

    This module allows to perform basic geofencing analysis based on the locations obtained by the tasks declared in the @awarns/geolocation package. It is also compatible with any other custom entity matching the GeolocationLike interface (for example, an entity produced by a custom indoor positioning system).

    \n

    The geofencing mechanism inside this package allows to detect multiple degrees of nearness towards the registered areas of interest.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/geofencing
    \n

    Usage

    \n

    After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

    \n
      \n
    1. The plugin API. Through it, you'll be able to configure and update the areas of interest which are relevant to your application.
      2. \n
    2. The geofencing task, which allows to detect if one or more locations which have just been acquired are close to one or more registered areas of interest. When a change in the proximity is detected, this task emits an AoIProximityChange record, described below.
      3. \n
    \n

    API

    \n

    areasOfInterest

    \n

    The areasOfInterest singleton object is the main plugin entrypoint. Through it, you can set up and manage areas of interest. This is the complete API:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    insert(aois: Array<AreaOfInterest>)Promise<void>Inserts the given list of areas of interest into the local database. More details on the AreaOfInterest interface right after this table
    getById(id: string)Promise<AreaOfInterest>Allows to retrieve a stored area of interest by its id
    getAll()Promise<Array<AreaOfInterest>>Allows to retrieve all the stored areas of interest at once
    list()Observable<Array<AreaOfInterest>>Allows to observe changes in all the stored areas of interest. It is recommended to install the RxJS package too, to operate with the output of this method
    deleteAll()Promise<void>Allows to clear all the stored areas of interest at once
    \n

    AreaOfInterest

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringThe unique identifier of the area
    namestringA display name for the area
    longitudenumberThe longitude of the center of the area
    latitudenumberThe latitude of the center of the area
    radiusnumberThe radius of the area, from its center's longitude and latitude
    categorystring(Optional) Free text field, can be used to classify the area in an arbitrary category
    levelnumber(Optional) Can be used to rank areas
    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    checkAreaOfInterestProximityGiven one or more locations included in the payload of the event invoking the task, this task checks their proximity towards a set of registered areas of interest
    filterGeolocationByAoIProximityGiven one or more locations included in the payload of the event invoking the task, this task checks their proximity towards a set of registered areas of interest and only outputs those that fall nearby or inside their radii
    \n

    Check area of interest proximity

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { checkAreaOfInterestProximityTask } from '@awarns/geofencing';

    export const demoTasks: Array<Task> = [
        checkAreaOfInterestProximityTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquirePhoneGeolocation')
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on(
      'geolocationAcquired',
      run('checkAreaOfInterestProximity', {
        nearbyRange: 100, // Area approximation radius, in meters (defaults to 100)
        offset: 15, // Optional distance calculation offset, in meters. Can help mitigating location error (defaults to 0)
      })
    );

    on('movedCloseToAreaOfInterest', run('writeRecords'));
    on('movedInsideAreaOfInterest', run('writeRecords'));
    on('movedOutsideAreaOfInterest', run('writeRecords'));
    on('movedAwayFromAreaOfInterest', run('writeRecords'));
    \n

    Note: To use the acquirePhoneGeolocation and writeRecords tasks, the geolocation and persistence packages must be installed and configured. See geolocation package and persistence package docs.

    \n
    \n

    Filter geolocations based on area of interest proximity

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { filterGeolocationByAoIProximityTask } from '@awarns/geofencing';

    export const demoTasks: Array<Task> = [
      filterGeolocationByAoIProximityTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquirePhoneGeolocation')
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on(
      'geolocationAcquired',
      run('filterGeolocationByAoIProximity', {
        nearbyRange: 100, // Area approximation radius, in meters (defaults to 100)
        offset: 15, // Optional distance calculation offset, in meters. Can help mitigating location error (defaults to 0)
        includeNearby: true // Optional indicate if points nearby an area should be taken into consideration (defaults to false)
      })
    );

    on('geolocationCloseToAoIAcquired', run('writeRecords')); // Just write the locations captured nearby an area of interest
    \n

    Note: To use the acquirePhoneGeolocation and writeRecords tasks, the geolocation and persistence packages must be installed and configured. See geolocation package and persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    movedCloseToAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations represent an approximation towards the surroundings of one or more registered areas of interest. The approximation radius can be configured in the application workflow. See an example below this table
    movedInsideAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen between the center of one or more registered areas and their radii
    movedOutsideAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen outside one or more area radii, but are still within their approximation radii. This event won't fire while there's still a location that falls inside an area
    movedAwayFromAreaOfInterestArray<AoIProximityChange>Detected that one or more of the given locations have just fallen completely outside one or more area approximation radii. This event won't fire while there's still a location that falls inside the approximation radius of an area
    geolocationCloseToAoIAcquired'Geolocation' | 'Array'A location or a list of locations which have passed the area of interest filter (fall nearby or inside the known areas)
    \n

    Records

    \n

    AoIProximityChange

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways aoi-proximity-change
    changeChangeCan be either start or end. The former indicates a transition to the proximity indicated by the the record, whereas the later indicates no longer being in the reported level of proximity
    timestampDateThe local time when the proximity change was detected
    aoiAreaOfInterestThe area of interest towards which the proximity change has been detected
    proximityGeofencingProximityIndicates the relative proximity towards the area. Look at the change property to identify if the change is towards the proximity or contrary to it. See all the proximity options below
    \n

    GeofencingProximity

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionDescription
    INSIDEOne or more locations fall within the center and the radius of an area
    NEARBYOne or more locations fall outside the center and the radius of an area, but they fall within its approximation radius
    OUTSIDEOne or more locations fall completely outside an area and its approximation radius. This option will never be used in an AoIProximityChange record
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nested-scrollview":{"name":"nativescript-nested-scrollview","version":"1.1.0","license":"Apache-2.0","readme":"

    NativeScript NestedScrollView

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-nested-scrollview
    \n

    Usage

    \n
        <NestedScrollView backgroundColor=\"red\">
          <StackLayout>
          <Label text=\"First\" color=\"white\" />
            <ScrollView orientation=\"vertical\" backgroundColor=\"blue\">
              <Repeater items=\"{{ items }}\">
                <Repeater.itemsLayout>
                  <StackLayout orientation=\"vertical\"/>
                </Repeater.itemsLayout>
                <Repeater.itemTemplate>
                  <StackLayout orientation=\"horizontal\">
                    <Label text=\"ID \" />
                    <Label text=\"{{ id }}\" />
                  </StackLayout>
                </Repeater.itemTemplate>
              </Repeater>
            </ScrollView>
            <Label text=\"Second\" color=\"white\" />
            <ScrollView orientation=\"vertical\" backgroundColor=\"white\">
              <Repeater items=\"{{others}}\">
                <Repeater.itemsLayout>
                  <StackLayout orientation=\"vertical\" />
                </Repeater.itemsLayout>
                <Repeater.itemTemplate>
                  <StackLayout orientation=\"horizontal\">
                    <Label text=\"ID \" />
                    <Label text=\"{{ id }}\" />
                  </StackLayout>
                </Repeater.itemTemplate>
              </Repeater>
            </ScrollView>
            <Label text=\"Third\" color=\"white\" />
            <ScrollView orientation=\"vertical\" backgroundColor=\"yellow\">
              <Repeater items=\"{{ repeaterItems }}\">
                <Repeater.itemsLayout>
                  <StackLayout orientation=\"vertical\" />
                </Repeater.itemsLayout>
                <Repeater.itemTemplate>
                  <StackLayout orientation=\"horizontal\">
                    <Label text=\"ID \" />
                    <Label text=\"{{ id }}\" />
                  </StackLayout>
                </Repeater.itemTemplate>
              </Repeater>
            </ScrollView>
          </StackLayout>
        </NestedScrollView>
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    orientationvertical
    scrollBarIndicatorVisibletrue
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidIOS
    \"SS\"\"SS\"
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyboard-toolbar":{"name":"nativescript-keyboard-toolbar","version":"1.1.0","license":"Apache-2.0","readme":"

    NativeScript Keyboard Toolbar

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n\n

    iOS and Android running the included demo - much better framerate on YouTube!

    \n

    What The Keyboard!?

    \n

    Glad you asked 😅!

    \n
      \n
    • ⌨️ Mobile keyboards are a compromise at best. Let's make them easier to work with by attaching a toolbar on top of it.
      • \n
    • 🥅 Design goal = declare any NativeScript layout and stick it on top of the soft keyboard.
      • \n
    • 🏒 Make the toolbar stick to the keyboard, no matter its shape or form.
      • \n
    • 🙅‍♀️ No third party dependencies; use only stuff from tns-core-modules (which your app already has).
      • \n
    • ♾ Allow multiple toolbar designs on one page.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-keyboard-toolbar
    \n

    General usage instructions

    \n

    The plugin works by grabbing your declared toolbar layout and moving it off-screen.

    \n

    Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

    \n

    For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

    \n

    So if your layout structure is currently this:

    \n
    <ActionBar/>
    <StackLayout/>
    \n

    Change it to this:

    \n
    <ActionBar/>
    <GridLayout>
        <StackLayout/>
        <Toolbar/>
    </GridLayout>
    \n

    Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

    \n
    \n

    Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

    \n
    \n

    Usage with NativeScript Core

    \n

    Mind the comments in the example below.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"nativescript-keyboard-toolbar\">

        <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
        <GridLayout>

            <StackLayout>
                <Label text=\"Some text\"/>
                <!-- Add an 'id' property that we can reference below -->
                <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
            </StackLayout>

            <!-- The 'forId' and 'height' properties are mandatory -->
            <kt:Toolbar forId=\"priceTextField\" height=\"44\">
                <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                    <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
                </GridLayout>
            </kt:Toolbar>

        </GridLayout>
    </Page>
    \n

    Core demo app

    \n

    Check the source in the demo folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo.ios # or .android
    \n

    Usage with NativeScript-Angular

    \n

    Register the plugin in a specific module, or globally in the app module:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"KeyboardToolbar\", () => require(\"nativescript-keyboard-toolbar\").Toolbar);
    \n

    In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

    \n
    <ActionBar>
      <TextField #textField1 id=\"tf1\"></TextField>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <!-- Add whatever visible layout you need here -->
      <ListView [items]=\"items\">
        <ng-template let-item=\"item\">
          <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
        </ng-template>
      </ListView>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
       The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tf1\" height=\"44\">
        <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
          <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
          <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
          <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
        </GridLayout>
      </KeyboardToolbar>
    </GridLayout>
    \n

    Angular demo app

    \n

    Check the source in the demo-ng folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo-ng.ios # or .android
    \n

    Usage with NativeScript-Vue

    \n

    Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

    \n
    import Vue from \"nativescript-vue\";
    Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
        <GridLayout>

          <StackLayout>
            <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
          </StackLayout>

          <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
             The '    forId' and 'height' properties are mandatory -->
          <KeyboardToolbar forId=\"tv2\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
              <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
              <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
              <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
            </GridLayout>
          </KeyboardToolbar>

        </GridLayout>
      </Page>
    </template>

    <script>
      import { topmost } from \"tns-core-modules/ui/frame\";

      export default {
        methods: {
          appendToTextView2(args) {
            const textView = topmost().currentPage.getViewById(\"tv2\");
            textView.text += args.object.text;
          }
        }
      }
    </script>
    \n

    Vue demo app

    \n

    Check the source in the demo-vue folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo-vue.ios # or .android
    \n

    What about IQKeyboardManager?

    \n

    If you have IQKeyboardManager installed for better\nkeyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset\nIQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

    \n

    You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

    \n

    Future work

    \n
      \n
    • Orientation-change support.
      • \n
    • Dismiss keyboard on iOS when tapping outside the keyboard (configurable). Fot the time being you can add and configure IQKeyboardManager as mentioned above.
      • \n
    • Auto-scroll the view if the keyboard overlaps the text field (on iOS you can already do that with IQKeyboardManager).
      • \n
    • Modal support on Android (currently you can't use the toolbar in a modal because the toolbar is behind the modal)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in-enduco":{"name":"nativescript-apple-sign-in-enduco","version":"2.0.1","license":"Apache-2.0","readme":"

    Sign In with Apple, for NativeScript

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Requirements

    \n
      \n
    • Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.
      • \n
    • Open your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-apple-sign-in
    \n

    Demo app

    \n

    If you're stuck or want a quick demo of how this works, check out the demo app:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
    cd nativescript-apple-sign-in/src
    npm run demo.ios
    \n

    API

    \n

    isSignInWithAppleSupported

    \n

    Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

    \n
    import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

    const supported: boolean = isSignInWithAppleSupported();
    \n

    signInWithApple

    \n

    Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

    \n
    import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

    signInWithApple(
        {
            // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
            scopes: [\"EMAIL\", \"FULLNAME\"]
        })
        .then((result: SignInWithAppleAuthorization) => {
            console.log(\"Signed in, credential: \" + result.credential);
            console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
            // you can remember the user to check the sign in state later (see '    getSignInWithAppleState' below)
            this.user = result.credential.user;
        })
        .catch(err => console.log(\"Error signing in: \" + err));
    \n

    getSignInWithAppleState

    \n
    \n

    ⚠️ This does not seem to work on a simulator!

    \n
    \n

    If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

    \n
    import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

    const user: string = \"the id you got back from the signInWithApple function\";

    getSignInWithAppleState(user)
        .then(state => console.log(\"Sign in state: \" + state))
        .catch(err => console.log(\"Error getting sign in state: \" + err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ripple2":{"name":"nativescript-ripple2","version":"2.3.0","license":{"type":"MIT","url":"https://github.com/flore2003/nativescript-ripple2/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Material Design Ripples for NativeScript

    \n

    NativeScript plugin to add Material Design ripple effects to any layout.

    \n

    This is a fork of the original nativescript-ripple plugin by Brad Martin (@bradmartin) which can be found at https://github.com/bradmartin/nativescript-ripple

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    NativeScript 3.0+

    \n

    tns plugin add nativescript-ripple2

    \n

    Demo

    \n

    \"Demo\"

    \n

    Native Android Library

    \n

    Material Ripple

    \n

    Usage

    \n

    XML

    \n
    <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:RL=\"nativescript-ripple2\" loaded=\"pageLoaded\">
      <ActionBar title=\"Ripples for Every Android\" backgroundColor=\"#3489db\" color=\"#fff\" />
      <ScrollView>
        <StackLayout>

          <RL:Ripple rippleColor=\"#d50000\">
            <Label text=\"Red Ripples!!!\" class=\"message\" textWrap=\"true\" />
          </RL:Ripple>

          <RL:Ripple rippleColor=\"#fff000\">
            <Image src=\"~/images/batman.png\" margin=\"10\" stretch=\"aspectFit\" />
          </RL:Ripple>

          <RL:Ripple>
            <Label text=\"Default Ripple\" class=\"message\" textWrap=\"true\" />
          </RL:Ripple>

          <RL:Ripple rippleColor=\"#fff\" backgroundColor=\"#FF4081\" borderRadius=\"30\" height=\"60\" width=\"60\">
            <Label text=\"B\" fontSize=\"30\" color=\"#fff\" verticalAlignment=\"center\" horizontalAlignment=\"center\" textWrap=\"true\" />
          </RL:Ripple>

          <RL:Ripple  rippleColor=\"#c8c8c8\" class=\"label-button\">
            <Label text=\"Lighter Ripple\" textWrap=\"true\" />
          </RL:Ripple>

          <RL:Ripple rippleColor=\"#f5f5f5\" margin=\"15\" tap=\"{{ tapEvent }}\" class=\"dark-button\">
            <Label text=\"Possibilities\" color=\"#fff\" padding=\"10\" textWrap=\"true\" />
          </RL:Ripple>
     
        </StackLayout>
      </ScrollView>
    </Page>
    \n

    Attributes

    \n

    rippleColor : string optional - sets the ripple color.

    \n

    Nativescript + Angular

    \n

    In the main.ts file, add those lines in order to use the ripple effect :

    \n
    import {registerElement} from \"nativescript-angular/element-registry\";

    registerElement(\"Ripple\", () => require(\"nativescript-ripple2\").Ripple);
    \n

    Please note that on Android, you can have multiple chlidren under a <Ripple> view, but with iOS, the <Ripple> view must have only one child element.

    \n

    Contributors

    \n
      \n
    • Florian Reifschneider @ https://github.com/flore2003
      • \n
    • Brad Martin @ https://github.com/bradmartin Thanks for the original version
      • \n
    • Morten Sjøgren @ https://github.com/m-abs Thanks for original iOS support
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alokparikh16/sdk":{"name":"@alokparikh16/sdk","version":"1.1.0","license":"Apache-2.0","readme":"

    @alokparikh16/sdk

    \n
    ns plugin add @alokparikh16/sdk
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-htmllabel":{"name":"nativescript-htmllabel","version":"1.0.41","license":"Apache-2.0","readme":"

    # NativeScript Label widget\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Label widget. It is a direct replacement for the {N} Label widget.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-htmllabel

    \n

    This command automatically installs the necessary files, as well as stores nativescript-htmllabel as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    It works exactly the same way as the {N} plugin. However it adds a few improvements

    \n

    iOS Performances

    \n

    On iOS generating html string can be slow using the system way.\nYou can enable DTCoreText to make it faster.

    \n
      \n
    • add pod DTCoreText in your app Podfile at App_Resources/ios
      • \n
    \n
    pod 'DTCoreText'
    \n
      \n
    • enable it in your app.(js|ts) (as soon as possible)
      • \n
    \n
    require('nativescript-htmlabel').enableIOSDTCoreText();
    \n

    Properties

    \n
      \n
    • \n

      html
      \nHtml text that will be used to render text. HTML supported tags are a bit different on iOS and Android. To make sure it works as expected, for now only used Android supported ones

      \n
      • \n
    • \n

      verticalTextAlignment
      \nYou can also set it through css with vertical-text-alignment

      \n
      • \n
    • \n

      textShadow
      \nYou can also set it through css with text-shadow. The format is offsetx offsety blurradius color

      \n
      • \n
    \n

    Improvements

    \n
      \n
    • Override the {N} font loading system to make it much faster
      • \n
    • faster creation of FormattedString
      • \n
    • faster label creation and drawing, especially on android
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-clipboard":{"name":"@knotes/nativescript-clipboard","version":"2.1.0","license":"MIT","readme":"

    NativeScript Clipboard

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    A NativeScript plugin to copy and paste data from and to the device clipboard.

    \n
    \n

    💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.0.

    \n
    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-clipboard
    \n

    Usage

    \n
    \n

    TIP: Check out the demo app for TypeScript examples.

    \n
    \n

    To use this plugin you must first require() it:

    \n
    var clipboard = require(\"nativescript-clipboard\");
    \n

    setText

    \n
      clipboard.setText(\"Something relevant to put on the clipboard.\").then(function() {
          console.log(\"OK, copied to the clipboard\");
      })
    \n

    setTextSync

    \n

    This is the synchronous version of setText, available since plugin version 1.2.0.

    \n
      clipboard.setTextSync(\"Something relevant to put on the clipboard.\");
    \n

    getText

    \n
      clipboard.getText().then(function(content) {
          console.log(\"Read from clipboard: \" + content);
      })
    \n

    getTextSync

    \n

    This is the synchronous version of getText, available since plugin version 1.2.0.

    \n
      var content = clipboard.getText();
      console.log(\"Read from clipboard: \" + content);
    \n

    Future work

    \n

    Implement support for storing data (image, etc) on the clipboard. Open an issue or PR in case you like to have that.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-blur":{"name":"nativescript-blur","version":"2.0.0","license":"Apache-2.0","readme":"

    \"Twitter\n\"Twitter

    \n

    \"NPM\"

    \n

    iOS

    \n \n

    On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred.

    \n

    Android

    \n \n

    On android you can only blur image views currently. But you have control over how much you want to blur.\nThe android demo image is showing blur radius level 10.

    \n

    Android image blurring is powered by wonderkiln/BlurKit-Android

    \n

    Installation

    \n
    tns plugin add nativescript-blur
    \n

    Important Setup,

    \n

    In your project's app/App_Resources/android/app.gradle file add the following lines\ninside the block for defaultConfig. Without this step, BlurKit won't work.

    \n
    renderscriptTargetApi 25
    renderscriptSupportModeEnabled true
    \n

    Usage

    \n

    import { Blur } from 'nativescript-blur';
    import * as app from \"tns-core-modules/application\";
    let blur = new Blur(true); // pass true to enable limited usage on android (for now);

    // Pick Date
    makeKittyBlurry() {
        let kittyView = page.getViewById('kitty');
        blur.on(kittyView, 'kitty', 'light').then((imageSource) => {
            if (app.android) { // android only
                let image: any = this.page.getViewById(\"kitty\");
                image.imageSource = imageSource; // replace the image source
                // with the image source that the plugin gives you
            }
            console.log('Kitty has become blurry.');
        }).catch(e => {
            console.dir(e);
        });
    }

    clearUpKitty() {
        blur.off('kitty').then((src) => {
            if (app.android) { // android only
                let image: any = this.page.getViewById(\"kitty\");

                // Here we're loading from URL, because we're
                // assigning URL in XML, if you have assigned
                // app resource in XML, you would want to
                // .fromResource() here. for more info
                // https://docs.nativescript.org/cookbook/image-source
                ImageSource.fromUrl(src).then(imageSource => {
                    image.imageSource = imageSource;
                });
            }
            console.log('Kitty has cleared up.')
        });
    }
    \n

    API

    \n

    on(view, keyTitle, radius, theme?, duration?): Promise;

    \n

    Radius is for android. // not optional, must be between 1 - 25 (inclusive)

    \n

    Theme and Duration are for iOS. // optional

    \n

    To turn it on, you must pass a view, a key name and a number to set radius. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. You can pass a custom duration. The duration is in seconds, for example if you pass .2 the animation will last .2 seconds.\nSupported themes for iOS are:

    \n
    dark
    extraDark
    light
    extraLight
    regular
    prominent
    \n

    Play around with the themes to see which looks the best, and learn more about these options here: https://developer.apple.com/documentation/uikit/uiblureffectstyle

    \n

    The view needs to be a nativescript view that has an ios property, and that property must support addSubview. Here are some examples of NativeScript UI elements you can pass:

    \n
    StackLayout
    GridLayout
    AbsoluteLayout
    DockLayout
    ScrollView
    Image
    Label
    \n

    If there is no ios property on the element you pass or addSubview doesn't exist on the ios property, it will return an error.

    \n

    On Android, only view of type Image is supported. And this method returns an image source which you have to assign\nto the image element in your view (please refer demo/ sample code).

    \n

    off(keyTitle, duration?): Promise;

    \n

    Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Copyright 2017 Dave Coffin, Shiva Prasad

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@souriscloud/nativescript-google-maps-sdk":{"name":"@souriscloud/nativescript-google-maps-sdk","version":"3.0.3","license":"MIT","readme":"

    NativeScript plugin for the Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling:

    \n

    Nativescript 7+

    \n
    tns plugin add @souriscloud/nativescript-google-maps-sdk
    \n

    Nativescript < 7

    \n
    tns plugin add nativescript-google-maps-sdk@2.9.1
    \n

    Setup

    \n

    See demo code included here

    \n

    See a live demo here

    \n

    Configure API Key for Android

    \n

    Nativescript < 4

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
    \n

    Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    Nativescript 4+

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) { 
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
        <GridLayout>
            <maps:mapView
                latitude=\"{{ latitude }}\"
                longitude=\"{{ longitude }}\"
                zoom=\"{{ zoom }}\"
                bearing=\"{{ bearing }}\" 
                tilt=\"{{ tilt }}\"
                mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
                padding=\"{{ padding }}\"
                mapReady=\"onMapReady\"  
                markerSelect=\"onMarkerSelect\"
                markerBeginDragging=\"onMarkerBeginDragging\"
                markerEndDragging=\"onMarkerEndDragging\"
                markerDrag=\"onMarkerDrag\"
                cameraChanged=\"onCameraChanged\" 
                cameraMove=\"onCameraMove\"
            />
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

    \n

    Basic Example

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-google-maps-sdk\");

    function onMapReady(args) {
        var mapView = args.object;
        
        console.log(\"Setting a marker...\");
        var marker = new mapsModule.Marker();
        marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.userData = { index : 1};
        mapView.addMarker(marker);
        
        // Disabling zoom gestures
        mapView.settings.zoomGesturesEnabled = false;
    }

    function onMarkerSelect(args) {
        console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    function onCameraMove(args) {
        console.log(\"Camera moving: \"+JSON.stringify(args.camera));
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    exports.onCameraMove = onCameraMove;
    \n

    Custom Info Windows (Beta)

    \n
    \n

    [!WARNING]\nif you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

    \n
    \n
    var mapView = null;

    export function onMapReady(args) {
        mapView = args.object;
        mapView.infoWindowTemplate = `<StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
            <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
            <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
            <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
            <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
        </StackLayout>`    ;
    }
    \n

    To use custom marker info windows, define a template in your view like so:

    \n
    <!-- /app/main-page.xml -->
    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
      <GridLayout>
           <maps:mapView mapReady=\"onMapReady\">
                <!-- Default Info Window Template -->       \t\t
                <maps:mapView.infoWindowTemplate>
                    <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                    </StackLayout>
                </maps:mapView.infoWindowTemplate>
                <!-- Keyed Info Window Templates -->   
                <maps:mapView.infoWindowTemplates>
                    <template key=\"testWindow\">
                        <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                            <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                            <Label text=\"Let's Begin!\" className=\"title\" />
                        </StackLayout>
                    </template>
                </maps:mapView.infoWindowTemplates>
            </maps:mapView>
      </GridLayout>
    </Page>
    \n

    ...and set the infoWindowTemplate property like so:

    \n
    var marker = new mapsModule.Marker();
    marker.infoWindowTemplate = 'testWindow';
    \n

    This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

    \n

    ** Known issue: remote images fail to display in iOS info windows (local images work fine)

    \n

    Usage with Angular

    \n

    See Angular demo code included here

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register MapView plugin in order to use in Angular templates
    registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <MapView (mapReady)=\"onMapReady($event)\"></MapView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"MapView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Angular 8 Support

    \n

    If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

    \n
    @ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-dynatrace":{"name":"@nstudio/nativescript-dynatrace","version":"1.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-dynatrace

    \n
    npm install @nstudio/nativescript-dynatrace
    \n

    Usage

    \n

    Manual OneAgent startup

    \n

    If you can't do an automated startup through the dynatrace.config.js, you can always perform a\nmanual startup and decide values such as beaconUrl and applicationId at runtime.

    \n

    Note: An automated startup usually provides you with a lifecycle application start-up event. A manual startup on the\nother hand occurs later, thereby causing you to miss everything, including this application startup event, until the\nstartup occurs.

    \n

    A manual startup requires the following two steps:

    \n

    Deactivate the automated startup in dynatrace.config.js:

    \n
    module.exports = {
    \tandroid: {
    \t\tconfig: 'dynatrace { configurations { defaultConfig { autoStart.enabled false } } }',
    \t},
    \tios: {
    \t\tconfig: '<key>DTXAutoStart</key> <false/>',
    \t},
    };
    \n

    Make the start-up call with at least beaconUrl and applicationId:\nExample of a startup call:

    \n
    import { TNSDynatrace, DynatraceStartupConfiguration } from '@nstudio/nativescript-dynatrace';

    TNSDynatrace.start(new DynatraceStartupConfiguration({ beaconUrl: 'beaconUrl', applicationId: 'applicationId' }));
    \n

    For more details see the section about startup API.

    \n

    Note: If you don't deactivate the automated startup with the dynatrace.config.js file, the beaconUrl and applicationId\nvalues have no impact and are thrown away.

    \n

    Manual instrumentation

    \n

    To use the API of the NativeScript plugin, import the API:

    \n
    import { TNSDynatrace } from '@nstudio/nativescript-dynatrace';
    \n

    Plugin startup

    \n

    The manual startup of the plugin is triggered via the start(configuration: ManualStartupConfiguration)\nmethod. If you configured dynatrace.config.js for manual startup then the plugin doesn't send any data when not\ncalling this function. Besides the application id and the beacon URL, there are several optional configuration\nparameters, which are shown in the table below:

    \n
    new ManualStartupConfiguration({
    \tbeaconUrl: string,
    \tapplicationId: string,
    \treportCrash: boolean,
    \tlogLevel: LogLevel,
    \tcertificateValidation: boolean,
    \tuserOptIn: boolean,
    });
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Property nameTypeDefaultDescription
    beaconUrlstringnullIdentifies your environment within Dynatrace. This property is mandatory for manual startup. OneAgent issues an error when the key isn't present.
    applicationIdstringnullIdentifies your mobile app. This property is mandatory for manual startup. OneAgent issues an error when the key isn't present.
    reportCrashbooleantrueReports crashes.
    certificateValidationbooleantrueAllows the use of self-signed certificates. By default, it is set to false. When set to true, OneAgent accepts self-signed certificates that are not signed by a root-CA. This configuration key doesn't impact mobile app connections. It's only used for OneAgent communication, but doesn't overrule the host-name validation.
    userOptInbooleanfalseUser consent must be queried and set. The privacy settings for data collection and crash reporting can be changed via OneAgent SDK for Mobile as described under Data privacy. The default value is false.
    \n

    Note: The values used for the parameters are their default value.

    \n

    Attention: Please use those parameters only when doing a manual startup. If you want to do an automated startup, please\nconfigure the properties via the auto startup configuration. You will find a list which explains all the counterparts\nfor the available options here.

    \n

    Create manual actions

    \n

    To create a manual action named "MyButton tapped", use the following code. The leaveAction closes\nthe action again. To report values for this action before closing, see Report Values.

    \n
    let myAction = TNSDynatrace.enterAction('MyButton tapped');
    //Perform the action and whatever else is needed.
    myAction.leaveAction();
    \n

    Create manual sub actions

    \n

    You can create a single manual action as well as sub actions. The MyButton Sub Action is\nautomatically put under the MyButton tapped. As long as MyButton tapped is open, it gathers all the web requests.

    \n
    let myAction = TNSDynatrace.enterAction('MyButton tapped');
    let mySubAction = TNSDynatrace.enterAction('MyButton Sub Action');
    //Perform the action and whatever else is needed.
    mySubAction.leaveAction();
    myAction.leaveAction();
    \n

    Report values

    \n

    For any open action you can report certain values. The following API is available for action:

    \n
    reportValue(valueName, value);
    reportError(errorName, errorCode);
    reportEvent(eventName);
    \n

    To report a string value, use the following:

    \n
    let myAction = TNSDynatrace.enterAction('MyButton tapped');
    myAction.reportStringValue('ValueName', 'ImportantValue');
    myAction.leaveAction();
    \n

    Report an error stacktrace To manually report an error stacktrace, use the following API call:

    \n

    Identify a user

    \n

    You can identify a user and tag the current session with a name by making the following call:

    \n
    TNSDynatrace.identifyUser('User XY');
    \n

    Manually report an error You can manually report a crash via the following API call:

    \n
    reportError(errorName, errorCode);
    \n

    Data collection

    \n

    The privacy API methods allow you to dynamically change the data-collection level based on the\nindividual preferences of your end users. Each end user can select from three data-privacy levels:

    \n
    export enum DataCollectionLevel {
    \tOff,
    \tPerformance,
    \tUserBehavior,
    }
    \n
      \n
    • Off: Native Agent doesn't capture any monitoring data.
      • \n
    • Performance: Native Agent captures only anonymous performance\ndata. Monitoring data that can be used to identify individual users, such as user tags and custom values, aren't\ncaptured.
      • \n
    • UserBehavior: Native Agent captures both performance and user data. In this mode, Native Agent recognizes and\nreports users who re-visit in future sessions. The API to get and set the current level looks like this:
      • \n
    \n
    getUserPrivacyOptions();
    applyUserPrivacyOptions(userPrivacyOptions);
    \n

    To check the current privacy options that are set:

    \n
    let privacyOptions = TNSDynatrace.getUserPrivacyOptions();
    \n

    If you want to create a new UserPrivacyOptions object:

    \n
    let privacyConfig = new UserPrivacyOptions();
    privacyConfig.crashReportingOptedIn = true;
    privacyConfig.dataCollectionLevel = DataCollectionLevel.UserBehavior;
    \n

    To set new values to this object:

    \n
    privacyConfig.crashReportingOptedIn = false;
    privacyConfig.dataCollectionLevel = DataCollectionLevel.Performance;
    \n

    The properties that are used to set the privacy options can also be used to fetch the options:

    \n
    let level = privacyConfig.dataCollectionLevel;
    let crashReporting = privacyConfig.crashReportingOptedIn;
    \n

    To apply the values that were set on the object:

    \n
    TNSDynatrace.applyUserPrivacyOptions(privacyConfig);
    \n

    Report GPS Location

    \n

    You can report latitude and longitude and specify\nan optional platform.

    \n
    setGPSLocation(latitude, longitude);
    \n

    Setting beacon headers

    \n

    This allows you to put a set of http headers on every agent http\nrequest (i.e. Authorization header etc.). It will also trigger the agent to reconnect to the beacon endpoint with the\nnew headers.

    \n

    Note: To clear the previously set headers, call the method without the headers parameter or with a null value for the\nheaders parameter.

    \n
    setBeaconHeaders(headers);
    \n

    Structure of the dynatrace.config.js file

    \n

    The configuration is structured in the following way:

    \n
    module.exports = {
    \tandroid: {
    \t\t/* Configuration for Android auto instrumentation*/
    \t},
    \tios: {
    \t\t/* Configuration for iOS auto instrumentation */
    \t},
    };
    \n

    Manual Startup Counterparts

    \n

    Here is a list of all the counterparts for the options that can be used with a manual startup. Below the counterparts\ntable you will find an example configuration block for both Android and iOS.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Property nameDefaultAndroidiOS
    beaconUrlnullautoStart.beaconUrlDTXBeaconURL
    applicationIdnullautoStart.applicationIdDTXApplicationId
    reportCrashtruecrashReportingDTXCrashReporting
    logLevelLogLevel.Infodebug.agentLoggingDTXLogLevel
    certificateValidationfalsedebug.certificateValidationDTXAllowAnyCert
    userOptInfalseuserOptInDTXUserOptIn
    \n

    Android block The Android block is a wrapper for the Android configuration you find in the WebUI (in the Mobile\nApplication Settings). Copy the content into the following block:

    \n

    android : { config : CONTENT_OF_ANDROID_CONFIG\n} The content of the config block is directly copied to the Gradle file. To know more about the possible configuration\noptions, see the DSL documentation of our Gradle plugin.

    \n

    iOS block The iOS block is a wrapper for the iOS configuration you find in the WebUI (in the Mobile Application\nSettings). Copy the content into the following block:

    \n

    ios : { config : CONTENT_OF_IOS_CONFIG\n} The content of the config block is directly copied to the plist file. Therefore, you can use every setting that is\npossible and you find in the official Mobile Agent documentation.

    \n

    Define build stages in dynatrace.config.js If you have several stages such as debug, QA, and production, you probably\nwant to separate them and let them report in different applications. This can be done with two different approaches:

    \n

    Android In Android, you can enter all the information in the config file. The following dynatrace {} block must be\ninserted into the android config variable in your dynatrace.config.js file.

    \n
    module.exports = {
    \tandroid: {
    \t\tconfig: `dynatrace {
    configurations {
    dev { variantFilter \"Debug\"}
    demo {variantFilter \"demo\"}
    prod {variantFilter \"Release\"}
    }
    }    `    ,
    \t},
    };
    \n

    iOS In iOS, you can define some variables in the dynatrace.config.js file. The following properties must be inserted into the iOS config variable in your dynatrace.config.js\nfile.

    \n
    module.exports = {
    \tios: {
    \t\tconfig: `
    <key>DTXApplicationID</key>
    <string>Your ApplicationId</string>
    <key>DTXBeaconURL</key>
    <string>Your Beacon URL</string>
    `    ,
    \t},
    };
    \n

    User opt-in mode Specifies if the user has to opt-in for being monitored. When enabled, you must specify the privacy\nsetting. For more information, see the API section.

    \n
    module.exports = {
    \tandroid: {
    \t\tconfig: `
    dynatrace { configurations { defaultConfig { autoStart{ ... } userOptIn true } } }
    `    ,
    \t},
    \tios: {
    \t\tconfig: `
    <key>DTXUserOptIn</key>
    </true>
    `    ,
    \t},
    };
    \n

    Native OneAgent debug logs If the instrumentation runs through, and your application starts but you see no data, you\nprobably need to dig deeper to find out why the OneAgents aren't sending any data. Opening up a support ticket is a\ngreat idea, but gathering logs first is even better.

    \n

    Android Add the following configuration snippet to your other configuration in dynatrace.config.js right under the\nautoStart block (the whole structure is visible, so you know where the config belongs) and run npm run\ninstrumentDynatrace:

    \n
    module.exports = {
    \tandroid: {
    \t\tconfig: `
    dynatrace { configurations { defaultConfig { autoStart{ ... } debug.agentLogging true } } }
    `    ,
    \t},
    };
    \n

    iOS Add the following configuration snippet to your other configuration in dynatrace.config.js (the whole structure is\nvisible, so you know where the config belongs) and run npm run instrumentDynatrace:

    \n
    module.exports = {
    \tios: {
    \t\tconfig: `
    <key>DTXLogLevel</key>
    <string>ALL</string>
    `    ,
    \t},
    };
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-texttospeech-enduco":{"name":"nativescript-texttospeech-enduco","version":"1.0.10","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript-TextToSpeech :loudspeaker:

    \n

    A Text to Speech NativeScript plugin for Android & iOS

    \n

    Native Controls

    \n\n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-texttospeech
    \n

    This command automatically installs the necessary files, as well as stores nativescript-texttospeech as a dependency in your project's package.json file.

    \n

    Video Tutorial

    \n

    egghead lesson @ https://egghead.io/lessons/typescript-using-text-to-speech-with-nativescript

    \n

    Usage

    \n
    /// javascript
    var TextToSpeech = require('nativescript-texttospeech');

    /// TypeScript
    import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeech';

    let TTS = new TNSTextToSpeech();

    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', /// *** required ***
      speakRate: 0.5, // optional - default is 1.0
      pitch: 1.0, // optional - default is 1.0
      volume: 1.0, // optional - default is 1.0
      locale: 'en-GB', // optional - default is system locale,
      finishedCallback: Function // optional
    };

    // Call the `speak` method passing the SpeakOptions object
    TTS.speak(speakOptions).then(
      () => {
        // everything is fine
      },
      err => {
        // oops, something went wrong!
      }
    );
    \n

    API

    \n
      \n
    • \n

      speak(options: SpeakOptions): Promise<any> - start speaking with the given options

      \n
      • \n
    • \n

      pause(): void - pause the speech

      \n
      • \n
    • \n

      resume(): void - resume the speech

      \n
      • \n
    • \n

      destroy(): void - release resources for the speech synthesizer/engine

      \n
      • \n
    • \n

      SpeakOptions = {}

      \n
        \n
      • text: string ** required **
        • \n
      • queue?: boolean = false
        • \n
      • pitch?: number = 1.0
        • \n
      • speakRate?: number = 1.0
        • \n
      • volume?: number = 1.0
        • \n
      • locale?: string = default system locale
        • \n
      • language?: string = default system language ** Android only **
        • \n
      • finishedCallback?: Function
        • \n
      \n
      • \n
    \n

    If you wish to set a custom locale, you need to provide a valid BCP-47 code, e.g. en-US. If you wish to set only a custom language (without a preferred country code), you need to provide a valid ISO 639-1 language code. If both are set, the custom locale will be used.

    \n

    The plugin checks whether the supplied locale/language code has the correct syntax but will not prevent setting a nonexistent codes. Please use this feature with caution.

    \n

    Example with language code only:

    \n
    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', // *** required ***
      language: 'en' // english language will be used
    };
    \n

    Example with locale:

    \n
    let speakOptions: SpeakOptions = {
      text: 'Whatever you like', // *** required ***
      locale: 'en-AU' // australian english language will be used
    };
    \n

    Tip

    \n
      \n
    • The speech synthesizer takes a moment to initialize on most devices. A simple way to get around this (tested in the demo app) is to create your new instance of the TNSTextToSpeech and then immediately call the speak method with the options objects text value = "". This will force the synthesizer to "warm up" and not speak anything. Now when you call the speak method for your app's functionality it will already have "warmed up" the synthesizer so the delay should be minimal.\nIt's possible this "Warm up" process could be put into the plugin source itself, I don't have time to do it right now but welcome any contribution that is well tested to make this the default behavior of the synthesizers.
      • \n
    \n

    Android Only Methods

    \n
      \n
    • getAvailableLanguages(): Promise<Array<Language>>; - returns an array of available languages (use to prevent using non-existing language/local codes)
      • \n
    \n

    Credits

    \n

    Inspired by James Montemagno's TextToSpeech Xamarin plugin

    \n

    Thanks to anarchicknight for this plugin.\nThanks to stefalda for his great work on pause/resume and the finishedCallback events :bomb:

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dark-mode":{"name":"nativescript-dark-mode","version":"1.0.0","license":"Apache-2.0","readme":"

    Dark Mode / Night Mode

    \n
    \n

    ⚠️️ This NativeScript plugin may become obsolete in the near future, because the awesome NativeScript team is working on built-in support for Dark Mode (and much more). If you're interested, subscribe to this issue.

    \n
    \n

    \"Build\n\"Twitter

    \n

    What's this all about?

    \n

    With iOS 13 comes a new Dark Mode which Apple would like you (as a developer) to adopt.\nEven more, iOS will actively alter the appearance of your app's native UI components, so you will be affected by this change.

    \n

    So to be able to load different CSS, images, or other assets when Dark Mode is enabled, you need some sort of\nproperty you can check and a notification when Dark Mode is enabled/disabled by the user in the phone's settings.

    \n

    That's where this plugin comes in.

    \n
    \n

    Note that as long as you don't build with Xcode 11, even devices running iOS 13 will not be affected.

    \n
    \n
    \n

    By the way, Android has had "Night Mode" support since API level 8, but it's up to the vendors to expose it properly to users. NativeScript-Android apps are not affected by this setting, but you might as well apply the same logic to Android's Night Mode as you do to iOS' Dark Mode, so this plugin unifies those APIs.

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-dark-mode
    \n

    Demo app

    \n

    If you're stuck or want a quick demo of how this works, check out the demo app:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-dark-mode
    cd nativescript-dark-mode/src
    npm run demo.ios # or demo.android
    \n

    API

    \n

    isDarkModeSupported

    \n

    Dark Mode was added in iOS 13, so you could check this function.\nIt's not required as the plugin will take care of this check internally when the other API functions are called.

    \n
    import { isDarkModeSupported } from \"nativescript-dark-mode\";

    const supported: boolean = isDarkModeSupported();
    \n

    isDarkModeEnabled

    \n

    If at any moment you want to check for Dark Mode being enabled, you can do:

    \n
    import { isDarkModeEnabled } from \"nativescript-dark-mode\";

    const darkModeEnabled: boolean = isDarkModeEnabled();
    \n

    addOnDarkModeChangedListener

    \n

    To get a notification while your app is running, you can register a listener with the plugin.

    \n

    If you want to get notified on app launch as well, make sure to do this before the app starts.\nAs an example, see app.ts in the demo folder in this repo.

    \n
    import { addOnDarkModeChangedListener } from \"nativescript-dark-mode\";

    addOnDarkModeChangedListener((isDarkMode: boolean) => {
      console.log(\"Now on dark mode? \" + isDarkMode);
    });
    \n

    setDarkModeStyleSheet (unstable)

    \n
    \n

    ⚠️ This feature will probably be removed in an upcoming version, because we'll likely have a better (built-in) way soon.

    \n
    \n

    If you want to load a different stylesheet when Dark Mode is enabled, then look no further.\nThere is one caveat though: currently, the stylesheet is only applied on a cold start,\nso if the user switched to Dark Mode while the app is running, your app won't be affected until the next restart.

    \n
    import { setDarkModeStyleSheet } from \"nativescript-dark-mode\";

    setDarkModeStyleSheet(\"./app-dark.css\");
    \n
    \n

    TIP: you can extract all theme-independent CSS in app.css to app-common.css and add an app-dark.css that (just like app.css) extends app-common.css. Check the demo folder in this repo for an example.

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-headset-detection":{"name":"nativescript-headset-detection","version":"1.0.0","license":"MIT","readme":"

    NativeScript Headset Detection plugin

    \n

    \"Build\n\"NPM\n\"Twitter

    \n

    Installation

    \n
    tns plugin add nativescript-headset-detection
    \n

    API

    \n

    isConnected

    \n

    To check for a headset at any given moment, use this method:

    \n

    JavaScript

    \n
    var headsetDetection = require(\"nativescript-headset-detection\");

    headsetDetection.isConnected()
        .then(function (connected) { console.log(\"Connected? \" + connected); })
        .catch(function (err) { console.log(\"Error: \" + err)});
    \n

    TypeScript

    \n
    import * as headsetDetection from 'nativescript-headset-detection';

    headsetDetection.isConnected()
        .then(connected => console.log(`Connected? ${connected}`))
        .catch(err => console.log(`Error: ${err}`));
    \n

    onConnectionStateChanged

    \n

    To listen to changes to the headset state, use this one (adding it to a high level component like `app.[ts|js] makes sense);\nyou can pass in a callback function that gets invoked whenever a headset is (dis)connected:

    \n

    JavaScript

    \n
    var headsetDetection = require(\"nativescript-headset-detection\");

    headsetDetection.onConnectionStateChanged(function (connected) {
      console.log(\"Connection changed to: \" + connected);
    });
    \n

    TypeScript

    \n
    import * as headsetDetection from 'nativescript-headset-detection';

    headsetDetection.onConnectionStateChanged(connected => console.log(`Connection changed to: ${connected}`));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uber":{"name":"nativescript-uber","version":"1.5.2","license":"MIT","readme":"

    NativeScript plugin for Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods is installed

    \n

    Android - Latest Google Play services SDK installed

    \n

    Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-uber
    \n

    Setup Google Maps API

    \n

    See demo code included here

    \n

    Live Demo here

    \n

    Setup Android API Key

    \n

    First copy over the template string resource files for Android

    \n
    cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/
    \n

    Next modify the file at app/App_Resources/Android/values/nativescript_google_maps_api.xml, uncomment nativescript_google_maps_api_key string and replace PUT_API_KEY_HERE with your api key.

    \n

    The plugin will default to latest available version of the Android play-services-maps SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Setup iOS API Key

    \n

    In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

    \n
    if(application.ios) {
      GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, you need to modify the main.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;
    ....
    if (platform.isIOS) { 
      GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the UberView

    \n

    Modify your view by adding the namespace xmlns:maps="nativescript-uber" to your page, then using the <maps:mapView /> tag to create the UberView.

    \n
     <!-- /app/main-page.xml -->
     <Page 
    \txmlns=\"http://www.nativescript.org/tns.xsd\"
    \txmlns:maps=\"nativescript-uber\"
    \t>
      <GridLayout>
        <maps:mapView latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\" 
        \t\t\t\t\t\t\t\tzoom=\"{{ zoom }}\" bearing=\"{{ bearing }}\" 
        \t\t\t\t\t\t\t\ttilt=\"{{ tilt }}\" padding=\"{{ padding }}\" mapReady=\"onMapReady\"  
       \t\t\t\t\t\t\t\tmarkerSelect=\"onMarkerSelect\" markerBeginDragging=\"onMarkerBeginDragging\"
       \t\t\t\t\t\t\t\tmarkerEndDragging=\"onMarkerEndDragging\" markerDrag=\"onMarkerDrag\"
       \t\t\t\t\t\t\t\tcameraChanged=\"onCameraChanged\" />
      </GridLayout>
    </Page>
    \n

    The following properties are available to you for adjusting camera view.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    latitudenumber
    latitudenumber
    zoomnumber
    bearingnumber
    tiltnumber
    paddingarray of numbers reflectig top, bottom, left and right paddings
    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyCalled when Google Map is ready for use
    coordinateTappedFires when coordinate is clicked on map
    coordinateLongPressFires when coordinate is "long pressed"
    markerSelectFires whenever a marker is selected
    shapeSelectFires whenever a shape (Circle, Polygon, Polyline) is clicked. You must explicity configure shape.clickable = true; on your shapes.
    markerBeginDraggingFires when a marker begins dragging
    markerDragFires repeatedly while a marker is being dragged
    markerEndDraggingFires when a marker ends dragging
    markerInfoWindowTappedFired on tapping Marker Info Window
    cameraChangedFired on each camera change
    \n

    The property gMap gives you access to the raw platform Map Object - see their SDK references for how to use them ( iOS | Android )

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-uber\");

    function onMapReady(args) {
      var mapView = args.object;

      console.log(\"Setting a marker...\");
      var marker = new mapsModule.Marker();
      marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
      marker.title = \"Sydney\";
      marker.snippet = \"Australia\";
      marker.userData = { index : 1};
      mapView.addMarker(marker);
    }

    function onMarkerSelect(args) {
       console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    \n

    Styling

    \n

    Use gMap.setStyle(style); to change the map styling.

    \n

    For map styles, see Google Maps Style Reference and the Styling Wizard.

    \n

    Using with Angular

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register UberView plugin in order to use in Angular templates
    registerElement(\"UberView\", () => require(\"nativescript-uber\").UberView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <UberView (mapReady)=\"onMapReady($event)\"></UberView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"UberView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio - see nativescript-google-maps-utils

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"n-mobile":{"name":"n-mobile","version":"1.0.1","license":"MIT","readme":"

    n-mobile

    \n

    Mobile application framework using Nativescript and Vue

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-poc":{"name":"nativescript-camera-plus-poc","version":"4.0.9","license":"Apache-2.0","readme":"\n

    NativeScript Camera Plus

    \n    \n

    A NativeScript camera with all the bells and whistles which can be embedded inside a view. This plugin was sponsored by LiveShopper

    \n

    \n\n \"LiveShopper\n \n

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n
    \n

    Installation

    \n
    ns plugin add @nstudio/nativescript-camera-plus
    \n

    Note :- Android\nPlease add the following to your app.gradle

    \n
    android {
    ...
     compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
    }
    \n

    Sample

    \n

    Yes the camera is rotated because it's a webcam to an emulator and it's just the way life works

    \n

    \"Camera

    \n

    Demo

    \n

    The demo apps work best when run on a real device.\nYou can launch them from the simulator/emulator however the camera does not work on iOS simulators. Android emulators will work with cameras if you enable your webcam.

    \n

    Android Emulator Note

    \n

    The camera in your webcam being used on emulators will likely be rotated sideways (incorrectly). The actual camera output will be correctly oriented, it's only the preview on emulators that present the preview incorrectly. This issue shouldn't be present on real devices due to the camera being oriented correctly on the device vs. a webcam in a computer.

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDefaultDescription
    debugbooleanfalseIf true logs will be output in the console to help debug the Camera Plus events.
    confirmPhotosbooleantrueIf true the default take picture event will present a confirmation dialog before saving.
    confirmRetakeTextstring'Retake'When confirming capture this text will be presented to the user to retake the photo.
    confirmSaveTextstring'Save'When confirming capture this text will be presented to the user to save the photo.
    saveToGallerybooleantrueIf true the default take picture event will save to device gallery.
    galleryPickerModestring'multiple'The gallery/library selection mode. 'single' allows one image to be selected. 'multiple' allows multiple images.
    showFlashIconbooleantrueIf true the default flash toggle icon/button will show on the Camera Plus layout.
    showToggleIconbooleantrueIf true the default camera toggle (front/back) icon button will show on the Camera Plus layout.
    showCaptureIconbooleantrueIf true the default capture (take picture) icon/button will show on the Camera Plus layout.
    showGalleryIconbooleantrueIf true the choose from gallery/library icon/button will show on the Camera Plus layout.
    enableVideobooleanfaleIf true the CameraPlus instance can record video and videos are shown in the gallery.
    \n

    Static Properties

    \n

    Note: These properties need set before the initialization of the camera. Users should set these in a component constructor before their view creates the component if the wish to change the default values. In case of enableVideo, this will be true if either the static property or the component property is true.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    enableVideobooleanVideo Support (off by default). Can reset it before using in different views if they want to go back/forth between photo/camera and video/camera
    defaultCameraCameraTypesDefaults the camera correctly on launch. Default 'rear'. 'front' or 'rear'
    \n

    Android Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    flashOnIconstringName of app_resource drawable for the native image button when flash is on (enabled).
    flashOffIconstringName of app_resource drawable for the native image button when flash is off (disabled).
    toggleCameraIconstringName of app_resource drawable for the toggle camera button.
    takePicIconstringName of app_resource drawable for the take picture (capture) button.
    galleryIconstringName of app_resource drawable for the open gallery (image library) button.
    autoFocusbooleanIf true the camera will use continuous focus when the camera detects changes of the target.
    \n

    iOS Only Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    doubleTapCameraSwitchbooleanEnable/disable double tap gesture to switch camera. (enabled)
    \n

    Cross Platform Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    isCameraAvailable()Returns true if the device has at least one camera.
    toggleFlash()Toggles the flash mode on the active camera.
    toggleCamera()Toggles the active camera on the device.
    chooseFromLibrary(opts?: IChooseOptions)Opens the device gallery (image library) for selecting images.
    takePicture(opts?: ICaptureOptions)Takes a picture of the current preview in the CameraPlus.
    getFlashMode(): stringAndroid: various strings possible: https://developer.android.com/reference/android/hardware/Camera.Parameters.html#getFlashMode() iOS: either 'on' or 'off'
    record(opts?: IVideoOptions)Starts recording a video.
    stop()Stops the video recording, when stopped the videoRecordingReadyEvent event will be emitted.
    \n

    Android Only Public Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    requestCameraPermissions(explanationText?: string)Prompts the user to grant runtime permission to use the device camera. Returns a Promise.
    hasCameraPermission()Returns true if the application has been granted access to the device camera.
    requestStoragePermissions(explanationText?: string)Prompts the user to grant runtime permission to use external storage for saving and opening images from device gallery. Returns a Promise.
    hasStoragePermissions()Returns true if the application has been granted access to the device storage.
    getNumberOfCameras()Returns the number of cameras on the device.
    hasFlash()Returns true if the active camera has a flash mode.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    errorEventExecutes when an error is emitted from CameraPlus
    photoCapturedEventExecutes when a photo is taken.
    toggleCameraEventExecutes when the device camera is toggled.
    imagesSelectedEventExecutes when images are selected from the device library/gallery.
    videoRecordingStartedEventExecutes when video starts recording.
    videoRecordingFinishedEventExecutes when video stops recording but has not process yet.
    videoRecordingReadyEventExecutes when video has completed processing and is ready to be used.
    confirmScreenShownEventExecutes when the picture confirm dialog is shown..
    confirmScreenDismissedEventExecutes when the picture confirm dialog is dismissed either by Retake or Save button.
    \n

    Option Interfaces

    \n
    export interface ICameraOptions {
      confirm?: boolean;
      saveToGallery?: boolean;
      keepAspectRatio?: boolean;
      height?: number;
      width?: number;
      autoSquareCrop?: boolean;
      confirmRetakeText?: string;
      confirmSaveText?: string;
    }
    \n
    export interface IChooseOptions {
      width?: number;
      height?: number;
      keepAspectRatio?: boolean;
      showImages?:  boolean;
      showVideos?: boolean;
    }
    \n
    export interface IVideoOptions {
      quality?: CameraVideoQuality;
      confirm?: boolean;
      saveToGallery?: boolean;
      height?: number;
      width?: number;
      disableHEVC?: boolean;
      androidMaxVideoBitRate?: number;
      androidMaxFrameRate?: number;
      androidMaxAudioBitRate?: number;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-ffmpeg":{"name":"@triniwiz/nativescript-ffmpeg","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript nativescript-ffmpeg

    \n
    ns plugin add @triniwiz/nativescript-ffmpeg
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uberx":{"name":"nativescript-uberx","version":"1.3.1","license":"MIT","readme":"

    NativeScript plugin for Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    iOS - Cocoapods is installed

    \n

    Android - Latest Google Play services SDK installed

    \n

    Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-uber
    \n

    Setup Google Maps API

    \n

    See demo code included here

    \n

    Live Demo here

    \n

    Setup Android API Key

    \n

    First copy over the template string resource files for Android

    \n
    cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/
    \n

    Next modify the file at app/App_Resources/Android/values/nativescript_google_maps_api.xml, uncomment nativescript_google_maps_api_key string and replace PUT_API_KEY_HERE with your api key.

    \n

    The plugin will default to latest available version of the Android play-services-maps SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Setup iOS API Key

    \n

    In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

    \n
    if(application.ios) {
      GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, you need to modify the main.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;
    ....
    if (platform.isIOS) { 
      GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the UberView

    \n

    Modify your view by adding the namespace xmlns:maps="nativescript-uber" to your page, then using the <maps:mapView /> tag to create the UberView.

    \n
     <!-- /app/main-page.xml -->
     <Page 
    \txmlns=\"http://www.nativescript.org/tns.xsd\"
    \txmlns:maps=\"nativescript-uber\"
    \t>
      <GridLayout>
        <maps:mapView latitude=\"{{ latitude }}\" longitude=\"{{ longitude }}\" 
        \t\t\t\t\t\t\t\tzoom=\"{{ zoom }}\" bearing=\"{{ bearing }}\" 
        \t\t\t\t\t\t\t\ttilt=\"{{ tilt }}\" padding=\"{{ padding }}\" mapReady=\"onMapReady\"  
       \t\t\t\t\t\t\t\tmarkerSelect=\"onMarkerSelect\" markerBeginDragging=\"onMarkerBeginDragging\"
       \t\t\t\t\t\t\t\tmarkerEndDragging=\"onMarkerEndDragging\" markerDrag=\"onMarkerDrag\"
       \t\t\t\t\t\t\t\tcameraChanged=\"onCameraChanged\" />
      </GridLayout>
    </Page>
    \n

    The following properties are available to you for adjusting camera view.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    latitudenumber
    latitudenumber
    zoomnumber
    bearingnumber
    tiltnumber
    paddingarray of numbers reflectig top, bottom, left and right paddings
    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyCalled when Google Map is ready for use
    coordinateTappedFires when coordinate is clicked on map
    coordinateLongPressFires when coordinate is "long pressed"
    markerSelectFires whenever a marker is selected
    shapeSelectFires whenever a shape (Circle, Polygon, Polyline) is clicked. You must explicity configure shape.clickable = true; on your shapes.
    markerBeginDraggingFires when a marker begins dragging
    markerDragFires repeatedly while a marker is being dragged
    markerEndDraggingFires when a marker ends dragging
    markerInfoWindowTappedFired on tapping Marker Info Window
    cameraChangedFired on each camera change
    \n

    The property gMap gives you access to the raw platform Map Object - see their SDK references for how to use them ( iOS | Android )

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-uber\");

    function onMapReady(args) {
      var mapView = args.object;

      console.log(\"Setting a marker...\");
      var marker = new mapsModule.Marker();
      marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
      marker.title = \"Sydney\";
      marker.snippet = \"Australia\";
      marker.userData = { index : 1};
      mapView.addMarker(marker);
    }

    function onMarkerSelect(args) {
       console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    \n

    Styling

    \n

    Use gMap.setStyle(style); to change the map styling.

    \n

    For map styles, see Google Maps Style Reference and the Styling Wizard.

    \n

    Using with Angular

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register UberView plugin in order to use in Angular templates
    registerElement(\"UberView\", () => require(\"nativescript-uber\").UberView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <UberView (mapReady)=\"onMapReady($event)\"></UberView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"UberView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio - see nativescript-google-maps-utils

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-date-utils":{"name":"nativescript-date-utils","version":"1.0.0","license":"MIT","readme":"

    NativeScript Date Utils

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Installation

    \n
    tns plugin add nativescript-date-utils
    \n

    Running the demo app

    \n

    After cloning, go into the src folder and run npm run demo.ios or npm run demo.android.

    \n

    API

    \n

    is24hFormat

    \n

    Determine whether or not the user's device is currently running in 24 hour format.

    \n

    TypeScript

    \n
    import { DateUtils } from 'nativescript-date-utils';

    DateUtils.is24hFormat().then((is24h: boolean) => {
      console.log(`This device is currently ${is24h ? '' : 'not'} running in 24 hour format.`);
    });
    \n

    JavaScript

    \n
    var DateUtils = require(\"nativescript-date-utils\").DateUtils;

    DateUtils.is24hFormat().then(function (is24h) {
      console.log('This device is currently ' + (is24h ? '' : 'not') + ' running in 24 hour format.');
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-push":{"name":"nativescript-push","version":"1.0.9","license":"Apache-2.0","readme":"

    [npm-image]:http://img.shields.io/npm/v/nativescript-appurl.svg\n[npm-url]:https://npmjs.org/package/nativescript-appurl\n[downloads-image]:http://img.shields.io/npm/dm/nativescript-appurl.svg

    \n

    This plugin is an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

    \n

    Thanks to Eddy for allowing this!

    \n

    Android

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

    \n

    There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

    \n

    iOS

    \n

    Enable push support in Xcode

    \n

    Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

    \n\"Push\n
    \n

    Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

    \n
    \n

    Copy the entitlements file

    \n

    The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/ (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

    \n
    \t<key>aps-environment</key>
    \t<string>development</string>
    \n
    \n

    Note that the filename can either be <YourAppName>.entitlements or app.entitlements, where YourAppName is the iOS foldername, see the path above.

    \n
    \n

    Configure push notifications in Info.plist

    \n

    Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

    \n
    <key>UseExternalPushProvider</key>
    <true/>
    \n

    And to allow processing when a background push is received, add this as well:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>remote-notification</string>
    </array>
    \n

    The end result should look like this.

    \n

    \n

    API

    \n

    areNotificationsEnabled

    \n

    On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

    \n
    import { messaging, Message } from \"nativescript-push\";

    console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
    \n

    registerForPushNotifications

    \n

    The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

    \n
    import { messaging, Message } from \"nativescript-push\";

    messaging.registerForPushNotifications({
      onPushTokenReceivedCallback: (token: string): void => {
        console.log(\"Firebase plugin received a push token: \" + token);
      },

      onMessageReceivedCallback: (message: Message) => {
        console.log(\"Push message received: \" + message.title);
      },

      // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
      showNotifications: true,

      // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
      showNotificationsWhenInForeground: true
    }).then(() => console.log(\"Registered for push\"));
    \n
    \n

    Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

    \n
    \n
    \n

    With the token received in onPushTokenReceivedCallback you can send a notification to this device.

    \n
    \n

    getCurrentPushToken

    \n

    If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

    \n
    import { messaging } from \"nativescript-push\";

    messaging.getCurrentPushToken()
        .then(token => console.log(`Current push token: ${token}`));
    \n

    Interactive notifications (iOS only for now)

    \n

    To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

    \n

    Each action has either type button or input, and you can set options to do any or all of:

    \n
      \n
    • Launch the app: foreground.
      • \n
    • Only allow the action when the device is unlocked: authenticationRequired.
      • \n
    • Make the text red to indicate something will be removed/deleted/killed: destructive.
      • \n
    \n

    Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

    \n

    \"Interactive \"Interactive \"Interactive \"Interactive

    \n
    import { messaging, Message } from \"nativescript-push\";

    const model = new messaging.PushNotificationModel();
    model.iosSettings = new messaging.IosPushSettings();
    model.iosSettings.badge = false;
    model.iosSettings.alert = true;

    model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
    model.iosSettings.interactiveSettings.actions = [
      {
        identifier: \"OPEN_ACTION\",
        title: \"Open the app (if closed)\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground
      },
      {
        identifier: \"AUTH\",
        title: \"Open the app, but only if device is not locked with a passcode\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply without opening the app\",
        type: \"input\",
        submitLabel: \"Fire!\",
        placeholder: \"Load the gun...\"
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply and open the app\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground,
        type: \"input\",
        submitLabel: \"OK, send it\",
        placeholder: \"Type here, baby!\"
      },
      {
        identifier: \"DELETE_ACTION\",
        title: \"Delete without opening the app\",
        options: messaging.IosInteractiveNotificationActionOptions.destructive
      }
    ];

    model.iosSettings.interactiveSettings.categories = [{
      identifier: \"GENERAL\"
    }];

    model.onNotificationActionTakenCallback = (actionIdentifier: string, message: Message) => {
      console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
    };

    messaging.registerForInteractivePush(model);
    \n

    To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

    \n
    {
      \"aps\": {
        \"alert\": {
          \"title\": \"Realtime Custom Push Notifications\",
          \"subtitle\": \"Now with iOS 10 support!\",
          \"body\": \"Add multimedia content to your notifications\"
        },
        \"sound\": \"default\",
        \"badge\": 1,
        \"category\": \"GENERAL\",
        \"showWhenInForeground\": true,
        \"data\": {
          \"foo\": \"bar\"
        }
      }
    }
    \n
    \n

    IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

    \n
    \n

    Testing push notifications

    \n

    iOS

    \n

    For testing notifications on iOS the easiest tool I found is Pusher:

    \n\"Pusher\"/\n

    Android

    \n

    For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

    \n

    \"Postman \"Postman

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pushy":{"name":"nativescript-pushy","version":"2.1.0","license":"Apache-2.0","readme":"

    NativeScript Pushy

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    Hop on over to Pushy.me to get started!

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-pushy
    \n

    For {N} 5 and below please use

    \n
    tns plugin add nativescript-pushy@1.x
    \n

    Demo app

    \n

    Check the source in the demo folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-pushy
    cd nativescript-pushy/src
    npm i
    npm run demo.ios # or demo.android
    \n

    Setup (iOS only)

    \n

    Create a file called either app.entitlements or <YourAppName>.entitlements (where YourAppName is identical to the folder name of platforms/ios/YourAppName). Here's an example.

    \n

    Now reference that file from build.xcconfig as shown here.

    \n

    API

    \n

    getDevicePushToken

    \n
    import { getDevicePushToken } from \"nativescript-pushy\";

    getDevicePushToken()
        .then(token => console.log(`getDevicePushToken success, token: ${token}`))
        .catch(err => console.log(`getDevicePushToken error: ${err}`));
    \n

    setNotificationHandler

    \n

    Since plugin version 1.1.0 the entire payload of the notification is copied to the object this handler receives,\nbut note that it all gets copied into a data object. So if you send for instance {"foo": "bar"},\nyou can find the value "bar" at notification.data.foo.

    \n
    import { setNotificationHandler } from \"nativescript-pushy\";

    setNotificationHandler(notification => {
      console.log(`Notification received: ${JSON.stringify(notification)}`);
    });
    \n

    Please note..

    \n
    \n

    ⚠️ Do not test on a the iOS simulator as it can't receive push notifications.

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker-ns-7":{"name":"nativescript-modal-datetimepicker-ns-7","version":"12.0.1","license":"Apache-2.0","readme":"

    nativescript-modal-datetimepicker \"Build \"npm\" \"npm\"

    \n

    \"Twitter

    \n

    \"NPM\"

    \n

    This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

    \n

    Android Screenshots

    \n

    Date Picker

    \n\n

    Time Picker

    \n\n

    iOS

    \n\n

    Installation

    \n

    NativeScript 7+:

    \n

    Run ns plugin add nativescript-modal-datetimepicker

    \n

    NativeScript below 7:

    \n

    Run tns plugin add nativescript-modal-datetimepicker@1.2.3

    \n

    Configuration

    \n

    For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

    \n

    This can be changed in App_Resources/Android/values-21/styles.xml

    \n
    <!-- Default style for DatePicker - in spinner mode -->
    <style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
        <item name=\"android:datePickerMode\">calendar</item>
    </style>

    <!-- Default style for TimePicker - in spinner mode -->
    <style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
        <item name=\"android:timePickerMode\">clock</item>
    </style>
    \n

    Usage

    \n

    NativeScript Core

    \n
    const ModalPicker = require(\"nativescript-modal-datetimepicker\")
      .ModalDatetimepicker;

    const picker = new ModalPicker();

    // Pick Date
    exports.selectDate = function() {
      picker
        .pickDate({
          title: \"Select Your Birthday\",
          theme: \"light\",
          maxDate: new Date()
        })
        .then(result => {
          // Note the month is 1-12 (unlike js which is 0-11)
          console.log(
            \"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year
          );
          var jsdate = new Date(result.year, result.month - 1, result.day);
        })
        .catch(error => {
          console.log(\"Error: \" + error);
        });
    };

    // Pick Time
    exports.selectTime = function() {
      picker
        .pickTime()
        .then(result => {
          console.log(\"Time is: \" + result.hour + \":\" + result.minute);
        })
        .catch(error => {
          console.log(\"Error: \" + error);
        });
    };
    \n

    API

    \n

    pickDate(options): Promise<DateResponse>;

    \n

    Returns a promise that resolves to DateResponse type object (Note: the month is 1-12, unlike js which is 0-11)

    \n
    date: {
        day: number,
        month: number,
        year: number
    }
    \n

    pickTime(options): Promise<TimeResponse>;

    \n

    Returns a promise that resolves to TimeResponse type.

    \n
    time: {
        hour: number,
        minute: number
    }
    \n

    close(): void;

    \n

    Closes any open picker.

    \n

    options conform to the following interface:

    \n
    export interface PickerOptions {
      title?: string; // iOS ONLY: The title to display above the picker, default hidden.
      theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark, prominent and overlay.
      overlayAlpha?: number; // iOS ONLY: when theme is 'overlay', available options: 0.0 to 1.0
      maxDate?: Date;
      minDate?: Date;
      cancelLabel?: string; // iOS Only
      doneLabel?: string; // iOS Only
      cancelLabelColor?: Color; // iOS Only
      doneLabelColor?: Color; // iOS Only
      startingHour?: number; // Ignored on pickDate()
      startingMinute?: number; // Ignored on pickDate()
      startingDate?: Date; // Ignored on pickTime()
      datePickerMode?: string; // Android ONLY: set this to \"spinner\" to see spinner for DatePicker, other option is \"calendar\" (which is the default)
    }
    \n

    Response Interfaces

    \n
    export interface TimeResponse {
      hour: number;
      minute: number;
    }

    export interface DateResponse {
      day: number;
      month: number;
      year: number;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-drive":{"name":"nativescript-google-drive","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript Google Drive \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n

    \"Google Google Drive

    \n

    Upload, retrieve and delete files from you Nativescript app to Google Drive

    \n

    Prerequisites

    \n

    First to all, if you don't have a google account create one (I think most people have one 😝).

    \n

    Go to console.developers.google.com

    \n
      \n
    • Create a project
      • \n
    • Use the menu to go APIs ands Services option and then to Dashboard
      • \n
    • Add Google Drive API using the Enable APIs and Services button on the top bar
      • \n
    • On Credentials create a credential using the Create Credentials button on the top bar\n
        \n
      • Create API key for Android
        • \n
      • Create OAuth 2.0 client id credential for Android and iOS
        • \n
      \n
      • \n
    • On OAuth Consent screen option create or edit and follow the instruction\n
        \n
      • Add Scope drive.file, drive.appdata, drive.metadata or drive
        • \n
      \n
      • \n
    \n\"Create\n\"Create\n

    iOS

    \n

    You need to go to the google developer console, open the OAuth 2.0 Client Id create for iOS and copy the iOS URL scheme (REVERSED_CLIENT_ID) or download the plist.

    \n

    Take the code below and paste it in App_Resources/iOS/Info.plist and replace REVERSED_CLIENT_ID

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>[Add here the REVERSED_CLIENT_ID]</string>
            </array>
        </dict>
    </array>
    \n

    Installation

    \n

    To install this Nativescript plugin in your project just type or (copy and paste) the command below in the console:

    \n
    tns plugin add nativescript-google-drive
    \n

    Usage

    \n
    import { isIOS } from \"tns-core-modules/platform\";

    import { GoogleDriveHelper, SPACES, Config } from \"nativescript-google-drive\";
    import * as ThreadWorker from \"nativescript-worker-loader!nativescript-google-drive/thread-worker\";

    const config: Config = {
        space: SPACES.APP_DATA_FOLDER, /*[DRIVE|APP_DATA_FOLDER]*/
        worker: ThreadWorker
    };
    // iOS need this extra the clientID
    if (isIOS) {
        config.clientId = [CLIENT_ID];/*OAuth 2.0 client Id*/
    }

    GoogleDriveHelper.signInOnGoogleDrive(config)
    .then((helper: GoogleDriveHelper) => {
        // TODO
    })
    .catch((err) => {
        // handler error
    });
    \n
    \n

    If you have some issues using this plugin with an Angular Nativescript app with the worker loader, read this and take a look at the Angular demo app.

    \n
    \n

    API

    \n

    signInOnGoogleDrive

    \n
    /**
     * This method start Google SignIn flow and ask for Gogole Drive permissions to the user
     * and initialize a drive helper class
     * @static @function
     *
     * @param {Config} config
     *
     * @returns {Promise<GoogleDriveHelper>}
     */
    static signInOnGoogleDrive(config: Config): Promise<GoogleDriveHelper>;
    \n
    const config: Config = {
        space: SPACES.APP_DATA_FOLDER, /*[DRIVE|APP_DATA_FOLDER]*/
        worker: ThreadWorker
    };
    // iOS needs the clientID
    if (isIOS) {
        config.clientId = [CLIENT_ID];/*OAuth 2.0 client Id*/
    }

    GoogleDriveHelper.signInOnGoogleDrive(config)
    .then((helper: GoogleDriveHelper) => {
        // TODO
    })
    .catch((err) => {
        // handler error
    });
    \n

    The Config interface's properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    spacestringRequired on Android, iOS. Specify the drive scope or space to work on SPACES.APP_DATA_FOLDER or SPACES.DRIVE
    workerObjectRequired on Android, iOS. The worker thread to execute all the operations
    clientIdstringRequired on iOS. The OAuth 2.0 client Id
    extraDriveScopesArray<string>Optional on Android, iOS. To specify more scope
    \n

    createFile

    \n
    /**
     * Create a file with the specified metadata in Google Drive
     *
     * @param {FileInfoContent} fileInfo file metadata
     *
     * @returns {Promise<string>} created file id
     */
    createFile(fileInfo: FileInfoContent): Promise<string>;
    \n

    The FileInfoContent interface's properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    contentstring or FileContent of the file
    \n
    \n

    FileInfoContent extends FileInfo

    \n
    \n

    updateFile

    \n
    /**
     * Update a file content in Google Drive.
     * If you want to update the metadata, you have to required permission to metadata scope to the user.
     *
     * @param {FileInfoContent} fileInfo file metadata
     *
     * @returns {Promise<string>} created file id
     */
    updateFile(fileInfo: FileInfoContent): Promise<boolean>;
    \n

    readFileContent

    \n
    /**
     * Read the content of plain text file
     * @param {string} driveFileId
     *
     * @returns {Promise<string>} text contained in the file
     */
    readFileContent(driveFileId: string): Promise<string>;
    \n

    deleteFile

    \n
    /**
     * Delete a file
     * @param {string} driveFileId
     *
     * @returns {Promise<boolean>} deleted or not
     */
    deleteFile(driveFileId: string): Promise<boolean>;
    \n

    downloadFile

    \n
    /**
     * Download a file
     * @param {string} driveFileId
     *
     * @returns {Promise<File>} file downloaded
     */
    downloadFile(driveFileId: string): Promise<File>;
    \n

    uploadFile

    \n
    /**
     * Upload a file with the specified metadata in Google Drive
     *
     * @param {FileInfo} fileInfo file metadata
     *
     * @returns {Promise<string>} uploaded file id
     */
    uploadFile(fileInfo: FileInfo): Promise<string>;
    \n

    The FileInfo interface's properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    namestringRequired. Name of the file
    mimeTypestringMimeType of the file
    idstringId of the file
    descriptionstringDescription of the file
    parentIdstringParent Id of the file
    createdTimeDateTime of when the file was uploaded
    sizenumberSize of the file in kb
    \n

    listFilesByParent

    \n
    /**
     * List all the files contained in the parent or root folder
     * @param {string} parentId parent folder OPTIONAL
     *
     * @returns {Promise<Array<FileInfo>>} file list
     */
    listFilesByParent(parentId?: string): Promise<Array<FileInfo>>;
    \n

    searchFiles

    \n
    /**
     * Search files in Google Drive with the given metadata.
     *
     * @param {FileInfo} fileInfo file metadata to search for
     *
     * @returns {Promise<Array<FileInfo>>} file list matched
     */
    searchFiles(fileInfo: FileInfo): Promise<Array<FileInfo>>;
    \n

    createFolder

    \n
    /**
     * Create a folder with the given metadata. The content property is ignore
     * @param {FileInfo} fileInfo folder metadata
     *
     * @returns {Promise<string>} created folder id
     */
    createFolder(fileInfo: FileInfo): Promise<string>;
    \n

    findFolder

    \n
    /**
     * Find folders by name
     *
     * @param {string} name
     *
     * @returns {Promise<Array<FileInfo>>} folder list
     */
    findFolder(name: string): Promise<Array<FileInfo>>;
    \n

    signOut

    \n
    /**
     * Disconnect the google drive account
     * @returns {Promise<boolean>}
     */
    signOut(): Promise<boolean>;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-update":{"name":"nativescript-version-update","version":"2.0.2","license":"Apache-2.0","readme":"

    nativescript-version-update

    \n

    \"npm\"\n\"npm\"

    \n

    \"NPM\"

    \n

    This plugin allows you to define a notification strategy regarding your app updates. You are able to specify if you want to force, offer or ignore an update based on the new version available in the platform store.

    \n

    For example, you could want to force all major version update, but offer the option to your user to chose to update or skip a minor or patch version.

    \n

    You can also specify how many days after the update release you want to display the alert.

    \n

    Prerequisites

    \n

    You need to add appversion plugins for this one to work:

    \n
    tns plugin add @nativescript/appversion
    \n

    Installation

    \n
    tns plugin add nativescript-version-update
    \n

    Usage

    \n

    In your main.ts or app.ts file, before app start, call StoreUpdate.init with desired options like so:

    \n
        import { StoreUpdate, AlertTypesConstants } from \"nativescript-version-update\";

        StoreUpdate.init({
            notifyNbDaysAfterRelease: 1,
            majorUpdateAlertType: AlertTypesConstants.OPTION
        })
    \n

    Localization

    \n

    The plugin contains some default translations inside json files located in src/i18n folder and required by hand in the src/helpers/locales.helper.ts file.\nYou can also specify a custom translation in the plugin initialization through the configuraiton options.\nIf you want to contribute a regionalized translation, you must use the lang-regionCode format specified in Apple doc, but with the country lowercased (ex: fr-ca, en-us)

    \n

    API

    \n

    Configuration options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    majorUpdateAlertTypeFORCEAlert type for major version change (e.g: A.b.c.d)
    minorUpdateAlertTypeOPTIONAlert type for minor version change (e.g: a.B.c.d)
    patchUpdateAlertTypeNONEAlert type for major version change (e.g: a.b.C.d)
    revisionUpdateAlertTypeNONEAlert type for revision version change (e.g: a.b.c.D)
    notifyNbDaysAfterRelease1Delays the update prompt by a specific number of days
    countryCodeencountry store code
    alertOptionsnullCustomize alert dialog text, bypasses the Locale json
    \n

    Alert types

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValueDescription
    FORCE1Show an alert that can't be skipped
    OPTION2Show an alert that can be skipped
    NONE3Don't display alert at all
    \n

    AlertOptions configuration (Optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    titleLocaleTextDialog title, fallback to the locale json
    messageLocaleTextDialog body text, fallback to the locale json
    updateButtonLocaleTextDialog update button, fallback to the locale json
    skipButtonLocaleTextDialog skip button, fallback to the locale json
    \n

    Development

    \n

    Clone this repository, go in the src folder then run the command npm run setup\nYou can then use:

    \n
      \n
    • npm run demo.ios or npm run demo.android to start the demo
      • \n
    • npm run plugin.tscwatch to watch plugin file and start developing!
      • \n
    \n

    The repo contains 2 demos folder, one with angular, and one without.\nDemos use the bundleId com.bitstrips.imoji as their App version contains Major, Minor and Patch numbers, and they update their app really often.\nYou can change parameters passed ton package init in main.ts or app.ts files and change app version in android app.gradle and ios info.plist config files to test the feature.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toasts":{"name":"nativescript-toasts","version":"1.0.3","license":"ISC","readme":"

    nativescript-toasts

    \n

    This plugin provides a common API for android and iOS to show toast notifications in your NativeScript applications.

    \n

    Installation

    \n
    \n

    tns plugin add nativescript-toasts

    \n
    \n

    How to use

    \n
    var nstoasts = require(\"nativescript-toasts\");
    var options = {
    \ttext: \"Hello World\",
        duration : nstoasts.DURATION.SHORT,
        position : nstoasts.POSITION.TOP //optional
    }
    nstoasts.show(options);
    \n

    This plugin uses third party libraries for iOS

    \n

    The plugin uses a pod created by Charles Scalesse to display toasts on iOS

    \n
    \n

    https://cocoapods.org/pods/Toast

    \n
    \n

    Typescript users

    \n
    import * as Toast from 'nativescript-toasts';

    let toastOptions:Toast.ToastOptions = {text: \"Hello World\", dutation: Toast.DURATION.SHORT};
    Toast.show(toastOptions);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apxor":{"name":"nativescript-apxor","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Apxor

    \n

    Native script Apxor SDK

    \n

    How to build

    \n
      \n
    • Install nativescript. Follow instructions here
      • \n
    • Update the Android and iOS related changes in src folder
      • \n
    • Goto demo-angular folder
      • \n
    • Run npm install
      • \n
    • Run tns run android for android and tns run ios for iOS
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mixpanel":{"name":"nativescript-mixpanel","version":"2.0.3","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Mixpanel

    \n

    A NativeScript plugin to provide the ability to integrate with Mixpanel.

    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add nativescript-mixpanel

    \n

    Usage

    \n

    Angular Native (NativeScript Angular) Usage

    \n

    In main.ts add the following before you bootstrap

    \n

    import {MixpanelHelper} from \"nativescript-mixpanel\";
    MixpanelHelper.init(YOUR_KEY_HERE);
    \n

    API

    \n
    import {MixpanelHelper} from \"nativescript-mixpanel\";
    \n
      \n
    • MixpanelHelper.init(token: any)
      • \n
    • MixpanelHelper.track(eventName: any, props?: any)
      • \n
    • MixpanelHelper.timeEvent(eventName: any)
      • \n
    • MixpanelHelper.identify(id: any, extraAtributes?: any)
      • \n
    • MixpanelHelper.registerSuperProperties(props: any)
      • \n
    • MixpanelHelper.addPushDeviceToken(token: any)
      • \n
    • MixpanelHelper.alias(alias: string)
      • \n
    • MixpanelHelper.reset()
      • \n
    • MixpanelHelper.flush()
      • \n
    \n

    Contributors

    \n
      \n
    • Antonio Cueva Urraco
      • \n
    • Blake Nussey
      • \n
    • Demetrio Filocamo
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-tracking":{"name":"nativescript-version-tracking","version":"1.0.0","license":"MIT","readme":"

    \"Bazzite\n\"Travis\"\n\"version\"\n\"License\"

    \n

    NativeScript Version Tracking \"apple\" \"android\"

    \n

    Track which versions of your NativeScript App, a user has previously installed.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-version-tracking
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.

    \n

    Initialize the plugin

    \n

    This plugin needs to be initialized when your app starts.

    \n

    TypeScript

    \n
    import * as app from 'tns-core-modules/application';
    import versionTracking from 'nativescript-version-tracking';

    app.on('launch', () => {
        versionTracking.init();
    });
    \n

    Javascript

    \n
    var app = require('tns-core-modules/application');
    var versionTracking = require('nativescript-version-tracking');

    app.on('launch', function () {
        versionTracking.init();
    });\t
    \n

    Use the API

    \n

    You can make use of the plugin whenever you want. For example, a user has launched several previous versions, and this is the first time he's launched the new version 2.0.1:

    \n
    versionTracking.isFirstLaunchEver;        // false
    versionTracking.isFirstLaunchForVersion;  // true
    versionTracking.isFirstLaunchForBuild;    // true

    versionTracking.currentVersion;           // 2.0.1
    versionTracking.previousVersion;          // 2.0.0
    versionTracking.firstInstalledVersion;    // 1.0.0
    versionTracking.versionHistory;           // [1.0.0, 1.0.1, 1.0.2, 2.0.0, 2.0.1]

    versionTracking.currentBuild;             // 18
    versionTracking.previousBuild;            // 15
    versionTracking.firstInstalledBuild;      // 1
    versionTracking.buildHistory;             // [1, 2, 3, 4, 5, 8, 9, 10, 11, 13, 15, 18]

    versionTracking.firstLaunchForVersion('3.0.0')     // false
    versionTracking.firstLaunchForBuild('20')          // false
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    isFirstLaunchEver-Check if this is the first time ever that the app is launched.
    isFirstLaunchForVersion-Check if this is the first time the current version is being launched.
    isFirstLaunchForBuild-Check if this is the first time the current build is being launched.
    currentVersion-Returns the current version of the app.
    previousVersion-Returns the previous version of the app.
    firstInstalledVersion-Returns the version which the user first installed the app.
    versionHistory[]Returns a list of versions which the user has had installed, e.g. ['2.1', '3.5', '4.0', '4.1']. The List is ordered from the first version installed to (including) the current version
    currentBuild-Returns the current build of the app.
    previousBuild-Returns the previous build of the app.
    firstInstalledBuild-Returns the build which the user first installed the app.
    buildHistory[]Returns a list of builds which the user has had installed, e.g. ['2100', '3500', '4000', '4100']. The List is ordered from the first build installed to (including) the current build.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    init(versionsKey?: string, buildsKey?: string)voidInitializes the plugin. Calling this method is required. A good place to call it is at the application onLaunch() method.
    firstLaunchForVersion(version: string)booleanCheck if this is the first launch for a particular version number. Useful if you want to execute some code for the first time launches of a particular version.
    firstLaunchForBuild(build: string)booleanCheck if this is the first launch for a particular build number. Useful if you want to execute some code for the first time launches of a particular build.
    \n

    Support

    \n\n

    Professional Support

    \n

    This project is sponsored by Bazzite. If you require assistance on your project(s), please contact us at https://www.bazzite.com/contact.

    \n

    Contributing

    \n

    Please make sure to read the Contributing Guide before making a pull request.

    \n

    Code of Conduct

    \n

    Everyone participating in this project is expected to agree to abide by the Code of Conduct.

    \n

    License

    \n

    Code released under the MIT License.

    \n
    \n

    Originally inspired by VersionTrackingPlugin.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hijri":{"name":"nativescript-hijri","version":"1.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"twitter:

    \n

    \"NPM\"

    \n

    Nativescript Hijri plugin

    \n

    This plugin is inspired by https://github.com/arabiaweather/hijri-date

    \n

    Nativescript-hijri

    \n

    Hijri plugin allow you to convert gregorian date to islamic hijri date.

    \n

    \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-hijri
    \n

    Usage

    \n

    Typescript NativeScript

    \n

    main-view-model

    \n
    import {Observable} from 'data/observable';
    import {Hijri, islamicDateObject} from 'nativescript-hijri';


    export class HelloWorldModel extends Observable {
      public message: string;
      private hijri: Hijri;

      constructor() {
        super();

        this.hijri = new Hijri(new Date,0);
        this.message = this.hijri.hijri_en.dayOfWeekText;
        console.dir(this.hijri.hijri_en);

      }
    }
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnDescription
    hijri_arObject:islamicDateObjectAccepts 2 Arguments Date , Date Adjustment by days.
    return Object of islamicDateObject where day and month are written in arabic alphabet.
    hijri_enObject:islamicDateObjectAccepts 2 Arguments Date , Date Adjustment by days.
    return Object of islamicDateObject where day and month are written in English alphabet.
    \n

    NativeBaguette 🥖

    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Rachid
    rkhayyat
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ngrx-devtools-nativescript":{"name":"ngrx-devtools-nativescript","version":"7.0.0","license":"MIT","readme":"

    Looking for maintainers

    \n

    This repo is looking for maintainers. If you are interested please ping me on https://twitter.com/ufsa

    \n

    ngrx-devtools-nativescript

    \n

    Implementation of a devtools monitor similar to those available in @ngrx/store-devtools for NativeScript.

    \n

    Install

    \n
    npm i ngrx-devtools-nativescript
    \n

    How to use

    \n

    First of all you should instrument your @ngrx/store using StoreModule.provideStore(...). Check out @ngrx/devtools readme for how to do that.

    \n

    Import the NativeScriptDevToolsMonitors in your app(or other) module and add store-dev-tools instrumentation by importing StoreDevtoolsModule.instrumentStore():

    \n
    import { NgModule } from \"@angular/core\";
    import { StoreModule } from '@ngrx/store';
    import { NativeScriptDevToolsMonitors } from \"ngrx-devtools-nativescript\";
    import { StoreDevtoolsModule } from '@ngrx/store-devtools';

    @NgModule({
      imports: [
        NativeScriptModule,
        NativeScriptDevToolsMonitors,
        StoreModule.provideStore({ ... }),
        StoreDevtoolsModule.instrumentStore()
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    class AppModule { };
    \n

    Use <ns-dock-monitor> component inside you application - preferably in the root of the visual tree.

    \n
    import { NSDockMonitor } from \"ngrx-devtools-nativescript\";

    @Component({
        selector: \"my-app\",
        directives: [NSDockMonitor],
        template: `
        <grid-layout>
            //...
            <ns-dock-monitor screenCover=\"0.5\"></ns-dock-monitor>
        </grid-layout>`
    })
    export class AppComponent {
        //...
    }
    \n

    You can specify what part of the screen should be covered by the dev-tools slideout with the screenCover property.

    \n

    Example

    \n

    Example projects:

    \n\n

    Pure Redux example with Vanilla JS {N} App

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-taptic-engine":{"name":"nativescript-taptic-engine","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/EddyVerbruggen/nativescript-taptic-engine/blob/master/LICENSE"},"readme":"

    NativeScript Taptic Engine plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n\n

    Supported platforms

    \n
      \n
    • Official API: iPhone 7 / 7 Plus or newer
      • \n
    • Unofficial API: iPhone 6s / 6s Plus or newer
      • \n
    • Requires Xcode 8 to build
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-taptic-engine
    \n

    Demo app (NativeScript Core, XML)

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device and you'll see this:

    \n\n

    Demo app (NativeScript-Vue)

    \n

    We also have a Vue demo! Check out the demo-vue app!

    \n\n

    To run it locally:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-taptic-engine
    cd nativescript-taptic-engine/src
    npm run demo-vue.ios
    \n

    Official API (requires at least iPhone 7)

    \n

    It's recommended to use this API, but you're limited to iPhone 7 and higher.\nAs per Apples guidelines\nthere's no runtime way to determine if the device is capable of providing haptic feedback,\nso the Promise can largely be ignored so I'm not even showing them here.

    \n

    The API names are modeled after what Apple has called them:

    \n

    selection

    \n

    Use selection feedback generators to indicate a change in selection.

    \n
    TypeScript
    \n
    // require the plugin
    import {TapticEngine} from \"nativescript-taptic-engine\";

    // instantiate the plugin
    let tapticEngine = new TapticEngine();

    tapticEngine.selection();
    \n
    JavaScript
    \n
    // require the plugin
    var TapticEngine = require(\"nativescript-taptic-engine\").TapticEngine;

    // instantiate the plugin
    var tapticEngine = new TapticEngine();

    tapticEngine.selection();
    \n

    notification

    \n

    Use notification feedback generators to indicate successes, failures, and warnings.

    \n

    There are 3 notification types: TapticEngineNotificationType.SUCCESS (default), .WARNING, and .ERROR.

    \n
    TypeScript
    \n
    // require the plugin
    import {TapticEngine, TapticEngineNotificationType} from \"nativescript-taptic-engine\";

    // instantiate the plugin
    let tapticEngine = new TapticEngine();

    tapticEngine.notification({
      type: TapticEngineNotificationType.ERROR
    });
    \n

    impact

    \n

    Use impact feedback generators to indicate that an impact has occurred.\nFor example, you might trigger impact feedback when a user interface object\ncollides with something or snaps into place.

    \n

    There are 3 impact styles: TapticEngineImpactStyle.LIGHT, .MEDIUM (default), and .HEAVY.

    \n
    TypeScript
    \n
    // require the plugin
    import {TapticEngine, TapticEngineImpactStyle} from \"nativescript-taptic-engine\";

    // instantiate the plugin
    let tapticEngine = new TapticEngine();

    tapticEngine.impact({
      type: TapticEngineImpactStyle.HEAVY
    });
    \n

    Unofficial API (requires at least iPhone 6s)

    \n

    BEWARE This uses an undocumented feature which may get your app rejected when reviewed by Apple.\nPeople have used this approach without problems though.

    \n

    weakBoom

    \n

    This triggers the same effect as the 'Peek' in 'Peek & Pop', a very brief vibration.

    \n
    TypeScript
    \n
    // require the plugin
    import {TapticEngineUnofficial} from \"nativescript-taptic-engine\";

    // instantiate the plugin
    let tapticEngineUnofficial = new TapticEngineUnofficial();

    tapticEngineUnofficial.weakBoom().then(() => {
      // note that unsupported iOS devices like the simulator also end up here
    }, (err) => {
      console.log(\"You're running on Android. Meh.\");
    });
    \n
    JavaScript
    \n
    // require the plugin
    var TapticEngineUnofficial = require(\"nativescript-taptic-engine\").TapticEngineUnofficial;

    // instantiate the plugin
    var tapticEngineUnofficial = new TapticEngineUnofficial();

    tapticEngineUnofficial.weakBoom().then(
      function() {
        // note that unsupported iOS devices like the simulator also end up here
        console.log(\"Boomed weakly, if available.\");
      }, function () {
        console.log(\"You're running on Android. Meh.\");
      }
    );
    \n

    strongBoom

    \n

    This triggers the 'Pop' effect of 'Peek & Pop', which is a bit more profound than the 'Peek' effect.

    \n

    Codewise this is exactly the same as weakBoom, except for the function name of course.

    \n

    burst

    \n

    This triggers the 'Nope' effect you get when fi. force touching a home icon which doesn't have any action. It's a short burst of 3-ish 'weak booms'.

    \n

    Codewise this is exactly the same as weakBoom and strongBoom, except for the function name of course.

    \n

    Changelog

    \n
      \n
    • 2.0.0 Added official API for iPhone 7. Moved the old API to TapticEngineUnofficial.*. Requires Xcode 8 to build.
      • \n
    • 1.0.0 Initial release, unofficial API only. Compatible with any Xcode version.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@adel12790/nativescript-socketio":{"name":"@adel12790/nativescript-socketio","version":"5.0.7","license":"Apache-2.0","readme":"

    Nativescript nativescript-socketio

    \n
    ns plugin add @adel12790/nativescript-socketio
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    Socket.IO platform included plugins versions

    \n
      \n
    • Android: Socket.io-client-java@1.0.0
      • \n
    • iOS: Socket.io-client-Swift@15.2.0
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textfield-ex":{"name":"nativescript-textfield-ex","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript TextField Extended

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    TextField Extended for allow only numbers (1234567890).

    \n

    Now you can use a new value for keyboardType property: digits.

    \n
    <TextFieldEx keyboardType=\"digits\"></TextFieldEx>
    \n

    Installation

    \n
    tns plugin add nativescript-textfield-ex
    \n

    Demo app (Core)

    \n

    Check out the demo folder.

    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-textfield-ex\">

      <StackLayout class=\"p-20\">

        <!-- Plugin -->
        <ui:TextFieldEx hint=\"0000\" class=\"tf-ex\" keyboardType=\"digits\"></ui:TextFieldEx>

        <!-- Original -->
        <TextField hint=\"0000\" class=\"tf-ex\" keyboardType=\"number\"></TextField>

      </StackLayout>
    </Page>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-login-knotes":{"name":"nativescript-wechat-login-knotes","version":"1.0.8","license":"Apache-2.0","readme":"

    NativeScript WeChat login plugin

    \n

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    Using this plugin you will be able implement wechat login feature in your APP. You can read more details from here

    \n

    Installation

    \n
    tns plugin add nativescript-wechat-login-knotes
    \n

    If you are using NativeScript 5.4.X then you can have a look this branch

    \n

    Android

    \n

    If installation was successful then wxapi.WXEntryActivity.android.ts file should be create to your src or app (based on nsconfig.json or webpack.config.js appPath value) directory with your APP ID. If it wasn't successfully created then you will have to create that file manually. You can get code of that file from here. In this case you will require to change YOUR_APP_ID to your app's ID.

    \n

    If you don't have wxapi.WXEntryActivity.android.ts file in your src or app directory then Android won't receive notification from wechat.

    \n

    Webpack

    \n

    You will have to add wxapi.WXEntryActivity.android.ts in your webpack.config.js file so that android runtime can generate appropriate java class. Check the demo custom-webpack.config.js file. You can read here for details.

    \n

    If you are using NativeScript version 6.4.0 or newer then you can create custom custom-webpack.config.js file & add that file in your nsconfig.json file as below

    \n

    custom-webpack.config.js

    \n
    const webpackConfig = require(\"./webpack.config\");
    const path = require(\"path\");

    module.exports = env => {

        env = env || {};

        const cnf = webpackConfig(env);

        env.appComponents = env.appComponents || [];
        env.appComponents.push(path.resolve(cnf.context, \"wxapi.WXEntryActivity.android.ts\")); 

        const config = webpackConfig(env);

        return config;
    }
    \n

    nsconfig.json

    \n
    ...
    \"webpackConfigPath\": \"./custom-webpack.config.js\"
    \n

    For NativeScript version 6.3.0 or older edit webpack.config.js manually.

    \n
    const appComponents = [
        \"tns-core-modules/ui/frame\",
        \"tns-core-modules/ui/frame/activity\",
        resolve(__dirname, \"src/wxapi.WXEntryActivity.android.ts\") // or resolve(__dirname, \"app/wxapi.WXEntryActivity.android.ts\") depends on nsconfig.json or webpack.config.js file's appPath value.
    ];
    \n

    iOS

    \n

    Open your Info.plist file from App_Resources/iOS location & add following lines

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleURLName</key>
    \t\t<string>weixin</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>WECHAT_APP_ID</string>
    \t\t</array>
    \t</dict>
    </array>
    \n

    Change WECHAT_APP_ID with your Wechat App ID. Check demo project demo/App_Resources/iOS/Info.plist

    \n

    Usage

    \n

    For details you can check the demo project.

    \n

    In your main.ts or app.ts need to import initWechatSdk(WECHAT_APP_ID, UNIVERSAL_LINK) method with wechat app id.

    \n
    ....
    import { initWechatSdk } from \"nativescript-wechat-login-knotes\";

    initWechatSdk(\"wxd930ea5d5a258f4f\", \"https://www.your.app.universal.link\");
    \n

    In any other page

    \n
    ....
    import { WechatLogin } from \"nativescript-wechat-login-knotes\";
    import * as app from \"tns-core-modules/application\";
    \n

    Now call in a method

    \n
    let wechat = new WechatLogin();

    if (wechat.isWechatInstalled()) {
        wechat.doLogin(\"nativescript_demo\");
    } else {
        console.log(\"wechat isn't installed\")
    }
    \n

    You will get response from wxApiResponse event. So, you can register in that event like this:

    \n
    app.on('wxApiResponse', function(res){
    \tconsole.dir(res) // you will get wechat notification here.
    \tconsole.dir(res.object) // information from wechat
    }, this);
    \n

    Ref:

    \n

    https://open.wechat.com/cgi-bin/newreadtemplate?t=overseas_open/docs/mobile/login/guide#login_guide

    \n

    https://github.com/aaronbruckner/wechatAndroidLoginDemo

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mapbox-enduco":{"name":"nativescript-mapbox-enduco","version":"2.1.22","license":"MIT","readme":"\n \n\n

    To run the Angular demo

    \n
    cd src
    npm run build.dist
    cd ../demo-angular
    tns run <platform>
    \n

    To run the plain Nativescript demo

    \n
    cd src
    npm run build.dist
    cd ../demo
    tns run <platform>
    \n

    NativeScript Mapbox plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Awesome native OpenGL-powered maps - by Mapbox

    \n\n
    \n

    There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

    \n
    \n

    Prerequisites

    \n

    You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

    \n

    Your access_token can then be set in the top level mapbox_config.ts file.

    \n

    The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

    \n
    \n

    NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

    \n
    \n

    Breaking Changes

    \n

    This version includes breaking API changes.

    \n

    The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

    \n

    Installation

    \n

    This version of the plugin is still in development and not yet available via NPM.

    \n

    To add the plugin to our own project first

    \n
    cd src
    npm run build.dist
    \n

    then in your package.json file in the dependencies section add:

    \n
      \"nativescript-mapbox\": \"file:/path/to/nativescript-mapbox/publish/dist/package\"
    \n

    If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

    \n

    On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

    \n
      <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
    \n

    If you get an error related to TelemetryService then please check it's there.

    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

    \n

    Demo app (Angular)

    \n

    There is also the beginnings of an Angular demo in demo-angular in this repository.

    \n

    Declaring a map in the view

    \n

    XML

    \n

    You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

    \n

    A simple layout could look like this:

    \n\n

    Could be rendered by a definition like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
      <StackLayout>
        <Label text=\"Nice map, huh!\" class=\"title\"/>
        <ContentView height=\"240\" width=\"240\">
          <map:MapboxView
              accessToken=\"your_token\"
              mapStyle=\"traffic_night\"
              latitude=\"52.3702160\"
              longitude=\"4.8951680\"
              zoomLevel=\"3\"
              showUserLocation=\"true\"
              mapReady=\"onMapReady\">
          </map:MapboxView>
        </ContentView>
      </StackLayout>
    </Page>
    \n

    Angular

    \n

    Component:

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
    \n

    View:

    \n
      <ContentView height=\"100%\" width=\"100%\">
        <Mapbox
            accessToken=\"your_token\"
            mapStyle=\"traffic_day\"
            latitude=\"50.467735\"
            longitude=\"13.427718\"
            hideCompass=\"true\"
            zoomLevel=\"18\"
            showUserLocation=\"false\"
            disableZoom=\"false\"
            disableRotation=\"false\"
            disableScroll=\"false\"
            disableTilt=\"false\"
            (mapReady)=\"onMapReady($event)\">
        </Mapbox>
      </ContentView>
    \n

    Available XML/Angular options

    \n

    All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondefaultdescription
    accesstoken-see 'Prerequisites' above
    delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
    mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
    latitude -Set the center of the map by passing this in
    longitude-.. and this as well
    zoomLevel00-20
    showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
    hideCompass falseDon't show the compass in the top right corner during rotation of the map
    hideLogofalseMapbox requires false if you're on a free plan
    hideAttribution trueMapbox requires false if you're on a free plan
    disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
    disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
    disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
    disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    moveBeginEvent-The name of a function to be called when the map is moved.
    locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
    locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
    \n

    Want to add markers?

    \n

    This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

    \n

    Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
      var nativeMapView = args.ios ? args.ios : args.android;
      console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

      // .. or use the convenience methods exposed on args.map, for instance:
      args.map.addMarkers([
        {
          lat: 52.3602160,
          lng: 4.8891680,
          title: 'One-line title here',
          subtitle: 'Really really nice location',
          selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
          onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
        }]
      );
    }

    exports.onMapReady = onMapReady;
    \n

    .. or want to set the viewport bounds?

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      args.map.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true
          }
      );
    }

    exports.onMapReady = onMapReady;
    \n

    The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

    \n

    Check out the usage details on the functions below.

    \n

    Declaring a map programmatically

    \n

    Add a container to your view XML where you want to programmatically add the map. Give it an id.

    \n
    <ContentView id=\"mapContainer\" />
    \n

    show

    \n

        const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

        const settings = {

          // NOTE: passing in the container here.

          container: contentView,
          accessToken: ACCESS_TOKEN,
          style: MapStyle.LIGHT,
          margins: {
            left: 18,
            right: 18,
            top: isIOS ? 390 : 454,
            bottom: isIOS ? 50 : 8
          },
          center: {
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 9, // 0 (most of the world) to 20, default 0
          showUserLocation: true, // default false
          hideAttribution: true, // default false
          hideLogo: true, // default false
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disableTilt: false, // default false
          markers: [
            {
              id: 1,
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location',
              iconPath: 'res/markers/green_pin_marker.png',
              onTap: () => console.log(\"'Nice location' marker tapped\"),
              onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
            }
          ]
        };

        console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

        const mapView = new MapboxView();

        // Bind some event handlers onto our newly created map view. 

        mapView.on( 'mapReady', ( args : any ) => {

          console.log( \"main-view-model: onMapReady fired.\" );

          // this is an instance of class MapboxView

          this.mapboxView = args.map;

          // get a reference to the Mapbox API shim object so we can directly call its methods.

          this.mapbox = this.mapboxView.getMapboxApi();

          this.mapbox.setOnMapClickListener( point => {
            console.log(`>> Map clicked: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnMapLongClickListener( point => {
            console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnScrollListener((point: LatLng) => {
            // console.log(`>> Map scrolled`);
          });

          this.mapbox.setOnFlingListener(() => {
            console.log(`>> Map flinged\"`);
          }).catch( err => console.log(err) );

        });

        mapView.setConfig( settings );
        contentView.content = mapView;
    \n

    hide

    \n

    All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

    \n
      mapbox.hide();
    \n

    unhide

    \n

    If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

    \n
      mapbox.unhide();
    \n

    destroy 💥

    \n

    To clean up the map entirely you can destroy instead of hide it:

    \n
      mapbox.destroy();
    \n

    setMapStyle

    \n

    You can update the map style after you've loaded it.

    \n
    \n

    With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

    \n
    \n
      mapbox.setMapStyle(mapbox.MapStyle.DARK);
    \n

    addMarkers

    \n
      import { MapboxMarker } from \"nativescript-mapbox\";

      const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
        id: 2, // can be user in 'removeMarkers()'
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        title: 'One-line title here', // no popup unless set
        subtitle: 'Infamous subtitle!',
        // icon: 'res://cool_marker', // preferred way, otherwise use:
        icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
        iconPath: 'res/markers/home_marker.png',
        selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
        onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
        onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
      };

      mapbox.addMarkers([
        firstMarker,
        {
          // more markers..
        }
      ])
    \n

    Updating markers

    \n

    Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

    \n
      firstMarker.update({
        lat: 52.3622160,
        lng: 4.8911680,
        title: 'One-line title here (UPDATE)',
        subtitle: 'Updated subtitle',
        selected: true, // this will trigger the callout upon update
        onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
        onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
      })
    \n

    removeMarkers

    \n

    You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

    \n
      // remove all markers
      mapbox.removeMarkers();

      // remove specific markers by id
      mapbox.removeMarkers([1, 2]);
    \n

    setViewport

    \n

    If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

    \n
      mapbox.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true // default true
          }
      )
    \n

    getViewport

    \n
      mapbox.getViewport().then(
          function(result) {
            console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
          }
      )
    \n

    setCenter

    \n
      mapbox.setCenter(
          {
            lat: 52.3602160, // mandatory
            lng: 4.8891680, // mandatory
            animated: false // default true
          }
      )
    \n

    getCenter

    \n

    Here the promise callback makes sense, so adding it to the example:

    \n
      mapbox.getCenter().then(
          function(result) {
            console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getCenter error: \" + error);
          }
      )
    \n

    setZoomLevel

    \n
      mapbox.setZoomLevel(
          {
            level: 6.5, // mandatory, 0-20
            animated: true // default true
          }
      )
    \n

    getZoomLevel

    \n
      mapbox.getZoomLevel().then(
          function(result) {
            console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getZoomLevel error: \" + error);
          }
      )
    \n

    animateCamera

    \n
      // this is a boring triangle drawn near Amsterdam Central Station
      mapbox.animateCamera({
        // this is where we animate to
        target: {
            lat: 52.3732160,
            lng: 4.8941680
        },
        zoomLevel: 17, // Android
        altitude: 2000, // iOS (meters from the ground)
        bearing: 270, // Where the camera is pointing, 0-360 (degrees)
        tilt: 50,
        duration: 5000 // default 10000 (milliseconds)
      })
    \n

    setTilt (Android only)

    \n
      mapbox.setTilt(
          {
            tilt: 40, // default 30 (degrees angle)
            duration: 4000 // default 5000 (milliseconds)
          }
      )
    \n

    getTilt (Android only)

    \n
      mapbox.getTilt().then(
          function(tilt) {
            console.log(\"Current map tilt: \" +  tilt);
          }
      )
    \n

    getUserLocation

    \n

    If the user's location is shown on the map you can get their coordinates and speed:

    \n
      mapbox.getUserLocation().then(
          function(userLocation) {
            console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
            console.log(\"Current user speed: \" +  userLocation.speed);
          }
      )
    \n

    trackUser

    \n

    In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

    \n
      mapbox.trackUser({
        mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
        animated: true
      });
    \n

    addSource

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

    \n

    Adds a vector to GeoJSON source to the map.

    \n
      mapbox.addSource( id, {
        type: 'vector',
        url: 'url to source'
      } );
    \n

    -or-

    \n
      mapbox.addSource( id, {
        'type': 'geojson',
        'data': {
          \"type\": \"Feature\",
            \"geometry\": {
            \"type\": \"LineString\",
              \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
            }
          }
        }
      );
    \n

    removeSource

    \n

    Remove a source by id

    \n
      mapbox.removeSource( id );
    \n

    addLayer

    \n

    NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

    \n

    https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

    \n

    To add a line:

    \n
      mapbox.addLayer({
        'id': someid,
        'type': 'line',
        'source': {
          'type': 'geojson',
          'data': {
            \"type\": \"Feature\",
              \"geometry\": {
              \"type\": \"LineString\",
                \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
              }
            }
          }
        },
        'layout': {
          'line-cap': 'round',
          'line-join': 'round'
        },    
        'paint': {
          'line-color': '#ed6498',
          'line-width': 5,
          'line-opacity': .8,
          'line-dash-array': [ 1, 1, 1, ..]
        }
      });
    \n

    To add a circle:

    \n
      mapbox.addLayer({
        \"id\": someid,
        \"type\": 'circle',
        \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
        \"source\": {
          \"type\": 'geojson',
          \"data\": {
            \"type\": \"Feature\",
            \"geometry\": {
              \"type\": \"Point\",
              \"coordinates\": [ lng, lat ]
            }
          }
        }, 
        \"paint\": {
          \"circle-radius\": {
            \"stops\": [
              [0, 0],
              [20, 8000 ]
            ],
            \"base\": 2
          },
          'circle-opacity': 0.05,
          'circle-color': '#ed6498',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ed6498'
        } 
      });
    \n

    Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

    \n

    removeLayer

    \n

    Remove a layer added with addLayer() by id.

    \n
      mapbox.removeLayer( id );
    \n

    addLinePoint

    \n

    Dynamically add a point to a line.

    \n
      mapbox.addLinePoint( <id of line layer>, lnglat )
    \n

    where lnglat is an array of two points, a longitude and a latitude.

    \n

    addPolygon

    \n

    Draw a shape. Just connect the dots like we did as a toddler.

    \n

    The first person to tweet a snowman drawn with this function gets a T-shirt.

    \n
      // after adding this, scroll to Amsterdam to see a semi-transparent red square
      mapbox.addPolygon(
          {
            id: 1, // optional, can be used in 'removePolygons'
            fillColor: new Color(\"red\"),
            fillOpacity: 0.7,

            // stroke-related properties are only effective on iOS
            strokeColor: new Color(\"green\"),
            strokeWidth: 8,
            strokeOpacity: 0.5,

            points: [
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              },
              {
                lat: 52.35421556258807,
                lng: 4.9308013916015625
              },
              {
                lat: 52.353796172573944,
                lng: 4.8799896240234375
              },
              {
                lat: 52.3864966440161,
                lng: 4.8621368408203125
              },
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              }
            ]
          })
          .then(result => console.log(\"Mapbox addPolygon done\"))
          .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
    \n

    removePolygons

    \n

    You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

    \n
      // remove all polygons
      mapbox.removePolygons();

      // remove specific polygons by id
      mapbox.removePolygons([1, 2]);
    \n

    addPolyline

    \n

    Deprecated. Use addLayer() instead.

    \n

    Draw a polyline. Connect the points given as parameters.

    \n
      // Draw a two segment line near Amsterdam Central Station
      mapbox.addPolyline({
          id: 1, // optional, can be used in 'removePolylines'
          color: '#336699', // Set the color of the line (default black)
          width: 7, // Set the width of the line (default 5)
          opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
          points: [
              {
                  'lat': 52.3833160, // mandatory
                  'lng': 4.8991780 // mandatory
              },
              {
                  'lat': 52.3834160,
                  'lng': 4.8991880
              },
              {
                  'lat': 52.3835160,
                  'lng': 4.8991980
              }
          ]
      });
    \n

    removePolylines

    \n

    Deprecated. Use removeLayer() instead.

    \n

    You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

    \n
      // remove all polylines
      mapbox.removePolylines();

      // remove specific polylines by id
      mapbox.removePolylines([1, 2]);
    \n

    addSource

    \n

    Add a source that can be used by addLayer. Note only vector type is currently supported.

    \n
      mapbox.addSource(
        id: \"terrain-source\", // required
        type: \"vector\", // supported types: vector
        url: \"mapbox://mapbox.mapbox-terrain-v2\"
      );
    \n

    removeSource

    \n

    Remove a source by id.

    \n
      mapbox.removeSource(\"terrain-source\");
    \n

    addLayer

    \n

    Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

    \n
      mapbox.addLayer(
        id: \"terrain-data\",  // required
        source: \"terrain-source\",  // id of source
        sourceLayer: \"contour\",  // id of layer from source
        type: \"line\", // supported types: circle, fill, line
        lineJoin: \"round\",
        lineCap: \"round\",
        lineColor: \"#ff69b4\",
        lineWidth: 1,
      );
    \n

    removeLayer

    \n

    Remove a layer by id.

    \n
      mapbox.removeLayer(\"terrain-data\");
    \n

    setOnMapClickListener

    \n

    Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

    \n
      mapbox.setOnMapClickListener((point: LatLng) => {
        console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnMapLongClickListener

    \n

    Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

    \n
      mapbox.setOnMapLongClickListener((point: LatLng) => {
        console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnScrollListener

    \n

    Add a listener to retrieve lat and lng of where the user scrolls to on the map.

    \n
      mapbox.setOnScrollListener((point?: LatLng) => {
        console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    Offline maps

    \n

    For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

    \n

    Important read: the offline maps documentation by Mapbox.

    \n

    downloadOfflineRegion

    \n

    This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

    \n
      mapbox.downloadOfflineRegion(
        {
          accessToken: accessToken, // required for Android in case no map has been shown yet
          name: \"Amsterdam\", // this name can be used to delete the region later
          style: mapbox.MapStyle.OUTDOORS,
          minZoom: 9,
          maxZoom: 11,
          bounds: {
            north: 52.4820,
            east: 5.1087,
            south: 52.2581,
            west: 4.6816
          },
          // this function is called many times during a download, so
          // use it to show an awesome progress bar!
          onProgress: function (progress) {
            console.log(\"Download progress: \" + JSON.stringify(progress));
          }
        }
      ).then(
        function() {
          console.log(\"Offline region downloaded\");
        },
        function(error) {
          console.log(\"Download error: \" + error);
        }
      );
    \n

    Advanced example: download the current viewport

    \n

    Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

    \n
      // I spare you the error handling on this one..
      mapbox.getViewport().then(function(viewport) {
        mapbox.downloadOfflineRegion(
          {
            name: \"LastViewport\", // anything you like really
            style: mapbox.MapStyle.LIGHT,
            minZoom: viewport.zoomLevel,
            maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
            bounds: viewport.bounds,
            onProgress: function (progress) {
              console.log(\"Download %: \" + progress.percentage);
            }
          }
        );
      });
    \n

    listOfflineRegions

    \n

    To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

    \n
      mapbox.listOfflineRegions({
        // required for Android in case no map has been shown yet
        accessToken: accessToken
      }).then(
        function(regions) {
          console.log(JSON.stringify(JSON.stringify(regions));
        },
        function(error) {
          console.log(\"Error while listing offline regions: \" + error);
        }
      );
    \n

    deleteOfflineRegion

    \n

    You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

    \n
      mapbox.deleteOfflineRegion({
        name: \"Amsterdam\"
      }).then(
        function() {
          console.log(\"Offline region deleted\");
        },
        function(error) {
          console.log(\"Error while deleting an offline region: \" + error);
        }
      );
    \n

    Permissions

    \n

    hasFineLocationPermission / requestFineLocationPermission

    \n

    On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

    \n

    You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

    \n

    Note that hasFineLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
      mapbox.hasFineLocationPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestFineLocationPermission' now
            console.log(\"Has Location Permission? \" + granted);
          }
      );

      // if no permission was granted previously this will open a user consent screen
      mapbox.requestFineLocationPermission().then(
          function() {
            console.log(\"Location permission requested\");
          }
      );
    \n

    Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

    \n

    Using marker images from the internet

    \n

    If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

    \n
    \t<key>NSAppTransportSecurity</key>
    \t<dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
    \t</dict>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tinyengine":{"name":"nativescript-tinyengine","version":"1.0.3","license":"Apache-2.0","readme":"

    Tiny Engine

    \n

    \"npm\" \"npm

    \n

    A little 2d game engine for nativescript.

    \n

    Installation

    \n
    tns plugin add nativescript-tinyengine
    \n

    Screenshots

    \n

    \"Screenshot\"

    \n

    Usage

    \n

    First in your XML you need to add a GridLayout

    \n
    <GridLayout id=\"container\" width=\"300\" height=\"300\" backgroundColor=\"lightgreen\">
            
    </GridLayout>
    \n

    then in your typescript file import everything required

    \n
    import { World, Entity, Vector2, OBB, CollisionResponse, Shape, Component, CircleShape, CubeShape, ImageShape } from 'nativescript-tinyengine';
    \n

    now you just need to instantiate a World object on your GridLayout and start using this library. Here is a basic code.

    \n
    let container: LayoutBase = page.getViewById(\"container\");

    let world: World = new World(container, 300, 300);

    let cubeEntity: Entity = new Entity(new Vector2(0, 50), new Vector2(0, 0), 45, new CubeShape(20, 20, '#FFFFFF'));
    world.addEntity(cubeEntity);

    setInterval(function () { world.tick(); }, 20);
    \n

    Documentation

    \n

    You can find the documentation of the library here

    \n

    Components / Collisions

    \n

    Component is an interface that you can implements. This interface has the following methods:

    \n
      \n
    • onStart(entity: Entity) Called before the first frame update of the attached entity.
      • \n
    • onUpdate(entity: Entity, deltatTime: number) Called at each frame update of the attached entity.
      • \n
    • onCollide(collider: Entity, collided: Entity) Called when the attached entity collide with an other entity.
      • \n
    • onDestroy(entity: Entity) Called when the attached entity is destroyed.
      • \n
    • getClassName(): string You need to return your class name in this method.
      • \n
    \n

    Components can be attached throught the addComponent<T extends Component>(type: (new () => T)) of the Entity class.

    \n

    Each entity got a property collisionResponse which can be set to NONE or COLLIDE. That's how are handled collision. If you want to have something custom, put the collision response to NONE and do your custom logic into onCollide(collider: Entity, collided: Entity) of a component.

    \n

    License

    \n

    Apache License Version 2.0, May 2019

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bubble-navigation":{"name":"nativescript-bubble-navigation","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript Bubble Navigation \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Overview

    \n

    Nativescript Bubble Navigation is a navigation tab plugins which provides beautiful navigations.

    \n

    \n \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-bubble-navigation
    \n

    Usage

    \n

    TypeScript

    \n

    xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" 
      xmlns:ui=\"nativescript-bubble-navigation\">
      <GridLayout rows=\"* auto\" colunms=\"*\" backgroundColor=\"{{ bg }}\">
        <StackLayout row=\"0\" class=\"p-20\">
          <Label class=\"h2\" color=\"white\" horizontalAlignment=\"center\" text=\"{{ title }}\"/>
        </StackLayout>
        <ui:BubbleNavigation row=\"1\" tabs=\"{{ tabs }}\" loaded=\"onBubbleNavigationLoaded\" padding=\"12\" tabBackgroundColor=\"white\" elevation=\"8\"/>
      </GridLayout>
    </Page>
    \n

    main-page.ts

    \n
    import * as observable from 'tns-core-modules/data/observable';
    import * as pages from 'tns-core-modules/ui/page';
    import { HelloWorldModel } from './main-view-model';
    import { BubbleNavigation, OnTabSelectedEventData } from 'nativescript-bubble-navigation';
    let vm = new HelloWorldModel();

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: observable.EventData) {
        // Get the event sender
        let page = <pages.Page>args.object;
        page.bindingContext = vm;
    }

    export function onBubbleNavigationLoaded(args) {
        let folding: BubbleNavigation = args.object;
        folding.on('tabSelected', tabSelected);
    }

    export function tabSelected(args: OnTabSelectedEventData) {
        vm.set('title', args.name.toUpperCase() + ' TAB!');
        vm.set('bg', vm.tabs[args.position].colorInactive);

        console.log('tab selected ' + args.name + ' at position ' + args.position);
    }
    \n

    main-view-model.ts

    \n
    import { Observable } from 'tns-core-modules/data/observable';
    import { BubbleNavigationItem } from 'nativescript-bubble-navigation';

    export class HelloWorldModel extends Observable {
      public title: string = 'HOME TAB!';
      public bg: string = '#e57373';
      public tabs: BubbleNavigationItem[];

      constructor() {
        super();

        this.tabs = [
          new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
          new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
          new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
          new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
        ];
      }
    }
    \n

    Angular

    \n

    app.module.ts

    \n
    import { BubbleNavigationModule } from \"nativescript-bubble-navigation/angular\";

    @NgModule({
        imports: [
            BubbleNavigationModule
        ],
        ...
    })
    \n

    your.component.ts

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

    @Component({
      ...
    })
    export class YourComponent implements OnInit {
        public title: string = 'HOME TAB!';
        public bg: string = '#e57373';
        public tabs: BubbleNavigationItem[];

        constructor() {
            this.tabs = [
                new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
                new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
                new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
                new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
            ];
        }

        ngOnInit(): void {
            ...
        }

        onBubbleNavigationTabSelected(args: OnTabSelectedEventData): void {
            this.title = args.name.toUpperCase() + ' TAB!';
            this.bg = this.tabs[args.position].colorInactive;

            console.log('tab selected ' + args.name + ' at position ' + args.position);
        }
    }
    \n

    your.component.html

    \n
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout rows=\"* auto\" colunms=\"*\" [backgroundColor]=\"bg\">
        <StackLayout row=\"0\" class=\"p-20\">
            <Label class=\"h1\" color=\"white\" horizontalAlignment=\"center\" [text]=\"title\"></Label>
        </StackLayout>

        <BubbleNavigation (tabSelected)=\"onBubbleNavigationTabSelected($event)\" row=\"1\" [tabs]=\"tabs\"
            loaded=\"onBubbleNavigationLoaded\" padding=\"12\" tabBackgroundColor=\"white\" elevation=\"8\">    </BubbleNavigation>
    </GridLayout>
    \n

    Vue

    \n

    app.js

    \n

    import BubbleNavigation from \"nativescript-bubble-navigation/vue\";

    Vue.use(BubbleNavigation);

    new Vue({
      ...
    }).$start();
    \n

    your-component.vue

    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>
        <GridLayout rows=\"* auto\" colunms=\"*\" :backgroundColor=\"bg\">
          <StackLayout row=\"0\" class=\"p-20\">
            <Label class=\"h1\" color=\"white\" horizontalAlignment=\"center\" :text=\"title\"></Label>
          </StackLayout>

          <BubbleNavigation
            @tabSelected=\"onBubbleNavigationTabSelected\"
            row=\"1\"
            :tabs=\"tabs\"
            padding=\"12\"
            tabBackgroundColor=\"white\"
            elevation=\"8\"
          />
        </GridLayout>
      </Page>
    </template>

    <script>
    import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

    export default {
        data() {
            return {
                tabs: [
                  new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
                  new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
                  new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
                  new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
                ],
                title: 'HOME TAB!',
                bg: '#e57373',
            }
        },
        methods: {
            onBubbleNavigationTabSelected(args) {
                this.title = `${args.name.toUpperCase()} TAB!`;
                this.bg = this.tabs[args.position].colorInactive;
                console.log('tab selected ' + args.name + ' at position ' + args.position);
            }
        }
    };
    </script>
    \n

    API

    \n

    BubbleNavigation

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    tabsArray<BubbleNavigationItem>Array containing the tabs for the BubbleNavigation\"android\" \"apple\"
    paddingnumberSet Bubble Tab padding\"android\"
    tabBackgroundColorstringSet Tab Bar Background Color\"android\" \"apple\"
    elevationnumberSet tab elevation/ shadow\"android\"
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    tabSelectedfunction ($event: OnTabSelectedEventData) {}Event get trigger every time the user select a new tab that receive an event object\"android\" \"apple\"
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    selectTab(index: number)VoidSelect a tab programmatically\"android\" \"apple\"
    \n

    BubbleNavigationItem

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescriptionPlatforms
    titlestringSelect a tab title\"android\" \"apple\"
    iconstringSelect a tab icon\"android\" \"apple\"
    colorActivecolorSelect a active color, the color of the tab when it's selected\"android\" \"apple\"
    colorInactivecolorSelect a active color, the color of the tab when it isn't selected\"android\" \"apple\"
    \n

    Limitations

    \n

    iOS

    \n

    Currently on ios adding more than four tabs will ressort having your text animations cut.

    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok":{"name":"nativescript-opentok","version":"2.0.1","license":"MIT","readme":"

    Nativescript OpenTok

    \n

    \"npm\"\n\"npm\"

    \n

    A Nativescript plugin for the OpenTok iOS and Android SDK.

    \n

    OpenTok: https://tokbox.com/developer/

    \n

    Getting Started

    \n

    Requirements

    \n
      \n
    • API Key with OpenTok. Get one here.
      • \n
    • Ability to generate a valid session id (either through OpenTok account or back-end service)
      • \n
    • Ability to generate a valid token (either through OpenTok account or back-end service)
      • \n
    • Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported.
      • \n
    \n

    Installation

    \n

    Node Package Manager (NPM)

    \n
      \n
    • npm install nativescript-opentok --save
      • \n
    \n

    Integration

    \n

    Routed Sessions

    \n
    View
    \n

    You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

    \n

    The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

    \n
    <StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
    <OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
    \n

    Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

    \n
    import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

    private _apiKey:string = 'API_KEY';
    private _sessionId: string = 'SESSION_ID';
    private _token: string = 'TOKEN';

    private publisher: TNSOTPublisher;
    private subscriber: TNSOTSubscriber;

    private session: TNSOTSession;

    constructor(private page: Page) {
       super();
       this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
       this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
       this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
       this.initPublisher();
       this.initSubscriber();
    }

    initPublisher() {
       this.session.connect(this._token);
       this.publisher.publish(this.session, '', 'HIGH', '30');
       this.publisher.events.on('streamDestroyed', (result) => {
           console.log('publisher stream destroyed');
       });
    }

    initSubscriber() {
       this.session.events.on('streamCreated', () => {
           this.subscriber.subscribe(this.session);
       });
    }
    \n

    Special Articles

    \n\n

    Images

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iPhoneiPad
    \"iPhone\"iPad
    \n

    Notes

    \n
      \n
    • Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead.
      • \n
    • TNS stands for Telerik NativeScript
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bugsnag":{"name":"nativescript-bugsnag","version":"1.0.15","license":"ISC","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-bugsnag
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Usage

    \n
    import { Client } from 'nativescript-bugsnag';
    const bugsnag = new Client();
    bugsnag
        .init('YOUR_API_KEY')
        .then(res => {
            bugsnag.enableConsoleBreadcrumbs();
            bugsnag.handleUncaughtErrors();
            console.log('bugsnag did init', !!res);
        })
        .catch(err => {
            console.log('bugsnag  init failed', err);
        });
    \n

    Reporting NativeScript errors

    \n

    The handleUncaughtErrors method ensures all unhandled NativeScript errors will be caught by Bugsnag in production, using a custom error handler.

    \n

    Reporting handled errors

    \n

    If you would like to send a handled error to Bugsnag, you can pass any Error object to Bugsnag’s notify method:

    \n
    try {
      // potentially crashy code
    } catch (error) {
      bugsnag.notify(error);
    }
    \n

    Reporting promise rejections

    \n

    To report a promise rejection, use notify() as a part of the catch block:

    \n
    new Promise(function(resolve, reject) {
      /* potentially failing code */
    })
    .then(function () { /* if the promise is resolved */ })
    .catch(function (error) {
      bugsnag.notify(error); /* if the promise is rejected */
    });
    \n

    Sending diagnostic data

    \n

    Automatically captured diagnostics

    \n

    Bugsnag will automatically capture and attach the following diagnostic data:

    \n
      \n
    • A full stacktrace
      • \n
    • Battery state
      • \n
    • Device model and OS version
      • \n
    • Thread state for all threads
      • \n
    • Release stage (production, debug, etc)
      • \n
    • App running duration in the foreground and/or background
      • \n
    • A device- and vendor-specific identifier
      • \n
    \n

    Attaching custom diagnostics

    \n

    It can often be helpful to attach application-specific diagnostic data to exception reports. This can be accomplished by adding a report callback to notify. The callback is invoked before the report is sent to Bugsnag:

    \n
    bugsnag.notify(error, function(report) {
      report.metadata = { \"account\": {
        \"company\": \"Acme Co\",
        \"id\": 123
        }
      }
    });
    \n

    Identifying users

    \n

    In order to correlate errors with customer reports, or to see a list of users who experienced each error, it is helpful to capture and display user information. Information set on the Bugsnag client is sent with each error report:

    \n
    bugsnag.setUser('1234', 'Jessica Jones', 'jess@example.com');
    \n

    Logging breadcrumbs

    \n

    In order to understand what happened in your application before each crash, it can be helpful to leave short log statements that we call breadcrumbs. The last several breadcrumbs are attached to a crash to help diagnose what events lead to the error.

    \n

    Automatically captured breadcrumbs

    \n

    By default, Bugsnag captures common events including:

    \n
      \n
    • Low memory warnings
      • \n
    • Device rotation (if applicable)
      • \n
    • Menu presentation
      • \n
    • Screenshot capture (not the screenshot itself)
      • \n
    • Undo and redo
      • \n
    • Table view selection
      • \n
    • Window visibility changes
      • \n
    • Non-fatal errors
      • \n
    • Log messages (off by default, see configuration options)
      • \n
    \n

    Attaching custom breadcrumbs

    \n

    To attach additional breadcrumbs, use the leaveBreadcrumb function:

    \n
    bugsnag.leaveBreadcrumb('load main view', {type: 'navigation'});
    \n

    Session tracking

    \n

    Bugsnag tracks the number of “sessions” that happen within your application. This allows you to compare stability scores between releases and helps you to understand the quality of your releases.

    \n

    Sessions are captured and reported by default. This behaviour can be disabled using the autoCaptureSessions configuration option.

    \n

    Using this option, Bugsnag will report a session each time:

    \n
      \n
    • The app is launched
      • \n
    • The app enters the foreground for the first time in 60 seconds
      • \n
    \n

    If you want control over what is deemed a session, you can switch off automatic session tracking with the autoCaptureSessions option, and manage the session lifecycle using startSession(), stopSession() and resumeSession().

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch":{"name":"nativescript-batch","version":"2.10.3","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-batch/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Batch

    \n

    A NativeScript module for implementing batch operations.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-batch
    \n

    inside your app project to install the module.

    \n

    Example

    \n
    import Batch = require(\"nativescript-batch\");

    export function startBatch() {
        Batch.newBatch(function(ctx) {
                           ctx.log(\"Running 1st operation...\");
                       }).complete(function(ctx) {
                                       ctx.log(\"1st operation completed.\");
                                   })
                         .success(function(ctx) {
                                      ctx.log(\"1st operation succeeded.\");
                                  })
                         .error(function(ctx) {
                                    ctx.log(\"ERROR in operation \" + (ctx.index + 1) + \": \" + ctx.error);
                                })
             .then(function(ctx) {
                       ctx.log(\"Running second operation...\");
                   }).complete(function(ctx) {
                                   ctx.log(\"Second operation completed.\");
                               })
                     .success(function(ctx) {
                                  ctx.log(\"Second operation succeeded.\");
                              })
                     .error(function(ctx) {
                                ctx.log(\"ERROR in operation \" + (ctx.index + 1) + \": \" + ctx.error);
                            })
             .start();
    }
    \n

    Documentation

    \n

    The full documentation can be found on readme.io.

    \n

    Data binding

    \n

    Each batch starts with an empty Observable and an empty ObservableArray that are submitted to each execution context of a callback.

    \n

    These objects can be used in any View like a ListView or a Label, e.g.

    \n

    An example of a code-behind:

    \n
    import Frame = require(\"ui/frame\");
    import {Observable} from \"data/observable\";
    import Batch = require(\"nativescript-batch\");

    export function startBatch(args) {
        var button = args.object;
        
        var label = Frame.topmost().getViewById('my-label');
        var listView = Frame.topmost().getViewById('my-listview');

        var batch = Batch.newBatch(function(ctx) {
                                       // set 'labelText' property of 'bindingContext'
                                       // of 'label'
                                       //
                                       // this is the same object as
                                       // in 'batch.object'
                                       ctx.object.set(\"labelText\", \"Operation #1\");
                                       
                                       // add item for 'bindingContext'
                                       // object of 'listView'
                                       //
                                       // this is the same object as
                                       // in 'batch.items'
                                       ctx.items.push({
                                           text: \"Operation #1 executed\"
                                       });
                                   })
                         .then(function(ctx) {
                                   ctx.object.set(\"labelText\", \"Operation #2\");
                                       
                                   ctx.items.push({
                                       text: \"Operation #2 executed\"
                                   });
                               });
        
        var listViewVM = new Observable();
        listViewVM.set(\"batchItems\", batch.items);
                               
        label.bindingContext = batch.object;
        listView.bindingContext = listViewVM;
        
        batch.start();
    }
    \n

    The declaration of the underlying view:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\">
      <GridLayout rows=\"64,*\">
        <Button row=\"0\" text=\"Start\"
                tap=\"{{ startBatch }}\" />
        
        <StackPanel>
          <Label id=\"my-label\"
                 text=\"{{ labelText }}\" />
        
          <ListView id=\"my-listview\"
                    items=\"{{ batchItems }}\">
                  
            <ListView.itemsTemplate>
              <Label text=\"{{ text }}\" />
            </ListView.itemsTemplate>
          </ListView>
        </StackPanel>
      </GridLayout>
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pull-reveal":{"name":"nativescript-pull-reveal","version":"1.2.0","license":"Apache-2.0","readme":"

    nativescript-pull-reveal

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n
    Android
    \n

    \"demo

    \n
    iOS
    \n

    \"demo|

    \n

    (buggy on iOS)

    \n

    For reasons not fully understood, the iOS version displays odd and inconsistent behaviors.\nThese problems include:

    \n
      \n
    • The drawer placement may begin off screen, making it unreachable
      • \n
    • The drawer contents render incorrectly and/or incompletely.
      • \n
    • This condition changes not only between different device/screen sizes, but also with differing sizes of source content.
      • \n
    \n

    The Pull Reveal component works well across all tested Android layout sizes. The only caveat found here is that\nvery small displays may not be large enough to hold the full drawer content, and thus this bit of content will be\nunreachable on these small devices.

    \n

    Features

    \n
      \n
    • Panel slides over content from bottom, top, left, right, topLeft, topRight, bottomLeft or bottomRight.
      • \n
    • XML and code declarations
      • \n
    • Can be opened and closed programmatically
      • \n
    • Android and iOS (although, as noted, is currently buggy on iOS)
      • \n
    \n

    Installation

    \n

    To get started, install the plugin, per normal methods:

    \n
    tns plugin add nativescript-pull-reveal
    \n

    Usage

    \n

    Although a Pull Reveal drawer can be added via code alone, the\nmore common approach would be to declare it in XML and optionally\ncommunicate with it from the page code, like most other Nativescript\ncomponents.

    \n

    XML

    \n

    There are two components to declare in order to set up a\nPull Reveal component.\nFor the page you wish to include the PullReveal component, you\nmust first import the namespace for the control in the Page declaration,\nlike this:

    \n
    <Page
            navigatingTo=\"onNavigatingTo\"
            xmlns=\"http://schemas.nativescript.org/tns.xsd\"
            xmlns:pr=\"nativescript-pull-reveal\"
    >
    \n

    This set the prefix pr as a reference to the PullReveal plugin module.\nYou can use any legal namespace variable name here, but pr is used\nthroughout these examples.

    \n

    There are two components in the Pull Reveal module you need to\nset up in order to stage a Pull Reveal component to your page.

    \n

    First, you must declare an enclosing containter as a PullRevealContext.\nThis is done by putting the <pr:PullRequestContext> tag at the top of your\npage, and encompassing your page layout.

    \n

    For example, suppose your non-pull-reveal-enhanced page looks like this:

    \n
        <StackLayout> 
            <Image src=\"~/images/happyface.png\"/>
            <Label text=\"Here is some content\"/>
        </StackLayout>
    \n

    then you want to wrap it as follows:

    \n
        <pr:PullRevealContext> 
            <StackLayout> 
                <Image src=\"~/images/happyface.png\"/>
                <Label text=\"Here is some content\"/>
            </StackLayout>
        </pr:PullRevealContext>
    \n

    Finally, we need to create the PullReveal Drawer itself and\npopulate its content:

    \n
        <pr:PullRevealContext> 
            <StackLayout> 
                <Image src=\"~/images/happyface.png\"/>
                <Label text=\"Here is some content\"/>
            </StackLayout>

            <pr:PullRevealDrawer id=\"pullDrawer\" anchor=\"bottom\" backgroundColor=\"black\" color=\"whitesmoke\" >
                <Label text=\"Item 1\"/>
                <Label text=\"Item 2\"/>
                <Label text=\"Item 3\"/>
            </pr:PullRevealDrawer>
        </pr:PullRevealContext>
    \n

    You should be able to put all types of content into the pull reveal drawer,\nand indeed, the PullReveal makes a great vehicle for pull-out settings and configuration needs.

    \n

    The PullReveal accepts the following properties of its own:

    \n
      \n
    • \n

      anchor is one of 'bottom' or 'top' (defaults to 'bottom' if not\ndefined) and determines if the Pull Reveal comes down from the top or up\nfrom the bottom.

      \n
      • \n
    • \n

      exposed defines the amount of drawer that should reveal itself into the context when the drawer is closed.\nThis defines the 'grabble' part of the component. You may wish to style your drawer appearance to present an\nappropriate looking 'handle', but this is of course optional.

      \n
      • \n
    \n

    Beginning with version 1.2.0, there is new property:

    \n
      \n
    • stops is an array of the limit values for drawer travel. There are four elements to this array: The minimum y value\n(that is, the point of travel that stops the drawer when sliding upward), the maximum y value (stop when sliding down),\nthe minimum x value and maximum x value (left- and right-most stop for the Left, Right, or diagnonal anchors).\nThis property may be read or written as the full array only.\nThe intended purpose of the stops property is to allow the adopting application to overcome the sometimes\ninconsistent behavior of the calculated stops based upon the content, with empirically derived results that fit\nthe context of the application it is used in.
      • \n
    \n

    Standard properties for layout containers may also be used.
    \nStyling options may of course also be applied via CSS classes, like other Nativescript components.

    \n

    Code

    \n

    You may prefer to populate the child tree of the Pull Reveal content\nvia code, particularly if your content is highly dynamic.

    \n

    One example of this is to have an empty PullReveal declared in\nthe xml markup:

    \n
        <pr:PullRevealContext> 
            <StackLayout> 
                <Image src=\"~/images/happyface.png\"/>
                <Label text=\"Here is some content\"/>
            </StackLayout>

            <pr:PullRevealDrawer id=\"pullDrawer\"/>
        </pr:PullRevealContext>
    \n

    and in code, get the instance of this by Id, then\nfill it with your content items.

    \n
        import {PullReveal, PullRevealPage} from 'nativescript-pull-reveal';
        const pullDrawer = page.getViewById('pullDrawer');
        const lbl = new Label();
        lbl.text = \"Hello World\";
        pullDrawer.addChild(lbl);
        //... and so on
    \n

    The plugin demo app shows this feature via the "add/remove foobar lines" option. Clicking on this stepper\nadds or removes child elements to the drawer.

    \n

    Programatically opening and closing

    \n

    The open() and close() methods may be called by hendlers\nto control the behavior of the drawer during actions.

    \n

    For example, consider a slide-down control panel scenario. On\nthis panel, there are several actions, implemented as buttons\nwhose 'tap' property points to a handler within the page code.\nAt the close of the handler function's operation, it calls the\nclose() method on the PullReveal to shut the drawer. Something like this:

    \n
    export function handleSetting (args) {
        // assumes pullDrawer was defined previously
        //... handle the action the button represents
        // close the drawer
        pullDrawer.close()
    }
    \n

    The close() function without parameters will close the\ndrawer immediately, with no animation.\nHowever, you can pass an optional parameter containing the\nnumber of milliseconds over which the door should animate closed.\nThus pullDrawer.close(2000) would close the door over a 2 second timespan.

    \n

    There is also an open() method that may be called to programatically\nopen the PullReveal drawer. Like the close() method, it also\nwill accept an optional parameter of milliseconds over which to animate\nthe opening of the drawer.

    \n

    This effect may be nice to use as a notification vehicle for various forms of\ninformation to be presented to a user in certain types of applications.

    \n

    The plugin demo app shows this feature in the "Auto Open and Close" example.

    \n
    \n

    Construction and API

    \n

    PullRevealContext inherits from GridLayout and so has all of the\ncharacteristics of that class. It is used to provide a parallel context in the page\nin which the Pull Reveal drawer can slide over the content.

    \n

    PullRevealDrawer inherits from StackLayout and so has all of the\ncharacteristics of that class. It is used as the parent container for the\ncontent that you add to it.

    \n

    PullRevealDrawer defines the following properties

    \n

    These properties may defined in the XML or read/written as members of the PullRevealDrawer object instance in code.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    exposed''Optional specification of how much of the drawer should be revealed when closed (DIP width/height)
    anchor'bottom'one of: 'top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'. Defines the origin home position of the control.
    stopsarray of 4 values: [ min Y, max Y, min X, max X ] values for each of the translation limits.
    \n

    and the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodParametersDescription
    openanimTime: numberOpens the panel programatically, if optional animTime parameter is passed, it is the number of milliseconds the opening will take.
    closeanimTime: numberCloses the panel programatically, if optional animTime parameter is passed, it is the number of milliseconds the closing will take.
    \n

    CSS

    \n

    The demo app utilizes CSS classes to style the drawer, assigning a background color or graphic and padding values. You can create and apply\nsimilar classes in your own applications to style your drawer as needed.

    \n

    The plugin itself does not provide any CSS values.

    \n

    Known Issues

    \n
    Very first 1.0.0 version was garbage
    \n

    Don't use the 1.0.0 version, as it was, at best, a failed but inspirational prototype. It suffered several\nstructural failings and only worked in a limited set of contexts.

    \n

    Version 1.1.0 is a completely re-written approach.

    \n
    Problems with iOS!
    \n

    Version 1.1.0 still has issues though, with inconsistencies on iOS.
    \nThe gist of these problems are listed above, and on the GitHub issues page.

    \n
    orientation response
    \n

    The current version 1.1.0 does not respond properly to an orientation change.

    \n
    Version 1.0.0
    \n
      \n
    • Found to be very buggy outside of limited demo context
      • \n
    • version 1.0.1 addressed some issues, but ultimately was not a fix.
      • \n
    • Scrapped the approach and started over for 1.1.0
      • \n
    \n
    Version 1.1.0
    \n
      \n
    • Working nicely on Android
      • \n
    • Demo context working acceptably on medium-sized iOS device (iphone 11 simulator used to test)
      • \n
    \n
    Version 1.1.1
    \n
      \n
    • The same as Version 1.1.0, but upversioned to fix a failed NPM publish.
      • \n
    \n
    Version 1.2.0
    \n
      \n
    • Introduces the stops array property as a means for the adopting app to assume control over the drawer position limits,\nrather than using the values computed from the content, which for reasons still not understood are often incorrect\nand/or inconsistent between devices. Note that this simply moves the problem to the domain of the application, which\nmay require the developers to use empirical trial and error techniques to divine the proper values to use for each\ncontext. This is not ideal, and contrary to the original intent of this component, but it at least allows a\nway out of otherwise intractable situations.
      • \n
    \n
    \n

    Source code and Contributing

    \n

    Please contribute, especially if you have an idea of how to improve the shortcomings of this control!

    \n

    The source for this package is maintained on GitHub at:\nhttps://github.com/tremho/nativescript-pull-reveal

    \n

    Structure of the project is based on the templates generated\nwith the Nativescript Plugin Seed project.

    \n

    Comments and contributions welcome!\nPlease submit your Pull Requests, with as much explanation and examples you can provide to\nsupport your changes.

    \n

    Outstanding issues and requests for help are listed here: https://github.com/tremho/nativescript-pull-reveal/issues

    \n

    Or, feel free to email me at steve@ohmert.com to start\na discussion for other suggestions.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"fork-nativescript-slides":{"name":"fork-nativescript-slides","version":"2.4.0","license":"MIT","readme":"

    NativeScript Slides for iOS and Android

    \n

    \"npm\"\n\"npm\"

    \n

    The plugin formally known as nativescript-intro-slides

    \n

    Intro slides example:

    \n

    \"Nativescript

    \n

    Image carousel example:

    \n

    \"Nativescript

    \n

    videos by Brad Martin

    \n

    Example Usage:

    \n

    XML

    \n

    \t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\">
    \t\t\t<Slides:Slide class=\"slide-1\">
    \t\t\t\t<Label text=\"This is Panel 1\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-2\">
    \t\t\t\t<Label text=\"This is Panel 2\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-3\">
    \t\t\t\t<Label text=\"This is Panel 3\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-4\">
    \t\t\t\t<Label text=\"This is Panel 4\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-5\">
    \t\t\t\t<Label text=\"This is Panel 5\"  />
    \t\t\t</Slides:Slide>
    \t</Slides:SlideContainer>
    \n

    CSS

    \n
    .slide-1 {
      background-color: darkslateblue;
    }

    .slide-2 {
      background-color: darkcyan;
    }
    .slide-3 {
      background-color: darkgreen;
    }

    .slide-4 {
      background-color: darkgoldenrod;
    }
    .slide-5 {
      background-color: darkslategray;
    }
    label {
      text-align: center;
      width: 100%;
      font-size: 35;
      margin-top: 35;
    }
    \n

    Great for Intros/Tutorials to Image Carousels.

    \n

    To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

    \n

    when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

    \n

    add as many <Slides:Slide> as you want.

    \n

    Methods for SlideContainer

    \n
      \n
    • nextSlide() - navigate to the next slide (right direction)
      • \n
    • previousSlide() - navigate to the previous slide (left direction)
      • \n
    • goToSlide(index) : - goes to the slide at the specified index
      • \n
    \n

    Attributes for SlideContainer

    \n
      \n
    • \n

      loop : boolean - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

      \n
      • \n
    • \n

      disablePan : boolean - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.

      \n
      • \n
    • \n

      pagerOffset : string - Margin-top for the pager. Number or percentage, default 88%.

      \n
      • \n
    • \n

      pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

      \n
      • \n
    • \n

      **slideWidth: number - set the width of your slides. (Only currently works on android).

      \n
      • \n
    \n

    Indicators

    \n

    If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

    \n
    .slide-indicator-inactive {
      background-color: #fff;
      opacity: 0.4;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }

    .slide-indicator-active {
      background-color: #fff;
      opacity: 0.9;
      width: 10;
      height: 10;
      margin-left: 2.5;
      margin-right: 2.5;
      margin-top: 0;
      border-radius: 5;
    }
    \n

    Events

    \n
      \n
    • start - Start pan
      • \n
    • changed - Transition complete
      • \n
    • cancelled - User didn't complete the transition, or at start\\end with no slides
      • \n
    • finished - Last slide has come into view
      • \n
    \n

    Angular 2 compatibility

    \n

    I've started working on a Angular 2 version they can be checked out here:\nAngular 2 version of slides

    \n

    If you want to use this plugin with Angular 2 the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

    \n

    Plugin Development Work Flow:

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

    Known issues

    \n
      \n
    • There appears to be a bug with the loop resulting in bad transitions going right to left.
      • \n
    • Currently in Android there is an known issue when a slide component inside of a scroll view.
      • \n
    \n

    How To: Load slides dynamically

    \n

    You want to hook into the loaded event of the view and then create your view elements.

    \n

    Demo Code

    \n
    <Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
    \n
    import * as slides from 'nativescript-slides/nativescript-slides';

    export function onSlideContainerLoaded(args) {
      let slideContainer = <slides.SlideContainer>args.object;

      //Construct the slides
      slideContainer.addChild(getSlide('Page 1', 'slide-1'));
      slideContainer.addChild(getSlide('Page 2', 'slide-2'));
      slideContainer.addChild(getSlide('Page 3', 'slide-3'));
      slideContainer.addChild(getSlide('Page 4', 'slide-4'));
      slideContainer.addChild(getSlide('Page 5', 'slide-5'));
    }

    function getSlide(labelText: string, className: string) {
      let slide = new slides.Slide();
      slide.className = className;
      let label = new labelModule.Label();
      label.text = labelText;
      slide.addChild(label);

      return slide;
    }
    \n

    Thanks to these awesome contributors!

    \n

    Brad Martin

    \n

    Obsessive Inc/Abhijith Reddy

    \n

    Victor Nascimento

    \n

    Steve McNiven-Scott

    \n

    Leo Caseiro

    \n

    Todd Anglin

    \n

    Andrew Lo

    \n

    Raúl Uranga

    \n

    And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

    \n

    Contributing guidelines

    \n

    Contributing guidelines

    \n

    License

    \n

    MIT

    \n

    for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynamic-label":{"name":"nativescript-dynamic-label","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-dynamic-label

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    Features

    \n
      \n
    • Text Measurement
      • \n
    • Text Fitting
      • \n
    • Label control that dynamically sizes text to fit
      • \n
    • Android and iOS
      • \n
    \n

    Installation

    \n

    To get started, install the plugin, per normal methods:

    \n
    tns plugin add nativescript-dynamic-label
    \n

    Usage

    \n

    Generally, DynamicLabel can be used in either\nXML markup or in code much the same way as a normal Label\ncontrol.

    \n

    Use via XML markup

    \n

    Use pretty much the same as a regular Label.

    \n
    Import the plugin into the namespace
    \n

    In your page declaration, include a reference to the\nDynamicLabel module, like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\"
          xmlns:dl=\"nativescript-dynamic-label\"
          class=\"page\"
    \n

    the xmlns:dl="nativescript-dynamic-label" is the part you want\nto add, and it sets the namespace dl as relating to the DynamicLabel module.

    \n

    Then, invoke a DynamicLabel within your markup like so..

    \n
    <StackLayout> <!-- or whatever layout container you are using... -->
        <dl:DynamicLabel text=\"Hello, World!\"></dl:DynamicLabel>
    </StackLayout>
    \n

    You can use all the properties of <Label> for the dynamic label\nalso. The most relevant of these being width and textWrap.\nNote that these properties can also be set via CSS.

    \n

    Use via code

    \n

    You may create and use a DynamicLabel in the same ways as\na normal Label.
    \nYou may create one with new DynamicLabel() or\nretrieve an existing one from the page with\npage.getViewById('your-D-Label-ID)\nfrom there, set or get the properties you would of a normal\nlabel, e.g. dlabel.text = 'Hello, World'.\nDo not set a font size to the dynamic label for display, as it\nwill find its own. The text fitting is triggered on any\nnew text change.

    \n

    Like the normal NativeScript <Label> and other Nativescript controls,\ntext may be set via the Observable class and changes made to\nthe bound Observable property.

    \n
    Using to measure text
    \n

    To use this class to measure text, but not necessarily display it,\nyou can call the getTextExtent method of the class.\nTo use this, first set a font size to the control, and then\npass the maximum width and height you are attempting to\nfit text for to getTextExtent, and it will return the bounds of the\ntext, as well as an indication of whether or not the text will\nfit in this space without being truncated, and also the text\nper-line as determined by the internal layout algorithm.

    \n

    Note that the line layout may not necessarily match what will be displayed\nby the actual control, since each platform handles its word wrapping\nand fitting in subtle but often significantly different ways.
    \nHowever, it should be reasonably representative of what likely\nwould display if set to the control at this font size (assuming\ntext wrap is enabled). This information may be more useful for any\ndo-it-yourself layout tasks than for actual representation of what the\ncontrol renders.

    \n

    let computedWidth, computedHeight;
    let maxWidth = 100; // constrain to this width
    let maxHeight = 1000; // let it find the height < this
    let myDLabel = page.getViewById('myDLabel');
    myDLabel.fontSize = 20; // let's compute for this font size
    let bounds = myDLabel.getTextExtent(myText, maxWidth, maxHeight);
    if(bounds.wasCut) {
        console.error(\"Text doesn't fit in these bounds at this size!\")
    } else {
        computedWidth = bounds.width;
        computedHeight = bounds.height;
    }
    // computed width,height can now inform how big to make
    // a display that can hold this text at this size.

    // Additional information we get from this about the 
    // text per lines (according to internal layout) can be
    // retrieved like this:
    for (let i = 0; i< bounds.lines.length; i++) {
        let t = bounds.lines[i].text;
        // let y = bounds.lines[i].top; // if we wanted to draw it
        console.log(t)
    }
    \n

    API

    \n

    DynamicLabel inherits from Label and so has all of the\ncharacteristics of that class.

    \n

    Properties specifically important to DynamicLabel are listed here.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    textWrapinherits from Labelturn this on to wrap text. Changes the choices made by the text measurer / formatter.
    widthinherits from Labelmust be set (direct or CSS) for sizing to be effective
    \n
    public getTextExtent(
    \n
           text : string, \n       textSize: number, \n       maxWidth : number, \n       maxHeight: number) : FitResults`\n
    \n

    Use to measure text as it will appear in the current typeface\nin the given font size (textSize) constrained to the bounds\n(maxWidth, maxHeight). The returned FitResults\nobject looks like this:

    \n
    {  
       width: number,  // width of text extent bounds
       height: number, // height of text extent bounds
       lines: LineInfo[], // array of line info, see below
       wasCut: boolean // true if text was truncated at this size
     }
    \n

    each entry in the lines property above will be an object\nin this format (LineInfo):

    \n
     {  
      text: string, // text that appears on this line
      top: number // y offset to start drawing text
      }
    \n
    public fitText() : void
    \n

    may be called explicitly to force a recompute/redisplay of text.\nNormally not needed, as this is called after any text or layout changes to the DynamicLabel control.

    \n

    Tips and Caveats

    \n
    Multiline displays
    \n

    If the property textWrap is false (the default), a font size\nwill be picked that allows all of the text to appear in one\nline according to the width of the control, regardless of the\ncontrol height.\nIf textWrap is true, the control is enabled for wrapping. This\nis done according to the algorithms of the underlying platform\nas has been implemented for Label.
    \nTo assist its predictions, DynamicLabel computes the word breaks\nand line spans itself and uses these for measurement.

    \n

    A paradox of the multiline scenario is that the fitter is working to find\nmeasurements that fit first in width, and selecting a smaller font if\nthis is not acheived, but with multiline text, the new font size may change\nthe layout and collapse to fewer lines -- which creates a wider width\nrather than a smaller one, and so the tendency is to result in\na smaller font choice than one might be able to manually choose.

    \n

    You can avoid this if you have text that you already know is\nmultiline, and placing hard breaks (\\n) in the string to force\na specific layout. You still must set 'textWrap=true' to allow this to\ndisplay multiple lines, but it should honor your layout and find a size that\nis reasonable for your control size.

    \n

    Known Issues

    \n
    Still early in development!
    \n

    As of 2/14/2020 this is the first version released for testing.

    \n

    As issues arise, they will be recorded in this space.

    \n

    Contributing

    \n

    Comments and contributions welcome!\nPlease submit your Pull Requests, with as much explanation and examples you can provide to\nsupport your changes.

    \n

    Feel free to email me at steve@ohmert.com to start\na discussion for other suggestions.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-multiple-screen-css":{"name":"nativescript-multiple-screen-css","version":"1.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    nativescript-multiple-screen-css

    \n

    A NativeScript plugin to deal with multiple screen sizes and device orientation

    \n\n
    Icon made by Butterflytronics from www.flaticon.com is licensed by CC 3.0 BY
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-multiple-screen-css
    \n

    What does it do?

    \n

    It automatically adds the classes to the current Page's cssClass variable:

    \n
    'android' or 'ios' or 'windows'\n'portrait' or 'landscape'\n'wXXX' where XXX is the matched size from the sizeGroupW\n'hXXX' where XXX is the matched size from the sizeGroupH\n'swXXX' where XXX is the matched size from the sizeGroupSW\n
    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    require( 'nativescript-multiple-screen-css' );
    \n

    Notice: You do NOT need to keep a reference to it; and you only need to load it once. You can add it to your app.js file and forget about it.

    \n

    It will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.

    \n

    How does this help?

    \n

    Plain Awesome NativeScript (PAN)

    \n
    StackLayout {
      background-color: red;
    }

    .android StackLayout {
      background-color: green;
    }
    \n

    NativeScript Angular (NAN)

    \n
    StackLayout {
      background-color: red;
    }

    .android :host StackLayout {
      background-color: green;
    }
    \n

    So on ios and windows the background would be red, on a android the color is green.\nPlease note, in Angular you MUST prefix the rule with /deep/ or preferably :host for it to work correctly!

    \n

    Why use this?

    \n

    You can set all the normal CSS values this way include width, height, font-size. This allows you to differentiate your UI based on current screen width or height or smallest width (sw).

    \n

    Size groups

    \n

    The plugin will create .wXXX and .hXXX where XXX is the DPI of the screen. The plugin comes with default size groups [1280, 1024, 800, 600, 540, 480, 400, 360, 320], and you can configure your own size groups for both .wXXX, .hXXX and .swXXX by calling:

    \n
    var multipleScreenCss require( 'nativescript-multiple-screen-css' );
    multipleScreenCss.sizeGroupingsW([size1,size2,size3,...]);// For .wXXX classes
    multipleScreenCss.sizeGroupingsH([size1,size2,size3,...]);// For .hXXX classes
    multipleScreenCss.sizeGroupingsSW([size1,size2,size3,...]);// For .swXXX classes
    \n

    The way size group css classes is determined is that if the screen height is 960dpi and width 600dpi, it would then get the class .h800 because it is bigger than 800 and smaller than 1024, and class .w600 because it is exactly 600, and class .sw600 because that is the smallest possible width no matter the rotation.

    \n

    So it sets five separate css classes on startup of each page; you can use any (or all) of them to use as css rules.

    \n
      \n
    • .android | .ios | .windows
      • \n
    • .wXXX
      • \n
    • .hXXX
      • \n
    • .swXXX
      • \n
    • .portrait | .landscape
      • \n
    \n

    Please note these are calculated each page load.

    \n

    Demo

    \n

    The demo will show you the css class names it generated.

    \n

    License

    \n

    This software is available under the MIT license.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carousel-view":{"name":"nativescript-carousel-view","version":"2.9.0","license":"MIT","readme":"

    CarouselView plugin for nativescript

    \n

    Setup

    \n

    tns plugin add nativescript-carousel-view

    \n

    Platform Support

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSupportedVersionNativeView
    iOSYesiOS 8.1+UIPageViewController
    AndroidYesAPI 15+ViewPager
    \n

    Usage

    \n

    First add the xmlns namespace:

    \n
    xmlns:controls=\"nativescript-carousel-view\"
    \n

    Then add the control:

    \n
    <controls:CarouselView
        id=\"carouselView\"
        position=\"0\"
        orientation=\"horizontal\"
        interPageSpacing=\"5\"
        itemsSource=\"{{ itemsSource }}\"
        templateSelector=\"{{ templateSelector }}\"/>
    \n

    Bindable Properties

    \n

    orientation: horizontal, vertical (default horizontal).

    \n

    itemsSource: collection of objects used as bindingContext for each page.

    \n

    position: selected page when carousel starts (default 0).

    \n

    interPageSpacing: margin/space between pages (default 0).

    \n

    interPageSpacingColor: color for the margin/space between pages (default #FFFFFF).

    \n

    showIndicators: show page indicators (default true).

    \n

    IndicatorsShape: Circle or Square indicators shape (default Circle).

    \n

    indicatorsTintColor: color for the unselected dots (default #c0c0c0).

    \n

    indicatorsCurrentPageColor: color for the selected dot (default #808080).

    \n

    templateSelector: a class implementing the provided ITemplateSelector interface.

    \n

    animateTransition: enables transition animation when swiping programmatically (default true).

    \n

    Template selector should return a valid {N} view. As advice, put each view in separate files and load them with builder. Also, notice that you have to assign the bindingContext of the returning view.

    \n

    TYPESCRIPT

    \n
    import { ITemplateSelector } from \"nativescript-carousel-view\";
    import builder = require(\"ui/builder\");
    var frame = require('ui/frame');

    export class MyTemplateSelector implements ITemplateSelector {
        
        OnSelectTemplate(position: number, bindingContext: any) {

            var page = frame.topmost().currentPage;

            var view = builder.load({
                path: \"~/Views/Slides\",
                name: \"slider-view\",
                page: page
            });

            // required
            view.bindingContext = bindingContext;

            return view;
        }
    }
    \n

    ViewModel

    \n
    import observable = require(\"data/observable\");
    import observableArrayModule = require(\"data/observable-array\");
    import { MyTemplateSelector } from \"../Views/Slides/template-selector\";

    export class MainViewModel extends observable.Observable {

        public templateSelector: MyTemplateSelector;
        public itemsSource: observableArrayModule.ObservableArray<Person>;

        constructor() {
            super();

            // Initialize default values.

            this.templateSelector = new MyTemplateSelector();

            var person = new Person();
            person.first = \"Alexander\";
            person.last = \"Reyes\";

            var items = [ person, person, person, person, person ];
            this.itemsSource = new observableArrayModule.ObservableArray<Person>(items);
        }
    }
    \n

    JAVASCRIPT

    \n
    \"use strict\";
    var builder = require(\"ui/builder\");
    var frame = require('ui/frame');

    var MyTemplateSelector = (function () {
        function MyTemplateSelector() {
        }
        MyTemplateSelector.prototype.OnSelectTemplate = function (position, bindingContext) {

            var page = frame.topmost().currentPage;

            var view = builder.load({
                path: \"~/Views/Slides\",
                name: \"slider-view\",
                page: page
            });

            view.bindingContext = bindingContext;

            return view;
        };
        return MyTemplateSelector;
    }());

    exports.MyTemplateSelector = MyTemplateSelector;
    \n

    ViewModel

    \n
    \"use strict\";
    var observable = require(\"data/observable\");
    var observableArrayModule = require(\"data/observable-array\");
    var template_selector = require(\"../Views/Slides/template-selector\");

    var MainViewModel = (function (_super) {
        __extends(MainViewModel, _super);
        function MainViewModel() {
            var _this = _super.call(this) || this;
            _this.templateSelector = new template_selector.MyTemplateSelector();
            _this.itemsSource = new observableArrayModule.ObservableArray(items);
            return _this;
        }
        return MainViewModel;
    }(observable.Observable));

    exports.MainViewModel = MainViewModel;
    \n

    Event Handlers

    \n

    positionSelected: triggers when the selected page changes.

    \n
    var carouselView = <CarouselView>page.getViewById(\"carouselView\");

    carouselView.on(\"positionSelected\", function(eventData){
        console.log(eventData.eventName + \" has been raised! by: \" + eventData.object);
    });
    \n

    Methods

    \n

    insertPage (position, bindingContext): insert a page at a given position.

    \n
    await carouselView.insertPage(5, person);
    carouselView.setCurrentPage(5);
    \n

    removePage (position): remove a page at given position (this will also remove the corresponding item from itemsSource).

    \n
    await carouselView.removePage(5);
    \n

    setCurrentPage (position): slide programmatically to a given position.

    \n

    Requirements for TypeScript developers

    \n
      \n
    • TypeScript >= 2.1.1 (npm install -g typescript@2.1.1)
      • \n
    \n

    Please follow this tutorial to add TypeScript >= 2.1.1 and async/await support to your project:

    \n

    https://www.nativescript.org/blog/use-async-await-with-typescript-in-nativescript-today

    \n

    Roadmap

    \n
      \n
    • Remove setCurrentPage, implement as position propertyChangedEvent (requires lot of refactoring)
      • \n
    • Indicators tap event
      • \n
    • PullToLoadMore event
      • \n
    \n

    Collaborators

    \n\n

    Release Notes

    \n

    2.9.0

    \n

    [New feature] animateTransition, enables transition animation when swiping programmatically (default true).

    \n

    2.8.0

    \n

    [Update] itemsSource now supports empty observable array.

    \n

    2.7.1

    \n

    [New feature] Circle or Square indicatorsShape property (default Circle).

    \n

    2.6.1

    \n

    [Update] orientation property is now expressed as string (horizontal, vertical), Orientation enum from "ui/enums" is supported.

    \n

    [New feature] interPageSpacingColor property to change the color of the margin/space between pages (default #FFFFFF).

    \n

    [New feature] indicatorsTintColor property to change the color of unselected dots (default #c0c0c0).

    \n

    [New feature] indicatorsCurrentPageColor property to change the color of selected dot (default #808080).

    \n

    2.6.0

    \n

    [Udpate] Matching version number with Xamarin.Forms CarouselView

    \n

    2.2.0

    \n

    [iOS] Small fix to avoid UIPageViewController.View go outside its container bounds

    \n

    [Update] showIndicators property now does what it supposed to do, hide/show indicators :)

    \n

    [Update] itemsSourceChanged method removed, implemented as a propertyChangedEvent

    \n

    2.1.0

    \n

    [Enhancement] Adding page indicators

    \n

    2.0.6

    \n

    [Bug] CSS not applying to slides #6 (fixed)

    \n

    [Enhancement] Removing left and right overscroll in Android vertical carousel

    \n

    2.0.5

    \n

    [Bug] Adding another touch gesture to slider-view does not work (fixed)

    \n

    2.0.4

    \n

    Updated README.

    \n

    2.0.3

    \n

    [Bug] fixing interPageSpacing in Android.

    \n

    2.0.2

    \n

    [Bug] onLoaded() not being called on carousel pages (Fixed).

    \n

    License

    \n

    MIT.

    \n

    Ported from CarouselView for Xamarin.Forms: https://github.com/alexrainman/CarouselView

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-videorecord":{"name":"nativescript-danem-videorecord","version":"1.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript VideoRecorder

    \n

    This is derived from nativescript-videorecorder with ONLY a change to work with AndroidX.\nOnce nativescript-videorecorder plugin is updated, this will be deprecated.

    \n

    Install

    \n

    tns plugin add nativescript-videorecorder-x

    \n

    QuickStart

    \n

    JavaScript

    \n
    var vr = require('nativescript-videorecorder-x');

    var options = {
        saveToGallery: true,
        duration: 30,
        format: 'mp4',
        size: 10,
        hd: true,
        explanation: 'Why do i need this permission'
    }

    var videorecorder = new vr.VideoRecorder(options);

    videorecorder.record().then((data)=>{
      console.log(data.file)
    }).catch((err)=>{
      console.log(err)
    })
    \n

    TypeScript

    \n
    import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder-x';

    const options: VideoRecorderOptions = {
        hd: true
        saveToGallery: true
    }
    const videorecorder = new VideoRecorder(options)

    videorecorder.record().then((data) => {
        console.log(data.file)
    }).catch((err) => {
        console.log(err)
    })
    \n

    VideoRecorder

    \n

    Options

    \n

    Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

    \n
      \n
    • hd?: boolean - If true, highest quality of device, if false MMS quality (default: false)
      • \n
    • saveToGallery?: boolean - Enable to save the video in the device Gallery, otherwise it will be store within the sandbox of the app (default: false)
      • \n
    • duration?: number - Limit the duration of the video, 0 for unlimited (default: 0)
      • \n
    • position?: 'front' | 'back' | 'none' - Force which device camera should be used, 'none' for no preferences (default: none)
      • \n
    \n

    Additionnal parameters for Android:

    \n
      \n
    • size?: number - Limit the size of the video, 0 for unlimited (default: 0)
      • \n
    • explanation?: string - Why permissions should be accepted, optional on api > 23
      • \n
    \n

    Additionnal parameters for iOS:

    \n
      \n
    • format?: 'default' | 'mp4' - allows videos to be played on android devices (default: 'default') recommended for cross platform apps
      • \n
    \n

    VideoRecorder attributes:

    \n
      \n
    • options: Options Option object (see above section), can be set from the constructor
      • \n
    \n

    VideoRecorder methods:

    \n
      \n
    • record(options?: Options): Promise<{ file?: string } > Return a Promise with an object containing the filepath as file key. It may not be there if the video has been saved to the gallery. An optional options parameter can be given to override instance options, this is deprecated.
      • \n
    • requestPermissions(): Promise Return a Promise, resolved if permissions are OK (ask for permissions if not), rejected if user didn't have accepted the permissions. This method is implicitely called by record()
      • \n
    • isAvailable(): boolean Check if device has a camera and is compatible with what has been set in options
      • \n
    \n

    Promises above can be rejected with:

    \n
      \n
    • { event: 'denied'} - Permissions have not been accepted
      • \n
    • { event: 'cancelled'} - Video capture have been canceled
      • \n
    • { event: 'failed'} - Generic error
      • \n
    \n

    AdvancedVideoView

    \n

    AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:recorder=\"nativescript-videorecorder-x/advanced\">
    <recorder:AdvancedVideoView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
    \n
    const advancedView = page.getViewById(\"camera\");
    advancedView.startRecording();
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    start()voidStarts the camera preview
    stop()voidStop the camera preview
    startRecording()voidStart recording camera preview.
    stopRecording()voidStop recording camera preview.
    toggleCamera()voidToggles between front or the back camera.
    toggleTorch()voidToggles the torch (iOS only for now)
    durationintGet the current recording video duration.
    cameraPositionBACKvoidGets or Sets camera position
    outputOrientationPORTRAITvoidGets or Sets output video orientation
    isTorchAvailablebooleanReadOnly: is the torch supported for this camera
    torchfalsebooleanEnable/Disable torch (iOS only for now)
    qualityMAX_480PvoidGets or sets Video Quality
    \n

    outputOrientation

    \n

    Be careful to not change orientation while recording, it's not supported.

    \n

    Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

    \n

    This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera.\nWith this, you can properly change orientation even when device orientation is locked.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper-updated":{"name":"nativescript-imagecropper-updated","version":"12.0.0","license":"MIT","readme":"\n

    A {N} Image Cropping Plugin

    \n

    \"License\"\n\"npm\" \"npm\" \"GitHub

    \n

    Notes

    \n

    iOS 8+

    \n

    Android 17+

    \n

    v2.0.0+ the version of Android Lib has changed and the cropper looks different now,\nhence the breaking change

    \n

    Based on

    \n

    TOCropViewController for iOS

    \n

    uCrop for Android

    \n

    Installation

    \n

    Run tns plugin add nativescript-imagecropper

    \n

    Screenshots

    \n

    Cropper UI & End result (android)

    \n

          

    \n

    Cropper UI (iOS)

    \n \n

    Usage (for TS demo, please see the demo folder)

    \n

    To use the image cropping module you must first require it.

    \n
    var ImageCropper = require(\"nativescript-imagecropper\").ImageCropper;
    \n

    How to get the image source, from nativescript-camera plugin

    \n
    var camera = require(\"nativescript-camera\");

    // You might want to request camera permissions first
    // check demo folder for sample implementation

    camera.takePicture({width:300,height:300,keepAspectRatio:true})
      .then((imageAsset) => {
          let source = new imageSource.ImageSource();
          source.fromAsset(imageAsset).then((source) => {
            // now you have the image source    
            // pass it to the cropper                
          });
      }).catch((err) => {
          console.log(\"Error -> \" + err.message);
      });
    \n

    Methods

    \n

    show(ImageSource): Returns a cropped ImageSource

    \n
    var imageCropper = new ImageCropper();
    imageCropper.show(imageSource).then((args) => {
      console.dir(args);
      if(args.image !== null){
        imageView.imageSource = args.image;
      }
    })
    .catch(function(e){
      console.dir(e);
    });
    \n

    show(ImageSource,Options): Returns a cropped and resized ImageSource

    \n
    var imageCropper = new ImageCropper();
    imageCropper.show(imageSource,{width:300,height:300}).then((args) => {
      console.dir(args);
      if(args.image !== null){
        imageView.imageSource = args.image;
      }
    })
    .catch(function(e){
      console.dir(e);
    });
    \n

    Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionTypeDescription
    widthnumberThe width of the image you would like returned.
    heightnumberThe height of the image you would like returned.
    lockSquarebooleanPass this as true, to lock square aspect ratio on iOS, on android, this option doesn't make any difference.
    \n

    Additional notes for Android

    \n

    You can override library colors just specifying colors with the same names in your colors.xml file.\nFor example:

    \n
    <color name=\"ucrop_color_toolbar\">#000000</color>
    \n

    This will make toolbar color black if specified inside your App_Resources/Android/values/colors.xml file.

    \n

    Android styles to customize the cropper activity/styles

    \n
       <!--uCrop Activity-->
        <color name=\"ucrop_color_toolbar\">#FF6E40</color>
        <color name=\"ucrop_color_statusbar\">#CC5833</color>
        <color name=\"ucrop_color_toolbar_widget\">#fff</color>
        <color name=\"ucrop_color_widget\">#000</color>
        <color name=\"ucrop_color_widget_active\">#FF6E40</color>
        <color name=\"ucrop_color_widget_background\">#fff</color>
        <color name=\"ucrop_color_widget_text\">#000</color>
        <color name=\"ucrop_color_progress_wheel_line\">#808080</color>
        <color name=\"ucrop_color_crop_background\">#000</color>

        <!--Crop View-->
        <color name=\"ucrop_color_default_crop_grid\">#80ffffff</color>
        <color name=\"ucrop_color_default_crop_frame\">#ffffff</color>
        <color name=\"ucrop_color_default_dimmed\">#8c000000</color>
        <color name=\"ucrop_color_default_logo\">#4f212121</color>
    \n

    Returned Result Arguments

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ArgumentTypeResult(s)
    responsestringSuccess
    Cancelled
    Error
    imageImageSourcenull if there was an error or was cancelled
    ImageSource on success
    \n

    Bonus: Snippet for using with nativescript-imagepicker 6.x

    \n
    const context = imagepickerModule.create({
        mode: 'single' // allow choosing single image
    });
    context
        .authorize()
        .then(function() {
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                selected.getImageAsync(source => {
                    const selectedImgSource = imageSource.fromNativeSource(source);
                    imageCropper
                        .show(selectedImgSource, { width: 300, height: 300 })
                        .then(args => {
                            if (args.image !== null) {
                                   // Use args.image
                            }
                        })
                        .catch(function(e) {
                            console.log(e);
                        });
                });
            });
        })
        .catch(function(e) {
            console.log(e);
        });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@happones/nativescript-image-zoom":{"name":"@happones/nativescript-image-zoom","version":"4.0.2","license":"Apache-2.0","readme":"

    NativeScript Image Zoom

    \n

    \"npm\"\n\"npm\"

    \n

    Installation

    \n

    NativeScript 7+:

    \n
    tns plugin add @happones/nativescript-image-zoom
    \n

    NativeScript > 7:

    \n
    tns plugin add nativescript-image-zoom
    \n

    Configuration

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-image-zoom" on the\nPage element

    \n
    <ui:ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"/>
    \n

    Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
    \n
    <ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
    \n

    Vue

    \n
    import ImageZoomPlugin from '@happones/nativescript-image-zoom/vue';

    Vue.use(ImageZoomPlugin);
    \n
    <ImageZoom src=\"~/images/148080.jpg\" maxZoom=\"5\" minZoom=\"2\"></ImageZoom>
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    maxZoom5number
    • - [ ]
    minZoom1number
    • - [ ]
    zoomScale1number
    • - [ ]
    		IOS only
    srcstring
    • - [x]
    \n

    ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toasty-ns-7":{"name":"nativescript-toasty-ns-7","version":"14.0.0","license":"MIT","readme":"

    NativeScript-Toasty

    \n

    \"Build\n\"npm\"\n\"npm\"

    \n

    Install

    \n

    NativeScript 7.0+

    \n

    tns plugin add nativescript-toasty

    \n

    NativeScript < 7.0

    \n

    tns plugin add nativescript-toasty@3.0.0-alpha.2

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from 'nativescript-toasty';
    import { isIOS } from '@nativescript/core/platform';
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty({ text: 'Toast message' });
    toast.show();

    // you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
    new Toasty({ text: 'Some Message' })
      .setToastDuration(ToastDuration.LONG)
      .setToastPosition(ToastPosition.BOTTOM)
      .setTextColor(new Color('white'))
      .setBackgroundColor('#ff9999')
      .show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      position: ToastPosition.TOP,
      yAxisOffset: 100,
      xAxisOffset: 10,
      ios: {
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24,
      },
      anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
    });

    toasty.duration = ToastDuration.SHORT;
    toasty.textColor = '#fff';
    toasty.backgroundColor = new Color('purple');
    toasty.show();
    \n

    JavaScript

    \n
    var toasty = require('nativescript-toasty').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n

      constructor(opts: ToastyOptions);

      position: ToastPosition;

      duration: ToastDuration;

      textColor: Color | string;

      backgroundColor: Color | string;

      yAxisOffset?: Length | number;

      xAxisOffset?: Length | number;

      readonly width: number;

      readonly height: number;


      /**
       * Show the Toasty
       */
      show();

      /**
       * Cancels the Toasty
       */
      cancel();

    /**
     * Sets the Toast position.
     */
      setToastPosition(value: ToastPosition): Toasty;

    /**
     * Sets the Toast duration.
     */
      setToastDuration(value: ToastDuration): Toasty;

    /**
      * Set the text color of the toast.
      * @param value [Color | string] - Color of the string message.
      */
      setTextColor(value: Color | string): Toasty;

    /**
      * Set the background color of the toast.
      * @param value [Color |  string] - Color of the background.
      * On Android this currently removes the default Toast rounded borders.
      */
      setBackgroundColor(value: Color | string): Toasty;
    \n
    export enum ToastDuration {
      'SHORT',
      'LONG',
    }

    export enum ToastPosition {
      'BOTTOM',
      'BOTTOM_LEFT',
      'BOTTOM_RIGHT',
      'CENTER',
      'CENTER_LEFT',
      'CENTER_RIGHT',
      'TOP',
      'TOP_LEFT',
      'TOP_RIGHT',
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Position of the Toast.
       */
      position?: ToastPosition;

      /**
       * Text color of the Toast message.
       */
      textColor?: Color | string;

      /**
       * Background Color of the Toast.
       */
      backgroundColor?: Color | string;

      /**
       * Android specific configuration options.
       */
      android?: any;

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-filters-ios":{"name":"nativescript-image-filters-ios","version":"1.1.4","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"Build\n\"GitHub\n\"PayPal

    \n

    NativeScript-Image-Filters

    \n

    Nativescript plugin for native image filters.

    \n

    Sample

    \n

    \"Demo\"

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    tns plugin add nativescript-image-filters

    \n

    Usage

    \n

    JS:

    \n
    import { topmost } from 'ui/frame';
    import { ImageFilters } from 'nativescript-image-filters';

    const filters = new ImageFilters();

    public effectOne() {
      const pic = topmost().currentPage.getViewById('myPicture');

          filters.invert(pic).then((result) => {

          // set the pic imageSource equal to the new imageSource
          pic.imageSource = result;

        }).catch((err) => {
          console.log('applyFilter ERROR: ' + err);
        });
    }
    \n

    IMPORTANT NOTE

    \n

    Not all methods have been tested. The code needs to be cleaned up to reduce duplication in methods. The methods also need to be 1:1 for common methods. Right now not all iOS & Android methods are named correctly for the image filter. Pull requests are very welcome to improve the API for this plugin.

    \n

    API

    \n
      \n
    • highlightImage(img: Image, color: string, radius?: number): Promise<ImageSource>
      • \n
    • invert(img: Image): Promise<ImageSource>
      • \n
    • blackAndWhite(img: Image): Promise<ImageSource>
      • \n
    • gamma(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • colorFilter(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • sepiaEffect(img: Image, depth: number, red: number, green: number, blue: number): Promise<ImageSource>
      • \n
    • decreaseColorDepth(img: Image, bitOffset: number): Promise<ImageSource>
      • \n
    • contrast(img: Image, value: number): Promise<ImageSource>
      • \n
    • rotate(img: Image, degree: number): Promise<ImageSource>
      • \n
    • brightness(img: Image, value: number): Promise<ImageSource>
      • \n
    • gaussianBlur(img: Image): Promise<ImageSource>
      • \n
    • createShadow(img: Image): Promise<ImageSource>
      • \n
    • sharpen(img: Image, weight: number): Promise<ImageSource>
      • \n
    • meanRemoval(img: Image): Promise<ImageSource>
      • \n
    • smooth(img: Image, value: number): Promise<ImageSource>
      • \n
    • emboss(img: Image): Promise<ImageSource>
      • \n
    • engrave(img: Image): Promise<ImageSource>
      • \n
    • boost(img: Image, type: number, percent: number): Promise<ImageSource>
      • \n
    • roundCorner(img: Image, round: number): Promise<ImageSource>
      • \n
    • waterMark(img: Image, watermark: string, location: android.graphic.Point, color: string, alpha: number, size: number, underline: boolean): Promise<ImageSource>
      • \n
    • flip(img: Image, type: number): Promise<ImageSource>
      • \n
    • tintImage(img: Image, degree: number): Promise<ImageSource>
      • \n
    • fleaEffect(img: Image): Promise<ImageSource>
      • \n
    • blackFilter(img: Image): Promise<ImageSource>
      • \n
    • snowEffect(img: Image): Promise<ImageSource>
      • \n
    • shadingFilter(img: Image, shadingColor: number): Promise<ImageSource>
      • \n
    • saturationFilter(img: Image, level: number): Promise<ImageSource>
      • \n
    • hueFilter(img: Image, level: number): Promise<ImageSource>
      • \n
    • reflection(img: Image): Promise<ImageSource>
      • \n
    • replaceColor(img: Image, fromColor: string, toColor: string): Promise<ImageSource>
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pager-without-page-indicators":{"name":"nativescript-pager-without-page-indicators","version":"111.0.10","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Pager

    \n

    Install

    \n

    NativeScript 6x

    \n
      \n
    • tns plugin add nativescript-pager
      • \n
    \n

    NativeScript 5x

    \n
      \n
    • tns plugin add nativescript-pager@9.x
      • \n
    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-pager@8.0.2
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-pager@7.2.3
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-pager@2.3.0
      • \n
    \n

    Usage

    \n

    Note v11+

    \n
    Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
    \n

    IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

    \n
    <pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <pager:Pager.itemTemplate>
                    <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                        <Label text=\"{{title}}\"/>
                        <Image row=\"1\" src=\"{{image}}\"/>
                    </GridLayout>
                </pager:Pager.itemTemplate>
    </pager:Pager>
    \n

    Multi Template

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
          <Pager.itemTemplates>
            <template key=\"even\">
              <GridLayout rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
            <template key=\"odd\">
              <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <StackLayout row=\"2\">
                  <Label text=\"{{image}}\"/>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
          </Pager.itemTemplates>
          <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
        </c:Pager>
    \n

    Static Views

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                     showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <c:PagerItem backgroundColor=\"red\">
                    <Label text=\"First\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"white\">
                    <Label text=\"Second\" ></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"black\">
                    <Label text=\"Third\" color=\"white\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"green\">
                    <Label text=\"Fourth\"></Label>
                </c:PagerItem>
            </c:Pager>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import Pager from 'nativescript-pager/vue';

    Vue.use(Pager);
    \n
    <template>
        <Pager for=\"item in items\">
            <v-template>
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Label :text=\"item.title\" />
                    <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
                </GridLayout>
            </v-template>
            <v-template if=\"$odd\">
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Image  stretch=\"fill\" :src=\"item.image\" />
                    <Label :text=\"item.title\" row=\"1\"/>
                </GridLayout>
            </v-template>
        </Pager>
    </template>
    \n

    Static Views

    \n
    <Pager height=\"100%\" selectedIndex=\"1\">
      <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
      <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
      <PagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </PagerItem>
      <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
    </Pager>
    \n

    Angular

    \n
    import { PagerModule } from \"nativescript-pager/angular\";

    @NgModule({
        imports: [
        PagerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Angular v2

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </template>
    </Pager>
    \n

    Angular v4+

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <ng-template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Multi Template

    \n
     public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
      }
    \n
    <Pager
      row=\"1\"
      [items]=\"items | async\"
      [itemTemplateSelector]=\"templateSelector\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
      backgroundColor=\"lightsteelblue\"
    >
      <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
        <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
          <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>

      <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto,auto,auto,*\"
          columns=\"*\"
          backgroundColor=\"white\"
        >
          <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
          <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Static Views

    \n
    <Pager
      backgroundColor=\"orange\"
      row=\"1\"
      #pager
      [selectedIndex]=\"1\"
      height=\"100%\"
    >
      <StackLayout *pagerItem backgroundColor=\"red\">
        <label text=\"First\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"white\">
        <label text=\"Second\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"green\">
        <label text=\"Fourth\"></label>
      </StackLayout>
    </Pager>
    \n

    React

    \n
    import {$Pager} from 'nativescript-pager/react';
    return (
    <$Pager
                    height={{ unit: \"%\", value: 100 }}
                       selectedIndex={this.selectedIndex}
                       selectedIndexChange={this.selectedIndexChange.bind(this)}
                        items={this.items}
                         cellFactory={
                        (item, ref) => {
                            return (
                                <$StackLayout id={item.title} ref={ref}>
                                    <$Label text={item.title}/>
                                    <$ImageCacheIt stretch={'aspectFill'}
                                            src={item.image}/>
                                </$StackLayout>
                            );
                        }
                    }/>
    )
    \n

    Static Views

    \n
    return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                               <$PagerItem backgroundColor={'red'}>
                                   <$Label text={'First'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'white'}>
                                   <$Label text={'Second'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'black'}>
                                   <$Label text={'Third'} color={new Color('white')}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'green'}>
                                   <$Label text={'Fourth'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'pink'}>
                                   <$Label text={'Fifth'}/>
                               </$PagerItem>
                           </$Pager>)
    \n

    Config

    \n
    <Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"ios\"\"android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-health-data-enduco":{"name":"nativescript-health-data-enduco","version":"1.3.2","license":"MIT","readme":"

    \n \n

    \n

    Health Data plugin for NativeScript

    \n

    This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Prerequisites

    \n

    Android

    \n

    Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

    \n
    keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
    \n
    \n

    Note that the default (debug) keystore password is empty.

    \n
    \n

    iOS

    \n

    Make sure you enable the HealthKit entitlement in your app ID.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI:

    \n
    tns plugin add nativescript-health-data
    \n

    API

    \n

    The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

    \n

    This is how you can import and instantiate the plugin, all examples expect this setup:

    \n
    import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

    export class MyHealthyClass {
      private healthData: HealthData;

      constructor() {
        this.healthData = new HealthData();
      }
    }
    \n

    isAvailable

    \n

    This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

    \n
    this.healthData.isAvailable(false)
        .then(available => console.log(available));
    \n

    isAuthorized

    \n

    This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

    \n
      \n
    • The name can be one of the 'Available Data Types'.
      • \n
    • The accessType can be one of read, write, or readAndWrite (note that this plugin currently only supports reading data, but that will change).
      • \n
    \n
    \n

    iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

    \n
    \n
    this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
        .then(authorized => console.log(authorized));
    \n

    requestAuthorization

    \n

    This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

    \n

    Note that this plugin currently only supports reading data, but that will change.

    \n
    const types: Array<HealthDataType> = [
    \t{name: \"height\", accessType: \"write\"},
    \t{name: \"weight\", accessType: \"readAndWrite\"},
    \t{name: \"steps\", accessType: \"read\"},
    \t{name: \"distance\", accessType: \"read\"}
    ];

    this.healthData.requestAuthorization(types)
        .then(authorized => console.log(authorized))
        .catch(error => console.log(\"Request auth error: \", error));
    \n

    query

    \n

    Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

    \n

    By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

    \n

    If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

    \n
    this.healthData.query(
        {
          startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
          endDate: new Date(), // now
          dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
          unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
          aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
          sortOrder: \"desc\" // optional, default \"asc\"
        })
        .then(result => console.log(JSON.stringify(result)))
        .catch(error => this.resultToShow = error);
    \n

    startMonitoring (iOS only, for now)

    \n

    If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

    \n

    Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

    \n
    \n

    Background notifications probably don't work on the iOS simulator, so please test those on a real device.

    \n
    \n
    this.healthData.startMonitoring(
        {
          dataType: \"heartRate\",
          enableBackgroundUpdates: true,
          backgroundUpdateFrequency: \"immediate\",
          onUpdate: (completionHandler: () => void) => {
            console.log(\"Our app was notified that health data changed, so querying...\");
            this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
          }
        })
        .then(() => this.resultToShow = `Started monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    stopMonitoring (iOS only, for now)

    \n

    It's best to call this method in case you no longer wish to receive notifications when health data changes.

    \n
    this.healthData.stopMonitoring(
        {
          dataType: \"heartRate\",
        })
        .then(() => this.resultToShow = `Stopped monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    Available Data Types

    \n

    With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

    \n

    Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

    \n

    The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
    distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
    stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
    caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
    heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
    weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
    heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
    fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
    \n

    Credits

    \n
      \n
    • Filipe Mendes for a superb first version of this repo, while working for SPMS, Shared Services for Ministry of Health (of Portugal). He kindly transferred this repo to me when he no longer had time to maintain it.
      • \n
    • Daniel Leal, for a great PR.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-debounce-tap":{"name":"nativescript-ngx-debounce-tap","version":"1.2.0","license":"Apache-2.0","readme":"

    nativescript-ngx-debounce-tap

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    {N} + Angular directive for debouncing taps and adding animated feedback to the interaction.

    \n

    Installation

    \n
    tns plugin add nativescript-ngx-debounce-tap
    \n

    Usage

    \n

    Import the module in your app module

    \n
    import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';

    @NgModule({
        imports: [
            NgDebounceTapModule,
            // ...
        ],
        // ...
    })
    export class MyModule { }
    \n

    Then use it in your templates like so

    \n
     <Label text=\"Hello World!\" 
            ngDebounceTap 
            [delay]=\"320\"
            [anim]=\"'composite'\" 
            [scale]=\"1.06\" 
            [opacity]=\"0.2\" 
            (debounceTap)=\"hello()\">    </Label>
    \n

    Do check out the demo for a quickstart

    \n

    \"Screenshot

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    delaynumber300The time between each processed tap in milliseconds.
    animstringn/aThe way the interaction is to be animated. Possible values: 'composite', 'opacity', 'scale'. Scale => The element is magnified and returned to its original state. Opacity => The element has its opacity dropped to 0.6 and then returns to normal, like TouchableOpacity in React Native (not the values, the behavior). Composite => Performs both animations symultaneously.
    scalenumber1.2The scale to use when magnifying the element. Set this in order to keep the animation as seamless as possible.
    opacitynumber0.6The opacity used to animate the interaction. Set it to your liking, the default value can be hard to see on some scenarios so keep that in mind!
    debounceTapEventEmittern/aThe event that is emitted when a tap is processed. The $event variable will have a reference to the element that was tapped (as an ElementRef). In case the scale animation is not your thing you can set [anim] to false and make one that suits you in this callback yourself.
    \n

    Changelog

    \n

    1.2.0 - Added the opacity @Input property to the directive for further customization.\n1.1.0 - Added opacity animation as an option.\n1.0.0 - Initial implementation

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-periscopehearts":{"name":"nativescript-periscopehearts","version":"1.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-PeriscopeHearts :two_hearts:

    \n

    NativeScript plugin for Periscope's heart animation (Android Only for now...). Open source library used: tyrantgit/HeartLayout

    \n

    Sample

    \n

    \"Sample

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm install nativescript-periscopehearts

    \n

    Usage

    \n

    XML:

    \n
    <Page class=\"coverImage\" xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:PeriscopeHearts=\"nativescript-periscopehearts\" loaded=\"pageLoaded\">
        <Page.actionBar>
        <ActionBar title=\"NativeScript-PeriscopeHearts\" color=\"#fff\" backgroundColor=\"#03A9F4\" />
      </Page.actionBar>
        <ScrollView>
            <StackLayout>
                <button text=\"Add Heart\" tap=\"newHeart\" />

                <!-- This is our Heart \"container\" -->
                <PeriscopeHearts:PeriscopeHearts class=\"heartLayout\" id=\"heartLayout\" height=\"400\" />     
                
            </StackLayout>
        </ScrollView>
    </Page>
    \n

    JS:

    \n
    // Array of hex color strings
    var colorArray = [
        { hex: \"#3489db\" },
        { hex: '#FF4081' },
        { hex: '#229911' },
        { hex: '#fff000' }
    ];

    function newHeart(args) {
            var heartLayout = frame.topmost().currentPage.getViewById(\"heartLayout\");

            // Just getting a random hex string from the colorArray values
            var rand = colorArray[Math.floor(Math.random() * colorArray.length)];

            // Call addHeart() on the PeriscopeHearts UI element to pop in a new heart
            heartLayout.addHeart(rand.hex);   
    }
    exports.newHeart = newHeart;
    \n

    API

    \n

    addHeart (color) - required

    \n

    Function that adds one heart into the view.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lazy":{"name":"nativescript-lazy","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-lazy/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Lazy

    \n

    A NativeScript module that provides an OOP version of the build-in lazy function.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-lazy
    \n

    inside your app project to install the module.

    \n

    Example

    \n
    import { Lazy } from 'nativescript-lazy';

    var lazyValue = new Lazy<Date>(() => new Date());

    // [1] (false)
    console.log('isValueCreated: ' + lazyValue.isValueCreated);
    // [2] current time
    console.log('value: ' + lazyValue.value);
    // [3] (true)
    console.log('isValueCreated: ' + lazyValue.isValueCreated);
    // [4] same value from [2]
    console.log('value: ' + lazyValue.value);

    lazyValue.reset();

    // [5] (false)
    console.log('isValueCreated: ' + lazyValue.isValueCreated);
    // [6] (new) current time
    console.log('value: ' + lazyValue.value);
    // [7] (true)
    console.log('isValueCreated: ' + lazyValue.isValueCreated);
    // [8] same value from [6]
    console.log('value: ' + lazyValue.value);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-moon-phase":{"name":"nativescript-moon-phase","version":"1.0.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"twitter:

    \n

    \"NPM\"

    \n

    Nativescript moon phase plugin

    \n

    This plugin is a complementary to my previous plugin that converts from gregorian to hijri dates https://github.com/rkhayyat/nativescript-hijri

    \n

    Nativescript-moon-phase

    \n

    Moon Phase plugin allows you show the moon phase for a given date.

    \n

    \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-moon-phase
    \n

    Usage

    \n

    Typescript NativeScript

    \n

    XML

    \n
    <Page 
     xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:customControls=\"nativescript-moon-phase\"
     loaded=\"pageLoaded\" class=\"page\">
      <StackLayout class=\"p-20\">
      <customControls:MoonPhase items=\"{{ DateValue }}\" />
        <DatePicker id=\"date\" loaded=\"onPickerLoaded\" dateChange=\"onDateChanged\" verticalAlignment=\"center\">
        </DatePicker>
        <Button text=\"Valider\" tap=\"see\"></Button>
      </StackLayout>
    </Page>
    \n

    main-view-model

    \n
    import {Observable} from 'tns-core-modules/data/observable';
    import {Hijri} from 'nativescript-moon-phase';

    export class HelloWorldModel extends Observable {
    public monthText : string;
    public DateValue: Date;

      constructor(currentDate) {
        super();

        this.DateValue = currentDate;
      }
    }
    \n

    main-page

    \n
    import * as observable from 'tns-core-modules/data/observable';
    import * as pages from 'tns-core-modules/ui/page';
    import { DatePicker } from \"tns-core-modules/ui/date-picker\";
    import {HelloWorldModel} from './main-view-model';
    var view = require(\"ui/core/view\");
    var MainViewModel = require(\"./main-view-model\");

    let page;

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: observable.EventData) {
        page = <pages.Page>args.object;
        page.bindingContext = new HelloWorldModel(new Date());
    }

    exports.see = function(args) {
        var sender = args.object;
        var parent = sender.parent;
        var year = view.getViewById(parent,\"date\").year;
        var month = view.getViewById(parent,\"date\").month
        var day = view.getViewById(parent,\"date\").day;
        var convertDate = new Date(year, month-1, day);
        page.bindingContext = new HelloWorldModel(convertDate);
    }
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnDescription
    itemsDateDate passed to show the corseponding moon phase image.
    \n

    NativeBaguette 🥖

    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Rachid
    rkhayyat
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-blurview":{"name":"nativescript-blurview","version":"1.1.0","license":"Apache-2.0","readme":"

    NativeScript Blurview widget

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript BlurView widget.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-blurview

    \n

    This command automatically installs the necessary files, as well as stores nativescript-blurview as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Usage

    \n

    You need to add xmlns:gv="nativescript-blurview" to your page tag, and then simply use <gv:BlurView/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-blurview\" loaded=\"pageLoaded\">
        <GridLayout rows=\"\" columns=\"\">
            <Image src=\"https://wallpaperscraft.com/image/rose_flower_colorful_close-up_petals_18824_960x544.jpg\" id=\"bgimage\" stretch=\"aspectFill\" />
            <bv:BlurView></bv:BlurView>
        </GridLayout>
    </Page>
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/farfromrefug/nativescript-blurview
    $ cd nativescript-blurview
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pluggableai/smartpush-sdk":{"name":"@pluggableai/smartpush-sdk","version":"1.8.7","license":"Pluggable's License","readme":"

    @pluggableai/smartpush-sdk

    \n

    Pluggable's Smartpush Plugin for NativeScript apps

    \n
    npm install @pluggableai/smartpush-sdk
    \n

    Pre-conditions [Integrate with FCM]

    \n

    Before using this plugin you should guarantee that your app already integrates with NativeScript Firebase and then with Firebase Cloud Messaging (FCM). The steps are quite easy to follow.

    \n
      \n
    1. Install the @nativescript/firebase-core plugin (a plugin to initialize FirebaseApp in your app) by running the following command in the root directory of your project (this plugin must be installed before using any other Firebase service).
      2. \n
    \n
    npm install @nativescript/firebase-core
    \n
      \n
    1. Android Setup - a configuration file must be downloaded and added to the project:
      2. \n
    \n
      \n
    • On the Firebase console, add a new Android application and enter the projects details. The "Android package name" must match the local projects package name which can be found inside the nativescript.config.ts file;
      • \n
    • Download the google-services.json file and place it inside the project at the following location: /App_Resources/Android/src/google-services.json.
      • \n
    \n
      \n
    1. iOS Setup - to allow the iOS app to securely connect to the Firebase project, a configuration file must be downloaded and added to the project:
      2. \n
    \n
      \n
    • On the Firebase console, add a new iOS application and enter your projects details. The "Apple bundle ID" must match your local project bundle ID. The bundle ID can be found within the "General" tab when opening the project with Xcode or inside the nativescript.config.ts file;;
      • \n
    • Download the GoogleService-Info.plist file and place it inside the project at the following location: /App_Resources/iOS/GoogleService-Info.plist;
      • \n
    • Then, a set of steps are required for you to obtain an auth key .p8 file (APNs authentication key) to send push notification to Apple devices. If you don't already have an APNs authentication key, make sure to create one in the Apple Developer Member Center. Then, inside your project in the Firebase console, select the gear icon, select Project Settings, and then select the Cloud Messaging tab. In APNs authentication key under "Apple app configuration", click the Upload button. Browse to the location where you saved your key, select it, and click Open. Add the key ID for the key (available in the Apple Developer Member Center) and click Upload.

      • \n
    \n
      \n
    1. Instantiate Firebase and initialize a default app (for example, in the /app/app.ts file):
      2. \n
    \n
    import { firebase } from '@nativescript/firebase-core'
    const defaultApp = await firebase().initializeApp()
    \n
      \n
    1. You can now install the messaging module by running:
      2. \n
    \n
    npm install @nativescript/firebase-messaging
    \n
      \n
    1. Then, add the SDK by importing the @nativescript/firebase-messaging module. You should import this module once in your app, ideally in the main file (e.g. app.ts or main.ts).
      2. \n
    \n
    import '@nativescript/firebase-messaging'
    \n
      \n
    1. iOS Setup - iOS requires further configuration before you can start receiving and sending messages through Firebase. Read the documentation and follow the steps on how to setup iOS with Firebase Cloud Messaging.
      2. \n
    \n
      \n
    • Here note that one of the steps of the above tutorial is incomplete. In particular, the one to Allow processing received a background push notification. You should open app/App_Resources/iOS/Info.plist and add the following code at the bottom:
      • \n
    \n
    <key>UIBackgroundModes</key>
    <array>
      \t<string>processing</string>
      \t<string>fetch</string>
      \t<string>remote-notification</string>
    </array>
    \n
      \n
    1. You can then rebuild the project by running in the root's terminal:
      2. \n
    \n
    ns clean
    ns build android
    ns build ios
    \n

    NOTE: FCM via APNs does not work on iOS Simulators. To receive messages & notifications a real device is required. The same is recommended for Android.

    \n

    Smartpush Usage

    \n

    After configuring your app to integrate with FCM, you are ready to use this plugin to properly engage with your users:

    \n
      \n
    1. \n

      First install the Smartpush Package by running npm install @pluggableai/smartpush-sdk in the root of the project;

      \n
      2. \n
    2. \n

      This library exposes two methods which can be imported and used like this in your App.tsx file:

      \n
      3. \n
    \n
    ...
    import { SmartpushSdk } from '@pluggableai/smartpush-sdk';
    ...

    const defaultApp = async function () {
        console.log('defaultApp function started');
        await firebase().initializeApp();
        // Allows you to always display notifications while the application is in the foreground 
        // without sending additional parameters/data when sending the push notification
        firebase().messaging().showNotificationsWhenInForeground = true
        console.log('Firebase Initialized');
    }
    defaultApp();
    \n
    // Request user permission
    async function requestUserPermission() {
        const authStatus = await firebase()
          .messaging()
          .requestPermission({
              ios: {
                  alert: true
              }
          })
        const enabled =
          authStatus === AuthorizationStatus.AUTHORIZED ||
          authStatus === AuthorizationStatus.PROVISIONAL

        console.log('Authorization status:', authStatus)
        if (enabled) {
            const didRegister = await firebase().messaging().registerDeviceForRemoteMessages().then(() => {
                // Init Firebase and calling the below methods
                setFirebaseInits();
            });
        }
    }

    requestUserPermission()
    \n
    // Register handler to listen for messages
    firebase().messaging().onMessage(async remoteMessage => {
        console.log('A new FCM message arrived: ' + JSON.stringify(remoteMessage))
        const notifData = remoteMessage.data as {[key: string]: string}
        const notificationChannelId = \"notificationChannelId\"
        const notificationChannelName = \"notificationChannelName\"
        SmartpushSdk.pluggableExecute(notificationChannelId, notificationChannelName, notifData)
    })
    \n
    // What happens when user clicks in a received push
    firebase().messaging().onNotificationTap((message) => {
        console.log('CLICKED NOTIFICATION:', message)
        SmartpushSdk.pluggableStoreFeedback();
    })
    \n
    // Get user token 
    firebase().messaging().getToken().then(token => {
        console.log('User token:', token)
        //saveTokenToDatabase(token)
    });

    // Listen to user token changes
    firebase().messaging().onToken(token => {
        console.log('User token changed to:', token)
        //saveTokenToDatabase(token)
    });
    \n
    // Subscribe to specific topic
    firebase().messaging().subscribeToTopic('ns_topic').then(() => {
        console.log('Subscribed to topic: ns_topic')
    });
    \n

    License

    \n

    Copyright 2023 PLUGGABLE, LDA (aka PluggableAI)

    \n

    Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

    \n
      \n
    1. \n

      Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

      \n
      2. \n
    2. \n

      Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

      \n
      3. \n
    3. \n

      Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

      \n
      4. \n
    \n

    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-popup-with-position":{"name":"nativescript-popup-with-position","version":"1.0.3","license":"ISC","readme":"

    \"npm\"\n\"npm\"

    \n

    Installation

    \n

    tns plugin add nativescript-popup-with-position

    \n

    Usage

    \n
        <Button tap=\"openPopup\"/>
    \n
        import { Popup } from 'nativescript-popup-with-position';

        function openPopup(args){
        const popup = new Popup({
            backgroundColor:'white' | '#fff',
            height:100,
            width:100,
            unit:'dp' | 'px' | '%',
            elevation:10, // android only
            borderRadius:25 // android only
        });
        const view = new Label();
        view.text = \"Test\";

        /* IOS */
        const nativeView = UILabel.new();
        nativeView.text = \"Native Button\";
        nativeView.frame = CGRectMake(0,0,50,50);
        /* -- IOS */

        /* Android */
        const nativeView = new new android.widget.TextView(context);
        nativeView.setText(\"Native Button\");
        nativeView.setWidth(50);
        nativeView.setHeight(50);
        /* -- Android */
        let xpos = 0;
        let ypos = 0;

        popup.showPopup(anchor: View | nativeView , view: View | nativeView, xpos , ypos);
        }
    \n

    API

    \n

    Constructor

    \n

    Popup(options: PopupOptions)

    \n

    Constructor Example

    \n
    import { Popup, PopupOptions } from \"nativescript-popup-with-position\";

    const opts: PopupOptions = {
      backgroundColor: \"white\" | \"#fff\",
      height: 100,
      width: 100,
      unit: \"dp\" | \"px\" | \"%\",
      elevation: 10, // android only
      borderRadius: 25 // android only
    };

    const popup = new Popup(opts);
    \n

    Popup Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    showPopup(source: any, view: any): PromiseShows the popup anchored to the source argument with the view argument as the popup contents. The view argument can be a native Android/iOS view, a NativeScript View, or a string path to a template within the app directory.
    hidePopup(data?: any): PromiseHides the popup and removes it from the view hierarchy.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mabs.dk/nativescript-animejs":{"name":"@mabs.dk/nativescript-animejs","version":"3.2.1-alpha.0","license":"MIT","readme":"

    \n \n
    \n @mabs.dk/nativescript-animejs - NativeScript wrapper for anime.js\n

    \n

    JavaScript animation engine | animejs.com

    \n

    \n \"npm\n \"npm\n

    \n
    \n Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
    \n It works with CSS properties, SVG, DOM attributes and JavaScript Objects.\n
    \n

    \n Getting started | Documentation | Demos and examples | Browser support\n

    \n

    Getting started

    \n

    Download

    \n

    Via npm

    \n
    $ npm install @mabs.dk/nativescript-animejs --save
    \n

    or manual download.

    \n

    Usage

    \n
    import anime from '@mabs.dk/nativescript-animejs';
    \n

    Hello world

    \n
    anime({
      targets: tnsView,
      translateX: 250,
      rotate: '1turn',
      backgroundColor: '#FFF',
      duration: 800
    });
    \n

    Documentation

    \n\n

    Demos and examples

    \n\n

    \"anime-js-v3-logo\"/

    \n

    Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescrip-pbkdf2":{"name":"nativescrip-pbkdf2","version":"1.0.0","license":"MIT","readme":"

    pbkdf2

    \n

    \"NPM\n\"Build\n\"Dependency

    \n

    \"js-standard-style\"

    \n

    This library provides the functionality of PBKDF2 with the ability to use any supported hashing algorithm returned from crypto.getHashes()

    \n

    Usage

    \n
    var pbkdf2 = require('pbkdf2')
    var derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 1, 32, 'sha512')

    ...
    \n

    For more information on the API, please see the relevant Node documentation.

    \n

    For high performance, use the async variant (pbkdf2.pbkdf2), not pbkdf2.pbkdf2Sync, this variant has the oppurtunity to use window.crypto.subtle when browserified.

    \n

    Credits

    \n

    This module is a derivative of cryptocoinjs/pbkdf2-sha256, so thanks to JP Richardson for laying the ground work.

    \n

    Thank you to FangDun Cai for donating the package name on npm, if you're looking for his previous module it is located at fundon/pbkdf2.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/tailwind":{"name":"@nativescript/tailwind","version":"2.0.1","license":"MIT","readme":"

    @nativescript/tailwind

    \n
    \n

    Warning: :warning: @nativescript/core@8.2.0 is required for colors to work properly You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0 and prior versions don't support it.

    \n
    \n

    Makes using Tailwind CSS in NativeScript a whole lot easier!

    \n
    <label
      text=\"Tailwind CSS is awesome!\"
      class=\"px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full\"
    />
    \n

    \"Tailwind

    \n

    Usage

    \n
    \n

    Note: This guide assumes you are using @nativescript/webpack@5.x as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older @nativescript/webpack versions.

    \n
    \n

    Install @nativescript/tailwind and tailwindcss

    \n
    npm install --save @nativescript/tailwind tailwindcss
    \n

    Generate a tailwind.config.js with

    \n
    npx tailwindcss init
    \n

    Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:

    \n
    // tailwind.config.js

    module.exports = {
      content: [
        './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
      ],
      // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
      darkMode: 'class',
      theme: {
        extend: {},
      },
      plugins: [],
      corePlugins: {
        preflight: false // disables browser-specific resets
      }
    }
    \n

    Change your app.css or app.scss to include the tailwind utilities

    \n
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    \n

    Start using tailwind in your app.

    \n

    Using a custom PostCSS config

    \n

    In case you need to customize the postcss configuration, you can create a postcss.config.js (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:

    \n
    // postcss.config.js

    module.exports = {
      plugins: [
        [\"tailwindcss\", { config: \"./tailwind.config.custom.js\" }],
        \"@nativescript/tailwind\",
      ],
    };
    \n
    \n

    Note: if you want to apply customizations to tailwindcss or @nativescript/tailwind, you will need to disable autoloading:

    \n
    ns config set tailwind.autoload false
    \n

    This is required only if you make changes to either of the 2 plugins - because by default postcss-loader processes the config file first, and then the postcssOptions passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting tailwind.autoload to false just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.

    \n
    \n

    Usage with older @nativescript/webpack versions

    \n

    This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older @nativescript/webpack.

    \n
    \n See instructions\n
    npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader
    \n

    Create postcss.config.js with the following:

    \n
    module.exports = {
      plugins: [
          require('tailwindcss'),
          require('nativescript-tailwind')
      ]
    }
    \n

    Generate a tailwind.config.js with

    \n
    npx tailwindcss init
    \n

    Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:

    \n
    // tailwind.config.js

    module.exports = {
      content: [
        './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
      ],
      // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
      darkMode: 'class',
      theme: {
        extend: {},
      },
      plugins: [],
      corePlugins: {
        preflight: false // disables browser-specific resets
      }
    }
    \n

    Change your app.css or app.scss to include the tailwind utilities

    \n
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    \n

    Update webpack.config.js to use PostCSS

    \n

    Find the section of the config that defines the rules/loaders for different file types.\nTo quickly find this block - search for rules: [.

    \n

    For every css/scss block, append the postcss-loader to the list of loaders, for example:

    \n
    {
      test: /[\\/|\\\\]app\\.css$/,
      use: [
        'nativescript-dev-webpack/style-hot-loader',
        {
          loader: \"nativescript-dev-webpack/css2json-loader\",
          options: { useForImports: true }
        },
    +   'postcss-loader',
      ],
    }
    \n

    Make sure you append postcss-loader to all css/scss rules in the config.

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sec-spec/lib-ng-oauth-mobile-service":{"name":"@sec-spec/lib-ng-oauth-mobile-service","version":"1.0.2","license":"Apache-2.0","readme":"

    @sec-spec/lib-ng-oauth-mobile-service

    \n
    ns plugin add @sec-spec/lib-ng-oauth-mobile-service
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rave":{"name":"nativescript-rave","version":"1.2.0","license":"Apache-2.0","readme":"

    Rave-Nativescript

    \n\n

    Version 1.2.0

    \n
      \n
    • Upgraded to nativescript 6
      • \n
    • Fixed issues with retrieving transaction fee
      • \n
    • Previous versions repo link https://github.com/MohammedBashiru/rave-nativescript
      • \n
    \n

    Version 1.1.0

    \n
      \n
    • Upgraded to rave-android:1.0.43
      • \n
    • Fixed few noticed bugs
      • \n
    \n

    Version 1.0.0

    \n
      \n
    • Using rave-android:1.0.39
      • \n
    • Initial Release
      • \n
    \n

    This plugin allows you to use flutterwave payment platform with Nativescript. For more information visit https://developer.flutterwave.com

    \n

    \"Plugin

    \n

    Requirements

    \n
      \n
    • \n

      Add the required permission\n<uses-permission android:name="android.permission.READ_PHONE_STATE" />\n<uses-permission android:name="android.permission.INTERNET" />

      \n

      REQUIRED PERMISSION

      \n

      This library requires the READ_PHONE_PERMISSION to get the build number for fraud detection and flagging as recommended here https://developer.android.com/training/articles/user-data-ids.html#i_abuse_detection_detecting_high_value_stolen_credentials

      \n
      • \n
    \n

    Installation

    \n
    tns plugin add rave-nativescript
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

    \n

    In addition to the plugin usage, both apps are webpack configured.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript\nimport * as RaveNativescript from 'rave-nativescript';

    \n

    Javascript\nvar Expresspay = require("rave-nativescript");

    \n

    Start RavePayManager

    \n
     let context = RaveNativescript.prepare({
          country: \"country\",
          currency: \"currency here\",
          fName: \"Customer first name\",
          lName: \"Customer last name\",
          email: \"customer email\",
          narration: \"Your narration here\",
          publicKey: \"your public key here\",
          encryptionKey: \"your encryption key here\",
          txRef: \"txRef\",
          amount: amount,
          acceptAccountPayments: true,
          acceptCardPayments: true,
          acceptGHMobileMoneyPayments: true,
          onStagingEnv: true,
          shouldDisplayFee: true,
          showStagingLabel: false,
          setSubAccounts: [{
            subAccountId : \"subAccountId\",
            transactionSplitRatio: 1
          }],
          setMeta: [{ metaname: \"Meta name here\", metavalue: \"meta value here\"}]
        });
    \n

    Full usage

    \n
    context.checkoutPayment()
        .then((response) => {
          console.log(\"payment process complete\")
          console.log(response)
        })
        .catch(e => {
        console.log(\"handle errors\")
        })
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionStatusDefaultDescription
    amountrequirednullThis is the amount to be charged from card/account
    countryrequirednullThis is the route country for the transaction with respect to the currency. You can find a list of supported countries and currencies here
    currencyrequirednullThis is the specified currency to charge the card in
    fNamerequirednullThis is the first name of the card holder or the customer
    lNamerequirednullThis is the last name of the card holder or the customer
    emailrequirednullThis is the email address of the customer
    narrationoptionalnullThis is a custom description added by the merchant. For Bank Transfer payments, this becomes the account name of the account to be paid into. See more details here
    publicKeyrequirednullMerchant's public key. Get your merchant keys here for staging and live
    encryptionKeyrequirednullMerchant's encryption key. Get your merchant keys here for staging and live
    txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
    acceptAccountPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
    acceptCardPayments(boolean)optionalfalseSet to true if you want to accept payments via cards, else set to false
    acceptMpesaPayments(boolean)optionalfalseSet to true if you want to accept Mpesa payments, else set to false . For this option to work, you should set your country to KE and your currency to KES
    acceptGHMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Ghana mobile money payments, else set to false . For this option to work, you should set your country to GH and your currency to GHS
    acceptUgMobileMoneyPayments(boolean)optionalfalseSet to true if you want to accept Uganda mobile money payments, else set to false . For this option to work, you should set your country to UG and your currency to UGX
    acceptAchPayments(boolean)optionalfalseSet to true if you want to accept US ACH charges from your customers, else set to false . For this option to work, you should set your country to US and your currency to USD. You also have to set acceptAccountPayments(true)
    acceptBankTransferPayments(boolean)optionalfalseSet to true if you want to accept payments via bank transfer from your customers, else set to false . This option is currently only available for Nigerian Naira. See more details in the API Location
    onStagingEnv(boolean)requiredfalseSet to true if you want your transactions to run in the staging environment otherwise set to false. Defaults to false
    txRefrequirednullPass in any other custom data you wish to pass. It takes an array of Meta object {}
    txRefrequirednullThis is the unique reference, unique to the particular transaction being carried out. It is generated by the merchant for every transaction
    \n

    Contribute

    \n

    We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/checkbox":{"name":"@abbieben/checkbox","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/dominative-vue":{"name":"@vallemar/dominative-vue","version":"0.0.9","license":"MIT","readme":"

    DOMiNATIVE-Vue

    \n

    Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

    \n

    Playground

    \n
    \n

    Installation

    \n

    Via npm:

    \n
    npm install @dominative/vue @nativescript/core dominative undom-ng vue
    \n

    Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually.

    \n
    \n

    Usage

    \n
    import { Application } from '@nativescript/core'
    import { createApp } from '@dominative/vue'
    import App from 'App.vue'

    const app = createApp(App)

    // Start the app
    app.$run()
    \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-volume":{"name":"nativescript-volume","version":"1.0.7","license":"MIT","readme":"

    NativeScript-Volume

    \n

    This plugin allows you to programmatically control the volume in a NativeScript application. This is compatible with both iOS and Android.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-volume
    \n

    This command automatically installs the necessary files, as well as stores nativescript-volume as a dependency in your project's package.json file.

    \n

    Usage

    \n

    This plugin can be used with any flavor of NativeScript (Core, Angular, Vue, TypeScript, and/or JavaScript).

    \n

    TypeScript

    \n
    import { Volume } from 'nativescript-volume';

    export SomeClass {
      private volume: Volume;

      constructor() {
        this.volume = new Volume();
      }

      mute() {
        this.volume.mute();
      }

      unmute() {
        this.volume.unmute();
      }

      volumeUp() {
        this.volume.volumeUp();
      }

      volumeHalf() {
        if (app.ios) {
          // iOS Volume goes from 0 to 1. With its increments being 1/16.
          this.volume.setVolume(0.5);
        } else if (app.android) {
          // Android Volume I'm unsure of the range, but believe it to be 0 to 15 at least for the music stream.
          this.volume.setVolume(7);
        }
      }

      volumeDown() {
        this.volume.volumeDown();
      }

      getVolume() {
        // Please see Android TODO in the Api Section
        alert('    Volume is' + this.volume.getVolume());
      }
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method: ReturnTypeDescriptionNotes
    mute(): voidMutes the volume of the Device
    unmute(): voidUnmutes the volume of the Device
    volumeDown(): voidDecreases the volume of the Device.Android The device picks the active sound stream.
    volumeUp(): voidIncreases the volume of the Device.Android The device picks the active sound stream.
    getVolume(): numberGets the current volume of the Device.Android This currently only gets the music stream's volume.
    setVolume(value: number): voidSets the current volume of the Device.Android This currently only sets the music stream's volume.
    \n

    License

    \n

    The MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slideshow-busy-indicator":{"name":"nativescript-slideshow-busy-indicator","version":"3.0.1","license":"Apache-2.0","readme":"

    Nativescript-slideshow-busy-indicator

    \n

    This plug-in allows you to easily create a busy indicator (loader) like the one illustrated using a set of images that you provide. What it does is cycle through the images with a nice transition.

    \n

    \"Sample

    \n

    Prerequisites

    \n

    You need a set of images that will be used to be cycled through. The format can be any format that the NS Image module supports. For best looks icon-like images (with transparency like PNGs) do the job. See demo.

    \n

    Installation

    \n
    npm install nativescript-slideshow-busy-indicator --save
    \n

    Usage

    \n

    You will have to add xmlns:indicator="nativescript-slideshow-busy-indicator" namespace to your page tag, and then simply use <indicator:BusyIndicator/> in order to add the widget to your page.

    \n

    The must-set properties are:\nimages - set this property to an array of strings that represent paths to the images you would like to display, like:

    \n
    public images = [\"~/images/01.png\", \"~/images/02.png\", \"~/images/03.png\", \"~/images/04.png\"];
    \n

    isBusy - when set to true, the indicator is visible, when false - it is not

    \n

    Then you can use the indicator like:

    \n
    <indicator:BusyIndicator isBusy=\"{{ isBusy }}\"
     images=\"{{ images }}\"
     indicatorWidth=\"60\" 
     indicatorHeight=\"60\" 
     indicatorBorderRadius=\"30\" 
     indicatorColor=\"red\" />
    \n

    A few examples:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OutputCode
    \"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
    images="{{ images }}"
    indicatorWidth="60"
    indicatorHeight="60"
    indicatorBorderRadius="30"
    indicatorColor="red" />
    \"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
    images="{{ images }}"
    indicatorWidth="90"
    indicatorHeight="90"
    indicatorBorderRadius="30"
    indicatorColor="yellow"
    backOpacity="0.4"
    backColor="pink" />
    \"Sample<indicator:BusyIndicator isBusy="{{ isBusy }}"
    images="{{ images }}"
    indicatorWidth="120"
    indicatorHeight="100"
    indicatorBorderRadius="20"
    indicatorColor="red"
    backOpacity="0.6"
    backColor="black" />
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    backOpacitySets the opacity of the background layer (floating point value from 0 to 1)
    backColorSets the color of the background layer (e.g. "red", "#FF0000")
    indicatorOpacitySets the opacity of the indicator layer (floating point value from 0 to 1)
    indicatorColorSets the color of the indicator layer (e.g. "green", "#00FF00")
    indicatorHeightSets the height of the indicator layer in pixels
    indicatorWidthSets the width of the indicator layer in pixels
    indicatorBorderRadiusSets the border radius of the indicator layer (by default is 0, can be set to 0.5 * indicatorHeight if you want to make the indicator circle for example)
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-apps-with-updated-auth":{"name":"nativescript-azure-mobile-apps-with-updated-auth","version":"2.0.4","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Azure Mobile Apps plugin.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-azure-mobile-apps

    \n

    This command automatically installs the necessary files, as well as stores nativescript-azure-mobile-apps as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    For most of the functions the plugin you only need to know the name of your Azure mobile apps portal. The only thing that requires additional configuration is the social sign-in under iOS. For that please follow the steps explained below

    \n

    Starting with version 2.0, due to updated libraries, Mircososft now reqiures the minimum SDK for Android to be 19. So you need to adjust 2 files in your app:

    \n
      \n
    1. In the app/App_Resources/Android/AndroidManifest.xml you must have android:minSdkVersion set to 19 or above.
      2. \n
    2. In the app/App_Resources/Android/app.gradle you must ensure that in your defaultConfig you have minSdkVersion set to the same number as the one you set in the AndroidManifest.xml file. So assuming you are setting it to 19, your file should look something like this:
      3. \n
    \n
    android {  
      defaultConfig {  
        generatedDensities = []
        applicationId = \"......\"
        minSdkVersion 19
      }  
    }
    \n

    API

    \n

    MobileServiceClient

    \n

    Static Methods

    \n
      \n
    • configureClientAuthAppDelegate(): void
      \nConfigures the iOS authentication delegate. You are required to call this before your applications starts in case you will be using social sign in under iOS!
      • \n
    \n

    Methods

    \n
      \n
    • \n

      onstructor(string)
      \nInitialize a new client with the given Azure portal url.

      \n
      • \n
    • \n

      getTable(string): MobileServiceTable
      \nGets a reference to the table with the given name.

      \n
      • \n
    • \n

      login(AuthenticationProvider, string?): Promise
      \nPerforms a social sign in with the given provider and url scheme.

      \n
      • \n
    • \n

      loginFromCache(): boolean
      \nTries to login the user from a previously cached authentication. Returns true if successful.

      \n
      • \n
    \n

    Properties

    \n
      \n
    • \n

      user - MobileServiceUser
      \nReturns the currently social signed in user.

      \n
      • \n
    • \n

      push - MobileServicePush\nReturns a MobileServicePush object which you can use to work with push notifications.

      \n
      • \n
    \n

    MobileServicePush

    \n

    Methods

    \n
      \n
    • \n

      register(string): Promise
      \nRegisters the given native push token for push notifications with Azure.

      \n
      • \n
    • \n

      registerWithTemplate(string, string, string): Promise
      \nRegisters the given native push token, template name and template for push notifications with Azure. For more information about templates see the usage below.

      \n
      • \n
    • \n

      registerWithTags(string, string[]): Promise
      \nRegisters the given native push token for push notifications with Azure and associates the given tags with the device installation. You can read more about tags here.

      \n
      • \n
    • \n

      registerWithTagsAndTemplate(string, string[], string, string): Promise
      \nThis combines the above 2 methods, so you can register both with a template and tags.

      \n
      • \n
    • \n

      unregister(): Promise
      \nUnregisters the device from Azure push notifications.

      \n
      • \n
    \n

    Properties

    \n
      \n
    • installationId - string\nReturns the installationId of the device what is registered with Azure's Notification Hubs. This is usefull, for example, in case you need custom tags and you need to call your backend to add the tags.
      • \n
    \n

    MobileServiceUser

    \n

    Static Methods

    \n
      \n
    • \n

      clearCachedAuthenticationInfo(): void
      \nClears the previously cached authentication info.

      \n
      • \n
    • \n

      getFromCache():MobileServiceUser
      \nReturns the previously cached user.

      \n
      • \n
    \n

    Methods

    \n
      \n
    • getProviderCredentials(): Promise
      \nReturns various details about the current user (for example surname, given name, user id, claims, etc.).
      • \n
    \n

    Properties

    \n
      \n
    • \n

      userId - string
      \nGets the user id for this user.

      \n
      • \n
    • \n

      authenticationToken - string
      \nGets the OAuth token for this user.

      \n
      • \n
    \n

    MobileServiceTable

    \n

    Methods

    \n
      \n
    • \n

      read(): Promise<Array>
      \nReturns all records in the table.

      \n
      • \n
    • \n

      insert(T): Promise
      \nAdds the given item to the table. Returns thie updated item (for example with id assigned).

      \n
      • \n
    • \n

      update(T): Promise
      \nUpdates a given item in the table. Returns the updated item.

      \n
      • \n
    • \n

      deleteById(number|string): Promise
      \nDeletes the item with the given id from the table.

      \n
      • \n
    • \n

      deleteItem(T): Promise
      \nDeletes the given item from the table.

      \n
      • \n
    • \n

      where(): MobileServiceQuery
      \nReturns a query object which you can use to filter, order and page through the data in the table.

      \n
      • \n
    \n

    MobileServiceQuery

    \n

    The query object provies a very easy to use chainable interface to filter, order and page through the data inside a table.

    \n

    Methods

    \n
      \n
    • \n

      field(string): this
      \nSpecifies that we will be filtering by the given field. After this you can apply one of the filtering operations.

      \n
      • \n
    • \n

      eq(string|number|boolean|Date): this
      \nFilters the table by a previously specified field so that its value equals the given value.

      \n
      • \n
    • \n

      ne(string|number|boolean|Date): this
      \nFilters the table by a previously specified field so that its value is different than the given value.

      \n
      • \n
    • \n

      gt(string|number||Date): this
      \nFilters the table by a previously specified field so that its value is greater than the given value.

      \n
      • \n
    • \n

      ge(string|number||Date): this
      \nFilters the table by a previously specified field so that its value is greater than or equal to the given value.

      \n
      • \n
    • \n

      lt(number||Date): this
      \nFilters the table by a previously specified field so that its value is lower than the given value.

      \n
      • \n
    • \n

      le(number||Date): this
      \nFilters the table by a previously specified field so that its value is lower than or equal to the given value.

      \n
      • \n
    • \n

      startsWith(string, string): this
      \nFilter the table by the given field so that the values start with the given value.

      \n
      • \n
    • \n

      endsWith(string, string): this
      \nFilter the table by the given field so that the values end with the given value.

      \n
      • \n
    • \n

      and(): this
      \nApplies a logcal AND operator after which you can start another filter condition.

      \n
      • \n
    • \n

      or(): this
      \nApplies a logcal OR operator after which you can start another filter condition.

      \n
      • \n
    • \n

      orderBy(string, SortDir): this
      \nOrders the resultset by thegive field and direction. This should be applied after specifying your filters!

      \n
      • \n
    • \n

      skip(number): this
      \nSkips the given number of records from the current resultset. This should be applied after all fitlers and sorting.

      \n
      • \n
    • \n

      top(number): this
      \nTakes only the given amount of records from the resultset. This should be applied after all fitlers and sorting.

      \n
      • \n
    • \n

      read(): Promise
      \nReads and returns the records of the currently filtered, ordered and windowed resultset.

      \n
      • \n
    \n

    Usage

    \n

    Note that there is no difference in using the plugin in Angular NativeScript apps, so the usage below is valid for Angular apps as well.

    \n

    Create a client

    \n
    import { MobileServiceClient } from \"nativescript-azure-mobile-apps/client\";
    var client = new MobileServiceClient(\"https://<PORTAL_NAME>.azurewebsites.net\");
    \n

    Get a reference to a table

    \n
    var todoItemTable = client.getTable(\"TodoItem\");
    \n

    Get all items in a table

    \n
    todoItemTable.read<TodoItem>().then(function(results) {
        // results is array of TodoItem-s
        console.log(results.length);
        console.log(results[0].id);
    });
    \n

    Add an item to a table

    \n
    var item = new TodoItem();
    item.text = \"NativeScript Rocks!\";
    todoItemTable.insert(item).then(function(result) {
        // result is the inserted item with the id changed
        console.log(result.id);
    });
    \n

    Update an item

    \n
    item.text = \"Changed Text\";
    todoItemTable.update(item).then(function(result) {
        // result is the updated item
        console.log(result);
    });
    \n

    Delete an item

    \n
    todoItemTable.deleteItem(item).then(function() {
        console.log(\"Deleted!\");
    });
    \n

    Delete an item by ID

    \n
    todoItemTable.deleteById(\"some id\").then(function() {
        console.log(\"Deleted!\");
    });
    \n

    Query table

    \n
    todoItemTable.where().field(\"completed\").eq(true).read().then(function(results) {
        console.log(\"There are \" + results.length.toString() + \"completed items\");
    });
    \n

    Sorting

    \n
    import { SortDir } from \"nativescript-azure-mobile-apps/query\";
    todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Desc).read().then(function(results) {
        // ...
    });
    \n

    Paging

    \n
    import { SortDir } from \"nativescript-azure-mobile-apps/query\";
    todoItemTable.where().field(\"completed\").eq(true).orderBy(\"createdAt\", SortDir.Asc).skip(2).top(3).read().then(function(results) {
        // Skips 2 completed tasks and returns the next 3 ordered chronologically by creation. 
    });
    \n

    User Authentication (Social Sign In)

    \n

    iOS login requirements

    \n

    In versions 1.0.0 and lower login on iOS leveraged an in-app browser. This will be banned so we needed to\nswitch to SafariViewController which is not "in-app". So we need to be able to switch back and forth between\nthe external browser. The main benefit is this browser can leverage cookies already set by for instance a Facebook\nlogin, so the user doesn't have to enter his credentials again.

    \n

    It's a bit of work, but it's a one time effort and should take you about 5 minutes to complete these steps:

    \n
    Custom URL Scheme
    \n

    Switching to the external browser is not a problem, but switching back requires you to configure a 'Custom URL Scheme'.\nOpen app/App_Resources/iOS/Info.plist and add:

    \n
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>my.bundle.id</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>x-msauth-tns-azure-sample</string>
        </array>
      </dict>
    </array>
    \n

    Make sure the Custom URL Scheme string x-msauth-tns-azure-sample above is unique on the device of the user,\nso including your bundle id would be a good start (replace the dots by dashes).

    \n

    Also, replace my.bundle.id by your bundle id.

    \n
    Add ALLOWED EXTERNAL REDIRECT URLS
    \n

    Add x-msauth-tns-azure-sample://easyauth.callback to the 'ALLOWED EXTERNAL REDIRECT URLS' field in these screenshots of your Azure backend.

    \n

    Make sure to replace x-msauth-tns-azure-sample by your own Custom URL Scheme.

    \n
    App Delegate wiring
    \n

    Now that your app can be called from the external party it still can't switch back to the foreground unless\nyou wire up a method in the App Delegate. Don't worry, this plugin takes care of that for you, the only thing\nyou need to do is add this line just before app.start() in app.js / app.ts:

    \n
    // add this
    require(\"nativescript-azure-mobile-apps/client\").MobileServiceClient.configureClientAuthAppDelegate();

    // something like this is already there
    application.start({ moduleName: \"main-page\" });
    \n
    Passing the URL Scheme to login
    \n

    Note that calling login has changed a bit; you now need to pass a second parameter to this function to use the\nnew login mechanism. Failing to do so will fall back to the deprecated in-app browser authentication method.\nMake sure to replace x-msauth-tns-azure-sample by the scheme you configured in Info.plist before.\nYou can leave it out if you only target Android.

    \n
    import { AuthenticationProvider } from \"nativescript-azure-mobile-apps/user\";
    client.login(AuthenticationProvider.Google, \"x-msauth-tns-azure-sample\").then((user) => {  
        console.log(`Logged In! UserID:${user.userId}`);
    }, (e) => {
        console.log(\"Error Logging in!\", e);
    });
    \n

    Once authenticated the userId and token are cached so you can login by simply calling:

    \n
    client.loginFromCache(); // Will return true if there are cached credentials and will setup the client accordingly
    \n

    If you want to get additional information about the user (like provider token, name, email, profile photo etc.) you can do this by calling getProviderCredentials():

    \n
    client.user.getProviderCredentials().then((result) => {
        console.log(`Surname: ${result.surname}`);
        console.log(`Given Name: ${result.givenName}`);
        console.log(`Name: ${result.name}`);
    });
    \n

    Note: Since each provider provides different amount of details (also depends on what you have authorized in the Azure portal),\nif you are looking for some specific information, you should check the claims property of the result.\nIt is a dictionary containing all the information that is returned from Azure.

    \n

    If you want to remove the cached authentication info you should use:

    \n
    import { MobileServiceUser } from \"nativescript-azure-mobile-apps/user\";
    MobileServiceUser.clearCachedAuthenticationInfo();
    \n

    Push Notifications

    \n

    NOTE: In order to work with push notifications you also need to install the nativescript-push-notifications plugin.\nYou can do this by running the following command:

    \n
    tns install nativescript-push-notifications
    \n

    You can read more on how to use the push plugin here.

    \n

    Register

    \n

    You need to call the push register with Azure in the success callback of the push plugin by passing the registration token\nreturned by the push plugin.

    \n
    pushPlugin.register(pushSettings, (data) => {
        if (pushPlugin.onMessageReceived) {
            pushPlugin.onMessageReceived(pushSettings.notificationCallbackAndroid);
        }
        client.push.register(data)
            .then(() => console.log(\"Azure Register OK!\"))
            .catch((e) => console.log(e));
    }, (e) => { console.log(e); });
    \n

    Register with a template

    \n

    If you want to use a custom template for the notifications, you can use the registerWithTemplate method to pass\nyour template name and body.

    \n
    let pushTemplates = {};
    pushTemplates[platform.platformNames.android] = \"{\\\"data\\\":{\\\"message\\\":\\\"$(param)\\\"}}\";
    pushTemplates[platform.platformNames.ios] = \"{\\\"aps\\\":{\\\"alert\\\":\\\"$(param)\\\"}}\";

    pushPlugin.register(pushSettings, (data) => {
        if (pushPlugin.onMessageReceived) {
            pushPlugin.onMessageReceived(pushSettings.notificationCallbackAndroid);
        }
        client.push.registerWithTemplate(data, \"MyTemplate\", pushTemplates[platform.device.os])
            .then(() => console.log(\"Azure Register OK!\"))
            .catch((e) => console.log(e));
    }, (e) => { console.log(e); });
    \n

    Unregister

    \n
    pushPlugin.unregister(() => {
        console.log(\"Device Unregister OK!\");
        client.push.unregister()
            .then(() => console.log(\"Azure Unregister OK!\"))
            .catch((e) => console.log(e));
    }, (e) => console.log(e), pushSettings);
    \n

    Demos

    \n

    This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-azure-mobile-apps
    $ cd nativescript-azure-mobile-apps
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-blank-solid-vision":{"name":"@nativescript/template-blank-solid-vision","version":"8.6.3","license":"Apache-2.0","readme":"

    NativeScript with Solid for visionOS

    \n
    ns run visionos --no-hmr
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-expresspay":{"name":"nativescript-expresspay","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Expresspay

    \n

    \"Build

    \n

    This plugin allows you to use expresspay-gh payment platform with Nativescript. For more information visit https://expresspaygh.com/

    \n

    \"Plugin

    \n

    Requirements

    \n
      \n
    • Add expresspay_browser_switch_activity.xml to AppResources/Android/src/main/res/layout
      • \n
    \n
    <RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
      xmlns:tools=\"http://schemas.android.com/tools\" 
      android:id=\"@+id/layout\"
      android:layout_width=\"match_parent\"
      android:layout_height=\"match_parent\" android:paddingLeft=\"@dimen/activity_horizontal_margin\"
      android:paddingRight=\"@dimen/activity_horizontal_margin\"
      android:paddingTop=\"@dimen/activity_vertical_margin\"
      android:paddingBottom=\"@dimen/activity_vertical_margin\">
       />
      <WebView xmlns:android=\"http://schemas.android.com/apk/res/android\"
          android:layout_width=\"match_parent\" 
          android:layout_height=\"match_parent\"
          android:id=\"@+id/expresspay_webview\">
      </WebView>
    </RelativeLayout>
    \n
      \n
    • Add dimens.xml to AppResources/Android/src/main/res/values
      • \n
    \n
    <resources>
        <!-- Default screen margins, per the Android Design guidelines. -->
        <dimen name=\"activity_horizontal_margin\">16dp</dimen>
        <dimen name=\"activity_vertical_margin\">16dp</dimen>
    </resources>
    \n
      \n
    • Add the expresspay browser activity to your AndroidManifest.xml probably add it before the ErrorReportActivity activity
      • \n
    \n
    <activity
    android:name=\"com.expresspaygh.api.ExpressPayBrowserSwitchActivity\"
    android:exported=\"false\">
    <intent-filter>
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />

        <data android:scheme=\"${applicationId}.expresspaygh\" />
    </intent-filter>

    <meta-data
        android:name=\"android.webkit.WebView.EnableSafeBrowsing\"
        android:value=\"true\" />
    </activity>
    \n

    Installation

    \n
    tns plugin add nativescript-expresspay
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect both demo apps in the plugin repository.\nIn demo folder you can find the usage of the plugin.

    \n

    In addition to the plugin usage, both apps are webpack configured.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import * as Expresspay from 'nativescript-expresspay';
    \n

    Javascript

    \n
    var Expresspay = require(\"nativescript-expresspay\");
    \n

    Start Expresspay

    \n

    TypeScript

    \n
    let context = Expresspay.initialize({
        request: Expresspay.RequestType.Submit,
        server_url: \"http://172.20.10.5/custom/demo.expresspay.com/server.php\", // specifiy your server url to generate token
        enable_debug: true,
        order_id: \"82373\",
        currency: \"GHS\",
        amount: \"2.00\",
        order_desc: \"Daily Plan\",
        first_name: \"Test\",
        last_name: \"Api\",
        email: \"testapi@expresspaygh.com\",
        phone_number: \"233546891427\",
        account_number: \"233546891427\"
    });
    \n

    Javascript

    \n
    var context = Expresspay.initialize({
        request: \"submit\",
        server_url: \"http://172.20.10.5/custom/demo.expresspay.com/server.php\", // specifiy your server url to generate token
        enable_debug: true,
        order_id: \"82373\",
        currency: \"GHS\",
        amount: \"2.00\",
        order_desc: \"Daily Plan\",
        first_name: \"Test\",
        last_name: \"Api\",
        email: \"testapi@expresspaygh.com\",
        phone_number: \"233546891427\",
        account_number: \"233546891427\"
    });
    \n

    Full usage

    \n
    context
        .getToken()
        .then((response) => {
          console.log(\"Payload response\", response)
          return context.checkoutPayment()
        })
        .then((response) => {
          console.log(\"PAYMENT COMPLETED\", response)
        })
        .catch((e) => {
          console.log(e);
        });
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionStatusDefaultDescription
    requestrequirednullSet server request type
    enable_debugoptionalfalseSet the developnment env. Please ensure you set this value to false in your production code. This helps to log server response
    server_urloptionalhttps://sandbox.expresspaygh.com/api/sdk/php/server.phpthe full path url to the location on your servers where you implement express pay server side sdk
    currencyrequirednullCurrency of the transaction
    amountrequirednullAmount the customer is paying for the order
    order_idrequirednullUnique order identification number
    order_descrequirednullDescription of the order
    account_numberrequirednullCustomer account number at Merchant
    redirect_urloptionalnullURL that customer should be redirected at the completion of the payment process
    order_img_urloptionalnullImage that customer should be shown at Checkout. This must be implemented from server side
    first_nameoptionalnullCustomer First name
    last_nameoptionalnullCustomer Last name
    phone_numberoptionalnullCustomer email address
    emailoptionalnullCustomer Last name
    \n

    Contribute

    \n

    We love PRs!. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    License

    \n

    Apache License Version 2.0, January 2019

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-polyfill":{"name":"@nativescript/canvas-polyfill","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/flutterwave":{"name":"@abbieben/flutterwave","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maskedinput-ng2":{"name":"nativescript-maskedinput-ng2","version":"1.3.1","license":"ISC","readme":"\n

    A {N} Masked Input Plugin

    \n

    \"License\" \"npm\" \"npm\" \"GitHub

    \n

    This plugin extends the {N} TextView to allow for input masking.

    \n

    Notes

    \n

    iOS 7+

    \n

    Android API 17+

    \n

    Plugin does not support the use of the keyboardType property from TextView.

    \n

    Plugin will attempt to determine the mask type and display the appropriate keyboardType automatically.

    \n

    Installation

    \n

    Run tns plugin add nativescript-maskedinput-ng2

    \n

    Usage

    \n

    To use MaskedInput you need to include it in your XML.

    \n

    Add the following to your page directive.

    \n
    xmlns:mi=\"nativescript-maskedinput-ng2\"
    \n

    Use MaskedInput by adding the following XML.

    \n
    <mi:MaskedInput mask=\"1-999-999-9999? x999\" hint=\"1-555-555-5555\" placeholder=\"#\" />
    \n

    Properties

    \n

    mask [string]

    \n

    Get or Set the mask used for input

    \n

    mask options

    \n
      \n
    • 9 is the same as RegEx [0-9]
      • \n
    • a is the same as RegEx [A-Za-z]
      • \n
    • * is the same as RegEx [A-Za-z0-9]
      • \n
    • ? specifies that anything after the ? is optional.
      • \n
    \n
    Supported Seperators
    \n
      \n
    • \n
        \n
      • \n
      \n
      • \n
    • |
      • \n
    • /
      • \n
    • \\
      • \n
    • .
      • \n
    • $
      • \n
    • \n
        \n
      • \n
      \n
      • \n
    • ( )
      • \n
    • [ ]
      • \n
    • { }
      • \n
    \n

    valid [boolean]

    \n

    Returns true or false if the input text matches the mask.

    \n

    Use the FormattedText property or the text property to validate the input.

    \n

    placeholder [string]

    \n

    Gets or Sets the placeholder.

    \n

    Default: _

    \n

    RawText [string]

    \n

    Gets only the text that matches the RegEx pattern from the mask.

    \n

    You cannot validate the RawText property. It will fail.

    \n

    FormattedText [string]

    \n

    Gets the Full text including any seperators as specified in the mask.

    \n

    regEx [string]

    \n

    Gets the regex that was created from the mask so that you can perform your own validation.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-barcodeview":{"name":"nativescript-barcodeview","version":"3.4.9","license":"MIT","readme":"

    NativeScript BarcodeView

    \n

    Supported barcode types

    \n

    iOS and Android

    \n
      \n
    • CODE_39
      • \n
    • CODE_93
      • \n
    • CODE_128
      • \n
    • DATA_MATRIX
      • \n
    • EAN_8
      • \n
    • EAN_13
      • \n
    • ITF (also known as ITF14)
      • \n
    • PDF_417 (on Android only when passed in explicity via formats)
      • \n
    • QR_CODE
      • \n
    • UPC_A
      • \n
    • UPC_E
      • \n
    \n

    Android only

    \n
      \n
    • CODABAR
      • \n
    • MAXICODE
      • \n
    • RSS_14
      • \n
    \n

    iOS only

    \n
      \n
    • AZTEC
      • \n
    • CODE_39_MOD_43
      • \n
    • INTERLEAVED_2_OF_5
      • \n
    \n

    A note about UPC_A and EAN_13

    \n

    When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-barcodeview
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Usage

    \n

    The nativescript BarcodeView is base on nativescript-barcodescanner from [Eddy Verbruggen]\n(https://github.com/EddyVerbruggen)

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdc="nativescript-canvas" on the Page element

    \n

    XML

    \n
    <Page xmlns:bc=\"nativescript-barcodeview\">
        <StackLayout horizontalAlignment=\"center\">
            <bc:BarcodeView width=\"100\" height=\"100\" scanResult=\"onScanResult\"/>
       </StackLayout>
    </Page>
    \n

    NativeScript + Angular

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { BarcodeView } from 'nativescript-barcodeview';
    registerElement('BarcodeView', () => BarcodeView);
    \n
    <BarcodeView width=\"100\" height=\"100\" (scanResult)=\"onScanResult($event)\"></CanvasView>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    (<any>Vue).registerElement('BarcodeView', () => require('nativescript-barcodeview').BarcodeView);
    \n
    <BarcodeView  width=\"100\" height=\"100\"  @scanResult=\"onScanResult\"/>
    \n

    Whatever the UI framework you will receive the event in :

    \n
    function onScanResult(text:string, barcodeFormat:string) {

    }
    \n

    Properties

    \n
      \n
    • \n

      formats
      \ncoma separated list of format to decode

      \n
      • \n
    • \n

      preferFrontCamera
      \nwhether to prefer front camera

      \n
      • \n
    • \n

      beepOnScan
      \nshould i beep?

      \n
      • \n
    • \n

      reportDuplicates
      \nshould i keep on reporting?

      \n
      • \n
    • \n

      pause
      \npause camera

      \n
      • \n
    • \n

      torchOn
      \nyou guess right?

      \n
      • \n
    \n

    Methods

    \n
      \n
    • pauseScanning
      • \n
    • resumeScanning
      • \n
    \n

    Android

    \n

    ZXing: https://github.com/zxing/zxing/releases\nZXing Android Embedded: https://github.com/journeyapps/zxing-android-embedded

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-arth":{"name":"nativescript-opentok-arth","version":"1.7.2","license":"MIT","readme":"

    Nativescript OpenTok

    \n

    \"npm\"\n\"npm\"

    \n

    A Nativescript plugin for the OpenTok iOS and Android SDK.

    \n

    OpenTok: https://tokbox.com/developer/

    \n

    Getting Started

    \n

    Requirements

    \n
      \n
    • API Key with OpenTok. Get one here.
      • \n
    • Ability to generate a valid session id (either through OpenTok account or back-end service)
      • \n
    • Ability to generate a valid token (either through OpenTok account or back-end service)
      • \n
    • Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported.
      • \n
    \n

    Installation

    \n

    Node Package Manager (NPM)

    \n
      \n
    • npm install nativescript-opentok --save
      • \n
    \n

    Integration

    \n

    Routed Sessions

    \n
    View
    \n

    You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

    \n

    The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

    \n
    <StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
    <OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
    \n

    Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

    \n
    import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

    private _apiKey:string = 'API_KEY';
    private _sessionId: string = 'SESSION_ID';
    private _token: string = 'TOKEN';

    private publisher: TNSOTPublisher;
    private subscriber: TNSOTSubscriber;

    private session: TNSOTSession;

    constructor(private page: Page) {
       super();
       this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
       this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
       this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
       this.initPublisher();
       this.initSubscriber();
    }

    initPublisher() {
       this.session.connect(this._token);
       this.publisher.publish(this.session, '', 'HIGH', '30');
       this.publisher.events.on('streamDestroyed', (result) => {
           console.log('publisher stream destroyed');
       });
    }

    initSubscriber() {
       this.session.events.on('streamCreated', () => {
           this.subscriber.subscribe(this.session);
       });
    }
    \n

    Special Articles

    \n\n

    Images

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iPhoneiPad
    \"iPhone\"iPad
    \n

    Notes

    \n
      \n
    • Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead.
      • \n
    • TNS stands for Telerik NativeScript
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-chiliz":{"name":"nativescript-wikitude-chiliz","version":"2.4.0","license":"Apache-2.0","readme":"

    nativescript-wikitude

    \n
    This is a fork of @breningham/nativescript-wikitude that has been unfortunately inactive.
    \n

    \"npm

    \n

    \"NPM\"

    \n

    Provides nativescript access to Wikitude AR (9.1.0 on Android and 9.0.0 on iOS).

    \n

    Prerequisites / Requirements

    \n

    Permissions

    \n

    Before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

    \n

    Running the Demo

    \n

    We include a very basic AR Sample in the Demo app,

    \n

    but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

    \n

    and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

    \n

    Installation

    \n

    to install for your project you can use :

    \n
    tns plugin add nativescript-wikitude
    \n

    for Nativescript Angular Projects you will need to import the Element in your app.component.ts

    \n
    import { Wikitude } from \"nativescript-wikitude\";
    // ...snip....
    registerElement(\"Wikitude\", () => Wikitude);
    \n

    and then in your ar.component.html :

    \n
    <Wikitude
      [url]=\"WikitudeURL\"
      (WorldLoaded)=\"onWorldLoaded($event)\"
      (JSONReceived)=\"onJSON($event)\"
    >
    </Wikitude>
    \n

    and in your ar.component.ts:

    \n
        import { Wikitude } from 'nativescript-wikitude';

        // ...snip...

        WikitudeInstance: Wikitude;
        WikitudeURL: string = \"~/wikitude_world/index.html\";

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        }

        onJSON($event) {
            console.log(JSON.stringify($event.data));
        }

        // ...snip...
    \n

    and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

    \n
        (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
    \n

    And Voila! you have Wikitude AR working in your Nativescript Application!

    \n

    Usage

    \n

    using your own location provider

    \n

    by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

    \n

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
            this.WikitudeInstance.disableLocationProvider();
        }
    \n

    Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

    \n
    this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
    \n

    this is useful if you want a single location state.

    \n

    once you have disabled it you can re-enable it with the following :

    \n
    this.WikitudeInstance.enableLocationProvider();
    \n

    TODO

    \n
      \n
    • Plugins API Exposure, not sure how to go about this, Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API (an Example of a plugin would be face recognition). I'm unsure how to go about allowing users to do this. any advice would be appreciated...
      • \n
    • Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
      • \n
    • Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
      • \n
    • a better way to set the Wikitude LicenseKey and Required Features.
      • \n
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefault valueDescription
    url""the URL of the Wikitude "ARWorld"
    features`Features.ImageTrackingFeatures.InstantTracking
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionArgumentsDescription
    setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
    hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
    loadUrl()url: stringloads the URL in the Wikitude WebView
    reload()reloads the current Wikitude WebView
    clearCache()clears the wikitude Cache
    toggleFlash()Toggles the Devices Flash-light
    switchCamera()switches the Camera that wikitude uses
    captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
    disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
    enableLocationProvider()enables the location Provider
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescriptionType
    WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
    WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
    JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
    ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
    ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
    \n

    all can be imported from the index.d.ts.

    \n

    License

    \n

    Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-pulltorefresh":{"name":"@akylas/nativescript-pulltorefresh","version":"2.4.6","license":"MIT","readme":"\n

    NativeScript-PullToRefresh

    \n    \n

    \nNativeScript plugin to use Pull to Refresh on any view.\n

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    tns plugin add @Akylas/nativescript-pulltorefresh

    \n

    Android - SwipeRefreshLayout

    \n

    iOS - UIRefreshControl

    \n

    Sample Screen

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"Android\"iOS
    \n

    Usage

    \n

    NativeScript Core

    \n

    XML

    \n
    <page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:PullRefresh=\"@Akylas/nativescript-pulltorefresh\"
          loaded=\"pageLoaded\">
        <PullRefresh:PullToRefresh refresh=\"refreshList\">
            <list-view items=\"{{ users }}\">
                <list-view.itemTemplate>
                    <label text=\"{{ name }}\" row=\"0\" col=\"1\"textWrap=\"true\" class=\"message\" />
                </list-view.itemTemplate>
            </list-view>
        </PullRefresh:PullToRefresh>
    </page>
    \n

    JS

    \n
    function refreshList(args) {
      // Get reference to the PullToRefresh component;
      var pullRefresh = args.object;

      // Do work here... and when done call set refreshing property to false to stop the refreshing
      loadItems().then(
        resp => {
          // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
          setTimeout(() => {
            pullRefresh.refreshing = false;
          }, 1000);
        },
        err => {
          pullRefresh.refreshing = false;
        }
      );
    }
    exports.refreshList = refreshList;
    \n

    Angular NativeScript

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"PullToRefresh\", () => require(\"@Akylas/nativescript-pulltorefresh\").PullToRefresh);

    refreshList(args) {
             const pullRefresh = args.object;
             setTimeout(function () {
                pullRefresh.refreshing = false;
             }, 1000);
        }
    \n

    HTML

    \n
    <PullToRefresh (refresh)=\"refreshList($event)\">
      <ListView [items]=\"itemList\">
        <template let-item=\"item\">
          <label [text]=\"item.id\"></label>
        </template>
      </ListView>
    </PullToRefresh>
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';

    Vue.registerElement(
      'PullToRefresh',
      () => require('@Akylas/nativescript-pulltorefresh').PullToRefresh
    );
    \n

    Component

    \n
    <template>
      <Page>
        <PullToRefresh @refresh=\"refreshList\">
          <ListView for=\"item in listOfItems\" @itemTap=\"onItemTap\">
            <v-template>
              <!-- Shows the list item label in the default color and style. -->
              <label :text=\"item.text\" />
            </v-template>
          </ListView>
        </PullToRefresh>
      </Page>
    </template>

    <script>
    export default {
      methods: {
        refreshList(args) {
          var pullRefresh = args.object;
          setTimeout(function() {
            pullRefresh.refreshing = false;
          }, 1000);
        }
      }
    };
    </script>
    \n

    Properties

    \n
      \n
    • refresh : function required
      • \n
    • refreshing: boolean - Notifies the widget that the refresh state has\nchanged.
      • \n
    \n

    Changelog

    \n

    Contributing

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-socios":{"name":"nativescript-wikitude-socios","version":"8.4.0-2.0.3","license":"Apache-2.0","readme":"

    nativescript-wikitude

    \n

    \"npm

    \n

    \"NPM\"

    \n

    Provides nativescript access to Wikitude AR.

    \n

    Versioning is as follows ${wikitude-version}-${plugin-version}\nexample : 7.2.1-1.1.0 is Wikitude Version 7.2.1, Plugin version 1.1.0.

    \n

    Screenshots coming soon!

    \n

    Prerequisites / Requirements

    \n

    Permissions

    \n

    before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

    \n

    Running the Demo

    \n

    WE include a very basic AR Sample in the Demo app,

    \n

    but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

    \n

    and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

    \n

    Installation

    \n

    to install for your project you can use :

    \n
    tns plugin add nativescript-wikitude
    \n

    for Nativescript Angular Projects you will need to import the Element in your app.component.ts

    \n
        import { Wikitude } from 'nativescript-wikitude';
        // ...snip....
        registerElement('Wikitude', () => Wikitude);
    \n

    and then in your ar.component.html :

    \n
        <Wikitude [url]=\"WikitudeURL\" 
                  (WorldLoaded)=\"onWorldLoaded($event)\" 
                  (JSONReceived)=\"onJSON($event)\">
        </Wikitude>
    \n

    and in your ar.component.ts:

    \n
        import { Wikitude } from 'nativescript-wikitude';

        // ...snip...

        WikitudeInstance: Wikitude;
        WikitudeURL: string = \"~/wikitude_world/index.html\";

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        }

        onJSON($event) {
            console.log(JSON.stringify($event.data));
        }

        // ...snip...
    \n

    and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

    \n
        (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
    \n

    And Voila! you have Wikitude AR working in your Nativescript Application!

    \n

    Usage

    \n

    using your own location provider

    \n

    by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

    \n

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
            this.WikitudeInstance.disableLocationProvider();
        }
    \n

    Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

    \n
        this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
    \n

    this is useful if you want a single location state.

    \n

    once you have disabled it you can re-enable it with the following :

    \n
        this.WikitudeInstance.enableLocationProvider();
    \n

    TODO

    \n
      \n
    • Plugins API Exposure, not sure how to go about this, Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API (an Example of a plugin would be face recognition). I'm unsure how to go about allowing users to do this. any advice would be appreciated...
      • \n
    • Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
      • \n
    • Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
      • \n
    • a better way to set the Wikitude LicenseKey and Required Features.
      • \n
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefault valueDescription
    url""the URL of the Wikitude "ARWorld"
    features` Features.ImageTrackingFeatures.InstantTracking
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionArgumentsDescription
    setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
    hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
    loadUrl()url: stringloads the URL in the Wikitude WebView
    reload()reloads the current Wikitude WebView
    clearCache()clears the wikitude Cache
    toggleFlash()Toggles the Devices Flash-light
    switchCamera()switches the Camera that wikitude uses
    captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
    disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
    enableLocationProvider()enables the location Provider
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescriptionType
    WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
    WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
    JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
    ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
    ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
    \n

    all can be imported from the index.d.ts.

    \n

    License

    \n

    Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mutual-auth":{"name":"nativescript-mutual-auth","version":"1.0.1","license":"Apache-2.0","readme":"

    Mutual Auth

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-mutual-auth
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-markdown-view":{"name":"nativescript-markdown-view","version":"2.0.0","license":"MIT","readme":"

    NativeScript Markdown View

    \n

    \"npm\n\"Build

    \n

    \"NPM\"

    \n

    A NativeScript plugin that provides a natively rendered markdown view.

    \n

    Uses Markwon on Android and TSMarkdownParser on iOS.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-markdown-view
    \n

    This command automatically installs the necessary files, as well as stores nativescript-markdown-view as a dependency in your project's package.json file.

    \n

    Usage

    \n

    You need to add xmlns:mv="nativescript-markdown-view" to your page tag, and then simply use <mv:MarkdownView/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:mv=\"nativescript-markdown-view\">
        <StackLayout class=\"p-20\">
            <mv:MarkdownView markdown=\"_This_ should be **bold**!\" />
        </StackLayout>
    </Page>
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    markdown""The markdown to be rendered on screen
    \n

    License

    \n

    MIT License, see LICENSE file

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-routed-values":{"name":"nativescript-routed-values","version":"1.2.4","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-routed-values/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Routed Values

    \n

    A NativeScript module for implementing routed value graphs.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-routed-values
    \n

    inside your app project to install the module.

    \n

    What are "routed values"?

    \n

    The idea is that you can build graphs of values.

    \n

    You define one or more root element that can have one or more child that also can handle one or more child and so on.

    \n

    For example:

    \n
            A1
        /       \\
       B1         B2
      /  \\      /    \\
    C1   C2    C3    C4
    \n

    Here you have the root element A1 that has the children B1 and B2.

    \n

    B1 itself has the children C1 and C2.

    \n

    B2 is the parent of C3 and C4.

    \n

    The code of that graph looks like this:

    \n
    import {RoutedNumber} from \"nativescript-routed-values\";

    // the root element
    var A1 = new RoutedNumber();

    // the children of A1
    var B1 = new RoutedNumber();
    var B2 = new RoutedNumber();
    A1.addChildren(B1, B2);

    // the children of B1
    var C1 = new RoutedNumber();
    var C2 = new RoutedNumber();
    B1.addChildren(C1, C2);

    // the children of B2
    var C3 = new RoutedNumber();
    var C4 = new RoutedNumber();
    B2.addChildren(C3, C4);
    \n

    Now if you change the value of A1 it will notify that value to all its children.

    \n

    And these children will notify value changes to their children and so on.

    \n

    By default the highest values wins.

    \n

    You can set the value by using the innerValue property:

    \n
    A1.innerValue = 5979;
    \n

    The effect is that A1 will raise a change event for the value property of itself and their children B1 and B2.

    \n

    B1 and B2 will also raise change events for their children.

    \n

    Other direction

    \n

    You also can use the "other" direction, what means that the lower value "wins".

    \n

    In that case you have to set Descending value of the RouterStradegy enum

    \n
    enum RouterStradegy {
        /**
         * Take the value from parent (if greater)
         */
        Ascending,

        /**
         * Take the value from parent (if smaller)
         */
        Descending,
    }
    \n

    in the constructor of a routed value.

    \n
    import {RoutedNumber, RouterStradegy} from \"nativescript-routed-values\";

    var A1 = new RoutedNumber(RouterStradegy.Descending);
    \n

    Example

    \n

    Data binding

    \n

    The graph above is realized as demo app.

    \n\n

    The values of the left side are the routed values provided by value property.

    \n

    The values of the right side are the "real" / inner values provided by innerValue property.

    \n

    To increase a value simply tap on it.

    \n

    Events

    \n

    onValueChanged

    \n
    import {RoutedNumber} from \"nativescript-routed-values\";

    var A1 = new RoutedNumber();
    A1.name = 'A1';
    A1.onValueChanged((newValue, obj) => {
        console.log(\"New value of '\" + obj.name + \"' is: \" + newValue);
    });

    A1.innerValue = 5979;
    \n

    Classes

    \n

    TrafficLight

    \n

    This represents a "traffic light" and uses the following enum:

    \n
    enum TraficLightState {
        /**
         * None (gray)
         **/
        None = 0,

        /**
         * OK (green)
         **/
        OK = 1,

        /**
         * Warning (yellow)
         **/
        Warning = 2,

        /**
         * Error (red)
         **/
        Error = 3,

        /**
         * Fatal error (yellow / red)
         **/
        FatalError = 4,
    }
    \n

    RoutedValue<T>

    \n

    This is the generic version of a routed value and can be used for all comparable value types, especially for enums:

    \n
    import {RoutedValue} from \"nativescript-routed-values\";

    enum MyEnum {
        Value1 = 1,
        Value2 = 2,
        Value3 = 3,
    }

    var v = new RoutedValue<MyEnum>();
    v.innerValue = MyEnum.Value1;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-iphonex-safe-area":{"name":"nativescript-ngx-iphonex-safe-area","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-ngx-iphonex-safe-area

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    {N} + Angular directive to implement safe area margins or paddings especially on iPhone X.

    \n

    Installation

    \n
    tns plugin add nativescript-ngx-iphonex-safe-area
    \n

    Usage

    \n

    Import the module in your app module

    \n
    import { NgiPhoneXSafeAreaModule } from 'nativescript-ngx-iphonex-safe-area';

    @NgModule({
        imports: [
            NgiPhoneXSafeAreaModule,
            // ...
        ],
        // ...
    })
    export class MyModule { }
    \n

    Import the CSS or SCSS file depending on your project

    \n

    If your project uses good old css import the classes the directive will apply to your views like so...

    \n
    @import 'nativescript-ngx-iphonex-safe-area/css/iphonex.css';
    \n

    In case your project uses scss instead, use this syntax to import the classes...

    \n
    @import '~nativescript-ngx-iphonex-safe-area/scss/iphonex';
    \n

    Finally use it in your templates like so

    \n
     <GridLayout iPhoneX [mind]=\"['left', 'right', 'bottom']\" [padding]=\"true\"></GridLayout>
    \n

    The result will be something like this...

    \n\n\n\n\n\n\n\n
    \"Screenshot\"Screenshot
    \n

    Notice those blueish painted areas? Well, those are the safe area!

    \n

    If you want a quickstart, check out the demo app.

    \n
    \n

    I promise, this won't break your app in devices other than the iPhone X.

    \n
      \n
    • Me
      • \n
    \n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    mindstring[]['left', 'right', 'bottom']Think of the name as the typical 'Mind the gap' from London Underground. It tells the directive whether it should mind the safe area only at the bottom, only the left or any combination you might need.
    paddingbooleanfalseYou can use this property to tell the directive to apply padding instead of margin to your views.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yourplugin":{"name":"nativescript-yourplugin","version":"1.0.0","license":"Apache-2.0","readme":"

    Develop a NativeScript plugin \"Build

    \n
    \n

    This repo is heavily based on @NathanWalker's Plugin Seed. Thanks, Nathan!

    \n
    \n\n\n\n

    TL;DR

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

    \n
      \n
    1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript-yourplugin is the name of your plugin.
      2. \n
    2. cd nativescript-yourplugin/src
      3. \n
    3. npm run postclone
      4. \n
    4. npm run demo.ios or npm run demo.android to run the demo. This will automatically watch for TypeScript changes also in your plugin and do the transpilation.
      5. \n
    \n

    Long Description

    \n

    What is NativeScript plugin seed?

    \n

    The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

    \n
      \n
    • the plugin structure with option for easy development and debugging (see Development setup section below)
      • \n
    • a simple working plugin
      • \n
    • a demo project working with the plugin. It is useful during development and for running tests via Travis CI
      • \n
    • plugin tests
      • \n
    • a guideline how to structure your plugin README file that will be published to NPM
      • \n
    • a shell script to create your plugin package
      • \n
    • a proper .gitignore to keep GitHub tidy
      • \n
    • a proper .npmignore to ensure everyone is happy when you publish your plugin to NPM.
      • \n
    \n

    \"Plugin

    \n

    Plugin folder structure

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Folder/File nameDescription
    demoThe plugin demo source code
    demo/testsThe tests for your plugin
    srcThe plugin source code
    src/platform/androidPlugin Android specific configuration
    src/platform/iosPlugin ios specific configuration
    src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
    src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
    publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
    \n

    Getting started

    \n
      \n
    1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript-yourplugin is the name of your plugin..
      2. \n
    2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
      3. \n
    3. Execute npm run postclone to:\n
        \n
      • configure your github username - it will be changed in the package.json for you
        • \n
      • configure your plugin name - all files and classes in the seed will be renamed for you
        • \n
      • stub your plugin README.md file
        • \n
      • create a new repository for your plugin
        • \n
      • npm link your plugin the demo app - this will install the plugin dependencies and will add a symbolic link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
        • \n
      \n
      4. \n
    \n

    Now you can continue with the development of your plugin by using the Development setup described below.

    \n

    NOTE: The plugin seed is updated to use the latest version of NativeScript. If you are not ready to upgrade, you can checkout a tagged version that is compatible with your NativeScript version.

    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n
      \n
    1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
      2. \n
    2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
      3. \n
    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    NOTE: Any changes that you need to make in a native library used in your plugin or in any other files inside src/platforms directory such as Info.plist or AndroidManifest.xml can't be directly reflected in the demo app. You need to use npm run demo.reset and run the application again.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the src folder in order to use native APIs:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    It's highly recommended to generate typings for the native libraries used in your plugin. By generating typings you'll be able to see what APIs exactly are exposed to Javascript and use them easily in your plugin code

    \n

    Generating typings for iOS

    \n
      \n
    • Run the command for typings generation as explained in the documentation
      • \n
    • Open demo/typings/x86_64 and copy the d.ts files that you plan to use in your plugin to src/platforms/ios/typings
      • \n
    • Open src/references.d.ts and add a reference to each of the files added to src/platforms/ios/typings
      • \n
    \n

    NOTE: Swift APIs that are not exported to Objective-C are not supported. This means that you can only call APIs from JavaScript that are visible to the Objective-C runtime. This include all Objective-C APIs and only the subset of all Swift APIs that are exposed to Objective-C. So, to use a Swift API (class/function/method etc.) from NativeScript, first make sure that it can be used from Objective-C code. For more information which Swfit APIs can be exposed to Objective-C, see here.

    \n

    Generating typings for Android

    \n
      \n
    • Clone Android DTS Generator repo
      • \n
    • Follow the steps in the README
      • \n
    • Copy the generated d.ts files in src/platforms/android/typings. Feel free to rename the generated files for readablity.
      • \n
    • Open src/references.d.ts and add a reference to each of the files added to src/platforms/android/typings
      • \n
    \n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away the src/node_modules, demo/node_modules and demo/platforms folders to reinstall them fresh.

    \n
      \n
    • Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
      • \n
    \n

    Sometimes you just need to wipe out the demo's platforms directory only:

    \n
      \n
    • Run npm run demo.reset to delete the demo's platforms directory only.
      • \n
    \n

    Sometimes you may need to ensure plugin files are updated in the demo:

    \n
      \n
    • Run npm run plugin.prepare will do a fresh build of the plugin then remove itself from the demo and add it back for assurance.
      • \n
    \n

    Unittesting

    \n

    The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API go to src folder and execute one of these commands:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish to NPM

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in src/package.json
      • \n
    • Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)
      • \n
    \n

    If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

    \n

    NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

    \n

    TravisCI

    \n

    The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

    \n

    To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

    \n

    Referring tns-core-modules in the Plugin

    \n

    We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

    \n

    Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

    \n

    WRONG

    \n

    tsconfig.json

    \n
    ...

    \"paths\": {
      \"*\": [
        \"./node_modules/*\",
        \"./node_modules/tns-core-modules/*\"
      ]
    }
    ...
    \n

    yourplugin.common.ts

    \n
    import * as app from 'application';
    \n

    RIGHT

    \n

    yourplugin.common.ts

    \n
    import * as app from 'tns-core-modules/application';
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-ripple":{"name":"nativescript-material-ripple","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-ripple
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-ripple@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdr="nativescript-material-ripple" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdr=\"nativescript-material-ripple\">
        <StackLayout horizontalAlignment=\"center\">
            <mdr:Ripple rippleColor=\"green\" width=\"100\" height=\"100\" />
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdcripple {
        ripple-color: blue;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialRippleModule } from \"nativescript-material-ripple/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialRippleModule,
            ...
        ],
        ...
    })
    \n
    <MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"></MDRipple>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import RipplePlugin from 'nativescript-material-ripple/vue';

    Vue.use(RipplePlugin);
    \n
    <MDRipple rippleColor=\"green\" width=\"100\" height=\"100\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript StackLayout

    \n

    Attributes

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the ripple.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applozic-chat-creditoh":{"name":"nativescript-applozic-chat-creditoh","version":"1.0.3","license":"Apache-2.0","readme":"

    Applozic NativeScript Chat Plugin

    \n

    Fork of nativescript-applozic-chat@1.7.2

    \n

    Installation

    \n
    tns plugin add nativescript-applozic-chat-creditoh
    \n

    Goto src folder and run

    \n
    npm run demo.ios
    \n

    Usage

    \n

    Login/Register User

    \n
        var alUser = {
                'userId' : userId,   //Replace it with the userId of the logged in user
                'password' : password,  //Put password here
                'authenticationTypeId' : 1,
                'applicationId' : 'applozic-sample-app',  //replace \"applozic-sample-app\" with Application Key from Applozic Dashboard
                'deviceApnsType' : 0    //Set 0 for Development and 1 for Distribution (Release)
            };
    \t
        applozicChat.login(alUser, function(response) {
            applozicChat.launchChat(); //launch chat
          }, function(error) {
            console.log(\"onLoginFailure: \" + error);
          });
    \n

    Launch Chat

    \n
    Main Chat screen
    \n
            applozicChat.launchChat();
    \n
    Launch Chat with a specific User
    \n
            applozicChat.launchChatWithUserId(userId);
    \n
    Launch Chat with specific Group
    \n
            applozicChat.launchChatWithGroupId(groupId, function(response){
    \t  console.log(\"Success : \" + response);
    \t}, function(response){
    \t  console.log(\"Error : \" + response);
    \t});
    \n

    Logout

    \n
    applozicChat.logout(function(response) {
          console.log(\"logout success: \" + response);
        }, function(error) {
          console.log(\"logout error: \"+ error);
        });
    \n

    Push Notification Setup instruction

    \n

    Uploading the push notification certificate and GCM/FCM server key in applozic dashboard

    \n

    a) For IOS upload your APNS push notification certificate to Applozic Dashboard page under 'Edit Application' section in order to enable real-time notification.

    \n

    Go to Applozic Dashboard Push Notification Push Notification -> Upload APNS Certificate for Development and Distribution environment.

    \n

    b) For Android go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.

    \n

    Android

    \n

    Prerequisites:

    \n
      \n
    1. Download these files https://github.com/reytum/Applozic-Push-Notification-FIles
      2. \n
    2. Register you application in firebase console and download the google-services.json file.
      3. \n
    3. Get the FCM server key from firebase console.(There is a sender ID and a server key, make sure you get the server key).
      4. \n
    4. Go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.
      5. \n
    \n

    Steps to follow:

    \n
      \n
    1. \n

      Copy the pushnotification folder from the above downloaded files and paste it in path <your project>/platforms/android/src/main/java/com/tns/

      \n
      2. \n
    2. \n

      Add these lines in file <your project>/platforms/android/src/main/AndroidManifest.xml inside <application> tag

      \n
         <service android:name="com.tns.pushnotification.FcmListenerService">\n     <intent-filter>\n         <action android:name="com.google.firebase.MESSAGING_EVENT" />\n     </intent-filter>\n </service>\n <service\n     android:name="com.tns.pushnotification.FcmInstanceIDListenerService"\n     android:exported="false">\n     <intent-filter>\n         <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />\n     </intent-filter>\n </service>\n
      \n
      3. \n
    3. \n

      Add the same lines from step 2 in <your project>/app/App_Resources/Android/AndroidManifest.xml file inside <application> tag

      \n
      4. \n
    4. \n

      Paste thegoogle-services.json file in <your project>/platforms/android/ folder

      \n
      5. \n
    5. \n

      Open <your project>/platforms/android/build.gradle :\nadd this inside dependency mentioned in top of the file (below classpath "com.android.tools.build:gradle:2.2.3") :\nclasspath "com.google.gms:google-services:3.1.1"\nadd this below apply plugin: "com.android.application" :\napply plugin: "com.google.gms.google-services"

      \n
      6. \n
    6. \n

      Call PushNotificationTask in onSuccess of applozic login as below:

      \n
         applozicChat.registerForPushNotification(function(response){
         console.log(\"push success : \" + response);
       }, function(response){
         console.log(\"push failed : \" + response);
       });
      \n
      7. \n
    \n

    Note : Everytime you remove and add android platform you need to follow steps 1,2,4 and 5.

    \n

    Ios

    \n
      \n
    1. \n

      Download delegate.ts file from this delegate.ts link and paste it under your project folder-->app-->delegate.ts

      \n
      2. \n
    2. \n

      Download app.ts file from the app.ts link and replace the app.ts file in your project if you have any changes then you can merge only required changes from the app.ts file link

      \n
      3. \n
    \n

    NOTE : Above push notification setup for android and ios is in the case if your not using native script push plugin in your project

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-marshmallow-loader":{"name":"nativescript-marshmallow-loader","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-marshmallow-loader/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Marshmallow Loader

    \n

    NativeScript plugin for the Android Marshmallow loading animation.

    \n

    Android Only

    \n

    Sample Usage

    \n\n\n\n\n\n\n\n\n\n\n\n
    Sample
    \"Sample\"
    \n

    Native Library:

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android
    Cleveroad/CRAndroidMBootAnimationView
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add nativescript-marshmallow-loader

    \n

    Usage

    \n

    \n
    <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:Marshmallow=\"nativescript-marshmallow-loader\" loaded=\"pageLoaded\">
      <ActionBar title=\"Marshmallow Loader\" />
      <StackLayout>
        <Marshmallow:MarshmallowLoader id=\"marshmallow\" height=\"140\" />
        <StackLayout orientation=\"horizontal\">
          <Button text=\"Pause\" tap=\"{{ pauseIt }}\" />
          <Button text=\"Play\" tap=\"{{ playIt }}\" />
          <Button text=\"Stop\" tap=\"{{ stopIt }}\" />
        </StackLayout> 
      </StackLayout>
    </Page>
    \n

    API

    \n
      \n
    • startAnimation() - start playing the video
      • \n
    • pauseAnimation() - pause the video
      • \n
    • stopAnimation() - stop the animation and reset to beginning when resumed.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-checkbox":{"name":"@akylas/nativescript-checkbox","version":"2.0.5","license":"MIT","readme":"\n

    NativeScript Checkbox

    \n    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"stars\"\n \n
    \n

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add @nstudio/nativescript-checkbox
    \n

    NativeScript prior to 7:

    \n
    tns plugin add @nstudio/nativescript-checkbox@1.0.0
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Sample Usage

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Android SampleiOS Sample
    \"Sample1\"\"Sample2\"
    \n

    Usage

    \n

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n

    \n

    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { topmost } from '@nativescript/core/ui/frame';

    public toggleCheck() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    Vue.registerElement(
      'CheckBox',
      () => require('@nstudio/nativescript-checkbox').CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

    \n\n

    Contributing & Running Demo Apps

    \n
      \n
    • Execute from root:\n
        \n
      • For android: npm run demo.android
        • \n
      • For iOS: npm run demo.ios
        • \n
      • npm run demo.ng.android (for angular android)
        • \n
      • npm run demo.ng.ios (for angular ios)
        • \n
      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/paystack":{"name":"@abbieben/paystack","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker-fixed-color":{"name":"nativescript-modal-datetimepicker-fixed-color","version":"1.1.10","license":"Apache-2.0","readme":"

    nativescript-modal-datetimepicker \"Build \"npm\" \"npm\"

    \n

    \"Twitter

    \n

    \"NPM\"

    \n

    This plugin is a wrapper around android.app.DatePickerDialog for Android, and UIDatePicker for iOS.

    \n

    Android Screenshots

    \n

    Date Picker

    \n\n

    Time Picker

    \n\n

    iOS

    \n\n

    Installation

    \n
    tns plugin add nativescript-modal-datetimepicker
    \n

    Configuration

    \n

    For android, the clock style can be clock or spinner\nFor android, the calendar style can be calendar or spinner

    \n

    This can be changed in App_Resources/Android/values-21/styles.xml

    \n
    <!-- Default style for DatePicker - in spinner mode -->
    <style name=\"SpinnerDatePicker\" parent=\"android:Widget.Material.Light.DatePicker\">
        <item name=\"android:datePickerMode\">calendar</item>
    </style>

    <!-- Default style for TimePicker - in spinner mode -->
    <style name=\"SpinnerTimePicker\" parent=\"android:Widget.Material.Light.TimePicker\">
        <item name=\"android:timePickerMode\">clock</item>
    </style>
    \n

    Usage

    \n

    NativeScript Core

    \n
    const ModalPicker = require(\"nativescript-modal-datetimepicker\")
      .ModalDatetimepicker;

    const picker = new ModalPicker();

    // Pick Date
    exports.selectDate = function() {
      picker
        .pickDate({
          title: \"Select Your Birthday\",
          theme: \"light\",
          maxDate: new Date()
        })
        .then(result => {
          // Note the month is 1-12 (unlike js which is 0-11)
          console.log(
            \"Date is: \" + result.day + \"-\" + result.month + \"-\" + result.year
          );
          var jsdate = new Date(result.year, result.month - 1, result.day);
        })
        .catch(error => {
          console.log(\"Error: \" + error);
        });
    };

    // Pick Time
    exports.selectTime = function() {
      picker
        .pickTime()
        .then(result => {
          console.log(\"Time is: \" + result.hour + \":\" + result.minute);
        })
        .catch(error => {
          console.log(\"Error: \" + error);
        });
    };
    \n

    API

    \n

    pickDate(options): Promise<DateResponse>;

    \n

    Returns a promise that resolves to DateResponse type object (Note: the month is 1-12, unlike js which is 0-11)

    \n
    date: {
        day: number,
        month: number,
        year: number
    }
    \n

    pickTime(options): Promise<TimeResponse>;

    \n

    Returns a promise that resolves to TimeResponse type.

    \n
    time: {
        hour: number,
        minute: number
    }
    \n

    options conform to the following interface:

    \n
    export interface PickerOptions {
      title?: string; // iOS ONLY: The title to display above the picker, default hidden.
      theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark and prominent.
      maxDate?: Date;
      minDate?: Date;
      startingHour?: number; // Ignored on pickDate()
      startingMinute?: number; // Ignored on pickDate()
      startingDate?: Date; // Ignored on pickTime()
      datePickerMode?: string; // Android ONLY: set this to \"spinner\" to see spinner for DatePicker, other option is \"calendar\" (which is the default)
    }
    \n

    Response Interfaces

    \n
    export interface TimeResponse {
      hour: number;
      minute: number;
    }

    export interface DateResponse {
      day: number;
      month: number;
      year: number;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-slider":{"name":"nativescript-material-slider","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-slider
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-slider@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mds="nativescript-material-slider" on the Page element

    \n

    XML

    \n
    <Page xmlns:mds=\"nativescript-material-slider\">
        <StackLayout horizontalAlignment=\"center\">
            <mds:Slider value=\"50\" minValue=\"0\" maxValue=\"100\" />
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdslider {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialSliderModule } from \"nativescript-material-slider/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialSliderModule,
            ...
        ],
        ...
    })
    \n
    <MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\"></MDSlider>
    \n

    NativeScript + Vue

    \n
    import SliderPlugin from 'nativescript-material-slider/vue';

    Vue.use(SliderPlugin);
    \n
    <MDSlider value=\"50\" minValue=\"0\" maxValue=\"100\" @valueChange=\"onValueChanged\"/>
    \n

    Or you can bind the value to some instance data using the v-model directive:

    \n
    <MDSlider v-model=\"value\" minValue=\"0\" maxValue=\"100\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript Slider so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the slider.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-activityindicator":{"name":"nativescript-material-activityindicator","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-activityindicator
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-activityindicator@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mda="nativescript-material-activityindicator" on the Page element

    \n

    XML

    \n
    <Page xmlns:mda=\"nativescript-material-activityindicator\">
        <StackLayout horizontalAlignment=\"center\">
            <mda:ActivityIndicator busy=\"true\"/>
        </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdcactivityindicator {
        color: #fff;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialActivityIndicatorModule } from \"nativescript-material-activityindicator/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialActivityIndicatorModule,
            ...
        ],
        ...
    })
    \n
    <MDActivityIndicator busy=\"true\"></MDActivityIndicator>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import ActivityIndicatorPlugin from 'nativescript-material-activityindicator/vue';

    Vue.use(ActivityIndicatorPlugin);
    \n
    <MDActivityIndicator busy=\"true\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript Activity Indicator so it already has all the same attributes

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-bottomsheet":{"name":"nativescript-material-bottomsheet","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    NativeScript Material BottomSheets

    \n

    Use the Material Design Bottom Sheets in your {N} app

    \n
    Material Design Spec
    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-bottomsheet
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-bottomsheet@2.5.4
      • \n
    \n

    Changelog

    \n

    Usage

    \n

    Start-up wiring (NON ANGULAR)

    \n

    We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

    \n
    JavaScript
    \n
    var material = require(\"nativescript-material-bottomsheet\");

    material.install();
    \n
    TypeScript
    \n
    import { install } from \"nativescript-material-bottomsheet\";
    install();
    \n

    Uses the same kind of API as Nativescript Modals

    \n
    TS
    \n
    const modalViewModulets = \"ns-ui-category/modal-view/basics/modal-ts-view-page\";
    export function openBottomSheet(args) {
        const mainView: Button = <Button>args.object;
        const context = { username: \"test_username\", password: \"test\" };
        const fullscreen = true;
        mainView.showBottomSheet({
            view: modalViewModulets,
            context,
            closeCallback: (username, password) => {
                bottom-sheet
                alert(`Username: ${username} : Password: ${password}`);
            },
            fullscreen
        });
    }
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import BottomSheetPlugin from 'nativescript-material-bottomsheet/vue';

    Vue.use(BottomSheetPlugin);
    \n

    Then you can show a Vue component:

    \n
    import MyComponent from 'MyComponent.vue';

    //inside another Vue component
    const options: BottomSheetOptions = {
    };
    this.$showBottomSheet(MyComponent, options)
    \n

    NativeScript + Angular

    \n

    First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

    \n
    import { NativeScriptMaterialBottomSheetModule} from \"nativescript-material-bottomsheet/angular\";

    @NgModule({
        imports: [
            // This will call the install method and inject a global service called BottomSheetService
            NativeScriptMaterialBottomSheetModule.forRoot()
        ],
        ...
    })
    \n

    now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

    \n
    ItemComponent
    \n
    import { Component,  ViewContainerRef } from '@angular/core';
    import { BottomSheetOptions, BottomSheetService } from 'nativescript-material-bottomsheet/angular';
    import { ShareOptionsComponent } from './share-options.component';

    @Component({
        selector: 'ns-item',
        templateUrl: './item.component.html',
        moduleId: module.id
    })
    export class ItemComponent {
        constructor(
            private bottomSheet: BottomSheetService, 
            private containerRef: ViewContainerRef,
        ) {}

        showOptions() {
            const options: BottomSheetOptions = {
                viewContainerRef: this.containerRef,
                context: ['Facebook', 'Google', 'Twitter']
            };

            this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
                console.log('Option selected:', result);
            });
        }
    }
    \n
    ShareOptionsComponent
    \n
    <ListView
        [items]=\"options\"
        (itemTap)=\"onTap($event)\"
        separatorColor=\"white\"
        class=\"list-group\"
        height=\"200\"
    >
        <ng-template let-option=\"item\">
            <Label
                class=\"list-group-item\"
                [text]=\"option\"
            >    </Label>
        </ng-template>
    </ListView>
    \n
    import { Component, OnInit } from '@angular/core';
    import { BottomSheetParams } from 'nativescript-material-bottomsheet/angular';
    import { ItemEventData } from '@nativescript/core/ui/list-view';

    @Component({
        selector: 'ns-share-options',
        templateUrl: 'share-options.component.html'
    })
    export class ShareOptionsComponent implements OnInit {
        options: string[];
        
        // The BottomSheetService injects the BottomSheetParams to the component
        // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
        constructor(private params: BottomSheetParams) {}

        ngOnInit() {
            this.options = this.params.context;
        }

        onTap({ index }: ItemEventData) {
            this.params.closeCallback(this.options[index]);
        }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-cardview":{"name":"nativescript-material-cardview","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-cardview
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-cardview@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Android migration to AndroidX

    \n

    For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.\ninside App_ressources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdc="nativescript-material-cardview" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdc=\"nativescript-material-cardview\">
        <StackLayout horizontalAlignment=\"center\">
            <mdc:CardView width=\"100\" height=\"100\"/>
            <mdc:CardView elevation=\"5\" rippleColor=\"red\"  width=\"100\" height=\"100\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdccardview {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialCardViewModule } from \"nativescript-material-cardview/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialCardViewModule,
            ...
        ],
        ...
    })
    \n
    <MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"></MDCardView>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import CardViewPlugin from 'nativescript-material-cardview/vue';

    Vue.use(CardViewPlugin);
    \n
    <MDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript StackLayout

    \n

    Attributes

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the cardview.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-floatingactionbutton":{"name":"nativescript-material-floatingactionbutton","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-floatingactionbutton
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-floatingactionbutton@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdf="nativescript-material-floatingactionbutton" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdf=\"nativescript-material-floatingactionbutton\">
        <StackLayout horizontalAlignment=\"center\">
            <mdf:FloatingActionButton src=\"res://ic_action_add\"/>
            <mdf:FloatingActionButton elevation=\"5\" src=\"res://ic_action_add\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdcfloatingactionbutton {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    NativeScript + Angular

    \n
    import { registerElement } from '@nativescript/angular/element-registry';
    import { FloatingActionButton } from 'nativescript-material-floatingactionbutton';
    registerElement('MDFloatingActionButton', () => FloatingActionButton);
    \n
    <MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"></MDFloatingActionButton>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import FloatingActionButtonPlugin from 'nativescript-material-floatingactionbutton/vue';

    Vue.use(FloatingActionButtonPlugin);
    \n
    <MDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript Button so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • src optional
      • \n
    \n

    An attribute to set the floatingactionbutton icon. For now FAB only support images as icon

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the floatingactionbutton.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-bottomnavigationbar":{"name":"nativescript-material-bottomnavigationbar","version":"3.3.2","license":"Apache-2.0","readme":"

    Nativescript Material Bottom Navigation Bar

    \n

    Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.

    \n

    \"npm\" \"npm\"

    \n\"iOS\"\n

    Contents

    \n
      \n
    1. Installation
      2. \n
    2. Usage with Javascript
      3. \n
    3. Usage with Angular
      4. \n
    4. Usage with Vue
      5. \n
    5. Css Styling
      6. \n
    6. API
      7. \n
    \n

    Prerequisites / Requirements

    \n

    You need the version of NS6 or later to use this plugin.

    \n

    Installation

    \n
    tns plugin add nativescript-material-bottomnavigationbar
    \n

    NEW FEATURES

    \n
      \n
    • Badge now are supported using the method: showBadge(index, value)\n
        \n
      • NOTE: if you want to show a badge as a red dot no value should be passed to the function.
        • \n
      \n
      • \n
    \n

    Usage

    \n

    Before start using the plugin you need to add the icons for Android & iOS in your App_Resources\u001d directory.

    \n

    XML

    \n

    You can set the tabs using the tabs property

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"nativescript-material-bottomnavigationbar\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              tabs=\"{{ tabs }}\"
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >    </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n
    import { EventData } from '@nativescript/core/data/observable';
    import { Page } from '@nativescript/core/ui/page';
    import { BottomNavigationTab, TabSelectedEventData } from 'nativescript-material-bottomnavigationbar';

    // Event handler for Page 'loaded' event attached in main-page.xml
    export function pageLoaded(args: EventData) {
        // Get the event sender
        let page = <Page>args.object;
        page.bindingContext = {
            tabs: [
                new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
                new BottomNavigationTab({
                    title: 'Second',
                    icon: 'res://ic_view_list',
                    isSelectable: false
                }),
                new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
            ]
        };
    }

    export function tabSelected(args: TabSelectedEventData) {
        console.log('tab selected ' + args.newIndex);
    }
    \n

    or you can add the tabs directly in your xml view

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:mdc=\"nativescript-material-bottomnavigationbar\"
          loaded=\"pageLoaded\"
          class=\"page\">
        <GridLayout rows=\"*, auto\">
            <StackLayout row=\"0\">
                <Label text=\"content\"></Label>
            </StackLayout>
            <mdc:BottomNavigationBar
              activeColor=\"green\"
              inactiveColor=\"red\"
              backgroundColor=\"black\"
              tabSelected=\"tabSelected\"
              row=\"1\"
            >
              <mdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" />
              <mdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" />
              <mdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" />
            </mdc:BottomNavigationBar>
        </GridLayout>
    </Page>
    \n

    Angular

    \n

    First you need to include the NativeScriptMaterialBottomNavigationBarModule in your app.module.ts\u001b`

    \n
    import { NativeScriptMaterialBottomNavigationBarModule} from \"nativescript-material-bottomnavigationbar/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialBottomNavigationBarModule
        ],
        ...
    })
    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <BottomNavigationBar
            [tabs]=\"tabs\"
            activeColor=\"red\"
            inactiveColor=\"yellow\"
            backgroundColor=\"black\"
            (tabSelected)=\"onBottomNavigationTabSelected($event)\"
            (tabPressed)=\"onBottomNavigationTabPressed($event)\"
            row=\"1\"
        >    </BottomNavigationBar>
    </GridLayout>
    \n

    or you can declare the BottomNavigationTab in your html directly

    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <BottomNavigationBar
            activeColor=\"red\"
            inactiveColor=\"yellow\"
            backgroundColor=\"black\"
            (tabSelected)=\"onBottomNavigationTabSelected($event)\"
            (tabPressed)=\"onBottomNavigationTabPressed($event)\"
            row=\"1\"
        >
            <BottomNavigationTab title=\"First\" icon=\"res://ic_home\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" [isSelectable]=\"false\"></BottomNavigationTab>
            <BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\"></BottomNavigationTab>
        </BottomNavigationBar>
    </GridLayout>
    \n

    Vue

    \n

    If you want to use this plugin with Vue, do this in your app.js or main.js:

    \n
    import BottomNavigationBar from 'nativescript-material-bottomnavigationbar/vue';

    Vue.use(BottomNavigationBar);
    \n

    This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

    \n
    <GridLayout rows=\"*, auto\">
        <StackLayout row=\"0\">
            <label text=\"content\"></label>
        </StackLayout>
        <MDBottomNavigationBar activeColor=\"red\" inactiveColor=\"yellow\" backgroundColor=\"black\" @tabSelected=\"onBottomNavigationTabSelected\" row=\"1\">
            <MDBottomNavigationTab title=\"First\" icon=\"ic_home\" />
            <MDBottomNavigationTab title=\"Second\" icon=\"ic_view_list\" isSelectable=\"false\" />
            <MDBottomNavigationTab title=\"Third\" icon=\"ic_menu\" />
        </MDBottomNavigationBar>
    </GridLayout>
    \n

    You can find more information of how to use nativescript plugins with Vue Here!

    \n

    CSS Styling

    \n

    You can also use your css file to set or change the activeColor\u001d, inactiveColor & backgroundColor of the Bottom Navigation Bar.

    \n
    .botom-nav {
        active-color: green;
        inactive-color: black;
        background-color: blue;
    }
    \n

    API

    \n
      \n
    1. BottomNavigationBar
      2. \n
    2. BottomNavigationTab
      3. \n
    \n
      \n
    • Properties (bindable): Properties settable through XML/HTML
      • \n
    • Properties (internal): Properties accessible through JS/TS instance
      • \n
    • Events: Event properties settable thew XML/HTML
      • \n
    \n

    Bottom Navigation Bar

    \n

    Properties (bindable)

    \n

    Properties settable through XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    tabstrue[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
    titleVisibilityfalseTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColorfalse"black"StringColor of the BottomNavigationTab when it's selected
    inactiveColorfalse"gray"StringColor of the BottomNavigationTab when it's not selected
    backgroundColorfalse"white"StringColor of the BottomNavigation background
    \n

    Properties (internal)

    \n

    Properties accessible through JS/TS instance

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    items[]Array<BottomNavigationTab>Array containing the tabs for the BottomNavigationBar
    selectedTabIndex0NumberIndex of the selected tab
    titleVisibilityTitleVisibility.SelectedTitleVisibilityTitle Visibility for each BottomNavigationTab
    activeColornew Color('black')ColorColor of the BottomNavigationTab when it's selected
    inactiveColornew Color('gray')ColorColor of the BottomNavigationTab when it's not selected
    backgroundColornew Color('white')ColorColor of the BottomNavigation background
    \n

    Events

    \n

    Event properties settable thew XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    tabPressed(args: TabPressedEventData): voidFunction fired every time the user tap a tab with isSelectable: false
    tabSelected(args: TabSelectedEventData): voidFunction fired every time the user select a new tab
    tabReselected(args: TabReselectedEventData): voidFunction fired every time the user select a tab that is already selected
    \n

    Methods

    \n

    Methods accessible through JS/TS instance

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    selectTab(index: number)voidSelect a tab programmatically
    showBadge(index: number, value?: number)voidShow a badge for an specific tab
    \n

    Bottom Navigation Tab

    \n

    Properties (bindable)

    \n

    Properties settable through XML/HTML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyRequiredDefaultTypeDescription
    titletruenullstringTitle of the tab
    icontruenullstringIcon of the tab
    isSelectablefalsetruebooleanDetermine if the tab can be selected or not
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@badideas/nativescript-push":{"name":"@badideas/nativescript-push","version":"1.2.4","license":"Apache-2.0","readme":"

    [npm-image]:http://img.shields.io/npm/v/@badideas/nativescript-push.svg\n[npm-url]:https://npmjs.org/package/@badideas/nativescript-push\n[downloads-image]:http://img.shields.io/npm/dm/@badideas/nativescript-push.svg

    \n

    This plugin is a fork of nativescript-community/push, which was an "extract" of the messaging part of nativescript-plugin-firebase\nIt is only for people wanting to use firebase as less as possible ! No firebase on iOS!!!

    \n

    Thanks to Eddy for allowing this!

    \n

    Android

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download\ngoogle-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

    \n

    There is a little quirk: you will currently not get the title and body if the notification was received while the application was in the background, but you will get the data payload.

    \n

    iOS

    \n

    Enable push support in Xcode

    \n

    Open /platforms/ios/yourproject.xcworkspace (!) and go to your project's target and head over to "Capabilities" to switch this on (if it isn't already):

    \n\"Push\n
    \n

    Without this enabled you will receive push messages in the foreground, but NOT in the background / when the app is killed.

    \n
    \n

    Copy the entitlements file

    \n

    The previous step created a the fileplatforms/ios/YourAppName/(Resources/)YourAppName.entitlements.\nCopy that file to app/App_Resources/iOS/app.entitlements (if it doesn't exist yet, otherwise merge its contents),\nso it's not removed when you remove and re-add the iOS platform. The relevant content for background push in that file is:

    \n
    \t<key>aps-environment</key>
    \t<string>development</string>
    \n
    \n

    Note that the filename should be app.entitlements, see the path above.

    \n
    \n

    Configure push notifications in Info.plist

    \n

    Tell the plugin to allow an external push provider by adding this to App_Resources/iOS/Info.plist (without this, the push token will always be undefined!):

    \n
    <key>UseExternalPushProvider</key>
    <true/>
    \n

    And to allow processing when a background push is received, add this as well:

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>remote-notification</string>
    </array>
    \n

    The end result should look like this.

    \n

    \n

    API

    \n

    init

    \n

    In your main application JS file, you must call init().

    \n
    import * as messaging from '@badideas/nativescript-push';
    messaging.init();
    \n

    areNotificationsEnabled

    \n

    On both iOS and Android the user can disable notifications for your app.\nIf you want to check the current state of this setting, you can do:

    \n
    import * as messaging from \"@badideas/nativescript-push\";

    console.log(`Notifications enabled? ${messaging.areNotificationsEnabled()}`);
    \n

    registerForPushNotifications

    \n

    The easiest way to register for (receiving) push notifications is calling registerForPushNotifications, and passing in a few handlers:

    \n
    import * as messaging from \"@badideas/nativescript-push\";

    messaging.registerForPushNotifications({
      onPushTokenReceivedCallback: (token: string): void => {
        console.log(\"Firebase plugin received a push token: \" + token);
      },

      onMessageReceivedCallback: (message: messaging.Message) => {
        console.log(\"Push message received:\", message));
      },

      // Whether you want this plugin to automatically display the notifications or just notify the callback. Currently used on iOS only. Default true.
      showNotifications: true,

      // Whether you want this plugin to always handle the notifications when the app is in foreground. Currently used on iOS only. Default false.
      showNotificationsWhenInForeground: true
    }).then(() => console.log(\"Registered for push\"));
    \n
    \n

    Any pending notifications (while your app was not in the foreground) will trigger the onMessageReceivedCallback handler.

    \n
    \n
    \n

    With the token received in onPushTokenReceivedCallback you can send a notification to this device.

    \n
    \n

    getCurrentPushToken

    \n

    If - for some reason - you need to manually retrieve the current push registration token of the device, you can do:

    \n
    import * as messaging from \"@badideas/nativescript-push\";

    messaging.getCurrentPushToken()
        .then(token => console.log(`Current push token: ${token}`));
    \n

    Interactive notifications (iOS only for now)

    \n

    To register the app to receive interactive pushes you need to call messaging.registerForInteractivePush(model).\nAnd you may hook to the model.onNotificationActionTakenCallback callback to know what action the user took interacting with the notification.

    \n

    Each action has either type button or input, and you can set options to do any or all of:

    \n
      \n
    • Launch the app: foreground.
      • \n
    • Only allow the action when the device is unlocked: authenticationRequired.
      • \n
    • Make the text red to indicate something will be removed/deleted/killed: destructive.
      • \n
    \n

    Consider this example, where an interactive push notification is received which the user expands and picks the fourth option.\nThey then type their reply, and (because of how the action was configured) the app launches and captures the reply.

    \n

    \"Interactive \"Interactive \"Interactive \"Interactive

    \n
    import * as messaging from \"@badideas/nativescript-push\";

    const model = new messaging.PushNotificationModel();
    model.iosSettings = new messaging.IosPushSettings();
    model.iosSettings.badge = false;
    model.iosSettings.alert = true;

    model.iosSettings.interactiveSettings = new messaging.IosInteractivePushSettings();
    model.iosSettings.interactiveSettings.actions = [
      {
        identifier: \"OPEN_ACTION\",
        title: \"Open the app (if closed)\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground
      },
      {
        identifier: \"AUTH\",
        title: \"Open the app, but only if device is not locked with a passcode\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground | messaging.IosInteractiveNotificationActionOptions.authenticationRequired
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply without opening the app\",
        type: \"input\",
        submitLabel: \"Fire!\",
        placeholder: \"Load the gun...\"
      },
      {
        identifier: \"INPUT_ACTION\",
        title: \"Tap to reply and open the app\",
        options: messaging.IosInteractiveNotificationActionOptions.foreground,
        type: \"input\",
        submitLabel: \"OK, send it\",
        placeholder: \"Type here, baby!\"
      },
      {
        identifier: \"DELETE_ACTION\",
        title: \"Delete without opening the app\",
        options: messaging.IosInteractiveNotificationActionOptions.destructive
      }
    ];

    model.iosSettings.interactiveSettings.categories = [{
      identifier: \"GENERAL\"
    }];

    model.onNotificationActionTakenCallback = (actionIdentifier: string, message: messaging.Message) => {
      console.log(`onNotificationActionTakenCallback fired! Message: ${JSON.stringify(message)}, Action taken: ${actionIdentifier}`);
    };

    messaging.registerForInteractivePush(model);
    \n

    To send an interactive push, add the "category" property to the notification, with a value corresponding to the category defined in the model you've registered in the app.\nThe payload to trigger the notification in the screenshots above is:

    \n
    {
      \"aps\": {
        \"alert\": {
          \"title\": \"Realtime Custom Push Notifications\",
          \"subtitle\": \"Now with iOS 10 support!\",
          \"body\": \"Add multimedia content to your notifications\"
        },
        \"sound\": \"default\",
        \"badge\": 1,
        \"category\": \"GENERAL\",
        \"showWhenInForeground\": true,
        \"data\": {
          \"foo\": \"bar\"
        }
      }
    }
    \n
    \n

    IMPORTANT Use the click_action only for push notifications on iOS. When such a message is tapped in the Android notification center the app WON'T be opened. This will probably be fixed in the future.

    \n
    \n

    Testing push notifications

    \n

    iOS

    \n

    For testing notifications on iOS the easiest tool I found is Pusher:

    \n\"Pusher\"/\n

    Android

    \n

    For testing on Android I prefer using Postman to POST to the FCM REST API. Look at which headers you need to set, and how the payload needs to be added:

    \n

    \"Postman \"Postman

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-login":{"name":"nativescript-google-login","version":"1.4.0","license":"Apache-2.0","readme":"

    Nativescript Google Login

    \n

    \"npm\n\"NPM\"

    \n

    Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

    \n

    It is inspired by the plugin nativescript-social-login

    \n

    Works with Android X, iOS 13

    \n

    Screenshots

    \n

    Android

    \n

    \"Screenshot

    \n

    iOS

    \n

    \"Screenshot

    \n

    Dependencies

    \n

    iOS

    \n
    pod 'GoogleSignIn', '~> 5.0'
    \n

    Android

    \n
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
    \n

    Installation

    \n
    tns plugin add nativescript-google-login
    \n

    iOS

    \n

    Get an OAuth client ID

    \n

    Get an Oauth client id from the Google website

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleTypeRole</key>
    \t\t<string>Editor</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
    \t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
    \t\t\t<!-- Get it from your GoogleService-Info.plist -->
    \t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t</array>
    \t</dict>
    </array>
    \n

    Usage

    \n
    ```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
    \n

    Result

    \n
    ```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-local-notifications":{"name":"nativescript-custom-local-notifications","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/Obsessive/nativescript-custom-local-notifications/blob/master/LICENSE"},"readme":"

    NativeScript Local Notifications Plugin with custom sounds for android

    \n

    The Local Notifications plugin allows your app to show notifications when the app is not running.\nJust like remote push notifications, but a few orders of magnitude easier to set up.

    \n

    For Custom sound,\nAdd a folder called 'raw' in /app/App_Resources/Android and add your custom sounds.

    \n

    Note

    \n

    This repository is a fork of the local notifications plugin by Eddy Verbruggen (eddyverbruggen). So big thanks to Eddy Verbruggen - Team Obsessive.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-custom-local-notifications
    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),\nor you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Default 0.
    titleThe title which is shown in the statusbar. Default empty.
    bodyThe text below the title. Default empty.
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default 'now'.
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundCurrently this is only used on Android where you can set this to null to suppress the sound. Default sound is the sound file located at /Appresources/raw/notify.mp3
    \n
    LocalNotifications.schedule([{
        id: 1,
        title: 'The first title',
        body: 'The first  body',
        ticker: 'The ticker',
        badge: 1,
        sound: \"sound1\", //sound1 from /Appresources/raw/ folder
        at: new Date(new Date().getTime() + (20 * 1000)) 
      }]).then(
          function() {
            console.log(\"Notification scheduled 1\");
          },
          function(error) {
            console.log(\"scheduling error: \" + error);
          }
      );
    \n
      LocalNotifications.schedule([{
        id: 1,
        title: 'The title',
        body: 'The body',
        ticker: 'The ticker',
        badge: 1,
        sound: null, // suppress sound on Android
        at: new Date(new Date().getTime() + (10 * 1000)) // 10 seconds from now
      }]).then(
          function() {
            console.log(\"Notification scheduled\");
          },
          function(error) {
            console.log(\"scheduling error: \" + error);
          }
      )
    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
      LocalNotifications.addOnMessageReceivedCallback(
          function (notification) {
            console.log(\"ID: \" + notification.id);
            console.log(\"Title: \" + notification.title);
            console.log(\"Body: \" + notification.body);
          }
      ).then(
          function() {
            console.log(\"Listener added\");
          }
      )
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n

    Note that all functions have an error handler as well (see schedule), but to keep things readable we won't repeat ourselves.

    \n
      LocalNotifications.getScheduledIds().then(
          function(ids) {
            console.log(\"ID's: \" + ids);
          }
      )
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
      LocalNotifications.cancel(5 /* the ID */).then(
          function(foundAndCanceled) {
              if (foundAndCanceled) {
                console.log(\"OK, it's gone!\");
              } else {
                console.log(\"No ID 5 was scheduled\");
              }
          }
      )
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
      LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
      LocalNotifications.requestPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
      LocalNotifications.hasPermission().then(
          function(granted) {
            console.log(\"Permission granted? \" + granted);
          }
      )
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-dialogs":{"name":"nativescript-material-dialogs","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    NativeScript Material Dialogs

    \n

    Use the Material Design Dialogs in your {N} app

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-dialogs
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-dialogs@2.5.4
      • \n
    \n

    Changelog

    \n

    Usage

    \n

    Uses the same API as Nativescript Dialogs

    \n

    Adds one option for alert:

    \n
      \n
    • view : can be a Nativescript View or a path to to XML component. The custom view will be added to the dialog. Possibilities become endless
      • \n
    \n

    TS

    \n
    import { login, alert, prompt } from \"nativescript-material-dialogs\";

    alert(\"Your message\").then(()=> {
        console.log(\"Dialog closed!\");
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkedin-oauth2":{"name":"nativescript-linkedin-oauth2","version":"1.0.3","license":"MIT","readme":"

    LinkedIn OAuth 2 Plugin for NativeScript

    \n

    Usage

    \n

    If you want a quickstart, you can start with one of two demo apps:

    \n\n

    Bootstrapping

    \n

    When your app starts up, you'll have to register one or more auth providers to use with the nativescript-oauth2 plugin. You'll use the code below to register the providers.

    \n

    NativeScript Core

    \n

    If you are using NativeScript Core, open app.ts and add the following registration code before application.start();

    \n

    NativeScript with Angular

    \n

    If you are using Angular AND you are NOT using <page-router-outlet, you'll need to enable frames in order for the plugin to open up a new native page with a login screen. To do that open your main.ts file. You will need to explicitly use frames, so make sure to pass an options object to platformNativeScriptDynamic with the createFrameOnBootstrap flag set to true, like this.

    \n
    // main.ts
    platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(
      AppModule
    );
    \n

    You don't need to do this if you already have <page-router-outlet> in your component.

    \n

    then add add the registration code below somewhere before you call login, most likely in your Auth service, as in the demo-angular project.

    \n

    NativeScript-Vue

    \n

    If you are using NativeScript-Vue, then you'll have to add this registration code somewhere when your app bootstraps. A Vue demo app is included with the GitHub repo.

    \n
    // This is the provider registration example code

    import { configureTnsOAuth } from 'nativescript-oauth2';

    import {
      TnsOaProvider,
      TnsOaProviderLinkedIn,
      TnsOaProviderOptions
    } from 'nativescript-oauth2/providers';

    function configureOAuthProviderLinkedIn(): TnsOaProvider {
      const linkedinProviderOptions: TnsOaProviderOptions = {
        clientId: '691208554415641',
        redirectUri: 'https://www.linkedin.com/connect/login_success.html',
        scopes: ['email']
      };
      const linkedinProvider = new TnsOaProviderLinkedIn(linkedinProviderOptions);
      return linkedinProvider;
    }

    configureTnsOAuth(configureOAuthProviderLinkedIn());
    \n

    The plugin comes with helpful interfaces that you can implement for the providers as well as the options that can be passed into each provider's constructor. You don't have to use these interfaces, but they are helpful guides. The code above shows these interfaces.

    \n

    The last call to configureTnsOAuth() takes an array of providers and registers them as available for use.

    \n

    Logging in

    \n

    When you're ready to login, or as a response to a tap event on a login button, you can create a new instance of the TnsOAuthClient and call loginWithCompletion() on the instance.

    \n
    import { TnsOAuthClient, ITnsOAuthTokenResult } from 'nativescript-oauth2';

    const client = new TnsOAuthClient(providerType);

    client.loginWithCompletion((accessCode: string, error) => {
      if (error) {
        console.error('back to main page with error: ');
        console.error(error);
      } else {
        console.log('back to main page with access code: ');
        console.log(accessCode);
      }
    });
    \n

    After login is done, the completion handler will be called with the results.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-liquid-loader":{"name":"nativescript-liquid-loader","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-liquid-loader/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Liquid-Loader

    \n

    Nativescript plugin for a slick liquid loading animation.

    \n

    Android Only - API 18+

    \n

    IMPORTANT

    \n

    To use this plugin you need to modify the AndroidManifest.xml located in App_Resources/Android.\nYou need the tools namespace, xmlns:tools="http://schemas.android.com/tools", added to the top of the file in the <manifest> tag.

    \n

    You also need to add tools:overrideLibrary="com.gospelware.liquidbutton" to the <uses-sdk> tag.

    \n

    For more info see the AndroidManifest.xml in the demo app.

    \n

    Sample

    \n

    \"Demo\"

    \n

    Native Library

    \n

    LiquidButton

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    tns plugin add nativescript-liquid-loader

    \n

    Usage

    \n

    XML:

    \n
    <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:LiquidLoader=\"nativescript-liquid-loader\" 
      loaded=\"pageLoaded\">
      <ActionBar title=\"Liquid Loader\" />
      <StackLayout>

        <LiquidLoader:LiquidLoader id=\"liquidLoader\" height=\"400\" pourFinish=\"{{ pourFinished }}\" />

        <Button text=\"Start Animation\" tap=\"{{ startThePour }}\" />

      </StackLayout>
    </Page>
    \n

    API

    \n
      \n
    • startPour() - Starts the animation.
      • \n
    • pourFinish() - Event executed when the animation finishes.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-stripe":{"name":"@triniwiz/nativescript-stripe","version":"8.0.3","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-button":{"name":"nativescript-material-button","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-button
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-button@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdb="nativescript-material-button" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdb=\"nativescript-material-button\">
        <StackLayout horizontalAlignment=\"center\">
            <mdb:Button text=\"raised button\"/>
            <mdb:Button variant=\"flat\" text=\"flat button\"/>
            <mdb:Button variant=\"text\" text=\"text button\"/>
            <mdb:Button elevation=\"5\" rippleColor=\"red\" text=\"raised custom button\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdbutton {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialButtonModule } from \"nativescript-material-button/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialButtonModule,
            ...
        ],
        ...
    })
    \n
    <MDButton rippleColor=\"blue\" text=\"text button\"></MDButton>
    \n

    NativeScript + Vue

    \n
    import Vue from 'nativescript-vue';
    import ButtonPlugin from 'nativescript-material-button/vue';

    Vue.use(ButtonPlugin);
    \n
    <MDButton rippleColor=\"blue\" text=\"text button\"/>
    \n

    Attributes

    \n

    Inherite from Nativescript Button so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the button. Can be flat or text. No value means raised button

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the button.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-progress":{"name":"nativescript-material-progress","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-progress
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-progress@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdp="nativescript-material-progress" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdp=\"nativescript-material-progress\">
        <StackLayout horizontalAlignment=\"center\">
            <mdp:Progress value=\"50\" maxValue=\"100\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdprogress {
        ripple-color: blue;
        elevation: 4;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialProgressModule } from \"nativescript-material-progress/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialProgressModule,
            ...
        ],
        ...
    })
    \n
    <MDProgress v-model=\"value\" maxValue=\"100\"></MDProgress>
    \n

    NativeScript + Vue

    \n
    import ProgressPlugin from 'nativescript-material-progress/vue';

    Vue.use(ProgressPlugin);
    \n
    <MDProgress value=\"50\" maxValue=\"100\"></MDProgress>
    \n

    Attributes

    \n

    Inherite from Nativescript Progress so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • elevation optional
      • \n
    \n

    An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

    \n
      \n
    • rippleColor optional
      • \n
    \n

    An attribute to set the ripple color of the progress.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-textview":{"name":"nativescript-material-textview","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-textview
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-textview@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mdt="nativescript-material-textview" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdt=\"nativescript-material-textview\">
        <StackLayout horizontalAlignment=\"center\">
            <mdt:TextView text=\"raised textview\"/>
            <mdt:TextView variant=\"flat\" text=\"flat textview\"/>
            <mdt:TextView variant=\"text\" text=\"text textview\"/>
            <mdt:TextView elevation=\"5\" rippleColor=\"red\" text=\"raised custom textview\"/>
       </StackLayout>
    </Page>
    \n

    CSS

    \n
    mdctextview {
        ripple-color: blue;
        elevation: 4;
        stroke-color: blue;             // the border color when active
        stroke-inactive-color: green;   // the border color when inactive
        floating-color: blue;           // the floating placeholder color when active
        floating-inactive-color: green; // the floating placeholder color when inactive
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTextViewModule } from \"nativescript-material-textview/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTextViewModule,
            ...
        ],
        ...
    })
    \n
    <MDTextView  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"
            (textChange)=\"onTextChange($event)\">    </MDTextView>
    \n

    NativeScript + Vue

    \n
    import TextViewPlugin from 'nativescript-material-textview/vue';

    Vue.use(TextViewPlugin);
    \n
    <MDTextView helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"
            hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"
            @textChange=\"onTextChange\"/>
    \n

    Also, you can bind the text to some instance data using the v-model directive:

    \n
    <MDTextView v-model=\"value\" />
    \n

    Attributes

    \n

    Inherite from Nativescript TextView so it already has all the same attributes

    \n

    Attributes

    \n
      \n
    • variant optional
      • \n
    \n

    An attribute to set the variant of the textview. Can be outline or underline or filled. No value means underline textview

    \n
      \n
    • errorColor optional
      • \n
    \n

    An attribute to set the error color of the textview.

    \n
      \n
    • helper optional
      • \n
    \n

    An attribute to set the helper text of the textview.

    \n
      \n
    • floating optional
      • \n
    \n

    A boolean attribute to set the floating state of the textview.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/contacts":{"name":"@nativescript/contacts","version":"2.1.0","license":"Apache-2.0","readme":"

    @nativescript/contacts

    \n

    Easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.

    \n
    npm install @nativescript/contacts
    \n

    Usage

    \n

    iOS Settings

    \n

    Add following key to Info.plist often found in App_Resources/iOS/Info.plist

    \n
    <key>NSContactsUsageDescription</key>
    <string>Kindly provide permission to access contacts on your device.</string>
    \n

    User will be asked for permissions when contacts are accessed by the app.

    \n

    Since iOS 13, you will also need entitlements. If you do not have App_Resources/iOS/app.entitlements yet, you can add the file with at least these contents:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
      <dict>
        <key>com.apple.developer.contacts.notes</key>
        <true/>
      </dict>
    </plist>
    \n

    Android Settings

    \n

    From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your AndroidManifest.xml:

    \n
    <uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    <uses-permission android:name=\"android.permission.READ_CONTACTS\" />
    <uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
    <uses-permission android:name=\"android.permission.GLOBAL_SEARCH\" />
    \n

    You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the nativescript-permissions plugin):

    \n
    import { Contact } from '@nativescript/contacts';
    import { requestPermissions } from 'nativescript-permissions';

    const contact = new Contact();
    // build a new contact...

    requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.READ_CONTACTS, android.Manifest.permission.WRITE_CONTACTS, android.Manifest.permission.GLOBAL_SEARCH], \"I need these permissions because I'm cool\").then(() => {
        contact.save();
    });
    \n

    Methods

    \n

    getContact: Pick one contact and bring back its data.

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts.getContact().then(function (args) {
    \t/// Returns args:
    \t/// args.data: Generic cross platform JSON object
    \t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

    \tif (args.response === 'selected') {
    \t\tconst contact = args.data; //See data structure below

    \t\t// lets say you wanted to grab first name and last name
    \t\tconsole.log(contact.name.given + ' ' + contact.name.family);

    \t\t//lets say you want to get the phone numbers
    \t\tcontact.phoneNumbers.forEach(function (phone) {
    \t\t\tconsole.log(phone.value);
    \t\t});

    \t\t//lets say you want to get the addresses
    \t\tcontact.postalAddresses.forEach(function (address) {
    \t\t\tconsole.log(address.location.street);
    \t\t});
    \t}
    });
    \n

    Save a new contact

    \n
    import { Contact, KnownLabel } from '@nativescript/contacts';
    import { ImageSource } from '@nativescript/core';

    const newContact = new Contact();
    newContact.name.given = 'John';
    newContact.name.family = 'Doe';
    newContact.phoneNumbers.push({
    \tlabel: KnownLabel.HOME,
    \tvalue: '123457890',
    }); // See below for known labels
    newContact.phoneNumbers.push({ label: 'My Custom Label', value: '11235813' });
    newContact.photo = ImageSource.fromFileOrResource('~/photo.png');
    newContact.save();
    \n

    Update an existing contact

    \n
    import { Application, ImageSource } from '@nativescript/core';
    import { Contacts } from '@nativescript/contacts';

    Contacts.getContact().then(function (args) {
    \tif (args.response === 'selected') {
    \t\tconst contact = args.data;
    \t\tcontact.name.given = 'Jane';
    \t\tcontact.name.family = 'Doe';

    \t\tImageSource.fromUrl('http://www.google.com/images/errors/logo_sm_2.png').then(function (src) {
    \t\t\tcontact.photo = src;
    \t\t\tcontact.save();
    \t\t});
    \t}
    });
    \n

    Delete a contact

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts.getContact().then(function (args) {
    \t/// args.data: Generic cross platform JSON object
    \t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

    \tif (args.response === 'selected') {
    \t\tconst contact = args.data; //See data structure below
    \t\tcontact.delete();
    \t}
    });
    \n

    Check if contact is Unified/Linked (iOS Specific)

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts.getContact().then(function (args) {
    \t/// args.data: Generic cross platform JSON object
    \t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

    \tif (args.response === 'selected') {
    \t\tconst contact = args.data; //See data structure below
    \t\tconsole.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
    \t}
    });
    \n

    getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

    \n
    import { Contacts } from '@nativescript/contacts';

    /*
      contactFields contains the fields to retrieve from native backend to reduce processing time
      const contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
    */
    const contactFields = ['name', 'phoneNumbers'];

    Contacts.getContactsByName('Hicks', contactFields).then(
    \tfunction (args) {
    \t\tconsole.log('getContactsByName Complete');
    \t\t/// Returns args:
    \t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
    \t\t/// args.reponse: \"fetch\"
    \t},
    \tfunction (err) {
    \t\tconsole.log('Error: ' + err);
    \t}
    );
    \n

    getAllContacts: Find all contacts. Returns an array of contact data.

    \n
    import { Contacts } from '@nativescript/contacts';

    /*
      Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
      const contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

      If not supplied, all available contactFields will be returned.
    */
    const contactFields = ['name', 'phoneNumbers'];

    Contacts.getAllContacts(contactFields).then(
    \tfunction (args) {
    \t\tconsole.log('getAllContacts Complete');
    \t\t/// Returns args:
    \t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
    \t\t/// args.reponse: \"fetch\"
    \t},
    \tfunction (err) {
    \t\tconsole.log('Error: ' + err);
    \t}
    );
    \n

    getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

    \n
    import { Contacts } from '@nativescript/contacts';

    const contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

    Contacts.getContactById(contactId).then(
    \tfunction (args) {
    \t\tconsole.log('getContactById Complete');
    \t\t/// Returns args:
    \t\t/// args.data: Generic cross platform JSON object, null if no contacts were found.
    \t\t/// args.reponse: \"fetch\"
    \t},
    \tfunction (err) {
    \t\tconsole.log('Error: ' + err);
    \t}
    );
    \n

    getGroups: Find groups. Returns an array of group data.

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts
    \t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
    \t.then(
    \t\tfunction (args) {
    \t\t\tconsole.log('getGroups Complete');
    \t\t\t/// Returns args:
    \t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
    \t\t\t/// args.reponse: \"fetch\"

    \t\t\tif (args.data === null) {
    \t\t\t\tconsole.log('No Groups Found!');
    \t\t\t} else {
    \t\t\t\tconsole.log('Group(s) Found!');
    \t\t\t}
    \t\t},
    \t\tfunction (err) {
    \t\t\tconsole.log('Error: ' + err);
    \t\t}
    \t);
    \n

    Save a new group

    \n
    import { Group } from '@nativescript/contacts';

    const groupModel = new Group();
    groupModel.name = 'Test Group';
    //Save Argument (boolean)
    //iOS: [false=> Use Local Container, true=> Use Default Container]
    //Android: will always be true, setting this value will not affect android.
    groupModel.save(false);
    \n

    Delete a group

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts.getGroups('Test Group').then(
    \tfunction (args) {
    \t\tconsole.log('getGroups Complete');
    \t\tconsole.log(JSON.stringify(args));
    \t\t/// Returns args:
    \t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
    \t\t/// args.reponse: \"fetch\"

    \t\tif (args.data !== null) {
    \t\t\tconsole.log('Group(s) Found!');
    \t\t\targs.data[0].delete(); //Delete the first found group
    \t\t}
    \t},
    \tfunction (err) {
    \t\tconsole.log('Error: ' + err);
    \t}
    );
    \n

    Add Member To Group

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts.getContact().then(function (args) {
    \t/// args.data: Generic cross platform JSON object
    \t/// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

    \tif (args.response === 'selected') {
    \t\tconst contact = args.data; //See data structure below
    \t\tContacts.getGroups('Test Group').then(
    \t\t\tfunction (a) {
    \t\t\t\tif (a.data !== null) {
    \t\t\t\t\tconst group = a.data[0];
    \t\t\t\t\tgroup.addMember(contact);
    \t\t\t\t}
    \t\t\t},
    \t\t\tfunction (err) {
    \t\t\t\tconsole.log('Error: ' + err);
    \t\t\t}
    \t\t);
    \t}
    });
    \n

    Remove Member From Group

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts
    \t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
    \t.then(
    \t\tfunction (args) {
    \t\t\tif (args.data !== null) {
    \t\t\t\tconst group = args.data[0];

    \t\t\t\tContacts.getContactsInGroup(group).then(
    \t\t\t\t\tfunction (a) {
    \t\t\t\t\t\t/// Returns args:
    \t\t\t\t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
    \t\t\t\t\t\t/// args.reponse: \"fetch\"
    \t\t\t\t\t\tconsole.log('getContactsInGroup complete');

    \t\t\t\t\t\tif (a.data !== null) {
    \t\t\t\t\t\t\ta.data.forEach(function (c, idx) {
    \t\t\t\t\t\t\t\tgroup.removeMember(c);
    \t\t\t\t\t\t\t});
    \t\t\t\t\t\t}
    \t\t\t\t\t},
    \t\t\t\t\tfunction (err) {
    \t\t\t\t\t\tconsole.log('Error: ' + err);
    \t\t\t\t\t}
    \t\t\t\t);
    \t\t\t}
    \t\t},
    \t\tfunction (err) {
    \t\t\tconsole.log('Error: ' + err);
    \t\t}
    \t);
    \n

    getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

    \n
    import { Contacts } from '@nativescript/contacts';

    Contacts
    \t.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
    \t.then(
    \t\tfunction (args) {
    \t\t\tif (args.data !== null) {
    \t\t\t\tconst group = args.data[0];

    \t\t\t\tContacts.getContactsInGroup(group).then(
    \t\t\t\t\tfunction (a) {
    \t\t\t\t\t\tconsole.log('getContactsInGroup complete');
    \t\t\t\t\t\t/// Returns args:
    \t\t\t\t\t\t/// args.data: Generic cross platform JSON object, null if no groups were found.
    \t\t\t\t\t\t/// args.reponse: \"fetch\"
    \t\t\t\t\t},
    \t\t\t\t\tfunction (err) {
    \t\t\t\t\t\tconsole.log('Error: ' + err);
    \t\t\t\t\t}
    \t\t\t\t);
    \t\t\t}
    \t\t},
    \t\tfunction (err) {
    \t\t\tconsole.log('Error: ' + err);
    \t\t}
    \t);
    \n

    Single User Data Structure

    \n
    {
        id : \"\",
        name : {
            given: \"\",
            middle: \"\",
            family: \"\",
            prefix: \"\",
            suffix: \"\",
            displayname: \"\",
            phonetic : {
                given: \"\",
                middle: \"\",
                family: \"\"
            }
        },
        nickname : \"\",
        organization : {
            name: \"\",
            jobTitle: \"\",
            department: \"\",

            // Android Specific properties
            symbol: \"\",
            phonetic: \"\",
            location: \"\",
            type: \"\"
        },
        notes : \"\",
        photo: null, // {N} ImageSource instance

        phoneNumbers : [],
        emailAddresses : [],
        postalAddresses : [],
        urls : []
    }
    \n

    PhoneNumber / EmailAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        value: \"\"
    }
    \n

    Url structure

    \n
    {
        label: \"\",
        value: \"\"
    }
    \n

    PostalAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        location: {
            street: \"\",
            city: \"\",
            state: \"\",
            postalCode: \"\",
            country: \"\",
            countryCode: \"\"
        }
    }
    \n

    Known Labels (for Urls, Addresses and Phones)

    \n

    The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

    \n
      \n
    • HOME\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • WORK\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • OTHER\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • FAX_HOME\niOS - phone\nAndroid - phone
      • \n
    • FAX_WORK\niOS - phone\nAndroid - phone
      • \n
    • PAGER\niOS - phone\nAndroid - phone
      • \n
    • MAIN\niOS - phone\nAndroid - phone
      • \n
    • HOMEPAGE\niOS - url\nAndroid - url
      • \n
    • CALLBACK\nAndroid - phone
      • \n
    • CAR\nAndroid - phone
      • \n
    • COMPANY_MAIN\nAndroid - phone
      • \n
    • ISDN\nAndroid - phone
      • \n
    • OTHER_FAX\nAndroid - phone
      • \n
    • RADIO\nAndroid - phone
      • \n
    • TELEX\nAndroid - phone
      • \n
    • TTY_TDD\nAndroid - phone
      • \n
    • WORK_MOBILE\nAndroid - phone
      • \n
    • WORK_PAGER\nAndroid - phone
      • \n
    • ASSISTANT\nAndroid - phone
      • \n
    • MMS\nAndroid - phone
      • \n
    • FTP\nAndroid - url
      • \n
    • PROFILE\nAndroid - url
      • \n
    • BLOG\nAndroid - url
      • \n
    \n

    Those are the system labels but you can also use any custom label you want.

    \n

    Single Group Data Structure

    \n
    {
    \tid: '';
    \tname: '';
    }
    \n

    GetFetchResult Data Structure

    \n

    The object returned by contact fetch requests.

    \n
    {
      data: Contact[];
      response: string;
    }
    \n

    iOS

    \n

    See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

    \n

    NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n

    Credit

    \n

    All credit to original author Ryan Lebel for creating nativescript-contacts.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-extendedinfo":{"name":"nativescript-extendedinfo","version":"1.0.11","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-extendedinfo
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Plugin to get diverse device infos. This plugin caches results to make it faster.

    \n
    function isSimulator(): boolean;
    function getAppId(): Promise<string>;
    function getAppIdSync(): string;
    function getVersionName(): Promise<string>;
    function getVersionNameSync(): string;
    function getAppName(): Promise<string>;
    function getAppNameSync(): string;
    function getBuildNumber(): Promise<number>;
    function getBuildNumberSync(): number;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ratings":{"name":"nativescript-ratings","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Application Ratings

    \n

    This Telerik NativeScript plugin will prompt the user to rate your application after a defined amount of calls, or preferably, a defined amount of application opens.

    \n

    \"NativeScript

    \n

    Installation

    \n

    This plugin will work for both Android and iOS. To install it into your project, execute the following from your Command Prompt (Windows) or Terminal (Mac and Linux) with the project as the current working directory:

    \n
    tns plugin add nativescript-ratings
    \n

    Using the Demo Project

    \n

    This plugin has a demo project bundled with it. To give it a try without creating a fresh project, execute the following with the plugin directory as the current working directory:

    \n
    npm run setup
    npm run demo.ios
    npm run demo.android
    \n

    Running demo.ios or demo.android will run for the appropriate platform.

    \n

    Using the Ratings Plugin (TypeScript)

    \n

    The plugin is very basic. First, it must be included within your project like so:

    \n
    import { Ratings } from \"nativescript-ratings\";
    \n

    With the plugin imported it can be initialized like so:

    \n
    let ratings = new Ratings({
        id: \"appname-1.0.0\",
        showOnCount: 5,
        title: \"Please rate\",
        text: \"Will you please rate my app?\",
        agreeButtonText: \"Rate Now\",
        remindButtonText: \"Remind Me Later\",
        declineButtonText: \"No Thanks\",
        androidPackageId: \"com.nativescript.demo\",
        iTunesAppId: \"12345\"
    });
    \n

    Of the above configuration properties, only the title and text are required. All other properties have default values, which you can choose to override by including your own.

    \n

    To increase the show-counter, the init() function must be called like so:

    \n
    ratings.init();
    \n

    Finally, a prompt can be shown if the show-count matches what was defined in the configuration properties:

    \n
    ratings.prompt();
    \n

    If the remind button is pressed, the counter is reset and will show again when the values match.

    \n

    Resources

    \n

    NativeScript - https://www.nativescript.org

    \n

    The Polyglot Developer - https://www.thepolyglotdeveloper.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paint":{"name":"nativescript-paint","version":"2.1.0","license":"Apache-2.0","readme":"

    NativeScript 7.0+

    \n

    Use version 1.1.0 of the plugin

    \n

    NativeScript Paint

    \n

    \"apple\" \"android\"

    \n

    \"npm

    \n

    \"NPM\"

    \n

    This plugin allows the artist to create paintings in an app using opacity and width settings cross platform. On iOS, an Airbrush as well as a Paintbrush is available. With the Airbrush, you can control Airbrush Flow to make the paint effect change. This plugin would be useful to folks who need a more art-friendly type plugin. Use with the Color Picker plugin to enable color changes.

    \n

    \"demo\"

    \n

    Installation

    \n
    tns plugin add nativescript-paint
    \n

    Requiring the plugin

    \n
    import { PaintPad } from 'nativescript-paint';
    \n

    Using the PaintPad

    \n

    JavaScript

    \n
      \n
    1. Add the plugin to your xml
      2. \n
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:paint=\"nativescript-paint\">
    \n
      \n
    1. Create a PaintPad area
      2. \n
    \n
    <paint:PaintPad canvasColor=\"#fff\" id=\"paintPad\" margin=\"10\" width=\"280\" height=\"280\" drawColor=\"{{ drawColor }}\" drawWidth=\"{{ drawWidth }}\" airBrushFlow=\"{{ airBrushFlow }}\" drawOpacity=\"{{ drawOpacity }}\" />
    \n

    Angular

    \n
      \n
    1. Register the plugin in a module
      2. \n
    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('PaintPad', () => require('nativescript-paint').PaintPad);
    \n
      \n
    1. Add it to your markup
      2. \n
    \n
    <PaintPad
        canvasColor=\"#fff\"
         #PaintPad\t\t\t
         [drawColor]=\"drawColor\"
         [drawWidth]=\"drawWidth\"
         [airBrushFlow]=\"airBrushFlow\"
         [drawOpacity]=\"drawOpacity\"
    ></PaintPad>
    \n
      \n
    1. Reference the PaintPad by id to manipulate it
      2. \n
    \n
    @ViewChild('PaintPad') PaintPad: ElementRef;
    this.myPaintPad = this.PaintPad.nativeElement;
    \n

    Vue

    \n
      \n
    1. In main.js, register the element:
      2. \n
    \n
    Vue.registerElement('PaintPad', () => require('nativescript-paint').PaintPad);
    \n
      \n
    1. Use it in your app:
      2. \n
    \n
    <PaintPad
        canvasColor=\"#fff\"
        ref=\"paintPad\"
        :drawColor=\"drawColor\"
        :drawWidth=\"drawWidth\"
        :airBrushFlow=\"airBrushFlow\"
        :drawOpacity=\"drawOpacity\"
    />
    \n
      \n
    1. Reference the PaintPad by ref to manipulate it
      2. \n
    \n
    selectAirBrush() {
        this.$refs.paintPad.nativeView.setToolType(1);
    }
    \n

    Demos

    \n

    In /src, you can use npm scripts to run demos in vanilla JS, Angular and Vue. Run:

    \n

    npm run demo.ios or npm run demo-ng.ios or npm run demo-vue.ios. Reset the demos similarly, running npm run demo(-ng or -vue).reset.

    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.\njavascript Usage code snippets here)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    DAScratchPadFreeDrawView
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    drawWidth5width of the brush
    drawColor#3489dba hex code for color
    drawOpacity1 (iOS) or 255 (Android)on iOS, set this to between 0-1. On Android, between 0-255
    airBrushFlow0.7iOS only - how heavy the Airbrush paints
    getPaintingsave an image of your painting
    clearPaintingclear the paint area
    setToolType0iOS only - set 0 for Paintbrush, 1 for Airbrush
    \n

    Credits

    \n

    With gratitude to Brad Martin, author of the first drawing plugin NativeScript-Drawingpad, on which this plugin is heavily based, and to the help of Nathan Walker and Osei Fortune. ❤️

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-tabs":{"name":"nativescript-material-tabs","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-tabs
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n
    Material Design Spec
    \n

    Usage

    \n

    Plain NativeScript

    \n

    IMPORTANT: Make sure you include xmlns:mds="nativescript-material-tabs" on the Page element

    \n

    XML

    \n
    <Page xmlns:mdt=\"nativescript-material-tabs\">
        <mdt:Tabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <TabStrip>
                <TabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </TabStripItem>
            </TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
        </Tabs>
    </Page>
    \n

    CSS

    \n
    MDTabs.bottom-nav {
        background-color: orangered;
        color: gold;
        font-size: 18;
    }

    TabStripItem.tabstripitem-active {
        background-color: teal;
    }

    TabStripItem.tabstripitem-active:active {
        background-color: yellowgreen;
    }

    TabContentItem.first-tabcontent {
        background-color: seashell;
        color: olive;
    }
    TabContentItem.second-tabcontent {
        background-color: slategray;
        color: aquamarine;
    }
    TabContentItem.third-tabcontent {
        background-color: blueviolet;
        color: antiquewhite;
    }
    MDTabs TabStrip {
        highlight-color: red;
    }
    \n

    NativeScript + Angular

    \n
    import { NativeScriptMaterialTabsModule } from \"nativescript-material-slider/angular\";

    @NgModule({
        imports: [
            NativeScriptMaterialTabsModule,
            ...
        ],
        ...
    })
    \n
        <MDTabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <TabStrip>
                <TabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </TabStripItem>
            </TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
        </MDTabs>
    \n

    NativeScript + Vue

    \n
    import TabsPlugin from 'nativescript-material-slider/vue';

    Vue.use(TabsPlugin);
    \n
    <MDTabs selectedIndex=\"1\">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <TabStrip>
                <TabStripItem>
                    <Label text=\"Home\"></Label>
                    <Image src=\"font://&#xf015;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Account\"></Label>
                    <Image src=\"font://&#xf007;\" class=\"fas\"></Image>
                </TabStripItem>
                <TabStripItem class=\"special\">
                    <Label text=\"Search\"></Label>
                    <Image src=\"font://&#xf00e;\" class=\"fas\"></Image>
                </TabStripItem>
            </TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Home Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Account Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
            <TabContentItem>
                <GridLayout>
                    <Label text=\"Search Page\" class=\"h2 text-center\"></Label>
                </GridLayout>
            </TabContentItem>
        </MDTabs>
    \n

    Attributes

    \n

    Inherite from Nativescript Tabs so it already has all the same attributes

    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    itemsArrayGets or sets the items of the BottomNavigation.
    selectedIndexnumberGets or sets the selectedIndex of the BottomNavigation.
    swipeEnabledbooleanGets or sets the swipe enabled state of the Tabs.
    offscreenTabLimitnumberGets or sets the number of offscreen preloaded tabs of the Tabs.
    tabStripTabStripGets or sets the tab strip of the BottomNavigation.
    tabsPosition"top", "bottom"Gets or sets the position state of the Tabs. Default value: top
    iOSTabBarItemsAlignment"leading", "justified", "center", "centerSelected"iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified
    \n

    Events

    \n

    |Name |\tDescription|\n| ------------- |:-------------:| -----:|\n|selectedIndexChanged |\tEmitted when the selectedIndex property is changed.\n|loaded |\tEmitted when the view is loaded.\n|unloaded |\tEmitted when the view is unloaded.\n|layoutChanged |\tEmitted when the layout bounds of a view changes due to layout processing.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitter":{"name":"nativescript-twitter","version":"2.0.0","license":"MIT","readme":"

    Nativescript Twitter

    \n

    NativeScript implementation of Twitter SDK (Some Features)

    \n

    \"npm\"\n\"npm\"

    \n

    NS 3.0+

    \n

    tns plugin add nativescript-twitter

    \n

    NS < 3.0

    \n

    npm install nativescript-twitter@"^1.x"

    \n

    Example Implementation

    \n

    Android

    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.android) {
        const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
        TNSTwitter.init(\"key\", \"secret\");
    }
    \n

    IOS

    \n

    Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

    \n

    In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

    \n
    // Info.plist
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>twitterkit-<consumerKey></string>
        </array>
      </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>twitter</string>
        <string>twitterauth</string>
    </array
    \n
    //custom-app-delegate.ts
    import * as utils from \"utils/utils\";
    declare const UIResponder, UIApplicationDelegate, Twitter;
    export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];
        applicationDidFinishLaunchingWithOptions(application, launchOptions) {
            utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
            return true;
        }
        applicationOpenURLOptions(application, url, options) {
            return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
        }
    }
    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.ios) {
        app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
    }
    \n

    IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

    \n
    <twitter:TNSTwitterButton id=\"twitter\"/>
    \n

    Listen when user auth is successful or fails

    \n
    import * as frame from \"ui/frame\";
     frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
            if (args.object.get(\"value\") === 'failed') {
                console.log(args.object.get(\"message\"))
            } else {
                TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                    (user) => {
                        console.dump(user)
                    }, err => {
                        console.dump(err)
                    })
            }

        });
    \n

    Send api request

    \n
    import { CustomApiService } from \"nativescript-twitter\"
    const api = new CustomApiService();
        api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
            .then(
            data => {
                console.log(data)
            }, err => {
                console.log(err.message)
            });
    \n

    Angular

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
    \n
    <TNSTwitterButton id=\"twitter\"/>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-materialdropdownlist":{"name":"nativescript-materialdropdownlist","version":"1.0.15","license":{"type":"MIT","url":"https://github.com/bradleygore/nativescript-materialdropdownlist/blob/master/LICENSE"},"readme":"

    nativescript-materialdropdownlist

    \n

    Material-inspired dropdown list widget for NativeScript

    \n
    \n

    \n \"NativeScript\n

    \n

    Usage

    \n

    Install the plugin by running this command in your project root:\ntns plugin add nativescript-materialdropdownlist

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:MDL=\"nativescript-materialdropdownlist\">

        <StackLayout>
            <GridLayout rows=\"auto\" columns=\"*, auto\">
                <StackLayout>
                    <label text=\"Color\" />
                    <label style=\"height: 3; background-color: gray;\" />
                </StackLayout>

                <!--Dropdown List widget-->
                <MDL:MaterialDropdownList col=\"1\" id=\"ddlColors\"
                    itemsSeparatorColor=\"transparent\" itemsRowHeight=\"30\"
                    items=\"{{ colors }}\" selectedIndex=\"{{ selectedColorIndex }}\" >
                </MDL:MaterialDropdownList>
            </GridLayout>
        </StackLayout>
    </Page>
    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescriptionValue TypeDefault
    itemslist of items to bind to as data sourceArray or ObservableArraynull
    id[Optional] prepended to generated ListView's ID as {id}_pickerListstring''
    iconText[Optional] text to use for the icon labelstring'\\ue5c5' (standard dropdown icon from Material Icons)
    itemsSeparatorColor[Optional] pass-through to ListView to set color for line separating itemsstring (Color)ListView's default (light gray)
    itemsRowHeight[Optional] pass-through to ListView to set height of each item in the listnumberListView's default
    selectedIndex[Optional] index of the item currently selectednumbernull
    targetViewId[Optional] target view for the backdrop (AbsoluteLayout) and the ListView to render in. This is specifically needed for best results using the widget in tab-views and modals - see demo for examplesstringnull
    indexChange[Optional] function to call when the selected index changesFunctionN/A (uses view event .notify() mechanism)
    \n

    Custom Templates

    \n

    This widget was designed with flexibility in mind, so you can use a custom template for the prompt view (the view the user taps to bring up the dropdown list) as well as define a view template for each item in the ListView.

    \n

    These custom templates will need to be used if the list of items is not just strings, but objects

    \n
    <MDL:MaterialDropdownList col=\"1\" id=\"ddlAuthors\"
        items=\"{{ authors }}\" selectedIndex=\"{{ selectedAuthorIndex }}\" >

        <!--Prompt or Selected Item Template-->
        <MDL:MaterialDropdownList.selectedItemView>
            <StackLayout>
                <label text=\"{{ selectedAuthor ? selectedAuthor.name : 'Select Author' }}\" style=\"color: red; padding-left: 5;\" />
                <label style=\"background-color: gray; height: 1;\" />
            </StackLayout>
        </MDL:MaterialDropdownList.selectedItemView>

        <!--Template to pass to the ListView-->
        <MDL:MaterialDropdownList.itemsTemplate>
            <label style=\"color: red; padding-top: 5; padding-bottom: 5;\" text=\"{{ name }}\" />
        </MDL:MaterialDropdownList.itemsTemplate>
    </MDL:MaterialDropdownList>
    \n

    Default Prompt View

    \n

    If you don't use a custom template, we kept design-ability in mind. The default prompt view's elements all have specific purposes and individual IDs and CSS classes to make styling easy. If there were an XML template for it, here is what it would be:

    \n
    <grid-layout rows=\"auto, auto\" columns=\"*, auto\" id=\"mdlLayout\" class=\"mdl-container\">

        <!--Label where the value from the selected item gets put-->
        <label id=\"mdlSelectedValue\" row=\"0\" col=\"0\" class=\"mdl-value\" />

        <!--Label where the icon text gets put-->
        <label id=\"mdlIcon\" row=\"0\" col=\"1\" class=\"mdl-icon\" />

        <!--Label to hold no next but act as an underline across the entire widget - i.e. set height and background-color in a style rule-->
        <label id=\"mdlUnderline\" row=\"1\" col=\"0\" colSpan=\"2\" class=\"mdl-underline\" />

    </grid-layout>
    \n

    Styling

    \n

    Styling these dropdowns couldn't be simpler. Just create CSS rules based on the classes and IDs shown above. Given the dynamic nature of these types of lists, you will want to set a standard height for all dropdown lists, fortunately there's also a CSS Class specifically for those: mdl-pickerList. Here's an example of some things you can do to style these:

    \n
    .mdl-backdrop {
        /*The AbsoluteLayout that acts as backdrop to the dropdown*/
        background-color: lightgrey;
    }

    .mdl-pickerList {
        /*common styles for ALL dropdown lists*/
        height: 80;
        min-width: 60;
        background-color: white;
        border-color: blue;
        border-width: 1;
    }

    /*different styles for specific lists - remember ID is container's ID + _pickerList*/
    #ddlColors_pickerList {
        border-color: silver;
    }

    #ddlShapes_pickerList {
        border-color: orange;
        border-width: 4;
        min-width: 80;
    }

    #ddlAuthors_pickerList {
        min-width: 200;
    }

    #ddlShapes_pickerList label {
        /*If a custom itemsTemplate is not used, ListView defaults to a Label*/
        padding-top: 4;
        padding-bottom: 4;
        padding-left: 2;
        color: blue;
    }
    \n
    \n

    Demo

    \n

    To run the demo locally, run the following commands from the root folder after pulling down this repo:\nnpm run setup and npm run demo.android

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-messenger":{"name":"nativescript-messenger","version":"1.2.0","license":{"type":"MIT","url":"https://github.com/firescript/nativescript-messenger/blob/master/LICENSE"},"readme":"

    NativeScript Messenger

    \n

    A NativeScript module providing an sms messaging action for iOS and Android.

    \n

    Installation

    \n

    Run tns plugin add nativescript-messenger

    \n

    Usage

    \n

    To use the messenger module you must first require() it.

    \n
    var messenger = require( \"nativescript-messenger\" );
    \n

    Method

    \n

    ####send: Sends a message to one or multiple recipients

    \n
    Parameters
    \n
      \n
    • numbers: An array of phone number strings. Supports just one or multiple.
      • \n
    • message: The body message.
      • \n
    • subject: The subject message.
      • \n
    \n
    var messenger = require( \"nativescript-messenger\" );
    var numbers = [\"905-454-1234\", \"905-454-4321\", \"905-929-1122\"];
    messenger.send(numbers, \"My message\", \"Subject of Message\");
    \n

    This method also returns a promise. Use as so to define actions after the user has either canceled or sent the message.

    \n
        messenger.send([\"905-555-5555\", \"905-555-4444\"], \"this is body\").then(function(args){
            console.log(args.response); 
            // either a string saying cancelled or sent
            console.log(args.message); 
            // just a string with more detail than response.
            
            /* you can do stuff here.. this happens back 
            in your app after the message window has 
            been dismissed */            
            
        }, function (e) {
            console.log(\"Error occurred \" + e); 
            // e will show a vague error message.
        });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-snackbar":{"name":"nativescript-material-snackbar","version":"3.3.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Nativescript Material SnackBar

    \n

    Use the Material Design Snackbars in your {N} app

    \n
    Material Design Spec
    \n

    Installation

    \n

    If using @nativescript :

    \n
      \n
    • tns plugin add nativescript-material-snackbar
      • \n
    \n

    If using tns-core-modules

    \n
      \n
    • tns plugin add nativescript-material-snackbar@2.5.4
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n

    Usage

    \n

    TS

    \n
    import { SnackBar } from 'nativescript-material-snackbar';

    const snackbar = new SnackBar();

    export function showSimpleSnackbar() {
        snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
    }

    export function showActionSnackbar() {
        snackbar
            .action({
                message: `I'm a snackbar with an action`,
                actionText: 'Dismiss',
                hideDelay: 2000
            })
            .then(result => console.log('Action Snackbar:', result));
    }

    export function showColorfulSnackbar() {
        snackbar
            .action({
                message: `I'm a colorful snackbar`,
                textColor: 'blue',
                actionTextColor: 'yellow',
                backgroundColor: 'green',
                actionText: 'Dismiss',
                hideDelay: 2000
            })
            .then(result => console.log('Action Snackbar:', result));
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/vue":{"name":"@nativescript-community/vue","version":"0.0.6-alpha.1","license":"MIT","readme":"

    NativeScript Vue (Community ver.)

    \n

    Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

    \n

    Playground

    \n
    \n

    Why?

    \n

    This is an alternative version of Vue3 implementation for NativeScript. It might not be as feature rich as the official NativeScript-Vue, but if you'd like to catch up with upstream Vue development, this is still a good choice.

    \n

    Be aware we got this Vue implementation working within an hour, instead of years.

    \n

    Installation

    \n

    Via npm:

    \n
    npm install @nativescript-community/vue @nativescript/core dominative undom-ng vue
    \n

    Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually. As the benefit for using peer dependencies, you'll be able to upgrade these dependencies directly from upstream, no need to wait for an update with @nativescript-community/vue.

    \n
    \n

    Usage

    \n
    import { Application } from '@nativescript/core'
    import { createApp } from '@nativescript-community/vue'
    import App from 'App.vue'

    const app = createApp(App)

    // Start the app
    app.$run()
    \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geofire-plugin":{"name":"nativescript-geofire-plugin","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-geofire-plugin/blob/master/LICENSE"},"readme":"

    Nativescript-GeoFire-Plugin

    \n

    GeoFire for Nativescript - Realtime location queries with Firebase.

    \n

    The API for this plugin is kept nearly same as of the web version of geofire to increase code reuse across platforms and for easy usage.

    \n

    Installation

    \n

    tns plugin add nativescript-geofire-plugin

    \n

    This plugin requires Firebase to be added into your project. So if it is not added, you can add it by installing an awesome firebase plugin for nativescript by executing below command:

    \n

    tns plugin add nativescript-plugin-firebase

    \n

    Basic Usage

    \n
    import { NSGeoFire } from 'nativescript-geofire-plugin';

    // Here '/geo' is the firebase path which will be used by geoFire for location queries. You can change it to anything.
    let geoFire = new NSGeoFire('/geo');

    // Set location with key.
    geoFire.set(key, [lat, long]).then(() => {
        console.log('Geo key is added ');
    });

    // Get location by key.
    geoFire.get(key).then((location)=>{
        console.log('latitude and longitude ', location[0], location[1]);
    });

    // Remove location stored with specified key.
    geoFire.remove(key);

    // Location based query.
    let query = this.geoFire.query({
        center: [lat, long],
        radius: radius // in km
    });

    // Various events triggered by geoFire for the query being executed.
    query.on('key_entered', (key: string, location: number[]) => {
        console.log('key entered ', key, location);
    });

    query.on('key_exited', (key: string) => {
        console.log('key exited ', key);
    });

    query.on('key_moved', (key: string, location: number[]) => {
        console.log('key moved ', key, location);
    });

    query.on('ready', () => {
        console.log('GeoQuery has loaded and fired all other events for initial data');
    });
    \n

    API

    \n

    For now, refer API from index.d.ts file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/fonticon":{"name":"@nativescript-community/fonticon","version":"3.0.0","license":"https://github.com/nativescript-community/fonticon/blob/master/LICENSE","readme":"

    A simpler way to use font icons with NativeScript

    \n

    \"MIT\n\"Dependency \"devDependency

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n
      \n
    • CSS
      • \n
    \n
    .fa {
      font-family: FontAwesome;
    }
    \n
      \n
    • view
      • \n
    \n
    <Label class=\"fa\" text=\"\\uf293\"></Label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname:

    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
    \n

    Install

    \n
    npm install @nativescript-community/fonticon --save
    \n

    Usage

    \n

    FontAwesome will be used in the following examples but you can use any custom font icon collection.

    \n
      \n
    • Place font icon .ttf file in app/fonts, for example:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n
      \n
    • Create base class in app.css global file, for example:
      • \n
    \n
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
    }
    \n

    NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

    \n
      \n
    • Copy css to app somewhere, for example:
      • \n
    \n
    app/font-awesome.css
    \n

    Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

    \n
      \n
    • Configure your fonts and setup the converter:
      • \n
    \n
    import * as application from '@nativescript/core/application';
    import {FontIcon, fonticon} from '@nativescript-community/fonticon';

    FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
    FontIcon.paths = {
      'fa': 'font-awesome.css',
      'ion': 'ionicons.css'
    };
    FontIcon.loadCss();

    application.setResources( { fonticon } );
    application.run({ moduleName: 'main-page' });
    \n
      \n
    • Use the Converter, for example:
      • \n
    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (iOS)Demo Ionicons (iOS)
    \"Sample1\"\"Sample2\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (Android)Demo Ionicons (Android)
    \"Sample3\"\"Sample4\"
    \n

    Font Awesome 5

    \n

    In this case, you have to copy and import each ttf file and associate it with the proper class:

    \n
    .fas {
      font-family: Font Awesome 5 Free, fa-solid-800;
    }
    .far {
      font-family: Font Awesome 5 Free, fa-regular-400;
    }
    \n

    but still you will import the css only once with the fa prefix:

    \n
    FontIcon.paths = {
      'fa': 'font-awesome.css'
    };
    \n

    How about NativeScript with Angular?

    \n

    If using Angular, use this instead:

    \n\n

    Credits

    \n

    Idea came from Bradley Gore's post here.

    \n

    Contributors

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache":{"name":"nativescript-image-cache","version":"1.1.6","license":"MIT","readme":"

    Nativescript Image Cache

    \n

    \"npm

    \n

    Nativescript image caching plugin using Fresco for Android and SDWebImageCache for iOS

    \n

    Installation

    \n
    tns plugin add nativescript-image-cache
    \n

    Support NativeScript ~3.0.0 with Angular

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Property NameValuePlatform
    stretchaspectFill, aspectFit, fill, noneios,android
    srcstringios,android
    placeholderstringios,android
    placeholderStretchaspectFill, aspectFit, fill, noneandroid
    radiusnumberandroid
    roundedbooleanandroid
    \n

    Basic Usage

    \n

    Nativescript Angular

    \n

    Initialization

    \n
    import { initializeOnAngular } from 'nativescript-image-cache';

    export class AppComponent {
        constructor () {
            initializeOnAngular();
        }
    }
    \n

    Example usage:

    \n
    <NSImage #myImage stretch=\"aspectFill\" radius=\"20\" src=\"res://logo\">
    </NSImage>
    \n

    Nativescript Vanilla

    \n

    Initialization (android only)

    \n
    const imageCache = require('nativescript-image-cache');

    if (application.android) {
        application.on('launch', () => {
            imageCache.initialize();
        });
    }
    \n

    Example usage:

    \n
    <Page xmlns:IC=\"nativescript-image-cache\">
        <GridLayout rows='*' columns='*'> 
            <IC:NSImage stretch=\"fill\" row=\"0\"
                col=\"0\" placeholder=\"res://placeholder\" 
                src=\"res://logo\">
                </IC:NSImage>  
        </GridLayout>
    </Page>
    \n

    Caching Image

    \n

    Default cache purge time can be specified in number of days.

    \n
    import { setCacheLimit } from 'nativescript-image-cache';

    const cacheLimitInDays : number = 7;
    setCacheLimit(cacheLimitInDays);
    \n

    Clearing Cache

    \n

    Default cache time for SDWebImageCache is 7 days, and for Fresco is 60 days.

    \n
    import { clearCache } from 'nativescript-image-cache';

    clearCache();
    \n

    (Android Only), you need to initialize in the application onlaunch event before clearing the cache

    \n

    Credits

    \n

    The starting point for this plugin was this great plugin.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rich-textfield":{"name":"nativescript-rich-textfield","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript-rich-textfield \"Build

    \n

    This plugins let's you easily create textfield with icon that can be effortlessly styled using the exposed properties.

    \n

    Prerequisites

    \n

    This plugin is using FontAwesome so as a prerequisite you will have to add fonts folder to your app root directory containing FontAwesome .ttf file.

    \n

    Installation

    \n
    npm install nativescript-rich-textfield --save
    \n

    Usage

    \n

    You will have to add xmlns:rt="nativescript-rich-textfield" namespace to your page tag, and then simply use <rt:RichTextField/> in order to add the widget to your page.

    \n

    A few examples:

    \n

    \"Sample

    \n

    Code samples in order of appearance:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
    xmlns:rt=\"nativescript-rich-textfield\">
      <StackLayout >

        <rt:RichTextField icon=\"0xf123\" height=\"60\" iconColor=\"red\" fieldHintColor=\"red\" fieldPaddingLeft=\"20\" textPaddingLeft=\"80\" fieldPaddingRight=\"90\" fieldBackgroundColor=\"transparent\"/>

        <rt:RichTextField icon=\"&#xf099;\" iconSize=\"20\" iconColor=\"rgba(240,248,255,1)\" fieldHint=\"Twitter Hint\"
         height=\"60\" style=\"background-color:rgba(30,144,255,1)\" fieldBorderColor=\"rgba(255,255,255,1)\" fieldBottomBorderWidth=\"2\"/>

        <rt:RichTextField icon=\"&#xf262;\" fieldBorderColor=\"rgba(212,175,55,1)\" fieldColor=\"rgba(138,43,226,1)\" fieldHeight=\"50\" height=\"50\" fieldBottomBorderWidth=\"4\"
         fieldTopBorderWidth=\"4\" iconColor=\"rgba(138,43,226,0.8)\" fieldHintColor=\"rgba(138,43,226,0.6)\" style=\"background-color:rgba(255,223,0,1);margin-top:10;\" />

        <rt:RichTextField icon=\"&#xf17b;\" fieldBorderColor=\"rgba(124,252,0,1)\" fieldHeight=\"45\" height=\"45\" fieldTopBorderWidth=\"3\" iconColor=\"rgba(173,255,47,1)\" 
         style=\"background-color:rgba(34,139,34,1);margin-top:10;margin-bottom:10;\" fieldColor=\"rgba(34,139,34,1)\" />

         <rt:RichTextField iconSize=\"15\" icon=\"&#xf028;\" iconColor=\"rgba(1,1,1,1)\" style=\"margin-bottom:10;\" fieldBackgroundColor=\"red\" fieldBorderColor=\"white\" fieldBorderWidth=\"3\" 
          fieldHint=\"Volume value Hint\" fieldHintColor=\"rgba(1,1,1,0.6)\" fieldHeight=\"45\" width=\"90%\" />

        <rt:RichTextField icon=\"&#xf007;\" fieldLeftBorderWidth=\"8\" width=\"80%\" fieldHint=\"Username\" fieldPaddingLeft=\"34\" />

        <rt:RichTextField icon=\"&#xf13e;\" secure=\"true\" fieldLeftBorderWidth=\"4\" fieldRightBorderWidth=\"4\" width=\"80%\" fieldHint=\"Password\" />

      </StackLayout>
    </Page>
    \n

    API

    \n

    RichTextField attributes:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeDescription
    iconcan be code value from http://fontawesome.io/cheatsheet/ (e.g. &#xf123;) or hex representation (e.g. 0xf123)
    fieldHeightheight of the field (e.g. 50)
    fieldColortext color of the field. The value can be known color name or rgba (red/green/blue/alpha) representation (e.g. "red" or "rgba(34,139,34,0.8)"). Alpha value can be in the range 0-1 the rest can be 0-255.
    fieldPaddingLeftleft hand side space to the parent element (e.g. "50")
    fieldPaddingRightright hand side space to the parent element (e.g. "50")
    textPaddingLeftthe distance between the icon and the text/hint of the field (e.g. "50")
    fieldBackgroundColorbackground color of the field (e.g. "red" or "rgba(34,139,34,0.8)")
    iconColoricon color (e.g. "red" or "rgba(34,139,34,0.8)")
    fieldHintstring value of the field hint (e.g. "Custom Hint")
    iconSizeicon size (e.g. "20")
    fieldHintColorcolor value of the hint text (e.g. "red" or "rgba(34,139,34,0.8)")
    fieldBorderColorcolor value of the border (e.g. "red" or "rgba(34,139,34,0.8)")
    fieldBorderWidthborder width (e.g. "2"). Setting this applies all sides border.
    fieldLeftBorderWidthleft side border width (e.g. "2"). Setting this applies only left side border.
    fieldRightBorderWidthright side border width (e.g. "2"). Setting this applies only right side border.
    fieldTopBorderWidthtop side border width (e.g. "2"). Setting this applies only top side border.
    fieldBottomBorderWidthbottom side border width (e.g. "2"). Setting this applies only bottom side border.
    securespecify whether to mask the input of the field. Useful for passwords (e.g. "true").
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"connectycube":{"name":"connectycube","version":"3.27.4","license":"Apache-2.0","readme":"

    Overview

    \n

    ConnectyCube Javascript SDK.

    \n

    ConnectyCube is a messaging and video calling platform for iOS, Android and Javascript apps.

    \n

    Check our comprehensive guide for Javascript SDK.

    \n

    Features

    \n
      \n
    • Messaging - first-class messaging API to build 1-1 and group chats, broadcast channels and so on. Different chat attachments are supported in the cloud.
      • \n
    • Video calling - peer-to-peer and group video calling up to 10 people based on modern WebRTC technologies. Various quality settings and audio/video codecs supported.
      • \n
    • Push notifications - never miss your chat messages with automatic push notifications to offline users. Also receive a push to all your devices when somebody calls you in a video chat.
      • \n
    • Authentication & Users - manage all the things related to user accounts handling, authentication, account data, password reminding etc. Integration with your own user base via external auth mechanisms.
      • \n
    • Chat bots - use chat bots to enable users to conversationally interact with your service or your product. Bots are fully automated services.
      • \n
    \n

    For more details check the ConnectyCube features page

    \n

    Connect SDK

    \n

    Browser

    \n

    Simply connect the JS file as a normal script:

    \n
    <script src=\"https://cdn.jsdelivr.net/npm/connectycube@x.x.x/dist/connectycube.min.js\"></script>
    \n

    where x.x.x is the desired JS SDK version (check for Releases page for all available versions).

    \n

    Then a window scoped variable called ConnectyCube is created.

    \n

    Or install the package as NPM module:

    \n
    npm install connectycube --save
    \n

    And add script to HTML file from the 'node_modules' folder (as a relative path):

    \n
    <script src=\"~/node_modules/connectycube/dist/connectycube.min.js\"></script>
    \n

    and you're ready to initialize the ConnectyCube SDK:

    \n
    const credentials = {
        appId: 21,
        authKey: 'hhf87hfushuiwef',
        authSecret: 'jjsdf898hfsdfk'
    };

    const config = {
        debug: { mode: 1 }
    };

    ConnectyCube.init(credentials, config);
    \n

    You be able to create more then one client instance:

    \n
    const cudeSender = new ConnectyCube.ConnectyCube();
    const cudeReceiver = new ConnectyCube.ConnectyCube();

    cudeSender.init(credentials, config);
    cudeReceiver.init(credentials, config);
    \n

    See an example of simple application based on Webpack build

    \n

    Janus

    \n

    Janus JS api version 1.1.3

    \n

    Conference API Update

    \n

    New listeners

    \n
    const ConnectyCube = require('connectycube');

    ConnectyCube.videochatconference.onRemoteTracksUpdatedListener = (session, user_id, mediaTrack, eventType) => {};

    ConnectyCube.videochatconference.onDataChannelOpenedListener = (session, channelLabel) => {};
    ConnectyCube.videochatconference.onDataChannelMessageListener = (session, user_id, data) => {};
    \n

    New session methods

    \n
    const ConnectyCube = require('connectycube');

    const session = ConnectyCube.videochatconference.createNewSession();

    const textData = 'Joined Guest User'
    // send message to data channel
    session.sendData(textData)
            .then(() => {})
            .catch(() => {})

    // get current user volume
    session.getUserVolume()
            .then((volume) => {})
            .catch(() => {})

    // get remote user volume
    session.getRemoteUserVolume(userId)
            .then((volume) => {})
            .catch(() => {})
    \n

    Node.js/NPM, NativeScript integration

    \n

    Simply install the package in a normal way:

    \n
    npm install connectycube --save
    \n

    and you're ready to go:

    \n
    var cubeClient = require('connectycube');
    \n

    React Native integration

    \n

    Simply install the package in a normal way:

    \n
    npm install react-native-connectycube --save
    \n

    and you're ready to go:

    \n
    import { ConnectyCube } from 'react-native-connectycube'

    const CB = new ConnectyCube()
    \n

    Supported platforms

    \n
      \n
    • Browser
      • \n
    • Node.js
      • \n
    • React Native
      • \n
    • NativeScript
      • \n
    • Apache Cordova
      • \n
    • Electron
      • \n
    \n

    Contribution

    \n

    See more information at CONTRIBUTING.md

    \n

    License

    \n

    Apache 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-badge":{"name":"nativescript-plugin-badge","version":"1.0.0","license":"MIT","readme":"

    Nativescript-plugin-badge

    \n

    \"npm\"\n\"npm\"\n\"Commitizen

    \n

    This plugin will allow you to set badge notification.

    \n

    Installation

    \n
    tns plugin add nativescript-plugin-badge
    \n

    Screenshots

    \n

    \"IOS\"

    \n

    \"Android\"

    \n

    Usage

    \n
    ```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    ShortcutBadgerNative
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    requestPremissions():PromiseWill return if user granted the premission or not. See description below
    setBadge(badge:number)set badge
    removeBadge()clear badge
    applyNotification(notification: Notification, badge: number, channelId?: string)See description below
    \n

    Supported Devices (Android)

    \n

    Please check the library used.

    \n

    Premission

    \n

    Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

    \n

    Miui(Xiaomi device) support

    \n

    Since from Xiaomi changed the way to show badge by notification from Miui 6.

    \n

    setBadge will not support Xiaomi devices.

    \n

    If you want to support badges for Xiaomi, you have to send notifications. And use

    \n
    applyNotification({title:'title',body:'body'}, 5, 'channel id');
    \n

    channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

    \n

    Drawback

    \n

    The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/geolocation":{"name":"@awarns/geolocation","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/geolocation

    \n

    \"npm\n\"npm\"

    \n

    This module includes tasks to regularly obtain the location of the phone.

    \n

    This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering GNSS location acquisition tasks. Acquire phone's location, on demand, even in background.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/geolocation
    \n

    Usage

    \n

    After installing and setting up this plugin, you'll have access to two different tasks to acquire the location of the phone. The result, will be a Geolocation record, described below.

    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    acquirePhoneGeolocationAllows to acquire the most accurate location available, obtained from the phone, among a few, on demand. The amount of locations to be collected and decide on is configurable
    acquireMultiplePhoneGeolocationAllows to repeatedly acquire phone locations. Similarly to the single acquisition task, each reported value can be chosen among a few acquired values. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
    \n
    \n

    Note: All the tasks require fine location permission and active location services for their execution. Each task will automatically request what is missing during framework's initialization

    \n
    \n

    Acquire a single GNSS location

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquirePhoneGeolocationTask } from '@awarns/geolocation';

    export const demoTasks: Array<Task> = [
          acquirePhoneGeolocationTask(/* optional */ { bestOf: 3, timeout: 10000 }),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    bestOfnumberThe number of locations to be collected, to pick the one that is the most accurate. The more locations being requested, the more the task will take to run. The default value is 3
    timeoutnumberLimit the maximum time to be spent collecting locations, in milliseconds. The default value is 10000 (10s).
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquirePhoneGeolocation')
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('geolocationAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords, task the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Acquire GNSS locations in batch

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquireMultiplePhoneGeolocationTask } from '@awarns/geolocation';

    export const demoTasks: Array<Task> = [
      acquireMultiplePhoneGeolocationTask(/* optional */ { bestOf: 1, timeout: 15000 }),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    bestOfnumberThe number of locations to be collected for each final record being reported, to pick the one that is the most accurate from a subset. The more locations being requested, the lower total amount of locations being reported. This means, in the hypothetical case where there's time to collect 6 locations, with a bestOf value of 1, the 6 locations will be reported, whereas with a bestOf value of 3, in the same situation, only 2 locations will be reported, being these 2 the most accurate among the 2 subsets of 3 locations. The default value is 1 (each location being collected ends being reported)
    timeoutnumberLimit the maximum time to be spent collecting each location, in milliseconds. The default value is 15000 (15s).
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquireMultiplePhoneGeolocation', { maxInterval: 10000 /* (Optional) Maximun interval between location acquisitions (this includes the time it takes to obtain all the locations in a reporting subset, if bestOf > 1), unlimited by default */ })
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('geolocationAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    geolocationAcquiredGeolocation | Array<Geolocation>Indicates that one or more new GNSS locations have been acquired
    \n

    Records

    \n

    Geolocation

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways geolocation
    changeChangeAlways none. Locations never start or end, they represent spatio-temporal snapshots of where the phone was at a given time. To detect when the phone started and ended being in a place, use the geofencing package
    timestampDateThe local time when the location was acquired
    latitudenumberThe latitude of where the phone is located at
    longitudenumberThe longitude of where the phone is located at
    altitudenumberThe altitude of where the phone is located at
    verticalAccuracynumberThe estimated error in the latitude
    horizontalAccuracynumberThe estimated error in the longitude
    speednumberThe estimated speed of the phone by the time the location was acquired
    directionnumberThe estimated direction of the phone by the time the location was acquired
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal2":{"name":"nativescript-paypal2","version":"2.6.10","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript PayPal

    \n

    NativeScript module for implementing simple PayPal checkouts using official SDK.

    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    \n

    Roadmap

    \n\n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-paypal
    \n

    inside your app project to install the module.

    \n

    Android

    \n

    AndroidManifest.xml

    \n

    Keep sure to define the following permissions, activities and other data in your manifest file:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\">

        <uses-permission android:name=\"android.permission.INTERNET\" />
        <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />    
        <uses-permission android:name=\"android.permission.CAMERA\" />
        <uses-permission android:name=\"android.permission.VIBRATE\" />
        
        <action android:name=\"android.intent.action.MAIN\" />
     
        <category android:name=\"android.intent.category.LAUNCHER\" />

        <uses-feature android:name=\"android.hardware.camera\"
                      android:required=\"false\" />
        <uses-feature android:name=\"android.hardware.camera.autofocus\"
                      android:required=\"false\" />

        <application>
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.LoginActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentMethodActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PaymentConfirmActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.PayPalFuturePaymentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentConsentActivity\" />
            <activity android:name=\"com.paypal.android.sdk.payments.FuturePaymentInfoActivity\" />
            <activity android:name=\"io.card.payment.DataEntryActivity\" />
    \t\t
    \t    <service android:name=\"com.paypal.android.sdk.payments.PayPalService\"
                     android:exported=\"false\" />
        </application>
        
    </manifest>
    \n

    app.gradle

    \n

    Keep sure to have a reference to the PayPal SDK in your app/App_Resources/Android/app.gradle file of your project.

    \n
    dependencies {
        // PayPal
        compile 'com.paypal.sdk:paypal-android-sdk:2.14.2'
    }
    \n

    Demo

    \n

    For quick start have a look at the demo/app/main-view-model.js file of the demo app to learn how it works.

    \n

    Otherwise ...

    \n

    Usage

    \n

    Include

    \n

    Include the module in your code-behind:

    \n
    var PayPal = require(\"nativescript-paypal\");
    \n

    Initialize

    \n

    Initialize the environment:

    \n
    function onPageLoaded(args) {
        PayPal.init({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
    exports.onPageLoaded = onPageLoaded;
    \n

    The (optional) object that is submitted to the PayPal.init function has the following structure:

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    acceptCreditCards[OPTIONAL] Accept credit cards or not. Default: (true)
    account[OPTIONAL] Defines information about the account.
    clientIdThe PayPal ID for your app that was generated in the PayPal Developer Portal.
    defaults[OPTIONAL] Defines default data.
    environment[OPTIONAL] The environment to use. Possible values are: 0 = ENVIRONMENT_SANDBOX, 1 = ENVIRONMENT_PRODUCTION, 2 = ENVIRONMENT_NO_NETWORK.
    onActivityResult[OPTIONAL] Logic for Activity.onActivityResult method of the underlying Android activity that is used to invoke logic for other modules, e.g.
    rememberUser[OPTIONAL] Remember the last user for the next payment or not. Default: (true)
    requestCode[OPTIONAL] The custom request code to use (e.g. for Activity.onActivityResult Android method). Default: 230958624
    \n
    account
    \n

    The account object has the following structure:

    \n
    Properties
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    name[OPTIONAL] The name of the merchant.
    privacyPolicy[OPTIONAL] The URI to the privacy policy of the merchant.
    userAgreement[OPTIONAL] The URI to the user agreement of the merchant.
    \n
    defaults
    \n

    The defaults object has the following structure:

    \n
    Properties
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    userEmail[OPTIONAL] The default user email.
    userPhone[OPTIONAL] The default user phone.
    userPhoneCountryCode[OPTIONAL] The default user phone country code.
    \n

    Start a payment

    \n
    function buyProduct(args) {
        // configure
        var payment = PayPal.newPayment()
            .setDescription('My product')
            .setAmount(59.79);

        // start checkout / payment
        payment.start(function(cbResult) {
            switch (cbResult.code) {
                case 0:
                    // SUCCESS
                    // pay key is stored in 'cbResult.key'
                    break;
                    
                case 1:
                    // operation was CANCELLED
                    break;
                    
                case -1:
                    // checkout FAILED
                    break;
                    
                case -2:
                    // \"unhandled exception\"
                    break;
            }
        });
    }
    exports.buyProduct = buyProduct;
    \n

    The payment object that is created by PayPal.newPayment function has the following structure.

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    getAmountGets the price. Example: var a = payment.getAmount();
    getBnCodeGets the BN code. Example: var bc = payment.getBnCode();
    getCurrencyGets the custom currency to use. Example: var c = payment.getCurrency();
    getCustomGets the custom value for the payment. Example: var c = payment.getCustom();
    getDescriptionGets the (short) description. Example: var d = payment.getDescription();
    getDetailsGets an object with the payment details. Example: var d = payment.getDetails();
    getInvoiceNumberGets the custom invoice number. Example: var i = payment.getInvoiceNumber();
    setAmountSets the price. Example: payment.setAmount(1.25);
    setBnCodeSets a BN code. Example: payment.setBnCode('Your BN Code');
    setCurrencySets the custom currency to use. Example: payment.setCurrency('EUR');
    setCustomSets the custom value for the payment. Example: payment.setCustom('MY-PRODUCT-ID');
    setDetailsSets details (shipping, subtotal & tax). Example: payment.setDetails(4.95, 199.99, 1.19);
    setDescriptionSets the (short) description. Example: payment.setDescription('This is really awesom!');
    setInvoiceNumberSets the custom invoice number. Example: payment.setInvoiceNumber('MY_INVOICE-666');
    startStarts the payment / checkout process.
    \n
    start
    \n

    The callback that is submitted to the payment.start method receives an object with the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    codeThe result code. 0 = success, -3 = JSON parse error, -2 = unhandled exception, -1 = checkout failed, 1 = cancelled, 2 = no confirm data, 3 = no JSON data
    keyThe key of the payment (if code = 0)
    \n

    Enhancements

    \n

    Logging

    \n

    If you want to get the logging output of the module, you can use PayPal.addLogger function to add a callback that receives a message from the module:

    \n
    PayPal.addLogger(function(msg) {
        console.log('[nativescript-paypal]: ' + msg);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/ui-collectionview":{"name":"@nstudio/ui-collectionview","version":"5.1.8","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-tour":{"name":"nativescript-app-tour","version":"4.0.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-editor":{"name":"nativescript-photo-editor","version":"1.1.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-photo-editor

    \n

    This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Methods

    \n
      \n
    • editPhoto(options): Promise
      \nOpens the photo editor with the given options. If the user accepts the edited image the promise is resolved with an instance of the new ImageSource. If the user cancels the edit the promise will be rejected.
      • \n
    \n

    Usage

    \n

    Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

    \n
    import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

    const photoEditor = new PhotoEditor();

    photoEditor.editPhoto({
        imageSource: originalImage.imageSource,
        hiddenControls: [
            PhotoEditorControl.Save,
            PhotoEditorControl.Crop,
        ],
    }).then((newImage: ImageSource) => {
        // Here you can save newImage, send it to your backend or simply display it in your app
        resultImage.imageSource = newImage;
    }).catch((e) => {
        console.error(e);
    });
    \n

    Usage in Angular

    \n

    There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

    \n

    Demos

    \n

    This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-photo-editor
    $ cd nativescript-photo-editor
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n

    Credits

    \n
      \n
    • For iOS this uses the iOSPhotoEditor pod (https://cocoapods.org/pods/iOSPhotoEditor)
      • \n
    • For Android uses adjusted code with added cropping from https://github.com/eventtus/photo-editor-android
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rachnerd-test-plugin":{"name":"rachnerd-test-plugin","version":"0.0.34","license":"MIT","readme":"

    nativescript-angular-unit-tests

    \n

    This module helps to maintain the angular style guide folder structure for {N} + Angular projects.

    \n

    This plugin:

    \n
      \n
    • Watches all generated js spec
      • \n
    • Copies all generated js spec files to a .tmp folder inside app/tests
      • \n
    • Fixes require paths to target original source.
      • \n
    • Runs "tns test [platform]" in parallel.
      • \n
    \n

    Install

    \n
    npm i --save-dev nativescript-angular-unit-tests
    \n

    Add a script to your project's package.json and call 'tns-test-angular'.

    \n
    {
      \"scripts\": {
        \"test.android\": \"tns-test-angular --platform=android\",
        \"test.ios\": \"tns-test-angular --platform=ios\"
      }
    }
    \n

    Karma setup example

    \n
    {
        ...
        files: [
            'app/tests/config.js',
            'app/tests/.tmp/**/*.js'
        ],
        ...
    }
    \n
    // app/tests/config.ts
    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
    import { NS_COMPILER_PROVIDERS } from 'nativescript-angular/platform';
    import { TestBed } from '@angular/core/testing';

    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS));
    \n

    Flags

    \n

    Running a specific spec

    \n
    |- /app
    |   - /login
    |       _ login.component.ts
    |       _ login.component.spec.ts
    |       - login.service.ts
    |       - login.servic.spec.ts
    |   - app.component.ts
    |   - app.component.spec.ts
    \n
    npm run test.android -- --spec=login.service
    \n
    |- /app
    |   - /tests
    |       - /.tmp
    |           - /login
    |               login.service.spec.js
    \n

    Running multiple specs

    \n
    |-- app
    |   |-- login
    |   |   |-- shared
    |   |   |   |-- login.service.ts
    |   |   |   |-- login.service.spec.ts
    |   |   |-- login.component.css
    |   |   |-- login.component.html
    |   |   |-- login.component.ts
    |   |   |-- login.component.spec.ts
    |   |-- app.component.ts
    |   |-- app.component.spec.ts
    \n
    npm run test.android -- --spec=login
    \n
    |-- app
    |   |-- tests
    |   |   |-- .tmp
    |   |   |   |-- login
    |   |   |   |   |-- shared
    |   |   |   |   |   |-- login.service.spec.js
    |   |   |   |   |-- login.component.spec.js
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codelab/nativescript-multi-select":{"name":"@codelab/nativescript-multi-select","version":"2.0.1","license":"Apache-2.0","readme":"

    Nativescript Multi Select \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"

    \n

    Overview

    \n

    Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

    \n

    \n \n \n

    \n

    Installation

    \n

    This plugin supports NativeScript 7 or higher. For lower versions, you can use an older version of the plugin.

    \n
    tns plugin add @codelab/nativescript-multi-select
    \n

    Usage

    \n

    TypeScript

    \n
    import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

    let MSelect = new MultiSelect();
    let selectedItems = [\"moi-a\", \"moi-b\"];

    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this._selectedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        selectedItems = selectedItems;
        console.log(\"SELECTED ITEMS => \", selectedItems);
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    MSelect.show(options);
    \n

    Angular

    \n
    import { Component, OnInit, NgZone } from \"@angular/core\";
    import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

    @Component({
     // ...
    })
    export class SomeComponent implements OnInit {
      private _MSelect: MultiSelect;
      public selectedItems: Array<any>;

      constructor(private zone: NgZone) {
        this._MSelect = new MultiSelect();
        this.selectedItems = [\"moi-a\", \"moi-b\"];
      }

      ngOnInit(): void {
      }

      public onSelectTapped(): void {
        const options: MSOption = {
          title: \"Please Select\",
          selectedItems: this.selectedItems,
          items: [
            { name: \"A\", value: \"moi-a\" },
            { name: \"B\", value: \"moi-b\" },
            { name: \"C\", value: \"moi-c\" },
            { name: \"D\", value: \"moi-d\" },
          ],
          bindValue: 'value',
          displayLabel: 'name',
          onConfirm: selectedItems => {
            this.zone.run(() => {
              this.selectedItems = selectedItems;
              console.log(\"SELECTED ITEMS => \", selectedItems);
            })
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log('CANCEL');
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\",
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };

        this._MSelect.show(options);
      }
    }
    \n

    Vue

    \n
    <script>
      import {
        MultiSelect,
        AShowType
      } from \"nativescript-multi-select\";
      const MSelect = new MultiSelect();

      export default {
        data() {
          selectedItems: [\"moi-a\", \"moi-b\"];
        },
        methods: {
          onSelectTapped() {
            const that = this;
            const options = {
              title: \"Please Select\",
              selectedItems: this.selectedItems,
              items: [{
                  name: \"A\",
                  value: \"moi-a\"
                },
                {
                  name: \"B\",
                  value: \"moi-b\"
                },
                {
                  name: \"C\",
                  value: \"moi-c\"
                },
                {
                  name: \"D\",
                  value: \"moi-d\"
                }
              ],
              bindValue: \"value\",
              displayLabel: \"name\",
              onConfirm: _selectedItems => {
                that.selectedItems = _selectedItems;
                console.log(\"SELECTED ITEMS => \", _selectedItems);
              },
              onItemSelected: selectedItem => {
                console.log(\"SELECTED ITEM => \", selectedItem);
              },
              onCancel: () => {
                console.log(\"CANCEL\");
              },
              android: {
                titleSize: 25,
                cancelButtonTextColor: \"#252323\",
                confirmButtonTextColor: \"#70798C\"
              },
              ios: {
                cancelButtonBgColor: \"#252323\",
                confirmButtonBgColor: \"#70798C\",
                cancelButtonTextColor: \"#ffffff\",
                confirmButtonTextColor: \"#ffffff\",
                showType: AShowType.TypeBounceIn
              }
            };

            MSelect.show(options);
          }
        }
      };
    </script>
    \n

    API

    \n

    MultiSelect

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    show(options: MSOption)() : voidShow Multi Select Dialog
    \n

    MSOption

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titlestringDialog Title
    confirmButtonTextstringconfirm button text optional
    cancelButtonTextstringcancel button text optional
    selectedItemsArray<any>predefined items optional
    itemsArray<any>items/list that will be display
    bindValuestringthe value that will determine the property which will be return when an item is selected optional
    displayLabelstringthe value that will determine the property which will be display in the list optional
    iosMSiOSOptionios options optional
    androidMSAndroidOptionandroid options optional
    onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
    onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
    onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
    \n

    MSAndroidOption (for android)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titleSizenumberoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    \n

    MSiOSOption (for ios)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    cancelButtonBgColorstringoptional
    confirmButtonBgColorstringoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
    dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
    itemColorstringitem text color optional
    \n

    iOS Popup: Animation AShowType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeIn1
    TypeGrowIn2
    TypeShrinkIn3
    TypeSlideInFromTop4
    TypeSlideInFromBottom5
    TypeSlideInFromLeft6
    TypeSlideInFromRight7
    TypeBounceIn8
    TypeBounceInFromTop9
    TypeBounceInFromBottom10
    TypeBounceInFromLeft11
    TypeBounceInFromRight12
    \n

    iOS Popup: Animation ADismissType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeOut1
    TypeGrowOut2
    TypeShrinkOut3
    TypeSlideOutToTop4
    TypeSlideOutToBottom5
    TypeSlideOutToLeft6
    TypeSlideOutToRight7
    TypeBounceOut8
    TypeBounceOutToTop9
    TypeBounceOutToBottom10
    TypeBounceOutToLeft11
    TypeBounceOutToRight12
    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@exeleon/nativescript-svg":{"name":"@exeleon/nativescript-svg","version":"1.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"MIT\n\"Dependency

    \n

    NativeScript SVG

    \n

    This repo is a fork of TeamMaestro/nativescript-svg which is a fork of peoplewareDo/nativescript-svg.

    \n

    Install

    \n

    tns plugin add @exeleon/nativescript-svg

    \n

    Usage

    \n

    You use it in the same way you use Image source.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Android LibraryiOS CocoaPod
    BigBadaboom AndroidSVGSVGKit by SVGKit
    \n

    ** there are limitations: ** - saveToFile ins't working

    \n

    Quick start

    \n
    var ImageSourceSVGModule = require('nativescript-svg');
    var svgFile = new ImageSourceSVGModule.ImageSourceSVG();

    var loaded = svgFile.fromResource('foxie');

    var path = '//somepath/file.svg';
    loaded = svgFile.loadFromFile(path);

    var url = 'http://somepath/file.svg';
    svgFile
      .fromUrl(url)
      .then(loaded => {
        console.log('object loaded');
      })
      .catch(e => {
        console.log('error');
      });
    \n

    API

    \n
    ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
    \n
      \n
    • Loads this instance from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified file.
      • \n
    \n
    ImageSourceSVGModule.fromData(data: any): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG
    \n
      \n
    • Downloads the image from the provided Url and creates a new ImageSourceSVG instance from it.
      • \n
    \n
    \n

    You can call every method in two ways, for example:

    \n
    //from the svf file object
    svgFile.loadFromResource(name: string): boolean  // synchronously
    svgFile.fromResource(name: string): ImageSourceSVG //asynchronously
    \n

    or

    \n
    //from the svg module api
    ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
    \n

    Since ver 1.1 Implement a similar image tag to be used as for example:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:svg=\"nativescript-svg\" loaded=\"pageLoaded\">
      <StackLayout>
        <!--svg image tag-->
        <svg:SVGImage src=\"~/image/nativescript.svg\" height=\"100\" />
        <svg:SVGImage src=\"https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg\" height=\"200\" />

        <!--normal image tag-->
        <Image src=\"~/images/logo.svg\" stretch =\"none\" />
      </StackLayout>
    </Page>
    \n

    Roadmap

    \n

    ver 1.6 implement an SVGImage tag that can support svg tags.

    \n
    <!-- this is more complicated to implement, pending to be implemented -->
        <svg:SVGImage width=\"100\" height=\"100\">
            <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />
        </svg:SVGImage>
    \n

    ver 1.5 Change api dependency from pents90/svg-android to Pixplicity/sharp

    \n

    Release note

    \n

    v1.3.4 -- Angular 4 support, please check example code

    \n

    v1.3.0 -- NS 3+ implementation and it will work with angular if you call registerElement before using it. Thanks to @tbozhikov

    \n

    v1.1.4 -- Fix svg & demo

    \n

    v1.1.3 -- Fix SVGImage for iOS - SVGKFastImageView issue#3

    \n

    v1.1.0 -- Implemented a similar image tag to render svg images.

    \n

    v1.0.11 -- Major fix for load library issue and demo include.

    \n

    v1.0.9 -- load from URL on Android and IOS included.

    \n

    v1.0.7 -- Fix svg.common override issue.

    \n

    v1.0.5 -- fix for npm package lib not including the .js files.

    \n

    v1.0.2 -- the base64 encondig on Android included - IOS pending.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-panorama-imageview":{"name":"nativescript-panorama-imageview","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-panorama-imageview/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Panorama-ImageView

    \n

    Panoramic Image View for NativeScript that uses the device movement to pan the images.

    \n

    Native Library

    \n
      \n
    • PanoramaImageView - https://github.com/gjiazhe/PanoramaImageView
      • \n
    \n

    Screens

    \n

    \"Sample1\" | \"Sample2\"

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Brad Martin

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n
    tns plugin add nativescript-panorama-imageview
    \n

    Usages

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:PanoramaImageView=\"nativescript-panorama-imageview\" loaded=\"pageLoaded\">
        <ActionBar title=\"Panoramic ImageView\" />
       <ScrollView>
            <StackLayout class=\"p-20\">
                <PanoramaImageView:PanoramaImageView height=\"220\" src=\"~/images/panSunset.jpg\" />
                <PanoramaImageView:PanoramaImageView height=\"200\" scrollbar=\"true\" src=\"https://cdn.pixabay.com/photo/2016/11/23/18/29/cloudy-1854241_960_720.jpg\" />
                <PanoramaImageView:PanoramaImageView height=\"240\" src=\"https://cdn.pixabay.com/photo/2016/11/21/15/43/beach-1846040_960_720.jpg\" />
            </StackLayout>
        </ScrollView>
    </Page>
    \n

    Properties

    \n
      \n
    • scrollbar: boolean optional (default = false) - if true a scrollbar will be visible on the image view.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@c4dt/nativescript-websockets":{"name":"@c4dt/nativescript-websockets","version":"1.5.5","license":{"type":"MIT & Apache 2.0","url":"https://github.com/nathanaela/nativescript-sqlite/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    NativeScript WebSockets

    \n

    This is a cross platform WebSocket library for IOS and Android.

    \n

    License

    \n

    My code is (c)2015-2019, Master Technology. All my code is LICENSED under the MIT License. The Android Library is also MIT, the iOS libraries used Apache 2.0; which you may view them by reading the "LICENSE" file.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    If you want professional and support plugins; checkout the all new https://proplugins.org

    \n

    Installation

    \n

    First run tns --version

    \n

    v1.4 or later

    \n

    Run tns plugin add nativescript-websockets in your ROOT directory of your project.

    \n

    Limitations

    \n
      \n
    • The sending of Protocols support is not fully implemented on both platforms. Do not depend on this; it only partially works..
      • \n
    \n

    Angular

    \n

    Pay attention and don't forget to use NgZone.run() -- if you don't use it in some cases; your UI may not update when you get data updates. This is NOT a limitation of this library; but just how Angular works for its change detection system.

    \n

    Usage

    \n

    There is two possible interfaces for you to use; the Simple WebSocket interface that emulates the browser based WebSockets and a more advanced WebSocket interface where you have more control.

    \n

    Browser based Interface

    \n
    require('nativescript-websockets');

    var mySocket = new WebSocket(\"ws://echo.websocket.org\", [ /* \"protocol\",\"another protocol\" */]);
    mySocket.addEventListener('open', function (evt) { console.log(\"We are Open\"); evt.target.send(\"Hello\"); });
    mySocket.addEventListener('message', function(evt) { console.log(\"We got a message: \", evt.data); evt.target.close(); });
    mySocket.addEventListener('close', function(evt) { console.log(\"The Socket was Closed:\", evt.code, evt.reason); });
    mySocket.addEventListener('error', function(evt) { console.log(\"The socket had an error\", evt.error); });
    \n

    Advanced Interface

    \n
    var WS = require('nativescript-websockets');

    var mySocket = new WS(\"ws://echo.websocket.org\",{protocols: [/* 'chat', 'video' */], timeout: 6000, allowCellular: true, headers: { 'Authorization': 'Basic ...' }});
    mySocket.on('open', function(socket) { console.log(\"Hey I'm open\"); socket.send(\"Hello\"); });
    mySocket.on('message', function(socket, message) { console.log(\"Got a message\", message); });
    mySocket.on('close', function(socket, code, reason) { console.log(\"Socket was closed because: \", reason, \" code: \", code); });
    mySocket.on('error', function(socket, error) { console.log(\"Socket had an error\", error);});
    \n

    Browser Based WebSockets

    \n

    The browser based WebSockets are virtually identical to what you would get if you were using a Browser; they are automatically opened when you create it; all four events have "event" objects with different values. You are not allowed to re-open a closed socket and you have no control over any additional features.

    \n

    Create and OPENS a new BROWSER based WebSocket

    \n

    new WebSocket(url, [protocols]);

    \n
    Parameters
    \n
      \n
    • URL - (String) - Web Socket URL to open
      • \n
    • Protocols - OPTIONAL (Array of String) - valid list protocols. Please see limitations note.
      • \n
    \n

    Attaches an event to the WebSocket

    \n

    ****#### .attachEventListener(EventName, function)

    \n

    .on(EventName, function)

    \n
    Parameters
    \n
      \n
    • EventName - (String) can be "open", "close", "message" and "error"
      • \n
    • function - (Function) the function that will be called when the event occurs
      • \n
    \n

    Advanced WebSockets

    \n

    The Advanced WebSockets allow you a lot more control over setting up and creating; in addition if they are closed; you can re-open it without having to reset your events.

    \n

    Create a new Advanced WebSocket

    \n

    var WS = require('nativescript-websockets'); var ws = new WS(url, options);

    \n
    Parameters
    \n
      \n
    • URL - Url to Open
      • \n
    • Options\n** protocols - (Array of string) - Valid protocols. (See Limitation note)\n** timeout - timeout (Defaults to 60,0000ms on IOS amd 10,000ms on Android, setting this to 0 disables timeouts)\n** allowCellular (ios only, defaults to True) - can disable the WebSocket from going over the cellular network\n** sslSocketFactory (android only, defaults to null) - you can pass in your ssl socket factory you want to use.
      • \n
    \n

    Attaches an event to the WebSocket

    \n

    .attachEventListener(EventName, function, passedThis)

    \n

    .on(EventName, function, passedThis)

    \n
    Parameters
    \n
      \n
    • EventName - (String) can be "open", "close", "message" and "error"
      • \n
    • Function - (Function) the function that will be called when the event occurs
      • \n
    • passedThis - the "this" you want the Function to have
      • \n
    \n

    Opens the WebSocket

    \n

    .open()

    \n
    Notes: in the Advanced WebSocket you can re-open a closed WebSocket...
    \n

    Common Functions between Advanced and Browser WebSockets

    \n

    Closes the open Socket

    \n

    .close(code, reason)

    \n
    Parameters
    \n
      \n
    • code - OPTIONAL (Number) - code
      • \n
    • reason - OPTIONAL (String) - reason
      • \n
    \n

    Sends a Text or Binary Message

    \n

    .send(message)

    \n
    Parameters
    \n
      \n
    • message - String or Array/ArrayBuffer - Text string or Binary Message to send
      • \n
    \n

    Retrieves the current State

    \n

    .readyState

    \n
    Values:
    \n
      \n
    • 0 - Connection
      • \n
    • 1 - Open
      • \n
    • 2 - Closing
      • \n
    • 3 - Closed
      • \n
    \n

    The URL you opened

    \n

    .url

    \n

    Returns the protocol negotiated

    \n

    .protocol

    \n
    Please see notes on limitations.
    \n

    Returns true if on IOS

    \n

    .ios

    \n

    Return true if on Android

    \n

    .android

    \n

    Remove an Event Listener

    \n

    .removeEventListener (EventName, function)

    \n

    .off(EventName, function)

    \n
    Parameters
    \n
      \n
    • EventName - (String) - Name of Event (open, close, message, error)
      • \n
    • function - (optional Function) - If you don't pass any function to this; this will remove ALL event listeners for that event, otherwise it will just remove that one event listener.
      • \n
    \n

    Check to see if it is open

    \n

    .isOpen()

    \n
    Returns true if the connection is open
    \n

    Check to see if it is closed

    \n

    .isClosed()

    \n
    Returns true if the connection is closed
    \n

    Check to see if it is connecting

    \n

    .isConnecting()

    \n
    Returns true if the connection is connecting
    \n

    Check to see if the connection is closing

    \n

    .isClosing()

    \n
    Returns true if it is in the process of closing...
    \n

    Tutorials

    \n

    Need a little bit more help getting up and running with NativeScript Websockets? Check out these tutorials for NativeScript on the subject.

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-sqlite-rxstorage-adapter":{"name":"@herefishyfish/nativescript-sqlite-rxstorage-adapter","version":"1.0.3","license":"Apache-2.0","readme":"

    @herefishyfish/nativescript-sqlite-rxstorage-adapter

    \n
    npm i @herefishyfish/nativescript-sqlite-rxstorage-adapter
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/nativescript-camera":{"name":"@synerty/nativescript-camera","version":"4.0.3","license":"Apache-2.0","readme":"

    NativeScript Camera \"Build

    \n

    Welcome to the nativescript-camera plugin for NativeScript framework

    \n

    (Optional) Prerequisites / Requirements

    \n\n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n

    Navigate to project folder and run NativeScript-CLI command

    \n
    tns plugin add nativescript-camera
    \n

    Plugin could be added as a standard npm dependency running command

    \n
    npm install nativescript-camera --save
    \n
    \n

    Note: the --save flag will add the plugin as dependency in your package.json file

    \n
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
    requestPermissions()Check required permissions for using device camera.
    isAvailable()Is the device camera available to use.
    \n

    CameraOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    width0Defines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    height0Defines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    keepAspectRatiotrueDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
    saveToGallerytrueDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
    cameraFacingrearThe initial camera facing. Use 'front' for selfies.
    \n
    \n

    Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

    \n
    \n

    Usage

    \n

    Requesting permissions

    \n

    Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    camera.requestPermissions();
    \n
    \n

    Note: Older versions won't be affected by the usage of the requestPermissions method.

    \n
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    var camera = require(\"nativescript-camera\");
    \n
    import * as camera from \"nativescript-camera\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to recieve image asset

    \n
    \n
    var imageModule = require(\"ui/image\");
    camera.takePicture()   
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new imageModule.Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";
    camera.takePicture().
        then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    var imageModule = require(\"ui/image\");

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options)   
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options).
        then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    var isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/paypal":{"name":"@abbieben/paypal","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbox-ssi":{"name":"nativescript-toolbox-ssi","version":"3.0.8","license":{"type":"MIT","url":"https://github.com/whins/nativescript-toolbox/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Toolbox

    \n

    This fork removes 'prefs -:- root=' from ios. That string will cause apps to be rejected.

    \n

    A NativeScript module that is a composition of useful classes, tools and helpers.

    \n

    The module contains the following sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    crypto-jsLibrary of crypto standards.
    JS-YAMLYAML 1.2 parser / writer.
    markdownMarkdown parser.
    MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
    nativescript-apiclientSimply call HTTP based APIs.
    nativescript-batchImplement batch operations.
    nativescript-bitmap-factoryCreate and manipulate bitmap images.
    nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
    nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
    nativescript-lazyProvides an OOP version of the build-in lazy function.
    nativescript-routed-valuesImplement routed value graphs.
    nativescript-sqlite (free)Provides sqlite actions.
    nativescript-stringformatHelpers for handling strings.
    nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-toolbox
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import Toolbox = require('nativescript-toolbox');
    \n

    The module provides the following function that are short hands for the included sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
    asBitmapReturns a value as bitmap object.
    asEnumerableReturns a value as sequence.
    createBitmapCreates a new bitmap.
    decryptDecrypts a value / an object with AES.
    encryptEncrypts a value / an object with AES.
    formatFormats a string.
    formatArrayFormats a string.
    fromMarkdownConverts Markdown code.
    fromXmlAlias for 'parseXml'.
    fromYamlAlias for 'parseYaml'.
    getApplicationContextReturns the current application context.
    getClipboardReturns an object that handles the clipboard of the device.
    getNativeViewReturns the native view of the app.
    getOrientationGets the current orientation of the device (based on nativescript-orientation).
    getPlatformReturns information of the current platform.
    getValueTries to return a value / object that is stored in the application settings.
    guidAlias for 'uuid'.
    hashGeneric hash function.
    hasValueChecks if a value / object is stored in the application settings.
    hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
    invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    invokeForOrientationInvokes a callback for specific orientation mode.
    invokeForPlatformInvokes an action for a specific platform.
    isEnumerableChecks if a value is a sequence.
    keepAwakeKeeps the device awake (based on nativescript-insomnia).
    markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
    markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
    md5Hashes a value with MD5.
    newBatchCreates a new batch.
    newClientCreates a new API client.
    nowGets the current time.
    openDatabaseOpens a (SQLite) database (connection).
    openUrlOpen an URL on the device.
    openWifiSettingsOpens the WiFi settings on the device.
    parseXmlParses a XML string to an object.
    parseYamlParses YAML data to an object.
    removeValueRemoves a value / object that is stored in the application settings.
    setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
    setValueStores a value / object in the application settings.
    sha1Hashes a value with SHA-1.
    sha256Hashes a value with SHA-256.
    sha3Hashes a value with SHA-3.
    sha384Hashes a value with SHA-384.
    sha512Hashes a value with SHA-512.
    showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
    startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    toYamlConverts an object / a value to YAML.
    uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
    vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
    \n

    Sub modules

    \n

    crypto-js

    \n

    Here are some examples of common algorithms:

    \n
    Encrypters
    \n
    var AES = require(\"nativescript-toolbox/crypto-js/aes\");
    \n
    Hashes
    \n
    var MD5 = require('nativescript-toolbox/crypto-js/md5');
    var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
    var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
    var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
    var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
    var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
    \n

    JS-YAML

    \n
    var YAML = require('nativescript-toolbox/js-yaml');
    \n

    markdown

    \n
    var Markdown = require('nativescript-toolbox-sw/markdown').markdown;

    var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                              'Maruku');
    var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                               'Maruku');
    \n

    Moment

    \n
    import Moment = require('nativescript-toolbox/moment');
    \n

    nativescript-apiclient

    \n
    import ApiClient = require('nativescript-toolbox/apiclient');
    \n

    nativescript-batch

    \n
    import Batch = require('nativescript-toolbox/batch');
    \n

    nativescript-bitmap-factory

    \n
    import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
    \n

    nativescript-email

    \n
    import Email = require('nativescript-toolbox/email');
    \n

    nativescript-enumerable

    \n
    import Enumerable = require('nativescript-toolbox/enumerable');
    \n

    nativescript-lazy

    \n
    import Lazy = require('nativescript-toolbox/lazy');
    \n

    nativescript-routed-values

    \n
    import RoutedValues = require('nativescript-toolbox/routed-values');
    \n

    nativescript-sqlite

    \n
    var SQLite = require('nativescript-toolbox/sqlite');
    \n

    nativescript-stringformat

    \n
    import StringFormat = require('nativescript-toolbox/stringformat');
    \n

    nativescript-xmlobjects

    \n
    import XmlObjects = require('nativescript-toolbox/xmlobjects');
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rating-dialog":{"name":"nativescript-rating-dialog","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript Rating Dialog

    \n

    \"Build

    \n\n\n

    Installation

    \n
    tns plugin add nativescript-rating-dialog
    \n

    Usage

    \n
    import { RatingDialog, RatingDialogOption } from 'nativescript-rating-dialog';

    let ratingDialog = new RatingDialog();

    const option: RatingDialogOption = {
        title: \"Title\",
        icon: \"favorite\",
        android: {
            positiveButtonText: \"Send\",
            negativeButtonText: \"Cancel\",
            threshold: 3,
            onThresholdCleared: (dialog, rating, thresholdCleared) => {
            },
            onThresholdFailed: (dialog, rating) => {
            },
            onDialogDismiss: (rating) => {
              if (rating < 3) {
                console.log(`Negative Rate of ${rating} out of 5`);
                alert(`Negative Rate of ${rating} out of 5`);
              } else {
                alert(`Positive Rate of ${rating} out of 5`);
                console.log(`Positive Rate of ${rating} out of 5`);
              }
            }
        },
        ios: {
            onPositiveButtonText: \"Done\",
            onNegativeButtonText: \"Send Feedback\",
            onPositiveRate: (rating) => {
              console.log('Positive', rating);
            },
            onNegativeRate: (rating) => {
              console.log('Negative', rating);
            },
            onDismiss: () => {
              console.log('Dismiss');
            }
        }
    };

    ratingDialog.show(option);
    \n

    API

    \n

    Rating Dialog Option

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    iconstringSet icon (use app icon as default) (optional).
    titlestringSet title
    textColorstringSet title text color (optional)
    backgroundColorstringSet background color (optional)
    androidAndroidRatingDialogOptionSet android options (optional)
    iosIOSRatingDialogOptionSet iOS options (optional)
    \n

    Android Rating Dialog Option

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    thresholdnumberSet threshold (number of rating) to trigger the feedback (default is 2)
    positiveButtonTextColorstringSet positive button text color (optional)
    negativeButtonTextColorstringSet negative buttonText color (optional)
    positiveButtonTextstringSet positive button text
    negativeButtonTextstringSet negative button text (optional)
    ratingBarColorstringSet rating bar color (optional)
    ratingBarBackgroundColorstringSet rating bar background color (optional)
    playstoreUrlstringSet playstore url (to redirect user to the app on app store) (optional)
    feedbackFormAndroidRatingDialogFeedbackFormSet feedback form options (optional)
    onThresholdCleared (ratingDialog: any, rating: number, thresholdCleared: boolean)Callback FunctionSet onThresholdCleared callback which fired when your rating score is greater than the threshold. (override the default redirection to Google Play) (optional)
    onThresholdFailed (ratingDialog: any, rating: number, thresholdCleared: boolean)Callback FunctionSet onThresholdFailed callback which fired when your rating score is less than the threshold. (use when you want to show your custom feedback form) (optional)
    onRatingChanged (rating: number, thresholdCleared: boolean)Callback FunctionSet onRatingChanged callback which fires when the rating changed (optional)
    onRatingBarFormSumbit (feedback: string)Callback FunctionSet onRatingBarFormSumbit callback which fires when the rating is submitted (optional)
    onDialogDismiss(rating: number)Callback FunctionSet onDialogDismiss callback which fires when the user dismissed the dialog (optional)
    \n

    Android RatingDialog Feedback Form

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    formTitlestringSet form title
    formSubmitTextstringSet form submit button text
    cancelTextstringSet cancel button text
    feedbackFormHintstringSet feedback form hint (optional)
    feedBackTextColorstringSet feedBack text color (optional)
    \n

    iOS Rating Dialog Option

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    subtitlenumberSet subtitle (optional) (default is: "Please rate your experience")
    onPositiveButtonColorstringSet positive button color (optional)
    onNegativeButtonColorstringSet negative button color (optional)
    onPositiveButtonTextstringSet positive button text (optional)
    onNegativeButtonTextstringSet negative button text (optional)
    positiveTextstringSet positive text (optional) (default is: "Awesome!")
    negativeTextstringSet negative text (optional) (default is: "Darn. we should have been better.")
    textColorstringSet tex color (optional)
    emptyStarImagestringSet name of the empty star image resource (optional)
    fullStarImagestringSet name of the full star image resource (optional)
    dismissButtonColorstringSet dismiss button color (optional)
    itunesIdstringSet itunesId (optional)
    onPositiveRate (rating: number)Callback FunctionSet onPositiveRate callback which fires when the user chose more than 3 stars and click the rate (optional)
    onNegativeRate (rating: number)Callback FunctionSet onNegativeRate callback which fires when the user chose less than 4 stars and click the rate (optional)
    onDismiss ()Callback FunctionSet onDismiss callback which fires when the user dismissed that screen without choosing anything (optional)
    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n

    For Android we're using the Smart App Rate by Codemy,\nand for iOS MBRateApp by MatiBot.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-arthtech":{"name":"nativescript-opentok-arthtech","version":"2.1.4","license":"MIT","readme":"

    Nativescript OpenTok

    \n

    \"npm\"\n\"npm\"

    \n

    A Nativescript plugin for the OpenTok iOS and Android SDK.

    \n

    OpenTok: https://tokbox.com/developer/

    \n

    Getting Started

    \n

    Requirements

    \n
      \n
    • API Key with OpenTok. Get one here.
      • \n
    • Ability to generate a valid session id (either through OpenTok account or back-end service)
      • \n
    • Ability to generate a valid token (either through OpenTok account or back-end service)
      • \n
    • Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported.
      • \n
    \n

    Installation

    \n

    Node Package Manager (NPM)

    \n
      \n
    • npm install nativescript-opentok --save
      • \n
    \n

    Integration

    \n

    Routed Sessions

    \n
    View
    \n

    You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

    \n

    The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

    \n
    <StackLayout id=\"subscriber\" width=\"100%\" height=\"100%\"></StackLayout>
    <OT:TNSOTPublisher id=\"publisher\" verticalAlignment=\"top\" horizontalAlignment=\"right\" margin=\"10\" width=\"100\" height=\"100\"></OT:TNSOTPublisher>
    \n

    Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

    \n
    import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

    private _apiKey:string = 'API_KEY';
    private _sessionId: string = 'SESSION_ID';
    private _token: string = 'TOKEN';

    private publisher: TNSOTPublisher;
    private subscriber: TNSOTSubscriber;

    private session: TNSOTSession;

    constructor(private page: Page) {
       super();
       this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
       this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
       this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber');
       this.initPublisher();
       this.initSubscriber();
    }

    initPublisher() {
       this.session.connect(this._token);
       this.publisher.publish(this.session, '', 'HIGH', '30');
       this.publisher.events.on('streamDestroyed', (result) => {
           console.log('publisher stream destroyed');
       });
    }

    initSubscriber() {
       this.session.events.on('streamCreated', () => {
           this.subscriber.subscribe(this.session);
       });
    }
    \n

    Special Articles

    \n\n

    Images

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iPhoneiPad
    \"iPhone\"iPad
    \n

    Notes

    \n
      \n
    • Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead.
      • \n
    • TNS stands for Telerik NativeScript
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-masked-text-field":{"name":"nativescript-masked-text-field","version":"4.0.3","license":"Apache-2.0","readme":"

    NativeScript Masked Text Field widget

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-masked-text-field

    \n

    This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

    \n

    Instance Properties

    \n
      \n
    • \n

      mask - string
      \nGets or sets the mask for the text field. Possible tokens in the mask:

      \n
        \n
      • 0 - Digit
        • \n
      • 9 - Digit or space
        • \n
      • # - Digit or + or -
        • \n
      • L - ASCII Letter
        • \n
      • ? - ASCII Letter or space
        • \n
      • & - Non-whitepsace character
        • \n
      • C - Any charcter
        • \n
      • A - ASCII Letter or digit
        • \n
      • a - ASCII Letter or digit or space
        • \n
      \n

      If you want to escape any token character you can use \\ (for example \\9)

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
        <StackLayout>
            <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
        </StackLayout>
    </Page>
    \n

    Usage in Angular

    \n

    In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

    \n
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    // ......
    @NgModule({
        // ......
        imports: [
            // ......
            MaskedTextFieldModule,
            // ......
        ],
        // ......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            MaskedTextFieldModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public value = \"\";
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-masked-text-field
    $ cd nativescript-masked-text-field
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zxing-compat":{"name":"nativescript-zxing-compat","version":"1.5.3","license":{"type":"APACHE","url":"https://github.com/sergio-irigoyen/nativescript-zxing/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    NativeScript ZXing Compat

    \n

    This is a fork of NativeScript ZXing where the only change is the removal of the platforms/android folder because of compatibility issues with nativescript-barcodescanner.

    \n

    Please refer to that project for more information on installation and usage.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@olinger/nativescript-exoplayer":{"name":"@olinger/nativescript-exoplayer","version":"4.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"npm\"\n\"Twitter

    \n

    NativeScript ExoPlayer

    \n

    A NativeScript plugin to provide the ability to play local and remote videos using Google's ExoPlayer.

    \n

    Developed by

    \n

    \"MasterTech\"

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Google ExoPlayeriOS AVPlayer
    For a 100% NativeScript plugin use the NativeScript-VideoPlayer.
    \n

    Based on

    \n

    This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

    \n

    Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

    \n

    The Google ExoPlayer adds about a meg and a half plugin to the Android application.

    \n

    Sample Usage

    \n
                Sample 1             |              Sample 2\n
    \n

    -------------------------------------| -------------------------------------\n\"Sample | \"Sample

    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add nativescript-exoplayer

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:exoplayer=\"nativescript-exoplayer\">
            <StackLayout>
                   
                <exoplayer:Video id=\"nativeexoplayer\"
                controls=\"true\" finished=\"{{ videoFinished }}\"
                loop=\"true\" autoplay=\"false\" height=\"280\" 
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
                
            </StackLayout>
    </Page>
    \n

    Angular Native (NativeScript Angular) Usage

    \n
    // somewhere at top of your component or bootstrap file
    import {registerElement} from \"nativescript-angular/element-registry\";
    registerElement(\"exoplayer\", () => require(\"nativescript-exoplayer\").Video);
    // documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
    \n

    With AngularNative you have to explicitly close all components so the correct template code is below.

    \n
      <exoplayer
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\" 
          height=\"300\"></exoplayer>
    \n

    Properties

    \n
      \n
    • src - required
      • \n
    \n

    Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n
      \n
    • enableSubtitles
      • \n
    \n

    By default, subtitle support is off. Use this flag to turn them on.

    \n
      \n
    • subtitles
      • \n
    \n

    Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

    \n
      \n
    • autoplay - (boolean) - optional
      • \n
    \n

    Set if the video should start playing as soon as possible or to wait for user interaction.

    \n
      \n
    • finished - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n
      \n
    • controls - (boolean) - optional
      • \n
    \n

    Set to use the native video player's media playback controls.

    \n
      \n
    • muted - (boolean) - optional
      • \n
    \n

    Mutes the native video player.

    \n
      \n
    • loop - (boolean) - optional
      • \n
    \n

    Sets the native video player to loop once playback has finished.

    \n
      \n
    • fill - (VideoFill) - optional
      • \n
    \n

    Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

    \n

    iOS:

    \n
      \n
    • VideoFill.default = AVLayerVideoGravityResize
      • \n
    • VideoFill.aspect = AVLayerVideoGravityResizeAspect
      • \n
    • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill
      • \n
    \n

    See here for explanation.

    \n
      \n
    • playbackReady - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video is ready to play.

    \n
      \n
    • seekToTimeComplete - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the video has finished seekToTime.

    \n
      \n
    • observeCurrentTime - (boolean) - optional
      • \n
    \n

    If set to true, currentTimeUpdated callback is possible.

    \n
      \n
    • currentTimeUpdated - (function) - optional
      • \n
    \n

    Attribute to specify an event callback to execute when the time is updated.

    \n

    API

    \n
      \n
    • play() - Start playing the video
      • \n
    • pause() - Pause the video
      • \n
    • seekToTime(time: number) - Seek the video to a time (milliseconds)
      • \n
    • getCurrentTime() - Returns the current time in the video duration (milliseconds)
      • \n
    • getDuration() - Returns the duration of the video (milliseconds)
      • \n
    • destroy() - Destroy the video player and free resources
      • \n
    • mute(boolean) - Mute the current video
      • \n
    • setVolume() - Set the volume - Must be between 0 and 1.
      • \n
    \n

    Android only

    \n
      \n
    • stop() - Stop the playback - this resets the player and remove the video src
      • \n
    \n

    Breaking Changes

    \n
      \n
    • Android will now attach/detach to the application suspend/resume and de-register/re-register video
      • \n
    • Subtile support will by default be disabled.
      • \n
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-carousel":{"name":"@nstudio/nativescript-carousel","version":"8.0.3","license":"MIT","readme":"

    @nstudio/nativescript-carousel

    \n

    A simple carousel component for NativeScript.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSupportedVersionNativeView
    iOSYesiOS 8.1+DKCarouselView
    AndroidYesAPI 15+ViewPager with PageIndicatorView
    \n

    Installation

    \n

    NativeScript 7+:

    \n
    npm install @nstudio/nativescript-carousel
    \n

    NativeScript less than NS7:

    \n
    npm install nativescript-carousel@6.1.1
    \n

    Limitations

    \n
      \n
    • (iOS) PagerIndicator animations not available for iOS, only Android.
      • \n
    • (Android) Auto- and Infinite-paging not available.
      • \n
    • (Android) Carousel still needs to be wrapped in a GridLayout for the indicator to overlap.
      • \n
    \n

    Attributes - Common

    \n
      \n
    • items optional (must be used with itemTemplate)
      • \n
    \n

    Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

    \n
      \n
    • itemTemplate optional (must be used with items)
      • \n
    \n

    Defines the view template for each slide-view to be generated.

    \n
      \n
    • selectedPage optional
      • \n
    \n

    Sets/Gets the active page by index

    \n
      \n
    • showIndicator optional
      • \n
    \n

    Shows or hides the page-indicator

    \n
      \n
    • indicatorColor optional
      • \n
    \n

    Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

    \n
      \n
    • indicatorColorUnselected
      • \n
    \n

    Sets the color of unselected indicators

    \n
      \n
    • indicatorOffset optional
      • \n
    \n

    By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

    \n

    Attributes - iOS specific

    \n
      \n
    • finite optional
      • \n
    \n

    If true last slide will wrap back to first and visa versa

    \n
      \n
    • bounce optional
      • \n
    \n

    If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

    \n
      \n
    • autoPagingInterval optional
      • \n
    \n

    Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

    \n
      \n
    • scrollEnabled optional
      • \n
    \n

    Enables/Disables user scroll on the Carousel.

    \n
      \n
    • ios
      • \n
    \n

    Returns the DKCarouselView object.

    \n

    Attributes - Android specific

    \n
      \n
    • android
      • \n
    \n

    Returns the ViewPager object.

    \n
      \n
    • indicatorAnimation
      • \n
    \n

    Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

    \n
      \n
    • indicatorAnimationDuration
      • \n
    \n

    Sets the pager-indicator animation duration in milliseconds. Default is 500.

    \n
      \n
    • indicatorAlignment
      • \n
    \n

    Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

    \n
      \n
    • indicatorRadius
      • \n
    \n

    Sets the pager-indicator dot radius.

    \n
      \n
    • indicatorPadding
      • \n
    \n

    Sets the pager-indicator dot padding.

    \n
      \n
    • pageIndicatorCount
      • \n
    \n

    Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Indicator animations (Android only!)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NONECOLORSCALESLIDE
    \"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WORMTHIN_WORMFILLDROPSWAP
    \"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
    \n

    Changelog

    \n

    8.0.0

    \n
      \n
    • Moved under @nstudio scope
      • \n
    • gradle plugin to use implementation
      • \n
    \n

    7.0.1

    \n
      \n
    • Hotfix release: Fixes issues with the @NativeClass() decorator.
      • \n
    \n

    7.0.0

    \n
      \n
    • Plugin updated to support NativeScript v7.0 release. Thanks to @BradMartin, @NathanWalker & @rickwalking for all the PRs and making sure the code compiles & runs. :clap:
      • \n
    \n

    6.1.0

    \n
      \n
    • Fix for iOS safe-area issues. No need to use the custom css-padding-hack any more.
      • \n
    • DKCarouselView pod updated to version 2.5.0 (fix safe-area layout).
      • \n
    • Known bugs: Orientation change render-issues on iOS (DKCarouselView) (help wanted).
      • \n
    • Demos updated.
      • \n
    \n

    6.0.0

    \n
      \n
    • NativeScript 6.0 & AndroidX migration.
      • \n
    • IndicatorView gradle bumped to 1.0.3 (androidx).
      • \n
    • Some refactorings on the Android side for the plugin to work better with Angular & Vue.
      • \n
    • Demos updated, again.
      • \n
    • Instructions for each demo updated.
      • \n
    \n

    4.2.5

    \n
      \n
    • Fix for the dreadded PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! error on Android.
      • \n
    • Hotfix on the AndroidX migration.
      • \n
    • Minor refactor in the refresh() function. Safer to call on demand.
      • \n
    • Redesigned all demo apps. Added more advanced examples.
      • \n
    • 4.x will be the last Nativescript 5.x version. All future versions will be Nativescript 6.x only and that includes AndroidX.
      • \n
    \n

    4.2.1

    \n
      \n
    • Hotfix for static items. Sorry!
      • \n
    \n

    4.2.0

    \n
      \n
    • AndroidX update for NS6. Thanks @bradmartin!
      • \n
    • Code cleanup, typings fix.
      • \n
    • Demos updated. Proper Vue-demo added.
      • \n
    \n

    4.1.0

    \n
      \n
    • Added setter for pageIndicatorCount for Android to enable dynamically changing the length of the carousel items array without Android throwing a crash about the adapster set changing incorrectly.
      • \n
    \n

    4.0.2

    \n
      \n
    • Carousel now extends from GridLayout instead of AbsoluteLayout (better positioning). (Thanks @bradmartin)
      • \n
    \n

    4.0.0

    \n
      \n
    • Mirgration to TypeScript, typings added (Thanks @bradmartin)
      • \n
    • Cleanup in demo app, added ng-demo (Thanks @bradmartin)
      • \n
    \n

    3.1.1

    \n
      \n
    • Made comaptible for recent TNS 3.2.x releases.
      • \n
    • Merged fix regarding the notifyDataSetChanged issue. Thanks @OPADA-Eng
      • \n
    • Fixed issue on iOS when having only 2 slides. Thanks @sitefinitysteve
      • \n
    \n

    3.1.0

    \n
      \n
    • Made comaptible for recent TNS 3.1.x releases.
      • \n
    • Updated Android indicator library to latest version.
      • \n
    \n

    3.0.2

    \n
      \n
    • Fixed an issue with events not working on Android (affected all events).
      • \n
    \n

    3.0.1

    \n
      \n
    • Fixed a critical bug on Android during refresh when navigating back to a view with a Carousel.
      • \n
    \n

    3.0.0

    \n
      \n
    • Finally! Support for TNS 3.x. Big thanks to @MattNer0, @sitefinitysteve, @hristo, @NickIliev
      • \n
    • Fixed the "refresh observable" issue on Android, thanks @MattNer0.
      • \n
    • New property to enable/disable scroll, thanks @sitefinitysteve.
      • \n
    • New property for Android: indicatorOffset, thanks @sitefinitysteve.
      • \n
    • Fixed issue with orientation change on iOS. Please use nativescript-orientation plugin in order to trigger UI-refresh.
      • \n
    • Code refactor & cleanup, introduced common.js
      • \n
    • Updated Pod & Android-IndicatorView to latest version.
      • \n
    \n

    2.4.2

    \n
      \n
    • Added bounce property to the plugin and the Pod. Thanks to @sitefinitysteve.
      • \n
    \n

    2.4.1

    \n
      \n
    • Fixed an issue on iOS when updating Items binding, would not refresh Carousel-view.
      • \n
    \n

    2.4.0

    \n
      \n
    • Added new event, 'pageScrolling'. Thanks to @sitefinitysteve!
      • \n
    • Updated gradle for 'PageIndicatorView' to version 0.1.2
      • \n
    • Updated package.json with 'plugin' metadata to comply with the upcomming 3.0 plugin standard
      • \n
    • Potential fix for ViewPager.populate exception on Android.
      • \n
    \n

    2.3.1

    \n
      \n
    • Potential fix for ng2 & webpack users (Trying to link invalid 'this' to a Java object). Thanks @peterstaev.
      • \n
    • Updated android indicators gradle plugin. New animation: swap!
      • \n
    \n

    2.3.0

    \n
      \n
    • Changed the iOS Pod to point to our own repo! We have the control ;)
      • \n
    • New property available for iOS: indicatorColorUnselected. Allows you to set color to the unselected dots.
      • \n
    \n

    2.2.0

    \n
      \n
    • Fixed issue with the refresh function that could cause a crash or removal of slides (Android).
      • \n
    • Updated Android-indicators gradle library to v0.1.0. More stable and more animations! New animations are: drop, scale and thin_worm.
      • \n
    • Fixed issue with a small white bar being shown if the indicators are disabled (Android). Thanks to @EddyVerbruggen.
      • \n
    • Fixed, another, potential bug that would cause app to crash when resuming he activity (Android).
      • \n
    \n

    2.1.2

    \n
      \n
    • Fixed a critical bug that would cause the app to crash when resuming the activity (Android). Thanks to @EddyVerbruggen.
      • \n
    \n

    2.1.1

    \n
      \n
    • Corrected README, iOS does indeed allow for tap-events innside the CarouselItems. Thanks @terreb!
      • \n
    • Fixed the selectedPage property on iOS, now also returns selected index.
      • \n
    • Updated iOS Podfile to 1.4.12
      • \n
    \n

    2.1.0

    \n
      \n
    • Added Android support!
      • \n
    • Android gets animated pager-indicators made by @romandanylyk.
      • \n
    \n

    1.1.0

    \n
      \n
    • Updated pod with version '1.4.10'
      • \n
    • Fixed page-change-event when finite is set to 'true'
      • \n
    • Added new property 'selectedPage' (set active page by index).
      • \n
    • Updated demo app
      • \n
    \n

    1.0.0

    \n
      \n
    • Initial release
      • \n
    \n

    Author

    \n\n

    Collaborators

    \n\n

    Contributing

    \n

    I will accept pull requests that improve this and assign credit.

    \n
      \n
    • Fork and clone the repository
      • \n
    • cd src && npm run setup
      • \n
    • npm run demo.android for android development
      • \n
    • npm run demo.ios for iOS development
      • \n
    • npm run demo-ng.ios for iOS Angular app
      • \n
    • npm run demo-ng.android for Android Angular
      • \n
    • npm run demo-vue.ios for iOS Vue app
      • \n
    • npm run demo-vue.android for Android Vue
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-sha":{"name":"@plmservices/nativescript-sha","version":"2.0.2","license":"Apache-2.0","readme":"

    NativeScript SHA/HMAC \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build\n\"Donate\"

    \n

    This plugin gives access to native SHA generation code on iOS and Android.

    \n

    Supports SHA-1, SHA-224, SHA-256, SHA-384 and SHA-512.

    \n

    Also support HMAC for all supported SHA hashes.

    \n

    Prerequisites / Requirements

    \n

    None.

    \n

    Installation

    \n

    To install, simply run:

    \n
    ns plugin add @plmservices/nativescript-sha
    \n

    Usage

    \n

    To use this module you must first require() it:

    \n
    // Javascript
    var Sha = require('@plmservices/nativescript-sha');
    var sha = new Sha.Sha();
    \n

    Or if you're using Typescript, import the module:

    \n
    // Typescript
    import { Sha } from '@plmservices/nativescript-sha');
    const sha = new Sha();
    \n

    After you have a reference to the module you call the hash functions:

    \n
    // Typescript
    import { Sha } from '@plmservices/nativescript-sha';
    const sha = new Sha();

    console.log(`Hash is ${sha.Sha256(\"this is our test data\")}`);

    console.log(`Hmac is ${sha.HmacSha256(\"secretkey\", \"this is our test data\")}`);
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    public Sha1(input: string): string;Calculate SHA1 of supplied input data
    public Sha224(input: string): string;Calculate SHA224 of supplied input data
    public Sha256(input: string): string;Calculate SHA256 of supplied input data
    public Sha384(input: string): string;Calculate SHA384 of supplied input data
    public Sha512(input: string): string;Calculate SHA512 of supplied input data
    public HmacSha1(key: string, input: string): string;Calculate HMAC using SHA1 of supplied input data with supplied key
    public HmacSha224(key: string, input: string): string;Calculate HMAC using SHA224 of supplied input data with supplied key
    public HmacSha256(key: string, input: string): string;Calculate HMAC using SHA256 of supplied input data with supplied key
    public HmacSha384(key: string, input: string): string;Calculate HMAC using SHA384 of supplied input data with supplied key
    public HmacSha512(key: string, input: string): string;Calculate HMAC using SHA512 of supplied input data with supplied key
    \n

    TODO

    \n
      \n
    • Angular demo app
      • \n
    • Vue demo app
      • \n
    \n

    Donation

    \n

    If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

    \n

    \"Donate\"

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plantimer/nativescript-auth0":{"name":"@plantimer/nativescript-auth0","version":"0.5.0","license":"Apache-2.0","readme":"

    IMPORTANT

    \n

    This plugin is not production ready and is still in development.\nFeel free to open pull requests and issues !

    \n

    @plantimer/nativescript-auth0

    \n
    npm install @plantimer/nativescript-auth0
    \n

    How does it work

    \n

    The only workflow currently supported is the Authorization Code Grant with PKCE with a refresh token.

    \n

    This will not work if you haven't enabled the refresh token setting !

    \n

    Following the diagram given in the Auth0 docs, the flow is as follows:

    \n
      \n
    • The user is redirected to the Auth0 login page with a PKCE challenge
      • \n
    • The user logs in and is redirected back to the app with an access code
      • \n
    • The stores the refresh token fetched using the access code, the PKCE challenge and the PKCE verifier
      • \n
    • The app fetches the access token using the refresh token
      • \n
    \n

    Usage

    \n

    This plugin uses the InAppBrowser plugin to open the Auth0 login page and the NativeScript Secure Storage plugin to store tokens.

    \n

    Vanilla

    \n
    import { NativescriptAuth0 } from '@plantimer/nativescript-auth0';

    const config = {
      auth0Config: {
        domain: 'mydomain.auth0.com', // Domain name given by Auth0 or your own domain if you have a paid plan
        clientId: 'ClIenTiDgIvEnByAuTh0', // Client ID given by Auth0
        audience: 'https://your.audience.com', // Often a URL
        redirectUri: 'schema:///', // The app's schema (set in AndroidManifest.xml and Info.plist)
      },
      browserConfig: {
        // InAppBrowser configuration
      }
    }

    NativescriptAuth0.setUp(config).signUp(\"email@provider.com\");
    NativescriptAuth0.setUp(config).signIn();
    NativescriptAuth0.setUp(config).getAccessToken();
    \n

    Angular Example

    \n
    // *.component.ts
    import { NativescriptAuth0 } from '@plantimer/nativescript-auth0';

    @Component({
      selector: 'ns-app',
      template: '<Button (tap)=\"login()\">Login</Button>',
    })
    export class AppComponent {
      login() {
        const config = {
          auth0Config: {
            domain: 'mydomain.auth0.com', // Domain name given by Auth0 or your own domain if you have a paid plan
            clientId: 'ClIenTiDgIvEnByAuTh0', // Client ID given by Auth0
            audience: 'https://your.audience.com', // Often a URL
            redirectUri: 'schema:///', // The app's schema (set in AndroidManifest.xml and Info.plist)
          },
          browserConfig: {
            // InAppBrowser configuration
          }
        }

        NativescriptAuth0.setUp(config).signUp(\"email@provider.com\");
        NativescriptAuth0.setUp(config).signIn();
        NativescriptAuth0.setUp(config).getAccessToken();
      }
    }
    \n

    Enable deep linking

    \n

    Deep linking is the ability for the app to open when a link is clicked. This is required for the redirectUri to work.

    \n

    Please follow the InAppBrowser documentation to enable deep linking (i.e. set the schema).

    \n

    Ideas and issues

    \n

    If you have any ideas, issues or security concerns, please open an issue !

    \n

    License

    \n

    This repository is available under the MIT License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pedometer":{"name":"nativescript-pedometer","version":"2.1.0","license":"MIT","readme":"

    NativeScript Pedometer plugin

    \n\n

    Supported platforms

    \n
      \n
    • iOS 8 (the newer the OS the more features are available)
      • \n
    • Android, any device with a step counter sensor
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-pedometer
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device and you'll see this:

    \n\n

    API

    \n

    isStepCountingAvailable

    \n

    The key feature of this plugin is counting steps. And it's also the only feature that Android supports.

    \n
    TypeScript
    \n
    // require the plugin
    import { Pedometer } from \"nativescript-pedometer\";

    // instantiate the plugin
    let pedometer = new Pedometer();

    pedometer.isStepCountingAvailable().then(avail => {
      alert(avail ? \"Yes\" : \"No\");
    });
    \n
    JavaScript
    \n
    // require the plugin
    var Pedometer = require(\"nativescript-pedometer\").Pedometer;

    // instantiate the plugin
    var pedometer = new Pedometer();

    pedometer.isStepCountingAvailable(function(avail) {
      alert(avail ? \"Yes\" : \"No\");
    });
    \n
    \n

    Providing only TypeScript examples from here on out, but usage it largely similar. Also, I'm leaving out the Promises where they don't add clarity to the code sample.

    \n
    \n

    startUpdates

    \n

    To start receiving step count updates from this moment forward you can invoke startUpdates.\nIf you want historic data on iOS, pass in a custom fromDate.

    \n
    pedometer.startUpdates({
      fromDate: new Date(), // iOS only. Optional, default: now
      onUpdate: result => {
        // see the table below
        console.log(`Pedometer update: ${JSON.stringify(result)}`);
      }
    }).then(() => {
      console.log(\"Pedometer updates started.\");
    }, err => {
      console.log(\"Error: \" + err);
    });
    \n

    The onUpdate callback receives an object containing these properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyiOS?Android?Description
    startDate:white_check_mark::white_check_mark:This is when recording of the currently returned data was started.
    endDate:white_check_mark::white_check_mark:This is when recording of the currently returned data was ended (usually: now).
    steps:white_check_mark::white_check_mark:Step count between startDate and endDate
    distance:white_check_mark::white_medium_square:The distance covered in meters between startDate and endDate.
    floorsAscended:white_check_mark::white_medium_square:The number of floors ascended between startDate and endDate.
    floorsDescended:white_check_mark::white_medium_square:The number of floors descended between startDate and endDate.
    currentPace:white_check_mark: iOS9+:white_medium_square:The current pace in seconds per meter.
    currentCadence:white_check_mark: iOS9+:white_medium_square:The current cadence in steps per second.
    averageActivePace:white_check_mark: iOS10+:white_medium_square:The average pace while active in seconds per meter between startDate and endDate.
    \n

    If you want to check beforehand if things like currentPace are available,\nthere's a few functions similar to isStepCountingAvailable that you can invoke:

    \n
      \n
    • isDistanceAvailable
      • \n
    • isFloorCountingAvailable
      • \n
    • isPaceAvailable
      • \n
    • isCadenceAvailable
      • \n
    \n

    stopUpdates

    \n

    You can wire up a Promise but there's no real need.

    \n
    pedometer.stopUpdates();
    \n

    query (iOS)

    \n

    Instead of listening to "live" updates you can query historic data:

    \n
    pedometer.query({
      fromDate: new Date(new Date().getTime() - (1000 * 60 * 60)),
      toDate: new Date() // default
    }).then(result => {
      // see the table at 'startUpdates' above
      console.log(`Pedometer update: ${JSON.stringify(result)}`);
    });
    \n

    startEventUpdates (iOS)

    \n

    From iOS 10 onwards it's possible to get notified whenever the device detects a switch\nbetween a 'paused' and 'resumed' state (so starting/stopping walking).

    \n

    To check beforehand whether or not this feature is availbe,\ncall isEventTrackingAvailable (which has a similar API to isStepCountingAvailable).

    \n
    pedometer.startEventUpdates({
      onUpdate: result => {
        // see the table below
        console.log(\"Pedometer event update: \" + JSON.stringify(result));
      }
    }).then(() => {
      console.log(\"Pedometer event updates started.\");
    );
    \n

    The onUpdate callback receives an object containing these properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    dateThe moment the event occured.
    typeEither "pause" or "resume".
    \n

    Changelog

    \n
      \n
    • 2.0.0 Android support added.
      • \n
    • 1.0.0 Initial release, iOS only, but full featured.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telerik-reporting":{"name":"nativescript-telerik-reporting","version":"1.0.3","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript plugin for easy access to Telerik Rporting REST API.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-telerik-reporting

    \n

    This command automatically installs the necessary files, as well as stores nativescript-telerik-reporting as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    ReportingClient

    \n

    Methods

    \n
      \n
    • constructor(ReportingClientOptions)
      \nCreates a reporting client instance with the given serverUrl. Note this should be the root of your site where you host the REST service and should not include /api/reports in it.
      \nAlso you can send additionalHeaders which will be sent with every request. Useful for sending authentication in case your reporting service requires authentication.
      • \n
    • getAvailableDocumentFormats(): Promise<DocumentFormat[]>
      \nGets an array of supported document export formats by the server. This method can be called without registering the client. (API Reference)
      • \n
    • register(): Promise
      \nRegisters the client with the server. (API Reference)
      • \n
    • unregister(): Promise
      \nUnregisters the client from the servers. You need to call this once you finished using the reporting client so it can free up resources on the server. (API Reference)
      • \n
    • getReportParameters(ReportSource): Promise<ReportParameter[]>
      \nGets info about the parameters for the given reports. Also can be used to check the validity of the given parameters for the given report. (API Reference)
      • \n
    • createInstance(ReportSource): Promise
      \nCreates a ReportingInstance that can be used to render and download reports from the server. (API Reference)
      • \n
    \n

    ReportingInstance

    \n

    Methods

    \n
      \n
    • createDocument(DocumentFormatKey): Promise
      \nCreates a ReportingDocument with the given export format. (API Reference)
      • \n
    • destroy(): Promise
      \nDestroys the reporting instance from the server. It is important to call this method once you finish your work so it can free the resources on the server. (API Reference)
      • \n
    \n

    ReportingDocument

    \n

    Methods

    \n
      \n
    • getInfo(): Promise
      \nGets info about the rendered report document, for example if it is ready on the server, how many pages it has, etc.(API Reference
      • \n
    • download(File?): Promise
      \nDownloads the prepared document from the server. By default it names the file with documentId adds an appropriate extension and saves the file in the device specific temp folder. In case you need to save the file somewhere else, or need to name it differently you can send a File instance to this method.
      • \n
    • getPage(number): Promise
      \nGets information about the given page. (API Reference)
      • \n
    • destroy(): Promise
      \nDestroys the reporting document from the server. It is important to call this method once you finish your work so it can free the resources on the server. (API Reference)
      • \n
    \n

    Usage

    \n

    A typical usage scenario is when you want to generate a report on your server and the download the file in an appropriate format (for example a PDF document). Below is an example how you can make this. You start by creating a client with your server's URL. Then you register your client, create an instance and a document. Finally you download the document to the mobile device.

    \n
    const req: ReportSource = {
        report: \"Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null\",
        parameterValues: {
            OrderNumber: \"SO51081\",
            ForYear: 2003,
            ForMonth: 7,
        },
    };
    const reportingClient = new ReportingClient({ serverUrl: \"https://.....\" });
    reportingClient.register()
        .then(() => reportingClient.createInstance(req))
        .then((instance) => {
            instance.createDocument({ format: documentFormat } as any).then((document) => {
                document.download().then((file) => {
                    utils.ios.openFile(file.path);
                    viewModel.set(\"isBusyIn\", false);

                    document.destroy()
                        .then(() => instance.destroy())
                        .then(() => reportingClient.unregister);
                });
            });
        });
    \n

    It is really important to remember to call destroy() for your instances and documents and to unregister() your client as this frees up resources on the server. Also it is a good idea to reuse clients/instances whenever possible.

    \n

    Demos

    \n

    This repository plain NativeScript demo. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-telerik-reporting
    $ cd nativescript-telerik-reporting
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@angular-dynaform/nativescript":{"name":"@angular-dynaform/nativescript","version":"3.0.3-alpha.0","license":"MIT","readme":"

    angular-dynaform/nativescript

    \n

    \"npm\n\"Build\n\"Coverage\n\"DeepScan\n\"Dependency\n\"Known

    \n

    \"PRs

    \n

    This is the 'nativescript' module of the angular-dynaform library.

    \n

    For further information please see:\nangular-dynaform\nand\nknown issues

    \n

    NativeScript Styling:

    \n

    Supported Selectors
    \nSupported CSS properties

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-interface2":{"name":"nativescript-webview-interface2","version":"1.4.7","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-webview-interface/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    Nativescript-WebView-Interface

    \n

    Nativescript Plugin for bi-directional communication between WebView and Android/iOS

    \n

    Installation

    \n

    From the terminal, go to your app's root folder and execute:

    \n
    tns plugin add nativescript-webview-interface
    \n

    Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

    \n
    cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
    \n

    Usage

    \n

    For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

    \n

    Inside Native App

    \n

    Insert a web-view somewhere in your page.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    ....
    <web-view id=\"webView\"></web-view>
    ....
    </Page>
    \n

    Initialize WebViewInterface Plugin in your javascript file.

    \n
    var webViewInterfaceModule = require('nativescript-webview-interface');
    var oWebViewInterface;

    function pageLoaded(args){
        page = args.object;
        setupWebViewInterface(page) 
    }

    // Initializes plugin with a webView
    function setupWebViewInterface(page){
        var webView = page.getViewById('webView');
        oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
    }
    \n

    Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

    \n

    Use any API Method of WebViewInterface Class

    \n
    function handleEventFromWebView(){
        oWebViewInterface.on('anyEvent', function(eventData){
            // perform action on event
        });
    }

    function emitEventToWebView(){
        oWebViewInterface.emit('anyEvent', eventData);
    }

    function callJSFunction(){
        oWebViewInterface.callJSFunction('functionName', args, function(result){
            
        });
    }
    \n

    If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

    \n
    webView.on('loadFinished', (args) => {
        if (!args.error) {
            // emit event to webView or call JS function of webView
        }
    });
    \n

    Inside WebView

    \n

    Import nativescript-webview-interface.js in your html page.

    \n
    <html>
        <head></head>
        <body>
            <script src=\"path/to/nativescript-webview-interface.js\"></script>
            <script src=\"path/to/your-custom-script.js\"></script>        
        </body>
    </html>
    \n

    Use any API Method of window.nsWebViewInterface inside webview

    \n
    var oWebViewInterface = window.nsWebViewInterface;

    // register listener for any event from native app
    oWebViewInterface.on('anyEvent', function(eventData){
        
    });

    // emit event to native app
    oWebViewInterface.emit('anyEvent', eventData);

    // function which can be called by native app
    window.functionCalledByNative = function(arg1, arg2){
        // do any processing
        return dataOrPromise;
    }
    \n

    API

    \n

    Native App API

    \n

    Constructor:

    \n

    WebViewInterface(webView: WebView, src?: string)

    \n

    webView is an instance of nativescript web-view.

    \n

    src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

    \n

    API Methods of WebViewInterface Class:

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emitted from webView.

    \n

    Callback will be executed with the data sent from webView in any format.

    \n

    off(eventOrCmdName: string, callback?: (eventData: any) => void): void

    \n

    Use this method to de-register listener of any event/command emitted from webView.

    \n

    If callback is not set, all the event listeners for this event will be de-registered.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from native app to webView with data in any format.

    \n

    callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

    \n

    Use this method to call to any javascript function in global scope in webView.

    \n

    Arguments are optional. But if supplied, must be in array format.

    \n

    If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
    \nIf the function execution generates any error, the errorHandler will be called with the error.

    \n

    destroy(): void

    \n

    Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

    \n

    WebView API

    \n

    API Methods available in window.nsWebViewInterface global variable.

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emited from native app.

    \n

    Callback will be executed with the data sent from native app in any format.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from webView to native app with data in any format.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@iloveall/nativescript-bitmap-factory":{"name":"@iloveall/nativescript-bitmap-factory","version":"3.0.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Bitmap Factory

    \n

    A NativeScript module for creating and manipulating bitmap images.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-bitmap-factory
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import BitmapFactory = require(\"nativescript-bitmap-factory\");
    import KnownColors = require(\"color/known-colors\");

    // create a bitmap with 640x480
    var bmp = BitmapFactory.create(640, 480);

    // work with bitmap and
    // keep sure to free memory
    // after we do not need it anymore
    bmp.dispose(() => {
        // draw an oval with a size of 300x150
        // and start at position x=0, y=75
        // and use
        // \"red\" as border color and \"black\" as background color.
        bmp.drawOval(\"300x150\", \"0,75\",
                     KnownColors.Red, KnownColors.Black);
          
        // draw a circle with a radius of 80
        // at the center of the bitmap (null => default)
        // and use
        // \"dark green\" as border color           
        bmp.drawCircle(80, null,
                       KnownColors.DarkGreen);
                    
        // draws an arc with a size of 100x200
        // at x=10 and y=20
        // beginning at angle 0 with a sweep angle of 90 degrees
        // and a black border and a yellow fill color    
        bmp.drawArc(\"100x200\", \"10,20\",
                    0, 90,
                    KnownColors.Black, KnownColors.Yellow);
                       
        // set a yellow point at x=160, y=150
        bmp.setPoint(\"160,150\", \"ff0\");
        
        // draws a line from (0|150) to (300|75)
        // with blue color
        bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
        
        // writes a text in yellow color
        // at x=100, y=100
        // by using \"Roboto\" as font
        // with a size of 10
        bmp.writeText(\"This is a test!\", \"100,100\", {
            color: KnownColors.Yellow,
            size: 10,
            name: \"Roboto\"
        });
        
        // returns the current bitmap as data URL
        // which can be used as ImageSource
        // in JPEG format with a quality of 75%
        var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and in Base64 format
        var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and as ImageSource
        var imgSrc = bmp.toImageSource();
    });
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    asBitmapReturns a value as wrapped bitmap.
    createCreates a new bitmap instance.
    getDefaultOptionsReturns the default options for creating a new bitmap.
    makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
    setDefaultOptionsSets the default options for creating a new bitmap.
    \n

    Platform specific stuff

    \n

    You can access the nativeObject property to access the platform specific object.

    \n

    For Android this is a Bitmap object and for iOS this is an UIImage object.

    \n

    To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

    \n

    Android

    \n

    You also can access the underlying Canvas object by __canvas property.

    \n

    iOS

    \n

    You also can access the underlying CGImage object by__CGImage property.

    \n

    Data types

    \n

    IArgb

    \n

    Stores data of an RGB value with alpha value.

    \n

    These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

    \n
    interface IArgb {
        /**
         * Gets the alpha value.
         */
        a: number;

        /**
         * Gets the red value.
         */
        r: number;

        /**
         * Gets the green value.
         */
        g: number;

        /**
         * Gets the blue value.
         */
        b: number;
    }
    \n

    IBitmapData

    \n

    Used by toObject() method.

    \n
    interface IBitmapData {
        /**
         * Gets the data as Base64 string.
         */
        base64: string;

        /**
         * Gets the mime type.
         */
        mime: string;
    }
    \n

    IFont

    \n

    Font settings.

    \n
    interface IFont {
        /**
         * Anti alias or not.
         */
        antiAlias?: boolean;

        /**
         * Gets the custom forground color.
         */
        color?: string | number | IArgb;
        
        /**
         * Gets the name.
         */
        name?: string;

        /**
         * Gets the size.
         */
        size?: number;
    }
    \n

    IPoint2D

    \n

    Coordinates, can also be a string like 0,0 or 150|300.

    \n
    interface IPoint2D {
        /**
         * Gets the X coordinate.
         */
        x: number;
        
        /**
         * Gets the Y coordinate.
         */
        y: number;
    }
    \n

    IPoint2D

    \n

    Size, can also be a string like 0,0 or 150x300.

    \n
    interface ISize {
        /**
         * Gets the height.
         */
        height: number;
        
        /**
         * Gets the width.
         */
        width: number;
    }
    \n

    OutputFormat

    \n

    Supported output formats.

    \n
    enum OutputFormat {
        /**
         * PNG
         */
        PNG = 1,

        /**
         * JPEG
         */
        JPEG = 2,
    }
    \n

    Bitmap

    \n
    interface IBitmap {
        /**
         * Get the android specific object provided by 'application' module.
         */
        android: AndroidApplication;

        /**
         * Clones that bitmap.
         */
        clone(): IBitmap;

        /**
         * Crops that bitmap and returns its copy.
         */
        crop(leftTop?: IPoint2D | string,
             size?: ISize | string): IBitmap;

        /**
         * Gets or sets the default color.
         */
        defaultColor: IPoint2D | string | number;

        /**
         * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
         */
        dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                            tag?: T): TResult;

        /**
         * Draws a circle.
         */
        drawCircle(radius?: number,
                   center?: IPoint2D | string,
                   color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws an arc.
         */
        drawArc(size?: ISize | string,
                leftTop?: IPoint2D | string,
                startAngle?: number,
                sweepAngle?: number,
                color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a line.
         */
        drawLine(start: IPoint2D | string, end: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Draws an oval circle.
         */
        drawOval(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a rectangle.
         */
        drawRect(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Gets the color of a point.
         */
        getPoint(coordinates?: IPoint2D | string): IArgb;

        /**
         * Gets the height of the bitmap.
         */
        height: number;

        /**
         * Get the iOS specific object provided by 'application' module.
         */
        ios: iOSApplication;

        /**
         * Inserts another image into that bitmap.
         */
        insert(other: any,
               leftTop?: IPoint2D | string): IBitmap;
        
        /**
         * Gets if the object has been disposed or not.
         */
        isDisposed: boolean;

        /**
         * Gets the native platform specific object that represents that bitmap.
         */
        nativeObject: any;

        /**
         * Normalizes a color value.
         */
        normalizeColor(value: string | number | IArgb): IArgb;

        /**
         * Creates a copy of that bitmap with a new size.
         */
        resize(newSize: ISize | string): IBitmap;

        /**
         * Resizes that image by defining a new height by keeping ratio.
         */
        resizeHeight(newHeight: number): IBitmap;

        /**
         * Resizes that image by defining a new (maximum) size by keeping ratio.
         */
        resizeMax(maxSize: number): IBitmap;

        /**
         * Resizes that image by defining a new width by keeping ratio.
         */
        resizeWidth(newWidth: number): IBitmap;

        /**
         * Rotates the image.
         */
        rotate(degrees?: number): IBitmap;

        /**
         * Sets a pixel / point.
         */
        setPoint(coordinates?: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Gets the size.
         */
        size: ISize;

        /**
         * Converts that image to a Base64 string.
         */
        toBase64(format?: OutputFormat, quality?: number): string;

        /**
         * Converts that image to a data URL.
         */
        toDataUrl(format?: OutputFormat, quality?: number): string;

        /**
         * Returns that image as ImageSource.
         */
        toImageSource(): ImageSource;

        /**
         * Converts that image to an object.
         */
        toObject(format?: OutputFormat, quality?: number): IBitmapData;

        /**
         * Writes a text.
         */
        writeText(txt: any,
                  leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

        /**
         * Gets the width of the bitmap.
         */
        width: number;
    }
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bitmap-factory":{"name":"nativescript-bitmap-factory","version":"1.8.1","license":{"type":"MIT","url":"https://github.com/mkloubert/nativescript-bitmap-factory/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Bitmap Factory

    \n

    A NativeScript module for creating and manipulating bitmap images.

    \n

    \"Donate\"

    \n

    NativeScript Toolbox

    \n

    This module is part of nativescript-toolbox.

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-bitmap-factory
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import BitmapFactory = require(\"nativescript-bitmap-factory\");
    import KnownColors = require(\"color/known-colors\");

    // create a bitmap with 640x480
    var bmp = BitmapFactory.create(640, 480);

    // work with bitmap and
    // keep sure to free memory
    // after we do not need it anymore
    bmp.dispose(() => {
        // draw an oval with a size of 300x150
        // and start at position x=0, y=75
        // and use
        // \"red\" as border color and \"black\" as background color.
        bmp.drawOval(\"300x150\", \"0,75\",
                     KnownColors.Red, KnownColors.Black);
          
        // draw a circle with a radius of 80
        // at the center of the bitmap (null => default)
        // and use
        // \"dark green\" as border color           
        bmp.drawCircle(80, null,
                       KnownColors.DarkGreen);
                    
        // draws an arc with a size of 100x200
        // at x=10 and y=20
        // beginning at angle 0 with a sweep angle of 90 degrees
        // and a black border and a yellow fill color    
        bmp.drawArc(\"100x200\", \"10,20\",
                    0, 90,
                    KnownColors.Black, KnownColors.Yellow);
                       
        // set a yellow point at x=160, y=150
        bmp.setPoint(\"160,150\", \"ff0\");
        
        // draws a line from (0|150) to (300|75)
        // with blue color
        bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
        
        // writes a text in yellow color
        // at x=100, y=100
        // by using \"Roboto\" as font
        // with a size of 10
        bmp.writeText(\"This is a test!\", \"100,100\", {
            color: KnownColors.Yellow,
            size: 10,
            name: \"Roboto\"
        });
        
        // returns the current bitmap as data URL
        // which can be used as ImageSource
        // in JPEG format with a quality of 75%
        var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and in Base64 format
        var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and as ImageSource
        var imgSrc = bmp.toImageSource();
    });
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    asBitmapReturns a value as wrapped bitmap.
    createCreates a new bitmap instance.
    getDefaultOptionsReturns the default options for creating a new bitmap.
    makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
    setDefaultOptionsSets the default options for creating a new bitmap.
    \n

    Platform specific stuff

    \n

    You can access the nativeObject property to access the platform specific object.

    \n

    For Android this is a Bitmap object and for iOS this is an UIImage object.

    \n

    To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

    \n

    Android

    \n

    You also can access the underlying Canvas object by __canvas property.

    \n

    iOS

    \n

    You also can access the underlying CGImage object by__CGImage property.

    \n

    Data types

    \n

    IArgb

    \n

    Stores data of an RGB value with alpha value.

    \n

    These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

    \n
    interface IArgb {
        /**
         * Gets the alpha value.
         */
        a: number;

        /**
         * Gets the red value.
         */
        r: number;

        /**
         * Gets the green value.
         */
        g: number;

        /**
         * Gets the blue value.
         */
        b: number;
    }
    \n

    IBitmapData

    \n

    Used by toObject() method.

    \n
    interface IBitmapData {
        /**
         * Gets the data as Base64 string.
         */
        base64: string;

        /**
         * Gets the mime type.
         */
        mime: string;
    }
    \n

    IFont

    \n

    Font settings.

    \n
    interface IFont {
        /**
         * Anti alias or not.
         */
        antiAlias?: boolean;

        /**
         * Gets the custom forground color.
         */
        color?: string | number | IArgb;
        
        /**
         * Gets the name.
         */
        name?: string;

        /**
         * Gets the size.
         */
        size?: number;
    }
    \n

    IPoint2D

    \n

    Coordinates, can also be a string like 0,0 or 150|300.

    \n
    interface IPoint2D {
        /**
         * Gets the X coordinate.
         */
        x: number;
        
        /**
         * Gets the Y coordinate.
         */
        y: number;
    }
    \n

    IPoint2D

    \n

    Size, can also be a string like 0,0 or 150x300.

    \n
    interface ISize {
        /**
         * Gets the height.
         */
        height: number;
        
        /**
         * Gets the width.
         */
        width: number;
    }
    \n

    OutputFormat

    \n

    Supported output formats.

    \n
    enum OutputFormat {
        /**
         * PNG
         */
        PNG = 1,

        /**
         * JPEG
         */
        JPEG = 2,
    }
    \n

    Bitmap

    \n
    interface IBitmap {
        /**
         * Get the android specific object provided by 'application' module.
         */
        android: AndroidApplication;

        /**
         * Clones that bitmap.
         */
        clone(): IBitmap;

        /**
         * Crops that bitmap and returns its copy.
         */
        crop(leftTop?: IPoint2D | string,
             size?: ISize | string): IBitmap;

        /**
         * Gets or sets the default color.
         */
        defaultColor: IPoint2D | string | number;

        /**
         * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
         */
        dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                            tag?: T): TResult;

        /**
         * Draws a circle.
         */
        drawCircle(radius?: number,
                   center?: IPoint2D | string,
                   color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws an arc.
         */
        drawArc(size?: ISize | string,
                leftTop?: IPoint2D | string,
                startAngle?: number,
                sweepAngle?: number,
                color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a line.
         */
        drawLine(start: IPoint2D | string, end: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Draws an oval circle.
         */
        drawOval(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a rectangle.
         */
        drawRect(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Gets the color of a point.
         */
        getPoint(coordinates?: IPoint2D | string): IArgb;

        /**
         * Gets the height of the bitmap.
         */
        height: number;

        /**
         * Get the iOS specific object provided by 'application' module.
         */
        ios: iOSApplication;

        /**
         * Inserts another image into that bitmap.
         */
        insert(other: any,
               leftTop?: IPoint2D | string): IBitmap;
        
        /**
         * Gets if the object has been disposed or not.
         */
        isDisposed: boolean;

        /**
         * Gets the native platform specific object that represents that bitmap.
         */
        nativeObject: any;

        /**
         * Normalizes a color value.
         */
        normalizeColor(value: string | number | IArgb): IArgb;

        /**
         * Creates a copy of that bitmap with a new size.
         */
        resize(newSize: ISize | string): IBitmap;

        /**
         * Resizes that image by defining a new height by keeping ratio.
         */
        resizeHeight(newHeight: number): IBitmap;

        /**
         * Resizes that image by defining a new (maximum) size by keeping ratio.
         */
        resizeMax(maxSize: number): IBitmap;

        /**
         * Resizes that image by defining a new width by keeping ratio.
         */
        resizeWidth(newWidth: number): IBitmap;

        /**
         * Rotates the image.
         */
        rotate(degrees?: number): IBitmap;

        /**
         * Sets a pixel / point.
         */
        setPoint(coordinates?: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Gets the size.
         */
        size: ISize;

        /**
         * Converts that image to a Base64 string.
         */
        toBase64(format?: OutputFormat, quality?: number): string;

        /**
         * Converts that image to a data URL.
         */
        toDataUrl(format?: OutputFormat, quality?: number): string;

        /**
         * Returns that image as ImageSource.
         */
        toImageSource(): ImageSource;

        /**
         * Converts that image to an object.
         */
        toObject(format?: OutputFormat, quality?: number): IBitmapData;

        /**
         * Writes a text.
         */
        writeText(txt: any,
                  leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

        /**
         * Gets the width of the bitmap.
         */
        width: number;
    }
    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maskedinput":{"name":"nativescript-maskedinput","version":"0.0.3","license":"MIT","readme":"\n

    A {N} Masked Input Plugin

    \n

    \"License\" \"npm\" \"npm\" \"GitHub

    \n

    This plugin extends the {N} TextView to allow for input masking.

    \n

    Notes

    \n

    iOS 7+

    \n

    Android API 17+

    \n

    Plugin does not support the use of the keyboardType property from TextView.

    \n

    Plugin will attempt to determine the mask type and display the appropriate keyboardType automatically.

    \n

    Installation

    \n

    Run tns plugin add nativescript-maskedinput

    \n

    Usage

    \n

    To use MaskedInput you need to include it in your XML.

    \n

    Add the following to your page directive.

    \n
    xmlns:mi=\"nativescript-maskedinput\"
    \n

    Use MaskedInput by adding the following XML.

    \n
    <mi:MaskedInput mask=\"1-999-999-9999? x999\" hint=\"1-555-555-5555\" placeholder=\"#\" />
    \n

    Properties

    \n

    mask [string]

    \n

    Get or Set the mask used for input

    \n

    mask options

    \n
      \n
    • 9 is the same as RegEx [0-9]
      • \n
    • a is the same as RegEx [A-Za-z]
      • \n
    • * is the same as RegEx [A-Za-z0-9]
      • \n
    • ? specifies that anything after the ? is optional.
      • \n
    \n
    Supported Seperators
    \n
      \n
    • \n
        \n
      • \n
      \n
      • \n
    • |
      • \n
    • /
      • \n
    • \\
      • \n
    • .
      • \n
    • $
      • \n
    • \n
        \n
      • \n
      \n
      • \n
    • ( )
      • \n
    • [ ]
      • \n
    • { }
      • \n
    \n

    valid [boolean]

    \n

    Returns true or false if the input text matches the mask.

    \n

    Use the FormattedText property or the text property to validate the input.

    \n

    placeholder [string]

    \n

    Gets or Sets the placeholder.

    \n

    Default: _

    \n

    RawText [string]

    \n

    Gets only the text that matches the RegEx pattern from the mask.

    \n

    You cannot validate the RawText property. It will fail.

    \n

    FormattedText [string]

    \n

    Gets the Full text including any seperators as specified in the mask.

    \n

    regEx [string]

    \n

    Gets the regex that was created from the mask so that you can perform your own validation.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@groupsosimple/nativescript-pubnub":{"name":"@groupsosimple/nativescript-pubnub","version":"1.0.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    @groupsosimple/nativescript-pubnub

    \n

    This is a NativeScript plugin wraper for the PubNub SDK. It has implementations for both Android and iOS SDKs. An Angular service is also provided.

    \n
    ns plugin add @groupsosimple/nativescript-pubnub
    \n

    Get keys

    \n

    You will need the publish and subscribe keys to authenticate your app. Get your keys from the PubNub Admin Portal.

    \n

    Import PubNub

    \n

    Using TypeScript

    \n
    import { PubNub } from '@groupsosimple/nativescript-pubnub';
    \n

    Using JavaScript

    \n
    var pubnub = require('@groupsosimple/nativescript-pubnub');
    \n

    Configure PubNub

    \n

    Configure your keys:

    \n
    pubnub = new PubNub({
    \tpublishKey: 'myPublishKey',
    \tsubscribeKey: 'mySubscribeKey',
    \tuuid: 'myUniqueUUID',
    });
    //or
    pubnub = new PubNub().configuration({
    \tpublishKey: 'myPublishKey',
    \tsubscribeKey: 'mySubscribeKey',
    \tuuid: 'myUniqueUUID',
    });
    \n

    Add event listeners

    \n
    pubnub.addListener({
    \tmessage: function (m) {
    \t\t// handle messages
    \t},
    \tpresence: function (p) {
    \t\t// handle presence
    \t},
    \tsignal: function (s) {
    \t\t// handle signals
    \t},
    \tmessageAction: function (ma) {
    \t\t// handle message actions
    \t},
    \tfile: function (event) {
    \t\t// handle files
    \t},
    \tstatus: function (s) {
    \t\t// handle status
    \t},
    });
    \n

    Publish/subscribe

    \n
    var publishPayload = {
    \ttitle: 'greeting',
    \tdescription: 'This is my first message!',
    };

    pubnub.publish('MyChannel', publishPayload, (status) => {
    \tconsole.log(status);
    });

    pubnub.subscribe(['MyChannel'], true);
    \n

    Using the Angular Service

    \n

    Declare the PubNub Angular Service in your root module

    \n
    import { PubNubService } from '@groupsosimple/nativescript-pubnub/angular';

    @NgModule({
    \timports: [...],
    \tdeclarations: [...],
    \tschemas: [...],
    \tproviders: [PubNubService],
    })
    \n

    Inject the service in a component and configure the with your keys

    \n
    @Component()
    export class MainComponent {
    \tconstructor(private pubnubService: PubNubService) {
    \t\tpubnubService.configuration({
    \t\t\tpublishKey: 'myPublishKey',
    \t\t\tsubscribeKey: 'mySubscribeKey',
    \t\t\tuuid: 'myUniqueUUID',
    \t\t});
    \t}
    }
    \n

    After that, you can use the service normally

    \n
    @Component()
    export class SomeComponent {
    \tconstructor(private pubnubService: PubNubService) {
    \t\tpubnubService.subscribe(['MyChannel'], true);
    \t}
    }
    \n

    PubNub Api

    \n
    constructor(config?: PNConfiguration);
    configuration(config: PNConfiguration): PubNub;
    subscribe(channels: string[], withPresence: boolean): void;
    subscribeToChannelGroups(groups: string[], withPresence: boolean): void;
    unsubscribe(channels: string[]): void;
    unsubscribeFromAll(): void;
    unsubscribeFromChannelGroups(groups: string[]): void;
    publish(channel: string, message: Object, responseListener: (status: PNStatus) => void): void;
    addEventListener(event: PNEventListener): void;
    destroy(): void;
    \n

    More Information

    \n

    More information can be seen in the original SDK implementation

    \n\n

    Changelog

    \n
      \n
    • 1.0.0 Initial release
      • \n
    • 1.0.1 Angular service and bug fixes
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n

    Authors

    \n\n

    Appreciation

    \n
      \n
    • Thanks for rickybrown, the developer of ns-pubnub, where some of the iOS implementation was based on.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/preview-cli":{"name":"@nativescript/preview-cli","version":"1.0.5","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-easylink":{"name":"@plmservices/nativescript-easylink","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript Easylink \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build\n\"Donate\"

    \n

    This plugin implements MxChip's Easylink device discovery/configuration protocol.

    \n

    NOTE: I am not affiliated with MxChip and this project is not endorsed by them.\nThe native code that this plugin uses is publicly supplied by MxChip and all rights and credit for the native code belongs to MxChip.

    \n

    Prerequisites / Requirements

    \n

    To use this under iOS you must:

    \n
      \n
    • Request the access to the multicast special entitlement directly from Apple
      • \n
    • Create a provisioning profile containing that entitlement
      • \n
    • Create an app.entitlements file containing:
      • \n
    \n
    \t<key>com.apple.developer.networking.wifi-info</key>
    \t<true/>
    \t<key>com.apple.developer.networking.multicast</key>
        <true/>
    \n

    Some helpful information on this can be found at:\nhttps://developer.apple.com/forums/thread/663271

    \n

    Installation

    \n
    ns plugin add @plmservices/nativescript-easylink
    \n

    Usage

    \n
    import * as Easylink from '@plmservices/nativescript-easylink';

    const ssid: string = Easylink.ssid();
    const password: string = 'password';
    const type: number = 4;\t// AWS style
    Easylink.startDiscovery(ssid, password, style);
    Easylink.stopDiscovery();
    Easylink.destroy();
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    public destroy(): void;Releases allocated resources
    public startDiscovery(ssid: string, password: string, type: number): Promise;Start device discovery
    public stopDiscovery(): void;Stops device discovery
    public ssid(): string;Returns the SSID of the locally attached WiFi network
    \n

    TODO

    \n
      \n
    • Angular demo app
      • \n
    • Vue demo app
      • \n
    \n

    Donation

    \n

    If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

    \n

    \"Donate\"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-powerinfo":{"name":"nativescript-powerinfo","version":"1.0.7","license":"MIT","readme":"

    NativeScript Battery & Power Plugin

    \n

    Battery & Power plugin for NativeScript

    \n

    Installation

    \n
    tns plugin add nativescript-powerinfo
    \n

    Usage

    \n

    JavaScript:

    \n
    var power = require(\"nativescript-powerinfo\");

    //Start Power Updates
    power.startPowerUpdates(function(Info) {
        console.log(\"battery charge: \" + Info.percentage + \"%\");
    });

    //Stop Power Updates
    stopPowerUpdates();
    \n

    TypeScript:

    \n
    let power = require(\"nativescript-powerinfo\");

    //Start Power Updates
    power.startPowerUpdates(function(Info) {
        console.log(\"battery charge: \" + Info.percentage + \"%\");
    });

    //Stop Power Updates
    stopPowerUpdates();
    \n

    Info Structure

    \n

    Results from callback:

    \n
      \n
    • \n

      Info.health returns:

      \n
        \n
      • integer containing the current health constant relating to the following.
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_COLD
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_DEAD
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_GOOD
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_OVERHEAT
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_OVER_VOLTAGE
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_UNKNOWN
        • \n
      • android.os.BatteryManager.BATTERY_HEALTH_UNSPECIFIED_FAILURE
        • \n
      \n
      • \n
    • \n

      Info.icon_small returns:

      \n
        \n
      • Integer containing the resource ID of a small status bar icon indicating the current battery state.
        • \n
      \n
      • \n
    • \n

      Info.present returns:

      \n
        \n
      • boolean indicating whether a battery is present.
        • \n
      \n
      • \n
    • \n

      Info.plugged returns:

      \n
        \n
      • integer indicating whether the device is plugged in to a power source; 0 means it is on battery, other constants are different types of power sources.
        • \n
      • android.os.BatteryManager.BATTERY_PLUGGED_AC
        • \n
      • android.os.BatteryManager.BATTERY_PLUGGED_USB
        • \n
      • android.os.BatteryManager.BATTERY_PLUGGED_WIRELESS
        • \n
      \n
      • \n
    • \n

      Info.percent returns:

      \n
        \n
      • integer containing percentage of battery left.
        • \n
      \n
      • \n
    • \n

      Info.level returns:

      \n
        \n
      • integer containing the current battery level, from 0 to Info.scale.
        • \n
      \n
      • \n
    • \n

      Info.scale returns:

      \n
        \n
      • integer containing the maximum battery level.
        • \n
      \n
      • \n
    • \n

      Info.status returns:

      \n
        \n
      • integer containing the current status constant.
        • \n
      • android.os.BatteryManager.BATTERY_STATUS_CHARGING
        • \n
      • android.os.BatteryManager.BATTERY_STATUS_DISCHARGING
        • \n
      • android.os.BatteryManager.BATTERY_STATUS_FULL
        • \n
      • android.os.BatteryManager.BATTERY_STATUS_NOT_CHARGING
        • \n
      • android.os.BatteryManager.BATTERY_STATUS_UNKNOWN
        • \n
      \n
      • \n
    • \n

      Info.technology returns:

      \n
        \n
      • String describing the technology of the current battery.
        • \n
      \n
      • \n
    • \n

      Info.temperature returns:

      \n
        \n
      • integer containing the current battery temperature.
        • \n
      \n
      • \n
    • \n

      Info.voltage returns:

      \n
        \n
      • integer containing the current battery voltage level.
        • \n
      \n
      • \n
    \n

    Android BatteryManager SDK Reference

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@amarseelam/nativescript-photo-editor":{"name":"@amarseelam/nativescript-photo-editor","version":"1.1.1","license":"Apache-2.0","readme":"

    NativeScript Photo Editor

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-photo-editor

    \n

    This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Methods

    \n
      \n
    • editPhoto(options): Promise
      \nOpens the photo editor with the given options. If the user accepts the edited image the promise is resolved with an instance of the new ImageSource. If the user cancels the edit the promise will be rejected.
      • \n
    \n

    Usage

    \n

    Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

    \n
    import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

    const photoEditor = new PhotoEditor();

    photoEditor.editPhoto({
        imageSource: originalImage.imageSource,
        hiddenControls: [
            PhotoEditorControl.Save,
            PhotoEditorControl.Crop,
        ],
    }).then((newImage: ImageSource) => {
        // Here you can save newImage, send it to your backend or simply display it in your app
        resultImage.imageSource = newImage;
    }).catch((e) => {
        console.error(e);
    });
    \n

    Usage in Angular

    \n

    There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

    \n

    Demos

    \n

    This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-photo-editor
    $ cd nativescript-photo-editor
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n

    Credits

    \n
      \n
    • For iOS this uses the iOSPhotoEditor pod (https://cocoapods.org/pods/iOSPhotoEditor)
      • \n
    • For Android uses adjusted code with added cropping from https://github.com/eventtus/photo-editor-android
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-badge-ns-7":{"name":"nativescript-plugin-badge-ns-7","version":"1.0.1","license":"MIT","readme":"

    Nativescript-plugin-badge

    \n

    \"npm\"\n\"npm\"\n\"Commitizen

    \n

    This plugin will allow you to set badge notification.

    \n

    Installation

    \n
    tns plugin add nativescript-plugin-badge
    \n

    Screenshots

    \n

    \"IOS\"

    \n

    \"Android\"

    \n

    Usage

    \n
    ```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    ShortcutBadgerNative
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    requestPremissions():PromiseWill return if user granted the premission or not. See description below
    setBadge(badge:number)set badge
    removeBadge()clear badge
    applyNotification(notification: Notification, badge: number, channelId?: string)See description below
    \n

    Supported Devices (Android)

    \n

    Please check the library used.

    \n

    Premission

    \n

    Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

    \n

    Miui(Xiaomi device) support

    \n

    Since from Xiaomi changed the way to show badge by notification from Miui 6.

    \n

    setBadge will not support Xiaomi devices.

    \n

    If you want to support badges for Xiaomi, you have to send notifications. And use

    \n
    applyNotification({title:'title',body:'body'}, 5, 'channel id');
    \n

    channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

    \n

    Drawback

    \n

    The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nickykln/nativescript-masked-text-field":{"name":"@nickykln/nativescript-masked-text-field","version":"4.0.7","license":"Apache-2.0","readme":"

    NativeScript Masked Text Field widget

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-masked-text-field

    \n

    This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

    \n

    Instance Properties

    \n
      \n
    • \n

      mask - string
      \nGets or sets the mask for the text field. Possible tokens in the mask:

      \n
        \n
      • 0 - Digit
        • \n
      • 9 - Digit or space
        • \n
      • # - Digit or + or -
        • \n
      • L - ASCII Letter
        • \n
      • ? - ASCII Letter or space
        • \n
      • & - Non-whitepsace character
        • \n
      • C - Any charcter
        • \n
      • A - ASCII Letter or digit
        • \n
      • a - ASCII Letter or digit or space
        • \n
      \n

      If you want to escape any token character you can use \\ (for example \\9)

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
        <StackLayout>
            <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
        </StackLayout>
    </Page>
    \n

    Usage in Angular

    \n

    In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

    \n
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    // ......
    @NgModule({
        // ......
        imports: [
            // ......
            MaskedTextFieldModule,
            // ......
        ],
        // ......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            MaskedTextFieldModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public value = \"\";
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-masked-text-field
    $ cd nativescript-masked-text-field
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-openfile":{"name":"nativescript-openfile","version":"0.0.12","license":"MIT","readme":"

    Nativescript Open File Plugin \"android\"

    \n

    Documentation

    \n
    npm i nativescript-openfile
    \n
    var openfile = require(\"nativescript-openfile\");
        openfile(\"file_path\");
    \n
      \n
    • TODO\n
        \n
      • [ ] Support More Files
        • \n
      \n
      • \n
    \n

    Author Elmissouri

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbox-sw":{"name":"nativescript-toolbox-sw","version":"3.0.4","license":{"type":"MIT","url":"https://github.com/whins/nativescript-toolbox/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Toolbox

    \n

    A NativeScript module that is a composition of useful classes, tools and helpers.

    \n

    The module contains the following sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    crypto-jsLibrary of crypto standards.
    JS-YAMLYAML 1.2 parser / writer.
    markdownMarkdown parser.
    MomentA lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
    nativescript-apiclientSimply call HTTP based APIs.
    nativescript-batchImplement batch operations.
    nativescript-bitmap-factoryCreate and manipulate bitmap images.
    nativescript-emailAn Email plugin for use in your NativeScript app. You can use it to compose emails, edit the draft manually, and send it.
    nativescript-enumerableProvides LINQ style extensions for handling arrays and lists.
    nativescript-lazyProvides an OOP version of the build-in lazy function.
    nativescript-routed-valuesImplement routed value graphs.
    nativescript-sqlite (free)Provides sqlite actions.
    nativescript-stringformatHelpers for handling strings.
    nativescript-xmlobjectsHandles XML data as objects similar to LINQ to XML.
    \n

    \"Donate\"

    \n

    License

    \n

    MIT license

    \n

    Platforms

    \n
      \n
    • Android
      • \n
    • iOS
      • \n
    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-toolbox
    \n

    inside your app project to install the module.

    \n

    Usage

    \n
    import Toolbox = require('nativescript-toolbox');
    \n

    The module provides the following function that are short hands for the included sub modules:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    allowToSleepAllows the device to go to sleep mode (based on nativescript-insomnia).
    asBitmapReturns a value as bitmap object.
    asEnumerableReturns a value as sequence.
    createBitmapCreates a new bitmap.
    decryptDecrypts a value / an object with AES.
    encryptEncrypts a value / an object with AES.
    formatFormats a string.
    formatArrayFormats a string.
    fromMarkdownConverts Markdown code.
    fromXmlAlias for 'parseXml'.
    fromYamlAlias for 'parseYaml'.
    getApplicationContextReturns the current application context.
    getClipboardReturns an object that handles the clipboard of the device.
    getNativeViewReturns the native view of the app.
    getOrientationGets the current orientation of the device (based on nativescript-orientation).
    getPlatformReturns information of the current platform.
    getValueTries to return a value / object that is stored in the application settings.
    guidAlias for 'uuid'.
    hashGeneric hash function.
    hasValueChecks if a value / object is stored in the application settings.
    hideStatusBarShort hand function for 'setStatusBarVisibility' for hiding the status bar.
    invokeForConnectivityInvokes logic for a specific connectivity type. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    invokeForOrientationInvokes a callback for specific orientation mode.
    invokeForPlatformInvokes an action for a specific platform.
    isEnumerableChecks if a value is a sequence.
    keepAwakeKeeps the device awake (based on nativescript-insomnia).
    markdownToHtmlShort hand for 'fromMarkdown()' with HTML as target format.
    markdownToJsonShort hand for 'fromMarkdown()' with JSON as target format.
    md5Hashes a value with MD5.
    newBatchCreates a new batch.
    newClientCreates a new API client.
    nowGets the current time.
    openDatabaseOpens a (SQLite) database (connection).
    openUrlOpen an URL on the device.
    openWifiSettingsOpens the WiFi settings on the device.
    parseXmlParses a XML string to an object.
    parseYamlParses YAML data to an object.
    removeValueRemoves a value / object that is stored in the application settings.
    setStatusBarVisibilityChanges the visibility of the device's status bar (based on nativescript-status-bar).
    setValueStores a value / object in the application settings.
    sha1Hashes a value with SHA-1.
    sha256Hashes a value with SHA-256.
    sha3Hashes a value with SHA-3.
    sha384Hashes a value with SHA-384.
    sha512Hashes a value with SHA-512.
    showStatusBarShort hand function for 'setStatusBarVisibility' for showing the status bar.
    startMonitoringForConnectivityStarts monitoring for connectivity (changes). Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    stopMonitoringForConnectivityStops monitoring for connectivity. Requires permissions on Android (android.permission.ACCESS_NETWORK_STATE), e.g.
    toYamlConverts an object / a value to YAML.
    uuidCreates a new unique ID / GUID (s. Create GUID / UUID in JavaScript?).
    vibrateVibrates the device. Requires permissions on Android (android.permission.VIBRATE), e.g. (based on nativescript-vibrate)
    \n

    Sub modules

    \n

    crypto-js

    \n

    Here are some examples of common algorithms:

    \n
    Encrypters
    \n
    var AES = require(\"nativescript-toolbox/crypto-js/aes\");
    \n
    Hashes
    \n
    var MD5 = require('nativescript-toolbox/crypto-js/md5');
    var SHA1 = require('nativescript-toolbox/crypto-js/sha1');
    var SHA256 = require('nativescript-toolbox/crypto-js/sha256');
    var SHA3 = require('nativescript-toolbox/crypto-js/sha3');
    var SHA384 = require('nativescript-toolbox/crypto-js/sha384');
    var SHA512 = require('nativescript-toolbox/crypto-js/sha512');
    \n

    JS-YAML

    \n
    var YAML = require('nativescript-toolbox/js-yaml');
    \n

    markdown

    \n
    var Markdown = require('nativescript-toolbox-sw/markdown').markdown;

    var json = Markdown.parse('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                              'Maruku');
    var html = Markdown.toHTML('Vessel     | Captain\\n-----------|-------------\\nNCC-1701   | James T Kirk\\nNCC-1701 A | James T Kirk\\nNCC-1701 D | Picard',
                               'Maruku');
    \n

    Moment

    \n
    import Moment = require('nativescript-toolbox/moment');
    \n

    nativescript-apiclient

    \n
    import ApiClient = require('nativescript-toolbox/apiclient');
    \n

    nativescript-batch

    \n
    import Batch = require('nativescript-toolbox/batch');
    \n

    nativescript-bitmap-factory

    \n
    import BitmapFactory = require('nativescript-toolbox/bitmap-factory');
    \n

    nativescript-email

    \n
    import Email = require('nativescript-toolbox/email');
    \n

    nativescript-enumerable

    \n
    import Enumerable = require('nativescript-toolbox/enumerable');
    \n

    nativescript-lazy

    \n
    import Lazy = require('nativescript-toolbox/lazy');
    \n

    nativescript-routed-values

    \n
    import RoutedValues = require('nativescript-toolbox/routed-values');
    \n

    nativescript-sqlite

    \n
    var SQLite = require('nativescript-toolbox/sqlite');
    \n

    nativescript-stringformat

    \n
    import StringFormat = require('nativescript-toolbox/stringformat');
    \n

    nativescript-xmlobjects

    \n
    import XmlObjects = require('nativescript-toolbox/xmlobjects');
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-xavier-passport":{"name":"@nstudio/nativescript-xavier-passport","version":"2.0.2","license":{"type":"APACHE","url":"https://github.com/nstudio/nativescript-xavier-passport/blob/master/LICENSE"},"readme":"\n

    NativeScript Xavier Passport

    \n    \n

    NativeScript plugin to scan MRZ data from Passports and Cards for Android and iOS.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n

    \n

    \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    NativeScript Xavier-Passport

    \n

    This is a NativeScript cross platform plugin wrapping the Black Shark Tech Xavier library for IOS and Android.

    \n

    License

    \n

    Our code is 2018-2019, nStudio, LLC. Everything is LICENSED under the APACHE 2.0 License, meaning you are free to include this in any type of program.

    \n

    However, the base Xavier library must be licensed from them see:\nhttps://github.com/BlackSharkTech/Xavier-demo-android\nand\nhttps://github.com/BlackSharkTech/Xavier-demo-ios\nTo get a real license key you need to contact sales @ blacksharktech.com

    \n

    Installation

    \n

    Same plugin works on NativeScript 5.x and above

    \n

    Run tns plugin add @nstudio/nativescript-xavier-passport in your ROOT directory of your project.

    \n

    Android Required Setup

    \n

    In your app/App_Resources/Android/src/main/res/AndroidManifest.xml you need to do the following:

    \n
      \n
    1. Add xmlns:tools="http://schemas.android.com/tools" to the <Manifest ...
      2. \n
    2. Int the <application add tools:replace="android:allowBackup"
      \n\"Files\"\n3a. In the <uses-sdk change the android:minSdkVersion="XX" to at least 21.\n3b. If you are using a newer version of NativeScript and your file does NOT have a <uses-sdk; then you need to change the app/App_Resources/Android/app.gradle file. Change minSdkVersion to at least 21
      3. \n
    \n

    Usage

    \n

    Start Scanning

    \n
    const Passport = require('@nstudio/nativescript-xavier-passport');

    const zp = new Passport({\"licenseKey\": \"<LICENSE_KEY>\"});
    zp.on(\"results\", function(results) { console.log(\"Results:\", results); });
    zp.start();
    \n

    Instantiating the Passport Object

    \n

    new Password(options)

    \n

    Options:

    \n
      \n
    • licenseKey = Your license key (Can be any string for Testing!)
      • \n
    • boundingBoxSearchingColor = Color of the bounding box
      • \n
    • boundingBoxFoundColor = Color of the bounding box when found
      • \n
    • closeButtonColor = Close button color
      • \n
    • flashOnButtonColor = Flash on button color
      • \n
    • flashOffButtonColor = Flash off button color
      • \n
    • flashButtonEnabled = (true/false) Display the flash button
      • \n
    • instructionTextEnabled = (true/false) Display instructional text in camera
      • \n
    • instructionText = Text to display
      • \n
    • instructionTextColor = Text color
      • \n
    • instructionTextFont = Font to use
      • \n
    • cameraNegativeSpaceBackgroundEnabled = Background space
      • \n
    • cameraNegativeSpaceBackgroundColor = Background color
      • \n
    \n

    .enableDebug()

    \n

    Will enable more logs to be output to the log system.

    \n

    .enableCloseHack()

    \n

    Might be required for iOS; last version of MRZ had issue with notification of closing; so we have a work around...

    \n

    .start()

    \n
    zp.start();
    \n

    Start the scanning

    \n

    Events

    \n
    zp.on(\"error\", function(error) { console.log(\"Error\", error); });
    zp.on(\"closed\", function() { console.log(\"Closed the reader\"); });
    zp.on(\"results\", function(results) { console.log(\"Results\", results); });
    \n
      \n
    • results - Will give you an object with keys for everything including the raw data as the "rawMrz" key.
      • \n
    • error - Will give you the error message from Xavier or if your results or close event code is buggy then the error from your code will be also passed back via this callback.
      • \n
    • closed - Will be triggered when it closes the scanning screen. (on iOS this is triggered several times)
      • \n
    \n

    Result Object:

    \n
      \n
    • \n

      documentImage - The image of the identity; this is either a native iOS image or Android Bitmap. You can assign it to a ImageSource using the fromNativeSource() function.

      \n
      • \n
    • \n

      documentType - The document type.

      \n
      • \n
    • \n

      countryCitizen - The code of the country/nationality of identity

      \n
      • \n
    • \n

      givenName - The given/first name of the identity.

      \n
      • \n
    • \n

      surname - The surname/last/family name

      \n
      • \n
    • \n

      documentNumber - The document number identity.

      \n
      • \n
    • \n

      countryIssue - The issuing country code

      \n
      • \n
    • \n

      dateBirth - Date of Birth; Returned in YYMMDD format

      \n
      • \n
    • \n

      sex - gender of identity.

      \n
      • \n
    • \n

      dateExpiration - Expiration date of identity in YYMMDD format

      \n
      • \n
    • \n

      optionalData - The optional data for a second line in a MRZ

      \n
      • \n
    • \n

      optionalData2 - The optional data for a thrid line in a MRZ

      \n
      • \n
    • \n

      stateIssue - Issuing state

      \n
      • \n
    • \n

      rawMrz - The unparsed MRZ read

      \n
      • \n
    • \n

      documentNumberCheckDigit - The check digit for the document number.

      \n
      • \n
    • \n

      dateBirthCheckDigit - The check digit for the date of birth

      \n
      • \n
    • \n

      dateExpirationCheckDigit - The check digit for the expiration date.

      \n
      • \n
    • \n

      optionalDataCheckDigit - The check digit for the optional data

      \n
      • \n
    • \n

      compositeCheckDigit - The check digit over the document number, birth date, expiration date, optional data, and their check digits

      \n
      • \n
    \n

    Demo

    \n

    Please see the demo source (See: main-view-model.js).

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-theme-christmas":{"name":"nativescript-theme-christmas","version":"1.0.0","license":"MIT","readme":"

    NativeScript Theme: christmas

    \n

    Install

    \n
    npm i nativescript-theme-christmas --save
    \n

    Usage

    \n

    A. CSS:

    \n

    Insert this at the top of your main css file.

    \n
    @import 'nativescript-theme-christmas/css/christmas.css';
    \n

    B. SASS:

    \n
      \n
    • Create _common.scss with:
      • \n
    \n
    @import 'nativescript-theme-christmas/scss/christmas';
    \n
      \n
    • Inside your app.ios.scss:
      • \n
    \n
    @import 'common';
    @import 'nativescript-theme-core/scss/platforms/index.ios';
    \n
      \n
    • Inside your app.android.scss:
      • \n
    \n
    @import 'common';
    @import 'nativescript-theme-core/scss/platforms/index.android';
    \n

    Preview

    \n

    \"Preview\"

    \n

    LICENSE

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telegram-image-picker":{"name":"nativescript-telegram-image-picker","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/bradmartin/nativescript-telegram-image-picker/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Telegram-Image-Picker

    \n

    NativeScript plugin using the TelegramGallery Image Picker library for a customized image picker for Android.

    \n

    ** ANDROID ONLY ** - this plugin uses a native Android library so there is no direct equivalent for iOS.

    \n

    \n

    \"library

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Brad Martin

    \n

    Installation

    \n
    tns plugin add nativescript-telegram-image-picker
    \n

    TypeScript

    \n
    import { openTelegramImagePicker, TelegramPickerResponse } from 'nativescript-telegram-image-picker';

    public whateverYouLike() {
        
        // Open the Telegram Gallery Image Picker Activity      
        openTelegramImagePicker(5).then((resp: TelegramPickerResponse) => {
           // looping over the selected pictures in the response        
           for (var i = 0; i < resp.photos.length; i++) {
             console.log(resp.photos[i]);
           }
        })
          
    }
    \n

    API

    \n
      \n
    • openTelegramImagePicker(photoLimit?: number): Promise TelegramPickerResponse;
      • \n
    \n

    TelegramPickerResponse -\n{\nphotos: Array,\nvideos: Array\n}

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@badideas/nativescript-notifications":{"name":"@badideas/nativescript-notifications","version":"5.0.4","license":"MIT","readme":"

    NativeScript Notifications Plugin

    \n

    \"NPM\n\"Downloads\"

    \n

    This is a fork of the Nativescript Local Notifications Plugin. The eventual goal of this project will be to create a comprehensive plugin for managing local and push notifications, without the need for two distinct packages and hacking the shared delegate for ios.

    \n

    In it's current state this plugin allows your app to show notifications from within the app.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativeScript 7+:

    \n
    ns plugin add @badideas/nativescript-notifications
    \n

    NativeScript prior to 7:

    \n
    tns plugin add nativescript-local-notifications@4.2.1
    \n

    Setup (since plugin version 3.0.0)

    \n

    Add this so for iOS 10+ we can do some wiring (set the iOS UNUserNotificationCenter.delegate, to be precise).\nNot needed if your app loads the plugin on startup anyway.

    \n

    You'll know you need this if on iOS 10+ notifications are not received by your app or addOnMessageReceivedCallback is not invoked... better safe than sorry, though!

    \n
    // either
    import { LocalNotifications } from '@badideas/nativescript-notifications';
    // or (if that doesn't work for you)
    import * as LocalNotifications from '    @badideas/nativescript-notifications';

    // then use it as:
    LocalNotifications.hasPermission();
    \n

    NativeScript-Angular

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    There's also a simple Angular demo in this repo:

    \n

    NativeScript-Vue

    \n

    There is a Vue demo:

    \n

    Plugin API

    \n

    schedule

    \n

    On iOS you need to ask permission to schedule a notification.\nYou can have the schedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission), or you can manually invoke requestPermission if that's your thing.

    \n

    You can pass several options to this function, everything is optional:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idA number so you can easily distinguish your notifications. Will be generated if not set.
    titleThe title which is shown in the statusbar. Default not set.
    subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
    bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android, ' ' on iOS, as otherwise the notification won't show up at all.
    colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
    bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive with image. Default false. (Android Only)
    groupedMessagesAn array of at most 5 messages that would be displayed using android's notification inboxStyle. Note: The array would be trimmed from the top if the messages exceed five. Default not set
    groupSummaryAn inboxStyle notification summary. Default empty
    tickerOn Android you can show a different text in the statusbar, instead of the body. Default not set, so body is used.
    atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
    badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
    soundNotification sound. For custom notification sound (iOS only), copy the file to App_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this to null to suppress sound.
    intervalSet to one of second, minute, hour, day, week, month, year, number (in days) if you want a recurring notification.
    iconOn Android you can set a custom icon in the system tray. Pass in res://filename (without the extension) which lives in App_Resouces/Android/drawable folders. If not passed, we'll look there for a file named ic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (see silhouetteIcon below).
    silhouetteIconSame as icon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults to res://ic_stat_notify_silhouette, or the app icon if not present.
    imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive with bigTextStyle.
    thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either: true (if you want to use the image as the thumbnail), a resource URL (that lives in the App_Resouces/Android/drawable folders, e.g.: res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
    ongoingDefault is (false). Set whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
    channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
    forceShowWhenInForegroundDefault is false. Set to true to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
    priorityDefault is 0. Will override forceShowWhenInForeground if set. This can be set to 2 for Android "heads-up" notifications. See #114 for details.
    actionsAdd an array of NotificationAction objects (see below) to add buttons or text input to a notification.
    notificationLedEnable the notification LED light on Android (if supported by the device), this can be either: true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.
    \n

    NotificationAction

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondescription
    idAn id so you can easily distinguish your actions.
    typeEither button or input.
    titleThe label for type = button.
    launchLaunch the app when the action completes.
    submitLabelThe submit button label for type = input.
    placeholderThe placeholder text for type = input.
    \n
    LocalNotifications.schedule([
    \t{
    \t\tid: 1, // generated id if not set
    \t\ttitle: 'The title',
    \t\tbody: 'Recurs every minute until cancelled',
    \t\tticker: 'The ticker',
    \t\tcolor: new Color('red'),
    \t\tbadge: 1,
    \t\tgroupedMessages: ['The first', 'Second', 'Keep going', 'one more..', 'OK Stop'], //android only
    \t\tgroupSummary: 'Summary of the grouped messages above', //android only
    \t\tongoing: true, // makes the notification ongoing (Android only)
    \t\ticon: 'res://heart',
    \t\timage: 'https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg',
    \t\tthumbnail: true,
    \t\tinterval: 'minute',
    \t\tchannel: 'My Channel', // default: 'Channel'
    \t\tsound: 'customsound-ios.wav', // falls back to the default sound on Android
    \t\tat: new Date(new Date().getTime() + 10 * 1000), // 10 seconds from now
    \t},
    ]).then(
    \t(scheduledIds) => {
    \t\tconsole.log('Notification id(s) scheduled: ' + JSON.stringify(scheduledIds));
    \t},
    \t(error) => {
    \t\tconsole.log('scheduling error: ' + error);
    \t}
    );
    \n

    Notification icons (Android)

    \n

    These options default to res://ic_stat_notify and res://ic_stat_notify_silhouette respectively, or the app icon if not present.

    \n

    silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

    \n

    These are the official icon size guidelines,\nand here's a great guide on how to easily create these icons on Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Density qualifierpxdpi
    ldpi18 × 18120
    mdpi24 × 24160
    hdpi36 × 36240
    xhdpi48 × 48320
    xxhdpi72 × 72480
    xxxhdpi96 × 96640 approx.
    \n

    Source: Density Qualifier Docs

    \n

    addOnMessageReceivedCallback

    \n

    Tapping a notification in the notification center will launch your app.\nBut what if you scheduled two notifications and you want to know which one the user tapped?

    \n

    Use this function to have a callback invoked when a notification was used to launch your app.\nNote that on iOS it will even be triggered when your app is in the foreground and a notification is received.

    \n
    LocalNotifications.addOnMessageReceivedCallback((notification) => {
    \tconsole.log('ID: ' + notification.id);
    \tconsole.log('Title: ' + notification.title);
    \tconsole.log('Body: ' + notification.body);
    }).then(() => {
    \tconsole.log('Listener added');
    });
    \n

    getScheduledIds

    \n

    If you want to know the ID's of all notifications which have been scheduled, do this:

    \n
    LocalNotifications.getScheduledIds().then((ids) => {
    \tconsole.log(\"ID's: \" + ids);
    });
    \n

    cancel

    \n

    If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

    \n
    LocalNotifications.cancel(5 /* the ID */).then((foundAndCanceled) => {
    \tif (foundAndCanceled) {
    \t\tconsole.log(\"OK, it's gone!\");
    \t} else {
    \t\tconsole.log('No ID 5 was scheduled');
    \t}
    });
    \n

    cancelAll

    \n

    If you just want to cancel all previously scheduled notifications, do this:

    \n
    LocalNotifications.cancelAll();
    \n

    requestPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule function previously ran the user has already been prompted to grant permission.\nIf the user granted permission this function returns true, but if he denied permission this function will return false,\nsince an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manually\nenable permissions for your app.

    \n
    LocalNotifications.requestPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n

    hasPermission

    \n

    On Android you don't need permission, but on iOS you do. Android will simply return true.

    \n

    If the requestPermission or schedule functions previously ran you may want to check whether or not the user granted permission:

    \n
    LocalNotifications.hasPermission().then((granted) => {
    \tconsole.log('Permission granted? ' + granted);
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pusher-nativescript":{"name":"pusher-nativescript","version":"1.0.0","license":"MIT","readme":"

    Pusher Nativescript

    \n

    Pusher NativeScript adds Pusher support to {N} applications.

    \n

    There is not official support for NativeScript in pusher-js sdk, but the Pusher team made a great work designing the JS library to target multiple platforms (react-native, node, browser, etc), while reusing a lot of code in the process. Taking advantage of that architecture, we were able to create a version of the pusher-js sdk that maintains the original API and provides support for NativeScript.

    \n

    Usage

    \n

    You can install the library using any npm compatible package manager, like npm or yarn:

    \n
    $ npm install --save pusher-nativescript
    \n

    Or use NativeScript CLI:

    \n
    $ tns plugin add pusher-nativescript
    \n

    Once the package has been installed, you can import it

    \n

    As a CommonJS module:

    \n
    const Pusher = require('pusher-nativescript');
    \n

    Or ES6 module:

    \n
    import Pusher from 'pusher-nativescript';
    \n

    If you are using Typescript you might have to import it like this:

    \n
    import * as Pusher from 'pusher-nativescript';
    \n

    This build of pusher-js uses NativeScript's Connectivity API to detect changes on connectivity state. It will use this to automatically reconnect.

    \n

    On Android, to access any connection related information we will need explicit permission from the user. To enable the permission request add the follwing in app/App_Resources/Android/AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
    \n

    NativeScript do not have official support for WebSockets. We are relying on nativescript-websockets plugin to add that support. That is why the plugin is a peer dependency.

    \n

    As it was mentioned above, pusher-nativescript shares the same API as the official pusher-js library. To see how the library is used and configured checkout pusher-js repository.

    \n

    Credits

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-swipe-saturn":{"name":"nativescript-image-swipe-saturn","version":"2.1.0","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

    \n

    Screenshot

    \n

    \"Screenshot\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-image-swipe

    \n

    This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • pageChanged
      \nTriggered when the user swipes to the next/previous image in the list.
      • \n
    \n

    Static Properties

    \n
      \n
    • pageChangedEvent - String
      \nString value used when hooking to pageChanged event.
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UIScrollView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v4.view.ViewPager
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ObservableArray
      \nGets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      pageNumber - Number
      \nGets or sets the currently visible image.

      \n
      • \n
    • \n

      imageUrlProperty - string
      \nGets or sets the property inside the items' object that defines the Url from where to load the images

      \n
      • \n
    • \n

      allowZoom - boolean (default: true)
      \nGets or sets whether zoom is enabled

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
        <GridLayout>
            <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                           pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
            </is:ImageSwipe>
        </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { PageChangeEventData } from \"nativescript-image-swipe\";

    let viewModel: Observable;

    export function navigatingTo(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

        viewModel = new Observable();
        viewModel.set(\"items\", items);
        viewModel.set(\"pageNumber\", 3);

        page.bindingContext = viewModel;
    }

    export function pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
    \n

    Usage in Angular

    \n

    In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

    \n
    // main.ts
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { registerElement } from \"nativescript-angular/element-registry\";

    import { AppModule } from \"./app.module\";

    registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

    platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n
    <!-- test.component.html -->
    <GridLayout>
        <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                    [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
        </ImageSwipe>
    </GridLayout>
    \n
    // test.component.ts
    import { Component, OnInit } from \"@angular/core\";
    import { PageChangeEventData } from \"nativescript-image-swipe\";

    @Component({
        selector: \"demo\",
        moduleId: module.id,
        templateUrl: \"./test.component.html\",
    })
    export class ImageSwipeComponent implements OnInit {
        public items: any[] = [];
        public pageNumber: number = 3;

        ngOnInit(): void {
            this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
        }

        public pageChanged(e: PageChangeEventData) {
            console.log(`Page changed to ${e.page}.`);
        }
    }
    \n

    Working with Webpack+Uglify

    \n

    In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The ImageSwipe widget exports those and you need to add them to the mangle exclude option of the uglifyjs plugin in the webpack.common.js file:

    \n
    var imageSwipeMangleExcludes = require(\"nativescript-image-swipe/uglify-mangle-excludes\").default;
    //......
    module.exports = function (platform, destinationApp) {
        //......
        if (process.env.npm_config_uglify) {
            plugins.push(new webpack.LoaderOptionsPlugin({
                minimize: true
            }));

            //Work around an Android issue by setting compress = false
            var compress = platform !== \"android\";
            plugins.push(new webpack.optimize.UglifyJsPlugin({
                mangle: {
                    except: nsWebpack.uglifyMangleExcludes.concat(imageSwipeMangleExcludes),
                },
                compress: compress,
            }));
        }
       //......
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-image-swipe
    $ cd nativescript-image-swipe
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/flipper":{"name":"@nativescript-community/flipper","version":"0.0.6","license":"ISC","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    Installation

    \n
      \n
    • tns plugin add @nativescript-community/flipper
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    Usage

    \n
    import { Client } from '@nativescript-community/flipper';
    const flipper = new Client();
    flipper.start({
        plugins: ['inspector', 'network', 'prefs'],
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-lifecycle-hooks":{"name":"nativescript-vue-lifecycle-hooks","version":"1.0.0","license":"MIT","readme":"

    \"NPM\"

    \n

    \"npm

    \n

    NativeScript-Vue Lifecycle Hooks

    \n

    Install

    \n
    npm install nativescript-vue-lifecycle-hooks --save
    \n

    main.js

    \n
    import Vue from 'nativescript-vue'
    import NSVueLifecycleHooks from 'nativescript-vue-lifecycle-hooks'

    Vue.use(NSVueLifecycleHooks)
    \n

    Usage

    \n

    In any component that has Page element as child, you can use NativeScript page events with Vue lifecycle hooks style.

    \n

    So instead of this:

    \n
    <template>
        <Page @loaded=\"onLoaded\" @navigatingTo=\"onNavigatingTo\">
            <Label>Hello world</Label>
        </Page>
    </template>

    <script>
        export default {
            methods: {
                onLoaded(args){
                    console.log('page is loaded.')
                },
                onNavigatingTo(args){
                    console.log('page is navigating to.')
                }
            }
        }
    </script>
    \n

    Use this:

    \n
    <template>
        <Page>
            <Label>Hello world</Label>
        </Page>
    </template>

    <script>
        export default {
            methods: {

            },
            loaded(args){
                console.log('page is loaded.')
            },
            navigatingTo(args){
                console.log('page is navigating to.')
            }
        }
    </script>
    \n

    Available Lifecycle Hooks.

    \n
    <template>
        <Page>
            <Label>Hello world</Label>
        </Page>
    </template>

    <script>
        export default {
            // page is loaded.
            loaded(args) {
                console.log('loaded from page 2')
            },
            
            // page is unloaded.
            unloaded(args) {
                console.log('unloaded from page 2')
            },
            
            // when leaving a page (the navigation has ended).
            navigatedFrom(args) {
                console.log('navigatedFrom from page 2')
            },
            
            // when entering a page (the navigation has ended).
            navigatedTo(args) {
                console.log('navigatedTo from page 2')
            },
            
            // when leaving a page (the navigation has started).
            navigatingFrom(args) {
                console.log('navigatingFrom from page 2')
            },
            
            // when entering a page (the navigation has started)
            navigatingTo(args) {
                console.log('navigatingTo from page 2')
            }
        }
    </script>
    \n

    Contributing

    \n

    Thanks for considering contributing.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dermanostic/nativescript-adjust":{"name":"@dermanostic/nativescript-adjust","version":"0.2.0","license":"Apache-2.0","readme":"

    Summary

    \n

    This is the Nativescript SDK of Adjust™. You can read more about Adjust™ at adjust.com.

    \n

    Table of contents

    \n\n

    Demo app

    \n

    There is an example app inside the apps/demo directory.

    \n

    Basic integration

    \n

    We will describe the steps to integrate the Adjust SDK into your Nativescript project. You can use any text editor or IDE for Nativescript development. There are no assumptions made regarding development environment.

    \n

    Get the SDK

    \n

    First, download the library from npm:

    \n
    $ npm install @dermanostic/nativescript-adjust --save
    \n

    Integrate the SDK into your app

    \n

    You should use the following import statement on top of your .js file

    \n
    import { Adjust, AdjustEvent, AdjustConfig } from '@dermanostic/nativescript-adjust';
    \n

    In your App.js file, add the following code to initialize the Adjust SDK:

    \n
    constructor(props) {
        super(props);
        const adjustConfig = new AdjustConfig(\"{YourAppToken}\", AdjustConfig.EnvironmentSandbox);
        Adjust.create(adjustConfig);
    }
    \n

    Replace {YourAppToken} with your app token. You can find this in your Adjust dashboard.

    \n

    Depending on whether you build your app for testing or for production, you must set the environment with one of these values:

    \n
    AdjustConfig.EnvironmentSandbox
    AdjustConfig.EnvironmentProduction
    \n

    Important: This value should be set to AdjustConfig.EnvironmentSandbox if and only if you or someone else is testing your app. Make sure to set the environment to AdjustConfig.EnvironmentProduction just before you publish the app. Set it back to AdjustConfig.EnvironmentSandbox when you start developing and testing it again.

    \n

    We use this environment to distinguish between real traffic and test traffic from test devices. It is very important that you keep this value meaningful at all times!

    \n

    Adjust logging

    \n

    You can increase or decrease the amount of logs you see in tests by calling setLogLevel on your AdjustConfig instance with one of the following parameters:

    \n
    adjustConfig.setLogLevel(AdjustConfig.LogLevelVerbose);   // enable all logging
    adjustConfig.setLogLevel(AdjustConfig.LogLevelDebug);     // enable more logging
    adjustConfig.setLogLevel(AdjustConfig.LogLevelInfo);      // the default
    adjustConfig.setLogLevel(AdjustConfig.LogLevelWarn);      // disable info logging
    adjustConfig.setLogLevel(AdjustConfig.LogLevelError);     // disable warnings as well
    adjustConfig.setLogLevel(AdjustConfig.LogLevelAssert);    // disable errors as well
    adjustConfig.setLogLevel(AdjustConfig.LogLevelSuppress);  // disable all logging
    \n

    Adjust project settings

    \n

    Once the Adjust SDK has been added to your app, certain tweaks are going to be performed so that the Adjust SDK can work properly. Below you can find a description of every additional thing that the Adjust SDK performs after you've added it to your app and what needs to be done by you in order for Adjust SDK to work properly.

    \n

    Android permissions

    \n

    The Adjust SDK by default adds two permissions to your app's AndroidManifest.xml file:

    \n
    <uses-permission android:name=\"android.permission.INTERNET\" />
    <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />
    \n

    The INTERNET permission might be needed by our SDK at any point in time. The ACCESS_WIFI_STATE permission is needed by the Adjust SDK if your app is not targeting the Google Play Store and doesn't use Google Play Services. If you are targeting the Google Play Store and you are using Google Play Services, the Adjust SDK doesn't need this permission and, if you don't need it anywhere else in your app, you can remove it.

    \n

    Google Play Services

    \n

    Since August 1, 2014, apps in the Google Play Store must use the Google Advertising ID to uniquely identify devices. To allow the Adjust SDK to use the Google Advertising ID, you must integrate Google Play Services.

    \n

    In order to do this, open your app's build.gradle file and find the dependencies block. Add the following line:

    \n
    compile 'com.google.android.gms:play-services-analytics:10.0.1'
    \n

    Note: The version of the Google Play Services library that you're using is not relevant to the Adjust SDK, as long as the analytics part of the library is present in your app. In the example above, we just used the most recent version of the library at the time of writing.

    \n

    To check whether the analytics part of the Google Play Services library has been successfully added to your app so that the Adjust SDK can read it properly, you should start your app by configuring the SDK to run in sandbox mode and set the log level to verbose. After that, track a session or some events in your app and observe the list of parameters in the verbose logs which are being read once the session or event has been tracked. If you see a parameter called gps_adid in there, you have successfully added the analytics part of the Google Play Services library to your app and our SDK is reading the necessary information from it.

    \n

    In case you encounter any issue with attempts to read Google Advertising Identifier, feel free to open an issue in our Github repository or write an email to support@adjust.com.

    \n

    Proguard settings

    \n

    If you are using Proguard, add these lines to your Proguard file:

    \n
    -keep public class com.adjust.sdk.** { *; }
    -keep class com.google.android.gms.common.ConnectionResult {
        int SUCCESS;
    }
    -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient {
        com.google.android.gms.ads.identifier.AdvertisingIdClient$Info getAdvertisingIdInfo(android.content.Context);
    }
    -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient$Info {
        java.lang.String getId();
        boolean isLimitAdTrackingEnabled();
    }
    -keep public class com.android.installreferrer.** { *; }
    \n

    Install referrer

    \n

    In order to correctly attribute an install of your Android app to its source, Adjust needs information about the install referrer. This can be obtained by using the Google Play Referrer API or by catching the Google Play Store intent with a broadcast receiver.

    \n

    Important: The Google Play Referrer API is newly introduced by Google with the express purpose of providing a more reliable and secure way of obtaining install referrer information and to aid attribution providers in the fight against click injection. It is strongly advised that you support this in your application. The Google Play Store intent is a less secure way of obtaining install referrer information. It will continue to exist in parallel with the new Google Play Referrer API temporarily, but it is set to be deprecated in future.

    \n

    Google Play Referrer API

    \n

    In order to support this, add the following line to your app's build.gradle file:

    \n
    compile 'com.android.installreferrer:installreferrer:1.0'
    \n

    installreferrer library is part of Google Maven repository, so in order to be able to build your app, you need to add Google Maven repository to your app's build.gradle file if you haven't added it already:

    \n
    allprojects {
        repositories {
            jcenter()
            maven {
                url \"https://maven.google.com\"
            }
        }
    }
    \n

    Also, make sure that you have paid attention to the Proguard settings chapter and that you have added all the rules mentioned in it, especially the one needed for this feature:

    \n
    -keep public class com.android.installreferrer.** { *; }
    \n

    This feature is supported if you are using the Adjust SDK v4.12.0 or above.

    \n

    Google Play Store intent

    \n

    The Google Play Store INSTALL_REFERRER intent should be captured with a broadcast receiver. The Adjust install referrer broadcast receiver is added to your app by default. For more information, you can check our native Android SDK README. You can see this in the AndroidManifest.xml file which is part of our Nativescript plugin:

    \n
    <receiver android:name=\"com.adjust.sdk.AdjustReferrerReceiver\" 
              android:exported=\"true\" >
        <intent-filter>
            <action android:name=\"com.android.vending.INSTALL_REFERRER\" />
        </intent-filter>
    </receiver>
    \n

    Please bear in mind that, if you are using your own broadcast receiver which handles the INSTALL_REFERRER intent, you don't need to add the Adjust broadcast receiver to your manifest file. You can remove it, but inside your own receiver add the call to the Adjust broadcast receiver as described in our Android guide.

    \n

    Huawei Referrer API

    \n

    As of v4.22.0, the Adjust SDK supports install tracking on Huawei devices with Huawei App Gallery version 10.4 and higher. No additional integration steps are needed to start using the Huawei Referrer API.

    \n

    iOS frameworks

    \n

    Select your project in the Project Navigator. In the left hand side of the main view, select your target. In the tab Build Phases, expand the group Link Binary with Libraries. On the bottom of that section click on the + button. Select the AdSupport.framework and click the Add button. Unless you are using tvOS, repeat the same steps to add the iAd.framework, CoreTelephony.framework, AppTrackingTransparency.framework and StoreKit.framework. Change the Status of both frameworks to Optional. Adjust SDK uses these frameworks with following purpose:

    \n
      \n
    • iAd.framework - in case you are running iAd campaigns
      • \n
    • AdSupport.framework - for reading iOS Advertising Id (IDFA)
      • \n
    • CoreTelephony.framework - for reading MCC and MNC information
      • \n
    • StoreKit.framework - for communication with SKAdNetwork framework
      • \n
    • AppTrackingTransparency.framework - to ask for user's consent to be tracked and obtain status of that consent
      • \n
    \n

    If you are not running any iAd campaigns, you can feel free to remove the iAd.framework dependency. If you don't use SKAdNetwork framework, feel free to remove StoreKit.framework dependency (unless you need it for something else).

    \n

    Additional features

    \n

    You can take advantage of the following features once the Adjust SDK is integrated into your project.

    \n

    AppTrackingTransparency framework

    \n

    Note: This feature exists only in iOS platform.

    \n

    For each package sent, the Adjust backend receives one of the following four (4) states of consent for access to app-related data that can be used for tracking the user or the device:

    \n
      \n
    • Authorized
      • \n
    • Denied
      • \n
    • Not Determined
      • \n
    • Restricted
      • \n
    \n

    After a device receives an authorization request to approve access to app-related data, which is used for user device tracking, the returned status will either be Authorized or Denied.

    \n

    Before a device receives an authorization request for access to app-related data, which is used for tracking the user or device, the returned status will be Not Determined.

    \n

    If authorization to use app tracking data is restricted, the returned status will be Restricted.

    \n

    The SDK has a built-in mechanism to receive an updated status after a user responds to the pop-up dialog, in case you don't want to customize your displayed dialog pop-up. To conveniently and efficiently communicate the new state of consent to the backend, Adjust SDK offers a wrapper around the app tracking authorization method described in the following chapter, App-tracking authorization wrapper.

    \n

    App-tracking authorisation wrapper

    \n

    Note: This feature exists only in iOS platform.

    \n

    Adjust SDK offers the possibility to use it for requesting user authorization in accessing their app-related data. Adjust SDK has a wrapper built on top of the requestTrackingAuthorizationWithCompletionHandler: method, where you can as well define the callback method to get information about a user's choice. Also, with the use of this wrapper, as soon as a user responds to the pop-up dialog, it's then communicated back using your callback method. The SDK will also inform the backend of the user's choice. Integer value will be delivered via your callback method with the following meaning:

    \n
      \n
    • 0: ATTrackingManagerAuthorizationStatusNotDetermined
      • \n
    • 1: ATTrackingManagerAuthorizationStatusRestricted
      • \n
    • 2: ATTrackingManagerAuthorizationStatusDenied
      • \n
    • 3: ATTrackingManagerAuthorizationStatusAuthorized
      • \n
    \n

    To use this wrapper, you can call it as such:

    \n
    Adjust.requestTrackingAuthorizationWithCompletionHandler(function(status) {
        switch (status) {
            case 0:
                // ATTrackingManagerAuthorizationStatusNotDetermined case
                break;
            case 1:
                // ATTrackingManagerAuthorizationStatusRestricted case
                break;
            case 2:
                // ATTrackingManagerAuthorizationStatusDenied case
                break;
            case 3:
                // ATTrackingManagerAuthorizationStatusAuthorized case
                break;
        }
    });
    \n

    Before calling the method, make sure that your iOS app's Info.plist contains an entry for NSUserTrackingUsageDescription key. In absence of that key and usage of this method, app will crash.

    \n

    SKAdNetwork framework

    \n

    Note: This feature exists only in iOS platform.

    \n

    If you have implemented the Adjust iOS SDK v4.23.0 or above and your app is running on iOS 14, the communication with SKAdNetwork will be set on by default, although you can choose to turn it off. When set on, Adjust automatically registers for SKAdNetwork attribution when the SDK is initialized. If events are set up in the Adjust dashboard to receive conversion values, the Adjust backend sends the conversion value data to the SDK. The SDK then sets the conversion value. After Adjust receives the SKAdNetwork callback data, it is then displayed in the dashboard.

    \n

    In case you don't want the Adjust SDK to automatically communicate with SKAdNetwork, you can disable that by calling the following method on configuration object:

    \n
    adjustConfig.deactivateSKAdNetworkHandling();
    \n

    Event tracking

    \n

    You can use Adjust to track all kinds of events. Let's say you want to track every tap on a button. Simply create a new event token in your dashboard. Let's say that event token is abc123. You can add the following line in your button’s click handler method to track the click:

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");
    Adjust.trackEvent(adjustEvent);
    \n

    Revenue tracking

    \n

    If your users can generate revenue by tapping on advertisements or making In-App Purchases, then you can track those revenues with events. Let's say a tap is worth €0.01. You could track the revenue event like this:

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");

    adjustEvent.setRevenue(0.01, \"EUR\");

    Adjust.trackEvent(adjustEvent);
    \n

    When you set a currency token, Adjust will automatically convert the incoming revenues into a reporting revenue of your choice. Read more about currency conversion here.

    \n

    Revenue deduplication

    \n

    You can also add an optional transaction ID to avoid tracking duplicate revenues. The last ten transaction IDs are remembered, and revenue events with duplicate transaction IDs are skipped. This is especially useful for In-App Purchase tracking. You can see an example below.

    \n

    If you want to track in-app purchases, please make sure to call the trackEvent only if the transaction is finished and an item is purchased. That way you can avoid tracking revenue that is not actually being generated.

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");

    adjustEvent.setRevenue(0.01, \"EUR\");
    adjustEvent.setTransactionId(\"{YourTransactionId}\");

    Adjust.trackEvent(adjustEvent);
    \n

    Note: Transaction ID is the iOS term, unique identifier for successfully finished Android In-App-Purchases is named Order ID.

    \n

    In-app purchase verification

    \n

    In-app purchase verification can be conducted through the Nativescript Purchase SDK which is currently in development and will soon be made publicly available. For more information, please contact support@adjust.com.

    \n

    Callback parameters

    \n

    You can also register a callback URL for that event in your dashboard and we will send a GET request to that URL whenever the event gets tracked. In that case you can also put some key-value pairs in an object and pass it to the trackEvent method. We will then append these named parameters to your callback URL.

    \n

    For example, suppose you have registered the URL http://www.adjust.com/callback for your event with event token abc123 and execute the following lines:

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");

    adjustEvent.addCallbackParameter(\"key\", \"value\");
    adjustEvent.addCallbackParameter(\"foo\", \"bar\");

    Adjust.trackEvent(adjustEvent);
    \n

    In that case we would track the event and send a request to:

    \n
    http://www.adjust.com/callback?key=value&foo=bar
    \n

    It should be mentioned that we support a variety of placeholders like {idfa} for iOS or {gps_adid} for Android that can be used as parameter values. In the resulting callback the {idfa} placeholder would be replaced with the ID for Advertisers of the current device for iOS and the {gps_adid} would be replaced with the Google Advertising ID of the current device for Android. Also note that we don't store any of your custom parameters, but only append them to your callbacks. If you haven't registered a callback for an event, these parameters won't even be read.

    \n

    You can read more about using URL callbacks, including a full list of available values, in our\ncallbacks guide.

    \n

    Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

    \n

    Partner parameters

    \n

    Similarly to the callback parameters mentioned above, you can also add parameters that Adjust will transmit to the network partners of your choice. You can activate these networks in your Adjust dashboard.

    \n

    This works similarly to the callback parameters mentioned above, but can be added by calling the addPartnerParameter method on your AdjustEvent instance.

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");

    adjustEvent.addPartnerParameter(\"key\", \"value\");
    adjustEvent.addPartnerParameter(\"foo\", \"bar\");

    Adjust.trackEvent(adjustEvent);
    \n

    You can read more about special partners and networks in our guide to special partners.

    \n

    Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

    \n

    Callback identifier

    \n

    You can also add custom string identifier to each event you want to track. This identifier will later be reported in event success and/or event failure callbacks to enable you to keep track on which event was successfully tracked or not. You can set this identifier by calling the setCallbackId method on your AdjustEvent instance:

    \n
    var adjustEvent = new AdjustEvent(\"abc123\");

    adjustEvent.setCallbackId(\"Your-Custom-Id\");

    Adjust.trackEvent(adjustEvent);
    \n

    Subscription tracking

    \n

    Note: This feature is only available in the SDK v4.22.0 and above.

    \n

    You can track App Store and Play Store subscriptions and verify their validity with the Adjust SDK. After a subscription has been successfully purchased, make the following call to the Adjust SDK:

    \n

    For App Store subscription:

    \n
    var subscription = new AdjustAppStoreSubscription(price, currency, transactionId, receipt);
    subscription.setTransactionDate(transactionDate);
    subscription.setSalesRegion(salesRegion);

    Adjust.trackAppStoreSubscription(subscription);
    \n

    For Play Store subscription:

    \n
    var subscription = new AdjustPlayStoreSubscription(price, currency, sku, orderId, signature, purchaseToken);
    subscription.setPurchaseTime(purchaseTime);

    Adjust.trackPlayStoreSubscription(subscription);
    \n

    Subscription tracking parameters for App Store subscription:

    \n\n

    Subscription tracking parameters for Play Store subscription:

    \n\n

    Note: Subscription tracking API offered by Adjust SDK expects all parameters to be passed as string values. Parameters described above are the ones which API exects you to pass to subscription object prior to tracking subscription. There are various libraries which are handling in app purchases in Nativescript and each one of them should return information described above in some form upon successfully completed subscription purchase. You should locate where these parameters are placed in response you are getting from library you are using for in app purchases, extract those values and pass them to Adjust API as string values.

    \n

    Just like with event tracking, you can attach callback and partner parameters to the subscription object as well:

    \n

    For App Store subscription:

    \n
    var subscription = new AdjustAppStoreSubscription(price, currency, transactionId, receipt);
    subscription.setTransactionDate(transactionDate);
    subscription.setSalesRegion(salesRegion);

    // add callback parameters
    subscription.addCallbackParameter(\"key\", \"value\");
    subscription.addCallbackParameter(\"foo\", \"bar\");

    // add partner parameters
    subscription.addPartnerParameter(\"key\", \"value\");
    subscription.addPartnerParameter(\"foo\", \"bar\");

    Adjust.trackAppStoreSubscription(subscription);
    \n

    For Play Store subscription:

    \n
    var subscription = new AdjustPlayStoreSubscription(price, currency, sku, orderId, signature, purchaseToken);
    subscription.setPurchaseTime(purchaseTime);

    // add callback parameters
    subscription.addCallbackParameter(\"key\", \"value\");
    subscription.addCallbackParameter(\"foo\", \"bar\");

    // add partner parameters
    subscription.addPartnerParameter(\"key\", \"value\");
    subscription.addPartnerParameter(\"foo\", \"bar\");

    Adjust.trackPlayStoreSubscription(subscription);
    \n

    Session parameters

    \n

    Some parameters are saved to be sent in every event and session of the Adjust SDK. Once you have added any of these parameters, you don't need to add them every time, since they will be saved locally. If you add the same parameter twice, there will be no effect.

    \n

    These session parameters can be called before the Adjust SDK is launched to make sure they are sent even on install. If you need to send them with an install, but can only obtain the needed values after launch, it's possible to delay the first launch of the Adjust SDK to allow this behaviour.

    \n

    Session callback parameters

    \n

    The same callback parameters that are registered for events can be also saved to be sent in every event or session of the Adjust SDK.

    \n

    The session callback parameters have a similar interface of the event callback parameters. Instead of adding the key and its value to an event, it's added through a call to method addSessionCallbackParameter of the Adjust instance:

    \n
    Adjust.addSessionCallbackParameter(\"foo\", \"bar\");
    \n

    The session callback parameters will be merged with the callback parameters and added to an event. The callback parameters added to an event have precedence over the session callback parameters. Meaning that, when adding a callback parameter to an event with the same key to one added from the session, the value that prevails is the callback parameter added to the event.

    \n

    Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

    \n

    It's possible to remove a specific session callback parameter by passing the desiring key to the method removeSessionCallbackParameter of the Adjust instance:

    \n
    Adjust.removeSessionCallbackParameter(\"foo\");
    \n

    If you wish to remove all key and values from the session callback parameters, you can reset it with the method resetSessionCallbackParameters of the Adjust instance:

    \n
    Adjust.resetSessionCallbackParameters();
    \n

    Session partner parameters

    \n

    In the same way that there are session callback parameters that are sent for every event or session of the Adjust SDK, there are also session partner parameters.

    \n

    These will be transmitted to network partners, for the integrations that have been activated in your Adjust dashboard.

    \n

    The session partner parameters have a similar interface to the event partner parameters. Instead of adding the key and its value to an event, it's added through a call to method addSessionPartnerParameter of the Adjust instance:

    \n
    Adjust.addSessionPartnerParameter(\"foo\", \"bar\");
    \n

    The session partner parameters will be merged with the partner parameters and added to an event. The partner parameters added to an event have precedence over the session partner parameters. Meaning that, when adding a partner parameter to an event with the same key to one added from the session, the value that prevails is the partner parameter added to the event.

    \n

    Note: Both parameters in this method must be strings. If either of the passed parameters is not a string, the key-value pair will not be added to the parameters list.

    \n

    It's possible to remove a specific session partner parameter by passing the desiring key to the method removeSessionPartnerParameter of the Adjust instance:

    \n
    Adjust.removeSessionPartnerParameter(\"foo\");
    \n

    If you wish to remove all keys and values from the session partner parameters, you can reset it with the method resetSessionPartnerParameters of the Adjust instance:

    \n
    Adjust.resetSessionPartnerParameters();
    \n

    Delay start

    \n

    Delaying the start of the Adjust SDK allows your app some time to obtain session parameters, such as unique identifiers, to be sent on install.

    \n

    Set the initial delay time in seconds with the setDelayStart field of the AdjustConfig instance:

    \n
    adjustConfig.setDelayStart(5.5);
    \n

    In this case this will make the Adjust SDK not send the initial install session and any event created for 5.5 seconds. After this time is expired or if you call sendFirstPackages() of the Adjust instance in the meanwhile, every session parameter will be added to the delayed install session and events and the Adjust SDK will resume as usual.

    \n

    The maximum delay start time of the Adjust SDK is 10 seconds.

    \n

    Attribution callback

    \n

    You can register a listener to be notified of tracker attribution changes. Due to the different sources considered for attribution, this information cannot be provided synchronously. The simplest way is to create a single anonymous listener which is going to be called each time your user's attribution value changes:

    \n

    With the AdjustConfig instance, before starting the SDK, add the anonymous listener:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setAttributionCallbackListener(function(attribution) {
        // Printing all attribution properties.
        console.log(\"Attribution changed!\");
        console.log(attribution.trackerToken);
        console.log(attribution.trackerName);
        console.log(attribution.network);
        console.log(attribution.campaign);
        console.log(attribution.adgroup);
        console.log(attribution.creative);
        console.log(attribution.clickLabel);
        console.log(attribution.adid);
    });

    Adjust.create(adjustConfig);
    \n

    Within the listener function you have access to the attribution parameters. Here is a quick summary of its properties:

    \n
      \n
    • trackerToken the tracker token of the current attribution.
      • \n
    • trackerName the tracker name of the current attribution.
      • \n
    • network the network grouping level of the current attribution.
      • \n
    • campaign the campaign grouping level of the current attribution.
      • \n
    • adgroup the ad group grouping level of the current attribution.
      • \n
    • creative the creative grouping level of the current attribution.
      • \n
    • clickLabel the click label of the current attribution.
      • \n
    • adid the Adjust device identifier.
      • \n
    \n

    Please make sure to consider our applicable attribution data policies.

    \n

    Session and event callbacks

    \n

    You can register a callback to be notified of successful and failed tracked events and/or sessions.

    \n

    Follow the same steps as for attribution callback to implement the following callback function for successfully tracked events:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setEventTrackingSucceededCallbackListener(function(eventSuccess) {
        // Printing all event success properties.
        console.log(\"Event tracking succeeded!\");
        console.log(eventSuccess.message);
        console.log(eventSuccess.timestamp);
        console.log(eventSuccess.eventToken);
        console.log(eventSuccess.callbackId);
        console.log(eventSuccess.adid);
        console.log(eventSuccess.jsonResponse);
    });

    Adjust.create(adjustConfig);
    \n

    The following callback function for failed tracked events:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setEventTrackingFailedCallbackListener(function(eventFailure) {
        // Printing all event failure properties.
        console.log(\"Event tracking failed!\");
        console.log(eventFailure.message);
        console.log(eventFailure.timestamp);
        console.log(eventFailure.eventToken);
        console.log(eventFailure.callbackId);
        console.log(eventFailure.adid);
        console.log(eventFailure.willRetry);
        console.log(eventFailure.jsonResponse);
    });

    Adjust.create(adjustConfig);
    \n

    For successfully tracked sessions:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setSessionTrackingSucceededCallbackListener(function(sessionSuccess) {
        // Printing all session success properties.
        console.log(\"Session tracking succeeded!\");
        console.log(sessionSuccess.message);
        console.log(sessionSuccess.timestamp);
        console.log(sessionSuccess.adid);
        console.log(sessionSuccess.jsonResponse);
    });

    Adjust.create(adjustConfig);
    \n

    And for failed tracked sessions:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setSessionTrackingFailedCallbackListener(function(sessionFailure) {
        // Printing all session failure properties.
        console.log(\"Session tracking failed!\");
        console.log(sessionFailure.message);
        console.log(sessionFailure.timestamp);
        console.log(sessionFailure.adid);
        console.log(sessionFailure.willRetry);
        console.log(sessionFailure.jsonResponse);
    });

    Adjust.create(adjustConfig);
    \n

    The callback functions will be called after the SDK tries to send a package to the server. Within the callback you have access to a response data object specifically for the callback. Here is a quick summary of the session response data properties:

    \n
      \n
    • var message the message from the server or the error logged by the SDK.
      • \n
    • var timestamp timestamp from the server.
      • \n
    • var adid a unique device identifier provided by Adjust.
      • \n
    • var jsonResponse the JSON object with the response from the server.
      • \n
    \n

    Both event response data objects contain:

    \n
      \n
    • var eventToken the event token, if the package tracked was an event.
      • \n
    • var callbackId the custom defined callback ID set on event object.
      • \n
    \n

    And both event and session failed objects also contain:

    \n
      \n
    • var willRetry indicates there will be an attempt to resend the package at a later time.
      • \n
    \n

    Disable tracking

    \n

    You can disable the Adjust SDK from tracking by invoking the method setEnabled of the Adjust instance with the enabled parameter as false. This setting is remembered between sessions, but it can only be activated after the first session.

    \n
    Adjust.setEnabled(false);
    \n

    You can verify if the Adjust SDK is currently active with the method isEnabled of the Adjust instance. It is always possible to activate the Adjust SDK by invoking setEnabled with the parameter set to true.

    \n

    Offline mode

    \n

    You can put the Adjust SDK in offline mode to suspend transmission to our servers while retaining tracked data to be sent later. When in offline mode, all information is saved in a file, so be careful not to trigger too many events while in offline mode.

    \n

    You can activate offline mode by calling the method setOfflineMode of the Adjust instance with the parameter true.

    \n
    Adjust.setOfflineMode(true);
    \n

    Conversely, you can deactivate offline mode by calling setOfflineMode with false. When the Adjust SDK is put back in online mode, all saved information is send to our servers with the correct time information.

    \n

    Unlike disabling tracking, this setting is not remembered between sessions. This means that the SDK is in online mode whenever it is started, even if the app was terminated in offline mode.

    \n

    Event buffering

    \n

    If your app makes heavy use of event tracking, you might want to delay some HTTP requests in order to send them in one batch every minute. You can enable event buffering with your AdjustConfig instance by calling setEventBufferingEnabled method:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setEventBufferingEnabled(true);

    Adjust.create(adjustConfig);
    \n

    GDPR right to be forgotten

    \n

    In accordance with article 17 of the EU's General Data Protection Regulation (GDPR), you can notify Adjust when a user has exercised their right to be forgotten. Calling the following method will instruct the Adjust SDK to communicate the user's choice to be forgotten to the Adjust backend:

    \n
    Adjust.gdprForgetMe();
    \n

    Upon receiving this information, Adjust will erase the user's data and the Adjust SDK will stop tracking the user. No requests from this device will be sent to Adjust in the future.

    \n

    Disable third-party sharing for specific users

    \n

    You can now notify Adjust when a user has exercised their right to stop sharing their data with partners for marketing purposes, but has allowed it to be shared for statistics purposes.

    \n

    Call the following method to instruct the Adjust SDK to communicate the user's choice to disable data sharing to the Adjust backend:

    \n
    Adjust.disableThirdPartySharing();
    \n

    Upon receiving this information, Adjust will block the sharing of that specific user's data to partners and the Adjust SDK will continue to work as usual.

    \n

    SDK signature

    \n

    An account manager must activate the Adjust SDK signature. Contact Adjust support (support@adjust.com) if you are interested in using this feature.

    \n

    If the SDK signature has already been enabled on your account and you have access to App Secrets in your Adjust Dashboard, please use the method below to integrate the SDK signature into your app.

    \n

    An App Secret is set by passing all secret parameters (secretId, info1, info2, info3, info4) to setAppSecret method of AdjustConfig instance:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setAppSecret(secretId, info1, info2, info3, info4);

    Adjust.create(adjustConfig);
    \n

    Background tracking

    \n

    The default behaviour of the Adjust SDK is to pause sending HTTP requests while the app is in the background. You can change this in your AdjustConfig instance by calling setSendInBackground method:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setSendInBackground(true);

    Adjust.create(adjustConfig);
    \n

    If nothing is set, sending in background is disabled by default.

    \n

    Device IDs

    \n

    Certain services (such as Google Analytics) require you to coordinate device and client IDs in order to prevent duplicate reporting.

    \n

    iOS advertising identifier

    \n

    You can access the IDFA value of an iOS device by invoking the getIdfa method of the Adjust instance and passing it a callback that will get triggered once the IDFA value has been obtained by the native iOS SDK:

    \n
    Adjust.getIdfa((idfa) => {
        console.log(\"IDFA = \" + idfa);
    });
    \n

    Google Play Services advertising identifier

    \n

    The Adjust SDK allows you to read the Google advertising identifier of the Android device on which your app is running. In order to do this, call the getGoogleAdId method of the Adjust instance and pass your callback as a parameter. Once obtained by the native Android SDK, you will receive the Google advertising identifier value in your callback method:

    \n
    Adjust.getGoogleAdId((googleAdId) => {
        console.log(\"Google Ad Id = \" + googleAdId);
    });
    \n

    Amazon advertising identifier

    \n

    If you need to obtain the Amazon advertising ID, you can call the getAmazonAdId method of the Adjust instance and pass your callback as a parameter to which the Amazon advertising ID value will be sent once obtained:

    \n
    Adjust.getAmazonAdId((amazonAdId) => {
        console.log(\"Amazon Ad Id = \" + amazonAdId);
    });
    \n

    Adjust device identifier

    \n

    For every device with your app installed on it, the Adjust backend generates a unique Adjust device identifier (adid). In order to obtain this identifier, call the getAdid method of the Adjust instance and pass your callback as a parameter to which the adid value will be sent once obtained:

    \n
    Adjust.getAdid((adid) => {
        console.log(\"Adid = \" + adid);
    });
    \n

    Note: Information about the adid is only available after an app installation has been tracked by the Adjust backend. From that moment on, the Adjust SDK has information about the device adid and you can access it with this method. So, it is not possible to access the adid value before the SDK has been initialized and installation of your app has been successfully tracked.

    \n

    User attribution

    \n

    This callback is triggered as described in the attribution callback section, providing you with information about a new attribution whenever it changes. If you want to access information about a user's current attribution status at any other time, you can make a call to the getAttribution method of the Adjust instance and pass your callback as a parameter to which the attribution value will be sent once obtained:

    \n
    Adjust.getAttribution((attribution) => {
        console.log(\"Tracker token = \" + attribution.trackerToken);
        console.log(\"Tracker name = \" + attribution.trackerName);
        console.log(\"Network = \" + attribution.network);
        console.log(\"Campaign = \" + attribution.campaign);
        console.log(\"Adgroup = \" + attribution.adgroup);
        console.log(\"Creative = \" + attribution.creative);
        console.log(\"Click label = \" + attribution.clickLabel);
        console.log(\"Adid = \" + attribution.adid);
    });
    \n

    Note: Information about a user's current attribution status is only available after an app installation has been tracked by the Adjust backend and the attribution callback has been triggered. From that moment on, the Adjust SDK has information about a user's attribution status and you can access it with this method. So, it is not possible to access a user's attribution value before the SDK has been initialized and an attribution callback has been triggered.

    \n

    Push token

    \n

    To send us the push notification token, add the following call to Adjust whenever you get your token in the app or when it gets updated:

    \n
    Adjust.setPushToken(\"YourPushNotificationToken\");
    \n

    Push tokens are used for Audience Builder and client callbacks, and they are required for the upcoming uninstall tracking feature.

    \n

    Track additional device identifiers

    \n

    If you are distributing your Android app outside of the Google Play Store and would like to track additional device identifiers (IMEI and MEID), you need to explicitly instruct the Adjust SDK to do so. You can do that by calling the setReadMobileEquipmentIdentity method of the AdjustConfig instance. The Adjust SDK does not collect these identifiers by default.

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setReadMobileEquipmentIdentity(true);

    Adjust.create(adjustConfig);
    \n

    You will also need to add the READ_PHONE_STATE permission to your AndroidManifest.xml file:

    \n
    <uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>
    \n

    In order to use this feature, additional steps are required within your Adjust Dashboard. For more information, please contact your dedicated account manager or write an email to support@adjust.com.

    \n

    Pre-installed trackers

    \n

    If you want to use the Adjust SDK to recognize users that found your app pre-installed on their device, follow these steps.

    \n
      \n
    1. \n

      Create a new tracker in your dashboard.

      \n
      2. \n
    2. \n

      Open your app delegate and add set the default tracker of your AdjustConfig instance:

      \n
      var adjustConfig = new AdjustConfig(appToken, environment);

      adjustConfig.setDefaultTracker(\"{TrackerToken}\");

      Adjust.create(adjustConfig);
      \n
      3. \n
    \n

    Replace {TrackerToken} with the tracker token you created in step 2. Please note that the dashboard displays a tracker\nURL (including http://app.adjust.com/). In your source code, you should specify only the six-character token and not the\nentire URL.

    \n
      \n
    1. \n

      Build and run your app. You should see a line like the following in the app's log output:

      \n
      Default tracker: 'abc123'
      \n
      2. \n
    \n

    Deep linking

    \n

    If you are using the Adjust tracker URL with an option to deep link into your app from the URL, there is the possibility to get info about the deep link URL and its content. Hitting the URL can happen when the user has your app already installed (standard deep linking scenario) or if they don't have the app on their device (deferred deep linking scenario).

    \n

    Standard deep linking scenario

    \n

    To support deep linking in Android, the app's AndroidManifest.xml file will need to be modified. Please refer to this page of our Android SDK for the needed modifications to AndroidManifest.xml.

    \n

    To support deep linking in iOS 8 or earlier, the app's Info.plist file will need to be modified. Please refer to this page of our iOS SDK for the needed modifications to Info.plist.

    \n

    To support deep linking in iOS 9 or later, your app would have to handle Universal Links. Please refer to this page of our iOS SDK for the needed modifications.

    \n

    Deferred deep linking scenario

    \n

    While deferred deep linking is not supported out of the box on Android and iOS, our Adjust SDK makes it possible.

    \n

    In order to get info about the URL content in a deferred deep linking scenario, you should set a callback method on the AdjustConfig object which will receive one parameter where the content of the URL will be delivered. You should set this method on the config object by calling the method setDeferredDeeplinkCallbackListener:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setDeferredDeeplinkCallbackListener(function(deeplink) {
        console.log(\"Deferred deep link URL content: \" + deeplink);
    });

    Adjust.create(adjustConfig);
    \n

    In the deferred deep linking scenario, there is one additional setting which can be set on the AdjustConfig object. Once the Adjust SDK gets the deferred deep link info, we are offering you the possibility to choose whether our SDK should open this URL or not. You can choose to set this option by calling the setShouldLaunchDeeplink method on the config object:

    \n
    var adjustConfig = new AdjustConfig(appToken, environment);

    adjustConfig.setShouldLaunchDeeplink(true);
    // or adjustConfig.setShouldLaunchDeeplink(false);

    adjustConfig.setDeferredDeeplinkCallbackListener(function(deeplink) {
        console.log(\"Deferred deep link URL content: \" + deeplink);
    });

    Adjust.create(adjustConfig);
    \n

    If nothing is set, the Adjust SDK will always try to launch the URL by default.

    \n

    Reattribution via deep links

    \n

    Adjust enables you to run re-engagement campaigns by using deep links. For more information on this, please check our official docs.

    \n

    If you are using this feature, in order for your user to be properly reattributed, you need to make one additional call to the Adjust SDK in your app. Once you have received deep link content information in your app, add a call to appWillOpenUrl method of the Adjust instance. By making this call, the Adjust SDK will try to find if there is any new attribution info inside of the deep link and if any, it will be sent to the Adjust backend. If your user should be reattributed due to a click on the Adjust tracker URL with deep link content in it, you will see the attribution callback in your app being triggered with new attribution info for this user.

    \n

    Call to the appWillOpenUrl method in a would look like this:

    \n
    Linking.addEventListener('url', this.handleDeepLink);
    Linking.getInitialURL().then((url) => {
        if (url) {
            this.handleDeepLink({ url });
        }
    })

    handleDeepLink(event) {
        Adjust.appWillOpenUrl(event.url);
    }
    \n

    License

    \n

    The Adjust SDK is licensed under the MIT License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/nativescript-native-add":{"name":"@jcassidyav/nativescript-native-add","version":"0.0.4","license":"Apache-2.0","readme":"

    nativescript-native-add

    \n

    Example of a nativescript-cli extension which adds native file creation capabilities.

    \n

    Installation

    \n

    ns extension install @jcassidyav/nativescript-native-add

    \n

    Installs to ~/.local/share/.nativescript-cli/extensions

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-grid-view-new":{"name":"nativescript-grid-view-new","version":"1.0.0","license":"ISC","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript GridView widget. The GridView displays data in separate cells, each cell representing one data item. For iOS wraps up UICollectionView and for Android wraps up RecyclerView

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-grid-view

    \n

    This command automatically installs the necessary files, as well as stores nativescript-grid-view as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      itemLoading
      \nTriggered when generating an item in the GridView.

      \n
      • \n
    • \n

      itemTap
      \nTriggered when the user taps on an item in the GridView.

      \n
      • \n
    • \n

      loadMoreItems
      \nTriggered when the generated items reached the end of the items property.

      \n
      • \n
    • \n

      scroll
      \nTriggered when the GrdiView is scrolled by the user. from the args you can get the new horizonta/vertical offset.

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      itemLoadingEvent - String
      \nString value used when hooking to itemLoadingEvent event.

      \n
      • \n
    • \n

      itemTapEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    • \n

      loadMoreItemsEvent - String
      \nString value used when hooking to itemTapEvent event.

      \n
      • \n
    • \n

      scrollEvent - String
      \nString value used when hooking to scroll event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UICollectionView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v7.widget.RecyclerView
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the GridView. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      itemTemplate - String
      \nGets or sets the item template of the GridView.

      \n
      • \n
    • \n

      rowHeight - PercentLength
      \nGets or sets the height for every row in the GridView.

      \n
      • \n
    • \n

      colWidth - PercentLength
      \nGets or sets the width for every column in the GridView.

      \n
      • \n
    \n

    Instance Methods

    \n
      \n
    • \n

      refresh()
      \nForces the GridView to reload all its items.

      \n
      • \n
    • \n

      scrollToIndex(index: number, animated: boolean = true)
      \nScrolls the GridView to the item with the given index. This can be either animated or not. Defaults to animated.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:gv="nativescript-grid-view" to your page tag, and then simply use <gv:GridView/> in order to add the widget to your page. Use <gv:Gridview.itemTemplate/> to specify the template for each cell:

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"nativescript-grid-view\" loaded=\"pageLoaded\">
      <GridLayout>
        <gv:GridView items=\"{{ items }}\" colWidth=\"24%\" rowHeight=\"15%\" padding=\"5\" itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
          <gv:GridView.itemTemplate>
            <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 5\">
              <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
            </GridLayout>
          </gv:GridView.itemTemplate>
        </gv:GridView>
      </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { GridItemEventData } from \"nativescript-grid-view\";

    let viewModel: Observable;

    export function pageLoaded(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        for (let loop = 0; loop < 200; loop++) {
            items.push({ value: \"test \" + loop.toString() });
        }
        viewModel = new Observable();
        viewModel.set(\"items\", items);

        page.bindingContext = viewModel;
    }

    export function gridViewItemTap(args: GridItemEventData) {
        console.log(\"tap index \" + args.index.toString());
    }

    export function gridViewItemLoading(args: GridItemEventData) {
        console.log(\"item loading \" + args.index.toString());
    }

    export function gridViewLoadMoreItems(args: EventData) {
        console.log(\"load more items\");
    }
    \n

    You can also have multiple templates the same way you add them in the builtin ListView control:

    \n
    <gv:GridView id=\"gv\" row=\"0\" class=\"{{ cssClass }}\" items=\"{{ items }}\" 
                    colWidth=\"{{ colWidth }}\" rowHeight=\"{{ rowHeight }}\" itemTemplateSelector=\"templateSelector\"
                    itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\">
        <gv:GridView.itemTemplates>
            <template key=\"odd\">
                <GridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\">
                    <Label text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>

            <template key=\"even\">
                <GridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\">
                    <Label row=\"0\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                    <Label row=\"1\" text=\"{{ value }}\" verticalAlignment=\"center\"/>
                </GridLayout>
            </template>
        </gv:GridView.itemTemplates>
    </gv:GridView>
    \n
    export function templateSelector(item: any, index: number, items: any) {
        return index % 2 === 0 ? \"even\" : \"odd\";
    }
    \n

    Usage in Angular

    \n

    Import GridViewModule in your NgModule:

    \n
    import { GridViewModule } from 'nativescript-grid-view/angular';

    @NgModule({
        //......
        imports: [
            //......
            GridViewModule,
            //......
        ],
        //......
    })
    \n

    Example Usage

    \n
    // app.module.ts
    import { GridViewModule } from \"nativescript-grid-view/angular\";

    @NgModule({
        bootstrap: [
            AppComponent
        ],
        imports: [
            NativeScriptModule,
            AppRoutingModule,
            GridViewModule,
        ],
        declarations: [
            AppComponent,
            ItemsComponent,
            ItemDetailComponent
        ],
        providers: [
            ItemService
        ],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class AppModule { }
    \n
    <!-- my.component.html -->
    <GridLayout class=\"page\">
      <GridView [items]=\"items\" colWidth=\"30%\" rowHeight=\"100\">
        <ng-template let-item=\"item\" let-odd=\"odd\">
          <StackLayout margin=\"10\" [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
          </StackLayout>
        </ng-template>
      </GridView>
    </GridLayout>
    \n

    If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin ListView control.

    \n
    <GridView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\">
        <ng-template nsTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>

        <ng-template nsTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\">
            <StackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\">
            <Label verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"></Label>
            </StackLayout>
        </ng-template>
    </GridView>
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-grid-view
    $ cd nativescript-grid-view
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oss-licenses":{"name":"nativescript-oss-licenses","version":"1.0.0","license":"MIT","readme":"

    nativescript-oss-licenses

    \n

    \"Build

    \n

    This is a nativescript plugin to list up all of the oss licenses of native library.

    \n

    As for now, this plugin is only for android, and works only for native libraries.

    \n

    \"demo\"

    \n

    How to use

    \n

    1. Install this plugin

    \n

    Run this command in your project.

    \n
    tns plugin add nativescript-oss-licenses
    \n

    2. Modify local AndroidManifest.xml

    \n

    The library com.google.gms:oss-licenses prepares the activity which shows oss licenses in your project in handy.
    \nIn order to use this feature, you have to modify <project-root>/app/App_Resources/Android/AndroidManifest.xml as follows.

    \n
      <activity android:name=\"com.tns.ErrorReportActivity\"/>
    + <activity
    +   android:theme=\"@style/Theme.AppCompat.Light.DarkActionBar\" 
    +   android:name=\"com.google.android.gms.oss.licenses.OssLicensesActivity\"
    + />
    + <activity
    +   android:theme=\"@style/Theme.AppCompat.Light.DarkActionBar\" 
    +   android:name=\"com.google.android.gms.oss.licenses.OssLicensesMenuActivity\"
    + />
    \n

    3. Add some codes to start the activity which shows the oss licenses

    \n
        startOSSLicenseActivity() {
            if (platformModule.isAndroid) {
                const ossLicensesMenuActivity = com.google.android.gms.oss.licenses.OssLicensesMenuActivity;
                const intent = new android.content.Intent(
                  utils.ad.getApplicationContext(),
                  ossLicensesMenuActivity.class
                );
                ossLicensesMenuActivity.setActivityTitle(\"TITLE\");
                application.android.foregroundActivity.startActivity(intent);
            }
        }
    \n

    License

    \n

    This project is licensed under the MIT License.

    \n

    References

    \n

    Including Open Source Notices

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@plmservices/nativescript-outline-label":{"name":"@plmservices/nativescript-outline-label","version":"2.0.2","license":"Apache-2.0","readme":"

    NativeScript Outlined Labels \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build\n\"Donate\"

    \n

    This plugin extends the NativeScript Label component to support outlined text.

    \n

    Outlined text is the only good way to ensure that you text will always be able to be clearly read regardless of what background is behind it, which becomes more important when your background is non-deterministic or moving (e.g. video).

    \n

    Prerequisites / Requirements

    \n

    None.

    \n

    Installation

    \n
    ns plugin add @plmservices/nativescript-outline-label
    \n

    Usage

    \n

    You must add the appropriate xmlns tag to your XML file, e.g.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:outlineLabel=\"@plmservices/nativescript-outline-label\" class=\"page\">
    \n

    Once that is done you can use the new outlineLabel tag in your XML, e.g.

    \n
    <outlineLabel:OutlineLabel text=\"CSS on Element\" />
    \n

    This can be styled via CSS on the OutlineLabel element, a class or an id, e.g. to set yellow text with a black outline

    \n
    OutlineLabel {
    \tcolor: yellow;
    \toutline: 4 black;
    }
    \n

    Or it can be styled directly in the tag, e.g.

    \n
    <outlineLabel:OutlineLabel text=\"Outline in attribute\" color=\"yellow\" outline=\"4 red\" />
    <outlineLabel:OutlineLabel text=\"Outline in style\" color=\"yellow\" style=\"outline: 4 green\" />
    \n

    TODO

    \n
      \n
    • Angular demo app
      • \n
    • Vue demo app
      • \n
    \n

    Donation

    \n

    If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

    \n

    \"Donate\"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-twitter":{"name":"nativescript-plugin-twitter","version":"2.0.8","license":"MIT","readme":"

    Nativescript Twitter

    \n

    NativeScript implementation of Twitter SDK (Some Features)

    \n

    \"npm\"\n\"npm\"

    \n

    NS 3.0+

    \n

    tns plugin add nativescript-twitter

    \n

    NS < 3.0

    \n

    npm install nativescript-twitter@"^1.x"

    \n

    Example Implementation

    \n

    Android

    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.android) {
        const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
        TNSTwitter.init(\"key\", \"secret\");
    }
    \n

    IOS

    \n

    Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

    \n

    In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

    \n
    // Info.plist
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>twitterkit-<consumerKey></string>
        </array>
      </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>twitter</string>
        <string>twitterauth</string>
    </array
    \n
    //custom-app-delegate.ts
    import * as utils from \"utils/utils\";
    declare const UIResponder, UIApplicationDelegate, Twitter;
    export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];
        applicationDidFinishLaunchingWithOptions(application, launchOptions) {
            utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
            return true;
        }
        applicationOpenURLOptions(application, url, options) {
            return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
        }
    }
    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.ios) {
        app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
    }
    \n

    IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

    \n
    <twitter:TNSTwitterButton id=\"twitter\"/>
    \n

    Listen when user auth is successful or fails

    \n
    import * as frame from \"ui/frame\";
     frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
            if (args.object.get(\"value\") === 'failed') {
                console.log(args.object.get(\"message\"))
            } else {
                TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                    (user) => {
                        console.dump(user)
                    }, err => {
                        console.dump(err)
                    })
            }

        });
    \n

    Send api request

    \n
    import { CustomApiService } from \"nativescript-twitter\"
    const api = new CustomApiService();
        api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
            .then(
            data => {
                console.log(data)
            }, err => {
                console.log(err.message)
            });
    \n

    Angular

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
    \n
    <TNSTwitterButton id=\"twitter\"/>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitter-updated":{"name":"nativescript-twitter-updated","version":"22.0.4","license":"MIT","readme":"

    Nativescript Twitter

    \n

    NativeScript implementation of Twitter SDK (Some Features)

    \n

    \"npm\"\n\"npm\"

    \n

    NS 3.0+

    \n

    tns plugin add nativescript-twitter

    \n

    NS < 3.0

    \n

    npm install nativescript-twitter@"^1.x"

    \n

    Example Implementation

    \n

    Android

    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.android) {
        const TNSTwitter = require(\"nativescript-twitter\").TNSTwitter;
        TNSTwitter.init(\"key\", \"secret\");
    }
    \n

    IOS

    \n

    Note\nTwitter Kit looks for a URL scheme in the format twitterkit-<consumerKey>, where consumerKey is your application’s Twitter API key, e.g. twitterkit-dwLf79lNQfsJ.

    \n

    In your app’s Info.plist, add URL Schemes by adding code below after <dict>\nSource

    \n
    // Info.plist
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>twitterkit-<consumerKey></string>
        </array>
      </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>twitter</string>
        <string>twitterauth</string>
    </array
    \n
    //custom-app-delegate.ts
    import * as utils from \"utils/utils\";
    declare const UIResponder, UIApplicationDelegate, Twitter;
    export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];
        applicationDidFinishLaunchingWithOptions(application, launchOptions) {
            utils.ios.getter(Twitter,Twitter.sharedInstance).startWithConsumerKeyConsumerSecret(\"key\" ,\"secret\");
            return true;
        }
        applicationOpenURLOptions(application, url, options) {
            return utils.ios.getter(Twitter,Twitter.sharedInstance).applicationOpenURLOptions(application, url, options);
        }
    }
    \n
    //app.ts or main.ts
    import * as app from \"application\";
    if (app.ios) {
        app.ios.delegate = require('./custom-app-delegate').CustomAppDelegate;
    }
    \n

    IMPORTANT: Make sure you include xmlns:twitter="nativescript-twitter" on the Page tag

    \n
    <twitter:TNSTwitterButton id=\"twitter\"/>
    \n

    Listen when user auth is successful or fails

    \n
    import * as frame from \"ui/frame\";
     frame.topmost().getViewById('twitter').on('loginStatus', (args) => {
            if (args.object.get(\"value\") === 'failed') {
                console.log(args.object.get(\"message\"))
            } else {
                TNSTwitter.getCurrentUser(args.object.get(\"userID\")).then(
                    (user) => {
                        console.dump(user)
                    }, err => {
                        console.dump(err)
                    })
            }

        });
    \n

    Send api request

    \n
    import { CustomApiService } from \"nativescript-twitter\"
    const api = new CustomApiService();
        api.makeRequest(\"https://api.twitter.com/1.1/account/verify_credentials.json\", \"get\")
            .then(
            data => {
                console.log(data)
            }, err => {
                console.log(err.message)
            });
    \n

    Angular

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"TNSTwitterButton\", () => require(\"nativescript-twitter\").TNSTwitterButton);
    \n
    <TNSTwitterButton id=\"twitter\"/>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@la-corp/la-barcodescanner-lib-aar":{"name":"@la-corp/la-barcodescanner-lib-aar","version":"1.0.8","license":"MIT","readme":"

    NativeScript BarcodeScanner

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Update note:

    \n

    This repo forked from [ https://github.com/EddyVerbruggen/nativescript-barcodescanner ] and update core module equivalent to Barcode Scanner app 4.7.8 latest release on February 25, 2019 which support Android SDK API level earlier than 22.

    \n

    Want a quick demo?

    \n
    \n

    Note that running this only makes sense on a real device.

    \n
    \n
    git clone https://github.com/quydau35/nativescript-barcodescanner barcodedemo
    cd barcodedemo/src
    \n

    Fullscreen, programmatically (iOS and Android)

    \n
    npm run demo.android (or demo.ios / demo.ios.device)
    \n

    Embedded (iOS only)

    \n
    npm run demo-ng.ios (or demo.ios.device)
    \n

    Supported barcode types

    \n

    iOS and Android

    \n
      \n
    • CODE_39
      • \n
    • CODE_93
      • \n
    • CODE_128
      • \n
    • DATA_MATRIX
      • \n
    • EAN_8
      • \n
    • EAN_13
      • \n
    • ITF (also known as ITF14)
      • \n
    • PDF_417 (on Android only when passed in explicity via formats)
      • \n
    • QR_CODE
      • \n
    • UPC_A
      • \n
    • UPC_E
      • \n
    \n

    Android only

    \n
      \n
    • CODABAR
      • \n
    • MAXICODE
      • \n
    • RSS_14
      • \n
    \n

    iOS only

    \n
      \n
    • AZTEC
      • \n
    • CODE_39_MOD_43
      • \n
    • INTERLEAVED_2_OF_5
      • \n
    \n

    A note about UPC_A and EAN_13

    \n

    When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add @la-corp/la-barcodescanner-lib-aar
    \n

    Embedding the scanner (iOS)

    \n
    \n

    If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

    \n
    \n\n

    As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

    \n
    \n

    💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

    \n
    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"@la-corp/la-barcodescanner-lib-aar\">
    \n

    Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

    \n
    <iOS>
        <Barcode:BarcodeScannerView
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          pause=\"{{ pause }}\"
          scanResult=\"{{ onScanResult }}\" />
    </iOS>
    \n

    Embedding in Angular

    \n

    Component / Module:

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"BarcodeScanner\", () => require(\"@la-corp/la-barcodescanner-lib-aar\").BarcodeScannerView);
    \n

    View:

    \n
    <BarcodeScanner
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          [pause]=\"pause\"
          (scanResult)=\"onScanResult($event)\">
    </BarcodeScanner>
    \n

    See 'demo-ng' for details. Do not run it for Android, because embedding a view is not supported on that platform.

    \n

    Embedding in Vue

    \n

    main.ts:

    \n
    Vue.registerElement('BarcodeScanner', () => require('@la-corp/la-barcodescanner-lib-aar').BarcodeScannerView)
    \n

    View:

    \n
    <BarcodeScanner
        row=\"1\"
        height=\"300\"
        formats=\"QR_CODE, EAN_13, UPC_A\"
        beepOnScan=\"true\"
        reportDuplicates=\"true\"
        preferFrontCamera=\"false\"
        :pause=\"pause\"
        @scanResult=\"onScanResult\"
        v-if=\"isIOS\">
    </BarcodeScanner>
    \n

    See 'demo-vue' for details.

    \n

    iOS runtime permission reason

    \n

    You've probably seen a permission popup like this before (this plugin will trigger one as well, automatically):

    \n\n

    iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

    \n

    You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSCameraUsageDescription</key>
      <string>My reason justifying fooling around with your camera</string>
    \n

    To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

    \n

    Usage

    \n

    Tip: during a scan you can use the volume up/down buttons to toggle the torch.

    \n

    function: scan (single mode)

    \n

    TypeScript

    \n
      import { BarcodeScanner } from \"@la-corp/la-barcodescanner-lib-aar\";
      let barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE, EAN_13\",
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
        openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
        presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
      }).then((result) => {
          // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
          alert({
            title: \"Scan result\",
            message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
            okButtonText: \"OK\"
          });
        }, (errorMessage) => {
          console.log(\"No scan. \" + errorMessage);
        }
      );
    \n
    \n

    Note that result.format above is one of these.

    \n
    \n

    JavaScript

    \n
      var BarcodeScanner = require(\"@la-corp/la-barcodescanner-lib-aar\").BarcodeScanner;
      var barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
        openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
      }).then(
          function(result) {
            console.log(\"Scan format: \" + result.format);
            console.log(\"Scan text:   \" + result.text);
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: scan (bulk / continuous mode)

    \n

    In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

    \n

    The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

    \n

    Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

    \n

    JavaScript

    \n
      var count = 0;
      barcodescanner.scan({
        formats: \"QR_CODE\",
        // this callback will be invoked for every unique scan in realtime!
        continuousScanCallback: function (result) {
          count++;
          console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
          if (count === 3) {
            barcodescanner.stop();
          }
        },
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
        reportDuplicates: false // which is the default
      }).then(
          function() {
            console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: available

    \n

    Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

    \n

    JavaScript

    \n
      var barcodescanner = require(\"@la-corp/la-barcodescanner-lib-aar\");

      barcodescanner.available().then(
          function(avail) {
            console.log(\"Available? \" + avail);
          }
      );
    \n

    function: hasCameraPermission / requestCameraPermission

    \n

    On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

    \n

    On iOS 10+ there's something similar going on.

    \n

    Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

    \n

    JavaScript

    \n
      barcodescanner.hasCameraPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestCameraPermission' now
            console.log(\"Has Camera Permission? \" + result);
          }
      );

      // if no permission was granted previously this wil open a user consent screen
      barcodescanner.requestCameraPermission().then(
          function() {
            console.log(\"Camera permission requested\");
          }
      );
    \n

    Usage with nativescript-angular

    \n

    You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

    \n

    So instead of:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from '@la-corp/la-barcodescanner-lib-aar';

    @Component({ ... })
      export class MyComponent {
        constructor(private barcodeScanner: BarcodeScanner) {
      }

      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        this.barcodeScanner.scan({ ... });
      }
    }
    \n

    Simply do:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from '@la-corp/la-barcodescanner-lib-aar';

    @Component({ ... })
      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        new BarcodeScanner().scan({ ... });
      }
    }
    \n

    Webpack usage

    \n

    If you run into an error when Webpacking, open app.module.ts and add this:

    \n
    import { BarcodeScanner } from \"@la-corp/la-barcodescanner-lib-aar\";

    export function createBarcodeScanner() {
      return new BarcodeScanner();
    }

    providers: [
      { provide: BarcodeScanner, useFactory: (createBarcodeScanner) }
    ]
    \n

    Troubleshooting

    \n

    If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

    \n
      \n
    1. Delete the app from your device
      2. \n
    2. Remove the folder platforms/android. This triggers a complete rebuild
      3. \n
    3. run tns run android
      4. \n
    \n

    Dependencies / Related Projects

    \n

    This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

    \n

    iOS

    \n

    Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

    \n

    Android

    \n

    ZXing: https://github.com/zxing/zxing/releases

    \n

    As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/quydau35/barcodescanner-lib-aar/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-global-drawer":{"name":"nativescript-vue-global-drawer","version":"1.2.0","license":"MIT","readme":"

    \"NPM\"

    \n

    \"npm

    \n

    NativeScript-Vue Global Drawer

    \n

    A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project.

    \n

    Declare your drawer once and access it everywhere through your components.

    \n

    If you need one drawer over your App pages this for you.

    \n

    Install

    \n
    npm install nativescript-ui-sidedrawer --save
    npm install nativescript-vue-global-drawer --save
    \n

    Usage

    \n

    In main.js

    \n
    import Vue from 'nativescript-vue'
    import NSVueGlobalDrawer from 'nativescript-vue-global-drawer'

    Vue.use(NSVueGlobalDrawer)

    new Vue({
      render: h => h('frame', [h(App)])
    }).$start()
    \n

    In App.vue, declare the global drawer.

    \n
    <template>
        <Page actionBarHidden=\"true\">
            <GlobalDrawer>
                <template slot=\"content\">
                    <Label class=\"drawer-header\" text=\"Drawer\"/>
                    <Label class=\"drawer-item\" text=\"Item 1\"/>
                    <Label class=\"drawer-item\" text=\"Item 2\"/>
                    <Label class=\"drawer-item\" text=\"Item 3\"/>
                </template>
                <template slot=\"frame\">
                    <!--default page-->
                    <Page1/>
                </template>
            </GlobalDrawer>
        </Page>
    </template>
    \n

    API

    \n

    Slots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    contentThe drawer content.
    frameThe default drawer page that will appear in the beginning.
    \n

    Drawer methods

    \n

    Anywhere in your components you can call these methods to control the drawer behavior.

    \n

    .$drawer.open() : void

    \n
    \n

    Open drawer.

    \n
    \n
    <Button @tap=\"$drawer.open()\">Show</Button>
    \n

    .$drawer.close() : void

    \n
    \n

    Close drawer.

    \n
    \n
    <Button @tap=\"$drawer.close()\">Close</Button>
    \n

    .$drawer.toggle() : void

    \n
    \n

    Toggle drawer.

    \n
    \n
    <Button @tap=\"$drawer.toggle()\">Toggle</Button>
    \n

    .$drawer.enable() : void

    \n
    \n

    Enable enable.

    \n
    \n
    <Button @tap=\"$drawer.enable()\">Enable</Button>
    \n

    .$drawer.disable() : void

    \n
    \n

    Disable drawer. This will disable gestures too.

    \n
    \n
    <Button @tap=\"$drawer.disable()\">Disable</Button>
    \n

    .$drawer.setGestures(boolean) : void

    \n
    \n

    Enable/Disable gestures.

    \n
    \n
    <Button @tap=\"$drawer.setGestures(true)\">Enable Gestures</Button>
    \n

    .$drawer.getDrawer()

    \n
    \n

    Get drawer instance.

    \n
    \n

    .$drawer.getFrame()

    \n
    \n

    Get drawer frame instance.

    \n
    \n

    .$drawer.getStatus() : boolean

    \n
    \n

    Get drawer status (enabled/disabled).

    \n
    \n

    Navigation

    \n

    To navigate inside the drawer, you have to get the drawer frame instance to use in manual navigation.

    \n

    Example:

    \n
    this.$navigateTo(Page1, {
        transition: {},
        transitionIOS: {},
        transitionAndroid: {},
        
        props: {
          foo: 'bar',
        },
        frame: this.$drawer.getFrame()
    })
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Event NameDescription
    drawerOpenedthe drawer has been opened.
    drawerOpeningthe drawer is about to open.
    drawerClosedthe drawer has been closed.
    drawerClosingthe drawer is about to close.
    drawerPanthe drawer is being opened by its edge gesture.
    \n

    Contributing

    \n

    Thank you for considering contributing.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-trace-sentry":{"name":"nativescript-trace-sentry","version":"1.0.0","license":"MIT","readme":"

    NativeScript Sentry TraceWriter \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"

    \n

    This plugin provides a custom NativeScript TraceWriter that will log messages to Sentry.io using the Official Sentry SDK for Browsers. This is useful for capturing trace messages in production from user iOS and Android devices.\nThis plugin is based on Todd Anglin's NativeScript Raven TraceWriter (https://github.com/toddanglin/nativescript-trace-raven) plugin which uses the depreacted (but supported) Raven.JS library for Sentry.

    \n

    Getting started

    \n

    To add the plug-in to a NativeScript project:

    \n

    tns plugin add nativescript-trace-sentry

    \n

    NOTE: To use this plug-in, a "DSN" key from Sentry.io is required. This key is used to initialize the plug-in and send logs to a specific Sentry.io project.

    \n

    Usage

    \n

    Once the plug-in is installed, simply initialize the new TraceWriter. This can be done in different ways, but for easy global usage, setup the new TraceWriter when then app starts:

    \n

    app.ts

    \n
    import * as app from 'application';
    import * as trace from 'trace';
    import { TraceSentry } from 'nativescript-trace-Sentry';

    app.on(app.launchEvent, (args: app.ApplicationEventData) => {
        let sentryDsn = \"[YOUR SENTRY DSN KEY]\";

        trace.setCategories(trace.categories.concat(trace.categories.Error, trace.categories.Debug));
        trace.addWriter(new TraceSentry(sentryDsn));
        trace.enable();
    });
    \n

    Then, in your app, just use trace as normal. The output will now be sent to Sentry.io.

    \n

    Example:

    \n
    trace.write(\"Something happened in the app\", trace.categories.Error, trace.messageType.error);
    \n

    NOTE: Sentry.io charges by log volume, so as a best practice, do not enable this custom TraceWriter during regular development

    \n

    In addition to the trace message, this plug-in will send these additional details to Sentry with each log:

    \n
      \n
    • NativeScript runtime version
      • \n
    • Device Platform (iOS/Android)
      • \n
    • Device OS Version
      • \n
    • Device Type (phone/tablet/etc)
      • \n
    • Device Model (iPhone, Galaxy S3, etc)
      • \n
    • Device Language (en-US, etc)
      • \n
    • Device UUID
      • \n
    • Device Orientation (portrait, landscape)
      • \n
    • Battery level (0 - 100, if available)
      • \n
    • App version name
      • \n
    • Environment name (default "Debug")
      • \n
    • User IP Address
      • \n
    \n

    Log level

    \n

    Sentry.io provides three levels for classifying logs: info, warning and error.

    \n

    When logging using the TraceWriter and trace API, the trace.messageType is mapped to Sentry log levels:

    \n
      \n
    • trace.messageType.log === Log type: info
      • \n
    • trace.messageType.info === Log type: info
      • \n
    • trace.messageType.warn === Log type: warning
      • \n
    • trace.messageType.error === Log type: error
      • \n
    \n

    If trace.messageType is omitted, the default log level is error.

    \n

    Extended use

    \n

    When initializing Sentry, you can optionally provide an environment string to describe where the app is running when sending log messages. By default, this string is set to debug. If you want to specify your own environment string, just add it when initializing with your DSN key:

    \n
    trace.addWriter(new TraceSentry(sentryDsn, \"production\"));
    \n

    Logging Exceptions

    \n

    Unlike using trace to record an Error, the Sentry.captureException API will also attempt to include Stack Trace information with the log.

    \n
    import Sentry = require(\"Sentry-js\");

    try { 
      throw new Error(\"This is an example error with stack trace\");
    } catch (err) {
      Sentry.captureException(err);
    }
    \n

    Adding Breadcrumbs

    \n

    You can manually create "breadcrumbs" that will be included with Sentry logs. Breadcrumbs are intended to show the path of actions that lead to an exception, app crash or log message. For example, to add a crumb when a button is tapped:

    \n
    public buttonTap(args: EventData) {
      let btn = <Button>args.object;
      Sentry.addBreadcrumb({
        message: `Button tapped`,
        category: \"action\",
        data: {
          id: btn.id,
          text: btn.text
        },
        level: Sentry.Severity.Info
      });
    }
    \n

    Last EventId

    \n

    The EventId is a globally unique string generated by Sentry for all logs. Sentry provides the ability to get the EventId for the most recent log so that you can present it to users and use for customer service reports. To get the most recent EventId with Sentry:

    \n
    let eventId = Sentry.lastEventId();
    \n

    Considerations

    \n

    Sentry.io provides a generous free tier for logging events, but does eventually charge by logging volume. As a result, be careful to log only events that are helpful for troubleshooting in production.

    \n

    That means: do not use trace.categories.All when logging to Sentry

    \n

    This verbose logging will likely generate far more logs than needed, and quickly run-up your Sentry.io bill.

    \n

    Best practices:

    \n
      \n
    1. Only log to Sentry in production
      2. \n
    2. Minimize the trace categories logged (minimum: trace.categories.Error)
      3. \n
    \n

    Native Errors

    \n

    Since this plug-in is running in the NativeScript JavaScript layer, it may not capture all native iOS or Android errors. This is generally okay as errors that relate to app code will be caught, but if native iOS/Android logging is needed, use a different plug-in like Firebase.

    \n

    Auto Breadcrumbs

    \n

    In addition to providing the custom TraceWriter, this plugin will automatically wire-up automatic breadcrumbs for these global Page events:

    \n
      \n
    • onNavigatedTo
      • \n
    • onLoaded
      • \n
    • onShownModally
      • \n
    \n

    Whenever one of these events occurs, a new breadcrumb will get added to the history. To disable this behavior, initialize TraceSentry with an additional parameter:

    \n
    new TraceSentry(\"[YOUR DSN KEY]\", \"production\", false)
    \n

    The last parameter will enable/disable auto-breadcrumbs created by this plug-in. Default is true (enabled).

    \n

    Using the Demo

    \n

    To try the demo for this plug-in, simply follow these steps:

    \n
      \n
    1. Get a DSN key from Sentry.io
      2. \n
    2. Clone this repo
      3. \n
    3. Navigate to the demo folder and open app.ts in your code editor
      4. \n
    4. Replace the sentryDsn string with your DSN key
      5. \n
    5. Navigate back to the root of the cloned repo
      6. \n
    6. Run npm run demo.ios or npm run demo.android
      7. \n
    \n

    If the DSN key is not added before running the demo, the app will crash on launch.

    \n

    Contributing

    \n

    Want to help make this plug-in better? Report issues in GitHub:

    \n

    https://github.com/timdoege/nativescript-trace-sentry/issues

    \n

    Pull requests welcome.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-store-update":{"name":"nativescript-store-update","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript-store-update

    \n

    \"npm\"\n\"npm\"

    \n

    \"NPM\"

    \n

    This plugin allows you to define a notification strategy regarding your app updates. You are able to specify if you want to force, offer or ignore an update based on the new version available in the platform store.

    \n

    For example, you could want to force all major version update, but offer the option to your user to chose to update or skip a minor or patch version.

    \n

    You can also specify how many days after the update release you want to display the alert.

    \n

    Prerequisites

    \n

    You need to add appversion plugins for this one to work:

    \n
    tns plugin add nativescript-appversion
    \n

    Installation

    \n
    tns plugin add nativescript-store-update
    \n

    Usage

    \n

    In your main.ts or app.ts file, before app start, call StoreUpdate.init with desired options like so:

    \n
        import { StoreUpdate, AlertTypesConstants } from \"nativescript-store-update\";

        StoreUpdate.init({
            notifyNbDaysAfterRelease: 1,
            majorUpdateAlertType: AlertTypesConstants.OPTION
        })
    \n

    Localization

    \n

    The plugin contains some default translations inside json files located in src/i18n folder and required by hand in the src/helpers/locales.helper.ts file.\nYou can also specify a custom translation in the plugin initialization through the configuraiton options.\nIf you want to contribute a regionalized translation, you must use the lang-regionCode format specified in Apple doc, but with the country lowercased (ex: fr-ca, en-us)

    \n

    API

    \n

    Configuration options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    majorUpdateAlertTypeFORCEAlert type for major version change (e.g: A.b.c.d)
    minorUpdateAlertTypeOPTIONAlert type for minor version change (e.g: a.B.c.d)
    patchUpdateAlertTypeNONEAlert type for major version change (e.g: a.b.C.d)
    revisionUpdateAlertTypeNONEAlert type for revision version change (e.g: a.b.c.D)
    notifyNbDaysAfterRelease1Delays the update prompt by a specific number of days
    countryCodeencountry store code
    alertOptionsnullCustomize alert dialog text, bypasses the Locale json
    \n

    Alert types

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyValueDescription
    FORCE1Show an alert that can't be skipped
    OPTION2Show an alert that can be skipped
    NONE3Don't display alert at all
    \n

    AlertOptions configuration (Optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    titleLocaleTextDialog title, fallback to the locale json
    messageLocaleTextDialog body text, fallback to the locale json
    updateButtonLocaleTextDialog update button, fallback to the locale json
    skipButtonLocaleTextDialog skip button, fallback to the locale json
    \n

    Development

    \n

    Clone this repository, go in the src folder then run the command npm run setup\nYou can then use:

    \n
      \n
    • npm run demo.ios or npm run demo.android to start the demo
      • \n
    • npm run plugin.tscwatch to watch plugin file and start developing!
      • \n
    \n

    The repo contains 2 demos folder, one with angular, and one without.\nDemos use the bundleId com.bitstrips.imoji as their App version contains Major, Minor and Patch numbers, and they update their app really often.\nYou can change parameters passed ton package init in main.ts or app.ts files and change app version in android app.gradle and ios info.plist config files to test the feature.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Contributors

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@patrick-nurt/nativescript-masked-text-field":{"name":"@patrick-nurt/nativescript-masked-text-field","version":"3.0.1","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-masked-text-field

    \n

    This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

    \n

    Instance Properties

    \n
      \n
    • \n

      mask - string
      \nGets or sets the mask for the text field. Possible tokens in the mask:

      \n
        \n
      • 0 - Digit
        • \n
      • 9 - Digit or space
        • \n
      • # - Digit or + or -
        • \n
      • L - ASCII Letter
        • \n
      • ? - ASCII Letter or space
        • \n
      • & - Non-whitepsace character
        • \n
      • C - Any charcter
        • \n
      • A - ASCII Letter or digit
        • \n
      • a - ASCII Letter or digit or space
        • \n
      \n

      If you want to escape any token character you can use \\ (for example \\9)

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
        <StackLayout>
            <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
        </StackLayout>
    </Page>
    \n

    Usage in Angular

    \n

    In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

    \n
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    // ......
    @NgModule({
        // ......
        imports: [
            // ......
            MaskedTextFieldModule,
            // ......
        ],
        // ......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            MaskedTextFieldModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public value = \"\";
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-masked-text-field
    $ cd nativescript-masked-text-field
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sammoore/nativescript-image-swipe":{"name":"@sammoore/nativescript-image-swipe","version":"3.0.2","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

    \n

    Screenshot

    \n

    \"Screenshot\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-image-swipe

    \n

    This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • pageChanged
      \nTriggered when the user swipes to the next/previous image in the list.
      • \n
    \n

    Static Properties

    \n
      \n
    • pageChangedEvent - String
      \nString value used when hooking to pageChanged event.
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UIScrollView
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.support.v4.view.ViewPager
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ObservableArray
      \nGets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      pageNumber - Number
      \nGets or sets the currently visible image.

      \n
      • \n
    • \n

      imageUrlProperty - string
      \nGets or sets the property inside the items' object that defines the Url from where to load the images

      \n
      • \n
    • \n

      allowZoom - boolean (default: true)
      \nGets or sets whether zoom is enabled

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:is=\"nativescript-image-swipe\" navigatingTo=\"navigatingTo\">
        <GridLayout>
            <is:ImageSwipe items=\"{{ items }}\" imageUrlProperty=\"imageUrl\" 
                           pageNumber=\"{{ pageNumber }}\" pageChanged=\"pageChanged\" backgroundColor=\"#000000\">
            </is:ImageSwipe>
        </GridLayout>
    </Page>
    \n
    // test-page.ts
    import { EventData, Observable } from \"data/observable\";
    import { ObservableArray } from \"data/observable-array\";
    import { Page } from \"ui/page\";

    import { PageChangeEventData } from \"nativescript-image-swipe\";

    let viewModel: Observable;

    export function navigatingTo(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();

        items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
        items.push({ imageUrl: \"http://something.com/picture5.jpg\" });

        viewModel = new Observable();
        viewModel.set(\"items\", items);
        viewModel.set(\"pageNumber\", 3);

        page.bindingContext = viewModel;
    }

    export function pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
    \n

    Usage in Angular

    \n

    In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

    \n
    // main.ts
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { registerElement } from \"nativescript-angular/element-registry\";

    import { AppModule } from \"./app.module\";

    registerElement(\"ImageSwipe\", () => require(\"nativescript-image-swipe/image-swipe\").ImageSwipe);

    platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n
    <!-- test.component.html -->
    <GridLayout>
        <ImageSwipe [items]=\"items\" imageUrlProperty=\"imageUrl\" 
                    [pageNumber]=\"pageNumber\" (pageChanged)=\"pageChanged($event)\" backgroundColor=\"#000000\">
        </ImageSwipe>
    </GridLayout>
    \n
    // test.component.ts
    import { Component, OnInit } from \"@angular/core\";
    import { PageChangeEventData } from \"nativescript-image-swipe\";

    @Component({
        selector: \"demo\",
        moduleId: module.id,
        templateUrl: \"./test.component.html\",
    })
    export class ImageSwipeComponent implements OnInit {
        public items: any[] = [];
        public pageNumber: number = 3;

        ngOnInit(): void {
            this.items.push({ imageUrl: \"http://something.com/picture1.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture2.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture3.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture4.jpg\" });
            this.items.push({ imageUrl: \"http://something.com/picture5.jpg\" });
        }

        public pageChanged(e: PageChangeEventData) {
            console.log(`Page changed to ${e.page}.`);
        }
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-image-swipe
    $ cd nativescript-image-swipe
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow-ns-7":{"name":"nativescript-vue-shadow-ns-7","version":"10.1.0","license":"MIT","readme":"

    Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    npm install nativescript-vue-shadow-ns-7
    \n

    Demo

    \n

    \"Screenshot\"

    \n

    How to use it

    \n

    This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the Directive into main.js

    \n
    import NSVueShadow from 'nativescript-vue-shadow-ns-7'
    Vue.use(NSVueShadow)
    \n

    Use in your view or component

    \n

    Simple attribute for v-shadow:

    \n
    <Label v-shadow=\"2\"></Label>
    \n

    You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"myCustomData\"></Label>
    \n

    Then in your script tag you can do something like this where we bind to the object:

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow-ns-7\";
    // ...
    export default class MyComponent extends Vue {
      private myCustomData: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypeDefaultPlatformDescription
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-vue-shadow-ns-7\";

    export default class MyComponent extends Vue {
      // ...
      private elevation: number = Elevation.SNACKBAR;
      // ...
    }
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

    \n

    This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install in base directory of project
      • \n
    • Change to Demo directory and then run npm install
      • \n
    • Run and deploy to your device or emulator with npm run serve:android or npm run serve:ios. (use debug:android or debug:ios to attach to devtools)
      • \n
    \n

    Changelog

    \n
      \n
    • 0.1.0 Initial implementation
      • \n
    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@melonwd/nativescript-masked-text-field":{"name":"@melonwd/nativescript-masked-text-field","version":"3.0.3","license":"Apache-2.0","readme":"

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget\nand adds ability to define masks for the input.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-masked-text-field

    \n

    This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

    \n

    Instance Properties

    \n
      \n
    • \n

      mask - string
      \nGets or sets the mask for the text field. Possible tokens in the mask:

      \n
        \n
      • 0 - Digit
        • \n
      • 9 - Digit or space
        • \n
      • # - Digit or + or -
        • \n
      • L - ASCII Letter
        • \n
      • ? - ASCII Letter or space
        • \n
      • & - Non-whitepsace character
        • \n
      • C - Any charcter
        • \n
      • A - ASCII Letter or digit
        • \n
      • a - ASCII Letter or digit or space
        • \n
      \n

      If you want to escape any token character you can use \\ (for example \\9)

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:mtf=\"nativescript-masked-text-field\">
        <StackLayout>
            <mtf:MaskedTextField text=\"{{ value }}\" mask=\"(999) 999-9999\" keyboardType=\"phone\"/>
        </StackLayout>
    </Page>
    \n

    Usage in Angular

    \n

    In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

    \n
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    // ......
    @NgModule({
        // ......
        imports: [
            // ......
            MaskedTextFieldModule,
            // ......
        ],
        // ......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { MaskedTextFieldModule } from \"nativescript-masked-text-field/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            MaskedTextFieldModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <MaskedTextField class=\"input input-border\" mask=\"(999) 999-9999\" [(ngModel)]=\"value\" keyboardType=\"phone\"></MaskedTextField>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public value = \"\";
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-masked-text-field
    $ cd nativescript-masked-text-field
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@souriscloud/nativescript-bitmap-factory":{"name":"@souriscloud/nativescript-bitmap-factory","version":"2.0.0","license":{"type":"MIT","url":"https://github.com/souriscloud/nativescript-bitmap-factory/blob/master/LICENSE"},"readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Bitmap Factory

    \n

    A NativeScript module for creating and manipulating bitmap images.

    \n

    Forked

    \n

    This module is fork of nativescript-toolbox.\n\"Donate\"

    \n

    Usage

    \n
    import BitmapFactory = require(\"nativescript-bitmap-factory\");
    import KnownColors = require(\"color/known-colors\");

    // create a bitmap with 640x480
    var bmp = BitmapFactory.create(640, 480);

    // work with bitmap and
    // keep sure to free memory
    // after we do not need it anymore
    bmp.dispose(() => {
        // draw an oval with a size of 300x150
        // and start at position x=0, y=75
        // and use
        // \"red\" as border color and \"black\" as background color.
        bmp.drawOval(\"300x150\", \"0,75\",
                     KnownColors.Red, KnownColors.Black);
          
        // draw a circle with a radius of 80
        // at the center of the bitmap (null => default)
        // and use
        // \"dark green\" as border color           
        bmp.drawCircle(80, null,
                       KnownColors.DarkGreen);
                    
        // draws an arc with a size of 100x200
        // at x=10 and y=20
        // beginning at angle 0 with a sweep angle of 90 degrees
        // and a black border and a yellow fill color    
        bmp.drawArc(\"100x200\", \"10,20\",
                    0, 90,
                    KnownColors.Black, KnownColors.Yellow);
                       
        // set a yellow point at x=160, y=150
        bmp.setPoint(\"160,150\", \"ff0\");
        
        // draws a line from (0|150) to (300|75)
        // with blue color
        bmp.drawLine(\"0,150\", \"300,75\", '#0000ff');
        
        // writes a text in yellow color
        // at x=100, y=100
        // by using \"Roboto\" as font
        // with a size of 10
        bmp.writeText(\"This is a test!\", \"100,100\", {
            color: KnownColors.Yellow,
            size: 10,
            name: \"Roboto\"
        });
        
        // returns the current bitmap as data URL
        // which can be used as ImageSource
        // in JPEG format with a quality of 75%
        var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and in Base64 format
        var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
        
        // ... and as ImageSource
        var imgSrc = bmp.toImageSource();
    });
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescription
    asBitmapReturns a value as wrapped bitmap.
    createCreates a new bitmap instance.
    getDefaultOptionsReturns the default options for creating a new bitmap.
    makeMutableA helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object.
    setDefaultOptionsSets the default options for creating a new bitmap.
    \n

    Platform specific stuff

    \n

    You can access the nativeObject property to access the platform specific object.

    \n

    For Android this is a Bitmap object and for iOS this is an UIImage object.

    \n

    To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.

    \n

    Android

    \n

    You also can access the underlying Canvas object by __canvas property.

    \n

    iOS

    \n

    You also can access the underlying CGImage object by__CGImage property.

    \n

    Data types

    \n

    IArgb

    \n

    Stores data of an RGB value with alpha value.

    \n

    These values can also be submitted as strings (like #ff0 or ffffff) or numbers.

    \n
    interface IArgb {
        /**
         * Gets the alpha value.
         */
        a: number;

        /**
         * Gets the red value.
         */
        r: number;

        /**
         * Gets the green value.
         */
        g: number;

        /**
         * Gets the blue value.
         */
        b: number;
    }
    \n

    IBitmapData

    \n

    Used by toObject() method.

    \n
    interface IBitmapData {
        /**
         * Gets the data as Base64 string.
         */
        base64: string;

        /**
         * Gets the mime type.
         */
        mime: string;
    }
    \n

    IFont

    \n

    Font settings.

    \n
    interface IFont {
        /**
         * Anti alias or not.
         */
        antiAlias?: boolean;

        /**
         * Gets the custom forground color.
         */
        color?: string | number | IArgb;
        
        /**
         * Gets the name.
         */
        name?: string;

        /**
         * Gets the size.
         */
        size?: number;
    }
    \n

    IPoint2D

    \n

    Coordinates, can also be a string like 0,0 or 150|300.

    \n
    interface IPoint2D {
        /**
         * Gets the X coordinate.
         */
        x: number;
        
        /**
         * Gets the Y coordinate.
         */
        y: number;
    }
    \n

    IPoint2D

    \n

    Size, can also be a string like 0,0 or 150x300.

    \n
    interface ISize {
        /**
         * Gets the height.
         */
        height: number;
        
        /**
         * Gets the width.
         */
        width: number;
    }
    \n

    OutputFormat

    \n

    Supported output formats.

    \n
    enum OutputFormat {
        /**
         * PNG
         */
        PNG = 1,

        /**
         * JPEG
         */
        JPEG = 2,
    }
    \n

    Bitmap

    \n
    interface IBitmap {
        /**
         * Get the android specific object provided by 'application' module.
         */
        android: AndroidApplication;

        /**
         * Clones that bitmap.
         */
        clone(): IBitmap;

        /**
         * Crops that bitmap and returns its copy.
         */
        crop(leftTop?: IPoint2D | string,
             size?: ISize | string): IBitmap;

        /**
         * Gets or sets the default color.
         */
        defaultColor: IPoint2D | string | number;

        /**
         * Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
         */
        dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
                            tag?: T): TResult;

        /**
         * Draws a circle.
         */
        drawCircle(radius?: number,
                   center?: IPoint2D | string,
                   color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws an arc.
         */
        drawArc(size?: ISize | string,
                leftTop?: IPoint2D | string,
                startAngle?: number,
                sweepAngle?: number,
                color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a line.
         */
        drawLine(start: IPoint2D | string, end: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Draws an oval circle.
         */
        drawOval(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Draws a rectangle.
         */
        drawRect(size?: ISize | string,
                 leftTop?: IPoint2D | string,
                 color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;

        /**
         * Gets the color of a point.
         */
        getPoint(coordinates?: IPoint2D | string): IArgb;

        /**
         * Gets the height of the bitmap.
         */
        height: number;

        /**
         * Get the iOS specific object provided by 'application' module.
         */
        ios: iOSApplication;

        /**
         * Inserts another image into that bitmap.
         */
        insert(other: any,
               leftTop?: IPoint2D | string): IBitmap;
        
        /**
         * Gets if the object has been disposed or not.
         */
        isDisposed: boolean;

        /**
         * Gets the native platform specific object that represents that bitmap.
         */
        nativeObject: any;

        /**
         * Normalizes a color value.
         */
        normalizeColor(value: string | number | IArgb): IArgb;

        /**
         * Creates a copy of that bitmap with a new size.
         */
        resize(newSize: ISize | string): IBitmap;

        /**
         * Resizes that image by defining a new height by keeping ratio.
         */
        resizeHeight(newHeight: number): IBitmap;

        /**
         * Resizes that image by defining a new (maximum) size by keeping ratio.
         */
        resizeMax(maxSize: number): IBitmap;

        /**
         * Resizes that image by defining a new width by keeping ratio.
         */
        resizeWidth(newWidth: number): IBitmap;

        /**
         * Rotates the image.
         */
        rotate(degrees?: number): IBitmap;

        /**
         * Sets a pixel / point.
         */
        setPoint(coordinates?: IPoint2D | string,
                 color?: string | number | IArgb): IBitmap;

        /**
         * Gets the size.
         */
        size: ISize;

        /**
         * Converts that image to a Base64 string.
         */
        toBase64(format?: OutputFormat, quality?: number): string;

        /**
         * Converts that image to a data URL.
         */
        toDataUrl(format?: OutputFormat, quality?: number): string;

        /**
         * Returns that image as ImageSource.
         */
        toImageSource(): ImageSource;

        /**
         * Converts that image to an object.
         */
        toObject(format?: OutputFormat, quality?: number): IBitmapData;

        /**
         * Writes a text.
         */
        writeText(txt: any,
                  leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;

        /**
         * Gets the width of the bitmap.
         */
        width: number;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"symlink-resolver-fork":{"name":"symlink-resolver-fork","version":"0.2.1-fork.1","license":"MIT","readme":"

    Symlink Resolver

    \n

    This tool allows to replace symbolic links by real files in given directory and revert the changes back to symlinks. All the magic in a simple cli command!

    \n

    Installation

    \n
    npm install symlink-resolver --save-dev
    \n

    Node.js v6.4+ and POSIX-standarized operating system are required.

    \n

    To your package.json scripts section add the following rule:

    \n
    \"scripts\": {
        \"symlink-resolver\": \"symlink-resolver\",
    }
    \n

    Basic Usage

    \n

    For fast usage you can simply run:

    \n
      \n
    • npm run symlink-resolver build ./symlinks/path to replace symlinks by real files in ./symlinks/path
      • \n
    • npm run symlink-resolver clear ./symlinks/path to restore all symlinks
      • \n
    \n

    First command will create ./symlinks/path/.symlinks.json file which contains changes that have been made in this directory. It will be removed by the second command, however you can still add to your .gitignore the following rule: .symlinks.json

    \n
    How to create a symlink?
    \n

    Use ln -s target source command, i.e.:

    \n
    ln -s ../../source/path/linked-dir ./project/src/linked-dir
    \n

    Advanced usage

    \n

    If you need this feature to make a build, then I strongly recommend to automatize your building process:

    \n
    \"scripts\": {
            \"symlink-resolver\": \"symlink-resolver\",
            \"prebuild\": \"npm run symlink-resolver build ./symlinks/path\",
            \"postbuild\": \"npm run symlink-resolver clear ./symlinks/path\",
            \"build\": \"your build command should be under this name\"
    }
    \n

    This way you will be able to make a build and edit your files without worries.

    \n

    However, in some cases like emulating a device, the "post" script will not be executed. If this is also your case then take a look at example workaround for NativeScript:

    \n
      \"scripts\": {
        \"symlink-resolver\": \"symlink-resolver\",
        \"prens-bundle\": \"npm run symlink-resolver build ./symlinks/path\",
        \"delay-clear\": \"sleep 22 && npm run symlink-resolver clear ./symlinks/path\",
        \"ns-bundle\": \"npm run delay-clear | ns-bundle\",
        \"start-android-bundle\": \"npm run ns-bundle --android --start-app\",
        \"start-ios-bundle\": \"npm run ns-bundle --ios --start-app\",
        \"build-android-bundle\": \"npm run ns-bundle --android --build-app\",
        \"build-ios-bundle\": \"npm run ns-bundle --ios --build-app\"
      },
    \n

    Advanced configuration

    \n

    You can adjust Config to your needs.

    \n
      \n
    • Want to use custom symlinks file name? No problem, just set Config.symlinksFile to whatever you want.
      • \n
    • Need some custom behavior? Simply extend SymlinkHelper class and set Config.helperClass to yours.
      • \n
    \n
    export interface ConfigInterface {
        rootDir: string;
        symlinksFile: string;
        helperClass: typeof SymlinkHelper;
    }
    \n
    Happy developing!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zeepay-trustpayment":{"name":"nativescript-zeepay-trustpayment","version":"0.0.25","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-http":{"name":"@testjg/nativescript-http","version":"1.1.1","license":"Apache-2.0","readme":"

    @testjg/nativescript-http

    \n

    \"npm

    \n

    Http helper lib. Under the hood it uses okhttp (v3) for Android and NSURLSession for iOS.

    \n

    Has peer dependencies on url-join and rxjs.

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-http
    \n

    Usage

    \n
    import { createHttp, forRelativeUrl } from '@testjg/nativescript-http';
    import { firstValueFrom } from 'rxjs';
    import { catchError, switchMap } from 'rxjs/operators';

    export class TodosService {
      http = createHttp('https://jsonplaceholder.typicode.com');
      todos = forRelativeUrl('todos', this.http);

      fetchTodo(id: number) {
        const json$ = this.todos
          .request({
            method: 'GET',
            url: `${id}`,
            headers: { 'Accept-Language': ['ca', 'en'] },
          })
          .pipe(
            switchMap((res) => res.json()),
            catchError((error) => null)
          );

        return firstValueFrom(json$);
      }
    }
    \n

    Pro tip: Use functions like jsonBody or multiPartBody to create the appropiate request content.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-plugin-seed":{"name":"nativescript-ng2-plugin-seed","version":"1.0.0","license":"MIT","readme":"

    Develop a nativescript-angular plugin now

    \n

    \"Angular\n\"MIT\n\"Dependency

    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Demo\"
    Android and iPhone running the same {N} + Angular2 plugin.
    \n

    The seed is setup to allow you to create a nativescript-angular plugin quickly.

    \n
      \n
    • Sample demo app ready for you to try out your plugin as you develop it.
      • \n
    • Sample Component, Directive, Pipe and Service created for you (tests coming soon) to get started right away.
      • \n
    • Customize whichever is helpful to your plugin and remove the others.
      • \n
    \n

    Get started

    \n
      \n
    1. Download a zip of this seed.
      2. \n
    2. cd ... path/to/unzip/folder ...
      3. \n
    3. npm install -g typescript
      4. \n
    4. npm install -g nativescript
      5. \n
    5. npm install
      6. \n
    6. npm run setup
      7. \n
    7. Get to work.
      8. \n
    \n

    Changes needed

    \n

    You will want to change a couple things for your plugin.

    \n
      \n
    1. Replace all instances of nativescript-ng2-yourplugin with name of your plugin:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/package.json
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/package.json#L16
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/tsconfig.json#L14 (And likely modify more to tailor to your specific plugins typescript definition needs)
      • \n
    \n
      \n
    1. Modify the demo to import your plugin files, etc: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/app/app.ts#L10-L15
      2. \n
    \n

    Develop Workflow

    \n

    Make changes to plugin files, then:

    \n
    npm run demo.ios

    // or...

    npm run demo.android
    \n

    Build Plugin

    \n

    You'll want to run this before publishing.

    \n
    npm run build
    \n

    VERY IMPORTANT: You need to modify package.json for your plugin. Most likely, you will want to remove 3 sections completely: scripts, dependencies, and devDependencies as those are setup for the demo. When publishing, it's important to ensure no unnecessary scripts or dependencies are installed when comsumers use your plugin. You can add those sections back after publishing.

    \n

    Testing

    \n

    Work in progress. Coming soon.

    \n
    npm test
    \n

    Troubleshooting

    \n

    When preparing your demo if you get the following error message:

    \n
    Plugin \"nativescript-ng2-yourplugin\" is not installed.
    Sending exception report (press Ctrl+C to stop).....
    \n

    This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ui-base":{"name":"@nativescript/ui-base","version":"7.0.0-rc.0","license":"Apache-2.0","readme":"

    NativeScript Core Modules Widgets

    \n

    \"Build

    \n

    This library represents native code (Java and Objective-C) used by the NativeScript core modules.

    \n

    NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

    \n\n\n\n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-shortcuts":{"name":"nativescript-app-shortcuts","version":"3.0.0","license":"MIT","readme":"

    NativeScript Icon Shortcuts plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    \n

    Supported platforms

    \n
      \n
    • iPhone 6s / 6s Plus or newer, running iOS 9 or newer.
      • \n
    • Android 7.1 (API level 25) or newer.
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n

    NativesScript 7.x

    \n
    tns plugin add nativescript-app-shortcuts
    \n

    NativesScript 6.x

    \n
    tns plugin add nativescript-app-shortcuts@2.2.0
    \n

    Demo app (XML & TypeScript)

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    API

    \n

    available

    \n

    Check whether or not the device is capable.\nAndroid devices will also report false, so you can use this cross platform.

    \n
    JavaScript
    \n
    // require the plugin
    var AppShortcuts = require(\"nativescript-app-shortcuts\").AppShortcuts;

    // instantiate the plugin
    var appShortcuts = new AppShortcuts();

    appShortcuts.available().then(
      function(available) {
        if (available) {
          console.log(\"This device supports app shortcuts\");
        } else {
          console.log(\"No app shortcuts capability, ask the user to upgrade :)\");
        }
      }
    );
    \n
    TypeScript
    \n
    // require the plugin
    import { AppShortcuts } from \"nativescript-app-shortcuts\";

    // instantiate the plugin
    let appShortcuts = new AppShortcuts();

    appShortcuts.available().then(available => {
      if (available) {
        console.log(\"This device supports app shortcuts\");
      } else {
        console.log(\"No app shortcuts capability, ask the user to upgrade :)\");
      }
    });
    \n

    configureQuickActions

    \n

    When your app is running you can add those fancy Quick Actions to the Home Screen icon. You can configure up to four icons and they are 'cached' by iOS until you pass in a new set of icons. So you don't need to do this every time your app loads, but it can't really hurt of course.

    \n

    The type param (see the code sample below) is the most convenient way to relate the icon to the event you'll receive when the action was used to launch your app. So make sure it's unique amongst your icons.

    \n

    There are two types of icons currently supported: iconType and iconTemplate.

    \n

    iconType (iOS)

    \n

    A value from a fixed list of icons which have been provided by Apple and look great (click the value in the 'API' column to look up the Objective-C name, and look at the sample below how to use them).

    \n

    iconTemplate

    \n

    Can be used to provide your own icon. It must be a valid name of an icon template in your Assets catalog. NativeScript allows you to add the icon to the app/App_Resources/<platform> folder. If you add a file called beer.png then reference it as beer. More on these images below when we discuss static actions.

    \n

    Ignored on iOS, if iconType is set as well.

    \n
    TypeScript
    \n
    import { AppShortcuts } from \"nativescript-app-shortcuts\";
    import { isIOS } from \"tns-core-modules/platform\";

    let appShortcuts = new AppShortcuts();

    appShortcuts.configureQuickActions([
      {
        type: \"capturePhoto\",
        title: \"Snag a pic\",
        subtitle: \"You have 23 snags left\", // iOS only
        iconType: isIOS ? UIApplicationShortcutIconType.CapturePhoto : null,
        iconTemplate: \"eye\" // ignored by iOS, if iconType is set as well
      },
      {
        type: \"beer\",
        title: \"Beer-tastic!\",
        subtitle: \"Check in & share\", // iOS only
        iconTemplate: \"beer\"
      }
    ]).then(() => {
      alert(\"Added 2 actions, close the app and apply pressure to the app icon to check it out!\");
    }, (errorMessage) => {
      alert(errorMessage);
    });
    \n

    Capturing the Action

    \n

    When a home icon is pressed, your app launches. You probably want to perform different actions based on the home icon action\nthat was picked (like routing to a different page), so you need a way to capture the event.

    \n

    NativeScript with XML

    \n

    In a non-Angular NativeScript app we need to extend app.js or app.ts and import the plugin,\nthen call the setQuickActionCallback function. So in case of app.ts change it from something like this:

    \n
    import * as application from \"tns-core-modules/application\";
    application.start({ moduleName: \"main-page\" });
    \n

    To this:

    \n
    import * as application from \"tns-core-modules/application\";

    // import the plugin
    import { AppShortcuts } from \"nativescript-app-shortcuts\";

    // instantiate it and call setQuickActionCallback
    new AppShortcuts().setQuickActionCallback(shortcutItem => {
      console.log(`The app was launched by shortcut type '${shortcutItem.type}'`);

      // this is where you handle any specific case for the shortcut
      if (shortcutItem.type === \"beer\") {
        // this is an example of 'deeplinking' through a shortcut
        let frames = require(\"ui/frame\");
        // on Android we need a little delay
        setTimeout(() => {
          frames.topmost().navigate(\"beer-page\");
        });
      } else {
        // .. any other shortcut handling
      }
    });

    application.start({ moduleName: \"main-page\" });
    \n

    NativeScript with Angular

    \n

    If you're using Angular, the best place to add the handler is in app.module.ts,\nand use NgZone to help Angular knowing about the route change you're performing:

    \n
    import { NgZone } from \"@angular/core\";
    import { isIOS } from \"tns-core-modules/platform\";
    import { RouterExtensions } from \"nativescript-angular\";
    import { AppShortcuts } from \"nativescript-app-shortcuts\";

    export class AppModule {
      constructor(private routerExtensions: RouterExtensions,
                  private zone: NgZone) {

        new AppShortcuts().setQuickActionCallback(shortcutItem => {
      console.log(`The app was launched by shortcut type '${shortcutItem.type}'`);

          // this is where you handle any specific case for the shortcut, based on its type
          if (shortcutItem.type === \"page1\") {
            this.deeplink(\"/page1\");
          } else if (shortcutItem.type === \"page2\") {
            this.deeplink(\"/page2\");
          }
        });
      }

      private deeplink(to: string): void {
        this.zone.run(() => {
          this.routerExtensions.navigate([to], {
            animated: false
          });
        });
      }
    }
    \n

    Configuring Static Actions

    \n

    With configureQuickActions you can configure dynamic actions,\nbut what if you want actions to be available immediately after the app as installed from the store?

    \n

    iOS

    \n

    You need to manually edit the .plist.\nFortunately NativeScript allows you to change this file through app/App_Resources/iOS/Info.plist. Anything added there is added to the final .plist during a build.

    \n

    Note that dynamic actions will never replace static actions, so if you have two static actions you can add up to two dynamic ones. Any more will be ignored.

    \n

    Here's an example which you can paste anywhere in the .plist file:

    \n
    <key>UIApplicationShortcutItems</key>
    <array>
      <dict>
        <key>UIApplicationShortcutItemIconFile</key>
        <string>Eye</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Eye from plist</string>
        <key>UIApplicationShortcutItemSubtitle</key>
        <string>Awesome subtitle</string>
        <key>UIApplicationShortcutItemType</key>
        <string>eyefromplist</string>
      </dict>
      <dict>
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeCompose</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>Compose</string>
        <key>UIApplicationShortcutItemType</key>
        <string>compose</string>
      </dict>
    </array>
    \n

    UIApplicationShortcutItemIconFile

    \n

    The second action above uses the built-in UIApplicationShortcutIconTypeCompose icon, but the first one uses a custom icon: Eye. This expects the file app/App_Resources/iOS/Eye.png. According to Apple's docs this needs to be a single color, transparent, square, 35x35 icon - but that size will look pixelated on retina devices so go ahead and use a 70x70 or 105x105 icon if you please.

    \n

    UIApplicationShortcutItemTitle / UIApplicationShortcutItemSubtitle

    \n

    You can guess what those do, right? Only the title is mandatory.

    \n

    UIApplicationShortcutItemType

    \n

    This is the same as the type param of configureQuickActions, so it's what you'll receive in the callback you may have configured in app.js / app.ts as payload.type. Just do something cool with that info (like routing to a specific page and loading some content).

    \n

    Android

    \n

    Open app/App_Resources/Android/AndroidManifest.xml and add:

    \n
    <activity ..> <!-- your existing NativeScript activity -->
      <meta-data android:name=\"android.app.shortcuts\"
                 android:resource=\"@xml/shortcuts\" />
    </activity>
    \n

    Add the file you referenced in AndroidManifest.xml: /app/App_Resources/Android/xml/shortcuts.xml and add:

    \n
    <shortcuts xmlns:android=\"http://schemas.android.com/apk/res/android\">
      <shortcut
          android:shortcutId=\"compose\"
          android:enabled=\"true\"
          android:icon=\"@drawable/add\"
          android:shortcutShortLabel=\"@string/shortcut_short_label1\"
          android:shortcutLongLabel=\"@string/shortcut_long_label1\"
          android:shortcutDisabledMessage=\"@string/shortcut_disabled_message1\">
        <intent
            android:action=\"shortcut.type.compose\"
            android:targetPackage=\"org.nativescript.plugindemo.appshortcuts\"
            android:targetClass=\"com.tns.NativeScriptActivity\"/>
        <categories android:name=\"android.shortcut.conversation\"/>
      </shortcut>
    </shortcuts>
    \n

    A few notes:

    \n
      \n
    • This adds 1 static shortcut to your app (you can add more if you like).
      • \n
    • Make sure the action has the shortcut.type. prefix. The value behind the prefix is the equivalent of the iOS UIApplicationShortcutItemType.
      • \n
    • The targetPackage needs to be your app id.
      • \n
    • The targetClass needs to be the activity class as mentioned in AndroidManifest.xml, which is com.tns.NativeScriptApplication by default.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-social-login":{"name":"@martinbuezas/nativescript-social-login","version":"3.0.4","license":"Apache-2.0","readme":"

    NativeScript Social Login

    \n

    Authenticate users using Facebook and Google sign in.

    \n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Installation

    \n
    tns plugin add @martinbuezas/nativescript-social-login
    \n

    Android Configuration

    \n

    Strings.xml

    \n

    Add your Facebook App ID to App_Resources/Android/src/main/res/values/strings.xml - If the file doesn't exist, create it and don't forget to add you app's name and kimera title.

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
      <string name=\"app_name\">{{ YOUR_APP_NAME }}</string>
      <string name=\"title_activity_kimera\">{{ YOUR_APP_NAME }}</string>
      <string name=\"facebook_app_id\">{{ YOUR_FACEBOOK_APP_ID }}</string>
      <string name=\"fb_login_protocol_scheme\">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
    </resources>
    \n

    AndroidManifest.xml

    \n
      \n
    1. Add the xmlns:tools="http://schemas.android.com/tools" namespace to your <manifest> tag.
      2. \n
    2. Check the required permissions
      3. \n
    3. Add the Facebook configuration in the <application> section of the manifest
      4. \n
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest
      xmlns:android=\"http://schemas.android.com/apk/res/android\"
      xmlns:tools=\"http://schemas.android.com/tools\"
      >

        <!-- 2. Permission -->
        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
        <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />

        <application>
          <!-- 3. Facebook config -->
          <meta-data
            android:name=\"com.facebook.sdk.ApplicationId\"
            android:value=\"@string/facebook_app_id\"
          />
          <activity
            android:name=\"com.facebook.FacebookActivity\"
            android:configChanges=\"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
            tools:replace=\"android:theme\"
            android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
            android:label=\"@string/app_name\"
          />
          <activity
            android:name=\"com.facebook.CustomTabActivity\"
            android:exported=\"true\"
          >
            <intent-filter>
              <action android:name=\"android.intent.action.VIEW\" />
              <category android:name=\"android.intent.category.DEFAULT\" />
              <category android:name=\"android.intent.category.BROWSABLE\" />
              <data android:scheme=\"@string/fb_login_protocol_scheme\" />
            </intent-filter>
          </activity>
      </application>
    </manifest>
    \n

    Setup Android Google Sign in for Debug Builds

    \n
      \n
    1. You need the SHA1 value associated with the debug.keystore in your local android setup on your machine. For example, the following command is what you might run on a Windows machine:
      2. \n
    \n
    keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    \n

    The path will change according to the path on your machine. The android debug builds are signed with this default debug.keystore located on your machine. So when you run the debug build on a device Google will allow the authentication with the running .apk since it has the SHA1 for the debug.keystore the debug app is built with.

    \n
      \n
    1. Create an app here on Google Developer site.\n
        \n
      • Enter the App name. This can be anything but it will display to the user who is authenticating.
        • \n
      • Enter the android package name. The package name is the android app name which is in the package.json under the nativescript object as the id property.
        • \n
      • Next configure the Google services.
        • \n
      • Select Google Sign-In
        • \n
      • Enter your Signing Certificate SHA-1. This is the SHA1 value you get from the first step when running the keytool command.
        • \n
      • Enable Google Sign-In\n
          \n
        • If only enabling Google Sign-In you do not need the configuration file inside your application.
          • \n
        \n
        • \n
      \n
      2. \n
    2. Run the app and loginWithGoogle() should return the data associated with the google account that was selected.
      3. \n
    \n

    iOS Configuration

    \n

    Info.plist

    \n

    Add your Facebook App ID and your Reversed Client ID to app/App_Resources/iOS/Info.plist

    \n
    <dict>
      <!-- ... -->

      <!-- FACEBOOK AND GOOGLE LOGIN start -->
      <key>FacebookAppID</key>
      <string>{{ YOUR_FACEBOOK_APP_ID }}</string>
      <key>FacebookDisplayName</key>
      <string>{{ YOUR_FACEBOOK_DISPLAY_NAME }}</string>
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleTypeRole</key>
          <string>Editor</string>
          <key>CFBundleURLSchemes</key>
          <array>
            <!-- Get it from your GoogleService-Info.plist -->
            <string>{{ REVERSED_CLIENT_ID }}</string>
          </array>
        </dict>
        <dict>
          <key>CFBundleTypeRole</key>
          <string>Editor</string>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>fb{{ YOUR_FACEBOOK_APP_ID }}</string>
          </array>
        </dict>
      </array>
      <!-- FACEBOOK AND GOOGLE LOGIN end -->
    </dict>
    \n

    API

    \n

    requiring / importing the plugin

    \n
    import { SocialLogin } from \"@martinbuezas/nativescript-social-login\";

    export class MyClass {
      private sl: SocialLogin = SocialLogin.getInstance();
    }
    \n

    loginWithGoogle()

    \n
    this.sl.loginWithGoogle({
        iosClientId: GOOGLE_IOS_CLIENT_ID,
        serverClientId: GOOGLE_SERVER_CLIENT_ID,
      })
      .then((result) => console.log(\"USER\", result))
      .catch((error) => console.log(\"ERROR\", error));
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    requestServerAuthCodefalseRequest an "offline" code that a server can use to exchange for a new Auth Token
    iosClientIdundefinedRequired for iOS
    serverClientIdundefinedRequired for Android
    Required for iOS (and Android) when requesting server auth code.
    \n

    loginWithFacebook

    \n
    this.sl.loginWithFacebook({
        scopes: [\"profile\", \"email\"]
      })
      .then((result) => console.log(\"USER\", result))
      .catch((error) => console.log(\"ERROR\", error));
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    scopes["profile", "email"]NOTE: Additional scopes haven't been tested
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    To-do

    \n
      \n
    • Implement environment handling of Android and iOS config files
      • \n
    • Test additional Facebook Login scopes
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"generator-nativescript-plugin":{"name":"generator-nativescript-plugin","version":"1.0.4","license":"MIT","readme":"

    generator-nativescript-plugin \"NPM \"Dependency \"npm\"

    \n
    \n

    Generator for nativescript-plugin projects

    \n
    \n

    Installation

    \n

    First, install Yeoman and generator-nativescript-plugin using npm (we assume you have pre-installed node.js).

    \n
    npm install -g yo
    npm install -g generator-nativescript-plugin
    \n

    Then generate your new project:

    \n
    //to generate a normal nativescript + typescript plugin
    yo nativescript-plugin

    //to generate a nativescript + angular2 plugin 
    yo nativescript-plugin:ng2
    \n

    Getting To Know Yeoman

    \n
      \n
    • Yeoman has a heart of gold.
      • \n
    • Yeoman is a person with feelings and opinions, but is very easy to work with.
      • \n
    • Yeoman can be too opinionated at times but is easily convinced not to be.
      • \n
    • Feel free to learn more about Yeoman.
      • \n
    \n

    License

    \n

    MIT © PeopleWare

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-filepicker":{"name":"@testjg/nativescript-filepicker","version":"1.0.3","license":"Apache-2.0","readme":"

    @testjg/nativescript-filepicker

    \n

    \"npm

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-filepicker
    \n

    Usage

    \n

    You should ask for permissions first. And wrap it in your preferred async option.

    \n
    // `result` can be null.
    const result = await showFilePicker();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nano-sql/adapter-sqlite-nativescript":{"name":"@nano-sql/adapter-sqlite-nativescript","version":"2.0.3","license":"MIT","readme":"

    \n \n \"nanoSQL\n \n

    \n

    \n \n \"nanoSQL\n \n \n \"nanoSQL\n \n

    \n

    nanoSQL 2 SQLite NativeScript Adapter

    \n

    \n Allows you to run SQLite in NativeScript with nanoSQL 2\n

    \n

    Documentation | Bugs | Chat

    \n

    Includes all typings, runs in iOS or Android

    \n

    Installation

    \n
    tns plugin add @nano-sql/adapter-sqlite-nativescript
    \n

    Usage

    \n
    import { NativeSQLite } from \"@nano-sql/adapter-sqlite-nativescript\";
    // MUST include nSQL from the lib path.
    import { nSQL } from \"@nano-sql/core/lib/index\";

    nSQL().createDatabase({
        id: \"my_db\",
        mode: new NativeSQLite(),
        tables: [...]
    }).then(...)
    \n

    API

    \n

    The NativeSQLite class accepts one optional arguments in it's constructor.

    \n

    Filename

    \n

    The first argument is the filename to the SQLite database to connect to, default is to use the database ID as the filename.

    \n

    MIT License

    \n

    Copyright (c) 2019 Scott Lott

    \n

    Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:

    \n

    The above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.

    \n

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.

    \n

    Changelog

    \n

    [2.0.2]

    \n
      \n
    • SQLite now uses database ID as name instead of ":memory:" by default.
      • \n
    \n

    [2.0.1]

    \n
      \n
    • Dependency & Documentation updates.
      • \n
    \n

    [2.0.0]

    \n
      \n
    • First release
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase":{"name":"@triniwiz/nativescript-supabase","version":"0.3.0","license":"Apache-2.0","readme":"

    Nativescript Supabase

    \n
    ns plugin add @triniwiz/nativescript-supabase
    \n

    Usage

    \n

    Database

    \n
    import {createClient} from '@triniwiz/nativescript-supabase';

    const client = createClient('supabaseUrl', 'supabaseKey');

      // Select from table `countries` ordering by `name`
      const response = await client
          .from('countries')
          .select()
          .order('name', ascending: true)
          .execute();
    }
    \n

    Authentication

    \n
    import {createClient} from '@triniwiz/nativescript-supabase';

    const client = createClient('supabaseUrl', 'supabaseKey');

    // Sign up user with email and password
    const response = await client.auth.signUp('email', 'password');
    \n

    Storage

    \n
    import {File as nsFile, knownFolders, path} from '@nativescript/core';
    import {createClient} from '@triniwiz/nativescript-supabase';

     const client = createClient('supabaseUrl', 'supabaseKey');
      
      // Create file `example.txt` and upload it in `public` bucket
      const exampleText = path.join(knownFolders.documents().path, 'example.txt');
      const file = nsFile.fromPath(exampleText);
      file.writeTextSync('File content');
      const storageResponse = await client
          .storage
          .from('public')
          .upload('example.txt', exampleText);
    \n

    Check out the Official Documentation to learn all the other available methods.

    \n

    Credits

    \n

    Based on supabase-js

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/preferences":{"name":"@nativescript-community/preferences","version":"1.3.0","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    @nativescript-community/preferences

    \n

    This plugin allows native preference saving\\loading on iOS and Android

    \n\n\n

    iOS Prerequisites

    \n\n

    Android Prerequisites

    \n\n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @nativescript-community/preferences
    \n

    Usage

    \n
        var prefs = new Preferences();

        //Get existing value
        prefs.getValue(\"name_preference\");

        //Set value
        prefs.setValue(\"name_preference\", \"some new text\");
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    openSettings(): any;Opens the native settings panes
    getValue(key: string): any;Gets the value for the preference
    setValue(key: string, value: any): void;Sets the passed value to the preference
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/ui-pager":{"name":"@enduco/ui-pager","version":"13.1.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Pager

    \n

    Install

    \n

    NativeScript 7x

    \n
      \n
    • tns plugin add @enduco/ui-pager
      • \n
    \n

    NativeScript 6x

    \n
      \n
    • tns plugin add nativescript-pager
      • \n
    \n

    NativeScript 5x

    \n
      \n
    • tns plugin add nativescript-pager@9.x
      • \n
    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-pager@8.0.2
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-pager@7.2.3
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-pager@2.3.0
      • \n
    \n

    Usage

    \n

    Note v11+

    \n
    Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
    \n

    IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

    \n
    <pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <pager:Pager.itemTemplate>
                    <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                        <Label text=\"{{title}}\"/>
                        <Image row=\"1\" src=\"{{image}}\"/>
                    </GridLayout>
                </pager:Pager.itemTemplate>
    </pager:Pager>
    \n

    Multi Template

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
          <Pager.itemTemplates>
            <template key=\"even\">
              <GridLayout rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
            <template key=\"odd\">
              <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <StackLayout row=\"2\">
                  <Label text=\"{{image}}\"/>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
          </Pager.itemTemplates>
          <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
        </c:Pager>
    \n

    Static Views

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                     showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <c:PagerItem backgroundColor=\"red\">
                    <Label text=\"First\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"white\">
                    <Label text=\"Second\" ></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"black\">
                    <Label text=\"Third\" color=\"white\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"green\">
                    <Label text=\"Fourth\"></Label>
                </c:PagerItem>
            </c:Pager>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import Pager from 'nativescript-pager/vue';

    Vue.use(Pager);
    \n
    <template>
        <Pager for=\"item in items\">
            <v-template>
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Label :text=\"item.title\" />
                    <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
                </GridLayout>
            </v-template>
            <v-template if=\"$odd\">
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Image  stretch=\"fill\" :src=\"item.image\" />
                    <Label :text=\"item.title\" row=\"1\"/>
                </GridLayout>
            </v-template>
        </Pager>
    </template>
    \n

    Static Views

    \n
    <Pager height=\"100%\" :selectedIndex=\"1\">
      <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
      <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
      <PagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </PagerItem>
      <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
    </Pager>
    \n

    Angular

    \n
    import { PagerModule } from \"nativescript-pager/angular\";

    @NgModule({
        imports: [
        PagerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Angular v2

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </template>
    </Pager>
    \n

    Angular v4+

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <ng-template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Multi Template

    \n
     public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
      }
    \n
    <Pager
      row=\"1\"
      [items]=\"items | async\"
      [itemTemplateSelector]=\"templateSelector\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
      backgroundColor=\"lightsteelblue\"
    >
      <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
        <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
          <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>

      <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto,auto,auto,*\"
          columns=\"*\"
          backgroundColor=\"white\"
        >
          <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
          <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Static Views

    \n
    <Pager
      backgroundColor=\"orange\"
      row=\"1\"
      #pager
      [selectedIndex]=\"1\"
      height=\"100%\"
    >
      <StackLayout *pagerItem backgroundColor=\"red\">
        <label text=\"First\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"white\">
        <label text=\"Second\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"green\">
        <label text=\"Fourth\"></label>
      </StackLayout>
    </Pager>
    \n

    React

    \n
    import {$Pager} from 'nativescript-pager/react';
    return (
    <$Pager
                    height={{ unit: \"%\", value: 100 }}
                       selectedIndex={this.selectedIndex}
                       selectedIndexChange={this.selectedIndexChange.bind(this)}
                        items={this.items}
                         cellFactory={
                        (item, ref) => {
                            return (
                                <$StackLayout id={item.title} ref={ref}>
                                    <$Label text={item.title}/>
                                    <$ImageCacheIt stretch={'aspectFill'}
                                            src={item.image}/>
                                </$StackLayout>
                            );
                        }
                    }/>
    )
    \n

    Static Views

    \n
    return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                               <$PagerItem backgroundColor={'red'}>
                                   <$Label text={'First'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'white'}>
                                   <$Label text={'Second'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'black'}>
                                   <$Label text={'Third'} color={new Color('white')}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'green'}>
                                   <$Label text={'Fourth'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'pink'}>
                                   <$Label text={'Fifth'}/>
                               </$PagerItem>
                           </$Pager>)
    \n

    Config

    \n
    <Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"ios\"\"android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digital-sustainability/nativescript-app-auth":{"name":"@digital-sustainability/nativescript-app-auth","version":"1.0.5","license":"Apache-2.0","readme":"

    @digital-sustainability/nativescript-app-auth

    \n
    ns plugin add @digital-sustainability/nativescript-app-auth
    \n

    Setup

    \n

    Demo

    \n

    Update the config values in tools/demo/nativescript-app-auth/index.ts.

    \n

    Android

    \n

    To setup the Android project, you need to update the redirect scheme in tools/assets/App_Resources/Android/app.gradle

    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/core-widgets":{"name":"@nativescript/core-widgets","version":"7.0.0-rc.0","license":"Apache-2.0","readme":"

    NativeScript Core Modules Widgets

    \n

    \"Build

    \n

    This library represents native code (Java and Objective-C) used by the NativeScript core modules.

    \n

    NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS.

    \n\n\n\n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dark-engine/native-navigation":{"name":"@dark-engine/native-navigation","version":"0.25.1","license":"MIT","readme":"

    @dark-engine/native-navigation 🌖

    \n

    Dark navigation for NativeScript platform.

    \n

    More about Dark\n
    \nMore about NativeScript

    \n

    Installation

    \n

    npm:

    \n
    npm install @dark-engine/native-navigation
    \n

    yarn:

    \n
    yarn add @dark-engine/native-navigation
    \n

    API

    \n
    import {
      type NavigationOptions,
      NavigationContainer,
      StackNavigator,
      TabNavigator,
      TransitionName,
      useNavigation,
    } from '@dark-engine/native-navigation';
    \n

    Usage

    \n

    In order to use navigation, you need to wrap the application root in a NavigationContainer and pass a defaultPathname to it, which will display the selected screen when the application starts. Inside this container, you must place the selected navigator and describe the collection of screens for navigation. Each screen must have a name and a component to be rendered.

    \n

    Navigation via StackNavigator

    \n

    StackNavigator is the main navigation method that implements the logic of changing screens.

    \n
    import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';
    \n
    const App = component(() => {
      return (
        <NavigationContainer defaultPathname='/Feed'>
          <StackNavigator.Root>
            <StackNavigator.Screen name='Feed' component={Feed} />
            <StackNavigator.Screen name='Friends' component={Friends} />
            <StackNavigator.Screen name='Profile' component={Profile} />
            <StackNavigator.Screen name='Settings' component={Settings} />
          </StackNavigator.Root>
        </NavigationContainer>
      );
    });
    \n

    Navigation via TabNavigator

    \n

    The TabNavigator is a wrapper around the StackNavigator that displays tab buttons at the bottom to control screens. Using the StackNavigator wrapping approach, you can also implement a navigation strategy through a Drawer or Modal.

    \n
    import { NavigationContainer, TabNavigator } from '@dark-engine/native-navigation';
    \n
    const App = component(() => {
      return (
        <NavigationContainer defaultPathname='/Feed'>
          <TabNavigator.Root>
            <TabNavigator.Screen name='Feed' component={Feed} />
            <TabNavigator.Screen name='Friends' component={Friends} />
            <TabNavigator.Screen name='Profile' component={Profile} />
            <TabNavigator.Screen name='Settings' component={Settings} />
          </TabNavigator.Root>
        </NavigationContainer>
      );
    });
    \n

    You can customize Tabs view through passing bottomNavigationOptions to TabNavigator.Root and renderTab to TabNavigator.Screen to render tabs with icons.

    \n

    Navigating to screen

    \n

    To navigate to a new screen, you need to use the navigateTo method, which provided by the useNavigation hook.

    \n
    import { useNavigation } from '@dark-engine/native-navigation';
    \n
    const { navigateTo } = useNavigation();

    return (
      <StackLayout>
        <Button onTap={() => navigateTo('/Dashboard')}>Dashboard</Button>
      </StackLayout>
    );
    \n

    The method supports passing NavigationOptions, which include a parameter for the new screen, as well as a flag to enable support for animated transitions.

    \n
    import { CoreTypes } from '@nativescript/core';
    import { useNavigation, TransitionName } from '@dark-engine/native-navigation';
    \n
    navigateTo('/Profile', {
      params: { id: 25 },
      animated: true,
      transition: {
        curve: CoreTypes.AnimationCurve.easeInOut,
        name: TransitionName.slide,
        duration: 200,
      }
    });
    \n

    Back navigation

    \n
    const { goBack } = useNavigation();

    return (
      <StackLayout>
        <Button onTap={() => goBack()}>back</Button>
      </StackLayout>
    );
    \n

    Access to params

    \n
    const { params } = useNavigation();
    const id = Number(params.get('id'));

    useEffect(() => {
      fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
        .then(x => x.json())
        .then(x => setAlbum(x));
    }, [id]);
    \n

    Nested screens

    \n

    You can nest navigators to create nested screens like /Home/Dashboard, /Home/Profile and so on.

    \n
    const Home = component(() => {
      return (
        <StackLayout height='100%'>
          <StackNavigator.Root>
            <StackNavigator.Screen name='Dashboard' component={Dashboard} />
            <StackNavigator.Screen name='Profile' component={Profile} />
          </StackNavigator.Root>
        </StackLayout>
      );
    });

    const App = component(() => {
      return (
        <NavigationContainer defaultPathname='/Home/Dashboard'>
          <TabNavigator.Root>
            <TabNavigator.Screen name='Home' component={Home} />
            <TabNavigator.Screen name='Settings' component={Settings} />
            <TabNavigator.Screen name='Contacts' component={Contacts} />
          </TabNavigator.Root>
        </NavigationContainer>
      );
    });
    \n

    LICENSE

    \n

    MIT © Alex Plex

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@van-hung/nativescript-segment":{"name":"@van-hung/nativescript-segment","version":"1.1.0","license":"Apache-2.0","readme":"

    Nativescript-Segment

    \n

    A NativeScript plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

    \n\n

    Installation

    \n
    tns plugin add nativescript-segment
    \n

    For access to the native SDK type definitions, specify the definitions in your references.d.ts

    \n
    /// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
    /// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
    \n

    Warning: Depending on your project structure, the paths shown above may be inaccurate.

    \n

    Usage

    \n

    Example

    \n

    All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

    \n
    const config: SegmentConfig = {
        trackLifeCycleEvents: true,
        recordScreenViews: true
    };
    Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
    \n
    import { Segment } from 'nativescript-segment';

    public someInteraction(type: string) {
        Segment.track(type);
    }
    \n

    For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

    \n
    // iOS
    Segment.ios.track('some event');

    // Android
    Segment.android.track('some event');
    \n

    Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

    \n

    Platform specifics

    \n

    Android

    \n

    Requires the internet permission if not already enabled in your app.

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    \n

    iOS best practice

    \n

    In your application's delegate:

    \n
    import { Segment } from 'nativescript-segment';

    public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
        const config = {
            setDebug: true; // set to show full debug logging by the native APIs
        }
        Segment.configure(key, config);
        return true;
    }
    \n

    API

    \n

    configure

    \n
    const config: SegmentConfig = {
        trackLifeCycleEvents: true,
        recordScreenViews: true
    };
    Segment.configure('your segment write key', config);
    \n

    SegmentConfig Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
    recordScreenViewstrueenable or disable auto tracking of screen views
    optionsDefault integration options, see SegmentOptions
    proxyUrlnullforward all Segment calls through a proxy
    setLoggingfalseset base INFO logging in Android SDK and plugin itself
    setDebugfalseSets full debug logging in Android and iOS
    middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
    middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
    \n

    SegmentOptions Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    useAlltrueenables all integrations (default for Segment SDKs)
    excluded[]exclude Segment from integrating with the specified services
    included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
    \n

    identify

    \n

    Identify the current user. Additional traits are supported, and custom traits are available.

    \n
    const traits: SegmentTraits = {
        firstName: 'Dave',
        email: 'dave@domain.com'
    };
    const customTraits: any {
        favoriteColor: 'blue'
    };
    Segment.identify('userId', traits, customTraits);
    \n

    SegmentTraits Properties (all optional)

    \n

    Please see Segment's official spec for all available traits and their descriptions.

    \n

    track

    \n

    Track an event.

    \n
    Segment.track('Some event');

    const properties = {
        productName: 'Bread',
        revenue: 4
    };
    Segment.track('Product Purchased', properties);
    \n

    Please see Segment's official spec for details on properties to add to track calls.

    \n

    screen

    \n

    Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

    \n
    Segment.screen('signup', 'verify password');
    \n

    Please see Segment's official spec for details on screen calls.

    \n

    group

    \n

    Associate current user with a group. A user can belong to multiple groups.

    \n
    Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
      name: \"Initech\", 
      industry: \"Technology\",
      employees: 329, 
      plan: \"enterprise\", 
      \"total billed\": 830
    });
    \n

    Please see Segment's official spec for details on group calls.

    \n

    alias

    \n

    alias is how you associate one identity with another.

    \n
    Segment.alias(newId);
    \n

    Please see Segment's official spec for details on alias calls.

    \n

    optout

    \n

    Disables or enables all analytics, remains set throughout app restarts.

    \n
    Segment.optOut(true);
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-common":{"name":"@tremho/jove-common","version":"0.7.0-pre-release.69","license":"UNLICENSED","readme":"

    @tremho/jove-common

    \n

    (formerly thunderbolt)

    \n

    Common and primary component of Jove framework.
    \nRequires @tremho/jove-desktop or @tremho/jove-mobile for implementation.
    \nand @tremho/jove-cli for toolchain required to build.

    \n

    plus @tremho/jove-test for test server support

    \n

    project\nwiki

    \n

    Model structure enforces the bijection\ndesign pattern principles of Single-Source-Of-Truth

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-use/vue":{"name":"@nativescript-use/vue","version":"0.0.22","license":"Apache-2.0","readme":"

    @nativescript-use/vue

    \n
    npm install @nativescript-use/vue
    \n

    Documentation (Vue3)

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@erichlz/nativescript-simply-notification":{"name":"@erichlz/nativescript-simply-notification","version":"1.0.5","license":"Apache-2.0","readme":"

    @erichlz/nativescript-simply-notification

    \n
    ns plugin add @erichlz/nativescript-simply-notification
    \n

    Usage

    \n

    import { OptionsNotification, SimplyNotification } from '@erichlz/nativescript-simply-notification';

    \n

    const optios: OptionsNotification = {\nchannelId: '001',\ncontentText: 'Test Context notification',\ntitleNotification: 'Plugin ',\nnotifyId: 0\n};

    \n

    SimplyNotification.showNotification(optios);

    \n

    About Options Notification

    \n
    channelId: string;\ncontentText: string;\ntitleNotification: string;\nnotifyId:number;\nsmallIcon?: ETYPE_NOTIFICATION_SMALLICON;\ncategory?: ETYPE_CATEGORY_NOTIFICATION;\npriority?:ETYPE_PRIORITY;\nautoCancel?:boolean;\ncolorSmallIcon?: number;\n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/ui-social-share":{"name":"@nativescript-community/ui-social-share","version":"1.7.1","license":"Apache-2.0","readme":"

    NativeScript Social Share Plugin

    \n

    A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

    \n

    \"\"\n\"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-social-share
    \n

    This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");
    var imageSourceModule = require(\"image-source\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    import { ImageSource } from \"image-source\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\");
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText(\"I love NativeScript!\");
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-storage":{"name":"@triniwiz/nativescript-supabase-storage","version":"0.3.0","license":"Apache-2.0","readme":"

    Nativescript Supabase Storage Client

    \n
    ns plugin add @triniwiz/nativescript-supabase-storage
    \n

    Usage

    \n
    const avatarFile // 
    const { data, error } = await supabase
      .storage
      .from('avatars')
      .upload('public/avatar1.png', avatarFile) 
      // File/Blob objects, NSData, byte array, ArrayBuffer & supports full path url
    \n

    Credits

    \n

    Based on storage-js

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-gotrue":{"name":"@triniwiz/nativescript-supabase-gotrue","version":"0.3.0","license":"Apache-2.0","readme":"

    Nativescript Supabase GoTrue Client

    \n
    ns plugin add @triniwiz/nativescript-supabase-gotrue
    \n

    Usage

    \n
    import { GoTrueClient } from '@triniwiz/nativescript-supabase-gotrue';

    const GOTRUE_URL = 'http://localhost:9999';

    const auth = new GoTrueClient({ url: GOTRUE_URL });
    \n

    Credits

    \n

    Based on gotrue-js

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/jetpack-compose":{"name":"@nativescript/jetpack-compose","version":"1.0.0-beta.0","license":"MIT","readme":"

    @nativescript/jetpack-compose

    \n

    Jetpack Compose for NativeScript.

    \n
    npm install @nativescript/jetpack-compose
    \n

    Usage

    \n

    Adjust App_Resources/Android/app.gradle to include your desired Jetpack Compose version and dependencies:

    \n
    dependencies {
        def compose_version = \"1.2.1\"
        implementation \"androidx.compose.ui:ui:$compose_version\"
        // Tooling support (Previews, etc.)
        implementation \"androidx.compose.ui:ui-tooling:$compose_version\"

        // Add any other dependencies your Jetpack Compose UI needs
    }

    android {
        // other settings like targetSdk, etc.

        buildFeatures {
            compose true
        }
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
        kotlinOptions {
            jvmTarget = \"1.8\"
        }
        composeOptions {
            kotlinCompilerExtensionVersion '1.3.2'
        }
    }
    \n

    Create a Compose view

    \n

    Any Kotlin file can be created in your App_Resources, for example:

    \n
      \n
    • App_Resources/Android/src/main/java/BasicView.kt
      • \n
    \n
    class BasicView {
        data class ExampleUIState(
            val text: String = \"\"
        ) {}

        class ExampleViewModel(
        ) : ViewModel() {
            var uiState by mutableStateOf(ExampleUIState())
        }

        var mViewModel = ExampleViewModel()

        fun generateComposeView(view: ComposeView): ComposeView {
            return view.apply {
                setContent {
                    MaterialTheme {
                        val uiState = mViewModel.uiState;
                        Text(uiState.text)
                    }
                }
            }
        }

        fun updateData(value: Map<Any, Any>) {
            val v = value[\"data\"] as String;
            onEvent?.invoke(v)
            mViewModel.uiState = ExampleUIState(v);
        }

        var onEvent: ((String) -> Unit)? = null
    }
    \n

    Register your Compose view

    \n

    This can be done in the bootstrap file (often app.ts or main.ts) or even the view component that needs it.

    \n
      \n
    • app.ts
      • \n
    \n
    import { registerJetpackCompose, ComposeDataDriver } from '@nativescript/jetpack-compose';

    // A. You can generate types for your own Compose Provider with 'ns typings android --aar {path/to/{name}.aar}'
    // B. Otherwise you can ignore by declaring the package resolution path you know you provided
    declare var com;
    registerJetpackCompose('flyingHearts', (view) => new ComposeDataDriver(new com.example.FlyingHearts(), view));
    \n

    Use Compose view with any NativeScript layout

    \n

    This illustrates what is often called a "vanilla" flavored NativeScript app. However, you can use this plugin with any flavor (Angular, React, Svelte, Vue, etc.)

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" xmlns:jc=\"@nativescript/jetpack-compose\">
      <StackLayout>
        <jc:JetpackCompose composeId=\"flyingHearts\" composeEvent=\"{{ onEvent }}\" data=\"{{ text }}\"/>
      </StackLayout>
    </Page>
    \n

    To use with Angular

    \n
    import { registerElement } from '@nativescript/angular'
    import { JetpackCompose } from '@nativescript/jetpack-compose'

    registerElement('JetpackCompose', () => JetpackCompose)
    \n

    It can now be used within any Angular component, eg:

    \n
    <StackLayout>
        <JetpackCompose composeId=\"flyingHearts\" (composeEvent)=\"onEvent($event)\" [data]=\"data\"></JetpackCompose>
    </StackLayout>
    \n

    Credits

    \n\"Valor\n

    NativeScript is proudly supported by Valor Software as official partners. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.

    \n

    Contact Valor for assistance.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codeus/nativescript-esdc":{"name":"@codeus/nativescript-esdc","version":"0.1.44","license":"Apache-2.0","readme":"

    @codeus/nativescript-esdc

    \n
    ns plugin add @codeus/nativescript-esdc
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-freshchat":{"name":"@nstudio/nativescript-freshchat","version":"1.0.0-beta.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-freshchat

    \n
    npm install @nstudio/nativescript-freshchat
    \n

    Reference

    \n

    ios SDK: https://support.freshchat.com/en/support/solutions/articles/50000000048-freshchat-ios-sdk-integration-steps\nandroid sdk: https://support.freshchat.com/en/support/solutions/articles/50000000207-freshchat-android-sdk-integration-steps

    \n

    Usage

    \n

    The first step is to call the init method, I would recommend calling it as early as possible in your app life cycle.

    \n
    import { FreshChatSDK } from '@nstudio/nativescript-freshchat';
    let appID = 'YOURAPPID';
    let appKey = 'YOURAPPKEY';
    let domain = 'YOURDOMAIN.com'
    FreshChatSDK.init(appID, appKey, domain);
    \n

    Then, you can interact with the Freshchat sdk with the following methods:

    \n

    setUser

    \n

    You can get basic user information at any point to give you more context on the user when your support agents are messaging back and forth with them.

    \n
    let user = FreshChatSDK.setUser({
      firstName: 'Dave',
      lastName: 'Coffin',
      email: 'dave@hello.com',
      phoneCountryCode: '1',
      phoneNumber: '2075762034'
    })
    if (user) alert('Freshchat user set!')
    \n

    setUserProperties

    \n

    You can capture and send additional metadata about the user and the events in the app, all of which also becomes a way to segment your users to later push messages to them.

    \n
    let setProps = FreshChatSDK.setUserProperties({
      old: true,
      isCool: false
    })
    if (setProps) alert('set user properties!')
    \n

    trackEvent

    \n

    Tracking user events will give you more insight and context about the user(s) in your application. Events like user actions and failure/error cases can be tracked using this API. Tracked events are listed under Events Timeline on the agent side.

    \n
    FreshChatSDK.trackEvent('tookPicture', {
      time: new Date(),
      foo: 'bar'
    })
    \n

    resetUser

    \n

    Reset user data at logout or when deemed appropriate based on user action in the app by invoking the resetUser API. Optionally accepts a completion callback.

    \n
    FreshChatSDK.resetUser(() => {
      console.log('user reset!');
    })
    \n

    showConversations

    \n

    This method will bring up the user's conversations. You can optionally pass an array of topics.\nDifferent sets of Topics can be displayed to different types of users or on different screens by using tags to filter Topics.

    \n
    let tags;
    tags = ['foo', 'bar'];
    FreshChatSDK.showConversations(tags);
    \n

    identifyUser

    \n

    Use this method to both set an external ID and restore a user's conversations using a restore ID previously retrieved. First, you must set a user's external ID (the unique ID on your system).

    \n
    let identified = FreshChatSDK.identifyUser('1234', null)
    \n

    The identifyUser method accepts an external ID and a restore ID. The first time you call it, you won't have a restore ID, but identifying a user with an external ID and null as restore ID will generate a restore ID for the user. You can get this restore ID by using...

    \n

    getRestoreID

    \n

    This will return a user's restore ID.

    \n
    let restoreID = FreshChatSDK.getRestoreID();
    this.myService.saveUserRestoreID(restoreID).then(profit); // save the ID in your database or backend system.
    \n

    Save this ID in your system, then when that user changes devices or platforms (visits your app on the web for example), you can restore the user's conversations by calling identifyUser again with the restore ID.

    \n
    this.myService.getUserRestoreIDFromMyCoolBackend('1234').subscribe(restoreID => {
      FreshChatSDK.identifyUser('1234', restoreID);
    })
    \n

    sendMessage

    \n

    The app can send a message on behalf of the user using the sendMessage: API. It will silently send a message and not launch the Freshchat SDK UI. This API can be helpful in setting more context for customers before starting a conversation. Optionally pass a single tag.

    \n
    let msg = 'How do I win at chess?';
    FreshChatSDK.sendMessage(msg, 'foo')
    this.showConversations();
    \n

    Note: If there are no matching Topics, the message will be sent to the default Topic. If there are multiple matching Topics, the message will be sent to the oldest Topic.

    \n

    getUnreadCount

    \n

    If you want to indicate to the users that they have unread messages in their inbox, you can retrieve the unread count to display. The method returns an int indicating the number of unread messages for the user.

    \n
    FreshChatSDK.getUnreadCount((count) => {
      alert('Count is ' + count);
    })
    \n

    showFAQs

    \n

    To bring up the Freshchat 's FAQ overlay at any point, use showFAQs() API.

    \n
    FreshChatSDK.showFAQs({
      showContactUsOnAppBar: true,
      showFaqCategoriesAsGrid: true,
      filterByTags: {
        tags: ['foo', 'bar'],
        title: 'My_Tags',
        type: 'ARTICLE'
      }
    });
    \n

    This method accepts a config object with the following definition:

    \n
    export interface FreshchatFAQOptions {
      showFaqCategoriesAsGrid?: boolean // Show FAQ in grid formal, false to list view
      showContactUsOnFaqScreens?: boolean // Show chat option from FAQ section
      showContactUsOnFaqNotHelpful?: boolean // Show contact us in article detail when user select Not Helpful
      showContactUsOnAppBar?: boolean // Show chat option over navigation bar in FAQ category view or article list view
      filterByTags?: {
        tags: Array<any>
        title: string
        type: 'ARTICLE'|'CATEGORY'
      }
      filterContactUsByTags?: {
        tags: Array<any>
        title: string
      }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-clipboard":{"name":"@vallemar/nativescript-clipboard","version":"0.0.1","license":"Apache-2.0","readme":"

    @nativescriptuse/nativescript-clipboard

    \n
    npm install @nativescriptuse/nativescript-clipboard
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/zip":{"name":"@nativescript/zip","version":"6.0.0","license":"Apache-2.0","readme":"

    @nativescript/zip

    \n
    npm install @nativescript/zip
    \n

    Usage

    \n

    Zip

    \n

    see ZipOptions

    \n
    import { Zip } from '@nativescript/zip';
    import { path, knownFolders } from '@nativescript/core';
    let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
    let dest = path.join(knownFolders.documents().path, '/assets');
    Zip.zip({
        directory: dest,
    \t\tarchive: zipPath
    });
    \n

    Progress

    \n
    import { Zip } from '@nativescript/zip';
    import { path, knownFolders } from '@nativescript/core';
    let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
    let dest = path.join(knownFolders.documents().path, '/assets');
    Zip.zip({
    function onZipProgress(percent: number) {
    \tconsole.log(`unzip progress: ${percent}`);
        directory: dest,
    \t\tarchive: zipPath,
        onProgress: onZipProgress
    });
    \n

    Unzip

    \n

    see UnzipOptions

    \n
    import { Zip } from '@nativescript/zip';
    import { path, knownFolders } from '@nativescript/core';
    let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
    let dest = path.join(knownFolders.documents().path, '/assets');
    Zip.unzip({
    \tarchive: zipPath,
    \tdirectory: dest,
    });
    \n

    Progress

    \n
    import { Zip } from '@nativescript/zip';
    import { path, knownFolders } from '@nativescript/core';
    let zipPath = path.join(knownFolders.temp().path, 'stuff.zip');
    let dest = path.join(knownFolders.documents().path, '/assets');
    Zip.unzip({
    \tarchive: zipPath,
    \tdirectory: dest,
    \tonProgress: onUnZipProgress,
    });

    function onUnZipProgress(percent: number) {
    \tconsole.log(`unzip progress: ${percent}`);
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-keyboard":{"name":"@vallemar/nativescript-keyboard","version":"0.0.1","license":"Apache-2.0","readme":"

    @nativescriptuse/nativescript-keyboard

    \n
    npm install @nativescriptuse/nativescript-keyboard
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@adilek/fetch-task":{"name":"@adilek/fetch-task","version":"1.0.4","license":"Apache-2.0","readme":"

    @adilek/fetch-task

    \n
    ns plugin add @adilek/fetch-task
    \n

    About

    \n

    This is a upgraded version of the natiescript-background-fetch plugin available at https://github.com/transistorsoft/nativescript-background-fetch. All credits reserved to the original authors.\nThe plugin upgrade has been done to fit with Java version 11 and 8.2.3\nPlugin development template has been forked from https://github.com/NativeScript/plugin-seed

    \n

    Changes done

    \n
      \n
    • Upgrade of tsbackgroundfetch.aar library to fit target sdk version 31 and Java 11.
      • \n
    • Upgrade of nativescript libraries and webpack modules to version 8
      • \n
    \n

    Usage

    \n

    Note: This plugin is upgraded only for Android. It will not work with IOS.\nSame as mentioned in https://github.com/transistorsoft/nativescript-background-fetch/blob/master/README.md

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-intercom":{"name":"@nstudio/nativescript-intercom","version":"1.0.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-intercom

    \n\n
    npm install @nstudio/nativescript-intercom
    \n

    Usage

    \n
    import { IntercomModule } '@nstudio/nativescript-intercom';

    IntercomModule.init('<apiKey>', '<appId>');
    // show
    IntercomModule.displayMessenger();

    // hide
    IntercomModule.hideMessenger();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/tracing":{"name":"@awarns/tracing","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/tracing

    \n

    \"npm\n\"npm\"

    \n

    Background execution flows can become quite complex when using the AwarNS Framework, which is not necessarily a bad thing. This module aids at debugging such workflows, thanks to a set of decorators and tasks which allow to keep track of task executions and the raise of certain events. The recorded traces can later be queried and exported to a local file. Optionally, it is possible to automatically store the recorded traces in an external data store (e.g., a backend).

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/tracing
    \n

    Usage

    \n

    After installing and configuring this plugin, you'll be granted with two interaction mechanisms to work with it:

    \n
      \n
    1. The plugin API. Through it, you'll be able to "decorate" existing tasks, to keep track of their execution. Then, you can query the recorded execution traces and export them using the most common information exchange formats.
      2. \n
    2. Tasks to track the raise of certain events. Sometimes, the execution of a task itself is not interesting, but just one (or more) of the events it produces. Alternatively, the event generator might not be a task, but some UI code emitting an event in a very specific situation. If the rise of these events is relevant to your application, you can keep track of them using these tasks.
      3. \n
    \n

    Setup

    \n

    This plugin requires you to register its loader during the framework initialization, like this:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerTracingPlugin } from '@awarns/tracing';

    import { externalTracesStore } from './external-store';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerTracingPlugin({
            externalTracesStore: externalTracesStore,
            oldTracesMaxAgeHours: 7 * 24 // 1 week
          }),
        ]
      )
      // ... handle initialization promise
    \n

    Plugin loader config parameter options:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    externalTracesStoreTracesStore(Optional) Inject an adapter to an external traces store and enable automatic upload of the recorded traces. The table below describes the methods that this adapter needs to implement
    oldTracesMaxAgeHoursnumber(Optional) Tell the plugin to regularly cleanup old local traces. By default, all traces are kept
    \n

    TracesStore (external)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    insert(trace: Trace)Promise<void>Persist the given trace. Throw an error if something goes wrong. The write will be retried during the next app initialization
    \n

    Due to that, for now, this plugin only supports one-way synchronization, the rest of the methods are meant for future use and don't need to be implemented at the moment. You can throw unimplemented errors inside them, so that you can more easily recognize when they start being used in future versions.

    \n

    API

    \n

    The API of this plugin can be classified in 3 groups: task decorator, traces' storage and data exporters.

    \n

    Task decorator

    \n
    makeTraceable
    \n

    In the task decorator group, there is the makeTraceable function, which allows to decorate one or more tasks to keep track of their execution, with the following parameters (see full example usage here):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    tasksToTraceArray<Task>An array including all the tasks that will be decorated to keep track of their execution
    configTracerConfig(Optional) Allows to adjust some configuration options of the tracer. See TracerConfig properties for more
    \n

    The makeTraceable function returns an array of decorated tasks.

    \n
    TracerConfig
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    outputsSensitiveDatabooleanIndicates the tracer that the tasks being tracked outputs sensitive information that should not be recorded. Defaults to false
    \n

    Traces storage

    \n
    tracesStore
    \n

    In the traces' storage group, there is the tracesStore singleton object, with the following methods:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    insert(record: Record)Promise<void>Persist the given trace. On success, if provided during plugin initialization, it will try to automatically write the new trace to the external store
    getAll(reverseOrder?: boolean, limitSize?: number)Promise<Array<Trace>>Allows to retrieve the current latest (by default) or first traces, optionally limiting the resulting list in size
    list(size?: number)Observable<Trace>Allows to observe the "n" most recent traces, where "n" is determined by the value given to the size parameter. By default, size is 100
    clear()Promise<void>Allows to clear all the stored traces from the local database. Note: to only remove old traces, configure the oldTracesMaxAgeHours option during plugin initialization
    changes (property)Observable<Array<string>>Listen to this observable property to know when a trace has been created. It propagates updates on the ids of the traces that have been recently stored
    \n
    \n

    Note: It is recommended to install RxJS, to operate with the methods that return an Observable.

    \n
    \n
    Trace
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringThe unique id of the trace
    chainIdstringThe id of the chain that the trace belongs to. A chain is a succession of event rises and task executions, which originate from the same starting event
    typeTraceTypeCan either be task or event depending on what originated the trace
    namestringThe name of the task or the event that originated the trace
    resultTraceResultCan either be OK or error. This value is always OK for event traces, since, if something goes wrong, the event won't rise at all
    timestampDateThe date and time when the trace was originated
    contentobjectTask traces and event traces follow a different structure in their content property. Event traces will contain here the payload of the event, unless it has been declared that the event contains sensitive data, in which case, it will hold an empty ({}) object. The content of task traces has a fixed structure, which can be seen below
    \n
    Trace content (Task)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    emittedstringThe name of the event emitted by the task
    outcomestringThe payload included in the event emitted by the task. If outputsSensitiveData is set to true in the tracer config, this property will hold an empty object ({}) instead
    messagestringIf an error was thrown during the execution of the task, its stack trace will appear here
    tooknumberThe task execution time, in milliseconds
    \n

    Export data

    \n

    createRecordsExporter

    \n

    In the final group, the data exporters group, there is the createTracesExporter() function, with the following parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    folderFolderSystem folder object. Use NativeScript FileSystem API to define where the exports file will be saved
    format'csv' | 'json'Select the information exchange format to use. Defaults to csv
    fileNamestring(Optional) Specify the file name to use for the exports file (without extension). Defaults to current date and time
    \n

    The createRecordsExporter() returns an Exporter object with the following API:

    \n

    Exporter

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    export()Promise<ExportResult>Tell the exporter to export the traces, and save them inside to the configured exports file. Returns an ExportResult once done
    \n

    ExportResult

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyReturn typeDescription
    exportCountnumberThe amount of traces that have been exported
    fileNamestringThe name of the exports file that has been saved
    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    trackEventGenerates an event trace containing the information regarding the event that invoked its execution
    trackSensitiveEventGenerates an event trace containing the information regarding the event that invoked its execution. The payload of the event will be ignored, since it is considered to contain sensitive information
    \n

    Track regular events

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { trackEventTask } from '@awarns/tracing';

    export const demoTasks: Array<Task> = [
      trackEventTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n
      \n
    • trackEventFinished (default, no content)
      • \n
    \n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('trackEvent')); // Include some payload data in your start event, 
                                         // to see how it becomes recorded too
    \n
    \n

    Track events containing sensitive information

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { trackSensitiveEventTask } from '@awarns/tracing';

    export const demoTasks: Array<Task> = [
      trackSensitiveEventTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n
      \n
    • trackSensitiveEventFinished (default, no content)
      • \n
    \n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('trackSensitiveEvent')); // Include some payload data in your start event, 
                                                  // to see how it does not appear in the event trace
    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dark-engine/platform-native":{"name":"@dark-engine/platform-native","version":"0.25.1","license":"MIT","readme":"

    @dark-engine/platform-native 🌖

    \n

    Dark renderer to mobile platforms like Android and iOS via NativeScript.

    \n

    NativeScript is a free and open-source framework for building native mobile apps using JavaScript, or any other language that can transpile to JavaScript, for iOS and Android platforms. It allows developers to write a single codebase for both platforms, resulting in native performance and access to device-specific APIs, while still leveraging familiar web development tools and paradigms.

    \n

    More about Dark\n
    \nMore about NativeScript

    \n
    \n \n
    \n

    Installation

    \n

    npm:

    \n
    npm install @nativescript/core @dark-engine/core @dark-engine/platform-native
    \n

    yarn:

    \n
    yarn add @nativescript/core @dark-engine/core @dark-engine/platform-native
    \n

    Usage

    \n
    import { h, component, useState } from '@dark-engine/core';
    import { FlexboxLayout, Button } from '@dark-engine/platform-native';

    const App = component(() => {
      const [count, setCount] = useState(0);

      return (
        <FlexboxLayout justifyContent='center' alignItems='center'>
          <Button
            backgroundColor='purple'
            padding={16}
            onTap={() => setCount(count + 1)}>
            Fired {count} times
          </Button>
        </FlexboxLayout>
      );
    });
    \n

    Also you can write any code without JSX:

    \n
    import { component, useState } from '@dark-engine/core';
    import { FlexboxLayout, Button } from '@dark-engine/platform-native';

    const App = component(() => {
      const [count, setCount] = useState(0);

      return FlexboxLayout({
        justifyContent: 'center',
        alignItems: 'center',
        slot: [
          Button({
            backgroundColor: 'purple',
            padding: 16,
            text: `Fired ${count} times`,
            onTap: () => setCount(count + 1),
          }),
        ],
      });
    });
    \n

    Environment Setup

    \n

    Full working examples with environment setup you can find here.

    \n

    API

    \n
    import {
      type SyntheticEvent,
      run,
      registerElement,
      factory,
      View,
      Text,
      Image,
      Button,
      ScrollView,
      TouchableOpacity,
      TextField,
      Modal,
      ActionBar,
      ActionItem,
      NavigationButton,
      ActivityIndicator,
      RootLayout,
      AbsoluteLayout,
      StackLayout,
      FlexboxLayout,
      GridLayout,
      DockLayout,
      WrapLayout,
      ContentView,
      HtmlView,
      WebView,
      Slider,
      Switch,
      Placeholder,
      ListView,
      ListPicker,
      DatePicker,
      TimePicker,
      Label,
      TextView,
      FormattedString,
      Span,
      TabView,
      TabViewItem,
      Frame,
      Page,
    } from '@dark-engine/platform-native';
    \n

    Mounting to native platform

    \n

    To mount you app you need to use run function:

    \n
    import { run } from '@dark-engine/platform-native';

    import App from './components/app';

    run(App());
    \n

    Layout system

    \n

    The system for placing elements in the layout includes the following components:

    \n
    import {
      RootLayout,
      AbsoluteLayout,
      StackLayout,
      FlexboxLayout,
      GridLayout,
      DockLayout,
      WrapLayout,
    } from '@dark-engine/platform-native';
    \n

    To learn more about how they work, you can visit the NativeScript documentation.

    \n

    Conditional rendering

    \n

    You can use conditional rendering, but be aware that NativeScript is sensitive to frequent insertions and removals from the element tree. Therefore, whenever possible, an alternative approach should be used - the hidden and visible attributes, more about which can be found in the NativeScript documentation.

    \n
    // variant 1
    return (
      <>
        {
          isFetching
          ? <FlexboxLayout
              height='100%'
              justifyContent='center'
              alignItems='center'>
              <ActivityIndicator busy />
            </FlexboxLayout>
          : <StackLayout>
              <Label>Hello 🥰</Label>
            </StackLayout>
        }
      </>
    );
    \n
    // variant 2
    return (
      <>
        <FlexboxLayout
          hidden={!isFetching}
          height='100%'
          justifyContent='center'
          alignItems='center'>
          <ActivityIndicator busy />
        </FlexboxLayout>
        <StackLayout hidden={isFetching}>
          <Label>Hello 🥰</Label>
        </StackLayout>
      </>
    );
    \n

    List rendering

    \n

    In order to display lists of items, it is recommended to use the ListView component, which implements the virtual list behavior when only those items that are inside the viewport are rendered. Of course, you can also use normal rendering via map, however, in terms of performance, NativeScript is very sensitive to the number of elements in the application, as well as inserting and removing them from the tree. Therefore, virtualization should be used as much as possible.

    \n
    import { ListView } from '@dark-engine/platform-native';
    \n
    return (
      <ListView
        height='100%'
        items={items}
        onItemTap={() => console.log('tapped!')}>
        {({ item, idx }) => {
          return (
            <StackLayout backgroundColor={idx % 2 ? 'red' : 'yellow'}>
              <Label color={idx % 2 ? 'white' : 'black'}>item #{item}</Label>
            </StackLayout>
          );
        }}
      </ListView>
    );
    \n

    Connecting 3rd party plugins

    \n

    In modern development, we can rarely do without third-party packages written by other developers. Therefore, we should always be able to include such plugins in our project.

    \n

    Suppose you want to connect a third party carousel plugin @nstudio/nativescript-carousel

    \n

    First of all you must install it in your app from npm:

    \n
    npm i @nstudio/nativescript-carousel
    \n

    Further, to register a new element, you need to use the registerElement function:

    \n
    import { component } from '@dark-engine/core';
    import { registerElement, factory } from '@dark-engine/platform-native';

    registerElement('ns:carousel', () => require('@nstudio/nativescript-carousel').Carousel);
    registerElement('ns:carousel-item', () => require('@nstudio/nativescript-carousel').CarouselItem);

    type CarouselProps = {};
    type CarouselItemProps = {};

    const carousel = factory('ns:carousel');
    const Carousel = component<CarouselProps>(props => carousel(props));

    const carouselItem = factory('ns:carousel-item');
    const CarouselItem = component<CarouselItemProps>(props => carouselItem(props));

    export { Carousel, CarouselItem };
    \n

    After all this, a new plugin can be used like this::

    \n
    import { Label } from '@dark-engine/platform-native';
    import { Carousel, CarouselItem } from '@my-ui-kit';

    return (
      <Carousel height='100%' width='100%'>
        <CarouselItem id='slide1' backgroundColor='red'>
          <Label text='Slide 1' />
        </CarouselItem>
        <CarouselItem id='slide2' backgroundColor='blue'>
          <Label text='Slide 2' />
        </CarouselItem>
        <CarouselItem id='slide3' backgroundColor='green'>
          <Label text='Slide 3' />
        </CarouselItem>
      </Carousel>
    );
    \n

    Modals

    \n

    To insert content in modal window you need to use a special component Modal:

    \n
    import { Modal } from '@dark-engine/platform-native';
    \n
    const [isOpen, setIsOpen] = useState(false);

    return (
      <Modal isOpen={isOpen} animated onRequestClose={() => setIsOpen(false)}>
        <StackLayout padding={32}>
          <Label>Hello from Modal</Label>
        </StackLayout>
      </Modal>
    );
    \n

    Additional components

    \n

    Dark includes additional components of type View, Text, TouchableOpacity, so that you can write an application in a almost similar to React Native style.

    \n
    import { h, component } from '@dark-engine/core';
    import { View, Text, TouchableOpacity } from '@dark-engine/platform-native';

    const App = component(() => {
      return (
        <View justifyContent='center'>
          <TouchableOpacity padding={32} backgroundColor='#4caf50' onPress={() => console.log('press')}>
            <Text textAlignment='center'>Press me</Text>
          </TouchableOpacity>
        </View>
      );
    });
    \n

    Navigation

    \n

    Any more or less complex application needs to be divided into several pages and navigate between them. Dark provides a package for this called @dark-engine/native-navigation, which implements navigation using StackNavigator and TabNavigator. This router also supports animated transitions, nested navigation and parameter passing.

    \n
    import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';

    const App = component(() => {
      return (
        <NavigationContainer defaultPathname='/Feed'>
          <StackNavigator.Root>
            <StackNavigator.Screen name='Feed' component={Feed} />
            <StackNavigator.Screen name='Friends' component={Friends} />
            <StackNavigator.Screen name='Profile' component={Profile} />
            <StackNavigator.Screen name='Settings' component={Settings} />
          </StackNavigator.Root>
        </NavigationContainer>
      );
    });
    \n

    Full documentation about this package you can find here.

    \n

    LICENSE

    \n

    MIT © Alex Plex

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-apple-sign-in":{"name":"nativescript-apple-sign-in","version":"2.0.0","license":"Apache-2.0","readme":"

    Sign In with Apple, for NativeScript

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    Plugin version 2+ is compatible with NativeScript 7+. If you use an older NativeScript version, please use plugin version 1.1.0.

    \n
    \n

    Requirements

    \n
      \n
    • Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.
      • \n
    • Open your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-apple-sign-in
    \n

    Demo app

    \n

    If you're stuck or want a quick demo of how this works, check out the demo app:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-apple-sign-in
    cd nativescript-apple-sign-in/src
    npm run demo.ios
    \n

    API

    \n

    isSignInWithAppleSupported

    \n

    Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

    \n
    import { isSignInWithAppleSupported } from \"nativescript-apple-sign-in\";

    const supported: boolean = isSignInWithAppleSupported();
    \n

    signInWithApple

    \n

    Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

    \n
    import { signInWithApple, SignInWithAppleAuthorization } from \"nativescript-apple-sign-in\";

    signInWithApple(
        {
            // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
            scopes: [\"EMAIL\", \"FULLNAME\"]
        })
        .then((result: SignInWithAppleAuthorization) => {
            console.log(\"Signed in, credential: \" + result.credential);
            console.log(\"Signed in, familyName: \" + result.credential.fullName.familyName);
            // you can remember the user to check the sign in state later (see '    getSignInWithAppleState' below)
            this.user = result.credential.user;
        })
        .catch(err => console.log(\"Error signing in: \" + err));
    \n

    getSignInWithAppleState

    \n
    \n

    ⚠️ This does not seem to work on a simulator!

    \n
    \n

    If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

    \n
    import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

    const user: string = \"the id you got back from the signInWithApple function\";

    getSignInWithAppleState(user)
        .then(state => console.log(\"Sign in state: \" + state))
        .catch(err => console.log(\"Error getting sign in state: \" + err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-no-record":{"name":"nativescript-audio-no-record","version":"5.0.4","license":"MIT","readme":"\n

    NativeScript Audio

    \n    \n

    NativeScript plugin to play and record audio files for Android and iOS.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    tns plugin add nativescript-audio

    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function() {
        console.log('finished playing');
      },
      errorCallback: function(errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function(args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    Demo App

    \n
      \n
    • fork/clone the repository
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios (scripts are located in the scripts of the package.json in the src directory if you are curious)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-mobile-ads-sdk":{"name":"nativescript-google-mobile-ads-sdk","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/nikolay-diyanov/nativescript-google-mobile-sdk-sdk/blob/master/LICENSE"},"readme":"

    NativeScript Google Mobile Ads SDK for iOS and Android

    \n

    A simple way to install Google Mobile Ads SDK for iOS and Android using CocoaPods and NPM. Note that this particular plugin does not provide any common JS code on top\nof the native AdMob libraries. If you want a fully-featured CommonJS plugin, please refer to this one: nativescript-admob

    \n

    Prerequisites

    \n

    NativeScript 1.5.2 (tns --version)

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-google-mobile-ads-sdk
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-orientation":{"name":"@vallemar/nativescript-orientation","version":"0.0.1","license":"Apache-2.0","readme":"

    @nativescriptuse/nativescript-orientation

    \n
    npm install @nativescriptuse/nativescript-orientation
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swiss-army-knife":{"name":"nativescript-swiss-army-knife","version":"4.0.2","license":{"type":"MIT","url":"https://github.com/JoshDSommer/nativescript-swiss-army-knife/blob/master/LICENSE"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-three":{"name":"@nativescript/canvas-three","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/pdf":{"name":"@nativescript/pdf","version":"1.0.1","license":"MIT","readme":"

    @nativescript/pdf

    \n

    A simple PDF viewer.

    \n
    \n

    Remark This repository is the replacement for madmas/nativescript-pdf-view which was a fork of the original by Merott and will be used with his consent to provide further maintenance of this NativeScript plugin.

    \n
    \n

    It serves minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

    \n

    Installation

    \n
    npm install @nativescript/pdf
    \n

    Usage

    \n

    Vanilla NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pdf=\"@nativescript/pdf\"
      loaded=\"pageLoaded\">
      <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
    </Page>
    \n

    Angular

    \n
    import { NativeScriptPdfModule } from '@nativescript/pdf/angular'

    @NgModule({
    \timports: [
        NativeScriptCommonModule, 
        ...
        NativeScriptPdfModule
      ],
    \n
    <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
    \n

    Samples

    \n

    There are sample applications avalable:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rwigo/nativescript-onesignal":{"name":"@rwigo/nativescript-onesignal","version":"1.0.2","license":"Apache-2.0","readme":"

    @rwigo/nativescript-onesignal

    \n

    This plugin used those SDK versions :

    \n\n

    Installation

    \n
    ns plugin add @rwigo/nativescript-onesignal
    \n

    Usage

    \n

    In the main.ts or app.ts file (depending on your configuration), add this initialization code :

    \n
    import { Application, isAndroid, Utils } from '@nativescript/core';
    import { NSOneSignal } from '@rwigo/nativescript-onesignal';

    ...

    Application.on(Application.launchEvent, (args) => {
      // Give context for Android and launchOptions for iOS when app is launching
      NSOneSignal.getInstance().init('YOUR_APP_ID', isAndroid ? Utils.android.getApplicationContext() : args.ios);
      NSOneSignal.getInstance().setNotificationHandlers(
        (result) => {
          console.log('notification opened');
        },
        (result) => {
          console.log('notification will show in foreground');
        }
      );
    });
    \n

    Then you can import NativeOneSignal to use SDK API that hasn't been implemented in the NSOneSignal plugin class :

    \n
    import { NativeOneSignal } from '@rwigo/nativescript-onesignal';

    ...

    // Disabling push notification
    NativeOneSignal.disablePush(true);
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow-updated":{"name":"nativescript-vue-shadow-updated","version":"1.0.0","license":"MIT","readme":"

    Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    npm install nativescript-vue-shadow
    \n

    Demo

    \n

    \"Screenshot\"

    \n

    How to use it

    \n

    This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the Directive into main.js

    \n
    import NSVueShadow from 'nativescript-vue-shadow'
    Vue.use(NSVueShadow)
    \n

    Use in your view or component

    \n

    Simple attribute for v-shadow:

    \n
    <Label v-shadow=\"2\"></Label>
    \n

    You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"myCustomData\"></Label>
    \n

    Then in your script tag you can do something like this where we bind to the object:

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow\";
    // ...
    export default class MyComponent extends Vue {
      private myCustomData: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypeDefaultPlatformDescription
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-vue-shadow\";

    export default class MyComponent extends Vue {
      // ...
      private elevation: number = Elevation.SNACKBAR;
      // ...
    }
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

    \n

    This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install in base directory of project
      • \n
    • Change to Demo directory and then run npm install
      • \n
    • Run and deploy to your device or emulator with npm run serve:android or npm run serve:ios. (use debug:android or debug:ios to attach to devtools)
      • \n
    \n

    Changelog

    \n
      \n
    • 0.1.0 Initial implementation
      • \n
    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carousel-without-page-indicators":{"name":"nativescript-carousel-without-page-indicators","version":"67.1.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Carousel

    \n

    A simple carousel component for NativeScript.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PlatformSupportedVersionNativeView
    iOSYesiOS 8.1+DKCarouselView
    AndroidYesAPI 15+ViewPager with PageIndicatorView
    \n

    Installation

    \n

    Run tns plugin add nativescript-carousel in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.

    \n

    Limitations

    \n
      \n
    • (iOS) PagerIndicator animations not available for iOS, only Android.
      • \n
    • (Android) Auto- and Infinite-paging not available.
      • \n
    • (Android) Carousel still needs to be wrapped in a GridLayout for the indicator to overlap.
      • \n
    \n

    Usage

    \n

    Check out the demos included in this repo for instructions on how to use the Carousel with your choice of framework:

    \n

    Vanilla TS demo

    \n

    Angular demo

    \n

    Vue demo

    \n

    Attributes - Common

    \n
      \n
    • items optional (must be used with itemTemplate)
      • \n
    \n

    Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

    \n
      \n
    • itemTemplate optional (must be used with items)
      • \n
    \n

    Defines the view template for each slide-view to be generated.

    \n
      \n
    • selectedPage optional
      • \n
    \n

    Sets/Gets the active page by index

    \n
      \n
    • showIndicator optional
      • \n
    \n

    Shows or hides the page-indicator

    \n
      \n
    • indicatorColor optional
      • \n
    \n

    Sets the active indicator color. Default is semi-transparent white. Use hex or color-name.

    \n
      \n
    • indicatorColorUnselected
      • \n
    \n

    Sets the color of unselected indicators

    \n
      \n
    • indicatorOffset optional
      • \n
    \n

    By default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. indicatorOffset="100,100"

    \n

    Attributes - iOS specific

    \n
      \n
    • finite optional
      • \n
    \n

    If true last slide will wrap back to first and visa versa

    \n
      \n
    • bounce optional
      • \n
    \n

    If set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.

    \n
      \n
    • autoPagingInterval optional
      • \n
    \n

    Defines the interval in seconds to wait before the next slide is shown. Default is 0 (off).

    \n
      \n
    • scrollEnabled optional
      • \n
    \n

    Enables/Disables user scroll on the Carousel.

    \n
      \n
    • ios
      • \n
    \n

    Returns the DKCarouselView object.

    \n

    Attributes - Android specific

    \n
      \n
    • android
      • \n
    \n

    Returns the ViewPager object.

    \n
      \n
    • indicatorAnimation
      • \n
    \n

    Sets the pager-indicator animation type. Choose between: color, slide, scale, worm, thin_worm, fill, drop or none. Default is none.

    \n
      \n
    • indicatorAnimationDuration
      • \n
    \n

    Sets the pager-indicator animation duration in milliseconds. Default is 500.

    \n
      \n
    • indicatorAlignment
      • \n
    \n

    Sets the pager-indicator alignment. Choose between top or bottom. Default is bottom.

    \n
      \n
    • indicatorRadius
      • \n
    \n

    Sets the pager-indicator dot radius.

    \n
      \n
    • indicatorPadding
      • \n
    \n

    Sets the pager-indicator dot padding.

    \n
      \n
    • pageIndicatorCount
      • \n
    \n

    Set the indicator count which will change the underlying Android data adapter. See issue #5 discussion

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Indicator animations (Android only!)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NONECOLORSCALESLIDE
    \"anim_none\"\"anim_color\"\"anim_scale\"\"anim_slide\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    WORMTHIN_WORMFILLDROPSWAP
    \"anim_worm\"\"anim_thin_worm\"\"anim_fill\"\"anim_drop\"\"anim_swap\"
    \n

    Changelog

    \n

    6.1.0

    \n
      \n
    • Fix for iOS safe-area issues. No need to use the custom css-padding-hack any more.
      • \n
    • DKCarouselView pod updated to version 2.5.0 (fix safe-area layout).
      • \n
    • Known bugs: Orientation change render-issues on iOS (DKCarouselView) (help wanted).
      • \n
    • Demos updated.
      • \n
    \n

    6.0.0

    \n
      \n
    • NativeScript 6.0 & AndroidX migration.
      • \n
    • IndicatorView gradle bumped to 1.0.3 (androidx).
      • \n
    • Some refactorings on the Android side for the plugin to work better with Angular & Vue.
      • \n
    • Demos updated, again.
      • \n
    • Instructions for each demo updated.
      • \n
    \n

    4.2.5

    \n
      \n
    • Fix for the dreadded PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! error on Android.
      • \n
    • Hotfix on the AndroidX migration.
      • \n
    • Minor refactor in the refresh() function. Safer to call on demand.
      • \n
    • Redesigned all demo apps. Added more advanced examples.
      • \n
    • 4.x will be the last Nativescript 5.x version. All future versions will be Nativescript 6.x only and that includes AndroidX.
      • \n
    \n

    4.2.1

    \n
      \n
    • Hotfix for static items. Sorry!
      • \n
    \n

    4.2.0

    \n
      \n
    • AndroidX update for NS6. Thanks @bradmartin!
      • \n
    • Code cleanup, typings fix.
      • \n
    • Demos updated. Proper Vue-demo added.
      • \n
    \n

    4.1.0

    \n
      \n
    • Added setter for pageIndicatorCount for Android to enable dynamically changing the length of the carousel items array without Android throwing a crash about the adapster set changing incorrectly.
      • \n
    \n

    4.0.2

    \n
      \n
    • Carousel now extends from GridLayout instead of AbsoluteLayout (better positioning). (Thanks @bradmartin)
      • \n
    \n

    4.0.0

    \n
      \n
    • Mirgration to TypeScript, typings added (Thanks @bradmartin)
      • \n
    • Cleanup in demo app, added ng-demo (Thanks @bradmartin)
      • \n
    \n

    3.1.1

    \n
      \n
    • Made comaptible for recent TNS 3.2.x releases.
      • \n
    • Merged fix regarding the notifyDataSetChanged issue. Thanks @OPADA-Eng
      • \n
    • Fixed issue on iOS when having only 2 slides. Thanks @sitefinitysteve
      • \n
    \n

    3.1.0

    \n
      \n
    • Made comaptible for recent TNS 3.1.x releases.
      • \n
    • Updated Android indicator library to latest version.
      • \n
    \n

    3.0.2

    \n
      \n
    • Fixed an issue with events not working on Android (affected all events).
      • \n
    \n

    3.0.1

    \n
      \n
    • Fixed a critical bug on Android during refresh when navigating back to a view with a Carousel.
      • \n
    \n

    3.0.0

    \n
      \n
    • Finally! Support for TNS 3.x. Big thanks to @MattNer0, @sitefinitysteve, @hristo, @NickIliev
      • \n
    • Fixed the "refresh observable" issue on Android, thanks @MattNer0.
      • \n
    • New property to enable/disable scroll, thanks @sitefinitysteve.
      • \n
    • New property for Android: indicatorOffset, thanks @sitefinitysteve.
      • \n
    • Fixed issue with orientation change on iOS. Please use nativescript-orientation plugin in order to trigger UI-refresh.
      • \n
    • Code refactor & cleanup, introduced common.js
      • \n
    • Updated Pod & Android-IndicatorView to latest version.
      • \n
    \n

    2.4.2

    \n
      \n
    • Added bounce property to the plugin and the Pod. Thanks to @sitefinitysteve.
      • \n
    \n

    2.4.1

    \n
      \n
    • Fixed an issue on iOS when updating Items binding, would not refresh Carousel-view.
      • \n
    \n

    2.4.0

    \n
      \n
    • Added new event, 'pageScrolling'. Thanks to @sitefinitysteve!
      • \n
    • Updated gradle for 'PageIndicatorView' to version 0.1.2
      • \n
    • Updated package.json with 'plugin' metadata to comply with the upcomming 3.0 plugin standard
      • \n
    • Potential fix for ViewPager.populate exception on Android.
      • \n
    \n

    2.3.1

    \n
      \n
    • Potential fix for ng2 & webpack users (Trying to link invalid 'this' to a Java object). Thanks @peterstaev.
      • \n
    • Updated android indicators gradle plugin. New animation: swap!
      • \n
    \n

    2.3.0

    \n
      \n
    • Changed the iOS Pod to point to our own repo! We have the control ;)
      • \n
    • New property available for iOS: indicatorColorUnselected. Allows you to set color to the unselected dots.
      • \n
    \n

    2.2.0

    \n
      \n
    • Fixed issue with the refresh function that could cause a crash or removal of slides (Android).
      • \n
    • Updated Android-indicators gradle library to v0.1.0. More stable and more animations! New animations are: drop, scale and thin_worm.
      • \n
    • Fixed issue with a small white bar being shown if the indicators are disabled (Android). Thanks to @EddyVerbruggen.
      • \n
    • Fixed, another, potential bug that would cause app to crash when resuming he activity (Android).
      • \n
    \n

    2.1.2

    \n
      \n
    • Fixed a critical bug that would cause the app to crash when resuming the activity (Android). Thanks to @EddyVerbruggen.
      • \n
    \n

    2.1.1

    \n
      \n
    • Corrected README, iOS does indeed allow for tap-events innside the CarouselItems. Thanks @terreb!
      • \n
    • Fixed the selectedPage property on iOS, now also returns selected index.
      • \n
    • Updated iOS Podfile to 1.4.12
      • \n
    \n

    2.1.0

    \n
      \n
    • Added Android support!
      • \n
    • Android gets animated pager-indicators made by @romandanylyk.
      • \n
    \n

    1.1.0

    \n
      \n
    • Updated pod with version '1.4.10'
      • \n
    • Fixed page-change-event when finite is set to 'true'
      • \n
    • Added new property 'selectedPage' (set active page by index).
      • \n
    • Updated demo app
      • \n
    \n

    1.0.0

    \n
      \n
    • Initial release
      • \n
    \n

    Author

    \n\n

    Collaborators

    \n\n

    Contributing

    \n

    I will accept pull requests that improve this and assign credit.

    \n
      \n
    • Fork and clone the repository
      • \n
    • cd src && npm run setup
      • \n
    • npm run demo.android for android development
      • \n
    • npm run demo.ios for iOS development
      • \n
    • npm run demo-ng.ios for iOS Angular app
      • \n
    • npm run demo-ng.android for Android Angular
      • \n
    • npm run demo-vue.ios for iOS Vue app
      • \n
    • npm run demo-vue.android for Android Vue
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shared-notification-delegate":{"name":"nativescript-shared-notification-delegate","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Shared Notification Delegate

    \n

    This project aims to prevent the shortcomings that come from the iOS implementation of only allowing a single delegate.

    \n

    Installation

    \n
    tns plugin add nativescript-shared-notification-delegate
    \n

    Usage

    \n

    Import SharedNotificationDelegate and add Observers

    \n
    import { SharedNotificationDelegate } from 'nativescript-shared-notification-delegate';

    ...


    SharedNotificationDelegate.addObserver({
        delegateUniqueKey: \"myUniqueKey\", // ensures uniqueness, if not set or is null/undefined, allows multiple of the same
        userNotificationCenterWillPresentNotificationWithCompletionHandler: (notificationCenter, notification, handler, stop, next) => {
            console.log(\"notification received by observer\");
            // is this notification something I should handle?
            if (shouldHandleThis) {
                // do stuff
                // intercept it and show alert
                handler(UNNotificationPresentationOptions.Alert);
                return;
            }
            // not mine, next should handle
            next();
        }
    });
    \n

    API

    \n

    SharedNotificationDelegate Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    addObserver(observer: DelegateObserver, priority?: number): voidAdds a delegate observer of a certain priority (lower means first). Default priority is 100.
    removeObserver(observer: DelegateObserver)removes a DelegateObserver
    removeObserverByUniqueKey(key: any)removes a DelegateObserver by its unique key
    \n

    DelegateObserver Interface

    \n

    A DelegateObserver can implement 3 methods from UNUserNotificationCenterDelegate with the addition of some details:

    \n
    interface DelegateObserver {
        userNotificationCenterDidReceiveNotificationResponseWithCompletionHandler?(center: any /* UNUserNotificationCenter */, response: any /* UNNotificationResponse */, completionHandler: () => void, next: () => void): void;
        userNotificationCenterOpenSettingsForNotification?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, stop: () => void, next: () => void): void;
        userNotificationCenterWillPresentNotificationWithCompletionHandler?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, completionHandler: (p1: any /* UNNotificationPresentationOptions */) => void, next: () => void): void;
        /**
         * if set to not null/undefined, will ensure only one is registered
         */
        delegateUniqueKey?: any;
    }
    \n

    All the functions are called asynchronously in a chain.

    \n

    Calling a completionHandler immediately stops the observer chain. next() must be called if the method will not be handling the notification.

    \n

    Calling stop() on userNotificationCenterOpenSettingsForNotification prevents the event bubbling to the rest.

    \n

    Only one method will be processed at a time, this means you can take as long as you want (including making http calls, for example), as long as you just call completionHandler, stop and next when you're finished.

    \n

    If a DelegateObserver has a delegateUniqueKey, the SharedNotificationDelegate will ensure only the latest copy of the observer is present. This is especially useful if debugging with HMR, which may add multiple observers on application reload.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-weather-api":{"name":"nativescript-weather-api","version":"1.0.1","license":"MIT","readme":"

    NativeScript Weather API

    \n

    Real-time weather information for any location on Earth, including over 200,000 cities.

    \n

    Installation

    \n
    tns plugin add nativescript-weather-api
    \n

    Permission

    \n

    Android

    \n

    To request access to location, you need to add the following line to your app's AndroidManifest.xml:

    \n
    <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
    \n

    iOS

    \n

    You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app.

    \n

    Usage

    \n

    This plugin uses the OpenWeather API to show weather information, so you need to create an account on https://openweathermap.org and get your key. Free accounts are allowed to perform 1,000,000 calls/month and 60 calls/minute.

    \n

    Import the plugin

    \n
    import { getWeather, dailyForecast, showWeather, getLocation } from 'nativescript-weather-api';
    \n

    API calls

    \n

    By geographic coordinates

    \n

    When using coordinates, you can't pass the city and ZIP code parameters.

    \n
    var temp;
    var wind;

    getLocation().then((location) => {

    getWeather({

    \tkey: \"your_key\",
    \tlat: location.latitude,
    \tlon: location.longitude,
    \tunit: \"metric\"

    }).then(() => {

    \tvar data = new showWeather();
    \ttemp = data.temp;
    \twind = data.wind;
    });

    });
    \n

    By city name

    \n

    When calling by city name, you can't pass the latitude, longitude, and ZIP code parameters.

    \n
    var temp;
    var wind;

    getWeather({

    \tkey: \"your_key\",
    \tcity: \"London\",
    \tcountry: \"GB\"

    }).then(() => {

    \tvar data = new showWeather();
    \ttemp = data.temp;
    \twind = data.wind;
    });
    \n

    By ZIP code

    \n

    This method doesn't seem to work with all countries. For example, the API didn't recognize ZIP codes from Brazil during my tests.

    \n

    Don't pass the latitude, longitude, and city parameters.

    \n
    var temp;
    var wind;

    getWeather({

    \tkey: \"your_key\",
    \tzip_code: \"90001\",
    \tcountry: \"US\"

    }).then(() => {

    \tvar data = new showWeather();
    \ttemp = data.temp;
    \twind = data.wind;
    });
    \n

    Parameters

    \n

    key - Your OpenWeather key.
    \nlat - Latitude.
    \nlon - Longitude.
    \ncity - City name, e.g., Los Angeles.
    \ncountry - Country code, e.g., US, CA, GB.
    \nzip_code - Numeric or alphanumeric codes, e.g., 90001.
    \nunit - If you set it to metric, the temperature will be in Celsius and wind speed in meter/s. If you choose imperial, the temperature will be in Fahrenheit and wind speed in miles/h. If you don't set this parameter, Kelvin and meter/s are the standards.
    \nlang - The output language for the city name and description fields, e.g., en, pt_br, fr, es.

    \n

    Identifiers

    \n

    name - Location name.
    \ncountry - Country name.
    \ntemp - Temperature.
    \ntemp_min - Minimum temperature.
    \ntemp_max - Maximum temperature.
    \nfeels_like - Feels like temperature.
    \nwind - Wind speed.
    \npressure - Pressure.
    \nhumidity - Humidity.
    \ndescription - Weather description, e.g., clear sky.
    \nicon - Weather icon URL.

    \n

    Daily forecast for 7 days

    \n

    With only one call, you can get weather information for 7 days plus the current day.

    \n
    var temp_min;
    var temp_max;
    var description;

    getLocation().then((location) => {

    dailyForecast({

    \tkey: \"your_key\",
    \tlat: location.latitude,
    \tlon: location.longitude,
    \tunit: \"metric\"

    }).then((data) => {

    \ttemp_min = data.daily[0].temp.min;
    \ttemp_max = data.daily[0].temp.max;
    \tdescription = data.daily[0].weather[0].description;
    });

    });
    \n

    The dailyForecast function only accepts latitude and longitude to determine the location. In the example, we retrieved the minimum and maximum temperature and the weather description for the current day. If we wanted information for the following day, we'd change daily[0] to daily[1], and so on up to daily[7]. To see all the fields available besides the ones we used in this section, create an alert(JSON.stringify(data, null, 4)), but don't forget to remove it before building for production.

    \n

    NS compatibility

    \n

    Update your NS version to 8+, or you might get an error with the @nativescript/geolocation plugin.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-phaser":{"name":"@nativescript/canvas-phaser","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ampersand":{"name":"nativescript-ampersand","version":"1.0.1","license":"MIT","readme":"

    nativescript-ampersand

    \n

    A NativeScript module to add Ampersand.js Models and Rest Collections for use in place of nativescript observables. Ampersand.js is a fork of Backbone.js, providing alot of the same functionality with additional features. All server sync methods are available and uses the built in Nativescript http module out of the box. For more information on Ampersand.js see their documentation.

    \n

    [![NPM version][npm-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url]\n[npm-url]: https://npmjs.org/package/nativescript-ampersand\n[npm-image]: http://img.shields.io/npm/v/nativescript-ampersand.svg\n[david-dm-url]:https://david-dm.org/dapriett/nativescript-ampersand\n[david-dm-image]:https://david-dm.org/dapriett/nativescript-ampersand.svg

    \n

    \"NPM\"

    \n

    Installation

    \n

    Run npm install nativescript-ampersand --save from your nativescript project

    \n

    Usage

    \n
    Models
    \n

    Just use require("nativescript-ampersand/model") to include the AmpersandModel, and then extend it for your model. See the Ampersand Model documentation for available methods and configuration options.

    \n
    // ./app/models/todo.js

    var AmpersandModel = require(\"nativescript-ampersand/model\");

    module.exports = AmpersandModel.extend({

      urlRoot: \"http://www.example.com/todos\",

    \t// Properties this model will store
    \tprops: {
    \t\ttitle: {
    \t\t\ttype: 'string',
    \t\t\tdefault: ''
    \t\t},
    \t\tcompleted: {
    \t\t\ttype: 'boolean',
    \t\t\tdefault: false
    \t\t}
    \t},
    \t// session properties work the same way as `props`
    \t// but will not be included when serializing.
    \tsession: {
    \t\tediting: {
    \t\t\ttype: 'boolean',
    \t\t\tdefault: false
    \t\t}
    \t},
    \tdestroy: function () {
    \t\tif (this.collection) {
    \t\t\tthis.collection.remove(this);
    \t\t}
    \t}
    });
    \n

    Then just use them in your views. You can set them to the view's bindingContext and they'll automatically update with any model changes.

    \n
    // ./app/views/todo-view.js
    var TodoModel = require( \"../models/todo\" );

    var todo = new Todo({
      title: \"Enter new TODO\"
    });

    exports.load = function(args){
      args.object.bindingContext = todo;
    }

    exports.save = function() {
       todo.save();
    }
    \n
    Rest Collections
    \n

    Just use require("nativescript-ampersand/collection") to include the AmpersandRestCollection, and then extend it for your collection.

    \n
    // ./app/collections/todo-collection.js

    var AmpersandCollection = require(\"nativescript-ampersand/collection\");
    var TodoModel = require(\"../models/todo\")

    module.exports = AmpersandCollection.extend({
      url: \"http://www.example.com/todos\",
      model: TodoModel
    });
    \n

    Then just use them in your views. You can bind them to a listview and they'll automatically update with collection changes.

    \n
    // ./app/views/todos.js
    var TodoCollection = require( \"../collections/todo-collection\" );

    var todos = new TodoCollection();

    exports.load = function(args){
      args.object.bindingContext = {todos: todos};
      todos.fetch();
    }

    exports.refresh = function() {
       todo.fetch();
    }
    \n
    <!-- ./app/views/todos.xml -->
    <Page navigatedTo=\"load\">
    \t<StackLayout>
        <ListView items=\"{{ todos }}\">
            <ListView.itemTemplate>
            \t<GridLayout rows=\"50\">
                <Label text=\"{{ title }}\" />
              </GridLayout>
            </ListView.itemTemplate>
        </ListView>
      </StackLayout>
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adyen-cse":{"name":"nativescript-adyen-cse","version":"1.0.3","license":"MIT","readme":"

    NativeScript Adyen CSE Plugin

    \n

    Adyen NativeScript client-side encryption

    \n

    Installation

    \n
    tns plugin add nativescript-adyen-cse
    \n

    Usage

    \n
    import { AdyenCse, Card } from 'nativescript-adyen-cse';

    this.adyenCse = new AdyenCse();
    const data: Card = {
      cvc: '737',
      expiryMonth: '08',
      expiryYear: '2018',
      generationTime: new Date(),
      holderName: 'holderName',
      number: '4111111111111111'
    };

    let encryptedCardString = this.adyenCse.encrypt(data, 'your_adyen_public_Key');
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-j":{"name":"@zalastax/nolb-nativescript-j","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"imagene-ns-google-login":{"name":"imagene-ns-google-login","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Google Login

    \n

    \"npm\n\"NPM\"

    \n

    Add Google SignIn to your Nativescript Application. This plugin provides an AuthCode for server-side authentication

    \n

    It is inspired by the plugin nativescript-social-login

    \n

    Works with Android X, iOS 13

    \n

    Screenshots

    \n

    Android

    \n

    \"Screenshot

    \n

    iOS

    \n

    \"Screenshot

    \n

    Dependencies

    \n

    iOS

    \n
    pod 'GoogleSignIn', '~> 5.0'
    \n

    Android

    \n
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
    \n

    Installation

    \n
    tns plugin add nativescript-google-login
    \n

    iOS

    \n

    Get an OAuth client ID

    \n

    Get an Oauth client id from the Google website

    \n

    Info.plist

    \n

    Add the following to your Info.plist file located in app/App_Resources/iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleTypeRole</key>
    \t\t<string>Editor</string>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd</string>
    \t\t\t<!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
    \t\t\t<!-- Get it from your GoogleService-Info.plist -->
    \t\t\t<!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
    \t\t</array>
    \t</dict>
    </array>
    \n

    Usage

    \n
    ```javascript\nimport { Component, OnInit } from "@angular/core";\nimport { GoogleLogin } from 'nativescript-google-login';\nimport * as application from "tns-core-modules/application";\nimport { isIOS } from "tns-core-modules/platform/platform";\n\n\n@Component({\n    selector: "Home",\n    moduleId: module.id,\n    templateUrl: "./home.component.html"\n})\nexport class HomeComponent implements OnInit {\n\n    constructor() {\n        // Use the component constructor to inject providers.\n    }\n\n    ngOnInit(): void {\n        // Init your component properties here.\n\n        if(isIOS){\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                viewController: application.ios.rootController\n            });\n    \n        } else {\n            GoogleLogin.init({\n                google: {\n                    initialize: true,\n                    serverClientId: "",\n                    clientId: "",\n                    isRequestAuthCode: true\n                },\n                activity: application.android.foregroundActivity\n            });\n        }\n        \n        \n    }\n\n    login(): void {\n        GoogleLogin.login(result=>{\n            console.dir(result);\n        });\n\n    }\n}\n\n```\n
    \n

    Result

    \n
    ```\n    ==== object dump start ====\n    authCode: 4/sQFws5V78SYGYHxhxxZcpfTUNdf4tzWNyWwTesopXrfTM1SH5txNoPkaQ11hTkXxw3IJqXQcBu5iT6zlPFm42qs\n    code: 0\n    displayName: Firstname Lastname\n    photo: https://lh4.googleusercontent.com/-bxWt9qbfGOw/AAAAAAAAAAI/AAAAAAAAAAA/TkXxw3IJqXQcBu5iT61trzDOW8S1tcCYM4Q/s100/photo.jpg\n    error: undefined\n    id: 153078403269102635592\n    userToken: user@gmail.com\n    provider: google\n    ==== object dump end ====\n```\n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-3":{"name":"@zalastax/nolb-nativescript-3","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-pixi":{"name":"@nativescript/canvas-pixi","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-highcharts":{"name":"@imagene.me/nativescript-highcharts","version":"2.0.2","license":"Apache-2.0","readme":"

    nativescript-highcharts

    \n

    This plugins allows you to use Highcharts in NativeScript.

    \n
    ns plugin add @imagene.me/nativescript-highcharts
    \n

    Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

    \n

    Screenshots

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo.ios # or apps.demo.android
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo-angular.ios # or apps.demo-angular.android
    \n

    Usage

    \n

    NativeScript-Core

    \n

    TypeScript

    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

    \n
    ...
    export class HomeViewModel extends Observable {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    XML

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:ui=\"@mhtghn/nativescript-highcharts\">

        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
        </GridLayout>
    </Page>
    \n

    NativeScript Angular

    \n

    TypeScript

    \n

    Import the HighchartsModule in your module.

    \n
    ...
    import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

    @NgModule({
        imports: [
            ...
            HighchartsModule
        ],
        ...
    })
    export class HomeModule { }
    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

    @Component({
        selector: \"Home\",
        moduleId: module.id,
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    HTML

    \n
    <ActionBar class=\"action-bar\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout class=\"page\">
        <!-- Add your page content here -->
        <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
    </GridLayout>
    \n

    Highcharts Compatibility

    \n
      \n
    • highcharts.js: v8.2.0
      • \n
    • highcharts-more.js: v8.2.0
      • \n
    • highcharts-3d.js: v8.2.0
      • \n
    • sankey.js: v8.2.0
      • \n
    • organization.js: v8.2.0
      • \n
    \n

    Tips

    \n
      \n
    • Add the next option to the chart options to disable the display of the Highcharts.com Hyperlink in the webview
      credits: {
      \tenabled: false;
      }
      \n
      • \n
    \n

    Credit

    \n

    This plugin is greatly inspired by this demo from Eddy Verbruggen

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nota/nativescript-webview-ext":{"name":"@nota/nativescript-webview-ext","version":"8.0.2","license":"Apache-2.0","readme":"

    @nota/nativescript-webview-ext

    \n

    Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

    \n

    Features

    \n
      \n
    • Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.\n
        \n
      • Note: This is not supported on iOS <11
        • \n
      \n
      • \n
    • Adds support for capturing URLs.\n
        \n
      • This allows the app to open external links in an external browser and handle tel-links
        • \n
      \n
      • \n
    • Added functions like:\n
        \n
      • executeJavaScript(code: string) for executing JavaScript-code and getting result.
        • \n
      • executePromise(code: string) for calling promises and getting the result.
        • \n
      • getTitle() returns document.title.
        • \n
      \n
      • \n
    • Two-Way event listeners between NativeScript and WebView\n
        \n
      • From NativeScript to WebView
        • \n
      • From WebView to NativeScript
        • \n
      \n
      • \n
    • Adds functions to inject css- and javascript-files.\n
        \n
      • Into the current page.
        • \n
      • Auto-injected on page load.
        • \n
      \n
      • \n
    • Polyfills:\n
        \n
      • Promise
        • \n
      • Fetch API (overrides Native API on Android to support x-local:// and file://)
        • \n
      \n
      • \n
    • Allows alert, confirm and prompt with WkWebView.
      • \n
    • Supports:\n
        \n
      • Android 19+
        • \n
      • iOS 11+: Full support
        • \n
      • iOS <11: Partial support
        • \n
      \n
      • \n
    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @nota/nativescript-webview-ext
    \n

    Update minSdkVersion to 19 or higher

    \n

    Android SDK 19 is required, update App_Resources/Android/app.gradle:

    \n
    android {
      defaultConfig {
        minSdkVersion 19 // change this line
        generatedDensities = []
      }
      aaptOptions {
        additionalParameters \"--no-version-vectors\"
      }
    }
    \n

    Core support

    \n

    Load in template like this:

    \n
    <Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:nota=\"@nota/nativescript-webview-ext\">
        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <nota:WebViewExt src=\"https://nota.dk\"></<nota:WebViewExt>
    </Page>
    \n

    Angular support

    \n

    Import WebViewExtModule from @nota/nativescript-webview-ext/angular and add it to your NgModule.

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Vue support

    \n

    Import @nota/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Usage

    \n

    Limitations

    \n

    The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

    \n

    Custom-scheme support for iOS <11 was removed because of ITMS-90809.

    \n

    API

    \n

    NativeScript View

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValueDescription
    readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
    srcLoad src
    autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
    builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
    cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
    databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
    debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
    displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
    domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
    scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
    supportZoomtrue / falseAndroid: should the webview support zoom
    viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
    limitsNavigationsToAppBoundDomainsfalseiOS: allows to enable Service Workers Note: If set to true, WKAppBoundDomains also should be set in info.plist.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
    registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
    unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
    getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
    loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
    autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
    autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
    executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
    executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
    emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
    getTitle()Returns a promise with the current document title.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
    loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
    loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
    shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
    titleChangedDocument title changed
    webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
    webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
    webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
    webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
    Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
    \n

    WebView

    \n

    Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
    window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
    window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
    \n

    Waiting for nsWebViewBridge to be available

    \n
        window.addEventListener(\"ns-bridge-ready\", function(e) {
            var nsWebViewBridge = e.detail || window.nsWebViewBridge;

            // do stuff here
        });
    \n

    Possible features to come:

    \n
      \n
    • Cookie helpers?
      • \n
    • Share cache with native-layer?
      • \n
    \n

    Android

    \n
      \n
    • Settings\n
        \n
      • AppCache?
        • \n
      • User agent?
        • \n
      \n
      • \n
    \n

    iOS

    \n
      \n
    • Settings?
      • \n
    \n

    Demo and unit tests

    \n

    Running the demo

    \n

    To run the demo-project, the plugin must be build locally and a http-server must be running.

    \n

    The easiest way to run the demo is to follow these steps:

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-ext.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run demo.ios
        • \n
      • npm run demo.android
        • \n
      \n
      • \n
    \n

    Running the unit-tests

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-ext.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run test.ios
        • \n
      • npm run test.android
        • \n
      \n
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    About Nota

    \n

    Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-elevation":{"name":"nativescript-nbmaterial-elevation","version":"1.0.1","license":"Apache-2.0","readme":"

    Elevation implementation for nbmaterial packages

    \n

    The module implement elevation on both iOS and Android.\nIt augments nativescript Style/View and background.\nThis way you can define "elevation" property on DOM elements or in CSS.

    \n
    interface Style {
            elevation: number;
        }
    interface Background {
            elevation: number;
        }
    interface View {
            elevation: number;
            getElevationDefault(): number;
            setElevationNative(back: Background);
        }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-f":{"name":"@zalastax/nolb-nativescript-f","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-x":{"name":"@zalastax/nolb-nativescript-x","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-randombytes":{"name":"nativescript-randombytes","version":"1.0.0","license":"MIT","readme":"

    NativeScript randombytes shim

    \n

    The randombytes package doesn't work in the {N} runtime, so replace it by this package if you need to.

    \n

    Installation

    \n
    tns plugin add nativescript-randombytes
    \n

    Usage

    \n
    var randomBytes = require('nativescript-randombytes');

    // sync usage
    console.log(\"randomBytes: \" + randomBytes(16));

    // async usage
    randomBytes(16, function (ignore, result) {
      console.log(\"randomBytes async: \" + result);
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sqlite-access":{"name":"nativescript-sqlite-access","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cchoici/nativescript-wear-os":{"name":"@cchoici/nativescript-wear-os","version":"3.0.2","license":"Apache-2.0","readme":"

    https://github.com/cchoici/nativescript-wear-os/blob/master/README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-checkbox-ns-7":{"name":"nativescript-checkbox-ns-7","version":"22.0.0","license":"MIT","readme":"\n

    NativeScript Checkbox

    \n    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n

    \n \n \"Action\n \n \n \"npm\"\n \n \n \"stars\"\n \n
    \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add @nstudio/nativescript-checkbox

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Sample Usage

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Android SampleiOS Sample
    \"Sample1\"\"Sample2\"
    \n

    Usage

    \n

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n

    \n

    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { topmost } from '@nativescript/core/ui/frame';

    public toggleCheck() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule],
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    Vue.registerElement(
      'CheckBox',
      () => require('@nstudio/nativescript-checkbox').CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange',
        },
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

    \n\n

    Contributing & Running Demo Apps

    \n
      \n
    • Execute from root:\n
        \n
      • For android: npm run demo.android
        • \n
      • For iOS: npm run demo.ios
        • \n
      • npm run demo.ng.android (for angular android)
        • \n
      • npm run demo.ng.ios (for angular ios)
        • \n
      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@leoantares/ns8-batch-notifications":{"name":"@leoantares/ns8-batch-notifications","version":"1.1.1","license":"Apache-2.0","readme":"

    @leoantares/ns8-batch-notifications

    \n
    ns plugin add @leoantares/ns8-batch-notifications
    \n

    Nativescript Batch plugin

    \n

    Welcome to Batch's Nativescript Plugin!
    \nBatch is a fully fledged mobile engagement platform to execute CRM tactics over iOS, Android & mobile websites.
    \nThe purpose of this plugin is to manage Push notifications, in-app messages and more.., for Android and IOS.
    \nThis repository contains the plugin's source code and a demo application.

    \n

    This plugin is an updated fork from nativescript-batch-notifications

    \n

    Installation

    \n

    NPM

    \n
    yarn ns8-batch-notifications
    npm i ns8-batch-notifications
    \n

    Prerequisites / Requirements

    \n

    First of all, you must create a batch account;
    \nThen a configuration is required for each platform;
    \nThis process is explained through simple steps in batch official documentation.
    \nIOS setup
    \nAndroid setup
    \nWhen you add your Firebase android project, download the google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

    \n

    For a quick start using the demo app :

    \n
      \n
    • Override the bundle id in package.json in the demo directory
      • \n
    • Add the API keys with the ones generated by your batch account in the .env file
      • \n
    \n

    Android initialization

    \n

    We must override the OnCreate method.
    \nIn order to do so, change the application name value in the AndroidManifest from com.tns.NativeScriptApplication to something like org.myApp.Application.
    \nThen, in the root dir, create a typescript file named : 'application.android.ts' and enter the bellow code.

    \n
    const firebase = require('@nativescript/firebase');
    // @ts-ignore
    import { BatchNS } from 'nativescript-batch-notifications';

    @NativeClass()
    @JavaProxy('org.myApp.Application')
    class Application extends android.app.Application {
      public onCreate(): void {
        super.onCreate()
        const batch = new BatchNS(process.env.BASH_ANDROID_KEY);
        this.registerActivityLifecycleCallbacks(batch.native.activityLifeCycleHelper());
        firebase.init().catch(console.dir);
      }
    }
    \n

    You also must add the following in your webpack.config.js.

    \n
    webpack.chainWebpack(config => {
        if (webpack.Utils.platform.getPlatformName() === 'android') {
            // make sure the path to the applicatioon.android.(js|ts)
            // is relative to the webpack.config.js
            // you may need to use `./app/application.android if
            // your app source is located inside the ./app folder.
            config.entry('application').add('./app/application.android')
        }
    })
    \n

    IOS initialization

    \n

    We must setup a custom delegate; Override the app.ts in the root dir with the bellow code:

    \n
    import { Application, isIOS } from \"@nativescript/core\";
    // @ts-ignore
    import { BatchNS } from \"nativescript-batch-notifications\";

    if (isIOS) {
      @NativeClass
      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<any, any>): boolean {
          new BatchNS(process.env.BATCH_IOS_KEY, false);

          return true;
        }
      }

      Application.ios.delegate = MyDelegate;
    }
    \n

    Important notes !!

    \n
      \n
    • (Android) In this plugin version we assume that the nativescript firebase plugin is installed; This will be fixed in upcoming releases.
      • \n
    • (IOS) When generating the xcode project, you MUST toggle 'Push Notifications' in the capabilities tab.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-s":{"name":"@zalastax/nolb-nativescript-s","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-guid":{"name":"@testjg/nativescript-guid","version":"1.1.0","license":"Apache-2.0","readme":"

    @testjg/nativescript-guid

    \n

    \"npm

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-guid
    \n

    Usage

    \n
    import { createGuid } from '@testjg/nativescript-guid';

    const guid = createGuid();

    console.log(guid);
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-socketmobile":{"name":"@ticnat/nativescript-socketmobile","version":"1.0.2","license":"Apache-2.0","readme":"

    @ticnat/nativescript-socketmobile

    \n
    ns plugin add @ticnat/nativescript-socketmobile
    \n

    Usage

    \n
      \n
    1. create a new instance of the scanner plugin:
      2. \n
    \n
    const socket = new Socketmobile(AppKey,DeveloperID, AppID);
    \n

    and pass you appkey developerId and appId obtained from Socket Mobile Developer Portal

    \n
      \n
    1. initialize the scanner with the callbacks:
      2. \n
    \n
    socket.didReceiveDecodedData = (data: string, device, result) => {
        console.log('scannedText', data);
    }
    socket.initScanner();
    \n
      \n
    1. \n

      Connect and pair your sockermobile scanner with the iPad through socket mobile companion app

      \n
      2. \n
    2. \n

      add these to info.plist file

      \n
      3. \n
    \n
    <key>UISupportedExternalAccessoryProtocols</key>
    <array>
        <string>com.socketmobile.chs</string>
    </array>
    <key>NSBluetoothAlwaysUsageDescription</key>
    <string>Using bluetooth to connect the app to the barcode scanner</string>
    <key>NSBluetoothPeripheralUsageDescription</key>
    <string>Using bluetooth to connect the app to the barcode scanner</string>
    \n
      \n
    1. All done!
      2. \n
    \n

    Notice:

    \n
      \n
    1. \n

      This plugin tested on Socket mobile S740 model but I think it works with other models.

      \n
      2. \n
    2. \n

      The plugin is under development, if you have any improvements Welcome to PRs!

      \n
      3. \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tzkit/idscanner":{"name":"@tzkit/idscanner","version":"1.0.3","license":"Apache-2.0","readme":"

    @tzkit/idscanner

    \n
    npm install @tzkit/idscanner
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dna-deviceinfo":{"name":"nativescript-dna-deviceinfo","version":"3.7.3","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsg":{"name":"nsg","version":"0.1.3","license":"MIT","readme":"

    nsg

    \n

    A spork of Angular CLI for NativeScript & Angular projects, run nsg command as ng.

    \n

    Installation

    \n

    npm install -g nsg

    \n

    Usage

    \n

    Same as ng command in Angular CLI, except that nsg generates project/component/services/... comsumed by NativeScript.

    \n

    Samples:

    \n
      \n
    1. \n

      Create new project: nsg new hello

      \n
      2. \n
    2. \n

      Generate a component named item: nsg generate component item

      \n
      3. \n
    \n

    Most options in ng also available in nsg, like --inline-style, --flat ...

    \n

    Use tns

    \n

    After coding, run tns run android|ios to run.

    \n

    Difference between nsg and ng

    \n
      \n
    • nsg uses nsg-cli.json as the configure filename
      • \n
    • nsg makes absolute templateUrl and styleUrls as NativeScript requires it
      • \n
    • nsg uses NativeScriptModule instead of RouterModule
      • \n
    • nsg tries to make project structure looks like ng does as well as tns does
      • \n
    • default selectors are prefixed with 'ns' instead of 'app'
      • \n
    \n

    Project structure made by nsg

    \n
    + hello/
        + .git/
        + app/
            + ns
                - app.module.ts
                - app.component.ts
                - app.component.html
                - app.component.css
            - app.css
            - main.ts
            - package.json
        - package.json
        - tsconfig.json
        - nsg-cli.json
        - README.md
        - .gitignore
    \n

    nsg replaces src folder with app, as tns does. Since app is used, so this folder inside src is changed to ns.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@edusperoni/nativescript-mqtt":{"name":"@edusperoni/nativescript-mqtt","version":"2.0.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@chris7519/nativescript-typeorm-plugin":{"name":"@chris7519/nativescript-typeorm-plugin","version":"1.0.7","license":"Apache-2.0","readme":"

    @chris7519/typeorm

    \n

    Usage

    \n
      \n
    1. \n

      Install the dependencies for nativescript sqlite and typeorm in your Nativescript project.

      \n
      npm i typeorm reflect-metadata nativescript-sqlite
      ns plugin add @chris7519/typeorm
      \n
      2. \n
    2. \n

      Create a database connection in your applications entry point eg. main.ts

      \n
      let driver = require('nativescript-sqlite');

      // use an iife to run it before angular starts
      (async () => {
          console.log('START APP')
          try {
              const connection = await createConnection({
                  database: 'test.db',
                  type: 'nativescript',
                  driver,
                  entities: [
                      User,
                      // ... more models here
                  ],
                  logging: true
              })

              // Dangerously drops all tables on app start if true
              // connection.synchronize(true);

              console.log(\"Connection Created\")
          } catch (err) {
              console.error(err)
          }
      })();
      \n
      3. \n
    3. \n

      Then follow the instructions on how to use TypeOrm

      \n
      4. \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-ripple":{"name":"nativescript-nbmaterial-ripple","version":"1.0.1","license":"Apache-2.0","readme":"

    Ripple implementation for nbmaterial packages

    \n

    The module implement material ripple on both iOS and Android.\nIt augments nativescript Style/View.\nThis way you can define "ripple" properties on DOM elements or in CSS.

    \n

    It also include a Ripple Layout That let you make ripple outside from the component.

    \n
      interface RippleOption {
        wrapper?: View;
        iosRadiusFactor?: number;
        androidHotBounds?: boolean;
    } 
        interface Style {
            rippleColor: Color;
            rippleAlpha: number;
            rippleDuration: number;
            fadeDuration: number;
        }  
        interface View {
            rippleColor: Color;
            rippleAlpha: number;
            rippleDuration: number;
            fadeDuration: number;
            startRippleNative(opts: RippleOption): Promise<any>;
        } 

       class RippleLayout extends AbsoluteLayout {
        perfomRipple(): Promise<any>;
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/shared-notification-delegate":{"name":"@nativescript/shared-notification-delegate","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript Shared Notification Delegate

    \n

    This project aims to prevent the shortcomings that come from the iOS implementation of only allowing a single delegate.

    \n

    Installation

    \n
    ns plugin add @nativescript/shared-notification-delegate
    \n

    Usage

    \n

    Import SharedNotificationDelegate and add Observers

    \n
    import { SharedNotificationDelegate } from '@nativescript/shared-notification-delegate';

    ...


    SharedNotificationDelegate.addObserver({
        delegateUniqueKey: \"myUniqueKey\", // ensures uniqueness, if not set or is null/undefined, allows multiple of the same
        userNotificationCenterWillPresentNotificationWithCompletionHandler: (notificationCenter, notification, handler, stop, next) => {
            console.log(\"notification received by observer\");
            // is this notification something I should handle?
            if (shouldHandleThis) {
                // do stuff
                // intercept it and show alert
                handler(UNNotificationPresentationOptions.Alert);
                return;
            }
            // not mine, next should handle
            next();
        }
    });
    \n

    API

    \n

    SharedNotificationDelegate Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    addObserver(observer: DelegateObserver, priority?: number): voidAdds a delegate observer of a certain priority (lower means first). Default priority is 100.
    removeObserver(observer: DelegateObserver)removes a DelegateObserver
    removeObserverByUniqueKey(key: any)removes a DelegateObserver by its unique key
    \n

    DelegateObserver Interface

    \n

    A DelegateObserver can implement 3 methods from UNUserNotificationCenterDelegate with the addition of some details:

    \n
    interface DelegateObserver {
        userNotificationCenterDidReceiveNotificationResponseWithCompletionHandler?(center: any /* UNUserNotificationCenter */, response: any /* UNNotificationResponse */, completionHandler: () => void, next: () => void): void;
        userNotificationCenterOpenSettingsForNotification?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, stop: () => void, next: () => void): void;
        userNotificationCenterWillPresentNotificationWithCompletionHandler?(center: any /* UNUserNotificationCenter */, notification: any /* UNNotification */, completionHandler: (p1: any /* UNNotificationPresentationOptions */) => void, next: () => void): void;
        /**
         * if set to not null/undefined, will ensure only one is registered
         */
        delegateUniqueKey?: any;
    }
    \n

    All the functions are called asynchronously in a chain.

    \n

    Calling a completionHandler immediately stops the observer chain. next() must be called if the method will not be handling the notification.

    \n

    Calling stop() on userNotificationCenterOpenSettingsForNotification prevents the event bubbling to the rest.

    \n

    Only one method will be processed at a time, this means you can take as long as you want (including making http calls, for example), as long as you just call completionHandler, stop and next when you're finished.

    \n

    If a DelegateObserver has a delegateUniqueKey, the SharedNotificationDelegate will ensure only the latest copy of the observer is present. This is especially useful if debugging with HMR, which may add multiple observers on application reload.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-geolocation-lt":{"name":"nativescript-background-geolocation-lt","version":"1.9.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/canvas-phaser-ce":{"name":"@nativescript/canvas-phaser-ce","version":"1.1.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pusher-ns":{"name":"nativescript-pusher-ns","version":"1.0.1","license":"MIT","readme":"

    Pusher Nativescript

    \n

    Pusher NativeScript adds Pusher support to {N} applications.

    \n

    There is not official support for NativeScript in pusher-js sdk, but the Pusher team made a great work designing the JS library to target multiple platforms (react-native, node, browser, etc), while reusing a lot of code in the process. Taking advantage of that architecture, we were able to create a version of the pusher-js sdk that maintains the original API and provides support for NativeScript.

    \n

    Usage

    \n

    You can install the library using any npm compatible package manager, like npm or yarn:

    \n
    $ npm install --save pusher-nativescript
    \n

    Or use NativeScript CLI:

    \n
    $ tns plugin add pusher-nativescript
    \n

    Once the package has been installed, you can import it

    \n

    As a CommonJS module:

    \n
    const Pusher = require('pusher-nativescript');
    \n

    Or ES6 module:

    \n
    import Pusher from 'pusher-nativescript';
    \n

    If you are using Typescript you might have to import it like this:

    \n
    import * as Pusher from 'pusher-nativescript';
    \n

    This build of pusher-js uses NativeScript's Connectivity API to detect changes on connectivity state. It will use this to automatically reconnect.

    \n

    On Android, to access any connection related information we will need explicit permission from the user. To enable the permission request add the follwing in app/App_Resources/Android/AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
    \n

    NativeScript do not have official support for WebSockets. We are relying on nativescript-websockets plugin to add that support. That is why the plugin is a peer dependency.

    \n

    As it was mentioned above, pusher-nativescript shares the same API as the official pusher-js library. To see how the library is used and configured checkout pusher-js repository.

    \n

    Credits

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-woosim-printer":{"name":"@ticnat/nativescript-woosim-printer","version":"1.0.4","license":"Apache-2.0","readme":"

    NativeScript Woosim Printer

    \n

    \"npm

    \n

    This plugin integrate your nativescript app with Woosim Intermec Pr3 printer to print a normal text or a bmp.

    \n

    Prerequisites / Requirements

    \n

    You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

    \n

    Installation NS7 Only

    \n
    tns plugin add @ticnat/nativescript-woosim-printer
    \n

    Usage

    \n

    Create Plugin instance

    \n
    let printer = new WoosimPrinter();
    \n

    Connect to the printer through:

    \n
    this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
    \n

    To Print Normal Text use:

    \n
    printer.print(\"Hello World\");
    \n

    To Print a BMP image:

    \n
    printer.printImg(bmp);
    \n

    To Print Txt File:

    \n
    let documents = fs.knownFolders.currentApp();
    var myFile = documents.getFile(\"mytextfile.txt\");
    this.printer.printTextFile(myFile);
    \n

    for more information see the demo

    \n

    API Property

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertytypeDefaultDescription
    paperSizeenumPaperSizes.FourInchset the default paper size for the printer
    debugbooleanfalseset the plugin in debug mode
    \n

    API Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescriptionParams
    connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
    disconnect():voiddisconnect from a printer
    print(text: string): voidprint normal texttext : the text you want to print
    printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
    printTextFile(file: any): void;Print Txt fileFile: NS File
    \n

    Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/human-activity":{"name":"@awarns/human-activity","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/human-activity

    \n

    \"npm\n\"npm\"

    \n

    This module allows to detect and react to the changes in the activity being performed by the user (or object) carrying the phone: standing still, walking, running, riding a bicycle or being inside a vehicle. Depending on the granularity of the detection mechanism being used, it can even detect user stand-ups too.

    \n

    This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering human activity change detection tasks. Obtain human activity updates even in background.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/human-activity
    \n

    Usage

    \n

    After installing and setting up this plugin, you'll have access to two task groups to start and stop listening human activity updates at different granularity levels. The received updates, will be a HumanActivityChange record, described below.

    \n

    Setup

    \n

    This plugin requires you to register its loader during the framework initialization, like this:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerHumanActivityPlugin } from '@awarns/human-activity';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerHumanActivityPlugin(),
        ]
      )
      // ... handle initialization promise
    \n

    Plugin loader parameters:

    \n
    \n

    This plugin loader takes no parameters.

    \n
    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    startDetectingCoarseHumanActivityChangesAllows to start detecting human activity changes at a coarse granularity level. This level of granularity means that activity changes will be reported no sooner than 1 minute after the activity started. In contrast, the detection mechanism will be more robust against in-between activity stops. This means, for example, that if the user is walking and stops for a few seconds, or is inside a vehicle and stops at traffic light, these subtle changes won't be detected at this granularity level
    stopDetectingCoarseHumanActivityChangesThe complement to the previous task. Allows to stop receiving coarse activity updates on demand
    startDetectingIntermediateHumanActivityChangesAllows to start detecting human activity changes at an intermediate granularity level. This level of granularity means that activity changes will be reported as soon as they are detected. In contrast, the detection mechanism will be more sensitive to in-between activity stops. This means, for example, that if the user is walking and stops for a few seconds, or is inside a vehicle and stops at traffic light, these subtle changes will be detected as transitions to becoming still. Due to this extra of granularity, this activity detection mechanism is able to detect user stand-up actions (phone tilts abruptly)
    stopDetectingIntermediateHumanActivityChangesThe complement to the previous task. Allows to stop receiving intermediate activity updates on demand
    \n
    \n

    Note: All the tasks require physical activity access permission for their execution. Each task will automatically request what is missing during framework's initialization

    \n
    \n

    Start / stop receiving updates on human activity changes at a coarse level

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      startDetectingCoarseHumanActivityChangesTask,
      stopDetectingCoarseHumanActivityChangesTask,
    } from '@awarns/human-activity';

    export const demoTasks: Array<Task> = [
      startDetectingCoarseHumanActivityChangesTask(),
      stopDetectingCoarseHumanActivityChangesTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    These task generators take no parameters

    \n
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events, which are: startDetectingCoarseHumanActivityChangesFinished and stopDetectingCoarseHumanActivityChangesFinished.

    \n

    However, once the start task has finished running, relevant events will be emitted by the internal listeners once the corresponding action has been detected. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingCoarseHumanActivityChanges'));
    on('stopEvent', run('stopDetectingCoarseHumanActivityChanges'));

    on('userStartedBeingStill', run('writeRecords'));
    on('userFinishedBeingStill', run('writeRecords'));

    on('userStartedWalking', run('writeRecords'));
    on('userFinishedWalking', run('writeRecords'));

    on('userStartedRunning', run('writeRecords'));
    on('userFinishedRunning', run('writeRecords'));

    on('userStartedRidingABicycle', run('writeRecords'));
    on('userFinishedRidingABicycle', run('writeRecords'));

    on('userStartedBeingInAVehicle', run('writeRecords'));
    on('userFinishedBeingInAVehicle', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Start / stop receiving updates on human activity changes at an intermediate level

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      startDetectingIntermediateHumanActivityChangesTask,
      stopDetectingIntermediateHumanActivityChangesTask,
    } from '@awarns/human-activity';

    export const demoTasks: Array<Task> = [
      startDetectingIntermediateHumanActivityChangesTask(),
      stopDetectingIntermediateHumanActivityChangesTask(),
    ];
    \n

    Task generator parameters:

    \n
    \n

    These task generators take no parameters

    \n
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events, which are: startDetectingIntermediateHumanActivityChangesFinished and stopDetectingIntermediateHumanActivityChangesFinished.

    \n

    However, once the start task has finished running, relevant events will be emitted by the internal listeners once the corresponding action has been detected. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingCoarseHumanActivityChanges'));
    on('stopEvent', run('stopDetectingCoarseHumanActivityChanges'));

    on('userStartedBeingStill', run('writeRecords'));
    on('userFinishedBeingStill', run('writeRecords'));

    on('userStartedStandingUp', run('writeRecords'));
    on('userFinishedStandingUp', run('writeRecords'));

    on('userStartedWalking', run('writeRecords'));
    on('userFinishedWalking', run('writeRecords'));

    on('userStartedRunning', run('writeRecords'));
    on('userFinishedRunning', run('writeRecords'));

    on('userStartedRidingABicycle', run('writeRecords'));
    on('userFinishedRidingABicycle', run('writeRecords'));

    on('userStartedBeingInAVehicle', run('writeRecords'));
    on('userFinishedBeingInAVehicle', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    userStartedBeingStillHumanActivityChangeIndicates that the user of the phone has stopped moving
    userFinishedBeingStillHumanActivityChangeIndicates that the user of the phone has started moving
    userStartedStandingUpHumanActivityChangeIndicates that the user of the phone has started standing up
    userFinishedStandingUpHumanActivityChangeIndicates that the user of the phone has finished standing up
    userStartedWalkingHumanActivityChangeIndicates that the user of the phone has started to walk
    userFinishedWalkingHumanActivityChangeIndicates that the user of the phone has stopped walking
    userStartedRunningHumanActivityChangeIndicates that the user of the phone has started to run
    userFinishedRunningHumanActivityChangeIndicates that the user of the phone has stopped running
    userStartedRidingABicycleHumanActivityChangeIndicates that the user of the phone has started riding a bicycle
    userFinishedRidingABicycleHumanActivityChangeIndicates that the user of the phone has stopped riding a bicycle
    userStartedBeingInAVehicleHumanActivityChangeIndicates that the user of the phone has started being in a vehicle
    userFinishedBeingInAVehicleHumanActivityChangeIndicates that the user of the phone has stopped being in a vehicle
    \n

    Records

    \n

    HumanActivityChange

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways human-activity
    changeChangeCan be either start or end. Indicates if the change reflects the activity starting or finishing
    timestampDateThe local time when the change was detected
    activityHumanActivityThe activity which was detected. Can be any of the ones supported by the context-apis plugin (see context-apis API docs section on human activity, to obtain the full list)
    confidencenumberProbability value of the detected action reported by the activity detection mechanism. Ranges from 0 to 1. This field will contain an undefined value in records reported by the coarse detection mechanism
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitude-sdk":{"name":"nativescript-wikitude-sdk","version":"1.0.3","license":"Apache-2.0","readme":"

    NativeScript Wikitude SDK

    \n

    \"npm

    \n

    \"NPM\"

    \n

    Provides NativeScript 8+ access to Wikitude Augmented Reality (9.1.0 on Android and 9.0.0 on iOS).

    \n

    Prerequisites / Requirements

    \n

    Permissions

    \n

    Before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

    \n

    Running the Demo

    \n

    Basic Vue compatible dmeo is available.

    \n

    If you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

    \n

    Then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

    \n

    Installation

    \n

    to install for your project you can use:

    \n
    tns plugin add nativescript-wikitude-sdk
    \n

    for Nativescript Angular Projects you will need to import the Element in your app.component.ts

    \n
    import { Wikitude } from \"nativescript-wikitude-sdk\";
    // ...snip....
    registerElement(\"Wikitude\", () => Wikitude);
    \n

    and then in your ar.component.html :

    \n
    <Wikitude
      [url]=\"WikitudeURL\"
      (WorldLoaded)=\"onWorldLoaded($event)\"
      (JSONReceived)=\"onJSON($event)\"
    >
    </Wikitude>
    \n

    and in your ar.component.ts:

    \n
        import { Wikitude } from 'nativescript-wikitude-sdk';

        // ...snip...

        WikitudeInstance: Wikitude;
        WikitudeURL: string = \"~/wikitude_world/index.html\";

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        }

        onJSON($event) {
            console.log(JSON.stringify($event.data));
        }

        // ...snip...
    \n

    and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

    \n
        (global as any).wikitudeLicense: string = \"YOUR_LICENSE_KEY_HERE\"
    \n

    And Voila! you have Wikitude AR working in your Nativescript Application!

    \n

    Usage

    \n

    using your own location provider

    \n

    by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

    \n

        onWorldLoaded($event) {
            this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
            this.WikitudeInstance.disableLocationProvider();
        }
    \n

    Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

    \n
    this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });
    \n

    this is useful if you want a single location state.

    \n

    once you have disabled it you can re-enable it with the following :

    \n
    this.WikitudeInstance.enableLocationProvider();
    \n

    TODO

    \n
      \n
    • Update to Wikitude 9.5 for Android and iOS
      • \n
    • Plugins API Exposure. Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API
      • \n
    • Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
      • \n
    • Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
      • \n
    • a better way to set the Wikitude LicenseKey and Required Features.
      • \n
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefault valueDescription
    url""the URL of the Wikitude "ARWorld"
    features`Features.ImageTrackingFeatures.InstantTracking
    \n

    Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionArgumentsDescription
    setLocation(){ latitude: number, longitude: number, altitude: number, accuracy: number }sets the location in the ARWorld
    hasFeature()feature : numberchecks if your device can support said features (or if your license supports it)
    loadUrl()url: stringloads the URL in the Wikitude WebView
    reload()reloads the current Wikitude WebView
    clearCache()clears the wikitude Cache
    toggleFlash()Toggles the Devices Flash-light
    switchCamera()switches the Camera that wikitude uses
    captureScreen()captureWebViewContent: booleancaptures the current view, can also capture the webview content
    disableLocationProvider()disables the location Provider (you will need to provide your own for GEO/POI's to work)
    enableLocationProvider()enables the location Provider
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescriptionType
    WorldLoadSuccessFires when the ARWorld Loads SuccessfullyWorldLoadSuccessEventData
    WorldLoadFailFires if an Error Occurs while loading the AR WorldWorldLoadFailedEventData
    JSONReceivedFires when the ARWorld sends a JSON ObjectJSONReceivedEventData
    ScreenCaptureSuccessfires when the screen is capturedScreenCaptureSuccessEventData
    ScreenCaptureFailfires when wikitude fails to capture the screenScreenCaptureFailedEventData
    \n

    all can be imported from the index.d.ts.

    \n

    Credits

    \n
    There used to be a fork of @breningham/nativescript-wikitude who originally started the plugin. It has been unfortunately inactive, so another fork was created. Plugin has been since then revamped several times, and this new version came up with all the possible updates for NativeScript 7 compatibility.
    \n

    License

    \n

    Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-splashscreen":{"name":"nativescript-splashscreen","version":"2.3.0","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n#Installation\ntns plugin add nativescript-splashscreen

    \n

    #Configure

    \n\n

    Android

    \n

    Important update all occurrences of org.nativescript.demo to you app's id before using this plugin the app id can be found in the package.json of your apps root folder.

    \n

    Update app/App_Resources/Android/AndroidManifest.xml

    \n
    <activity
    \t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
    \t\t\tandroid:label=\"@string/title_activity_kimera\"
    \t\t\tandroid:configChanges=\"keyboardHidden|orientation|screenSize\">
    \t\t</activity>

            <activity 
    \t\tandroid:name=\"co.fitcom.SplashScreen\" android:noHistory=\"true\">
    \t\t<intent-filter>
    \t\t<category android:name=\"android.intent.category.LAUNCHER\" />
    \t\t<action android:name=\"android.intent.action.MAIN\" />
    \t\t</intent-filter>
    \t\t</activity>
    \n

    ###Update SplashScreen\nLogo :- replace app/App_Resources/Android/drawable/splashlogo.png with your updated logo . must use the same filename

    \n

    Text Displayed :- splash_title located in app/App_Resources/Android/values/splash_settings.xml\nText Color :- Update configSplash.setTitleTextColor in app/SplashScreen.js

    \n

    #Colors\nThe color palette is based on https://material.google.com/style/color.html#color-color-palette

    \n

    e.g md_blue_900

    \n

    ###Background

    \n

    Update configSplash.setBackgroundColor in app/SplashScreen.js

    \n

    iOS

    \n

    Setup a delegate:

    \n
    import * as application from 'application';
    import {SplashScreen} from 'nativescript-splashscreen';

    var FRESH_LAUNCH: boolean = true;

    if (application.ios) {
      class MyDelegate extends UIResponder {
        public static ObjCProtocols = [UIApplicationDelegate];
        
        public applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
          return true;
        }

        applicationDidBecomeActive(application: UIApplication): void {
          if (FRESH_LAUNCH) {
            FRESH_LAUNCH = false;
            let splash = new SplashScreen('twitterIcon.png', '#4E75E2');
            application.keyWindow.addSubview(splash.start());
          }
        }
      }
      application.ios.delegate = MyDelegate;
    } 
    application.start({ moduleName: 'main-page' });
    \n

    This will only show the splash screen on a fresh startup since you wouldn't want it to appear and animate again on top of your view when returning to the app.

    \n

    You can pass any image from your app/App_Resources/iOS folder and any hex background color.

    \n
    new SplashScreen('twitterIcon.png', '#4E75E2');
    \n

    #Run demo

    \n
    git clone https://github.com/triniwiz/nativescript-splashscreen
    cd nativescript-splashscreen
    npm run demo.android
    \n

    #ScreenShots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidIOS
    \"ss\"\"splash\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-sdk-n7":{"name":"nativescript-google-maps-sdk-n7","version":"3.0.7","license":"MIT","readme":"

    NativeScript plugin for the Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    \"NPM\n\"Dependency

    \n

    \"NPM\"

    \n

    Prerequisites

    \n

    NativeScript - The latest nativescript-cli@7 is highly recommended.

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling:

    \n
    ns plugin add nativescript-google-maps-sdk
    \n

    or in case of nativescript < 7, proceed with the old command:

    \n
    tns plugin add nativescript-google-maps-sdk
    \n

    Setup

    \n

    See demo code included here

    \n

    See a live demo here

    \n

    Configure API Key for Android

    \n

    Nativescript 4+

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/google_maps_api_key.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Nativescript < 4

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
    \n

    Next, modify your app/App_Resources/Android/values/google_maps_api_key.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) { 
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
        <GridLayout>
            <maps:mapView
                latitude=\"{{ latitude }}\"
                longitude=\"{{ longitude }}\"
                zoom=\"{{ zoom }}\"
                bearing=\"{{ bearing }}\" 
                tilt=\"{{ tilt }}\"
                mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
                padding=\"{{ padding }}\"
                mapReady=\"onMapReady\"  
                markerSelect=\"onMarkerSelect\"
                markerBeginDragging=\"onMarkerBeginDragging\"
                markerEndDragging=\"onMarkerEndDragging\"
                markerDrag=\"onMarkerDrag\"
                cameraChanged=\"onCameraChanged\" 
                cameraMove=\"onCameraMove\"
            />
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <Style> type was imported from the plugin as { Style }.

    \n

    Basic Example

    \n
    //  /app/main-page.js

    var mapsModule = require(\"nativescript-google-maps-sdk\");

    function onMapReady(args) {
        var mapView = args.object;
        
        console.log(\"Setting a marker...\");
        var marker = new mapsModule.Marker();
        marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.userData = { index : 1};
        mapView.addMarker(marker);
        
        // Disabling zoom gestures
        mapView.settings.zoomGesturesEnabled = false;
    }

    function onMarkerSelect(args) {
        console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera)); 
    }

    function onCameraMove(args) {
        console.log(\"Camera moving: \"+JSON.stringify(args.camera));
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    exports.onCameraMove = onCameraMove;
    \n

    Custom Info Windows (Beta)

    \n

    To use custom marker info windows, define a template in your view like so:

    \n
    <!-- /app/main-page.xml -->
    <Page 
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
      <GridLayout>
           <maps:mapView mapReady=\"onMapReady\">
                <!-- Default Info Window Template -->       \t\t
                <maps:mapView.infoWindowTemplate>
                    <StackLayout orientation=\"vertical\" width=\"200\" height=\"150\" >
                        <Label text=\"{{title}}\" className=\"title\" width=\"125\"   />
                        <Label text=\"{{snippet}}\" className=\"snippet\" width=\"125\"   />
                        <Label text=\"{{'LAT: ' + position.latitude}}\" className=\"infoWindowCoordinates\"  />
                        <Label text=\"{{'LON: ' + position.longitude}}\" className=\"infoWindowCoordinates\"  />
                    </StackLayout>
                </maps:mapView.infoWindowTemplate>
                <!-- Keyed Info Window Templates -->   
                <maps:mapView.infoWindowTemplates>
                    <template key=\"testWindow\">
                        <StackLayout orientation=\"vertical\" width=\"160\" height=\"160\" >
                            <Image src=\"res://icon\" stretch=\"fill\"  height=\"100\" width=\"100\" className=\"infoWindowImage\" />
                            <Label text=\"Let's Begin!\" className=\"title\" />
                        </StackLayout>
                    </template>
                </maps:mapView.infoWindowTemplates>
            </maps:mapView>
      </GridLayout>
    </Page>
    \n

    ...and set the infoWindowTemplate property like so:

    \n
    var marker = new mapsModule.Marker();
    marker.infoWindowTemplate = 'testWindow';
    \n

    This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.

    \n

    ** Known issue: remote images fail to display in iOS info windows (local images work fine)

    \n

    Usage with Angular

    \n

    See Angular demo code included here

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register MapView plugin in order to use in Angular templates
    registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <MapView (mapReady)=\"onMapReady($event)\"></MapView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"MapView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");
        };
    }
    \n

    Angular 8 Support

    \n

    If you are using Angular 8, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Angular 9:

    \n
    @ViewChild(\"MapView\", {static: false}) mapView: ElementRef;
    \n

    Angular 10 Support

    \n

    Full Angular 10 (with Ivy Compiler) support is under development and will be released in the next two weeks, starting from today (09/06/2020).

    \n

    Clustering Support (Issue #57)

    \n

    There is a seperate plugin in development thanks to @naderio: see nativescript-google-maps-utils.

    \n

    Get Help

    \n

    Checking with the Nativescript community is your best bet for getting help.

    \n

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    \n

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uuid-v2":{"name":"nativescript-uuid-v2","version":"2.0.1","license":"Apache-2.0","readme":"

    NativeScript UUID (Version 2)

    \n

    This version of NativeScript UUID replaces the outdated call to tns-core-modules with @nativescript/core, making this library compatible with NativeScript 8.

    \n

    Description

    \n

    This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

    \n

    Uses the SAMKeychain Cocoa Pod on iOS.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    ns plugin add nativescript-uuid-v2
    \n

    Getting Started

    \n

    JavaScript

    \n
      const nsUuid = require(\"nativescript-uuid-v2\");

      const uuid = nsUuid.getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n

    TypeScript

    \n
      import {getUUID} from 'nativescript-uuid-v2';

      const uuid = getUUID();
      console.log(`The device UUID is ${uuid}`);
    \n

    Security

    \n

    If you discover a security vulnerability within this package, please send an email to Bespoke Technology Labs at hello@bespoke.dev. All security vulnerabilities will be promptly addressed. You may view our full security policy here.

    \n

    License

    \n

    The NativeScript UUID V2 Library is licensed under The Apache 2.0 License.

    \n

    Credits

    \n
      \n
    • @LewisSmallwood - Bespoke Technology Labs
      • \n
    • @gdtdpt
      • \n
    • @ignaciolarranaga
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braintree":{"name":"nativescript-braintree","version":"3.1.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    nativescript-braintree

    \n

    Braintree Payment NativeScript plugin for Android & iOS (9+). Works with NS 6+

    \n

    Detail information here:

    \n

    https://developers.braintreepayments.com/start/hello-client/android/v2

    \n

    https://developers.braintreepayments.com/guides/drop-in/overview/ios/v4

    \n

    You will need a Server to Generate a client token. You can follow here:\nhttps://developers.braintreepayments.com/start/hello-server/php

    \n

    Note: Your app's package ID should be lowercase letters. If your package contains underscores, the underscores should be removed. Detail: https://developers.braintreepayments.com/guides/client-sdk/setup/android/v2#browser-switch-setup

    \n

    For iOS (Important)

    \n

    For Paypal & Venmo setup, must need to follow bellow setup-ios-paypal--venmo

    \n

    Platforms

    \n

    Android

    \n

    iOS (9+)

    \n

    Installation

    \n

    Nativescript 7+:

    \n
    tns plugin add nativescript-braintree
    \n

    NativeScript 5-6

    \n
    tns plugin add nativescript-braintree@2.0.9
    \n

    NativeScript 4.x

    \n
    tns plugin add nativescript-braintree@2.0.1
    \n

    Usage

    \n
    import { Braintree, BrainTreeOptions } from 'nativescript-braintree';

    let opts :BrainTreeOptions = {
      amount: \"10.0\",
      collectDeviceData: true,
      requestThreeDSecureVerification: false
    }

    let token = token; //Get the token from server. https://developers.braintreepayments.com/start/hello-server/php

    let braintree = new Braintree();

    braintree.startPayment(token, opt);

    braintree.on(\"success\", function (res) {
        let output = res.object.get(\"output\");
        console.dir(output);
    })

    braintree.on(\"cancel\", function (res) {
        let output = res.object.get(\"output\");
        console.dir(output);
    })

    braintree.on(\"error\", function (res) {
        let output = res.object.get(\"output\");
        console.dir(output);
    })
    \n

    Set up Apple Pay

    \n

    If you want to use Apple Pay there are a few steps you must complete.

    \n
      \n
    1. \n

      Set up your Apple Pay Certificate in Braintree and in the Apple Developer Portal\nFollow the configuration steps here: https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4

      \n
      2. \n
    2. \n

      To prevent compiler errors and to provide intellisense when working with native iOS classes add tns-platform-declarations to your project. Here is a video guide showing how to do that: https://www.youtube.com/watch?v=vz7qfpeghFs

      \n
      3. \n
    \n

    Note: It was implemented this way so that the developer has more customization capabilities rather than putting some of this logic inside the plugin which might be harder for authors to modify if needed.

    \n
      \n
    1. Populate applePayPaymentRequest property on the BrainTreeOptions class depending on how you want the Apple Pay prompt to look.
      2. \n
    \n

    Note: The apple pay prompt will make the last item in the paymentSummaryItems show like a total. Therefore you can just add the summary/total item manually or put a summary/total item at the end of the applePayLineItems array.

    \n

    Itemized Apple Pay

    \n

    \"Itemized

    \n

    If you want an itemized prompt like above, do the following:

    \n
    import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';

    let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();

    // If you want to show an itemized Apple Pay prompt.
    let applePayLineItems = [
                {
                    label: \"Service\",
                    amount: 0.02
                },
                {
                    label: \"Delivery\",
                    amount: 0.03
                },
    \t    {
    \t    \tlabel: \"Company Name\",
    \t\tamount: 0.05
    \t    }
            ];

    let lineItemsArray = [];

    applePayLineItems.map((lineItem: ApplePayLineItem) => {

    let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString())    );

    lineItemsArray.push(pkSummaryItem);
    });


    let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);

    applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
    applePayPaymentRequestObj.countryCode = \"US\";
    applePayPaymentRequestObj.currencyCode = \"USD\";
    applePayPaymentRequestObj.merchantIdentifier = \"YOUR_MERCHANT_IDENTIFIER\";
    applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;

    // Configure your allowed networks
    let networksArray = NSArray.alloc().initWithArray([
        \"AmEx\",
        \"Discover\",
        \"MasterCard\",
        \"Visa\",
    ]);

    applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;

    let opt: BrainTreeOptions = {
        amount: \"0.01\", // This is ignored if Apple Pay is the selected payment method
        collectDeviceData: false,
        requestThreeDSecureVerification: true,
        // Apple Pay payment request
        applePayPaymentRequest: applePayPaymentRequestObj,
    };
    \n

    Summary Apple Pay

    \n

    \"Summary

    \n

    If you want a summary prompt like above, do the following:

    \n
    import { Braintree, BrainTreeOptions, ApplePayLineItem } from 'nativescript-braintree';

    let applePayPaymentRequestObj = PKPaymentRequest.alloc().init();

    // If you want to show a summary Apple Pay prompt.
    let applePayLineItems = [
    \t    {
    \t    \tlabel: \"Company Name\",
    \t\tamount: 0.02
    \t    }
            ];

    let lineItemsArray = [];

    applePayLineItems.map((lineItem: ApplePayLineItem) => {

    let pkSummaryItem = PKPaymentSummaryItem.summaryItemWithLabelAmount(lineItem.label, NSDecimalNumber.decimalNumberWithString(lineItem.amount.toString())    );

    lineItemsArray.push(pkSummaryItem);
    });


    let paymentSummaryArray = NSArray.alloc().initWithArray(lineItemsArray);

    applePayPaymentRequestObj.paymentSummaryItems = paymentSummaryArray as NSArray<PKPaymentSummaryItem>;
    applePayPaymentRequestObj.countryCode = \"US\";
    applePayPaymentRequestObj.currencyCode = \"USD\";
    applePayPaymentRequestObj.merchantIdentifier = \"YOUR_MERCHANT_IDENTIFIER\";
    applePayPaymentRequestObj.merchantCapabilities = PKMerchantCapability.Capability3DS;

    // Configure your allowed networks
    let networksArray = NSArray.alloc().initWithArray([
        \"AmEx\",
        \"Discover\",
        \"MasterCard\",
        \"Visa\",
    ]);

    applePayPaymentRequestObj.supportedNetworks = networksArray as NSArray<string>;

    let opt: BrainTreeOptions = {
        amount: \"0.01\", // This is ignored if Apple Pay is the selected payment method
        collectDeviceData: false,
        requestThreeDSecureVerification: true,
        // Apple Pay payment request
        applePayPaymentRequest: applePayPaymentRequestObj,
    };
    \n

    Setup Google Pay

    \n

    In order to utilize the Google Pay services you must ensure you have set up the required meta tag in your AndroidManifest.xml detailed here: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3

    \n

    Also be sure to provide the a currency code in the BrainTreeOptions, as this is required.

    \n
    let opts: BrainTreeOptions = {
                amount: \"0.01\",
                collectDeviceData: false,
                requestThreeDSecureVerification: true,
                enableGooglePay: true, // need to do additional setup for android. Please check demo project. Details: https://developers.braintreepayments.com/guides/google-pay/client-side/android/v3#add-google-play-services-wallet
                currencyCode: \"USD\"
            };
    \n

    Setup iOS paypal & Venmo.

    \n

    If you want to use Paypal & Venmo then you will need to edit your app Info.plist file which is located app/App_Resources/iOS/Info.plist to add URL scheme like this:

    \n
    <key>CFBundleURLTypes</key>
    <array>
    \t<dict>
    \t\t<key>CFBundleURLSchemes</key>
    \t\t<array>
    \t\t\t<string>org.nativescript.demo.payments</string>
    \t\t</array>
    \t</dict>
    </array>
    \n

    This scheme must start with your app's Bundle ID and be dedicated to Braintree app switch returns. For example, if the app bundle ID is com.yourcompany.yourapp, then your URL scheme could be com.yourcompany.yourapp.payments or com.yourcompany.yourapp.anything. Above I used org.nativescript.demo.payments because app's bundle ID is org.nativescript.demo & we will need this value below.

    \n

    Now open your app.ts or main.ts (for Angular) file. Add following lines before application.start({ moduleName: "main-page" }); or platformNativeScriptDynamic().bootstrapModule(AppModule); (Angular).

    \n
    import * as app from \"application\";
    import { setupBraintreeAppDeligate } from \"nativescript-braintree\"

    if (app.ios) {
        setupBraintreeAppDeligate(\"org.nativescript.demo.payments\");
    }
    \n

    Example:

    \n

    https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/app.ts

    \n

    https://github.com/jibon57/nativescript-braintree/blob/master/demo/app/App_Resources/iOS/Info.plist

    \n

    ref: https://developers.braintreepayments.com/guides/paypal/client-side/ios/v4

    \n

    Using 3D Secure

    \n

    In order to use 3D Secure payments which is required to satisfy PSD2 Strong Consumer Authentication (SCA) compliance requirements you should set requestThreeDSecureVerification: true in your options. Also it is required to set an amount.

    \n

    Credits

    \n

    Special thanks to @Pip3r4o, @TylerBlakeLOU, @SamGosman

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-identomat":{"name":"nativescript-identomat","version":"1.0.9","license":"Apache-2.0","readme":"

    nativescript-identomat

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-identomat
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"solid-navigation":{"name":"solid-navigation","version":"1.0.0-alpha.8","license":"MIT","readme":"

    solid-navigation

    \n

    Native navigation for SolidJS mobile apps built with NativeScript.

    \n
    \n

    Warning\nThis is a work in progress.

    \n
    \n

    Installation

    \n
    npm install solid-navigation --save
    \n

    Usage

    \n

    Create a router inside a new file, for example app/router.ts;

    \n
    import { createStackRouter, RouteDefinition } from \"solid-navigation\";

    declare module \"solid-navigation\" {
      export interface Routers {
        Default: {
          Home: RouteDefinition<{
            user: string;
          }>;
          Settings: RouteDefinition;
          Feed: RouteDefinition;
        };
      }
    }

    export const { Route, StackRouter, useParams, useRouter } =
      createStackRouter<\"Default\">();
    \n

    Use the router in your app:

    \n
    import Home from \"./home\";
    import { Route, StackRouter } from \"./router\";
    const App = () => {
      return (
        <StackRouter initialRouteName=\"Home\">
          <Route
            name=\"Home\"
            component={Home}
            initialParams={{
              user: \"@ammarahmed\",
            }}
          />
        </StackRouter>
      );
    };
    \n

    MIT Licensed

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-postgrest":{"name":"@triniwiz/nativescript-supabase-postgrest","version":"0.3.0","license":"Apache-2.0","readme":"

    Nativescript Supabase PostgREST Client

    \n
    ns plugin add @triniwiz/nativescript-supabase-postgrest
    \n

    Usage

    \n
    import { PostgrestClient } from '@triniwiz/nativescript-supabase-postgrest'

    const REST_URL = 'http://localhost:3000'
    const postgrest = new PostgrestClient(REST_URL)
    \n

    Credits

    \n

    Based on postgress-js

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"acorn-nativescript-geolocation":{"name":"acorn-nativescript-geolocation","version":"4.5.2","license":"Apache-2.0","readme":"

    NativeScript Geolocation \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Geolocation plugin to use for getting current location, monitor movement, etc.

    \n

    Installation

    \n

    In Command prompt / Terminal navigate to your application root folder and run:

    \n
    tns plugin add nativescript-geolocation
    \n

    Usage

    \n

    The best way to explore the usage of the plugin is to inspect the demo app in the plugin's root folder.\nIn demo folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to demo/app/main-page.ts.

    \n

    In short here are the steps:

    \n

    Import the plugin

    \n

    TypeScript

    \n
    import * as geolocation from \"nativescript-geolocation\";
    import { Accuracy } from \"tns-core-modules/ui/enums\"; // used to describe at what accuracy the location should be get
    \n

    Javascript

    \n
    var geolocation = require(\"nativescript-geolocation\");
    \n

    Request permissions

    \n
    geolocation.enableLocationRequest();
    \n

    Call plugin methods

    \n
    // Get current location with high accuracy
    geolocation.getCurrentLocation({ desiredAccuracy: Accuracy.high, maximumAge: 5000, timeout: 20000 })
    \n

    API

    \n

    Properties

    \n

    Location

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    latitude-The latitude of the geolocation, in degrees.
    longitude-The longitude of the geolocation, in degrees.
    altitude-The altitude (if available), in meters above sea level.
    horizontalAccuracy-The horizontal accuracy, in meters.
    verticalAccuracy-The vertical accuracy, in meters.
    speed-The speed, in meters/second over ground.
    timestamp-The time at which this location was determined.
    \n

    Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    desiredAccuracy?Accuracy.highThis will return the finest location available but use more power than any option. Accuracy.any is considered to be about 100 meter accuracy. Using a coarse accuracy such as this often consumes less power.
    updateDistanceNo filterUpdate distance filter in meters. Specifies how often to update the location. Read more in Apple document and/or Google documents
    updateTime1 minuteInterval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
    minimumUpdateTime5 secsMinimum time interval between location updates, in milliseconds (ignored on iOS). Read more in Google document.
    maximumAge-How old locations to receive in ms.
    timeout5 minutesHow long to wait for a location in ms.
    iosAllowsBackgroundLocationUpdatesfalseIf enabled, UIBackgroundModes key in info.plist is required (check the hint below). Allow the application to receive location updates in background (ignored on Android). Read more in Apple document
    iosPausesLocationUpdatesAutomaticallytrueAllow deactivation of the automatic pause of location updates (ignored on Android). Read more in Apple document
    iosOpenSettingsIfLocationHasBeenDeniedfalseArgument on the enableLocationRequest. If true, the settings app will open on iOS so the user can change the location services permission.
    \n
    \n

    If iosAllowsBackgroundLocationUpdates is set to true, the following code is required in the info.plist file:

    \n
    <key>UIBackgroundModes</key>
    <array>
       <string>location</string>
    </array>
    \n
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnsDescription
    getCurrentLocation(options: Options)PromiseGet current location applying the specified options (if any).
    watchLocation(successCallback: successCallbackType, errorCallback: errorCallbackType, options: Options)numberMonitor for location change.
    clearWatch(watchId: number)voidStop monitoring for location change. Parameter expected is the watchId returned from watchLocation.
    enableLocationRequest(always?: boolean)Promise<void>Ask for permissions to use location services. The option always is applicable only for iOS. For a custom prompt message on IOS, the following keys are required. NSLocationAlwaysUsageDescription, NSLocationUsageDescription and NSLocationWhenInUseUsageDescription Read more about its usage .
    isEnabledPromise<boolean>Resolves true or false based on the location services availability.
    distance(loc1: Location, loc2: Location)numberCalculate the distance between two locations. Returns the distance in meters.
    \n

    Known Issues

    \n

    Version Conflicts – Google Play Services

    \n

    If you have installed multiple plugins that use the Google Play Services you might run into version conflicts.\nIn order to fix this you might pin the version number in your app/App_Resources/Android/app.gradle file:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"11.2.+\"
      }
    }
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-soft-keyboard":{"name":"nativescript-soft-keyboard","version":"2.3.0","license":"Apache-2.0","readme":"

    nativescript-soft-keyboard

    \n

    It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But Nativescript app sometimes needs this information to achieve a good user interface.

    \n

    Breaking changes

    \n

    nativescript-soft-keyboard@2 for Nativescript@7

    \n

    nativescript-soft-keyboard@1 for Nativescript version < 7

    \n

    Installation

    \n
    tns plugin add nativescript-soft-keyboard
    \n

    Usage

    \n
        registerSoftKeyboardCallback((h) => console.log(h))
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    functionparameterDescription
    registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n
    ns plugin add nativescript-soft-keyboard
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-nativescript-ui":{"name":"svelte-native-nativescript-ui","version":"1.0.0","license":"MIT","readme":"

    Svelte Native - NativeScript UI

    \n

    Provides support for using NativeScript UI in Svelte Native Applications

    \n

    \"example-app\"

    \n

    Usage

    \n

    npm install any of the following nativescript ui packages you wish to use.

    \n

    Supported:

    \n\n

    In your project's app.ts file, add:

    \n
    //import the components you are using
    import RadListViewElement from \"svelte-native-nativescript-ui/listview\"
    import RadSideDrawerElement from \"svelte-native-nativescript-ui/sidedrawer\"
    import RadCalendarElement from \"svelte-native-nativescript-ui/calendar\"
    import Charts from \"svelte-native-nativescript-ui/chart\"
    import RadDataFrom from \"svelte-native-nativescript-ui/dataform\"
    import Gauges from \"svelte-native-nativescript-ui/gauge\"
    import AutoCompleteElement from \"svelte-native-nativescript-ui/autocomplete\"

    //register them with svelte-native so they can be used in svelte components
    RadListViewElement.register();
    RadSideDrawerElement.register();
    RadCalendarElement.register();
    Charts.register();
    RadDataFrom.register();
    Gauges.register();
    AutoCompleteElement.register();
    \n

    Then use them in your .svelte components:

    \n
      <radSideDrawer>
        ...
        <radSideDrawer.mainContent>
           <radListView>
            ...
           </radListView>
        </radSideDrawer.mainContent>  
      </radSideDrawer>
    \n

    Demo Project

    \n

    The included demo project can be launched with:

    \n
    $ cd demo
    $ npm install
    $ tns run android
    \n

    The demo contains examples for each of the supported elements that you can use as a starting poing.

    \n

    Usage

    \n

    The documentation for the supported controls can be obtained from the NativeScript site

    \n\n

    The differences between the documentation at the nativescript site and the usage in svelte-native can be observed by looking at the examples in the demo project.

    \n

    The main differences are the assigning of configuration elements to their parent's properties, and the handling of templates.

    \n

    Automatic parent properties

    \n

    Most configuration elements in the nativescript-ui components only have a single valid parent component and property that they can be assigned to. Svelte Native sets the default parent property for these configuration elements where possible.

    \n

    eg

    \n
      <chart:RadCartesianChart id=\"cartesianChart\">
        <chart:RadCartesianChart.horizontalAxis>
            <chart:CategoricalAxis/>
        </chart:RadCartesianChart.horizontalAxis>
        <chart:RadCartesianChart.verticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.verticalAxis>
        <chart:RadCartesianChart.series>
            <chart:LineSeries items=\"{{ categoricalSource }}\" categoryProperty=\"Country\" valueProperty=\"Amount\">
            </chart:LineSeries>
        </chart:RadCartesianChart.series>
      </chart:RadCartesianChart>
    \n

    becomes:

    \n
      <radCartesianChart id=\"cartesianChart\">
        <categoricalAxis prop:horizontalAxis />
        <linearAxis prop:verticalAxis/>
        <lineSeries items=\"{ categoricalSource }\" categoryProperty=\"Country\" valueProperty=\"Amount\" />
      </radCartesianChart>
    \n

    Note that since the axis elements are valid on either the horizontalAxis or verticalAxis properties, they still need to be specified using svelte-natives prop: directive.

    \n

    Template Element

    \n

    When a controls needs to render a child view multiple times (RadAutoCompleteTextView, RadListView) , Svelte Native configures the controls to use Template elements.

    \n

    For RadListView the item the template represents is given by the type, eg:

    \n
      <Template type=\"{ListViewViewType.HeaderView}\" > 
        <label class=\"header\">This is a Header</label>
      </Template>

      <Template type=\"{ListViewViewType.FooterView}\" > 
        <label class=\"footer\">This is a Footer</label>
      </Template>
    \n

    For Autocomplete it is given as the child of a suggestionView element:

    \n
      <suggestionView suggestionViewHeight=\"300\">
        <Template let:item>
            <stackLayout orientation=\"horizontal\" height=\"40\">
                <label text=\"{ item.text }\" marginLeft=\"10\" verticalAlignment=\"center\"/>
            </stackLayout>
        </Template>
      </suggestionView>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-search-view":{"name":"nativescript-search-view","version":"1.0.7","license":"Apache-2.0","readme":"

    nativescript-segment-view

    \n

    A NativeScript plugin to extend segmentBar, make style same in android and ios.

    \n

    Sample Screenshots

    \n

    Android

    \n

    Sample 1

    \n

    \"Sample1\"

    \n

    iOS

    \n

    Sample 1

    \n

    \"Sample1\"

    \n

    Installation

    \n
    tns plugin add nativescript-search-view
    \n

    Usage

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-search-view\">
      <StackLayout class=\"p-20\">
        <Label text=\"{{ message }}\" class=\"t-20 text-center c-black\" textWrap=\"true\"/>
        <ui:SearchView  loaded=\"svLoaded\" hint=\"Input keyword\" clear=\"onClear\" submit=\"onSubmit\"
          btnClick=\"onBtnClick\"
          cancelButtonText=\"Search\"
          searchBarIcon=\"~/images/search.png\"
          clearIcon=\"~/images/clear.png\"
          style=\"corner-radius:2.0;border-width:1;border-color:#FF0000;search-field-cursor-color:#FFFF00;search-field-text-color:#FFFF00;
        search-field-background-color:green;placeholder-color:#FFFF00;cancel-button-text-color:blue;\"     />
        <ui:SearchView  loaded=\"svLoaded\" hint=\"Input keyword\" clear=\"onClear\" submit=\"onSubmit\"
          btnClick=\"onBtnClick\" style=\"corner-radius:2.0;border-width:1;border-color:#CCCCCC;\" />
      </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n

    the app.module.ts of your app

    \n
    import { NativeScriptSearchViewModule } from \"nativescript-search-view/angular\";
    ...
    @NgModule({
        imports: [
            ...
            NativeScriptSearchViewModule,
            ...
        ]
        ...
    })
    export class AppModule { }
    \n
    <SearchView id=\"1\" (loaded)=\"onLoad()\" (clear)=\"onClear()\" (submit)=\"onSubmit($event)\"
        (btnClick)= \"onBtnClick()\"
        cancelButtonText=\"Search\"
        searchBarIcon=\"~/images/search.png\"
        clearIcon=\"~/images/clear.png\"
        style=\"orner-radius:2.0;border-width:1;border-color:#FF0000;search-field-cursor-color:#FFFF00;search-field-text-color:#FFFF00;
        search-field-background-color:green;placeholder-color:#FFFF00;cancel-button-text-color:blue;\"    ></SearchView>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-firebase-updated-new":{"name":"nativescript-firebase-updated-new","version":"2811.1.2","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Firebase\"/

    \n
    \n

    For NativeScript 7 compatibility, run tns plugin add @nativescript/firebase.

    \n
    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n
    \n

    For NativeScript 6.1+ compatibility, install polugin version 10: tns plugin add nativescript-plugin-firebase@10.

    \n
    \n
    \n

    For NativeScript 6.0 and lower, stick to plugin version < 10.

    \n
    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute this for NativeScript 7+:

    \n
    tns plugin add @nativescript/firebase
    \n

    or for NativeScript 6:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n
      \n
    • cd src.
      • \n
    • npm i (just answer 'n' to any prompts as they are ignored anyway).
      • \n
    • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
      • \n
    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    // NativeScript 7+
    var firebase = require(\"@nativescript/firebase\");

    // NativeScript 6-
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    // NativeScript 7+
    import { firebase } from \"@nativescript/firebase\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    // NativeScript 7+
    import { firebase } from \"@nativescript/firebase\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n
      \n
    • dev will be selected if you run with either --env.dev, --env.development or --env.staging flags.
      • \n
    • prod will be selected if you run with either --env.prod or --env.production.
      • \n
    \n

    Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

    \n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-pdf-view":{"name":"@finanzritter/nativescript-pdf-view","version":"3.0.3","license":"MIT","readme":"

    NativeScript PDFView

    \n

    \"npm\"\n\"npm\"

    \n

    :construction: Work in progress

    \n

    This package was forked from the unmaintained package\nmadmas/nativescript-pdf-view which in turn is a\nfork of Merott/nativescript-pdf-view. We are\ncurrently cleaning up and updating the code.

    \n
    \n

    A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

    \n

    This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

    \n

    My aim is to keep the features consistent across iOS and Android.

    \n

    Installation

    \n
    tns plugin add @finanzritter/nativescript-pdf-view
    \n

    Usage

    \n

    Vanilla NativeScript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pdf=\"@finanzritter/nativescript-pdf-view\"
      loaded=\"pageLoaded\">
      <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
    </Page>
    \n

    Angular NativeScript

    \n
    import { PDFView } from '@finanzritter/nativescript-pdf-view';
    import { registerElement } from 'nativescript-angular';
    registerElement('PDFView', () => PDFView);
    \n
    <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
    \n

    Vue.js NativeScript

    \n
    import Vue from 'nativescript-vue';
    Vue.registerElement('PDFView', () => require('@finanzritter/nativescript-pdf-view').PDFView)
    \n
    <PDFView :src=\"pdfUrl\" :enableAnnotationRendering=\"true\" />
    \n

    Demo

    \n

    Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

    \n

    Demo Vue

    \n

    Check out the demo-vue folder for a demo application built with Vue.js using this plugin. You can run the demo by executing npm run demo-vue.ios and npm run demo-vue.android from the root directory of the project.

    \n

    Credits

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@viostec/nativescript-helloworld":{"name":"@viostec/nativescript-helloworld","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript nativescript-helloworld

    \n
    ns plugin add @viostec/nativescript-helloworld
    \n

    Usage

    \n

    Plugin contém a função helloWorld()

    \n
    import { NativescriptHelloworld } from '@viostec/nativescript-helloworld';

    const ns = new NativescriptHelloworld();
    ns.helloWorld();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-context-apis":{"name":"nativescript-context-apis","version":"4.1.3","license":"Apache-2.0","readme":"

    NativeScript Context APIs

    \n

    \"npm\"\n\"npm\"\n\"Build\n\"DOI\"

    \n

    Painless access to contextual information for your NativeScript apps. Does your app need to know where are your users located? See the Wi-Fi APs that surround them? Maybe the nearby BLE devices? Or perhaps which kind of activities are they doing? If the answer to any of these questions is yes, then, this is your plugin.

    \n

    Currently we offer:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Information sourceDescriptionAndroidiOS
    Current user location and location stream (with distance filtering)Coarse- and fine-grained location reporting. We offer the functionality set by the nativescript-geolocation plugin, extending it with RxJS Observable streams for location stream. By obtaining user locations wrapped in an Observable, you'll able to filter them, take the best one among a small amount or control the stream quite easily by means of the RxJS Operators.✅✅
    Coarse- and medium-grained human activity detectionCoarse activity detection (user being still, walking, running, riding a bike or on a vehicle) will notify your app when the user starts or ends an activity and when did that happen. Medium grained detection will allow you to specify the detection interval and leaves for you in-activity filtering. For example, the plugin will report a transition from being in a vehicle to being still when the vehicle stops at a traffic light, thing that does not happen with the coarse activity detection mechanism. More info here.✅Planned
    List current nearby Wi-Fi APs (a.k.a Wi-Fi fingerprinting) and obtain fingerprint updatesSimple and batched Wi-Fi fingerprint reporting. We offer two ways of obtaining updates regarding nearby Wi-Fi APs: at a fixed, faster rate (with duplicates) and at the minimum slower rate which ensures all reported scans are new. The later either can be configured to offer a continuous flow of single scans (no grouping) or to provide scans in batches of 2 (intermediate grouping) or 4 (maximum grouping) fingerprints, complying with the latest limitations of the Android OS. Similarly to location updates, wifi scans can be delivered through RxJS Observable, hence allowing all the powerful RxJS Operators to be applied on top of them.✅❌
    List current nearby BLE devices and obtain updates regarding their presenceSimple and batched BLE scan reporting. The interval and the mode of the scan can be configured, making it suitable for multiple use cases. By combining a scanning of 0 reporting interval with a low latency mode, devices can be reported as soon as they are detected. Whilst more energy-efficient strategies are possible with larger reporting intervals and low power usage modes. Equally to location and Wi-Fi fingerprint updates, BLE scan updates are delivered through RxJS Observable, thus offering a lot of flexibility to process the list of detected devices.✅❌
    \n

    What we plan to offer in the future:

    \n
      \n
    • Low level access to on-device sensors (accelerometer, gyroscope, compass, etc.).
      • \n
    • Human activity detection in iOS too.
      • \n
    • A whole new fine-grained human activity detection mechanism, based on real-time sensor monitoring.
      • \n
    • User location reverse geocoding.
      • \n
    • Weather at current user location.
      • \n
    \n

    Prerequisites

    \n

    Android only

    \n
    \n

    Android SDK 22 (5.1) is required as a minimum due to the dependency of this plugin on @triniwiz/nativescript-couchbase

    \n
    \n

    Google Play Services conflicts

    \n

    Given that we rely on nativescript-geolocation and use Google Play Services APIs for activity detection on Android devices, you might find Google Play Services version conflicts with other installed plugins.

    \n

    In order to avoid them, we advise you to force a specific Google Play Services version. For a better human activity detection functionality, version 17 or above is highly recommended. In order to do so, please, indicate the Google Play Services Version number in your app/App_Resources/Android/before-plugins.gradle file (if the file does not exist, just create it):

    \n
    android {  
      // other things here

      project.ext {
        googlePlayServicesVersion = \"17.+\"
      }
    }
    \n

    Permissions

    \n

    Next, for each one of the information sources that this plugin offers, you can see the permissions that need to be added to you app's AndroidManifest.xml located inside the App_Resources/Android/src/main directory.

    \n
    \n

    Note: If your app is expected to use more than one of the information sources offered by this plugin, we advise to avoid just copying and pasting the content of each of the following sections inside your application manifest. Check twice for duplicated permissions (e.g., location permissions necessary for both location and Wi-Fi to work) to avoid possible manifest merging errors.

    \n
    \n

    Click on each of the collapsible sections bellow to see the specific permissions required by each information source:

    \n
    \nGeolocation\n

    In order to access geolocation in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

    \n
    <!-- Always include this permission if your app needs location access -->
    <!-- This permission is for \"approximate\" location data -->
    <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />

    <!-- Include only if your app benefits from precise location access. -->
    <!-- This permission is for \"precise\" location data -->
    <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />

    <!-- Required only when requesting background location access on Android 10 (API level 29) and higher. -->
    <uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" />
    \n

    More information can be found in the Android docs here.

    \n
    \n

    Source: https://github.com/NativeScript/nativescript-geolocation

    \n
    \n
    \n
    \nHuman activity detection\n

    In order to receive human activity changes in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

    \n
    <!-- The following two permissions are required if your app wants to receive human activity changes -->
    <uses-permission android:name=\"com.google.android.gms.permission.ACTIVITY_RECOGNITION\"/>
    <uses-permission android:name=\"android.permission.ACTIVITY_RECOGNITION\"/>
    \n

    More information can be found in the Android docs here.

    \n
    \n
    \nWi-Fi scan updates\n

    In order to receive Wi-Fi scan updates in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

    \n
    <!-- ALL the following permissions are required in order to ask and retrieve Wi-Fi scan updates -->
    <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />
    <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
    <uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>
    <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>
    \n

    More information can be found in the Android docs here.

    \n
    \n
    \nBLE scan updates\n

    In order to receive BLE scan updates in Android, you'll need to add the following permission(s) to your app's AndroidManifest.xml:

    \n
    <!-- ALL the following permissions are required in order to ask and retrieve BLE scan updates -->
    <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />
    <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />
    <uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>
    <uses-permission android:name=\"android.permission.BLUETOOTH_SCAN\"/>
    \n

    More information can be found in the Android docs here.

    \n

    Additionally, the BLE scanning API uses the well-known scanning library developed by Nordic Semiconductors. To ensure this library is only included when the BLE scanning apis are meant to be accessed. To do that, you'll have to update your app's app.gradle file located inside the App_Resources/Android/src folder as follows:

    \n
    // Uncomment
    dependencies {
        implementation 'no.nordicsemi.android.support.v18:scanner:1.6.0'
    }
    \n
    \n

    Installation

    \n

    Run the following command in your project's root folder.

    \n

    NS7+:

    \n
    ns plugin add nativescript-context-apis
    \n

    NS6:

    \n
    tns plugin add nativescript-context-apis@1
    \n

    (Optional) You'll need RxJS also to properly work with geolocation streams

    \n

    NS7+:

    \n
    npm install rxjs --save
    \n

    NS6:

    \n
    npm install rxjs@6 --save
    \n

    Usage

    \n

    For human activity detection only

    \n

    For activity detection to properly work, we need to wire native and JavaScript/TypeScript code somewhere.

    \n

    The best place to do it is in your app's entry point script. You'll need to add a couple of lines to it:

    \n
    // app.ts / main.ts
    // TypeScript App:
    import * as app from \"tns-core-modules/application\";
    // or Angular App:
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { AppModule } from \"./app/app.module\";

    // NativeScript Task Context APIs plugin import
    // (always between imports and app initialization)
    import { contextApis } from \"nativescript-context-apis\";

    contextApis.init().catch((err) => {
      // You can catch initialization errors here
    });

    // TypeScript App:
    app.run({ moduleName: \"app-root\" });
    // Angular App:
    platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n

    Geolocation

    \n

    In case you want to obtain geolocation updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

    \n
    import { contextApis } from \"nativescript-context-apis\";

    async function checkGeolocationAccessStatus(): Promise<void> {
        const provider = contextApis.geolocationProvider;
        const isReady = await provider.isReady();
        if (!isReady) {
          await provider.prepare();
        }
    }
    \n

    Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current user's location or a stream of locations:

    \n
    import { contextApis } from \"nativescript-context-apis\";

    // You can get the current location like this
    async function printCurrentLocation() {
        const provider = contextApis.geolocationProvider;
        const location = await provider.acquireLocation({
                highAccuracy: true, // Accuracy is high by default
                timeout: 5000, // You can also specify the operation timeout (highly advised)
            });
        console.log(\"Current location:\", location);
    }

    // Or a location stream
    import { Subscription } from \"rxjs\";

    async function printLocationUpdates(): Promise<Subscription> {
        const provider = contextApis.geolocationProvider;
        
        const stream = provider.locationStream({
              highAccuracy: true, // Again, accuracy is high by default
              stdInterval: 1000, // The location fetch interval
              minInterval: 100, // Opportunistic interval (another app asked for a location)
              timeout: 5000, // You can also specify the operation timeout (highly advised)
              maxAge: 60000, // And filter-out old locations
          });

        return stream.subscribe({
            next: (location) =>
                console.log(\"New location acquired!:\", location),
            error: (error) =>
                console.error(\"Location updates could not be acquired:\", error)
        });
    }
    \n

    Human activity detection

    \n

    In case you want to obtain coarse grained human activity changes, first you'll need to check if you have permissions to do so and if not, ask them for as follows:

    \n
    import { contextApis } from \"nativescript-context-apis\";
    import { Resolution } from \"nativescript-context-apis/activity-recognition\";

    async function checkActivityRecognitionStatus(): Promise<void> {
        const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);
        const isReady = recognizer.isReady();
        if (!isReady) {
            console.log(
                `Up to prepare coarse-grained activity recognizer...`
            );
            await recognizer.prepare();
        }
        console.log(`Coarse-grained activity recognizer is ready`);
    }
    \n
    \n

    Note: If you want to use the medium-grained recognizer, just replace Resolution.LOW with Resolution.MEDIUM.

    \n
    \n

    Then you will be able to add or remove activity change listeners.

    \n
    import { contextApis } from \"nativescript-context-apis\";
    import { Resolution } from \"nativescript-context-apis/activity-recognition\";

    const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);

    // Register a listener
    const listenerId = recognizer.listenActivityChanges((activityChange) => {
      console.log(\"ActivityChange:\", activityChange);
    });
    console.log(`Coarse-grained activity recognizer has registered a listener (id: ${listenerId})`);

    // ...
    // Somewhere else
    // ...

    // Deregister a concrete listener
    recognizer.stopListening(listenerId);
    // Or all of them
    recognizer.stopListening();
    \n

    After registering your listeners, you will be all set to indicate the activity recognizer to start or stop recognizing activity changes

    \n
    import { contextApis } from \"nativescript-context-apis\";
    import { Resolution } from \"nativescript-context-apis/activity-recognition\";

    const recognizer = contextApis.getActivityRecognizer(Resolution.LOW);

    // Start recognizing
    recognizer.startRecognizing();

    // ...
    // Somewhere else
    // ...

    // Stop recognizing
    recognizer.stopRecognizing();
    \n
    \n

    Note: Thanks to plugin design recognition state will be kept even if your app gets closed, or the device gets rebooted. It is safe to call multiple times to startRecognizing method. If you want to change your start parameters, stop recognizing first. It is also safe to call multiple times to stopRecognizing method, even if the recognizer is not running.

    \n
    \n

    Nearby Wi-Fi APs updates

    \n

    In case you want to obtain Wi-Fi scan updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

    \n
    import { contextApis } from \"nativescript-context-apis\";

    async function checkWifiScanAccessStatus(): Promise<void> {
        const provider = contextApis.wifiScanProvider;
        const isReady = await provider.isReady();
        if (!isReady) {
          await provider.prepare();
        }
    }
    \n

    Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current nearby Wi-Fi APs' information or a stream of Wi-Fi scan updates:

    \n
    import { contextApis } from \"nativescript-context-apis\";

    // You can get the current nearby Wi-Fi APs' information like this
    async function printCurrentNearbyWiFiAPs() {
        const provider = contextApis.wifiScanProvider;
        const scanResult = await provider.acquireWifiFingerprint(
                true // Ensures the scan result is new (true by default), 
                     // thus adhering to Android OS Wi-Fi scanning limits: 
                     // https://developer.android.com/guide/topics/connectivity/wifi-scan#wifi-scan-throttling
            );
        console.log(\"Current nearby Wi-Fi APs:\", scanResult);
    }

    // Or a Wi-Fi scan updates stream
    import { Subscription } from \"rxjs\";
    import { FingerprintGrouping } from \"nativescript-context-apis/wifi\";

    async function printWifiScanUpdates(): Promise<Subscription> {
        const provider = contextApis.wifiScanProvider;
        
        const stream = provider.wifiFingerprintStream({
            ensureAlwaysNew: true, // Identical in purpose to the parameter in acquireWifiFingerpint()
            grouping: FingerprintGrouping.NONE, // Configure Wi-Fi scan updates batching (see API bellow)
            continueOnFailure: true, // Determines if the stream has to report any scanning error and close
          });

        return stream.subscribe({
            next: (fingerprint) =>
                console.log(\"New wifi scan result!:\", fingerprint),
            error: (error) =>
                console.error(\"Wifi scan result could not be acquired:\", error),
        });
    }
    \n

    Nearby BLE devices updates

    \n

    In case you want to obtain BLE scan updates, first you'll need to check if you have permissions to do so and if not, ask for them as follows:

    \n
    import { contextApis } from \"nativescript-context-apis\";

    async function checkBleScanAccessStatus(): Promise<void> {
        const provider = contextApis.bleScanProvider;
        const isReady = await provider.isReady();
        if (!isReady) {
          await provider.prepare();
        }
    }
    \n

    Once done (keep in mind that isReady() and prepare() methods are asynchronous), you'll be able to ask for current nearby BLE devices' information or a stream of BLE scan updates:

    \n
    import { contextApis } from \"nativescript-context-apis\";
    import { BleScanMode } from \"nativescript-context-apis/ble\";

    // You can get the current nearby BLE devices' information like this
    async function printCurrentNearbyBleDevices() {
        const provider = contextApis.bleScanProvider;
        const scanResult = await provider.acquireBleScan({
            scanTime: 5000, // (optional) when not specified it will wait until seeing a device and inmediatelly return, 
                            // otherwise it accumulates the seen devices and outputs after the scan time finishes.
                            // It may throw a timeout when used in conjunction with a list of iBeacon UUIDs 
                            // (in case no known beacon has been detected in the meantime)  
            scanMode: BleScanMode.BALANCED, // (optional) Can be LOW_POWER or LOW_LATENCY too. BALANCED by default
            iBeaconUuids: [
                // (optional) add a list of iBeacon UUIDs if you'    re just looking for known beacons
            ],
        });
        console.log(\"Current nearby BLE devices:\", scanResult);
    }

    // Or a BLE scan updates stream
    import { Subscription } from \"rxjs\";

    async function printWifiScanUpdates(): Promise<Subscription> {
        const provider = contextApis.bleScanProvider;
        
        const stream = provider.bleScanStream({
            reportInterval: 2000, // (optional) when not specified it will output a result as soon as a device is seen, 
                                  // otherwise it accumulates the detected devices and outputs when told
            scanMode: BleScanMode.LOW_LATENCY, // (optional) same as for the acquire method
            iBeaconUuids: [
                // (optional) Same as for the acquire method
            ],
        })

        return stream.subscribe({
            next: (bleScanResult) =>
                console.log(
                    `New ble scan result!: ${JSON.stringify(bleScanResult)}`
                ),
            error: (error) =>
                console.error(`Ble scan result could not be acquired: ${error}`),
        });
    }
    \n
    \n

    Note: Check plugin demo app for further usage details

    \n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    init()Promise<void>Meant to be called on application start. Only needed if your app listens to human activity changes
    geolocationProviderGeolocationProviderProperty which gives access to the geolocation provider singleton
    getActivityRecognizer(resolution: Resolution)ActivityRecognizerMeant to be called on application start. Only needed if your app listens to human activity changes
    wifiScanProviderWifiScanProviderProperty which gives access to the Wi-Fi scan provider singleton
    bleScanProviderBleScanProviderProperty which gives access to the BLE scan provider singleton
    \n

    Click on each of the collapsible sections bellow to see more API details for each information source:

    \n
    \nGeolocation access\n

    Geolocation

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    latitudenumberLocation's latitude
    longitudenumberLocation's longitude
    altitudenumberLocation's altitude
    horizontalAccuracynumberLocation's horizontal accuracy (in meters)
    verticalAccuracynumberLocation's vertical accuracy (in meters)
    speednumberSpeed by the time of the location fix (in m/s)
    directionnumberLocation bearing (in degrees)
    timestampDateTime of the location fix
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    distance(to: Geolocation OR GeolocationLike)numberAllows to check the distance from a geolocation to another or a GeolocationLike object
    \n

    GeolocationLike (Interface)

    \n

    Same as Geolocation, but only latitude and longitude are mandatory. The rest of the attributes are optional.

    \n

    Geolocation acquire options

    \n

    Before requesting user's current location some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    highAccuracybooleanIndicate if high accuracy (battery consuming) geolocation should be used. True by default
    timeoutnumberLocation fix maximum wait time. 5 minutes by default
    allowBackgroundboolean(iOS only) indicate if the location is going to be collected in the background. False by default
    \n
    \n

    Note: These options are identical (only the name changes) to the ones from nativescript-geolocation. Check plugin docs in case of doubt.

    \n
    \n

    Geolocation stream options

    \n

    Before requesting user's location updates some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    highAccuracybooleanIndicate if high accuracy (battery consuming) geolocation should be used. True by default
    distanceFilternumberThe distance in meters that the user has to cover before reporting a new location. None by default
    stdIntervalnumber(Android only) The standard location fetch interval (in milliseconds). 1 minute by default
    minIntervalnumber(Android only) Opportunistic location report interval (in milliseconds). 5 seconds by default. Used when another app requests the location of the user at a higher interval
    maxAgenumberHow old at a maximum reported locations can be (in milliseconds from Date.now()). Unlimited by default
    timeoutnumberLocation fix maximum wait time. 5 minutes by default
    allowBackgroundboolean(iOS only) indicate if the location is going to be collected in the background. False by default
    saveBatteryboolean(iOS only) indicate location reporting should be paused when app is no longer visible. True by default
    \n
    \n

    Note: These options are identical (only the name changes) to the ones from nativescript-geolocation. Check plugin docs in case of doubt.

    \n
    \n

    GeolocationProvider

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
    prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
    acquireLocation(options: AcquireOptions)Promise<Geolocation>Allows to obtain user's current location
    locationStream(options: StreamOptions)Observable<Geolocation>Allows to actively obtain user's location updates
    \n
    \n
    \nHuman activity recognition\n

    Available recognizer resolutions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    Resolution.LOWCoarse-grained activity recognition. Activity changes are delivered in a push-based manner.
    Resolution.MEDIUMMedium-grained activity recognition. Activity changes are queried at a configurable delay
    Resolution.HIGHAvailable soon
    \n

    Available human activities

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    HumanActivity.STILLNo significant movement has been detected
    HumanActivity.WALKINGLow frequency on-foot movements
    HumanActivity.RUNNINGHigh frequency on-foot movements
    HumanActivity.ON_BICYCLEThe device is worn while riding a bicycle
    HumanActivity.IN_VEHICLEThe device is commuting at a high speed
    HumanActivity.TILTINGDevice's angle has changed noticeably
    \n

    Available activity transitions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    Transition.STARTEDThe related human activity has started
    Transition.ENDEDThe related human activity has ended
    \n

    ActivityChange

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    typeHumanActivityThe human activity whose change has been detected
    transitionTransitionIndicates if the activity has started or ended
    confidencenumberIf the underlying recognizer supports it, the degree of confidence of the detected activity (from 0 to 1)
    timestampDateIndicates when was the activity change detected
    \n

    Activity recognizer StartOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    detectionIntervalnumber(Optional) Allows to specify recognizer detection interval (ignored in Resolution.LOW due to its push-based nature)
    \n

    ActivityRecognizer

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    isReady()booleanAllows to check if the activity recognizer is ready or not (i.e., required permissions have been granted)
    prepare()Promise<boolean>Allows to prepare the activity recognizer for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
    setup()Promise<void>For internal usage only. Allows to adjust the recognizer to the previous state before the app was closed
    startRecognizing(options?: StartOptions)Promise<void>Tell the activity recognizer to start working
    stopRecognizing()Promise<void>Tell the activity recognizer to stop working
    listenActivityChanges(callback: (activityChange: ActivityChange) => void)numberAdd an activity changes listener
    stopListening(listenerId?: number)voidRemove an activity changes listener. If no listener number is passed by, all the listeners will be removed instead
    \n
    \n
    \nNearby Wi-Fi APs' information access\n

    WifiFingerprint

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    seenArray<WifiApInfo>The list of APs (and their information) which have been seen during this scan
    isNewbooleanIndicates if the fingerprint results from a successful Wi-Fi scan or comes from a cached result (e.g., when OS throttling enters into play)
    timestampDateThe timestamp at which the fingerprint has been generated. Please note, two identical fingerprints (one new, and the other cached) can have different timestamps and still be the same fingerprint
    \n

    WifiApInfo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    ssidstringAP SSID (can be empty in case the AP is not broadcasting its SSID)
    bssidstringAP BSSID (MAC address)
    capabilitiesstringA list containing the AP security capabilities
    frequencynumberThe frequency in which the AP has been seen
    centerFreq0numberSee Android docs
    centerFreq1numberSee Android docs
    bandwidthChannelBandwidthThe bandwidth the AP is using to broadcast (see linked enum to know the possible supported values)
    standardWifiStandardThe Wi-Fi standard used by the detected AP (see linked enum to know the possible supported values)
    ageMicrosnumberThe number of microseconds (counting from phone boot) after which this AP has been seen
    chainsInfoWifiChainInfoInformation of each of the links used by the device to connect to this specific AP (see linked interface for more)
    rssinumberThe received signal level with which this app has been seen during the scan
    \n

    ChannelBandwidth

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    ChannelBandwidth.UNSPECIFIEDThe channel bandwidth cannot be discerned by the phone (hardware or software limitation)
    ChannelBandwidth.MHZ2020 MHz bandwidth
    ChannelBandwidth.MHZ4040 MHz bandwidth
    ChannelBandwidth.MHZ8080 MHz bandwidth
    ChannelBandwidth.MHZ160160 MHz bandwidth
    ChannelBandwidth.MHZ80_8080+80 MHz bandwidth
    ChannelBandwidth.MHZ320320 MHz bandwidth
    \n

    WifiStandard

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    WifiStandard.UNKNOWNThe Wi-Fi standard in which the AP is broadcasting is not known (software limitation)
    WifiStandard.LEGACY802.11a/b/g
    WifiStandard.N802.11n
    WifiStandard.AC802.11ac
    WifiStandard.AX802.11ax
    WifiStandard.AD802.11ad
    WifiStandard.BE802.11be
    \n

    WifiChainInfo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idnumberSequential ID number for the chain (starts from 0)
    rssinumberReceived signal strength level this specific chain
    \n

    Wi-Fi fingerprint acquire parameters

    \n

    Before requesting current information about the nearby Wi-Fi APs some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    ensureIsNewbooleanEnsures the scan result is new (true by default), thus adhering to Android OS Wi-Fi scanning limits
    \n

    Wi-Fi fingerprint stream options

    \n

    Before requesting updates on information about the nearby Wi-Fi APs some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    ensureAlwaysNewbooleanEnsures each scan result in the stream is always new (true by default), thus adhering to Android OS Wi-Fi scanning limits
    groupingFingerprintGrouping(Only meant to be used with ensureAlwaysNew: true). Allows to indicate if the scan results must be batched and the size of the batch (NONE by default, i.e., batch size: 1). See linked enum for more details. Again conditioned by Android OS Wi-Fi scan throttling. Note, although batching becomes applied, scans are reported as they come
    intervalnumber(Only meant to be used with ensureAlwaysNew: false). Allows to manually indicate the interval between the Wi-Fi scans (in milliseconds). Cannot be lower than (5000, i.e., 5 seconds). If scan throttling is not disabled in phone's developer settings. The max frequency at which a new fingerprint will be retrieved is every 30 seconds
    continueOnFailurebooleanIndicates if scanning failures should be reported via the stream (breaking it) or not
    \n

    FingerprintGrouping

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    FingerprintGrouping.NONEApply no fingerprint batching during the scan (report interval of new fingerprints: 30s)
    FingerprintGrouping.INTERMEDIATEPerform two consecutive fingerprint scans (separated in time by 5s) (report interval of new fingerprints: 60s)
    FingerprintGrouping.MAXPerform four consecutive fingerprint scans (separated in time by 5s) (report interval of new fingerprints: 2 minutes)
    \n

    WifiScanProvider

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
    prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
    acquireWifiFingerprint(ensureIsNew: boolean)Promise<WifiFingerprint>Allows to obtain information about the nearby Wi-Fi APs (fingerprinting)
    wifiFingerprintStream(options: StreamOptions)Observable<WifiFingerprint>Allows to actively obtain information about the nearby Wi-Fi APs (fingerprinting)
    \n
    \n
    \nNearby BLE devices' information access\n

    BleScanResult

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    seenArray<BleDeviceInfo>The list of BLE devices (and their information) which have been seen during this scan
    timestampDateThe timestamp at which this scan was finished.
    \n

    BleDeviceInfo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    addressstringDevice's MAC address
    namestringDevice's name (can be empty)
    advertiseFlagsnumberThe advertising flags indicating the discoverable mode and capability of the device (-1 when not set)
    advertisingSidnumberDevice's advertising SID (255 when not present)
    advertisingIntervalnumberRanges from 6 (7.5ms) to 65536 (81918.75ms), in units of 1.25ms (0 when not present)
    txPowerLevelnumberTransmission power level of the packet in dBm (-2147483648, a.k.a -inf, when not set). The difference between the txPowerLevel and the rssi can be used to calculate the path loss
    txPowernumberTransmission power in dBm. Ranges from -127 to 126 (127 when not present)
    primaryPhyPhyTypeCan be: 1M, coded or none (when the device does not support retrieving this information)
    secondaryPhyPhyTypeCan be: 2M, coded or none (when either the device does not support retrieving this information or the BLE device does not use a secondary physical channel)
    serviceUuidsArray<string>A set of BLE service UUIDs offered by the device (do not confuse with iBeacon UUIDs, these come later)
    legacybooleanWhen true, indicates that the detected device's spec is prior to the BLEv5 specification
    connectablebooleanWhen true, indicates that the detected device accepts input connections
    iBeaconIBeaconDataUndefined when the detected device does not broadcast iBeacon data. If defined, contains an object with the UUID, Major and Minor numbers of the beacon
    rssinumberThe received signal level with which this app has been seen during the scan
    ageNanosnumberThe number of nanoseconds (counting from phone boot) after which this device has been seen
    \n

    PhyType

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    PhyType.UNUSEDThe physical channel is not in use or the phone cannot detect its type (Android SDK < 26)
    PhyType.LE_1MThe device uses the primary physical channel
    PhyType.LE_2MThe device uses the secondary physical channel
    PhyType.LE_CODEDThe device uses the respective physical channel with a mask
    \n

    IBeaconData

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    uuidstringThe UUID of the iBeacon deployment
    majornumberThe iBeacon major number used to identify a beacon within a deployment
    minornumberThe iBeacon minor number used to identify a beacon within a deployment
    \n

    BLE scan acquire options

    \n

    Before requesting current information about the nearby BLE devices some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    scanTimebooleanIndicates the amount of time to wait for while scanning. When 0 it waits until the first device is detected. Note: when is 0 and at least one iBeacon deployment UUID has been set it will wait until the firs beacon is seen. Use it with care
    scanModeBleScanModeIndicates the scan mode to use (see linked enum for more information)
    iBeaconUuidsArray<string>Optionally indicate a list of iBeacon deployment UUIDs to just report scan results containing them
    \n

    BleScanMode

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeDescription
    BleScanMode.LOW_POWERScans for 0.5s and waits for 4.5s before running another scan. Good for using it in combination with scan times and intervals greater than 5s.
    BleScanMode.LOW_LATENCYScans using the highest frequency, with no waits. Very power hungry, use with care
    BleScanMode.BALANCEDIn the middle of the other two. Scans for 2s and waits for 3s. Great reliability / battery usage balance
    \n

    BLE scan stream options

    \n

    Before requesting updates on information about the nearby BLE devices some options can be customized in order to achieve the expected result.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    reportIntervalbooleanIndicates the amount of time to wait between reporting the list of the devices which have been detected since the last successful scan. When 0 it notifies right after seeing a new device. Note: the reporting frequency can end up being quite high. Use it with care
    scanModeBleScanModeIndicates the scan mode to use (see linked enum for more information)
    iBeaconUuidsArray<string>Optionally indicate a list of iBeacon deployment UUIDs to just report scan results containing them
    \n

    BleScanProvider

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method signatureReturn typeDescription
    isReady()booleanAllows to check if the provider is ready or not (i.e., required permissions have been granted)
    prepare()Promise<boolean>Allows to prepare the provider for its usage (i.e., ask the required permissions). WARNING! Only call this method if your app is visible to the user
    acquireBleScan(options: AcquireOptions)Promise<BleScanResult>Allows to obtain information about the nearby BLE devices as soon as one is detected or after the specified scan time
    wifiFingerprintStream(options: StreamOptions)Observable<BleScanResult>Allows to actively obtain information about the nearby BLE devices as soon as they are detected or in batches when indicating a report interval
    \n
    \n

    Plugin authors

    \n\n \"Alberto\n\n\n \"Miguel\n\n

    Acknowledgements

    \n

    The development of this plugin has been made possible thanks to the Spanish Government. Concretely from, Spanish Ministry of Education, Culture and Sports (grant reference FPU17/03832), and “Programa Estatal de I+D+i Orientada a los Retos de la Sociedad" (reference RTI2018-099939-BI-00).

    \n

    This project is an open-sourced excerpt coming from SyMptOMS project at Geotec. Concretely, it has been heavily used in SyMptOMS mobile app for more than two years and contains all the lessons we have learned there.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/set-version":{"name":"@nativescript-community/set-version","version":"0.3.1","license":"ISC","readme":"

    nativescript-set-version

    \n

    \"License:

    \n

    This tool allows you to easily update the version of a Nativescript application.\nIt will update the following files if found:

    \n
      \n
    • ./package.json
      • \n
    • ./app/App_Resources/Android/src/main/AndroidManifest.xml
      • \n
    • ./app/App_Resources/Android/app/app.gradle
      • \n
    • ./app/App_Resources/iOS/Info.plist
      • \n
    \n

    Version number format

    \n

    In order to use this package, your project version must comply with the format described on semver.org.

    \n

    Setup and Usage

    \n

    There are two ways to install nativescript-set-version: globally and locally.

    \n

    Local Installation

    \n

    This is the recommended way to install nativescript-set-version.

    \n

    npm:

    \n
    npm install nativescript-set-version --save-dev
    \n

    yarn:

    \n
    yarn add nativescript-set-version --dev
    \n

    You can then use this command in your project directory to run nativescript-set-version:

    \n

    npm:

    \n
    $ npm run setVersion <version>
    -- or --
    $ npm run set-version <version>
    \n

    yarn:

    \n
    $ yarn setVersion <version>
    -- or --
    $ yarn set-version <version>
    \n

    Global Installation

    \n

    This installation method allows you to use nativescript-set-version in any project.

    \n

    npm:

    \n
    npm install -g nativescript-set-version
    \n

    yarn:

    \n
    yarn global add nativescript-set-version
    \n

    You can then use this command in your project directory to run nativescript-set-version:

    \n
    setVersion <version>
    -- or --
    set-version <version>
    \n

    Behaviour

    \n

    When invoked, nativescript-set-version will make the following changes to your project files:

    \n

    Update Package Version

    \n

    The version attribute in package.json will be updated with the specified version.

    \n

    Update Android Project Version

    \n

    It will update the version name and the version code in both app.gradle and AndroidManifest.xml.

    \n

    About AndroidManifest.xml

    \n

    Version information should not be in the AndroidManifest.xml since this information is overridden by app.gradle.

    \n

    See https://developer.android.com/studio/publish/versioning for further informations.

    \n

    For that reason nativescript-set-version will only write in the AndroidManifest.xml if android:versionCode and/or android:versionName are already in the file.

    \n

    Update iOS Project Version

    \n

    It will update the CFBundleShortVersionString and the CFBundleVersion in Info.plist.

    \n

    How the version code and CFBundleVersion are updated

    \n

    The Android version code represents your version number as an integer. This\npackage uses the following format to generate this integer:

    \n
    <MAJOR><MINOR ON 2 DIGITS><PATCH ON 2 DIGITS><BUILD NUMBER>
    \n

    For instance, the first time you call set-version 3.1.4, it will produce the version code 301041.

    \n

    If you call the command with the same version a second time, it will increment the build number, to produce 301042.

    \n

    This also applies if, for instance, you call set-version 3.1.4-rc.1, and then set-version 3.1.4-rc.2.

    \n

    As for the CFBundleVersion on iOS, it will produce a string in the format <MAJOR>.<MINOR>.<PATCH>.<BUILD NUMBER>.

    \n

    Example:

    \n
    $ yarn set-version 1.0.0-rc.1
    # Output
    # ...
    # Will set android version code to 100001
    # ...
    # Will set CFBundleVersion to 1.0.0.1
    $ yarn set-version 1.0.0-rc.2
    # Output
    # ...
    # Will set android version code to 100002
    # ...
    # Will set CFBundleVersion to 1.0.0.2
    $ yarn set-version 1.0.0
    # Output
    # ...
    # Will set android version code to 100003
    # ...
    # Will set CFBundleVersion to 1.0.0.3
    \n

    License

    \n

    This software uses the MIT license.

    \n

    Contributing

    \n

    You must use the following style guide:

    \n\n

    This project contains a linting config, you should setup eslint into your IDE with .eslintrc.js.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stripe-sdk":{"name":"nativescript-stripe-sdk","version":"1.2.0","license":"Apache-2.0","readme":"

    NativeScript Stripe-SDK

    \n
    \n

    This repo is based on @Osei Fortune's nativescript-stripe. Perfect job, Sir!

    \n
    \n

    IMPORTANT: Highly recomend using @Osei Fortune's\nnativescript-stripe

    \n

    The purpose of this plugin is to add some specific functionalities required by the app I work on. I have also wanted to use official nativescript-plugin-seed

    \n

    Implemented for iOS only - this plugin uses 11.3 Stripe's SDK.

    \n\n

    Installation

    \n
    tns plugin add nativescript-stripe-sdk
    \n

    Usage in Android

    \n

    Set API key

    \n

    Add this to the main *.module.ts file (app.module.ts)

    \n
    import * as application from 'tns-core-modules/application';
    import * as platform from 'tns-core-modules/platform';

    const stripeSdk = require('nativescript-stripe-sdk');

    application.on(application.launchEvent, () => {
      if (platform.isIOS) {
        stripeSdk.StripeSdk.setApiKey('yourAPIKey');
      }
    });
    \n

    Usage in UI

    \n
    <StripePaymentCardTextField
      (paymentCardTextFieldDidChange)=\"onPaymentCardTextFieldDidChange($event)\">
    </StripePaymentCardTextField>
    \n

    Example paymentCardTextFieldDidChange handler

    \n
    import { StripeSdk } from 'nativescript-stripe-sdk';

    ...

    onPaymentCardTextFieldDidChange(payload) {
      const isValid = StripeSdk.validateCard(payload.cardParams);

      if (isValid) {
        StripeSdk
          .createToken(payload.cardParams)
          .then(token => {
            console.log('Created token: ', token.toString());
          })
          .catch((error: Error) => {
            console.error('Create token error: ', error);
          });
      }
    }
    \n

    Usage in vanilla NS

    \n

    IMPORTANT: SDK API key needs to be set on app startup

    \n
    import { StripeSdk } from 'nativescript-stripe-sdk';

    application.on(application.launchEvent, () => {
        if (platform.isIOS) {
            StripeSdk.setApiKey('pk_test_u6EwgR7lHu8YKOqO5AOynNVj');
        }
    });
    \n

    Usage in UI

    \n
    <ui:StripePaymentCardTextField
      expDate=\"{{ date }}\"
      number=\"{{ number }}\"
      cvc=\"{{ cvc }}\"/>
    \n
     <ui:StripePaymentCardTextField
      paymentCardTextFieldDidChange=\"{{ callbackFn }}\"/>
    \n

    Check if given CC is valid (card of STPCardParams type)

    \n
    import { StripeSdk } from 'nativescript-stripe-sdk';

    const isValid = StripeSdk.validateCard(card);
    \n

    Generate stripe token

    \n

    IMPORTANT: valid stripe API key needs to be set on app startup

    \n
    import { StripeSdk } from 'nativescript-stripe-sdk';

    StripeSdk
       .createToken(card.cardParams)
       .then(token => { console.log(token); })
       .catch(error => { console.error(error); });
    \n

    API

    \n

    In XML:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    expDatenot setCC expiration date - typeof Date
    numbernot setCC number - typeof string
    cvcnot setCC expiration date - typeof string
    \n

    Running the demo app

    \n
    git clone git@github.com:piotrilski/nativescript-stripe-sdk.git
    cd src/
    npm run setup
    npm run demo.ios
    \n

    Running angular demo

    \n
    git clone git@github.com:piotrilski/nativescript-stripe-sdk.git
    cd src/
    npm run setup
    npm run demo.angular.ios
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sdk-utility":{"name":"nativescript-sdk-utility","version":"1.0.9","license":"Apache-2.0","readme":"

    NativeScript SDK Utility

    \n

    This plugin provides device specific functions that simplify your NativeScript apps.

    \n
      \n
    • getVersion(): Returns the current version of your app.
      • \n
    • getBuild(): Returns the current build of your app.
      • \n
    • is24HFormat(): Returns a boolean value that indicates if the device is using a 24H time format.
      • \n
    • formatDateTime(date?: Date, pattern?: string, locale?: string): Returns a date based on given pattern.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-sdk-utility
    \n

    Usage

    \n
    ```JavaScript\nvar utility = require('nativescript-sdk-utility');\n\nvar sdk = new utility.SDKUtility();\n\nvar version = sdk.getVersion();\nvar build = sdk.getBuild();\nvar is24H = sdk.is24HFormat();\nvar datetime = this.sdk.formatDateTime(new Date(), "MM/dd/yyyy h:mm");\n```)\n\n```TypeScript\nimport { SDKUtility } from 'nativescript-sdk-utility';\n\nexport class MyModel {\n    public version: string;\n    public build: string;\n    public is24H: boolean;\n\n    private sdk: SDKUtility;\n\n    constructor() {\n        super();\n\n        this.sdk = new SDKUtility();\n        this.version = this.sdk.getVersion();\n        this.build = this.sdk.getBuild();\n        this.is24H = this.sdk.is24HFormat();\n        this.datetime = this.sdk.formatDateTime(new Date(), "MM/dd/yyyy h:mm");\n    }\n}\n```\n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/background-http":{"name":"@nativescript/background-http","version":"6.0.0","license":"Apache-2.0","readme":"

    @nativescript/background-http

    \n
    ns plugin add @nativescript/background-http
    \n

    Usage

    \n

    The below attached code snippets demonstrate how to use @nativescript/background-http to upload single or multiple files.

    \n
    Note
    \n

    Call init before the app starts to initialize the http background service

    \n
    import { init } from '@nativescript/background-http';
    init();
    \n

    Uploading files

    \n

    Sample code for configuring the upload session. Each session must have a unique id, but it can have multiple tasks running simultaneously. The id is passed as a parameter when creating the session (the image-upload string in the code bellow):

    \n
    // file path and url
    var file = '/some/local/file/path/and/file/name.jpg';
    var url = 'https://some.remote.service.com/path';
    var name = file.substr(file.lastIndexOf('/') + 1);

    // upload configuration
    var bghttp = require('@nativescript/background-http');
    var session = bghttp.session('image-upload');
    var request = {
    \turl: url,
    \tmethod: 'POST',
    \theaders: {
    \t\t'Content-Type': 'application/octet-stream',
    \t},
    \tdescription: 'Uploading ' + name,
    };
    \n

    For a single file upload, use the following code:

    \n
    var task = session.uploadFile(file, request);
    \n

    For multiple files or to pass additional data, use the multipart upload method. All parameter values must be strings:

    \n
    var params = [
       { name: \"test\", value: \"value\" },
       { name: \"fileToUpload\", filename: file, mimeType: \"image/jpeg\" }
    ];
    var task = session.multipartUpload(params, request);
    \n

    In order to have a successful upload, the following must be taken into account:

    \n
      \n
    • the file must be accessible from your app. This may require additional permissions (e.g. access documents and files on the device). Usually this is not a problem - e.g. if you use another plugin to select the file, which already adds the required permissions.
      • \n
    • the URL must not be blocked by the OS. Android Pie or later devices require TLS (HTTPS) connection by default and will not upload to an insecure (HTTP) URL.
      • \n
    \n

    Upload request and task API

    \n

    The request object parameter has the following properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    urlstringThe request url (e.g.https://some.remote.service.com/path).
    methodstringThe request method (e.g. POST).
    headersobjectUsed to specify additional headers.
    descriptionstringUsed to help identify the upload task locally - not sent to the remote server.
    utf8boolean(Android only/multipart only) If true, sets the charset for the multipart request to UTF-8. Default is false.
    androidNotificationOnProgressTitlestringUse this to set the on progress title shown in the Android notifications center.
    androidNotificationOnProgressMessagestringUse this to set the on progress message shown in the Android notifications center.
    androidNotificationOnCompleteTitlestringUse this to set the on complete message shown in the Android notifications center.
    androidNotificationOnCompleteMessagestringUse this to set the on error title shown in the Android notifications center.
    androidNotificationOnErrorTitlestringUse this to set the on error title shown in the Android notifications center.
    androidNotificationOnErrorMessagestringUse this to set the on error message shown in the Android notifications center.
    androidNotificationOnCancelledTitlestringUse this to set the on cancelled title shown in the Android notifications center.
    androidNotificationOnCancelledMessagestringUse this to set the on cancelled message shown in the Android notifications center.
    androidAutoDeleteAfterUploadboolean(Android only) Used to set if files should be deleted automatically after upload.
    androidMaxRetriesnumber(Android only) Used to set the maximum retry count. The default retry count is 0. https://github.com/gotev/android-upload-service/wiki/Recipes#backoff
    androidAutoClearNotificationboolean(Android only) Used to set if notifications should be cleared automatically upon upload completion. Default is false. Please note that setting this to true will also disable the ringtones.
    androidRingToneEnabledboolean(Android only) Used to set if a ringtone should be played upon upload completion. Default is true. Please note that this flag has no effect when androidAutoClearNotification is set to true.
    androidNotificationChannelIDstring(Android only) Used to set the channel ID for the notifications.
    \n

    Note :- Android Notification titles/messages can be constructed with one of the following placeholder which will be replaced by the system .

    \n

    Replaced with the current upload rate/speed [upload_rate]

    \n

    Replaced with the current upload progress [upload_progress]

    \n

    Replaced with the elapsed time [upload_elapsed_time]

    \n

    The task object has the following properties and methods, that can be used to get information about the upload:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    uploadnumberBytes uploaded.
    totalUploadnumberTotal number of bytes to upload.
    statusstringOne of the following: error, uploading, complete, pending, cancelled.
    descriptionstringThe description set in the request used to create the upload task.
    cancel()voidCall this method to cancel an upload in progress.
    \n

    Handling upload events

    \n

    After the upload task is created you can monitor its progress using the following events:

    \n
    task.on(\"progress\", progressHandler);
    task.on(\"error\", errorHandler);
    task.on(\"responded\", respondedHandler);
    task.on(\"complete\", completeHandler);
    task.on(\"cancelled\", cancelledHandler); // Android only
    \n

    Each event handler will receive a single parameter with event arguments:

    \n
    // event arguments:
    // task: Task
    // currentBytes: number
    // totalBytes: number
    function progressHandler(e) {
        alert(\"uploaded \" + e.currentBytes + \" / \" + e.totalBytes);
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // error: java.lang.Exception (Android) / NSError (iOS)
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function errorHandler(e) {
        alert(\"received \" + e.responseCode + \" code.\");
        var serverResponse = e.response;
    }


    // event arguments:
    // task: Task
    // responseCode: number
    // data: string
    function respondedHandler(e) {
        alert(\"received \" + e.responseCode + \" code. Server sent: \" + e.data);
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function completeHandler(e) {
        alert(\"received \" + e.responseCode + \" code\");
        var serverResponse = e.response;
    }

    // event arguments:
    // task: Task
    function cancelledHandler(e) {
        alert(\"upload cancelled\");
    }
    \n

    Testing the plugin

    \n

    In order to test the plugin, you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. http://httpbin.org/post However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it:

    \n
    cd demo-server
    npm i
    node server 8080
    \n

    The above commands will start a server listening on port 8080. Remember to update the URL in your app to match the address/port where the server is running.

    \n
    \n

    Note: If you are using the iOS simulator then http://localhost:8080 should be used to upload to the demo server. If you are using an Android emulator, http://10.0.2.2:8080 should be used instead.

    \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pager-enduco":{"name":"nativescript-pager-enduco","version":"13.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Pager

    \n

    Install

    \n

    NativeScript 7x

    \n
      \n
    • tns plugin add nativescript-pager-enduco
      • \n
    \n

    NativeScript 6x

    \n
      \n
    • tns plugin add nativescript-pager
      • \n
    \n

    NativeScript 5x

    \n
      \n
    • tns plugin add nativescript-pager@9.x
      • \n
    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-pager@8.0.2
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-pager@7.2.3
      • \n
    \n

    NativeScript 2x

    \n
      \n
    • tns plugin add nativescript-pager@2.3.0
      • \n
    \n

    Usage

    \n

    Note v11+

    \n
    Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
    \n

    IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

    \n
    <pager:Pager items=\"{{items}}\" row=\"2\" id=\"pager\" spacing=\"2%\" peaking=\"10%\" transformers=\"scale\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <pager:Pager.itemTemplate>
                    <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                        <Label text=\"{{title}}\"/>
                        <Image row=\"1\" src=\"{{image}}\"/>
                    </GridLayout>
                </pager:Pager.itemTemplate>
    </pager:Pager>
    \n

    Multi Template

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" selectedIndex=\"5\" items=\"{{items}}\" row=\"4\" id=\"pager\" pagesCount=\"10\" showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
          <Pager.itemTemplates>
            <template key=\"even\">
              <GridLayout rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
            <template key=\"odd\">
              <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <StackLayout row=\"2\">
                  <Label text=\"{{image}}\"/>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
          </Pager.itemTemplates>
          <!-- <Pager.itemTemplate><GridLayout rows=\"auto,*\" columns=\"*\"><Label row=\"1\" text=\"{{title}}\"/><Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/></GridLayout></Pager.itemTemplate> -->
        </c:Pager>
    \n

    Static Views

    \n
    <c:Pager selectedIndexChange=\"selectedIndexChange\" row=\"4\" id=\"pager\"
                     showIndicator=\"true\" backgroundColor=\"lightsteelblue\">
                <c:PagerItem backgroundColor=\"red\">
                    <Label text=\"First\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"white\">
                    <Label text=\"Second\" ></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"black\">
                    <Label text=\"Third\" color=\"white\"></Label>
                </c:PagerItem>
                <c:PagerItem backgroundColor=\"green\">
                    <Label text=\"Fourth\"></Label>
                </c:PagerItem>
            </c:Pager>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue';
    import Pager from 'nativescript-pager/vue';

    Vue.use(Pager);
    \n
    <template>
        <Pager for=\"item in items\">
            <v-template>
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Label :text=\"item.title\" />
                    <Image  stretch=\"fill\" row=\"1\" :src=\"item.image\" />
                </GridLayout>
            </v-template>
            <v-template if=\"$odd\">
                <GridLayout class=\"pager-item\" rows=\"auto, *\" columns=\"*\">
                    <Image  stretch=\"fill\" :src=\"item.image\" />
                    <Label :text=\"item.title\" row=\"1\"/>
                </GridLayout>
            </v-template>
        </Pager>
    </template>
    \n

    Static Views

    \n
    <Pager height=\"100%\" :selectedIndex=\"1\">
      <PagerItem backgroundColor=\"red\"> <label text=\"First\"></label> </PagerItem>
      <PagerItem backgroundColor=\"white\"> <label text=\"Second\"></label> </PagerItem>
      <PagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </PagerItem>
      <PagerItem backgroundColor=\"green\"> <label text=\"Fourth\"></label> </PagerItem>
    </Pager>
    \n

    Angular

    \n
    import { PagerModule } from \"nativescript-pager/angular\";

    @NgModule({
        imports: [
        PagerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Angular v2

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </template>
    </Pager>
    \n

    Angular v4+

    \n
    <Pager
      [items]=\"items\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
    >
      <ng-template let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto, *\"
          columns=\"*\"
          backgroundColor=\"red\"
        >
          <label [text]=\"item.title\"></label>
          <image row=\"1\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Multi Template

    \n
     public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
      }
    \n
    <Pager
      row=\"1\"
      [items]=\"items | async\"
      [itemTemplateSelector]=\"templateSelector\"
      #pager
      [selectedIndex]=\"currentPagerIndex\"
      (selectedIndexChange)=\"onIndexChanged($event)\"
      class=\"pager\"
      backgroundColor=\"lightsteelblue\"
    >
      <ng-template pagerTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
        <GridLayout class=\"pager-item\" rows=\"auto,auto,*\" columns=\"*\">
          <label text=\"Even\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>

      <ng-template pagerTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
        <GridLayout
          class=\"pager-item\"
          rows=\"auto,auto,auto,*\"
          columns=\"*\"
          backgroundColor=\"white\"
        >
          <label text=\"Odd\"></label> <label row=\"1\" [text]=\"item.title\"></label>
          <StackLayout row=\"2\"> <label [text]=\"item.image\"></label> </StackLayout>
          <image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\"></image>
        </GridLayout>
      </ng-template>
    </Pager>
    \n

    Static Views

    \n
    <Pager
      backgroundColor=\"orange\"
      row=\"1\"
      #pager
      [selectedIndex]=\"1\"
      height=\"100%\"
    >
      <StackLayout *pagerItem backgroundColor=\"red\">
        <label text=\"First\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"white\">
        <label text=\"Second\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"black\">
        <label text=\"Third\" color=\"white\"></label>
      </StackLayout>
      <StackLayout *pagerItem backgroundColor=\"green\">
        <label text=\"Fourth\"></label>
      </StackLayout>
    </Pager>
    \n

    React

    \n
    import {$Pager} from 'nativescript-pager/react';
    return (
    <$Pager
                    height={{ unit: \"%\", value: 100 }}
                       selectedIndex={this.selectedIndex}
                       selectedIndexChange={this.selectedIndexChange.bind(this)}
                        items={this.items}
                         cellFactory={
                        (item, ref) => {
                            return (
                                <$StackLayout id={item.title} ref={ref}>
                                    <$Label text={item.title}/>
                                    <$ImageCacheIt stretch={'aspectFill'}
                                            src={item.image}/>
                                </$StackLayout>
                            );
                        }
                    }/>
    )
    \n

    Static Views

    \n
    return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
                               <$PagerItem backgroundColor={'red'}>
                                   <$Label text={'First'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'white'}>
                                   <$Label text={'Second'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'black'}>
                                   <$Label text={'Third'} color={new Color('white')}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'green'}>
                                   <$Label text={'Fourth'}/>
                               </$PagerItem>
                               <$PagerItem backgroundColor={'pink'}>
                                   <$Label text={'Fifth'}/>
                               </$PagerItem>
                           </$Pager>)
    \n

    Config

    \n
    <Pager cache=\"false\" disableSwipe=\"true\" disableAnimation=\"true\" selectedIndex=\"5\">
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"ios\"\"android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@roelandtsw/scanner-plugin-test":{"name":"@roelandtsw/scanner-plugin-test","version":"1.0.6","license":"Apache-2.0","readme":"

    @roelandtsw/scanner-plugin-test

    \n
    ns plugin add @roelandtsw/scanner-plugin-test
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tralves/shadowed-label":{"name":"@tralves/shadowed-label","version":"2.0.1","license":"Apache-2.0","readme":"

    @tralves/shadowed-label

    \n\n \"npm\"\n\n\n \"npm\"\n\n\n \"stars\"\n\n\n \"donate\"\n\n

    A NativeScript plugin that extends the <Label> UI widget by adding the text-shadow CSS property.

    \n
    \n

    This package only works on NativeScript >=7.0. You will find the NS 6 version here;

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    shadow examplessample from the playground
    \"\"\"\"
    \n

    Installation

    \n
    ns plugin add @tralves/shadowed-label
    \n

    Usage

    \n

    After installing the plugin, you can add the shadow to the shadowed label with the CSS syntax:

    \n

    text-shadow: <offset-x> <offset-y> <blur-radius> <color>

    \n

    E.g.

    \n
    .shadow1 {
        text-shadow: 1 1 3 blue;
    }

    .shadow2 {
        text-shadow: 10px 10px 10px rgba(100, 130, 200, 0.8);
    }
    \n

    You can also add the text shadow as a property (e.g. <ShadowedLabel textShadow="1 1 1 #55a">)

    \n

    iOS note: The blur radius appears to scatter the shadow more on iOS and on Android.

    \n

    NativeScript Plain

    \n

    IMPORTANT: Make sure you include xmlns:ui="@tralves/shadowed-label" on the Page element

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ui=\"@tralves/shadowed-label\">
      <StackLayout class=\"p-20\">
        <ui:ShadowedLabel
          class=\"h1 text-center\"
          text=\"title with CSS shadow\"
        />
        <ui:ShadowedLabel
          text=\"color shadow\"
          textShadow=\"2 10 4 rgb(255, 100, 100)\"
          fontStyle=\"italic\"
          fontSize=\"40\"
          class=\"m-b-20 text-center\"
        />
        <ui:ShadowedLabel
          class=\"m-t-20 c-black\"
          style    =\"text-shadow: 1 1 1 #55a\"
          textWrap=\"true\"
          text=\"Shadow in 'style'!\"
        />
      </GridLayout>
    </Page>
    \n

    CSS

    \n
    .h1 {
        text-shadow: 2 2 2 #aaa;
        font-weight: bold;
    }
    \n
    \n

    NativeScript Angular

    \n

    Add the following lines to app/app.module.ts:

    \n
    import { registerElement } from '@nativescript/angular';
    import { ShadowedLabel } from '@tralves/shadowed-label'; 

    registerElement('ShadowedLabel', () => ShadowedLabel);
    \n
    <ShadowedLabel
        row=\"0\"
        class=\"h1 text-center\"
        text=\"title with shadow\"
        textShadow=\"0 0 6 rgb(100, 100, 200)\"
    >    </ShadowedLabel>
    <ShadowedLabel
        row=\"1\"
        text=\"color shadow\"
        textShadow=\"2 10 4 rgb(255, 100, 100)\"
        fontStyle=\"italic\"
        fontSize=\"40\"
        class=\"m-b-20 text-center\"
    >    </ShadowedLabel>
    \n
    \n

    NativeScript Vue

    \n
    import Vue from 'nativescript-vue';
    Vue.registerElement('ShadowedLabel', () => require('@tralves/shadowed-label').ShadowedLabel);
    \n
    <shadowed-label
        text=\"color shadow\"
        textShadow=\"2 10 4 rgb(255, 100, 100)\"
        fontStyle=\"italic\"
        fontSize=\"40\"
        class=\"m-b-20 text-center\"
    />
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-environment-variables-hook":{"name":"nativescript-environment-variables-hook","version":"1.0.5","license":"Apache-2.0","readme":"

    Nativescript Environment Variable Hook

    \n

    This plugin adds a hook to find and replace environment variables within your AndroidManifest.xml, Info.plist and app.entitlements.

    \n

    Installation

    \n

    npm install nativescript-environment-variables-hook --save-dev

    \n

    Predefined Variables

    \n

    The plugin provides the following tokens automatically:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TokenDescription
    APP_IDApplication ID as defined in nativescript.config.ts
    APP_VERSIONVersion taken from package.json
    APP_VERSION_CODEAs above but formatted to MMmmpp (Major, Minor, Patch)
    \n

    Usage

    \n

    Examples

    \n

    App_Resources\\Android\\src\\main\\AndroidManifest.xml

    \n
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
    \txmlns:tools=\"http://schemas.android.com/tools\"
    \tpackage=\"__PACKAGE__\"
    \tandroid:versionCode=\"{{APP_VERSION_CODE}}\"
    \tandroid:versionName=\"{{APP_VERSION}}\">
    \n
    <activity android:name=\"org.nativescript.auth0.RedirectActivity\" tools:node=\"replace\">
      <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />

        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />

        <data
          android:host=\"{{AUTH0_DOMAIN}}\"
          android:pathPrefix=\"/android/{{APP_ID}}/callback\"
          android:scheme=\"{{APP_ID}}\" />
      </intent-filter>
    </activity>
    \n

    .env or Environment Variables

    \n
    AUTH0_DOMAIN = \"my.domain.auth0.com\"
    \n

    Additional Templated Files

    \n

    You can extend the functionality of this hook by adding in additional relative filepaths to you nativescript.config.ts like so

    \n

    nativescript.config.ts

    \n
    export default {
      id: 'org.nativescript.example',
      ...
      environmentVariablesHook: {
        additionalPaths: [
          'platforms/android/example.xml',
          'platforms/ios/example.txt'
        ]
      }
    } as NativeScriptConfig;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sazmand-version":{"name":"nativescript-sazmand-version","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript App Version (nativescript-sazmand-version)

    \n

    Installation

    \n
    tns plugin add nativescript-sazmand-version
    \n

    Usage

    \n
    ```\nimport { SazmandVersion } from 'nativescript-sazmand-version';\nprivate appVersion: SazmandVersion;\n\nconstructor() {\n    this.appVersion.get()\n}\n```\n
    \n

    License

    \n

    Apache License Version 2.0, March 2018

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toast":{"name":"nativescript-toast","version":"2.0.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slides-d4w":{"name":"nativescript-slides-d4w","version":"1.7.2","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"},"readme":"

    NativeScript Slides for iOS and Android

    \n

    The plugin formally known as nativescript-intro-slides

    \n

    Intro slides example:

    \n

    \"Nativescript

    \n

    Image carousel example:

    \n

    \"Nativescript

    \n

    videos by Brad Martin

    \n

    Example Usage:

    \n

    XML

    \n

    \t<Slides:SlideContainer id=\"slides\" pageIndicators=\"true\" indicatorsColor=\"#fff\">
    \t\t\t<Slides:Slide class=\"slide-1\">
    \t\t\t\t<Label text=\"This is Panel 1\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-2\">
    \t\t\t\t<Label text=\"This is Panel 2\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-3\">
    \t\t\t\t<Label text=\"This is Panel 3\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-4\">
    \t\t\t\t<Label text=\"This is Panel 4\"  />
    \t\t\t</Slides:Slide>
    \t\t\t<Slides:Slide class=\"slide-5\">
    \t\t\t\t<Label text=\"This is Panel 5\"  />
    \t\t\t</Slides:Slide>
    \t</Slides:SlideContainer>
    \n

    CSS

    \n
    .slide-1{
      background-color: darkslateblue;
    }

    .slide-2{
      background-color: darkcyan;
    }
    .slide-3{
      background-color: darkgreen;
    }

    .slide-4{
      background-color: darkgoldenrod;
    }
    .slide-5{
      background-color: darkslategray;
    }
    Label{
      text-align: center;
      width: 100%;
      font-size: 35;
      margin-top: 35;
    }
    \n

    Great for Intros/Tutorials to Image Carousels.

    \n

    To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

    \n

    when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

    \n

    add as many <Slides:Slide> as you want.

    \n

    Methods for SlideContainer

    \n
      \n
    • nextSlide() - navigate to the next slide (right direction)
      • \n
    • previousSlide() - navigate to the previous slide (left direction)
      • \n
    \n

    Attributes for SlideContainer

    \n
      \n
    • \n

      loop : boolean - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

      \n
      • \n
    • \n

      velocityScrolling : boolean - If true will calculate transitions speeds based on the finger movement speed.

      \n
      • \n
    • \n

      pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

      \n
      • \n
    • \n

      indicatorsColor : string - color of the indicator dots.

      \n
      • \n
    • \n

      interval : integer - value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call page.getViewById("your_id").stopSlideshow() to unregister it (your_id is the id given to <Slides:SlideContainer>), it can be restarted with startSlidShow.

      \n
      • \n
    • \n

      disablePan : boolean - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.

      \n
      • \n
    • \n

      pagerOffset : string - Margin-top for the pager. Number or percentage, default 88%.

      \n
      • \n
    \n

    Events

    \n
      \n
    • start - Start pan
      • \n
    • changed - Transition complete
      • \n
    • cancelled - User didn't complete the transition, or at start\\end with no slides
      • \n
    • finished - Last slide has come into view
      • \n
    \n

    Angular 2 compatibility

    \n

    To use the slides with Angular2 and the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView().\nFollow the example

    \n

    Android Optional Attributes

    \n
      \n
    • androidTranslucentStatusBar : boolean - If true the Android status bar will be translucent on devices that support it. (Android sdk >= 19).
      • \n
    • androidTranslucentNavBar : boolean - If true the Android navigation bar will be translucent on devices that support it. (Android sdk >= 19).
      • \n
    \n

    Plugin Development Work Flow:

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

    Known issues

    \n
      \n
    • There apears to be a bug with the loop resulting in bad transitions going right to left.
      • \n
    \n

    How To: Load slides dynamically

    \n

    You want to hook into the loaded event of the view and then create your view elements.

    \n

    Demo Code

    \n
    <Slides:SlideContainer loaded=\"onSlideContainerLoaded\"
    \n
    import * as slides from 'nativescript-slides/nativescript-slides'

    export function onSlideContainerLoaded(args) {    
        let slideContainer = <slides.SlideContainer>args.object;

          //Construct the slides
          slideContainer.addChild(getSlide(\"Page 1\", \"slide-1\"));
          slideContainer.addChild(getSlide(\"Page 2\", \"slide-2\"));
          slideContainer.addChild(getSlide(\"Page 3\", \"slide-3\"));
          slideContainer.addChild(getSlide(\"Page 4\", \"slide-4\"));
          slideContainer.addChild(getSlide(\"Page 5\", \"slide-5\"));

      }

      function getSlide(labelText: string, className: string)  {
          let slide = new slides.Slide();
          slide.className = className;
          let label = new labelModule.Label();
          label.text = labelText;
          slide.addChild(label)

          return slide;
      }

    \n

    Smoother panning on Android (For {N} v2.0.0 and below only).

    \n

    To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here

    \n

    /node_modules/tns-core-modules/ui/gestures/gestures.android.js

    \n

    and change

    \n
        CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
            var count = event.getPointerCount();
            var res = { x: 0, y: 0 };
            for (var i = 0; i < count; i++) {
                res.x += event.getX(i);
                res.y += event.getY(i);
            }
            res.x /= (count * this.density);
            res.y /= (count * this.density);
            return res;
        };
    \n

    to

    \n
      CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
            var count = event.getPointerCount();
            var res = { x: 0, y: 0 };
            for (var i = 0; i < count; i++) {
                res.x += event.getRawX();
                res.y += event.getRawY();
            }
            res.x /= (count * this.density);
            res.y /= (count * this.density);
            return res;
        };
    \n

    please note this will change the panning gesture for your entire project.

    \n

    Thanks to these awesome contributors!

    \n

    Brad Martin

    \n

    Obsessive Inc/Abhijith Reddy

    \n

    Victor Nascimento

    \n

    Steve McNiven-Scott

    \n

    And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:\nhttps://github.com/NathanWalker/nativescript-plugin-seed

    \n

    Contributing guidelines

    \n

    Contributing guidelines

    \n

    License

    \n

    MIT

    \n

    for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-laravel-echo":{"name":"nativescript-laravel-echo","version":"1.2.0","license":"Apache-2.0","readme":"

    NativeScript Laravel-Echo

    \n

    \"npm\"\n\"npm\"

    \n

    \"NPM\"

    \n

    This is a laravel-echo plugin for native applications made with nativescript

    \n

    For more information read Laravel Broadcast.

    \n

    Prerequisites / Requirements

    \n

    Necesary api authentication in your laravel backend application.

    \n

    Modify the file where the following line Broadcast::routes()

    \n

    Example in app/Providers/BroadcastServiceProvider.php

    \n
    class BroadcastServiceProvider extends ServiceProvider
    {
        /**
         * Bootstrap any application services.
         *
         * @return void
         */
        public function boot()
        {
            Broadcast::routes(['middleware' => 'auth:api']);
            require base_path('routes/channels.php');
        }
    }
    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n

    $ tns plugin add nativescript-laravel-echo

    \n

    Usage

    \n
    namespace App\\Events;

    use Illuminate\\Broadcasting\\Channel;
    use Illuminate\\Queue\\SerializesModels;
    use Illuminate\\Broadcasting\\PrivateChannel;
    use Illuminate\\Broadcasting\\PresenceChannel;
    use Illuminate\\Broadcasting\\InteractsWithSockets;
    use Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;

    class Event implements ShouldBroadcast
    {
        /**
         * Information about the shipping status update.
         *
         * @var string
         */
        public $data; //data show in console.dir as data
    }
    \n

    Javascript

    \n
    const TnsEcho = require('nativescript-laravel-echo').TnsEcho;

    const token = 'Asdsd3dsdsTytf';//Your token

    const options = {
        //....
        broadcaster: 'socket.io',// pusher,
        headers: {
            auth: {
                bearer: `Bearer ${token}`
            }
        }
    }

    const Echo = new TnsEcho(options)

    Echo.channel('YourChannel').listen('Event', e => {
        console.dir(e)
    })

    //presence channel for others
    const http = require('tns-core-modules/http');

    http.request({
        //....
        headers: {
            //...
            'X-Socket-Id': Echo.socketId() // get socket id
        }
    });
    \n

    TypeScript

    \n
    import { TnsEcho } from 'nativescript-laravel-echo';

    const token = 'Asdsd3dsdsTytf';//Your token

    const options = {
        //....
        broadcaster: 'socket.io',// pusher,
        headers: {
            auth: {
                bearer: `Bearer ${token}`
            }
        }
    }

    this.Echo = new TnsEcho(options)

    this.Echo.channel('YourChannel').listen('Event', e => {
        console.dir(e)
    })

    //presence channel for others
    import * as http from 'tns-core-modules/http';

    http.request({
        //....
        headers: {
            //...
            'X-Socket-Id': this.Echo.socketId() // get socket id
        }
    })
    \n

    Options

    \n

    These are each of the parameters that can go in the object options.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    broadcasterpusherDriver for broadcast pusher or socket.io
    hostnullYour host only socket.io
    authEndpoint/broadcasting/authYour auth endpoint only for Pusher
    keynullYour api key of Pusher App
    clusternullYour cluster of Pusher App
    authauth:{headers:{}}Necesary in private an presence channel's with Authorization header
    namespaceApp.EventsThe namespace backend events
    debugfalseEnable debug only socket.io broadcaster
    forceWebsocketsfalseForce WebSockets
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio-reader":{"name":"nativescript-cardio-reader","version":"1.0.18","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-utils":{"name":"nativescript-webview-utils","version":"4.0.0","license":"Apache-2.0","readme":"

    NativeScript WebView Utils plugin

    \n

    Add request headers to a NativeScript WebView. Perhaps more utils later.

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n
    \n

    For NativeScript versions older than 7, use a plugin version older than 4.0.0.

    \n
    \n\n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-webview-utils
    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios or npm run demo.android.

    \n

    API

    \n

    addHeaders

    \n

    If you're loading a page that requires you to send additional headers (for security perhaps),\nthis function allows you to dynamically inject those to any links within the webview.

    \n

    NativeScript with Angular

    \n
    <WebView [src]=\"someSource\" (loaded)=\"webViewLoaded($event)\"></WebView>
    \n
    import { EventData } from \"tns-core-modules/data/observable\";
    import { WebView } from \"tns-core-modules/ui/web-view\";
    import { WebViewUtils } from \"nativescript-webview-utils\";

    export class MyComponent {
      someSource: string = \"https://httpbin.org/headers\";

      webViewLoaded(args: EventData): any {
        const webView: WebView = <WebView>args.object;
        const headers: Map<string, string> = new Map();
        headers.set(\"Foo\", \"Bar :P\");
        headers.set(\"X-Custom-Header\", \"Set at \" + new Date().toTimeString());
        WebViewUtils.addHeaders(webView, headers);
      }
    }
    \n

    NativeScript with XML

    \n
    <WebView id=\"webviewWithCustomHeaders\" loaded=\"webViewLoaded\" height=\"360\" src=\"https://httpbin.org/headers\"/>
    \n
    // then add a few headers in the associated JS / TS file like this:
    import { WebViewUtils } from 'nativescript-webview-utils';
    import { WebView } from 'tns-core-modules/ui/web-view';
    import * as observable from 'tns-core-modules/data/observable';

    export function webViewLoaded(args: observable.EventData) {
      const wv: WebView = <WebView>args.object;
      const headers: Map<string, string> = new Map();
      headers.set(\"Foo\", \"Bar :P\");
      headers.set(\"X-Custom-Header\", \"Set at \" + new Date().toTimeString());
      WebViewUtils.addHeaders(wv, headers);
    }
    \n

    setUserAgent

    \n

    This method was removed in 2.0.0 because it caused bugs when addHeaders was used as well.

    \n

    You should now use addHeaders and set the User-Agent header:

    \n
    import { WebViewUtils } from 'nativescript-webview-utils';
    import { WebView } from 'tns-core-modules/ui/web-view';
    import * as observable from 'tns-core-modules/data/observable';

    export function webViewForUserAgentLoaded(args: observable.EventData) {
      const wv: WebView = <WebView>args.object;
      const headers: Map<string, string> = new Map();
      headers.set(\"User-Agent\", \"My Awesome User-Agent!\"); // this line!
      WebViewUtils.addHeaders(wv, headers);
    }
    \n

    Credits

    \n

    Quite some code was borrowed from this repo.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio":{"name":"nativescript-cardio","version":"0.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-cardio
      • \n
    \n

    Usage

    \n
    import { CardIO } from 'nativescript-cardio';

    const cardIO = new CardIO();
    cardIO.show((card: Card) => {
      /*
        Card {
        number: string;
        expMonth: number;
        expYear: number;
        cvv: string;
        image: ImageSource;
        type: CardType;
        name: string;
        postalCode?: string;
        android: any;
        ios: any;
        }
        */
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cscreenshot":{"name":"nativescript-cscreenshot","version":"1.2.1","license":"Apache-2.0","readme":"

    Nativescript Cscreenshot :camera:

    \n

    This plugin was created so you can take screenshots of views easily and then store it as you like.

    \n

    this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

    \n

    Now working in Nativescript 8

    \n

    IMPORTANT: For some reason I can't test the ios version because of this problem Github, i will appreciate if you can and report this in the issues page.

    \n

    Installation

    \n

    Use the install command:

    \n
    tns plugin add nativescript-cscreenshot
    \n

    Usage

    \n

    Just import the plugin in your project and use it like this

    \n

    using Typescript:

    \n
        import { Cscreenshot } from 'nativescript-cscreenshot';
        import { ImageSource } from \"tns-core-modules/image-source\";

        // then in your take a screenshot method
        let screen = new Cscreenshot();

        // Using vanilla Nativescript
        let view = page.getViewById('main');

        // Using Angular Nativescript
        @ViewChild(\"main\", { static: true }) main: ElementRef;
        let view = this.view.nativeElement;

        // Using Vue Nativescript
        let view = this.$refs.main.nativeView;

        screen.take(view, (image: ImageSource)=>{
            // Do whatever you want with the returned source image
        });
    \n

    and in your template

    \n
        <!-- Assign the reference name depending on the framework -->
        <!-- 'id=\"\"' for vanilla nativescript -->
        <!-- '#main' for angular nativescript -->
        <!-- 'ref=\"main\"' for Vue nativescript -->
        <GridLayout id=\"main\" #main ref=\"main\">
            <!-- Content of your app here -->
        </GridLayout>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-segment-view":{"name":"nativescript-segment-view","version":"1.0.6","license":"MIT Lisence","readme":"

    nativescript-segment-view

    \n

    A NativeScript plugin to extend segmentBar, make style same in android and ios.

    \n

    Sample Screenshots

    \n

    Android

    \n
    \n

    \"Sample1\"

    \n

    iOS

    \n
    \n

    \"Sample1\"

    \n

    Installation

    \n
    tns plugin add nativescript-segment-view
    \n

    Usage

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-segment-view\">
      <StackLayout class=\"p-20\">
        <Label text=\"{{ message }}\" class=\"t-20 text-center c-black\" textWrap=\"true\"/>
        <ui:n-s-segment-view id=\"1\" items=\"{{tabItems}}\" height=\"60\" selectedIndexChanged=\"selectedIndexChanged\"
          style=\"seg-background-color:#EEE;selected-background-color:#FF0;line-color:#000;selected-color:#F00;title-color:#0F0;\"></ui:n-s-segment-view>
          <ui:n-s-segment-view id=\"2\" items=\"{{tabItems2}}\" height=\"30\" selectedIndexChanged=\"selectedIndexChanged\"></ui:n-s-segment-view>
      </StackLayout>
    </Page>
    \n

    TS

    \n
    import { Observable } from 'tns-core-modules/data/observable';
    import { NSSegmentView, NSSegmentViewItem } from 'nativescript-segment-view';

    export class HelloWorldModel extends Observable {
      public message: string;
      private segmentView: NSSegmentView;
      private tabItems: NSSegmentViewItem[];
      private tabItems2: NSSegmentViewItem[];

      constructor() {
        super();

        // this.segmentView = new NSSegmentView();
        this.message = \"examples\";
        this.tabItems = [];
        const item1 = new NSSegmentViewItem();
        item1.title = 'custom_item1';
        this.tabItems.push(item1);
        const item2 = new NSSegmentViewItem();
        item2.title = 'custom_item2';
        this.tabItems.push(item2);

        this.tabItems2 = [];
        const item21 = new NSSegmentViewItem();
        item21.title = 'default_item1';
        this.tabItems2.push(item21);
        const item22 = new NSSegmentViewItem();
        item22.title = 'default_item2';
        this.tabItems2.push(item22);
      }
    }
    \n

    Angular NativeScript

    \n
    import * as elementRegistryModule from 'nativescript-angular/element-registry';
    elementRegistryModule.registerElement(\"NSSegmentView\", () => require(\"nativescript-segment-view\").NSSegmentView);
    \n
    <NSSegmentView id=\"1\" (loaded)=\"onLoad()\" [items]=\"tabItems\" height=\"60\" (selectedIndexChange)=\"onSelectedIndexChange($event)\"
        style=\"seg-background-color:#EEE;selected-background-color:#FF0;line-color:#000;selected-color:#F00;title-color:#0F0;\"></NSSegmentView>
    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-barcodescanner":{"name":"@nstudio/nativescript-barcodescanner","version":"5.0.1","license":"Apache-2.0","readme":"

    NativeScript BarcodeScanner

    \n
    \n

    💡 Plugin version 5.0.0+ is compatible with NativeScript 7+ and also supports Mac M1. If you need to target older NativeScript versions, please stick to plugin nativescript-barcodescanner 3.4.2.

    \n
    \n

    Supported barcode types

    \n

    iOS and Android

    \n
      \n
    • CODE_39
      • \n
    • CODE_93
      • \n
    • CODE_128
      • \n
    • DATA_MATRIX
      • \n
    • EAN_8
      • \n
    • EAN_13
      • \n
    • ITF (also known as ITF14)
      • \n
    • PDF_417 (on Android only when passed in explicity via formats)
      • \n
    • QR_CODE
      • \n
    • UPC_A
      • \n
    • UPC_E
      • \n
    \n

    Android only

    \n
      \n
    • CODABAR
      • \n
    • MAXICODE
      • \n
    • RSS_14
      • \n
    \n

    iOS only

    \n
      \n
    • AZTEC
      • \n
    • CODE_39_MOD_43
      • \n
    • INTERLEAVED_2_OF_5
      • \n
    \n

    A note about UPC_A and EAN_13

    \n

    When either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the format property of the result object.\nFor details, see #176.

    \n

    Installation

    \n
    npm install @nstudio/nativescript-barcodescanner
    \n

    Embedding the scanner (iOS)

    \n
    \n

    If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!

    \n
    \n

    As you can see, you can style the view any way you like, and even overlay it with an image or button.\nTo recreate the layout above, look at these lines in the demo app.

    \n
    \n

    💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that pause property to true when applicable.

    \n
    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:Barcode=\"@nstudio/nativescript-barcodescanner\">
    \n

    Here's an example tag, showing all currently supported options. The property defaults are equal to the scan function.

    \n
    <iOS>
        <Barcode:BarcodeScannerView
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          pause=\"{{ pause }}\"
          scanResult=\"{{ onScanResult }}\" />
    </iOS>
    \n

    Angular

    \n

    Component / Module:

    \n
    import { registerElement } from \"@nativescript/angular\";
    registerElement(\"BarcodeScanner\", () => require(\"@nstudio/nativescript-barcodescanner\").BarcodeScannerView);
    \n

    View:

    \n
    <BarcodeScanner
          class=\"scanner-round\"
          formats=\"QR_CODE, EAN_13\"
          beepOnScan=\"true\"
          reportDuplicates=\"true\"
          preferFrontCamera=\"false\"
          [pause]=\"pause\"
          (scanResult)=\"onScanResult($event)\">
    </BarcodeScanner>
    \n

    Vue

    \n

    main.ts:

    \n
    Vue.registerElement('BarcodeScanner', () => require('@nstudio/nativescript-barcodescanner').BarcodeScannerView)
    \n

    View:

    \n
    <BarcodeScanner
        row=\"1\"
        height=\"300\"
        formats=\"QR_CODE, EAN_13, UPC_A\"
        beepOnScan=\"true\"
        reportDuplicates=\"true\"
        preferFrontCamera=\"false\"
        :pause=\"pause\"
        @scanResult=\"onScanResult\"
        v-if=\"isIOS\">
    </BarcodeScanner>
    \n

    See 'demo-vue' for details.

    \n

    iOS runtime permission reason

    \n

    iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".

    \n

    You can provide your own reason for accessing the camera by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSCameraUsageDescription</key>
      <string>My reason justifying fooling around with your camera</string>
    \n

    To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the .plist during build. This value gets overridden by anything you specify yourself.

    \n

    Usage

    \n

    Tip: during a scan you can use the volume up/down buttons to toggle the torch.

    \n

    function: scan (single mode)

    \n

    TypeScript

    \n
      import { BarcodeScanner } from \"@nstudio/nativescript-barcodescanner\";
      const barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE, EAN_13\",
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: () => { console.log(\"Scanner closed\")}, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
        openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
        presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
      }).then((result) => {
          // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
          alert({
            title: \"Scan result\",
            message: \"Format: \" + result.format + \",\\nValue: \" + result.text,
            okButtonText: \"OK\"
          });
        }, (errorMessage) => {
          console.log(\"No scan. \" + errorMessage);
        }
      );
    \n
    \n

    Note that result.format above is one of these.

    \n
    \n

    JavaScript

    \n
      var BarcodeScanner = require(\"@nstudio/nativescript-barcodescanner\").BarcodeScanner;
      var barcodescanner = new BarcodeScanner();

      barcodescanner.scan({
        formats: \"QR_CODE,PDF_417\",   // Pass in of you want to restrict scanning to certain types
        cancelLabel: \"EXIT. Also, try the volume buttons!\", // iOS only, default 'Close'
        cancelLabelBackgroundColor: \"#333333\", // iOS only, default '#000000' (black)
        message: \"Use the volume buttons for extra light\", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
        showFlipCameraButton: true,   // default false
        preferFrontCamera: false,     // default false
        showTorchButton: true,        // default false
        beepOnScan: true,             // Play or Suppress beep on scan (default true)
        fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
        torchOn: false,               // launch with the flashlight on (default false)
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed (success or abort)
        resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
        orientation: \"landscape\",     // Android only, optionally lock the orientation to either \"portrait\" or \"landscape\"
        openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
      }).then(
          function(result) {
            console.log(\"Scan format: \" + result.format);
            console.log(\"Scan text:   \" + result.text);
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: scan (bulk / continuous mode)

    \n

    In this mode the scanner will continuously report scanned codes back to your code,\nbut it will only be dismissed if the user tells it to, or you call stop programmatically.

    \n

    The plugin handles duplicates for you so don't worry about checking those;\nevery result withing the same scan session is unique unless you set reportDuplicates to true.

    \n

    Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically.\nYou'll notice that the Promise will no longer receive the result as there may be many results:

    \n

    JavaScript

    \n
      var count = 0;
      barcodescanner.scan({
        formats: \"QR_CODE\",
        // this callback will be invoked for every unique scan in realtime!
        continuousScanCallback: function (result) {
          count++;
          console.log(result.format + \": \" + result.text + \" (count: \" + count + \")\");
          if (count === 3) {
            barcodescanner.stop();
          }
        },
        closeCallback: function () { console.log(\"Scanner closed\"); }, // invoked when the scanner was closed
        reportDuplicates: false // which is the default
      }).then(
          function() {
            console.log(\"We're now reporting scan results in 'continuousScanCallback'\");
          },
          function(error) {
            console.log(\"No scan: \" + error);
          }
      );
    \n

    function: available

    \n

    Note that the iOS implementation will always return true at the moment,\non Android we actually check for a camera to be available.

    \n

    JavaScript

    \n
      var barcodescanner = require(\"@nstudio/nativescript-barcodescanner\");

      barcodescanner.available().then(
          function(avail) {
            console.log(\"Available? \" + avail);
          }
      );
    \n

    function: hasCameraPermission / requestCameraPermission

    \n

    On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.\nEven if the uses-permission tag for the Camera is present in AndroidManifest.xml.

    \n

    On iOS 10+ there's something similar going on.

    \n

    Since version 1.5.0 you can let the plugin handle this for you\n(if need be a prompt will be shown to the user when the scanner launches),\nbut if for some reason you want to handle permissions yourself you can use these functions.

    \n

    JavaScript

    \n
      barcodescanner.hasCameraPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestCameraPermission' now
            console.log(\"Has Camera Permission? \" + result);
          }
      );

      // if no permission was granted previously this wil open a user consent screen
      barcodescanner.requestCameraPermission().then(
          function() {
            console.log(\"Camera permission requested\");
          }
      );
    \n

    Usage with @nativescript/angular

    \n

    You may have injected the BarcodeScanner class in your component constructor in the past,\nbut please don't do that anymore because in release builds you may experience a crash.

    \n

    So instead of:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

    @Component({ ... })
      export class MyComponent {
        constructor(private barcodeScanner: BarcodeScanner) {
      }

      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        this.barcodeScanner.scan({ ... });
      }
    }
    \n

    Simply do:

    \n
    // my-component.ts
    import { Component, Inject } from '@angular/core';
    import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

    @Component({ ... })
      //use the barcodescanner wherever you need it. See general usage above.
      scanBarcode() {
        new BarcodeScanner().scan({ ... });
      }
    }
    \n

    Webpack usage

    \n

    If you run into an error when Webpacking, open app.module.ts and add this:

    \n
    import { BarcodeScanner } from \"@nstudio/nativescript-barcodescanner\";

    export function createBarcodeScanner() {
      return new BarcodeScanner();
    }

    providers: [
      { provide: BarcodeScanner, useFactory: createBarcodeScanner }
    ]
    \n

    Troubleshooting

    \n

    If you get the error TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:

    \n
      \n
    1. Delete the app from your device
      2. \n
    2. Remove the folder platforms/android. This triggers a complete rebuild
      3. \n
    3. run tns run android
      4. \n
    \n

    Dependencies / Related Projects

    \n

    This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:

    \n

    iOS

    \n

    Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner

    \n

    Android

    \n

    ZXing: https://github.com/zxing/zxing/releases

    \n

    As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/EddyVerbruggen/barcodescanner-lib-aar/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fontawesome":{"name":"nativescript-fontawesome","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript FontAwesome

    \n

    A simpler way to use FontAwesome icons with NativeScript

    \n\n

    Install

    \n
    tns plugin add nativescript-fontawesome
    \n

    click here to Download fontawesome-webfont.ttf or download from fontawesome website

    \n
      \n
    • Place font icon .ttf file in app/fonts, like below:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n
      \n
    • call the init function in the you'r app.ts:
      • \n
    \n
    import { Fontawesome } from 'nativescript-fontawesome';
    Fontawesome.init();
    \n

    Usage

    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fontawesome }}\"></Label>
    \n

    Credits

    \n

    nativescript-fonticon

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@anostdev/nativescript-couchbase-plugin":{"name":"@anostdev/nativescript-couchbase-plugin","version":"0.9.7","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript-Couchbase

    \n

    The source is now managed at https://github.com/triniwiz/nativescript-plugins

    \n

    Installation

    \n

    tns plugin add nativescript-couchbase-plugin

    \n

    Usage

    \n

    Note Android min-sdk is 19

    \n
    import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        },
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    const person = database.getDocument(documentId);


    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    // Default concurrency mode is FailOnConflict if you don't pass it
    const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
    \n

    Synchronization with Couchbase Sync Gateway and Couchbase Server

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const push = database.createPushReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    push.setUserNameAndPassword(\"user\",\"password\");
    const pull = database.createPullReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    pull.setSessionId(\"SomeId\");
    pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

    push.setContinuous(true);
    pull.setContinuous(true);
    push.start();
    pull.start();
    \n

    Listening for Changes

    \n
    database.addDatabaseChangeListener(function(changes) {
      for (var i = 0; i < changes.length; i++) {
        const documentId = changes[i];
        console.log(documentId);
      }
    });
    \n

    Query

    \n
    const results = database.query({
      select: [], // Leave empty to query for all
      from: 'otherDatabaseName', // Omit or set null to use current db
      where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
      order: [{ property: 'firstName', direction: 'desc' }],
      limit: 2
    });
    \n

    Transactions

    \n

    Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    database.inBatch(() => {
        const documentId = database.createDocument({
            \"firstname\": \"O\",
            \"lastname\": \"Fortune\",
            \"address\": {
                \"country\": \"Trinidad and Tobago\"
            }
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const person = database.getDocument(documentId);
        
        
        database.updateDocument(documentId, {
            \"firstname\": \"Osei\",
            \"lastname\": \"Fortune\",
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const isDeleted = database.deleteDocument(documentId);
    });
    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubeplayer-inline":{"name":"nativescript-youtubeplayer-inline","version":"73.0.1","license":"Apache-2.0","readme":"

    NativeScript YoutubePlayer

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer@2.2.6
      • \n
    \n

    Configuration

    \n

    Android

    \n

    Api key follow ➡\nlink to get\nyour api key

    \n

    Usage

    \n

    XML

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

    \n
    <ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
    \n

    Angular

    \n
    import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

    @NgModule({
        imports: [
        YoutubePlayerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
    <YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
    \n

    Vue

    \n

    Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

    \n
    import Vue from 'nativescript-vue'
    Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer)
    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <StackLayout>
          <YoutubePlayer src=\"wH_0_pijbZY\" apiKey=\"your-api-key\"/>
        </StackLayout>
      </Page>
    </template>
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    play()voidStarts video playback of the currently cued / loaded video.
    stop()voidStops and cancels loading of the current video.
    destroy()voidDestroy the video player and free resources.
    pause()voidPauses the currently playing video.
    isPlaying()falsebooleanReturns is current video is playing.
    toggleFullscreen()voidToggle fullscreen mode.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    srcnullstring
    • - [x]
    		Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
    optionsnullObject
    • - [ ]
    		Player options available IOS only
    isFullScreenfalseboolean
    • - [ ]
    		Returns if player is currently in fullscreen mode.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [x] IOS
      • \n
    • [x] toggleFullscreen IOS
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/vue":{"name":"@vallemar/vue","version":"0.0.1","license":"MIT","readme":"

    DOMiNATIVE-Vue

    \n

    Quirks and hacks for Vue 3 to work with DOMiNATIVE on NativeScript

    \n

    Playground

    \n
    \n

    Installation

    \n

    Via npm:

    \n
    npm install @dominative/vue @nativescript/core dominative undom-ng vue
    \n

    Note: @nativescript/core, dominative, undom-ng, vue are peer dependencies, you have to install them manually.

    \n
    \n

    Usage

    \n
    import { Application } from '@nativescript/core'
    import { createApp } from '@dominative/vue'
    import App from 'App.vue'

    const app = createApp(App)

    // Start the app
    app.$run()
    \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-youtubeplayer":{"name":"@cdev38399/nativescript-youtubeplayer","version":"4.0.1","license":"Apache-2.0","readme":"

    NativeScript YoutubePlayer

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    NativeScript 4x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer
      • \n
    \n

    NativeScript 3x

    \n
      \n
    • tns plugin add nativescript-youtubeplayer@2.2.6
      • \n
    \n

    Configuration

    \n

    Android

    \n

    Api key follow ➡\nlink to get\nyour api key

    \n

    Usage

    \n

    XML

    \n

    IMPORTANT: Make sure you include xmlns:ui="nativescript-youtubeplayer" on the\nPage element

    \n
    <ui:YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\" />
    \n

    Angular

    \n
    import { YoutubePlayerModule } from 'nativescript-youtubeplayer/angular';

    @NgModule({
        imports: [
        YoutubePlayerModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
    <YoutubePlayer id=\"player\" apiKey=\"AIzaSyCDH3BGQZT2ebUfSE8D3I8NLqaCPu4FRh0\" src=\"{{src}}\" height=\"250\" width=\"100%\" backgroundColor=\"gray\"></YoutubePlayer>
    \n

    Vue

    \n

    Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

    \n
    import Vue from 'nativescript-vue'
    Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer)
    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <StackLayout>
          <YoutubePlayer src=\"wH_0_pijbZY\" apiKey=\"your-api-key\"/>
        </StackLayout>
      </Page>
    </template>
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    play()voidStarts video playback of the currently cued / loaded video.
    stop()voidStops and cancels loading of the current video.
    destroy()voidDestroy the video player and free resources.
    pause()voidPauses the currently playing video.
    isPlaying()falsebooleanReturns is current video is playing.
    toggleFullscreen()voidToggle fullscreen mode.
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    srcnullstring
    • - [x]
    		Set the videoId to play e.g (Z0LWuKQcrUA) => https://www.youtube.com/watch?v=Z0LWuKQcrUA
    optionsnullObject
    • - [ ]
    		Player options available IOS only
    isFullScreenfalseboolean
    • - [ ]
    		Returns if player is currently in fullscreen mode.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    TODO

    \n
      \n
    • [x] IOS
      • \n
    • [x] toggleFullscreen IOS
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-keyboard-toolbar":{"name":"@cdev38399/nativescript-keyboard-toolbar","version":"4.0.2","license":"Apache-2.0","readme":"

    NativeScript Keyboard Toolbar

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n\n

    iOS and Android running the included demo - much better framerate on YouTube!

    \n

    What The Keyboard!?

    \n

    Glad you asked 😅!

    \n
      \n
    • ⌨️ Mobile keyboards are a compromise at best. Let's make them easier to work with by attaching a toolbar on top of it.
      • \n
    • 🥅 Design goal = declare any NativeScript layout and stick it on top of the soft keyboard.
      • \n
    • 🏒 Make the toolbar stick to the keyboard, no matter its shape or form.
      • \n
    • 🙅‍♀️ No third party dependencies; use only stuff from tns-core-modules (which your app already has).
      • \n
    • ♾ Allow multiple toolbar designs on one page.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-keyboard-toolbar
    \n

    General usage instructions

    \n

    The plugin works by grabbing your declared toolbar layout and moving it off-screen.

    \n

    Then, whenever the related TextField or TextView received focus,\nthe plugin animates the toolbar to the top of the keyboard and keeps it there until the field loses focus.

    \n

    For this to behave properly you'll need to grab any layout you currently have and wrap it in a GridLayout\nas show in the examples below. The GridLayout allows for stacking multiple child layout on top of each other\nwhen their row and col properties are equal (or omitted).

    \n

    So if your layout structure is currently this:

    \n
    <ActionBar/>
    <StackLayout/>
    \n

    Change it to this:

    \n
    <ActionBar/>
    <GridLayout>
        <StackLayout/>
        <Toolbar/>
    </GridLayout>
    \n

    Not too bad, right? That will make the Toolbar stack on top of the StackLayout you already had.

    \n
    \n

    Note that the plugin could have done this for you, or take some other approach entirely, but many hours of tinkering has convinced me this is the best solution.

    \n
    \n

    Usage with NativeScript Core

    \n

    Mind the comments in the example below.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:kt=\"nativescript-keyboard-toolbar\">

        <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
        <GridLayout>

            <StackLayout>
                <Label text=\"Some text\"/>
                <!-- Add an 'id' property that we can reference below -->
                <TextField id=\"priceTextField\" hint=\"Enter the price\" keyboardType=\"number\"/>
            </StackLayout>

            <!-- The 'forId' and 'height' properties are mandatory -->
            <kt:Toolbar forId=\"priceTextField\" height=\"44\">
                <GridLayout columns=\"*, *, *\" class=\"toolbar\">
                    <Label col=\"0\" text=\"👍\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"1\" text=\"👎\" tap=\"{{ appendToTextView }}\"/>
                    <Label col=\"2\" text=\"😄\" tap=\"{{ appendToTextView }}\"/>
                </GridLayout>
            </kt:Toolbar>

        </GridLayout>
    </Page>
    \n

    Core demo app

    \n

    Check the source in the demo folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo.ios # or .android
    \n

    Usage with NativeScript-Angular

    \n

    Register the plugin in a specific module, or globally in the app module:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"KeyboardToolbar\", () => require(\"nativescript-keyboard-toolbar\").Toolbar);
    \n

    In this example, we're adding a TextField to the ActionBar. Note that we still need to wrap the rest of the page in a GridLayout:

    \n
    <ActionBar>
      <TextField #textField1 id=\"tf1\"></TextField>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <!-- Add whatever visible layout you need here -->
      <ListView [items]=\"items\">
        <ng-template let-item=\"item\">
          <Label [nsRouterLink]=\"['/item', item.id]\" [text]=\"item.name\" class=\"list-group-item\"></Label>
        </ng-template>
      </ListView>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
       The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId=\"tf1\" height=\"44\">
        <GridLayout columns=\"*, *, *, auto\" class=\"toolbar\">
          <Label col=\"0\" text=\"👍\" (tap)=\"appendToTextField(textField1, '👍')\"></Label>
          <Label col=\"1\" text=\"👎\" (tap)=\"appendToTextField(textField1, '👎')\"></Label>
          <Label col=\"2\" text=\"😄\" (tap)=\"appendToTextField(textField1, '😄')\"></Label>
          <Label col=\"3\" text=\"Close️\" (tap)=\"closeKeyboard(textField1)\"></Label>
        </GridLayout>
      </KeyboardToolbar>
    </GridLayout>
    \n

    Angular demo app

    \n

    Check the source in the demo-ng folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo-ng.ios # or .android
    \n

    Usage with NativeScript-Vue

    \n

    Register the plugin in app.js (or depending on your app's setup: app.ts, or main.js, etc):

    \n
    import Vue from \"nativescript-vue\";
    Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);
    \n
    <template>
      <Page class=\"page\">
        <ActionBar class=\"action-bar\">
          <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
        <GridLayout>

          <StackLayout>
            <TextView id=\"tv2\" text=\"Say it with emoji!\"/>
          </StackLayout>

          <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
             The '    forId' and 'height' properties are mandatory -->
          <KeyboardToolbar forId=\"tv2\" height=\"44\">
            <GridLayout columns=\"*, *, *\" class=\"toolbar\">
              <Label col=\"0\" text=\"👍\" @tap=\"appendToTextView2\"/>
              <Label col=\"1\" text=\"👎\" @tap=\"appendToTextView2\"/>
              <Label col=\"2\" text=\"😄\" @tap=\"appendToTextView2\"/>
            </GridLayout>
          </KeyboardToolbar>

        </GridLayout>
      </Page>
    </template>

    <script>
      import { topmost } from \"tns-core-modules/ui/frame\";

      export default {
        methods: {
          appendToTextView2(args) {
            const textView = topmost().currentPage.getViewById(\"tv2\");
            textView.text += args.object.text;
          }
        }
      }
    </script>
    \n

    Vue demo app

    \n

    Check the source in the demo-vue folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
    cd nativescript-keyboard-toolbar/src
    npm i
    npm run demo-vue.ios # or .android
    \n

    What about IQKeyboardManager?

    \n

    If you have IQKeyboardManager installed for better\nkeyboard behavior on iOS, then this plugin will detect it and add the height of your custom toolbar to the scroll offset\nIQKeyboardManager applies. You can see this in action in the NativeScript Core demo app.

    \n

    You may want to suppress IQKeyboardManager's own toolbar in this case (to avoid a double toolbar), as shown here.

    \n

    Future work

    \n
      \n
    • Orientation-change support.
      • \n
    • Dismiss keyboard on iOS when tapping outside the keyboard (configurable). Fot the time being you can add and configure IQKeyboardManager as mentioned above.
      • \n
    • Auto-scroll the view if the keyboard overlaps the text field (on iOS you can already do that with IQKeyboardManager).
      • \n
    • Modal support on Android (currently you can't use the toolbar in a modal because the toolbar is behind the modal)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-v2":{"name":"nativescript-social-share-v2","version":"2.1.0","license":"Apache-2.0","readme":"

    NativeScript Social Share (Version 2)

    \n

    This version of NativeScript Social Share is similar to existing versions, however it includes the ability to retrieve a completion callback for iOS and Android!

    \n

    This is particularly useful for capturing analytics, for example, to work out the sharing method that was used.

    \n

    Or to trigger a workflow once the user returns to the app.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    ns plugin add nativescript-social-share-v2
    \n

    Getting Started

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share-v2\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share-v2\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"@nativescript/social-share\");
    var imageSourceModule = require(\"@nativescript/core\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"@nativescript/social-share\";
    import { ImageSource } from \"@nativescript/core\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image).then(result => {
        // Callback result.
        console.log(result.completed);          // Boolean - Did the user share?
        console.log(result.activityType);       // String/null - Sharing Method.
        
    }).catch(err => {
        // There was a catastrophe...
        console.log(err);
    })
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\").then(result => {
        // Callback result.
        console.log(result.completed);          // Boolean - Did the user share?
        console.log(result.activityType);       // String/null - Sharing Method.
        
    }).catch(err => {
        // There was a catastrophe...
        console.log(err);
    })
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText('I love NativeScript!');
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText('I love NativeScript!', 'How would you like to share this text?');
    \n

    This also returns a promise and is thenable, so the callback result can be captured in the same manner as the shareImage example.

    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript');
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl('https://www.nativescript.org/', 'Home of NativeScript', 'How would you like to share this url?');
    \n

    This also returns a promise and is thenable, so the callback result can be captured in the same manner as the shareImage example.

    \n

    Security

    \n

    If you discover a security vulnerability within this package, please send an email to Bespoke Technology Labs at hello@bespoke.dev. All security vulnerabilities will be promptly addressed. You may view our full security policy here.

    \n

    License

    \n

    The NativeScript Social Share V2 Library is licensed under The Apache 2.0 License.

    \n

    Credits

    \n
      \n
    • @LewisSmallwood - Bespoke Technology Labs
      • \n
    • @NativeScript - The NativeScript community
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@soscler/nativescript-couchbase-plugin":{"name":"@soscler/nativescript-couchbase-plugin","version":"0.9.7","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript-Couchbase

    \n

    The source is now managed at https://github.com/triniwiz/nativescript-plugins

    \n

    Installation

    \n

    tns plugin add nativescript-couchbase-plugin

    \n

    Usage

    \n

    Note Android min-sdk is 19

    \n
    import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        },
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    const person = database.getDocument(documentId);


    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    // Default concurrency mode is FailOnConflict if you don't pass it
    const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
    \n

    Synchronization with Couchbase Sync Gateway and Couchbase Server

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const push = database.createPushReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    push.setUserNameAndPassword(\"user\",\"password\");
    const pull = database.createPullReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    pull.setSessionId(\"SomeId\");
    pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

    push.setContinuous(true);
    pull.setContinuous(true);
    push.start();
    pull.start();
    \n

    Listening for Changes

    \n
    database.addDatabaseChangeListener(function(changes) {
      for (var i = 0; i < changes.length; i++) {
        const documentId = changes[i];
        console.log(documentId);
      }
    });
    \n

    Query

    \n
    const results = database.query({
      select: [], // Leave empty to query for all
      from: 'otherDatabaseName', // Omit or set null to use current db
      where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
      order: [{ property: 'firstName', direction: 'desc' }],
      limit: 2
    });
    \n

    Transactions

    \n

    Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    database.inBatch(() => {
        const documentId = database.createDocument({
            \"firstname\": \"O\",
            \"lastname\": \"Fortune\",
            \"address\": {
                \"country\": \"Trinidad and Tobago\"
            }
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const person = database.getDocument(documentId);
        
        
        database.updateDocument(documentId, {
            \"firstname\": \"Osei\",
            \"lastname\": \"Fortune\",
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const isDeleted = database.deleteDocument(documentId);
    });
    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-will":{"name":"nativescript-will","version":"5.0.8","license":"MIT","readme":"\n

    NativeScript Audio

    \n    \n

    NativeScript plugin to play and record audio files for Android and iOS.

    \n

    \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"stars\"\n \n \n \"forks\"\n \n \n \"license\"\n \n \n \"donate\"\n \n \n \"nStudio\n \n

    Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.\n
    \n

    \n
    \n

    Installation

    \n

    tns plugin add nativescript-audio

    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Note: You will need to grant permissions on iOS to allow the device to access the microphone if you are using the recording function. If you don't, your app may crash on device and/or your app might be rejected during Apple's review routine. To do this, add this key to your app/App_Resources/iOS/Info.plist file:

    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>Recording Practice Sessions</string>
    \n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function() {
        console.log('finished playing');
      },
      errorCallback: function(errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function(args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    Demo App

    \n
      \n
    • fork/clone the repository
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios (scripts are located in the scripts of the package.json in the src directory if you are curious)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-fit-text":{"name":"nativescript-auto-fit-text","version":"1.0.0","license":"Apache-2.0","readme":"

    AutoFitText

    \n

    This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of it's width

    \n

    \"Example

    \n

    Prerequisites / Requirements

    \n

    This plugin is only tested with {N} > 3.0.0

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-auto-fit-text
    \n

    Usage

    \n

    Angular

    \n
    import { AutoFitTextModule } from \"nativescript-auto-fit-text/angular\"

    @NgModule({
    \t...
        imports: [
            AutoFitTextModule
        ],
        ...
    })
    export class AppModule { }
    \n

    Vanilla Nativescript

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-auto-fit-text\">
      <StackLayout class=\"p-20\">
        <ui:AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></ui:AutoFitText>
      </StackLayout>
    </Page>
    \n

    Credits

    \n

    @grantland - android-autofittextview

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http-formdata":{"name":"nativescript-http-formdata","version":"3.1.1","license":"Apache-2.0","readme":"

    A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed.

    \n

    Versions

    \n

    [3.1.1]\nFix build issues. Thanks to NathanWalker

    \n

    [3.0.0]\nUpgraded to NS 8.0.0. Thanks to Fr3nky88

    \n

    [2.1.0]\nUpgraded to NS 6.3.0. Fixed Kotlin issue. More here

    \n

    [2.0.0]\nUpgraded to NS 6.2.0. Fixed Kotlin issue. More here

    \n

    [1.6.0] Added common response in iOS and Android instead returned by native APIs.\nThanks to virtualbjorn

    \n

    [1.5.0] Now supports custom headers

    \n

    Add the plugin

    \n
    tns plugin add nativescript-http-formdata
    \n

    Dependencies

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    okhttp3OMGHTTPURLRQ
    \n

    TypeScript

    \n
    import { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';
    \n

    use the ImagePicker plugin or any other.\nhttps://github.com/NativeScript/nativescript-imagepicker

    \n
        private test() {
            let context = imagepicker.create({
                mode: \"single\" // use \"multiple\" for multiple selection
            });
            context.authorize()
            .then(function() {
                return context.present();
            })
            .then((selection) => {
              let item = selection[0];
              //UIImage for iOS and android.graphics.Bitmap for Android
              item.getImageAsync(async (image, error) => {
                let fd = new TNSHttpFormData();
        
                //create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name
                //so you can get it on server. Check below how to grab it in ASP.Net MVC
                let params = [];
                let imageData: any;
                
                if(!image) {
                    throw 'Could not get image';
                }

                if(image.ios) {
                    imageData = UIImagePNGRepresentation(image);
                } else {
                    //can be one of these overloads https://square.github.io/okhttp/3.x/okhttp/okhttp3/RequestBody.html
                    let bitmapImage: android.graphics.Bitmap = image;
                    let stream = new java.io.ByteArrayOutputStream();
                    bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                    let byteArray = stream.toByteArray();
                    bitmapImage.recycle();

                    imageData = byteArray;
                }
                let param: TNSHttpFormDataParam = {
                    data: imageData,
                    contentType: 'image/png',
                    fileName: 'test.png',
                    parameterName: 'file1'
                };
                params.push(param);
                let param2: TNSHttpFormDataParam = {
                  data: \"John Doe\",
                  parameterName: \"firstName\"
                };
                params.push(param2);

                console.log('submitting', params);
        
                try { 
                    const response: TNSHttpFormDataResponse = await fd.post('http://10.10.10.149:10025/home/fileupload', params, {
                        headers: {
                            test1: \"test1 value\",
                            \"x-version-no\": \"2.0\"
                        }
                    });
                    console.log(response);
                } catch (e) {
                    console.log('---------------home.component.ts---------------');
                    console.log(e);
                }
              });
            }).catch(function (e) {
                console.log('-------------------error----------------')
                console.log(e);
            });
        }
    \n

    Now on server to grab the file(s) in ASP.Net MVC, you can follow https://stackoverflow.com/a/16256106/859968 or following

    \n
    [HttpPost]
    //file1 and file2 are parameters name as given in NativeScript object. They must match
    public ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)
    {
        //grab your headers
        var headers = Request.Headers;
        if (file1 != null)
        {
            string pic = System.IO.Path.GetFileName(file1.FileName);
            string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
            // file is uploaded
            file1.SaveAs(path);
        }
        if (file2 != null)
        {
            string pic = System.IO.Path.GetFileName(file2.FileName);
            string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
            // file is uploaded
            file2.SaveAs(path);
        }

        // after successfully uploading redirect the user
        return RedirectToAction(\"Index\", \"Home\");
    }
    \n

    TNSHttpFormDataResponse Properties

    \n
      \n
    • headers - response header
      • \n
    • statusCode - http status code (number)
      • \n
    • statusMessage - http status code message (string)
      • \n
    • body - response body (JSON Parsed if is a json, raw string else)
      • \n
    \n

    Donation

    \n

    A donation will not make me rich, but your appreciation makes me happy 😁

    \n

    \"paypal\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-dynamo":{"name":"nativescript-aws-dynamo","version":"1.0.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    nativescript-aws-dynamo

    \n

    This plugin is limited edition to use AWS DynamoDB services.\nif you want to buy full edition or other AWS services plugins then you can touch us with this url.\nwww.cerensoftware.co.uk

    \n

    (Optional) Prerequisites / Requirements

    \n

    if you get keychain error in iOS\nyou have to install nativescript-custom-entitlements plugin to your project.\nyou add this lines to app.entitlements file.

    \n
    <dict>
        <key>keychain-access-groups</key>
        <array>
            <string>$(AppIdentifierPrefix)org.nativescript.yourprojectname</string>
        </array>
    </dict>
    \n

    Installation

    \n
    tns plugin add nativescript-aws-cognito
    \n

    Usage

    \n

    This plugin works only UnAuth, You Should give permission to UnAuth role for Dynamodb. You Would this url.

    \n
        \timport { AwsDynamo, DynamoCommonDelegate } from 'nativescript-aws-dynamo';
    \n

    You Should import plugin. You Should AwsDynamo object and DynamoCommonDelegate imlement. Your class Should implement from DynamoCommonDelegate.

    \n
        \tinterface DynamoCommonDelegate{
        \t\tonError(error:String);
        \t\tonSuccess(result:any);
    \t\t}
    \n

    You Should create AwsDynamo instance and call initDdb method. You give region and your identity pool id. You would look AWS documantation for more information.

    \n
        \tthis.awsDynamo = new AwsDynamo();
        \tthis.awsDynamo.initDdb(\"AWSRegionUSEast2\", \"us-east-2:77218a3c-b958-41qw-bf14-984d54adba56\");
    \n

    You Should these methods for CRUD operation. All Methods Async, you Should DynamoCommonDelegate instance to methods.

    \n
         this.awsDynamo.putItem(\"Books\", [{ key: \"ISBN\", value: { data: \"8\", type: \"S\" } },
        { key: \"Author\", value: { data: \"ali4\", type: \"S\" } },
        { key: \"Title\", value: { data: \"deneme4\", type: \"S\" } },
        { key: \"list1\", value: { type: \"L\", data: [{ data: \"list1\", type: \"S\" }, { data: \"3\", type: \"N\" }] } },
        { key: \"boolen\", value: { type: \"BO\", data: true } },
        { key: \"set1\", value: { type: \"SS\", data: [\"set1\", \"set2\"] } }
        ], this);
    \n
         this.awsDynamo.getItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"10\", type:\"S\"}}], this);
    \n
         this.awsDynamo.deleteItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"4\", type:\"S\"}}], this);
    \n
         this.awsDynamo.updateItem(\"Books\",[{\"key\":\"ISBN\",\"value\":{data:\"3\", type:\"S\"}}], [{key:\"set2\", value:{type:\"SS\", data:[\"set1\",\"set2\"]},\"action\":\"PUT\"}] , this);
    \n

    API

    \n

    This plugin uses ObjectiveC AWS SDk and Java AWS Sdk.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-cognito":{"name":"nativescript-aws-cognito","version":"1.0.8","license":"Apache-2.0","readme":"

    nativescript-aws-cognito

    \n

    This plugin is limited edition to use AWS Cognito services.\nif you want to buy full edition or other AWS services plugins then you can touch us with this url.\nwww.cerensoftware.co.uk

    \n

    You can look at sample project : https://github.com/aliyksel/loginproject (branch : cognito)

    \n

    (Optional) Prerequisites / Requirements

    \n

    if you get keychain error in iOS\nyou have to install nativescript-custom-entitlements plugin to your project.\nyou add this lines to app.entitlements file.

    \n
    <dict>
        <key>keychain-access-groups</key>
        <array>
            <string>$(AppIdentifierPrefix)org.nativescript.loginproject</string>
        </array>
    </dict>
    \n

    Installation

    \n

    tns plugin add nativescript-aws-cognito

    \n

    Usage

    \n
    import {AwsCognito, CognitoCommonDelegate} from \"nativescript-aws-cognito\";
    \n

    create uerpool for a cognito user pool.

    \n
      AwsCognito.createUserPool(region, cliendId, secretId, poolId, delegate);
    \n
    region : region of your pool. for example AWSRegionUSWest1.\ndelegate : instance of your class is implement from CognitoIdentityInteractiveAuthenticationDelegate.\ndelegate has startPasswordAuthentication method. this method is called when begin of  Authentication flow.\nYou must open login page.\n\nyou can create a new user.\n
    \n
       AwsCognito.registerUser(userName:, password:, attrubutes:Array<{key:string, value:string}>, delegate);
    \n
        attrubutes : they are user attributes which are you select when define the pool.\n    delegate : instance of your class is implement from CognitoCommonDelegate.\n    delegate has 2 methods.\n       onSuccess : it is called when action seccesfull\n       onError :  it is called when action has an error.\n\nAfter user created, cognito sen a digital code for confirmation to user email. you have to send digitalcode to cognito.\n```js\n    AwsCognito.confirmSignUp(userName,verifyCode, delegate);\n```\n\ndelegate : instance of your class is implement from CognitoCommonDelegate.\n    delegate has 2 methods.\n       onSuccess : it is called when action seccesfull\n       onError :  it is called when action has an error.\n\n\nyou can user details. if user signin you get details. if user not signin your class is called which is implement from CognitoIdentityInteractiveAuthenticationDelegate.\n\n```js\n    AwsCognito.getUserDetail(delegate:CognitoCommonDelegate);\n```\nyou opened login page and you got username and password from user. you call login method.\n\n```js\n    AwsCognito.login(userName:String, password:String, delegate:CognitoCommonDelegate);\n```\n```js\n    AwsCognito.signOut();\n```\n
    \n

    API

    \n
    This plugin uses ObjectiveC AWS SDk and Java AWS Sdk.\n
    \n

    License

    \n

    Apache License Version 2.0, January 2004 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xmpp":{"name":"nativescript-xmpp","version":"0.0.7","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    Nativescript XMPP

    \n

    Installation

    \n
    tns plugin add nativescript-xmpp
    \n

    Usage

    \n
    import { isIOS } from 'tns-core-modules/platform';
    import { XMPP, Presence } from 'nativescript-xmpp';
    const xmpp = new XMPP({
      username: 'user',
      password: 'password',
      domain: 'localhost',
      host: isIOS ? 'localhost' : '10.0.2.2'
    });
    xmpp.on('connected', args => {
      xmpp.login();
    });
    xmpp.on('authenticated', (args: any) => {
      const presence = new Presence();
      presence.status = 'Nice';
      xmpp.send(presence);
    });
    xmpp.connect();
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@azaschka/nativescript-file-downloader":{"name":"@azaschka/nativescript-file-downloader","version":"1.5.5","license":"Apache-2.0","readme":"

    nativescript-download-progress \"apple\" \"android\"

    \n

    \"npm

    \n

    Introduction

    \n

    This plugin allows you to download large files and provides progress updates.

    \n

    Nativescripts http.getFile method stores the data in memory which can cause out of memory exceptions and doesn't provide progress updates.

    \n

    Installation

    \n
    tns plugin add nativescript-download-progress
    \n

    Examples

    \n
    import { DownloadProgress } from \"nativescript-download-progress\";

    const dp = new DownloadProgress();
    dp.setProgressCallback((progress, url, destination) => {
      console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
    });
    dp.downloadFile(\"http://ipv4.download.thinkbroadband.com/20MB.zip\")
      .then((file) => {
        console.log(\"Success\", file);
      })
      .catch((error) => {
        console.log(\"Error\", error);
      });
    \n

    Passing request headers

    \n
    import { DownloadProgress } from \"nativescript-download-progress\";

    const dp = new DownloadProgress();
    dp.setProgressCallback((progress, url, destination) => {
      console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
    });
    const url = \"http://ipv4.download.thinkbroadband.com/20MB.zip\";
    const destinationPath = \"some/path/to/file.zip\";
    const requestOptions: RequestOptions = {
      method: \"GET\",
      headers: {
        Range: \"bytes=-\",
      },
    };
    dp.downloadFile(url, requestOptions, destinationPath)
      .then((file) => {
        console.log(\"Success\", file);
      })
      .catch((error) => {
        console.log(\"Error\", error);
      });
    \n

    Async / Await

    \n
    import { DownloadProgress } from \"nativescript-download-progress\";

    const dp = new DownloadProgress();
    dp.setProgressCallback((progress, url, destination) => {
      console.log(\"Progress:\", progress, \"URL:\", url, \"Destination\", destination);
    });
    try {
      const f = await downloadFile(
        \"http://ipv4.download.thinkbroadband.com/20MB.zip\"
      );
    } catch (e) {
      console.log(\"Error\", error);
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-sdk":{"name":"nativescript-aws-sdk","version":"0.0.4","license":"Apache-2.0","readme":"

    NativeScript AWS SDK

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-aws-sdk
    \n

    Usage

    \n

    Android

    \n

    Add the following services in the app/App_Resources/Android/AndroidManifest.xml

    \n
    <manifest ... >
        <application ... >
            ...
    <service android:name= \"com.amazonaws.mobileconnectors.s3.transferutility.TransferService\" android:enabled=\"true\" />
      </application>
    </manifest>
    \n

    TypeScript

    \n

    S3

    \n
    import { S3 } from 'nativescript-aws-sdk';
    S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
    \n
    import { S3 } from 'nativescript-aws-sdk';
    const s3 = new S3();
    const imageUploaderId = s3.createUpload({
      file: '~/assets/hulk_wolverine_x_men.jpg',
      bucketName: 'yaychat',
      key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
      acl: 'public-read',
      completed: (error, success) => {
        if (error) {
          console.log(`Download Failed :-> ${error.message}`);
        }
        if (success) {
          console.log(`Download Complete :-> ${success.path}`);
        }
      },
      progress: progress => {
        console.log(`Progress : ${progress.value}`);
      }
    });

    s3.pause(imageUploaderId);
    s3.resume(imageUploaderId);
    s3.cancel(imageUploaderId);
    \n

    JavaScript

    \n
    const S3 = require('nativescript-aws-sdk').S3;
    S3.S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
    \n
    const imageUploaderId = s3.createUpload({
      file: '~/assets/hulk_wolverine_x_men.jpg',
      bucketName: 'yaychat',
      key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
      acl: 'public-read',
      completed: (error, success) => {
        if (error) {
          console.log(`Download Failed :-> ${error.message}`);
        }
        if (success) {
          console.log(`Download Complete :-> ${success.path}`);
        }
      },
      progress: progress => {
        console.log(`Progress : ${progress.value}`);
      }
    });

    s3.pause(imageUploaderId);
    s3.resume(imageUploaderId);
    s3.cancel(imageUploaderId);
    \n

    Api

    \n

    S3

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    createDownload(options: S3DownloadOptions)numberCreates a task it returns the id of the task
    createUpload(options: S3UploadOptions)numberCreates a task it returns the id of the task
    resume(id: number)voidResumes a task.
    cancel(id: number)voidCancels a task.
    pause(id: number)voidPauses a task.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-color-picker":{"name":"nativescript-color-picker","version":"1.6.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-recycler":{"name":"nativescript-nbmaterial-recycler","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of the Recycler View

    \n

    The recycler view is only available in Android. It has better performance than the default list view when the datasource size increase.\non iOS it uses the defult ListView implementation.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:rec=\"nativescript-nbmaterial-recycler\">
     \t\t<rec:RecyclerView row=\"0\"  items=\"{{source}}\" id=\"list\" itemTap=\"tapItem\" itemLongTap=\"tapLongItem\" itemTemplateSelector=\"templateSelector\">
    \t\t\t\t<rec:RecyclerView.itemTemplates>
    \t\t\t\t\t<template key=\"zero\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"green\" />
    \t\t\t\t\t</template>
    \t\t\t\t\t<template key=\"un\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"white\" paddingTop=\"10\"  paddingBottom=\"10\" />
    \t\t\t\t\t</template>
    \t\t\t\t\t<template key=\"deux\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"red\"/>
    \t\t\t\t\t</template>
    \t\t\t\t</rec:RecyclerView.itemTemplates>
    \t\t\t</rec:RecyclerView>
    </Page>

    }
    \n

    The RecyclerView has this interface:

    \n
    export declare class RecyclerView extends ListView {
        public static itemLongTapEvent;
        public recycler: any;
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@abbieben/rich-text":{"name":"@abbieben/rich-text","version":"3.0.12","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-base64":{"name":"nativescript-base64","version":"1.2.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-call":{"name":"nativescript-call","version":"0.2.0","license":"Apache-2.0","readme":"

    NativeScript Call plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Dude, I already have a Phone app on my phone..

    \n

    Sure 😅

    \n

    But what if your app supports VOIP / WebRTC calls? You'll want to have the operating system pop up the\nnative call dialog, right? That's where this plugin comes in.

    \n

    Currently iOS only, where we leverage CallKit, which is part of the iOS SDK since iOS 10.

    \n

    Installation

    \n
    tns plugin add nativescript-call
    \n

    Demo

    \n

    Check the source in the demo folder, or run it on your own device:

    \n
    git clone https://github.com/EddyVerbruggen/nativescript-call
    cd nativescript-call/src
    npm i
    npm run demo.ios
    \n
    \n

    Usage in NativeScript-Angular and NativeScript-Vue is nothing different from what you'd do in NativeScript-Core.

    \n
    \n

    API

    \n

    receiveCall

    \n

    The properties you can pass to this method are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    appNamestringThe app's name, as shown on the caller screen. Default the name of your app.
    iconstringThe name of an icon to show for your app. Loaded from the App_Resources folder (see the demo).
    handleTypeTNSCallHandleTypeEither "PHONE" (default) or "EMAIL".
    handleIdstringEither a phone number when handleType is "PHONE", or an email address when handleType is "EMAIL".
    callerNamestringThe name to be displayed on the call UI.
    hasVideobooleanWhether or not this call supports video. Default false.
    supportsDTMFbooleanWhether the call can send DTMF (dual tone multifrequency) tones via hard pause digits or in-call keypad entries. Default false.
    \n

    The event handlers you can pass to this method are:

    \n

    | Name | Description |\n| --- | --- | --- |\n| onSpeakerOn | Triggered when the speaker is turned on. |\n| onSpeakerOff | Triggered when the speaker is turned off. |

    \n
    import { TNSCall } from \"nativescript-call\";
    const tnsCall = new TNSCall();

    tnsCall.receiveCall(
        {
          appName: \"My App\",
          icon: \"download-from-cloud\", // see demo/app/App_Resources/iOS
          handleType: \"PHONE\",
          handleId: \"+31612345678\",
          callerName: \"Donald J. Drumpf\",
          hasVideo: true,
          supportsDTMF: true,
          onSpeakerOn: () => console.log(\"Speaker ON\"),
          onSpeakerOff: () => console.log(\"Speaker OFF\")
        })
        .then(() => console.log(\"Receive call success\"))
        .catch(err => console.log(\"Error receiving call: \" + err));
    \n

    endCall

    \n
    import { TNSCall } from \"nativescript-call\";
    const tnsCall = new TNSCall();

    tnsCall.endCall()
        .then(() => console.log(\"Ended call\"))
        .catch(err => console.log(\"Error ending call: \" + err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-filepickers":{"name":"nativescript-filepickers","version":"1.0.3","license":"Apache-2.0","readme":"

    nativescript-filepickers \"apple\" \"android\"

    \n
    \n

    Features

    \n
    \n
      \n
    • Supports scoped storage
      • \n
    • Can open file from both external and app's internal storage
      • \n
    • Can get path from both external and app's internal storage
      • \n
    • Can copy files to internal storage
      • \n
    • nativescript-filepickers plugin supporting both single and multiple selection.
      • \n
    • Supports any kinds of extensions
      • \n
    \n
    \n

    (NEW) @1.0.3

    \n
    \n
      \n
    • Show just once and always options while opening file with OpenFile(path)\nExample:
      import { CopyTo, Create, Extensions, Modes, OpenFile } from \"nativescript-filepickers\";

      const context = Create({
          extensions: ['pdf', 'xls'],
          mode: Modes.Single,
      });
      context
          .Authorize()
          .then(() => {
          return context.Present();
          })
          .then((assets) => {
              assets.forEach((asset) => {
                  const newPath = CopyTo(asset);
                  OpenFile(newPath);
                  this.selectedImages.push(newPath);
                  console.log(\"Real Path: \" + asset);
                  console.log(\"Copied Path: \" + newPath);
              });
          });
      \n
      • \n
    \n
    \n

    Supported platforms

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OSVersion
    Android 11API 30
    Android 10(partially tested)API 29(partially tested)
    Android 9(partially tested)API 28(partially tested)
    IOS support is comingIOS support is coming
    \n
    npm i nativescript-filepickers
    \n

    Import the plugin

    \n

    TypeScript

    \n
    import { CopyTo, Create, Extensions, Modes, OpenFile } from \"nativescript-filepickers\";
    \n

    Create filepicker

    \n

    Create filepicker in single or multiple mode to specifiy if the filepicker will be used for single or multiple selection of images

    \n

    TypeScript

    \n
    const context = Create({
        extensions: ['pdf', 'xls'],
        mode: Modes.Single,
    });
    \n

    Request permissions, show the images list and process the selection

    \n
    context
        .Authorize()
        .then(() => {
        return context.Present();
        })
        .then((assets) => {
            assets.forEach((asset) => {
                const newPath = CopyTo(asset);
                this.selectedImages.push(newPath);
                console.log(\"Real Path: \" + asset);
                console.log(\"Copied Path: \" + newPath);
            });
        });
    \n
    \n

    NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

    \n
    \n
    \n

    NOTE: To be sure to have permissions add the following lines in AndroidManifest.xml

    \n
    \n
    <manifest ... >
    \t<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
    \t<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
    \t<uses-permission android:name=\"android.permission.MANAGE_EXTERNAL_STORAGE\" />

      <application android:requestLegacyExternalStorage=\"true\" ... >
        ...
      </application>
    </manifest>
    \n

    API

    \n

    Methods

    \n
      \n
    • Create(options) - creates instance of the filepicker. Possible options are:
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionPlatformDefaultDescription
    modebothModes.SingleThe mode if the filepicker. Possible values are Modes.Single for single selection and Modes.Multiple for multiple selection.
    extensionsboth--Choose Extensions.All for accepting all types of files or explicitly define types array like ['pdf', 'xls', 'png']
    \n
      \n
    • Authorize() - request the required permissions.
      • \n
    • Present() - show the albums to present the user the ability to select files. Returns an array of the selected file's actual path on device.
      • \n
    • OpenFile(path: string, isAbsolute = false) - It opens file from both app's internal storage and external storage if isAbsolute flag is true.
      • \n
    • CopyTo(path: string) - It copied files from path to app's internal storage and returns the destination path.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-mapbox":{"name":"@enduco/nativescript-mapbox","version":"2.1.24","license":"MIT","readme":"\n \n\n

    NativeScript Mapbox plugin

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    Awesome native OpenGL-powered maps - by Mapbox

    \n\n
    \n

    There is a NativeScript Core Modules bug under Android that causes random crashes on navigation. See ./demo-angular/README.md for a workaround.\nhttps://github.com/NativeScript/NativeScript/issues/7954\nhttps://github.com/NativeScript/NativeScript/issues/7867

    \n
    \n

    Before you begin - Prerequisites

    \n

    You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token (they have a 🆓 Starter plan!), so sign up with Mapbox.\nOnce you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.

    \n

    You will also need to set up your development environment. Please refer to the NativeScript documentation.

    \n

    Installation

    \n
    $ tns plugin install nativescript-mapbox
    \n

    DEMOS

    \n

    Two demo applications are available in the repository.

    \n

    To run them, you'll need to clone the github repository and build the plugin. See below.

    \n

    You will also need an access token. Your access_token can then be set in the top level mapbox_config.ts file.

    \n

    The style can be set to one of the Mapbox style names or it can be the URL of your own hosted tile server.

    \n
    \n

    NOTE: As of this writing, the NativeScript demo only works with a mapbox token. The demo-angular will work with either a self hosted tile server or a mapbox token.

    \n
    \n

    To run the Angular demo

    \n
    cd src
    npm run build.release
    cd ../demo-angular
    tns run <platform>
    \n

    To run the plain Nativescript demo

    \n
    cd src
    npm run build.release
    cd ../demo
    tns run <platform>
    \n

    Debug Build

    \n

    To come up to speed on the plugin, I added extensive trace messages.\nThese can be turned on by replacing 'npm run build.release' with 'npm run build.debug' in the commands above.

    \n

    Breaking Changes

    \n

    This version includes breaking API changes.

    \n

    The intent moving forward is to mirror, to the maximum extent practical, the Mapbox GL JS API to enable\nsharing of mapping code between browser based and native applications.

    \n

    Issues

    \n

    If you get an error during iOS build related to Podspec versions, probably the easiest fix is:\ntns platform remove ios and tns platform add ios.

    \n

    On Android the plugin adds this to the <application> node of app/App_Resources/Android/AndroidManifest.xml (the plugin already attempts to do so):

    \n
      <service android:name=\"com.mapbox.services.android.telemetry.service.TelemetryService\" />
    \n

    If you get an error related to TelemetryService then please check it's there.

    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    If you want a quickstart, see the demo in this repository.\nIt shows you how to draw a map in XML and JS with almost all possible options.

    \n

    Demo app (Angular)

    \n

    There is also the beginnings of an Angular demo in demo-angular in this repository.

    \n

    Declaring a map in the view

    \n

    XML

    \n

    You can instantiate a map from JS or TS. As the map is yet another view component it will play nice with any NativeScript layout you throw it in. You can also easily add multiple maps to the same page or to different pages in any layout you like.

    \n

    A simple layout could look like this:

    \n\n

    Could be rendered by a definition like this:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:map=\"nativescript-mapbox\" navigatingTo=\"navigatingTo\">
      <StackLayout>
        <Label text=\"Nice map, huh!\" class=\"title\"/>
        <ContentView height=\"240\" width=\"240\">
          <map:MapboxView
              accessToken=\"your_token\"
              mapStyle=\"traffic_night\"
              latitude=\"52.3702160\"
              longitude=\"4.8951680\"
              zoomLevel=\"3\"
              showUserLocation=\"true\"
              mapReady=\"onMapReady\">
          </map:MapboxView>
        </ContentView>
      </StackLayout>
    </Page>
    \n

    Angular

    \n

    Component:

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(\"Mapbox\", () => require(\"nativescript-mapbox\").MapboxView);
    \n

    View:

    \n
      <ContentView height=\"100%\" width=\"100%\">
        <Mapbox
            accessToken=\"your_token\"
            mapStyle=\"traffic_day\"
            latitude=\"50.467735\"
            longitude=\"13.427718\"
            hideCompass=\"true\"
            zoomLevel=\"18\"
            showUserLocation=\"false\"
            disableZoom=\"false\"
            disableRotation=\"false\"
            disableScroll=\"false\"
            disableTilt=\"false\"
            (mapReady)=\"onMapReady($event)\">
        </Mapbox>
      </ContentView>
    \n

    Available XML/Angular options

    \n

    All currently supported options for your XML based map are (don't use other properties - if you need styling wrap the map in a ContentView and apply things like width to that container!):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optiondefaultdescription
    accesstoken-see 'Prerequisites' above
    delay0A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
    mapStylestreetsstreets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/)
    latitude -Set the center of the map by passing this in
    longitude-.. and this as well
    zoomLevel00-20
    showUserLocation falseRequires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
    hideCompass falseDon't show the compass in the top right corner during rotation of the map
    hideLogofalseMapbox requires false if you're on a free plan
    hideAttribution trueMapbox requires false if you're on a free plan
    disableZoomfalseDon't allow the user to zoom in or out (pinch and double-tap)
    disableRotationfalseDon't allow the user to rotate the map (two finger gesture)
    disableScrollfalseDon't allow the user to move the center of the map (one finger drag)
    disableTiltfalseDon't allow the user to tilt the map (two finger drag up or down)
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    moveBeginEvent-The name of a function to be called when the map is moved.
    locationPermissionGranted-The name of a callback function you can declare to get notified when the user granted location permissions
    locationPermissionDenied-The name of a callback function you can declare to get notified when the user denied location permissions (will never fire on iOS because there's nothing to deny)
    \n

    Want to add markers?

    \n

    This is where that last option in the table above comes in - mapReady.\nIt allows you to interact with the map after it has been drawn to the page.

    \n

    Open main-page.[js|ts] and add this (see addMarkers further below for the full marker API):

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
      var nativeMapView = args.ios ? args.ios : args.android;
      console.log(\"Mapbox onMapReady for \" + (args.ios ? \"iOS\" : \"Android\") + \", native object received: \" + nativeMapView);

      // .. or use the convenience methods exposed on args.map, for instance:
      args.map.addMarkers([
        {
          lat: 52.3602160,
          lng: 4.8891680,
          title: 'One-line title here',
          subtitle: 'Really really nice location',
          selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
          onCalloutTap: function(){console.log(\"'Nice location' marker callout tapped\");}
        }]
      );
    }

    exports.onMapReady = onMapReady;
    \n

    .. or want to set the viewport bounds?

    \n
    var mapbox = require(\"nativescript-mapbox\");

    function onMapReady(args) {
      args.map.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true
          }
      );
    }

    exports.onMapReady = onMapReady;
    \n

    The methods you can invoke like this from an XML-declared map are:\naddMarkers, setViewport, removeMarkers, getCenter, setCenter, getZoomLevel, setZoomLevel, getViewport, getTilt, setTilt, setMapStyle, animateCamera, addPolygon, removePolygons, addPolyline, removePolylines, getUserLocation, trackUser, setOnMapClickListener, setOnMapLongClickListener and destroy.

    \n

    Check out the usage details on the functions below.

    \n

    Declaring a map programmatically

    \n

    Add a container to your view XML where you want to programmatically add the map. Give it an id.

    \n
    <ContentView id=\"mapContainer\" />
    \n

    show

    \n

        const contentView : ContentView = <ContentView>page.getViewById( 'mapContainer' );

        const settings = {

          // NOTE: passing in the container here.

          container: contentView,
          accessToken: ACCESS_TOKEN,
          style: MapStyle.LIGHT,
          margins: {
            left: 18,
            right: 18,
            top: isIOS ? 390 : 454,
            bottom: isIOS ? 50 : 8
          },
          center: {
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 9, // 0 (most of the world) to 20, default 0
          showUserLocation: true, // default false
          hideAttribution: true, // default false
          hideLogo: true, // default false
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disableTilt: false, // default false
          markers: [
            {
              id: 1,
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location',
              iconPath: 'res/markers/green_pin_marker.png',
              onTap: () => console.log(\"'Nice location' marker tapped\"),
              onCalloutTap: () => console.log(\"'Nice location' marker callout tapped\")
            }
          ]
        };

        console.log( \"main-view-model:: doShow(): creating new MapboxView.\" );

        const mapView = new MapboxView();

        // Bind some event handlers onto our newly created map view. 

        mapView.on( 'mapReady', ( args : any ) => {

          console.log( \"main-view-model: onMapReady fired.\" );

          // this is an instance of class MapboxView

          this.mapboxView = args.map;

          // get a reference to the Mapbox API shim object so we can directly call its methods.

          this.mapbox = this.mapboxView.getMapboxApi();

          this.mapbox.setOnMapClickListener( point => {
            console.log(`>> Map clicked: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnMapLongClickListener( point => {
            console.log(`>> Map longpressed: ${JSON.stringify(point)}`);
            return true;
          });

          this.mapbox.setOnScrollListener((point: LatLng) => {
            // console.log(`>> Map scrolled`);
          });

          this.mapbox.setOnFlingListener(() => {
            console.log(`>> Map flinged\"`);
          }).catch( err => console.log(err) );

        });

        mapView.setConfig( settings );
        contentView.content = mapView;
    \n

    hide

    \n

    All further examples assume mapbox has been required.\nAlso, all functions support promises, but we're leaving out the .then() stuff for brevity where it doesn't add value.

    \n
      mapbox.hide();
    \n

    unhide

    \n

    If you previously called hide() you can quickly unhide the map,\ninstead of redrawing it (which is a lot slower and you loose the viewport position, etc).

    \n
      mapbox.unhide();
    \n

    destroy 💥

    \n

    To clean up the map entirely you can destroy instead of hide it:

    \n
      mapbox.destroy();
    \n

    setMapStyle

    \n

    You can update the map style after you've loaded it.

    \n
    \n

    With Mapbox Android SDK 6.1.x (used in plugin version 4.1.0) I've seen Android crash a few seconds after this has been used, so test this well and perhaps don't use it when in doubt.

    \n
    \n
      mapbox.setMapStyle(mapbox.MapStyle.DARK);
    \n

    addMarkers

    \n
      import { MapboxMarker } from \"nativescript-mapbox\";

      const firstMarker = <MapboxMarker>{ //cast as a MapboxMarker to pick up helper functions such as update()
        id: 2, // can be user in 'removeMarkers()'
        lat: 52.3602160, // mandatory
        lng: 4.8891680, // mandatory
        title: 'One-line title here', // no popup unless set
        subtitle: 'Infamous subtitle!',
        // icon: 'res://cool_marker', // preferred way, otherwise use:
        icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
        iconPath: 'res/markers/home_marker.png',
        selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
        onTap: marker => console.log(\"Marker tapped with title: '\" + marker.title + \"'\"),
        onCalloutTap: marker => alert(\"Marker callout tapped with title: '\" + marker.title + \"'\")
      };

      mapbox.addMarkers([
        firstMarker,
        {
          // more markers..
        }
      ])
    \n

    Updating markers

    \n

    Plugin version 4.2.0 added the option to update makers. Just call update on the MapboxMarker reference you created above.\nYou can update the following properties (all but the icon really):

    \n
      firstMarker.update({
        lat: 52.3622160,
        lng: 4.8911680,
        title: 'One-line title here (UPDATE)',
        subtitle: 'Updated subtitle',
        selected: true, // this will trigger the callout upon update
        onTap: (marker: MapboxMarker) => console.log(`UPDATED Marker tapped with title: ${marker.title}`),
        onCalloutTap: (marker: MapboxMarker) => alert(`UPDATED Marker callout tapped with title: ${marker.title}`)
      })
    \n

    removeMarkers

    \n

    You can either remove all markers by not passing in an argument,\nor remove specific marker id's (which you specified previously).

    \n
      // remove all markers
      mapbox.removeMarkers();

      // remove specific markers by id
      mapbox.removeMarkers([1, 2]);
    \n

    setViewport

    \n

    If you want to for instance make the viewport contain all markers you\ncan set the bounds to the lat/lng of the outermost markers using this function.

    \n
      mapbox.setViewport(
          {
            bounds: {
              north: 52.4820,
              east: 5.1087,
              south: 52.2581,
              west: 4.6816
            },
            animated: true // default true
          }
      )
    \n

    getViewport

    \n
      mapbox.getViewport().then(
          function(result) {
            console.log(\"Mapbox getViewport done, result: \" + JSON.stringify(result));
          }
      )
    \n

    setCenter

    \n
      mapbox.setCenter(
          {
            lat: 52.3602160, // mandatory
            lng: 4.8891680, // mandatory
            animated: false // default true
          }
      )
    \n

    getCenter

    \n

    Here the promise callback makes sense, so adding it to the example:

    \n
      mapbox.getCenter().then(
          function(result) {
            console.log(\"Mapbox getCenter done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getCenter error: \" + error);
          }
      )
    \n

    setZoomLevel

    \n
      mapbox.setZoomLevel(
          {
            level: 6.5, // mandatory, 0-20
            animated: true // default true
          }
      )
    \n

    getZoomLevel

    \n
      mapbox.getZoomLevel().then(
          function(result) {
            console.log(\"Mapbox getZoomLevel done, result: \" + JSON.stringify(result));
          },
          function(error) {
            console.log(\"mapbox getZoomLevel error: \" + error);
          }
      )
    \n

    animateCamera

    \n
      // this is a boring triangle drawn near Amsterdam Central Station
      mapbox.animateCamera({
        // this is where we animate to
        target: {
            lat: 52.3732160,
            lng: 4.8941680
        },
        zoomLevel: 17, // Android
        altitude: 2000, // iOS (meters from the ground)
        bearing: 270, // Where the camera is pointing, 0-360 (degrees)
        tilt: 50,
        duration: 5000 // default 10000 (milliseconds)
      })
    \n

    setTilt (Android only)

    \n
      mapbox.setTilt(
          {
            tilt: 40, // default 30 (degrees angle)
            duration: 4000 // default 5000 (milliseconds)
          }
      )
    \n

    getTilt (Android only)

    \n
      mapbox.getTilt().then(
          function(tilt) {
            console.log(\"Current map tilt: \" +  tilt);
          }
      )
    \n

    getUserLocation

    \n

    If the user's location is shown on the map you can get their coordinates and speed:

    \n
      mapbox.getUserLocation().then(
          function(userLocation) {
            console.log(\"Current user location: \" +  userLocation.location.lat + \", \" + userLocation.location.lng);
            console.log(\"Current user speed: \" +  userLocation.speed);
          }
      )
    \n

    trackUser

    \n

    In case you're showing the user's location, you can have the map track the position.\nThe map will continuously move along with the last known location.

    \n
      mapbox.trackUser({
        mode: \"FOLLOW_WITH_HEADING\", // \"NONE\" | \"FOLLOW\" | \"FOLLOW_WITH_HEADING\" | \"FOLLOW_WITH_COURSE\"
        animated: true
      });
    \n

    addSource

    \n

    https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource

    \n

    Adds a vector to GeoJSON source to the map.

    \n
      mapbox.addSource( id, {
        type: 'vector',
        url: 'url to source'
      } );
    \n

    -or-

    \n
      mapbox.addSource( id, {
        'type': 'geojson',
        'data': {
          \"type\": \"Feature\",
            \"geometry\": {
            \"type\": \"LineString\",
              \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
            }
          }
        }
      );
    \n

    removeSource

    \n

    Remove a source by id

    \n
      mapbox.removeSource( id );
    \n

    addLayer

    \n

    NOTE: For version 5 the API for addLayer() has changed and is now a subset of the web-gl-js API.

    \n

    https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers

    \n

    To add a line:

    \n
      mapbox.addLayer({
        'id': someid,
        'type': 'line',
        'source': {
          'type': 'geojson',
          'data': {
            \"type\": \"Feature\",
              \"geometry\": {
              \"type\": \"LineString\",
                \"coordinates\": [ [ lng, lat ], [ lng, lat ], ..... ]
              }
            }
          }
        },
        'layout': {
          'line-cap': 'round',
          'line-join': 'round'
        },    
        'paint': {
          'line-color': '#ed6498',
          'line-width': 5,
          'line-opacity': .8,
          'line-dash-array': [ 1, 1, 1, ..]
        }
      });
    \n

    To add a circle:

    \n
      mapbox.addLayer({
        \"id\": someid,
        \"type\": 'circle',
        \"radius-meters\": 500,   // FIXME: radius in meters used for in-circle click detection. 
        \"source\": {
          \"type\": 'geojson',
          \"data\": {
            \"type\": \"Feature\",
            \"geometry\": {
              \"type\": \"Point\",
              \"coordinates\": [ lng, lat ]
            }
          }
        }, 
        \"paint\": {
          \"circle-radius\": {
            \"stops\": [
              [0, 0],
              [20, 8000 ]
            ],
            \"base\": 2
          },
          'circle-opacity': 0.05,
          'circle-color': '#ed6498',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ed6498'
        } 
      });
    \n

    Source may be a geojson or vector source description or may be\nthe id of a source added using addSource()

    \n

    removeLayer

    \n

    Remove a layer added with addLayer() by id.

    \n
      mapbox.removeLayer( id );
    \n

    addLinePoint

    \n

    Dynamically add a point to a line.

    \n
      mapbox.addLinePoint( <id of line layer>, lnglat )
    \n

    where lnglat is an array of two points, a longitude and a latitude.

    \n

    addPolygon

    \n

    Draw a shape. Just connect the dots like we did as a toddler.

    \n

    The first person to tweet a snowman drawn with this function gets a T-shirt.

    \n
      // after adding this, scroll to Amsterdam to see a semi-transparent red square
      mapbox.addPolygon(
          {
            id: 1, // optional, can be used in 'removePolygons'
            fillColor: new Color(\"red\"),
            fillOpacity: 0.7,

            // stroke-related properties are only effective on iOS
            strokeColor: new Color(\"green\"),
            strokeWidth: 8,
            strokeOpacity: 0.5,

            points: [
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              },
              {
                lat: 52.35421556258807,
                lng: 4.9308013916015625
              },
              {
                lat: 52.353796172573944,
                lng: 4.8799896240234375
              },
              {
                lat: 52.3864966440161,
                lng: 4.8621368408203125
              },
              {
                lat: 52.3923633970718,
                lng: 4.902648925781249
              }
            ]
          })
          .then(result => console.log(\"Mapbox addPolygon done\"))
          .catch((error: string) => console.log(\"mapbox addPolygon error: \" + error));
    \n

    removePolygons

    \n

    You can either remove all polygons by not passing in an argument,\nor remove specific polygon id's (which you specified previously).

    \n
      // remove all polygons
      mapbox.removePolygons();

      // remove specific polygons by id
      mapbox.removePolygons([1, 2]);
    \n

    addPolyline

    \n

    Deprecated. Use addLayer() instead.

    \n

    Draw a polyline. Connect the points given as parameters.

    \n
      // Draw a two segment line near Amsterdam Central Station
      mapbox.addPolyline({
          id: 1, // optional, can be used in 'removePolylines'
          color: '#336699', // Set the color of the line (default black)
          width: 7, // Set the width of the line (default 5)
          opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
          points: [
              {
                  'lat': 52.3833160, // mandatory
                  'lng': 4.8991780 // mandatory
              },
              {
                  'lat': 52.3834160,
                  'lng': 4.8991880
              },
              {
                  'lat': 52.3835160,
                  'lng': 4.8991980
              }
          ]
      });
    \n

    removePolylines

    \n

    Deprecated. Use removeLayer() instead.

    \n

    You can either remove all polylines by not passing in an argument,\nor remove specific polyline id's (which you specified previously).

    \n
      // remove all polylines
      mapbox.removePolylines();

      // remove specific polylines by id
      mapbox.removePolylines([1, 2]);
    \n

    addSource

    \n

    Add a source that can be used by addLayer. Note only vector type is currently supported.

    \n
      mapbox.addSource(
        id: \"terrain-source\", // required
        type: \"vector\", // supported types: vector
        url: \"mapbox://mapbox.mapbox-terrain-v2\"
      );
    \n

    removeSource

    \n

    Remove a source by id.

    \n
      mapbox.removeSource(\"terrain-source\");
    \n

    addLayer

    \n

    Add a layer from a source to the map. Note only circle, fill and line types are currently supported.

    \n
      mapbox.addLayer(
        id: \"terrain-data\",  // required
        source: \"terrain-source\",  // id of source
        sourceLayer: \"contour\",  // id of layer from source
        type: \"line\", // supported types: circle, fill, line
        lineJoin: \"round\",
        lineCap: \"round\",
        lineColor: \"#ff69b4\",
        lineWidth: 1,
      );
    \n

    removeLayer

    \n

    Remove a layer by id.

    \n
      mapbox.removeLayer(\"terrain-data\");
    \n

    setOnMapClickListener

    \n

    Add a listener to retrieve lat and lng of where the user taps the map (not a marker).

    \n
      mapbox.setOnMapClickListener((point: LatLng) => {
        console.log(\"Map clicked at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnMapLongClickListener

    \n

    Add a listener to retrieve lat and lng of where the user longpresses the map (not a marker).

    \n
      mapbox.setOnMapLongClickListener((point: LatLng) => {
        console.log(\"Map longpressed at latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    setOnScrollListener

    \n

    Add a listener to retrieve lat and lng of where the user scrolls to on the map.

    \n
      mapbox.setOnScrollListener((point?: LatLng) => {
        console.log(\"Map scrolled to latitude: \" + point.lat + \", longitude: \" + point.lng);
      });
    \n

    Offline maps

    \n

    For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions.

    \n

    Important read: the offline maps documentation by Mapbox.

    \n

    downloadOfflineRegion

    \n

    This example downloads the region 'Amsterdam' on zoom levels 9, 10 and 11 for map style 'outdoors'.

    \n
      mapbox.downloadOfflineRegion(
        {
          accessToken: accessToken, // required for Android in case no map has been shown yet
          name: \"Amsterdam\", // this name can be used to delete the region later
          style: mapbox.MapStyle.OUTDOORS,
          minZoom: 9,
          maxZoom: 11,
          bounds: {
            north: 52.4820,
            east: 5.1087,
            south: 52.2581,
            west: 4.6816
          },
          // this function is called many times during a download, so
          // use it to show an awesome progress bar!
          onProgress: function (progress) {
            console.log(\"Download progress: \" + JSON.stringify(progress));
          }
        }
      ).then(
        function() {
          console.log(\"Offline region downloaded\");
        },
        function(error) {
          console.log(\"Download error: \" + error);
        }
      );
    \n

    Advanced example: download the current viewport

    \n

    Grab the viewport with the mapbox.getViewport() function and download it at various zoom levels:

    \n
      // I spare you the error handling on this one..
      mapbox.getViewport().then(function(viewport) {
        mapbox.downloadOfflineRegion(
          {
            name: \"LastViewport\", // anything you like really
            style: mapbox.MapStyle.LIGHT,
            minZoom: viewport.zoomLevel,
            maxZoom: viewport.zoomLevel + 2, // higher zoom level is lower to the ground
            bounds: viewport.bounds,
            onProgress: function (progress) {
              console.log(\"Download %: \" + progress.percentage);
            }
          }
        );
      });
    \n

    listOfflineRegions

    \n

    To help you manage offline regions there's a listOfflineRegions function you can use. You can then fi. call deleteOfflineRegion (see below) and pass in the name to remove any cached region(s) you like.

    \n
      mapbox.listOfflineRegions({
        // required for Android in case no map has been shown yet
        accessToken: accessToken
      }).then(
        function(regions) {
          console.log(JSON.stringify(JSON.stringify(regions));
        },
        function(error) {
          console.log(\"Error while listing offline regions: \" + error);
        }
      );
    \n

    deleteOfflineRegion

    \n

    You can remove regions you've previously downloaded. Any region(s) matching the name param will be removed locally.

    \n
      mapbox.deleteOfflineRegion({
        name: \"Amsterdam\"
      }).then(
        function() {
          console.log(\"Offline region deleted\");
        },
        function(error) {
          console.log(\"Error while deleting an offline region: \" + error);
        }
      );
    \n

    Permissions

    \n

    hasFineLocationPermission / requestFineLocationPermission

    \n

    On Android 6 you need to request permission to be able to show the user's position on the map at runtime when targeting API level 23+.\nEven if the uses-permission tag for ACCESS_FINE_LOCATION is present in AndroidManifest.xml.

    \n

    You don't need to do this with plugin version 2.4.0+ as permission is request when required while rendering the map. You're welcome :)

    \n

    Note that hasFineLocationPermission will return true when:

    \n
      \n
    • You're running this on iOS, or
      • \n
    • You're targeting an API level lower than 23, or
      • \n
    • You're using Android < 6, or
      • \n
    • You've already granted permission.
      • \n
    \n
      mapbox.hasFineLocationPermission().then(
          function(granted) {
            // if this is 'false' you probably want to call 'requestFineLocationPermission' now
            console.log(\"Has Location Permission? \" + granted);
          }
      );

      // if no permission was granted previously this will open a user consent screen
      mapbox.requestFineLocationPermission().then(
          function() {
            console.log(\"Location permission requested\");
          }
      );
    \n

    Note that the show function will also check for permission if you passed in showUserLocation : true.\nIf you didn't request permission before showing the map, and permission was needed, the plugin will ask the user permission while rendering the map.

    \n

    Using marker images from the internet

    \n

    If you specify icon: 'http(s)://some-remote-image', then on iOS you'll need to whitelist\nthe domain. Google for iOS ATS for detailed options, but for a quick test you can add this to\napp/App_Resources/iOS/Info.plist:

    \n
    \t<key>NSAppTransportSecurity</key>
    \t<dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
    \t</dict>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cblite":{"name":"nativescript-cblite","version":"1.0.4","license":"Apache-2.0","readme":"

    NativeScript CB-Lite

    \n

    A plugin for Couchbase Lite on NativeScript supporting LiteServ internal REST operations.

    \n

    Status

    \n

    Android version working but yet in CBL 1.4.4. iOS still pending some code. For a complete and updated plugin check:\nhttps://github.com/triniwiz/nativescript-couchbase-plugin

    \n

    Installation

    \n
    tns plugin add nativescript-cblite
    \n

    Usage

    \n

    First you need to import the main class

    \n
    import { CBLite } from 'nativescript-cblite';
    \n

    In case you'll use the REST api, the following command will initialize it and provide the base url:

    \n
    const url = Utils.startCBLListener();
    \n

    Then you need to instantiate the CBLite class

    \n
    const cblite = new CBLite('databaseName');
    \n

    Creating a local document

    \n
    cblite.createDocument({name: 'John Doe', age: 99}, 'myDocumentId');
    \n

    Reading a local document

    \n
    // It will return a JSON object or false if the document does not exist
    cblite.getDocument('myDocumentId');
    \n

    Updating local document

    \n
    cblite.updateDocument('myDocumentId', {newData: 'My new data string'});
    \n

    Replicating your documents with a SyncGateway server

    \n

    First you need to import the proper classes

    \n
    import { CBLite, Replicator } from 'nativescript-cblite';
    \n

    Then you need to instantiate those classes

    \n
    const cblite = new CBLite('databaseName');
    const pushReplicator: Replicator = cblite.createPushReplication('myRemoteUrl');
    const pullReplicator: Replicator = cblite.createPullReplication('myRemoteUrl');
    \n

    Setting up the replication

    \n
    pushReplicator.setContinuous(true);
    pushReplicator.setAuthenticator('username', 'password');
    pushReplicator.start();

    pullReplicator.setContinuous(true);
    pullReplicator.setAuthenticator('username', 'password');
    pullReplicator.start();
    \n

    API Reference

    \n

    Class CBLite

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method nameParametersReturn type
    getDocumentdocumentIdObject
    listAllDocuments-string[]
    listAllReplications-string[]
    addDatabaseChangeListenercallbackvoid
    createDocumentdata, documentIdstring
    updateDocumentdocumentId, datavoid
    deleteDocumentdocumentIdboolean
    createPullReplicationremoteUrlReplicator
    createPushReplicationremoteUrlReplicator
    \n

    Class Replicator

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method nameParametersReturn type
    start-void
    stop-void
    isRunning-boolean
    addReplicationChangeListenerchangeListenerCallbackvoid
    setAuthenticatorusername, passwordvoid
    setContinuouscontinuousvoid
    setDocumentIdsdocIdsvoid
    setCookiename, value, path, expirationDate, secure, httpOnlyvoid
    deleteCookienamevoid
    \n

    More documentation incoming soon

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@entreek/nativescript-fingerprint-auth":{"name":"@entreek/nativescript-fingerprint-auth","version":"8.1.2","license":"Apache-2.0","readme":"

    @nativescript/fingerprint-auth

    \n
    ns plugin add @nativescript/fingerprint-auth
    \n

    Then open App_Resources/Android/app.gradle and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line to App_Resources/Android/src/main/AndroidManifest.xml:

    \n
      <uses-sdk
          android:minSdkVersion=\"17\"
          android:targetSdkVersion=\"__APILEVEL__\"
          tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
    \n

    API

    \n

    Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

    \n

    available

    \n

    JavaScript

    \n
    var fingerprintAuthPlugin = require('@nativescript/fingerprint-auth');
    var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

    fingerprintAuth.available().then(function (avail) {
    \tconsole.log('Available? ' + avail);
    });
    \n

    TypeScript

    \n
    import { FingerprintAuth, BiometricIDAvailableResult } from \"@nativescript/fingerprint-auth\";

    class MyClass {
      private fingerprintAuth: FingerprintAuth;

      constructor() {
        this.fingerprintAuth = new FingerprintAuth();
      }

      this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
        console.log(`Biometric ID available? ${result.any}`);
        console.log(`Touch? ${result.touch}`);
        console.log(`Face? ${result.face}`);
      });
    }
    \n

    verifyFingerprint

    \n

    Note that on the iOS simulator this will just resolve().

    \n
    fingerprintAuth
    \t.verifyFingerprint({
    \t\ttitle: 'Android title', // optional title (used only on Android)
    \t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
    \t})
    \t.then((enteredPassword?: string) => {
    \t\tif (enteredPassword === undefined) {
    \t\t\tconsole.log('Biometric ID OK');
    \t\t} else {
    \t\t\t// compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
    \t\t}
    \t})
    \t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`))    ;
    \n

    verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

    \n

    Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

    \n
    fingerprintAuth
    \t.verifyFingerprintWithCustomFallback({
    \t\tmessage: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
    \t\tfallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
    \t\tauthenticationValidityDuration: 10, // optional (used on Android, default 5)
    \t})
    \t.then(
    \t\t() => {
    \t\t\tconsole.log('Fingerprint was OK');
    \t\t},
    \t\t(error) => {
    \t\t\t// when error.code === -3, the user pressed the button labeled with your fallbackMessage
    \t\t\tconsole.log('Fingerprint NOT OK. Error code: ' + error.code + '. Error message: ' + error.message);
    \t\t}
    \t);
    \n

    Face ID (iOS)

    \n

    iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

    \n

    You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSFaceIDUsageDescription</key>
      <string>For easy authentication with our app.</string>
    \n

    Security++ (iOS)

    \n

    Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

    \n

    So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

    \n
    fingerprintAuth.available().then((avail) => {
    \tif (!avail) {
    \t\treturn;
    \t}
    \tfingerprintAuth.didFingerprintDatabaseChange().then((changed) => {
    \t\tif (changed) {
    \t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
    \t\t} else {
    \t\t\t// call the fingerprint scanner
    \t\t}
    \t});
    });
    \n

    Changelog

    \n
      \n
    • 6.2.0 Fixed a potential bypass on iOS.
      • \n
    • 6.1.0 Fixed potentioal bypasses on Android.
      • \n
    • 6.0.3 Android interfered with other plugins' Intents.
      • \n
    • 6.0.2 Plugin not working correctly on iOS production builds / TestFlight.
      • \n
    • 6.0.1 Fixed a compatibility issues with NativeScript 3.4.
      • \n
    • 6.0.0 Allow custom UI on Android.
      • \n
    • 5.0.0 Better Face ID support. Breaking change, see the API for available.
      • \n
    • 4.0.1 Aligned with the official NativeScript plugin seed. Requires NativeScript 3.0.0+. Thanks, @angeltsvetkov!
      • \n
    • 4.0.0 Converted to TypeScript. Changed the error response type of verifyFingerprintWithCustomFallback.
      • \n
    • 3.0.0 Android support added. Renamed nativescript-touchid to nativescript-fingerprint-auth (sorry for any inconvenience!).
      • \n
    • 2.1.1 Xcode 8 compatibility - requires NativeScript 2.3.0+.
      • \n
    • 2.1.0 Added didFingerprintDatabaseChange for enhanced security.
      • \n
    • 2.0.0 Added verifyFingerprintWithCustomFallback, verifyFingerprint now falls back to the passcode.
      • \n
    • 1.2.0 You can now use the built-in passcode interface as fallback.
      • \n
    • 1.1.1 Added TypeScript definitions.
      • \n
    • 1.1.0 Added Android platform which will always return false for touchid.available.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-md5":{"name":"nativescript-md5","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript MD5

    \n

    A plugin for calculating MD5 hash string in "Native" way.

    \n

    Supported Platform

    \n

    Both iOS and Android.

    \n

    Installation

    \n
    tns plugin add nativescript-md5
    \n

    Usage

    \n

    To use the MD5 module you need to import the module.

    \n

    TypeScript

    \n
    import { MD5 } from 'nativescript-md5';

    const hash = MD5.hashForString(\"hello\");
    console.log(hash); // => 5d41402abc4b2a76b9719d911017c592
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-plugin":{"name":"nativescript-couchbase-plugin","version":"0.9.6","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript-Couchbase

    \n

    Installation

    \n

    tns plugin add nativescript-couchbase-plugin

    \n

    Usage

    \n

    Note Android min-sdk is 19

    \n
    import { Couchbase, ConcurrencyMode } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const documentId = database.createDocument({
        \"firstname\": \"O\",
        \"lastname\": \"Fortune\",
        \"address\": {
            \"country\": \"Trinidad and Tobago\"
        },
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    const person = database.getDocument(documentId);


    database.updateDocument(documentId, {
        \"firstname\": \"Osei\",
        \"lastname\": \"Fortune\",
        \"twitter\": \"https://www.twitter.com/triniwiz\"
    });

    // Default concurrency mode is FailOnConflict if you don't pass it
    const isDeleted = database.deleteDocument(documentId, ConcurrencyMode.FailOnConflict);
    \n

    Synchronization with Couchbase Sync Gateway and Couchbase Server

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    const push = database.createPushReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    push.setUserNameAndPassword(\"user\",\"password\");
    const pull = database.createPullReplication(
      'ws://sync-gateway-host:4984/my-database'
    );
    pull.setSessionId(\"SomeId\");
    pull.setSessionIdAndCookieName(\"SomeId\",\"SomeCookieName\");

    push.setContinuous(true);
    pull.setContinuous(true);
    push.start();
    pull.start();
    \n

    Listening for Changes

    \n
    database.addDatabaseChangeListener(function(changes) {
      for (var i = 0; i < changes.length; i++) {
        const documentId = changes[i];
        console.log(documentId);
      }
    });
    \n

    Query

    \n
    const results = database.query({
      select: [], // Leave empty to query for all
      from: 'otherDatabaseName', // Omit or set null to use current db
      where: [{ property: 'firstName', comparison: 'equalTo', value: 'Osei' }],
      order: [{ property: 'firstName', direction: 'desc' }],
      limit: 2
    });
    \n

    Transactions

    \n

    Using the method inBatch to run group of database operations in a batch/transaction. Use this when performing bulk write operations like multiple inserts/updates; it saves the overhead of multiple database commits, greatly improving performance.

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin';
    const database = new Couchbase('my-database');

    database.inBatch(() => {
        const documentId = database.createDocument({
            \"firstname\": \"O\",
            \"lastname\": \"Fortune\",
            \"address\": {
                \"country\": \"Trinidad and Tobago\"
            }
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const person = database.getDocument(documentId);
        
        
        database.updateDocument(documentId, {
            \"firstname\": \"Osei\",
            \"lastname\": \"Fortune\",
            \"twitter\": \"https://www.twitter.com/triniwiz\"
        });
        
        const isDeleted = database.deleteDocument(documentId);
    });
    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foldingcell":{"name":"nativescript-foldingcell","version":"1.0.10","license":"Apache-2.0","readme":"

    nativescript-yourplugin

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-yourplugin
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/apple-sign-in":{"name":"@nativescript/apple-sign-in","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/apple-sign-in

    \n
    ns plugin add @nativescript/apple-sign-in
    \n

    Requirements

    \n

    Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.\nOpen your app's App_Resources/iOS folder and add the following (or append) to a file named app.entitlements.

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>com.apple.developer.applesignin</key>
    \t<array>
    \t\t<string>Default</string>
    \t</array>
    </dict>
    </plist>
    \n

    Usage

    \n

    API

    \n

    isSupported

    \n

    Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

    \n
    import { SignIn } from \"@nativescript/apple-sign-in\";

    const supported: boolean = SignIn.isSupported();
    \n

    signInWithApple

    \n

    Now that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

    \n
    import { SignIn, User } from \"@nativescript/apple-sign-in\";

    signIn(
        {
            // by default you don't get these details, but if you provide these scopes you will (and the user will get to choose which ones are allowed)
            scopes: [\"EMAIL\", \"FULLNAME\"]
        })
        .then((result: User) => {
            console.log(\"Signed in, user: \" + result);
            console.log(\"Signed in, familyName: \" + result.fullName.familyName);
            // you can remember the user to check the sign in state later (see '    getSignInWithAppleState' below)
            this.user = result.user;
        })
        .catch(err => console.log(\"Error signing in: \" + err));
    \n

    getState

    \n
    \n

    ⚠️ This does not seem to work on a simulator!

    \n
    \n

    If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

    \n
    import { SignIn } from \"@nativescript/apple-sign-in\";

    const user: string = \"the id you got back from the signIn function\";

    SignIn.getState(user)
        .then(state => console.log(\"Sign in state: \" + state))
        .catch(err => console.log(\"Error getting sign in state: \" + err));
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas-plugin":{"name":"nativescript-canvas-plugin","version":"0.9.0-alpha05","license":"Apache-2.0","readme":"

    NativeScript Canvas

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Powered by

    \n\n

    Installation

    \n
    tns plugin add nativescript-canvas-plugin
    \n

    Note min ios support atm 11 | min android support 17

    \n

    IMPORTANT: ensure you include xmlns:canvas="nativescript-canvas-plugin" on the Page element for core {N}

    \n

    Usage

    \n
    <canvas:TNSCanvas id=\"canvas\" width=\"100%\" height=\"100%\" ready=\"canvasReady\"/>
    \n

    2D

    \n
    let ctx;
    let canvas;
    export function canvasReady(args) {
      console.log('canvas ready');
      canvas = args.object;
      console.log(canvas);
      ctx = canvas.getContext('2d');
      ctx.fillStyle = 'green';
      ctx.fillRect(10, 10, 150, 100);
    }
    \n

    WEBGL

    \n
    let gl;
    let canvas;
    export function canvasReady(args) {
      console.log('canvas ready');
      canvas = args.object;
      gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
      gl.viewport(0, 0,
      gl.drawingBufferWidth, gl.drawingBufferHeight);
      // Set the clear color to darkish green.
      gl.clearColor(0.0, 0.5, 0.0, 1.0);
      // Clear the context with the newly set color. This is
      // the function call that actually does the drawing.
      gl.clear(gl.COLOR_BUFFER_BIT);
      canvas.flush(); // must be called to draw on screen
    }
    \n

    API

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-segment":{"name":"nativescript-segment","version":"1.0.4","license":"Apache-2.0","readme":"

    Nativescript-Segment

    \n

    A NativeScript plugin that provides easy access to the native Segment SDKs.\nLargely based on this repository.

    \n\n

    Installation

    \n
    tns plugin add nativescript-segment
    \n

    For access to the native SDK type definitions, specify the definitions in your references.d.ts

    \n
    /// <reference path=\"./node_modules/nativescript-segment/platforms/android/typings/android.d.ts\" />
    /// <reference path=\"./node_modules/nativescript-segment/platforms/ios/typings/ios.d.ts\" />
    \n

    Warning: Depending on your project structure, the paths shown above may be inaccurate.

    \n

    Usage

    \n

    Example

    \n

    All interaction with the library should be done via static function calls on the Segment import since both iOS and Android SDKs instantiate Segment as a singleton once the method configure has been successfully called.

    \n
    const config: SegmentConfig = {
        trackLifeCycleEvents: true,
        recordScreenViews: true
    };
    Segment.configure(SEGMENT_KEY, config); // SEGMENT_KEY being your secret key
    \n
    import { Segment } from 'nativescript-segment';

    public someInteraction(type: string) {
        Segment.track(type);
    }
    \n

    For more advanced uses, or if it is required to access the base SDK methods, you can access the SDK's shared instance

    \n
    // iOS
    Segment.ios.track('some event');

    // Android
    Segment.android.track('some event');
    \n

    Warning: accessing the SDK's methods directly potentially requires converting to native object and collection types

    \n

    Platform specifics

    \n

    Android

    \n

    Requires the internet permission if not already enabled in your app.

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    \n

    iOS best practice

    \n

    In your application's delegate:

    \n
    import { Segment } from 'nativescript-segment';

    public applicationDidFinishLaunchingWithOptions(application, launchOptions): boolean {
        const config = {
            setDebug: true; // set to show full debug logging by the native APIs
        }
        Segment.configure(key, config);
        return true;
    }
    \n

    API

    \n

    configure

    \n
    const config: SegmentConfig = {
        trackLifeCycleEvents: true,
        recordScreenViews: true
    };
    Segment.configure('your segment write key', config);
    \n

    SegmentConfig Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    trackLifeCycleEventstrueenable or disable auto tracking life-cycle events
    recordScreenViewstrueenable or disable auto tracking of screen views
    optionsDefault integration options, see SegmentOptions
    proxyUrlnullforward all Segment calls through a proxy
    setLoggingfalseset base INFO logging in Android SDK and plugin itself
    setDebugfalseSets full debug logging in Android and iOS
    middlewaresAndroid[]List of middlewares for Android. Applied in the order based on the array. See here for more info
    middlewaresIOS[]List of middlewares for iOS. Applied in the order based on the array. See here for more info
    \n

    SegmentOptions Properties (all optional)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    useAlltrueenables all integrations (default for Segment SDKs)
    excluded[]exclude Segment from integrating with the specified services
    included[]include Segment integration with the specified services (note: this will only take affect if useAll is set to false)
    \n

    identify

    \n

    Identify the current user. Additional traits are supported, and custom traits are available.

    \n
    const traits: SegmentTraits = {
        firstName: 'Dave',
        email: 'dave@domain.com'
    };
    const customTraits: any {
        favoriteColor: 'blue'
    };
    Segment.identify('userId', traits, customTraits);
    \n

    SegmentTraits Properties (all optional)

    \n

    Please see Segment's official spec for all available traits and their descriptions.

    \n

    track

    \n

    Track an event.

    \n
    Segment.track('Some event');

    const properties = {
        productName: 'Bread',
        revenue: 4
    };
    Segment.track('Product Purchased', properties);
    \n

    Please see Segment's official spec for details on properties to add to track calls.

    \n

    screen

    \n

    Manually record a screen view by name and optional category. Category is a default option for Android, but for iOS it will concatenate category and name into the same screen.

    \n
    Segment.screen('signup', 'verify password');
    \n

    Please see Segment's official spec for details on screen calls.

    \n

    group

    \n

    Associate current user with a group. A user can belong to multiple groups.

    \n
    Segment.group(\"0e8c78ea9d97a7b8185e8632\", {
      name: \"Initech\", 
      industry: \"Technology\",
      employees: 329, 
      plan: \"enterprise\", 
      \"total billed\": 830
    });
    \n

    Please see Segment's official spec for details on group calls.

    \n

    alias

    \n

    alias is how you associate one identity with another.

    \n
    Segment.alias(newId);
    \n

    Please see Segment's official spec for details on alias calls.

    \n

    optout

    \n

    Disables or enables all analytics, remains set throughout app restarts.

    \n
    Segment.optOut(true);
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cryptography":{"name":"nativescript-cryptography","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript Cryptography

    \n

    A simple plugin for asymmetric keys operations.

    \n

    Installation

    \n

    tns plugin add nativescript-cryptography

    \n

    Usage

    \n

    import { Cryptography } from "nativescript-cryptography";

    \n

    param1: random tag string\nparam2: size of key\nparam3: save in secure storage (optional)

    \n

    const keyPair = cryptography.generateRsaPrivateKey(RsaPrivateKeyTag, RsaKeySize, true);

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@kefah/nativescript-uuid":{"name":"@kefah/nativescript-uuid","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript UUID

    \n

    This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

    \n
    \n

    This plugin support the NS 8 also ;-)

    \n
    \n

    Inspired from StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?.

    \n

    Uses SAMKeychain Cocoa Pod.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    ns plugin add @kefah/nativescript-uuid
    \n

    Usage

    \n

    JavaScript

    \n
        let uid = require(\"@kefah/nativescript-uuid\").NativescriptUuid;
        const uuid = uid.getUUID();
        console.log(`The device UUID is ${uuid}`);
    \n

    TypeScript

    \n
        import {NativescriptUuid} from '@kefah/nativescript-uuid';

        const uuid = NativescriptUuid.getUUID();
        console.log(`The device UUID is ${uuid}`);
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-store-ratings":{"name":"nativescript-store-ratings","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript: Store Ratings

    \n

    This plugin exposes the native In-App Reviews for iOS and Android. Please refer to the respective guidelines of Apple and Google.

    \n

    Installation

    \n
    tns plugin add nativescript-store-ratings
    \n

    Usage

    \n

    You can ask for a review anywhere in your app by importing

    \n
    import * as storeRating from 'nativescript-store-ratings';
    \n

    and calling

    \n
    storeRating.initRating();
    \n

    That's it! Your user will be prompted to review your app by tapping on a star and leave an additional comment. Note: The dialog won't show in development on Android. It'll only be displayed if your app is on the internal test track or in production. For more information about testing the integration on Android please refer to this guide

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-CallLog":{"name":"nativescript-CallLog","version":"1.0.6","readme":"

    NativeScript Call Log

    \n

    \"NPM\"

    \n

    Limitations

    \n

    Currently, it only works on Android.

    \n

    Usage

    \n
    callLogsService.getCallLog().then(callLogs => {
        callLogs.data.forEach(callLog => {
            console.log(`${callLog['number']} ${callLog['type']} ${callLog['date']} ${callLog['duration']}`);
        })
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-callblock":{"name":"nativescript-callblock","version":"0.0.2","license":"Apache-2.0","readme":"

    NativeScript CallBlock

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    Allows you to block calls in nativescript on android platform only.

    \n

    Note: This documentation is not completed and will definitely update in future

    \n

    Supported Plaforms:

    \n
      \n
    • Android
      • \n
    \n

    Installation

    \n

    Install the package using any of these.

    \n

    Via NPM:

    \n

    tns plugin add nativescript-callblock

    \n

    Via NPM:

    \n

    npm install nativescript-callblock --save

    \n

    Via Yarn:

    \n

    yarn add nativescript-callblock

    \n

    Usage: Android

    \n

    Permissions:

    \n
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />\n<uses-permission android:name="android.permission.CALL_PHONE" />\n
    \n

    JavaScript:

    \n

    Create a CallBlocker.js file in the app folder of your project. Paste the following

    \n
    const TelephonyManager = android.telephony.TelephonyManager;\nconst CallBlock = require('nativescript-callblock').CallBlock;\n\nconst NSCB = new CallBlock();\n\nandroid.content.BroadcastReceiver.extend("com.tns.broadcastreceivers.CallBlocker", \n    {\n        onReceive: function(context, intent) {\n            var action = intent.getAction();\n            number = intent.getExtras().getString(TelephonyManager.EXTRA_INCOMING_NUMBER);\n            \n            console.log("incoming from", number);\n\n            // Whatever you want.\n            let blocked = "00000000";\n            \n            if(number === blocked) {\n                NSCB.blockCall(context, intent);\n            }\n\n        }\n    }\n);\n
    \n

    After that add reciever at the end of <application> tag in AndroidManifest.xml.

    \n
    <application ... />\n    ...\n\t<receiver\n\t\tandroid:name="com.tns.broadcastreceivers.CallBlocker"\n\t\tandroid:enabled="true"\n\t\tandroid:exported="true">\n\t\t<intent-filter>\n\t\t\t<action android:name="android.intent.action.PHONE_STATE" />\n\t\t\t<action android:name="android.intent.action.NEW_OUTGOING_CALL" />\n\t\t</intent-filter>\n\t</receiver>\n</appliction>\n
    \n

    You're good to go.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signaturepad":{"name":"nativescript-signaturepad","version":"0.1.3","license":"Apache-2.0","readme":"

    NativeScript-SignaturePad :pencil:

    \n

    NativeScript plugin to provide a way to capture signatures (or any drawing) from the device.\nYou can use this component to capture really anything you want that can be drawn on the screen. Go crazy with it!!!

    \n

    WARNING - iOS is in development and should be available soon. ANDROID ONLY for now.

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    gcacace/android-signaturepadSignatureView
    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm install nativescript-signaturepad

    \n

    Usage

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:SignaturePad=\"nativescript-signaturepad\">
         <StackLayout>
                <SignaturePad:SignaturePad
                    height=\"200\"
                    id=\"drawingPad\"     
                    penColor=\"#ff4081\" 
                    penWidth=\"3\" />   
                
                <button text=\"Get Drawing\" tap=\"getDrawing\" />
                <button text=\"Clear Drawing\" tap=\"clearDrawing\" />
         </StackLayout>
    </Page>
    \n

    JS:

    \n
    var frame = require(\"ui/frame\");

    // To get the drawing...
    function getDrawing(args) {
        // get reference to the drawing pad
        var pad = frame.topmost().currentPage.getViewById(\"drawingPad\");
        // then access the 'drawing' property (Bitmap on Android) of the signaturepad
        var drawingImage = pad.drawing;
    }
    exports.getDrawing = getDrawing;

    // If you want to clear the signature/drawing...
    function clearDrawing(args) {
        var pad = frame.topmost().currentPage.getViewById(\"drawingPad\");
        pad.clearDrawing();
    }
    exports.clearDrawing = clearDrawing;
    \n

    Attributes

    \n

    penColor - (color string) - optional

    \n

    Attribute to specify the pen (stroke) color to use.

    \n

    penWidth - (int) - optional

    \n

    Attribute to specify the pen (stroke) width to use.

    \n

    Sample Screenshots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"crypto-module":{"name":"crypto-module","version":"1.3.19","license":"ISC","readme":"

    This module offers an interface between several cryptographic block cipher libraries, as well as an interface to an RSA library. You can use it with nativescript.

    \n

    See it in action

    \n
    var crypto_module = require('crypto-module');
    Object.keys(crypto_module.ivLength).forEach(function(algorithm) {
        console.log(algorithm); 
        var encrypted = \"\";
        var decrypted = \"\";
        var key = \"\";
        if(algorithm == 'caesar'){
            key = 28; 
        } else{
            key = \"secret\";
        }

        encrypted = crypto_module.encryptMessage('hallo 👄', key, algorithm); 
        console.log(encrypted);
        decrypted = crypto_module.decryptMessage(encrypted, key, algorithm);
        console.log(decrypted); 
        console.log(\"-----------------------\")
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sms-receiver":{"name":"nativescript-sms-receiver","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-sms-receiver

    \n

    This is simple library for receiving sms in android with new SMS Retriever API.

    \n

    Requirements

    \n

    Minimum sdk is 21.

    \n

    Installation

    \n
    tns plugin add nativescript-sms-receiver
    \n

    Usage

    \n

    Step 1. Register SMSBroadcastReceiver in manifest file

    \n

    Add below code to {your-app-module}/App_Resources/Android/src/main/AndroidManifest.xml

    \n
    <receiver android:name=\"com.pravinkumarputta.android.smsreceiver.SMSBroadcastReceiver\" android:exported=\"true\">
    \t<intent-filter>
    \t\t<action android:name=\"com.google.android.gms.auth.api.phone.SMS_RETRIEVED\"/>
    \t</intent-filter>
    </receiver>
    \n

    Step 2. Import SmsReceiver

    \n
    import { SmsReceiver } from 'nativescript-sms-receiver';
    \n

    Step 3. Instantiate SmsReceiver

    \n

    Call this method once before starting SMS listener

    \n
    SmsReceiver.getInstance();
    \n

    Note: Call above method only after page loaded.

    \n

    Step 4. Start SMS listening

    \n
    // register Sms Listener to get SMS callbacks
    SmsReceiver.getInstance().registerListeners(
        function () {
            // onSMSReceiverStarted
            ...
        }.bind(this),
        function (exception) {
            // onSMSReceiverFailed
            ...
        }.bind(this),
        function (message) {
            // onSMSReceived
            ...
                // handle sms here
            ...

            // deregister Sms Listener to avoid invalid operations
            SmsReceiver.getInstance().deregisterListeners();
        }.bind(this),
        function () {
            // onSMSReceiverTimeOut
            ...
        }.bind(this)
    );

    // start sms receiver for single message
    SmsReceiver.getInstance().startReceiver();
    \n

    Construct a verification message

    \n

    The verification message that you will send to the user's device. This message must:

    \n
      \n
    • Be no longer than 140 bytes
      • \n
    • Begin with the prefix <#>
      • \n
    • Contain a one-time code that the client sends back to your server to complete the verification flow (see Generating a one-time code)
      • \n
    • End with an 11-character hash string that identifies your app (see Computing your app's hash string)
      • \n
    \n

    Otherwise, the contents of the verification message can be whatever you choose. It is helpful to create a message from which you can easily extract the one-time code later on. For example, a valid verification message might look like the following:

    \n
    <#> Your ExampleApp code is: 123ABC78
    FA+9qCX9VSu
    \n

    (For more information visit here)

    \n

    Generating 11-character hash string for your app

    \n

    After instantiating SMSReceiver access hash string using:

    \n
    SmsReceiver.getInstance().getHashString() // After instantiating SmsReceiver othersise it returns empty string
    \n

    Request for phone number saved in your device

    \n
    SmsReceiver.getInstance().requestForPhoneNumber((phoneNumber) => {
        // phoneNumber is null if no number is selected.
        ...
    })
    \n

    Used libraries

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arcnet-plugin/smart-pos":{"name":"@arcnet-plugin/smart-pos","version":"1.0.5","license":"Apache-2.0","readme":"

    @arcnet-plugin/smart-pos

    \n
    ns plugin add @arcnet-plugin/smart-pos
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal":{"name":"nativescript-windowed-modal","version":"7.0.0","license":"Apache-2.0","readme":"

    Nativescript Windowed Modal \"apple\" \"android\"

    \n

    \"npm\n\"npm\n\"Build

    \n

    This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-windowed-modal
    \n

    Usage

    \n

    Code

    \n

    Call the overrideModalViewMethod() once before starting the app and register the layout element:

    \n

    Javascript

    \n
    var windowedModal = require(\"nativescript-windowed-modal\")
    windowedModal.overrideModalViewMethod()
    \n

    Typescript+Angular

    \n
    import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    registerElement(\"ModalStack\", () => ModalStack)
    \n

    You can pass extended options like this:

    \n
    mainPage.showModal(\"./modal\", {
      context: \"I'm the context\",
      closeCallback: (response: string) => console.log(\"Modal response: \" + response),
      dimAmount: 0.5 // Sets the alpha of the background dim
    } as ExtendedShowModalOptions)
    \n

    NativeScript-Vue

    \n
    // main.js
    import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    Vue.registerElement(\"ModalStack\", () => ModalStack)
    Vue.use(VueWindowedModal)
    \n

    You can pass extended options like this:

    \n
    <script type=\"text/javascript\">
      export default {
        methods: {
          openModalTap() {
            this.$showModal(\"./modal\", {
              props: {},
              fullscreen: false,
              animated: true,
              stretched: false,
              dimAmount: 0.5 // Sets the alpha of the background dim,
            })
          }
        }
      }
    </script>
    \n

    Properties

    \n

    ExtendedShowModalOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
    \n

    ModalStack

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
    verticalPositionstringbothmiddleUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
    horizontalPositionstringbothcenterUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
    \n

    Layout

    \n

    Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
        <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
            <StackLayout class=\"modal\">
                <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
            </StackLayout>
        </modal:ModalStack>
    </Page>
    \n

    HTML (Angular)

    \n
    <ModalStack dismissEnabled=\"true\" class=\"modal-container\">
      <StackLayout class=\"modal\">
        <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
      </StackLayout>
    </ModalStack>
    \n

    Style

    \n

    You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

    \n
    .modal {
      margin: 20;
      margin-top: 35;
      border-radius: 8;
      horizontal-align: center;
      vertical-align: middle;
      background-color: white;
    }

    .modal-container {
      padding: 25;
      padding-bottom: 10;
    }
    \n

    Running the demo app

    \n
      \n
    1. Clone this repo
      2. \n
    2. cd src
      3. \n
    3. npm run demo.android, npm run demo.ios, npm run demo.ng.android, or npm run demo.ng.ios
      4. \n
    \n

    Known Issues

    \n
      \n
    • Padding won't apply on children of the ModalStack, wrapping them with a StackLayout fixes the problem;
      • \n
    • Auto width is kinda buggy on some situations, set a fixed width for children of ModalStack when possible;
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shine-button":{"name":"nativescript-shine-button","version":"1.0.0","license":"Apache-2.0","readme":"

    \n NativeScript Shine Button

    \n\n

    \n
    \n

    Note: This Plugin based on WCLShineButton for IOS and ShineButton for Android .

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-shine-button
    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\" xmlns:ui=\"nativescript-shine-button\">
         <ui:ShineButton height=\"80\" width=\"80\" src=\"customicon\" color=\"gray\" fillColor=\"red\">
    </Page>
    \n

    see the demo project for more info.

    \n

    Angular

    \n

    Add this to app.module.ts so you can use a Gradient tag in the view:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"ShineButton\", () => require(\"nativescript-shine-button\").ShineButton);
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    srcbutton image (png)
    colorDefault button color
    fillColorFill button color
    allowRandomColorAllow shine color random
    animDurationshine anim duration in sec
    bigShineColorbig shine color
    enableFlashingEnable effect like flash
    shineCountshine count around button
    shineTurnAngleturn angle of shine
    shineDistanceMultiplemultiple of distance to button
    smallShineOffsetAngleangle offset of small shine to big shine
    smallShineColorsmall shine color
    shineSizesize of shine by pixel
    \n

    Next

    \n
      \n
    • [ ] adjust the properties to be more consistent on android and ios.
      • \n
    \n

    Contribute

    \n

    if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n

    Contact

    \n

    Twitter: hamdiwanis
    \nEmail: hamdiwanis@hotmail.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-c1rfid":{"name":"nativescript-c1rfid","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-c1rfid

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-c1rfid
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sak-components":{"name":"nativescript-sak-components","version":"1.1.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mapo80/nativescript-ngx-shadow":{"name":"@mapo80/nativescript-ngx-shadow","version":"7.0.1","license":"Apache-2.0","readme":"

    NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-ngx-shadow
    \n

    Demo

    \n

    \"N|Solid\"

    \n

    How to use it

    \n

    This is an Angular directive to make your life easier when it comes to native shadows.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the NgShadowModule

    \n
    // ...
    import { NgShadowModule } from \"nativescript-ngx-shadow\";

    @NgModule({
      imports: [
        NgShadowModule
        // ...
      ]
      // ...
    })
    export class MyModule {}
    \n

    Just use in your templates

    \n

    Simple attribute shadow:

    \n
    <Label shadow=\"2\"></Label>
    \n

    Of course you can property bind it:

    \n
    <Label [shadow]=\"myCustomShadow\"></Label>
    \n

    To provide other details, combine the shadow directive with other attributes:

    \n
    <Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypePlatformDescription
    shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
    default: 'RECTANGLE'    		AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    AndroidData and IOSData

    \n

    As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

    \n

    Component

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
    // ...
    export class MyComponent {
      fabShadow: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    In the template you can do:

    \n
    <Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-ngx-shadow\";
    class MyComponent {
      // ...
      ngOnInit(): init {
        this.mySnackBar.elevation = Elevation.SNACKBAR;
      }
      // ...
    }
    \n

    Notes about version 2+

    \n

    Here are the list of improvements on version 2.0:

    \n
      \n
    1. BugFix: Integer directive not rendering on iOS.
      2. \n
    2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
      3. \n
    3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
      4. \n
    4. 2.1.X Override Android default StateListAnimator as explained below:
      5. \n
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

    \n

    Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow:

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install to prepare the project
      • \n
    • Run and deploy to your device or emulator with npm run android or npm run ios
      • \n
    • Build a ngPackagr version with npm run build
      • \n
    \n

    Changelog

    \n
      \n
    • 6.0.0 Fork: Now packaged with ngPackagr for Angular 6 compatabilty
      • \n
    • 2.1.0 Decouple shadow logic / Override default StateListAnimator
      • \n
    • 2.0.1 Fix error on old Android devices (< Lollipop)
      • \n
    • 2.0.0 Density Independent Pixels / TranslationZ
      • \n
    • 1.1.3 Minor issues
      • \n
    • 1.1.2 Fix CI build
      • \n
    • 1.1.0 Support for iOS custom attributes
      • \n
    • 1.0.0 Initial implementation
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stomp-connector":{"name":"nativescript-stomp-connector","version":"1.1.2-beta","license":"Apache-2.0","readme":"

    :warning: This plugin is under construction.

    \n

    nativescript-stomp-connector

    \n

    Client connector for Websocket through STOMP protocol.

    \n

    This plugin use the NaikSoftware/StompProtocolAndroid for Android and WrathChaos/StompClientLib for iOS.

    \n

    #TODO

    \n
      \n
    • [ ] Migrate to Nativescript 7;
      • \n
    • [ ] Add nativescript core demo;
      • \n
    • [ ] Add repository for service example using spring boot to this README;
      • \n
    • [ ] Add Troubleshooting to this README;
      • \n
    • [ ] Improve API documentation;
      • \n
    \n

    Installation

    \n

    Run nativescript cli to install this plugin

    \n
    tns plugin add nativescript-stomp-connector
    \n

    Usage

    \n

    Core

    \n

    Under construction

    \n

    TypeScript

    \n

    Import the StompConnector in your component

    \n
    import { StompConnector, StompMessage } from 'nativescript-stomp-connector';
    \n

    Call Connnect

    \n
    private _wsUrl = \"ws://{your-server}:{port}/{path}/websocket\";
    public stompClient: StompConnector;

    constructor(private _changeDetectorRef: ChangeDetectorRef) {
    \tthis.stompClient = new StompConnector();
    }

    public connect(): void {
    \tthis.stompClient.connect({
    \t\tbrokerURL: this._wsUrl,
    \t\tonConnect: () => {
    \t\t\tconsole.log(`==== CONNECTED ===`);
    \t\t},
    \t\tonReconnect: () => {
    \t\t\tconsole.log(`==== RECONNECTED ===`);
    \t\t},
    \t\tonStompError: (error) => {
    \t\t\tconsole.error(error);
    \t\t},
    \t\tonDisconnect: () => {
    \t\t\tconsole.log(`==== DISCONNECTED ===`);
    \t\t},
    \t\tdebug: (msg: string) => {
    \t\t\tconsole.log(msg);
    \t\t}
    \t} as StompConfig);
    }
    \n

    Disconnect

    \n
    public disconnect(): void {
    \tthis.stompClient.disconnect();
    }
    \n

    Subscribe to topic

    \n
    public subscribeToTopic(): void {
    \tthis.stompClient.topic('/topic/broadcast', (response: StompMessage) => { console.dir(response); });
    }
    \n

    Unsubscribe to topic

    \n
    unsubscribeToTopic() {
    \tthis.stompClient.unsubscribe('/topic/broadcast', () => console.log(\"Unsubscribed successfully\"));
    }
    \n

    Send message

    \n
    sendMessageAsObject() {
    \tthis.stompClient.send({ 
    \t\tmessage: JSON.stringify({ content: this.messageContent }), 
    \t\tdestination: '/app/greetings',
    \t\twithHeaders: { \"content-type\": \"application/json\" }
    \t}, () => { console.log('Message just sent!'); });
    }
    \n

    API

    \n

    StompConnector

    \n

    connect(config)

    \n

    This function will connect to your stomp broker and call the callback onConnect after finish it;

    \n

    disconnect()

    \n

    Disconnect the stomp broker;

    \n

    isConnected()

    \n

    Return true if broker is connected;

    \n

    topic(destination, successCallBack, failCallBack)

    \n

    Subscribe to topic passing destination and successCallBack as mandatory parameters.

    \n

    unsubscribe(destination, successCallback)

    \n

    Unsubscribe to topic by destination.

    \n

    send(request, successCallBack, failCallBack)

    \n

    Send messsage to stomp broker;

    \n

    StompConfiguration

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    brokerURLemptyThe websocket url. Mandatory
    autoReconnectfalseAndroid only for now
    reconnectDelay5000The delay between attempts to reconnect in ms
    connectHeadersempty[key: string]: string; > example: { 'content-type': 'application/json' }
    onConnect()Functioncallback called on websocket connection successful
    onReconnect()Functioncallback called on server auto reconnected. Android only for now
    onDisconnect()Functioncallback called on webscoket disconnect
    onStompError(error)Functioncalled when got an exception
    debug(msg)FunctionUse this to have more logs
    \n

    Native Component

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    NaikSoftware/StompProtocolAndroidWrathChaos/StompClientLib
    \n

    Author

    \n

    Daniel Borba, daniel@witfy.io

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-childprocess":{"name":"nativescript-childprocess","version":"1.0.0","license":"MIT","readme":"

    Child Process (NativeScript Plugin)

    \n

    A NativeScript plugin for creation and execution of Android java.lang.Processes in Node.js child process style! As a webapp developer, you needn't worry about familiarizing yourself with the Java Process API, thanks to this plugin.

    \n\n\n

    Installation

    \n
      \n
    • For NativeScript 7+:
      • \n
    \n
    ns plugin add nativescript-childprocess
    \n
      \n
    • For NativeScript versions < 7:
      • \n
    \n
    tns plugin add nativescript-childprocess@1.0.0
    \n

    Usage

    \n
      \n
    • The simplest implementation looks like so:
      • \n
    \n
    import { ChildProcess } from 'nativescript-childprocess'
    ...
    onClickRun() {
      ChildProcess.run('pm list packages')
        .then(output => { console.log('Success:', output) })
        .catch(error => { console.log('Failure:', error) })
    }
    \n
      \n
    • A slightly advanced implementation with an interactive shell would look like so:
      • \n
    \n
    import { ChildProcess } from 'nativescript-childprocess'
    ...
    async onClickRun() {
      let childProcess: ChildProcess = new ChildProcess('su')
      childProcess.runInteractive('ls /system/')
      childProcess.runInteractive('ls /system/bin/')
      await childProcess.closeSafely('exit')
      console.log(childProcess.getOutput())  // output of both `ls` commands
    }
    \n

    API

    \n

    constructor(startCommand: string)

    \n

    Creates an interactive shell session.

    \n
      \n
    • Parameters: startCommand — interactive shell command (su is an example of one).
      • \n
    \n

    getErrors(): any

    \n

    Returns errors that have been collected from the onset of this process execution (i.e. right from creation of the interactive shell session) up until now.

    \n

    clearErrors(): void

    \n

    Clears errors collected from the onset of this process execution up until now. Helps if errors until this point in time are irrelevant.

    \n

    getProcess(): java.lang.Process

    \n

    Exposes the underlying Java process to not be confined by the bounds of the ChildProcess plugin. Helps in cases where outputs of commands running in an interactive shell have to collected and processed as and when available.

    \n
      \n
    • Returns: — native Java process.
      • \n
    \n

    getOutput(): string

    \n
      \n
    • \n

      Returns: — output collected in course of execution of this process up until now.

      \n

      (For errors, check out getErrors()).

      \n
      • \n
    \n

    static run(param0: string): Promise<any> + 4 overloads

    \n

    Executes a single command on a local terminal / shell (pm list packages for instance).

    \n
      \n
    • \n

      Parameters: param0 — command to be executed.

      \n
      • \n
    • \n

      Returns: — promise that resembles that of Node.js child process that resolves to an output or

      \n

      rejects with an error.

      \n
      • \n
    \n

    runInteractive(command: string): ChildProcess

    \n

    Runs commands inside of an interactive shell.

    \n
      \n
    • \n

      Parameters: command — sub-command is run inside the interactive shell created while

      \n

      instantiating ChildProcess.

      \n
      • \n
    • \n

      Returns: — ChildProcess reference which allows for cascaded runInteractive() or

      \n

      used to display the output or any errors.

      \n
      • \n
    \n

    closeSafely(exitCommand: string): Promise<ChildProcess>

    \n

    Safely closes an interactive shell by running an exit command passed as a parameter.

    \n
      \n
    • \n

      Parameters: exitCommand — exit.

      \n
      • \n
    • \n

      Returns: — promise that resolves to a ChildProcess and can be used to display the

      \n

      output or any errors.

      \n
      • \n
    \n

    closeAbruptly(): Promise<ChildProcess>

    \n

    Abruptly closes an interactive shell (which, for instance, is unresponsive such as a failing network activity) by killing it.

    \n
      \n
    • \n

      Returns: — promise that resolves to a ChildProcess and can be used to display the

      \n

      output or any errors.

      \n
      • \n
    \n

    toString(): string

    \n
      \n
    • Returns: — output of the entire process and any errors.
      • \n
    \n

    Made with :heart: by theGeekyLad

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-analytics":{"name":"nativescript-google-analytics","version":"0.4.4","license":"Apache-2.0","readme":"

    Nativescript Google Analytics Plugin

    \n\n

    Watch the video

    \n

    \"Watch

    \n

    Release Notes

    \n

    0.4.3

    \n
      \n
    • Updated demos to TS
      • \n
    • Updated demos to 4.0, verified functionality
      • \n
    \n

    0.4.0

    \n
      \n
    • Migrate to new plugin seed structure
      • \n
    \n

    0.3.5

    \n\n

    0.3.2

    \n
      \n
    • Add UserId support
      • \n
    \n

    0.3.0

    \n
      \n
    • Rename Podfile dir
      • \n
    • Update repo name to match plugin (OOPS)
      • \n
    \n

    0.2.9

    \n
      \n
    • Update Gradle refs
      • \n
    • Fix demo nav
      • \n
    \n

    0.2.8

    \n
      \n
    • Remove specific version of play-services on android
      • \n
    \n

    0.2.7

    \n
      \n
    • TS File fix
      • \n
    • Updated logging options
      • \n
    \n

    0.2.6

    \n
      \n
    • Enabled Exception Reporting on the Android side "enableExceptionReporting"
      • \n
    \n

    0.2.5

    \n
      \n
    • Added Typescript definition file
      • \n
    \n

    0.2.3

    \n
      \n
    • Timing API Start\\End functions
      • \n
    \n

    0.2.0

    \n
      \n
    • Exception Logging API
      • \n
    • Timing logging API
      • \n
    \n

    0.1.9

    \n
      \n
    • Breaking Change: Init method now takes an object, not just a string
      • \n
    • Fixed Dispatch to be configurable, and exposed a method to flush
      • \n
    \n

    0.1.7

    \n
      \n
    • Enable Instant dispatch on android
      • \n
    \n

    0.1.5

    \n
      \n
    • Android was missing the include.gradle file
      • \n
    \n

    0.1.5

    \n
      \n
    • Updated sending code to use new {N} Protocol code
      • \n
    \n

    0.1.4

    \n
      \n
    • iOS Grabbing tracker by ID, not default
      • \n
    • Error handling per issue
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-scratchview":{"name":"nativescript-scratchview","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Scratch View (Android only)

    \n

    Nativescript plugin to implement scratch card functionality.

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-scratchview
    \n

    Usage

    \n

    You need to add xmlns:sv="nativescript-scratchview" to your page tag, and then simply use <sv:ScratchView> in order to add the widget to your page.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:sv=\"nativescript-scratchview\">
      <GridLayout rows=\"*\" columns=\"*\">
    \t<sv:ScratchView  id=\"scratchView\" height=\"250\"  width=\"250\"  strokeWidth=\"10\" revealed=\"{{revealed}}\"  percentRevealed=\"{{percentRevealed}}\">
    \t  <Image  height=\"250\"  width=\"250\"  stretch=\"aspectFill\"  src=\"~/images/back.jpg\"></Image>
    \t  <Image  height=\"250\"  width=\"250\"  stretch=\"aspectFill\"  src=\"~/images/scratch.jpg\"></Image>
    \t</sv:ScratchView>
      </GridLayout>
    </Page>
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    strokeWidth10Scratching stroke width
    \n

    Events

    \n
      \n
    • \n

      revealed
      \nTriggered when the scratch view is 100% scratched.

      \n
      • \n
    • \n

      percentRevealed
      \nTriggered every time scratch view is scratched.\nParameters\nevent.percent - percentage of scratch view scratched

      \n
      • \n
    \n

    Methods

    \n
      \n
    • reveal
      \nClear scratch and reveal behind view.
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-permissions":{"name":"nativescript-simple-permissions","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Simple Permissions

    \n

    This plugin is a wrap around Nathanael's nativescript-permissions plugin and also provides IOS Permissions with a matching API.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Don't forget to add permissions to AndroidManifest.xml for android and Info.plist for iOS (Xcode >= 8).

    \n

    Installation

    \n

    To install simply run

    \n
    tns plugin add nativescript-simple-permissions
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
      import { SimplePermissions } from 'nativescript-simple-permissions';
      import { Permissions } from 'nativescript-simple-permissions/simple-permissions.common';

    export class PermissionExample {
      private simplePermissions: SimplePermissions;

      constructor() {
        this.simplePermissions = new SimplePermissions();
      }
    \n

    API

    \n

    Check permissions

    \n

    hasPermission(permission: Permissions) : boolean

    \n

    Request permissions

    \n

    requestPermission(permission: Permissions) : Promise

    \n

    Permissions

    \n
    export enum Permissions {
      LOCATION_ALWAYS = 0,
      LOCATION_IN_USE = 1,
      RECORD_AUDIO = 2,
      CAMERA = 3,
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-filterable-listpicker":{"name":"nativescript-filterable-listpicker","version":"2.2.6","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    nativescript-filterable-listpicker

    \n

    The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

    \n \n

    Installation

    \n
    tns plugin add nativescript-filterable-listpicker
    \n

    Usage

    \n

    In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

    \n

    NativeScript Core

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-filterable-listpicker\">
        <GridLayout rows=\"\" columns=\"\">
            <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
            <GridLayout rows=\"*, auto, *\">
                <StackLayout height=\"300\">
                    <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                    <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                    <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                    <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
                </StackLayout>
            </GridLayout>
            <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
            <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
        </GridLayout>
    </Page>
    \n

    Then in your code...

    \n
    public showPicker() {
        page.getViewById('myfilter').show();
    }

    public itemTapped(args) {
        alert(args.selectedItem + ' was tapped!')
    }

    public cancelFilterableList() {
        // this gets called if the user cancels the modal. 
    }
    \n

    Use as Autocomplte

    \n

    You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

    \n
    let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

    private filterableListpicker: FilterableListpicker;
    private page: Page;
    constructor(page: Page) {
        super();
        this.page = page;
        // Get filterableListpicker instance
        this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
        MyModel = this;
    }

    public showPickerAsAutocomplete() {
        // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
        this.filterableListpicker.isAutocomplete = true;
        this.filterableListpicker.show(frame.topmost());
        
        this.filterableListpicker.autocomplete((data) => {
            let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
            http.getJSON<Predictions>(url).then((res) => {
                //console.dir(res)
                const airportsCollection = res.predictions;
                const items = [];
                for (let i = 0; i < airportsCollection.length; i++) {
                    items.push({
                        title: airportsCollection[i].description,
                        description: \"\",
                        source: airportsCollection[i]
                    });
                    
                }
                this.set(\"listitems\", items)
            }).catch((err) => {
                const message = 'Error fetching remote data from ' + url + ': ' + err.message;
                console.log(message);
                alert(message);
            });
        });
    }
    \n

    NativeScript Angular

    \n

    In angular, you have to register the element in your app component like so:

    \n
    // app.component.ts
    import {registerElement} from \"nativescript-angular/element-registry\";
    registerElement(\"FilterableListpicker\", () => require(\"nativescript-filterable-listpicker\").FilterableListpicker);
    \n

    Then use it in your templates like...

    \n
    <GridLayout>
        <Image src=\"res://nicebackgroundimage.jpg\"></Image>
        <StackLayout>
            <Label text=\"Whats your favorite programming language?\"></Label>
            <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
        </StackLayout>
        <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
    </GridLayout>
    \n

    Then in your code...

    \n
    @ViewChild('myfilter') myfilter: ElementRef;

    cancelFilterableList() {
        console.log('canceled');
    }

    itemTapped(args) {
        alert(args.selectedItem)
    }

    showPicker() {
        this.myfilter.nativeElement.show();
    }
    \n

    Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

    \n

    in android:

    \n
    @ViewChild('myContainer') myContainer: ElementRef;

    public function showPicker() {
      this.myfilter.nativeElement.show(this.myContainer.nativeElement);
    }
    \n

    Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

    \n

    Source Array

    \n

    As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    titleThe title, this is what your list will be filtered on, and it will display in bold.
    imageOPTIONAL: This will display to the left of the title.
    descriptionOPTIONAL: This will display under the title smaller and in gray.
    \n

    Here's some example code:

    \n
    public listitems = [
        {
            \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
            \"title\": \"Brown Bear\",
            \"description\": \"Brown bear brown bear, what do you see?\"
        },
        {
            \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
            \"title\": \"Red Bird\"
        },
        {
            \"title\": \"Purple Cat\",
            \"description\": \"Why are we teaching kids there are purple cats?\"
        }
    ];
    \n

    You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

    \n

    Here's how it will look in the picker:

    \n\n

    Webpack

    \n

    Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

    \n

    API

    \n

    The UI element accepts the following parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
    hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
    listWidth300The width of the modal element.
    listHeight300The height of the modal element.
    focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
    dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
    blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
    itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
    canceledThis is just a function to call if the user cancels, probably rarely neccessary.
    showCancelShow cancel button or not.
    enableSearchAllow searching by showing the TextField at the top.
    autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
    \n

    CSS Styling

    \n
    .flp-container .flp-list-container {
      border-radius: 10;
    }
    .flp-container .flp-list-container .flp-listview {
      background-color: white;
    }

    .flp-container .flp-list-container .flp-listview .flp-row {
      background-color: white;
    }
    /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
      padding: 10;
    } */
    .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
      margin: 10 0 10 5;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
      margin: 10 10 10 5;
      /* margin: 0 10 0 10; */
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
      font-weight: bold; 
      font-size: 16;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
      color: gray; 
      font-size: 13;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
      margin-left: 15; 
      padding: 10 0;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
      color: lightblue;
    }

    .flp-container .flp-hint-field {
      padding: 10 15; 
      height: 40; 
      background-color: #E0E0E0; 
      border-radius: 10 10 0 0;
    }

    .flp-container .flp-cancel-container {
      background-color: #E0E0E0; 
      height: 40; 
      border-radius: 0 0 10 10;
    }

    .flp-container .flp-cancel-container .flp-btn-cancel {
      font-weight: bold; 
      height: 40; 
      background-color: transparent; 
      border-color: transparent; 
      border-width: 1; 
      font-size: 12;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appavailability":{"name":"@nativescript/appavailability","version":"2.0.0","license":"Apache-2.0","readme":"

    Nativescript appavailability

    \n

    A plugin to check for availability of other apps on the device.

    \n
    ns plugin add @nativescript/appavailability
    \n

    Usage

    \n
    \n

    Note that version 1.3.0 added a synchronous version of this method that doesn't return a Promise. Need that? Use availableSync instead of available.

    \n
    \n

    TypeScript

    \n
    const isAppAvailable = require(\"@nativescript/appavailability\").available;

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appavailability.available(\"twitter://\").then((avail: boolean) => {
      console.log(\"App available? \" + avail);
    })
    \n

    TypeScript + Angular

    \n
    import * as appavailability from \"@nativescript/appavailability\";

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appavailability.available(\"twitter://\").then((avail: boolean) => {
      console.log(\"App available? \" + avail);
    })
    \n

    JavaScript

    \n
    var appAvailability = require(\"@nativescript/appavailability\");

    // examples of what to pass:
    // - for iOS: \"maps://\", \"twitter://\", \"fb://\"
    // - for Android: \"com.facebook.katana\"
    appAvailability.available(\"com.facebook.katana\").then(function(avail) {
      console.log(\"App available? \" + avail);
    })
    \n

    Opening an app (with web fallback)

    \n

    Now that you know whether an app is installed or not, you probably want to launch it.\nHere's a snippet that opens the mobile Twitter app and falls back to the website if it's not installed.

    \n
    import { available } from \"@nativescript/appavailability\";
    import { Utils } from \"@nativescript/core\";

    const twitterScheme = \"twitter://\";
    available(twitterScheme).then(available => {
      if (available) {
        // open in the app
        Utils.openUrl(twitterScheme + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
      } else {
        // open in the default browser
        Utils.openUrl(\"https://twitter.com/eddyverbruggen\");
      }
    })
    \n

    And a more concise, synchronous way would be:

    \n
    import { availableSync } from \"@nativescript/appavailability\";
    import { Utils } from \"@nativescript/core\";

    if (availableSync(\"twitter://\")) {
      Utils.openUrl(\"twitter://\" + (isIOS ? \"/user?screen_name=\" : \"user?user_id=\") + \"eddyverbruggen\");
    } else {
      Utils.openUrl(\"https://twitter.com/eddyverbruggen\");
    }
    \n

    iOS whitelisting

    \n

    To get useful results on iOS 9 and up you need to whitelist the URL Scheme\nyou're querying in the application's .plist.

    \n

    Luckily NativeScript made this pretty easy. Just open app/App_ResourcesiOS/Info.plist\nand add this if you want to query for both twitter:// and fb://:

    \n
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>fb</string>
        <string>twitter</string>
      </array>
    \n

    You may wonder how one would determine the correct identifier for an app.

    \n
      \n
    • Android: simply search the Play Store and use the id in the URL. For Twitter this is com.twitter.android because the URL is https://play.google.com/store/apps/details?id=com.twitter.android.
      • \n
    • iOS: this one is a bit harder but this site should cover most apps you're interested in. When in doubt you can always fire up Safari on your iPhone and type for example 'twitter://' in the address bar, if the app launches you're good.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-socket.io":{"name":"@altabsrl/nativescript-socket.io","version":"0.11.2","license":"Unlicense","readme":"

    nativescript-socket.io

    \n

    Fork of https://github.com/naderio/nativescript-socket.io. Updated to newer gradle version. Only affect android.

    \n

    Full-featured Socket.IO client implementation for NativeScript.

    \n

    Status

    \n

    \"Status\"\n\"npm\"\n\"npm\"\n\"dependency\n\"devDependency\n\"devDependency\n\"Build\n\"npm\"

    \n

    This library is production-ready. Both Android and iOS implementations are stable and in sync.

    \n

    Please check releases and changelog and roadmap for more information.

    \n

    Dependencies

    \n

    Android: Socket.IO-client Java v1.*

    \n

    iOS: Socket.IO-Client-Swift v12.*

    \n

    Install

    \n
    tns plugin add @altabsrl/nativescript-socket.io
    \n

    Usage

    \n
    const SocketIO = require('nativescript-socket.io');

    SocketIO.enableDebug(); // optionnal

    // or use your own debug function
    // SocketIO.enableDebug(myCustomDebugFunction);

    const options = {
      query: {
        token: 'SOME_TOKEN_HERE',
      },
      android: {
        // http://socketio.github.io/socket.io-client-java/apidocs/io/socket/client/IO.Options.html
      }
      ios: {
        // https://nuclearace.github.io/Socket.IO-Client-Swift/Enums/SocketIOClientOption.html
      }
    };

    const socketio = SocketIO.connect('http://somewhere/namespace', options);

    socketio.on('connect', function(){
      console.log('connect');
    });

    socketio.on('hello', function(){
      console.log('hello', arguments);
    });

    socketio.on('request', function(info, ack){
      console.log('request', info);
      if (info === 'datetime') {
        ack(new Date());
      } elseif (info === 'random') {
        ack(Math.random());
      } else {
        ack(null);
      }
    });

    socketio.emit('hello', {
      username: 'someone',
    });

    socketio.emit('hello-ack', {
      username: 'someone',
    }, function ack(){
      console.log('hello-ack', arguments);
    })
    \n

    Usage with TypeScript

    \n

    import using either of the following:

    \n
    import * as SocketIO from \"nativescript-socket.io\"`

    // OR

    const SocketIO = require(\"nativescript-socket.io\")
    \n

    Demo

    \n
      \n
    1. \n

      replace all instance of 192.168.1.111 with your IP address or domain.

      \n
      2. \n
    2. \n

      start the socket.io demo server

      \n
      3. \n
    \n
    cd ./demo.server
    npm start
    \n
      \n
    1. build and run the app
      2. \n
    \n
    cd ./demo
    tns run android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sweet-alert":{"name":"nativescript-sweet-alert","version":"1.0.4","license":"Apache-2.0","readme":"

    SweetAlert library for NativeScript Android.

    \n

    Based on:

    \n\n

    Install

    \n

    NativeScript 6x

    \n
    tns plugin add nativescript-sweet-alert
    \n\n

    Android Specifications

    \n

    Usage Examples

    \n

    NOTE: "options" may vary according to each method.

    \n
    import { SweetAlert } from 'nativescript-sweet-alert';
    import { ShowSuccess , ShowError } from 'nativescript-sweet-alert/classes';


    // showSuccess
    const options: ShowSuccess = {
        text: \"Hello\",
        contentText: \"Alert Content Text\",
        confirmButtonText: \"Ok\",
        cancelButtonText: \"Close\"
    }
    SweetAlert.showSuccess(options).then(value => {
     // result: true, false, CLOSED    
    });

    // showError
    const options: ShowError = {
        text: \"Hello\",
        contentText: \"Alert Content Text\",
        confirmButtonText: \"Ok\",
        cancelButtonText: \"Close\"
    }
    SweetAlert.showError(options).then(value => {
     // result: true, false, CLOSED    
    });
    \n

    NativeScript SweetAlert - Methods

    \n
      \n
    • showNormal(options: ShowNormal): Promise<any>
      • \n
    • showError(options: ShowError): Promise<any>
      • \n
    • showSuccess(options: ShowSuccess): Promise<any>
      • \n
    • showWarning(options: ShowWarning): Promise<any>
      • \n
    • showCustomImage(options: ShowCustomImage): Promise<any>
      • \n
    • showText(options: ShowText): Promise<any>
      • \n
    • showCheckbox(options: ShowCheckbox): Promise<any>
      • \n
    \n

    How can I change the colors?

    \n

    App_Resources/Android/src/main/res/values/colors.xml add to Color Properties

    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    Demo

    \n

    Need extra help getting these SweetAlert working in your application? Check out these tutorials that make use of the plugin:

    \n

    SweetAlert in a NativeScript Core Demo

    \n

    SweetAlert in a NativeScript Angular Demo

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-share-file":{"name":"nativescript-share-file","version":"1.0.6","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install nativescript-share-file
    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from 'nativescript-share-file';
        import * as fs from 'tns-core-modules/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    intentTitle: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foss-sidedrawer":{"name":"nativescript-foss-sidedrawer","version":"2.0.0","license":"Apache-2.0","readme":"

    Nativescript FOSS Sidedrawer

    \n

    https://gitlab.com/burke-software/nativescript-foss-sidedrawer

    \n

    This is a fork of https://github.com/gethuman/nativescript-sidedrawer/

    \n

    This project continues support of nativescript-sidedrawer which may be useful to those who do not wish to use the proprietary Nativescript UI Sidedrawer. This package is free and open source and so it may be modified and packaged with GPL code. It is however not as polished as the UI Sidedrawer.

    \n

    A Nativescript plugin that allows developers to simply integrate the infamous side drawer pattern.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n

    Features

    \n
      \n
    • Smooth animations
      • \n
    • Pull from side of screen
      • \n
    • Rebound/bounce back open
      • \n
    • Tap off drawer to close
      • \n
    • Follows both Material and Human Interface guidelines
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-foss-sidedrawer
    \n

    Example

    \n

    Import the plugin.

    \n
    import { TnsSideDrawer } from 'nativescript-foss-sidedrawer'
    \n

    Build the drawer with TnsSideDrawer.build passing config options.

    \n
    TnsSideDrawer.build({
    \ttemplates: [{
    \t\ttitle: 'Home',
    \t\tandroidIcon: 'ic_home_white_24dp',
    \t\tiosIcon: 'ic_home_white',
    \t}, {
    \t\ttitle: 'Judgment Day',
    \t\tandroidIcon: 'ic_gavel_white_24dp',
    \t\tiosIcon: 'ic_gavel_white',
    \t}, {
    \t\ttitle: 'Bank Roll',
    \t\tandroidIcon: 'ic_account_balance_white_24dp',
    \t\tiosIcon: 'ic_account_balance_white',
    \t}, {
    \t\ttitle: 'Fix Stuff',
    \t\tandroidIcon: 'ic_build_white_24dp',
    \t\tiosIcon: 'ic_build_white',
    \t}, {
    \t\ttitle: 'This Is Me',
    \t\tandroidIcon: 'ic_account_circle_white_24dp',
    \t\tiosIcon: 'ic_account_circle_white',
    \t}],
    \ttitle: 'This App Name',
    \tsubtitle: 'is just as awesome as this subtitle!',
    \tlistener: (index) => {
    \t\tthis.i = index
    \t},
    \tcontext: this,
    })
    \n

    Toggle the side drawer with TnsSideDrawer.toggle.

    \n
    TnsSideDrawer.toggle()
    \n

    Configuration

    \n

    Drawer

    \n
    TnsSideDrawerOptions {
    \ttemplates: Array<TnsSideDrawerItem> // see below
    \ttextColor?: Color // color of all text including title, subtitle, and items
    \theaderBackgroundColor?: Color
    \tbackgroundColor?: Color // background color under the header
    \tlogoImage?: ImageSource // defaults to your app icon
    \ttitle?: string // large text in the header
    \tsubtitle?: string // small text in the header
    \tlistener: TnsSideDrawerOptionsListener // see below
    \tcontext?: any // see below
    }
    \n

    Templates

    \n

    Template icons MUST be a resource string.

    \n
    TnsSideDrawerItem {
    \ttitle: string
    \tandroidIcon?: string
    \tiosIcon?: string
    }
    \n

    Listener

    \n

    The listener function ONLY gets called everytime a drawer item is successfully tapped.

    \n
    type TnsSideDrawerOptionsListener = (index: number) => void
    \n

    You can optionally pass a this context to the context option.

    \n

    iOS Quirks

    \n

    Because you can drag the edge of your screen to go back,

    \n

    \"back\"

    \n

    you'll need to manually add and remove the gesture recognition by calling their methods and passing the Page instance.

    \n

    Let's say this is your home page.

    \n
    export function onLoaded(args: EventData) {
    \tlet page: Page = <Page>args.object
    \tTnsSideDrawer.addGesture(page)
    }
    export function onUnloaded(args: EventData) {
    \tlet page: Page = <Page>args.object
    \tTnsSideDrawer.removeGesture(page)
    }
    \n

    Android Quirks

    \n

    None.

    \n

    Thanks to

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jitsi-meet":{"name":"nativescript-jitsi-meet","version":"1.4.12","license":"Apache-2.0","readme":"

    nativescript-jitsi-meet

    \n

    This plugin is on a very early version. I'll probably have something better on the next days.

    \n

    As soon as the code improves I'll be updating the README as well. :wink:

    \n

    Avoid to use this plugin now if you project is not in development. This plugin will be changed a lot in the next days and a stable version has no date to be available.

    \n

    I'm working on

    \n
      \n
    • Improve Jitsi configuration;
      • \n
    • Add a few listeners;
      • \n
    • Create IOS version;
      • \n
    \n

    Prerequisites / Requirements

    \n

    #TODO

    \n

    Installation

    \n

    #TODO

    \n

    Usage

    \n

    #TODO

    \n

    API

    \n

    #TODO

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-carto":{"name":"nativescript-carto","version":"1.3.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    Android

    \n

    o do this in Android 9 Pie you will have to set a networkSecurityConfig in your Manifest application tag like this:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest ... >
        <application android:networkSecurityConfig=\"@xml/network_security_config\">
        </application>
    </manifest>
    \n

    Then in your xml folder you now have to create a file named network_security_config just like the way you have named it in the Manifest and from there the content of your file should be like this to enable all requests without encryptions:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <network-security-config>
        <base-config cleartextTrafficPermitted=\"true\">
            <trust-anchors>
                <certificates src=\"system\" />
            </trust-anchors>
        </base-config>
    </network-security-config>
    \n

    From there you are good to go. Now your app will make requests for all types of connections. For additional information read here.

    \n

    Generate typings

    \n

    Android

    \n

    ### iOS

    ## API

    Describe your plugin methods and properties here. See [nativescript-feedback](https://github.com/EddyVerbruggen/nativescript-feedback) for example.
        
    | Property | Default | Description |
    | --- | --- | --- |
    | some property | property default value | property description, default values, etc.. |
    | another property | property default value | property description, default values, etc.. |
        
    ## License

    Apache License Version 2.0, January 2004
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-chooser":{"name":"nativescript-contacts-chooser","version":"1.1.0","license":"Apache-2.0","readme":"

    nativescript-contacts-chooser

    \n

    \"iOS

    \n

    \"Android

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-contacts-chooser
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    import { ContactsChooser, ContactsChooserResult } from 'nativescript-contacts-chooser';

    //Request for permission (Android)
    chooser.requestPermission();

    //Choose contact
    chooser.open()
        .then((contact: ContactsChooserResult) => {
            console.log(contact);
        })
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    requestPermission()Request for permission to access contacts
    open()Open contacts picker
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-checkbox":{"name":"@nstudio/nativescript-checkbox","version":"2.0.5","license":"Apache-2.0","readme":"

    @nstudio/nativescript-checkbox

    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n
    npm install @nstudio/nativescript-checkbox
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Usage

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { Frame } from '@nativescript/core';

    public toggleCheck() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    Vue.registerElement(
      'CheckBox',
      () => CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-update":{"name":"nativescript-app-update","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-app-update

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-app-update
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-codility-onesignal":{"name":"nativescript-codility-onesignal","version":"1.0.3","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sewoo-printer":{"name":"nativescript-sewoo-printer","version":"2.0.2","license":"Apache-2.0","readme":"

    NativeScript Sewoo Printer

    \n

    \"npm

    \n

    This plugin integrate your nativescript app with Sewoo LK-P43Ⅱ printer to print a normal text or a bmp.

    \n

    Prerequisites / Requirements

    \n

    You have to pair your device via bluetooth with the printer before you test the plugin.

    \n

    Installation

    \n
    tns plugin add nativescript-sewoo-printer
    \n

    Usage

    \n

    First of all put these permissions in you AndroidManifest.xml file:\n <uses-permission android:name="android.permission.BLUETOOTH" /> \t<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" /> \nTo Print Normal Text use:

    \n
    ```\nlet printer = new SewooPrinter("windows-1256");\nprinter.print("Hello World");\n```\n
    \n

    To Print a BMP image:

    \n
    ```\nlet printer = new SewooPrinter("windows-1256");\nprinter.printImg(bmp);\n```\n
    \n

    for more information see the demo

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    paperSizePaperSizes.FourInchset the default paper size for the printer
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescriptionParams
    connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
    disconnect():voiddisconnect from a printer
    print(text: string): voidprint normal texttext : the text you want to print
    printImg(bitmap: globalAndroid.graphics.Bitmap, startX?: number, startY?: number): void;disconnect from a printerbitmap: the image to print, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-forgm-sound":{"name":"nativescript-forgm-sound","version":"1.1.3","license":"Apache-2.0","readme":"

    NativeScript Sound

    \n

    Play a sound in your NativeScript app.

    \n

    John Bristowe has initially programmed this project. The starting point was Grey Laureckis (PR #9) fork that includes code from PR #8. Mathew Thompson's iOS 13.2 fix is also implemented. Nativescript-plugin-seed was used to move it from JS to TypeScript. The demo tested on iOS 13.3 Simulator and Android API 28 virtual device

    \n

    Installation

    \n
    npm i nativescript-forgm-sound --save
    \n

    Usage

    \n

    To use this plugin you must first import it:

    \n
    import { Sound } from 'nativescript-forgm-sound';
    \n

    init and play

    \n

    Preload sound before playing it because there is a delay during creation due to the audio being processed.

    \n
    const beep: Sound = new Sound('~/sounds/beep.wav');

    // play the sound (i.e. tap event handler)
    beep.play();
    \n

    pause

    \n
    beep.pause();
    \n

    resume

    \n
    beep.resume();
    \n

    stop

    \n
    beep.stop();
    \n

    release

    \n

    After release(), if you play(), the app should crash.

    \n
    beep.release();
    \n

    setVolume

    \n

    Sets volume, the volume should be limited from 0.0 to 1.0.\nfadeDuration in milliseconds only for iOS.

    \n
    beep.setVolume(volume: number, fadeDuration?: number );
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fb-analytics":{"name":"nativescript-fb-analytics","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript: Facebook Analytics

    \n

    Adds only Facebook Analytics to your Nativescript app not the full Facebook SDK.

    \n

    This plugin is based on nativescript-facebook but only includes the Facebook Core Library which is needed for analytics. This way it reduces the bundle size by 86% compared to nativescript-facebook which includes the full Facebook SDK. If you want to learn more you may read this blog post.

    \n

    Installation

    \n
    tns plugin add nativescript-fb-analytics
    \n

    Configuration

    \n

    The following configuration is needed in order to get started with Facebook Analytics. In order to obtain a Facebook App-ID please refer to the official documentation.

    \n

    Initialize the plugin before calling app.run:

    \n
    /* your-project/app/app.ts */
    import * as app from \"tns-core-modules/application\";
    import * as fbAnalytics from 'nativescript-fb-analytics';

    app.on(app.launchEvent, function (args) {
        fbAnalytics.initAnalytics();
    });
    \n

    Additional configs needed for Android:

    \n
    <!--your-project/app/App_Resources/Android/src/main/res/values/strings.xml-->
    <string name=\"facebook_app_id\">YOUR_APP_ID</string>


    <!--your-project/app/App_Resources/Android/src/main/res/AndroidManifest.xml-->
    <application
    \tandroid:name=\"com.tns.NativeScriptApplication\"
    \tandroid:allowBackup=\"true\"
    \tandroid:icon=\"@drawable/icon\"
    \tandroid:label=\"@string/app_name\"
    \tandroid:theme=\"@style/AppTheme\">
        
        <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
    \t...
    </application>
    \n

    Additional configs needed for iOS:

    \n
    <!--your-project/app/App_Resources/iOS/Info.plist-->
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
          <array>
            <string>fbYOUR_APP_ID</string>
          </array>
      </dict>
    </array>
    <key>FacebookAppID</key>
    <string>YOUR_APP_ID</string>
    <key>FacebookDisplayName</key>
    <string>YOUR_APP_NAME</string>
    \n

    Usage

    \n

    You can log events from anywhere you want by importing

    \n
    import * as fbAnalytics from 'nativescript-fb-analytics';
    \n

    and calling

    \n
    fbAnalytics.logEvent('Lead');
    \n

    You may also add parameters to your event logging:

    \n
    const value = 5;
    const parameters = [{
        key: 'value',
        value: value.toString(),
    }];

    fbAnalytics.logEvent(FundsAdded, parameters);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sample-demo":{"name":"nativescript-sample-demo","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fit-oauth":{"name":"nativescript-fit-oauth","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/app-center":{"name":"@skhye05/app-center","version":"2.0.3","license":"Apache-2.0","readme":"

    @nativescript/app-center

    \n

    Prerequisites / Requirements

    \n

    Go to https://appcenter.ms sign in and create your app (it could either be android or ios).

    \n

    You will need the App Secret key in order to start the plugin. The App Secret can be found on the Getting Started page or Settings page on the App Center portal.

    \n

    Installation

    \n
    ns plugin add @skhye05/app-center
    \n

    Usage

    \n

    Using the plugin in Android

    \n

    Add code in your view model or component (Make sure you have replaced {Your App Secret} in the code sample above with your App Secret.):

    \n

    TypeScript

    \n
        import { AppCenter } from 'nativescript-app-center';

        let appCenter = new AppCenter();

        // To Analytics Callbacks

        appCenter.onAnalyticsListener({
          onBeforeSending: (report: any) => {
            console.log('before');
          },
          onSendingFailed: (log: any) => {
            console.log('failed');
          },
          onSendingSucceeded: (log: any) => {
            console.log('success');
          }
        });

        // To Add Crashes Callbacks

        appCenter.onCrashesListener({
          shouldProcess: (report: ErrorReport) => {
            console.log('should Process');
            return true;
          },
          shouldAwaitUserConfirmation: () => {
            console.log('Confirm');
            return false;
          },
          getErrorAttachments: (report: ErrorReport) => {
            return null;
          },
          onBeforeSending: (report: ErrorReport) => {
            console.log('before');
          },
          onSendingFailed: (report: ErrorReport, e: any) => {
            console.log('failed');
          },
          onSendingSucceeded: (report: ErrorReport) => {
            console.log('success');
          }
        });

        // Start App Center

        appCenter.start({
          analytics: true,
          crashes: true,
          appSecret: '{Your App Secret}'
        });


        // To Track Event Add

        trackEvent(): void {
            let property: Array<PropertyOption> = new Array<PropertyOption>();

            property.push({ key: \"firstname\", value: \"john\" }, { key: \"surname\", value: \"doe\" });
            appCenter.trackEvent('Clicked', property);
        }

        // To Test Crashes
        testCrash(): void {
            appCenter.testCraches();
        }
    \n

    Javascript

    \n
        var AppCenter = require(\"@nativescript/app-center\");

        var appCenter = new AppCenter();

        // To Analytics Callbacks

        appCenter.onAnalyticsListener({
          onBeforeSending: (report: any) => {
            console.log('before');
          },
          onSendingFailed: (log: any) => {
            console.log('failed');
          },
          onSendingSucceeded: (log: any) => {
            console.log('success');
          }
        });

        // To Add Crashes Callbacks

        appCenter.onCrashesListener({
          shouldProcess: (report: ErrorReport) => {
            console.log('should Process');
            return true;
          },
          shouldAwaitUserConfirmation: () => {
            console.log('Confirm');
            return false;
          },
          getErrorAttachments: (report: ErrorReport) => {
            return null;
          },
          onBeforeSending: (report: ErrorReport) => {
            console.log('before');
          },
          onSendingFailed: (report: ErrorReport, e: any) => {
            console.log('failed');
          },
          onSendingSucceeded: (report: ErrorReport) => {
            console.log('success');
          }
        });

        // Start App Center

        appCenter.start({
          analytics: true,
          crashes: true,
          push: false,
          distribute: false,
          appSecret: '{Your App Secret}'
        });


        // To Track Event Add

        appCenter.trackEvent = function() {
            var property = [];

            property.push({ key: \"firstname\", value: \"john\" }, { key: \"surname\", value: \"doe\" });
            appCenter.trackEvent('Clicked', property);
        }

          // To Raised an Error Manually

        appCenter.trackError = function() {
            const properties: Array<PropertyOption> = new Array<PropertyOption>();
            properties.push({ key: \"test-email\", value: \"example@email.com\" });
            properties.push({ key: \"test-error-name\", value: \"error name\" });
            const text = `App Center error text...`;

            const attachment = ACErrorAttachmentLog.attachmentWithText(text, 'error.txt');

            this.appCenter.trackError('Error', properties, [attachment]).then((response) => {
            console.log('response-->', response);
            }, (error) => {
            console.log('error-->', error);
            });
        }

        // To Test Crashes
        appCenter.testCrash = function() {
            appCenter.testCraches();
        }
    \n
      \n
    • Run the app on the phone or emulator:
      tns run android
      \n
      • \n
    \n

    API

    \n

    Properties

    \n

    InitOption

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    analyticsbooleanSet to true to add App Center Analytics to your app
    crashesbooleanSet to true to add App Center Crashes to generate a crash log every time your app crashes
    appSecretstringThis refer to your application App Center value
    \n

    PropertyOption

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    keystringProperty identifier
    valuestringProperty actual value
    \n

    AnalyticsListener (Android Only)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    onBeforeSendingCallback FunctionCalled right before sending a log. The callback can be invoked multiple times based on the number of logs.
    onSendingFailedCallback FunctionCalled when sending a log failed.
    onSendingSucceededCallback FunctionCalled when a log is sent successfully.
    \n

    CrashesListener (Android Only)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    shouldProcessCallback FunctionCalled to determine whether it should wait for user confirmation before sending crash reports (return true if the crash report should be processed, otherwise false).
    shouldAwaitUserConfirmationCallback FunctionCalled to determine whether it should wait for user confirmation before sending crash reports (Return true if you just built a UI for user consent and are waiting for user input on that custom UI, otherwise false.).
    getErrorAttachmentsCallback FunctionCalled to get additional information to be sent as separate ErrorAttachmentLog logs.
    onBeforeSendingCallback FunctionCalled right before sending a crash report. The callback can be invoked multiple times based on the number of crash reports.
    onSendingFailedCallback FunctionCalled when sending a crash report failed.
    onSendingSucceededCallback FunctionCalled when a crash report is sent successfully.
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsTypeArgumentDescription
    start()void(InitOption)Configure the SDK with the list of services to start. This may be called only once per application process lifetime.
    \n

    Analytics Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsTypeArgumentDescription
    trackEvent()void(eventName: string, poperty?: PropertyOption)Track a custom event with name.
    trackError()Promise<boolean>(exceptionMessage: string, properties?: PropertyOption[]), attachments?: any[])Raised an error manually.
    isAnalyticsEnabledPromise<boolean>noneCheck whether Analytics service is enabled or not. (return a boolean)
    isAnalyticsEnabledSyncbooleannoneCheck whether Analytics service is enabled or not. return a boolean
    setAnalyticsEnabledvoid(value: boolean)Enable or disable Analytics service.
    onAnalyticsListenervoid(callbacks: AnalyticsListener)Sets an analytics callback listener. (Android Only)
    \n

    Crashes Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodsTypeArgumentDescription
    testCrash()voidnoneGenerate crash test.
    hasCrashedInLastSession()Promise<boolean>noneCheck whether the app crashed in its last session.(return a boolean). (Android Only)
    hasCrashedInLastSessionSync()booleannoneCheck whether the app crashed in its last session. return a boolean. (Android Only)
    isCrashedEnabledSync()Promise<boolean>noneCheck whether Crashes service is enabled or not. (return a boolean)
    isCrashedEnabled()booleannoneCheck whether Analytics Crashes is enabled or not. return a boolean
    setCrashesEnabled()void(value: boolean)Enable or disable Crashes service.
    onCrashesListener()void(callbacks: AnalyticsListener)Sets an Crashes callback listener. (Android Only)
    crashesNotifyUserConfirmationDontSend()voidnoneNotifies Plugins with a confirmation to not send and handle the crash report. (Android Only)
    crashesNotifyUserConfirmationSend()voidnoneNotifies Plugins with a confirmation to send and handle the crash report. (Android Only)
    crashesNotifyUserConfirmationAlwaysSend()voidnoneNotifies Plugins with a confirmation to always send and handle the crash report. (Android Only)
    \n

    Author

    \n

    Jonathan Mayunga, eljodev@gmail.com

    \n

    License

    \n

    Apache License Version 2.0,

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accessories":{"name":"nativescript-accessories","version":"1.1.0","license":"Apache-2.0","readme":"

    nativescript-accessories

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-accessories
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-version":{"name":"nativescript-app-version","version":"1.4.1","license":"MIT","readme":"

    NativeScript AppVersion

    \n
    \n

    Requires NativeScript 2.3.0 (because of iOS 10 compatibility), so upgrade if you're rocking a lower spec: npm install -g nativescript.

    \n
    \n

    Read the version of your NativeScript app.

    \n

    For iOS we read it from *.plist's CFBundleShortVersionString.

    \n

    For Android we read the versionName from AndroidManifest.xml.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-appversion
    \n

    Usage

    \n

    To use this plugin you must first require() it:

    \n
    var appversion = require(\"nativescript-appversion\");
    \n

    getVersionName

    \n

    JavaScript

    \n
      appversion.getVersionName().then(function(v) {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionName().then((v: string) {
          console.log(\"Your app's version is: \" + v);
      });
    \n

    getVersionCode

    \n

    JavaScript

    \n
      appversion.getVersionCode().then(function(v) {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    TypeScript

    \n
      appversion.getVersionCode().then((v: string) {
          console.log(\"Your app's version code is: \" + v);
      });
    \n

    getAppId

    \n

    JavaScript

    \n
      appversion.getAppId().then(function(id) {
          console.log(\"Your app's id is: \" + id);
      });
    \n

    TypeScript

    \n
      appversion.getAppId().then((id: string) {
          console.log(\"Your app's id is: \" + id);
      });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rgbvision/nativescript-indexed-repeater":{"name":"@rgbvision/nativescript-indexed-repeater","version":"1.0.1","license":"Apache-2.0","readme":"

    @rgbvision/nativescript-indexed-repeater

    \n

    Adds the ability to get the index of an item for a Repeater UI component.

    \n

    Can be used in itemTemplateSelector or in item's event handler.

    \n

    Installation

    \n
    ns plugin add @rgbvision/nativescript-indexed-repeater
    \n

    Usage

    \n

    XML:

    \n
    <ir:IndexedRepeater items=\"{{ items }}\">
      <ir:IndexedRepeater.itemsLayout>
        <StackLayout orientation=\"vertical\"/>
      </ir:IndexedRepeater.itemsLayout>
      <ir:IndexedRepeater.itemTemplate>
        <Label text=\"{{ title }}\" margin=\"10\" tap=\"onItemTap\"/>
      </ir:IndexedRepeater.itemTemplate>
    </ir:IndexedRepeater>
    \n

    Make sure you include xmlns:ir="@rgbvision/nativescript-indexed-repeater" on the Page element

    \n

    TypeScript:

    \n
    export function onItemTap(event: ItemEventData) {
      const itemData = event.view.bindingContext;
      console.log(`Item index: ${itemData.index}`);
    }
    \n

    Warning

    \n

    Plugin overrides bindingContext.index value.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fast-android-r":{"name":"nativescript-fast-android-r","version":"1.1.0","license":"Apache-2.0","readme":"

    nativescript-fast-android-r

    \n

    In {N}, querying android.R, like using android.R.integer.config_longAnimTime, will cause an UI lag for over 500ms the first time it's called. R is a big class with many child static classes, so yhis slowdown may be because {N} loads all the R class metadata at runtime.

    \n

    This plugin provides the proxy object androidR that uses Reflection to query the static class integer and field config_longAnimTime to return the value.

    \n

    Installation

    \n
    tns plugin add nativescript-fast-android-r
    \n

    Usage

    \n

    To use this plugin, simply import androidR and use it like you'd use android.R

    \n
    import { androidR } from \"nativescript-fast-android-r\";
    console.log(androidR.integer.config_longAnimTime);
    \n

    Peformance

    \n

    Querying android.R for the first time takes usually from 400-800ms, and a negligible time from then onwards.

    \n
    console.log(android.R.integer.config_longAnimTime); // 400-800ms
    console.log(android.R.integer.config_longAnimTime); // ~0ms
    console.log(android.R.integer.config_shortAnimTime); // ~0ms
    console.log(android.R.integer.config_shortAnimTime); // ~0ms
    console.log(android.R.transition.explode); // ~0ms
    console.log(android.R.transition.explode); // ~0ms
    \n

    fast-android-r caches all classes and values that are queried. The first query usually takes <5ms. Subsequent queries to the same value will take negligible time (O(1) lookup). First time queries to other fields/classes usually take <2ms.

    \n
    console.log(androidR.integer.config_longAnimTime); // 0-4ms
    console.log(androidR.integer.config_longAnimTime); // ~0ms
    console.log(androidR.integer.config_shortAnimTime); // 0-2ms
    console.log(androidR.integer.config_shortAnimTime); // ~0ms
    console.log(androidR.transition.explode); // 0-4ms
    console.log(androidR.transition.explode); // ~0ms
    \n

    Future possibilities

    \n

    WAlthough some values from the R class are dynamic (e.g.: resources, strings, etc), most of them are not (integer.config_longAnimTime, integer.config_longAnimTime and others defined in the documentation). It may be benefitial to preload immutable values into the cache while allowing "dynamic" values to be queried.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-auth":{"name":"nativescript-azure-auth","version":"1.0.5","license":"Apache-2.0","readme":"

    Azure Auth

    \n

    A nativescript wrapper around the native libraries of Microsoft Azure's Active Directory Authentication Libraries ADAL for iOS and ADAl for Android.

    \n

    Version

    \n
    Current version: 1.0.5\n
    \n

    Installation

    \n
    tns plugin add nativescript-azure-auth
    \n

    Usage - Angular

    \n

    Create a authentication service that uses this library.

    \n
    import { Injectable } from \"@angular/core\";
    import { AzureAuth, AzureUser } from \"nativescript-azure-auth\";

    const azureAuth: AzureAuth;
    const authority: string = \"https://login.microsoftonline.com/{TENANT_ID}/oauth2/authorize\"
    const clientID: string = \"{CLIENT_ID}\";
    const resourceId: string = \"{RESOURCE_ID}\";
    const redirectUri: string = \"{REPLY-URL}\";

    @Injectable()
    export class AzureAuthenticationService {
        private azureAuth: AzureAuth;
        constructor() {
            this.azureAuth = new AzureAuth(authority,clientID,resourceId,redirectUri);
        }

        login() {
            this.azureAuth.login()
                .then(accessToken => {
                    console.log(`Token: ${accessToken}`);
                })
                .catch(error => {
                    console.log(error);
                });
        }

        getToken() {
            this.azureAuth.getToken()
                .then(accessToken => {
                    console.log(`Access token : ${accessToken}`);
                })
                .catch(error => {
                    console.log(error);
                });
        }

        
        getUser() {
            this.azureAuth.getUser()
                .then((user: AzureUser) => {
                    console.log(`Access token : ${JSON.stringify(user)}`);
                })
                .catch(error => {
                    console.log(error);
                });
        }


        logout() {
            this.azureAuth.clearCache();
        }

    }
    \n

    The login and logout can be consumed in a component.

    \n
    import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from \"@angular/core\";
    import { AzureAuthenticationService } from \"~azure-authentication.service\"

    @Component({
      selector: \"ns-app\",
      templateUrl: \"app.component.html\"
    })
    export class AppComponent implements OnInit, AfterViewInit {
        
        constructor(private azureAuthService: AzureAuthenticationService) {}

        login() {
            this.azureAuthService.login();
        }

        logout() {
            this.azureAuthService.logout();
        }
    }
    \n

    The best use-case for getToken would be in an interceptor so you can be sure that the latest access token is attached to your header when you make a http request to a protected Rest API.

    \n
    import { Component, Inject, Injectable } from \"@angular/core\";
    import { AzureAuthenticationService } from \"~azure-authentication.service\"
    import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpHeaders, HttpClient} from \"@angular/common/http\";
    import { Observable, from } from \"rxjs\";
    import \"rxjs/add/operator/switchMap\";

    @Injectable()
    export class TokenInterceptor implements HttpInterceptor {
        constructor(private azureAuthService: AzureAuthenticationService) {}

        intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            const promise = this.auth.azureAuthService.getToken();
            const observable = from(promise);
            return observable.switchMap((token) => {
                req = req.clone({setHeaders: {
                    authorization: `Bearer ${token}`,
                    \"content-type\": \"application/json\"
                }});
                return next
                    .handle(req)
                    .do(event => {})
                    .catch(err => console.log(err))    ;
            });   
        }
    }
    \n

    API

    \n

    public login(clearCache?: boolean): Promise<string>

    \n

    Opens a webview that redirects to login.microsoft.com.

    \n

    clearCache parameter clears the ADAL tokenCache when set to true. By default clearCache is set to true.

    \n

    public getToken(): Promise<string>

    \n

    Silently retrieves a token from Azure Active Directory using the refresh token being stored by the respective native libraries for ADAL. Best used with an interceptor or when creating http request that require th token.

    \n

    public clearCache(): void

    \n

    Clears the entire token cache for the clientId set when instantiating this library.

    \n

    Contributions

    \n

    Thanks to James Browning for providing help.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gesturehandler":{"name":"nativescript-gesturehandler","version":"0.1.16","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-gesturehandler
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    This is a port of react-native-gesturehandler.\nThe source is based on the source code by Krzysztof Magiera. Dont hesitate to go and thank him for his work!

    \n

    API

    \n

    First you need to install the plugin:

    \n
    tns plugin add nativescript-gesturehandler
    \n

    We need to do some wiring when your app starts, so open app.ts and add this before creating any View/App/Frame:

    \n
    TypeScript
    \n
    import { install } from \"nativescript-gesturehandler\";
    install();
    \n

    You create a gesture handler using something like this:

    \n
    import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from 'nativescript-gesturehandler';


    function onGestureTouch(args: GestureTouchEventData) {
        const { state, extraData, view } = args.data;
        view.translateX = extraData.translationX;
        view.translateY = extraData.translationY;
    }
    function onGestureState(args: GestureStateEventData) {
        const { state, prevState, extraData, view } = args.data;
        console.log('onGestureState', state, prevState, view, extraData);
    }
    const manager = Manager.getInstance();
    const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
        shouldCancelWhenOutside: false
    });
    gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
    gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
    gestureHandler.attachToView(view);
    \n

    Right now you must not forget to store the gestureHandler somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.

    \n

    Now about the API. All the gestures for the react counterpart exist with the same options and the same event extraData.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-shadow":{"name":"@imagene.me/nativescript-shadow","version":"2.0.1","license":"Apache-2.0","readme":"

    NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

    \n

    This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add @imagene.me/nativescript-shadow
    \n

    Demo

    \n

    \"N|Solid\"

    \n

    How to use it

    \n

    This is an Angular directive to make your life easier when it comes to native shadows.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the NgShadowModule

    \n
    // ...
    import { NgShadowModule } from \"@imagene.me/nativescript-shadow/angular\";

    @NgModule({
      imports: [
        NgShadowModule
        // ...
      ]
      // ...
    })
    export class MyModule {}
    \n

    Just use in your templates

    \n

    Simple attribute shadow:

    \n
    <Label shadow=\"2\"></Label>
    \n

    Of course you can property bind it:

    \n
    <Label [shadow]=\"myCustomShadow\"></Label>
    \n

    To provide other details, combine the shadow directive with other attributes:

    \n
    <Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypePlatformDescription
    shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
    default: 'RECTANGLE'    		AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    AndroidData and IOSData

    \n

    As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

    \n

    Component

    \n
    import { AndroidData, ShapeEnum } from \"@imagene.me/nativescript-shadow\";
    // ...
    export class MyComponent {
      fabShadow: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    In the template you can do:

    \n
    <Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"@imagene.me/nativescript-shadow\";
    class MyComponent {
      // ...
      ngOnInit(): init {
        this.mySnackBar.elevation = Elevation.SNACKBAR;
      }
      // ...
    }
    \n

    Notes about version 2+

    \n

    Here are the list of improvements on version 2.0:

    \n
      \n
    1. BugFix: Integer directive not rendering on iOS.
      2. \n
    2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
      3. \n
    3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
      4. \n
    4. 2.1.X Override Android default StateListAnimator as explained below:
      5. \n
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

    \n

    Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow:

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install to prepare the project
      • \n
    • Run and deploy to your device or emulator with npm run android or npm run ios
      • \n
    • Build a ngPackagr version with npm run build
      • \n
    \n

    Changelog

    \n
      \n
    • 6.0.0 Fork: Now packaged with ngPackagr for Angular 6 compatabilty
      • \n
    • 2.1.0 Decouple shadow logic / Override default StateListAnimator
      • \n
    • 2.0.1 Fix error on old Android devices (< Lollipop)
      • \n
    • 2.0.0 Density Independent Pixels / TranslationZ
      • \n
    • 1.1.3 Minor issues
      • \n
    • 1.1.2 Fix CI build
      • \n
    • 1.1.0 Support for iOS custom attributes
      • \n
    • 1.0.0 Initial implementation
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sak-fit-text":{"name":"nativescript-sak-fit-text","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sentry-temp":{"name":"nativescript-sentry-temp","version":"1.5.3","license":"Apache-2.0","readme":"

    Sentry.io for nativescript

    \n

    This plugin uses sentry-android and sentry-cocoa to catch native errors/stack traces and send them to a sentry server.

    \n

    NOTE: If you have a native exeption and the app exits the plugin will save the log and send it in the next app startup, this is how the native plugins are implemented and it is expected behavior

    \n

    Installation

    \n
    tns plugin add nativescript-sentry
    \n

    Usage

    \n

    Without Angular

    \n
    import { Sentry } from 'nativescript-sentry';
    const dsn = 'https://<key>:<secret>@host/<project>';
    Sentry.init(dsn);
    \n

    With Angular

    \n
    import { SentryModule } from 'nativescript-sentry/angular';

    NgModule({
      ...
      imports: [
           SentryModule.forRoot({dsn: 'https://<key>:<secret>@host/<project>'})
      ],
    \n

    Note: this plugin adds a custom ErrorHandler and automatically provides it

    \n

    API

    \n

    Init Sentry

    \n

    Sentry.init(dsn: string, options: SentryOptions)

    \n

    Capture Exception

    \n

    Sentry.captureException(exeption: Error, options: SentryOptions)

    \n

    Example:

    \n
    try {
        throw 'try catch Exception example'
    } catch(error) {
        Sentry.captureException(error, {});
    }
    \n

    Capture Message

    \n

    Sentry.captureMessage(message: string, options: SentryOptions)

    \n

    Capture BreadCrumb

    \n

    Sentry.captureBreadcrumb(breadcrumb:SentryBreadcrumb)

    \n

    Set Current user

    \n

    Sentry.setContextUser(user: SentryUser)

    \n

    Context Tags

    \n

    Sentry.setContextTags(tags: any)

    \n

    Context Extra

    \n

    Sentry.setContextExtra(extra: any)

    \n

    Clear context

    \n

    `Sentry.clearContext()``

    \n

    Next features:

    \n
      \n
    • set device props from device(missing orientation/battery)
      • \n
    • IOs native breadcrumbs
      • \n
    • callback for events
      • \n
    \n

    Changelog:

    \n

    11/12/2017 - (1.5.0):

    \n

    BREAKING CHANGES

    \n
      \n
    • capture() method was deprecated in favor of captureMessage/captureException
      • \n
    \n

    Features

    \n
      \n
    • Moving to an hybrid approach with both clients(web/native)
      • \n
    • breadcrums
      • \n
    • tags
      • \n
    • user info
      • \n
    • set tags and extra for each event
      • \n
    \n

    28-08-2017 - (1.3.0):

    \n
      \n
    • fix Aot compilation for angular apps
      • \n
    • fix typos thanks to @muratcorlu
      • \n
    \n

    2-08-2017 - (1.2.0):

    \n
      \n
    • update demos dependencies
      • \n
    • update ios and android native dependencies
      • \n
    • fix ios event capture
      • \n
    \n

    24-07-2017 - (1.1.0):

    \n
      \n
    • fix stringify
      • \n
    • fix angular error handler
      • \n
    \n

    Credits:

    \n
      \n
    • @hypery2k: for his nativescript-fabric(helped me a lot!)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fitness":{"name":"nativescript-fitness","version":"1.6.0","license":"MIT","readme":"

    Fitness plugin for NativeScript

    \n

    This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

    \n

    This is a fork of nativescript-health-data

    \n

    Prerequisites

    \n

    Android

    \n

    Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

    \n
    keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
    \n
    \n

    Note that the default (debug) keystore password is empty.

    \n
    \n

    iOS

    \n

    Make sure you enable the HealthKit entitlement in your app ID.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI:

    \n
    tns plugin add nativescript-fitness
    \n

    API

    \n

    The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

    \n

    This is how you can import and instantiate the plugin, all examples expect this setup:

    \n
    import { AggregateBy, Fitness, FitnessType } from \"nativescript-fitness\";

    export class MyHealthyClass {
      private fitness: Fitness;

      constructor() {
        this.fitness = new Fitness();
      }
    }
    \n

    isAvailable

    \n

    This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

    \n
    this.fitness.isAvailable(false)
        .then(available => console.log(available));
    \n

    isAuthorized

    \n

    This function (and the next one) takes an Array of FitnessType's. Each of those has a name and an accessType.

    \n
      \n
    • The name can be one of the 'Available Data Types'.
      • \n
    • The accessType can be one of read, write, or readAndWrite (note that this plugin currently only supports reading data, but that will change).
      • \n
    \n
    \n

    iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

    \n
    \n
    this.fitness.isAuthorized([<FitnessType>{name: \"steps\", accessType: \"read\"}])
        .then(authorized => console.log(authorized));
    \n

    requestAuthorization

    \n

    This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed FitnessType's.

    \n

    Note that this plugin currently only supports reading data, but that will change.

    \n
    const types: Array<FitnessType> = [
    \t{name: \"height\", accessType: \"write\"},
    \t{name: \"weight\", accessType: \"readAndWrite\"},
    \t{name: \"steps\", accessType: \"read\"},
    \t{name: \"distance\", accessType: \"read\"}
    ];

    this.fitness.requestAuthorization(types)
        .then(authorized => console.log(authorized))
        .catch(error => console.log(\"Request auth error: \", error));
    \n

    query

    \n

    Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

    \n

    By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

    \n

    If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

    \n
    this.fitness.query(
        {
          startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
          endDate: new Date(), // now
          dataType: \"steps\", // equal to the 'name' property of 'FitnessType'
          unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
          aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
          sortOrder: \"desc\" // optional, default \"asc\"
        })
        .then(result => console.log(JSON.stringify(result)))
        .catch(error => this.resultToShow = error);
    \n

    queryAggregateData EXPERIMENTAL!

    \n

    Difference between query and queryAggregateData: if you use query, you will probably find that the number of steps (or other types of data) do not match those shown by the Google Fit and Apple Health apps. If you wanted to accurately compute the user's data then use: queryAggregateData

    \n

    Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

    \n

    By default data is aggregated by day.\nThis plugin however offers a way to aggregate the data by either hour and day. (month and year available soon)

    \n

    Note that queryAggregateData only supports steps, calories and distance on Android. (More data types available soon).

    \n

    If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

    \n
    this.fitness.queryAggregateData(
        {
          startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
          endDate: new Date(), // now
          dataType: \"steps\", // equal to the 'name' property of 'FitnessType'
          unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
          aggregateBy: \"day\", // optional, one of: \"hour\", \"day\" ; default: \"day\"
        })
        .then(result => console.log(JSON.stringify(result)))
        .catch(error => this.resultToShow = error);
    \n

    startMonitoring (iOS only, for now)

    \n

    If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

    \n

    Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

    \n
    \n

    Background notifications probably don't work on the iOS simulator, so please test those on a real device.

    \n
    \n
    this.fitness.startMonitoring(
        {
          dataType: \"heartRate\",
          enableBackgroundUpdates: true,
          backgroundUpdateFrequency: \"immediate\",
          onUpdate: (completionHandler: () => void) => {
            console.log(\"Our app was notified that health data changed, so querying...\");
            this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
          }
        })
        .then(() => this.resultToShow = `Started monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    stopMonitoring (iOS only, for now)

    \n

    It's best to call this method in case you no longer wish to receive notifications when health data changes.

    \n
    this.fitness.stopMonitoring(
        {
          dataType: \"heartRate\",
        })
        .then(() => this.resultToShow = `Stopped monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    Available Data Types

    \n

    With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

    \n

    Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

    \n

    The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
    distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
    stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
    caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
    heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
    weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
    heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
    fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
    cardiominTYPE_HEART_POINTSHKQuantityTypeIdentifierAppleExerciseTime
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-ins":{"name":"nativescript-camera-ins","version":"3.2.2","license":"Apache-2.0","readme":"

    Welcome to the nativescript-camera plugin for NativeScript framework

    \n

    Prerequisites

    \n\n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n

    Navigate to project folder and run NativeScript-CLI command

    \n
    tns plugin add nativescript-camera
    \n

    Plugin could be added as a standard npm dependency running command

    \n
    npm install nativescript-camera --save
    \n
    \n

    Note: the --save flag will add the plugin as dependency in your package.json file

    \n
    \n

    Requesting permissions

    \n

    Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    camera.requestPermissions();
    \n
    \n

    Note: Older versions won't be affected by the usage of the requestPermissions method.

    \n
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    var camera = require(\"nativescript-camera\");
    \n
    import * as camera from \"nativescript-camera\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to recieve image asset

    \n
    \n
    var imageModule = require(\"ui/image\");
    camera.takePicture()   
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new imageModule.Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";
    camera.takePicture({).
        then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    var imageModule = require(\"ui/image\");

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options)   
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options).
        then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    var isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-centered-label":{"name":"nativescript-centered-label","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Centered Label

    \n

    \"Demo     \n\"Demo

    \n

    This plugin allows you to have Label that are centered both vertically and horizontally

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/nativescript-centered-label
    cd nativescript-centered-label/src
    npm run demo.ios # or demo.android
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/nativescript-centered-label
    cd nativescript-centered-label/src
    npm run demo-angular.ios # or demo-angular.android
    \n

    Installation

    \n
    tns plugin add nativescript-centered-label
    \n

    Usage

    \n

    NativeScript-Core (XML)

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ui=\"nativescript-centered-label\">

        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:CenteredLabel text=\"Centered Label\" class=\"c-label\"></ui:CenteredLabel>
        </GridLayout>
    </Page>
    \n

    NativeScript Angular

    \n

    TypeScript

    \n
    ...
    import {CenteredLabelModule} from \"nativescript-centered-label\";

    @NgModule({
        imports: [
            ...
            CenteredLabelModule
        ],
        ...
    })
    export class HomeModule { }
    \n

    HTML

    \n
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout class=\"page\">
        <CenteredLabel text=\"Centered Label\" class=\"c-label\" (tap)=\"testTap()\"></CenteredLabel>
    </GridLayout>
    \n

    CSS

    \n
    .c-label{
        background-color: rgba(0, 0, 0, 0.1);
        border-width: 4;
        border-color: #a8a8a8;
        height: 20%;
        width: 60%;
        border-radius: 30;
        color: black;
        font-size: 20;
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wearos-sensors":{"name":"nativescript-wearos-sensors","version":"1.2.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xz-ad-generation":{"name":"nativescript-xz-ad-generation","version":"1.0.26","license":"Apache-2.0","readme":"

    NativeScript AdGeneration Plugin

    \n

    Installation

    \n
    tns plugin add nativescript-xz-ad-generation
    \n

    Usage

    \n

    Import Module

    \n
    @NgModule({
        imports: [
        \tNativeScriptCommonModule,
    \t    HomeRoutingModule,
    \t    XzAdGenerationModule, // <-- Add this!
        ],
        declarations: [
            HomeComponent
        ],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class HomeModule { }
    \n

    Banner

    \n
    <XzAdGBanner locationId=\"48547\" bannerWidth=\"320\" bannerHeight=\"50\"></XzAdGBanner>
    \n

    Native Ad

    \n
    <XzAdGLayout locationId=\"48635\"> <!-- Use 48636 for Android -->
    \t<ng-template let-ad>
    \t\t<GridLayout class=\"ad-container\" columns=\"100 *\" rows=\"auto\">
    \t\t\t<GridLayout rows=\"auto\" col=\"0\">
    \t\t\t\t<Image src=\"{{ ad.iconImageUrl ? ad.iconImageUrl : ad.mainImageUrl }}\" width=\"100\" height=\"100\"></Image>
    \t\t\t\t<XzAdGInformationIconView *ngIf=\"ad.nativeAd\" [nativeAd]=\"ad.nativeAd\" verticalAlignment=\"top\" horizontalAlignment=\"left\"></XzAdGInformationIconView>
    \t\t\t</GridLayout>

    \t\t\t<StackLayout col=\"1\">
    \t\t\t\t<Label [text]=\"ad.title\" textWrap=\"true\"></Label>
    \t\t\t\t<Label [text]=\"ad.sponsor\" class=\"sponsor-name\"></Label>
    \t\t\t</StackLayout>
    \t\t</GridLayout>
    \t</ng-template>
    </XzAdGLayout>
    \n

    Demo

    \n

    See demo-angular

    \n
    npm run setup
    # ios
    npm run demo.ng.ios
    # android
    npm run demo.ng.android
    \n

    For Comitter

    \n

    Build & Publish

    \n
    cd publish
    ./pack.sh # For build
    ./publish.sh # For build & publish
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-onesignal-sdk":{"name":"@dsvishchov/nativescript-onesignal-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript Onesignal SDK

    \n

    A Onesignal plugin that handles push notifications for both ios and android nativescript applications.

    \n

    Prerequisites

    \n

    A Onesignal account with an active onesignal application.

    \n

    Installation

    \n
    tns plugin add nativescript-onesignal-sdk
    \n

    Usage

    \n

    Angular

    \n

    Not supported

    \n

    Typescript & Javascript

    \n

    Android

    \n

    Add both values onesignal_app_id and onesignal_google_project_number as string resources:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"app_name\">Demo</string>
        <string name=\"onesignal_app_id\">your_onesignal_app_id</string>
        <string name=\"onesignal_google_project_number\">your_onesignal_google_project_number</string>
    </resources>
    \n

    Then refer those values in your AndroidManifest.xml.

    \n

    Note: Add xmlns:tools="http://schemas.android.com/tools" on manifest root tag.

    \n
    <meta-data
    \t\ttools:replace=\"android:value\"
            android:name=\"onesignal_app_id\"
            android:value=\"@string/onesignal_app_id\"/>

    <meta-data
            tools:replace=\"android:value\"
            android:name=\"onesignal_google_project_number\"
            android:value=\"@string/onesignal_google_project_number\"/>
    \n

    Add the following code on your main.ts or app.js:

    \n
    import * as app from \"application\";
    var TnsOneSignal = require(\"nativescript-onesignal\").TnsOneSignal;

    if (app.android) {
      app.on(app.launchEvent, args => {
        TnsOneSignal.startInit(app.android.context).init();
      });
    }
    \n

    iOS

    \n

    Add the following code on your main.ts or app.js:

    \n
    import * as app from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (app.ios) {
         TnsOneSignal.initWithLaunchOptionsAppIdHandleNotificationReceivedHandleNotificationActionSettings({},
                <your-onesignal-app-id>,
                (notificationReceived) => {
                    console.log(notification);
                },
                (notificationAction) => {
                    console.log(notification);
                });
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Demo

    \n
    npm run plugin.prepare
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ffmpeg-plugin":{"name":"nativescript-ffmpeg-plugin","version":"0.0.2","license":"Apache-2.0","readme":"

    NativeScript FFmpeg

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Installation

    \n
    tns plugin add nativescript-ffmpeg-plugin
    \n

    Usage

    \n
      \n
    1. \n

      Execute commands.

      \n
        \n
      • Use execute() method with a single command line and an argument delimiter
        • \n
      \n
      import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin';

      FFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4', ' ').then(result => console.log(\"FFmpeg process exited with result \" + result));
      \n
        \n
      • Use executeWithArguments() method with an array of arguments
        • \n
      \n
      import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin';

      FFmpeg.executeWithArguments([\"-i\", \"file1.mp4\", \"-c:v\", \"mpeg4\", \"file2.mp4\"]).then(result => console.log(\"FFmpeg process exited with result \" + result));
      \n
      2. \n
    2. \n

      Check execution output. Zero represents successful execution, non-zero values represent failure.

      \n
      FFmpeg.getLastReturnCode().then(result => {
          console.log(\"Last return code: \" + result);
      });

      FFmpeg.getLastCommandOutput().then(result => {
          console.log(\"Last command output: \" + result;
      });
      \n
      3. \n
    3. \n

      Stop an ongoing operation.

      \n
      FFmpeg.cancel();
      \n
      4. \n
    4. \n

      Get media information for a file.

      \n
        \n
      • Print all fields
        • \n
      \n
      FFmpeg.getMediaInformation('<file path or uri>').then(info => {
          console.log('Result: ' + JSON.stringify(info));
      });
      \n
        \n
      • Print selected fields
        • \n
      \n
      FFmpeg.getMediaInformation('<file path or uri>').then(info => {
          console.log('Result: ' + JSON.stringify(info));
          console.log('Media Information');
          console.log('Path: ' + info.path);
          console.log('Format: ' + info.format);
          console.log('Duration: ' + info.duration);
          console.log('Start time: ' + info.startTime);
          console.log('Bitrate: ' + info.bitrate);
          if (info.streams) {
              for (var i = 0; i < info.streams.length; i++) {
                  console.log('Stream id: ' + info.streams[i].index);
                  console.log('Stream type: ' + info.streams[i].type);
                  console.log('Stream codec: ' + info.streams[i].codec);
                  console.log('Stream full codec: ' + info.streams[i].fullCodec);
                  console.log('Stream format: ' + info.streams[i].format);
                  console.log('Stream full format: ' + info.streams[i].fullFormat);
                  console.log('Stream width: ' + info.streams[i].width);
                  console.log('Stream height: ' + info.streams[i].height);
                  console.log('Stream bitrate: ' + info.streams[i].bitrate);
                  console.log('Stream sample rate: ' + info.streams[i].sampleRate);
                  console.log('Stream sample format: ' + info.streams[i].sampleFormat);
                  console.log('Stream channel layout: ' + info.streams[i].channelLayout);
                  console.log('Stream sar: ' + info.streams[i].sampleAspectRatio);
                  console.log('Stream dar: ' + info.streams[i].displayAspectRatio);
                  console.log('Stream average frame rate: ' + info.streams[i].averageFrameRate);
                  console.log('Stream real frame rate: ' + info.streams[i].realFrameRate);
                  console.log('Stream time base: ' + info.streams[i].timeBase);
                  console.log('Stream codec time base: ' + info.streams[i].codecTimeBase);
              }
          }
      });
      \n
      5. \n
    5. \n

      Enable log callback and redirect all FFmpeg logs to a console/file/widget.

      \n
      logCallback = (logData) => {
          console.log(logData.text);
      };
      ...
      FFmpeg.enableLogCallback(logCallback);
      \n
      6. \n
    6. \n

      Enable statistics callback and follow the progress of an ongoing operation.

      \n
      statisticsCallback = (statisticsData) => {
          console.log('Statistics; frame: ' + statisticsData.videoFrameNumber.toFixed(1) + ', fps: ' + statisticsData.videoFps.toFixed(1) + ', quality: ' + statisticsData.videoQuality.toFixed(1) +
          ', size: ' + statisticsData.size + ', time: ' + statisticsData.time);
      };
      ...
      FFmpeg.enableStatisticsCallback(statisticsCallback);
      \n
      7. \n
    7. \n

      Poll statistics without implementing statistics callback.

      \n
      FFmpeg.getLastReceivedStatistics().then(stats => console.log('Stats: ' + JSON.stringify(stats)));
      \n
      8. \n
    8. \n

      Reset statistics before starting a new operation.

      \n
      FFmpeg.resetStatistics();
      \n
      9. \n
    9. \n

      Set log level.

      \n
      FFmpeg.setLogLevel(LogLevel.AV_LOG_WARNING);
      \n
      10. \n
    10. \n

      Register your own fonts by specifying a custom fonts directory, so they are available to use in FFmpeg filters. Please note that this function can not work on relative paths, you need to provide full file system path.

      \n
        \n
      • Without any font name mappings
        • \n
      \n
      FFmpeg.setFontDirectory('<folder with fonts>', null);
      \n
        \n
      • Apply custom font name mappings. This functionality is very useful if your font name includes ' ' (space) characters in it.
        • \n
      \n
      FFmpeg.setFontDirectory('<folder with fonts>', { my_easy_font_name: \"my complex font name\" });
      \n
      11. \n
    11. \n

      Use your own fontconfig configuration.

      \n
      FFmpeg.setFontconfigConfigurationPath('<fontconfig configuration directory>');
      \n
      12. \n
    12. \n

      Disable log functionality of the library. Logs will not be printed to console and log callback will be disabled.

      \n
      FFmpeg.disableLogs();
      \n
      13. \n
    13. \n

      Disable statistics functionality of the library. Statistics callback will be disabled but the last received statistics data will be still available.

      \n
      FFmpeg.disableStatistics();
      \n
      14. \n
    14. \n

      List enabled external libraries.

      \n
      FFmpeg.getExternalLibraries().then(externalLibraries => {
          console.log(externalLibraries);
      });
      \n
      15. \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    See Also

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cognito":{"name":"nativescript-cognito","version":"1.1.3-alpha","license":"Apache-2.0","readme":"

    Nativescript-cognito

    \n

    Consume aws cognito service with nativescript. Android and iOS\nClouding co.\nhttp://clouding.ca

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-cognito
    \n

    Usage

    \n
    const cognito = new Cognito(\"Your user pool id\", \"your client id\");

    cognito.authenticate(username, password).then(token => ...)

    cognito.signUp(username, password, {
        name: \"Name\", 
        email: \"Email\",
        phone: \"Phone\",
        ...
    }).then(res => ...)

    cognito.confirmRegistration(username, code).then(username => {})
    ...
    \n

    License

    \n

    MIT License Copyright (c) 2019

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-version-rose":{"name":"nativescript-app-version-rose","version":"1.0.1","license":"Apache-2.0","readme":"

    App version viewer

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    This plugin shows app version.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-tv":{"name":"nativescript-ssi-tv","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-ssi-tv

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-ssi-tv
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ausweisapp-sdk-wrapper":{"name":"nativescript-ausweisapp-sdk-wrapper","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-ausweisapp-sdk-wrapper

    \n

    This plugin wraps the Ausweisapp2 SDK to a simpler Javascript API.

    \n

    Official documentation at https://www.ausweisapp.bund.de/sdk/

    \n

    DEMO

    \n

    Contains a DEMO angular application

    \n

    \"Demo

    \n

    Run DEMO

    \n
        $ cd demo-angular
        $ tns debug android
    \n

    Consider using PersoSim to simulate a test eID-Card.

    \n

    Installation

    \n

    Install this plugin regulary with this command

    \n
    tns plugin add nativescript-ausweisapp-sdk-wrapper
    \n

    Integration in app

    \n

    Head over to the guide here on how to integrate this API in your project

    \n

    There you will find details on how to

    \n
      \n
    1. Create required activity
      2. \n
    2. Configure webpack
      3. \n
    3. Edit AndroidManifest.xml
      4. \n
    \n

    Usage

    \n

    Use this typings definition for Typescript and adding IntelliSense support.

    \n
    /// <reference path=\"./node_modules/nativescript-ausweisapp-sdk-wrapper/typings/ausweisapp-sdk-wrapper-android-declarations.d.ts\" />
    \n
        let foregroundActivity = androidApp.foregroundActivity as globalAndroid.app.Activity
        const wrapper = sf.AusweisappSDKWrapper.getInstance(foregroundActivity) as sf.AusweisappSDKWrapper
        const callbacks = [
            new sf.MessageCallbackPair(sf.Message.__ANY_MESSAGE,
                new sf.IMessageCallback({
                    onMessage: (message: sf.Message, jsonObject: JSONObject) => {
                        console.log(`received`, `message:${message}`, `${jsonObject.toString(2)}`)
                    }
                }))
        ]
        wrapper.onReady(new sf.AusweisappSDKConnector.IAusweisappSDKConnectorListener({
            onReady: () => {
                console.log(`SDK wrapper is ready now`)
                wrapper.getCommander().exec(sf.Command.SET_PIN, new JSONObject().put('value', '123456'), callbacks)
            },
            onDisconnect: () => {
                console.log(`SDK wrapper disconnected`)
            },
            onError: (throwable: java.lang.Throwable) => {
                console.log(`SDK wrapper failed:`, `${throwable}`)
            }
        }))
    \n

    API

    \n

    See API usage guide here for a deeper look inside.

    \n

    Also take a look to the official documentation site of the Ausweisapp SDK at https://www.ausweisapp.bund.de/sdk/

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-list-view":{"name":"nativescript-fancy-list-view","version":"0.0.9","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript FancyListView 🍵

    \n

    Install

    \n

    tns plugin add nativescript-fancy-list-view

    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:lv="nativescript-fancy-list-view" on the Page element any element can be used in the list

    \n
    <lv:FancyListView items=\"{{items}}\" row=\"2\" id=\"listView\">
                <lv:FancyListView.itemTemplate>
                    <GridLayout rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                        <Label text=\"{{title}}\"/>
                        <Image row=\"1\" src=\"{{image}}\"/>
                    </GridLayout>
                </lv:FancyListView.itemTemplate>
    </lv:FancyListView>
    \n

    Multi Template

    \n
    <lv:FancyListView itemTemplateSelector=\"$index % 2 === 0 ? 'even' : 'odd'\" items=\"{{items}}\" id=\"listView\">
          <FancyListView.itemTemplates>
            <template key=\"even\">
              <GridLayout rows=\"auto,auto,*\" columns=\"*\">
                <Label text=\"Even\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <Image loaded=\"loadedImage\" row=\"2\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
            <template key=\"odd\">
              <GridLayout rows=\"auto,auto ,auto,*\" columns=\"*\" backgroundColor=\"white\">
                <Label text=\"Odd\"/>
                <Label row=\"1\" text=\"{{title}}\"/>
                <StackLayout row=\"2\">
                  <Label text=\"{{image}}\"/>
                </StackLayout>
                <Image loaded=\"loadedImage\" row=\"3\" src=\"{{image}}\"/>
              </GridLayout>
            </template>
          </FancyListView.itemTemplates>
        </lv:FancyListView>
    \n

    Angular

    \n
    import { FancyListViewModule } from \"nativescript-fancy-list-view/angular\";

    @NgModule({
        imports: [
        FancyListViewModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n

    Angular v2

    \n
    <FancyListView [items]=\"items\" #listview (itemTap)=\"onTap($event)\" class=\"listview\">
            <template let-i=\"index\" let-item=\"item\">
                <GridLayout class=\"list-item\" rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label  [text]=\"item.title\"></Label>
                    <Image row=\"1\" [src]=\"item.image\"></Image>
                </GridLayout>
            </template>
        </FancyListView>
    \n

    Angular v4+

    \n
    <FancyListView [items]=\"items\" #listView (itemTap)=\"onTap($event)\" class=\"listview\">
            <ng-template let-i=\"index\" let-item=\"item\">
                <GridLayout class=\"list-item\" rows=\"auto, *\" columns=\"*\" backgroundColor=\"red\">
                    <Label  [text]=\"item.title\"></Label>
                    <Image row=\"1\" [src]=\"item.image\"></Image>
                </GridLayout>
            </ng-template>
        </FancyListView>
    \n

    Multi Template

    \n
     public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
      }
    \n
    <FancyListView [items]=\"items | async\" [itemTemplateSelector]=\"templateSelector\"  #listView (itemTap)=\"onTap($event)\" class=\"listview\">
            <ng-template flvTemplateKey=\"even\" let-i=\"index\" let-item=\"item\">
                <GridLayout class=\"list-item\" rows=\"auto,auto,*\" columns=\"*\">
                    <Label text=\"Even\"></Label>
                    <Label row=\"1\" [text]=\"item.title\"></Label>
                    <Image loaded=\"loadedImage\" row=\"2\" [src]=\"item.image\"></Image>
                </GridLayout>
            </ng-template>

            <ng-template flvTemplateKey=\"odd\" let-i=\"index\" let-item=\"item\">
                <GridLayout class=\"list-item\" rows=\"auto,auto,auto,*\" columns=\"*\" backgroundColor=\"white\">
                    <Label text=\"Odd\"></Label>
                    <Label row=\"1\" [text]=\"item.title\"></Label>
                    <StackLayout row=\"2\">
                        <Label [text]=\"item.image\"></Label>
                    </StackLayout>
                    <Image loaded=\"loadedImage\" row=\"3\" [src]=\"item.image\" ></Image>
                </GridLayout>
            </ng-template>

        </FancyListView>
    \n

    Configuration

    \n
    <FancyListView items=\"{{items}}\" itemWidth=\"25%\" itemHeight=\"50%\" max=\"75%\" min=\"20%\" spanCount=\"2\" layoutType=\"grid\"><FancyListView>
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    itemsnullArray
    • - [x]
    itemWidth100%string / number
    • - [ ]
    itemHeight25%string / number
    • - [ ]
    min(itemWidth * 2) / (1/3)string / number
    • - [ ]
    max(itemWidth * 2)string / number
    • - [ ]
    spanCount1number
    • - [ ]
    layoutTypelinearstring
    • - [ ]
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    Coming Soon!!Coming Soon!!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fonepaisa":{"name":"nativescript-fonepaisa","version":"1.0.2","license":"MIT","readme":"

    Develop a NativeScript plugin

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. cd myplugin
      3. \n
    3. npm run postclone
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-fonepaisa
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@infinitebrahmanuniverse/nolb-nativescript-a":{"name":"@infinitebrahmanuniverse/nolb-nativescript-a","version":"2023.1.28","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-ssi":{"name":"nativescript-plugin-firebase-ssi","version":"10.5.4","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

    \n

    \"Firebase\"/

    \n
    \n

    Plugin version 10.0.0 works with NativeScript 6.1 and up. Using an older version? Stick to plugin version < 10.

    \n
    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n
      \n
    • cd src.
      • \n
    • npm i (just answer 'n' to any prompts as they are ignored anyway).
      • \n
    • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
      • \n
    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n
      \n
    • dev will be selected if you run with either --env.dev, --env.development or --env.staging flags.
      • \n
    • prod will be selected if you run with either --env.prod or --env.production.
      • \n
    \n

    Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

    \n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@infinitebrahmanuniverse/nolb-nativescript-c":{"name":"@infinitebrahmanuniverse/nolb-nativescript-c","version":"2023.1.28","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slider":{"name":"nativescript-slider","version":"1.0.1","license":{"type":"MIT","url":"https://github.com/kazemihabib/nativescript-slider/LICENSE"},"readme":"

    Nativescript Slider

    \n

    It's a fork of https://github.com/NativeScript/NativeScript/tree/master/tns-core-modules/ui/slider (tns core module) with dragged event.

    \n

    What's the difference?

    \n
    Added dragged event that fires when the user drags the slider.\ncurrently this event added just for android.\n
    \n

    Why should I use this event when I can use two-way binding for value property of slider?

    \n
    It is usefull when the value can change programmatically and by user for example when creating player.\n
    \n

    Installation

    \n
    tns plugin add nativescript-slider\n
    \n

    Usage

    \n
    <Page xmlns="http://schemas.nativescript.org/tns.xsd"\n  xmlns:seekbar="nativescript-slider"\n  loaded="pageLoaded">\n  <StackLayout>\n    <seekbar:Slider value="50" maxValue="100" dragged="{{dragged}}" />\n  </StackLayout>\n</Page>\n\ndragged(args){\n   let newValue = args.newValue;\n   let object = args.object;\n}\n
    \n

    How to use with Angular2

    \n
    import {registerElement} from "nativescript-angular/element-registry";\n\nregisterElement("TNSSlider", () => require("nativescript-slider").Slider);\n\n<TNSSlider [value]="currentPosition" [maxValue]="movieLength" (dragged)="fromUser($event)"  ></TNSSlider>\n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-payworks":{"name":"nativescript-payworks","version":"0.1.5","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Payworks

    \n

    Payworks SDK PayButton plugin for Nativescript.

    \n

    Payworks is a payment gateway technology for Point of Sales.

    \n

    ALPHA version. Android only (iOS will come in the future, PR are welcome).

    \n

    Install it

    \n
    tns plugin add nativescript-payworks
    \n

    Use it

    \n
    import {Payworks} from 'nativescript-payworks';

    let payworks: Payworks;

    payworks = new Payworks();
        
    // Setup
    payworks.setup(ProviderMode.TEST, \"<merchantIdentifier>\", \"<merchantSecret>\");
        
    // Start transaction
    payworks.startTransaction(40.00, Currency.EUR, \"Test transaction\", \"Custom identifier\");
    \n

    Dependencies

    \n

    There are a lot of dependencies that this package will install, here the list:

    \n
    compile 'com.google.android.gms:play-services-gcm:11.0.4'

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:support-v4:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'

    compile 'com.squareup:otto:1.3.5'
    compile 'com.squareup.okhttp:okhttp:2.7.4'
    compile 'com.squareup.okhttp:okhttp-ws:2.7.4'
    compile 'com.parse.bolts:bolts-android:1.2.1'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.4.4'
    compile 'com.couchbase.lite:couchbase-lite-android:1.4.0'
    compile 'com.couchbase.lite:couchbase-lite-android-forestdb:1.4.0'

    compile 'io.payworks:mpos.android.ui:2.25.2:@aar'
    compile 'io.payworks:mpos.android.core:2.25.2:@aar'


    // Add those three dependencies if you want to use a Miura card reader
    compile 'io.payworks:mpos.android.accessories.miura:2.25.2:@aar'
    compile 'io.payworks:mpos.android.comlinks.bluetooth:2.25.2:@aar'
    compile 'io.payworks:mpos.android.comlinks.tcp:2.25.2:@aar'
    \n

    You may need to use MultiDex.

    \n

    API

    \n

    Coming soon...

    \n

    Describe your plugin methods and properties here.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    Roadmap

    \n
      \n
    • Configuration for features and accessories
      • \n
    • Documentation
      • \n
    • iOS support
      • \n
    • More...
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-fit-label":{"name":"nativescript-auto-fit-label","version":"1.0.4","license":"Apache-2.0","readme":"

    AutoFitText

    \n

    This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width

    \n

    \"Example

    \n

    Prerequisites / Requirements

    \n

    This plugin is only tested with {N} > 3.0.0

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-auto-fit-text
    \n

    Usage

    \n

    Angular

    \n
    import { AutoFitTextModule } from \"nativescript-auto-fit-text/angular\"

    @NgModule({
    \t...
        imports: [
            AutoFitTextModule
        ],
        ...
    })
    export class AppModule { }
    \n
    <AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></AutoFitText>
    \n

    Vanilla Nativescript

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-auto-fit-text\">
      <StackLayout class=\"p-20\">
        <ui:AutoFitText text=\"Testinggggggggggggggggg\" textWrap=\"false\"></ui:AutoFitText>
      </StackLayout>
    </Page>
    \n

    Credits

    \n

    @grantland - android-autofittextview

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-add-contact-activity":{"name":"nativescript-add-contact-activity","version":"1.0.0","readme":"

    NativeScript Add Contact Activity

    \n

    \"NPM\"

    \n

    Simple NativeScript plugin that opens add contact activity for selected number.

    \n

    Limitations

    \n

    Currently, it only works on Android.

    \n

    Usage

    \n
    var addContact = require(\"nativescript-add-contact-activity\");
    addContact.createContact(123456789);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signingpad":{"name":"nativescript-signingpad","version":"1.0.1","license":"Apache 2.0","readme":"

    \"In-Mail\"\n\"License\"

    \n

    nativescript-signingpad

    \n

    A signing pad to provide signing functionality on iOS and Android

    \n

    In respect forked from the original nativescript-drawingpad by:https://github.com/bradmartin/nativescript-drawingpad

    \n

    License

    \n

    Source code of this project is available under the standard Apache2.0 license. Please see the license file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-webview":{"name":"nativescript-simple-webview","version":"1.1.5","license":"MIT","readme":"

    NativeScript Simple Webview Plugin

    \n

    A simple plugin for providing webview functionality to your NativeScript app, with the added ability to programmatically close the webview (in iOS).

    \n

    Installation

    \n
    tns plugin add nativescript-simple-webview
    \n

    Usage

    \n

    Unlike other nativescript webview plugins the simple webview plugin exposes a SimpleWebView interface with a single instance method named close().

    \n
    import { openUrl } from 'nativescript-simple-webview';

    const webview = openUrl({
        url: 'http://www.google.com',
    });

    webview.close();
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-knotes":{"name":"nativescript-social-share-knotes","version":"1.7.0","license":"MIT","readme":"

    NativeScript Social Share Plugin

    \n

    A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

    \n

    \"\"\n\"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-social-share
    \n

    This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");
    var imageSourceModule = require(\"image-source\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    import { ImageSource } from \"image-source\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\");
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText(\"I love NativeScript!\");
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adobe-marketing-cloud":{"name":"nativescript-adobe-marketing-cloud","version":"1.6.0","license":"MIT","readme":"

    Nativescript plugin for Adobe Marketing Cloud Solutions

    \n

    \"npm

    \n
    npm install nativescript-adobe-marketing-cloud --save
    \n

    Based on:

    \n
      \n
    • https://github.com/Adobe-Marketing-Cloud/mobile-services/releases/tag/v4.13.4-iOS
      • \n
    • https://github.com/Adobe-Marketing-Cloud/mobile-services/releases/tag/v4.13.4-Android
      • \n
    \n

    Setting up the application for usage with this plugin.

    \n

    Set up lifecycle tracking

    \n

    Listen to lifecycle events:

    \n
    import * as application from \"application\";
    import {AdobeAnalytics} from \"nativescript-adobe-marketing-cloud\";

    application.on(application.launchEvent, function (args: application.ApplicationEventData) {
        if (args.android) {
            AdobeAnalytics.getInstance().setContext(application.android.context);
        } else if (args.ios !== undefined) {
            AdobeAnalytics.getInstance().collectLifecycleData(null);
        }
    });

    application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
        if (args.android) {
            AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
        }
    });

    application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
        if (args.android) {
            AdobeAnalytics.getInstance().collectLifecycleData(application.android.foregroundActivity);
        }
    });

    if (application.android) {
        application.android.on(application.AndroidApplication.activityPausedEvent, function (args: application.AndroidActivityEventData) {
            AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
        });

        application.android.on(application.AndroidApplication.activityResumedEvent, function (args: application.AndroidActivityEventData) {
            AdobeAnalytics.getInstance().collectLifecycleData(application.android.foregroundActivity);
        });
    }

    application.start({ moduleName: \"main-page\" });
    \n

    Setup ADBMobileConfig.json

    \n

    Get the config file from the Adobe dashboard.

    \n

    iOS

    \n

    place ADBMobileConfig.json file in app\\App_Resources\\iOS

    \n

    Android

    \n

    place adbmobileconfig.json file in app\\App_Resources\\Android\\raw

    \n

    Track states and actions

    \n

    States and actions can be traced through method calls that match their native counterparts signature.

    \n

    Privacy options

    \n

    See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/privacy.html

    \n

    Select a privacy option:

    \n

    Send Data Until Opt-Out

    \n
    AdobeAnalytics.getInstance().optIn();
    \n

    Hold Data Until Opt-In

    \n
    AdobeAnalytics.getInstance().optOut();
    \n

    Visitor Tracking Between an App and Mobile Web

    \n

    See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/hybrid_app.html\nYou can call:

    \n
    AdobeAnalytics.getInstance().visitorAppendToURL(url);
    \n

    This will return the url provided extended with the visitorId.

    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n
      \n
    1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
      2. \n
    2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
      3. \n
    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario, you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above-mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the src folder in order to use native APIs:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

    \n
      \n
    • Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
      • \n
    \n

    Sometimes you just need to wipe out the demo's platforms directory only:

    \n
      \n
    • Run npm run demo.reset to delete the demo's platforms directory only.
      • \n
    \n

    Sometimes you may need to ensure plugin files are updated in the demo:

    \n
      \n
    • Run npm run plugin.prepare will do a fresh build of the plugin then remove itself from the demo and add it back for assurance.
      • \n
    \n

    Unittesting

    \n

    The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API go to src folder and execute one of these commands:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish to NPM

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in src/package.json
      • \n
    • Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)
      • \n
    \n

    If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

    \n

    NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

    \n

    TravisCI

    \n

    The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

    \n

    To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

    \n

    Referring tns-core-modules in the Plugin

    \n

    We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

    \n

    Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

    \n

    WRONG

    \n

    tsconfig.json

    \n
    ...

    \"paths\": {
      \"*\": [
        \"./node_modules/*\",
        \"./node_modules/tns-core-modules/*\"
      ]
    }
    ...
    \n

    yourplugin.common.ts

    \n
    import * as app from 'application';
    \n

    RIGHT

    \n

    yourplugin.common.ts

    \n
    import * as app from 'tns-core-modules/application';
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animatecss":{"name":"nativescript-animatecss","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript-AnimateCSS

    \n

    NativeScript plugin for Android to mimic Animate.CSS animations on Android views.

    \n

    This plugin uses AndroidViewAnimations by daimajia

    \n

    AnimateCSS Usage

    \n

    \"TwitterBang\"

    \n

    Installation

    \n

    npm install nativescript-animatecss

    \n

    Usage

    \n

    XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
        <Page.actionBar>
        <ActionBar title=\"NativeScript-AnimateCss\" color=\"#fff\" backgroundColor=\"#03A9F4\" />
      </Page.actionBar>
        <ScrollView>
            <StackLayout>
                <button text=\"Animate Css FTW!\" tap=\"animateIt\" />
                <image src=\"~/images/yoda.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"flashIt\" />
                <image src=\"~/images/batman.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"rotateIn\" />
                <image src=\"~/images/excellent.jpg\" stretch=\"aspectFit\" height=\"200\" tap=\"rubberBand\" />
            </StackLayout> 
        </ScrollView>
    </Page>
    \n

    JS:

    \n
    var animatecss = require(\"nativescript-animatecss\");

    function animateIt(args) {
        // get the native android widget for the view
        var nativeView = args.object.android;
        animatecss.animate({ view: nativeView, cssClass: 'Hinge', duration: 600 }).then(function (result) {
            console.log(result);
        }, function (err) {
            console.log(err);
        });
    }
    exports.animateIt = animateIt;
    \n

    API

    \n
      \n
    • animate(options)
      • \n
    • view : native android view
      • \n
    • cssClass : string class name
      • \n
    • duration: int in milliseconds
      • \n
    \n

    Effects

    \n

    Attention

    \n

    Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave

    \n

    Special

    \n

    Hinge, RollIn, RollOut,Landing,TakingOff,DropOut

    \n

    Bounce

    \n

    BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp

    \n

    Fade

    \n

    FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight

    \n

    FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp

    \n

    Flip

    \n

    FlipInX, FlipOutX, FlipOutY

    \n

    Rotate

    \n

    RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight

    \n

    RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight

    \n

    Slide

    \n

    SlideInLeft, SlideInRight, SlideInUp, SlideInDown

    \n

    SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown

    \n

    Zoom

    \n

    ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp

    \n

    ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-textinput":{"name":"nativescript-nbmaterial-textinput","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material TextInput

    \n

    The module implement Material calendar on both platforms iOS and Android.\nThe calendar implements slide transition effects.\nThe pager lets you change months using a swipe.

    \n

    The module provide some css class:

    \n
      \n
    • fullwidth : a full width text input (no margin, no borders...)
      • \n
    • dense: a smell input
      • \n
    • error: display text in red (add this class when the field is on error)
      • \n
    \n

    This module provide animation effect for float labels.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ti=\"nativescript-nbmaterial-textinput\">
     \t<ti:TextLayout rows=\"auto,auto\" id=\"textinput\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"TopFix Height\"></ti:TextPlaceholder>
            <ti:MultiLine hint=\"\" text=\"{{textInput}}\" editable=\"true\" maxHeight=\"100\"/>\t\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"textinput1\" class=\"fullwidth dense error\">
            <ti:TextPlaceholder text=\"Middle0\"></ti:TextPlaceholder>
            <TextField hint=\"\" text=\"{{textInput1}}\"/>
            <Label text=\"Erreur de saisie\" textWrap=\"true\" class=\"error\" />\t\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"textinput2\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Middle1\"></ti:TextPlaceholder>
            <TextField hint=\"Saisis\" text=\"{{textInput2}}\"/>\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"textinput3\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Middle2\"></ti:TextPlaceholder>
            <TextField hint=\"Saisis\" text=\"{{textInput3}}\"/>\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"textinput4\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Middle3\"></ti:TextPlaceholder>
            <TextField hint=\"Saisis\" text=\"{{textInput4}}\"/>\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"autogrow\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Top Autogrow\"></ti:TextPlaceholder>
            <ti:MultiLine hint=\"\" text=\"{{autogrow}}\" editable=\"true\"/>\t\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"visible\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Visible\"></ti:TextPlaceholder>
            <TextField hint=\"Saisis gros\" text=\"{{visible}}\"/>\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"textinput5\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Bottom\"></ti:TextPlaceholder>
            <TextField hint=\"Saisis gros\" text=\"{{textInput5}}\"/>\t\t
        </ti:TextLayout>
        <ti:TextLayout rows=\"auto,auto\" id=\"autogrowb\" class=\"fullwidth dense\">
            <ti:TextPlaceholder text=\"Bottom AutoGrow\"></ti:TextPlaceholder>
            <ti:MultiLine hint=\"Saisis gros\" text=\"{{autogrowb}}\"/>\t\t
        </ti:TextLayout>
    </Page>

    }
    \n

    The TextLayout has this interface:

    \n
    export declare class TextLayout extends LayoutBase {
        focused: boolean;  
        hasText: boolean;
    }
    export declare class SingleLine extends TextField {
    }
    export declare class MultiLine extends TextView {  
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-child-animations":{"name":"nativescript-child-animations","version":"2.0.2","license":"Apache-2.0","readme":"

    Nativescript Child Animations

    \n

    A small nativescript plugin that makes it easier to animate multiple child elements.

    \n\n

    Installation

    \n

    In your nativescript source directory, run:

    \n
    tns plugin add nativescript-child-animations
    \n

    This should add the child animations package to your package.json within your project ready for use.

    \n

    Usage

    \n

    This child animations package works by supplying a function with : a parent (container) view, an animation definition, a delay between animating each child view and optionally a 'reverse' boolean.

    \n
      \n
    1. \n

      Import NativescriptChildAnimations module in the component that you'd like to use it in:

      \n
      import { animateChildren } from 'nativescript-child-animations';
      \n
      2. \n
    2. \n

      Call the animateChildren() function with params:

      \n
      animateChildren(parentView, animationDef, 70);
      \n
      3. \n
    \n

    Example

    \n

    example.component.html

    \n
    <FlexBoxLayout flexDirection=\"column\" id=\"parent\">
      <Label style=\"transform: translate(0, -800)\" text=\"I'm First!\"></Label>
      <Label style=\"transform: translate(0, -800)\" text=\"I'm Second!\"></Label>
      <Label style=\"transform: translate(0, -800)\" text=\"I'm Third!\"></Label>
    </FlexBoxLayout>
    \n

    example.component.ts

    \n
    import { animateChildren } from 'nativescript-child-animations';
    import { Component, OnInit } from '@angular/core';
    import { Page } from 'tns-core-modules/ui/page/page';
    import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
    import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
    import { AnimationDefinition } from 'tns-core-modules/ui/animation/animation';
    import { AnimationCurve } from 'tns-core-modules/ui/enums';

    @Component({
        selector: 'Home',
        moduleId: module.id,
        templateUrl: './home.component.html'
    })
    export class HomeComponent implements OnInit {
        parentView: FlexboxLayout | StackLayout;
        animationDef: AnimationDefinition = {
            translate: { x: 0, y: 0 },
            duration: 1000,
            curve: AnimationCurve.easeOut
        }

        constructor(private page: Page) {}

        ngOnInit(): void {
            this.page.on('navigatedTo', () => {
                this.parentView = this.page.getViewById('parent');
                animateChildren(this.parentView, this.animationDef, 70, true);
            });
        }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-toasty":{"name":"@triniwiz/nativescript-toasty","version":"4.1.3","license":"Apache-2.0","readme":"

    NativeScript-Toasty

    \n

    Install

    \n

    NativeScript 7.0+

    \n

    tns plugin add @triniwiz/nativescript-toasty

    \n

    NativeScript < 7.0

    \n

    tns plugin add nativescript-toasty@3.0.0-alpha.2

    \n

    Usage

    \n

    TypeScript

    \n
    import { Toasty } from '@triniwiz/nativescript-toasty';
    import { isIOS } from '@nativescript/core/platform';
    // Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
    const toast = new Toasty({ text: 'Toast message' });
    toast.show();

    // you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
    new Toasty({ text: 'Some Message' })
      .setToastDuration(ToastDuration.LONG)
      .setToastPosition(ToastPosition.BOTTOM)
      .setTextColor(new Color('white'))
      .setBackgroundColor('#ff9999')
      .show();

    // or you can set the properties of the Toasty instance
    const toasty = new Toasty({
      text: 'Somethign something...',
      position: ToastPosition.TOP,
      yAxisOffset: 100,
      xAxisOffset: 10,
      ios: {
        displayShadow: true,
        shadowColor: '#fff000',
        cornerRadius: 24,
      },
      anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
    });

    toasty.duration = ToastDuration.SHORT;
    toasty.textColor = '#fff';
    toasty.backgroundColor = new Color('purple');
    toasty.show();
    \n

    JavaScript

    \n
    var toasty = require('@triniwiz/nativescript-toasty').Toasty;
    var toast = new toasty({ text: 'Toast message' });
    toast.show();
    \n

    API

    \n
    export interface Toasty {

      constructor(opts: ToastyOptions);

      position: ToastPosition;

      duration: ToastDuration;

      textColor: Color | string;

      backgroundColor: Color | string;

      yAxisOffset?: Length | number;

      xAxisOffset?: Length | number;

      readonly width: number;

      readonly height: number;


      /**
       * Show the Toasty
       */
      show();

      /**
       * Cancels the Toasty
       */
      cancel();

    /**
     * Sets the Toast position.
     */
      setToastPosition(value: ToastPosition): Toasty;

    /**
     * Sets the Toast duration.
     */
      setToastDuration(value: ToastDuration): Toasty;

    /**
      * Set the text color of the toast.
      * @param value [Color | string] - Color of the string message.
      */
      setTextColor(value: Color | string): Toasty;

    /**
      * Set the background color of the toast.
      * @param value [Color |  string] - Color of the background.
      * On Android this currently removes the default Toast rounded borders.
      */
      setBackgroundColor(value: Color | string): Toasty;

    }
    \n
    export enum ToastDuration {
      'SHORT',
      'LONG',
    }

    export enum ToastPosition {
      'BOTTOM',
      'BOTTOM_LEFT',
      'BOTTOM_RIGHT',
      'CENTER',
      'CENTER_LEFT',
      'CENTER_RIGHT',
      'TOP',
      'TOP_LEFT',
      'TOP_RIGHT',
    }

    export interface ToastyOptions {
      /**
       * Message text of the Toast.
       */
      text: string;

      /**
       * Duration to show the Toast.
       */
      duration?: ToastDuration;

      /**
       * Position of the Toast.
       */
      position?: ToastPosition;

      /**
       * Text color of the Toast message.
       */
      textColor?: Color | string;

      /**
       * Background Color of the Toast.
       */
      backgroundColor?: Color | string;

      /**
       * Android specific configuration options.
       */
      android?: any;

      /**
       * iOS Specific configuration options.
       */
      ios?: {
        /**
         * The native iOS view to anchor the Toast to.
         */
        anchorView?: any;

        /**
         * The number of lines to allow for the toast message.
         */
        messageNumberOfLines?: number;

        /**
         * The corner radius of the Toast.
         */
        cornerRadius?: number;

        /**
         * True to display a shadow for the Toast.
         */
        displayShadow?: boolean;

        /**
         * The color of the shadow. Only visible if `displayShadow` is true.
         */
        shadowColor?: Color | string;
      };
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-systemui":{"name":"nativescript-systemui","version":"1.0.14","license":"MIT","readme":"

    NativeScript System UI

    \n

    A NativeScript plugin to change System UI.

    \n

    IOS

    \n

    To show/hide the statusBar you need to have UIViewControllerBasedStatusBarAppearance set to false in your Info.plist

    \n

    Usage

    \n
    npm install nativescript-systemui --save
    \n

    If you are using version ^1.0.0 then we now use mixins

    \n
    import { installMixins } from 'nativescript-systemui';
    installMixins();
    \n

    Then new properties are added to the Page class

    \n
      \n
    • statusBarColor (css property status-bar-color)
      • \n
    • navigationBarColor (css property navigation-bar-color)
      • \n
    \n

    For versions < 1.0.0

    \n

    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.

    \n

    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.

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

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

    \n

    \"status-bar-light\"

    \n

    Note The SystemUI 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.

    \n

    With Vue.js

    \n

    In your root app.js:

    \n
    import StatusBarPlugin from 'nativescript-systemui/vue';
    Vue.use(StatusBarPlugin);
    \n

    In your component:

    \n
    <Page class=\"page\" actionBarHidden=\"true\" backgroundSpanUnderStatusBar=\"true\">
          <StatusBar barColor=\"#32475b\" />
          <NavigationBar barColor=\"#32475b\" />
    <Page/>
    \n

    That's is.

    \n

    Development workflow

    \n

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

    \n
      \n
    • Fork the repository locally
      • \n
    • Open the repository in your favorite terminal
      • \n
    • Navigate to the src code that contains the plugin's code cd /src
      • \n
    • Execute the npm script nmp run build.wrappers or npm run build.wrappers.watch
      • \n
    • When running the Vanila NativeScript demo app execute: npm run demo.android or npm run demo.ios
      • \n
    • When running the Angular NativeScript demo app execute: npm run demo.angular.android or npm run demo.angular.ios
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer-tweaked":{"name":"nativescript-accelerometer-tweaked","version":"2.0.6","license":"MIT","readme":"

    NativeScript Accelerometer Plugin

    \n

    Accelerometer plugin for NativeScript with TYPE_LINEAR_ACCELERATION

    \n

    Installation

    \n
    tns plugin add nativescript-accelerometer-tweaked
    \n

    This plugin is based on the original accelerometer plugin except rather than listening to only TYPE_ACCELEROMETER, it listens to the following sensors:\n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

    \n

    Usage

    \n
    var accelerometer = require(\"nativescript-accelerometer-tweaked\");

    accelerometer.startAccelerometerUpdates(function(data) {
        console.log(\" X: \" + data.x + \" Y: \" + data.y + \" Z: \" + data.z + \" Sensor Type: \" + data.sensortype + \" Time in milliseconds : \" + data.timemilli);
    }, { sensorDelay: \"ui\" });
    \n

    Expected Values

    \n
      \n
    • x\n
        \n
      • Tilt Left from -1 to 0
        • \n
      • Tilt Right from 0 to 1
        • \n
      \n
      • \n
    • y\n
        \n
      • Tilt Forward from 0 to 1
        • \n
      • Tilt Back from -1 to 0
        • \n
      \n
      • \n
    • z\n
        \n
      • Face Up -1
        • \n
      • Face Down 1
        • \n
      • Sideways 0
        • \n
      \n
      • \n
    • sensortype\n
        \n
      • TYPE_LINEAR_ACCELERATION 10
        • \n
      • TYPE_GRAVITY 9
        • \n
      • TYPE_MAGNETIC_FIELD 2
        • \n
      • TYPE_ROTATION_VECTOR 11
        • \n
      \n
      • \n
    • timemilli\n
        \n
      • returns time in milliseconds can be used to put an interval incase you want to delay saving to a db or for whatever purpose.
        • \n
      \n
      • \n
    \n

    Options

    \n

    You can control how often the callback will be called by setting the sensorDelay option. The values are:

    \n
      \n
    • "normal" - Suitable for screen orientation changes. Around 0.2 seconds.
      • \n
    • "ui" - Suitable for the user interface. Around 0.06 seconds.
      • \n
    • "game" - Suitable for games. Around 0.02 seconds.
      • \n
    • "fastest" - Sensor data as fast as possible.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-adobe-experience-cloud":{"name":"nativescript-adobe-experience-cloud","version":"2.0.0","license":"MIT","readme":"

    Nativescript plugin for Adobe Experience Cloud Solution

    \n

    \"npm

    \n
    npm install nativescript-adobe-experience-cloud --save
    \n

    This plugin is based on Nativescript 7 and Adobe Experience Platform solution

    \n

    https://github.com/Adobe-Marketing-Cloud/acp-sdks/releases\nGet the Adobe Experience Platform SDK https://aep-sdks.gitbook.io/docs/getting-started/get-the-sdk

    \n

    Setting up the application for usage with this plugin.

    \n

    Setup config.ts

    \n

    Create a configuration file and place your ENVIRONMENT_ID from Adobe Experience platform.

    \n
    import { AdobeAnalyticsSettings } from \"nativescript-adobe-experience-cloud\";

    export const adobeExperienceSettings: AdobeAnalyticsSettings = {
        environmentId: 'Put your environment id here.',
        debug: true
    };
    \n

    Initialize SDK

    \n

    Android

    \n
    import { AdobeAnalytics } from 'nativescript-adobe-experience-cloud';
    import { adobeExperienceSettings } from '~/config'; 

    @NativeClass()
    @JavaProxy('nl.essent.Application')
    class Application extends android.app.Application {

        public onCreate(): void {
            super.onCreate();
            AdobeAnalytics.getInstance().initSdk(adobeExperienceSettings, this);
        }

        public attachBaseContext(baseContext: android.content.Context) {
            super.attachBaseContext(baseContext);
        }
    }
    \n

    IOS

    \n
    import { AdobeAnalytics } from 'nativescript-adobe-experience-cloud';
    import { adobeExperienceSettings } from '~/config'; 

    @NativeClass()
    class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {
            AdobeAnalytics.getInstance().initSdk(adobeExperienceSettings, application);
            return true;
         }
     }
        ios.delegate = MyDelegate;
    \n

    NOTE This plugin provides only initial set of extensions registered with Adobe Experience platform. For any additional extension fork this plugin and configure based on Mobile Property installation instructions.

    \n

    Enable lifecycle tracking

    \n

    Android

    \n

    With onResume function start Lifecycle data collection:

    \n
    import {AdobeAnalytics} from \"nativescript-adobe-experience-cloud\";

    public onResume() : void {
            AdobeAnalytics.getInstance().resumeCollectingLifecycleData();
            super.onResume();
        }
    }
    \n

    Use onPause function to pause collection Lifecycle data:

    \n
    public onPause() : void {
            AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
            super.onPause();
        }
    \n

    IOS

    \n

    Start collection Lifecycle data is part of plugin implementation called during initialization of SDK.

    \n

    When application is resuming from background state, you need to resume collection of Lifecycle data:

    \n
    applicationWillEnterForeground(application: UIApplication){
        AdobeAnalytics.getInstance().resumeCollectingLifecycleData();
     }
    \n

    When the app enters the background, pause collecting Lifecycle data:

    \n
    applicationDidEnterBackground(application: UIApplication): void {
        AdobeAnalytics.getInstance().pauseCollectingLifecycleData();
    }
    \n

    Track states and actions

    \n

    States and actions can be traced through method calls that match their native counterparts signature.

    \n

    Privacy options

    \n

    See: https://marketing.adobe.com/resources/help/en_US/mobile/ios/privacy.html

    \n

    Select a privacy option:

    \n

    Send Data Until Opt-Out

    \n
    AdobeAnalytics.getInstance().optIn();
    \n

    Hold Data Until Opt-In

    \n
    AdobeAnalytics.getInstance().optOut();
    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n
      \n
    1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
      2. \n
    2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
      3. \n
    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario, you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above-mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the src folder in order to use native APIs:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

    \n
      \n
    • Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
      • \n
    \n

    Sometimes you just need to wipe out the demo's platforms directory only:

    \n
      \n
    • Run npm run demo.reset to delete the demo's platforms directory only.
      • \n
    \n

    Sometimes you may need to ensure plugin files are updated in the demo:

    \n
      \n
    • Run npm run plugin.prepare will do a fresh build of the plugin then remove itself from the demo and add it back for assurance.
      • \n
    \n

    Unittesting

    \n

    The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API go to src folder and execute one of these commands:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish to NPM

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in src/package.json
      • \n
    • Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)
      • \n
    \n

    If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

    \n

    NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

    \n

    TravisCI

    \n

    The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

    \n

    To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

    \n

    Referring tns-core-modules in the Plugin

    \n

    We recommend to use full imports of tns-core-modules due to an issue in Angular CLI. Read more detailed explanation in this discussion.

    \n

    Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from tns-core-modules using full path. Here is an example:

    \n

    WRONG

    \n

    tsconfig.json

    \n
    ...

    \"paths\": {
      \"*\": [
        \"./node_modules/*\",
        \"./node_modules/tns-core-modules/*\"
      ]
    }
    ...
    \n

    yourplugin.common.ts

    \n
    import * as app from 'application';
    \n

    RIGHT

    \n

    yourplugin.common.ts

    \n
    import * as app from 'tns-core-modules/application';
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas-interface":{"name":"nativescript-canvas-interface","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/shripalsoni04/nativescript-canvas-interface/blob/master/LICENSE"},"readme":"

    Nativescript-Canvas-Interface

    \n

    Nativescript Plugin to perform image manipulation using web-view canvas for Android/iOS.

    \n

    Installation

    \n

    From the terminal, go to your app's root folder and execute:

    \n
    tns plugin add nativescript-canvas-interface
    \n

    Once the plugin is installed, you need to copy plugin files for webView, into your webView content folder.\ne.g.

    \n
    cp -r node_modules/nativescript-canvas-interface/www/ app/www/lib/
    \n

    Usage

    \n

    For a quick start, you can check this Demo App and Blog Post

    \n

    Inside Native App

    \n

    Insert a web-view somewhere in your page. You can keep it hidden, if you don't want to show the image in web-view.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    ....
    <web-view id=\"webView\" src=\"~/www/index.html\" visibility=\"collapse\"></web-view>

    <!-- Native Image View on which image manipulation is performed -->
    <Image id=\"img\" src=\"~/road-nature.jpg\"/> 
    ....
    </Page>
    \n

    Initialize Canvas Interface Plugin in your javascript file.

    \n
    var nsCanvasInterfaceModule = require('nativescript-canvas-interface');
    var oNSCanvasInterface;
    var imageView;

    function pageLoaded(args){
        page = args.object;
        var webView = page.getViewById('webView');
        imageView = page.getViewById('img');
        initCanvasInterface(webView); 
    }

    function initCanvasInterface(webView: WebView) {
        oNSCanvasInterface = new nsCanvasInterfaceModule.NativescriptCanvasInterface(webView, 'canvasEle'); // 'canvasEle' is the value of \"id\" attribute of the canvas element in web-view
    }
    \n

    Use any API Method of NativescriptCanvasInterface Class

    \n
    function setCanvasImage(){
        oNSCanvasInterface.setImage('setCanvasImage', imageView, args).then(function(result){
            // result.data contains any value returned from setCanvasImage function in web-view
        });
    }

    function createImage(){
        oNSCanvasInterface.createImage('setBrightness', args).then(function(result) {
            imageView.imageSource = result.image;
        });
    }
    \n

    If you want to set/create image on load of the page, you need to call all such code once webView is loaded

    \n
    webView.on('loadFinished', (args) => {
        if (!args.error) {
            // call setImage/createImage
        }
    });
    \n

    Inside WebView

    \n

    Import nativescript-webview-interface.js, nativescript-canvas-interface.js and es6-promise.min.js in your html page from the folder\nwhere you copied www files during installation.
    \nAdd canvas element and give it an id.

    \n
    <html>
        <head></head>
        <body>
            <canvas id=\"canvasEle\"></canvas>
            <script src=\"path/to/es6-promise.min.js\"></script>
            <script src=\"path/to/nativescript-webview-interface.js\"></script>
            <script src=\"path/to/nativescript-canvas-interface.js\"></script>
            <script src=\"path/to/your-custom-script.js\"></script>        
        </body>
    </html>
    \n

    Now, create instance of NSCanvasInterface using canvas element. Once the instance is created, we need to register the functions which will\nhandle requests from native app.

    \n
    function init() {
        var canvasEle = document.getElementById('canvasEle');
        var oCanvasInterface = new window.NSCanvasInterface(canvasEle);
        registerNSCanvasReqHandlers(oCanvasInterface);    
    }

    function registerNSCanvasReqHandlers(oCanvasInterface) {
        oCanvasInterface.canvasReqHandlers = {
            setCanvasImage: setCanvasImage,
            setBrightness: setBrightness
        };
    }
     
    function setCanvasImage(canvas, ctx, image){
        // set image to canvas or do anything you want.
        ctx.drawImage(image, 0, 0, 100, 100);
    }

    /**
     * Return promise or value or nothing. 
     * Once the promise is reslved or value is returned, the plugin will create an image 
     * from canvas context and pass it to native app.
     */     
    function setBrightness(canvas, ctx, value){
        return Promise(function(resolve, reject){
            // do image manipulation on canvas
            resolve();   
        });
    }   
     
    init();
    \n

    API

    \n

    Native App API

    \n

    Constructor

    \n

    NativescriptCanvasInterface(webView: WebView, canvasId: String)

    \n

    We need to create a new instance per web-view canvas element.

    \n
    Parameters
    \n

    webView: Nativescript web-view element.
    \ncanvasId: Value of "id" attribute of web-view canvas element.

    \n

    Methods

    \n

    setImage(functionName: string, image: Image | ImageSource | string, args?: any[], format: string = 'png'): Promise<{data: any}>

    \n

    Call this method to send image from native app to web-view. The image is automatically converted\nfrom nativescript ImageView/ImageSource/imagePath to HTML Image element, and that HTML Image is served to the\nregistered function in web-view.

    \n
    Parameters
    \n

    functionName: Registered name of the function in web-view, to handle the image sent.
    \nimage: Image to send to web-view. Image can be a Nativescript ImageView or ImageSource or a valid Image Path.
    \nargs: (Optional) Any extra argument to pass to function in web-view.
    \nformat: (Optional) Format in which we want to send the image to web-view. Possible formats are jpeg or png. Default value is png.
    \nreturns: Promise with any data returned from the function in web-view.

    \n

    createImage(functionName: string, args?: any[], format: string = 'png'): Promise<{image: ImageSource, data: any}>

    \n

    Call this method to execute function in web-view, which performs canvas manipulation, and get the manipulated image back.

    \n
    Parameters
    \n

    functionName: Function to be executed in web-view, to create image from canvas.
    \nargs: Any extra argument to pass to function in web-view.
    \nformat: Expected image format from canvas in web-view. Possible formats are jpeg or png. Default value is png.
    \nreturns: Promise with nativescript ImageSource and any data returned from the function in web-view.

    \n

    WebView API (window.NSCanvasInterface Class)

    \n

    Constructor

    \n

    NSCanvasInterface(canvas: HTMLCanvasElement)

    \n

    Create new instance per canvas element.

    \n

    Property

    \n

    canvasReqHandlers: { [fnName: string]: (...args) => Promise | any }

    \n

    Register all the functions which handles requests from native app for canvas manipulation.

    \n
    Signature of function which handles setImage API call from native app.
    \n
    function setCanvasImage(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, image: HTMLImageElement, ...arg: any[]){
        // return nothing or some value or promise
    }
    \n
    Signature of function which handles createImage API call from native app.
    \n
    function doSomeCanvasManip(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ...arg: any[]){
        // return nothing or some value or promise
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dialog":{"name":"nativescript-dialog","version":"0.1.0","license":"Apache-2.0","readme":"

    NativeScript Dialog

    \n

    A NativeScript plugin for iOS and Android that allows you to create custom dialog.

    \n

    Installation

    \n

    tns plugin add nativescript-dialog

    \n

    Usage

    \n

    \n
    <Page>
       <StackLayout>
         <Button text=\"Show dialog\" tap=\"buttonTap\" />
       </StackLayout>
    </Page>
    \n
    var platform = require(\"platform\");
    var application = require(\"application\");
    var dialog = require(\"nativescript-dialog\");

    exports.buttonTap = function(args){
      var nativeView;

      if(platform.device.os === platform.platformNames.ios){
    \t  nativeView = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(UIActivityIndicatorViewStyle.UIActivityIndicatorViewStyleGray);
        nativeView.startAnimating();
      } else if(platform.device.os === platform.platformNames.android){
    \t  nativeView = new android.widget.ProgressBar(application.android.currentContext);
        nativeView.setIndeterminate(true);
      }

      dialog.show({
    \ttitle: \"Loading...\",
    \tmessage: \"Please wait!\",
    \tcancelButtonText: \"Cancel\",
    \tnativeView: nativeView}
      ).then(function(r){ console.log(\"Result: \" + r); },
      function(e){console.log(\"Error: \" + e)});
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-applozic-chat-fork":{"name":"nativescript-applozic-chat-fork","version":"2.2.0","license":"Apache-2.0","readme":"

    Applozic NativeScript Chat Plugin

    \n

    Prerequisites

    \n

    iOS

    \n
      \n
    • Apps must target iOS 10 or later
      • \n
    • Xcode 12 or later required
      • \n
    \n

    NativeScript

    \n
      \n
    • NativeScript 7 required check more on compatibility issues here
      • \n
    \n

    Installation

    \n
    \n

    For NativeScript 7 compatibility, run.

    \n
    \n
    tns plugin add nativescript-applozic-chat@2.0.0
    \n
    \n

    For NativeScript 6 compatibility, run.

    \n
    \n
    tns plugin add nativescript-applozic-chat@1.7.2
    \n

    Goto src folder and run

    \n
    npm run demo.ios
    \n

    Usage

    \n
    JavaScript
    \n

    Add import

    \n
    var nativescript_applozic_chat = require(\"nativescript-applozic-chat\");
    \n

    And then inside your funcation you can create the object of ApplozicChat to access it.

    \n
    var applozicChat = new nativescript_applozic_chat.ApplozicChat();
    \n
    TypeScript
    \n

    Add import

    \n
    import { ApplozicChat } from \"nativescript-applozic-chat\";
    \n

    And then inside your funcation you can create the object of ApplozicChat to access it.

    \n
    var applozicChat = new ApplozicChat();
    \n

    Login/Register User

    \n
        var alUser = {
                'userId' : userId,   //Replace it with the userId of the logged in user NOTE: String userId
                'password' : password,  //Put password here NOTE: String password
                'authenticationTypeId' : 1,
                'applicationId' : 'applozic-sample-app'  //replace \"applozic-sample-app\" with Application Key from Applozic Dashboard
            };

        applozicChat.login(alUser, function(response) {
            applozicChat.launchChat(); //launch chat
          }, function(error) {
            console.log(\"onLoginFailure: \" + error);
          });
    \n

    Launch Chat

    \n
    Main Chat screen
    \n
            applozicChat.launchChat();
    \n
    Launch Chat with a specific User
    \n
            applozicChat.launchChatWithUserId(userId);
    \n
    Launch Chat with specific Group
    \n
            applozicChat.launchChatWithGroupId(groupId, function(response){
    \t  console.log(\"Success : \" + response);
    \t}, function(response){
    \t  console.log(\"Error : \" + response);
    \t});
    \n

    Logout

    \n
    applozicChat.logout(function(response) {
          console.log(\"logout success: \" + response);
        }, function(error) {
          console.log(\"logout error: \"+ error);
        });
    \n

    Push Notification Setup instruction

    \n

    Uploading the push notification certificate and GCM/FCM server key in applozic dashboard

    \n

    a) For IOS upload your APNS push notification certificate to Applozic Dashboard page under 'Edit Application' section in order to enable real-time notification.

    \n

    Go to Applozic Dashboard Push Notification Push Notification -> Upload APNS Certificate for Development and Distribution environment.

    \n

    b) For Android go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.

    \n

    Android

    \n

    Prerequisites:

    \n
      \n
    1. Download these files https://github.com/reytum/Applozic-Push-Notification-FIles
      2. \n
    2. Register you application in firebase console and download the google-services.json file.
      3. \n
    3. Get the FCM server key from firebase console.(There is a sender ID and a server key, make sure you get the server key).
      4. \n
    4. Go to Applozic Dashboard Push Notification and update the GCM/FCM server key under Push Notification -> GCM/FCM Key.
      5. \n
    \n

    Steps to follow:

    \n
      \n
    1. \n

      Copy the pushnotification folder from the above downloaded files and paste it in path <your project>/platforms/android/src/main/java/com/tns/

      \n
      2. \n
    2. \n

      Add these lines in file <your project>/platforms/android/src/main/AndroidManifest.xml inside <application> tag

      \n
         <service android:name="com.tns.pushnotification.FcmListenerService">\n     <intent-filter>\n         <action android:name="com.google.firebase.MESSAGING_EVENT" />\n     </intent-filter>\n </service>\n <service\n     android:name="com.tns.pushnotification.FcmInstanceIDListenerService"\n     android:exported="false">\n     <intent-filter>\n         <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />\n     </intent-filter>\n </service>\n
      \n
      3. \n
    3. \n

      Add the same lines from step 2 in <your project>/app/App_Resources/Android/AndroidManifest.xml file inside <application> tag

      \n
      4. \n
    4. \n

      Paste thegoogle-services.json file in <your project>/platforms/android/ folder

      \n
      5. \n
    5. \n

      Open <your project>/platforms/android/build.gradle :\nadd this inside dependency mentioned in top of the file (below classpath "com.android.tools.build:gradle:2.2.3") :\nclasspath "com.google.gms:google-services:3.1.1"\nadd this below apply plugin: "com.android.application" :\napply plugin: "com.google.gms.google-services"

      \n
      6. \n
    6. \n

      Call PushNotificationTask in onSuccess of applozic login as below:

      \n
         applozicChat.registerForPushNotification(function(response){
         console.log(\"push success : \" + response);
       }, function(response){
         console.log(\"push failed : \" + response);
       });
      \n
      7. \n
    \n

    Note : Everytime you remove and add android platform you need to follow steps 1,2,4 and 5.

    \n

    Ios

    \n
      \n
    1. \n

      Download delegate.ts file from this delegate.ts link and paste it under your project folder-->app-->delegate.ts

      \n
      2. \n
    2. \n

      Download app.ts file from the app.ts link and replace the app.ts file in your project if you have any changes then you can merge only required changes from the app.ts file link

      \n
      3. \n
    \n

    NOTE : Above push notification setup for android and ios is in the case if your not using native script push plugin in your project

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal-updated":{"name":"nativescript-windowed-modal-updated","version":"76.0.0","license":"Apache-2.0","readme":"

    Nativescript Windowed Modal \"apple\" \"android\"

    \n

    \"npm\n\"npm\n\"Build

    \n

    This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

    \n

    NativeScript 5.x only, for older NS versions use 1.0.3 instead.

    \n

    Installation

    \n
    tns plugin add nativescript-windowed-modal
    \n

    Usage

    \n

    Code

    \n

    Call the overrideModalViewMethod() once before starting the app and register the layout element:

    \n

    Javascript

    \n
    var windowedModal = require(\"nativescript-windowed-modal\")
    windowedModal.overrideModalViewMethod()
    \n

    Typescript+Angular

    \n
    import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    registerElement(\"ModalStack\", () => ModalStack)
    \n

    You can pass extended options like this:

    \n
    mainPage.showModal(\"./modal\", {
      context: \"I'm the context\",
      closeCallback: (response: string) => console.log(\"Modal response: \" + response),
      dimAmount: 0.5 // Sets the alpha of the background dim
    } as ExtendedShowModalOptions)
    \n

    NativeScript-Vue

    \n
    // main.js
    import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    Vue.registerElement(\"ModalStack\", () => ModalStack)
    Vue.use(VueWindowedModal)
    \n

    You can pass extended options like this:

    \n
    <script type=\"text/javascript\">
      export default {
        methods: {
          openModalTap() {
            this.$showModal(\"./modal\", {
              props: {},
              fullscreen: false,
              animated: true,
              stretched: false,
              dimAmount: 0.5 // Sets the alpha of the background dim,
            })
          }
        }
      }
    </script>
    \n

    Properties

    \n

    ExtendedShowModalOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
    \n

    ModalStack

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
    verticalPositionstringbothmiddleUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
    horizontalPositionstringbothcenterUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
    \n

    Layout

    \n

    Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
        <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
            <StackLayout class=\"modal\">
                <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
            </StackLayout>
        </modal:ModalStack>
    </Page>
    \n

    HTML (Angular)

    \n
    <ModalStack dismissEnabled=\"true\" class=\"modal-container\">
      <StackLayout class=\"modal\">
        <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
      </StackLayout>
    </ModalStack>
    \n

    Style

    \n

    You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

    \n
    .modal {
      margin: 20;
      margin-top: 35;
      border-radius: 8;
      horizontal-align: center;
      vertical-align: middle;
      background-color: white;
    }

    .modal-container {
      padding: 25;
      padding-bottom: 10;
    }
    \n

    Running the demo app

    \n
      \n
    1. Clone this repo
      2. \n
    2. cd src
      3. \n
    3. npm install && npm run plugin.prepare
      4. \n
    4. npm run demo.android or npm run demo.ios
      5. \n
    \n

    Changelog

    \n

    v5.0.6

    \n
      \n
    • Fix layout bug
      • \n
    \n

    Known Issues

    \n
      \n
    • Padding won't apply on children of the ModalStack, wrapping them with a StackLayout fixes the problem;
      • \n
    • Auto width is kinda buggy on some situations, set a fixed width for children of ModalStack when possible;
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-accelerometer-advanced":{"name":"nativescript-accelerometer-advanced","version":"2.0.8","license":"MIT","readme":"

    NativeScript Accelerometer Plugin

    \n

    Accelerometer plugin for NativeScript that uses the following sensors:
    \n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

    \n

    Installation

    \n
    tns plugin add nativescript-accelerometer-advanced
    \n

    This plugin is based on the original accelerometer plugin except rather than listening to only TYPE_ACCELEROMETER, it listens to the following sensors:\n* TYPE_LINEAR_ACCELERATION\n* TYPE_GRAVITY\n* TYPE_MAGNETIC_FIELD\n* TYPE_ROTATION_VECTOR

    \n

    Usage

    \n
    var accelerometer = require(\"nativescript-accelerometer-advanced\");

    accelerometer.startAccelerometerUpdates(function(data) {
        console.log(\" X: \" + data.x + \" Y: \" + data.y + \" Z: \" + data.z + \" Sensor Type: \" + data.sensortype + \" Time in milliseconds : \" + data.timemilli);
    }, { sensorDelay: \"ui\" });
    \n

    Expected Values

    \n
      \n
    • x\n
        \n
      • Tilt Left from -1 to 0
        • \n
      • Tilt Right from 0 to 1
        • \n
      \n
      • \n
    • y\n
        \n
      • Tilt Forward from 0 to 1
        • \n
      • Tilt Back from -1 to 0
        • \n
      \n
      • \n
    • z\n
        \n
      • Face Up -1
        • \n
      • Face Down 1
        • \n
      • Sideways 0
        • \n
      \n
      • \n
    • sensortype\n
        \n
      • TYPE_LINEAR_ACCELERATION 10
        • \n
      • TYPE_GRAVITY 9
        • \n
      • TYPE_MAGNETIC_FIELD 2
        • \n
      • TYPE_ROTATION_VECTOR 11
        • \n
      \n
      • \n
    • timemilli\n
        \n
      • returns time in milliseconds can be used to put an interval incase you want to delay saving to a db or for whatever purpose.
        • \n
      \n
      • \n
    \n

    Options

    \n

    You can control how often the callback will be called by setting the sensorDelay option. The values are:

    \n
      \n
    • "normal" - Suitable for screen orientation changes. Around 0.2 seconds.
      • \n
    • "ui" - Suitable for the user interface. Around 0.06 seconds.
      • \n
    • "game" - Suitable for games. Around 0.02 seconds.
      • \n
    • "fastest" - Sensor data as fast as possible.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ad-support":{"name":"nativescript-ad-support","version":"1.0.2","license":"Apache-2.0","readme":"

    nativescript-ad-support

    \n

    This adds the iOS AdSupport framework to your Nativescript app for use with Firebase and campaign attribution (IDFA).

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-ad-support
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-account-kit":{"name":"nativescript-facebook-account-kit","version":"1.3.1","license":"Apache-2.0","readme":"

    Facebook Account Kit plugin for NativeScript (Unofficial)

    \n

    This plugin is a wrapper in {N} around the native facebook's Account Kit's iOS and Android plugins.

    \n

    Refer to facebook's docs to understand how Account Kit works and how to set it up on Facebook's developer portal.

    \n

    Installation

    \n
    tns plugin add nativescript-facebook-account-kit
    \n

    iOS

    \n

    On iOS, Add the following to your Info.plist found under /app/App_Resources/iOS somewhere inside <dict />

    \n
        <key>FacebookAppID</key>
    \t<string><!--Your app id from developer portal--></string>
    \t<key>AccountKitClientToken</key>
    \t<string><!--Client token from dev portal--></string>
    \t<key>CFBundleURLTypes</key>
    \t<array>
    \t\t<dict>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
    \t\t\t\t<string>ak<!--Your app id from developer portal--></string>
    \t\t\t</array>
    \t\t</dict>
    \t</array>
    \n

    Android

    \n

    On Android, Add the following to AndroidManifest.xml inside the <application> tag.

    \n
    \t<meta-data android:name=\"com.facebook.accountkit.ApplicationName\"
    \t\t\t\tandroid:value=\"@string/app_name\" />
    \t<meta-data android:name=\"com.facebook.sdk.ApplicationId\"
    \t\t\tandroid:value=\"@string/FACEBOOK_APP_ID\" />
    \t<meta-data android:name=\"com.facebook.accountkit.ClientToken\"
    \t\t\tandroid:value=\"@string/ACCOUNT_KIT_CLIENT_TOKEN\" />

    \t<activity android:name=\"com.facebook.accountkit.ui.AccountKitActivity\" >
    \t\t<intent-filter>
    \t\t\t\t<action android:name=\"android.intent.action.VIEW\" />
    \t\t\t<category android:name=\"android.intent.category.DEFAULT\" />
    \t\t\t<category android:name=\"android.intent.category.BROWSABLE\" />
    \t\t\t<data android:scheme=\"ak<Your Facebook app id>\" />
    \t\t</intent-filter>
    \t</activity>
    \n

    Add the following as your strings.xml file under app/App_Resources/Android/src/main/res/values/strings.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <string name=\"app_name\">Your App Name </string>
        <string name=\"title_activity_kimera\">Your App name</string>
        <string name=\"FACEBOOK_APP_ID\">FACEBOOK_APP_ID</string>
        <string name=\"ACCOUNT_KIT_CLIENT_TOKEN\">ACCOUNT_KIT_CLIENT_TOKEM</string>
    </resources>
    \n

    Account Kit and Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-auth SDK and account-kit-sdk SDK.\nIf you need to change the versions (to for instance the latest version), you can add project ext properties googlePlayServicesVersion and accountKitVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
       googlePlayServicesVersion = \"+\"
       accountKitVersion = \"+\"
    }
    \n

    Usage

    \n

    Initialize the plugin with the response type you seek either AuthorizationCode or AccessToken

    \n
    import { FacebookAccountKit, AccountKitResponseType } from 'nativescript-facebook-account-kit';
    const facebookAccountKit = new FacebookAccountKit(AccountKitResponseType.AuthorizationCode);
    \n
    import { Color } from \"tns-core-modules/color\";

    const options : AccountKitOptions = {
          prefillPhoneNumber : \"9XXXX12345\", 
          prefillCountryCode : \"91\",
          defaultCountryCode : \"IN\",
          whitelistedCountryCodes : [\"IN\"],
          blacklistedCountryCodes : [],
          enableGetACall : true,
          presentAnimated : false,
    \t  enableSendToFacebook : true,
    \t  primaryColor : new Color(\"orange\")
        };
        this.facebookAccountKit.loginWithPhoneNumber(options).then(authCode => {
          this.authCode = authCode;
          console.log(authCode);
        }, error => {
          this.authCode = error.message;
          console.error(error);
        });
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescriptionReturn type
    loginWithPhoneNumberUse account kit login flow with lot of options.A promise that resolves to either authorization code or access token.
    loginWithEmailUse account kit email flow.A promise that resolves to either authorization code or access token.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-social-share-ns-7":{"name":"nativescript-social-share-ns-7","version":"11.6.0","license":"MIT","readme":"

    NativeScript Social Share Plugin

    \n

    A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

    \n

    \"\"\n\"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-social-share
    \n

    This command automatically installs the necessary files, as well as stores nativescript-social-share as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    \n

    API

    \n

    shareImage(ImageSource image, [optional] String subject)

    \n

    The shareImage() method expects an ImageSource object. The code below loads an image from the app and invokes the share widget with it:

    \n
    // ------------ JavaScript ------------------
    var SocialShare = require(\"nativescript-social-share\");
    var imageSourceModule = require(\"image-source\");

    var image = imageSourceModule.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);

    // ------------- TypeScript ------------------
    import * as SocialShare from \"nativescript-social-share\";
    import { ImageSource } from \"image-source\";

    let image = ImageSource.fromFile(\"~/path/to/myImage.jpg\");
    SocialShare.shareImage(image);
    \n

    You can optionally provide a second argument to configure the subject on Android:

    \n
    SocialShare.shareImage(image, \"How would you like to share this image?\");
    \n

    shareText(String text, [optional] String subject)

    \n

    The shareText() method expects a simple string:

    \n
    SocialShare.shareText(\"I love NativeScript!\");
    \n

    Like shareImage(), you can optionally pass shareText() a second argument to configure the subject on Android:

    \n
    SocialShare.shareText(\"I love NativeScript!\", \"How would you like to share this text?\");
    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    SocialShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gmaps":{"name":"nativescript-gmaps","version":"8.0.3","license":"Apache-2.0","readme":"

    A Google Maps Plugin for NativeScript

    \n

    WORK IN PROGRESS!

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    Installation

    \n
    ns plugin add nativescript-gmaps
    \n

    Setting the Google Maps API key

    \n

    Android

    \n

    In your App_Resources/Android/AndroidManifest.xml file put in the <application> section the following line replacing "GOOGLE_MAPS_API_KEY" with the Google Maps API key from the Google Developers Console:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"GOOGLE_MAPS_API_KEY\" />
    \n

    iOS

    \n

    On iOS you just need call setIosApiKey with the API key before using Google Maps:

    \n

    NativeScript/Angular

    \n
    import { GoogleMaps } from \"nativescript-google-maps\";

    GoogleMap.setIosApiKey(\"GOOGLE_MAPS_API_KEY\");
    \n

    Vue

    \n
    import Vue from \"nativescript-vue\";
    import GoogleMaps from \"nativescript-google-maps/vue\";

    GoogleMaps.setIosApiKey(\"GOOGLE_MAPS_API_KEY\");

    Vue.use(GoogleMaps);
    \n

    Basic usage

    \n

    NativeScript

    \n
    <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:gmap=\"nativescript-google-maps\">
        <GridLayout>
            <gmap:GoogleMap
                cameraPosition=\"-33.852,151.211\">
                <gmap:Marker
                    position=\"-33.852,151.211\"/>
            </GoogleMap>
        </GridLayout>
    </Page>
    \n

    Vue

    \n
    <template>
        <Page>
            <GridLayout>
                <GoogleMap
                    :cameraPosition=\"cameraPosition\">
                    <GMapMarker
                        :position=\"markerPosition\"/>
                </GoogleMap>
            </GridLayout>
        </Page>
    </template>

    <script lang=\"ts\">
    import Vue from \"nativescript-vue\";

    export default Vue.extend({
        data() {
            return {
                cameraPosition: {
                    latitude: -33.852,
                    longitude: 151.211,
                    zoom: 18
                },
                markerPosition: {
                    latitude: -33.852,
                    longitude: 151.211
                }
            }
        }
    });
    </script>
    \n

    API & Examples

    \n

    GoogleMap

    \n

    Circle

    \n

    GroundOverlay

    \n

    Marker

    \n

    Polygon

    \n

    Polyline

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ui-persistent-bottomsheet":{"name":"@bigin/ui-persistent-bottomsheet","version":"0.0.14","license":"Apache-2.0","readme":"

    NativeScript BottomSheet

    \n

    NativeScript plugin that allows you to easily add persistent bottomsheet to your projects.

    \n

    \"npm\"\n\"npm\n\"npm

    \n
    \n

    Table of Contents

    \n
      \n
    1. Installation
      2. \n
    2. Configuration
      3. \n
    3. API
      4. \n
    4. Usage in Angular
      5. \n
    5. Usage in Vue
      6. \n
    6. Usage in Svelte
      7. \n
    7. Usage in React
      8. \n
    8. Demos
      9. \n
    \n

    Installation

    \n
    ns plugin add @nativescript-community/ui-persistent-bottomsheet
    \n

    Configuration

    \n

    For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

    \n
    import { install } from '@nativescript-community/ui-persistent-bottomsheet';
    install();
    \n

    API

    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeDescription
    bottomSheetundefinedViewView containing the content for the bottomsheet
    gestureEnabledtruebooleanBoolean setting if swipe gestures are enabled
    stepIndex0numberthe index of current step (mutable)
    steps[70]number[]the different available steps
    backdropColornew Color('rgba(0, 0, 0, 0.7)')ColorThe color of the backdrop behind the drawer
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameReturnDescription
    install()voidInstall gestures
    \n

    Usage in Angular

    \n

    Import the module into your project.

    \n
    import { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";

    @NgModule({
        imports: [
            PBSModule
        ]
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })

    export class AppModule { }
    \n

    Then in your component add the following:

    \n
    <BottomSheet>
        <StackLayout backgroundColor=\"white\">
          <Label text=\"This is the main content\"></Label>
        </StackLayout>
        <GridLayout bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\"></Label>
        </GridLayout>

       
    </BottomSheet>
    \n

    For a more complete example, look in the demo-ng directory.

    \n

    Usage in Vue

    \n

    Register the plugin in your app.js.

    \n
    import BottomSheetPlugin from '~/components/drawer/vue';
    Vue.use(BottomSheetPlugin);
    \n

    Then in your component add the following:

    \n
    <BottomSheet>
        <StackLayout backgroundColor=\"white\">
          <Label text=\"This is the main content\" />
        </StackLayout>
        <GridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\" />
        </GridLayout>

    </BottomSheet>
    \n

    For a more complete example, look in the demo-vue directory.

    \n

    Usage in Svelte

    \n

    Register the plugin in your app.ts.

    \n
    import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
    BottomSheetElement.register();
    \n

    Then in your component, add the following:

    \n
    <bottomsheet>
        <stacklayout  backgroundColor=\"white\">
          <Label text=\"This is the main content\" />
        </stacklayout>
        <gridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\">
          <Label text=\"This is the side drawer content\" />
        </gridlayout>

    </bottomsheet>
    \n

    For a more complete example, look in the demo-svelte directory.

    \n

    Usage in React

    \n

    Register the plugin in your app.ts.

    \n
    import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
    BottomSheetElement.register();
    \n

    Then in your component, add the following:

    \n
    import { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"
    \n
    <BottomSheet>
      <stackLayout backgroundColor=\"white\">
        <label text=\"This is the main content\" />
      </stackLayout>
      <gridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\">
        <label text=\"This is the side drawer content\" />
      </gridLayout>

    </BottomSheet>
    \n

    For a more complete example, look in the demo-react directory.

    \n

    Demos

    \n

    This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
    $ cd ui-drawer
    $ npm run i
    $ npm run setup
    $ npm run build && npm run build.angular
    $ cd demo-ng # or demo-vue or demo-svelte or demo-react
    $ ns run ios|android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-tour-updated":{"name":"nativescript-app-tour-updated","version":"2.0.2","license":"Apache-2.0","readme":"

    \n NativeScript App Tour

    \n\n\n

    \n
    \n

    Note: This Plugin based on MaterialShowcase for IOS and TapTargetView for Android .

    \n
    \n

    Installation

    \n
    tns plugin add nativescript-app-tour-updated
    \n

    Usage

    \n
    <Label id=\"feat1\" text=\"Feature 1\"></Label>
    <Label id=\"feat2\" text=\"Feature 2\"></Label>
    <Button text=\"start\" tap=\"{{ startTour }}\"></Button>
    \n
    startTour(){

        const stops: TourStop[] = [
            {
                view: this.page.getViewById(\"feat1\"),
                title: 'Feature 1',
                description: \"Feature 1 Description\",
                dismissable: true
            },
            {
                view: this.page.getViewById(\"feat2\"),
                title: 'Feature 2',
                description: 'Feature 2 Description',
                outerCircleColor: 'orange',
                rippleColor: 'black'
            }
        ];

        const handlers: TourEvents = {
            finish() {
                console.log('Tour finished');
            },
            onStep(lastStopIndex) {
                console.log('User stepped', lastStopIndex);
            },
            onCancel(lastStopIndex) {
                console.log('User cancelled', lastStopIndex);
            }
        }

        this.tour = new AppTour(stops, handlers);
        this.tour.show();
    }
    \n

    see the demo project for more info.

    \n

    Angular

    \n

    also in angular you can get a refrence to the target view using @ViewChild decorator as next

    \n
    <Label #feat1 text=\"Feature 1\"></Label>
    <Label #feat2 text=\"Feature 2\"></Label>
    <Button text=\"start\" tap=\"{{ startTour }}\"></Button>
    \n
    @ViewChild('feat1') feat1: ElementRef;
    @ViewChild('feat2') feat2: ElementRef;

    startTour(){

        const stops: TourStop[] = [
            {
                view: this.feat1.nativeElement,
                title: 'Feature 1',
                description: \"Feature 1 Description\",
                dismissable: true
            },
            {
                view: this.feat2.nativeElement,
                title: 'Feature 2',
                description: 'Feature 2 Description',
                outerCircleColor: 'orange',
                rippleColor: 'black'
            }
        ];

        const handlers: TourEvents = {
            finish() {
                console.log('Tour finished');
            },
            onStep(lastStopIndex) {
                console.log('User stepped', lastStopIndex);
            },
            onCancel(lastStopIndex) {
                console.log('User cancelled', lastStopIndex);
            }
        }

        this.tour = new AppTour(stops, handlers);
        this.tour.show();
    }
    \n

    API

    \n

    TourStop

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptiontypedefault
    view (required)nativescript view refViewnone
    titlestop titlestringtitle
    titleTextSizetitle Text Sizenumber25
    titleTextColortitle Text Colorstringwhite
    descriptionstop descriptionstringdescription
    descriptionTextSizedescription Text Sizenumber20
    descriptionTextColordescription Text Colorstringwhite
    outerCircleOpacityouter Circle background opacitynumber0.96
    outerCircleColorouter Circle background Colorstringblack
    innerCircleColorcircle around target view background Colorstringwhite
    rippleColor (ios only)target Circle ripple Colorstringwhite
    innerCircleRadiuscircle around target view raduisnumber50
    dismissablecan the tour canceled by taping outside of target viewbooleanfalse
    \n

    AppTour

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    constructorAppTour(stops)
    show()start the tour
    reset()reset the tour to play it again
    \n

    Tour Events

    \n

    This plugin has 3 events,\nfinish(): void => triggered once the tour finishes\nonStep(lastStepIndex): void => triggered once per step when target is tapped\nonCancel(lastStepIndex): void => triggered once when user dismisses the tour by tapping outside in a dismissable tour

    \n

    Defaults

    \n
    \n

    Note: If you use the same configs (colors, sizes,..etc) in all stops customize the defaults instead using AppTour defaults property which is basicly a TourStop :+1: .

    \n
    \n

    Next

    \n
      \n
    • [x] add events.
      • \n
    • [ ] add more options to TourStop.
      • \n
    \n

    Contribute

    \n

    if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features.

    \n

    Contact

    \n

    Twitter: hamdiwanis
    \nEmail: hamdiwanis@hotmail.com

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-websocket":{"name":"@yoonit/nativescript-websocket","version":"1.1.3","license":"MIT","readme":"

    NativeScript Yoonit Camera

    \n

    \n\t\n\t\n\t\n\t\n\t\n\t\n

    \n

    Build modern apps using NativeScript and WebSocket in Android and iOS\n

    \n
      \n
    • Stable Websocket connection
      • \n
    • Modern JS Code (ESNext)
      • \n
    • Works in emulator and real devices
      • \n
    • Timeout configuration
      • \n
    • Automatic reconnection
      • \n
    • Proxy options
      • \n
    • Custom headers
      • \n
    • VueJS Plugin
      • \n
    \n
    \n\t

    Sponsors

    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
    \n\t\t\t\t\tPlatinum\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n\t
    Become a sponsor!
    \n
    \n

    Installation

    \n
    npm i -s @yoonit/nativescript-websocket
    \n

    Usage

    \n

    All the functionalities that the @yoonit/nativescript-websocket provides is accessed through the YoonitWebSocket object. Below we have the basic usage code, for more details, your can see the Methods or the Demo Vue.

    \n

    VueJS Plugin

    \n

    main.js

    \n
    import Vue from 'nativescript-vue'
    import YoonitWebSocket from '@yoonit/nativescript-websocket/vue'

    Vue.use(
      YoonitWebSocket,
      'wss://echo.websocket.org/',
      {
        protocol: '',
        timeout: 1000,
        headers: [],
        reconnect: true,
        delay: 1000,
        debug: false,
        proxy: {
          address: '',
          port: ''
        }
      }
    )
    \n

    After that, you can access the socket object in your entire project using this.$yoo.socket

    \n

    Angular, React, Svelte or any other framework

    \n

    Currently we can't offer any other integration with other frameworks that works on top of NativeScript beyond VueJS, you are totaly open to create and send to us a PR. But, this is a pure NativeScript plugin, if you know how to manipulate your preferred platform you will be capable to include it in your project.

    \n

    Vue Component

    \n

    Declaring events using an Yoonit-Style

    \n

    App.vue

    \n
    <template>
      <Page @loaded=\"doLoaded\"></Page>
    </template>

    <script>
    export default {
      data: () => ({
        interval: null
      }),
      methods: {
        doLoaded () {
          // start the connection
          this.$yoo.socket.open()
        },
        doPing () {
          this.interval = setInterval(() => {
            if (!this.$yoo.socket.getStatus())     {
              return console.log('[YooSocket] Socket closed')
            }

            console.log(\"[YooSocket] Sending 'echo' message!\")

            // add your message/file to queue and call 'send' method
            return this.$yoo.socket.push('echo')
          }, 2000)
        }
      },
      yoo: {
        socket: {
          events: {
            open ($socket) {
              console.log(\"[YooSocket] Hey! I'm connected!\")

              clearInterval(this.interval)
              return this.doPing()
            },
            message ($socket, message) {
              if (!message) {
                console.log(\"[YooSocket] Message is empty\")
              }

              console.log(`[YooSocket] Received Message: '${message}'!`)
            },
            close () {
              console.log(\"[YooSocket] Socket was closed\")
            },
            error () {
              console.log(\"[YooSocket] Socket had an error\")
            }
          }
        }
      }
    }
    </script>
    \n

    Or declaring events using your own already created methods

    \n

    App.vue

    \n
    <template>
      <Page @loaded=\"doLoaded\"></Page>
    </template>

    <script>
    export default {
      data: () => ({
        interval: null
      }),
      methods: {
        doLoaded () {
          // start the connection
          this.$yoo.socket.open()

          // declare all callback events
          this.$yoo.socket.events({
            open: this.doSocketOpen,
            message: this.doReceivedMessage,
            close: this.doSocketClose,
            error: this.doSocketError
          })
        },

        doPing () {
          this.interval = setInterval(() => {
            if (!this.$yoo.socket.getStatus())     {
              return console.log('[YooSocket] Socket closed')
            }

            console.log(\"[YooSocket] Sending 'echo' message!\")

            // add your message/file to queue and call 'send' method
            return this.$yoo.socket.push('echo')
          }, 2000)
        },

        doSocketOpen ($socket) {
          console.log(\"[YooSocket] Hey! I'm connected!\")

          clearInterval(this.interval)

          // onOpen event calls your function
          return this.doPing()
        },

        doSocketClose () {
          // onClose event
          return console.log('[YooSocket] Socket was closed')
        },

        doSocketError () {
          // onError event
          return console.log('[YooSocket] Socket had an error')
        },

        doReceivedMessage ($socket, message) {
          // onMessage event
          return console.log(`[YooSocket] Received Message: '${message}'!`)
        },
      }
    }
    </script>
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionParametersValid valuesReturn TypeDescription
    openAsynctimeoutany positive number, default 1000 (ms)voidWait timeout to start the connection
    open--voidStart immediately the connection
    onevent, callbackstring, functionvoidInclude an event, every that your server sent an event of this type, your callback will be invoked
    offevent, callbackstring, functionvoidExclude an event
    eventscallbacksobject with functions { open: [], close: [], message: [], error: [], fragment: [], handshake: [] }voidYou can use an Array of callbacks in each event. Use this to add a batch of events at once
    getStatus--booleanYou can use this method to check the connection status
    pushcontentstring/blobvoidSend files or strings to server. You can use this method to make uploads for example
    destroy--voidDestroy server connection
    closecode, messagenumber, stringvoidClose server connection programmatically offering an reason
    queueLength--numberGet the total pending items to be sent
    isOpen--booleanGet connection status
    isClosed--booleanGet connection status
    isClosing--booleanGet connection status
    isConnecting--booleanGet connection status
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyReturn Type
    protocolstring
    timeoutnumber
    headersarray
    reconnectboolean
    delaynumber
    debugboolean
    proxyobject
    callbacksobject
    urlstring
    openedboolean
    \n

    To contribute and make it better

    \n

    Clone the repo, change what you want and send PR.\nFor commit messages we use Conventional Commits.

    \n

    Contributions are always welcome!

    \n\n \n\n
    \n

    Code with ❤ by the Yoonit Team

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@juit/nativescript-local-notifications":{"name":"@juit/nativescript-local-notifications","version":"1.2.0","license":"Apache-2.0","readme":"

    Minimalistic Local Notifications for NativeScript 7

    \n

    This package implements a minimalistic helper to schedule and cancel local\nnotifications on iOS and Android.

    \n\n

    Usage

    \n

    The local notifications plugin should be easily instantiated by simply calling\nits constructor

    \n
    import { LocalNotifications } from '@juit/nativescript-local-notifications'

    const localNotifications = new LocalNotifications({
      androidIcon: 'icon_notification',
      androidColor: 0x0FF0000,
    })
    \n

    Scheduling notifications

    \n

    A local notification can be scheduled using the schedule(...) method with\na LocalNotificationRequest and a Date or the number of seconds to wait\nbefore displaying the notification:

    \n
    const notificationId = await localNotifications.schedule({
      title: 'The title',
      message: 'The message for the notification...',
      data: {
        // Optional, this is a payload that will be
        // returned when the notification is opened
      }
    }, 10) // schedule in 10 seconds...
    \n

    The schedule(...) method will return a Promise which will resolve to the\nstring id of the scheduled notification.

    \n

    Canceling a scheduled notification

    \n

    A scheduled notification can be canceled (and therefore will no longer be\npresented to the user) by using the cancel(...) method:

    \n
    localNotifications.cancel(notificationId)
    \n

    Subscribing to notifications

    \n

    When a notification is opened by a user, the notification event will be\nemitted by the LocalNotifications instance. The usual on(...), once(...)\nand off(...) methods are available to manage subscription:

    \n
    localNotifications.on('notification', (notification) => {
      console.log('Notification opened', notification)
    })

    // Notification opened: {
    //   id: '0ecfd51b-6e83-46a9-8b6d-61632bf91db3',
    //   title: 'The title',
    //   message: 'The message for the notification...',
    //   data: { ... }
    // }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-plaid":{"name":"@nstudio/nativescript-plaid","version":"2.0.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-plaid

    \n

    NativeScript plugin that opens the Plaid native sdk to log in to banking services.

    \n
    ns plugin add @nstudio/nativescript-plaid
    \n

    Usage

    \n

    This plugin opens the Plaid Link flow, which walks the user through finding their institution and linking their bank account.\nIt opens the flow in a modal view, and returns metadata for events, on exit, and on success.

    \n

    import { PlaidLink } from '@nstudio/nativescript-plaid';

    export class YourClass {

      successPublicToken: string;

      constructor() {}

      open() {
        // first set an event listener for the events Plaid reports back.
        PlaidLink.setLinkEventListener((event) => {
          console.log('linkEventListener', event);
        });

        // create a handler and pass your link token. (https://plaid.com/docs/api/tokens/)
        const handler = PlaidLink.createHandler({
          token: 'YOURLINKTOKEN',
          onSuccess: (linkSuccess) => {
            console.log('linkSuccess', linkSuccess);
            this.set('successPublicToken', linkSuccess.publicToken)
          },
          onExit: (linkExit) => {
            console.log('linkExit', linkExit);
          }
        });
        handler.open();
      }
    }
    \n

    Screenshot

    \n

    \"\"

    \n

    API

    \n
      \n
    • setLinkEventListener() - Listens to events created by the flow.
      • \n
    • createHandler() - Creates a handler with a config including token, onSuccess and onExit functions.
      • \n
    • handler.open(config: PlaidLinkConfig) - Opens the flow in a modal. When user exits or successfully links an account, the modal closes.
      • \n
    \n

    Contributors

    \n\n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-template-compiler":{"name":"nativescript-vue-template-compiler","version":"2.9.3","license":"MIT","readme":"

    nativescript-vue-template-compiler

    \n
    \n

    This package is auto-generated from platform/nativescript/compiler

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ios":{"name":"tns-ios","version":"6.5.6","license":"Apache-2.0","readme":"

    iOS Runtime for NativeScript

    \n

    Contains the source code for the NativeScript's iOS Runtime. NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Each mobile platform has its own ecosystem and offers completely different development tools and language(s) - Java for Android and Objective C (Swift) for iOS. In order to translate JavaScript code to the corresponding native APIs some kind of proxy mechanism is needed. This is exactly what the "Runtime" parts of NativeScript are responsible for. The iOS Runtime may be thought of as "The Bridge" between the JavaScript and the iOS world. A NativeScript application for iOS is a standard native package (ipa) which besides the JavaScript files embed the runtime as well.

    \n
    git clone --recursive git@github.com:NativeScript/ios-runtime.git
    \n\n\n\n

    Requirements

    \n
      \n
    • OS X 10.11+
      • \n
    • Xcode 10+
      • \n
    • CMake 3.12 or later. Tested with versions up to 3.14.4 (https://github.com/Kitware/CMake/releases/download/v3.14.4/cmake-3.14.4-Darwin-x86_64.dmg) - after installing CMake.app add a symlink to cmake in usr/local/bin using the following command ln -s /Applications/CMake.app/Contents/bin/cmake /usr/local/bin
      • \n
    • LLVM 8.0 - used to build the metadata generator submodule. Be sure to have the folder containing llvm-config in PATH or make a symlink to in /usr/local/bin/.
      • \n
    • Automake - available in Homebrew as automake.
      • \n
    • GNU Libtool - available in Homebrew as libtool.
      • \n
    • Perl (installed on macOS by default but deprecated since macOS X 10.15)
      • \n
    • Checkout all git submodules using git submodule update --init.
      • \n
    \n

    Architecture Diagram

    \n

    The NativeScript iOS Runtime architecture can be summarized in the following diagram.

    \n

    \"iOS

    \n

    For more details on how it works, read the documentation.

    \n

    Local Development

    \n

    To be able to open and build {N} iOS Runtime in Xcode you need to configure it for WebKit development and generate the Xcode project files using cmake. To do this execute the following:

    \n
    sudo ./src/webkit/Tools/Scripts/configure-xcode-for-ios-development
    ./cmake-gen.sh
    open \"cmake-build/NativeScript.xcodeproj\"
    \n

    After you open the newly generated project in Xcode you can run the TestRunner target or the Gameraww example app.

    \n

    For more information on WebKit configuration see Building iOS Port section of WebKit's README

    \n

    Building a Distribution Package

    \n

    To build the tns-ios npm package run ./build/scripts/package-tns-ios.sh in the root of the repository. The package contains the NativeScript Cocoa Framework, the NativeScript CLI template project and the API metadata generator.

    \n

    To build the tns-ios-inspector npm package run ./build/scripts/package-tns-ios-inspector.sh in the root of the repository. The package contains the Web Inspector frontend.

    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-sqlite":{"name":"nativescript-akylas-sqlite","version":"3.0.5","license":"Apache-2.0","readme":"

    Nativescript: Akylas Sqlite

    \n

    \"Build \"npm

    \n

    Installation

    \n
    tns plugin add nativescript-akylas-sqlite
    \n

    Usage

    \n

    You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

    \n
    import { openOrCreate, deleteDatabase } from \"nativescript-akylas-sqlite\";

    const sqlite = openOrCreate(\"path/to/db\");
    sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
    sqlite.transaction(cancelTransaction => {
        // Calling cancelTransaction will rollback all changes made to db
        names.forEach((name, id) =>
            sqlite.execute(
                \"INSERT INTO names (id, name) VALUES (?, ?)\",
                [id, name]
            )
        );
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/webpack":{"name":"@nativescript/webpack","version":"5.0.18","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swiper":{"name":"nativescript-swiper","version":"0.1.0","license":"MIT","readme":"

    nativescript-swiper

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin for slide functionality on ios platform,based on ios native UIScrollView,quick response and high availability

    \n

    Why not android

    \n

    As you know,slide functionality can made by "viewPager" component in native android devolop.And nativescript "TabView" component in android platform is a combination of a TabLayout widget and a ViewPager widget.So we can use nativescript "TabView" component as a slide by remove the title tab :tabview._tabLayout.setVisibility(android.view.View.GONE);

    \n

    There is a discuss about this question: TabView without the tabs

    \n

    Screenshot:

    \n

    \n

    Installation

    \n

    tns plugin add nativescript-swiper

    \n

    Usage

    \n

    xmlns:Swiper="nativescript-swiper"

    \n

    Example Usage:

    \n

    XML

    \n

    \t<Swiper:SwiperContainer 
                id=\"swiper-container\"
                change=\"onChanged\" 
                cancell=\"onCancelled\" 
                start=\"onStart\" 
                finish=\"onFinished\">
            <Swiper:SwiperWrapper id=\"swiper-wrapper\">
                <Swiper:SwiperSlide class=\"bg-blue\" height=\"100%\"  verticalAlignment=\"center\">
                    <Label text=\"Panel 1\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
                </Swiper:SwiperSlide>
                <Swiper:SwiperSlide class=\"bg-green\" height=\"100%\"  verticalAlignment=\"center\">
                    <Label text=\"Panel 2\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
                </Swiper:SwiperSlide>
                <Swiper:SwiperSlide class=\"bg-red\" height=\"100%\"  verticalAlignment=\"center\">
                    <Label text=\"Panel 3\" color=\"#fff\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
                </Swiper:SwiperSlide>
            </Swiper:SwiperWrapper>
        </Swiper:SwiperContainer>
    \n

    Methods for SwiperContainer

    \n
      \n
    • nextSlide(animated : boolean) - navigate to the right slide (if animated,transition with animate)
      • \n
    • previousSlide(animated : boolean) - navigate to the left slide (if animated,transition with animate)
      • \n
    • goToSlide(index : number,animated : boolean) : - goes to the slide at the specified index (if animated,transition with animate)
      • \n
    • refresh() - refresh the swiper when slides item changed(added slides,removed slides, or orientation changed),incase the currentIndex and slidesCount calculate Incorrectly.
      • \n
    \n

    Attributes for SwiperContainer

    \n
      \n
    • currentIndex : number - get the current index of the slide (read only,start from 0).
      • \n
    \n

    Events and EventData

    \n
      \n
    • start - Start pan\n
        \n
      • object : The Observable instance that has raised the event.
        • \n
      • eventName : The name of the event.
        • \n
      • currentIndex : The current index of the slide (start from 0).
        • \n
      • slidesCount : The count of all the slides.
        • \n
      \n
      • \n
    • changed - Transition complete\n
        \n
      • object : The Observable instance that has raised the event.
        • \n
      • eventName : The name of the event.
        • \n
      • preIndex : The old index of the slide that current slide transition from.
        • \n
      • currentIndex : The current index of the slide (start from 0).
        • \n
      • slidesCount : The count of all the slides.
        • \n
      \n
      • \n
    • cancelled - Transition not complete\n
        \n
      • object : The Observable instance that has raised the event.
        • \n
      • eventName : The name of the event.
        • \n
      • currentIndex : The current index of the slide (start from 0).
        • \n
      • slidesCount : The count of all the slides.
        • \n
      \n
      • \n
    • finished - Last slide has come into view\n
        \n
      • object : The Observable instance that has raised the event.
        • \n
      • eventName : The name of the event.
        • \n
      • currentIndex : The current index of the slide (start from 0).
        • \n
      • slidesCount : The count of all the slides.
        • \n
      \n
      • \n
    • scroll - the SwiperContainer is scroll (will fire many times)\n
        \n
      • object : The Observable instance that has raised the event.
        • \n
      • eventName : The name of the event.
        • \n
      • scrollX : The horizontal offset of the SwiperContainer ScrollView.
        • \n
      • slidesCount : The count of all the slides.
        • \n
      \n
      • \n
    \n

    work with Repeater

    \n

    nativescript-swiper can easily work with Repeater

    \n

    \t<Swiper:SwiperContainer >
                  <Repeater items=\"{{ items }}\">
                      <Repeater.itemsLayout>
                          <Swiper:SwiperWrapper />
                      </Repeater.itemsLayout>
                      <Repeater.itemTemplate>
                          <Swiper:SwiperSlide height=\"100%\" verticalAlignment=\"center\">
                              <Label text=\"{{ 'Panel in Repeater ' + ($value + 1) }}\" color=\"#000\" textWrap=\"true\" verticalAlignment=\"center\" horizontalAlignment=\"center\" />
                          </Swiper:SwiperSlide>
                      </Repeater.itemTemplate>
                  </Repeater>
              </Swiper:SwiperContainer>
    \n

    \tvar Observable = require(\"data/observable\").Observable;
    \t
    \tvar source = new Observable();
        var items = [];
        for(var i = 0;i < 10;i++){
            items.push(i);
        }
        source.set(\"items\", items);
        page.bindingContext = source;
    \n

    Add or Remove slides dynamically

    \n

    Only need to add/remove SwiperSlide item to the SwiperWrapper in any time you want

    \n

    \tvar platformModule = require(\"platform\");
    \tvar swiperWrapper = page.getViewById(\"swiper-wrapper\");
    \t
    \tvar SwiperSlide = require(\"nativescript-swiper\").SwiperSlide;
        var newSwiperSlideItem = new SwiperSlide();
        newSwiperSlideItem.height = \"100%\";
        newSwiperSlideItem.backgroundColor = \"#000\";
        newSwiperSlideItem.verticalAlignment = \"center\";
        var LabelModule = require(\"ui/label\");
        var label = new LabelModule.Label();
        label.text = \"this is a new SwiperSlide item,tap to remove it\";
        label.color = \"#fff\";
        label.verticalAlignment = \"center\";
        label.horizontalAlignment = \"center\";
        newSwiperSlideItem.addChild(label);
        
        swiperWrapper.addChild(newSwiperSlideItem);
        label.on('tap',function(args){
            swiperWrapper.removeChild(newSwiperSlideItem);
        });
    \n

    Handles application orientation change

    \n

    when application orientation changed,the slides shold change it's width to fill the screen

    \n

    add this code into page navigatedTo event

    \n

    \tvar app = require('application');
    \tvar swiperContainer = page.getViewById(\"swiper-container\");
    \tvar swiperWrapper = page.getViewById(\"swiper-wrapper\");
    \tapp.on(app.orientationChangedEvent, function (args) {
            setTimeout(function() {
                swiperWrapper.eachLayoutChild(function(slide){
                    slide.width = platformModule.screen.mainScreen.widthDIPs;
                    swiperContainer.refresh();
                })
            }, 10);
        })
    \t
    \n

    Imperfect currently,will iterative soon,welcome contributors and issues

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intl":{"name":"nativescript-intl","version":"4.0.2","readme":"

    Welcome to the nativescript-intl plugin for NativeScript framework

    \n

    Prerequisites

    \n\n

    Install nativescript-intl plugin.

    \n

    Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-intl.

    \n

    This plugin provides similar to Intl.js API for date, time and number formatting on a mobile device (Android and iOS).

    \n

    How to use

    \n
    var intl = require(\"nativescript-intl\");
    var dateFormat = new intl.DateTimeFormat('en-US', {'year': 'numeric', 'month': 'short', 'day': 'numeric'}).format(new Date(2016, 2, 23));
    var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}).format(123456.789);

    console.log(\"dateFormat: \" + dateFormat);
    console.log(\"numberFormat: \" + numberFormat);
    // prints Mar 23, 2016
    // $123456.79
    \n

    Since localization formatting is not exactly same on Android, iOS and Intl.js there is another option to use this API.

    \n

    Custom pattern

    \n
    var intl = require(\"nativescript-intl\");
    var dateFormat = new intl.DateTimeFormat(null, null, 'y MMMM d, EEEE HH:mm:ss').format(new Date(2016, 2, 23, 12, 35, 40));
    var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}, '#,##0.00 ¤').format(123456.789);

    console.log(\"dateFormat: \" + dateFormat);
    console.log(\"numberFormat: \" + numberFormat);
    // prints 2016 March 23, Wednesday 2016 12:35:40
    // 123,456.79 $
    \n
    \n

    Omitting locale will use the current locale setting on device.

    \n
    \n
    \n

    Keep in mind that ICU versions differ accross device OS versions, so this plugin could produce different results on a different API level (Android) and OS version (iOS).

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fading-scroll-view":{"name":"nativescript-fading-scroll-view","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-fading-scroll-view

    \n

    \"Android\"\n\"iOS\"

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-fading-scroll-view
    \n

    Usage

    \n

    In app.js

    \n
    Vue.registerElement('FadingScrollView', () => require('nativescript-fading-scroll-view').FadingScrollView)
    \n

    In xml

    \n
    <FadingScrollView fadePercentage=\"0.3\" scroll=\"onScroll\">
    ...
    </FadingScrollView>
    \n

    API

    \n

    This plugin acts exactly like NativeScript core ui ScrollView, only with fading edge effects.\nIf you don't want any fading edge effect, set fadePercentage="0" (or just use ScrollView, of course).

    \n

    Remember that if the exact height isn't specified, the fading edge effect won't work in Android.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    fadePercentage0.3Strength of fade effect (value in range [0, 0.5])
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-webpack":{"name":"nativescript-dev-webpack","version":"1.5.1","license":"Apache-2.0","readme":"

    NativeScript Webpack

    \n

    This repository contains the code for the nativescript-dev-webpack plugin which helps in webpacking NativeScript apps.

    \n

    JavaScript code and general asset bundling have been a member of the web developer toolbox for a long time. Tools like Webpack have been providing support for an enjoyable development experience that lets you assemble client-side code from various module sources and formats and then package it together. Most importantly, they allow for page load time optimizations that reduce or parallelize the number of requests a browser makes to the server.

    \n

    Why bundle scripts in a mobile app though?

    \n
      \n
    • Fewer filesystem operations on app startup
      • \n
    • Smaller code size
      • \n
    • Tree-shaking
      • \n
    • Preprocessing and interoperability hooks. Webpack provides a way to resolve modules and expressions differently according to its configuration. It also contains a lot of plugins and loaders that let you embed different content in your application or use code written in different programming languages
      • \n
    \n

    For more details, see the NativeScript docs for building with webpack.

    \n\n\n\n

    Ingredients

    \n
      \n
    • webpack config templates.
      • \n
    • helper functions that place files at the correct locations before packaging apps.
      • \n
    • loaders and plugins for vanilla NativeScript and Angular apps.
      • \n
    \n

    Usage

    \n
    $ npm install --save-dev nativescript-dev-webpack

    $ tns run android
    or
    $ tns run ios
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines and instructions for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/plugin-badge":{"name":"@skhye05/plugin-badge","version":"1.0.3","license":"Apache-2.0","readme":"

    @skhye05/plugin-badge

    \n

    This plugin will allow you to set badge notification.

    \n

    This plugin is an update of nativescript-plugin-badge for nartivescript higher 7

    \n

    Installation

    \n

    NativeScript 7+:

    \n
    ns plugin add @skhye05/plugin-badge
    \n

    NativeScript lower than 7:

    \n
    tns plugin add nativescript-plugin-badge
    \n

    Screenshots

    \n

    \"IOS\"

    \n

    \"Android\"

    \n

    Usage

    \n
    ```typescript\nimport {requestPremissions, setBadge, removeBadge} from 'nativescript-plugin-badge';\n\nsetBadge(5);\n\nremoveBadge();\n```\n
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    ShortcutBadgerNative
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    requestPremissions():PromiseWill return if user granted the premission or not. See description below
    setBadge(badge:number)set badge
    removeBadge()clear badge
    applyNotification(notification: Notification, badge: number, channelId?: string)See description below
    \n

    Supported Devices (Android)

    \n

    Please check the library used.

    \n

    Premission

    \n

    Premission is only required in IOS, in android, the promise will always resolved as true.\nPlease note that if you have already used plugin handled premissions, like Firebase, Local Notification, then there is no need to call this function again.

    \n

    Miui(Xiaomi device) support

    \n

    Since from Xiaomi changed the way to show badge by notification from Miui 6.

    \n

    setBadge will not support Xiaomi devices.

    \n

    If you want to support badges for Xiaomi, you have to send notifications. And use

    \n
    applyNotification({ title: 'title', body: 'body' }, 5, 'channel id');
    \n

    channelId is an optional param and only available on API Level 26. And also will need you to setup the channel. See this example here.

    \n

    Drawback

    \n

    The ShortcutBadger used for android use the MainActivity name to identify the app. Which will make all the Nativescript apps with the default activity('com.tns.NativeScriptActivity') get setted.\nThat's the reason for the android screenshot -- all the nativescript apps have the same badge 5.\nThe solution is to use a custom main activity as described here

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-preferences":{"name":"nativescript-android-preferences","version":"1.0.3","license":"MIT","readme":"

    NativeScript-Android-preferences

    \n

    A NativeScript plugin that allows to use the application's preferences on Android.

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Elsa Rodriguez Plaza

    \n

    Installation

    \n

    tns plugin add nativescript-android-preferences

    \n

    Usages

    \n

    For more details on how to use this plugin, take a look at the demo application

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"onNavigatingTo\">
     <StackLayout>
       <Label text=\"Android App Save Preferences\" class=\"title\"/>
       <Button text=\"Save String\" tap=\"{{ onTapString }}\" />
     </StackLayout>
    </Page>
    \n
    var pref = require(\"nativescript-android-preferences\");
    onTapString = function () {
            var options = {
                datavalue: \"StringPreference\",
                datatype: pref.DataTypes.STRING,
                prefname: \"String_Preference\"
            }
            pref.SavePreference(options);
            options.datavalue = \"DefStringPreference\";
            alert(\"String Preference saved:\"+pref.GetPreference(options));
        }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dropbox":{"name":"nativescript-dropbox","version":"1.1.3","license":"Apache-2.0","readme":"

    NativeScript Dropbox

    \n

    Prerequisites / Requirements

    \n

    Dropbox User Access token

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-dropbox
    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

    \n

    API

    \n

    init

    \n

    Initiates the dropbox client with given token.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDescription
    accessTokenStringUser Access Token.
    \n
    var Dropbox = require(\"nativescript-dropbox\");
    Dropbox.init(\"ACCESS_TOKEN\");
    \n

    uploadData

    \n

    Uploads the data at the given path.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDescription
    pathStringDropbox File Path.
    dataNSData or java.lang.Byte[]Binary data.
    overwriteBooleanOverwrites the file if already exists. Defaults to true.
    autorenameBooleanIf there’s a conflict, as determined by mode, have the Dropbox server try to autorename the file to avoid conflict. Defaults to false.
    muteBooleanNormally, users are made aware of any file modifications in their Dropbox account via notifications in the client software. If true, this tells the clients that this modification shouldn’t result in a user notification. Defaults to false.
    \n
    var dropbox = new Dropbox();

    dropbox.addEventListener(Dropbox.successEvent, (event: SuccessEventData) => { ... });

    dropbox.addEventListener(Dropbox.errorEvent, (event: ErrorEventData) => { ... });

    dropbox.addEventListener(Dropbox.progressEvent, (event: ProgressEventData) => { ... });

    dropbox.uploadData(\"/logo.png\", knownFolders.currentApp().getFile(path.join(\"images\", \"logo.png\")).readSync());
    \n

    createSharedLink

    \n

    Creates a shared link for the given path.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDescription
    pathStringDropbox File Path.
    \n
    var dropbox = new Dropbox();

    dropbox.addEventListener(Dropbox.successEvent, (event: SuccessEventData) => { 
        var url = event.result;
    });

    dropbox.addEventListener(Dropbox.errorEvent, (event: ErrorEventData) => { ... });

    dropbox.createSharedLink(\"/logo.png\");
    \n

    dispose

    \n

    Disposes the dropbox client.

    \n
    Dropbox.dispose();
    \n

    Known issues on Android

    \n

    Dropbox SDK requires API Level 19 (Kitkat - 4.4) or above

    \n

    You might have to modify the minSdkVersion entry in your App_Resources/Android/src/main/AndroidManifest.xml

    \n
    <uses-sdk
    \tandroid:minSdkVersion=\"19\"
    \t...
    \n

    The number of method references in a .dex file cannot exceed 64K.

    \n

    This can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-native-object-pool":{"name":"nativescript-native-object-pool","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-native-object-pool \"apple\" & \"android\"

    \n

    This is a tiny NativeScript's plugin to share objects references between threads (main and Workers)

    \n

    Installation

    \n

    Copy and paste the code below to add this plugin into your app:

    \n
    tns plugin add nativescript-native-object-pool
    \n

    Usage

    \n

    All methods are statics. Just copy the import statament below and invoke the desire method.

    \n
    import { NativeObjectPool } from \"nativescript-native-object-pool\";
    \n

    API

    \n
    class NativeObjectPool {
        static add(key: string, value: any): boolean;
        static get(key: string): any;
        static remove(key: string): boolean;
        static removeAll(): void;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-socketio":{"name":"@triniwiz/nativescript-socketio","version":"4.0.3","license":"Apache-2.0","readme":"

    Nativescript nativescript-socketio

    \n
    ns plugin add @triniwiz/nativescript-socketio
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-strapi":{"name":"nativescript-strapi","version":"1.0.2","license":"MIT","readme":"

    strapi javascript SDK for nativescript \"Build

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-sdk":{"name":"nativescript-zendesk-sdk","version":"0.2.0","license":"MIT","readme":"

    nativescript-zendesk-sdk

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin implementing the basic Zendesk SDK in TypeScript.\nIt is inspired from nativescript-zendesk

    \n

    Install

    \n
    tns plugin add nativescript-zendesk-sdk
    \n

    Usage

    \n

    Following Zendesk Embeddables Documentation:

    \n

    [Must do] Configure an app in Zendesk Support

    \n

    Support SDK for Android / iOS

    \n

    [Must do] Initialize the SDK

    \n

    Support SDK for Android / iOS

    \n
    export interface InitConfig {
        applicationId: string;
        zendeskUrl: string;
        clientId: string;
        userLocale?: string;
        coppaEnabled?: boolean;
        /** AnonUserIdentity object or JWT Token string */
        identity?: AnonUserIdentity | string;
    }
    \n
    import { ZendeskSdk } from \"nativescript-zendesk-sdk\";
    ...
    const initConfig = {
        ...
    }
    ZendeskSdk.initialize(initConfig);
    \n

    If identity: null a new anonymous identity is created, but if identity is undefined it must be set later, but before launching any Zendesk views/activities.

    \n

    Note: applicationId, zendeskUrl, and clientId must be specified when initializing the Zendesk, but locale, COPPA-compliance mode, and Identity can be set/changed later.

    \n

    [Must do] Set an identity (authentication)

    \n

    Support SDK for Android / iOS

    \n
    Authenticate using an anonymous identity
    \n
    ZendeskSdk.setAnonymousIdentity();
    \n
    Authenticate using an anonymous identity (with details)
    \n
    ZendeskSdk.setAnonymousIdentity({name: \"name\", email: \"email\"});
    \n
    Authenticate using your JWT endpoint
    \n
    ZendeskSdk.setJwtIdentity(\"jwtUserIdentifier\");
    \n

    Locale Settings

    \n

    Support SDK for Android / iOS

    \n

    The locale used by the SDK for static strings will match the Android Application Configuration or the iOS NSUserDefaults.\n(These strings can be overridden or missing languages can be added as described in the links above).

    \n

    To set the Locale of any dynamic content retrieved from Zendesk:

    \n
    ZendeskSdk.setUserLocale(localeCode);
    \n

    Configure Requests

    \n

    Support SDK for Android / iOS

    \n

    Before opening the Help Center or creating a Rewuest you can specify the Request settings:

    \n
    \n

    Show the Help Center

    \n

    Support SDK for Android / iOS

    \n

    Default Usage

    \n
    ZendeskSdk.showHelpCenter();
    \n

    Optional Parameters

    \n
    export interface HelpCenterOptions {
        /** Default: false */
        categoriesCollapsedAndroid?: boolean;
        /** Default: true */
        conversationsMenuAndroid?: boolean;
        /** Default: true */
        conversationsMenuIos?: boolean;
        /** Default: false */
        showAsModalForIos?: boolean;
    }
    \n
    ZendeskSdk.showHelpCenter(options);
    \n

    Note: The SDKs for Android and iOS diverge quite a bit for this section, so some options are only applicable to iOS or Android. The defaults selected are those that provide the most consitency between both

    \n
    Both
    \n
    showConversationMenuButtonFor(Android/Ios) [default = true]
    \n

    Enables a button in the navigation bar that enables users to view their active requests/converations or start a new one.

    \n
    Android only
    \n
    showContactUsButtonForAndroid [default = false]
    \n

    This displays an additional (+) button in the lower-right corner, similar to the button in the Android templates.

    \n

    Enabled by default in the Android SDK, but disabled by default in this plugin for consitency with iOS.

    \n
    withCategoriesCollapsedForAndroid [default = false]
    \n

    This collapses the categories into their headers. The default behaviour on both Android and iOS is to show the first 5 of a category, and then has the option to expand further if more are available.

    \n
    iOS only
    \n
    showAsModalForIos [default = false]
    \n

    This displays the helpcenter as a modal action sheet.

    \n

    Filter the Help Center

    \n

    Support SDK for Android / iOS

    \n

    Per original SDKs, only one filter can be used at a time.

    \n

    Filter by category

    \n
    ZendeskSdk.showHelpCenterForCategoryIds(categoryIds, options);
    \n

    Filter by section

    \n
    ZendeskSdk.showHelpCenterForLabelNames(labelNames, options);
    \n

    Filter by article label

    \n
    ZendeskSdk.showHelpCenterForSectionIds(sectionIds, options);
    \n

    Create a request

    \n
    ZendeskSdk.createRequest();
    \n

    Styling

    \n

    Support SDK for Android / iOS

    \n

    Android

    \n

    Configured via app/App_Resources/Android/AndroidManifest.xml as detailed here.

    \n

    Simple Styling

    \n

    Zendesk offers 3 base themes that can be used or extended:

    \n
      \n
    • ZendeskSdkTheme.Light
      • \n
    • ZendeskSdkTheme.Dark
      • \n
    • ZendeskSdkTheme.Light
      • \n
    \n
    Example extending PnpZendeskSdkTheme.DarkActionBar
    \n

    app/App_Resources/Android/AndroidManifest.xml

    \n
        
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
        ...>
        <application
            ...>
            <activity android:name=\"com.zendesk.sdk.support.SupportActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.feedback.ui.ContactZendeskActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.support.ViewArticleActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.requests.RequestActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.requests.ViewRequestActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>
        </application>
    </manifest>
    \n

    app/App_Resources/Android/values/styles.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
    ...
        <style name=\"PnpZendeskSdkTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
            <item name=\"colorPrimary\">@color/ns_primary</item>
            <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
            <item name=\"colorAccent\">@color/ns_accent</item>
            <item name=\"android:actionMenuTextColor\">@color/ns_blue</item>
            </style>
    </resources>
    \n
    <style name=\"YourLightTheme\" parent=\"ZendeskSdkTheme.Light\">
    ...
    </style>
    <style name=\"YourDarkTheme\" parent=\"ZendeskSdkTheme.Dark\">
    ...
    </style>
    <style name=\"YourLightTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
    ...
    </style>
    \n

    iOS

    \n
    import { isIOS } from 'tns-core-modules/platform';

    ...

    if ( isIOS ) {
        UINavigationBar.appearance().tintColor = new Color('#00FFFF').ios;
        UINavigationBar.appearance().barTintColor = new Color('#FF00FF').ios;
        UINavigationBar.appearance().titleTextAttributes =
            <NSDictionary<string, any>>NSDictionary.dictionaryWithObjectForKey(
                new Color('#FFFF00').ios,
                NSForegroundColorAttributeName);
    }

    const iOSTheme: ZendeskIosThemeSimple = {
        primaryTextColor:          '#FF0000',
        secondaryTextColor:        '#00FF00',
        primaryBackgroundColor:    '#0000FF',
        secondaryBackgroundColor:  '#00FFFF',
        emptyBackgroundColor:      '#FF00FF',
        metaTextColor:             '#FFFF00',
        separatorColor:            '#884444',
        inputFieldTextColor:       '#448844',
        inputFieldBackgroundColor: '#444488',
        fontName:                  'Courier',
        boldFontName:              'Cochin-BoldItalic',
    };
    ZendeskSdk.setIosTheme(iOSTheme);
    \n

    The first 3 colors are used primarily on the ActionBar/StatusBar for the "new ticket" screen, as the Help Center uses the default ActionBar/StatusBar colors from the regular NativeScript setup.

    \n

    These settings could affect the whole app, but are ignored by the regular NativeScript Views, but could potentially impact other 3rd part views. Likely you will set these to be the same as what is used in the rest of the app.

    \n

    The settings within the theme object will only affect the Zendesk.

    \n

    Contributions

    \n

    Typings and iOS metadata have been included in the project to allow for easier usage.
    \nTypings were autogenerated using:
    \nhttps://github.com/NativeScript/android-dts-generator
    \nhttps://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries
    \nAlthough some manual changes had to be made by commenting-out types and setting to any that NativeScript handles the conversions for, such as NSArray and java.util.List.
    \nCurrent typings/metadata were generated using version ios@1.11.1.1 and ``android@1.11.0.1` of the Zendesk and Zendesk Provider SDKs.

    \n

    Dumping typings...

    \n
    iOS
    \n

    From src/:

    \n
    pod repo update
    TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" npm run demo.ios
    cp typings/x86_64/objc\\!Zendesk* typings/
    \n
    Android
    \n

    From project root:

    \n
    cd android
    ./gradlew clean
    ./gradlew getDeps

    cd lib
    jar xf sdk-1.11.0.1.aar
    mv classes.jar used-zendesk-sdk.jar
    jar xf sdk-providers-1.11.0.1.aar
    mv classes.jar used-zendesk-providers-sdk.jar

    rm -rf */
    find . -type f ! -iname \"used-zendesk-*\" -delete
    cd ../..

    rm -rf out/
    java -jar ../android-dts-generator/dts-generator/build/libs/dts-generator.jar -input \\
        android/lib/used-zendesk-sdk.jar \\
        && mv out/android.d.ts src/typings/java\\!ZendeskSDK.d.ts;
    java -jar ../android-dts-generator/dts-generator/build/libs/dts-generator.jar -input \\
        android/lib/used-zendesk-providers-sdk.jar \\
        && mv out/android.d.ts src/typings/java\\!ZendeskProviderSDK.d.ts;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imageoptimize":{"name":"nativescript-imageoptimize","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript ImageOptimize

    \n

    Installation

    \n
    tns plugin add nativescript-imageoptimize
    \n

    Usage

    \n
        import { ImageOptimize } from 'nativescript-imageoptimize';
        import * as fs from 'tns-core-modules/file-system';
        const imageoptimize = new ImageOptimize({
          src: '~/destiny_2.jpg',
          height: 400, //optional
          width:400,
          quality: 50, // 100 - 1
          format:'jpg' // jpeg || jpg || png
          dest: fs.knownFolders.documents().getFolder('images').path
        })
    \n
        const ImageOptimize = require('nativescript-imageoptimize').ImageOptimize;
        const fs = require('tns-core-modules/file-system');
        const imageoptimize = new ImageOptimize({
          src: '~/destiny_2.jpg',
          height: 400, //optional
          width:400,
          quality: 50, // 100 - 1
          format:'jpg' // jpeg || jpg || png
          dest: fs.knownFolders.documents().getFolder('images').path,
        })
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultTypeRequiredDescription
    widthsource widthnumber
    • - [ ]
    heightsource widthnumber
    • - [ ]
    qualitynullnumber
    • - [x]
    formatjpgstring
    • - [ ]
    destnullstring
    • - [x]
    srcnullstring
    • - [x]
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache-with-prefetch":{"name":"nativescript-web-image-cache-with-prefetch","version":"35.0.0","license":"MIT(https://github.com/VideoSpike/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

    #Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for iOS and Facebook Fresco for android.\nSupports local Images.

    \n

    License

    \n

    Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

    \n

    Installation

    \n
    tns plugin add nativescript-web-image-cache\n
    \n

    ** Tested on NativeScript 2.3+ on both Angular 2 and VanillaJS, if any problems while running on previous versions, please update. This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin, please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

    \n

    Usage in Vue

    \n

    In main.js:

    \n
    const Vue = require(\"nativescript-vue\") // you already have something like this
    Vue.registerElement('WebImage', () => require('nativescript-web-image-cache').WebImage) // now add this
    \n

    Then in any .vue file:

    \n
    <OtherMarkup>
      <WebImage src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></WebImage>
    </OtherMarkup>
    \n

    Usage in Angular

    \n
    \n

    ⚠️ This was changed in plugin version 5.0.0!

    \n
    \n

    In app.module.ts, or any specific module you want to use this plugin:

    \n
    import { registerElement } from \"nativescript-angular\";
    registerElement(\"WebImage\", () => require(\"nativescript-web-image-cache\").WebImage);
    \n

    After initialisation, the markup tag <WebImage></WebImage> can be used in templates of components.

    \n
        <GridLayout rows='*' columns='*'>
            <WebImage stretch=\"fill\" row=\"0\"
                         col=\"0\" placeholder=\"localPlaceholderImgorResUrl\"
                         src=\"#your image url here\">
            </WebImage>
        </GridLayout>
    \n

    Caching the images

    \n
      \n
    • Add the element WebImage with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here\n-https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • Get the reference to the WebImage view by using angular template variable references and @ViewChild decorator and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    • Access the reference only after view is initialised, i.e. after ngAfterViewInit is called, getting the reference in ngOnInit can return undefined ( for detailed info, read about angular component lifecycle hooks ).
      • \n
    \n

    The Markup

    \n
        <WebImage stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </WebImage>\n
    \n

    The Backing Component Class Snippet

    \n
         @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
    \n

    Clearing the cache

    \n

    Import the module, call the method clearCache() , default time is for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

    \n
     import {clearCache} from "nativescript-web-image-cache";\n clearCache();\n
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    import {setCacheLimit} from "nativescript-web-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
    \n

    Usage in VanillaJS/TypeScript apps

    \n

    IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

    \n

    Initialising on android - in app.js

    \n
    var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
    \n

    After initialisation, add the namespace attribute xmlns:IC="nativescript-web-image-cache" to the opening page tag of xml. The markup tag <IC:WebImage></IC:WebImage> should be used to denote images.

    \n
        <Page xmlns:IC=\"nativescript-web-image-cache\">
            <GridLayout rows='*' columns='*'>
                <IC:WebImage stretch=\"fill\" row=\"0\"
                 col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
                 src=\"#image-url\">
                 </IC:WebImage>  
            </GridLayout>
        </Page>
    \n

    Caching the images

    \n
      \n
    • To the opening page tag of the xml, add\nxmlns:IC="nativescript-web-image-cache".
      • \n
    • Add the element IC:WebImage with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here\n-https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • To check if an image is loading, get the reference to the WebImage view by using page.getViewById("myWebImage") , and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");

    var myImage1 = page.getViewById(\"my-image-1\"),
        isLoading = myImage1.isLoading;
    \n

    Clearing the cache

    \n
      \n
    • Require the module, call the method clearCache() , default time for SDWebImageCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.
      • \n
    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");
    imageCacheModule.clearCache();
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    var imageCache = require("nativescript-web-image-cache");\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);\n
    \n

    for android, you need to initialize in the application onlaunch event before clearing the cache

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-share-file-knotes":{"name":"nativescript-share-file-knotes","version":"1.0.11","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install nativescript-share-file
    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from 'nativescript-share-file';
        import * as fs from 'tns-core-modules/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    intentTitle: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-glia":{"name":"nativescript-glia","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-glia

    \n
    ns plugin add nativescript-glia
    \n

    Usage

    \n

    iOS Permissions

    \n

    You must add the following permissions to your Info.plist for your app, typically located under App_Resources/iOS directory for your app. Change the string to whatever you like for the specific permission.

    \n
    \t<key>NSPhotoLibraryAddUsageDescription</key>
    \t<string>Need photo library access for adding images</string>

    \t<key>NSMicrophoneUsageDescription</key>
    \t<string>Need microphone access for uploading videos</string>

    \t<key>NSCameraUsageDescription</key>
    \t<string>Need camera access for uploading images</string>
    \n

    Android Permission

    \n

    Automatically added by the plugin so you don't have to configure yourself.

    \n
    \t<!-- Permission to draw on top of other apps, used for annotations during screen
    \tsharing. Visitor must also explicitly grant this permission to the app through a
    \tpermission management screen during the screen sharing session.
    \t-->
    \t<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\" />
    \n

    Android App Config

    \n

    You will need to extend the android Application in order to use Glia. You can find NativeScript Docs Here.

    \n

    Create a file called application.android.ts in the root of your app project. Copy the following contents.

    \n
      \n
    • You will need to rename the JavaProxy file name as well as the Glia site Id, ApiKey, ApiSecret values with your Glia keys.\nThe JavaProxy file name you will need to copy over to the AndroidManifest.xml of your app, located under AppResources/Android/ and replace the <application android:name="YOUR_JAVA_PROXY_NAME"> with your file name. So in this example it would be:
      • \n
    \n
    \t<application
    \t\tandroid:name=\"org.myApp.GliaDemoApp\"
    \t\tandroid:allowBackup=\"true\"
    \t\tandroid:icon=\"@drawable/icon\"
    \t\tandroid:label=\"@string/app_name\"
    \t\tandroid:theme=\"@style/AppTheme\">
    \n
    // the `JavaProxy` decorator specifies the package and the name for the native *.JAVA file generated.
    @NativeClass()
    @JavaProxy('org.myApp.GliaDemoApp')
    class Application extends android.app.Application {
      public onCreate(): void {
        super.onCreate();

        // At this point modules have already been initialized

        // Enter custom initialization code here

        com.glia.widgets.GliaWidgets.onAppCreate(this);

        com.glia.widgets.GliaWidgets.init(
          new com.glia.widgets.GliaWidgetsConfig.Builder()
            .setSiteApiKey(new com.glia.androidsdk.SiteApiKey('SITE_APIKEY_ID', 'SITE_APIKEY_SECRET'))
            .setSiteId('SITE_ID')
            .setRegion('us')
            .setContext(this.getApplicationContext())
            .build()
        );
      }

      public attachBaseContext(baseContext: android.content.Context) {
        super.attachBaseContext(baseContext);
        // This code enables MultiDex support for the application (if needed)
        // androidx.multidex.MultiDex.install(this);
      }
    }
    \n

    Lastly, when extending the Android Application with NativeScript we need to ensure the file is handled correctly when bundling with Webpack. With NativeScript 7+ you will need to use the chainWebpack approach like so:

    \n
    const webpack = require('@nativescript/webpack');

    module.exports = (env) => {
      webpack.init(env);

      webpack.chainWebpack((config) => {
        if (webpack.Utils.platform.getPlatformName() === 'android') {
          // make sure the path to the applicatioon.android.(js|ts)
          // is relative to the webpack.config.js
          // you may need to use `./app/application.android if
          // your app source is located inside the ./app folder.
          config.entry('application').add('./application.android');
        }
      });

      return webpack.resolveConfig();
    };
    \n

    With NativeScript versions prior to 7, docs can be found here. Essentially you need to do the following in your webpack.config.js file:

    \n
     entry: {
            bundle: entryPath,
            application: \"./application.android\",
        },
    \n

    API

    \n
      \n
    • Glia.configure(config: GliaConfiguration) - Configures the Glia instance. _ Must be called prior to other methods _
      • \n
    • Glia.listQueues() : Returns array of queues.
      • \n
    • Glia.start(config: StartConfiguration) - Starts the engagement for the given options.
      • \n
    \n

    Example

    \n
    import { EngagementKind, Environment, Glia, IGliaQueue, StartConfiguration } from 'nativescript-glia';

    export SomeClass {
    \tconstructor() {

    \t}

    \t// Configure the Glia instance before calling any other methods
    \tpublic configureGlia() {
    \t\tGlia.configure({
          \t\tsiteId: \"YOUR_SITE_ID\",
          \t\tregion: 'us',
          \t\tauthorizingMethod: {
            \t\tsiteApiKey: {
              \t\t\tid: \"YOUR_SITE_APIKEY_ID\",
              \t\t\tsecret: \"YOUR_SITE_APIKEY_SECRET\",
            \t\t},
          \t\t},
        \t}).then(() => {
            \tconsole.log('*** Glia Configured ***');
          \t}).catch((err) => {
            \tconsole.log('Glia Configure Error', err);
    \t\t});
    \t}

    \tpublic getMyQueues() {
        \ttry {
        \t\tconst queues = await Glia.listQueues();
    \t\t  \t// iterate your queues here if you need to find a specific queue capable of video/audio/chat or something else.
    \t\t\t// queues can be inspected with the following approach
    \t\t\tconst name = (queues[0] as IGliaQueue).name;
        \t    const status = (queues[0] as IGliaQueue).state.status;
        \t    const media = (queues[0] as IGliaQueue).state.media;
        \t} catch (error) {
        \t\tconsole.log(error);
        \t}
    \t}

    \tpublic startChatGlia() {
        \ttry {
        \t  const startOpts: StartConfiguration = {
        \t    companyName: 'YOUR COMPANY NAME',
        \t    engagementKind: EngagementKind.Chat,
        \t    configuration: {
        \t      authorizationMethod: {
        \t        siteApiKey: { id: 'YOUR_SITE_APIKEY_ID', secret: 'YOUR_SITE_APIKEY_SECRET' },
        \t      },
        \t      environment: Environment.USA,
        \t      siteId: 'YOUR_SITE_ID',
        \t    },
        \t    queueID: 'YOUR_QUEUE_ID',
        \t    visitorContext: {
        \t      type: 'page',
        \t      url: 'YOUR_SITE_URL',
        \t    },
        \t  };
        \t  await Glia.start(startOpts);
        \t} catch (error) {
        \t  console.log(error);
        \t}
    \t}
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-globalevents-free":{"name":"nativescript-globalevents-free","version":"1.2.3","license":"MIT","readme":"

    Free version for nativescript-globalevents (renamed to nativescript-globalevents-free)

    \n

    A rather maintained version of nativescript-globalevents. This is simply a fork of nativescript-globalevents which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

    \n

    To use this, simply install with NPM using:

    \n

    npm install nativescript-globalevents-free

    \n

    All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tnsg":{"name":"tnsg","version":"0.1.8","license":"MIT","readme":"

    tnsg

    \n

    A NativeScript CLI Generator

    \n
    \n

    Generate quickly your pages, services, class..

    \n

    Installation

    \n
    npm install -g tnsg
    \n

    Generating Pages, Service, Class (Angular)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ScaffoldUsage
    Pagetnsg -p my-page
    Servicetnsg -s my-service
    Classtnsg -c my-class
    \n

    Examples:

    \n

    tnsg -p pages/login will generate:

    \n
      \n
    • ./app/pages/login/login.android.css
      • \n
    • ./app/pages/login/login.ios.css
      • \n
    • ./app/pages/login/login-common.css
      • \n
    • ./app/pages/login/login.component.ts
      • \n
    • ./app/pages/login/login.html\nand link the component in app.module.ts
      • \n
    \n

    tnsg -p pages/user-detail will generate:

    \n
      \n
    • ./app/pages/user-detail/user-detail.android.css
      • \n
    • ./app/pages/user-detail/user-detail.ios.css
      • \n
    • ./app/pages/user-detail/user-detail-common.css
      • \n
    • ./app/pages/user-detail/user-detail.component.ts
      • \n
    • ./app/pages/user-detail/user-detail.html\nand link the component in app.module.ts
      • \n
    \n

    Generating View {N}

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ScaffoldUsage
    Viewtnsg -vi my-view
    \n

    Examples:

    \n

    tnsg -vi views/user will generate:

    \n
      \n
    • ./app/views/user/user.css
      • \n
    • ./app/views/user/user.js
      • \n
    • ./app/views/user/user.xml
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-connectivity-manager-plugin":{"name":"nativescript-connectivity-manager-plugin","version":"0.0.7","license":"Apache-2.0","readme":"

    NativeScript ConnectivityManager Plugin

    \n

    A plugin to manage the device connectivity on Android and iOS.

    \n
      \n
    • [x] Android\n
        \n
      • [x] WiFi
        • \n
      • [x] Cellular
        • \n
      • [x] GPS
        • \n
      • [ ] Bluetooth
        • \n
      • [ ] Grant permissions
        • \n
      \n
      • \n
    • [x] iOS\n
        \n
      • [x] WiFi\n
          \n
        • [x] Connect to wifi
          • \n
        • [x] Get SSID
          • \n
        • [] Others not implemented yet
          • \n
        \n
        • \n
      • [ ] Cellular
        • \n
      • [ ] GPS
        • \n
      • [ ] Bluetooth
        • \n
      \n
      • \n
    \n

    Installation

    \n

    tns plugin add nativescript-connectivity-manager-plugin

    \n

    Demo

    \n

    Check out the Angular demo app\nand run it locally:

    \n
    git clone https://github.com/1IoT/nativescript-connectivity-manager-plugin
    cd nativescript-connectivity-manager-plugin/src
    npm run demo:android
    \n

    Usage

    \n
    import {ConnectivityManagerImpl} from 'nativescript-connectivity-manager-plugin';

    @Component({
        selector: \"Home\",
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {

        private static NETWORK_SSID: string = \"MY_SSID\";
        private static NETWORK_PASSPHARSE: string = \"MY_KEY\";
        private static CONNECTION_TIMEOUT_MS: number = 30000;
        private static DISCONNECT_TIMEOUT_MS: number = 15000;

        constructor(private connectivityManager: ConnectivityManagerImpl, private httpClient: HttpClient) {
        }

        ngOnInit(): void {
        }

        public getInfos() {
            console.log(\"Wifi SSID: \" + this.connectivityManager.getSSID());
            console.log(\"NetworkId: \" + this.connectivityManager.getWifiNetworkId());
            console.log(\"Wifi enabled: \" + this.connectivityManager.isWifiEnabled());
            console.log(\"Wifi connected: \" + this.connectivityManager.isWifiConnected());
            console.log(\"Cellular enabled: \" + this.connectivityManager.isCellularEnabled());
            console.log(\"Cellular connected: \" + this.connectivityManager.isCellularConnected());
            console.log(\"GPS enabled: \" + this.connectivityManager.isGpsEnabled());
            console.log(\"GPS connected: \" + this.connectivityManager.isGpsConnected());
        }

        public scan(): void {
            console.log(\"Start scan...\");
            this.connectivityManager.scanWifiNetworks().then((wifiSSIDs: string[]) => {
                console.log(wifiSSIDs);
            });
        }

        public async connect(): Promise<boolean> {
            console.log(\"Start connection...\");
            console.log(\"Disconnect with the source network...\");
            return this.connectivityManager.connectToWifiNetwork(HomeComponent.NETWORK_SSID, HomeComponent.NETWORK_PASSPHARSE, HomeComponent.CONNECTION_TIMEOUT_MS);
        }

        public async disconnect(): Promise<boolean> {
            return this.connectivityManager.disconnectWifiNetwork(HomeComponent.DISCONNECT_TIMEOUT_MS);
        }
    }
    \n

    API

    \n

    Requires Android SDK: 29

    \n

    WARNING: Note that even for scanning WiFi and retrieving the SSID, location permission must be given and GPS must be enabled!

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnDescription
    getSSID()stringrequires granted location permission and enabled gps
    getWifiNetworkId()number
    isWifiEnabled()boolean
    isWifiConnected()boolean
    isCellularEnabled()boolean
    isCellularConnected()boolean
    isGpsEnabled()boolean
    isGpsConnected()boolean
    hasInternet()boolean
    async scanWifiNetworks()Promise<string[]>requires granted location permission and enabled gps
    async connectToWifiNetwork(ssid: string, password: string, milliseconds: number)Promise<boolean>
    async disconnectWifiNetwork(timeoutMs: number)Promise<boolean>
    \n

    Tips

    \n
      \n
    • Docs about the tns-platform-declarations
      • \n
    • If the project cannot be build, maybe npm run demo:reset and npm run build can fix it
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-nativescript-components":{"name":"preact-nativescript-components","version":"0.0.7-2","license":"MIT","readme":"

    preact-nativescript-components\"Build \"Coverage \"dependencies\" \"npm\"

    \n

    preact-nativescript-components was made to use JSX-Syntax for preact-to-nativescript components

    \n

    Usage

    \n

    You should mostly be able to import and use the NativeScript UI Components by name e.g.

    \n
    import application from \"tns-core-modules/application\"
    import { render } from \"preact-to-nativescript\"
    import {
      ActionBar, ActionItem, Button, Label, Page, ScrollView, StackLayout
    } from \"preact-nativescript-components\"

    application.start({
      create: () => {
        return render(
          <Page>
            <ActionBar>
              <StackLayout>
                <Label>Custom Header</Label>
              </StackLayout>
              <ActionItem text=\"act\" />
            </ActionBar>
            <StackLayout>
              <Label>PageContent</Label>
              <Button text=\"Button\" />
            </StackLayout>
          </Page>
        )
      }
    })
    \n

    List of importable Components

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-salesforce-sdk":{"name":"nativescript-salesforce-sdk","version":"1.0.9","license":"MIT","readme":"

    Native Script Salesforce SDK

    \n

    It is allows you to easily authenticate with Salesforce using OAuth (User Ajent flow), and to manipulate Salesforce data using a simple API.

    \n

    Features

    \n
      \n
    • Asynchronous calls return ES6 promises
      • \n
    • Complete OAuth login workflow (User Agent)
      • \n
    • Automatically refreshes OAuth access_token (if available) on expiration
      • \n
    • API to manipulate data (create, update, delete, upsert)
      • \n
    • Works with Android and iOS
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-salesforce-sdk
    \n

    Uses

    \n
      let auth = new Auth(page); // must need to pass page object
      let config:IWebAuth = {
        clientId:'3MVG9YDQS5WtC11p8U6jHYOrOLWdUuHO5tK5jXMv0mQCyzZ0cdjYUd93RGSCpQdP87VL6hQbUO3fXYRmAkJxq', 
        calbackUrl:'ns://nativescript/sdk', 
        loginUrl:'https://login.salesforce.com' 
      };
      auth.on('success', (args)=> {
        
        // Query
        Apex.query('select id, Name from Account')
          .then((data)=> {
          // console.log(JSON.stringify(data.content.toJSON().totalSize));
          if(model !== undefined) {
            model.items = data.content.toJSON().records;
          }
        }).catch((err) => {
          console.log(JSON.stringify(err));
        });
        
      }); 
      auth.on('fail', (args)=> {
        console.log('fails '+new Date().getMilliseconds());
      }); 
     
      auth.login(config);
    \n

    Please check demo application

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@gavant/nativescript-ffmpeg":{"name":"@gavant/nativescript-ffmpeg","version":"0.0.6","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-qr-generator":{"name":"nativescript-qr-generator","version":"3.0.0","license":"Apache-2.0","readme":"

    nativescript-qr-generator

    \n

    NativeScript-Qr-Generator is a plugin for NativeScript which generates Qr code images.

    \n

    Installation

    \n

    Go to your app's root folder and execute:

    \n
    ns plugin add nativescript-qr-generator
    \n

    Usage

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\">

        <ActionBar title=\"My App\" icon=\"\" />

        <GridLayout rows=\"*,*,*\" columns=\"*\" class=\"qr-example\">
            <Label row=\"0\" col=\"0\" text=\"Color and size\" ></Label>
            <Image src=\"\" row=\"1\" col=\"0\" loaded=\"{{onImageLoadedBasic}}\"></Image>
        </GridLayout>
    </Page>
    \n
    import { Observable, ImageSource, Image } from '@nativescript/core';
    import { QrGenerator } from 'nativescript-qr-generator';

    export class HelloWorldModel extends Observable {
      private _counter: number
      private _message: string

      constructor() {
        super();
      }

      onImageLoadedBasic(args) {
            const image = args.object as Image;
            const result = new QrGenerator().generate(`Hello World`, {
                logo: {
                    path: \"~/assets/fb.png\",
                    ratio: {
                        w: 50, h: 50
                    }
                }
            });
            image.imageSource = new ImageSource(result);
        }

        onImageLoadedColors(args) {
            const image = args.object as Image;
            const result = new QrGenerator().generate('Hello World with colors', { color: '#4183d7', backgroundColor: '#67809f' });
            image.imageSource = new ImageSource(result);
        }

        onImageLoadedColorsSize(args) {
            const image = args.object as Image;
            const result = new QrGenerator().generate('Hello World with colors and custom size', { size: { width: 100, height: 100 }, color: '#fbd90e', backgroundColor: '#0d0c0c' });
            image.imageSource = new ImageSource(result);
        }
    }
    \n

    Usage Angular

    \n
      import { Component } from \"@angular/core\";
      import { ImageSource } from \"@nativescript/core\";
      import { Image } from \"@nativescript/core\";
      import { QrGenerator } from \"nativescript-qr-generator\";

      @Component({
          selector: \"ns-main\",
          template: \"<Image src=\"\" (loaded)=\"onImageLoaded($event)\"></Image>\"
      })
      export class AppComponent {

          constructor() {} 
          
          onImageLoaded(){
              const image = args.object as Image;
              const result = new QrGenerator().generate('Hello World');
              image.imageSource = new ImageSource(result);
          }
      }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    value-Value to generate Qr code
    size.width200The image's width
    size.height200The image's height
    color'#000000'The Qr's color
    backgroundColor'#FFFFFFF'The background's color
    logononeThis new property will add your logo on top of the generated qr-code, the plugin will manage to center the logo, you may want to play with the ratio property in case of more complex qr-code
    logo.pathnoneif path not set the plugin will take the appIcon as logo
    logo.ratio.wnoneset the width of the logo
    logo.ratio.hnoneset the height of the logo
    logo.ratio.xnoneset the x cordinate to position the logo
    logo.ratio.xnoneset the y cordinate to position the logo
    \n

    Acknowledgements

    \n

    This plugin wraps the following native Qr generators libraries:

    \n

    Android: https://github.com/kenglxn/QRGen
    \niOS: https://github.com/gscarrone/iOS-QR-Code-Generator

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws-dc":{"name":"nativescript-aws-dc","version":"1.1.6","license":"Apache-2.0","readme":"

    nativescript-aws-dc

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-aws-dc
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Based on nativescript-aws-dynamo from ALI YUKSELali.yuksel@cerensoftware.co.uk

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/auto-fit-text":{"name":"@nativescript/auto-fit-text","version":"1.0.3","license":"Apache-2.0","readme":"

    @nativescript/auto-fit-text

    \n
    ns plugin add @nativescript/auto-fit-text
    \n

    This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width

    \n

    Usage

    \n

    Nativescript

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      loaded=\"pageLoaded\"
      class=\"page\"
      xmlns:AFT=\"@nativescript/auto-fit-text\"
    >
      <StackLayout class=\"p-20\">
        <AFT:AutoFitText
          text=\"Testinggggggggggggggggg\"
          textWrap=\"false\"
        >    </AFT:AutoFitText>
      </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n
    import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';

    // Be sure to add the plugin module to your NgModule
    @NgModule({
    \timports: [NativeScriptAutoFitTextModule],
    })
    \n
    <AutoFitText row=\"2\" fontSize=\"48\" text=\"Lorem Ipsum this line of text with fontSize ignored because the text is so long.\" textWrap=\"false\"></AutoFitText>
    \n

    Credits

    \n

    @grantland - android-autofittextview

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/theme-switcher":{"name":"@nativescript/theme-switcher","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/theme-switcher

    \n
    ns plugin add @nativescript/theme-switcher
    \n\n\t\n\t\t\n\t\t\n\t\n
    \n\t\t\t\n\t\t\n\t\t\t\n\t\t
    \n

    Usage

    \n
    import { initThemes, switchTheme } from '@nativescript/theme-switcher'


    // first initialize the themes
    initThemes({
        // default is optional - will be auto-applied after initializing (*)
        default: () => import('theme-loader!./themes/default.scss'),
        red: () => import('theme-loader!./themes/red.scss'),
        green: () => import('theme-loader!./themes/green.scss'),
    })

    // the later on, switch themes with
    switchTheme('red');
    switchTheme('green');
    \n
    \n

    Note: The theme-loader! prefix is used to apply a custom loader that prevents the styles from being auto-applied, and instead applied on-demand by the theme switcher. It requires @nativescript/webpack@5+ to work properly.

    \n
    \n
    \n

    Note for TypeScript users: TypeScript does not know about theme-loader or css/scss files, in order to supress the type errors when calling import('theme-loader!./path/to/theme.css') you can add

    \n
    /// <reference path=\"./node_modules/@nativescript/theme-switcher/shims.d.ts\" />
    \n

    To your references.d.ts, or use // @ts-ignore to supress the errors locally.

    \n
    \n
    \n

    If you need to switch multiple themes simultaniously, you can initialize as many switchers as you need. Each switcher will load css and persist (unless disabled) the last selected theme.

    \n

    Can be useful if your app can switch different parts of the theme individually. For example

    \n
      \n
    1. switcher1 switches button styles
      2. \n
    2. switcher2 switches font styles
      3. \n
    3. etc.
      4. \n
    \n
    import { ThemeSwitcher } from '@nativescript/theme-switcher'

    const switcher1 = new ThemeSwitcher('switcher1');
    const switcher2 = new ThemeSwitcher('switcher1');

    switcher1.initThemes({ /* ... */})
    switcher2.initThemes({ /* ... */})

    switcher1.switchTheme( /* ... */ )
    switcher2.switchTheme( /* ... */ )
    \n

    API

    \n

    initThemes(themes: ThemeDefinition, options?: ThemeSwitcherOptions)

    \n
    interface ThemeDefinition {
    \t[name: string]: () => any;
    }

    interface ThemeSwitcherOptions {
    \tpersistent?: boolean; // default: true
    \tpersistenceKey?: string; // default: __theme_switcher_default
    }
    \n

    themes is an object with the theme name as the key, and a loader function that returns the theme css (css string, ast, optionally async).

    \n

    default will be applied if set as a theme.

    \n

    If persistent is enabled (default), the last selected theme will be saved to ApplicationSettings and automatically restored when initThemes is called.

    \n

    switchTheme(themeName: string)

    \n

    Used to switch the current theme.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/battery":{"name":"@awarns/battery","version":"1.0.1","license":"Apache-2.0","readme":"

    @awarns/battery

    \n

    \"npm\n\"npm\"

    \n

    This framework module includes a task that allows to access phone's battery level on demand.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/battery
    \n

    Usage

    \n

    After installing and setting up this plugin, you'll have access to a task that allows to acquire the current phone's battery level and the BatteryLevel record that it will output on demand.

    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    acquirePhoneBatteryLevelAcquires phone's current battery level
    \n

    Acquire phone's battery level

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquireBatteryLevelTask } from '@awarns/battery';

    export const demoTasks: Array<Task> = [
      // ... other tasks
      acquireBatteryLevelTask(),
      // ...
    ];
    \n

    Task generator parameters:

    \n
    \n

    The task generator takes no parameters.

    \n
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('acquirePhoneBatteryLevel')
      .every(1, 'minutes')
      .cancelOn('stopEvent'));

    on('batteryLevelAcquired', run('writeRecords'))
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    batteryLevelAcquiredBatteryLevelIndicates that a new battery level snapshot (record) has been acquired
    \n

    Records

    \n

    BatteryLevel

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways battery-level
    changeChangeAlways none. Never starts or ends, always exists
    timestampDateThe local time when the battery level was acquired
    valuenumberThe battery level. Always an integer. Ranges from 0 to 100
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-numberpicker":{"name":"nativescript-numberpicker","version":"1.0.3","license":"SEE LICENSE IN README.md","readme":"

    nativescript-numberpicker

    \n

    A nativescript plugin for number picker

    \n

    install

    \n

    tns plugin add nativescript-numberpicker

    \n

    add this to your references.d.ts for typescript support

    \n
        /// <reference path=\"./node_modules/nativescript-numberpicker/numberpicker.d.ts\" /> Needed for autocompletion and compilation.
    \n

    Usage in xml

    \n

    add this to your namespace xmlns:numberpicker="nativescript-numberpicker"\nthen use like this <numberpicker:NumberPicker value="3" minValue="2" maxValue="6" id="np"/>

    \n

    see the example below

    \n
        <Page 
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:numberpicker=\"nativescript-numberpicker\" loaded=\"loaded\">
        <StackLayout style.backgroundColor=\"green\" id=\"Mycontainer\">
            <Label text=\"Find numberpicker below\" class=\"message\" textWrap=\"true\"/>
            <numberpicker:NumberPicker value=\"3\" minValue=\"2\" maxValue=\"6\" id=\"np\"/>
            <Label text=\"Find numberpicker below\" class=\"message\" textWrap=\"true\"/>
        </StackLayout>
        </Page>


        //how to retrive value set from view
        import numberpicker = require(\"nativescript-numberpicker\");
        let np = <numberpicker.NumberPicker>page.getViewById(\"np\");
        let value = np.value; //retrive value from view

    \n

    Usage in code

    \n
        //adding numberpicker from code
        import numberpicker = require(\"nativescript-numberpicker\");
        let np = new numberpicker.NumberPicker();
        np.minValue = 0;
        np.maxValue = 10;
        np.value = 3;//this should be set after maxValue and minValue has been provided

        //add numberpicker to your layout
        let layout = page.getViewById(\"Mycontainer\");
        layout.addChild(np);
    \n

    Support

    \n

    Works on android and ios.

    \n

    note: ios not tested yet, but it should work fine ;) not all of us use a mac.. lol

    \n

    Issues and features request

    \n

    Just create an issue and i'll get back to you ASAP

    \n

    Pull request

    \n

    yes, yes, yes, send them...keep them coming

    \n

    Coming soon

    \n

    styling support for ios and android

    \n

    Liscence

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-autocomplete":{"name":"nativescript-google-places-autocomplete","version":"1.0.3","license":"Apache-2.0","readme":"

    Nativescript Google Places Autocomplete

    \n

    \"npm\n\"Twitter

    \n

    Add location autocomplete to your Nativescript application

    \n

    \"\"

    \n

    Prerequisites

    \n

    Create and grap your Api key from https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en

    \n

    Installation

    \n
    tns plugin add nativescript-google-places-autocomplete
    \n

    Usage

    \n
        import { GooglePlacesAutocomplete } from 'nativescript-google-places-autocomplete';
    \t
    \tlet API_KEY = \"your_api_Key\";
    \tlet googlePlacesAutocomplete = new GooglePlacesAutocomplete(API_KEY);

    \tgooglePlacesAutocomplete.search(params)
    \t      .then((places: any) => {
    \t\t      // place predictions list
               }, (error => {
                  console.log(error)
              }));
              
    \tgooglePlacesAutocomplete.getPlaceById(place.placeId).then((place) => {
    \t   .then(function () { });
            }, error => {
                console.log(error)
            })
    \n

    Plugin Auther : Aymen Labidi

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-content-providers":{"name":"nativescript-content-providers","version":"1.0.0","license":"MIT","readme":"

    Develop a NativeScript plugin now (w/ TypeScript)

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. npm install -g typescript
      3. \n
    3. cd myplugin
      4. \n
    4. npm run postclone
      5. \n
    5. npm run setup
      6. \n
    6. Get to work.
      7. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-content-providers
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-modal-enduco":{"name":"nativescript-windowed-modal-enduco","version":"6.2.8","license":"Apache-2.0","readme":"

    Nativescript Windowed Modal \"apple\" \"android\"

    \n

    \"npm\n\"npm\n\"Build

    \n

    This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-windowed-modal
    \n

    Usage

    \n

    Code

    \n

    Call the overrideModalViewMethod() once before starting the app and register the layout element:

    \n

    Javascript

    \n
    var windowedModal = require(\"nativescript-windowed-modal\")
    windowedModal.overrideModalViewMethod()
    \n

    Typescript+Angular

    \n
    import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    registerElement(\"ModalStack\", () => ModalStack)
    \n

    You can pass extended options like this:

    \n
    mainPage.showModal(\"./modal\", {
      context: \"I'm the context\",
      closeCallback: (response: string) => console.log(\"Modal response: \" + response),
      dimAmount: 0.5 // Sets the alpha of the background dim
    } as ExtendedShowModalOptions)
    \n

    NativeScript-Vue

    \n
    // main.js
    import { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"

    overrideModalViewMethod()
    Vue.registerElement(\"ModalStack\", () => ModalStack)
    Vue.use(VueWindowedModal)
    \n

    You can pass extended options like this:

    \n
    <script type=\"text/javascript\">
      export default {
        methods: {
          openModalTap() {
            this.$showModal(\"./modal\", {
              props: {},
              fullscreen: false,
              animated: true,
              stretched: false,
              dimAmount: 0.5 // Sets the alpha of the background dim,
            })
          }
        }
      }
    </script>
    \n

    Properties

    \n

    ExtendedShowModalOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dimAmount?numberboth0.5Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set.
    \n

    ModalStack

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypePlatformDefaultDescription
    dismissEnabledbooleanbothtrueIf set to true, the modal is allowed to close when touching outside of the content frame
    verticalPositionstringbothmiddleUses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")
    horizontalPositionstringbothcenterUses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")
    \n

    Layout

    \n

    Wrap your modal component with a ModalStack tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\">
        <modal:ModalStack dismissEnabled=\"true\" class=\"modal-container\">
            <StackLayout class=\"modal\">
                <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/>
            </StackLayout>
        </modal:ModalStack>
    </Page>
    \n

    HTML (Angular)

    \n
    <ModalStack dismissEnabled=\"true\" class=\"modal-container\">
      <StackLayout class=\"modal\">
        <Label text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"></Label>
      </StackLayout>
    </ModalStack>
    \n

    Style

    \n

    You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

    \n
    .modal {
      margin: 20;
      margin-top: 35;
      border-radius: 8;
      horizontal-align: center;
      vertical-align: middle;
      background-color: white;
    }

    .modal-container {
      padding: 25;
      padding-bottom: 10;
    }
    \n

    Running the demo app

    \n
      \n
    1. Clone this repo
      2. \n
    2. cd src
      3. \n
    3. npm run demo.android, npm run demo.ios, npm run demo.ng.android, or npm run demo.ng.ios
      4. \n
    \n

    Known Issues

    \n
      \n
    • Padding won't apply on children of the ModalStack, wrapping them with a StackLayout fixes the problem;
      • \n
    • Auto width is kinda buggy on some situations, set a fixed width for children of ModalStack when possible;
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar":{"name":"nativescript-linearprogressbar","version":"1.0.4","license":"Apache-2.0","readme":"

    NativeScript Linear Progress Bar

    \n

    A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
    \nThe ios implemention uses Philippe Boisney's linear progress bar .

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-linearprogressbar
      • \n
    \n

    Vanilla NativeScript

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:Bar=\"nativescript-linearprogressbar\">
      <StackLayout>
        <Bar:Linearprogressbar indeterminate=\"true\" />
      </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n
    import { registerElement } from 'nativescript-angular/element-registry';

    registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
    \n
    <LinearProgressBar indeterminate=\"true\">
    </LinearProgressBar>
    \n

    Attributes

    \n
      \n
    • indeterminate - [boolean] if true, the bar will load indeterminately
      • \n
    • barColor - [string] sets the loading bar color with an hexadecimal color code
      • \n
    \n

    Version

    \n

    1.0

    \n

    Author

    \n

    slanca (npmdroid(@)gmail.com)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@imagene.me/nativescript-ox-button":{"name":"@imagene.me/nativescript-ox-button","version":"2.0.1","license":"Apache-2.0","readme":"

    @imagene.me/nativescript-ox-button

    \n
    ns plugin add @imagene.me/nativescript-ox-button
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sound-kak":{"name":"nativescript-sound-kak","version":"1.2.0","license":"MIT","readme":"

    NativeScript Sound

    \n

    Play a sound in your NativeScript app.

    \n

    This project was originally programmed by John Bristowe. However when this plugin is used in a project installed on a phone with iOS 13.2, the entire application would crash. This fork is a modified version of the original project that solves the instantiation crash issue that I encountered. The rest of the project remained intact.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    npm i nativescript-sound-kak
    \n

    Usage

    \n

    To use this plugin you must first require or import it:

    \n
    //CommonJs
    const Sound = require(\"nativescript-sound-kak\");

    //ES6 Import
    import * as Sound from \"nativescript-sound-kak\";
    \n

    Create and Play

    \n

    It's important to preload the audio file into the sound module before playing it; there is a delay during creation due to the audio being processed:

    \n
    const beep = Sound.create(\"./path/to/file.mp3\"); // preload the audio file

    // play the sound (i.e. tap event handler)
    beep.play();
    \n

    You may wish to check that the file actually exists:

    \n
    import * as fs from \"tns-core-modules/file-system\";
    import * as Sound from 'nativescript-sound-kak';

    // currentApp().path leads to your app folder in the project
    const pathToBeep = fs.path.join(fs.knownFolders.currentApp().path, '/assets/sounds/beep.mp3');
    let beep;
    if (fs.File.exists(pathToBeep)) {
    \tbeep = Sound.create(pathToBeep);
    }
    \n

    stop

    \n
    beep.stop();
    \n

    reset

    \n
    beep.reset();
    \n

    Background Playback

    \n

    In iOS, the default playback method will silence all background sounds. You can define whether the audio playback in the app silences background audio (i.e. the Music app) or if it play concurrently.

    \n
    import * as Sound from 'nativescript-sound-kak';
    // Sets the audio playback to background, i.e. allows it to play at the same time as other background audio.
    Sound.setBackground(true);
    \n
    import * as Sound from 'nativescript-sound-kak';
    // Turns off background playback. When the Sound object is created, background audio will be silenced
    Sound.setBackground(false);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-reviews":{"name":"nativescript-reviews","version":"1.0.4","license":"Apache-2.0","readme":"

    Nativescript Reviews

    \n

    ready to use reviews box

    \n\n

    Install

    \n
    tns plugin add nativescript-reviews
    \n

    click here to Download fontawesome-webfont.ttf or download from fontawesome website

    \n
      \n
    • Place font icon .ttf file in app/fonts, like below:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n

    Usage

    \n
    <UI:Reviews reviews=\"{{ reviews }}\"  />
    \n

    with more options

    \n
    <!-- default -->
    <UI:Reviews reviews=\"{{ reviews }}\"  />
    <!-- reviews with custom date handler  -->
    <UI:Reviews dateHandler=\"arabicDateTime\" title=\"With date handler\" reviews=\"{{ reviews }}\" scroll=\"false\" />
    <!-- reviews with custom plugin for caching   -->
    <UI:Reviews title=\"Image cache plugins \" scroll=\"false\" plugin=\"{{ plugin }}\" imagetag=\"{{ imagetag }}\" reviews=\"{{ reviewsWithWebImages }}\" /> 
    <!-- reviews with scroll inside   -->
    <UI:Reviews title=\"Scroll inside\" scroll=\"true\" reviews=\"{{ lotofreviews }}\" />
    \n

    refresh() this function you can triger after you get remote data

    \n

    let review = getViewById('review');\n//you can do remote request or delay\nreview.refresh(); // then refresh your values

    \n

    see demo for more details

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    reviewsrequiredArray of reivew object {image: "~/images/icon-50.png", username: "Moayad Najdawi", review: "this is the first review", rate: 5, datetime: new Date(Date.now() - 24 * 60 * 60 * 1000)}
    scrolltrueenable or disable scrollview inside the reviews holder
    showHeadertrueto hide or show review title with the underline style
    imagetagthe xml element of the image so you can change it if you need to add cache plugin or something
    pluginempty stringplugin include statment like xmlns:IC="nativescript-web-image-cache"
    titlereviewsthe title of the reviews box
    dateHandlera goyou can change the date text by provide filter inside app resources see app.ts
    usereventfire on tap on user image or name return the review object
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cblite-xl":{"name":"nativescript-cblite-xl","version":"1.1.12","license":"Apache-2.0","readme":"

    Description

    \n

    CbLiteXl is a plugin that allows access to the couchbaselite library.\nCurrently, the plugin is only available for android. However, we plan to implement the IOS version.

    \n

    Installation

    \n

    To install the plugin play the following command from your nativescript project's root directory\n\ttns plugin add nativescript-cblite-xl

    \n

    How to use

    \n

    Below some examples of how to use this plugin

    \n

    Import

    \n

    To use the plugin in your code, you can import it like this:

    \n
    import { CbliteXl } from \"nativescript-cblite-xl\";
    \n

    In order to use all options allowed by this plugin, you can import all you need like this:

    \n
    import {
      CbliteXl,
      SelectResult,
      Meta,
      Expression,
      QueryBuilder,
      DataSource,
      Ordering
    } from \"nativescript-cblite-xl\";
    \n

    Instanciation and database creation

    \n

    You can instanciate the library and create database like that:

    \n
    this.cbliteXl = new CbliteXl(\"testdatabase\");
    \n

    Document creation

    \n
        let tour = {
          type: \"tour\",
          data: { begin: 100000, end: 200000, id: 3, nested: { attr: 5 } }
        };

        let documentId = this.cbliteXl.createDocument(tour);
        console.log(\"This is your documentId\", documentId);\t
    \n

    Document fetching

    \n
        let tour = his.cbliteXl.getDocument(documentId);

        console.log(\"This is your document\", tour);\t
    \n

    Document update

    \n
        let tour = this.cbliteXl.getDocument(documentId);
        tour.data.nested.attr = 6;

        this.cbliteXl.updateDocument(tour);
    \n

    Document deletion

    \n
    this.cbliteXl.deleteDocument(documentId);
    \n

    Querying

    \n
        let query = QueryBuilder.select([SelectResult.all()])
          .from(DataSource.database(this.cbliteXl.getDatabase()))
          .where(
            Expression.property(\"type\")
              .equalTo(Expression.string(\"tour\"))
              .and(Expression.property(\"data.id\").lessThanOrEqualTo(Expression.intValue(18)))
              .and(
                Expression.property(\"data.nested.attr\").equalTo(
                  Expression.intValue(24)
                )
              )
          )
          .orderBy([Ordering.property(\"data.id\").descending()])
          .limit(Expression.intValue(1));
          
          const results = this.cbliteXl.getAll(query);

          results.forEach((result) => {
            console.log('Result', result);
          });
    \n

    Going further

    \n

    For more information about how to use couchbase-lite using this plugin, you can read the lib documentation here:\nhttps://docs.couchbase.com/couchbase-lite/2.1/java.html#getting-started

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-version-number":{"name":"nativescript-version-number","version":"1.1.0","license":"MIT","readme":"

    NativeScript Version Number Plugin

    \n

    A dead-simple plugin for retrieving the version number of your NativeScript app.

    \n

    Installation

    \n
    tns plugin add nativescript-version-number
    \n

    Usage

    \n

    The version number plugin exposes a simple VersionNumber() class with a single instance method named get(). To get the version number of your app, instantiate an instance of VersionNumber and call its get() method.

    \n
    import { VersionNumber } from \"nativescript-version-number\";

    new VersionNumber().get();
    \n

    The plugin is currently set up to return the CFBundleShortVersionString value from your app’s Info.plist file on iOS, and the android:versionName value from your app’s AndroidManifest.xml file on Android.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-envinfo":{"name":"nativescript-envinfo","version":"1.0.9","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vector-icons":{"name":"nativescript-vector-icons","version":"2.0.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-preferences":{"name":"nativescript-akylas-preferences","version":"1.1.11","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    nativescript-akylas-preferences

    \n

    This plugin allows native preference saving\\loading on iOS and Android

    \n\n\n

    iOS Prerequisites

    \n\n

    Android Prerequisites

    \n\n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-akylas-preferences
    \n

    Usage

    \n
        var prefs = new Preferences();

        //Get existing value
        prefs.getValue(\"name_preference\");

        //Set value
        prefs.setValue(\"name_preference\", \"some new text\");
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    openSettings(): any;Opens the native settings panes
    getValue(key: string): any;Gets the value for the preference
    setValue(key: string, value: any): void;Sets the passed value to the preference
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-plug":{"name":"nativescript-test-plug","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/multi-select":{"name":"@skhye05/multi-select","version":"1.0.4","license":"Apache-2.0","readme":"

    Nativescript Multi Select \"apple\" \"android\"

    \n

    \"npm\"\n\"npm\"

    \n

    Overview

    \n

    Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

    \n

    \n \n \n

    \n

    Installation

    \n
    tns plugin add @skhye05/multi-select
    \n

    Usage

    \n

    TypeScript

    \n
    import { MultiSelect, AShowType } from '@skhye05/multi-select';
    import { MSOption } from '@skhye05/multi-select';

    let MSelect = new MultiSelect();
    let selectedItems = [\"moi-a\", \"moi-b\"];

    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this._selectedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        selectedItems = selectedItems;
        console.log(\"SELECTED ITEMS => \", selectedItems);
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    MSelect.show(options);
    \n

    Angular

    \n
    import { Component, OnInit, NgZone } from \"@angular/core\";
    import { MultiSelect, AShowType } from '@skhye05/multi-select';
    import { MSOption } from '@skhye05/multi-select';

    @Component({
     // ...
    })
    export class SomeComponent implements OnInit {

      private _MSelect: MultiSelect;
      private predefinedItems: Array<any>;
      public selectedItems: Array<any>;

      constructor(private zone: NgZone) {
        this._MSelect = new MultiSelect();
        this.predefinedItems = [\"moi-a\", \"moi-b\"];
      }

      ngOnInit(): void {
      }


      public onSelectTapped(): void {
        const options: MSOption = {
          title: \"Please Select\",
          selectedItems: this.predefinedItems,
          items: [
            { name: \"A\", value: \"moi-a\" },
            { name: \"B\", value: \"moi-b\" },
            { name: \"C\", value: \"moi-c\" },
            { name: \"D\", value: \"moi-d\" },
          ],
          bindValue: 'value',
          displayLabel: 'name',
          onConfirm: selectedItems => {
            this.zone.run(() => {
              this.selectedItems = selectedItems;
              this.predefinedItems = selectedItems;
              console.log(\"SELECTED ITEMS => \", selectedItems);
            })
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log('CANCEL');
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\",
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };

        this._MSelect.show(options);
      }
    }
    \n

    Vue

    \n
    <script>
      import {
        MultiSelect,
        AShowType
      } from \"@skhye05/multi-select\";
      const MSelect = new MultiSelect();
      let predefinedItems = [\"moi-a\", \"moi-b\"];
      
      export default {
        data() {
        },
        methods: {
          onSelectTapped() {
            const that = this;
            const options = {
              title: \"Please Select\",
              selectedItems: predefinedItems,
              items: [{
                  name: \"A\",
                  value: \"moi-a\"
                },
                {
                  name: \"B\",
                  value: \"moi-b\"
                },
                {
                  name: \"C\",
                  value: \"moi-c\"
                },
                {
                  name: \"D\",
                  value: \"moi-d\"
                }
              ],
              bindValue: \"value\",
              displayLabel: \"name\",
              onConfirm: _selectedItems => {
                that.selectedItems = _selectedItems;
                console.log(\"SELECTED ITEMS => \", _selectedItems);
              },
              onItemSelected: selectedItem => {
                console.log(\"SELECTED ITEM => \", selectedItem);
              },
              onCancel: () => {
                console.log(\"CANCEL\");
              },
              android: {
                titleSize: 25,
                cancelButtonTextColor: \"#252323\",
                confirmButtonTextColor: \"#70798C\"
              },
              ios: {
                cancelButtonBgColor: \"#252323\",
                confirmButtonBgColor: \"#70798C\",
                cancelButtonTextColor: \"#ffffff\",
                confirmButtonTextColor: \"#ffffff\",
                showType: AShowType.TypeBounceIn
              }
            };
      
            MSelect.show(options);
          }
        }
      };
    </script>
    \n

    API

    \n

    MultiSelect

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    show(options: MSOption)() : voidShow Multi Select Dialog
    \n

    MSOption

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titlestringDialog Title
    confirmButtonTextstringconfirm button text optional
    cancelButtonTextstringcancel button text optional
    selectedItemsArray<any>predefined items optional
    itemsArray<any>items/list that will be display
    bindValuestringthe value that will determine the property which will be return when an item is selected optional
    displayLabelstringthe value that will determine the property which will be display in the list optional
    iosMSiOSOptionios options optional
    androidMSAndroidOptionandroid options optional
    onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
    onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
    onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
    \n

    MSAndroidOption (for android)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titleSizenumberoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    \n

    MSiOSOption (for ios)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    cancelButtonBgColorstringoptional
    confirmButtonBgColorstringoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
    dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
    itemColorstringitem text color optional
    \n

    iOS Popup: Animation AShowType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeIn1
    TypeGrowIn2
    TypeShrinkIn3
    TypeSlideInFromTop4
    TypeSlideInFromBottom5
    TypeSlideInFromLeft6
    TypeSlideInFromRight7
    TypeBounceIn8
    TypeBounceInFromTop9
    TypeBounceInFromBottom10
    TypeBounceInFromLeft11
    TypeBounceInFromRight12
    \n

    iOS Popup: Animation ADismissType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeOut1
    TypeGrowOut2
    TypeShrinkOut3
    TypeSlideOutToTop4
    TypeSlideOutToBottom5
    TypeSlideOutToLeft6
    TypeSlideOutToRight7
    TypeBounceOut8
    TypeBounceOutToTop9
    TypeBounceOutToBottom10
    TypeBounceOutToLeft11
    TypeBounceOutToRight12
    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-salesforce-dmp":{"name":"@essent/nativescript-salesforce-dmp","version":"1.1.0","license":"MIT","readme":"

    NativeScript plugin for Salesforce DMP

    \n

    \"npm

    \n

    This is a plugin to use the Salesforce DMP SDK (Android v4.3.2, iOS v4.3.0). To use this plugin you need to have an account for Salesforce DMP.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @essent/nativescript-salesforce-dmp
    \n

    Setup (Android Only)

    \n

    Make sure you add the following permissions to the AndroidManifest.xml file of your app:

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>
    \n

    Add the following services to the application tag in the AndroidManifest.xml file of your app (example):

    \n
    <service android:name=\"com.krux.androidsdk.aggregator.EventPublisherService\" android:enabled=\"true\" />
    <service android:name=\"com.krux.androidsdk.aggregator.ConsentService\" android:enabled=\"true\" />
    \n

    Add play-services-ads to the dependencies in the app.gradle file of your app (example):

    \n
    compile 'com.google.android.gms:play-services-ads:10.2.4'
    \n

    Usage

    \n

    To use nativescript-salesforce-dmp you must first import the module:

    \n
    import { SalesforceDMP, KeyValue } from '@essent/nativescript-salesforce-dmp';
    \n

    At the launch of your app call initialize with your config id:

    \n
    SalesforceDMP.getInstance().initialize('YOUR_CONFIG_ID', true);
    \n

    Consent

    \n

    Before using Salesforce DMP the user needs to give consent. More information about these flags can be found in this support article.
    \nTo set the consent:

    \n
    const consentAttributes: KeyValue<string> = {
        pr: '1',
        dc: '1',
        al: '1',
        tg: '1',
        cd: '1',
        sh: '0',
        re: '1'
    };
    SalesforceDMP.getInstance().setConsent(consentAttributes);
    \n

    To quickly remove all consent flags:

    \n
    SalesforceDMP.getInstance().removeConsent();
    \n

    Tracking

    \n

    To track page views call trackPageView (optionally you can use pageAttributes and userAttributes):

    \n
    SalesforceDMP.getInstance().trackPageView('TestPage', null, null);
    \n

    To fire events call fireEvent:

    \n
    const attributes: KeyValue<string> = {
        event_id: 'YOUR_EVENT_ID', // this attribute is mandatory
        myKey: 'An event value'
    };
    SalesforceDMP.getInstance().fireEvent('TestEvent', attributes);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-square-plugin":{"name":"nativescript-square-plugin","version":"1.0.6","license":"Apache-2.0","readme":"

    Nativescript Square Plugin

    \n

    A simple NativeScript plugin for making charges using Square. Current version supports iOS. Pull requests expanding features or adding android support are welcome.

    \n

    Installation

    \n

    npm install nativescript-square-plugin

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@flypapertech/nativescript-fonticon":{"name":"@flypapertech/nativescript-fonticon","version":"3.0.0","license":"https://github.com/nativescript-community/fonticon/blob/master/LICENSE","readme":"

    A simpler way to use font icons with NativeScript

    \n

    \"MIT\n\"Dependency \"devDependency

    \n

    The Problem

    \n

    You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

    \n
      \n
    • CSS
      • \n
    \n
    .fa {
      font-family: FontAwesome;
    }
    \n
      \n
    • view
      • \n
    \n
    <Label class=\"fa\" text=\"\\uf293\"></Label>
    \n

    This works but keeping up with unicodes is not fun.

    \n

    The Solution

    \n

    With this plugin, you can instead reference the fonticon by the specific classname:

    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
    \n

    Install

    \n
    npm install @nativescript-community/fonticon --save
    \n

    Usage

    \n

    FontAwesome will be used in the following examples but you can use any custom font icon collection.

    \n
      \n
    • Place font icon .ttf file in app/fonts, for example:
      • \n
    \n
    app/fonts/fontawesome-webfont.ttf
    \n
      \n
    • Create base class in app.css global file, for example:
      • \n
    \n
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
    }
    \n

    NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

    \n
      \n
    • Copy css to app somewhere, for example:
      • \n
    \n
    app/font-awesome.css
    \n

    Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

    \n
      \n
    • Configure your fonts and setup the converter:
      • \n
    \n
    import * as application from '@nativescript/core/application';
    import {FontIcon, fonticon} from '@nativescript-community/fonticon';

    FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
    FontIcon.paths = {
      'fa': 'font-awesome.css',
      'ion': 'ionicons.css'
    };
    FontIcon.loadCss();

    application.setResources( { fonticon } );
    application.run({ moduleName: 'main-page' });
    \n
      \n
    • Use the Converter, for example:
      • \n
    \n
    <Label class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"></Label>
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (iOS)Demo Ionicons (iOS)
    \"Sample1\"\"Sample2\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Demo FontAwesome (Android)Demo Ionicons (Android)
    \"Sample3\"\"Sample4\"
    \n

    Font Awesome 5

    \n

    In this case, you have to copy and import each ttf file and associate it with the proper class:

    \n
    .fas {
      font-family: Font Awesome 5 Free, fa-solid-800;
    }
    .far {
      font-family: Font Awesome 5 Free, fa-regular-400;
    }
    \n

    but still you will import the css only once with the fa prefix:

    \n
    FontIcon.paths = {
      'fa': 'font-awesome.css'
    };
    \n

    How about NativeScript with Angular?

    \n

    If using Angular, use this instead:

    \n\n

    Credits

    \n

    Idea came from Bradley Gore's post here.

    \n

    Contributors

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-midi":{"name":"nativescript-midi","version":"0.0.6","license":"MIT","readme":"

    nativescript-midi

    \n

    A NativeScript plugin for communicating with MIDI devices (e.g. musical instruments or apps).

    \n

    A basic understanding of the MIDI (Musical Instrument Digital Interface) message protocol is required to use this plugin.

    \n

    Project status: No Longer Developed / Maintained

    \n

    This plugin has been designed to allow a uniform interface to be used for MIDI communication on both iOS and Android, however only the iOS platform implementation has been finished. I started to develop the Android implementation, but I ultimately shifted my focus to a different project, and I currently have no plans to finish development or to maintain it for compatibility with new NativeScript versions (> v2).

    \n

    Installation

    \n

    Assuming you've already installed the NativeScript CLI:

    \n
    tns plugin add nativescript-midi
    \n

    Programming interfaces

    \n

    An application interacts with the plugin through interfaces which resemble those in Android's MIDI API:

    \n
      \n
    • MidiDeviceManager: Fetches available MIDI devices and notifies the application of device changes.
      • \n
    • MidiDevice: A named device with input ports and output ports through which communication occurs.
      • \n
    • MidiInputPort: Provides a method by which an application can send MIDI messages to the device.
      • \n
    • MidiOutputPort: Notifies the application of messages received from the device.
      • \n
    \n

    For more information on these interfaces, check out the API docs.

    \n

    Example

    \n
    import { MidiDeviceManager } from 'nativescript-midi';


    let midiDeviceManager = new MidiDeviceManager(),
        midiDevices;

    midiDeviceManager.getDevices()
    .then(devices => {

        midiDevices = devices; // Save a reference to the devices for later use in the app.

        // Listen for device added / removed / updated events.
        midiDeviceManager.addDeviceAddedListener(deviceAdded => { /* handle added device */ });
        midiDeviceManager.addDeviceRemovedListener(deviceRemoved => { /* handle removed device */ });
        midiDeviceManager.addDeviceUpdatedListener(deviceUpdated => { /* handle updated device (e.g. ports changed) */ });

        // Let's assume for this example that we know there's a device with at least one input port and one output port.
        let device = midiDevices.find(device => device.inputPorts.length && device.outputPorts.length);

        // Here we listen for any messages from the device (i.e. from all outputPorts), but alternatively, you can listen for messages on just a single port with `device.outputPorts[i].addMessageListener()`
        device.addMessageListener((messages, outputPort) => {

            let portIndex = device.outputPorts.indexOf(outputPort);

            // The packets received from a system's MIDI device (i.e. MIDIPacketList on iOS) are automatically parsed into discrete messages for you 👍.
            for (let message of messages) {

                console.log(`Received a MIDI message from outputPort ${portIndex} of device ${device.name}:`);
                console.log(message instanceof Uint8Array); // `true`
                message.forEach((byte, byteIndex) => console.log(`byte ${byteIndex}: ${byte}`));
            }
        });

        console.log(`Sending a message to inputPort 0 of device ${device.name} to play middle-C...`);

        let bytes = new Uint8Array([
            0x90, // \"Note On\" status byte
            0x3C, // Pitch value for middle-C
            0xFF  // Full volume
        ]);

        // Here we send a message to a single input port on the device. Alternatively, you can send the message to *all* of the device's input ports with `device.send()`.
        return device.inputPort[0].send({ bytes });
    })
    .then(() => console.log(`Successfully finished sending the MIDI message 🎵`))
    .catch(error => console.log(`Yikes - something went wrong. ` + error.stack));
    \n

    Logging

    \n

    The plugin's classes log information internally. To capture or display this log info, construct the MidiDeviceManager with a logger object that implements a Winston-style logger.

    \n
    let logger = {

        info(message, metadata) {
            console.log(`INFO: ${message} ${JSON.stringify(metadata)}`);
        },

        warn(message, metadata) {
            console.log(`WARN: ${message} ${JSON.stringify(metadata)}`);
        },

        error(message, metadata) {
            console.log(`ERROR: ${message} ${JSON.stringify(metadata)}`);
        }
    };

    let midiDeviceManager = new MidiDeviceManager({ logger });
    \n

    Contributing

    \n

    Contributions are welcome, especially on the Android work that's needed for the 1.0 release.

    \n

    Building

    \n

    This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

    \n
    npm run build
    \n

    There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

    \n

    Linting

    \n
    npm run lint
    \n

    Project Dependencies

    \n

    A MIDI packet (i.e. MIDIPacketList on iOS) can contain multiple MIDI messages, and a single MIDI System Exclusive (SysEx) message can span multiple packets. This detail is hidden from the plugin consumer so that the application just receives an array of messages that have already been parsed and validated.

    \n

    This message parsing logic is implemented in the midi-message-parser C library, which I am also using within a separate a MIDI hardware product with which this plugin can communicate. The cocoa-midi-message-parser wrapper is used to expose this C library to the NativeScript runtime and to avoid some of the runtime's limitations surrounding C interop (e.g. lack of support for C structs which contain arrays).

    \n
    nativescript-midi
        |
        |-- cocoa-midi-message-parser
            |
            |-- midi-message-parser
    \n

    Attribution

    \n

    Thank you to Pete Goodliffe, author of the open source PGMidi library that is used internally by nativescript-midi.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dante1304/nativescript-google-maps":{"name":"@dante1304/nativescript-google-maps","version":"1.0.42","license":"Apache-2.0","readme":"

    @dante1304/google-maps

    \n
    ns plugin add @dante1304/nativescript-google-maps
    \n

    Usage

    \n

    NativeScript plugin for the Google Maps SDK

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

    \n

    Prerequisites

    \n

    iOS - Cocoapods must be installed.

    \n

    Android - The latest version of the Google Play Services SDK must be installed.

    \n

    Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

    \n

    Configure API Key for Android

    \n

    Start by copying the necessary template resource files in to the Android app resources folder:

    \n
    cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
    \n

    Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

    \n

    Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

    \n
    <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"@string/nativescript_google_maps_api_key\" />
    \n

    The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Configure API Key for iOS

    \n

    In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

    \n
    if (application.ios) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, modify your app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    declare var GMSServices: any;

    ....

    if (platform.isIOS) {
        GMSServices.provideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Adding the MapView

    \n

    Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

    \n
    <!-- /app/main-page.xml -->

    <Page
        xmlns=\"http://www.nativescript.org/tns.xsd\"
        xmlns:maps=\"nativescript-google-maps-sdk\"
    >
        <GridLayout>
            <maps:mapView
                latitude=\"{{ latitude }}\"
                longitude=\"{{ longitude }}\"
                zoom=\"{{ zoom }}\"
                bearing=\"{{ bearing }}\"
                tilt=\"{{ tilt }}\"
                mapAnimationsEnabled=\"{{ mapAnimationsEnabled }}\"
                padding=\"{{ padding }}\"
                mapReady=\"onMapReady\"
                markerSelect=\"onMarkerSelect\"
                markerBeginDragging=\"onMarkerBeginDragging\"
                markerEndDragging=\"onMarkerEndDragging\"
                markerDrag=\"onMarkerDrag\"
                cameraChanged=\"onCameraChanged\"
                cameraMove=\"onCameraMove\"
            />
        </GridLayout>
    </Page>
    \n

    Properties

    \n

    The following properties are available for adjusting the camera view:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    latitudeLatitude, in degrees: number
    longitudeLongitude, in degrees: number
    zoomZoom level (described here): number
    bearingBearing, in degrees: number
    tiltTilt, in degrees: number
    paddingTop, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array)
    mapAnimationsEnabledWhether or not to animate camera changes: Boolean
    \n

    Events

    \n

    The following events are available:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    mapReadyFires when the MapView is ready for use
    myLocationTappedFires when the 'My Location' button is tapped
    coordinateTappedFires when a coordinate is tapped on the map
    coordinateLongPressFires when a coordinate is long-pressed on the map
    markerSelectFires when a marker is selected
    markerBeginDraggingFires when a marker begins dragging
    markerEndDraggingFires when a marker ends dragging
    markerDragFires repeatedly while a marker is being dragged
    markerInfoWindowTappedFires when a marker's info window is tapped
    markerInfoWindowClosedFires when a marker's info window is closed
    shapeSelectFires when a shape (e.g., Circle, Polygon, Polyline) is selected (Note: you must explicity configure shape.clickable = true; for this event to fire)
    cameraChangedFires after the camera has changed
    cameraMoveFires repeatedly while the camera is moving
    indoorBuildingFocusedFires when a building is focused on (the building currently centered, selected by the user or by the location provider)
    indoorLevelActivatedFires when the level of the focused building changes
    \n

    Native Map Object

    \n

    The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

    \n

    UI Settings

    \n

    You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription and Data Type
    compassEnabledWhether the compass is enabled or not: Boolean
    indoorLevelPickerEnabledWhether the indoor level picker is enabled or not: Boolean
    mapToolbarEnabled** Android only ** Whether the map toolbar is enabled or not: Boolean
    myLocationButtonEnabledWhether the 'My Location' button is enabled or not: Boolean
    rotateGesturesEnabledWhether the compass is enabled or not: Boolean
    scrollGesturesEnabledWhether map scroll gestures are enabled or not: Boolean
    tiltGesturesEnabledWhether map tilt gestures are enabled or not: Boolean
    zoomGesturesEnabledWhether map zoom gestures are enabled or not: Boolean
    zoomControlsEnabled** Android only ** Whether map zoom controls are enabled or not: Boolean
    \n

    Styling

    \n

    Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

    \n

    Angular

    \n

    Use this.mapView.setStyle(<MapStyle>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <MapStyle> type was imported from the plugin as { MapStyle }.

    \n

    Basic Example

    \n
    //  /app/main-page.js

    var mapsModule = require(\"dante1304/nativescript-google-maps\");

    function onMapReady(args) {
        var mapView = args.object;

        console.log(\"Setting a marker...\");
        var marker = new mapsModule.Marker();
        marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
        marker.title = \"Sydney\";
        marker.snippet = \"Australia\";
        marker.userData = { index : 1};
        mapView.addMarker(marker);

        // Disabling zoom gestures
        mapView.settings.zoomGesturesEnabled = false;
    }

    function onMarkerSelect(args) {
        console.log(\"Clicked on \" +args.marker.title);
    }

    function onCameraChanged(args) {
        console.log(\"Camera changed: \" + JSON.stringify(args.camera));
    }

    function onCameraMove(args) {
        console.log(\"Camera moving: \"+JSON.stringify(args.camera));
    }

    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    exports.onCameraMove = onCameraMove;
    \n

    Usage with Angular

    \n
    // /app/map-example.component.ts

    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from \"nativescript-angular/element-registry\";

    // Important - must register MapView plugin in order to use in Angular templates
    registerElement(\"MapView\", () => require(\"nativescript-google-maps-sdk\").MapView);

    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <MapView (mapReady)=\"onMapReady($event)\"></MapView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {

        @ViewChild(\"MapView\") mapView: ElementRef;

        //Map events
        onMapReady = (event) => {
            console.log(\"Map Ready\");

    }
    \n

    Marker clustering

    \n

    To setup the marker cluster use MapView's setupMarkerCluster instead of adding markers to map like this:

    \n
    function onMapReady(args) {
    \tvar mapView = args.object;
    \tvar markers = [];

    \tfor (i = 0; i < 5; i++) {
    \t\tvar marker = new mapsModule.Marker();
    \t\tmarker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.2);
    \t\tmarker.title = `Marker ${i + 1}`;
    \t\tmarker.snippet = `Marker ${i + 1}`;
    \t\tmarker.userData = { index: i };
    \t\tmarkers.push(marker);
    \t}

    \t// The second argument is the minimum number of items that should form a cluster
    \tmapView.setupMarkerCluster(markers, 2);

    \t// Disabling zoom gestures
    \tmapView.settings.zoomGesturesEnabled = false;
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jwplayer-web":{"name":"nativescript-jwplayer-web","version":"1.0.4","license":"MIT","readme":"

    NativeScript JW Player

    \n

    This plugin is provides an interface to use native jwplayer android/ios sdks in nativescript.

    \n

    Register at jwplayer.com,create a Cloud-hosted player and get the script link.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-jwplayer-web
    \n

    Usage

    \n

    Typescript/Javascript with XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:jw=\"nativescript-jwplayer-web\">
       <GridLayout>
        <jw:JWPlayerWeb src=\"{{src}}\" play=\"{{onPlay}}\"
            pause=\"{{onPause}}\">    </jw:JWPlayerWeb>
    </GridLayout>
    </Page>
    \n

    Angular

    \n

    in app.module.ts

    \n
    import { registerElement } from \"@nativescript/angular\";
    registerElement(
      \"JWPlayerWeb\",
      () => require(\"nativescript-jwplayer-web\").JWPlayerWeb
    );
    \n
    <GridLayout>
      <JWPlayerWeb
        [src]=\"src\"
        (play)=\"onPlay($event)\"
        (pause)=\"onPause($event)\"
      >    </JWPlayerWeb>
    </GridLayout>
    \n\n

    Plugin API

    \n

    You can pass src property for video link and other details:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    optionrequiredtype
    linkYesstring
    autostartnoboolean
    floatingnoboolean
    responsivenoboolean
    controlsnoboolean
    widthnostring(with px)
    playlistYesObject
    advertisingnoObject
    \n

    wrap these properties in an object and pass it to the src.

    \n

    Here is the how playlist and advertising can be set in src:

    \n
    let src = {};
    src[\"playlist\"] = [{ file: \"VIDEO_URL\", label: \"VIDEO_LABEL\" }];
    src[\"advertising\"] = {
      client: \"vast\",
      adscheduleid: \"AD_SCHEDULE_ID\",
      schedule: [
        {
          offset: \"pre\", //pre|post|5%,10% etc...
          tag: \"AD_TAG\",
        },
      ],
    };
    \n

    Event list

    \n

    Change in or initialization will trigger these events

    \n

    ready;
    \nsetupError;
    \nremove;
    \nadBidRequest;
    \nadBidResponse;
    \nadBlock;
    \nadBreakEnd;
    \nadBreakIgnored;
    \nadBreakStart;
    \nadClick;
    \nadCompanions;
    \nadComplete;
    \nadError;
    \nadImpression;
    \nadItem;
    \nadLoaded;
    \nadManager;
    \nadMeta;
    \nadPause;
    \nadPlay;
    \nadRequest;
    \nadSchedule;
    \nadSkipped;
    \nadStarted;
    \nadTime;
    \nadViewableImpression;
    \nadWarning;
    \nadsManager;
    \nbeforeComplete;
    \nbeforePlay;
    \naudioTracks;
    \naudioTrackChanged;
    \nbufferChange;
    \ncaptionsList;
    \ncaptionsChanged;
    \ncast;
    \ncontrols;
    \ndisplayClick;
    \nmeta;
    \nmetadataCueParsed;
    \nautostartNotAllowed;
    \nplay;
    \npause;
    \nplayAttemptFailed;
    \nbuffer;
    \nidle;
    \ncomplete;
    \nfirstFrame;
    \nerror;
    \nwarning;
    \nplaybackRateChanged;
    \nplaylist;
    \nplaylistItem;
    \nplaylistComplete;
    \nlevels;
    \nlevelsChanged;
    \nvisualQuality;
    \nfullscreen;
    \nresize;
    \nseek;
    \nseeked;
    \ntime;
    \nviewable;
    \nmute;
    \nvolume;

    \n

    Function to manipulate the player

    \n
    play();

    pause();

    resizePlayer(size: { width: string, height: string });

    triggerAd(tag: string);


    setControls(state:boolean);

    setFloating(state:boolean);

    getMute();

    getVolume();

    setMute(state: boolean);

    //from 1-100
    setVolume(volume: number);

    getPercentViewable();

    getViewable();

    getPosition();

    getDuration();

    seek(position: number);

    getFullscreen();

    getHeight();

    getWidth();

    setPlaylistItemCallback(callback);

    removePlaylistItemCallback();

    getPlaylistItemPromise(index: number);

    getQualityLevels();

    getCurrentQuality();

    getVisualQuality();

    setCurrentQuality(index: number);

    getPlaybackRate();

    //from 0.25 to 4
    setPlaybackRate(rate: number);

    next();

    getPlaylist();

    getPlaylistItem();

    getPlaylistIndex();

    load(playlist: Array<Playlist>);

    playlistItem(index: number);

    stop();

    getState();

    getAdBlock();

    pauseAd(state: boolean);

    playAd(tag: string);

    skipAd();

    getAudioTracks();

    getCurrentAudioTrack();

    setCurrentAudioTrack(index: number);

    addButton({ img, tooltip, callback, id, btnClass });

    addCues(cues);

    getControls();

    getCues();

    getSafeRegion();

    removeButton(id: string);

    setControls(state: boolean);

    setCues(cues);

    setCaptions(styles);

    getCaptionsList();

    getCurrentCaptions();

    setCurrentCaptions(index: number);

    getBuffer();

    stopCasting();
    \n

    Known issues

    \n
      \n
    1. \n

      With fullscreen event, there is always a chromium error. This is a known issue on chromium during fullscreen.

      \n
      2. \n
    2. \n

      Providing width in player configuration gives an error. However, height/width can be provided with resizePlayer() function.

      \n
      3. \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdfbox":{"name":"nativescript-pdfbox","version":"0.2.0","license":"Apache-2.0","readme":"

    NativeScript PdfBox \"android\"

    \n

    \"Build

    \n

    Apache Pdfbox for NativeScript. This plugin allows you to extract the text from a PDF file.

    \n

    \"Sample

    \n

    The screenshot is based on the sample.pdf included in the demo project.

    \n

    Based on:

    \n\n

    The plugin is currently only avaiable for Android.

    \n

    Installation

    \n
    tns plugin add nativescript-pdfbox
    \n

    Usage

    \n
    import * as fs from 'tns-core-modules/file-system';
    import { PdfBox } from 'nativescript-pdfbox';

    const appPath = fs.knownFolders.currentApp().path;
    const mySampleFile = appPath + '/sample.pdf';
    const removeLineBreaks: boolean = true; // optional, default is false

    const pdfbox: PdfBox = new PdfBox();
    pdfbox
        .getText(mySampleFile, removeLineBreaks)
        .then(text => {
            this.messageNotRemovedLB = text;
            super.notifyPropertyChange('messageNotRemovedLB', text);
        });
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tween":{"name":"nativescript-tween","version":"0.0.10","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"GitHub\n\"GitHub

    \n

    \"NPM\"

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-tween
      • \n
    \n

    Be sure to run a new build after adding plugins to avoid any issues.

    \n
    \n

    This is a native wrapper around tween.js

    \n

    API

    \n

    It exports the same API as Tween.js

    \n

    For now grouping, chaining, repeating... are not supported. Just basic tweening.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-videoplayer":{"name":"@essent/nativescript-videoplayer","version":"5.0.0","license":"MIT","readme":"

    NativeScript Video Player

    \n

    \"npm

    \n

    A NativeScript plugin to provide the ability to play local and remote videos.

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    npm i @essent/nativescript-videoplayer

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android MediaPlayeriOS AVPlayer
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample\"Sample
    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:VideoPlayer=\"nativescript-videoplayer\">
            <StackLayout>

                <VideoPlayer:Video id=\"nativeVideoPlayer\"
                controls=\"true\" loop=\"true\" autoplay=\"false\" height=\"280\"
                src=\"~/videos/big_buck_bunny.mp4\" />

                <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

            </StackLayout>
    </Page>
    \n
    import { Video } from 'nativescript-videoplayer';

    const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
    // Setting event listeners on the Video
    video.on(Video.pausedEvent, () => {
      console.log('Video has been paused.');
    });

    video.on(Video.mutedEvent, () => {
      console.log('Video has been muted.');
    });

    // changing the src
    video.src = 'some video file or url';

    // set loop
    video.loop = false;
    \n

    Angular NativeScript Usage

    \n
    // somewhere at top of your component or bootstrap file
    import { registerElement } from \"nativescript-angular/element-registry\";
    import { Video } from 'nativescript-videoplayer';
    registerElement(\"VideoPlayer\", () => Video);
    // documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements
    \n

    With AngularNative you have to explicitly close all components so the correct template code is below.

    \n
      <VideoPlayer
          src=\"https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          autoplay=\"true\"
          height=\"300\"></VideoPlayer>
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    srcThe src file for the video. Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.
    autoplay - (boolean)Set if the video should start playing as soon as possible or to wait for user interaction.
    controls - (boolean)Set to use the native video player's media playback controls.
    muted - (boolean)Mutes the native video player.
    loop - (boolean)Sets the native video player to loop once playback has finished.
    fill - (boolean)If true, the aspect ratio of the video will not be honored and it will fill the entire space available.
    observeCurrentTime - (boolean)If true, currentTimeUpdated callback is possible.
    headers - (Map<string, string>)Set headers to add when loading a video from URL.
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    playStart playing the video.
    pausePause the video
    seekToTime(time: number)Seek the video to a time (milliseconds)
    getCurrentTimeReturns the current time in the video duration (milliseconds)
    getDurationReturns the current time in the video duration (milliseconds)
    destroyDestroy the video player and free resources
    mute(boolean)If true, mutes the video. If false, unmute the video.
    setVolume(volume: number)Set the volume - Must be between 0 and 1.
    ANDROID ONLY - stopStop the playback - this resets the player and remove the video src
    \n

    Observable Properties

    \n
      \n
    • currentTime() - Current time of video.
      • \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    errorEventThis event fires when an error in the source code is thrown.
    playbackReadyEventThis event fires when the video is ready.
    playbackStartEventThis event fires when video starts playback.
    seekToTimeCompleteEventThis event fires when seeking is complete.
    currentTimeUpdatedEventThis event fires when the current time of playing video is changed.
    finishedEventThis event fires when the video is complete.
    mutedEventThis event fires when video is muted.
    unmutedEventThis event fires when video is unmutedEvent.
    pausedEventThis event fires when video is paused.
    volumeSetEventThis event fires when the volume is set.
    \n

    iOS Logging

    \n

    When running the iOS Simulator, after playing a video the iOS system may write\nlog messages to the console every few seconds of the form

    \n
    [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
    \n

    They will continue being logged even after the video has been properly destroyed.\nThese messages can be safely ignored. To turn them off completely, run the following\ncommand in your shell before running tns run ios:

    \n
    export SIMCTL_CHILD_OS_ACTIVITY_MODE=\"disable\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twitterbang":{"name":"nativescript-twitterbang","version":"2.0.0","license":"MIT","readme":"

    README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nsjumioplugin":{"name":"nativescript-nsjumioplugin","version":"1.0.9","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-temp-sms":{"name":"nativescript-temp-sms","version":"1.0.2","license":"MIT","readme":"

    nativescript-temp-sms

    \n

    Sending sms without user interaction.

    \n

    var smsManager = android.telephony.SmsManager.getDefault();

    \n

    smsManager.sendTextMessage("0123232332",null,"Hello",null,null);

    \n

    (Optional) Prerequisites / Requirements

    \n

    To send sms without user interaction on Android your app must request permission to do so. The following must be in your app's AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.SEND_SMS\" />
    \n

    iOS sms feature will soon be implemented.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-temp-sms
    \n

    Usage

    \n

    To use the module you must first require() it from your project's node_modules directory:

    \n

    After you have a reference to the module you can then call the available methods.

    \n
    ```js\n\tvar temp = require( "nativescript-temp-sms" );\n\ttemp.sms(number,messageText);\n```\n
    \n

    Parameters:

    \n

    number: SMS number to use.

    \n

    messageText: String to send.

    \n

    License

    \n

    MIT, 2017

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-commons":{"name":"nativescript-nbmaterial-commons","version":"1.0.0","license":"Apache-2.0","readme":"

    Common library for nbmaterial packages

    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/detox":{"name":"@nativescript/detox","version":"1.0.1","license":"Apache-2.0","readme":"

    @nativescript/detox

    \n

    Easily add Detox end-to-end testing to your NativeScript apps!

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n
    \n

    Table of Contents

    \n
      \n
    1. Installation
      2. \n
    2. Global Setup
      3. \n
    3. Project Setup
      4. \n
    4. Usage
      5. \n
    5. Running Tests
      6. \n
    6. Troubleshooting
      7. \n
    \n

    Installation

    \n
    ns plugin add @nativescript/detox
    \n

    Global Setup

    \n

    The full setup requirements can be found here but the minimal setup steps are as follows:

    \n

    Install Detox command line tools (detox-cli)

    \n
    npm install -g detox-cli
    \n

    Install applesimutils (iOS)

    \n
    brew tap wix/brew
    brew install applesimutils
    \n

    Project Setup

    \n

    Install the Detox package to your NativeScript project

    \n
    npm install detox --save-dev
    \n

    Install Jest

    \n
    npm install jest jest-cli jest-circus --save-dev --no-package-lock
    \n

    Initialize Detox

    \n
    detox init -r jest
    \n

    If things go well, you should to have this set up:

    \n
      \n
    • An e2e/ folder in your project root
      • \n
    • An e2e/config.json file; example
      • \n
    • An e2e/environment.js file; example
      • \n
    • An e2e/firstTest.e2e.ts file with content similar to this.
      • \n
    \n

    There should also be a file called .detoxrc.json in your project root.

    \n

    Configure Detox

    \n

    Detox must be configued to know the location of the iOS and Android app binary as well as what emulator/simulator to use.

    \n

    Open .detoxrc.json and make the following modifications under apps and devices.

    \n
      \n
    • \n

      binaryPath: Specify the location of the app binary (probably something like below).

      \n
        \n
      • iOS: platforms/ios/build/Debug-iphonesimulator/[APP_NAME].app
        • \n
      • Android: platforms/android/app/build/outputs/apk/debug/app-debug.apk
        • \n
      \n
      • \n
    • \n

      build: Specify the build command for iOS and Android.

      \n
        \n
      • iOS: ns build ios
        • \n
      • Android: ns build android --detox
        • \n
      \n
      • \n
    • \n

      devices:

      \n
        \n
      • iOS: "type": "iPhone 11"
        • \n
      • Android: "avdName": "Pixel_4_API_30" (use emulator -list-avds to list Android emulators)
        • \n
      \n
      • \n
    \n

    Here is a full example of a Detox configuration:

    \n
    {
      \"testRunner\": \"jest\",
      \"runnerConfig\": \"e2e/config.json\",
      \"skipLegacyWorkersInjection\": true,
      \"apps\": {
    \t\"ios\": {
    \t\t\"type\": \"ios.app\",
    \t\t\"binaryPath\": \"platforms/ios/build/Debug-iphonesimulator/[APP_NAME].app\",
    \t\t\"build\": \"ns build ios\"
    \t},
    \t\"android\": {
    \t\t\"type\": \"android.apk\",
    \t\t\"binaryPath\": \"platforms/android/app/build/outputs/apk/debug/app-debug.apk\",
    \t\t\"build\": \"ns build android --detox\"
    \t}
      },
      \"devices\": {
    \t\"simulator\": {
    \t\t\"type\": \"ios.simulator\",
    \t\t\"device\": {
                \"type\": \"iPhone 11 Pro\"
    \t\t}
    \t},
    \t\"emulator\": {
    \t\t\"type\": \"android.emulator\",
    \t\t\"device\": {
    \t\t\t\"avdName\": \"Pixel_4_API_30\"
    \t\t}
    \t}
      },
      \"configurations\": {
        \"ios\": {
            \"device\": \"simulator\",
            \"app\": \"ios\"
        },
        \"android\": {
            \"device\": \"emulator\",
            \"app\": \"android\"
        }
      }
    }
    \n
    \n

    Note: A default NativeScript Android project uses 17 as the minimum SDK, but Detox requires >=21. Remove or modify the minSdkVersion in your App_Resources/Android/app.gradle.

    \n
    \n

    Add Resource ID (Android Only)

    \n

    In order to use the automationText property in NativeScript it must be enabled by adding a custom resource ID.

    \n

    Create a file called ids.xml in App_Resources/Android/src/main/res/values/ and add the following:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <item type=\"id\" name=\"nativescript_accessibility_id\"/>
    </resources>
    \n

    Allow Local Networking (iOS Only)

    \n

    Dependending on your setup iOS may not be able to communicate with Detox off the bat. In that case, you need to add the following to your Info.plist file to allow for local networking requests.

    \n
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsLocalNetworking</key>
        <true/>
    </dict>
    \n

    Usage

    \n

    Read through this tutorial written by Detox about writing your first test. Nearly all of the things specified towards React Native apps also apply to NativeScript apps.

    \n

    Get started by opening the default test scenario in e2e/firstTest.e2e.js.

    \n
    describe('Example', () => {
    \tbeforeEach(async () => {
    \t\tawait device.reloadReactNative();
    \t});

    \tit('should have welcome screen', async () => {
    \t\tawait expect(element(by.text('Sergio'))).toBeVisible();
    \t});
    });
    \n

    This example creates a testing scenario called Example and has a single test inside of it called should have welcome screen.

    \n

    Matchers

    \n

    Detox uses matchers to find elements in your UI to interact with.

    \n

    You can use NativeScript's automationText property to find your UI elements using Detox's by.id() matcher.

    \n

    Example:

    \n
    <Button text=\"Tap Me!\" automationText=\"testButton\"></Button>
    \n
    await element(by.id('testButton')).tap();
    \n

    Actions

    \n

    Once you find your UI element you can use an action on it such as tap() to simulate user interaction.

    \n

    You should now be able to write tests to simulate user behavior and test for expected results.

    \n

    Running Tests

    \n

    Building

    \n

    Build your app for testing using the following command:

    \n
    detox build -c ios|android
    \n

    Testing

    \n

    Run your tests with the folling command:

    \n
    detox test -c ios|android
    \n

    NOTE: If using an Android emulator, Detox will disable animations when the tests are ran. Animations will remain disabled after they are finished. This can be very annoying when you are actively developing. You can re-enable animations by running this helper script from your project's directory ./node_modules/.bin/enable-animations.

    \n

    To make this even easier I would suggest adding these scripts to your package.json.

    \n
    {
    \t\"scripts\": {
    \t\t\"e2e:android:build\": \"detox build -c android\",
    \t\t\"e2e:android:test\": \"detox test -c android && ./node_modules/.bin/enable-animations\",
    \t\t\"e2e:ios:build\": \"detox build -c ios\",
    \t\t\"e2e:ios:test\": \"detox test -c ios\"
    \t}
    }
    \n

    Now to build and run tests you would run:

    \n

    Android:

    \n
    npm run e2e:android:build
    npm run e2e:android:test
    \n

    iOS:

    \n
    npm run e2e:ios:build
    npm run e2e:ios:test
    \n

    Troubleshooting

    \n

    Detox requires a minimum SDK version of 21, so if you get the following error, change the minSdkVersion to 21 in App_Resources/Android/app.gradle.

    \n
    Execution failed for task ':app:processDebugAndroidTestManifest'.
    Manifest merger failed : uses-sdk:minSdkVersion 17 cannot be smaller than version 18 declared in library [com.wix:detox:17.6.1] /Users/user/.gradle/caches/transforms-2/files-2.1/91a3acd87d710d1913b266ac114d7001/jetified-detox-17.6.1/AndroidManifest.xml as the library might be using APIs not available in 17
            Suggestion: use a compatible library with a minSdk of at most 17,
                    or increase this project's minSdk version to at least 21,
                    or use tools:overrideLibrary=\"com.wix.detox\" to force usage (may lead to runtime failures)

    Command ./gradlew failed with exit code 1
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-here":{"name":"nativescript-here","version":"0.0.1","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"\n\"Build

    \n

    NativeScript Here

    \n

    Prerequisites

    \n

    You need a Here APP ID & APP Code so sign up with Here. Once you've registered go to your Project > (Your Project Name) > Generate `Keys for your Starter SDKs.

    \n

    Installation

    \n
    tns plugin add nativescript-here
    \n

    Android

    \n

    Add the following to your ApplicationManifest.xml anywhere after your application opening tag an before it's closing

    \n

    <meta-data android:name=\"com.here.android.maps.appid\" android:value=\"YOUR_APP_ID\"/>
    <meta-data android:name=\"com.here.android.maps.apptoken\" android:value=\"YOUR_APP_CODE\"/>
    \t\t
    \n

    IOS

    \n

    Place the following in your app.ts , app.js or main.ts

    \n
    import { Here } from 'nativescript-here';

    import * as application from 'tns-core-modules/application';
    import { Here } from 'nativescript-here';

    application.on('launch', () => {
        Here.init('APP_ID', 'APP_CODE');
    });
    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:map="nativescript-here" on the Page element

    \n
    <map:Here mapStyle=\"hybrid_day\" mapReady=\"onMapReady\" row=\"3\" id=\"map\" zoomLevel=\"12\"  disableZoom=\"false\" disableScroll=\"false\" latitude=\"10.6689243\" longitude=\"-61.5315486\"/>
    \n
    import { HereMarker } from 'nativescript-here';
    export function onMapReady(event){
        const map = event.object;
            map.addMarkers(<HereMarker[]>[{
                id: 1,
                latitude: 10.6689243,
                longitude: -61.5315486,
                title: 'Home',
                description: 'Hmmm ... 🤔',
                draggable: true,
                onTap: (marker) => {
                    const updatedMarker = Object.assign({}, marker, {
                        selected: !marker.selected
                    });
                    map.updateMarker(updatedMarker);
                }
            }]);
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    mapStylenormal_day
    latitude0Set the center of the map by passing this in
    longitude0.. and this as well
    zoomLevel0
    mapReady-The name of a callback function you can declare to interact with the map after it has been drawn
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-telerik-analytics":{"name":"nativescript-telerik-analytics","version":"1.0.8","license":"See LICENSE file","readme":"

    Telerik Analytics Plugin for NativeScript

    \n\n

    Getting started

    \n
      \n
    1. \n

      Obtain an AppId

      \n

      Create a new application in Telerik Platform by choosing the Native application type.

      \n
      2. \n
    2. \n

      Enable Analytics

      \n

      Select Analytics from the left navigation menu and click Enable Analytics.

      \n
      3. \n
    3. \n

      Create a new NativeScript application

      \n
       tns create MyApp\n
      \n

      or use an existing one.

      \n
      4. \n
    4. \n

      Add the Analytics plugin (from npm). This will install the nativescript-telerik-analytics plugin in node_modules in the root of the project. When adding a new platform (or using an existing one) the plugin will be added there as well. Go to the application folder and add the Analytics plugin:

      \n
       tns plugin add nativescript-telerik-analytics\n
      \n
      5. \n
    5. \n

      Go to the application folder and add the Android (or iOS) platform to the application:

      \n
       tns platform add android\n
      \n
      6. \n
    6. \n

      Initialize the plugin and start a new session in the onLaunch event (app.js):

      \n
      var application = require('application');
      application.mainModule = 'main-page';
      application.cssFile = './app.css';

      application.on(application.launchEvent, function(context) {
          var Analytics = require('nativescript-telerik-analytics');
          Analytics.init({ appId: 'oamq6lixk0rak4dl' });
          Analytics.start();
      });

      application.start();
      \n
      7. \n
    7. \n

      Track some events in your application:

      \n
      var Analytics = require('nativescript-telerik-analytics'),
          timer = require('timer');

      Analytics.trackEvent('MyCategory.MyEvent');

      Analytics.trackValue('myvalue', 245);

      var timingScope = Analytics.trackTimingStart('mytiming');
      timer.setTimeout(function() {
          timingScope.stop(); // or timingScope.cancel(); if you want to ignore the timing
      }, 3500);

      Analytics.trackTimingRaw('myrawtiming', 1300); // track timing of 1300 ms

      try {
          throw new Error('error message');
      } catch (e) {
          Analytics.trackException(e, 'some error context');
      }
      \n
      8. \n
    8. \n

      Attach your phone to the PC, ensure adb devices command lists it and run the app on the phone:

      \n
       tns run android\n
      \n
      9. \n
    \n

    API

    \n

    To use the Analytics plugin you need to require the nativescript-telerik-analytics module:

    \n
    var Analytics = require('nativescript-telerik-analytics');
    \n

    And then call any of the available methods on it:

    \n
      \n
    • \n

      init(settings) - used to initialize the plugin with different configuration options. This method must be called before starting a new session or tracking events. It is the first method that needs to be called.

      \n
      var settings = {
          appId: 'oamq6lixk0rak4dl', // Required identifier of the application obtained in Telerik Platform
          productVersion: '1.2.3.4', // Optional - the version of the monitored application
          location: { // optionally associate some geo location coordinates with the user 
              latitude: 40.719618,
              longitude: -74.010282
          },
          clientIP: '193.42.34.123', // optionally override the IP of the user
          isInternalData: false, // Optional flag allowing to enable test mode for this session. This will mark all events tracked in this particular session as \"Internal\"
          autoTrackUnhandledExceptions: false, // Optionally turn off automatic exception handling. The default value is true. The plugin subscribes to the \"application.uncaughtErrorEvent\" and automatically tracks the exception
          logger: new MyLogger() // Optionally specify a custom logger. This should be an instance of a class with info(message, obj) and error(message, obj) functions.
      };
      Analytics.init(settings);
      \n
      • \n
    • \n

      start() - starts a new Analytics session. The SDK needs to be initialized with the init method prior to calling this method.

      \n
      Analytics.start();
      \n
      • \n
    • \n

      trackEvent(name) - registers a feature usage. It is recommended that related features are grouped by using simple dot-notation in the name such as e.g. relating print to pdf and print to file by naming the features "print.pdf" and "print.file" respectively

      \n
      Analytics.trackEvent('Printing.PDF');
      \n
      • \n
    • \n

      trackValue(name, value) - register a value on a specific feature. While calls to trackEvent increments the use of a feature in the session a call to this methods will associate a given value with a named feature. Use this method to e.g. track the distribution of file sizes imported or the number of results registered. Tracking this distribution across all your application usage will give insights to what scenarios your applications are handling. The value parameter must be a valid integer.

      \n
      Analytics.trackValue('FilesProcessed', 152);
      \n
      • \n
    • \n

      trackException(e, context) - Call to track an exception that occurred in the application. An optional context string can be associated with the exception.

      \n
      try {
          throw new Error('error message');
      } catch (e) {
          Analytics.trackException(e, 'some optional context');
      }
      \n
      • \n
    • \n

      trackTimingStart(name) - Starts a named timer for measuring elapsed time on operation and returns a scope that can be used to stop or cancel the timing operation.

      \n
      var timer = require('timer'),
          timingScope = Analytics.trackTimingStart('MyTiming');
      timer.setTimeout(function() {
          timingScope.stop(); // at this stage the timer will be stopped and the elapsed time submitted to Analytics in milliseconds. You can abort the timing operation by calling timingScope.cancel();  
      }, 1450);
      \n
      • \n
    • \n

      trackTimingRaw(name, durationInMilliseconds) - Registers elapsed time measured by some other means.

      \n
      Analytics.trackTimingRaw('MyTiming', 563);
      \n
      • \n
    \n

    Troubleshooting

    \n

    In case the application doesn't work as expected, here are some things you can verify:

    \n
      \n
    • \n

      For Android ensure that the AndroindManifest.xml located at platforms\\android contains the following permission:

      \n
      <uses-permission android:name=\"android.permission.INTERNET\"/>
      \n
      • \n
    • \n

      Enable logging to see if there are some information or error messages logged. You could enable logging by writing the following module (mylogger.js):

      \n
      (function(global) {
          var MyLogger = function() {
          };

          exports = module.exports = MyLogger;

          MyLogger.prototype.info = function(message, obj) {
              console.log('INFO: ' + message + (obj ? ' : ' + JSON.stringify(obj) : ''));
          };

          MyLogger.prototype.error = function(message, obj) {
              if (obj instanceof Error) {
                  console.log('ERROR: ' + message + (obj ? ' : ' + obj.message : ''));
              } else {
                  console.log('ERROR: ' + message + (obj ? ' : ' + JSON.stringify(obj) : ''));
              }
          };
      }(this || global));
      \n

      and then set this logger when initializing the plugin:

      \n
      var Analytics = require('nativescript-telerik-analytics'),
          MyLogger  = require('./mylogger');

      Analytics.init({
          appId : 'oamq6lixk0rak4dl',
          logger: new MyLogger()
      });
      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-indicator-new":{"name":"nativescript-loading-indicator-new","version":"2.1.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-loading-indicator-new/blob/master/LICENSE"},"readme":"

    nativescript-loading-indicator-new

    \n

    Note: this plugin is not being actively maintained.

    \n

    nativescript-loading-indicator-new is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

    \n

    Under the hood, we use MBProgressHUD on iOS, and ProgressDialog on Android.

    \n

    Installation

    \n
    tns plugin add nativescript-loading-indicator-new
    \n

    Example

    \n
    var LoadingIndicator = require(\"nativescript-loading-indicator-new\").LoadingIndicator;

    // or with TypeScript:
    // import {LoadingIndicator} from \"nativescript-loading-indicator-new\";

    var loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    var options = {
      message: 'Loading...',
      progress: 0.65,
      android: {
        indeterminate: true,
        cancelable: false,
        max: 100,
        progressNumberFormat: \"%1d/%2d\",
        progressPercentFormat: 0.53,
        progressStyle: 1,
        secondaryProgress: 1
      },
      ios: {
        details: \"Additional detail note!\",
        square: false,
        margin: 10,
        dimBackground: true,
        color: \"#4B9ED6\",
        mode: // see iOS specific options below
      }
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Options

    \n
      \n
    • message: string Your message!
      • \n
    • progress: number Set progress display
      • \n
    \n

    Android Specific

    \n
      \n
    • Reference: http://developer.android.com/intl/zh-tw/reference/android/app/ProgressDialog.html
      • \n
    \n

    iOS Specific

    \n
      \n
    • Reference: https://github.com/jdg/MBProgressHUD/blob/master/Demo/Classes/MBHudDemoViewController.m
      • \n
    \n

    Quick Mode Reference:

    \n
      \n
    • MBProgressHUDModeDeterminate
      • \n
    • MBProgressHUDModeAnnularDeterminate
      • \n
    • MBProgressHUDModeDeterminateHorizontalBar
      • \n
    • MBProgressHUDModeText
      • \n
    • MBProgressHUDModeCustomView\n
        \n
      • use with customView: string - local path to an image file
        • \n
      \n
      • \n
    \n

    Screenshots

    \n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-environment":{"name":"nativescript-app-environment","version":"1.0.0","license":"MIT","readme":"

    nativescript-app-environment

    \n

    Add environment variables into your app from the nativescript-cli

    \n

    Creates app/environment.json from the nativescript-cli command via argv --env.app

    \n

    Install

    \n
    tns plugin add nativescript-app-environment
    \n

    Usage

    \n
      \n
    • \n

      Set production mode in tns run:

      \n
        tns run android --env.app.prod
      \n

      This will create environment.json with this content:

      \n
      { prod: true }
      \n
      • \n
    • \n

      in app

      \n
      const { environment } = require('./environment.json');

      console.log(environment);
      \n
      • \n
    • \n

      Inspired by nativescript-hook-debug-production

      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-facebook-login":{"name":"@bigin/ns-facebook-login","version":"1.0.10","license":"Apache-2.0","readme":"

    @bigin/ns-facebook-login

    \n

    This plugin is based on nativescript-facebook. We just upgraded to NS7 and add some tweaks to make it works.

    \n\n\n\n

    Installation

    \n
    ns plugin add @bigin/ns-facebook-login
    \n

    Configuration

    \n

    Android

    \n

    Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put provider under <application>
    \n{facebook_app_id} is your app id

    \n
    <provider android:authorities=\"com.facebook.app.FacebookContentProvider{facebook_app_id}\"
    \t\t\t\t  android:name=\"com.facebook.FacebookContentProvider\"
    \t\t\t\t  android:exported=\"true\"/>
    \n

    iOS

    \n

    Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains CFBundleURLTypes and LSApplicationQueriesSchemes like below:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
        <dict>
        ...

            <key>CFBundleURLTypes</key>
            <array>
                <dict>
                    <key>CFBundleURLSchemes</key>
                    <array>
                        <string>fb{facebook_app_id}</string>
                    </array>
                </dict>
            </array>
    \t\t<key>LSApplicationQueriesSchemes</key>
            <array>
                <string>fbapi</string>
                <string>fb-messenger-share-api</string>
                <string>fbauth2</string>
                <string>fbshareextension</string>
            </array>
        </dict>
    </plist>
    \n
    \n

    Make sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found here.

    \n
    \n

    Usage

    \n

    NativeScript Core

    \n

    Initialization

    \n

    Call init of nativescript-facebook module on application launch.

    \n

    app.ts

    \n
    import * as application from 'application';
    import { init } from \"nativescript-facebook\";

    application.on(application.launchEvent, function (args) {
        init(\"{facebook_app_id}\");
    });

    application.start({ moduleName: \"login-page\" });
    \n

    Login

    \n

    Facebook Login Button

    \n

    Add Facebook login button as simple as adding a Facebook:LoginButton tag in your view. Then you can define login event handler name. In the example below - onLogin.

    \n

    login-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Facebook:LoginButton login=\"{{ onLogin }}\"></Facebook:LoginButton>

        ...

    </Page>
    \n

    Implement onLogin event handler in your view-model. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

    \n

    login-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { Facebook:LoginButton } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      onLogin(eventData: LoginEventData) {
        if (eventData.error) {
          alert(\"Error during login: \" + eventData.error.message);
        } else {
          console.log(eventData.loginResponse.token);
        }
      }
    }
    \n

    Custom Login Button

    \n

    Add a button and define a tap event handler in your login view.

    \n

    login-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Button tap=\"{{ login }}\" text=\"Log in (custom)\"></Button>

        ...

    </Page>
    \n

    In the view model implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin. In the example below the login method from the plugin is imported as fbLogin.

    \n
    \n

    BEST PRACTICE:\nImport only the methods that you need instead of the entire file. It is crucial when you bundle your app with webpack.

    \n
    \n

    login-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { login as fbLogin } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      login() {
        fbLogin((err, fbData) => {
          if (err) {
            alert(\"Error during login: \" + err.message);
          } else {
            console.log(fbData.token);
          }
        });
      }

    }
    \n

    Log out

    \n

    Facebook Logout Button

    \n

    Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your view. Then you can define logout event handler name. In the example below - onLogout.

    \n

    home-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Facebook:LoginButton logout=\"{{ onLogout }}\"></Facebook:LoginButton>

        ...

    </Page>
    \n

    Implement onLogout event handler in your view-model.

    \n

    home-view-model.ts

    \n
    import { Observable } from 'data/observable';

    export class HomeViewModel extends Observable {

      onLogout() {
        console.log(\"logged out\");
      }

    }
    \n

    Custom Logout Button

    \n

    Add a button and define a tap event handler in your view. In this case - logout

    \n

    home-page.xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:Facebook=\"nativescript-facebook\"
      loaded=\"pageLoaded\" class=\"page\">

        ...

        <Button tap=\"{{ logout }}\" text=\"Log out (custom)\"></Button>

        ...

    </Page>
    \n

    In the view model implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

    \n

    home-view-model.ts

    \n
    import { Observable } from 'data/observable';
    import { logout as fbLogout } from \"nativescript-facebook\";

    export class LoginViewModel extends Observable {

      logout() {
        fbLogout(() => {
          console.log(\"logged out\");
        });
      }

    }
    \n

    Share

    \n

    Create Sharing Content

    \n

    For sharing, you have to create sharing content first.\nCurrently the available content types are:

    \n
      \n
    • createShareLinksContent(link: string, quote?: string, addition?: ShareAdditionContent) available for every condition
      • \n
    • createSharePhotosContent(images: ImageSource[] | string[], userGenerated: boolean, addition?: ShareAdditionContent) available for ShareButton and showShareDialog ( only when user have native Facebook installed, version 7.0 or higher )
      • \n
    • createShareMessageGenericTemplateContent(contentConfig: MessageGenericTemplateContent) available for SendButton and showMessageDialog
      • \n
    • createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent) available for SendButton and showMessageDialog
      • \n
    \n

    You can see more information from https://developers.facebook.com/docs/sharing/overview#content and https://developers.facebook.com/docs/sharing/messenger#share-types

    \n
    import {
        LoginEventData,
        getCurrentAccessToken,
        createShareLinksContent,
        createSharePhotosContent,
        createShareMessageGenericTemplateContent,
        MessageGenericTemplateImageAspectRatio,
        showShareDialog,
        showMessageDialog,
        canShareDialogShow,
        canMessageDialogShow
    } from 'nativescript-facebook';

    const linkContent = createShareLinksContent('https://www.nativescript.org',
                'Create Native iOS and Android Apps With JavaScript',
                {
                    hashtag: '#Nativescript'
                });

    // you can also pass in imageUrls as string[] in here
    const logoImage = fromResource('logo');
    const photosContent = createSharePhotosContent([logoImage], false, {
                  hashtag: '#Nativescript'
              });
    const GenericTemplate = createShareMessageGenericTemplateContent({
                element: {
                    title: 'Nativescript',
                    subtitle: 'Create Native iOS and Android Apps With JavaScript',
                    imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
                    button: {
                        title: 'Check Doc',
                        url: 'https://docs.nativescript.org'
                    },
                    defaultAction: {
                        title: 'Go HomePage',
                        url: 'https://www.nativescript.org'
                    }
                },
                // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
                pageID: 'testestsett',
                imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
            });
    \n

    Facebook Share Button

    \n
    <Facebook:ShareButton content=\"{{ linkContent }}\"></Facebook:ShareButton>
    \n

    Facebook Send Button

    \n

    If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

    \n
    <Facebook:SendButton content=\"{{ genericContent }}\"></Facebook:SendButton>
    \n

    Show Share Dialog Programmatically

    \n

    Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

    \n
    showShareDialog(this.linkContent);
    showMessageDialog(this.linkContent);
    showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
        if(!error){
            console.log(result.android); // com.facebook.share.Sharer.Result
            console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
        }
    });
    \n

    Hide Custom Button If Can't share

    \n

    You can use this method to check if the content can be shared and hide the custom button if can't

    \n
    public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
    public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
    \n
    <Button tap=\"{{ onShareDialogPhotos }}\" text=\"Open Share dialog (photos)\" visibility=\"{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}\"></Button>
    <Button tap=\"{{ onSendGenericDialog }}\" text=\"Share Message Generic Template\" visibility=\"{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}\"></Button>
    \n

    NativeScript Angular

    \n

    Initialization

    \n

    Call init of nativescript-facebook module on application launch.

    \n

    app.module.ts

    \n
    ...
    import * as application from 'application';
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NativeScriptFacebookModule } from \"nativescript-facebook/angular\";

    let nsFacebook = require('nativescript-facebook');

    application.on(application.launchEvent, function (args) {
        nsFacebook.init(\"{facebook_app_id}\");
    });
    ...
    @NgModule({
        ...
        imports: [
            AppRoutingModule,
            NativeScriptModule,
            NativeScriptFacebookModule,
            ...
        ],
        ...
    })
    ...
    \n

    Login

    \n

    Facebook Login Button

    \n

    Add Facebook login button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define login event handler name. In the example below - onLogin. Bare in mind the $event argument.

    \n

    pages/login/login.component.html

    \n
    <StackLayout>
    \t<FacebookLoginButton (login)=\"onLogin($event)\"></FacebookLoginButton>
    </StackLayout>
    \n

    Implement onLogin event handler in your component. It receives an argument from type LoginEventData. Currently LoginEventData object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.

    \n

    pages/login/login.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"login\",
        templateUrl: \"login.component.html\",
    })
    export class LoginComponent {
        onLogin(eventData: Facebook.LoginEventData) {
            if (eventData.error) {
                alert(\"Error during login: \" + eventData.error);
            } else {
                console.log(eventData.loginResponse.token);
            }
        }
    }
    \n

    Custom Login Button

    \n

    Add a button and define a tap event handler in your login component html.

    \n

    pages/login/login.component.html

    \n
    <StackLayout>
    \t<button text=\"Login Button (custom)\" (tap)=\"login()\"></button>
    </StackLayout>
    \n

    In the component implement the tap event handler in this case login method. It just has to call the login method that comes from the plugin.

    \n

    pages/login/login.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"login\",
        templateUrl: \"login.component.html\",
    })
    export class LoginComponent {
        login() {
            Facebook.login((error, fbData) => {
                if (error) {
                    alert(\"Error during login: \" + error.message);
                } else {
                    console.log(fbData.token);
                }
            });
        }
    }
    \n

    Logout

    \n

    Facebook Logout Button

    \n

    Add Facebook logout button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define logout event handler name. In the example below - onLogout. Bare in mind the $event argument.

    \n

    pages/home/home.component.html

    \n
    <StackLayout>
    \t<FacebookLoginButton (logout)=\"onLogout($event)\"></FacebookLoginButton>
    </StackLayout>
    \n

    Implement onLogout event handler.

    \n

    pages/home/home.component.ts

    \n
    import { Component } from \"@angular/core\";
    import * as Facebook from \"nativescript-facebook\";

    @Component({
        selector: \"home\",
        templateUrl: \"home.component.html\",
    })
    export class HomeComponent {
        onLogout(eventData: Facebook.LoginEventData) {
            if (eventData.error) {
                alert(\"Error during login: \" + eventData.error);
            } else {
                console.log(\"logged out\");
            }
        }
    }
    \n

    Custom Logout Button

    \n

    Add a button and define a tap event handler in your view. In this case - logout

    \n

    pages/home/home.component.html

    \n
    <StackLayout>
    \t<button text=\"Log out (custom)\" (tap)=\"logout()\"></button>
    </StackLayout>
    \n

    In the component implement the tap event handler in this case logout method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.

    \n

    pages/home/home.component.ts

    \n
    import { Component } from \"@angular/core\";
    import { logout as fbLogout } from \"nativescript-facebook\";

    @Component({
        selector: \"home\",
        templateUrl: \"home.component.html\",
    })
    export class AppComponent {
      logout() {
        fbLogout(() => {
          console.log(\"logged out\");
        });
      }
    }
    \n

    Share

    \n

    Create Sharing Content

    \n

    Read Nativescript chapter for this

    \n

    Facebook Share Button

    \n
    <FacebookShareButton [content]=\"linkContent\"></FacebookShareButton>
    \n

    Facebook Send Button

    \n

    If the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.

    \n
    <FacebookSendButton [content]=\"genericContent\"></FacebookSendButton>
    \n

    Show Share Dialog Programmatically

    \n

    Note The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)

    \n
    showShareDialog(this.linkContent);
    showMessageDialog(this.linkContent);
    showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
        if(!error){
            console.log(result.android); // com.facebook.share.Sharer.Result
            console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
        }
    });
    \n

    Hide Custom Button If Can't share

    \n

    You can use this method to check if the content can be shared and hide the custom button if can't

    \n
    public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
    public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
    \n
    <button (tap)=\"onShareDialogPhotos()\" text=\"Open Share dialog (photos)\" *ngIf=\"canShowPhotosShareDialog\"></button> <button (tap)=\"onSendGenericDialog()\" text=\"Share Message Generic Template\" *ngIf=\"canShowGenericMessageDialog\"></button>
    \n

    Login Response

    \n

    The callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    tokenaccess token which will be used for further authentications
    \n

    Get Current Access Token

    \n

    The plugin allows to get the current access token, if any, via getCurrentAccessToken() method.

    \n

    Basic Analytics

    \n

    The plugin allows to log analytics events. At the initialization of the application you need to init analytics:

    \n
    application.on(application.launchEvent, function (args) {
        nsFacebook.init(\"{facebook_app_id}\");
        nsFacebook.initAnalytics();
    });
    \n

    Events logging:

    \n
    nsFacebook.logEvent('Lead');
    \n

    Logging event with parameters:

    \n
    const value = 5;
    const parameters = [{
        key: 'value',
        value: value.toString(),
    }];

    nsFacebook.logEvent(FundsAdded, parameters);
    \n

    Graph API Example

    \n

    Once the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.

    \n
      \n
    1. Get Facebook id of the logged in user
      2. \n
    2. Get the logged in user avatar (this is kind of workaround of this NativeScript issue. #2176)
      3. \n
    \n
    export class HomeComponent {
        accessToken: string = appSettings.getString(\"access_token\");
        userId: string;
        username: string;
        avatarUrl: string;

        constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
            // Get logged in user's info
            http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/me?access_token=\" + this.accessToken).then((res) => {
                this.username = res.name;
                this.userId = res.id;

                // Get logged in user'    s avatar
                // ref: https://github.com/NativeScript/NativeScript/issues/2176
                http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/\" + this.userId + \"/picture?type=large&redirect=false&access_token=\" + this.accessToken).then((res) => {
                    this.avatarUrl = res.data.url;
                    this.ref.detectChanges();
                }, function (err) {
                    alert(\"Error getting user info: \" + err);
                });
            }, function (err) {
                alert(\"Error getting user info: \" + err);
            });
        }
    \n

    This sample is part of the demo apps and can be observed here for Nativescript Code and here for NativeScript + Angular.

    \n

    Release notes

    \n

    Check out release notes here

    \n

    FAQ

    \n

    Check out our FAQ section here.

    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Get Help

    \n

    Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

    \n

    \"\"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-proximiio-unified-maps":{"name":"nativescript-proximiio-unified-maps","version":"1.0.8","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-root-detection":{"name":"nativescript-root-detection","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Root Detection

    \n

    A NativeScript module for detecting root on Android and JailBroken on iOS

    \n

    Installation

    \n

    From the command prompt of your app's root folder, execute the following

    \n
    tns plugin add nativescript-root-detection
    \n

    Usage

    \n

    To use the plugin do the following

    \n
    \timport {RootDetection} from 'nativescript-root-detection';
    \t.....
    \tconst rooted = RootDetection.isDeviceRooted();
    \tif(rooted) {
    \t    // Any logic that you need
    \t}
    \n

    Android Detection

    \n

    For Android the following library is used for detection

    \n

    https://github.com/scottyab/rootbeer

    \n

    iOS Detection

    \n

    For iOS the following paths are checked, if any are present the device is deemed to be JailBroken

    \n
      \n
    • "/Applications/Cydia.app",
      • \n
    • "/Applications/blackra1n.app",
      • \n
    • "/Applications/FakeCarrier.app",
      • \n
    • "/Applications/Icy.app",
      • \n
    • "/Applications/IntelliScreen.app",
      • \n
    • "/Applications/MxTube.app",
      • \n
    • "/Applications/RockApp.app",
      • \n
    • "/Applications/SBSettings.app",
      • \n
    • "/Applications/WinterBoard.app",
      • \n
    • "/Library/MobileSubstrate/DynamicLibraries/LiveClock.plist",
      • \n
    • "/Library/MobileSubstrate/DynamicLibraries/Veency.plist",
      • \n
    • "/private/var/lib/apt",
      • \n
    • "/private/var/lib/cydia",
      • \n
    • "/private/var/mobile/Library/SBSettings/Themes",
      • \n
    • "/private/var/stash",
      • \n
    • "/private/var/tmp/cydia.log",
      • \n
    • "/System/Library/LaunchDaemons/com.ikey.bbot.plist",
      • \n
    • "/System/Library/LaunchDaemons/com.saurik.Cydia.Startup.plist",
      • \n
    • "/usr/bin/sshd",
      • \n
    • "/usr/libexec/sftp-server",
      • \n
    • "/usr/sbin/sshd"
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elm-nativescript":{"name":"elm-nativescript","version":"0.0.3","license":"MIT","readme":"

    Svelte Native

    \n

    Create Mobile applications using native widgets via Svelte and NativeScript.

    \n

    See https://svelte-native.technology for docs and tutorials

    \n

    \"todo

    \n

    Features

    \n

    Svelte-Native includes Svelte specific integrations such as

    \n
      \n
    • The ability to use svelte components to create native applications on top of NativeScript core
      • \n
    • Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
      • \n
    • Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
      • \n
    • Integration with sveltes scoped styles
      • \n
    • Complete coverage of the Nativescript core UI modules
      • \n
    • Uses unmodified Svelte and Nativescript modules
      • \n
    \n

    Work In Progress

    \n

    While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

    \n
      \n
    • [x] At least 1 emoji in readme.md :+1:
      • \n
    • [ ] More Tests 😳 #54
      • \n
    \n

    Installation

    \n

    You can get started developing with this using the latest template

    \n
    $ npm install -g nativescript
    $ tns create myapp --template @nativescript/template-blank-svelte
    \n

    A fresh Svelte Native app will be found in the myapp folder

    \n

    Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

    \n

    Usage

    \n

    App.svelte

    \n
    <page>
        <actionBar title=\"Svelte Native\"></actionBar>
        <stackLayout>
            <label text={msg}></label>
            <button text=\"Change\" on:tap=\"{toggle}\"></button>
        </stackLayout>
    </page>

    <script>
      export let msg = 'Hello World!'
      const toggle = () => {
          msg = \"Hi from svelte\"
      }
    </script>
    \n

    Main.ts

    \n
    import App from './components/App.svelte';

    import { svelteNative } from 'svelte-native'

    svelteNative(App, {msg: \"Hi from launcher\"});
    \n

    Examples

    \n

    Svelte Native HackerNews

    \n

    Simple HackerNews client in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-hackernews for the repo.

    \n

    \"HackerNews

    \n

    Svelte Native Grocery

    \n

    Grocery app example in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-grocery for the repo.

    \n

    \"Grocery

    \n

    Svelte Native Realworld

    \n

    Realworld implementation app in Svelte Native.

    \n

    See https://github.com/halfnelson/svelte-native-realworld for the repo.

    \n

    \"Realworld

    \n

    Credits

    \n

    The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@danvick/ngx-translate-nativescript-loader":{"name":"@danvick/ngx-translate-nativescript-loader","version":"3.0.1","license":"MIT","readme":"

    Description

    \n

    A loader for ngx-translate that loads localally stored translations for NativeScript.

    \n\n\n \"Version\"\n\n\n\t\"Size\"\n\n\n\"Downloads\"\n\n\n

    Installation:

    \n
    npm i @ngx-translate/core --save
    npm i @danvick/ngx-translate-nativescript-loader --save
    \n

    Usage:

    \n
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { NativeScriptLoader } from '@danvick/ngx-translate-nativescript-loader';

    export function createTranslateLoader() {
        return new NativeScriptLoader(\"./assets/i18n/\", \".json\");
    }

    @NgModule({
    \timports: [
    \t\tNativeScriptModule,
    \t\tTranslateModule.forRoot({
    \t\t\tloader: {
    \t\t\t\tprovide: TranslateLoader,
    \t\t\t\tuseFactory: createTranslateLoader
    \t\t\t}
    \t\t})
    \t],
    \tbootstrap: [AppComponent]
    })
    export class AppModule { }
    \n

    The assumed default location for your translation is ./assets/i18n/ and default assumed format extesion is .json.\nSo you could ignore the arguments all together and have your createTranslateLoader() function as:

    \n
    export function createTranslateLoader() {
        return new NativeScriptLoader();
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-core":{"name":"nativescript-material-core","version":"3.3.2","license":"Apache-2.0","readme":"

    Nativescript Material Core

    \n

    Core module for all Nativescript material components

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar-swift-3.2":{"name":"nativescript-linearprogressbar-swift-3.2","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Linear Progress Bar

    \n

    A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
    \nThe ios implemention uses Philippe Boisney's linear progress bar .

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-linearprogressbar
      • \n
    \n

    Vanilla NativeScript

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:Bar=\"nativescript-linearprogressbar\">
      <StackLayout>
        <Bar:Linearprogressbar indeterminate=\"true\" />
      </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n
    import { registerElement } from 'nativescript-angular/element-registry';

    registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
    \n
    <LinearProgressBar indeterminate=\"true\">
    </LinearProgressBar>
    \n

    Attributes

    \n
      \n
    • indeterminate - [boolean] if true, the bar will load indeterminately
      • \n
    • barColor - [string] sets the loading bar color with an hexadecimal color code
      • \n
    \n

    Version

    \n

    1.0

    \n

    Author

    \n

    slanca (npmdroid(@)gmail.com)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-sqlite":{"name":"@testjg/nativescript-sqlite","version":"1.0.0","license":"Apache-2.0","readme":"

    @testjg/nativescript-sqlite

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-sqlite
    \n

    Usage

    \n

    You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

    \n
    import { openOrCreate, deleteDatabase } from \"@testjg/nativescript-sqlite\";

    const sqlite = openOrCreate(\"path/to/db\");
    sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
    sqlite.transaction(cancelTransaction => {
        // Calling cancelTransaction will rollback all changes made to db
        names.forEach((name, id) =>
            sqlite.execute(
                \"INSERT INTO names (id, name) VALUES (?, ?)\",
                [id, name]
            )
        );
    });
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-execution":{"name":"nativescript-background-execution","version":"1.0.0","license":"MIT","readme":"

    Nativescript background execution

    \n

    Features

    \n
      \n
    • ES6/ESNext - Write ES6 code and Babel will transpile it to ES5 for backwards compatibility
      • \n
    • Test - Mocha with Istanbul coverage
      • \n
    • Lint - Preconfigured ESlint with Airbnb config
      • \n
    • CI - TravisCI configuration setup
      • \n
    • Minify - Built code will be minified for performance
      • \n
    \n

    Commands

    \n
      \n
    • npm run clean - Remove lib/ directory
      • \n
    • npm test - Run tests with linting and coverage results.
      • \n
    • npm test:only - Run tests without linting or coverage.
      • \n
    • npm test:watch - You can even re-run tests on file changes!
      • \n
    • npm test:prod - Run tests with minified code.
      • \n
    • npm run test:examples - Test written examples on pure JS for better understanding module usage.
      • \n
    • npm run lint - Run ESlint with airbnb-config
      • \n
    • npm run cover - Get coverage report for your code.
      • \n
    • npm run build - Babel will transpile ES6 => ES5 and minify the code.
      • \n
    • npm run prepublish - Hook for npm. Do all the checks before publishing your module.
      • \n
    \n

    License

    \n

    MIT © Cristian Pandele

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-indicator-ssi":{"name":"nativescript-loading-indicator-ssi","version":"2.5.2","license":"MIT","readme":"

    nativescript-loading-indicator

    \n

    nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

    \n\n

    Installation

    \n
    tns plugin add nativescript-loading-indicator
    \n

    Example

    \n
    var LoadingIndicator = require(\"nativescript-loading-indicator\").LoadingIndicator;

    // or with TypeScript:
    // import {LoadingIndicator} from \"nativescript-loading-indicator\";

    var loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    var options = {
      message: 'Loading...',
      progress: 0.65,
      android: {
        indeterminate: true,
        cancelable: false,
        max: 100,
        progressNumberFormat: \"%1d/%2d\",
        progressPercentFormat: 0.53,
        progressStyle: 1,
        secondaryProgress: 1
      },
      ios: {
        details: \"Additional detail note!\",
        margin: 10,
        dimBackground: true,
        color: \"#4B9ED6\", // color of indicator and labels
        // background box around indicator
        // hideBezel will override this if true
        backgroundColor: \"yellow\",
        hideBezel: true, // default false, can hide the surrounding bezel
        view: UIView, // Target view to show on top of (Defaults to entire window)
        mode: // see iOS specific options below
      }
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Options

    \n
      \n
    • message: string Your message!
      • \n
    • progress: number Set progress display
      • \n
    \n

    Android Specific

    \n
      \n
    • Reference: http://developer.android.com/intl/zh-tw/reference/android/app/ProgressDialog.html
      • \n
    \n

    iOS Specific

    \n
      \n
    • Reference: https://github.com/jdg/MBProgressHUD/blob/master/Demo/Classes/MBHudDemoViewController.m
      • \n
    \n

    Quick Mode Reference:

    \n
      \n
    • MBProgressHUDModeDeterminate
      • \n
    • MBProgressHUDModeAnnularDeterminate
      • \n
    • MBProgressHUDModeDeterminateHorizontalBar
      • \n
    • MBProgressHUDModeText
      • \n
    • MBProgressHUDModeCustomView\n
        \n
      • use with customView: string - local path to an image file
        • \n
      \n
      • \n
    \n

    Screenshots

    \n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@testjg/nativescript-datetimeselector":{"name":"@testjg/nativescript-datetimeselector","version":"1.0.0","license":"Apache-2.0","readme":"

    @testjg/nativescript-datetimeselector

    \n

    Installation

    \n
    ns plugin add @testjg/nativescript-datetimeselector
    \n

    Usage

    \n
    // Return Date with hours, minutes and seconds set to zero
    const date = await showDateSelector({ okText: 'ok', cancelText: 'cancel' });

    // Returns Date
    const dateTime = await showDateTimeSelector({ okText: 'ok', cancelText: 'cancel' });

    // Returns number of seconds
    const time = await showTimeSelector({ okText: 'ok', cancelText: 'cancel' });
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-filepicker":{"name":"nativescript-plugin-filepicker","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-plugin-filepicker

    \n

    Filepicker plugin supporting both single and multiple selection.\nFor Android, it uses Intents to open the stock file pickers. For Android 6 (API 23) and above the permissions to read file storage should be explicitly required. See demo for implementation details.

    \n

    For iOS, it uses stock UIDocumentPickerViewController for picking the file.

    \n

    Installation

    \n
    tns plugin add nativescript-plugin-filepicker
    \n

    Usage

    \n

    Create filepicker in single or multiple mode to specifiy if the filepicker will be used for single or multiple selection of files

    \n

    TypeScript

    \n
    let context = filepicker.create({
        mode: \"single\", // use \"multiple\" for multiple selection
         extensions: [\"pdf\", \"jpg\", \"doc\", \"docx\"]
    });
    \n

    Javascript

    \n
    var context = filepicker.create({ mode: \"single\" }); // use \"multiple\" for multiple selection
    \n

    Request permissions, show the file list and process the selection

    \n
    context
        .authorize()
        .then(function() {
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                // process the selected file
            });
        }).catch(function (e) {
            // process error
        });
    \n
    \n

    NOTE: To request permissions for Android 6+ (API 23+) we use nativescript-permissions.

    \n
    \n

    API

    \n

    Methods

    \n
      \n
    • create(options) - creates instance of the filepicker. Possible options are:
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptionPlatformDefaultDescription
    modebothmultipleThe mode if the filepicker. Possible values are single for single selection and multiple for multiple selection.
    extensionsbothFor iOS public.item and null(all files) for AndroidChoose whether file extension in array. eg. ["pdf", "doc"]
    showAdvancedAndroidfalseShow internal and removable storage options on Android (WARNING: not supported officially).
    \n

    The hostView parameter can be set to the view that hosts the file picker. Applicable in iOS only, intended to be used when open picker from a modal page.

    \n
      \n
    • authorize() - request the required permissions.
      • \n
    • present() - show the file picker to present the user the ability to select files. Returns an array of the selected files.
      • \n
    \n

    Demo

    \n

    For demo use the sample demo-angular project.

    \n
    $ cd demo-angular
    $ tns debug android/ios
    \n

    Contribute

    \n

    We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-maps":{"name":"nativescript-maps","version":"0.1.2","license":"MIT","readme":"

    NativeScript Maps

    \n

    A NativeScript module for using native map APIs. This module is currently limited and should be viewed as a proof of concept—it only supports latitude and longitude attributes and only works on iOS.

    \n

    Installation

    \n

    Run npm install nativescript-maps --save from your project's inner app directory:

    \n
    .
    ├── app  <----------------run npm install from here
    │   ├── App_Resources
    │   │   ├── android
    │   │   └── ios
    │   ├── app.css
    │   ├── app.js
    │   ├── main-page.js
    │   ├── main-page.xml
    │   ├── node_modules
    │   │   └── nativescript-maps <-- The install will place the module's code here
    │   │       └── ...
    │   ├── package.json <-- The install will register “nativescript-maps as a dependency here
    │   └── tns_modules
    │       └── ...
    └── platforms
        ├── android
        └── ios
    \n

    As is, using npm within NativeScript is still experimental, so it's possible that you'll run into some issues. A more complete solution is in the works, and you can check out this issue for an update on its progress and to offer feedback. This repo's demo folder has a sample NativeScript app that uses this map module via npm.

    \n

    If npm doesn't end up working for you, you can just copy and paste this repo's maps.ios.js file into your app and reference it directly.

    \n

    Usage

    \n

    To use the module you have to include a xmlns:maps attribute to include the maps namespace for use in your XML. Point the value of this attribute at the location you have the maps.ios.js file stored in your app.

    \n
    <Page xmlns:maps=\"app/node_modules/nativescript-maps/maps\">
    \t<maps:Map latitude=\"42.7\" longitude=\"23.3\" />
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appic-pdfview":{"name":"nativescript-appic-pdfview","version":"1.0.8","license":"Apache-2.0","readme":"

    NativeScript-Appic-PdfView

    \n

    This is a simple pdf viewer plugin that uses native libraries.

    \n
      \n
    • Android: AndroidPdfViewer (https://github.com/appiclogics/AndroidPdfViewer)
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-appic-pdfview
    \n

    OR

    \n

    copy the tgz file to your project and reference it from your package.json

    \n

    Usage

    \n

    Just add it to your page:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\"
    xmlns:ui=\"nativescript-appic-pdfview\">
        <ui:AppicPdfView src=\"~/mypdf.pdf\" defaultpage=\"1\"></ui:AppicPdfView>
    </Page>
    \n

    OR

    \n
    import { AppicPdfView } from 'nativescript-appic-pdfview';
    import { registerElement } from 'nativescript-angular';
    registerElement('AppicPdfView', () => AppicPdfView);
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
        <AppicPdfView src=\"~/mypdf.pdf\" defaultpage=\"1\"></AppicPdfView>
    </Page>
    \n

    API

    \n

    XML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    src-File url to a pdf file, can also be http
    defaultpage"0"Initial page number to display
    bookmarklabel-Search for a bookmark with the matching label and jump to the page
    bookmarkpath-Search for a bookmark by indices within the tree structure of bookmarks
    \n

    Class

    \n
    /// Go to page by id starting from 0 as first page.
    goToPage(index: number) : void;

    /// Go to first page.
    goToFirstPage() : void;

    /// Go to last page.
    goToLastPage() : void;

    /// Get a list of all bookmarks in the pdf.
    getBookmarks(): Bookmark[];

    /// Search for bookmark that is exactly at the given position in the tree structure
    /// e.g.: [1,3] would mean to first get the second root bookmark (0 based index) and
    /// then get its fourth child if it exists
    getBookmarkByIndexPath(indexes: number[]): Bookmark;

    /// Search for all bookmarks that have the given label.
    getBookmarksByLabel(label: string): BookmarkCommon[];

    /// Jump to a given bookmark.
    goToBookmark(bookmark: Bookmark): void;

    /// Get meta information author from PDF.
    getAuthor(): string;

    /// Get meta information subject from PDF.
    getSubject(): string;

    /// Get meta information title from PDF.
    getTitle(): string;

    /// Get meta information creator from PDF.
    getCreator(): string;

    /// Get meta information creator from PDF.
    getCreationDate(): string;

    /// Get page count of currently loaded pdf
    getPageCount(): number;

    /// Load pdf from code.
    /// Replaces the currently loaded pdf.
    /// The promise gets resolved after loading, or rejected if something failed.
    loadPDF(src: string): Promise<any>;

    /// only implemented for iOS
    /// Detect available programs for file extension and opens the interaction controller
    /// The source should contain accessible path for the application
    showExternalControler(src: string, rect: ControllerRect): void;
    \n

    Examples

    \n

    defaultpage: jump to page 4

    \n
    <ui:AppicPdfView src=\"~/test.pdf\" defaultpage=\"3\"></ui:AppicPdfView>
    \n

    bookmarklabel: jump to bookmark with label "PAGE 3"

    \n
    <ui:AppicPdfView src=\"~/test.pdf\" bookmarklabel=\"PAGE 3\"></ui:AppicPdfView>
    \n

    bookmarkpath: jump to the first child-bookmark of the third bookmark (bookmarks have a tree structure)

    \n
    <ui:AppicPdfView src=\"~/test.pdf\" bookmarkpath=\"2,0\"></ui:AppicPdfView>
    \n

    go to the first found bookmark with the label "PAGE 4"

    \n
    <ui:AppicPdfView src=\"~/test.pdf\" id=\"pdfview\"></ui:AppicPdfView>
    \n
    let view:AppicPdfView = page.getViewById('pdfview');
    if (view){
        view.on(\"load\",()=>{
            let items = view.getBookmarksByLabel(\"PAGE 4\");
            console.log(\"found:\",items);
            view.goToBookmark(items[0]);
        });
        view.on(\"error\",()=>{
            console.error(\"unable to load pdf\");
        });
    }
    \n

    dynamic loading with promises\njust use an empty src tag in the xml

    \n
    <ui:AppicPdfView id=\"pdfview\"></ui:AppicPdfView>
    \n
    let view:AppicPdfView = page.getViewById('pdfview');
    if (view){
        view.loadPDF('~/test.pdf').then(()=>{
            let items = view.getBookmarksByLabel(\"PAGE 4\");
            console.log(\"found:\",items);
            view.goToBookmark(items[0]);
        }).catch((err)=>{
            console.error(\"could not load pdf: \", err);
        })
    }
    \n

    Show controller on button tap

    \n
    <ui:AppicPdfView id=\"pdfview\"></ui:AppicPdfView>
    <button text=\"Open external\" tap=\"onButtonTap\"></button>
    \n
    let view:AppicPdfView = page.getViewById('pdfview');

    function onButtonTap(args: EventData) {
      const button = <Button>args.object;
      const size = button.getActualSize();
      const position = button.getLocationOnScreen();
      const rect = {
        x: position.x,
        y: position.y,
        width: size.width,
        height: size.height
      };
      view.showExternalControler(rect);
    \n

    Known bugs

    \n
      \n
    • Android does not support jumping directly to a bookmark. It only jumps to the page the bookmark is on.
      • \n
    \n

    License

    \n

    https://choosealicense.com/licenses/mit/

    \n

    Credit

    \n

    https://market.nativescript.org/plugins/nativescript-pdfview-ng

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-url-handler":{"name":"@bigin/ns-url-handler","version":"1.0.6","license":"Apache-2.0","readme":"

    Credit

    \n

    This plugin is from nativescript-urlhanlder of @hypery2k. You can get the original plugin at https://github.com/hypery2k/nativescript-urlhandler

    \n

    We just upgrade to NS7 and add some tweaks to make it works.

    \n

    NativeScript URL Handler Plugin

    \n

    Register universal links and custom URL schemes handler for your app

    \n

    Usage

    \n

    Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from '@angular/core';
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    @Component({
    \tselector: 'gr-main',
    \ttemplate: '<page-router-outlet></page-router-outlet>',
    })
    export class AppComponent {
    \tconstructor() {}

    \tngOnInit() {
    \t\thandleOpenURL((appURL: AppURL) => {
    \t\t\tconsole.log('Got the following appURL', appURL);
    \t\t});
    \t}
    }
    \n

    And for pure NativeScript:

    \n
    var handleOpenURL = require('nativescript-urlhandler').handleOpenURL;

    handleOpenURL(function (appURL) {
    \tconsole.log('Got the following appURL', appURL);
    });
    \n

    Or as TypeScript:

    \n
    import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

    handleOpenURL((appURL: AppURL) => {
    \tconsole.log('Got the following appURL', appURL);
    });
    \n

    Installation

    \n
    $ ns plugin add @bigin/ns-url-handler
    \n

    Android

    \n

    Replace myapp with your desired scheme and set launchMode to singleTask

    \n
    <activity android:name=\"com.tns.NativeScriptActivity\" ... android:launchMode=\"singleTask\"...>
            ...
        <intent-filter>
        <data android:scheme=\"myapp\" />
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />
        </intent-filter>
    \n

    For example:

    \n
    <activity android:name=\"com.tns.NativeScriptApplication\" android:label=\"@string/app_name\" android:launchMode=\"singleTask\">
      <intent-filter>
          <action android:name=\"android.intent.action.MAIN\" />
          <category android:name=\"android.intent.category.LAUNCHER\" />
      </intent-filter>
      <intent-filter>
          <action android:name=\"android.intent.action.VIEW\" />
          <category android:name=\"android.intent.category.DEFAULT\" />
          <category android:name=\"android.intent.category.BROWSABLE\" />
          <data android:scheme=\"myapp\" android:host=\"__PACKAGE__\" />
      </intent-filter>
    </activity>
    \n

    The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

    \n

    iOS

    \n
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.yourcompany.myapp</string>
        </dict>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string>
            </array>
        </dict>
    </array>
    \n

    FAQ

    \n

    Callback handling

    \n

    The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    \n
        No callback provided. Please ensure that you called \"handleOpenURL\" during application init!
    \n

    Webpack

    \n

    TypeScript Config

    \n

    If your Webpack Build is failing, try adapting your tsconfig to this:

    \n
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"emitDecoratorMetadata\": true,
            \"noEmitHelpers\": true,
            \"noEmitOnError\": true,
            \"lib\": [
                \"es6\",
                \"dom\",
                \"es2015.iterable\"
            ],
            \"baseUrl\": \".\",
            \"paths\": {
                \"*\": [
                    \"./node_modules/tns-core-modules/*\",
                    \"./node_modules/*\"
                ]
            }
        },
        \"exclude\": [
            \"node_modules\",
            \"platforms\",
            \"**/*.aot.ts\"
        ]
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intro-slides":{"name":"nativescript-intro-slides","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/TheOriginalJosh/nativescript-intro-slides/blob/master/LICENSE"},"readme":"

    #Deprecated NativeScript Intro Slides for iOS and Android

    \n

    I've renamed the project NativeScript-Slides since intro slides seemed limiting in its uses. The project has move to here\n###Not just for intro slides any more! Great for Image Carousels too! ###

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gtm":{"name":"nativescript-gtm","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mobilepay":{"name":"nativescript-mobilepay","version":"1.1.2","license":"Apache-2.0","readme":"

    NativeScript MobilePay 1.1.2

    \n

    \"npm

    \n

    This plugin is a wrapper for the MobilePay AppSwitch SDK (https://github.com/MobilePayDev/MobilePay-AppSwitch-SDK). It allows your app to utilize and integrate directly with Mobile Pay if installed on the phone.

    \n

    (Optional) Prerequisites / Requirements

    \n

    To use the plugin you would have create an account at MobilePay.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
        tns plugin add nativescript-mobilepay
    \n

    Usage

    \n

    First add the following lines to main.ts:

    \n
        import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";

        import { AppModule } from \"./app/app.module\";
        import { MobilePay } from \"nativescript-mobilepay\";

        // Do this for nativescript-mobilepay
        var mobilePay = new MobilePay();
        mobilePay.addDelegate();

        platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n

    Simply import the MobilePay class as shown below and start using the features.

    \n
        import { Component, OnInit } from \"@angular/core\";
        import { MobilePay } from 'nativescript-mobilepay';
        import { isAndroid, isIOS } from 'tns-core-modules/platform';

        declare var dk: any;

       @Component({
        selector: \"Home\",
        moduleId: module.id,
        templateUrl: \"./home.component.html\"
        })
        export class HomeComponent implements OnInit {

            private mobilePay: MobilePay;

            constructor() {
                // Use the component constructor to inject providers.
            }

            ngOnInit(): void {
                // Create an instance on init. Important!
                this.mobilePay = new MobilePay();
                this.mobilePay.createMobilePayInstance(\"APPDK0000000000\");
            }

            pay() {
                const isInstalled = this.mobilePay.isMobilePayInstalled(\"APPDK0000000000\");
                console.log(\"Mobile Pay installed? \" + isInstalled + \" Android: \" + isAndroid + \" iOS: \" + isIOS);

                // You can choose to provide a result callback like this
                MobilePay.onPaymentSuccess = (result) => (console.log(\"WE MADE A SUCCESSFUL RESULT\"));
                MobilePay.onPaymentFailure = (failure) => (console.log(\"WE MADE A FAILURE LOL\"));
                MobilePay.onPaymentCancel = () => (console.log(\"WE MADE A SUCCESSFUL CANCEL\"));

                if(isInstalled) {
                    this.mobilePay.MakePayment(\"APPDK0000000000\", 1.0, \"86715c57-8840-4a6f-af5f-07ee89107ece\")
                }
            }


        }

    \n

    API

    \n

    Properties of the plugin

    \n

    createMobilePayInstance

    \n

    Creates a mobile pay instance. Please see demo example.

    \n

    isMobilePayInstalled

    \n

    Checks whether or not mobile pay is installed on device.

    \n

    MakePayment

    \n

    Makes a payment request to mobile pay.

    \n

    onPaymentSuccess

    \n

    Callback function if a payment was successful.

    \n

    onPaymentFailure

    \n

    Callback if payment failed.

    \n

    onPaymentCancel()

    \n

    Callback if payment was cancelled.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-view-bundling-enabled":{"name":"nativescript-pdf-view-bundling-enabled","version":"1.2.1","license":"MIT","readme":"

    nativescript-pdf-view

    \n

    This is a very basic PDF view implementation that does only one thing, and\nthat is to display PDF files. It conveniently uses the iOS UIWebView, but\nfor Android it uses AndroidPdfViewer.

    \n

    This plugin does the bare minimum required to render the PDF, no configuration\noptions, and no error handling have been built yet. I welcome all Pull Requests!

    \n

    Usage

    \n

    \n

    Check out the demo folder for a sample usage.

    \n

    Angular 2

    \n

    If you're using the plugin with Angular 2, the plugin automatically registers\nPDFView as a valid tag for Angular templates. Usage is simple:

    \n
      \n
    1. Make sure to import nativescript-pdf-view somewhere in your code, e.g:
      2. \n
    \n
    import 'nativescript-pdf-view';
    \n
      \n
    1. Include the tag in your template:
      2. \n
    \n
    <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
    \n

    Try the Demo

    \n

    To try the demo, cd into the demo folder, and run the following commands:

    \n
    npm install

    # iOS
    tns platform add ios
    tns run ios

    # Android
    tns platform add android
    tns run android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-async":{"name":"nativescript-async","version":"1.0.2","license":"Apache 2","readme":"

    nativescript-async

    \n

    A NativeScript plugin that make available async/await using helpers

    \n

    Author

    \n\n

    How to use it

    \n
    require('nativescript-async');
    asyncTimeout(100);
    asyncJasmine(async()=>{
        //MY TEST WITHOUT done()
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-declarations":{"name":"nativescript-android-declarations","version":"4.0.22","license":"MIT","readme":"

    This plugin contains type information about the native platforms as exposed by the NativeScript framework.

    \n

    Supported entry points:

    \n
      \n
    • android.d.ts - For android SDK and runtime types.
      • \n
    \n

    Using the declarations may conflict with DOM typings,\nconsider using TypeScript 2.x.x and the following settings in your tsconfig.json:

    \n
    {
        \"compilerOptions\": {
            \"module\": \"commonjs\",
            \"target\": \"es5\",
            \"experimentalDecorators\": true,
            \"lib\": [
                \"es6\",
                \"dom\"
            ]
        }
    }
    \n

    Create reference.d.tsand add the following content:

    \n
    /// <reference path=\"./node_modules/nativescript-android-declarations/android.d.ts\" />
    \n

    d.ts files require a lot of memory and CPU. Consider adding skipLibCheck option to tsconfig file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-three":{"name":"nativescript-three","version":"1.0.0-alpha3","license":"Apache-2.0","readme":"

    nativescript-three

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    npm i three nativescript-three
    \n

    Usage

    \n
    import TNSTHREE from 'nativescript-three';
    \n

    Creating a Renderer

    \n

    TNSTHREE.Renderer({ gl: WebGLRenderingContext, width: number, height: number, pixelRatio: number, ...extras })

    \n

    Given a gl (context) from an\nTNSCanvas, return a\nTHREE.WebGLRenderer\nthat draws into it.

    \n
    import { Renderer } from 'nativescript-three';

    var camera, scene, renderer;
    var geometry, material, mesh;

    canvas; // TNSCanvas instance
    init();
    animate();

    function init() {
      const gl = canvas.getContext('webgl');
      // We have access to window.innerWidth / window.innerHeight but we want the current view size
      const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
      camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
      camera.position.z = 1;

      scene = new THREE.Scene();

      geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      material = new THREE.MeshNormalMaterial();

      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new TNSTHREE.Renderer({ gl });
      renderer.setSize(width, height);
    }

    function animate() {
      requestAnimationFrame(animate);

      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;

      renderer.render(scene, camera);

      canvas.flush(); // very important, call when you need to render to screen.
    }
    \n

    E.G Output

    \n

    \"Output\"

    \n

    E.G Output

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-locate-address":{"name":"nativescript-locate-address","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/iguissouma/nativescript-locate-address/blob/master/LICENSE"},"readme":"

    NativeScript Locate Address plugin

    \n

    This plugin helps to open the native mapping app and displaying a map of the address passed in.\nInspired by NativeScript Directions plugin by Eddy Verbruggen\nFor iOS and Android

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-locate-address
    \n

    Demo app

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

    \n\n

    API

    \n

    available

    \n

    Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

    \n
    JavaScript
    \n
    // require the plugin
    var LocateAddress = require(\"nativescript-locate-address\").LocateAddress;

    // instantiate the plugin
    var locator = new LocateAddress();

    locator.available().then(
      function(avail) {
        console.log(avail ? \"Yes\" : \"No\");
      }
    );
    \n
    TypeScript
    \n
    // require the plugin
    import {LocateAddress} from \"nativescript-locate-address\";

    // instantiate the plugin
    let locator = new LocateAddress();

    locator.available().then((avail) => {
        console.log(avail ? \"Yes\" : \"No\");
    });
    \n

    locate

    \n

    This function opens the native Maps app with a predefined address.

    \n

    Note that if the address is not recognized you won't be able to get location, don't blame this plugin for that.

    \n
    JavaScript
    \n
    locator.locate({
        address: \"289 Avenue georges clemenceau, Nanterre 92000, France\",
    }).then(
      function() {
        console.log(\"Maps app launched.\");
      },
      function(error) {
        console.log(error);
      },
    );
    \n
    TypeScript
    \n
    locator.locate({
        address: \"289 Avenue georges clemenceau, Nanterre 92000, France\",
    }).then(() => {
        console.log(\"Maps app launched.\");
    }, (error) => {
        console.log(error);
    });
    \n

    You can use lat and lng to locate address.

    \n
    JavaScript
    \n
    locator.locate({
        lat : 48.8858671,
        lng : 2.2188144
    }).then(
      function() {
        console.log(\"Maps app launched.\");
      },
      function(error) {
        console.log(error);
      },
    );
    \n
    TypeScript
    \n
    locator.locate({
        lat : 48.8858671,
        lng : 2.2188144
    }).then(() => {
        console.log(\"Maps app launched.\");
    }, (error) => {
        console.log(error);
    });
    \n

    Future work

    \n
      \n
    • Nothing.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-downloader":{"name":"@triniwiz/nativescript-downloader","version":"3.0.1","license":"Apache-2.0","readme":"

    Nativescript Downloader

    \n

    Installation

    \n

    ns plugin add @triniwiz/nativescript-downloader

    \n

    Usage

    \n

    TypeScript

    \n
    import { Downloader } from '@triniwiz/nativescript-downloader';
    Downloader.setTimeout(120); //Increase timeout default 60s
    \n
    import { Downloader, ProgressEventData, DownloadEventData } from 'nativescript-downloader';
    const downloader = new Downloader();
    const imageDownloaderId = Downloader.createDownload({
      url:
        'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
    });

    downloader
      .start(imageDownloaderId, (progressData: ProgressEventData) => {
        console.log(`Progress : ${progressData.value}%`);
        console.log(`Current Size : ${progressData.currentSize}%`);
        console.log(`Total Size : ${progressData.totalSize}%`);
        console.log(`Download Speed in bytes : ${progressData.speed}%`);
      })
      .then((completed: DownloadEventData) => {
        console.log(`Image : ${completed.path}`);
      })
      .catch(error => {
        console.log(error.message);
      });
    \n

    JavaScript

    \n
    var Downloader = require('@triniwiz/nativescript-downloader').Downloader;
    Downloader.setTimeout(120); //Increase timeout default 60s
    \n
    var Downloader = require('@triniwiz/nativescript-downloader').Downloader;
    var downloader = new Downloader();
    var imageDownloaderId = downloadManager.createDownload({
      url:
        'https://wallpaperscraft.com/image/hulk_wolverine_x_men_marvel_comics_art_99032_3840x2400.jpg'
    });

    downloader
      .start(imageDownloaderId, progressData => {
        console.log(`Progress : ${progressData.value}%`);
      })
      .then(completed => {
        console.log(`Image : ${completed.path}`);
      })
      .catch(error => {
        console.log(error.message);
      });
    \n

    Api

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    createDownload(options: DownloadOptions)stringCreates a download task it returns the id of the task
    getStatus(id: string)StatusCodeGets the status of a download task.
    start(id: string, progress?: Function)Promise<DownloadEventData>Starts a download task.
    resume(id: string)voidResumes a download task.
    cancel(id: string)voidCancels a download task.
    pause(id: string)voidPauses a download task.
    getPath(id: string)voidReturn the path of a download task.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n

    Angular

    \n

    Custom Downloader option

    \n
      // Request format for Downlaoder
                 DownloadOptions {
                 url: string;
                 query?: Object | string;
                 headers?: Object;
                path?: string;
                 fileName?: string;
              }
    \n

    Service File To use any where

    \n
    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs';
    import { Downloader, ProgressEventData, DownloadEventData } from '@triniwiz/nativescript-downloader';



    @Injectable({
        providedIn: 'root',
    })


    export class DataDownLoadService {
        public database: any;
        downloader: Downloader = new Downloader();
        constructor() { }


        /**
        * @ngdoc method
        * @name downloadDb
        * @description  download generic method for nay file 
        * @memberof DataDownLoadService
        * @param apiUrl : - https://myserver.com/mypath
        * @param filename :- myfile.zip ...
        * @param downloadlocation : mobile local location
        */
        downloadFile(apiUrl, filename, downloadlocation) {
            const subject = new Subject<any>();
        
            // Request format for Downlaoder
            //      DownloadOptions {
            //     url: string;
            //     query?: Object | string;
            //     headers?: Object;
            //     path?: string;
            //     fileName?: string;
            //   }

            // Prepare the header with token work
        
            const headerHttp = {
                \"Content-Type\": \"application/json\",
                \"Authorization\": 'Bearer ' + 'Token...'
            }

            const url =  apiUrl;

            const zipDownloaderId = this.downloader.createDownload({
                url: url,
                headers: headerHttp,
                path: downloadlocation,
                fileName: filename
            });

            this.downloader
                .start(zipDownloaderId, (progressData: ProgressEventData) => {
                    console.log(`Progress : ${progressData.value}%`);
                    console.log(`Current Size : ${progressData.currentSize}%`);
                    console.log(`Total Size : ${progressData.totalSize}%`);
                    console.log(`Download Speed in bytes : ${progressData.speed}%`);
                })
                .then((completed: DownloadEventData) => {
                    console.log(`zip file saved at : ${completed.path}`);
                  
                   
                    
                    subject.next(true);
                  
                })
                .catch(error => {
                    console.log('downloadDb', error.message);
                    subject.error(error);

                });

            return subject.asObservable();
        }



    }
    \n

    TODO

    \n
      \n
    • [ ] Local Notifications
      • \n
    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-parley":{"name":"nativescript-parley","version":"1.2.15","license":"Apache-2.0","readme":"

    NativeScript Parley plugin

    \n

    NativeScript plugin for Parley messaging. You need an appSecret to use this plugin. The appSecret can be obtained on https://www.parley.nu/.

    \n

    Requirements

    \n
      \n
    • Android API Level 17+
      • \n
    • iOS 9+
      • \n
    • NativeScript 4.0.0
      • \n
    \n

    Changes

    \n

    V1.2.15 (14 June 2019)

    \n
      \n
    • PARLEY-250 Updated demo and iOS dependency.
      • \n
    \n

    V1.2.14 (12 June 2019)

    \n
      \n
    • PARLEY-247 Updated demo and Android dependency.
      • \n
    \n

    V1.2.13 (3 June 2019)

    \n
      \n
    • PARLEY-247 Updated demo and iOS dependency.
      • \n
    \n

    V1.2.12 (27 May 2019)

    \n
      \n
    • PARLEY-246 Updated Android dependency for adding custom headers when loading images.
      • \n
    \n

    V1.2.11 (24 May 2019)

    \n
      \n
    • PARLEY-245 Updated demo and iOS dependency.
      • \n
    \n

    V1.2.10 (24 April 2019)

    \n
      \n
    • PARLEY-240 Updated Android and iOS dependency.
      • \n
    \n

    V1.2.9 (24 April 2019)

    \n
      \n
    • Unpublished change.
      • \n
    \n

    V1.2.8 (1 April 2019)

    \n
      \n
    • PARLEY-234 Removed before-prepare remove-firebase-podfile.js instructions.
      • \n
    • PARLEY-234 Margin top issue fixed.
      • \n
    \n

    V1.2.7 (18 March 2019)

    \n
      \n
    • PARLEY-233 Fix for keyboard accessory view in iOS.
      • \n
    \n

    V1.2.6 (18 March 2019)

    \n
      \n
    • PARLEY-232 Upgraded to NativeScript 5.2.2 and updated README.MD with instructions (Step 1.2.1) to bypass the GoogleService-Info.plist check by the nativescript-plugin-firebase package.
      • \n
    \n

    V1.2.5 (18 February 2019)

    \n
      \n
    • PARLEY-231 Fix push enabled check always being true when background app refresh is on.
      • \n
    \n

    V1.2.4 (1 February 2019)

    \n
      \n
    • PARLEY-228 Changed intent flags for Android push notifications.
      • \n
    \n

    V1.2.3 (31 January 2019)

    \n
      \n
    • PARLEY-223 Fixed dots for is typing functionality not being colored for Android.
      • \n
    \n

    V1.2.2 (23 January 2019)

    \n
      \n
    • PARLEY-228 The Android activity that should be opened via push messages can now be set by using Parley.getInstance().setNotificationTarget(notificationTarget: string)
      • \n
    \n

    V1.2.1 (23 January 2019)

    \n
      \n
    • PARLEY-227 Compatibility fixes for Android API 18.
      • \n
    \n

    V1.2.0 (22 January 2019)

    \n
      \n
    • PARLEY-219 Added support for sticky messages.
      • \n
    • PARLEY-216 Added a new balloon style.
      • \n
    • PARLEY-224 Better backwards compatibility for messages.
      • \n
    \n

    V1.1.4 (11 January 2019)

    \n
      \n
    • PARLEY-223 Bugfix for push messages when app is in background.
      • \n
    \n

    V1.1.3 (21 December 2018)

    \n
      \n
    • PARLEY-215 Bugfix for using the library without SSL-pinning.
      • \n
    \n

    V1.1.2 (4 December 2018)

    \n
      \n
    • PARLEY-209 Changed polling interval to 20 seconds (polling is only used when push is off or disabled).
      • \n
    \n

    V1.1.1 (16 October 2018)

    \n
      \n
    • PARLEY-206 Configuring the base url and path is now working correctly.
      • \n
    \n

    V1.1.0 (27 September 2018)

    \n
      \n
    • PARLEY-205 Added support for using custom headers.
      • \n
    \n

    V1.0.15 (21 August 2018)

    \n
      \n
    • PARLEY-202 Supporting transparent background.
      • \n
    • PARLEY-202 Added gradient background in the demo app.
      • \n
    \n

    V1.0.12 (15 May 2018)

    \n
      \n
    • PARLEY-187 Disabled tool- and navigationbar manipulation.
      • \n
    \n

    V1.0.0 (23 April 2018)

    \n
      \n
    • PARLEY-179 Release on GitHub and npm.
      • \n
    \n

    Getting started

    \n

    The plugin offers a singleton called Parley and a view called ParleyView. The Parley singleton is the connection between your application and the plugin. The ParleyView represent a native Android and iOS view.

    \n

    Step 1: Prepare your project for the plugin

    \n

    1.1 Android

    \n
    Step 1.1.1: Create an AppCompatActivity
    \n

    The plugin needs an AppCompatActivity to work. Create the file app/main-activity.android.ts and add the following:

    \n
    import {setActivityCallbacks, AndroidActivityCallbacks} from \"tns-core-modules/ui/frame\";

    declare const com: any;

    @JavaProxy(\"__PACKAGE__.MainActivity\")
    class MainActivity extends android.support.v7.app.AppCompatActivity {
        private _callbacks: AndroidActivityCallbacks;

        protected onCreate(savedInstanceState: android.os.Bundle): void {
            if (!this._callbacks) {
                setActivityCallbacks(this);
            }

            this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
        }

        protected onSaveInstanceState(outState: android.os.Bundle): void {
            this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState);
        }

        protected onStart(): void {
            this._callbacks.onStart(this, super.onStart);
        }

        protected onStop(): void {
            this._callbacks.onStop(this, super.onStop);
        }

        protected onDestroy(): void {
            this._callbacks.onDestroy(this, super.onDestroy);
        }

        public onBackPressed(): void {
            this._callbacks.onBackPressed(this, super.onBackPressed);
        }

        public onRequestPermissionsResult(requestCode: number, permissions: Array<String>, grantResults: Array<number>): void {
            this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined /*TODO: Enable if needed*/);
        }

        protected onActivityResult(requestCode: number, resultCode: number, data: android.content.Intent): void {
            this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult);
        }
    }
    \n

    Replace __PACKAGE__ by your package name

    \n
    Step 1.1.2: Configure AppCompatActivity in the AndroidManifest
    \n

    Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and replace com.tns.NativeScriptActivity by __PACKAGE__.MainActivity.

    \n
    Example
    \n

    Before

    \n
    <activity
        android:name=\"com.tns.NativeScriptActivity\"
        android:label=\"@string/title_activity_kimera\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\"
        android:theme=\"@style/LaunchScreenTheme\">
    \n

    After

    \n
    <activity
        android:name=\"__PACKAGE__.MainActivity\"
        android:label=\"@string/title_activity_kimera\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\"
        android:theme=\"@style/LaunchScreenTheme\">
    \n
    Step 1.1.3: Define support and firebase versions in app.gradle
    \n

    To avoid conflicts when compiling the Android application we need to set the right supportVersion and firebaseVersion. Open app/App_Resources/Android/app.gradle and add:

    \n
    android {
      //

      project.ext {
        supportVersion = '27.1.1'
        firebaseVersion = '12.0.1'
      }
    }
    \n
    Step 1.1.4: Configure Firebase Cloud Messaging
    \n

    The plugin uses remote messages to update the chat. You need to implement Firebase Cloud Messaging to receive remote messages in Android.

    \n
    Step 1.1.4.1: Create a project in the firebase console
    \n

    Firebase needs a google-services.info to work. You can retrieve this google-service.info by creating a project on https://console.firebase.google.com/.

    \n

    Add the generated google-services.info to app/App_Resources/Android.

    \n
    Step 1.1.4.2: Install the NativeScript Firebase plugin
    \n
    tns plugin add nativescript-plugin-firebase
    \n

    Only enable Android and Firebase Messaging when installing the plugin.

    \n

    Step 1.1.4.3: Define Firebase Cloud Messaging services in the AndroidManifest

    \n

    Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and add the following Firebase Cloud Messaging services:

    \n
    <manifest ... >
        <application ... >
            ...
            <service android:name=\"org.nativescript.plugins.firebase.MyFirebaseInstanceIDService\">
                <intent-filter>
                    <action android:name=\"com.google.firebase.INSTANCE_ID_EVENT\"/>
                </intent-filter>
            </service>
            <service android:name=\"org.nativescript.plugins.firebase.MyFirebaseMessagingService\">
                <intent-filter>
                    <action android:name=\"com.google.firebase.MESSAGING_EVENT\"/>
                </intent-filter>
            </service>
        </application>
    </manifest>
    \n

    1.2 iOS

    \n

    Step 1.2.1: Create GoogleService-Info.plist to bypass a check by the nativescript-plugin-firebase package.

    \n

    The NativeScript Firebase plugin checks by default if the file GoogleService-Info.plists exists. Firebase is not needed for iOS because Parley uses APNs to receive Remote Messages. To bypass this, create the file App_Resources/iOS/GoogleService-Info.plist with the following content:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    </dict>
    </plist>
    \n

    Step 1.2.2: Configure Remote messages

    \n

    To receive remote messages in iOS the application needs to add an app.entitlements file.

    \n

    Create the file app/App_Resources/iOS/app.entitlements and add the following:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
    \t<key>aps-environment</key>
    \t<string>development</string>
    </dict>
    </plist>
    \n

    Then install nativescript-custom-entitlements to copy the app.entitlements file when compiling the iOS project:

    \n
    npm install nativescript-custom-entitlements --save-dev
    \n

    Step 2: Install the plugin

    \n
    npm install nativescript-parley --save-dev
    \n

    Step 3: Register device and configure remote messages

    \n

    Step 3.1: Remove app/app.ts

    \n

    To handle remote messages we need a platform specific configuration, so remove the file app/app.ts.

    \n

    3.2 Android

    \n

    Step 3.2.1: Create Android specific app

    \n

    Create the file app/app.android.ts and add the following:

    \n
    import * as application from 'tns-core-modules/application';

    const firebase = require(\"nativescript-plugin-firebase\");
    import {Message} from \"nativescript-plugin-firebase\";
    import {Parley} from \"nativescript-parley\";

    firebase.init({
        onMessageReceivedCallback: (message: Message) => {
            console.log(\"onMessageReceivedCallback: \", message.data);

            // Optional: Set the target activity to open when the notification is being clicked
            Parley.getInstance().setNotificationTarget(\"com.webuildapps.tracebuzz.parleydemo.MainActivity\");

            Parley.getInstance().handlePushMessage(message.data);
        },

        onPushTokenReceivedCallback: function(token) {
            console.log(\"onPushTokenReceivedCallback: \", token);

            Parley.getInstance().setDeviceToken(token);
        }
    });

    application.start({ moduleName: \"main-page\" });
    \n

    3.3: iOS

    \n

    Step 3.2.1: Create an AppDelegate

    \n

    Create the file app/app-delegate.ts and add the following:

    \n
    import {Parley} from \"nativescript-parley\";

    export class AppDelegate extends UIResponder implements UIApplicationDelegate {

        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFailToRegisterForRemoteNotificationsWithError(application: UIApplication, error: NSError): void {
            console.log(\"Failed to register for remote notifications\");
        }

        applicationDidReceiveRemoteNotification(application: UIApplication, userInfo: NSDictionary<any, any>): void {
            Parley.getInstance().handlePushMessage(userInfo);
        }

        applicationDidRegisterForRemoteNotificationsWithDeviceToken(application: UIApplication, deviceToken: NSData): void {
            let deviceTokenString = deviceToken.description;

            Parley.getInstance().setDeviceToken(deviceTokenString);
        }

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<any, any>): boolean {
            application.registerForRemoteNotifications();

            return true;
        }
    }
    \n

    Step 3.2.1: Create iOS specific app

    \n

    Create the file app/app.ios.ts and add the following:

    \n
    import * as application from 'tns-core-modules/application';
    import {AppDelegate} from \"./app-delegate\";

    application.ios.delegate = AppDelegate;

    application.start({ moduleName: \"main-page\" });
    \n

    Step 4: Implement the Parley plugin in a Page (Finally 🎉)

    \n

    4.1: Configuring and using Parley

    \n

    The Parley library provides listeners to notify the application. The configuration of Parley can be customised, such as modifying the base url and using SSL pinning.

    \n

    The application itself is responsible for showing the chat when it is ready. This can be done by calling parleyView.showChat() when receiving the onDeviceRegistrationSuccess callback.

    \n

    Note:\nIt is required to register the device before showing the chat. This means that the application is responsible for ensuring that the push token is set before attempting to initialise and use the Parley plugin.

    \n
    Step 4.2.1: Create ChatViewModel
    \n

    Create the file app/chat-view-model.ts and add the following:

    \n
    import {Parley, ParleyListener, ParleySslPinningListener, ParleyView} from \"nativescript-parley\";
    import {Observable} from \"tns-core-modules/data/observable\";

    export class ChatViewModel extends Observable implements ParleyListener {

        private parleyView: ParleyView;

        constructor() {
            super();

            Parley.init(this, \"appSecret\");
            // Add optional custom configuration here
            Parley.getInstance().configure();
        }

        setParleyView(parleyView: ParleyView): void {
            this.parleyView = parleyView;
        }

        // ParleyListener
        onConfigureFailed() {
            console.log('onConfigureFailed');
        }

        onConfigureSuccess() {
            console.log('onConfigureSuccess');
            Parley.getInstance().registerDevice();
        }

        onDeviceRegistrationFailed() {
            console.log('onDeviceRegistrationFailed');
        }

        onDeviceRegistrationSuccess() {
            console.log('onDeviceRegistrationSuccess');

            this.parleyView.showChat();
        }

        onUserUnauthorized() {
            console.log('onUserUnauthorized');
        }

        onChatMessageSend() {
            console.log('onChatMessageSend');
        }
    }
    \n

    Replace appSecret by your appSecret. You can obtain an appSecret on https://www.parley.nu/

    \n

    Step 4.2: Configure chat view

    \n

    Open the xml view for the chat and add xmlns:Parley="nativescript-parley" to the Page tag.

    \n

    For example:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:Parley=\"nativescript-parley\">
    \n

    Then add the ParleyView inside for example a StackLayout.

    \n
    <Parley:ParleyView id=\"parleyView\" width=\"100%\" height=\"100%\"/>
    \n
    Step 4.3: Configure chat page
    \n

    Open the page typescript file for the chat and add the following imports:

    \n
    import {Page} from \"tns-core-modules/ui/page\";
    import {ChatViewModel} from \"~/chat-view-model\";
    import {ParleyView} from \"nativescript-parley\";
    \n

    After that add the following to your pageLoaded method:

    \n
    let initialised = false;

    export function pageLoaded(args: EventData) {
        if (initialised) return;

        let page: Page = <Page>args.object;
        let parleyView: ParleyView = page.getViewById(\"parleyView\");

        let chatViewModel = new ChatViewModel();
        chatViewModel.setParleyView(parleyView);
        page.bindingContext = chatViewModel;

        initialised = true;
    }
    \n

    Custom configurations

    \n

    Parley allows the use of custom configurations, such as specifying the base url and enabling SSL pinning. Pay attention: configuring is always done after the init() method and before the configure() method.

    \n

    The available configuration methods are as follows:

    \n
    Parley.init(this, \"0W4qcE5aXoKq9OzvHxj2\");
    Parley.getInstance().registerUser(\"ZGFhbnw5ZTA5ZjQ2NWMyMGNjYThiYjMxNzZiYjBhOTZmZDNhNWY0YzVlZjYzMGVhNGZmMWUwMjFjZmE0NTEyYjlmMDQwYTJkMTJmNTQwYTE1YmUwYWU2YTZjNTc4NjNjN2IxMmRjODNhNmU1ODNhODhkMmQwNzY2MGYxZTEzZDVhNDk1Mnw1ZDcwZjM5ZTFlZWE5MTM2YmM3MmIwMzk4ZDcyZjEwNDJkNzUwOTBmZmJjNDM3OTg5ZWU1MzE5MzdlZDlkYmFmNTU1YTcyNTUyZWEyNjllYmI5Yzg5ZDgyZGQ3MDYwYTRjZGYxMzE3NWJkNTUwOGRhZDRmMDA1MTEzNjlkYjkxNQ\"); // Optional -- Read the user registration custom configuration!
    Parley.getInstance().setBaseUrl(\"https://www.irischat.com\"); // Optional
    Parley.getInstance().setBasePath(\"/clientApi/v1.2/\"); // Optional
    Parley.getInstance().enableSslPinning(this , \"N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=\", \"aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=\"); // Optional -- Read the SSL pinning custom configuration!
    Parley.getInstance().configure();
    \n

    (The values shown are the default values, modify them to your needs)

    \n

    Custom headers

    \n

    Parley supports the use of custom headers. These can be updated before and after configuring the instance.

    \n

    Note that Parley will override values in case the header has the same name. Also, the headers of Parley cannot be removed via this method.

    \n
    Parley.getInstance().addHttpHeader(\"custom-company\", \"Webuildapps\");
    Parley.getInstance().removeHttpHeader(\"custom-company\");
    \n

    Enable SSL pinning

    \n

    To enable SSL pinning you must have a security config.

    \n

    SSL pinning can be enabled by using the following configuration method: enableSslPinning(listener: ParleySslPinningListener, publicKeyOne: string, publicKeyTwo: string).\nExample:

    \n
    // Parley.init(...);
    Parley.getInstance().enableSslPinning(this , \"N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=\", \"aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=\"); // Default Parley keys
    // Parley.getInstance().configure();
    \n

    The first parameter expects a ParleySslPinningListener. This is used to receive the callbacks of the SSL pinning status and consists of the following methods:

    \n
    ParleySslPinningListener {
        public onEnableSslPinningSuccess(): void;
        public onEnableSslPinningFailed(message: string ): void;
    }
    \n
    Android
    \n

    The configuration above is enough for iOS. Android needs a network security config. Create the file app/App_Resources/Android/xml/network_security_config.xml and add a network security config.

    \n

    For example:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <network-security-config>
        <domain-config>
            <domain includeSubdomains=\"false\">www.irischat.com</domain>

            <pin-set expiration=\"2018-05-31\">
                <pin digest=\"SHA-256\">N9YyJf13LbHgGv1kn9/YEXGFLJbleikrcpDORa896ok=</pin>
                <pin digest=\"SHA-256\">aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=</pin>
            </pin-set>
        </domain-config>
    </network-security-config>
    \n

    You also need to specify this network security config in the AndroidManifest. Open the AndroidManifest (located in App_Resources/Android/AndroidManifest.xml) and add the network security config as follows:

    \n
    <application
        android:name=\"...\"
        android:icon=\"...\"
        android:roundIcon=\"...\"
        android:label=\"...\"
        android:theme=\"...\"
        android:networkSecurityConfig=\"@xml/network_security_config\">
    \n

    Register user

    \n

    Users can be registered to encrypt the data (and unregister when the user logs out). Registering a user requires the UserAuthentication token. Pay attention: registerUser() is always called after the init() method and before the configure() method. This is done by using Parley.getInstance().registerUser(userAuthorization: string); method as follows:

    \n
    // Parley.init(...);
    Parley.getInstance().registerUser(\"ZGFhbnw5ZTA5ZjQ2NWMyMGNjYThiYjMxNzZiYjBhOTZmZDNhNWY0YzVlZjYzMGVhNGZmMWUwMjFjZmE0NTEyYjlmMDQwYTJkMTJmNTQwYTE1YmUwYWU2YTZjNTc4NjNjN2IxMmRjODNhNmU1ODNhODhkMmQwNzY2MGYxZTEzZDVhNDk1Mnw1ZDcwZjM5ZTFlZWE5MTM2YmM3MmIwMzk4ZDcyZjEwNDJkNzUwOTBmZmJjNDM3OTg5ZWU1MzE5MzdlZDlkYmFmNTU1YTcyNTUyZWEyNjllYmI5Yzg5ZDgyZGQ3MDYwYTRjZGYxMzE3NWJkNTUwOGRhZDRmMDA1MTEzNjlkYjkxNQ\"); // Optional -- Parley example user
    // Parley.getInstance().configure();
    \n

    Additionally, a user can be deregistered (for example: when the user logs out). Note that this can be done after initialising. Deregistering can be done as follows:

    \n
    Parley.getInstance().deregisterUser();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpchart":{"name":"nativescript-mpchart","version":"1.0.5-2","license":"Apache-2.0","readme":"

    NativeScript MPChart UI

    \n

    A NativeScript MPChart for Android and iOS.\nThis plugin still in develop and will update more type chart and feature in future.\nBecause I don't have much time so it only have demo-ng is detail But it can work in core.\nNow, a plugin have simple LineChart.

    \n

    Based on

    \n

    Charts for iOS

    \n

    MPAndroidChart for Android

    \n

    Installation

    \n

    Run tns plugin add nativescript-mpchart

    \n

    API

    \n

    Events

    \n
    \n

    Instance Properties

    \n
      \n
    • showLegend - Boolean
      \nShow or hide legend under chart. Default is false.
      • \n
    • showGridLines - Boolean
      \nShow or hide grid lines in chart. Default is false.
      • \n
    • scaleEnable - Boolean
      \nEnable or Disable zoom in chart. Default is false.
      • \n
    • descriptionText - String
      \nGets or sets description text inside chart. Default is empty.
      • \n
    • descriptionXOffset - Number
      \nGets or sets description text offset from right. Default is 0;
      • \n
    • descriptionYOffset - Number
      \nGets or sets description text offset from bottom. Default is 0.
      • \n
    • descriptionTextColor - Color
      \nGets or sets description text color. Css property 'description-text-color'.
      • \n
    • highlightPerTapEnabled - Boolean
      \nEnable or Disable show hight light when tap in line. Default is false.
      • \n
    • highlightPerDragEnabled - Color
      \nEnable or Disable show hight light when drag in line. Default is false.
      • \n
    • xAxisGranularity - Number
      \nGets or sets granularity (A simple, this is like step of value in yAxis). Default value is 1.
      • \n
    • yAxisGranularity - Number
      \nGets or sets granularity (A simple, this is like step of value in yAxis). Default value is auto equally divided.
      • \n
    • xAxisLabelPosition - String
      \nGets or sets position of xAxis of chart.\nValue : "Top" | "Bottom" | "BothSided" | "TopInside" | "BottomInside".\nDefault value is "Bottom."
      • \n
    • xAxisLineColor, leftAxisLineColor, rightAxisLineColor - Color
      \nGets or sets line color of Axis color. Css property 'x-axis-line-color', 'right-axis-line-color','left-axis-line-color'.
      • \n
    • xAxisTextColor, leftAxisTextColor, rightAxisTextColor - Color
      \nGets or sets text color of Axis color. Css property 'x-axis-text-color', 'right-axis-text-color','left-axis-text-color'.
      • \n
    • xAxisMinValue, leftAxisMinValue, rightAxisMinValue - number
      \nGets or sets min value of Axis.
      • \n
    • xAxisMaxValue, leftAxisMaxValue, rightAxisMaxValue - number
      \nGets or sets max value of Axis.
      • \n
    • leftAxisFormatter, rightAxisFormatter - YAxisFormatterInterface
      \nGets or sets formatter value for left and right Axis. Now, the plugin support two type is: "Int" | "Float".\nDefault value not format it show like input.\nSEE DETAIL IN DEMO.
      • \n
    • showValueLabels - boolean
      \nshow or hide labels value.
      • \n
    • showLeftAxis, showRightAxis - boolean
      \nshow or hide left or right Axis.
      • \n
    • font - string - only iOS - this is Name of Font Name.\nGets or sets font of all text in chart such as legend text, axis label text, description text, value in line text..etc.etc...\nTo use it you need add file .ttf from app/fonts/font-name.ttf.
      • \n
    • marker - ChartMarkerConfig - only work BarChart.\nset up config to show marker when select point in chart.\nSEE DETAIL IN DEMO.\nUsage marker:\niOS: don't need setup.\nAndroid: go to demo-ng and copy file default_marker_view.xml in to App_Resources/Android/layout/default_marker_view.xml. Move it in your project with path likely.\nAfter add :
      • \n
    \n
        <color name=\"marker_background\">#cccccc</color>
        <color name=\"marker_text_color\">#000000</color>
        <color name=\"text_view_color\">#ff0000</color>
    \n

    into App_Resources/Android/values/colors.xml.\nSEE DETAIL IN demo-ng

    \n

    Method

    \n
      \n
    • resetZoomLineChart() - Function -> void
      • \n
    \n

    Method will reset chart. Call it if some property is change but not apply in UI.

    \n

    Data setup Properties

    \n
      \n
    • items - Array\nset Items to render chart. This is important. See more in demo and demo-ng (app.component).
      • \n
    • labels - Array\nset list value will display in xAxis because default is show x value. A property will convert to value you want display. This is important. See more in demo and demo-ng (app.component).
      • \n
    \n

    Interface

    \n
    DataSetChartInterface {
        x: number;
        y: number;
    }

    DataSetLabelInterface {
        xAxisValue: number,
        label: string
    }

    DataLineChartInterface {
        dataSet: Array<DataSetChartInterface>;
        lineColor: Color;
        highlighColor?: Color;
        circleHoleEnabled?: boolean;
        circleColor?: Color;
        circleEnable?: boolean;
        legendLabel?: string;
    }

    YAxisFormatterInterface {
        type: TypeFormatter,
        numberOfDigits?: number
    }
    DataBarChartInterface {
        dataSet: Array<DataSetChartInterface>;
        legendLabel?: string;
        highlighColor?: Color,
        barColor?: Color;
    }

    ChartMarkerSize {
        width: number,
        height: number
    }

    ChartMarkerPadding {
        top: number;
        right: number;
        bottom: number;
        left: number;
    }

    ConfigDisplayData {
        showXValue: boolean,
        showYValue: boolean,
        fixedXValue?: YAxisFormatterInterface,
        fixedYValue?: YAxisFormatterInterface,
        formatter: string;
    }

    ChartMarkerConfig {
        backgroundColor?: Color,
        textColor?: Color,
        font?: string,
        fontSize?: number,
        padding?: {
            x: number,
            y: number
        },
        minimumSize?: ChartMarkerSize,
        borderRadius?: number,
        contentCenter?: boolean,
        displayData: ConfigDisplayData,
        xOffset?: number,
        yOffset?: number,
    }
    \n

    Usage in Angular

    \n
      \n
    • Import NativeScriptMPLineChartModule in NgModule:
      • \n
    \n
    import { NativeScriptMPLineChartModule } from \"nativescript-mpchart/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptMPLineChartModule,
            //......
    \t],
        //......
    })
    \n
      \n
    • iOs: width and height will auto full in parent layout.
      • \n
    • Android: height is auto so you need set
      • \n
    \n
        height=\"100%\"
    \n

    to full in parent layout.

    \n
    <!-- app.component.html -->
        <!-- line chart -->
        <StackLayout height=\"500\">
            <MPLineChart *ngIf=\"dataSet\" #lineChart [showLegend]=\"setUp.showLegend\" [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\"
                [descriptionText]=\"setUp.descriptionText\" [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\"
                [descriptionTextColor]=\"setUp.descriptionTextColor\" [highlightPerTapEnabled]=\"setUp.highlightPerTapEnabled\" [highlightPerDragEnabled]=\"setUp.highlightPerDragEnabled\"
                [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
                [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
                [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
                [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
                [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
                [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [items]=\"dataSet\" [labels]=\"labels\"
                [font]=\"setUp.font\" class=\"mp-chart\">    </MPLineChart>
        </StackLayout>
        <!-- bar chart -->
         <StackLayout height=\"500\">
            <MPBarChart height=\"400\" #lineChart *ngIf=\"barDataSet\" [items]=\"barDataSet\" [labels]=\"labels\" [showLegend]=\"setUp.showLegend\"
                [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\" [descriptionText]=\"setUp.descriptionText\"
                [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\" [descriptionTextColor]=\"setUp.descriptionTextColor\"
                [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
                [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
                [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
                [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
                [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
                [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [font]=\"setUp.font\" 
                [showValueLabels]=\"setUp.showValueLabels\" [showLeftAxis]=\"setUp.showLeftAxis\" [showRightAxis]=\"setUp.showRightAxis\"
                [marker]=\"markerConfig\" class=\"mp-chart\">    </MPBarChart>
        </StackLayout>
    \n
    /*app.css*/
    .mp-chart {
        description-text-color: #00ff00;
        x-axis-line-color: #ff0000;
        left-axis-line-color: #005500;
        right-axis-line-color: #ff00ff;
        x-axis-text-color: #ff0000;
        left-axis-text-color: #005500;
        right-axis-text-color: #ff00ff;
    }
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { DataLineChartInterface, DataSetChartInterface, DataSetLabelInterface,YAxisFormatterInterface } from \"nativescript-mpchart\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

         public setUp: any = {
            showGridLines: false,
            showLegend: true,
            scaleEnable: true,
            descriptionText: \"Text for chart\",
            descriptionXOffset: 0,
            descriptionYOffset: 0,
            descriptionTextColor: \"#ffff00\",
            highlightPerTapEnabled: true,
            highlightPerDragEnabled: true,
            xAxisGranularityProperty: 1,
            leftAxisGranularityProperty: 20,
            rightAxisGranularityProperty: 30,
            xAxisLineColor: \"#ff0000\",
            xAxisTextColor: \"#ff0000\",

            leftAxisLineColor: \"#0000ff\",
            leftAxisTextColor: \"#0000ff\",

            rightAxisLineColor: \"#00ff00\",
            rightAxisTextColor: \"#00ff00\",

            xAxisMinValue: -1,
            xAxisMaxValue: 4,

            leftAxisMinValue: 0,
            leftAxisMaxValue: 100,

            rightAxisMinValue: 0,
            rightAxisMaxValue: 70,

            font: \"Papyrus\",
            xAxisLabelPosition: \"Bottom\",
            showValueLabels: false,
            showLeftAxis: true,
            showRightAxis: false,
        };
        public leftAxisFormatter: YAxisFormatterInterface = {
            type: \"Float\",
            numberOfDigits: 1
        };
        public rightAxisFormatter: YAxisFormatterInterface = {
            type: \"Float\",
            numberOfDigits: 1
        };
        public markerConfig: ChartMarkerConfig
        public dataSet: Array<DataLineChartInterface>;
        public barDataSet: Array<DataBarChartInterface>;
        public labels: Array<DataSetLabelInterface>;
        constructor(
            public changeDetectorRef: ChangeDetectorRef
        ) {
            let cyan = new Color(\"#00FFFF\");
            let color = new Color(\"#FF0000\");
            let color1 = new Color(\"#00FF00\");
            let arrDataView1: Array<DataSetChartInterface> = [];
            let arrDataView2: Array<DataSetChartInterface> = [];
            let arrLabel: Array<DataSetLabelInterface> = [];
            let arrDataView: Array<DataSetChartInterface> = [];
            for (let i = 0; i < 8; i++) {
                arrDataView1.push({
                    x: i,
                    y: i * 9,
                });
                arrDataView2.push({
                    x: i,
                    y: i + 30,
                });

                arrLabel.push({
                    xAxisValue: i,
                    label: `Tháng ` + (i + 1)
                })

            }
            let item: DataLineChartInterface = {
                dataSet: arrDataView1,
                lineColor: cyan,
                highlighColor: color,
                legendLabel: \"arrDataView1\"
            };
            let item1: DataLineChartInterface = {
                dataSet: arrDataView2,
                lineColor: color1,
                highlighColor: color,
            };
            this.dataSet = [];
            this.dataSet.push(item);
            this.dataSet.push(item1);
            this.barDataSet = [];
            this.barDataSet.push({
                dataSet: arrDataView1,
                legendLabel: \"barChartView1\",
                highlighColor: color,
                barColor: color1
            });
            this.markerConfig = {
                displayData: {
                    showXValue: false,
                    showYValue: true,
                    formatter: \"Yvalue: {{y}}\",
                },
                contentCenter: true,
                xOffset: -30,
                yOffset: -30,
                backgroundColor: new Color(\"#0000ff\"),
                textColor: new Color(\"#ffffff\"),
                font: \"Papyrus\",
                fontSize: 12,
                padding: {
                    x: 20,
                    y: 10
                }
            }
            this.labels = arrLabel;
        }
    }
    \n

    ##FixSameError

    \n

    When use plugin if you see error when build --aot in line import interface in file .component like this :

    \n

    Module not found. Can't resolve "nativescript-mpchart" in "relative path*.component".

    \n

    You can't try change to : import { ... } from "nativescript-mpchart/index" and delete all platform, hook, node_modules and rebuild. I think an error in platform and angular not in plugin because i see it when develop.

    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/LeCaoPhuc/nativescript-mpchart
    $ cd nativescript-mpchart/src
    $ npm install
    $ npm run demo
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

    \n

    If you want to run the Angular demo simply use the demo.ios.ng.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hold-to-load":{"name":"nativescript-hold-to-load","version":"1.0.2","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript-Hold-To-Load

    \n

    Nativescript plugin for press (hold) background animation.

    \n

    Android Only

    \n

    Sample

    \n

    \"Demo\"

    \n

    Native Library

    \n

    HoldToLoadLayout

    \n

    Installation

    \n

    From your command prompt/termial go to your app's root folder and execute:

    \n

    npm install nativescript-hold-to-load

    \n

    Usage

    \n

    XML:

    \n
    <Page 
      xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:HL=\"nativescript-hold-to-load\" loaded=\"pageLoaded\">
      <ActionBar title=\"Hold to Load\" />
      <StackLayout>
        
        <HL:HoldToLoadLayout duration=\"1000\" startColor=\"#3489db\" strokeWidth=\"50\" stopWhenFilled=\"true\" holdComplete=\"{{ completed }}\" holdReset=\"{{ reset }}\">
            <Label text=\"Press and Hold\" class=\"message\" textWrap=\"true\"/>
        </HL:HoldToLoadLayout>


        <HL:HoldToLoadLayout startColor=\"#ff4081\" endColor=\"#336699\" strokeWidth=\"120\" strokeAlpha=\"225\" holdComplete=\"{{ completed }}\" holdReset=\"{{ reset }}\" angleChange=\"{{ angleChange }}\">
            <Image src=\"~/images/bart.png\" class=\"circle-image\" stretch=\"aspectFit\" />
        </HL:HoldToLoadLayout>

      </StackLayout>
    </Page>
    \n

    Attributes

    \n

    startColor - (color string) - required

    \n

    Attribute to set the starting color.

    \n

    endColor - (color string) - optional

    \n

    Attribute to set the ending color of the gradient, if not specified the startColor will be used.

    \n

    duration - (number) - optional

    \n

    Set duration of fill time in milliseconds. Default is 1500.

    \n

    strokeWidth - (number) - optional\nSets the stroke width. Default is 0.

    \n

    strokeAlpha - (number) - optional\nSets the paint's alpha value. ** Value range is between 0 & 255. ** Default alpha value is 255.

    \n

    playReverseAnimation - (boolean) - optional\nSets if to animate the reverse animation. If set false, the loading will disappear instantly. Default is true.

    \n

    stopWhenFilled - (boolean) - optional\nIf set true, loading will stop when it's completed. If set false, loading will be reversed even if it is full. Default is true.

    \n

    startAngle - (number) - optional\nSet the loading's starting point as angle. Default value is 270.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/directions":{"name":"@nativescript/directions","version":"2.0.2","license":"Apache-2.0","readme":"

    @nativescript/directions

    \n
    ns plugin add @nativescript/directions
    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

    \n\n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    API

    \n

    available

    \n

    Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

    \n
    JavaScript
    \n
    // require the plugin
    var directions = require('@nativescript/directions');

    // instantiate the plugin
    var directions = new directions.Directions();

    directions.Directions.available().then(function (avail) {
    \tconsole.log(avail ? 'Yes' : 'No');
    });
    \n
    TypeScript
    \n
    // require the plugin
    import { Directions } from '@nativescript/directions';

    // instantiate the plugin
    let directions = new Directions();

    directions.available().then((avail) => {
    \tconsole.log(avail ? 'Yes' : 'No');
    });
    \n

    navigate

    \n

    This function opens the native Maps app with a predefined from and to address.

    \n

    If you don't pass from the current location of the user will be used.

    \n

    If an address is specified then lat and lng will be ignored.

    \n

    If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

    \n

    Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

    \n
    JavaScript
    \n
    directions
    \t.navigate({
    \t\tfrom: {
    \t\t\t// optional, default 'current location'
    \t\t\tlat: 52.215987,
    \t\t\tlng: 5.282764,
    \t\t},
    \t\tto: {
    \t\t\t// either pass in a single object or an Array (see the TypeScript example below)
    \t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
    \t\t},
    \t\t// for platform-specific options, see the TypeScript example below.
    \t})
    \t.then(
    \t\tfunction () {
    \t\t\tconsole.log('Maps app launched.');
    \t\t},
    \t\tfunction (error) {
    \t\t\tconsole.log(error);
    \t\t}
    \t);
    \n
    TypeScript
    \n
    directions
    \t.navigate({
    \t\tfrom: {
    \t\t\t// optional, default 'current location'
    \t\t\tlat: 52.215987,
    \t\t\tlng: 5.282764,
    \t\t},
    \t\tto: [
    \t\t\t{
    \t\t\t\t// if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
    \t\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
    \t\t\t},
    \t\t\t{
    \t\t\t\taddress: 'Aak 98, Wieringerwerf, Netherlands',
    \t\t\t},
    \t\t],
    \t\ttype: 'walking', // optional, can be: driving, transit, bicycling or walking
    \t\tios: {
    \t\t\tpreferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
    \t\t\tallowGoogleMapsWeb: true, // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
    \t\t\tuseUniversalSyntax: true, // Prefer the Universal URL Syntax to the comgooglemaps:// url scheme. Useful if Google Maps does not load correctly.
    \t\t},
    \t\tandroid: {
    \t\t\tnewTask: true, // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
    \t\t},
    \t})
    \t.then(
    \t\t() => {
    \t\t\tconsole.log('Maps app launched.');
    \t\t},
    \t\t(error) => {
    \t\t\tconsole.log(error);
    \t\t}
    \t);
    \n

    Future work

    \n
      \n
    • Perhaps add Android-specific options like opening the map in StreetView mode, or pre-defining the transportation type (walk/bike/car).
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-trotter":{"name":"nativescript-couchbase-trotter","version":"1.0.19","license":"Apache-2.0","readme":"

    Couchbase Lite Plugin for Telerik NativeScript

    \n

    Couchbase Lite is a NoSQL embedded database for mobile devices. It is a replacement for common database technologies like SQLite and Core Data.

    \n

    Configuration

    \n

    To add this plugin to your Angular or vanilla JavaScript NativeScript project, execute the following from the Terminal or Command Prompt:

    \n
    tns plugin add nativescript-couchbase
    \n

    If you wish to try either of the demo applications that are bundled with this project, execute the following after cloning the repository:

    \n
    npm install
    npm run deploy-android-angular
    \n

    For the third line, the list of options are:

    \n
    npm run deploy-android-angular
    npm run deploy-android-vanilla
    npm run deploy-ios-angular
    npm run deploy-ios-vanilla
    \n

    If you're using TypeScript and wish to make use of the type definitions for this plugin, add the following line to your project's references.d.ts file:

    \n
    /// <reference path=\"./node_modules/nativescript-couchbase/couchbase.d.ts\" />
    \n

    Without the above line included, your TypeScript compiler may throw errors during the build.

    \n

    Usage

    \n

    Including the Plugin in Your Project

    \n
    var couchbaseModule = require(\"nativescript-couchbase\");
    \n

    Creating or Opening an Existing Database

    \n
    var database = new couchbaseModule.Couchbase(\"test-database\");
    \n

    Managing the Data with CRUD Operations

    \n

    Creating a New Document

    \n
    var documentId = database.createDocument({
        \"firstname\": \"Nic\",
        \"lastname\": \"Raboy\",
        \"address\": {
            \"city\": \"San Francisco\",
            \"state\": \"CA\",
            \"country\": \"USA\"
        }
        \"twitter\": \"https://www.twitter.com/nraboy\"
    });
    \n

    Retrieving an Existing Document

    \n
    var person = database.getDocument(documentId);
    \n

    Updating an Existing Document

    \n
    database.updateDocument(documentId, {
        \"firstname\": \"Nicolas\",
        \"lastname\": \"Raboy\",
        \"twitter\": \"https://www.twitter.com/nraboy\"
    });
    \n

    Deleting a Document

    \n
    var isDeleted = database.deleteDocument(documentId);
    \n

    Querying with MapReduce Views

    \n

    Knowing the document id isn't always an option. With this in mind, multiple documents can be queried using criteria defined in a view.

    \n

    Creating a MapReduce View

    \n

    A MapReduce View will emit a key-value pair. Logic can be placed around the emitter to make the views more specific.

    \n
    database.createView(\"people\", \"1\", function(document, emitter) {
        emitter.emit(document._id, document);
    });
    \n

    Querying a MapReduce View

    \n
    var rows = database.executeQuery(\"people\", {descending : false, limit : 20,  skip : 1, startKey: \"name to strat with\", endKey:\"name to end at\"});
    for(var i = 0; i < rows.length; i++) {
        personList.push(rows[i]);
    }
    \n

    The available options when querying a MapReduce View are as follows:

    \n
      \n
    • \n

      startKey: the key to start at. The default value, null, means to start from the beginning.

      \n
      • \n
    • \n

      endKey: the last key to return. The default value, null, means to continue to the end.

      \n
      • \n
    • \n

      descending: If set to true, the keys will be returned in reverse order. (This also reverses the meanings of the startKey and endKey properties, since the query will now start at the highest keys and end at lower ones!)

      \n
      • \n
    • \n

      limit: If nonzero, this is the maximum number of rows that will be returned.

      \n
      • \n
    • \n

      skip: If nonzero, this many rows will be skipped (starting from the startKey if any.)

      \n
      • \n
    \n

    Synchronization with Couchbase Sync Gateway and Couchbase Server

    \n

    Couchbase Lite can work in combination with Couchbase Sync Gateway to offer synchronization support between devices and platforms. Couchbase Sync Gateway is not a requirement to use Couchbase Lite if the goal is to only use it for offline purposes.

    \n

    Couchbase Sync Gateway can be downloaded via the Couchbase Downloads Portal in the mobile section.

    \n

    A demo configuration file for Sync Gateway is included in the demo directory. It can be started by executing the following from a Command Prompt or Terminal:

    \n
    /path/to/sync/gateway/bin/sync_gateway /path/to/demo/sync-gateway-config.json
    \n

    In the demo configuration file, Couchbase Server is not used, but instead an in-memory database good for prototyping. It can be accessed via http://localhost:4985/_admin/ in your web browser.

    \n

    To replicate between the local device and server, the following must be added to your project:

    \n
    var couchbaseModule = require(\"nativescript-couchbase\");
    database = new couchbaseModule.Couchbase(\"test-database\");

    var push = database.createPushReplication(\"http://sync-gateway-host:4984/test-database\");
    var pull = database.createPullReplication(\"http://sync-gateway-host:4984/test-database\");
    push.setContinuous(true);
    pull.setContinuous(true);
    push.start();
    pull.start();
    \n

    Data will now continuously be replicated between the local device and Sync Gateway.

    \n

    Listening for Changes

    \n
    database.addDatabaseChangeListener(function(changes) {
        for(var i = 0; i < changes.length; i++) {
            console.log(changes[i].getDocumentId());
        }
    });
    \n

    Plugin Development

    \n

    The Couchbase NativeScript plugin is under active development. Changes to the API are infrequent in the underlying Couchbase Android and Couchbase iOS SDKs so as a result changes are infrequent in the JavaScript wrapper for NativeScript.

    \n

    If you feel something is missing or you've found a bug, open a ticket so it can be corrected or submit a pull request and be recognized for your contributions.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@localization/l10n":{"name":"@localization/l10n","version":"2.1.7","license":"MIT","readme":"

    @localization/l10n

    \n
    \n

    Pure Angular localization (l10n) library.

    \n
    \n

    \"npm\n\"Build\n\"Known

    \n

    Demo

    \n

    Click here for preview

    \n

    Description

    \n
      \n
    • It's an Angular functional set (pipe, directive, service) used to localize application
      • \n
    • Compatible with Angular 2+ versions
      • \n
    • No external dependency
      • \n
    • Supported some of the most used localization files: .properties, .po, .json
      • \n
    • Load localization file/s when you need it
      • \n
    • Easily manage localization storage
      • \n
    • Customizable localization loader
      • \n
    \n

    Tested with

    \n
      \n
    • Firefox (latest)
      • \n
    • Chrome (latest)
      • \n
    • Chromium (latest)
      • \n
    • Edge
      • \n
    • IE11
      • \n
    \n

    Installing / Getting started

    \n
    npm install @localization/l10n
    \n

    Use the following snippet inside your app module:

    \n
    import { L10nModule, L10nService, LanguageCodes } from '@localization/l10n';
    ...
    ...

    @Injectable()
    export class LocalizationResolve implements Resolve {

        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }

        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }

    @NgModule({
        imports: [
            BrowserModule,
            L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
            RouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [LocalizationResolve],
        bootstrap: [AppComponent]
    })
    export class AppModule {}
    \n

    Use the following snippet inside your component:

    \n
    import { L10nService } from '@localization/l10n';


    @Component({
      ...
    })
    export class AppComponent {

      constructor(private localization: L10nService) {
      }
    }
    \n

    Use the following snippet inside your template:

    \n
    <div l10n=\"app.hello.key\" [l10n-args]=\"params\"></div>
    <div l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></div>
    <div l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></div>

    <div [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></div>
    <div [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></div>

    <div>{{'app.hello.key' | l10n:param }}</div>
    <div [innerHTML]=\"'app.hello.key' | l10n\"></div>
    <div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>
    \n

    NativeScript

    \n
    tns plugin add @localization/l10n
    \n

    Use the following snippet inside your app module:

    \n
    import { L10nModule, L10nService, L10nBaseLoader } from '@localization/l10n';
    import { knownFolders } from \"file-system\";
    import { Subject, Observable, from } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { Resolve } from \"@angular/router\";
    ...
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NativeScriptRouterModule } from \"nativescript-angular/router\";
    ...
    ...

    @Injectable()
    export class CustomLoader extends L10nBaseLoader {

        private readonly folderName = 'locales'; // folder where you place your locale files, 
                                                // in our case that is locales/en.locales.properties
        private readonly documents = knownFolders.currentApp();
        private readonly folder = this.documents.getFolder(this.folderName);

        public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
            let fileType = this.getFileExtension( url );                           
            let file = this.folder.getFile(url);

            return from(file.readText())
                    .pipe(map((response) => {
                        return { response, fileType }
                    }))    ;
        }
    }

    @Injectable()
    export class LocalizationResolve implements Resolve {

        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }

        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }

    @NgModule({
        imports: [
            NativeScriptModule,
            L10nModule.forRoot({ 
                config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
                loader: CustomLoader
            }),
            NativeScriptRouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [
            LocalizationResolve,
            L10nService, // because currently NativeScript doesn\\'t work with @Injectable({ providedIn: \\'root\\' })
            CustomLoader
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {}
    \n

    Use the following snippet inside your template:

    \n
    <ActionBar title=\"{{ 'app.header.title' | l10n }}\" class=\"action-bar\"></ActionBar>
    <ActionBar [title]=\"'app.hello.key' | l10n\"></ActionBar>
    <Label text=\"{{'app.hello.key' | l10n }}\"></Label>
    <Button text=\"{{'app.hello.key' | l10n }}\" (tap)=\"onTap($event)\"></Button>
    \n

    If bindingProperty in configuration is set to text l10 directive\nwill use it as default element property

    \n
    <Label l10n=\"app.hello.key\" [l10n-args]=\"params\"></Label>
    <Label l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></Label>
    <Label l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></Label>

    <Label [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></Label>
    <Label [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></Label>
    \n

    Developing

    \n

    Built With:

    \n
      \n
    • Angular
      • \n
    • RxJS
      • \n
    \n

    Setting up Dev

    \n

    This project was generated with Angular CLI version 6.0.7.

    \n

    Angular CLI must be installed before building L10n project.

    \n
    npm install -g @angular/cli
    \n
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run start
    \n

    Open "http://localhost:4200" in browser

    \n

    Versioning

    \n

    We use SemVer for versioning. For the versions available, see the link to tags on this repository.

    \n

    Tests

    \n

    This project was generated with Angular CLI version 6.0.7.

    \n

    Angular CLI must be installed before testing L10n project.

    \n
    npm install -g @angular/cli
    \n
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run test
    \n

    Contributing

    \n

    Want to help?

    \n

    Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

    \n

    Licensing

    \n

    L10n is freely distributable under the terms of the MIT license.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-layouts":{"name":"nativescript-nbmaterial-layouts","version":"1.0.1","license":"Apache-2.0","readme":"

    A nativescript utils for manipulating layouts

    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-utils":{"name":"nativescript-easy-utils","version":"1.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aminebizid/nativescript-adal":{"name":"@aminebizid/nativescript-adal","version":"1.1.1","license":"MIT","readme":"

    NativeScript Active Directory Authentication Library Plugin

    \n

    This plugin allows you to quickly add Azure Active Directory Authentication to your NativeScript app\nThanks to NavaraBV

    \n

    Prerequisites / Requirements

    \n

    Your application requires to be registered inside your Azure Active Directory (AAD). Visit the Azure Portal and log in with your organizational account. Grab your Azure AD Tenant ID and Application ID after registering your application.

    \n

    Installation

    \n
    tns plugin add @aminebizid/nativescript-adal
    \n

    Usage (Angular example)

    \n

    Import the AdalContext class in application in, for example, an 'AdalService' and initialize it.

    \n
    import { Injectable } from '@angular/core';
    import { AdalContext } from '@aminebizid/nativescript-adal';

    const authority: string = 'https://login.microsoftonline.com/{your-tenant-id}';
    const clientId: string = '{your-application-id}';
    const resourceId: string = '00000002-0000-0000-c000-000000000000';

    @Injectable()
    export class AdalService {

      public adalContext: AdalContext;

      constructor() {
        this.adalContext = new AdalContext(authority, clientId, resourceId);
      }
    }
    \n

    ...and consume this service in your application!

    \n
    export class AppComponent {

      constructor(private adalService: AdalService) { }

      public login() {
        this.adalService.adalContext.login().then((result) => {
          console.log('Success!');
        })
      }

      public logout() {
        this.adalService.adalContext.logout();
      }
    }
    \n

    License

    \n

    See LICENSE for details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-getui":{"name":"nativescript-easy-getui","version":"3.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radar-io":{"name":"nativescript-radar-io","version":"0.0.3","license":"Apache-2.0","readme":"

    NativeScript RadarIO

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    tns plugin add nativescript-radar-io
    \n

    To get a Radar publishable API key, sign up for a Radar account.

    \n

    IOS

    \n

    Configure project

    \n
    \n

    To track the user's location in the foreground, you must add a string for the NSLocationWhenInUseUsageDescription key in your Info.plist file if you haven't already. This string will be displayed when prompting the user for foreground location permissions.

    \n
    \n
    \n

    To track the user's location in the background, you must also add a string for the NSLocationAlwaysUsageDescription (iOS 10 and before) and NSLocationAlwaysAndWhenInUseUsageDescription (iOS 11 and later) keys in your Info.plist file if you haven't already. These strings will be displayed when prompting the user for background location permissions.

    \n
    \n
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>Your iOS 11 and higher background location usage description goes here. e.g., \"This app uses your location in the background to recommend places nearby.\"</string>

    <key>NSLocationAlwaysUsageDescription</key>
    <string>Your iOS 10 and lower background location usage description goes here. e.g., \"This app uses your location in the background to recommend places nearby.\"</string>

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Your foreground location usage description goes here. e.g., \"This app uses your location in the foreground to recommend places nearby.\"</string>
    \n

    For increased reliability and responsiveness in the background, you should also turn on Location updates. Note that this requires additional justification during App Store review. Learn more.

    \n

    Add to Info.plist

    \n
    <key>UIBackgroundModes</key>
    <array>
      <string>fetch</string>
      <string>location</string>
    </array>
    \n

    Usage

    \n

    Import module

    \n

    First, import the module:

    \n
    import { RadarIO } from 'nativescript-radar-io';
    \n

    Enable Places

    \n

    If you are using Places, you must set Facebook as your place data provider.

    \n

    To set Facebook as your place data provider, call:

    \n
    RadarIO.setPlacesProvider('facebook');
    \n

    To disable Places later, call:

    \n
    RadarIO.setPlacesProvider('none');
    \n

    Learn more about Places.

    \n

    Identify user

    \n

    Until you identify the user, Radar will automatically identify the user by device ID.

    \n

    To identify the user when logged in, call:

    \n
    RadarIO.setUserId(userId);
    \n

    where userId is a stable unique ID string for the user.

    \n

    Do not send any PII, like names, email addresses, or publicly available IDs, for userId. See privacy best practices for more information.

    \n

    To set an optional dictionary of custom metadata for the user, call:

    \n
    RadarIO.setMetadata(metadata);
    \n

    where metadata is a JSON object with up to 16 keys and values of type string, boolean, or number.

    \n

    Finally, to set an optional description for the user, displayed in the dashboard, call:

    \n
    RadarIO.setDescription(description);
    \n

    where description is a string.

    \n

    You only need to call these functions once, as these settings will be persisted across app sessions.

    \n

    Request permissions

    \n

    Before tracking the user's location, the user must have granted location permissions for the app.

    \n

    To determine the whether user has granted location permissions for the app, call:

    \n
    RadarIO.getPermissionsStatus().then((status) => {
      // do something with status
    });
    \n

    status will be a string, one of:

    \n
      \n
    • GRANTED
      • \n
    • DENIED
      • \n
    • UNKNOWN
      • \n
    \n

    To request location permissions for the app, call:

    \n
    RadarIO.requestPermissions(background);
    \n

    where background is a boolean indicating whether to request background location permissions or foreground location permissions. On Android, background will be ignored.

    \n

    Foreground tracking

    \n

    Once you have initialized the SDK, you have identified the user, and the user has granted permissions, you can track the user's location.

    \n

    To track the user's location in the foreground, call:

    \n
    RadarIO.trackOnce().then((result) => {
      // do something with result.location, result.events, result.user.geofences
    }).catch((err) => {
      // optionally, do something with err
    });
    \n

    err will be a string, one of:

    \n
      \n
    • ERROR_PUBLISHABLE_KEY: the SDK was not initialized
      • \n
    • ERROR_PERMISSIONS: the user has not granted location permissions for the app
      • \n
    • ERROR_LOCATION: location services were unavailable, or the location request timed out
      • \n
    • ERROR_NETWORK: the network was unavailable, or the network connection timed out
      • \n
    • ERROR_UNAUTHORIZED: the publishable API key is invalid
      • \n
    • ERROR_SERVER: an internal server error occurred
      • \n
    • ERROR_UNKNOWN: an unknown error occurred
      • \n
    \n

    Background tracking

    \n

    Once you have initialized the SDK, you have identified the user, and the user has granted permissions, you can start tracking the user's location in the background.

    \n

    To start tracking the user's location in the background, call:

    \n
    RadarIO.startTracking();
    \n

    Assuming you have configured your project properly, the SDK will wake up while the user is moving (usually every 3-5 minutes), then shut down when the user stops (usually within 5-10 minutes). To save battery, the SDK will not wake up when stopped, and the user must move at least 100 meters from a stop (sometimes more) to wake up the SDK. Note that location updates may be delayed significantly by iOS Low Power Mode, by Android Doze Mode and App Standby and Background Location Limits, or if the device has connectivity issues, low battery, or wi-fi disabled. These constraints apply to all uses of background location services on iOS and Android, not just Radar. See more about accuracy and reliability.

    \n

    Optionally, you can configure advanced tracking options. See the iOS background tracking documentation and Android background tracking documentation for descriptions of these options.

    \n
    RadarIO.startTracking({
      priority: 'responsiveness', // // use 'efficiency' to avoid Android vitals bad behavior thresholds (ignored on iOS)
      sync: 'possibleStateChanges', // use 'all' to sync all location updates ('possibleStateChanges' recommended)
      offline: 'replayStopped' // use 'replayOff' to disable offline replay ('replayStopped' recommended)
    });
    \n

    To stop tracking the user's location in the background (e.g., when the user logs out), call:

    \n
    RadarIO.stopTracking();
    \n

    You only need to call these methods once, as these settings will be persisted across app sessions.

    \n

    To listen for events, location updates, and errors, you can add event listeners:

    \n
    RadarIO.on('events', (result) => {
      // do something with result.events, result.user
    });

    RadarIO.on('location', (result) => {
      // do something with result.location, result.user
    });

    RadarIO.on('error', (err) => {
      // do something with err
    });
    \n

    Add event listeners outside of your component lifecycle (e.g., outside of componentDidMount) if you want them to work when the app is in the background.

    \n

    You can also remove event listeners:

    \n
    RadarIO.off('events');

    RadarIO.off('location');

    RadarIO.off('error');
    \n

    Battery usage

    \n

    For most users, background tracking with the native iOS and Android SDKs uses 1-2% battery per day. Learn more in the in the SDK documentation.

    \n

    On Android, a receiver loads and parses the JavaScript bundle when the app is launched in the background. If you do not want to receive events in JavaScript and you want to disable this, add an override to your manifest:

    \n
    <receiver
      tools:replace=\"android:enabled\"
      android:name=\"com.github.triniwiz.radario.Receiver\"
      android:enabled=\"false\"
      android:exported=\"false\" />
    \n

    Manual tracking

    \n

    You can manually update the user's location by calling:

    \n
    const location = {
      latitude: 39.2904,
      longitude: -76.6122,
      accuracy: 65
    };

    RadarIO.updateLocation(location).then((result) => {
      // do something with result.events, result.user.geofences
    }).catch((err) => {
      // optionally, do something with err
    });
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/fingerprint-auth":{"name":"@nativescript/fingerprint-auth","version":"8.1.0","license":"Apache-2.0","readme":"

    @nativescript/fingerprint-auth

    \n
    ns plugin add @nativescript/fingerprint-auth
    \n

    Then open App_Resources/Android/app.gradle and look for minSdkVersion.\nIf that's set to a version less than 23, add this overrideLibrary line to App_Resources/Android/src/main/AndroidManifest.xml:

    \n
      <uses-sdk
          android:minSdkVersion=\"17\"
          android:targetSdkVersion=\"__APILEVEL__\"
          tools:overrideLibrary=\"com.jesusm.kfingerprintmanager\"/>
    \n

    API

    \n

    Want a nicer guide than these raw code samples? Read Nic Raboy's blog post about this plugin.

    \n

    available

    \n

    JavaScript

    \n
    var fingerprintAuthPlugin = require('@nativescript/fingerprint-auth');
    var fingerprintAuth = new fingerprintAuthPlugin.FingerprintAuth();

    fingerprintAuth.available().then(function (avail) {
    \tconsole.log('Available? ' + avail);
    });
    \n

    TypeScript

    \n
    import { FingerprintAuth, BiometricIDAvailableResult } from \"@nativescript/fingerprint-auth\";

    class MyClass {
      private fingerprintAuth: FingerprintAuth;

      constructor() {
        this.fingerprintAuth = new FingerprintAuth();
      }

      this.fingerprintAuth.available().then((result: BiometricIDAvailableResult) => {
        console.log(`Biometric ID available? ${result.any}`);
        console.log(`Touch? ${result.touch}`);
        console.log(`Face? ${result.face}`);
      });
    }
    \n

    verifyFingerprint

    \n

    Note that on the iOS simulator this will just resolve().

    \n
    fingerprintAuth
    \t.verifyFingerprint({
    \t\ttitle: 'Android title', // optional title (used only on Android)
    \t\tmessage: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription
    \t})
    \t.then((enteredPassword?: string) => {
    \t\tif (enteredPassword === undefined) {
    \t\t\tconsole.log('Biometric ID OK');
    \t\t} else {
    \t\t\t// compare enteredPassword to the one the user previously configured for your app (which is not the users system password!)
    \t\t}
    \t})
    \t.catch((err) => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`))    ;
    \n

    verifyFingerprintWithCustomFallback (iOS only, falls back to verifyFingerprint on Android)

    \n

    Instead of falling back to the default Passcode UI of iOS you can roll your own.\nJust show that when the error callback is invoked.

    \n
    fingerprintAuth
    \t.verifyFingerprintWithCustomFallback({
    \t\tmessage: 'Scan yer finger', // optional, shown in the fingerprint dialog (default: 'Scan your finger').
    \t\tfallbackMessage: 'Enter PIN', // optional, the button label when scanning fails (default: 'Enter password').
    \t\tauthenticationValidityDuration: 10, // optional (used on Android, default 5)
    \t})
    \t.then(
    \t\t() => {
    \t\t\tconsole.log('Fingerprint was OK');
    \t\t},
    \t\t(error) => {
    \t\t\t// when error.code === -3, the user pressed the button labeled with your fallbackMessage
    \t\t\tconsole.log('Fingerprint NOT OK. Error code: ' + error.code + '. Error message: ' + error.message);
    \t\t}
    \t);
    \n

    Face ID (iOS)

    \n

    iOS 11 added support for Face ID and was first supported by the iPhone X.\nThe developer needs to provide a value for NSFaceIDUsageDescription, otherwise your app may crash.

    \n

    You can provide this value (the reason for using Face ID) by adding something like this to app/App_Resources/ios/Info.plist:

    \n
      <key>NSFaceIDUsageDescription</key>
      <string>For easy authentication with our app.</string>
    \n

    Security++ (iOS)

    \n

    Since iOS9 it's possible to check whether or not the list of enrolled fingerprints changed since\nthe last time you checked it. It's recommended you add this check so you can counter hacker attacks\nto your app. See this article for more details.

    \n

    So instead of checking the fingerprint after available add another check.\nIn case didFingerprintDatabaseChange returns true you probably want to re-authenticate your user\nbefore accepting valid fingerprints again.

    \n
    fingerprintAuth.available().then((avail) => {
    \tif (!avail) {
    \t\treturn;
    \t}
    \tfingerprintAuth.didFingerprintDatabaseChange().then((changed) => {
    \t\tif (changed) {
    \t\t\t// re-auth the user by asking for his credentials before allowing a fingerprint scan again
    \t\t} else {
    \t\t\t// call the fingerprint scanner
    \t\t}
    \t});
    });
    \n

    Changelog

    \n
      \n
    • 6.2.0 Fixed a potential bypass on iOS.
      • \n
    • 6.1.0 Fixed potentioal bypasses on Android.
      • \n
    • 6.0.3 Android interfered with other plugins' Intents.
      • \n
    • 6.0.2 Plugin not working correctly on iOS production builds / TestFlight.
      • \n
    • 6.0.1 Fixed a compatibility issues with NativeScript 3.4.
      • \n
    • 6.0.0 Allow custom UI on Android.
      • \n
    • 5.0.0 Better Face ID support. Breaking change, see the API for available.
      • \n
    • 4.0.1 Aligned with the official NativeScript plugin seed. Requires NativeScript 3.0.0+. Thanks, @angeltsvetkov!
      • \n
    • 4.0.0 Converted to TypeScript. Changed the error response type of verifyFingerprintWithCustomFallback.
      • \n
    • 3.0.0 Android support added. Renamed nativescript-touchid to nativescript-fingerprint-auth (sorry for any inconvenience!).
      • \n
    • 2.1.1 Xcode 8 compatibility - requires NativeScript 2.3.0+.
      • \n
    • 2.1.0 Added didFingerprintDatabaseChange for enhanced security.
      • \n
    • 2.0.0 Added verifyFingerprintWithCustomFallback, verifyFingerprint now falls back to the passcode.
      • \n
    • 1.2.0 You can now use the built-in passcode interface as fallback.
      • \n
    • 1.1.1 Added TypeScript definitions.
      • \n
    • 1.1.0 Added Android platform which will always return false for touchid.available.
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/nativescript-vueuse":{"name":"@vallemar/nativescript-vueuse","version":"0.0.16","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/storybook":{"name":"@nativescript/storybook","version":"1.0.0-alpha.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msal":{"name":"nativescript-msal","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript-msal

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@avergara/nativescript-aws-sdk":{"name":"@avergara/nativescript-aws-sdk","version":"0.0.2","license":"Apache-2.0","readme":"

    NativeScript AWS SDK

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n

    NativeScript 7x

    \n
      \n
    • ns plugin add @avergara/nativescript-aws-sdk
      • \n
    \n

    Usage

    \n

    Android

    \n

    Add the following services in the app/App_Resources/Android/AndroidManifest.xml

    \n
    <manifest ... >
        <application ... >
            ...
    <service android:name= \"com.amazonaws.mobileconnectors.s3.transferutility.TransferService\" android:enabled=\"true\" />
      </application>
    </manifest>
    \n

    TypeScript

    \n

    S3

    \n
    import { S3 } from 'nativescript-aws-sdk';
    S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
    \n
    import { S3 } from 'nativescript-aws-sdk';
    const s3 = new S3();
    const imageUploaderId = s3.createUpload({
      file: '~/assets/hulk_wolverine_x_men.jpg',
      bucketName: 'yaychat',
      key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
      acl: 'public-read',
      completed: (error, success) => {
        if (error) {
          console.log(`Download Failed :-> ${error.message}`);
        }
        if (success) {
          console.log(`Download Complete :-> ${success.path}`);
        }
      },
      progress: progress => {
        console.log(`Progress : ${progress.value}`);
      }
    });

    s3.pause(imageUploaderId);
    s3.resume(imageUploaderId);
    s3.cancel(imageUploaderId);
    \n

    JavaScript

    \n
    const S3 = require('nativescript-aws-sdk').S3;
    S3.S3.init({ endPoint: '', accessKey: '', secretKey: '', type: 'static' }); // <= Try calling this before the app starts
    \n
    const imageUploaderId = s3.createUpload({
      file: '~/assets/hulk_wolverine_x_men.jpg',
      bucketName: 'yaychat',
      key: `ns_${isIOS ? 'ios' : 'android'}_hulk_wolverine_x_men.jpg`,
      acl: 'public-read',
      completed: (error, success) => {
        if (error) {
          console.log(`Download Failed :-> ${error.message}`);
        }
        if (success) {
          console.log(`Download Complete :-> ${success.path}`);
        }
      },
      progress: progress => {
        console.log(`Progress : ${progress.value}`);
      }
    });

    s3.pause(imageUploaderId);
    s3.resume(imageUploaderId);
    s3.cancel(imageUploaderId);
    \n

    Api

    \n

    S3

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultTypeDescription
    createDownload(options: S3DownloadOptions)numberCreates a task it returns the id of the task
    createUpload(options: S3UploadOptions)numberCreates a task it returns the id of the task
    resume(id: number)voidResumes a task.
    cancel(id: number)voidCancels a task.
    pause(id: number)voidPauses a task.
    \n

    Example Image

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    IOSAndroid
    \"IOS\"\"Android\"
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/tslint-rules":{"name":"@nativescript/tslint-rules","version":"0.0.5","license":"Apache-2.0","readme":"

    NativeScript TSLint Rules

    \n

    \"Build

    \n

    This project contains tslint rules useful for NativeScript applications.

    \n

    prefer-mapped-imports rule

    \n

    Prefer using mapped paths when importing external modules or ES6 import declarations.

    \n
    \n

    Note: This rule is intended for code-sharing NativeScript projects

    \n
    \n

    Options

    \n
      \n
    • prefix specifies the prefix for the mapped imports (usually "@src/").
      • \n
    • prefix-mapped-to specifies folder that is mapped to the prefix (usually "src/").
      • \n
    • base-url specifies the base url of the typescript program (usually ".")`
      • \n
    \n

    Sample rule config (tslint.json):

    \n
    \"prefer-mapped-imports\": [
        true,
        {
            \"prefix\": \"@prefix/\",
            \"prefix-mapped-to\": \"src/\",
            \"base-url\": \".\"
        }
    ]
    \n

    Autofix

    \n

    The rule will propose a fix if:

    \n
      \n
    • Has all the configurations in the tslint.json
      • \n
    • Used in typescript project with baseUrl and path mappings for either web or mobile files.
      • \n
    \n

    no-android-resources rule

    \n

    The rule forbids using constants inside android.R as they cause performance issues.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-fancyalert":{"name":"@nstudio/nativescript-fancyalert","version":"4.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-fancyalert

    \n

    Fancy alerts for NativeScript.

    \n

    Based on:

    \n\n

    Install

    \n

    \"Sample

    \n

    \"Sample

    \n

    iOS Specifications

    \n

    Usage Examples

    \n
    import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';

    // show success
    TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!');

    // set customizations
    TNSFancyAlert.showAnimationType = TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;
    TNSFancyAlert.hideAnimationType = TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;
    TNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;
    TNSFancyAlert.soundURL = 'bell.mp3';
    TNSFancyAlert.showSuccess('Sound?', 'You can use sound and customize many aspects like animation in/out, color, background style and much more.', 'Amazing!');

    // show custom image
    TNSFancyAlert.showCustomImage('nativescript.png', '#2B33FF', 'Custom Image', `Using your own images is sure nice.`, 'Yes!');

    // show custom button timer
    TNSFancyAlert.showCustomButtonTimer(0, true, undefined, undefined, 'Mission Impossible', `This will self-destruct in 5 seconds.`, 'Ok');

    // show custom buttons
    let buttons = [
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'One',
    \t\taction: () => {
    \t\t\tconsole.log('One');
    \t\t},
    \t}),
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Two',
    \t\taction: () => {
    \t\t\tconsole.log('Two');
    \t\t},
    \t}),
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Three',
    \t\taction: () => {
    \t\t\tconsole.log('Three');
    \t\t},
    \t}),
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Four',
    \t\taction: () => {
    \t\t\tconsole.log('Four');
    \t\t},
    \t}),
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Really? More?',
    \t\taction: () => {
    \t\t\tconsole.log('more');
    \t\t},
    \t}),
    ];
    TNSFancyAlert.showCustomButtons(buttons, undefined, undefined, 'Got Buttons?', `Add as many as you'd like.`, 'Ok');

    // show with custom width
    TNSFancyAlert.showSuccess('Success!', 'This uses a custom width of 300.', `Oh that's nice.`, 0, 300);

    // show textfield
    let initialValue = null;
    TNSFancyAlert.showTextField(
    \t'Enter your name',
    \tinitialValue,
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Save',
    \t\taction: (value: any) => {
    \t\t\tconsole.log(`User entered ${value}`);
    \t\t},
    \t}),
    \tundefined,
    \tundefined,
    \t'User Input?',
    \t`Yeah, sure we can.`,
    \t'Ok, lots of options.'
    );

    // show switch
    TNSFancyAlert.showSwitch(
    \t`Don't show again`,
    \t'#58B136',
    \tnew TNSFancyAlertButton({
    \t\tlabel: 'Save',
    \t\taction: (isSelected: boolean) => {
    \t\t\tconsole.log(`Don't show again was selected: ${isSelected}`);
    \t\t},
    \t}),
    \t'switch.png',
    \t'#B3714F',
    \t'Need a switch?',
    \t`It can be useful.`,
    \t'Got it.'
    );
    \n

    TNSFancyAlert - Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    TNSFancyAlert.SUPPORTED_TYPES: IFancyAlertSupportedTypesDifferent supported style types.
    TNSFancyAlert.shouldDismissOnTapOutside: booleanShould dismiss when tapped outside.
    TNSFancyAlert.dismissCallback: () => voidCallback for when alert is dismissed.
    TNSFancyAlert.hideAnimationType: IFancyAlertHideAnimationTypesUse TNSFancyAlert.HIDE_ANIMATION_TYPES to set. Supports: FadeOut, SlideOutToBottom, SlideOutToTop, SlideOutToLeft, SlideOutToRight, SlideOutToCenter, SlideOutFromCenter.
    TNSFancyAlert.showAnimationType: IFancyAlertShowAnimationTypesUse TNSFancyAlert.SHOW_ANIMATION_TYPES to set. Supports: FadeIn, SlideInFromBottom, SlideInFromTop, SlideInFromLeft, SlideInFromRight, SlideInFromCenter, SlideInToCenter.
    TNSFancyAlert.backgroundType: IFancyAlertBackgroundTypesUse TNSFancyAlert.BACKGROUND_TYPES to set. Supports: Shadow, Blur, Transparent.
    TNSFancyAlert.customViewColor: stringOverwrite (Buttons, top circle and borders) colors.
    TNSFancyAlert.iconTintColor: stringSet custom tint color for icon image.
    TNSFancyAlert.titleColor: stringSet custom title color.
    TNSFancyAlert.bodyTextColor: stringSet custom body text color.
    TNSFancyAlert.tintTopCircle: stringOverride top circle tint color with background color
    TNSFancyAlert.cornerRadius: numberSet custom corner radius.
    TNSFancyAlert.backgroundViewColor: stringOverwrite background color
    TNSFancyAlert.useLargerIcon: booleanMake the top circle icon larger
    TNSFancyAlert.soundURL: stringUse mp3 from App_Resources when alert shows.
    TNSFancyAlert.textDisplayOptions: IFancyAlertTextOptionsIOS Only. Text display options
    \n

    TNSFancyAlert - Methods

    \n
      \n
    • showSuccess(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showError(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showNotice(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showWarning(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showInfo(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showEdit(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showWaiting(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showQuestion(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showCustomButtonTimer(buttonIndex: number, reverse?: boolean, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomImage(imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomButtons(buttons: Array<TNSFancyAlertButton>, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomTextAttributes(attributionBlock: Function, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showTextField(placeholder: string, initialValue: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showSwitch(switchLabel: string, switchColor: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • showCustomView(customView: any, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)
      • \n
    • show(type: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array<TNSFancyAlertButton>)
      • \n
    • showCustom(alert: any, imageName: string, color: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number)
      • \n
    • createAlert(width?: number)
      • \n
    \n

    Android Specifications

    \n

    Usage Examples

    \n

    NOTE: Android supports only a subset of the iOS features, but will return a Promise on every call:

    \n
    import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';

    // show success
    TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!').then(() => {
    \t/* user pressed the button */
    });

    // show error
    TNSFancyAlert.showError('Error!', 'Something bad happened.', 'Close').then(() => {
    \t/* user pressed the button */
    });
    \n

    TNSFancyAlert - Methods

    \n
      \n
    • showSuccess(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showError(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showNotice(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showWarning(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • showInfo(title: string, subTitle?: string, closeBtnTitle?: string): Promise<any>
      • \n
    • \n
      showColorDialog(
        title: string,
        subTitle?: string,
        okBtnTitle?: string,
        cancelBtnTitle?: string,
        backgroundColor?: string,
        titleTextColor?: string,
        contextTextColor?: string,
        contentImage?: any
      ): Promise<any>```
      \n
      • \n
    \n

    TNSFancyAlertButton (iOS only)

    \n

    This class can be instantiated on iOS to configure buttons in the fancy alerts.

    \n
    export class TNSFancyAlertButton {
      public label: string;
      public action: Function;
      public applyStyle: (btn: any) => void;

      constructor(model?: any) {
        if (model) {
          this.label = model.label;
          this.action = model.action;
          this.applyStyle = model.applyStyle;
        }
      }
    }
    \n
      \n
    • label: display text on the button
      • \n
    • action: the method to invoke when the button is tapped on
      • \n
    • applyStyle: a method you can configure to style the button however you'd like using iOS properties. This method will hand back an instance of SLCButton which inherits from UIButton. You can see more of what methods are available on this class here.
      • \n
    \n

    Here's an example of how to setup a custom background color:

    \n
    new TNSFancyAlertButton({
      label: 'Ok',
      action: () => {
        // the action to take
      },
      applyStyle: (btn: UIButton) => {
        // we can use UIButton typing when using tns-platform-declarations
        // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )
        // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize

        (<any>btn).buttonFormatBlock = () => {
          // set a custom backgroundColor
          return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);
        }
      }
    }),
    \n

    Tutorials

    \n

    Need extra help getting these fancy alerts working in your application? Check out these tutorials that make use of the plugin:

    \n

    Fancy Alerts in a NativeScript with Angular Application

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@shumih/nativescript-segmented-bar":{"name":"@shumih/nativescript-segmented-bar","version":"9.0.5","license":"Apache-2.0","readme":"

    nativescript-segmented-bar

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @shumih/nativescript-segmented-bar
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mtmobile-sqlite":{"name":"nativescript-mtmobile-sqlite","version":"1.3.0","license":"Apache-2.0","readme":"

    Nativescript: MtMobile Sqlite

    \n

    \"Build \"npm

    \n

    Installation

    \n
    tns plugin add nativescript-mtmobile-sqlite
    \n

    Usage

    \n

    You should take care of wrapping sqlite calls to your preferred async option (promises, observables, async/await). And catch any exceptions thrown.

    \n
    import { openOrCreate, deleteDatabase } from \"nativescript-mtmobile-sqlite\";

    const sqlite = openOrCreate(\"path/to/db\");
    sqlite.execute(\"CREATE TABLE names (id INT, name TEXT)\");
    sqlite.transaction(cancelTransaction => {
        // Calling cancelTransaction will rollback all changes made to db
        names.forEach((name, id) =>
            sqlite.execute(
                \"INSERT INTO names (id, name) VALUES (?, ?)\",
                [id, name]
            )
        );
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http":{"name":"nativescript-http","version":"1.0.8","license":"Apache-2.0","readme":"

    installation

    \n

    Install nativescript-http into an existing NativeScript project

    \n
    npm i nativescript-http
    \n

    Usage

    \n

    Core (global)

    \n

    If you are using TypeScript, then add this to your app.ts file.

    \n
    app.ts
    \n
    declare global {
      // eslint-disable-next-line no-unused-vars
      module NodeJS {
        // eslint-disable-next-line no-unused-vars
        interface Global {
          http: HttpClient;
        }
      }
    }
    \n

    Add the http module globaly

    \n
    app.ts
    \n
    import { HttpClient } from 'nativescript-http'

    global.http = new HttpClient({
      baseUrl: 'https://achrafbardan.me', // optional
      unauthenticatedCallback: (response) => { // optional
        console.log(response.content);
      },
      // When an http response code is inside this array the above function will run
      unauthenticatedStatusCodes: [201] // optional
    });
    \n

    Make a request

    \n
    main-page-model.ts
    \n
    makeRequest() {
      global.http.request({
        method: 'get',
        url: '/users',
        content: JSON.stringify({
          id: 1
        }),
        dontFollowRedirects: false,
        headers: {
          \"Content-Type\": \"application/json\"
        },
        timeout: 0
      }).then(response => {
        console.log(response.content)
      })
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-editor-with-fixed-textfield":{"name":"nativescript-photo-editor-with-fixed-textfield","version":"61.1.0","license":"Apache-2.0","readme":"

    NativeScript Photo Editor

    \n

    \"Build\n\"npm\n\"npm\n\"npm\"

    \n

    A NativeScript photo editor. It allows you to crop, draw something on your image or add some text.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-photo-editor

    \n

    This command automatically installs the necessary files, as well as stores nativescript-photo-editor as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Methods

    \n
      \n
    • editPhoto(options): Promise
      \nOpens the photo editor with the given options. If the user accepts the edited image the promise is resolved with an instance of the new ImageSource. If the user cancels the edit the promise will be rejected.
      • \n
    \n

    Usage

    \n

    Simply create an instance of the photo editor, pass the image you want to edit and which editor controls you don't want to use (if any) an that's it!

    \n
    import { PhotoEditor, PhotoEditorControl } from \"nativescript-photo-editor\";

    const photoEditor = new PhotoEditor();

    photoEditor.editPhoto({
        imageSource: originalImage.imageSource,
        hiddenControls: [
            PhotoEditorControl.Save,
            PhotoEditorControl.Crop,
        ],
    }).then((newImage: ImageSource) => {
        // Here you can save newImage, send it to your backend or simply display it in your app
        resultImage.imageSource = newImage;
    }).catch((e) => {
        console.error(e);
    });
    \n

    Usage in Angular

    \n

    There is no difference in usage between Core and Angular. So you can refer to the above usage examples on how to use this plugin with Angular.

    \n

    Demos

    \n

    This repository includes a plain NativeScript demo. In order to run it execute the following in your shell:

    \n
    $ git clone https://github.com/peterstaev/nativescript-photo-editor
    $ cd nativescript-photo-editor
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    Donate

    \n

    \"Donate\"

    \n

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    \n

    \"Donate\"

    \n

    Credits

    \n
      \n
    • For iOS this uses the iOSPhotoEditor pod (https://cocoapods.org/pods/iOSPhotoEditor)
      • \n
    • For Android uses adjusted code with added cropping from https://github.com/eventtus/photo-editor-android
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braze":{"name":"nativescript-braze","version":"1.1.3","license":"MIT","readme":"

    nativescript-braze

    \n

    NOTE: Not all functions have been implemented yet. Feel free to contribute.\nThis plugin is based on the appboy-react-sdk.

    \n

    SDK Integration

    \n\n

    Running the Sample App

    \n

    The following commands apply to both sample projects and use the AppboyProject directory as an example.

    \n
    cd demo-angular/
    npm install
    \n

    iOS

    \n

    From the demo-angular directory:

    \n
    tns run ios
    \n

    From the src directory:

    \n
    npm run demo-angular.ios
    \n

    Android

    \n

    From the demo-angular directory:

    \n
    tns run android
    \n

    From the src directory:

    \n
    npm run demo-angular.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@juit/nativescript-barcodeview":{"name":"@juit/nativescript-barcodeview","version":"1.1.3","license":"Apache-2.0","readme":"

    Barcode-Scanning View for NativeScript 7

    \n

    This package implements a minimalistic barcode-scanning View for\nNativeScript (from v. 7).

    \n\n

    Sample

    \n

    \"Sample\"

    \n

    Attributes

    \n

    The BarcodeScannerView exposes a few attributes to control the operation of\nbarcode scanning:

    \n

    XML

    \n
    <BarcodeScannerView
      formats=\"QR_CODE, CODE_39\"
      preferFrontCamera=\"false\"
      isPaused=\"false\"
      (scanResult)=\"barcodeScanned($event)\"
    />
    \n

    TypeScript

    \n
    import { ScanResultEventData } from '@juit/nativescript-barcodeview'

    export function barcodeScanned(event: ScanResultEventData) {
      alert(`Scanned \"${event.format}\" barcode: ${event.text}`)
    }
    \n

    formats

    \n

    The formats property is defined as a KnownBarcodeFormat[] and informs the\nbarcode scanner what formats should be recognized.

    \n

    When specified as a string, the formats are case-insensitive, comma and/or\nwhitespace separated

    \n

    See Barcode Formats below for a list of supported formats.

    \n

    The default (empty array) represents all supported formats.

    \n

    isPaused

    \n

    The isPaused boolean attribute specifies whether barcode scanning is\nrunning (false) or paused (true)paused or running.

    \n

    preferFrontCamera

    \n

    The preferFrontCamera boolean attribute specifies whether preferentially\nthe scanner should use the back camera (false) or the front one (true).

    \n

    Events

    \n

    The scanResult event is triggered once a barcode has been scanned. The event\ninstance associated with this is a ScanResultEventData defined as follows:

    \n
    export interface ScanResultEventData extends EventData {
      /** The event name, always `scanResult` */
      eventName: ScanResultEvent,
      /** The `BarcodeScannerView` source of this event */
      object: BarcodeScannerView,
      /** The `BarcodeFormat` of the scanned barcode */
      format: BarcodeFormat;
      /** The text contained in the scanned barcode */
      text: string;
    }
    \n

    Clearing results

    \n

    The BarcodeScannerView will not emit a scanResult event once it detects the\nsame barcode. To clear the last result and be notified of the same barcode, you\ncan call the clearScanResult() method on its instance.

    \n
    barcodeScannerView.on('scanResult', (result: ScanResultEventData) => {
      // do something with the result and then clear it,
      // allowing it to be reported it once more
      result.object.clearScanResult()
    })
    \n

    Dismissal

    \n

    Make sure that the BarcodeScannerView's own disposeNativeView() is called\nto release the camera and barcode-scanning resources

    \n

    Image Parsing

    \n

    In some cases (e.g. simulators) it might be necessary to simulate the scanning\nof a barcode using an image stored on the device.

    \n

    While this library doesn't support picking images (see the wonderful\n@nativescript/imagepicker\nplugin for a good implementation), it offers function to scan ImageAssets.

    \n
    import { parseBarcodes, BarcodeFormat } from '@juit/nativescript-barcodeview'

    const ImageAsset asset = // ... get this with '@nativescript/imagepicker'

    parseBarcode(asset, [ BarcodeFormat.QR_CODE ])
      .then((result: scanResult) => {
        console.log(`Scanned \"${event.format}\" barcode from image: ${event.text}`)
      })
    \n

    Barcode Formats

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FormatiOSAndroid
    AZTEC✓✓
    CODABAR✗✓
    CODE_128✓✓
    CODE_39✓✓
    CODE_39_MOD_43✓✗
    CODE_93✓✓
    DATA_MATRIX✓✓
    EAN_13✓✓
    EAN_8✓✓
    INTERLEAVED_2_OF_5✓✗
    ITF_14✓✓
    MAXICODE✗✓
    PDF_417✓✓
    QR_CODE✓✓
    RSS_14✗✓
    RSS_EXPANDED✗✓
    UPC_A✗✓
    UPC_E✓✓
    UPC_EAN_EXTENSION✗✓
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngxplayer":{"name":"nativescript-ngxplayer","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediapicker":{"name":"nativescript-mediapicker","version":"1.2.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace":{"name":"nativescript-dynatrace","version":"1.0.4","license":"Apache-2.0","readme":"

    Nativescript Dynatrace plugin for Android and iOS

    \n

    Auto-instrument your application with Dynatrace and to prepare it for monitoring.

    \n

    Prerequisites / Requirements

    \n

    You need a Dynatrace account and the credentials of your Dynatrace Application (DTXApplicationID,\nDTXAgentEnvironment and DTXClusterURL).

    \n

    Installation

    \n

    First, you need to add the Nativescript Dynatrace plugin:

    \n
    tns plugin add nativescript-dynatrace\n
    \n

    Then, you need to create a file named dynatrace-service.json or dynatrace-service.js in the project root or in\nNAME_PROJECT/app/App_Resources/ with the following structure:

    \n
    module.exports = {
      DTXAgentEnvironment: string,
      DTXAllowAnyCert: boolean,
      DTXApplicationID: string,
      DTXAutoActionMaxDurationMilliseconds: int,
      DTXAutoActionTimeoutMilliseconds: int,
      DTXAutoStart: boolean,
      DTXBKSFileName: string,
      DTXBKSPassword: string,
      DTXClusterURL: boolean,
      DTXCrashReportingEnabled: boolean,
      DTXExcludePackages: string,
      DTXHybridApplication: boolean,
      DTXIncludeAllPackages: boolean,
      DTXIncludePackages: string,
      DTXInstrumentAutoUserAction: boolean,
      DTXInstrumentGPSLocation: boolean,
      DTXInstrumentLifecycleMonitoring: boolean,
      DTXInstrumentWebRequestTagging: boolean,
      DTXInstrumentWebRequestTiming: boolean,
      DTXLogLevel: string,
      DTXManagedCluster: boolean,
      DTXMonitorCookie: string,
      DTXMultiDexKeep: string,
      DTXMultiDexKeepFile: string,
      DTXPrimaryDexLimit: int,
      DTXSecondaryDexLimit: int,
      DTXSetCookiesForDomain: string,
      DTXUserOptIn: boolean,
      DTXVersionCode: int,
      DTXVersionName: string,
    };
    \n

    Here\nyou can find all the auto-instrumentation properties that you can customize.

    \n

    How this plugin works

    \n

    Work in progress...

    \n

    API

    \n

    Work in progress...

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-networking":{"name":"nativescript-simple-networking","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/yaqwsx/nativescript-simple-networking/blob/master/LICENSE"},"readme":"

    NativeScript Simple Networking

    \n

    Basic UDP and TCP sockets for NativeScript.

    \n

    Supported platforms

    \n
      \n
    • Android (any device with Android 4.4 and higher)
      • \n
    \n

    There is no support for iOS (yet), as I am not an iOS developer. Contributions\nfor adding iOS support are welcome!

    \n

    Installing

    \n
    tns plugin add nativescript-simple-networking
    \n

    Usage

    \n

    This plugin provides three classes: UdpServer, TcpClient and TcpServer.\nAll of them provide similar, callback-based, interface. An example of usage is\nworth a thousands words and therefore here is a TypeScript example:

    \n
    import {UdpServer, TcpClient, TcpServer} from \"nativescript-simple-networking\";
    import {Address4} from \"ip-address\";

    var udpServer = new UdpServer();
    udpServer.onPacket = (sender: Address4, message: string) => {
        console.log(\"Message from UDP: \", message);
    };
    udpServer.onError = (id: number, message: string) => {
        console.log(\"UDP error for action #\", id, \": \", message);
    };
    udpServer.onFinished = (id: number) => {
        console.log(\"UDP finished action #\", id);
    };

    // Start listening on port 33333
    var udpConnectEvent: number = udpServer.start(33333);
    console.log(\"UDP start event is: \", udpConnectEvent);
    // Broadcast a message
    var udpBroadcastEvent: number = udpServer.send(\"255.255.255.255\", \"I am alive!\");
    console.log(\"UDP broadcast event is: \", udpBroadcastEvent);

    // Start a TCP server listening on port 44444 with maximum 2 clients
    var tcpServer = new TcpServer(2);
    tcpServer.onClient = (client: Address4) => {
        console.log(\"New TCP client: \", client.adddress)
        tcpServer.send(client, \"Welcome!\");
    };
    tcpServer.onData = (client: Address4, data: string) => {
        console.log(\"New data from client \", client.address, \": \", data);
    };
    tcpServer.onError = (id: number, client: Address4, message: string) => {
        if (client)
            console.log(\"TCP server client error\", client.address, \": \", message);
        else
            console.log(\"TCP server error: \", message);
    };
    tcpServer.onFinished = (id: number) => {
            console.log(\"TCP server finished transaction #\", id);
    };

    tcpServer.start(44444);

    // Connect to the TCP server
    var tcpClient = new TcpClient();
    tcpClient.onData = (data: string) => {
        console.log(\"Data from TCP client: \", data);
    };
    tcpClient.onError = (id: number, message: string) => {
        console.log(\"TCP client error for action #\", id, \": \", message);
    };
    tcpClient.onFinished = (id: number) => {
        console.log(\"TCP client finished action #: \", id);
    };

    // Connect client, action IDs are ommited in this example - see UdpServer
    tcpClient.start(\"localhost\", 44444);
    tcpClient.send(\"I am also alive!\");

    // When we are finished
    udpServer.stop();
    TcpServer.stop();
    TcpClient.stop();
    \n

    Contributing

    \n

    Any contributions are welcome, feel free to submit a pull request on GitHub. I\nwould appreciate a PR, which would add support for iOS.

    \n

    Future Plans

    \n
      \n
    • support iOS
      • \n
    • implement a wrapper for future-based interface
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-master-detail-angular2":{"name":"nativescript-master-detail-angular2","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript master detail Angular template

    \n

    \"master\"\n\"detail\"

    \n

    ##Usage

    \n

    ###Init

    \n
    tns create my-app-name --template https://github.com/avatsaev/nativescript-master-detail-angular2.git
    \n

    ###Launch

    \n
    tns livesync (ios|android) --watch
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nodemedia":{"name":"nativescript-nodemedia","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-nodemedia

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-nodemedia
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-googleadsdk":{"name":"nativescript-googleadsdk","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-googleadsdk

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-googleadsdk
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-cscreenshot":{"name":"@enduco/nativescript-cscreenshot","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Cscreenshot :camera:

    \n

    This plugin was created so you can take screenshots of views easily and then store it as you like.

    \n

    this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

    \n

    Installation

    \n

    Use the install command:

    \n
    tns plugin add @enduco/nativescript-cscreenshot
    \n

    Usage

    \n

    Just import the plugin in your project and use it like this

    \n

    using Typescript:

    \n
        import { Cscreenshot } from \"@enduco/nativescript-cscreenshot\";
        import { ImageSource } from \"@nativescript/core\";

        // then in your take a screenshot method
        let screen = new Cscreenshot();

        // Using vanilla Nativescript
        let view = page.getViewById('main');

        // Using Angular Nativescript
        @ViewChild(\"main\", { static: true }) main: ElementRef;
        let view = this.view.nativeElement;

        // Using Vue Nativescript
        let view = this.$refs.main.nativeView;

        screen.take(view, (image: ImageSource)=>{
            // Do whatever you want with the returned source image
        });
    \n
    and in your template\n
    \n
        <!-- Assign the reference name depending on the framework -->
        <!-- 'id=\"\"' for vanilla nativescript -->
        <!-- '#main' for angular nativescript -->
        <!-- 'ref=\"main\"' for Vue nativescript -->
        <GridLayout id=\"main\" #main ref=\"main\">
            <!-- Content of your app here -->
        </GridLayout>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-odoo":{"name":"nativescript-odoo","version":"2.0.1","license":"Apache-2.0","readme":"

    NativeScript Odoo Client (API)

    \n

    Installation

    \n

    Run

    \n
    tns plugin add nativescript-odoo
    \n

    Basic method support

    \n
      \n
    • Version information
      • \n
    • Authentication
      • \n
    • Basic Model methods (search_read, create, read, write, unlink, onchange, read_group)
      • \n
    \n

    Usage

    \n
    // home.component.ts
    import { Component } from \"@angular/core\";
    import { OdooClient } from \"nativescript-odoo/odoo-api/odoo-client\";

    @Component({
        selector: \"Home\",
        templateUrl: \"./home.component.html\",
    })
    export class HomeComponent {
        public odooClient: OdooClient;
        public serverUrl = \"http://yourdomain.com\";
        public username = \"username\";
        public password = \"username\";

        constructor() {
            this.test();
        }

        async test() {
            // Get Odoo Client instance
            this.odooClient = OdooClient.getInstance();

            // Set Odoo Server Url
            this.odooClient.setServerUrl(this.serverUrl);

            // Connect Odoo server and get version
            let versionInfo;
            try {
                versionInfo = await this.odooClient.connect();
                console.log(\"=> Version info\");
                console.dir(versionInfo);
            } catch (err) {
                alert(err);
            }

            // Get database
            let databases;
            if (versionInfo) {
                try {
                    databases = await this.odooClient.getDatabases();
                    console.log(\"=> Database\");
                    console.dir(databases);
                } catch (err) {
                    alert(err);
                }
            }

            // Authentication with username and password
            let userInfo;
            try {
                userInfo = await this.odooClient.authenticate(this.username, this.password, databases[0]);
                console.log(\"=> User info\");
                console.dir(userInfo);
            } catch (err) {
                alert(err);
            }

            // Logout
            try {
                await this.odooClient.logout();
                console.log(\"=> Logout successfully\");
            } catch (err) {
                alert(err);
            }
        }
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hockeyapp":{"name":"nativescript-hockeyapp","version":"1.0.1","license":"Apache-2.0","readme":"

    HockeyApp SDK for NativeScript

    \n

    A NativeScript plugin for the HockeyApp SDK (iOS and Android)

    \n
    \n

    This plugin installs the HockeyApp SDK in NativeScript projects and provides a common API for using in iOS and Android projects.

    \n

    How to use

    \n

    Run the following command in the root of your project:

    \n
    $ tns plugin add nativescript-hockeyapp
    \n

    The SDK wrapper and init mechanism is shamelessly copied from the Fabric plugin. Before running an app with this plug-in, you will need an APP_ID from the HockeyApp service. Visit the HockeyApp website to obtain a key for your app. Enter that key in the AndroidManifest.xml or Info.plist.

    \n

    iOS

    \n

    Add the HockeyApp APP_ID to the /app/App_Resources/iOS/Info.plist file:

    \n
    <key>HockeyAppId</key>
    <string>${APP_ID}</string>
    \n

    The iOS version of this plugin uses the HockeyApp SDK CocoaPod. See the HockeyApp SDK CocoaPod docs for additional configuration options.

    \n

    NOTE: As of version 1.2.0, this plugin requires XCode 8.3+. If you use an older version of XCode, you may see invalid bitcode version errors when trying to build NativeScript projects that include this plugin.

    \n

    Using build.xcconfig

    \n

    On iOS, you also have the option of putting your HockeySDK APP_ID in the build.xcconfig file rather than directly embedding in Info.plst. This can help if, for example, you want to avoid putting SDK keys in source control.

    \n

    Using the Info.plist syntax above with the ${APP_ID} key, simply add this line to build.xcconfig:

    \n
    APP_ID = YOUR-HOCKYSDK-APP-ID
    \n

    During builds, the value from build.xcconfig will replace the ${APP_ID} key in Info.plist.

    \n

    Android

    \n

    Add the HockeyApp APP_ID to the /app/App_Resources/Android/AndroidManifest.xml file:

    \n
    <meta-data android:name=\"net.hockeyapp.android.appIdentifier\" android:value=\"${APP_ID}\" />
    \n

    Usage

    \n

    After the plug-in has been installed and the APP_ID has been configured, simply import and init the plugin.

    \n
    import { HockeyApp } from 'nativescript-hockey-sdk';
    ...
    HockeyApp.init();
    HockeyApp.trackEvent(\"LOG_IN\");
    \n

    To init on app launch, import and init in your app.ts or app.js file in the launchEvent handler:

    \n
    app.on(app.launchEvent, function(context) {
        HockeyApp.init();
    });
    \n

    If you're using Angular, you could alternatively use the AppModule constructor:

    \n
    export class AppModule {
      constructor() {
        HockeyApp.init();
        HockeyApp.trackEvent(\"LAUNCH\");
      }
    }
    \n

    TODOS

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-video-editor":{"name":"nativescript-video-editor","version":"0.0.1","license":"Apache-2.0","readme":"

    NativeScript Video Editor

    \n

    \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

    \n

    Prerequisites / Requirements

    \n

    Note Android min-sdk is 18

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-video-editor
    \n

    Usage

    \n

    Transcode

    \n
    import { VideoEditor } from 'nativescript-video-editor';
    // parameters passed to transcodeVideo
    VideoEditor.transcodeVideo(
                filePath, // the path to the video on the device
                'outputFileName', // the file name for the transcoded video
                width,
                height,
                videoBitrate,
                fps,
                saveToLibrary, // optional, defaults to true
                function(progress) {} // info will be a number from 0 to 100
    ).then(function(file){})
    .catch(function(error) {})
    \n

    Create a JPEG thumbnail from a video

    \n
    import { VideoEditor } from 'nativescript-video-editor';
    VideoEditor.createThumbnail(
            filePath, // the path to the video on the device
            'outputFileName', // the file name for the JPEG image
            60, // optional, location in the video to create the thumbnail (in seconds)
            320, // optional, width of the thumbnail
            480, // optional, height of the thumbnail
            100 // optional, quality of the thumbnail (between 1 and 100)
    )
    .then(function(file){})
    .catch(function(error) {})
    \n

    Get info on a video (width, height, orientation, duration, size, & bitrate)

    \n
    import { VideoEditor } from 'nativescript-video-editor';
    VideoEditor.getVideoInfo(
            filePath, // the path to the video on the device
    ).then(function(info){})
     .catch(function(error) {})
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-svg":{"name":"nativescript-svg","version":"1.3.7","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-shadow":{"name":"nativescript-ngx-shadow","version":"6.5.0","license":"MIT","readme":"

    NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-ngx-shadow
    \n

    Demo

    \n

    \"N|Solid\"

    \n

    How to use it

    \n

    This is an Angular directive to make your life easier when it comes to native shadows.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the NgShadowModule

    \n
    // ...
    import { NgShadowModule } from \"nativescript-ngx-shadow\";

    @NgModule({
      imports: [
        NgShadowModule
        // ...
      ]
      // ...
    })
    export class MyModule {}
    \n

    Just use in your templates

    \n

    Simple attribute shadow:

    \n
    <Label shadow=\"2\"></Label>
    \n

    Of course you can property bind it:

    \n
    <Label [shadow]=\"myCustomShadow\"></Label>
    \n

    To provide other details, combine the shadow directive with other attributes:

    \n
    <Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypePlatformDescription
    shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
    default: 'RECTANGLE'    		AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
    PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    AndroidData and IOSData

    \n

    As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

    \n

    Component

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
    // ...
    export class MyComponent {
      fabShadow: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    In the template you can do:

    \n
    <Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-ngx-shadow\";
    class MyComponent {
      // ...
      ngOnInit(): init {
        this.mySnackBar.elevation = Elevation.SNACKBAR;
      }
      // ...
    }
    \n

    Notes about version 2+

    \n

    Here are the list of improvements on version 2.0:

    \n
      \n
    1. BugFix: Integer directive not rendering on iOS.
      2. \n
    2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
      3. \n
    3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
      4. \n
    4. 2.1.X Override Android default StateListAnimator as explained below:
      5. \n
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

    \n

    Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow:

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install to prepare the project
      • \n
    • Run and deploy to your device or emulator with npm run android or npm run ios
      • \n
    • Build a ngPackagr version with npm run build
      • \n
    \n

    Changelog

    \n
      \n
    • 6.0.0 Fork: Now packaged with ngPackagr for Angular 6 compatabilty
      • \n
    • 2.1.0 Decouple shadow logic / Override default StateListAnimator
      • \n
    • 2.0.1 Fix error on old Android devices (< Lollipop)
      • \n
    • 2.0.0 Density Independent Pixels / TranslationZ
      • \n
    • 1.1.3 Minor issues
      • \n
    • 1.1.2 Fix CI build
      • \n
    • 1.1.0 Support for iOS custom attributes
      • \n
    • 1.0.0 Initial implementation
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-asitsvideorecorder":{"name":"nativescript-asitsvideorecorder","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript ASITS VIDEO RECORDER Plugin

    \n

    A dead-simple plugin to use the camera functionalities of your NativeScript app.

    \n

    Installation

    \n
    npm install nativescript-asitsvideorecorder
    \n

    Usage For Angular

    \n
    registerElement(\"AsitsVideoRecorder\", () => require(\"nativescript-asitsvideorecorder\").AsitsVideoRecorder);
    \n
    <AsitsVideoRecorder height=\"250\" debug=\"true\"
                                galleryPickerMode=\"single\" showFlashIcon=\"true\" showToggleIcon=\"true\"
                                showCaptureIcon=\"true\" showGalleryIcon=\"true\" confirmSaveText=\"CONFIRM!\" confirmRetakeText=\"RETAKE!\" (loaded)=\"camLoaded($event)\"
                                (toggleCameraEvent)=\"toggleCameraEvent($event)\" (photoCapturedEvent)=\"photoCapturedEvent($event)\"
                                (imagesSelectedEvent)=\"imagesSelectedEvent($event)\">
            </AsitsVideoRecorder>
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-cscreenshot":{"name":"@knotes/nativescript-cscreenshot","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Cscreenshot :camera:

    \n

    This plugin was created so you can take screenshots of views easily and then store it as you like.

    \n

    this plugin is based on enchev's NativeScript Screenshot nativescript-screenshot\nbut updated for better stability and angular, vue and react compatibility (still testing vue and react)

    \n

    Installation

    \n

    Use the install command:

    \n
    tns plugin add @enduco/nativescript-cscreenshot
    \n

    Usage

    \n

    Just import the plugin in your project and use it like this

    \n

    using Typescript:

    \n
        import { Cscreenshot } from \"@enduco/nativescript-cscreenshot\";
        import { ImageSource } from \"@nativescript/core\";

        // then in your take a screenshot method
        let screen = new Cscreenshot();

        // Using vanilla Nativescript
        let view = page.getViewById('main');

        // Using Angular Nativescript
        @ViewChild(\"main\", { static: true }) main: ElementRef;
        let view = this.view.nativeElement;

        // Using Vue Nativescript
        let view = this.$refs.main.nativeView;

        screen.take(view, (image: ImageSource)=>{
            // Do whatever you want with the returned source image
        });
    \n
    and in your template\n
    \n
        <!-- Assign the reference name depending on the framework -->
        <!-- 'id=\"\"' for vanilla nativescript -->
        <!-- '#main' for angular nativescript -->
        <!-- 'ref=\"main\"' for Vue nativescript -->
        <GridLayout id=\"main\" #main ref=\"main\">
            <!-- Content of your app here -->
        </GridLayout>
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-demoplugin":{"name":"nativescript-demoplugin","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-debugging":{"name":"nativescript-dev-debugging","version":"2.0.2","license":"Apache-2.0","readme":"

    \"npm\"\n\"npm\"

    \n

    nativescript-dev-debugging

    \n

    This dev plugin allows a NativeScript plugin authors to use a predefined workflow with which you can develop and debug both the native iOS/Android and the TypeScript/JavaScript wrapper source code of their NS plugin. The main API that this plugin exposes is through npm scripts which will be saved to your package.json of your plugin's source code.

    \n

    Note

    \n
    \n
      \n
    • This NS dev plugin has been developed on Mac and has not been tested on Windows.
      • \n
    • Using the plugin's scripts will open both Android Studio and XCode so be aware that those applications will open during the executing of the scripts.
      • \n
    \n
    \n

    Installation

    \n

    Requirements

    \n
      \n
    • npm 6.4.1 or above (npm --version)
      • \n
    • NativeScript 5.1.0 or above ($ tns --version)
      • \n
    • Xcode 10.1 Build version 10B61 ($ xcodebuild -version)
      • \n
    • Android Studio 3.2.1 or above ($ mdls -name kMDItemVersion /Applications/Android\\ Studio.app)
      • \n
    • The Xcode project of your plugin has to have a build schema with the name of the framework that it creates (for example the project that creates 'TNSWidgets.framework' has a schema named 'TNSWidgets')
      • \n
    \n

    The first thing you need to do is install the plugin:

    \n
      \n
    • npm install nativescript-dev-debugging --save-dev
      • \n
    • During installation the plugin requires you to provide configuration of the location and relative information about your source code. Here there are two options you can use
      • \n
    \n

    A fresh configuration

    \n

    Simply install the package and follow the prompts, there are two options one of which minimizes the asked inputs by following the 'plugin seed' structure and a second option which is fully manual configuration and is recommended if you have not followed the NativeScript plugin seed structure.

    \n

    or

    \n

    Configuration using a n.debug.config.json file

    \n

    You can take a look at "Configuration file" section bellow for details about the required contents of the configuration file. To use an n.debug.config.json file during package installation simply create a file named n.debug.config.json in the root of your plugins source code (where its package.json file is) and install the package as normally.

    \n

    Manual configuration

    \n

    Recommended for plugins that have not used the NativeScript plugin seed as a starting point. The post install script will ask for the following configuration settings of your plugin's structure:

    \n
      \n
    • The "path" to the folder which hold your plugin's TypeScript/JavaScript and package.json
      • \n
    • The "path" to the folder which hold your plugin's 'platforms' contents ('android' and 'ios' folders)
      • \n
    • The "path" to the native iOS source code of the Xcode project from which the iOS framework of your plugin has been build
      • \n
    • The name of the iOS framework of your plugin
      • \n
    • The "path" to the native Android source code of the Android Studio project from which the Android library of your plugin has been build
      • \n
    • The name of the Android library of your plugin
      • \n
    • The "path" to the folder which hold the NativeScript Vanila application used as demo of your plugin
      • \n
    • The "path" to the folder which hold the NativeScript + Angular application used as demo of your plugin (optional)
      • \n
    • The Apple provisioning profile that is required for the above NativeScript application (optional)
      • \n
    \n

    "Plugin seed" friendly configuration

    \n

    Recommended for plugins that have used the NativeScript plugin seed as a starting point. The post install script will ask for the following configuration settings of your plugin's structure:

    \n

    The post install script will ask for the following configuration settings of your plugin's structure:

    \n
      \n
    • The "path" to the folder which hold your plugin's TypeScript/JavaScript and package.json
      • \n
    • The name of the iOS framework of your plugin
      • \n
    • The name of the Android library of your plugin
      • \n
    • The Apple provisioning profile that is required for the above NativeScript application (optional)
      • \n
    \n

    Configuration file

    \n

    After either of the above configuration stages the configuration parameters you have entered will be written locally to an configuration json file called n.debug.config.json. You can manually create this file in the root (where the package.json of your {N} plugin source code is) and pre-configure it so that when the npm postinstall script is ran it will skip app prompts of the nativescript-dev-debugging plugin configuration stage. Here are all the require configuration key/value pairs:

    \n
    {
    \t\"pluginSrcFolder\": \"/Users/USER/plugin_repo/src\",
    \t\"pluginPlatformFolder\": \"/Users/USER/plugin_repo/src/platforms\",
    \t\"pluginIosSrcFolder\": \"/Users/USER/plugin_repo/src-native/ios\",
    \t\"iosLibraryName\": \"LibraryName\",
    \t\"pluginAndroidSrcFolder\": \"/Users/USER/plugin_repo/src-native/android\",
    \t\"androidLibraryName\": \"LibraryName\",
    \t\"demoFolder\": \"/Users/USER/plugin_repo/demo\",
    \t\"demoAngularFolder\": \"/Users/USER/plugin_repo/demo-angular\",
    \t\"demoVueFolder\": \"/Users/USER/plugin_repo/demo-vue\",
    \t\"provisioningProfile\": \"TestProfile\"
    }
    \n
    \n

    Note: If you make manual changes to the above n.debug.config.json file you need to "re-configure" the nativescript-dev-debugging plugin by executing the npm run nd.config command.

    \n
    \n

    Usage of the build-in 'workflows'

    \n

    The exposed API of this dev plugin is though the use of npm scripts. After the installation and configuration steps the package.json of your plugin will be modified with scripts, watchers and some dev dependencies. You should keep all of them and not manually change them to make sure that the functionality of the nativescript-dev-debugging is working as expected. If you want to reconfigure the plugin simply execute npm run nd.config

    \n

    Starting a 'workflow'

    \n

    In order to start a 'workflow' you can use the separate npm scripts like npm run nd.demo.ios.device and npm run nd.demo.android or use the 'interactive script command' nd.run. If you are not aware of which workflow you want to start it is best to use npm run nd.run and follow the prompts.

    \n

    For full details regarding the build-in functionality of this plugin execute npm run nd.help.

    \n

    Example of expected workflows:

    \n
    \n

    All of the bellow example are the same between iOS and Android, for simplicity I will explain them using iOS.

    \n
    \n

    Workflow for: Observing/debug the native code"

    \n
      \n
    • Run npm run nd.run
      • \n
    • Choose demo
      • \n
    • Choose ios
      • \n
    • Choose attach
      • \n
    \n

    With this workflow (demo ios attach) the following will happen:

    \n
      \n
    • The native source code of the plugin will be build in debugging mode, Xcode will open that source code and the NativeScript app will be build and deployed (the same way tns run ios, actually this is what happens under the hood). This workflow is useful when you want to simply observe/debug the native iOS source code but do not expect to make changes to it, if such changes will be made (you want to fix/develop the native code of your plugin) you can use the next workflow.
      • \n
    \n

    Workflow for: "Changing/developing and debugging the native code"

    \n
      \n
    • Run npm run nd.run
      • \n
    • Choose demo
      • \n
    • Choose ios
      • \n
    • Choose attach & watch
      • \n
    \n

    With this workflow (demo ios attach & watch) the following will happen:

    \n
      \n
    • The native source code of the plugin will be build in debugging mode, Xcode will open that source code, the NativeScript app will be build and deployed and a file watcher will start on the native iOS source code of your plugin (by using the pluginIosSrcFolder path). This workflow is useful when you want to both observe/debug the native iOS source code and also make changes to it to fix/develop issues or new functionality.
      • \n
    \n

    Troubleshooting

    \n

    Due to the nature of the nativescript-dev-debugging plugin and the way it is using multiple third party solutions to provide its workflows (xcode build, gradle, NativeScript CLI etc.) it is possible that in specific environment setups some issues can occur. While the fact that the plugin simply start and manages processes that will use those third party solutions in most cases if an error occurs the console output will be the original one from those solutions and should be helpful in determining the cause of the error, there are cases when the plugin's code could be causing strange behaviors. When using the npm run nd.run command you could pass an first attribute log to view additional information about the executed processes and their status (how/what and why the file watchers are executing), simply run npm run nd.run log.

    \n

    Contributing

    \n

    In order to test the node package locally:

    \n
      \n
    • Open the app folder cd app
      • \n
    • Run npm i
      • \n
    • Run npm run nd.install - will execute the package's postinstall script like it is being installed in the app folder for the first time
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-mixpanel":{"name":"@nstudio/nativescript-mixpanel","version":"2.1.1","license":"Apache-2.0","readme":"

    NativeScript Mixpanel

    \n

    \"GitHub\n\"npm\"\n\"npm\"\n\"npm\"

    \n
    \n

    A NativeScript plugin to provide the ability to integrate with Mixpanel.

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your application's root folder and execute:

    \n

    tns plugin add @nstudio/nativescript-mixpanel

    \n

    Usage

    \n

    Example

    \n

    This can be initialised at various points in your application, i.e. in a service. However it is recommended to initialise this in your main.ts file.

    \n

    Initialisation

    \n
    import {
      NativeScriptMixpanel,
      NativeScriptMixpanelPeople,
    } from \"@nstudio/nativescript-mixpanel\";

    const MIXPANEL_TOKEN = \"ABCDEF12345678\";

    // Init Mixpanel itself
    NativeScriptMixpanel.init(MIXPANEL_TOKEN);
    \n

    Identification

    \n

    The Mixpanel library will assign a default unique identifier to each unique user who installs your application. This distinct ID is saved to device storage so that it will persist across sessions.

    \n

    If you choose, you can assign your own user IDs. This is particularly useful if a user is using your app on multiple devices or platforms (both web and mobile, for example). To assign your own distinct_ids, you can use the identify method.

    \n
    import { NativeScriptMixpanel } from \"@nstudio/nativescript-mixpanel\";

    const someId = \"test identity\";
    NativeScriptMixpanel.identify(someId);
    // It is recommended to identify both the base and people instances.
    NativeScriptMixpanel.getPeople().identify(someId);
    \n

    Custom Logging / Logger Binding

    \n

    If you need to pipe/funnel log output (i.e. for errors) to your own applications logger\nimplementation, you can provide a binding to your logger through a simple object.

    \n

    If you use this it is recommended to call useLogger before you init.

    \n
    const customLogger: NativeScriptMixpanelLogger = {
      log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
      info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
      warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
      error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
    };
    NativeScriptMixpanel.useLogger(customLogger);
    \n

    API

    \n

    NativeScriptMixpanel

    \n

    init(token: string): void

    \n

    Get the instance of MixpanelAPI associated with your Mixpanel project token.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    tokenstring
    \n
    NativeScriptMixpanel.init(\"token\");
    \n

    useLogger(providedLogger: NativeScriptMixpanelLogger): void

    \n

    Replace the default console logger with a custom logger binding.

    \n

    If you intend to use a custom logger or bound logger, this should\nbe called before init to correctly output any errors.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    providedLoggerNativeScriptMixpanelLoggerA new logger or object that binds a logger
    \n
    const customLogger: NativeScriptMixpanelLogger = {
      log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
      info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
      warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
      error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
    };
    NativeScriptMixpanel.useLogger(customLogger);
    \n

    identify(distinctId: string): void

    \n

    Associate all future calls to track(string, JSON) with the user identified by the\ngiven distinct id.

    \n

    This call does not identify the user for People Analytics; to do that,\nsee MixpanelAPI.People.identify(String).\nMixpanel recommends using the same distinct_id for both calls, and using a\ndistinct_id that is easy to associate with the given user, for example, a\nserver-side account identifier.

    \n

    Calls to track(string, JSON) made before corresponding calls to identify\nwill use an anonymous locally generated distinct id, which means it is best to\ncall identify early to ensure that your Mixpanel funnels and retention analytics\ncan continue to track the user throughout their lifetime. We recommend calling\nidentify when the user authenticates.

    \n

    Once identify is called, the local distinct id persists across restarts of your application.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    distinctIdstringA string uniquely identifying this user. Events sent to Mixpanel using the same distinct_id will be considered associated with the same visitor/customer for retention and funnel reporting, so be sure that the given value is globally unique for each individual user you intend to track.
    \n
    NativeScriptMixpanel.identify(\"test identity\");
    \n

    getDistinctId(): string

    \n

    Returns the string id currently being used to uniquely identify the user\nassociated with events sent using track. Before any calls to identify,\nthis will be an id automatically generated by the library.

    \n
    const distinctId = NativeScriptMixpanel.getDistinctId();
    \n

    alias(alias: string): void

    \n

    This function will create an alias to the current events distinct_id,\nwhich may be the distinct_id randomly generated by the Mixpanel\nlibrary before identify(string) is called.

    \n

    This call does not identify the user after. You must still call both\nidentify and NativeScriptMixPanel.getPeople().identify if you wish the\nnew alias to be used for Events and People.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    aliasstringThe new distinct_id
    \n
    NativeScriptMixpanel.alias(\"test alias\");
    \n

    registerSuperProperties(properties: JSON): void

    \n

    Register properties that will be sent with every subsequent call\nto track.

    \n

    SuperProperties are a collection of properties that will be sent with every\nevent to Mixpanel, and persist beyond the lifetime of your application.

    \n

    Setting a superProperty with registerSuperProperties will store a new\nsuperProperty, possibly overwriting any existing superProperty with the\nsame name.

    \n

    SuperProperties will persist even if your application is taken completely\nout of memory. To remove a superProperty, call unregisterSuperProperty\nor clearSuperProperties.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    propertiesJSONA JSON object containing super properties to register
    \n
    NativeScriptMixpanel.registerSuperProperties({
      \"Test Type\": \"test value\",
    });
    \n

    unregisterSuperProperty(superPropertyName: string): void

    \n

    Remove a single superProperty, so that it will not be sent with future calls\nto track(String, JSONObject).

    \n

    If there is a superProperty registered with the given name, it will be permanently\nremoved from the existing superProperties.

    \n

    To clear all superProperties, use clearSuperProperties.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    superPropertyNamestringname of the property to unregister
    \n
    NativeScriptMixpanel.unregisterSuperProperty(\"Test Type\");
    \n

    clearSuperProperties(): void

    \n

    Erase all currently registered superProperties.

    \n

    Future tracking calls to Mixpanel will not contain the specific superProperties\nregistered before the clearSuperProperties method was called.

    \n

    To remove a single superProperty, use unregisterSuperProperty.

    \n
    NativeScriptMixpanel.clearSuperProperties();
    \n

    track(eventName: string, properties?: JSON): void

    \n

    Track an event.

    \n

    Every call to track eventually results in a data point sent to Mixpanel.\nThese data points are what are measured, counted, and broken down to create\nyour Mixpanel reports. Events have a string name, and an optional set of\nname/value pairs that describe the properties of that event.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventNamestringThe name of the event to send
    propertiesJSONA JSON object containing the key value pairs of the properties to include in this event
    \n
    NativeScriptMixpanel.track(\"test event\", {
      tracking: \"this\",
    });
    \n

    timeEvent(eventName: string): void

    \n

    Begin timing of an event. Calling timeEvent("Thing") will not send an event,\nbut when you eventually call track("Thing"), your tracked event will be sent\nwith a "$duration" property, representing the number of seconds between your calls.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventNamestringthe name of the event to track with timing
    \n
    const eventName = \"Time Event Test\";
    NativeScriptMixpanel.timeEvent(eventName);

    await new Promise((resolve) => setTimeout(resolve, 2000));
    NativeScriptMixpanel.track(eventName);
    \n

    getPeople(): NativeScriptMixpanelPeople

    \n

    Returns a NativeScriptMixpanelPeople instance that can be used to identify\nand set properties.

    \n
    const people = NativeScriptMixPanel.getPeople();
    \n

    optInTracking(): void

    \n

    Use this method to opt-in an already opted-out user from tracking.

    \n

    People updates and track calls will be sent to Mixpanel after using\nthis method. This method will internally track an opt-in event to\nyour project.

    \n
    const people = NativeScriptMixPanel.optInTracking();
    \n

    optOutTracking(): void

    \n

    Use this method to opt-out a user from tracking.

    \n

    Events and people updates that haven't been flushed yet will be deleted.\nUse flush() before calling this method if you want to send all the queues\nto Mixpanel before.

    \n

    This method will also remove any user-related information from the device.

    \n
    const people = NativeScriptMixPanel.optOutTracking();
    \n

    flush(): void

    \n

    Push all queued Mixpanel events and People Analytics changes to Mixpanel servers.

    \n

    Events and People messages are pushed gradually throughout the lifetime of your\napplication. This means that to ensure that all messages are sent to Mixpanel when\nyour application is shut down, you will need to call flush() to let the Mixpanel\nlibrary know it should send all remaining messages to the server.

    \n

    We strongly recommend placing a call to flush() in the onDestroy() method of your\nmain application activity.

    \n
    NativeScriptMixpanel.flush();
    \n

    reset(): void

    \n

    Clears tweaks and all distinct_ids, superProperties, and push\nregistrations from persistent storage. Will not clear referrer information.

    \n
    NativeScriptMixpanel.reset();
    \n

    Contributors

    \n
      \n
    • Alex Miller
      • \n
    • Antonio Cueva Urraco
      • \n
    • Blake Nussey
      • \n
    • Demetrio Filocamo
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-sdk":{"name":"nativescript-onesignal-sdk","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Onesignal SDK

    \n

    A Onesignal plugin that handles push notifications for both ios and android nativescript applications.

    \n

    Prerequisites

    \n

    A Onesignal account with an active onesignal application.

    \n

    Installation

    \n
    tns plugin add nativescript-onesignal-sdk
    \n

    Usage

    \n

    Angular

    \n

    Not supported

    \n

    Typescript & Javascript

    \n

    Android

    \n

    Add both values onesignal_app_id and onesignal_google_project_number as string resources:

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources>
        <string name=\"app_name\">Demo</string>
        <string name=\"onesignal_app_id\">your_onesignal_app_id</string>
        <string name=\"onesignal_google_project_number\">your_onesignal_google_project_number</string>
    </resources>
    \n

    Then refer those values in your AndroidManifest.xml.

    \n

    Note: Add xmlns:tools="http://schemas.android.com/tools" on manifest root tag.

    \n
    <meta-data
    \t\ttools:replace=\"android:value\"
            android:name=\"onesignal_app_id\"
            android:value=\"@string/onesignal_app_id\"/>

    <meta-data
            tools:replace=\"android:value\"
            android:name=\"onesignal_google_project_number\"
            android:value=\"@string/onesignal_google_project_number\"/>
    \n

    Add the following code on your main.ts or app.js:

    \n
    import * as app from \"application\";
    var TnsOneSignal = require(\"nativescript-onesignal\").TnsOneSignal;

    if (app.android) {
      app.on(app.launchEvent, args => {
        TnsOneSignal.startInit(app.android.context).init();
      });
    }
    \n

    iOS

    \n

    Add the following code on your main.ts or app.js:

    \n
    import * as app from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (app.ios) {
         TnsOneSignal.initWithLaunchOptionsAppIdHandleNotificationReceivedHandleNotificationActionSettings({},
                <your-onesignal-app-id>,
                (notificationReceived) => {
                    console.log(notification);
                },
                (notificationAction) => {
                    console.log(notification);
                });
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Demo

    \n
    npm run plugin.prepare
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zapsod/nativescript-pushwoosh":{"name":"@zapsod/nativescript-pushwoosh","version":"1.0.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chrome-tabs":{"name":"nativescript-chrome-tabs","version":"0.8.0","license":"MIT","readme":"

    Nativescript Chrome Tabs \"apple\" \"android\"

    \n

    \"npm\"\n\"NPM\"\n\"Build\n\"npm\"\n\"GitHub\n\"Status\"\n\"Twitter

    \n

    Chrome Tabs Plugin to open a custom chrome/safari tabs in android & ios.

    \n

    Installation

    \n
    tns plugin add nativescript-chrome-tabs
    \n
    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \"Demo\"Demo
    \"Demo\"Demo
    \n
    \n

    Usage

    \n
    <Button text=\"click\" (tap)=\"myCustomWeb();\">
    \n

    Javascript

    \n
    var { initChromeTab, openChromeTab } = require('nativescript-chrome-tabs');

    constructor() { 
        initChromeTab(); 
    }

    function myCustomWeb() {
        openChromeTab({
            url: 'http://google.com',
            toolbarColor: '#0361cc',
            toolbarControlsColor: '#303F9F'
        });
    }
    \n

    Typescript

    \n
    import { initChromeTab, openChromeTab } from \"nativescript-chrome-tabs\";

    constructor() { 
        initChromeTab(); 
    }

    myCustomWeb() {
        openChromeTab({
            url: 'http://google.com',
            toolbarColor: '#0361cc',
            toolbarControlsColor: '#303F9F'
        });
    }
    \n
    \n

    API (Properties)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    urlrequiredThe URL to open
    showTitlefalseShows title bar in the webview
    toolbarColorundefinedColor of the toolbar
    toolbarControlsColorundefined(only iOS) color of buttons on toolbar
    isClosedundefinedcallback function that will be called when webview is closed
    \n
    \n

    API (Methods)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodTypeReturnsDescription
    initChromeTab();constructorvoidTo Initialize Chrome Tab
    openChromeTab(url : String, toolbarColor : String, toolbarControlsColor : String);methodvoidTo Open a Chrome Tab
    \n
    \n

    https://developer.chrome.com/docs/multidevice/android/customtabs/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpesa":{"name":"nativescript-mpesa","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Mpesa

    \n

    Nativescript-Mpesa provides a wrapper that incorporate payments using Mpesa from within your {N} applications. The integration is achieved using the Android M-Pesa Daraja SDK libraries. Hence, has full support for Android.

    \n

    Usage

    \n

    Setup

    \n

    First import package into the main-page's model or app.component as the case may be for either {N} Core or {N} w/ Angular

    \n
        import { Mpesa } from \"nativescript-mpesa\";
    \n

    Then create an instance of Mpesa.

    \n
         const mpesa = new Mpesa();
    \n

    Initialize the instance with the CustomerKey,CustomerSecret gotten from Safaricom and Env

    \n

    Note Env could be SANDBOX or PRODUCTION

    \n
        mpesa.initialize(CONSUMER_KEY, CONSUMER_SECRET, Env)
    \n

    Making Payment

    \n
        const mpesa = new Mpesa();

        const lnmExpress = {
                            BusinessShortCode: \"174379\",
                            PassKey: \"bfb279f9aa9bdbcf158e97dd71a467cd2e0c893059b10f78e6b72ada1ed2c919\",
                            Type: \"CustomerPayBillOnline\",
                            Amount: \"100\",
                            PartyA: \"254708374149\",
                            PartyB: \"174379\",
                            PhoneNumber: \"254708374149\",
                            CallBackURL: \"http://mycallbackurl.com/checkout.php\",
                            AccountReference: \"001ABC\",
                            TransactionDesc: \"Goods Payment\"
                          };
        mpesa.initialize(\"dRSvS4nnTGU8vf1V8jUHfu9BW6AAxl83\",\"WQFHurC4OsVBYJQt\",\"SANDBOX\").
                then(res => {
                  console.log(\"access token\", res);
                  this.mpesa.requestMPESAExpress(lnmExpress).then(
                    res => {
                      console.log(\"lnmResult\", res);
                    },
                    err => {
                      console.log(err);
                    }
                  );
                }, err => {
                  console.log(\"error\", err);
                });
      }
    \n

    Lipa na M-Pesa Online Payment API

    \n

    The following table highlights the requirements needed by Daraja, as described in the Safaricom Developer API Page

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDescriptionParameter TypePossible Values
    BusinessShortCodeThe organization shortcode used to receive the transactionNumericShortcode (6 digits)
    PasskeyLipa Na Mpesa Online PassKeyAlpha-Numeric
    AmountThe amount to be transactedNumeric100
    PartyAThe entity sending the fundsNumericMSISDN (12 digits)
    PartyBThe organization receiving the fundsNumericShortcode (6 digits)
    PhoneNumberThe MSISDN sending the fundsNumericMSISDN (12 digits)
    CallBackURLCall Back URLURLhttps://ip or domain:port/path
    AccountReferenceAccount ReferenceAlpha-NumericAny combinations of letters and numbers
    TransactionDescDescription of the transactionStringany string of less then 20 characters
    \n
    \n

    Get the Pass Key Here : https://developer.safaricom.co.ke/test_credentials

    \n
    \n

    Response Signature

    \n

    Success Response

    \n
       export interface LNMResult {
        MerchantRequestID: string;
        CheckoutRequestID: string;
        ResponseCode: string;
        ResponseDescription: string;
        CustomerMessage: string;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-picker":{"name":"nativescript-contacts-picker","version":"1.2.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-contacts-picker/blob/master/LICENSE"},"readme":"

    NativeScript-contacts-picker

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-contacts-picker
    \n

    Usages

    \n

    Example

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-libsignal-protocol":{"name":"nativescript-libsignal-protocol","version":"0.2.0","license":"GPL-3.0","readme":"

    NativeScript Libsignal-Protocol \"android-support\"

    \n

    \"Developed

    \n

    \"npm \"license\"

    \n

    \"NPM\"

    \n

    This plugin is a Libsiginal Protocol implementation for NativeScript and is based on libsignal-protocol-java. This plugin is currently a wrapper which implements functionality developed by The Open Whisper Systems organization, the active maintainers behind the encrypted messenger application Signal.

    \n

    This plugin is currently in ALPHA stages and will require additional work to mature. This code has NOT been reviewed by an experienced cryptopgrapher so usage and support cannot be guarenteed at this time.

    \n

    Requirements

    \n

    This plugin requires no additional permissions to work properly. The application implementing this plugin however, will likely require android.permission.INTERNET if you are using a central server to manage data.

    \n

    Installation

    \n
    $ tns plugin add nativescript-libsignal-protocol
    \n

    Usage

    \n

    Importing LibsignalProtocol from this plugin will allow you to use various classes and implementation wrappers that are currently available. Numerous type definitions have been created to your IDE to provide context to various pieces so far made available. The demo application provided with this plugin contains a couple different examples of using this plugin for a project.

    \n

    This plugin follows the same implementation and usage standards which can be found from the sourcecode Github Repository. Listed below is simple snippet demonstrating usage.

    \n
    import { LibsignalProtocol } from 'nativescript-libsignal-protocol';

    const SignalKeyHelper = LibsignalProtocol.KeyHelper;
    const Base64Encode = LibsignalProtocol.Util.base64Encode;

    /**
     * Outputs a new session identity generated with the Libsignal Protocol.
     * 
     * `identityKeyPair` is a raw reference to the JAVA object `IdentityKeyPair`
     * as such, the exported values must be `serialized` before being usable.
     * 
     * @returns The generated session identity as a JSON object.
     */
    public demo_generateNewSessionIdentity(): any {
        let identityKeyPair: LibsignalProtocol.Type.IdentityKeyPair;
        let preKeys: any[];
        let signedPreKey: LibsignalProtocol.Type.SignedPreKeyRecord;
        let signedPreKeyPair: LibsignalProtocol.Type.ECKeyPair;
        let registrationId: number;
        
        registrationId\t  = SignalKeyHelper.generateRegistrationId();
        identityKeyPair   = SignalKeyHelper.generateIdentityKeyPair();
        preKeys           = SignalKeyHelper.generatePreKeysFormatted(0, 1);
        signedPreKey      = SignalKeyHelper.generateSignedPreKeyFormatted(identityKeyPair, 1);

        let sessionIdentity = {
          registrationId: `${registrationId}`,
          deviceId: 123,
          identity: {
            pubKey: Base64Encode(identityKeyPair.getPublicKey().serialize()),
            privKey: Base64Encode(identityKeyPair.getPrivateKey().serialize()),
            serialized: Base64Encode(identityKeyPair.serialize()),
          },
          signedPreKey: signedPreKey,
          preKeys: preKeys
        };

        console.log(sessionIdentity);
        return sessionIdentity;
    }
    \n

    Limitations

    \n

    This plugin is currently not available for iOS devices (Contributions for iOS support are welcomed and desired!). This plugin is also meant to be a simple wapper for using the Libsignal Protocol. While this plugin contains a Client class for storing a session/state, the actual use and management should be taken care of within the application using this plugin.

    \n

    License

    \n

    Licensed under the GPLv3: http://www.gnu.org/licenses/gpl-3.0.html

    \n
      \n
    • Copyright 2015-2016 Open Whisper Systems
      • \n
    • Copyright 2018-2019 @Pixxlated
      • \n
    \n

    Acknowledgements

    \n

    This plugin contains source code based on the following:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    libsignal-protocol-javahttps://github.com/signalapp/libsignal-protocol-java
    \n

    Special thanks to the original contributors and authors of the works above!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-places":{"name":"nativescript-plugin-google-places","version":"1.4.1","license":"MIT","readme":"

    Nativescript Plugin Google Places

    \n

    \"npm

    \n

    Nativescript plugin for Google Places API

    \n

    \"Android\" \"Android\"

    \n

    Updates

    \n

    Prerequisites

    \n

    Set up the Google Places API keys before installing this plugin, the setup script will ask\nfor them.

    \n

    For the iOS key, click here then click "GET A KEY".

    \n

    For the Android key:

    \n
      \n
    1. click here then click "GET A KEY".
      2. \n
    2. Go to the Google developer console and click "Credentials" on the left.
      3. \n
    3. Click the first key in the list which is the one you just created and under "Key restriction", select Android apps.
      4. \n
    4. Enter in your package name and SHA-1 certificate fingerprint and press save at the bottom. You may want to add your debug and production SHA-1 fingerprints.
      5. \n
    \n

    If you want to use the getStaticMapUrl function you'll need to create a browser key:

    \n
      \n
    1. click here then click "GET A KEY".
      2. \n
    2. Go to the Google developer console and click "Library" on the left.
      3. \n
    3. Find "Google Static Maps API" and click the "URL signing secret" tab.
      4. \n
    4. Click the "Allow unsigned usage" button.
      5. \n
    5. Click "Credentials" on the left, your browser key will be the first key in the list.
      6. \n
    \n

    Installation

    \n
    tns plugin add nativescript-plugin-google-places
    \n

    Usage

    \n

    To import:

    \n
    import * as GooglePlaces from 'nativescript-plugin-google-places';
    \n

    Run the init function in the App.Module constructor if you're using angular or the app.ts file otherwise

    \n
    GooglePlaces.init();
    \n

    To have the user pick a place:

    \n
    GooglePlaces.pickPlace()
        .then(place => console.log(JSON.stringify(place)))
        .catch(error => console.log(error));
    \n

    To set a default location for the map to start on:

    \n
    let center: Location = {
        latitude: -33.865143,
        longitude: 151.2099
    }

    let viewport = {
        northEast: {
            latitude: center.latitude + 0.001,
            longitude: center.longitude + 0.001
        },
        southWest: {
            latitude: center.latitude - 0.001,
            longitude: center.longitude - 0.001
        }
    }

    GooglePlaces.pickPlace(viewport)
        .then(place => console.log(JSON.stringify(place)))
        .catch(error => console.log(error));
    \n

    To get places using ids:

    \n
    GooglePlaces.getPlacesById([
        \"ChIJ4zPXqIiAhYAR31X3S64T6Uw\",
        \"ChIJ6zMe3oWAhYARaZ33Z1BAMRo\",
        \"ChIJAUWoGIaAhYARQ6zvky_f10Q\"
    ])
        .then((places: GooglePlaces.Place[]) => {
            places.forEach(place => console.log(place.name));
        })
        .catch(error => console.log(error));
    \n

    To get a static map:

    \n
    this.staticMapUrl = GooglePlaces.getStaticMapUrl(
        place, 
        { 
            width: 250,
            height: 250
        }
    );
    \n

    Or by address:

    \n
    this.staticMapUrl = GooglePlaces.getStaticMapUrlByAddress(
        place.address,
        {
            width: 250,
            height: 250
        }
    );
    \n
    <Image *ngIf=\"staticMapUrl\" [src]=\"staticMapUrl\" width=\"250\" height=\"250\"></Image>
    \n

    Best Practices

    \n
      \n
    • Google recommends always displaying the attributions string, when available, when using the Place data.
      • \n
    • Google requires the "Powered by Google" picture next to Place data whenever the data is used outside of the map.\nThe picture is installed by the plugin if you allow it to during the setup script.
      • \n
    \n

    You can use the light version:

    \n
    <Image res=\"res://powered_by_google_light\" stretch=\"none\"></Image>
    \n

    or the dark version:

    \n
    <Image res=\"res://powered_by_google_dark\" stretch=\"none\"></Image>
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Place
    namestringThe name of the place
    addressstringReadable address
    idstringUnique ID of the place
    attributionsstringAttributions of the place
    typesstring[]List of place types (more info)
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Location
    latitudenumberlatitude in degrees
    longitudenumberlongitude in degrees
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ViewPort
    southWestLocationDefault SouthWest corner of the map
    northEastLocationDefault NorthEast corner of the map
    \n

    Updates

    \n

    v1.1.2

    \n
      \n
    • Fixed iOS bug where panning the map would destroy the link to resolve the promise, leaving the user stuck in the map view.
      • \n
    • Installer script now adds iOS images manually since the cocoapods version was inaccessible. If updating rather than installing for the first time, run:
      • \n
    \n
    cd node_modules/nativescript-plugin-google-places && npm run configure
    \n

    v1.2.0

    \n
      \n
    • Added getPlacesById(id: string[]): Place[]
      • \n
    • Fixed Android error where place returned by placepicker would not have all of the info
      • \n
    \n

    v1.2.1

    \n
      \n
    • Fixed setup error where ios keys were not being replaced after reconfiguring
      • \n
    • Fixed getPlacesById error where ios results were being returned in reverse order
      • \n
    • Added error handling to Android for getPlacesById if not all places can be found
      • \n
    \n

    Now you can be sure the places array you get from getPlacesById has the same number of elements and is in the same order as the ids you send it.

    \n

    v1.3.0

    \n
      \n
    • Added getStaticMapUrl(place: Place, options: { width: number, height: number }): string
      • \n
    • Updated installer to request browser key for the static maps. Run npm run configure to update
      • \n
    \n

    v1.3.1

    \n
      \n
    • Added "types" to Place definition.
      • \n
    \n

    v1.4.1

    \n
      \n
    • Added getStaticMapUrlByAddress(address: string, options: { width: number, height: number }): string
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-eventify":{"name":"nativescript-eventify","version":"1.0.1","license":"MIT","readme":"

    \"android\" \"ios\"

    \n

    NativeScript Eventify

    \n

    NativeScript has a method called notify you can use to notify an observable of changes. But you can't use it to trigger events like tap or swipe, enter NativeScript Eventify.

    \n

    Supported Events

    \n
      \n
    • tap
      • \n
    \n

    Roadmap

    \n
      \n
    • Add support for doubleTap events
      • \n
    • Add support for longPress events
      • \n
    • Add support for swipe events
      • \n
    • Add support for pan events
      • \n
    • Add support for pinch events
      • \n
    • Add support for rotate events
      • \n
    • Add support for touch events
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-eventify
    \n

    Usage

    \n

    Just require it once.

    \n
    //app.js
    require(\"nativescript-eventify\");
    \n
    /**
    * home-page.js
    *
    * Assume the view already has the event listner(s) setup.
    */

    // Simulates a tap event
    view.eventify({ eventName: \"tap\", object: view });
    \n

    Take a look at this Playground for a working example.

    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertiesRequiredDescription
    EventDataYesThe eventName and object, just like using notify.
    InfoSometimesSome of the events (i.e. swipe) will need extra information
    \n

    Info

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventRequiredPropertiesDescription
    tapNon/an/a
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-verloop":{"name":"nativescript-plugin-verloop","version":"1.3.2","license":"Apache-2.0","readme":"

    NativeScript Verloop Plugin

    \n

    A {N} plugin to integrate Verloop live chat into your NativeScript application.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-plugin-verloop
    \n

    Usage

    \n

    Instantiate Verloop object

    \n
        const config : IVerloopConfig = {
            clientId : '<Your-client-id>',
            fcmToken : null,
            userId : '<user-id>',
            name : \"<user-full-name>\",
            email : '<user-email>',
            //Custom fields.
            token : \"<custom token to access your API>\"
        };
        this.verloop = getVerloopInstance(config);
    \n

    Launch chat later on. may be when user taps on floating action bar icon

    \n
    this.verloop.showChat();
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-electrumx-client":{"name":"nativescript-electrumx-client","version":"0.1.20","license":"GPL-3.0","readme":"

    NativeScript ElectrumX-Client \"android-support\"

    \n

    \"ODIN

    \n

    \"npm \"license\"

    \n

    \"NPM\"

    \n

    The ElectrumX-Client NativeScript plugin allows your application to communicate with an ElectrumX Server. ElectrumX servers act as middleware allowing remote clients to fetch and send blockchain requests via TCP and TLS sockets to fetch and send blockchain related information.

    \n

    Requirements

    \n

    This plugin requires android.permission.INTERNET to work properly. This must be added to your AndroidManifest.xml file.

    \n

    Installation

    \n
    $ tns plugin add nativescript-electrumx-client
    \n

    Usage

    \n

    Simply import the ElectrumxClient from this plugin and start using in your application. This plugin supports async/await/promises for a callback structure and utilizes the events to allow for a subscription service for specific events and streams from an ElectrumX Server.

    \n

    Example usage is listed below:

    \n
    import { ElectrumxClient } from 'nativescript-electrumx-client';

    export class HelloWorldModel {
      \tprivate electrumxClient: ElectrumxClient;
        
        constructor() {
        \tthis.electrumxClient = new ElectrumxClient('server.example.com', 50001);
            this.setupSubscriptions(); // subscription examples
            this.initClient(); // initialization example
        }
        
        public setupSubscriptions() {
            let _client = this.electrumxClient;
            
            /**
             * Subscribe to all incoming data from the ElectrumX server
             * to your application.
             * @param rawData Is the raw string response.
             */
            _client.subscribe.on('data', (rawData: string) => {
            });

            /**
             * Subscribe to all finished actions.
             * @param tcpActionId Is a unique, incremented ID assigned to each action.
             */
            _client.subscribe.on('finished', (tcpActionId: number) => {
            });

            /**
             * Subscribe to any errors streamed from this plugin.
             * There are two primary error types to watch out for:
             *
             * err.name === \"UnexpectedResponseError\"
             * This error comes from an unexpected response from ElectrumX as
             * ElectrumX should always return a JSON.parse-able string response.
             *
             * err.name === \"TCPClientError\"
             * This error comes from the base class TcpClient when a connection
             * fails.
             */
            _client.subscribe.on('error', async (err) => {
            });
            
            /**
             * Subscribe to a particular \"subscribable\" event from ElectrumX.
             * @param args Contains the parsed result from the ElectrumX server.
             * Results may vary (heh) view more from ElectrumX Server Docs.
             */
            _client.subscribe.on('blockchain.scripthash.subscribe', (...args) => {
            });
        }
        
        public async init() {
            try {
              // Connect to the host/port set earlier
              await this.electrumxClient.connect();
              
              // Fetch the version of the remote ElectrumX Server
              let version = await this.electrumxClient.server_version('2.7.11', '1.1');
              console.log(`Remote Version: ${version[0]}`);
            } catch (err) {
              console.log('Connection error');
            }
        }
    }
    \n

    Limitations

    \n

    This plugin is currently not available for iOS devices (Contributions for iOS support are welcomed and desired!) and socket connections are currently only supported via TCP. TLS support would be great, but would require further enhancements of the SimpleNetworking plugin we're working off of

    \n

    Acknowledgements

    \n

    This plugin contains modified code based on the following sources:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    node-electrum-clienthttps://github.com/you21979/node-electrum-client
    nativescript-simple-networkinghttps://github.com/yaqwsx/nativescript-simple-networking
    \n

    I'd like to give thanks to the contributors and authors of the works above as their solved headaches made this plugin less of a headache (sort of 😅).

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-escpos-printer":{"name":"nativescript-escpos-printer","version":"2.0.1","license":"Apache-2.0","readme":"

    nativescript-escpos-printer

    \n

    Provide a generic printer plugin for ESCPOS thermal printers for android and IOS

    \n

    This plug is based on:\nnativescript-ichi-printer\nand ideas used from:\nhttps://www.raywenderlich.com/3437391-real-time-communication-with-streams-tutorial-for-ios#toc-anchor-004

    \n

    This works for Android and IOS and includes full source (swift/java)

    \n

    use the included printer simulation to show the printouts.

    \n

    Installation

    \n
    tns plugin add nativescript-escpos-printer
    \n

    Usage

    \n
    import { Printer } from 'nativescript-escpos-printer';
    import { isIOS } from 'tns-core-modules/platform';
    var printer = new Printer
    printer.print(isIOS? 'localhost' : '10.0.2.2', 9100, \"Print test String!\")
    .then( result => {
        if (!result) alert(\"printer error!\")
    })
    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    known problems

    \n

    in IOS, the app will get stuck when a printer is defined, but not found or switched off.\n(looks like outputStream.hasSpaceAvailable in IOS swift, always returns false, even if connected)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fcuuid":{"name":"nativescript-fcuuid","version":"1.0.2","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-fcuuid/blob/master/LICENSE"},"readme":"

    NativeScript-fcuuid

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-fcuuid
    \n

    Usages

    \n

    Example

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-masonkit":{"name":"@triniwiz/nativescript-masonkit","version":"1.0.0-alpha.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-smart-adserver":{"name":"@nstudio/nativescript-smart-adserver","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-smart-adserver

    \n

    Note: Only the Banner module is currently available in this plugin.

    \n

    Works on Android and iOS

    \n

    Screenshots

    \n

    Android

    \n\n

    iOS

    \n\n

    Installation

    \n
    tns plugin add @nstudio/nativescript-smart-adserver
    \n

    Usage

    \n

    To use this plugin, you will need Site ID, Base URL of your site, Page ID and Format ID from SmartAdServer.

    \n

    TypeScript

    \n

    In app.ts you have to initialize the plugin

    \n
    import { SmartAdBanner } from \"@nstudio/nativescript-smart-adserver\";

    SmartAdBanner.init(104808, \"https://mobile.smartadserver.com\");
    \n

    Then in the xml file, include this namespace on the parent component of where you\nwant to place the AdView.

    \n
    xmlns:sas=\"@nstudio/nativescript-smart-adserver\"
    \n

    Now you can create smart ad banner like this,

    \n
    <sas:SmartAdBanner height=\"150\"
            pageId=\"663262\"
            formatId=\"15140\"
            autoRefresh=\"true\" />
    \n

    JavaScript

    \n

    Same as Typescript, but the import statement will be

    \n
    const SmartAdBanner = require(\"@nstudio/nativescript-smart-adserver\").SmartAdBanner;
    \n

    Angular

    \n

    In main.ts you have to initialize the plugin

    \n
    import { SmartAdBanner } from \"@nstudio/nativescript-smart-adserver\";

    SmartAdBanner.init(104808, \"https://mobile.smartadserver.com\");
    \n

    In the module where you want to add Ads (eg, app.module.ts), import it like this\\

    \n
    import { NativescriptSmartAdBannerModule } from \"@nstudio/nativescript-smart-adserver/angular\";
    \n

    Now add NativescriptSmartAdBannerModule to the imports array of that module

    \n

    You can now use the banner using this markup

    \n
    <SmartAdBanner height=\"150\"
            pageId=\"663262\"
            formatId=\"15140\"
            autoRefresh=\"true\">    </SmartAdBanner>
    \n

    API

    \n

    Banner Module API (XML/HTML element Properties)

    \n
      \n
    • pageId - the page id assigned by smart ad server
      • \n
    • formatId - format id given by smart ad server
      • \n
    • autoRefresh - specific if the ad should change over time
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mercadopago-px":{"name":"nativescript-mercadopago-px","version":"4.0.0","license":"Apache-2.0","readme":"

    mercadopago-px \"apple\" \"android\"

    \n

    Support

    \n

    Support Android & iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-mercadopago-px
    \n

    Usage

    \n
    this.mercadopagoPx
        .start({
            language: \"es\",
            publicKey: \"PUBLIC_KEY\",
            preferenceId: \"PREFERENCE_ID\" // Get custom preference_if of side server.
        })
        .then(result => {
            // Success payment
        })
        .catch(error => {
            // Cancel payment or Error payment
        });
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-notification-banner":{"name":"nativescript-easy-notification-banner","version":"1.1.0","license":"Apache-2.0","readme":"

    EasyNotificationBanner

    \n

    Banner notification for NativeScript.

    \n

    Based on:

    \n\n

    \"Sample

    \n

    Installation

    \n
    tns plugin add nativescript-easy-notification-banner
    \n

    Usage

    \n
    import { Component, OnInit } from '@angular/core';
    import { EasyNotificationBanner } from 'nativescript-easy-notification-banner';

    @Component({
      selector: 'ad-main',
      template: '<page-router-outlet></page-router-outlet>'
    })
    export class AppComponent {
      private notificationBanner: EasyNotificationBanner;
      constructor() {
        this.notificationBanner = new EasyNotificationBanner();
      }

      ngOnInit(){
        this.notificationBanner.showSuccess('Celebrate!', 'A new version is available')
          .then(() => console.log('this is really easy!'))
        ;
       }
    }
    \n

    TODO

    \n
    - [] allow custom design
    - [] allow custom duration
    - [] enable buttons inside the banner
    - [] support android
    \n

    Contributions are welcome! :)

    \n

    Donate

    \n

    bitcoin:1EAqBrcWKGS3VG1ktUxCje2E6hYTQRHRRV

    \n

    \"donate\"

    \n

    also greenaddress

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-paytm":{"name":"@nstudio/nativescript-paytm","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-paytm

    \n

    Works on Android and iOS.\nFor use in India to pay via Paytm.

    \n

    Installation

    \n
    tns plugin add @nstudio/nativescript-paytm
    \n

    Usage

    \n

    You will need a working backend server to generate paytm orders.\nDo not generate the order or checksum in the app.

    \n

    Typescript / Angular

    \n
    import {
        Paytm,
        Order,
        TransactionCallback,
        IOSCallback
    } from \"nativescript-paytm\";

    export function onPayWithPaytm(args: observable.EventData) {
        paytm.setIOSCallbacks({
            didFinishedResponse: function(response) {
                console.log(response);
            },
            didCancelTransaction: function() {
                console.log(\"User cancelled transaction\");
            },
            errorMissingParameterError: function(error) {
                console.log(error);
            }
        });

        // Sample order
        const order: Order = {
            // This will fail saying duplicate order id
            // generate your own order to test this.
            MID: \"Tomcas09769922377481\",
            ORDER_ID: \"ORDER8874\",
            CUST_ID: \"CUST6483\",
            INDUSTRY_TYPE_ID: \"Retail\",
            CHANNEL_ID: \"WAP\",
            TXN_AMOUNT: \"10.00\",
            WEBSITE: \"APP_STAGING\",
            CALLBACK_URL: \"https://pguat.paytm.com/paytmchecksum/paytmCallback.jsp\",
            CHECKSUMHASH:
                \"NDspZhvSHbq44K3A9Y4daf9En3l2Ndu9fmOdLG+bIwugQ6682Q3JiNprqmhiWAgGUnNcxta3LT2Vtk3EPwDww8o87A8tyn7/jAS2UAS9m+c=\"
        };

        paytm.createOrder(order);

        paytm.initialize(\"STAGING\"); // set to PRODUCTION when you go live

        paytm.startPaymentTransaction({
            someUIErrorOccurred: function(inErrorMessage) {
                console.log(inErrorMessage);
            },
            onTransactionResponse: function(inResponse) {
                console.log(inResponse);
            },
            networkNotAvailable: function() {
                console.log(\"Network not available\");
            },
            clientAuthenticationFailed: function(inErrorMessage) {
                console.log(inErrorMessage);
            },
            onErrorLoadingWebPage: function(
                iniErrorCode,
                inErrorMessage,
                inFailingUrl
            ) {
                console.log(iniErrorCode, inErrorMessage, inFailingUrl);
            },
            onBackPressedCancelTransaction: function() {
                console.log(\"User cancelled transaction by pressing back button\");
            },
            onTransactionCancel: function(inErrorMessage, inResponse) {
                console.log(inErrorMessage, inResponse);
            }
        });
    }
    \n

    NOTE:\nIf you are using Sandbox credentials, then you won't be able to see the option\nto pay with Credit/Debit card or netbanking. That is perfectly normal.\nOnce you get staging and production credentials from paytm, you will be able to\nuse it just fine.

    \n

    API

    \n

    setIOSCallbacks (object with callback methods for iOS) : void -\nUsed to set the iOS Callbacks\nAvailable callbacks are

    \n
    didFinishedResponse (response) : void\ndidCancelTransaction () : void\nerrorMissingParameterError (response): void\n
    \n

    createOrder (order object) : void -\nUsed to create an order using paytm order object.\nPlease refer the usage guide for sample order.

    \n

    initialize (string) : void -\nUsed to initialise paytm environment.\nAccepted strings are "STAGING" and "PRODUCTION"

    \n

    startPaymentTransaction (object with callback methods for Android) : void -\nUsed to start a transaction.\nAvailable callbacks are

    \n
    someUIErrorOccurred (inErrorMessage) : void\nonTransactionResponse (inResponse) : void // transaction successful\nnetworkNotAvailable () : void\nclientAuthenticationFailed (inErrorMessage) : void\nonErrorLoadingWebPage (iniErrorCode, inErrorMessage, inFailingUrl) : void\nonBackPressedCancelTransaction ()\nonTransactionCancel (inErrorMessage, inResponse) : void\n
    \n

    The callback method names are self explanatory.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-geo-firestore":{"name":"nativescript-geo-firestore","version":"1.0.2","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-last_known_location":{"name":"nativescript-last_known_location","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-last_known_location

    \n
    import { Last_known_location } from "nativescript-last_known_location";\nimport { isAndroid, isIOS, device, screen } from "tns-core-modules/platform";\n\nfunction getlastlocation(){\n    if( !isAndroid ) return ;\n    const get_last_location_class=Last_known_location;\n    var get_last_location = new get_last_location_class();\n  //optional  get_last_location.msg="message when request location permission"\n    get_last_location.getlocation(\n        location=>{\n          console.log("least known location latutide:longitude"+location.getLatitude()+","+location.getLongitude());\n        },\n        ()=>{ console.log("no permission");}\n    )\n}\n
    \n

    (Optional) Prerequisites / Requirements

    \n

    npm and nativescript install

    \n

    Installation

    \n
    tns plugin add nativescript-last_known_location
    \n

    Usage

    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch-notifs":{"name":"nativescript-batch-notifs","version":"2.0.3","license":"Apache-2.0","readme":"

    nativescript-batch

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-batch
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-login":{"name":"nativescript-facebook-login","version":"1.0.1","license":{"type":"","url":"https://github.com/AntonioCuevaUrraco/nativescript-facebook-login/blob/master/LICENSE"},"readme":"

    nativescript-facebook-login

    \n

    A NativeScript module providing Facebook login for Android and iOS.\nThe plugin is using the version 4.7.0 for iOS and the version 4.6.0 for Android

    \n

    Prerequisites

    \n

    NativeScript 1.3.0 for Android and iOS since we are using cocoapods and .aar libraries

    \n

    Plugin architecture

    \n
    .
    ├── app  <----------------run npm install from here
    │   ├── node_modules
    │   │   └── nativescript-facebook-login <-- The install will place the module's code here
    │   │       ├──platforms
    │   │       │  ├──android
    │   │       │  │  └─libs
    │   │       │  │    └─facebook-release.aar <-- This is the SDK for android as a .aar library
    │   │       │  └──ios
    │   │       │     └─Podfile <-- This is the SDK for iOS as a cocoapods dependency 
    │   │       ├──facebook-handler.android.js
    │   │       ├──facebook-handler.ios.js 
    │   │       ├──LICENSE
    │   │       ├──README
    │   │       └──package.json
    │   ├── package.json <-- The install will register \"nativescript-facebook-login as a dependency here
    │   └── tns_modules
    │       └── ...
    └──
    \n

    Installation

    \n

    tns plugin add nativescript-facebook-login

    \n

    iOS

    \n

    For ios you need to add this to your app.ios to initialize the SDK

    \n
    var application = require(\"application\");

    class MyDelegate extends UIResponder implements UIApplicationDelegate {
      public static ObjCProtocols = [UIApplicationDelegate];

      applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
       return FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions);
      }
      
      applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
        return FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation);
      }
      
      applicationDidBecomeActive(application: UIApplication): void {
          FBSDKAppEvents.activateApp();
      }

      applicationWillTerminate(application: UIApplication): void {
        //Do something you want here
      }

      applicationDidEnterBackground(application: UIApplication): void {
        //Do something you want here
      }
    }

    application.ios.delegate = MyDelegate;
    application.start();
    \n

    Add to your Info.plist(the one inside platforms/ios/yourApp) the Facebook App ID credentials

    \n

    <key>CFBundleURLTypes</key>
    \t<array>
    \t\t<dict>
    \t\t\t<key>CFBundleURLSchemes</key>
    \t\t\t<array>
            <string>fb{your-app-id}</string>
    \t\t\t</array>
    \t\t</dict>
    \t</array>
    \t<key>CFBundleVersion</key>
    \t<string>1.0</string>
    \t<key>FacebookAppID</key>
      <string>{your-app-id}</string>
    \t<key>FacebookDisplayName</key>
    \t<string>FacebookLoginDemo</string>
    \t<key>LSApplicationQueriesSchemes</key>
    \t<array>
    \t\t<string>fbauth2</string>
    \t\t<string>fbapi</string>
    \t\t<string>fb-messenger-api</string>
    \t\t<string>fbshareextension</string>
    \t</array>
    \n

    For more information you can consult the official Facebook page for iOS\nhttps://developers.facebook.com/docs/ios

    \n

    Android

    \n

    Add to your AndroidManifest.xml (the one inside platforms/android/src/main) the Facebook App ID credentials

    \n
    <uses-permission android:name=\"android.permission.INTERNET\"/>
    application android:label=\"@string/app_name\" ...>
        ...
        <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
        <activity android:name=\"com.facebook.FacebookActivity\"
              android:configChanges=
                     \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
              android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
              android:label=\"@string/app_name\" />
    </application>
    \n

    Add to your Strings (platforms/android/src/main/res/values/strings.xml) your facebook app id

    \n
    <string name=\"facebook_app_id\">your-app-id</string>
    \n

    For more information you can consult the official Facebook page for Android\nhttps://developers.facebook.com/docs/android

    \n

    Common to iOS and Android

    \n

    Require the plugin whenever you want to use it

    \n
    var FacebookLoginHandler = require(\"nativescript-facebook-login\");
    \n

    Create the callbacks to handle the result of the login

    \n
     var successCallback = function(result) {
                //Do something with the result, for example get the AccessToken
                var token;
                if (topmost().android){
                  token = result.getAccessToken().getToken();
                }
                else if (topmost().ios){
                  token = result.token.tokenString
                }
                alert(token);
            }

            var cancelCallback = function() {
                alert(\"Login was cancelled\");
            }

            var failCallback = function(error) {
                var errorMessage = \"Error with Facebook\";
               //Try to get as much information as possible from error
               if (error) {
                    if (topmost().ios) {
                        if (error.localizedDescription) {
                            errorMessage += \": \" + error.localizedDescription;
                        }
                        else if (error.code) {
                            errorMessage += \": Code \" + error.code;
                        }
                        else {
                            errorMessage += \": \" + error;   
                        }
                    }
                    else if (topmost().android) {
                        if (error.getErrorMessage) {
                            errorMessage += \": \" + error.getErrorMessage();
                        }
                        else if (error.getErrorCode) {
                            errorMessage += \": Code \" + error.getErrorCode();
                        }
                        else {
                            errorMessage += \": \" + error;   
                        }
                    }
                }
                alert(errorMessage);
            }
    \n

    And finally you can start the login process like this

    \n
      //Here we select the login behaviour

        //Recomended system account with native fallback for iOS
        if (topmost().ios) {
            FacebookLoginHandler.init(2);
        }
        //Recomended default for android 
        else if (topmost().android) {
            FacebookLoginHandler.init();
        }
        //Register our callbacks
        FacebookLoginHandler.registerCallback(successCallback, cancelCallback, failCallback);
        //Start the login process
        FacebookLoginHandler.logInWithPublishPermissions([\"publish_actions\"]);
    \n

    Known issues

    \n

    Sometimes the .aar library with the sdk for android don't get linked to the platform after installing the plugin. This end up in the error:
    \nTypeError: Cannot read property 'FacebookSdk' of undefined\nFile: "/data/data/com.ladeezfirstmedia.ThisOrThat/files/app/tns_modules/nativescript-facebook-login/facebook-handler.js line: 9 column:16

    \n

    You can try to sync the platform\ntns livesync android

    \n

    You can try cleaning the platform.\n-remove the plugin\n-remove the platform\n-add the plugin\n-add the platform in that order

    \n

    You can try to add manually the dependency\nchange the build.gradle (platforms/android/build.gradle) like this:

    \n
    dependencies {
    \t....
            ....
        compile \"com.android.support:support-v4:$suppotVer\"
        compile \"com.android.support:appcompat-v7:$suppotVer\"

        //Facebook sdk
        compile 'com.facebook.android:facebook-android-sdk:4.6.0'
         \t....
            ....
        
    }
    \n

    Frequently asked questions

    \n

    Why Xcode is not building my iOS platform?

    \n

    After installing the plugin CocoaPods creates a .xcworkspace file, use this one to open the project in Xcode instead of the .xcodeproj

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dieover/helloworld":{"name":"@dieover/helloworld","version":"1.0.5","license":"Apache-2.0","readme":"

    @dieover/helloworld

    \n
    ns plugin add @dieover/helloworld
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-input-mask":{"name":"nativescript-input-mask","version":"1.0.5","license":"Apache-2.0","readme":"

    Nativescript Input Mask

    \n

    Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

    \n

    This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

    \n

    Installation

    \n
    tns plugin add nativescript-input-mask
    \n

    Usage

    \n

    Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

    \n

    Documentation for masks is below (from here).

    \n
    \n

    Masks consist of blocks of symbols, which may include:

    \n
      \n
    • [] — a block for valueable symbols written by user.
      • \n
    \n

    Square brackets block may contain any number of special symbols:

    \n
      \n
    1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
      2. \n
    2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
      3. \n
    3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
      4. \n
    4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
      5. \n
    5. _ — mandatory symbol (digit or letter).
      6. \n
    6. - — optional symbol (digit or letter).
      7. \n
    \n

    Other symbols inside square brackets will cause a mask initialization error.

    \n

    Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

    \n

    Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

    \n

    Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

    \n
      \n
    • {} — a block for valueable yet fixed symbols, which could not be altered by the user.
      • \n
    \n

    Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

    \n

    Mask format examples:

    \n
      \n
    1. [00000000000]
      2. \n
    2. {401}-[000]-[00]-[00]
      3. \n
    3. [000999999]
      4. \n
    4. {818}-[000]-[00]-[00]
      5. \n
    5. [A][-----------------------------------------------------]
      6. \n
    6. [A][_______________________________________________________________]
      7. \n
    7. 8 [0000000000]
      8. \n
    8. 8([000])[000]-[00]-[00]
      9. \n
    9. [0000]{-}[00]
      10. \n
    10. +1 ([000]) [000] [00] [00]
      11. \n
    \n
    \n

    Angular

    \n

    Add the following lines to app/app.module.ts:

    \n
    import { InputMaskModule } from 'nativescript-input-mask/angular';

    @NgModule({
        // ...
        imports: [
            // ...
            InputMaskModule,
            // ...
        ],
        // ...
    })
    \n

    Use like a TextField with a mask property and other event properties:

    \n
    import { Component, NgZone, OnInit } from \"@angular/core\";

    @Component({
      selector: \"ns-app\",
      template: `
        <StackLayout>
            <InputMask
                mask=\"([000]) [000]-[0000]\"
                (extractedValueChange)=onExtractedValueChange($event)
                (completedChange)=\"onCompletedChage($event)\">
            </InputMask>
        </StackLayout>
          `    ,
    })
    export class AppComponent {
        onExtractedValueChange(args) {
            // `args.value` includes only extracted characters, for instance
            // `1235551111` would be logged while the UI would display `(123) 555-1111`.
            console.log('Extracted value:', args.value);
        }

        onCompletedChange(args) {
            // `args.value` indicates whether the field contains all mandatory characters.
            console.log('Completed:', args.value)
        }
    }
    \n

    Note that masks can be bound and changed on the fly. See demo app for a working implementation.

    \n

    API

    \n

    The InputMask class extends TextField and implements the following additional properties:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    mask""The mask property to apply to text entered into the field.
    extractedValue""The value extracted from the field.
    completedfalseIndicates whether all mandatory characters have been filled.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkedin-signin":{"name":"nativescript-linkedin-signin","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript LinkedIn Auth

    \n

    \"npm

    \n

    NativeScript plugin for LinkedIn Auth. Use OAuth2 to sign in with LinkedIn. Use this iOS lib and this Android lib.

    \n

    Installation

    \n

    Add the plugin

    \n
    tns plugin add nativescript-linkedin-signin
    \n

    Android

    \n

    Add this line into the AndroidManifest.xml

    \n
    <activity android:name=\"com.teammobile.linkedinsignin.ui.LinkedinSignInActivity\"/>
    \n

    Usage

    \n
        import { Component, OnInit } from \"@angular/core\";
        import { LinkedinSignin } from \"nativescript-linkedin-signin\";
        import * as Application from \"tns-core-modules/application\";
        import * as utilsModule from \"tns-core-modules/utils/utils\";
        import { isAndroid } from \"tns-core-modules/platform/platform\";


        @Component({
            selector: \"Home\",
            templateUrl: \"./home.component.html\"
        })
        export class HomeComponent implements OnInit {

            constructor() {
            }

            ngOnInit(): void {
                // Init your component properties here.
                if(isAndroid){
                    LinkedinSignin.init(\"<CLIENT_ID>\", \"<CLIENT_SECRET>\", \"<REDIRECT_URI>\", new Array<string>(), utilsModule.ad.getApplicationContext());
                } else {
                    LinkedinSignin.init(\"<CLIENT_ID>\", \"<CLIENT_SECRET>\", \"<REDIRECT_URI>\", new Array<string>(), Application.ios.rootController);
                }
            }

            coLinkedin(): void {
                LinkedinSignin.login().then(item => {
                    console.dir(item);
                    alert(item.token.accessToken);
                }).catch((error)=>{
                    alert(\"FAIL : \"+error.error);
                    console.dir(error);
                });
            }
        }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tus-upload":{"name":"nativescript-tus-upload","version":"1.0.5","license":"Apache-2.0","readme":"

    Nativescript TUS Upload Plugin

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Plugin to handle TUS protocol 1.0.0.

    \n

    Prerequisites / Requirements

    \n

    Tus libraries for iOS and Android.

    \n

    Installation

    \n
    tns plugin add nativescript-tus-upload
    \n

    Usage

    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-loading-indicator":{"name":"@essent/nativescript-loading-indicator","version":"4.0.0","license":"MIT","readme":"

    nativescript-loading-indicator

    \n

    nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

    \n\n

    Installation

    \n
    tns plugin add nativescript-loading-indicator
    \n

    Example

    \n
    var LoadingIndicator = require(\"nativescript-loading-indicator\").LoadingIndicator;

    // or with TypeScript:
    // import {LoadingIndicator} from \"nativescript-loading-indicator\";

    var loader = new LoadingIndicator();

    // optional options
    // android and ios have some platform specific options
    var options = {
      message: 'Loading...',
      progress: 0.65,
      android: {
        indeterminate: true,
        cancelable: false,
        max: 100,
        progressNumberFormat: \"%1d/%2d\",
        progressPercentFormat: 0.53,
        progressStyle: 1,
        secondaryProgress: 1
      },
      ios: {
        details: \"Additional detail note!\",
        margin: 10,
        dimBackground: true,
        color: \"#4B9ED6\", // color of indicator and labels
        // background box around indicator
        // hideBezel will override this if true
        backgroundColor: \"yellow\",
        hideBezel: true, // default false, can hide the surrounding bezel
        view: UIView, // Target view to show on top of (Defaults to entire window)
        mode: // see iOS specific options below
      }
    };

    loader.show(options); // options is optional

    // Do whatever it is you want to do while the loader is showing, then

    loader.hide();
    \n

    Options

    \n
      \n
    • message: string Your message!
      • \n
    • progress: number Set progress display
      • \n
    \n

    Android Specific

    \n
      \n
    • Reference: http://developer.android.com/intl/zh-tw/reference/android/app/ProgressDialog.html
      • \n
    \n

    iOS Specific

    \n
      \n
    • Reference: https://github.com/jdg/MBProgressHUD/blob/master/Demo/Classes/MBHudDemoViewController.m
      • \n
    \n

    Quick Mode Reference:

    \n
      \n
    • MBProgressHUDModeDeterminate
      • \n
    • MBProgressHUDModeAnnularDeterminate
      • \n
    • MBProgressHUDModeDeterminateHorizontalBar
      • \n
    • MBProgressHUDModeText
      • \n
    • MBProgressHUDModeCustomView\n
        \n
      • use with customView: string - local path to an image file
        • \n
      \n
      • \n
    \n

    Screenshots

    \n\"Loading\n\"Loading\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toast-plugin":{"name":"nativescript-toast-plugin","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tappy":{"name":"nativescript-tappy","version":"1.0.10","license":"Apache-2.0","readme":"

    NativeScript Tappy

    \n

    {N} plugin for integrating with the iOS sdk for https://github.com/TapTrack/TCMPTappy-iOS

    \n

    Demo

    \n

    The demo app scans for TapTrack devices, connects, and performs read and write actions.\nTo run the demo:

    \n

    cd demo
    \nnpm install
    \ntns platform add ios
    \ntns run ios

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-buttons":{"name":"nativescript-nbmaterial-buttons","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material Float buttons

    \n

    The module implement Float buttons on both iOS and Android.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:btn=\"nativescript-nbmaterial-buttons\">
     \t\t<btn:FloatButton row=\"0\" id=\"floatbtn\" afterTap=\"navigateForm\" animNavigation=\"true\" text=\"edit\" />
    </Page>

    }
    \n

    animNavigation make the button growing when the page load (or disappear when the page is unloading)

    \n

    The button has this interface:

    \n
    export declare abstract class FloatButton extends View {
        static aftertapEvent: string;
        animNavigation: boolean;
        rippleColor: Color;
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-idtech-vp-sdk":{"name":"nativescript-idtech-vp-sdk","version":"1.1.2","license":"Apache-2.0","readme":"

    Nativescript IDTech VP3300 SDK

    \n

    *** IMPORTANT ***\nWorks only on iOS. Uses custom iOS (umbrella) framework that implements\nIDTech Universal SDK

    \n

    Subset of ID Tech Universal SDK's methods to support VP3300 EMV reader.

    \n

    Contains of:

    \n
      \n
    • BLE device search
      • \n
    • API methods for connecting to VP3300
      • \n
    • API method for starting contactless/swipe/chip transaction
      • \n
    \n

    Returns decrypted data string\nDecryption done following this guidance:

    \n
      \n
    • https://idtechproducts.com/how-to-decrypt-credit-card-data-part-i/
      • \n
    • https://idtechproducts.com/how-to-decrypt-credit-card-data-part-ii/
      • \n
    \n

    NOTE this is just a tiny subset of available SDK methods.\nThat's simply all I needed to be able to get and parse CC data.

    \n

    Installation

    \n
    tns plugin add nativescript-idtech-vp-sdk
    \n

    Usage

    \n
        const idtechVp3300 = new IdtechVp3300();

        //Handlers:
        idtechVp3300.onReaderConnected = () => {
          alert('connected');
        };

        idtechVp3300.onReaderDisconnected = () => {
          alert('disconnected');
        };

        idtechVp3300.onReaderData = (data: string) => {
          alert(data);
        };

        idtechVp3300.onReaderDataParseError = (error: string) => {
          alert(error);
        };

        // BLE
        idtechVp3300.onBluetoothAvailableDevicesListUpdate = (devices: Set<BluetoothDevice>) => {
            const devicesList = Array.from(devices) || [];
            const emvReaders = devicesList
                .filter((i: BluetoothDevice) => i.isSupportedEmv);

            if (available && available.length) {
                // Connect to the first one
                idtechVp3300
                    .connectWithIdentifier(available[0].identifier)
            }
        }

        // Read
        idtechVp3300.readCardData(0); // $0

        // Connect
        idtechVp3300.connectWithIdentifier(\"ABC\")
        idtechVp3300.connectWithFriendlyName(\"ID Tech\")
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-preferences":{"name":"nativescript-preferences","version":"1.2.0","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    nativescript-preferences

    \n

    This plugin allows native preference saving\\loading on iOS and Android

    \n\n\n

    iOS Prerequisites

    \n\n

    Android Prerequisites

    \n\n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-preferences
    \n

    Usage

    \n
        var prefs = new Preferences();

        //Get existing value
        prefs.getValue(\"name_preference\");

        //Set value
        prefs.setValue(\"name_preference\", \"some new text\");
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    openSettings(): any;Opens the native settings panes
    getValue(key: string): any;Gets the value for the preference
    setValue(key: string, value: any): void;Sets the passed value to the preference
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-razorpay":{"name":"nativescript-razorpay","version":"1.2.2","license":"Apache-2.0","readme":"

    Razorpay (Unofficial)

    \n

    A nativescript wrapper around iOS and Android Razorpay plugins. Razorpay is a payment gateway for some of the payments around Indian payments ecosystem. This does not provide any UI components. Will only provide functions to open native payment flows and receive callbacks. Hence, cannot be used declaratively.

    \n

    Installation

    \n

    Open terminal and type the following command at the root of your project folder.

    \n
    tns plugin add nativescript-razorpay
    \n

    Usage

    \n
    export function onCheckoutButtonTapped(args : any) {
        new RazorpayCheckout(\"rzp_test_some_id\").open({
            \"amount\" : \"1000\", //In paise 
            \"description\" : \"Some Items from Swiggy\",
            \"image\" : \"https://placem.at/things?h=200\",
            \"name\" : \"My Business Checkout\",
            \"prefill\": {
                \"contact\": \"Valid phone number\",
                \"email\": \"foo@bar.com\"
            },
        }).then(function(paymentId){
            console.log(\"Payment Id \", paymentId);
        }, function(error){
            console.error(error);
        })
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    opennoneAccepts options among others, should contain "amount"
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nativemediapicker":{"name":"nativescript-nativemediapicker","version":"1.0.2","license":"Apache-2.0","readme":"

    nativescript-nativemediapicker

    \n

    A complete media picker solution for NativeScript. You will be able to pickup any types of file. Capturing image, video & audio are supported.

    \n

    Note: For iOS this plugin is in under development, it contains dummy methods for ios return error :)

    \n

    Features:

    \n
      \n
    • Image, Video, Audio & custom file picker.
      • \n
    • Capturing Image, Video and Audio from APP directly.
      • \n
    • Custom files like pdf, text etc support.
      • \n
    • Single or Multiple selections.
      • \n
    • More...
      • \n
    \n

    Limitations

    \n
      \n
    • Now, only supported for android.
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-nativemediapicker
    \n

    Android Permissions Required

    \n
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.READ_USER_DICTIONARY\"/>
    <uses-permission android:name=\"android.permission.CAMERA\"/>
    <uses-feature android:name=\"android.hardware.camera\" android:required=\"true\" />
    \n

    Add FileProvider to support (>=Android N) (create file_paths.xml in "app\\App_Resources\\Android\\src\\main\\res\\xml" & copy-paste following code)

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <paths>
        <files-path path=\"demo/\" name=\"myfiles\" />
        <external-path name=\"mediafiles\" path=\".\" />
    </paths>
    \n

    Add FileProvider tag to application tag in AndroidManifest.xml

    \n
    <provider android:name=\"android.support.v4.content.FileProvider\" android:authorities=\"{applicationId}.provider\" android:grantUriPermissions=\"true\" android:exported=\"false\">
        <meta-data android:name=\"android.support.FILE_PROVIDER_PATHS\"android:resource=\"@xml/file_paths\" />
    </provider>
    \n

    Usage (Please check demo project for details)

    \n

    Import

    \n

    JavaScript:

    \n
    var nativemediapicker = require(\"nativescript-nativemediapicker\");
    \n

    TS:

    \n
    import { Nativemediapicker } from 'nativescript-nativemediapicker';
    \n

    File Picker

    \n
    // replace first parameter with your mime type
    Nativemediapicker.pickFiles(\"image/*\",
        function(res){
    \t\tconsole.log(res);
    \t},
        function(err){
    \t\tconsole.log(err);
    \t});
    \n

    Capture Image

    \n
    // registerFileProvider is needed to capture image
    Nativemediapicker.registerFileProvider(
          application.android.currentContext.getPackageName() +
            \".provider\"
        );
    Nativemediapicker.takePicture(
        function(res){
    \t\tconsole.log(res);
    \t},
        function(err){
    \t\tconsole.log(err);
    \t});
    \n

    Capture Video

    \n
    Nativemediapicker.recordVideo(
        function(res){
    \t\tconsole.log(res);
    \t},
        function(err){
    \t\tconsole.log(err);
    \t});
    \n

    Capture Audio

    \n
    Nativemediapicker.recordAudio(
        function(res){
        \tconsole.log(res);
        },
        function(err){
        \tconsole.log(err);
        });
    \n

    Screenshots

    \n

    Android

    \n

    \"Android\"\n\"Android\"\n\"Android\"

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paypal-checkout":{"name":"nativescript-paypal-checkout","version":"2.1.1","license":"Apache-2.0","readme":"

    PayPal Checkout \"apple\" \"android\"

    \n

    Screenshot

    \n\"Android\"\n

    Support

    \n

    Support Android & iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-paypal-checkout
    \n

    Usage

    \n

    In the demo you will find a test token to test quickly

    \n
    import { PaypalCheckout, PaypalOptions } from 'nativescript-paypal-checkout';

    private paypalCheckout: PaypalCheckout;

    this.paypalCheckout = new PaypalCheckout();

    let options: PaypalOptions = {
    \ttoken: \"TOKEN\", // The token is obtained from the server
    \tamount: \"10\",
    \tcurrencyCode: \"USD\"
    };

    this.paypalCheckout.paypalRequest(options).then(
    \t(nonce) => {
    \t\tconsole.log(\"Token nonce: \" + nonce);
    \t}, (error) => {
    \t\tconsole.log(error);
    \t}
    );
    \n

    Others

    \n

    Create token Server-Side : https://developers.braintreepayments.com/start/hello-server/php#generate-a-client-token

    \n

    More references: https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/android/v2

    \n

    Server-Side Implementation: https://developers.braintreepayments.com/guides/paypal/server-side/php

    \n

    Thanks

    \n

    Thanks to @jibon57 the configurations for the plugin

    \n

    Settings app ios: https://github.com/jibon57/nativescript-braintree

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-download-progress":{"name":"nativescript-download-progress","version":"1.7.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-pay":{"name":"nativescript-open-pay","version":"1.0.0","license":"Apache-2.0","readme":"

    Openpay \"apple\" \"android\"

    \n

    Support

    \n

    Support Android & iOS.

    \n

    Installation

    \n
    tns plugin add nativescript-open-pay
    \n

    Usage

    \n

    In the demo you will find a test token to test quickly

    \n
    import { Observable } from \"tns-core-modules/data/observable\";
    import { OpenPay, Card } from \"nativescript-open-pay\";

    export class HelloWorldModel extends Observable {
        private openPay: OpenPay;

        constructor() {
            super();

            this.openPay = new OpenPay();
            this.openPay.setup(
                \"merchant_id\", // merchantId
                \"api_key\", // apiKey
                false // ProductionMode Sandbox = false
            );

            let card: Card = {
                holderName: \"Juan Perez Ramirez\",
                cardNumber: \"4111111111111111\",
                expirationMonth: \"12\",
                expirationYear: \"20\",
                cvv2: \"110\"
            };

            this.openPay
                .createToken(card)
                .then(function(args) {
                    console.dir(args);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-statusbar":{"name":"nativescript-plugin-statusbar","version":"1.0.19","license":"Apache-2.0","readme":"

    nativescript-statusbar

    \n

    StatusBar plugin Android platform

    \n
    \n

    This plugin work currently just with Android Platform

    \n
    \n\"statusbar\n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-plugin-statusbar
    \n

    Demo

    \n

    If you want a quickstart, check out the demo app. Run it locally using these commands:

    \n
    git clone https://github.com/olivierAdou/nativescript-plugin-statusbar
    cd nativescript-plugin-statusbar/src
    npm run demo.android
    \n

    Or use this for demo with Angular\ncheck out the demo angular app

    \n
    git clone https://github.com/olivierAdou/nativescript-plugin-statusbar
    cd nativescript-plugin-statusbar/src
    npm run demo-angular.android
    \n

    JavaScript

    \n
    var statusbarPlugin = require(\"nativescript-plugin-statusbar\");
    var statusbar = new statusbarPlugin();
    \n

    TypeScript

    \n
    import { Statusbar } from \"nativescript-plugin-statusbar\";

    class MyClass {
      constructor( private statusbar: Statusbar) {
      }
    }
    \n

    TypeScript provider from app.module.ts

    \n

    In the file called app.module.ts add the plugin class in provider, like this :

    \n
    import { Statusbar } from 'nativescript-plugin-statusbar';
    @NgModule({
        bootstrap: [
            AppComponent
        ],
        imports: [
            NativeScriptModule,
            AppRoutingModule
        ],
        declarations: [
            AppComponent
        ],
        providers : [Statusbar],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class AppModule { }
    \n

    If all it done correctly i can say your are ready to use this plugin

    \n

    setNavigationBarColor

    \n

    This function will allow you to give a color to the statusbar

    \n

    This function need one parameter to be a hex code color ('#000') for example

    \n
        this.statusbar.setNavigationBarColor(codecolor);
    \n\n

    setStatusBarColor

    \n

    Change the color of the staturbar.

    \n

    This function need one parameter to be a hex code color ('#000') for example

    \n
        this.statusbar.setStatusBarColor(codecolor);
    \n\n

    setNavigationBarColorTransparent

    \n

    Set transparent the NavigationBar

    \n
        this.statusbar.setNavigationBarColorTransparent();
    \n

    setStatusBarColorTransparent

    \n

    Set transparent the statusBar

    \n
        this.statusbar.setStatusBarColorTransparent();
    \n

    hideStaturbar

    \n

    Make the statusBar hidden

    \n
        this.statusbar.hideStaturbar();
    \n

    hideNavigationBar

    \n

    Make the navigationBar hidden

    \n
        this.statusbar.hideNavigationBar();
    \n

    enableFullScreen

    \n

    the method is based on this interface

    \n
    export interface FullScreen {
      leanBack(): any;
      immersive(): any;
      stickyImmersive(): any;
    }
    \n

    there are three methods called leanBack, immersive, stickyImmersive

    \n

    leanBack

    \n

    The lean back mode is for fullscreen experiences in which users won't be interacting heavily with the screen, such as while watching a video.

    \n

    When users want to bring back the system bars, they simply tap the screen anywhere.

    \n

    To enable leanBack mode, call

    \n
        this.statusbar.enableFullScreen.leanBack();
    \n

    immersive

    \n

    The immersive mode is intended for apps in which the user will be heavily interacting with the screen. Examples are games, viewing images in a gallery, or reading paginated content, like a book or slides in a presentation.

    \n

    When users need to bring back the system bars, they swipe from any edge where a system bar is hidden. By requiring this more deliberate gesture, the user's engagement with your app won't be interrupted by accidental touches and swipes.

    \n

    To enable immersive mode, call

    \n
        this.statusbar.enableFullScreen.immersive();
    \n

    stickyImmersive

    \n

    In the regular immersive mode, any time a user swipes from an edge, the system takes care of revealing the system bars—your app won't even be aware that the gesture occurred. So if the user might actually need to swipe from the edge of the screen as part of the primary app experience—such as when playing a game that requires lots of swiping or using a drawing app—you should instead enable the "sticky" immersive mode.

    \n

    While in sticky immersive mode, if the user swipes from an edge with a system bar, system bars appear but they're semi-transparent, and the touch gesture is passed to your app so it app can also respond to the gesture.

    \n

    To enable sticky immersive mode, call

    \n
        this.statusbar.enableFullScreen.stickyImmersive();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-particle-emitter":{"name":"nativescript-particle-emitter","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Particle Emitter

    \n

    \"Build

    \n

    Particle emitter component for NativeScript.

    \n

    \"demo

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-particle-emitter
    \n

    Usage

    \n

    Add your particle emitter Page from XML:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pe=\"nativescript-particle-emitter\">
      <GridLayout>
        <pe:ParticleEmitter isEmitting=\"true\" />
      </GridLayout>
    </Page>
    \n

    or you can choose to pass in some configuration:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:pe=\"nativescript-particle-emitter\">
      <GridLayout>
        <pe:ParticleEmitter
          isEmitting=\"true\"
          showDebug=\"true\"
          emitOriginX=\"150\"
          emitOriginY=\"200\" 
          emitOriginWidth=\"100\"
          emitOriginHeight=\"100\"
          particleDuration=\"1000\"
          emitCount=\"4\" 
          emitInterval=\"60\"  
          emitDistance=\"120\"  
          emitDistanceVariation=\"50\"  
          emitAngle=\"90\"  
          emitAngleVariation=\"45\" 
          colorPalette=\"red, green, #0000FF\" />
      </GridLayout>
    </Page>
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    isEmittingfalseControls wether the emitter is emitting
    showDebugfalseShows debug helpers
    emitInterval50The interval used for emitting in milliseconds
    emitCount5The number of particles on each emit
    particleDuration800Lifespan of the particles in milliseconds
    emitDistance80The base distance the particles will travel
    emitDistanceVariation40Distance variation. Each particle will travel a random number in the range [distance - variation, distance + variation]
    emitAngle0The angle (in degrees) at which particles are emitted
    emitAngleVariation180Angle variation. Each particle will be emitted at a random angle in the range [angle - variation, angle + variation]
    emitOriginX0The X coordinate of the center of the emit box
    emitOriginY0The X coordinate of the center of the emit box
    emitOriginWidth1The width of the emit box
    emitOriginHeight1The Height of the emit box
    colorPalette"blue"The color palette used for particles. Colors should be comma-separated when defined in XML (ex. "red, green, blue")
    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intercom-bridge":{"name":"nativescript-intercom-bridge","version":"1.0.0","license":"MIT","readme":"

    Intercom for NativeScript

    \n

    This is a plugin that allows your NativeScript app to use Intercom for iOS and/or Intercom for Android.

    \n
      \n
    • Intercom for iOS supports iOS 8, 9 & 10.
      • \n
    • Intercom for Android supports API 15 and above.
      • \n
    \n

    Installation

    \n

    To install the plugin in your NativeScript app, run the following:

    \n
    tns plugin add nativescript-intercom-bridge
    \n

    Example App

    \n

    An example app is provided here that shows a basic NativeScript app integration with Intercom.

    \n

    License

    \n

    nativescript-intercom-bridge is released under the MIT License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-url-share":{"name":"nativescript-url-share","version":"1.6.3","license":"MIT","readme":"

    NativeScript Url Share Plugin

    \n

    Forked from https://github.com/tjvantoll/nativescript-social-share.

    \n

    A NativeScript plugin to use the native social sharing widget on Android and iOS. Currently this module supports image and text sharing.

    \n

    \"\"\n\"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-url-share
    \n

    This command automatically installs the necessary files, as well as stores nativescript-url-share as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    // ------------ JavaScript ------------------
    var UrlShare = require(\"nativescript-url-share\");

    // ------------- TypeScript ------------------
    import * as UrlShare from \"nativescript-url-share\";
    \n

    API

    \n

    shareUrl(String url, String text, [optional] String subject)

    \n

    The shareUrl() method excepts a url and a string.

    \n
    UrlShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\");
    \n

    You can optionally pass shareUrl() a second argument to configure the subject on Android:

    \n
    UrlShare.shareUrl(\"https://www.nativescript.org/\", \"Home of NativeScript\", \"How would you like to share this url?\");
    \n

    Tutorials

    \n

    Looking for some extra help getting social sharing working in your mobile application? Check out these resources:

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-monety":{"name":"nativescript-zendesk-monety","version":"0.0.16","license":"Apache-2.0","readme":"

    NOTE: Forked from https://github.com/rhanb/nativescript-zendesk-sdk and turned into an npm package to use TNS 6 and the latest version of zendesk SDK.

    \n

    nativescript-zendesk-sdk

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin implementing the basic Zendesk SDK in TypeScript.\nIt is inspired from nativescript-zendesk

    \n

    Install

    \n
    tns plugin add nativescript-zendesk-sdk
    \n

    Usage

    \n

    Following Zendesk Embeddables Documentation:

    \n

    [Must do] Configure an app in Zendesk Support

    \n

    Support SDK for Android / iOS

    \n

    [Must do] Initialize the SDK

    \n

    Support SDK for Android / iOS

    \n
    export interface InitConfig {
        applicationId: string;
        zendeskUrl: string;
        clientId: string;
        userLocale?: string;
        /** AnonUserIdentity object or JWT Token string */
        identity?: AnonUserIdentity | string;
    }
    \n
    import { ZendeskSdk } from \"nativescript-zendesk-sdk\";
    ...
    const initConfig = {
        ...
    }
    ZendeskSdk.initialize(initConfig);
    \n

    If identity: null a new anonymous identity is created, but if identity is undefined it must be set later, but before launching any Zendesk views/activities.

    \n

    Note: applicationId, zendeskUrl, and clientId must be specified when initializing the Zendesk, but locale, COPPA-compliance mode, and Identity can be set/changed later.

    \n

    [Must do] Set an identity (authentication)

    \n

    Support SDK for Android / iOS

    \n
    Authenticate using an anonymous identity
    \n
    ZendeskSdk.setAnonymousIdentity();
    \n
    Authenticate using an anonymous identity (with details)
    \n
    ZendeskSdk.setAnonymousIdentity({name: \"name\", email: \"email\"});
    \n
    Authenticate using your JWT endpoint
    \n
    ZendeskSdk.setJwtIdentity(\"jwtUserIdentifier\");
    \n

    Locale Settings

    \n

    Support SDK for Android / iOS

    \n

    The locale used by the SDK for static strings will match the Android Application Configuration or the iOS NSUserDefaults.\n(These strings can be overridden or missing languages can be added as described in the links above).

    \n

    To set the Locale of any dynamic content retrieved from Zendesk:

    \n
    ZendeskSdk.setUserLocale(localeCode);
    \n

    Configure Requests

    \n

    Support SDK for Android / iOS

    \n

    Before opening the Help Center or creating a Request you can specify the Request settings:

    \n
    export interface RequestOptions {
      requestId?: string;
      requestSubject?: string;
      addDeviceInfo?: boolean;
      tags?: string[];
      files?: File[]; // android only
      customFields?: CustomField[];
      ticketForm?: {
        ticketFormId: string;
        customFields: CustomField[]
      };
    }
    \n

    Show the user's tickets

    \n

    Support SDK for Android / iOS

    \n

    Default Usage

    \n
    ZendeskSdk.showRequestList();
    \n

    Show the Help Center

    \n

    Support SDK for Android / iOS

    \n

    Default Usage

    \n
    ZendeskSdk.showHelpCenter();
    \n

    Optional Parameters

    \n
    export interface HelpCenterOptions {
      /** default: { contactUsButtonVisible: false } */
      articleOptions?: ArticleOptions;
      /** default: false */
      contactUsButtonVisible?: boolean;
      /** default: false -- android only */
      categoriesCollapsed?: boolean;
      /** default: true -- android only */
      conversationsMenu?: boolean;
    }
    \n
    ZendeskSdk.showHelpCenter(options);
    \n

    Filter the Help Center

    \n

    Support SDK for Android / iOS

    \n

    Per original SDKs, only one filter can be used at a time.

    \n

    Filter by category

    \n
    ZendeskSdk.showHelpCenterForCategoryIds(categoryIds, options);
    \n

    Filter by section

    \n
    ZendeskSdk.showHelpCenterForLabelNames(labelNames, options);
    \n

    Filter by article label

    \n
    ZendeskSdk.showHelpCenterForSectionIds(sectionIds, options);
    \n

    Create a request

    \n
    ZendeskSdk.createRequest();
    \n

    Styling

    \n

    Support SDK for Android / iOS

    \n

    Android

    \n

    Configured via app/App_Resources/Android/AndroidManifest.xml as detailed here.

    \n

    Simple Styling

    \n

    Zendesk offers 3 base themes that can be used or extended:

    \n
      \n
    • ZendeskSdkTheme.Light
      • \n
    • ZendeskSdkTheme.Dark
      • \n
    • ZendeskSdkTheme.Light
      • \n
    \n
    Example extending PnpZendeskSdkTheme.DarkActionBar
    \n

    app/App_Resources/Android/AndroidManifest.xml

    \n
        
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
        ...>
        <application
            ...>
            <activity android:name=\"com.zendesk.sdk.support.SupportActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.feedback.ui.ContactZendeskActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.support.ViewArticleActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.requests.RequestActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>

            <activity android:name=\"com.zendesk.sdk.requests.ViewRequestActivity\"
                      android:theme=\"@style/MyZendeskSdkTheme.DarkActionBar\"/>
        </application>
    </manifest>
    \n

    app/App_Resources/Android/values/styles.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <resources xmlns:android=\"http://schemas.android.com/apk/res/android\">
    ...
        <style name=\"PnpZendeskSdkTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
            <item name=\"colorPrimary\">@color/ns_primary</item>
            <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
            <item name=\"colorAccent\">@color/ns_accent</item>
            <item name=\"android:actionMenuTextColor\">@color/ns_blue</item>
            </style>
    </resources>
    \n
    <style name=\"YourLightTheme\" parent=\"ZendeskSdkTheme.Light\">
    ...
    </style>
    <style name=\"YourDarkTheme\" parent=\"ZendeskSdkTheme.Dark\">
    ...
    </style>
    <style name=\"YourLightTheme.DarkActionBar\" parent=\"ZendeskSdkTheme.Light.DarkActionBar\">
    ...
    </style>
    \n

    iOS

    \n
    import { isIOS } from 'tns-core-modules/platform';

    ...

    if ( isIOS ) {
        UINavigationBar.appearance().tintColor = new Color('#00FFFF').ios;
        UINavigationBar.appearance().barTintColor = new Color('#FF00FF').ios;
        UINavigationBar.appearance().titleTextAttributes =
            <NSDictionary<string, any>>NSDictionary.dictionaryWithObjectForKey(
                new Color('#FFFF00').ios,
                NSForegroundColorAttributeName);
    }

    const iOSTheme: ZendeskIosThemeSimple = {
        primaryColor: '#FF0000',
    };
    ZendeskSdk.setIosTheme(iOSTheme);
    \n

    The first 3 colors are used primarily on the ActionBar/StatusBar for the "new ticket" screen, as the Help Center uses the default ActionBar/StatusBar colors from the regular NativeScript setup.

    \n

    These settings could affect the whole app, but are ignored by the regular NativeScript Views, but could potentially impact other 3rd part views. Likely you will set these to be the same as what is used in the rest of the app.

    \n

    The settings within the theme object will only affect the Zendesk.

    \n

    Contributions

    \n

    Typings and iOS metadata have been included in the project to allow for easier usage.
    \nTypings were autogenerated using:
    \nhttps://github.com/NativeScript/android-dts-generator
    \nhttps://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-plugin":{"name":"nativescript-twilio-plugin","version":"3.0.0","license":"Apache-2.0","readme":"

    nativescript-twilio-plugin

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-twilio-plugin
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photo-zoom":{"name":"nativescript-photo-zoom","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Photo Zoom

    \n

    A NativeScript Photo Zoom

    \n

    Based on

    \n

    ScrollView and SDWebImage for iOS

    \n

    PhotoDraweeView and Fresco for Android

    \n

    Referenced from nativescript-fresco and nativescript-image-zoom

    \n

    Installation

    \n

    Run tns plugin add nativescript-photo-zoom

    \n

    API

    \n

    Events

    \n
      \n
    • finalImageSet
      \nThis event is fired after the final image has been set.
      • \n
    • failure
      \nThis event is fired after the fetch of the final image failed.
      • \n
    • submit
      \nThis event is fired before the image request is submitted (only Android).
      • \n
    • scaleChanged
      \nThis event is fired when the image photo is scaling.
      • \n
    \n

    Instance Properties

    \n
      \n
    • src - String
      \nString value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.
      • \n
    • placeholder - String
      \nString value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.
      • \n
    • stretch - String
      \nDescribes how image is resized to fill its allocated space. This property can be set to:\naspectFill,\naspectFit,\nfill or\nnone
      • \n
    • zoomScale - Number
      \nGet or set zoom scale of photo.
      • \n
    \n

    Usage in Angular

    \n
      \n
    • Import NativeScriptUIPhotoZoomModule in NgModule:
      • \n
    \n
    import { NativeScriptUIPhotoZoomModule } from \"nativescript-photo-zoom/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptUIPhotoZoomModule,
            //......
    \t],
        //......
    })
    \n
    <!-- app.component.html -->
    <GridLayout>
        <PhotoZoom [src]=\"photoUrl\" placeholder=\"res://placeholder\" (finalImageSet)=\"onFinalImageSet($event)\" (failure)=\"onFailure($event)\"  (scaleChanged)=\"onScaleChanged($event)\"></PhotoZoom>
    </GridLayout>
    \n
    // app.componnet.ts
    import { Component } from \"@angular/core\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

        public photoUrl = \"https://vignette.wikia.nocookie.net/inuyasha/images/b/b5/Inuyasha.png\";

        constructor() { }

        onFinalImageSet(event) {
            console.log(\"onFinalImageSet: \", event);
        }

        onFailure(event) {
            console.log(\"onFailure: \", event);
        }

        onScaleChanged(event) {
            console.log(\"onScaleChanged: \", event.object.zoomScale);
        }
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/HoangJK/nativescript-photo-zoom.git
    $ cd nativescript-photo-zoom/src
    $ npm install
    $ npm run demo.ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

    \n

    If you want to run the Angular demo simply use the demo.ios.ng or demo.android.ng.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-soft-keyboard":{"name":"@bigin/ns-soft-keyboard","version":"2.0.8","license":"Apache-2.0","readme":"

    Credit

    \n

    This plugin is from nativescript-soft-keyboard of @liuy97. You can get the original plugin at https://github.com/liuy97/nativescript-soft-keyboard

    \n

    We just upgrade to NS7 and add some tweaks to make it works.

    \n

    NativeScript Soft Keyboard Height

    \n

    It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But NativeScript app sometimes needs this information to achieve a good user interface.

    \n

    Installation

    \n
    ns plugin add @bigin/ns-soft-keyboard
    \n

    Usage

    \n
    registerSoftKeyboardCallback((h) => console.log(h));
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    functionparameterDescription
    registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-epub-reader":{"name":"nativescript-epub-reader","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-epub-reader

    \n

    NativeScript plugin to open and read ePub files natively.

    \n

    Getting Started

    \n
      \n
    • npm install nativescript-epub-reader
      • \n
    • For iOS Place your epub files in your App_Resources/iOS directory.
      • \n
    • For Android, required absolute file path as parameter.
      • \n
    • Import EpubReader in your page and open the file.
      • \n
    \n

    Android Permissions Required

    \n
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    \n

    AndroidManifest

    \n

    Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

    \n

    {your-app-module}/res/xml/network_security_config.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <network-security-config>
        <domain-config cleartextTrafficPermitted=\"true\">
            <domain includeSubdomains=\"true\">127.0.0.1</domain>
            <domain includeSubdomains=\"true\">localhost</domain>
        </domain-config>
    </network-security-config>
    \n

    Then add network_security_config.xml in your app module's AndroidManifest.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <manifest ...>
        ...
        <application android:networkSecurityConfig=\"@xml/network_security_config\">
        ...
        </application>
    </manifest>
    \n

    Code Sample

    \n
    import {Observable} from 'data/observable';
    import { EpubReader } from 'nativescript-epub-reader';
    import * as application from \"tns-core-modules/application\";

    export class HelloWorldModel extends Observable {

      constructor() {
        super();
        let ePubReader = new EpubReader();
        if (application.android) {
            ePubReader.open('/storage/emulated/0/Download/Metamorphosis-jackson.epub');
        }else{
            ePubReader.open('book');
        }
      }

    }
    \n

    IOS Demo

    \n

    \"Image\"

    \n

    Android Demo

    \n
    Custom Fonts
    \n

    \"Custom

    \n
    Day and Night Mode
    \n

    \"Day

    \n
    Text Highlighting
    \n

    \"Highlight\"

    \n
    Media Overlays
    \n

    \"Media

    \n

    Credits

    \n
      \n
    • https://github.com/FolioReader/FolioReaderKit
      • \n
    • https://github.com/FolioReader/FolioReader-Android
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opentok-plugin":{"name":"nativescript-opentok-plugin","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript OpenTok Plugin

    \n

    This repository is a fork of https://github.com/TeamMaestro/nativescript-opentok, all credit to this repository for the wrapper and actual code.\nThis plugin is just an dirty but working updated version based on the last OpenTok SDK with a working example.

    \n

    Usage

    \n

    Look at the demo folder for a simple working example.\nReplace API, SESSION and TOKEN with actual ones.

    \n

    Install

    \n

    Just run npm install nativescript-opentok-plugin --save inside your Nativescript application.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-v2oip":{"name":"nativescript-twilio-v2oip","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-twilio-v2oip

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-twilio-v2oip
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-caching":{"name":"nativescript-image-caching","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript Image Caching

    \n

    Image Caching that use Glide(v3) for android and SDWebImage(v4) for ios

    \n

    CAUTION!

    \n

    this plugin is under development, i really appreciate pull request and contribution in this repo. Thanks!

    \n

    inspired from nativescript-image-cache-it
    \nthey used Picasso rather than Glide.

    \n

    Installation

    \n
    tns plugin add nativescript-image-caching
    \n

    Usage

    \n
      <ImageCache src=\"http://lorempixel.com/2000/2000/sports\"
                  width=\"100%\"
                  height=\"210\"/>
    \n

    IMPORTANT FOR ANGULAR

    \n

    inside your app module. insert:

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    registerElement('ImageCache', () => require('nativescript-image-caching').ImageCache);
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    src-(required) link url of an image
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-bottomsheet":{"name":"nativescript-nbmaterial-bottomsheet","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material Bottom Sheet

    \n

    The module implement Bottom Sheet Layout on both iOS and Android.
    \nThere is an animation effect on open and on close.

    \n
    bottomSheet = page.getViewById(\"bottomsheet\");
    export function showBS() { 
        bottomSheet.show();
    }
    export function hideBS() {
        bottomSheet.hide();
    }
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:bnav=\"nativescript-nbmaterial-bottomnav\">
    \t<bs:BottomSheetModal id=\"bottomsheet\">
    \t\t\t<bs:BottomSheetModal.template>
    \t\t\t\t<GridLayout rows=\"auto\" columns=\"auto\">
    \t\t\t\t\t<StackLayout>
    \t\t\t\t\t\t<Label text=\"Ready?\" textWrap=\"true\" />
    \t\t\t\t\t\t<Label text=\"Steady?\" textWrap=\"true\" />
    \t\t\t\t\t\t<Label text=\"Go!\" textWrap=\"true\" />
    \t\t\t\t\t\t<Label text=\"Cool\" textWrap=\"true\" />
    \t\t\t\t\t\t<Button text=\"HIDE BS\" tap=\"hideBS\" class=\"btn btn-primary btn-active\"/> 
    \t\t\t\t\t</StackLayout>
    \t\t\t\t</GridLayout>
    \t\t\t</bs:BottomSheetModal.template>
    \t\t</bs:BottomSheetModal>
    </Page>

    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-popup":{"name":"nativescript-image-popup","version":"1.0.1","license":"Apache-2.0","readme":"

    Image Popup plugin for NativeScript.

    \n

    Based on:

    \n\n

    Install

    \n

    NativeScript 6x

    \n
    tns plugin add nativescript-image-popup
    \n\n

    Android Specifications

    \n

    Usage Examples

    \n
    import { ImagePopup } from 'nativescript-image-popup';
    import { ImagePopupOptions } from 'nativescript-image-popup/classes';

    // basic use
    ImagePopup.localImagePopup(\"~/assets/images/nmb.jpg\");

    // or

    ImagePopup.networkImagePopup(\"https://i.hizliresim.com/kx47Db.png\");


    // with options
    const options: ImagePopupOptions = {
        path: \"https://i.hizliresim.com/kx47Db.png\",
        width: 500,
        height: 500,
        fullScreen: true,
        backgroundColor:ImagePopupBackgroundColors.TRANSPARENT, // or manuel color ( red, blue #ffd200)
        hideCloseIcon: false;
        imageOnClickClose: true
    };

    ImagePopup.localImagePopup(options);

    // or 

    ImagePopup.networkImagePopup(options);
    \n

    NativeScript Image Popup - Methods

    \n
      \n
    • localImagePopup(options: ImagePopupOptions | string)
      • \n
    • networkImagePopup(options: ImagePopupOptions | string)
      • \n
    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    Demo

    \n

    Need extra help getting these Image Popup working in your application? Check out these tutorials that make use of the plugin:

    \n

    Image Popup in a NativeScript Core Demo

    \n

    Image Popup in a NativeScript Angular Demo

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uiza-player":{"name":"nativescript-uiza-player","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-uiza-player

    \n

    Simple player Uiza player.

    \n

    (Optional) Prerequisites / Requirements

    \n

    This plugin use: uiza-android-player-sdk for android and a customized uiza-ios-player-sdk for iOS

    \n

    Installation

    \n

    Install this plugin:

    \n
    tns plugin add nativescript-uiza-player
    \n

    Usage

    \n
    ```html\n<UizaPlayer #player video="b1b5889d-3d07-4699-b7ba-53509c14b891"></UizaPlayer>\n```)\n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    video''Uiza entity ID
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    APIDescription
    play()Play video
    pause()Pause video
    seek(to)Seek to time (in miliseconds)
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tus-client":{"name":"nativescript-tus-client","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-tus-client

    \n

    NativeScript plugin for TUS - Open Protocol for Resumable File Uploads.\nUses TUSKit (iOS) and tus-android-client.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOSAndroid
    \"iOS\"Android
    \n

    Installation

    \n
    tns plugin add nativescript-tus-client
    \n

    Usage

    \n
    import { File, Folder, knownFolders } from \"@nativescript/core\";
    import * as tus from \"nativescript-tus-client\";

    // create a File reference
    const file = File.fromPath(knownFolders.currentApp().path + 'assets/test_image.png');

    // Create a new tus upload
    var upload = new tus.Upload(file, {
        endpoint: \"http://192.168.1.118:1080/files/\",
        metadata: {
            filename: 'test_image.png',
            filetype: 'image/png'
        },
        headers: {
            Authorization: \"Basic YWxhZGRpbjpvcGVuc2VzYW1l\"
        },
        onError: function(error) {
            console.log(\"Failed because: \" + error)
        },
        onProgress: function(bytesUploaded, bytesTotal) {
            var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
            console.log(bytesUploaded, bytesTotal, percentage + \"%\")
        },
        onSuccess: function() {
            console.log(`Download ${upload.file.name} from ${upload.url}` )
        }
    })

    // Start the upload
    upload.start()

    // Abort the upload
    upload.abort()
    \n

    API

    \n

    nativesctipt-tus-plugin implements a very limited subset of the JS api. See the example above as it contains all the implemented API.

    \n

    Test server

    \n

    We included a tus test server. Remember to change the host in test-server/index.js:

    \n
    const host = '192.168.1.118';
    \n

    then:

    \n
    cd test-server
    npm run start
    \n

    You will have to change the host in the demo app at demo/app/home/home-page.ts too.

    \n

    Credits

    \n

    A big thanks to coderReview for leading the way with his nativescript-tus-upload.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdfview-ng":{"name":"nativescript-pdfview-ng","version":"2.0.1","license":"MIT","readme":"

    Nativescript-PDFView-Ng

    \n

    This is a simple pdf viewer plugin that uses native libraries.

    \n
      \n
    • IOS: PdfKit (https://developer.apple.com/documentation/pdfkit)
      • \n
    • Android: AndroidPdfViewer (https://github.com/barteksc/AndroidPdfViewer)
      • \n
    \n

    Plugin version 2.0.0+ is compatible and tested with Nativescript 7, for older NS versions please use previous plugin versions.

    \n

    Installation

    \n
    tns plugin add nativescript-pdfview-ng
    \n

    OR

    \n

    copy the tgz file to your project and reference it from your package.json

    \n

    Usage

    \n

    Just add it to your page:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\"
    xmlns:ui=\"nativescript-pdfview-ng\">
        <ui:PDFViewNg src=\"~/mypdf.pdf\" defaultpage=\"1\"></ui:PDFViewNg>
    </Page>
    \n

    OR

    \n
    import { PDFViewNg } from 'nativescript-pdfview-ng';
    import { registerElement } from 'nativescript-angular';
    registerElement('PDFViewNg', () => PDFViewNg);
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" class=\"page\">
        <PDFViewNg src=\"~/mypdf.pdf\" defaultpage=\"1\"></PDFViewNg>
    </Page>
    \n

    API

    \n

    XML

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    src-File url to a pdf file, can also be http
    defaultpage"0"Initial page number to display
    bookmarklabel-Search for a bookmark with the matching label and jump to the page
    bookmarkpath-Search for a bookmark by indices within the tree structure of bookmarks
    \n

    Class

    \n
    /// Go to page by id starting from 0 as first page.
    goToPage(index: number) : void;

    /// Go to first page.
    goToFirstPage() : void;

    /// Go to last page.
    goToLastPage() : void;

    /// Get a list of all bookmarks in the pdf.
    getBookmarks(): Bookmark[];

    /// Search for bookmark that is exactly at the given position in the tree structure
    /// e.g.: [1,3] would mean to first get the second root bookmark (0 based index) and
    /// then get its fourth child if it exists
    getBookmarkByIndexPath(indexes: number[]): Bookmark;

    /// Search for all bookmarks that have the given label.
    getBookmarksByLabel(label: string): BookmarkCommon[];

    /// Jump to a given bookmark.
    goToBookmark(bookmark: Bookmark): void;

    /// Get meta information author from PDF.
    getAuthor(): string;

    /// Get meta information subject from PDF.
    getSubject(): string;

    /// Get meta information title from PDF.
    getTitle(): string;

    /// Get meta information creator from PDF.
    getCreator(): string;

    /// Get meta information creator from PDF.
    getCreationDate(): string;

    /// Get page count of currently loaded pdf
    getPageCount(): number;

    /// Load pdf from code.
    /// Replaces the currently loaded pdf.
    /// The promise gets resolved after loading, or rejected if something failed.
    loadPDF(src: string): Promise<any>;

    /// only implemented for iOS
    /// Detect available programs for file extension and opens the interaction controller
    /// The source should contain accessible path for the application
    showExternalControler(src: string, rect: ControllerRect): void;
    \n

    Examples

    \n

    defaultpage: jump to page 4

    \n
    <ui:PDFViewNg src=\"~/test.pdf\" defaultpage=\"3\"></ui:PDFViewNg>
    \n

    bookmarklabel: jump to bookmark with label "PAGE 3"

    \n
    <ui:PDFViewNg src=\"~/test.pdf\" bookmarklabel=\"PAGE 3\"></ui:PDFViewNg>
    \n

    bookmarkpath: jump to the first child-bookmark of the third bookmark (bookmarks have a tree structure)

    \n
    <ui:PDFViewNg src=\"~/test.pdf\" bookmarkpath=\"2,0\"></ui:PDFViewNg>
    \n

    go to the first found bookmark with the label "PAGE 4"

    \n
    <ui:PDFViewNg src=\"~/test.pdf\" id=\"pdfview\"></ui:PDFViewNg>
    \n
    let view:PDFViewNg = page.getViewById('pdfview');
    if (view){
        view.on(\"load\",()=>{
            let items = view.getBookmarksByLabel(\"PAGE 4\");
            console.log(\"found:\",items);
            view.goToBookmark(items[0]);
        });
        view.on(\"error\",()=>{
            console.error(\"unable to load pdf\");
        });
    }
    \n

    dynamic loading with promises\njust use an empty src tag in the xml

    \n
    <ui:PDFViewNg id=\"pdfview\"></ui:PDFViewNg>
    \n
    let view:PDFViewNg = page.getViewById('pdfview');
    if (view){
        view.loadPDF('~/test.pdf').then(()=>{
            let items = view.getBookmarksByLabel(\"PAGE 4\");
            console.log(\"found:\",items);
            view.goToBookmark(items[0]);
        }).catch((err)=>{
            console.error(\"could not load pdf: \", err);
        })
    }
    \n

    Show controller on button tap

    \n
    <ui:PDFViewNg id=\"pdfview\"></ui:PDFViewNg>
    <button text=\"Open external\" tap=\"onButtonTap\"></button>
    \n
    let view:PDFViewNg = page.getViewById('pdfview');

    function onButtonTap(args: EventData) {
      const button = <Button>args.object;
      const size = button.getActualSize();
      const position = button.getLocationOnScreen();
      const rect = {
        x: position.x,
        y: position.y,
        width: size.width,
        height: size.height
      };
      view.showExternalControler(rect);
    \n

    Known bugs

    \n
      \n
    • Android does not support jumping directly to a bookmark. It only jumps to the page the bookmark is on.
      • \n
    \n

    License

    \n

    https://choosealicense.com/licenses/mit/

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sectioned-list-view":{"name":"nativescript-sectioned-list-view","version":"0.3.2","license":"ISC","readme":"

    Nativescript Sectioned List View

    \n

    This is a drop in component to support sections in ios. It works with your existing code with a simple array of items.\nHowever, use a Sectioned Array to add sections and bind data.

    \n

    Installation

    \n
    $ tns plugin add nativescript-sectioned-list-view
    \n

    Section Templating

    \n

    There is also support to template the headers, height of the header etc.

    \n

    Usage

    \n

    In xml

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" 
    \txmlns:tools=\"nativescript-sectioned-list-view\">
      <tools:SectionedListView items=\"{{items}}\" rowHeight=\"44\">
      \t<tools:SectionedListView.itemTemplate>
      \t\t<Label text=\"{{name}}\" />
      \t</tools:SectionedListView.itemTemplate>
      </tools:SectionedListView>
    </Page>
    \n

    Make the section header blue.

    \n
    <tools:SectionedListView items=\"{{items}}\" rowHeight=\"44\" headerHeight=\"44\">
        <tools:SectionedListView.itemTemplate>
            <Label text=\"{{name}}\" />
        </tools:SectionedListView.itemTemplate>
        <tools:SectionedListView.headerTemplate>
            <Label text=\"{{$value}}\" style=\"color: blue\"/>
        </tools:SectionedListView.headerTemplate>
    </tools:SectionedListView>
    \n

    Use a static array in your javascript

    \n
        var students = [
        \t{\"name\" : \"Alice\", gender:\"female\"},
        \t{\"name\": \"Adam\", gender: \"male\"},
        \t{\"name\": \"Bob\", gender: \"male\"},
        \t{\"name\": \"Brittany\", gender: \"female\"},
        \t{\"name\": \"Evan\", gender: \"male\"}
        ];
        page.bindingContext = { items : students }
    \n

    Use a GroupedArray

    \n
        page.bindingContext = { items:{
            getTitle: function(section) { return \"Section \"+section;},
            getNoOfSections: function() { return 2;}, 
            getNoOfItemsInSection: function(section) {return 3;}, 
            getItem: function(row, section) { return \"Item {\"+row+\", \"+section+\"}\";}
        }};
    \n

    Or, use a observable sectioned array

    \n

    var sectionedListViewModule = require(\"nativescript-sectioned-list-view\");
    var observableSectionArrayModule = require(\"observable-sectioned-array\");

    function pageLoaded(args) {
        var page = args.object;

        var students = [
        \t{\"name\" : \"Alice\", gender:\"female\"},
        \t{\"name\": \"Adam\", gender: \"male\"},
        \t{\"name\": \"Bob\", gender: \"male\"},
        \t{\"name\": \"Brittany\", gender: \"female\"},
        \t{\"name\": \"Evan\", gender: \"male\"}
        ];

        var boys = students.filter(function(student) { return student.gender ===\"male\";});

        var girls = students.filter(function(student) { return student.gender ===\"female\";});

        var sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
        sectionedArray.addSection(\"Boys\", boys);
        sectionedArray.addSection(\"Girls\", girls);
        
        //Now add a new student \"Eve\" to girls after some delay. 
        setTimeout(function() {
        \t//Notice how pushing new item to section array reloads the view and adds Eve as a new row.
        \tsectionedArray.push([{\"name\": \"Eve\", gender:\"female\"}], 1);
        }, 3000);

    \tpage.bindingContext = {items: sectionedArray};
    }
    \n

    Screen shot

    \n

    \"Screen

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-lightstorage":{"name":"nativescript-plugin-lightstorage","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-lightstorage

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-lightstorage
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ims-native-demo":{"name":"nativescript-ims-native-demo","version":"1.0.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os":{"name":"nativescript-wear-os","version":"3.0.0","license":"Apache-2.0","readme":"

    https://github.com/bradmartin/nativescript-wear-os/blob/master/README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-loading-screen":{"name":"nativescript-loading-screen","version":"1.0.6","license":"Apache-2.0","readme":"

    Nativescript Loading Screen \"apple\" \"android\"

    \n

    This is my first plugin so please be kind :) :P

    \n

    This plugin add a loading screen to both iOs and Android Apps.

    \n

    Installation

    \n
    tns plugin add nativescript-loading-screen
    \n

    Usage

    \n
    import { Observable } from 'tns-core-modules/data/observable';
    import { LoadingScreen } from 'nativescript-loading-screen';

    export class HelloWorldModel extends Observable {
      private loadingScreen: LoadingScreen;

      constructor() {
        super();
      }

      public showLoading() {
        this.loadingScreen = new LoadingScreen();

        this.loadingScreen.show({
          title: \"test\",
          message: \"loading...\"
        });

        setTimeout(() => {
          this.loadingScreen.updateMessage(\"Loading Change\");
        }, 5000);

        setTimeout(() => {
          this.loadingScreen.close();
          const topmost = frameModule.topmost();
          topmost.navigate(\"details-page\");
        }, 10000);

      }
    }
    \n

    If you plan to nativate after closing the loading screen you must do it in the resolved promise on iOS. See example below

    \n
      this.loadingScreen.close().then((result) => {
        console.log(`Result => ${result}`);

      });
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturnDescription
    show(options?: Options)Promise<bool>shows the loading screen
    update(options?: Options)Promise<bool>updates the message & title
    updateMessage(message: string)Promise<bool>updates the message
    updateTitle(title: string)Promise<bool>updates the title
    close()Promise<bool>closes the loading screen
    \n

    Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    titlestring[blank]title used for the loading screen
    messagestringloading...message using for the loading screen
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    Credit

    \n

    I got the idea to make this plugin from nativescript-dialog written by Vladimir Enchev @enchev

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unique-identifier":{"name":"nativescript-unique-identifier","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript UUID Plugin \"apple\" \"android\"

    \n

    Usage

    \n

    See this example for Angular:

    \n
    import { Component, OnInit } from \"@angular/core\";
    import {UniqueIdentifier} from \"nativescript-unique-identifier\"

    @Component({
      selector: \"ns-main\",
      template: \"<page-router-outlet></page-router-outlet>\"
    })
    export class AppComponent {
        constructor() {
        } 
        
        ngOnInit(){
            let uuid = new UniqueIdentifier();
            console.log(uuid.getUUID());
         }
    }
    \n

    And for pure NativeScript:

    \n
    var plugin = require(\"nativescript-unique-identifier\").UniqueIdentifier;
    console.log(plugin.getUUID());

    ## Installation

    ```bash
    $ tns plugin add nativescript-unique-identifier
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/ngx-translate-nativescript-loader":{"name":"@aquinn/ngx-translate-nativescript-loader","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript ngx-translate-nativescript-loader

    \n
    ns plugin add @aquinn/ngx-translate-nativescript-loader
    \n

    Usage

    \n

    This code was borrowed from https://github.com/danvick/ngx-translate-nativescript-loader\nFor temporary use until the original author uses the new NS7 package workflow

    \n

    License

    \n

    This code was borrowed from https://github.com/danvick/ngx-translate-nativescript-loader\nFor temporary use until the original author uses the new NS7 package workflow

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-blur":{"name":"@nstudio/nativescript-blur","version":"3.0.2","license":"Apache-2.0","readme":"

    @nstudio/nativescript-blur

    \n
    ns plugin add @nstudio/nativescript-blur
    \n

    iOS

    \n \n

    On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred.

    \n

    Android

    \n \nIf you pass `true` to the constructor (`let blur = new Blur(true)`), nothing will be different on iOS, but on Android the backgroundColor of the NativeScript view you pass to either light semi transparent or dark semi transparent. So, if you are using this for a \"dimmer\" effect for modals and stuff, Android will work that way for now.\n

    Usage

    \n

    import { Blur } from '@nstudio/nativescript-blur';
    let blur = new Blur(true); // pass true to enable limited usage on android (for now);

    // Pick Date
    makeKittyBlurry() {
        let kittyView = page.getViewById('kitty');
        blur.on(kittyView, 'kitty', 'light').then(() => {
            console.log('Kitty has become blurry.');
        }).catch(e => {
            console.dir(e);
        });
    }

    clearUpKitty() {
        blur.off('kitty').then(() => {
            console.log('Kitty has cleared up.')
        });
    }
    \n

    API

    \n

    on(view, keyTitle, theme?, duration?): Promise;

    \n

    To turn it on, you must pass a view and a key name. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. The theme is either light or dark, and you can pass a custom duration. The duration is in seconds, for example if you pass .2 the animation will last .2 seconds.\nThe view needs to be a nativescript view that has an ios property, and that property must support addSubview. Here are some examples of NativeScript UI elements you can pass:

    \n
    StackLayout
    GridLayout
    AbsoluteLayout
    DockLayout
    ScrollView
    Image
    Label
    \n

    If there is no ios property on the element you pass or addSubview doesn't exist on the ios property, it will return an error.

    \n

    off(keyTitle, duration?): Promise;

    \n

    Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tag":{"name":"nativescript-tag","version":"1.1.2","license":{"type":"MIT","url":"https://bitbucket.org/win_min_tun/nativescript-tag/blob/master/LICENSE"},"readme":"

    NativeScript UI plugin for Tagging

    \n

    NativeScript UI plugin for tagging with rich features including autocomplete

    \n

    Platform Support

    \n

    Currently only support Android. Any collaborator for iOS support is welcomed!

    \n

    ##Android side\n\"alt

    \n

    Usage

    \n

    The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo for full example.

    \n

    \n
        <Label text=\"{{ message }}\" class=\"message\" textWrap=\"true\"/>

        <Label text=\"Editable (Default size, Custom Color)\" textWrap=\"true\" />    
        <Tags:TagGroup id=\"tag1\" ntag_editMode=\"true\" value=\"{{ tags }}\" ntag_borderColor=\"#2095F2\" ntag_textColor=\"#2095F2\" ntag_bgColor=\"#ffffff\" ntag_checkedBorderColor=\"#2095F2\" ntag_checkedBgColor=\"#2095F2\" ntag_checkedTextColor=\"#ffffff\" />

        <Label text=\"Editable (with AutoComplete)\" textWrap=\"true\" />
        <Tags:TagGroup id=\"tag4\" value=\"{{ tags }}\" autoCompleteTags=\"{{ autoCompleteTags }}\" ntag_autoComplete=\"true\" />

        <Label text=\"Read-only (Custom size, Default Color)\" textWrap=\"true\" />    
        <Tags:TagGroup id=\"tag2\" ntag_tagClick=\"{{ onTagClick }}\" value=\"{{ tags }}\" ntag_borderStrokeWidth=\"0.7\" ntag_textSize=\"15\" ntag_hSpacing=\"9\" ntag_vSpacing=\"5\" ntag_hPadding=\"14\" ntag_vPadding=\"4\" />

        <Label text=\"Read-only (Small size, Default Color)\" textWrap=\"true\" />
        <Tags:TagGroup id=\"tag3\" value=\"{{ tags }}\" ntag_tagClick=\"tag3Click\" ntag_small=\"true\" />

        <Label text=\"Read-only (Large size, Default Color)\" textWrap=\"true\" />
        <Tags:TagGroup id=\"tag3\" ntag_tagClick=\"{{ onTagClick }}\" value=\"{{ tags }}\" ntag_large=\"true\" />

        <Label text=\"Editable (Custom input hint)\" textWrap=\"true\" />
        <Tags:TagGroup id=\"tag4\" value=\"{{ tags }}\" ntag_editMode=\"true\" ntag_inputHint=\"New Tag\" ntag_large=\"true\" />
    \n

    \n
      \n
    • \n

      How to add tag (with auto complete)?\nSet ntag_autoComplete="true" in xml and chose a suggestion or tap the autocomplete text view.

      \n
      • \n
    • \n

      How to remove tag (with auto complete)?\nSet ntag_autoComplete="true" in xml and double-tap the tag to remove.

      \n
      • \n
    • \n

      How to add tag (without auto complete)?\nSet ntag_editMode="true" in xml and press 'Enter' or tap the blank area of the tag group. (A few soft keyboard not honour the key event).

      \n
      • \n
    • \n

      How to remove tag (without auto complete)?\nSet ntag_editMode="true" in xml and press 'Backspace' or double-tap the tag to remove.

      \n
      • \n
    \n

    Attributes

    \n

    Important attributes

    \n
      \n
    • value - required
      • \n
    \n

    String array of tags for binding

    \n
      \n
    • autoCompleteTags - optional
      • \n
    \n

    String array of auto complete suggestion

    \n
      \n
    • ntag_autoComplete - optional
      • \n
    \n

    Set true when needs autcomplete. Default is false

    \n
      \n
    • ntag_editMode - (boolean) - optional
      • \n
    \n

    Default is false - read only. When true, can remove and add tags by double tapping and tapping the blank area of the tag group respectively. Mutually exclusive to ntag_tagClick due to the native android library.

    \n
      \n
    • ntag_tagClick - optional
      • \n
    \n

    Tag click event. Mutually exclusive to ntag_editMode=true due to the native android library.

    \n
      \n
    • ntag_small or ntag_large - (boolean) - optional
      • \n
    \n

    Preset tag sizes. Mutually execlusive.

    \n
      \n
    • ntag_inputHint - (string) - optional
      • \n
    \n

    Default is 'Add Tag'

    \n

    Color attributes

    \n
      \n
    • ntga_acPopupBg - (string) - optional
      • \n
    \n

    Background color for autocomplete popup. Default is #F5F8FA

    \n
      \n
    • ntag_borderColor - (string) - optional
      • \n
    \n

    Default is #49C120

    \n
      \n
    • ntag_textColor - (string) - optional
      • \n
    \n

    Default is #49C120

    \n
      \n
    • ntag_bgColor - (string) - optional
      • \n
    \n

    Default is #FFFFFF

    \n
      \n
    • ntag_dashBorderColor - (string) - optional
      • \n
    \n

    Default is #AAAAAA

    \n
      \n
    • ntag_inputHintColor - (string) - optional
      • \n
    \n

    Default is #80000000

    \n
      \n
    • ntag_inputTextColor - (string) - optional
      • \n
    \n

    Default is #DE000000

    \n
      \n
    • ntag_checkedBorderColor - (string) - optional
      • \n
    \n

    Default is #49C120

    \n
      \n
    • ntag_checkedTextColor - (string) - optional
      • \n
    \n

    Default is #FFFFFF

    \n
      \n
    • ntag_checkedMarkerColor - (string) - optional
      • \n
    \n

    Default is #FFFFFF

    \n
      \n
    • ntag_checkedBgColor - (string) - optional
      • \n
    \n

    Default is #49C120

    \n
      \n
    • ntag_pressedBgColor - (string) - optional
      • \n
    \n

    Default is #EDEDED

    \n

    Size attributes

    \n
      \n
    • ntag_textSize - (number) - optional
      • \n
    \n

    Default is 13sp

    \n
      \n
    • ntag_borderStrokeWidth - (number) - optional
      • \n
    \n

    Default is 0.5dp

    \n
      \n
    • ntag_hSpacing - (number) - optional
      • \n
    \n

    Default is 8dp

    \n
      \n
    • ntag_vSpacing - (number) - optional
      • \n
    \n

    Default is 4dp

    \n
      \n
    • ntag_hPadding - (number) - optional
      • \n
    \n

    Default is 12dp

    \n
      \n
    • ntag_vPadding - (number) - optional
      • \n
    \n

    Default is 3dp

    \n

    Credit

    \n

    Credit goes to the native android library (https://github.com/2dxgujun/AndroidTagGroup) by 2dxgujun (https://github.com/2dxgujun)

    \n

    Contributing - Support for iOS?

    \n

    Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-calendar":{"name":"nativescript-nbmaterial-calendar","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material Calendar picker

    \n

    The module implement Material calendar on both platforms iOS and Android.\nThe calendar implements slide transition effects.\nThe pager lets you change months using a swipe.

    \n
    export function selectDate(e) {
        console.log(\"DATE SELECTED \", e.date, e.selected);
    }
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:cal=\"nativescript-nbmaterial-calendar\">
     \t\t
    \t\t\t\t<cal:CalendarMonthLayout dayTapped=\"selectDate\" multiple=\"true\"  >
    \t\t\t\t\t<cal:CalendarAction action=\"previous\" text=\"chevron_left\"/>
    \t\t\t\t\t<cal:CalendarTitle/>
    \t\t\t\t\t<cal:CalendarAction action=\"next\" text=\"chevron_right\"/>
    \t\t\t\t</cal:CalendarMonthLayout>
    </Page>

    }
    \n

    multiple parameter lets you pick multiple date in the calendar.\nCalendarTitle, CalendarAction extends labels. So you can use font library like font awesome.

    \n

    The calendarmonthlayout has this interface:

    \n

    export declare class CalendarMonthLayout extends Layout {
        public static dayTappedEvent: string = \"dayTapped\";
        public static monthChangedEvent: string = \"monthChanged\";
        date: Date;
        multiple: boolean;
        selected: Date | Date[];
        next();
        previous();
    }

    export interface DayTappedEvent extends EventData {
        readonly tapped: Date;
        selected: Date | Date[];
        view: CalendarDay;
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-woosim-printer":{"name":"nativescript-woosim-printer","version":"1.0.7","license":"Apache-2.0","readme":"

    NativeScript Woosim Printer

    \n

    \"npm

    \n

    This plugin integrate your nativescript app with Woosim Intermec Pr3 printer to print a normal text or a bmp.

    \n

    Prerequisites / Requirements

    \n

    You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

    \n

    Installation

    \n
    tns plugin add nativescript-woosim-printer
    \n

    Usage

    \n

    Create Plugin instance

    \n
    let printer = new WoosimPrinter();
    \n

    Connect to the printer through:

    \n
    this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
    \n

    To Print Normal Text use:

    \n
    printer.print(\"Hello World\");
    \n

    To Print a BMP image:

    \n
    printer.printImg(bmp);
    \n

    To Print Txt File:

    \n
    let documents = fs.knownFolders.currentApp();
    var myFile = documents.getFile(\"mytextfile.txt\");
    this.printer.printTextFile(myFile);
    \n

    for more information see the demo

    \n

    API Property

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertytypeDefaultDescription
    paperSizeenumPaperSizes.FourInchset the default paper size for the printer
    debugbooleanfalseset the plugin in debug mode
    \n

    API Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescriptionParams
    connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
    disconnect():voiddisconnect from a printer
    print(text: string): voidprint normal texttext : the text you want to print
    printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
    printTextFile(file: any): void;Print Txt fileFile: NS File
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-date-range":{"name":"nativescript-ngx-date-range","version":"1.0.7","license":"Apache-2.0","readme":"

    Nativescript Date Range

    \n

    Date Range Picker plugin for Nativescript\nSupport RTL\n\"nativesceipt\n\"nativesceipt

    \n

    Installation

    \n
    npm i nativescript-ngx-date-range --save
    \n

    Usage

    \n

    app.module

    \n
    export class HomeComponent implements OnInit {
        dateRange;
        constructor() {
        }

        ngOnInit(): void {
            const options = new Options();
            options.selectionMode = 'RANGE';
            options.selectToday = true;
            options.disablePrevDates = true;
            this.dateRange =  create(options);
         }
        selectedDates() {
            console.log(this.dateRange.getSelectedDates())
        }

    }
    \n

    home.component.html

    \n
    <StackLayout>
        <Button class=\"btn btn-active\" text=\"Console Dates\" (tap)=\"selectedDates()\"></Button>
        <NgxDateRange></NgxDateRange>
    </StackLayout>
    \n

    API

    \n
    getSelectedDates() => {
        startDate: string,
        endDate: string,
        originDates: string[]
    }

    Options  = {
        selectionMode?: 'SINGLE' | 'MULTIPLE' | 'RANGE'; // default = RANGE
        initialDate?: 'yyyy/mm/dd' // default = today
        simpleDateFormat?: string; // default = \"MMMM, YYYY\"
        supportsRtl?: boolean; // default = false
        disablePrevDates?: boolean; // default = false
        selectToday?: boolean;  // default = false
        language?: 
            {
                 countryCode: 'ISR', //default = null
                 languageCode: 'heb' // default = null
             };

    }
    \n

    Colors

    \n

    colors.xml

    \n
    projectName/App_Resources/Android/src/main/res/values/colors.xml
    \n
        <color name=\"calendar_selected_day_bg\">#a6d3d6</color>
        <color name=\"calendar_selected_range_bg\">#a6d3d6</color>
        <color name=\"calendar_unavailable_bg\">#585757</color>
        <color name=\"calendar_range_middle_unavailable_bg\">#eae72b</color>
        <color name=\"calendar_range_middle_deactivated_bg\">#673AB7</color>
    \n

    Language object

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-tabs":{"name":"nativescript-nbmaterial-tabs","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material Tabs

    \n

    The module implement Material tabs on both platforms iOS and Android.\nIt includes animation effect when indicator is moving.

    \n

    TabLayout extends the nativescript GridLayout

    \n
    export function selectTabs(args) {
        console.log(\"SELECT TABS: \", args.forward, args.index)
    }
    \n

    TabSep is the indicator\nTabTitle extends Label

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:tab=\"nativescript-nbmaterial-tabs\">
     \t\t<tab:Tabs select=\"selectTabs\" colSpan=\"4\" row=\"1\">
    \t\t\t\t<tab:TabSep/>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Chouks\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Catégories\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Recherches\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Pages\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Aller\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t\t<tab:TabItem>
    \t\t\t\t\t<tab:TabTitle text=\"Mes Pourquoi\" />
    \t\t\t\t</tab:TabItem>
    \t\t\t</tab:Tabs>
    </Page>

    }
    \n

    The TabLayout has this interface:

    \n

    export declare class Tabs extends Layout {
        public static selectEvent: string;
        items: TabItem[];
        selectedIndex: number;
        rippleColor: Color;
        barColor: Color;
        unchecked: number;
        activems: number;
        inactivems: number;
        autoselect: boolean;
        scrollable: boolean;
        isActive(item: TabItem);
        setSelected(item: TabItem);
    }
    export declare class TabItem extends AbsoluteLayout {
        public static tapEvent: string;
        tab: Tabs;
        isActive(): boolean;
        activate(): void;
        unactivate(): void;
    }
    export declare class TabTitle extends Label {
    }
    export declare class TabIcon extends Label {
    } 
    export declare class TabSep extends View {
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@outloud/nativescript-ui-svg":{"name":"@outloud/nativescript-ui-svg","version":"0.0.9","license":"ISC","readme":"

    NativeScript SVG widget

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript SVG plugin. Very basic implementation for now

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add @nativescript-community/ui-svg

    \n

    Configuration

    \n

    For now only vue (and core) is supported.

    \n
    import CanvasSVG from '@nativescript-community/ui-svg/vue';
    Vue.use(CanvasSVG);
    \n

    It works in 3 ways!.

    \n

    CanvasSVG extending Canvas

    \n
    <CanvasSVG>
        <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"100%\" stretch=\"aspectFit\" />
    </CanvasSVG>
    \n

    or SVGView which is a basic svg view with support for auto sizing

    \n
    <SVGView height=\"30%\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" stretch=\"aspectFit\" backgroundColor=\"red\" />
    \n

    Or within and canvas extending view

    \n
    <CanvasLabel>
     <CGroup fontSize=\"18\" verticalAlignment=\"middle\" paddingLeft=\"20\">
            <CSpan text=\"test\" fontWeight=\"bold\" />
            <CSpan text=\"test2\" color=\"#ccc\" fontSize=\"16\" />
        </CGroup>
        <CSVG horizontalAlignment=\"left\" src=\"~/assets/svgs/Ghostscript_Tiger.svg\" height=\"10\" stretch=\"aspectFit\" />
    </CanvasSVG>
    \n

    For full example / doc look at the vue demo and the typings.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-microsoft-appcenter":{"name":"nativescript-microsoft-appcenter","version":"2.0.0","license":"Apache-2.0","readme":"

    Microsoft App Center plugin for NativeScript

    \n

    Requirements

    \n

    Before you begin, please make sure that the following prerequisites are met:

    \n

    Node.js

    \n
      \n
    • Node.js®\nis a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
      • \n
    \n

    NativeScript

    \n
      \n
    • \n

      NativeScript\nis a framework for building native iOS and Android apps using JavaScript and CSS.

      \n

      NativeScript renders UIs with the native platform’s rendering engine, no WebViews, resulting in native-like performance and UX.

      \n
      • \n
    \n

    Microsoft App Center

    \n
      \n
    • \n

      Android Version 4.0.3 (API level 15) or later.

      \n
      • \n
    • \n

      App Center brings together multiple services, commonly used by mobile developers, into a single, integrated product. You can build, test, distribute, and monitor your mobile apps, and also implement push notifications.

      \n
      • \n
    • \n

      Create your app in the App Center Portal to obtain the App Secret (if you have already created your app in the App Center portal, you can skip this step).

      \n
      • \n
    • \n

      Head over to Microsoft App Center.

      \n
      • \n
    • \n

      Sign up or log in and hit the blue button on the top right corner of the portal that says Add new and select Add new app from the dropdown menu.

      \n
      • \n
    • \n

      Enter a name and an optional desciption for your app.

      \n
      • \n
    • \n

      Select Android and Java or iOS and Objective-C/Swift as a platform.

      \n
      • \n
    • \n

      Hit the button at the bottom right that says Add new app.

      \n
      • \n
    • \n

      Once you have created an app, you can obtain its App Secret on the Getting Started page or Settings page on the App Center Portal.

      \n
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-microsoft-appcenter
    \n

    Distribute Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    YESYES
    \n

    Diagnostics Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    CrashesYESYES
    \n

    Analytics Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    Overview: Active users, daily sessions per user, session duration, top devices, countries, languages and active users per version.YESYES
    Events: Event name, Count, Trend, Users, User Change and Per User.YESYES
    Log flowYESYES
    \n

    Push Features

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    NotificationsCOMING SOONCOMING SOON
    AudiencesCOMING SOONCOMING SOON
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpchart-fork-adrianoop":{"name":"nativescript-mpchart-fork-adrianoop","version":"1.0.8","license":"Apache-2.0","readme":"

    Forked from LeCaoPhuc for minor improvements in Android... Documentation not updated

    \n

    NativeScript MPChart UI

    \n

    A NativeScript MPChart for Android and iOS.\nThis plugin still in develop and will update more type chart and feature in future.\nBecause I don't have much time so it only have demo-ng is detail But it can work in core.\nNow, a plugin have simple LineChart and BarChart.

    \n

    Based on

    \n

    Charts for iOS

    \n

    MPAndroidChart for Android

    \n

    Installation

    \n

    Run tns plugin add nativescript-mpchart

    \n

    API

    \n

    Events

    \n
    \n

    Instance Properties

    \n
      \n
    • showLegend - Boolean
      \nShow or hide legend under chart. Default is false.
      • \n
    • showGridLines - Boolean
      \nShow or hide grid lines in chart. Default is false.
      • \n
    • scaleEnable - Boolean
      \nEnable or Disable zoom in chart. Default is false.
      • \n
    • descriptionText - String
      \nGets or sets description text inside chart. Default is empty.
      • \n
    • descriptionXOffset - Number
      \nGets or sets description text offset from right. Default is 0;
      • \n
    • descriptionYOffset - Number
      \nGets or sets description text offset from bottom. Default is 0.
      • \n
    • descriptionTextColor - Color
      \nGets or sets description text color. Css property 'description-text-color'.
      • \n
    • highlightPerTapEnabled - Boolean
      \nEnable or Disable show hight light when tap in line. Default is false.
      • \n
    • highlightPerDragEnabled - Color
      \nEnable or Disable show hight light when drag in line. Default is false.
      • \n
    • xAxisGranularity - Number
      \nGets or sets granularity (A simple, this is like step of value in yAxis). Default value is 1.
      • \n
    • yAxisGranularity - Number
      \nGets or sets granularity (A simple, this is like step of value in yAxis). Default value is auto equally divided.
      • \n
    • xAxisLabelPosition - String
      \nGets or sets position of xAxis of chart.\nValue : "Top" | "Bottom" | "BothSided" | "TopInside" | "BottomInside".\nDefault value is "Bottom."
      • \n
    • xAxisLineColor, leftAxisLineColor, rightAxisLineColor - Color
      \nGets or sets line color of Axis color. Css property 'x-axis-line-color', 'right-axis-line-color','left-axis-line-color'.
      • \n
    • xAxisTextColor, leftAxisTextColor, rightAxisTextColor - Color
      \nGets or sets text color of Axis color. Css property 'x-axis-text-color', 'right-axis-text-color','left-axis-text-color'.
      • \n
    • xAxisMinValue, leftAxisMinValue, rightAxisMinValue - number
      \nGets or sets min value of Axis.
      • \n
    • xAxisMaxValue, leftAxisMaxValue, rightAxisMaxValue - number
      \nGets or sets max value of Axis.
      • \n
    • leftAxisFormatter, rightAxisFormatter - YAxisFormatterInterface
      \nGets or sets formatter value for left and right Axis. Now, the plugin support two type is: "Int" | "Float".\nDefault value not format it show like input.\nSEE DETAIL IN DEMO.
      • \n
    • showValueLabels - boolean
      \nshow or hide labels value.
      • \n
    • showLeftAxis, showRightAxis - boolean
      \nshow or hide left or right Axis.
      • \n
    • font - string - only iOS - this is Name of Font Name.\nGets or sets font of all text in chart such as legend text, axis label text, description text, value in line text..etc.etc...\nTo use it you need add file .ttf from app/fonts/font-name.ttf.
      • \n
    • marker - ChartMarkerConfig - only work BarChart.\nset up config to show marker when select point in chart.\nSEE DETAIL IN DEMO.\nUsage marker:\niOS: don't need setup.\nAndroid: go to demo-ng and copy file default_marker_view.xml in to App_Resources/Android/layout/default_marker_view.xml. Move it in your project with path likely.\nAfter add :
      • \n
    \n
        <color name=\"marker_background\">#cccccc</color>
        <color name=\"marker_text_color\">#000000</color>
        <color name=\"text_view_color\">#ff0000</color>
    \n

    into App_Resources/Android/values/colors.xml.\nSEE DETAIL IN demo-ng

    \n

    Method

    \n
      \n
    • resetZoomLineChart() - Function -> void
      • \n
    \n

    Method will reset chart. Call it if some property is change but not apply in UI.

    \n

    Data setup Properties

    \n
      \n
    • items - Array\nset Items to render chart. This is important. See more in demo and demo-ng (app.component).
      • \n
    • labels - Array\nset list value will display in xAxis because default is show x value. A property will convert to value you want display. This is important. See more in demo and demo-ng (app.component).
      • \n
    \n

    Interface

    \n
    DataSetChartInterface {
        x: number;
        y: number;
    }

    DataSetLabelInterface {
        xAxisValue: number,
        label: string
    }

    DataLineChartInterface {
        dataSet: Array<DataSetChartInterface>;
        lineColor: Color;
        highlighColor?: Color;
        circleHoleEnabled?: boolean;
        circleColor?: Color;
        circleEnable?: boolean;
        legendLabel?: string;
    }

    YAxisFormatterInterface {
        type: TypeFormatter,
        numberOfDigits?: number
    }
    DataBarChartInterface {
        dataSet: Array<DataSetChartInterface>;
        legendLabel?: string;
        highlighColor?: Color,
        barColor?: Color;
    }

    ChartMarkerSize {
        width: number,
        height: number
    }

    ChartMarkerPadding {
        top: number;
        right: number;
        bottom: number;
        left: number;
    }

    ConfigDisplayData {
        showXValue: boolean,
        showYValue: boolean,
        fixedXValue?: YAxisFormatterInterface,
        fixedYValue?: YAxisFormatterInterface,
        formatter: string;
    }

    ChartMarkerConfig {
        backgroundColor?: Color,
        textColor?: Color,
        font?: string,
        fontSize?: number,
        padding?: {
            x: number,
            y: number
        },
        minimumSize?: ChartMarkerSize,
        borderRadius?: number,
        contentCenter?: boolean,
        displayData: ConfigDisplayData,
        xOffset?: number,
        yOffset?: number,
    }
    \n

    Usage in Angular

    \n
      \n
    • Import NativeScriptMPLineChartModule in NgModule:
      • \n
    \n
    import { NativeScriptMPLineChartModule } from \"nativescript-mpchart/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptMPLineChartModule,
            //......
    \t],
        //......
    })
    \n
      \n
    • iOs: width and height will auto full in parent layout.
      • \n
    • Android: height is auto so you need set
      • \n
    \n
        height=\"100%\"
    \n

    to full in parent layout.

    \n
    <!-- app.component.html -->
        <!-- line chart -->
        <StackLayout height=\"500\">
            <MPLineChart *ngIf=\"dataSet\" #lineChart [showLegend]=\"setUp.showLegend\" [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\"
                [descriptionText]=\"setUp.descriptionText\" [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\"
                [descriptionTextColor]=\"setUp.descriptionTextColor\" [highlightPerTapEnabled]=\"setUp.highlightPerTapEnabled\" [highlightPerDragEnabled]=\"setUp.highlightPerDragEnabled\"
                [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
                [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
                [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
                [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
                [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
                [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [items]=\"dataSet\" [labels]=\"labels\"
                [font]=\"setUp.font\" class=\"mp-chart\">    </MPLineChart>
        </StackLayout>
        <!-- bar chart -->
         <StackLayout height=\"500\">
            <MPBarChart height=\"400\" #lineChart *ngIf=\"barDataSet\" [items]=\"barDataSet\" [labels]=\"labels\" [showLegend]=\"setUp.showLegend\"
                [showGridLines]=\"setUp.showGridLines\" [scaleEnable]=\"setUp.scaleEnable\" [descriptionText]=\"setUp.descriptionText\"
                [descriptionXOffset]=\"setUp.descriptionXOffset\" [descriptionYOffset]=\"setUp.descriptionYOffset\" [descriptionTextColor]=\"setUp.descriptionTextColor\"
                [xAxisGranularity]=\"setUp.xAxisGranularityProperty\" [leftAxisGranularity]=\"setUp.leftAxisGranularityProperty\" [rightAxisGranularity]=\"setUp.rightAxisGranularityProperty\"
                [xAxisLineColor]=\"setUp.xAxisLineColor\" [leftAxisLineColor]=\"setUp.leftAxisLineColor\" [rightAxisLineColor]=\"setUp.rightAxisLineColor\"
                [xAxisTextColor]=\"setUp.xAxisTextColor\" [leftAxisTextColor]=\"setUp.leftAxisTextColor\" [rightAxisTextColor]=\"setUp.rightAxisTextColor\"
                [xAxisMinValue]=\"setUp.xAxisMinValue\" [leftAxisMinValue]=\"setUp.leftAxisMinValue\" [rightAxisMinValue]=\"setUp.rightAxisMinValue\"
                [leftAxisMaxValue]=\"setUp.leftAxisMaxValue\" [rightAxisMaxValue]=\"setUp.rightAxisMaxValue\" [xAxisLabelPosition]=\"setUp.xAxisLabelPosition\"
                [leftAxisFormatter]=\"leftAxisFormatter\" [rightAxisFormatter]=\"rightAxisFormatter\" [font]=\"setUp.font\" 
                [showValueLabels]=\"setUp.showValueLabels\" [showLeftAxis]=\"setUp.showLeftAxis\" [showRightAxis]=\"setUp.showRightAxis\"
                [marker]=\"markerConfig\" class=\"mp-chart\">    </MPBarChart>
        </StackLayout>
    \n
    /*app.css*/
    .mp-chart {
        description-text-color: #00ff00;
        x-axis-line-color: #ff0000;
        left-axis-line-color: #005500;
        right-axis-line-color: #ff00ff;
        x-axis-text-color: #ff0000;
        left-axis-text-color: #005500;
        right-axis-text-color: #ff00ff;
    }
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { DataLineChartInterface, DataSetChartInterface, DataSetLabelInterface,YAxisFormatterInterface } from \"nativescript-mpchart\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

         public setUp: any = {
            showGridLines: false,
            showLegend: true,
            scaleEnable: true,
            descriptionText: \"Text for chart\",
            descriptionXOffset: 0,
            descriptionYOffset: 0,
            descriptionTextColor: \"#ffff00\",
            highlightPerTapEnabled: true,
            highlightPerDragEnabled: true,
            xAxisGranularityProperty: 1,
            leftAxisGranularityProperty: 20,
            rightAxisGranularityProperty: 30,
            xAxisLineColor: \"#ff0000\",
            xAxisTextColor: \"#ff0000\",

            leftAxisLineColor: \"#0000ff\",
            leftAxisTextColor: \"#0000ff\",

            rightAxisLineColor: \"#00ff00\",
            rightAxisTextColor: \"#00ff00\",

            xAxisMinValue: -1,
            xAxisMaxValue: 4,

            leftAxisMinValue: 0,
            leftAxisMaxValue: 100,

            rightAxisMinValue: 0,
            rightAxisMaxValue: 70,

            font: \"Papyrus\",
            xAxisLabelPosition: \"Bottom\",
            showValueLabels: false,
            showLeftAxis: true,
            showRightAxis: false,
        };
        public leftAxisFormatter: YAxisFormatterInterface = {
            type: \"Float\",
            numberOfDigits: 1
        };
        public rightAxisFormatter: YAxisFormatterInterface = {
            type: \"Float\",
            numberOfDigits: 1
        };
        public markerConfig: ChartMarkerConfig
        public dataSet: Array<DataLineChartInterface>;
        public barDataSet: Array<DataBarChartInterface>;
        public labels: Array<DataSetLabelInterface>;
        constructor(
            public changeDetectorRef: ChangeDetectorRef
        ) {
            let cyan = new Color(\"#00FFFF\");
            let color = new Color(\"#FF0000\");
            let color1 = new Color(\"#00FF00\");
            let arrDataView1: Array<DataSetChartInterface> = [];
            let arrDataView2: Array<DataSetChartInterface> = [];
            let arrLabel: Array<DataSetLabelInterface> = [];
            let arrDataView: Array<DataSetChartInterface> = [];
            for (let i = 0; i < 8; i++) {
                arrDataView1.push({
                    x: i,
                    y: i * 9,
                });
                arrDataView2.push({
                    x: i,
                    y: i + 30,
                });

                arrLabel.push({
                    xAxisValue: i,
                    label: `Tháng ` + (i + 1)
                })

            }
            let item: DataLineChartInterface = {
                dataSet: arrDataView1,
                lineColor: cyan,
                highlighColor: color,
                legendLabel: \"arrDataView1\"
            };
            let item1: DataLineChartInterface = {
                dataSet: arrDataView2,
                lineColor: color1,
                highlighColor: color,
            };
            this.dataSet = [];
            this.dataSet.push(item);
            this.dataSet.push(item1);
            this.barDataSet = [];
            this.barDataSet.push({
                dataSet: arrDataView1,
                legendLabel: \"barChartView1\",
                highlighColor: color,
                barColor: color1
            });
            this.markerConfig = {
                displayData: {
                    showXValue: false,
                    showYValue: true,
                    formatter: \"Yvalue: {{y}}\",
                },
                contentCenter: true,
                xOffset: -30,
                yOffset: -30,
                backgroundColor: new Color(\"#0000ff\"),
                textColor: new Color(\"#ffffff\"),
                font: \"Papyrus\",
                fontSize: 12,
                padding: {
                    x: 20,
                    y: 10
                }
            }
            this.labels = arrLabel;
        }
    }
    \n

    ##FixSameError

    \n

    When use plugin if you see error when build --aot in line import interface in file .component like this :

    \n

    Module not found. Can't resolve "nativescript-mpchart" in "relative path*.component".

    \n

    You can't try change to : import { ... } from "nativescript-mpchart/index" and delete all platform, hook, node_modules and rebuild. I think an error in platform and angular not in plugin because i see it when develop.

    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/LeCaoPhuc/nativescript-mpchart
    $ cd nativescript-mpchart/src
    $ npm install
    $ npm run demo
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

    \n

    If you want to run the Angular demo simply use the demo.ios.ng.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-navigator":{"name":"nativescript-vue-navigator","version":"1.2.0","license":"MIT","readme":"

    NativeScript-Vue-Navigator

    \n

    NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.

    \n

    Quick Start

    \n
    $ npm install --save nativescript-vue-navigator
    \n
    // main.js
    import Vue from 'nativescript-vue'
    ...
    + import Navigator from 'nativescript-vue-navigator'
    + import {routes} from './routes'
    + Vue.use(Navigator, { routes })

    new Vue({
    -   render: h => h('frame', App),
    +   render: h => h(App),
    }).$start()
    \n
    // routes.js
    import HomePage from './components/HomePage'
    import LoginPage from './components/LoginPage'

    export const routes = {
      '/home': {
        component: HomePage,
      },
      '/login': {
        component: LoginPage,
      },
    }
    \n
    // App.vue
    <template>
    +  <Navigator :defaultRoute=\"isLoggedIn ? '/home' : '/login'\"/>
    </template>
    \n

    Attaching extra data to a route

    \n
    // routes.js
    import HomePage from './components/HomePage'
    import LoginPage from './components/LoginPage'

    export const routes = {
      '/home': {
        component: HomePage,
    +   // we are using `meta` as a good practice, but you are free to use something else
    +   meta: { needsAuth: true }
      },
      '/login': {
        component: LoginPage,
    +   meta: { needsAuth: false }
      },
    }
    \n
    <!-- anywhere in your templates -->
    <Label :text=\"$navigator.route.meta.needsAuth\" />
    \n
    // or in any vue component
    export default {
      methods: {
        doStuff() {
          if(this.$navigator.route.meta.needsAuth) {
            // do stuff
          }
        }
      }
    }
    \n

    Getting the current path

    \n
    // logs the current path in the default navigator
    console.log(this.$navigator.path)

    // logs the current path in the second navigator (See Multiple Navigators section for more details)
    console.log(this.$navigator.paths.second)
    \n

    Navigating

    \n

    This package provides 2 methods for navigation, $navigator.navigate and $navigator.back

    \n

    $navigator.navigate(to, options) is used for all forward navigation

    \n
      \n
    • to is the path to navigate to (ex.: /home)
      • \n
    • options is an optional object, which accepts all options supported by Manual Routing
      • \n
    \n

    For example, given you are on a Login page, and successfully log in you would navigate to the Home page with

    \n
    this.$navigator.navigate('/home', { clearHistory: true })
    \n

    Note that we used clearHistory: true to prevent the back button from going back to the login page.

    \n

    $navigator.back(options, backstackEntry) is an alias to $navigateBack

    \n

    Multiple Navigators

    \n

    It is possible to use multiple <Navigator> elements by providing each new Navigator with a unique id.

    \n
    <template>
      <!-- this is the default navigator and can omit the id -->
      <Navigator />   
      <!-- shows the current path of the default navigator -->
      <Label :text=\"$navigator.path\" />

      <!-- this is the second navigator and it MUST have a unique id -->
      <Navigator id=\"second\" /> 
      <!-- shows the current path of the second navigator -->
      <Label :text=\"$navigator.paths.second\" />
    </template>

    <script>
      export default {
        methods: {
          someMethod() {
            // navigate the default Navigator
            this.$navigator.navigate('/new-path')
            // navigate the second default Navigator by specifying the frame option
            this.$navigator.navigate('/new-path', { frame: 'second' })


            // navigate back the default Navigator
            this.$navigator.back()
            // navigate back the second Navigator
            this.$navigator.back({ frame: 'second' })
          }
        }    
      }
    </script>
    \n

    Navigator Modals

    \n
    type ModalOptions = { id: string } & ShowModalOptions
    this.$navigator.modal(path: string, options: ModalOptions);
    \n

    The default id for modal navigators is modalNavigator but can be changed by passing an id inside the ModalOptions.

    \n
    // use the default id for the modal
    this.$navigator.modal('/path', { fullscreen: true })
    // to navigate the modal to '/other'
    this.$navigator.navigate('/other', { frame: 'modalNavigator' })

    // use a different id for the modal
    this.$navigator.modal('/path', { fullscreen: true, id: 'myModal' })
    // to navigate the myModal modal to '/other'
    this.$navigator.navigate('/other', { frame: 'myModal' })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linearprogressbar-elica":{"name":"nativescript-linearprogressbar-elica","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Linear Progress Bar

    \n

    A NativeScript plugin that provides a widget to implement a linear progress bar, inspired by Google Material Design.
    \nThe ios implemention uses Philippe Boisney's linear progress bar .

    \n

    Installation

    \n
      \n
    • tns plugin add nativescript-linearprogressbar
      • \n
    \n

    Vanilla NativeScript

    \n

    XML

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:Bar=\"nativescript-linearprogressbar\">
      <StackLayout>
        <Bar:Linearprogressbar indeterminate=\"true\" />
      </StackLayout>
    </Page>
    \n

    Angular NativeScript

    \n
    import { registerElement } from 'nativescript-angular/element-registry';

    registerElement('LinearProgressBar', () => require('nativescript-linearprogressbar').Linearprogressbar);
    \n
    <LinearProgressBar indeterminate=\"true\">
    </LinearProgressBar>
    \n

    Attributes

    \n
      \n
    • indeterminate - [boolean] if true, the bar will load indeterminately
      • \n
    • barColor - [string] sets the loading bar color with an hexadecimal color code
      • \n
    \n

    Version

    \n

    1.0

    \n

    Author

    \n

    slanca (npmdroid(@)gmail.com)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-pullrefresh":{"name":"nativescript-nbmaterial-pullrefresh","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of PullToRefresh behaviour

    \n

    The module implement Material calendar on both platforms iOS and Android.\nIt is possible to refresh on both direction (top and bottom).\nYou must use the recycler package in order to use the pulltorefresh component.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:ti=\"nativescript-nbmaterial-pullrefresh\" xmlns:pullr=\"nativescript-nbmaterial-pullrefresh\">
     \t<pullr:PullToRefresh direction=\"both\" id=\"pullrefresh\">
    \t\t\t<rec:RecyclerView row=\"0\"  items=\"{{source}}\" id=\"list\" itemTap=\"tapItem\" itemLongTap=\"tapLongItem\" itemTemplateSelector=\"templateSelector\">
    \t\t\t\t<rec:RecyclerView.itemTemplates>
    \t\t\t\t\t<template key=\"zero\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"green\" />
    \t\t\t\t\t</template>
    \t\t\t\t\t<template key=\"un\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"white\" paddingTop=\"10\"  paddingBottom=\"10\" />
    \t\t\t\t\t</template>
    \t\t\t\t\t<template key=\"deux\">
    \t\t\t\t\t\t<Label text=\"{{ text }}\" backgroundColor=\"red\"/>
    \t\t\t\t\t</template>
    \t\t\t\t</rec:RecyclerView.itemTemplates>
    \t\t\t</rec:RecyclerView>
    \t\t</pullr:PullToRefresh> 
    </Page>

    }
    \n

    The PullToRefresh has this interface:

    \n

    export declare class PullToRefresh extends View {
        direction: \"both\" | \"bottom\" | \"top\";
        public static refreshTopEvent;
        public static refreshBottomEvent; 
        public androidBottomRefreshView: ActivityIndicator;
        startRefreshTop();
        startRefreshBottom();
        stopRefreshTop();
        stopRefreshBottom();
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-bottomnav":{"name":"nativescript-nbmaterial-bottomnav","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material Bottom Navigation

    \n

    The module implement Bottom Navigation Layout on both iOS and Android.
    \nYou can add a shit animation to nav items by adding "shifted" class to the component.\nIcon and Title extends nativescript Label.\nYou can use a font library like material-icons or font-awesome.

    \n

    If you want to use it as a root navigator your app.ts must looks like:

    \n
    import \"./bundle-config\";
    import {startWithMenu} from 'nativescript-nbmaterial-bottomnav';

    startWithMenu({ moduleName: 'home/home-page' }, \"menu/menu-page\");
    \n

    "moduleName" is your first screen.

    \n

    And menu-page looks like:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:bnav=\"nativescript-nbmaterial-bottomnav\">
    \t<bnav:BottomNavigation autoselect=\"false\" select=\"selectNav\" id=\"bottomnav\" class=\"shifted\">
    \t\t<bnav:BottomNavigationItem>
    \t\t\t<bnav:Icon text=\"dashboard\"  />
    \t\t\t<bnav:Title text=\"Home\"/>
    \t\t</bnav:BottomNavigationItem>
    \t\t<bnav:BottomNavigationItem>
    \t\t\t<bnav:Icon text=\"add\"/>
    \t\t\t<bnav:Title text=\"Ajouter\" />
    \t\t</bnav:BottomNavigationItem>
    \t\t<bnav:BottomNavigationItem>
    \t\t\t<bnav:Icon text=\"favorite\"/>
    \t\t\t<bnav:Title text=\"Consulter\" />
    \t\t</bnav:BottomNavigationItem> 
    \t</bnav:BottomNavigation>  
    </Page>

    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-watchos-connector":{"name":"nativescript-watchos-connector","version":"2.0.0","license":"Apache-2.0","readme":"

    nativescript-watchos-connector

    \n

    This is a NativeScript plugin that uses Apple WatchConnectivity to pass and receive data to a companion WatchOS app.

    \n

    \"\" \"\" \"\"

    \n

    Prerequisites / Requirements

    \n

    Before using this plugin, make sure you have followed the NativeScript blog post on Developing a watchOS Extension For Your NativeScript App and iOS WatchOS Applications.

    \n

    Installation NativeScript 7

    \n
    npm i nativescript-watchos-connector
    \n

    Installation prior to NativeScript 7:

    \n
    npm i nativescript-watchos-connector@1.0.11
    \n

    Usage

    \n

    NativeScript Angular

    \n
      \n
    1. For this plugin to work you must first add the nativescript-watchos-connector as a provider in your app.module.ts:
      2. \n
    \n

    TypeScript

    \n
    import  {  WatchOSConnector  }  from  'nativescript-watchos-connector'

    @NgModule({
    \tbootstrap: [AppComponent],
    \timports: [],
    \tproviders: [ WatchOSConnector ],
    \tdeclarations: [ AppComponent ],
    \tschemas: [ NO_ERRORS_SCHEMA ]
    })
    \n
      \n
    1. Import the nativescript-watchos-connector plugin:
      2. \n
    \n

    TypeScript

    \n
    import  {  WatchOSConnector  }  from  'nativescript-watchos-connector'
    \n
      \n
    1. Create an instance of the import in the constructor:
      2. \n
    \n

    TypeScript

    \n
    constructor(
    \tprivate _watchOSConnector: WatchOSConnector
    ) {}
    \n

    Plugin Overview

    \n

    This is a list of all currently available functions and a brief description of their usage within this plugin.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    createWCSession()Creates a WCSession
    watchOSChecker()Checks if the user is on iOS, has an Apple Watch paired and the WatchOS app is installed
    checkActivation()Checks if the WCSession is active (if not, session will be activated)
    convertInt(value)Return value as Obj-C int
    convertDouble(value)Return value as Obj-C double
    convertFloat(value)Return value as Obj-C float
    sendObjectToWatch('objectKey', object)Send the data to the companion WatchOS App using ApplicationContext
    \n

    createWCSession()

    \n

    createWCSession checks if the device can support a WCSession, if so a WCSession will be created.

    \n

    TypeScript

    \n
    this.watchOSConnector.createWCSession()
    \n

    watchOSChecker()

    \n

    Use watchOSChecker instead of isIOS when working with passing data to the Apple Watch. This checks if the user is on iOS, has an Apple Watch paired and the WatchOS app is installed (returns boolean)

    \n

    TypeScript

    \n
    if (this.watchOSConnector.watchOSChecker()) {
    // Only run if WatchOS app is avalaible
    }
    \n

    checkActivation()

    \n

    Checks if the WCSession is active, if not this will activate the current session. This is called in sendObject() to ensure there is an active session.

    \n

    TypeScript

    \n
    this.watchOSConnector.checkActivation()
    \n

    convertInt(value)

    \n

    Returns the value as a NSNumber with int

    \n

    TypeScript

    \n
    this.watchOSConnector.convertInt(2319)
    \n

    convertDouble(value)

    \n

    Returns the value as a NSNumber with double

    \n

    TypeScript

    \n
    this.watchOSConnector.convertDouble(42.957194)
    \n

    convertFloat(value)

    \n

    Returns the value as a NSNumber with float

    \n

    TypeScript

    \n
    this.watchOSConnector.convertFloat(882.152)
    \n

    sendObjectToWatch(objectKey, object)

    \n

    Sends the data to the companion WatchOS app using updateApplicationContext. You need to pass in a key for the object and an object of Objective-C valid values.

    \n

    TypeScript

    \n
    let intValue =  this.watchOSConnector.convertInt(4)
    let doubleValue =  this.watchOSConnector.convertDouble(45.1)

    let numberObject =  {
    \tconvertedInt: intValue,
    \tconvertedDouble: doubleValue
    }

    this.watchOSConnector.sendObject('numberObjectKey', numberObject)
    \n

    v2.0.0 Release

    \n
      \n
    1. Updated to be compatible with NativeScript 7
      2. \n
    \n

    Future Releases

    \n
      \n
    • [ ] Add images to README
      • \n
    • [ ] Create a demo app
      • \n
    \n

    Contributors

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ns-apple-signin":{"name":"nativescript-ns-apple-signin","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-ns-apple-signin

    \n

    Sign in with Apple, for NativeScript

    \n

    My Linked https://www.linkedin.com/in/tungtranuit/

    \n

    Easily way to get User Info with Login Apple .

    \n

    You can get the Infomations :\nUser, Email, RealUserStatus, IdentityToken, AuthCode , fullName (givenName,familyName ,middleName, namePrefix,nameSuffix,nickname,phoneticRepresentation ) ...

    \n
    {
        user: user ,
        email: email,
        fullName:{
                    givenName 
                    familyName 
                    middleName 
                    namePrefix 
                    nameSuffix 
                    nickname
                    phoneticRepresentation 
         },
                realUserStatus: realUserStatus,
                identityToken: identityToken,
                authCode: authCode
      }
    \n

    Re-wirte Plugin from https://github.com/EddyVerbruggen/nativescript-apple-sign-in.

    \n

    Prerequisites / Requirements

    \n

    Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.\nOpen your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.

    \n
    <key>com.apple.developer.applesignin</key>
    <array>
    <string>Default</string>
     </array>
    \n

    Installation

    \n
    tns plugin add nativescript-ns-apple-signin
    \n

    Configuration

    \n

    Usage

    \n
    tns plugin add nativescript-ns-apple-signin
    \n

    API

    \n

    isSignInWithAppleSupported

    \n

    Sign In with Apple was added in iOS 13, so make sure to call this function before showing a "Sign In with Apple" button in your app.\nOn iOS < 13 and Android this will return false.

    \n
    import { isSignInWithAppleSupported } from \"nativescript-ns-apple-signin\";

    const supported: boolean = isSignInWithAppleSupported();
    \n

    signInWithApple

    \n

    Not that you know "Sign In with Apple" is supported on this device, you can have the\nuser sign themself in (after they pressed a nice button for instance).

    \n
    import { signInWithApple } from \"nativescript-ns-apple-signin\";

    signInWithApple(
                {
                    scopes: [\"EMAIL\",\"FULLNAME\"]
                })
                .then(credential => {
                    console.log(\"Signed in, user: \" + credential.user);
                    console.log(\"Signed in, user: \" + credential.email);
                    console.log(\"Signed in, user: \" + JSON.stringify(credential.fullName));
                    this.user = credential.user;
                })
                .catch(err => console.log(\"Error signing in: \" + err));
    \n

    getSignInWithAppleState

    \n

    If you want to know the current Sign In status of your user, you can pass the user (id) you acquired previously.

    \n
    import { getSignInWithAppleState } from \"nativescript-apple-sign-in\";

    const user: string = \"the id you got back from the signInWithApple function\";

    getSignInWithAppleState(user)
        .then(state => console.log(\"Sign in state: \" + state))
        .catch(err => console.log(\"Error getting sign in state: \" + err));
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-n6-color-wheel":{"name":"nativescript-n6-color-wheel","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript Color Wheel

    \n

    This plugin is tend to be used within NativeScript 6 version.

    \n

    Correspondent {N}7 version\nis @sergeymell/nativescript-color-wheel

    \n

    Description

    \n

    This plugin is actually a color picker plugin which can be used\nas a simple component wherever you need it. It allows you to

    \n
      \n
    • pick a color by clicking appropriate position on the color wheel
      • \n
    • render whatever UI as a picker icon customizing it on your own needs
      • \n
    • set an initial color for the plugin
      • \n
    • put the color picker wherever you need it as long it's just a custom element.
      • \n
    \n

    Plugin works simultaneously for both iOS and Android platforms and\nis not based on any additional libraries, CocoaPods etc

    \n

    Examples

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Color wheel with custom selection pickerColor picker in a modal dialog
    \"\"\"\"
    \n

    Installation

    \n
    ns plugin add nativescript-n6-color-wheel
    \n

    Usage

    \n

    In NativeScript Core applications:

    \n
    <clw:ColorWheel width=\"200\" height=\"200\" color=\"#FFB35E\"
                                colorSelect=\"{{colorSelected}}\"/>
    \n

    In NativeScript Angular applications:

    \n
      \n
    1. Add NativeScriptColorWheelModule from nativescript-n6-color-wheel/angular to the imports section of your Angular module
      2. \n
    2. Use the ColorWheel component where you need it
      3. \n
    \n
    <ColorWheel width=\"200\" height=\"200\" margin=\"20\"
                      (colorSelect)=\"onColorSelected($event)\">    </ColorWheel>
    \n

    TODOs:

    \n
      \n
    • optimize the algorithm of initial color location determination
      • \n
    • make color brightness configurable (at least for Android)
      • \n
    • add support of other color selection area forms (i.e. square)
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-range-seek-bar":{"name":"nativescript-range-seek-bar","version":"1.0.3","license":"Apache-2.0","readme":"

    NativeScript Range Seek Bar

    \n

    A NativeScript Range Seek Bar widget.

    \n

    Based on

    \n

    TTRangeSlider for iOS

    \n

    Crystal Range Seekbar for Android

    \n

    Installation

    \n

    Run tns plugin add nativescript-range-seek-bar

    \n

    API

    \n

    Events

    \n
      \n
    • rangeSeekBarChanged
      \nTriggered when user has changed minimum value or maximum value on the Range Seek Bar.
      • \n
    • rangeSeekBarFinalValue
      \nTriggered when user has finished touch on the Range Seek Bar.
      • \n
    \n

    Instance Properties

    \n
      \n
    • minValue - Number
      \nGets or sets minimum value of the Range Seek Bar.
      • \n
    • maxValue - Number
      \nGets or sets maximum value of the Range Seek Bar.
      • \n
    • minStartValue - Number
      \nGets or sets minimum start value of the Range Seek Bar.
      • \n
    • maxStartValue - Number
      \nGets or sets maximum start value of the Range Seek Bar.
      • \n
    • minRange - Number
      \nGets or sets minimum range of two thumb.
      • \n
    • step - Number
      \nGets or sets minimum steps between range, default is 1.
      • \n
    • cornerRadius - Number
      \nGets or sets corner radius of two thumb.
      • \n
    • barHeight - Number
      \nGets or sets bar height of the Range Seek Bar.
      • \n
    • barColor - Color
      \nGets or sets bar color of the Range Seek Bar.
      • \n
    • barHighlightColor - Color
      \nGets or sets bar highlight color of the Range Seek Bar.
      • \n
    • thumbColor - Color
      \nGets or sets color of two thumb.
      • \n
    \n

    Usage in Angular

    \n
      \n
    • Import NativeScriptUIRangeSeekBarModule in NgModule:
      • \n
    \n
    import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tNativeScriptUIRangeSeekBarModule,
            //......
    \t],
        //......
    })
    \n
    <!-- app.component.html -->
    <StackLayout>
        <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [minStartValue]=\"rangeSeekBarProp.minStartValue\"
            [maxStartValue]=\"rangeSeekBarProp.maxStartValue\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
            (rangeSeekBarChanged)=\"rangeSeekBarChanged($event)\" (rangeSeekBarFinalValue)=\"rangeSeekBarFinalValue($event)\" class=\"range-seek-bar\">    </RangeSeekBar>
    </StackLayout>
    \n
    /*app.css*/
    .range-seek-bar {
        bar-color: #8990C4;
        bar-highlight-color: #2434AD;
        thumb-color: #1A246D;
        bar-height: 10;
        corner-radius: 30;
    }
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
    })

    export class AppComponent {

        public rangeSeekBarProp = {
            minValue: 0,
            maxValue: 100,
            minStartValue: 0,
            maxStartValue: 100,
            minRange: 0,
            step: 1
        };

        constructor() { }

        rangeSeekBarChanged(event: RangeSeekBarEventData) {
            console.log(\"rangeSeekBarChanged: \", event.value);
        }

        rangeSeekBarFinalValue(event: RangeSeekBarEventData) {
            console.log(\"rangeSeekBarFinalValue: \", event.value);
        }
    }
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
    $ cd nativescript-range-seek-bar/src
    $ npm install
    $ npm run demo.ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

    \n

    If you want to run the Angular demo simply use the demo.ios.ng.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@chasexc/nativescript-fingerprint-auth":{"name":"@chasexc/nativescript-fingerprint-auth","version":"8.0.1","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-search":{"name":"nativescript-nbmaterial-search","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material SearchBar

    \n

    The module implement Material Search Bar on both platforms iOS and Android.\nYou can use it as a modal (fullscreen) or as a simple component.\nIt also display results.

    \n

    TabLayout extends the nativescript GridLayout

    \n
    export const searchAdapter: SearchCallback = {
        onCancel() {
            while (searchBar.results.length) {
                searchBar.results.pop();
            }
        },
        onClear() {
            while (searchBar.results.length) {
                searchBar.results.pop();
            }
        },
        onSubmit() {
            while (searchBar.results.length) {
                searchBar.results.pop();
            }
        },
        onText(text) {
            if (text && (text.startsWith(\"N\") || text.startsWith(\"n\"))) {
                for (let i = 0; i < 10; i++) { 
                    searchBar.results.push({ label: text + \" \" + i })
                }
            } else {
                while (searchBar.results.length) {
                    searchBar.results.pop();
                }
            }
        }
    }
    let searchBar =  page.getViewById(\"searchbar\");
    searchBar.register(searchAdapter)
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"  xmlns:sea=\"nativescript-nbmaterial-search\">
     \t\t<sea:SearchBarModal id=\"searchbar\">
    \t\t\t<sea:SearchBarModal.barTemplate>
    \t\t\t\t<sea:SearchBar>
    \t\t\t\t\t<sea:SearchField/>
    \t\t\t\t\t<sea:SearchIcon text=\"arrow_back\" action=\"cancel\" position=\"left\"/>
    \t\t\t\t\t<sea:SearchIcon text=\"mic\" action=\"speech\" position=\"right\"/>
    \t\t\t\t\t<sea:SearchIcon text=\"clear\" action=\"clear\" position=\"right\"/>
    \t\t\t\t</sea:SearchBar>
    \t\t\t</sea:SearchBarModal.barTemplate>
    \t\t\t<sea:SearchBarModal.resultTemplate>
    \t\t\t\t<StackLayout  paddingTop=\"15\">
    \t\t\t\t\t<ListView items=\"{{results}}\"  itemTap=\"searchTap\">
    \t\t\t\t\t\t<ListView.itemTemplate>
    \t\t\t\t\t\t\t<Label text=\"{{label}}\" textWrap=\"true\" />
    \t\t\t\t\t\t</ListView.itemTemplate>
    \t\t\t\t\t</ListView>
    \t\t\t\t</StackLayout>
    \t\t\t</sea:SearchBarModal.resultTemplate>
    \t\t</sea:SearchBarModal>
    </Page>

    }
    \n

    The Searchbar has this interface:

    \n
    export interface SearchCallback {
        onClear();
        onCancel();
        onText(text: string);
        onSubmit(text: string);
    }
    export class SearchBar extends GridLayout {
        callbacks: SearchCallback[];
        register(c: SearchCallback);
        unregister(toDel: SearchCallback);
        cancel();
        clear();
        submit(text: string);
        changed(text: string);
        speech();
    }
    export class SearchBarModal extends View {
        hide();
        show();
        register(c: SearchCallback);
        unregister(toDel: SearchCallback);
        readonly opened: boolean;
        newPage: Page;
        results: ObservableArray<any>;
    }

    export class SearchField extends TextField {
        bar: SearchBar;
    }
    export class SearchIcon extends Label {
        position: \"left\" | \"right\";
        action: \"submit\" | \"cancel\" | \"speech\";
        bar: SearchBar;
    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mrz-reader":{"name":"nativescript-mrz-reader","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript MRZ Reader

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-mrz-reader
    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

    \n

    API

    \n

    retrieveData

    \n

    Initiates conitunous live scanning until it finds a MRZ code.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDescription
    callback(data: IMrzData) => voidCallback function that is invoked when scanning is completed or cancelled.
    \n
    var MrzReader = require(\"nativescript-mrz-reader\");
    MrzReader.retrieveData(function (result) {
        console.log(result && result.value || \"Cancelled\");
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lightweightserver":{"name":"nativescript-lightweightserver","version":"1.0.2","license":"MIT","readme":"

    Develop a NativeScript plugin now (w/ TypeScript)

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. npm install -g typescript
      3. \n
    3. cd myplugin
      4. \n
    4. npm run postclone
      5. \n
    5. npm run setup
      6. \n
    6. Get to work.
      7. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-lightweightserver
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-demo-utils":{"name":"nativescript-demo-utils","version":"1.0.0","license":"Apache-2.0","readme":"

    Demo Utils

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-demo-utils
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hyvapetteri/audiobuffer-player":{"name":"@hyvapetteri/audiobuffer-player","version":"1.0.8","license":"Apache-2.0","readme":"

    @hyvapetteri/audiobuffer-player

    \n
    ns plugin add @hyvapetteri/audiobuffer-player
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-chat-ui":{"name":"nativescript-zendesk-chat-ui","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Zendesk Chat UI

    \n

    Exposes Zendesk Chat SDK for iOS and Android.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-zendesk-chat-ui
    \n

    Usage

    \n
    ZendeskChatUi.initialize(key); // your key here
    ZendeskChatUi.startChat(); // start a chat
    \n

    API

    \n

    ZendeskChatUi

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDefaultDescription
    startChat(chatConfig?: ChatConfig)nullStart a chat with a chat configuration.
    initialize(accountKey: string)nullyour zendesk chat account key. required.
    trackEvent(eventDescription: string)nulltrack event.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    visitorInfo: VisitorInfonullset user's the email, name, phone number, note.
    chatOverlayEnabled: booleantruehide the chat overlay. iOS only
    \n

    VisitorInfo

    \n
    export interface VisitorInfo {
      name?: string;
      email?: string;
      phoneNumber?: string;
      note?: string;
    }
    \n

    ChatConfig

    \n
    export interface ChatConfig {
      department?: string;
      tags?: string[];
      uploadAttachmentsEnabled?: boolean; // ios only
      preChatDataRequirements?: { // required fields the user will have to fill
        department: PreChatDataRequirement;
        email: PreChatDataRequirement;
        message: PreChatDataRequirement;
        name: PreChatDataRequirement;
        phone: PreChatDataRequirement;
      };
    }
    \n

    PreChatDataRequirement

    \n
    export enum PreChatDataRequirement {
      NotRequired = 0,
      Optional = 1,
      Required = 2,
      OptionalEditable = 3,
      RequiredEditable = 4
    }
    \n

    Customization

    \n

    For customization, please refer to the iOS and Android documentation.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-homekit":{"name":"nativescript-homekit","version":"1.0.0","license":"MIT","readme":"

    NativeScript HomeKit plugin

    \n\n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-homekit
    \n

    Demo app

    \n

    Recommended! Check out the demo to get a feel of what you can do with HomeKit.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.

    \n

    A bit of context

    \n

    As mentioned here, HomeKit is a framework for communicating with and controlling connected home automation accessories that support Apple's HomeKit Accessory Protocol. HomeKit apps enable users to discover compatible accessories and configure them. Users can also create actions to control accessories (such as a thermostat or light), group them together, and trigger them by using Siri.

    \n

    HomeKit objects are stored in a database residing on the user’s iOS device, which is synchronized over iCloud to other iOS devices. HomeKit supports remote access to accessories, multiple user devices, and multiple users. HomeKit also handles security and privacy for you.

    \n

    Homes

    \n

    At the top of the hierarchy are 'homes', think your family home, and a (permanent) vacation home. Each home can have multiple rooms. Accessories in a home may be assigned to a room. And finally accessories have services:

    \n\n

    Zones

    \n

    To further structure your HomeKit layout and create powerful scenes HomeKit has the ability to divide your home into zones (the 'Kitchen' and 'Garage' rooms could be clustered in a 'Downstairs' zone):

    \n\n

    What this plugin does

    \n

    This plugin gives you a dead-simple interface into HomeKit's SDK to manage homes, rooms, and zones, and assign accessories to those homes or rooms.

    \n

    Anything beyond that can be done as well, but you'll need to interact directly with the HomeKit SDK. Don't worry, we'll explain how that works and it's easier than you might think.

    \n

    You may wonder why this plugin doesn't expose the entirety of HomeKit? Mainly because it's huge and everything beyond the parts exposed by this plugin really depends on the type(s) of accessories you own. So that would mean we'd produce a lot of untested wrapping code while using the raw SDK isn't that different anyway.

    \n

    Setup

    \n

    Open your project in Xcode, go to Targets, then enable HomeKit. This needs to be done only once, unless you run tns platforms remove ios & tns platform add ios of course.

    \n

    Download the HomeKit Simulator which is now part of the Hardware IO Tools. It's a super convenient way to test your HomeKit-powered app.

    \n

    Just open the simulator and add a new accessory as shown in this picture and you're ready to play with it in the demo app:

    \n\n

    Types

    \n

    The HomeKit plugin wraps the native iOS HomeKit SDK classes to make it more convenient for you to work with them. The API functions further below use the types listed in this section.

    \n

    Note that you can skip this section and just look at the TypeeScript .ts.d files shipped with this plugin. If you use a decent IDE like VSCode or Webstorm/Intellij you will get autocomplete, etc based on those definitions.

    \n

    Home

    \n

    | Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique |\n| primary | boolean | The first home you create will be the 'primary' home |\n| zones | Array<Zone> | All zones you've created in this home |\n| rooms | Array<Room> | All rooms you've created in this home |\n| accessories | Array<Accessory> | All accessories you've assigned to this home |\n| ios | HMHome | The native HomeKit SDK class you can further explore |

    \n

    Zone

    \n

    | Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| rooms | Array<Room> | A zone can have mulriple rooms, each with a unique name |\n| ios | HMZone | The native HomeKit SDK class you can further explore |

    \n

    Room

    \n

    | Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| accessories | Array<Accessory> | A room can have mulriple accessories assigned to it |\n| ios | HMRoom | The native HomeKit SDK class you can further explore |

    \n

    Accessory

    \n

    | Property | Type | Description |\n--- | --- | --- | ---\n| name | string | This is used by Siri so it is unique for the home |\n| bridged | boolean | Whether or not this accessory is connected through a bridge (which is an accessory like everything else) |\n| room? | Room | The accessory may or may not be assigned to a room |\n| ios | HMAccessory | The native HomeKit SDK class you can further explore |

    \n

    API

    \n

    Most of the examples will be in TypeScript as I think that's by far the best way to build anything with JavaScript these days. If you plan on doing some deep interaction with HomeKit's accessories and services you'll also want to install the tns-platform-declarations modules which provide TypeScript declarations of the HomeKit SDK.

    \n

    Sounds a bit overwhelming? Just look at the demo app as it has all those bits configured. It's a non-Angular TypeScript-powered NativeScript app you can copy snippets from.

    \n

    Note that all of these API functions use Promises so their .then() will receive a resolve and reject param. The reject will always contain a string with an error reason. Most of the time those error will originate from HomeKit itself. For instance if you add a room with the same name as an existing room to a home. Or if you end a roomname with a character Siri doesn't like.

    \n

    For brevity I'll omit those rejects from most of the examples.

    \n

    available

    \n

    On iOS this will always return true, on Android false. So if you already have some other convenient means to branch your code between those two then don't bother invoking this method at all.

    \n
    JavaScript
    \n
    // require the plugin
    var HomeKit = require(\"nativescript-homekit\").HomeKit;

    // instantiate the plugin
    var homeKit = new HomeKit();

    homeKit.available().then(
      function(available) {
        console.log(available ? \"YES!\" : \"NO\");
      }
    );
    \n
    TypeScript
    \n
    // require the plugin
    import { HomeKit } from \"nativescript-homekit\";

    // instantiate the plugin (assuming the code below is inside a Class)
    private homeKit = new HomeKit();

    public checkAvailability(): void {
      this.homeKit.available().then(
        avail => console.log(available ? \"YES!\" : \"NO\"),
        err => console.log(err)
      );
    }
    \n

    init

    \n

    No init, no glory - ehh, HomeKit interaction. You'll need to pass in a function that will receive updates when anything in the HomeKit database changes so your app can respond to those changes.

    \n
    this.homeKit.init((homes: Array<Home>) => {
      // do anything with the Homes you received (look at the demo app!)
    });
    \n

    startSearchingForAccessories

    \n

    Accessories may pop up at any time, but by default your app isn't searching for them all the time. It's probably a good idea to add a button to your app's UI that starts and stops searching for accessories as the user will know best when a new accessory can be found.

    \n

    Only new accessories can be found, not ones already assigned to a home or room. Also, when accessories were previously stored in the local HomeKit database and have now been removed (try it, delete one in the HomeKit Simulator) then you'll be notified as well.

    \n

    To that end you can pass in 2 distinct callback functions: the first is for newly discovered the devices, the second for removed devices:

    \n
    this.homekit.startSearchingForAccessories(
        (accessory: Accessory) => {
          console.log(\"New accessory found: \" + accessory.name);
          // you can use this to further interact with the accessory:
          console.log(\"Accessory native object: \" + accessory.ios);
        },
        (accessory: Accessory) => {
          console.log(\"Accessory removed: \" + accessory.name);
        }).then(
            () => console.log(\"searching..\"),
            (err) => alert(err)
    );
    \n

    stopSearchingForAccessories

    \n

    I'm not sure how much of a battery drainer search for accessories is, but it's probably a good idea to allow the user to be able to stop searching for accessories.

    \n

    And it's easily implemented as well, so go for it!

    \n
    this.homekit.stopSearchingForAccessories().then(() => console.log(\"Searching stopped\"));
    \n

    Managing homes: addHome, removeHome, renameHome

    \n

    You can offer the user to configure his homes, zones, and rooms (like the demo app does). Here's how you manage the homes:

    \n

    addHome

    \n
    import { prompt, PromptResult } from \"ui/dialogs\";

    // ask the user for a name and add it to HomeKit
    prompt(\"Name the home\").then((promptResult: PromptResult) => {
      if (promptResult.result) {
        that.homekit.addHome(promptResult.text).then((home: Home) => {
          console.log(JSON.stringify(home));
          that.homes.push(home);
        }, err => alert(err));
      }
    });
    \n

    deleteHome

    \n
    this.homekit.removeHome(name).then((home: Home) => {
      // the returned home is the one deleted
    }, err => alert(err));
    \n

    renameHome

    \n
    // ask the user for a new name, prefill the old one
    prompt(`Rename home '${currentName}' to..`, currentName).then((promptResult: PromptResult) => {
      if (promptResult.result) {
        // since the name is unique we're using 'currentName' as an identifier
        that.homekit.renameHome(currentName, promptResult.text).then((home: Home) => {
          // the returned home is already updated with the new name
          console.log(`Renamed ${currentName} to ${home.name}`);
        }, err => alert(err));
      }
    });
    \n

    Managing zones: addZone, removeZone, renameZone

    \n

    Much the same as homes, so to not bore you we're just showing the TypeScript defintion here:

    \n
    addZone(name: string, toHome: string): Promise<Zone>;

    removeZone(name: string, fromHome: string): Promise<Zone>;

    renameZone(oldName: string, newName: string, inHome: string): Promise<Zone>;
    \n

    Managing rooms: addRoomToHome, addRoomToZone, removeRoomFromZone, removeRoomFromHome, renameRoom

    \n

    Again, quite similar to the others. The only difference is you can only add a room to a zone if it's already added to a home. Which makes sense, right? Right. So that's why you also need to pass the home name when manipulating rooms in a zone.

    \n
    addRoomToHome(name: string, toHome: string): Promise<Room>;

    addRoomToZone(name: string, toZone: string, inHome: string): Promise<Zone>;

    removeRoomFromZone(name: string, fromZone: string, inHome: string): Promise<Zone>;

    removeRoomFromHome(name: string, fromHome: string): Promise<Room>;

    renameRoom(oldName: string, newName: string, inHome: string): Promise<Room>;
    \n

    Managing accessories: addAccessoryToHome, removeAccessoryFromHome, assignAccessoryToRoom, renameAccessory

    \n

    This should look familiar by now. A few things to note though:

    \n
      \n
    • Zones can't have accessories assigned, they're only for grouping rooms together.
      • \n
    • You first need to assign an accessory to a home before you can assign it to a room. That's why you need to pass the home name to assignAccessoryToRoom.
      • \n
    • An accessory can be assigned to at most one home (and one room) at a time.
      • \n
    • If you want to assign an accessory to a different room just use assignAccessoryToRoom.
      • \n
    \n
    addAccessoryToHome(accessoryName: string, toHome: string): Promise<Home>;

    removeAccessoryFromHome(accessoryName: string, fromHome: string): Promise<Home>;

    assignAccessoryToRoom(accessoryName: string, roomName: string, homeName: string): Promise<Array<Room>>;

    renameAccessory(oldName: string, newName: string): Promise<Accessory>;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-viewer":{"name":"nativescript-pdf-viewer","version":"3.1.0","license":"MIT","readme":"

    nativescript-pdf-viewer

    \n

    This is a very basic PDF view implementation that does only one thing, and\nthat is to display PDF files. It conveniently uses the iOS UIWebView, but\nfor Android it uses AndroidPdfViewer.

    \n

    This plugin does the bare minimum required to render the PDF, no configuration\noptions, and no error handling have been built yet. I welcome all Pull Requests!

    \n

    Usage

    \n

    Demo

    \n

    Check out the demo folder for a sample usage.

    \n

    Angular 2

    \n

    If you're using the plugin with Angular 2, the plugin automatically registers\nPDFViewer as a valid tag for Angular templates. Usage is simple:

    \n
      \n
    1. Make sure to import nativescript-pdf-viewer somewhere in your code, e.g:
      2. \n
    \n
    import 'nativescript-pdf-viewer';
    \n
      \n
    1. Include the tag in your template:
      2. \n
    \n
    <PDFViewer [src]=\"localPath\"></PDFViewer>
    \n

    Try the Demo

    \n

    To try the demo run the following commands:

    \n
    npm run setup
    npm run demo.ios
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nointeract-sms":{"name":"nativescript-nointeract-sms","version":"1.0.11","license":"MIT","readme":"

    nativescript-nointeract-sms

    \n

    Sending sms without user interaction.

    \n

    var smsManager = android.telephony.SmsManager.getDefault();

    \n

    smsManager.sendTextMessage("0123232332",null,"Hello",null,null);

    \n

    (Optional) Prerequisites / Requirements

    \n

    To send sms without user interaction on Android your app must request permission to do so. The following must be in your app's AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.SEND_SMS\" />
    \n

    iOS sms feature will soon be implemented.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-nointeract-sms
    \n

    Usage

    \n

    To use the module you must first require() it from your project's node_modules directory:

    \n

    After you have a reference to the module you can then call the available methods.

    \n
    ```js\n\tvar temp = require( "nativescript-nointeract-sms" );\n\ttemp.sms(number,message);\n```\n
    \n

    Methods:

    \n

    sms(number,message)

    \n

    Send sms on the background.

    \n

    Parameters:

    \n

    number: SMS number to use.

    \n

    message: String to send.

    \n

    License

    \n

    MIT, 2017

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-drop-down":{"name":"nativescript-danem-drop-down","version":"1.0.4","license":"Apache-2.0","readme":"

    This repo only supports NativeScript pre-6.0. The latest version of the plugin supporting and tested on the latest version of NativeScript is availble as part of ProPlugins.

    \n

    NativeScript DropDown widget

    \n

    A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a UILabel with an inputView set to an UIPickerView which displays the items. For Android it wraps up the Spinner widget.

    \n

    Screenshot

    \n

    \"Screenshot

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    tns plugin add nativescript-danem-drop-down

    \n

    This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      opened
      \nTriggered when the DropDown is opened.

      \n
      • \n
    • \n

      closed
      \nTriggered when the DropDown is closed.

      \n
      • \n
    • \n

      selectedIndexChanged
      \nTriggered when the user changes the selection in the DropDown

      \n
      • \n
    \n

    Static Properties

    \n
      \n
    • \n

      openedEvent - String
      \nString value used when hooking to opened event.

      \n
      • \n
    • \n

      closedEvent - String
      \nString value used when hooking to closed event.

      \n
      • \n
    • \n

      selectedIndexChangedEvent - String
      \nString value used when hooking to selectedIndexChanged event.

      \n
      • \n
    \n

    Instance Properties

    \n
      \n
    • \n

      ios - UILabel
      \nGets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

      \n
      • \n
    • \n

      android - android.widget.Spinner
      \nGets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

      \n
      • \n
    • \n

      items - Array | ItemsSource
      \nGets or sets the items collection of the DropDown. The items property can be set to an array or an object defining length and getItem(index) method.

      \n
      • \n
    • \n

      selectedIndex - Number
      \nGets or sets the selected index of the DropDown.

      \n
      • \n
    • \n

      hint - String
      \nGets or sets the hint for the DropDown.

      \n
      • \n
    • \n

      isEnabled - boolean
      \nGets or sets whether the drop down is enabled. If you want to apply a specific style you can use the :disabled pseudo css selector.

      \n
      • \n
    • \n

      accessoryViewVisible - boolean (Default: true)
      \nGets/sets whether there will be an accessory view (toolbar with Done button) under iOS. Valid only when running on iOS.

      \n
      • \n
    • \n

      itemsTextAlignment - String\nGets or sets the alignment for items in the DropDown.

      \n
      • \n
    • \n

      itemsPadding - String\nGets or sets the padding for items in the DropDown.

      \n
      • \n
    \n

    Methods

    \n
      \n
    • \n

      open(): void
      \nOpens the drop down.

      \n
      • \n
    • \n

      close(): void
      \nCloses the drop down.

      \n
      • \n
    \n

    Usage

    \n

    You need to add xmlns:dd="nativescript-drop-down" to your page tag, and then simply use <dd:DropDown/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:dd=\"nativescript-drop-down\">
      <GridLayout rows=\"auto, auto, *\" columns=\"auto, *\">
        <dd:DropDown items=\"{{ items }}\" selectedIndex=\"{{ selectedIndex }}\" 
                     opened=\"dropDownOpened\" closed=\"dropDownClosed\" 
                     selectedIndexChanged=\"dropDownSelectedIndexChanged\"
                     row=\"0\" colSpan=\"2\" />
        <Label text=\"Selected Index:\" row=\"1\" col=\"0\" fontSize=\"18\" verticalAlignment=\"bottom\"/>
        <TextField text=\"{{ selectedIndex }}\" row=\"1\" col=\"1\" />
      </GridLayout>
    </Page>
    \n
    // test-page.ts
    import observable = require(\"data/observable\");
    import observableArray = require(\"data/observable-array\");
    import pages = require(\"ui/page\");
    import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

    var viewModel: observable.Observable;

    export function pageLoaded(args: observable.EventData) {
        var page = <pages.Page>args.object;
        var items = new observableArray.ObservableArray();

        viewModel = new observable.Observable();

        for (var loop = 0; loop < 20; loop++) {
            items.push(\"Item \" + loop.toString());
        }

        viewModel.set(\"items\", items);
        viewModel.set(\"selectedIndex\", 15);

        page.bindingContext = viewModel;
    }

    export function dropDownOpened(args: EventData) {
        console.log(\"Drop Down opened\");
    }

    export function dropDownClosed(args: EventData) {
        console.log(\"Drop Down closed\");
    }

    export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
    }
    \n

    Usage in Angular

    \n
    Migration to 3.0+
    \n
      \n
    • Remove:
      • \n
    \n
    registerElement(\"DropDown\", () => require(\"nativescript-drop-down/drop-down\").DropDown);`
    \n
      \n
    • Import DropDownModule in NgModule:
      • \n
    \n
    import { DropDownModule } from \"nativescript-drop-down/angular\";
    //......
    @NgModule({
    \t//......
    \timports: [
            //......
    \t\tDropDownModule,
            //......
    \t],
        //......
    })
    \n
    Example Usage
    \n
    // main.ts
    import { NgModule } from \"@angular/core\";
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { platformNativeScriptDynamic } from \"nativescript-angular/platform\";
    import { DropDownModule } from \"nativescript-drop-down/angular\";
    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ],
        imports:      [
            NativeScriptModule,
            DropDownModule,
        ],
    })
    class AppComponentModule {
    }

    platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
    \n
    <!-- app.component.html -->
    <StackLayout>
        <GridLayout rows=\"auto, auto, *\"
                    columns=\"auto, *\">
            <DropDown #dd
                      backroundColor=\"red\"
    \t\t  itemsTextAlignment=\"center\"
                      [items]=\"items\"
                      [(ngModel)]=\"selectedIndex\"
                      (selectedIndexChanged)=\"onchange($event)\"
                      (opened)=\"onopen()\"
                      (closed)=\"onclose()\"
                      row=\"0\"
                      colSpan=\"2\">    </DropDown>
            <Label text=\"Selected Index:\"
                   row=\"1\"
                   col=\"0\"
                   fontSize=\"18\"
                   verticalAlignment=\"bottom\">    </Label>
            <TextField [text]=\"selectedIndex\"
                       row=\"1\"
                       col=\"1\">    </TextField>
        </GridLayout>
    </StackLayout>
    \n
    // app.component.ts
    import { Component } from \"@angular/core\";
    import { SelectedIndexChangedEventData } from \"nativescript-drop-down\";

    @Component({
        selector: \"my-app\",
        templateUrl:\"app.component.html\",
    })
    export class AppComponent {
        public selectedIndex = 1;
        public items: Array<string>;
     
        constructor() {
            this.items = [];
            for (var i = 0; i < 5; i++) {
                this.items.push(\"data item \" + i);
            }
        }

        public onchange(args: SelectedIndexChangedEventData) {
            console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
        }

        public onopen() {
            console.log(\"Drop Down opened.\");
        }

        public onclose() {
            console.log(\"Drop Down closed.\");
        }
    }
    \n
    Set the selectedIndex value in Angular
    \n

    Get an instance of the child drop down component like this:

    \n
    @ViewChild('dd') dropDown: ElementRef;
    // set the index programatically from the parent component
    this.dropDown.nativeElement.selectedIndex = <some number from code>
    \n

    Working with value and display members

    \n

    It is a common case that you want to have one thing displayed in the drop down and then get some backend value\ntied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida)\nand then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be\nset to either Array of objects or a custom object that implements getItem(index: number): any function and length proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario:

    \n
    import { ValueList } from \"nativescript-drop-down\";
    \n

    Then you can set the items property of the DropDown to an instance of ValueList:

    \n
    let dd = page.getViewById<DropDown>(\"dd\");
    let itemSource = new ValueList<string>([
        { value: \"FL\", display: \"Florida\" }, 
        { value: \"MI\", display: \"Michigan\" }
    ]);
    dd.items = itemSource;
    \n

    This enables you to do things like:
    \n1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with:

    \n
    dd.selectedIndex = itemSource.getIndex(\"FL\");
    \n

    2.You can get the backend value of what the user selected using:

    \n
    let selectedValue = itemSource.getValue(dd.selectedIndex);
    \n

    Demos

    \n

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    \n
    $ git clone https://github.com/j20mc/Nativescript-Danem-Drop-Down
    $ cd nativescript-Danem-Drop-Down
    $ npm install
    $ npm run demo-ios
    \n

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    \n

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-generate-pdf":{"name":"nativescript-generate-pdf","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-generate-pdf

    \n

    Generate pdf file with a webview and html.

    \n

    All you need to do is rendering your html with a webview and pass the webview to the plugin.

    \n

    For iOS, plugin returns the path of the generated PDF.

    \n

    For Android, it brings up the printer screen where you can save as PDF (Please note the printer screen does not work in simulator, you will need a real device).

    \n

    Installation

    \n
    tns plugin add nativescript-generate-pdf
    \n

    Screenshot

    \n

    \n

    >> Check out the generated pdf<<

    \n

    Usage

    \n

    Check out the demo folder.

    \n
    import { GeneratePdf } from 'nativescript-generate-pdf';

    function onWebViewLoaded(args: LoadEventData) {
        webView = (<WebView>args.object).nativeView;
        // For iOS, use the file path returned by createPdf.
        new GeneratePdf().createPdf(webView, 'MyPdfFileName');
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iqkeyboardmanager-ns":{"name":"nativescript-iqkeyboardmanager-ns","version":"1.0.3","license":{"type":"MIT"},"readme":"

    NativeScript IQKeyboardManager Plugin

    \n

    NativeScript wrapper for the popular IQKeyboardManager iOS framework, which provides an elegant solution for preventing the iOS keyboard from covering UITextView controls.

    \n

    \"Example

    \n

    Installation

    \n
    $ tns plugin add nativescript-iqkeyboardmanager
    \n

    Usage

    \n

    That's it! IQKeyboardManager takes care of all initialization when your app starts up by default.

    \n

    Documentation

    \n

    For more details on how IQKeyboardManager works, including more detailed API documentation, refer to the library's CocoaPod page.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-preprocessor":{"name":"svelte-native-preprocessor","version":"1.0.0","license":"MIT","readme":"

    Svelte Native Preprocessor

    \n

    A pre processor for Svelte-Native.

    \n

    It performs the following transforms to provide a better developer experience when using Svelte-Native:

    \n
      \n
    • [x] Changes bind:text="{email}" to text="{email}" on:textChanged="{e => email = e.value}"
      • \n
    \n

    Installation

    \n

    Using nativescript-webpack >= 5.0.0 add to your svelte.config.js

    \n
    const svelteNativePreprocessor = require(\"./svelte-native-preprocessor\");

    module.exports = {
        compilerOptions: {
            namespace: 'foreign'
        },
        preprocess: [svelteNativePreprocessor() /*, other preprocesser eg sveltePreprocessor() here */]
    }
    \n

    License

    \n

    MIT.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bytpher/tslint-ns-core":{"name":"@bytpher/tslint-ns-core","version":"1.0.1","license":"MIT","readme":"

    TSLint NativeScript Core

    \n

    Recommended tslint configuration for NativeScript Core applications.

    \n

    Requirements

    \n

    This package works with prettier for an quick and easy code format

    \n
    npm i -D prettier prettier-tslint pretty-quick
    \n

    Packages:

    \n
      \n
    • prettier: Prettier is an opinionated code formatter
      • \n
    • prettier-tslint: Formats your TypeScript using prettier followed by `tslint --fix``
      • \n
    • pretty-quick: Runs Prettier on your changed files.
      • \n
    \n

    Installation

    \n
    npm i -D @bytpher/tslint-ns-core
    \n

    Usage

    \n
    {
      \"extends\": [\"@bytpher/tslint-ns-core\"]
    }
    \n

    Pre-Commit Hook

    \n

    You can use husky to configure a pre-commit hook to run pretty-quick

    \n
    npm i -D husky
    \n

    Create a .huskyrc.json in the root of yor project and add the following configuration

    \n
    {
      \"hooks\": {
        \"pre-commit\": \"pretty-quick --staged\"
      }
    }
    \n

    This configuration will run pretty-quick before each commit and formatting the staged files allowing us a seamless code format between all developers working in the project

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-appbar":{"name":"nativescript-nbmaterial-appbar","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript implementation of the Material AppBarLayout

    \n

    The module implement AppBarLayout on both iOS and Android.\nThe layout extends the nativescript GridLayout.\nUse "nativescript-nbmaterial-coordinator" to make animation effects like sticky header or hide header on scroll.\nAppBarIcon and AppBarTitle extends nativescript Label.\nYou can use a font library like material-icons or font-awesome.

    \n
      <!--
    The markup in NativeScript apps contains a series of user interface components, each
    of which NativeScript renders with a platform-specific iOS or Android native control.
    You can find a full list of user interface components you can use in your app at
    https://docs.nativescript.org/ui/components.
    -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
    xmlns:app=\"nativescript-nbmaterial-appbar\" navigatingTo=\"onNavigatingTo\">
    \t <GridLayout rows=\"*\" columns=\"*\" id=\"root\">  
    \t\t<app:AppBarLayout columns=\"auto,*,auto,auto\" rows=\"auto,auto\" id=\"actionbar\">
    \t\t\t<app:AppBarIcon text=\"list\" col=\"0\"/>
    \t\t\t<app:AppBarTitle text=\"My Application\" col=\"1\"/>
    \t\t\t<app:AppBarIcon text=\"notifications\" col=\"2\"/>
    \t\t\t<app:AppBarIcon text=\"search\" col=\"3\" tap=\"openSearch\"/> 
    \t\t</app:AppBarLayout>  
    \t</GridLayout>
    </Page>

    }
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-physics-js":{"name":"nativescript-physics-js","version":"2.0.1","license":"MIT","readme":"

    PhysicsJS for NativeScript

    \n

    This is a NativeScript renderer of the PhysicsJS library.

    \n

    Installation

    \n
    tns plugin add nativescript-physics-js
    \n

    Usage

    \n

    In the XML markup (main-page.xml):

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
        <!-- Definte the container for the phisics scene -->
        <GridLayout id=\"container\" width=\"300\" height=\"300\" backgroundColor=\"lightgreen\">
        
            <!-- Label for meta info is note requiered -->
            <Label id=\"meta\"/>
        </GridLayout>
    </Page>
    \n

    In JavaScript (main-page.js):

    \n
    var Physics = require(\"nativescript-physics-js\");

    var init = false;
    function pageLoaded(args) {
        // Prevent double initialization
        if (init) {
            return;
        }
        
        // Get references to container and meta-info views
        var page = args.object;
        var container = page.getViewById(\"container\");
        var metaText = page.getViewById(\"meta\");
        
        // Create physics world and configure NS renderer
        var world = Physics();
        world.add(Physics.renderer('ns', {
            container: container,
            metaText: metaText,
            meta: true
        }));
        
        // Add bodies
        world.add(Physics.body('circle', {
            x: 80,
            y: 50,
            radius: 15,
            styles: { image: \"~/images/ns-logo.png\" }
        }));

        // Add behaviors
        world.add([
            Physics.behavior('edge-collision-detection', { aabb: Physics.aabb(0, 0, 300, 300) }),
            Physics.behavior('body-collision-detection'),
            Physics.behavior('body-impulse-response'),
            Physics.behavior('sweep-prune'),
            Physics.behavior('constant-acceleration') // Gravity
        ]);

        // Start ticking...
        world.on('step', function () { world.render() });
        setInterval(function () { world.step(Date.now()); }, 20);
    }
    exports.pageLoaded = pageLoaded;
    \n

    Examples

    \n

    Code of the demo here.

    \n

    More demos on the PhysicsJS site.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-woosim-printer-i350":{"name":"nativescript-woosim-printer-i350","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Woosim Printer

    \n

    \"npm

    \n

    This plugin integrate your nativescript app with Woosim WSP-i350 printer to print a normal text or a bmp.

    \n

    Prerequisites / Requirements

    \n

    You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

    \n

    Installation

    \n
    tns plugin add nativescript-woosim-printer-i350
    \n

    Usage

    \n

    Create Plugin instance

    \n
    let printer = new WoosimPrinterI350();
    \n

    Connect to the printer through:

    \n
    this.printer.connect(printerAddress); // example: \"00:07:80:3D:BC:D5\"
    \n

    To Print Normal Text use:

    \n
    printer.print(\"Hello World\");
    \n

    To Print a BMP image:

    \n
    printer.printImg(bmp);
    \n

    To Print Txt File:

    \n
    let documents = fs.knownFolders.currentApp();
    var myFile = documents.getFile(\"mytextfile.txt\");
    this.printer.printTextFile(myFile);
    \n

    for more information see the demo

    \n

    API Property

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertytypeDefaultDescription
    paperSizeenumPaperSizes.FourInchset the default paper size for the printer
    debugbooleanfalseset the plugin in debug mode
    \n

    API Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescriptionParams
    connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
    disconnect():voiddisconnect from a printer
    print(text: string): voidprint normal texttext : the text you want to print
    printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
    printTextFile(file: any): void;Print Txt fileFile: NS File
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-brother-printers":{"name":"nativescript-brother-printers","version":"1.8.0","license":"Apache-2.0","readme":"

    nativescript-brother-printers

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-brother-printers
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-black-and-white":{"name":"nativescript-image-black-and-white","version":"1.0.5","license":"Apache-2.0","readme":"

    nativescript-image-black-and-white

    \n

    This plugin allows you to put an image in black and white (also called gray scale filter). It is using native iOS and Android features, so it is very nice in terms of performance and it does not contain any third-party library so it is very small.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OriginalModified
    \"ios-before\"\"ios-after\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OriginalModified
    \"android-before\"\"android-after\"
    \n

    Installation

    \n
    tns plugin add nativescript-image-black-and-white
    \n

    Usage

    \n
    import { Image } from 'tns-core-modules/ui/image';
    import { ImageBlackAndWhite } from 'nativescript-image-black-and-white';

    const image: Image = ...; // Initialize or get your image
    const imageBlackAndWhite = new ImageBlackAndWhite();
    imageBlackAndWhite.blackAndWhite(image);
    \n

    Do not hesitate to look at the demo for a working example (screenshots come from there).

    \n

    API

    \n

    This library is very simple, you create a new instance of ImageBlackAndWhite, you call the only method which is blackAndWhite with a Nativescript Image as parameter.

    \n
    class ImageBlackAndWhite {
        blackAndWhite(img: Image): void;
    }
    \n

    Thanks

    \n

    Thanks to NativeScript team for the the plugin-seed and demo app template.

    \n

    Thanks to Brad Martin for its implementation of nativescript-image-filters.

    \n

    License

    \n

    Most of the code comes from NativeScript team (plugin-seed and demo app) :\nApache License Version 2.0, January 2004

    \n

    iOS implementation comes from nativescript-image-filters released by Brad Martin under MIT License.

    \n

    My implementation for Android is under WTFPL.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescriptvueuse":{"name":"nativescriptvueuse","version":"0.0.3","license":"MIT","readme":"

    Doc

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"digitaltown-nativescript-card-io":{"name":"digitaltown-nativescript-card-io","version":"1.0.1","license":"Apache-2.0","readme":"

    nativescript-card-io

    \n

    nativescript-card-io provides fast, easy credit card scanning in mobile apps.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-card-io
    \n

    Usage

    \n
    import { CardIo } from 'nativescript-card-io';

    let cardIo = new CardIo();

    cardIo.scan({
        android: {
            requireExpiry: true,
            requireCvv: true,
            requirePostalCode: false,
            returnCardImage: true
        }
    }).then((result: CreditCard) => {
        console.log(\"RESULT >>> \", result);
    }, error => {
        console.log(\"ERROR >>> \", error);
    });
    \n

    API

    \n

    scan(options): Promise;

    \n

    Start the scanning process

    \n

    Options format

    \n

    Everything that has '?' is optional

    \n

    Scan Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    android?: AndroidOptionSet Android Options
    ios?: anySet iOS Options
    \n

    Android Options

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    noCamera?: booleanDefaults to false.If set, the card will not be scanned with the camera.
    requireExpiry?: booleanDefaults to false.If set to false, expiry information will not be required.
    unblurDigits?: numberDefaults to -1 (no blur).How many of the Card number digits NOT to blur on the resulting image. Setting it to 4 will blur all digits except the last four.
    scanExpiry?: booleanDefaults to true.If set to true, and requireExpiry is true, an attempt to extract the expiry from the card image will be made.
    requireCvv?: booleanDefaults to false.If set, the user will be prompted for the card CVV.
    requirePostalCode?: booleanDefaults to false.If set, the user will be prompted for the card billing postal code.
    restrictPostalCodeToNumericOnly?: booleanDefaults to false.If set, the postal code will only collect numeric input. Set this if you know the expected country's postal code has only numeric postal codes.
    requireCardholderName?: booleanDefaults to false.If set, the user will be prompted for the cardholder name.
    suppressManualEntry?: booleanDefaults to false.Removes the keyboard button from the scan screen.
    useCardioLogo?: booleanDefaults to false.If set, the card.io logo will be shown instead of the PayPal logo.
    hideCardioLogo?: booleanDefaults to false.When set to true the card.io logo will not be shown overlaid on the camera.
    languageOrLocale?: stringThe preferred language for all strings appearing in the user interface. If not set, or if set to null, defaults to the device's current language setting. Can be specified as a language code ("en", "fr", "zh-Hans", etc.) or as a locale ("en_AU", "fr_FR", "zh-Hant_TW", etc.).
    usePaypalActionbarIcon?: booleanUse the PayPal icon in the ActionBar.
    keepApplicationTheme?: booleanIf this value is set to true, and the application has a theme, the theme will be set to the theme of the application.
    guideColor?: stringDefaults to green.Changes the color of the guide overlay on the camera.
    suppressConfirmation?: booleanIf this value is set to true the user will not be prompted to confirm their card number after processing.
    suppressScan?: booleanOnce a card image has been captured but before it has been processed, this value will determine whether to continue processing as usual.
    returnCardImage?: booleanIf this value is set to true the card image will be return as ImageSource
    \n

    Result Option

    \n

    Credit Card

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    cardType: CardTypeGet Card CardType Details
    formattedCardNumber: stringGet the formatted Card Number
    lastFourDigitsOfCardNumber: stringGet the last Four Digit on the Card Number
    redactedCardNumber: stringGet Redacted Card Number
    isExpiryValid: booleanGet a boolean which indicate the validity of the Card
    content: stringGet the Card Details
    \n

    Card Type

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    cvvLength: numberGet cvv number length (4 for Amex, 3 for others, -1 for unknown)
    displayName(languageOrLocale: string): stringGet the Card Display Name
    imageBitmap: anyGet The ImageBitmap image after scan if returnCardImage is true
    numberLength: numberGet Card Number Length e.g(15 for AmEx, -1 for unknown, 16 for others.)
    content: stringGet Card Type Details
    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-modal":{"name":"nativescript-image-modal","version":"2.1.5","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-image-modal
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-sdk":{"name":"nativescript-google-places-sdk","version":"2.1.1","license":"MIT","readme":"

    NativesScript Google Place SDK

    \n

    A NativesScript plugin for Google Places SDK.

    \n

    Documentation:

    \n\n

    Requirements

    \n

    Enable Google Places API if you have not already done so.

    \n

    Configure skip library check in tsconfig.json

    \n
    {
      \"compilerOptions\": {
        ...
        \"skipLibCheck\": true
        ...
      }
    }
    \n

    Installation

    \n
    tns plugin add nativescript-google-place-sdk
    \n

    Usage

    \n

    NativeScript

    \n

    Initialize the Place SDK

    \n

    app.ts

    \n
    ...
    Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
    ...
    \n

    Show the Autocomplete UI

    \n

    my-awesome-page.xml

    \n
    <Button text=\"Search\" tap=\"search()\"></Button>
    \n

    my-awesome-page.ts

    \n
    export function search(): void {
        PlaceAutocomplete.show()
        .then(
            (result) => {
                if (result) {
                    console.log('Place Details:', result);
                }
            },
            (err) => console.error(err)
        );
    }
    \n

    NativeScript + Angular

    \n

    Initialize the Place SDK

    \n

    app.component.ts

    \n
    @Component({
        moduleId: module.id,
        selector: 'ns-app',
        templateUrl: 'app.component.html'
    })
    export class AppComponent implements OnInit {
        ngOnInit(): void {
            Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
        }
    }
    \n

    Show the Autocomplete UI

    \n

    my-awesome.component.html

    \n
    <Button [text]=\"Search\" (tap)=\"search()\"></Button>
    \n

    my-awesome.component.ts

    \n
    @Component({
        moduleId: module.id,
        selector: 'ns-awesome',
        templateUrl: 'my-awesome.component.html'
    })
    export class MyAwesomeComponent {
        search(): void {
            PlaceAutocomplete.show()
            .then(
                (result) => {
                    if (result) {
                        console.log('Place Details:', result);
                    }
                },
                (err) => console.error(err)
            );
        }
    }
    \n

    API

    \n

    Place

    \n

    initialize(apiKey)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    apiKeyundefinedGoogle Place API key
    \n

    Example

    \n
    Place.initialize('GOOGLE_PLACE_API_KEY');
    \n

    Autocomplete

    \n

    show(options)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    fieldsundefinedDefine the types of field to retrieve. By default will retrieve all types.
    iosundefinediOS related options
    ios.appearanceundefinediOS appearance options. See documentation for more info.
    ios.appearance.primaryTextColorundefinedPrimary text color
    ios.appearance.primaryTextHighlightColorundefinedPrimary text highlight color
    ios.appearance.secondaryTextColorundefinedSecondary text color
    ios.appearance.tableCellBackgroundColorundefinedTable cell background color
    ios.appearance.tableCellSeparatorColorundefinedTable cell separator color
    ios.appearance.tintColorundefinedTint color
    locationBias.southwestundefinedSouthwest bound
    locationBias.northeastundefinedNortheast bound
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FieldData TypeDescription
    addressstringAddress
    idstringId
    lat_lngobjectCoordinates
    namestringPlace name
    phone_numberstringPhone number
    price_levelnumberPricing
    ratingnumberRating
    user_ratings_totalnumberTotal ratings
    utc_offset_minutesnumberUTC offset in minutes
    viewportobjectViewport
    website_uristringURL
    \n

    Example

    \n
    PlaceAutocomplete.show({ fields: ['name'] })
    .then(
        (result) => {
            if (result) {
                console.log('Place Details:', result);
            }
        },
        (err) => console.error(err)
    );
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ezaudio":{"name":"nativescript-ezaudio","version":"1.1.7","license":{"type":"MIT","url":"https://github.com/NathanWalker/nativescript-ezaudio/blob/master/LICENSE"},"readme":"

    \"alt

    \n

    A NativeScript plugin for the simple, intuitive audio framework for iOS.\nEZAudio

    \n\n

    Install

    \n
    npm install nativescript-ezaudio --save
    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:ez="nativescript-ezaudio" on the Page element

    \n
    // main-page.xml
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:ez=\"nativescript-ezaudio\"
      loaded=\"pageLoaded\">
      <AbsoluteLayout width=\"100%\" height=\"100%\">
        <ez:AudioPlot 
          class=\"audioPlot\" 
          plotColor=\"{{audioPlotColor}}\" 
          plotType=\"{{audioPlotType}}\" 
          fill=\"{{audioPlotFill}}\" 
          mirror=\"{{audioPlotMirror}}\" 
          bufferData=\"{{audioPlotBufferData}}\" />
        <Button text=\"{{btnTxt}}\" tap=\"{{toggleCurrentTrack}}\" />
      </AbsoluteLayout>
    </Page>

    // app.css
    .audioPlot {
      width:100%;
      height:100%;
      background-color: #000;
      top:0;
      left:0;
    }
    button {
      font-size: 22;
      horizontal-align: center;
      margin:20px 0;
      color:#FFF803;
      top:20;
      left:0;
      width:100%;
    }

    // main-page.ts
    import {AudioDemo} from \"./main-view-model\";

    function pageLoaded(args) {
      var page = args.object;
      page.bindingContext = new AudioDemo(page);
    }
    exports.pageLoaded = pageLoaded;

    // main-view-model.ts
    import {Observable} from 'data/observable';
    import {TNSEZAudioPlayer} from 'nativescript-ezaudio';

    export class AudioDemo extends Observable {
      public btnTxt: string = 'Play Track';
      
      // AudioPlot
      public audioPlotColor: string = '#FFF803';
      public audioPlotType: string = 'buffer';
      public audioPlotFill: boolean = true;
      public audioPlotMirror: boolean = true;
      public audioPlotBufferData: any;
      
      // internal
      private _player: any;
      private _currentTrackIndex: number = 0;
      private _tracks: Array<string> = [
        `any-mp3-you-like.mp3`,
      ];

      constructor(page: any) {
        super();
        this._player = new TNSEZAudioPlayer(true);
        this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
          this.set('audioPlotBufferData', {
            buffer: eventData.data.buffer,
            bufferSize: eventData.data.bufferSize
          });
        });
      }

      public toggleCurrentTrack() {
        this._player.togglePlay(this._tracks[this._currentTrackIndex]);
        this.toggleBtn();  
      }
      
      private toggleBtn() {
        this.set(`btnTxt`, `${this._player.isPlaying() ? 'Stop' : 'Play'} Track`);
      }
    }
    \n

    Screenshots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 1Sample 2
    \"Sample1\"\"Sample2\"
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Sample 3Sample 4
    \"Sample3\"\"Sample4\"
    \n

    TNSEZAudioPlayer

    \n

    AudioPlayer based on EZAudioPlayer.

    \n

    Creating:

    \n
    // Option 1: simple
    this._player = new TNSEZAudioPlayer();

    // Option 2: advanced
    // passing true to constructor will let the player know it should emit events
    this._player = new TNSEZAudioPlayer(true);

    // it allows you to listen to events like so:
    this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
      this.set('audioPlotBufferData', {
        buffer: eventData.data.buffer,
        bufferSize: eventData.data.bufferSize
      });
    });
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    togglePlay(fileName?: string, reloadTrack?: boolean): voidAllows toggle play/pause on a track as well as reloading the current track or reloading in a new track. First time will always load the track and play. fileName represents the path to the file in your resources. reloadTrack can be used to reload current track or load a new track.
    pause(): voidPause track
    isPlaying(): booleanDetermine whether player is playing a track
    duration(): numberLength in seconds
    formattedDuration(): stringFormatted duration in '00:00'
    totalFrames: numberTotal number of frames in the loaded track
    formattedCurrentTime: stringFormatted current time in '00:00'
    setCurrentTime(time: number): voidSet the current time via a frame number
    seekToFrame(frame: number): voidSeek playhead to a given frame number
    volume(): numberGet the current volume
    setVolume(volume: number): voidSet the volume. Must be between 0 - 1.
    pan(): numberGet current pan settings
    setPan(pan: number): voidSet pan left/right. Must be between -1 (left) and 1 (right). 0 is default (center).
    device(): anyGet current output device
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    audioBufferWhen audio file is playing, get the buffer and bufferSize to set an AudioPlot's bufferData
    positionCurrent frame number
    reachedEndWhen the end of the file is reached
    changeAudioFileWhen the audio file is changed or set
    changeOutputWhen the output device is changed
    changePanWhen the pan is changed
    changeVolumeWhen the volume is changed
    changePlayStateWhen the player state changes, ie. play/pause
    seekedWhen the audio file has been seeked to a certain frame number
    \n

    TNSEZRecorder

    \n

    Recorder based on EZRecorder.

    \n

    Creating:

    \n
    this._recorder = new TNSEZRecorder();

    // it allows you to listen to events like so:
    this._recorder.delegate().audioEvents.on('audioBuffer', (eventData) => {
      this.set('audioPlotBufferData', {
        buffer: eventData.data.buffer,
        bufferSize: eventData.data.bufferSize
      });
    });
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    record(filePath: string): voidRecord a .m4a file. Pass in an absoulte filePath.
    stop(): voidStop recording
    isRecording(): booleanDetermine whether recorder is recording
    deviceInputs(): Array<any>Collection of input devices
    setDevice(device:any): voidSet the input device
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    audioBufferWhile recording, get the buffer and bufferSize to set an AudioPlot's bufferData
    recordTimeCurrent recording time
    \n

    UI Components

    \n

    AudioPlot

    \n

    Displays an audio waveform and provides attributes to modify it's display.

    \n

    Example:

    \n
    <ez:AudioPlot plotColor=\"#fff\" plotType=\"buffer\" fill=\"true\" mirror=\"true\" bufferData=\"{{audioPlotBufferData}}\" />
    \n

    Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    plotColor: stringColor of waveform. Any rgb hex value, ie. #fff
    plotType: stringbuffer or rolling
    fill: booleanMakes waveform solid with color. When false, it appears more like lines.
    mirror: booleanWhether to mirror the waveform top/bottom.
    bufferData: ObjectAn Object representing the audio file's buffer and bufferSize. See example implementation
    \n

    Contributors

    \n\n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"imdapro-nativescript-http-formdata":{"name":"imdapro-nativescript-http-formdata","version":"2.0.1","license":"Apache-2.0","readme":"

    A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed.

    \n

    Versions

    \n

    [2.0.0]\nUpgraded to NS 6.2.0. Fixed Kotlin issue. More here

    \n

    [1.6.0] Added common response in iOS and Android instead returned by native APIs.\nThanks to virtualbjorn

    \n

    [1.5.0] Now supports custom headers

    \n

    Add the plugin

    \n
    tns plugin add nativescript-http-formdata
    \n

    Dependencies

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    okhttp3OMGHTTPURLRQ
    \n

    TypeScript

    \n
    import { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';
    \n

    use the ImagePicker plugin or any other.\nhttps://github.com/NativeScript/nativescript-imagepicker

    \n
        private test() {
            let context = imagepicker.create({
                mode: \"single\" // use \"multiple\" for multiple selection
            });
            context.authorize()
            .then(function() {
                return context.present();
            })
            .then((selection) => {
              let item = selection[0];
              //UIImage for iOS and android.graphics.Bitmap for Android
              item.getImageAsync(async (image, error) => {
                let fd = new TNSHttpFormData();
        
                //create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name
                //so you can get it on server. Check below how to grab it in ASP.Net MVC
                let params = [];

                let imageData: any;
                if(image) {
                    if(image.ios) {
                        imageData = UIImagePNGRepresentation(image);
                    } else {
                        //can be one of these overloads https://square.github.io/okhttp/3.x/okhttp/okhttp3/RequestBody.html
                        let bitmapImage: android.graphics.Bitmap = image;
                        let stream = new java.io.ByteArrayOutputStream();
                        bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                        let byteArray = stream.toByteArray();
                        bitmapImage.recycle();

                        imageData = byteArray;
                    }
                }
                let param: TNSHttpFormDataParam = {
                    data: imageData,
                    contentType: 'image/png',
                    fileName: 'test.png',
                    parameterName: 'file1'
                };
                params.push(param);
                let param2: TNSHttpFormDataParam = {
                  data: \"John Doe\",
                  parameterName: \"firstName\"
                };
                params.push(param2);
        
                try {
                    const response: TNSHttpFormDataResponse = await fd.post('http://10.10.10.149:10025/home/fileupload', params, {
                        headers: {
                            test1: \"test1 value\",
                            \"x-version-no\": \"2.0\"
                        }
                    });
                    console.log(response);
                } catch (e) {
                    console.log(e);
                }
              });
            }).catch(function (e) {
                console.log(e);
            });
        }
    \n

    Now on server to grab the file(s) in ASP.Net MVC, you can follow https://stackoverflow.com/a/16256106/859968 or following

    \n
    [HttpPost]
    //file1 and file2 are parameters name as given in NativeScript object. They must match
    public ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)
    {
        //grab your headers
        var headers = Request.Headers;
        if (file1 != null)
        {
            string pic = System.IO.Path.GetFileName(file1.FileName);
            string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
            // file is uploaded
            file1.SaveAs(path);
        }
        if (file2 != null)
        {
            string pic = System.IO.Path.GetFileName(file2.FileName);
            string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);
            // file is uploaded
            file2.SaveAs(path);
        }

        // after successfully uploading redirect the user
        return RedirectToAction(\"Index\", \"Home\");
    }
    \n

    TNSHttpFormDataResponse Properties

    \n
      \n
    • headers - response header
      • \n
    • statusCode - http status code (number)
      • \n
    • statusMessage - http status code message (string)
      • \n
    • body - response body (JSON Parsed if is a json, raw string else)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-image-cache":{"name":"@ticnat/nativescript-image-cache","version":"1.0.7","license":"Apache-2.0","readme":"

    #Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDImageCacheCache library for iOS and Facebook Fresco for android.\nSupports local Images.

    \n

    License

    \n

    Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (m.opada.albosh@gmail.com).

    \n

    Installation NS8

    \n
    tns plugin add @ticnat/nativescript-image-cache\n
    \n

    Installation NS7

    \n
    tns plugin add@ticnat/nativescript-image-cache@1.0.1\n
    \n

    ** Tested on NativeScript 7.+ on VanillaJS, if any problems while running on previous versions, please place an issue.**

    \n

    Usage in Vue

    \n

    In main.js:

    \n
    const Vue = require('nativescript-vue'); // you already have something like this
    Vue.registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache); // now add this
    \n

    Then in any .vue file:

    \n
    <OtherMarkup>
      <ImageCache src=\"https://somedomain.com/images/img-file.png\" stretch=\"aspectFill\"></ImageCache>
    </OtherMarkup>
    \n

    Usage in Angular

    \n
    \n

    ⚠️ This was changed in plugin version 5.0.0!

    \n
    \n

    In app.module.ts, or any specific module you want to use this plugin:

    \n
    import { registerElement } from 'nativescript-angular';
    registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache);
    \n

    After initialisation, the markup tag <ImageCache></ImageCache> can be used in templates of components.

    \n
    <GridLayout rows=\"*\" columns=\"*\">
    \t<ImageCache stretch=\"fill\" row=\"0\" col=\"0\" placeholder=\"localPlaceholderImgorResUrl\" src=\"#your image url here\"> </ImageCache>
    </GridLayout>
    \n

    Caching the images

    \n
      \n
    • Add the element ImageCache with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here -https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • Get the reference to the ImageCache view by using angular template variable references and @ViewChild decorator and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    • Access the reference only after view is initialised, i.e. after ngAfterViewInit is called, getting the reference in ngOnInit can return undefined ( for detailed info, read about angular component lifecycle hooks ).
      • \n
    \n

    The Markup

    \n
        <ImageCache stretch="fill" row="0"\n                 col="0"\n                 src="#your image url" #container>\n    </ImageCache>\n
    \n

    The Backing Component Class Snippet

    \n
         @ViewChild("container") container : any;\n     ngAfterViewInit(){\n          isLoading = this.container.nativeElement.isLoading;\n     }\n
    \n

    Clearing the cache

    \n

    Import the module, call the method clearCache() , default time is for SDImageCacheCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.

    \n
     import {clearCache} from "@ticnat/nativescript-image-cache";\n clearCache();\n
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    import {setCacheLimit} from "@ticnat/nativescript-image-cache";\n/* Add the code component at a a proper hook */\nvar cacheLimitInDays : number = 7;\nsetCacheLimit(cacheLimitInDays);\n
    \n

    Usage in VanillaJS/TypeScript apps

    \n

    IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

    \n

    Initialising on android - in app.js

    \n
    var imageCache = require("@ticnat/nativescript-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n            imageCache.initialize();\n    };\n}\n
    \n

    After initialisation, add the namespace attribute xmlns:IC="@ticnat/nativescript-image-cache" to the opening page tag of xml. The markup tag <IC:ImageCache></IC:ImageCache> should be used to denote images.

    \n
        <Page xmlns:IC=\"@ticnat/nativescript-image-cache\">
            <GridLayout rows='*' columns='*'>
                <IC:ImageCache stretch=\"fill\" row=\"0\"
                 col=\"0\"  id=\"my-image-1\" placeholder=\"urlToLocalPlaceholderImage\"
                 src=\"#image-url\">
                 </IC:ImageCache>
            </GridLayout>
        </Page>
    \n

    Caching the images

    \n
      \n
    • To the opening page tag of the xml, add\nxmlns:IC="@ticnat/nativescript-image-cache".
      • \n
    • Add the element IC:ImageCache with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here -https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • placeholder accepts a local image url in file path (~/) or resource (res://) form
      • \n
    • placeholderStretch can be set for only android to specify the stretch for placeholder image, values same as that of stretch. For iOS, no separate stretch property for placeholder (native library does not seem to support).
      • \n
    \n

    Check if image is loading

    \n
      \n
    • To check if an image is loading, get the reference to the ImageCache view by using page.getViewById("myImageCache") , and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    \n
    var imageCacheModule=require(\"@ticnat/nativescript-image-cache\");

    var myImage1 = page.getViewById(\"my-image-1\"),
        isLoading = myImage1.isLoading;
    \n

    Clearing the cache

    \n
      \n
    • Require the module, call the method clearCache() , default time for SDImageCacheCache is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.
      • \n
    \n
    var imageCacheModule=require(\"@ticnat/nativescript-image-cache\");
    imageCacheModule.clearCache();
    \n

    Setting custom cache purge time

    \n

    Default cache purge time can be specified in number of days.

    \n
    var imageCache = require("@ticnat/nativescript-image-cache");\n
    \n

    /_ Add the code component at a a proper hook _/\nvar cacheLimitInDays = 7;\nimageCache.setCacheLimit(cacheLimitInDays);

    \n

    for android, you need to initialize in the application onlaunch event before clearing the cache

    \n

    Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: m.opada.albosh@gmail.com to discuss project details.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-share-file":{"name":"@martinbuezas/nativescript-share-file","version":"3.0.0","license":"Apache-2.0","readme":"

    @martinbuezas/nativescript-share-file

    \n
    ns plugin add @martinbuezas/nativescript-share-file
    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from 'nativescript-share-file';
        import * as fs from 'tns-core-modules/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    intentTitle: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martin-juul/nativescript-astreamer":{"name":"@martin-juul/nativescript-astreamer","version":"1.0.0","license":"MIT","readme":"

    nativescript-astreamer

    \n
    \n

    Forked from https://github.com/nstudio/nativescript-audio

    \n

    Changes

    \n
      \n
    • Removed recording capability
      • \n
    • Fixed iOS player
      • \n
    \n

    Installation

    \n

    tns plugin add nativescript-astreamer

    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Usage

    \n

    TypeScript Example

    \n
    import { NSAudioPlayer } from 'nativescript-astreamer';

    export class YourClass {
      private player: NSAudioPlayer;

      constructor() {
        this.player = new NSAudioPlayer();
        this.player.debug = true; // set true to enable TNSPlayer console logs for debugging.

        (async () => {
          await this.player.initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })

          // iOS: duration is in seconds
          // Android: duration is in milliseconds
          const duration = this.player.getAudioTrackDuration();
          console.log(`duration: ${duration}`);
         })();
      }

      public togglePlay() {
        if (this.player.isAudioPlaying()) {
          this.player.pause();
        } else {
          this.player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    API

    \n

    Player

    \n

    NSAudioPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    NSAudioPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    MIT

    \n

    Demo App

    \n

    :no_entry_sign:

    \n

    The demo has not been migrated yet.

    \n
      \n
    • fork/clone the repository
      • \n
    • cd into the src directory
      • \n
    • execute npm run demo.android or npm run demo.ios (scripts are located in the scripts of the package.json in the src directory if you are curious)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-youtube":{"name":"nativescript-open-youtube","version":"1.2.3","license":"MIT","readme":"

    NativeScript Open Youtube

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-open-youtube
    \n

    Usage

    \n
    JavaScript
    \n
    // require the plugin
    var Youtube = require(\"nativescript-open-youtube\").Youtube;

    // instantiate the plugin
    var youtube = new Youtube();

    youtube.open('VypbgNAsqos');
    \n
    TypeScript
    \n
    // require the plugin
    import { Youtube } from \"nativescript-open-youtube\";

    // instantiate the plugin
    let youtube = new Youtube();

    youtube.open('VypbgNAsqos');
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pixi":{"name":"nativescript-pixi","version":"1.0.0-alpha1","license":"Apache-2.0","readme":"

    nativescript-pixi

    \n

    \"npm\"\n\"npm\"\n\"Build

    \n

    Installation

    \n
    npm i three nativescript-pixi
    \n

    Usage

    \n
    <GridLayout width=\"100%\" height=\"100%\">
             <canvas:TNSCanvas width=\"100%\" height=\"100%\" id=\"canvas\" ready=\"onReady\"/>
    </GridLayout>
    \n
    import * as PIXI from \"pixi.js\";
    import { TNSPIXIApplication } from \"nativescript-pixi\";
    // Create the Application by passing the canvas view object to it
     function onReady(args) {
       const canvas = args.object;
       const app = new TNSPIXIApplication({
               canvas,
               backgroundColor: 0x1099bb,
           });
           app.loader.add(\"bg_grass\", \"~/assets/images/bg_grass.jpg\").load(build);
       
           function build() {
               // Create a new texture
               const texture = app.loader.resources.bg_grass.texture;
       
               // Create the simple plane
               const verticesX = 10;
               const verticesY = 10;
               const plane = new PIXI.SimplePlane(texture, verticesX, verticesY);
       
               plane.x = 100;
               plane.y = 100;
       
               app.stage.addChild(plane);
       
               // Get the buffer for vertice positions.
               const buffer = plane.geometry.getBuffer(\"aVertexPosition\") as any;
       
               // Listen for animate update
               app.ticker.add((delta) => {
                   // Randomize the vertice positions a bit to create movement.
                   for (let i = 0; i < buffer.data.length; i++) {
                       buffer.data[i] += Math.random() - 0.5;
                   }
                   buffer.update();
               });
           }
    }
    \n

    E.G Output

    \n

    \"Output\"

    \n

    E.G Output

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-instagram-share":{"name":"nativescript-instagram-share","version":"1.0.5","license":"Apache-2.0","readme":"

    Nativescript Instagram Share(Currently for Android)

    \n

    Instagram share plugin will allow you to directly share image to instagram app.

    \n

    Requirements

    \n

    working only for android

    \n

    Installation

    \n
    tns plugin add nativescript-instagram-share
    \n

    TypeScript support

    \n

    And do yourself a favor by adding TypeScript support to your nativeScript app:

    \n
    tns install typescript
    \n

    Now you can import the plugin as an object into your .ts file as follows:

    \n
    import { shareInstagram } from 'nativescript-instagram-share';
    \n

    Usage

    \n
    ```\n    import * as imageSource from "tns-core-modules/image-source";\n    let url=imageUrl; //image url if you want to share remote image\n    let imageSrc:imageSource.ImageSource;\n    getImage(url).then((r)=> {\n        //// Argument (r) is ImageSource!\n        console.log("Image download  complete")\n        imageSrc=r;\n    }, (e)=> {\n        //// Argument (e) is Error!\n    });\n    shareInstagram(imageSrc).then((r)=>{\n        console.log("instagram open succcessfully");\n    }).catch((e)=>{\n        console.log("instagram is not installed");\n    });\n```\n
    \n

    ToDo

    \n

    implement IOS version.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pcl-ingenico":{"name":"nativescript-pcl-ingenico","version":"1.0.4","license":"Apache-2.0","readme":"

    Nativescript PCL - Ingenico AddOn

    \n

    Este es un plugin creado por Netcom S.A.S para la conexión y comunicación entre dispositivos Ingenico y aplicaciones realizadas con Nativescript.\nSe implementó el Framework para iOS: Add-on PCL for iOS distribuido por Ingenico.

    \n

    Installación

    \n

    Para implementar el plugin en un proyecto de Nativescript se debe ejecutar el siguiente código:

    \n
    tns plugin add nativescript-pcl-ingenico
    \n

    Uso

    \n

    Se puede hacer el llamado de la librería realizando la importación de la siguiente manera

    \n
    ```javascript\nimport * as PCLIngenico from "nativescript-pcl-ingenico";\n```)\n
    \n

    API

    \n

    TODO

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    Licencia

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-nearby":{"name":"nativescript-google-nearby","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript Google Nearby plugin (Un Official)

    \n

    Expose the basic P2P messaging provided by Google Nearby within a Nativescript plugin, currently we only support iOS but Android support is pending.

    \n

    Installation

    \n
    tns plugin add nativescript-google-nearby
    \n

    Usage

    \n

    API

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sfamc/nativescript-microsoft-appcenter":{"name":"@sfamc/nativescript-microsoft-appcenter","version":"1.0.2","license":"Apache-2.0","readme":"

    @sfamc/nativescript-microsoft-appcenter

    \n
    ns plugin add @sfamc/nativescript-microsoft-appcenter
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hockey-sdk":{"name":"nativescript-hockey-sdk","version":"1.2.0","license":"MIT","readme":"

    HockeyApp SDK for NativeScript

    \n

    A NativeScript plugin for the HockeyApp SDK (iOS and Android)

    \n
    \n

    This plugin installs the HockeyApp SDK in NativeScript projects and provides a common API for using in iOS and Android projects.

    \n

    How to use

    \n

    Run the following command in the root of your project:

    \n
    $ tns plugin add nativescript-hockey-sdk
    \n

    The SDK wrapper and init mechanism is shamelessly copied from the Fabric plugin. Before running an app with this plug-in, you will need an APP_ID from the HockeyApp service. Visit the HockeyApp website to obtain a key for your app. Enter that key in the AndroidManifest.xml or Info.plist.

    \n

    iOS

    \n

    Add the HockeyApp APP_ID to the /app/App_Resources/iOS/Info.plist file:

    \n
    <key>HockeyAppId</key>
    <string>${APP_ID}</string>
    \n

    The iOS version of this plugin uses the HockeyApp SDK CocoaPod. See the HockeyApp SDK CocoaPod docs for additional configuration options.

    \n

    NOTE: As of version 1.2.0, this plugin requires XCode 8.3+. If you use an older version of XCode, you may see invalid bitcode version errors when trying to build NativeScript projects that include this plugin.

    \n

    Using build.xcconfig

    \n

    On iOS, you also have the option of putting your HockeySDK APP_ID in the build.xcconfig file rather than directly embedding in Info.plst. This can help if, for example, you want to avoid putting SDK keys in source control.

    \n

    Using the Info.plist syntax above with the ${APP_ID} key, simply add this line to build.xcconfig:

    \n
    APP_ID = YOUR-HOCKYSDK-APP-ID
    \n

    During builds, the value from build.xcconfig will replace the ${APP_ID} key in Info.plist.

    \n

    Android

    \n

    Add the HockeyApp APP_ID to the /app/App_Resources/Android/AndroidManifest.xml file:

    \n
    <meta-data android:name=\"net.hockeyapp.android.appIdentifier\" android:value=\"${APP_ID}\" />
    \n

    Usage

    \n

    After the plug-in has been installed and the APP_ID has been configured, simply import and init the plugin.

    \n
    import { HockeyApp } from 'nativescript-hockey-sdk';
    ...
    HockeyApp.init();
    HockeyApp.trackEvent(\"LOG_IN\");
    \n

    To init on app launch, import and init in your app.ts or app.js file in the launchEvent handler:

    \n
    app.on(app.launchEvent, function(context) {
        HockeyApp.init();
    });
    \n

    If you're using Angular, you could alternatively use the AppModule constructor:

    \n
    export class AppModule {
      constructor() {
        HockeyApp.init();
        HockeyApp.trackEvent(\"LAUNCH\");
      }
    }
    \n

    Breaking Changes

    \n

    v1.0.0

    \n
      \n
    • APP_ID key now expected in iOS/Android configuration files
      • \n
    \n

    TODOS

    \n
      \n
    • Add TypeScript definitions for CocoaPod types
      • \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-share-file":{"name":"@knotes/nativescript-share-file","version":"2.0.1","license":"Apache-2.0","readme":"

    Nativescript Share File

    \n

    Send/Share files to other apps.

    \n

    Android Intent, IOS InteractionController:

    \n

    .

    \n

    Installation

    \n

    Install the plugin in your app.

    \n
    npm install nativescript-share-file
    \n

    Usage

    \n

    Info: Shared files should be in the documents path.

    \n
        import { ShareFile } from 'nativescript-share-file';
        import * as fs from 'tns-core-modules/file-system';

        export class TestClass{

            shareFile;
            fileName;
            documents;
            path;
            file;

            constructor() {

                this.fileName = 'text.txt';
                this.documents = fs.knownFolders.documents();
                this.path = fs.path.join(this.documents.path, this.fileName);
                this.file = fs.File.fromPath(this.path);
                this.shareFile = new ShareFile();

                this.shareFile.open( { 
                    path: this.path, 
                    intentTitle: 'Open text file with:', // optional Android
                    rect: { // optional iPad
                        x: 110,
                        y: 110,
                        width: 0,
                        height: 0
                    },
                    options: true, // optional iOS
                    animated: true // optional iOS
                });
            }
        }
    \n

    Arguments

    \n

    path

    \n

    Path to the file which will be shared.

    \n

    String: Required

    \n

    intentTitle

    \n

    Title for the intent on Android.

    \n

    String: (Optional)\nDefault: Open file:.

    \n

    rect

    \n

    Positioning the view for iPads. On iPhones it's always shown on the bottom.

    \n

    Object: (Optional)\nDefault: {x: 0, y: 0, width: 0, height: 0 }.

    \n

    options

    \n

    Show additional opening options for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n

    animated

    \n

    Opening animation for iOS devices.

    \n

    Boolean: (Optional)\nDefault: false.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ignacioplugins/nativescript-aws-cognito":{"name":"@ignacioplugins/nativescript-aws-cognito","version":"1.0.8","license":"Apache-2.0","readme":"

    @ignacioplugins/nativescript-aws-cognito

    \n
    ns plugin add @ignacioplugins/nativescript-aws-cognito
    \n

    This is a port of https://github.com/papmodern/nativescript-cognito so that it works with NS 8\nGreat work @papmodern!

    \n

    Usage

    \n

    See demo apps

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-slideshow":{"name":"nativescript-na-slideshow","version":"1.5.0","license":"MIT","readme":"

    NativeScript NA Slideshow plugin

    \n

    NOTE! Android is currently not supported.

    \n

    Installation

    \n

    $ tns plugin add nativescript-na-slideshow

    \n

    Usage

    \n

    XML

    \n

    Slides can be added manually inside the XML as below:

    \n
    <AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\">
      <GridLayout backgroundColor=\"#ffffff\">
        <Label text=\"Slide 1\" horizontalAlignment=\"center\" />
      </GridLayout>
      <GridLayout backgroundColor=\"#f2f2f2\">
        <Label text=\"Slide 2\" horizontalAlignment=\"center\" />
      </GridLayout>
      <GridLayout backgroundColor=\"#ffffff\">
        <Label text=\"Slide 3\" horizontalAlignment=\"center\" />
      </GridLayout>
    </AbsoluteLayout>
    \n

    It is important that the slide container is an AbsoluteLayout or else problems will occur. Slides can also, instead of being static like above, be created using an ObservableArray. To do this, the container has to either stay empty - as such:

    \n
    <AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\" />
    \n

    … Or an itemTemplate can be initiated through a Repeater:

    \n
    <AbsoluteLayout id=\"slideShow\" loaded=\"load_slideShow\">
      <Repeater items=\"{{ slides }}\">
        <Repeater.itemTemplate>
          <GridLayout>
            <Label text=\"{{ text }}\" />
          </GridLayout>
        </Repeater.itemTemplate>
      </Repeater>
    </AbsoluteLayout>
    \n

    Note that when doing it this way, the Repeater.itemsLayout tag will be ignored if ever set. So no need to use that.

    \n

    Before heading to the JavaScript part, make sure the loaded attribute is set as in the example: loaded="load_slideShow". This is needed for the JavaScript code to turn the container into a slideshow.

    \n

    JS

    \n

    Once the XML has been set up, the plugin will now be able to transform the container into a slideshow. To do this, see below:

    \n
    var NASlideShow = require(\"nativescript-na-slideshow\");

    exports.load_slideShow = function(args) {
      var view = args.object;
      var slideShow = new NASlideShow();
      
      slideShow.init(view);
    };
    \n

    Once this has been done, the slideshow is now up and running!

    \n

    Instance properties

    \n

    In the JS example above, the init() function used the default properties. Here is a list of all properties that exist (showing default values):

    \n
    {
      items: false, // An ObservableArray instance.
      itemTemplate: \"<GridLayout />\", // The view template for each slide (has to be written as an XML string). See the Repeater documentation for further information.
      enableBounce: false, // Scroll bouncing disabled by default.
      fallbackWidth: [screen width], // In case the inherited width doesn't load in time.
      fallbackHeight: [screen height], // In case the inherited height doesn't load in time.
      clipToBounds: true, // Similar to \"overflow\" in CSS
      indicators: {
        size: 10, // The indicators' size.
        color: \"#808080\", // The indicators' color.
        activeColor: false, // The active indicator's color.
        borderWidth: 0, // The indicators' border width.
        borderColor: \"#404040\", // The indicators' border color.
        horizontalAlignment: \"center\", // The horizontal alignment of the indicators.
        verticalAlignment: \"bottom\", // The vertical alignment of the indicators.
        iconShadow: false, // Icon shadow. Can be a boolean or an object
        forceVisibility: false, // By default, indicators will only show up if there are 2 slides or more.
        disabled: false // Disable the indicators.
      }
    }
    \n

    The itemTemplate property is special because, according to the Repeater documentation, it has to be a string in XML format.

    \n

    The fallbackWidth and fallbackHeight properties are sometimes needed when the inherited width and height haven't yet been set during view loaded state.

    \n

    indicators.iconShadow can be customized by making it an object instead. These are the default properties:

    \n
    {
      color: \"#000000\", // HEX color
      alpha: 1, // Opacity (1 to 0)
      x: 0, // Horizontal offset
      y: 0, // Vertical offset
      radius: 2 // Radius amount
    }
    \n

    Methods

    \n

    init()

    \n

    This must be called to initiate the slideshow view.

    \n

    init(template, props)

    \n
      \n
    • template - The view container (template) that is going to become the slideshow.
      • \n
    • props - Set any instance properties (optional).
      • \n
    \n
    var frameModule = require(\"ui/frame\");
    var observableArray = require(\"data/observable-array\").ObservableArray;
    var container = frameModule.topmost().currentPage.getViewById(\"slideShow\");
    var slideShow = new NASlideShow();

    slideShow.init(container, {
      items: new ObservableArray(\"Slide 1\", \"Slide 2\", \"Slide 3\"),
      itemTemplate: '<GridLayout><Label text=\"{{ $value }}\" horizontalAlignment=\"center\" /></GridLayout>',
      indicators: {
        forceVisibility: true,
        verticalAlignment: \"top\",
        color: \"#ffffff\"
      }
    });
    \n
    \n

    insertSlide()

    \n

    Call this to insert new slides. Depending on whether the slideshow was initiated using XML only or an ObservableArray instance, the view parameter works a little differently.

    \n

    insertSlide(slideView, props)

    \n
      \n
    • slideView - The view container/string/object that is going to become the slideshow.
      • \n
    • props - Set any instance properties (optional).
      • \n
    \n

    XML

    \n
    var GridLayout = require(\"ui/layouts/grid-layout\").GridLayout;
    var Label = require(\"ui/label\").Label;

    var slideView = new GridLayout();
    var textLabel = new Label();
    textLabel.text = \"Slide 4\";
    slideView.insertChild(textLabel, 0);

    slideShow.insertSlide(slideView, {
      indicator: {
        icon: \"+\",
        float: true
      }
    });
    \n

    ObservableArray

    \n
    slideShow.insertSlide(\"Slide 4\", {
      indicator: {
        icon: \"+\",
        float: true
      }
    });
    \n

    The props parameter's defaults are:

    \n
    {
      atIndex: [last] // Inserts the slide at specified index number.
      indicator: {
        icon: false, // Custom icon (or character) instead of a dot.
        fontFamily: false, // The icon font family.
        float: false // Set to true to make the icon float to the right, as in not adjusting the indicators horizontal alignment.
      }
    }
    \n

    The float property is ignored if atIndex is set to anything but the last, or if the slideshow instance has horizontalAlignment set to "right". This is to prevent visual bugs.

    \n
    \n

    removeSlide()

    \n

    Remove a slide at specified index.

    \n

    removeSlide(index)

    \n
      \n
    • index - The slide to remove at specified index.
      • \n
    \n

    To remove the first slide:

    \n
    slideShow.removeSlide(0);
    \n
    \n

    on()

    \n

    Event listener for each slide scroll. When a slide has finished scrolling, the event will be called.

    \n

    on("slideChange", callback)

    \n
      \n
    • "slideChange" - The only available eventName.
      • \n
    • callback - The callback on each notification.
      • \n
    \n
    slideShow.on(\"slideChange\", function(eventData) {
      console.log(\"Slide index: \" + eventData.index);
    });
    \n

    The eventData parameter inside the callback function contains the following properties:

    \n
      \n
    • eventName - The event's name.
      • \n
    • object - The slideshow view.
      • \n
    • index - The current slide index.
      • \n
    • length - The total amount of slides.
      • \n
    \n
    \n

    setSlide()

    \n

    Sets a new view/value to existing slide.

    \n

    setSlide(index, value)

    \n
      \n
    • index - The slide view/value at specified index.
      • \n
    • value - The slide view/value (depends if slideShow uses ObservableArray or not).
      • \n
    \n

    To set the first slide:

    \n
    slideShow.setSlide(0, { text: \"Updated content\", backgroundColor: \"#ffffff\" });
    \n
    \n

    scrollToSlide()

    \n

    Sets a new view/value to existing slide.

    \n

    scrollToSlide(index, animated)

    \n
      \n
    • index - The slide to scroll to at specified index.
      • \n
    • animated - Boolean parameter. Whether the scrolling should animate or not (defaults to false).
      • \n
    \n

    To scroll to the last slide (animated):

    \n
    slideShow.scrollToSlide(slideShow.getSlidesCount()-1, true);
    \n
    \n

    Other methods

    \n
      \n
    • getSlide(index) - Get slide at specified index.\n
        \n
      • Returns slide view/value
        • \n
      \n
      • \n
    • getSlidesCount() - Get the total amount of slides.\n
        \n
      • Returns number
        • \n
      \n
      • \n
    • getSlideIndex() - Get the current slide index.\n
        \n
      • Returns number
        • \n
      \n
      • \n
    • clearSlides() - Clears the whole slideshow.
      • \n
    \n
    \n

    Other properties

    \n
      \n
    • view - Returns the slideshow view object (the view container/template that was used to initiate the slideshow).
      • \n
    • viewsList - List of all children views:\n
        \n
      • scrollView - The ScrollView.
        • \n
      • container - The internal container for the slideshow.
        • \n
      • indicators - The indicators view.
        • \n
      • repeater - The Repeater view (only available when using ObservableArray).
        • \n
      \n
      • \n
    • items - Returns the ObservableArray (only available when using ObservableArray).
      • \n
    \n

    Known issues

    \n
      \n
    • No Android compatibility, yet.
      • \n
    \n

    History

    \n

    Version 1.5.0 (3 December 2016)

    \n
      \n
    • Better code structure.
      • \n
    • Bug fix: forceVisibility when set to false, was ignored when removing second last slide.
      • \n
    \n

    Version 1.4.3 (17 October 2016)

    \n
      \n
    • Bug fix: clipToBounds property not working correctly.
      • \n
    \n

    Version 1.4.2 (16 October 2016)

    \n
      \n
    • Changed indicators property from disable to disabled (see init() documentation).
      • \n
    • Added clipToBounds property to init() (see documentation).
      • \n
    \n

    Version 1.4.1 (13 October 2016)

    \n
      \n
    • Bug fixes:\n
        \n
      • Unable to insert new slide when one slide has already been removed (using ObservableArray/Repeater).
        • \n
      • Active slide indicator not retaining its color when a slide has been removed.
        • \n
      \n
      • \n
    \n

    Version 1.4.0 (12 October 2016)

    \n
      \n
    • New method: clearSlides()
      • \n
    • Ability to also create Repeater from XML (see Usage).
      • \n
    \n

    Version 1.3.2 (16 September 2016)

    \n
      \n
    • New method: scrollToSlide()
      • \n
    \n

    Version 1.3.1 (15 September 2016)

    \n
      \n
    • Hotfix: forceVisibility was ignored completely.
      • \n
    \n

    Version 1.3.0 (15 September 2016)

    \n
      \n
    • New methods: getSlide() and setSlide()
      • \n
    • You can now set a custom color on the active slide indicator.
      • \n
    • Fixed a bug with forceVisibility.
      • \n
    • Fixed a bug where removeSlide() on last index would crash the app.
      • \n
    \n

    Version 1.2.0 (12 September 2016)

    \n

    Apologize for the fast updates (same day, wow). This one has lots of additions:

    \n
      \n
    • New method: removeSlide()
      • \n
    • Added horizontal and vertical alignments to the indicators (see init() documentation).
      • \n
    • Added iconShadow property to the indicators (see init() documentation).
      • \n
    • appendSlide() has been renamed to insertSlide().
      • \n
    • insertSlide() can now insert the slide at a specified index using the atIndex property.
      • \n
    • Fixed a bug where if the ObservableArray was empty during init(), an indicator dot would appear anyway.
      • \n
    \n

    Version 1.1.0 (12 September 2016)

    \n
      \n
    • New method: getSlidesCount()
      • \n
    • Updated README.md
      • \n
    • Bug fixes. There were problems with the appendSlide() function.
      • \n
    \n

    Version 1.0.0 (9 September 2016)

    \n
      \n
    • init()
      • \n
    • appendSlide()
      • \n
    • on()
      • \n
    • getSlideIndex()
      • \n
    \n

    Credits

    \n\n

    License

    \n

    MIT - for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-multi-select":{"name":"nativescript-multi-select","version":"1.0.6","license":"Apache-2.0","readme":"

    Nativescript Multi Select

    \n

    Overview

    \n

    Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

    \n

    \n \n \n

    \n

    Installation

    \n
    tns plugin add nativescript-multi-select
    \n

    Usage

    \n

    TypeScript

    \n
    import { MultiSelect, AShowType } from 'nativescript-multi-select';
    import { MSOption } from 'nativescript-multi-select';

    let MSelect = new MultiSelect();
    let selectedItems = [\"moi-a\", \"moi-b\"];

    const options: MSOption = {
      title: \"Please Select\",
      selectedItems: this._selectedItems,
      items: [
        { name: \"A\", value: \"moi-a\" },
        { name: \"B\", value: \"moi-b\" },
        { name: \"C\", value: \"moi-c\" },
        { name: \"D\", value: \"moi-d\" },
      ],
      bindValue: 'value',
      displayLabel: 'name',
      onConfirm: selectedItems => {
        selectedItems = selectedItems;
        console.log(\"SELECTED ITEMS => \", selectedItems);
      },
      onItemSelected: selectedItem => {
        console.log(\"SELECTED ITEM => \", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: \"#252323\",
        confirmButtonTextColor: \"#70798C\",
      },
      ios: {
        cancelButtonBgColor: \"#252323\",
        confirmButtonBgColor: \"#70798C\",
        cancelButtonTextColor: \"#ffffff\",
        confirmButtonTextColor: \"#ffffff\",
        showType: AShowType.TypeBounceIn
      }
    };

    MSelect.show(options);
    \n

    Angular

    \n
    import { Component, OnInit, NgZone } from \"@angular/core\";
    import { MultiSelect, AShowType } from 'nativescript-multi-select';
    import { MSOption } from 'nativescript-multi-select';

    @Component({
     // ...
    })
    export class SomeComponent implements OnInit {

      private _MSelect: MultiSelect;
      private predefinedItems: Array<any>;
      public selectedItems: Array<any>;

      constructor(private zone: NgZone) {
        this._MSelect = new MultiSelect();
        this.predefinedItems = [\"moi-a\", \"moi-b\"];
      }

      ngOnInit(): void {
      }


      public onSelectTapped(): void {
        const options: MSOption = {
          title: \"Please Select\",
          selectedItems: this.predefinedItems,
          items: [
            { name: \"A\", value: \"moi-a\" },
            { name: \"B\", value: \"moi-b\" },
            { name: \"C\", value: \"moi-c\" },
            { name: \"D\", value: \"moi-d\" },
          ],
          bindValue: 'value',
          displayLabel: 'name',
          onConfirm: selectedItems => {
            this.zone.run(() => {
              this.selectedItems = selectedItems;
              this.predefinedItems = selectedItems;
              console.log(\"SELECTED ITEMS => \", selectedItems);
            })
          },
          onItemSelected: selectedItem => {
            console.log(\"SELECTED ITEM => \", selectedItem);
          },
          onCancel: () => {
            console.log('CANCEL');
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: \"#252323\",
            confirmButtonTextColor: \"#70798C\",
          },
          ios: {
            cancelButtonBgColor: \"#252323\",
            confirmButtonBgColor: \"#70798C\",
            cancelButtonTextColor: \"#ffffff\",
            confirmButtonTextColor: \"#ffffff\",
            showType: AShowType.TypeBounceIn
          }
        };

        this._MSelect.show(options);
      }
    }
    \n

    Vue

    \n
    <script>
      import {
        MultiSelect,
        AShowType
      } from \"nativescript-multi-select\";
      const MSelect = new MultiSelect();
      let predefinedItems = [\"moi-a\", \"moi-b\"];
      
      export default {
        data() {
        },
        methods: {
          onSelectTapped() {
            const that = this;
            const options = {
              title: \"Please Select\",
              selectedItems: predefinedItems,
              items: [{
                  name: \"A\",
                  value: \"moi-a\"
                },
                {
                  name: \"B\",
                  value: \"moi-b\"
                },
                {
                  name: \"C\",
                  value: \"moi-c\"
                },
                {
                  name: \"D\",
                  value: \"moi-d\"
                }
              ],
              bindValue: \"value\",
              displayLabel: \"name\",
              onConfirm: _selectedItems => {
                that.selectedItems = _selectedItems;
                console.log(\"SELECTED ITEMS => \", _selectedItems);
              },
              onItemSelected: selectedItem => {
                console.log(\"SELECTED ITEM => \", selectedItem);
              },
              onCancel: () => {
                console.log(\"CANCEL\");
              },
              android: {
                titleSize: 25,
                cancelButtonTextColor: \"#252323\",
                confirmButtonTextColor: \"#70798C\"
              },
              ios: {
                cancelButtonBgColor: \"#252323\",
                confirmButtonBgColor: \"#70798C\",
                cancelButtonTextColor: \"#ffffff\",
                confirmButtonTextColor: \"#ffffff\",
                showType: AShowType.TypeBounceIn
              }
            };
      
            MSelect.show(options);
          }
        }
      };
    </script>
    \n

    API

    \n

    MultiSelect

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    show(options: MSOption)() : voidShow Multi Select Dialog
    \n

    MSOption

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titlestringDialog Title
    confirmButtonTextstringconfirm button text optional
    cancelButtonTextstringcancel button text optional
    selectedItemsArray<any>predefined items optional
    itemsArray<any>items/list that will be display
    bindValuestringthe value that will determine the property which will be return when an item is selected optional
    displayLabelstringthe value that will determine the property which will be display in the list optional
    iosMSiOSOptionios options optional
    androidMSAndroidOptionandroid options optional
    onConfirm: (selectedItems: Array<any>) => voidFunction Callbackcallback which fires when the selection has been confirm/done
    onItemSelected: (selectedItem: any) => voidFunction Callbackcallback which fires when an item has been selected optional
    onCancel: () => voidFunction Callbackcallback which fires when the cancel button is tapped optional
    \n

    MSAndroidOption (for android)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    titleSizenumberoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    \n

    MSiOSOption (for ios)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    cancelButtonBgColorstringoptional
    confirmButtonBgColorstringoptional
    confirmButtonTextColorstringoptional
    cancelButtonTextColorstringoptional
    showTypenumberpopup view show type, default by AAPopupViewShowTypeFadeIn optional
    dismissTypenumberpopup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional
    itemColorstringitem text color optional
    \n

    iOS Popup: Animation AShowType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeIn1
    TypeGrowIn2
    TypeShrinkIn3
    TypeSlideInFromTop4
    TypeSlideInFromBottom5
    TypeSlideInFromLeft6
    TypeSlideInFromRight7
    TypeBounceIn8
    TypeBounceInFromTop9
    TypeBounceInFromBottom10
    TypeBounceInFromLeft11
    TypeBounceInFromRight12
    \n

    iOS Popup: Animation ADismissType ENUM

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValue
    TypeNone0
    TypeFadeOut1
    TypeGrowOut2
    TypeShrinkOut3
    TypeSlideOutToTop4
    TypeSlideOutToBottom5
    TypeSlideOutToLeft6
    TypeSlideOutToRight7
    TypeBounceOut8
    TypeBounceOutToTop9
    TypeBounceOutToBottom10
    TypeBounceOutToLeft11
    TypeBounceOutToRight12
    \n

    Author

    \n

    Jonathan Mayunga, mayunga.j@gmail.com

    \n

    Credits

    \n\n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-showcaseview":{"name":"nativescript-material-showcaseview","version":"1.0.1","license":"MIT","readme":"

    Nativescript MaterialShowcaseView

    \n

    A Material Design themed showcaseview (coachmarks) for Nativescript.

    \n

    This plugin works only on Android devices and it is based on * MaterialShowcaseView. Consider checking * nativescript-coachmarks if you are looking for an iOS version.

    \n

    Getting started

    \n

    To install run\nnpm install nativescript-material-showcaseview

    \n

    Usage

    \n

    Import the NSMaterialShowcaseView class to your module, then create a new instance of it.

    \n
    import { NSMaterialShowcaseView } from 'nativescript-material-showcaseview'

    export class MyModel {
    \tprivate showcaseView: NSMaterialShowcaseView;
    \tconstructor() { this.showcaseView = new NSMaterialShowcaseView(); }
    }
    \n

    IShowcaseItem and IShowcaseConfig interfaces respectively represent a showcase item and the showcase configuration.

    \n
    export interface IShowcaseItem {
        target: any; // the element in your view (e.g a button)
        dismissText: string; // the text to dismiss the show case
        contentText: string; // the text explaining the element
        withRectangleShape: boolean;
    }
    \n

    An example of item:

    \n
    let item : IShowcaseItem = {

    \ttarget: this.btn,
    \tdismissText: \"GOT IT\",
    \tcontentText: \"This is the start button\",
    \twithRectangleShape: false
    };
    \n

    Currently the plugin only implements the showcase sequence available on MaterialShowcaseView. In order to create the sequence you should call this.showcaseView.createSequence(items), in which the paramenter items represents an array of IShowcaseItem.

    \n

    Note: if you wish to highlight only one element in your view, then your array must have only one element.

    \n

    this.showcaseView.startSequence() initiates the showcase sequence, whilst this.showcaseView.reset() resets the sequence so it can be shown again.

    \n

    There is a sample app available here in case you need to see a working example.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-barcodelib":{"name":"nativescript-barcodelib","version":"1.0.15","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/tween":{"name":"@nativescript-community/tween","version":"0.0.14","license":"Apache-2.0","readme":"

    NativeScript Tween

    \n

    \"npm\n\"npm\n\"npm\"

    \n

    A NativeScript plugin that natively wraps tween.js, a tweening engine for easy animations, incorporating optimized Robert Penner's equations.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    iOS DemoAndroid Demo
    \n

    Table of Contents

    \n
      \n
    1. Installation
      2. \n
    2. Configuration
      3. \n
    3. API
      4. \n
    4. Usage in Angular
      5. \n
    5. Usage in Vue
      6. \n
    6. Usage in Svelte
      7. \n
    7. Usage in React
      8. \n
    8. Demos
      9. \n
    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n

    ns plugin add @nativescript-community/tween

    \n

    Configuration

    \n

    No futher configuration is needed.

    \n

    API

    \n

    This plugin exports the same API as tween.js.

    \n

    Refer to the offical tween.js user guide additional examples and information.

    \n

    For now grouping, chaining, repeating... are not supported. Just basic tweening.

    \n

    Any view property that is a number should technically be able to be tweened. All of these have not been tested, but some of the common ones that work are:

    \n
      \n
    • width
      • \n
    • height
      • \n
    • rotate
      • \n
    • scaleX
      • \n
    • scaleY
      • \n
    • translateX
      • \n
    • translateY
      • \n
    • opacity
      • \n
    \n

    The following are available tween easing options:

    \n
      \n
    • TWEEN.Easing.Linear.None
      • \n
    • TWEEN.Easing.Quadratic.In
      • \n
    • TWEEN.Easing.Quadratic.Out
      • \n
    • TWEEN.Easing.Cubic.In
      • \n
    • TWEEN.Easing.Cubic.Out
      • \n
    • TWEEN.Easing.Quartic.In
      • \n
    • TWEEN.Easing.Quartic.Out
      • \n
    • TWEEN.Easing.Quintic.In
      • \n
    • TWEEN.Easing.Quintic.Out
      • \n
    • TWEEN.Easing.Sinusoidal.In
      • \n
    • TWEEN.Easing.Sinusoidal.Out
      • \n
    • TWEEN.Easing.Exponential.In
      • \n
    • TWEEN.Easing.Exponential.Out
      • \n
    • TWEEN.Easing.Circular.In
      • \n
    • TWEEN.Easing.Circular.Out
      • \n
    • TWEEN.Easing.Elastic.In
      • \n
    • TWEEN.Easing.Elastic.Out
      • \n
    • TWEEN.Easing.Back.In
      • \n
    • TWEEN.Easing.Back.Out
      • \n
    • TWEEN.Easing.Bounce.In
      • \n
    • TWEEN.Easing.Bounce.Out
      • \n
    \n

    Usage in Angular

    \n

    The following is a very simple example of getting tweens to run in your Angular project.

    \n

    Create a view that you would like to animate as well as a button to trigger it in your component's HTML file.

    \n
    <StackLayout>
        <Button text=\"Start Animation\" (tap)=\"startTween()\" verticalAlignment=\"top\"></Button>

        <AbsoluteLayout #box width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></AbsoluteLayout>
    </StackLayout>
    \n

    Reference the view you want to animate in your component's typescript file with the following (and add required imports):

    \n
    boxRef: AbsoluteLayout;
    @ViewChild(\"box\", { static: true }) boxElementRef: ElementRef;

    ngOnInit(): void {
        this.boxRef = this.boxElementRef.nativeElement;
    }
    \n

    Import the tween module in your component's typescript file:

    \n
    import { TWEEN } from '@nativescript-community/tween';
    \n

    Create a function that will contain the call to run the tween.

    \n
    startTween() {
        new TWEEN.Tween({ value: 30 })
            .easing(TWEEN.Easing.Quadratic.In)
            .to({ value: 300 }, 1000)
            .onStart(() => {
                console.log(\"The tween has stated...\");
            })
            .onComplete(() => {
                console.log(\"The tween has completed...\");
            })
            .onUpdate(obj => {
                this.boxRef.width = obj.value;
            })
            .start();
    }
    \n

    That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

    \n

    Look in the demo-ng directory for a more advanced demo.

    \n

    Usage in Vue

    \n

    The following is a very simple example of getting tweens to run in your Vue project.

    \n

    Create a view that you would like to animate as well as a button to trigger it.

    \n
    <StackLayout>
        <Button text=\"Start Animation\" @tap=\"startTween\" />
        <AbsoluteLayout ref=\"box\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></AbsoluteLayout>
    </StackLayout>
    \n

    Reference the view you want to animate in your component computed section:

    \n
    // ...
    computed: {
        boxRef(){
            return this.$refs.box.nativeView;
        }     
    },
    // ...
    \n

    Import the tween module in your component:

    \n
    import { TWEEN } from '@nativescript-community/tween';
    \n

    Create a function that will contain the call to run the tween.

    \n
    startTween() {
        new TWEEN.Tween({ value: 30 })
            .easing(TWEEN.Easing.Quadratic.In)
            .to({ value: 300 }, 1000)
            .onStart(() => {
                console.log(\"The tween has stated...\");
            })
            .onComplete(() => {
                console.log(\"The tween has completed...\");
            })
            .onUpdate(obj => {
                this.boxRef.width = obj.value;
            })
            .start();
    }
    \n

    That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

    \n

    Look in the demo-vue directory for a more advanced demo.

    \n

    Usage in Svelte

    \n

    The following is a very simple example of getting tweens to run in your Svelte project.

    \n

    Create a view that you would like to animate as well as a button to trigger it.

    \n
    <stackLayout>
        <button text=\"Start Animation\" on:tap=\"{startTween}\" />
        <absoluteLayout bind:this=\"{boxRef}\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"></absoluteLayout>
    </stackLayout>
    \n

    Reference the view you want to animate in your component.

    \n
    let boxRef: AbsoluteLayout;
    onMount(() => {
        boxRef = boxRef.nativeView;
    })
    \n

    Import the tween module in your component:

    \n
    import { TWEEN } from '@nativescript-community/tween';
    \n

    Create a function that will contain the call to run the tween.

    \n
    function startTween() {
        new TWEEN.Tween({ value: 30 })
            .easing(TWEEN.Easing.Quadratic.In)
            .to({ value: 300 }, 1000)
            .onStart(() => {
                console.log(\"The tween has stated...\");
            })
            .onComplete(() => {
                console.log(\"The tween has completed...\");
            })
            .onUpdate(obj => {
                boxRef.width = obj.value;
            })
            .start();
    }
    \n

    That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

    \n

    Look in the demo-svelte directory for a more advanced demo.

    \n

    Usage in React

    \n

    The following is a very simple example of getting tweens to run in your React project.

    \n

    Create a view that you would like to animate as well as a button to trigger it.

    \n
    <stackLayout>
        <button text=\"Start Animation\" onTap={startTween} />
        <absoluteLayout ref={boxRef} width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"middle\"></absoluteLayout>
    </stackLayout
    \n

    Reference the view you want to animate in your component.

    \n
    const boxRef = React.useRef<NSVElement<AbsoluteLayout>>(null);
    \n

    Import the tween module in your component:

    \n
    import { TWEEN } from '@nativescript-community/tween';
    \n

    Create a function that will contain the call to run the tween.

    \n
    function startTween() {
        new TWEEN.Tween({ value: 30 })
            .easing(TWEEN.Easing.Quadratic.In)
            .to({ value: 300 }, 1000)
            .onStart(() => {
                console.log(\"The tween has stated...\");
            })
            .onComplete(() => {
                console.log(\"The tween has completed...\");
            })
            .onUpdate(obj => {
                boxRef.current!.nativeView.width = obj.value;
            })
            .start();
    }
    \n

    That should be all you need! Now, when you tap the button Start Animation, the box's width should go from 30 to 300.

    \n

    Look in the demo-react directory for a more advanced demo

    \n

    Demos

    \n

    This repository includes Angular, Vue.js, Svelte, and React demos. In order to run these execute the following in your shell:

    \n
    $ git clone https://github.com/@nativescript-community/tween
    $ cd tween
    $ npm i
    $ npm run build
    $ cd demo-ng # or demo-vue or demo-svelte or demo-react
    $ ns run ios|android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-progress-notifications":{"name":"nativescript-progress-notifications","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript Progress Notifications(Android)

    \n

    The Progress Notifications plugin allows your app to show normal and progress notifications during Android app execution. For example notification of file downloading or uploading.

    \n

    Requirements

    \n

    working only for android

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add nativescript-progress-notifications
    \n

    TypeScript support

    \n

    And do yourself a favor by adding TypeScript support to your nativeScript app:

    \n
    tns install typescript
    \n

    Now you can import the plugin as an object into your .ts file as follows:

    \n
    import * as ProgressNotification from 'nativescript-progress-notification';

    // then use it as:
    ProgressNotification.dismiss(id);
    \n

    Usage

    \n
    ```javascript\n    let localNotification=ProgressNotification.show({\n        id:5, //required\n        title:"Progress Notification",\n        message:"Working normal local Notification",\n        ongoing:false,\n    });\n\n    let progressNotification=ProgressNotification.show({\n        id:6, //required\n        title:"progress Notification",\n        message:"Working Progress Notification",\n        ongoing:true,\n        indeterminate:false,\n        progressValue:20\n    });\n\n    let updateProgressNotification=ProgressNotification.update(progressNotification,{\n        progressValue:50\n    });\n\n    let finishProgressNotification=ProgressNotification.update(progressNotification,{\n        progressValue:100,\n        message:"Process Completed",\n        hideProgressBar:true, //set true to hide progressbar otherwise it will be visible\n    });\n\n    //dismiss notification\n    ProgressNotification.dismiss(localNotification.id);\n\n```\n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    idrequiredA number so you can easily distinguish your notifications.
    title" "The title which is shown in the statusbar.
    message" "The text below the title.
    ongoingtrueSet whether this is an ongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them.
    indeterminatefalseongoing notification type indeterminate or not. setting true will show continous running progressbar irrelative to Proress value.
    progressValue0set the notification progress when ongoing is true and indeterminate is false.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-google-maps-utils":{"name":"nativescript-danem-google-maps-utils","version":"1.0.18","license":"Apache-2.0","readme":"

    nativescript-danem-google-maps-utils (V1.0.17)

    \n

    NativeScript Google Maps SDK utility library IOS & Android :

    \n
      \n
    • Clustering implemented
      • \n
    • Heatmap implemented
      • \n
    \n

    *** I am available to improve this plugin as needed, so do not hesitate to open a ticket for a request ! ***

    \n

    Dependencies

    \n\n

    Install

    \n
    tns plugin add nativescript-danem-google-maps-utils
    \n

    Usage

    \n

    Import

    \n
    var GoogleMaps = require('nativescript-google-maps-sdk');
    var GoogleMapsUtils = require('nativescript-danem-google-maps-utils');
    \n

    Call function

    \n
    // After initializing google maps and creating a marker array :
    GoogleMapsUtils.setupMarkerCluster(mapView, makerSet);
    GoogleMapsUtils.setupHeatmap(this.mapView, positionSet);
    \n

    Clustering Info

    \n

    Marker icon

    \n
    var icon = 'marker_icon'
    var marker: Marker = new Marker();
    marker.infoWindowTemplate = icon;
    makerSet.push(marker)
    \n

    Marker Select & Cluster Select

    \n
    onMarkerSelect(event) {
    // Be careful, if you tap on a marker it returns a marker, if you tap on a cluster it returns an array of markers.
    // var marker = event.marker
    // or
    // var arrayMarkers = event.marker
    }
    \n

    MoveCamera

    \n
    GoogleMapsUtils.moveCamera(lat,lon,zoom)
    \n

    Clear

    \n
    GoogleMapsUtils.clearMap();
    GoogleMapsUtils.
    \n

    HeatMap

    \n
    generateRandomPosition(position, distance) {
        var r = distance / 111300;

        var x = position[0];
        var y = position[1];

        var u = Math.random();
        var v = Math.random();

        var w = r * Math.sqrt(u);
        var t = 2 * Math.PI * v;

        var dx = w * Math.cos(t) / Math.cos(y);
        var xy = w * Math.sin(t);

        return [x + dx, y + xy];
    }

    demoSetupHeatMap() {
        var positionSet = [];
        for (var i = 0; i < 400; i++) {
            positionSet.push(this.generateRandomPosition([48.7797613, 2.4658653], 10000));
        }

        positionSet = positionSet.map(function (position) {
            return GoogleMaps.Position.positionFromLatLng(position[0], position[1]);
        });
        GoogleMapsUtils.setupHeatmap(this.mapView, positionSet, [new Color(\"#00FF00\"), new Color(\"#FF0000\")], [0.10, 0.50]);
        GoogleMapsUtils.setOpacity(0.8);
        GoogleMapsUtils.setRadius(80)
    }
    \n

    Set Opacity & Radius

    \n
        GoogleMapsUtils.setOpacity(0.8);
        GoogleMapsUtils.setRadius(80)
    \n

    Plugin inspired by nativescript-google-maps-utils, thanks @naderio

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-webview-crypto":{"name":"nativescript-angular-webview-crypto","version":"0.0.6","license":"MIT","readme":"

    nativescript-angular-webview-crypto

    \n

    \"npm\"

    \n

    This brings window.Crypto to your Angular2 NativeScript application. It does this\nby communicating with a hidden WebView, which performs the actual\ncomputation.

    \n

    It extends nativescript-webview-crypto, which in turn extends\nwebview-crypto.

    \n

    This project is funded by Burke Software and Consulting LLC for passit. We are available for hire for any improvement and integration needs on this project. Open an issue to start a conversation or email info @ burke software dot come.

    \n

    Install

    \n

    This requires being setup properly with NativeScript\nfirst. Then install this as a plugin:

    \n
    tns plugin add nativescript-angular-webview-crypto
    \n

    Usage

    \n

    Rendering the polyfill-crypto component will start up a WebView to\ntransparently proxy all the crypto calls to. crypto is a global variable,\nto match the Web Cryptography API. To register the polyfill-crypto component,\njust import this package.

    \n

    import 'nativescript-angular-webview-crypto';

    @Component({
        selector: 'simple-view-container',
        template: `
            <polyfill-crypto></polyfill-crypto>
            `
    })
    export class SimpleViewContainer implements OnInit {
      ngOnInit() {
        console.log(crypto.getRandomValues());
      }
    }
    \n

    The component will be hidden, but needs to be rendered for crypto to work.

    \n

    You can look at an example repo\nrunning this example for symmetric encryption\nin NativeScript.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@wwwalkerrun/nativescript-ngx-magic":{"name":"@wwwalkerrun/nativescript-ngx-magic","version":"2.0.4","license":"MIT","readme":"

    \"Angular\n\"MIT

    \n

    \"nativescript-ngx-magic\"

    \n

    Magically drop a NativeScript app into your existing Angular web application and reuse all your code.*

    \n

    You will be adding NativeScript views, but you already knew that.

    \n\n

    Install

    \n
    npm i @wwwalkerrun/nativescript-ngx-magic --save
    \n

    Usage

    \n
      \n
    1. Use Component from @wwwalkerrun/nativescript-ngx-magic instead of @angular/core. Why?
      2. \n
    2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
      3. \n
    3. Run your truly native mobile app with NativeScript!
      4. \n
    \n

    Example

    \n

    A sample root component, app.component.ts:

    \n
    import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {}
    \n

    Then create a .tns.html NativeScript view template for this component, for example:

    \n
      \n
    • app.component.tns.html:
      • \n
    \n
    <ActionBar title=\"Magic!\" icon=\"\" class=\"action-bar\">
    </ActionBar>
    <StackLayout class=\"p-20\">
        <Label text=\"NativeScript is Neat.\" class=\"h1 text-center\"></Label>
    </StackLayout>
    \n

    Then if your component has styleUrls defined, you can create a .tns.css file, for example:

    \n
      \n
    • app.component.tns.css:
      • \n
    \n
    // any custom css you want to use with your {N} view
    \n

    Run for first time!

    \n

    You will need to have fully completed steps 1 and 2 above.

    \n

    Run your app in the iOS Simulator with:

    \n
    npm run start.ios
    \n

    Run your app in an Android emulator with:

    \n
    npm run start.android
    \n

    Welcome to the wonderfully magical world of NativeScript!

    \n

    How to create NativeScript views

    \n

    Based on our example above, assume app.component.html looks like this:

    \n
    <main>
      <div>This is my root component</div>
    </main>
    \n

    You would then create a new file in app.component.tns.html like this:

    \n
    <StackLayout>
      <Label text=\"This is my root component\"></Label>
    </StackLayout>
    \n

    You can also use platform specific views if desired with the platformSpecific Component metadata:

    \n
    import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

    @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      platformSpecific: true
    })
    export class AppComponent {}
    \n

    Then you could create separate views for iOS and Android:

    \n
      \n
    • app.component.ios.html
      • \n
    • app.component.android.html
      • \n
    \n

    You can learn more about NativeScript view options here.

    \n

    You can also install helpful view snippets for VS Code here or Atom Editor here.

    \n

    You can learn more here about how this setup works and why.

    \n

    Supported Projects

    \n\n

    Why different Component?

    \n

    Component from nativescript-ngx-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

    \n

    The library provides a custom Decorator under the hood.\nFeel free to check it out here and it uses a utility here.

    \n

    You can see more elaborate use cases of this magic with angular-seed-advanced.

    \n

    Special Note About AoT

    \n

    Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

    \n
    import { Component } from '@angular/core';

    // just comment this out and use Component from '@angular/core'
    // import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

    @Component({
      // etc.
    \n

    After doing the above, running AoT build will succeed. :)

    \n

    The Component from nativescript-ngx-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ngx-magic. Again this temporary inconvenience may be unnecessary in the future.

    \n

    Requirements

    \n\n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-health-data":{"name":"@enduco/nativescript-health-data","version":"1.0.5","license":"Apache-2.0","readme":"

    @enduco/nativescript-health-data

    \n
    ns plugin add @enduco/nativescript-health-data
    \n

    This is a NativeScript plugin that abstracts Apple HealthKit and Google Fit to read health data from the user's device.

    \n

    Prerequisites

    \n

    Android

    \n

    Google Fit API Key - Go to the Google Developers Console, create a project, and enable the Fitness API.\nThen under Credentials, create a Fitness API OAuth2 client ID for an Android App (select User data and press the What credentials do I need? button).\nIf you are using Linux/maxOS, generate your SHA1-key with the code below.

    \n
    keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v
    \n
    \n

    Note that the default (debug) keystore password is empty.

    \n
    \n

    iOS

    \n

    Make sure you enable the HealthKit entitlement in your app ID.

    \n

    License

    \n

    Apache License Version 2.0

    \n

    API

    \n

    The examples below are all in TypeScript, and the demo was developed in Nativescript w/ Angular.

    \n

    This is how you can import and instantiate the plugin, all examples expect this setup:

    \n
    import { AggregateBy, HealthData, HealthDataType } from \"nativescript-health-data\";

    export class MyHealthyClass {
      private healthData: HealthData;

      constructor() {
        this.healthData = new HealthData();
      }
    }
    \n

    isAvailable

    \n

    This tells you whether or not the device supports Health Data. On iOS this is probably always true.\nOn Android the user will be prompted to (automatically) update their Play Services version in case it's not sufficiently up to date.\nIf you don't want this behavior, pass false to this function, as shown below.

    \n
    this.healthData.isAvailable(false)
        .then(available => console.log(available));
    \n

    isAuthorized

    \n

    This function (and the next one) takes an Array of HealthDataType's. Each of those has a name and an accessType.

    \n
      \n
    • The name can be one of the 'Available Data Types'.
      • \n
    • The accessType can be one of read, write, or readAndWrite (note that this plugin currently only supports reading data, but that will change).
      • \n
    \n
    \n

    iOS is a bit silly here: if you've only requested 'read' access, you'll never get a true response from this method. Details here.

    \n
    \n
    this.healthData.isAuthorized([<HealthDataType>{name: \"steps\", accessType: \"read\"}])
        .then(authorized => console.log(authorized));
    \n

    requestAuthorization

    \n

    This function takes the same argument as isAuthorized, and will trigger a consent screen in case the user hasn't previously authorized your app to access any of the passed HealthDataType's.

    \n

    Note that this plugin currently only supports reading data, but that will change.

    \n
    const types: Array<HealthDataType> = [
    \t{name: \"height\", accessType: \"write\"},
    \t{name: \"weight\", accessType: \"readAndWrite\"},
    \t{name: \"steps\", accessType: \"read\"},
    \t{name: \"distance\", accessType: \"read\"}
    ];

    this.healthData.requestAuthorization(types)
        .then(authorized => console.log(authorized))
        .catch(error => console.log(\"Request auth error: \", error));
    \n

    query

    \n

    Mandatory properties are startData, endDate, and dataType.\nThe dataType must be one of the 'Available Data Types'.

    \n

    By default data is not aggregated, so all individual datapoints are returned.\nThis plugin however offers a way to aggregate the data by either hour, day, or sourceAndDay,\nthe latter will enable you to read daily data per source (Fitbit, Nike Run Club, manual entry, etc).

    \n

    If you didn't run requestAuthorization before running query,\nthe plugin will run requestAuthorization for you (for the requested dataType). You're welcome. 😉

    \n
    this.healthData.query(
        {
          startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
          endDate: new Date(), // now
          dataType: \"steps\", // equal to the 'name' property of 'HealthDataType'
          unit: \"count\", // make sure this is compatible with the 'dataType' (see below)
          aggregateBy: \"day\", // optional, one of: \"hour\", \"day\", \"sourceAndDay\"
          sortOrder: \"desc\" // optional, default \"asc\"
        })
        .then(result => console.log(JSON.stringify(result)))
        .catch(error => this.resultToShow = error);
    \n

    startMonitoring (iOS only, for now)

    \n

    If you want to be notified when health data was changed, you can monitor specific types.\nThis even works when your app is in the background, with enableBackgroundUpdates: true.\nNote that iOS will wake up your app so you can act upon this notification (in the onUpdate function by fi. querying recent changes to this data type),\nbut in return you are responsible for telling iOS you're done. So make sure you invoke the completionHandler as shown below.

    \n

    Not all data types support backgroundUpdateFrequency: "immediate",\nso your app may not always be invoked immediately when data is added/deleted in HealthKit.

    \n
    \n

    Background notifications probably don't work on the iOS simulator, so please test those on a real device.

    \n
    \n
    this.healthData.startMonitoring(
        {
          dataType: \"heartRate\",
          enableBackgroundUpdates: true,
          backgroundUpdateFrequency: \"immediate\",
          onUpdate: (completionHandler: () => void) => {
            console.log(\"Our app was notified that health data changed, so querying...\");
            this.getData(\"heartRate\", \"count/min\").then(() => completionHandler());
          }
        })
        .then(() => this.resultToShow = `Started monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    stopMonitoring (iOS only, for now)

    \n

    It's best to call this method in case you no longer wish to receive notifications when health data changes.

    \n
    this.healthData.stopMonitoring(
        {
          dataType: \"heartRate\",
        })
        .then(() => this.resultToShow = `Stopped monitoring heartRate`)
        .catch(error => this.resultToShow = error);
    \n

    Available Data Types

    \n

    With version 1.0.0 these are the supported types of data you can read. Also, make sure you pass in the correct unit.

    \n

    Note that you are responsible for passing the correct unit, although there's only 1 option for each type. Well actually, the unit is ignored on Android at the moment, and on iOS there are undocumented types you can pass in (fi. mi for distance).

    \n

    The reason is I intend to support more units per type, but that is yet to be implemented... so it's for the sake of future backward-compatibility! 🤯

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    TypeOfDataUnitGoogleFit Data TypeApple HealthKit Data Type
    distancemTYPE_DISTANCE_DELTAHKQuantityTypeIdentifierDistanceWalkingRunning
    stepscountTYPE_STEP_COUNT_DELTAHKQuantityTypeIdentifierStepCount
    caloriescountTYPE_CALORIES_EXPENDEDHKQuantityTypeIdentifierActiveEnergyBurned
    heightmTYPE_HEIGHTHKQuantityTypeIdentifierHeight
    weightkgTYPE_WEIGHTHKQuantityTypeIdentifierBodyMass
    heartRatecount/minTYPE_HEART_RATE_BPMHKQuantityTypeIdentifierHeartRate
    fatPercentage%TYPE_BODY_FAT_PERCENTAGEHKQuantityTypeIdentifierBodyFatPercentage
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-googleplaces-autocomplete-temp":{"name":"nativescript-googleplaces-autocomplete-temp","version":"1.0.5","license":"Apache-2.0","readme":"

    Temp NPM package for https://github.com/derTuca/nativescript-googleplaces-autocomplete

    \n

    The git package wasn't published, so created a temp package until the official one comes back.

    \n

    I fixed a few bugs in the original version and removed the dependency to nativescript-geolocation.\nI also added locality biasing support for the iOS native Places SDK implementation.

    \n

    The signature of the get() is now:

    \n

    get(query: string, filterType: FilterTypes, lat: number, lon: number)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-square-pos":{"name":"nativescript-plugin-square-pos","version":"1.0.0","license":"MIT","readme":"

    nativescript-square-pos

    \n

    This plugin allows you to accept square payments from your mobile app through the Square POS app. This is an alternative to using the Square API that is only available in a limited number of countries. For now, only Android is implemented and the demo is only available for Angular, your contribution is welcome.

    \n

    Prerequisites / Requirements

    \n

    You simply need to Register your application, because the Square POS needs to authenticate the source of the request.

    \n

    Installation

    \n
    tns plugin add nativescript-square-pos
    \n

    Demo Usage

    \n

    In the ./demo-angular folder:

    \n

    Android:

    \n
    tns debug android
    \n

    Usage in Angular

    \n
    // test.component.ts
    import {
    SquarePos,
    SquareChargeEventData,
    SquareCurrencies,
    } from  \"nativescript-square-pos\";

    @Component({
    selector:  \"Test\",
    templateUrl:  \"./test.component.html\",
    })

    export class  AppComponent {

    \tpublic currency: SquareCurrencies = \"CAD\";
    \tpublic applicationId: string = \"YOUR_SQUARE_APPLICATION_ID\";
    \tpublic squarePos: SquarePos = new  SquarePos(this.applicationId);  

    \tpublic result: string = \"\";
    \tpublic isAppInstalled: boolean;

    \tconstructor(private  ngZone: NgZone) {
    \t\t// Add event listeners for transactions
    \t\tthis.ngZone.run(() => {
    \t\t\tthis.squarePos.on(
    \t\t\t\t\"squareChargeUnknownError\",
    \t\t\t\tthis.onSquareChargeUnknownError,
    \t\t\t\tthis
    \t\t\t);

    \t\t\tthis.squarePos.on(
    \t\t\t\t\"squareChargeSuccess\",
    \t\t\t\tthis.onSquareChargeSuccess,
    \t\t\t\tthis
    \t\t\t);

    \t\t\tthis.squarePos.on(
    \t\t\t\t\"squareChargeError\",
    \t\t\t\tthis.onSquareChargeError,
    \t\t\t\tthis
    \t\t\t);
    \t\t});
    \t\tthis.isAppInstalled = this.squarePos.isAppInstalled();
    \t}

    \tpublic onTransaction(amount: number): void {
    \t\ttry {
    \t\t\tthis.squarePos.startTransaction(amount, this.currency);
    \t\t} catch (e) {
    \t\t\tthis.result = \"An error occured while launching Square Point of Sale app.\";
    \t\t}
    \t}

    \tpublic onAppInstall(): void {
    \t\tthis.squarePos.openAppInstallation();
    \t\tconst onResume = (args) => {
    \t\t\tthis.isAppInstalled = this.squarePos.isAppInstalled();
    \t\t\tapp.off(app.resumeEvent, onResume);
    \t\t};
    \t\tapp.on(app.resumeEvent, onResume);
    \t}

    \tprivate onSquareChargeUnknownError(data: SquareChargeEventData) {
    \t\tthis.ngZone.run(() => {
    \t\t\tthis.result = \"An unknown error occured. Square Point of Sale was uninstalled or stopped working.\";
    \t\t});
    \t}

    \tprivate onSquareChargeSuccess(data: SquareChargeEventData) {
    \t\tthis.ngZone.run(() => {
    \t\t\tthis.result = `Transaction ${data.object.success.clientTransactionId} was successfully completed.`;
    \t\t});
    \t}

    \tprivate onSquareChargeError(data: SquareChargeEventData) {
    \t\tthis.ngZone.run(() => {
    \t\t\tthis.result = `The transaction was not completed. The error was ${data.object.error.code}: ${data.object.error.debugDescription}.`;
    \t\t});
    \t}
    }
    \n

    License

    \n

    MIT (see license file)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-videoplayer-lr":{"name":"nativescript-videoplayer-lr","version":"1.0.0","license":"Apache-2.0","readme":"

    NativeScript Video Player :clapper:

    \n

    A NativeScript plugin to provide an XML widget for playing local and remote video files.

    \n

    Android VideoView

    \n

    iOS AVPlayer

    \n

    Installation

    \n

    npm install nativescript-videoplayer

    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:VideoPlayer=\"videoplayer\">
            <StackLayout>
                <VideoPlayer:Video
                loaded=\"videoplayerLoaded\" 
                finished=\"videoFinished\" 
                autoplay=\"true\" 
                height=\"300\" 
                src=\"~/videos/small.mp4\" />

                <!-- Here is a remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
                
            </StackLayout>
    </Page>
    \n

    Attributes

    \n

    src - required

    \n

    Attribute to specify the video file to play, can either be a remote file or local video file.

    \n

    The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

    \n

    autoplay - optional

    \n

    Attribute to set if the video should start playing as soon as possible or to wait for user interaction.

    \n

    finished - optional

    \n

    Attribute to specify an event callback to execute when the video reaches the end of its duration.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-place-picker":{"name":"nativescript-google-place-picker","version":"1.0.1","license":"MIT","readme":"

    NativeScript plugin for Google Place Picker

    \n

    This is a cross-platform (iOS & Android) Nativescript plugin for the Google Places Picker

    \n\n

    Prerequisites

    \n

    iOS - Cocoapods is installed

    \n

    Android - Latest Google Play services SDK installed

    \n

    Google Places API Key - Go to the Google Developers Console, create a project, and enable the Google Places API for Android and Google Places API for iOS APIs. Then under credentials, create an API key.

    \n

    Google Maps API Key - Go to the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then under credentials, create an API key.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-google-place-picker
    \n

    Setup Google Maps API

    \n

    Setup Android API Key

    \n

    Add API key to app manifest(AndroidManifest.xml). Refer to Android/add key

    \n

    The plugin will default to latest available version of the Android play-services-places SDK. If you need to change the version, you can add a project ext property googlePlayServicesVersion like so:

    \n
    //   /app/App_Resources/Android/app.gradle

    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Setup iOS API Key

    \n

    In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

    \n
    if(application.ios) {
      PlacePicker.iosProvideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    If you are using Angular, you need to modify the app.module.ts as follows:

    \n
    import * as platform from \"platform\";
    import {PlacePicker} from \"nativescript-google-place-picker\"
    ....
    if (platform.isIOS) { 
      PlacePicker.iosProvideAPIKey(\"PUT_API_KEY_HERE\");
    }
    \n

    Usage Example

    \n
    ...
    public onShowPicker() {
      var picker = new PlacePicker()

      picker.present()
          .then((r)=>{
              console.log(r.latitude)
              console.log(r.longitude)
          })
          .catch((e)=>{
              console.log(\"Error: \"+e);
          })
    }
    ...
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-virtual-ibeacon":{"name":"nativescript-virtual-ibeacon","version":"0.8.4","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript Virtual Beacon Transmitter

    \n

    Transform your phone in an iBeacon transmitter (only in foreground).

    \n

    Install it

    \n
    tns plugin add nativescript-virtual-ibeacon
    \n

    Use it

    \n
    import {NativescriptVirtualIbeacon} from 'nativescript-virtual-ibeacon';
    let nativescriptVirtualIbeacon: NativescriptVirtualIbeacon = new NativescriptVirtualIbeacon();
    \n
    this.nativescriptVirtualIbeacon.startAdvertisingBeaconWithString(\"2f234454-cf6d-4a0f-adf2-f4911ba9ffa6\", \"HelloID\", 123, 456);
    \n
    this.nativescriptVirtualIbeacon.stopAdvertisingBeacon();
    \n

    TODO

    \n
      \n
    • Better Demo
      • \n
    • Check if the transmission is supported by the phone
      • \n
    • Debug
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-plus":{"name":"nativescript-webview-plus","version":"1.0.13","license":"ISC","readme":"

    nativescript-webview-plus

    \n

    Extended WebView for NativeScript which adds many options.\nThe code is originally based on nativescript-webview-plus

    \n

    Features

    \n
      \n
    • Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.\n
        \n
      • Note: For iOS 11+ WKWebView is used, but for iOS <11 UIWebView is used
        • \n
      \n
      • \n
    • Adds support for capturing URLs.\n
        \n
      • This allows the app to open external links in an external browser and handle tel-links
        • \n
      \n
      • \n
    • Added functions like:\n
        \n
      • executeJavaScript(code: string) for executing JavaScript-code and getting result.
        • \n
      • executePromise(code: string) for calling promises and getting the result.
        • \n
      • getTitle() returns document.title.
        • \n
      \n
      • \n
    • Two-Way event listeners between NativeScript and WebView\n
        \n
      • From NativeScript to WebView
        • \n
      • From WebView to NativeScript
        • \n
      \n
      • \n
    • Adds functions to inject css- and javascript-files.\n
        \n
      • Into the current page.
        • \n
      • Auto-injected on page load.
        • \n
      \n
      • \n
    • Polyfills:\n
        \n
      • Promise
        • \n
      • Fetch API (overrides Native API on Android to support x-local:// and file://)
        • \n
      \n
      • \n
    • Allows alert, confirm and prompt with WkWebView.
      • \n
    • Supports:\n
        \n
      • Android 19+
        • \n
      • iOS 9+
        • \n
      \n
      • \n
    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @nota/nativescript-advanced-werbview
    \n

    Angular support

    \n

    Import AWebViewModule from nativescript-webview-plus/angular and add it to your NgModule.

    \n

    This registers the element AWebView. Replace the tag with

    \n

    Vue support

    \n

    Import nativescript-webview-plus/vue in your app entry file (likely app.js or main.js).

    \n

    This registers the element AWebView. Replace the tag with

    \n

    Usage

    \n

    Limitations

    \n

    In order to intercept requests for the custom scheme, we use UIWebView for iOS 9 and 10 and WKWebView for iOS 11+.

    \n

    iOS 11 added support for setting a WKURLSchemeHandler on the WKWebView.\nPrior to iOS 11 there isn't support for intercepting the URL with WKWebView, so we use a custom NSURLProtocol + UIWebView.

    \n

    Important:

    \n

    The custom NSURLProtocol used with UIWebView is shared with all instances of the AWebView, so mapping x-local://local-filename.js => file://app/full/path/local-filename.js is shared between them.

    \n

    API

    \n

    NativeScript View

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValueDescription
    readonly isUIWebViewtrue / falseIs the native webview an UIWebView? True if iOS <11
    readonly isWkWebViewtrue / falseIs the native webview an WKWebView? True if iOS >=11
    srcLoad src
    autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
    builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
    cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
    databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
    debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
    displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
    domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
    scalesPageToFitUIWebView: Should webpage scale to fit the view? Defaults to false
    scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
    supportZoomtrue / falseAndroid: should the webview support zoom
    viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
    registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
    unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
    getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
    loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
    autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
    autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
    executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
    executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
    emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
    getTitle()Returns a promise with the current document title.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
    loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
    loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
    shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
    titleChangedDocument title changed
    webAlertRaised when window.alert is triggered inside the webview, needed to use customs dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed. NOTE: Not supported by UIWebView
    webConfirmRaised when window.confirm is triggered inside the webview, needed to use customs dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed. NOTE: Not supported by UIWebView
    webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
    webPromptRaised when window.prompt is triggered inside the webview, needed to use customs dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
    Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
    \n

    WebView

    \n

    Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
    window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
    window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the AWebView as any other event, data will be a part of the WebViewEventData-object
    \n

    Possible features to come:

    \n
      \n
    • Cookie helpers?
      • \n
    • Setting view-port metadata?
      • \n
    • Share cache with native-layer?
      • \n
    \n

    Android

    \n
      \n
    • Settings\n
        \n
      • AppCache?
        • \n
      • User agent?
        • \n
      \n
      • \n
    \n

    iOS

    \n
      \n
    • Settings?
      • \n
    \n

    Demo and unit tests

    \n

    Running the demo

    \n

    To run the demo-project, the plugin must be build locally and a http-server must be running.

    \n

    The easiest way to run the demo is to follow these steps:

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-plus.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run demo.ios
        • \n
      • npm run demo.android
        • \n
      \n
      • \n
    \n

    Running the unit-tests

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-plus.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run test.ios
        • \n
      • npm run test.android
        • \n
      \n
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    About Nota

    \n

    Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mediafilepicker-fix":{"name":"nativescript-mediafilepicker-fix","version":"1.0.0","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-echo":{"name":"nativescript-echo","version":"1.4.8","license":"Apache-2.0","readme":"

    README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radiobutton":{"name":"nativescript-radiobutton","version":"0.1.0","license":"Apache 2.0","readme":"

    NativeScript-RadioButton

    \n

    \"npm\"\n\"npm\"

    \n

    A NativeScript plugin for the native radiogroup and radiobutton widget.

    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android RadioGroupNONE
    Android RadioButtonNONE
    \n

    Installation

    \n

    From your command prompt/terminal go to your app's root folder and execute:

    \n

    tns plugin add nativescript-radiobutton

    \n

    Useage

    \n

    Angular

    \n

    Import to NgModule for use

    \n
    import { RadioButtonModule } from 'nativescript-radiobutton/angular'

    @NgModule({
        imports: [
            RadioButtonModule
        ]
    })
    \n

    Place this in your view.

    \n
    <StackLayout>
        <RadioGroup [(value)]=\"dataBoundVariable\">
            <RadioButton text=\"Selection 1\"></RadioButton>
            <RadioButton text=\"Selection 2\"></RadioButton>
            <RadioButton text=\"Selection 3\"></RadioButton>
        </RadioGroup>
    </StackLayout>
    \n

    Supported Properties

    \n

    ###RadioButton

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidExample
    enabledenabled="true | false"
    texttext="a string"
    checkedchecked="true | false"
    \n

    ###RadioGroup

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidReturns
    valuethe index of the radio button selected
    \n

    Supported Events

    \n

    ###RadioButton

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidExample
    enabledenabled="true | false"
    texttext="a string"
    checkedchecked="true | false"
    \n

    ###RadioGroup

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidType
    valueEventEmitter
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-vlc-player":{"name":"nativescript-ng2-vlc-player","version":"1.0.2","license":"MIT","readme":"

    nativescript-vlc-player

    \n

    nativescript vlc player plugin for NS-Angular2

    \n

    platforms:

    \n

    1-Android

    \n

    Install

    \n

    tns plugin add nativescript-ng2-vlc-player

    \n

    Sample Usage:

    \n

    https://github.com/kazemihabib/nativescript-vlc-player/tree/master/src/app

    \n

    Usage

    \n
    import {VLCComponent} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";\n@Component({\n  selector: "player",\n  template: `\n            <Button text="play" (tap)="vlcAction.play()"></Button>\n            <vlc #vlcElement [videoPath] = "path" (loaded)="onLoaded(vlcElement)"></vlc>\n          `,\n  directives:[VLCComponent]\n})\n\nexport class playerPage implements OnInit{\n  vlcAction;\n  path="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"\n\n  onLoaded(vlc){\n    this.vlcAction = vlc.getVLCAction();\n  }\n}\n
    \n

    Documentation:

    \n

    VLCComponent:

    \n

    EVents:

    \n
    1-eventPlaying\n2-eventPausd\n3-eventStopped\n4-eventEndReached\n5-eventEncounteredError\n6-eventTimeChanged\n7-eventPositionChanged\n8-eventHardwareAccelerationError\n9-eventCompatibleCpuError\n10-eventNativeCrashError\n11-eventParsedChanged\n12-eventMetaChanged\n
    \n

    example:

    \n

    Template:

    \n
    <vlc (eventPlaying) = "eventPlaying()" ></vlc>\n
    \n

    TS:

    \n
    eventPlaying = function(){\n    console.log('event : Playing');\n}\n
    \n

    methods:

    \n
    1-getVLCAction()\n2-stopPlayback()\n3-getCurrentAspectRatioItem():{value:number,name:string}\n4-getAudioTracks():{id:number,name:string}[]\n
    \n

    Attributes:

    \n
    1- videoPath:string     [getter and setter]\n2- lastPosition: number [getter and setter]\n3- aspectRatio: number  [setter]\n4- audioTrack : number  [getter and setter]\n
    \n

    Objects:

    \n
      vlcAction = {\n    getLength: () : number =>{},\n    getPosition : () :number =>{},\n    isPlaying : ():boolean => {},\n    play : ():void => {},\n    stop : ():void => {},\n    pause : () : void => {},\n    seek:( position:number):void => {},\n    volumeUp:(): {'currentVolume':number,'maxVolume':number} => {},\n    volumeDown:(): {'currentVolume':number,'maxVolume':number} => {},\n  };\n
    \n

    vlcAction can be accessed with getVLCAction method;

    \n

    example:

    \n

    Template:

    \n
      <Button text="play" (tap)="vlcAction.play()"></Button>\n  <Button text="pause" (tap)="vlcAction.pause()"></Button>\n  <vlc #vlcElement [videoPath] = "path" (loaded)="onLoaded(vlcElement)"  [lastPosition]="position" ></vlc>\n
    \n

    TS:

    \n
    vlc;\nvlcAction;\npath="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"\nonLoaded(vlc){\n  this.vlc = vlc;\n  this.vlcAction = vlc.getVLCAction();\n}\n\napplication.android.off(application.AndroidApplication.activityDestroyedEvent);\n  application.android.on(application.AndroidApplication.activityDestroyedEvent,\n    function (args: application.AndroidActivityEventData) {\n      this.vlc.stopPlayback();\n      appSettings.setNumber(this.path, this.vlc.lastPosition);\n    },this);\n
    \n

    VLCSettings:

    \n

    import {VLCSettings} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";

    \n

    getters and setters:

    \n
      static hardwareAcceleration: HW;\n  static timeStretchingAudio: boolean;\n  static frameSkip: boolean;\n  static chromaFormat: chroma;\n  static verboseMode: boolean;\n  static deblocking: deblocking;\n  static networkCachingValue: number;\n
    \n

    enums:

    \n

    import {chroma,HW,deblocking} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";

    \n
    enum HW {\n  HW_ACCELERATION_AUTOMATIC,\n  HW_ACCELERATION_DISABLED,\n  HW_ACCELERATION_DECODING,\n  HW_ACCELERATION_FULL,\n}\nenum chroma {\n  RGB32,\n  RGB16,\n  YUV,\n}\nenum deblocking {\n  automatic,\n  deblocking_always,\n  deblocking_nonref,\n  deblocking_nonkey,\n  deblocking_all,\n}\n
    \n

    example

    \n
    import {chroma,HW,VLCSettings} from "nativescript-ng2-vlc-player/nativescript-ng2-vlc-player";\n\nconsole.log('hardwareAcceleration before set settings: ' +VLCSettings.hardwareAcceleration);\nconsole.log('netowrkCachingValue before set settings: ' + VLCSettings.networkCachingValue)\n\nVLCSettings.hardwareAcceleration = HW.HW_ACCELERATION_DISABLED;\nVLCSettings.networkCachingValue = 3000;\n\n\nconsole.log('hardwareAcceleration after set settings: ' + VLCSettings.hardwareAcceleration);\nconsole.log('networkCachingValue after set settings: ' + VLCSettings.networkCachingValue)\n
    \n

    Just NativeScript without Angular:

    \n

    SOON ...

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-menu":{"name":"nativescript-animated-menu","version":"0.1.5","license":"MIT","readme":"

    nativescript-animated-menu

    \n

    NativeScript module that adds an animated menu to iOS applications. Android support can be implemented on top of this with a little Android animation knowledge, but the structure is there.

    \n

    Installation

    \n

    Run npm install nativescript-animated-menu --save from your project's app directory:

    \n
    .
    ├── app  <------------------------------ run npm install from here
    │   ├── app.css
    │   ├── app.js
    │   ├── bootstrap.js
    │   ├── main-page.js
    │   ├── main-page.xml
    │   ├── node_modules
    │   │   └── nativescript-animated-menu <-- The install will place the module's code here
    │   │       └── ...
    │   └── package.json <----------------- The install will register “nativescript-animated-menu” as a dependency here
    │   └── tns_modules
    │       └── ...
    └── platforms
        └── ios
    \n

    If npm doesn't end up working for you, you can just copy and paste this repo's animatedmenu.js file into your app and reference it directly.

    \n

    Usage

    \n

    To use the Animated Menu Module set up a menu-page and a main-page. These pages with host the views and logic for the menu and whatever other page you'll have the menu accessible from.\nA root page will host the animated menu that references the menu-page and the main-page.

    \n
    root-page      <-------------this is the page that will host the animated menu element
    \t└── animated-menu     <------------the animated menu element will reference the menu page and main page (see below)
    \t\t└── menu-page
    \t\t└── main-page
    \n

    Animated Menu Element

    \n

    The animated menu itself references the menu-page and the main-page with "main" and "menu" attributes.

    \n
    <nu:AniMenu main=\"main-page\" menu=\"menu-page\"></nu:AniMenu>
    \n

    A menu trigger button is places somewhere on the main-page with a load handler that hooks up the animated menu with the button click. You must require() the animated menu module in your main-page logic from your project's node_modules directory:

    \n
    var aniMenu = require( \"./node_modules/nativescript-animated-menu/animatedmenu\" );
    \n

    You will then hook up the trigger button's tap event in the loaded handler like this:

    \n
    function menuBtnLoaded(args) {
        var btn = args.object;
        btn.on('tap', aniMenu.menuTriggerAction);
    }
    exports.menuBtnLoaded = menuBtnLoaded;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-noice-image-picker":{"name":"nativescript-noice-image-picker","version":"1.0.0","license":"MIT","readme":"

    Noice Image Picker

    \n

    A camera/image picker for iOS for NativeScript framework.

    \n

    This is a nice looking image picker/camera.

    \n

    Image Picker for the NativeScript framework

    \n

    An image picker control that supports multiple selection.

    \n

    There is no Android implementation, feel free to contribute!

    \n\n

    Installation

    \n

    Install plugin using NativeScript CLI

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-noice-image-picker
    \n

    Usage

    \n
    var noiceImagePicker = require(\"nativescript-noice-image-picker\");

    let args = {
        imageLimit: 3,
        doneButtonTitle: 'Done'
    };
    // this function returns a promise.
    noiceImagePicker.showPicker(args).then(images => {
        images.forEach(img => {
            this.images.push(img);
        })
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-signin-button":{"name":"nativescript-plugin-google-signin-button","version":"1.0.5","license":"MIT","readme":"

    A NativeScript plugin to create native Google sign-in button

    \n

    Supports Nativescript 3.0.x and Android platform only.

    \n

    Adapts the native Android\nSignInButton\ncontrol

    \n

    Installation

    \n
    tns plugin add nativescript-plugin-google-signin-button\n
    \n

    Screenshot

    \n

    \"\"

    \n

    Usage

    \n
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"\n      xmlns:gsb="nativescript-plugin-google-signin-button">\n    <ScrollView>\n        <StackLayout>\n            <gsb:GsbButton id="gsbButton" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton horizontalAlignment="right" tap="gsbTap"/>\n            <gsb:GsbButton horizontalAlignment="stretch" tap="gsbTap"/>\n\n            <gsb:GsbButton colorStyle="dark" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton colorStyle="light" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton sizeStyle="wide" horizontalAlignment="left" tap="gsbTap"/>\n            <gsb:GsbButton colorStyle="dark" sizeStyle="wide" horizontalAlignment="left" tap="gsbTap"/>\n        </StackLayout>\n    </ScrollView>\n</Page>\n
    \n

    Attributes

    \n
      \n
    • colorStyle - Button color scheme. dark, light, auto (Google Play services will decide the color style\nfor sign-in button)
      • \n
    • sizeStyle - Button size. standard, wide, icon (icon only shown)
      • \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ng":{"name":"tns-ng","version":"1.1.0","license":"MIT","readme":"

    Tns Ng

    \n

    \"npm

    \n

    Angular CLI for Nativescript. Generates component for Nativescript Angular projects

    \n

    Table of Contents

    \n\n

    Installation

    \n
    npm install -g tns-ng
    \n

    Usage

    \n
    tng --help
    \n

    Generating Components and Services

    \n
    tng generate|g [type] [name]
    \n

    You can use the tng generate (or just tng g) command to generate Nativescript Angular components:

    \n
    tng generate component my-component
    tng g component my-component # using the alias

    # components support relative path generation
    # if in the directory app/feature/ and you run
    tng g component my-component
    # your component will be generated in app/feature/my-component
    # but if you were to run
    tng g component feature/my-component
    # your component will be generated in app/feature/my-component

    # This will create four files:
    __my-component__/__my-component__.component.html
    __my-component__/__my-component__.component.ts
    __my-component__/__my-component__.component.android.css
    __my-component__/__my-component__.component.ios.css
    \n

    You can find all possible types in the table below:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ScaffoldUsage
    Componenttng g component my-component
    Servicetng g service my-service
    \n

    Contributing

    \n

    Just fork and pull request :D

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-performance-monitor":{"name":"nativescript-performance-monitor","version":"1.0.0","license":"MIT","readme":"

    NativeScript Performance Monitor

    \n

    Measure and show FPS and (on iOS) CPU usage!

    \n

    \"Demo

    \n

    20 sec video, showing off the plugin on iOS and Android

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-performance-monitor
    \n

    Start monitoring

    \n

    After adding the plugin you can start monitoring from code. There are a few options you can pass in as well (the options object itself is optional as well):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    OptioniOS?Android?Description
    onSample?:white_check_mark::white_check_mark:A callback function that gets invoked on every sample. If you don't want to use the default UI of this plugin you can use this to render your own UI. See the examples below for the function spec.
    hide?:white_check_mark::white_check_mark:Set to true if you don't want the default UI to show. So roll your own or go ito stealth mode entirely.
    textColor?:white_check_mark::white_check_mark:The text color of the monitor view (default white).
    backgroundColor?:white_check_mark::white_medium_square:Background color of the monitor view (default black).
    borderColor?:white_check_mark::white_medium_square:The border color of the monitor view (default black).
    \n

    TypeScript

    \n
    import { PerformanceMonitor, PerformanceMonitorSample } from 'nativescript-performance-monitor';
    import { Color } from \"color\";

    const performanceMonitor: PerformanceMonitor = new PerformanceMonitor();

    // this would suffice..
    performanceMonitor.start();

    // .. but we want to show off the options ;)
    performanceMonitor.start({
      textColor: new Color(\"white\"),
      backgroundColor: new Color(\"black\"),
      borderColor: new Color(\"black\"),
      hide: false,
      onSample: (sample: PerformanceMonitorSample) => {
        console.log(\"FPS: \" + sample.fps);
        if (sample.cpu) { // iOS only
          console.log(\"CPU %: \" + sample.cpu);
        }
      }
    });
    \n

    JavaScript

    \n
    var perfMon = require(\"nativescript-performance-monitor\");
    var color = require(\"color\");

    var performanceMonitor = new perfMon.PerformanceMonitor();

    performanceMonitor.start({
      textColor: new color.Color(\"white\"),
      backgroundColor: new color.Color(\"black\"),
      borderColor: new color.Color(\"black\"),
      hide: false,
      onSample: function (sample) {
        console.log(\"FPS: \" + sample.fps);
        if (sample.cpu) { // iOS only
          console.log(\"CPU %: \" + sample.cpu);
        }
      }
    });
    \n

    Stop monitoring

    \n

    To stop receiving measurements and hide the monitor UI you can simply do this:

    \n
    performanceMonitor.stop();
    \n

    Usage with Angular

    \n

    In any component, or even app.module.ts add:

    \n
    import { PerformanceMonitor } from \"nativescript-performance-monitor\";

    export class MyComponent {
      // use the constructor, or OnInit, or trigger from a button, or whatever really
      constructor() {
        new PerformanceMonitor().start({
          // options
        });
      }
    }
    \n

    Known issues (Android)

    \n
      \n
    • May crash when a Toast is shown on newer Android versions while you're using the default UI.
      • \n
    • UI will hide when app is pauzed / resumed.
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-badge-button":{"name":"nativescript-badge-button","version":"0.1.2","license":"MIT","readme":"

    NativeScript Badge Button Plugin

    \n

    \"npm\"\n\"npm\"

    \n

    Creates a native UIButton with a badge component. Currently only supported on iOS.

    \n

    Getting Started

    \n
      \n
    • npm install nativescript-badge-button --save
      • \n
    • Add the BadgeButton element to your Page tag:
      • \n
    \n
    xmlns:BadgeButton=\"nativescript-badge-button\"
    \n
      \n
    • Use the element on your page:
      • \n
    \n
    <BadgeButton:BadgeButton text=\"Button with Badge\" badgeValue=\"1\" badgeOriginX=\"450\" />
    \n

    Available Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefault
    badgeBGColorUIColorredColor
    badgeTextColorUIColorwhiteColor
    badgeFontUIFontsystemFontOfSize:12.0
    badgePaddingnumber6
    badgeMinSizenumber8
    badgeOriginXnumber0
    badgeOriginYnumber-4
    shouldHideBadgeAtZerobooleantrue
    shouldAnimateBadgebooleantrue
    \n

    Demo

    \n
      \n
    • Note: Incremental badge is animated, but recording tool can only capture 4 fps.\n\"Image\"
      • \n
    \n

    Known Issues

    \n
      \n
    • Positioning of the badge is incorrect when rotating the device
      • \n
    • OriginX of the badge does not auto calculate based on the button text
      • \n
    \n

    Credits

    \n
      \n
    • https://github.com/mikeMTOL/UIBarButtonItem-Badge
      • \n
    • https://github.com/TanguyAladenise/BBBadgeBarButtonItem
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@joaotomaz/nativescript-run-cli":{"name":"@joaotomaz/nativescript-run-cli","version":"1.0.1-alpha.4","license":"ISC","readme":"

    This project is under development. Some features may be removed or added in the future.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-assets":{"name":"nativescript-dev-assets","version":"0.0.7","license":"MIT","readme":"

    \"npm\"\n\"npm\"\n\"twitter:

    \n

    \"NPM\"

    \n

    nativescript-dev-assets

    \n

    This simple before-prepare hook will make an assets folder in your app folder, all files in it will be synced in the platforms/android/src/main/assets folder.

    \n

    Basically to fix this issue and to ease nativescript-lottie.

    \n

    Installation

    \n

    tns install nativescript-dev-assets

    \n

    Usage

    \n

    Just put files in the app/assets folder

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webpack-import-replace":{"name":"nativescript-webpack-import-replace","version":"1.0.2","license":"MIT","readme":"

    ImportReplacePlugin

    \n

    NativeScript webpack plugin to rewrite various imports with the .ios or .android platform suffix to allow various Angular Components, Directives, or Pipes to properly AoT compile when building a NativeScript for Angular app.

    \n

    Install

    \n
    npm install nativescript-webpack-import-replace --save-dev
    \n

    Usage

    \n

    In your app's webpack.config.js, add the following:

    \n
    function getPlugins(platform, env) {
        let plugins = [
          ...
          new ImportReplacePlugin({
              debug: true, // optional - outputs results
              platform: platform,
              files: [
                  'slider.directive'
              ]
          }),
          ...
    \n

    The files collection can be a list of import filenames you'd like replaced with the target platform suffix. The plugin will find the import and add the proper platform ending to the import to allow a proper AoT compile of your NativeScript for Angular app.

    \n

    What does this solve?

    \n

    When using nativescript-dev-webpack plugin with NativeScript for Angular project and you are using platform specific Components, Directives or Pipes, you may run into this type of bundling error:

    \n
    \n

    ERROR in Unexpected value 'CustomDirective in /path/to/YourApp/app/your-folders/custom.directive.d.ts' declared by the module 'YourModule in /path/to/YourApp/app/your-folders/custom.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

    \n
    \n

    In this case, you can add this plugin to your config and designate the name of the import file to adjust to solve the error.

    \n

    Learn why this exists?

    \n

    The development and reason for the creation of this plugin will be featured in an upcoming "NativeScript for Angular" book published via Packt Publishing in the Fall 2017.

    \n

    CREDITS

    \n

    Huge thank you to Stanimira Vlaeva and Alex Vakrilov.

    \n

    LICENSE

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@herefishyfish/nativescript-lokijs-adapter":{"name":"@herefishyfish/nativescript-lokijs-adapter","version":"1.0.2","license":"Apache-2.0","readme":"

    @herefishyfish/nativescript-lokijs

    \n
    ns plugin add @herefishyfish/nativescript-lokijs
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arcnet-plugin/stone-sdk":{"name":"@arcnet-plugin/stone-sdk","version":"1.0.3","license":"Apache-2.0","readme":"

    @arcnet-plugin/stone-sdk

    \n
    ns plugin add @arcnet-plugin/stone-sdk
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animate-sass":{"name":"nativescript-animate-sass","version":"0.0.2","license":"MIT","readme":"

    Nativescript + SASS Animations

    \n

    This is a Nativescript & SASS port of the popular animate.css library for your Nativescript + SASS apps.

    \n

    How To

    \n
      \n
    • Install. (Its expected that you have nativescript-dev-sass installed as well).
      • \n
    \n
    npm i nativescript-animate-sass --save
    \n
      \n
    • In your SASS file.
      • \n
    \n
    @import '~nativescript-animate-sass/animate.scss';
    // or
    // @import '~nativescript-animate-sass/src/pulse.scss';

    // pulse($duration, $function, $infinite?: boolean)
    .pulse {
      @include pulse(2.5s, ease-in, true);
    }
    \n
      \n
    • This should produce
      • \n
    \n
    .pulse { 
      animation-name: pulse;
      animation-duration: 2.5s;
      animation-fill-mode: both;
      animation-timing-function: ease-in;
      animation-iteration-count: infinite;
    }
    \n
      \n
    • In your Component.
      • \n
    \n
      <Button class=\"pulse\" text=\"Animate\"></Button>
    \n
      \n
    • Thats all. For more info on animations, see animate.css.
      • \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shatterview":{"name":"nativescript-shatterview","version":"0.1.5","license":"Apache-2.0","readme":"

    Nativescript Shattervew

    \n

    Make sure to hold down on the view item to see the effect... the cracks start then when they hit the edges it breaks

    \n

    ** ANDROID ONLY (sorry iOS) **

    \n\n
    \n

    Works awesome on device, geny throws lots of cancel events for some reason

    \n
    \n

    Usage

    \n
    var shatterview = require(\"nativescript-shatterview\");

    exports.pageLoaded = function (args) {
        page = args.object;
        page.bindingContext = viewModel;
        
        var options = {
                    complexity: 12,
                    breakDuration: 700,
                    fallDuration: 2000,
                    circleRiftsRadius: 50
                };
        
        var image = page.getViewById(\"image\");
        shatterview.allowShatter(image, options);
        
        var button = page.getViewById(\"button\");
        shatterview.allowShatter(button, options);
        
        var label = page.getViewById(\"label\");
        shatterview.allowShatter(label, options);
        
            
        shatterview.allowShatter(page, options);
    }
    \n

    Methods

    \n
      \n
    • allowShatter(view);
      • \n
    • allowShatter(view, options);
      • \n
    \n

    Events

    \n
        // Args returns the view being maniupulated
        shatterview.on(\"start\", function (args) {
            console.log(\"Break started\");
        });
    \n
      \n
    • start
      • \n
    • cancel
      • \n
    • cancelEnd
      • \n
    • restart
      • \n
    • falling
      • \n
    • fallingEnd
      • \n
    \n

    So you don't handle a tap event to shatter, you make something shatterable and the click\\tap is done automatically by the plugin.

    \n

    BrokenView Plugin lovingly created by zhanyongsheng

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-keyboardshowing":{"name":"nativescript-keyboardshowing","version":"1.0.2","license":"Unsupported","readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    nativescript-keyboardShowing

    \n

    A NativeScript plugin to deal knowing if the keyboard is showing or hiding.

    \n

    ProPlugins

    \n

    We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x.\nIf you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

    \n

    \n

    Community

    \n

    Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such\nI will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Sample Snapshot

    \n

    Installation

    \n

    tns plugin add nativescript-keyboardshowing

    \n

    Usage

    \n

    To use the module you just require() it:

    \n
    var keyboard = require( \"nativescript-keyboardshowing\" );
    console.log(\"keyboard is\", keyboard.isShowing() ? \"showing\" : \"hidden\");

    exports.onKeyboard = function (evt) {
        console.log(\"Keyboard is now\", evt.showing ? 'showing' : 'hidden');
    };
    \n

    You ask, how exactly does this help?

    \n

    Have you ever needed to know if the Soft-keyboard is showing? This plugin gives you that information via a event or a function call.

    \n

    You can add to any page you need it the following Function:

    \n

    exports.onKeyboard = function(args) { }

    \n
    args.showing = true | false
    \n
    args.object = the current page
    \n

    Additional Helper Method

    \n
    var keyboard = require('nativescript-keyboardshowing');
    \n

    keyboard.isShowing()

    \n
    returns: true or false
    \n
    var keyboard = require( \"nativescript-keyboardshowing\" );
    console.log(\"keyboard is\", keyboard.isShowing() ? \"showing\" : \"hidden\");
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nhuttm/nativescript-webrtc":{"name":"@nhuttm/nativescript-webrtc","version":"2.1.0-alpha.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sergeymell/nativescript-svg":{"name":"@sergeymell/nativescript-svg","version":"1.1.2","license":"Apache-2.0","readme":"

    NativeScript SVG

    \n

    The similar version of this plugin for the NativeScript 6\nis available here

    \n

    Disclaimer

    \n
    \n

    This plugin is almost fully based on the source code of Victor Sossa and Juras Norkus.
    \nThank you guys for your hard work and contributions!

    \n
    \n

    Installation

    \n
    ns plugin add @sergeymell/nativescript-svg
    \n

    Prerequisites

    \n

    Before starting using the plugin make sure your svg\nimages will be copied to the build.\nThis can be done by updating webpack.config.js.\nAdd this line to the targets of CopyWebpackPlugin instance

    \n
    { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    \n

    so it should look something like this:

    \n
    new CopyWebpackPlugin({
      patterns: [
        { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
        { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
        { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
        { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
        { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
      ],
    }),
    \n

    Usage

    \n

    You use it in the same way you use Image source.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Android LibraryiOS CocoaPod
    pents90 svg-androidSVGKit by SVGKit
    \n

    ** there are limitations: ** - saveToFile is not working

    \n

    API

    \n
    ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
    \n
      \n
    • Loads this instance from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified file.
      • \n
    \n
    ImageSourceSVGModule.fromData(data: any): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG
    \n
      \n
    • Creates a new ImageSourceSVG instance and loads it from the specified resource name.
      • \n
    \n
    ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG
    \n
      \n
    • Downloads the image from the provided Url and creates a new ImageSourceSVG instance from it.
      • \n
    \n
    \n

    You can call every method in two ways, for example:

    \n
    //from the svf file object
    svgFile.loadFromResource(name: string): boolean  // synchronously
    svgFile.fromResource(name: string): ImageSourceSVG //asynchronously
    \n

    or

    \n
    //from the svg module api
    ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
    \n

    Since ver 1.1 Implement a similar image tag to be used as for example:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
          xmlns:svg=\"@sergeymell/nativescript-svg\" loaded=\"pageLoaded\">
      <StackLayout>
        <!--svg image tag-->
        <svg:SVGImage src=\"~/image/nativescript.svg\" height=\"100\" />
        <svg:SVGImage src=\"https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg\" height=\"200\" />

        <!--normal image tag-->
        <Image src=\"~/images/logo.svg\" stretch =\"none\" />
      </StackLayout>
    </Page>
    \n

    Usage within Angular Apps

    \n

    Import an Angular Module

    \n
    import {NativeScriptSvgModule} from '@sergeymell/nativescript-svg/angular';

    @NgModule({
        [
           ...,
           NativeScriptSvgModule
        ],
        ...
    })
    export class AppModule {}
    \n

    Use custom element in your views

    \n
    <SVGImage src=\"~/images/nativescript.svg\" width=\"256\" height=\"256\"></SVGImage>
    \n

    Additional info

    \n

    Please, refer some best practices of creating svg files

    \n
      \n
    • https://jwatt.org/svg/authoring/#doctype-declaration
      • \n
    • https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-afnetworking":{"name":"nativescript-afnetworking","version":"1.0.3","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-AFNetworking/blob/master/LICENSE"},"readme":"

    NativeScript-afnetworking

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-afnetworking
    \n

    Usages

    \n

    Example

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-label-marquee":{"name":"@nstudio/nativescript-label-marquee","version":"1.0.1","license":"Apache-2.0","readme":"

    @nstudio/nativescript-label-marquee

    \n

    A Label which can scroll with a marquee effect when the text outgrows the available width.

    \n
    ns plugin add @nstudio/nativescript-label-marquee
    \n

    Usage

    \n

    JavaScript/TypeScript

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:lm=\"@nstudio/nativescript-label-marquee\">
        <StackLayout>
            <lm:LabelMarquee 
                text=\"Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view.\"
                fadeLength=\"150\" 
                scrollDuration=\"20\"></lm:LabelMarquee>
        </StackLayout>
    </Page>
    \n
      \n
    • labelize: boolean Turn scrolling off to display as normal Label.
      • \n
    • fadeLength: number (iOS Only) the width of the faded text on either side while scrolling.
      • \n
    • scrollDuration: number (iOS Only) speed of the scrolling text measured by duration in seconds to scroll from start to finish.
      • \n
    \n

    Angular

    \n
    import { registerElement } from '@nativescript/angular';
    import { LabelMarquee } from '@nstudio/nativescript-label-marquee';

    registerElement('LabelMarquee', () => LabelMarquee);
    \n

    Usage in components:

    \n
    <LabelMarquee 
        text=\"Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view.\"
        fadeLength=\"150\" 
        scrollDuration=\"20\">
    </LabelMarquee>
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-media-metadata-retriever":{"name":"nativescript-media-metadata-retriever","version":"1.0.77","license":"MIT","readme":"

    Media Metadata Retriever Plugin for Nativescript

    \n

    This plugin is based on the MediaMetadataRetriever in Android.

    \n

    Installation

    \n

    tns plugin add nativescript-media-metadata-retriever

    \n

    Usage

    \n

    This plugin is used to extract media metadata like albumname, artist, title, etc. from media files.\nThis plugin can only be used in Android.

    \n

    Example (Angular)

    \n

    Typescript file (app.component.ts)

    \n
    import { Component, OnInit } from \"@angular/core\";
    import { MediaMetadataRetriever } from \"nativescript-media-metadata-retriever\";
    import { Page } from \"ui/page\";
    import { ImageFormat } from \"ui/enums\";

    import * as imageSource from \"image-source\";
    import * as fs from \"file-system\";
    import * as permissions from \"nativescript-permissions\";  //Recommended
    declare var android;

    @Component({
        selector: \"ns-app\",
        templateUrl: \"app.component.html\",
        styleUrls: [\"app.component.css\"]
    })

    export class AppComponent { 
        path: string;
        artist: string;
        title: string;
        mmr: MediaMetadataRetriever;
        bitArray: Array<number>;
        allMetadata: string;
        src: string;

        constructor(private page: Page) { }

        ngOnInit(): void {
            this.mmr = new MediaMetadataRetriever();    //Create the object of the classs
        }

        //Get the metadata when the button is pressed
        getMetadata() {
            //Set the data source for the media file
            this.mmr.setDataSource(this.path + '');

            //Get a particular metadata
            this.mmr.extractMetadata(MediaMetadataRetriever._METADATA_KEY_TITLE)    //For title of media
            .then((args) => {
                this.title = args;
            });
            this.mmr.extractMetadata(MediaMetadataRetriever._METADATA_KEY_ARTIST)   //For artist name
            .then((args) => {
                this.artist = args;
            });

            //Get all the metadata
            this.mmr.extractAllMetadata()
            .then((args) => {
                this.allMetadata = JSON.stringify(args);
                /*
                You can also use args.title, args.artist, args.album ...
                as it includes a JSON array of objects
               */
            });

            //Get the Embedded Picture(Bitmap)
            this.mmr.getEmbeddedPicture()
            .then((args) => {
                var albumArt = this.page.getViewById(\"albumArt\"); //Where albumArt is the ID of an Image element
                var img = new imageSource.ImageSource();
                img.setNativeSource(args);
                albumArt.set(\"src\", img);
                console.log(\"ImageSource set...\");
            })
            .catch((ex) => {
                //Do something else
                console.log(\"Failed to set ImageSource...\" + ex);
            });
        }

        //This app needs storage permission
        //P.S. this is not necessary as you can do it manually by going into App Settings
        getPermissions(): void {
            if (!permissions.hasPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE))     {
                console.log(\"Asking for permissions...\");
                permissions.requestPermissions([
                    android.Manifest.permission.READ_EXTERNAL_STORAGE,
                    android.Manifest.permission.WRITE_EXTERNAL_STORAGE
                ])
                .then(() => {
                    console.log(\"Permissions granted...\");
                })
                .catch(() => {
                    console.log(\"Permissions denied...\");
                })
            } else {
                console.log(\"App has necessary permissions...\");
            }
        }
    }
    \n

    API

    \n

    Set the data source for media file

    \n
      \n
    • setDataSource(path: string): Promise
      • \n
    \n

    Extract a single metadata based on given keycode

    \n
      \n
    • extractMetadata(keyCode: number): Promise
      • \n
    \n

    Extract all the metadata from the media file

    \n
      \n
    • extractAllMetadata(): Promise
      • \n
    \n

    Get the embedded picture from the file (Bitmap)

    \n
      \n
    • getEmbeddedPicture(): Promise<android.graphics.Bitmap>
      • \n
    \n

    KEYCODES

    \n
      \n
    • _METADATA_KEY_ALBUM
      • \n
    • _METADATA_KEY_ALBUMARTIST
      • \n
    • _METADATA_KEY_ARTIST
      • \n
    • _METADATA_KEY_AUTHOR
      • \n
    • _METADATA_KEY_BITRATE
      • \n
    • _METADATA_KEY_CD_TRACK_NUMBER
      • \n
    • _METADATA_KEY_COMPILATION
      • \n
    • _METADATA_KEY_COMPOSER
      • \n
    • _METADATA_KEY_DATE
      • \n
    • _METADATA_KEY_DISK_NUMBER
      • \n
    • _METADATA_KEY_DURATION
      • \n
    • _METADATA_KEY_GENRE
      • \n
    • _METADATA_KEY_HAS_AUDIO
      • \n
    • _METADATA_KEY_HAS_VIDEO
      • \n
    • _METADATA_KEY_HAS_LOCATION
      • \n
    • _METADATA_KEY_HAS_MIMETYPE
      • \n
    • _METADATA_KEY_NUM_TRACKS
      • \n
    • _METADATA_KEY_TITLE
      • \n
    • _METADATA_KEY_VIDEO_HEIGHT
      • \n
    • _METADATA_KEY_VIDEO_ROTATION
      • \n
    • _METADATA_KEY_VIDEO_WIDTH
      • \n
    • _METADATA_KEY_WRITE
      • \n
    • _METADATA_KEY_YEAR
      • \n
    \n

    Note

    \n

    You can also use extractAllMetadata(): Promise to get some specified result like title, album, albumartist, artist, etc. as shown below

    \n
    this.mmr.extractAllMetadata()
          .then((args) => {
              this.albumartist = args.albumartist;
              this.artist = args.artist; 
              this.author = args.author; 
              this.bitrate = args.bitrate;
              this.cdtracknumber = args.cdtracknumber;
              this.compilation = args.compilation; 
              this.composer = args.composer; 
              this.date = args.date; 
              this.disknumber = args.disknumber;
              this.duration = args.duration;
              this.genre = args.genre;
              this.hasaudio = args.hasaudio;
              this.haslocation = args.haslocation;
              this.hasmimetype = args.hasmimetype;
              this.hasvideo = args.hasvideo;
              this.numtracks = args.numtracks;
              this.title = args.title;
              this.videorotation = args.videorotation;
              this.width = args.width;
              this.write = args.write;
              this.year = args.year;
              ...
          });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-idle":{"name":"nativescript-idle","version":"1.0.1","license":"Apache-2.0","readme":"

    A NativeScript plugin that lets you to post a callback to be executed when the application is in relatively idle state.\nThis can be used to schedule short-lived tasks that have to be executed on the main thread but are not critical and can be postponed for times when the user is not interacting with the application.

    \n

    For example:

    \n
    import { requestIdleFrame } from \"nativescript-idle\";

    requestIdleFrame(() => {
        var msg = \"preloading \" + route.path;
        console.log(msg);
        var start = Date.now();
        // Task taking ~40ms.
        load();
        this.loadedPaths.push(route.path);
        var end = Date.now();
        console.log(msg + \" in \" + (end - start))    ;
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-in-app-notifications":{"name":"nativescript-in-app-notifications","version":"2.0.0","license":"MIT","readme":"

    NativeScript In App Notifications plugin

    \n

    \"npm

    \n

    This is a plugin to show in app notifications on iOS, using BSForegroundNotification v3.1).

    \n

    Demo

    \n

    Check out the demo folder for a sample usage.

    \n

    Angular 2

    \n

    Usage:

    \n
      \n
    1. Add the plugin to your project:
      2. \n
    \n
    npm install nativescript-in-app-notifications
    \n
      \n
    1. To show a notification call showNotification:
      2. \n
    \n
      InAppNotifications.getInstance().showNotification('This is a notification', 'This is the title', () => {
                  console.log('tap');
              });
    \n

    Try the Demo

    \n

    To try the demo run the following commands:

    \n
    npm run setup
    npm run build.demo
    npm run dev.ios
    \n

    If you change files in the demo project and want to run the app again:

    \n
    npm run build.demo
    npm run dev.ios
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-azure-mobile-basic":{"name":"nativescript-azure-mobile-basic","version":"0.1.2","license":{"type":"MIT","url":"https://github.com/alexziskind1/NativeScript-Azure-Mobile-Services-Module-Basic/blob/master/LICENSE"},"readme":"

    NativeScript Azure Mobile Services Basic

    \n

    NativeScript module for basic table data GET via Azure Mobile Services as a backend. Use require() to include the module.\nThis is a super basic fetch using a URL, key, and table name to demonstrate the concept. A more in-depth Azure Mobile Services module is coming.

    \n

    Usage

    \n
      \n
    1. set up an Azure Mobile Service, get the URL and Application key.
      2. \n
    2. create the MobileServiceClient
      3. \n
    \n
    // viewmodel.js
        var client = new azuremobile.MobileServiceClient(
            \"https://<Your Mobile Service URL>\", 
            \"<Your mobile service application key>\"
        );
    \n
      \n
    1. call getTableItems on the client, passing in the table name and the data column name
      2. \n
    \n
        var itemArr = [];

        client.getTableItems('<tableName>', '<dataColumnName>', itemArr)
            .then(function(){
                for (var i = 0; i < itemArr.length; ++i) {
                    tasks.push(itemArr[i]);
                }
            });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-raygun":{"name":"nativescript-raygun","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/pocketsmith/nativescript-raygun/blob/master/LICENSE"},"readme":"

    nativescript-raygun

    \n

    nativescript-raygun is a plugin for NativeScript which adds support for error reporting with Raygun. The plugin uses the native Raygun SDKs for iOS and Android.

    \n

    Installation

    \n
    tns plugin add nativescript-raygun
    \n

    Usage

    \n

    Firstly, you need to create Raygun applications for your iOS and Android apps. You'll get a separate API key for each.

    \n

    Somewhere central in your app (such as app.js), you need to start the Raygun error reporting.

    \n
    var application = require(\"application\");
    var raygun = require(\"nativescript-raygun\");

    raygun.start(application.ios ? \"your-ios-key-here\" : \"your-android-key-here\");
    \n

    And that's it! If your app crashes, the error will be sent to Raygun (see notes below).

    \n

    If you have users that log into your app, you will want to identify them with Raygun so errors they encounter will be tracked against that user. After starting Raygun error reporting, or when the user logs into your app, identify them:

    \n
    raygun.identify({
      identifier: user.id.toString(), // identifier must be a string
      email: user.email,
      fullName: user.first_name + \" \" + user.last_name,
      firstName: user.first_name
    });
    \n

    Notes

    \n

    When testing that error reporting is working correctly, note that for iOS, errors will not be submitted until the app is next opened by the user. Also note that errors will not be submitted when the app is hooked up to the Xcode debugger.

    \n

    To test error reporting is working on iOS, you should run the app on a simulator, hit the stop button in Xcode, start the app in the simulator (which is no longer hooked up to the Xcode debugger) and cause a crash. Open the app, and the crash report will be sent to Raygun.

    \n

    Android crashes will be submitted immediately.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-set-version":{"name":"nativescript-set-version","version":"0.3.1","license":"ISC","readme":"

    nativescript-set-version

    \n

    \"License:

    \n

    This tool allows you to easily update the version of a Nativescript application.\nIt will update the following files if found:

    \n
      \n
    • ./package.json
      • \n
    • ./app/App_Resources/Android/src/main/AndroidManifest.xml
      • \n
    • ./app/App_Resources/Android/app/app.gradle
      • \n
    • ./app/App_Resources/iOS/Info.plist
      • \n
    \n

    Version number format

    \n

    In order to use this package, your project version must comply with the format described on semver.org.

    \n

    Setup and Usage

    \n

    There are two ways to install nativescript-set-version: globally and locally.

    \n

    Local Installation

    \n

    This is the recommended way to install nativescript-set-version.

    \n

    npm:

    \n
    npm install nativescript-set-version --save-dev
    \n

    yarn:

    \n
    yarn add nativescript-set-version --dev
    \n

    You can then use this command in your project directory to run nativescript-set-version:

    \n

    npm:

    \n
    $ npm run setVersion <version>
    -- or --
    $ npm run set-version <version>
    \n

    yarn:

    \n
    $ yarn setVersion <version>
    -- or --
    $ yarn set-version <version>
    \n

    Global Installation

    \n

    This installation method allows you to use nativescript-set-version in any project.

    \n

    npm:

    \n
    npm install -g nativescript-set-version
    \n

    yarn:

    \n
    yarn global add nativescript-set-version
    \n

    You can then use this command in your project directory to run nativescript-set-version:

    \n
    setVersion <version>
    -- or --
    set-version <version>
    \n

    Behaviour

    \n

    When invoked, nativescript-set-version will make the following changes to your project files:

    \n

    Update Package Version

    \n

    The version attribute in package.json will be updated with the specified version.

    \n

    Update Android Project Version

    \n

    It will update the version name and the version code in both app.gradle and AndroidManifest.xml.

    \n

    About AndroidManifest.xml

    \n

    Version information should not be in the AndroidManifest.xml since this information is overridden by app.gradle.

    \n

    See https://developer.android.com/studio/publish/versioning for further informations.

    \n

    For that reason nativescript-set-version will only write in the AndroidManifest.xml if android:versionCode and/or android:versionName are already in the file.

    \n

    Update iOS Project Version

    \n

    It will update the CFBundleShortVersionString and the CFBundleVersion in Info.plist.

    \n

    How the version code and CFBundleVersion are updated

    \n

    The Android version code represents your version number as an integer. This\npackage uses the following format to generate this integer:

    \n
    <MAJOR><MINOR ON 2 DIGITS><PATCH ON 2 DIGITS><BUILD NUMBER>
    \n

    For instance, the first time you call set-version 3.1.4, it will produce the version code 301041.

    \n

    If you call the command with the same version a second time, it will increment the build number, to produce 301042.

    \n

    This also applies if, for instance, you call set-version 3.1.4-rc.1, and then set-version 3.1.4-rc.2.

    \n

    As for the CFBundleVersion on iOS, it will produce a string in the format <MAJOR>.<MINOR>.<PATCH>.<BUILD NUMBER>.

    \n

    Example:

    \n
    $ yarn set-version 1.0.0-rc.1
    # Output
    # ...
    # Will set android version code to 100001
    # ...
    # Will set CFBundleVersion to 1.0.0.1
    $ yarn set-version 1.0.0-rc.2
    # Output
    # ...
    # Will set android version code to 100002
    # ...
    # Will set CFBundleVersion to 1.0.0.2
    $ yarn set-version 1.0.0
    # Output
    # ...
    # Will set android version code to 100003
    # ...
    # Will set CFBundleVersion to 1.0.0.3
    \n

    License

    \n

    This software uses the MIT license.

    \n

    Contributing

    \n

    You must use the following style guide:

    \n\n

    This project contains a linting config, you should setup eslint into your IDE with .eslintrc.js.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file":{"name":"nativescript-handle-file","version":"4.0.0","license":"MIT","readme":"

    nativescript-handle-file

    \n

    This module gives you a tool to download, choose folder to save and then open an app to open file.

    \n

    Instalation

    \n
    tns plugin add nativescript-handle-file
    \n

    How to use

    \n

    Import class and instance it.

    \n
    import {HandleFile} from 'nativescript-handle-file';

    let handleFile = new HandleFile();
    handleFile.open({
        name : \"name-of-file.extension\",
        url: \"path-to-file\",
        directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
        tittle: \"title to choose apps\" // only in android
    }).then(result => {
        //return true if success
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-passportscanner":{"name":"nativescript-passportscanner","version":"1.0.0","license":"MIT","readme":"

    NativeScript Flashlight Plugin

    \n

    A plugin for using your device's flashlight in NativeScript Android and iOS apps.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-flashlight
    \n

    This command automatically installs the necessary files, as well as stores nativescript-flashlight as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the flashlight module you must first require() it:

    \n
    // JavaScript
    var flashlight = require(\"nativescript-flashlight\");
    \n

    Or if you’re using TypeScript, import the module:

    \n
    // TypeScript
    import * as flashlight from \"nativescript-flashlight\";
    \n

    After you have a reference to the module you can then call its on(), off(), and toggle() methods. For example, the code below turns your device's flashlight on with an intensity setting of 25%.

    \n

    The optional intensity is supported only on iOS and is by default 1.0, which is 100% brightness.

    \n
    // my-page.js
    var flashlight = require(\"nativescript-flashlight\");
    flashlight.on({
        intensity: 0.25
    });
    \n

    In most cases you'll want to wrap your on() call with a check of isAvailable(), to handle devices where a flashlight is not available:

    \n
    // my-page.js
    var flashlight = require(\"nativescript-flashlight\");
    if (flashlight.isAvailable()) {
    \tflashlight.on();
    } else {
    \talert(\"A flashlight is not available on your device.\");
    }
    \n

    Examples

    \n

    The code below creates a button that toggles the device's flashlight:

    \n
    <!-- my-page.xml -->
    <Page loaded=\"pageLoaded\">
        <StackLayout>
            <Button text=\"{{ flashlightState }}\" tap=\"{{ toggleFlashlight }}\" />
        </StackLayout>
    </Page>
    \n
    // my-page.js
    var flashlight = require(\"nativescript-flashlight\");
    var observable = require(\"data/observable\");
    var viewModel = new observable.Observable();

    // Set the initial text of the button
    viewModel.set(\"flashlightState\", \"Turn on\");

    // A tap handle for the page's button. Toggle the state of the flashlight
    // and the button's text
    viewModel.toggleFlashlight = function() {
        if (flashlight.isAvailable()) {
            flashlight.toggle({
                intensity: 0.6 // optional, supported on iOS only (default: 1.0 which is 100% brightness)
            });
            viewModel.set(\"flashlightState\", (flashlight.isOn() ? \"Turn off\" : \"Turn on\"));
        } else {
            alert(\"A flashlight is not available on your device.\");
        }
    };

    function pageLoaded(args) {
        var page = args.object;
        page.bindingContext = viewModel;
    }

    exports.pageLoaded = pageLoaded;
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-supabase-realtime":{"name":"@triniwiz/nativescript-supabase-realtime","version":"0.3.0","license":"Apache-2.0","readme":"

    Nativescript Supabase Realtime Client

    \n
    ns plugin add @triniwiz/nativescript-supabase-realtime
    \n

    Usage

    \n

    Realtime Client

    \n

    Listens to changes in a PostgreSQL Database and via websockets.

    \n

    This is for usage with Supabase Realtime server.

    \n

    Usage

    \n

    Creating a Socket connection

    \n

    You can set up one connection to be used across the whole app.

    \n
    import { RealtimeClient } from '@triniwiz/nativescript-supabase-realtime'

    var client = new RealtimeClient(process.env.REALTIME_URL)
    client.connect()
    \n

    You can pass in your JWT If you have enabled JWT authorization in Supabase Realtime server.

    \n
    import { RealtimeClient } from '@triniwiz/nativescript-supabase-realtime'

    var client = new RealtimeClient(process.env.REALTIME_URL, { params: { apikey: 'token123' }})
    client.connect()
    \n

    See Realtime: Channels Authorization for more information.

    \n

    Socket Hooks

    \n
    client.onOpen(() => console.log('Socket opened.'))
    client.onClose(() => console.log('Socket closed.'))
    client.onError((e) => console.log('Socket error', e.message))
    \n

    Subscribing to events

    \n

    You can listen to INSERT, UPDATE, DELETE, or all * events.

    \n

    You can subscribe to events on the whole database, schema, table, or individual columns using channel(). Channels are multiplexed over the Socket connection.

    \n

    To join a channel, you must provide the topic, where a topic is either:

    \n
      \n
    • realtime - entire database
      • \n
    • realtime:{schema} - where {schema} is the Postgres Schema
      • \n
    • realtime:{schema}:{table} - where {table} is the Postgres table name
      • \n
    • realtime:{schema}:{table}:{col}.eq.{val} - where {col} is the column name, and {val} is the value which you want to match
      • \n
    \n

    Examples

    \n
    // Listen to events on the entire database.
    var databaseChanges = client.channel('realtime:*')
    databaseChanges.on('*', (e) => console.log(e))
    databaseChanges.on('INSERT', (e) => console.log(e))
    databaseChanges.on('UPDATE', (e) => console.log(e))
    databaseChanges.on('DELETE', (e) => console.log(e))
    databaseChanges.subscribe()

    // Listen to events on a schema, using the format `realtime:{SCHEMA}`
    var publicSchema = client.channel('realtime:public')
    publicSchema.on('*', (e) => console.log(e))
    publicSchema.on('INSERT', (e) => console.log(e))
    publicSchema.on('UPDATE', (e) => console.log(e))
    publicSchema.on('DELETE', (e) => console.log(e))
    publicSchema.subscribe()

    // Listen to events on a table, using the format `realtime:{SCHEMA}:{TABLE}`
    var usersTable = client.channel('realtime:public:users')
    usersTable.on('*', (e) => console.log(e))
    usersTable.on('INSERT', (e) => console.log(e))
    usersTable.on('UPDATE', (e) => console.log(e))
    usersTable.on('DELETE', (e) => console.log(e))
    usersTable.subscribe()

    // Listen to events on a row, using the format `realtime:{SCHEMA}:{TABLE}:{COL}.eq.{VAL}`
    var rowChanges = client.channel('realtime:public:users:id.eq.1')
    rowChanges.on('*', (e) => console.log(e))
    rowChanges.on('INSERT', (e) => console.log(e))
    rowChanges.on('UPDATE', (e) => console.log(e))
    rowChanges.on('DELETE', (e) => console.log(e))
    rowChanges.subscribe()
    \n

    Removing a subscription

    \n

    You can unsubscribe from a topic using channel.unsubscribe().

    \n

    Disconnect the socket

    \n

    Call disconnect() on the socket:

    \n
    let { error, data } = await client.disconnect()
    \n

    Duplicate Join Subscriptions

    \n

    While the client may join any number of topics on any number of channels, the client may only hold a single subscription for each unique topic at any given time. When attempting to create a duplicate subscription, the server will close the existing channel, log a warning, and spawn a new channel for the topic. The client will have their channel.onClose callbacks fired for the existing channel, and the new\nchannel join will have its receive hooks processed as normal.

    \n

    Channel Hooks

    \n
    channel.onError( () => console.log(\"there was an error!\") )
    channel.onClose( () => console.log(\"the channel has gone away gracefully\") )
    \n
      \n
    • onError hooks are invoked if the socket connection drops, or the channel crashes on the server. In either case, a channel rejoin is attempted automatically in an exponential backoff manner.
      • \n
    • onClose hooks are invoked only in two cases. 1) the channel explicitly closed on the server, or 2). The client explicitly closed, by calling channel.unsubscribe()
      • \n
    \n

    Subscription Hooks

    \n

    publicSchema
      .subscribe()
      .receive('ok', () => console.log('Connected.'))
      .receive('error', () => console.log('Failed.'))
      .receive('timeout', () => console.log('Timed out, retrying.'))
    \n

    Event Responses

    \n

    Events are returned in the following format.

    \n
    type Response = {
      // the change timestampe. eg: \"2020-10-13T10:09:22Z\".
      commit_timestamp: string 

      // the database schema. eg: \"public\".
      schema: string 
      
      // the database table. eg: \"users\".
      table: string 
      
      // the event type.
      type: INSERT | UPDATE | DELETE 
      
      // all the columns for this table. See \"column\" type below.
      columns: column[] 
      
      // the new values. eg: { \"id\": \"9\", \"age\": \"12\" }.
      record: object 

      // the previous values. eg: { \"id\": \"9\", \"age\": \"11\" }. Only works if the table has `REPLICATION FULL`.
      old_record: object 
    }

    type column = {
      // any special flags for the column. eg: [\"key\"]
      flags: string[] 
      
      // the column name. eg: \"user_id\"
      name: string 
      
      // the column type. eg: \"uuid\"
      type: string 
      
      // the type modifier. eg: 4294967295
      type_modifier: number 
    }
    \n

    Credits

    \n

    Based on realtime-js

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fafn/nativescript":{"name":"@fafn/nativescript","version":"16.0.0","readme":"

    nativescript

    \n

    This library was generated with Nx.

    \n

    Running unit tests

    \n

    Run nx test nativescript to execute the unit tests.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/ml-kit":{"name":"@awarns/ml-kit","version":"1.0.1","license":"Apache-2.0","readme":"

    @awarns/ml-kit

    \n

    \"npm\n\"npm\"

    \n

    This module allows to execute TensorFlow Lite machine learning models embedded in the mobile device,\nwhich is useful to make predictions based on some input data.

    \n

    Supported models architectures are Convolutional Neural Networks (CNN) and Multilayer Perceptrons (MLP), both for classification\nand regression problems.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/ml-kit
    \n

    Usage

    \n

    After installing this plugin, you will have access to an API and two tasks to perform classification or regression on the provided input data.\nBut before using the plugin, you must meet the following requirements regarding the machine learning model:

    \n
      \n
    • Have a TensorFlow Lite machine learning model (*.tflite) of the supported architectures (CNN or MLP). Classification models must have\nmetadata (i.e., name, version, author, etc...) and an associated labels file\nwith each label in a row of the file. While regression models don't have to include an associated labels file, it's recommended to add the metadata with the information of the model.
      • \n
    • Place your TensorFlow Lite models in a folder named ml-models inside your app's src folder (i.e., same level as {app|main}.ts).\n
        \n
      • The model file name must follow the next format: {model_name}-{cnn|mlp}-[version].tflite. The file name must contain a name (model_name),\nthe model's architecture (cnn or mlp) and, optionally, the model's version (version). The file name elements must be splitted by a dash (-).
        • \n
      \n
      • \n
    \n

    API

    \n

    In order to do a regression or a classification, first you have to load a machine learning model. You can do that using the getModel(...) method provided\nby the ModelManager. It also provides the listModels method, useful known which models are available in the device.

    \n

    When you load a model using the getModel(...) method, you obtain a BaseModel or a ClassificationModel to perform a regression or a\nclassification, respectively. To do so, you can create a Regressor using a BaseModel, and a Classifier using\na ClassificationModel. Finally, to perform the prediction, you just have to call to the predict method, which will return a RegressionResult or a ClassificationResult, depending on which predictor has been used.

    \n

    Here's a complete example:

    \n
    import {
      BaseModel,
      ClassificationModel,
      ClassificationResult,
      Classifier,
      DelegateType,
      getModelManager,
      InputData,
      ModelType, RegressionResult, Regressor
    } from '@awarns/ml-kit';

    async function doClassification(inputData: InputData /* number[] */) {
      const model: ClassificationModel = await getModelManager().getModel(
        'activity_classifier-cnn',
        ModelType.CLASSIFICATION,
        { acceleration: DelegateType.GPU } // Use GPU, if available.
      );

      const classifier = new Classifier(model);
      const result: ClassificationResult = classifier.predict(inputData);
    }

    async function doRegression(inputData: InputData /* number[] */) {
      const model: BaseModel = await getModelManager().getModel(
        'stress_regressor-cnn',
        ModelType.REGRESSION,
        { acceleration: 4 } // Use 4 threads.
      );

      const regressor = new Regressor(model);
      const result: RegressionResult = regressor.predict(inputData);
    }
    \n
    \n

    Note: the RegressionResult and ClassificationResult are not framework records. If you want to introduce these results into the framework\nfor example, to persist them using the persistence package,\nyou have to manually create a Regression and Classification records.

    \n
    \n

    ModelManager

    \n

    You can obtain the singleton instance of the ModelManager calling the getModelManager() function.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    listModels()Promise<Model[]>Returns a list of the models that are available for their use.
    getModel(modelName: string, modelType: ModelType, modelOptions?: ModelOptions)Promise<BaseModel|ClassificationModel>Retrieves and loads the specified model, ready to be used.
    \n
    Model
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    modelInfoModelInfoContains model's metadata.
    \n
    ModelInfo
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringIdentifier of the model, generally the name of its file.
    namestringName info included in the model's metadata.
    architectureModelArchitectureArchitecture of the model, i.e., CNN or MLP.
    versionstringVersion info included in the model's metadata.
    authorstringAuthor info included in the model's metadata.
    \n
    ModelType
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ValueDescription
    REGRESSIONA model that performs a regression.
    CLASSIFICATIONA model that performs a classification.
    \n
    ModelOptions
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    accelerationDelegateType | numberWhich type of acceleration to use when running the model. It can take the values DelegateType.GPU (GPU acceleration), DelegateType.NNAPI (Android Neural Networks API acceleration) or a number indicating the quantity of threads to use.
    \n

    Regressor

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    predict(inputData: InputData)RegressionResultPreforms a regression using the provided data.
    \n

    Classifier

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodReturn typeDescription
    predict(inputData: InputData)ClassificationResultPreforms a classification using the provided data.
    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    {classificationAim}Classification{tag?}It performs a classification using the input data contained on the invocation event's payload. classificationAim is used to differentiate among classification tasks. An optional tag can be added to the task name.
    {regressionAim}Regression{tag?}It performs a regression using the input data contained on the invocation event's payload. regressionAim is used to differentiate among regression tasks. An optional tag can be added to the task name.
    \n
    \n

    Note: the input data provided through the invocation event's payload must be an array of numbers ready to be feed into the model.\nIn other words, the main application is the one in charge of executing the required data preprocessing techniques (e.g., normalization, feature extraction, etc...) to prepare the data for the model, not this module.

    \n
    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      classificationTask,
      regressionTask,
      DelegateType,
    } from '@awarns/ml-kit';
    import { DelegateType } from './index';

    export const demoTasks: Array<Task> = [
      classificationTask('human-activity', 'activity_classifier-mlp', '', { acceleration: 4 }),
      // humanActivityClassification

      classificationTask('human-activity', 'activity_classifier-cnn', 'UsingCNN', { acceleration: DelegateType.GPU }),
      // humanActivityClassificationUsingCNN
      
      regressionTask('stress-level', 'stress_regressor-cnn'),
      // stressLevelRegression
    ]
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter nameTypeDescription
    {classification|regression}AimstringObjective of the classification/regression. Used to name the task.
    modelNamestring | ModelNameResolverName of the model (without tflite extension) stored in the ml-models folder to use for this task, or a function that returns the name of the model when called.
    tag (Optional)stringAdds a tag to the name of the task to differentiate it from other tasks with other configurations.
    modelOptions (Optional)ModelOptions | ModelOptionsResolverConfiguration to use with the model or a function that returns the configuration when called.
    \n
    \n

    Note: It's highly recommended to provide the {classification|regression}Aim in snake-case format. This string will be used as the type of the output record of the task.\nAll the records have their type in snake-case, so providing the {classification|regression}Aim in snake-case will keep the consistency of the framework.

    \n
    \n
    ModelNameResolver: () => string
    \n

    Useful to change the model used by a task at runtime. You can use the ModelManager to obtain a list with the models that are available in the device.

    \n
    ModelOptionsResolver: () => ModelOptions
    \n

    Useful to change the options used by the model of a task at runtime.

    \n

    Tasks output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('inputDataForHumanActivity', run('humanActivityClassificationUsingCNN'));
    on('humanActivityPredicted', run('writeRecords'));

    on('inputDataStressLevel', run('stressLevelRegression'));
    on('stressLevelPredicted', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    {classificationAim}PredictedClassificationIndicates that a classification has been completed.
    {regressionAim}PredictedRegressionIndicates that a regression has been completed.
    \n

    Records

    \n

    Classification

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways {classificationAim}-prediction.
    changeChangeAlways NONE.
    timestampDateThe local time when the model predicted the classification result.
    classificationResultClassificationResultObject containing the results of the classification.
    \n
    ClassificationResult
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    predictionClassificationPrediction[]Array of the classification predictions generated by the model.
    modelNamestringThe name of the model used for the classification.
    architecturestringThe architecture of the model used for the classification.
    versionstringThe version of the model used for the classification.
    \n
    ClassificationPrediction
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    labelstringIdentifier of the class.
    scorenumberScore of the prediction.
    \n

    Regression

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways {regressionAim}-prediction.
    changeChangeAlways NONE.
    timestampDateThe local time when the model predicted the regression result
    regressionResultRegressionResultObject containing the results of the regression.
    \n
    RegressionResult
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    predictionnumber[]Array of numbers with the results generated by the model.
    modelNamestringThe name of the model used for the regression.
    architecturestringThe architecture of the model used for the regression.
    versionstringThe version of the model used for the regression.
    \n

    License

    \n

    Apache License Version 2.0

    \n

    Disclaimer

    \n

    While we state that CNN models are supported, only 1D-CNN models have been tested. The code is general enough to support 2D and 3D CNN models with one input tensor,\nbut they have not been tested. If you try 2D/3D-CNN models and something is not working as expected, contact us.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-10hook-release-info":{"name":"nativescript-10hook-release-info","version":"1.0.0","license":"BSD-4-Clause","readme":"

    nativescript-10hook-release-info

    \n

    Add release info to the app

    \n
    Detect app in release (production) mode or not
    \n

    Install

    \n
    tns plugin add nativescript-10hook-release-info
    \n

    Usage

    \n
      \n
    • \n

      build or prepare app

      \n
        \n
      • will create release-info.json in app directory
        • \n
      • example
        • \n
      \n
      {
          \"NODE_ENV\": \"development\",
          \"release\": false
      }
      \n
      • \n
    • \n

      in app

      \n
      const { release } = require('./release-info.json');

      console.log(release ? 'Production mode' : 'Debug mode');
      \n
      • \n
    • \n

      Inspired by nativescript-hook-debug-production

      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-sdk":{"name":"nativescript-google-sdk","version":"0.1.18","license":"Apache-2.0","readme":"

    NativeScript plugin for Google Maps SDK

    \n

    The plugin is in experimental state!

    \n

    if you want to contribute please send pull request. The source code is available at GitHub

    \n

    With the NativeScript plugin for Google Maps SDK you can easily use the native Google Maps API in a cross-platform manner for Android and iOS.

    \n\n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n

    The plugin is available for installing as an npm package.

    \n

    First you need to create a NativeScript project. If you are new to NativeScript, please follow the NativeScript getting started guide to create your app.

    \n

    After you have the app created, in the command prompt, at the root of the NativeScript project, run the following command.

    \n
    tns plugin add nativescript-google-sdk
    \n

    Now you have the plugin installed. In this version the plugin is not adding the native Google SDKs, so you will need to add them manualy.

    \n

    If you are new to GooglePlayServices, please read the official guide about how to install the native GooglePlay services on your machine. Make sure to get the latest SDKs installed to make sure that the entire API will be available to you.

    \n

    After the GooglePlay services are installed, for Android please run the followng command:

    \n
    tns library add android \"path to the GooglePlayServices SDK\"
    \n

    For example:

    \n
    tns library add android \"C:\\Users\\me\\AppData\\Local\\Android\\android-sdk\\extras\\google\\google_play_services\\libproject\\google-play-services_lib\"
    \n

    This will add the native libraries in the NativeScript project and will make the native API available for consumption in JavaScript.

    \n

    The next step is to modify the AndroidManifest.xml file. It is located in your project folder in platforms/android/ folder. Please merge the content of the two <application> sections into one section only. This is all you need to do in the AndroidManifest.xml file.

    \n

    The next step is to set the GooglePlay API_KEY. It is specific for each app and each user, so you need to get it from the google service. Here is a tutorial how to obtain that key.

    \n

    Set the API_KEY in the AndroidManifest.xml file for the <meta-data android:name="com.google.android.geo.API_KEY" entry.

    \n

    You are now done and you can start using the plugin from your application! Follow the next steps to see how to use the plugin and add the maps to your application UI.

    \n

    Adding the map to the screen.

    \n

    Modify the /app/main-page.xml file to look like this:

    \n
     <Page 
    \txmlns=\"http://www.nativescript.org/tns.xsd\"
    \txmlns:googleSDK=\"tns_modules/nativescript-google-sdk\"
    \t>
      <GridLayout>
        <googleSDK:MapView/>
      </GridLayout>
    </Page>
    \n

    and then execute

    \n
    tns run android
    \n

    This will show the MapView with its default settings. To set the behavior of the MapView component you need to handle the mapCreated event and configure it. Modify the xml declaration in /app/main-page.xml file, for the MapView to look like this:

    \n
    <googleSDK:MapView mapReady=\"OnMapReady\"/>
    \n

    then in the JS code behind (in /app/main-page.js file) declare the mapReady callback:

    \n
    function OnMapReady(args) {
    \tvar mapView = args.object.android;

    \tvar gMap = mapView.getMap();

    \t/*
    \t * gMap is the reference to the native GoogleMap object. See the native  API reference 
    \t * to configure the map - https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap
    \t *
    \t * The code below is a sample implementation which will open the map with location and marker set to Sydney, Australia.
    \t *
    \t */
    \tvar latlng = new com.google.android.gms.maps.model.LatLng(-33.86, 151.20);

    \tgMap.setMyLocationEnabled(true);
    \tconsole.log(\"gMapsPlugin:onMapReady:LocationENabled\");

    \tgMap.moveCamera(com.google.android.gms.maps.CameraUpdateFactory.newLatLngZoom(latlng, 13));
    \tconsole.log(\"gMapsPlugin:onMapReady:CameraMoved\");       

    \tmarkerOptions = new com.google.android.gms.maps.model.MarkerOptions();
    \tmarkerOptions.title(\"Sydney\");
    \tmarkerOptions.snippet(\"Australia\");

    \tmarkerOptions.position(latlng);
    \tconsole.log(\"gMapsPlugin:onMapReady:SettingMarker\");

    \tgMap.addMarker(markerOptions);
    \tconsole.log(\"gMapsPlugin:onMapReady:MarkerSet\");
    }
    exports.OnMapReady = OnMapReady;
    \n

    Now execute

    \n
    tns run android
    \n

    and enjoy the map of Syddney, Australia on your device.

    \n

    If you have any problems, questions or suggestions you are more than welcome to log an issue in GitHub.

    \n
    // support is coming for iOS
    \n

    [Back to Top][1]

    \n

    License

    \n

    This software is licensed under the Apache 2.0 license, quoted here.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-logEntries":{"name":"nativescript-logEntries","version":"1.0.1","license":{"type":"MIT","url":"https://github.com/AntonioCuevaUrraco/nativescript-logEntries/blob/master/LICENSE"},"readme":"

    nativescript-logEntries

    \n

    This plugin provide a way to use LogEntries service on a NativeScript project.
    \nThe plugin is a wrap of the android and ios official sdks
    \nhttps://github.com/logentries/le_android
    \nhttps://github.com/logentries/le_ios

    \n

    Installation

    \n
    tns plugin add nativescript-logEntries
    \n

    Usage

    \n

    First create a new Log for android and/or iOS and store the tokens that logEntries will provide to you

    \n
    //Somewhere on your app.

    var logEntries = require(\"nativescript-logEntries\");

     logEntries.init(\"YourToken\");
     logEntries.log(\"this is the message\");
    \n

    If you want to use it to send crash reports, store the crash on devie and send it next time the device is opened.

    \n
    //on app.ts

    var setString = applicationSettingModule.setString;

    application.on(application.uncaughtErrorEvent, function(args) {

    \tif (args.ios) {
            console.log(\"NativeScriptError: \" + args.ios);
            console.log(\"Stacktrace: \" + args.ios.stack);
            setString(\"crash\", args.ios + args.ios.stack);
       }
    \telse if (args.android) {
        console.log(\"NativeScriptError: \" + args.android);
    \t\tconsole.log(\"NativeScriptError: \" + args.android.nativeException);
    \t\tconsole.log(\"NativeScriptError: \" + args.android.nativeException.getMessage());
    \t\tsetString(\"crash\", args.android +
    \t\t                   args.android.nativeException +
    \t\t                   args.android.nativeException.getMessage());
    \t}
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paycards-recognizer":{"name":"nativescript-paycards-recognizer","version":"1.0.6","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vuexp":{"name":"vuexp","version":"0.3.0","license":"MIT","readme":"

    Vue Cross Platform (VueXP)

    \n

    Cross Platform application development with VueJs. Write once deploy everywhere!

    \n
    Project setup
    \n
    npm install
    \n
    Lints and fixes files
    \n
    npm run lint
    \n
    Run unit tests
    \n
    npm run test:unit
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-master-technology-updated":{"name":"nativescript-master-technology-updated","version":"1.2.0","readme":"

    \"npm\"\n\"npm\"\n\"npm\"

    \n

    nativescript-master-technology-updated

    \n

    A library of generic functions that are useful in NativeScript

    \n

    License

    \n

    This is released under the MIT License, meaning you are free to include this in any type of program -- However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

    \n

    I also do contract work; so if you have a module you want built for NativeScript (or any other software projects) feel free to contact me nathan@master-technology.com.

    \n

    \"Donate\"\n\"Patreon\"

    \n

    Updates

    \n

    Please feel free to fork this repo and add other utility functions!!!

    \n

    Installation

    \n

    Supports all NativeScript versions from 2.x till 5.x

    \n

    tns plugin add nativescript-master-technology-updated

    \n

    Notes:

    \n

    The first release of this library had a ton of DOM routines, these have been moved to there own plugin called 'nativescript-dom'

    \n

    Usage

    \n

    To use the module you must first require() it:

    \n
    require( \"nativescript-master-technology-updated\" );
    \n

    All routines are global; you do not need to keep a reference to the library.

    \n

    If you get TypeScript complaining about process not being defined, then put /// <reference path="./node_modules/nativescript-master-technology-updated/references.d.ts" /> in your references.d.ts.

    \n

    Methods

    \n

    setImmediate();

    \n

    Push this task off to the next available time slice.

    \n

    clearImmediate(id)

    \n

    Clears an timer scheduled via setImmediate...

    \n

    performance.now()

    \n

    Returns the current time stamp in NS or MS (depends on the platform)

    \n

    process.restart()

    \n

    IOS will tell the user they need to restart; and then exit. (Apple doesn't appear to have any "restart" app ability)\nAndroid will quit and restart the app.

    \n

    process.exit()

    \n

    Exit the application

    \n

    process.isDebug()

    \n

    Detects if you are running the debug version of the code on Android, on ios it returns Process.isEmulator()

    \n

    process.isEmulator()

    \n

    Detects if you are running on an emulator

    \n

    process.processMessages()

    \n

    A Syncronous method to cause IOS & Android to handle their message loops.

    \n

    console.keys()

    \n

    Prints out all the keys in the object

    \n

    Optionally: You can pass true as second argument to also print the value:

    \n
    var data = {
      id: 1,
      name: 'Nathan'
    };
    console.keys(data, true);

    // id:  1
    // name:  Nathan
    \n

    Breaking Changes

    \n

    Renamed Performance.now to performance.now -- not sure why I messed up the name in the first place; but the proper name for compatibility sake is "performance.now()"...

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/brightness":{"name":"@nativescript/brightness","version":"2.0.0","license":"Apache-2.0","readme":"

    Nativescript brightness

    \n
    ns plugin add @nativescript/brightness
    \n

    This command automatically installs the necessary files, as well as stores @nativescript/brightness as a dependency in your project's package.json file.

    \n

    This plugin requires <uses-permission android:name="android.permission.WRITE_SETTINGS"/> to be added in the android manifest.

    \n

    Usage

    \n

    To use the brightness module you must first require() and instantiate it:

    \n
    // JavaScript
    var nativescriptBrightness = require(\"@nativescript/brightness\");
    var brightness = new nativescriptBrightness.Brightness();
    \n

    Or if you’re using TypeScript, import the module:

    \n
    // TypeScript
    import { Brightness } from '@nativescript/brightness';
    const brightness = new Brightness();
    \n

    After you have a reference to the module you can then call its get() and set() methods. For example, the code below updates you screen's brightness with an intensity setting of 25%.

    \n

    The intensity can be set to a value from 1 to 100.

    \n
    // TypeScript
    import { Brightness } from '@nativescript/brightness';
    const brightness = new Brightness();

    brightness.set({
        intensity: 25
    });
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    set(options: BrightnessOptions)set screen's brightness to the desired intensity
    getreturns current screen brightness value as a number between 0 and 100
    getNativereturns current screen brightness value as returned from the native api: between 0.0 and 1.0 for iOS and 0 and 255 for android
    \n

    BrightnessOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    intensity100defines the desired brightness value, which should be a number between 0 and 100.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@spartadigital/nativescript-ns-wikitude":{"name":"@spartadigital/nativescript-ns-wikitude","version":"1.5.4","license":"MIT","readme":"

    @spartadigital/nativescript-ns-wikitude

    \n

    This is under active development. Please Feel free to Contribute and submit any pull requests or issues.

    \n

    Uses Wikitude version 7.1.

    \n

    License

    \n

    This plugin is licensed under the MIT license

    \n

    a license for Wikitude can be obtained from them, either a trial or paid license will work.

    \n

    You can obtain a trial license from Here

    \n

    Installation

    \n

    to install just run

    \n
        $ npm i --save @spartadigital/nativescript-ns-wikitude
    \n

    You then need to link your license key, you can do this by adding the following in your main.ts/main.js:

    \n
    global.wikitudeLicense = \"[YOUR-WIKITUDE-LICENSE-HERE]\"
    \n

    For {A} in your app.component.ts you should include :

    \n
    import { registerElement } from 'nativescript-angular/element-registry';
    import { Wikitude } from '@spartadigital/nativescript-ns-wikitude';

    registerElement('Wikitude', () => Wikitude);
    \n

    Usage & API

    \n

    Coming Soon™...

    \n

    Example

    \n

    Example Using Wikitude plugin in {A} :

    \n

    wikitude-component.html

    \n
    <AbsoluteLayout class=\"w-full h-full dashboard\">

        <Wikitude #wikitude
                top=\"0\"
                left=\"0\"
                [url]=\"worldUrl\"
                class=\"wikitude w-full h-full\"    
                (loadedNavigation)=\"onLoaded($event)\"          
                (javascript)=\"onJSON($event)\"
                (internalError)=\"onError($event)\">
        </Wikitude>

    </AbsoluteLayout>
    \n

    wikitude-component.ts

    \n
    export class WikitudeComponent {
        ...*snip*...
        // using ~/ means that the file is a local file.
        public worldUrl: string = \"~/wk_world/index.html\"

        onError($event) {
            console.log(`Wikitude Error : ${$event.errorObject.message}`);
        }

        onJSON($event) {
            const json = <{ event: string; message: string }>JSON.parse($event.data.data);

            alert(json.message);
        }
       
        ...*snip*...
    }

    \n

    Contributing

    \n

    Contribution Guidelines are coming soon!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-cp":{"name":"nativescript-onesignal-cp","version":"1.0.11","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

    NativeScript-OneSignal

    \n

    A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

    \n

    Contributors

    \n

    OneSignal-iOS-SDK

    \n

    OneSignal-Android-SDK

    \n

    Supported Platforms

    \n
      \n
    • iOS
      • \n
    • Android
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-onesignal
    \n

    iOS

    \n

    Does not need any configuration.

    \n

    Android

    \n

    Does not need any configuration.

    \n

    Usage

    \n

    Typescript

    \n
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
    \n

    iOS

    \n

    TnsOneSignal is the native iOS OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.ios) {
    \tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

    \t\tpublic static ObjCProtocols = [UIApplicationDelegate]

    \t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

    \t\t\ttry {

    \t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

    \t\t\t} catch (error) {
    \t\t\t\tconsole.error('error', error)
    \t\t\t}

    \t\t\treturn true
    \t\t}

    \t}
    \tapplication.ios.delegate = MyDelegate
    }
    \n

    Android

    \n

    TnsOneSignal is the native Android com.onesignal.OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.android) {
    \tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

    \t\ttry {

    \t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\tTnsOneSignal.startInit(application.android.context).init()

    \t\t} catch (error) {
    \t\t\tconsole.error('error', error)
    \t\t}

    \t})
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Typescript Typings

    \n

    iOS

    \n

    Android - In the works...

    \n

    Demo

    \n
    npm run setup
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"prash-pod-pluginman":{"name":"prash-pod-pluginman","version":"2.2.0","license":"Apache-2.0","readme":"

    @prash/prash-pod-plugin

    \n
    ns plugin add @prash/prash-pod-plugin
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-platform-css":{"name":"@vulksoft/nativescript-platform-css","version":"1.6.16","license":{"type":"MIT","url":"https://github.com/Vulksoft-S-R-L/nativescript-platform-css/blob/master/LICENSE"},"readme":"

    NativeScript-Platform-CSS

    \n

    A NativeScript plugin to deal with Declarative UI and Platform specific CSS

    \n

    What is it?

    \n

    This plugin automatically add some platform related css variable to the current Page.

    \n

    It allows you to customize your UI for android or ios only:

    \n
    .ios .example {
      color: blue;
    }

    .android .example {
      color: red;
    }
    \n

    This also adds classes related to the DPI of the screen.\nWe have this range of DPI 1280, 1024, 800, 600, 540, 480, 400, 360, 320

    \n

    You will be able to select that like that:

    \n
    .ios800 .example {
      font-size: 25;
    }

    .ios480 .example {
      font-size: 18;
    }

    .android800 .example {
      font-size: 25;
    }

    .android480 .example {
      font-size: 18;
    }
    \n

    or also like that:

    \n
    .screen800 .example {
      font-size: 25;
    }

    .screen480 .example {
      font-size: 18;
    }
    \n

    You have also access to class with the device name:

    \n
    .samsunggalaxys6 .example {
      color: red;
    }

    .iphone6s .example {
      color: blue;
    }
    \n

    Installation

    \n

    This plugin runs only on Nativescript 7.0 and later.

    \n
    ns plugin add @vulksoft/nativescript-platform-css@latest
    \n

    Usage

    \n

    You only need to require() the plugin in your app.js or main.ts (if angular or vue).\nThis will automatically add the css classes on the current loaded page.

    \n

    Demo

    \n

    You can try the demo app that will show you the css classes that are added on the page.

    \n

    Contributors

    \n
      \n
    • Nathanael Anderson
      • \n
    • Steve McNiven-Scott
      • \n
    • Dave Coffin
      • \n
    • Jonathan Salomon
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ios-security":{"name":"@nativescript/ios-security","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/ios-security

    \n

    🔒 IOSSecuritySuite for NativeScript.

    \n
    \n

    🌏 iOS Security Suite is an advanced and easy-to-use platform security & anti-tampering library. If you are developing for iOS and you want to protect your app according to the OWASP MASVS standard, chapter v8, then this library could save you a lot of time. 🚀\nWhat ISS detects:

    \n
      \n
    • Jailbreak (even the iOS 11+ with brand new indicators! 🔥)
      • \n
    • Attached debugger 👨🏻‍🚀
      • \n
    • If an app was run in an emulator 👽
      • \n
    • Common reverse engineering tools running on the device 🔭
      • \n
    \n
    \n
    ns plugin add @nativescript/ios-security
    \n

    Usage

    \n

    TypeScript

    \n
    import { IOSSecurity } from \"@nativescript/ios-security\";
    \n

    Javascript

    \n
    var IOSSecurity = require(\"@nativescript/ios-security\").IOSSecurity;
    \n

    Update Info.plist

    \n

    After adding ios-security to your project, you will also need to update your Info.plist. There is a check in jailbreak detection module that uses canOpenURL(_:) method and requires specifying URLs that will be queried.

    \n
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>cydia</string>
        <string>undecimus</string>
        <string>sileo</string>
        <string>zbra</string>
        <string>filza</string>
        <string>activator</string>
    </array>
    \n

    Jailbreak detector module

    \n
      \n
    • The simplest method returns true/false if you just want to know if the device is jailbroken or jailed
      • \n
    \n

    Javascript

    \n
    if (IOSSecurity.amIJailbroken()) {
    \tconsole.log(\"This device is jailbroken\");
    } else {
    \tconsole.log(\"This device is not jailbroken\");
    }
    \n

    Debugger detector module

    \n
    const amIDebugged = IOSSecurity.amIDebugged();
    \n

    Deny debugger at all

    \n
    IOSSecurity.denyDebugger();
    \n

    Emulator detector module

    \n
    const runInEmulator = IOSSecurity.amIRunInEmulator();
    \n

    Reverse engineering tools detector module

    \n
    const amIReverseEngineered = IOSSecurity.amIReverseEngineered();
    \n

    System proxy detector module

    \n
    const amIProxied = IOSSecurity.amIProxied();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mdc-lib":{"name":"nativescript-mdc-lib","version":"1.0.2","license":"MIT","readme":"

    Material Components plugin for NativeScript

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-mdc-lib
    \n

    See the NativeScript CLI documentation\nand Nativescript Plugin documentation for more details

    \n

    Notes

    \n

    This plugin only provides the iOS Material Components library from CocoaPods,\nand doesn't provide any JavaScript wrappers or APIs

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hosted-toast":{"name":"nativescript-hosted-toast","version":"1.0.0","license":"MIT","readme":"

    Nativescript Hosted Toast Plugin

    \n

    This a Nativescript Plugin that lets you make toast from a hosted Angular 2 application.

    \n

    Installation

    \n
    tns plugin add nativescript-hosted-toast
    \n

    Usage

    \n

    Create a wrapper application with the following code and a Navivescript WebView.\nSee the following project as an example:\nhttps://github.com/Ulbora/NSWrapper

    \n
    var application = require(\"application\");
    var context = application.android.context;
    function pageLoaded(args) {
        var page = args.object;   
        var web = page.getViewById(\"webView\"); 
        var androidSettings = web.android.getSettings();
        androidSettings.setJavaScriptEnabled(true);    
        var hostedToast = new com.ulbora.hosted.toast.HostedToast(context);    
        web.android.addJavascriptInterface(hostedToast, 'HostedToast');
        web.url = \"http://someURLWhereAngular2AppIsHosted\";
    }
    exports.pageLoaded = pageLoaded;
    \n

    Inside the Angular 2 hosted application, write the code where you want to access device information.\nSee the following project as an example:\nhttps://github.com/KenWilliamson/Angular2HostedMobileApp

    \n

    Component code:

    \n
    deviceReady: boolean;

     ngOnInit() {        
            try {
                if (HostedToast) {
                    this.deviceReady = true;
                }
            } catch (err) {
            }
        }


     showToast() {
            try {
                HostedToast.showToast(\"Toast is working in a hosted world.\");            
            } catch (err) {
            }
        }
    \n

    Template Code:

    \n
    <div *ngIf=\"deviceReady\">
        <div> <b>Your Toast</b>: <span (click)=\"showToast()\" class=\"glyphicon glyphicon-phone\"></span></div>        
    </div>
    \n

    Available Methods

    \n

    HostedToast.showToast("some message")

    \n

    Sends a toast message to the device

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ibeacon":{"name":"nativescript-ibeacon","version":"0.8.1","license":"MIT","readme":"

    \"npm\"\n\"npm\"

    \n

    NativeScript iBeacon

    \n

    Let you range for iBeacons, managing permissions. iOS and Android.

    \n

    Install it

    \n
    tns plugin add nativescript-ibeacon
    \n

    Use it

    \n
    Add permissions on Android Manifest
    \n
    <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>
    <uses-permission android:name=\"android.permission.BLUETOOTH\" />
    <uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" />
    \n

    you can also use android.permission.ACCESS_FINE_LOCATION instead of android.permission.ACCESS_COARSE_LOCATION

    \n
    Add keys on iOS Info.plist
    \n
    Background usage
    \n
    <key>NSLocationAlwaysUsageDescription</key>
    <string>My description explaining why I need it</string>
    \n
    Foreground usage
    \n
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>My description explaining why I need it</string>
    \n
    Use it
    \n
    Create the object passing the callback and the options
    \n
    import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';

    let callback: BeaconCallback = {
        onBeaconManagerReady(): void {
            // start ranging and/or monitoring only when the beacon manager is ready
            this.nativescriptIbeacon.startRanging(this.region);
            this.nativescriptIbeacon.startMonitoring(this.region);
        },
        didRangeBeaconsInRegion: function(region: BeaconRegion, beacons: Beacon[]) {

        },
        didFailRangingBeaconsInRegion: function(region: BeaconRegion, errorCode: number, errorDescription: string) {

        }
    }

    let options: BeaconLocationOptions = {
        iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
        androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
        androidAuthorisationDescription: \"Location permission needed\"
    };

    let nativescriptIbeacon = new NativescriptIbeacon(callback, options);

    let region = new BeaconRegion(\"HelloID\", \"2f234454-cf6d-4a0f-adf2-f4911ba9ffa6\");
    \n
    Request for permissions and bind BeaconManager
    \n

    We need to be sure to have permission and we need to prepare the BeaconManager by calling bind().

    \n
    if (!nativescriptIbeacon.isAuthorised()) {
        console.log(\"NOT Authorised\");
        nativescriptIbeacon.requestAuthorization()
            .then(() => {
                console.log(\"Authorised by the user\");
                nativescriptIbeacon.bind();

            }, (e) => {
                console.log(\"Authorisation denied by the user\");
            })
    } else {
        console.log(\"Already authorised\");
        nativescriptIbeacon.bind();
    }
    \n

    After the BeaconManager is ready, the event onBeaconManagerReady() is called. After that we can call startRanging(region) or startMonitoring(region).

    \n

    If we call startRanging(region) or startMonitoring(region) before calling bind(), it will be called internally and the region will be registered after the BeaconManager will be ready.

    \n
    Stop ranging
    \n
    nativescriptIbeacon.stopRanging(region);
    \n
    Stop monitoring
    \n
    nativescriptIbeacon.stopMonitoring(region);
    \n
    Unbind
    \n

    To dispose the BeaconManager, call the method unbind()

    \n
    nativescriptIbeacon.unbind();
    \n

    Note on the Beacon class

    \n

    The shared Beacon class contain the following values:

    \n
    public proximityUUID: string;\npublic major: number;\npublic minor: number;\n\npublic rssi: number;\npublic distance_proximity: number;  // distance in Android, proximity in iOS\npublic txPower_accuracy: number;  // txPower in Android, accuracy in iOS\n
    \n

    As you can see there is some difference on iOS and Android platform regarding the last 2 values. Keep this in mind while using the class.

    \n

    On iOS, the values for proximity are:

    \n
    public enum CLProximity : Int {\n    case unknown  // =0\n    case immediate  // =1\n    case near  // =2\n    case far  // =3\n}    \n\nThe value in this property gives a general sense of the relative distance to the beacon. \nUse it to quickly identify beacons that are nearer to the user rather than farther away.\n
    \n

    On iOS, accuracy is described like:

    \n
    Indicates the one sigma horizontal accuracy in meters. Use this property to differentiate between beacons with the same proximity value. Do not use it to identify a precise location for the beacon. Accuracy values may fluctuate due to RF interference.\nA negative value in this property signifies that the actual accuracy could not be determined.\n\npublic typealias CLLocationAccuracy = Double\n
    \n

    Run the demo

    \n

    Please note that you need a real device to test beacon ranging (you will receive an error otherwise).

    \n

    To run the demo you can use one of the following commands:

    \n
    npm run demo.ios.device\n
    \n

    or

    \n
    npm run demo.android.device\n
    \n

    TODO

    \n
      \n
    • Better Demo
      • \n
    • Debug
      • \n
    • More options
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ejaszke/nativescript-highcharts":{"name":"@ejaszke/nativescript-highcharts","version":"1.0.6","license":"Apache-2.0","readme":"

    nativescript-highcharts

    \n

    This plugins allows you to use Highcharts in NativeScript.

    \n
    ns plugin add @ejaszke/nativescript-highcharts
    \n

    Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

    \n

    Screenshots

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo.ios # or apps.demo.android
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo-angular.ios # or apps.demo-angular.android
    \n

    Usage

    \n

    NativeScript-Core

    \n

    TypeScript

    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

    \n
    ...
    export class HomeViewModel extends Observable {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    XML

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:ui=\"@mhtghn/nativescript-highcharts\">

        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
        </GridLayout>
    </Page>
    \n

    NativeScript Angular

    \n

    TypeScript

    \n

    Import the HighchartsModule in your module.

    \n
    ...
    import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

    @NgModule({
        imports: [
            ...
            HighchartsModule
        ],
        ...
    })
    export class HomeModule { }
    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

    @Component({
        selector: \"Home\",
        moduleId: module.id,
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    HTML

    \n
    <ActionBar class=\"action-bar\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout class=\"page\">
        <!-- Add your page content here -->
        <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
    </GridLayout>
    \n

    Highcharts Compatibility

    \n
      \n
    • highcharts.js: v8.2.0
      • \n
    • highcharts-more.js: v8.2.0
      • \n
    • highcharts-3d.js: v8.2.0
      • \n
    • sankey.js: v8.2.0
      • \n
    • organization.js: v8.2.0
      • \n
    \n

    Tips

    \n
      \n
    • Add the next option to the chart options to disable the display of the Highcharts.com Hyperlink in the webview
      credits: {
      \tenabled: false;
      }
      \n
      • \n
    \n

    Credit

    \n

    This plugin is greatly inspired by this demo from Eddy Verbruggen

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hosted-device":{"name":"nativescript-hosted-device","version":"1.0.0","license":"MIT","readme":"

    Nativescript Hosted Device Plugin

    \n

    This a Nativescript Plugin that lets you access device information from a hosted Angular 2 application.

    \n

    Installation

    \n
    tns plugin add nativescript-hosted-device
    \n

    Usage

    \n

    Create a wrapper application with the following code and a Navivescript WebView.\nSee the following project as an example:\nhttps://github.com/Ulbora/NSWrapper

    \n
    var application = require(\"application\");
    function pageLoaded(args) {
        var page = args.object;   
        var web = page.getViewById(\"webView\"); 
        var androidSettings = web.android.getSettings();
        androidSettings.setJavaScriptEnabled(true);
        var device = new com.ulbora.device.Device;    
        web.android.addJavascriptInterface(device, 'NSDevice');    
        web.url = \"http://someURLWhereAngular2AppIsHosted\";
    }
    exports.pageLoaded = pageLoaded;
    \n

    Inside the Angular 2 hosted application, write the code where you want to access device information.\nSee the following project as an example:\nhttps://github.com/KenWilliamson/Angular2HostedMobileApp

    \n

    Component code:

    \n
    deviceReady: boolean;

     ngOnInit() {
            this.id = this._routeParams.get('id');
            this.hero = this._heroDetailsService.getHeroDetails(this.id);     
            try {
                if (NSDevice) {
                    this.deviceReady = true;
                }
            } catch (err) {
            }
        }


    onShowDevice() {
            try {            
                this.dev = \"Mobile version: \" + NSDevice.getModel();
            } catch (err) {
                alert('Failed because: ' + err);
                this.error = err.message;
            }
        }
    \n

    Template Code:

    \n
    <div *ngIf=\"deviceReady\">
        <div> <b>Your device</b>: <span (click)=\"onShowDevice()\" class=\"glyphicon glyphicon-phone\"></span></div>
    </div>
    \n

    Available Methods

    \n

    NSDevice.getModel()

    \n

    Returns build information about the device

    \n

    NSDevice.getProductName()

    \n

    Returns product name of the device

    \n

    NSDevice.getManufacturer()

    \n

    Returns manufacturer information for the device

    \n

    NSDevice.getSerialNumber()

    \n

    Returns serial number of the device

    \n

    NSDevice.getOSVersion()

    \n

    Returns OS version of the device

    \n

    NSDevice.getPlatform()

    \n

    Returns the device platform

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-fixed":{"name":"nativescript-onesignal-fixed","version":"1.0.9","license":"MIT","readme":"

    NativeScript-OneSignal

    \n

    A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

    \n

    Contributors

    \n

    OneSignal-iOS-SDK

    \n

    OneSignal-Android-SDK

    \n

    Supported Platforms

    \n
      \n
    • iOS
      • \n
    • Android
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-onesignal
    \n

    iOS

    \n

    Does not need any configuration.

    \n

    Android

    \n

    Does not need any configuration.

    \n

    Usage

    \n

    Typescript

    \n
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
    \n

    iOS

    \n

    TnsOneSignal is the native iOS OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.ios) {
    \tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

    \t\tpublic static ObjCProtocols = [UIApplicationDelegate]

    \t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

    \t\t\ttry {

    \t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

    \t\t\t} catch (error) {
    \t\t\t\tconsole.error('error', error)
    \t\t\t}

    \t\t\treturn true
    \t\t}

    \t}
    \tapplication.ios.delegate = MyDelegate
    }
    \n

    Android

    \n

    TnsOneSignal is the native Android com.onesignal.OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.android) {
    \tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

    \t\ttry {

    \t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\tTnsOneSignal.startInit(application.android.context).init()

    \t\t} catch (error) {
    \t\t\tconsole.error('error', error)
    \t\t}

    \t})
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Typescript Typings

    \n

    iOS

    \n

    Android - In the works...

    \n

    Demo

    \n
    npm run setup
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-router-ns":{"name":"nativescript-vue-router-ns","version":"1.0.4","license":"MIT","readme":"

    A simple router implementation that is suitable for NativeScript-Vue.

    \n

    Prerequisites / Requirements

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    All your own components must have unique name
    All routes name must have unique name
    Your app need a main Frame in the render
    \n

    Install

    \n
    npm install nativescript-vue-router-ns --save
    or
    yarn add nativescript-vue-router-ns
    \n

    Usage

    \n
    // app/router/index.js

    import Vue from 'nativescript-vue'

    import NSVueRouter from 'nativescript-vue-router-ns'

    import Dashboard from './components/Dashboard'
    import Login from './components/Login'

    Vue.use(NSVueRouter)

    const routes = [
      {
        name: 'dashboard.index',
        component: Dashboard,
        meta: { auth: true }
      },
      {
        name: 'login.index',
        component: Login,
        meta: { guest: true }
      }
    ]

    const router = new NSVueRouter({
      ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
      routes,
      /* eslint-disable-next-line no-undef  */
      verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
    })

    export default router
    \n
    // app/app.js or app/main.js

    import Vue from 'nativescript-vue'

    import Main from './Main'

    import router from './router'

    new Vue({
      router

      // ...

      render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
    }).$start()
    \n
    <!-- Your own Vue Components -->
    <template>
      <Page actionBarHidden=\"true\">
        <FlexboxLayout flexDirection=\"column\" justifyContent=\"center\">
          <button text=\"Navigate direct\" @tap=\"$router.push('dashboard.index')\" />

          <button text=\"Navigate with method\" @tap=\"submit\" />
        </FlexboxLayout>
      </Page>
    </template>

    <script>
      export default {
        name: 'LoginIndex',

        methods: {
          submit() {
            // ...

            this.$router.pushClear('dashboard.index')

            // ...
          }
        }
      }
    </script>
    \n

    Guards and other before actions

    \n
    // app/router/index.js

    // ...

    router.beforeEach((to, next) => {
      if (to.meta.auth && isLogged) {
        /* eslint-disable-next-line no-undef */
        if (TNS_ENV !== 'production') {
          /* eslint-disable-next-line no-console */
          console.error(new Error('To Login!.'))
        }

        router.pushClear('login.index')
      } else if (to.meta.guest && isLogged) {
        router.push('dashboard.index')
      } else {
        next()
      }
    })

    // ...
    \n

    API

    \n

    Installing

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDefaultDescription
    ignoreSameBooleantrueSet if reject or accept navigate to same current component.
    routesArray[]Array of objects with app's routes.
    verboseBooleanfalseShow output the warnings to console.
    \n

    Navigating

    \n

    This package provides 3 methods for navigation, $router.push, $router.pushClear and $router.back

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParametersTypeDescription
    nameStringFirst parameter in push and pushClear methods.
    optionsObjectIs an optional object, which accepts all options supported by Manual Routing
    times[String, Number]Optional parameter in back method that go back any times that you set.
    \n

    NOTE: When $router.pushClear method is used the navigator stack is cleaned.

    \n

    TODO

    \n
      \n
    • [x] Native navigation
      • \n
    • [x] Before actions
      • \n
    • [ ] After actions
      • \n
    • [ ] Nested routes
      • \n
    \n

    Contributing

    \n

    Thank you for considering contributing to the NSVueRouter! Please leave your PR or issue.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-debug-production":{"name":"nativescript-hook-debug-production","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-hook-debug-production/blob/master/LICENSE"},"readme":"

    NativeScript-hook-debug-production

    \n

    Hook for selecting files based on debug or production build for NativeScript Apps

    \n

    License

    \n

    This plugin is licensed under the MIT license by Marek Maszay

    \n

    Installation

    \n
    tns plugin add nativescript-hook-debug-production
    \n

    Usages

    \n

    Set name file based on if you want to have file in debug as filename.debug.extension or release version as filename.production.extension

    \n

    Inside code include it as filename.extension

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hexo-plugin":{"name":"nativescript-hexo-plugin","version":"1.0.0","license":"MIT","readme":"

    hexo-nativescript-plugin

    \n

    A plugin for the nativescript hexo demo I am putting together. This should add the <% nativescript *content* %> and <% angular *content* %> block tag to hexo, allowing only the correct content to be shown. The user must add the front_end tag to their hexo _config.yml page.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ddp-login":{"name":"nativescript-ddp-login","version":"1.2.0","license":"MIT","readme":"

    #Installation

    \n
    tns plugin add https://github.com/triniwiz/nativescript-ddp-client
    tns plugin add nativescript-ddp-login
    \n
    var DDPClient = require('nativescript-ddp-client');
    var DDPLogin = require('nativescript-ddp-login');

    var login = new DDPLogin();
        

    var token = null;

    // Resume login with valid token from previous login
    login.loginWithToken(ddpClient, token,(err, userInfo)=>{
      if (err) throw err;
      token = userInfo.token;
    });

    // Login using a username
    login.loginWithUsername(ddpClient, user, pass,(err, userInfo) =>{
      if (err) throw err;
      token = userInfo.token;
    });

    // Login using an email address
    login.loginWithEmail(ddpClient, email, pass, (err, userInfo)=>{
      if (err) throw err;
      token = userInfo.token;
    });

    // Login using either a username or email address
    login.loginWithAccount(ddpClient, userOrEmail, pass, (err, userInfo)=>{
      if (err) throw err;
      token = userInfo.token;
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/ns8-facebook":{"name":"@res0/ns8-facebook","version":"2.1.3","license":"Apache-2.0","readme":"

    @nativescript/facebook

    \n
    npm install @nativescript/facebook
    \n

    Prerequisites

    \n

    Android

    \n

    Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

    \n

    iOS

    \n

    Follow step 3 in the Getting Started Guide for Facebook SDK for iOS.

    \n

    Usage

    \n

    You can also use the Login Manager with custom UI to perform Login.

    \n
    import { LoginManager, AccessToken } from '@nativescript/facebook';

    LoginManager.init() // call init early in the app lifecycle e.g main.ts/app.ts

    try {
    \tconst result = await LoginManager.logInWithPermissions(['public_profile']); // LoginResult
    \tconst accessToken = AccessToken.currentAccessToken();
    } catch (e) {}




    LoginManager.logOut(); // Whenever you're done
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-trace-raven":{"name":"nativescript-trace-raven","version":"1.1.1","license":"MIT","readme":"

    NativeScript Raven TraceWriter

    \n

    This plug-in provides a custom NativeScript TraceWriter that will log messages to Sentry.io using the Raven.js JavaScript library. This is useful for capturing trace messages in production from user iOS and Android devices.

    \n

    Getting started

    \n

    To add the plug-in to a NativeScript project:

    \n

    tns plugin add nativescript-trace-raven

    \n

    NOTE: To use this plug-in, a "DSN" key from Sentry.io is required. This key is used to initialize the plug-in and send logs to a specific Sentry.io project.

    \n

    Usage

    \n

    Once the plug-in is installed, simply initialize the new TraceWriter. This can be done in different ways, but for easy global usage, setup the new TraceWriter when then app starts:

    \n

    app.ts

    \n
    import * as app from 'application';
    import * as trace from 'trace';
    import { TraceRaven } from 'nativescript-trace-raven';

    app.on(app.launchEvent, (args: app.ApplicationEventData) => {
        let sentryDsn = \"[YOUR SENTRY DSN KEY]\";

        trace.setCategories(trace.categories.concat(trace.categories.Error, trace.categories.Debug));
        trace.addWriter(new TraceRaven(sentryDsn));
        trace.enable();
    });
    \n

    Then, in your app, just use trace as normal. The output will now be sent to Sentry.io.

    \n

    Example:

    \n
    trace.write(\"Something happened in the app\", trace.categories.Error, trace.messageType.error);
    \n

    NOTE: Sentry.io charges by log volume, so as a best practice, do not enable this custom TraceWriter during regular development

    \n

    In addition to the trace message, this plug-in will send these additional details to Sentry with each log:

    \n
      \n
    • NativeScript runtime version
      • \n
    • Device Platform (iOS/Android)
      • \n
    • Device OS Version
      • \n
    • Device Type (phone/tablet/etc)
      • \n
    • Device Model (iPhone, Galaxy S3, etc)
      • \n
    • Device Language (en-US, etc)
      • \n
    • Device UUID
      • \n
    • Device Orientation (portrait, landscape)
      • \n
    • Battery level (0 - 100, if available)
      • \n
    • App version name
      • \n
    • Environment name (default "Debug")
      • \n
    • User IP Address
      • \n
    \n

    Log level

    \n

    Sentry.io provides three levels for classifying logs: info, warning and error.

    \n

    When logging using the TraceWriter and trace API, the trace.messageType is mapped to Sentry log levels:

    \n
      \n
    • trace.messageType.log === Log type: info
      • \n
    • trace.messageType.info === Log type: info
      • \n
    • trace.messageType.warn === Log type: warning
      • \n
    • trace.messageType.error === Log type: error
      • \n
    \n

    If trace.messageType is omitted, the default log level is error.

    \n

    Extended use

    \n

    When initializing Raven, you can optionally provide an environment string to describe where the app is running when sending log messages. By default, this string is set to debug. If you want to specify your own environment string, just add it when initializing with your DSN key:

    \n
    trace.addWriter(new TraceRaven(sentryDsn, \"production\"));
    \n

    Additional Raven APIs

    \n

    The default TraceWriter API only provides a write method, but the Raven.js library provides additional capabilities such as logging exception detail. To use these additional APIs, you can directly use the Raven library. As long as you've initialized TraceRaven on app startup, all Raven configuration will be set and does not need to be re-initialized. To learn more about the Raven APIs, visit the JavaScript docs on Sentry.io.

    \n

    Logging Exceptions

    \n

    Unlike using trace to record an Error, the Raven.captureException API will also attempt to include Stack Trace information with the log.

    \n
    import Raven = require(\"raven-js\");

    try { 
      throw new Error(\"This is an example error with stack trace\");
    } catch (err) {
      Raven.captureException(err);
    }
    \n

    Adding Breadcrumbs

    \n

    You can manually create "breadcrumbs" that will be included with Sentry logs. Breadcrumbs are intended to show the path of actions that lead to an exception, app crash or log message. For example, to add a crumb when a button is tapped:

    \n
    public buttonTap(args: EventData) {
      let btn = <Button>args.object;
      Raven.captureBreadcrumb({
        message: `Button tapped`,
        category: \"action\",
        data: {
          id: btn.id,
          text: btn.text
        },
        level: \"info\"
      });
    }
    \n

    Last EventId

    \n

    The EventId is a globally unique string generated by Sentry for all logs. Raven provides the ability to get the EventId for the most recent log so that you can present it to users and use for customer service reports. To get the most recent EventId with Raven:

    \n
    let eventId = Raven.lastEventId();
    \n

    Considerations

    \n

    Sentry.io provides a generous free tier for logging events, but does eventually charge by logging volume. As a result, be careful to log only events that are helpful for troubleshooting in production.

    \n

    That means: do not use trace.categories.All when logging to Sentry

    \n

    This verbose logging will likely generate far more logs than needed, and quickly run-up your Sentry.io bill.

    \n

    Best practices:

    \n
      \n
    1. Only log to Sentry in production
      2. \n
    2. Minimize the trace categories logged (minimum: trace.categories.Error)
      3. \n
    \n

    Native Errors

    \n

    Since this plug-in is running in the NativeScript JavaScript layer, it may not capture all native iOS or Android errors. This is generally okay as errors that relate to app code will be caught, but if native iOS/Android logging is needed, use a different plug-in.

    \n

    Auto Breadcrumbs

    \n

    In addition to providing the custom TraceWriter, this plugin will automatically wire-up automatic breadcrumbs for these global Page events:

    \n
      \n
    • onNavigatedTo
      • \n
    • onLoaded
      • \n
    • onShownModally
      • \n
    \n

    Whenever one of these events occurs, a new breadcrumb will get added to the history. To disable this behavior, initialize TraceRaven with an additional parameter:

    \n
    new TraceRaven(\"[YOUR DSN KEY]\", \"production\", false)
    \n

    The last parameter will enable/disable auto-breadcrumbs created by this plug-in. Default is true (enabled).

    \n

    Using the Demo

    \n

    To try the demo for this plug-in, simply follow these steps:

    \n
      \n
    1. Get a DSN key from Sentry.io
      2. \n
    2. Clone this repo
      3. \n
    3. Navigate to the demo folder and open app.ts in your code editor
      4. \n
    4. Replace the sentryDsn string with your DSN key
      5. \n
    5. Navigate back to the root of the cloned repo
      6. \n
    6. Run npm run demo.ios or npm run demo.android
      7. \n
    \n

    If the DSN key is not added before running the demo, the app will crash on launch.

    \n

    Known Issues

    \n
      \n
    • Stack Trace detail for exceptions does not get sent from Android emulator (not sure about devices)
      • \n
    • No way in JavaScript API with current Raven-JS plug-in to disable auto-breadcrumbs for console, xhr, etc.
      • \n
    \n

    Contributing

    \n

    Want to help make this plug-in better? Report issues in GitHub:

    \n

    https://github.com/toddanglin/nativescript-trace-raven/issues

    \n

    Pull requests welcome.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jorwoody/nativescript-contacts":{"name":"@jorwoody/nativescript-contacts","version":"1.1.0","license":{"type":"MIT","url":"https://github.com/jorwoody/nativescript-contacts/blob/master/LICENSE"},"readme":"

    NativeScript Contacts

    \n

    NOTE: This is a temporary fork of the 'nativescript-contacts' plugin by Ryan Lebel. It allows adding of contacts without 'Account' on Android. Will deprecate this plugin once the main plugin includes this improvement.

    \n

    A NativeScript module providing easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.\nWorking with groups available in 1.5.0. Create a group, add and remove contacts to the group, and delete a group.

    \n

    Installation

    \n

    Run tns plugin add @jorwoody/nativescript-contacts

    \n

    Usage

    \n

    To use the contacts module you must first require() or import it.

    \n

    .js:

    \n
    var contacts = require(\"@jorwoody/nativescript-contacts\");
    \n

    .ts:

    \n
    import * as contacts from \"@jorwoody/nativescript-contacts\");
    \n

    iOS Caveats

    \n

    Add following key to Info.plist found in app/App_Resources/iOS/Info.plist

    \n
    <key>NSContactsUsageDescription</key>
    <string>Kindly provide permission to access contact on your device.</string>
    \n

    User will be asked for permissions when contacts are accessed by the app.

    \n

    Android Caveats

    \n

    From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your manifest:

    \n
    <uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    <uses-permission android:name=\"android.permission.READ_CONTACTS\" />
    <uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
    \n

    You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the great nativescript-permissions plugin):

    \n
    const contact = new Contact();
    (...)
    Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], \"I need these permissions because I'm cool\")
                .then(() => {
                    contact.save();
                });
    \n

    Methods

    \n

    getContact: Pick one contact and bring back its data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below

        // lets say you wanted to grab first name and last name
        console.log(contact.name.given + \" \" + contact.name.family);

        //lets say you want to get the phone numbers
        contact.phoneNumbers.forEach(function(phone) {
          console.log(phone.value);
        });

        //lets say you want to get the addresses
        contact.postalAddresses.forEach(function(address) {
          console.log(address.location.street);
        });
      }
    });
    \n

    Save a new contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"image-source\");

    var newContact = new contacts.Contact();
    newContact.name.given = \"John\";
    newContact.name.family = \"Doe\";
    newContact.phoneNumbers.push({
      label: contacts.KnownLabel.HOME,
      value: \"123457890\"
    }); // See below for known labels
    newContact.phoneNumbers.push({ label: \"My Custom Label\", value: \"11235813\" });
    newContact.photo = imageSource.fromFileOrResource(\"~/photo.png\");
    newContact.save();
    \n

    Update an existing contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"image-source\");

    contacts.getContact().then(function(args) {
      if (args.response === \"selected\") {
        var contact = args.data;
        contact.name.given = \"Jane\";
        contact.name.family = \"Doe\";

        imageSource
          .fromUrl(\"http://www.google.com/images/errors/logo_sm_2.png\")
          .then(function(src) {
            contact.photo = src;
            contact.save();
          });
      }
    });
    \n

    Delete a contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contact.delete();
      }
    });
    \n

    getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getContactsByName(\"Hicks\", contactFields).then(
      function(args) {
        console.log(\"getContactsByName Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getAllContacts: Find all contacts. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getAllContacts(contactFields).then(
      function(args) {
        console.log(\"getAllContacts Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getGroups: Find groups. Returns an array of group data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          console.log(\"getGroups Complete\");
          console.log(JSON.stringify(args));
          /// Returns args:
          /// args.data: Generic cross platform JSON object, null if no groups were found.
          /// args.reponse: \"fetch\"

          if (args.data === null) {
            console.log(\"No Groups Found!\");
          } else {
            console.log(\"Group(s) Found!\");
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Save a new group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    var groupModel = new contacts.Group();
    groupModel.name = \"Test Group\";
    //Save Argument (boolean)
    //iOS: [false=> Use Local Container, true=> Use Default Container]
    //Android: will always be true, setting this value will not affect android.
    groupModel.save(false);
    \n

    Delete a group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getGroups(\"Test Group\").then(
      function(args) {
        console.log(\"getGroups Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no groups were found.
        /// args.reponse: \"fetch\"

        if (args.data !== null) {
          console.log(\"Group(s) Found!\");
          args.data[0].delete(); //Delete the first found group
        }
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    Add Member To Group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contacts.getGroups(\"Test Group\").then(
          function(a) {
            if (a.data !== null) {
              var group = a.data[0];
              group.addMember(contact);
            }
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    });
    \n

    Remove Member From Group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
                console.log(\"getContactsInGroup complete\");

                if (a.data !== null) {
                  a.data.forEach(function(c, idx) {
                    group.removeMember(c);
                  });
                }
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                console.log(\"getContactsInGroup complete\");
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Single User Data Structure

    \n
    {
        id : \"\",
        name : {
            given: \"\",
            middle: \"\",
            family: \"\",
            prefix: \"\",
            suffix: \"\",
            displayname: \"\",
            phonetic : {
                given: \"\",
                middle: \"\",
                family: \"\"
            }
        },
        nickname : \"\",
        organization : {
            name: \"\",
            jobTitle: \"\",
            department: \"\",

            // Android Specific properties
            symbol: \"\",
            phonetic: \"\",
            location: \"\",
            type: \"\"
        },
        notes : \"\",
        photo: null, // {N} ImageSource instance

        phoneNumbers : [],
        emailAddresses : [],
        postalAddresses : [],
        urls : []
    }
    \n

    PhoneNumber / EmailAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        value: \"\"
    }
    \n

    Url structure

    \n
    {
        label: \"\",
        value: \"\"
    }
    \n

    PostalAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        location: {
            street: \"\",
            city: \"\",
            state: \"\",
            postalCode: \"\",
            country: \"\",
            countryCode: \"\"
        }
    }
    \n

    Known Labels (for Urls, Addresses and Phones)

    \n

    The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

    \n
      \n
    • HOME\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • WORK\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • OTHER\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • FAX_HOME\niOS - phone\nAndroid - phone
      • \n
    • FAX_WORK\niOS - phone\nAndroid - phone
      • \n
    • PAGER\niOS - phone\nAndroid - phone
      • \n
    • MAIN\niOS - phone\nAndroid - phone
      • \n
    • HOMEPAGE\niOS - url\nAndroid - url
      • \n
    • CALLBACK\nAndroid - phone
      • \n
    • CAR\nAndroid - phone
      • \n
    • COMPANY_MAIN\nAndroid - phone
      • \n
    • ISDN\nAndroid - phone
      • \n
    • OTHER_FAX\nAndroid - phone
      • \n
    • RADIO\nAndroid - phone
      • \n
    • TELEX\nAndroid - phone
      • \n
    • TTY_TDD\nAndroid - phone
      • \n
    • WORK_MOBILE\nAndroid - phone
      • \n
    • WORK_PAGER\nAndroid - phone
      • \n
    • ASSISTANT\nAndroid - phone
      • \n
    • MMS\nAndroid - phone
      • \n
    • FTP\nAndroid - url
      • \n
    • PROFILE\nAndroid - url
      • \n
    • BLOG\nAndroid - url
      • \n
    \n

    Those are the system labels but you can also use any custom label you want.

    \n

    Single Group Data Structure

    \n
    {
      id: \"\";
      name: \"\";
    }
    \n

    iOS

    \n

    See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

    \n

    NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-rtc":{"name":"nativescript-web-rtc","version":"1.0.0","license":"MIT","readme":"

    NOTE: Deprecated July 8, 2017

    \n

    A new and improved plugin seed has been forked and now resides here:

    \n

    https://github.com/NativeScript/nativescript-plugin-seed

    \n

    Please use this new seed going forward as no new development or improvements will be added here.

    \n
    \n

    Develop a NativeScript plugin

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. cd myplugin
      3. \n
    3. npm run postclone
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-web-rtc
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onesignal-fixxx":{"name":"nativescript-onesignal-fixxx","version":"1.0.9","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

    NativeScript-OneSignal

    \n

    A Nativescript plugin that wraps the iOS and Android OneSignal Push Notifications SDK.

    \n

    Contributors

    \n

    OneSignal-iOS-SDK

    \n

    OneSignal-Android-SDK

    \n

    Supported Platforms

    \n
      \n
    • iOS
      • \n
    • Android
      • \n
    \n

    Installation

    \n
    tns plugin add nativescript-onesignal
    \n

    iOS

    \n

    Does not need any configuration.

    \n

    Android

    \n

    Does not need any configuration.

    \n

    Usage

    \n

    Typescript

    \n
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal
    \n

    iOS

    \n

    TnsOneSignal is the native iOS OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.ios) {
    \tclass MyDelegate extends UIResponder implements UIApplicationDelegate {

    \t\tpublic static ObjCProtocols = [UIApplicationDelegate]

    \t\tprivate applicationDidFinishLaunchingWithOptions(app: UIApplication, launchOptions: NSDictionary): boolean {

    \t\t\ttry {

    \t\t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\t\tTnsOneSignal.initWithLaunchOptionsAppId(launchOptions, 'b2f7f966-d8cc-11e4-bed1-df8f05be55ba')

    \t\t\t} catch (error) {
    \t\t\t\tconsole.error('error', error)
    \t\t\t}

    \t\t\treturn true
    \t\t}

    \t}
    \tapplication.ios.delegate = MyDelegate
    }
    \n

    Android

    \n

    TnsOneSignal is the native Android com.onesignal.OneSignal class.

    \n

    In your main.ts:

    \n
    import * as application from 'application';
    var TnsOneSignal = require('nativescript-onesignal').TnsOneSignal

    if (application.android) {
    \tapplication.on(application.launchEvent, function(args: application.ApplicationEventData) {

    \t\ttry {

    \t\t\tconsole.dump('TnsOneSignal', TnsOneSignal)
    \t\t\tTnsOneSignal.startInit(application.android.context).init()

    \t\t} catch (error) {
    \t\t\tconsole.error('error', error)
    \t\t}

    \t})
    }
    \n

    API Reference

    \n

    iOS API Reference

    \n

    Android API Reference

    \n

    Typescript Typings

    \n

    iOS

    \n

    Android - In the works...

    \n

    Demo

    \n
    npm run setup
    # iOS
    npm run demo.ios
    # Android
    npm run demo.android
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yoga-lib":{"name":"nativescript-yoga-lib","version":"1.0.0","license":"MIT","readme":"

    Yoga layout engine plugin for NativeScript

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-yoga-lib
    \n

    See the NativeScript CLI documentation\nand Nativescript Plugin documentation for more details

    \n

    Notes

    \n

    This plugin only provides the iOS YogaKit library from CocoaPods,\nand doesn't provide any JavaScript wrappers or APIs

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@irman/nativescript-ng2-slides":{"name":"@irman/nativescript-ng2-slides","version":"0.1.6","license":"MIT","readme":"

    NativeScript NG2 Slides for iOS and Android -- ALPHA

    \n

    \"npm\"\n\"npm\"

    \n

    Intro slides example:

    \n

    \"Nativescript

    \n

    Image carousel example:

    \n

    \"Nativescript

    \n

    videos are from the NativeScript Slides plugin. all features may not be implemented yet.

    \n

    videos by Brad Martin

    \n

    Example Usage:

    \n
    import { SlidesModule } from '@irman/nativescript-ng2-slides';

    import { AppComponent } from \"./app.component\";

    @NgModule({
        declarations: [AppComponent],
        bootstrap: [AppComponent],
        imports: [NativeScriptModule, SlidesModule],
        schemas: [NO_ERRORS_SCHEMA]
    })
    export class AppModule { }
    \n

    XML

    \n

    <slides>
        <slide class=\"slide-1\">
            <Label text=\"This is Panel 1\"></Label>
        </slide>
        <slide class=\"slide-2\">
            <Label text=\"This is Panel 2\"></Label>
        </slide>
        <slide class=\"slide-3\">
            <Label text=\"This is Panel 3\"></Label>
        </slide>
        <slide class=\"slide-4\">
            <Label text=\"This is Panel 4\"></Label>
        </slide>
        <slide class=\"slide-5\">
            <Label text=\"This is Panel 5\"></Label>
        </slide>
    </slides>
    \n

    CSS

    \n
    .slide-1{
      background-color: darkslateblue;
    }

    .slide-2{
      background-color: darkcyan;
    }
    .slide-3{
      background-color: darkgreen;
    }

    .slide-4{
      background-color: darkgoldenrod;
    }
    .slide-5{
      background-color: darkslategray;
    }
    Label{
      text-align: center;
      width: 100%;
      font-size: 35;
      margin-top: 35;
    \tcolor: #fff;

    }
    \n

    Great for Intros/Tutorials to Image Carousels.

    \n

    This very much a work in progress. Please feel free to contribute.

    \n

    Attributes for SlideContainer

    \n
      \n
    • \n

      loop : boolean - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

      \n
      • \n
    • \n

      pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

      \n
      • \n
    \n

    Indicators

    \n

    If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

    \n
    .slide-indicator-inactive{
        background-color: #fff;
        opacity : 0.4;
        width : 10;
        height : 10;
        margin-left : 2.5;
        margin-right : 2.5;
        margin-top : 0;
        border-radius : 5;
    }

    .slide-indicator-active{
        background-color: #fff;
        opacity : 0.9;
        width : 10;
        height : 10;
        margin-left : 2.5;
        margin-right : 2.5;
        margin-top : 0;
        border-radius : 5;
    }
    \n

    Plugin Development Work Flow:

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

    Known issues

    \n
      \n
    • Probably lots...
      • \n
    \n

    Contributing guidelines

    \n

    Contributing guidelines

    \n

    License

    \n

    MIT

    \n

    for {N} version 2.0.0+

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-doctor":{"name":"nativescript-doctor","version":"1.14.2","license":"Apache-2.0","readme":"

    nativescript-doctor

    \n

    Library that helps identifying if the environment can be used for development of {N} apps.

    \n

    Installation

    \n
      \n
    1. Using npm
      $ npm install nativescript-doctor --save
      \n
      2. \n
    \n

    Requirements

    \n
      \n
    1. Node.js 4.3.0 or later
      2. \n
    \n

    Usage

    \n
      \n
    • \n

      Module doctor:

      \n
        \n
      • Usage:
        • \n
      \n
      import { doctor } from \"nativescript-doctor\"

      async function main() {
      \tconst canExecuteLocalBuildForAndroid = await doctor.canExecuteLocalBuild(\"Android\");
      \tconst canExecuteLocalBuildForIos = await doctor.canExecuteLocalBuild(\"iOS\");
      \tconsole.log(\"Can execute local build for Android: \", canExecuteLocalBuildForAndroid);
      \tconsole.log(\"Can execute local build for iOS: \", canExecuteLocalBuildForIos);
      }

      main();
      \n
        \n
      • Interfaces:
        • \n
      \n
      /**
       * Describes methods which help identifying if the environment can be used for development of {N} apps.
       */
      interface IDoctor {
      \t/**
      \t * Checks if a local build can be executed on the current machine.
      \t * @param {string} platform The platform for which to check if local build is possible.
      \t * @return {Promise<boolean>} true if local build can be executed for the provided platform.
      \t */
      \tcanExecuteLocalBuild(platform: string): Promise<boolean>;

      \t/**
      \t * Executes all checks for the current environment and returns the warnings from each check.
      \t * @return {Promise<IWarning[]>} Array of all the warnings from all checks. If there are no warnings will return empty array.
      \t */
      \tgetWarnings(): Promise<IWarning[]>;
      }

      /**
       * Describes warning returned from nativescript-doctor check.
       */
      interface IWarning {
      \t/**
      \t * The warning.
      \t * @type {string}
      \t */
      \twarning: string;

      \t/**
      \t * Additional information for the warning.
      \t * @type {string}
      \t */
      \tadditionalInformation: string;

      \t/**
      \t * The platforms which are affected by this warning.
      \t * @type {string[]}
      \t */
      \tplatforms: string[];
      }
      \n
      • \n
    • \n

      Module sysInfo:

      \n
        \n
      • Usage:
        • \n
      \n
      import { sysInfo, setShouldCacheSysInfo } from \"nativescript-doctor\";

      async function main() {
      \t// The default value is true. If set to false the result of each check for each element
      \t// of the sys info will not be cached.
      \tsetShouldCacheSysInfo(false);

      \tconst javacVersion = await sysInfo.getJavaCompilerVersion();
      \tconsole.log(\"javac: \", javacVersion);

      \tconst adbVersion = await sysInfo.getAdbVersion();
      \tconsole.log(\"adb: \", adbVersion);

      \tconst cocoaPodsVersion = await sysInfo.getCocoaPodsVersion();
      \tconsole.log(\"cocoapods: \", cocoaPodsVersion);

      \tconst gitVersion = await sysInfo.getGitVersion();
      \tconsole.log(\"git: \", gitVersion);

      \tconst gradleVersion = await sysInfo.getGradleVersion();
      \tconsole.log(\"gradle: \", gradleVersion);

      \tconst monoVersion = await sysInfo.getMonoVersion();
      \tconsole.log(\"mono: \", monoVersion);

      \tconst nodeVersion = await sysInfo.getNodeVersion();
      \tconsole.log(\"node: \", nodeVersion);

      \tconst npmVersion = await sysInfo.getNpmVersion();
      \tconsole.log(\"npm: \", npmVersion);

      \tconst nodeGypVersion = await sysInfo.getNodeGypVersion();
      \tconsole.log(\"node-gyp: \", nodeGypVersion);

      \tconst osName = await sysInfo.getOs();
      \tconsole.log(\"os: \", osName);

      \tconst xcodeprojLocation = await sysInfo.getXCodeProjLocation();
      \tconsole.log(\"xcodeproj location: \", xcodeprojLocation);

      \tconst xcodeVersion = await sysInfo.getXCodeVersion();
      \tconsole.log(\"xcode: \", xcodeVersion);

      \tconst isAndroidInstalled = await sysInfo.isAndroidInstalled();
      \tconsole.log(\"is Android installed: \", isAndroidInstalled);

      \tconst isITunesInstalled = await sysInfo.isITunesInstalled();
      \tconsole.log(\"is iTunes installed: \", isITunesInstalled);

      \tconst isCocoaPodsWorkingCorrectly = await sysInfo.isCocoaPodsWorkingCorrectly();
      \tconsole.log(\"is cocoapods working correctly: \", isCocoaPodsWorkingCorrectly);

      \tconst nativeScriptCliVersion = await sysInfo.getNativeScriptCliVersion();
      \tconsole.log(\"{N} CLI version: \", nativeScriptCliVersion);

      \tconst xcprojInfo = await sysInfo.getXcprojInfo();
      \tconsole.log(\"xcproj info: \", xcprojInfo);

      \tconst isCocoaPodsUpdateRequired = await sysInfo.isCocoaPodsUpdateRequired();
      \tconsole.log(\"is CocoaPods update required: \", isCocoaPodsUpdateRequired);

      \tconst pythonInfo = await sysInfo.getPythonInfo();
      \tconsole.log(\"python info: \", pythonInfo );

      \tconst sysInfoData = await sysInfo.getSysInfo({ projectDir: \"/Users/username/myProject\" });
      \tconsole.log(\"sysInfo: \", sysInfoData);

      \tconst gitPath = await sysInfo.getGitPath();
      \tconsole.log(\"Path to the git executable: \", gitPath);
      }

      main();
      \n
        \n
      • Interfaces:
        • \n
      \n
      /**
       * Describes methods which helps collecting system information.
       */
      interface ISysInfo {
      \t/**
      \t * Returns the currently installed Java compiler version.
      \t * @return {Promise<string>} The currently installed Java compiler version.
      \t */
      \tgetJavaCompilerVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed version of Xcode.
      \t * @return {Promise<string>} Returns the currently installed version of Xcode or null if Xcode is not installed or executed on Linux or Windows.
      \t */
      \tgetXcodeVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed Node.js version.
      \t * @return {Promise<string>} Returns the currently installed Node.js version.
      \t */
      \tgetNodeVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed npm version.
      \t * @return {Promise<string>} Returns the currently installed npm version.
      \t */
      \tgetNpmVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed node-gyp version.
      \t * @return {Promise<string>} Returns the currently installed node-gyp version. If node-gyp is not installed it will return null.
      \t */
      \tgetNodeGypVersion(): Promise<string>;

      \t/**
      \t * Returns the xcodeproj location.
      \t * @return {Promise<string>} Returns the xcodeproj location. If the the xcodeproj is not installed it will return null.
      \t */
      \tgetXcodeprojLocation(): Promise<string>;

      \t/**
      \t * Checks if iTunes is installed.
      \t * @return {Promise<string>} Returns true if iTunes is installed.
      \t */
      \tisITunesInstalled(): Promise<boolean>;

      \t/**
      \t * Returns the currently installed Cocoapods version.
      \t * @return {Promise<string>} Returns the currently installed Cocoapods version. It will return null if Cocoapods is not installed.
      \t */
      \tgetCocoaPodsVersion(): Promise<string>;

      \t/**
      \t * Returns the os name.
      \t * @return {Promise<string>} Returns the os name.
      \t */
      \tgetOs(): Promise<string>;

      \t/**
      \t * Returns the currently installed ADB version.
      \t * @param {string} pathToAdb Defines path to adb
      \t * @return {Promise<string>} Returns the currently installed ADB version. It will return null if ADB is not installed.
      \t */
      \tgetAdbVersion(pathToAdb?: string): Promise<string>;

      \t/**
      \t * Checks if Android is installed.
      \t * @return {Promise<boolean>} Returns true if Android is installed.
      \t */
      \tisAndroidInstalled(): Promise<boolean>;

      \t/**
      \t * Returns the currently installed Mono version.
      \t * @return {Promise<string>} Returns the currently installed Mono version. It will return null if Mono is not installed.
      \t */
      \tgetMonoVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed Git version.
      \t * @return {Promise<string>} Returns the currently installed Git version. It will return null if Git is not installed.
      \t */
      \tgetGitVersion(): Promise<string>;

      \t/**
      \t * Returns the currently installed Gradle version.
      \t * @return {Promise<string>} Returns the currently installed Gradle version. It will return null if Gradle is not installed.
      \t */
      \tgetGradleVersion(): Promise<string>;

      \t/**
      \t * Checks if CocoaPods is working correctly by trying to install one pod.
      \t * @return {Promise<boolean>} Returns true if CocoaPods is working correctly.
      \t */
      \tisCocoaPodsWorkingCorrectly(): Promise<boolean>;

      \t/**
      \t * Returns the version of the globally installed NativeScript CLI.
      \t * @return {Promise<string>} Returns the version of the globally installed NativeScript CLI.
      \t */
      \tgetNativeScriptCliVersion(): Promise<string>;

      \t/**
      \t * Checks if xcproj is required to build projects and if it is installed.
      \t * @return {Promise<IXcprojInfo>} Returns the collected information aboud xcproj.
      \t */
      \tgetXcprojInfo(): Promise<IXcprojInfo>;

      \t/**
      \t * Checks if the current version of CocoaPods is compatible with the installed Xcode.
      \t * @return {boolean} true if an update us require.
      \t */
      \tisCocoaPodsUpdateRequired(): Promise<boolean>;

      \t/**
      \t * Checks if the Android SDK Tools are installed and configured correctly.
      \t * @return {Promise<boolean>} true if the Android SDK Tools are installed and configured correctly.
      \t */
      \tisAndroidSdkConfiguredCorrectly(): Promise<boolean>;

      \t/**
      \t * Returns the whole system information.
      \t * @param {ISysInfoConfig} config
      \t * @return {Promise<ISysInfoData>} The system information.
      \t */
      \tgetSysInfo(config?: ISysInfoConfig): Promise<ISysInfoData>;

      \t/**
      \t * If set to true each method will cache it's result. The default value is true.
      \t * @param {boolean} shouldCache The cache switch.
      \t * @return {void}
      \t */
      \tsetShouldCacheSysInfo(shouldCache: boolean): void;

      \t/**
      \t * Returns the path to the currently installed Git.
      \t * @return {Promise<string>} Returns the path to the currently installed Git. It will return null if Git is not installed.
      \t */
      \tgetGitPath(): Promise<string>;
      }

      interface ISysInfoData {
      \t// os stuff
      \t/**
      \t * Os platform flavour, reported by os.platform.
      \t * @type {string}
      \t */
      \tplatform: string;

      \t/**
      \t * Full os name, like `uname -a` on unix, registry query on win.
      \t * @type {string}
      \t */
      \tos: string;

      \t/**
      \t * .net version, applicable to windows only.
      \t * @type {string}
      \t */
      \tdotNetVer: string;

      \t/**
      \t * The command shell in use, usually bash or cmd.
      \t * @type {string}
      \t */
      \tshell: string;

      \t// node stuff
      \t/**
      \t * node.js version, returned by node -v.
      \t * @type {string}
      \t */
      \tnodeVer: string;

      \t/**
      \t * npm version, returned by `npm -v`.
      \t * @type {string}
      \t */
      \tnpmVer: string;

      \t/**
      \t * Process architecture, returned by `process.arch`.
      \t * @type {string}
      \t */
      \tprocArch: string;

      \t/**
      \t * node-gyp version as returned by `node-gyp -v`.
      \t * @type {string}
      \t */
      \tnodeGypVer: string;

      \t// dependencies
      \t/**
      \t * Xcode version string as returned by `xcodebuild -version`. Valid only on Mac.
      \t * @type {string}
      \t */
      \txcodeVer: string;

      \t/**
      \t * Version string of adb, as returned by `adb version`.
      \t * @type {string}
      \t */
      \tadbVer: string;

      \t/**
      \t * Whether iTunes is installed on the machine.
      \t * @type {boolean}
      \t */
      \titunesInstalled: boolean;

      \t/**
      \t * Whether `android` executable can be run.
      \t * @type {boolean}
      \t */
      \tandroidInstalled: boolean;

      \t/**
      \t * mono version, relevant on Mac only.
      \t * @type {string}
      \t */
      \tmonoVer: string;

      \t/**
      \t * git version string, as returned by `git --version`.
      \t * @type {string}
      \t */
      \tgitVer: string;

      \t/**
      \t * gradle version string as returned by `gradle -v`.
      \t * @type {string}
      \t */
      \tgradleVer: string;

      \t/**
      \t * javac version string as returned by `javac -version`.
      \t * @type {string}
      \t */
      \tjavacVersion: string;

      \t/**
      \t * pod version string, as returned by `pod --version`.
      \t * @type {string}
      \t */
      \tcocoaPodsVer: string;

      \t/**
      \t * xcodeproj gem location, as returned by `which gem xcodeproj`.
      \t * @type {string}
      \t */
      \txcodeprojLocation: string;

      \t/**
      \t * true id CocoaPods can successfully execute pod install.
      \t * @type {boolean}
      \t */
      \tisCocoaPodsWorkingCorrectly: boolean;

      \t/**
      \t * NativeScript CLI version string, as returned by `tns --version`.
      \t * @type {string}
      \t */
      \tnativeScriptCliVersion: string;

      \t/**
      \t * Information about xcproj.
      \t * @type {string}
      \t */
      \txcprojInfo: IXcprojInfo;

      \t/**
      \t * true if the system requires xcproj to build projects successfully and the CocoaPods version is not compatible with the Xcode.
      \t */
      \tisCocoaPodsUpdateRequired: boolean;

      \t/**
      \t * true if the Android SDK Tools are installed and configured correctly.
      \t * @type {boolean}
      \t */
      \tisAndroidSdkConfiguredCorrectly: boolean;
      }

      /**
       * Describes information about xcproj brew formula.
       */
      interface IXcprojInfo {
      \t/**
      \t * Determines whether the system needs xcproj to execute ios builds sucessfully.
      \t */
      \tshouldUseXcproj: boolean;

      \t/**
      \t * Determines whether xcproj can be called from the command line.
      \t */
      \txcprojAvailable: boolean;
      }
      \n
      • \n
    • \n

      Module androidToolsInfo:

      \n
        \n
      • Usage:
        • \n
      \n
      import { androidToolsInfo } from \"nativescript-doctor\"

      function main() {
      \tconst projectDir = \"/Users/username/myProject\";
      \tconsole.log(\"path to adb from android home: \", await androidToolsInfo.getPathToAdbFromAndroidHome());
      \tconsole.log(\"path to emulator executable: \", androidToolsInfo.getPathToEmulatorExecutable());
      \tconsole.log(\"android tools info: \", androidToolsInfo.getToolsInfo());
      \tconsole.log(\"ANROID_HOME validation errors: \", await androidToolsInfo.validateAndroidHomeEnvVariable());
      \tconsole.log(\"android tools info validation errors: \", await androidToolsInfo.validateInfo());
      \tconsole.log(\"javac validation errors: \", await androidToolsInfo.validateJavacVersion(await sysInfo.getJavaCompilerVersion(), projectDir));
      }

      main();
      \n
        \n
      • Interfaces:
        • \n
      \n
      /**
       * Describes methods for getting and validating Android tools.
       */
      interface IAndroidToolsInfo {
      \t/**
      \t * Returns the Android tools info.
      \t * @return {NativeScriptDoctor.IAndroidToolsInfoData} returns the Android tools info.
      \t */
      \tgetToolsInfo(): NativeScriptDoctor.IAndroidToolsInfoData;

      \t/**
      \t * Checks if the Android tools are valid.
      \t * @param {string} projectDir @optional The project directory. Used to determine the Android Runtime version and validate the Java compiler version against it.
      \t * If it is not passed or the project does not have Android runtime, this validation is skipped.
      \t * @return {NativeScriptDoctor.IWarning[]} An array of errors from the validation checks. If there are no errors will return [].
      \t */
      \tvalidateInfo(projectDir?: string): NativeScriptDoctor.IWarning[];

      \t/**
      \t * Checks if the current javac version is valid.
      \t * @param {string} installedJavaVersion The version of javac to check.
      \t * @param {string} projectDir @optional The project directory. Used to determine the Android Runtime version and validate the Java compiler version against it.
      \t * If it is not passed or the project does not have Android runtime, this validation is skipped.
      \t * @return {NativeScriptDoctor.IWarning[]} An array of errors from the validation checks. If there are no errors will return [].
      \t */
      \tvalidateJavacVersion(installedJavaVersion: string, projectDir?: string): NativeScriptDoctor.IWarning[];

      \t/**
      \t * Returns the path to the adb which is located in ANDROID_HOME.
      \t * @return {Promise<string>} Path to the adb which is located in ANDROID_HOME.
      \t */
      \tgetPathToAdbFromAndroidHome(): Promise<string>;

      \t/**
      \t * Checks if the ANDROID_HOME variable is set to the correct folder.
      \t * @return {NativeScriptDoctor.IWarning[]} An array of errors from the validation checks. If there are no errors will return [].
      \t */
      \tvalidateAndroidHomeEnvVariable(): NativeScriptDoctor.IWarning[];

      \t/**
      \t * Returns the path to the emulator executable.
      \t * @return {string} The path to the emulator executable.
      \t */
      \tgetPathToEmulatorExecutable(): string;
      }

      /**
       * Describes information about installed Android tools and SDKs.
       */
      interface IAndroidToolsInfoData {
      \t/**
      \t * The value of ANDROID_HOME environment variable.
      \t */
      \tandroidHomeEnvVar: string;

      \t/**
      \t * The latest installed version of Android Build Tools that satisfies CLI's requirements.
      \t */
      \tbuildToolsVersion: string;

      \t/**
      \t * The latest installed version of Android SDK that satisfies CLI'      s requirements.
      \t */
      \tcompileSdkVersion: number;

      \t/**
      \t * The latest installed version of Android Support Repository that satisfies CLI's requirements.
      \t */
      \tsupportRepositoryVersion: string;
      }
      \n
      • \n
    • \n

      Module constants:

      \n
        \n
      • Usage:
        • \n
      \n
      import { constants } from \"nativescript-doctor\"

      function main() {
      \tfor(let constantName in constants) {
      \t\tconsole.log(`${constantName}: ${constants[constantName]}`);
      \t}
      }

      main();
      \n
        \n
      • Interfaces:
        • \n
      \n
      /**
       * Describes the constants used in the module.
       */
      interface IConstants {
      \tANDROID_PLATFORM_NAME: string;
      \tIOS_PLATFORM_NAME: string;
      \tSUPPORTED_PLATFORMS: string[];
      }
      \n
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-tracking-transparency":{"name":"@nstudio/nativescript-tracking-transparency","version":"1.0.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-tracking-transparency

    \n

    🕵️ A NativeScript Library for interacting with the tracking API for iOS 14+

    \n
    ns plugin add @nstudio/nativescript-tracking-transparency
    \n

    Usage

    \n

    Open App_Resources/iOS/Info.plist and add this to the bottom:

    \n
    <key>NSUserTrackingUsageDescription</key>
    <string>$(PRODUCT_NAME) requires your permission to track in order to show you more relevant ads.</string>
    \n

    Replace NSUserTrackingUsageDescription description string with something of your liking.

    \n
    import { TrackingTransparency, TrackingStatus } from '@nstudio/nativescript-tracking-transparency';

    // get status
    const status = TrackingTransparency.getTrackingStatus();
    if (status === TrackingStatus.Authorized || status === TrackingStatus.Unavailable) {
        // enable tracking features
    }

    // request access
    TrackingTransparency.requestTrackingPermission().then(status => {
      if (status === TrackingStatus.Authorized) {
        // enable tracking features
      }
    });
    \n
      \n
    • TrackingStatus.Unavailable: The tracking API is not available on the current device. That's the case on Android devices and iPhones below iOS 14.
      • \n
    • TrackingStatus.Denied: The user has explicitly denied permission to track. You'd want to respect that and disable any tracking features in your app.
      • \n
    • TrackingStatus.Authorized: The user has granted permission to track. You can now enable tracking features in your app.
      • \n
    • TrackingStatus.Restricted: The tracking permission alert cannot be shown, because the device is restricted. See ATTrackingManager.AuthorizationStatus.restricted for more information.
      • \n
    • TrackingStatus.NotDetermined: The user has not been asked to grant tracking permissions yet. Call requestTrackingPermission().
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@reazerdev/nativescript-virtual-joystick":{"name":"@reazerdev/nativescript-virtual-joystick","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript Virtual Joystick

    \n

    The similar version of this plugin for the NativeScript 5\nis available here

    \n

    Disclaimer

    \n
    \n

    This plugin is almost fully based on the source code of Victor Sossa\nThank you guys for your hard work and contributions!

    \n
    \n

    Screenshot

    \n

    \"screenshot\"

    \n

    Installation

    \n
    ns plugin add @reazerdev/nativescript-virtual-joystick
    \n

    Usage

    \n\n\n\n\n\n\n\n\n\n\n\n
    Android Library
    controlwear virtual-joystick-android
    \n
    <Page class=\"page\"
      navigatingTo=\"onNavigatingTo\"
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:jv=\"@reazerdev/nativescript-virtual-joystick\">
      <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Virtual Joystick\"></Label>
      </ActionBar>

      <StackLayout>
        <Label text=\"{{ 'Angle: ' + angle }}\" />
        <Label text=\"{{ 'Strength: ' + strength }}\" />

        <Label text=\"{{ 'Left Horizontal: ' + lx }}\" />
        <Label text=\"{{ 'Left Vertical: ' + ly }}\" />

        <Label text=\"{{ 'Right Horizontal: ' + rx }}\" />
        <Label text=\"{{ 'Right Vertical: ' + ry }}\" />

        <StackLayout orientation=\"horizontal\">
          <jv:VirtualJoystick
            move=\"onMove\"
            angle=\"{{ angle }}\"
            strength=\"{{ strength }}\"
            xAxis=\"{{ lx }}\"
            yAxis=\"{{ ly }}\"
            jvColor=\"#AA0000\"
            jvBackgroundColor=\"#0000AA\"
            jvBorderColor=\"#00AA00\"
            width=\"50%\" />

          <jv:VirtualJoystick
            angle=\"{{ angle }}\"
            strength=\"{{ strength }}\"
            xAxis=\"{{ rx }}\"
            yAxis=\"{{ ry }}\"
            jvColor=\"#330000\"
            jvBackgroundColor=\"#000033\"
            jvBorderColor=\"#003300\"
            buttonStickToBorder=\"true\"
            width=\"50%\" />
        </StackLayout>
      </StackLayout>
    </Page>
    \n
    import { NavigatedData, Page } from \"@nativescript/core\";
    import { HomeViewModel } from \"./home-view-model\";
    import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

    export function onNavigatingTo(args: NavigatedData) {
      const page = <Page>args.object;

      page.bindingContext = new HomeViewModel();
    }

    export function onMove(data: VirtualJoystickEventData) {
      console.log(`Angle: ${data.angle}`);
      console.log(`Strength: ${data.strength}`);
      console.log(`Horizontal: ${data.xAxis}`);
      console.log(`Vertical: ${data.yAxis}`);
    }
    \n

    Usage within Angular Apps

    \n

    Import an Angular Module

    \n
    import { NativeScriptVirtualJoystickModule } from '@reazerdev/nativescript-virtual-joystick/angular';

    @NgModule({
        [
           ...,
           NativeScriptVirtualJoystickModule
        ],
        ...
    })
    export class AppModule {}
    \n

    Use custom element in your views

    \n
    <StackLayout orientation=\"horizontal\">
      <VirtualJoystick
        (move)=\"onMove($event)\"
        angle=\"{{ angle }}\"
        strength=\"{{ strength }}\"
        xAxis=\"{{ lx }}\"
        yAxis=\"{{ ly }}\"
        jvColor=\"#AA0000\"
        jvBackgroundColor=\"#0000AA\"
        jvBorderColor=\"#00AA00\"
        width=\"50%\" />

      <VirtualJoystick
        angle=\"{{ angle }}\"
        strength=\"{{ strength }}\"
        xAxis=\"{{ rx }}\"
        yAxis=\"{{ ry }}\"
        jvColor=\"#330000\"
        jvBackgroundColor=\"#000033\"
        jvBorderColor=\"#003300\"
        buttonStickToBorder=\"true\"
        width=\"50%\" />
    </StackLayout>
    \n
    import { Component } from '@angular/core';
    import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

    @Component({
      selector: 'ns-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent {
      public onMove(event: VirtualJoystickEventData) {
        console.log(event.angle);
        console.log(`Strength: ${data.strength}`);
        console.log(`Horizontal: ${data.xAxis}`);
        console.log(`Vertical: ${data.yAxis}`);
      }
    }
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyCssTypeDefaultDescription
    angle-number-1Read only. The angle of the button. Counter-clockwise, 0 is right.
    strength-number0Read only. The distance from center in the range 0 - 100.
    xAxis-number0Read only. The distance from center on horizontal axis in the range of -1 (left) to 1 (right).
    yAxis-number0Read only. The distance from center on vertical axis in the range of -1 (down) to 1 (up).
    jvColorjv-colorColor#000000The color of the button. If image is provided this property is ignored.
    jvImagejv-imagestringundefinedThe image to use as button.
    jvBackgroundColorjv-background-colorColortransparentThe color of range circle.
    jvBorderColorjv-border-colorColortransparentThe color of range circle border.
    jvBorderWidthjv-border-widthnumber3The thickness of the range circle border.
    buttonAutoRecenter-booleantrue-
    buttonStickToBorder-booleanfalseIf set to true, button only has 2 states: centered (strength 0) or pushed (strength 100).
    buttonDirection-number0Restrict button movement. 0 means all directions, positive number restricts movement to vertical axis, negative number -- horizontal axis.
    buttonSizeRatio-number0.25Button size ratio relative to widget size.
    backgroundSizeRatio-number0.75Range circle size ratio relative to widget size.
    fixedCenter-booleantrueWhether button center (strength 0) is fixed to widget center or relative to touchdown point.
    enabled-booleantrueWhether widget accepts taps and emits events.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"proximiio-unified-sdk":{"name":"proximiio-unified-sdk","version":"1.0.1","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/geocoding":{"name":"@nativescript-community/geocoding","version":"3.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-appconfig":{"name":"nativescript-dev-appconfig","version":"1.0.2","license":"MIT","readme":"

    nativescript-dev-appconfig

    \n

    Adds support for --env.config argument to Nativescript CLI commands.

    \n

    --env.config <name> will load $ProjectDir/config/<name>.json and inject it as $ProjectDir/app/config.json

    \n

    If config contains an "app_name" key, the native app will have its product name updated.

    \n

    The config file is injected into the app as "config.json", so that it can be loaded at runtime.

    \n

    Install:

    \n
    tns plugin add nativescript-dev-appconfig
    \n

    Example:

    \n

    tns prepare android --env.config beta will load $ProjectDir/config/beta.json

    \n

    If beta.json contains "app_name": "My Beta App",\nit will update product name in Info.plist for iOS and strings.xml for Android.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-emulator-reload":{"name":"nativescript-emulator-reload","version":"1.2.0","license":"WTFPL ( http://www.wtfpl.net/ )","readme":"

    nativescript-emulator-reload

    \n

    This small gulp script will monitor the source files of a NativeScript project and when a file is changed it'll rebuild and reload the emulator. Will also use Babel to compile your ES6+ JS into ES5 if you want it to.

    \n

    Currently only supports iOS emulators.

    \n

    Install

    \n

    Either download from Github:

    \n

    Download the package.json and gulpfile.js and put in the root directory of your app. Then run

    \n
    npm install
    \n

    Or install from NPM:

    \n
    cd /your/project/root
    npm install nativescript-emulator-reload
    mv node_modules/nativescript-emulator-reload/* .
    rm -rf node_modules/nativescript-emulator-reload
    npm install
    \n

    Run

    \n
    gulp
    \n

    or with a device flag:

    \n
    gulp -d iPad-Retina
    \n

    list valid devices with gulp help

    \n

    ECMAScript 6 version.

    \n

    If you want to use ECMAScript 6 there's an gulpfile (gulpfile.es6.js) which will use Babel to turn your ES6+ code into ES5 code.

    \n

    To use this file, rename gulpfile.js to gulpfile.es5.js (or really to anything) and rename gulpfile.es6.js to gulpfile.js.

    \n
    gulp watch
    \n

    The ES6 Gulpscript is opinionated

    \n

    You most probably need to edit the settings in the gulpfile.

    \n

    The default settings assumes the following file structure:

    \n
    /app
    \t/src
    \t\t/shared
    \t\t/test
    \t\t/views\t
    \t/tns_modules
    \t/App_Resources
    \t/...\t\t\t
    \n

    Where the content of src will be moved to /app when compiled. Creating a file structure like:

    \n
    /app
    \t/src
    \t\t/shared
    \t\t/test
    \t\t/views\t
    \t/tns_modules
    \t/App_Resources
    \t/...
    \t/shared
    \t/test
    \t/views\t\t
    \n

    Where the app/{shared,test,views} are the compiled version of app/src/{shared,test,views}. This way only the ES6 files will be compiled (and not things like tns_modules, anything in node_modules if you install npm packages, etc.)

    \n

    Testing with Mocha

    \n

    Mocha is included for your testing pleasures.

    \n

    Place your tests in /src/test and run them with gulp test

    \n

    Linting with eslint

    \n

    eslint is included for your linting pleasures.

    \n

    Lint the code in your app/src folder by running gulp lint.

    \n

    If you're using ES6 you most probably want these settings in your .eslintrc in the root directory of your project. es6: true will enable all ES6 features but modules which is enabled by "ecmaFeatures": { modules: true }. Read more about configuring eslint.

    \n
    {
        \"env\": {
        \t\"es6\": true
        },
        \"ecmaFeatures\": { 
            modules: true 
        }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-html2pdf":{"name":"nativescript-html2pdf","version":"2.0.0","license":"ISC","readme":"

    nativescript-html2pdf

    \n

    Allows easy conversion from HTML to PDF files.\nCurrently, only Android is supported.

    \n

    Installation

    \n
    tns plugin install nativescript-html2pdf
    \n

    Usage

    \n
    import { html2PdfFile } from 'nativescript-html2pdf';

    let myHtml: string = '<p>Hello World</p>';

    let pdfPath: string = 'fs.knownFolders.documents().getFile('myPdf.pdf').path;

    html2PdfFile(myHtml, pdfPath);

    //Your PDF file is now available at the specified path.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@taybull/nativescript-contacts":{"name":"@taybull/nativescript-contacts","version":"1.6.2","license":"MIT","readme":"

    NativeScript Contacts

    \n

    A NativeScript module providing easy access to iOS and Android contact directory. Pick a contact, update it, delete it, or add a new one.\nWorking with groups available in 1.5.0. Create a group, add and remove contacts to the group, and delete a group.

    \n

    Installation

    \n

    Run tns plugin add nativescript-contacts

    \n

    Usage

    \n

    To use the contacts module you must first require() it.

    \n
    var contacts = require(\"nativescript-contacts\");
    \n

    iOS Caveats

    \n

    Add following key to Info.plist found in app/App_Resources/iOS/Info.plist

    \n
    <key>NSContactsUsageDescription</key>
    <string>Kindly provide permission to access contact on your device.</string>
    \n

    User will be asked for permissions when contacts are accessed by the app.

    \n

    Android Caveats

    \n

    From API level 23 on you need to check for the appropriate permissions to access the contacts. So not only do you need these permissions in your manifest:

    \n
    <uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    <uses-permission android:name=\"android.permission.READ_CONTACTS\" />
    <uses-permission android:name=\"android.permission.WRITE_CONTACTS\" />
    \n

    You also need to make sure to request the permissions everytime you perform the operation itself (e.g. using the great nativescript-permissions plugin):

    \n
    const contact = new Contact();
    (...)
    Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], \"I need these permissions because I'm cool\")
                .then(() => {
                    contact.save();
                });
    \n

    Methods

    \n

    getContact: Pick one contact and bring back its data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below

        // lets say you wanted to grab first name and last name
        console.log(contact.name.given + \" \" + contact.name.family);

        //lets say you want to get the phone numbers
        contact.phoneNumbers.forEach(function(phone) {
          console.log(phone.value);
        });

        //lets say you want to get the addresses
        contact.postalAddresses.forEach(function(address) {
          console.log(address.location.street);
        });
      }
    });
    \n

    Save a new contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"image-source\");

    var newContact = new contacts.Contact();
    newContact.name.given = \"John\";
    newContact.name.family = \"Doe\";
    newContact.phoneNumbers.push({
      label: contacts.KnownLabel.HOME,
      value: \"123457890\"
    }); // See below for known labels
    newContact.phoneNumbers.push({ label: \"My Custom Label\", value: \"11235813\" });
    newContact.photo = imageSource.fromFileOrResource(\"~/photo.png\");
    newContact.save();
    \n

    Update an existing contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");
    var imageSource = require(\"image-source\");

    contacts.getContact().then(function(args) {
      if (args.response === \"selected\") {
        var contact = args.data;
        contact.name.given = \"Jane\";
        contact.name.family = \"Doe\";

        imageSource
          .fromUrl(\"http://www.google.com/images/errors/logo_sm_2.png\")
          .then(function(src) {
            contact.photo = src;
            contact.save();
          });
      }
    });
    \n

    Delete a contact

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contact.delete();
      }
    });
    \n

    Check if contact is Unified/Linked (iOS Specific)

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        console.log(contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified');
      }
    });
    \n

    getContactsByName: Find all contacts whose name matches. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getContactsByName(\"Hicks\", contactFields).then(
      function(args) {
        console.log(\"getContactsByName Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getAllContacts: Find all contacts. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    /*
      Optional: contactFields contains the fields to retrieve from native backend to reduce processing time
      var contactFields = ['name','organization','nickname','notes','photo','urls','phoneNumbers','emailAddresses','postalAddresses']

      If not supplied, all available contactFields will be returned.
    */
    var contactFields = [\"name\", \"phoneNumbers\"];

    contacts.getAllContacts(contactFields).then(
      function(args) {
        console.log(\"getAllContacts Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getContactById: Finds the contact with the matching identifier. Returns GetFetchResult. (iOS Only)

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    var contactId = '[Contact Identifier]'; // Assumes this is a valid contact identifier (Contact.id)

    contacts.getContactById(contactId).then(
      function(args) {
        console.log(\"getContactById Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no contacts were found.
        /// args.reponse: \"fetch\"
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    getGroups: Find groups. Returns an array of group data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          console.log(\"getGroups Complete\");
          console.log(JSON.stringify(args));
          /// Returns args:
          /// args.data: Generic cross platform JSON object, null if no groups were found.
          /// args.reponse: \"fetch\"

          if (args.data === null) {
            console.log(\"No Groups Found!\");
          } else {
            console.log(\"Group(s) Found!\");
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Save a new group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    var groupModel = new contacts.Group();
    groupModel.name = \"Test Group\";
    //Save Argument (boolean)
    //iOS: [false=> Use Local Container, true=> Use Default Container]
    //Android: will always be true, setting this value will not affect android.
    groupModel.save(false);
    \n

    Delete a group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getGroups(\"Test Group\").then(
      function(args) {
        console.log(\"getGroups Complete\");
        console.log(JSON.stringify(args));
        /// Returns args:
        /// args.data: Generic cross platform JSON object, null if no groups were found.
        /// args.reponse: \"fetch\"

        if (args.data !== null) {
          console.log(\"Group(s) Found!\");
          args.data[0].delete(); //Delete the first found group
        }
      },
      function(err) {
        console.log(\"Error: \" + err);
      }
    );
    \n

    Add Member To Group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts.getContact().then(function(args) {
      /// Returns args:
      /// args.data: Generic cross platform JSON object
      /// args.reponse: \"selected\" or \"cancelled\" depending on wheter the user selected a contact.

      if (args.response === \"selected\") {
        var contact = args.data; //See data structure below
        contacts.getGroups(\"Test Group\").then(
          function(a) {
            if (a.data !== null) {
              var group = a.data[0];
              group.addMember(contact);
            }
          },
          function(err) {
            console.log(\"Error: \" + err);
          }
        );
      }
    });
    \n

    Remove Member From Group

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
                console.log(\"getContactsInGroup complete\");

                if (a.data !== null) {
                  a.data.forEach(function(c, idx) {
                    group.removeMember(c);
                  });
                }
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    getContactsInGroup: Get all contacts in a group. Returns an array of contact data.

    \n
    var app = require(\"application\");
    var contacts = require(\"nativescript-contacts\");

    contacts
      .getGroups(\"Test Group\") //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
      .then(
        function(args) {
          if (args.data !== null) {
            var group = args.data[0];

            contacts.getContactsInGroup(group).then(
              function(a) {
                console.log(\"getContactsInGroup complete\");
                /// Returns args:
                /// args.data: Generic cross platform JSON object, null if no groups were found.
                /// args.reponse: \"fetch\"
              },
              function(err) {
                console.log(\"Error: \" + err);
              }
            );
          }
        },
        function(err) {
          console.log(\"Error: \" + err);
        }
      );
    \n

    Single User Data Structure

    \n
    {
        id : \"\",
        name : {
            given: \"\",
            middle: \"\",
            family: \"\",
            prefix: \"\",
            suffix: \"\",
            displayname: \"\",
            phonetic : {
                given: \"\",
                middle: \"\",
                family: \"\"
            }
        },
        nickname : \"\",
        organization : {
            name: \"\",
            jobTitle: \"\",
            department: \"\",

            // Android Specific properties
            symbol: \"\",
            phonetic: \"\",
            location: \"\",
            type: \"\"
        },
        notes : \"\",
        photo: null, // {N} ImageSource instance

        phoneNumbers : [],
        emailAddresses : [],
        postalAddresses : [],
        urls : []
    }
    \n

    PhoneNumber / EmailAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        value: \"\"
    }
    \n

    Url structure

    \n
    {
        label: \"\",
        value: \"\"
    }
    \n

    PostalAddress structure

    \n
    {
        id: \"\",
        label: \"\",
        location: {
            street: \"\",
            city: \"\",
            state: \"\",
            postalCode: \"\",
            country: \"\",
            countryCode: \"\"
        }
    }
    \n

    Known Labels (for Urls, Addresses and Phones)

    \n

    The following constants are exposed from the plugin in the KnownLabel structure. See details bellow for what types and on what platform they are supported

    \n
      \n
    • HOME\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • WORK\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • OTHER\niOS - phone, email, postal, url\nAndroid - phone, email, postal, url
      • \n
    • FAX_HOME\niOS - phone\nAndroid - phone
      • \n
    • FAX_WORK\niOS - phone\nAndroid - phone
      • \n
    • PAGER\niOS - phone\nAndroid - phone
      • \n
    • MAIN\niOS - phone\nAndroid - phone
      • \n
    • HOMEPAGE\niOS - url\nAndroid - url
      • \n
    • CALLBACK\nAndroid - phone
      • \n
    • CAR\nAndroid - phone
      • \n
    • COMPANY_MAIN\nAndroid - phone
      • \n
    • ISDN\nAndroid - phone
      • \n
    • OTHER_FAX\nAndroid - phone
      • \n
    • RADIO\nAndroid - phone
      • \n
    • TELEX\nAndroid - phone
      • \n
    • TTY_TDD\nAndroid - phone
      • \n
    • WORK_MOBILE\nAndroid - phone
      • \n
    • WORK_PAGER\nAndroid - phone
      • \n
    • ASSISTANT\nAndroid - phone
      • \n
    • MMS\nAndroid - phone
      • \n
    • FTP\nAndroid - url
      • \n
    • PROFILE\nAndroid - url
      • \n
    • BLOG\nAndroid - url
      • \n
    \n

    Those are the system labels but you can also use any custom label you want.

    \n

    Single Group Data Structure

    \n
    {
      id: \"\";
      name: \"\";
    }
    \n

    GetFetchResult Data Structure

    \n

    The object returned by contact fetch requests.

    \n
    {
      data: Contact[];
      response: string;
    }
    \n

    iOS

    \n

    See apples docs on properties available:\nhttps://developer.apple.com/library/mac/documentation/Contacts/Reference/CNContact_Class/index.html#//apple_ref/occ/cl/CNContact

    \n

    NOTE: Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@edusperoni/nativescript-sms-inbox":{"name":"@edusperoni/nativescript-sms-inbox","version":"1.0.2","license":"Apache-2.0","readme":"

    @edusperoni/nativescript-sms-inbox

    \n
    ns plugin add @edusperoni/nativescript-sms-inbox
    \n

    NativeScript Sms Inbox

    \n

    A NativeScript plugin to read text messages on android phone inbox using undocumented android api.

    \n

    Installation

    \n

    Install the plugin using the NativeScript CLI tooling

    \n
    tns plugin add nativescript-sms-inbox
    \n

    Android

    \n

    To read sms inbox in the phone without user interaction on Android your app must request permission. The following must be added to your app's AndroidManifest.xml

    \n
    <uses-permission android:name=\"android.permission.READ_SMS\" />
    \n

    Usage

    \n

    To use the phone module you must first require() it from your project's node_modules directory:

    \n
    var inbox = require( \"nativescript-sms-inbox\" );
    \n

    After you have a reference to the module you can then call the available methods.

    \n

    Methods

    \n

    getInboxes: fetch all text message in the inbox

    \n
    Parameters
    \n
      \n
    • options: A map of parameters e.g. max (for max results), etc..
      • \n
    \n

    For example, the code below gets the last 10 smses from the device inbox:

    \n
    // my-page.js
    var inbox = require( \"nativescript-sms-inbox\" );
    inbox.getInboxes({ max: 10 }).then(function(res) {
        console.log(JSON.stringify(res));
    }, function(err) {
        console.log(\"Error: \" + err);
    });
    \n

    getInboxesFromNumber: Get all text messages in the sms inbox sent by provided fromNumber

    \n
    Parameters
    \n
      \n
    • fromNumber - The number on which to filter SMS inbox messages.
      • \n
    • options - A map of parameters e.g. max (for max results), etc.
      • \n
    \n

    For example, the code below gets the last 10 smses from the device inbox sent by the provided fromNumber:

    \n
    // my-page.js
    var inbox = require( \"nativescript-sms-inbox\" );
    inbox.getInboxesFromNumber(\"0712345678\", { max: 10 }).then(function(res) {
        console.log(JSON.stringify(res));
    }, function(err) {
        console.log(\"Error: \" + err);
    });
    \n

    TypeScript example

    \n

    import * as TNSInbox from 'nativescript-sms-inbox';

    // Get the last 10 inbox messages
    public getInboxMessages() {    
        TNSInbox.getInboxes({ max: 10 }).then((res) => {
            console.log(JSON.stringify(res))    ;
        }, (err) => {
            console.log('Error: ' + err);
        });
    }

    // Get the last 10 inbox messages sent by the provided fromNumber
    public getInboxMessagesFromNumber(fromNumber: string) { //fromNumber = \"0712345678\"
        TNSInbox.getInboxesFromNumber(fromNumber, { max: 10 }).then((res) => {
            console.log(JSON.stringify(res))    ;
        }, (err) => {
            console.log('Error: ' + err);
        });
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mhtghn/nativescript-highcharts":{"name":"@mhtghn/nativescript-highcharts","version":"1.0.2","license":"Apache-2.0","readme":"

    nativescript-highcharts

    \n

    This plugins allows you to use Highcharts in NativeScript.

    \n
    ns plugin add @mhtghn/nativescript-highcharts
    \n

    Info: This plugin works with NativeScript 7.0.0 and above. For older versions of NativeScript check this repo

    \n

    Screenshots

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    \"Demo     \n\"Demo

    \n

    Demo apps

    \n

    NativeScript-Core (XML)

    \n

    Check out the demo folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo.ios # or apps.demo.android
    \n

    NativeScript-Angular

    \n

    Check out the demo-angular folder. This is how to clone and run it:

    \n
    git clone https://github.com/mhtghn/ns-plugins.git
    cd ns-plugins
    npm run setup
    npm run start
    >   @mhtghn.nativescript-highcharts.build
    npm run start
    >   apps.demo-angular.ios # or apps.demo-angular.android
    \n

    Usage

    \n

    NativeScript-Core

    \n

    TypeScript

    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

    \n
    ...
    export class HomeViewModel extends Observable {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    XML

    \n
    <Page class=\"page\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:ui=\"@mhtghn/nativescript-highcharts\">

        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:Highcharts options=\"{{chartOptionsString}}\"></ui:Highcharts>
        </GridLayout>
    </Page>
    \n

    NativeScript Angular

    \n

    TypeScript

    \n

    Import the HighchartsModule in your module.

    \n
    ...
    import { HighchartsModule } from '@mhtghn/nativescript-highcharts/angular';

    @NgModule({
        imports: [
            ...
            HighchartsModule
        ],
        ...
    })
    export class HomeModule { }
    \n

    Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

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

    @Component({
        selector: \"Home\",
        moduleId: module.id,
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent implements OnInit {
        chartOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        };

        get chartOptionsString(): string {
            return JSON.stringify(this.chartOptions);
        }
        ...
    }
    \n

    HTML

    \n
    <ActionBar class=\"action-bar\">
    <ActionBar class=\"action-bar\">
        <Label class=\"action-bar-title\" text=\"Home\"></Label>
    </ActionBar>

    <GridLayout class=\"page\">
        <!-- Add your page content here -->
        <Highcharts options=\"{{chartOptionsString}}\"></Highcharts>
    </GridLayout>
    \n

    Highcharts Compatibility

    \n
      \n
    • highcharts.js: v8.2.0
      • \n
    • highcharts-more.js: v8.2.0
      • \n
    • highcharts-3d.js: v8.2.0
      • \n
    • sankey.js: v8.2.0
      • \n
    • organization.js: v8.2.0
      • \n
    \n

    Tips

    \n
      \n
    • Add the next option to the chart options to disable the display of the Highcharts.com Hyperlink in the webview
      credits: {
      \tenabled: false;
      }
      \n
      • \n
    \n

    Credit

    \n

    This plugin is greatly inspired by this demo from Eddy Verbruggen

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sergeymell/nativescript-color-wheel":{"name":"@sergeymell/nativescript-color-wheel","version":"1.0.15","license":"Apache-2.0","readme":"

    NativeScript Color Wheel

    \n

    NativeScript 6 version of this plugin is available\nat https://github.com/SergeyMell/nativescript-n6-color-wheel

    \n

    Description

    \n

    This plugin is actually a color picker plugin which can be used\nas a simple component wherever you need it. It allows you to

    \n
      \n
    • pick a color by clicking appropriate position on the color wheel
      • \n
    • render whatever UI as a picker icon customizing it on your own needs
      • \n
    • set an initial color for the plugin
      • \n
    • put the color picker wherever you need it as long it's just a custom element.
      • \n
    \n

    Plugin works simultaneously for both iOS and Android platforms and\nis not based on any additional libraries, CocoaPods etc

    \n

    Examples

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Color wheel with custom selection pickerColor picker in a modal dialog
    \"\"\"\"
    \n

    Installation

    \n
    ns plugin add @sergeymell/nativescript-color-wheel
    \n

    Usage

    \n

    In NativeScript Core applications:

    \n
    <clw:ColorWheel width=\"200\" height=\"200\" color=\"#FFB35E\"
                                colorSelect=\"{{colorSelected}}\"/>
    \n

    In NativeScript Angular applications:

    \n
      \n
    1. Add NativeScriptColorWheelModule from @sergeymell/nativescript-color-wheel/angular to the imports section of your Angular module
      2. \n
    2. Use the ColorWheel component where you need it
      3. \n
    \n
    <ColorWheel width=\"200\" height=\"200\" margin=\"20\" (colorSelect)=\"onColorSelected($event)\"></ColorWheel>
    \n

    TODOs:

    \n
      \n
    • optimize the algorithm of initial color location determination
      • \n
    • make color brightness configurable (at least for Android)
      • \n
    • add support of other color selection area forms (i.e. square)
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-hook-versioning":{"name":"@vulksoft/nativescript-hook-versioning","version":"7.0.5","license":"Apache-2.0","readme":"

    Nativescript Hook Versioning

    \n

    \"npm\"

    \n

    This plugin add an hook that do the followings things:

    \n
      \n
    • Take your version from nativescript.config.ts and put it as versionName into your AndroidManifest.xml and as CFBundleShortVersionString into your Info.plist.
      • \n
    • Take an environment variable of your choice and put it as versionCode into your AndroidManifest.xml and as CFBundleVersion into your Info.plist. That allow you to use an environment variable from your CICD and auto increment your version code.
      • \n
    \n

    Installation

    \n

    ns plugin add nativescript-hook-versioning

    \n

    Usage

    \n

    You can add the following configuration into your nativescript.config.ts

    \n
    nativescriptHookVersioning: {
        versionName: true,
        versionCode: {
          enabled: true,
          content: 'BUNDLE_VERSION_CODE', // This can contains '+ANY_NUMBER' if you need to increment your versionCode.
        },
      },
    \n

    to configure it to your likings.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-dialog":{"name":"@nstudio/nativescript-dialog","version":"1.0.1","license":"Apache-2.0","readme":"

    \n

    NativeScript-Dialog

    \n

    \n

    This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-intercom-bridge-updated":{"name":"nativescript-intercom-bridge-updated","version":"1.0.4","license":"MIT","readme":"

    Intercom for NativeScript

    \n

    This is a plugin that allows your NativeScript app to use Intercom for iOS and/or Intercom for Android.

    \n
      \n
    • Intercom for iOS supports iOS 8, 9 & 10.
      • \n
    • Intercom for Android supports API 15 and above.
      • \n
    \n

    Installation

    \n

    To install the plugin in your NativeScript app, run the following:

    \n
    tns plugin add nativescript-intercom-bridge
    \n

    Example App

    \n

    An example app is provided here that shows a basic NativeScript app integration with Intercom.

    \n

    License

    \n

    nativescript-intercom-bridge is released under the MIT License.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cdev38399/nativescript-webview-interface":{"name":"@cdev38399/nativescript-webview-interface","version":"2.0.2","readme":"

    \"npm\"\n\"npm\"

    \n

    Nativescript-WebView-Interface

    \n

    Nativescript Plugin for bi-directional communication between WebView and Android/iOS

    \n

    Installation

    \n

    From the terminal, go to your app's root folder and execute:

    \n
    tns plugin add nativescript-webview-interface
    \n

    Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.\ne.g

    \n
    cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
    \n

    Usage

    \n

    For a quick start, you can check this Demo App and Blog Post.\nIf you are using this plugin with Angular 2, you can check this angular version of the demo app.

    \n

    Inside Native App

    \n

    Insert a web-view somewhere in your page.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\">
    ....
    <web-view id=\"webView\"></web-view>
    ....
    </Page>
    \n

    Initialize WebViewInterface Plugin in your javascript file.

    \n
    var webViewInterfaceModule = require('nativescript-webview-interface');
    var oWebViewInterface;

    function pageLoaded(args){
        page = args.object;
        setupWebViewInterface(page) 
    }

    // Initializes plugin with a webView
    function setupWebViewInterface(page){
        var webView = page.getViewById('webView');
        oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
    }
    \n

    Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issue\nof communication from web-view to android not working sometimes on some devices.

    \n

    Use any API Method of WebViewInterface Class

    \n
    function handleEventFromWebView(){
        oWebViewInterface.on('anyEvent', function(eventData){
            // perform action on event
        });
    }

    function emitEventToWebView(){
        oWebViewInterface.emit('anyEvent', eventData);
    }

    function callJSFunction(){
        oWebViewInterface.callJSFunction('functionName', args, function(result){
            
        });
    }
    \n

    If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded

    \n
    webView.on('loadFinished', (args) => {
        if (!args.error) {
            // emit event to webView or call JS function of webView
        }
    });
    \n

    Inside WebView

    \n

    Import nativescript-webview-interface.js in your html page.

    \n
    <html>
        <head></head>
        <body>
            <script src=\"path/to/nativescript-webview-interface.js\"></script>
            <script src=\"path/to/your-custom-script.js\"></script>        
        </body>
    </html>
    \n

    Use any API Method of window.nsWebViewInterface inside webview

    \n
    var oWebViewInterface = window.nsWebViewInterface;

    // register listener for any event from native app
    oWebViewInterface.on('anyEvent', function(eventData){
        
    });

    // emit event to native app
    oWebViewInterface.emit('anyEvent', eventData);

    // function which can be called by native app
    window.functionCalledByNative = function(arg1, arg2){
        // do any processing
        return dataOrPromise;
    }
    \n

    API

    \n

    Native App API

    \n

    Constructor:

    \n

    WebViewInterface(webView: WebView, src?: string)

    \n

    webView is an instance of nativescript web-view.

    \n

    src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.

    \n

    API Methods of WebViewInterface Class:

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emitted from webView.

    \n

    Callback will be executed with the data sent from webView in any format.

    \n

    off(eventOrCmdName: string, callback?: (eventData: any) => void): void

    \n

    Use this method to de-register listener of any event/command emitted from webView.

    \n

    If callback is not set, all the event listeners for this event will be de-registered.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from native app to webView with data in any format.

    \n

    callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

    \n

    Use this method to call to any javascript function in global scope in webView.

    \n

    Arguments are optional. But if supplied, must be in array format.

    \n

    If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
    \nIf the function execution generates any error, the errorHandler will be called with the error.

    \n

    destroy(): void

    \n

    Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.

    \n

    WebView API

    \n

    API Methods available in window.nsWebViewInterface global variable.

    \n

    on(eventOrCmdName: string, callback: (eventData: any) => void): void

    \n

    Use this method to assign listener to any event/command emited from native app.

    \n

    Callback will be executed with the data sent from native app in any format.

    \n

    emit(eventOrCmdName: string, data: any): void

    \n

    Use this method to emit any event/command from webView to native app with data in any format.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mashdog/nativescript-accordion":{"name":"@mashdog/nativescript-accordion","version":"7.0.6","license":"Apache-2.0","readme":"

    NativeScript Accordion

    \n

    Nativescript 7 version

    \n

    Install

    \n

    npm install @mashdog/nativescript-accordion

    \n

    Usage

    \n

    IMPORTANT: Make sure you include xmlns:accordion="@mashdog/nativescript-accordion" on the Page element

    \n

    Data

    \n

    By default the plugin will look for the items property in each item but you can set name by setting\nchildItems="blah" on the Accordion instance

    \n
    this.items = [
          {
            title: \"1\", footer: \"10\", headerText: \"First\", footerText: \"4\",
            blah: [
              { image: \"~/images/a9ff17db85f8136619feb0d5a200c0e4.png\", text: \"Stop\" },
              { text: \"Drop\", image: \"http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg\" }
            ]
          }
        ]
    \n
    selectedIndexes = [0,3]
    \n

    Core

    \n
    <accordion:Accordion items=\"{{items}}\" itemHeaderTap=\"tapped\" itemContentTap=\"childTapped\"  allowMultiple=\"true\" id=\"ac\" selectedIndexes=\"selectedIndexes\">
                <accordion:Accordion.headerTemplate>
                    <GridLayout backgroundColor=\"green\" columns=\"auto,*\">
                        <Label text=\"{{title}}\"/>
                        <Label col=\"1\" text=\"+\"/>
                    </GridLayout>
                </accordion:Accordion.headerTemplate>

                <accordion:Accordion.itemHeaderTemplate>
                    <StackLayout>
                        <Label text=\"{{text}}\"/>
                    </StackLayout>
                </accordion:Accordion.itemHeaderTemplate>
                
                
                <accordion:Accordion.itemContentTemplate>
                                <StackLayout>
                                    <Image src=\"{{image}}\"/>
                                </StackLayout>
                  </accordion:Accordion.itemContentTemplate>

                <accordion:Accordion.footerTemplate>
                    <GridLayout backgroundColor=\"yellow\" columns=\"auto,*\">
                        <Label text=\"{{footer}}\"/>
                        <Label col=\"1\" text=\"-\"/>
                    </GridLayout>
                </accordion:Accordion.footerTemplate>

            </accordion:Accordion>
    \n

    Multi Template

    \n
    <accordion:Accordion childItems=\"children\" id=\"accordion\" selectedIndexesChange=\"onChange\" height=\"100%\"
                                 items=\"{{items}}\" allowMultiple=\"true\" selectedIndexes=\"{{selectedIndexes}}\"
                                 headerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
                                 itemHeaderTemplateSelector=\"$index % 2 !== 0  ? 'odd' : 'even'\"
                                 itemContentTemplateSelector=\"$childIndex % 2 !== 0  ? 'odd' : 'even'\"
                                 footerTemplateSelector=\"$index % 2 !== 0 ? 'odd' : 'even'\"
            >

                <Accordion.headerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"green\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"orange\" text=\"{{headerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.headerTemplates>


                <Accordion.itemHeaderTemplates>
                    <template key=\"odd\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout backgroundColor=\"white\">
                            <Label text=\"{{title}}\"/>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemHeaderTemplates>

                <Accordion.itemContentTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" src=\"{{image}}\"/>
                            <Label text=\"{{text}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.itemContentTemplates>

                <Accordion.footerTemplates>
                    <template key=\"odd\">
                        <StackLayout>
                            <Label backgroundColor=\"yellow\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>

                    <template key=\"even\">
                        <StackLayout>
                            <Label backgroundColor=\"blue\" text=\"{{footerText}}\"/>
                        </StackLayout>
                    </template>
                </Accordion.footerTemplates>

            </accordion:Accordion>
    \n

    Angular

    \n
    import { AccordionModule } from \"@mashdog/nativescript-accordion/angular\";

    @NgModule({
        imports: [
            AccordionModule
        ]
        })
    \n
    <Accordion height=\"100%\" [items]=\"items\" allowMultiple=\"false\" [selectedIndexes]=\"selectedIndexes\">

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title\">
    \t\t\t<GridLayout backgroundColor=\"white\">
    \t\t\t\t<Label height=\"100%\" [text]=\"item.title\"></Label>
    \t\t\t</GridLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image width=\"300\" height=\"300\" decodeWidth=\"400\" decodeHeight=\"400\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Multi Template

    \n
    <Accordion #accordion row=\"2\" height=\"100%\" allowMultiple=\"true\" childItems=\"children\" [items]=\"items\"
    \t\t\t   [headerTemplateSelector]=\"headerTemplateSelector\"
    \t\t\t   [itemHeaderTemplateSelector]=\"itemHeaderTemplateSelector\"
    \t\t\t   [itemContentTemplateSelector]=\"itemContentTemplateSelector\"
    \t\t\t   [footerTemplateSelector]=\"footerTemplateSelector\"
    \t>
    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"green\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"header-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"orange\" [text]=\"item.headerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-odd\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"title-even\">
    \t\t\t<StackLayout backgroundColor=\"white\">
    \t\t\t\t<Label [text]=\"item.title\"></Label>
    \t\t\t\t<Image height=\"100\" width=\"100\" decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\"
    \t\t\t\t\t   [src]=\"item.image\">    </Image>
    \t\t\t</StackLayout>
    \t\t</ng-template>


    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"content-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Image decodeWidth=\"400\" decodeHeight=\"400\" loadMode=\"async\" [src]=\"item.image\"></Image>
    \t\t\t\t<Label [text]=\"item.text\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-odd\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"yellow\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>

    \t\t<ng-template let-i=\"index\" let-item=\"item\" acTemplateKey=\"footer-even\">
    \t\t\t<StackLayout>
    \t\t\t\t<Label backgroundColor=\"blue\" [text]=\"item.footerText\"></Label>
    \t\t\t</StackLayout>
    \t\t</ng-template>
    \t</Accordion>
    \n

    Config

    \n
    public selectedIndexes = [0,3]
    \n
    <Accordion allowMultiple=\"true\" [selectedIndexes]=\"selectedIndexes\">
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@irman/nativescript-screen-orientation":{"name":"@irman/nativescript-screen-orientation","version":"1.1.2","license":"MIT","readme":"

    A plugin to force change the orientation of a page programmatically in NativeScript. Supports both Android and iOS.

    \n
    \n

    Code Sample

    \n
    var orientationModule = require("@irman/nativescript-screen-orientation");\n    \n  function pageLoaded(){\n        orientationModule.setCurrentOrientation("landscape",function(){\n                console.log("landscape orientation set");\n            });\n        }\n       \n   function onNavigatingFrom(){\n        orientationModule.orientationCleanup();\n        }\nexports.pageLoad=pageLoaded;\nexports.onNavigatingFrom=onNavigatingFrom;\n
    \n
    \n

    Motivation

    \n

    To allow force setting of orientation at page - level programmatically.

    \n

    Installation

    \n
    tns plugin add @irman/nativescript-screen-orientation\n
    \n
    \n

    API Reference

    \n

    Allowed orientations are 'portrait', 'landscape' and 'all'.

    \n

    In order to force an orientation, hook the respective setCurrentOrientation methods at the pageLoad event of page, while make sure the method orientationCleanup is called at the navigatingFrom event of the page.

    \n
      \n
    • \n

      setCurrentOrientation(orientation,callback)

      \n

      orientation is a string with possible values 'landscape' , 'portrait' and 'all' . Parameter callback is a function to call once the orientation is set, can be null.

      \n
      • \n
    • \n

      orientationCleanup()

      \n

      should be called on the navigatingFrom event if setCurrentOrientation is called, if this method is not called, can lead to inconsistent behavior.

      \n
      • \n
    \n

    Troubleshooting

    \n

    In iOS , on iPad, if the plugin is not working, it is due to changes in the features supported by iPad. It is required for latest iOS to support multiple apps at the same time by screen sharing, which discourages locking of orientation in a particular mode. In order to make it work on iPad, set the key 'Requires Fullscreen' in xCode under app settings.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rfid-android":{"name":"nativescript-rfid-android","version":"1.0.2","license":"Apache-2.0","readme":"

    Push Plugin for NativeScript

    \n

    The code for the Push Plugin for NativeScript.

    \n\n

    Getting started

    \n
      \n
    • \n

      Create a new NativeScript application

      \n
        tns create MyApp\n
      \n

      or use an existing one.

      \n
      • \n
    • \n

      Add the Push Plugin (from NPM). This will install the push plugin in the node_modules folder, in the root of the project. When adding a new platform (or using an existing one) the plugin will be added there as well. Go to the application folder and add the push plugin:

      \n
        tns plugin add nativescript-push-notifications\n
      \n
      • \n
    \n

    Android

    \n
    \n

    See the Android Configuration for using Firebase Cloud Messaging for information about how to add Firebase to your project.

    \n
    \n
      \n
    • \n

      Go to the application folder and add the Android platform to the application

      \n
        tns platform add android\n
      \n
      • \n
    • \n

      Add sample code in app/main-view-model.js in the function HelloWorldModel() like this one to subscribe and receive messages (enter your Firebase Cloud Messaging Sender ID in the options of the register method):

      \n
      • \n
    \n
    \tvar pushPlugin = require(\"nativescript-push-notifications\");
    \tvar self = this;
    \tpushPlugin.register({ senderID: '<ENTER_YOUR_PROJECT_NUMBER>' }, function (data){
    \t\tself.set(\"message\", \"\" + JSON.stringify(data));
    \t}, function() { });

    \tpushPlugin.onMessageReceived(function callback(data) {
    \t\tself.set(\"message\", \"\" + JSON.stringify(data));
    \t});
    \n
      \n
    • \n

      Attach your phone to the PC, ensure "adb devices" command lists it and run the app on the phone:

      \n
        tns run android\n
      \n
      • \n
    • \n

      The access token is written in the console and in the message area, after subscribing (Look for ObtainTokenThread log record). When sending a notification, the message below the TAP button should be changed with the message received.

      \n
      • \n
    \n

    The plugin will default to version 10.0.1 of the firebase-messaging SDK. If you need to change the version, you can add a project ext property firebaseMessagingVersion like so:

    \n
    ```\n// in the root level of /app/App_Resources/Android/app.gradle:\n\nproject.ext {\n    firebaseMessagingVersion = "+" // OR the version you wish\n}\n```\n
    \n

    iOS

    \n
      \n
    • \n

      Edit the package.json file in the root of application, by changing the bundle identifier to match the one from your Push Certificate. For example:\n"id": "com.telerik.PushNotificationApp"

      \n
      • \n
    • \n

      Go to the application folder and add the iOS platform to the application

      \n
        tns platform add ios\n
      \n
      • \n
    • \n

      Add sample code in app/main-view-model.js in the function HelloWorldModel() like this one to subscribe and receive messages (Enter your google project id in the options of the register method):

      \n
      • \n
    \n
    \tvar pushPlugin = require(\"nativescript-push-notifications\");
            var self = this;
            var iosSettings = {
                badge: true,
                sound: true,
                alert: true,
                interactiveSettings: {
                    actions: [{
                        identifier: 'READ_IDENTIFIER',
                        title: 'Read',
                        activationMode: \"foreground\",
                        destructive: false,
                        authenticationRequired: true
                    }, {
                        identifier: 'CANCEL_IDENTIFIER',
                        title: 'Cancel',
                        activationMode: \"foreground\",
                        destructive: true,
                        authenticationRequired: true
                    }],
                    categories: [{
                        identifier: 'READ_CATEGORY',
                        actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                        actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                    }]
                },
                notificationCallbackIOS: function (data) {
                    self.set(\"message\", \"\" + JSON.stringify(data));
                }
            };

            pushPlugin.register(iosSettings, function (data) {
                self.set(\"message\", \"\" + JSON.stringify(data));

                // Register the interactive settings
                    if(iosSettings.interactiveSettings) {
                        pushPlugin.registerUserNotificationSettings(function() {
                            alert('Successfully registered for interactive push.');
                        }, function(err) {
                            alert('Error registering for interactive push: ' + JSON.stringify(err));
                        });
                    }
            }, function() { });
    \n
      \n
    • \n

      Run the code

      \n

      tns run ios

      \n
      • \n
    • \n

      Send notifications

      \n
      • \n
    \n

    API

    \n
    \t// Get reference to the push plugin module.
    \tvar pushPlugin = require('nativescript-push-notifications');
    \n
      \n
    • register - use to subscribe device for push notifications
      • \n
    \n
    \n

    register(settings, successCallback, errorCallback)

    \n
    \n

    \tvar settings = {
    \t\t// Android settings
    \t\tsenderID: '<ENTER_YOUR_PROJECT_NUMBER>', // Android: Required setting with the sender/project number
    \t\tnotificationCallbackAndroid: function(message, pushNotificationObject) { // Android: Callback to invoke when a new push is received.
            \talert(JSON.stringify(message));
            },

    \t\t// iOS settings
            badge: true, // Enable setting badge through Push Notification
            sound: true, // Enable playing a sound
            alert: true, // Enable creating a alert

            // Callback to invoke, when a push is received on iOS
            notificationCallbackIOS: function(message) {
            \talert(JSON.stringify(message));
            }
    \t};


    \tpushPlugin.register(settings,
    \t\t// Success callback
    \t\tfunction(token) {
                            // if we're on android device we have the onMessageReceived function to subscribe
    \t\t\t// for push notifications
    \t\t\tif(pushPlugin.onMessageReceived) {
    \t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
    \t\t\t}

    \t\t\talert('Device registered successfully');
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t}
    \t);
    \n
      \n
    • unregister - use to unsubscribe from Push Notifications
      • \n
    \n
    \n

    unregister(successCallback, errorCallback, settings)

    \n
    \n

    \tpushPlugin.unregister(
    \t\t// Success callback
    \t\tfunction(){
    \t\t\talert('Device unregistered successfully');
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t},

    \t\t// The settings from the registration phase
    \t\tsettings
    \t);
    \n
      \n
    • Register for interactive push notifications (iOS >= 8.0) - in order to handle interacitve notifications, you have to pass additional settings while registering your device. The message object in the notificationCallbackIOS will contain a property with the value of the identifier.
      • \n
    \n
    \n

    register(settings, successCallback, errorCallback)

    \n
    \n

    \tvar settings = {
    \t\tbadge: true,
    \t\tsound: true,
            alert: true,
            interactiveSettings: {
            \tactions: [{
                \tidentifier: 'READ_IDENTIFIER',
                    title: 'Read',
                    activationMode: \"foreground\",
                    destructive: false,
                    authenticationRequired: true
                }, {
                identifier: 'CANCEL_IDENTIFIER',
                \ttitle: 'Cancel',
                    activationMode: \"foreground\",
                    destructive: true,
                    authenticationRequired: true
                }],
                categories: [{
                \tidentifier: 'READ_CATEGORY',
                    actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                    actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER']
                }]
            },
            notificationCallbackIOS: function(message) {
            \talert(JSON.stringify(message));
            }
    \t};


    \tpushPlugin.register(settings,
    \t\t// Success callback
    \t\tfunction(token){
    \t\t\t// if we're on android device we have the onMessageReceived function to subscribe
    \t\t\t// for push notifications
    \t\t\tif(pushPlugin.onMessageReceived) {
    \t\t\t\tpushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
    \t\t\t}

    \t\t        // Register the interactive settings
    \t\t\tif(settings.interactiveSettings) {
    \t\t\t\tpushPlugin.registerUserNotificationSettings(function() {
    \t\t\t\t\talert('Successfully registered for interactive push.');
    \t\t\t\t}, function(err) {
    \t\t\t\t\talert('Error registering for interactive push: ' + JSON.stringify(err));
    \t\t\t\t});
    \t\t\t}
    \t\t},
    \t\t// Error Callback
    \t\tfunction(error){
    \t\t\talert(error.message);
    \t\t}
    \t);
    \n
      \n
    • areNotificationsEnabled - check if the notifications for the device are enabled. Returns true/false. Applicable only for iOS, for Android always returns true.
      • \n
    \n
    \n

    areNotificationsEnabled(callback)

    \n
    \n

    \tpushPlugin.areNotificationsEnabled(function(areEnabled) {
    \t\talert('Are Notifications enabled: ' + areEnabled);
        });
    \n
      \n
    • onTokenRefresh - Android only, subscribe for the token refresh event (Used to obtain the new token in cases where google revoke the old one)
      • \n
    \n
    \n

    onTokenRefresh(callback)

    \n
    \n

    \tpushPlugin.onTokenRefresh(function(token){
    \t\t\talert(token);
    \t\t});
    \n

    Troubleshooting

    \n

    In case the application doesn't work as expected. Here are some things you can verify

    \n

    Android

    \n
      \n
    • Ensure that the AndroindManifest.xml located at platforms\\android contains the following snippets for registering the GCM listener:
      • \n
    \n
    \t<activity android:name=\"com.telerik.pushplugin.PushHandlerActivity\"/>
    \t<receiver
    \t\tandroid:name=\"com.google.android.gms.gcm.GcmReceiver\"
    \t    android:exported=\"true\"
    \t    android:permission=\"com.google.android.c2dm.permission.SEND\" >
    \t    <intent-filter>
    \t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
    \t        <category android:name=\"com.pushApp.gcm\" />
    \t    </intent-filter>
    \t</receiver>
    \t<service
    \t\tandroid:name=\"com.telerik.pushplugin.PushPlugin\"
    \t    android:exported=\"false\" >
    \t    <intent-filter>
    \t    \t<action android:name=\"com.google.android.c2dm.intent.RECEIVE\" />
    \t    </intent-filter>
    \t</service>
    \n
      \n
    • Ensure that the AndroindManifest.xml located at platforms\\android contains the following permissions for push notifications:
      • \n
    \n
    \t<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />
    \t<uses-permission android:name=\"android.permission.WAKE_LOCK\" />
    \t<uses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" />
    \n

    iOS

    \n
      \n
    • Error "Error registering: no valid 'aps-environment' entitlement string found for application" - this means that the certificates are not correctly set in the xcodeproject. Open the xcodeproject, fix them and you can even run the application from xcode to verify it's setup correctly. The bundle identifier in xcode should be the same as the "id" in the package.json file in the root of the project.
      • \n
    \n

    Using with Telerik Backend Services

    \n

    In order to use the plugin with Telerik Backend Services take a look at the official sample:

    \n

    Telerik Backend Services NativeScript Push Sample

    \n

    Android Configuration for using Firebase Cloud Messaging

    \n

    From version 0.1.0 the nativescript-push-notifications module for Android relies on the Firebase Cloud Messaging (FCM) SDK. In the steps below you will be guided to complete a few additional steps to prepare your Android app to receive push notifications from FCM.

    \n
      \n
    1. Add the FCM SDK
      2. \n
    \n
    \n

    Since version 0.1.1 thе google-services plugin is added via a hook. You can skip this step for versions 0.1.1 and above.

    \n
    \n
    - Navigate to the project `platforms/android/` folder and locate the application-level `build.gradle` file\n- Add the `google-services` plugin to the list of other dependencies in your app's `build.gradle` file\n\n\n```Groovy\ndependencies {\n\t// ...\n\tclasspath "com.google.gms:google-services:3.0.0"\n\t// ...\n}\n```\n\n- Add the following line be at the bottom of your `build.gradle` file to enable the Gradle plugin\n\n```Groovy\napply plugin: 'com.google.gms.google-services'\n```\n
    \n
      \n
    1. \n

      Add the google-services.json file

      \n

      To use FCM, you need this file. It contains configurations and credentials for your Firebase project. To obtain this follow the instructions for adding Firebase to your project from the official documentation. Scroll down to the Manually add Firebase section.

      \n

      Place the file in your app's App_Resources/Android folder

      \n
      2. \n
    2. \n

      Obtain the FCM Server Key

      \n

      This key is required to be able to send programmatically push notifications to your app. You can obtain this key from your Firebase project.

      \n

      If you are using the Telerik Platform Notifications service refer to this article for instructions how to set up this key.

      \n
      3. \n
    \n

    Receive and Handle Messages from FCM on Android

    \n

    The plugin allows for handling data, notification, and messages that contain both payload keys which for the purposes of this article are reffered to as mixed. More specifics on these messages are explained here.

    \n

    The plugin extends the FirebaseMessagingService and overrides its onMessageReceived callback. In your app you need to use the onMessageReceived(message, data, notification) method of the NativeScript module.

    \n

    The behavior of the onMessageReceived callback in the module follows the behavior of the FCM service.

    \n

    Handling Data Messages

    \n

    The onMessageReceived method of the plugin is called each time a data notification is received.

    \n

    When in background mode, a notification is constructed according to the values of the key specified above and placed in the tray. Tapping the notification launches the app and invokes the onMessageReceived callback.

    \n

    Handling Notification Messages

    \n

    If the app is in foreground, it invokes the onMessageReceived callback with three arguments (message, data, notification).

    \n

    If the app is in background, a notification is put in the tray. When tapped, it launches the app, but does not invoke the onMessageReceived callback.

    \n

    Handling Mixed Messages

    \n

    Mixed messages are messages that contain in their load both data and notification keys. When such message is received:

    \n
      \n
    • The app is in foreground, the onMessageReceived callback is invoked with parameters (message, data)
      • \n
    • The app is in background, the onMessageReceived callback is not invoked. A notification is placed in the system tray. If the notification in the tray is tapped, the data part of the mixed message is available in the extras of the intent of the activity and are available in the respective application event of NativeScript.
      • \n
    \n

    Example of handling the data part in the application resume event (e.g. the app was brought to the foreground from the notification):

    \n
    application.on(application.resumeEvent, function(args) {
        if (args.android) {
            var act = args.android;
            var intent = act.getIntent();
            var extras = intent.getExtras();
            if (extras) {
                // for (var key in extras) {
                //     console.log(key + ' -> ' + extras[key]);
                // }
                var msg = extras.get('someKey');
            }
        }
    });
    \n

    Parameters of the onMessageReceived Callback

    \n

    Depending on the notification event and payload, the onMessageReceived callback is invoked with up to three arguments.

    \n
      \n
    • message - String. A string representation of the data.message value in the notification payload.
      • \n
    • data - Object. A JSON representation of the data value in the notification payload.
      • \n
    • notification - RemoteMessage.Notification. A representation of the RemoteMessage.Notification class which can be accessed according to its public methods. This parameter is available in case the callback was called from a message with a notification key in the payload.
      • \n
    \n

    Setting Notification Icon and Color

    \n
    \n

    From version 0.1.0 the module no longer adds as default a large icon of the notification because this was forcing developers to always use a large icon which is not the native behavior.

    \n
    \n

    The plugin automatically handles some keys in the data object like message, title, color, smallIcon, largeIcon and uses them to construct a notification entry in the tray. More information on these keys is available in the documentation of the Telerik Platform Notifications service documentation article.

    \n

    Custom default color and icon for notification messages can be set in the AndroidManifest.xml inside the application directive:

    \n
    \t<meta-data
    \t\tandroid:name=\"com.google.firebase.messaging.default_notification_icon\"
    \t\tandroid:resource=\"@drawable/ic_stat_ic_notification\" />
    \t<meta-data
    \t\tandroid:name=\"com.google.firebase.messaging.default_notification_color\"
    \t\tandroid:resource=\"@color/colorAccent\" />
    \n
    \n

    For more info visit the Edit the app manifest article.

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-mixpanel":{"name":"@enduco/nativescript-mixpanel","version":"1.0.4","license":"Apache-2.0","readme":"

    @enduco/nativescript-mixpanel

    \n
    \n

    A NativeScript plugin to provide the ability to integrate with Mixpanel.

    \n
    \n

    Installation

    \n

    From your command prompt/terminal go to your application's root folder and execute:

    \n

    ns plugin add @enduco/nativescript-mixpanel

    \n

    Usage

    \n

    Example

    \n

    This can be initialised at various points in your application, i.e. in a service. However it is recommended to initialise this in your main.ts file.

    \n

    Initialisation

    \n
    import {
      NativescriptMixpanel,
      NativescriptMixpanelPeople,
    } from \"@enduco/nativescript-mixpanel\";

    const MIXPANEL_TOKEN = \"ABCDEF12345678\";

    // Init Mixpanel itself
    NativescriptMixpanel.init(MIXPANEL_TOKEN);
    \n

    Identification

    \n

    The Mixpanel library will assign a default unique identifier to each unique user who installs your application. This distinct ID is saved to device storage so that it will persist across sessions.

    \n

    If you choose, you can assign your own user IDs. This is particularly useful if a user is using your app on multiple devices or platforms (both web and mobile, for example). To assign your own distinct_ids, you can use the identify method.

    \n
    import { NativescriptMixpanel } from \"@enduco/nativescript-mixpanel\";

    const someId = \"test identity\";
    NativescriptMixpanel.identify(someId);
    // It is recommended to identify both the base and people instances.
    NativescriptMixpanel.getPeople().identify(someId);
    \n

    Custom Logging / Logger Binding

    \n

    If you need to pipe/funnel log output (i.e. for errors) to your own applications logger\nimplementation, you can provide a binding to your logger through a simple object.

    \n

    If you use this it is recommended to call useLogger before you init.

    \n
    const customLogger: NativescriptMixpanelLogger = {
      log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
      info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
      warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
      error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
    };
    NativescriptMixpanel.useLogger(customLogger);
    \n

    API

    \n

    NativescriptMixpanel

    \n

    init(token: string): void

    \n

    Get the instance of MixpanelAPI associated with your Mixpanel project token.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    tokenstring
    \n
    NativescriptMixpanel.init(\"token\");
    \n

    useLogger(providedLogger: NativescriptMixpanelLogger): void

    \n

    Replace the default console logger with a custom logger binding.

    \n

    If you intend to use a custom logger or bound logger, this should\nbe called before init to correctly output any errors.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    providedLoggerNativescriptMixpanelLoggerA new logger or object that binds a logger
    \n
    const customLogger: NativescriptMixpanelLogger = {
      log: (tag: string, msg: string) => someOtherLogger.log(tag, msg),
      info: (tag: string, msg: string) => someOtherLogger.info(tag, msg),
      warn: (tag: string, msg: string) => someOtherLogger.warn(tag, msg),
      error: (tag: string, msg: string) => someOtherLogger.error(tag, msg),
    };
    NativescriptMixpanel.useLogger(customLogger);
    \n

    identify(distinctId: string): void

    \n

    Associate all future calls to track(string, JSON) with the user identified by the\ngiven distinct id.

    \n

    This call does not identify the user for People Analytics; to do that,\nsee MixpanelAPI.People.identify(String).\nMixpanel recommends using the same distinct_id for both calls, and using a\ndistinct_id that is easy to associate with the given user, for example, a\nserver-side account identifier.

    \n

    Calls to track(string, JSON) made before corresponding calls to identify\nwill use an anonymous locally generated distinct id, which means it is best to\ncall identify early to ensure that your Mixpanel funnels and retention analytics\ncan continue to track the user throughout their lifetime. We recommend calling\nidentify when the user authenticates.

    \n

    Once identify is called, the local distinct id persists across restarts of your application.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    distinctIdstringA string uniquely identifying this user. Events sent to Mixpanel using the same distinct_id will be considered associated with the same visitor/customer for retention and funnel reporting, so be sure that the given value is globally unique for each individual user you intend to track.
    \n
    NativescriptMixpanel.identify(\"test identity\");
    \n

    getDistinctId(): string

    \n

    Returns the string id currently being used to uniquely identify the user\nassociated with events sent using track. Before any calls to identify,\nthis will be an id automatically generated by the library.

    \n
    const distinctId = NativescriptMixpanel.getDistinctId();
    \n

    alias(alias: string): void

    \n

    This function will create an alias to the current events distinct_id,\nwhich may be the distinct_id randomly generated by the Mixpanel\nlibrary before identify(string) is called.

    \n

    This call does not identify the user after. You must still call both\nidentify and NativescriptMixpanel.getPeople().identify if you wish the\nnew alias to be used for Events and People.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    aliasstringThe new distinct_id
    \n
    NativescriptMixpanel.alias(\"test alias\");
    \n

    registerSuperProperties(properties: JSON): void

    \n

    Register properties that will be sent with every subsequent call\nto track.

    \n

    SuperProperties are a collection of properties that will be sent with every\nevent to Mixpanel, and persist beyond the lifetime of your application.

    \n

    Setting a superProperty with registerSuperProperties will store a new\nsuperProperty, possibly overwriting any existing superProperty with the\nsame name.

    \n

    SuperProperties will persist even if your application is taken completely\nout of memory. To remove a superProperty, call unregisterSuperProperty\nor clearSuperProperties.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    propertiesJSONA JSON object containing super properties to register
    \n
    NativescriptMixpanel.registerSuperProperties({
      \"Test Type\": \"test value\",
    });
    \n

    unregisterSuperProperty(superPropertyName: string): void

    \n

    Remove a single superProperty, so that it will not be sent with future calls\nto track(String, JSONObject).

    \n

    If there is a superProperty registered with the given name, it will be permanently\nremoved from the existing superProperties.

    \n

    To clear all superProperties, use clearSuperProperties.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    superPropertyNamestringname of the property to unregister
    \n
    NativescriptMixpanel.unregisterSuperProperty(\"Test Type\");
    \n

    clearSuperProperties(): void

    \n

    Erase all currently registered superProperties.

    \n

    Future tracking calls to Mixpanel will not contain the specific superProperties\nregistered before the clearSuperProperties method was called.

    \n

    To remove a single superProperty, use unregisterSuperProperty.

    \n
    NativescriptMixpanel.clearSuperProperties();
    \n

    track(eventName: string, properties?: JSON): void

    \n

    Track an event.

    \n

    Every call to track eventually results in a data point sent to Mixpanel.\nThese data points are what are measured, counted, and broken down to create\nyour Mixpanel reports. Events have a string name, and an optional set of\nname/value pairs that describe the properties of that event.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventNamestringThe name of the event to send
    propertiesJSONA JSON object containing the key value pairs of the properties to include in this event
    \n
    NativescriptMixpanel.track(\"test event\", {
      tracking: \"this\",
    });
    \n

    timeEvent(eventName: string): void

    \n

    Begin timing of an event. Calling timeEvent("Thing") will not send an event,\nbut when you eventually call track("Thing"), your tracked event will be sent\nwith a "$duration" property, representing the number of seconds between your calls.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    eventNamestringthe name of the event to track with timing
    \n
    const eventName = \"Time Event Test\";
    NativescriptMixpanel.timeEvent(eventName);

    await new Promise((resolve) => setTimeout(resolve, 2000));
    NativescriptMixpanel.track(eventName);
    \n

    getPeople(): NativescriptMixpanelPeople

    \n

    Returns a NativescriptMixpanelPeople instance that can be used to identify\nand set properties.

    \n
    const people = NativescriptMixpanel.getPeople();
    \n

    optInTracking(): void

    \n

    Use this method to opt-in an already opted-out user from tracking.

    \n

    People updates and track calls will be sent to Mixpanel after using\nthis method. This method will internally track an opt-in event to\nyour project.

    \n
    const people = NativescriptMixpanel.optInTracking();
    \n

    optOutTracking(): void

    \n

    Use this method to opt-out a user from tracking.

    \n

    Events and people updates that haven't been flushed yet will be deleted.\nUse flush() before calling this method if you want to send all the queues\nto Mixpanel before.

    \n

    This method will also remove any user-related information from the device.

    \n
    const people = NativescriptMixpanel.optOutTracking();
    \n

    flush(): void

    \n

    Push all queued Mixpanel events and People Analytics changes to Mixpanel servers.

    \n

    Events and People messages are pushed gradually throughout the lifetime of your\napplication. This means that to ensure that all messages are sent to Mixpanel when\nyour application is shut down, you will need to call flush() to let the Mixpanel\nlibrary know it should send all remaining messages to the server.

    \n

    We strongly recommend placing a call to flush() in the onDestroy() method of your\nmain application activity.

    \n
    NativescriptMixpanel.flush();
    \n

    reset(): void

    \n

    Clears tweaks and all distinct_ids, superProperties, and push\nregistrations from persistent storage. Will not clear referrer information.

    \n
    NativescriptMixpanel.reset();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vuex-persistent":{"name":"nativescript-vuex-persistent","version":"1.2.0","license":"MIT","readme":"

    \"GitHub

    \n

    Install

    \n
    npm install --save nativescript-vuex-persistent
    \n

    Use

    \n
    import NSVuexPersistent from 'nativescript-vuex-persistent';

    const store = new Vuex.Store({
      state: {
        // Your state.
      },
      mutations,
      actions,
      getters,
      strict: debug,
      plugins: [NSVuexPersistent([
        // Here you will define the states that you want to be persistent.
      ])]
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-live-engage":{"name":"nativescript-live-engage","version":"6.1.1","license":"MIT","readme":"

    NativeScript plugin for LivePerson LiveEngage

    \n

    \"npm

    \n

    This is a plugin to show the conversation from a LiveEngage chat, using the LP-Messaging SDK (Android v3.6.0, iOS v3.6.0).

    \n

    Requirements

    \n\n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    npm install nativescript-live-engage
    \n

    Setup

    \n

    At the launch of your app call initializeChat with your credentials (our example main.ts):

    \n
    LiveEngage.getInstance().initializeChat('12345678', 'com.example.myapp');
    \n

    Android

    \n
      \n
    1. \n

      Set the minSdkVersion to at least 19, in your AndroidManifest.xml and app.gradle.

      \n
      2. \n
    2. \n

      Include the following dependencies in the include.gradle file of your app:

      \n
        compile \"com.android.support:appcompat-v7:24.2.1\"
        compile \"com.android.support:design:24.2.1\"
        compile \"com.android.support:percent:24.2.1\"
        compile 'com.google.android.gms:play-services-maps:9.8.0'
        compile 'com.android.support.constraint:constraint-layout:1.0.2'

        compile 'com.squareup.picasso:picasso:2.5.2'
        compile 'com.neovisionaries:nv-websocket-client:1.31'
        compile 'com.squareup.okhttp3:okhttp:3.6.0'
      \n
      3. \n
    \n

    iOS

    \n

    You need to enable keychain sharing, to do this we need a custom entitlements file with a keychain-access-groups key.

    \n

    Add nativescript-custom-entitlements to your devDependencies and create a new entitlements file like our example app.entitlements.

    \n

    Chatting

    \n

    To open the chat window call showChat:

    \n
    LiveEngage.getInstance().showChat();
    \n

    Optional functions

    \n

    Setting customer information

    \n

    Add the first name, last name, nick name, avatar url or phone number of a user.

    \n
    const chatProfile: ChatProfile = {
              firstName: 'Jane',
              lastName: 'Doe',
              nickName: 'JD',
              phone: '0132100000',
              avatarUrl: ''
          };
    LiveEngage.getInstance().setUserProfileValues(chatProfile);
    \n

    oAuth

    \n

    Add a JWT for oAuth support when starting a conversation. Make sure you configure the Live Person data source to support the oAuth 2 authentication in terms of Live person public keys, Signing identities and possible (custom) claims definitions. Make sure to call this method before you start the conversation.

    \n
    LiveEngage.getInstance().setAuthenticationCode('<JWT encoded token string>');
    \n

    Hiding chat

    \n

    When you want to hide the chat window programmatically call closeChat().

    \n
    LiveEngage.getInstance().closeChat();
    \n

    Logging Out

    \n

    When you want to remove all user data and unregister for push notifications call killChat().

    \n
    LiveEngage.getInstance().killChat()
                .then(() => {
                    console.log('killChat success');
                }).catch((error: any) => {
                    console.log('killChat error', error);
            });
    \n

    Push Notifications

    \n

    To recieve push notifications when the agent sends a new message you need to send the push token to LivePerson.\nWhen you have a push token (FCM for Android and APNS for iOS) you can send it to LivePerson using registerPushToken

    \n
    LiveEngage.getInstance().registerPushToken('your-token');
    \n

    Parsing message on Android

    \n

    To parse the push notification message on android in onMessageReceived() in your FirebaseMessagingService, use parsePushMessage().\nThis will return a PushMessageParser object which has the method getMessage() to return the title of the push message.

    \n
    try {
        const message = LiveEngage.getInstance().parsePushMessage(data);
        console.log(message.getMessage());
    } catch (e) {
        console.error(\"Failed to parse message:\", e);
    }
    \n

    Getting unread message count

    \n

    To get the total amount of unread messages, use getUnreadMessagesCount().\nThis will only work when push notifications are enabled.

    \n
    LiveEngage.getInstance().getUnreadMessagesCount((count: number) => {
        console.log('Unread messages:', count);
    }, (error: any) => {
        console.log('Failed to get count: ', error);
    });
    \n

    Close window callback on iOS

    \n

    To get notified when the conversation was dismissed, you can provide a callback when opening the chat on iOS:

    \n
    LiveEngage.getInstance().showChat(() => {
        console.log('Chat window was closed');
    });
    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n

    Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.

    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away all generated folders to reinstall them fresh.\nRun npm run clean to wipe those clean then you can can run plugin.prepare to install fresh dependencies.

    \n

    Sometimes you just need to wipe out the demo's platforms, node_modules and hooks directory only.\nRun npm run demo.reset to delete those.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-to-nativescript":{"name":"preact-to-nativescript","version":"0.0.9","license":"MIT","readme":"

    preact-to-nativescript\"Build \"Coverage \"dependencies\" \"npm\"

    \n

    This Library is experimental!

    \n

    Documentation

    \n

    Usage

    \n

    The following is assumed to be executed at the project root of a NativeScript project

    \n
      \n
    1. Install the library
      2. \n
    \n
    npm i preact-to-nativescript
    \n
      \n
    1. Adjust your NativeScript app.js
      2. \n
    \n
    var application = require(\"application\")
    var preactToNativeScript = require(\"preact-to-nativescript\")
    var render = preactToNativeScript.render
    var h = preactToNativeScript.Preact.h

    application.start({
      create: () => {
        return render(h(\"page\", {}, [h(\"actionBar\", {title: \"Custom Title\"}), h(\"stackLayout\", {}, [h(\"label\", {text: \"preact-to-nativescript page\"}, [])])]))
      }
    })
    \n
      \n
    1. Run your NativeScript app
      2. \n
    \n

    Demo Application

    \n

    \"Demo\"

    \n

    TBD

    \n
      \n
    • dont ship own preact version
      • \n
    • Handle unmounting properly when navigating via Nativescripts API (custom routing in pure js works fine though!)
      • \n
    • ActionBar Known Limitations\n
        \n
      • SystemIcon is not respected
        • \n
      • NavigationButton doesn't properly render
        • \n
      \n
      • \n
    • Document and enable usage / registration of plugin components
      • \n
    • probably more that isn't in scope yet
      • \n
    \n

    Credits

    \n
      \n
    • developit by providing this untested document implementation that turned into the core of this library. He also authored undom from which some document mock code was borrowed. And he also authored preact without which this wouldn't even be possible.
      • \n
    • staydecent for providing a code example that showed that preact-to-nativescript is not impossible wizardry but achievable by writing the right wrapper
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-ext-fork":{"name":"nativescript-webview-ext-fork","version":"7.0.3","license":"Apache-2.0","readme":"

    @nota/nativescript-webview-ext

    \n

    Extended WebView for NativeScript which adds "x-local"-custom-scheme for loading local-files, handle events between WebView and NativeScript, JavaScript execution, injecting CSS and JS-files.\nSupports Android 19+ and iOS9+.

    \n

    Features

    \n
      \n
    • Adds a custom-scheme handler for x-local:// to the webview for loading of resources inside the webview.\n
        \n
      • Note: This is not supported on iOS <11
        • \n
      \n
      • \n
    • Adds support for capturing URLs.\n
        \n
      • This allows the app to open external links in an external browser and handle tel-links
        • \n
      \n
      • \n
    • Added functions like:\n
        \n
      • executeJavaScript(code: string) for executing JavaScript-code and getting result.
        • \n
      • executePromise(code: string) for calling promises and getting the result.
        • \n
      • getTitle() returns document.title.
        • \n
      \n
      • \n
    • Two-Way event listeners between NativeScript and WebView\n
        \n
      • From NativeScript to WebView
        • \n
      • From WebView to NativeScript
        • \n
      \n
      • \n
    • Adds functions to inject css- and javascript-files.\n
        \n
      • Into the current page.
        • \n
      • Auto-injected on page load.
        • \n
      \n
      • \n
    • Polyfills:\n
        \n
      • Promise
        • \n
      • Fetch API (overrides Native API on Android to support x-local:// and file://)
        • \n
      \n
      • \n
    • Allows alert, confirm and prompt with WkWebView.
      • \n
    • Supports:\n
        \n
      • Android 19+
        • \n
      • iOS 11+: Full support
        • \n
      • iOS <11: Partial support
        • \n
      \n
      • \n
    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add @nota/nativescript-webview-ext
    \n

    Update minSdkVersion to 19 or higher

    \n

    Android SDK 19 is required, update App_Resources/Android/app.gradle:

    \n
    android {
      defaultConfig {
        minSdkVersion 19 // change this line
        generatedDensities = []
      }
      aaptOptions {
        additionalParameters \"--no-version-vectors\"
      }
    }
    \n

    Core support

    \n

    Load in template like this:

    \n
    <Page class=\"page\" xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:nota=\"@nota/nativescript-webview-ext\">
        <ActionBar class=\"action-bar\">
            <Label class=\"action-bar-title\" text=\"Home\"></Label>
        </ActionBar>

        <nota:WebViewExt src=\"https://nota.dk\"></<nota:WebViewExt>
    </Page>
    \n

    Angular support

    \n

    Import WebViewExtModule from @nota/nativescript-webview-ext/angular and add it to your NgModule.

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Vue support

    \n

    Import @nota/nativescript-webview-ext/vue in your app entry file (likely app.js or main.js).

    \n

    This registers the element WebViewExt. Replace the <WebView> tag with <WebViewExt>

    \n

    Usage

    \n

    Limitations

    \n

    The custom-scheme handler for x-local:// is only supported by Android and iOS 11+

    \n

    Custom-scheme support for iOS <11 was removed because of ITMS-90809.

    \n

    API

    \n

    NativeScript View

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyValueDescription
    readonly supportXLocalSchemetrue / falseIs x-local:// supported? True on iOS >= 11 or Android, False on iOS < 11.
    srcLoad src
    autoInjectJSBridgetrue / falseShould the window.nsWebViewBridge be injected on loadFinishedEvent? Defaults to true
    builtInZoomControlstrue / falseAndroid: Is the built-in zoom mechanisms being used
    cacheModedefault / no_cache / cache_first / cache_onlyAndroid: Set caching mode.
    databaseStoragetrue / falseAndroid: Enable/Disabled database storage API. Note: It affects all webviews in the process.
    debugModetrue / falseAndroid: Enable chrome debugger for webview on Android. Note: Applies to all webviews in App
    displayZoomControlstrue / falseAndroid: displays on-screen zoom controls when using the built-in zoom mechanisms
    domStoragetrue / falseAndroid: Enable/Disabled DOM Storage API. E.g localStorage
    scrollBouncetrue / falseiOS: Should the scrollView bounce? Defaults to true.
    supportZoomtrue / falseAndroid: should the webview support zoom
    viewPortSizefalse / view-port string / ViewPortPropertiesSet the viewport metadata on load finished. Note: WkWebView sets initial-scale=1.0 by default.
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    loadUrl(src: string): PromiseOpen a URL and resolves a promise once it has finished loading.
    registerLocalResource(resourceName: string, path: string): void;Map the "x-local://{resourceName}" => "{path}".
    unregisterLocalResource(resourceName: string): void;Removes the mapping from "x-local://{resourceName}" => "{path}"
    getRegisteredLocalResource(resourceName: string): void;Get the mapping from "x-local://{resourceName}" => "{path}"
    loadJavaScriptFile(scriptName: string, filepath: string)Inject a javascript-file into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)Loads a CSS-file into document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])Inject multiple javascript-files into the webview. Should be called after the loadFinishedEvent
    loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])Loads multiple CSS-files into the document.head. If before is true, it will be added to the top of document.head otherwise as the last element
    autoLoadJavaScriptFile(resourceName: string, filepath: string)Register a JavaScript-file to be injected on loadFinishedEvent. If a page is already loaded, the script will be injected into the current page.
    autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)Register a CSS-file to be injected on loadFinishedEvent. If a page is already loaded, the CSS-file will be injected into the current page.
    autoExecuteJavaScript(scriptCode: string, name: string)Execute a script on loadFinishedEvent. The script can be a promise
    executeJavaScript(scriptCode: string)Execute JavaScript in the webpage. Note: scriptCode should be ES5 compatible, or it might not work on 'iOS < 11'
    executePromise(scriptCode: string, timeout: number = 500)Run a promise inside the webview. Note: Executing scriptCode must return a promise.
    emitToWebView(eventName: string, data: any)Emit an event to the webview. Note: data must be stringify'able with JSON.stringify or this throws an exception.
    getTitle()Returns a promise with the current document title.
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventDescription
    loadFinishedRaised when a loadFinished event occurs. args is a LoadFinishedEventData
    loadProgressAndroid only: Raised during page load to indicate the progress. args is a LoadProgressEventData
    loadStartedRaised when a loadStarted event occurs. args is a LoadStartedEventData
    shouldOverrideUrlLoadingRaised before the webview requests an URL. Can cancelled by setting args.cancel = true in the ShouldOverrideUrlLoadEventData
    titleChangedDocument title changed
    webAlertRaised when window.alert is triggered inside the webview, needed to use custom dialogs for web alerts. args in a WebAlertEventData. args.callback() must be called to indicate alert is closed.
    webConfirmRaised when window.confirm is triggered inside the webview, needed to use custom dialogs for web confirm boxes. args in a webConfirmEvent. args.callback(boolean) must be called to indicate confirm box is closed.
    webConsoleAndroid only: Raised when a line is added to the web console. args is a WebConsoleEventData.
    webPromptRaised when window.prompt is triggered inside the webview, needed to use custom dialogs for web prompt boxes. args in a webConfirmEvent. `args.callback(string
    Events emitted from the webviewRaised when nsWebViewBridge.emit(...) is called inside the webview. args in an WebViewEventData
    \n

    WebView

    \n

    Inside the WebView we have the nsWebViewBridge for sending events between the NativeScript-layer and the WebView.\nNote: The bridge will only be available DOMContentLoaded or onload inside the WebView.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescription
    window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)Registers handlers for events from the native layer.
    window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)Unregister handlers for events from the native layer.
    window.nsWebViewBridge.emit(eventName: string, data: any)Emits event to NativeScript layer. Will be emitted on the WebViewExt as any other event, data will be a part of the WebViewEventData-object
    \n

    Waiting for nsWebViewBridge to be available

    \n
        window.addEventListener(\"ns-bridge-ready\", function(e) {
            var nsWebViewBridge = e.detail || window.nsWebViewBridge;
            
            // do stuff here
        });
    \n

    Possible features to come:

    \n
      \n
    • Cookie helpers?
      • \n
    • Share cache with native-layer?
      • \n
    \n

    Android

    \n
      \n
    • Settings\n
        \n
      • AppCache?
        • \n
      • User agent?
        • \n
      \n
      • \n
    \n

    iOS

    \n
      \n
    • Settings?
      • \n
    \n

    Demo and unit tests

    \n

    Running the demo

    \n

    To run the demo-project, the plugin must be build locally and a http-server must be running.

    \n

    The easiest way to run the demo is to follow these steps:

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-ext.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run demo.ios
        • \n
      • npm run demo.android
        • \n
      \n
      • \n
    \n

    Running the unit-tests

    \n
      \n
    • Clone the git repository from https://github.com/Notalib/nativescript-webview-ext.git
      • \n
    • Go into the src-folder
      • \n
    • Use the npm-scripts:\n
        \n
      • npm run test.ios
        • \n
      • npm run test.android
        • \n
      \n
      • \n
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n

    About Nota

    \n

    Nota is the Danish Library and Expertise Center for people with print disabilities.\nTo become a member of Nota you must be able to document that you cannot read ordinary printed text. Members of Nota are visually impaired, dyslexic or otherwise impaired.\nOur purpose is to ensure equal access to knowledge, community participation and experiences for people who're unable to read ordinary printed text.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-tagmanager":{"name":"nativescript-google-tagmanager","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript Google Tag Manager

    \n

    Add Plugin

    \n
    tns plugin add nativescript-google-tagmanager
    \n

    Prequisities

    \n

    Download your container from Google Tag Manager page as binary.

    \n

    IOS

    \n

    In your app, copy the binary file into the folder:

    \n

    /App_Resources/IOS

    \n

    Android

    \n

    In your app, copy the binary file into the folder:

    \n

    /App_Resources/Android/raw

    \n

    note: if there is no raw folder inside Android folder, create it.\nnote2: change the name of the binary file as lowercase letters, and replace - with _ (this is needed because of androids file name restrictions).

    \n

    ####For example:

    \n

    If your Binary file name is GTM-AAA11B replace its name as: gtm_aaa11b

    \n

    Initalize the tracker in app.js

    \n

    PLAIN JS

    \n
    var application = require(\"application\");
    var tagManager = require(\"nativescript-google-tagmanager\");
    application.mainModule = \"main-page\";
    application.cssFile = \"./app.css\";

    if (application.ios) {
        //iOS
        var __extends = this.__extends || function (d, b) {
            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
            function __() { this.constructor = d; }
            __.prototype = b.prototype;
            d.prototype = new __();
        };
        
        var appDelegate = (function (_super) {
            __extends(appDelegate, _super);
            function appDelegate() {
                _super.apply(this, arguments);
            }
            
            appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                initTagManager(); //Module Code to initalize
            };
            
            appDelegate.ObjCProtocols = [UIApplicationDelegate];
            return appDelegate;
        })(UIResponder);
        application.ios.delegate = appDelegate;
    }else{
        //ANDROID
        application.on(application.launchEvent, function (args) {
            initTagManager(); //Module Code to initalize
        });

    }

    application.start();

    function initTagManager(){
        tagManager.initalize({
            containerId: \"GTM-XXXXXX\", //YOUR Id from GTM
            logLevel: 'verbose'//Optional, default none.
            //available values: 'verbose', 'debug', 'info', 'warning', 'error'
        });
    }
    \n

    Typescript

    \n
    var application = require(\"application\");
    import * as googleTagManager from \"nativescript-google-tagmanager\";
    application.mainModule = \"main-page\";
    application.cssFile = \"./app.css\";

    if (application.ios) {
        //iOS
        class MyDelegate extends UIResponder implements UIApplicationDelegate {
            public static ObjCProtocols = [UIApplicationDelegate];

            applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
                initTagManager(); //Module Code to initalize
                return true;
            }

        }

        application.ios.delegate = MyDelegate;

    }else{
        //ANDROID
        application.on(application.launchEvent, function (args) {
            initTagManager(); //Module Code to initalize
        });

    }

    application.start();

    function initTagManager(){
        googleTagManager.initalize({
            containerId: \"GTM-XXXXXX\", //YOUR Id from GTM
            logLevel: 'verbose'//Optional, default none.
            //available values: 'verbose', 'debug', 'info', 'warning', 'error'
        });
    }
    \n

    Methods

    \n

    Log Anything

    \n
    // category and action are not optional, label and value are
    googleTagManager.log({
      \"event\": \"eventTrack\",
      \"eventCategory\": \"Button\",
      \"eventAction\": \"Press\",
      \"eventLabel\": \"Sign Up\",
      \"screenName\": \"Login\"
    });

    googleTagManager.log({
      \"event\": \"screenVisible\",
      \"screenName\": \"Login\"
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timedatepicker":{"name":"nativescript-timedatepicker","version":"1.2.1","license":{"type":"","url":"https://github.com/AntonioCuevaUrraco/nativescript-timedatepicker/blob/master/LICENSE"},"readme":"

    nativescript-timedatepicker

    \n

    A NativeScript plugin providing native date and time pickers for Android and iOS.

    \n

    ##Android side\n\"alt\n##iOS side\n\"alt

    \n

    Usage

    \n

    //Import the plugin
    import * as TimeDatePicker from 'nativescript-timedatepicker';

    //Create a callback function
    let mCallback =  ((result) => {
      if (result) {
        alert(\"the time is \"+result);
      }
    });

    //Initialize the PickerManager (.init(yourCallback, title, initialDate))
    TimeDatePicker.init(mCallback,null,null);

    //Show the dialog
    TimeDatePicker.showDatePickerDialog();
    \n

    For more examples of usage see the demo main-view-model.ts.

    \n

    ##IOS localization

    \n

    If you want the buttons to be on some other language than english you have to add that language to your project on xcode.

    \n

    \"alt

    \n

    ##Credits\nThis plugin abstract two native libraries, hence here are the project and deserved merit to the creators.

    \n

    For iOS https://github.com/hackiftekhar/IQActionSheetPickerView
    \nFor Android https://github.com/CiTuX/datetimepicker

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace-gradle-plugin":{"name":"nativescript-dynatrace-gradle-plugin","version":"1.0.3","license":"ISC","readme":"

    nativescript-dynatrace-gradle-plugin

    \n

    Installation

    \n

    tns plugin add nativescript-dynatrace-gradle-plugin

    \n

    Configuration

    \n

    You must generate application ID and beacon URL and add them to your project's gradle.properties file so that your Android mobile app can send monitoring data to your Dynatrace monitoring environment.

    \n

    Add the configuration to your gradle.properties in the following way:

    \n

    DTXApplicationID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

    \n

    DTXBeaconURL=https://xxxxxxxxxx.bf.dynatrace.com/mbeacon

    \n

    Similar Plugins

    \n

    NativeScript Dynatrace Cocoapods Plugin for iOS: https://www.npmjs.com/package/nativescript-dynatrace-cocoapods-plugin

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-orientation-free":{"name":"nativescript-orientation-free","version":"2.2.5","license":"MIT","readme":"

    Free version for nativeScript-orientation (renamed to nativeScript-orientation-free)

    \n

    A rather maintained version of nativeScript-orientation. This is simply a fork of nativeScript-orientation which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

    \n

    To use this, simply install with NPM using:

    \n

    npm install nativeScript-orientation-free

    \n

    All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-diawi-distribution":{"name":"nativescript-diawi-distribution","version":"1.0.4","license":"MIT","readme":"

    nativescript-diawi-distribution

    \n

    Prerequisites

    \n
      \n
    • nativescript installed, ability to build nativescript apps
      • \n
    • Diawi account (free accounts available)
      • \n
    \n

    Quick Start

    \n
      \n
    1. npm install --save-dev nativescript-diawi-distribution
      2. \n
    2. Generate a Diawi access token here https://dashboard.diawi.com/profile/api
      3. \n
    3. Copy the below config, insert the token from above step and save in project root as "diawi-upload.config.json"\n{\n"diawi_access_token": "[YOUR_TOKEN_HERE]",\n}
      4. \n
    4. Use nativescript build commands for ios/android and include --env.diawi flag\n4a. eg: tns build android --env.diawi
      5. \n
    5. Add diawi-upload.config.json to your .gitignore - this file includes your diaiw API key you do not want to store this in a repository
      6. \n
    \n

    Configuration

    \n

    "emails" can also be specified as a field in the configuration file as a comma separated list. Addresses listed here will be notified of build completion with a link to download

    \n

    Credit

    \n

    Diawi upload code originally by Ronak Doshi and can be found here as part of a github action: https://github.com/rnkdsh/action-upload-diawi

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-checkbox":{"name":"nativescript-danem-checkbox","version":"1.0.0","license":"Apache-2.0","readme":"

    @nstudio/nativescript-checkbox

    \n

    A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

    \n
    ns plugin add @nstudio/nativescript-checkbox
    \n

    Platform controls used:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    Android CheckBoxBEMCheckBox
    \n

    Usage

    \n
    <Page
      xmlns=\"http://schemas.nativescript.org/tns.xsd\"
      xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\">
      <ActionBar title=\"Native Checkbox\" />
      <StackLayout>
        <CheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" />
        <CheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" />
      </StackLayout>
    </Page>
    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    import { Frame } from '@nativescript/core';

    public toggleCheck() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      checkBox.toggle();
    }

    public getCheckProp() {
      const checkBox = Frame.topmost().getViewById('yourCheckBoxId');
      console.log('checked prop value = ' + checkBox.checked);
    }
    \n

    Angular Usage Sample:

    \n
    import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

    @NgModule({
      imports: [TNSCheckBoxModule]
      // etc.
    })
    export class YourModule {}

    // component:
    export class SomeComponent {
      @ViewChild('CB1') FirstCheckBox: ElementRef;
      constructor() {}
      public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
      }

      public getCheckProp() {
        console.log(
          'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
        );
      }
    }
    \n
    <StackLayout>
      <CheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"></CheckBox>
      <button (tap)=\"toggleCheck()\" text=\"Toggle it!\"></button>
      <button (tap)=\"getCheckProp()\" text=\"Check Property\"></button>
    </StackLayout>
    \n

    NativeScript-Vue Usage Sample

    \n

    In your main.js (The file where the root Vue instance is created) register the element

    \n
    import { CheckBox } from '@nstudio/nativescript-checkbox';
    Vue.registerElement(
      'CheckBox',
      () => CheckBox,
      {
        model: {
          prop: 'checked',
          event: 'checkedChange'
        }
      }
    );
    \n

    And in your template, use it as:

    \n
    <check-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" />
    \n

    Use checked instead of v-model. See #99.

    \n

    Properties

    \n
      \n
    • checked - boolean
      • \n
    • text - text to use with the checkbox
      • \n
    • fillColor - Color of the checkbox element
      • \n
    • boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.
      • \n
    \n

    Events

    \n
      \n
    • checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.
      • \n
    \n

    API

    \n
      \n
    • toggle() - Change the checked state of the view to the inverse of its current state.
      • \n
    \n

    Css Styling

    \n
      \n
    • color - set the text label color
      • \n
    • font-size - checkbox is sized to text from here : default 15
      • \n
    • border-width - set the line width of the checkbox element: iOS only
      • \n
    \n

    Styling [Android]

    \n
      \n
    • checkStyle - set to the name of your drawable
      • \n
    • checkPadding - set the padding of the checkbox
      • \n
    \n

    Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>

    <selector xmlns:android=\"http://schemas.android.com/apk/res/android\">
        <item android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" />
        <item android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" />
        <item android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/>
        <item android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" />
    </selector>
    \n

    Radiobuttons, anyone?

    \n

    Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet boxType="circle"

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-orientation-ssi":{"name":"nativescript-orientation-ssi","version":"2.2.5","license":"MIT","readme":"

    Free version for nativeScript-orientation (renamed to nativeScript-orientation-free)

    \n

    A rather maintained version of nativeScript-orientation. This is simply a fork of nativeScript-orientation which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

    \n

    To use this, simply install with NPM using:

    \n

    npm install nativeScript-orientation-free

    \n

    All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textinputlayout-v2":{"name":"nativescript-textinputlayout-v2","version":"2.0.8","license":"MIT","readme":"

    ../README.md

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-design-icons":{"name":"nativescript-material-design-icons","version":"1.0.0","license":"MIT","readme":"

    Nativescript Material Icons

    \n

    This is a simple package which contains css classes for all material design icons and MaterialIcons font.

    \n

    Why This Plugin

    \n

    To use any font icons in nativescript project, there is a great plugin nativescript-fonticon for vanilla nativescript project and nativescript-ng2-fonticon for angular native projects.\nThat plugin requires a font file and a css file containing mapping of className and unicode of the icon.

    \n

    material-design-icons repository do not provide css file so we need to generate it manually.

    \n

    This plugin provides the ready to use css file containing mapping of className and its unicode. This plugin also automatically copy the MaterialIcons-Regular.ttf file to app/fonts folder and material-design-icons.css file to app/ directory. So you don't need to manually add those files. Also, upon uninstall of this plugin, it will remove those two files.

    \n

    Usage

    \n

    npm install nativescript-material-design-icons --save

    \n

    How to Use

    \n

    Check this step-by-step tutorial on how to use material design font icons in your nativescript angular applications.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-inbox":{"name":"nativescript-open-inbox","version":"1.0.2","license":"MIT","readme":"

    NativeScript Open Default Email App Inbox

    \n

    You can use this plugin to open the default email app on both android and ios.

    \n

    Installation

    \n

    Run this command from the root of your project:

    \n
    tns plugin add nativescript-open-inbox
    \n

    API

    \n

    To use this plugin you must first require/import it:

    \n

    TypeScript

    \n
    import { openInbox } from \"nativescript-open-inbox\";
    // or
    import { openInbox as goToEmailApp } from \"nativescript-open-inbox\";
    \n

    JavaScript

    \n
    var email = require(\"nativescript-open-inbox\");
    \n

    openInbox

    \n

    TypeScript

    \n
      email.openInbox()
        .then(() => {
            console.log(\"Cool!\");
        })
        .catch((ex) => {
          console.log(\"Ouch!\" + ex);
        });
    \n

    JavaScript

    \n
      email.openInbox()
        .then(() => {
            console.log(\"Cool!\");
        })
        .catch((ex) => {
          console.log(\"Ouch!\" + ex);
        })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dynatrace-cocoapods-plugin":{"name":"nativescript-dynatrace-cocoapods-plugin","version":"1.0.6","license":"ISC","readme":"

    nativescript-dynatrace-cocoapods-plugin

    \n

    Installation

    \n

    tns plugin add nativescript-dynatrace-cocoapods-plugin

    \n

    Configuration

    \n

    You must generate application ID and beacon URL and add them to your project's Info.plist file so that your iOS mobile app can send monitoring data to your Dynatrace monitoring environment.

    \n

    Add the configuration to your Info.plist in the following way:

    \n

    <key>DTXApplicationID</key>
    \n<string>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</string>

    \n

    <key>DTXBeaconURL</key>
    \n<string>https://xxxxxxxxxx.bf.dynatrace.com/mbeacon</string>

    \n

    Similar Plugins

    \n

    NativeScript Dynatrace Gradle Plugin for Android: https://www.npmjs.com/package/nativescript-dynatrace-gradle-plugin

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@teammaestro/nativescript-svg":{"name":"@teammaestro/nativescript-svg","version":"1.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"habibtestPublish":{"name":"habibtestPublish","version":"0.0.3","license":"MIT","readme":"

    Develop a nativescript-angular plugin now

    \n

    \"Angular\n\"MIT\n\"Dependency

    \n\n\n\n\n\n\n\n\n\n\n\n
    \"Demo\"
    Android and iPhone running the same {N} + Angular2 plugin.
    \n

    The seed is setup to allow you to create a nativescript-angular plugin quickly.

    \n
      \n
    • Sample demo app ready for you to try out your plugin as you develop it.
      • \n
    • Sample Component, Directive, Pipe and Service created for you (tests coming soon) to get started right away.
      • \n
    • Customize whichever is helpful to your plugin and remove the others.
      • \n
    \n

    Get started

    \n
      \n
    1. Download a zip of this seed.
      2. \n
    2. cd ... path/to/unzip/folder ...
      3. \n
    3. npm install -g typescript
      4. \n
    4. npm install -g nativescript
      5. \n
    5. npm install
      6. \n
    6. npm run setup
      7. \n
    7. Get to work.
      8. \n
    \n

    Changes needed

    \n

    You will want to change a couple things for your plugin.

    \n
      \n
    1. Replace all instances of nativescript-ng2-yourplugin with name of your plugin:
      2. \n
    \n
      \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/package.json
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/package.json#L24
      • \n
    • Here: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/tsconfig.json#L13 (And likely modify more to tailor to your specific plugins typescript definition needs)
      • \n
    \n
      \n
    1. Modify the demo to import your plugin files, etc: https://github.com/NathanWalker/nativescript-ng2-plugin-seed/blob/master/src/app/app.ts#L10-L15
      2. \n
    \n

    Develop Workflow

    \n

    Make changes to plugin files, then:

    \n
    npm run demo.ios

    // or...

    npm run demo.android
    \n

    Build Plugin

    \n

    You'll want to run this before publishing.

    \n
    npm run build
    \n

    VERY IMPORTANT: You need to modify package.json for your plugin. Most likely, you will want to remove 3 sections completely: scripts, dependencies, and devDependencies as those are setup for the demo. When publishing, it's important to ensure no unnecessary scripts or dependencies are installed when comsumers use your plugin. You can add those sections back after publishing.

    \n

    Testing

    \n

    Work in progress. Coming soon.

    \n
    npm test
    \n

    Troubleshooting

    \n

    When preparing your demo if you get the following error message:

    \n
    Plugin \"nativescript-ng2-yourplugin\" is not installed.
    Sending exception report (press Ctrl+C to stop).....
    \n

    This means your plugin has not been copied over to the demo project, or failed when running the demo command previously. To resolve this run npm run repair.

    \n

    Why the TNS prefixed name?

    \n

    TNS stands for Telerik NativeScript

    \n

    iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

    \n

    To avoid confusion with iOS native classes, TNS is used instead.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shimmer":{"name":"nativescript-shimmer","version":"2.1.0","license":{"type":"BSD","url":"https://github.com/NathanWalker/nativescript-shimmer/blob/master/LICENSE"},"readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/photo-editor":{"name":"@skhye05/photo-editor","version":"1.0.3","license":"Apache-2.0","readme":"

    @skhye05/photo-editor

    \n

    Overview

    \n

    This plugins is a copy of https://appcenter.ms with a few updates.

    \n

    Installation

    \n
    ns plugin add @skhye05/photo-editor
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngkeyboardtracker":{"name":"nativescript-ngkeyboardtracker","version":"0.0.2","license":"MIT","readme":"

    nativescript-ngkeyboardtracker

    \n

    \"npm\"\n\"npm\"

    \n

    Installation

    \n
    tns plugin add nativescript-ngkeyboardtracker
    \n

    Usage

    \n

    Refer to the library's CocoaPod page.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-disable-bitcode":{"name":"nativescript-disable-bitcode","version":"1.0.0","license":"MIT","readme":"

    NativeScript plugin to disable Bitcode

    \n

    This is a plugin to disable iOS Bitcode when using CocoaPods.

    \n

    Usage

    \n

    Demo

    \n

    Check out the demo folder for a sample usage.

    \n

    Add the plugin to your project:

    \n
      tns plugin add nativescript-disable-bitcode
    \n

    Try the Demo

    \n

    To try the demo run the following commands:

    \n
    npm run setup
    npm run demo.ios
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tesseract-ios":{"name":"nativescript-tesseract-ios","version":"1.0.8","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-tesseract-ios/blob/master/LICENSE"},"readme":"

    NativeScript-tesseract-ios

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-tesseract-ios
    \n

    Usages

    \n

    Example

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rob4226/ngrx-devtools-nativescript":{"name":"@rob4226/ngrx-devtools-nativescript","version":"7.0.1","license":"MIT","readme":"

    Looking for maintainers

    \n

    This repo is looking for maintainers. If you are interested please ping me on https://twitter.com/ufsa

    \n

    ngrx-devtools-nativescript

    \n

    Implementation of a devtools monitor similar to those available in @ngrx/store-devtools for NativeScript.

    \n

    Install

    \n
    npm i ngrx-devtools-nativescript
    \n

    How to use

    \n

    First of all you should instrument your @ngrx/store using StoreModule.provideStore(...). Check out @ngrx/devtools readme for how to do that.

    \n

    Import the NativeScriptDevToolsMonitors in your app(or other) module and add store-dev-tools instrumentation by importing StoreDevtoolsModule.instrumentStore():

    \n
    import { NgModule } from \"@angular/core\";
    import { StoreModule } from '@ngrx/store';
    import { NativeScriptDevToolsMonitors } from \"ngrx-devtools-nativescript\";
    import { StoreDevtoolsModule } from '@ngrx/store-devtools';

    @NgModule({
      imports: [
        NativeScriptModule,
        NativeScriptDevToolsMonitors,
        StoreModule.provideStore({ ... }),
        StoreDevtoolsModule.instrumentStore()
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    class AppModule { };
    \n

    Use <ns-dock-monitor> component inside you application - preferably in the root of the visual tree.

    \n
    import { NSDockMonitor } from \"ngrx-devtools-nativescript\";

    @Component({
        selector: \"my-app\",
        directives: [NSDockMonitor],
        template: `
        <grid-layout>
            //...
            <ns-dock-monitor screenCover=\"0.5\"></ns-dock-monitor>
        </grid-layout>`
    })
    export class AppComponent {
        //...
    }
    \n

    You can specify what part of the screen should be covered by the dev-tools slideout with the screenCover property.

    \n

    Example

    \n

    Example projects:

    \n\n

    Pure Redux example with Vanilla JS {N} App

    \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/ble":{"name":"@awarns/ble","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/ble

    \n

    \"npm\n\"npm\"

    \n

    This module includes tasks to obtain information regarding nearby Bluetooth Low Energy (BLE) devices. This is useful to assess the existence of concrete devices nearby. Also, to build custom indoor localization and positioning systems based on BLE. Supports the iBeacon standard.

    \n

    This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering BLE scanning tasks. Scan for nearby BLE devices even in background.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/ble
    \n

    Usage

    \n

    After installing and setting up this plugin, you'll have access to two different tasks to scan for Bluetooth Low Energy (BLE) devices seen nearby. The result, will be a BleScan record, described below.

    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    acquirePhoneBleScanAllows to perform single BLE scans for a given amount of time
    acquireMultiplePhoneBleScanAllows to repeatedly perform BLE scans. The duration of each scan can be controlled. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
    \n
    \n

    Note: All the tasks require fine location permission, bluetooth scanning permission, active location services and active bluetooth adapter for their execution. Each task will automatically request what is missing during framework's initialization

    \n
    \n

    Acquire a single BLE scan

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquirePhoneBleScanTask, BleScanMode } from '@awarns/ble';

    export const demoTasks: Array<Task> = [
        acquirePhoneBleScanTask(
          /* optional */ { scanTime: 5000, scanMode: BleScanMode.BALANCED, iBeaconUuids: [] }
        ),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    scanTimenumberThe amount of time (in milliseconds) to be spent scanning. Defaults to 5000 (5s)
    scanModeBleScanModeThe BLE scan mode to use, see context-apis docs API section on BLE. Defaults to balanced mode
    iBeaconUuidsArray<String>Filters the scan results to only show devices broadcasting one of the given iBeacon UUID(s)
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquirePhoneBleScan')
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('bleScanAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Acquire BLE scans in batch

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquireMultiplePhoneBleScanTask, BleScanMode } from '@awarns/ble';

    export const demoTasks: Array<Task> = [
        acquireMultiplePhoneBleScanTask(
          /* optional */ { scanTime: 5000, scanMode: BleScanMode.BALANCED, iBeaconUuids: [] }
        ),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    scanTimenumberThe amount of time (in milliseconds) to be spent scanning. Defaults to 5000 (5s)
    scanModeBleScanModeThe BLE scan mode to use, see context-apis docs API section on BLE. Defaults to balanced mode
    iBeaconUuidsArray<String>Filters the scan results to only show devices broadcasting one of the given iBeacon UUID(s)
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquireMultiplePhoneBleScan', { maxInterval: 10000 /* (Optional) Maximun interval between scans, unlimited by default */ })
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('bleScanAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    bleScanAcquiredBleScan | Array<BleScan>Indicates that one or more new BLE scan results have been acquired
    \n

    Records

    \n

    BleScan

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways ble-scan
    changeChangeAlways none. Scan results are returned as a whole. Intermediate results are not reported
    timestampDateThe local time when the scan was completed
    seenArray<BleDeviceInfo>The devices seen during the scan. The list can be empty. For details on the properties of the BleDeviceInfo object, see context-apis API docs section on BLE
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ozymandiasthegreat/vad":{"name":"@ozymandiasthegreat/vad","version":"2.0.7","license":"MIT","readme":"

    libfvad-wasm

    \n

    I had a need for a VAD library that would run on Android via NativeScript.\nCompatibility with browsers and Node would've been a bonus.\nAfter looking around for a bit I realized that my best bet would be to use\nVAD library extracted from WebRTC project compiled to WASM.

    \n

    This would run on Android through NativeScript, and in browsers and recent versions\nof Node natively. The only downside I could think of, was no iOS support since WASM\nisn't allowed in apps by Apple.

    \n

    I first discovered a Mozilla-owned repository that contained WebRTC_VAD code extracted\nand compiled with Emscripten. That was a great starting point, although ultimately\nnot viable since it contained too much unnecessary C code and the whole repository\nseems abandoned.

    \n

    Then, in my search, I found libfvad. This project is fairly active, contains no unnecessary code,\nand even packages VAD in easy-to-consume API. So I decided to go with this and package it with\nEmscripten so it can be run anywhere.

    \n

    So here we are. On to the API reference.

    \n

    API Reference

    \n

    This package is an ES module. To use it with older browsers you'll need Babel or some such.\nTo use it with Node, you'll need a version with support for ES modules and WASM.\nTo use it with NativeScript, you shouldn't need anything extra, as {N} imports embedded version\nby default.\nThere are also typings provided.

    \n

    The main default export is an async function that resolves to class constructor VAD.\nThere are also a few named exports VADMode, VADEvent, and VAD_FRAME;

    \n

    VADMode defines the aggressiveness of VAD. Higher mode means fewer false positives and\npotentially more missed utterances. The available modes are:

    \n
      \n
    • NORMAL
      • \n
    • LOW_BITRATE (optimized for low bitrate streams)
      • \n
    • AGGRESSIVE (this seems to work best in most situations)
      • \n
    • VERY_AGGRESSIVE
      • \n
    \n

    VADEvent is an enum with these members { ERROR, SILENCE, VOICE }.

    \n

    VAD_FRAME is a constant size of a single frame processed by VAD. For best results\nyour buffer should be divisible by VAD_FRAME.

    \n
    VAD(mode: VADMode, rate: number);

    // Convenience function for browsers, as AudioWorklet returns data as Float32Array
    // which is incompatible with this library
    static VAD.floatTo16BitPCM(buffer: Float32Array): Int16Array;

    // Single frame processing used internally. Not very useful on its own
    VAD.processFrame(frame: Int16Array): VADEvent;

    // Buffer processing, larger buffers return more accurate results
    VAD.processBuffer(buffer: Buffer | ArrayBufferView): VADEvent;

    // Free the resources used by this instance. The instance is not usable afterward
    VAD.destroy(): void;
    \n

    You can also find the C API as exported by dist/libfvad.wasm in include/fvad.h.

    \n

    Examples

    \n

    Web

    \n

    You can find a browser example in the ./docs.\nAs of this writing, it only works in Chrome, since JavaScript private fields (#)\nare used in the library. You can also see it live in your browser here

    \n

    Node

    \n

    You can find example code in the ./examples/node. Just cd in there and run node ./index.js.\nThe sample script only runs on Linux!\nHowever it's only a few lines of code, so it's exceedingly easy to adapt it to your OS.

    \n

    NativeScript

    \n

    Again, WASM is only supported on Android. Blame Apple.

    \n

    To run sample app, cd ./examples/nativescript and run ns run android.\nThat's it.

    \n

    The sample uses a worker thread to run audio recording loop in the background\nand communicates with the main app asynchronously.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mopub":{"name":"nativescript-mopub","version":"1.0.0","license":"Apache-2.0","readme":"

    nativescript-mopub

    \n

    \"Under

    \n

    PLEASE DO NOT USE THIS PLUGINS NOW! IT'S Under Construction

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbase-vuex-orm":{"name":"nativescript-couchbase-vuex-orm","version":"1.3.2","license":"MIT","readme":"

    Nativescript Couchbase Vuex ORM

    \n

    nativescript-couchbase-vuex-orm

    \n

    A module that auto-generates conventional ORM-style modular vuex actions using the\nnativescript-couchbase-plugin. Ideally suited for Vue NativeScript projects. e.g.

    \n
    \n

    Example

    \n

    given a couple of "Model" classes...

    \n
    export class Document {
      constructor () {
        this.hasMany(['ChildDocument']),
        this.properties({
          name: 'Default Document Name'
        })
      }
    }

    export class ChildDocument {
      constructor () {
        this.belongsTo = 'Document'
      }
    }
    \n

    ...and a bit of store setup (see further below), the following actions will automatically become available to dispatch on your vue template!

    \n
    import { mapGetters, mapActions } from 'vuex'
    ...
    export default {
      methods () {
        ...mapActions[
          'Document/getById',
          'Document/create',
          'Document/update',
          'Document/addChildDocument',
          'Document/removeChildDocument',
          'Document/reorderChildDocument',
          'Document/delete',
          'ChildDocument/create',
          'ChildDocument/update'
          /* etc. */]
      }
    }
    \n

    Thus, after a few dispatches, the data in your Couchbase-lite database would look something like the following:

    \n
    `select * from Document` [{
      _type: 'Document',
      childDocuments: [
        '6f0a1418-ea43-4cd2-a652-5202f4f251fb',
        '6f0a1418-ea43-4cd2-a652-5202f4f251fc'
      ],
      id: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
      name: 'Default Document Name'
    }]

    `select * from ChildDocument` [
      {
        _parentId: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
        _type: 'ChildDocument',
        id: '6f0a1418-ea43-4cd2-a652-5202f4f251fb'
      },
      {
        _parentId: '6f0a1418-ea43-4cd2-a652-5202f4f251fa',
        _type: 'ChildDocument',
        id: '6f0a1418-ea43-4cd2-a652-5202f4f251fc'
      }
    ]
    \n
    \n

    Requirements

    \n\n
    \n

    Installation

    \n

    to install with NPM, enter the following command in the desired project directory.

    \n

    npm install --save nativescript-couchbase-vuex-orm

    \n

    your store must have $db in it's root state object with a Couchbase-lite DB. Your "model" classes are supplied as below (we continue with the Document and ChildDocument examples from above):

    \n
    import { Couchbase } from 'nativescript-couchbase-plugin'
    import { ORM } from 'nativescript-couchbase-vuex-orm'

    import { Document, ChildDocument } from './Example.js'

    const store = {
      state: {
        $db: new Couchbase('<your-db-name-here>'),
      },
      modules: {
        Document: new ORM(Document).build(),
        ChildDocument: new ORM(ChildDocument).build()
      }
    }
    \n

    NB. Model classes will not work within other Model classes as vuex sub-modules (though ambitious developers are welcome to fork this project should they seek this functionality!) If you wish to create internal objects with a collection, add an object literal to your Model's properties object.

    \n
    \n

    Model Abstract Class

    \n

    Model classes should appear as below (here I use the example of a WorkFlow which can have many Stories):

    \n
    class WorkFlow {
      constructor () {
        // a collection can only belong to one parent but can be featured in the hasMany of multiple instance types.  A Model's `belongsTo` property merely enforces a `_parentId`  property is present on the child collections of a given parent.
        this.belongsTo = 'Organisation'

        this.hasMany = [
          // NB. delete ALWAYS cascades by default

          // - EITHER -
          // String ChildClassName
          'Story',

          // (v^1.2.0)
          // - OR -
          // Model ChildClass
          // NB. to eager load children, a Model MUST be supplied
          Story

          // - OR -
          // Object ChildModel
          {
            // --------------
            // - EITHER -
            // String ChildClass i.e. 'class ChildClass { ... }'
            name: 'Story',

            // (v^1.2.0)
            // - OR -
            // Model ChildClass
            // NB. to eager load children, a Model MUST be supplied
            name: Story,
            // --------------

            // (optional) a plural name to use instead of bolting an \"s\" onto the name property (the default)
            pluralName: 'Stories',

            // override cascade behaviour with explicit property
            cascade: false
          }
        ],

        //  default model properties initialised as below:
        this.properties = {
          someString: 'Foo',
          someNumber: 1234,
          someObject: {
            foo: 'bar'
          }
        }

        // (v^1.3.0)
        // Still want to use the module as a normal part of your vue store as well?
        // You can optionally add state, mutations and getters too!
        this.state = {
          foo: 'test',
          bar: 1234
        }
        this.mutations = {
          setFooBar (state, { foo, bar }) {
            state.foo = foo
            state.bar = bar
          }
        }
        // all states are automatically mapped to default getters.
        // e.g. `store.getters[Workflow/foo] = state => state.someStoreVariable`
        // you can optionally add custom (or override) getters as below.
        this.getters = {
          getFooBar: state => state.foo + state.bar
        }
      }

      // custom actions are added outside of your constructor
      async customAction ({ dispatch, rootState }, args) {
        // e.g.
        // 1) call an instance modeled on the local class
        const yourModelName = await dispatch('getById', args.id)
        // 2) call parent using the retrieved parent Id
        const parentModel = await dispatch(
          'SomeParentModel/getById',
          yourModelName._parentId,
          { root: true })
        // 3) return the name property
        return parentModel.name
      }
    }
    \n

    API

    \n

    Remember all calls use await/async or Promise.then() format

    \n

    getById(String id || { String id, Boolean lazy, Number maxDepth }) → Object<CouchbaseCollection> collection

    \n
      \n
    • return a collection based on the supplied hash ID.
      • \n
    • ID must be of the same type as the given Model
      • \n
    • (as of v^1.2.0) If an object is supplied instead of a string ID:\n
        \n
      • Set the lazy prop equal to false to eager load the children in place of their ID references (NB, only children that were declared as Model classes in their parent's hasMany prop can be eager loaded).
        • \n
      • (optionally) define a maxDepth prop to specify how many levels of child down you would like the ORM to inject
        • \n
      \n
      • \n
    \n

    create(Object properties) → String id

    \n
      \n
    • create a new collection and populate it with the supplied properties
      • \n
    • As this is a NoSQL DB, fields are not enforced
      • \n
    \n

    update({ String id, Object props }) → Boolean success

    \n
      \n
    • update the given collection
      • \n
    • ID must be of the same type as the given Model
      • \n
    \n

    delete(String id) → Boolean success

    \n
      \n
    • delete the given collection
      • \n
    • cascade the delete into the supplied child collections
      • \n
    • NB deleting an item is not enforced and will not remove references from an associated parent (or any instance with an associated hasMany array)
      • \n
    \n

    add[Child](String id | { String id, Object child: {String id | Object props } }) → Number indexNumber

    \n
      \n
    • add either a new or existing child to a collection
      • \n
    • if a parent ID is supplied as the argument, a new item will be created with default arguments
      • \n
    • if an object is supplied with a parent ID and a child object containing a valid child ID, the child ID will be added to the parent collection (the _parentId property of the child will be updated accordingly if it belongsTo the given parent)
      • \n
    • if an object is supplied with a parent ID and a child object containing a props object, a new child will be created using the supplied properties.
      • \n
    \n

    example:

    \n

    given a "Deck" model that hasMany "Card", create a new card and add it to a deck with the supplied foo property

    \n
    await Deck.addCard({ id: \"0xparentId\", child: { props: { foo: 'bar' } }})
    \n

    remove[Child](String parentId | { String id, Object child: {String id, Boolean delete } }) → Boolean success

    \n
      \n
    • remove and (optionally) delete a child in the collection
      • \n
    • if a parent ID is supplied as the argument, the last child will be popped from the parent's hasMany collection but not deleted.
      • \n
    • if an object is supplied with a parent ID and a child object containing an id then the given child will be removed from the parent's hasMany collection.
      • \n
    • if an object is supplied with a parent ID and a child object containing an id property and a delete property marked as true, then delete the object altogether.
      • \n
    \n

    example:

    \n

    given a "Deck" model that hasMany "Card", remove a card and delete it

    \n
    await Deck.removeCard({ id: \"0xparentId\", child: { id: \"0xchildId\", delete: true }})
    \n

    reorder[Child]({ String id, String fromIndex, String toIndex }) → Boolean success

    \n
      \n
    • reorder the index of a child within a parent (or any hasMany)
      • \n
    • doesn't touch the child collection.
      • \n
    \n

    example:

    \n

    given a "Deck" model that hasMany "Card", move a card's index from 0 to 5

    \n
    Deck.reorderCard({ id: \"0xparentId\", fromIndex: 0, toIndex: 5 }})
    \n
    \n

    Questions

    \n

    Here are some questions I can imagine myself having were I discovering this project for the first time:

    \n

    are the items in the state object stored in the database?

    \n

    No. Only properties will be added to the database. vuex state, mutations and getters are a separate concern from the database.

    \n

    are the database properties visible in the module's state object or by vuex getters?

    \n

    No. All database transactions including retrieval of data should be done using the supplied actions.

    \n

    can I access state, mutations and getters in my custom ORM actions?

    \n

    Yes! This is the recommended way to communicate between actions within your database and state within your application.

    \n

    When I getById with a valid ID I don't get anything back, why?

    \n

    A common cause is you're using the wrong module's getById. The ORM is type sensitive. Be wary of defining reserved ORM properties (e.g. _type, id, _parentId). If all else fails, the ORM really isn't that massive or difficult to read through. so if something feels weird, it shouldn't be too hard to spot the cause in my source. All of the conventions I introduce above are very strict so be sure to type everything precisely as instructed.

    \n

    Do you unit test this stuff?

    \n

    Yes, I have about 99.9% coverage in fact, but because I use an integrated version of this code in a private project, I can't release the tests I'm afraid because they all stub off my existing source code. you'll just have to take my word for it. Suffice it to say, I use this stuff and it all works correctly for my build.

    \n

    Do you have a roadmap for this project?

    \n

    Not right now, it's sort of organically growing along side the code I'm working on. When I spot something I'd like it to do, I figure others will be equally eager! That said, I'm receptive to suggestions (though I may not deal with them immediately!)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache-media":{"name":"nativescript-image-cache-media","version":"1.0.6","license":{"type":"MIT","url":"https://github.com/NNieto/nativescript-image-cache-media/blob/master/LICENSE"},"readme":"

    Nativescript-image-cache-media

    \n

    A plugin for caching web and local images on Android and iOS

    \n

    Using Picasso on Android and SDWebImage on iOS is a simple library that uses the nativescript image component and just adding a cache funcionality. Inspired by nativescript-web-image-cache and nativescript-image-cache-it plugins, Feel free to contribuite or suggest changes.

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Alejandro Nieto

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-image-cache-media
    \n

    Usages

    \n

    You can use all the nativescript native image module, just set the imageUri property.

    \n

    Example

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:IM=\"nativescript-image-cache-media\">
    \t<StackLayout>
    \t\t<IM:ImageCacheMedia placeholder=\"~/resources/images/placeholder.png\" stretch=\"aspectFill\" imageUri=\"{{ photo_url }}\"/>
    \t</StackLayout>
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-playground-bar":{"name":"nativescript-playground-bar","version":"1.0.0","license":"MIT","readme":"

    nativescript-playground-bar

    \n

    A plugin for your NativeScript Playground projects to help implement a light or dark content status bar.

    \n

    Installation

    \n
      \n
    1. From the Playground UI select Add NPM package (via the Explorer popup menu).
      2. \n
    2. Enter nativescript-playground-bar as the NPM package name.
      3. \n
    3. Click Add.
      4. \n
    \n

    Usage

    \n
    // main-page.js
    const PlaygroundBar = require(\"~/nativescript-playgroundbar\");

    exports.pageLoaded = function (args) {
      PlaygroundBar.lightContent(args.object);
    }
    \n

    Methods

    \n

    lightContent

    \n

    Sets the iOS status bar to light content.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ArgumentsRequiredDefaultDescription
    pageyesn/aThe current page with the status bar you want to change.
    timeoutno10Specifies the time (in milliseconds) you want to delay the change of style.
    \n

    darkContent

    \n

    Sets the iOS status bar to dark content, which is the playgrounds default style.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ArgumentsRequiredDefaultDescription
    pageyesn/aThe current page with the status bar you want to change.
    timeoutno10Specifies the time (in milliseconds) you want to delay the change of style.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/wifi":{"name":"@awarns/wifi","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/wifi

    \n

    \"npm\n\"npm\"

    \n

    This module includes tasks to obtain information regarding nearby Wi-Fi access points (APs). This is useful to assess the existence of concrete access points nearby. Also, to build custom indoor localization and positioning systems based on Wi-Fi.

    \n

    This plugin acts as a wrapper on top of the nativescript-context-apis plugin (from the same authors), offering Wi-Fi scanning tasks. Scan for nearby Wi-Fi APs even in background.

    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/wifi
    \n

    Usage

    \n

    After installing and setting up this plugin, you'll have access to two different tasks to scan for Wi-Fi APs seen nearby. The result, will be a WifiScan record, described below.

    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    acquirePhoneWifiScanAllows to perform a single Wi-Fi scan for a given amount of time
    acquireMultiplePhoneWifiScanAllows to repeatedly perform Wi-Fi scans. Scans will happen for as long as there is execution time remaining (3 minutes max. or shortly before the next time-scheduled task execution, whatever occurs earlier)
    \n
    \n

    Note: All the tasks require fine location permission and active Wi-Fi radio for their execution. Each task will automatically request what is missing during framework's initialization

    \n
    \n

    Acquire a single Wi-Fi scan

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquirePhoneWifiScanTask } from '@awarns/wifi';

    export const demoTasks: Array<Task> = [
        acquirePhoneWifiScanTask(/* optional */ { ensureIsNew: true, timeout: 15000 }),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    ensureIsNewbooleanMake sure that the resulting Wi-Fi scan is up-to-date. A value of true ensures Android Wi-Fi scanning restrictions are met, thus the reported value is always new. The default value is true
    timeoutnumberThe maximum time, in milliseconds, to be spent scanning for nearby Wi-Fi APs. The default value is 15000 (15s)
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquirePhoneWifiScan')
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('wifiScanAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Acquire Wi-Fi scans in batch

    \n

    To register this task for its use, you just need to import it and call its generator function inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import { acquireMultiplePhoneWifiScanTask } from '@awarns/wifi';

    export const demoTasks: Array<Task> = [
      acquireMultiplePhoneWifiScanTask(/* optional */ { ensureIsNew: true, timeout: 15000 }),
    ];
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameTypeDescription
    ensureIsNewbooleanMake sure that the resulting Wi-Fi scans are up-to-date. A value of true ensures Android Wi-Fi scanning restrictions are met, thus the reported values are always new. The default value is true
    timeoutnumberThe maximum time to be spent performing each individual Wi-Fi scan. The default value is 15000 (15s)
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on(
      'startEvent',
      run('acquireMultiplePhoneWifiScan', { 
         maxInterval: 25000 
         /* 
            (Optional, mandatory if ensureIsNew=true) Maximun interval between scans, unlimited by default. 
            
            If ensureIsNew=true, the value must ensure that a maximum of 2 scans are being collectd every minute. 
            
            For example, here the task will be executed every 1 minute, which means it will have ~55s to run. 
            With 25s between scans we meet the OS restrictions and have enought time to collect 2 Wi-Fi fingerprints. 
         */ 
      })
        .every(1, 'minutes')
        .cancelOn('stopEvent')
    );

    on('wifiScanAcquired', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    wifiScanAcquiredWifiScan | Array<WifiScan>Indicates that one or more new Wi-Fi scan results have been acquired
    \n

    Records

    \n

    WifiScan

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id
    typestringAlways wifi-scan
    changeChangeAlways none. Scan results are returned as a whole. Intermediate results are not reported
    timestampDateThe local time when the scan was completed
    isNewbooleanIndicates if the results of the scan are cached. This can only be false when using ensureIsNew=false option during the scans
    seenArray<WifiApInfo>The Wi-Fi APs seen during the scan. The list can be empty. For details on the properties of the WifiApInfo object, see context-apis API docs section on Wi-Fi
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-platform-css-free":{"name":"nativescript-platform-css-free","version":"1.6.16","license":"MIT","readme":"

    Free version for nativescript-platform-css (renamed to nativescript-platform-css-free)

    \n

    Since all of these basic plugins have become paid now, I will try and maintain them for free for as long as I can.

    \n

    To use this, simply install with NPM using:

    \n

    npm install nativescript-platform-css-free

    \n

    All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-admob":{"name":"nativescript-admob","version":"4.1.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file-cghislai":{"name":"nativescript-handle-file-cghislai","version":"6.4.1-rc.1","license":"MIT","readme":"

    nativescript-handle-file

    \n

    This module gives you a tool to download, choose folder to save and then open an app to open file.

    \n

    Instalation

    \n
    tns plugin add nativescript-handle-file
    \n

    How to use

    \n

    Import class and instance it.

    \n
    import {HandleFile} from 'nativescript-handle-file';

    let handleFile = new HandleFile();
    handleFile.open({
        name : \"name-of-file.extension\",
        url: \"path-to-file\",
        directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
        tittle: \"title to choose apps\" // only in android
    }).then(result => {
        //return true if success
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-web-image-cache-with-fresco":{"name":"nativescript-web-image-cache-with-fresco","version":"2.0.2","license":"MIT(https://github.com/leocaseiro/nativescript-web-image-cache/blob/master/LICENSE)","readme":"

    #Nativescript web image cache\nA minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for IOS and Facebook Fresco for android.\nNote - It cannot be used to display local images, only URLS work, for local images, use NS Image tag

    \n

    License

    \n

    Released under the MIT License, anybody can freely include this in any type of program -- However, if in need of support contract, changes, enhancements and/or a commercial license please contact me (sumeet@videospike.com).

    \n

    Installation

    \n
    tns plugin add nativescript-web-image-cache\n
    \n

    ** Tested on NativeScript 2.0, if any problems while running on previous versions, please update .This version of plugin has breaking changes, if you are using version 1.0.3 of this plugin , please migrate, it is easy to migrate and this version of plugin supports android as well , if you still prefer running on the previous version, use tns plugin add nativescript-web-image-cache@1.0.3.**

    \n

    Usage

    \n

    IF on android, need to initialise the plugin before using or clearing the cache, initialisation not required for iOS

    \n

    Initialising on android - in app.js

    \n
    var imageCache = require("nativescript-web-image-cache");\nif (application.android) {\n    application.onLaunch = function (intent) {\n\t        imageCache.initialize();\n    };\n}\n
    \n

    Caching the images

    \n
      \n
    • To the opening page tag of the xml, add\nxmlns:IC="nativescript-web-image-cache".
      • \n
    • Add the element IC:WebImage with the src attribute set to the url just like normal image tag wherever image caching is required.
      • \n
    • stretch attribute can take values specified here\n-https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch.html
      • \n
    • To check if an image is loading , get the reference to the WebImage view by using page.getViewById("myWebImage") , and check the isLoading property (same as that of NativeScript Image isLoading property).
      • \n
    \n

    Clearing the cache

    \n
      \n
    • Require the module, call the method clearCache() , default time is same for SDWebImageCache which is 7 days, and for Fresco is 60 days, after which cache is automatically cleared.
      • \n
    \n

    ##Example\ncaching :

    \n
        <Page xmlns:IC=\"nativescript-web-image-cache\">
            <GridLayout rows='*' columns='*'> 
    \t        <IC:WebImage stretch=\"fill\" row=\"0\"
    \t         col=\"0\"  id=\"my-image-1\"
    \t         src=\"http://www.newyorker.com/wp-
    \t         content/uploads/2014/08/Stokes-Hello-
    \t         Kitty2-1200.jpg\"    >
    \t         </IC:WebImage>  
            </GridLayout>
        </Page>
    \n

    checking if image is loading :

    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");

    var myImage1 = page.getViewById(\"my-image-1\"),
    \tisLoading = myImage1.isLoading;
    \n

    clear the cache :

    \n
    var imageCacheModule=require(\"nativescript-web-image-cache\");
    imageCacheModule.clearCache();
    \n

    for android, you need to initialize in the application onlaunch event before clearing the cache

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-sewoo-printer":{"name":"@ticnat/nativescript-sewoo-printer","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Sewoo Printer

    \n

    \"npm

    \n

    This plugin integrate your nativescript app with Sewoo LK-P43Ⅱ printer to print a normal text or a bmp.

    \n

    Prerequisites / Requirements

    \n

    You have to pair your device via bluetooth with the printer before you test the plugin.\nThis plugin is now working on android only

    \n

    Installation

    \n
    tns plugin add @ticnat/nativescript-sewoo-printer
    \n

    Usage

    \n

    First of all put these permissions in you AndroidManifest.xml file:

    \n
    <uses-permission android:name=\"android.permission.BLUETOOTH\" />
    <uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" />
    \n

    To Print Normal Text use:

    \n
    let printer = new SewooPrinter(\"windows-1256\");
    printer.print(\"Hello World\");
    \n

    To Print a BMP image:

    \n
    let printer = new SewooPrinter(\"windows-1256\");
    printer.printImg(bmp);
    \n

    for more information see the demo

    \n

    API Property

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertytypeDefaultDescription
    paperSizeenumPaperSizes.FourInchset the default paper size for the printer
    debugbooleanfalseset the plugin in debug mode
    charsetstring''set the plugin encoding charset
    \n

    API Functions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionDescriptionParams
    connect(address:string):voidconnect to a printer using its addressaddress:string ex: "00:13:7B:49:D3:1A"
    disconnect():voiddisconnect from a printer
    print(text: string): voidprint normal texttext : the text you want to print
    printImg(bitmap: globalAndroid.graphics.Bitmap, setExtraPaddingAfterPrint?: boolean, XResol?: number, YResol?: number, startX?: number, startY?: number): void;print normal bitmapbitmap: the image to print, setExtraPaddingAfterPrint: set extra padding after print default true, XResol: x resolution,YResol: y resolution startX:number specify the position on the paper to start print from on X axis default "0", startY:number specify the position on the paper to start print from on Y axis default "0"
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-open-app":{"name":"nativescript-open-app","version":"0.3.0","license":"MIT","readme":"

    NativeScript Open App plugin

    \n

    A NativeScript plugin for opening other applications on the device (with app store fallback)

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add nativescript-open-app
    \n

    Usage

    \n

    Android

    \n

    To open an app, you need its id (for example "com.facebook.katana" for Facebook and "com.twitter.android" for Twitter).\nYou can easily find it in app's URL on https://play.google.com.

    \n

    Examples

    \n

    Open Facebook app if it is installed on the device (open Facebook app's entry in Play Store otherwise):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;

    var installed = openApp(\"com.facebook.katana\");
    console.log(\"Is it installed? \" + installed);
    \n

    Open Facebook app if it is installed on the device (do nothing otherwise):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;

    var installed = openApp(\"com.facebook.katana\", false);
    console.log(\"Is it installed? \" + installed);
    \n

    Open Facebook app if it is installed on the device (open facebook.com otherwise):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;
    var utils = require(\"utils/utils\");

    var installed = openApp(\"com.facebook.katana\", false);
    if (!installed) {
        utils.openUrl(\"https://facebook.com\");
    }
    \n

    Simple TypeScript example:

    \n
    import { openApp } from \"nativescript-open-app\";

    openApp(\"com.facebook.katana\");
    \n

    iOS

    \n

    To open an app on iOS you need a schema registered by the app.\nAdditionally you are required to whitelist the schemas for all apps you want to be able to open. Add them to your app/App_Resources/iOS/Info.plist (and additionally include "itms-apps" schema used by the App Store):

    \n
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>itms-apps</string>
        <string>twitter</string>
      </array>
    \n

    Examples

    \n

    Open Facebook app if it is installed on the device (do nothing otherwise):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;

    var installed = openApp(\"fb://\");
    console.log(\"Is it installed? \" + installed);
    \n

    Open Facebook app if it is installed on the device (open Facebook app's entry in App Store otherwise).\nThe third argument to openApp is the app's id in App Store (you can easily find it in app's URL on https://itunes.apple.com):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;

    var installed = openApp(\"fb://\", true, \"284882215\");
    console.log(\"Is it installed? \" + installed);
    \n

    Open Facebook app if it is installed on the device (open facebook.com otherwise):

    \n
    var openApp = require(\"nativescript-open-app\").openApp;
    var utils = require(\"utils/utils\");

    var installed = openApp(\"fb://\", false);
    if (!installed) {
        utils.openUrl(\"https://facebook.com\");
    }
    \n

    Simple TypeScript example:

    \n
    import { openApp } from \"nativescript-open-app\";

    openApp(\"fb://\");
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-xmpp":{"name":"nativescript-angular-xmpp","version":"3.0.0","license":"Apache-2.0","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-multiple-env":{"name":"nativescript-dev-multiple-env","version":"2.0.0-beta5","license":"Apache-2.0","readme":"

    nativescript-dev-multiple-environments

    \n

    This Hook is made for using multiple environments within a nativescript application.

    \n

    What it does

    \n

    First it changes your packageId to whatever you have stated in your environment-rules.json

    \n

    it also copies any files you have suffixed with the name of the environemnt for example : App_Resources/Android/google-services.staging.json will get copied to App_Resources/Android/google-services.json before building.

    \n

    Selecting Environment

    \n

    Once you have a initial environment-rules.json file you can change between the environments using --env.use.ENV_NAME

    \n

    for example for ios:\ntns run ios --env.use.staging

    \n

    this can also be used with other --env args like:

    \n

    tns run ios --bundle --env.aot --env.uglify --env.use.release

    \n

    Environments

    \n

    a basic environment-rules.json file is generated for you it looks like this:

    \n

    {
        \"version\": \"1.0.0\",
        \"default\": \"staging\",
        \"extraPaths\": [
            'app/environments'
        ],
        \"environments\": [
            {
                name: \"staging\",
                packageId: \"org.nativescript.appName.staging\",
                copyRule: \"(.*\\\\.staging\\\\..*)\"
            },
            {
                name: \"release\",
                packageId: \"org.nativescript.appName.release\",
                copyRule: \"(.*\\\\.release\\\\..*)\"
            }
        ]
    }
    \n

    You can tweak this however you want, and add as many environments as you like.

    \n

    ExtraPaths is Optional, but can add multiple paths within the app. these will follow the same rules for the rules.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-xml2js":{"name":"nativescript-xml2js","version":"0.5.2","license":"MIT","readme":"

    nativescript-xml2js (based on node-xml2js)

    \n

    Ever had the urge to parse XML? And wanted to access the data in some sane,\neasy way? Don't want to compile a C parser, for whatever reason? Then xml2js is\nwhat you're looking for!

    \n

    Description

    \n

    Simple XML to JavaScript object converter. It supports bi-directional conversion.\nUses sax-js and\nxmlbuilder-js.

    \n

    Note: If you're looking for a full DOM parser, you probably want\nJSDom.

    \n

    Installation

    \n

    Simplest way to install nativescript-xml2js is to use npm, just npm install --save nativescript-xml2js which will download xml2js and all dependencies.

    \n

    Usage

    \n

    No extensive tutorials required because you are a smart developer! The task of\nparsing XML should be an easy one, so let's make it so! Here's some examples.

    \n

    Shoot-and-forget usage

    \n

    You want to parse XML as simple and easy as possible? It's dangerous to go\nalone, take this:

    \n
    var parseString = require('nativescript-xml2js').parseString;
    var xml = \"<root>Hello xml2js!</root>\"
    parseString(xml, function (err, result) {
        console.dir(result);
    });
    \n

    Can't get easier than this, right? This works starting with nativescript-xml2js 0.2.3.\nWith CoffeeScript it looks like this:

    \n
    {parseString} = require 'xml2js'
    xml = \"<root>Hello xml2js!</root>\"
    parseString xml, (err, result) ->
        console.dir result
    \n

    If you need some special options, fear not, nativescript-xml2js supports a number of\noptions (see below), you can specify these as second argument:

    \n
    parseString(xml, {trim: true}, function (err, result) {
    });
    \n

    Simple as pie usage

    \n

    That's right, if you have been using xml-simple or a home-grown\nwrapper, this was added in 0.1.11 just for you:

    \n
    var fs = require('fs'),
        xml2js = require('nativescript-xml2js');

    var parser = new xml2js.Parser();
    fs.readFile(__dirname + '/foo.xml', function(err, data) {
        parser.parseString(data, function (err, result) {
            console.dir(result);
            console.log('Done');
        });
    });
    \n

    Look ma, no event listeners!

    \n

    You can also use nativescript-xml2js from\nCoffeeScript, further reducing\nthe clutter:

    \n
    fs = require 'fs',
    xml2js = require 'nativescript-xml2js'

    parser = new xml2js.Parser()
    fs.readFile __dirname + '/foo.xml', (err, data) ->
      parser.parseString data, (err, result) ->
        console.dir result
        console.log 'Done.'
    \n

    But what happens if you forget the new keyword to create a new Parser? In\nthe middle of a nightly coding session, it might get lost, after all. Worry\nnot, we got you covered! Starting with 0.2.8 you can also leave it out, in\nwhich case nativescript-xml2js will helpfully add it for you, no bad surprises and\ninexplicable bugs!

    \n

    Parsing multiple files

    \n

    If you want to parse multiple files, you have multiple possibilities:

    \n
      \n
    • You can create one xml2js.Parser per file. That's the recommended one\nand is promised to always just work.
      • \n
    • You can call reset() on your parser object.
      • \n
    • You can hope everything goes well anyway. This behaviour is not\nguaranteed work always, if ever. Use option #1 if possible. Thanks!
      • \n
    \n

    So you wanna some JSON?

    \n

    Just wrap the result object in a call to JSON.stringify like this\nJSON.stringify(result). You get a string containing the JSON representation\nof the parsed object that you can feed to JSON-hungry consumers.

    \n

    Displaying results

    \n

    You might wonder why, using console.dir or console.log the output at some\nlevel is only [Object]. Don't worry, this is not because xml2js got lazy.\nThat's because Node uses util.inspect to convert the object into strings and\nthat function stops after depth=2 which is a bit low for most XML.

    \n

    To display the whole deal, you can use console.log(util.inspect(result, false, null)), which displays the whole result.

    \n

    So much for that, but what if you use\neyes for nice colored output and it\ntruncates the output with …? Don't fear, there's also a solution for that,\nyou just need to increase the maxLength limit by creating a custom inspector\nvar inspect = require('eyes').inspector({maxLength: false}) and then you can\neasily inspect(result).

    \n

    XML builder usage

    \n

    Since 0.4.0, objects can be also be used to build XML:

    \n
    var fs = require('fs'),
        xml2js = require('nativescript-xml2js');

    var obj = {name: \"Super\", Surname: \"Man\", age: 23};

    var builder = new xml2js.Builder();
    var xml = builder.buildObject(obj);
    \n

    At the moment, a one to one bi-directional conversion is guaranteed only for\ndefault configuration, except for attrkey, charkey and explicitArray options\nyou can redefine to your taste. Writing CDATA is supported via setting the cdata\noption to true.

    \n

    Processing attribute, tag names and values

    \n

    Since 0.4.1 you can optionally provide the parser with attribute name and tag name processors as well as element value processors (Since 0.4.14, you can also optionally provide the parser with attribute value processors):

    \n

    function nameToUpperCase(name){
        return name.toUpperCase();
    }

    //transform all attribute and tag names and values to uppercase
    parseString(xml, {
      tagNameProcessors: [nameToUpperCase],
      attrNameProcessors: [nameToUpperCase],
      valueProcessors: [nameToUpperCase],
      attrValueProcessors: [nameToUpperCase]},
      function (err, result) {
        // processed data
    });
    \n

    The tagNameProcessors and attrNameProcessors options\naccept an Array of functions with the following signature:

    \n
    function (name){
      //do something with `name`
      return name
    }
    \n

    The attrValueProcessors and valueProcessors options\naccept an Array of functions with the following signature:

    \n
    function (value, name) {
      //`name` will be the node name or attribute name
      //do something with `value`, (optionally) dependent on the node/attr name
      return value
    }
    \n

    Some processors are provided out-of-the-box and can be found in lib/processors.js:

    \n
      \n
    • \n

      normalize: transforms the name to lowercase.\n(Automatically used when options.normalize is set to true)

      \n
      • \n
    • \n

      firstCharLowerCase: transforms the first character to lower case.\nE.g. 'MyTagName' becomes 'myTagName'

      \n
      • \n
    • \n

      stripPrefix: strips the xml namespace prefix. E.g <foo:Bar/> will become 'Bar'.\n(N.B.: the xmlns prefix is NOT stripped.)

      \n
      • \n
    • \n

      parseNumbers: parses integer-like strings as integers and float-like strings as floats\nE.g. "0" becomes 0 and "15.56" becomes 15.56

      \n
      • \n
    • \n

      parseBooleans: parses boolean-like strings to booleans\nE.g. "true" becomes true and "False" becomes false

      \n
      • \n
    \n

    Options

    \n

    Apart from the default settings, there are a number of options that can be\nspecified for the parser. Options are specified by new Parser({optionName: value}). Possible options are:

    \n
      \n
    • attrkey (default: $): Prefix that is used to access the attributes.\nVersion 0.1 default was @.
      • \n
    • charkey (default: _): Prefix that is used to access the character\ncontent. Version 0.1 default was #.
      • \n
    • explicitCharkey (default: false)
      • \n
    • trim (default: false): Trim the whitespace at the beginning and end of\ntext nodes.
      • \n
    • normalizeTags (default: false): Normalize all tag names to lowercase.
      • \n
    • normalize (default: false): Trim whitespaces inside text nodes.
      • \n
    • explicitRoot (default: true): Set this if you want to get the root\nnode in the resulting object.
      • \n
    • emptyTag (default: ''): what will the value of empty nodes be.
      • \n
    • explicitArray (default: true): Always put child nodes in an array if\ntrue; otherwise an array is created only if there is more than one.
      • \n
    • ignoreAttrs (default: false): Ignore all XML attributes and only create\ntext nodes.
      • \n
    • mergeAttrs (default: false): Merge attributes and child elements as\nproperties of the parent, instead of keying attributes off a child\nattribute object. This option is ignored if ignoreAttrs is false.
      • \n
    • validator (default null): You can specify a callable that validates\nthe resulting structure somehow, however you want. See unit tests\nfor an example.
      • \n
    • xmlns (default false): Give each element a field usually called '$ns'\n(the first character is the same as attrkey) that contains its local name\nand namespace URI.
      • \n
    • explicitChildren (default false): Put child elements to separate\nproperty. Doesn't work with mergeAttrs = true. If element has no children\nthen "children" won't be created. Added in 0.2.5.
      • \n
    • childkey (default $$): Prefix that is used to access child elements if\nexplicitChildren is set to true. Added in 0.2.5.
      • \n
    • preserveChildrenOrder (default false): Modifies the behavior of\nexplicitChildren so that the value of the "children" property becomes an\nordered array. When this is true, every node will also get a #name field\nwhose value will correspond to the XML nodeName, so that you may iterate\nthe "children" array and still be able to determine node names. The named\n(and potentially unordered) properties are also retained in this\nconfiguration at the same level as the ordered "children" array. Added in\n0.4.9.
      • \n
    • charsAsChildren (default false): Determines whether chars should be\nconsidered children if explicitChildren is on. Added in 0.2.5.
      • \n
    • includeWhiteChars (default false): Determines whether whitespace-only\ntext nodes should be included. Added in 0.4.17.
      • \n
    • async (default false): Should the callbacks be async? This might be\nan incompatible change if your code depends on sync execution of callbacks.\nFuture versions of xml2js might change this default, so the recommendation\nis to not depend on sync execution anyway. Added in 0.2.6.
      • \n
    • strict (default true): Set sax-js to strict or non-strict parsing mode.\nDefaults to true which is highly recommended, since parsing HTML which\nis not well-formed XML might yield just about anything. Added in 0.2.7.
      • \n
    • attrNameProcessors (default: null): Allows the addition of attribute\nname processing functions. Accepts an Array of functions with following\nsignature:
      function (name){
          //do something with `name`
          return name
      }
      \nAdded in 0.4.14
      • \n
    • attrValueProcessors (default: null): Allows the addition of attribute\nvalue processing functions. Accepts an Array of functions with following\nsignature:
      function (name){
        //do something with `name`
        return name
      }
      \nAdded in 0.4.1
      • \n
    • tagNameProcessors (default: null): Allows the addition of tag name\nprocessing functions. Accepts an Array of functions with following\nsignature:
      function (name){
        //do something with `name`
        return name
      }
      \nAdded in 0.4.1
      • \n
    • valueProcessors (default: null): Allows the addition of element value\nprocessing functions. Accepts an Array of functions with following\nsignature:
      function (name){
        //do something with `name`
        return name
      }
      \nAdded in 0.4.6
      • \n
    \n

    Options for the Builder class

    \n

    These options are specified by new Builder({optionName: value}).\nPossible options are:

    \n
      \n
    • rootName (default root or the root key name): root element name to be used in case\nexplicitRoot is false or to override the root element name.
      • \n
    • renderOpts (default { 'pretty': true, 'indent': ' ', 'newline': '\\n' }):\nRendering options for xmlbuilder-js.\n
        \n
      • pretty: prettify generated XML
        • \n
      • indent: whitespace for indentation (only when pretty)
        • \n
      • newline: newline char (only when pretty)
        • \n
      \n
      • \n
    • xmldec (default { 'version': '1.0', 'encoding': 'UTF-8', 'standalone': true }:\nXML declaration attributes.\n
        \n
      • xmldec.version A version number string, e.g. 1.0
        • \n
      • xmldec.encoding Encoding declaration, e.g. UTF-8
        • \n
      • xmldec.standalone standalone document declaration: true or false
        • \n
      \n
      • \n
    • doctype (default null): optional DTD. Eg. {'ext': 'hello.dtd'}
      • \n
    • headless (default: false): omit the XML header. Added in 0.4.3.
      • \n
    • allowSurrogateChars (default: false): allows using characters from the Unicode\nsurrogate blocks.
      • \n
    • cdata (default: false): wrap text nodes in <![CDATA[ ... ]]> instead of\nescaping when necessary. Does not add <![CDATA[ ... ]]> if it is not required.\nAdded in 0.4.5.
      • \n
    \n

    renderOpts, xmldec,doctype and headless pass through to\nxmlbuilder-js.

    \n

    Updating to new version

    \n

    Version 0.2 changed the default parsing settings, but version 0.1.14 introduced\nthe default settings for version 0.2, so these settings can be tried before the\nmigration.

    \n
    var xml2js = require('nativescript-xml2js');
    var parser = new xml2js.Parser(xml2js.defaults[\"0.2\"]);
    \n

    To get the 0.1 defaults in version 0.2 you can just use\nxml2js.defaults["0.1"] in the same place. This provides you with enough time\nto migrate to the saner way of parsing in nativescript-xml2js 0.2. We try to make the\nmigration as simple and gentle as possible, but some breakage cannot be\navoided.

    \n

    So, what exactly did change and why? In 0.2 we changed some defaults to parse\nthe XML in a more universal and sane way. So we disabled normalize and trim\nso xml2js does not cut out any text content. You can reenable this at will of\ncourse. A more important change is that we return the root tag in the resulting\nJavaScript structure via the explicitRoot setting, so you need to access the\nfirst element. This is useful for anybody who wants to know what the root node\nis and preserves more information. The last major change was to enable\nexplicitArray, so everytime it is possible that one might embed more than one\nsub-tag into a tag, xml2js >= 0.2 returns an array even if the array just\nincludes one element. This is useful when dealing with APIs that return\nvariable amounts of subtags.

    \n

    Running tests, development

    \n

    \"Build\n\"Coverage\n\"Dependency

    \n

    The development requirements are handled by npm, you just need to install them.\nWe also have a number of unit tests, they can be run using npm test directly\nfrom the project root. This runs zap to discover all the tests and execute\nthem.

    \n

    If you like to contribute, keep in mind that nativescript-xml2js is written in\nCoffeeScript, so don't develop on the JavaScript files that are checked into\nthe repository for convenience reasons. Also, please write some unit test to\ncheck your behaviour and if it is some user-facing thing, add some\ndocumentation to this README, so people will know it exists. Thanks in advance!

    \n

    Getting support

    \n

    Please, if you have a problem with the library, first make sure you read this\nREADME. If you read this far, thanks, you're good. Then, please make sure your\nproblem really is with nativescript-xml2js. It is? Okay, then I'll look at it. Send me a\nmail and we can talk. Please don't open issues, as I don't think that is the\nproper forum for support problems. Some problems might as well really be bugs\nin nativescript-xml2js, if so I'll let you know to open an issue instead :)

    \n

    But if you know you really found a bug, feel free to open an issue instead.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-shadow":{"name":"nativescript-vue-shadow","version":"0.1.0","license":"MIT","readme":"

    Nativescript-Vue Shadow Directive Plugin \"apple\" \"android\"

    \n

    \"NPM\n\"Downloads\"\n\"Twitter

    \n

    This repo is a port to Nativescript-Vue of @JoshDSommer's NativeScript Angular Shadow Directive project. As such, a good portion of the code is inspired by it, but many changes were made to fit into how Vue does Directives.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    npm install nativescript-vue-shadow
    \n

    Demo

    \n

    \"Screenshot\"

    \n

    How to use it

    \n

    This is a Vue directive to make your life easier when it comes to using native shadows with Nativescript-Vue.

    \n

    Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

    \n

    With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS. On the other hand, if you care about some of the details, you will still be able to provide certain extra attributes and they will superseed the default ones.

    \n

    However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

    \n

    Import the Directive into main.js

    \n
    import NSVueShadow from 'nativescript-vue-shadow'
    Vue.use(NSVueShadow)
    \n

    Use in your view or component

    \n

    Simple attribute for v-shadow:

    \n
    <Label v-shadow=\"2\"></Label>
    \n

    You can property bind it in your template tag. This can be a string, number or object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"myCustomData\"></Label>
    \n

    Then in your script tag you can do something like this where we bind to the object:

    \n
    import { AndroidData, ShapeEnum } from \"nativescript-vue-shadow\";
    // ...
    export default class MyComponent extends Vue {
      private myCustomData: AndroidData = {
        elevation: 6,
        bgcolor: \"#ff1744\",
        shape: ShapeEnum.OVAL
      };
      // ...
    }
    \n

    You can also provide details directly in your markup by using the v-shadow directive with an explicit object ( AndroidData | IOSData ):

    \n
    <Label v-shadow=\"{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }\"></Label>
    \n

    There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

    \n

    The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported).

    \n

    List of attributes

    \n

    The table below list and describes all possible attributes as well as show which platform supports each one of them:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeTypeDefaultPlatformDescription
    elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations. FYI, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
    pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
    shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE''RECTANGLE'AndroidDetermines the shape of the view and overrides its format styles.
    bgcolorstring (#RGB)AndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
    cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used. FYI, it's calculated in DIPs (or DPs, density independent pixels).
    translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
    pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
    forcePressAnimationbooleanfalseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
    maskToBoundsbooleanfalseiOSDetermines whether the shadow will be limited to the view margins.
    shadowColorstring (#RGB)iOSDetermines shadow color. Shadow won't be applied if the view already has background.
    shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
    shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
    shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
    useShadowPathbooleantrueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
    rasterizebooleanfalseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
    \n

    Pre-defined elevations

    \n

    If you want to be consistent with the Material Design specification but you're sick of trying to memorize which elevation your view should have. We've put together a list of pre-defined elevations:

    \n
      \n
    • SWITCH: 1
      • \n
    • CARD_RESTING: 2
      • \n
    • RAISED_BUTTON_RESTING: 2
      • \n
    • SEARCH_BAR_RESTING: 2
      • \n
    • REFRESH_INDICADOR: 3
      • \n
    • SEARCH_BAR_SCROLLED: 3
      • \n
    • APPBAR: 4
      • \n
    • FAB_RESTING: 6
      • \n
    • SNACKBAR: 6
      • \n
    • BOTTOM_NAVIGATION_BAR: 8
      • \n
    • MENU: 8
      • \n
    • CARD_PICKED_UP: 8,
      • \n
    • RAISED_BUTTON_PRESSED: 8
      • \n
    • SUBMENU_LEVEL1: 9
      • \n
    • SUBMENU_LEVEL2: 10
      • \n
    • SUBMENU_LEVEL3: 11
      • \n
    • SUBMENU_LEVEL4: 12
      • \n
    • SUBMENU_LEVEL5: 13
      • \n
    • FAB_PRESSED: 12
      • \n
    • NAV_DRAWER: 16
      • \n
    • RIGHT_DRAWER: 16
      • \n
    • MODAL_BOTTOM_SHEET: 16
      • \n
    • DIALOG: 24
      • \n
    • PICKER: 24
      • \n
    \n

    If you don't even want to check it out every time you have to shadow an element, just import the Elevation enum and enjoy :)

    \n

    Component

    \n
    import { Elevation } from \"nativescript-vue-shadow\";

    export default class MyComponent extends Vue {
      // ...
      private elevation: number = Elevation.SNACKBAR;
      // ...
    }
    \n

    Override Android default StateListAnimator

    \n

    Android buttons are split into three categories: floating, raised and flat. Different from labels and other ui elements, each button category has its own state animator. So, when buttons are tapped, Android does affect their elevation (and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to resting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding the shadow stablished by this plugin.

    \n

    This plugin replaces the default StateListAnimator with one that gets back to the values you provide for elevation and translationZ.

    \n

    Feel free to fill submit a PR if you want the flexibility of defining your own StateListAnimator. The motivation so far was simply put this plugin to work with buttons without changing the original state once they are clicked.

    \n

    It's also possible to set this StateListAnimator to any View, making it behave like a button.

    \n

    Plugin Development Work Flow

    \n
      \n
    • Clone repository to your machine.
      • \n
    • Run npm install in base directory of project
      • \n
    • Change to Demo directory and then run npm install
      • \n
    • Run and deploy to your device or emulator with npm run serve:android or npm run serve:ios. (use debug:android or debug:ios to attach to devtools)
      • \n
    \n

    Changelog

    \n
      \n
    • 0.1.0 Initial implementation
      • \n
    \n

    License

    \n

    MIT License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/class-mixins":{"name":"@nativescript-community/class-mixins","version":"1.0.0","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dev4ndy/markdown":{"name":"@dev4ndy/markdown","version":"1.0.0","license":"Apache-2.0","readme":"

    @dev4ndy/markdown

    \n
    ns plugin add @dev4ndy/markdown
    \n

    A plugin for native markdown rendering.

    \n

    Completely based on this code code.

    \n

    Note: All credit to @flore2003, what we did here was to start using the plugin template (plugin-seed), update it and make it work with NS8... This plugin has only been tested on NS8.

    \n

    Usage

    \n

    Angular

    \n
      \n
    1. Register the element in apps module
      2. \n
    \n
    registerElement(\"Markdown\", () => require(\"@dev4ndy/markdown\").Markdown);
    @NgModule({
       ...
    });
    \n
      \n
    1. Now you can use it in you template
      2. \n
    \n
    <Markdown [markdown]=\"'_This_ should be **bold**!'\"></Markdown>
    \n
    \n

    Vue

    \n
      \n
    1. Register the element in the vue environment
      2. \n
    \n
    Vue.registerElement( 'Markdown', () => require(\"@dev4ndy/markdown\").Markdown )
    \n
    \n

    You need to add xmlns:mv="nativescript-markdown-view" to your page tag, and then simply use <mv:Markdown/> in order to add the widget to your page.

    \n
    <!-- test-page.xml -->
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:mv=\"markdown\">
        <StackLayout class=\"p-20\">
            <mv:Markdown markdown=\"_This_ should be **bold**!\" />
        </StackLayout>
    </Page>
    \n
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    markdown""The markdown to be rendered on screen
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-pubnub":{"name":"ns-pubnub","version":"1.0.5","license":"Apache-2.0","readme":"

    NativeScript PubNub \"apple\"

    \n

    THIS IS NOT READY FOR PRODUCTION, JUST FOR DEVELOPING/TESTING

    \n

    This plugin is allows you to use the PubNub Objective-C SDK in your NativeScript app.

    \n

    Installation

    \n
    tns plugin add ns-pubnub
    \n

    Usage

    \n
    // import
    import { Pubnub, PubnubConfig, PubnubOptions } from 'ns-pubnub';

    // configure
    const pubnubConfig: PubnubConfig = {
      publishKey: 'demo',
      subscribeKey: 'demo'
    }

    const pubnubOptions: PubnubOptions = {
      cipherKey: 'a12345',
      suppressLeaveEvents: false
    }

    let pubnub = new Pubnub(pubnubConfig, pubnubOptions);

    // subscribe
    pubnub.subscribe(channels: string[], withPresence: boolean)

    pubnub.subscribeToChannelGroups(groups: string[], shouldObservePresence: boolean)

    // publish message
    pubnub.publish('my_channel', \"message\", (status) => {
      conosle.log(status.information)
    })

    // listen to receive events
    pubnub.on('receiveMessage', (data) => {
      console.log(data)
    })
    pubnub.on('receivePresenceEvent', (data) => {
      console.log(data)
    })
    pubnub.on('receiveStatus', (data) => {
      console.log(data)
    })

    // unsubscribe
    pubnub.unsubscribe(channels: string[], withPresence: boolean)

    pubnub.unsubscribeFromChannelGroups(groups: string[], withPresence: boolean)

    pubnub.unsubscribeFromAll()
    \n

    Options (PubnubOptions)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDefaultDescription
    cipherKeystring_Key which is used to encrypt messages pushed to PubNub service and decrypt messages received from live feeds on which client subscribed at this moment.
    stripMobilePayloadboolean_Stores whether client should strip out received messages (real-time and history) from data which has been appended by client (like mobile payload for push notifications).
    subscribeMaximumIdleTimenumber310Maximum number of seconds which client should wait for events from live feed.
    nonSubscribeRequestTimeoutnumber10Number of seconds which is used by client during non-subscription operations to check whether response potentially failed with timeout or not.
    presenceHeartbeatValuenumber_Number of seconds which is used by server to track whether client still subscribed on remote data objects live feed or not.
    presenceHeartbeatIntervalnumber_Number of seconds which is used by client to issue heartbeat requests to PubNub service.
    keepTimeTokenOnListChangebooleantrueWhether client should keep previous time token when subscribe on new set of remote data objects live feeds.
    catchUpOnSubscriptionRestorebooleantrueWhether client should try to catch up for events which occurred on previously subscribed remote data objects feed while client was off-line.
    applicationExtensionSharedGroupIdentifierstring_Reference on group identifier which is used to share request cache between application extension and it's containing application. This property should be set to valid registered group only if PubNub client is used inside of application's extension (iOS 8.0+, macOS 10.10+).
    requestMessageCountThresholdnumberNumber of maximum expected messages from PubNub service in single response.
    maximumMessagesCacheSizenumber100Messages de-duplication cache size
    completeRequestsBeforeSuspensionbooleantrueWhether client should try complete all API call which is done before application will be completely suspended.
    suppressLeaveEventsboolean_Whether client shouldn't send presence leave events during unsubscription process.
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-generate-pdf":{"name":"@knotes/nativescript-generate-pdf","version":"1.0.2","license":"Apache-2.0","readme":"

    @knotes/nativescript-generate-pdf

    \n

    This plugin only works for NativeScript 7+.

    \n
    ns plugin add @knotes/nativescript-generate-pdf
    \n

    Generate pdf file with a webview and html.

    \n

    All you need to do is rendering your html with a webview and pass the webview to the plugin.

    \n

    For iOS, plugin returns the path of the generated PDF.

    \n

    For Android, it brings up the printer screen where you can save as PDF (Please note the printer screen does not work in simulator, you will need a real device).

    \n

    Screenshot

    \n

    \n

    >> Check out the generated pdf<<

    \n

    Usage

    \n

    Check out the demo folder.

    \n
    import { GeneratePdf } from '@knotes/nativescript-generate-pdf';

    function onWebViewLoaded(args: LoadEventData) {
        const webView = (<WebView>args.object).nativeView;
        // For iOS, use the file path returned by createPdf.
        new GeneratePdf().createPdf(webView, 'MyPdfFileName');
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@awarns/wear-os":{"name":"@awarns/wear-os","version":"1.0.0","license":"Apache-2.0","readme":"

    @awarns/wear-os

    \n

    \"npm\n\"npm\"

    \n

    This module allows to collect data from the sensors of an Android WearOS smartwatch,\nand enables the communication between both devices (i.e., smartphone and smartwatch).

    \n

    This plugin acts as a wrapper on top of the nativescript-wearos-sensors plugin,\nwhich enables the communication and the data collection from a paired WearOS smartwatch. In order to use these features, a WearOS smartwatch\nmust be paired with the smartphone and have installed a counterpart application, developed using the WearOSSensors WearOS library.

    \n
    \n

    Note: check the requirements of both libraries for more detailed information:

    \n\n
    \n

    Install the plugin using the following command line instruction:

    \n
    ns plugin add @awarns/wear-os
    \n

    Usage

    \n

    Setup

    \n

    This plugin requires you to register its loader during the framework initialization, like this:

    \n
    // ... platform imports
    import { awarns } from '@awarns/core';
    import { demoTasks } from '../tasks';
    import { demoTaskGraph } from '../graph';
    import { registerWearOSPlugin } from '@awarns/wear-os';

    awarns
      .init(
        demoTasks,
        demoTaskGraph,
        [
          registerWearOSPlugin(config), // Parameter config is optional
        ]
      )
      // ... handle initialization promise
    \n

    Plugin loader parameter (WearOSPluginConfig):

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParameterTypeDescription
    sensors?WatchSensor[]Enable the specified sensors. By default, all sensors are enabled.
    enablePlainMessaging?booleanEnable the plain messaging communication mechanism. Default: false.
    enableWearCommands?booleanEnable the command mechanism that allows to start the data collection on the watch side. Default: false.
    \n

    In addition, you also have to specify if you want to use these plugin features and which watch you want to use. This offers to possibility to use or not\nthese plugin features without modifying the task graph definition. For example, you can disable the features if there isn't a paired watch available. Here is\nan example:

    \n
    import { getConnectedWatches, setWatchFeaturesState, useWatch } from '@awarns/wear-os';

    export async function setupWatchToUse(): Promise<void> {
      const watches = await getConnectedWatches();

      if (watches.length === 0) {
        console.log('No WearOS watches connected! Disabling wear-os plugin features...');
        setWatchFeaturesState(false);
        return;
      }

      const watch = watches[0];
      console.log(`Setup wear-os plugin to use ${watch.name} watch!`);
      setWatchFeaturesState(true);
      useWatch(watch);
    }
    \n

    Tasks

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Task nameDescription
    startDetecting{prefix}Watch{sensor}ChangesAllows to start the data collection for a sensor with a specific configuration (see below). The prefix can be used to distinguish among different configurations.
    stopDetectingWatch{sensor}ChangesThe complement to the previous task. Allows to stop collecting data from sensor.
    sendPlainMessageToWatchAllows to send a string-based message to the paired smartwatch. An example of use could be to send information for updating the UI.
    sendPlainMessageToWatchAndAwaitResponseAllows to send a string-based message to the paired smartwatch and to wait for a response from it.
    \n

    Start data collection for a sensor with specific configuration

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      startDetectingWatchSensorChangesTask,
      WatchSensor,
      WatchSensorDelay,
    } from '@awarns/wear-os';

    export const demoTasks: Array<Task> = [
      startDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER, { sensorDelay: WatchSensorDelay.NORMAL, batchSize: 50 }),
      // startDetectingWatchAccelerometerChanges

      startDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER, { sensorDelay: WatchSensorDelay.FASTEST, batchSize: 50 }, 'Fast'),
      // startDetectingFastWatchAccelerometerChanges

      startDetectingWatchSensorChangesTask(WatchSensor.HEART_RATE, { sensorDelay: WatchSensorDelay.NORMAL, batchSize: 5 }),
      // startDetectingWatchHeartRateChanges

      startDetectingWatchSensorChangesTask(WatchSensor.GEOLOCATION, { sensorDelay: 5000, batchSize: 5 }),
      // startDetectingWatchGeolocationChanges
    ]
    \n
    \n

    Warning: the data collection for a WatchSensor can only be started once, if startDetectingFastWatchAccelerometerChanges is executed after\nstartDetectingWatchAccelerometerChanges and while the collection is in progress, startDetectingFastWatchAccelerometerChanges will be ignored.

    \n

    Therefore, if you want to dynamically change the collection's configuration while the collection is in progress, you will have to stop the collection\nand start it again with the new desired configuration. However, due to the underlying communication APIs (i.e., Bluetooth), the order of the tasks is not guaranteed.\nThis means that if the stop and start tasks are executed very close in time, the start task could be executed before the stop task in the smartwatch.\nIf you really need to change the collection's configuration, you should wait a certain amount of time (e.g., 1 second) after the execution of the stop task before executing the start task.

    \n
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter nameTypeDescription
    sensorWatchSensorSensor to collect data from. See below.
    providerConfigurationProviderConfigurationCollection's configuration of the task. See below.
    prefix (Optional)stringAdds the prefix to the name of the task. Useful to create multiple tasks for the same sensor but with multiple configurations.
    \n
      \n
    • WatchSensor
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ValueDescription
    ACCELEROMETERRepresents the watch's accelerometer sensor.
    GYROSCOPERepresents the watch's gyroscope sensor.
    MAGNETOMETERRepresents the watch's magnetometer sensor.
    HEART_RATERepresents the watch's heart rate monitor.
    GEOLOCATIONRepresents the watch's GPS system.
    \n
      \n
    • ProviderConfiguration
      • \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    sensorDelayWatchSensorDelay | numberIndicates the time between two consecutive samples. It can be a WatchSensorDelay (i.e., UI, NORMAL, GAME or FASTEST) or a value in milliseconds. It is highly recommended to use values in milliseconds (and higher than 1000 ms) with WatchSensor.GEOLOCATION due to WatchSensorDelay it's oriented for high sampling rate sensors.
    batchSizenumberIndicates the amount of samples to be delivered in each record.
    \n
    \n

    Note: the sensorDelay is taken as a suggestion by the Android OS. Samples could be delivered at a smaller or higher rate.

    \n
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

    \n

    However, once the start task has finished running, relevant events will be emitted by the internal listeners while the data collection is active. These are listed below.

    \n
    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingWatchAccelerometerChanges'));
    on('startEvent', run('startDetectingWatchGyroscopeChanges'));
    on('startEvent', run('startDetectingWatchMagnetometerChanges'));
    on('startEvent', run('startDetectingWatchHeartRateChanges'));
    on('startEvent', run('startDetectingWatchGeolocationChanges'));

    on('watchAccelerometerSamplesAcquired', run('writeRecords'));
    on('watchGyroscopeSamplesAcquired', run('writeRecords'));
    on('watchMagnetometerSamplesAcquired', run('writeRecords'));
    on('watchHeartRateSamplesAcquired', run('writeRecords'));
    on('watchGeolocationAcquired', run('writeRecords'));
    on('watchGeolocationAcquired', run('checkAreaOfInterestProximity', { nearbyRange: 100, offset: 15 }));
    \n

    Note: To use the writeRecords or the checkAreaOfInterestProximity task, the persistence or geofencing package must be installed and configured, respectively. See persistence and geofencing package docs.

    \n
    \n

    Stop data collection for a sensor

    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      stopDetectingWatchSensorChangesTask,
      WatchSensor,
    } from '@awarns/wear-os';

    export const demoTasks: Array<Task> = [
      stopDetectingWatchSensorChangesTask(WatchSensor.ACCELEROMETER), // stopDetectingWatchAccelerometerChanges
      stopDetectingWatchSensorChangesTask(WatchSensor.GYROSCOPE),     // stopDetectingWatchGyroscopeChanges
      stopDetectingWatchSensorChangesTask(WatchSensor.MAGNETOMETER),  // stopDetectingWatchMagnetometerChanges
      stopDetectingWatchSensorChangesTask(WatchSensor.HEART_RATE),    // stopDetectingWatchHeartRateChanges
      stopDetectingWatchSensorChangesTask(WatchSensor.GEOLOCATION),   // stopDetectingWatchGeolocationChanges
    ];
    \n
    \n

    Note: a stop task of a specific WatchSensor can be used to stop the collection started by any start task\nfor that WatchSensor no matter the specific configuration.

    \n
    \n

    Task generator parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter nameTypeDescription
    sensorWatchSensorSensor to stop the data collection from.
    \n

    Task output events:

    \n
    \n

    These tasks don't produce significant events after they complete their execution aside from the regular {task-name}Finished events.

    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('startDetectingWatchAccelerometerChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingWatchGyroscopeChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingWatchMagnetometerChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingWatchHeartRateChanges').every(1, 'minute'));
    on('startEvent', run('startDetectingWatchGeolocationChanges').every(1, 'minute'));

    on('watchAccelerometerSamplesAcquired', run('stopDetectingWatchAccelerometerChanges'));
    on('watchGyroscopeSamplesAcquired', run('stopDetectingWatchGyroscopeChanges'));
    on('watchMagnetometerSamplesAcquired', run('stopDetectingWatchMagnetometerChanges'));
    on('watchHeartRateSamplesAcquired', run('stopDetectingWatchHeartRateChanges'));
    on('watchGeolocationAcquired', run('stopDetectingWatchGeolocationChanges'));
    \n

    Note: it makes no sense to use these tasks without using before their complementary tasks to start the data collection.

    \n
    \n

    Send a message to the paired watch

    \n
    \n

    Note: to be able to use this feature, the messaging feature must be enabled.

    \n
    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      sendPlainMessageToWatchTask
    } from '@awarns/wear-os';

    export const demoTasks: Array<Task> = [
      sendPlainMessageToWatchTask() // sendPlainMessageToWatch
    ];
    \n

    Task generator parameters:

    \n
    \n

    This task generators take no parameters

    \n
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('sendPlainMessageToWatch', {
      plainMessage: {                                 
        message: 'Hi from the smartphone!!'
      }
    }).every(1, 'minute'));

    on('plainMessageSent', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Send a message to the paired watch and wait for a response

    \n
    \n

    Note: to be able to use this feature, the messaging feature must be enabled.

    \n
    \n

    To register these tasks for their use, you just need to import them and call their generator functions inside your application's task list:

    \n
    import { Task } from '@awarns/core/tasks';
    import {
      sendPlainMessageToWatchAndAwaitResponseTask
    } from '@awarns/wear-os';

    export const demoTasks: Array<Task> = [
      sendPlainMessageToWatchAndAwaitResponseTask() // sendPlainMessageToWatchAndAwaitResponse
    ];
    \n

    Task generator parameters:

    \n
    \n

    This task generators take no parameters

    \n
    \n

    Task output events:

    \n\n
    \n

    Example usage in the application task graph:

    \n
    on('startEvent', run('sendPlainMessageToWatchAndAwaitResponse', {
      plainMessage: {
        message: 'Tell me something ;)'
      },
      timeout: 3000
    }).every(1, 'minute'));

    on('plainMessageSentAndResponseReceived', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Send a message from an event's data

    \n
    \n

    Note: to be able to use this feature, the messaging feature must be enabled.

    \n
    \n

    You can also invoke these tasks by injecting the message in the event that triggers their execution. This allows to send messages in a more flexible way (i.e., no need to specify\nthe message in the task graph).

    \n
    \n

    Example usage:

    \n
    import { awarns } from '@awarns/core';
    import { PlainMessage } from '@awarns/wear-os';

    export function sendMessage(message: PlainMessage) {
     awarns.emitEvent('sendMessage', {
       data: message
     });
    }
    \n

    Then, in the task graph:

    \n
    on('sendMessage', run('sendPlainMessageToWatch'));
    \n
    \n

    Receive watch-triggered message

    \n
    \n

    Note: to be able to use this feature, the messaging feature must be enabled.

    \n
    \n

    The watch can also send message to the smartphone by its own (i.e., no need to receive a message from the smartphone first to then reply). When those messages are received\nby the smartphone, the plainMessageReceivedEvent is emitted.

    \n
    \n

    Example usage in the application task graph:

    \n
    on('plainMessageReceived', run('writeRecords'));
    \n

    Note: To use the writeRecords task, the persistence package must be installed and configured. See persistence package docs.

    \n
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NamePayloadDescription
    watchAccelerometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of an accelerometer sensor.
    watchGyroscopeSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a gyroscope sensor.
    watchMagnetometerSamplesAcquiredTriAxialContains a list of samples with the x, y, and z values of a magnetometer sensor.
    watchHeartRateSamplesAcquiredHeartRateContains a list with the values of a heart rate sensor.
    watchGeolocationAcquiredGeolocation | Array<Geolocation>Contains one or more GNSS locations. If the batchSize is set to 1, the payload will be a Geolocation record. Otherwise, the payload will be a Geolocation array.
    plainMessageSentMessageSentContains the content of the message sent to the watch.
    plainMessageSentAndResponseReceivedMessageReceivedContains the content of the message sent to the watch and the response from it.
    plainMessageReceivedMessageReceivedContains the content of a message received from the watch.
    \n

    Records

    \n

    TriAxial

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringOne of the following values: watch-accelerometer, watch-gyroscope, or watch-magnetometer.
    changeChangeAlways NONE.
    timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
    samplesTriAxialSample[]List with the collected samples.
    \n
    TriAxialSample
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    xnumberValue x of the sensor.
    ynumberValue y of the sensor.
    znumberValue z of the sensor.
    timestampnumberThe local time (UNIX timestamp) when the sample was collected.
    \n

    HeartRate

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways watch-heart-rate.
    changeChangeAlways NONE.
    timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
    samplesHeartRateSample[]List with the collected samples.
    \n
    HeartRateSample
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    valuenumberHeart rate value reported by the sensor.
    timestampnumberThe local time (UNIX timestamp) when the sample was collected.
    \n

    Geolocation

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways watch-geolocation.
    changeChangeAlways NONE.
    timestampDateThe local time when the data was collected. It is equal to the time of the first sample in the record.
    latitudenumberLatitude reported by the GPS.
    longitudenumberLongitude reported by the GPS.
    altitudenumberAltitude reported by the GPS.
    verticalAccuracynumberThe estimated error in the latitude.
    horizontalAccuracynumberThe estimated error in the longitude.
    speednumberThe estimated speed of the device when the location was acquired.
    directionnumberThe estimated direction of the device when the location was acquired.
    \n

    MessageSent

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways plain-message-sent.
    changeChangeAlways NONE.
    timestampDateThe local time when the message was sent.
    contentPlaiMessageContent of the message sent.
    \n
    PlainMessage
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    messagestringThe content of the message.
    inResponseTo?PlainMessageCan contain a PlainMessage to indicate that the current message is a response to the inResponseTo message.
    \n

    MessageReceived

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    idstringRecord's unique id.
    typestringAlways plain-message-received.
    changeChangeAlways NONE.
    timestampDateThe local time when the message was sent.
    contentReceivedMessageContent of the received message.
    \n
    ReceivedMessage
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    senderNodeIdstringId of the watch that sent the message.
    plainMessagePlainMessageMessage received.
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuno-morais/nativescript-twilio":{"name":"@nuno-morais/nativescript-twilio","version":"1.0.1","license":"Apache-2.0","readme":"

    Nativescript Twilio

    \n

    This plugin allows to create video calls using Twilio on iOS and Android

    \n

    How does it work?

    \n

    Twilio has to verify a user before they can join a room. You can generate a token and select a room for them to join a room.

    \n

    Requirements

    \n
      \n
    1. Make an account on twilio.com
      2. \n
    2. Create a Programmable Video application. You'll receive an api key, auth token, and account sid.
      3. \n
    3. This will require minimum server knowledge. I used node. You can find further instructions here https://www.twilio.com/docs/api/video/identity also here https://github.com/TwilioDevEd/video-access-token-server-node
      4. \n
    \n

    Install

    \n
    ns plugin add @nuno-morais/nativescript-twilio
    \n

    Usage

    \n
      \n
    1. In AndroidManifest.xml
      2. \n
    \n
    <uses-permission android:name=\"android.permission.CAMERA\" />

    <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
    \n
      \n
    1. In Info.plist
      2. \n
    \n
    <key>NSCameraUsageDescription</key>
    <string>Why are you requesting permissions for camera?</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Why are you requesting permissions for mic?</string>
    \n
      \n
    1. \n

      Create a view

      \n

      3.1. Vanilla

      \n
      <twilio:VideoView row=\"0\" id=\"local-video\" ></twilio:VideoView>
      <twilio:VideoView row=\"1\" id=\"remote-video\" ></twilio:VideoView>
      \n

      3.2. Angular

      \n
      <TwilioVideoView #localVideoView row=\"0\" id=\"local-video\"></TwilioVideoView>
      <TwilioVideoView #remoteVideoView row=\"1\" id=\"remote-video\"></TwilioVideoView>
      \n
      2. \n
    2. \n

      Generate a token

      \n
      async getToken(): Promise<string> {
          const userName = 'awesomename22';
          return await Http.getString({
              url: `https://251c4d52a840.ngrok.io/token?identity=${userName}`,
              method: 'GET',
              headers: { 'Content-Type': 'application/json' },
          }).catch((e) => {
              console.error(e);
              return null;
          });
      }
      \n
      3. \n
    3. \n

      Request permissions

      \n
      await VideoAudioPermissions.checkAll();

      const messageAudio = 'Message to request audio';
      const messageVideo = 'Message to request camera';

      await VideoAudioPermissions.requestAll(messageAudio, messageVideo);
      \n
      4. \n
    4. \n

      Create a VideoActivity

      \n
          const localVideo = this.page.getViewById('local-video') as VideoView;
      \tconst remoteView = this.page.getViewById('remote-video') as VideoView;
      \tthis.videoActivity = new VideoActivity(localVideo, [remoteView]);
          this.videoActivity.connect('testing-room', token, { video: true, audio: true });
      \n
      5. \n
    \n

    Functionalities:

    \n
      \n
    • startPreview(): Promise<void>;
      • \n
    • connect(room: string, accessToken: string, options: { video: boolean; audio: boolean }): Promise<void>;
      • \n
    • disconnect(): Promise<void>;
      • \n
    • mute();
      • \n
    • unmute();
      • \n
    • disableCamera();
      • \n
    • enableCamera();
      • \n
    • switchCamera();
      • \n
    • subscribeOnRemoteParticipantConnect(fn: (participantName: string) => void);
      • \n
    • subscribeOnRemoteParticipantDisconnect(fn: (participantName: string) => void);
      • \n
    • subscribeOnLocalParticipantConnect(fn: (participantName: string) => void);
      • \n
    • subscribeOnLocalParticipantDisconnect(fn: (participantName: string) => void);
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-soft-keyboard":{"name":"@codesthings/nativescript-soft-keyboard","version":"2.0.5","license":"Apache-2.0","readme":"

    History

    \n

    Forked from https://github.com/liuy97/nativescript-soft-keyboard

    \n

    Changes

    \n
      \n
    • Inlined the AAR dependency for keyboardheightprovider due to bintray sunset.\n
        \n
      • Original source here: https://github.com/Crysis21/KeyboardHeightProvider
        • \n
      \n
      • \n
    • Scoped to my npm org & bumped.
      • \n
    \n

    Nativescript soft-keyboard

    \n

    It is a challenge to get height of soft keyboard in Android and IOS. Android has not provided a direct way to read its height. But Nativescript app sometimes needs this information to achieve a good user interface.

    \n

    Break changes

    \n

    nativescript-soft-keyboard@2 for Nativescript@7

    \n

    nativescript-soft-keyboard@1 for Nativescript version < 7

    \n

    Installation

    \n
    tns plugin add nativescript-soft-keyboard
    \n

    Usage

    \n
    registerSoftKeyboardCallback((h) => console.log(h));
    \n

    API

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    functionparameterDescription
    registerSoftKeyboardCallbackcallbackregister a callback for new height of soft keyboard
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsplugtail":{"name":"nsplugtail","version":"0.2.0","license":"ISC","readme":"

    NSPlugTail - NativeScript Plugin Tail

    \n

    Tool for inspecting your package.json NativeScript plugins updates.

    \n

    Usage

    \n
      npx nsplugtail [<path-to-package.json>]
    \n

    <path-to-package.json> can be either RAW web served file (git raw link) or local present file\nif path to package.json is ommitted, current working directory is used (appended by package.json)

    \n

    Info

    \n

    Tool is filtering dependencies for patterns:

    \n
      \n
    • nativescript
      • \n
    • google
      • \n
    • firebase\nand following package config keys has to be set:
      • \n
    • name
      • \n
    • version
      • \n
    • description
      • \n
    • author
      • \n
    • dependencies
      • \n
    \n

    Issues

    \n

    Use GitHub Issues

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nivinjoseph/n-mobile":{"name":"@nivinjoseph/n-mobile","version":"1.0.7","license":"MIT","readme":"

    n-mobile

    \n

    Mobile application framework using Nativescript and Vue

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/debug-ios":{"name":"@nativescript/debug-ios","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/debug-ios

    \n

    Advanced iOS debugging made possible via Flex.

    \n
    npm install @nativescript/debug-ios -D
    \n

    Usage

    \n
    import { NativeScriptDebugIOS } from '@nativescript/debug-ios';

    NativeScriptDebugIOS.show();
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-dev/multiple-environments":{"name":"@nativescript-dev/multiple-environments","version":"1.0.0","license":"Apache-2.0","readme":"

    All credits to Brendan Ingham, original creator of this amazing hook.

    \n

    @nativescript-dev/multiple-environments

    \n

    This Hook is made for using multiple environments within a nativescript application.

    \n

    Actually this is a copy of nativescript-dev-multiple-environments adapted to work on NS 7 CLI.

    \n

    What it does

    \n

    First it changes your packageId to whatever you have stated in your environment-rules.json

    \n

    it also copies any files you have suffixed with the name of the environemnt for example : App_Resources/Android/google-services.staging.json will get copied to App_Resources/Android/google-services.json before building.

    \n

    Selecting Environment

    \n

    Once you have a initial environment-rules.json file you can change between the environments using --env.use.ENV_NAME

    \n

    for example for ios:\ntns run ios --env.use.staging

    \n

    this can also be used with other --env args like:

    \n

    tns run ios --bundle --env.aot --env.uglify --env.use.release

    \n

    Environments

    \n

    a basic environment-rules.json file is generated for you it looks like this:

    \n

    {
        \"version\": \"1.0.0\",
        \"default\": \"staging\",
        \"extraPaths\": [
            'app/environments'
        ],
        \"environments\": [
            {
                name: \"staging\",
                packageId: \"org.nativescript.appName.staging\",
                copyRule: \"(.*\\\\.staging\\\\..*)\"
            },
            {
                name: \"release\",
                packageId: \"org.nativescript.appName.release\",
                copyRule: \"(.*\\\\.release\\\\..*)\"
            }
        ]
    }
    \n

    You can tweak this however you want, and add as many environments as you like.

    \n

    ExtraPaths is Optional, but can add multiple paths within the app. these will follow the same rules for the rules.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-permissions":{"name":"ns-permissions","version":"2.0.1","license":"Apache-2.0","readme":"

    ns-permissions

    \n

    Nativescript permissions, which is a clone of nativescript-perms, exports more android functions and supports advanced request for android permissions.

    \n

    Break changes

    \n

    ns-permissions@2 for Nativescript@7

    \n

    ns-permissions@1 for Nativescript version < 7

    \n

    Installation

    \n
    tns plugin add ns-permissions
    \n

    API

    \n

    Permissions statuses

    \n

    Promises resolve into [status:Status, always:boolean] where status is one of these statuses:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Return valueNotes
    authorizedUser has authorized this permission
    deniedUser has denied this permission at least once. On iOS this means that the user will not be prompted again. Android users can be prompted multiple times until they select 'Never ask me again'
    restrictediOS - this means user is not able to grant this permission, either because it's not supported by the device or because it has been blocked by parental controls. Android - this means that the user has selected 'Never ask me again' while denying permission
    undeterminedUser has not yet been prompted with a permission dialog
    \n

    The Android permissions are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidPermissionsAndroid
    READ_CALENDAR'android.permission.READ_CALENDAR'
    WRITE_CALENDAR'android.permission.WRITE_CALENDAR'
    CAMERA'android.permission.CAMERA'
    READ_CONTACTS'android.permission.READ_CONTACTS'
    WRITE_CONTACTS'android.permission.WRITE_CONTACTS'
    GET_ACCOUNTS'android.permission.GET_ACCOUNTS'
    ACCESS_FINE_LOCATION'android.permission.ACCESS_FINE_LOCATION'
    ACCESS_COARSE_LOCATION'android.permission.ACCESS_COARSE_LOCATION'
    RECORD_AUDIO'android.permission.RECORD_AUDIO'
    READ_PHONE_STATE'android.permission.READ_PHONE_STATE'
    CALL_PHONE'android.permission.CALL_PHONE'
    READ_CALL_LOG'android.permission.READ_CALL_LOG'
    WRITE_CALL_LOG'android.permission.WRITE_CALL_LOG'
    ADD_VOICEMAIL'com.android.voicemail.permission.ADD_VOICEMAIL'
    USE_SIP'android.permission.USE_SIP'
    PROCESS_OUTGOING_CALLS'android.permission.PROCESS_OUTGOING_CALLS'
    BODY_SENSORS'android.permission.BODY_SENSORS'
    SEND_SMS'android.permission.SEND_SMS'
    RECEIVE_SMS'android.permission.RECEIVE_SMS'
    READ_SMS'android.permission.READ_SMS'
    RECEIVE_WAP_PUSH'android.permission.RECEIVE_WAP_PUSH'
    RECEIVE_MMS'android.permission.RECEIVE_MMS'
    READ_EXTERNAL_STORAGE'android.permission.READ_EXTERNAL_STORAGE'
    WRITE_EXTERNAL_STORAGE'android.permission.WRITE_EXTERNAL_STORAGE'
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Method NameArgumentsNotes
    check()type- Returns a promise with the permission status. See iOS Notes for special cases
    hasPermission()type- Returns the permission status.
    request()type- Accepts any permission type except backgroundRefresh. If the current status is undetermined, shows the permission dialog and returns a promise with the resulting status. Otherwise, immediately return a promise with the current status. See iOS Notes for special cases
    checkPermissions()Object- Accepts an array of permission types and returns a promise with an object mapping permission object map to statuses
    requestPermissions()[types]- Accepts an array of permission types and request multiple permissions
    getTypes()none- Returns an array of valid permission types
    openSettings()none- (iOS only - 8.0 and later) Switches the user to the settings page of your app
    canOpenSettings()none- (iOS only) Returns a boolean indicating if the device supports switching to the settings page
    \n
    // request Read Contacts Permissions
    function requestReadContacts() {
      return new Promise((resolve, reject) => {
        Permissions.check(Permissions.AndroidPermissions.READ_CONTACTS).then((result) => {
          if (result[0] === 'authorized') {
            resolve();
          } else if (result[0] === 'restricted') {
            reject();
          } else {
            Permissions.request(Permissions.AndroidPermissions.READ_CONTACTS).then((requestResult) => {
              requestResult[0] === 'authorized' ? resolve() : reject();
            }).catch(() => reject())    ;
          }
        });
      });
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nbmaterial-coordinator":{"name":"nativescript-nbmaterial-coordinator","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript implementation of coordination between views

    \n

    The module implements coordination for both platforms iOS and Android.\nIt uses a producer/consumer pattern based on rxJs.

    \n

    The module augment nativescript view in order to add behaviours:

    \n
        interface View {
            addBehaviour(behaviour: Behaviour);
        } 


    export interface Behaviour {
        view: View;
        onCreate?();
        onInitNative?();
        onDispose?();
        onLoaded?();
        onUnloaded?();
    }
    \n

    It also provide a Producer interface. The producer is the view that make other views moving (for example a scroll event on scroll view):

    \n
    export interface Producer {
        init();
        start();
        stop();
        stream: Rx.Subject<ProducerData>;
    }
    \n

    The module provide some behaviours. But you can create your own behaviours.

    \n

    Below the list of behaviour based on a scrollview (or listview):

    \n
      \n
    • FixedHeaderBehavior : hide/show (using translation and opacity) a header based on scroll position
      • \n
    • ExpandableHeaderBehavior: augment the height of the header or reduce it based on scroll position
      • \n
    • ScrollScaleBehavior: scale or unscale a view based on scroll position
      • \n
    • AnchorBehaviour : the textinput is anchored to the top, bottom, middle when keyboard is shown. The input stay anchored even if autogrow is setup
      • \n
    \n

    FixedHeaderBehavior

    \n
    let header: View = null;
    let listView: ListView = null;
    let behav = new FixedHeaderBehavior(listView);
    behav.height = 112;
    behav.speedFactor = 1; //HOW MUCH INCREASE OR DECREASE SIZE OF HEADER RELATIVE TO DELTA SCROLL
    behav.deferHideFactor = 3; //START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
    behav.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
    behav.playOpacity = false; //PLAY WITH HEADER OPACITY WHEN HIDING
    behav.maxTranslate = 56;//MAXIMUM TRANSLATION VALUE APPLIED TO HEADER
    behav.thresholdFactor = 0.3;//IF HEADER HAS 1/3 OF HIS HEIGHT HIDDEN (SHOWN)=> SO PLAY ANIMATION TO HIDE (SHOW) ALL
    header.addBehaviour(behav);
    \n

    ScrollScaleBehavior

    \n
    let btn: Button = null;
    let listView: ListView = null;
        let behavBtn = new ScrollScaleBehavior(listView);
        behavBtn.height = 56;//HEIGHT OF BUTTON
        behavBtn.deferHideFactor = 3;//START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
        behavBtn.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
        btn.addBehaviour(behavBtn);
    \n

    ExpandableHeaderBehavior

    \n
    let headerImage: Image = null;
    let scrollview: ScrollView = null;
    let behav = new ExpandableHeaderBehavior(scrollview);
        behav.height = 400; //MAXIMUM HEIGHT OF THE IMAGE
        behav.disappearAt = 56 + page.getStatusBarHeightDip();//HIDE IMAGE WHEN HEIGHT IS UNDER
        behav.showAnimation = (ex) => {//PLAY AN ANIMATION WHEN SHOWN
            appbar.animate({ backgroundColor: new Color(\"transparent\"), duration: ex.animationDuration, curve: AnimationCurve.easeOut });
        };
        behav.hideAnimation = (ex) => {//PLAY AN ANIMATION WHEN HIDDEN
            appbar.animate({ backgroundColor: new Color(\"purple\"), duration: ex.animationDuration, curve: AnimationCurve.easeIn });
        };
        headerImage.addBehaviour(behav);
    \n
    <Image src=\"~/img/logo.png\" id=\"headerImage\" stretch=\"aspectFill\" height=\"400\" verticalAlignment=\"top\"/>
    <app:AppBarLayout columns=\"auto,*,auto,auto\" rows=\"auto\" id=\"actionbar\">
        <app:AppBarIcon text=\"list\" col=\"0\"/>
        <app:AppBarTitle text=\"My Application\" col=\"1\"/>
        <app:AppBarIcon text=\"notifications\" col=\"2\" />
        <app:AppBarIcon text=\"search\" col=\"3\" tap=\"openSearch\"/>
    </app:AppBarLayout>
    \n

    AnchorBehaviour

    \n

    The TextLayout is augmented. This make this new property available:

    \n
    export interface TextLayout{
        anchor:\"bottom\"|\"middle\"|\"top\"|\"visible\";
    }
    \n
    <TextLayout anchor=\"bottom\">
        ...
    </TextLayout>
    \n

    See all modules here

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuno-morais/nativescript-multiple-list-picker":{"name":"@nuno-morais/nativescript-multiple-list-picker","version":"7.0.3","license":"Apache-2.0","readme":"

    Multiple List Picker

    \n

    This plugin allows to create multiple list picker, as Android does. However, instead we use multiple lists, we can use one component. E.g:

    \n

    \"Multiple

    \n
    <GridLayout *ngIf=\"!IsAndroid\" columns=\"*\">
        <MultipleListPicker [value]=\"Value\" [items]=\"Items\" (valueChange)=\"OnValueItemsChanged($event.object.value)\"></MultipleListPicker>
    </GridLayout>
    <GridLayout *ngIf=\"IsAndroid\" columns=\"*,auto,auto,auto,auto,auto,*\">
        <ListPicker col=\"1\" [items]=\"Items[0]\" [selectedIndex]=\"Value[0]\" (selectedIndexChange)=\"OnSelectedIndexChanged(0, $event.object.selectedIndex)\"></ListPicker>
        <ListPicker col=\"2\" [items]=\"Items[1]\" [selectedIndex]=\"Value[1]\" (selectedIndexChange)=\"OnSelectedIndexChanged(1, $event.object.selectedIndex)\"></ListPicker>
        <Label col=\"3\" text=\",\" verticalAlignment=\"center\"></Label>
        <ListPicker col=\"4\" [items]=\"Items[3]\" [selectedIndex]=\"Value[3]\" (selectedIndexChange)=\"OnSelectedIndexChanged(3, $event.object.selectedIndex)\"></ListPicker>
        <ListPicker col=\"5\" [items]=\"Items[4]\" [selectedIndex]=\"Value[4]\" (selectedIndexChange)=\"OnSelectedIndexChanged(4, $event.object.selectedIndex)\"></ListPicker>
    </GridLayout>
    \n

    Usage

    \n

    Import the module of multiple list picker in your Nativescript + Angular app:

    \n
    import { MultipleListPickerModule } from \"@nuno-morais/nativescript-multiple-list-picker/angular\";

    @NgModule({
        declarations: [
        ],
        exports: [
            MultipleListPickerModule, // If you need
        ],
        imports: [
            MultipleListPickerModule,
        ],
        providers: [
        ],
        schemas: [
        ]
    })
    \n

    In your view, you can use the list following the example:

    \n
    <MultipleListPicker
        [value]=\"Value\" // Value selected
        [items]=\"Items\" // Items
        (valueChange)=\"OnValueItemsChanged($event.object.value)\"></MultipleListPicker>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loopback-sdk-builder":{"name":"loopback-sdk-builder","version":"2.0.0-deprecated","license":"MIT","readme":"

    DEPRECATED

    \n

    Use @mean-expert/loopback-sdk-builder instead.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jpush":{"name":"nativescript-jpush","version":"1.2.1","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-onesignal/blob/master/LICENSE"},"readme":"

    NativeScript-jpush

    \n

    A Nativescript plugin that wraps the iOS and Android jpush SDK.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digi.app/nativescript-sse":{"name":"@digi.app/nativescript-sse","version":"1.0.2","license":"Apache-2.0","readme":"

    @digi.app/nativescript-sse

    \n
    ns plugin add @digi.app/nativescript-sse
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-accelerometer":{"name":"@triniwiz/nativescript-accelerometer","version":"4.0.3","license":"Apache-2.0","readme":"

    Nativescript nativescript-accelerometer

    \n
    ns plugin add @triniwiz/nativescript-accelerometer
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-handle-file-new":{"name":"nativescript-handle-file-new","version":"1.0.0","license":"ISC","readme":"

    nativescript-handle-file

    \n

    This module gives you a tool to download, choose folder to save and then open an app to open file.

    \n

    Instalation

    \n
    tns plugin add nativescript-handle-file
    \n

    How to use

    \n

    Import class and instance it.

    \n
    import {HandleFile} from 'nativescript-handle-file';

    let handleFile = new HandleFile();
    handleFile.open({
        name : \"name-of-file.extension\",
        url: \"path-to-file\",
        directory: \"directory to save\", // only in android [downloads, pictures, movies, music]
        tittle: \"title to choose apps\" // only in android
    }).then(result => {
        //return true if success
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-ng-sentry":{"name":"@essent/nativescript-ng-sentry","version":"4.0.0","license":"MIT","readme":"

    NativeScript plugin for Sentry

    \n

    \"npm

    \n

    This is a plugin to log app crashes with Sentry.

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add @essent/nativescript-ng-sentry
    \n

    This command automatically installs the necessary files, as well as stores nativescript-ng-sentry as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use nativescript-ng-sentry you must first import the module:

    \n
    import { NgSentry } from '@essent/nativescript-ng-sentry';
    \n

    At the launch of your app call setCredentials with your own credentials, these can be found in your Sentry Project Settings, Client Keys (DSN). Use the public DSN for these credentials. Optionally you can also provide an environment and a user id.

    \n
    NgSentry.getInstance().setCredentials('123456', '123456789abcdefghijklmnopqrstuvw', 'development', 'unique-user-id');
    \n

    To log a crash, call saveCrash with a message and details.\nThe details will be used as a Sentry breadcrumb, you can use this to save a stacktrace, for example.\nYou can have a look at our example on how to call this with an uncaughtErrorEvent.

    \n
    NgSentry.getInstance().saveCrash('My crash message', 'My crash details');
    \n

    Crashes are not send to Sentry automatically, you can call sendCrashes to send all saved crashes to Sentry.\nWe suggest you call this method in the resume event of your app.

    \n
    NgSentry.getInstance().sendCrashes();
    \n

    Breadcrumbs (optional)

    \n

    You can save breadcrumbs to see what a user did before a crash occurred, these will be added to the next crash you save.\nTo add a breadcrumb use saveBreadcrumb with a title and category.

    \n
    NgSentry.getInstance().saveBreadcrumb('Routed to details page', 'state');
    \n

    Optionally you can add extra data to the breadcrumb.

    \n
    const properties: KeyValue<string> = {
        page: 'Change user data',
        changed: 'Username'
    };
    NgSentry.getInstance().saveBreadcrumb('Save success', 'action', properties);
    \n

    Optionally you can set a maximum amount of breadcrumbs, the default is 50.

    \n
    NgSentry.getInstance().setMaxAmountOfBreadcrumbs(10);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/store-update":{"name":"@aquinn/store-update","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript store-update

    \n
    ns plugin add @aquinn/store-update
    \n

    Usage

    \n

    This code was borrowed from https://github.com/chronogolf/nativescript-store-update\nFor temporary use until the original author uses the new NS7 package workflow

    \n

    License

    \n

    This code was borrowed from https://github.com/chronogolf/nativescript-store-update\nFor temporary use until the original author uses the new NS7 package workflow

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@primeboard/swipe-layout":{"name":"@primeboard/swipe-layout","version":"2.0.2","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-okhttp":{"name":"nativescript-okhttp","version":"0.0.9","license":"MIT","readme":"

    NativeScript plugin for OkHttp

    \n

    OkHttp is an HTTP client that supports:

    \n
      \n
    • HTTP/2 and SPDY support allows all requests to the same host to share a socket.
      • \n
    • Connection pooling reduces request latency (if SPDY isn’t available).
      • \n
    • Transparent GZIP shrinks download sizes.
      • \n
    • Response caching avoids the network completely for repeat requests.
      • \n
    \n

    \"\"

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    $ tns plugin add nativescript-okhttp
    \n

    This command automatically installs the necessary files, as well as stores nativescript-okhttp as a dependency in your project's package.json file.

    \n

    Usage

    \n

    To use the social share module you must first require() it. After you require() the module you have access to its APIs.

    \n
    var okHttp = require(\"nativescript-okhttp\");
    \n

    API

    \n

    getString(url)

    \n

    The getString() method downloads a URL as a string.

    \n
    var okHttp = require(\"nativescript-okhttp\");
    function pageLoaded(args) {
        var result = okHttp.getString(\"http://www.google.com/\");
        console.log(result);
    }
    exports.pageLoaded = pageLoaded;
    \n

    getJSON(url)

    \n

    The getString() method downloads a URL as a string.

    \n
    var okHttp = require(\"nativescript-okhttp\");
    function pageLoaded(args) {
        var json = okHttp.getJSON(\"https://api.github.com/gists/c2a7c39532239ff261be\");
        console.log(\"JSON url: \" + json.url);
    }
    exports.pageLoaded = pageLoaded;
    \n

    getImage(url)

    \n

    The getImage() method returns an image as a stream from a remote URL.

    \n

    In this example, we will download an image from umgur (http://i.imgur.com/sXG9IHW.jpg) and we will share it ot Facebook using a social share plugin by @tjvantoll (https://github.com/tjvantoll/nativescript-social-share).

    \n

    \"\"

    \n
    var socialShare = require(\"nativescript-social-share\");
    var imageSource = require(\"image-source\");
    var okHttp = require(\"nativescript-okhttp\");
    function pageLoaded(args) {
        var inputStream = okHttp.getImage(\"http://i.imgur.com/sXG9IHW.jpg\");
        var image = imageSource.fromData(inputStream);
        socialShare.shareImage(image);
    }
    exports.pageLoaded = pageLoaded;
    \n

    \"\"\n\"\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/fontmin":{"name":"@nativescript-community/fontmin","version":"0.9.10","license":"MIT","readme":"

    \n \n \n \n

    \n

    fontmin

    \n

    Minify font seamlessly

    \n

    \"NPM\n\"Build\n\"Downloads\"\n\"Dependencies\"\n\"Font

    \n

    Homepage

    \n\n

    Install

    \n
    $ npm install --save fontmin
    \n

    Usage

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .src('fonts/*.ttf')
        .dest('build/fonts');

    fontmin.run(function (err, files) {
        if (err) {
            throw err;
        }

        console.log(files[0]);
        // => { contents: <Buffer 00 01 00 ...> }
    });
    \n

    You can use gulp-rename to rename your files:

    \n
    var Fontmin = require('fontmin');
    var rename = require('gulp-rename');

    var fontmin = new Fontmin()
        .src('fonts/big.ttf')
        .use(rename('small.ttf'));
    \n

    API

    \n

    new Fontmin()

    \n

    Creates a new Fontmin instance.

    \n

    .src(file)

    \n

    Type: Array|Buffer|String

    \n

    Set the files to be optimized. Takes a buffer, glob string or an array of glob strings\nas argument.

    \n

    .dest(folder)

    \n

    Type: String

    \n

    Set the destination folder to where your files will be written. If you don't set\nany destination no files will be written.

    \n

    .use(plugin)

    \n

    Type: Function

    \n

    Add a plugin to the middleware stack.

    \n

    .run(cb)

    \n

    Type: Function

    \n

    Optimize your files with the given settings.

    \n

    cb(err, files, stream)

    \n

    The callback will return an array of vinyl files in files and a Readable/Writable\nstream in stream

    \n

    Plugins

    \n

    The following plugins are bundled with fontmin:

    \n
      \n
    • glyph — Compress ttf by glyph.
      • \n
    • ttf2eot — Convert ttf to eot.
      • \n
    • ttf2woff — Convert ttf to woff.
      • \n
    • ttf2svg — Convert ttf to svg.
      • \n
    • css — Generate css from ttf, often used to make iconfont.
      • \n
    • svg2ttf — Convert font format svg to ttf.
      • \n
    • svgs2ttf — Concat svg files to a ttf, just like css sprite.
      • \n
    • otf2ttf — Convert otf to ttf.
      • \n
    \n

    .glyph()

    \n

    Compress ttf by glyph.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .use(Fontmin.glyph({ 
            text: '天地玄黄 宇宙洪荒',
            hinting: false         // keep ttf hint info (fpgm, prep, cvt). default = true
        }));
    \n

    .ttf2eot()

    \n

    Convert ttf to eot.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .use(Fontmin.ttf2eot());
    \n

    .ttf2woff()

    \n

    Convert ttf to woff.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .use(Fontmin.ttf2woff({
            deflate: true           // deflate woff. default = false
        }));
    \n

    .ttf2svg()

    \n

    Convert ttf to svg.

    \n

    you can use imagemin-svgo to compress svg:

    \n
    var Fontmin = require('fontmin');
    var svgo = require('imagemin-svgo');

    var fontmin = new Fontmin()
        .use(Fontmin.ttf2svg())
        .use(svgo());
    \n

    .css()

    \n

    Generate css from ttf, often used to make iconfont.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .use(Fontmin.css({
            fontPath: './',         // location of font file 
            base64: true,           // inject base64 data:application/x-font-ttf; (gzip font with css). 
                                    // default = false
            glyph: true,            // generate class for each glyph. default = false
            iconPrefix: 'my-icon',  // class prefix, only work when glyph is `true`. default to \"icon\"
            fontFamily: 'myfont',   // custom fontFamily, default to filename or get from analysed ttf file
            asFileName: false,      // rewrite fontFamily as filename force. default = false
            local: true             // boolean to add local font. default = false
        }));
    \n

    Alternatively, a transform function can be passed as fontFamily option.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .use(Fontmin.css({
            // ...
            fontFamily: function(fontInfo, ttf) {
              return \"Transformed Font Family Name\"
            },
            // ...
        }));
    \n

    .svg2ttf()

    \n

    Convert font format svg to ttf.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .src('font.svg')
        .use(Fontmin.svg2ttf());
    \n

    .svgs2ttf()

    \n

    Concat svg files to a ttf, just like css sprite.

    \n

    awesome work with css plugin:

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .src('svgs/*.svg')
        .use(Fontmin.svgs2ttf('font.ttf', {fontName: 'iconfont'}))
        .use(Fontmin.css({
            glyph: true
        }));
    \n

    .otf2ttf()

    \n

    Convert otf to ttf.

    \n
    var Fontmin = require('fontmin');

    var fontmin = new Fontmin()
        .src('fonts/*.otf')
        .use(Fontmin.otf2ttf());
    \n

    CLI

    \n
    $ npm install -g fontmin
    \n
    $ fontmin --help

      Usage
        $ fontmin <file> [<output>]
        $ fontmin <directory> [<output>]
        $ fontmin <file> > <output>
        $ cat <file> | fontmin > <output>

      Example
        $ fontmin fonts/* build
        $ fontmin fonts build
        $ fontmin foo.ttf > foo-optimized.ttf
        $ cat foo.ttf | fontmin > foo-optimized.ttf

      Options
        -t, --text                          require glyphs by text
        -b, --basic-text                    require glyphs with base chars
        -d, --deflate-woff                  deflate woff
        --font-family                       font-family for @font-face CSS
        --css-glyph                         generate class for each glyf. default = false
        -T, --show-time                     show time fontmin cost
    \n

    you can use curl to generate font for websites running on PHP, ASP, Rails and more:

    \n
    $ text=`curl www.baidu.com` && fontmin -t \"$text\" font.ttf
    \n

    or you can use html-to-text to make it smaller:

    \n
    $ npm install -g html-to-text
    $ text=`curl www.baidu.com | html-to-text` && fontmin -t \"$text\" font.ttf
    \n

    what is more, you can use phantom-fetch-cli to generate font for SPA running JS template:

    \n
    $ npm install -g phantom-fetch-cli
    $ text=`phantom-fetch http://www.chinaw3c.org` && fontmin -t \"$text\" font.ttf
    \n

    Related

    \n\n

    Thanks

    \n\n

    License

    \n

    MIT © fontmin

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-videorecorder":{"name":"@triniwiz/nativescript-videorecorder","version":"4.0.2","license":"Apache-2.0","readme":"

    Nativescript VideoRecorder

    \n

    Installation

    \n
    ns plugin add @triniwiz/nativescript-videorecorder
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-material-loading-indicator":{"name":"nativescript-material-loading-indicator","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/nikolay-diyanov/nativescript-material-loading-indicator/blob/master/LICENSE"},"readme":"

    NativeScript Material design activity indicator for iOS

    \n

    Following the material design loading indicator for Android, this plugin provides the same look and feel for iOS.

    \n

    Prerequisites

    \n

    NativeScript 1.3.0 (tns --version) has solved many build issues, so please upgrade if you need to.

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-material-loading-indicator
    \n

    Usage

    \n
    function creatingView(args) {

      var spinnerView = MMMaterialDesignSpinner.alloc().initWithFrame(CGRectMake(0,0,40,40));
        spinnerView.lineWidth = 1.5;
        spinnerView.tintColor = UIColor.redColor();

        spinnerView.startAnimating();
        args.view = spinnerView;

    }

    exports.creatingView = creatingView;
    \n
    <Page xmlns=\"http://www.nativescript.org/tns.xsd\">
          <Placeholder creatingView=\"creatingView\"/>
    </Page>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@aquinn/inappbrowser":{"name":"@aquinn/inappbrowser","version":"1.0.2","license":"Apache-2.0","readme":"

    Nativescript inappbrowser

    \n
    ns plugin add @aquinn/inappbrowser
    \n

    Usage

    \n

    This code was borrowed from https://github.com/proyecto26/nativescript-inappbrowser\nFor temporary use until proyecto uses the new NS7 package workflow

    \n

    License

    \n

    Apache License Version 2.0

    \n

    This code was borrowed from https://github.com/proyecto26/nativescript-inappbrowser\nFor temporary use until proyecto uses the new NS7 package workflow

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-pusher-channels":{"name":"@triniwiz/nativescript-pusher-channels","version":"3.0.1","license":"Apache-2.0","readme":"

    Nativescript nativescript-pusher-channels

    \n
    ns plugin add @triniwiz/nativescript-pusher-channels
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-nested-scrollview":{"name":"@triniwiz/nativescript-nested-scrollview","version":"2.0.2","license":"Apache-2.0","readme":"

    Nativescript nativescript-nested-scrollview

    \n
    ns plugin add @triniwiz/nativescript-nested-scrollview
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-observable-subscribe":{"name":"nativescript-observable-subscribe","version":"0.1.5","license":"MIT","readme":"

    nativescript-observable-subscribe

    \n

    NativeScript module that adds subscribe support to observables. Listening for observable changes can always be done using standard addEventListener technique that can be found in the NativeScript docs, but this is a much more convenient subscription method that keeps your code neat by isolating handlers for individual properties.\nAs NativeScript is constantly evolving, a subscribe solution might be implemented in the core project as a tns module making this module obsolete; so one should keep an eye out for that.

    \n

    Installation

    \n

    Run npm install nativescript-observable-subscribe --save from your project's app directory:

    \n
    .
    ├── app  <------------------------------ run npm install from here
    │   ├── app.css
    │   ├── app.js
    │   ├── bootstrap.js
    │   ├── main-page.js
    │   ├── main-page.xml
    │   ├── node_modules
    │   │   └── nativescript-observable-subscribe <-- The install will place the module's code here
    │   │       └── ...
    │   └── package.json <----------------- The install will register “nativescript-observable-subscribe” as a dependency here
    │   └── tns_modules
    │       └── ...
    └── platforms
        ├── android
        └── ios
    \n

    If npm doesn't end up working for you, you can just copy and paste this repo's observablesubscribe.js file into your app and reference it directly.

    \n

    Usage

    \n

    To use the Observable Subscribe Module you must first require() it from your project's node_modules directory:

    \n
    require( \"./node_modules/nativescript-observable-subscribe/observablesubscribe\" );
    \n

    Once you have required the module in your code, it will execute and add the subscribe/unsubscribe functions to observable. You will be able to start using it to get notified of property changes like this:

    \n
    // viewmodel.js
    \t...
        var mainViewModel = new HelloWorldModel();
    \tvar counterPropName = 'counter';

    \tmainViewModel.subscribe(counterPropName, function(args){
    \t\tif (this.get(counterPropName) <= 0) {
    \t\t\tthis.set(messagePropName, \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
    \t\t}
    \t\telse {
    \t\t\tthis.set(messagePropName, this.get(counterPropName) + \" taps left\");
    \t\t} 
    \t}, mainViewModel);

    \texports.mainViewModel = mainViewModel;
    \n

    If you want to unsubscribe a property from notifications, you can use the unsubscribe function like this:

    \n
    // viewmodel.js
    \t...
    \tmainViewModel.unsubscribe(counterPropName, callback);
    \t...
    \n

    *Thanks to TJ VanToll for the directory structure graphic above and the template for this doc

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-shimmer-enduco":{"name":"nativescript-shimmer-enduco","version":"2.0.8","readme":"

    NativeScript Shimmer

    \n

    Facebook shimmer effect for your NativeScript app.

    \n

    Uses the following native plugins:

    \n
      \n
    • iOS: https://github.com/facebook/Shimmer
      • \n
    • Android: http://facebook.github.io/shimmer-android/
      • \n
    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-shimmer-enduco
    \n

    Demo

    \n

    \"Demo\"

    \n

    Usage

    \n
      \n
    • main-page.xml:
      • \n
    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      xmlns:sh=\"nativescript-shimmer\" 
      loaded=\"pageLoaded\">
      <StackLayout>
        <sh:Shimmer id=\"shimmer\">
          <Label text=\"Shimmer\" />     
        </sh:Shimmer>
        <Button text=\"Toggle\" tap=\"{{toggleShimmer}}\" />
      </StackLayout>
    </Page>
    \n
      \n
    • main-page.ts:
      • \n
    \n
    import {EventData, Observable} from \"data/observable\";
    import {Page} from \"ui/page\";

    // Event handler for Page \"loaded\" event attached in main-page.xml
    export function pageLoaded(args: observable.EventData) {
        // Get the event sender
        let page = <Page>args.object;
        page.bindingContext = new ShimmerDemo(page);
    }

    class ShimmerDemo extends Observable {
      private _enableTxt: string;
      private _shimmer: any;

      constructor(page: Page) {
        super();
        this._shimmer = page.getViewById('shimmer');
      }

      public toggleShimmer() {
        this._shimmer.enabled = !this._shimmer.enabled;
      }
    }
    \n

    LICENSE

    \n

    BSD

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ng-gif":{"name":"tns-ng-gif","version":"1.3.1","license":"ISC","readme":"

    Display an animated gif in a NativeScript Image

    \n
    \n

    A simple NativeScript plugin to display animated gif into an Image layout.

    \n
    \n
    \n

    Works only with an Angular powered NativeScript application. Both Android and iOS platforms are supported.

    \n
    \n

    Usage

    \n

    import the GifModule into your Module:

    \n
    import { GifModule } from 'tns-ng-gif';

    @NgModule({
        imports: [
            GifModule,
            ...
        ],
        declarations: [
            ...
        ]
    })
    export class YourModule { }
    \n

    Then, just add the [tnsGif] to an Image layout. Use the existing src property to load the gif file:

    \n
      <Image [tnsGif] src=\"~/path/to/your.gif\"></Image>
    \n

    Result on an iOS device:

    \n

    \"GifDemo\"

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-star-ratings":{"name":"@triniwiz/nativescript-star-ratings","version":"2.0.3","license":"Apache-2.0","readme":"

    Nativescript nativescript-star-ratings

    \n
    ns plugin add @triniwiz/nativescript-star-ratings
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/google-maps":{"name":"@codesthings/google-maps","version":"1.1.3","license":"Apache-2.0","readme":"

    @nativescript/google-maps

    \n
    ns plugin add @nativescript/google-maps
    \n

    Config

    \n

    Android

    \n

    Modify the AndroidManifest to include the new meta tag along with your API key, the manifest is located\nin App_Resources/Android/AndroidManifest.xml

    \n

    <application
      android:name=\"com.tns.NativeScriptApplication\"
      android:allowBackup=\"true\"
      android:icon=\"@mipmap/ic_launcher\"
      android:label=\"@string/app_name\"
      android:theme=\"@style/AppTheme\"
      android:hardwareAccelerated=\"true\">

      <meta-data
        android:name=\"com.google.android.geo.API_KEY\"
        android:value=\"youKey\"/>
    </application>
    \n

    iOS

    \n

    Modify the Info.plist to include the new meta tag along with your API key, the manifest is located\nin App_Resources/iOS/Info.plist

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
      <dict>
        <key>TNSGoogleMapsAPIKey</key>
        <string>yourKey</string>
      </dict>
    </plist>
    \n

    Usage

    \n

    Core

    \n
    \n

    Important: Ensure you've included xmlns:map="@nativescript/google-maps" on the Page element

    \n
    \n
    <map:MapView
    \tready=\"onReady\"
    \tmapTap=\"onTap\"
    \tmapLongPress=\"onLongPress\"
    \tmarkerTap=\"onMarkerTap\"
    />
    \n

    Angular

    \n
    import { GoogleMapsModule } from '@nativescript/google-maps/angular';

    @NgModule({
        imports: [
    \t\t\tGoogleMapsModule
        ],
        declarations: [
            AppComponent
        ],
        bootstrap: [AppComponent]
    })
    \n
    <MapView
    \t(ready)=\"onReady($event)\"
    \t(mapTap)=\"onTap($event)\"
    \t(mapLongPress)=\"onLongPress($event)\"
    \t(markerTap)=\"onMarkerTap($event)\"
    >
    </MapView>
    \n

    Vue

    \n
    import Vue from 'nativescript-vue'
    import GoogleMaps from '@nativescript/google-maps/vue'

    Vue.use(GoogleMaps)
    \n
    <MapView
    \t@ready=\"onReady\"
    \t@mapTap=\"onTap\"
    \t@mapLongPress=\"onLongPress\"
    \t@markerTap=\"onMarkerTap\"

    />
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/zone-js":{"name":"@nativescript/zone-js","version":"3.0.4","readme":"

    @nativescript/zone-js

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-accordion":{"name":"nativescript-ngx-accordion","version":"1.0.0","license":"MIT","readme":"

    Nativescript-Ngx-Accordion

    \n

    A Nativescript Angular UI Control for Expand/Collapse Toggle panels. It is an extension of the (IListView)[] control.

    \n

    Setup

    \n

    npm install nativescript-ngx-accordion --save

    \n

    Import the module into your app-module

    \n
    import { AccordionViewModule } from 'nativescript-ngx-accordion';
    \n

    Getting Started

    \n

    Similar to the ListView, you need to define the ListItem template, as shown\nbelow.

    \n
    <Accordion
        limit=\"30\"
        [items]=\"items\"
        [templateRef]=\"accordion\"
        (eofItems)=\"addMore()\"
      >
        <ng-template #accordion let-item=\"item\" let-index=\"index\">
          <AccordionItem>
            <AccordionHeader>
              <!-- Place the header here -->
            </AccordionHeader>
            <AccordionContent>
              <!-- Place the main content here -->
            </AccordionContent>
            <AccordionFooter>
            <!-- Place the footer here -->
            </AccordionFooter>
            <AccordionDivider>
              <!-- Spacer gap for the items -->
            </AccordionDivider>
            <AccordionPlaceholder>
              <!-- Skeleton for intermediate loading -->
            </AccordionPlaceholder>
          </AccordionItem>
        </ng-template>
      </Accordion>
    \n
      \n
    • The AccordionContent is where you would insert your item content, possibly an Angular Component
      • \n
    • The AccordionDivider is simply a spacer tag for the items, like a horizontal line
      • \n
    • The AccordionPlaceholder is the skeleton for your item before the content gets instantiated
      • \n
    \n

    Options

    \n

    The AccordionView accepts limit as an argument which is default to 30.

    \n

    It emits a value with the eofItems emitter when the list has reaches the end, for async loading more data to the list.

    \n

    AccordionViewService

    \n

    The AccordionService can be used to add more items to the list with the method\naddItems()

    \n

    Examples

    \n

    Provided in the demo app

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-GMImagePicker":{"name":"nativescript-GMImagePicker","version":"1.0.4","license":{"type":"MIT","url":"https://github.com/roblav96/nativescript-GMImagePicker/blob/master/LICENSE"},"readme":"

    NativeScript-Gmimagepicker

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Rob Laverty

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add nativescript-GMImagePicker
    \n

    Usages

    \n

    Example

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-jf":{"name":"nativescript-audio-jf","version":"1.0.2","license":"ISC","readme":"\n

    NativeScript Audio

    \n    \n

    NativeScript plugin to play and record audio files for Android and iOS.

    \n

    Installation

    \n

    tns plugin add nativescript-audio-jf

    \n

    Recording Permissions

    \n

    iOS

    \n
      \n
    • To record, add the following to your project's Info.plist file in the App_Resources/iOS directory (see here for example).
      • \n
    \n
    <key>NSMicrophoneUsageDescription</key>
    <string>The app needs to access your Microphone to record.</string>
    \n

    Android

    \n
      \n
    • To record, add the following permission to your AndroidManifest.xml file in App_Resources/Android/ directory (see here for example).
      • \n
    \n
    <uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
    \n
    \n

    Android Native Classes

    \n\n

    iOS Native Classes

    \n\n

    Usage

    \n

    TypeScript Example

    \n
    import { TNSPlayer } from 'nativescript-audio-jf';

    export class YourClass {
      private _player: TNSPlayer;

      constructor() {
        this._player = new TNSPlayer();
        this._player.debug = true; // set true to enable TNSPlayer console logs for debugging.
        this._player
          .initFromFile({
            audioFile: '~/audio/song.mp3', // ~ = app directory
            loop: false,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
          })
          .then(() => {
            this._player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
      }

      public togglePlay() {
        if (this._player.isAudioPlaying())     {
          this._player.pause();
        } else {
          this._player.play();
        }
      }

      private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
      }

      private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
      }
    }
    \n

    Javascript Example:

    \n
    const audio = require('nativescript-audio-jf');

    const player = new audio.TNSPlayer();
    const playerOptions = {
      audioFile: 'http://some/audio/file.mp3',
      loop: false,
      completeCallback: function() {
        console.log('finished playing');
      },
      errorCallback: function(errorObject) {
        console.log(JSON.stringify(errorObject));
      },
      infoCallback: function(args) {
        console.log(JSON.stringify(args));
      }
    };

    player
      .playFromUrl(playerOptions)
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log('something went wrong...', err);
      });
    \n

    API

    \n

    Recorder

    \n

    TNSRecorder Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    TNSRecorder.CAN_RECORD(): boolean - static methodDetermine if ready to record.
    start(options: AudioRecorderOptions): Promise<void>Start recording to file.
    stop(): Promise<void>Stop recording.
    pause(): Promise<void>Pause recording.
    resume(): Promise<void>Resume recording.
    dispose(): Promise<void>Free up system resources when done with recorder.
    getMeters(channel?: number): numberReturns the amplitude of the input.
    isRecording(): boolean - iOS OnlyReturns true if recorder is actively recording.
    requestRecordPermission(): Promise<void>Android Only Resolves the promise is user grants the permission.
    hasRecordPermission(): booleanAndroid Only Returns true if RECORD_AUDIO permission has been granted.
    \n

    TNSRecorder Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native AVAudioRecorder class instance.
    androidGet the native MediaRecorder class instance.
    debugSet true to enable debugging console logs (default false).
    \n

    Player

    \n

    TNSPlayer Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    initFromFile(options: AudioPlayerOptions): PromiseInitialize player instance with a file without auto-playing.
    playFromFile(options: AudioPlayerOptions): PromiseAuto-play from a file.
    initFromUrl(options: AudioPlayerOptions): PromiseInitialize player instance from a url without auto-playing.
    playFromUrl(options: AudioPlayerOptions): PromiseAuto-play from a url.
    pause(): Promise<boolean>Pause playback.
    resume(): voidResume playback.
    seekTo(time:number): Promise<boolean>Seek to position of track (in seconds).
    dispose(): Promise<boolean>Free up resources when done playing audio.
    isAudioPlaying(): booleanDetermine if player is playing.
    getAudioTrackDuration(): Promise<string>Duration of media file assigned to the player.
    playAtTime(time: number): void - iOS OnlyPlay audio track at specific time of duration.
    changePlayerSpeed(speed: number): void - On Android Only API 23+Change the playback speed of the media player.
    \n

    TNSPlayer Instance Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    iosGet the native ios AVAudioPlayer instance.
    androidGet the native android MediaPlayer instance.
    debug: booleanSet true to enable debugging console logs (default false).
    currentTime: numberGet the current time in the media file's duration.
    volume: numberGet/Set the player volume. Value range from 0 to 1.
    \n

    License

    \n

    ISC

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-advanced-camera":{"name":"nativescript-advanced-camera","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Advanced Camera

    \n

    A highly customizable NativeScript camera plugin that can easily be embedded in a view.

    \n

    NOTES:

    \n
      \n
    • This plugin is still in development, so for now forget highly customizable. 🙂
      • \n
    • For feature requests and bugs, feel free to open a new issue.
      • \n
    \n

    Table of contents:

    \n\n

    Prerequisites

    \n\n

    Installation

    \n
    $ tns plugin add nativescript-advanced-camera
    \n

    Usage

    \n

    Angular 11+

    \n

    HTML Template: home.component.html

    \n
    <AdvancedCamera height=\"300dp\" width=\"300dp\" backgroundColor=\"black\" (loaded)=\"onLoaded($event)\"></AdvancedCamera>
    \n

    Component: home.component.ts

    \n
    import {EventData, isIOS} from \"@nativescript/core\";
    import {AdvancedCamera} from \"nativescript-advanced-camera\";

    registerElement('AdvancedCamera', () => AdvancedCamera);

    @Component({
        selector: \"Home\",
        templateUrl: \"./home.component.html\"
    })
    export class HomeComponent {
        private cam: AdvancedCamera;

        public onLoaded(event: EventData) {
            console.log('Cam Loaded');
            this.cam = <AdvancedCamera> event.object;
        }
        
        public record(): void {
            console.log('Start Recording');
            this.cam.record();
        }

        public stop(): void {
            console.log('Stop Recording');
            this.cam.stop().then((file) => {
                const path = isIOS ? file.path : file.getPath();
                console.log(path);
            });
        }
    }
    \n

    Features

    \n

    Note: To add features to this list, feel free to open a new issue.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FeatureAndroidiOS
    Start & Stop Video Recording:heavy_check_mark::heavy_check_mark:
    Take Photos:x::x:
    Write Video / Photos to Library:heavy_check_mark::heavy_check_mark:
    Switch between Front / Back Camera:x::x:
    \n

    Properties

    \n

    Common Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    writeFilesToPhoneLibraryBooleanEnable / Disable saving the files to phone library.
    \n

    iOS Specific Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyTypeDescription
    shouldKeepViewAtOrientationChangesBooleanEnable / Disable keeping the view with the same bounds when the orientation changes.
    shouldRespondToOrientationChangesBooleanEnable / Disable the video following device orientation.
    writeFilesToPhoneLibraryBooleanEnable / Disable saving the files to phone library.
    \n

    Methods

    \n

    Common Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    record()Starts recording a video.
    stop()Stops the video recording and returns a Promise that gives the video file.
    \n

    iOS Specific Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    resetOrientation()Reset and redraw the preview layer orientation.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-angular-jwt":{"name":"ns-angular-jwt","version":"1.0.0","license":"Apache-2.0","readme":"

    Nativescript - Angular - JWT

    \n
      \n
    • Angular v11+ and RxJS v6+ -> v1.0
      • \n
    \n

    The library provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.

    \n

    Installation

    \n
    # installation with tns
    tns install slejnej/ns-angular-jwt
    \n

    Usage

    \n
      \n
    1. make sure you have credentials from your any OAuth2 service
      2. \n
    2. create your injectable AuthGuard service in app root as follows
      3. \n
    \n
    // file - auth-guard.service
    import all_needed_used_and_injected!!!

    @Injectable()
    export class AuthGuard implements CanActivate {

        subscription: Subscription;
        
        constructor(private routerExtensions: RouterExtensions, protected authService: AuthService,
            protected userService: UserService, private storage: SecureStorageService) { }
        
        canActivate() {
            if (this.authService.isAuthenticated()) {
                console.log('guard OK');
                return true;
            }
            else {
                console.log('guard FAIL');
                // logout user and redirect
                return false;
            }
        }
    \n
      \n
    1. in your app-routing.module.ts check that you have defined auth providers as:
      2. \n
    \n
    import { AuthGuard } from \"~/auth-guard.service\";
    export const authProviders = [
      AuthGuard
    ];
    \n
      \n
    1. create new token.interceptor.ts
      2. \n
    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-customwebview":{"name":"nativescript-customwebview","version":"1.0.1","license":"MIT","readme":"

    Nativescript Plugin for Webview

    \n

    Testing how plugins work - probably not working.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@essent/nativescript-flashlight":{"name":"@essent/nativescript-flashlight","version":"2.1.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sinch":{"name":"nativescript-sinch","version":"1.1.5","license":"MIT","readme":"

    #NativeScript-Sinch\n##WIP

    \n

    ##Install\nNote : If the android platform is not added before installing this plugin the installation will fail.

    \n
    tns platform add android 
    tns plugin add nativescript-sinch
    \n
    var sinch = require('nativescript-sinch');

    //or

    import {Sinch} from 'nativescript-sinch';
    \n

    Initialize

    \n
    var sinchClient = new sinch.Sinch(\"appKey\", \"appSecret\", \"host\", \"username\");

    //or

    let sinchClient  = new Sinch(\"appKey\", \"appSecret\", \"host\", \"username\");
    \n

    Specify the client capabilities

    \n
     sinchClient.setSupportMessaging(true);
     sinchClient.setSupportCalling(true);
     sinchClient.setSupportActiveConnectionInBackground(true);
     sinchClient.setSupportPushNotifications(true);
    \n

    Start the client

    \n
    sinchClient.start();
    \n

    Stop listening for incoming events (calls or messages).

    \n
    sinchClient.stopListeningOnActiveConnection();
    \n

    Stop the client when the calling or messaging functionality is no longer needed.

    \n
    sinchClient.stop();
    \n

    Get CallClient

    \n
    sinchClient.getCallClient();
    \n

    e.g

    \n
    var callClient = sinchClient.getCallClient();
    callClient.callUser(\"triniwiz\");
    \n

    Methods

    \n
    addCallClientListener(callClientListener:()=>void)
    callConference(conferenceId:string)
    callConference(conferenceId,headers:string[])
    callPhoneNumber(phoneNumber:string)
    callPhoneNumber(phoneNumber:string,headers:string[])
    callSip(sipIdentity:string)
    callSip(sipIdentity:string,headers:string[])
    callUser(toUserId:string)
    callUser(toUserId:string,headers:string[])
    callUserVideo(toUserId:string)
    callUserVideo(toUserId:string,headers:string[])
    getCall(callId:string)
    removeCallClientListener(callClientListener:()=>void)
    setRespectNativeCalls(respectNativeCalls:boolean)
    \n

    Get MessageClient

    \n
    sinchClient.getMessageClient();
    \n

    e.g

    \n
    var messageClient = sinchClient.getCallClient();
    \n

    Methods

    \n
    var message = sinchClient.writableMessage();
    var message = sinchClient.writableMessage([\"triniwiz\",\"brad\",\"jen\",\"peter\"],\"Hi\");
    var message = sinchClient.writableMessage(\"triniwiz\",\"Sup\");
    messageClient.send(message);
    \n
    addMessageClientListener(callback:()=>void);
    removeMessageClientListener(callback:()=>void);
    send(message:WriteableMessage);
    \n

    Get VideoController

    \n
     sinchClient.getVideoController()
    \n

    e.g

    \n
    var videoController = sinchClient.getVideoController();
    videoController.getCaptureDevicePosition() 
    videoController.getLocalView() 
    videoController.getRemoteView() 
    videoController.setBorderColor(float r, float g, float b)
    videoController.setCaptureDevicePosition(int facing)
    videoController.setResizeBehaviour(VideoScalingType type)
    videoController.toggleCaptureDevicePosition()
    \n

    Get AudioController

    \n
      sinchClient.getAudioController()
    \n

    e.g

    \n
    var audioController = sinchClient.getAudioController();

    audioController.mute();
    audioController.unmute();
    audioController.enableSpeaker();
    audioController.disableSpeaker();
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dante1304/ns-share-file":{"name":"@dante1304/ns-share-file","version":"1.0.1","license":"Apache-2.0","readme":"

    @nativescript/share-file

    \n
    ns plugin add @1304dante/ns-share-file
    \n

    Share files between apps on android and ios

    \n

    Usage

    \n

    On android you need to add a file provider to AndroidManifest.xml and a download paths value file,\nhere's and example with one located in App_Resources\\Android\\src\\main\\res\\xml\\download_path.xml

    \n

    AndroidManifest.xml

    \n
    <provider
      android:name=\"androidx.core.content.FileProvider\"
      android:authorities=\"com.package.name.provider\"
      android:grantUriPermissions=\"true\"
      android:exported=\"false\">
      <meta-data
        android:name=\"android.support.FILE_PROVIDER_PATHS\"
        android:resource=\"@xml/download_path\"
        tools:replace=\"android:resource\" />
    </provider>
    \n

    download_path.xml

    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
    <paths xmlns:android=\"http://schemas.android.com/apk/res/android\">
          <external-path
            name=\"external\"
            path=\".\" />
          <external-files-path
            name=\"external_files\"
            path=\".\" />
          <cache-path
            name=\"cache\"
            path=\".\" />
          <external-cache-path
            name=\"external_cache\"
            path=\".\" />
        <files-path
            name=\"files\"
            path=\".\" />
    </paths>
    \n

    TypeScript usage:

    \n
        import { ShareFile } from '@1304dante/ns-share-file';
        import { knownFolders, path} from '@nativescript/core';

        export class SharingClass {
            constructor() {
                let fileName = this.documentsLocation() + 'path/to/file'
                ShareFile.share({
                    path: fileName,
                    android: { //android specific
                      title: 'Open text file with:'
                    },
                    ios: { //ios specific
                      animated: true,
                      rect: { //ipad specific
                          x: 110,
                          y: 110,
                          width: 0,
                          height: 0
                      }
                    }
                });
            }

          public documentsLocation() {
              if (global.isAndroid) {
                  return android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS).toString() +
                  '/documents';
              }

              if (global.isIOS) {
                 return path.join(knownFolders.currentApp().path) + '/documents';
              }
          }
        }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"testnsfire":{"name":"testnsfire","version":"11.1.4","license":"MIT","readme":"

    NativeScript Firebase plugin

    \n

    \"Firebase\"/

    \n
    \n

    For NativeScript 7 compatibility, run tns plugin add testnsfire.

    \n
    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n
    \n

    For NativeScript 6.1+ compatibility, install polugin version 10: tns plugin add nativescript-plugin-firebase@10.

    \n
    \n
    \n

    For NativeScript 6.0 and lower, stick to plugin version < 10.

    \n
    \n

    \"NPM\n\"Downloads\"\n\"TotalDownloads\"

    \n

    Features

    \n\n

    Prerequisites

    \n

    Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

    \n

    Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

    \n
      \n
    • \n

      iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

      \n
      • \n
    • \n

      Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n
      • \n
    \n

    Note: for using separate versions of these files for development and production environments see this section

    \n

    Installation

    \n

    If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

    \n

    From the command prompt go to your app's root folder and execute this for NativeScript 7+:

    \n
    tns plugin add testnsfire
    \n

    or for NativeScript 6:

    \n
    tns plugin add nativescript-plugin-firebase
    \n

    This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

    \n
    \n

    Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

    \n
    \n
    \n

    Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

    \n
    \n

    Config

    \n

    If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

    \n

    You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

    \n

    You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

    \n

    Using Vue?

    \n

    Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

    \n

    If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

    \n

    iOS (Cocoapods)

    \n

    The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

    \n

    Google Play Services Version

    \n

    The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

    \n
    project.ext {
        googlePlayServicesVersion = \"+\"
    }
    \n

    Usage

    \n

    Demo app

    \n

    If you want a quickstart, clone the repo, then:

    \n
      \n
    • cd src.
      • \n
    • npm i (just answer 'n' to any prompts as they are ignored anyway).
      • \n
    • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
      • \n
    \n

    Start-up wiring

    \n

    We need to do some wiring when your app starts, so open app.js and add this before application.start();:

    \n
    JavaScript
    \n
    // NativeScript 7+
    var firebase = require(\"testnsfire\");

    // NativeScript 6-
    var firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
        function () {
          console.log(\"firebase.init done\");
        },
        function (error) {
          console.log(\"firebase.init error: \" + error);
        }
    );
    \n

    TypeScript

    \n
    // NativeScript 7+
    import { firebase } from \"testnsfire\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs.
    }).then(
      () => {
        console.log(\"firebase.init done\");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );
    \n

    Angular

    \n

    Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

    \n
    // NativeScript 7+
    import { firebase } from \"testnsfire\";

    // NativeScript 6-
    const firebase = require(\"nativescript-plugin-firebase\");

    @Component({
        // ...
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
        firebase.init({
          // Optionally pass in properties for database, authentication and cloud messaging,
          // see their respective docs.
        }).then(
          () => {
            console.log(\"firebase.init done\");
          },
          error => {
            console.log(`firebase.init error: ${error}`);
          }
        );
      }
    }
    \n

    Known issues on iOS

    \n

    Trouble running on the simulator

    \n

    Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

    \n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>
    <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
    <plist version=\"1.0\">
    <dict>
        <key>com.apple.keystore.access-keychain-keys</key>
        <true/>
        <key>com.apple.keystore.device</key>
        <true/>
    </dict>
    </plist>
    \n

    Authentication failed: invalid_token

    \n

    On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

    \n
    [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
    or
    [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
    \n

    This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

    \n
    firebase.init({
      // Optionally pass in properties for database, authentication and cloud messaging,
      // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
      iOSEmulatorFlush: true
    }).then()
    \n

    Pod dependency error

    \n

    If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

    \n

    This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

    \n

    Known issues on Android

    \n

    Genymotion

    \n

    You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

    \n

    DexIndexOverflowException

    \n
    com.android.dex.DexIndexOverflowException: method ID not in..
    \n

    Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }  
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }  
    }
    \n

    java.lang.OutOfMemoryError: GC overhead limit exceeded

    \n

    Increase the Java Max Heap Size like this (the bit at the end):

    \n
    android {  
      defaultConfig {  
        applicationId = \"__PACKAGE__\"  
        multiDexEnabled true
        generatedDensities = []
      }
      aaptOptions {  
        additionalParameters \"--no-version-vectors\"  
      }
      dexOptions {
        javaMaxHeapSize \"4g\"
      }
    }
    \n

    FirebaseApp with name [DEFAULT] doesn't exist

    \n

    Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

    \n

    Errors regarding API level 26.0.0

    \n

    Update your local Android SDKs:

    \n

    Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

    \n

    Found play-services:A.C.D, but version B.X.Y is needed..

    \n

    Update your Android bits like the issue above and reinstall the android platform in your project.

    \n

    include.gradle: Failed to apply plugin .. For input string: "+"

    \n

    You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

    \n
    android {  
      // other stuff here

      project.ext {
        googlePlayServicesVersion = \"15.0.0\"
      }
    }
    \n

    Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

    \n

    Separation of Environments

    \n

    It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

    \n

    Setup

    \n
      \n
    1. \n

      Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

      \n
      2. \n
    2. \n

      Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

      \n
        \n
      • iOS\n
          \n
        • app/App_Resources/iOS/GoogleService-Info.plist.dev
          • \n
        • app/App_Resources/iOS/GoogleService-Info.plist.prod
          • \n
        \n
        • \n
      • Android\n
          \n
        • app/App_Resources/Android/google-services.json.dev
          • \n
        • app/App_Resources/Android/google-services.json.prod
          • \n
        \n
        • \n
      \n
      3. \n
    \n

    Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

    \n

    Build

    \n

    The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

    \n
      \n
    • dev will be selected if you run with either --env.dev, --env.development or --env.staging flags.
      • \n
    • prod will be selected if you run with either --env.prod or --env.production.
      • \n
    \n

    Note: Using the --release flag without any of the above flags will set the default environment to production. If you need to create a release with dev environment you'll need to set it explicitly.

    \n

    Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-ng-plugin-seed":{"name":"ns-ng-plugin-seed","version":"0.0.5","license":"MIT","readme":"

    Nativescript + Angular Minimal Plugin seed

    \n
      \n
    • git clone https://github.com/jogboms/ns-ng-plugin-seed
      • \n
    • cd ns-ng-plugin-seed
      • \n
    • Delete .git
      • \n
    • Create new instance of Git
      • \n
    • Replace every instance of ns-ng-plugin-seed in package.json and src/package.
      • \n
    • Then npm run setup
      • \n
    • After changes
      • \n
    • git add . & git commit -m "Initial Commit"
      • \n
    • And finally, npm run push-pub
      • \n
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fubaydullaev/nativescript-epub-folio":{"name":"@fubaydullaev/nativescript-epub-folio","version":"1.0.1","license":"Apache-2.0","readme":"

    @fubaydullaev/nativescript-epub-folio

    \n
    ns plugin add @fubaydullaev/nativescript-epub-folio
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-preview":{"name":"nativescript-camera-preview","version":"1.0.5","license":"MIT","readme":"

    Camera Preview for nativescript

    \n

    I can't take any credits for this. This is all the work from: https://github.com/NickIliev/NativeScript-cameraApp-poc\nimplemented in a module (that might not work).

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-i18n":{"name":"nativescript-i18n","version":"0.4.1","license":"MIT","readme":"

    nativescript-i18n

    \n

    This is a plugin for Nativescript that implements i18n in an easy manner.

    \n

    It uses the native capabilities of each platform without the need of a separate JS or JSON file.

    \n

    It is heavily inspired from NativeLang and this thread

    \n

    The plugin defines an L() method at the application level so it will be accessible both from the XML and JS files.

    \n

    Please don't forget to read the IMPORTANT section! :smile:

    \n

    Credits

    \n
    \n

    Most thanks goes out to Dan Tamas (@rborn) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

    \n
    \n

    Thanks to @TheBrousse and @ValioStoychev for the help with iOS and @alejonext for creating the initial module.

    \n

    Also a big thanks to all the contributors that made this repo better :)

    \n

    Usage

    \n

    Install the plugin in your app

    \n
    npm install --save nativescript-i18n
    \n

    Create a folder i18n in the app folder with the following structure:

    \n
    app
      |
      |-- App_Resources
      |
    [...]
      |
      |-- i18n
           |
           |-- en
                 |- strings.xml
           |
           |-- es
                 |- strings.xml
    \n

    Require nativescript-i18n and globals in app.js as early as possible (I do it even before I require the application module, the very first 2 lines).

    \n
    \trequire('globals');
    \trequire('nativescript-i18n');
    \n

    If you use TypeScript and want to use L() in the code you will need to cast the global var to any like belowin the file you intend to use L(). You can read more about this in https://github.com/rborn/nativescript-i18n/issues/57

    \n
    \tdeclare var global:any;
    \n

    And in the code use it like this:

    \n

    XML files

    \n

    Simple string

    \n
    \t<Label text=\"{{ L('hello') }}\">
    \n

    It supports one or multiple replacements, directly or from the model

    \n
    \t<Label text=\"{{ L('hello') }}\" class=\"title\" textWrap=\"true\" />
    \t<Label text=\"{{ L('hello_replace','my friend') }}\" class=\"message\" textWrap=\"true\" />
    \t<Label text title=\"{{ L('multi_replace','direct replacement', modelReplacement) }}\">
    \n

    Assuming you have defined in strings.xml the definitions and in the model the replacement modelReplacement variable

    \n
    \t<string name=\"hello\">Hello!</string>
    \t<string formatted=\"false\" name=\"hello_replace\">Hello %s!</string>
    \t<string formatted=\"false\" name=\"multi_replace\">We can replace directly in xml: %s or from the model: %s</string>
    \n

    To define a custom path for the i18n files (other than App_Resources/i18n), add this configuration to your project's package.json

    \n
    \"nativescript-i18n\": {
        \"customLangPath\": \"app/resources/i18n\"
    }
    \n

    Language defaults to english if the phone's language doesn't match any of your defined languages. If you want to set your own default language, add this configuration to your project's package.json

    \n

    Keep in mind that on iOS the language picked by the device will be based on the order in Settings -> Language & Region -> Preferred language order

    \n
    \"nativescript-i18n\": {
        \"defaultLang\": \"es\"
    }
    \n

    IMPORTANT

    \n
      \n
    • \n

      for all the strings definitions that have a replacement you need to add formatted=false

      \n
      • \n
    • \n

      quotes and apostrophes need to be escaped <string name="with_quotes">Apostrophe: \\' and quotes: \\"</string>

      \n
      • \n
    • \n

      % signs need to be escaped by setting formatted="false" and then doubling them up: <string formatted="false" name="percent"> Percent Sign: %%</string>

      \n
      • \n
    • \n

      We need to use the following format for the strings.xml otherwise app build will fail

      \n
      <?xml version=\"1.0\" encoding=\"utf-8\"?>
      <resources>
      </resources>
      \n
      • \n
    • \n

      We need to add in strings.xml the next two lines for the app to compile properly which also makes the app name localized on both ios and android and sets the title of the initial activity on android

      \n
      <string name=\"app_name\">demo</string>
      <string name=\"title_activity_kimera\">demo</string>
      \n
      • \n
    • \n

      Sometimes you might need to fully delete the app from the device/sim for the plugin to fully work (usually only when the plugin is installed at a later stage of the project development)

      \n
      • \n
    • \n

      If you get TypeScript complaining about L not being defined, then put /// <reference path="./node_modules/nativescript-i18n/references.d.ts" /> Nativescript i18n in your references.d.ts.

      \n
      • \n
    \n

    JS files

    \n
    \tconsole.log(L('home'));
    \tconsole.log(L('multi_replace', 'ONE', 'TWO'));
    \n

    Angular

    \n

    In case you use Angular for your app, things get a little more complicated.

    \n

    My Angular skills are zero but @alejonext has a solution for it in this comment.

    \n

    Update 28.06.2016

    \n

    @AirMike and @loloof64 did a great job by testing and further improving @alejonext's PR so the plugin includes now support for Angular :bow:

    \n

    After you import the plugin in the app in the usual way just need to import the module NativeScriptI18nModule from nativescript-i18n/angular in your file (main.ts)

    \n

    (Please be aware that the below intructions are in typescript not pure js)

    \n
    \timport { NativeScriptI18nModule } from \"nativescript-i18n/angular\";
    \n

    and then import it in your app module

    \n
    \t@NgModule({


          imports: [
            NativeScriptI18nModule
          ]


        })
        export class AppModule { }
    \n

    Angular usage is {{ value | L:args }}

    \n
    \t<Button text=\"{{ 'Login' | L }}\"></Button>
    \n

    As for a more detailed example :

    \n

    You can put a code like this in your main.ts :

    \n
        import { NativeScriptI18nModule } from 'nativescript-i18n/angular';

        import { NativeScriptModule } from \"nativescript-angular/platform\";
        import { NgModule } from \"@angular/core\";
        import { AppComponent } from \"./app.component\";


        @NgModule({

          imports: [
            NativeScriptModule,
            NativeScriptI18nModule
          ],

          declarations: [
            AppComponent,
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
    \n

    For the main component, let's say that the following html template is used (the strings definitions follow next):

    \n
        <GridLayout rows=\"*,*,*\">
            <label row=\"0\" text=\"{{'menuitem_new_file' | L }}\"></label>
            <label row=\"1\" text=\"{{'menuitem_new_folder' | L }}\"></label>
            <label row=\"2\" text=\"{{'menuitem_new' | L:'---':'***':124.25693 }}\"></label>
        </GridLayout>
    \n

    And let's say that these are the string definitions for "en" (put in app/i18n/en/strings.xml)

    \n
        <resources>
            <string name=\"app_name\">Chess Exercices Cupboard</string>
            <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

            <string formatted=\"false\" name=\"menuitem_new\">%s New... %s %0.2f</string>
            <string name=\"menuitem_new_file\">File</string>
            <string name=\"menuitem_new_folder\">Folder</string>
        </resources>
    \n

    And the french translations (put in app/i18n/fr/srings.xml)

    \n
        <resources>
            <string name=\"app_name\">Chess Exercices Cupboard</string>
            <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

            <string formatted=\"false\" name=\"menuitem_new\">%s Nouveau... %s %0.2f</string>
            <string name=\"menuitem_new_file\">Fichier</string>
            <string name=\"menuitem_new_folder\">Dossier</string>
        </resources>
    \n

    Then if your phone is configured for french you'll see something like this :

    \n
        Fichier
        Dossier
        --- Nouveau... *** 124.25693
    \n

    Or, if configured for english or "unrecognized" language :

    \n
        File
        Folder
        --- New... *** 124.25693
    \n

    Demo

    \n

    Please have a look in the demo folder for a working example.

    \n

    iOS Permission text

    \n

    Add this special keys to app/i18n/(lang)/strings.xml used to notify user, in configured language while showing permission alerts.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyDescription of key
    NSAppleMusicUsageDescriptionSpecifies the reason for your app to use the media library
    NSBluetoothPeripheralUsageDescriptionSpecifies the reason for your app to use Bluetooth
    NSCalendarsUsageDescriptionSpecifies the reason for your app to access the user’s calendars
    NSCameraUsageDescriptionSpecifies the reason for your app to access the device’s camera
    NSContactsUsageDescriptionSpecifies the reason for your app to access the user’s contacts
    NSHealthShareUsageDescriptionSpecifies the reason for your app to read the user’s health data
    NSHealthUpdateUsageDescriptionSpecifies the reason for your app to make changes to the user’s health data
    NSHomeKitUsageDescriptionSpecifies the reason for your app to access the user’s HomeKit configuration data
    NSLocationAlwaysUsageDescriptionSpecifies the reason for your app to access the user’s location information at all times
    NSLocationWhenInUseUsageDescriptionSpecifies the reason for your app to access the user’s location information while your app is in use
    NSMicrophoneUsageDescriptionSpecifies the reason for your app to access any of the device’s microphones
    NSMotionUsageDescriptionSpecifies the reason for your app to access the device’s accelerometer
    NSPhotoLibraryUsageDescriptionSpecifies the reason for your app to access the user’s photo library
    NSRemindersUsageDescriptionSpecifies the reason for your app to access the user’s reminders
    NSSiriUsageDescriptionSpecifies the reason for your app to send user data to Siri
    NSSpeechRecognitionUsageDescriptionSpecifies the reason for your app to send user data to Apple’s speech recognition servers
    \n

    (Pseudo) roadmap/ideas

    \n

    The following ideas are inspired by this comment and issues posted by the users of this plugin

    \n
      \n
    • [x] Android implementation - use the native strings.xml in App_Resources/Android/values/
      • \n
    • [x] iOS implementation - use the native Localizable.strings files (where do we need to put this files?)
      • \n
    • [x] Allow formatted strings, eg: L('hello', 'world') to translate the definition hello %s (and/or other other types %d, etc)
      • \n
    • [ ] Possibly a cli tool/command to extract strings from our language function uses and put them into our strings.xml to be translated
      • \n
    • [x] Move the strings.xml files in app/i18n (exact folder structure to be decided) and use them as a base for the next points\n
        \n
      • [x] Build a hook to move the files in the right place before compiling for Android
        • \n
      • [x] Build a hook to translate and move the files in the right place before compiling for iOS
        • \n
      \n
      • \n
    • [ ] What about assets (images/splash screens/etc) ? might be out of scope of this plugin
      • \n
    • [x] What about the app name?
      • \n
    • [ ] Do we need a cache at the module level so we don't have to cross the native bridge everytime? (a benchmark should be done to decide this)
      • \n
    • [x] Make the cache aware of the current language and language change
      • \n
    • [x] Angular support
      • \n
    • [x] Custom path for the language files (#28)
      • \n
    • [x] Set default language for app (#11)
      • \n
    • [x] Show translations on app permission alerts on iOS (#45)
      • \n
    • [ ] Report errors on case some files could not be created
      • \n
    • [ ] Webpack support (#49, #42)
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"korp-carga-inicial":{"name":"korp-carga-inicial","version":"1.1.0","license":"Apache-2.0","readme":"

    Your Plugin Name

    \n

    Add your plugin badges here. See nativescript-urlhandler for example.

    \n

    Then describe what's the purpose of your plugin.

    \n

    In case you develop UI plugin, this is where you can add some screenshots.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

    \n

    Installation

    \n

    Describe your plugin installation steps. Ideally it would be something like:

    \n
    tns plugin add <your-plugin-name>
    \n

    Usage

    \n

    Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

    \n
    ```javascript\nUsage code snippets here\n```)\n
    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@iplab/ngx-l10n":{"name":"@iplab/ngx-l10n","version":"2.1.8","license":"MIT","readme":"

    @iplab/ngx-l10n

    \n
    \n

    Pure Angular localization (l10n) library.

    \n
    \n

    \"npm\n\"Build\n\"Known

    \n

    Demo

    \n

    Click here for preview

    \n

    Description

    \n
      \n
    • It's an Angular functional set (pipe, directive, service) used to localize application
      • \n
    • Compatible with Angular 2+ versions
      • \n
    • No external dependency
      • \n
    • Supported some of the most used localization files: .properties, .po, .json
      • \n
    • Load localization file/s when you need it
      • \n
    • Easily manage localization storage
      • \n
    • Customizable localization loader
      • \n
    \n

    Tested with

    \n
      \n
    • Firefox (latest)
      • \n
    • Chrome (latest)
      • \n
    • Chromium (latest)
      • \n
    • Edge
      • \n
    • IE11
      • \n
    \n

    Installing / Getting started

    \n
    npm install @iplab/ngx-l10n
    \n

    Use the following snippet inside your app module:

    \n
    import { L10nModule, L10nService, LanguageCodes } from '@iplab/ngx-l10n';
    ...
    ...

    @Injectable()
    export class LocalizationResolve implements Resolve {

        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }

        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }

    @NgModule({
        imports: [
            BrowserModule,
            L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
            RouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [LocalizationResolve],
        bootstrap: [AppComponent]
    })
    export class AppModule {}
    \n

    Use the following snippet inside your component:

    \n
    import { L10nService } from '@iplab/ngx-l10n';


    @Component({
      ...
    })
    export class AppComponent {

      constructor(private localization: L10nService) {
      }
    }
    \n

    Use the following snippet inside your template:

    \n
    <div l10n=\"app.hello.key\" [l10n-args]=\"params\"></div>
    <div l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></div>
    <div l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></div>

    <div [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></div>
    <div [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></div>

    <div>{{'app.hello.key' | l10n:param }}</div>
    <div [innerHTML]=\"'app.hello.key' | l10n\"></div>
    <div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>
    \n

    NativeScript

    \n
    tns plugin add @iplab/ngx-l10n
    \n

    Use the following snippet inside your app module:

    \n
    import { L10nModule, L10nService, L10nBaseLoader } from '@iplab/ngx-l10n';
    import { knownFolders } from \"file-system\";
    import { Subject, Observable, from } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { Resolve } from \"@angular/router\";
    ...
    import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
    import { NativeScriptRouterModule } from \"nativescript-angular/router\";
    ...
    ...

    @Injectable()
    export class CustomLoader extends L10nBaseLoader {

        private readonly folderName = 'locales'; // folder where you place your locale files, 
                                                // in our case that is locales/en.locales.properties
        private readonly documents = knownFolders.currentApp();
        private readonly folder = this.documents.getFolder(this.folderName);

        public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
            let fileType = this.getFileExtension( url );                           
            let file = this.folder.getFile(url);

            return from(file.readText())
                    .pipe(map((response) => {
                        return { response, fileType }
                    }))    ;
        }
    }

    @Injectable()
    export class LocalizationResolve implements Resolve {

        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }

        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }

    @NgModule({
        imports: [
            NativeScriptModule,
            L10nModule.forRoot({ 
                config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
                loader: CustomLoader
            }),
            NativeScriptRouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [
            LocalizationResolve,
            L10nService, // because currently NativeScript doesn\\'t work with @Injectable({ providedIn: \\'root\\' })
            CustomLoader
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {}
    \n

    Use the following snippet inside your template:

    \n
    <ActionBar title=\"{{ 'app.header.title' | l10n }}\" class=\"action-bar\"></ActionBar>
    <ActionBar [title]=\"'app.hello.key' | l10n\"></ActionBar>
    <Label text=\"{{'app.hello.key' | l10n }}\"></Label>
    <Button text=\"{{'app.hello.key' | l10n }}\" (tap)=\"onTap($event)\"></Button>
    \n

    If bindingProperty in configuration is set to text l10 directive\nwill use it as default element property

    \n
    <Label l10n=\"app.hello.key\" [l10n-args]=\"params\"></Label>
    <Label l10n=\"app.hello.key\" [l10n-args]=\"{value: 'world'}\"></Label>
    <Label l10n=\"app.hello.key\" l10n-args=\"{value: 'world'}\"></Label>

    <Label [l10n]=\"'app.hello.key'\" [l10n-args]=\"params\"></Label>
    <Label [l10n]=\"'app.hello.key'\" l10n-args=\"{value: 'world'}\"></Label>
    \n

    Developing

    \n

    Built With:

    \n
      \n
    • Angular
      • \n
    • RxJS
      • \n
    \n

    Setting up Dev

    \n

    This project was generated with Angular CLI version 6.0.7.

    \n

    Angular CLI must be installed before building L10n project.

    \n
    npm install -g @angular/cli
    \n
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run start
    \n

    Open "http://localhost:4200" in browser

    \n

    Versioning

    \n

    We use SemVer for versioning. For the versions available, see the link to tags on this repository.

    \n

    Tests

    \n

    This project was generated with Angular CLI version 6.0.7.

    \n

    Angular CLI must be installed before testing L10n project.

    \n
    npm install -g @angular/cli
    \n
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run test
    \n

    Contributing

    \n

    Want to help?

    \n

    Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

    \n

    Licensing

    \n

    L10n is freely distributable under the terms of the MIT license.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/nativescript-google-maps-sdk-n7":{"name":"@res0/nativescript-google-maps-sdk-n7","version":"3.0.9","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ncenerar/nativescript-activelook-sdk":{"name":"@ncenerar/nativescript-activelook-sdk","version":"1.0.2","license":"Apache-2.0","readme":"

    @ncenerar/nativescript-activelook-sdk

    \n
    ns plugin add @ncenerar/nativescript-activelook-sdk
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"bev-nativescript-webrtc":{"name":"bev-nativescript-webrtc","version":"2.0.8","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wkwebview":{"name":"nativescript-wkwebview","version":"1.0.0","license":"MIT","readme":"

    NativeScript WKWebView

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fklingler/nativescript-image-zoom":{"name":"@fklingler/nativescript-image-zoom","version":"4.1.5","license":"Apache-2.0","readme":"

    Nativescript nativescript-image-zoom

    \n
    ns plugin add @triniwiz/nativescript-image-zoom
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-label":{"name":"nativescript-label","version":"1.0.0","license":"MIT","readme":"

    NativeScript Label

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@billow/nsv-http":{"name":"@billow/nsv-http","version":"1.0.5","license":"MIT","readme":"

    NativeScript-Vue Http

    \n

    A wrapper for the default http module in NativeScript. It also fixes some quirks with Android and gzip.

    \n

    Installation

    \n
    npm i @billow/nsv-http
    \n

    Usage

    \n
    // backend.js example.

    import { Http } from \"@billow/nsv-http\"
    import { isAndroid } from 'platform'
    import { getString } from \"application-settings\" // Example Only

    let http = new Http({

      // Configure a base url for all requests
      baseUrl: 'https://api.test.com',

      // Example headers, typically this is what we use when interacting with a Laravel Passport API.
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json;charset=utf-8',
        'Accept-Encoding': isAndroid ? 'identity' : 'gzip, deflate, br', // Android requests fail when the server is gzipping responses, this is a work around.
        'X-Requested-With': 'XMLHttpRequest',
        'Authorization': 'Bearer ' + getString('token', '')
      }
    })

    http.post('/path', {...}, successCallback, errorCallback)
    http.get('/path', successCallback, errorCallback)
    \n

    As a Vue plugin

    \n
    import Http from '@billow/nsv-http'

    Vue.use(Http, {

      // Configure a base url for all requests
      baseUrl: 'https://api.test.com',

      headers: {...}
    })

    methods: {
      loadUser() {
        this.$http.get('/user/1', content => {
          let responsePayload = content
        }, error => {
          // handle the error
        })
      },
      createUser() {
        this.$http.post('/user', {
          name: 'John',
          surname: 'Doe'
        }, content => {
          let responsePayload = content
        }, error => {
          // handle the error
        })
      }
    }
    \n

    Updating the Authorization Header

    \n
    let http = new Http({...})

    let token = '12345'

    http.setAuthorizationHeader(`Bearer ${token}`)
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-square-reader":{"name":"nativescript-square-reader","version":"1.0.6","license":"Apache-2.0","readme":"

    NativeScript Square Reader

    \n

    iOS only (for now) nativescript plugin for the Square Reader SDK https://squareup.com/us/en/developers/reader-sdk

    \n

    Note: will only work for iOS 11+. To support older versions, consider using\nhttps://github.com/fhackenb/nativescript-square-plugin

    \n

    Installation

    \n

    tns plugin add nativescript-square-reader

    \n

    Setup

    \n

    iOS setup guide: https://docs.connect.squareup.com/payments/readersdk/setup-ios

    \n
      \n
    1. tns plugin add nativescript-square-reader
      2. \n
    2. Follow steps 1 - 2 on the above list to get a SquareReaderSDK.framework
      3. \n
    3. Add the SquareReaderSDK.framework to your build path
      4. \n
    4. Update your Info.plist with usage descriptions (Step 3 from link)
      5. \n
    5. Get an auth code https://docs.connect.squareup.com/payments/readersdk/mobile-authz-guide
      6. \n
    6. Get coding!
      7. \n
    \n

    Usage

    \n

    See demo app for more detailed example usage

    \n

    Authenticate:

    \n
    this.squareReader = new SquareReader();
    this.squareReader.authenticate(this.code)
        .then( (res: SquareAuthStatus) => {
            if (res.code === 0) {
                // authenticated
            } else {
                // not authenticated
            }
        });
    \n

    Check out:

    \n
    this.squareReader.startCheckout(100, this.page.ios)
        .subscribe( (result: SquareCheckoutResult) => {
            switch (result.status) {
                case 1:
                console.log(\"Cancelled!\");
                break;
                case 2:
                console.log(\"Failed!\");
                break;
                case 0:
                console.log(\"Succeeded!\");
                console.log(\"LocationId:\", result.checkoutResult.locationID);
                console.log(\"Tenders:\", result.checkoutResult.tenders);
                break;
            }
        });
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-filepicker":{"name":"nativescript-simple-filepicker","version":"1.1.2","license":"MIT","readme":"

    NativeScript Simple FilePicker Plugin

    \n

    A simple plugin for providing file picker functionality to your NativeScript app.

    \n

    Installation

    \n
    tns plugin add nativescript-simple-filepicker
    \n

    Usage

    \n
    import { openFilePicker } from 'nativescript-simple-filepicker';

    openFilePicker({
        extensions?: string[]; // Defaults to all
        multipleSelection?: boolean; // Defaults to false
    }).then((data) => {
        console.log(data.files);
    });
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-overfullscreen":{"name":"nativescript-camera-overfullscreen","version":"3.2.1","readme":"

    Welcome to the nativescript-camera-overfullscreen plugin for NativeScript framework

    \n

    Prerequisites

    \n\n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n

    Navigate to project folder and run NativeScript-CLI command

    \n
    tns plugin add nativescript-camera-overfullscreen
    \n

    Plugin could be added as a standard npm dependency running command

    \n
    npm install nativescript-camera-overfullscreen --save
    \n
    \n

    Note: the --save flag will add the plugin as dependency in your package.json file

    \n
    \n

    Requesting permissions

    \n

    Newer API levels of Android and iOS versions are requiring explicit permissions in order the application\nto have access to the camera and to be able to save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    camera.requestPermissions();
    \n
    \n

    Note: Older versions won't be affected by the usage of the requestPermissions method.

    \n
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    var camera = require(\"nativescript-camera-overfullscreen\");
    \n
    import * as camera from \"nativescript-camera-overfullscreen\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to recieve image asset

    \n
    \n
    var imageModule = require(\"ui/image\");
    camera.takePicture()   
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new imageModule.Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";
    camera.takePicture({).
        then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    var imageModule = require(\"ui/image\");

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options)   
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    import { Image } from \"ui/image\";

    var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
    camera.takePicture(options).
        then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    var isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-ts":{"name":"tns-template-blank-ts","version":"6.5.4","license":"Apache-2.0","readme":"

    NativeScript Core with TypeScript Blank Template

    \n

    App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

    \n

    Quick Start

    \n

    Execute the following command to create an app from this template:

    \n
    tns create my-blank-ts --template tns-template-blank-ts
    \n
    \n

    Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-blank-ts).

    \n
    \n

    If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

    \n
    # clone nativescript-app-templates monorepo locally
    git clone git@github.com:NativeScript/nativescript-app-templates.git

    # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
    tns create my-blank-ts --template nativescript-app-templates/packages/template-blank-ts
    \n

    NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

    \n

    Walkthrough

    \n

    Architecture

    \n

    The application root module:

    \n
      \n
    • /app/app-root - sets up a Frame that lets you navigate between pages.
      • \n
    \n

    There is a single blank page module that sets up an empty layout:

    \n
      \n
    • /app/home/home-page
      • \n
    \n

    Home page has the following components:

    \n
      \n
    • ActionBar - It holds the title of the page.
      • \n
    • GridLayout - The main page layout that should contains all the page content.
      • \n
    \n

    Get Help

    \n

    The NativeScript framework has a vibrant community that can help when you run into problems.

    \n

    Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    \n

    If you have found an issue with this template, please report the problem in the NativeScript repository.

    \n

    Contributing

    \n

    We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-typedoc-theme":{"name":"nativescript-typedoc-theme","version":"1.1.0","license":"Apache-2.0","readme":"

    nativescript-typedoc-theme

    \n

    A TypeDoc theme for the\nNativeScript Cross-Platform Modules\nAPI-Refefence.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-tooltip":{"name":"@triniwiz/nativescript-tooltip","version":"3.0.0","license":"Apache-2.0","readme":"

    Nativescript nativescript-tooltip

    \n
    ns plugin add @triniwiz/nativescript-tooltip
    \n

    API documentation

    \n

    Documentation for the latest stable release

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-fix":{"name":"nativescript-nfc-fix","version":"5.1.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-drawer-template":{"name":"nativescript-angular-drawer-template","version":"2.0.0","license":"MIT","readme":"

    Nativescript-Angular-Drawer-Template

    \n

    A starter template to quickly create nativescript angular projects with drawer pages.

    \n

    Usage

    \n

    tns create my-project-name --template nativescript-angular-drawer-template

    \n

    Preview

    \n

    Android

    \n

    \"android-preview\"

    \n

    iOS

    \n

    \"ios-preview\"

    \n

    How To Change Menu Items

    \n

    You can change the menu items of drawer from app/modules/shared/side-drawer-page/side-drawer-page.component.ts file as shown below:

    \n
    navMenu: any[] = [
        { name: 'Home', commands: ['/'] },
        { name: 'About', commands: ['/about'] },
        { name: 'Contact', commands: ['/contact'] }
    ];
    \n

    How To Create New Page

    \n

    You just need to wrap the content template of the new page inside <side-drawer-page> tag as shown below:

    \n
    <side-drawer-page>
        <GridLayout>
            <Label text=\"Hello World\"></Label>
        </GridLayout>
    </side-drawer-page>
    \n

    You can refer home, contact or about sample modules for reference.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-uuid":{"name":"nativescript-ios-uuid","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns7-swiss-army-knife":{"name":"ns7-swiss-army-knife","version":"1.0.0","license":"Apache-2.0","readme":"

    @nativescript/swiss-army-knife

    \n

    support Nativescript 7

    \n
    ns plugin add @nativescript/swiss-army-knife
    \n

    Usage

    \n

    Common Functions

    \n

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

    \n

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

    \n

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

    \n

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

    \n

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

    \n

    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.

    \n

    dismissSoftKeyboard Dismiss the soft keyboard.

    \n

    ActionBar Utilities\nactionBarSetTitle Programmatically set title on ActionBar

    \n

    actionBarAddButton Programmatically add button to the ActionBar

    \n

    actionBarClearButtons Programmatically remove all buttons from the ActionBar

    \n

    Contributor\nhttps://github.com/JoshDSommer/nativescript-swiss-army-knife

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ncenerar/nativescript-hello-world":{"name":"@ncenerar/nativescript-hello-world","version":"1.0.3","license":"Apache-2.0","readme":"

    @ncenerar/nativescript-hello-world

    \n
    ns plugin add @ncenerar/nativescript-hello-world
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-auto-complete-edit-text":{"name":"nativescript-auto-complete-edit-text","version":"1.1.8","license":"Apache-2.0","readme":"

    NativeScript Auto Complete Edit Text

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchbaselite":{"name":"nativescript-couchbaselite","version":"1.0.11","license":"GNU General Public License 3","readme":"

    nativescript-couchbaselite

    \n

    A nativescript plugin that brings you all couchbase features:

    \n
      \n
    • CRUD (with ttl...)
      • \n
    • conflict management
      • \n
    • CRUD attachment (file, image...)
      • \n
    • View (map, mapreduce...)
      • \n
    • Queries (full query features, live queries, all docs, group levels)
      • \n
    • Replication (pull and push, filters, authentication, channels, listeners...)
      • \n
    • Database encryption
      • \n
    • Typescript mapping object (return objects with getters/setters...)
      • \n
    \n

    Author

    \n\n

    How to use it

    \n

    1- Import dependency

    \n
    tns plugin add nativescript-couchbaselite
    \n

    2- Samples

    \n

    Import lib

    \n
    import {
        QueryResult, LiveQuery, QueryListener, Revision,
        DatabaseManager, Document, Database, AttachmentFactory, Emitter, AttachmentImage
    } from 'nativescript-couchbaselite';

    class User implements Document {
        docId: string;
        docRev: string;
        docType: string = \"USER\";
        name: string;
        registerAt: number;
        secure: boolean = false;
        set registerAtDate(d: Date) {
            this.registerAt = d.getTime();
        }
        get registerAtDate() {
            return this.registerAt ? new Date(this.registerAt) : null;
        }
        @Type(() => Group) group: Group = new Group;
        getName() {
            return this.name;
        }
    }
    \n

    Create Database encrypted

    \n
    let dbTest = DatabaseManager.getOrCreate({ name: \"test\", encryptionKey: \"SECURE\", create: true });
    \n

    Map Typescript Objects

    \n
    let mapping = new Map<string, any>();
    mapping.set(\"USER\", User);
    dbTest.setMapping(mapping);
    \n

    CRUD Document

    \n
    let user = new User;
    user.name = \"user1\";
    user.group.name = \"group1\";
    user.registerAtDate = now;
    user.secure = true;       
    dbTest.createDocument(user, \"ID\", { ttl: new Date() });
    let fetched: User = <User>dbTest.getDocument(user.docId);
    console.log(fetched.getName()); 
    fetched.group.name = \"group2\";
    dbTest.updateDocument(fetched.docId, fetched);               
    let success = dbTest.deleteDocument(user.docId);
    \n

    Crud Attachment

    \n
    let source = fromResource(\"icon\");
    let attach = AttachmentFactory.fromSource(source, \"yeah\", AttachmentImage.PNG);
    dbTest.setAttachment(\"ID\", attach);
    let attachments = dbTest.getAttachmentNames(\"ID\");
    let attach = dbTest.getAttachment(\"ID\", \"yeah\");
    removeAttachment(\"ID\",\"yeah\")
    \n

    Create view

    \n
    dbTest.createView({
        name: \"users\",
        revision: \"1\",
        map: (doc: User, emitter) => {
            if (doc.docType == \"USER\") {
                emitter.emit(doc.name.toLowerCase(), null);
            }
        }
    })
    \n

    Query View

    \n
    let founded = dbTest.queryView(\"users\", { mapOnly: true });
    founded = dbTest.queryView(\"users\", { mapOnly: true, startKey: \"user4\" });
    founded = dbTest.queryView(\"users\", { mapOnly: true, endKey: \"user0\" });
    founded = dbTest.queryView(\"users\", { mapOnly: true, startKeyDocID: \"ID4\" });
    founded = dbTest.queryView(\"users\", { mapOnly: true, endKeyDocID: \"ID0\" });
    founded = dbTest.queryView(\"users\", { mapOnly: true, descending: true });
    founded = dbTest.queryView(\"users\", { mapOnly: true, limit: 2 });
    founded = dbTest.queryView(\"users\", { mapOnly: true, skip: 3 });
    founded = dbTest.queryView(\"users\", { mapOnly: true, keys: [\"user1\", \"user2\"] });
    \n

    Use compound keys

    \n
    dbTest.createView({
        name: \"users_compound\",
        revision: \"1\",
        map: (doc: User, emitter) => {
            if (doc.docType == \"USER\") { 
                emitter.emit([doc.getName().toLowerCase(), doc.group.name.toLowerCase(), doc.registerAt, doc.registerAtDate, doc.secure], null); 
            }
        }
    })
    \n

    Use MapReduce

    \n
    dbTest.createView({
        name: \"users_bygroup\",
        revision: \"1\",
        map: (doc: User, emitter) => {
            if (doc.docType == \"USER\") {
                emitter.emit([doc.group.name, doc.getName().toLowerCase()], doc.name);
            }
        },
        reduce: (keys: any[], values: any[], rereduce: boolean) => {
            return values.length;
        }
    });
    \n

    Group by levels

    \n
    let founded = dbTest.queryView(\"users_bygroup\", { mapOnly: false, groupLevel: 1 });
    let groups = founded.getValues();
    \n

    Query Result manager

    \n
    let founded = dbTest.queryView(\"users_bygroup\", { mapOnly: false, groupLevel: 1 });
    let groups = founded.getValues();
    let value = founded.firstValue();
    let docs = <User[]>founded.getDocuments();
    let doc = founded.firstDocument();
    let docIds = founded.getDocumentIds();
    \n

    Query all docs

    \n
    let founded = dbTest.queryAllDocuments({ mapOnly: true });
    \n

    Use LiveQuery

    \n
    let listener = { 
        onRows(rows: QueryResult) { 
        }
    };
    let live = dbTest.liveQuery(\"users_live\", { mapOnly: true }, l);
    live.start();
    live.waitForRows();
    live.stop();
    \n

    Push Replication

    \n
    let url = \"http://localhost:4984/test/\";
    let push = dbTest.createPushReplication(url);
    push.setBasicAuthenticator(\"user\", \"password\");
    dbTest.createFilter({
        name: \"filter\",
        filter: (doc: Revision<Document>, params: Map<string, any>) => {
            return doc.id == \"ID1\";
        }
    });
    push.setFilter(\"filter\");
    let listener = {
        count: 0,
        onChange: (p) => {
            l.count = p.changesCount;
        }
    };
    push.addChangeListener(listener)
    push.start();
    \n

    Pull replication

    \n
    let url = \"http://localhost:4984/test/\";
    let pull = dbTest.createPullReplication(url);
    pull.setBasicAuthenticator(\"user\", \"password\");
    let pullCallback = {
        countEvent: 0,
        onChange: (p) => {
            pullCallback.countEvent++;
        }
    }
    pull.channels([\"channel4\"]);
    pull.setDocIds([\"ID1\"]);
    pull.addChangeListener(pullCallback);
    pull.start();
    \n

    Conflict management

    \n
    let conflicts = dbTest.getConflicts(\"ID\");
    let merged = mergeConflict(conflicts);
    dbTest.resolveConflict(\"ID\", merged);
    \n

    Listen database events

    \n
    dbTest.addChangeListener({
        onChange:(params:DatabaseListenerParam[])=>{

        }
    });
    \n

    Add any kind of attachment

    \n
    class CustomAttachment implements Attachment{
        getName() => {
            return name;//String
        },
        getStream () => {
            return bs;//InputStream or NSData
        },
        getType () => {
            return \"any/any\";//Content Type
        }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-rtl/ui":{"name":"@nativescript-rtl/ui","version":"0.2.2","license":"MIT","readme":"

    @nativescript-rtl/ui

    \n

    Add right-to-left UI support to NativeScript framework

    \n

    Installation

    \n

    to install plugin write:

    \n

    NativeScript 7 and higher

    \n
    tns plugin add @nativescript-rtl/ui
    \n

    Support NativeScript older then version 7

    \n
    tns plugin add @nativescript-rtl/ui@0.1.7
    \n

    Preview

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    LTRLayoutRTL
    \"screenshotAbsoluteLayout\"screenshot
    \"screenshotDockLayout\"screenshot
    \"screenshotGridLayout\"screenshot
    \"screenshotStackLayout\"screenshot
    \"screenshotWrapLayout\"screenshot
    \n

    Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDefaultDescription
    isRtltrueisRtl use to change layout direction by default is true that mean layout from right to left but you can change it to false that change layout direction from left to right
    \n

    CSS Properties

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    NameDefaultDescription
    directionrtluse to change layout direction by default is rtl that mean layout from right to left but you can change it to ltr that change layout to direction from left to right
    \n

    How to use

    \n

    declare plugin in XML then use it.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:rtl=\"@nativescript-rtl/ui\">
      <rtl:WrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\">
        <Label text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"/>
        <Label text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"/>
        <Label text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"/>
        <Label text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"/>
      </rtl:WrapLayout>
    </Page>
    \n

    For Angular/Vue 'registerElement` must be used to register each RTL element

    \n

    example:\nregister elements in app.module.ts

    \n
    import { registerElement } from \"nativescript-angular/element-registry\";
    registerElement(
      \"RGridLayout\",
      () => require(\"@nativescript-rtl/ui\").GridLayout
    );
    registerElement(
      \"RWrapLayout\",
      () => require(\"@nativescript-rtl/ui\").WrapLayout
    );
    registerElement(
      \"RAbsoluteLayout\",
      () => require(\"@nativescript-rtl/ui\").AbsoluteLayout
    );
    registerElement(
      \"RDockLayout\",
      () => require(\"@nativescript-rtl/ui\").DockLayout
    );
    registerElement(
      \"RStackLayout\",
      () => require(\"@nativescript-rtl/ui\").StackLayout
    );
    \n

    now you can use RGridLayout, RWrapLayout, RAbsoluteLayout, RDockLayout and RStackLayout in your angular project

    \n

    example:

    \n
      <RWrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\">
        <Label text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"></Label>
        <Label text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"></Label>
        <Label text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"></Label>
        <Label text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"></Label>
      </RWrapLayout>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/test1":{"name":"@jcassidyav/test1","version":"1.0.3","license":"Apache-2.0","readme":"

    @nativescript/test1

    \n
    ns plugin add @nativescript/test1
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-urihandler":{"name":"tns-urihandler","version":"1.0.1","license":"MIT","readme":"

    tns-urihandler

    \n

    A NativeScript Module for inner-app communication URI handling

    \n

    How to custom scheme in NativeScript Projects

    \n

    Android
    \nAdd following code to your AndroidManifest.xml, where you can find through /app/App_Resources/Android/AndroidManifest.xml

    \n
    <activity android:launchMode=\"singleTop\">

        <!-- Copy from here -->
        <intent-filter>
            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\"/>
            <category android:name=\"android.intent.category.BROWSABLE\" />
            <data android:scheme=\"yourscheme\" />
        </intent-filter>
        <!-- Copy end here -->

    </activity>
    \n

    NOTE: the attribute android:launchMode="singleTop" prevent OS start multiple activities.

    \n

    iOS
    \nAdd following code to your Info.plist, where you can find it in /app/App_Resources/iOS/Info.plist

    \n
    <dict>
        <!-- Copy from here -->
        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLName</key>
                <string>your.app.id</string>
            </dict>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>yourscheme</string>
                </array>
            </dict>
        </array>
        <!-- Copy end here -->
    </dict>
    \n

    NOTE: After modified AndroidManifest.xml or Info.plist, please remove the entire platform and re-add the platform. This is also recommended by official document.

    \n

    How to install Plugin?

    \n

    Run command

    \n
        tns plugin add tns-urihandler
    \n

    or

    \n
        tns plugin add tns-urihandler-1.0.0.tgz
    \n

    How to use Plugin?

    \n

    imcoming URI: myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment

    \n
        import { URIHandler } from 'tns-urihandler';

        export class MyApp{
            foo(): void{
                let uriHandler = new URIHandler();
                console.log(uriHandler.getURI()); // myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment
            }
        }
    \n

    APIs

    \n
        uriHandler.getURI();            // myapp://Jacky:Passw0rd@home/path/to/my/page?from=anotherApp#fragment
        uriHandler.getHost();           // home
        uriHandler.getFragment();       // fragment
        uriHandler.getScheme();         // myapp
        uriHandler.getQuery();          // from=anotherApp
        uriHandler.getPath();           // path/to/my/page
        uriHandler.getUser();           // Jacky (if there's any Username)
        uriHandler.getPassword();       // Passw0rd (if there's any Password)

        // experimental function, returns object
        uriHandler.search();            // { form: 'antherApp' }
    \n

    Thanks

    \n

    I would like to thank hypery2k's nativescript-urlhandler.\nMy inspiration comes from his great work.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ios-working-with-sandbox-plugin":{"name":"ios-working-with-sandbox-plugin","version":"1.0.2","license":"Apache-2.0","readme":"

    ios-working-with-sandbox-plugin

    \n

    Plugin used for testing sandbox-pod and pod support in nativescript-cli.\nThis plugin will try to create file called I_MADE_THIS_FILE.txt in <project_name>/platforms/app/ directory.\nThe build .ipa should contain this file.

    \n

    How to use

    \n

    NativeScript CLI:

    \n

    In your project execute:

    \n
    $ tns plugin add ios-working-with-sandbox-plugin
    \n

    or add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
    }
    \n

    AppBuilder

    \n

    Add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
    }
    \n

    AppBuilder CLI

    \n

    In your project execute:

    \n
    $ appbuilder plugin add ios-working-with-sandbox-plugin
    \n

    or add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"ios-working-with-sandbox-plugin\": \"1.0.2\"
    }
    \n

    Expected result when building the project

    \n

    NativeScript CLI

    \n

    In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file. The file should be created in <project_dir>/platforms/ios/<project_name>/app/.

    \n

    In case you open <cli_install_dir>/config/config.json and set USE_POD_SANDBOX to false, the build should do the same.

    \n

    AppBuilder

    \n

    In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file.\nThe build will fail in case this plugin is not whitelisted.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"popup-shashanka-sap":{"name":"popup-shashanka-sap","version":"1.0.0","license":"Apache-2.0","readme":"

    @myscope/popup-shashanka

    \n
    ns plugin add @myscope/popup-shashanka
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@billow/nsv-easy-nav":{"name":"@billow/nsv-easy-nav","version":"1.0.3","license":"MIT","readme":"

    Nativescript Vue - Easy Nav

    \n

    First off this is not a replacement for VueRouter in NSV. A true router for NSV is still a ways off.

    \n

    Easy Nav is a simple wrapper for the built-in $navigateTo() functionality. This removes the need to import the component everytime you want to navigate to it and also allows you to interact with your routing layer in a more VueRouter like way.

    \n

    Installation

    \n
    npm i @billow/nsv-easy-nav
    \n

    Setup

    \n
    import Router from '@billow/nsv-easy-nav'

    let routes = new Router({
      routes: [
        {
          name: 'welcome',
          component: Welcome
        }
      ]
    })

    // When the application comes out of a closed state, we need to determine which component 
    // to render. If the user is not authenticated show the Welcome component and visa versa.
    //
    // Note: userIsAuthenticated is only an example, your application must handle authentication. 

    let StartUpComponent = (userIsAuthenticated) ? Dashboard : Welcome

    new Vue({

      router,
      
      render: h => h('frame', [h(StartUpComponent)]),

    }).$start()
    \n

    Usage

    \n
    <StackLayout>
      <Button @tap=\"$router.go('dashboard')\">Dashboard</Button> // Navigates with history
      <Button @tap=\"$router.clear.go('dashboard')\">Dashboard</Button> // Navigates and clears back stack.
      <Button @tap=\"$router.go('user-edit', {
        userId: 1
      })\"    >    Edit User</Button> // Props passed as second argument
      <Button @tap=\"$router.back()\">Back</Button> // Navigates with back stack
    </StackLayout>
    \n

    Usage within instance.

    \n

    export default {

      methods: {
        goToDashboard() {
          this.$router.go('dashboard') // Navigates with history
        },
        
        editUser(userId) {
          this.$router.go('user-edit', { // Navigates with a prop passed as second argument
            userId
          })
        },
      }

    }
    \n

    Go

    \n

    The go method accepts 3 arguments with a few defaults for Android.

    \n
      go(name, props = {}, transitions = {
        android: {
          name: 'slide',
          curve: enums.AnimationCurve.ease
        }
      })
    \n

    Clear

    \n

    Typically paired with go(), this method accepts no arguements.

    \n
      this.$router.clear.go()
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dom-free":{"name":"nativescript-dom-free","version":"2.0.6","license":"Unsupported","readme":"

    Free version for nativescript-dom (renamed to nativescript-dom-free)

    \n

    A rather maintained version of nativescript-dom. This is simply a fork of nativescript-dom which is no longer available without a subscription\nand is not guaranteed to work with NativeScript 6.x. This repo is my attempt towards keeping it usable enough for those who are not ready to buy a subscription yet.

    \n

    To use this, simply install with NPM using:

    \n

    npm install nativescript-dom-free

    \n

    All credit goes to: NathanaelA for writing this. I am only attempting to maintain it without charging anything.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-authentication":{"name":"nativescript-authentication","version":"1.0.4","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@db3dev/flexwrap":{"name":"@db3dev/flexwrap","version":"1.0.2","license":"MIT","readme":"

    FlexWrap an Angular 2 Wrapper For Flexbox

    \n

    I recommend this guide to familiarize yourself with the meanings to flexbox css and a better understanding on when you would want to use these directives.\nhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

    \n

    Usage

    \n

    To create a flexbox container use the "flex" attribute directive.\nTo create a flexbox item inside a flexbox container use the "flexItem" attribute directive.

    \nExample Use

    \n
    <div flex flexJContent=\"center\">
      <div flexItem flexGrow=2>
        Test
      </div> <!-- flexbox Item -->
    </div> <!-- flexbox container -->
    \n

    The flex Attribute Directive

    \n

    The flex attribute is used to define how to set 'flex-flow'.
    \nBy default flex sets itself as 'row'. Optionally it can be configured to equal either:

    \n
      \n
    • 'row'
      • \n
    • 'column'
      • \n
    • 'row-reverse'
      • \n
    • 'column-reverse'
      • \n
    • 'initial'
      • \n
    • 'inherit'
      • \n
    \n

    Also several optional attributes can be used...

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeDefaultDescription
    flexWrapFalse (nowrap)Can be true or false to toggle wrap/nowrap into the flex-flow style.
    flexJContent'flex-start'Configures the justify-content style.
    flexAItems'stretch'Configures the align-items style.
    flexAContent'stretch'Configures the align-content style.
    \n

    The flexItem Attribute Directive

    \n

    The flexItem attribute is used to set the min-width, max-width and flex-basis styles. By default it is set to 'auto' but will take in any css string for sizing, such as '10px'.

    \n

    Also several optional attributes can be used...

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AttributeDefaultDescription
    flexOffset'0%'Configures the 'margin-left' style with a css size string.
    flexGrow0Takes in a number to configure the style flex-grow.
    flexShrink1Takes in a number to configure the style flex-shrink.
    flexASelfnullConfigures the style align-self.
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jcassidyav/test2":{"name":"@jcassidyav/test2","version":"1.0.1","license":"Apache-2.0","readme":"

    @jcassidyav/test2

    \n
    ns plugin add @jcassidyav/test2
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/template-snippet":{"name":"@nativescript-community/template-snippet","version":"1.1.13","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unimag":{"name":"nativescript-unimag","version":"1.1.1","license":"MIT","readme":"

    Develop a NativeScript plugin

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. cd myplugin
      3. \n
    3. npm run postclone
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-unimag-swiper
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"helloworld_shashanka":{"name":"helloworld_shashanka","version":"1.0.2","license":"Apache-2.0","readme":"

    @myscope/helloworld

    \n
    ns plugin add @myscope/helloworld
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/openapp":{"name":"@carployee/openapp","version":"1.0.1","license":"Apache-2.0","readme":"

    NativeScript Open App plugin

    \n

    A NativeScript plugin for opening other applications on the device (with app store fallback)

    \n

    Reference

    \n

    This plugin is a copy of https://github.com/ludwiktrammer/nativescript-open-app\nYou can find more examples there. The API did not change, only the way you import the function (see below)

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add @carployee/openapp
    \n

    Usage

    \n

    Android

    \n

    To open an app, you need its id (for example "com.facebook.katana" for Facebook and "com.twitter.android" for Twitter).\nYou can easily find it in app's URL on https://play.google.com.

    \n

    Examples

    \n
    import { OpenApp } from '@carployee/openapp';

    OpenApp.open('message://');
    \n

    iOS

    \n

    To open an app on iOS you need a schema registered by the app.\nAdditionally you are required to whitelist the schemas for all apps you want to be able to open. Add them to your app/App_Resources/iOS/Info.plist (and additionally include "itms-apps" schema used by the App Store):

    \n
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>itms-apps</string>
        <string>twitter</string>
      </array>
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tobydeh/nativescript-segment":{"name":"@tobydeh/nativescript-segment","version":"1.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"timeline-checking":{"name":"timeline-checking","version":"1.0.0","license":"Apache-2.0","readme":"

    @errorgod/timeline

    \n
    ns plugin add @errorgod/timeline
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-awesome-webview-with-custom-menu-items":{"name":"nativescript-awesome-webview-with-custom-menu-items","version":"70.1.1","license":"Apache-2.0","readme":"

    nativescript-awesome-webview-with-custom-menu-items

    \n\n

    A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

    \n\n

    Prerequisites / Requirements

    \n

    As of now, there aren't any prerequisites. This should work with any device, any OS.

    \n

    Installation

    \n

    For tns projects (Angular, Typescript, Javascript)

    \n
    tns plugin add nativescript-awesome-webview-with-custom-menu-items
    \n

    For vue-cli projects (Nativescript-Vue)

    \n
    npm install nativescript-awesome-webview-with-custom-menu-items
    \n

    Usage

    \n

    Require

    \n

    Javascript -

    \n
    const {init, openWebView} = require('nativescript-awesome-webview-with-custom-menu-items');
    \n

    Typescript -

    \n
    import {init, openWebView} from 'nativescript-awesome-webview-with-custom-menu-items';
    \n

    1. Initialise (optional, only Android)

    \n
    init()
    \n

    NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

    \n

    Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

    \n

    2. Open an URL

    \n
        openWebView({
          url: 'http://google.com',
          toolbarColor: '#2277aa',
          toolbarControlsColor: '#eebb99'
        });
    \n

    openWebView options

    \n

    AwesomeWebviewOptions structure (the object you pass into openWebView)

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    urlrequiredThe URL to open
    showTitlefalseShows title bar in the webview
    toolbarColorundefinedColor of the toolbar
    toolbarControlsColorundefined(only iOS) color of buttons on toolbar
    isClosedundefinedcallback function that will be called when webview is closed
    \n

    License

    \n

    This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

    \n
    Apache License Version 2.0, January 2004\n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-sweet-alert":{"name":"ns-sweet-alert","version":"1.1.3","license":{"type":"MIT","url":"https://github.com/tomasdv2@gmail.com/nativescript-alert-sweet-ns/blob/master/LICENSE"},"readme":"

    ns-sweet-alert

    \n

    an implementation of sweet alert dialog for nativescript

    \n

    Fill in a little about your plugin!

    \n

    License

    \n

    This plugin is licensed under the MITlicense by Tomas

    \n

    Based on

    \n

    Android: sweet-alert-dialog by @pedant\niOS: (wip) SweetAlert-iOS by @codestergit

    \n

    Current State

    \n

    For now you can do not so many things but i will be adding new stuff in the next days.

    \n

    Installation

    \n

    To install type

    \n
    tns plugin add ns-sweet-alert
    \n

    Usages

    \n

    Once added into the project\nIn your main-page.js like file do something like this

    \n
    var app = require('application');
    var SweetAlert = require('ns-sweet-alert');

    var alertNice = function() {
      SweetAlert.simpleAlert(app.android.foregroundActivity).setTitleText(\"hey!\").setContentText(\"this is a sweetmessage\");
    }

    var inError = function(args) {
      SweetAlert.errorAlert(app.android.foregroundActivity).setTitleText(\"Oops!\").setContentText(args);
    }

    exports.alertNice = alertNice;
    exports.inError = inError;
    \n

    Current Types

    \n
    simpleAlert(context)
    errorAlert(context)
    warningAlert(context)
    successAlert(context)

    //you can use various methods with the dialog result
    .setTitleText
    .setContentText
    .setConfirmText
    \n

    I will be continue adding more things, like iOS support sometime this week!

    \n

    And that's it!

    \n

    Enjoy it.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/menu":{"name":"@carployee/menu","version":"1.0.1","license":"Apache-2.0","readme":"

    @carployee/menu

    \n
    ns plugin add @carployee/menu
    \n

    This plugin is an NS8 version of https://github.com/xlmnxp/nativescript-menu/blob/master/README.md\nAll credits to @xlmnxp

    \n

    A plugin that adds a pop-up menu to NativeScript

    \n

    Installation

    \n

    Demo

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    AndroidiOS
    \"screenshot\"screenshot
    \n

    Usage

    \n

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
      xmlns:ui=\"nativescript-menu\">
      <StackLayout class=\"p-20\">
        <Button id=\"menuBtn\" text=\"getMenu\" tap=\"{{ buttonTap }}\"/>
      </StackLayout>
    </Page>
    \n
    import { Menu } from 'nativescript-menu';

    export class HelloWorldModel extends Observable {
    \tpublic message: string;
    \tprivate menu: Menu;

    \tconstructor(public page: Page) {
    \t\tsuper();
    \t}

    \tbuttonTap() {
    \t\tMenu.popup({
    \t\t\tview: this.page.getViewById('menuBtn'),
    \t\t\tactions: ['Example', 'NativeScript', 'Menu'],
    \t\t})
    \t\t\t.then((action) => {
    \t\t\t\talert(action.id + ' - ' + action.title);
    \t\t\t})
    \t\t\t.catch(console.log);
    \t}
    }
    \n

    with custom options

    \n
    import { Menu } from 'nativescript-menu';

    export class HelloWorldModel extends Observable {
    \tpublic message: string;
    \tprivate menu: Menu;

    \tconstructor(public page: Page) {
    \t\tsuper();
    \t}

    \tbuttonTap() {
    \t\tMenu.popup({
    \t\t\tview: this.page.getViewById('menuBtn'),
    \t\t\tactions: [
    \t\t\t\t{ id: 'one', title: 'Example' },
    \t\t\t\t{ id: 'two', title: 'NativeScript', customOption: 'Hello' },
    \t\t\t\t{ id: 'three', title: 'Menu' },
    \t\t\t],
    \t\t})
    \t\t\t.then((action) => {
    \t\t\t\talert(JSON.stringify(action))    ;
    \t\t\t})
    \t\t\t.catch(console.log);
    \t}
    }
    \n

    API

    \n
      \n
    • MenuOptions
      • \n
    \n
    export interface MenuOptions {
    \ttitle?: string; // IOS Only
    \tmessage?: string; // IOS Only
    \tview: View;
    \tactions: object[] | string[];
    \tcancelButtonText?: string; // IOS Only
    }
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    popup(options: MenuOptions): Promise<{id: number, title: string} | actionObject | boolean>Create a pop-up menu and show it
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@freevse/nativescript-blufi":{"name":"@freevse/nativescript-blufi","version":"1.0.1","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-facebook":{"name":"nativescript-plugin-facebook","version":"2.2.1","license":"Apache 2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardreader":{"name":"nativescript-cardreader","version":"1.1.3","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-material":{"name":"tns-material","version":"1.1.4","license":"MIT","readme":"

    TNS MATERIAL

    \n

    MaterialUi for Nativescript Angular

    \n

    Screenshot

    \n

    \"ezgif

    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    tns plugin add tns-material
    \n

    or

    \n
    npm i tns-material
    \n

    This command automatically installs the necessary files, as well as stores tns-material as a dependency in your project's package.json file.

    \n

    Configuration

    \n

    There is no additional configuration needed!

    \n

    API

    \n

    Events

    \n
      \n
    • \n

      hint

      \n
      • \n
    • \n

      focusColor

      \n
      • \n
    • \n

      noFocusColor

      \n
      • \n
    • \n

      secure

      \n
      • \n
    • \n

      keyboardType

      \n
      • \n
    • \n

      style

      \n
      • \n
    \n

    Usage

    \n

    You need to add FloatTextFieldModule to your page module, and then simply use <FloatTextField></FloatTextField>

    \n

    <FloatTextField hint=\"EMAIL\" focusColor=\"#4286f4\"></FloatTextField>
    <FloatTextField hint=\"EMAIL\" focusColor=\"#4286f4\" secure=\"true\"></FloatTextField>

    <FloatTextField [(model)]=\"name\" (messageChange)=\"name=$event\"></FloatTextField>
    \n
      \n
    • \n

      Import FloatTextFieldModule in NgModule:

      \n
      • \n
    \n
    //......
    import { FloatTextFieldModule } from \"tns-material\";

    @NgModule({
      //......
      imports: [
        //......
        FloatTextFieldModule
        //......
       ],
       //......
    })
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/uuid":{"name":"@carployee/uuid","version":"1.0.1","license":"Apache-2.0","readme":"

    @nativescript/uuid

    \n
    ns plugin add @nativescript/uuid
    \n

    This is a working NS8 version of https://github.com/owen-it/nativescript-uuid

    \n

    Usage

    \n

    JavaScript

    \n
    const nsUuid = require('nativescript-uuid');

    const uuid = nsUuid.getUUID();
    console.log(`The device UUID is ${uuid}`);
    \n

    TypeScript

    \n
    import { getUUID } from 'nativescript-uuid';

    const uuid = getUUID();
    console.log(`The device UUID is ${uuid}`);
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-google-login":{"name":"@bigin/ns-google-login","version":"1.0.2","license":"Apache-2.0","readme":"

    @bigin/ns-google-login

    \n
    ns plugin add @bigin/ns-google-login
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xutodra/nativescript-mobile-pubnub":{"name":"@xutodra/nativescript-mobile-pubnub","version":"1.0.3","license":"Apache-2.0","readme":"

    @xutodra/nativescript-mobile-pubnub

    \n
    ns plugin add @xutodra/nativescript-mobile-pubnub
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@skhye05/app-dynamics":{"name":"@skhye05/app-dynamics","version":"1.0.3","license":"Apache-2.0","readme":"

    @skhye05/app-dynamics

    \n
    ns plugin add @skhye05/app-dynamics
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@schoolsquirrel/letter-avatar":{"name":"@schoolsquirrel/letter-avatar","version":"1.0.0","license":"MIT","readme":"

    @schoolsquirrel/letter-avatar

    \n

    \"Build\" \"GitHub \"Maintenance\"

    \n

    With this plugin you can create beautiful looking letter avatars in your nativescript app!

    \n

    \"picture

    \n

    Limitation

    \n

    This plugin only supports NativeScript 7 or higher. In case you need to use an older NativeScript version, have a look at this archived repository.

    \n

    Installation

    \n

    Install the plugin from using ns plugin add @schoolsquirrel/letter-avatar.

    \n

    Usage

    \n

    NativeScript Core:

    \n

    Define the namespace

    \n
    <Page class=\"page\"
        loaded=\"pageLoaded\"
        navigatingTo=\"onNavigatingTo\" 
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:ns=\"@schoolsquirrel/letter-avatar\">
    \n

    Use the plugin:

    \n
    <ns:LetterAvatar id=\"myAvatar\" text=\"AB\"></ns:LetterAvatar>
    \n

    You can also add custom styles:

    \n
    <ns:LetterAvatar color=\"blue\" padding=\"5\" borderRadius=\"7\" id=\"myAvatar\" text=\"AB\"></ns:LetterAvatar>
    \n
    \n

    Unfortunately, CSS properties are not supported.

    \n
    \n

    For more info and examples check out the demo folder.

    \n

    Angular Version:

    \n

    In your app.module.ts include the library like so:

    \n
    import { LetterAvatarModule } from \"@schoolsquirrel/letter-avatar/angular\";
    \n

    and add it to the imports array:

    \n
    @NgModule({
        bootstrap:  [
            ...
        ],
        declarations: [
            ...
        ],
        imports: [
            ...
            LetterAvatarModule, // <--- add this here
        ],
        schemas: [
            ...
        ],
    })
    export class AppModule { }
    \n

    The use it in your .html file:

    \n
    <LetterAvatar text=\"AB\"></LetterAvatar>
    \n

    You can add custom styles:

    \n
    <LetterAvatar color=\"blue\" padding=\"5\" borderRadius=\"7\" text=\"AB\"></LetterAvatar>
    \n
    \n

    Unfortunately, CSS properties are not supported.

    \n
    \n

    For more info and examples check out the demo and the demo-angular folder.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-acs-usb":{"name":"nativescript-acs-usb","version":"1.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-arduino-usb":{"name":"nativescript-arduino-usb","version":"1.0.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-jest":{"name":"nativescript-vue-jest","version":"3.0.4","license":"MIT","readme":"

    nativescript-vue-jest

    \n

    Jest Vue transformer with source map support and Nativescript support. Fork of vue-jest.

    \n

    This transformer defaults to web templates. To change that, change globals.vue-jest.platform to the desired platform.

    \n
    \n

    NOTE: This is documentation for vue-jest@3.x. View the vue-jest@2.x documentation

    \n
    \n

    Usage

    \n
    npm install --save-dev nativescript-vue-jest
    \n

    Setup

    \n

    To define nativescript-vue-jest as a transformer for your .vue files, map them to the nativescript-vue-jest module:

    \n
    {
      \"jest\": {
        \"transform\": {
          \"^.+\\\\.vue$\": \"nativescript-vue-jest\"
        }
    }
    \n

    A full config will look like this.

    \n
    {
      \"jest\": {
        \"moduleFileExtensions\": [
          \"js\",
          \"json\",
          \"vue\"
        ],
        \"transform\": {
          \"^.+\\\\.js$\": \"babel-jest\",
          \"^.+\\\\.vue$\": \"nativescript-vue-jest\"
        }
      }
    }
    \n

    If you're on a version of Jest older than 22.4.0, you need to set mapCoverage to true in order to use source maps.

    \n

    Example Projects

    \n

    Example repositories testing Vue components with jest and vue-jest:

    \n\n

    Supported langs

    \n

    nativescript-vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. Currently, SCSS, SASS and Stylus are the only style languages that are compiled.

    \n

    Supported script languages

    \n
      \n
    • typescript (lang="ts", lang="typescript")
      • \n
    • coffeescript (lang="coffee", lang="coffeescript")
      • \n
    \n

    Global Jest options

    \n

    You can change the behavior of nativescript-vue-jest by using jest.globals.

    \n
    \n

    Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a .js file

    \n
    \n

    babelConfig

    \n

    Provide babelConfig in one of the following formats:

    \n
      \n
    • <Boolean>
      • \n
    • <Object>
      • \n
    • <String>
      • \n
    \n
    Boolean
    \n
      \n
    • true - Enable Babel processing. vue-jest will try to find Babel configuration using find-babel-config.
      • \n
    \n
    \n

    This is the default behavior if babelConfig is not defined.

    \n
    \n
      \n
    • false - Skip Babel processing entirely:
      • \n
    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"babelConfig\": false
          }
        }
      }
    }
    \n
    Object
    \n

    Provide inline Babel options:

    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"babelConfig\": {
              \"presets\": [
                [
                  \"env\",
                  {
                    \"useBuiltIns\": \"entry\",
                    \"shippedProposals\": true
                  }
                ]
              ],
              \"plugins\": [
                \"syntax-dynamic-import\"
              ],
              \"env\": {
                \"test\": {
                  \"plugins\": [
                    \"dynamic-import-node\"
                  ]
                }
              }
            }
          }
        }
      }
    }
    \n
    String
    \n

    If a string is provided, it will be an assumed path to a babel configuration file (e.g. .babelrc, .babelrc.js).

    \n\n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"babelConfig\": \"path/to/.babelrc.js\"
          }
        }
      }
    }
    \n

    To use the Config Function API, use inline options instead. i.e.:

    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"babelConfig\": {
              \"configFile\": \"path/to/babel.config.js\"
            }
          }
        }
      }
    }
    \n

    tsConfig

    \n

    Provide tsConfig in one of the following formats:

    \n
      \n
    • <Boolean>
      • \n
    • <Object>
      • \n
    • <String>
      • \n
    \n
    Boolean
    \n
      \n
    • true - Process TypeScript files using custom configuration. vue-jest will try to find TypeScript configuration using tsconfig.loadSync.
      • \n
    \n
    \n

    This is the default behavior if tsConfig is not defined.

    \n
    \n\n
    Object
    \n

    Provide inline TypeScript compiler options:

    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"tsConfig\": {
              \"importHelpers\": true
            }
          }
        }
      }
    }
    \n
    String
    \n

    If a string is provided, it will be an assumed path to a TypeScript configuration file:

    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"tsConfig\": \"path/to/tsconfig.json\"
          }
        }
      }
    }
    \n

    Supported template languages

    \n
      \n
    • \n

      pug (lang="pug")

      \n
        \n
      • To give options for the Pug compiler, enter them into the Jest configuration.\nThe options will be passed to pug.compile().
        • \n
      \n
        {
          \"jest\": {
            \"globals\": {
              \"vue-jest\": {
                \"pug\": {
                  \"basedir\": \"mybasedir\"
                }
              }
            }
          }
        }
      \n
      • \n
    • \n

      jade (lang="jade")

      \n
      • \n
    • \n

      haml (lang="haml")

      \n
      • \n
    \n

    Supported style languages

    \n
      \n
    • stylus (lang="stylus", lang="styl")
      • \n
    • sass (lang="sass")\n
        \n
      • The SASS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.
        • \n
      \n
      • \n
    • scss (lang="scss")\n
        \n
      • \n

        The SCSS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.

        \n
        • \n
      • \n

        To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at jest.globals['vue-jest'].resources.scss:

        \n
        {
          \"jest\": {
            \"globals\": {
              \"vue-jest\": {
                \"resources\": {
                  \"scss\": [
                    \"./node_modules/package/_mixins.scss\",
                    \"./src/assets/css/globals.scss\"
                  ]
                }
              }
            }
          }
        }
        \n
        • \n
      \n
      • \n
    \n

    CSS options

    \n

    experimentalCSSCompile: Boolean Default true. Turn off CSS compilation\nhideStyleWarn: Boolean Default false. Hide warnings about CSS compilation\nresources:

    \n
    {
      \"jest\": {
        \"globals\": {
          \"vue-jest\": {
            \"hideStyleWarn\": true,
            \"experimentalCSSCompile\": true
          }
        }
      }
    }
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-rotors":{"name":"nativescript-custom-rotors","version":"0.0.3","license":"Apache-2.0","readme":"

    nativescript-custom-rotors

    \n
    ns plugin add nativescript-custom-rotors
    \n

    Nativescript Custom Rotors

    \n

    The nativescript-custom-rotors adds easy to use properties to common {N} views to make them accessible to iOS Accessibility Custom Rotors. Accessibility Custom Rotors provide an elegant solution for screen-reader assisted navigation by associating views from various containers and geographies into a common a11y accessible group. Please see this video from Apple WWDC2020 for more information on iOS Accessibility Custom Rotors

    \n

    NOTE: this plugin ONLY works on iOS. In android, the plugin functionality is ignored.

    \n

    Expanded Classes

    \n

    ViewBase has been expanded with the following interface:

    \n
    interface RotorGroupItem {
      /**
       * @property rotorGroup
       * the name of the group that this view belongs to
      */
      rotorGroup:string;
      /**
       * @property rotorOrder
       * order within the rotor group. defaults to -1
      */
      rotorOrder:number;
    }
    \n

    ContentView and BaseLayout have been expanded with the following interface:

    \n
    interface RotorContainerView {
      /**
       * @property rotorContainer
       * set the view as a RotorContainer
      */
      rotorContainer: boolean;
      /**
       * rotorGroups
       * a map<string,Array<View>> of rotor names and associated views
      */
      rotorGroups: any;
      /**
       * rotorGroupCallback
       * a map<string,Callback> of rotor names and callbacks to execute 
      */
      rotorGroupCallbacks: Map<string, Callback>;
      /**
       * @function removeRotorItem
       * removes a view from it's rotor group
      */
      removeRotorItem: (item: ViewBase) => boolean;
      /**
       * @function insertRotorItem
       * inserts an item into a rotor group at a specified index
      */
      insertRotorItem: (item: ViewBase, index?: number) => boolean;
      /**
       * @function addRotorGroup
       * adds a rotor group to a container
      */
      addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
    }
    \n

    Usage

    \n

    initialize the custom-rotors plugin in\napp.ts:

    \n
    ...
    import {initCustomRotors} from 'nativescript-custom-rotors'
    initCustomRotors();
    ...
    Application.run(...);
    \n

    then set a ContentView or a BaseLayout as a rotorContainer:

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
    ...
    </Page>
    \n

    or, in code:

    \n
    export function navigatingTo(e:NavigatedData):void {
      const page = e.object as Page;
      page.rotorContainer = true;
    }
    \n

    The @nativescript/custom-rotor plugin will traverse the children of the container to create and add elements to specified groups:

    \n
    ...
      <Button text=\"Group1 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
      <Button text=\"Group1 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group1\"/>
      <Button text=\"Group2 Button1\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
      <Button text=\"Group2 Button2\" tap=\"{{ testIt }}\" class=\"btn btn-primary\" rotorGroup=\"group2\"/>
    ...
    \n

    Custom elements will also be traversed, so you don't need to specify rotor groups all in one .xml or .ts/.js file.

    \n

    Advanced Usage

    \n

    Individual elements can be part of their own rotor group, and custom handling can be provided to the CustomRotor. Consider a widget used to provide a rating for an item (inspired by this tutorial on ios CustomRotors.

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" navigatingTo=\"navigatingTo\" class=\"page\" rotorContainer=\"true\" >
    ...
    <GridLayout id=\"rating-bar\" rows=\"90, *\" columns=\"*,*,*,*,*\" accessible=\"true\" rotorGroup=\"rating\" row=\"1\" col=\"1\">
      <GridLayout class='rating-item' row=\"1\" col=\"0\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"1\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"1\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"2\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"2\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"3\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"3\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"4\" />
      </GridLayout>
      <GridLayout class='rating-item' row=\"1\" col=\"4\">
        <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text=\"5\" />
      </GridLayout>
      <Label class='rating-desc' color=\"blue\" text=\"dial rotor to 'rating' then flick up and down to change the rating\" row=\"0\" col=\"0\" colSpan=\"5\" textWrap=\"true\"/>
    </GridLayout>
    ...
    </Page>
    \n

    The rating rotor group functionality can be handled using something like this:

    \n
    export function navigatingTo(d: NavigatedData): void {
      const page = d.object as Page;
      page.rotorGroupCallbacks.set('rating', ({ forward }) => {
        incrementOrDecrementRating(page, forward);
      });
    }

    let rating = 0;
    function incrementOrDecrementRating(page: Page, increment: boolean): void {
      rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
      const ratingBar = page.getViewById('rating-bar') as GridLayout;
      for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
        const view = ratingBar.getChildAt(i);
        view.backgroundColor = i < rating ? 'green' : 'transparent';
      }
    }
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-font-scale":{"name":"nativescript-font-scale","version":"1.1.4","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-syntax-highlighter":{"name":"nativescript-syntax-highlighter","version":"4.0.0-alpha.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-utilities":{"name":"nativescript-utilities","version":"0.1.0","license":"MIT","readme":"

    nativescript-utilities

    \n

    A (currently small) collection of reusable NativeScript utility classes and functions.

    \n

    Usage

    \n

    Check out the API docs for the current utilities' documentation. Every class and function can be imported by name:

    \n
    import { Logger, convertUint8ArrayToReference } from 'nativescript-utilities';


    try {
        let bytesReference = convertUint8ArrayToReference(new Uint8Array([ 0x90, 0xC3, 0xFF ]));
        // Do something with the interop.Reference instance, like pass it to some native C library.
    } catch (error) {
        logger.error(`Something happened while trying to send the buffer.`, { error });
    }
    \n

    building

    \n

    This module is implemented in ES 6 and transpiled to ES 5 for export. To build the source:

    \n
    npm run build
    \n

    There's also a git pre-commit hook that automatically builds upon commit, since the dist directory is committed.

    \n

    linting

    \n
    npm run lint
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simple-fileshare":{"name":"nativescript-simple-fileshare","version":"1.0.0","license":"MIT","readme":"

    NativeScript Simple File Share Plugin

    \n

    Installation

    \n
    tns plugin add nativescript-simple-fileshare
    \n

    Usage

    \n
        const shareFile = new ShareFile();
        shareFile.open({
            path: pathToFile,
            options: true,
            animated: true
        });
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unimag-swiper":{"name":"nativescript-unimag-swiper","version":"1.0.0","license":"MIT","readme":"

    Develop a NativeScript plugin

    \n

    Getting started

    \n
      \n
    1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
      2. \n
    2. cd myplugin
      3. \n
    3. npm run postclone
      4. \n
    4. npm run setup
      5. \n
    5. Get to work.
      6. \n
    \n

    This seed expands on several things presented here.

    \n

    Usage

    \n

    The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

    \n

    Linking to CocoaPod or Android Arsenal plugins

    \n

    You will want to create these folders and files in the root:

    \n
    platforms --
      ios --
        Podfile
      android --
        include.gradle
    \n

    Doing so will open up those native apis to your plugin :)

    \n

    Take a look at these existing plugins for how that can be done very simply:

    \n\n

    Typical development workflow:

    \n
      \n
    1. Make changes to plugin files
      2. \n
    2. Make changes in demo that would test those changes out
      3. \n
    3. npm run demo.ios or npm run demo.android (must be run from the root directory)
      4. \n
    \n

    Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

    \n
    cd demo

    // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
    tns plugin remove nativescript-unimag-swiper
    tns plugin add ..

    // manual platform adds
    tns platform add ios
    // and/or
    tns platform add android
    \n

    Then use any of the available options from the tns command line:

    \n\n

    Unittesting

    \n

    This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

    \n

    You can read more about this topic here.

    \n

    Once you're ready to test your plugin's API execute one of these commands in the plugin root:

    \n
    npm run test.ios
    npm run test.android
    \n

    Publish

    \n

    When you have everything ready to publish:

    \n
      \n
    • Bump the version number in package.json
      • \n
    • npm run build - very important - ensure the latest is built before you publish
      • \n
    • npm publish
      • \n
    \n

    Contributing - Want to make the seed better?

    \n

    Or at least help keep it up to date with NativeScript releases, which would be excellent.

    \n
    npm install -g typescript  // if you don't already have it
    git clone https://github.com/NathanWalker/nativescript-plugin-seed
    cd nativescript-plugin-seed

    // Improve!
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ftp-client":{"name":"nativescript-ftp-client","version":"1.0.2","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appsee":{"name":"nativescript-appsee","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-canvas":{"name":"nativescript-canvas","version":"3.0.10","license":"Apache-2.0","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vosk":{"name":"nativescript-vosk","version":"0.3.33","license":"Apache 2.0","readme":"

    NativeScript Speech Recognition with Vosk Library

    \n

    This is a plugin for offline speech recognition in NativeScript library using Vosk library.

    \n

    See the demo in action.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tslib":{"name":"nativescript-tslib","version":"1.9.1-r1","license":"Apache-2.0","readme":"

    tslib for nativescript

    \n

    tslib is a runtime library for TypeScript that contains all of the TypeScript helper functions.

    \n

    Unfortunately just importing tslib breaks NativeScript projects.

    \n

    This plugin solves this issue.

    \n

    Usage

    \n

    Install module

    \n
    npm i --save nativescript-tslib
    \n

    Edit: app/main.ts

    \n
    import 'nativescript-tslib'; // <-- Add this

    // this import should be first in order to load some required settings (like globals and reflect-metadata)
    import { platformNativeScriptDynamic } from 'nativescript-angular/platform';

    import { AppModule } from './app.module';

    // A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page.
    // Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers.
    // A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic,
    // that sets up a NativeScript application and can bootstrap the Angular framework.
    platformNativeScriptDynamic().bootstrapModule(AppModule);
    \n

    You can enable importHelpers in tsconfig.json, but you might break your app if you extend native-classes.

    \n

    Alternative

    \n

    You can set tsconfig.json target to es6, but when you can't extend native classes in your project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-oauth":{"name":"@bigin/ns-oauth","version":"1.0.5","license":"Apache-2.0","readme":"

    @bigin/ns-oauth

    \n
    ns plugin add @bigin/ns-oauth
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"native-autocomplete":{"name":"native-autocomplete","version":"1.0.0","license":{"type":"MIT","url":"https://github.com/triniwiz/nativescript-autocomplete/blob/master/LICENSE"},"readme":"

    Autocomplete for NativeScript

    \n

    I copied it from https://github.com/triniwiz/nativescript-autocomplete

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stario":{"name":"nativescript-stario","version":"1.0.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"petfinder-angular-service":{"name":"petfinder-angular-service","version":"1.0.3","license":"ISC","readme":"

    petfinder-angular-service

    \n

    Setup

    \n

    In order to make the service work you need to add an HttpModule to your @NgModule imports.

    \n

    For NativeScript use NativeScriptHttpClientModule

    \n
    import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
    \n
    @NgModule({
      ...
      imports: [
        ...
        NativeScriptHttpClientModule
      ],
    \n

    For Web use HttpClientModule

    \n
    import { HttpClientModule } from '@angular/common/http';
    \n
    @NgModule({
      ...
      imports: [
        ...
        HttpClientModule
      ],
    \n

    API KEY

    \n

    You will also need to get a petfinder api key from here.

    \n

    When you get your key, you need to provide it to the @NgModule providers using the API_KEY_TOKEN InjectionToken from petfinder-angular-service.

    \n
    import { PetFinderService, API_KEY_TOKEN } from 'petfinder-angular-service';

    @NgModule({
      ...
      providers: [
        ...
        { provide: API_KEY_TOKEN, useValue: 'your-key-here' },
        PetFinderService
      ],
    \n

    Examples of usage

    \n

    To use the service, just import what you need:

    \n
    import { PetFinderService } from \"petfinder-angular-service\";
    import { Pet } from \"petfinder-angular-service/models\";
    \n

    Then inject the service in the constructor:

    \n
    constructor(private petFinderService: PetFinderService) { }
    \n

    Then to get a list of pets call:

    \n
    this.petFinderService.findPets('Boston, MA')
    .then((pets: Pet[]) => {
      // Deal with the pets here
      console.log(JSON.stringify(pets));
    })
    \n

    or with search options:

    \n
    this.petFinderService.findPets(
      'Boston, MA', 
      { age: 'Baby', size: 'M' })
    .then((pets: Pet[]) => {
      // Deal with the pets here
      console.log(JSON.stringify(pets));
    })
    \n

    API

    \n

    breedList(animal: string): Promise<string[]>

    \n
      \n
    • Returns a list of breeds for a particular animal.
      • \n
    • @param animal type of animal (barnyard, bird, cat, dog, horse, pig, reptile, smallfurry): for a safe list values use Options.animal
      • \n
    \n

    getPet(id: string | number): Promise<Pet>

    \n
      \n
    • Returns a record for a single pet.
      • \n
    • @param id
      • \n
    \n

    getRandomPetId(options: RandomSearchOptions = {}): Promise<number>

    \n
      \n
    • Returns an id for a randomly selected pet. You can choose the characteristics of the pet you want returned using the various arguments to this method.
      • \n
    • @param options a set of Random Search Options, which include: animal, breed, location, sex, shelterId, size
      • \n
    \n

    getRandomPet(options: RandomSearchOptions = {}, provideDescription: boolean = true): Promise<Pet>

    \n
      \n
    • Returns a record for a randomly selected pet. You can choose the characteristics of the pet you want returned using the various arguments to this method.
      • \n
    • @param options a set of Search Options, which include: animal, breed, location, sex, shelterId, size
      • \n
    • @param provideDescription determines whether the pet description should be provided
      • \n
    \n

    findPets(location: string, options: PetSearchOptions = {}): Promise<Pet[]>

    \n
      \n
    • Searches for pets according to the criteria you provde and returns a collection of pet records matching your search.
      • \n
    • The results will contain at most count records per query, and a lastOffset tag.
      • \n
    • To retrieve the next result set, use the lastOffset value as the offset to the next pet.find call.
      • \n
    • @param location the ZIP/postal code or city and state the animal should be located (NOTE: the closest possible animal will be selected)
      • \n
    • @param options a set of Search Options, which include: age, animal, breed, count, offset, output, sex, shelterId, size
      • \n
    \n

    findShelterPets(id: string | number, options: ShelterPetSearchOptions = {}): Promise<Pet[]>

    \n
      \n
    • Returns a list of pet records for an individual shelter.
      • \n
    • @param id shelter ID (e.g. NJ94)
      • \n
    • @param options a set of Search Options, which include: count, offset, output, status
      • \n
    \n

    findShelters(location: string, options: ShelterSearchOptions = {}): Promise<Shelter[]>

    \n
      \n
    • Returns a collection of shelter records matching your search criteria.
      • \n
    • @param location the ZIP/postal code or city and state where the search should begin
      • \n
    • @param options a set of Search Options, which include: count, name, offset
      • \n
    \n

    getShelter(id: string | number): Promise<Shelter>

    \n
      \n
    • Returns a record for a single shelter.
      • \n
    • @param id shelter ID (e.g. NJ94)
      • \n
    \n

    findSheltersByBreed(animal:string, breed: string, options: ShelterSearchByBreedOptions = {}): Promise<Shelter[]>

    \n
      \n
    • Returns a list of shelters, listing animals of a particular breed.
      • \n
    • WARNING: Shelter name is not returned!
      • \n
    • @param animal type of animal, valid values: barnyard, bird, cat, dog, horse, pig, reptile, smallfurry. For a safe list of values use Options.animal
      • \n
    • @param breed breed of animal, use breedList() for a list of valid breeds
      • \n
    • @param options a set of Search Options, which include: count, offset
      • \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-shadow":{"name":"nativescript-ng-shadow","version":"2.1.0","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ozymandiasthegreat/wakeword-zero":{"name":"@ozymandiasthegreat/wakeword-zero","version":"2.0.5","license":"MIT","readme":"

    wakeword-zero

    \n

    Based on Machine Learning on Voice: a gentle introduction with Snips Personal Wake Word Detector

    \n

    Ported from node-personal-wakeword\nby Mathieu Quisefit

    \n

    Installation

    \n
    npm install @ozymandiasthegreat/wakeword-zero
    \n

    Usage

    \n
    import { DetectorBuilder } from \"@ozymandiasthegreat/wakeword-zero\";

    const Detector = await DetectorBuilder();
    const detector = new Detector({
      /*
      sampleRate: 16000,
      bitLength: 16,
      frameShiftMS: 10.0,
      frameLengthMS: 30.0, // Must be a multiple of frameShiftMS
      vad: true, // Use VAD detection
      vadMode: WakewordDetector.VadMode.AGGRESSIVE, // See node-vad modes
      vadDebounceTime: 500,
      band: 5, // DTW window width
      ref: 0.22, // See Snips paper for explanation about this parameter
      preEmphasisCoefficient: 0.97, // Pre-emphasis ratio
      */
      threshold: 0.5 // Default value
    })

    // *****

    // KEYWORD MANAGEMENT

    // Add a new keyword using multiple \"templates\"
    await detector.addKeyword('alexa', [
      // WAV templates (trimmed with no noise!)
      './keywords/alexa1.wav',
      './keywords/alexa2.wav',
      './keywords/alexa3.wav'
    ], {
      // Options
      disableAveraging: true, // Disabled by default, disable templates averaging (note that resources consumption will increase)
      threshold: 0.52 // Per keyword threshold
    })

    // Keywords can be enabled/disabled at runtime
    detector.disableKeyword('alexa')
    detector.enableKeyword('alexa')

    // *****

    // EVENTS

    // The detector will emit a \"ready\" event when its internal audio frame buffer is filled
    detector.on('ready', () => {
      console.log('listening...')
    })

    // The detector will emit an \"error\" event when it encounters an error (VAD, feature extraction, etc.)
    detector.on('error', err => {
      console.error(err.stack)
    })

    // The detector will emit a \"data\" event when it has detected a keyword in the audio stream
    /* The event payload is:
      {
        \"keyword\"     : \"alexa\", // The detected keyword
        \"score\"       : 0.56878768987, // The detection score
        \"threshold\"   : 0.5, // The detection threshold used (global or keyword)
        \"frames\"      : 89, // The number of audio frames used in the detection
        \"timestamp\"   : 1592574404789, // The detection timestamp (ms)
        \"audioData\"   : <Buffer> // The utterance audio data (can be written to a file for debugging)
      }
    */
    detector.on('data', ({keyword, score, threshold, timestamp}) => {
      console.log(`Detected \"${keyword}\" with score ${score} / ${threshold}`)
    })

    // *****

    // Create readable stream and
    // Pipe to wakeword detector
    stream.pipe(detector)

    // Or push audio data in chunks
    detector.write(chunk)
    \n

    For a complete example check out the docs folder.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssoauth":{"name":"nativescript-ssoauth","version":"1.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-camera-plus-custom":{"name":"nativescript-camera-plus-custom","version":"1.0.0","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-with-pitch":{"name":"nativescript-audio-with-pitch","version":"1.0.1","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fingerprint-auth-custom":{"name":"nativescript-fingerprint-auth-custom","version":"7.0.2","license":"MIT","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@renatotan/simple-login":{"name":"@renatotan/simple-login","version":"1.0.0","license":"Apache-2.0","readme":"

    @renatotan/simple-login

    \n
    ns plugin add @renatotan/simple-login
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-yolo":{"name":"nativescript-yolo","version":"1.0.20","license":"Apache-2.0","readme":"

    Nativescript YOLO

    \n

    Implementation of YOLO v3 in {N} with iOS / Android support

    \n

    Installation

    \n
    tns plugin add nativescript-yolo
    \n

    Native Android Development

    \n
      \n
    1. Build the package under platforms/android_lib using Android Studio.
      2. \n
    2. Locate the yololib-release.aar file platforms/android_lib/YOLO/yololib/build/outputs/aar
      3. \n
    3. Rename the file to .zip extension
      4. \n
    4. Extract the classes.jar file and copy it to platforms/android folder
      5. \n
    \n

    Native iOS Development

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/directions":{"name":"@codesthings/directions","version":"2.0.1","license":"Apache-2.0","readme":"

    Nativescript directions

    \n
    ns plugin add @nativescript/directions
    \n

    Usage

    \n

    Demo app (XML + TypeScript)

    \n

    Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

    \n

    You can run the demo app from the root of the project by typing npm run demo.ios.device or npm run demo.android.

    \n\n

    Demo app (Angular)

    \n

    This plugin is part of the plugin showcase app I built using Angular.

    \n

    API

    \n

    available

    \n

    Not all devices have the Google (Android) or Apple (iOS) Maps app installed. Well, most do of course, but on an Android simulator you may be out of luck, so let's check beforehand:

    \n
    JavaScript
    \n
    // require the plugin
    var directions = require('@nativescript/directions');

    // instantiate the plugin
    var directions = new directions.Directions();

    directions.Directions.available().then(function (avail) {
    \tconsole.log(avail ? 'Yes' : 'No');
    });
    \n
    TypeScript
    \n
    // require the plugin
    import { Directions } from '@nativescript/directions';

    // instantiate the plugin
    let directions = new Directions();

    directions.available().then((avail) => {
    \tconsole.log(avail ? 'Yes' : 'No');
    });
    \n

    navigate

    \n

    This function opens the native Maps app with a predefined from and to address.

    \n

    If you don't pass from the current location of the user will be used.

    \n

    If an address is specified then lat and lng will be ignored.

    \n

    If you pass in an Array of to addresses, then the last item is the destination, the others become 'waypoints'.

    \n

    Note that if there's an ocean in between from and to you won't be able to get directions, don't blame this plugin for that 😁

    \n
    JavaScript
    \n
    directions
    \t.navigate({
    \t\tfrom: {
    \t\t\t// optional, default 'current location'
    \t\t\tlat: 52.215987,
    \t\t\tlng: 5.282764,
    \t\t},
    \t\tto: {
    \t\t\t// either pass in a single object or an Array (see the TypeScript example below)
    \t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
    \t\t},
    \t\t// for platform-specific options, see the TypeScript example below.
    \t})
    \t.then(
    \t\tfunction () {
    \t\t\tconsole.log('Maps app launched.');
    \t\t},
    \t\tfunction (error) {
    \t\t\tconsole.log(error);
    \t\t}
    \t);
    \n
    TypeScript
    \n
    directions
    \t.navigate({
    \t\tfrom: {
    \t\t\t// optional, default 'current location'
    \t\t\tlat: 52.215987,
    \t\t\tlng: 5.282764,
    \t\t},
    \t\tto: [
    \t\t\t{
    \t\t\t\t// if an Array is passed (as in this example), the last item is the destination, the addresses in between are 'waypoints'.
    \t\t\t\taddress: 'Hof der Kolommen 34, Amersfoort, Netherlands',
    \t\t\t},
    \t\t\t{
    \t\t\t\taddress: 'Aak 98, Wieringerwerf, Netherlands',
    \t\t\t},
    \t\t],
    \t\ttype: 'walking', // optional, can be: driving, transit, bicycling or walking
    \t\tios: {
    \t\t\tpreferGoogleMaps: true, // If the Google Maps app is installed, use that one instead of Apple Maps, because it supports waypoints. Default true.
    \t\t\tallowGoogleMapsWeb: true, // If waypoints are passed in and Google Maps is not installed, you can either open Apple Maps and the first waypoint is used as the to-address (the rest is ignored), or you can open Google Maps on web so all waypoints are shown (set this property to true). Default false.
    \t\t\tuseUniversalSyntax: true, // Prefer the Universal URL Syntax to the comgooglemaps:// url scheme. Useful if Google Maps does not load correctly.
    \t\t},
    \t\tandroid: {
    \t\t\tnewTask: true, // Start as new task. This means it will start a new history stack instead of using the current app. Default true.
    \t\t},
    \t})
    \t.then(
    \t\t() => {
    \t\t\tconsole.log('Maps app launched.');
    \t\t},
    \t\t(error) => {
    \t\t\tconsole.log(error);
    \t\t}
    \t);
    \n

    Future work

    \n
      \n
    • Perhaps add Android-specific options like opening the map in StreetView mode, or pre-defining the transportation type (walk/bike/car).
      • \n
    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-browser-polyfill":{"name":"nativescript-browser-polyfill","version":"1.0.0-alpha8","license":"Apache-2.0","readme":"

    nativescript-browser-polyfill

    \n

    Browser polyfill for NativeScript

    \n

    Installation

    \n
    npm i nativescript-browser-polyfill
    \n

    Usage

    \n

    Import the library into your JavaScript file:

    \n
    import 'nativescript-browser-polyfill';
    \n

    Implements

    \n

    DOM

    \n

    DOM is provided with very low support, these are used for libs like pixi.js that validate type.

    \n
    class Node
    class Element
    class Document
    class HTMLImageElement
    class Image
    class ImageBitmap
    class HTMLVideoElement
    class Video
    class HTMLCanvasElement
    class Canvas
    \n

    Image, HTMLImageElement, ImageBitmap

    \n

    Image has support for loading callbacks, however the loaded uri must be passed to the src already.

    \n
    const image = new Image();
    image.src = '';
    image.onload = () => {
      const { src, width, height } = image;
    };
    image.addEventListener('loading', () => {});
    image.addEventListener('error', () => {});
    \n

    Document

    \n
    const element = document.createElement('div');
    const fakeContext = element.getContext('');
    \n

    Element

    \n

    All sizes return the window size:

    \n
    element.clientWidth;
    element.clientHeight;
    element.innerWidth;
    element.innerHeight;
    element.offsetWidth;
    element.offsetHeight;
    \n

    Empty attributes that prevent libraries from crashing

    \n
    element.tagName;
    element.addEventListener;
    element.removeEventListener;
    element.setAttributeNS;
    element.createElementNS;
    \n

    Node

    \n
    node.ownerDocument;
    node.className;
    node.appendChild;
    node.insertBefore;
    node.removeChild;
    node.setAttributeNS;
    node.getBoundingClientRect;
    \n

    Debug flags

    \n

    For debugging base64 image transformations toggle:

    \n
    global.__debug_browser_polyfill_image = true;
    \n

    By default global.__debug_browser_polyfill_image is false.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-medallia":{"name":"nativescript-medallia","version":"2.0.0","license":"MIT","readme":"

    Nativescript medallia

    \n

    Nativescript medallia plugin is used for integration of Medallia ( see https://www.medallia.com/ ) into Nativescript based Android and IOS applications.

    \n

    Prerequisites / Requirements

    \n

    The plugin is currently based on NativeScript 6.5.0 and XCode 11

    \n

    Installation

    \n
    tns plugin add nativescript-medallia
    \n

    Usage

    \n

    Initializing Medallia (should be done in app.ts):

    \n
        import { Medallia } from 'nativescript-medallia';
        ...
        if (isIOS) {
          Medallia.init(\"...Put your IOS Medallia api key here...\");
        }

        app.run({ moduleName: \"main-page\" });

        if (isAndroid) {
          Medallia.init(\"...Put your Android Medallia api key here...\");
        }
    \n

    Showing medallia survey form:

    \n
        Medallia.showForm(\"...survey form id here...\").subscribe(
          (success: boolean) => {
              
          },
          (error: string) => {
              
          });
    \n

    Demo

    \n

    The following steps should be performed in order to run demo app for first time:

    \n
      \n
    1. Create global-config.ts file which exports two global constants (MEDALLIA_API_KEY_ANDROID and MEDALLIA_API_KEY_IOS).\nIt should look like this:
      2. \n
    \n
    export const MEDALLIA_API_KEY_ANDROID: string = \"...Put your Android Medallia api key here...\";
    export const MEDALLIA_API_KEY_IOS: string = \"...Put your IOS Medallia api key here...\";
    \n
      \n
    1. Place your global-config.ts file into demo/app folder
      2. \n
    2. execute "npm install" from "src" folder
      3. \n
    3. execute "npm run clean" from "src" folder
      4. \n
    4. execute "npm run plugin.prepare" from src folder
      5. \n
    5. execute "npm run demo.ios" or "npm run demo.android" from "src" folder
      6. \n
    \n

    For next demo app runs, it would be usually enough the perform the last step only, but that also depends on the changes you make on the project so some of the other steps could be needed as well.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"not-whlist-sandox-plugin":{"name":"not-whlist-sandox-plugin","version":"1.0.0","license":"Apache-2.0","readme":"

    ios-working-with-sandbox-plugin

    \n

    Plugin used for testing sandbox-pod and pod support in nativescript-cli.\nThis plugin will try to create file called I_MADE_THIS_FILE.txt in <project_name>/platforms/app/ directory.\nThe build .ipa should contain this file.

    \n

    How to use

    \n

    NativeScript CLI:

    \n

    In your project execute:

    \n
    $ tns plugin add not-whlist-sandox-plugin
    \n

    or add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"not-whlist-sandox-plugin\": \"1.0.0\"
    }
    \n

    AppBuilder

    \n

    Add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"not-whlist-sandox-plugin\": \"1.0.0\"
    }
    \n

    AppBuilder CLI

    \n

    In your project execute:

    \n
    $ appbuilder plugin add not-whlist-sandox-plugin
    \n

    or add the following entry in your package.json:

    \n
    \"dependencies\": {
    \t\"not-whlist-sandox-plugin\": \"1.0.0\"
    }
    \n

    Expected result when building the project

    \n

    NativeScript CLI

    \n

    In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file. The file should be created in <project_dir>/platforms/ios/<project_name>/app/.

    \n

    In case you open <cli_install_dir>/config/config.json and set USE_POD_SANDBOX to false, the build should do the same.

    \n

    AppBuilder

    \n

    In the default scenario the build should succeed and the build .ipa must contain the I_MADE_THIS_FILE.txt file.\nThe build will fail in case this plugin is not whitelisted.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-devtools":{"name":"nativescript-vue-devtools","version":"1.5.1","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iadvize":{"name":"nativescript-iadvize","version":"1.0.3","readme":"

    nativescript-iadvize

    \n

    A NativeScript plugin for integration of iAdvize chat into Android/iOS app.

    \n

    NativeScript plugin for iAdvize SDK

    \n

    \"npm

    \n

    This is a plugin to show the conversation from a iAdvize chat, using the iAdvize SDK (Android v2.0.0-beta1, iOS v2.0.0-beta1).

    \n

    Requirements

    \n
      \n
    • iOS 12.0 or higher, and Xcode 12.5
      • \n
    • Minimum Android Version API 19, and Kotlin 1.5.10
      • \n
    • NativeScript CLI 7.x
      • \n
    • iAdvize account
      • \n
    \n

    Installation

    \n

    Run the following command from the root of your project:

    \n
    npm install nativescript-iadvize
    \n

    Activation

    \n

    When the user logs in to the your app call activate with your credentials (our example home.component.ts):

    \n
    IAdvize.activate(XXXX, 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', 'userId', () => {
      console.log('IAdvize conversation activated.');
    });
    \n

    Chatting

    \n

    To open the chat window call presentChat():

    \n
    IAdvize.presentChat();
    \n

    Optional functions

    \n

    Hide default chat button

    \n

    To hide default chat button call hideDefaultChatButton():

    \n
    IAdvize.hideDefaultChatButton();
    \n

    UI customization

    \n

    To customize the chatbox UI call customize():

    \n
    const configuration: ChatConfiguration = {
      automaticMessage: 'Any question? Say Hello to Smart and we will answer you as soon as possible! 😊',
      font: 'fontPath',
      incomingMessageAvatar: 'avatar-icon',
      mainColor: '#4103fc',
      navigationBarBackgroundColor: '#4103fc',
      navigationBarMainColor: '#ffffff',
      navigationBarTitle: 'Chat Title'
    };
    IAdvize.customize(configuration);
    \n

    Logging Out

    \n

    To preserve the confidentiality of user conversation call logout().

    \n
    IAdvize.logout();
    \n

    Conversation events

    \n

    To add a listener to be informed in real time about conversation events call registerConversationListener().

    \n
    IAdvize.registerConversationListener((url: string) => {
      console.log('Handle clicked url - ' + url);
      return false;
    }, (hasOngoingConversation: boolean) => {
        console.log('Ongoing conversation status changed - ' + hasOngoingConversation);
    });
    \n

    Push Notifications

    \n

    To be informed of chat messages received when your app is not running call registerPushToken()

    \n
    IAdvize.registerPushToken('your-token', isProduction);
    \n

    Development setup

    \n

    For easier development and debugging purposes continue with the following steps:

    \n

    Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.

    \n

    Now go and make a change to your plugin. It will be automatically applied to the demo project.

    \n

    Clean plugin and demo files

    \n

    Sometimes you may need to wipe away all generated folders to reinstall them fresh.\nRun npm run clean to wipe those clean then you can can run plugin.prepare to install fresh dependencies.

    \n

    Sometimes you just need to wipe out the demo's platforms, node_modules and hooks directory only.\nRun npm run demo.reset to delete those.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"akylas-nativescript-vue-template-compiler":{"name":"akylas-nativescript-vue-template-compiler","version":"2.1.14","license":"MIT","readme":"

    nativescript-vue-template-compiler

    \n
    \n

    This package is auto-generated from platform/nativescript/compiler

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@prabudevarrajan/filepicker":{"name":"@prabudevarrajan/filepicker","version":"2.0.0","license":"Apache-2.0","readme":"

    @prabudevarrajan/filepicker

    \n
    ns plugin add @prabudevarrajan/filepicker
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rsa":{"name":"nativescript-rsa","version":"1.2.0","license":"MIT","readme":"

    No README found.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dwaring87/nativescript-modal-datetimepicker":{"name":"@dwaring87/nativescript-modal-datetimepicker","version":"1.1.1","license":"Apache-2.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@schoolsquirrel/emoji-picker":{"name":"@schoolsquirrel/emoji-picker","version":"1.1.0","license":"Apache-2.0","readme":"

    @schoolsquirrel/emoji-picker😃

    \n

    \"Build\" \"GitHub \"Maintenance\"

    \n

    There are many emoji pickers for Angular and the web, but no one for NativeScript?! Let's change this!

    \n

    How it looks like

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Keyboard viewEmoji picker view
    \"screenshot\"screenshot
    \n

    Limitation

    \n

    The emoji picker currently only supports Android and NativeScript 7 or higher. In case you need to use an older NativeScript version, have a look at the old branch.

    \n

    Installation

    \n

    Install the plugin using ns plugin add @schoolsquirrel/emoji-picker

    \n

    Usage

    \n

    How does it work?

    \n

    This plugin will give you two elements, EmojiPicker and EmojiLabel. The first one will give you an editable textfield (very similar to the NativeScript TextView) and the second one is a label (similar to NativeScript Label), which will display your text with emojis correctly.

    \n

    NativeScript Core:

    \n

    Define the namespace

    \n
    <Page class=\"page\"
        loaded=\"pageLoaded\"
        navigatingTo=\"onNavigatingTo\"
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:ns=\"@schoolsquirrel/emoji-picker\">
    \n

    Use the plugin:

    \n
    <ns:EmojiPicker id=\"myEmojiPicker\"></ns:EmojiPicker>
    <ns:EmojiLabel id=\"myEmojiLabel\"></ns:EmojiLabel>
    \n

    On the JS / TS Side you can toggle the keyboard or the popup window of the edit text field like this:

    \n
    const page = frame.Frame.topmost().currentPage;
    page.getViewById('myEmojiPicker').togglePopup();
    \n

    The <EmojiPicker> class extends the TextField NativeScript class, which means that all of TextField's properties and methods are supported.\nIt is the same with <EmojiLabel> and the Label class.

    \n

    You can add custom styles by using ids, classes or the tag selector in (s)css:

    \n
    EmojiLabel {
    \tbackground-color: rgba(14, 190, 221, 0.233);
    \tpadding: 10;
    \ttext-align: center;
    \tfont-size: 20;
    }

    EmojiPicker {
    \tpadding: 30;
    \tcolor: green;
    \tmargin: 20;
    }
    \n

    For more info and examples check out the demo folder.

    \n

    Angular Version:

    \n

    In your app.module.ts include the library like so:

    \n
    import { EmojiPickerModule } from '@schoolsquirrel/emoji-picker/angular';
    \n

    and add it to the imports array:

    \n
    @NgModule({
        bootstrap:  [
            ...
        ],
        declarations: [
            ...
        ],
        imports: [
            ...
            EmojiPickerModule, // <--- add this here
        ],
        schemas: [
            ...
        ],
    })
    export class AppModule { }
    \n

    The use it in your .html file:

    \n
    <EmojiPicker #myEmojiPicker></EmojiPicker> <EmojiLabel #myEmojiLabel text=\"Have fun with @schoolsquirrel/emoji-picker\"></EmojiLabel>
    \n

    On the TS Side you can toggle the keyboard or the popup window of the edit text field like this:

    \n
    export class HomeComponent {
    \t@ViewChild('myEmojiPicker', { static: false }) public myEmojiPicker: EmojiPicker;
    \t@ViewChild('myEmojiLabel', { static: true }) public myEmojiLabel: EmojiLabel;

    \tpublic onButtonTap(): void {
    \t\tthis.myEmojiPicker.nativeElement.togglePopup();
    \t}

    \tpublic onCopyBtnTap(): void {
    \t\tconsole.log('pressed!');
    \t\tthis.myEmojiLabel.nativeElement.text = this.myEmojiPicker.nativeElement.text;
    \t}
    }
    \n

    The <EmojiPicker> class extends the TextField NativeScript class, which means that all of TextField's properties and methods are supported.\nIt is the same with <EmojiLabel> and the Label class.

    \n

    You can add custom styles by using ids, classes or the tag selector in (s)css:

    \n
    EmojiLabel {
    \tbackground-color: rgba(14, 190, 221, 0.233);
    \tpadding: 10;
    \ttext-align: center;
    \tfont-size: 20;
    }

    EmojiPicker {
    \tpadding: 30;
    \tcolor: green;
    \tmargin: 20;
    }
    \n

    For more info and examples check out the demo and the demo-angular folder.

    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-libsodium":{"name":"nativescript-libsodium","version":"1.4.0","license":"Apache-2.0","readme":"

    Nativescript libsodium

    \n

    Use native libsodium with nativescript. (mostly) API compatible with libsodium.js wrappers.

    \n

    Only Android is supported at this time.

    \n

    Installation

    \n

    tns plugin add nativescript-libsodium

    \n

    For Android - libsodium-jni requires either disallowing backup or making the following changes to your AndroidManifest.xml

    \n

    Don't use backup if you are storing secret keys as they would also get backed up

    \n
      \n
    • Add tools:replace="android:allowBackup" as an attribute to the application tag.
      • \n
    • Add xmlns:tools="http://schemas.android.com/tools" asn an attribute to the manifest tag.
      • \n
    \n

    Usage

    \n

    Use it the same way you use libsodium.js including their wrapper functions.

    \n
    import { Libsodium } from \"nativescript-libsodium\";
    let keypair = Libsodium.crypto_box_keypair();
    console.log(keypair.privateKey);  // It's a Uint8Array object
    \n

    For more examples, check out the unit tests

    \n

    Contributing

    \n

    Not all libsodium functions are wrapped in this project. But they are easy to add.\nLet's see how to add the crypto_box_seal_open function.

    \n

    Getting familiar

    \n
      \n
    1. First run the project as is. You may run both the demo and unit tests. Read instructions here
      2. \n
    2. Review docs on the function from libsodium and libsodium.js
      3. \n
    3. Review type definitions for libsodium.js and libsodium-jni
      4. \n
    \n

    Adding new functions

    \n
      \n
    • Add your new function (this one already exists actually) to libsodium.common.ts
      • \n
    • Write function parameters as to match libsodium.js's wrapper.
      • \n
    • Convert Uint8Array to Native Byte arrays with force_java_bytes
      • \n
    • Run native function. Review libsodium docs (not .js)
      • \n
    • Convert back to Uint8Array with javvaByteArrayToUint8Array
      • \n
    • Add unit test demonstrating functionality.
      • \n
    • Submit your merge request :)
      • \n
    \n
      public static crypto_box_seal(message: string | Uint8Array, publicKey: Uint8Array): Uint8Array {
        let messageBytes = this.force_java_bytes(message);
        let publicKeyBytes = this.force_java_bytes(publicKey);
        let ciphertext: JavaBytes = Array.create('byte', Sodium.crypto_box_sealbytes() + messageBytes.length);

        Sodium.crypto_box_seal(ciphertext, messageBytes, messageBytes.length, publicKeyBytes);

        return this.javaByteArrayToUint8Array(ciphertext);
      }
    \n

    Design decisions

    \n
      \n
    • We wish to maintain as close as possible API compatibility with libsodium.js wrappers. This means converting between JS Uint8Array and Java Byte Arrays. There is some performance penally for this but it allows us to "drop in" nativescript-libsodium in some projects that use libsodium.js.
      • \n
    • libsodium-jni is not compiled from source but from a build server. You may wish to build it yourself.
      • \n
    • We do not support libsodium's outputFormat param which complicates type definitions. This could change especially if someone submitted a merge request.
      • \n
    • Error handling could be improved - it should take the native function's return value and throw an exception if it's unable to perform the crypto.
      • \n
    \n

    iOS Support?

    \n

    Please contribute! You would need to refactor the android specific code to .android files and build a wrapper for the .ios ones.

    \n

    It might make sense to make a generic class interface and have both Android and iOS implement it to ensure consistency.

    \n

    Need paid support?

    \n

    Do you need an iOS version sooner? Or maybe prefer us to add more libsodium functions that are important to you?

    \n

    Let us know at info AT burke software dot com.

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/filterable-listpicker":{"name":"@nstudio/filterable-listpicker","version":"1.0.1","license":"Apache-2.0","readme":"

    \"Twitter

    \n

    nativescript-filterable-listpicker

    \n

    The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.

    \n \n

    Installation

    \n
    tns plugin add nativescript-filterable-listpicker
    \n

    Usage

    \n

    In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:

    \n

    NativeScript Core

    \n
    <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\" xmlns:ui=\"nativescript-filterable-listpicker\">
        <GridLayout rows=\"\" columns=\"\">
            <Image src=\"https://i.pinimg.com/736x/a4/40/04/a4400453bad6d581ec203ad1455d0c8f--pretty-pics-pretty-pictures.jpg\" stretch=\"aspectFill\" />    
            <GridLayout rows=\"*, auto, *\">
                <StackLayout height=\"300\">
                    <Button text=\"Pick Your Fav Language\" tap=\"{{showPicker}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25; margin-bottom: 20;margin-bottom:15\"/>
                    <Button text=\"Pick Your Favorite Animal\" tap=\"{{showNewThings}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;margin-bottom:15\"/>
                    <Button text=\"Use it like Autocomplete\" tap=\"{{showPickerAsAutocomplete}}\" height=\"50\" width=\"250\" style=\"background-color: rgba(0,0,0,0.7); color: white; border-radius: 25;\"/>

                    <Label text=\"{{selection ? 'I chose ' + selection : ''}}\" textWrap=\"true\" style=\"font-size: 30; text-align: center; margin-top: 50; font-weight: bold; color: white;\" />
                </StackLayout>
            </GridLayout>
            <!-- props to tes: enableSearch=\"false\" showCancel=\"false\" headingTitle=\"Testing\" -->
            <ui:FilterableListpicker focusOnShow=\"false\" id=\"myfilter\" blur=\"dark\" dimmerColor=\"rgba(76,196,211,0.7)\"  hintText=\"Type to filter...\" source=\"{{listitems}}\" canceled=\"{{cancelFilterableList}}\" itemTapped=\"{{itemTapped}}\" />        
        </GridLayout>
    </Page>
    \n

    Then in your code...

    \n
    public showPicker() {
        page.getViewById('myfilter').show();
    }

    public itemTapped(args) {
        alert(args.selectedItem + ' was tapped!')
    }

    public cancelFilterableList() {
        // this gets called if the user cancels the modal. 
    }
    \n

    Use as Autocomplte

    \n

    You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like Google Place API please see demo\nIf you bind source before use autocomplete function this resources will be cloned and until the TextField is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.

    \n
    let API_KEY = \"__YOUR_GOOGLE_API_KEY\";

    private filterableListpicker: FilterableListpicker;
    private page: Page;
    constructor(page: Page) {
        super();
        this.page = page;
        // Get filterableListpicker instance
        this.filterableListpicker = (<any>this.page.getViewById('myfilter'));
        MyModel = this;
    }

    public showPickerAsAutocomplete() {
        // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
        this.filterableListpicker.isAutocomplete = true;
        this.filterableListpicker.show(frame.topmost());
        
        this.filterableListpicker.autocomplete((data) => {
            let url = placesApiUrl + \"?input=\" + data.value + \"&language=fr_FR&key=\" + API_KEY;
            http.getJSON<Predictions>(url).then((res) => {
                //console.dir(res)
                const airportsCollection = res.predictions;
                const items = [];
                for (let i = 0; i < airportsCollection.length; i++) {
                    items.push({
                        title: airportsCollection[i].description,
                        description: \"\",
                        source: airportsCollection[i]
                    });
                    
                }
                this.set(\"listitems\", items)
            }).catch((err) => {
                const message = 'Error fetching remote data from ' + url + ': ' + err.message;
                console.log(message);
                alert(message);
            });
        });
    }
    \n

    NativeScript Angular

    \n

    In angular, you have to register the element in your app component like so:

    \n
    // app.component.ts
    import {registerElement} from \"nativescript-angular/element-registry\";
    registerElement(\"FilterableListpicker\", () => require(\"nativescript-filterable-listpicker\").FilterableListpicker);
    \n

    Then use it in your templates like...

    \n
    <GridLayout>
        <Image src=\"res://nicebackgroundimage.jpg\"></Image>
        <StackLayout>
            <Label text=\"Whats your favorite programming language?\"></Label>
            <Button text=\"Choose a Language\" (tap)=\"showPicker()\"></Button>
        </StackLayout>
        <FilterableListpicker #myfilter blur=\"dark\" hintText=\"Type to filter...\" [source]=\"listitems\" (canceled)=\"cancelFilterableList($event)\" (itemTapped)=\"itemTapped($event)\"></FilterableListpicker>
    </GridLayout>
    \n

    Then in your code...

    \n
    @ViewChild('myfilter') myfilter: ElementRef;

    cancelFilterableList() {
        console.log('canceled');
    }

    itemTapped(args) {
        alert(args.selectedItem)
    }

    showPicker() {
        this.myfilter.nativeElement.show();
    }
    \n

    Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to\nuse the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:

    \n

    in android:

    \n
    @ViewChild('myContainer') myContainer: ElementRef;

    public function showPicker() {
      this.myfilter.nativeElement.show(this.myContainer.nativeElement);
    }
    \n

    Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.

    \n

    Source Array

    \n

    As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called title, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display\nif in your object are:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDescription
    titleThe title, this is what your list will be filtered on, and it will display in bold.
    imageOPTIONAL: This will display to the left of the title.
    descriptionOPTIONAL: This will display under the title smaller and in gray.
    \n

    Here's some example code:

    \n
    public listitems = [
        {
            \"image\": \"https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300\",
            \"title\": \"Brown Bear\",
            \"description\": \"Brown bear brown bear, what do you see?\"
        },
        {
            \"image\": \"http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png\",
            \"title\": \"Red Bird\"
        },
        {
            \"title\": \"Purple Cat\",
            \"description\": \"Why are we teaching kids there are purple cats?\"
        }
    ];
    \n

    You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use title, image and description if they are present. Although title must be present.

    \n

    Here's how it will look in the picker:

    \n\n

    Webpack

    \n

    Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the bundle-config.js and require("bundle-entry-points"); parts. See more here.

    \n

    API

    \n

    The UI element accepts the following parameters:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    sourceREQUIREDThe array of strings or objects (see Source Array above) you want to display in the picker.
    hintTextEnter text to filter...This is the text that shows up as the hint for the textfield used to filter the list.
    listWidth300The width of the modal element.
    listHeight300The height of the modal element.
    focusOnShowfalsetrue or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown.
    dimmerColorrgba(0,0,0,0.8)The color of the dimmer behind the modal. You can set it to transparent, or any color supported by NativeScript (ex: rgba(255,255,255,0.5), red, #0088CC)
    blurnoneiOS only. Pass dark or light for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android.
    itemTapped(args)This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with args.selectedItem.
    canceledThis is just a function to call if the user cancels, probably rarely neccessary.
    showCancelShow cancel button or not.
    enableSearchAllow searching by showing the TextField at the top.
    autocomplete(fn: Function)Allow binding listener textChangeEvent to Textfield and use the plugin as autocomplete eg.: Google Place API.
    \n

    CSS Styling

    \n
    .flp-container .flp-list-container {
      border-radius: 10;
    }
    .flp-container .flp-list-container .flp-listview {
      background-color: white;
    }

    .flp-container .flp-list-container .flp-listview .flp-row {
      background-color: white;
    }
    /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
      padding: 10;
    } */
    .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
      margin: 10 0 10 5;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
      margin: 10 10 10 5;
      /* margin: 0 10 0 10; */
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
      font-weight: bold; 
      font-size: 16;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
      color: gray; 
      font-size: 13;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
      margin-left: 15; 
      padding: 10 0;
    }
    .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
      color: lightblue;
    }

    .flp-container .flp-hint-field {
      padding: 10 15; 
      height: 40; 
      background-color: #E0E0E0; 
      border-radius: 10 10 0 0;
    }

    .flp-container .flp-cancel-container {
      background-color: #E0E0E0; 
      height: 40; 
      border-radius: 0 0 10 10;
    }

    .flp-container .flp-cancel-container .flp-btn-cancel {
      font-weight: bold; 
      height: 40; 
      background-color: transparent; 
      border-color: transparent; 
      border-width: 1; 
      font-size: 12;
    }
    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zeroconf":{"name":"nativescript-zeroconf","version":"1.0.4","license":"MIT","readme":"

    nativescript-zeroconf

    \n

    This nativescript-zeroconf plugin provides a Zeroconf/Bonjour implementation for both iOS and Android. Currently, it only supports discovering domains and services in the local network. Should there be any requests, I might implement the service registration parts as well (please open an issue to let me know).

    \n

    Demo Application

    \n

    This repository contains a demo application in the demo-angular folder that uses this plugin to display discovered Zeroconf domains and services. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run npm run demo.ios or npm run demo.android in the src folder.

    \n

    The demo app searches for by default for http services, but you can easily adjust the serviceType in app/zeroconf/zeroconf.provider.ts.

    \n

    Installation

    \n
    tns plugin add nativescript-zeroconf
    \n

    Usage

    \n

    First, import the plugin into your provider/component, and, since the plugin returns an Observable also the relevant types:

    \n
    import { Zeroconf } from 'nativescript-zeroconf';
    import { Observable, PropertyChangeData } from 'tns-core-modules/data/observable';
    \n

    Then, instantiate a Zeroconf and define the event listeners:

    \n
        this.zeroconf = new Zeroconf('_http._tcp.', 'local.'); // param 1 = service type, param 2 = domain

        /* define event listener */

        this.zeroconf.on(Observable.propertyChangeEvent, (data: PropertyChangeData) => {
          switch(data.propertyName.toString()) {
            case 'serviceFound': {
              console.log(`serviceFound: ${JSON.stringify(data.value)}`);
              break;
            }
          }
        });

        this.zeroconf.startServiceDiscovery();
    \n

    Tip: have a look at the demo project for an example implementation

    \n

    API

    \n

    Describe your plugin methods and properties here. See nativescript-feedback for example.

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultDescription
    some propertyproperty default valueproperty description, default values, etc..
    another propertyproperty default valueproperty description, default values, etc..
    \n

    Limitations

    \n

    License

    \n

    MIT license (see LICENSE file)

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-danem-google-maps":{"name":"nativescript-danem-google-maps","version":"1.0.2","license":"Apache-2.0","readme":"

    NativeScript plugin for the Google Maps SDK

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@renatotan/basicform":{"name":"@renatotan/basicform","version":"1.0.1","license":"Apache-2.0","readme":"

    @renatotan/basicform

    \n
    ns plugin add @renatotan/basicform
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-conchecker":{"name":"tns-conchecker","version":"0.0.1","license":"ISC","readme":"

    Install

    \n
    tns plugin add tns-conchecker
    \n

    Params

    \n

    lang: object containing:

    \n
      \n
    • error: error alert title || default: 'Error'
      • \n
    • noInternet: error alert message || default: 'There is no internet connection'
      • \n
    • ok: ok alert button text || default: 'OK'
      • \n
    \n

    API

    \n

    ifInternet(fn,ifNot): if there is internet run fn() else run ifNot()

    \n

    onlyWithInternet(fn): run fn() only if there is internet

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/camera":{"name":"@codesthings/camera","version":"5.0.9","license":"Apache-2.0","readme":"

    NativeScript Camera

    \n

    Working with the camera plugin

    \n

    Overview

    \n

    Almost every mobile application needs the option to capture, save and share images.\nThe NativeScript camera plugin was designed for the first two parts of the job (taking a picture and optionally saving to device storage).

    \n

    Installation

    \n
    npm install @nativescript/camera --save
    \n

    API

    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    MethodDescription
    takePicture(options?: CameraOptions)Take a photo using the camera with an optional parameter for setting different camera options.
    requestPermissions()Request permission from the user for access to their saved photos as well as access to their camera. Returns a Promise.
    requestCameraPermissions()Request permission from the user for access to their camera. Returns a Promise.
    requestPhotosPermissions()Request permission from the user for access to their saved photos. Returns a Promise.
    isAvailable()Is the device camera available to use.
    \n

    CameraOptions

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropertyDefaultPlatformDescription
    width0BothDefines the desired width (in device independent pixels) of the taken image. It should be used with height property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    height0BothDefines the desired height (in device independent pixels) of the taken image. It should be used with width property. If keepAspectRatio actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions).
    keepAspectRatiotrueBothDefines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values.
    saveToGallerytrueBothDefines if camera picture should be copied to photo Gallery (Android) or Photos (iOS)
    allowsEditingfalseiOSDefines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
    cameraFacingrearBothThe initial camera facing. Use 'front' for selfies.
    \n
    \n

    Note: The saveToGallery option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of saveToGallery is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.

    \n
    \n

    Usage

    \n

    Requesting permissions

    \n

    Both Android and iOS require explicit permissions in order for the application to have access to the camera and save photos to the device. Once the user has granted permissions the camera module can be used.

    \n
    import { requestPermissions } from '@nativescript/camera';

    requestPermissions().then(
        function success() {
            // permission request accepted or already granted
            // ... call camera.takePicture here ...
        },
        function failure() {
            // permission request rejected
            // ... tell the user ...
        }
    );
    \n
    \n

    Note for Android: Older versions of Android that don't use a request permissions popup won't be affected by the usage of the requestPermissions method.

    \n
    \n
    \n

    Note for iOS: If the user rejects permissions from the iOS popup, the app is not allowed to ask again. You can instruct the user to go to app settings and enable the camera permission manually from there. Additionally, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To do so, edit your app/App_Resources/iOS/Info.plist and add the following clarifications:

    \n
    \n
    <key>NSCameraUsageDescription</key>
    <string>enter your camera permission request text here</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>enter your photo library permission request text here</string>
    \n

    Using the camera module to take a picture

    \n

    Using the camera module is relatively simple.\nHowever, there are some points that need a little bit more explanation.

    \n

    In order to use the camera module, just require it, as shown in Example 1:

    \n
    \n

    Example 1: Require camera module in the application

    \n
    \n
    // JavaScript
    const camera = require(\"@nativescript/camera\");
    \n
    // TypeScript
    import * as camera from \"@nativescript/camera\";
    \n

    Then you are ready to use it:

    \n
    \n

    Example 2: How to take a picture and to receive image asset

    \n
    \n
    // JavaScript
    const { Image } = require(\"@nativescript/core\");

    camera.takePicture()
        .then(function (imageAsset) {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"@nativescript/core\";

    camera.takePicture()
        .then((imageAsset) => {
            console.log(\"Result is an image asset instance\");
            var image = new Image();
            image.src = imageAsset;
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    The code in Example 2 will start the native platform camera application. After taking the picture and tapping the button Save (Android) or use image (iOS), the promise will resolve the then part and image asset will be set as src of the ui/image control.

    \n

    Using the options to take memory efficient picture

    \n

    Example 2 shows how to take a picture using the NativeScript camera module. However, it takes a huge image (even mid-level devices has a 5MP camera, which results in a image 2580x2048, which in bitmap means approximately 15 MB). In many cases you don't need such a huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. The camera takePicture() method accepts an optional parameter that could help in that case. With that optional parameter, you could set some properties like:

    \n
      \n
    • width: The desired width of the picture (in device independent pixels).
      • \n
    • height: The desired height of the picture (in device independent pixels).
      • \n
    • keepAspectRatio: A boolean parameter that indicates if the aspect ratio should be kept.
      • \n
    • saveToGallery: A boolean parameter that indicates if the original taken photo will be saved in "Photos" for Android and in "Camera Roll" in iOS
      • \n
    • allowsEditing: (iOS Only) A boolean parameter that indicates if the camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in.
      • \n
    • cameraFacing: Start with either the "front" or "rear" (default) camera of the device. The current implementation doesn't work on all Android devices, in which case it falls back to the default behavior.
      • \n
    \n

    What does device independent pixels mean? The NativeScript layout mechanism uses device-independent pixels when measuring UI controls. This allows you to declare one layout and this layout will look similar to all devices (no matter the device's display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera will return an image with bigger dimensions. For example, if we request an image that is 100x100, on iPhone 6 the actual image will be 200x200 (since its display density factor is 2 -> 1002x1002).\nSetting the keepAspectRatio property could result in a different than requested width or height. The camera will return an image with the correct aspect ratio but generally only one (from width and height) will be the same as requested; the other value will be calculated in order to preserve the aspect of the original image.

    \n

    Example 3 shows how to use the options parameter:

    \n
    \n

    Example 3: How to setup width, height, keepAspectRatio and saveToGallery properties for the camera module

    \n
    \n
    // JavaScript

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)
        .then(function (imageAsset) {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch(function (err) {
            console.log(\"Error -> \" + err.message);
        });
    \n
    // TypeScript
    import { Image } from \"@nativescript/core\";

    const options = {
        width: 300,
        height: 300,
        keepAspectRatio: false,
        saveToGallery: true
    };

    camera.takePicture(options)
        .then((imageAsset) => {
            console.log(\"Size: \" + imageAsset.options.width + \"x\" + imageAsset.options.height);
            console.log(\"keepAspectRatio: \" + imageAsset.options.keepAspectRatio);
            console.log(\"Photo saved in Photos/Gallery for Android or in Camera Roll for iOS\");
        }).catch((err) => {
            console.log(\"Error -> \" + err.message);
        });
    \n

    Save a picture

    \n

    To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:

    \n
    import { ImageSource, knownFolders, path } from '@nativescript/core';

    const source = new ImageSource();

    source.fromAsset(imageAsset)
        .then((imageSource: ImageSource) => {
            const folderPath: string = knownFolders.documents().path;
            const fileName: string = \"test.jpg\";
            const filePath: string = path.join(folderPath, fileName);
            const saved: boolean = imageSource.saveToFile(filePath, \"jpg\");

            if (saved) {
                console.log(\"Gallery: \" + this._dataItem.picture_url);
                console.log(\"Saved: \" + filePath);
                console.log(\"Image saved successfully!\");
            }
        });
    \n

    This could be used to create thumbnails for quick display within your application.

    \n

    Check if the device has available camera

    \n

    The first thing that the developers should check if the device has an available camera.\nThe method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.

    \n
    const isAvailable = camera.isAvailable();
    \n
    \n

    Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)

    \n
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stage-facebook-login":{"name":"nativescript-stage-facebook-login","version":"1.0.7","readme":"

    nativescript-stage-facebook-login

    \n

    Example usage:

    \n
        const FacebookLoginHandler = require(\"nativescript-stage-facebook-login\");

        // Initialize the handler
        FacebookLoginHandler.init(this._env.config.facebook.appId, this._env.config.facebook.appDisplayName);

        // Register our callbacks
        FacebookLoginHandler.registerCallback(this._loginFacebookSuccessCallback.bind(this), this.loginFacebookCancelCallback.bind(this), this.loginFacebookFailCallback.bind(this), this.loginFacebookDeclinedPermissions.bind(this));

        // Start the login process
        FacebookLoginHandler.logInWithReadPermissions([\"public_profile\", \"email\", \"user_friends\", \"user_birthday\"]);
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-safetynet-helper":{"name":"nativescript-safetynet-helper","version":"0.1.1","license":"MIT","readme":"

    NativeScript SafetyNet Helper

    \n

    A NativeScript module for checking device integrity using the SafetyNet API. It uses the SafetyNet Helper library

    \n

    Installation

    \n

    From the command prompt go to your app's root folder and execute:

    \n
    tns plugin add nativescript-safetynet-helper
    \n

    Usage

    \n

    Here are the supported functions:

    \n

    function: requestTest

    \n

    JavaScript

    \n
    let SafetyNetHelper = require('nativescript-safetynet-helper').SafetyNetHelper

    let helper = new SafetyNetHelper(this._apiKey)

    helper.requestTest((err, result) => {
        if (err) {
            console.log(err)
            this.updateMessage(err);
            return
        }

        console.log(`Basic Integrity - ${result.basicIntegrity}, CTS Profile Match - ${result.ctsProfileMatch}`)
    });
    \n

    TypeScript

    \n
    import { SafetyNetHelper } from 'nativescript-safetynet-helper';

    let helper = new SafetyNetHelper(this._apiKey)

    helper.requestTest((err, result) => {
        if (err) {
            console.log(err)
            this.updateMessage(err);
            return
        }

        console.log(`Basic Integrity - ${result.basicIntegrity}, CTS Profile Match - ${result.ctsProfileMatch}`)
    });
    \n

    Thanks

    \n

    Scott Alexander-Bown for his contributions to SafetyNet Helper

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-mapbox":{"name":"@nstudio/nativescript-mapbox","version":"6.0.0-rc.0","license":"MIT","readme":"

    iOS builds errors

    \n

    If you get can't find symbol MGLMapView and the like remove node_modules and platforms\nfrom your project and rebuild.

    \n

    For reasons I have yet to figure out, linking to the src directory from a\nproject's package.json cause all kinds of errors.

    \n

    So build the plugin from the src directory using

    \n
    npm run build.dist
    \n

    and the reference

    \n
    file:<path_to>/nativescript-mapbox-fbs/publish/dist/package
    \n

    in your project's package.json.

    \n

    Typings

    \n

    When upgrading the underlying libraries the typings have to be re-generated.

    \n

    Remember to update the pod respositories list in case it's unable to find the\nupdated pod file.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-couchdb":{"name":"nativescript-couchdb","version":"0.6.23","license":"Apache-2.0","readme":"

    nativescript-couchdb

    \n

    Nativescript plugin for couchdb\nA simple wrapper using nativescript http api to implement subset api compatible with PouchDB.

    \n

    Install

    \n
    tns plugin install nativescript-couchdb
    \n

    API

    \n

    constructor(couchdb_url, extraHeaders)\nSetup the database to connect to

    \n
      \n
    • url string eg: https://localhost:5984
      • \n
    • extraHeaders Map specify extra map to pass as http header
      • \n
    \n

    put(doc)

    \n
      \n
    • doc string valid couchdb json doc with _id key
      • \n
    • return promise
      • \n
    \n

    get(docId)

    \n
      \n
    • docId string document id
      • \n
    • return promise
      • \n
    \n

    remove(doc)

    \n
      \n
    • doc json object couchdb json db or json with _id, _rev key
      • \n
    • return promise
      • \n
    \n

    allDocs(options)

    \n
      \n
    • options json object couchdb params as in http://docs.couchdb.org/en/2.0.0/api/database/bulk-api.html
      • \n
    • return promise
      • \n
    \n

    query(design_view)

    \n
      \n
    • design_view string eg /_design/design_name/_view/view_name will be design_name/view_name
      • \n
    • return promise
      • \n
    \n

    Usage

    \n

    import * as dialog from \"ui/dialogs\";
    import { CouchDB } from \"nativescript-couchdb\";

    let db = new CouchDB(\"https://couchdb.server/dbname\", {
      \"Authorization\": \"Basic base64\\_encoded\\_string\"
    });
    let data = {
      _id: \"hello\",
      name: \"world\" 
    }


    // create and update
    db.put(data)
      .then(res => dialog.alert(\"saved\"))
      .catch(err => dialog.alert(\"Failed\"));

    // get data
    db.get(\"hello\")
      .then(res => dialog.alert(JSON.stringify(res)))
      .catch(err => dialog.alert(\"Data not found));

    // delete doc
    db.remove(data)
      .then(res => dialog.alert(\"    Data deleted\"))
      .catch(err => dialog.alert(\"    Delete failed\"));

    // alldocs
    db.allDocs(options)
      .then(res => dialog.alert(res))
      .catch(err => dialog.alert(err));

    // query views
    db.query(\"    user/top_contributor\", { group_level: 1, reduce: true })
      .then(res => dialog.alert(res))
      .catch(err => dialog.alert(err));
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-ilist":{"name":"nativescript-ngx-ilist","version":"1.0.2","license":"Apache-2.0","readme":"

    nativescript-ngx-ilist

    \n
    ns plugin add nativescript-ngx-ilist
    \n

    Usage

    \n

    // TODO

    \n

    License

    \n

    Apache License Version 2.0

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pbkdf2":{"name":"nativescript-pbkdf2","version":"1.0.5","license":"MIT","readme":"

    pbkdf2

    \n

    \"NPM\n\"Build\n\"Dependency

    \n

    \"js-standard-style\"

    \n

    This library provides the functionality of PBKDF2 with the ability to use any supported hashing algorithm returned from crypto.getHashes()

    \n

    Usage

    \n
    var pbkdf2 = require('pbkdf2')
    var derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 1, 32, 'sha512')

    ...
    \n

    For more information on the API, please see the relevant Node documentation.

    \n

    For high performance, use the async variant (pbkdf2.pbkdf2), not pbkdf2.pbkdf2Sync, this variant has the oppurtunity to use window.crypto.subtle when browserified.

    \n

    Credits

    \n

    This module is a derivative of cryptocoinjs/pbkdf2-sha256, so thanks to JP Richardson for laying the ground work.

    \n

    Thank you to FangDun Cai for donating the package name on npm, if you're looking for his previous module it is located at fundon/pbkdf2.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-tk":{"name":"nativescript-audio-tk","version":"1.0.9","license":"ISC","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ngn-partials":{"name":"ngn-partials","version":"1.0.3","license":"MIT","readme":"

    ngn-partials-app

    \n

    This project was generated with Angular CLI version 6.1.0.

    \n

    Development server

    \n

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    \n

    Code scaffolding

    \n

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

    \n

    Build

    \n

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    \n

    Running unit tests

    \n

    Run ng test to execute the unit tests via Karma.

    \n

    Running end-to-end tests

    \n

    Run ng e2e to execute the end-to-end tests via Protractor.

    \n

    Further help

    \n

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"whocode-nativescript-filepicker":{"name":"whocode-nativescript-filepicker","version":"1.0.17","license":"MIT","readme":"

    NativeScript Simple FilePicker Plugin

    \n

    A simple plugin for providing file picker functionality to your NativeScript app.

    \n

    Installation

    \n
    tns plugin add whocode-nativescript-filepicker
    \n

    Usage

    \n
    import { FilePicker } from 'nativescript-simple-filepicker';

    const myPicker = new FilePicker();

    myPicker.openFilePicker({
        extensions?: string[]; // Defaults to all
        multipleSelection?: boolean; // Defaults to false
    }).then((data) => {
        console.log(data.files);
    });
    \n

    License

    \n

    MIT

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"elvispos-loopback-sdk-builder":{"name":"elvispos-loopback-sdk-builder","version":"2.3.5","license":"MIT","readme":"

    LoopBack SDK Builder

    \n
    \n

    Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

    \n
    \n

    The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

    \n

    The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

    \n

    NOTE: This sdk builder is not compatible with LoopBack 4.

    \n

    Installation

    \n
    $ cd to/loopback/project
    $ npm install --save-dev @mean-expert/loopback-sdk-builder
    \n

    Documentation

    \n

    LINK TO WIKI DOCUMENTATION

    \n

    Contribute

    \n

    Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

    \n

    Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

    \n

    OIDC-SSO Service

    \n

    A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

    \n
      \n
    • Closed beta access will be active starting from July 2018.
      • \n
    \n

    Register now and get the chance to have an unlimited annual enterprise membership for free.

    \n

    [REQUEST EARLY ACCESS HERE]

    \n

    Technology References:

    \n
      \n
    • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
      • \n
    • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
      • \n
    • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
      • \n
    \n

    Contact

    \n

    Discuss features and ask questions on @johncasarrubias at Twitter.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-meteor":{"name":"nativescript-meteor","version":"0.0.6","license":"apache","readme":"

    Nativescript-Meteor

    \n

    Plugin to connect via DDP Meteor with NativeScript

    \n

    How to Install On Nativescript Project

    \n
    npm install nativescript-meteor --save
    \n

    How to use this package

    \n
    import DDPClient = require(\"nativescript-meteor\");

    var ddpclient = new DDPClient({
        host: \"localhost\",
        port: 3000,
        ssl: false,
        autoReconnect: true,
        autoReconnectTimer: 15000,
        maintainCollections: true,
        ddpVersion: '1',
        useSockJs: true
    });

    ddpclient.connect(function (error, wasReconnect) {
        if (error) {
            console.log('DDP connection error!');
            return;
        }

        if (wasReconnect) {
            console.log('Reestablishment of a connection.');
        }

        console.log('connected!');

        // CALL METHOD METEOR
        ddpclient.call(
                    'deleteSinglePost',             // name of Meteor Method being called
                    ['foo', 'bar'],            // parameters to send to Meteor Method
                    function (err, result) {   // callback which returns the method call results
                        console.log('deleteSinglePost result: ' + result);
                    },
                    function () {              // callback which fires when server has finished
                        console.log('deleteSinglePost finished');  // sending any updated documents as a result of
                    });

        // SUBSCRIBE COLLECTIONS
        ddpclient.subscribe(
            'todos',                  // name of Meteor Publish function to subscribe to
            [],                       // any parameters used by the Publish function
            function () {             // callback when the subscription is complete
                console.log('posts complete:');
                console.log(ddpclient.collections.todos);
                for (var _id in ddpclient.collections.todos) {
                    var todos = ddpclient.collections.todos[_id];
                    console.log(\"Adding available todos \" + _id + \" name: \" + todos.judul);
                }
            });
    });
    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@courthoang/nativescript-in-app-purchase":{"name":"@courthoang/nativescript-in-app-purchase","version":"1.0.4","license":"Apache-2.0","readme":"

    nativescript-in-app-purchase

    \n

    NativeScript plugin to handle in app purchases and subscriptions on Android and iOS.

    \n

    (Optional) Prerequisites / Requirements

    \n

    Refer to the mobile ecosystem provider on how to
    \ntest in app purchases.

    \n

    For Apple\nhead to developer.apple.com

    \n

    For Android Google Play Store head over to developer.android.com

    \n

    Installation

    \n

    Installing the plugin

    \n
    tns plugin add nativescript-in-app-purchase
    \n

    Usage

    \n

    Use this typings definition for Typescript and adding IntelliSense support.

    \n
        /// <reference path=\"./node_modules/nativescript-in-app-purchase/index.d.ts\" />
    \n

    Initialization

    \n

    First of all it is required to create an instance of InAppPurchaseManager.

    \n
        import { OnInit } from '@angular/core'
        import { InAppPurchaseManager, InAppPurchaseResultCode, InAppPurchaseStateUpdateListener, InAppPurchaseTransactionState, InAppPurchaseType } from 'nativescript-in-app-purchase'
        export class Test implements OnInit {
            private inAppPurchaseManager: InAppPurchaseManager
            constructor() { }
            ngOnInit(): void {
                const purchaseStateUpdateListener: InAppPurchaseStateUpdateListener = {
                    onUpdate: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                        if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                            // Item has been purchased, sync local items list ...
                        }
                    },
                    onUpdateHistory: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                        if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Restored) {
                            // Item has been  restored, sync local items list ...
                        }
                    }
                }
                InAppPurchaseManager.bootStrapInstance(purchaseStateUpdateListener).then(inAppPurchaseManager => {
                    this.inAppPurchaseManager = inAppPurchaseManager
                })
            }
        }
    \n

    Product list

    \n

    Get the list of in app products.
    \nTo retrieve the list of in app products you must query a known amount of product IDs.

    \n
        // additional imports required
        import { InAppPurchaseType, InAppListProductsResult, InAppProduct } from 'nativescript-in-app-purchase'

        // query products
        queryProducts() {
            const myProductIds = ['product_1', 'product_2']
            // For subscriptions change to `InAppPurchaseType.Subscription`
            const myProductType = InAppPurchaseType.InAppPurchase 

            this.inAppPurchaseManager.list(myProductIds, myProductType)
                .then((result: InAppListProductsResult) => {
                    const products: InAppProduct[] = result.products
                    for (const product of products) {
                        // get the products ...
                        console.log(product.title, product)
                    }
                })
        }
    \n

    Buy a product

    \n

    When buying a product the result InAppOrderResult is only related to the order transaction it self.
    \nThe purchase state of the product will be called on the InAppPurchaseStateUpdateListener#onUpdate method.
    \nThis is where you have to confirm the purchase to finish the whole purchasing transaction.
    \nThe App Store and Google Play Store will automatically refund orders that haven't been confirmed.

    \n

    Buying a product

    \n
        // additional imports required
        import { InAppOrderResult } from 'nativescript-in-app-purchase'

        // by product
        buy() {
            const myProducts: InAppProduct[] = []//...

            const productToBuy: InAppProduct = myProducts[0]
            this.inAppPurchaseManager.order(productToBuy)
                .then((result: InAppOrderResult) => {
                    if (result.success) {
                        // order has been processed
                        // ... expecting confirmation ...
                        // handle confirmation in `InAppPurchaseStateUpdateListener.onUpdate(...)`
                    }
                })
        }
    \n

    Confirming a product

    \n
        // additional imports required
        import { InAppOrderConfirmResult } from 'nativescript-in-app-purchase'

        ngOnInit(): void {
            const purchaseStateUpdateListener: InAppPurchaseStateUpdateListener = {
                onUpdate: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                    if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                        // Item has been purchased, sync local items list ...
                        this.confirmOrder(purchaseTransactionState)
                    }
                },
                onUpdateHistory: (purchaseTransactionState: InAppPurchaseTransactionState): void => {
                    if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Restored) {
                        // Item has been  restored, sync local items list ...
                    }
                }
            }
            // ...
        }

        confirmOrder(purchaseTransactionState: InAppPurchaseTransactionState) {
            const isConsumable = (productId: string): boolean => { 
                /* determine if is consumable and can be purchased more then once */
                return false }

            // only purchased products can be confirmed
            if (purchaseTransactionState.resultCode === InAppPurchaseResultCode.Purchased) {
                const consumable: boolean = isConsumable(purchaseTransactionState.productIdentifier)
                this.inAppPurchaseManager.orderConfirm(purchaseTransactionState, consumable)
                    .then((result: InAppOrderConfirmResult) => {
                        if (result.success) {
                            // order confirmation has been processed
                        }
                    })

            }
        }
    \n

    Restore purchases

    \n

    Restore purchases will get you all items the user already purchased.
    \nThe purchase state of the restored product will be called on the InAppPurchaseStateUpdateListener#onUpdateHistory method.

    \n
        // additional imports required
        import { InAppOrderHistoryResult } from 'nativescript-in-app-purchase'

        restoreProducts() {
            this.inAppPurchaseManager.purchaseHistory()
                .then((result: InAppOrderHistoryResult) => {
                    if (result.success) {
                        // purchase history requested
                        // handle it in `InAppPurchaseStateUpdateListener.onUpdateHistory(...)`
                    }
                })
        }
    \n

    API

    \n
      \n
    • list(productIds: string[], productType?: InAppPurchaseType): Promise<InAppListProductsResult>
      \nList all products
      • \n
    • order(product: InAppProduct): Promise<InAppOrderResult>
      \nOrder a product
      • \n
    • orderConfirm(purchaseTransaction: InAppPurchaseTransactionState, consumable: boolean): Promise<InAppOrderConfirmResult>
      \nConfirm the buy of a product to make it final
      • \n
    • purchaseHistory(): Promise<InAppOrderHistoryResult>
      \nLoad user's owened products
      • \n
    • canMakePayment(): boolean
      \nCheck wether billing is enabled or not
      • \n
    • static bootStrapInstance(purchaseStateUpdateListener?: InAppPurchaseStateUpdateListener): Promise<InAppPurchaseManager>
      \nCreate a new instance of the in app purchase manager
      • \n
    • shutdown()
      \nClose connection to the unerlying OS billing API
      • \n
    \n

    DEMO App

    \n

    There is a demo angular app project included.
    \nCheckout this repo and read the DEMO Readme

    \n

    License

    \n

    Apache License Version 2.0, January 2020

    \n

    Donation

    \n

    Donate with Bitcoin
    \n3GFxvCK4nnTvHcLpVtFDQhdjANzRGBV6G6
    \n\"Open
    \nOpen in Wallet

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-appcompat":{"name":"nativescript-plugin-appcompat","version":"22.2.1","license":"Apache-2.0","readme":"

    nativescript-plugin-appcompat

    \n

    A plugin which installs the v7-appcompat Android Support library to your NativeScript project.

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-openid":{"name":"nativescript-openid","version":"1.2.7","license":"Apache-2.0","readme":"

    # Angular OIDC Client

    \n

    Universal OpenID Connect Client library for Angular

    \n

    Installation:

    \n

    npm install angular-oidc-client --save

    \n

    Usage

    \n

    auth.ts (NativeScript)

    \n
    import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        text=""\n        textWrap="true"\n        class="icon-moon rotating"\n        verticalAlignment="middle"\n        style="font-size: 30; display: inline-block;"\n        horizontalAlignment="center">\n    </Label>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    auth.ts (Web)

    \n
    declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router, ActivatedRoute } from "@angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""]);\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"]);\n                },\n                clientId: "...",\n                clientSecret: "...",\n                REDIRECT: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.queryParams\n        .subscribe((params) => {\n        let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n        });\n        this.loadStarted({url: window.location.href });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
    \n

    app.module.ts

    \n
    ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService, AuthInterceptor } from "angular-oidc-client";\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
    \n

    Notes:

    \n

    Please setup the Redirect Condition OpenID setting to equal "*" (Any)

    \n

    Copyright (C)2018 @medozs Apache-2.0 License

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-rad-imagepicker":{"name":"@nstudio/nativescript-rad-imagepicker","version":"2.0.5","license":"Apache-2.0","readme":"

    NativeScript Rad Imagepicker Plugin \"apple\" \"android\"

    \n

    NativeScript plugin for whatsapp style image picking.\nThis Plugin uses PixImagePicker for Android and ImagePicker for iOS

    \n

          

    \n

    Installation

    \n
    tns plugin add @nstudio/nativescript-rad-imagepicker
    \n

    Usage

    \n
    const RadImagepicker = require('@nstudio/nativescript-rad-imagepicker').RadImagepicker;
    const PickerOptions = require('@nstudio/nativescript-rad-imagepicker').PickerOptions;
    const radImagepicker = new RadImagepicker();
    radImagepicker.pick(opts).then((selectedImages) => {
        if (selectedImages) {
            // Do something with selected images
            // currently 
            // the image will be of type nativescript image source
            // tns-core-modules/image-source
        }
    });
    \n

    API

    \n

    Following picker options are available

    \n
    PickerOptions {
        doneButtonTitle?: string; // only affects ios
        noImagesTitle?: string; // only affects ios
        allowVideoSelection?: boolean; // only affects ios
        imageLimit?: number;
    }
    \n

    Picker api

    \n
    pick(options: PickerOptions): Promise<Array<any>>;
    \n

    When the promise resolves, you will get array of imageSource

    \n

    Theming

    \n

    Android

    \n

    Add desired colors in app/App_Resources/Android/src/main/res/values/colors.xml

    \n
    <color name=\"ns_blue\">#272734</color>
    <color name=\"colorPrimaryPix\">#075e54</color>
    <color name=\"colorPrimaryLightPix\">#80075e54</color>
    \n

    Permissions

    \n

    Android

    \n

    Make sure these lines are in your Manifest.xml

    \n
    <uses-permission android:name=\"android.permission.CAMERA\" />
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
    <uses-feature android:name=\"android.hardware.camera\" />
    \n

    iOS

    \n

    Add these to info.plist, you can add more descriptive message here

    \n
    <key>NSCameraUsageDescription</key>
    <string>This app uses your camera</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>This app uses your photo library</string>
    \n
    \n

    Made With ♥️ for {N} Community by nStudio

    \n

    Special Thanks to Richard Smith and Osei Fortune :)

    \n

    License

    \n

    Apache License Version 2.0, January 2004

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-player-tk":{"name":"nativescript-audio-player-tk","version":"1.0.5","license":"LGPL-3.0","readme":"

    ERROR: No README data found!

    \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-camera":{"name":"@yoonit/nativescript-camera","version":"3.2.1","license":"MIT","readme":"

    \n

    NativeScript Yoonit Camera

    \n

    \"NativeScript\" \"Version\" \"Downloads\"

    \n

    \"Android\" \"iOS\" \"MIT

    \n

    A NativeScript plugin to provide:

    \n
      \n
    • Modern Android Camera API Camera X
      • \n
    • Camera preview (Front & Back)
      • \n
    • PyTorch integration (Android)
      • \n
    • Computer vision pipeline
      • \n
    • Face detection, capture and image crop
      • \n
    • Understanding of the human face
      • \n
    • Frame capture
      • \n
    • Capture timed images
      • \n
    • QR Code scanning
      • \n
    \n
    \n

    More about...

    \n

    The plugin's core is the native layer. Every change in the native layer, reflects here. This plugin, the Yoonit Camera, we can say that is an aggregation of many Yoonit's native libs:

    \n\n

    All this native libs can be used independently.

    \n
    \n

    Table Of Contents

    \n\n

    Installation

    \n
    npm i -s @yoonit/nativescript-camera
    \n

    Usage

    \n

    All the functionalities that the @yoonit/nativescript-camera provides is accessed through the YoonitCamera component, that includes the camera preview. Below we have the basic usage code, for more details, your can see the Methods, Events or the Demo Vue.

    \n

    VueJS Plugin

    \n

    main.js

    \n
    import Vue from 'nativescript-vue'  
    import YoonitCamera from '@yoonit/nativescript-camera/vue'  
      
    Vue.use(YoonitCamera)
    \n

    After that, you can access the camera object in your entire project using this.$yoo.camera

    \n

    Vue Component

    \n

    App.vue

    \n
    <template>
      <Page @loaded=\"onLoaded\">
        <YoonitCamera
          ref=\"yooCamera\"
          lens=\"front\"
          captureType=\"face\"
          imageCapture=true
          imageCaptureAmount=10
          imageCaptureInterval=500
          detectionBox=true
          @faceDetected=\"doFaceDetected\"
          @imageCaptured=\"doImageCaptured\"
          @endCapture=\"doEndCapture\"
          @qrCodeContent=\"doQRCodeContent\"
          @status=\"doStatus\"
          @permissionDenied=\"doPermissionDenied\"
        />
      </Page>
    </template>

    <script>
      export default {
        data: () => ({}),

        methods: {
          async onLoaded() {

            console.log('[YooCamera] Getting Camera view')
            this.$yoo.camera.registerElement(this.$refs.yooCamera)

            console.log('[YooCamera] Getting permission')
            if (await this.$yoo.camera.requestPermission()) {
              
              console.log('[YooCamera] Permission granted, start preview')
              this.$yoo.camera.preview()
            }
          },

          doFaceDetected({ 
            x, 
            y, 
            width, 
            height,
            leftEyeOpenProbability,
            rightEyeOpenProbability,
            smilingProbability,
            headEulerAngleX,
            headEulerAngleY,
            headEulerAngleZ
          }) {
            console.log(
              '[YooCamera] doFaceDetected',
              `
              x: ${x}
              y: ${y}
              width: ${width}
              height: ${height}
              leftEyeOpenProbability: ${leftEyeOpenProbability}
              rightEyeOpenProbability: ${rightEyeOpenProbability}
              smilingProbability: ${smilingProbability}
              headEulerAngleX: ${headEulerAngleX}
              headEulerAngleY: ${headEulerAngleY}
              headEulerAngleZ: ${headEulerAngleZ}
              `
            )
            if (!x || !y || !width || !height) {
              this.imagePath = null
            }
          },

          doImageCaptured({
            type,
            count,
            total,
            image: {
              path,
              source
            },
            inferences,
            darkness,
            lightness,
            sharpness
          }) {
            if (total === 0) {
              console.log('[YooCamera] doImageCreated', `${type}: [${count}] ${path}`)
              this.imageCreated = `${count}`
            } else {
              console.log('[YooCamera] doImageCreated', `${type}: [${count}] of [${total}] - ${path}`)
              this.imageCreated = `${count} de ${total}`
            }
            console.log('[YooCamera] Mask Pytorch', inferences)
            
            console.log('[YooCamera] Image Quality Darkness:', darkness)
            console.log('[YooCamera] Image Quality Lightness', lightness)
            console.log('[YooCamera] Image Quality Sharpness', sharpness)
            this.imagePath = source
          },

          doEndCapture() {
            console.log('[YooCamera] doEndCapture')
          },

          doQRCodeContent({ content }) {
            console.log('[YooCamera] doQRCodeContent', content)
          },

          doStatus({ status }) {
            console.log('[YooCamera] doStatus', status)
          },

          doPermissionDenied() {
            console.log('[YooCamera] doPermissionDenied')
          }
        }
      }
    </script>
    \n

    API

    \n

    Props

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    PropsInput/FormatDefault valueDescription
    lens"front" or "back""front"The camera lens to use "front" or "back".
    captureType"none", "front", "frame" or "qrcode""none"The capture type of the camera.
    imageCapturebooleanfalseEnable/disabled save image capture.
    imageCaptureAmountnumber0The image capture amount goal.
    imageCaptureIntervalnumber1000The image capture time interval in milliseconds.
    imageCaptureWidth"NNpx""200px"The image capture width in pixels.
    imageCaptureHeight"NNpx""200px"The image capture height in pixels.
    colorEncoding"RGB" or "YUV""RGB"Only for android. The image capture color encoding type: "RGB" or "YUV".
    detectionBoxbooleanfalseShow/hide the face detection box.
    detectionBoxColorstring#ffffffSet detection box color.
    detectionMinSize"NN%""0%"The face minimum size percentage to capture.
    detectionMaxSize"NN%""100%"The face maximum size percentage to capture.
    detectionTopSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the top side of the detection. Use the detectionBox to have a visual result.
    detectionRightSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the right side of the detection. Use the detectionBox to have a visual result.
    detectionBottomSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the bottom side of the detection. Use the detectionBox to have a visual result.
    detectionLeftSize"NN%""100%"Represents the percentage. Positive value enlarges and negative value reduce the left side of the detection. Use the detectionBox to have a visual result.
    roibooleanfalseEnable/disable the region of interest capture.
    roiTopOffset"NN%""0%"Distance in percentage of the top face bounding box with the top of the camera preview.
    roiRightOffset"NN%""0%"Distance in percentage of the right face bounding box with the right of the camera preview.
    roiBottomOffset"NN%""0%"Distance in percentage of the bottom face bounding box with the bottom of the camera preview.
    roiLeftOffset"NN%""0%"Distance in percentage of the left face bounding box with the left of the camera preview.
    roiAreaOffsetbooleanfalseEnable/disable display of the region of interest area offset.
    roiAreaOffsetColorstring'#ffffff73'Set display of the region of interest area offset color.
    faceContoursbooleanfalseEnable/disable display list of points on a detected face.
    faceContoursColorstring'#FFFFFF'Set face contours color.
    computerVision (Android Only)booleanfalseEnable/disable computer vision model.
    torchbooleanfalseEnable/disable device torch. Available only to camera lens "back".
    \n

    Methods

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FunctionParametersValid valuesReturn TypeDescription
    requestPermission--promiseAsk the user to give the permission to access camera.
    hasPermission--booleanReturn if application has camera permission.
    preview--voidStart camera preview if has permission.
    startCapturetype: string
    • "none"
    • "face"
    • "qrcode"
    • "frame"
    		voidSet capture type "none", "face", "qrcode" or "frame". Default value is "none".
    stopCapture--voidStop any type of capture.
    destroy--voidDestroy preview.
    toggleLens--voidToggle camera lens facing "front"/"back".
    setCameraLenslens: string"front" or "back"voidSet camera to use "front" or "back" lens. Default value is "front".
    getLens--stringReturn "front" or "back".
    setImageCaptureenable: booleantrue or falsevoidEnable/disabled save image capture. Default value is false.
    setImageCaptureAmountamount: IntAny positive Int valuevoidFor value 0, save infinity images. When the capture image amount is reached, the event onEndCapture is triggered. Default value is 0.
    setImageCaptureIntervalinterval: numberAny positive number that represent time in millisecondsvoidSet the image capture time interval in milliseconds.
    setImageCaptureWidthwidth: stringValue format must be in NNpxvoidSet the image capture width in pixels.
    setImageCaptureHeightheight: stringValue format must be in NNpxvoidSet the image capture height in pixels.
    setImageCaptureColorEncodingcolorEncoding: string"YUV" or "RGB"voidOnly for android. Set the image capture color encoding type: "RGB" or "YUV".
    setDetectionBoxenable: booleantrue or falsevoidSet to show/hide the face detection box.
    setDetectionBoxColorcolor: stringhexadecimalvoidSet detection box color.
    setDetectionMinSizepercentage: stringValue format must be in NN%voidSet the face minimum size percentage to capture.
    setDetectionMaxSizepercentage: stringValue format must be in NN%voidSet the face maximum size percentage to capture.
    setDetectionTopSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the top side of the detection. Use the setDetectionBox to have a visual result.
    setDetectionRightSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the right side of the detection. Use the setDetectionBox to have a visual result.
    setDetectionBottomSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the bottom side of the detection. Use the setDetectionBox to have a visual result.
    setDetectionLeftSizepercentage: stringValue format must be in NN%voidRepresents the percentage. Positive value enlarges and negative value reduce the left side of the detection. Use the setDetectionBox to have a visual result.
    setROIenable: booleantrue or falsevoidEnable/disable face region of interest capture.
    setROITopOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the top face bounding box with the top of the camera preview.
    setROIRightOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the right face bounding box with the right of the camera preview.
    setROIBottomOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the bottom face bounding box with the bottom of the camera preview.
    setROILeftOffsetpercentage: stringValue format must be in NN%voidDistance in percentage of the left face bounding box with the left of the camera preview.
    setROIMinSizepercentage: stringValue format must be in NN%voidSet the minimum face size related within the ROI.
    setROIAreaOffsetenable: booleantrue or falsevoidEnable/disable display of the region of interest area offset.
    setROIAreaOffsetColorcolor: stringHexadecimal colorvoidSet display of the region of interest area offset color.
    setFaceContoursenable: booleantrue or falsevoidEnable/disable display list of points on a detected face.
    setFaceContoursColorcolor: stringHexadecimal colorvoidSet face contours color.
    setComputerVision (Android Only)enable: booleantrue or falsevoidEnable/disable computer vision model.
    setComputerVisionLoadModels (Android Only)modelPaths: Array<string>Valid system path file to a PyTorch computer vision modelvoidSet model to be used when image is captured. To se more about it, Click Here.
    computerVisionClearModels (Android Only)--voidClear models that was previous added using setComputerVisionLoadModels.
    setTorchenable: booleantrue or falsevoidEnable/disable device torch. Available only to camera lens "back".
    \n

    Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    EventParametersDescription
    imageCaptured{ type: string, count: number, total: number, image: object = { path: string, source: any, binary: any }, inferences: [{ ['model name']: model output }], darkness: number, lightness: number, sharpness: number }Must have started capture type of face/frame. Emitted when the face image file saved:
    • type: "face" or "frame"
      • count: current index
    • total: total to create
    • image.path: the face/frame image path
    • image.source: the blob file
    • image.binary: the blob file
    • inferences: An Array with models output
    • darkness: image darkness classification.
    • lightness: image lightness classification.
    • sharpness: image sharpness classification.
      faceDetected{ x: number, y: number, width: number, height: number, leftEyeOpenProbability: number, rightEyeOpenProbability: number, smilingProbability: number, headEulerAngleX: number, headEulerAngleY: number, headEulerAngleZ: number }Must have started capture type of face. Emit the face analysis, all parameters are null if no more face detecting.
      endCapture-Must have started capture type of face/frame. Emitted when the number of image files created is equal of the number of images set (see the method setImageCaptureAmount).
      qrCodeContent{ content: string }Must have started capture type of qrcode (see startCapture). Emitted when the camera read a QR Code.
      status{ type: 'error'/'message', status: string }Emit message error from native. Used more often for debug purpose.
      permissionDenied-Emit when try to preview but there is no camera permission.
      \n

      Face Analysis

      \n

      The face analysis is the response send by the onFaceDetected. Here we specify all the parameters.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AttributeTypeDescription
      xnumberThe x position of the face in the screen.
      ynumberThe y position of the face in the screen.
      widthnumberThe width position of the face in the screen.
      heightnumberThe height position of the face in the screen.
      leftEyeOpenProbabilitynumberThe left eye open probability.
      rightEyeOpenProbabilitynumberThe right eye open probability.
      smilingProbabilitynumberThe smiling probability.
      headEulerAngleXnumberThe angle in degrees that indicate the vertical head direction. See Head Movements
      headEulerAngleYnumberThe angle in degrees that indicate the horizontal head direction. See Head Movements
      headEulerAngleZnumberThe angle in degrees that indicate the tilt head direction. See Head Movements
      \n

      Head Movements

      \n

      Here we're explaining the above gif and how reached the "results". Each "movement" (vertical, horizontal and tilt) is a state, based in the angle in degrees that indicate head direction;

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Head DirectionAttributev < -36°-36° < v < -12°-12° < v < 12°12° < v < 36°36° < v
      VerticalheadEulerAngleXSuper DownDownFrontalUpSuper Up
      HorizontalheadEulerAngleYSuper LeftLeftFrontalRightSuper Right
      TiltheadEulerAngleZSuper RightRightFrontalLeftSuper Left
      \n

      Image Quality

      \n

      The image quality is the classification of the three attributes: darkness, lightness and sharpness. Result available in the imageCapture event. Let's see each parameter specifications:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ThresholdClassification
      Darkness
      darkness > 0.7Too dark
      darkness <= 0.7Acceptable
      Lightness
      lightness > 0.65Too light
      lightness <= 0.65Acceptable
      Sharpness
      sharpness >= 0.1591Blurred
      sharpness < 0.1591Acceptable
      \n

      Messages

      \n

      Pre-define message constants used by the status event.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MessageDescription
      INVALID_MINIMUM_SIZEFace/QRCode width percentage in relation of the screen width is less than the set.
      INVALID_MAXIMUM_SIZEFace/QRCode width percentage in relation of the screen width is more than the set.
      INVALID_OUT_OF_ROIFace bounding box is out of the set region of interest.
      \n

      Contribute and make it better

      \n

      Clone the repo, change what you want and send PR.

      \n

      For commit messages we use Conventional Commits.

      \n

      Contributions are always welcome, some people that already contributed!

      \n

      \n
      \n

      Code with ❤ by the Cyberlabs AI Front-End Team

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils":{"name":"nativescript-google-maps-utils","version":"0.1.3","license":"Unlicense","readme":"

      nativescript-google-maps-utils

      \n

      NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

      \n

      \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

      \n

      State

      \n

      Android implemented.

      \n

      iOS not implemented.

      \n

      Dependencies

      \n\n

      Install

      \n
      tns plugin add nativescript-google-maps-utils
      \n

      Usage

      \n
      var GoogleMaps = require('nativescript-google-maps-sdk');
      var GoogleMapsUtils = require('nativescript-google-maps-utils');


      function onMapReady(args) {

        var mapView = args.object;

      \tvar positionSet = [ /* GoogleMaps.Position... */ ];

      \tGoogleMapsUtils.setupHeatmap(mapView, positionSet);


      \tvar markerSet = [ /* GoogleMaps.Marker... */ ];

      \tGoogleMapsUtils.setupMarkerCluster(mapView, makerSet);

      }
      ...
      \n

      Usage with TypeScript

      \n

      import using either of

      \n
        \n
      • import GoogleMapsUtils = require("nativescript-google-maps-utils")
        • \n
      • import * as GoogleMapsUtils from "nativescript-google-maps-utils"
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mapo80/nativescript-range-seek-bar":{"name":"@mapo80/nativescript-range-seek-bar","version":"1.0.3","license":"Apache-2.0","readme":"

      NativeScript Range Seek Bar

      \n

      A NativeScript Range Seek Bar widget.

      \n

      Based on

      \n

      TTRangeSlider for iOS

      \n

      Crystal Range Seekbar for Android

      \n

      Installation

      \n

      Run tns plugin add nativescript-range-seek-bar

      \n

      API

      \n

      Events

      \n
        \n
      • rangeSeekBarChanged
        \nTriggered when user has changed minimum value or maximum value on the Range Seek Bar.
        • \n
      • rangeSeekBarFinalValue
        \nTriggered when user has finished touch on the Range Seek Bar.
        • \n
      \n

      Instance Properties

      \n
        \n
      • minValue - Number
        \nGets or sets minimum value of the Range Seek Bar.
        • \n
      • maxValue - Number
        \nGets or sets maximum value of the Range Seek Bar.
        • \n
      • minStartValue - Number
        \nGets or sets minimum start value of the Range Seek Bar.
        • \n
      • maxStartValue - Number
        \nGets or sets maximum start value of the Range Seek Bar.
        • \n
      • minRange - Number
        \nGets or sets minimum range of two thumb.
        • \n
      • step - Number
        \nGets or sets minimum steps between range, default is 1.
        • \n
      • cornerRadius - Number
        \nGets or sets corner radius of two thumb.
        • \n
      • barHeight - Number
        \nGets or sets bar height of the Range Seek Bar.
        • \n
      • barColor - Color
        \nGets or sets bar color of the Range Seek Bar.
        • \n
      • barHighlightColor - Color
        \nGets or sets bar highlight color of the Range Seek Bar.
        • \n
      • thumbColor - Color
        \nGets or sets color of two thumb.
        • \n
      \n

      Usage in Angular

      \n
        \n
      • Import NativeScriptUIRangeSeekBarModule in NgModule:
        • \n
      \n
      import { NativeScriptUIRangeSeekBarModule } from \"nativescript-range-seek-bar/angular\";
      //......
      @NgModule({
      \t//......
      \timports: [
              //......
      \t\tNativeScriptUIRangeSeekBarModule,
              //......
      \t],
          //......
      })
      \n
      <!-- app.component.html -->
      <StackLayout>
          <RangeSeekBar [minValue]=\"rangeSeekBarProp.minValue\" [maxValue]=\"rangeSeekBarProp.maxValue\" [minStartValue]=\"rangeSeekBarProp.minStartValue\"
              [maxStartValue]=\"rangeSeekBarProp.maxStartValue\" [minRange]=\"rangeSeekBarProp.minRange\" [step]=\"rangeSeekBarProp.step\"
              (rangeSeekBarChanged)=\"rangeSeekBarChanged($event)\" (rangeSeekBarFinalValue)=\"rangeSeekBarFinalValue($event)\" class=\"range-seek-bar\">      </RangeSeekBar>
      </StackLayout>
      \n
      /*app.css*/
      .range-seek-bar {
          bar-color: #8990C4;
          bar-highlight-color: #2434AD;
          thumb-color: #1A246D;
          bar-height: 10;
          corner-radius: 30;
      }
      \n
      // app.component.ts
      import { Component } from \"@angular/core\";
      import { RangeSeekBarEventData } from \"nativescript-range-seek-bar\";

      @Component({
          selector: \"ns-app\",
          templateUrl: \"app.component.html\",
      })

      export class AppComponent {

          public rangeSeekBarProp = {
              minValue: 0,
              maxValue: 100,
              minStartValue: 0,
              maxStartValue: 100,
              minRange: 0,
              step: 1
          };

          constructor() { }

          rangeSeekBarChanged(event: RangeSeekBarEventData) {
              console.log(\"rangeSeekBarChanged: \", event.value);
          }

          rangeSeekBarFinalValue(event: RangeSeekBarEventData) {
              console.log(\"rangeSeekBarFinalValue: \", event.value);
          }
      }
      \n

      Demos

      \n

      This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

      \n
      $ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
      $ cd nativescript-range-seek-bar/src
      $ npm install
      $ npm run demo.ios
      \n

      This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.

      \n

      If you want to run the Angular demo simply use the demo.ios.ng.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cast":{"name":"nativescript-cast","version":"0.3.0","license":"Apache-2.0","readme":"

      nativescript-cast

      \n

      Chromecast support for NativeScript 6.

      \n

      Requirements

      \n

      You must have a valid Chromecast Application ID. You can obtain one at the Google Cast Developer Console.

      \n

      NativeScript 6 or higher. For lower versions, you can use an older version of this plugin 0.1.2.

      \n

      Installation

      \n
      tns plugin add nativescript-cast
      \n

      Usage

      \n

      Android

      \n

      Set your Application ID.

      \n
      <!-- App_Resources/Android/src/main/res/values/strings.xml -->
      <string name=\"app_id\">4F8B3483</string>
      \n

      The Google Cast design checklist requires a sender app to provide an expanded controller. Include ExpandedControllerActivity in your AndroidManifest.xml.

      \n
      <!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
      <activity
        android:name=\"com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity\"
        android:label=\"@string/app_name\"
        android:launchMode=\"singleTask\"
        android:screenOrientation=\"portrait\">
        <intent-filter>
          <action android:name=\"android.intent.action.MAIN\"/>
        </intent-filter>
        <meta-data
          android:name=\"android.support.PARENT_ACTIVITY\"
          android:value=\"com.tns.NativeScriptActivity\"/>
      </activity>
      \n

      If you are using Webpack, add 'nativescript-cast/cast-options-provider' to appComponents. You will have to repeat this step after performing a tns update.

      \n
      // webpack.config.js
      const appComponents = [
        'tns-core-modules/ui/frame',
        'tns-core-modules/ui/frame/activity',
        'nativescript-cast/cast-options-provider'
      ];
      \n

      Alternatively you can create a custom webpack configuration. See the demo for an example.

      \n
      \n

      iOS

      \n

      Set your Application ID.

      \n
      <!-- App_Resources/iOS/Info.plist -->
      <key>AppID</key>
      <string>4F8B3483</string>
      \n

      Add the following before your application.run(). This will initialise the GCKCastContext with the Application ID from your Info.plist file.

      \n
      import * as application from 'tns-core-modules/application';
      import * as utils from 'tns-core-modules/utils/utils';

      application.on(application.launchEvent, (args) => {
        if (args.ios !== undefined) {
          // AppID value from Info.plist
          const mainBundle = utils.ios.getter(NSBundle, NSBundle.mainBundle);
          const appId = mainBundle.infoDictionary.objectForKey('AppID');

          const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
          GCKCastContext.setSharedInstanceWithOptions(castOptions);
        }
      });
      \n

      ⚠️ iOS 12+ & Xcode 10 ⚠️

      \n

      If developing using Xcode 10 and targeting iOS devices running iOS 12 or higher, the "Access WiFi Information" capability is required in order to discover and connect to Cast devices. The plugin comes with an app.entitlements which will add this capability to the workspace, however, you must also Add the Access WiFi information feature to your App ID .

      \n

      See iOS sender setup for more info.

      \n

      ⚠️ iOS 13+ & Guest Mode ⚠️

      \n

      iOS 13+ requires Bluetooth and Microphone permissions in order to use Guest Mode with Chromecast. This plugin sets these permissions in the Info.plist file.

      \n

      See iOS Guest Mode for more info.

      \n
      \n

      Place CastButton in to your view.

      \n

      NativeScript

      \n
      <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        loaded=\"pageLoaded\"
        class=\"page\"
        xmlns:cast=\"nativescript-cast\"
      >
        <ActionBar title=\"App Name\">
          <ActionItem ios.position=\"right\">
            <StackLayout>
              <cast:CastButton cast=\"{{ handleCastEvent }}\" />
            </StackLayout>
          </ActionItem>
        </ActionBar>
        <!-- ... -->
      </Page>
      \n

      Angular

      \n

      Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

      \n
      import { NativescriptCastModule } from 'nativescript-cast/angular';

      @NgModule({
        imports: [
          NativescriptCastModule
        ]
      });
      \n

      Include in your template.

      \n
      <ActionBar [title]=\"App Name\" >
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <CastButton (cast)=\"handleCastEvent($event)\"></CastButton>
          </StackLayout>
        </ActionItem>
      </ActionBar>
      \n

      Vue

      \n

      Register the element in your app's main entry point, typically main.ts.

      \n
      Vue.registerElement('CastButton', () => require('nativescript-cast').CastButton);
      \n

      Include in your template.

      \n
      <ActionBar title=\"App Name\">
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <CastButton @cast=\"handleCastEvent\" />
          </StackLayout>
        </ActionItem>
      </ActionBar>
      \n

      Event handler

      \n

      Set up an event handler for all cast events. The cast instance is available on args.object.

      \n
      handleCastEvent(args): void {
        console.log('cast: ' + args.object);
        console.log('eventName: ' + args.data.eventName);
      }
      \n

      Casting

      \n

      When the Cast receiver is ready, you can load your media.

      \n
      const mediaInfo = {
        contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
        contentType: 'video/mp4',
        streamType: 'BUFFERED',
        duration: undefined,
        metadata: {
          metadataType: 'MOVIE',
          title: 'Tears of Steel',
          subtitle: 'By Blender Foundation',
          description: 'Sintel is an independently produced short film, initiated by the Blender Foundation.',
          images: [
            {
              url: 'http://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
              width: 480,
              height: 270,
            }
          ]
        },
        textTracks: [
          {
            src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
            contentType: 'text/vtt',
            name: 'English',
            language: 'en'
          },
          {
            src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
            contentType: 'text/vtt',
            name: 'Spanish',
            language: 'es'
          }
        ],
        textTrackStyle: {
          foregroundColor: '#0000cc',
          backgroundColor: '#00cc00',
        },
        customData: {
          anything: 'you like'
        }
      };

      cast.loadMedia(mediaInfo);
      \n

      API

      \n

      Events

      \n

      Event names follow the Android naming structure.\niOS events are passed from GCKSessionManagerListener, GCKRemoteMediaClientListener and GCKMediaQueueDelegate.\nAndroid events are passed from SessionManagerListener, MediaRouter.Callback and MediaQueue.Callback.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NativeScriptAndroidiOS
      onSessionEndedonSessionEndeddidEndSession
      onSessionEndingonSessionEndingwillEndSession
      onSessionResumedonSessionResumeddidResumeSession
      onSessionResumingonSessionResumingwillResumeSession
      onSessionStartedonSessionStarteddidStartSession
      onSessionStartFailedonSessionStartFaileddidFailToStartSession
      onSessionStartingonSessionStartingwillStartSession
      onSessionSuspendedonSessionSuspendeddidSuspendSession
      onDeviceVolumeChangedonRouteVolumeChangeddidReceiveDeviceVolume
      onDeviceChangedonRouteChangeddidUpdateDevice
      onMediaStatusChangedonStatusUpdatedremoteMediaClientDidUpdateMediaStatus
      mediaQueueWillChangemediaQueueWillChangemediaQueueWillChange
      itemsReloadeditemsReloadedmediaQueueDidReloadItems
      itemsInsertedInRangeitemsInsertedInRangedidInsertItemsInRange
      itemsUpdatedAtIndexesitemsUpdatedAtIndexesdidUpdateItemsAtIndexes
      itemsRemovedAtIndexesitemsRemovedAtIndexesdidRemoveItemsAtIndexes
      mediaQueueChangedmediaQueueChangedmediaQueueDidChange
      \n

      All unlisted events are ignored. See related documentation for futher details.

      \n

      Android

      \n\n

      iOS

      \n\n

      Methods

      \n

      See cast.types for method options.

      \n
        \n
      • \n

        loadMedia(media: CastMediaInfo, options?: LoadMediaOptions): void

        \n

        Loads the specified media.

        \n
        • \n
      • \n

        loadQueue(options: LoadQueueOptions): void

        \n

        Loads a queue of media items.

        \n
        • \n
      • \n

        playMedia(customData? any): void

        \n

        Plays the loaded media.

        \n
        • \n
      • \n

        pauseMedia(customData? any): void

        \n

        Pauses the loaded media.

        \n
        • \n
      • \n

        seekMedia(position: number, resumeState?: ResumeState , customData?: any): void

        \n

        Seeks the loaded media to position (seconds).

        \n
        • \n
      • \n

        stopMedia(customData? any): void

        \n

        Stops the loaded media.

        \n
        • \n
      • \n

        showController(): void

        \n

        Show the expanded controller.

        \n
        • \n
      • \n

        showCastInstructions(title: string, singleTime: boolean): void

        \n

        Shows the Cast instructions overlay. title and singleTime arguments are Android-only.

        \n
        • \n
      • \n

        showCastDialog(): void

        \n

        Show the Cast destination dialog.

        \n
        • \n
      • \n

        getMediaInfo(): CastMediaInfo

        \n

        Returns the loaded media info.

        \n
        • \n
      • \n

        setActiveTrackIds([trackIds]): void

        \n

        Pass an array of IDs defined in textTracks to show subtitles. Pass an empty array to hide.

        \n
        • \n
      • \n

        queueNextItem(): void

        \n

        Play the next item in the queue.

        \n
        • \n
      • \n

        queuePreviousItem(): void

        \n

        Play the previous item in the queue.

        \n
        • \n
      • \n

        queueSetRepeatMode(repeatMode: RepeatMode): void

        \n

        Set the queue repeat mode.

        \n
        • \n
      • \n

        queueInsertItem(options: QueueInsertItemOptions): void

        \n

        Insert a single queue item.

        \n
        • \n
      • \n

        queueInsertItems(options: QueueInsertItemsOptions): void

        \n

        Insert multiple queue items.

        \n
        • \n
      • \n

        queueRemoveItems(itemIDs: number[], customData?: any): void

        \n

        Remove queue items by ID.

        \n
        • \n
      • \n

        queueReorderItems(itemIDs: number[], beforeItemID: number, customData?: any): void

        \n

        Reorder queue items by ID.

        \n
        • \n
      • \n

        queueJumpToItem(itemID: number, playPosition?: number, customData? any): void

        \n

        Jump to queue item by ID.

        \n
        • \n
      \n

      TODO

      \n\n

      Acknowledgements

      \n
        \n
      • CodeLab - Current employer. Developed this plugin whilst learning NativeScript.
        • \n
      • loop.tv - Financed the development of Queue Support.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animated-fab":{"name":"nativescript-animated-fab","version":"0.1.0","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-amplitude":{"name":"nativescript-amplitude","version":"0.2.1","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sample":{"name":"nativescript-sample","version":"0.0.9","license":"ISC","readme":"

      \"Build

      \n

      generate npm package

      \n

      This is cli to create boiler plate for npm package project.

      \n

      Getting Started

      \n

      Installation

      \n

      npm install -g nativescript-sample

      \n

      Usage

      \n

      $ nativescript-sample

      \n

      \"create\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      OptionsDefaultDescription
      project namecreate-npm-packagenpm package name or project name
      semacntic releeasefalse or Noadd semantic denpendencies
      travis setupfalse or Noconfig travis setup .travis.yml
      install dependenciesfalse or Noinstall project dependencies after creating project
      \n

      Semantic Release

      \n
      npm install -g semantic-release-cli
      cd your-module
      semantic-release-cli setup
      \n\"semantic\"\n

      Travis CI Setup

      \n

      Project Structure

      \n

      \"project\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      File/FolderDescriptions
      project/index.jsentry file while creating npm module.
      src/lib/index.jsmain file that you want to publish in npm.
      src/lib/index.spec.jstest file for above file.
      styles/folder for styles if you are creating UI npm module.
      test/index.jsfor testing build files after build.
      .travis.ymlfor Travis CI
      \n

      Commands

      \n
        \n
      • \n

        Run project ( will start project with watch-bootstrap and watch-custom ) webpack.dev.config.js
        \nnpm start

        \n
        • \n
      • \n

        Run Test ( will run test for src/lib/index.spec.js )
        \nnpm run test

        \n
        • \n
      • \n

        Build ( will bundle the src/lib/index.js to /build folder ) webpack.prod.config.js
        \nnpm run build

        \n
        • \n
      • \n

        Test Build ( will test the build module /build/index.js )
        \nnpm run test-build

        \n
        • \n
      \n

      Create Simple NPM package

      \n

      cd your-module

      \n

      Install Dependencies

      \n

      npm installl

      \n

      Add Git Link

      \n

      package.json

      \n
      \"repository\": {
          \"type\": \"git\",
          \"url\": \"git_repository_link\"
      }
      \n

      npm publish - Using Semanctic Release

      \n
      npm install -g commitizen
      npm run commit
      git push
      \n

      npm publish - without Semantic Release LInk

      \n
      npm build
      npm login
      npm publish
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vidplayer":{"name":"nativescript-vidplayer","version":"1.0.7","license":{"type":"MIT","url":"https://bitbucket.org/win_min_tun/nativescript-vidplayer/src/6246d11e592626b37c72996bbb82914aa86d8b56/LICENSE"},"readme":"

      NativeScript Video Player with Fullscreen support

      \n

      NativeScript Video Player with Fullscreen, auto-play, on complete and on error callbacks. Tested with mp4, mp3, mov

      \n

      Platform Support

      \n

      Currently only support Android. Any collaborator for iOS support is welcomed!

      \n

      ##Android side\n\"alt

      \n

      Usage

      \n

      The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo for full example.

      \n

      \n
          <Video:Vidplayer id=\"video\" src=\"{{ videoSrc }}\" autoPlay=\"true\" onComplete=\"{{ onComplete }}\" onError=\"{{ onError }}\" />
      \n

      Attributes

      \n
        \n
      • src - required
        • \n
      \n

      Video source (online or local)

      \n
        \n
      • autoPlay - optional
        • \n
      \n

      Auto play true/false

      \n
        \n
      • fullScreen - optional
        • \n
      \n

      Default is true. Fullscreen button hide/show

      \n
        \n
      • onComplete - optional
        • \n
      \n

      on complete callback

      \n
        \n
      • onError - optional
        • \n
      \n

      on error (when video cannot be played) callback

      \n

      Credit

      \n

      Credit goes to the native android library (https://github.com/rtoshiro/FullscreenVideoView) by Toshiro (https://github.com/rtoshiro)

      \n

      Contributing - Support for iOS?

      \n

      Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-customerly":{"name":"nativescript-customerly","version":"0.1.0","license":"Apache-2.0","readme":"

      nativescript-customerly

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-customerly
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sexy-button":{"name":"nativescript-sexy-button","version":"0.1.0","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@yoonit/nativescript-handshake":{"name":"@yoonit/nativescript-handshake","version":"1.0.0","license":"MIT","readme":"

      nativescript-yoonit-handshake

      \n

      A NativeScript NPM implementing dynamic SSL pinning for Android and iOS.

      \n\n

      About

      \n

      The SSL pinning is a technique mitigating man-in-the-middle attacks against the secure HTTP communication, but has a drawback, the certificate's expiration date. This resolve this problem, implementing dynamic SSL pinning, providing easy to use fingerprint validation on the TLS handshake. The remote server must be the responsible to update the certificate(s).

      \n

      Installation

      \n
      npm i -s @yoonit/nativescript-handshake
      \n
      \n

      Special thanks and credits...

      \n

      The current version of the library depends on [Wultra SSL Pinning] ([Android]((https://github.com/wultra/ssl-pinning-android) and iOS)).

      \n
      \n

      Usage

      \n
      function updateFingerprint() {
        this.$yoo.handshake.updateFingerprints(
          \"YOUR PUBLIC KEY\",
          \"YOUR SERVICE URL\",
          (result) => {
            switch (result) {
              case HandshakeResult.OK:
                // - Everything is OK;
                // - No Action is required;
                return;

              case HandshakeResult.STORE_IS_EMPTY:
                // - The update request succeeded;
                // - Result is still an empty list of certificates;
                // - May loading & validating of remote data succeeded;
                // - All loaded certificates are already expired;\"
                return;

              case HandshakeResult.NETWORK_ERROR:
                // - The update request failed on a network communication.
                return;

              case HandshakeResult.INVALID_DATA:
                // The update request returned the data which did not pass the signature validation.
                return;

              case HandshakeResult.INVALID_SIGNATURE:
                // The update request returned the data which did not pass the signature validation.
                return;

              case HandshakeResult.INVALID_URL_SERVICE:
                // The url service does not exist or is invalid.
                return;
            }
          }
        );
      }
      \n

      API

      \n

      Method

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      FunctionParametersDescription
      updateFingerprintpublicKey: string, serviceUrl: string, callback: (result: string) => voidUpdate the list of fingerprints from the remote server. The method is asynchronous. Response can get in the callback.
      \n

      Handshake Result

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      HandshakeResultDescription
      "OK"
      • Everything is OK;
      • No Action is required;
      STORE_IS_EMPTY"
      • The update request succeeded;
      • Result is still an empty list of certificates;
      • May loading & validating of remote data succeeded;
      • All loaded certificates are already expired;
      • All loaded certificates are already expired;
      "NETWORK_ERROR"The update request failed on a network communication.
      "INVALID_DATA"The update request returned the data which did not pass the signature validation.
      "INVALID_SIGNATURE"The update request returned the data which did not pass the signature validation.
      "INVALID_URL_SERVICE"The url service does not exist or is invalid.
      \n

      To contribute and make it better

      \n

      Clone the repo, change what you want and send PR.

      \n

      For commit messages we use Conventional Commits.

      \n

      Contributions are always welcome!

      \n\n \n\n
      \n

      Code with ❤ by the Cyberlabs AI Front-End Team

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-input-mask-viostec":{"name":"nativescript-input-mask-viostec","version":"1.0.2","license":"Apache-2.0","readme":"

      Nativescript Input Mask

      \n

      Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

      \n

      This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

      \n

      Installation

      \n
      tns plugin add nativescript-input-mask-viostec
      \n

      Usage

      \n

      Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

      \n

      Documentation for masks is below (from here).

      \n
      \n

      Masks consist of blocks of symbols, which may include:

      \n
        \n
      • [] — a block for valueable symbols written by user.
        • \n
      \n

      Square brackets block may contain any number of special symbols:

      \n
        \n
      1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
        2. \n
      2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
        3. \n
      3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
        4. \n
      4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
        5. \n
      5. _ — mandatory symbol (digit or letter).
        6. \n
      6. - — optional symbol (digit or letter).
        7. \n
      \n

      Other symbols inside square brackets will cause a mask initialization error.

      \n

      Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

      \n

      Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

      \n

      Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

      \n
        \n
      • {} — a block for valueable yet fixed symbols, which could not be altered by the user.
        • \n
      \n

      Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

      \n

      Mask format examples:

      \n
        \n
      1. [00000000000]
        2. \n
      2. {401}-[000]-[00]-[00]
        3. \n
      3. [000999999]
        4. \n
      4. {818}-[000]-[00]-[00]
        5. \n
      5. [A][-----------------------------------------------------]
        6. \n
      6. [A][_______________________________________________________________]
        7. \n
      7. 8 [0000000000]
        8. \n
      8. 8([000])[000]-[00]-[00]
        9. \n
      9. [0000]{-}[00]
        10. \n
      10. +1 ([000]) [000] [00] [00]
        11. \n
      \n
      \n

      Angular

      \n

      Add the following lines to app/app.module.ts:

      \n
      import { InputMaskModule } from 'nativescript-input-mask/angular';

      @NgModule({
          // ...
          imports: [
              // ...
              InputMaskModule,
              // ...
          ],
          // ...
      })
      \n

      Use like a TextField with a mask property and other event properties:

      \n
      import { Component, NgZone, OnInit } from \"@angular/core\";

      @Component({
        selector: \"ns-app\",
        template: `
          <StackLayout>
              <InputMask
                  mask=\"([000]) [000]-[0000]\"
                  (extractedValueChange)=onExtractedValueChange($event)
                  (completedChange)=\"onCompletedChage($event)\">
              </InputMask>
          </StackLayout>
              `      ,
      })
      export class AppComponent {
          onExtractedValueChange(args) {
              // `args.value` includes only extracted characters, for instance
              // `1235551111` would be logged while the UI would display `(123) 555-1111`.
              console.log('Extracted value:', args.value);
          }

          onCompletedChange(args) {
              // `args.value` indicates whether the field contains all mandatory characters.
              console.log('Completed:', args.value)
          }
      }
      \n

      Note that masks can be bound and changed on the fly. See demo app for a working implementation.

      \n

      API

      \n

      The InputMask class extends TextField and implements the following additional properties:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      mask""The mask property to apply to text entered into the field.
      extractedValue""The value extracted from the field.
      completedfalseIndicates whether all mandatory characters have been filled.
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dna-netservices":{"name":"nativescript-dna-netservices","version":"2.0.1","license":"Apache-2.0","readme":"

      NativeScript DNA NetServices

      \n

      \"nativescript-dna-netservices\"

      \n

      NativeScript 8.0 based plugin for Bonjour/ZeroConf and network monitoring. RxJS based APIs for service discovery, browsing and publication, and networking monitoring.

      \n

      The plugin offers cross-platform utility APIs to retrieve or query Bonjour/ZeroConf related information. The APIs are available for iOS and Android platforms.

      \n

      Kindly visit typescript demo repository for practical implementation guidance and hints. The demo is tested with iOS and Android devices.

      \n

      The Changelogs selection is located towards the end of the document.

      \n

      I welcome an appreciation email with suggestions and feedback. It will encourage me to provide new APIs and support.\nMy email-id is Deepak Arora. Enjoy and I will be looking forward to your valuable feedback.

      \n

      Features

      \n
        \n
      • Cross-platform APIs for Android and iOS
        • \n
      • Service Discovery, Resolution, Browse, and Publication
        • \n
      • Monitor network availability
        • \n
      • WiFi and Cellular IP address retrieval
        • \n
      \n

      More about Bonjour/ZerConf can be found at:\nApple’s Bonjour implementation and Android mDNSResponder

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-dna-netservices
      \n

      This command automatically installs the necessary files, as well as stores nativescript-dna-netservices as a dependency in your project's package.json file.

      \n
        \n
      • \n

        Notes for iOS users:

        \n

        Please refer to NSBonjourServices for necessary changes to your Info.plist file.

        \n

        Example of Info.plist:

        \n
        <dict>
          <!--Describe the permissions, features or other configurations required by your plugin for iOS.-->
          <key>NSLocalNetworkUsageDescription</key>
          <string>Privacy - Local Network Usage Description</string>

          <key>NSBonjourServices</key>
          <array>
            <string>_http._tcp</string>
            <string>_ipp._tcp</string>
            <string>_yourservice._tcp</string>
          </array>
        </dict>
        \n
        • \n
      \n

      API

      \n

      NativeScript DNA NetServices APIs are classified into the following services:

      \n
        \n
      • NetworkMonitorService: Provides API for monitoring network availability and accessing device IP address
        • \n
      • ZeroConfService: Deals with service resolution and publication part of Bonjour/ZeroConf
        • \n
      • ZeroConfServiceBrowser: Involves with service browsing part of Bonjour/ZeroConf
        • \n
      \n

      Each of these services with their APIs is covered below.

      \n

      - NetworkMonitorService

      \n

      Depending on the type of framework, NetworkMonitorService can be imported using one of the following ways:

      \n

      TypeScript:

      \n
      import { NetworkMonitorService } from \"nativescript-dna-netservices\";
      \n

      JavaScript:

      \n
      const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
      const NetworkMonitorService = nativescript_dna_netservices.NetworkMonitorService;
      \n

      Below are the APIs available in NetworkMonitorService:

      \n

      getWiFiIpAddress: Retrieves IPv4 address of a device assigned for communication in a WiFi network.

      \n
      NetworkMonitorService.getWiFiIpAddress().subscribe(
        ipAddr => console.info(ipAddr),
        err => console.error(err),
        () => console.log(\"completed\")
      );
      \n

      getCellularIpAddress: Gets IPv4 address of a device used for communication in a mobile/cellular network. It's not a public IP address.

      \n
      NetworkMonitorService.getCellularIpAddress().subscribe(
        ipAddr => console.info(ipAddr),
        err => console.error(err),
        () => console.log(\"completed\")
      );
      \n

      dumpIpAddress: Gets various addresses (IPv4 and IPv6) of a device attached to interface cards. Observer's next handler receives an array of type IAddress if addresses are retrieved successfully.

      \n
      NetworkMonitorService.dumpIpAddress().subscribe(
        addrs => console.info(addrs),
        err => console.error(err),
        () => console.log(\"completed\")
      );
      \n

      getNetworkStatus: Depending on a network type a device is connected to, it gets network status which includes connection type (wifi, cellular, or none) and IPv4 address. If for some reason the device is not on a network, then the status would be an empty address with the connection type none.

      \n
      NetworkMonitorService.getNetworkStatus().subscribe(
        networkStatus => console.info(networkStatus.connType, networkStatus.ipAddress),
        err => console.error(err),
        () => console.log(\"completed\")
      );
      \n

      monitorNetwork: It tracks and notifies of any changes in network condition a device sees. If for some reason the device is not on a network, then the status would be an empty address with the connection type none.

      \n
      const networkStatusSubscription = NetworkMonitorService.monitorNetwork()
      .subscribe(ns => {
        let connType = \"\";
        switch (ns.connType) {
          case networkType.wifi:
            connType = \"WiFi\";
            break;
          case networkType.cellular:
            connType = \"Cellular\";
            break;
          default:
            connType = \"Unavailable\";
        }
        console.info(connType, ns.ipAddress);
      });
      \n

      - ZeroConfService

      \n

      The ZeroConfService class represents a network service, either one your application publishes or is a client of. This class uses multicast DNS to convey information about network services to and from your application.

      \n

      Depending on the type of framework, ZeroConfService can be imported using one of the following ways:

      \n

      TypeScript:

      \n
      import { ZeroConfService } from \"nativescript-dna-netservices\";
      \n

      JavaScript:

      \n
      const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
      const ZeroConfService = nativescript_dna_netservices.ZeroConfService;
      \n

      Below are the APIs offered by ZeroConfService:

      \n

      publish: Provides a convenient way for publishing a network service of type type at the socket location specified by domain, name, and port. In the event of success, observer's next handler receives data of type ZeroConf. Furthermore, in the event of failure, the error handler receives an error object which looks like { errorCode: zeroConfError, zeroConf: ZeroConf }. Both ZeroConf and zeroConfError can be imported using one of the above-mentioned ways from nativescript-dna-netservices.

      \n
      const zeroConfService = new ZeroConfService();
      const registrationSubscription = zeroConfService
        .publish({
          domain: \"local.\",
          type: \"_my_special_radio_service._tcp.\",
          name: \"Radio Service\",
          port: 61234
        })
        .subscribe(data => console.info(data), error => console.error(error));
      \n
        \n
      • Note: The API will use one of the available free port in the system, if the specified port is 0.
        • \n
      \n

      resolve: Performs a resolve process for the service of a given type and name within a specified domain. If the service is available, observer's next handler receives ZeroConf data which contains socket information for your application to connect to the service. In the event of failure, the error handler receives an error object which looks like { errorCode: zeroConfError, zeroConf: ZeroConf }.

      \n
      const zeroConfService = new ZeroConfService();
      const registrationSubscription = zeroConfService
        .resolve({
          domain: \"local.\",
          type: \"_my_special_radio_service._tcp.\",
          name: \"Radio Service\"
        })
        .subscribe(data => console.info(data), error => console.error(error));
      \n

      - ZeroConfServiceBrowser

      \n

      The ZeroConfServiceBrowser class offers a possibility to browse services of a certain type within a given domain.

      \n

      Depending on the type of framework, ZeroConfServiceBrowser can be imported using one of the following ways:

      \n

      TypeScript:

      \n
      import { ZeroConfServiceBrowser } from \"nativescript-dna-netservices\";
      \n

      JavaScript:

      \n
      const nativescript_dna_netservices = require(\"nativescript-dna-netservices\");
      const ZeroConfServiceBrowser = nativescript_dna_netservices.ZeroConfServiceBrowser;
      \n

      Below are the APIs offered by ZeroConfServiceBrowser:

      \n

      searchForServicesOfTypeInDomain: Starts a search for services of a particular type within a specific domain.

      \n
      const zeroConfServiceBrowser = new ZeroConfServiceBrowser();
      const subscription = zeroConfServiceBrowser
          .searchForServicesOfTypeInDomain(\"_my_special_radio_service._tcp\", \"local.\")
          .subscribe(data => console.info(data), error => console.error(error));
      \n

      If the services are available, observer's next handler will be invoked multiple times with ZeroConf data which your application can use to resolve to socket info to make network connection. And, if there is an error, the error handler receives a zeroConfError error code.

      \n

      Combining ZeroConfService & ZeroConfServiceBrowser

      \n

      Sometimes functionalities from these services can be combined together to create new purposes.\nOne of the use cases is to have socket information for every browsed service. To accomplish this, RxJS pipeable operators come in handy. Below is the sample snippet illustrating the same.

      \n
      const patternToSearch = /^radio_channel/i;
      const serviceFinderTimeout = timer(3000);
      const serviceFinder = zeroConfServiceBrowser
        .searchForServicesOfTypeInDomain(\"_my_special_radio_service._tcp\", \"local.\")
        .pipe(
          filter(service => service.name && service.name.match(patternToSearch).length > 0),
          distinct(),
          concatMap(service =>
            zeroConfService.resolve(service).pipe(
              filter(service => service.status === zeroConfStatus.success),
              take(1),
              observeOn(asyncScheduler)
            )
          ),
          takeUntil(serviceFinderTimeout)
        );

      serviceFinder.subscribe(
        service => console.info(service),
        error => console.error(error),
        () => console.info(\"Completed Here...\")
      );
      \n

      Changelogs:

      \n
        \n
      • 2.0.1: Updated documention.
        • \n
      • 2.0.0: Upgraded to NativeScript 8.0 version. Bumped up the vesion of various packages. Test on Android and iOS devices.
        • \n
      • 1.1.0: Updated documention.
        • \n
      • 1.0.0: First release.
        • \n
      \n

      License

      \n

      MIT license (see LICENSE file)

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-clevertap":{"name":"nativescript-clevertap","version":"0.2.3","license":"Apache-2.0","readme":"

      NativeScript CleverTap Plugin

      \n

      Install and Integration

      \n

      tns plugin add nativescript-cleartap

      \n

      iOS

      \n

      Add the following to your Info.plist. under app/App_Resources/iOS

      \n
      \t<key>CleverTapAccountID</key>
      \t<string>YOUR-TEST-ACCOUNTID</string>
      \t<key>CleverTapToken</key>
      \t<string>YOUR-TEST-TOKEN</string>
      \n

      Android

      \n

      Add the following to your AndroidManifestxml. under app/App_Resources/Android/src/main

      \n
      \t<meta-data
      \t\tandroid:name=\"CLEVERTAP_ACCOUNT_ID\"
      \t\tandroid:value=\"YOUR-TEST-ACCOUNTID>\"/>

      \t<meta-data
      \t\tandroid:name=\"CLEVERTAP_TOKEN\"
      \t\tandroid:value=\"YOUR-TEST-TOKEN\"/>
      \n

      Additional Resources

      \n\n

      Example JS Usage

      \n

      Grab a reference

      \n

      import { cleverTap } from 'clevertap-react-native';

      \n

      Record an event

      \n

      cleverTap.pushEvent('testEvent', { attr1 : "val1"});

      \n

      Update a user profile

      \n

      cleverTap.updateProfile({'Name': 'testUserA1', 'Identity': '123456', 'Email': 'test@test.com', 'custom1': 123});

      \n

      For more:

      \n\n

      Road Ahead:

      \n

      Implement all the methods that are available in the sdk.

      \n

      Pull requests are always welcome!

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-chart":{"name":"nativescript-chart","version":"0.0.26","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Experimental plugin to draw charts using nativescript-canvas. It is a direct JS port of MPAndroidChart

      \n

      The main goal was to prevent the need for marshalling all datasets. This is extremelly heavy, costly and uncessary!

      \n

      The demo_vue app show the power of the future plugin:

      \n
        \n
      • It is the fastest drawing library in comparaison to nativescript-ui-chart and nativescript-mpchart. This is due to:\n
          \n
        • do not marshal or recreate any subset of the data sets. Directly uses the provided array.
          • \n
        • can share the same data array beetween multiple datasets
          • \n
        • still use the power of native arrays to NOT marshal arrays of positions while drawing lines with nativescript-canvas
          • \n
        \n
        • \n
      • Same JS codebase for iOS and Android. Makes maintaining the library very easy.
        • \n
      • smaller apps size because no native libs or no native framework. All done with the power of {N}
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-images-generator-hook":{"name":"nativescript-images-generator-hook","version":"3.0.1","license":"MIT","readme":"

      Nativescript images generator hook

      \n

      Nativescript hook that generates App_Resources images based on a single high resolution image.

      \n

      Installation

      \n
      npm install nativescript-images-generator-hook --save-dev
      \n

      Usage

      \n

      Put all your 3x PNG images in App_Resources/images.

      \n

      For instance, if you put navbar_logo@3x.png in this folder, it will be available as res://navbar_logo.\nIf you put an image without scale suffix, it will use it as a x1 image. You can provide any integer scale from 1 to 5.

      \n

      License

      \n

      MIT License - Copyright (c) 2020 Creatiwity

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-autocomplete-x":{"name":"nativescript-autocomplete-x","version":"0.0.4","license":"MIT","readme":"

      [WORK - IN - PROGRESS ]

      \n

      [ only iOS so far ]

      \n

      nativescript-autocomplete-x

      \n

      nativescript-autocomplete-x is a NativeScript plugin for autocompleting (suggesting) text field content

      \n
      On iOS
      \n

      we are using:\nSearchTextField\nor actually my sweet fork ;)

      \n
      On Android
      \n

      that is not available yet

      \n

      Demo apps

      \n

      NativeScript-Core (XML)

      \n

      Check out the demo folder. This is how to clone and run it:

      \n
      git clone https://github.com/chrum/nativescript-autocomplete-x
      cd nativescript-autocomplete-x/src
      npm run demo.ios
      \n

      NativeScript-Angular

      \n

      Check out the demo-angular folder. This is how to clone and run it:

      \n
      git clone https://github.com/chrum/nativescript-autocomplete-x
      cd nativescript-autocomplete-x/src
      npm run demo-angular.ios
      \n

      Installation

      \n
      tns plugin add nativescript-autocomplete-x
      \n

      Usage

      \n

      Core

      \n

      IMPORTANT !!! Make sure you include xmlns:acx="nativescript-autocomplete-x" on the Page element

      \n
      <Page class=\"page\" xmlns:acx=\"nativescript-autocomplete-x\">
          <StackLayout>
              <acx:AutocompleteX placeholder=\"check autocomplete...\"
                                 currentTextInResultsPrefix=\"Use: \"
                                 items=\"{{ ['First', 'Second', 'Third'] }}\"
                                 selected=\"onSelected\">      </acx:AutocompleteX>
          </StackLayout>
      </Page>
      \n

      Angular

      \n

      Include AutocompleteXModule in your @NgModule
      \nIMPORTANT !!! you need to do it for every module that will be autocompleting things ;)

      \n
      import { AutocompleteXModule } from 'nativescript-autocomplete-x/angular';

      @NgModule({
          imports: [
              AutocompleteXModule,
              ...
          ],
          ...
      })
      \n
      <AutocompleteX [placeholder]=\"'Placeholder...'\"
                     [items]=\"items\"
                     [currentTextInResultsPrefix]=\"'Use: '\"
                     (selected)=\"onSelected($event)\">
      </AutocompleteX>
      \n

      API [ TODO ]

      \n

      Properties

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultTypeDescription
      textstringGets or sets the text
      items[ ]Array<string>array with strings that should be used as autocomplete source
      hintstringPlaceholder
      editablefalseboolean
      currentTextInResultsPrefixstringIf set then typed text will appear as the first item on the suggestions list prefixed with this value.

      Example
      if this one is set to 'Use:'
      then first item on the suggestions list will be 'Use: {typed text}'
      \n

      Events

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      selected(args: { text: string}): voidfired when selected suggestion gets tapped
      \n

      Troubleshooting

      \n

      iOS

      \n

      TODO

      \n
        \n
      • Android support
        • \n
      • expose clear button mode
        • \n
      • font configuration
        • \n
      • theming, bg color
        • \n
      • more compatibility features with {N} TextField
        • \n
      \n

      Authors

      \n

      Chrystian Ruminowicz

      \n

      License

      \n

      This project is licensed under the MIT license

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-braintree-temp":{"name":"nativescript-braintree-temp","version":"4.0.3","license":"Apache-2.0","readme":"

      Nativescript nativescript-braintree-temp

      \n
      ns plugin add @convosco/nativescript-braintree-temp
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tjw-dev/nativescript-microsoft-appcenter":{"name":"@tjw-dev/nativescript-microsoft-appcenter","version":"3.0.4","license":"Apache-2.0","readme":"

      Microsoft App Center plugin for NativeScript

      \n

      Requirements

      \n

      Before you begin, please make sure that the following prerequisites are met:

      \n

      Node.js

      \n
        \n
      • Node.js®\nis a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
        • \n
      \n

      NativeScript

      \n
        \n
      • \n

        NativeScript\nis a framework for building native iOS and Android apps using JavaScript and CSS.

        \n

        NativeScript renders UIs with the native platform’s rendering engine, no WebViews, resulting in native-like performance and UX.

        \n
        • \n
      \n

      Microsoft App Center

      \n
        \n
      • \n

        Android Version 4.0.3 (API level 15) or later.

        \n
        • \n
      • \n

        App Center brings together multiple services, commonly used by mobile developers, into a single, integrated product. You can build, test, distribute, and monitor your mobile apps, and also implement push notifications.

        \n
        • \n
      • \n

        Create your app in the App Center Portal to obtain the App Secret (if you have already created your app in the App Center portal, you can skip this step).

        \n
        • \n
      • \n

        Head over to Microsoft App Center.

        \n
        • \n
      • \n

        Sign up or log in and hit the blue button on the top right corner of the portal that says Add new and select Add new app from the dropdown menu.

        \n
        • \n
      • \n

        Enter a name and an optional desciption for your app.

        \n
        • \n
      • \n

        Select Android and Java or iOS and Objective-C/Swift as a platform.

        \n
        • \n
      • \n

        Hit the button at the bottom right that says Add new app.

        \n
        • \n
      • \n

        Once you have created an app, you can obtain its App Secret on the Getting Started page or Settings page on the App Center Portal.

        \n
        • \n
      \n

      Installation

      \n
      tns plugin add nativescript-microsoft-appcenter
      \n

      Distribute Features

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidiOS
      YESYES
      \n

      Diagnostics Features

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      FeatureAndroidiOS
      CrashesYESYES
      \n

      Analytics Features

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      FeatureAndroidiOS
      Overview: Active users, daily sessions per user, session duration, top devices, countries, languages and active users per version.YESYES
      Events: Event name, Count, Trend, Users, User Change and Per User.YESYES
      Log flowYESYES
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@parempi/couchbase-lite":{"name":"@parempi/couchbase-lite","version":"1.0.0-alpha.5","license":"Apache-2.0","readme":"

      @parempi/couchbase-lite

      \n

      It's a NativeScript plugin for Couchbase Lite. Since it's alpha stage project, you're better off using more mature and\nstable solution by Osei Fortune for now. I've been using his plugin extensively in a few projects. Although it features quite neat API, it forced me to go hucky in order to perform joins and execute\nCouchbase functions. Besides, it blocks the main thread, thus significantly degrades\napp responsiveness.\nI believe, plugins should build on top of native libraries not limiting their features.

      \n

      Disclaimer: work in progress, API is subject to change, no iOS support.

      \n
        \n
      1. What is Couchbase?
        2. \n
      2. Installing
        3. \n
      3. Usage\n
          \n
        1. Overview
          2. \n
        2. Demo app
          3. \n
        3. Native APIs access
          4. \n
        4. The plugin's API\n
            \n
          1. Databases
            2. \n
          2. Documents
            3. \n
          3. Transactions
            4. \n
          4. Queries
            5. \n
          \n
          5. \n
        \n
        4. \n
      4. License
        5. \n
      \n

      Introducing Couchbase Lite

      \n

      Source: https://docs.couchbase.com/couchbase-lite/2.8/index.html

      \n
      \n

      Couchbase Lite is an embedded, NoSQL JSON Document Style database for your mobile apps.

      \n
      \n
      \n

      You can use Couchbase Lite as a standalone embedded database within your mobile apps, or with Sync Gateway and Couchbase Server to provide a complete cloud to edge synchronized solution get the agility of sql and the flexibility of json

      \n
      \n
      \n

      Work locally . . .

      \n

      Couchbase Lite is designed to work with data stored locally and includes

      \n
        \n
      • The ability to write queries with semantics based on SQL.
        • \n
      • Full-Text Search queries on documents stored locally.
        • \n
      • The ability to store document attachments (blobs), for example images or PDF files.
        • \n
      \n
      \n
      \n

      Sync at the edge . . .

      \n

      It manages data sync automatically through:

      \n
        \n
      • A replication protocol built over WebSockets to synchronize data with Sync Gateway.
        • \n
      • A Peer-to-Peer sync implementation to synchronize data between Couchbase Lite clients without dependency upon centralized control.
        • \n
      \n
      \n

      Installing

      \n

      ns plugin add @parempi/couchbase-lite
      \nThe minimum required Android SDK is version 22 (Lollipop)

      \n

      If you're going to ship a zipped prebuilt database with your app, add the following line in webpack.config.js:
      \nwebpack.Utils.addCopyRule("**/*.zip");

      \n

      Usage

      \n

      Overview

      \n
      import {open, cbl} from \"@parempi/couchbase-lite\";

      const {Expression:{property, string, intValue}, Ordering:{property: orderingProperty}} = cbl;

      open(\"getting-started\").then(async (database) => {
        const mutableDoc = database.createDocument({version: 2.0, type: \"SDK\"});

        mutableDoc.languages = ['JavaScript', 'Java', 'Objective-C'];
        database.save(mutableDoc);
        

        const sdks = await database.fetch(
            query => query
              .where(property(\"type\").equalTo(string(\"SDK\")))
              .orderBy([orderingProperty(\"version\").descending()])
              .limit(intValue(5))
        )
          .rows();

        for (const sdk of sdks) {
          sdk.manyReleases = true;
        }
        try {
            await database.saveInBatch(sdks);
        } catch (e) {
            console.log(e.message);
        }
      });
      \n

      Demo app

      \n

      It's a very simple vanilla NativeScript app.\nTo be improved.

      \n

      Native APIs access

      \n

      As you might know, NativeScript gives you direct access to native APIs right through JavaScript. This plugin provides you with\nd.ts typings to enable IntelliSense. As of now, only Android is supported. JavaScript's syntax and NativeScript are enough\nto reproduce examples given in the official Android guide with near to no modifications.

      \n
      \nFor example, this JavaScript code corresponds\n
      import {Utils} from \"@nativescript/core\";
      import {knownFolders} from \"@nativescript/core/file-system\";



      // (1) Initialize the Couchbase Lite system and enable IntelliSense
      import \"@parempi/couchbase-lite\";
      // or you can import any of exported names (see API reference)
      import {cbl} from \"@parempi/couchbase-lite\";


      // then IDEs will import these for you as you code
      import CouchbaseLite = com.couchbase.lite.CouchbaseLite;
      import DatabaseConfiguration = com.couchbase.lite.DatabaseConfiguration;
      import Database = com.couchbase.lite.Database;
      import MutableDocument = com.couchbase.lite.MutableDocument;
      import SelectResult = com.couchbase.lite.SelectResult;
      import QueryBuilder = com.couchbase.lite.QueryBuilder;
      import DataSource = com.couchbase.lite.DataSource;
      import Expression = com.couchbase.lite.Expression;

      // here's an example of another style
      const {URLEndpoint, ReplicatorConfiguration, BasicAuthenticator, Replicator, ReplicatorChangeListener} = cbl;


      // (2) Get the database (and create it if it doesn’t exist).
      const config = new DatabaseConfiguration();

      config.setDirectory(knownFolders.currentApp().parent.path);

      const database = new cbl.Database(\"getting-started\", config);


      // (3) Create a new document (i.e. a record) in the database.
      let mutableDoc = new MutableDocument()
        .setFloat(\"version\", 2.0)
      .setString(\"type\", \"SDK\");

      // (4) Save it to the database.
      database.save(mutableDoc);

      // (5) Update a document.
      mutableDoc = database.getDocument(mutableDoc.getId()).toMutable();
      mutableDoc.setString(\"language\", \"JavaScript\");
      database.save(mutableDoc);
      const document = database.getDocument(mutableDoc.getId());
      // (6) Log the document ID (generated by the database) and properties
      console.log( \"Document ID :: \" + document.getId());
      console.log(\"Learning \" + document.getString(\"language\"));

      // (7) Create a query to fetch documents of type SDK.
      const query = QueryBuilder.select([SelectResult.all()])
        .from(DataSource.database(database))
        .where(Expression.property(\"type\").equalTo(Expression.string(\"SDK\")));
      const result = query.execute();
      console.log(\"Number of rows ::  \" + result.allResults().size());

      // (8) Create replicators to push and pull changes to and from the cloud.
      const targetEndpoint = new URLEndpoint(new java.net.URI(\"ws://localhost:4984/getting-started-db\"));
      const replConfig = new ReplicatorConfiguration(database, targetEndpoint);
      replConfig.setReplicatorType(ReplicatorConfiguration.ReplicatorType.PUSH_AND_PULL);

      // (9) Add authentication.
      replConfig.setAuthenticator(new BasicAuthenticator(\"sync-gateway\", \"password\"));

      // (10) Create replicator (be sure to hold a reference somewhere that will prevent the Replicator from being GCed)
      const replicator = new Replicator(replConfig);

      // (11) Listen to replicator change events.
      replicator.addChangeListener(new ReplicatorChangeListener({
        changed: change => {
          if (change.getStatus().getError() !== null) {
            console.log(\"Error code ::  \" + change.getStatus().getError().getCode());
          }
        }
      }));

      // (12) Start replication.
      replicator.start();
      \n
      \n
      \nto this Java code\n
      // (1) Initialize the Couchbase Lite system
      CouchbaseLite.init(context);

      // (2) Get the database (and create it if it doesn’t exist).
      DatabaseConfiguration config = new DatabaseConfiguration();

      config.setDirectory(context.getFilesDir().

        getAbsolutePath());

      Database database = new Database(\"getting-started\", config);


      // (3) Create a new document (i.e. a record) in the database.
      MutableDocument mutableDoc = new MutableDocument()
        .setFloat(\"version\", 2.0F)
        .setString(\"type\", \"SDK\");

      // (4) Save it to the database.
      database.save(mutableDoc);

      // (5) Update a document.
      mutableDoc = database.getDocument(mutableDoc.getId()).toMutable();
      mutableDoc.setString(\"language\", \"Java\");
      database.save(mutableDoc);
      Document document = database.getDocument(mutableDoc.getId());
      // (6) Log the document ID (generated by the database) and properties
      Log.i(TAG, \"Document ID :: \" + document.getId());
      Log.i(TAG, \"Learning \" + document.getString(\"language\"));

      // (7) Create a query to fetch documents of type SDK.
      Query query = QueryBuilder.select(SelectResult.all())
        .from(DataSource.database(database))
        .where(Expression.property(\"type\").equalTo(Expression.string(\"SDK\")));
      ResultSet result = query.execute();
      Log.i(TAG, \"Number of rows ::  \" + result.allResults().size());

      // (8)  Create replicators to push and pull changes to and from the cloud.
      Endpoint targetEndpoint = new URLEndpoint(new URI(\"ws://localhost:4984/getting-started-db\"));
      ReplicatorConfiguration replConfig = new ReplicatorConfiguration(database, targetEndpoint);
      replConfig.setReplicatorType(ReplicatorConfiguration.ReplicatorType.PUSH_AND_PULL);

      // (9) Add authentication.
      replConfig.setAuthenticator(new BasicAuthenticator(\"sync-gateway\", \"password\"));

      // (10) Create replicator (be sure to hold a reference somewhere that will prevent the Replicator from being GCed)
      Replicator replicator = new Replicator(replConfig);

      // (11) Listen to replicator change events.
      replicator.addChangeListener(change -> {
        if (change.getStatus().getError() != null) {
          Log.i(TAG, \"Error code ::  \" + change.getStatus().getError().getCode());
        }
      });

      // (12) Start replication.
      replicator.start();
      \n
      \n

      Disclaimer:\nOf course, iOS Couchbase Lite native library differs a bit, so I will have to write a shim, so that the same JavaScript code work seamlessly on both platforms.\nCurrently, this plugin does not support iOS.

      \n

      The plugin's API

      \n

      It's very impressive how much we can accomplish — thanks to NativeScript — simply calling native libraries.\nHowever, JavaScript is more dynamic and concise in comparison to some lower level languages Couchbase Lite is written in.\nA downside of JS is that it lacks multithreading.

      \n

      @parempi/couchbase-lite takes advantage of both worlds.

      \n

      Next sections will walk you through the convenient extensions over native Couchbase Lite that I've developed so far.

      \n

      It is highly recommended that you learn more on https://docs.couchbase.com/couchbase-lite/current/index.html.\nThat way you'll be able to set up sync gateway, troubleshoot, use cblite command line tool, and make most of Couchbase Lite.

      \n

      Databases

      \n

      You can create a new database and-or open an existing one, using open convenience function. Just pass in a database name or a PrebuiltDatabase object.

      \n
      const db = await open('exampe');
      \n

      If the database "example" does not exist, the function will unpack and install ${knownFolders.currentApp().path}/example.cblite2.zip archive, in case it's present.

      \n

      open operates in a background thread.

      \n

      You might want to specify a prebuilt database in more details.

      \n
      import PrebuiltDbFolder = com.parempi.couchbase.PrebuiltDbFolder;
      import PrebuiltDbZip = com.parempi.couchbase.PrebuiltDbZip;


      // a db bundled as a folder ${knownFolders.currentApp().path}/assets/example.cblite2 
      open(new PrebuiltDbFolder('example', knownFolders.currentApp().getFolder('assets').path));

      // You can implement your own PrebuiltDb.
      // Wouldn't it be fancy to install a database from cdn?
      open(new MyFancyCdnPrebuiltDb('      example', 'https://cdn.example.com/'));
      \n

      You may find and adb pull an installed database at /data/data/${APPLICATION_ID}/files/${DATABASE_NAME}.cblite2, i.e.knownFolders.currentApp().parent.path)

      \n

      It is highly recommended closing database when it's no longer needed.

      \n
      database.close();
      \n

      Documents

      \n

      // Plain Old JavaScript Object will do
      const POJODocument = {
        type: 'task',
        owner: 'todo',
        title: 'create readme.md',
        createdAt: new Date(),
        // \"id\" is the only property that bears a special meaning
        // if ommited Couchbase Lite will generate an id for you upon persisting in the database
        id: 'task_readme',
      };

      db.save(POJODocument);
      \n
      import {toNativeDate} from \"@parempi/couchbase-lite/toNativeCblConverter\";

      // here is a native document
      const nativeDocument = new MutableDocument('task_readme'); // again, it's possible to omit id

      // for those who prefer verbose syntax and explicit types or aim for extra performace
      nativeDocument
        .setString('      type', 'task')
        .setString('      owner', 'todo')
        .setString('      title', 'create readme.md')
        .setDate('      createdAt', toNativeDate(new Date()));

      db.save(nativeDocument);
      \n

      Now meet proxies.

      \n
      // queries a document from the database or initializes a new one; returns its proxy
      const proxyDocument = db.getDocument('task_readme'); // here an id is mandatory

      // this works
      proxyDocument
        .setString('type', 'task')
        .setString('owner', 'todo')
        .setString('title', 'create readme.md')
        .setDate('createdAt', toNativeDate(new Date()))
        .setArray('tags', 
          new MutableArray()
            .addString('open source')
            .addString('hobby')
        );

      // as well as this
      proxyDocument.type = 'task';
      proxyDocument['owner'] = 'todo';
      proxyDocument.title = 'create readme.md';
      proxyDocument.createdAt = new Date();
      proxyDocument.tags = ['open sorce', 'hobby',];

      db.save(proxyDocument);
      \n

      Why are proxies?\nThey hold references to native objects and mimic familiar Plain Old JavaScript Objects' behaviour while eliminating conversion to/from native types.\nHowever, they're the slowest to access properties because their conversion occurs on demand.

      \n

      So when saving a bunch of extensive documents or querying database becomes a bottleneck, this approach will spare some CPU cycles.

      \n
      // saves a new document and returns its proxy
      const proxyDocument = db.createDocument({
        type: 'task',
        owner: 'todo',
        title: 'create readme.md',
        createdAt: new Date(),
      });
      console.log(proxyDocument.title, proxyDocument.createdAt);

      console.assert(proxyDocument.title === db.getDocument(proxyDocument.getId()).title)

      // update the document
      proxyDocument.owner = 'todo1';
      proxyDocument.lastModified = new Date();
      db.save(proxyDocument);
      \n

      There might be several sources of updates. The same document may be getting updated by replicator and local Database.save call simultaneously.\nSee the official Couchbase Lite guides for details. You can choose a strategy for resolving such situations.

      \n
      import ConcurrencyControl = com.couchbase.lite.ConcurrencyControl;

      db.save({foo: 'bar',}, ConcurrencyControl.FAIL_ON_CONFLICT);
      \n

      Delete a document.

      \n
      db.deleteDocument('docId');
      \n

      Transactions

      \n

      If you’re making multiple changes to a database at once, it’s faster to group them together.\nDatabase.saveInBatch saves the overhead of multiple database commits, greatly improving performance. It prevents UI from blocking by running in a background thread.\nThe following example persists a few documents in batch.

      \n
      const docs = [];
      for (let i = 0; i < 10; i++) {
          docs.push({
              type: \"user\",
              name: \"user\" + i,
              admin: false,
          });
      }
      try {
        database.saveInBatch(docs);
      } catch (e) {
        console.log(e.message);
      }
      \n

      At the local level this operation is still transactional: no other Database instances, including ones managed by the replicator can make changes during the execution of the block, and other instances will not see partial changes.

      \n

      Queries

      \n

      db[ .setAlias(dbAlias: string) ]
      \n .fetch( queryBuilder?: (query: From) => AbstractQuery )
      \n [ .distinct() ]
      \n [ .plain() | .json() ]
      \n ( .rows(...props: SelectResult[]) | column(prop: SelectResult) | value(prop: SelectResult) )

      \n
      import {cbl} from \"@parempi/couchbase-lite\";

      const {Expression: {property, string}, SelectResult: {expression: selectExpression}, ArrayExpression: {every}} = cbl;

      // get list of all document types in the database 
      await database
        .fetch()
        .distinct()
        .plain() // POJO
        .column( selectExpression(property('type')) );  // select only one field




      // count airports in San Diego
      await database.fetch(
        query => query
          .where(
                property(\"type\").equalTo(string(\"airport\"))
            .and(
                property('city').equalTo(string('San Diego'))
            )
          )
      )
        // select the first field of the first row
        .value( selectExpression( Function.count(string(\"*\")) ) );



      // get hotels that welcome guests with pets
      await database.fetch(
        query => query
          .where(
            property(\"pets_ok\").equalTo(booleanValue(true))
          )
      )
        .documents();  // proxified documents


      // find how many top-rated accomodation options are in each city
      const countExpression = Function.count(Expression.all()),
        reviewVar = ArrayExpression.variable(\"review\"),
        overallVar = ArrayExpression.variable(\"review.ratings.Overall\");


      await dbdatabase.fetch(
        query => query
          .where(
                property(\"type\").equalTo(string(\"hotel\"))
            .and(
                property('city').notNullOrMissing())
            .and(
                every(reviewVar).in(property('reviews'))
                .satisfies( overallVar.greaterThanOrEqualTo(intValue(4)) )
              )
          )
          .groupBy( [property(\"city\")] )
          .having( countExpression.greaterThanOrEqualTo(intValue(10)) )
          .orderBy( [Ordering.expression(countExpression).descending()] )
      )
        .rows(
            selectExpression(property('country')),
            selectExpression(property('state')),
            selectExpression(property('city')),
            selectExpression(countExpression).as('hotels_qty')
        ); // proxified dictionaries of specified fields; all fields + meta.id by default (i.e.if nothing selected)




      //  get all flights departing from Riga airport
      const results = await database.setAlias('airline')  /* set alias for join clause */ .fetch(
        query => query
          .join([
              Join.join(DataSource.database(database).as(\"route\"))
              .on(
                  Meta.id.from(\"airline\").equalTo(property(\"airlineid\").from(\"route\"))
              )
          ])
          .where(
                property(\"type\").from(\"route\").equalTo(string(\"route\"))
            .and(
                property(\"type\").from(\"airline\").equalTo(string(\"airline\"))
              )
            .and(
                property(\"sourceairport\").from(\"route\").equalTo(string(\"RIX\"))
            )
          )
      )
        .json()
        .rows(
            selectExpression(Function.upper( property(\"name\").from(\"airline\") )),
            selectExpression(property(\"callsign\").from(\"airline\")),
            selectExpression(Function.upper( property(\"destinationairport\").from(\"route\") )),
            selectExpression(property(\"stops\").from(\"route\")),
            selectExpression(Function.upper( property(\"airline\").from(\"route\") ))
        );
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-floatingactionbutton":{"name":"@nstudio/nativescript-floatingactionbutton","version":"3.0.4","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook":{"name":"nativescript-hook","version":"0.2.5","license":"Apache-2.0","readme":"

      nativescript-hook

      \n

      This module gives you an easier way to install hooks into NativeScript projects when using the tns install <module> command. A project hook is some sort of script that is configured to be executed when the NativeScript CLI executes some action.

      \n

      Hooks go into the hooks/ folder of a project. For example, when tns prepare ... is executed, all script files in the hooks/before-prepare/ and hooks/after-prepare/ folders are executed, as well.

      \n

      This module simplifies the process of installing the scripts into the right project folder.

      \n

      How to use

      \n

      Describe the hooks

      \n

      First, add a description of your hooks to the module's package.json. Here's an example:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"before-prepare\",
              \"script\": \"lib/before-prepare.js\"
            }
          ]
        },
      }
      \n

      The above specifies that the script lib/before-prepare.js should be executed when the tns prepare ... command is executed. the "type" property specifies the type of the hook to install. The "script" property specifies the path to the script to execute. You can add more hooks by extending the "hooks" array.

      \n

      Install the hooks

      \n

      Add a post-install and pre-uninstall script to your package.json, if you haven't done so already:

      \n
        \"scripts\": {
          ...
          \"postinstall\": \"node postinstall.js\",
          \"preuninstall\": \"node preuninstall.js\"
        },
      \n

      The post-install script (postinstall.js in the example) should contain the following line:

      \n
      require('nativescript-hook')(__dirname).postinstall();
      \n

      The pre-uninstall script (preuninstall.js in the example) should contain the following line:

      \n
      require('nativescript-hook')(__dirname).preuninstall();
      \n

      These two hooks will take care of installing and removing the hooks from the NativeScript project, when your module is installed or uninstalled.

      \n

      tns install <module>

      \n

      NativeScript modules that install hooks are intended to be installed using the tns install <module> command, not through npm directly. During module installation the NativeScript CLI provides information to the post-install script where to put the hooks. The following environment variables are defined when installing through tns install <module>:

      \n
        \n
      • TNS_HOOKS_DIR - the directory where the hooks should be installed. It may or may not exist.
        • \n
      • TNS_PROJECT_DIR - the current project directory.
        • \n
      \n

      Modules installed this way can be uninstalled simply by running npm rm --save-dev.

      \n

      In-process hooks

      \n

      By default, hooks are executed in a child process and execution continues when the child process dies. This gives you flexibility when writing your hooks, but doesn't allow you to use any of the services of the CLI.

      \n

      To that end, in-process hooks allow you to execute your hooks in such a way so that you can use any of the services available from the injector. In-process hooks work only for JavaScript hooks. To enable in-process execution, all you need to have is a module.exports = ... statement in the hook. For example, if the hook script is:

      \n
      module.exports = function($logger) {
      };
      \n

      Then, the hook script will be require'd by the CLI and the exported function will be called through the injector.

      \n

      Hooks can take a special injected argument named hookArgs:

      \n
      module.exports = function(hookArgs) {
      };
      \n

      hookArgs is a hash containing all the arguments passed to the hooked method. For example, the prepare hook is activated by the CLI method preparePlatform(platform: string). Here, the hook will get the value of the platform argument in the hookArgs.platform property.

      \n

      If you execute asynchronous code in your hook, you need to return a promise, otherwise execution will continue before your hook completes:

      \n
      var mkdirp = require('mkdirp');
      module.exports = function($logger) {
        return new Promise(function(resolve, reject) {
            mkdirp('somedir', function(err) {
                if (err) {
                  reject(err);
                else {
                  resolve();
                }
              })
          });
      }
      \n

      And finally, when installing in-process hooks through this module, you need to explicitly specify that using the inject property of the script descriptor in the package.json:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"after-prepare\",
              \"script\": \"lib/after-prepare.js\",
              \"inject\": true
            }
          ]
        },
      }
      \n

      You have the ability to define a custom name to your hook in package.json, this attribute is optional and defaults to the plugin package name:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"after-prepare\",
              \"script\": \"lib/after-prepare.js\",
              \"name\": \"my-custom-hook\"
            }
          ]
        },
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-conekta-sdk":{"name":"nativescript-conekta-sdk","version":"0.1.0","license":"Apache-2.0","readme":"

      Nativescript Conekta Sdk

      \n

      Works on ios and android

      \n

      Installation

      \n

      Install with following command:

      \n
      tns plugin add nativescript-conekta
      // or
      npm i nativescript-conekta
      \n

      So while cloning from the repo

      \n

      Usage

      \n

      TypeScript

      \n
      import { TNSConekta } from 'nativescript-conekta'

      private conekta: TNSConekta;

      this.conekta = new TNSConekta()

      this.conekta.setPublicKey('your_key')


      this.conekta.createToken(params) // Promise, params is required, (name, number, cvc, exp_month, exp_year)
      \n

      JavaScript

      \n
      const TNSConekta = require('nativescript-conekta').TNSConekta;

      const conekta = new TNSConekta()

      conekta.setPublicKey('your_key')
      conekta.setLanguage('en') // only in android
      conekta.createToken(params) // Promise, params is required, (name, number, cvc, exp_month, exp_year)
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jbento/nativescript-sendbird":{"name":"@jbento/nativescript-sendbird","version":"1.0.33","license":"Apache-2.0","readme":"

      @nativescript/sendbird

      \n
      ns plugin add @nativescript/sendbird
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-geo":{"name":"nativescript-fancy-geo","version":"0.0.1","license":"Apache-2.0","readme":"

      NativeScript Fancy Geo

      \n

      npm i nativescript-fancy-geo

      \n

      Usage

      \n

      TypeScript

      \n
      import { TNSFancyGeo, TNSFenceTransition } from 'nativescript-fancy-geo'

      let lat = 10.6918;
      let lon = 61.2225;
      TNSFancyGeo.hasPermission()
      .then(()=>{
           let notification =  {id: 0, title: \"Test\", body: \"Test Body\"};
                      let circle = {
                          id: null,
                          transition: TNSFenceTransition.ENTER_EXIT,
                          notification,
                          loiteringDelay: 0,
                          points: [lat, lon], radius: 1000
                          };
          
             TNSFancyGeo.createCircleFence(circle);
      }).catch(()=>{
          TNSFancyGeo.requestPermission({always: true})
      })

      \n

      Api

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodDefaultTypeDescription
      setOnMessageListener(listener: Function)
      createCircleFence(options: FenceOptions)Promise<string>
      hasPermission()Promise<boolean>
      requestPermission(options: PermissionOptions)Promise<boolean>
      getCurrentLocation(options: LocationOptions)Promise<Location>
      getAllFences()Promise<Fence[]>
      getFence(id: string)Promise<Fence>
      removeAllFences()Promise<any>
      removeFence(id: string)Promise<any>
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-beacon-ins":{"name":"nativescript-beacon-ins","version":"1.2.6","license":"Apache-2.0","readme":"

      INS Beacon Scanner for NativeScript

      \n

      The node module for the INS Beacon Scanner Plugin for NativeScript.

      \n

      Getting started

      \n
        \n
      • \n

        Create a new NativeScript application

        \n
          tns create MyApp\n
        \n

        or use an existing one.

        \n
        • \n
      • \n

        Add the Beacon Plugin (from NPM). This will install the Beacon plugin in the node_modules folder, in the root of the project. When adding a new platform (or using an existing one) the plugin will be added there as well. Go to the application folder and add the beacon plugin:

        \n
          tns plugin add nativescript-beacon-ins\n
        \n
        • \n
      \n

      Android

      \n

      API

      \n
      \t// Get reference to the push plugin module.
      \tvar beaconPlugin = require('nativescript-beacon-ins');
      \n
        \n
      • startScanBeacon - use to scan bluetooth beacon ins device
        • \n
      \n
      \n

      startScanBeacon(settings, successCallback, errorCallback)

      \n
      \n

      \tvar settings = {
      \t\t// iOS settings
      \t\ttimeoutAfter: 15, // scan bluetooth timeout
      \t\tbaseURL: 'Your config URL',
      \t\tport: 'port',
      \t\torgId: 'orgId',
      \t\tinspectionId: 'inspectionId'
      \t};


      \tbeaconPlugin.startScanBeacon(settings,
      \t\t// Success callback
      \t\tfunction(token) {
      \t\t\talert('scan successfully');
      \t\t},
      \t\t// Error Callback
      \t\tfunction(error){
      \t\t\talert(error.message);
      \t\t}
      \t);
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@digitalglacier/nativescript-keyboard-tools":{"name":"@digitalglacier/nativescript-keyboard-tools","version":"1.0.0","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-slider":{"name":"nativescript-na-slider","version":"1.1.3","license":"MIT","readme":"

      NativeScript NA Slider plugin

      \n

      NOTE! Android is currently not supported.

      \n

      A NativeScript slider. The successor of my previous, deprecated slideshow plugin, nativescript-na-slideshow.

      \n

      Installation

      \n

      $ tns plugin add nativescript-na-slider

      \n

      Usage

      \n

      Slides can be added statically inside the XML as below:

      \n
      <Page xmlns:NASlider=\"nativescript-na-slider\">
        
        <NASlider:NASlider id=\"slider\">
          <NASlider:NASliderContainer>
            <NASlider:NASliderSlide>
              <Label text=\"Slide 1\" />
            </NASlider:NASliderSlide>
            <NASlider:NASliderSlide>
              <Label text=\"Slide 2\" />
            </NASlider:NASliderSlide>
            <NASlider:NASliderSlide>
              <Label text=\"Slide 3\" />
            </NASlider:NASliderSlide>
          </NASlider:NASliderContainer>
        </NASlider:NASlider>
        
      </Page>
      \n

      Using <Repeater>

      \n

      For a more dynamic slider, a <Repeater> can be used:

      \n
      <Page xmlns:NASlider=\"nativescript-na-slider\">
        
        <NASlider:NASlider items=\"{{ slides }}\">
          <Repeater>
            <Repeater.itemsLayout>
              <NASlider:NASliderContainer />
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
              <NASlider:NASliderSlide>
                <Label text=\"{{ text }}\" />
              </NASlider:NASliderSlide>
            </Repeater.itemTemplate>
          </Repeater>
        </NASlider:NASlider>
        
      </Page>
      \n

      This way, a slider can simply be set up with an ObservableArray. The <NASliderContainer> will act as the Repeater's itemsLayout, while a <NASliderSlide> becomes the wrapper itemTemplate of the Repeater.

      \n

      Properties

      \n

      <NASlider>

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      bounceBoolean (default: false)Gets or sets scroll bouncing effect.
      currentSlideView<NASliderSlide> (read-only)Gets the current slide view.
      currentSlideIndexInteger (read-only)Gets the current slide index.
      forceFirstIndicatorVisibilityBoolean (default: false)Gets or sets the visibility of the first indicator if there is only one slide available.
      showIndicatorsBoolean (default: true)Gets or sets the indicators' visibility.
      indicatorBorderColorString (default: "#404040")Gets or sets indicators' border color.
      indicatorBorderWidthFloat (default: 0)Gets or sets indicators' border width.
      indicatorColorString (default: "808080")Gets or sets the indicator color for all slides.
      indicatorColorActiveString (default: null)Gets or sets the indicator color for all slides when active (current visible slide).
      indicatorHorizontalAlignmentString (default: null)Gets or sets indicators' horizontal alignment. Overrides indicatorPosition property.
      indicatorPositionString (default: "bottom")Gets or sets indicators' position.
      indicatorSizeFloat (default: 8)Gets or sets indicators' size.
      indicatorVerticalAlignmentString (default: null)Gets or sets indicators' vertical alignment. Overrides indicatorPosition property.
      itemsArray (default: undefined)Gets or sets the items array for a <Repeater>.
      orientationString (default: "horizontal")Gets or sets the slider orientation. Can be either "horizontal" or "vertical".
      scrollPositionFloat (read-only)Gets the current scroll position.
      slidesCountInteger (read-only)Gets the total amount of slides.
      \n

      <NASliderSlide>

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      indicatorColorString (default: null)Gets or sets the indicator color for specific slide.
      indicatorColorActiveString (default: null)Gets or sets the indicator color for specific slide when active (current visible slide).
      \n

      Methods

      \n

      getSlideAt

      \n

      getSlideAt(index: integer): <NASliderSlide>

      \n

      Returns the slide at specified index.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeDescription
      indexIntegerThe index position of the slide to return.
      \n
      \n

      insertSlide

      \n

      insertSlide(view: <View>, props: object): Promise<NASliderSlide>

      \n

      Insert new slide with optional properties. Returns a Promise with the new slide.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeDescription
      view<View>The view to insert as slide.
      propsObject (optional)Optional properties.
      \n
      props
      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      atIndexInteger (default: this.slidesCount)Sets the index position. If not specified, the slide will become last.
      indicatorColorString (default: null)Sets the indicator color for specific slide.
      indicatorColorActiveString (default: null)Sets the indicator color for specific slide when active (current visible slide).
      \n
      \n

      removeSlide

      \n

      removeSlide(slide: <NASliderSlide>): Promise

      \n

      Remove the specified slide. Returns a Promise.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeDescription
      slide<NASliderSlide>The slide to remove.
      \n
      \n

      removeSlideAt

      \n

      removeSlideAt(index : integer): Promise

      \n

      Remove slide at specified index. Returns a Promise.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeDescription
      indexIntegerThe index position of the slide to remove.
      \n
      \n

      removeSlides

      \n

      removeSlides(): Promise

      \n

      Removes all slides. Returns a Promise.

      \n

      Will not work if <NASlider> instance is maintained by a Repeater.

      \n
      \n

      scrollToSlideAt

      \n

      scrollToSlideAt(index : integer, animated : boolean): void

      \n

      Scrolls to slide at specified index. Animated or not.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParameterTypeDescription
      indexIntegerThe slide to remove.
      animatedBoolean (default: false)Animates the scrolling effect.
      \n

      Events

      \n

      The following events can be observed with on() and addEventListener():

      \n

      slide

      \n

      Fired when sliding.

      \n
      Event data
      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      eventNameStringGets the name of the event.
      objectObjectGets the <NASlider> instance.
      scrollPositionFloatGets the current scroll position. Will be either the horizontal or vertical position depending on orientation of the <NASlider> instance.
      \n
      \n

      slideChange

      \n

      Fired when the <NASlider> instance has changed slide.

      \n
      Event data
      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      eventNameStringGets the name of the event.
      objectObjectGets the <NASlider> instance.
      slide<NASliderSlide>Gets the current visible slide.
      \n

      Known issues

      \n
        \n
      • No Android compatibility, yet.
        • \n
      \n

      History

      \n

      Version 1.1.3 (February 10, 2017)

      \n
        \n
      • Fixed crash when navigating within the frame's backstack.
        • \n
      \n

      Version 1.1.2 (February 8, 2017)

      \n
        \n
      • Stability improvements.
        • \n
      • Slides should now dynamically adapt to slider's dimensions.
        • \n
      \n

      Version 1.1.0 (February 7, 2017)

      \n
        \n
      • removeAllSlides method has been renamed to removeSlides.
        • \n
      • Fixed Repeater not working as expected. Check documentation for the new way to use <NASlider>.
        • \n
      \n

      Version 1.0.2 (February 6, 2017)

      \n
        \n
      • Documentation fixes.
        • \n
      \n

      Version 1.0.0 (February 6, 2017)

      \n
        \n
      • First release!
        • \n
      \n

      Credits

      \n\n

      License

      \n

      MIT - for {N} version 2.5.0+

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-ngrx-debugger":{"name":"ns-ngrx-debugger","version":"0.0.7","license":"MIT","readme":"

      Nativescript @Ngrx/Store Debugger

      \n

      A minimal Nativescript (v3+) debugger for @ngrx/store & @ngrx/effects.

      \n

      How To

      \n
        \n
      • Install.
        • \n
      \n
      npm i ns-ngrx-debugger --save
      \n
        \n
      • In your App module.
        • \n
      \n
      import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
      import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
      import { NSNgRxDebuggerModule } from \"ns-ngrx-debugger\";
      import { AppComponent } from \"./app.component\";

      @NgModule({
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ],
        imports: [
          NativeScriptModule,
          NSNgRxDebuggerModule
        ],
        schemas: [ NO_ERRORS_SCHEMA ]
      })
      export class AppModule { }
      \n
        \n
      • In your Component. (Root component preferably).
        • \n
      \n
      <ActionBar title=\"Hello\"></ActionBar>

      <ns-ngrx-debugger [hidden]=\"false\"></ns-ngrx-debugger>
      \n
        \n
      • Thats all. No dependencies.
        • \n
      \n

      Set up your @ngrx/store however you want. You get a log of all Actions going through the store and an option to dump States and Sub-States of the Store at request on the terminal.

      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"gulp-babel-nativescript":{"name":"gulp-babel-nativescript","version":"1.0.0","license":"ISC","readme":"

      gulp-babel-nativescript

      \n

      replace gulp-babel compiled es5 content to match nativescript(now is v1.4.2)'s rule

      \n

      Usage:

      \n
      // babelNativescript signature: 
      //
      // babelNativescript(tnsCoreModules: {${moduleName}: true}, babelEs5CommonUtilFunctionsModulePath: string)
      //
      // About tnsCoreModules, see ./script/tns-core-modules.json for more infomation
      var babelNativescript = require('gulp-babel-nativescript')
      var getTnsCoreModules = require('./script/tns-core-modules')

      gulp.task('es6', function(){
        getTnsCoreModules(function(err, tnsCoreModules){
      \t\tgulp.src('./app-src/**/*.js')
      \t\t\t.pipe(babel())
      \t\t\t.pipe(babelNativescript(tnsCoreModules, path.join(__dirname, 'app-src/utils/babel-es5-common-helpers')))
      \t\t\t.pipe(gulp.dest('./app'))\t
      \t})
      })
      \n

      Notice:

      \n
        \n
      1. the name of the required tns-core-modules can not be renamed to another variable name after required. because the require of tns-core-module is find by RexExp string match.
        2. \n
      \n

      Example:

      \n
      // es6
      import * as observable from \"data/observable\";

      export class HelloWorldModel extends observable.Observable{
          constructor () {
              super()
              this.counter = 42
              this.set(\"message\", this.counter + \" taps left\");
          }
          tapAction () {
              this.counter--;
              if (this.counter <= 0) {
                  this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
              }
              else {
                  this.set(\"message\", this.counter + \" taps left\");
              }
          }
          set(name, value){
              console.log('override `set` method')
              super.set(name, value);
          }
          static aa(){
              super.aa()
          }
      }
      export var mainViewModel = new HelloWorldModel()
      \n
      // babel => es5,  this is horrible for nativescript
      //
      // 1. redundant es5 helper functions like `_createClass`, `_inherits` in every files
      //    => extract all babel-es5-helper-functions to a individual module, and then require it.
      // 2. babel module system is not ipentity with nativescript(cmd) like the `default` attribute in module.exports
      //    => stop `_interopRequireWildcard` and `_interopRequireDefault` the required object 
      //        that it add `default` attribute and replace all attribute from the origin to 
      //        a new object which the original object is bind to the system like `application.mainModule`!
      // 3. babel-es5's Class System is different with nativescript.
      //    => every class which inherit the tns-core-module will be replaced to the nativescript inheritence way.
      //    => nativescript's inheritence have weak feature that `__extends(Child, Super);` must be the 
      //        first sentence in the Class block, means if this sentence execute after any operate to 
      //        the Child-Class, nativescript will be crashed!!

      \"use strict\";

      Object.defineProperty(exports, \"__esModule\", {
          value: true
      });

      var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

      var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if (\"value\" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

      function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj[\"default\"] = obj; return newObj; } }

      function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }

      function _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

      var _dataObservable = require(\"data/observable\");

      var observable = _interopRequireWildcard(_dataObservable);

      var HelloWorldModel = (function (_observable$Observable) {
          _inherits(HelloWorldModel, _observable$Observable);

          function HelloWorldModel() {
              _classCallCheck(this, HelloWorldModel);

              _get(Object.getPrototypeOf(HelloWorldModel.prototype), \"constructor\", this).call(this);
              this.counter = 42;
              this.set(\"message\", this.counter + \" taps left\");
          }

          _createClass(HelloWorldModel, [{
              key: \"tapAction\",
              value: function tapAction() {
                  this.counter--;
                  if (this.counter <= 0) {
                      this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
                  } else {
                      this.set(\"message\", this.counter + \" taps left\");
                  }
              }
          }, {
              key: \"set\",
              value: function set(name, value) {
                  console.log('override `set` method');
                  _get(Object.getPrototypeOf(HelloWorldModel.prototype), \"set\", this).call(this, name, value);
              }
          }], [{
              key: \"aa\",
              value: function aa() {
                  _get(Object.getPrototypeOf(HelloWorldModel), \"aa\", this).call(this);
              }
          }]);

          return HelloWorldModel;
      })(observable.Observable);

      exports.HelloWorldModel = HelloWorldModel;
      var mainViewModel = new HelloWorldModel();
      exports.mainViewModel = mainViewModel;
      \n
      // es5 after this tool replaced the babel-es5 content
      \"use strict\";
      // this module path is the function's second argument as a absolute path
      var _babelEs5CommonUtil = require(\"../utils/babel-es5-common-helpers\");

      Object.defineProperty(exports, \"__esModule\", {
          value: true
      });

      var _dataObservable = require(\"data/observable\");

      var observable = _dataObservable;

      var HelloWorldModel = (function (_observable$Observable) {
          __extends(HelloWorldModel, _observable$Observable);

          function HelloWorldModel() {
              _babelEs5CommonUtil._classCallCheck(this, HelloWorldModel);

              _observable$Observable.call(this);
              this.counter = 42;
              this.set(\"message\", this.counter + \" taps left\");
          }

          _babelEs5CommonUtil._createClass(HelloWorldModel, [{
              key: \"tapAction\",
              value: function tapAction() {
                  this.counter--;
                  if (this.counter <= 0) {
                      this.set(\"message\", \"Hoorraaay! You unlocked the NativeScript clicker achievement!\");
                  } else {
                      this.set(\"message\", this.counter + \" taps left\");
                  }
              }
          }, {
              key: \"set\",
              value: function set(name, value) {
                  console.log('override `set` method');
                  _observable$Observable.prototype.set.call(this, name, value);
              }
          }], [{
              key: \"aa\",
              value: function aa() {
                  _observable$Observable.aa.call(HelloWorldModel);
              }
          }]);

          return HelloWorldModel;
      })(observable.Observable);

      exports.HelloWorldModel = HelloWorldModel;
      var mainViewModel = new HelloWorldModel();
      exports.mainViewModel = mainViewModel;
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kontaktio":{"name":"nativescript-kontaktio","version":"1.0.0","license":"ISC","readme":"

      nativescript-kontaktio

      \n

      NativeScript Plugin for Kontakt io Beacons

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-stomp-client":{"name":"nativescript-stomp-client","version":"0.5.0","license":"Apache-2.0","readme":"

      nativescript-stomp-client

      \n

      A stomp client for Nativescript. iOS only for now.

      \n

      See nativescript-stomp-client demo for example code.

      \n

      Installation

      \n
      tns plugin add nativescript-stomp-client
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      \t// Create the instance
      \tlet aDelegate: StompClientCallback = <your delegate>;
          let stompClient = new StompClient(aDelegate);
          
      \t// connect
      \tstompClient.openSocketWithURL('ws://<hostname>/<path>'); 
          ```)
          
      \t// subscribe to a topic
      \tlet topic = \"/topic/<my-topic>\";
          stompClient.subscribe(topic);
          
      \t// disconnect
      \tstompClient.disconnect();
      \n

      API

      \n
      export interface StompClientCallback {
          stompClientDidDisconnect(client: StompClientCommon)

          stompClientDidConnect(client: StompClientCommon)

          stompClientDidReceiveMessage(client: StompClientCommon, destination: string, jsonBody: string)

          serverDidSendReceipt(client: StompClientCommon, receiptId: string)

          serverDidSendError(client: StompClientCommon, description: string, message: string)

          serverDidSendPing();
      }
      \n

      Android limitations

      \n
        \n
      1. event serverDidSendPing is not yet implemented
        2. \n
      2. sendMessage: parameters withHeaders and withReceipt are ignored
        3. \n
      3. event serverDidSendReceipt doesn't contain the receiptId (it's always undefined)
        4. \n
      4. stompClientDidReceiveMessage: parameter destination is not sent (it's always undefined)
        5. \n
      \n

      TODO

      \n
        \n
      • Test with more servers
        • \n
      • Remove Android limitations
        • \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-skygear-sdk":{"name":"nativescript-skygear-sdk","version":"0.0.6","license":"Apache-2.0","readme":"

      Nativescript Skygear-Sdk Plugin

      \n

      This plugin allows you to use your nativescript application with a skygear.io or skygear-server application.

      \n

      Installation

      \n

      Install the plugin to your nativescript project.

      \n
      tns plugin add nativescript-skygear-sdk
      \n

      Usage

      \n

      To get started import the sdk, put in your app api key and the address to your skygear server

      \n
          import { SkygearSdk } from 'nativescript-skygear-sdk';

          const config = { apiKey: \"plugintest123\", address: \"localhost:3000\" };

          const skygearSDK = new SkygearSdk(config);
      \n

      and then you can use it like this:

      \n
          skygearSDK.auth.signupWithEmailPassword(\"email@example.com\", \"password\")
          .then(user => console.log(user))
          .catch(error => console.log(error))
      \n

      API

      \n

      The plugin is in 5 separate namespaces.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ModuleDescription
      authhandles signup, login, and logout. --password reset coming soon.
      chathandles interaction with the skygear chat plugin
      cloudhandles interaction with skygear cloud functions
      db(database)handles interaction with the public and private cloud database
      pubsubhandles interaction with the skygear pubsub module, --will eventually have support for push notifications.
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-crypto":{"name":"nativescript-crypto","version":"0.9.11","license":"Apache-2.0","readme":"

      NativeScript Crypto

      \n

      ...

      \n

      (Optional) Prerequisites / Requirements

      \n

      ...

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-crypto
      \n

      Usage

      \n

      ...

      \n

      API

      \n

      ...

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/imagepicker":{"name":"@global66/imagepicker","version":"3.0.1","license":"Apache-2.0","readme":"

      @nativescript/imagepicker

      \n

      Contents

      \n\n

      Intro

      \n

      Imagepicker plugin supporting both single and multiple selection.

      \n
        \n
      • Plugin supports iOS8+ and uses QBImagePicker cocoapod.
        • \n
      • For Android it uses Intents to open the stock images or file pickers. For Android 6 (API 23) and above, the permissions to read file storage should be explicitly required.
        • \n
      \n

      Installation

      \n

      Install the plugin by running the following command in the root directory of your app.

      \n
      npm install @nativescript/imagepicker
      \n

      Note: Version 3.0 contains breaking changes:

      \n
        \n
      • authorize() now returns a Promise<AuthorizationResult> for both android and ios.
        • \n
      • In the returned result from present() each result[i].thumbnail is now an ImageSource.
        • \n
      • result[i].duration is now typed correctly as a number.
        • \n
      \n

      Note: Version 2.0 contains breaking changes. In order supply more information about your selection, the ImageSource asset is nested in the response so you'll need to update your code to use result.asset instead of result as your src for your Images.

      \n

      Android required permissions

      \n

      Add the following permissions to the App_Resources/Android/src/main/AndroidManifest.xml file:

      \n
        \n
      • targetSdkVersion < 33
        • \n
      \n
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>

      <application android:requestLegacyExternalStorage=\"true\" ... >
          ...
        </application>
      \n
        \n
      • targetSdkVersion >=33(Android 13+)
        • \n
      \n
      <uses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\" />

      <uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\" />
      \n

      See the complete example here.

      \n

      iOS required permissions

      \n

      Using the plugin on iOS requires the NSPhotoLibraryUsageDescription permission. Modify the app/App_Resources/iOS/Info.plist file to add it as follows:

      \n
      <key>NSPhotoLibraryUsageDescription</key>
      <string>Description text goes here</string>
      \n

      Apple App Store might reject your app if you do not describe why you need this permission. The default message Requires access to photo library. might not be enough for the App Store reviewers.

      \n

      Pick images

      \n

      To pick images (and/or videos) with the plugin, take the steps below:

      \n
        \n
      1. Import the plugin
        2. \n
      \n\n
      import * as imagePickerPlugin from \"@nativescript/imagepicker\";
      \n
        \n
      1. Instantiate the picker with selection mode
        2. \n
      \n

      Instantiate the picker with selection mode by calling the create funciton of the plugin passing it an object that specifies mode(single or multiple) of media assets selection.

      \n\n
      let imagePickerObj: ImagePicker = imagePickerPlugin.create({
          mode: \"single\"});
      \n
        \n
      1. Pick the images
        2. \n
      \n
        \n
      • Request for permission\nRequest for permission to access photo library by calling the asynchronous authorize method.
        • \n
      • Present the list of media assets\nIf authorization request promise has resolved(e.i. the user has granted the permission), present the list of media assets to be picked from by calling the present method.
        • \n
      • Process the selection\nThe present method resolves with the selected media assets that can you to process and consume.
        • \n
      \n\n
      imagePickerObj
          .authorize()
          .then((authResult) => {
              if(authResult.authorized) {
                  return imagePickerObj.present()
                      .then(function(selection) {
                          selection.forEach(function(selected) {
                              this.imageSource = selected.asset;
                              this.type = selected.type;
                              this.filesize = selected.filesize;
                              //etc
                          });
                      });
              } else {
                  // process authorization not granted.
              }
          })    
          .catch(function (e) {
              // process error
          });
      \n

      Demo

      \n

      You can play with the plugin on StackBlitz at any of the following links:

      \n\n

      API

      \n

      ImagePicker class

      \n

      The class that provides the media selection API. It offers the following methods:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodReturnsDescription
      constructor(options: Options)ImagePickerInstanciates the ImagePicker class with the optional options parameter. See Options
      authorize()Promise<AuthorizationResult>Requests the required permissions. Call it before calling present(). In case of a failed authorization, consider notifying the user for degraded functionality. The returned AuthorizationResult will have it's authorized property set to true if permission has been granted.
      present()Promise<ImagePickerSelection[]>Presents the image picker UI.
      create(options: Options, hostView: View)ImagePickerCreates an instance of the ImagePicker class. The hostView parameter can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.
      \n

      Options

      \n

      An object passed to the create method to specify the characteristics of a media selection.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      OptionTypeDefaultDescription
      modestringmultipleThe mode of the imagepicker. Possible values are single for single selection and multiple for multiple selection.
      minimumNumberOfSelectionnumber0Optional: (iOS-only) The minumum number of selected assets.
      maximumNumberOfSelectionnumber0Optional: (iOS-only) The maximum number of selected assets.
      showsNumberOfSelectedAssetsbooleantrueOptional: (iOS-only) Display the number of selected assets.
      promptstringundefinedOptional: (iOS-only) Display prompt text when selecting assets.
      numberOfColumnsInPortraitnumber4Optional: (iOS-only) Sets the number of columns in Portrait orientation
      numberOfColumnsInLandscapenumber7Optional: (iOS-only) Sets the number of columns in Landscape orientation.
      mediaTypeImagePickerMediaTypeAnyOptional: The type of media asset to pick whether to pick Image/Video/Any type of assets.
      copyToAppFolderstringundefinedOptional: If passed, a new folder will be created in your applications folder and the asset will be copied there.
      renameFileTostringundefinedOptional: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended.
      showAdvanced booleanfalseOptional:(Android-only) Show internal and removable storage options on Android (WARNING: not supported officially).
      android{read_external_storage: string;}Optional: (Android-only) Provides a reason for permission request to access external storage on API level above 23.
      \n

      ImagePickerMediaType

      \n

      The type of media assets to be selected.

      \n
        \n
      • Any = 0,
        • \n
      • Image = 1,
        • \n
      • Video = 2
        • \n
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appcenter-connector":{"name":"nativescript-appcenter-connector","version":"0.0.1","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-awesome-webview":{"name":"nativescript-awesome-webview","version":"0.1.1","license":"Apache-2.0","readme":"

      nativescript-awesome-webview

      \n\n

      A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

      \n\n

      Prerequisites / Requirements

      \n

      As of now, there aren't any prerequisites. This should work with any device, any OS.

      \n

      Installation

      \n

      For tns projects (Angular, Typescript, Javascript)

      \n
      tns plugin add nativescript-awesome-webview
      \n

      For vue-cli projects (Nativescript-Vue)

      \n
      npm install nativescript-awesome-webview
      \n

      Usage

      \n

      Require

      \n

      Javascript -

      \n
      const {init, openWebView} = require('nativescript-awesome-webview');
      \n

      Typescript -

      \n
      import {init, openWebView} from 'nativescript-awesome-webview';
      \n

      1. Initialise (optional, only Android)

      \n
      init()
      \n

      NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

      \n

      Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

      \n

      2. Open an URL

      \n
          openWebView({
            url: 'http://google.com',
            toolbarColor: '#2277aa',
            toolbarControlsColor: '#eebb99'
          });
      \n

      openWebView options

      \n

      AwesomeWebviewOptions structure (the object you pass into openWebView)

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      urlrequiredThe URL to open
      showTitlefalseShows title bar in the webview
      toolbarColorundefinedColor of the toolbar
      toolbarControlsColorundefined(only iOS) color of buttons on toolbar
      isClosedundefinedcallback function that will be called when webview is closed
      \n

      License

      \n

      This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

      \n
      Apache License Version 2.0, January 2004\n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-sdk-8-4-0":{"name":"nativescript-google-maps-sdk-8-4-0","version":"2.0.0","license":"ISC","readme":"

      Deprecated Package

      \n

      This package is no longer supported and has been deprecated.

      \n

      To avoid malicious use, npm is hanging on to the package name.

      \n

      Please contact support@npmjs.com if you have questions about this package.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-facebook":{"name":"@enduco/nativescript-facebook","version":"10.0.14","license":"Apache-2.0","readme":"

      @enduco/nativescript-facebook

      \n
      ns plugin add @enduco/nativescript-facebook
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-awesome-webview":{"name":"nativescript-ssi-awesome-webview","version":"0.1.2","license":"Apache-2.0","readme":"

      nativescript-ssi-awesome-webview

      \n\n

      Based on nativescript-awesome-webview. This has been updated only to reference androidx libs instead of android support.\nIt works with NS 6.1

      \n

      A WebView plugin for NativeScript {N} that uses Chrome Custom Tabs in Android and SFSafariViewController in iOS.\nIt is awesome because now you can use the system's default browser, letting people maintain active logins\nacross websites (instead of having to freshly login to sites in the scope of your app's webview). Which means the custom tabs\n(or safari view) loads really fast! Also you can set the color of the title bar and controls of the custom tab / safari view.

      \n\n

      Prerequisites / Requirements

      \n

      As of now, there aren't any prerequisites. This should work with any device, any OS.

      \n

      Installation

      \n

      For tns projects (Angular, Typescript, Javascript)

      \n
      tns plugin add nativescript-ssi-awesome-webview
      \n

      For vue-cli projects (Nativescript-Vue)

      \n
      npm install nativescript-ssi-awesome-webview
      \n

      Usage

      \n

      Require

      \n

      Javascript -

      \n
      const {init, openWebView} = require('nativescript-ssi-awesome-webview');
      \n

      Typescript -

      \n
      import {init, openWebView} from 'nativescript-ssi-awesome-webview';
      \n

      1. Initialise (optional, only Android)

      \n
      init()
      \n

      NOTE: This warms up the Chrome Custom Tab on Android\nFor details check this

      \n

      Calling init() does nothing on iOS. So if you're making for both OS, calling the function doesn't hurt in iOS.

      \n

      2. Open an URL

      \n
          openWebView({
            url: 'http://google.com',
            toolbarColor: '#2277aa',
            toolbarControlsColor: '#eebb99'
          });
      \n

      openWebView options

      \n

      AwesomeWebviewOptions structure (the object you pass into openWebView)

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      urlrequiredThe URL to open
      showTitlefalseShows title bar in the webview
      toolbarColorundefinedColor of the toolbar
      toolbarControlsColorundefined(only iOS) color of buttons on toolbar
      isClosedundefinedcallback function that will be called when webview is closed
      \n

      License

      \n

      This is free, open source and do-whatever-you-want-ware. I really don't care.\nBut if you need an official license -

      \n
      Apache License Version 2.0, January 2004\n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-router-extended":{"name":"nativescript-vue-router-extended","version":"1.1.8","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-card-stack-view":{"name":"nativescript-card-stack-view","version":"0.0.6","license":"MIT","readme":"

      NativeScript Card Stack View

      \n

      A Tinder like card stack view component for NativeScript for iOS and Android with support for Angular.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PlatformSupportedNativeView
      iOSYesMDCSwipeToChoose
      AndroidYesCardStackView
      \n

      Demo screen capture

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      iOSAndroid
      \"iOS\"\"Android\"
      \n

      Warning

      \n

      This plugin is a work in progress. All key features should work but please test thoroughly before deploying to production and report any issues.

      \n

      The angular demo is properly setup. The core should work but the demo is very basic.

      \n

      Installation

      \n

      Run tns plugin add nativescript-card-stack-view in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.

      \n

      Usage

      \n

      For any implementation make sure you use ObservableArray<Observable> for the items. You can push to the array and have the cards appear as they are added but any other array manipulations could result in issues. If you a have a specific case in mind write an issue.

      \n

      Core

      \n

      Make sure you include the namespace on the Page element:

      \n
      xmlns:ns=\"nativescript-card-stack-view\"
      \n
      <ns:CardStack id=\"cardStack\" height=\"100%\" width=\"100%\" color=\"white\" dragging=\"onDrag\" swiped=\"onSwiped\" items=\"{{ myDataArray }}\">
          <ns:CardStack.itemTemplate>
              <ns:CardStackItem backgroundColor=\"#ff0000\" verticalAlignment=\"middle\" margin=\"15\" borderRadius=\"6\">
                  <GridLayout>
                      <Image src=\"{{image}}\" stretch=\"aspectFill\" height=\"100%\" width=\"100%\"  borderRadius=\"6\"/>
                      <Label text=\"{{title}}\" horizontalAlignment=\"center\" backgroundColor=\"#50000000\" height=\"30\" />
                      <Label text=\"WOW\" horizontalAlignment=\"center\" backgroundColor=\"#50000000\" height=\"30\" marginTop=\"50\" />
                  </GridLayout>
              </ns:CardStackItem>
          </ns:CardStack.itemTemplate>

      </ns:CardStack>
      \n

      Angular

      \n

      Import the module:

      \n
      @NgModule({
        bootstrap: [AppComponent],
        imports: [
          ...,
          CardStackModule // Import the module!
        ],
        declarations: [AppComponent],
        ...
      })
      \n

      Create the layout:

      \n
      <CardStack #cardStack
                 [items]=\"items\"
                 (swiped)=\"onSwiped($event)\"
                 (dragging)=\"onDrag($event)\"
                 (canceled)=\"onDragCancel($event)\"
                 (loaded)=\"onStackLoaded($event)\"
                 [options]=\"cardStackOptions\">

        <ng-template let-i=\"index\" let-item=\"item\">
          <!-- Your template here -->
        </ng-template>
      </CardStack>
      \n

      Events

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      EventDescription
      swipedFires when the cards is swiped and returns direction and position
      draggingFires when dragging occurs
      canceledFires when card swiping canceled and returns position of the card in the array
      loadedFires when the CardStack is loaded ant returns the instance
      \n

      Properties

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameDescription
      selectedIndexCurrent front card index
      \n

      DragEvent\nevent.object:

      \n
      {
        side :string; // `\"Left\"`,`\"Right\"` 
        ratio: number; // 0-1 ratio of center to right or left edge  
      }
      \n

      SwipedEvent\nevent.object:

      \n
      {
        direction :string; // `\"Left\"`,`\"Right\"` 
        position: number; // index of the swiped card
      }
      \n

      Attributes - Common

      \n
        \n
      • \n

        items (must be used with itemTemplate or ng-template, see demo)

        \n
        • \n
      • \n

        options optional

        \n
        • \n
      \n
      {
        visibleCount: number; // how many cards should be visible in the stack
      }
      \n

      Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

      \n

      Changelog

      \n

      0.0.2

      \n
        \n
      • Added LICENSE
        • \n
      \n

      0.0.1

      \n
        \n
      • Initial release
        • \n
      \n

      Author

      \n\n

      Resources

      \n

      Used the nativescript-carousel plugin as a scaffold.

      \n

      Learned from:

      \n\n

      Help

      \n

      I will accept pull requests that improve this and assign credit.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jiguang-push":{"name":"nativescript-jiguang-push","version":"0.0.1","license":"Apache-2.0","readme":"

      NativeScript Jiguang push plugin

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      Hist

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      need to config the android receiver

      \n
      <application>
          <!--JPush api核心消息接受器-->
          <receiver android:name=\"com.github.ayongw.jpushreceiver.MessageCenterJPushApiReceiver\"
                    android:exported=\"false\"
                    android:enabled=\"true\">
              <intent-filter>
                  <action android:name=\"cn.jpush.android.intent.REGISTRATION\" /> <!--Required  用户注册SDK的intent-->
                  <action android:name=\"cn.jpush.android.intent.MESSAGE_RECEIVED\" /> <!--Required  用户接收SDK消息的intent-->
                  <action android:name=\"cn.jpush.android.intent.NOTIFICATION_RECEIVED\" /> <!--Required  用户接收SDK通知栏信息的intent-->
                  <action android:name=\"cn.jpush.android.intent.NOTIFICATION_OPENED\" /> <!--Required  用户打开自定义通知栏的intent-->
                  <action android:name=\"cn.jpush.android.intent.CONNECTION\" /><!-- 接收网络变化 连接/断开 since 1.6.3 -->

                  <category android:name=\"__PACKAGE__\" />
              </intent-filter>
          </receiver>

          <!--用于接收种操作返回-->
          <receiver android:name=\"com.github.ayongw.jpushreceiver.MessageCenterJPushOperateMessageReceiver\">
              <intent-filter>
                  <action android:name=\"cn.jpush.android.intent.RECEIVE_MESSAGE\" />

                  <category android:name=\"__PACKAGE__\" />
              </intent-filter>
          </receiver>
      </application>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-fonticon":{"name":"nativescript-vue-fonticon","version":"1.0.3","license":"MIT","readme":"

      A simpler way to use font icons with NativeScript + Vue.js

      \n

      \"LICENSE\"\n\"Contributions\"

      \n

      The Problem

      \n

      You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

      \n
        \n
      • CSS
        • \n
      \n
      /* app.css or styles.scss */
      .fa {
        font-family: FontAwesome;
      }
      \n
        \n
      • view
        • \n
      \n
      <label class=\"fa\" text=\"\\uf293\"></label>
      \n

      This works but keeping up with unicodes is not fun.

      \n

      The Solution

      \n

      With this plugin, you can instead reference the fonticon by the specific classname:

      \n
      <FontIcon name=\"fa-play\" @tap=\"tapAction\" />
      \n

      Prerequisites / Requirements

      \n

      You will have to manually install the fonts you want to use.

      \n

      Install

      \n
      npm install nativescript-vue-fonticon --save
      or
      yarn add nativescript-vue-fonticon
      \n

      Usage

      \n

      FontAwesome will be used in the following examples but you can use any custom font icon collection.

      \n
        \n
      • Place font icon .ttf file in app/fonts, for example:
        • \n
      \n
      fonts/FontAwesome.ttf
      \n
        \n
      • Create base class in app.css global file, for example:
        • \n
      \n
      /* app.css or styles.scss */
      .fa {
        font-family: FontAwesome;
      }
      \n

      NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

      \n
        \n
      • Copy css to app somewhere, for example:
        • \n
      \n
      assets/css/font-awesome.css
      \n

      Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

      \n
        \n
      • Configure your fonts and setup the converter:
        • \n
      \n
      import Vue from 'nativescript-vue'
      import FontIcon from 'nativescript-vue-fonticon'

      import './styles.scss'

      Vue.use(FontIcon, {
        componentName: 'FIcon', // <-- Optional. Will be the name for component icon.
        debug: true, // <-- Optional. Will output the css mapping to console.
        paths: {
          fa: './assets/css/font-awesome.css',
          ion: './assets/css/ionicons.css'
        }
      })

      ...
      \n

      API

      \n

      Installing

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParametersTypeDefaultDescription
      componentNameStringFontIconName for component icon.
      debugBooleanfalseShow output the css mapping to console.
      pathsObjectObject of paths to css fonts.
      \n

      Using

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParametersTypeDefaultDescription
      nameStringName of class icon.
      colorStringSets a solid-color value to the matched view’s foreground or can use class too.
      size[String, Number]15Size icon.
      typeStringfaCSS class icon to use.
      @tapFunctionListener of tap event.
      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-opentok":{"name":"@triniwiz/nativescript-opentok","version":"1.0.0","license":"Apache-2.0","readme":"

      Nativescript nativescript-opentok

      \n
      ns plugin add @triniwiz/nativescript-opentok
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-modal-datetimepicker":{"name":"nativescript-modal-datetimepicker","version":"2.1.5","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-router":{"name":"nativescript-router","version":"1.1.4","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jnorkus/nativescript-svg":{"name":"@jnorkus/nativescript-svg","version":"1.1.2","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mpandroid-charts":{"name":"nativescript-mpandroid-charts","version":"0.0.1","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pereirax/nativescript-twilio-video":{"name":"@pereirax/nativescript-twilio-video","version":"1.0.3","license":"Apache-2.0","readme":"

      @pereirax/nativescript-twilio-video

      \n
      ns plugin add @pereirax/nativescript-twilio-video
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tanco/login":{"name":"@tanco/login","version":"1.0.5","license":"Apache-2.0","readme":"

      @tanco/login

      \n
      ns plugin add @tanco/login
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@ticnat/nativescript-intermec-printer":{"name":"@ticnat/nativescript-intermec-printer","version":"1.0.0","license":"Apache-2.0","readme":"

      @ticnat/nativescript-intermec-printer

      \n
      ns plugin add @ticnat/nativescript-intermec-printer
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-pusher/channels":{"name":"@nativescript-pusher/channels","version":"2.0.0-alpha.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-charts":{"name":"nativescript-charts","version":"0.0.7","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-charts/blob/master/LICENSE"},"readme":"

      Chart plugin for Nativescript

      \n

      Standalone plugin, not part of Telerik UI

      \n

      Android uses https://github.com/PhilJay/MPAndroidChart

      \n

      iOS not implemented

      \n

      Plugin for now contains Line chart type

      \n

      Line type:

      \n

      Add namespace xmlns:LineChart="nativescript-charts/line-chart"

      \n

      chartSettings are type of ILineChart\nchartData are type of ILineSeries\nEach point is object of {x,y}\nBoth can be imported from nativescript-charts/line-chart

      \n

      Example for LineChart

      \n
      var points  = [
          {x:1,y:4},
          {x:3,y:5.9},
          {x:7,y:4},
          {x:8,y:10},
          {x:10,y:1}
      ];

      var lineData:ILineSeries = {
          lineData: points,
          color:\"green\",
          name:\"test\",  
      };

      var linechartOpts:ILineChart= <ILineChart>{
          Legend:{
              enabled:false,
              form:LegendForm.CIRCLE,
          },
          XAxis:{
              textSize:12,
              textColor:\"green\",
              position:XPosition.TOP,
              axisMinimum:-30,
              axisMaximum:30,
              drawGridLines:false,
              showOnlyMinMax:false,
              enabled:true
          },
          RightYAxis:{
              textSize:10,
              textColor:\"green\",
              position:YPosition.OUTSIDE_CHART,
              axisMaximum:120,
              axisMinimum:-10,
              showOnlyMinMax:false,
              drawGridLines:false,
              enabled:true
          },
          LeftYAxis:{
              textSize:10,
              textColor:\"green\",
              position:YPosition.OUTSIDE_CHART,
              axisMaximum:120,
              axisMinimum:-10,
              showOnlyMinMax:false,
              drawGridLines:false,
              enabled:true
          },
          BaseSettings:{
              enabledDescription:false,
              drawGridBackground:false,
          }
      };
      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" 
          xmlns:LineChart=\"nativescript-charts/line-chart\">
          <LineChart:LineChart  chartSettings=\"{{chartSettings}}\" chartData=\"{{chartData}}\"/>
      </Page>
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xzwiex/nativescript-googleplay-referrer":{"name":"@xzwiex/nativescript-googleplay-referrer","version":"1.0.5","license":"Apache-2.0","readme":"

      @xzwiex/nativescript-googleplay-referrer

      \n
      ns plugin add @xzwiex/nativescript-googleplay-referrer
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bezlepkin/nativescript-ar":{"name":"@bezlepkin/nativescript-ar","version":"1.0.4","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-better-sqlite":{"name":"nativescript-better-sqlite","version":"0.3.2","license":"MIT","readme":"

      Nativescript-Better-Sqlite

      \n

      A Nativescript plugin providing easy SQLite access on Android.

      \n

      Installation:

      \n
      tns plugin add nativescript-better-sqlite
      \n

      What is working:

      \n
        \n
      • Create/connect database
        • \n
      • In memory databases
        • \n
      • Readonly databases
        • \n
      • Prepared statements
        • \n
      • Get single values
        • \n
      • Iterator for rows
        • \n
      • Get last inserted row
        • \n
      • Pragmas
        • \n
      \n

      Example

      \n

      The following code

      \n
      import * as Sqlite from \"nativescript-better-sqlite\";

      const database = new Sqlite.Database('users', { inMemory: true });

      database.pragma('journal_mode = WAL');

      database.execute(
          `CREATE TABLE
              user (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
                    name TEXT NOT NULL);`
      );

      const insert = database.prepare('INSERT INTO user (name) VALUES (?)');

      insert.run(['testName1']);
      insert.run(['testName2']);

      insert.close();

      const names = database.prepare('SELECT * FROM user', true).all();

      console.log(names);
      \n

      results in

      \n
      [
          {
              \"name\" : \"testName1\",
              \"id\" : 1
          },
          {
              \"name\" : \"testName2\",
              \"id\" : 2
          }
      ]
      \n

      this output.

      \n

      TODOs:

      \n
        \n
      • Transactions
        • \n
      • Workers / async
        • \n
      • Results as array
        • \n
      • Optimisations
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-coremotion":{"name":"nativescript-coremotion","version":"0.1.7","license":"MIT","readme":"

      NativeScript Core Motion Plugin

      \n

      Core Motion plugin for NativeScript

      \n

      Installation

      \n
      tns plugin add nativescript-coremotion
      \n

      Usage

      \n
      var Coremotion = require('nativescript-coremotion');
      \n

      Accelerometer

      \n

      isAccelerometerAvailable()

      \n

      Will return a boolean indicating of the current device supports the accelerometer.

      \n
      Coremotion.isAccelerometerAvailable()
      \n

      isAccelerometerActive()

      \n

      Will return a boolean indicating if Core Motion is currently returning accelerometer data.

      \n
      Coremotion.isAccelerometerActive()
      \n

      setAccelerometerUpdateInterval()

      \n

      Accepts a number, allows changes to the update interval in seconds.

      \n
      Coremotion.setAccelerometerUpdateInterval(.2);
      \n

      startAccelerometerUpdates()

      \n

      Accepts a callback that returns acceleration as the following:

      \n
      \n

      {x, y, z}

      \n
      \n
      Coremotion.startAccelerometerUpdates(callback);
      \n

      stopAccelerometerUpdates()

      \n

      Stops Core Motion from sending accelerometer updates.

      \n
      Coremotion.stopAccelerometerUpdates()
      \n

      Gyroscope

      \n

      isGyroscopeAvailable()

      \n

      Will return a boolean indicating of the current device supports the gyroscope.

      \n
      Coremotion.isGyroscopeAvailable()
      \n

      isGyroscopeActive()

      \n

      Will return a boolean indicating if Core Motion is currently returning gyroscope data.

      \n
      Coremotion.isGyroscopeActive()
      \n

      setGyroscopeUpdateInterval()

      \n

      Accepts a number, allows changes to the update interval in seconds.

      \n
      Coremotion.setGyroscopeUpdateInterval(.2);
      \n

      startGyroscopeUpdates()

      \n

      Accepts a callback that returns rotationRate as the following:

      \n
      \n

      {x, y, z}

      \n
      \n
      Coremotion.startGyroscopeUpdates(callback);
      \n

      stopGyroscopeUpdates()

      \n

      Stops Core Motion from sending gyroscope updates.

      \n
      Coremotion.stopGyroscopeUpdates()
      \n

      Magnetrometer

      \n

      isMagnetometerAvailable()

      \n

      Will return a boolean indicating of the current device supports the magnetometer.

      \n
      Coremotion.isMagnetometerAvailable()
      \n

      isMagnetometerActive()

      \n

      Will return a boolean indicating if Core Motion is currently returning magnetometer data.

      \n
      Coremotion.isMagnetometerActive()
      \n

      setMagnetometerUpdateInterval()

      \n

      Accepts a number, allows changes to the update interval in seconds.

      \n
      Coremotion.setMagnetometerUpdateInterval(.2);
      \n

      startMagnetometerUpdates()

      \n

      Accepts a callback that returns magneticField as the following:

      \n
      \n

      {x, y, z}

      \n
      \n
      Coremotion.startMagnetometerUpdates(callback);
      \n

      stopMagnetometerUpdates()

      \n

      Stops Core Motion from sending magnetometer updates.

      \n
      Coremotion.stopMagnetometerUpdates()
      \n

      DeviceMotion

      \n

      isDeviceMotionAvailable()

      \n

      Will return a boolean indicating of the current device supports deviceMotion.

      \n
      Coremotion.isDeviceMotionAvailable()
      \n

      isDeviceMotionActive()

      \n

      Will return a boolean indicating if Core Motion is currently returning deviceMotion data.

      \n
      Coremotion.isDeviceMotionActive()
      \n

      setDeviceMotionUpdateInterval()

      \n

      Accepts a number, allows changes to the update interval in seconds.

      \n
      Coremotion.setDeviceMotionUpdateInterval(.2);
      \n

      startDeviceMotionUpdates()

      \n

      Accepts a callback that returns the following:

      \n
      \n

      attitude: {pitch, roll, yaw},

      \n

      gravity: {x, y, z},

      \n

      userAcceleration: {x, y, z},

      \n

      magneticField: {\naccuracy,\nfield: {x, y, z}\n},

      \n
      \n
      \n

      rotationRate: {x, y, z}

      \n
      \n
      Coremotion.startDeviceMotionUpdates(callback);
      \n

      stopDeviceMotionUpdates()

      \n

      Stops Core Motion from sending deviceMotion updates.

      \n
      Coremotion.stopDeviceMotionUpdates()
      \n

      Altimeter

      \n

      isRelativeAltitudeAvailable()

      \n

      Will return a boolean indicating of the current device supports Relative Altitude.

      \n
      Coremotion.isRelativeAltitudeAvailable()
      \n

      isRelativeAltitudeActive()

      \n

      Will return a boolean indicating if Core Motion is currently returning Relative Altitude data.

      \n
      Coremotion.isRelativeAltitudeActive()
      \n

      startRelativeAltitudeUpdates()

      \n

      Accepts a callback that returns the following:

      \n
      \n

      {pressure, relativeAltitude}

      \n
      \n
      Coremotion.startRelativeAltitudeUpdates(callback);
      \n

      stopDeviceMotionUpdates()

      \n

      Stops Core Motion from sending Relative Altitude updates.

      \n
      Coremotion.stopRelativeAltitudeUpdates()
      \n

      Notes

      \n

      Plugin is iOS only as Core Motion does not exist on Android.

      \n

      Plugin requires NativeScript 2.3.0 or higher, well, because it works on that.

      \n

      Plugin was tested against iOS 10 using Xcode 8.

      \n

      There was an existing nativescript-accelerometer that only exposed a small subset of Core Motion, would have made PRs against it if the namespace would have permitted.

      \n

      The isXYZActive() does not re-query Core Motion at this time, but simply returns a boolean set in the plugin.

      \n

      Warranty

      \n

      There is none. You accept any and all responsiblity and liability that comes with putting this into your app. Additionally, you agree to pay my legal bills if you use this and someone sues me because it was in your app.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-pusher/beams":{"name":"@nativescript-pusher/beams","version":"2.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubest":{"name":"nativescript-youtubest","version":"1.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-camera":{"name":"nativescript-na-camera","version":"1.2.0","readme":"

      NativeScript NA Camera plugin

      \n\"Demo\n

      NOTE! Android is currently not supported.

      \n

      A NativeScript camera that utilizes AVFoundation for iOS.

      \n

      Installation

      \n

      $ tns plugin add nativescript-na-camera

      \n

      Usage

      \n

      XML

      \n
      <Page navigatingTo=\"navigatingTo\" xmlns:NACamera=\"nativescript-na-camera\">
        <StackLayout>
          <NACamera:Camera id=\"cameraPreview\" />
          <Button text=\"Capture\" id=\"capturePhoto\" tap=\"capturePhoto\" />
          <Button text=\"New photo\" id=\"newPhoto\" tap=\"newPhoto\" />
        </StackLayout>
      </Page>
      \n

      JS

      \n
      var NACamera = require(\"nativescript-na-camera\");

      var page;

      exports.navigatingTo = function(args) {
        page = args.object;
        
        NACamera.start();
      };

      exports.capturePhoto = function(args) {
        NACamera.capturePhoto({
          saveToLibrary: true
        }).then(function(image, savedToLibrary) {
          NACamera.stop();
          if(savedToLibrary) console.log(\"Photo was saved to library!\");
          // Do something more...
        }, function(error) {
          console.error(error);
        });
      };

      exports.newPhoto = function(args) {
        NACamera.start();
      };
      \n

      Note! NACamera.start() must be fired to initiate the camera preview. It is recommended to stop the camera once the preview is out of view in the UI using NACamera.stop().

      \n

      Methods

      \n

      capturePhoto()

      \n

      To capture a photo.

      \n

      The resolution of captured photo is the proportion of the camera preview.

      \n

      capturePhoto(props)

      \n
        \n
      • props - Set any capture properties (optional).\n
          \n
        • saveToLibrary - Saves the photo to the library upon capture (defaults to false).
          • \n
        • mirrorCorrection - Correct mirroring when capturing with the front camera (defaults to true).
          • \n
        • playSound - Plays a capture sound (defaults to true).
          • \n
        • simulatorDebug - For testing on a simulator where a camera device is not available (defaults to false).
          • \n
        • simulatorImage - The image source (defaults to empty string).
          • \n
        \n
        • \n
      • Returns a then promise:\n
          \n
        • resolve\n
            \n
          • image - The captured photo as an image source.
            • \n
          • savedToLibrary - Reference to props.saveToLibrary which is either true or false.
            • \n
          \n
          • \n
        • reject\n
            \n
          • error - The error message.
            • \n
          \n
          • \n
        \n
        • \n
      \n
      NACamera.capturePhoto({
        saveToLibrary: true
      }).then(function(image, savedToLibrary) {
        NACamera.stop();
        if(savedToLibrary) console.log(\"Photo was saved to library!\");
        // Do something more...
      }, function(error) {
        console.error(error);
      });
      \n
      \n

      saveToLibrary()

      \n

      Save an image to the library.

      \n

      saveToLibrary(image)

      \n
        \n
      • image - The image source that should be saved to the library.
        • \n
      • Returns true.
        • \n
      \n
      NACamera.saveToLibrary(image);
      \n
      \n

      setTorchMode()

      \n

      Set the torch mode (if available).

      \n

      setTorchMode(condition)

      \n
        \n
      • condition - Boolean value.
        • \n
      • Returns true or false depending on availability.
        • \n
      \n
      NACamera.setTorchMode(true); // Torch on
      NACamera.setTorchMode(false); // Torch off
      \n
      \n

      setFlashMode()

      \n

      Set the flash mode (if available).

      \n

      setFlashMode(condition)

      \n
        \n
      • condition - Boolean value.
        • \n
      • Returns true or false depending on availability.
        • \n
      \n
      NACamera.setFlashMode(true); // Flash on
      NACamera.setFlashMode(false); // Flash off
      \n
      \n

      setDevicePosition()

      \n

      Set the camera device position (back or front camera, if available).

      \n

      setDevicePosition(position)

      \n
        \n
      • position - String value. Must be either "back" or "front".
        • \n
      • Returns true or false depending on availability.
        • \n
      \n
      NACamera.setDevicePosition(\"back\"); // Back camera
      NACamera.setDevicePosition(\"front\"); // Front camera
      \n
      \n

      hasDevicePosition()

      \n

      Check if a camera device position is available.

      \n

      hasDevicePosition(position)

      \n
        \n
      • position - String value. Must be either "back" or "front".
        • \n
      • Returns true or false depending on availability.
        • \n
      \n
      var hasBackCamera = NACamera.hasDevicePosition(\"back\");
      var hasFrontCamera = NACamera.hasDevicePosition(\"front\");
      \n
      \n

      Other methods

      \n
        \n
      • start() - Start the camera session.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • stop() - Stop the camera session.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • devicesAvailable() - Check if any camera is available.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • getTorchMode() - Get the current torch mode.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • hasTorchMode() - Check if the camera's current device position has a torch available.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • getFlashMode() - Get the current flash mode.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • hasFlashMode() - Check if the camera's current device position has a flash available.\n
          \n
        • Returns boolean
          • \n
        \n
        • \n
      • getDevicePosition() - Check if the camera's current device position is either back or front.\n
          \n
        • Returns "back" or "front"
          • \n
        \n
        • \n
      \n

      Known issues

      \n
        \n
      • No Android compatibility, yet.
        • \n
      \n

      To-do list

      \n
        \n
      • Video recording
        • \n
      \n

      Please post an issue if you have any other ideas!

      \n

      History

      \n

      Version 1.1.0 (November 21, 2016)

      \n
        \n
      • Pinch-to-zoom feature
        • \n
      • Tap-to-focus feature
        • \n
      • Added mirror correction property when capturing with the front camera (See capturePhoto() documentation).
        • \n
      \n

      Version 1.0.0 (November 10, 2016)

      \n
        \n
      • First release!
        • \n
      \n

      Credits

      \n\n

      License

      \n

      MIT - for {N} version 2.0.0+

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-google-play-services":{"name":"nativescript-plugin-google-play-services","version":"26.0.2","license":"Apache-2.0","readme":"

      nativescript-plugin-google-play-services

      \n

      A plugin which installs the Google Play Services library to your NativeScript project.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-joystick":{"name":"nativescript-joystick","version":"0.4.4","license":{"type":"MIT","url":"https://github.com/sebawita/nativescript-joystick/blob/master/LICENSE"},"readme":"

      NativeScript-JoyStick

      \n

      An Android and iOS UI component for NativeScript that provides Virtual JoyStick

      \n

      \"Sample\"Sample

      \n

      Native Source

      \n

      Android

      \n

      This component is based on JoyStick component from AndroidArsenal created by erz05

      \n

      iOS

      \n

      This component is based on JoyStick component from cocoapods created by Cole Dunsby\nAnd then modified to work better with Objective C, into JoyStick another cocoapod by tzraikov

      \n

      Installation

      \n

      From your command prompt/termial go to your app's root folder and execute:\ntns plugin add nativescript-joystick

      \n

      Usage

      \n

      XML:

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"
        xmlns:js=\"nativescript-joystick\">
        <StackLayout>
          <Label text=\"JoyStick\"/>
          
          <Label text=\"{{'Angle:' + angle}}\" textWrap=\"true\" />
          <Label text=\"{{'Power:' + power}}\" textWrap=\"true\" />
          <Label text=\"{{'Horizontal:' + horizontal}}\" textWrap=\"true\" />
          <Label text=\"{{'Vertical:' + vertical}}\" textWrap=\"true\" />

          <js:JoyStick
            padColor=\"green\"
            buttonColor=\"pink\"
            width=\"50%\"
            angle=\"{{angle}}\"
            power=\"{{power}}\"
            horizontal=\"{{horizontal}}\"
            vertical=\"{{vertical}}\">
          </js:JoyStick>
        </StackLayout>
      </Page>
      \n

      Attributes

      \n

      padColor - (color string) - optional

      \n

      Attribute to specify the pad color to use.

      \n

      buttonColor - (color string) - optional

      \n

      Attribute to specify the button color to use.

      \n

      angle - (number) - optional

      \n

      Attribute (read only) to bind the button angle.\nValues range -180 to 180. Where 0: Left, 90: Up, 180 and -180: Right, -90: Down

      \n

      power - (number) - optional

      \n

      Attribute (read only) to bind the button power or how far it is from the centre.\nValues range 0 to 1. Where 0: centre, 1: at the edge.

      \n

      horizontal - (number) - optional

      \n

      Attribute (read only) to bind the horizontal position of the button.\nValues range -1 to 1. Where 0: centre, -1: left, 1: right.

      \n

      vertical - (number) - optional

      \n

      Attribute (read only) to bind the vertical position of the button.\nValues range -1 to 1. Where 0: centre, -1: down, 1: up.

      \n

      Methods

      \n
        \n
      • getPower() - returns current Power value directly from the native component
        • \n
      • getAngle() - returns current Angle value directly from the native component
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tealium/nativescript-plugin":{"name":"@tealium/nativescript-plugin","version":"1.1.4","license":"Commercial","readme":"

      @tealium/nativescript-plugin

      \n
      ns plugin add @tealium/nativescript-plugin
      \n

      Usage

      \n

      See https://docs.tealium.com/platforms/nativescript for full documentation.

      \n

      License

      \n

      License Agreement

      \n

      Thank You for Your interest in our Tealium NativeScript Plugin (the "Software"), owned and licensed by Tealium Inc. (“Tealium,” "Our," “We,” or “Us”). Please read this license agreement (the "Agreement") carefully, as it contains the terms and conditions that govern Your use of and access to the Software.

      \n

      You may not access the Software if You are Our direct competitor, except with Our prior written consent. In addition, You may not access the Software for purposes of monitoring the availability, performance, or functionality, of any of our products and services or for any other benchmarking or competitive purposes.

      \n

      BY DOWNLOADING THE SOFTWARE OR BY EXECUTING A TEALIUM PROVIDED ORDER FORM THAT REFERENCES THIS AGREEMENT, YOU AGREE TO BE BOUND BY AND COMPLY WITH THIS AGREEMENT. IF YOU ARE ENTERING INTO THIS AGREEMENT ON BEHALF OF A COMPANY OR OTHER LEGAL ENTITY, YOU REPRESENT THAT YOU HAVE THE AUTHORITY TO BIND SUCH ENTITY AND ITS AFFILIATES TO THIS AGREEMENT, IN WHICH CASE THE TERMS "YOU" OR "YOUR" WILL REFER TO SUCH ENTITY AND ITS AFFILIATES. IF YOU DO NOT HAVE SUCH AUTHORITY, OR IF YOU DO NOT AGREE WITH THE TERMS OF THIS AGREEMENT, YOU MUST NOT USE THE SOFTWARE.

      \n

      The term of Your license to use the Software (the "Term") will begin when You accept this Agreement as set forth above and will continue until terminated pursuant to the provisions of the "Cancellation and Termination" section below. During the Term, We grant You a non-exclusive, non-transferable, royalty-free, limited license (with no right to sublicense) to use the Software to do the following:

      \n

      develop software applications and functionality designed to be used in conjunction with Tealium's products and services;\nconduct quality assurance testing to ensure compatibility between your software application and Tealium's products and services; and\nconduct support testing to troubleshoot compatibility between your software application and Tealium's products and services.

      \n

      During the Term, Tealium further grants to You a non-exclusive, non-transferable, royalty-free, limited world-wide license (with no right to sublicense) to market, reproduce, and distribute applications incorporating the integration You develop under this Agreement, either directly or through multiple levels of distributors, Your end users, but only under an end-user license agreement with terms that are as protective of Tealium's rights as this Agreement.

      \n

      We do not grant any other rights to the Software. You may only use the Software during the Term, we reserve all rights not expressly granted under this Agreement, and there are no implied rights or other rights We grant hereunder, whether by estoppel or otherwise. You may not: (i) copy or reproduce the Software (except for reasonable archival purposes); (ii) modify or create any derivative works of the Software; (iii) decompile, disassemble, or reverse engineer the Software (except to the extent expressly permitted under applicable law); or (iv) remove or alter any trademark, logo, copyright or other proprietary notices, legends, symbols or labels in the Software. Further, You may not use the Software for any illegal or unauthorized purpose.

      \n

      Tealium will retain all title, ownership, and Intellectual Property Rights in the Software and any derivative works thereof. “Intellectual Property Rights” will mean all patent, copyright, trade secret, trademark and other proprietary and intellectual property rights, including moral rights. The Software is protected by copyright and other intellectual property laws and by international treaties. You agree that We will own all suggestions, enhancements requests, feedback, recommendations, or other input provided by You or any other party relating to the Software. Other than the use licenses expressly granted in this Agreement, neither this Agreement nor its performance transfers from Us to You any Tealium intellectual property.

      \n

      General Conditions and Restrictions\nYour use of the Software is at Your sole risk.\nYou agree that Tealium is under no obligation to provide You with support for the Software, or to provide You with updates or error corrections ("Updates") to the Software. If Tealium, at its sole discretion, decides to provide You with Updates, Updates will be considered part of Software, and subject to the terms of this Agreement.\nYou agree not to reproduce, duplicate, copy, sell, resell, or exploit any portion or feature of the Software or access to the Software without express written permission from Tealium.

      \n

      No Warranty\nTHE SOFTWARE IS PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS, AND TEALIUM EXPRESSLY DISCLAIMS ANY WARRANTIES AND CONDITIONS OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, QUIET ENJOYMENT, ACCURACY, OR NON-INFRINGEMENT. WITHOUT LIMITING THE FOREGOING, TEALIUM DOES NOT WARRANT THAT THE SERVICE WILL MEET YOUR SPECIFIC REQUIREMENTS, THAT THE SERVICE WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE, THAT THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SOFTWARE WILL BE COMPLETE, ACCURATE, OR RELIABLE, THAT THE QUALITY OF ANY PRODUCTS, SERVICES, INFORMATION, OR OTHER MATERIAL PURCHASED OR OBTAINED BY YOU THROUGH THE SOFTWARE WILL MEET YOUR EXPECTATIONS, OR THAT ANY ERRORS IN THE SOFTWARE WILL BE CORRECTED.

      \n

      Limitation of Liability\nYOU EXPRESSLY UNDERSTAND AND AGREE THAT TEALIUM WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING BUT NOT LIMITED TO DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER INTANGIBLE LOSSES (EVEN IF TEALIUM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES), INCLUDING ANY SUCH DAMAGES RESULTING FROM THE USE OR THE INABILITY TO USE THE SOFTWARE; THE COST OF PROCUREMENT OF SUBSTITUTE GOODS AND SERVICES RESULTING FROM ANY GOODS, DATA, INFORMATION OR SERVICES PURCHASED OR OBTAINED OR MESSAGES RECEIVED OR TRANSACTIONS ENTERED INTO THROUGH OR FROM THE SOFTWARE; UNAUTHORIZED ACCESS TO OR ALTERATION OF YOUR TRANSMISSIONS OR DATA; STATEMENTS OR CONDUCT OF ANY THIRD PARTY ON THE SOFTWARE; TERMINATION OF YOUR ACCOUNT; OR ANY OTHER MATTER RELATING TO THE SOFTWARE.

      \n

      NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, TEALIUM’S LIABILITY TO YOU FOR ANY DAMAGES ARISING FROM OR RELATING TO THE SOFTWARE (FOR ANY CAUSE WHATSOEVER AND REGARDLESS OF THE FORM OF THE ACTION) WILL AT ALL TIMES BE LIMITED TO THE GREATER OR EITHER (1) THE AMOUNT YOU PAID TO TEALIUM IN THE SIX (6) MONTHS IMMEDIATELY PRECEDING THE INCIDENT GIVING RISE TO THE CLAIM OR (2) ONE HUNDRED FIFTY DOLLARS (USD 150.00).

      \n

      Cancellation and Termination\nTealium, in its sole discretion, may terminate your license, for any reason at any time.\nYou, in your sole discretion, may terminate this Agreement immediately upon written notice to Tealium.\nUpon termination or expiration of this Agreement, You will immediately cease use of and destroy the original and all copies of the Software in Your possession or control. Upon Tealium's written request, You will confirm to Tealium in writing that You have complied with all provisions of this Agreement.\nEither party may terminate this Agreement upon written notice to the other party, for any material breach by the other party, if such breach is not cured within thirty (30) days after the non-breaching party provides the allegedly breaching party with written notice of such breach.

      \n

      Miscellaneous\nThis Agreement will be governed by the laws of the State of California without giving effect to any conflicts of laws principles that may require the application of the law of a different jurisdiction. For any dispute or proceeding arising from or relating to this Agreement, You agree to submit to the jurisdiction of, and agree that venue is proper in, the state courts located in San Diego County, California, and in the federal courts located in the Southern District of California. The failure of Tealium to exercise or enforce any right or provision of this Agreement will not constitute a waiver of such right or provision. This Agreement constitutes the entire agreement between You and Tealium and governs Your use of the Service, superseding any prior agreements between You and Tealium (including, but not limited to, any prior versions of the Agreement).

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-keyboard":{"name":"nativescript-na-keyboard","version":"1.1.0","readme":"

      NativeScript NA Keyboard plugin

      \n

      NOTE! Android is currently not supported.

      \n

      A NativeScript keyboard observer that utilizes KWKeyboardListener for iOS.

      \n

      Installation

      \n

      $ tns plugin add nativescript-na-keyboard

      \n

      Usage

      \n

      Simply require the plugin and do as such:

      \n
      var NAKeyboard = require(\"nativescript-na-keyboard\");

      NAKeyboard.on(\"open close\", function(eventData) {
        console.log(eventData.eventName); // Returns either \"open\" or \"close\".
        console.dump(eventData.keyboardFrame); // Returns position and size of the keyboard.
      });
      \n

      Methods

      \n

      on()

      \n

      To observe keyboard activity.

      \n

      on(eventTypes, callback)

      \n
        \n
      • eventTypes - Can be either "open" or "close". If both, separate them with a blankspace (i.e. "open close").
        • \n
      • callback - The callback function. Available parameter is "eventData" which is an object that includes eventName and keyboardFrame.
        • \n
      \n
      \n

      setAvoidingView()

      \n

      Set a view that the keyboard should avoid.

      \n

      setAvoidingView(view)

      \n
        \n
      • view - The view that should be pulled when the keyboard opens.
        • \n
      \n
      var view = page.getViewById(\"inputText\"); // The TextField view
      NAKeyboard.setAvoidingView(view);
      \n
      \n

      Other methods

      \n
        \n
      • keyboardVisible() - Returns true or false depending on keyboard's current state.
        • \n
      \n

      Known issues

      \n
        \n
      • No Android compatibility, yet.
        • \n
      \n

      History

      \n

      Version 1.1.0 (22 October 2016)

      \n
        \n
      • Added two new methods: keyboardVisible() and setAvoidingView().
        • \n
      \n

      Version 1.0.1 (18 October 2016)

      \n
        \n
      • Added to npm.
        • \n
      \n

      Version 1.0.0 (18 October 2016)

      \n
        \n
      • on() method for observing keyboard activity.
        • \n
      \n

      Credits

      \n\n

      License

      \n

      MIT - for {N} version 2.0.0+

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"a2c-nativescript-inappbrowser":{"name":"a2c-nativescript-inappbrowser","version":"3.0.1","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-file-photoview":{"name":"nativescript-file-photoview","version":"0.1.5","license":"MIT","readme":"

      NativeScript Plugin - FilePhotoView

      \n

      A simple library for viewing an image file on Android from local storage.

      \n
      \n

      This plugin supports Android only. For iOS, recommend to use nativescript-photoview plugin.

      \n
      \n\n\n\n\n\n\n\n\n\n\n\n
      Android
      FilePhotoView
      \n

      Background

      \n

      I have an app that reads images from a protected REST API endpoints, and download into NativeScript as ImageSource. I need a photo viewer so when the thumbnail was tapped, the viewer for the photo will display with zoom functionality.

      \n

      So I need a photo popup viewer that supports NS's ImageSource. I found the nativescript-photoviewer that works well in supporting this, but for Android, it only supports external URL strings that I can't provide.

      \n

      Also, I found that passing an ImageSource directly to an Android library is not that strict forward (it easily cause out of memory error).

      \n

      As a result, I come up a simple approach as follows:

      \n
        \n
      • The image was download as NS's ImageSource instances
        • \n
      • When user click on the thumbnail, the ImageSource will be saved to the application cache
        • \n
      • The image file path will be passed to the above FilePhotoView Android library for pop up and display\n
          \n
        • The FilePhotoView use Glide and PhotoView behind the scene
          • \n
        \n
        • \n
      \n

      Installation

      \n

      Run tns plugin add nativescript-file-photoview in your ROOT directory of your project.

      \n

      Usage

      \n

      The usage is very simple. Import "nativescript-file-photoview" module and create a instance of it. Call the show(string) (string is the local storage image file path) function to present the photo.\nThe show() function accept a singe parameter, a string.

      \n
      import { Component, OnInit } from \"@angular/core\";
      import { Observable } from 'rxjs/Rx';
      import * as nshttp from 'http';
      import * as fs from 'file-system';
      import * as enums from 'ui/enums';

      // Import the plugin
      import { FilePhotoview } from 'nativescript-file-photoview';

      @Component({
          selector: \"ns-app\",
          templateUrl: \"app.component.html\",
      })
      export class AppComponent implements OnInit { 

          imageUrl: string;

          filePhotoView = new FilePhotoview();

          ngOnInit() {

              this.imageUrl = 'https://controller1.skywidesoft.com/images/sample1.jpg';

          }

          viewPhoto() {
              console.log('View Photo');
              console.log(`imageUrl: ${this.imageUrl}`);

              // Download image and save file to application cache
              Observable.from(nshttp.getImage(this.imageUrl)).subscribe(
                  image => {

                      // This is the application's cache folder
                      let folder = fs.knownFolders.temp();

                      // Construct a unique file name for saving the image file
                      let fileName = new Date().getTime() + '.jpg';
                      let path = fs.path.join(folder.path, fileName);

                      // Save the file
                      image.saveToFile(path, enums.ImageFormat.jpg);
                      console.log(`File: ${path} saved successfully`);

                      // Display the photo
                      this.filePhotoView.show(path);

                  }
              );
          }

      }
      \n

      Screenshots

      \n

      \"Demo

      \n

      Help

      \n

      I will accept pull requests that improve this and assign credit.\nAll code is Apache 2.0 licensed.

      \n

      License

      \n

      Copyright 2017 SkywideSoft

      \n

      Licensed under the Apache License, Version 2.0 (the "License");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at

      \n

      http://www.apache.org/licenses/LICENSE-2.0

      \n

      Unless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-https":{"name":"@nstudio/nativescript-https","version":"3.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"digitaltown-nativescript-gif":{"name":"digitaltown-nativescript-gif","version":"4.0.2","license":"MIT","readme":"

      README.md

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jnorkus/nativescript-ngx-shadow":{"name":"@jnorkus/nativescript-ngx-shadow","version":"7.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"cordova-admobsdk":{"name":"cordova-admobsdk","version":"8.13.0","license":"MIT","readme":"

      Google Mobile Ads SDK for Cordova

      \n

      This cordova plugin adds Google Mobile Ads SDK to Cordova projects, mainly as dependency for other plugins.

      \n

      Platform Versions

      \n

      Platforms supported:

      \n
        \n
      • [x] Android, via SDK v20.4.0 (part of Google Play service platform), official ...
        • \n
      • [x] iOS, via SDK v8.13.0, official ...
        • \n
      \n

      ChangeLog

      \n
        \n
      • 2022.1.2, updat admob sdk for ios to v8.13.0
        • \n
      • 2018.10.21, update admob sdk ios to v7.35.0
        • \n
      • 2016.10.18, update admob sdk ios to v7.13.0
        • \n
      • 2015.9.28, update admob sdk wp8 to v6.5.13
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-file-picker":{"name":"nativescript-file-picker","version":"0.0.2","license":"MIT","readme":"

      /* not published yet */

      \n

      Android: https://github.com/spacecowboy/NoNonsense-FilePicker/

      \n

      copied from library page:

      \n

      \n\n

      <img src="https://raw.githubusercontent.com/spacecowboy/NoNonsense-FilePicker/master/screenshots/Nexus10-picker-dark.png"\nwidth="50%"\n

      \n

      \n

      \n\n

      <img src="https://raw.githubusercontent.com/spacecowboy/NoNonsense-FilePicker/master/screenshots/Nexus10-picker-light.png"\nwidth="50%"\n

      \n

      \n

      Include permission in your manifest

      \n
      <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />
      \n

      Include the file picker activity

      \n

      The intent filter is optional depending on your use case. Note that\nthe theme set in the manifest is important.

      \n
          <activity
             android:name=\"com.nononsenseapps.filepicker.FilePickerActivity\"
             android:label=\"@string/app_name\"
             android:theme=\"@style/FilePickerTheme\">
             <intent-filter>
                <action android:name=\"android.intent.action.GET_CONTENT\" />
                <category android:name=\"android.intent.category.DEFAULT\" />
             </intent-filter>
          </activity>
      \n

      Configure the theme

      \n

      You must set the theme on the activity, but you can configure it to\nmatch your existing application theme. You can also name it whatever\nyou like..

      \n
          </style>

              <style name=\"FilePickerTheme\" parent=\"NNF_BaseTheme.Light\">
              <!-- Set these to match your theme -->
              <item name=\"colorPrimary\">@color/ns_primary</item>
              <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
              <item name=\"colorAccent\">@color/ns_accent</item>

              <!-- Setting a divider is entirely optional -->
              <item name=\"nnf_list_item_divider\">?android:attr/listDivider</item>

              <!-- Need to set this also to style create folder dialog -->
              <item name=\"alertDialogTheme\">@style/FilePickerAlertDialogTheme</item>

              <!-- If you want to set a specific toolbar theme, do it here -->
              <!-- <item name=\"nnf_toolbarTheme\">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> -->
          </style>

          <style name=\"FilePickerAlertDialogTheme\" parent=\"Theme.AppCompat.Dialog.Alert\">
              <item name=\"colorPrimary\">@color/ns_primary</item>
              <item name=\"colorPrimaryDark\">@color/ns_primaryDark</item>
          </style>
      \n

      docs:\nso..oo..on

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finanzritter/nativescript-sentry":{"name":"@finanzritter/nativescript-sentry","version":"1.10.1","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dottodot/nativescript-camera-plus":{"name":"@dottodot/nativescript-camera-plus","version":"2.0.6","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@heywhy/ns-secure-storage":{"name":"@heywhy/ns-secure-storage","version":"0.3.0","license":"Apache-2.0","readme":"

      @heywhy/ns-secure-storage

      \n

      \"NPM\n\"Twitter

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      ns plugin add @heywhy/ns-secure-storage
      \n

      Usage

      \n

      This plugin maintains the same API as @nativescript/secure-storage but with missing improvements.

      \n

      iOS Security++

      \n

      By default the plugin uses kSecAttrAccessibleAlwaysThisDeviceOnly access control to the keychain. This means that the keychain value can be accessed even if the device is locked. If you want to enhance security and you do not need background access, or if you want to allow the value to be backed up and migrated to another device, you can use any of keys defined here and pass it when you create an instance of SecureStorage, for example

      \n
      declare const kSecAttrAccessibleWhenUnlockedThisDeviceOnly; // This is needed in case you don't have tns-platform-declarations module installed. 
      const secureStorage = new SecureStorage({accessibilityType: kSecAttrAccessibleWhenUnlockedThisDeviceOnly})
      \n

      iOS Simulator

      \n

      Currently this plugin defaults to using NSUserDefaults on iOS Simulators. You can change this behaviour by providing disableFallbackToUserDefaults to the constructor of SecureStorage. This then uses the keychain instead of NSUserDefaults on simulators.

      \n
      const secureStorage = new SecureStorage({disableFallbackToUserDefaults: true})
      \n

      If you're running into issues similar to issue_10, consider using the default behaviour again.

      \n

      iOS Keychain Access Groups

      \n

      You can share secrets between apps/extensions via Keychain access groups.

      \n

      To setup:

      \n
        \n
      • \n

        Add a keychain access group entitlement to your app\nby adding an entry in the app/App_Resources/iOS/<someName>.entitlements file.

        \n

        e.g.

        \n
        <key>keychain-access-groups</key>
        <array>
          <string>$(AppIdentifierPrefix)com.my.app.sharedgroup</string>
        </array>
        \n
        • \n
      • \n

        Then in your app specify the accessGroup property when getting/setting values.\ne.g.

        \n
        import { SecureStorage } from \"@heywhy/ns-secure-storage\";

        export class MyComponent {
          secureStorage = new SecureStorage();
          // a method that can be called from your view
          setSecureValue() {
            this.secureStorage.set({
              accessGroup:\"<TeamID>.com.my.app.sharedgroup\",
              key: 'myKey',
              value: 'my value'
            }).then(success => { console.log(success)});
          }
        }
        \n
        • \n
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dsvishchov/nativescript-ngx-shadow":{"name":"@dsvishchov/nativescript-ngx-shadow","version":"7.0.3","license":"Apache-2.0","readme":"

      NativeScript Angular Shadow Directive Plugin \"apple\" \"android\"

      \n

      \"NPM\n\"Downloads\"\n\"Twitter

      \n

      This repo is a fork of @Especializa's NativeScript Shadow Directive.\nhttps://github.com/Especializa/nativescript-ng-shadow

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-ngx-shadow
      \n

      Demo

      \n

      \"N|Solid\"

      \n

      How to use it

      \n

      This is an Angular directive to make your life easier when it comes to native shadows.

      \n

      Shadows are a very important part of Material design specification.\nIt brings up the concept of elevation, which implies in the natural human way of perceiving objects raising up from the surface.

      \n

      With this directive, you won't have to worry about all the aspects regarding shadowing on Android and on iOS.\nOn the other hand, if you care about any details, just provide extra attributes and they will superseed the default ones.

      \n

      However, running this on Android you will require the SDK to be greater or equal than 21 (Android 5.0 Lollipop or later), otherwise shadows will simply not be shown. There should be no problem running this on any version of iOS.

      \n

      Import the NgShadowModule

      \n
      // ...
      import { NgShadowModule } from \"nativescript-ngx-shadow\";

      @NgModule({
        imports: [
          NgShadowModule
          // ...
        ]
        // ...
      })
      export class MyModule {}
      \n

      Just use in your templates

      \n

      Simple attribute shadow:

      \n
      <Label shadow=\"2\"></Label>
      \n

      Of course you can property bind it:

      \n
      <Label [shadow]=\"myCustomShadow\"></Label>
      \n

      To provide other details, combine the shadow directive with other attributes:

      \n
      <Label shadow [elevation]=\"myElevation\" cornerRadius=\"5\"></Label>
      \n

      There are a couple of platform specific attributes you might want to use to customize your view. Bear in mind some of them clash with CSS styles applied to the same views. When it happens, the default behaviour on Android is the original HTML/CSS styles are lost in favor of the ones provided by this directive. On iOS, on the other hand, HTML/CSS pre-existent styles are regarded, consequently the shadow might not be applied.

      \n

      The tip is avoid applying things like background color and border radius to the same view you intend to apply this directive (Note: this is now supported). You are always able to nest views and get what you want. If not, please leave a message so we can try to help.

      \n

      List of attributes

      \n

      The table below list and describes all possible attributes as well as show which platform supports each one of them:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AttributeTypePlatformDescription
      shadowstring | number | AndroidData | IOSDatabothDirective attribute. Providing null or empty string with no elevation attribute, will switch off the shadow
      elevationnumber | stringbothDetermines the elevation of the view from the surface. It does all shadow related calculations. You might want to have a look at this enum of standard material design elevations.
      PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels) on Android, or PTs (points) on iOS.
      pressedElevationnumber | stringAndroidDetermines the view's elevation when on pressed state.
      shapestring => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
      default: 'RECTANGLE'      		AndroidDetermines the shape of the view and overrides its format styles.
      bgcolorstring => color #RGBAndroidDetermines view's background color and overrides its previous background. If not set, the previous background is used. NOTE: setting the background to transparent is known to cause issues on Android (the shadow may overlap the background)
      cornerRadiusnumberAndroidDetermines view's corner radius (CSS border-radius) and overrides its previous style. If this is not set, the view's CSS border-radius are used.
      PS: Since version 2.0, it's calculated in DIPs (or DPs, density independent pixels).
      translationZnumberAndroidDetermines an extra distance (in DIP) to the surface.
      pressedTranslationZnumberAndroidDetermines an extra distance (in DIP) to the surface when the view is in the pressed state.
      forcePressAnimationboolean => default: falseAndroidBy default, if a view has a StateAnimator, it is overwritten by an animator that raises the View on press. Setting this to true will always define this new animator, essentially making any clickable View work as a button.
      maskToBoundsboolean => default: falseiOSDetermines whether the shadow will be limited to the view margins.
      shadowColorstring => color #RGBiOSDetermines shadow color. Shadow won't be applied if the view already has background.
      shadowOffsetnumberiOSDetermines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.
      shadowOpacitynumberiOSFrom 0 to 1. Determines the opacity level of the shadow.
      shadowRadiusnumberiOSDetermines the blurring effect in points of the shadow. The higher the more blurred.
      useShadowPathboolean => default: trueiOSDetermines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.
      rasterizeboolean => default: falseiOSDetermines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.
      \n

      AndroidData and IOSData

      \n

      As you might have noticed the main shadow attribute accepts object as argument. You'll be able to assign it in a property bind and it will override any possible separate attribute you might have defined:

      \n

      Component

      \n
      import { AndroidData, ShapeEnum } from \"nativescript-ngx-shadow\";
      // ...
      export class MyComponent {
        fabShadow: AndroidData = {
          elevation: 6,
          bgcolor: \"#ff1744\",
          shape: ShapeEnum.OVAL
        };
        // ...
      }
      \n

      In the template you can do:

      \n
      <Label [shadow]=\"fabShadow\" width=\"56\" height=\"56\"></Label>
      \n

      Pre-defined elevations

      \n

      If you want to be consistent with the Material Design specification but you're sick trying to memorize which elevation your view should have. We put together a list of pre-defined elevations:

      \n
        \n
      • SWITCH: 1
        • \n
      • CARD_RESTING: 2
        • \n
      • RAISED_BUTTON_RESTING: 2
        • \n
      • SEARCH_BAR_RESTING: 2
        • \n
      • REFRESH_INDICADOR: 3
        • \n
      • SEARCH_BAR_SCROLLED: 3
        • \n
      • APPBAR: 4
        • \n
      • FAB_RESTING: 6
        • \n
      • SNACKBAR: 6
        • \n
      • BOTTOM_NAVIGATION_BAR: 8
        • \n
      • MENU: 8
        • \n
      • CARD_PICKED_UP: 8,
        • \n
      • RAISED_BUTTON_PRESSED: 8
        • \n
      • SUBMENU_LEVEL1: 9
        • \n
      • SUBMENU_LEVEL2: 10
        • \n
      • SUBMENU_LEVEL3: 11
        • \n
      • SUBMENU_LEVEL4: 12
        • \n
      • SUBMENU_LEVEL5: 13
        • \n
      • FAB_PRESSED: 12
        • \n
      • NAV_DRAWER: 16
        • \n
      • RIGHT_DRAWER: 16
        • \n
      • MODAL_BOTTOM_SHEET: 16
        • \n
      • DIALOG: 24
        • \n
      • PICKER: 24
        • \n
      \n

      If you don't even want to check it out every time you have to shadow a view, just import the Elevation enum and enjoy :)

      \n

      Component

      \n
      import { Elevation } from \"nativescript-ngx-shadow\";
      class MyComponent {
        // ...
        ngOnInit(): init {
          this.mySnackBar.elevation = Elevation.SNACKBAR;
        }
        // ...
      }
      \n

      Notes about version 2+

      \n

      Here are the list of improvements on version 2.0:

      \n
        \n
      1. BugFix: Integer directive not rendering on iOS.
        2. \n
      2. Density independent pixels: Now you no longer have to worry about providing\nthe correct values for pixel related attributes based on the device's\nscreen density.\nSince iPhone 6S, each point correspond to 9 device pixels\n(3 horizontally x 3 vertically - that's the reason behind the @3x images -\nview more here).\nThe same happens to Android where the benchmark (mdpi) is considered ~160 pixels\n(or dots) per inch (dpi) and the majority of the modern devices having way\ndenser screens, reaching ~640dpi or more.\nFind out more here.
        3. \n
      3. New Android specific attribute called translationZ. The elevation attribute\nis the baseline of the virtual Z axis (3D axis), but according to the official\ndocumentation\nit's not the only part. Then, translationZ will add extra distance to the surface\nand it's mainly used for animations.
        4. \n
      4. 2.1.X Override Android default StateListAnimator as explained below:
        5. \n
      \n

      Override Android default StateListAnimator

      \n

      Android buttons are split into three categories:\nfloating, raised and flat. Different from labels and other ui elements,\neach button category has its own state animator.\nSo, when buttons are tapped, Android does affect their elevation\n(and z translation) in a way that Angular is not notified. At the end of tap animation, buttons get back to\nresting defaults (i.e. raised button's elevation at 2dp and translationZ at 0) overriding\nthe shadow stablished by this plugin.

      \n

      Since version 2.1.0, this plugin replaces the default StateListAnimator with one\nthat gets back to the values you provide for elevation and translationZ.

      \n

      Feel free to fill an issue if you want the flexibility of defining your own\nStateListAnimator. The motivation so far was simply put this plugin to work with\nbuttons without changing the original state once they are clicked.

      \n

      It's also possible to set this StateListAnimator to any View, making it behave like a button.

      \n

      Plugin Development Work Flow:

      \n
        \n
      • Clone repository to your machine.
        • \n
      • Run npm install to prepare the project
        • \n
      • Run and deploy to your device or emulator with npm run android or npm run ios
        • \n
      • Build a ngPackagr version with npm run build
        • \n
      \n

      Changelog

      \n
        \n
      • 6.0.0 Fork: Now packaged with ngPackagr for Angular 6 compatabilty
        • \n
      • 2.1.0 Decouple shadow logic / Override default StateListAnimator
        • \n
      • 2.0.1 Fix error on old Android devices (< Lollipop)
        • \n
      • 2.0.0 Density Independent Pixels / TranslationZ
        • \n
      • 1.1.3 Minor issues
        • \n
      • 1.1.2 Fix CI build
        • \n
      • 1.1.0 Support for iOS custom attributes
        • \n
      • 1.0.0 Initial implementation
        • \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-in-app-purchase":{"name":"nativescript-in-app-purchase","version":"2.1.0","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-base-64-manager":{"name":"nativescript-base-64-manager","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-nawah":{"name":"ns-nawah","version":"1.0.0","license":"Apache-2.0","readme":"

      ns-nawah

      \n

      This repo is the home of the source code of ns-nawah, Nawah SDK for Angular.

      \n

      Quick Start

      \n

      The current SDK has two dependencies:

      \n
        \n
      • jsrasgin
        • \n
      • nativescript-websockets\nThe dependencies should be automatically installed with the library.
        • \n
      \n

      Install ns-nawah for NativeScript

      \n
      tns plugin add ns-nawah
      \n

      How to Use

      \n
        \n
      1. Import NsNawahModule in your module imports.
        2. \n
      2. Initiate the SDK, in your component, using:
        3. \n
      \n
      import { Component, OnInit } from '@angular/core';

      import { NawahService, Res } from 'ns-nawah'

      @Component({
      \tselector: 'app-root',
      \ttemplateUrl: './app.component.html',
      \tstyleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {

      \tconstructor(private nawah: NawahService) {}

      \tngOnInit() {
      \t\tthis.nawah.init({
      \t\t\tapi: 'ws://localhost:8081/ws',
      \t\t\tanonToken: '__ANON_TOKEN_f00000000000000000000012',
      \t\t\tauthAttrs: ['email'],
      \t\t\tappId: 'APP_ID',
      \t\t});
      \t}
      }
      \n

      SDK Config

      \n

      When initialising the SDK, you should pass an object matching the interface SDKConfig, which has the following attributes:

      \n
        \n
      1. api (Required): The URI of Nawah app you are connecting to.
        2. \n
      2. anonToken (Required): Nawah app ANON_TOKEN.
        3. \n
      3. authAttrs (Required): Nawah apps don't have strict User module attrs structure. This includes the authentication attrs that are set per app. This attribute represents an Array<string> referring to the same authentication attrs of the app.
        4. \n
      4. debug (Optional): A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.
        5. \n
      5. fileChunkSize (Optional): A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to Nawah app. Default 512000.
        6. \n
      \n

      Best Practices

      \n

      You can use the SDK 100% per your style of development, however we have some tips:

      \n

      Session Reauth

      \n

      The best practice to handle a reauth scenario is by attempting to checkAuth as soon as the connection with Nawah app is made. This can be made by subscribing to inited$ subject which notifies subscriptions about any changes to SDK initialisation status reflected as inited attribute in the SDK. Which can be done like:

      \n
      this.nawah.inited$.subscribe((init: boolean) => {
      \tif (init) {
      \t\t// SDK is inited and ready for your calls:
      \t\ttry {
      \t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
      \t\t\tthis.nawah.checkAuth();
      \t\t} catch { }
      \t}
      }, (err: Res<Doc>) => {
      \tconsole.log('inited$.err', err);
      });
      \n

      Auth State Detection

      \n

      Although, you can detect the user auth state in the subscription of the calls auth, reauth and checkAuth, the best practice is to use the global authed$ state Subject. You can do this by subscripting to authed$ in the same component (usually AppComponent) you are initiating the SDK at. This assures a successful checkAuth as part of the api.init subscription can be handled. The model suggested is:

      \n
      this.nawah.authed$.subscribe((session: Doc) => {
      \tif (session) {
      \t\tconsole.log('We are having an `auth` condition with session:', session);
      \t} else {
      \t\tconsole.log('We just got unauthenticated');
      \t}
      });
      \n

      Reconnecting on Disconnects

      \n

      Websockets are always-alive connections. A lot can go wrong here resulting in the connection with your Nawah app. To make sure you can always get reconnected recall SDK init method upon SDK becoming not inited:

      \n
      import { Component, OnInit } from '@angular/core';

      import { NawahService, Res } from 'ns-nawah'

      @Component({
      \tselector: 'app-root',
      \ttemplateUrl: './app.component.html',
      \tstyleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {

      \tconstructor(private nawah: NawahService) {
      \t\tthis.nawah.inited$.subscribe((init: boolean) => {
      \t\t\tif (init) {
      \t\t\t\t// SDK is inited and ready for your calls:
      \t\t\t\ttry {
      \t\t\t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
      \t\t\t\t\tthis.nawah.checkAuth();
      \t\t\t\t} catch { }
      \t\t\t} else {
      \t\t\t\t// SDK just got not inited, let's init SDK again:
      \t\t\t\tthis.init();
      \t\t\t}
      \t\t}, (err: Res<Doc>) => {
      \t\t\tconsole.log('      inited$.err', err);
      \t\t});
      \t}

      \tngOnInit() {
      \t\tthis.init();
      \t}

      \tinit(): void {
      \t\tthis.nawah.init({
      \t\t\tapi: '      ws://localhost:8081/ws',
      \t\t\tanonToken: '      __ANON_TOKEN_f00000000000000000000012',
      \t\t\tauthAttrs: ['      email'],
      \t\t\tappId: '      APP_ID',
      \t\t});
      \t}
      }
      \n

      API Reference

      \n

      debug

      \n

      A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.

      \n

      fileChunkSize

      \n

      A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to Nawah app. Default 512000.

      \n

      session

      \n

      A Doc object representing the current session. It has value only when the user is authenticated.

      \n

      authed

      \n

      A Boolean storing the current state of user authentication.

      \n

      authed$

      \n

      A Subject<Boolean | Doc> you can subscribe to handle changes to state of user authentication.

      \n

      init()

      \n

      The base method to initiate a connection with Nawah app. This method returns an Observable for chain subscription if for any reason you need to read every message being received from the API, however subscribing to it is not required. Method definition:

      \n
      init(api: String, anonToken: String): Observable<Res<Doc>> { /*...*/ }
      \n

      close()

      \n

      The method to close current connection with Nawah app. This method returns an Observable for chain subscription if for any reason you need to read the resposne of the close call, however subscribing to it is not required. Method definition:

      \n
      close(): Observable<Res<Doc>> { /*...*/ }
      \n

      auth()

      \n

      The method you can use to authenticate the user. This method returns an Observable for chain subscription if for any reason you need to read the response of the auth call, however subscribing to it is not required. Method definition:

      \n
      auth(authVar: string, authVal: string, password: string): Observable<Res<Doc>> { /*...*/ }
      \n

      reauth()

      \n

      The method you can use to reauthenticate the user. The method would fail if no sid and token attrs are cached from earlier successful authentication call. This method is not supposed to be called directly, rather use checkAuth(). This method returns an Observable for chain subscription if for any reason you need the response of the reauth call, however subscribing to it is not required. Method definition:

      \n
      reauth(sid: string = this.cache.get('sid'), token: string = this.cache.get('token')): Observable<Res<Doc>> { /*...*/ }
      \n

      signout()

      \n

      The method you can use to signout the current user. Upon success, this methods removes all the cached attrs of the session. This method returns an Observable for chain subscription if for any reason you need the response of the signout call, however subscribing to it is not required. Method definition:

      \n
      signout(): Observable<Res<Doc>> { /*...*/ }
      \n

      checkAuth()

      \n

      The method to check whether there is a cached session and attempt to reauthenticate the user. This method would throw an error if no credentials are cached, thus you need to always wrap it in try..catch. This method returns an Observable for chain subscription if for any reason you need the response of the checkAuth call, however subscribing to it is not required. Method definition:

      \n
      checkAuth(): Observable<Res<Doc>> { /*...*/ }
      \n

      generateAuthHash()

      \n

      The method to use to generate authentication hashes. This is used internally for the auth() call. However, you also need this to generate the values when creating a user. Method definition:

      \n
      generateAuthHash(authVar: string, authVal: string, password: string): string { /*...*/ }
      \n

      deleteWatch()

      \n

      The method to delete a watch in progress. You can pass the watch ID you want to delete or __all to delete all watches. This method returns an Observable for chain subscription if for any reason you need the response of the deleteWatch call, however subscribing to it is not required. Method definition:

      \n
      deleteWatch(watch: string | '__all'): Observable<Res<Doc>> { /*...*/ }
      \n

      call()

      \n

      The most important method in the SDK. This is the method you use to call different endpoints in your Nawah app. Although the callArgs object in the params is having full definition of all call attrs, you still usually only need to pass either query and/or doc in most of the cases. Third param awaitAuth specify wheter the call should be queued until session is authed. Method definition:

      \n
      call(endpoint: string, callArgs: callArgs, awaitAuth: boolean = false): Observable<Res<Doc>> { /*...*/ }
      \n

      Contribution Guidelines

      \n

      Thank you for your interest in ns-nawah.

      \n

      Please refer to Contribution Guidelines for more details on contributing to this project.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-imagecropper-ios":{"name":"nativescript-imagecropper-ios","version":"1.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@flypapertech/nativescript-snackbar":{"name":"@flypapertech/nativescript-snackbar","version":"4.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zip2":{"name":"nativescript-zip2","version":"1.3.5","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@danieldent/nativescript-camera":{"name":"@danieldent/nativescript-camera","version":"4.2.0-2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-jpush":{"name":"nativescript-android-jpush","version":"1.0.0","license":"ISC","readme":"

      nativescript-android-jpush

      \n

      极光推送NS插件，android版

      \n

      License

      \n

      MIT@yilei

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mashdog/nativescript-photoviewer":{"name":"@mashdog/nativescript-photoviewer","version":"3.1.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@qlip/nativescript-checkbox":{"name":"@qlip/nativescript-checkbox","version":"1.0.2","license":"Apache-2.0","readme":"

      Nativescript checkbox

      \n
      ns plugin add @qlip/nativescript-checkbox
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-cache-opada":{"name":"nativescript-image-cache-opada","version":"1.0.3","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radio":{"name":"nativescript-radio","version":"0.3.6","license":"Apache-2.0","readme":"

      NativeScript Radio Button Plugin

      \n

      Plugin for using the native Android RadioGroup and RadioButton widgets.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-radio
      \n

      Supported platforms

      \n

      Android only.

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-betterwebsockets":{"name":"nativescript-betterwebsockets","version":"1.0.0","license":"MIT & Apache 2.0","readme":"

      BetterWebsockets for Nativescript

      \n

      Java WebSockets Library implementation for Nativescript. Allows you to create a WebSocket Client and Server on Android.

      \n

      \"PayPal \"Bitcoin

      \n

      Requirements

      \n

      This plugin works on Android only!

      \n

      Installation

      \n

      To install this plugin:

      \n
      tns plugin add nativescript-betterwebsockets
      \n

      Usage

      \n
      import { WebSocketClient, WebSocketServer } from 'nativescript-betterwebsockets';
      \n

      WebSocketClient:

      \n
      /** Inside your page component **/
      let url = 'wss://echo.websocket.org';
      this.client = new WebSocketClient(url);
      // Open Event
      this.client.on('open', function(handshake){
      \tconsole.log('Opened!');
      \tthis.main(); // Do everything else here
      });
      // Message Event
      this.client.on('message', function(message){ 
      \tconsole.log('New message: ' + message);
      });
      // Close Event
      this.client.on('close', function(code, reason, remote){
      \tconsole.log('Closed!');
      });
      // Error Event
      this.client.on('error', function(ex){
      \tconsole.log('Error!');
      });
      // Connect (Do after setting the events!).
      this.client.connect();
      \n
      // This will be executed after the open event.
      main() {
      \tthis.client.send('Hey!');
      \tthis.client.close(); // Close the client :(
      }
      \n

      WebSocketServer:

      \n
      let port = 3000;
      this.server  =  new  WebSocketServer(port);
      // Start Event (Server Started successfully)
      this.server.on('start', () => {
      \tconsole.log('Server listening on *:'  +  port);
      });
      // Open Event (Someone connects)
      this.server.on('open', (conn, handshake) => {
      \tconsole.log('New Conenction!');
      \tconn.send('You are connected!'); // Send message to socket
      });
      // Message Event
      this.server.on('message', (conn, message) => {
      \tconsole.log('New message: ' + message);
      });
      // Close event
      this.server.on('close', (conn, code, reason, remote) => {
      \tconsole.log('Someone left!');
      });
      // Error event
      this.server.on('error', (conn, ex) => {
      \tconsole.log('Error!');
      });
      // Starts the server
      this.server.start();
      \n

      License

      \n

      MIT License - see LICENSE for more details.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@enduco/nativescript-app-review":{"name":"@enduco/nativescript-app-review","version":"1.0.1","license":"Apache-2.0","readme":"

      @enduco/app-review

      \n
      ns plugin add @enduco/nativescript-app-review
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@radworks/nativescript-multi-select":{"name":"@radworks/nativescript-multi-select","version":"1.0.4","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photoviewer-ns7":{"name":"nativescript-photoviewer-ns7","version":"3.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-photoviewer-s":{"name":"nativescript-photoviewer-s","version":"3.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@knotes/nativescript-camera-plus":{"name":"@knotes/nativescript-camera-plus","version":"4.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alexbald/nativescript-intl":{"name":"@alexbald/nativescript-intl","version":"4.0.2","readme":"

      Welcome to the nativescript-intl plugin for NativeScript framework

      \n

      Prerequisites

      \n\n

      Install nativescript-intl plugin.

      \n

      Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-intl.

      \n

      This plugin provides similar to Intl.js API for date, time and number formatting on a mobile device (Android and iOS).

      \n

      How to use

      \n
      var intl = require(\"nativescript-intl\");
      var dateFormat = new intl.DateTimeFormat('en-US', {'year': 'numeric', 'month': 'short', 'day': 'numeric'}).format(new Date(2016, 2, 23));
      var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}).format(123456.789);

      console.log(\"dateFormat: \" + dateFormat);
      console.log(\"numberFormat: \" + numberFormat);
      // prints Mar 23, 2016
      // $123456.79
      \n

      Since localization formatting is not exactly same on Android, iOS and Intl.js there is another option to use this API.

      \n

      Custom pattern

      \n
      var intl = require(\"nativescript-intl\");
      var dateFormat = new intl.DateTimeFormat(null, null, 'y MMMM d, EEEE HH:mm:ss').format(new Date(2016, 2, 23, 12, 35, 40));
      var numberFormat = new intl.NumberFormat('en-US', {'style': 'currency', 'currency': 'USD', 'currencyDisplay': 'symbol'}, '#,##0.00 ¤').format(123456.789);

      console.log(\"dateFormat: \" + dateFormat);
      console.log(\"numberFormat: \" + numberFormat);
      // prints 2016 March 23, Wednesday 2016 12:35:40
      // 123,456.79 $
      \n
      \n

      Omitting locale will use the current locale setting on device.

      \n
      \n
      \n

      Keep in mind that ICU versions differ accross device OS versions, so this plugin could produce different results on a different API level (Android) and OS version (iOS).

      \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-settings":{"name":"nativescript-app-settings","version":"1.0.0","readme":"

      App settings

      \n

      App settings is a nativescript plugin it allow user to open setting in Android and Ios .

      \n

      Installation

      \n
      tns plugin add nativescript-app-settings
      \n

      Usage

      \n
      const wifiSettings = require(\"nativescript-app-settings\");
      // open general settings
      wifiSettings.openGeneralSettingsOnDevice();

      // open wifi settings
      wifiSettings.openWifiSettingsOnDevice();

      // open bluetooth settings
      wifiSettings.openBluetoothSettingsOnDevice();
      \n

      Contributing

      \n

      Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-meteor-client":{"name":"nativescript-meteor-client","version":"0.0.6","license":"MIT","readme":"

      Meteor integration in NativeScript using nativescript-websockets

      \n
      $ tns plugin add nativescript-meteor-client
      \n

      To init your Meteor connection and classes add this snippet just after the platformNativeScriptDynamic import:

      \n
      import {platformNativeScriptDynamic} from \"nativescript-angular/platform\";

      require('nativescript-meteor-client')({
          url: 'http://127.0.0.1:3000',
          debug: true,
          timeout: 5000
      }, require('nativescript-websockets'));

      ...
      \n

      debug and timeout are optional.

      \n

      An example application can be fount at nativescript-ng-drawer-seed.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@qlip/nativescript-badge":{"name":"@qlip/nativescript-badge","version":"1.0.2","license":"Apache-2.0","readme":"

      Nativescript badge

      \n
      ns plugin add @qlip/nativescript-badge
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-local-notifications-ios":{"name":"nativescript-local-notifications-ios","version":"1.0.34","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/compiler":{"name":"@nativescript-vue/compiler","version":"3.0.0-dev.4","license":"MIT","readme":"

      @nativescript-vue/compiler

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fabric-cp":{"name":"nativescript-fabric-cp","version":"2.0.3","license":"MIT","readme":"

      NativeScript Fabric Plugin \"apple\" \"android\"

      \n

      \"Greenkeeper\n\"Build\n\"Donate

      \n

      \"npm\n\"Maintainability\"

      \n

      \"NPM\"

      \n

      \n
      \n

      Feel free to donate

      \n\n\"\"\n\nOr donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D\n

      \"Bitcoin\"

      \n

      Also via greenaddress

      \n
      \n

      Usage

      \n

      Installation

      \n

      Go to Crashlytics and pick of the needed API-Key and API-Secret:

      \n

      \"\"

      \n

      Create a file fabric.json in the project root folder and add the API-Key and API-Secret:

      \n
      {
          \"using_ios\": true,
          \"using_android\": true,
          \"api_key\": \"...\",
          \"api_secret\": \"...\"
      }
      \n
      $ tns plugin add nativescript-fabric
      \n

      Or if you want to use the development version (nightly build), which maybe not stable!:

      \n
      $ tns plugin add nativescript-fabric@next
      \n

      Android

      \n

      Add the API-Key to your AndroidManifest.xml:

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>
      <manifest xmlns:android=\"http://schemas.android.com/apk/res/android\" package=\"__PACKAGE__\" android:versionCode=\"385\" android:versionName=\"1.0.14\">
       ....
        <application android:name=\"com.tns.NativeScriptApplication\" android:allowBackup=\"true\" android:icon=\"@drawable/icon\" android:label=\"@string/app_name\" android:theme=\"@style/AppTheme\">
          ...
          <meta-data android:name=\"io.fabric.ApiKey\" android:value=\"**<API-KEY>**\"/>
        </application>
      </manifest>
      \n

      iOS

      \n

      No further confiugration needed

      \n

      Additional information

      \n

      Android

      \n

      For more details see fabric.io/kits/android/crashlytics.

      \n

      iOS

      \n

      For more details see fabric.io/kits/ios/crashlytics.

      \n

      API

      \n

      Init the plugin in your app (for angular apps use main.ts):

      \n
      import { Fabric } from 'nativescript-fabric';
      Fabric.init();
      \n

      Afterwards you can use the instance methods for logging (general error logging is already added):

      \n
        \n
      • Fabric.logSignUp(method: string, success: boolean);
        • \n
      • Fabric.logLogin(method: string, success: boolean);
        • \n
      • Fabric.logContentView(id: string, name: string, type: string)
        • \n
      • Fabric.logCustomEvent(withName: string, customAttributes: Map<String, String>)
        • \n
      • Fabric.logError(error: any, msg?: string)
        • \n
      \n

      Angular

      \n
      import { FabricModule } from 'nativescript-fabric/angular';

      NgModule({
        ...
        imports: [
          FabricModule.forRoot()
        ],
      \n

      Known Issues

      \n

      com.android.ide.common.process.ProcessException

      \n
      FAILURE: Build failed with an exception.

      * What went wrong:
      Execution failed for task ':app:transformClassesWithDexForF0F1F2F3F4F5Debug'.
      > com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: Cannot merge new index 69013 into a non-jumbo instruction!nto a non-jumbo instruction!
      \n

      set the following in your app.gradle:

      \n
      android {
          ...
          dexOptions {
              jumboMode true
          }

      }
      \n

      XML Parsing error

      \n
      Error:/app/build/intermediates/res/merged/debug/values/com_crashlytics_build_id.xml uncompiled XML file passed as argument. Must be compiled first into .flat file.
      \n

      Try adding:

      \n
      android.enableAapt2 = false
      \n

      to your gradle.properties file.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-angular":{"name":"@progress/jsdo-angular","version":"6.0.0","license":"Apache-2.0","readme":"

      Progress Data Source for Angular

      \n

      The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript and Angular".

      \n

      Documentation

      \n

      Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

      \n

      The Data Source can be used by apps built using NativeScript, Angular and Node.

      \n

      License

      \n

      Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

      \n

      http://www.apache.org/licenses/LICENSE-2.0

      \n

      Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rob4226/nstudio-nativescript-snackbar":{"name":"@rob4226/nstudio-nativescript-snackbar","version":"2.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bytpher/tslint-ns-angular":{"name":"@bytpher/tslint-ns-angular","version":"1.0.0","license":"MIT","readme":"

      TSLint NativeScript Angular

      \n

      Recommended tslint configuration for NativeScript Angular applications.

      \n

      Requirements

      \n

      This package works with prettier for an quick and easy code format

      \n
      npm i -D prettier prettier-tslint pretty-quick
      \n

      Packages:

      \n
        \n
      • prettier: Prettier is an opinionated code formatter
        • \n
      • prettier-tslint: Formats your TypeScript using prettier followed by `tslint --fix``
        • \n
      • pretty-quick: Runs Prettier on your changed files.
        • \n
      \n

      Installation

      \n
      npm i -D @bytpher/tslint-ns-angular
      \n

      Usage

      \n
      {
        \"extends\": [\"@bytpher/tslint-ns-angular\"]
      }
      \n

      Pre-Commit Hook

      \n

      You can use husky to configure a pre-commit hook to run pretty-quick

      \n
      npm i -D husky
      \n

      Create a .huskyrc.json in the root of yor project and add the following configuration

      \n
      {
        \"hooks\": {
          \"pre-commit\": \"pretty-quick --staged\"
        }
      }
      \n

      This configuration will run pretty-quick before each commit and formatting the staged files allowing us a seamless code format between all developers working in the project

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-opencv":{"name":"nativescript-opencv","version":"0.0.6","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bluetooth":{"name":"nativescript-bluetooth","version":"3.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"draggie-nativescript-loading-indicator":{"name":"draggie-nativescript-loading-indicator","version":"1.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-foaas":{"name":"nativescript-foaas","version":"1.0.5","readme":"

      NativeScript (FOAAS)

      \n

      Nativescript wrapper for FOAAS. You can now FO with Promises!

      \n

      What is Foaas?

      \n

      Methods

      \n
        \n
      • off(name, from);
        • \n
      • you(name, from);
        • \n
      • this(from);
        • \n
      • that(from);
        • \n
      • everything(from);
        • \n
      • everyone(from);
        • \n
      • donut(name, from);
        • \n
      • shakespeare(name, from);
        • \n
      • linus(name, from);
        • \n
      • king(name, from);
        • \n
      • pink(from);
        • \n
      • life(from);
        • \n
      • outside(name, from);
        • \n
      • thing(thing, from);
        • \n
      • thanks(from);
        • \n
      • flying(from);
        • \n
      • fascinating(from);
        • \n
      • madison(name, from);
        • \n
      • cool(from); alias coolstorybro
        • \n
      • field(name, from, reference);
        • \n
      • nugget(name, from);
        • \n
      • yoda(name, from);
        • \n
      • ballmer(name, company, from);
        • \n
      • what(from);
        • \n
      • because(from);
        • \n
      • caniuse(tool, from);
        • \n
      • bye(from);
        • \n
      • bus(name, from);
        • \n
      • bday(name, from);
        • \n
      • awesome(from);
        • \n
      • tucker(from); alias comein
        • \n
      • bucket(from);
        • \n
      • family(from);
        • \n
      • shutup(name, from);
        • \n
      • keepcalm(reaction, from);
        • \n
      • dosomething(blank, theThing, from);
        • \n
      \n

      Usage

      \n

      All methods return Promises

      \n
      var foaas = require(\"nativescript-foaas\");
      //Promise return
      /*args: {
          message: \"Cool story, bro.\",
          subtitle: \"- nativescript\",
          combined: \"Cool story, bro. - nativescript\"   
      }
      */

      //Simple
      foaas.coolstorybro(\"nativescript\").then(function(args){
          alert(args.combined);
      });

      //Nested Chain
      foaas.coolstorybro(\"nativescript\").then(function(args){
          //Alert Message
          alert(args.message).then(function(){
              //Call the next once it's closed
              foaas.bye(\"nativescript\").then(function(args){
                  alert(args.combined); 
              });        
          });
      });
      \n

      Notes

      \n

      Left out a few of the very offensive ones...

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-signalr-core":{"name":"nativescript-signalr-core","version":"2.0.0","license":"Apache-2.0","readme":"

      Nativescript Signalr Core

      \n

      Plugin for signalr core in NativeScript\nAll my code is LICENSED under the MIT License

      \n

      Requirements

      \n

      This plugin dependent on NativeScript WebSockets plugin\nthanks for nathan@master-technology.com\nnativescript-websockets

      \n

      Installation

      \n
      tns plugin add nativescript-websockets
      npm install nativescript-signalr-core --save
      \n

      Android

      \n
      AndroidManifest.xml
      \n
      <uses-permission android:name=\"android.permission.INTERNET\"/>
      <application android:usesCleartextTraffic=\"true\">
      \n

      How To use nativescript signalr core ?

      \n
      main.tns.ts
      \n
          declare var require;
          var WebSocket = require('nativescript-websockets');
      \n
      Home.component.ts
      \n

      In NativeScript + Angular 7

      \n

      import {Component, OnInit, NgZone, ChangeDetectorRef} from '@angular/core';
      import { SignalrCore } from 'nativescript-signalr-core/angular';

      @Component({
          selector: 'app-home',
          templateUrl: './home.component.html',
          styleUrls: ['./home.component.scss'],
      })
      export class HomeComponent implements OnInit {
            header: SignalRCoreRHeaders;

          constructor(private zone: NgZone, private cd: ChangeDetectorRef) {
              this.signalrCore = new SignalrCore();
              this.header = new SignalRCoreRHeaders('Authorization', 'myToken');    //(this.header Optional)
              this.signalrCore.on('connected', (data) => {
                   console.log('connected');
              });

          }
          connectToServer() {
              this.signalrCore.start('http://server.com/ChatHub', this.header).then((isConnected: boolean) => {
                  console.log('isConnected? ', isConnected);
              });
          }

          invoke() {
              this.signalrCore.invoke('initializeDeviceAsync', '');
          }

          stop() {
              this.signalrCore.close().then((res) => {
                  console.log('closed...', res);
              });
          }
      \n

      API

      \n
      .start(url: string, header?: SignalRCoreRHeaders): Promise
      \n
      .on(event: string, data: any) : args
      \n
      .close()
      \n
      .invoke(...args): (data, date)
      \n
      .getStatus$(): observable<{id: number, name: string}>
      \n
      .getStatus(): string<{id: number, name: string}>
      \n
      SignalRCoreRHeaders = { key: string, value: string }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-tabview":{"name":"nativescript-ngx-tabview","version":"1.0.1","license":"MIT","readme":"

      Nativescript-Ngx-TabView

      \n

      A Nativescript Angular UI Control for rendering a tabbed view with multiple\nconfigurable options

      \n

      Setup

      \n

      npm install nativescript-ngx-tabview --save

      \n

      Import the module into your app-module

      \n
      import { TabViewModule } from 'nativescript-ngx-tabview';
      \n

      Getting Started

      \n

      Define the TabView template as shown in the example below

      \n
      <TabView (tabChange)=\"watchTabChange($event)\">
        <TabStrip position=\"left\" overlay justifyContent=\"space-between\">
          <TabLabel>
            <!-- Define the Tab Label here -->
          </TabLabel>
          <TabLabel>
            <!-- Define the Tab Label here -->
          </TabLabel>
          <TabLabel>
            <!-- Define the Tab Label here -->
          </TabLabel>
        </TabStrip>
        <TabGroup>
          <Tab>
            <!-- Insert Tab Content here -->
          </Tab>
          <Tab>
            <!-- Insert Tab Content here -->
          </Tab>
          <Tab>
            <!-- Insert Tab Content here -->
          </Tab>
        </TabGroup>
      </TabView>
      \n

      Configuration

      \n

      The TabStrip allows for two main configuration settings:

      \n
        \n
      • position [top/left/bottom/right]
        • \n
      • overlay
        • \n
      \n

      The overlay setting will overlay the tab strip on the Tab View, by default the Tab Strip and\nTab Content would appear in separate rows.

      \n

      The tabChange() event will emit the index on Tab Switch

      \n
      \n

      The TabStrip is a FlexboxLayout so all related styles can be applied

      \n
      \n

      Examples

      \n

      Provided in the demo app

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"symlink-resolver":{"name":"symlink-resolver","version":"0.2.1","license":"MIT","readme":"

      Symlink Resolver

      \n

      This tool allows to replace symbolic links by real files in given directory and revert the changes back to symlinks. All the magic in a simple cli command!

      \n

      Installation

      \n
      npm install symlink-resolver --save-dev
      \n

      Node.js v6.4+ and POSIX-standarized operating system are required.

      \n

      To your package.json scripts section add the following rule:

      \n
      \"scripts\": {
          \"symlink-resolver\": \"symlink-resolver\",
      }
      \n

      Basic Usage

      \n

      For fast usage you can simply run:

      \n
        \n
      • npm run symlink-resolver build ./symlinks/path to replace symlinks by real files in ./symlinks/path
        • \n
      • npm run symlink-resolver clear ./symlinks/path to restore all symlinks
        • \n
      \n

      First command will create ./symlinks/path/.symlinks.json file which contains changes that have been made in this directory. It will be removed by the second command, however you can still add to your .gitignore the following rule: .symlinks.json

      \n
      How to create a symlink?
      \n

      Use ln -s target source command, i.e.:

      \n
      ln -s ../../source/path/linked-dir ./project/src/linked-dir
      \n

      Advanced usage

      \n

      If you need this feature to make a build, then I strongly recommend to automatize your building process:

      \n
      \"scripts\": {
              \"symlink-resolver\": \"symlink-resolver\",
              \"prebuild\": \"npm run symlink-resolver build ./symlinks/path\",
              \"postbuild\": \"npm run symlink-resolver clear ./symlinks/path\",
              \"build\": \"your build command should be under this name\"
      }
      \n

      This way you will be able to make a build and edit your files without worries.

      \n

      However, in some cases like emulating a device, the "post" script will not be executed. If this is also your case then take a look at example workaround for NativeScript:

      \n
        \"scripts\": {
          \"symlink-resolver\": \"symlink-resolver\",
          \"prens-bundle\": \"npm run symlink-resolver build ./symlinks/path\",
          \"delay-clear\": \"sleep 22 && npm run symlink-resolver clear ./symlinks/path\",
          \"ns-bundle\": \"npm run delay-clear | ns-bundle\",
          \"start-android-bundle\": \"npm run ns-bundle --android --start-app\",
          \"start-ios-bundle\": \"npm run ns-bundle --ios --start-app\",
          \"build-android-bundle\": \"npm run ns-bundle --android --build-app\",
          \"build-ios-bundle\": \"npm run ns-bundle --ios --build-app\"
        },
      \n

      Advanced configuration

      \n

      You can adjust Config to your needs.

      \n
        \n
      • Want to use custom symlinks file name? No problem, just set Config.symlinksFile to whatever you want.
        • \n
      • Need some custom behavior? Simply extend SymlinkHelper class and set Config.helperClass to yours.
        • \n
      \n
      export interface ConfigInterface {
          rootDir: string;
          symlinksFile: string;
          helperClass: typeof SymlinkHelper;
      }
      \n
      Happy developing!
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/sdk-jumio-ns":{"name":"@global66/sdk-jumio-ns","version":"0.2.7","license":"Apache-2.0","readme":"

      NativeScript Jumio

      \n

      Jumio Mobile SDK plugin for NativeScript.

      \n

      This plugin is compatible only with NativeScript 7.1+. Please file an issue or make a PR if you spot any problems or you have any further requests regarding the functionality.

      \n

      Currently only ID verification is implemented. Please check Usage or demo/ directory for more details.

      \n

      Prerequisites / Requirements

      \n

      Nativescript 7.1+ is required for the plugin to run properly.

      \n

      Installation

      \n
      tns plugin add @global66/sdk-jumio-ns

      or

      npm install @global66/sdk-jumio-ns
      \n

      Usage

      \n

      @global66/sdk-jumio-ns

      \n

      Make sure to include this activity inside the consumer's Android Manifest:

      \n
      <activity
          android:theme=\"@style/Theme.Netverify\"
          android:hardwareAccelerated=\"true\"
          android:name=\"com.jumio.nv.NetverifyActivity\"
          android:configChanges=\"orientation|screenSize|screenLayout|keyboardHidden\" />
      \n

      Ensure that Kotlin version is set to 1.4.30 inside gradle.properties file

      \n

      kotlinVersion=1.4.30

      \n
      import { Jumio } from '@global66/sdk-jumio-ns';

      try {
          const jumio = new Jumio({
              merchantApiToken: 'YOUR_API_TOKEN',
              merchantApiSecret: 'YOUR_API_SECRET',
              datacenter: 'EU | US | SG',
          });

          jumio.init({
              customerId: 'customerId',
              callbackUrl: 'Custom callback URL',
              preSelectedData: {
                  country: 'Alpha2 Country Code',
                  documentType: 'passport | identity_card | driver_license | visa',
              },
              cancelWithError: (error) => {
                  // User cancelled after error
              },
              finishInitWithError: (error) => {
                  // Finished initialization with an error
              },
              finishedScan: (documentData, scanReference) => {
                  // Scan is successful
              },
          });
      } catch (err) {
          console.log(\"EXCEPTION\", err)
      }
      \n

      API

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeRequiredDefaultDescription
      merchantApiTokenstringyesAPI token
      merchantApiSecretstringyesAPI secret
      datacenterstringyesData Center to use
      customerIdstringyesCustomer ID
      callbackUrlstringNoCustom Callback URL
      preSelectedDataObjectNonullPre-selected country as alpha2 code and document type
      cancelWithErrorfunctCallback triggered when User cancels. It accepts error object with code and message.
      finishInitWithErrorfunctCallback triggered when initialization fails. It accepts error object with code and message.
      finishedScanfunctCallback triggered when scan is finished. It contains an extended Document Data with all necessary information about processing results.
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codesthings/nativescript-google-maps-sdk":{"name":"@codesthings/nativescript-google-maps-sdk","version":"3.2.4","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-screenshot":{"name":"nativescript-screenshot","version":"0.0.2","license":"Apache-2.0","readme":"

      NativeScript Screenshot

      \n

      This is a plugin for iOS and Android that allows you to get NativeScript view as image.

      \n

      Installation

      \n

      tns plugin add nativescript-screenshot

      \n

      Usage

      \n

      \n
      <Page>
         <StackLayout loaded=\"stackLoaded\">
           <Button text=\"Test\" tap=\"buttonTap\" />
         </StackLayout>
      </Page>
      \n
      var image = require(\"ui/image\");
      var plugin = require(\"nativescript-screenshot\");

      var stackLayout;
      exports.stackLoaded = function(args){
        stackLayout = args.object
      }

      exports.buttonTap = function(args){
        var img = new image.Image();
        img.imageSource = plugin.getImage(args.object);
        stackLayout.addChild(img);
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appupdater":{"name":"nativescript-appupdater","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nswitfy/stomp-connector":{"name":"@nswitfy/stomp-connector","version":"8.0.0-beta","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank":{"name":"tns-template-blank","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Core Blank Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-blank-js --template tns-template-blank
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-blank).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-blank-js --template nativescript-app-templates/packages/template-blank
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root module:

      \n
        \n
      • /app/app-root - sets up a Frame that lets you navigate between pages.
        • \n
      \n

      There is a single blank page module that sets up an empty layout:

      \n
        \n
      • /app/home/home-page
        • \n
      \n

      Home page has the following components:

      \n
        \n
      • ActionBar - It holds the title of the page.
        • \n
      • GridLayout - The main page layout that should contains all the page content.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kde-audioplayer-tk":{"name":"nativescript-kde-audioplayer-tk","version":"1.0.3","license":"LGPL-3.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mdc":{"name":"nativescript-mdc","version":"0.5.0","license":"Apache-2.0","readme":"

      nativescript-mdc

      \n

      NativeScript-MDC provides Material Design Components using the official MDC libraries for iOS and Android.

      \n

      Currently only the following components have been implemented:

      \n
        \n
      • Activity Indicator
        • \n
      • Bottom App Bar
        • \n
      • Bottom Navigation
        • \n
      • Bottom Sheet
        • \n
      • Button
        • \n
      • Card View
        • \n
      • Dialogs
        • \n
      • Floating Action Button
        • \n
      • Progress
        • \n
      • Ripple
        • \n
      • Slider
        • \n
      • Snack Bar
        • \n
      • Text Field
        • \n
      \n

      Thanks to the following plugins for providing a reference when building this plugin:\nnativescript-bottom-navigation\nnativescript-cardview\nnativescript-floatingactionbutton\nnativescript-material-components

      \n

      (Optional) Prerequisites / Requirements

      \n

      You need NativeScript version ^6.0.0 to be able to use this plugin.

      \n

      Installation

      \n
      tns plugin add nativescript-mdc
      \n

      Usage

      \n

      Usage is per component.\nTo give an overview of how to use the components below is a very minimal example of the Bottom Navigation.

      \n

      XML

      \n

      You can set the tabs using the tabs property

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
            xmlns:mdc=\"nativescript-mdc\"
            loaded=\"pageLoaded\"
            class=\"page\">
          <GridLayout columns=\"*\" rows=\"*, auto\">
              <StackLayout row=\"0\">
                  <Label text=\"content\"></Label>
              </StackLayout>
              <mdc:BottomNavigation
                  tabs=\"{{ tabs }}\"
                  activeColor=\"blue\"
                  inactiveColor=\"red\"
                  loaded=\"bottomNavigationLoaded\"
                  titleVisibility=\"always\"
                  row=\"1\">
              </mdc:BottomNavigation>
          </GridLayout>
      </Page>
      \n
      import * as observable from 'tns-core-modules/data/observable';
      import * as pages from 'tns-core-modules/ui/page';
      import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from \"nativescript-mdc\";

      // Event handler for Page 'loaded' event attached in main-page.xml
      export function pageLoaded(args: observable.EventData) {
          // Get the event sender
          let page = <pages.Page>args.object;
          page.bindingContext = {
              tabs: [
                  new BottomNavigationTab('First', 'ic_home'),
                  new BottomNavigationTab('Second', 'ic_view_list', null, false),
                  new BottomNavigationTab('Third', 'ic_menu'),
                  new BottomNavigationTab('Forth', 'ic_view_list', 'ic_menu')
              ]
          };
      }

      export function bottomNavigationLoaded(args) {
          let bottomNavigation: BottomNavigation = args.object;
          // For some reason the tabSelected event doesn't work if you
          // handle it from the view, so you need to handle the event in this way.
          bottomNavigation.on('tabSelected', tabSelected);
      }

      export function tabSelected(args: OnTabSelectedEventData) {
          console.log('tab selected ' + args.newIndex);
      }
      \n

      Angular

      \n

      First you need to include the NativeScriptMDCModule in your app.module.ts

      \n
      import { NativeScriptMDCModule} from \"nativescript-mdc/angular\";

      @NgModule({
          imports: [
              NativeScriptMDCModule
          ],
          ...
      })
      \n

      You can declare the BottomNavigationTabs in your html directly

      \n
      <GridLayout rows=\"*, auto\">
          <StackLayout row=\"0\">
             <Label text=\"content\"></Label>
          </StackLayout>
          <BottomNavigation
              activeColor=\"red\"
              inactiveColor=\"yellow\"
              (tabSelected)=\"onBottomNavigationTabSelected($event)\"
              titleVisibility=\"always\"
              row=\"1\">
              <BottomNavigationTab title=\"First\" icon=\"ic_home\"></BottomNavigationTab>
              <BottomNavigationTab title=\"Second\" icon=\"ic_view_list\" selectable=\"false\"></BottomNavigationTab>
              <BottomNavigationTab title=\"Third\" icon=\"ic_menu\"></BottomNavigationTab>
              <BottomNavigationTab title=\"Forth\" icon=\"ic_view_list\" selectedIcon=\"ic_menu\"></BottomNavigationTab>
          </BottomNavigation>
      </GridLayout>
      \n
      import { Component, OnInit } from '@angular/core';
      import { OnTabSelectedEventData } from 'nativescript-mdc';

      @Component(
        {
          selector: 'ns-app',
          moduleId: module.id,
          templateUrl: './app.component.html',
        }
      )
      export class AppComponent {
        onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
          console.log(`Tab selected:  ${args.newIndex}`);
        }
      }
      \n

      API

      \n

      TODO\nDescribe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-core":{"name":"@progress/jsdo-core","version":"6.0.1","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@planbook/nativescript-modal-datetimepicker":{"name":"@planbook/nativescript-modal-datetimepicker","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-mason":{"name":"nativescript-ngx-mason","version":"1.0.0","license":"MIT","readme":"

      Welcome to nativescript-ngx-mason 👋

      \n

      \n \"Version\"\n \n \"License:\n \n

      \n
      \n

      NativeScript Angular Layout Engine for scaffolding your mobile App along with a bunch of additional components that serve as building blocks for the UI

      \n
      \n

      ✨ [Demo](Demo included in the Project)

      \n

      Install

      \n
      npm install nativesript-ngx-mason
      \n

      Getting Started

      \n

      Author

      \n

      👤 TheMountHead

      \n\n

      Show your support

      \n

      Give a ⭐️ if this project helped you!

      \n
      \n

      This README was generated with ❤️ by readme-md-generator

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@rachnerd/test-plugin":{"name":"@rachnerd/test-plugin","version":"0.0.3","license":"MIT","readme":"

      NativeScript tests hook

      \n

      Workaround for running unit tests located in source code (according to Angular style guide)

      \n

      Currently NativeScript runs spec files located in app/tests. This hook copies all source code (in app) to\na .tmp folder inside app/tests, so NativeScript can run unit tests that follow the Angular style guide.

      \n

      Example

      \n
      app
      |-- feature
           |- feature.component.html
           |- feature.component.ts
           |- feature.component.spec.ts
      \n

      Installation

      \n

      Npm

      \n
      npm install nativescript-tests-hook --save-dev
      \n

      Usage

      \n

      Unfortunately the test runner fetches the files before the hook is finished.\nTo get around this you'll have to prepare before executing the test command.

      \n
      tns prepare [platform] && tns test [platform]
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@groupsosimple/nativescript-image-generator":{"name":"@groupsosimple/nativescript-image-generator","version":"1.0.1","license":"Apache-2.0","readme":"

      @groupsosimple/nativescript-image-generator

      \n
      ns plugin add @groupsosimple/nativescript-image-generator
      \n

      This is a direct fork of nativescript-images-generator-hook.\nIt solves the issue that the build crashes when 'platforms' folder doesn't exist on 'tns run' and updates the dependencies.

      \n

      Nativescript hook that generates App_Resources images based on a single high resolution image.

      \n

      Usage

      \n

      Put all your 3x PNG images in App_Resources/images.

      \n

      For instance, if you put navbar_logo@3x.png in this folder, it will be available as res://navbar_logo.\nIf you put an image without scale suffix, it will use it as a x1 image. You can provide any integer scale from 1 to 5.

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bugsee":{"name":"nativescript-bugsee","version":"0.1.0","license":"Apache-2.0","readme":"

      Bugsee for NativeScript

      \n

      This plugin adds Bugsee support to your NativeScript application. Record the last 30 seconds of your app before it crashes. Allow people to submit bugs by shaking or screenshotting your app.

      \n

      \"Demo

      \n

      Installation

      \n

      To install the plugin do:

      \n
      tns plugin add nativescript-bugsee
      \n

      Usage

      \n

      iOS

      \n

      Put this is your main application JS file:

      \n
      // Replace this with your actual token
      Bugsee.launchWithToken('0000000-0000-0000-0000-00000000000')
      \n

      Android

      \n

      This is a little trickier as it needs to extend the main Application class.

      \n

      Create this file at app/application.android.js:

      \n

      (Replace yourApplicationName with your app name, and the token with your Android token)

      \n
      /* global android com */
      const superProto = android.app.Application.prototype
      const Bugsee = com.bugsee.library.Bugsee

      // the first parameter of the `extend` call defines the package and the name for the native *.JAVA file generated.
      android.app.Application.extend('org.yourApplicationName.Application', {
        onCreate: function () {
          superProto.onCreate.call(this)
          // At this point modules have already been initialized
          Bugsee.launch(this, '0000000-0000-0000-0000-00000000000')
        },
        attachBaseContext: function (base) {
          superProto.attachBaseContext.call(this, base)
        }
      })
      \n

      In app/App_Resources/Android/src/AndroidManifest change from this:

      \n
      <application android:name=\"com.tns.NativeScriptApplication\"
      \n

      to this - to match the application name above:

      \n
      <application android:name=\"org.yourApplicationName.Application\"
      \n\n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-localytics":{"name":"nativescript-localytics","version":"0.0.4","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-hello-world":{"name":"tns-template-hello-world","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript JavaScript Template

      \n

      This template creates a "Hello, world" NativeScript app using JavaScript.

      \n

      This is the default template, so you can create a new app that uses it with the --template option:

      \n
      tns create my-hello-world-js --template tns-template-hello-world
      \n

      Or without it:

      \n
      tns create my-hello-world-js
      \n
      \n

      Note: Both commands will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-hello-world).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-hello-world-js --template nativescript-app-templates/packages/template-hello-world
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hifox/nativescript-apple-sign-in":{"name":"@hifox/nativescript-apple-sign-in","version":"1.1.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-gps":{"name":"nativescript-background-gps","version":"0.0.2","license":"MIT","readme":"

      Nativescript Background GPS Plugin

      \n

      NOTE

      \n

      This plugin does not currently work in the background. The project is exploratory to create a simple background GPS service, but thus far it is not working.

      \n

      This is a plugin to receive gps location updates regardless of the app state.

      \n

      Getting started

      \n
        \n
      1. tns plugin add nativescript-background-gps
        2. \n
      \n

      Usage

      \n

      import { gps } from 'nativescript-background-gps';

      \n

      gps.on(function (location) { console.log(location); }

      \n

      Changes

      \n

      This project uses source code from nativescript-geolocation under the Apache 2.0 license.\nChanges can be found in the CHANGES.md file.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-transcoder":{"name":"nativescript-transcoder","version":"0.1.0-alpha.1","license":"Apache-2.0","readme":"

      nativescript-transcoder

      \n

      WARNING, WORK IN PROGRESS, v1.0 excepted end of March

      \n

      This plugins for nativescript brings video transcoding support.

      \n
        \n
      • Hardware transcoding on android through android-transcoder.
        • \n
      • @todo Hardware transcoding on iOS through AVFoundation
        • \n
      • @todo Software transcoding on iOS/Android through FFMpeg
        • \n
      \n

      The plugins support observing events as well as promises.

      \n

      Only AAC audio is supported right now on Android, simulator camera is using 3GPP audio, so you can not test it with the simulator

      \n

      For hardware mode, only 720p resolution is supported on android, other resolutions may not work on some devices, a way to select the best profile may be developed\n(Note for above for future developments on this plugin: CamcorderProfile is the way to go to retrieve all possible encoding resolutions, then we just need to select the best one according to settings).

      \n

      Installation

      \n
      tns plugin add nativescript-transcoder
      \n

      Usage

      \n

      JavaScript

      \n
      const {
        Transcoder,
        TranscoderVideoCodec,
        TranscoderEventList,
      } = require('nativescript-transcoder');

      const transcoder = new Transcoder(inputFilePath, {
        videoBitrate: 1000 * 1000, // 1mbps
        resolutionConstraint: 720,
        videoCodec: TranscoderVideoCodec.H264,
      });

      transcoder.transcode().then(({ filePath }) => {
        console.log(`Output file path: ${filePath}`);
      }).catch((err) => {
        console.log(`Error: ${err.type} - ${err.message}`);
      });

      transcoder.on(TranscoderEventList.Progress, (progress) => {
        console.log(`Progress: ${progress}`);
      })
      \n

      TypeScript

      \n
      import {
        Transcoder,
        TranscoderVideoCodec,
      } from 'nativescript-transcoder';

      const transcoder = new Transcoder(inputFilePath, {
        videoBitrate: 1000 * 1000, // 1mbps
        resolutionConstraint: 720,
        videoCodec: TranscoderVideoCodec.H264,
      });

      transcoder.transcode().then(({ filePath }) => {
        console.log(`Output file path: ${filePath}`);
      }).catch((err: TranscoderException) => {
        console.log(`Error: ${err.type} - ${err.message}`);
      });

      transcoder.on(TranscoderEventList.Progress, (progress: number) => {
        console.log(`Progress: ${progress}`);
      })
      \n

      API

      \n

      Transcoder

      \n

      The main class you need to use, a transcoder can only be used for one transcoding.

      \n

      Constructor

      \n

      Methods

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodReturn typeDescription
      constructor(filePath: string, options?: TranscoderOptions)TranscoderInitialize a transcoder, filePath is mandatory (input video).
      transcode()Promise<TranscoderResult>Launch the transcoding
      cancel()voidForce cancel of the thread running the task
      \n

      Properties

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      @ObservableProperty progress: numbernullProgress of the transcoding, null if not applicable
      @ObservableProperty statusTranscoderStatus.IdleStatus of the transcoding process
      @readonly filePath: stringN/AFilePath of file which will be transcoded.
      @get/@set audioBitrate: numberfrom optionsset/get audio bitrate
      @get/@set videoBitrate: numberfrom optionsset/get video bitrate
      \n

      Events

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameCallbackDescription
      TranscoderEventList.Completed or completed(result: TranscoderResult) => voidEmitted when the transcoding is done. You can access the output path from result.filePath.
      TranscoderEventList.Canceled or canceled() => voidThe user has canceled the transcoding
      TranscoderEventList.Progress or progress(progress: number) => voidCalled each time the progress change.
      TranscoderEventList.Failed or failed(err: TranscoderException) => voidAn error occured while transcoding or attempting to transcode. See TranscoderException to see how to handle exceptions
      \n

      TranscoderOptions

      \n

      Construct an object to pass as options to new Transcoder(filePath, options).

      \n

      All options are optionals.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      videoBitrate: numbernullAdjust video bitrate
      Default to null.
      When null, try to use the same bitrate as input, but bitrate information can not always be retrieved on h264 on Android, as a result if encoding is necessary, bitrate will default to 1mbps (1000000).
      audioBitrate: numbernullAdjust audio bitrate (in bps), default to null (keep bitrate)
      videoCodec: TranscoderVideoCodecTranscoderVideoCodec.AutoDefine the video codec to use. Be careful, all device does not support all codecs, use TranscoderVideoCodec.Auto if not sure.
      audioCodec: TranscoderAudioCodecTranscoderVideoCodec.AacDefine the audio codec to use. Only AAC supported for now.
      nativeTranscoder: TranscoderNativeTranscoderTranscoderNativeTranscoder.HardwareDefine which native transcoder to use. Hardware is faster and better but FFMPEG is not dependant of what the device can or can not do. The hardware transcoder can always handle video taken by the device camera. Prefered choice is Hardware, but choose FFMPEG if video comes from unknown sources
      resolutionConstraint: numbernullDefine the output resolution of the video. Positive number represent a constraint on the smaller side of the video. Negative number represent a constraint on the larger side of the video. Important: the video will never be scalled up ! (null to keep the original format). Ex:
      - input: 1920x1080, resolutionConstraint: 720, output: 1280x720
      - input: 1920x1080, resolutionConstraint: -720, output: 720x405
      strictResolutionConstraint: booleanfalseIf this is true, the transcoder will through an error if the video can not be scaled according to the defined resolutionConstraint. Otherwise, it will use the nearest possible resolution. (ex: 480p can not be achieve with 3140x2160, if true then an exception will be thrown, if false then output resolution will be 848x477).
      \n

      TranscoderException

      \n

      Exemple

      \n
      transcoder.on(TranscoderEventList.Failed, (err: TranscoderException) => {
        switch (err.type) {
          case TranscoderExceptionType.InvalidOutputFormat:
            console.log('The device doesn\\'t support the asked output')
            break;
          default: // TranscoderExceptionType.Failed:
            console.log('Unable to trasncode')
            break;
        }
      })
      \n

      Properties

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Property/methodDefaultDescription
      type: TranscoderExceptionTypenullType of transcoding error (see TranscoderExceptionType)
      nativeError: anyundefinedMay be the raw error rejected by the native transcoder.
      constructor(type: TranscoderExceptionType, message: string, nativeError?: any): TranscoderExceptionN/AInitialize a TranscoderException, prefered way is to inherit from that.
      \n

      TranscoderExceptionType

      \n

      An enum containing all possible types

      \n

      Prefered way is to use TranscoderExceptionType.Canceled instead of it's value ('CANCELED').

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValueDescription
      Canceled'CANCELED'User canceled exception
      Failed'FAILED'Generic failure error
      InvalidInputFormat'INVALID_INPUT'Generic error when Input can not be transcoded.
      InvalidOutputResolution'INVALID_INPUT'Happens when output resolution is not correct (like floating number).
      InvalidOutputVideoCodec'INVALID_OUTPUT_VIDEO_CODEC'Happens when no video codec correspond on the device.
      InvalidOutputFormat'INVALID_OUTPUT_FORMAT'Happens when at the end, the device is not capable to hardware transcode a given format
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tglib":{"name":"nativescript-tglib","version":"0.2.0","license":"Apache-2.0","readme":"

      Nativescript Tglib \"apple\"

      \n

      Nativescript Library for building Telegram clients

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-tglib
      \n

      Features

      \n
        \n
      • Currently support for iOS
        • \n
      • Android coming soon
        • \n
      \n
      \n

      APIs

      \n

      tglib provide some useful methods that makes your Telegram app development easier.

      \n

      Most API classes/methods can be found in the official TDLib documentation.

      \n

      Authorizing an user

      \n
      const client = new TDJSON({
        apiId: 'YOUR_API_ID',
        apiHash: 'YOUR_API_HASH',
        auth: {
          type: 'user',
          value: 'YOUR_PHONE_NUMBER',
        },
      })
      \n

      Authorizing a bot

      \n
      const client = new TDJSON({
        apiId: 'YOUR_API_ID',
        apiHash: 'YOUR_API_HASH',
        auth: {
          type: 'bot',
          value: 'YOUR_BOT_TOKEN',
        },
      })
      \n

      \"\" Low Level APIs

      \n
      client.ready
      \n

      This promise is used for initializing tglib client and connect with Telegram.

      \n
      await client.ready
      \n
      client.registerCallback(key, callback) -> Void
      \n

      This API is provided by tglib, you can use this API to register your function in order to receive callbacks.

      \n

      The authorization process can be overridden here by registering td:getInput callback.

      \n
      client.registerCallback('td:update', (update) => console.log(update))
      client.registerCallback('td:error', (error) => console.error(error))
      client.registerCallback('td:getInput', async (args) => {
        const result = await getInputFromUser(args)
        return result
      })
      \n
      client.fetch(query) -> Promise -> Object
      \n

      This API is provided by tglib, you can use this API to send asynchronous message to Telegram and receive response.

      \n
      const chats = await client.fetch({
        '@type': 'getChats',
        'offset_order': '9223372036854775807',
        'offset_chat_id': 0,
        'limit': 100,
      })
      \n
      client.send(query) -> Promise -> Object
      \n

      This API is provided by TDLib, you can use this API to send asynchronous message to Telegram.

      \n
      await client.send({
        '@type': 'sendMessage',
        'chat_id': -123456789,
        'input_message_content': {
          '@type': 'inputMessageText',
          'text': {
            '@type': 'formattedText',
            'text': '👻',
          },
        },
      })
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-revenuecat":{"name":"nativescript-revenuecat","version":"0.1.4","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio":{"name":"nativescript-twilio","version":"0.14.0","license":"Apache-2.0","readme":"

      NativeScript Twilio

      \n

      nativescript-twilio is a plugin that exposes the Twilio Voice SDK, the leading platform for Voice solutions.

      \n

      Note: For now it only for making outbound calls, both for Android and iOS

      \n

      Prerequisites / Requirements

      \n\n

      Plugin installation on your Nativescript app

      \n
      tns plugin add nativescript-twilio
      \n

      Usage

      \n

      Demo App

      \n

      Setup

      \n\n

      Running the Demo app

      \n
        \n
      • Clone the repo, cd src, and npm run demo.android or npm run demo.ios.
        • \n
      \n

      Integrating into your NativeScript app

      \n
        \n
      • On the main.ts or app.ts file, put this code in order to init Twilio:
        • \n
      \n

        import * as application from 'tns-core-modules/application';
        import { initTwilio } from 'nativescript-twilio';
        import { TwilioAppDelegate } from 'nativescript-twilio/delegate';

        // The following endpoint should return the raw token in the request body
        const accessTokenUrl = 'http://yourserver/path/to/access-token';
        const accessTokenHeaders = {'Authorization': 'Token sometoken'};

        initTwilio(accessTokenUrl, accessTokenHeaders);

        if (application.ios) {
          // register twilio app delegate in order to receive incoming calls
          application.ios.delegate = TwilioAppDelegate;
        }
      \n
        \n
      • In some place in your code (i.e. in some UI component loaded event) you need to setUp the call listener, which will handle the call's connection events:
        • \n
      \n
        import { setupCallListener, setupPushListener } from 'nativescript-twilio';

        // listener for inbound/outbound calls
        const callListener = {
          onConnectFailure(call, error) {
            dialogs.alert(`connection failure: ${error}`);
          },
          onConnected (call) {
            dialogs.alert('call connected');
          },
          onDisconnected (call) {
            dialogs.alert('disconnected');
          }
        };

        setupCallListener(callListener);

        // listener for push notifications (incoming calls)
        const pushListener = {
          onPushRegistered(accessToken, deviceToken) {
            dialogs.alert('push registration succeded');
          },
          onPushRegisterFailure (error) {
            dialogs.alert(`push registration failed: ${error}`);
          }
        };

        setupPushListener(pushListener);
      \n
        \n
      • On the component for making outbound calls, put the following code:
        • \n
      \n

        import * as dialogs from 'tns-core-modules/ui/dialogs';
        import { getAccessToken, Twilio } from 'nativescript-twilio';

        const phoneNumber = '+1555365432';

        getAccessToken() // it will use the Twilio configuration set before
          .then((token) => {
            const twilio = new Twilio(token);

            const call = twilio.makeCall(phoneNumber);

            // example of muting the call after 10 seconds
            setTimeout(() => {
              console.log('Muting call after 10 seconds...');
              call.mute(true);
            }, 10000);

            // example of disconnecting the call after 30 seconds
            setTimeout(() => {
              console.log('Disconnecting call after 30 seconds...');
              call.disconnect();
            }, 30000);

          })
      \n

      API

      \n

      Functions

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      FunctionDescription
      initTwilio(url: string, headers?: any)Initialize Twilio passing the endpoint to the access token backend
      getAccessToken(): Promise<string>Ask the backend for an access token. Returns a Promise with the token retrieved
      setupCallListener(listener: any)Setup the call listener, passing an object with onConnectFailure, onConnected and onDisconnected callbacks
      setupPushListener(listener: any)Setup the push notifications listener, passing an object with onPushRegistered and onPushRegisterFailure callbacks
      unregisterPushNotifications(token: string, deviceToken: string, callback?: (error: any) => void)Unregister push notifications (incoming calls)
      \n

      Twilio Methods

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodDescription
      makeCall(senderPhoneNumber: any, phoneNumber: any, options?: any): CallMake an outbound call.
      toggleAudioOutput(toSpeaker: boolean)iOS Only Set the audio session output to the speaker or not.
      \n

      Call Methods

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodDescription
      mute(value: boolean)Mute the call.
      disconnect()Hang-up the call.
      \n

      License

      \n

      Apache License Version 2.0, April 2018

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nsoauth":{"name":"nativescript-nsoauth","version":"0.0.10035","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-iot":{"name":"nativescript-iot","version":"0.1.4","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-http-gentle":{"name":"nativescript-http-gentle","version":"3.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jumio":{"name":"nativescript-jumio","version":"1.1.11","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescrpt-snackbar":{"name":"nativescrpt-snackbar","version":"4.1.7","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onfido":{"name":"nativescript-onfido","version":"0.0.5","license":"Apache-2.0","readme":"

      NativeScript

      \n

      Plugin for using Onfido in your NativeScript app, IOS and Android (not started yet).

      \n

      \"FAB\n\"FAB

      \n

      Prerequisites

      \n

      In order to start integration, you will need the API token and the mobile SDK token. You can use our sandbox environment to test your integration, and you will find these two sandbox tokens inside your Onfido Dashboard.

      \n

      Warning: You MUST use the mobile SDK token and not the API token when configuring the SDK itself.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-onfido
      \n

      Usage

      \n

      Angular

      \n

      app.component.html

      \n
      <Onfido [settings]=\"onfidoSettings\"></Onfido>
      \n

      app.component.ts

      \n
      import { registerElement } from 'nativescript-angular/element-registry';
      registerElement('Onfido', () => require('nativescript-onfido').Onfido);

      class AppComponent {
        onfidoSettings: any;

        constructor() {
          this.onfidoSettings = {
            applicantId: \"YOUR_APPLICANT_ID\",
            token: \"YOUR_SDK_TOKEN\",
            enable: true,
            responseHandler: (response: any) => {
              if (response.userCanceled) {  
                // Flow cancelled by the user
              } else if (response.results) {
                // User completed the flow
                // You can create your check here
              } else if (response.error) {
                // Some error happened
              }
            } 
          };
        }
      }
      \n

      JavaScript

      \n

      main-page.xml

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" class=\"page\"
        xmlns:ui=\"nativescript-onfido\">
        <ui:Onfido settings=\"{{onfidoSettings}}\"></ui:Onfido>
      </Page>
      \n

      main-view-model.ts

      \n
      import { Observable } from 'tns-core-modules/data/observable';

      export class HelloWorldModel extends Observable {
        public onfidoSettings: any;

        constructor() {
          super();

          this.onfidoSettings = {
            applicantId: \"YOUR_APPLICANT_ID\",
            token: \"YOUR_SDK_TOKEN\",
            enable: true,
            responseHandler: (response: any) => {
              if (response.userCanceled) {  
                // Flow cancelled by the user
              } else if (response.results) {
                // User completed the flow
                // You can create your check here
              } else if (response.error) {
                // Some error happened
              }
            } 
          };
        }
      }
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-botjet":{"name":"nativescript-plugin-botjet","version":"0.1.4","license":"Apache-2.0","readme":"

      nativescript-plugin-botjet

      \n

      Unofficial plugin to integrate BotJet.ai Webbased native sdks into your nativescript projects.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add nativescript-plugin-botjet
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      import { BotJetSDK, BotJetConfig } from \"nativescript-plugin-botjet\";

      const config : BotJetConfig =  { 
          clientId : \"<--your client id-->\",
          botId : \"<!-- your bot id -->\",
          title : \"My Chat Bot\",
          accentColor : \"#323b8c\",
          senderId : '<!-- logged in user specific keys-->'
      }

      BotJetSDK.launchChatWithConfig(config);
      \n

      Change Log

      \n
        \n
      • 0.1.3\n
          \n
        1. Fixed isLocationRequired property for iOS.
          2. \n
        2. Fixed Title property for Android and removed native loading view.
          3. \n
        \n
        • \n
      • 0.1.4\n
          \n
        1. Fixed isLocationProperty in nativescript plugin code.
          2. \n
        \n
        • \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@hyvapetteri/audio-dsp-tools":{"name":"@hyvapetteri/audio-dsp-tools","version":"1.0.4","license":"Apache-2.0","readme":"

      @hyvapetteri/audio-dsp-tools

      \n
      ns plugin add @hyvapetteri/audio-dsp-tools
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-whatsapp-template":{"name":"nativescript-whatsapp-template","version":"1.0.1","license":"Apache-2.0","readme":"

      NativeScript WhatsApp Template \"apple\" \"android\"

      \n

      \"NPM\n\"Downloads\"\n\"Dependencies\"\n\"DevDependencies\"\n\"Twitter

      \n

      Installation

      \n

      From the command prompt, start a new Nativescript project doing:

      \n
      tns create your-project-name --template nativescript-whatsapp-template
      \n

      Introduction

      \n

      \"N|Solid\"

      \n

      This project is heavily based on this repo, created as part of the course:

      \n\n

      At the moment, only available in Portuguese, but English version is coming soon.\nReach out to us on Twitter \"Twitter if you want to push us to get it done sooner :)

      \n

      First run

      \n

      Right after creating a project and then npm install, it should be ready to go. Just move into your project's folder and execute the normal tns command to run any app:

      \n
      cd your-project-name
      npm i
      tns run
      \n

      Alternatively you can target any specifc platform:

      \n
      tns run android
      \n
      tns run ios
      \n

      That's pretty much what you should expect to see for the initial screen:

      \n

      - Screenshot 1: Chats tab (iOS / Android)

      \n

      \"N|Solid\"

      \n

      And that's the chat screen upon clicking on any chat item in the previous screen:

      \n

      - Screenshot 2: Chat screen (iOS / Android)

      \n

      \"N|Solid\"

      \n

      Removing initial data

      \n

      You might want to remove all the dummy data as well as some boilerplate code. The content shown relies upon the service core/chats.services.ts inside your app folder. Just replace the content returned there with what you need.

      \n

      Emptying chats.services.ts

      \n
      import { Injectable } from '@angular/core';

      import { Chat } from './models/chat.model';
      import { Message } from './models/message.model';

      @Injectable()
      export class ChatsService {
        get chats(): Chat[] {
          return [];
        }
        getMessages(chat: Chat): Message[] {
          return [];
        }
      }
      \n

      Another advisable tweak is removing the line which slices the list of messages in the selected chat to get only a chunck of initial 50 ones. The reason for that is just to illustrate that not all messages should appear on landing on that screen, but we wouldn't like to sound too opinionated at this point telling you how to fetch and show your own data.

      \n

      Replace the slice command on messages-area.component.ts

      \n
      export class MessagesAreaComponent implements OnInit {
        // ...
        ngOnInit() {
      -    this.messages = this.messages.slice(0, 50);
      +    // your own code
        }
        // ...
      }
      \n

      Changelog

      \n
        \n
      • 1.0.0 Initial implementation
        • \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-radiobutton":{"name":"@webileapps/nativescript-radiobutton","version":"0.2.7","license":"Apache 2.0","readme":"

      NativeScript-RadioButton

      \n

      This is a fork of other NativeScript plugin for the native radiogroup and radiobutton widget.

      \n

      Changes from the original plugin

      \n
        \n
      • Support for tintColor xml property ( or tint-color css property).
        • \n
      • Make color xml (and css property) work correctly.
        • \n
      \n

      Platform controls used:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidiOS
      Android RadioGroupNONE
      Android RadioButtonNONE
      \n

      Installation

      \n

      From your command prompt/terminal go to your app's root folder and execute:

      \n

      tns plugin add @webileapps/nativescript-radiobutton

      \n

      Usage

      \n

      Demo App

      \n

      If you want a quickstart, clone the repo, cd src, and execute the following commands:

      \n
      npm install
      npm run demo.android
      \n

      Angular

      \n

      Import to NgModule for use

      \n
      import { RadioButtonModule } from '@webileapps/nativescript-radiobutton/angular'

      @NgModule({
          imports: [
              RadioButtonModule
          ]
      })
      \n

      Place this in your view.

      \n
      <StackLayout>
          <RadioGroup [(value)]=\"dataBoundVariable\">
              <RadioButton text=\"Selection 1\"></RadioButton>
              <RadioButton text=\"Selection 2\"></RadioButton>
              <RadioButton text=\"Selection 3\"></RadioButton>
          </RadioGroup>
      </StackLayout>
      \n

      NativeScript-Vue

      \n

      In your main.js register both RadioGroup and RadioButton elements

      \n
      Vue.registerElement('RadioGroup', () => require('@webileapps/nativescript-radiobutton').RadioGroup)
      Vue.registerElement('RadioButton', () => require('@webileapps/nativescript-radiobutton').RadioButton)
      \n

      And in your template, use it

      \n
      <RadioGroup
        @selected=\"onSelected\">
        <RadioButton
          v-for=\"item in someList\"
          :key=\"item.id\"
          :text=\"item.text\">
        </RadioButton>
      </RadioGroup>
      \n

      Supported Properties

      \n

      RadioButton

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidExample
      enabledenabled="true | false"
      texttext="a string"
      checkedchecked="true | false"
      \n

      RadioGroup

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidReturns
      valuethe index of the radio button selected
      \n

      Supported Events

      \n

      RadioGroup

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidType
      valueEventEmitter
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cardio-custom":{"name":"nativescript-cardio-custom","version":"1.0.3","license":"MIT","readme":"

      nativescript-cardio-custom

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-phaser":{"name":"nativescript-phaser","version":"1.0.0-alpha2","license":"Apache-2.0","readme":"

      nativescript-phaser

      \n

      Tools for using Phaser3 to build native 2D games in NativeScript 👾👾

      \n\n

      Installation

      \n
      npm i nativescript-phaser
      \n

      Usage

      \n

      Import the library into your JavaScript file:

      \n
      import TNSPhaser from \"nativescript-phaser\";
      \n

      Functions

      \n

      TNSPhaser.game({ canvas, renderer: Phaser.WEBGL || Phaser.CANVAS, ...extras })

      \n

      Given a canvas from a\nTNSCanvas, return a\nPhaser.Game\nthat draws into it.

      \n

      Props

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescriptionDefault Value
      canvasTNSCanvasRequired: canvas that the Phaser.Game will render tonull
      renderernumber?Optional: choose the renderer type e.g Phaser.CANVAS (1) , Phaser.WEBGL(2)1
      widthnumber?Optional: height of the Phaser.Gamecanvas height
      heightnumber?Optional: width of the Phaser.Gamecanvas width
      titlestring?Optional: title of the Phaser.Game"tns-phaser-game"
      preventLoopboolean?Optional: Prevents the app from calling canvas.nativeView.flush() every framefalse
      \n

      Returns

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      gamePhaser.GameThe Phaser3 game used for rendering game logic
      \n

      Example

      \n
      const game = TNSPhaser.game({ canvas });
      \n

      What does it do?

      \n

      Under the hood, TNSPhaser is maintaining global instances of a few libraries.

      \n\n
      window.Phaser = require(\"phaser\");
      \n

      Finally when a new instance of TNSPhaser.Game is created, we set the document.readyState to 'complete' and save the global instance of context

      \n
      global.__context = context;
      global.document.readyState = \"complete\";
      \n

      Then we create a standard render loop and call canvas.nativeView.flush() to flush the frame queue and render our context.

      \n
      const render = () => {
        requestAnimationFrame(render);
        canvas.nativeView.flush();
      };
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-google-signin":{"name":"@webileapps/nativescript-google-signin","version":"0.1.1","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-info":{"name":"nativescript-wifi-info","version":"0.0.5","license":"Apache-2.0","readme":"

      NativeScript Wifi Info Plugin \"apple\" \"android\"

      \n

      A plugin for retrieving device's wifi information details.

      \n

      Prerequisites / Requirements

      \n

      iOS

      \n

      Make sure that your app has Access WiFi Information capability.

      \n

      XCode > Open app > Capabilities > Access Wifi Information (ON)

      \n

      Installation

      \n
      tns plugin add nativescript-wifi-info
      \n

      Usage

      \n

      The wifi info plugin exposes a simple WifiInfo() class with several instance methods. To get the device's current Wifi SSID, instantiate an instance of WifiInfo and call its getSSID() method.

      \n

      Angular

      \n
      import {Component, OnInit} from '@angular/core';
      import {WifiInfo} from 'nativescript-wifi-info';

      @Component({
          selector: 'Home',
          moduleId: module.id,
          templateUrl: './home.component.html'
      })
      export class HomeComponent implements OnInit {

          ssid: string;
          nativeSsid: string;

          private wifiInfo: WifiInfo;

          constructor() {
              this.wifiInfo = new WifiInfo();
          }

          ngOnInit(): void {
              this.ssid = this.wifiInfo.getSSID();
              this.nativeSsid = this.wifiInfo.getNativeSSID();
          }
      }
      \n

      TypeScript

      \n
      import { WifiInfo } from 'nativescript-wifi-info';

      const wifiInfo = new WifiInfo();
      const ssid = wifiInfo.getSSID();
      const nativeSsid = wifiInfo.getNativeSSID();

      console.log('Wifi SSID', ssid);
      console.log('Wifi SSID (native)', nativeSsid);
      \n

      The plugin is currently set up to use:

      \n\n

      Additional Examples

      \n

      Scan Wifi Network and show available Wifi SSID list (Android only)

      \n

      In angular app there is a simple implementation of scanning wifi network and populating wifi ssid list.

      \n

      Known Issues

      \n

      Getting Wifi SSID is not working on iOS simulator (returns No WiFi Available). On Android it should detect a default demo Wifi Network AndroidWifi.

      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rotate-3d":{"name":"nativescript-rotate-3d","version":"0.8.0","license":"Apache-2.0","readme":"

      NativeScript Rotate3D

      \n

      This is a nativescript plugin to add 3d rotaion (i.e around X, Y and Z).

      \n\n

      Installation

      \n
      tns plugin add nativescript-rotate-3d
      \n

      Example

      \n
      <Rotate3D rotate=\"40\" axis=\"Y\" cameraDistance=\"2000\">
           /* Whatever you want */
      </Rotate3D>
      \n

      Usage

      \n

      Since we're subclassing StackLayout, you can add <Rotate3D> to your view at any place where you'd otherwise use a StackLayout.

      \n

      In addition to any properties you can already set on a StackLayout you should add:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParamDescriptiondefault
      rotateAxisthe axis whic the view will rotate around (X, Y, Z)Z
      cameraDistancethe distance between the view and view camera2000
      \n

      Next

      \n
        \n
      • [x] implement rotaion in X, Y, Z.
        • \n
      • [ ] handel animation using view animate method.
        • \n
      • [ ] improve procpective relation between ios and android.
        • \n
      \n

      Contribute

      \n

      if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

      \n

      Get Help

      \n

      Please, use github issues strictly for reporting bugs or requesting features.

      \n

      Contact

      \n

      Twitter: hamdiwanis
      \nEmail: hamdiwanis@hotmail.com

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-radial-gradient":{"name":"nativescript-radial-gradient","version":"0.8.0","license":"MIT","readme":"

      NativeScript Radial Gradient 🎨

      \n
      \n

      Note: This Plugin based on EddyVerbruggen linear gradient plugin.

      \n
      \n\n

      Installation

      \n
      tns plugin add nativescript-radial-gradient
      \n

      Example

      \n
      <Gradientcolors=\"#FF0077, red, #FF00FF\" radius=\"20\" center=\"{x: 0: y: 0}\">
        <Label class=\"p-20 c-white\" horizontalAlignment=\"center\" text=\"My gradients are the best.\" textWrap=\"true\"></Label>
        <Label class=\"p-10 c-white\" horizontalAlignment=\"center\" text=\"It's true.\" textWrap=\"true\"></Label>
      </Gradient>
      \n

      Usage

      \n

      Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

      \n

      In addition to any properties you can already set on a StackLayout you should add:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      ParamDescription
      colorsPass a minimum number of two. Just use the value that you would otherwise pass to NativeScript's new Color("value"). So red, #FF0000, rgb(255, 0, 0), and even rgba(255, 0, 0, 0.5) (transparency!) will all work.
      radiusthe radius the radial gradient
      centerthe center point the radial gradient {x: number,y: number}
      \n

      Angular

      \n

      Add this to app.module.ts so you can use a Gradient tag in the view:

      \n
      import { registerElement } from \"nativescript-angular\";
      registerElement(\"Gradient\", () => require(\"nativescript-radial-gradient\").Gradient);
      \n

      How many colors can we pass to the plugin?

      \n

      Knock yourself out, but the minimum is two.

      \n

      Next

      \n
        \n
      • [x] implement radial gradient.
        • \n
      • [ ] handel default values better.
        • \n
      \n

      Contribute

      \n

      if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

      \n

      Get Help

      \n

      Please, use github issues strictly for reporting bugs or requesting features.

      \n

      Contact

      \n

      Twitter: hamdiwanis
      \nEmail: hamdiwanis@hotmail.com

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@webileapps/nativescript-healthkit":{"name":"@webileapps/nativescript-healthkit","version":"0.0.4","license":"Apache-2.0","readme":"

      nativescript-healthkit

      \n

      A NativeScript plugin to fetch data from iOS Healthkit.

      \n

      Installation

      \n
      tns plugin add @webileapps/nativescript-healthkit
      \n

      Entitlements

      \n

      Add the following file to your app/App_Resources/iOS/app.entitlements folder

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>
      <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
      <plist version=\"1.0\">
      <dict>
      \t<key>com.apple.developer.healthkit</key>
      \t<true/>
      \t<key>com.apple.developer.healthkit.access</key>
      \t<array>
      \t\t<string>health-records</string>
      \t</array>
      </dict>
      </plist>
      \n

      Usage Strings.

      \n

      The following plist keys are injected by the plugin. Create or add to app/App_Resources/iOS/Info.plist to override these.

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>
      <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
      <plist version=\"1.0\">
      <dict>
      \t<key>NSHealthClinicalHealthRecordsShareUsageDescription</key>
      \t<string>We need your clinical health data to aggregate your health stats over time.</string>
      \t<key>NSHealthShareUsageDescription</key>
      \t<string>We need your health data to aggregate your health stats over time.</string>
      </dict>
      </plist>
      \n

      Usage

      \n

      Find out if HealthKit is enabled on the device.

      \n
      import { isHealthDataAvailable } from \"@webileapps/nativescript-healthkit\"

      console.log(\"Is health data available\", isHealthDataAvailable());
      \n

      Get healthdata since a previous date. Say, for the past 60 days.

      \n
      import { getHealthDataSince } from \"@webileapps/nativescript-healthkit\";

      const date = new Date();
      date.setDate(date.getDate() - 60);
      try {
          const data = await getHealthDataSince(date);
          console.log(data.active_minutes, data.calories_expended, data.distance, data.heart_rate, data.step_count);
      } catch (error) {
          console.error(error);
      }
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-nfc-card-reader":{"name":"nativescript-nfc-card-reader","version":"0.0.6","license":"Apache-2.0","readme":"

      nativescript-nfc-card-reader

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n
      tns plugin add nativescript-nfc-card-reader
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jwplayer":{"name":"nativescript-jwplayer","version":"0.0.2","license":"MIT","readme":"

      NativeScript JW Player

      \n

      This plugin is provides an interface to use native jwplayer android/ios sdks in nativescript.

      \n

      Register at jwplayer.com and get JWPlayer License Key for android and ios.

      \n

      For Android Set it in AndroidManifest.xml's application meta-data file:

      \n
      \t<application
      \t\tandroid:name=\"com.tns.NativeScriptApplication\"
      \t\tandroid:allowBackup=\"true\"
      \t\tandroid:icon=\"@drawable/icon\"
      \t\tandroid:label=\"@string/app_name\"
      \t\tandroid:theme=\"@style/AppTheme\">

      \t\t<activity
      \t\t\tandroid:name=\"com.tns.NativeScriptActivity\"
      \t\t\tandroid:label=\"@string/title_activity_kimera\"
      \t\t\tandroid:configChanges=\"keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode\"
      \t\t\tandroid:screenOrientation=\"portrait\"
      \t\t\tandroid:theme=\"@style/LaunchScreenTheme\">

      \t\t\t<meta-data android:name=\"SET_THEME_ON_LAUNCH\" android:resource=\"@style/AppTheme\" />

      \t\t\t<intent-filter>
      \t\t\t\t<action android:name=\"android.intent.action.MAIN\" />
      \t\t\t\t<category android:name=\"android.intent.category.LAUNCHER\" />
      \t\t\t</intent-filter>
      \t\t</activity>
      \t\t<activity android:name=\"com.tns.ErrorReportActivity\"/>

              <!--TODO Set your license key-->
              <meta-data
                  android:name=\"JW_LICENSE_KEY\"
                  android:value=\"YOUR_JW_LICENSE_KEY\" />

              <meta-data
                  android:name=\"com.google.android.gms.version\"
                  android:value=\"@integer/google_play_services_version\" />
      \t</application>
      \n

      For iOS set JW_LICENSE_KEY

      \n
      <key>JWPlayerKey</key>
      \t<string>YOUR_JW_LICENSE_KEY</string>
      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-jwplayer
      \n

      Usage

      \n

      Typescript/Javascript with XML

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:jw=\"nativescript-jwplayer\">
         <GridLayout>
          <jw:JWPlayer src=\"{{src}}\" videoPlayerEventsOnPlayEvent=\"{{VideoPlayerEventsOnPlayEvent}}\"
              videoPlayerEventsOnPauseEvent=\"{{VideoPlayerEventsOnPauseEvent}}\">      </jw:JWPlayer>
      </GridLayout>
      </Page>
      \n

      Angular

      \n

      in app.module.ts

      \n
      import { registerElement } from \"@nativescript/angular\";
      registerElement(\"JWPlayer\", () => require(\"nativescript-jwplayer\").JWPlayer);
      \n
      <GridLayout>
        <JWPlayer
          [src]=\"src\"
          (videoPlayerEventsOnPlayEvent)=\"VideoPlayerEventsOnPlayEvent($event)\"
          (videoPlayerEventsOnPauseEvent)=\"VideoPlayerEventsOnPauseEvent($event)\"
        >      </JWPlayer>
      </GridLayout>
      \n\n

      Plugin API

      \n

      You can pass src property for video link and other details:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      optiondescription
      urlVideo url to be played
      titleTitle of the video
      descriptionDescription of the video
      \n

      wrap these properties in an object and pass it to the src.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pdf-view-private":{"name":"nativescript-pdf-view-private","version":"0.0.3","license":"MIT","readme":"

      NativeScript PDFView

      \n

      A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

      \n

      This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests!

      \n

      My aim is to keep the features consistent across iOS and Android.

      \n

      Installation

      \n
      tns plugin add nativescript-pdf-view
      \n

      Usage

      \n

      Vanilla NativeScript

      \n
      <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        xmlns:pdf=\"nativescript-pdf-view\"
        loaded=\"pageLoaded\">
        <pdf:PDFView src=\"{{ pdfUrl }}\" load=\"{{ onLoad }}\" />
      </Page>
      \n

      Angular NativeScript

      \n
      import { PDFView } from 'nativescript-pdf-view';
      import { registerElement } from 'nativescript-angular';
      registerElement('PDFView', () => PDFView);
      \n
      <PDFView [src]=\"src\" (load)=\"onLoad()\"></PDFView>
      \n

      Demo

      \n

      Check out the demo folder for a demo application using this plugin. You can run the demo by executing npm run demo.ios and npm run demo.android from the root directory of the project.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@owen-it/nativescript-uuid":{"name":"@owen-it/nativescript-uuid","version":"0.0.4","license":"Apache-2.0","readme":"

      NativeScript UUID

      \n

      This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

      \n

      Inspired from StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?.

      \n

      Uses SAMKeychain Cocoa Pod.

      \n

      Installation

      \n

      Run the following command from the root of your project:

      \n
      tns plugin add @owen-it/nativescript-uuid
      \n

      Usage

      \n

      JavaScript

      \n
        const nsUuid = require(\"nativescript-uuid\");

        const uuid = nsUuid.getUUID();
        console.log(`The device UUID is ${uuid}`);
      \n

      TypeScript

      \n
        import {getUUID} from 'nativescript-uuid';

        const uuid = getUUID();
        console.log(`The device UUID is ${uuid}`);
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-virtual-joystick":{"name":"nativescript-virtual-joystick","version":"0.1.5","license":"MIT","readme":"

      NativeScript-Virtual-Joystick

      \n

      NativeScript plugin for Virtual Joystick UI component.

      \n

      \"screenshot\"

      \n

      Installation

      \n
      tns plugin add nativescript-virtual-joystick
      \n

      Usage

      \n
      <Page class=\"page\"
      \tnavigatingTo=\"onNavigatingTo\"
      \txmlns=\"http://schemas.nativescript.org/tns.xsd\"
      \txmlns:jv=\"nativescript-virtual-joystick\">
      \t<ActionBar class=\"action-bar\">
      \t\t<Label class=\"action-bar-title\" text=\"Virtual Joystick\"></Label>
      \t</ActionBar>

      \t<StackLayout>
      \t\t<Label text=\"{{ 'Angle: ' + angle }}\" />
      \t\t<Label text=\"{{ 'Strength: ' + strength }}\" />

      \t\t<Label text=\"{{ 'Left Horizontal: ' + lx }}\" />
      \t\t<Label text=\"{{ 'Left Vertical: ' + ly }}\" />

      \t\t<Label text=\"{{ 'Right Horizontal: ' + rx }}\" />
      \t\t<Label text=\"{{ 'Right Vertical: ' + ry }}\" />

      \t\t<StackLayout orientation=\"horizontal\">
      \t\t\t<jv:VirtualJoystick
      \t\t\t\tmove=\"onMove\"
      \t\t\t\tangle=\"{{ angle }}\"
      \t\t\t\tstrength=\"{{ strength }}\"
      \t\t\t\txAxis=\"{{ lx }}\"
      \t\t\t\tyAxis=\"{{ ly }}\"
      \t\t\t\tjvColor=\"#AA0000\"
      \t\t\t\tjvBackgroundColor=\"#0000AA\"
      \t\t\t\tjvBorderColor=\"#00AA00\"
      \t\t\t\twidth=\"50%\" />

      \t\t\t<jv:VirtualJoystick
      \t\t\t\tangle=\"{{ angle }}\"
      \t\t\t\tstrength=\"{{ strength }}\"
      \t\t\t\txAxis=\"{{ rx }}\"
      \t\t\t\tyAxis=\"{{ ry }}\"
      \t\t\t\tjvColor=\"#330000\"
      \t\t\t\tjvBackgroundColor=\"#000033\"
      \t\t\t\tjvBorderColor=\"#003300\"
      \t\t\t\tbuttonStickToBorder=\"true\"
      \t\t\t\twidth=\"50%\" />
      \t\t</StackLayout>
      \t</StackLayout>
      </Page>
      \n

      API

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyCssTypeDefaultDescription
      angle-number-1Read only. The angle of the button. Counter-clockwise, 0 is right.
      strength-number0Read only. The distance from center in the range 0 - 100.
      xAxis-number0Read only. The distance from center on horizontal axis in the range of -1 (left) to 1 (right).
      yAxis-number0Read only. The distance from center on vertical axis in the range of -1 (down) to 1 (up).
      jvColorjv-colorColor#000000The color of the button. If image is provided this property is ignored.
      jvImagejv-imagestringundefinedThe image to use as button.
      jvBackgroundColorjv-background-colorColortransparentThe color of range circle.
      jvBorderColorjv-border-colorColortransparentThe color of range circle border.
      jvBorderWidthjv-border-widthnumber3The thickness of the range circle border.
      buttonAutoRecenter-booleantrue-
      buttonStickToBorder-booleanfalseIf set to true, button only has 2 states: centered (strength 0) or pushed (strength 100).
      buttonDirection-number0Restrict button movement. 0 means all directions, positive number restricts movement to vertical axis, negative number -- horizontal axis.
      buttonSizeRatio-number0.25Button size ratio relative to widget size.
      backgroundSizeRatio-number0.75Range circle size ratio relative to widget size.
      fixedCenter-booleantrueWhether button center (strength 0) is fixed to widget center or relative to touchdown point.
      enabled-booleantrueWhether widget accepts taps and emits events.
      \n

      Credits

      \n

      NativeScript-Virtual-Joystick uses Virtual Joystick Android library for Android native view.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-uuid":{"name":"nativescript-uuid","version":"0.0.1","license":"Apache-2.0","readme":"

      NativeScript UUID

      \n

      This is a plugin for Nativescript that allows you to get a UUID (Universal Unique Identifier) for a device.

      \n

      Inspired from [StackOverflow: How to preserve identifierForVendor in ios after uninstalling ios app on device?] (http://stackoverflow.com/questions/21878560/how-to-preserve-identifierforvendor-in-ios-after-uninstalling-ios-app-on-device).

      \n

      Uses SSKeychain Cocoa Pod.

      \n

      Installation

      \n

      tns plugin add nativescript-uuid

      \n

      Usage

      \n
      var plugin = require(\"nativescript-uuid\");
      var uuid = plugin.getUUID();
      console.log(\"The device UUID is \" + uuid);
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-quickblox":{"name":"nativescript-quickblox","version":"2.9.2-beta","license":"(Apache-2.0)","readme":"

      NativeScript QuickBlox JavaScript SDK

      \n

      \"travis-ci\"\n\"Code\n\"npm\"\n\"npm\"

      \n

      The QuickBlox JavaScript SDK provides a JavaScript library making it even easier to access the QuickBlox cloud communication backend platform.

      \n

      QuickBlox is a suite of communication features & data services (APIs, SDKs, code samples, admin panel, tutorials) which help digital agencies, mobile developers and publishers to add great communication functionality to smartphone applications like in Skype, WhatsApp, Viber.

      \n

      Check out our API Reference for more detailed information about our SDK.

      \n

      Work in progress...

      \n

      Install

      \n
      npm install nativescript-quickblox --save
      \n

      And you're ready to go:

      \n
      var QB = require('nativescript-quickblox');

      // OR to create many QB instances
      var QuickBlox = require('nativescript-quickblox').QuickBlox;
      var QB1 = new QuickBlox();
      var QB2 = new QuickBlox();
      \n

      Download ZIP archive

      \n

      NativeScript QuickBlox JavaScript SDK, zip archive

      \n

      Documentation

      \n

      You can look at it here https://quickblox.com/developers/Javascript

      \n

      Questions and feedback

      \n

      Please raise questions, requests for help etc. via https://stackoverflow.com/questions/tagged/quickblox

      \n

      Feedback and suggestions for improvement always welcome :)

      \n

      License

      \n

      Apache 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-icam":{"name":"nativescript-icam","version":"2.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ip-protocol":{"name":"nativescript-ip-protocol","version":"0.2.2","license":"MIT","readme":"

      nativescript-ip-protocol

      \n

      This plugin was created to use simple IP protocols over native platforms (iOS and Android).

      \n

      Currently it is supported only UDP messages.

      \n

      Installation

      \n
      tns plugin add nativescript-ip-protocol
      \n

      Usage

      \n

      You can see demo-angular in the repository, but basic usage can be seen below

      \n
          import { UdpProtocol } from 'nativescript-ip-protocol';

          public startReceiving() {
              const udpSocket: UdpProtocol = new UdpProtocol();
              udpSocket.receiveWithTimeout(this.port, this.timeout)
              .subscribe((msg) => {
                  this.receivedMessage = msg;
              }, (error) => {
                  console.error(error);
              });
          }

          public receiveOnce() {
              const udpSocket: UdpProtocol = new UdpProtocol();
              udpSocket.receiveOnce(Number(this.port))
              .subscribe((msg) => {
                  this.receivedMessage = msg;
              }, (error) => {
                  console.error(error);
              });
          }

          public sendBroadcast() {
              const udpSocket: UdpProtocol = new UdpProtocol();
              this.message = msgDefault + this.messageCount;
              udpSocket.sendBroadcast(this.port, this.message)
              .subscribe(() => {
                  this.status = \"Broadcast message sent\";
                  this.messageCount++;
              });
          }

          public sendUnicast() {
              const udpSocket: UdpProtocol = new UdpProtocol();
              this.message = msgDefault + this.messageCount;
              udpSocket.sendUnicast(this.ip, this.port, this.message)
              .subscribe(() => {
                  this.status = \"Unicast message sent\";
                  this.messageCount++;
              });
          }
      \n

      License

      \n

      MIT

      \n

      Thanks to

      \n

      Special thanks to NathanaelA who helped to solve outstanding issues

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sonos":{"name":"nativescript-sonos","version":"0.5.1","license":"MIT","readme":"

      NativeScript Sonos Plugin (WIP)

      \n

      This plugin provides an interface for controlling a Sonos system on a local network from a NativeScript app. It is influenced heavily by the NodeJS Sonos library created by Ben Evans.

      \n

      This is an incomplete, work-in-process plugin. Use accordingly.

      \n

      Run the demo

      \n

      After cloning this repo, navigate to the repo folder in your terminal and run this command:

      \n
      $ npm run demo.ios
      \n

      This will build the lastest version of the plugin, add it to the demo project and launch the demo in the emulator.

      \n

      NOTE: The demo has only been tested for iOS, but the plugin should work on both iOS and Android.

      \n

      How to use this plugin?

      \n

      Add the plugin to a NativeScript application from the terminal:

      \n
      $ tns plugin add nativescript-sonos
      \n

      In your app, initialize the plugin with a valid Sonos IP address:

      \n
      import { Sonos } from \"nativescript-sonos\"

      let sonos = new Sonos(\"10.0.1.188\"); //Replace with your Sonos IP address
      \n

      You can now call methods to control a Sonos player. Unlike the original NodeJS library, this plugin uses Promises for all async methods. For example, to Play:

      \n
      this.sonos.play()
        .then(() => {
          // Command to play completed successfully
        })
        .catch((err) => {
          // Something went wrong; handle the error state
        });
      \n

      Supported operations

      \n

      This plugin does not yet support all of the methods from the original NodeJS library. Currently implemented methods are:

      \n
        \n
      • currentTrack: () => Promise;
        • \n
      • selectTrack: (trackNr?: number) => Promise;
        • \n
      • getVolume: () => Promise;
        • \n
      • setVolume: (volume: number) => Promise;
        • \n
      • getMuted: () => Promise;
        • \n
      • setMuted: (muted: boolean) => Promise;
        • \n
      • play: (uri?: string | UriObject) => Promise;
        • \n
      • stop: () => Promise;
        • \n
      • pause: () => Promise;
        • \n
      • seek: (seconds: number) => Promise;
        • \n
      • next: () => Promise;
        • \n
      • previous: () => Promise;
        • \n
      • flush: () => Promise;
        • \n
      • becomeCoordinatorOfStandaloneGroup: () => Promise;
        • \n
      • setName: (name: any) => Promise;
        • \n
      • setPlayMode: (playmode: PlayModeEnum) => Promise;
        • \n
      • selectQueue: () => Promise;
        • \n
      • queue: (uri: string | UriObject, positionInQueue?: number) => Promise;
        • \n
      • getCurrentState: () => Promise;
        • \n
      • getZoneInfo: () => Promise;
        • \n
      • getZoneAttrs: () => Promise;
        • \n
      • getZoneGroupState: () => Promise<SonosZoneGroup[]>;
        • \n
      • getLEDState: () => Promise;
        • \n
      • setLEDState: (setStateOn: boolean) => Promise;
        • \n
      • getTopology: () => Promise;
        • \n
      • getZonesWithDescriptions: () => Promise<SonosZone[]>;
        • \n
      • deviceDescription: (host?: string, port?: number) => Promise;
        • \n
      • getQueue: () => Promise;
        • \n
      • getMusicLibrary: (searchType: SonosSearchType, startIndex?: number, pageSize?: number) => Promise;
        • \n
      • searchMusicLibrary: (searchType: SonosSearchType, searchTerm: string, startIndex?: number, pageSize?: number) => Promise;
        • \n
      • getFavoritesRadioStations: (startIndex?: number, pageSize?: number) => Promise;
        • \n
      • getFavoritesRadioShows: (startIndex?: number, pageSize?: number) => Promise;
        • \n
      • getFavoritesRadio: (favoriteRadioType: any, startIndex?: number, pageSize?: number) => Promise;
        • \n
      • playTuneinRadio: (stationId: any, stationTitle: any) => Promise;
        • \n
      • addSpotify: (trackId: any) => Promise;
        • \n
      • playSpotifyRadio: (artistId: any, artistName: any) => Promise;
        • \n
      • addSpotifyQueue: (trackId: any) => Promise;
        • \n
      \n

      Sonos device discovery APIs

      \n

      This plugin does not yet support the Discovery APIs (allowing you to automatially locate Sonos devices on the network) due to the lack of support in NativeScript for UDP socket connections.

      \n

      When UDP socket connections become possible, Discovery APIs should be possible in NativeScript.

      \n

      Contributions welcome. 😀

      \n

      What's next?

      \n

      Additional Sonos APIs from the NodeJS library will be exposed in this plugin. If there is an API you need that is not yet exposed, open an Issue and we'll try to prioritize it.

      \n

      Contributions and constructive feedback welcome.

      \n

      License

      \n

      MIT. Use it, transform it, whatever.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-animation-spring":{"name":"nativescript-animation-spring","version":"0.0.3","license":"MIT","readme":"

      NOTE: You can use this animation effect by itself, or you can get the nativescript-effects plugin, which not only has this effect built in, but has a bunch of other convenient effects

      \n

      NativeScript Spring Animation

      \n

      A NativeScript plugin that adds the Spring effect to animations. The iOS curves that are supported include Linear, EaseIn, EaseOut and EaseInOut, but no Spring. Currently this module supports only iOS, but since Android animation curves include a 'spring-type' of animation, a similar effect already exists.

      \n

      \"\"

      \n

      Installation

      \n
      $ tns plugin add nativescript-animation-spring
      \n

      This command automatically installs the necessary files, as well as stores nativescript-animation-spring as a dependency in your project's package.json file.

      \n

      Usage

      \n

      To use the animation spring module you must first require() it. After you require() the module you have access to its APIs.

      \n
      var animationSpringModule = require(\"nativescript-animation-spring\");
      \n

      API

      \n

      View.animate Method

      \n

      Use the View.animate() method as you normally would just as described in the NativeScript Docs in the Animation Section. In order to get the Spring effect, there are several options that need to be specified besides the standard ones like transform and scale:

      \n
        \n
      • duration: decimal (in ms)
        • \n
      • delay: decimal (in ms)
        • \n
      • dampingRatio: float
        • \n
      • velocity: float
        • \n
      • options: object (UIViewAnimationOptions)
        • \n
      • curve: string (to use the spring animation, curve must be set to "spring")
        • \n
      \n

      The full set of options is documented on the Apple developer site. Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).

      \n
      myView.animate({
                  translate: {
                      x: 0,
                      y: -100
                  },
                  scale: {
                      x: 2,
                      y: 2
                  },
                  duration: 10000,
                  delay: 0,
                  dampingRatio: 0.3,
                  velocity: 2.0,
                  options: null,
                  curve: \"spring\" //<---set this to \"spring\" to use the spring animation
              })
      \n

      Whether you include this plugin or not, calling the animate function above will work as the extra parameters will be ignored by the NativeScript animate function.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/template-blank":{"name":"@nativescript-vue/template-blank","version":"3.0.0-beta.10","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-localize":{"name":"nativescript-localize","version":"4.2.2","license":"MIT","readme":"

      NativeScript 7

      \n\n

      If using 6 and below, see the following:

      \n

      nativescript-localize

      \n

      \"npm\"\n\"npm\"

      \n

      This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is inspired from nativescript-i18n

      \n

      Credits

      \n

      A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

      \n

      Table of contents

      \n\n

      Installation

      \n
      tns plugin add nativescript-localize
      \n

      Usage

      \n

      Create a folder i18n in the app folder with the following structure:

      \n
      app
        | i18n
            | en.json           <-- english language
            | fr.default.json   <-- french language (default)
            | es.js
      \n

      You need to set the default langage and make sure it contains\nthe application name to avoid any error.

      \n

      Angular

      \n

      app.module.ts

      \n
      import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
      import { NativeScriptLocalizeModule } from \"nativescript-localize/angular\";
      import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

      import { AppComponent } from \"./app.component\";

      @NgModule({
        declarations: [AppComponent],
        bootstrap: [AppComponent],
        imports: [
          NativeScriptModule,
          NativeScriptLocalizeModule
        ],
        schemas: [NO_ERRORS_SCHEMA]
      })
      export class AppModule { }
      \n

      Template

      \n
      <Label text=\"{{ 'Hello world !' | L }}\"/>
      <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
      \n

      Script

      \n
      import { localize } from \"nativescript-localize\";

      console.log(localize(\"Hello world !\"));
      \n

      Javascript / XML

      \n

      app.js

      \n
      const application = require(\"application\");
      const localize = require(\"nativescript-localize\");
      application.setResources({ L: localize });
      \n

      Template

      \n
      <Label text=\"{{ L('Hello world !') }}\"/>
      <Label text=\"{{ L('I am %s', 'user name') }}\"/>
      \n

      Script

      \n
      const localize = require(\"nativescript-localize\");

      console.log(localize(\"Hello world !\"));
      \n

      Quirks

      \n

      ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

      \n
        const page = args.object;
        page.bindingContext = new Observable();
      \n

      Vue

      \n

      app.js

      \n
      import { localize } from \"nativescript-localize\";

      Vue.filter(\"L\", localize);
      \n

      Template

      \n
      <Label :text=\"'Hello world !'|L\"></Label>
      <Label :text=\"'I am %s'|L('user name')\"></Label>
      \n

      File format

      \n

      Each file is imported using require, use the file format of your choice:

      \n

      JSON

      \n
      {
        \"app.name\": \"My app\",
        \"ios.info.plist\": {
          \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
        },
        \"user\": {
          \"name\": \"user.name\",
          \"email\": \"user.email\"
        },
        \"array\": [
          \"split the translation into \",
          \"multiples lines\"
        ],
        \"sprintf\": \"format me %s\",
        \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
      }
      \n

      Javascript

      \n
      const i18n = {
        \"app.name\": \"My app\"
      };

      module.exports = i18n;
      \n

      Frequently asked questions

      \n

      How to set the default language?

      \n

      Add the .default extension to the default language file to set it as the fallback language:

      \n
      fr.default.json
      \n

      How to localize the application name?

      \n

      The app.name key is used to localize the application name:

      \n
      {
        \"app.name\": \"My app\"
      }
      \n

      How to localize iOS properties?

      \n

      Keys starting with ios.info.plist. are used to localize iOS properties:

      \n
      {
        \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      }
      \n

      How to change the language dynamically at runtime?

      \n

      This plugin uses the native capabilities of each platform, language selection is therefore made by the OS.

      \n

      On iOS you can programmatically override this language since plugin version 4.2.0 by doing this:

      \n
      import { overrideLocale } from \"nativescript-localize/localize\";
      const localeOverriddenSuccessfully = overrideLocale(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
      \n

      On Android you can programatically override this language since plugin version 4.2.1 by doing this:

      \n

      In your app.ts / main.ts / app.js

      \n
      import { on, launchEvent } from '@nativescript/core/application';
      import { androidLaunchEventLocalizationHandler } from 'nativescript-localize/localize';

      on(launchEvent, (args) => {
        if (args.android) {
          androidLaunchEventLocalizationHandler();
        }
      });
      \n

      And in your settings page where user chooses the language:

      \n
      import { overrideLocale } from \"nativescript-localize/localize\";
      const localeOverriddenSuccessfully = overrideLocale(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
      \n
      \n

      Important: In both cases, after calling override Locale, you must ask the user to restart the app

      \n
      \n

      For Example:

      \n
      import { android as _android } from '@nativescript/core/application';
      import { overrideLocale } from 'nativescript-localize/localize';

      alert({
        title: 'Switch Language',
        message: 'The application needs to be restarted to change language',
        okButtonText: 'Quit!'
      }).then(() => {
        L.localize.overrideLocale(selectedLang);
        if (isAndroid) {
          _android.foregroundActivity.finish();
        } else {
          exit(0);
        }
      });
      \n
      \n

      Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

      \n
      \n
      android {

        // there maybe other code here //

        bundle {
          language {
            enableSplit = false
          }
        }
      }
      \n
      \n

      Tip: you can get the default language on user's phone by using this

      \n
      \n
      import { device } from '@nativescript/core/platform';

      console.log(\"user's language is\", device.language.split('-')[0]);
      \n
      \n

      Tip: overrideLocale method stores the language in a special key in app-settings,\nyou can access it like this,

      \n
      \n
      import { getString } from '@nativescript/core/application-settings'; 

      console.log(getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
      \n

      Troubleshooting

      \n

      The angular localization pipe does not work when in a modal context

      \n

      As a workaround, you can trigger a change detection from within your component constructor:

      \n
      constructor(
        private readonly params: ModalDialogParams,
        private readonly changeDetectorRef: ChangeDetectorRef,
      ) {
        setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
      }
      \n

      Starting from Android N, there is a weird side effect while using a WebView.

      \n

      For unknown reasons, the very first creation of it resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is native bug and the workaround is

      \n
       <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
      \n
      import {overrideLocale, androidLaunchEventLocalizationHandler} from \"nativescript-localize/localize\";
      import {getString} from '@nativescript/core/application-settings';
      const locale = getString('__app__language__')

      function webViewLoaded(){
          overrideLocale(locale)
          androidLaunchEventLocalizationHandler()
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"n7-google-places-autocomplete":{"name":"n7-google-places-autocomplete","version":"1.0.11","license":"Apache-2.0","readme":"

      Nativescript Google Places Autocomplete

      \n

      \"npm\n\"Twitter

      \n

      Add location autocomplete to your Nativescript application

      \n

      \"\"

      \n

      Prerequisites

      \n

      Create and grap your Api key from https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en

      \n

      Installation

      \n
      tns plugin add nativescript-google-places-autocomplete
      \n

      Usage

      \n
          import { GooglePlacesAutocomplete } from 'nativescript-google-places-autocomplete';
      \t
      \tlet API_KEY = \"your_api_Key\";
      \tlet googlePlacesAutocomplete = new GooglePlacesAutocomplete(API_KEY);

      \tgooglePlacesAutocomplete.search(params)
      \t      .then((places: any) => {
      \t\t      // place predictions list
                 }, (error => {
                    console.log(error)
                }));
                
      \tgooglePlacesAutocomplete.getPlaceById(place.placeId).then((place) => {
      \t   .then(function () { });
              }, error => {
                  console.log(error)
              })
      \n

      Plugin Auther : Aymen Labidi

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-android-toast":{"name":"nativescript-android-toast","version":"0.3.0","license":"MIT","readme":"

      Nativescript Android Toast

      \n

      \"npm\"\n\"GitHub\"\n\"Build\n\"npm\"\n\"GitHub\n\"Status\"\n\"Twitter

      \n

      Installation:

      \n

      tns plugin add nativescript-android-toast

      \n
      \n

      API (Methods)

      \n
      MakeToast(text : String, duration : \"long\" or \"short\");
      \n
      \n

      API (Properties)

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeRequireDescription
      textStringRequiredText you want to toast
      durationStringOptional"long" or "short" duration
      \n

      Demo

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Demo 1Demo 2
      \"Demo\"Demo
      \n
      \n

      Usage

      \n

      TypeScript

      \n
      import Toast from \"nativescript-android-toast\";

      showToast() {
          Toast.MakeToast(\"Hello Typescript\",\"short\");
      }
      \n
      \n
      <Button text=\"click\" (tap)=\"showToast();\">
      \n
      \n

      JavaScript

      \n
      var Toast = require(\"nativescript-android-toast\");

      showToast() {
          Toast.MakeToast(\"Hello Javascript\",\"long\");
      }
      \n
      \n

      https://developer.android.com/reference/android/widget/Toast

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"postcss-nativescript":{"name":"postcss-nativescript","version":"0.0.0","license":"MIT","readme":"

      PostCSS Plugin Nativescript

      \n

      \n

      Сreate new PostCSS plugins in a few steps:

      \n
        \n
      1. \n

        Clone this repository:

        \n
        git clone https://github.com/postcss/postcss-plugin-boilerplate.git
        \n
        2. \n
      2. \n

        Execute the wizard script. It will ask you a few questions\nand fill all files with your data.

        \n
        node ./postcss-plugin-boilerplate/start
        \n

        Call it with --yarn argument, if you prefer yarn\npackage manager:

        \n
        node ./postcss-plugin-boilerplate/start --yarn
        \n

        Or use --no-install if you want to skip dependencies installation.

        \n
        3. \n
      3. \n

        Your plugin repository will now have a clean Git history.\nCreate the GitHub repository\nand push your project there.

        \n
        4. \n
      4. \n

        Add your project to Travis CI.

        \n
        5. \n
      5. \n

        Write some code to index.js and tests to index.test.js.

        \n
        6. \n
      6. \n

        Execute npm test command

        \n
        7. \n
      7. \n

        Add input and output CSS examples to README.md.

        \n
        8. \n
      8. \n

        Add options descriptions if your plugin has them.

        \n
        9. \n
      9. \n

        Fill CHANGELOG.md with initial version and release it to npm.

        \n
        10. \n
      10. \n

        Fork PostCSS, add your plugin to the\nPlugins list\nand send a pull request.

        \n
        11. \n
      11. \n

        Follow @PostCSS to get the latest updates.

        \n
        12. \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-phaser-ce":{"name":"nativescript-phaser-ce","version":"1.0.0-alpha2","license":"Apache-2.0","readme":"

      nativescript-phaser-ce

      \n

      Tools for using Phaser-ce to build native 2D games in NativeScript 👾

      \n\n

      Installation

      \n
      npm i nativescript-phaser-ce
      \n

      Usage

      \n

      Import the library into your JavaScript file:

      \n
      import TNSPhaser from \"nativescript-phaser-ce\";
      \n

      Functions

      \n

      TNSPhaser.game({ canvas, renderer: Phaser.WEBGL || Phaser.CANVAS, ...extras })

      \n

      Given a canvas from a\nTNSCanvas, return a\nPhaser.Game\nthat draws into it.

      \n

      Props

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescriptionDefault Value
      canvasTNSCanvasRequired: canvas that the Phaser.Game will render tonull
      renderernumber?Optional: choose the renderer type e.g Phaser.CANVAS (1) , Phaser.WEBGL(2)1
      widthnumber?Optional: height of the Phaser.Gamecanvas height
      heightnumber?Optional: width of the Phaser.Gamecanvas width
      titlestring?Optional: title of the Phaser.Game"tns-phaser-game"
      preventLoopboolean?Optional: Prevents the app from calling canvas.nativeView.flush() every framefalse
      \n

      Returns

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyTypeDescription
      gamePhaser.GameThe Phaser-ce game used for rendering game logic
      \n

      Example

      \n
      const game = TNSPhaser.game({ canvas });
      \n

      What does it do?

      \n

      Under the hood, TNSPhaser is maintaining global instances of a few libraries.

      \n\n
      window.PIXI = require(\"phaser-ce/build/custom/pixi\");
      window.p2 = require(\"phaser-ce/build/custom/p2\");
      window.Phaser = require(\"phaser-ce/build/phaser\");
      \n

      Other libs can be included but are not required. For instance you can import the custom Creature lib the same way.\nWe also override the PIXI.WebGLRenderer.updateTexture to make it compatible with NativeScript.

      \n

      Finally when a new instance of TNSPhaser.Game is created, we set the document.readyState to 'complete' and save the global instance of context

      \n
      global.__context = context;
      global.document.readyState = \"complete\";
      \n

      Then we create a standard render loop and call canvas.nativeView.flush() to flush the frame queue and render our context.

      \n
      const render = () => {
        requestAnimationFrame(render);
        canvas.nativeView.flush();
      };
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nickykln/nativescript-google-analytics":{"name":"@nickykln/nativescript-google-analytics","version":"0.4.4","license":"Apache-2.0","readme":"

      Nativescript Google Analytics Plugin

      \n\n

      Watch the video

      \n

      \"Watch

      \n

      Release Notes

      \n

      0.4.3

      \n
        \n
      • Updated demos to TS
        • \n
      • Updated demos to 4.0, verified functionality
        • \n
      \n

      0.4.0

      \n
        \n
      • Migrate to new plugin seed structure
        • \n
      \n

      0.3.5

      \n\n

      0.3.2

      \n
        \n
      • Add UserId support
        • \n
      \n

      0.3.0

      \n
        \n
      • Rename Podfile dir
        • \n
      • Update repo name to match plugin (OOPS)
        • \n
      \n

      0.2.9

      \n
        \n
      • Update Gradle refs
        • \n
      • Fix demo nav
        • \n
      \n

      0.2.8

      \n
        \n
      • Remove specific version of play-services on android
        • \n
      \n

      0.2.7

      \n
        \n
      • TS File fix
        • \n
      • Updated logging options
        • \n
      \n

      0.2.6

      \n
        \n
      • Enabled Exception Reporting on the Android side "enableExceptionReporting"
        • \n
      \n

      0.2.5

      \n
        \n
      • Added Typescript definition file
        • \n
      \n

      0.2.3

      \n
        \n
      • Timing API Start\\End functions
        • \n
      \n

      0.2.0

      \n
        \n
      • Exception Logging API
        • \n
      • Timing logging API
        • \n
      \n

      0.1.9

      \n
        \n
      • Breaking Change: Init method now takes an object, not just a string
        • \n
      • Fixed Dispatch to be configurable, and exposed a method to flush
        • \n
      \n

      0.1.7

      \n
        \n
      • Enable Instant dispatch on android
        • \n
      \n

      0.1.5

      \n
        \n
      • Android was missing the include.gradle file
        • \n
      \n

      0.1.5

      \n
        \n
      • Updated sending code to use new {N} Protocol code
        • \n
      \n

      0.1.4

      \n
        \n
      • iOS Grabbing tracker by ID, not default
        • \n
      • Error handling per issue
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mdnx/loopback-sdk-builder":{"name":"@mdnx/loopback-sdk-builder","version":"2.3.1-1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@squirrel-social/contacts":{"name":"@squirrel-social/contacts","version":"1.1.1","license":"Apache-2.0","readme":"

      @squirrel-social/contacts

      \n
      ns plugin add @squirrel-social/contacts
      \n

      Usage

      \n

      Based on https://github.com/abhayastudios/nativescript-contacts-lite

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsyelpapi":{"name":"nsyelpapi","version":"1.0.1","license":"Apache-2.0","readme":"

      NSYelpApi

      \n

      Native implementation of the Official Native YelpApi Implementation

      \n

      (Optional) Prerequisites / Requirements

      \n

      A YelpApi api key is required. Sign up at https://www.yelp.com/developers

      \n

      Installation

      \n
      tns plugin add NSYelpApi
      \n

      Usage

      \n

      General Setup

      \n
          import { NSYelpApi } from 'NSYelpApi';


          export class HelloWorldModel extends Observable {
              public message: string;
              private api: NSYelpApi;

          constructor() {
          super();
          this.api = new NSYelpApi(YOUR_API_KEY);
          this.api.businessSearchWithId('9MzzaGTQdvkhGKvUsLD2kw')
              .then((t) => console.log(t))
              .catch(err => console.error(err));

          const coordinates = {latitude: 41.313822, longitude: -72.91276};
          this.api.searchWithQuery(coordinates, null, false, 50, 9, null, 'best_match', 'pizza')
              .then((a) => console.log(a, 't'))
              .catch(err => console.log(err, 'a'));
          }
      }
      \n

      Getting A Business With an Id

      \n
          searchById() {
              this.api.businessSearchWithId('CP_IN_SbHWCvcD5zYxbP0A')
                  .then((results: Business) => {
                      const parsedResults = results.name;
                      const data: NavigationExtras = {
                          queryParams: {
                              business: JSON.stringify(results)
                          }
                      };
                      this.router.navigate(['/business'], data);
                  })
                  .catch(err => console.error(err));
          }
      \n

      Getting A Business By Phone

      \n
          searchByPhone() {
              this.api.businessSearchWithNumber('2037765306')
                  .then((results: Business) => {
                      const parsedResults = results.name;
                      const data: NavigationExtras = {
                          queryParams: {
                              business: JSON.stringify(results)
                          }
                      };
                      this.router.navigate(['/business'], data);
                  })
                  .catch(err => console.error(err));
          }
      \n

      Getting reviews by business ID

      \n
          reviewsById() {
              this.api.businessReviewsWithId('CP_IN_SbHWCvcD5zYxbP0A')
                  .then((results: Reviews) => {
                      const review = results.reviews[0];
                      const total = results.total;
                      const data: NavigationExtras = {
                          queryParams: {
                              review: JSON.stringify(review),
                              total: total
                          }
                      };

                      this.router.navigate(['/reviews'], data);
                  });
              }
      \n

      Example Response of Reviews

      \n

          const reviews = {
              reviews: [
                  message: \"I just love Modern Apizza. Every couple of weeks I crave for modern and go back there to have a custom made pizza. The combo I like a lot and would...\",
                  rating: 5,
                  timeCreate: \"2019-03-09T22:36:58.000Z\",
                  user: \"Akshay A.\"
              ],
              total: 1
          }
      \n

      Example Reponse of Business

      \n

          const business = {
                  id: \"jfqLSA2Ic9gC9BpahJLbTA\",
                  name: \"Frank Pepe Pizzeria Napoletana\",
                  closed: false,
                  website: \"https://www.yelp.com/biz/frank-pepe-pizzeria-napoletana-new-haven?adjust_creative=Jx7qaHGmn1sKws49NEEdHA&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=Jx7qaHGmn1sKws49NEEdHA\",
                  categories: [
                      {
                          alias: \"pizza\",
                          name: \"Pizza\"
                      },
                      {
                          alias: \"italian\",
                          name: \"Italian\"
                      },
                      {
                          alias: \"wine_bars\",
                          name: \"Wine Bars\"
                      }
                  ],
                  location: {
                      address: \"157 Wooster St\",
                      city: \"New Haven\",
                      coordinates: {
                          latitude: 41.302918,
                          longitude: -72.916899
                      },
                      countryCode: \"US\",
                      postalCode: \"06511\",
                      stateCode: \"CT\"
                  },
                  rating: 4,
                  imageUrl: \"https://s3-media1.fl.yelpcdn.com/bphoto/eHWOn8Ew9iE4TfrYcHv9tg/o.jpg\",
                  reviewCount: 2
          }
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-media-generator":{"name":"nativescript-media-generator","version":"1.0.0","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tbaluyan/loopback-sdk-builder":{"name":"@tbaluyan/loopback-sdk-builder","version":"2.3.2","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-contacts-lite":{"name":"nativescript-contacts-lite","version":"0.2.7","license":"MIT","readme":"

      NativeScript Contacts Lite

      \n

      This nativescript-contacts-lite plugin provides pretty fast (but hey it's all relative) read-only access to the iOS and Android contact directory. By limiting the scope of the result set through the desiredFields, it is possible to obtain a JSON object containing the relevant data of the contact directory within a couple of hundred milliseconds.

      \n

      Demo Application

      \n

      This repository contains a demo application in the demo-angular folder that uses this plugin to display a contact picker. The demo app can be a good starting point for your app and may be used for narrowing down issues whilst debugging. Just clone this repo and run tns run <platform> in the demo-angular folder.

      \n

      Installation

      \n

      Run tns plugin add nativescript-contacts-lite

      \n

      Usage

      \n

      To use the contacts module you must first require() it.

      \n
      var Contacts = require(\"nativescript-contacts-lite\");
      \n

      Methods

      \n

      getContacts & getContactsWorker

      \n

      Both methods retrieve contacts and share the same interface. The difference is that the former runs in the main thread and the latter within a web worker.

      \n

      Argument 1: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. Possible values are:

      \n
      [
        'address',
        'display_name',
        'email',
        'name_details',
        'nickname',
        'note',
        'organization',
        'phone',
        'photo',
        'thumbnail',
        'website'
      ]
      \n

      Argument 2: searchTerm (optional)\nA string with a search term to limit the result set to only contacts whose display_name contain the term. Defaults to fetching all relevant contacts if an empty search term is provided or none at all.

      \n

      Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

      \n

      Example using getContacts

      \n
      let desiredFields = ['display_name','phone'];
      let searchTerm = 'Jon';

      console.log('Loading contacts...');
      let timer = new Date().getTime();

      Contacts.getContacts(desiredFields,searchTerm).then((result) => {
        console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
        console.log(`Found ${result.length} contacts.`);
        console.dir(result);
      }, (e) => { console.dir(e); });
      \n

      Example using getContactsWorker

      \n
      let desiredFields = ['display_name','phone','thumbnail','email','organization'];

      console.log('Loading contacts...');
      let timer = new Date().getTime();

      Contacts.getContactsWorker(desiredFields).then((result) => {
        console.log(`Loading contacts completed in ${(new Date().getTime() - timer)} ms.`);
        console.log(`Found ${result.length} contacts.`);
        console.dir(result);
      }, (e) => { console.dir(e); });
      \n

      getContactById

      \n

      Get contact details for a specific contact.

      \n

      Argument 1: contactId\nThe identifier of the contact you wish to obtain details of (obtained through the getContacts(Worker) methods).

      \n

      Argument 2: desiredFields\nAn array containing the desired fields to fetch from phone's storage backend. See getContacts method for possible values.

      \n

      Argument 3: debug (optional)\nBoolean (true/false) determining whether to pass debug messages to the console. Defaults to false.

      \n

      Example

      \n
      let contact_id = contact.contact_id // get id from result of getContacts method

      let desiredFields = [
        'address',
        'display_name',
        'email',
        'name_details',
        'nickname',
        'note',
        'organization',
        'phone',
        'photo',
        'thumbnail',
        'website'
      ]

      Contacts.getContactById(contact_id,desiredFields).then((result) => {
        console.dir(result);
      }, (e) => { console.dir(e); });
      \n

      Performance

      \n

      Considerations

      \n

      Running in main thread versus web worker

      \n

      The plugin provides both methods that run in either the main/UI thread or within a web worker. Although offloading the processing to a separate thread adds web worker initialization time, it guarantees that the main UI thread will continue to work smoothly.

      \n

      If you are implementing an autocomplete where on each key you are querying a smaller subset of the contacts, you will probably want to go with the non-worker variant to avoid web worker initialization time while the user is waiting. On the other hand, if you are reading the entire contact directory while initializing your app, you probably want this to happen in the background to avoid the UI getting stuck while processing. In the latter case you probably would want to use the web worker variant.

      \n

      Contact Picker Example

      \n

      Another way to speed up performance is possible in certain cases like when you are building a contact picker. In this case it is probably good enough to first provide a narrow array of desiredFields like ['display_name','thumbnail'] to getContacts to display the list. Only when the user selects a specific contact, you can obtain all details for a specific contact by supplying a wider array of desiredFields to getContactById. This example has been implemented in the demo app located in this repository.

      \n

      Benchmarks

      \n

      Android

      \n

      On a relatively old Samsung Galaxy S4 a list of ~600 contacts is returned somewhere between ~300ms up to ~2s depending on the desired fields and whether you run in the main thread or in a web worker.

      \n

      iOS

      \n

      Tests on an iPhone 7 plus with ~600 contacts returned in ~105ms when running getContacts(['display_name', 'phone']) (so non worker). This could use some more real iOS device data in different modes (e.g. more fields & web worker mode) if anyone has some.

      \n

      Notes

      \n

      Bundling with Webpack

      \n

      This plugin is compatible with webpack bundling through the nativescript-dev-webpack plugin as of NativeScript 3.2. However, if you are using the web worker functions, we need to ensure that the web worker resources are included in the package. For this purpose, you should add the nativescript-worker-loader to your project: npm i -D nativescript-worker-loader.

      \n

      Photo & Thumbnail Images

      \n

      The plugin returns photo & thumbnail images as a base64 encoded string ready to be used as the source attribute of an image, e.g. <Image *ngIf="item.thumbnail" [src]="item.thumbnail"></Image>

      \n

      Android Specifics

      \n

      Permissions

      \n

      This plugin uses the nativescript-permissions plugin by Nathanael Anderson for obtaining read-only permissions to the phone's contacts on Android 6 and above.

      \n

      iOS Specifics

      \n

      Since the plugin uses the Contact framework it is supported only on iOS 9.0 and above!

      \n

      Permissions

      \n

      As of iOS 10 it has become mandatory to add the NSContactsUsageDescription key to your application's Info.plist (see Apple's developer documentation).

      \n

      Therefore you should add something like this to your ~/app/App_Resources/iOS/Info.plist:

      \n
      <key>NSContactsUsageDescription</key>
      <string>This application requires access to your contacts to function properly.</string>
      \n

      Acknowledgements

      \n

      The iOS part of this plugin is based on code from the nativescript-contacts plugin.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bradmartin/nativescript-input-mask":{"name":"@bradmartin/nativescript-input-mask","version":"0.1.2","license":"Apache-2.0","readme":"

      Nativescript Input Mask

      \n

      Format user input and process only the characters valueable to your application. Use this plugin to format phone numbers, credit card numbers, and more in a way that is more friendly for your data handling processes.

      \n

      This plugin makes the native libraries InputMask(Android) and InputMask(iOS) compatible with Nativescript.

      \n

      Installation

      \n
      tns plugin add nativescript-input-mask
      \n

      Usage

      \n

      Use by adding a mask property to an InputMask field. Masks can be changed on the fly, which causes the current extracted value to be re-applied to the new mask. Any characters that do not meet the mask criteria will be dropped.

      \n

      Documentation for masks is below (from here).

      \n
      \n

      Masks consist of blocks of symbols, which may include:

      \n
        \n
      • [] — a block for valueable symbols written by user.
        • \n
      \n

      Square brackets block may contain any number of special symbols:

      \n
        \n
      1. 0 — mandatory digit. For instance, [000] mask will allow user to enter three numbers: 123.
        2. \n
      2. 9 — optional digit . For instance, [00099] mask will allow user to enter from three to five numbers.
        3. \n
      3. А — mandatory letter. [AAA] mask will allow user to enter three letters: abc.
        4. \n
      4. а — optional letter. [АААааа] mask will allow to enter from three to six letters.
        5. \n
      5. _ — mandatory symbol (digit or letter).
        6. \n
      6. - — optional symbol (digit or letter).
        7. \n
      \n

      Other symbols inside square brackets will cause a mask initialization error.

      \n

      Blocks may contain mixed types of symbols; such that, [000AA] will end up being divided in two groups: [000][AA] (this happens automatically).

      \n

      Blocks must not contain nested brackets. [[00]000] format will cause a mask initialization error.

      \n

      Symbols outside the square brackets will take a place in the output.\nFor instance, +7 ([000]) [000]-[0000] mask will format the input field to the form of +7 (123) 456-7890.

      \n
        \n
      • {} — a block for valueable yet fixed symbols, which could not be altered by the user.
        • \n
      \n

      Symbols within the square and curly brackets form an extracted value (valueable characters).\nIn other words, [00]-[00] and [00]{-}[00] will format the input to the same form of 12-34,\nbut in the first case the value, extracted by the library, will be equal to 1234, and in the second case it will result in 12-34.

      \n

      Mask format examples:

      \n
        \n
      1. [00000000000]
        2. \n
      2. {401}-[000]-[00]-[00]
        3. \n
      3. [000999999]
        4. \n
      4. {818}-[000]-[00]-[00]
        5. \n
      5. [A][-----------------------------------------------------]
        6. \n
      6. [A][_______________________________________________________________]
        7. \n
      7. 8 [0000000000]
        8. \n
      8. 8([000])[000]-[00]-[00]
        9. \n
      9. [0000]{-}[00]
        10. \n
      10. +1 ([000]) [000] [00] [00]
        11. \n
      \n
      \n

      Angular

      \n

      Add the following lines to app/app.module.ts:

      \n
      import { InputMaskModule } from 'nativescript-input-mask/angular';

      @NgModule({
          // ...
          imports: [
              // ...
              InputMaskModule,
              // ...
          ],
          // ...
      })
      \n

      Use like a TextField with a mask property and other event properties:

      \n
      import { Component, NgZone, OnInit } from \"@angular/core\";

      @Component({
        selector: \"ns-app\",
        template: `
          <StackLayout>
              <InputMask
                  mask=\"([000]) [000]-[0000]\"
                  (extractedValueChange)=onExtractedValueChange($event)
                  (completedChange)=\"onCompletedChage($event)\">
              </InputMask>
          </StackLayout>
              `      ,
      })
      export class AppComponent {
          onExtractedValueChange(args) {
              // `args.value` includes only extracted characters, for instance
              // `1235551111` would be logged while the UI would display `(123) 555-1111`.
              console.log('Extracted value:', args.value);
          }

          onCompletedChange(args) {
              // `args.value` indicates whether the field contains all mandatory characters.
              console.log('Completed:', args.value)
          }
      }
      \n

      Note that masks can be bound and changed on the fly. See demo app for a working implementation.

      \n

      API

      \n

      The InputMask class extends TextField and implements the following additional properties:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      mask""The mask property to apply to text entered into the field.
      extractedValue""The value extracted from the field.
      completedfalseIndicates whether all mandatory characters have been filled.
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@sirl-io/loopback-sdk-builder":{"name":"@sirl-io/loopback-sdk-builder","version":"2.4.1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is a clone of @mean-expert/loopback-sdk-builder by the author Jonathan Casarrubias. Given the project is no longer in active management we are making and contributing changes to this version.

      \n
      \n

      The @sirl-io/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @sirl-io/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ably":{"name":"nativescript-ably","version":"0.2.0","license":{"type":"MIT","url":"https://github.com/atende/nativescript-ably/blob/master/LICENSE"},"readme":"

      NativeScript Ably Plugin

      \n

      A wrapper around ably.io libraries for Android and IOS

      \n

      Strategy

      \n

      To goal is to separate API from implementation:

      \n
        \n
      • api folder is used to common and API declarations
        • \n
      • impl folder is used to the implementation
        • \n
      • ably.android.ts and ably.ios.ts initialize the appropriated implementation for the platform
        • \n
      • ably.d.ts provide typescript definition derived from the API.
        • \n
      \n

      The application just need to import nativescript-ably module.\nExample:

      \n

      import {AblyRealtime, Message, ConnectionStateChange, ConnectionState} from "nativescript-ably"

      \n

      It will import the ably.js file that is generated from ably.android.ts, or ably.ios.ts. Depending on the platform

      \n

      You should not:

      \n
      Import the API folder, unless you are exposing the API in a implementation\nImport the implementation folder, unless you know what you are doing :-)\n
      \n

      Android implemetation will be added first, while learning the API, after tests IOS will be added

      \n

      Demo

      \n

      https://github.com/atende/nativescript-ably-demo

      \n

      Typical development workflow:

      \n
      git clone https://github.com/atende/nativescript-ably\ngit clone https://github.com/atende/nativescript-ably-demo\ncd nativescript-ably\ntsc --watch\ncd ../nativescript-ably-demo\n
      \n
        \n
      1. Make changes to plugin files
        2. \n
      2. Make changes in demo that would test those changes out
        3. \n
      3. npm run live.android or npm run live.ios (must be run from the demo directory)
        4. \n
      \n

      Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

      \n
      cd demo

      // when developing, to ensure the latest code is built into the demo, it's a gaurantee to remove the plugin and add it back
      tns plugin remove nativescript-ably // replace with your plugin name
      tns plugin add ../nativescript-ably

      // manual platform adds
      tns platform add ios
      // and/or
      tns platform add android
      \n

      Then use any of the available options from the tns command line:

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-office365":{"name":"nativescript-office365","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/alexziskind1/nativescript-office365/blob/master/LICENSE"},"readme":"

      Office 365 Graph API plugin for NativeScript

      \n

      \"Office

      \n

      Manage Office 365 Users, Groups, Mail, Calendars, Contacts, Files,\nTasks, People, Notes and more — all from a single endpoint

      \n

      Note: iOS only, for now

      \n

      Features

      \n

      For readability the supported features have been moved to their own README's:

      \n\n

      Prerequisites

      \n

      You should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

      \n

      Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

      \n
        \n
      1. Click the "Add Platform" button and select "Mobile application"
        2. \n
      2. Copy the "Client Id" GUID from the Mobile Application section.
        3. \n
      3. Click "Save" at the bottom.
        4. \n
      \n

      Setup

      \n

      Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-office365
      \n

      Then open references.d.ts in the root of your project and add this line to get autocompletion and type-checking for this plugin:

      \n
      /// <reference path=\"./node_modules/nativescript-office365/office365.d.ts\" />
      \n

      Usage

      \n

      If you want a quickstart, get the demo app here.

      \n

      Start-up wiring

      \n

      We need to do some wiring when your app starts, so open app.ts and add this before application.start();:

      \n
      TypeScript
      \n
      import * as o365 from 'nativescript-office365';

      var o365InitOptions : o365.InitOptions = {
          clientId: '<enter GUID here>', //client id for application (GUID)
          scopes: ['Files.ReadWrite']
      };
      o365.init(o365InitOptions);
      \n

      Note 1: Enter the client id GUID value that was generated for you when you registered your app in the Prerequisites section.

      \n

      Note 2: The scope listed above gives your NativeScript app SharePoint (OneDrive) file read/write permissions. Add/replace with other scope strings to give your app permissions to do other activities. More scopes are listed here

      \n

      Future work

      \n
        \n
      • Add Android support
        • \n
      • Add support for automatic auth token refresh for REST
        • \n
      • Expose MS Graph Client to consumer
        • \n
      \n

      Credits

      \n

      The starting point for this plugin was the NativeScript Plugin Seed by Nathan Walker.\nThe MS Graph Client iOS version wouldn't have worked without the iOS ninja expertise of Jason Zhekov

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-upgrade":{"name":"nativescript-upgrade","version":"0.1.1","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-upgrade/blob/master/LICENSE"},"readme":"

      nativescript-upgrade

      \n

      upgrade for NativeScript.

      \n

      Supported platforms

      \n
        \n
      • Android (any device with Android 4.4 and higher)
        • \n
      \n

      There is no support for iOS yet!

      \n

      Installing

      \n
      tns plugin add nativescript-upgrade
      \n

      Usage

      \n

      Here is a TypeScript example:

      \n
      import {MyUpgradeHelper} from \"nativescript-upgrade\";

      var upgradeHelper = new MyUpgradeHelper();
      upgradeHelper.check(\"http://www.upgrade.com/upgrade?version=3\");
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-epub":{"name":"nativescript-epub","version":"0.1.0","license":"MIT","readme":"

      NativeScript ePub Reader Plugin

      \n

      NativeScript plugin to open and read ePub files natively. Currently only supported on iOS.

      \n

      Getting Started

      \n
        \n
      • npm install nativescript-pdf
        • \n
      • Place your epub files in your App_Resources/iOS directory.
        • \n
      • Import EPubReader in your page and open the file.
        • \n
      \n

      Code Sample

      \n
      import {Observable} from 'data/observable';
      import {EPubReader} from 'nativescript-epub';

      export class HelloWorldModel extends Observable {

        constructor() {
          super();

          let epubReader = new EPubReader();
          epubReader.open('book');
        }

      }
      \n

      Example

      \n

      \"Image\"

      \n

      Credits

      \n
        \n
      • https://github.com/FolioReader/FolioReaderKit
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mwz-apple-sign-in":{"name":"mwz-apple-sign-in","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"svelte-native-akylas":{"name":"svelte-native-akylas","version":"0.7.4-alpha.7","license":"MIT","readme":"

      Svelte Native

      \n

      Create Mobile applications using native widgets via Svelte Svelte and NativeScript.

      \n

      See https://svelte-native.technology for docs and tutorials

      \n

      \"todo

      \n

      Features

      \n

      Svelte-Native includes Svelte specific integrations such as

      \n
        \n
      • The ability to use svelte components to create native applications on top of NativeScript core
        • \n
      • Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
        • \n
      • Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
        • \n
      • Integration with sveltes scoped styles
        • \n
      • Complete coverage of the Nativescript core UI modules
        • \n
      • Uses unmodified Svelte and Nativescript modules
        • \n
      \n

      Work In Progress

      \n

      While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

      \n
        \n
      • [x] At least 1 emoji in readme.md :+1:
        • \n
      • [ ] More Tests 😳 #54
        • \n
      \n

      Installation

      \n

      You can get started developing with this using the latest template

      \n
      $ npm install -g nativescript
      $ tns create myapp --template tns-template-blank-svelte
      \n

      A fresh Svelte Native app will be found in the myapp folder

      \n

      Once installed use the tns preview, tns build or tns run commands as for a normal NativeScript application.

      \n

      Usage

      \n

      App.svelte

      \n
      <page>
          <actionBar title=\"Svelte Native\"></actionBar>
          <stackLayout>
              <label text={msg}></label>
              <button text=\"Change\" on:tap=\"{toggle}\"></button>
          </stackLayout>
      </page>

      <script>
        export let msg = 'Hello World!'
        const toggle = () => {
            msg = \"Hi from svelte\"
        }
      </script>
      \n

      Main.ts

      \n
      import App from './components/App.svelte';

      import { svelteNative } from 'svelte-native'

      svelteNative(App, {msg: \"Hi from launcher\"});
      \n

      Examples

      \n

      Svelte Native HackerNews

      \n

      Simple HackerNews client in Svelte Native.

      \n

      See https://github.com/halfnelson/svelte-native-hackernews for the repo.

      \n

      \"HackerNews

      \n

      Svelte Native Grocery

      \n

      Grocery app example in Svelte Native.

      \n

      See https://github.com/halfnelson/svelte-native-grocery for the repo.

      \n

      \"Grocery

      \n

      Svelte Native Realworld

      \n

      Realworld implementation app in Svelte Native.

      \n

      See https://github.com/halfnelson/svelte-native-realworld for the repo.

      \n

      \"Realworld

      \n

      Credits

      \n

      The DOM implementation is based on the one from Nativescript-Vue. Thanks!\nThe API Docs were ported from the Nativescript-Vue Too\nThe Site Design is from SvelteJS

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@global66/nativescript-firebase-env":{"name":"@global66/nativescript-firebase-env","version":"1.0.1","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vkontakte":{"name":"nativescript-vkontakte","version":"0.1.7","license":"MIT","readme":"

      nativescript-vkontakte

      \n

      A VKontakte NativeScript module for Android and iOS

      \n

      install npm package

      \n
      tns plugin add nativescript-vkontakte
      \n

      Setup

      \n

      Android

      \n

      Initialize inside application onCreate\n(extend application doc)

      \n
      var vk = require(\"nativescript-vkontakte\");
          ...
          onCreate: function() 
          {
              superProto.onCreate.call(this);
              // Enter custom initialization code here
              var context = this.getApplicationContext();
              vk.initialize(context);
          },
      \n

      Subscribe on activityResult

      \n
      import * as application from \"application\";
      import * as vk from \"nativescript-vkontakte\";

      application.android.on('activityResult', data => 
      {
          let res = vk.onActivityResult(data.requestCode, data.resultCode, data.intent, token => 
          {
              console.log('VKCallback userId: ' + token.userId);
          }, error => 
          {
              console.log('VKCallback error: ' + error.errorCode);
          });
          console.log('onActivityResult ' + res.toString());
      });
      \n

      Add AppID to strings.xml

      \n
      <integer name=\"com_vk_sdk_AppId\">YOUR_APP_ID</integer>
      \n

      iOS

      \n

      Add AppID to Info.plist

      \n
      <key>CFBundleURLTypes</key>
      <array>
          <dict>
              <key>CFBundleTypeRole</key>
              <string>Editor</string>
              <key>CFBundleURLName</key>
              <string>vkYOUR_APP_ID</string>
          </dict>
      </array>
      <key>LSApplicationQueriesSchemes</key>
      <array>
          <string>vk</string>
          <string>vk-share</string>
          <string>vkauthorize</string>
      </array>
      \n

      Links:

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-signin":{"name":"nativescript-google-signin","version":"0.1.0","license":{"type":"","url":"https://github.com/carvarr/nativescript-google-signin/LICENSE"},"readme":"

      nativescript-google-signin

      \n

      plugin for nativescript apps using signin with google

      \n

      Prerequisites

      \n

      You need to get the configuration file "google-services.json" copied to platforms/android/ directory and the prerequisites established by google must be set

      \n

      Installation

      \n
        \n
      • \n

        Add plugin tns plugin add nativescript-google-signin

        \n
        • \n
      • \n

        Add to your string(platforms/android/src/main/res/values/strings.xml) yor auth or request code

        \n
        <string name=\"google_auth_code\">your-auth-code</string>
        \n

        or

        \n
        <string name=\"google_request_code\">your-request-code</string>
        \n

        Also you can pass this code using the config object.

        \n
        • \n
      • \n

        In your build.gradle (platforms/android/build.gradle):

        \n
          \n
        • add mavenCentral() and classpath 'com.google.gms:google-services:3.0.0' to buildscript block
          • \n
        \n
        buildscript {
            repositories {
                jcenter()
                mavenCentral()
            }

           dependencies {
          \tclasspath \"com.android.tools.build:gradle:2.1.2\"
                 classpath 'com.google.gms:google-services:3.0.0'
           }
        }
        \n
          \n
        • add apply plugin: 'com.google.gms.google-services' below apply plugin: "com.android.application"
          • \n
        \n
        • \n
      \n

      Usage

      \n
      var googleSignIn = require(\"nativescript-google-signin\");
      \n

      create a config object

      \n
      var config = {
              authCode: \"your-auth-code\",
              requestProfile: true
      };
      \n
        \n
      • authCode: code for request server authorization
        • \n
      • requestToken: code for request the access token (is required if authCode is skiped)
        • \n
      • requestProfile: set as true if you want the profile information (if is skiped, only email info is requested)
        • \n
      \n

      authCode or requestToken must be set if you doesn't create the string variable in the xml file as explained before

      \n

      Also as second param, you need to pass callbacks function for success or failed events:

      \n
      var callbacks = {

              onSuccess: function(result){
              },

              onFailed: function(e){
              }

          };
      \n
        \n
      • onSuccess: called when the signin process was successfully, the param "result" is a com.google.android.gms.auth.api.signin.GoogleSignInAccount object see
        • \n
      • onFailed: called when ocurr a problem during the signin process, the param "e" is an exeption or a message with the google error code.
        • \n
      \n

      invoke the singIn using the config created

      \n
      googleSignIn.singIn(config, callbacks);
      \n

      Notes

      \n
        \n
      • At the moment the plugin only supports android version; ios will be supported in the future (maybe there�s somebody that help me with this :sweat_smile:)
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-toolbar":{"name":"nativescript-toolbar","version":"0.3.0","license":"MIT","readme":"

      NativeScript tool bar plugin

      \n

      A plugin for using your tool bars in iOS part of your native script app.

      \n

      Installation

      \n

      Run the following command from the root of your project:

      \n
      $ tns plugin add nativescript-toolbar
      \n

      This command automatically installs the necessary files, as well as stores nativescript-toolbar as a dependency in your project's package.json file.

      \n

      Modal screens.

      \n

      Toolbar can help with working around an issue with pages not having an actionbar on iOS when the page is presented as a modal. There is a barPosition property which can be set to 3 i.e. UIBarPositionTopAttached to make the toolbar look like an action bar for your modal pages.

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
          xmlns:tools=\"nativescript-toolbar\">
        <DockLayout stretchLastChild=\"false\">
          <tools:ToolBar dock=\"top\" style=\"margin-bottom:0.5\" barPosition=\"3\">
              <tools.ToolBar.barItems>
                  <tools:ToolBarItem text=\"Done\"/>
              </tools.ToolBar.barItems>
          </tools:ToolBar>
        </DockLayout>
      </Page>
      \n

      Examples

      \n

      The code below creates a tool bar in xml with tint color for buttons as green and the background as blue.

      \n
      <!-- my-page.xml -->
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      \txmlns:tools=\"nativescript-toolbar\">
        <StackLayout style=\"vertical-align : bottom\">
        \t<tools:ToolBar style=\"background-color : blue; color: green\">
        \t\t<tools.ToolBar.barItems>
        \t\t\t<tools:ToolBarItem text=\"Done\"/>
        \t\t</tools.ToolBar.barItems>
        \t</tools:ToolBar>
        </StackLayout>
      </Page>
      \n

      The code below creates a tool bar in xml using ios system bar button items.

      \n

      The value should be a number from the UIBarButtonSystemItem enumeration

      \n
        \n
      • (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
        • \n
      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
      \txmlns:tools=\"nativescript-toolbar\">
        <StackLayout style=\"vertical-align : bottom\">
        \t<tools:ToolBar>
      \t\t\t<tools:ToolBar.barItems>
      \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"5\"/><!-- Flexible space item-->
      \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"1\"/> <!-- Cancel button -->
      \t\t\t\t<tools:ToolBarItem ios.systemIcon=\"0\" tap=\"onDoneButtonTapped\"/> <!-- Done button -->
      \t\t\t</tools:ToolBar.barItems>
      \t\t</tools:ToolBar>
        </StackLayout>
      </Page>
      \n\n\n

      NPM publish

      \n

      Clone this repository and install typescript plugin globally. Use the typescript compiler to convert to ts files javascript

      \n
      $ tsc
      \n

      Make sure js files are updated with your changes

      \n
      npm publish .
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-estimote-plugin":{"name":"nativescript-estimote-plugin","version":"0.0.6","license":{"type":"MIT","url":"https://github.com/progress/estimote-nativeScript-plugin/blob/master/LICENSE"},"readme":"

      Original repository: "https://www.npmjs.com/package/nativescript-estimote-sdk"

      \n

      Estimote Plugin for NativeScript

      \n

      Estimote Beacon is a super small device. It has a powerful 32-bit ARM® Cortex M0 CPU with 256kB flash memory, accelerometer, temperature sensor and most importantly – a 2.4 GHz Bluetooth 4.0 Smart (also known as BLE or Bluetooth low energy) bidirectional radio.

      \n

      You can think of the beacon as a small lighthouse tower that's installed in a fixed location and broadcasts its presence to all the ships (smartphones) around. They could be as close as 2 inches and as far as 230 feet (approx. 70 metres) away.

      \n

      The plugin is implemented on top of the Estimote native SDKs that lets you track beacon devices around you. It defines a global estimote object, which defines various operations that are used for tracking a beacon device.

      \n

      Prerequisites

      \n

      NativeScript 1.5+ (tns --version), please upgrade if you need to.

      \n

      installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-estimote-plugin
      \n

      Methods

      \n
        \n
      • estimote.startRanging
        • \n
      • estimote.stopRanging
        • \n
      \n

      You can initialize the plugin for a region in the following way:

      \n
      var Estimote = require('nativescript-estimote-plugin');\n\nvar options = {\n  region : 'Progress', // optional\n  callback : function(beacons){\n    /* This is called everytime beacons are discovered or proximity changes\n\n      for (var i = 0; i < beacons.count; i++) {\n         var beacon = beacons[i];\n         if (beacon.major > 0){\n             var distance = "NA";\n             var identifier = "Major:" + beacon.major + " Minor:" + beacon.minor;\n\n             if (beacon.proximity) {\n               distance = beacon.proximity;\n             }\n\n             items.push({\n                 "proximity" : beacon.proximity,\n                 "identifier": identifier,\n                 "distance":  "Distance: " + distance,\n                 "rssi": "Power: " +  beacon.rssi + "dBm"\n             });\n\n             console.log(json);\n         }\n    }\n  */\n}\n\nvar estimote = new Estimote(options);\n
      \n

      estimote.startRanging

      \n

      The method initializes the estimote beacon manager to monitor for beacons for a specified region.

      \n
      estimote.startRanging();\n
      \n

      If an existing region with the same identifier is already being monitored by the application, the old region is replaced by the new one. The regions you add using this method are shared by all beacon and location manager objects in your application.

      \n

      estimote.stopRanging

      \n

      The method stops the estimote beacon manager for monitoring beacons.

      \n
      estimote.stopRanging();\n
      \n

      Platform

      \n
        \n
      • iOS (NativeScript 1.5+)
        • \n
      • Android (NativeScript 1.5+)
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-printer":{"name":"nativescript-ichi-printer","version":"0.9.9","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-printer/blob/master/LICENSE"},"readme":"

      nativescript-ichi-printer

      \n

      POS printer for NativeScript.

      \n

      Supported platforms

      \n
        \n
      • Android (any device with Android 4.4 and higher)
        • \n
      \n

      There is no support for iOS yet!

      \n

      Installing

      \n
      tns plugin add nativescript-ichi-printer
      \n

      Usage

      \n

      Here is a TypeScript example:

      \n
      import {PrintClient} from \"nativescript-ichi-printer\";

      // new Printer Client, param:  0: TCP, 1: USB, 2: Bluetooth
      var printClient = new PrintClient(0);
      printClient.onData = (data: Array<number>) => {
          console.log(\"Data from Printer: \", data);
      };
      printClient.onError = (id: number, message: string) => {
          console.log(\"Print client error for action #\", id, \": \", message);
      };
      printClient.onConnected = (id: number) => {
          console.log(\"Print client connected action #: \", id);
          var message = \"Print test String!\";
          var bytes = [];
          for (var i = 0; i < message.length; i++) {
              var c = message.charCodeAt(i);
              bytes.push(c & 0xFF);
          }
          printClient.send(bytes);
      };
      printClient.onSent = (id: number) => {
          console.log(\"Print client sent action #: \", id);
          // When we are finished
          printClient.close();
      };
      printClient.onClosed = (id: number) => {
          console.log(\"Print client closed action #: \", id);
      };

      // Connect printer (type: TCP), param: IP, port
      printClient.connect(\"192.168.1.192\", 9100);

      // // Connect printer (type: USB), param: printer Name by getUsbPrinters()
      // printClient.connect(\"USB Support Printer 1\", 0);

      // // Connect printer (type: Bluetooth), param: printer Name by getBlueToothPrinters()
      // printClient.connect(\"58 POS printer\", 0);

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-lan-scan":{"name":"nativescript-lan-scan","version":"0.3.1","license":"MIT","readme":"

      NativeScript LanScan [Beta]

      \n

      (iOS Only)

      \n

      Getting started

      \n

      This plugin is a wrapper around the iOS MMLanScan library:\nhttps://github.com/mavris/MMLanScan

      \n

      To use this plugin in a NativeScript app:

      \n
        \n
      1. Run: tns plugin add nativescript-lan-scan
        2. \n
      \n

      What does it do?

      \n

      This plugin will scan a local network and return an array of all detected IP and MAC addresses. See the original MMLanScan for more details.

      \n

      How do you use it?

      \n

      Add the plugin to your NativeScript app

      \n
      tns plugin add nativescript-lan-scan
      \n

      Include the plugin in your application. You will need to include a few of the event classes as well if you are using TypeScript - just so TypeScript is happy.

      \n
      import { LanScan, FoundDeviceEventData, DeviceInfo, PingProgressEvent, PingProgress }

      var lanScan = new LanScan();

      // Wire up callback events from the Lan Scanner

      // Fires whenever a devices is discovered
      this._lanScan.on(LanScan.foundNewDeviceEvent, (args: FoundDeviceEventData) => {
          // Device info is found on the args.deviceInfo object...
          // args.deviceInfo.ipAddress
          // args.deviceInfo.macAddress
      });

      // Fires everytime an address on the subnet is pinged
      this._lanScan.on(LanScan.progressPingedEvent, (args: PingProgressEventData) => {
          // args.pingProgress.overallHosts - total number hosts that the scanner will ping through
          // args.pingProgress.pingedHosts - current number of hosts that have been pinged
      });

      this._lanScan.on(LanScan.scanningFinishedEvent, (args) => {
          // Status: enum...
          // 0: Finished
          // 1: Stopped
      });

      // Start the Lan Scanner
      lanScan.start();


      // If, in the middle of the operation you want to stop the scan
      lanScan.stop();

      // Get the SSID
      // Note that this doesn't work in the simulator,
      // it will say \"No Wifi Available\"
      let ssid = lanScan.fetchSSIDInfo();
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timepicker-slider":{"name":"nativescript-timepicker-slider","version":"0.1.2","license":"MIT","readme":"

      NativeScript date picker slider plugin

      \n

      A plugin that enables you to use the cocoapod at https://github.com/rajivnarayana/TimePickerSlider in your native script app.

      \n

      Installation

      \n

      Run the following command from the root of your project

      \n
      $ tns plugin add https://github.com/rajivnarayana/NativeScriptTimePickerSliderPlugin.git
      \n

      This command automatically install the necessary ios files from the cocoapod github repository and adds as a dependency in your package.json file

      \n

      Examples

      \n

      There is an sample application at the folder "Example". To run it (assuming you have nativescript plugin installed globally)

      \n
      $ sudo npm install typescript -g
      $ tsc
      $ cd Example
      $ tns plugin add ../
      \n

      Run the application from your mac onto your iOS simulator by typing

      \n
      $ tns emulate ios --device=iPhone\\ 5s
      \n

      The following code from Example/app/main.xml show you a way to add Time picker to your layout

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:tools=\"nativescript-timepicker-slider\">
        <DockLayout stretchLastChild=\"false\" style=\"background-color: gray\">
          <tools:TimeIntervalSlider 
              hour=\"8\" 
              minute=\"30\" 
              dock=\"bottom\" 
              fillColor=\"#e00000\"
              strokeColor=\"#0000e0\"
              loaded=\"onSliderLoaded\"
              />
        </DockLayout>
      </Page>
      \n

      Following code from Exaple/app/main.js shows a way to listen to value changes

      \n
      function onSliderLoaded(args) {
          var slider = args.object;
          slider.on(observableModule.Observable.propertyChangeEvent, (args) => {
              if (args.propertyName == sliderModule.Slider.valueProperty.name) {
                  console.log('Do something with the data '+slider.value);
              }
          }, this);
      }

      exports.onSliderLoaded = onSliderLoaded;
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-screen-orientation":{"name":"nativescript-screen-orientation","version":"2.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@xmlking/nativescript-ngx-microsoftband":{"name":"@xmlking/nativescript-ngx-microsoftband","version":"0.1.5","license":"MIT","readme":"

      MicrosoftBand Plugin for Telerik NativeScript

      \n

      This NativeScript plugin enables building Mobile apps to display Microsoft Band sensors data.\nThis plugin uses MicrosoftBand CocoaPod written in Swift and Band SDK.

      \n

      \"Demo\"

      \n

      Install

      \n

      Prerequisites

      \n
        \n
      1. Node > 8.0.0
        2. \n
      2. NativeScript CLI > 3.0.0
        yarn global add nativescript --ignore-engines
        \n
        3. \n
      3. Cocoapods
        gem install cocoapods
        pod repo update
        \n
        4. \n
      \n

      Plugin

      \n
      tns plugin add @xmlking/nativescript-ngx-microsoftband
      \n

      Usage

      \n

      1. import the MicrosoftBandModule module

      \n
      import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
      import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
      import { MicrosoftBandModule } from '@xmlking/nativescript-ngx-microsoftband';

      import { AppComponent } from \"./app.component\";

      @NgModule({
        imports: [
          NativeScriptModule,
          MicrosoftBandModule.forRoot()
        ],
        declarations: [
          AppComponent
        ],
        bootstrap: [
          AppComponent
        ],
        schemas: [
          NO_ERRORS_SCHEMA
        ]
      })
      export class AppModule { }
      \n

      2. use it in your service/component

      \n

      Refer app.component.ts and heart-rate.component.ts

      \n

      Build

      \n
      \n

      Building and publishing the plugin.

      \n
      \n

      Setup

      \n
      yarn run setup
      \n

      Build

      \n
      yarn run build
      \n

      Publish

      \n
      cd dist
      npm publish
      \n

      Example App

      \n
      \n

      Setup and Run Example app

      \n
      \n

      Setup

      \n
      cd src
      tns plugin remove @xmlking/nativescript-ngx-microsoftband; tns plugin add ../dist
      # tns platform remove ios # cleanup?
      \n

      Run

      \n
      cd src
      tns prepare ios
      tns build ios --release
      # open src/platforms/ios/src.xcworkspace project in xcode and run on attached iOS devise.
      \n

      Credits

      \n

      Idea came from NathanWalker, Minko Gechev

      \n

      Contributors

      \n

      License

      \n

      MIT

      \n

      https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/#Usage_with_TypeScript

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation":{"name":"tns-template-tab-navigation","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Core Tab Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a TabView component for navigation.

      \n

      \n

      Key Features

      \n
        \n
      • Tab navigation
        • \n
      • Five blank pages hooked to the tab navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-tab-js --template tns-template-tab-navigation
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-tab-navigation).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-tab-js --template nativescript-app-templates/packages/template-tab-navigation
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root module is located at:

      \n
        \n
      • /app/app-root - sets up the tab navigation with individual navigation frames in each content item.
        • \n
      \n

      The template has the following pages used for the tab content items:

      \n
        \n
      • /app/home/home-items-page - the master home page. Displays a list of items and navigates to the item details page on item tap.
        • \n
      • /app/home/home-item-detail/home-item-detail-page - the item details page. Displays the details of the tapped item.
        • \n
      • /app/browse/browse-page - blank page
        • \n
      • /app/search/search-page - blank page
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-presentation":{"name":"nativescript-ichi-presentation","version":"0.7.0","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-presentation/blob/master/LICENSE"},"readme":"

      nativescript-ichi-presentation

      \n

      Presentation for NativeScript.

      \n

      Supported platforms

      \n
        \n
      • Android (any device with Android 4.4 and higher)
        • \n
      \n

      There is no support for iOS yet!

      \n

      Installing

      \n
      tns plugin add nativescript-ichi-presentation
      \n

      Usage

      \n

      Here is a TypeScript example:

      \n
      import {PresentationClient} from \"nativescript-ichi-presentation\";

      // data for show
      var order = {
          items: [],
          coupons: [],        
          finalFee: 0.0,
      }
      var orderItem = {
          name: \"product\",
          qty: 2,
          fee: 14,
      }
      var orderItem2 = {
          name: \"product2\",
          qty: 3,
          fee: 45,
      }
      var couponItem = {
          name: \"coupon\",
          fee: 5,
      }
      order.items.push(orderItem);
      order.items.push(orderItem2);
      order.coupons.push(couponItem);
      order.finalFee = 54;


      // new Presentation Client
      var client = new PresentationClient();

      if (client.generate())
      {
          // show Presentation
          client.showPresentation();

          // set data whil showed
          client.setShowType(2);
          client.setOrder(order);

          // imgPath
          // client.setShowType(1);
          // client.setImage(imgPath);

          // videoPath
          // client.setShowType(1);
          // client.setVideo(videoPath);

          // black screan
          // client.setShowType(0);

          // media from web
          // url response json string like: {\"mediaFiles\":[\"http://192.168.1.5/800.jpg\"],\"menus\":[\"http://192.168.1.5/menu1.jpg\"]} 
          // var url = \"http://192.168.1.5/media/\";
          // client.downloadAndShow(url);

          // var resp = \"{\\\"mediaFiles\\\":[\\\"http://192.168.1.5/800.jpg\\\"],\\\"menus\\\":[\\\"http://192.168.1.5/menu1.jpg\\\"]}\";
          // client.setMediaJsonAndShow(resp);

          // show \"menus\" by downloadAndShow
          // client.ShowMenu();

          // show \"mediaFiles\" by downloadAndShow
          // client.ShowMedia();

          // clean Files downloaded by downloadAndShow
          // var deleteAll = false;
          // client.cleanCacheFile(deleteAll);

          // close Presentation
          // client.closePresentation(videoPath);
      }
      else
      {
          console.log(\"Presentation Client generate failed\");
      };


      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/root-detection":{"name":"@nstudio/root-detection","version":"2.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-version":{"name":"nativescript-dev-version","version":"0.2.0","license":"ISC","readme":"

      Nativescript hook plugin to maintain native app version

      \n

      This plugin takes the version and versionNumber properties from package.json and puts on the specific platform resources: AndroidManifest.xml file for the Android sources, and Info.plist for iOS sources.

      \n

      Compatible with NS 6.

      \n

      How to use

      \n
      $ tns plugin add nativescript-dev-version
      \n

      The above command installs this module and installs the necessary NativeScript hooks.

      \n

      Then, specify and maintain the desired release version on the ./package.json file under the nativescript.version property, for example:

      \n
      {
        \"nativescript\": {
          \"id\": \"org.nativescript.MySampleApp\",
          \"version\": \"1.2.3\",
          \"versionNumber\": \"1\"
          ...
        },
        ...
      }
      \n

      or:

      \n
      {
        \"version\": \"1.2.3\",
        \"versionNumber\": \"1\"
        ...
      }
      \n

      When running tns prepare ... the hooks will take care of the native resources.

      \n

      On iOS, your Info.plist will get:

      \n
      <key>CFBundleShortVersionString</key>
      <string>1.2.3</string>
      <key>CFBundleVersion</key>
      <string>1</string>
      \n

      On Android, AndroidManifest.xml will have:

      \n
      <manifest
        (...) android:versionCode=\"10203001\" android:versionName=\"1.2.3\"
      \n

      Breaking changes

      \n

      When upgading to v0.1.3, for iOS you MUST add "versionNumber": "[value]" to correctly apply on CFBundleVersion in the Info.plist

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-listview-header":{"name":"nativescript-listview-header","version":"0.2.1","license":"MIT","readme":"

      Nativescript ListView header plugin.

      \n

      A plugin for adding headerView i.e. tableHeaderView to ListView for iOS.

      \n

      Installation

      \n
      tns plugin add nativescript-listview-header
      \n

      Examples

      \n

      Include the plugin in your xml

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" 
              loaded=\"pageLoaded\" 
              xmlns:tools=\"nativescript-listview-header\">
          <tools:ListViewWithHeader items=\"{{items}}\" loaded=\"onListViewLoaded\" rowHeight=\"44\">
          </tools:ListViewWithHeader>
      </Page>
      \n

      Set your header view in code behind

      \n
      var searchBarModule = require(\"ui/search-bar\");
      exports.onListViewLoaded = function(args) {
          var listView = args.object;
          listView.tableHeaderView = new searchBarModule.SearchBar();
      }
      \n

      Screen shot

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation-ts":{"name":"tns-template-tab-navigation-ts","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Core with TypeScript Tab Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a TabView component for navigation.

      \n

      \n

      Key Features

      \n
        \n
      • Tab navigation
        • \n
      • Five blank pages hooked to the tab navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code through extensive code comments
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-tab-ts --template tns-template-tab-navigation-ts
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-tab-ts --template nativescript-app-templates/packages/template-tab-navigation-ts
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root module is located at:

      \n
        \n
      • /app/app-root - sets up the tab navigation with individual navigation frames in each content item.
        • \n
      \n

      The template has the following pages used for the tab content items:

      \n
        \n
      • /app/home/home-items-page - the master home page. Displays a list of items and navigates to the item details page on item tap.
        • \n
      • /app/home/home-item-detail/home-item-detail-page - the item details page. Displays the details of the tapped item.
        • \n
      • /app/browse/browse-page - blank page
        • \n
      • /app/search/search-page - blank page
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-payments":{"name":"nativescript-payments","version":"0.1.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship":{"name":"@nstudio/nativescript-airship","version":"0.0.4","license":"Apache-2.0","readme":"

      @nstudio/nativescript-airship

      \n
      ns plugin add @nstudio/nativescript-airship
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ichi-mqtt":{"name":"nativescript-ichi-mqtt","version":"0.1.3","license":{"type":"MIT","url":"https://github.com/mozhju/nativescript-ichi-mqtt/blob/master/LICENSE"},"readme":"

      nativescript-ichi-mqtt

      \n

      mqtt client for NativeScript.

      \n

      Supported platforms

      \n
        \n
      • Android (any device with Android 4.4 and higher)
        • \n
      \n

      There is no support for iOS yet!

      \n

      Installing

      \n
      tns plugin add nativescript-ichi-mqtt
      \n

      Usage

      \n

      Here is a TypeScript example:

      \n
      import {MqttClient} from \"nativescript-ichi-mqtt\";

      // new Mqtt Client
       var mqttClient = new MqttClient(\"productKey\", \"deviceName\", \"deviceSecret\",
              \"serverUri\", \"subscriptionTopic\", \"publishTopic\");

      // LogLevel : 1 DEBUG, 2 INFO, 3 WARN, 4 ERROR
      mqttClient.setLogLevel(3);

      var stateListener = {
              onConnectFail: function(message) {
                  console.log(\"stateListener onConnectFail: \", message);
              },
              onConnected: function() {
                  console.log(\"stateListener onConnected\");
              },
              onDisconnect: function() {
                  console.log(\"stateListener onDisconnect\");
              }
          }
      mqttClient.setConnectionStateListener(stateListener);

      var subscribeListener = {
              onSuccess: function(topic) {
                  console.log(\"subscribeListener onSuccess: \", topic);
              },
              onFailed: function(topic, error) {
                  console.log(\"subscribeListener onFailed: \", topic);
              },
              needUISafety: function() {
                  console.log(\"subscribeListener needUISafety\");
                  return true;
              }
          }
      mqttClient.setSubscribeListener(subscribeListener);

      var pushListener = {
              onCommand: function(topic, data) {
                  console.log(\"pushListener onCommand: \", topic);
              },
              shouldHandle: function(topic) {
                  console.log(\"pushListener shouldHandle\", topic);
                  return true;
              }
          }
      mqttClient.setPushListener(pushListener);

      var callListener = {
              onSuccess: function(request, response) {
                  console.log(\"callListener onSuccess: \");
              },
              onFailed: function(request, error) {
                  console.log(\"callListener onFailed: \");
              },
              needUISafety: function() {
                  console.log(\"callListener needUISafety\");
                  return true;
              }
          }
      mqttClient.setCallListener(callListener);


      mqttClient.startListener();

      // mqttClient.subscribeTopic(\"subscribeTopic2\");
      // mqttClient.unSubscribeTopic(\"subscribeTopic\");

      mqttClient.publishMessage(\"publishMessage\", \"publishTopic2\");


      // mqttClient.stopListener();
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-passportscanner-custom":{"name":"nativescript-passportscanner-custom","version":"1.0.5","license":"MIT","readme":"

      nativescript-passportscanner-custom

      \n

      Nativescript Password Scanner

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-version-ssi":{"name":"nativescript-dev-version-ssi","version":"0.1.1","license":"ISC","readme":"

      Nativescript hook plugin to maintain native app version

      \n

      This plugin just takes the nativescript.version property from package.json and puts on the specific platform resources: AndroidManifest.xml file for the Android sources, and Info.plist for iOS sources.

      \n

      How to use

      \n
      $ tns plugin add nativescript-dev-version-ssi
      \n

      This forked version of nativescript-dev-version will expand the version number into a version code that increments properly. XYYYZZZZ is generated as the version code from version X.Y.Z. For example, 1.2.3 becomes 10020003

      \n

      The above command installs this module and installs the necessary NativeScript hooks.

      \n

      Then, specify and maintain the desired release version on the package.json file under the nativescript.version property, for example:

      \n
      {
        \"nativescript\": {
          \"id\": \"org.nativescript.MySampleApp\",
          \"version\": \"1.2.3\"
          ...
        },
        ...
      }
      \n

      When running tns prepare ... the hooks will take care of the native resources, and your app will get the 1.2.3 version number!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@spryteam/nativescript-oauth2":{"name":"@spryteam/nativescript-oauth2","version":"1.6.0","license":"MIT","readme":"

      OAuth 2 Plugin for NativeScript

      \n

      \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

      \n

      Library for interacting with OAuth 2.0 in NativeScript applications that provides simplified direct client access with a OAuth providers that support the OAuth 2.0 protocol such as Microsoft, Facebook, and Google, but not limited to any login providers, and even allows you to plug in your own. This library doesn't use any native libraries and relies only on what comes in the box - making it really lightweight.

      \n

      NOTE: This is the new version of the old nativescript-oauth plugin

      \n\"NativeScript\n
      \n

      Tested against Microsoft, Facebook, and Google providers. More providers are coming soon.\nThanks to all those who contributed providers to the old plugin - please do the same for this one.

      \n

      Introduction

      \n

      Some providers are OpenId certified (Google, Microsoft) so they are a bit more secure in that they don't have to store the client secret on the client (which can always be pwned by folks that are savvy enough to get into your app). Google doesn't allow client secrets to be passed and requires an out-of-app browser to be used for auth. This plugin supports this method for any providers that require it, but there are a few extra configuration steps that have to be performed to get this working, more on that below.

      \n

      Facebook doesn't support OpenId and works with the in-app WebView implementation of the auth process. So while this requires less configuration, there is an slight security risk of keeping your client secret in the app. If you have strict security requirements, you have to implement Facebook login by using your backend as a proxy between this plugin and Facebook auth servers.

      \n

      Prerequisites

      \n

      Office 365 / Microsoft

      \n

      For logging in with your Office 365 account, you should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

      \n

      Keep an eye out on my YouTube channel for a video on how to set up Facebook with with plugin.

      \n

      Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

      \n
        \n
      1. Click the "Add Platform" button and select "Mobile application"
        2. \n
      2. Copy the "Client Id" GUID from the Mobile Application section.
        3. \n
      3. Click "Save" at the bottom.
        4. \n
      \n

      Microsoft login will work either with the in-app webview method, in which case your redirectUri config property can be set to urn:ietf:wg:oauth:2.0:oob. Or it can use the more secure method that doesn't require a client secret, but it will need to have a custom URL scheme registered (see below).

      \n

      Facebook account

      \n

      For logging in with your Facebook account, you should have a Facebook developer account. If you don't have one yet, you can get one here.

      \n

      Keep an eye out on my YouTube channel for a video on how to set up Facebook with with plugin.

      \n

      Register your mobile app by following the wizard under "My Apps" -> "Add a new app".

      \n
        \n
      1. Go to https://developers.facebook.com/apps and create a new app
        2. \n
      2. If you see the Product Setup page, select Facebook login
        3. \n
      3. Make sure to turn ON the option "Embedded Browser OAuth Login"
        4. \n
      4. Click Save
        5. \n
      5. Copy the App ID and the App Secret from the Dashboard page to bootstrap your app. These will be the ClientID and ClientSecret respectively.
        6. \n
      \n

      Google account

      \n

      For logging in with your Google account, you should have a Google developer account. If you don't have one yet, you can get one here.

      \n

      Keep an eye out on my YouTube channel for a video on how to set up Google with this plugin.

      \n

      Register your mobile app by following the wizard in the Developer Console.\n(more info coming soon)

      \n

      Google login will only work with the out-of-app browser. You must register a custom URL scheme for your app (see below).

      \n

      LinkedIn Account

      \n

      For logging in with your LinkedIn account, you should have a LinkedIn developer account. If you don't have one yet, you can get one here.

      \n
        \n
      1. Click on My Apps and login with your LinkedIn credentials or click on Join Now to create a new account.
        2. \n
      2. Once logged in click on Create Application.
        3. \n
      3. Fill out all fields with the app's information and Click submit.
        4. \n
      4. If everything goes well you should get your app's authentication keys which consists of a client id and a client secret.
        5. \n
      5. In this page, make sure to add an Authorized Redirect URL. (This can be any url starting with http:// or https://).
        6. \n
      6. Copy the Authentication Keys and the Authorized Redirect URL.
        7. \n
      \n

      Setup

      \n

      Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      npm install nativescript-oauth2 --save
      \n

      Usage

      \n

      If you want a quickstart, you can start with one of two demo apps:

      \n\n

      Bootstrapping

      \n

      When your app starts up, you'll have to register one or more auth providers to use with the nativescript-oauth2 plugin. You'll use the code below to register the providers.

      \n

      NativeScript Core

      \n

      If you are using NativeScript Core, open app.ts and add the following registration code before application.start();

      \n

      NativeScript with Angular

      \n

      If you are using Angular AND you are NOT using <page-router-outlet, you'll need to enable frames in order for the plugin to open up a new native page with a login screen. To do that open your main.ts file. You will need to explicitly use frames, so make sure to pass an options object to platformNativeScriptDynamic with the createFrameOnBootstrap flag set to true, like this.

      \n
      // main.ts
      platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(
        AppModule
      );
      \n

      You don't need to do this if you already have <page-router-outlet> in your component.

      \n

      then add add the registration code below somewhere before you call login, most likely in your Auth service, as in the demo-angular project.

      \n

      NativeScript-Vue

      \n

      If you are using NativeScript-Vue, then you'll have to add this registration code somewhere when your app bootstraps. A Vue demo app is included with the GitHub repo.

      \n
      // This is the provider registration example code

      import { configureTnsOAuth } from \"nativescript-oauth2\";

      import {
        TnsOaProvider,
        TnsOaProviderOptionsFacebook,
        TnsOaProviderFacebook,
        TnsOaProviderOptionsGoogle,
        TnsOaProviderGoogle,
        TnsOaProviderOptionsMicrosoft,
        TnsOaProviderMicrosoft
      } from \"nativescript-oauth2/providers\";

      function configureOAuthProviderGoogle(): TnsOaProvider {
        const googleProviderOptions: TnsOaProviderOptionsGoogle = {
          openIdSupport: \"oid-full\",
          clientId:
            \"932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb.apps.googleusercontent.com\",
          redirectUri:
            \"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb:/auth\",
          urlScheme:
            \"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb\",
          scopes: [\"email\"]
        };
        const googleProvider = new TnsOaProviderGoogle(googleProviderOptions);
        return googleProvider;
      }

      function configureOAuthProviderFacebook(): TnsOaProvider {
        const facebookProviderOptions: TnsOaProviderOptionsFacebook = {
          openIdSupport: \"oid-none\",
          clientId: \"691208554415641\",
          clientSecret: \"d8725ac416fa1bb1917ccffd1670e3c7\",
          redirectUri: \"https://www.facebook.com/connect/login_success.html\",
          scopes: [\"email\"]
        };
        const facebookProvider = new TnsOaProviderFacebook(facebookProviderOptions);
        return facebookProvider;
      }

      configureTnsOAuth([
        configureOAuthProviderGoogle(),
        configureOAuthProviderFacebook()
      ]);
      \n

      The plugin comes with helpful interfaces that you can implement for the providers as well as the options that can be passed into each provider's constructor. You don't have to use these interfaces, but they are helpful guides. The code above shows these interfaces.

      \n

      The last call to configureTnsOAuth() takes an array of providers and registers them as available for use.

      \n

      Logging in

      \n

      When you're ready to login, or as a response to a tap event on a login button, you can create a new instance of the TnsOAuthClient and call loginWithCompletion() on the instance, passing in the provider you want to login with. The provider is of the type TnsOaProviderType, or it can be a string 'google', 'facebook', 'microsoft', etc.

      \n
      import { TnsOAuthClient, ITnsOAuthTokenResult } from \"nativescript-oauth2\";

      const client = new TnsOAuthClient(providerType);

      client.loginWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
        if (error) {
          console.error(\"back to main page with error: \");
          console.error(error);
        } else {
          console.log(\"back to main page with access token: \");
          console.log(tokenResult);
        }
      });
      \n

      After login is done, the completion handler will be called with the results.

      \n

      Refreshing the Access Token

      \n

      Once you have logged in, you can call refreshTokenWithCompletion() on your TnsOAuthClient instance to attempt to refresh your access token. In order to do this, the following criteria must be met:

      \n
        \n
      • The scope offline_access was requested when you logged in.
        • \n
      • The TnsOAuthClient must have the token result from your previous login. If you have the original instance you used to log in, it will already be on the object. If you do not have the original instance of TnsOAuthClient which you used to log in, such as if the app was restarted, then assign the client's tokenResult property to your token.
        • \n
      \n

      If that criteria is met, then you can refresh the token like so:

      \n
      import { TnsOAuthClient, ITnsOAuthTokenResult } from \"nativescript-oauth2\";

      ...

      client.refreshTokenWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
        if (error) {
          console.error(\"Unable to refresh token with error: \");
          console.error(error);
        } else {
          console.log(\"Successfully refreshed access token: \");
          console.log(tokenResult);
        }
      });
      \n

      Creating a custom provider

      \n

      If you don't see an auth provider that you need, you can just implement your own - see the demo-custom-provider project in the GitHub repo for an example on how to do this.

      \n

      You need to implement two interfaces: provider options that suits your provider (more below), and TnsOaProvider for the provider endpoint details.

      \n

      Provider Options

      \n

      Implement your provider's options by extending the TnsOaUnsafeProviderOptions interface if your provider is not Open Id compliant, or the TnsOaOpenIdProviderOptions interface if your provider is Open Id compliant.

      \n
      \n

      Note: the interface is named with the word 'unsafe' in the name because non-open id compliant providers (like Facebook) usually make you use a client secret to send to the provider in exchange for the token. Storing the secret somewhere other than the client app is recommended (like a proxy), but most people don't do this and just store the secret with the app - thus unsafe.

      \n
      \n
      //Provider options example

      export interface TnsOaMyCustomProviderOptions extends TnsOaUnsafeProviderOptions { }
      \n

      TnsOaProvider

      \n

      Then you can create your provider class by implementing the TnsOaProvider interface:

      \n
      //Provider implementation example

      export class TnsOaProviderMyCustomProvider implements TnsOaProvider {
          public options: TnsOaProviderOptions;
          public openIdSupport: OpenIdSupportNone = \"oid-none\";
          public providerType = \"myCustomProvider\";
          public authority = \"https://www.facebook.com/v3.1/dialog\";
          public tokenEndpointBase = \"https://graph.facebook.com\";
          public authorizeEndpoint = \"/oauth\";
          public tokenEndpoint = \"/v3.1/oauth/access_token\";
          public cookieDomains = [\"facebook.com\"];

          constructor(options: TnsOaMyCustomProviderOptions) {
              this.options = options;
          }

          public parseTokenResult(jsonData): ITnsOAuthTokenResult {
              return jsonData;
          }
      }
      \n

      Finally, you'll use your provider when you register it with the app.

      \n
      // app.ts

      import * as application from \"tns-core-modules/application\";
      import { configureOAuthProviders } from \"./auth-service\";
      configureOAuthProviders();
      application.run({ moduleName: \"app-root\" });
      \n
      // auth-service.ts

      export function configureOAuthProviders() {
        const myCustomProvider = configureOAuthProviderMyCustomProvider();
        configureTnsOAuth([myCustomProvider]);
      }
      function configureOAuthProviderMyCustomProvider(): TnsOaProvider {
        const facebookProviderOptions: TnsOaMyCustomProviderOptions = {
          openIdSupport: \"oid-none\",
          clientId: \"<your client/app id>\",
          clientSecret: \"<your client secret>\",
          redirectUri: \"<redirect Uri>\",
          scopes: [\"email\"],
          customQueryParams: {
            foo: \"bar\"
          }
        };
        const facebookProvider = new TnsOaProviderMyCustomProvider(facebookProviderOptions);
        return facebookProvider;
      }
      \n

      Custom URL Scheme

      \n

      If you are using an OpenId certified provider and need to use an out-of-app browser to authenticate, then you must register a custom URL scheme with your app.\nThis is easy to do with NativeScript. The first step is to register your custom scheme with your provider when you register your app.

      \n

      Android

      \n

      To register a custom URL scheme for Android, open your Android app resources, which are in this path: app/App_Resources/Android/src/main/AndroidManifest.xml.\nThe AndroidManifest.xml file used to be right in the Android folder, but now it's been moved down a bit. It's still the same file though.

      \n

      Find the <activity> section named com.tns.NativeScriptActivity and add the attribute android:launchMode="singleTask" (or singleTop).\nThen inside the activity add a new <intent-filter> section with your custom url scheme(s).

      \n

      Here is an example of the entire <activity> section:

      \n
      \t\t<activity android:name=\"com.tns.NativeScriptActivity\" android:launchMode=\"singleTask\" android:label=\"@string/title_activity_kimera\" android:configChanges=\"keyboardHidden|orientation|screenSize\" android:theme=\"@style/LaunchScreenTheme\">

      \t\t\t<meta-data android:name=\"SET_THEME_ON_LAUNCH\" android:resource=\"@style/AppTheme\" />

      \t\t\t<intent-filter>
      \t\t\t\t<action android:name=\"android.intent.action.MAIN\" />
      \t\t\t\t<category android:name=\"android.intent.category.LAUNCHER\" />
      \t\t\t</intent-filter>

      \t\t\t<intent-filter>
      \t\t\t\t<action android:name=\"android.intent.action.VIEW\"/>
      \t\t\t\t<category android:name=\"android.intent.category.DEFAULT\" />
      \t\t\t\t<category android:name=\"android.intent.category.BROWSABLE\" />
      \t\t\t\t<!-- Custom URL Schemes -->
      \t\t\t\t<data android:scheme=\"com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb\"/>
      \t\t\t\t<data android:scheme=\"msalf376fa87-64a9-89a1-8b56-e0d48fc08107\"/>
      \t\t\t</intent-filter>

      \t\t</activity>
      \n

      Notice in the config above, I've registered TWO custom URL schemes for my app - this is the <data> element with the path and scheme attributes.

      \n

      iOS

      \n

      To register a custom URL scheme for iOS, open your iOS app resources, which are in this path: app/App_Resources/iOS/Info.plist. In the key/value dictionary in this file, add a key for CFBundleURLTypes, if it's not already there. And add the value for that key as an array. The entire addition is listed here:

      \n
      \t<key>CFBundleURLTypes</key>
      \t<array>
      \t\t<dict>
      \t\t\t<key>CFBundleTypeRole</key>
      \t\t\t<string>Editor</string>
      \t\t\t<key>CFBundleURLName</key>
      \t\t\t<string>org.nativescript.testnsazmobaplugin</string>
      \t\t\t<key>CFBundleURLSchemes</key>
      \t\t\t<array>
      \t\t\t\t<string>msalf376fa87-64a9-49a1-8b57-e0d48fc08107</string>
      \t\t\t\t<string>fb691208554415647</string>
      \t\t\t\t<string>com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb</string>
      \t\t\t</array>
      \t\t</dict>
      \t</array>
      \n

      Notice that for the key CFBundleURLSchemes, there are three string listed as custom URL schemes, all of them will open your app.

      \n

      Contributing

      \n
        \n
      1. Follow the plugin authoring guidelines in the NativeScript docs.
        2. \n
      2. Use the Pull Request Template that can be found here to submit the PR.
        3. \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsngdaftools":{"name":"nsngdaftools","version":"1.1.1","license":"GPL-3.0","readme":"

      NsNgDaFTools

      \n

      This extension adds 3 CLI programs useful\nfor NativeScript Angular projects.

      \n

      How to launch them

      \n

      Using relatively new versions of npm\nthe package npx is installed by default,\nso to execute the CLI utility x (even if\nonly local) npx x arguments... is\nsufficient.

      \n

      Utilities list

      \n
        \n
      • NgLocalCM [app]: creates _daf_comps\nand _daf_mods TypeScript glue code with\nlocal components and submodules imports.
        • \n
      • NsNgComponentTemplate component [module] [app]:\ncreates a component with template and style\nin the directory of or its own if not\nspeficied.
        • \n
      • NsNgModuleTemplate module [app]:\ncreates a module with relative router and local\ncomponent inclusion based uppon _daf_comps.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-amap":{"name":"tns-amap","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-linkpreview":{"name":"nativescript-linkpreview","version":"0.0.1","license":"MIT","readme":"

      Develop a NativeScript plugin now (w/ TypeScript)

      \n

      Getting started

      \n
        \n
      1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin
        2. \n
      2. npm install -g typescript
        3. \n
      3. cd myplugin
        4. \n
      4. npm run postclone
        5. \n
      5. npm run setup
        6. \n
      6. Get to work.
        7. \n
      \n

      This seed expands on several things presented here.

      \n

      Usage

      \n

      The seed is prepared to allow you to test and try out your plugin via the demo folder.\nAdditionally it provides a proper .gitignore to keep GitHub tidy as well as .npmignore to ensure everyone is happy when you publish your plugin via npm.

      \n

      Linking to CocoaPod or Android Arsenal plugins

      \n

      You will want to create these folders and files in the root:

      \n
      platforms --
        ios --
          Podfile
        android --
          include.gradle
      \n

      Doing so will open up those native apis to your plugin :)

      \n

      Take a look at these existing plugins for how that can be done very simply:

      \n\n

      Typical development workflow:

      \n
        \n
      1. Make changes to plugin files
        2. \n
      2. Make changes in demo that would test those changes out
        3. \n
      3. npm run demo.ios or npm run demo.android (must be run from the root directory)
        4. \n
      \n

      Those demo tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:

      \n
      cd demo

      // when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
      tns plugin remove nativescript-linkpreview
      tns plugin add ..

      // manual platform adds
      tns platform add ios
      // and/or
      tns platform add android
      \n

      Then use any of the available options from the tns command line:

      \n\n

      Unittesting

      \n

      This plugin automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents.

      \n

      You can read more about this topic here.

      \n

      Once you're ready to test your plugin's API execute one of these commands in the plugin root:

      \n
      npm run test.ios
      npm run test.android
      \n

      Publish

      \n

      When you have everything ready to publish:

      \n
        \n
      • Bump the version number in package.json
        • \n
      • npm run build - very important - ensure the latest is built before you publish
        • \n
      • npm publish
        • \n
      \n

      Contributing - Want to make the seed better?

      \n

      Or at least help keep it up to date with NativeScript releases, which would be excellent.

      \n
      npm install -g typescript  // if you don't already have it
      git clone https://github.com/NathanWalker/nativescript-plugin-seed
      cd nativescript-plugin-seed

      // Improve!
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kontaktio-v2":{"name":"nativescript-kontaktio-v2","version":"1.0.2","license":"ISC","readme":"

      nativescript-kontaktio

      \n

      NativeScript Plugin for Kontakt io Beacons

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation":{"name":"tns-template-drawer-navigation","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Core Drawer Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Side drawer navigation
        • \n
      • Five blank pages hooked to the drawer navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-drawer-js --template tns-template-drawer-navigation
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-drawer-js --template nativescript-app-templates/packages/template-drawer-navigation
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      There is a folder that is used for setting RadSideDrawer instance as an application root:

      \n
        \n
      • /app/app-root/app-root - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
        • \n
      \n

      RadSideDrawer has the following component structure:

      \n
        \n
      • RadSideDrawer - The component to display a drawer on the page.
        • \n
      • RadSideDrawer.drawerContent - Part of the RadSideDrawer, it holds a custom component drawer that displays the contents of the drawer.
        • \n
      • RadSideDrawer.mainContent - Part of the RadSideDrawer, it holds the main content for the page.
        • \n
      \n

      The template has the following blank page modules:

      \n
        \n
      • /app/home/home-page
        • \n
      • /app/browse/browse-page
        • \n
      • /app/search/search-page
        • \n
      • /app/featured/featured-page
        • \n
      • /app/settings/settings-page
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-flashlight":{"name":"nativescript-flashlight","version":"2.0.1","license":{"type":"MIT","url":"https://github.com/tjvantoll/nativescript-flashlight/blob/master/LICENSE"},"readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-downloadmanager":{"name":"nativescript-downloadmanager","version":"0.1.0","license":"MIT","readme":"

      Nativescript DownloadManager

      \n

      DownloadManager is a library that allows downloading files from Nativescript in Android using the Android Download Manager. Why not use Http.getFile() ? Pretty much because as i see it it's pretty much broken if you want to download something thats not just a few kilobytes.

      \n

      Installing

      \n
        \n
      1. \n

        tns plugin add nativescript-downloadmanager

        \n
        2. \n
      2. \n

        Make sure the following permissions are in your android manifest

        \n
        <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>
        <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>
        <uses-permission android:name=\"android.permission.INTERNET\"/>
        \n
        3. \n
      \n

      Usage

      \n

      Usage is pretty much straightforward: This is a commented example on top of a simplified version of the default Hello world application (aka. just removed the tap count stuff and added a download method).

      \n

      TLDR: check the download method.

      \n
      import {Observable} from 'data/observable';
      // Import the class.
      import {DownloadManager} from 'nativescript-downloadmanager'

      export class HelloWorldModel extends Observable {

          private _message: string;

          constructor() {
              super();
          }

          public download() {
          \t// Instantiate a Download Manager. The way it's done (it uses a BroadcastReceiver), 
          \t// it'      s mean to be kept alive during all the application lifetime. But we can kill unsubscribe 
              let dm = new DownloadManager();
              // We download a file, in this example a 10mb test file. 
              // This is the Most simple version of doing it.
              // Aside from that there are optional parameters for. Directory (always inside android/data/yourapp/),
              // The file name, and title and description for the notification bar. By default it uses the file name 
              // as title, and no description.
              dm.downloadFile(\"http://cachefly.cachefly.net/10mb.test\", function(result,uri) {
                  // result is a boolean, if the download was successful, it will return true
                  console.log(result);
                  // Uri in file:// format of the downloaded file.
                  console.log(uri);
                  // unregisterBroadcast is used to unregister the broadcast (For example if you just want to 
                  // download a single file).
                  dm.unregisterBroadcast();
              })
          }
      }
      \n

      Todo

      \n
        \n
      • More testing.
        • \n
      • Document it better.
        • \n
      • Make some kind of iOS emulatedish version.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-updated":{"name":"nativescript-plugin-firebase-updated","version":"2210.4.0","license":"MIT","readme":"

      NativeScript Firebase plugin

      \n

      \"Build\n\"NPM\n\"Downloads\"\n\"TotalDownloads\"\n\"Twitter

      \n

      \"Firebase\"/

      \n
      \n

      Plugin version 10.0.0 works with NativeScript 5.2+, and 6.1+ is recommended. Using an older version? Stick to plugin version < 10.

      \n
      \n

      Features

      \n\n

      Prerequisites

      \n

      Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

      \n

      Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

      \n
        \n
      • \n

        iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

        \n
        • \n
      • \n

        Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

        \n
        • \n
      \n

      Note: for using separate versions of these files for development and production environments see this section

      \n

      Installation

      \n

      If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-plugin-firebase
      \n

      This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

      \n
      \n

      Want to use this plugin with an external push notification provider and not use any Firebase feature? Just answer 'y' to the first question to skip most of them, and️ hop on over to the Push Notification. Do not run the plugin's .init function in this case!

      \n
      \n
      \n

      Using NativeScript SideKick? Then the aforementioned install script\nwill not (be able to) run. In that case, running the app for Android will result in this issue.\nTo fix that, see this comment.

      \n
      \n

      Config

      \n

      If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

      \n

      You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

      \n

      You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

      \n

      Using Vue?

      \n

      Please update your NativeScript-Vue template to 2.0 because it\naligns perfectly with this plugin (because that template is now much more similar to a regular NativeScript project).

      \n

      If you want a demo using Vue and Firestore, then check out this project,\nif you want one with Realtime DB, check out this one.

      \n

      iOS (Cocoapods)

      \n

      The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

      \n

      Google Play Services Version

      \n

      The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

      \n
      project.ext {
          googlePlayServicesVersion = \"+\"
      }
      \n

      Usage

      \n

      Demo app

      \n

      If you want a quickstart, clone the repo, then:

      \n
        \n
      • cd src.
        • \n
      • npm i (just answer 'n' to any prompts as they are ignored anyway).
        • \n
      • npm run demo.ios or npm run demo.android (answer 'n' again if prompted).
        • \n
      \n

      Start-up wiring

      \n

      We need to do some wiring when your app starts, so open app.js and add this before application.start();:

      \n
      JavaScript
      \n
      var firebase = require(\"nativescript-plugin-firebase\");

      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
      }).then(
          function () {
            console.log(\"firebase.init done\");
          },
          function (error) {
            console.log(\"firebase.init error: \" + error);
          }
      );
      \n

      TypeScript

      \n
      const firebase = require(\"nativescript-plugin-firebase\");

      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
      }).then(
        () => {
          console.log(\"firebase.init done\");
        },
        error => {
          console.log(`firebase.init error: ${error}`);
        }
      );
      \n

      Angular

      \n

      Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

      \n
      const firebase = require(\"nativescript-plugin-firebase\");

      @Component({
          // ...
      })
      export class AppComponent implements OnInit {
        ngOnInit() {
          firebase.init({
            // Optionally pass in properties for database, authentication and cloud messaging,
            // see their respective docs.
          }).then(
            () => {
              console.log(\"firebase.init done\");
            },
            error => {
              console.log(`firebase.init error: ${error}`);
            }
          );
        }
      }
      \n

      Known issues on iOS

      \n

      Trouble running on the simulator

      \n

      Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>
      <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
      <plist version=\"1.0\">
      <dict>
          <key>com.apple.keystore.access-keychain-keys</key>
          <true/>
          <key>com.apple.keystore.device</key>
          <true/>
      </dict>
      </plist>
      \n

      Authentication failed: invalid_token

      \n

      On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

      \n
      [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
      or
      [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
      \n

      This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

      \n
      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
        iOSEmulatorFlush: true
      }).then()
      \n

      Pod dependency error

      \n

      If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

      \n

      This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

      \n

      Known issues on Android

      \n

      Genymotion

      \n

      You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

      \n

      DexIndexOverflowException

      \n
      com.android.dex.DexIndexOverflowException: method ID not in..
      \n

      Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

      \n
      android {  
        defaultConfig {  
          applicationId = \"__PACKAGE__\"  
          multiDexEnabled true
          generatedDensities = []
        }  
        aaptOptions {  
          additionalParameters \"--no-version-vectors\"  
        }  
      }
      \n

      java.lang.OutOfMemoryError: GC overhead limit exceeded

      \n

      Increase the Java Max Heap Size like this (the bit at the end):

      \n
      android {  
        defaultConfig {  
          applicationId = \"__PACKAGE__\"  
          multiDexEnabled true
          generatedDensities = []
        }
        aaptOptions {  
          additionalParameters \"--no-version-vectors\"  
        }
        dexOptions {
          javaMaxHeapSize \"4g\"
        }
      }
      \n

      FirebaseApp with name [DEFAULT] doesn't exist

      \n

      Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

      \n

      Errors regarding API level 26.0.0

      \n

      Update your local Android SDKs:

      \n

      Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

      \n

      Found play-services:A.C.D, but version B.X.Y is needed..

      \n

      Update your Android bits like the issue above and reinstall the android platform in your project.

      \n

      include.gradle: Failed to apply plugin .. For input string: "+"

      \n

      You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

      \n
      android {  
        // other stuff here

        project.ext {
          googlePlayServicesVersion = \"15.0.0\"
        }
      }
      \n

      Where "15.0.0" is best set to the same value as the googlePlayServicesVersion value in this file.

      \n

      Separation of Environments

      \n

      It is possible to use different development and production environments by using multiple GoogleService-Info.plist and google-services.json files.

      \n

      Setup

      \n
        \n
      1. \n

        Create two separate Firebase projects (e.g. myproject and myproject-dev) and configure them with the same package name

        \n
        2. \n
      2. \n

        Download the plist and json files for both projects and put them in the relevant directories with either .dev or .prod appended to the file names, so you have the following files in place:

        \n
          \n
        • iOS\n
            \n
          • app/App_Resources/iOS/GoogleService-Info.plist.dev
            • \n
          • app/App_Resources/iOS/GoogleService-Info.plist.prod
            • \n
          \n
          • \n
        • Android\n
            \n
          • app/App_Resources/Android/google-services.json.dev
            • \n
          • app/App_Resources/Android/google-services.json.prod
            • \n
          \n
          • \n
        \n
        3. \n
      \n

      Note: if you currently have the storageBucket property in the firebase.init() then remove it (not mandatory anymore as of version 6.5.0 of this plugin), so it will be taken automatically from the relevant google services plist and json files.

      \n

      Build

      \n

      The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

      \n
        \n
      • prod will be selected if you run with either the --release, --env.prod or --env.production flags
        • \n
      • dev will be selected if you do not run with any of the above flags
        • \n
      \n

      Note: if you do not have both dev and prod files in place, the regular GoogleService-Info.plist and google-services.json files will be used.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-date-range-picker":{"name":"nativescript-date-range-picker","version":"0.1.3","license":"MIT","readme":"

      NativeScript Date range picker plugin

      \n

      An iOS plugin for choosing a date range from a calendar. This is built on top of native ios library by PeteC.

      \n

      Installation

      \n

      Run the following command from the root of your project:

      \n
      $ tns plugin add nativescript-date-range-picker
      \n

      This command automatically installs the necessary files, as well as stores nativescript-date-range-picker as a dependency in your project's package.json file.

      \n

      Examples

      \n

      The code below creates a date range picker in xml with text color for all the date labes as #AA0000 (~red) and selection color as #0000AA (~blue).

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\" xmlns:tools=\"nativescript-date-range-picker\">
        <StackLayout>
          <tools:DateRangePicker textColor=\"#AA0000\" selectionColor=\"#0000AA\" draggedTo=\"onUserDraggedTo\" />
        </StackLayout>
      </Page>
      \n

      The following code listen to drag events

      \n
      exports.onUserDraggedTo = function(eventData) {
          console.log(eventData.dayView);
      }
      \n

      Screen Shots

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-location":{"name":"nativescript-location","version":"0.1.3","license":"ISC","readme":"

      NativeScript location plugin

      \n

      A nativescript ios plugin to obtain location permission for ios 8 and above.

      \n

      Installation

      \n

      Run the following command from the root of your project

      \n
      $ tns plugin add nativescript-location
      \n

      This command automatically install the necessary ios files from the cocoapod github repository and adds as a dependency in your package.json file

      \n

      Examples

      \n

      There is an sample application at the folder "Sample". To run it (assuming you have nativescript plugin installed globally)

      \n
      $ sudo npm install typescript -g
      $ tsc
      $ cd Example
      $ tns plugin add ../
      \n

      Run the application from your mac onto your iOS simulator by typing

      \n
      $ tns emulate ios --device=iPhone\\ 5s
      \n

      Following code from Sample/app/main.js shows a way to listen to location permission changes

      \n

      var nativeScriptLocationPermissionModule = require(\"nativescript-location\");
      var locationModule = require(\"location\");
      function pageLoaded(args) {
          var page = args.object;
          page.bindingContext = vmModule.mainViewModel;
          var locationManager = new nativeScriptLocationPermissionModule.LocationManager();
          locationManager.requestLocation().then(function(successResponse){
              locationModule.getLocation().then(function(location) {
      \t\t\t//do something with the location obtained.
      \t\t});
          },function(reason){
              console.log(\"Failed \"+reason);
          });
      }
      exports.pageLoaded = pageLoaded;
      \n\n

      Modify key NSLocationWhenInUseUsageDescription key in Info.plist to show your own message instead of "Need location when in use".

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation-ts":{"name":"tns-template-drawer-navigation-ts","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Core with TypeScript Drawer Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Side drawer navigation
        • \n
      • Five blank pages hooked to the drawer navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-drawer-ts --template tns-template-drawer-navigation-ts
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-drawer-ts --template nativescript-app-templates/packages/template-drawer-navigation-ts
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      There is a folder that is used for setting RadSideDrawer instance as an application root:

      \n
        \n
      • /app/app-root/app-root - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
        • \n
      \n

      RadSideDrawer has the following component structure:

      \n
        \n
      • RadSideDrawer - The component to display a drawer on the page.
        • \n
      • RadSideDrawer.drawerContent - Part of the RadSideDrawer, it holds a custom component drawer that displays the contents of the drawer.
        • \n
      • RadSideDrawer.mainContent - Part of the RadSideDrawer, it holds the main content for the page.
        • \n
      \n

      The template has the following blank page modules:

      \n
        \n
      • /app/home/home-page
        • \n
      • /app/browse/browse-page
        • \n
      • /app/search/search-page
        • \n
      • /app/featured/featured-page
        • \n
      • /app/settings/settings-page
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-common":{"name":"nativescript-plugin-firebase-common","version":"0.10.11","license":"MIT","readme":"

      NativeScript Firebase Common plugin

      \n

      How this plugin differs from nativescript-plugin-firebase:

      \n

      This plugin aims to provide a common interface for firebase instances that can be easily used across Android, iOS, and the Web.\nThis means that the API surface should be limited as much as possible and should try to mimic the\ndetail of the native APIs as much as possible.

      \n

      As it currently stands, the nativescript-plugin-firebase project does not offer an API that is similar to any\nof the Firebase SDK APIs and offers high-level functionality at the expense of composability.

      \n

      For this project right now, the common API is quite limited, but can easily be expanded to encapsulate additional features.

      \n

      Use when

      \n
        \n
      • you need to store JSON data in the cloud,
        • \n
      • you want to sync that data to other devices and platforms,
        • \n
      • you want to optionally protect that data by having users log in,
        • \n
      • you want to update clients at the moment the data changes (think chat and multiplayer games).
        • \n
      \n

      Prerequisites

      \n

      NativeScript 1.3.0 (tns --version) is required for smooth installation, so please upgrade if you need to.

      \n

      Head on over to firebase.com and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via a URL\nlike https://resplendent-fire-4211.firebaseio.com/.

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-plugin-firebase-common
      \n

      Usage

      \n

      createNew

      \n
        var Firebase = require(\"nativescript-plugin-firebase-common\").Firebase;

        var firebase = Firebase.createNew({
          url: 'https://resplendent-fire-4211.firebaseio.com'
          // persist: false // turn off offline disk persistence
        });
      \n

      All further examples assume firebase has been required.

      \n

      child

      \n

      Gets a firebase reference for the location at the specified relative path.

      \n
          var categories = firebase.child(\"categories\");
      \n

      set

      \n

      Replaces the data at the current firebase location.\nAnalogous to set() in the Firebase JavaScript SDK.

      \n

        // to store a JSON object
        var promise = firebase.set(
            {'foo':'bar'}
        );

        // to store an array of JSON objects
        var otherPromise = firebase.set(
            [
              {name: 'Telerik', country: 'Bulgaria'},
              {name: 'Google', country: 'USA'}
            ]
        );
      \n

      push

      \n

      This function will store the given object as a new child at the current location:

      \n
        var promise = firebase.push(
            {
              'first': 'Eddy',
              'last': 'Verbruggen',
              'birthYear': 1977,
              'isMale': true,
              'address': {
                'street': 'foostreet',
                'number': 123
              }
            }
        );
      \n

      on

      \n

      To listen for changes in your database you can pass in a listener callback function.\nThe possible event types are:

      \n
        \n
      • value, Observes the value for the firebase ref.
        • \n
      • child_added, Observes when a new child is added to the firebase ref.
        • \n
      • child_changed, Observes when a child was modified in the firebase ref.
        • \n
      • child_moved, Observes when a child was moved in the firebase ref.
        • \n
      • child_removed, Observes when a child was removed from the firebase ref.
        • \n
      \n

      The plugin will take care of serializing native data structures to JSON data.

      \n
        var onChildAdded = function(result) {
          console.log(\"Key: \" + result.key());
          console.log(\"Value: \" + JSON.stringify(result.val()));
        };

        var users = firebase.child(\"users\");

        // listen to new \"children\" in the /users path
        var cancellationToken = users.on(\"child_added\", onChildAdded);
        
        // to disable the event listener:
        users.off(\"child_added\", cancellationToken);
      \n

      This method and the related off() method have been designed to be analogous to the Firebase JavaScript SDK versions.

      \n

      remove

      \n

      You can remove the entire database content by omitting the param,\nbut if you only want to wipe everything at '/users', do this:

      \n
        var promise = firebase.remove(\"/users\");
      \n

      login

      \n

      v 1.1.0 of this plugin adds the capability to log your users in. Either anonymously or by email and password.\nYou need to add support for those features in your Firebase instance at the 'Login & Auth' tab.

      \n

      You can expect more login mechanisms to be added in the future.

      \n

      Anonymous login

      \n
        firebase.login({
          // note that you need to enable anonymous login in your firebase instance
          type: firebase.loginType.ANONYMOUS
        }).then(
            function (result) {
              // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token
              JSON.stringify(result);
            },
            function (errorMessage) {
              console.log(errorMessage);
            }
        )
      \n

      Password login

      \n
        firebase.login({
            // note that you need to enable email-password login in your firebase instance
          type: firebase.loginType.PASSWORD,
          email: 'useraccount@provider.com',
          password: 'theirpassword'
        }).then(
            function (result) {
              // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token
              JSON.stringify(result);
            },
            function (errorMessage) {
              console.log(errorMessage);
            }
        )
      \n

      Creating a Password account

      \n
        firebase.createUser({
          email: 'eddyverbruggen@gmail.com',
          password: 'firebase'
        }).then(
            function (uid) {
              dialogs.alert({
                title: \"User created\",
                message: \"uid: \" + uid,
                okButtonText: \"Nice!\"
              })
            },
            function (errorMessage) {
              dialogs.alert({
                title: \"No user created\",
                message: errorMessage,
                okButtonText: \"OK, got it\"
              })
            }
        )
      \n

      logout

      \n

      Shouldn't be more complicated than:

      \n
        firebase.logout();
      \n

      Credits

      \n

      The starting point for this plugin was this great Gist by John Bristowe.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-multi-drawer-update":{"name":"nativescript-vue-multi-drawer-update","version":"0.0.4","license":"MIT","readme":"

      NativeScript-Vue Multi Drawer

      \n

      A plugin which provides a drawer component that supports multiple drawers.

      \n\n

      All drawers are optional, and can be configured individually.

      \n

      Features:

      \n
        \n
      • drawers on left, right, top and bottom
        • \n
      • swipe to open
        • \n
      • swipe to close
        • \n
      • tap outside to close
        • \n
      • progressively dim main content as the drawer is opened
        • \n
      \n

      Quick Start

      \n
      $ npm i --save nativescript-vue-multi-drawer
      \n
      // main.js
      import Vue from 'nativescript-vue'
      ...
      + import MultiDrawer from 'nativescript-vue-multi-drawer'
      + Vue.use(MultiDrawer)
      \n

      Optionally set default options by passing options when installing the plugin:

      \n
      Vue.use(MultiDrawer, { 
        // override any option here
        // for example enable debug mode
        debug: true
      })
      \n

      For the available options check the source of defaultOptions

      \n
      <MultiDrawer>
        <StackLayout slot=\"left\">
          <Label text=\"Im in the left drawer\" />  
        </StackLayout>
        <StackLayout slot=\"right\">
          <Label text=\"Im in the right drawer\" />  
        </StackLayout>
        <StackLayout slot=\"top\">
          <Label text=\"Im in the top drawer\" />  
        </StackLayout>
        <StackLayout slot=\"bottom\">
          <Label text=\"Im in the bottom drawer\" />  
        </StackLayout>
        
        <Frame /> <!-- main content goes into the default slot -->
      </MultiDrawer>
      \n

      The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

      \n

      Opening a drawer from code

      \n

      Assign a ref to the Drawer component

      \n
      <MultiDrawer ref=\"drawer\" />
      \n

      And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

      \n

      Using v-model to toggle the drawer

      \n

      The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

      \n
      <MultiDrawer v-model=\"drawerState\" />
      \n
      export default {
        data() {
          return {
            drawerState: false // closed
          }
        },
        
        methods: {
          doStuff() {
            // do stuff
            this.drawerState = 'left' // this will open the left drawer
          }
        }
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-l":{"name":"nativescript-l","version":"4.2.3","license":"MIT","readme":"

      nativescript-l

      \n

      \"npm\"\n\"npm\"

      \n

      This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is a direct fork of nativescript-localize

      \n

      Differences

      \n

      This plugin was created to have a different behavior from nativescript-localize:

      \n
        \n
      • the default localize method was renamed to l
        • \n
      • the default l method tries to load from a local JSON object
        • \n
      • you can load such a JSON object with loadLocalJSON passing either the JSON or the path to it
        • \n
      • if no local JSON, l load natively
        • \n
      • keys are not encoded anymore, meaning keys are the same in native/js worlds.
        • \n
      • the locale JSON must now be a trully nested object (no . in keys names)
        • \n
      • special characters support has been dropped in keys names.
        • \n
      \n

      Credits

      \n

      A lot of thanks goes out to Eddy Verbruggen and Ludovic Fabrèges (@lfabreges) for developing and maintaining nativescript-localize.

      \n

      Table of contents

      \n\n

      Installation

      \n
      tns plugin add nativescript-l
      \n

      Usage

      \n

      Create a folder i18n in the app folder with the following structure:

      \n
      app
        | i18n
            | en.json           <-- english language
            | fr.default.json   <-- french language (default)
            | es.js
      \n

      You need to set the default langage and make sure it contains\nthe application name to avoid any error.

      \n

      Angular

      \n

      app.module.ts

      \n
      import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
      import { NativeScriptLocalizeModule } from \"nativescript-l/angular\";
      import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";

      import { AppComponent } from \"./app.component\";

      @NgModule({
        declarations: [AppComponent],
        bootstrap: [AppComponent],
        imports: [
          NativeScriptModule,
          NativeScriptLocalizeModule
        ],
        schemas: [NO_ERRORS_SCHEMA]
      })
      export class AppModule { }
      \n

      Template

      \n
      <Label text=\"{{ 'Hello world !' | L }}\"/>
      <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
      \n

      Script

      \n
      import { localize } from \"nativescript-l\";

      console.log(localize(\"Hello world !\"));
      \n

      Javascript / XML

      \n

      app.js

      \n
      const application = require(\"application\");
      const localize = require(\"nativescript-l\");
      application.setResources({ L: localize.l });
      \n

      Template

      \n
      <Label text=\"{{ L('Hello world !') }}\"/>
      <Label text=\"{{ L('I am %s', 'user name') }}\"/>
      \n

      Script

      \n
      const localize = require(\"nativescript-l\");

      console.log(localize(\"Hello world !\"));
      \n

      Quirks

      \n

      ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

      \n
        const page = args.object;
        page.bindingContext = new Observable();
      \n

      Vue

      \n

      app.js

      \n
      import { l } from \"nativescript-l\";

      Vue.filter(\"L\", l);
      \n

      Template

      \n
      <Label :text=\"'Hello world !'|L\"></Label>
      <Label :text=\"'I am %s'|L('user name')\"></Label>
      \n

      File format

      \n

      Each file is imported using require, use the file format of your choice:

      \n

      JSON

      \n
      {
        \"app.name\": \"My app\",
        \"ios.info.plist\": {
          \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
        },
        \"user\": {
          \"name\": \"user.name\",
          \"email\": \"user.email\"
        },
        \"array\": [
          \"split the translation into \",
          \"multiples lines\"
        ],
        \"sprintf\": \"format me %s\",
        \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
      }
      \n

      Javascript

      \n
      const i18n = {
        \"app.name\": \"My app\"
      };

      module.exports = i18n;
      \n

      Frequently asked questions

      \n

      How to set the default language?

      \n

      Add the .default extension to the default language file to set it as the fallback language:

      \n
      fr.default.json
      \n

      How to localize the application name?

      \n

      The app.name key is used to localize the application name:

      \n
      {
        \"app.name\": \"My app\"
      }
      \n

      How to localize iOS properties?

      \n

      Keys starting with ios.info.plist. are used to localize iOS properties:

      \n
      {
        \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      }
      \n

      How to change the language dynamically at runtime?

      \n

      Seeing this module now uses JSON objects. Overriding consist of 3 steps:

      \n
        \n
      • overriding native language, done with overrideLocaleNative
        • \n
      • overriding json language, done with loadLocalJSON
        • \n
      • updating all labels, buttons.... your job!
        • \n
      \n
      import { overrideLocaleNative } from \"nativescript-l/localize\";
      const localeOverriddenSuccessfully = overrideLocaleNative(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)
      \n
      \n

      Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

      \n
      \n
      android {

        // there maybe other code here //

        bundle {
          language {
            enableSplit = false
          }
        }
      }
      \n
      \n

      Tip: you can get the default language on user's phone by using this

      \n
      \n
      import { device } from '@nativescript/core/platform';

      console.log(\"user's language is\", device.language.split('-')[0]);
      \n
      \n

      Tip: overrideLocaleNative method stores the language in a special key in app-settings,\nyou can access it like this,

      \n
      \n
      import { getString } from '@nativescript/core/application-settings'; 

      console.log(getString('__app__language__')); // only available after the first time you use overrideLocaleNative(langName);
      \n

      Troubleshooting

      \n

      The angular localization pipe does not work when in a modal context

      \n

      As a workaround, you can trigger a change detection from within your component constructor:

      \n
      constructor(
        private readonly params: ModalDialogParams,
        private readonly changeDetectorRef: ChangeDetectorRef,
      ) {
        setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-svg-hw":{"name":"nativescript-svg-hw","version":"1.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-teststudio":{"name":"nativescript-teststudio","version":"1.1.5","license":"SEE LICENSE IN LICENSE.md","readme":"

      nativescript-teststudio

      \n

      This plugin provides support for nativescript applications testing with Progress Test Studio.

      \n

      #NativeScript Testing Plugin\nEasily instrument your NativeScript app to make it testable with Test Studio. Leverage a specifically built for the purpose plugin to extend your app with a few quick commands.

      \n

      ##Test Any NativeScript App

      \n

      Create automated tests for your NativeScript apps and run them against real devices or simulators without a single line of code. Whether you are using Angular, JavaScript or TypeScript, Test Studio provides first-class support for your truly native mobile apps.

      \n

      ##Easily Update Tests

      \n

      Test Studio will help you reduce test maintenance too. Test elements are stored, shared and referenced from a central repository. Updating a test element across multiple tests now takes just a click or two.

      \n

      ##Code Your Own Steps

      \n

      Easily collaborate with testers. Code more complex testing scenarios and test step Code more complex testing scenarios and test steps that can be easily added to your testers’ recorded tests.

      \n

      ##Run Tests Around The Clock

      \n

      Use the Test Studio Runner to plug your tests into your continuous integration process to empower testers to schedule their mobile test lists and run them 24/7.

      \n

      ##Test on Hundreds of Devices

      \n

      Record and test multiple gestures such as scroll, zoom, swipe and pinch, then run your test across 500+ unique Android and iOS devices. Get a detailed online report accompanied with a screenshot of every single test step you've created.

      \n

      Installation

      \n
      tns plugin add nativescript-teststudio\n
      \n

      For more information on configuring your NativeScript app check documentation pages.

      \n

      Supported Platforms

      \n

      NativeScript v.2.0.0+

      \n

      ###NOTE:\nNote that this plugin should only be used\tin debug builds, and should NOT be deployed with production apps.

      \n

      License

      \n

      Test Studio plugin for NativeScript applications testing is licensed under the Telerik End User License Agreement for Test Studio.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-firebase-env":{"name":"@altabsrl/nativescript-firebase-env","version":"0.0.7","license":"Apache-2.0","readme":"

      Nativescript Firebase Env

      \n

      Separate environment for nativescript-firebase

      \n

      Setup

      \n

      For iOS you can put your GoogleService-Info.plist.dev and GoogleService-Info.plist.prod at your project root.\nFor Android you can put your google-services.json.dev and google-services.json.prod at your project root.

      \n

      Build

      \n

      The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

      \n
        \n
      • dev will be selected if you run without --env.production.
        • \n
      • prod will be selected if you run with --env.production.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-timedatepicker-renet":{"name":"nativescript-timedatepicker-renet","version":"1.2.1","license":{"type":"","url":"https://github.com/leocaseiro/nativescript-timedatepicker/blob/master/LICENSE"},"readme":"

      nativescript-timedatepicker

      \n

      A NativeScript plugin providing native date and time pickers for Android and iOS.

      \n

      ##Android side\n\"alt\n##iOS side\n\"alt

      \n

      Usage

      \n

      //Import the plugin
      import * as TimeDatePicker from 'nativescript-timedatepicker';

      //Create a callback function
      let mCallback =  ((result) => {
        if (result) {
          alert(\"the time is \"+result);
        }
      });

      //Initialize the PickerManager (.init(yourCallback, title, initialDate))
      TimeDatePicker.init(mCallback,null,null);

      //Show the dialog
      TimeDatePicker.showDatePickerDialog();
      \n

      For more examples of usage see the demo main-view-model.ts.

      \n

      ##Credits\nThis plugin abstract two native libraries, hence here are the project and deserved merit to the creators.

      \n

      For iOS https://github.com/hackiftekhar/IQActionSheetPickerView
      \nFor Android https://github.com/CiTuX/datetimepicker

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@carployee/cfalert":{"name":"@carployee/cfalert","version":"1.0.0","license":"Apache-2.0","readme":"

      @carployee/cfalert

      \n
      ns plugin add @carployee/cfalert
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fs-noclear":{"name":"nativescript-fs-noclear","version":"1.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dschewchenko/nativescript-svg":{"name":"@dschewchenko/nativescript-svg","version":"1.0.3","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@quadrant2/keyword-recognizer":{"name":"@quadrant2/keyword-recognizer","version":"1.0.5","license":"Apache-2.0","readme":"

      @quadrant2/keyword-recognizer

      \n
      ns plugin add @quadrant2/keyword-recognizer
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"crank-native":{"name":"crank-native","version":"0.7.0","license":"MIT","readme":"

      Crank Native

      \n
      \n

      🔧🤖

      \n

      There is no logo yet

      \n
      \n

      \n \"npm\n \n \n \n \n \n \n

      \n

      Crank Native is a crank.js custom renderer for apps hosted on iOS and Android, based on NativeScript. In other words, it's a library that allows you to write native mobile apps using Crank.

      \n

      Setup

      \n
      # Make sure that you have `tns` (the NativeScript CLI) installed:
      #   https://docs.nativescript.org/start/quick-setup

      tns create myApp --template tns-template-blank-crank

      cd myApp
      npm install

      tns preview --no-hmr
      # or
      tns run ios --no-hmr
      # or
      tns run android --no-hmr

      # And to debug in Google Chrome:
      tns debug ios --no-hmr --debug-brk
      \n

      Documentation

      \n

      Nothing yet. It's based on React NativeScript, so you can read the React NativeScript docs for now. You can also read the NativeScript Core docs, which are equally applicable.

      \n

      The main difference from React NativeScript is that, while RNS component names have the format <$ContentView> (they are class components), Crank Native elements have the format <contentView> (they are JSX intrinsic elements).

      \n

      Sample app

      \n

      After initialising the sample app, you'll see the following simple view, renderered by this code app/components/AppContainer.tsx:

      \n\n \n \n \n \n \n
      \n \n
      \n

      The code for setting styles is somewhat verbose at present, but I'll be improving these things in time.

      \n

      Try without setting up your desktop environment (like an Expo Snack)

      \n

      I've hacked together an experimental NativeScript Playground template pinned at versions crank-native@0.6.0 and crank@0.1.0. You can try it out by scanning a QR code in the NativeScript Playground app, which will open it in the NativeScript Preview app.

      \n

      Note: Although this does run on iOS, I expect that it doesn't on Android, as the Android version of NativeScript Playground doesn't support the node module resolution trick I'm using to supply the Crank Native dependencies.

      \n

      Be warned that the NativeScript core team do not (yet) officially support Crank Native, and so this NativeScript Playground boilerplate is explicitly not representative of the full potential of either Crank or Crank Native. Some things are very likely to be broken in it (e.g. I would be surprised if async/await and generators work, and that's most of the essence of Crank).

      \n

      But at the very least, you can get a picture for the potential of the framework for now without having to set up a desktop environment.

      \n

      About Crank

      \n
      \n

      Write JSX-driven components with functions, promises and generators.

      \n

      Documentation is available at https://crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.

      \n
      \n

      Completed so far

      \n
        \n
      • [x] Fill in all the renderer APIs (AKA DOM interface) using React NativeScript's Host Config;
        • \n
      • [x] Complete a NativeScript CLI template, tns-template-blank-crank, so that users can initialise apps via NativeScript CLI;
        • \n
      • [x] Make a sample app;
        • \n
      • [x] Provide typings for intrinsic elements;
        • \n
      • [x] Implement ancestor context (wasn't necessary in the end) to support LayoutBase;
        • \n
      • [x] Implement event handling;
        • \n
      • [x] Create a NativeScript Playground template (Your Mileage May Vary – this is a best-effort with various limitations until official support from the NativeScript core team comes);
        • \n
      \n

      Roadmap 🛣

      \n
        \n
      • Write docs!
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-comments-sw":{"name":"nativescript-comments-sw","version":"1.1.16","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@arktivetour/phone-input":{"name":"@arktivetour/phone-input","version":"1.0.3","license":"Apache-2.0","readme":"

      @arktivetour/phone-input

      \n
      ns plugin add @arktivetour/phone-input
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-fetch":{"name":"nativescript-background-fetch","version":"1.2.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-windowed-modal":{"name":"@bigin/ns-windowed-modal","version":"7.0.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ez-nativescript-fonticon":{"name":"ez-nativescript-fonticon","version":"1.0.1","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-custom-entitlements":{"name":"nativescript-custom-entitlements","version":"0.2.0","license":"MIT","readme":"

      Nativescript Xcode 8 custom entitlements

      \n

      Nativescript hook for supporting custom xcode 8 entitlements, see https://github.com/NativeScript/nativescript-cli/issues/2075

      \n

      \"npm

      \n

      Installation

      \n

      Npm

      \n
      npm install nativescript-custom-entitlements --save-dev
      \n

      Configuration

      \n

      You'll need to have a entitlements file app.entitlements in the app/App_Resources/iOS folder.

      \n

      TIP You can open the project in xcode 8 and activate the entitlements you need. xcode will generate an entitlements file which you can copy to your nativescript project

      \n

      Example entitlements file

      \n

      app/App_Resources/iOS/app.entitlements

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>
      <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
      <plist version=\"1.0\">
      <dict>
      \t<key>aps-environment</key>
      \t<string>development</string>
      </dict>
      </plist>
      \n

      Run Demo

      \n
      npm run setup
      npm run demo.ios
      \n

      Check entitlements

      \n
      npm run setup
      npm run resetdemo
      cd demo
      tns build ios --for-device
      cp demo/platforms/ios/build/device/demo.ipa build/demo/platforms/ios/build/device/demo.zip
      unzip demo/platforms/ios/build/device/demo.zip -d demo/platforms/ios/build/device/
      codesign -d --entitlements :- \"demo/platforms/ios/build/device/Payload/demo.app\"
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pereirax/ns-twilio-video":{"name":"@pereirax/ns-twilio-video","version":"1.0.10","license":"Apache-2.0","readme":"

      @pereirax/ns-twilio-video

      \n
      ns plugin add @pereirax/ns-twilio-video
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nswitfy/jitsi-meet":{"name":"@nswitfy/jitsi-meet","version":"8.0.0-beta","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-utils":{"name":"nativescript-utils","version":"1.0.83","license":"MIT","readme":"

      NativeScript Utils

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat-share-plugin":{"name":"nativescript-wechat-share-plugin","version":"0.0.1","license":"MIT","readme":"

      Nativescript-wechat-share-plugin

      \n

      This plugin can not receive any message from wechat both app request and the result of sharing. I haven't found a way to add a custom activity in Android or define a delegate in iOS on nativescript platform.

      \n

      Install

      \n
      $ tns plugin add nativescript-wechat-share-plugin
      \n

      note: In iOS platform which i tested has a issue, it can not link an ios static library twice even though that static library has been remove. So if met some error like 'Can not find variable WXApiDelegate' in runtime, please follow steps as below and test again.

      \n
      $ tns platform remove ios
      $ tns platform add ios
      $ tns prepare ios
      \n

      iOS Configuration

      \n

      add below into <YOUR_PROJECT_DIR>/app/App_Resources/iOS/Info.plist

      \n
      <key>CFBundleURLTypes</key>
      <array>
      \t<dict>
      \t\t<key>CFBundleTypeRole</key>
      \t\t<string>Editor</string>
      \t\t<key>CFBundleURLName</key>
      \t\t<string>weixin</string>
      \t\t<key>CFBundleURLSchemes</key>
      \t\t<array>
      \t\t\t<string><!--YOUR_WECHAT_APP_ID--></string>
      \t\t</array>
      \t</dict>
      </array>
      \n

      Usage

      \n

      WechatSharingScene object defined in here. It has three options can be used:

      \n
      WechatSharingScene.SESSION //share to someone or a group
      WechatSharingScene.TIMELINE //share to Moments
      WechatSharingScene.FAVORITE //add to self favorite
      \n
      sharing text
      \n
      import {WechatSharePlugin, WechatSharingScene} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        text: \"this is a test text.\"
      };

      wechatSharePlugin.share(sharingOptions);
      \n
      sharing url
      \n
      import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);
        
      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        messages: {
          media: {
            type: WechatSharingType.TYPE_SHARING_WEBPAGE,
            webpageUrl: \"https://open.weixin.qq.com/\"
          }
        }
      };
      wechatSharePlugin.share(sharingOptions);
      \n
      sharing local image
      \n
      import * as fs from 'file-system';
      const appPath = fs.knownFolders.currentApp();
      const applePath = fs.path.join(appPath.path, \"img\", \"apple.jpg\");

      import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        messages: {
          title: \"test title\",
          description: \"test description\",
          media: {
            type: WechatSharingType.TYPE_SHARING_IMAGE,
            image: applePath
          }
        }
      }
      wechatSharePlugin.share(sharingOptions);
      \n
      sharing online image
      \n
      import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        messages: {
          title: \"shareOnlineImageToWechat title\",
          description: \"shareOnlineImageToWechat description\",
          media: {
            type: WechatSharingType.TYPE_SHARING_IMAGE,
            image: \"http://mmbiz.qpic.cn/mmbiz/PiajxSqBRaEIVJ6bW5EhIpIVZuxavukF9zUCzuoAKicofAtxibTBZOzsgP73GtO7jkkH2MQke21fOFC6Pnm0JvC6Q/0?wx_fmt=png/\"
          }
        }
      }
      wechatSharePlugin.share(sharingOptions);
      \n
      sharing music
      \n
      import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        messages: {
          title: \"shareMusicToWechat title\",
          description: \"shareMusicToWechat description\",
          media: {
            type: WechatSharingType.TYPE_SHARING_MUSIC,
            image: \"http://staff2.ustc.edu.cn/~wdw/softdown/index.asp/0042515_05.ANDY.mp3\"
          }
        }
      }
      wechatSharePlugin.share(sharingOptions);
      \n
      sharing video
      \n
      import {WechatSharePlugin, WechatSharingScene, WechatSharingType} from 'nativescript-wechat-share-plugin';

      let wechatSharePlugin = new WechatSharePlugin(/*YOUR_WECHAT_APP_ID*/);

      let sharingOptions = {
        scene: WechatSharingScene.TIMELINE,
        messages: {
          title: \"shareVideoToWechat title\",
          description: \"shareVideoToWechat description\",
          media: {
            type: WechatSharingType.TYPE_SHARING_VIDEO,
            image: \"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"
          }
        }
      }
      wechatSharePlugin.share(sharingOptions);
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pointzi":{"name":"nativescript-pointzi","version":"0.1.0","license":"Apache-2.0","readme":"

      nativescript-pointzi

      \n

      Prerequisites / Requirements

      \n

      Head on over to https://dashboard.pointzi.com/ and sign up for an account.

      \n

      Installation

      \n

      Follow the instructions on https://dashboard.pointzi.com/setting to install Pointzi on your NativeScript app.

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vallemar/localize":{"name":"@vallemar/localize","version":"5.0.6","license":"Apache-2.0","readme":"

      Nativescript localize

      \n

      This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities of each platform. It is inspired from nativescript-i18n

      \n

      Credits

      \n

      A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me. Eddy then joined NativeScript's Technical Steering Committe and to vastly improve plugin maintenance it was scoped and moved here!

      \n

      Table of contents

      \n\n

      Installation

      \n
      tns plugin add @nativescript/localize
      \n

      Usage

      \n

      Create a folder i18n in the src folder with the following structure:

      \n
      src
        | i18n
            | en.json           <-- english language
            | fr.default.json   <-- french language (default)
            | es.js
      \n

      You need to set the default langage and make sure it contains\nthe application name to avoid any error.

      \n

      Angular

      \n

      app.module.ts

      \n
      import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
      import { NativeScriptLocalizeModule } from '@nativescript/localize/angular';
      import { NativeScriptModule } from '@nativescript/angular';

      import { AppComponent } from './app.component';

      @NgModule({
      \tdeclarations: [AppComponent],
      \tbootstrap: [AppComponent],
      \timports: [NativeScriptModule, NativeScriptLocalizeModule],
      \tschemas: [NO_ERRORS_SCHEMA],
      })
      export class AppModule {}
      \n

      Template

      \n
      <Label text=\"{{ 'Hello world !' | L }}\"/>
      <Label text=\"{{ 'I am %s' | L:'user name' }}\"/>
      \n

      Script

      \n
      import { localize } from '@nativescript/localize';

      console.log(localize('Hello world !'));
      \n

      Javascript / XML

      \n

      app.js

      \n
      const application = require('application');
      const { localize } = require('@nativescript/localize');
      application.setResources({ L: localize });
      \n

      Template

      \n
      <Label text=\"{{ L('Hello world !') }}\"/>
      <Label text=\"{{ L('I am %s', 'user name') }}\"/>
      \n

      Script

      \n
      const { localize } = require('@nativescript/localize');

      console.log(localize('Hello world !'));
      \n

      Quirks

      \n

      ⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:

      \n
      const page = args.object;
      page.bindingContext = new Observable();
      \n

      Vue

      \n

      app.js

      \n
      import { localize } from '@nativescript/localize';

      Vue.filter('L', localize);
      \n

      Template

      \n
      <label :text=\"'Hello world !'|L\"></label> <label :text=\"'I am %s'|L('user name')\"></label>
      \n

      File format

      \n

      Each file is imported using require, use the file format of your choice:

      \n

      JSON

      \n
      {
      \t\"app.name\": \"My app\",
      \t\"ios.info.plist\": {
      \t\t\"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      \t},
      \t\"user\": {
      \t\t\"name\": \"user.name\",
      \t\t\"email\": \"user.email\"
      \t},
      \t\"array\": [\"split the translation into \", \"multiples lines\"],
      \t\"sprintf\": \"format me %s\",
      \t\"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"
      }
      \n

      Javascript

      \n
      export const i18n = {
      \t'app.name': 'My app',
      };
      \n

      Frequently asked questions

      \n

      How to set the default language?

      \n

      Add the .default extension to the default language file to set it as the fallback language:

      \n
      fr.default.json
      \n

      How to localize the application name?

      \n

      The app.name key is used to localize the application name:

      \n
      {
      \t\"app.name\": \"My app\"
      }
      \n

      How to localize iOS properties?

      \n

      Keys starting with ios.info.plist. are used to localize iOS properties:

      \n
      {
      \t\"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"
      }
      \n

      How to change the language dynamically at runtime?

      \n

      This plugin uses the native capabilities of each platform, language selection is therefore made by the OS.

      \n

      On iOS you can programmatically override this language since plugin version 4.2.0 by doing this:

      \n
      import { overrideLocale } from '@nativescript/localize';
      const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
      \n

      On Android you can programatically override this language since plugin version 4.2.1 by doing this:

      \n

      In your app.ts / main.ts / app.js

      \n
      import { Application } from '@nativescript/core';
      import { androidLaunchEventLocalizationHandler } from '@nativescript/localize';

      Application.on(Application.launchEvent, (args) => {
      \tif (args.android) {
      \t\tandroidLaunchEventLocalizationHandler();
      \t}
      });
      \n

      And in your settings page where user chooses the language:

      \n
      import { overrideLocale } from '@nativescript/localize';
      const localeOverriddenSuccessfully = overrideLocale('en-GB'); // or \"nl-NL\", etc (or even just the part before the hyphen)
      \n
      \n

      Important: In both cases, after calling override Locale, you must ask the user to restart the app

      \n
      \n

      For Example:

      \n
      import { Application } from '@nativescript/core';
      import { overrideLocale } from '@nativescript/localize';

      alert({
      \ttitle: 'Switch Language',
      \tmessage: 'The application needs to be restarted to change language',
      \tokButtonText: 'Quit!',
      }).then(() => {
      \tL.localize.overrideLocale(selectedLang);
      \tif (isAndroid) {
      \t\t(Application.android.foregroundActivity || Application.android.startActivity).finish();
      \t} else {
      \t\texit(0);
      \t}
      });
      \n
      \n

      Important: In case you are using Android app bundle to release your android app, add this to\nApp_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks

      \n
      \n
      android {

        // there maybe other code here //

        bundle {
          language {
            enableSplit = false
          }
        }
      }
      \n
      \n

      Tip: you can get the default language on user's phone by using this

      \n
      \n
      import { Device } from '@nativescript/core';

      console.log(\"user's language is\", Device.language.split('-')[0]);
      \n
      \n

      Tip: overrideLocale method stores the language in a special key in app-settings,\nyou can access it like this,

      \n
      \n
      import { ApplicationSettings } from '@nativescript/core';

      console.log(ApplicationSettings.getString('__app__language__')); // only available after the first time you use overrideLocale(langName);
      \n

      Troubleshooting

      \n

      The angular localization pipe does not work when in a modal context

      \n

      As a workaround, you can trigger a change detection from within your component constructor:

      \n
      constructor(
        private readonly params: ModalDialogParams,
        private readonly changeDetectorRef: ChangeDetectorRef,
      ) {
        setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
      }
      \n

      Starting from Android N, there is a weird side effect while using a WebView.

      \n

      For unknown reasons, the very first creation of it resets the application locale to the device default. Therefore, you have to set the desired locale back.\nThis is native bug and the workaround is

      \n
       <WebView url=\"https://someurl.com\" @loaded=\"webViewLoaded\"/>
      \n
      import { overrideLocale, androidLaunchEventLocalizationHandler } from '@nativescript/localize';
      import { ApplicationSettings } from '@nativescript/core';
      const locale = ApplicationSettings.getString('__app__language__');

      function webViewLoaded() {
      \toverrideLocale(locale);
      \tandroidLaunchEventLocalizationHandler();
      }
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"local-file-encrypto":{"name":"local-file-encrypto","version":"1.0.9","license":"MIT","readme":"

      @my-plugins-scope/encrypto

      \n
      ns plugin add @my-plugins-scope/encrypto
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"eamplugin":{"name":"eamplugin","version":"1.0.3","license":"Apache-2.0","readme":"

      @kopisplugin/eamplugin

      \n
      ns plugin add @kopisplugin/eamplugin
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-firebase-mlkit-unofficial":{"name":"nativescript-plugin-firebase-mlkit-unofficial","version":"5.3.1-beta2","license":"MIT","readme":"

      NativeScript Firebase plugin

      \n

      NOTE: THIS IS JUST A BUILD OF THIS BRANCH: issue699-mlkit-support

      \n

      \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

      \n

      \"Firebase\"/

      \n

      Features

      \n\n

      Prerequisites

      \n

      Head on over to https://console.firebase.google.com/ and sign up for a free account.\nYour first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com.

      \n

      Open your Firebase project at the Google console and click 'Add app' to add an iOS and / or Android app. Follow the steps (make sure the bundle id is the same as your nativescript.id in package.json and you'll be able to download:

      \n
        \n
      • \n

        iOS: GoogleService-Info.plist which you'll add to your NativeScript project at app/App_Resources/iOS/GoogleService-Info.plist

        \n
        • \n
      • \n

        Android: google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

        \n
        • \n
      \n

      Installation

      \n

      If you rather watch a (slightly outdated) video explaining the steps then check out this step-by-step guide - you'll also learn how to\nadd iOS and Android support to the Firebase console and how to integrate anonymous authentication:\n\"YouTube

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-plugin-firebase
      \n

      This will launch an install script which will guide you through installing additional components.\nCheck the doc links above to see what's what. You can always change your choices later.

      \n

      Config

      \n

      If you choose to save your config during the installation, the supported options may be saved in the firebase.nativescript.json at the root of your app.\nThis is to ensure your app may roundtrip source control and installation on CI won't prompt for user input during installation.

      \n

      You can reconfigure the plugin by going to the node_modules/nativescript-plugin-firebase and running npm run config.

      \n

      You can also change the configuration by deleting the firebase.nativescript.json and reinstalling the plugin.

      \n

      Using Vue?

      \n

      If you're using this template: vue-cli-template, then copy firebase.nativescript.json to the template folder. You could also symlink it: firebase.nativescript.json -> template/firebase.nativescript.json.

      \n

      And also, require the plugin before Vue.start runs (probably in main.js), but run firebase.init() afterwards (although it may work before). You could wrap it in a timeout to make sure.

      \n

      iOS (Cocoapods)

      \n

      The Firebase iOS SDK is installed via Cocoapods, so run pod repo update from the command prompt (in any folder) to ensure you have the latest spec.

      \n

      Google Play Services Version

      \n

      The plugin will default to this version of the Android play-services-base SDK.\nIf you need to change the version (to for instance the latest version), you can add a project ext property googlePlayServicesVersion to app/App_Resources/Android/app.gradle:

      \n
      project.ext {
          googlePlayServicesVersion = \"+\"
      }
      \n

      Usage

      \n

      Demo app

      \n

      If you want a quickstart, clone the repo, cd src, and npm run demo.ios or npm run demo.android.

      \n

      Start-up wiring

      \n

      We need to do some wiring when your app starts, so open app.js and add this before application.start();:

      \n
      JavaScript
      \n
      var firebase = require(\"nativescript-plugin-firebase\");

      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
      }).then(
          function (instance) {
            console.log(\"firebase.init done\");
          },
          function (error) {
            console.log(\"firebase.init error: \" + error);
          }
      );
      \n

      TypeScript

      \n
      import firebase = require(\"nativescript-plugin-firebase\");

      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
      }).then(
        instance => {
          console.log(\"firebase.init done\");
        },
        error => {
          console.log(`firebase.init error: ${error}`);
        }
      );
      \n

      Angular

      \n

      Because of the specifics of the angular bootstrap it is best to initalize firebase once the angular application is running. For example your main compoment's ngOnInit method:

      \n
      import firebase = require(\"nativescript-plugin-firebase\");

      @Component({
          // ...
      })
      export class AppComponent implements OnInit {
        ngOnInit() {
          firebase.init({
            // Optionally pass in properties for database, authentication and cloud messaging,
            // see their respective docs.
          }).then(
            instance => {
              console.log(\"firebase.init done\");
            },
            error => {
              console.log(`firebase.init error: ${error}`);
            }
          );
        }
      }
      \n

      Known issues on iOS

      \n

      Trouble running on the simulator

      \n

      Open or create App_Resources/iOS/<appname>.entitlements and add these two keys with the value true:

      \n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>
      <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">
      <plist version=\"1.0\">
      <dict>
          <key>com.apple.keystore.access-keychain-keys</key>
          <true/>
          <key>com.apple.keystore.device</key>
          <true/>
      </dict>
      </plist>
      \n

      Authentication failed: invalid_token

      \n

      On the simulator you may see this message if you have more than one app with the Firebase SDK ever installed:

      \n
      [FirebaseDatabase] Authentication failed: invalid_token (Invalid claim 'aud' in auth token.)
      or
      [FirebaseDatabase] Authentication failed: invalid_token (audience was project 'firegroceries-904d0' but should have been project 'your-firebase-project')
      \n

      This is a known issue in the Firebase SDK.\nI always use a real device to avoid this problem, but you can pass an 'iOSEmulatorFlush' option to init.

      \n
      firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs and 'iOSEmulatorFlush' to flush token before init.
        iOSEmulatorFlush: true
      }).then()
      \n

      Pod dependency error

      \n

      If you see an error like Unable to satisfy the following requirements: Firebase (~> 3.17.0) required by Podfile,\nthen run pod repo update on the command line to make sure you have the latest Podspec.

      \n

      This could happen when updating the plugin to a new version. You'll want to tns platform remove ios && tns platform add ios as well to clean out the old pod version.

      \n

      Known issues on Android

      \n

      Genymotion

      \n

      You can use the awesome Genymotion emulator\nbut you'll need to install Google Play Services on it or you'll run into errors during authentication.

      \n

      DexIndexOverflowException

      \n
      com.android.dex.DexIndexOverflowException: method ID not in..
      \n

      Congrats, you ran into this issue\nwhich can be solved by adding multiDexEnabled true to your app/App_Resources/Android/app.gradle\nso it becomes something like this:

      \n
      android {  
        defaultConfig {  
          applicationId = \"__PACKAGE__\"  
          multiDexEnabled true
          generatedDensities = []
        }  
        aaptOptions {  
          additionalParameters \"--no-version-vectors\"  
        }  
      }
      \n

      java.lang.OutOfMemoryError: GC overhead limit exceeded

      \n

      Increase the Java Max Heap Size like this (the bit at the end):

      \n
      android {  
        defaultConfig {  
          applicationId = \"__PACKAGE__\"  
          multiDexEnabled true
          generatedDensities = []
        }
        aaptOptions {  
          additionalParameters \"--no-version-vectors\"  
        }
        dexOptions {
          javaMaxHeapSize \"4g\"
        }
      }
      \n

      FirebaseApp with name [DEFAULT] doesn't exist

      \n

      Another possible error is "FirebaseApp with name [DEFAULT] doesn't exist." which will be solved by\nplacing google-services.json to platforms/android/google-services.json (see above), and making\nthe changes to build.gradle which are mentioned above as well.

      \n

      Errors regarding API level 26.0.0

      \n

      Update your local Android SDKs:

      \n

      Just run $ANDROID_HOME/tools/bin/sdkmanager --update from a command prompt\nor launch the SDK manager from Android Studio, expand Extras and install any pending updates.

      \n

      Found play-services:10.A.B, but version 11.X.Y is needed..

      \n

      Update your Android bits like the issue above and reinstall the android platform in your project.

      \n

      include.gradle: Failed to apply plugin .. For input string: "+"

      \n

      You probably have another plugin depending on Google Play Services (Google Maps, perhaps).\nWe need to pin to a specific play services version to play nice with others, so open app/App_Resources/Android/app.gradle and add:

      \n
      android {  
        // other stuff here

        project.ext {
          googlePlayServicesVersion = \"11.8.0\"
        }
      }
      \n

      Where "11.8.0" is best set to the same value as the firebaseVersion value in this file.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oauth2":{"name":"nativescript-oauth2","version":"3.0.10","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-vue-template-compiler":{"name":"nativescript-akylas-vue-template-compiler","version":"2.3.5","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dudipsh/markdown":{"name":"@dudipsh/markdown","version":"1.0.8","license":"Apache-2.0","readme":"

      @ns-markdown/markdown

      \n
      ns plugin add @ns-markdown/markdown
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"shumih-tns-popup":{"name":"shumih-tns-popup","version":"1.6.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fiftoine/loopback-sdk-builder":{"name":"@fiftoine/loopback-sdk-builder","version":"2.1.0-rc.13.3","license":"MIT","readme":"

      \"npm \"Build \"dependencies\"

      \n

      \"LoopBack

      \n

      LoopBack SDK Builder

      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Features

      \n

      LINK TO FEATURES

      \n

      FireLoop API (NEW)

      \n

      Are you willing to build pure and modern Real-Time applications?? Then CHECK THIS OUT

      \n

      \"FireLoop.io\"

      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-audio-v2":{"name":"nativescript-audio-v2","version":"5.0.4","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rootbeer":{"name":"nativescript-rootbeer","version":"1.0.0","license":"Apache License 2.0","readme":"

      NativeScript RootBeer

      \n

      A NativeScript module for detecting root on Android. It uses the RootBeer library

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-rootbeer
      \n

      Usage

      \n

      Here are the supported functions:

      \n

      function: isRooted

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer')

        rootBeer.isRooted();
      \n

      TypeScript

      \n
        import { isRooted } from 'nativescript-rootbeer'

        isRooted()
      \n

      function: detectRootManagementApps

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer')

        rootBeer.detectRootManagementApps();
      \n

      TypeScript

      \n
        import { detectRootManagementApps } from 'nativescript-rootbeer'

        detectRootManagementApps()
      \n

      function: detectPotentiallyDangerousApps

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.detectPotentiallyDangerousApps();
      \n

      TypeScript

      \n
        import { detectPotentiallyDangerousApps } from 'nativescript-rootbeer'

        detectPotentiallyDangerousApps()
      \n

      function: detectTestKeys

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.detectTestKeys();
      \n

      TypeScript

      \n
        import { detectTestKeys } from 'nativescript-rootbeer'

        detectTestKeys()
      \n

      function: checkForBusyBoxBinary

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkForBusyBoxBinary();
      \n

      TypeScript

      \n
        import { checkForBusyBoxBinary } from 'nativescript-rootbeer'

        checkForBusyBoxBinary()
      \n

      function: checkForSuBinary

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkForSuBinary();
      \n

      TypeScript

      \n
        import { checkForSuBinary } from 'nativescript-rootbeer'

        checkForSuBinary()
      \n

      function: checkSuExists

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkSuExists();
      \n

      TypeScript

      \n
        import { checkSuExists } from 'nativescript-rootbeer'

        checkSuExists()
      \n

      function: checkForRWPaths

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkForRWPaths();
      \n

      TypeScript

      \n
        import { checkForRWPaths } from 'nativescript-rootbeer'

        checkForRWPaths()
      \n

      function: checkForDangerousProps

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkForDangerousProps();
      \n

      TypeScript

      \n
        import { checkForDangerousProps } from 'nativescript-rootbeer'

        checkForDangerousProps()
      \n

      function: checkForRootNative

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.checkForRootNative();
      \n

      TypeScript

      \n
        import { checkForRootNative } from 'nativescript-rootbeer'

        checkForRootNative()
      \n

      function: detectRootCloakingApps

      \n

      JavaScript

      \n
        let rootBeer = require('nativescript-rootbeer');

        rootBeer.detectRootCloakingApps();
      \n

      TypeScript

      \n
        import { detectRootCloakingApps } from 'nativescript-rootbeer'

        detectRootCloakingApps()
      \n

      Thanks

      \n

      Scott Alexander-Bown and Matthew Rollings for their contributions to RootBeer

      \n

      License

      \n

      Apache License, Version 2.0

      \n
      Copyright (C) 2015, Scott Alexander-Bown, Mat Rollings, Ryan Edge\n\nLicensed under the Apache License, Version 2.0 (the "License");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n     http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync-cli":{"name":"nativescript-app-sync-cli","version":"1.0.1","license":"MIT","readme":"

      NativeScript AppSync Management CLI

      \n

      Please refer to the NativeScript plugin docs.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-7":{"name":"nativescript-facebook-7","version":"7.0.4","license":"Apache 2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-native-chess-oex-scanner-android":{"name":"react-native-chess-oex-scanner-android","version":"0.1.2","license":"MIT","readme":"

      react-native ChessOexScannerAndroid

      \n

      Use your installed chess OEX engines on your android device in your React Native applications.

      \n

      Installation

      \n
      npm install react-native-chess-oex-scanner-android
      \n

      Usage

      \n

      Here a full example in typescript. First, some notes :

      \n
        \n
      • \n

        all methods are asynchronous, returning a Promise,

        \n
        • \n
      • \n

        in constructor, you call ChessOexScannerAndroid.setupEngineUtils(), giving it the application id,

        \n
        • \n
      • \n

        the library manages what I call your store and the installed libraries. While the store handles what you can copy to the internal data, the installed libraries are the libraries you've choosen to copy. Please notice that you can only launch an engine installed in the internal data,

        \n
        • \n
      • \n

        you can call ChessOexScannerAndroid.getMyStoreEnginesNames() to list engines names from store and ChessOexScannerAndroid.installEngineFromMyStore(index) to install an engine from the store. Please notice that the index given to installEngineFromMyStore() will match the order of engines returned from getMyStoreEnginesNames(),

        \n
        • \n
      • \n

        you can call ChessOexScannerAndroid.listInstalledEngines() to list installed engines, and ChessOexScannerAndroid.executeInstalledEngine(index) to execute an engine. Please notice that here also the index given to executeInstalledEngine() will match the order of engines returned from executeInstalledEngine(),

        \n
        • \n
      • \n

        you should call regularly ChessOexScannerAndroid.readCurrentEnginePendingOutputs() in order to read outputs from the engine process,

        \n
        • \n
      • \n

        last but not least, you should call ChessOexScannerAndroid.stopCurrentRunningEngine() when releasing your component/app, in order to cleanup engine process.

        \n
        • \n
      \n
      import * as React from 'react';

      import { StyleSheet, View, Text, ScrollView, Button } from 'react-native';
      import Toast from 'react-native-easy-toast';
      import Dialog from 'react-native-dialog';
      import ChessOexScannerAndroid from 'react-native-chess-oex-scanner-android';

      export default function App() {
        const toast = React.useRef<Toast | null>(null);
        const [commandValue, setCommandValue] = React.useState('');
        const [commandDialogVisible, setCommandDialogVisible] = React.useState(false);
        const [enginesStoreList, setEnginesStoreList] = React.useState<Array<string>>(
          []
        );
        const [enginesInstalledList, setEnginesInstalledList] = React.useState<
          Array<string>
        >([]);

        function askForCommand(_e: any) {
          setCommandDialogVisible(true);
        }

        async function readOutputsFromEngine() {
          try {
            const lines = await ChessOexScannerAndroid.readCurrentEnginePendingOutputs();
            if (lines.length > 0) {
              lines.forEach((singleLine) => console.log(singleLine));
            }
          } catch (err) {
            console.error(err);
          }
        }

        function handleCancelCommandDialog() {
          setCommandDialogVisible(false);
        }

        async function sendCommandToEngine() {
          setCommandDialogVisible(false);
          try {
            const command = commandValue;
            await ChessOexScannerAndroid.sendCommandToRunningEngine(command);
          } catch (err) {
            console.error(err);
          }
        }

        async function getStoreEnginesList() {
          const engines = await ChessOexScannerAndroid.getMyStoreEnginesNames();
          return engines;
        }

        async function getInstalledEnginesList() {
          function stripNameFromLibName(libName: string) {
            let result = libName;
            result = result.substring(3);
            result = result.substring(0, result.length - 3);
            return result;
          }

          const engines = await ChessOexScannerAndroid.listInstalledEngines();
          return engines.map((item) => stripNameFromLibName(item));
        }

        async function installStoreEngine(index: number) {
          try {
            await ChessOexScannerAndroid.installEngineFromMyStore(index);
            toast.current?.show('Engine installed');
          } catch (err) {
            console.error(err);
            toast.current?.show('Failed to install engine !');
          }
        }

        async function playWithEngine(index: number) {
          try {
            const allEngines = await ChessOexScannerAndroid.listInstalledEngines();
            const engineName = allEngines[index];

            console.log('Launching engine ' + engineName);
            await ChessOexScannerAndroid.executeInstalledEngine(index);
          } catch (err) {
            console.error(err);
            toast.current?.show('Failed to launch engine !');
          }
        }

        React.useEffect(() => {
          async function setup() {
              // In setupEngineUtils, you give the android application id
            await ChessOexScannerAndroid.setupEngineUtils(
              'com.example.reactnativechessoexscannerandroid'
            );
          }

          setup()
            .then(() => {})
            .catch((err) => console.error(err))      ;
          getStoreEnginesList()
            .then((engines) => setEnginesStoreList(engines))
            .catch((err) => {
              console.error(err);
              toast.current?.show('Failed to get engines list from your store !');
            });
          getInstalledEnginesList()
            .then((engines) => setEnginesInstalledList(engines))
            .catch((err) => {
              console.error(err);
              toast.current?.show('Failed to get installed engines list !');
            });

          return function () {
            ChessOexScannerAndroid.stopCurrentRunningEngine();
          };
        }, []);

        React.useEffect(() => {
          let timer = setInterval(readOutputsFromEngine, 1000);
          return function () {
            clearInterval(timer);
          };
        }, []);

        return (
          <View style={styles.container}>
            <Toast ref={toast} />
            <Dialog.Container visible={commandDialogVisible}>
              <Dialog.Title>Send command</Dialog.Title>
              <Dialog.Input
                label=\"Command:\"
                value={commandValue}
                onChangeText={setCommandValue}
              />
              <Dialog.Button label=\"Cancel\" onPress={handleCancelCommandDialog} />
              <Dialog.Button label=\"Send\" onPress={sendCommandToEngine} />
            </Dialog.Container>
            <Button onPress={askForCommand} title=\"Send command\" />
            <View style={styles.storeZone}>
              <Text style={styles.listHeader}>Engines from store</Text>
              <ScrollView>
                {enginesStoreList.map((engineName, index) => {
                  return (
                    <Text
                      key={engineName}
                      onPress={() => installStoreEngine(index)}
                      style={styles.listText}
                    >
                      {engineName}
                    </Text>
                  );
                })}
              </ScrollView>
            </View>
            <View style={styles.installedZone}>
              <Text style={styles.listHeader}>Engines installed</Text>
              <ScrollView>
                {enginesInstalledList.map((engineName, index) => {
                  return (
                    <Text
                      key={engineName}
                      onPress={() => playWithEngine(index)}
                      style={styles.listText}
                    >
                      {engineName}
                    </Text>
                  );
                })}
              </ScrollView>
            </View>
          </View>
        );
      }

      const styles = StyleSheet.create({
        container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        },
        storeZone: {
          width: '100%',
          height: '40%',
          backgroundColor: 'lightgreen',
          marginTop: 10,
        },
        installedZone: {
          width: '100%',
          height: '40%',
          backgroundColor: 'lightyellow',
        },
        listHeader: {
          color: 'blue',
          marginLeft: 'auto',
          marginRight: 'auto',
          marginTop: 5,
        },
        listText: {
          marginLeft: 10,
          marginTop: 8,
          marginBottom: 8,
          color: 'magenta',
        },
      });
      \n

      Contributing

      \n

      See the contributing guide to learn how to contribute to the repository and the development workflow.

      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-settings":{"name":"nativescript-wifi-settings","version":"1.1.2","readme":"

      Wifi settings

      \n

      Wifi settings is a nativescript plugin it allow user to open wifi setting in Android and Ios .

      \n

      Installation

      \n
      tns plugin add nativescript-wifi-settings
      \n

      Usage

      \n
      const wifiSettings = require(\"nativescript-wifi-settings\");

      wifiSettings.openWifiSettingsOnDevice();
      \n

      Contributing

      \n

      Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-share-file":{"name":"nativescript-akylas-share-file","version":"1.1.4","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk":{"name":"nativescript-zendesk","version":"0.3.4","license":"Apache-2.0","readme":"

      Zendesk Plugin for the NativeScript framework

      \n

      Setup

      \n
        \n
      • Create your Mobile SDK account in zendesk
        • \n
      • https://domain.zendesk.com/agent/admin/mobile_sdk
        • \n
      • Note your appid, url, and clientid for later
        • \n
      • Make sure to activate your help center (if you want it) in your MobileSDK->Customization screen
        • \n
      \n

      Add the plugin

      \n
      var zendeskModule = require(\"nativescript-zendesk\");
      var zendesk = null; // Place to store the activated object

      //Somewhere on load
      zendesk = zendeskModule.init({
          appId: \"\", //required
          url: \"\", //required
          clientId: \"\", //required
      \tadditionalInfo: \"Some extra details\", //(optional)
      \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
          enableLogging: true, //(optional), bool
          locale: \"en-us\" //(optional), string
      });
      \n

      Open the Help Center

      \n
      //Loads the main all category view
      zendesk.openHelpCenter();

      //Loads up a specific category
      zendesk.openHelpCenter({
              type: \"Category\",
              id: 202551987,//CategoryID: Must be a number, not a string
              name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
          });
          
      //Loads up a specific section
      zendesk.openHelpCenter({
              type: \"Section\",
              id: 203791988, //SectionID: Must be a number, not a string
              name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
          });
      \n

      Open the Request Contact List, shows previous conversations and ability to create new

      \n
      zendesk.openContactList();
      \n

      Open the Create new Request screen

      \n
      zendesk.createContactRequest();
      \n

      Options

      \n

      Set identify a user

      \n
          zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
              
          zendesk.createContactRequest();
      \n

      iOS Theme

      \n

      Docs

      \n

      //Create the theme
      //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
      var myTheme = {
      \tZDKSupportView: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttableBackgroundColor: \"#E0E0E0\",
      \t\tseparatorColor: \"#E0E0E0\",
      \t
      \t\t//0 = light, 1=dark
      \t\tsearchBarStyle: 0,
      \t\t
      \t\tnoResults: {
      \t\t\tfoundLabelColor: \"#E0E0E0\",
      \t\t\tfoundLabelBackground: \"#E0E0E0\",
      \t\t\tcontactButtonBackground: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
      \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
      \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\t\tcontactButtonBorderWidth: 1.0,
      \t\t\tcontactButtonCornerRadius: 4.0
      \t\t} 
      \t},
      \tZDKSupportTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportArticleTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\tparentsLabelColor: \"#E0E0E0\",
      \t\tparnetsLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tlabelBackground: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportAttachmentCell: {
      \t\tbackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tfileSizeLabelBackground: \"#E0E0E0\",
      \t\tfileSizeLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKNavigationBar: {
      \t\t\ttintColor: \"#E0E0E0\",
      \t\t\tbarTintColor: \"#E0E0E0\",
      \t\t\ttitleColor: \"#E0E0E0\",
      \t}
      };
      \t
      //Load the theme
      zendesk.setTheme(myTheme);
      \n

      Android Theme

      \n

      None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

      \n

      Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

      \n
      <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
      \n

      And add your custom theme to the App_resources/Android/values/styles.xml

      \n
      <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
      \t<!-- THIS is where you can set the accent color -->
      \t<item name=\"colorAccent\">@color/ns_accent</item>
      \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
      </style>

      <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
          <!-- THIS is where you can color the back arrow! -->
          <item name=\"colorControlNormal\">@color/ns_accent</item>
      </style>
      \n

      Zendesk documentation is:

      \n

      Docs

      \n

      Other Notes

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kiip":{"name":"nativescript-kiip","version":"0.1.3","license":"Apache-2.0","readme":"

      Nativescript Kiip Wrapper

      \n

      Setup

      \n

      Add this to the app.js to run before application.start

      \n
      if (application.ios) {
          //iOS
          var __extends = this.__extends || function (d, b) {
              for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
              function __() { this.constructor = d; }
              __.prototype = b.prototype;
              d.prototype = new __();
          };
          
          var appDelegate = (function (_super) {
              __extends(appDelegate, _super);
              function appDelegate() {
                  _super.apply(this, arguments);
              }
              
              appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (app, launchOptions) {
                  kiip.initalize({
                      key: \"<YOUR KEY>\",
                  secret: \"<YOUR SECRET>\",
                      testMode: true
                  }); 
              };
              
              appDelegate.ObjCProtocols = [UIApplicationDelegate, KiipDelegate];
              return appDelegate;
          })(UIResponder);
          application.ios.delegate = appDelegate;
      }else{
          //ANDROID
          application.on(application.launchEvent, function (args) {
              kiip.initalize({
                  key: \"<YOUR KEY>\",
                  secret: \"<YOUR SECRET>\",
                  testMode: true
              }); 
          });
      }
      \n

      iOS

      \n

      Looks like kiip uses http, so in iOS we need to allow http in the info.plist per the guide

      \n
      <key>NSAppTransportSecurity</key>
      <dict>
          <key>NSAllowsArbitraryLoads</key>
          <true/>
      </dict>
      \n

      METHODS

      \n
      var kiip = require(\"nativescript-kiip\");
      \n

      Save Moment

      \n
      kiip.saveMoment({
              id: \"open_app\"
          }).then(function (args) {

              if (args.poptart != null) {
                  if (app.android) {
                      var context = app.android.currentContext;
                      args.poptart.show(context); //<-- CRASH HERE
                  }else if(app.ios){
                      debugger;
                      args.poptart.show();
                  }
              }

              viewModel.debug = \"Saved Moment \" + new Date()
          }, function (args) {
              viewModel.debug = \"Save Moment Failed\";
          });
      \n

      OPTIONS

      \n
      exports.onSetEmail = function (args) {
          kiip.setEmail(viewModel.email);
      }

      exports.onSetBirthday = function (args) {
          kiip.setBirthday(viewModel.birthday);
      }

      exports.onSetGender = function (args) {
          kiip.setGender(viewModel.gender);
      }

      //iOS Only
      exports.onStartSession = function (args) {
          kiip.startSession().then(function (args) {
              viewModel.debug = \"Session Started \" + new Date()
          }, function (args) {
              viewModel.debug = \"Session Start Failed\"
          });
      }

      //iOS Only
      exports.onEndSession = function (args) {
          kiip.endSession().then(function (args) {
              viewModel.debug = \"Session Ended \" + new Date()
          }, function (args) {
              viewModel.debug = \"Session End Failed\"
          });
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-video-recorder":{"name":"tns-video-recorder","version":"0.2.0","license":"Apache-2.0","readme":"

      Your Plugin Name

      \n

      Add your plugin badges here. See nativescript-urlhandler for example.

      \n

      Then describe what's the purpose of your plugin.

      \n

      In case you develop UI plugin, this is where you can add some screenshots.

      \n

      (Optional) Prerequisites / Requirements

      \n

      Describe the prerequisites that the user need to have installed before using your plugin. See nativescript-firebase plugin for example.

      \n

      Installation

      \n

      Describe your plugin installation steps. Ideally it would be something like:

      \n
      tns plugin add <your-plugin-name>
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altabsrl/nativescript-hook-versioning":{"name":"@altabsrl/nativescript-hook-versioning","version":"7.0.5","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-angular-snapshot":{"name":"nativescript-angular-snapshot","version":"1.5.2-5.5.372.32","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-launchkit":{"name":"nativescript-launchkit","version":"0.1.2","license":"Apache-2.0","readme":"

      Nativescript LaunchKitSDK Wrapper

      \n

      #Setup LaunchKit Account#

      \n

      Live Demo

      \n

      \"Preview\"

      \n

      Setup

      \n

      Add this in your app.js

      \n
      if (application.ios) {
          var __extends = this.__extends || function (d, b) {
              for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
              function __() { this.constructor = d; }
              __.prototype = b.prototype;
              d.prototype = new __();
          };
          
          var appDelegate = (function (_super) {
              __extends(appDelegate, _super);
              function appDelegate() {
                  _super.apply(this, arguments);
              }
              
              appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (app, launchOptions) {
                  launchkit.initalize({
                      token: \"OjMwhQZ5WgFFNZAQVBOYtWtAcXv1Kw2inxkzPEx_j6sK\" 
                  });
              };
              
              appDelegate.ObjCProtocols = [UIApplicationDelegate];
              return appDelegate;
          })(UIResponder);
          application.ios.delegate = appDelegate;
      }
      \n

      API

      \n
      var launchkit = require(\"nativescript-launchkit\");
      \n
      launchkit.initalize({
          token: \"\",  //From https://launchkit.io/sdk/install/,
          debug: false //tells all methods that have debug flags to use them
      });
      \n

      isSuperUser: Returns bool

      \n
      launchkit.isSuperUser();
      \n

      setUser

      \n
      launchkit.setUser({
          id: \"someid\",
          name: \"steve\",
          email: \"steve@launchkitsdk.com\"
      });
      \n

      showOnboarding: Returns Promise (args: args)

      \n
      launchkit.showOnboarding();
      \n
      \n

      Onboarding needs to be called from a view, will fail in app.js due to there being no UIWindow yet

      \n
      \n

      showReleaseNotes: Returns Promise (args: didPresent)

      \n
      launchkit.showAppReviewCard({
          page: page //args.object from your onNavigatingTo, or onPageLoaded events
      });
      \n

      showAppReviewCard: Returns Promise (args: didPresent, flowResult)

      \n
      launchkit.showAppReviewCard({
          page: page //args.object from your onNavigatingTo, or onPageLoaded events
      });
      \n

      Note: Unofficial plugin just wrapping the official iOS SDK

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@dchovhan/helloworld":{"name":"@dchovhan/helloworld","version":"1.0.2","license":"Apache-2.0","readme":"

      @dchovhan/helloworld

      \n
      ns plugin add @dchovhan/helloworld
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"firebase-for-nativescript":{"name":"firebase-for-nativescript","version":"1.0.5","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fabric":{"name":"nativescript-fabric","version":"2.0.2","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-gradient":{"name":"nativescript-ng-gradient","version":"0.0.2","license":"MIT","readme":"

      Nativescript + Angular Gradients

      \n

      An Angular directive for adding Gradients to your Nativescript UI.

      \n

      How To

      \n
        \n
      • Install.
        • \n
      \n
      tns plugin add nativescript-ng-gradient
      \n
        \n
      • In your App module.
        • \n
      \n
      import { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";
      import { NativeScriptModule } from \"nativescript-angular/nativescript.module\";
      import { NSGradientDirectiveModule } from \"nativescript-ng-gradient\";
      import { AppComponent } from \"./app.component\";

      @NgModule({
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ],
        imports: [
          NativeScriptModule,
          NSGradientDirectiveModule
        ],
        schemas: [ NO_ERRORS_SCHEMA ]
      })
      export class AppModule { }
      \n
        \n
      • In your Component.
        • \n
      \n
      import { Component } from \"@angular/core\";
      import { Types, Orientation } from \"nativescript-ng-gradient\";

      @Component({
        selector: 'ns-app',
        template: `
          <ActionBar title=\"Hello\"></ActionBar>

          <StackLayout [nsgrad]=\"gColors\" [nsgradType]=\"gType\" [nsgradOrient]=\"gOrient\" [nsgradRadius]=\"gRadius\">
            <Label text=\"Hello World\"></Label>
          </StackLayout>
              `
      })
      export class AppComponent {
        public gColors = ['#666666', '#eeeeee'];
        public gType = Types.LINEAR_GRADIENT;
        public gOrient = Orientation.LEFT_RIGHT;
        public gRadius = 0;
      }
      \n

      Properties

      \n

      [nsgrad] : Initiates the Directive with an optional value of an array of colors. Defaults to a gradient from black to white.

      \n

      [nsgradType] : Specifies the type of gradient to use. Defaults to Types.LINEAR_GRADIENT

      \n

      [nsgradOrient] : Specifies the Orientation of the gradient. Defaults to Orientation.LEFT_RIGHT

      \n

      [nsgradRadius] : Specifies the Radius of the gradient is any. Defaults to 0 (none);

      \n

      Note

      \n

      Still can't seem to get RADIAL_GRADIENT to work and this only supported on Android for now.

      \n
        \n
      • Thats all. No dependencies.
        • \n
      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"proxy-lib":{"name":"proxy-lib","version":"0.4.0","license":"Apache-2.0","readme":"

      proxy-lib

      \n

      Proxy library used in NativeScript tooling.\nThis library gives you methods to get, set and clear proxy settings respected by NativeScript tooling.

      \n

      Contents

      \n\n

      API

      \n

      getProxySettings

      \n

      This method returns the proxy information. In case there's no proxy settings file, the returned promise is resolved with null.

      \n

      getProxySettings definition

      \n
      /**
       * Get information about current proxy settings.
       * @param {string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }} params @optional CredentialsKey and path to file from which to get the information.
       * @returns {Promise<{ proxy: string, rejectUnauthorized: boolean, username: string, password: string, protocol: string, port: string, hostname: string }>} Information about proxy settings
       */
      getProxySettings(params: string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }): Promise<{proxy: string, rejectUnauthorized: boolean, username: string, password: string, protocol: string, port: string, hostname: string}>;
      \n

      getProxySettings examples

      \n
        \n
      • Passing credentials key only - in this case the settings will be read from default location:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.getProxySettings({ credentialsKey: \"myCredKey\" })
      \t.then(proxySettings => console.log(proxySettings))
      \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
      \n
        \n
      • Passing credentialsKey and userSpecifiedSettingsFilePath - proxy settings will be read from this file:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.getProxySettings({ credentialsKey: \"myCredKey\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
      \t.then(proxySettings => console.log(proxySettings))
      \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
      \n
        \n
      • Passing credentials key as string - in this case the settings will be read from default location:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.getProxySettings(\"myCredKey\")
      \t.then(proxySettings => console.log(proxySettings))
      \t.catch(err => console.error(\"Error while getting proxy settings.\", err));
      \n

      setProxySettings

      \n

      This method sets the proxy information to a specified file (or default location). In case proxy requires authentication, you can pass credentials and they'll be stored securely in Windows Credentials Manager.

      \n

      setProxySettings definition

      \n
      /**
       * Sets new proxy settings.
       * @param {string | { proxyUrl: string, credentialsKey: string, rejectUnauthorized: boolean, username: string, password: string, userSpecifiedSettingsFilePath: string }} params Proxy settings
       * @returns {Promise<void>}
       */
      setProxySettings(params: string | { proxyUrl: string, credentialsKey: string, rejectUnauthorized: boolean, username: string, password: string, userSpecifiedSettingsFilePath: string }): Promise<void>;
      \n

      setProxySettings parameters and examples

      \n
        \n
      • Passing all settings:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", credentialsKey: \"myCredKey\", rejectUnauthorized: true, username: \"myUsername\", password: \"myPassword\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n
        \n
      • proxyUrl - this parameter is mandatory and it shows the url of the proxy. You can pass it as a single string argument of the method or as part of an object:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n

      or

      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings(\"http://192.168.1.102:8888\")
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n

      The proxyUrl may also contain the authentication information, in this case the call will be:

      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://myUsername:myPassword@192.168.1.102:8888\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n

      or

      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings(\"http://myUsername:myPassword@192.168.1.102:8888\")
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n
        \n
      • rejectUnauthorized - this parameter defines if Node.js errors for invalid certificates should be respected. In case you do not pass this value, it will be set to true, so based on the configuration, errors like self signed certificate in certificate chain may be thrown. Setting this value to false will disregard such errors.
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", rejectUnauthorized: false })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n
        \n
      • username and password - these parameters should be used in case the proxy requires basic authentication. Currently you can use them only on Windows. Passing only one of the values will throw error. You can either pass the two arguments or include the authentication in the proxyUrl as shown above. The passed values will be saved in Windows Credential Manager.
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", username: \"myUsername\", password: \"myPassword\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n
        \n
      • credentialsKey - this parameter defines the name of the entry in Windows Credential Manager, where the username and password will be persisted. If it is not passed, it has default value. This parameter has no effect in case there's no authentication arguments passed.
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", username: \"myUsername\", password: \"myPassword\", credentialsKey: \"myKey\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n
        \n
      • userSpecifiedSettingsFilePath - this parameter defines the path to the file where proxy settings (without authentication) will be persisted. In case it is not passed, it has default value.
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.setProxySettings({ proxyUrl: \"http://192.168.1.102:8888\", userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
      \t.then(() => console.log(\"Successfully set proxy settings.\"))
      \t.catch(err => console.error(\"Unable to set proxy settings\", err));
      \n

      clearProxySettings

      \n

      This method clears the proxy settings by removing the proxy file and removing the specified entry from Credentials Manager.

      \n

      clearProxySettings definition

      \n
      /**
       * Clears proxy settings.
       * @param {string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }} params @optional Options for credentials key and path to be cleaned.
       * @returns {Promise<void>}
       */
      clearProxySettings(params: string | { credentialsKey: string, userSpecifiedSettingsFilePath: string }): Promise<void>;
      \n

      clearProxySettings examples

      \n
        \n
      • Removing default settings:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.clearProxySettings()
      \t.then(() => console.log(\"Successfully cleared proxy settings file.\"))
      \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
      \n
        \n
      • Removing settings from custom file:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.clearProxySettings({ userSpecifiedSettingsFilePath: \"~/.local/share/myProxyFile.json\" })
      \t.then(() => console.log(\"Successfully cleared custom proxy settings file.\"))
      \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
      \n
        \n
      • Removing settings from custom Credentials Manager entry and default settings file:
        • \n
      \n
      const proxyLib = require(\"proxy-lib\");
      proxyLib.clearProxySettings({ credentialsKey: \"myKey\" })
      \t.then(() => console.log(\"Successfully cleared custom proxy settings file and custom entry.\"))
      \t.catch(err => console.error(\"Unable to clear proxy settings\", err));
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/hook":{"name":"@nativescript/hook","version":"2.0.0","license":"Apache-2.0","readme":"

      @nativescript/hook

      \n

      This module gives you an easier way to install hooks into NativeScript projects when using the tns install <module> command. A project hook is some sort of script that is configured to be executed when the NativeScript CLI executes some action.

      \n

      Hooks go into the hooks/ folder of a project. For example, when tns prepare ... is executed, all script files in the hooks/before-prepare/ and hooks/after-prepare/ folders are executed, as well.

      \n

      This module simplifies the process of installing the scripts into the right project folder.

      \n

      How to use

      \n

      Describe the hooks

      \n

      First, add a description of your hooks to the module's package.json. Here's an example:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"before-prepare\",
              \"script\": \"lib/before-prepare.js\"
            }
          ]
        },
      }
      \n

      The above specifies that the script lib/before-prepare.js should be executed when the tns prepare ... command is executed. the "type" property specifies the type of the hook to install. The "script" property specifies the path to the script to execute. You can add more hooks by extending the "hooks" array.

      \n

      Install the hooks

      \n

      Add a post-install and pre-uninstall script to your package.json, if you haven't done so already:

      \n
        \"scripts\": {
          ...
          \"postinstall\": \"node postinstall.js\",
          \"preuninstall\": \"node preuninstall.js\"
        },
      \n

      The post-install script (postinstall.js in the example) should contain the following line:

      \n
      require('@nativescript/hook')(__dirname).postinstall();
      \n

      The pre-uninstall script (preuninstall.js in the example) should contain the following line:

      \n
      require('@nativescript/hook')(__dirname).preuninstall();
      \n

      These two hooks will take care of installing and removing the hooks from the NativeScript project, when your module is installed or uninstalled.

      \n

      tns install <module>

      \n

      NativeScript modules that install hooks are intended to be installed using the tns install <module> command, not through npm directly. During module installation the NativeScript CLI provides information to the post-install script where to put the hooks. The following environment variables are defined when installing through tns install <module>:

      \n
        \n
      • TNS_HOOKS_DIR - the directory where the hooks should be installed. It may or may not exist.
        • \n
      • TNS_PROJECT_DIR - the current project directory.
        • \n
      \n

      Modules installed this way can be uninstalled simply by running npm rm --save-dev.

      \n

      In-process hooks

      \n

      By default, hooks are executed in a child process and execution continues when the child process dies. This gives you flexibility when writing your hooks, but doesn't allow you to use any of the services of the CLI.

      \n

      To that end, in-process hooks allow you to execute your hooks in such a way so that you can use any of the services available from the injector. In-process hooks work only for JavaScript hooks. To enable in-process execution, all you need to have is a module.exports = ... statement in the hook. For example, if the hook script is:

      \n
      module.exports = function($logger) {
      };
      \n

      Then, the hook script will be require'd by the CLI and the exported function will be called through the injector.

      \n

      Hooks can take a special injected argument named hookArgs:

      \n
      module.exports = function(hookArgs) {
      };
      \n

      hookArgs is a hash containing all the arguments passed to the hooked method. For example, the prepare hook is activated by the CLI method preparePlatform(platform: string). Here, the hook will get the value of the platform argument in the hookArgs.platform property.

      \n

      If you execute asynchronous code in your hook, you need to return a promise, otherwise execution will continue before your hook completes:

      \n
      var mkdirp = require('mkdirp');
      module.exports = function($logger) {
        return new Promise(function(resolve, reject) {
            mkdirp('somedir', function(err) {
                if (err) {
                  reject(err);
                else {
                  resolve();
                }
              })
          });
      }
      \n

      And finally, when installing in-process hooks through this module, you need to explicitly specify that using the inject property of the script descriptor in the package.json:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"after-prepare\",
              \"script\": \"lib/after-prepare.js\",
              \"inject\": true
            }
          ]
        },
      }
      \n

      You have the ability to define a custom name to your hook in package.json, this attribute is optional and defaults to the plugin package name:

      \n
      {
        \"nativescript\": {
          \"hooks\": [
            {
              \"type\": \"after-prepare\",
              \"script\": \"lib/after-prepare.js\",
              \"name\": \"my-custom-hook\"
            }
          ]
        },
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-chat":{"name":"nativescript-zendesk-chat","version":"0.0.1","license":"Apache-2.0","readme":"

      Zendesk Plugin for the NativeScript framework

      \n

      Setup

      \n
        \n
      • Create your Mobile SDK account in zendesk
        • \n
      • https://domain.zendesk.com/agent/admin/mobile_sdk
        • \n
      • Note your appid, url, and clientid for later
        • \n
      • Make sure to activate your help center (if you want it) in your MobileSDK->Customization screen
        • \n
      \n

      Add the plugin

      \n
      var zendeskModule = require(\"nativescript-zendesk\");
      var zendesk = null; // Place to store the activated object

      //Somewhere on load
      zendesk = zendeskModule.init({
          appId: \"\", //required
          url: \"\", //required
          clientId: \"\", //required
      \tadditionalInfo: \"Some extra details\", //(optional)
      \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
          enableLogging: true, //(optional), bool
          locale: \"en-us\" //(optional), string
      });
      \n

      Open the Help Center

      \n
      //Loads the main all category view
      zendesk.openHelpCenter();

      //Loads up a specific category
      zendesk.openHelpCenter({
              type: \"Category\",
              id: 202551987,//CategoryID: Must be a number, not a string
              name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
          });
          
      //Loads up a specific section
      zendesk.openHelpCenter({
              type: \"Section\",
              id: 203791988, //SectionID: Must be a number, not a string
              name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
          });
      \n

      Open the Request Contact List, shows previous conversations and ability to create new

      \n
      zendesk.openContactList();
      \n

      Open the Create new Request screen

      \n
      zendesk.createContactRequest();
      \n

      Options

      \n

      Set identify a user

      \n
          zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
              
          zendesk.createContactRequest();
      \n

      iOS Theme

      \n

      Docs

      \n

      //Create the theme
      //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
      var myTheme = {
      \tZDKSupportView: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttableBackgroundColor: \"#E0E0E0\",
      \t\tseparatorColor: \"#E0E0E0\",
      \t
      \t\t//0 = light, 1=dark
      \t\tsearchBarStyle: 0,
      \t\t
      \t\tnoResults: {
      \t\t\tfoundLabelColor: \"#E0E0E0\",
      \t\t\tfoundLabelBackground: \"#E0E0E0\",
      \t\t\tcontactButtonBackground: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
      \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
      \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\t\tcontactButtonBorderWidth: 1.0,
      \t\t\tcontactButtonCornerRadius: 4.0
      \t\t} 
      \t},
      \tZDKSupportTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportArticleTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\tparentsLabelColor: \"#E0E0E0\",
      \t\tparnetsLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tlabelBackground: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportAttachmentCell: {
      \t\tbackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tfileSizeLabelBackground: \"#E0E0E0\",
      \t\tfileSizeLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKNavigationBar: {
      \t\t\ttintColor: \"#E0E0E0\",
      \t\t\tbarTintColor: \"#E0E0E0\",
      \t\t\ttitleColor: \"#E0E0E0\",
      \t}
      };
      \t
      //Load the theme
      zendesk.setTheme(myTheme);
      \n

      Android Theme

      \n

      None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

      \n

      Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

      \n
      <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
      \n

      And add your custom theme to the App_resources/Android/values/styles.xml

      \n
      <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
      \t<!-- THIS is where you can set the accent color -->
      \t<item name=\"colorAccent\">@color/ns_accent</item>
      \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
      </style>

      <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
          <!-- THIS is where you can color the back arrow! -->
          <item name=\"colorControlNormal\">@color/ns_accent</item>
      </style>
      \n

      Zendesk documentation is:

      \n

      Docs

      \n

      Other Notes

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-rollup-template":{"name":"nativescript-vue-rollup-template","version":"0.1.0","license":"MIT","readme":"

      NativeScript Vue.js Template

      \n

      This repo serves as the starting point for NativeScript + Vue.js projects, using nativescript-vue.

      \n

      This template creates a project ready to use with Vue single file components* (.vue files)!

      \n

      It creates a project with the structure:

      \n
      my-app
       |
       |-app   # your app code
       |  |-components
       |  |-...
       |
       |-tns   # the generated tns project
       |  |-app
       |  |-...
       |...
      \n

      This template supports:

      \n
        \n
      • .vue Single-File Components;
        • \n
      • scss imports and inside <style> tags in .vue files;
        • \n
      • root imports (imports starting with / refer to the root of the app folder);
        • \n
      • babel with es2015 and stage-2 presets;
        • \n
      \n

      Usage

      \n
        \n
      1. \n

        Install NativeScript tools (see http://docs.nativescript.org/start/quick-setup)

        \n
        2. \n
      2. \n

        Create app from this template

        \n
        3. \n
      \n
      tns create hello-ns-vue --template nativescript-vue-rollup-template

      cd hello-ns-vue
      \n
        \n
      1. Watch for changes while developing
        2. \n
      \n

      In two separate terminals run:

      \n
      # terminal 1
      rollup -c -w

      # terminal 2
      cd tns
      tns run android
      # or
      tns run ios
      \n
        \n
      1. Code!\nCheck Groceries Vue to see this template\nin action in a complete app.
        2. \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-code-push-sdk":{"name":"nativescript-code-push-sdk","version":"1.0.4","license":"MIT","readme":"

      NativeScript CodePush Management SDK

      \n

      Please refer to the NativeScript plugin docs.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cloudpayments":{"name":"nativescript-cloudpayments","version":"0.0.1","license":"Apache-2.0","readme":"

      @alexlnos/nativescript-cloudpayments

      \n
      ns plugin add @alexlnos/nativescript-cloudpayments
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-star-rating":{"name":"nativescript-vue-star-rating","version":"0.0.5","license":"MIT","readme":"

      NativeScript-Vue Star Rating

      \n

      A plugin which provides a 1 to 5 Star Rating component to display and rate.

      \n

      Features:

      \n
        \n
      • Customizable stars by size, fill color and empty color.
        • \n
      • CSS only UI, no images used.
        • \n
      • Tap a star to rate from 1 to 5.
        • \n
      \n

      Screenshots

      \n

      \"Screenshot

      \n

      Installation

      \n
      npm i --save nativescript-vue-star-rating
      \n
      // main.js
      import Vue from 'nativescript-vue';
      ...
      import StarRating from 'nativescript-vue-star-rating';
      Vue.use(StarRating);
      \n

      Use in template:

      \n
      ...
      <StarRating :value=\"rating\" size=\"90\" />
      ...
      \n

      ## Props

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropTypeDescriptionDefault Value
      valueNumberThe rating value1
      sizeString, NumberSize in pixels of width and height of the star75
      fillColorStringCSS color for the filled stars'#FFEB0A'
      emptyColorStringCSS color for the empty stars'#ABABAB'
      outlineColorStringCSS color for the star outline'#000'
      \n

      Events

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      EventReturnsDescription
      ratingSelectedNumberReturns the rating selected by tap from 1 to 5
      \n

      If you want to use the component as display only, just don't add an event listener for this event.

      \n

      Caveats

      \n

      Star outline is a work in progress, you can customize the color but the outline width is still missing.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nuxstep/nativescript-spotify":{"name":"@nuxstep/nativescript-spotify","version":"0.4.0","license":"Apache-2.0","readme":"

      @nuxstep/nativescript-spotify

      \n
      \n

      IMPORTANT: This project is in early development

      \n
      \n

      About

      \n

      This project surged from our own needs, as there's no Spotify plugin available for NativeScript (or at least updated).

      \n

      For now, the goal of this plugin is simple: Integrate Spotify into your app through the Spotify App Remote SDK, so you can control playback and get the user recommended content items.

      \n

      Later (maybe), we can implement the Spotify Authentication SDK and Web API for more features, but that will depend on our available time and needs, so, feel free to help the project through issue submissions and pull requests.

      \n

      Setup

      \n

      Add the plugin to your NativeScript project with:

      \n
      ns plugin add @nuxstep/nativescript-spotify
      \n

      Android

      \n

      In your app project, head over to App_Resources/Android/src/main/res and open AndroidManifest.xml. Inside the <activity> tag with the name com.tns.NativeScriptActivity, add the property android:launchMode="singleTask", as follows:

      \n
      <activity
        android:name=\"com.tns.NativeScriptActivity\"
        android:label=\"@string/title_activity_kimera\"
        android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode\"
        android:theme=\"@style/LaunchScreenTheme\"
        android:launchMode=\"singleTask\">
      \n

      Before the first <activity> tag is closed, add the following:

      \n
      <!-- Custom URI schemes -->
      <intent-filter>
        <action android:name=\"android.intent.action.VIEW\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
        <category android:name=\"android.intent.category.BROWSABLE\" />

        <data
          android:scheme=\"plugindemo\"
          android:host=\"spotify-login-callback\" />
      </intent-filter>
      \n

      Here you will set the Redirect URI for the Spotify App Remote authentication (it reads as plugindemo://spotify-login-callback). Change the android:scheme to something related to your app (like myapp) and host you can keep it as spotify-login-callback. Write down your Redirect URI, you will need it to set up the SpotifyAppRemote class.

      \n

      Before the <application> tag closes, add the following:

      \n
      <!-- Spotify Activity -->
      <activity
        android:name=\"com.spotify.sdk.android.authentication.LoginActivity\"
        android:theme=\"@android:style/Theme.Translucent.NoTitleBar\" />
      \n

      For Android 11 or higher, you also need to specify which other applications your application can query (read about it here). To do that, simply add the following snippet one level below the <manifest> tag:

      \n
      <queries>
        <package android:name=\"com.spotify.music\" />
      </queries>
      \n

      You'll need an App Fingerprint too. Refer to https://developer.spotify.com/documentation/android/quick-start/#register-app-fingerprints on how to create one. Write it down because you will need it later.

      \n

      iOS

      \n

      In your app project, head over to App_Resources/iOS and open Info.plist. At the end of the file, before the last </dict> tag closes, add the following:

      \n
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>spotify</string>
      </array>
      \n

      This allows the Spotify SDK to open the Spotify app through its URL scheme. After that, add the following:

      \n
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLName</key>
          <string>com.nuxstep.nativescript.plugindemo</string>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>plugindemo</string>
          </array>
        </dict>
      </array>
      \n

      Change com.nuxstep.nativescript.plugindemo to your app bundle name. Also, change plugindemo to your app URL scheme. Use the same URL scheme from Android for the sake of simplicity.

      \n

      In your app entry point (usually app.ts), import isIOS and SpotifyAppRemote at the top of the file:

      \n
      import { isIOS } from '@nativescript/core';
      import { SpotifyAppRemote } from '@nuxstep/nativescript-spotify';
      \n

      Then, implement a custom app delegate before your app starts, usually before Application.run() if you are using plain NativeScript.

      \n
      /**
       * Implement a custom AppDelegate on iOS so we can get the access token
       * returned from Spotify and store it on SpotifyAppRemote class
       */
      if (isIOS) {
      \t@NativeClass()
      \tclass AppDelegate extends UIResponder implements UIApplicationDelegate {
      \t\tpublic static ObjCProtocols = [UIApplicationDelegate];

      \t\tapplicationOpenURLOptions(_application: UIApplication, url: NSURL, _options: any): boolean {
      \t\t\tSpotifyAppRemote.setAuthorizationParameters(url);
      \t\t\treturn true;
      \t\t}
      \t}
      \tApplication.ios.delegate = AppDelegate;
      }
      \n

      If you are not using TypeScript, refer to https://v7.docs.nativescript.org/core-concepts/application-lifecycle#ios-uiapplicationdelegate on how to implement the app delegate with JavaScript.

      \n

      Spotify Developer

      \n

      Head over to https://developer.spotify.com/dashboard and register a developer account.

      \n

      In the dashboard, click on CREATE AN APP and provide a name and an description.

      \n

      Inside your app dashboard, click on EDIT SETTINGS. Set the Redirect URI as you have defined before (e.g. myapp://spotify-login-callback) and click on ADD.

      \n

      On section Bundle IDs, insert your app bundle name (e.g. com.example.myapp) and click on ADD. This one is for iOS.

      \n

      On section Android Packages, insert your app package name (e.g. com.example.myapp) and insert the App Fingerprint you've created before. Click on ADD and then on SAVE to finish.

      \n

      Write down your Client ID, you will need it to set up the SpotifyAppRemote class.

      \n

      Usage

      \n

      First, you need to pass the Client ID and Redirect URI to the SpotifyAppRemote class. You can do that in your app entry point before the custom app delegate:

      \n
      SpotifyAppRemote.setClientId('SPOTIFY_CLIENT_ID');
      SpotifyAppRemote.setRedirectUri('APP_REDIRECT_URI');
      \n

      In the page where you want to use SpotifyAppRemote, add to the top of the file:

      \n
      import { isIOS } from '@nativescript/core';
      import { SpotifyAppRemote } from '@nuxstep/nativescript-spotify';
      \n

      Then, somewhere you want, connect to SpotifyAppRemote:

      \n
      /**
       * If platform is iOS, we need to open the app and start playback
       * before connecting to SpotifyAppRemote. This is an iOS-specific
       * limitation.
       */
      if (isIOS) {
      \tawait SpotifyAppRemote.authorizeAndPlayURI();
      }

      await SpotifyAppRemote.connect();
      \n

      You can pass any Spotify URI to authorizeAndPlayURI(). If you pass an empty string or no parameter at all, it'll try to play the user's last played song.

      \n

      To understand how to use the plugin, refer to:

      \n\n

      This README will be updated with the available methods at a later time.

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-zendesk-with-chat":{"name":"nativescript-zendesk-with-chat","version":"0.2.4","license":"Apache-2.0","readme":"

      Zendesk Plugin for the NativeScript framework

      \n

      Setup

      \n
        \n
      • Create your Mobile SDK account in zendesk
        • \n
      • https://domain.zendesk.com/agent/admin/mobile_sdk
        • \n
      • Note your appid, url, and clientid for later
        • \n
      • Make sure to activate your help center (if you want it) in your MobileSDK->Customization screen
        • \n
      \n

      Add the plugin

      \n
      var zendeskModule = require(\"nativescript-zendesk\");
      var zendesk = null; // Place to store the activated object

      //Somewhere on load
      zendesk = zendeskModule.init({
          appId: \"\", //required
          url: \"\", //required
          clientId: \"\", //required
      \tadditionalInfo: \"Some extra details\", //(optional)
      \tticketSubject: \"Special Ticket Subject\", //(optional: Only works on android)
          enableLogging: true, //(optional), bool
          locale: \"en-us\" //(optional), string
      });
      \n

      Open the Help Center

      \n
      //Loads the main all category view
      zendesk.openHelpCenter();

      //Loads up a specific category
      zendesk.openHelpCenter({
              type: \"Category\",
              id: 202551987,//CategoryID: Must be a number, not a string
              name: \"My Sample Category\" //(Optional, sets the titlebar), only used on iOS
          });
          
      //Loads up a specific section
      zendesk.openHelpCenter({
              type: \"Section\",
              id: 203791988, //SectionID: Must be a number, not a string
              name: \"Some Section\" //(Optional, sets the titlebar), only used on iOS
          });
      \n

      Open the Request Contact List, shows previous conversations and ability to create new

      \n
      zendesk.openContactList();
      \n

      Open the Create new Request screen

      \n
      zendesk.createContactRequest();
      \n

      Options

      \n

      Set identify a user

      \n
          zendesk.identifyUser(\"users id\", \"some user name\", \"fake@thisuser.com\"); //Optional, defaults to anon if not set
              
          zendesk.createContactRequest();
      \n

      iOS Theme

      \n

      Docs

      \n

      //Create the theme
      //All of these properties are optional...and it's all grey, so dont use colors verbatim :)
      var myTheme = {
      \tZDKSupportView: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttableBackgroundColor: \"#E0E0E0\",
      \t\tseparatorColor: \"#E0E0E0\",
      \t
      \t\t//0 = light, 1=dark
      \t\tsearchBarStyle: 0,
      \t\t
      \t\tnoResults: {
      \t\t\tfoundLabelColor: \"#E0E0E0\",
      \t\t\tfoundLabelBackground: \"#E0E0E0\",
      \t\t\tcontactButtonBackground: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorNormal: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorHighlighted: \"#E0E0E0\",
      \t\t\tcontactButtonTitleColorDisabled: \"#E0E0E0\",
      \t\t\tcontactButtonBorderColor: \"#E0E0E0\",\t
      \t\t\tfoundLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\t\tcontactButtonBorderWidth: 1.0,
      \t\t\tcontactButtonCornerRadius: 4.0
      \t\t} 
      \t},
      \tZDKSupportTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportArticleTableViewCell: {
      \t\tviewBackgroundColor: \"#E0E0E0\",
      \t\tparentsLabelColor: \"#E0E0E0\",
      \t\tparnetsLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tlabelBackground: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tarticleParentsLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKSupportAttachmentCell: {
      \t\tbackgroundColor: \"#E0E0E0\",
      \t\ttitleLabelBackground: \"#E0E0E0\",
      \t\ttitleLabelColor: \"#E0E0E0\",
      \t\tfileSizeLabelBackground: \"#E0E0E0\",
      \t\tfileSizeLabelColor: \"#E0E0E0\",
      \t\ttitleLabelFont: UIFont.fontWithNameSize(\"Lato\", 16),
      \t\tfileSizeLabelFont: UIFont.fontWithNameSize(\"Lato\", 16)
      \t},
      \tZDKNavigationBar: {
      \t\t\ttintColor: \"#E0E0E0\",
      \t\t\tbarTintColor: \"#E0E0E0\",
      \t\t\ttitleColor: \"#E0E0E0\",
      \t}
      };
      \t
      //Load the theme
      zendesk.setTheme(myTheme);
      \n

      Android Theme

      \n

      None of the iOS methods work for android, styling is done in the Manifest/Style file (see the one in the plugin directory)

      \n

      Example:\nBy default Zendesk activities are using Theme.AppCompact.Light. If you want to customize this you have to change the android:theme="@style/Theme.AppCompat.Light" for some other style:

      \n
      <activity android:name=\"com.zendesk.sdk.support.SupportActivity\" android:theme=\"@style/@style/ZendeskTheme\"/>
      \n

      And add your custom theme to the App_resources/Android/values/styles.xml

      \n
      <style name=\"ZendeskTheme\" parent=\"Theme.AppCompat.Light\">
      \t<!-- THIS is where you can set the accent color -->
      \t<item name=\"colorAccent\">@color/ns_accent</item>
      \t<item name=\"actionBarTheme\">@style/MyApp.ActionBarTheme</item>
      </style>

      <style name=\"MyApp.ActionBarTheme\" parent=\"@style/ThemeOverlay.AppCompat.ActionBar\">       
          <!-- THIS is where you can color the back arrow! -->
          <item name=\"colorControlNormal\">@color/ns_accent</item>
      </style>
      \n

      Zendesk documentation is:

      \n

      Docs

      \n

      Other Notes

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-analytics-demographics":{"name":"nativescript-google-analytics-demographics","version":"0.3.5","license":"Apache-2.0","readme":"

      Nativescript Google Analytics

      \n

      Release Notes

      \n\n

      Add Plugin

      \n
      tns plugin add nativescript-google-analytics-demographics
      \n

      Get Config files

      \n
        \n
      • iOS instructions
        • \n
      • Android instructions
        • \n
      • Click the "Get a Configuration File" instrutctions
        • \n
      • Add the platform specific config file you just downloaded to its respective App_Resources/{platform} folder
        • \n
      \n

      Initalize the tracker in app.js

      \n

      PLAIN JS

      \n
      var application = require(\"application\");
      var googleAnalytics = require(\"nativescript-google-analytics\");
      application.mainModule = \"main-page\";
      application.cssFile = \"./app.css\";

      if (application.ios) {
          //iOS
          var __extends = this.__extends || function (d, b) {
              for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
              function __() { this.constructor = d; }
              __.prototype = b.prototype;
              d.prototype = new __();
          };
          
          var appDelegate = (function (_super) {
              __extends(appDelegate, _super);
              function appDelegate() {
                  _super.apply(this, arguments);
              }
              
              appDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
                  initAnalytics(); //Module Code to initalize
              };
              
              appDelegate.ObjCProtocols = [UIApplicationDelegate];
              return appDelegate;
          })(UIResponder);
          application.ios.delegate = appDelegate;
      }else{
          //ANDROID
          application.on(application.launchEvent, function (args) {
              initAnalytics(); //Module Code to initalize
          });

      }

      application.start();

      function initAnalytics(){
          googleAnalytics.initalize({
                      trackingId: \"UA-XXXXXXXX-1\", //YOUR Id from GA
                      //userId: \"9ac7a034-ffde-4783-8374-f78b3df39d32\", //Optional
                      dispatchInterval: 5,
                      logging: {
                          native: true,
                          console: false
                      }
                  });
      }
      \n

      Typescript

      \n
      var application = require(\"application\");
      import * as googleAnalytics from \"nativescript-google-analytics\";
      application.mainModule = \"main-page\";
      application.cssFile = \"./app.css\";

      if (application.ios) {
          //iOS
          class MyDelegate extends UIResponder implements UIApplicationDelegate {
              public static ObjCProtocols = [UIApplicationDelegate];

              applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
                  initAnalytics(); //Module Code to initalize
                  return true;
              }

          }

          application.ios.delegate = MyDelegate;

      }else{
          //ANDROID
          application.on(application.launchEvent, function (args) {
              initAnalytics(); //Module Code to initalize
          });

      }

      application.start();

      function initAnalytics(){
          googleAnalytics.initalize({
                      trackingId: \"UA-XXXXXXXX-1\", //YOUR Id from GA
                      //userId: \"9ac7a034-ffde-4783-8374-f78b3df39d32\", //Optional
                      dispatchInterval: 5,
                      logging: {
                          native: true,
                          console: false
                      }
                  });
      }
      \n

      Methods

      \n

      Initalize Options

      \n
      // category and action are not optional, label and value are
      googleAnalytics.initalize(
          {
            trackingId: \"UA-XXXXXXX-1\",
            userId: \"(some userid value)\", //Optional! Needs to be enabled on the tracking account: https://support.google.com/analytics/answer/3123666#FindTheUserID
            dispatchInterval: 30, //(Value in seconds)...Default Android is 30 minutes, default iOS is 2 minutes (120 seconds).  Disable by setting to 0.
            logging: {
               native: false, //Default false, should not be used in production
               console: false   
            }
          });
      \n

      Log Event

      \n
      // category and action are not optional, label and value are
      googleAnalytics.logEvent(
          {
            category: \"MyCategory\",
            action: \"MyAction\",
            label: \"MyLabel\",
            value: 7
          });
      \n

      Log ScreenView

      \n
      // category and action are not optional, label and value are
      googleAnalytics.logView(\"Secondary-Page\");
      \n

      Flush Message queue (dispatch)

      \n
      googleAnalytics.dispatch();
      \n

      Log exceptions

      \n
      googleAnalytics.logException({
              description: \"Cat tried to divide by 0...\",
              fatal: true //Optional, default false... if true will be a \"Crash\" in GA.  False is an \"Exception\"
          });
      //or
      googleAnalytics.logException(\"Ergmagerd excerpshern\");
      \n

      Log timings

      \n
          //OPTION 1: Auto (Time is stored internally, just call stopTimer when you're done)
          googleAnalytics.startTimer(\"Logo Timer\", {
                                      category: \"Animations\",
                                      name: \"Rotate the logo\", //Optional
                                      label: (application.ios) ? \"iOS\" : \"Android\"  //Optional
                                  });
          /* ... time passes as you do something ... */
          googleAnalytics.stopTimer(\"Logo Timer\");
          

          //OPTION 2: Raw, calculate and send yourself
          googleAnalytics.logTimingEvent({
              category: \"Animations\",
              value: diffMilliseconds, //Milliseconds, example 4000
              name: \"Rotate the logo\", //Optional
              label: \"Some Label\" //Optional
          });
      \n

      Issues

      \n

      Android

      \n

      Error: Could not find com.google.android.gms:play-services-analytics:8.4.0

      \n

      Resolution:\n*Open the Android Studio SDK manager, make sure all of your build tools are up to date. Then make sure your Google Play Services and Google Repository packages are up to date. In the Android Studio sdk manager, you'll find these under the "SDK Tools" tab. If you are using the standalone sdk manager, you would scroll down to the "Extras" section at the bottom and update them there\n*

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-community/typeorm":{"name":"@nativescript-community/typeorm","version":"0.2.29","license":"MIT","readme":"
      \n \n \n \n
      \n
      \n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n \n \"Codecov\"\n \n\t\n\t\t\n\t\n
      \n
      \n
      \n

      TypeORM is an ORM\nthat can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms\nand can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8).\nIts goal is to always support the latest JavaScript features and provide additional features\nthat help you to develop any kind of application that uses databases - from\nsmall applications with a few tables to large scale enterprise applications\nwith multiple databases.

      \n

      TypeORM supports both Active Record and Data Mapper patterns,\nunlike all other JavaScript ORMs currently in existence,\nwhich means you can write high quality, loosely coupled, scalable,\nmaintainable applications the most productive way.

      \n

      TypeORM is highly influenced by other ORMs, such as Hibernate,\nDoctrine and Entity Framework.

      \n

      Features

      \n
        \n
      • supports both DataMapper and ActiveRecord (your choice)
        • \n
      • entities and columns
        • \n
      • database-specific column types
        • \n
      • entity manager
        • \n
      • repositories and custom repositories
        • \n
      • clean object relational model
        • \n
      • associations (relations)
        • \n
      • eager and lazy relations
        • \n
      • uni-directional, bi-directional and self-referenced relations
        • \n
      • supports multiple inheritance patterns
        • \n
      • cascades
        • \n
      • indices
        • \n
      • transactions
        • \n
      • migrations and automatic migrations generation
        • \n
      • connection pooling
        • \n
      • replication
        • \n
      • using multiple database connections
        • \n
      • working with multiple databases types
        • \n
      • cross-database and cross-schema queries
        • \n
      • elegant-syntax, flexible and powerful QueryBuilder
        • \n
      • left and inner joins
        • \n
      • proper pagination for queries using joins
        • \n
      • query caching
        • \n
      • streaming raw results
        • \n
      • logging
        • \n
      • listeners and subscribers (hooks)
        • \n
      • supports closure table pattern
        • \n
      • schema declaration in models or separate configuration files
        • \n
      • connection configuration in json / xml / yml / env formats
        • \n
      • supports MySQL / MariaDB / Postgres / CockroachDB / SQLite / Microsoft SQL Server / Oracle / SAP Hana / sql.js
        • \n
      • supports MongoDB NoSQL database
        • \n
      • works in NodeJS / Browser / Ionic / Cordova / React Native / NativeScript / Expo / Electron platforms
        • \n
      • TypeScript and JavaScript support
        • \n
      • produced code is performant, flexible, clean and maintainable
        • \n
      • follows all possible best practices
        • \n
      • CLI
        • \n
      \n

      And more...

      \n

      With TypeORM your models look like this:

      \n
      import {Entity, PrimaryGeneratedColumn, Column} from \"typeorm\";

      @Entity()
      export class User {

          @PrimaryGeneratedColumn()
          id: number;

          @Column()
          firstName: string;

          @Column()
          lastName: string;

          @Column()
          age: number;

      }
      \n

      And your domain logic looks like this:

      \n
      const repository = connection.getRepository(User);

      const user = new User();
      user.firstName = \"Timber\";
      user.lastName = \"Saw\";
      user.age = 25;
      await repository.save(user);

      const allUsers = await repository.find();
      const firstUser = await repository.findOne(1); // find by id
      const timber = await repository.findOne({ firstName: \"Timber\", lastName: \"Saw\" });

      await repository.remove(timber);
      \n

      Alternatively, if you prefer to use the ActiveRecord implementation, you can use it as well:

      \n
      import {Entity, PrimaryGeneratedColumn, Column, BaseEntity} from \"typeorm\";

      @Entity()
      export class User extends BaseEntity {

          @PrimaryGeneratedColumn()
          id: number;

          @Column()
          firstName: string;

          @Column()
          lastName: string;

          @Column()
          age: number;

      }
      \n

      And your domain logic will look this way:

      \n
      const user = new User();
      user.firstName = \"Timber\";
      user.lastName = \"Saw\";
      user.age = 25;
      await user.save();

      const allUsers = await User.find();
      const firstUser = await User.findOne(1);
      const timber = await User.findOne({ firstName: \"Timber\", lastName: \"Saw\" });

      await timber.remove();
      \n

      Installation

      \n
        \n
      1. \n

        Install the npm package:

        \n

        npm install typeorm --save

        \n
        2. \n
      2. \n

        You need to install reflect-metadata shim:

        \n

        npm install reflect-metadata --save

        \n

        and import it somewhere in the global place of your app (for example in app.ts):

        \n

        import "reflect-metadata";

        \n
        3. \n
      3. \n

        You may need to install node typings:

        \n

        npm install @types/node --save-dev

        \n
        4. \n
      4. \n

        Install a database driver:

        \n
          \n
        • \n

          for MySQL or MariaDB

          \n

          npm install mysql --save (you can install mysql2 instead as well)

          \n
          • \n
        • \n

          for PostgreSQL or CockroachDB

          \n

          npm install pg --save

          \n
          • \n
        • \n

          for SQLite

          \n

          npm install sqlite3 --save

          \n
          • \n
        • \n

          for Microsoft SQL Server

          \n

          npm install mssql --save

          \n
          • \n
        • \n

          for sql.js

          \n

          npm install sql.js --save

          \n
          • \n
        • \n

          for Oracle

          \n

          npm install oracledb --save

          \n

          To make the Oracle driver work, you need to follow the installation instructions from\ntheir site.

          \n
          • \n
        • \n

          for SAP Hana

          \n
          npm config set @sap:registry https://npm.sap.com
          npm i @sap/hana-client
          npm i hdb-pool
          \n

          SAP Hana support made possible by sponsorship of Neptune Software.

          \n
          • \n
        • \n

          for MongoDB (experimental)

          \n

          npm install mongodb --save

          \n
          • \n
        • \n

          for NativeScript, react-native and Cordova

          \n

          Check documentation of supported platforms

          \n
          • \n
        \n

        Install only one of them, depending on which database you use.

        \n
        5. \n
      \n
      TypeScript configuration
      \n

      Also, make sure you are using TypeScript version 3.3 or higher,\nand you have enabled the following settings in tsconfig.json:

      \n
      \"emitDecoratorMetadata\": true,
      \"experimentalDecorators\": true,
      \n

      You may also need to enable es6 in the lib section of compiler options, or install es6-shim from @types.

      \n

      Quick Start

      \n

      The quickest way to get started with TypeORM is to use its CLI commands to generate a starter project.\nQuick start works only if you are using TypeORM in a NodeJS application.\nIf you are using other platforms, proceed to the step-by-step guide.

      \n

      First, install TypeORM globally:

      \n
      npm install typeorm -g
      \n

      Then go to the directory where you want to create a new project and run the command:

      \n
      typeorm init --name MyProject --database mysql
      \n

      Where name is the name of your project and database is the database you'll use.\nDatabase can be one of the following values: mysql, mariadb, postgres, cockroachdb, sqlite, mssql, oracle, mongodb,\ncordova, react-native, expo, nativescript.

      \n

      This command will generate a new project in the MyProject directory with the following files:

      \n
      MyProject
      ├── src              // place of your TypeScript code
      │   ├── entity       // place where your entities (database models) are stored
      │   │   └── User.ts  // sample entity
      │   ├── migration    // place where your migrations are stored
      │   └── index.ts     // start point of your application
      ├── .gitignore       // standard gitignore file
      ├── ormconfig.json   // ORM and database connection configuration
      ├── package.json     // node module dependencies
      ├── README.md        // simple readme file
      └── tsconfig.json    // TypeScript compiler options
      \n
      \n

      You can also run typeorm init on an existing node project, but be careful - it may override some files you already have.

      \n
      \n

      The next step is to install new project dependencies:

      \n
      cd MyProject
      npm install
      \n

      While installation is in progress, edit the ormconfig.json file and put your own database connection configuration options in there:

      \n
      {
         \"type\": \"mysql\",
         \"host\": \"localhost\",
         \"port\": 3306,
         \"username\": \"test\",
         \"password\": \"test\",
         \"database\": \"test\",
         \"synchronize\": true,
         \"logging\": false,
         \"entities\": [
            \"src/entity/**/*.ts\"
         ],
         \"migrations\": [
            \"src/migration/**/*.ts\"
         ],
         \"subscribers\": [
            \"src/subscriber/**/*.ts\"
         ]
      }
      \n

      Particularly, most of the time you'll only need to configure\nhost, username, password, database and maybe port options.

      \n

      Once you finish with configuration and all node modules are installed, you can run your application:

      \n
      npm start
      \n

      That's it, your application should successfully run and insert a new user into the database.\nYou can continue to work with this project and integrate other modules you need and start\ncreating more entities.

      \n
      \n

      You can generate an even more advanced project with express installed by running\ntypeorm init --name MyProject --database mysql --express command.

      \n
      \n
      \n

      You can generate docker-compose file by running\ntypeorm init --name MyProject --database postgres --docker command.

      \n
      \n

      Step-by-Step Guide

      \n

      What are you expecting from ORM?\nFirst of all, you are expecting it will create database tables for you\nand find / insert / update / delete your data without the pain of\nhaving to write lots of hardly maintainable SQL queries.\nThis guide will show you how to setup TypeORM from scratch and make it do what you are expecting from an ORM.

      \n

      Create a model

      \n

      Working with a database starts from creating tables.\nHow do you tell TypeORM to create a database table?\nThe answer is - through the models.\nYour models in your app are your database tables.

      \n

      For example, you have a Photo model:

      \n
      export class Photo {
          id: number;
          name: string;
          description: string;
          filename: string;
          views: number;
          isPublished: boolean;
      }
      \n

      And you want to store photos in your database.\nTo store things in the database, first you need a database table,\nand database tables are created from your models.\nNot all models, but only those you define as entities.

      \n

      Create an entity

      \n

      Entity is your model decorated by an @Entity decorator.\nA database table will be created for such models.\nYou work with entities everywhere with TypeORM.\nYou can load/insert/update/remove and perform other operations with them.

      \n

      Let's make our Photo model as an entity:

      \n
      import {Entity} from \"typeorm\";

      @Entity()
      export class Photo {
          id: number;
          name: string;
          description: string;
          filename: string;
          views: number;
          isPublished: boolean;
      }
      \n

      Now, a database table will be created for the Photo entity and we'll be able to work with it anywhere in our app.\nWe have created a database table, however what table can exist without columns?\nLet's create a few columns in our database table.

      \n

      Adding table columns

      \n

      To add database columns, you simply need to decorate an entity's properties you want to make into a column\nwith a @Column decorator.

      \n
      import {Entity, Column} from \"typeorm\";

      @Entity()
      export class Photo {

          @Column()
          id: number;

          @Column()
          name: string;

          @Column()
          description: string;

          @Column()
          filename: string;

          @Column()
          views: number;

          @Column()
          isPublished: boolean;
      }
      \n

      Now id, name, description, filename, views and isPublished columns will be added to the photo table.\nColumn types in the database are inferred from the property types you used, e.g.\nnumber will be converted into integer, string into varchar, boolean into bool, etc.\nBut you can use any column type your database supports by explicitly specifying a column type into the @Column decorator.

      \n

      We generated a database table with columns, but there is one thing left.\nEach database table must have a column with a primary key.

      \n

      Creating a primary column

      \n

      Each entity must have at least one primary key column.\nThis is a requirement and you can't avoid it.\nTo make a column a primary key, you need to use @PrimaryColumn decorator.

      \n
      import {Entity, Column, PrimaryColumn} from \"typeorm\";

      @Entity()
      export class Photo {

          @PrimaryColumn()
          id: number;

          @Column()
          name: string;

          @Column()
          description: string;

          @Column()
          filename: string;

          @Column()
          views: number;

          @Column()
          isPublished: boolean;
      }
      \n

      Creating an auto generated column

      \n

      Now, let's say you want your id column to be auto-generated (this is known as auto-increment / sequence / serial / generated identity column).\nTo do that, you need to change the @PrimaryColumn decorator to a @PrimaryGeneratedColumn decorator:

      \n
      import {Entity, Column, PrimaryGeneratedColumn} from \"typeorm\";

      @Entity()
      export class Photo {

          @PrimaryGeneratedColumn()
          id: number;

          @Column()
          name: string;

          @Column()
          description: string;

          @Column()
          filename: string;

          @Column()
          views: number;

          @Column()
          isPublished: boolean;
      }
      \n

      Column data types

      \n

      Next, let's fix our data types. By default, string is mapped to a varchar(255)-like type (depending on the database type).\nNumber is mapped to a integer-like type (depending on the database type).\nWe don't want all our columns to be limited varchars or integers.\nLet's setup correct data types:

      \n
      import {Entity, Column, PrimaryGeneratedColumn} from \"typeorm\";

      @Entity()
      export class Photo {

          @PrimaryGeneratedColumn()
          id: number;

          @Column({
              length: 100
          })
          name: string;

          @Column(\"text\")
          description: string;

          @Column()
          filename: string;

          @Column(\"double\")
          views: number;

          @Column()
          isPublished: boolean;
      }
      \n

      Column types are database-specific.\nYou can set any column type your database supports.\nMore information on supported column types can be found here.

      \n

      Creating a connection to the database

      \n

      Now, when our entity is created, let's create an index.ts (or app.ts whatever you call it) file and set up our connection there:

      \n
      import \"reflect-metadata\";
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection({
          type: \"mysql\",
          host: \"localhost\",
          port: 3306,
          username: \"root\",
          password: \"admin\",
          database: \"test\",
          entities: [
              Photo
          ],
          synchronize: true,
          logging: false
      }).then(connection => {
          // here you can start to work with your entities
      }).catch(error => console.log(error));
      \n

      We are using MySQL in this example, but you can use any other supported database.\nTo use another database, simply change the type in the options to the database type you are using:\nmysql, mariadb, postgres, cockroachdb, sqlite, mssql, oracle, cordova, nativescript, react-native,\nexpo, or mongodb.\nAlso make sure to use your own host, port, username, password and database settings.

      \n

      We added our Photo entity to the list of entities for this connection.\nEach entity you are using in your connection must be listed there.

      \n

      Setting synchronize makes sure your entities will be synced with the database, every time you run the application.

      \n

      Loading all entities from the directory

      \n

      Later, when we create more entities we need to add them to the entities in our configuration.\nThis is not very convenient, so instead we can set up the whole directory, from where all entities will be connected and used in our connection:

      \n
      import {createConnection} from \"typeorm\";

      createConnection({
          type: \"mysql\",
          host: \"localhost\",
          port: 3306,
          username: \"root\",
          password: \"admin\",
          database: \"test\",
          entities: [
              __dirname + \"/entity/*.js\"
          ],
          synchronize: true,
      }).then(connection => {
          // here you can start to work with your entities
      }).catch(error => console.log(error));
      \n

      But be careful with this approach.\nIf you are using ts-node then you need to specify paths to .ts files instead.\nIf you are using outDir then you'll need to specify paths to .js files inside outDir directory.\nIf you are using outDir and when you remove or rename your entities make sure to clear outDir directory\nand re-compile your project again, because when you remove your source .ts files their compiled .js versions\naren't removed from output directory and still are loaded by TypeORM because they are present in the outDir directory.

      \n

      Running the application

      \n

      Now if you run your index.ts, a connection with database will be initialized and a database table for your photos will be created.

      \n
      +-------------+--------------+----------------------------+
      |                         photo                           |
      +-------------+--------------+----------------------------+
      | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
      | name        | varchar(100) |                            |
      | description | text         |                            |
      | filename    | varchar(255) |                            |
      | views       | int(11)      |                            |
      | isPublished | boolean      |                            |
      +-------------+--------------+----------------------------+
      \n

      Creating and inserting a photo into the database

      \n

      Now let's create a new photo to save it in the database:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(connection => {

          let photo = new Photo();
          photo.name = \"Me and Bears\";
          photo.description = \"I am near polar bears\";
          photo.filename = \"photo-with-bears.jpg\";
          photo.views = 1;
          photo.isPublished = true;

          return connection.manager
                  .save(photo)
                  .then(photo => {
                      console.log(\"Photo has been saved. Photo id is\", photo.id);
                  });

      }).catch(error => console.log(error));
      \n

      Once your entity is saved it will get a newly generated id.\nsave method returns an instance of the same object you pass to it.\nIt's not a new copy of the object, it modifies its "id" and returns it.

      \n

      Using async/await syntax

      \n

      Let's take advantage of the latest ES8 (ES2017) features and use async/await syntax instead:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          let photo = new Photo();
          photo.name = \"Me and Bears\";
          photo.description = \"I am near polar bears\";
          photo.filename = \"photo-with-bears.jpg\";
          photo.views = 1;
          photo.isPublished = true;

          await connection.manager.save(photo);
          console.log(\"Photo has been saved\");

      }).catch(error => console.log(error));
      \n

      Using Entity Manager

      \n

      We just created a new photo and saved it in the database.\nWe used EntityManager to save it.\nUsing entity manager you can manipulate any entity in your app.\nFor example, let's load our saved entity:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let savedPhotos = await connection.manager.find(Photo);
          console.log(\"All photos from the db: \", savedPhotos);

      }).catch(error => console.log(error));
      \n

      savedPhotos will be an array of Photo objects with the data loaded from the database.

      \n

      Learn more about EntityManager here.

      \n

      Using Repositories

      \n

      Now let's refactor our code and use Repository instead of EntityManager.\nEach entity has its own repository which handles all operations with its entity.\nWhen you deal with entities a lot, Repositories are more convenient to use than EntityManagers:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          let photo = new Photo();
          photo.name = \"Me and Bears\";
          photo.description = \"I am near polar bears\";
          photo.filename = \"photo-with-bears.jpg\";
          photo.views = 1;
          photo.isPublished = true;

          let photoRepository = connection.getRepository(Photo);

          await photoRepository.save(photo);
          console.log(\"Photo has been saved\");

          let savedPhotos = await photoRepository.find();
          console.log(\"All photos from the db: \", savedPhotos);

      }).catch(error => console.log(error));
      \n

      Learn more about Repository here.

      \n

      Loading from the database

      \n

      Let's try more load operations using the Repository:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let allPhotos = await photoRepository.find();
          console.log(\"All photos from the db: \", allPhotos);

          let firstPhoto = await photoRepository.findOne(1);
          console.log(\"First photo from the db: \", firstPhoto);

          let meAndBearsPhoto = await photoRepository.findOne({ name: \"Me and Bears\" });
          console.log(\"Me and Bears photo from the db: \", meAndBearsPhoto);

          let allViewedPhotos = await photoRepository.find({ views: 1 });
          console.log(\"All viewed photos: \", allViewedPhotos);

          let allPublishedPhotos = await photoRepository.find({ isPublished: true });
          console.log(\"All published photos: \", allPublishedPhotos);

          let [allPhotos, photosCount] = await photoRepository.findAndCount();
          console.log(\"All photos: \", allPhotos);
          console.log(\"Photos count: \", photosCount);

      }).catch(error => console.log(error));
      \n

      Updating in the database

      \n

      Now let's load a single photo from the database, update it and save it:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let photoToUpdate = await photoRepository.findOne(1);
          photoToUpdate.name = \"Me, my friends and polar bears\";
          await photoRepository.save(photoToUpdate);

      }).catch(error => console.log(error));
      \n

      Now photo with id = 1 will be updated in the database.

      \n

      Removing from the database

      \n

      Now let's remove our photo from the database:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let photoToRemove = await photoRepository.findOne(1);
          await photoRepository.remove(photoToRemove);

      }).catch(error => console.log(error));
      \n

      Now photo with id = 1 will be removed from the database.

      \n

      Creating a one-to-one relation

      \n

      Let's create a one-to-one relation with another class.\nLet's create a new class in PhotoMetadata.ts. This PhotoMetadata class is supposed to contain our photo's additional meta-information:

      \n
      import {Entity, Column, PrimaryGeneratedColumn, OneToOne, JoinColumn} from \"typeorm\";
      import {Photo} from \"./Photo\";

      @Entity()
      export class PhotoMetadata {

          @PrimaryGeneratedColumn()
          id: number;

          @Column(\"int\")
          height: number;

          @Column(\"int\")
          width: number;

          @Column()
          orientation: string;

          @Column()
          compressed: boolean;

          @Column()
          comment: string;

          @OneToOne(type => Photo)
          @JoinColumn()
          photo: Photo;
      }
      \n

      Here, we are using a new decorator called @OneToOne. It allows us to create a one-to-one relationship between two entities.\ntype => Photo is a function that returns the class of the entity with which we want to make our relationship.\nWe are forced to use a function that returns a class, instead of using the class directly, because of the language specifics.\nWe can also write it as () => Photo, but we use type => Photo as a convention to increase code readability.\nThe type variable itself does not contain anything.

      \n

      We also add a @JoinColumn decorator, which indicates that this side of the relationship will own the relationship.\nRelations can be unidirectional or bidirectional.\nOnly one side of relational can be owning.\nUsing @JoinColumn decorator is required on the owner side of the relationship.

      \n

      If you run the app, you'll see a newly generated table, and it will contain a column with a foreign key for the photo relation:

      \n
      +-------------+--------------+----------------------------+
      |                     photo_metadata                      |
      +-------------+--------------+----------------------------+
      | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
      | height      | int(11)      |                            |
      | width       | int(11)      |                            |
      | comment     | varchar(255) |                            |
      | compressed  | boolean      |                            |
      | orientation | varchar(255) |                            |
      | photoId     | int(11)      | FOREIGN KEY                |
      +-------------+--------------+----------------------------+
      \n

      Save a one-to-one relation

      \n

      Now let's save a photo, its metadata and attach them to each other.

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";
      import {PhotoMetadata} from \"./entity/PhotoMetadata\";

      createConnection(/*...*/).then(async connection => {

          // create a photo
          let photo = new Photo();
          photo.name = \"Me and Bears\";
          photo.description = \"I am near polar bears\";
          photo.filename = \"photo-with-bears.jpg\";
          photo.isPublished = true;

          // create a photo metadata
          let metadata = new PhotoMetadata();
          metadata.height = 640;
          metadata.width = 480;
          metadata.compressed = true;
          metadata.comment = \"cybershoot\";
          metadata.orientation = \"portrait\";
          metadata.photo = photo; // this way we connect them

          // get entity repositories
          let photoRepository = connection.getRepository(Photo);
          let metadataRepository = connection.getRepository(PhotoMetadata);

          // first we should save a photo
          await photoRepository.save(photo);

          // photo is saved. Now we need to save a photo metadata
          await metadataRepository.save(metadata);

          // done
          console.log(\"Metadata is saved, and relation between metadata and photo is created in the database too\");

      }).catch(error => console.log(error));
      \n

      Inverse side of the relationship

      \n

      Relations can be unidirectional or bidirectional.\nCurrently, our relation between PhotoMetadata and Photo is unidirectional.\nThe owner of the relation is PhotoMetadata, and Photo doesn't know anything about PhotoMetadata.\nThis makes it complicated to access PhotoMetadata from the Photo side.\nTo fix this issue we should add an inverse relation, and make relations between PhotoMetadata and Photo bidirectional.\nLet's modify our entities:

      \n
      import {Entity, Column, PrimaryGeneratedColumn, OneToOne, JoinColumn} from \"typeorm\";
      import {Photo} from \"./Photo\";

      @Entity()
      export class PhotoMetadata {

          /* ... other columns */

          @OneToOne(type => Photo, photo => photo.metadata)
          @JoinColumn()
          photo: Photo;
      }
      \n
      import {Entity, Column, PrimaryGeneratedColumn, OneToOne} from \"typeorm\";
      import {PhotoMetadata} from \"./PhotoMetadata\";

      @Entity()
      export class Photo {

          /* ... other columns */

          @OneToOne(type => PhotoMetadata, photoMetadata => photoMetadata.photo)
          metadata: PhotoMetadata;
      }
      \n

      photo => photo.metadata is a function that returns the name of the inverse side of the relation.\nHere we show that the metadata property of the Photo class is where we store PhotoMetadata in the Photo class.\nInstead of passing a function that returns a property of the photo, you could alternatively simply pass a string to @OneToOne decorator, like "metadata".\nBut we used this function-typed approach to make our refactoring easier.

      \n

      Note that we should use @JoinColumn decorator only on one side of a relation.\nWhichever side you put this decorator on will be the owning side of the relationship.\nThe owning side of a relationship contains a column with a foreign key in the database.

      \n

      Loading objects with their relations

      \n

      Now let's load our photo and its photo metadata in a single query.\nThere are two ways to do it - using find* methods or using QueryBuilder functionality.\nLet's use find* methods first.\nfind* methods allow you to specify an object with the FindOneOptions / FindManyOptions interface.

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";
      import {PhotoMetadata} from \"./entity/PhotoMetadata\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let photoRepository = connection.getRepository(Photo);
          let photos = await photoRepository.find({ relations: [\"metadata\"] });

      }).catch(error => console.log(error));
      \n

      Here, photos will contain an array of photos from the database, and each photo will contain its photo metadata.\nLearn more about Find Options in this documentation.

      \n

      Using find options is good and dead simple, but if you need a more complex query, you should use QueryBuilder instead.\nQueryBuilder allows more complex queries to be used in an elegant way:

      \n
      import {createConnection} from \"typeorm\";
      import {Photo} from \"./entity/Photo\";
      import {PhotoMetadata} from \"./entity/PhotoMetadata\";

      createConnection(/*...*/).then(async connection => {

          /*...*/
          let photos = await connection
                  .getRepository(Photo)
                  .createQueryBuilder(\"photo\")
                  .innerJoinAndSelect(\"photo.metadata\", \"metadata\")
                  .getMany();


      }).catch(error => console.log(error));
      \n

      QueryBuilder allows creation and execution of SQL queries of almost any complexity.\nWhen you work with QueryBuilder, think like you are creating an SQL query.\nIn this example, "photo" and "metadata" are aliases applied to selected photos.\nYou use aliases to access columns and properties of the selected data.

      \n

      Using cascades to automatically save related objects

      \n

      We can setup cascade options in our relations, in the cases when we want our related object to be saved whenever the other object is saved.\nLet's change our photo's @OneToOne decorator a bit:

      \n
      export class Photo {
          /// ... other columns

          @OneToOne(type => PhotoMetadata, metadata => metadata.photo, {
              cascade: true,
          })
          metadata: PhotoMetadata;
      }
      \n

      Using cascade allows us not to separately save photo and separately save metadata objects now.\nNow we can simply save a photo object, and the metadata object will be saved automatically because of cascade options.

      \n
      createConnection(options).then(async connection => {

          // create photo object
          let photo = new Photo();
          photo.name = \"Me and Bears\";
          photo.description = \"I am near polar bears\";
          photo.filename = \"photo-with-bears.jpg\";
          photo.isPublished = true;

          // create photo metadata object
          let metadata = new PhotoMetadata();
          metadata.height = 640;
          metadata.width = 480;
          metadata.compressed = true;
          metadata.comment = \"cybershoot\";
          metadata.orientation = \"portrait\";

          photo.metadata = metadata; // this way we connect them

          // get repository
          let photoRepository = connection.getRepository(Photo);

          // saving a photo also save the metadata
          await photoRepository.save(photo);

          console.log(\"Photo is saved, photo metadata is saved too.\")

      }).catch(error => console.log(error));
      \n

      Notice that we now set the photo's metadata property, instead of the metadata's photo property as before. The cascade feature only works if you connect the photo to its metadata from the photo's side. If you set the metadata's side, the metadata would not be saved automatically.

      \n

      Creating a many-to-one / one-to-many relation

      \n

      Let's create a many-to-one / one-to-many relation.\nLet's say a photo has one author, and each author can have many photos.\nFirst, let's create an Author class:

      \n
      import {Entity, Column, PrimaryGeneratedColumn, OneToMany, JoinColumn} from \"typeorm\";
      import {Photo} from \"./Photo\";

      @Entity()
      export class Author {

          @PrimaryGeneratedColumn()
          id: number;

          @Column()
          name: string;

          @OneToMany(type => Photo, photo => photo.author) // note: we will create author property in the Photo class below
          photos: Photo[];
      }
      \n

      Author contains an inverse side of a relation.\nOneToMany is always an inverse side of relation, and it can't exist without ManyToOne on the other side of the relation.

      \n

      Now let's add the owner side of the relation into the Photo entity:

      \n
      import {Entity, Column, PrimaryGeneratedColumn, ManyToOne} from \"typeorm\";
      import {PhotoMetadata} from \"./PhotoMetadata\";
      import {Author} from \"./Author\";

      @Entity()
      export class Photo {

          /* ... other columns */

          @ManyToOne(type => Author, author => author.photos)
          author: Author;
      }
      \n

      In many-to-one / one-to-many relation, the owner side is always many-to-one.\nIt means that the class that uses @ManyToOne will store the id of the related object.

      \n

      After you run the application, the ORM will create the author table:

      \n
      +-------------+--------------+----------------------------+
      |                          author                         |
      +-------------+--------------+----------------------------+
      | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
      | name        | varchar(255) |                            |
      +-------------+--------------+----------------------------+
      \n

      It will also modify the photo table, adding a new author column and creating a foreign key for it:

      \n
      +-------------+--------------+----------------------------+
      |                         photo                           |
      +-------------+--------------+----------------------------+
      | id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
      | name        | varchar(255) |                            |
      | description | varchar(255) |                            |
      | filename    | varchar(255) |                            |
      | isPublished | boolean      |                            |
      | authorId    | int(11)      | FOREIGN KEY                |
      +-------------+--------------+----------------------------+
      \n

      Creating a many-to-many relation

      \n

      Let's create a many-to-one / many-to-many relation.\nLet's say a photo can be in many albums, and each album can contain many photos.\nLet's create an Album class:

      \n
      import {Entity, PrimaryGeneratedColumn, Column, ManyToMany, JoinTable} from \"typeorm\";

      @Entity()
      export class Album {

          @PrimaryGeneratedColumn()
          id: number;

          @Column()
          name: string;

          @ManyToMany(type => Photo, photo => photo.albums)
          @JoinTable()
          photos: Photo[];
      }
      \n

      @JoinTable is required to specify that this is the owner side of the relationship.

      \n

      Now let's add the inverse side of our relation to the Photo class:

      \n
      export class Photo {
          /// ... other columns

          @ManyToMany(type => Album, album => album.photos)
          albums: Album[];
      }
      \n

      After you run the application, the ORM will create a album_photos_photo_albums junction table:

      \n
      +-------------+--------------+----------------------------+
      |                album_photos_photo_albums                |
      +-------------+--------------+----------------------------+
      | album_id    | int(11)      | PRIMARY KEY FOREIGN KEY    |
      | photo_id    | int(11)      | PRIMARY KEY FOREIGN KEY    |
      +-------------+--------------+----------------------------+
      \n

      Don't forget to register the Album class with your connection in the ORM:

      \n
      const options: ConnectionOptions = {
          // ... other options
          entities: [Photo, PhotoMetadata, Author, Album]
      };
      \n

      Now let's insert albums and photos to our database:

      \n
      let connection = await createConnection(options);

      // create a few albums
      let album1 = new Album();
      album1.name = \"Bears\";
      await connection.manager.save(album1);

      let album2 = new Album();
      album2.name = \"Me\";
      await connection.manager.save(album2);

      // create a few photos
      let photo = new Photo();
      photo.name = \"Me and Bears\";
      photo.description = \"I am near polar bears\";
      photo.filename = \"photo-with-bears.jpg\";
      photo.views = 1
      photo.isPublished = true
      photo.albums = [album1, album2];
      await connection.manager.save(photo);

      // now our photo is saved and albums are attached to it
      // now lets load them:
      const loadedPhoto = await connection
          .getRepository(Photo)
          .findOne(1, { relations: [\"albums\"] });
      \n

      loadedPhoto will be equal to:

      \n
      {
          id: 1,
          name: \"Me and Bears\",
          description: \"I am near polar bears\",
          filename: \"photo-with-bears.jpg\",
          albums: [{
              id: 1,
              name: \"Bears\"
          }, {
              id: 2,
              name: \"Me\"
          }]
      }
      \n

      Using QueryBuilder

      \n

      You can use QueryBuilder to build SQL queries of almost any complexity. For example, you can do this:

      \n
      let photos = await connection
          .getRepository(Photo)
          .createQueryBuilder(\"photo\") // first argument is an alias. Alias is what you are selecting - photos. You must specify it.
          .innerJoinAndSelect(\"photo.metadata\", \"metadata\")
          .leftJoinAndSelect(\"photo.albums\", \"album\")
          .where(\"photo.isPublished = true\")
          .andWhere(\"(photo.name = :photoName OR photo.name = :bearName)\")
          .orderBy(\"photo.id\", \"DESC\")
          .skip(5)
          .take(10)
          .setParameters({ photoName: \"My\", bearName: \"Mishka\" })
          .getMany();
      \n

      This query selects all published photos with "My" or "Mishka" names.\nIt will select results from position 5 (pagination offset),\nand will select only 10 results (pagination limit).\nThe selection result will be ordered by id in descending order.\nThe photo's albums will be left-joined and their metadata will be inner joined.

      \n

      You'll use the query builder in your application a lot.\nLearn more about QueryBuilder here.

      \n

      Samples

      \n

      Take a look at the samples in sample for examples of usage.

      \n

      There are a few repositories which you can clone and start with:

      \n\n

      Extensions

      \n

      There are several extensions that simplify working with TypeORM and integrating it with other modules:

      \n\n

      Contributing

      \n

      Learn about contribution here and how to setup your development environment here.

      \n

      This project exists thanks to all the people who contribute:

      \n

      \n

      Sponsors

      \n

      Open source is hard and time-consuming. If you want to invest into TypeORM's future you can become a sponsor and make our core team to spend more time on TypeORM's improvements and new features. Become a sponsor

      \n

      \n

      Gold Sponsors

      \n

      Become a gold sponsor and get a premium technical support from our core contributors. Become a gold sponsor

      \n

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/shared":{"name":"@nativescript-vue/shared","version":"3.0.0-dev.4","license":"MIT","readme":"

      @nativescript-vue/shared

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/apple-pay":{"name":"@nativescript/apple-pay","version":"0.1.1","license":"Apache-2.0","readme":"

      @nativescript/apple-pay

      \n
      ns plugin add @nativescript/apple-pay
      \n

      Usage

      \n

      In order for Apple Pay to work in your iOS application you will need to complete the following steps. These steps are also outlined in the Apple PassKit documentation.

      \n
        \n
      • \n

        Create a merchant ID.

        \n
        • \n
      • \n

        Create a Payment Processing certificate.

        \n
        • \n
      • \n

        Enable Apple Pay in Xcode.

        \n
        • \n
      \n

      Follow the instructions in Configure Apple Pay (iOS, watchOS), which guide you to create the following:

      \n
        \n
      • \n

        Merchant ID.\nAn identifier you register with Apple that uniquely identifies your business as a merchant able to accept payments. This ID never expires, and can be used in multiple websites and iOS apps. See Create a merchant identifier for the setup steps.

        \n
        • \n
      • \n

        Payment Processing Certificate.\nA certificate associated with your merchant ID, used to secure transaction data. Apple Pay servers use the certificate’s public key to encrypt payment data. You (or your payment service provider) use the private key to decrypt the data to process payments. See Create a payment processing certificate for the setup steps.

        \n
        • \n
      • \n

        Finally, you need to enable the Apple Pay capability in your Xcode project.\nSee Enable Apple Pay for the setup steps.

        \n
        • \n
      \n

      For a video showing the configuration steps, see: Configuring Your Developer Account for Apple Pay.

      \n

      Once that configuration is done for your Apple developer account, you will be able to use the PassKit framework for Apple Pay inside your iOS application.

      \n
      <ios>
          <ApplePayBtn
              tap=\"onApplePayTap\"
              buttonType=\"InStore\"
          >      </ApplePayBtn>
      </ios>
      \n
      import { ApplePayBtn, ApplePayContactFields, ApplePayEvents, ApplePayItems, ApplePayMerchantCapability, ApplePayNetworks, ApplePayPaymentItemType, ApplePayRequest, ApplePayTransactionStatus, AuthorizePaymentEventData } from '@nativescript/apple-pay';

      export function onApplePayTap() {
      \ttry {
      \t\t// just ensuring this runs only on iOS
      \t\tif (global.isIOS) {
      \t\t\tconst applePayBtn = args.object as ApplePayBtn;

      \t\t\t// setup the event listeners for the delegate for apple pay for our button
      \t\t\tapplePayBtn.once(ApplePayEvents.DidAuthorizePaymentHandler, async (args: AuthorizePaymentEventData) => {
      \t\t\t\tconsole.log(ApplePayEvents.DidAuthorizePaymentHandler);

      \t\t\t\t// this is where you do backend processing with your payment provider (Stripe, PayPal, etc.)
                      // this payload is just a sample, your payload to a provider will likely be different
                      // you can see here how to access the encrypted values from Apple Pay inside the `args.data.paymentData`
      \t\t\t\tconst payloadToBackend = {
      \t\t\t\t\ttransaction_type: 'purchase',
      \t\t\t\t\tmerchant_ref: args.data.paymentData.header.transactionId,
      \t\t\t\t\tmethod: '3DS',
      \t\t\t\t\t'3DS': {
      \t\t\t\t\t\tmerchantIdentifier: <SomeIdentifierFromPaymentProvider>,
      \t\t\t\t\t\tdata: args.data.paymentData.data,
      \t\t\t\t\t\tsignature: args.data.paymentData.signature,
      \t\t\t\t\t\tversion: args.data.paymentData.version,
      \t\t\t\t\t\theader: args.data.paymentData.header
      \t\t\t\t\t}
      \t\t\t\t};

                      const result = await someHttpMethodToYourProviderBackend(payloadToBackend);

      \t\t\t\tif (result && result.value === true) {
      \t\t\t\t\t// need this to call when the payment is successful to close the payment sheet correctly on iOS
      \t\t\t\t\targs.completion(ApplePayTransactionStatus.Success);
      \t\t\t\t\t// now you can follow through with your user flow since the transactin has been successful with your provider
      \t\t\t\t} else {
                          // payment failed on the backend, so show the FAILURE to close the Apple Pay sheet
      \t\t\t\t\targs.completion(ApplePayTransactionStatus.Failure);
      \t\t\t\t}
      \t\t\t});

                  // these are the items your customer is paying for
      \t\t\tconst paymentItems = [
      \t\t\t\t{
      \t\t\t\t\tamount: 20.50,
      \t\t\t\t\tlabel: 'Balance',
      \t\t\t\t\ttype: ApplePayPaymentItemType.Final,
      \t\t\t\t},
      \t\t\t] as ApplePayItems[];

      \t\t\tconst request = {
      \t\t\t\tpaymentItems,
      \t\t\t\tmerchantId: <Your_Apple_Pay_Merchant_ID>, // the merchant ID for this app
      \t\t\t\tmerchantCapabilities: ApplePayMerchantCapability.ThreeDS,
      \t\t\t\tcountryCode: 'US',
      \t\t\t\tcurrencyCode: 'USD',
      \t\t\t\tshippingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
      \t\t\t\tbillingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
      \t\t\t\tsupportedNetworks: [ApplePayNetworks.Amex, ApplePayNetworks.Visa, ApplePayNetworks.Discover, ApplePayNetworks.MasterCard],
      \t\t\t} as ApplePayRequest;

                  // `createPaymentRequest` will call into the Apple Pay SDK and present the user with the payment sheet for the configuration provided
      \t\t\tawait applePayBtn.createPaymentRequest(request).catch((err) => {
      \t\t\t\tconsole.log('Apple Pay Error', err);
      \t\t\t});
      \t\t}
      \t} catch (error) {
      \t\tconsole.log(error);
      \t}
      }
      \n

      API

      \n

      Methods

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameDescription
      createPaymentRequest(request: ApplePayRequest)Creates the Apple Pay payment request and presents the user with the payment sheet.
      \n

      Enums

      \n

      ApplePayEvents

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyDescription
      DidAuthorizePaymentHandlerTells the delegate that the user has authorized the payment request and asks for a result.
      AuthorizationDidFinishTells the delegate that payment authorization has completed.
      \n

      ApplePayContactFields

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyDescription
      EmailAddressIndicates an email address field.
      NameIndicates a name field.
      PhoneNumberIndicates a phone number field.
      PhoneticNameIndicates a phonetic name field.
      PostalAddressIndicates a postal address field.
      \n

      ApplePayNetworks

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Key
      Amex
      CarteBancaire
      CarteBancaires
      ChinaUnionPay
      Discover
      Eftpos
      Electron
      Elo
      IDCredit
      Interac
      Jcb
      Mada
      Maestro
      MasterCard
      PrivateLabel
      QuicPay
      Suica
      Visa
      VPay
      \n

      ApplePayMerchantCapability

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValue
      ThreeDSPKMerchantCapability.Capability3DS
      EMVPKMerchantCapability.CapabilityEMV
      CreditPKMerchantCapability.CapabilityCredit
      DebitPKMerchantCapability.CapabilityDebit
      \n

      ApplePayMerchantCapaApplePayTransactionStatusbility

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValue
      SuccessPKPaymentAuthorizationStatus.Success
      FailurePKPaymentAuthorizationStatus.Failure
      InvalidBillingPostalAddressPKPaymentAuthorizationStatus.InvalidBillingPostalAddress
      InvalidShippingPostalAddressPKPaymentAuthorizationStatus.InvalidShippingPostalAddress
      InvalidShippingContactPKPaymentAuthorizationStatus.InvalidShippingContact
      PINRequiredPKPaymentAuthorizationStatus.PINRequired
      PINIncorrectPKPaymentAuthorizationStatus.PINIncorrect
      PINLockoutPKPaymentAuthorizationStatus.PINLockout,
      \n

      ApplePayPaymentItemType

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValue
      FinalPKPaymentSummaryItemType.Final
      PendingPKPaymentSummaryItemType.Pending
      \n

      ApplePayButtonType

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValue
      PlainPKPaymentButtonType.Plain
      BuyPKPaymentButtonType.Buy
      BookPKPaymentButtonType.Book
      CheckoutPKPaymentButtonType.Checkout
      DonatePKPaymentButtonType.Donate
      InStorePKPaymentButtonType.Book
      SubscribePKPaymentButtonType.Subscribe
      \n

      ApplePayButtonStyle

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyValue
      WhitePKPaymentButtonStyle.White
      WhiteOutlinePKPaymentButtonStyle.WhiteOutline
      BlackPKPaymentButtonStyle.Black
      \n

      Interfaces

      \n

      ApplePayRequest

      \n
      interface ApplePayRequest {
      \tpaymentItems: Array<ApplePayItems>;
      \tmerchantId: string; // the merchant ID for this app
      \tmerchantCapabilities: number;
      \tcountryCode: string;
      \tcurrencyCode: string;
      \tsupportedNetworks: Array<ApplePayNetworks>;
      \tbillingContactFields?: Array<ApplePayContactFields>;
      \tshippingContactFields?: Array<ApplePayContactFields>;
      \tshippingMethods?: Array<ApplePayShippingMethods>;
      }
      \n

      ApplePayItems

      \n
      interface ApplePayItems {
      \tlabel: string;
      \tamount: number;
      \ttype: ApplePayPaymentItemType;
      }
      \n

      AuthorizePaymentEventData

      \n
      interface AuthorizePaymentEventData extends EventData {
      \teventName: string;
      \tobject: any;
      \tdata?: {
      \t\tpayment: PKPayment;
      \t\ttoken: PKPaymentToken;
      \t\tpaymentData: ApplePayPaymentData;
      \t\tbillingAddress;
      \t\tbillingContact: PKContact;
      \t\tshippingAddress;
      \t\tshippingContact: PKContact;
      \t\tshippingMethod: PKShippingMethod;
      \t};
      \tcompletion: (status: ApplePayTransactionStatus) => void;
      }
      \n

      AuthorizationDidFinishEventData

      \n
      interface AuthorizationDidFinishEventData extends EventData {
      \teventName: string;
      \tobject: any;
      }
      \n

      ApplePayPaymentData

      \n
      interface ApplePayPaymentData {
      \t/**
      \t * Encrypted payment data.
      \t */
      \tdata;

      \t/**
      \t * Additional version-dependent information used to decrypt and verify the payment.
      \t */
      \theader;

      \t/**
      \t * Signature of the payment and header data. The signature includes the signing certificate, its intermediate CA certificate, and information about the signing algorithm.
      \t */
      \tsignature;

      \t/**
      \t * Version information about the payment token.
      \t * The token uses EC_v1 for ECC-encrypted data, and RSA_v1 for RSA-encrypted data.
      \t */
      \tversion: string;
      }
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"preact-nativescript-mock":{"name":"preact-nativescript-mock","version":"0.0.7","license":"MIT","readme":"

      Mocks for preact-to-nativescript

      \n

      Usage with Jest

      \n

      Add the following to your package.json

      \n
      {
        \"jest\": {
          \"testEnvironment\": \"node\",
          \"moduleNameMapper\": {
            \"tns-core-modules(.*)\": \"preact-nativescript-mock$1\"
          }
        }
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tsx":{"name":"nativescript-tsx","version":"0.0.7","license":"Apache-2.0","readme":"

      TSX support in NativeScript apps

      \n

      The tns app need the following flags in its tsconfig.json:

      \n
        \"jsx\": \"react\",
        \"reactNamespace\": \"UIBuilder\"
      \n

      tsx will enable tsx and tsx compilation, reactNamespace will emit "UIBuilder.createElement" instead "React.createElement",\njust enough to make it work, yet show we don't support full blown React experience yet.

      \n

      Also the following to references.d.ts to pull global object declarations:

      \n
      /// <reference path=\"./node_modules/nativescript-tsx/tsx.d.ts\" /> Enable tsx typechecking.
      /// <reference path=\"./node_modules/nativescript-tsx/core.d.ts\" /> Patch core modules with properties.
      \n

      You can a Page UI in page such as main-page.tsx:

      \n
      import {View} from \"ui/core/view\";
      import {Page} from \"ui/page\";
      import {StackLayout} from \"ui/layouts/stack-layout\";
      import {Label} from \"ui/label\";
      import {Button} from \"ui/button\";
      import {EventData} from \"data/observable\";

      // Provide the UIBuilder used by tsx output to querry createElement calls.
      import {UIBuilder} from \"nativescript-tsx\";

      import { HelloWorldModel } from \"./main-view-model\";

      function navigatingTo(args: EventData) {
          console.log(\"Get that context...\");
          let page = args.object as Page;
          page.bindingContext = new HelloWorldModel();
      }

      export var createPage = () =>
      <Page navigatingTo={navigatingTo}>
          <StackLayout orientation=\"vertical\">
              <Label text=\"Tap the button\" class=\"title\" /> 
              <Button text=\"TAP\" tap=\"{{ onTap }}\" />
              <Label text=\"{{ message }}\" class=\"message\" textWrap={true} />
          </StackLayout>
      </Page>;
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-util":{"name":"thinkdigital-nativescript-util","version":"1.0.12","license":"ISC","readme":"

      thinkdigital-nativescript-util

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-bluetooth":{"name":"nativescript-akylas-bluetooth","version":"1.2.5","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triniwiz/nativescript-yogalayout":{"name":"@triniwiz/nativescript-yogalayout","version":"0.4.1","license":"Apache-2.0","readme":"

      Nativescript nativescript-yogalayout

      \n
      ns plugin add @triniwiz/nativescript-yogalayout
      \n

      Usage

      \n

      Documentation for the latest stable release

      \n

      In React NativeScript

      \n

      First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

      \n
      import { registerYogaLayout } from \"@triniwiz/nativescript-yogalayout/react\";

      registerYogaLayout();
      \n

      Example usage

      \n
      import * as React from \"react\";

      export function YogaLayoutExample() {
          return (
              <yoga>
                  <yoga backgroundColor=\"aqua\" margin={50} padding={30} borderRadius={10} borderWidth={5} borderColor=\"purple\">
                      <yoga backgroundColor=\"red\" padding={2}>
                          <yoga flex={.3} backgroundColor=\"green\">
                              <label alignSelf=\"center\" color=\"black\" text=\"First\"/>
                          </yoga>
                          <yoga flex={.5} backgroundColor=\"white\">
                              <label alignSelf=\"center\" color=\"black\" text=\"Second\"/>
                          </yoga>
                          <yoga backgroundColor=\"pink\">
                              <label alignSelf=\"center\" color=\"black\" text=\"Third\"/>
                          </yoga>
                          <label alignSelf=\"center\" color=\"blue\" text=\"Something\"/>
                      </yoga>
                      <yoga position=\"absolute\" bottom=\"10\" right=\"10\" width=\"100\" height=\"100\" backgroundColor=\"yellow\" padding=\"10\">
                          <label color=\"black\" text=\"Absolute\"/>
                      </yoga>
                  </yoga>
              </yoga>
          );
      }
      \n

      Troubleshooting

      \n

      If you see an error like this when writing e.g. <yoga> into your JSX:

      \n
      \n

      Property 'yoga' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

      \n
      \n

      Make sure that you have:

      \n
        \n
      1. Installed the react-nativescript npm module.
        2. \n
      2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
        3. \n
      3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
        4. \n
      4. Registered the component as described above (i.e. import and run the registerYogaLayout() method).
        5. \n
      5. If using Visual Studio Code, option-click the import @triniwiz/nativescript-yogalayout/react to jump to the file; opening the file will force it to load its provided typings.
        6. \n
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fancy-camera":{"name":"nativescript-fancy-camera","version":"0.0.1","license":"Apache-2.0","readme":"

      NativeScript Fancy Camera

      \n

      Installation

      \n

      tns plugin add nativescript-fancy-camera

      \n

      Usage

      \n

      Basic Camera

      \n

      takePhoto

      \n
      import { FancyCamera } from 'nativescript-fancy-camera';
      const fc = new FancyCamera();
      fc.takePhoto().then(data => {
              if (data && data.file) {
                  vm.set('src', data.file);
              }
          });
      \n

      recordVideo

      \n
      import { FancyCamera } from 'nativescript-fancy-camera';
      const fc = new FancyCamera();

      fc.record().then(data => {
              if (data && data.file) {
                  vm.set('src', data.file);
              }
          });
      \n

      showCamera

      \n

      Allows taking photos (tap) or recording videos (using longPress)

      \n
      import { FancyCamera } from 'nativescript-fancy-camera';
      const fc = new FancyCamera();

      fc.show().then(data => {
              if (data && data.file && data.type) {
                  if (data.type === 'video') {
                  }

                  if (data.type === 'photo') {
                  }

                  vm.set('src', data.file);
              }
          });
      \n

      Camera View

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\"
       xmlns:ui=\"nativescript-fancy-camera/view\">
      <ui:CameraView quality=\"highest\" cameraPosition=\"front\" id=\"camera\"/>
      \n
      const cameraView = page.getViewById(\"camera\");
      cameraView.startRecording();
      \n

      API

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      MethodDefaultTypeDescription
      startvoidStarts the camera preview
      stopvoidStop the camera preview
      startRecordingvoidStart recording camera preview.
      stopRecordingvoidStop recording camera preview.
      toggleCameravoidToggles between front or the back camera.
      durationintGet the current recording video duration.
      cameraPositionBACKvoidGets or Sets camera position
      qualityMAX_480PvoidGets or sets Video Quality
      toggleFlashoffvoidToggle the device flash mode
      takePhotovoidCapture photo
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n

      ScreenShots

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      AndroidIOS
      Coming Soon\"Recording\"
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-app-id-changer":{"name":"nativescript-dev-app-id-changer","version":"0.0.5","license":"MIT","readme":"

      'nativescript-dev-app-id-changer' a NativeScript dev plugin

      \n

      This is a very simple package that when installed will try to change the id/applicationId of the NativeScript application to which it is being installed to by adding a random string at the end of the current ID. After installing the nativescript-dev-app-id-changer make sure you DO NOT COMMIT the changes to the package.json and app.gradle files of your project (those files are updated/changed by the package)

      \n

      Purpose

      \n

      While working with real devices of IOS and applications that are under a corporate certificate/provisioning it is often the case that executing tns run ios will throw and error that the current dev team is not correct etc. In this case if you only want to work on the app an do not intent to ship it immediately after building it the most common "workaround" is to change the ID of the app before you try to deploy it to the real device. This package automates the renaming of the related fields of the NativeScript app by adding a random string of characters to the current app's ID.

      \n

      How to use

      \n

      You should only need to use this once before starting to work on app you intent to deploy to a real device FOR DEVELOPMENT purposes only so simply install it from npm:

      \n

      npm i nativescript-dev-app-id-changer --no-save

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-cardio":{"name":"thinkdigital-nativescript-cardio","version":"1.0.3","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-empty-template":{"name":"nativescript-empty-template","version":"1.0.0","readme":"

      Nativescript empty template

      \n

      This is a Nativescript template to create an empty project with minimum files and setup.

      \n

      You can use it when creating a new Nativescript blank project:

      \n
      tns create NewProject --template nativescript-empty-template/
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-dynamo":{"name":"nativescript-vue-dynamo","version":"0.1.0","license":"MIT","readme":"

      Nativescript-Vue-Dynamo

      \n

      Nativescript-Vue-Dynamo is a dynamic component router implementation that is suitable for NativeScript-Vue.

      \n

      It uses Vue Dynamic Components to simulate the normal navigation patterns of a Nativescript-Vue app. It does this by plugging into Vue-Router and Vuex. This implementation also supports "Child Routes" by using the same Dynamic Component behavior, in a nested manner, to allow you to navigate within the parent/child routes.

      \n

      To be clear: we are not actually using the underlying mechanics of Vue-Router to navigate through the app as this has been problematic issue when trying to use Nativescript-Vue historically. However, we are doing things like plugging into the main Route Config as a common shared configuration and then using a router.afterEach hook to update the route history that we are keeping in the state manager. When the route history state changes, the dynamic components will cause the app to load a new route or Page. This effectively mimcs normal navigation patterns.

      \n

      A further point must be made: we are also not using the underlying mechanics of Nativescript-Vue to navigate. There is no $navigateTo or $navigateBack going on. Thus, we keep something similar to Nativescript's navigation stack inside of our state manager so that we can track forwards and backwards movement as needed.

      \n

      This project takes many of the same ideas in Vuex-Router-Sync and Nativescript-Vue-Navigator and combines them in a way that simulates the traditional routing experience withing a Nativescript-Vue app.

      \n

      Quick Start

      \n
      npm install --save nativescript-vue-dynamo
      \n

      Main entry point (main.js or main.native.js)

      \n
      import Vue from 'nativescript-vue';
      import App from './App.vue';
      import store from './store';
      import router, { routes } from './router';

      import Dynamo from 'nativescript-vue-dynamo';
      Vue.use( Dynamo, {
        store,
        router,
        routes,
      });
      \n

      Vue-Router Config

      \n

      Inside or your Vue-Router config, you will want to split out your route config into it's own array as modeled below. You can then use many of the extra options provided by Vue-Router out of the box such as adding the meta object. Most built in router hooks should be available to help assist you as well. Notice the routeHistoryName in the meta tags for all routes. Also, for child routes, notice the parentRouteHistoryName. These two items should be used in this manner to help assist Dynamo with tracking where it is at and where it needs to go. Finally, also notice the alias property in the first child route. This helps tell Dynamo which child route is the default child route.

      \n
      export const routes = [
        {
          name: 'home',
          path: '/home',
          component: () => import(/* webpackChunkName: \"home\" */ '~/views/Home'),
          meta: {
            title: 'Home',
            auth: true,
            routeHistoryName: 'main',
          },
        },
        {
          name: 'login',
          path: '/login',
          component: () => import(/* webpackChunkName: \"login\" */ '~/views/Login'),
          meta: {
            title: 'Login',
            auth: false,
            routeHistoryName: 'main',
          },
        },
          {
          name: '',
          path: '/first',
          component: () => import(/* webpackChunkName: \"first\" */ '~/views/First'),
          props: true,
          meta: {
            title: 'First',
            auth: true,
            routeHistoryName: 'main',
          },
          children: [
            {
              name: 'dynamo-one',
              alias: '/',
              path: '/dynamo-one',
              component: () => import(/* webpackChunkName: \"dynamo-one\" */ '~/views/Dynamo-One'),
              meta: {
                title: 'Dynamo One',
                auth: true,
                routeHistoryName: 'first',
                parentRouteHistoryName: 'main',
              },
            },
            {
              name: 'dynamo-two',
              path: '/dynamo-two',
              component: () => import(/* webpackChunkName: \"dynamo-two\" */ '~/views/Dynamo-Two'),
              meta: {
                title: 'Dynamo Two',
                auth: true,
                routeHistoryName: 'first',
                parentRouteHistoryName: 'main',
              },
            },
          ],
        }
      ]
      \n

      App.vue

      \n

      Inside of your App.vue, you can do something simple as below. Notice we are sending two required props into the component:

      \n
        \n
      1. defaultRoute - This will make sure that the first page loaded is the one specified by this value. It must also match an actual route in your router config.
        2. \n
      2. routeHistoryName - This name will end up being the id of the frame/div loaded and will also be used to track via state manager which frame/div we are navigating within.
        3. \n
      \n

      These two options are mandatory for this package to work correctly.

      \n
      <template>
        <Page actionBarHidden=\"true\">
          <Dynamo
            :routeHistoryName=\"'main'\"
            :defaultRoute=\"'home'\"
          />
        </Page>
      </template>
      \n

      Inside of App.vue, you could even provide your own wrapper around the Dynamo component. This could be a StackLayout or any of the other layout components such as GridLayout. Just be aware that any alternative layout items will not be replaced when the Dynamo component updates itself. This might be useful if you want a bottom navigation button area and then have the buttons selected switch out the item in the first row of the Grid:

      \n
      <template>
        <Page actionBarHidden=\"true\">
          <GridLayout row=\"*, auto, auto, auto\">
            <Dynamo
              :routeHistoryName=\"'main'\"
              :defaultRoute=\"defaultRoute\"
              row=\"0\"
            />
            <Button text=\"First\" @tap=\"$goTo({ path: '/first'})\" row=\"0\" />
            <Button text=\"Second\" @tap=\"$goTo({ name: 'second', params: { msg: 'Hello, this is a prop' }})\" row=\"1\" />
            <Button text=\"Logout\" @tap=\"$logout('main')\" row=\"2\" />
          </GridLayout>
        </Page>
      </template>
      \n

      Navigating

      \n

      Because we are plugging into Vue-Router, many of the same programmatic navigation aides available there should be usable within Nativescript-Vue. So things like route.push() and route.back() should work. Others may not and if you find something that is not working, please submit an issue.

      \n

      In the example above, we are providing two different ways to route within the $goTo navigation aide. Refer to the Navigation Aides section below for more information about this function.\nThe first passes an object that should look similiar to something you pass for a route.push with vue-router, while the second also passes params to the route. Any params passed to the route will be forwarded on to the route as a prop. This allows you to dynamically pass props to your route.

      \n

      Child routes

      \n

      You can use "child route" like features as well. You will build out your child route config as you normally would with Vue-Router except you must add a meta tag into the child route's config:

      \n
      meta: {
        title: 'Dynamo One',
        auth: true,
        routeHistoryName: 'first',
        parentRouteHistoryName: 'main',
      },
      \n

      By adding the meta take and then adding the parentRouteHistoryName property you will effecively activate the parent/child relationship between components and this will mimic many of the parent/child functions of Vue-Router. Notice that the parentRouteHistoryName property is equal to the previously used routeHistoryName and routeHistoryName is now something entirely different. You would then just add a Dynamo component into the Parent view as normal. Notice the routeHistoryName in the route config above matches the routeHistoryName prop in the component below.

      \n
      <template>
        <Page>
          <ActionBar :title=\"navbarTitle\" />
          <Dynamo
            :routeHistoryName=\"'first'\"
            :defaultRoute=\"'dynamo-one'\"
          />
        </Page>
      </template>
      \n

      You can also provide an option of simulating Nativescript's built in clearHistory navigation option. You can provide a route parameter named clearHistory and this will reset the route history state for the corrosponding routeHistoryName.

      \n

      For example, given you are on a Login page, and successfully log in you would navigate to the Home page with

      \n
      $router.push({ name: 'home', params: { routeHistoryName: 'main', clearHistory: 'true'}});
      \n

      or

      \n
      this.$goTo('home', true);
      \n

      Note that we used clearHistory: true to prevent the back button from going back to the login page or just passed true as the 2nd prop in this.$goTo.

      \n

      Optional Navigation Aides

      \n

      This package is also providing some additional Navigation Aides via Vue.prototype that will help assist you navigating within your app.

      \n
        \n
      1. \n

        $goTo(location, routeHistoryName, parentRouteHistoryName?, clearHistory?, onComplete?, onAbort?)

        \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        ParameterTypeRequiredPurpose
        locationstring or LocationXWhere you want to go. If this is a string, then it will navigate to that route. If it is a vue-router Location Object, then it will take the included options into account when navigating.
        clearHistorybooleanclear the navigation history being kept in the state manager. Will default to false
        onCompleteFunctionCallback to be called when the navigation successfully completes (after all async hooks are resolved).
        onAbortError HandlerCallback for when the navigation is aborted (navigated to the same route, or to a different route before current navigation has finished)
        \n

        For convience we are constructing a router.push behind the scenes. We did this as a matter of convience since we are adding a required route parameter as well as some optional route parameters to help us track navigation. You could just as easily still use router.push if you want as seen in the Login example above.

        \n
        2. \n
      2. \n

        $goBack() - It will check to see if you are navigating back to a sibling route, or going backwards to a parent route. It will also check to see if this is the last page left in the frame and if there is a parent route, it will transition to it.

        \n
        3. \n
      3. \n

        $goBackToParent(routeHistoryName, parentRouteHistoryName) - Provide the child routeHistoryName and the parentRouteHistoryName and it will navigate back up the route tree. This method is actually called for you if when you use $goBack() and there is a need to transition backwards to a parent Route.

        \n
        4. \n
      \n

      Event Handling and Refs

      \n

      The Dynamo component is acting as a "middle-man" between the components you are concerned with. Thus, the relationship looks something like this Parent -> Child(Dynamo) -> Grandchild. This means you won't be able to handle events or use refs to call functions on the grandchild as you normally would. Because of this, we have provided a way to handle both of these common patterns.

      \n

      Event Handling

      \n

      When you call the Dynamo component, you can add an additional parameter that has a very specific way of referencing it whereby it must include the routeHistoryName within it. Notice that with the v-on we are including first as the first string in the kebab case name. The pattern you will need to use is "routeHistoryName + -event-handler". This lets Dynamo know which parent component to bubble the event up to.

      \n
      <Dynamo
        :routeHistoryName=\"'first'\"
        :defaultRoute=\"'dynamo-one'\"
        :functionHandler=\"functionHandler\"
        @first-event-handler=\"eventHandler\"
      />
      \n

      Then inside your parent component you can include a function similar to this:

      \n
      public eventHandler(e){
        console.log('first.vue - eventHandler - ', e);
      }
      \n

      Inside your grandchild component you can then emit an event as you normally would: this.$emit('dynamo-event', "emit event one");. Notice the event name is dynamo-event. This is the required event name as it is hard coded into the Dynamo component.

      \n

      In theory, you can use this single event handler to do multiple things in the parent component via something like a switch statement, or even get more advanced and pass an object back up through the event and convert it into calling a method somewhere else. Here's an example object: { function: 'anotherMethod', data: 'data' } and then within your eventHandler function you could do something like below and it would automatically call your anotherMethod method and pass it the data:

      \n
      public eventHandler(e){
        this[e.function](e.data)
      }
      \n

      Refs & calling grandchild functions

      \n

      In your Dynamo component you can include an option named functionHandler and then have it reference a property in your parent component. In reality what we are doing is passing a Prop to the Dynamo component which in turn is passing that Prop down to the grandchild component.

      \n

      For the sake of convienence, we've named the function functionHandler in the example below.

      \n
      <Dynamo
        :routeHistoryName=\"'first'\"
        :defaultRoute=\"'dynamo-one'\"
        :functionHandler=\"functionHandler\"
        @first-event-handler=\"eventHandler\"
      />
      \n

      Then you could do something like below inside your script tag's export. The parentButton method is just a convience provided in the example that is called after a button click. In turn, the parentButton method replaces the value of this.functionHandler. The object provided works much like the eventHandler example above, but in reverse. It references a method to call on the grandchild: parentToChild and some data to pass to the grandchild's method.

      \n
      public functionHandler: object = {};

      public parentButton() {
        console.log('parentButton clicked');
        this.functionHandler = { method: 'parentToChild', data: 'hello there' };
      }
      \n

      Then inside your grandchild component you could do something like below. Notice we've setup the Prop but also setup a watcher. This allows us to use this single Prop to act as a gateway to calling multiple methods in the grandchild component. Think of it as a one-to-many relationship. Inside the watcher we've included an example where we dynamically call other methods.

      \n

      In the example above, we are passing in parentToChild as the method to call with the data of hello there. This means in the example below, we will write the following to the console: parentToChild - hello there. Also notice we've included an example of emitting an event back up as well. This is optional and is not necessary.

      \n
      @Prop() functionHandler: object = {};
      @Watch('functionHandler')
      onfunctionHandlerChanged(val: Function) {
        this[val.method](val.data);
      }

      public parentToChild(data: string) {
        console.log('parentToChild - ', data);
        this.$emit('dynamo-event', \"emit event two from parentToChild function\");
      }
      \n

      Demo project

      \n

      Take a look at the demo project for a simplistic project that implements this plugin with many of the examples discussed above. Notice within the utils/global-mixin-native class file there is an example of intercepting the Android back button behavior and then plugging it into the $goBack() navigation aide.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mehyaa/nativescript-common":{"name":"@mehyaa/nativescript-common","version":"1.2.1","license":"GPL-3.0-or-later","readme":"

      NativeScript Common Library \"Build \"Version\" \"License\"

      \n

      Miscellaneous NativeScript utilities for general use.

      \n

      Install with npm:

      \n
      $ npm install @mehyaa/nativescript-common
      \n

      Install with yarn:

      \n
      $ yarn add @mehyaa/nativescript-common
      \n

      Just a few notes for anyone who wishes to use this library:

      \n
        \n
      • \n

        The library is created from my personal refactorings and merging seperate project's duplicated codes. It's main purpose is personal use so some behavior can be different than expected.

        \n
        • \n
      • \n

        The library has no default entry point.

        \n
        • \n
      • \n

        The modules within the library must be imported seperately.

        \n
        • \n
      • \n

        The modules within the library are as-is and written in EcmaScript 6 so if your target environment uses lower versions of EcmaScript you need to transpile the modules.

        \n
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-play-livesync":{"name":"nativescript-play-livesync","version":"0.0.13","license":"Apache-2.0","readme":"

      NativeScript PlayLiveSync

      \n

      This plugin is used for communication between NativeScript Playground website and NativeScript Preview applications(iOS and Android).

      \n

      The communication between the site and the mobile applications is made through PubNub. The repository contains the native implementation in Java and Objective-C respectively.

      \n

      To debug the plugin you can follow the steps from here.

      \n

      Installation

      \n
      tns plugin add nativescript-play-livesync
      \n

      Configuration

      \n

      As the plugin needs the a scheme to restart the current application when needed, the following configurations should be present in the application's App_Resources folder:

      \n

      Android

      \n

      The following activity configuration should be added to the AndroidManifest.xml file somewhere above <activity android:name="com.tns.ErrorReportActivity"/> if you want to use nsplay scheme:

      \n
      <activity
          android:name=\"com.tns.playlivesync.NativeScriptActivity\"
          android:configChanges=\"keyboardHidden|orientation|screenSize\"
          android:launchMode=\"singleTask\">

              <action android:name=\"android.intent.action.VIEW\" />
              <category android:name=\"android.intent.category.DEFAULT\" />
              <category android:name=\"android.intent.category.BROWSABLE\" />
              <data android:scheme=\"nsplay\"/>
          </intent-filter>
      </activity>
      \n

      iOS

      \n

      Add in Info.plist file the following configurations:

      \n
      <key>CFBundleURLTypes</key>
          <array>
              <dict>
                  <key>CFBundleURLName</key>
                  <string>org.nativescript.playground</string>
                  <key>CFBundleURLSchemes</key>
                  <array>
                      <string>nsplay</string>
                  </array>
              </dict>
          </array>
      <key>LSApplicationQueriesSchemes</key>
      <array>
          <string>nsplayqr</string>
      </array>
      \n

      In the configuration above there are 3 values that need to be set:

      \n
        \n
      • nsplay - the scheme of the current application which is needed to generate a url with the following format nsplay://.... that will be used for restarting the application with given arguments
        • \n
      • nsplayqr - the scheme of the QR application which is used for restarting the current application
        • \n
      • org.nativescript.playground - the CFBundleURLName is used in the plugin only to get the first item of the CFBundleURLSchemes array from the dictionary having CFBundleURLName property set. This is needed as some plugins may add additional CFBundleURLSchemes and we may end up resolving them as the application scheme. So we used this property to distinguish the right dictionary in the CFBundleURLTypes array.
        • \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/schematics-executor":{"name":"@nativescript/schematics-executor","version":"0.0.2","license":"Apache-2.0","readme":"

      Schematics executor

      \n

      This package provides JS API for running schematics.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-login":{"name":"nativescript-login","version":"1.0.1","license":"WTFPL","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-background-geolocation":{"name":"nativescript-background-geolocation","version":"0.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-web-ns":{"name":"@synerty/peek-web-ns","version":"0.3.2","license":"MIT","readme":"

      Peek WEB NS

      \n

      This is a utility package that enables code reuse between an AngularCLI and\nNativeScript + Typescript + Angular2 project.

      \n

      Usage

      \n

      Platform Selection

      \n

      Insert this at the top of your main.ts for your native script application.
      This tells the utility that we're compiling for NativeScript

      ::

          import {PeekCoreConfigService} from \"@synerty/peek-web-ns\";
          PeekCoreConfigService.PLATFORM_TARGET = PeekCoreConfigService.PLATFORMS.MOBILE_NATIVE;


      Component Template Selection
      \n

      Angular CLI can handle templates with no paths, while NativeScript requires a path\nrelative to app/.

      \n

      Use this utility to switch the component templates for each platform.\nThe files required are all in the same directory and named as follows:

      \n
        \n
      • main-home.component.ts
        • \n
      • main-home.component.web.html
        • \n
      • main-home.component.ns.html
        • \n
      \n

      Under the hood : When the template is compiled on nativescript, it's using NODE, so we can use\nmodule.filename. We use this to find the relative path to app, then take the templateUrl\nadd the path and replace .web.html with .ns.html.

      \n

      ::

      \n
      import {Component} from "@angular/core";\n\n@Component({\n    selector: "peek-main-home",\n    templateUrl: 'main-home.component.web.html',\n    moduleFilename : module.filename\n})\nexport class MainHomeComponent {\n    testMsg: string = "Unified home Update2";\n\n}\n
      \n

      Router Selection

      \n

      Angular CLI and NativeScript require different router modules, this utility helps switch
      between them.

      You will still need separate main AppModule files.

      app.ns.module.ts
      ::

          @NgModule({
              declarations: [
                  AppComponent,
                  // declarations
              ],
              bootstrap: [AppComponent],
              imports: [
                  NativeScriptModule,
                  NativeScriptRouterModule,
                  PeekRouterModule.forRoot(staticRoutes), // <-- HERE
                  // other imports
              ],
              schemas: [NO_ERRORS_SCHEMA],
              providers: [{
                      provide: NgModuleFactoryLoader,
                      useClass: PeekModuleFactoryLoader
                  },
                  // Other providers
              ]
          })
          export class AppNsModule {

          }


      app.web.module.ts
      ::

          @NgModule({
              declarations: [
                  AppComponent,
                  // declarations
              ],
              imports: [
                  RouterModule,
                  PeekRouterModule.forRoot(staticRoutes), // <-- HERE
                  BrowserModule,
                  FormsModule,
                  HttpModule,
                  // other imports
              ],
              providers: [
                  // Other providers
              ],
              bootstrap: [AppRootComponent]
          })
          export class AppWebModule {
          }

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textinputlayout":{"name":"nativescript-textinputlayout","version":"2.0.7","license":"MIT","readme":"

      ../README.md

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@microexcel-csd/nativescript-hide-action-bar":{"name":"@microexcel-csd/nativescript-hide-action-bar","version":"2.0.3","readme":"

      NativeScript Hide Action Bar

      \n

      \"Short

      \n

      Description

      \n

      This is a simple plugin for the Angular flavor of NativeScript. With it, you can hide the ActionBar of any view by adding the directive to an element anywhere in the component.

      \n

      This is especially useful for NativeScript code sharing projects as trying to access the Page object in a component would break your web build.

      \n

      Installation

      \n

      From the root folder of your project, execute the following command:

      \n
      tns plugin add @microexcel-csd/nativescript-hide-action-bar
      \n

      Usage

      \n

      Once the plugin is added to your project, you need to add the HideActionBarModule to your imports array in your desired feature module or the SharedModule:

      \n
          import { HideActionBarModule } from '@microexcel-csd/nativescript-hide-action-bar';

          @NgModule({
              // ...
              imports: [
                  HideActionBarModule,
                  // ...
              ],
              // ...
          })
          export class SharedModule { }
      \n
      \n

      NOTE: Simply importing the HideActionBarModule into your AppModule will not work.

      \n
      \n

      Afterwards, simply add the directive to any element as follows:

      \n
      <Label hideActionBar text=\"Sayonara, ActionBar!\"></Label>
      \n

      You'll want to make sure that the element is actually present on the page. For example, an element nested within an *ngIf that evaluates to false will not cause the ActionBar to be hidden.

      \n

      Support Our Packages

      \n

      \"paypal\"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-androidx-migrate":{"name":"ns-androidx-migrate","version":"1.0.5","license":"Apache-2.0","readme":"

      Tool that migrates Support Library namespaces to the new AndroidX namespaces.

      \n

      By default it searches recursively .java,.js,.ts,.xml and .gradle files.\nYou can exclude files with specific extensions passing comma separated array at the end.

      \n

      How to use:

      \n
        \n
      1. Install package globally npm install ns-androidx-migrate -g
        2. \n
      2. ns-androidx-migrate <project-folder> <[ext1,ext2,..]>\nThis command will search and replace all Support Library namespace to the new AndroidX namespaces.\nIt will also output suggestions, that should be made manually, for changing Support Library artifacts to AndroidX.\nPlease do revise all changes manually after that!\nThis operation may take a few minutes to execute (depends on your project structure size).
        3. \n
      \n

      Examples:\nns-androidx-migrate test-plugin - search and replace test-plugin folder for all default file types\nns-androidx-migrate test-plugin [js] - search and replace test-plugin folder for all default files except .js ones.\nns-androidx-migrate test-plugin [ts,java] - search and replace test-plugin folder for all default files except .ts and .java ones.\nConsider passing comma separated extensions with no . or whitespaces between them.

      \n

      This tool does not migrate any 3rd party packages or plugins that your project relies on.

      \n

      Consider updating your project package.json dependencies with AndroidX versions.

      \n

      Consider deleting your node_modules folder for faster migration.\nDemo test-plugin included.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-twilio-video":{"name":"nativescript-twilio-video","version":"1.1.6","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mht-printer":{"name":"nativescript-mht-printer","version":"1.1.5","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ios-declarations":{"name":"nativescript-ios-declarations","version":"4.0.1","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msf":{"name":"nativescript-msf","version":"1.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"karma-nativescript-launcher":{"name":"karma-nativescript-launcher","version":"0.4.0","license":"Apache-2.0","readme":"

      Karma launcher for NativeScript unit tests

      \n

      How to use

      \n
      $ npm install -g nativescript
      $ tns create myproject
      $ cd myproject
      $ tns test init
      $ tns test android
      $ tns test ios
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"thinkdigital-nativescript-odata":{"name":"thinkdigital-nativescript-odata","version":"1.0.3","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-walkyou":{"name":"nativescript-walkyou","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"apolloai-nativescript-status-bar":{"name":"apolloai-nativescript-status-bar","version":"1.1.0","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ugs-nativescript-files-progress":{"name":"ugs-nativescript-files-progress","version":"1.2.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"observable-sectioned-array":{"name":"observable-sectioned-array","version":"0.1.2","license":"ISC","readme":"

      Observable sectioned array.

      \n

      A nativescript plugin to use sections of items for data binding. This can be used alongside Sectioned List View to support sections.

      \n

      Installation

      \n

      Run the following command from the root of your project

      \n
      $ tns plugin add observable-sectioned-array
      \n

      This command automatically installs the necessary files, as well as stores observable-sectioned-array as a dependency in your project's package.json file.

      \n

      Examples

      \n

      Following code imports the module

      \n
      var observableSectionArrayModule = require(\"observable-sectioned-array\");
      \n

      Following code creates an array and adds sections to it.

      \n
          var students = [
          \t{\"name\" : \"Alice\", gender:\"female\"},
          \t{\"name\": \"Adam\", gender: \"male\"},
          \t{\"name\": \"Bob\", gender: \"male\"},
          \t{\"name\": \"Brittany\", gender: \"female\"},
          \t{\"name\": \"Evan\", gender: \"male\"}
          ];

          var boys = students.filter(function(student) { return student.gender ===\"male\";});

          var girls = students.filter(function(student) { return student.gender ===\"female\";});

          var sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
          sectionedArray.addSection(\"Boys\", boys);
          sectionedArray.addSection(\"Girls\", girls);

          sectionedArray.on(observableSectionArrayModule.ObservableSectionArray.CHANGE, function (args) {
              //Fired when we add \"Eve\" below.
          \tconsole.log(\"Event name: \" + args.eventName + \", action: \" + args.action);
              //Event name: change, action: add
              
          \tconsole.log(\"args.row: \" + args.row + \", args.section: \" + args.section + \", added count: \"+args.addedCount);
              //args.row: 2, args.section: null, added count: 1
      \t});

      \tconsole.log('No of sections: ' + sectionedArray.getNoOfSections());
          //No of sections: 2
          
          console.log('No of items in section 1: ' + sectionedArray.getNoOfItemsInSection(1));
          //No of items in section 1: 2
          
          console.log('Item at {1,1}: ' + JSON.stringify(sectionedArray.getItem(1,1)));
          //Item at {1,1}: { \"name\": \"Brittany\", gender: \"female\" }

          //Now add a new student \"Eve\" to girls after some delay. 
          setTimeout(function() {
          \tsectionedArray.push([{\"name\": \"Eve\", gender:\"female\"}], 1);
          }, 3000);
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-copilot/vue":{"name":"@nativescript-copilot/vue","version":"0.2.2","license":"MIT","readme":"

      Nativescript Copilot

      \n

      \n Step-by-step walkthrough for your Nativescript app!\n

      \n

      \n \"Vue-Demo\"\n

      \n

      Inspired by the awesome React Native Copilot plugin

      \n

      Nativescript-Copilot is a component that is currently only suitable for NativeScript-Vue. If you'd like to see a Nativescript-Core or Nativescript-Angular implementation, then please submit a PR.

      \n

      Quick Start - Vue

      \n
      npm install --save @nativescript-copilot/vue
      \n

      Main entry point

      \n
      import Copilot from '@nativescript-copilot/vue';
      Vue.use(Copilot)
      \n

      Nativescript-Vue Usage

      \n

      This can be used on a Page by Page basis. The primary way the tour is driven is by passing in a ref for each step. For example below, we have a ref named step1 in the Image component.

      \n
        <StackLayout col=\"0\" verticalAlignment=\"bottom\" horizontalAlignment=\"left\">
          <Image ref=\"step1\" src=\"~/assets/logo.png\" height=\"75%\" width=\"75%\" borderWidth=\"1\"/>
        </StackLayout>
      \n

      You can combine multiple refs to create a tour. You will need to create an object array that carries the config for the tour for a particular page. For example:

      \n
            this.steps = [
              {
                name: 'First',
                text: 'here is some text',
                order: 1,
                target: this.$refs.step1.nativeView,
                animated: true,
                isFirstStep: true
              },
              {
                name: 'Second',
                text: 'here is some text with a rounded highlighted zone and padding',
                order: 2,
                target: this.$refs.step2.nativeView,
                animated: true,
                highlightBorderRadius: 10,
                highlighPadding: 5,
              },
              {
                name: 'Third',
                text: 'here is some text that should hopefully be long enought to cause a wrap.  What will happen if the text is too long. Find out!',
                order: 3,
                target: this.$refs.step3.nativeView,
                animated: true
              },
              {
                name: 'Fourth',
                text: 'This has a veritcal offset of -5 which will push the step 5dp towards the top',
                order: 4,
                target: this.$refs.step4.nativeView,
                animated: false,
                verticalOffset: -5,
              },
              {
                name: 'Fifth',
                text: '',
                order: 4,
                target: this.$refs.step3.nativeView,
                animated: false,
                isCustom: true,
                itemTemplate: '<Label text=\"This is a custom template!\" color=\"green\"/>',
                customBackgroundColor: 'black',
                customBorderRadius: '15',
                numberAccentColor: 'white',
                numberBackgroundColor: 'green',
                 customTooltipStyle:  {
                  fontFamily: 'Avenir-Bold',
                  tooltipFontSize: 12,
                  tooltipTextColor: 'white',
                  buttonFontSize: 12,
                  accentColor: 'white'
                },
                customLabels: {
                  skip: 'Stop',
                  previous: 'Before',
                  next: 'Continue',
                  finish: 'Done'
                }
              },
              {
                name: 'Sixth',
                text: 'This will darken the whole page and center the tool tip',
                order: 4,
                target: this.$refs.step4.nativeView,
                animated: false,
                darkenWholePage: true,
                isLastStep: true
              }
            ]
      \n

      There are several configuration items in a Step object:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameTypeDescription
      namestringPurely for decoration/organizational purposes
      textstringThe descriptive text to display in the tooltip
      ordernumberwhich step this is in the page's tour
      targetstringthe specific component that you want the tour to stop at. This must be in the format of this.$refs.step1.nativeView where step1 is the name of the actual ref
      animatedbooleanDefault is true, but if you don't want a step to animate to the next step, then set this and it will jump to the next location without any animation
      verticalOffsetnumberUse in case you need to vertically offset the area highlighted by the step. This can be a positive or negative number
      isFirstStepbooleanUsed to tell the plugin which step is first so that it will hide the Previous button
      isLastStepbooleanUsed to tell the plugin which step is last so that it will hide the Next button and show the 'Finish' button
      isLastStepbooleanUsed to tell the plugin which step is last so that it will hide the Next button and show the 'Finish' button
      darkenWholePagebooleanUsed to tell the plugin if a step has no highlighted value, to darken the whole screen, and center the text box vertically and horizontally
      showNumberbooleanUse in the case of not wanting to show the step number on a specific step
      numberBackgroundColorstringUsed in the case of wanting a custom number background color on a specific step
      numberAccentColorstringUsed in the case of wanting a custom number accent color on a specific step
      customBackgroundColorstringUse in the case of wanting a custom background tool tip color on a specific step
      customBorderRadiusstringUse in the case of wanting a custom border radius for the tool tip on a specific step
      highlightPaddingnumberUse in the case of wanting a custom padding on the highlightedzone of the mask
      highlightBorderRadiusnumberUse in the case of wanting a custom border radius on the highlightedzone of the mask on a specific step (Warning: when using border radius, with how this plugin functions, having too high of a border radius / too high of a border radius near the edge of the device will cause IOS UI to misfunction, it is suggested to descrease your border radius) (Note: using border radius will decrease your highlighted area, use padding to increase it again)
      isCustombooleanUse in the case of wanting a customized tool tip, along with the itemTemplate option
      itemTemplatestringUsed if custom component is true on the step, pass in a string value of XML ( events and dynamic props do not work )
      customTooltipStyleobjectUsed in the case of wanting a custom style for the tool tip on a specific step
      customLabelsobjectUsed in the case of wanting a custom style for the tool tip on a specific step
      \n

      You will then pass the step config into the Copilot component as the steps prop. In the example below, we are using a computed property to feed the steps prop:

      \n
        <Copilot
          :steps=\"computedSteps\"
          :animationDuration=\"animationDuration\"
          :labels=\"labels\"
          :tooltipStyle=\"tooltipStyle\"
          :overlayColor=\"overlayColor\"
          :backgroundColor=\"backgroundColor\"
          :accentColor=\"accentColor\"
          ref=\"copilot\"
        />
      \n

      There are several other props that can be passed into the Copilot component. They are:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameTypeDefaultDescription
      animationDurationstring300Number of ms the animation will take to move to the next step
      labelsobject{ skip: 'Skip', next: 'Next', previous: 'Previous', finish: 'Finish' }The names of the four buttons used in the toolsip to move between tour steps. Skip will end the tour at any step while Finish will only end at the very last step.
      tooltipStyleobject{ fontFamily: Avenir-Light, tooltipFontSize: 14, tooltipTextColor: 'black', buttonFontSize: 14, accentColor: 'green' }Used to control the overall apperance of the tooltip
      overlayColorstringrgba(0, 0, 0, 0.4)Used to control the overlay color
      numberBackgroundColorstringwhiteUsed to set the default number background color
      numberAccentColorstringgreenUsed to set the default number accent color
      toolTipBackgroundColorstringwhiteUsed to set the default tool tip background color
      toolTipBorderRadiusstring'3'Used to set the default tool tip border radius
      highlightBorderRadiusnumber0Used to set the default highlight border radius on the mask (Warning: when using border radius, with how this plugin functions, having too high of a border radius / too high of a border radius near the edge of the device will cause IOS UI to misfunction, it is suggested to descrease your border radius) (Note: using border radius will decrease your highlighted area, use padding to increase it again)
      highlightPaddingnumber5Used to set the default highlight padding on the mask
      \n

      An initialization example of the above options (done in typescript):

      \n
      private animationDuration: number = 300;
      private androidStatusBarVisible: boolean = false;
      private labels: object = {
        skip: 'Skip',
        previous: 'Previous',
        next: 'Next',
        finish: 'Finish'
      };
      private tooltipStyle: object = {
        fontFamily: 'Avenir-Light',
        tooltipFontSize: 14,
        tooltipTextColor: 'black',
        buttonFontSize: 14,
        accentColor: 'green'
      }
      private overlayColor: string = 'rgba(0, 0, 0, 0.4)';
      private numberAccentColor: string = 'green';
      private numberBackgroundColor: string = 'white';
      private toolTipBackgroundColor: string = 'white';
      private toolTipBorderRadius: string = '3';
      private highlightPadding: number = 5;
      private highlightBorderRadius: number = 10;
      \n

      There are several events emitted by the Copilot component:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NameTypeDescription
      step-changeobjectEmitted when a step progresses forward or backward, emits an object containing stepLeaving and stepArriving
      stop--Emitted when the copilot is stopped
      start--Emitted when the copilot is started
      not-ready--Emitted when the copilot receives an invalid layout
      highlight-tap--Emitted when the copilot's highlightedzone is tapped
      \n

      You will call the event from the Copilot component as the name of the chosen event. In the example below, we are calling a function on the event:

      \n
        <Copilot
          :steps=\"computedSteps\"
          @step-change=\"stepChanged\"
          @stop=\"copilotStopped\"
          @not-ready=\"copilotNotReady\"
          @start=\"copilotStarted\"
          @highlight-tap=\"copilotHighlightTap\"
          ref=\"copilot\"
        />
      \n

      To start a tour on a particular page you will need to call the Copilot start function. An example of this is: this.$refs.copilot.start();

      \n

      Vue Demo project

      \n

      Take a look at the demo project for a simplistic project that implements this plugin with many of the options discussed above.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wootric":{"name":"nativescript-wootric","version":"1.0.7","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-walkme":{"name":"nativescript-walkme","version":"1.0.4","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@4you-free/ns-appversion":{"name":"@4you-free/ns-appversion","version":"0.0.1-alpha.4","license":"MIT","readme":"

      ns-appversion

      \n

      Usage

      \n
      import * as AppVersion from `ns-appversion`;
      class MyClass{
        constructor(private appVersion: AppVersion) {
          console.log(this.appVersion.getApplicationVersion());
        }
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wifi-new":{"name":"nativescript-wifi-new","version":"1.0.27","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-fcm":{"name":"@nstudio/nativescript-airship-fcm","version":"0.0.2","license":"Apache-2.0","readme":"

      @nstudio/nativescript-airship-fcm

      \n
      ns plugin add @nstudio/nativescript-airship-fcm
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pushwoosh":{"name":"nativescript-pushwoosh","version":"1.0.3","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bengrantswifi":{"name":"nativescript-bengrantswifi","version":"1.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-kinvey-list":{"name":"nativescript-kinvey-list","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-desktop":{"name":"@tremho/jove-desktop","version":"0.7.0-pre-release.70","license":"UNLICENSED","readme":"

      jove-desktop

      \n

      (formerly Thunderbolt)

      \n

      Desktop (electron+riot) dependencies for a Jove project

      \n

      project\nwiki

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-plugin-nativescript-vue-web":{"name":"vue-cli-plugin-nativescript-vue-web","version":"0.0.2","license":"MIT","readme":"

      nativescript-vue-web-cli-plugin

      \n

      WORK IN PROGRESS

      \n

      A Vue Cli 3.x plugin,

      \n

      Forked from https://github.com/Nativescript-Vue-Web/vue-cli-plugin-nativescript-vue

      \n

      Extending the work of Igor Randjelovic with added support for Web builds using NativeScript-Vue components.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-qr":{"name":"@nstudio/nativescript-qr","version":"0.1.1","license":"Apache-2.0","readme":"

      @nstudio/nativescript-qr

      \n
      ns plugin add @nstudio/nativescript-qr
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates-ng":{"name":"tns-page-templates-ng","version":"3.2.4","license":"Apache-2.0","readme":"

      nativescript-page-templates-ng

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates-ts":{"name":"tns-page-templates-ts","version":"3.2.4","license":"Apache-2.0","readme":"

      nativescript-page-templates-ts

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-page-templates":{"name":"tns-page-templates","version":"3.2.4","license":"Apache-2.0","readme":"

      nativescript-page-templates

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tdallau/nativescript":{"name":"@tdallau/nativescript","version":"0.0.26","license":"ISC","readme":"

      This package contains some helper functions for nativescript.\nSome examples are:

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-build-info":{"name":"nativescript-dev-build-info","version":"0.1.0","license":"Apache-2.0","readme":"

      nativescript-dev-build-info

      \n

      Provides build information (commit sha, branch, date, etc...) at runtime.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-test":{"name":"@tremho/jove-test","version":"0.6.9-pre-release.280","license":"UNLICENSED","readme":"

      @tremho/jove-test

      \n

      (formerly thunderbolt)

      \n
        \n
      • Test API module for Jove Test
        • \n
      • To be included in a jove project to support test framework
        • \n
      \n

      project

      \n

      wiki

      \n

      thunderbolt-test

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-notification-banner":{"name":"nativescript-notification-banner","version":"1.1.6","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-groceries":{"name":"nativescript-template-groceries","version":"3.4.0","readme":"

      NativeScript Groceries Template

      \n

      This repo serves as the starting point for building the NativeScript Groceries sample as part of the NativeScript JavaScript Getting Started Guide.

      \n

      Please file any issues with this template on the NativeScript/docs repository, which is where the tutorial content lives.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@wezyy1/nativescript-google-maps-sdk":{"name":"@wezyy1/nativescript-google-maps-sdk","version":"4.0.10","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rad-imagepicker-with-loc":{"name":"nativescript-rad-imagepicker-with-loc","version":"2.0.7","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-unit-test-runner":{"name":"nativescript-akylas-unit-test-runner","version":"0.8.3","license":"Apache-2.0","readme":"

      Unit test runner for NativeScript

      \n

      Refer to the documentation of NativeScript CLI's tns test init command for usage.

      \n

      If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@b3nm4r/nativescript-oauth2":{"name":"@b3nm4r/nativescript-oauth2","version":"2.4.2","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@martinbuezas/nativescript-filepicker":{"name":"@martinbuezas/nativescript-filepicker","version":"0.1.0","license":"Apache-2.0","readme":"

      @martinbuezas/nativescript-filepicker

      \n
      ns plugin add @martinbuezas/nativescript-filepicker
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places-autocomplete-last-version":{"name":"nativescript-google-places-autocomplete-last-version","version":"1.0.4","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-i18n-deep":{"name":"tns-i18n-deep","version":"0.0.13","license":"ISC","readme":"

      tns-i18n-deep

      \n

      This is a Nativescript plugin that implements i18n easily. It supports deep nested localized strings

      \n

      It adds _L function to global variable and XML files so you can use it anywhere in the app.

      \n

      It is based on the tns-i18n module, The only difference is that this module supports deep nested strings, so you can more easily organize your localizations.

      \n

      The module detects the preferred user language and displays text in this language if it is handled by the app, if not, it will load the text in the default language you chose.

      \n

      Installation

      \n
      tns plugin add tns-i18n-deep
      \n

      Usage

      \n

      Import

      \n

      Import the module in app.js before anything else. See example below:

      \n
      import Vue from 'nativescript-vue';
      import HelloWorld from './components/HelloWorld';

      //> You have to mention the default language code
      const i18n = require('tns-i18n-deep')('en');

      // Uncommment the following to see NativeScript-Vue output logs
      //Vue.config.silent = false;

      new Vue({
          i18n,
          render: h => h('frame', [h(HelloWorld)])

      }).$start();
      ```javascript

      ## Creating locales
      Now, create a **i18n** folder in the **app** folder.
      \n

      app\n|___ i18n\n|___ en.js\n|___ sv.js\n.\n.\n.\n.\n.\n.

      \n

      ### Must export in files
      The files containing the strings, must export an object of the strings.

      Eg: **en.js**
      ```javascript
      module.exports = {
          greetings: 'Hello %s',
          bye: 'Nice to meet you %s, see you in %s days',
          weekdays: {
              monday: \"Monday\",
              tuesday: \"Tuesday\",
              tuesday: \"Wednesday\",
          }
      };
      \n

      Load strings

      \n

      XML

      \n

      In XML files:

      \n
      <Label text=\"{{_L('greetings')}}\"></Label>
      \n

      JS

      \n
      _L(\"greetings\")
      \n

      JS with deep string

      \n
      _L(\"weekdays.monday\")
      \n

      Replacements

      \n

      The module supports replacements of %s.

      \n

      Eg:

      \n
      <Label text=\"{{_L('greetings', 'My friend')}}\"></Label>
      <!-- Will give: Hello My friend -->
      \n

      Multiple replacements

      \n

      For multiple replacements, you can use an array, separate arguments or even both.

      \n

      Eg:

      \n
      <Label text=\"{{_L('bye', 'My friend', '5')}}\"></Label>
      <!-- Will give: Nice to meet you My friend, see you in 5 days -->
      \n

      Or:

      \n
      <Label text=\"{{_L('bye', ['My friend', '5'])}}\"></Label>
      <!-- Will give: Nice to meet you My friend, see you in 5 days -->
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"test-nativescript-utils":{"name":"test-nativescript-utils","version":"1.0.1","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-i18n":{"name":"tns-i18n","version":"0.0.10","license":"ISC","readme":"

      tns-i18n

      \n

      This is a Nativescript plugin that implements i18n easily.

      \n

      It adds _L function to global variable and XML files so you can use it anywhere in the app.

      \n

      It is inspired by nativescript-i18n, The only difference between them is that with this plugin you don't need to rebuild the app with every change, so you can continue watching the app smoothly.

      \n

      The module detects the preferred user language and displays text in this language if it is handled by the app, if not, it will load the text in the default language you chose.

      \n

      Prefer Videos ?

      \n

      Here is a short video tutorial on this plugin.

      \n

      Installation

      \n
      tns plugin add tns-i18n
      \n

      Usage

      \n

      Import

      \n

      Import the module in app.js before anything else:

      \n
      \n

      You have to mention the default language code

      \n
      \n
      require('tns-i18n')('en'); // We set 'en' as default language
      var application = require(\"application\");

      application.start({ moduleName: \"./home\" });
      \n

      Creating locales

      \n

      Now, create a i18n folder in app folder.

      \n
      app
      |___ i18n
          |___ en.js
          |___ ar.js
          .
          .
          .
      .
      .
      .
      \n

      Must export in files

      \n

      The files containing the strings, must export an object of the strings.

      \n

      Eg: en.js

      \n
      module.exports = {
          greetings: 'Hello %s',
          bye: 'Nice to meet you %s, see you in %s days'
      };
      \n

      Load strings

      \n

      XML

      \n

      In XML files:

      \n
      <Label text=\"{{_L('greetings')}}\"></Label>
      \n

      JS

      \n
      _L(\"greetings\")
      \n

      Replacements

      \n

      The module supports replacements of %s.

      \n

      Eg:

      \n
      <Label text=\"{{_L('greetings', 'My friend')}}\"></Label>
      <!-- Will give: Hello My friend -->
      \n

      Multiple replacements

      \n

      For multiple replacements, you can use an array, separate arguments or even both.

      \n

      Eg:

      \n
      <Label text=\"{{_L('bye', 'My friend', '5')}}\"></Label>
      <!-- Will give: Nice to meet you My friend, see you in 5 days -->
      \n

      Or:

      \n
      <Label text=\"{{_L('bye', ['My friend', '5'])}}\"></Label>
      <!-- Will give: Nice to meet you My friend, see you in 5 days -->
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-mobileauth":{"name":"tns-mobileauth","version":"0.0.5","license":"ISC","readme":"

      Install

      \n
      tns plugin add tns-mobileauth
      \n

      Params

      \n

      origin: origin url of server

      \n

      lang: function returning string by attribute.

      \n

      test: if working on test set true to get console messages.

      \n

      API

      \n

      getSessionFile: returns session file from phone

      \n

      getClientSession(success,fail): runs success() if session file has the right format else runs fail()

      \n

      ifSessionOk(uri,ifOk,ifNotOk): verify session and return user data

      \n

      login(uri,user,success,fail): login

      \n

      logout(callback): logout

      \n

      postWithSession(uri,json,success,fail): posts data in operation property and adds session to verify it on server

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-target":{"name":"nativescript-vue-target","version":"0.1.0","license":"MIT","readme":"

      NativeScript-Vue target

      \n

      Webpack target for NativeScript-Vue without the need for nativescript-dev-weback.

      \n

      Credits

      \n

      Based on nativescript-dev-webpack

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"karma-nsnodeunit":{"name":"karma-nsnodeunit","version":"0.2.1","license":"MIT","readme":"

      karma-nsnodeunit

      \n

      Adapter for the Nodeunit testing framework for NativeScript.

      \n

      This is based on both the Karma-NodeUnit located at https://github.com/karma-runner/karma-nodeunit\nAnd the actual nodeunit from https://github.com/caolan/nodeunit\nThey have both been modified to work inside the NativeScript test runner environment.

      \n

      Usage

      \n
        \n
      1. tns test init To initialize the testing system, Choose Mocha.
        2. \n
      2. npm install karma-nsnodeunit --save-dev
        3. \n
      3. Update the karma.conf.js file and set the frameworks: ['nsnodeunit']
        4. \n
      4. Write your nodeunit tests inside the app/tests folder.
        5. \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-oauth":{"name":"nativescript-facebook-oauth","version":"0.0.1","license":"MIT","readme":"

      nativescript-facebook-oauth

      \n

      Facebook SDKを使用して、iOS、Android共にOAuth認証を実現するNativeScriptプラグインです。

      \n

      使い方

      \n

      インストール

      \n
      npm install nativescript-facebook-oauth
      \n

      Android

      \n

      your_app/App_Resources/Android/values/strings.xmlを作成し下記のコードを入力してください。

      \n
      <?xml version=\"1.0\" encoding=\"utf-8\"?>
      <resources>
          <string name=\"app_name\">sample</string>
          <string name=\"title_activity_kimera\">sample</string>
          <string name=\"facebook_app_id\">{your-app-id}</string>
      </resources>
      \n

      your_app/App_Resources/Android/AndroidManifest.xmlに下記のuses-permission meta-data activityを追加してください。

      \n
      <?xml version=\"1.0\" encoding=\"utf-8\"?>
      <manifest>
      \t<uses-permission android:name=\"android.permission.INTERNET\"/>
          ...
      \t<application>
              ...
      \t\t<meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
      \t\t<activity android:name=\"com.facebook.FacebookActivity\"
      \t\t          android:configChanges=\"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
      \t\t          android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
      \t\t          android:label=\"@string/app_name\"/>
              ...
      \t</application>
      </manifest>
      \n

      iOS

      \n

      your_app/App_Resources/iOS/Info.plistの最下部にある</dict>の前に下記のコードを追加してください(詳細)。

      \n
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>fb{your-app-id}</string>
          </array>
        </dict>
      </array>
      <key>FacebookAppID</key>
      <string>{your-app-id}</string>
      <key>FacebookDisplayName</key>
      <string>{your-app-name}</string>
      <key>LSApplicationQueriesSchemes</key>
      <array>
        <string>fbapi</string>
        <string>fb-messenger-api</string>
        <string>fbauth2</string>
        <string>fbshareextension</string>
      </array>
      \n

      下記のコードを追加し、Objective-CのAppDelegateクラスをFBSDKApplicationDelegateにconnectしてください(詳細)。

      \n
      import { connectToFacebookDelegate } from \"nativescript-facebook-oauth\";
      connectToFacebookDelegate();
      application.start({ moduleName: \"main-page\" });
      \n

      Android/iOS共通

      \n
      import { FacebookLoginHandler } from \"nativescript-facebook-oauth\";

      // コールバックの処理
      const successCallback = function(result) {
        console.log(result.token);
      };

      const cancelCallback = function() {
        console.log(\"Login was cancelled\");
      };

      const failCallback = function(error) {
        console.log(error);
      };

      // ログインの処理
      const facebookLoginHandler = new FacebookLoginHandler();
      facebookLoginHandler.logInWithReadPermissions([\"email\"], successCallback, cancelCallback, failCallback); // Permissionsを追加 https://developers.facebook.com/docs/facebook-login/permissions
      \n

      検証の手順

      \n

      sample以下にサンプルアプリケーションを作成してあります。

      \n

      Facebook Applicationの作成

      \n

      Facebook developersで検証用のアプリケーションを作成します。

      \n

      \"\"

      \n

      basic setupを選択します。

      \n

      \"\"

      \n

      Display Name Contact Email Categoryを入力します。

      \n

      Create App IDでApplicationが作成されます。Settingを選択し、+Add Platformをクリック、Androidを選択します。

      \n

      \"\"

      \n

      検証用なので、Google Play Package Nameだけ入力します。これでApplicationの作成は完了です。

      \n

      Application IDの読み込み

      \n

      Androidの検証ではsample/app/App_Resources/Android/values/strings.xmlの{your-app-id}を作成したアプリケーションのApplication IDに、iOSの検証ではsample/app/App_Resources/iOS/Info.plistの{your-app-id}を作成したアプリケーションのApplication IDに、{your-app-name}をアプリケーションの名前に置き換えてください。

      \n

      サンプルアプリの実行

      \n

      下記コマンドで実行できます。

      \n

      初回

      \n
      cd sample
      tns install
      tns platform add [ios | android]
      tns run [ios | android]
      \n

      2回目以降

      \n
      cd sample
      tns plugin remove nativescript-facebook-oauth && tns plugin add ../
      tns run [ios | android]
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wechat":{"name":"nativescript-wechat","version":"0.0.3","license":"MIT","readme":"

      Develop a NativeScript plugin

      \n

      Getting started

      \n

      npm

      \n
      npm version patch
      \n

      Credit

      \n
      https://github.com/NathanWalker/nativescript-plugin-seed
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-multi-drawer":{"name":"nativescript-vue-multi-drawer","version":"0.0.4","license":"MIT","readme":"

      NativeScript-Vue Multi Drawer

      \n

      A plugin which provides a drawer component that supports multiple drawers.

      \n\n

      All drawers are optional, and can be configured individually.

      \n

      Features:

      \n
        \n
      • drawers on left, right, top and bottom
        • \n
      • swipe to open
        • \n
      • swipe to close
        • \n
      • tap outside to close
        • \n
      • progressively dim main content as the drawer is opened
        • \n
      \n

      Quick Start

      \n
      $ npm i --save nativescript-vue-multi-drawer
      \n
      // main.js
      import Vue from 'nativescript-vue'
      ...
      + import MultiDrawer from 'nativescript-vue-multi-drawer'
      + Vue.use(MultiDrawer)
      \n

      Optionally set default options by passing options when installing the plugin:

      \n
      Vue.use(MultiDrawer, { 
        // override any option here
        // for example enable debug mode
        debug: true
      })
      \n

      For the available options check the source of defaultOptions

      \n
      <MultiDrawer>
        <StackLayout slot=\"left\">
          <Label text=\"Im in the left drawer\" />  
        </StackLayout>
        <StackLayout slot=\"right\">
          <Label text=\"Im in the right drawer\" />  
        </StackLayout>
        <StackLayout slot=\"top\">
          <Label text=\"Im in the top drawer\" />  
        </StackLayout>
        <StackLayout slot=\"bottom\">
          <Label text=\"Im in the bottom drawer\" />  
        </StackLayout>
        
        <Frame /> <!-- main content goes into the default slot -->
      </MultiDrawer>
      \n

      The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

      \n

      Opening a drawer from code

      \n

      Assign a ref to the Drawer component

      \n
      <MultiDrawer ref=\"drawer\" />
      \n

      And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

      \n

      Using v-model to toggle the drawer

      \n

      The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

      \n
      <MultiDrawer v-model=\"drawerState\" />
      \n
      export default {
        data() {
          return {
            drawerState: false // closed
          }
        },
        
        methods: {
          doStuff() {
            // do stuff
            this.drawerState = 'left' // this will open the left drawer
          }
        }
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-node":{"name":"@progress/jsdo-node","version":"5.0.0-2018-05-11-00002","license":"Apache-2.0","readme":"

      Progress Data Source for Node

      \n

      The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript and Angular".

      \n

      Documentation

      \n

      Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

      \n

      The Data Source can be used by apps built using NativeScript, Angular and Node.

      \n

      License

      \n

      Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

      \n

      http://www.apache.org/licenses/LICENSE-2.0

      \n

      Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng-bottomsheet":{"name":"nativescript-ng-bottomsheet","version":"0.0.9","license":"Apache-2.0","readme":"

      NativeScript Angular Bottom Sheet Plugin

      \n

      Installation

      \n
      tns plugin add nativescript-ng-bottomsheet
      \n

      Usage

      \n

      iOS note: Shadows will be added later. :(

      \n

      The bottom sheet plugin extends a GridLayout and exposes a simple BottomSheet class with property state and method named setState(state). Also plugin exposes interface BottomSheetState that helps to manage state of Bottom Sheet.

      \n

      XML

      \n
          <Page
              navigatingTo=\"onNavigatingTo\"
              xmlns=\"http://schemas.nativescript.org/tns.xsd\"
              xmlns:ui=\"nativescript-ng-bottomsheet/ng-bottomsheet\">

              <ActionBar>
                  <Label text=\"Home\"></Label>
              </ActionBar>

              <GridLayout>
                  <!-- Add your page content here -->
                  <ui:BottomSheet stateChange=\"onStateChange\" />
              </GridLayout>
          </Page>
      \n

      Angular

      \n

      Don't forget to register the component in app.module.ts.

      \n
      import { registerElement } from 'nativescript-angular/element-registry';
      import { BottomSheet } from 'nativescript-ng-bottomsheet/ng-bottomsheet';
      registerElement('BottomSheet', () => BottomSheet);
      \n

      HTML

      \n
          <NgBottomSheet (stateChange)=\"onStateChange($event)\"></NgBottomSheet>
      \n

      Typescript

      \n

      Typescript

      \n
          onStateChange(args) {
              const {eventName, object, state} = args;
              console.log(state); // it represents one of BottomSheetState values

              // If you want to change state via code, use method setState()
              // object.setState(BottomSheetState.COLLAPSED);
              // object.setState(BottomSheetState.HALF_EXPANDED);
              // object.setState(BottomSheetState.EXPANDED);
          }
      \n

      To run the Angular demo

      \n
      cd src
      npm run demo-angular.<platform>
      \n

      To run the plain Nativescript demo

      \n
      cd src
      npm run demo.<platform>
      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ni-facebooklogin":{"name":"ni-facebooklogin","version":"2.0.1","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ogg-vorbis":{"name":"nativescript-ogg-vorbis","version":"0.0.1","license":"MIT","readme":"

      Ogg Vorbis plugin for NativeScript

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-batch-notifications":{"name":"nativescript-batch-notifications","version":"0.4.5","license":"MIT","readme":"

      Nativescript Batch plugin

      \n

      Welcome to Batch's Nativescript Plugin!
      \nBatch is a fully fledged mobile engagement platform to execute CRM tactics over iOS, Android & mobile websites.
      \nThe purpose of this plugin is to manage Push notifications, in-app messages and more.., for Android and IOS.
      \nThis repository contains the plugin's source code and a demo application.

      \n

      Installation

      \n

      NPM

      \n
      npm i nativescript-batch-notifications
      \n

      Prerequisites / Requirements

      \n

      First of all, you must create a batch account;
      \nThen a configuration is required for each platform;
      \nThis process is explained through simple steps in batch official documentation.
      \nIOS setup
      \nAndroid setup
      \nWhen you add your Firebase android project, download the google-services.json which you'll add to your NativeScript project at app/App_Resources/Android/google-services.json

      \n

      For a quick start using the demo app :

      \n
        \n
      • Override the bundle id in 'package.json' in the demo directory
        • \n
      • Override the API keys with the ones generated by your batch account in the 'app.ts' file (for IOS) and the 'application.android.ts' file (for Android).
        • \n
      \n

      How it works

      \n

      A picture is worth a thousand words\n\"Global

      \n

      Android initialization

      \n

      We must override the OnCreate method.
      \nIn order to do so, change the application name value in the AndroidManifest from com.tns.NativeScriptApplication to something like org.myApp.Application.
      \nThen, in the root dir, create a typescript file named : 'application.android.ts' and enter the bellow code.

      \n
      const firebase = require("nativescript-plugin-firebase");\n// @ts-ignore\nimport { Batch } from 'nativescript-batch-notifications';\n\n@JavaProxy("org.myApp.Application")\nclass Application extends android.app.Application {\n    public onCreate(): void {\n        super.onCreate();\n        let batch = new Batch();\n        batch.init('YOUR_BATCH_API_KEY');\n        this.registerActivityLifecycleCallbacks(batch.activityLifeCycleHelper());\n        firebase.init().catch(e => console.dir(e));\n    }\n}\n
      \n

      IOS initialization

      \n

      We must setup a custom delegate; Override the app.ts in the root dir with the bellow code:

      \n
      import * as app from "tns-core-modules/application";\nimport {run as applicationRun} from "tns-core-modules/application";\n// @ts-ignore\nimport { Batch } from 'nativescript-batch-notifications';\n\nif (app.ios) {\nclass customDelegate extends UIResponder implements UIApplicationDelegate {\n    public static ObjCProtocols = [UIApplicationDelegate];\n\n    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {\n        console.log("IOS Entered");\n        let batch = new Batch();\n        batch.initIOS('YOUR_BATCH_API_KEY');\n        return true;\n    }\n}\napp.ios.delegate = customDelegate;\napplicationRun({ moduleName: "main-page" });\n} else {\napplicationRun({ moduleName: "app-root" });\n}\n
      \n

      Important notes !!

      \n
        \n
      • (Android) In this plugin version we assume that the nativescript firebase plugin is installed; This will be fixed in upcoming releases.
        • \n
      • (IOS) When generating the xcode project, you MUST toggle 'Push Notifications' in the capabilities tab.
        • \n
      \n

      License

      \n

      MIT

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hprt":{"name":"nativescript-hprt","version":"0.9.7","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-settings":{"name":"tns-template-settings","version":"2.1.0","license":"BSD","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-core":{"name":"nativescript-mongo-stitch-core","version":"0.0.3","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-settings-ts":{"name":"tns-template-settings-ts","version":"2.1.0","license":"BSD","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-duplicator":{"name":"nativescript-app-duplicator","version":"1.0.3","license":"MIT","readme":"

      nativescript-app-duplicator

      \n

      A tool to manage duplicated app in same project

      \n

      What mean this package

      \n

      Sometimes in our business we have two o more app than are the same but with differents UI. Instead of create more project, this tools helps you to manage multiples app with one project for {N}.

      \n

      Install

      \n

      Use it with npx

      \n
      npm install -g npx
      \n

      then

      \n
      npm install nativescript-app-duplicator
      \n

      How it works

      \n

      In first place, this plugin works with webpack flow for {N} and every commands needs a project "state" to work. Lets see commands

      \n
      npx ns-dup [APPNAME] [--option]
      \n

      Options than require APPNAME:

      \n
        \n
      • --workwith or -w: set the project state to "Working on APPNAME"
        • \n
      • --restore or -r: restore APPNAME on state "not working" and set "Neutral state"
        • \n
      • --new or -n: needs to be in state "WOKRING", it will duplicate the WORKING project with APPNAME namew
        • \n
      • --delete or -d: delete APPNAME project
        • \n
      \n

      Not require APPNAME:

      \n
        \n
      • --help or -h: show options
        • \n
      \n

      Starting a new project

      \n

      After you've created a new project with {N} cli, you have to enter in a multiproject state, so you must execute

      \n
      npx ns-dup [FIRST_PROJECT_NAME] --restore
      \n

      STATES

      \n

      Working state

      \n

      When a project is in a "working state" it means that you can work on it, the other project will not be affected ƒrom your changes on it.

      \n

      Neutral state

      \n

      No project are in working state

      \n

      Phisically meaing of states

      \n

      Projects structure

      \n

      app

      \n

      |- App_Resources_[PROJECT NAME]

      \n

      |-..

      \n

      ..

      \n

      [PROJECT NAME]_package.json

      \n

      --

      \n

      The duplicator renames resources and package.json to works with {N} CLI

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-msgraph":{"name":"nativescript-msgraph","version":"0.1.4","license":{"type":"MIT","url":"https://github.com/alexziskind1/nativescript-msgraph/blob/master/LICENSE"},"readme":"

      MS Graph API plugin for NativeScript

      \n

      NOTE: This library is currently being developed and is pre-alpha at this time

      \n

      \"MS

      \n

      Manage Office 365 Users, Groups, Mail, Calendars, Contacts, Files,\nTasks, People, Notes and more — all from a single endpoint

      \n

      Prerequisites

      \n

      You should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.

      \n

      Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:

      \n
        \n
      1. Click the "Add Platform" button and select "Mobile application"
        2. \n
      2. Copy the "Client Id" GUID from the Mobile Application section.
        3. \n
      3. Click "Save" at the bottom.
        4. \n
      \n

      Setup

      \n

      Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-msgraph
      \n

      Usage

      \n

      coming soon

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@akylas/nativescript-gradle":{"name":"@akylas/nativescript-gradle","version":"0.0.3","license":"UNLICENSED","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescriptfilterselectnoclear":{"name":"nativescriptfilterselectnoclear","version":"1.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pyze-nativescript":{"name":"pyze-nativescript","version":"0.0.9","license":"Apache-2.0","readme":"

      Pyze Nativescript

      \n

      Getting started

      \n

      visit https://pyze.com/ for integration help

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ffmpeg-plugin-fixed":{"name":"nativescript-ffmpeg-plugin-fixed","version":"0.1.0","license":"Apache-2.0","readme":"

      NativeScript FFmpeg

      \n

      \"Build\n\"NPM\n\"Downloads\"\n\"Twitter

      \n

      Installation

      \n
      tns plugin add nativescript-ffmpeg-plugin-fixed
      \n

      Usage

      \n
        \n
      1. \n

        Execute commands.

        \n
          \n
        • Use execute() method with a single command line and an argument delimiter
          • \n
        \n
        import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin-fixed';

        FFmpeg.execute('-i file1.mp4 -c:v mpeg4 file2.mp4', ' ').then(result => console.log(\"FFmpeg process exited with result \" + result));
        \n
          \n
        • Use executeWithArguments() method with an array of arguments
          • \n
        \n
        import { LogLevel, FFmpeg } from 'nativescript-ffmpeg-plugin-fixed';

        FFmpeg.executeWithArguments([\"-i\", \"file1.mp4\", \"-c:v\", \"mpeg4\", \"file2.mp4\"]).then(result => console.log(\"FFmpeg process exited with result \" + result));
        \n
        2. \n
      2. \n

        Check execution output. Zero represents successful execution, non-zero values represent failure.

        \n
        FFmpeg.getLastReturnCode().then(result => {
            console.log(\"Last return code: \" + result);
        });

        FFmpeg.getLastCommandOutput().then(result => {
            console.log(\"Last command output: \" + result;
        });
        \n
        3. \n
      3. \n

        Stop an ongoing operation.

        \n
        FFmpeg.cancel();
        \n
        4. \n
      4. \n

        Get media information for a file.

        \n
          \n
        • Print all fields
          • \n
        \n
        FFmpeg.getMediaInformation('<file path or uri>').then(info => {
            console.log('Result: ' + JSON.stringify(info));
        });
        \n
          \n
        • Print selected fields
          • \n
        \n
        FFmpeg.getMediaInformation('<file path or uri>').then(info => {
            console.log('Result: ' + JSON.stringify(info));
            console.log('Media Information');
            console.log('Path: ' + info.path);
            console.log('Format: ' + info.format);
            console.log('Duration: ' + info.duration);
            console.log('Start time: ' + info.startTime);
            console.log('Bitrate: ' + info.bitrate);
            if (info.streams) {
                for (var i = 0; i < info.streams.length; i++) {
                    console.log('Stream id: ' + info.streams[i].index);
                    console.log('Stream type: ' + info.streams[i].type);
                    console.log('Stream codec: ' + info.streams[i].codec);
                    console.log('Stream full codec: ' + info.streams[i].fullCodec);
                    console.log('Stream format: ' + info.streams[i].format);
                    console.log('Stream full format: ' + info.streams[i].fullFormat);
                    console.log('Stream width: ' + info.streams[i].width);
                    console.log('Stream height: ' + info.streams[i].height);
                    console.log('Stream bitrate: ' + info.streams[i].bitrate);
                    console.log('Stream sample rate: ' + info.streams[i].sampleRate);
                    console.log('Stream sample format: ' + info.streams[i].sampleFormat);
                    console.log('Stream channel layout: ' + info.streams[i].channelLayout);
                    console.log('Stream sar: ' + info.streams[i].sampleAspectRatio);
                    console.log('Stream dar: ' + info.streams[i].displayAspectRatio);
                    console.log('Stream average frame rate: ' + info.streams[i].averageFrameRate);
                    console.log('Stream real frame rate: ' + info.streams[i].realFrameRate);
                    console.log('Stream time base: ' + info.streams[i].timeBase);
                    console.log('Stream codec time base: ' + info.streams[i].codecTimeBase);
                }
            }
        });
        \n
        5. \n
      5. \n

        Enable log callback and redirect all FFmpeg logs to a console/file/widget.

        \n
        logCallback = (logData) => {
            console.log(logData.text);
        };
        ...
        FFmpeg.enableLogCallback(logCallback);
        \n
        6. \n
      6. \n

        Enable statistics callback and follow the progress of an ongoing operation.

        \n
        statisticsCallback = (statisticsData) => {
            console.log('Statistics; frame: ' + statisticsData.videoFrameNumber.toFixed(1) + ', fps: ' + statisticsData.videoFps.toFixed(1) + ', quality: ' + statisticsData.videoQuality.toFixed(1) +
            ', size: ' + statisticsData.size + ', time: ' + statisticsData.time);
        };
        ...
        FFmpeg.enableStatisticsCallback(statisticsCallback);
        \n
        7. \n
      7. \n

        Poll statistics without implementing statistics callback.

        \n
        FFmpeg.getLastReceivedStatistics().then(stats => console.log('Stats: ' + JSON.stringify(stats)));
        \n
        8. \n
      8. \n

        Reset statistics before starting a new operation.

        \n
        FFmpeg.resetStatistics();
        \n
        9. \n
      9. \n

        Set log level.

        \n
        FFmpeg.setLogLevel(LogLevel.AV_LOG_WARNING);
        \n
        10. \n
      10. \n

        Register your own fonts by specifying a custom fonts directory, so they are available to use in FFmpeg filters. Please note that this function can not work on relative paths, you need to provide full file system path.

        \n
          \n
        • Without any font name mappings
          • \n
        \n
        FFmpeg.setFontDirectory('<folder with fonts>', null);
        \n
          \n
        • Apply custom font name mappings. This functionality is very useful if your font name includes ' ' (space) characters in it.
          • \n
        \n
        FFmpeg.setFontDirectory('<folder with fonts>', { my_easy_font_name: \"my complex font name\" });
        \n
        11. \n
      11. \n

        Use your own fontconfig configuration.

        \n
        FFmpeg.setFontconfigConfigurationPath('<fontconfig configuration directory>');
        \n
        12. \n
      12. \n

        Disable log functionality of the library. Logs will not be printed to console and log callback will be disabled.

        \n
        FFmpeg.disableLogs();
        \n
        13. \n
      13. \n

        Disable statistics functionality of the library. Statistics callback will be disabled but the last received statistics data will be still available.

        \n
        FFmpeg.disableStatistics();
        \n
        14. \n
      14. \n

        List enabled external libraries.

        \n
        FFmpeg.getExternalLibraries().then(externalLibraries => {
            console.log(externalLibraries);
        });
        \n
        15. \n
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n

      See Also

      \n\n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-hms":{"name":"@nstudio/nativescript-airship-hms","version":"0.0.1","license":"Apache-2.0","readme":"

      @nstudio/nativescript-airship-hms

      \n
      ns plugin add @nstudio/nativescript-airship-hms
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-openid-client":{"name":"angular-openid-client","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-xss":{"name":"nativescript-test-xss","version":"0.0.4","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/template-hello-world-ts-vision":{"name":"@nativescript/template-hello-world-ts-vision","version":"8.6.2","license":"Apache-2.0","readme":"

      NativeScript with TypeScript for visionOS

      \n
      ns run visionos --no-hmr
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"oidc-angular":{"name":"oidc-angular","version":"1.0.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cifrate":{"name":"nativescript-cifrate","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mip-ble":{"name":"nativescript-mip-ble","version":"0.2.5","license":{"type":"MIT","url":"https://github.com/sebawita/nativescript-mip-ble/blob/master/LICENSE"},"readme":"

      NativeScript-mip-ble

      \n

      This plugin is designed to communicate with WowWee MiP robots.\nIt provides the functionality to scan, connect and issue various commands.

      \n

      Install the plugin

      \n

      Call the following command from the root of your project.

      \n
      tns plugin add nativescript-mip-ble
      \n

      Getting started

      \n

      Here is a brief overview of how to use this plugin.\nFor more advanced examples see:\nSimple ng2 demo\nJS Core example\nng2 example

      \n

      Connecting to your MiP

      \n

      Before you take control of your MiP, you need to find it first.\nWe will use BluetoothScanner for this, which will provide us with all available MipDevice objects.

      \n

      Imports

      \n

      Add the following imports to your TypeScript code:

      \n
      import { BluetoothScanner } from \"nativescript-mip-ble/bluetooth.scanner\";
      import { MipDevice } from \"nativescript-mip-ble/mip-device\";
      \n

      Scanning

      \n

      The scan function requires a callback, which is triggered for every ble device found and it returns a callback when the scan is finished.

      \n

      You can call it as follows:

      \n
      var devices: Array<MipDevice> = [];
      var scanner = new BluetoothScanner();

      scanner.scan( (mip) => devices.push(mip))
          .then(() => {
              console.log(\"Finished Scanning\");
          })
      \n

      This will fill in the devices array with all ble devices in the area.

      \n

      Each MipDevice object contains: name, UUID and status, which you could use to display on the screen.

      \n
      \n

      Make sure to enable Bluetooth on your device before trying to scan for devices.

      \n
      \n

      Connecting to a device

      \n

      All you need to do is to grab the MipDevice object you want to connect to and call connect().\nThis function takes a callback function for when the device gets disconnected and it returns a promise when the connection is established.

      \n

      You could call it as follows:

      \n
      var selectedIndex = 0;
      var selectedDevice: MipDevice = devices[selectedIndex];

      selectedDevice.connect( (mip) => {
          console.log(\"disconnected from: \" + mip.name);
      })
      .then(() => {
          console.log(\"connected to: \" + selectedDevice.name);
      })
      \n

      Sending instructions

      \n

      Now that you are connected to your MiP, you should be able to call various instructions to make him move, change the color of the chest LED or make him talk.\nTo do that just use mipController from the MipDevice.

      \n

      Here are a few examples:

      \n
      import { Direction, TurnDirection } from \"nativescript-mip-ble/mip-types\";

      // --- MOVE ----
      var distance = 10;
      //move Fwd 
      selectedDevice.mipController.distanceDrive(Direction.Forward, distance, TurnDirection.Left, 0);

      // move Bwd
      selectedDevice.mipController.distanceDrive(Direction.Backward, distance, TurnDirection.Left, 0);

      // --- TURN ----
      var turnAngle = 45;
      //turn left
      selectedDevice.mipController.turnLeftByAngle(angle / 5, 0);

      //turn Right
      selectedDevice.mipController.turnRightByAngle(angle / 5, 0);

      // --- SOUND ---
      //mute
      selectedDevice.mipController.setVolume(0);

      //set max volume
      selectedDevice.mipController.setVolume(7);

      //make noise
      var soundIndex = 10; // value from 1 - 106
      selectedDevice.mipController.playOneSound(soundIndex, 0, 0);

      // --- LED ---
      //set Led to red
      selectedDevice.mipController.setChestLED(255, 0, 0);
      }
      //set Led to green
      selectedDevice.mipController.setChestLED(0, 255, 0);
      }
      //set Led to blue
      selectedDevice.mipController.setChestLED(0, 0, 255);
      }
      \n

      Continous move

      \n

      The best way to control robots movement is to use the drive function, which instructs the robot to move in a given direction for a short period of 50ms.\nYou need to call this function at intervals of 50ms contiously sending new instructions.

      \n

      A good example is to use the nativescript-accelerometer plugin.

      \n

      Here is the code you need to make it work:

      \n
      import { MipDevice } from \"nativescript-mip-ble/mip-device\";
      import {startAccelerometerUpdates, stopAccelerometerUpdates} from \"nativescript-accelerometer\"

      export class AccelerometerComponent {
          private turnSpeed: number = 0;
          private speed: number = 0;

          private selectedDevice: MipDevice;

          constructor(mip: MipDevice) {
              this.selectedDevice = mip;
          }

          public startAccelerometer() {

              startAccelerometerUpdates( data => {
                  this.turnSpeed = data.x; // lean left (0 to -1) / right (0 to 1)
                  this.speed = data.y; // lean forward (0 to -1) / back (0 to 1)
              } )

              this.startContinousMove();
          }

          public startContinousMove() {
              setInterval( () => {
                  this.selectedDevice.drive(this.speed, this.turnSpeed);
              }, 50);
          }
      }
      \n

      Making changes to the plugin

      \n

      If you want to make changes to the plugin, you need first set up your environment correctly.\nFirst run at the root first, which will let you then use the demo projects.

      \n
      tns install
      \n

      To rebuild the plugin for the JavaScript core demo project

      \n
      npm run preparedemo
      \n

      To rebuild the plugin for the angular demo-ng project

      \n
      npm run preparedemo-ng
      \n

      To run the demo project:

      \n
      cd demo

      tns platform add android
      tns run android

      and/or

      tns platform add ios
      tns platform run ios
      \n

      To run the demo-ng project:

      \n
      cd demo-ng

      tns platform add android
      tns run android

      and/or

      tns platform add ios
      tns platform run ios
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-na-library":{"name":"nativescript-na-library","version":"0.2.0","license":"MIT","readme":"

      NativeScript NA Library plugin

      \n

      NOTE! Android is currently not supported.

      \n

      A NativeScript library plugin that utilizes PHPhotoLibrary for iOS.

      \n

      Installation

      \n

      Prerequisites: TNS 2.4.0+

      \n

      $ tns plugin add nativescript-na-library

      \n

      Usage

      \n

      Soon...

      \n

      Known issues

      \n
        \n
      • No Android compatibility, yet.
        • \n
      \n

      To-do list

      \n

      Please post an issue if you have any other ideas!

      \n

      History

      \n

      Version 0.1.0 (November 30, 2016)

      \n
        \n
      • First release!
        • \n
      \n

      Credits

      \n\n

      License

      \n

      MIT - for {N} version 2.4.0+

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@codelab/nativescript-cast":{"name":"@codelab/nativescript-cast","version":"0.4.1","license":"Apache-2.0","readme":"

      nativescript-cast

      \n

      Chromecast support for NativeScript 7+.

      \n

      Requirements

      \n

      You must have a valid Chromecast Application ID. You can obtain one at the Google Cast Developer Console.

      \n

      Installation

      \n

      Note: Since NativeScript 7, the package name is now @codelab/nativescript-cast.

      \n
      # NativeScript 7
      ns plugin add @codelab/nativescript-cast

      # Nativescript 6
      tns plugin add nativescript-cast@0.3.0

      # NativeScript 5
      tns plugin add nativescript-cast@0.1.2
      \n

      Usage

      \n

      Android

      \n

      Set your Application ID.

      \n
      <!-- App_Resources/Android/src/main/res/values/strings.xml -->
      <string name=\"app_id\">4F8B3483</string>
      \n

      The Google Cast design checklist requires a sender app to provide an expanded controller. Include ExpandedControllerActivity in your AndroidManifest.xml.

      \n
      <!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
      <activity
        android:name=\"com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity\"
        android:label=\"@string/app_name\"
        android:launchMode=\"singleTask\"
        android:screenOrientation=\"portrait\">
        <intent-filter>
          <action android:name=\"android.intent.action.MAIN\"/>
        </intent-filter>
        <meta-data
          android:name=\"android.support.PARENT_ACTIVITY\"
          android:value=\"com.tns.NativeScriptActivity\"/>
      </activity>
      \n

      If you are using Webpack, you will need to include '@codelab/nativescript-cast/cast-options-provider' in appComponents.

      \n

      To do this, create a custom webpack configuration. See the demo for an example.

      \n
      \n

      iOS

      \n

      Set your Application ID.

      \n
      <!-- App_Resources/iOS/Info.plist -->
      <key>AppID</key>
      <string>4F8B3483</string>
      \n

      You'll need to set up a delegate to initialise the GCKCastContext with your AppID. See the demo for an example.

      \n
      import { Application } from '@nativescript/core';

      if (global.isIOS) {
        @NativeClass()
        class MyDelegate extends UIResponder implements UIApplicationDelegate {
          public static ObjCProtocols = [UIApplicationDelegate, GCKLoggerDelegate];

          applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {
            const appId = NSBundle.mainBundle.objectForInfoDictionaryKey('AppID');
            const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
            GCKCastContext.setSharedInstanceWithOptions(castOptions);

            // Optional logger
            const delegate: MyLoggerDelegateImpl = MyLoggerDelegateImpl.new();
            GCKLogger.sharedInstance().delegate = delegate;

            return true;
          }
        }

        Application.ios.delegate = MyDelegate;
      }
      \n

      ⚠️ iOS 12+ & Xcode 10 ⚠️

      \n

      If developing using Xcode 10 and targeting iOS devices running iOS 12 or higher, the "Access WiFi Information" capability is required in order to discover and connect to Cast devices. The plugin comes with an app.entitlements which will add this capability to the workspace, however, you must also Add the Access WiFi information feature to your App ID .

      \n

      See iOS sender setup for more info.

      \n

      ⚠️ iOS 13+ & Guest Mode ⚠️

      \n

      iOS 13+ requires Bluetooth and Microphone permissions in order to use Guest Mode with Chromecast. This plugin sets these permissions in the Info.plist file.

      \n

      See iOS Guest Mode for more info.

      \n

      ⚠️ iOS 14+ ⚠️

      \n

      iOS 14+ has some permission changes. See iOS Permission Changes for more info.

      \n

      Be sure to set NSBonjourServices with your AppID as explained in the documentation above. See the demo for an example.

      \n
      \n

      Place CastButton in to your view.

      \n

      NativeScript

      \n
      <Page
        xmlns=\"http://schemas.nativescript.org/tns.xsd\"
        loaded=\"pageLoaded\"
        class=\"page\"
        xmlns:cast=\"@codelab/nativescript-cast\"
      >
        <ActionBar title=\"App Name\">
          <ActionItem ios.position=\"right\">
            <StackLayout>
              <cast:CastButton cast=\"{{ handleCastEvent }}\" />
            </StackLayout>
          </ActionItem>
        </ActionBar>
        <!-- ... -->
      </Page>
      \n

      Angular

      \n

      Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

      \n
      import { NativescriptCastModule } from '\"@codelab/nativescript-cast/angular';

      @NgModule({
        imports: [
          NativescriptCastModule
        ]
      });
      \n

      Include in your template.

      \n
      <ActionBar [title]=\"App Name\" >
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <CastButton (cast)=\"handleCastEvent($event)\"></CastButton>
          </StackLayout>
        </ActionItem>
      </ActionBar>
      \n

      Vue

      \n

      Register the element in your app's main entry point, typically main.ts.

      \n
      Vue.registerElement('CastButton', () => require('n\"@codelab/ativescript-cast').CastButton);
      \n

      Include in your template.

      \n
      <ActionBar title=\"App Name\">
        <ActionItem ios.position=\"right\">
          <StackLayout>
            <CastButton @cast=\"handleCastEvent\" />
          </StackLayout>
        </ActionItem>
      </ActionBar>
      \n

      Event handler

      \n

      Set up an event handler for all cast events. The cast instance is available on args.object.

      \n
      handleCastEvent(args): void {
        console.log('cast: ' + args.object);
        console.log('eventName: ' + args.data.eventName);
      }
      \n

      Casting

      \n

      When the Cast receiver is ready, you can load your media.

      \n
      const mediaInfo = {
        contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
        contentType: 'video/mp4',
        streamType: 'BUFFERED',
        duration: undefined,
        metadata: {
          metadataType: 'MOVIE',
          title: 'Tears of Steel',
          subtitle: 'By Blender Foundation',
          description: 'Sintel is an independently produced short film, initiated by the Blender Foundation.',
          images: [
            {
              url: 'http://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
              width: 480,
              height: 270,
            }
          ]
        },
        textTracks: [
          {
            src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
            contentType: 'text/vtt',
            name: 'English',
            language: 'en'
          },
          {
            src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
            contentType: 'text/vtt',
            name: 'Spanish',
            language: 'es'
          }
        ],
        textTrackStyle: {
          foregroundColor: '#0000cc',
          backgroundColor: '#00cc00',
        },
        customData: {
          anything: 'you like'
        }
      };

      cast.loadMedia(mediaInfo);
      \n

      API

      \n

      Events

      \n

      Event names follow the Android naming structure.\niOS events are passed from GCKSessionManagerListener, GCKRemoteMediaClientListener and GCKMediaQueueDelegate.\nAndroid events are passed from SessionManagerListener, MediaRouter.Callback and MediaQueue.Callback.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      NativeScriptAndroidiOS
      onSessionEndedonSessionEndeddidEndSession
      onSessionEndingonSessionEndingwillEndSession
      onSessionResumedonSessionResumeddidResumeSession
      onSessionResumingonSessionResumingwillResumeSession
      onSessionStartedonSessionStarteddidStartSession
      onSessionStartFailedonSessionStartFaileddidFailToStartSession
      onSessionStartingonSessionStartingwillStartSession
      onSessionSuspendedonSessionSuspendeddidSuspendSession
      onDeviceVolumeChangedonRouteVolumeChangeddidReceiveDeviceVolume
      onDeviceChangedonRouteChangeddidUpdateDevice
      onMediaStatusChangedonStatusUpdatedremoteMediaClientDidUpdateMediaStatus
      mediaQueueWillChangemediaQueueWillChangemediaQueueWillChange
      itemsReloadeditemsReloadedmediaQueueDidReloadItems
      itemsInsertedInRangeitemsInsertedInRangedidInsertItemsInRange
      itemsUpdatedAtIndexesitemsUpdatedAtIndexesdidUpdateItemsAtIndexes
      itemsRemovedAtIndexesitemsRemovedAtIndexesdidRemoveItemsAtIndexes
      mediaQueueChangedmediaQueueChangedmediaQueueDidChange
      \n

      All unlisted events are ignored. See related documentation for futher details.

      \n

      Android

      \n\n

      iOS

      \n\n

      Methods

      \n

      See cast.types for method options.

      \n
        \n
      • \n

        loadMedia(media: CastMediaInfo, options?: LoadMediaOptions): void

        \n

        Loads the specified media.

        \n
        • \n
      • \n

        loadQueue(options: LoadQueueOptions): void

        \n

        Loads a queue of media items.

        \n
        • \n
      • \n

        playMedia(customData? any): void

        \n

        Plays the loaded media.

        \n
        • \n
      • \n

        pauseMedia(customData? any): void

        \n

        Pauses the loaded media.

        \n
        • \n
      • \n

        seekMedia(position: number, resumeState?: ResumeState , customData?: any): void

        \n

        Seeks the loaded media to position (seconds).

        \n
        • \n
      • \n

        stopMedia(customData? any): void

        \n

        Stops the loaded media.

        \n
        • \n
      • \n

        showController(): void

        \n

        Show the expanded controller.

        \n
        • \n
      • \n

        showCastInstructions(title: string, singleTime: boolean): void

        \n

        Shows the Cast instructions overlay. title and singleTime arguments are Android-only.

        \n
        • \n
      • \n

        showCastDialog(): void

        \n

        Show the Cast destination dialog.

        \n
        • \n
      • \n

        getMediaInfo(): CastMediaInfo

        \n

        Returns the loaded media info.

        \n
        • \n
      • \n

        setActiveTrackIds([trackIds]): void

        \n

        Pass an array of IDs defined in textTracks to show subtitles. Pass an empty array to hide.

        \n
        • \n
      • \n

        queueNextItem(): void

        \n

        Play the next item in the queue.

        \n
        • \n
      • \n

        queuePreviousItem(): void

        \n

        Play the previous item in the queue.

        \n
        • \n
      • \n

        queueSetRepeatMode(repeatMode: RepeatMode): void

        \n

        Set the queue repeat mode.

        \n
        • \n
      • \n

        queueInsertItem(options: QueueInsertItemOptions): void

        \n

        Insert a single queue item.

        \n
        • \n
      • \n

        queueInsertItems(options: QueueInsertItemsOptions): void

        \n

        Insert multiple queue items.

        \n
        • \n
      • \n

        queueRemoveItems(itemIDs: number[], customData?: any): void

        \n

        Remove queue items by ID.

        \n
        • \n
      • \n

        queueReorderItems(itemIDs: number[], beforeItemID: number, customData?: any): void

        \n

        Reorder queue items by ID.

        \n
        • \n
      • \n

        queueJumpToItem(itemID: number, playPosition?: number, customData? any): void

        \n

        Jump to queue item by ID.

        \n
        • \n
      \n

      TODO

      \n\n

      Acknowledgements

      \n
        \n
      • CodeLab - Current employer. Developed this plugin whilst learning NativeScript.
        • \n
      • loop.tv - Financed the development of Queue Support.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"groceries-angular-service":{"name":"groceries-angular-service","version":"0.1.0","license":"ISC","readme":"

      groceries-angular-service

      \n

      Setup

      \n

      In order to make the service work you need to add an HttpModule to your @NgModule imports.

      \n

      For NativeScript use NativeScriptHttpModule

      \n
      import { NativeScriptHttpModule } from \"nativescript-angular/http\";
      \n
      @NgModule({
        ...
        imports: [
          ...
          NativeScriptHttpModule
        ],
      \n

      For Web use HttpModule

      \n
      import { HttpModule } from '@angular/http';
      \n
      @NgModule({
        ...
        imports: [
          ...
          NativeScriptHttpModule
        ],
      \n

      Adding to providers

      \n

      To provide the GroceryListService and UserService services, just import them from groceries-angular-service and add them to the @NgModule providers:

      \n
      import { GroceryListService, UserService } from 'groceries-angular-service';

      @NgModule({
        ...
        providers: [
          ...
          GroceryListService,
          UserService
        ],
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cast-ns6-beta":{"name":"nativescript-cast-ns6-beta","version":"0.1.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-airship-adm":{"name":"@nstudio/nativescript-airship-adm","version":"0.0.1","license":"Apache-2.0","readme":"

      @nstudio/nativescript-airship-adm

      \n
      ns plugin add @nstudio/nativescript-airship-adm
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ssi-i18n":{"name":"nativescript-ssi-i18n","version":"1.0.9","license":"MIT","readme":"

      nativescript-i18n

      \n

      This is a plugin for Nativescript that implements i18n in an easy manner.

      \n

      It uses the native capabilities of each platform without the need of a separate JS or JSON file.

      \n

      It is heavily inspired from NativeLang and this thread

      \n

      The plugin defines an L() method at the application level so it will be accessible both from the XML and JS files.

      \n

      Please don't forget to read the IMPORTANT section! :smile:

      \n

      Credits

      \n
      \n

      Most thanks goes out to Dan Tamas (@rborn) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.

      \n
      \n

      Thanks to @TheBrousse and @ValioStoychev for the help with iOS and @alejonext for creating the initial module.

      \n

      Also a big thanks to all the contributors that made this repo better :)

      \n

      Usage

      \n

      Install the plugin in your app

      \n
      npm install --save nativescript-i18n
      \n

      Create a folder i18n in the app folder with the following structure:

      \n
      App_Resources
      i18n
        |
        |-- en
        |\t\t|- strings.xml
        |
        |-- es
        \t\t|- strings.xml
      \n

      Require nativescript-i18n and globals in app.js as early as possible (I do it even before I require the application module, the very first 2 lines).

      \n
      \trequire('globals');
      \trequire('nativescript-i18n');
      \n

      If you use TypeScript and want to use L() in the code you will need to cast the global var to any like belowin the file you intend to use L(). You can read more about this in https://github.com/rborn/nativescript-i18n/issues/57

      \n
      \tdeclare var global:any;
      \n

      And in the code use it like this:

      \n

      XML files

      \n

      Simple string

      \n
      \t<Label text=\"{{ L('hello') }}\">
      \n

      It supports one or multiple replacements, directly or from the model

      \n
      \t<Label text=\"{{ L('hello') }}\" class=\"title\" textWrap=\"true\" />
      \t<Label text=\"{{ L('hello_replace','my friend') }}\" class=\"message\" textWrap=\"true\" />
      \t<Label text title=\"{{ L('multi_replace','direct replacement', modelReplacement) }}\">
      \n

      Assuming you have defined in strings.xml the definitions and in the model the replacement modelReplacement variable

      \n
      \t<string name=\"hello\">Hello!</string>
      \t<string formatted=\"false\" name=\"hello_replace\">Hello %s!</string>
      \t<string formatted=\"false\" name=\"multi_replace\">We can replace directly in xml: %s or from the model: %s</string>
      \n

      To define a custom path for the i18n files (other than App_Resources/i18n), add this configuration to your project's package.json

      \n
      \"nativescript-i18n\": {
          \"customLangPath\": \"app/resources/i18n\"
      }
      \n

      Language defaults to english if the phone's language doesn't match any of your defined languages. If you want to set your own default language, add this configuration to your project's package.json

      \n

      Keep in mind that on iOS the language picked by the device will be based on the order in Settings -> Language & Region -> Preferred language order

      \n
      \"nativescript-i18n\": {
          \"defaultLang\": \"es\"
      }
      \n

      IMPORTANT

      \n
        \n
      • \n

        for all the strings definitions that have a replacement you need to add formatted=false

        \n
        • \n
      • \n

        quotes and apostrophes need to be escaped <string name="with_quotes">Apostrophe: \\' and quotes: \\"</string>

        \n
        • \n
      • \n

        % signs need to be escaped by setting formatted="false" and then doubling them up: <string formatted="false" name="percent"> Percent Sign: %%</string>

        \n
        • \n
      • \n

        We need to add in strings.xml the next two lines for the app to compile properly which also makes the app name localized on both ios and android and sets the title of the initial activity on android

        \n
        <string name=\"app_name\">demo</string>
        <string name=\"title_activity_kimera\">demo</string>
        \n
        • \n
      • \n

        Sometimes you might need to fully delete the app from the device/sim for the plugin to fully work (usually only when the plugin is installed at a later stage of the project development)

        \n
        • \n
      • \n

        If you get TypeScript complaining about L not being defined, then put /// <reference path="./node_modules/nativescript-i18n/references.d.ts" /> Nativescript i18n in your references.d.ts.

        \n
        • \n
      \n

      JS files

      \n
      \tconsole.log(L('home'));
      \tconsole.log(L('multi_replace', 'ONE', 'TWO'));
      \n

      Angular

      \n

      In case you use Angular for your app, things get a little more complicated.

      \n

      My Angular skills are zero but @alejonext has a solution for it in this comment.

      \n

      Update 28.06.2016

      \n

      @AirMike and @loloof64 did a great job by testing and further improving @alejonext's PR so the plugin includes now support for Angular :bow:

      \n

      After you import the plugin in the app in the usual way just need to import the module NativeScriptI18nModule from nativescript-i18n/angular in your file (main.ts)

      \n

      (Please be aware that the below intructions are in typescript not pure js)

      \n
      \timport { NativeScriptI18nModule } from \"nativescript-i18n/angular\";
      \n

      and then import it in your app module

      \n
      \t@NgModule({


            imports: [
              NativeScriptI18nModule
            ]


          })
          export class AppModule { }
      \n

      Angular usage is {{ value | L:args }}

      \n
      \t<Button text=\"{{ 'Login' | L }}\"></Button>
      \n

      As for a more detailed example :

      \n

      You can put a code like this in your main.ts :

      \n
          import { NativeScriptI18nModule } from 'nativescript-i18n/angular';

          import { NativeScriptModule } from \"nativescript-angular/platform\";
          import { NgModule } from \"@angular/core\";
          import { AppComponent } from \"./app.component\";


          @NgModule({

            imports: [
              NativeScriptModule,
              NativeScriptI18nModule
            ],

            declarations: [
              AppComponent,
            ],
            bootstrap: [AppComponent]
          })
          export class AppModule { }
      \n

      For the main component, let's say that the following html template is used (the strings definitions follow next):

      \n
          <GridLayout rows=\"*,*,*\">
              <label row=\"0\" text=\"{{'menuitem_new_file' | L }}\"></label>
              <label row=\"1\" text=\"{{'menuitem_new_folder' | L }}\"></label>
              <label row=\"2\" text=\"{{'menuitem_new' | L:'---':'***':124.25693 }}\"></label>
          </GridLayout>
      \n

      And let's say that these are the string definitions for "en" (put in app/i18n/en/strings.xml)

      \n
          <resources>
              <string name=\"app_name\">Chess Exercices Cupboard</string>
              <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

              <string formatted=\"false\" name=\"menuitem_new\">%s New... %s %0.2f</string>
              <string name=\"menuitem_new_file\">File</string>
              <string name=\"menuitem_new_folder\">Folder</string>
          </resources>
      \n

      And the french translations (put in app/i18n/fr/srings.xml)

      \n
          <resources>
              <string name=\"app_name\">Chess Exercices Cupboard</string>
              <string name=\"title_activity_kimera\">Chess Exercices Cupboard</string>

              <string formatted=\"false\" name=\"menuitem_new\">%s Nouveau... %s %0.2f</string>
              <string name=\"menuitem_new_file\">Fichier</string>
              <string name=\"menuitem_new_folder\">Dossier</string>
          </resources>
      \n

      Then if your phone is configured for french you'll see something like this :

      \n
          Fichier
          Dossier
          --- Nouveau... *** 124.25693
      \n

      Or, if configured for english or "unrecognized" language :

      \n
          File
          Folder
          --- New... *** 124.25693
      \n

      Demo

      \n

      Please have a look in the demo folder for a working example.

      \n

      iOS Permission text

      \n

      Add this special keys to app/i18n/(lang)/strings.xml used to notify user, in configured language while showing permission alerts.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      KeyDescription of key
      NSAppleMusicUsageDescriptionSpecifies the reason for your app to use the media library
      NSBluetoothPeripheralUsageDescriptionSpecifies the reason for your app to use Bluetooth
      NSCalendarsUsageDescriptionSpecifies the reason for your app to access the user’s calendars
      NSCameraUsageDescriptionSpecifies the reason for your app to access the device’s camera
      NSContactsUsageDescriptionSpecifies the reason for your app to access the user’s contacts
      NSHealthShareUsageDescriptionSpecifies the reason for your app to read the user’s health data
      NSHealthUpdateUsageDescriptionSpecifies the reason for your app to make changes to the user’s health data
      NSHomeKitUsageDescriptionSpecifies the reason for your app to access the user’s HomeKit configuration data
      NSLocationAlwaysUsageDescriptionSpecifies the reason for your app to access the user’s location information at all times
      NSLocationWhenInUseUsageDescriptionSpecifies the reason for your app to access the user’s location information while your app is in use
      NSMicrophoneUsageDescriptionSpecifies the reason for your app to access any of the device’s microphones
      NSMotionUsageDescriptionSpecifies the reason for your app to access the device’s accelerometer
      NSPhotoLibraryUsageDescriptionSpecifies the reason for your app to access the user’s photo library
      NSRemindersUsageDescriptionSpecifies the reason for your app to access the user’s reminders
      NSSiriUsageDescriptionSpecifies the reason for your app to send user data to Siri
      NSSpeechRecognitionUsageDescriptionSpecifies the reason for your app to send user data to Apple’s speech recognition servers
      \n

      (Pseudo) roadmap/ideas

      \n

      The following ideas are inspired by this comment and issues posted by the users of this plugin

      \n
        \n
      • [x] Android implementation - use the native strings.xml in App_Resources/Android/values/
        • \n
      • [x] iOS implementation - use the native Localizable.strings files (where do we need to put this files?)
        • \n
      • [x] Allow formatted strings, eg: L('hello', 'world') to translate the definition hello %s (and/or other other types %d, etc)
        • \n
      • [ ] Possibly a cli tool/command to extract strings from our language function uses and put them into our strings.xml to be translated
        • \n
      • [x] Move the strings.xml files in app/i18n (exact folder structure to be decided) and use them as a base for the next points\n
          \n
        • [x] Build a hook to move the files in the right place before compiling for Android
          • \n
        • [x] Build a hook to translate and move the files in the right place before compiling for iOS
          • \n
        \n
        • \n
      • [ ] What about assets (images/splash screens/etc) ? might be out of scope of this plugin
        • \n
      • [x] What about the app name?
        • \n
      • [ ] Do we need a cache at the module level so we don't have to cross the native bridge everytime? (a benchmark should be done to decide this)
        • \n
      • [x] Make the cache aware of the current language and language change
        • \n
      • [x] Angular support
        • \n
      • [x] Custom path for the language files (#28)
        • \n
      • [x] Set default language for app (#11)
        • \n
      • [x] Show translations on app permission alerts on iOS (#45)
        • \n
      • [ ] Report errors on case some files could not be created
        • \n
      • [ ] Webpack support (#49, #42)
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"i18nh":{"name":"i18nh","version":"0.0.5","license":"MIT","readme":"

      Install

      \n

      Support

      \n
        \n
      • [x] NodeJS
        • \n
      • [x] React
        • \n
      • [x] NextJS
        • \n
      • [x] Create React App 1.0
        • \n
      • [x] Create React App 2.0
        • \n
      • [x] React Native
        • \n
      • [x] PhoneGap / Cordova
        • \n
      • [x] Angular
        • \n
      • [x] Vue
        • \n
      • [x] NativeScript
        • \n
      \n

      NPM

      \n
      npm install i18nh --save
      \n

      YARN

      \n
      yarn add i18nh
      \n

      Use

      \n

      To use it is simple just look at the steps below

      \n
      import i18nh, { useT } from 'i18nh'

      // Create a language object containing the 
      // translations as in the example below
      const languages = {
          en: {
              hello: 'Hello',
              about: 'About',
              goodMorning: 'Good Morning',
          },
          pt: {
              hello: 'Olá',
              about: 'Sobre',
              goodMorning: 'Bom Dia',
          },
      }

      // i18nh load the language object containing 
      // the translations and also the default language argument
      i18nh({
          languages, 
          defaultLanguage: 'en'
      });

      const [t] = useT();

      console.log(t('hello')) 
      // Hello
      console.log(t('about')) 
      // About
      console.log(t('goodMorning')) 
      // Good Morning

      console.log(t('hello', 'pt')) 
      // Olá
      console.log(t('about', 'pt')) 
      // Sobre
      console.log(t('goodMorning', 'pt')) 
      // Bom Dia
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@zalastax/nolb-nativescript-":{"name":"@zalastax/nolb-nativescript-","version":"2023.1.24","license":"","readme":"","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"wevue-native":{"name":"wevue-native","version":"1.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vulksoft/nativescript-firebase-env":{"name":"@vulksoft/nativescript-firebase-env","version":"0.0.6","license":"Apache-2.0","readme":"

      Nativescript Firebase Env

      \n

      Separate environment for nativescript-firebase

      \n

      Setup

      \n

      For iOS you can put your GoogleService-Info.plist.dev and GoogleService-Info.plist.prod at your project root.\nFor Android you can put your google-services.json.dev and google-services.json.prod at your project root.

      \n

      Build

      \n

      The build hooks of this plugin will now choose either the dev or the prod version of your google services plist and json files depending on how you run your build:

      \n
        \n
      • dev will be selected if you run without --env.production.
        • \n
      • prod will be selected if you run with --env.production.
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@res0/nativescript-oauth2":{"name":"@res0/nativescript-oauth2","version":"3.0.8","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-aws":{"name":"nativescript-aws","version":"1.0.0","license":"MIT","readme":"

      NativeScript AWS plugin

      \n
      \n

      Never check in your AWS keys! Bots scan public repos and will create server instances you'll get billed for.

      \n
      \n

      Q & A

      \n

      Q. Why this module and not use the AWS JS SDK directly?

      \n

      A. Because you can't due to dependencies on Node and/or the browser (crypto, path, DOMParser, etc). Both of which are not available in a NativeScript context.

      \n

      Q. So is this plugin not using the AWS JS SDK then?

      \n

      A. Oh yes it is but upon installation the plugin will modify a few bits in the AWS SDK so it's NativeScript-compatible.

      \n

      Q. Lol. Wut? Modify AWS?

      \n

      A. The main trick here is a postinstall hook that scans the aws-sdk module for package.json files,\nlooks for browser configuration nodes, and find-replaces any matching require() calls in that package and its dependencies.

      \n

      Q. But doesn't browserify / Webpack solve this for us?

      \n

      A. Not in this case, at least not without further modifications. Feel free to submit a PR for a nicer implementation, but this is the best I could think of.

      \n

      Q. Not bad actually, can we use this approach for other npm modules that depend on node built-ins?

      \n

      A. Thanks. And good point. Most of this should apply to more generic usages so expect me to release some universal plugin this one will depend on.

      \n

      Installation

      \n

      From the command prompt go to your app's root folder and execute:

      \n
      tns plugin add nativescript-aws
      \n

      Make sure you use TypeScript (as our demo app does), because this plugin exposes the AWS SDK's\nTypeScript definitions so you'll have an easier time interacting with Amazon's services.

      \n

      Demo app

      \n

      Really, check the demo! It shows how to interact with S3 and Dynamo,\nbut you should be able to interact with all other AWS services as well.

      \n

      Run the demo app from the root of the project: npm run demo.ios or npm run demo.android.

      \n

      iOS & Android screenshots

      \n\n\n

      API

      \n

      100% equal to the aws-sdk module. Look at their docs and use TypeScript to make your life easier.

      \n

      Disclaimer

      \n

      I've tried to iron out all compatibility issues between AWS and NativeScript,\nbut you may use some service that throws an error at runtime because it's require-ing some\nunsupported node module. Please open an issue in that case and I'll take a look!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"easy-suite-native":{"name":"easy-suite-native","version":"0.1.11","license":"ISC","readme":"

      Easy-Suite for Material Design for Angular (and later ionic)

      \n

      This is the home for Easy-Suite. Built for Angular using Material Design.

      \n

      Component abstraction to allow easy dynamic pages. Build pages from component or in HTML.

      \n

      Installation

      \n

      The latest release of Easy-Suite can be installed from npm

      \n

      npm install --save easy-suite

      \n

      Project status

      \n

      Easy Suite is currently in beta and under active development.\nDuring beta, new features will be added regularly and APIs will evolve based on user feedback.

      \n

      Feature status:

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      FeatureStatus
      cardsAvailable
      tabsAvailable
      buttonAvailable
      checkboxAvailable
      checkbox-groupAvailable
      radioAvailable
      inputAvailable
      selectAvailable
      selectKeyValueAvailable
      autocompleteAvailable
      datepickerAvailable
      data-tableAvailable
      \n

      "Available" means that the components or feature is published and available for use, but may still\nbe missing some behaviors or polish.

      \n

      Getting started

      \n

      Step 1: Install Easy Suite

      \n
      npm install --save easy-suite
      \n

      Step 2: Import the component modules

      \n

      Import the NgModule:

      \n
      import {EasyModule} from 'easy-suite';

      @NgModule({
        ...
        imports: [EasyModule],
        ...
      })
      \n

      Step 3: Hello World

      \n

      import { Component} from '@angular/core';
      import { EasyForm, EasyFormService, EasyField, EasyNotification, Colors, ButtonTypes } from 'easy-suite';

      @Component({
        selector: 'hello-world',
        template: '<easy-form [form]=\"form\"></easy-form>'
      })

      export class HelloWorldComponent {

        form: EasyForm;

        constructor(public easyFormService: EasyFormService) { 
        \tthis.form = this.easyFormService.createForm();
        \tthis.buildForm();
        } 

        buildForm() {
          let container = this.form.addCardContainer(\"Hello World Title\");

          container.addInputField('helloWorldInput', 'Hello World');

          container.addButtonField('Save', () => this.save(), { key:\"1\", color: Colors.color_primary, type: ButtonTypes.button_fab, icon: 'done' });

          let tabs = this.form.addTabContainer(\"Tab 1\");

          let tab1 = tabs.container;
          tab1.addInputField(\"Input 1\");

          let tab2 = tabs.tabs.addTabToTabContainer(\"Tab 2\");
          tab2.addInputField(\"Input 2\");
        }

        save() {
          let fields = this.form.fields;

          let text = fields.filter(x => x.key == \"helloWorldInput\")[0].value;

          alert('Saving ' + text)
          }

      }
      \n

      ###Validation\nAt runtime field names are validated to ensure only one key is added to the collection.

      \n

      One of these exceptions can be thrown

      \n
      FieldWithSameKeyAlreadyExistsException 
      FieldWithKeyDoesNotExistException
      MultipleFieldsWithSameKeyExistException
      \n

      ###More Methods

      \n

      ####Containers :

      \n

      form.addTabContainer(header: string, options: FieldOptions = {})
      form.addCardContainer(header: string, options: FieldOptions = {})
      form.addModalContainer(header: string, options: FieldOptions = {})
      \n

      ####Fields:

      \n
      container.addInputField(label: string, options: FieldOptions = {})
      container.addAutocompleteField(label: string, options: Array<KeyValue>)
      container.addAutocompleteKeyValueField(label: string, options: Array<KeyValue>)
      container.addCheckBoxField(label: string)
      container.addSelectField(label: string, items: Array<string>
      container.addSelectKeyValueField(label: string, items: Array<string>)
      container.addButtonField(label: string, action: Function, options: FieldOptions = {})
      container.addDatePickerField(label: string)
      container.addRadioButtonField(label: string)
      container.addCheckboxGroupField(label: string,items:[\"AA\",\"AB\"],{value:[\"AA\"]})
      container.addTableField<T>(key: string)
      \n

      ####Floating Action Buttons (FABS):

      \n
      this.form = this.easyFormService.createForm();
      this.form.addAction(\"Save\", () => this.save(), { icon: Icons.icon_done, color: Colors.color_primary });
      this.form.addAction(\"Back\", () => this.back(), { icon: Icons.icon_arrow_back, color: Colors.color_warn });
      \n

      ####Modal:

      \n

      constructor( private easyModal: EasyModalService) {  }

      let modal = form.addModalContainer(header: string, options: FieldOptions = {})
      modal.addInputField(\"Test\");
      modal.addAction(\"Save\", () => alert('save'));
      this.easyModal.showModal(modal);
      \n

      ####FieldOptions:

      \n
      export class FieldOptions<T> {
          color?: string
          icon?: string
          type?: string
          format?: string
          showLoader?: boolean
          columnSpan?: number
          value?: T
          key?: string
          label?: string
          required?: boolean
          order?: number
          controlType?: string
          action?: Function
          items?: Array<any>
          xsColumnSize?: string
          smColumnSize?: string
          mdColumnSize?: string
          lgColumnSize?: string
          xlColumnSize?: string
          hide?: boolean;
          maxLength?: number;
          validators?: Validator[]
          updateAction?: Function;
          onEnter?:Function;
      }
      \n

      Available static types

      \n
      Icons, InputTypes, ButtonTypes, Colors, DateFormats

      Usage : 

      import { ButtonTypes, Icons, Colors, InputTypes } from 'easy-suite';

      tab.addInputField('Test Input', { type: InputTypes.input_type_password });
      \n

      Step 4: Events

      \n

      OnChange

      \n

      All fields expose a subscription property which can be subscribed to for field changes.\nUse this when fields are dependent on one another or you just need to know when something changes.

      \n

      Example :

      \n
      let field = container.addInputField('Hello World');

      field.onChange.subscribe(x=>{
      \talert(x.value);
      });
      \n

      OnEnter

      \n

      Example :

      \n
      let field = container.addInputField('Hello World',{onEnter:()=>alert('Enter Pressed')});
      \n

      Step 5 : Handling results

      \n

      To auto map a dto to the fields collection use the mapFields method on EasyForm\nNB!!! Ensure the properties on the dto have been assigned values otherwise the properties aren't accessible to TypeScript

      \n
      export class TestDto {
        name: string = ''; //Default value assigned.
      }

       this.form.mapFields<TestDto>(this.testDto);
      \n

      To bind updates directly to a dto use the updateAction Function in the field options

      \n
       container.addInputField('Hello World', {updateAction:(field:EasyField) => foo = field.value;});
      \n

      The Form object exposes a fields array. As fields are upated this KeyValue Array is also updated.

      \n
       let fields = this.form.fields;

       this.field = fields.filter(x => x.key == \"helloWorldInput\")[0].value;
      \n

      Step 7 Component Validators.

      \n

      Import EasyValidator

      \n
      import { EasyValidator } from 'easy-suite';
      \n

      Add validators to field

      \n
      container.addInputField('Hello World', {validators: [EasyValidator.Required(\"Message to display\")]});
      \n

      Available validators

      \n
      EasyValidator.Required(\"Message to display\")
      EasyValidator.MinLength(5,\"Message to display\")
      EasyValidator.MaxLength(5,\"Message to display\")
      EasyValidator.Pattern(\"some regex\",\"Message to display\")
      \n

      Prebuilt validators

      \n
      EasyValidator.Email(\"Optional Message\")
      EasyValidator.IdentityNumber(\"Optional Message\")
      EasyValidator.TelephoneNumber(\"Optional Message\")
      \n

      Checking field validation state before submitting form

      \n
      let validationResult = this.form.validateForm();
      \n

      This will return a valid flag and an array of invalid fields. Invalid fields will also be highlighted on the webpage.

      \n

      Step 7 (Optional): Usage as component directives.

      \n
        <easy-checkbox [placeholder]=\"field.label\" [(value)]=\"field.value\"></easy-checkbox>

        <easy-input [placeholder]=\"field.label\" [(value)]=\"field.value\" (change)=\"valueChanged()\"></easy-input>

        <easy-select [placeholder]=\"field.label\" [(selectedValue)]=\"field.value\" [items]=\"field.items\" (selectedValueChange)=\"valueChanged()\"></easy-select>

        <easy-select-key-value [placeholder]=\"field.label\" [(selectedValue)]=\"field.value\" [items]=\"field.items\" (selectedValueChange)=\"valueChanged()\"></easy-select-key-value>

        <easy-autocomplete [placeholder]=\"field.label\" [items]=\"field.options\"></easy-autocomplete>

        <easy-button [color]=\"field.color\" [icon]=\"field.icon\" [type]=\"field.type\" [displayValue]=\"field.label\" [showLoader]=\"field.showLoader\" (onClicked)=\"executeAction(field.action)\"></easy-button>

        <easy-table [rows]=\"field.rows\" [columns]=\"field.columns\" [actions]=\"field.actions\"></easy-table>

        <easy-date-picker [placeholder]=\"field.label\" [(value)]=\"field.value\"></easy-date-picker>
      \n

      Appendix: Configuring SystemJS

      \n

      If your project is using SystemJS for module loading, you will need to add easy-suite\nto the SystemJS configuration:

      \n
      System.config({
        // existing configuration options
        map: {
          // ...
          'easy-suite': 'npm:easy-suite/src/',
          'easy-core': 'npm:easy-core/src/'
          // ...
        },

        packages: {
          // ...
            'easy-core': {
              main: 'index.js',
              defaultExtension: 'js'
            },
            'easy-suite': {
              main: 'index.js',
              defaultExtension: 'js'
            }
          // ...
          }

      });
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner-angular-compatibility-hook":{"name":"nativescript-unit-test-runner-angular-compatibility-hook","version":"0.0.2","license":"MIT","readme":"

      NativeScript tests hook

      \n

      Workaround for running unit tests located in source code (according to Angular style guide)

      \n

      Currently NativeScript runs spec files located in app/tests. This hook copies all source code (in app) to\na .tmp folder inside app/tests, so NativeScript can run unit tests that follow the Angular style guide.

      \n

      Example

      \n
      app
      |-- feature
           |- feature.component.html
           |- feature.component.ts
           |- feature.component.spec.ts
      \n

      Installation

      \n

      Npm

      \n
      npm install nativescript-tests-hook --save-dev
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-task-dispatcher":{"name":"nativescript-task-dispatcher","version":"3.1.1","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-alogent-design-lib":{"name":"nativescript-alogent-design-lib","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-preact":{"name":"nativescript-preact","version":"0.0.3","license":"MIT","readme":"

      NativeScript Preact

      \n

      This plugin integrates Preact and NativeScript, allowing you to build cross-platform iOS and Android apps using Preact.

      \n

      Why? Because I prefer the (P)React pattern of building UIs over what Angular offers, and find that NativeScript has several technical advantages over ReactNative.

      \n

      Getting Started

      \n

      A proper template repo and documentation is needed. For now, you can copy the demo-app folder from this repo as a starting point.

      \n

      This is Alpha Software!

      \n

      This is a very early working example, and should not be used for a production app unless you really know what you're doing. I hope to build a side-project using this as well as add unit tests for all NativeScript components.

      \n

      How it Works

      \n

      This was made possible by undom library, allowing Preact to rending into a pure JavaScript DOM, within the NativeScript runtime. Currently, I'm shipping a modified undom with basic MutationObserver API implemented which is what nativescript-preact uses to sync changes from the DOM to the NativeScript widgets. I aimed to keep this code generalized (and hopefully small), so the bridge code is easier to maintain and less prone to bugs.

      \n

      Get Involved!

      \n

      File issues! Feel free to post questions as issues here or look for the #preact channel on the NativeScript Slack Community.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"device-checks":{"name":"device-checks","version":"1.0.5","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@tremho/jove-app-template":{"name":"@tremho/jove-app-template","version":"8.2.3-pre-release.2","license":"ISC","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sim-info":{"name":"nativescript-sim-info","version":"2.0.0","license":"Apache-2.0","readme":"

      nativescript-sim-info

      \n

      NativeScript-Sim-Info is a plugin for NativeScript which allows access to the sim card information.

      \n

      Installation

      \n

      Go to your app's root folder and execute:

      \n
      tns plugin add nativescript-sim-info
      \n

      Usage

      \n
          import { SimInfo } from \"nativescript-sim-info\";

          load(): void {
              const simInfo = new SimInfo();
              simInfo.getData()
                  .then((simData) => {
                      console.log(simData)
                  }).catch((error) => {
                      console.error(error);
                  });
          }
      \n

      Android Output

      \n

      Single Sim

      \n
      [
          {
              \"isoCountryCode\": \"at\",
              \"simOperator\": \"23XXX\",
              \"carrierName\": \"A1\",
              \"callState\": null,
              \"dataActivity\": null,
              \"phoneType\": 1,
              \"simState\": 5,
              \"isNetworkRoaming\": true,
              \"mcc\": 232,
              \"mnc\": 1,
              \"phoneNumber\": \"\",
              \"deviceSoftwareVersion\": \"01\",
              \"simSerialNumber\": \"894301561923869XXXX\",
              \"subscriberId\": \"23201163022XXXX\",
              \"isDefaultSim\": true,
              \"networkType\": 13,
              \"deviceImei\": \"35404611160XXXX\",
              \"deviceMeid\": \"\",
              \"subscriptionId\": 1
          }
      ]
      \n

      Dual Sim

      \n
      [
          {
              \"isoCountryCode\": \"at\",
              \"simOperator\": \"23XXX\",
              \"carrierName\": \"spusu\",
              \"callState\": null,
              \"dataActivity\": 4,
              \"phoneType\": 1,
              \"simState\": 5,
              \"isNetworkRoaming\": true,
              \"mcc\": 232,
              \"mnc\": 17,
              \"phoneNumber\": \"+4366XXXXXXXX\",
              \"deviceSoftwareVersion\": \"00\",
              \"simSerialNumber\": \"894317008000176XXXX\",
              \"subscriberId\": \"23217004025XXXX\",
              \"isDefaultSim\": true,
              \"networkType\": 13,
              \"deviceImei\": \"86760103133XXXX\",
              \"deviceMeid\": \"9900111506XXXX\",
              \"subscriptionId\": 1
          },
          {
              \"isoCountryCode\": \"at\",
              \"carrierName\": \"A1\",
              \"isNetworkRoaming\": true,
              \"phoneNumber\": \"+4366XXXXXXX\",
              \"mcc\": 232,
              \"mnc\": 1,
              \"subscriptionId\": 4,
              \"simSerialNumber\": \"894301561520280XXXX\",
              \"isDefaultSim\": false
          }
      ]
      \n
      \nPossible errors\n

      The plugin will request more or less permission items depending on the Android version. If any of the permissions are rejected by the user, an object will be returned as a rejected promise.

      \n
      {
          \"android.permission.READ_PHONE_STATE\": false,
          \"android.permission.READ_SMS\": false,
          \"android.permission.READ_PHONE_NUMBERS\": false,
      }
      \n
      \n

      iOS Output

      \n

      Single Sim

      \n
      [
          {
              \"mnc\": \"232\",
              \"isoCountryCode\": \"at\",
              \"carrierName\": \"A1\",
              \"allowsVOIP\": true,
              \"mcc\": \"1\"
          }
      ]
      \n

      API

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyPlatformAndroid VersioniOS VersionTypeDescription
      isoCountryCodecommon11stringReturns the ISO-3166 country code equivalent for the SIM provider's country code.
      carrierNamecommon11stringReturns the MCC+MNC (mobile country code + mobile network code) of the provider of the SIM. 5 or 6 decimal digits.
      mcccommon11string - number - nullReturns the mobile country code (MCC).
      mnccommon11string - number - nullReturns the mobile network code (MNC).
      simOperatorandroid1-stringReturns the Service Provider Name (SPN).
      callStateandroid1-number - nullReturns the state of all calls on the device.
      dataActivityandroid1-number - nullReturns a constant indicating the type of activity on a data connection (cellular).
      phoneTypeandroid1-number - nullReturns a constant indicating the device phone type.
      simStateandroid1-number - nullReturns a constant indicating the state of the default SIM card.
      isNetworkRoamingandroid1-boolean - nullReturns true if the device is considered roaming on the current network, for GSM purposes.
      phoneNumberandroid1-stringReturns the phone number string for line 1, for example, the MSISDN for a GSM phone. Returns null if it is unavailable.
      deviceSoftwareVersionandroid1-stringReturns the software version number for the device, for example, the IMEI/SV for GSM phones.
      simSerialNumberandroid1-stringReturns the serial number of the SIM, if applicable.
      subscriberIdandroid1-stringReturns the unique subscriber ID, for example, the IMSI for a GSM phone.
      subscriptionIdandroid5.1 (Api: 22)-number - nullReturns the subscription.
      simSerialNumberandroid5.1 (Api: 22)-stringReturns SIM unique serial number (ICCID).
      networkTypeandroid7 (Api: 24)-number - nullReturns a constant indicating the radio technology (network type) currently in use on the device for data transmission.
      deviceImeiandroid8 (Api: 26)-stringreturns IMEI for GSM.
      isDefaultSimandroid--boolean - nullReturns true if the sim is considered the default.
      allowsVOIPios-1boolean - nullIndicates if the carrier allows making VoIP calls on its network.
      \n

      Android

      \n

      Dual-Sim Support

      \n

      From Api Level 22, A.K.A LOLLIPOP_MR1 or Android 5.1, there is support for dual sim. I would like to point out that there is a difference in number of information attributes between what Android considers the default subscription (TelephonyManager) and the subscriptions (SubscriptionManager).

      \n

      iOS

      \n

      Dual-Sim Support

      \n

      From iOS 12 on, Apple supports dual sim. The available information attributes are the same for the default and secondary sim.\nAt the moment, I could not test how is the support for e-sim cards. I would appreciate if anyone is able to test it and let me know

      \n

      Phone Number

      \n

      Apple does not allow the access to the phone number under any circumstance. More information on this topic can be found under the point 2.5.2 of the guidelines.

      \n

      Acknowledgements

      \n

      This plugin is based on the Nativescript-Telephony and uses the following dependencies:

      \n

      NativeScript-Permissions: https://github.com/NathanaelA/nativescript-permissions

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"molpay-mobile-xdk-nativescript":{"name":"molpay-mobile-xdk-nativescript","version":"3.29.0","readme":"\n\n

      rms-mobile-xdk-nativescript

      \n

      This is the functional Razer Merchant Services NativeScript payment module that is ready to be implemented into any NativeScript project npm install module. An example application project (MOLPayXDKExample) is provided for Razer Merchant Services XDK framework integration reference.

      \n

      Recommended configurations

      \n
        \n
      • \n

        Node.js Version: 5.3.0 ++

        \n
        • \n
      • \n

        Minimum Android SDK Version: 27 ++

        \n
        • \n
      • \n

        Minimum Android API level: 19 ++

        \n
        • \n
      • \n

        Minimum Android target version: Android 4.4

        \n
        • \n
      • \n

        Xcode version: 9 ++

        \n
        • \n
      • \n

        Minimum target version: iOS 8

        \n
        • \n
      \n

      Installation

      \n
      tns plugin add molpay-mobile-xdk-nativescript
      \n

      Sample Result

      \n
      =========================================
      Sample transaction result in JSON string:
      =========================================

      {\"status_code\":\"11\",\"amount\":\"1.01\",\"chksum\":\"34a9ec11a5b79f31a15176ffbcac76cd\",\"pInstruction\":0,\"msgType\":\"C6\",\"paydate\":1459240430,\"order_id\":\"3q3rux7dj\",\"err_desc\":\"\",\"channel\":\"Credit\",\"app_code\":\"439187\",\"txn_ID\":\"6936766\"}

      Parameter and meaning:

      \"status_code\" - \"00\" for Success, \"11\" for Failed, \"22\" for *Pending. 
      (*Pending status only applicable to cash channels only)
      \"amount\" - The transaction amount
      \"paydate\" - The transaction date
      \"order_id\" - The transaction order id
      \"channel\" - The transaction channel description
      \"txn_ID\" - The transaction id generated by Razer Merchant Services

      * Notes: You may ignore other parameters and values not stated above

      =====================================
      * Sample error result in JSON string:
      =====================================

      {\"Error\":\"Communication Error\"}

      Parameter and meaning:

      \"Communication Error\" - Error starting a payment process due to several possible reasons, please contact MOLPay support should the error persists.
      1) Internet not available
      2) API credentials (username, password, merchant id, verify key)
      3) Razer Merchant Services server offline.
      \n

      Prepare the Payment detail object

      \n
      var paymentDetails = {
          // Optional, REQUIRED when use online Sandbox environment and account credentials.
          'mp_dev_mode': false,

          // Mandatory String. Values obtained from Razer Merchant Services.
          'mp_username' : 'username',
          'mp_password' : 'password',
          'mp_merchant_ID' : 'merchantid',
          'mp_app_name' : 'appname',
          'mp_verification_key' : 'vkey123', 

          // Mandatory String. Payment values.
          'mp_amount' : '1.10',, // Minimum 1.01
          'mp_order_ID' : 'orderid123', 
          'mp_currency' : 'MYR',
          'mp_country' : 'MY',  
          
          // Optional String.
          'mp_channel' : '', // Use 'multi' for all available channels option. For individual channel seletion, please refer to https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/channel_list.tsv.
          'mp_bill_description' : '',
          'mp_bill_name' : '',
          'mp_bill_email' : '',
          'mp_bill_mobile' : '',
          'mp_channel_editing' : false, // Option to allow channel selection.
          'mp_editing_enabled' : false, // Option to allow billing information editing.
          
          // Optional, but required payment values. User input will be required when values not passed.
          'mp_channel' : 'multi', // Use 'multi' for all available channels option. For individual channel seletion, please refer to https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/channel_list.tsv.
          'mp_bill_description' : 'billdesc',
          'mp_bill_name' : 'billname',
          'mp_bill_email' : 'email@domain.com',
          'mp_bill_mobile' : '+1234567',

          // Optional, allow channel selection. 
          'mp_channel_editing' : false,

          // Optional, allow billing information editing.
          'mp_editing_enabled' : false,

          // Optional, for Escrow.
          'mp_is_escrow': '0', // Put \"1\" to enable escrow

          // Optional, for credit card BIN restrictions and campaigns.
          'mp_bin_lock' : ['414170', '414171'],   

          // Optional, for mp_bin_lock alert error.
          'mp_bin_lock_err_msg': 'Only UOB allowed',
          
          // WARNING! FOR TRANSACTION QUERY USE ONLY, DO NOT USE THIS ON PAYMENT PROCESS.
          // Optional, provide a valid cash channel transaction id here will display a payment instruction screen. Required if mp_request_type is 'Receipt'.
          'mp_transaction_id': '',
          // Optional, use 'Receipt' for Cash channels, and 'Status' for transaction status query.
          'mp_request_type': '',

          // Optional, use this to customize the UI theme for the payment info screen, the original XDK custom.css file can be obtained at https://github.com/MOLPay/molpay-mobile-xdk-examples/blob/master/custom.css.
          'mp_custom_css_url': '',

          // Optional, set the token id to nominate a preferred token as the default selection, set \"new\" to allow new card only.
          'mp_preferred_token': '',

          // Optional, credit card transaction type, set \"AUTH\" to authorize the transaction.
          'mp_tcctype': '',

          // Optional, required valid credit card channel, set true to process this transaction through the recurring api, please refer the Razer Merchant Services Recurring API pdf. 
          'mp_is_recurring': false,

          // Optional, show nominated channels.
          'mp_allowed_channels': ['credit', 'credit3'],

          // Optional, simulate offline payment, set boolean value to enable. 
          'mp_sandbox_mode': true,

          // Optional, required a valid mp_channel value, this will skip the payment info page and go direct to the payment screen.
          'mp_express_mode': true,

          // Optional, extended email format validation based on W3C standards.
          'mp_advanced_email_validation_enabled': true,

          // Optional, extended phone format validation based on Google i18n standards.
          'mp_advanced_phone_validation_enabled': true,

          // Optional, explicitly force disable user input.
          'mp_bill_name_edit_disabled': true,
          'mp_bill_email_edit_disabled': true,
          'mp_bill_mobile_edit_disabled': true,
          'mp_bill_description_edit_disabled': true,

          // Optional, EN, MS, VI, TH, FIL, MY, KM, ID, ZH.
          'mp_language': 'EN',

          // Optional, Cash channel payment request expiration duration in hour.
          'mp_cash_waittime': 48,
          
          // Optional, allow bypass of 3DS on some credit card channels.
          'mp_non_3DS': true,

          // Optional, disable card list option.
          'mp_card_list_disabled': true,

          // Optional for channels restriction, this option has less priority than mp_allowed_channels.
          'mp_disabled_channels': ['credit']  
          
      };
      \n

      Start the payment module

      \n
      //XML view ready a view for Razer Merchant Services to display
      <GridLayout id=\"molpayExampleView\"></GridLayout>

      //Typescript
      //import Razer Merchant Services package
      import * as molpay from 'molpay-mobile-xdk-nativescript';

      //Javascript
      //import Razer Merchant Services package
      var molpay = require(\"molpay-mobile-xdk-nativescript\");

      exports.pageLoaded = function(args) {
          var page = args.object;
          
          //set the view
          var molpayView = page.getViewById(\"molpayExampleView\");

          //start Razer Merchant Services payment pass the view and the payment Details
          molpay.startMolpay(molpayView ,paymentDetails , function(data){
              //callback after payment success
              console.log(data);
              alert(data);
          });
      };

      \n

      Cash channel payment process (How does it work?)

      \n
      This is how the cash channels work on XDK:\n\n1) The user initiate a cash payment, upon completed, the XDK will pause at the “Payment instruction” screen, the results would return a pending status.\n\n2) The user can then click on “Close” to exit the Razer Merchant Services XDK aka the payment screen.\n\n3) When later in time, the user would arrive at say 7-Eleven to make the payment, the host app then can call the XDK again to display the “Payment Instruction” again, then it has to pass in all the payment details like it will for the standard payment process, only this time, the host app will have to also pass in an extra value in the payment details, it’s the “mp_transaction_id”, the value has to be the same transaction returned in the results from the XDK earlier during the completion of the transaction. If the transaction id provided is accurate, the XDK will instead show the “Payment Instruction" in place of the standard payment screen.\n\n4) After the user done the paying at the 7-Eleven counter, they can close and exit Razer Merchant Services XDK by clicking the “Close” button again.\n
      \n

      XDK built-in checksum validator caveats

      \n
      All XDK come with a built-in checksum validator to validate all incoming checksums and return the validation result through the "mp_secured_verified" parameter. However, this mechanism will fail and always return false if merchants are implementing the private secret key (which the latter is highly recommended and prefereable.) If you would choose to implement the private secret key, you may ignore the "mp_secured_verified" and send the checksum back to your server for validation. \n
      \n

      Private Secret Key checksum validation formula

      \n
      chksum = MD5(mp_merchant_ID + results.msgType + results.txn_ID + results.amount + results.status_code + merchant_private_secret_key)\n
      \n

      Support

      \n

      Submit issue to this repository or email to our support-sa@razer.com

      \n

      Merchant Technical Support / Customer Care : support-sa@razer.com
      \nSales/Reseller Enquiry : sales-sa@razer.com
      \nMarketing Campaign : marketing-sa@razer.com
      \nChannel/Partner Enquiry : channel-sa@razer.com
      \nMedia Contact : media-sa@razer.com
      \nR&D and Tech-related Suggestion : technical-sa@razer.com
      \nAbuse Reporting : abuse-sa@razer.com

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"vue-cli-plugin-nativescript-vue-preset":{"name":"vue-cli-plugin-nativescript-vue-preset","version":"0.1.8","license":"MIT","readme":"

      vue add nativescript-vue-preset

      \n

      Fixes most errors caused by installing <nativescript-vue> plugin.

      \n

      BEFORE installing: create project using vue create --preset vpiskunov/preset-vue-ns {your-project-name}

      \n

      IMPORTANT: run "vue invoke nativescript-vue-preset" twice after adding.

      \n

      What does it do:

      \n
        \n
      • ✅ Adds support for platform-tagged CSS lines: e.g. adding [web] will keep that line for web, but not in native. Multiple tags per line can be added e.g. [web][android] will only keep that line in web & android, but will remove it for iOS builds etc.\n
          \n
        • Supported platform tags are:
          * web: ['web', 'w', 'cross']
          * ios: ['native', 'n', 'ios', 'apple', 'cross']
          * android: ['native', 'n', 'android', 'cross']
          \n
          • \n
        \n
        • \n
      • ✅ Adds .eslint.js, with support for fixed module-require resolving + disables unreasonable rules (you can always edit .eslintrc.js to suit your style)
        • \n
      • ✅ Replaces ~/ tilde with @/at paths: fixes Unable to resolve path to module import/no-unresolved & import/extensions
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mean-expert/loopback-sdk-builder":{"name":"@mean-expert/loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsblestream":{"name":"nsblestream","version":"0.1.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-phone-validation":{"name":"nativescript-phone-validation","version":"0.0.2","license":"MIT","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-akylas-webpack-template":{"name":"nativescript-akylas-webpack-template","version":"1.0.15","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-services-mongodb-remote":{"name":"nativescript-mongo-stitch-services-mongodb-remote","version":"0.0.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner":{"name":"nativescript-unit-test-runner","version":"0.7.0","license":"Apache-2.0","readme":"

      Unit test runner for NativeScript

      \n

      Refer to the documentation of NativeScript CLI's tns test init command for usage.

      \n

      If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ravepay-simple":{"name":"nativescript-ravepay-simple","version":"0.0.5","license":"Apache-2.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-jsx":{"name":"nativescript-jsx","version":"0.0.1","license":"MIT","readme":"

      NativeScript JSX

      \n

      Work in progress. Stay tuned.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-gigya":{"name":"nativescript-gigya","version":"0.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-actioncable":{"name":"nativescript-actioncable","version":"0.0.2","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@progress/jsdo-nativescript":{"name":"@progress/jsdo-nativescript","version":"5.0.0","license":"Apache-2.0","readme":"

      Progress Data Source for NativeScript

      \n

      The Progress Data Source is a TypeScript implementation - Progress Data Source class for NativeScript, Angular. This will provide a seamless integration between OpenEdge (Progress Data Object) with NativeScript"

      \n

      Documentation

      \n

      Progress® Data Objects, which include the JSDO on the client, represent the Progress-released implementation of Cloud Data Objects. For more information on the latest release, see the Progress Data Objects Guide and Reference.

      \n

      The Data Source can be used by mobile apps built using NativeScript.

      \n

      License

      \n

      Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

      \n

      http://www.apache.org/licenses/LICENSE-2.0

      \n

      Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bottombar":{"name":"nativescript-bottombar","version":"3.0.8","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-util-ns":{"name":"@synerty/peek-util-ns","version":"0.7.5","license":"MIT","readme":"

      PeekClientFeUtil

      \n

      This project was generated with angular-cli version 1.0.0-beta.21.

      \n

      Development server

      \n

      Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

      \n

      Code scaffolding

      \n

      Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

      \n

      Build

      \n

      Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

      \n

      Running unit tests

      \n

      Run ng test to execute the unit tests via Karma.

      \n

      Running end-to-end tests

      \n

      Run ng e2e to execute the end-to-end tests via Protractor.\nBefore running the tests make sure you are serving the app via ng serve.

      \n

      Deploying to Github Pages

      \n

      Run ng github-pages:deploy to deploy to Github Pages.

      \n

      Further help

      \n

      To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-core-modules-xsd-schema":{"name":"tns-core-modules-xsd-schema","version":"1.7.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/plugin-tools":{"name":"@nativescript/plugin-tools","version":"5.1.0","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-css-loader":{"name":"nativescript-css-loader","version":"0.26.1","license":"MIT","readme":"

      NativScript css loader for webpack

      \n

      This is a fork of the official css loader for webpack.

      \n

      License

      \n

      MIT (http://www.opensource.org/licenses/mit-license.php)

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-facebook-login-webpack":{"name":"nativescript-facebook-login-webpack","version":"0.2.3","license":{"type":"","url":"https://github.com/sis0k0/nativescript-facebook-login/blob/master/LICENSE"},"readme":"

      nativescript-facebook-login

      \n

      A NativeScript module providing Facebook login for Android and iOS.\nThe plugin is using the version 4.7.0 for iOS and the version 4.6.0 for Android

      \n

      Prerequisites

      \n

      NativeScript 1.3.0 for Android and iOS since we are using cocoapods and .aar libraries

      \n

      Plugin architecture

      \n
      .
      ├── app  <----------------run npm install from here
      │   ├── node_modules
      │   │   └── nativescript-facebook-login <-- The install will place the module's code here
      │   │       ├──platforms
      │   │       │  ├──android
      │   │       │  │  └─libs
      │   │       │  │    └─facebook-release.aar <-- This is the SDK for android as a .aar library
      │   │       │  └──ios
      │   │       │     └─Podfile <-- This is the SDK for iOS as a cocoapods dependency 
      │   │       ├──facebook-handler.android.js
      │   │       ├──facebook-handler.ios.js 
      │   │       ├──LICENSE
      │   │       ├──README
      │   │       └──package.json
      │   ├── package.json <-- The install will register \"nativescript-facebook-login as a dependency here
      │   └── tns_modules
      │       └── ...
      └──
      \n

      Installation

      \n

      tns plugin add nativescript-facebook-login

      \n

      iOS

      \n

      For ios you need to add this to your app.ios to initialize the SDK

      \n
      var application = require(\"application\");

      class MyDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols = [UIApplicationDelegate];

        applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
         return FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions);
        }
        
        applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
          return FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation);
        }
        
        applicationDidBecomeActive(application: UIApplication): void {
            FBSDKAppEvents.activateApp();
        }

        applicationWillTerminate(application: UIApplication): void {
          //Do something you want here
        }

        applicationDidEnterBackground(application: UIApplication): void {
          //Do something you want here
        }
      }

      application.ios.delegate = MyDelegate;
      application.start();
      \n

      Add to your Info.plist(the one inside platforms/ios/yourApp) the Facebook App ID credentials

      \n

      <key>CFBundleURLTypes</key>
      \t<array>
      \t\t<dict>
      \t\t\t<key>CFBundleURLSchemes</key>
      \t\t\t<array>
              <string>fb{your-app-id}</string>
      \t\t\t</array>
      \t\t</dict>
      \t</array>
      \t<key>CFBundleVersion</key>
      \t<string>1.0</string>
      \t<key>FacebookAppID</key>
        <string>{your-app-id}</string>
      \t<key>FacebookDisplayName</key>
      \t<string>FacebookLoginDemo</string>
      \t<key>LSApplicationQueriesSchemes</key>
      \t<array>
      \t\t<string>fbauth2</string>
      \t\t<string>fbapi</string>
      \t\t<string>fb-messenger-api</string>
      \t\t<string>fbshareextension</string>
      \t</array>
      \n

      For more information you can consult the official Facebook page for iOS\nhttps://developers.facebook.com/docs/ios

      \n

      Android

      \n

      Add to your AndroidManifest.xml (the one inside platforms/android/src/main) the Facebook App ID credentials

      \n
      <uses-permission android:name=\"android.permission.INTERNET\"/>
      application android:label=\"@string/app_name\" ...>
          ...
          <meta-data android:name=\"com.facebook.sdk.ApplicationId\" android:value=\"@string/facebook_app_id\"/>
          <activity android:name=\"com.facebook.FacebookActivity\"
                android:configChanges=
                       \"keyboard|keyboardHidden|screenLayout|screenSize|orientation\"
                android:theme=\"@android:style/Theme.Translucent.NoTitleBar\"
                android:label=\"@string/app_name\" />
      </application>
      \n

      Add to your Strings (platforms/android/src/main/res/values/strings.xml) your facebook app id

      \n
      <string name=\"facebook_app_id\">your-app-id</string>
      \n

      For more information you can consult the official Facebook page for Android\nhttps://developers.facebook.com/docs/android

      \n

      Common to iOS and Android

      \n

      Require the plugin whenever you want to use it

      \n
      var FacebookLoginHandler = require(\"nativescript-facebook-login\");
      \n

      Create the callbacks to handle the result of the login

      \n
       var successCallback = function(result) {
                  //Do something with the result, for example get the AccessToken
                  var token;
                  if (topmost().android){
                    token = result.getAccessToken().getToken();
                  }
                  else if (topmost().ios){
                    token = result.token.tokenString
                  }
                  alert(token);
              }

              var cancelCallback = function() {
                  alert(\"Login was cancelled\");
              }

              var failCallback = function(error) {
                  var errorMessage = \"Error with Facebook\";
                 //Try to get as much information as possible from error
                 if (error) {
                      if (topmost().ios) {
                          if (error.localizedDescription) {
                              errorMessage += \": \" + error.localizedDescription;
                          }
                          else if (error.code) {
                              errorMessage += \": Code \" + error.code;
                          }
                          else {
                              errorMessage += \": \" + error;   
                          }
                      }
                      else if (topmost().android) {
                          if (error.getErrorMessage) {
                              errorMessage += \": \" + error.getErrorMessage();
                          }
                          else if (error.getErrorCode) {
                              errorMessage += \": Code \" + error.getErrorCode();
                          }
                          else {
                              errorMessage += \": \" + error;   
                          }
                      }
                  }
                  alert(errorMessage);
              }
      \n

      And finally you can start the login process like this

      \n
        //Here we select the login behaviour

          //Recomended system account with native fallback for iOS
          if (topmost().ios) {
              FacebookLoginHandler.init(2);
          }
          //Recomended default for android 
          else if (topmost().android) {
              FacebookLoginHandler.init();
          }
          //Register our callbacks
          FacebookLoginHandler.registerCallback(successCallback, cancelCallback, failCallback);
          //Start the login process
          FacebookLoginHandler.logInWithPublishPermissions([\"publish_actions\"]);
      \n

      Known issues

      \n

      Sometimes the .aar library with the sdk for android don't get linked to the platform after installing the plugin. This end up in the error:
      \nTypeError: Cannot read property 'FacebookSdk' of undefined\nFile: "/data/data/com.ladeezfirstmedia.ThisOrThat/files/app/tns_modules/nativescript-facebook-login/facebook-handler.js line: 9 column:16

      \n

      You can try to sync the platform\ntns livesync android

      \n

      You can try cleaning the platform.\n-remove the plugin\n-remove the platform\n-add the plugin\n-add the platform in that order

      \n

      You can try to add manually the dependency\nchange the build.gradle (platforms/android/build.gradle) like this:

      \n
      dependencies {
      \t....
              ....
          compile \"com.android.support:support-v4:$suppotVer\"
          compile \"com.android.support:appcompat-v7:$suppotVer\"

          //Facebook sdk
          compile 'com.facebook.android:facebook-android-sdk:4.6.0'
           \t....
              ....
          
      }
      \n

      Frequently asked questions

      \n

      Why Xcode is not building my iOS platform?

      \n

      After installing the plugin CocoaPods creates a .xcworkspace file, use this one to open the project in Xcode instead of the .xcodeproj

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-typescript":{"name":"nativescript-dev-typescript","version":"0.10.0","license":"Apache-2.0","readme":"

      NativeScript TypeScript

      \n

      nativescript-dev-typescript is deprecated in favour of bundle workflow, which will be introduced with CLI v6.0. More info about the upcoming new approach can be found here.

      \n

      A package providing TypeScript support for NativeScript.

      \n

      NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Angular is one of the most popular open source JavaScript frameworks for application development. We worked closely with developers at Google to make Angular in NativeScript a reality. The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular web apps, with the performance you’d expect from native code. Read more about building truly native mobile apps with NativeScript and Angular.

      \n

      How to use in NativeScript projects

      \n
      $ npm install -D nativescript-dev-typescript
      \n

      The above command adds nativescript-dev-typescript package as dev dependency and installs the necessary hooks. TypeScript compilation happens when the project is prepared for build. A file named tsconfig.json that specifies compilation options will be created in the project folder and should be committed to source control. Read more about tsconfig.json options.

      \n

      How it works

      \n

      When the plugin installed what it will do out of the box is to add

      \n
        \n
      • tsconfig.json file to the project (if it doesn't exist),
        • \n
      • typescript as dev dependency
        • \n
      • before-prepare hook which takes care to transpile all files before preparing your project
        • \n
      • before-watch hook to start the typescript watcher and transpile on every typescript change during project livesync
        • \n
      • after-watch hook to stop the typescript watcher after the livesync is stopped
        • \n
      \n

      How to use in NativeScript plugins

      \n

      This package is not meant to be used in plugins. It's applicable for NativeScript projects only.

      \n

      Contribute

      \n

      We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

      \n

      Get Help

      \n

      Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out the NativeScript community forum or ask our experts in NativeScript community Slack channel.

      \n

      \"\"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@cowboyd/nativescript-unit-test-runner":{"name":"@cowboyd/nativescript-unit-test-runner","version":"0.5.1","license":"Apache-2.0","readme":"

      Unit test runner for NativeScript

      \n

      Refer to the documentation of NativeScript CLI's tns test init command for usage.

      \n

      If you encounter an issue, please log it at https://github.com/NativeScript/nativescript-cli/

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-peek-update":{"name":"nativescript-peek-update","version":"0.2.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-carousel-swipeable":{"name":"nativescript-ng2-carousel-swipeable","version":"0.1.6","license":"MIT","readme":"

      {N} + Angular Carousel Slider

      \n

      A simple NativeScript + Angular images carousel for iOS and Android.

      \n

      Tested on:

      \n
        \n
      • Nativescript 4
        • \n
      • Typescript 3
        • \n
      • Angular 6
        • \n
      \n

      You can download older versions here for previous versions of Angular and Nativescript.

      \n

      I would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue.

      \n

      Demo

      \n

      You can check a reference application here created to show how to integrate the "{N} + Angular Carousel Slider".

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      iOsAndroid
      \"\"\"\"
      \n

      Getting started

      \n

      See demo for further details.

      \n
        \n
      1. Download and install the module via npm to your Nativescript project:
        2. \n
      \n
      \ncd your_tns_project_path/\nnpm install nativescript-ng2-carousel --save\n
      \n
        \n
      1. Add the CarouselDirective class to the declarations NgMoudle metadata:
        2. \n
      \n
      \n@NgModule({\n    declarations: [AppComponent, CarouselDirective],\n    bootstrap: [AppComponent],\n    imports: [NativeScriptModule],\n    schemas: [NO_ERRORS_SCHEMA]\n})\n
      \n
        \n
      1. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
        2. \n
      \n
      \n<GridLayout [carousel]=\"images\" carouselLabelOverlay=\"true\" carouselSpeed=\"2000\">\n    \n</GridLayout>\n
      \n

      Add images from URL to your component:

      \n
      \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
      \n

      You can also add images from your assets folder or resources folder using file attribute instead of url attribute:

      \n
      \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },\n            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
      \n
        \n
      1. CSS styling:
        2. \n
      \n
      \n/** Slider image */\n.slider-image {\n\n}\n\n/** Slider title format */\n.slider-title {\n    color: #fff;\n    font-weight: bold;\n    background-color: rgba(125, 125, 125);\n    padding: 8;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n/** Arrows */\n.arrow {\n    color: #ffffff;\n    font-size: 32;\n    vertical-align: middle;\n    padding: 10;\n}\n\n/** Arrow left wrapper */\n.arrow.arrow-left {\n\n}\n\n/** Arrow right */\n.arrow.arrow-right {\n\n}\n
      \n

      Supported attributes

      \n

      Currently directive supported attributes:

      \n
        \n
      • carousel list of images as JSON or CarouselSlide class, accepted parameters (title?, url?, file?)
        • \n
      • carouselSpeed (optional) defines the interval (number in ms) to wait before the next slide is shown
        • \n
      • carouselAnimationSpeed (optional) defines the animation speed (number in ms)
        • \n
      • carouselArrows (optional) arrow type, accepted values none, small, normal, bold or narrow (default normal)
        • \n
      • carouselLabelOverlay (optional) silde title over image, accepted values true or false (default false)
        • \n
      • currentElementHighlightColor (recommended) background color to apply to the current element
        • \n
      \n

      Changelog

      \n

      Version 0.1.0

      \n
        \n
      • Fix bug "Unable to find directive"
        • \n
      • Demo folder moved https://github.com/alcoceba/ngCarouselDirectiveDemo
        • \n
      • Improved documentation
        • \n
      • Added requiered dependencies
        • \n
      • Updated to Nativescript 4 + Angular 6
        • \n
      \n

      Version 0.0.5

      \n
        \n
      • Possibility to load images from resources folder in Android and iOS
        • \n
      \n

      Version 0.0.4

      \n
        \n
      • Updated to Nativescript 3 + Angular 4
        • \n
      \n

      Version 0.0.3

      \n
        \n
      • Package.json fixes
        • \n
      • Minor fixes
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hex-string":{"name":"nativescript-hex-string","version":"0.0.4","license":"Apache-2.0","readme":"
      sha256('abcd');
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mongo-stitch-sdk":{"name":"nativescript-mongo-stitch-sdk","version":"0.0.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils-ns5":{"name":"nativescript-google-maps-utils-ns5","version":"0.1.2","license":"Unlicense","readme":"

      nativescript-google-maps-utils-ns5

      \n
      Improved version
      \n

      NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

      \n

      \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

      \n

      State

      \n

      Android implemented.

      \n

      iOS not implemented.

      \n

      Dependencies

      \n\n

      Install

      \n
      tns plugin add nativescript-google-maps-utils-ns5
      \n

      Usage with TypeScript

      \n

      import using either of

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-easy-dialog":{"name":"nativescript-easy-dialog","version":"0.0.3","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bip39":{"name":"nativescript-bip39","version":"1.0.5","license":"ISC","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-listview":{"name":"nativescript-wear-os-listview","version":"0.1.2","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-language":{"name":"nativescript-language","version":"0.1.0","license":"MIT","readme":"

      NativeScript Language Plugin

      \n
      \n

      A NativeScript Language Plugin for Android.

      \n
      \n

      ... in development

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-layout":{"name":"nativescript-wear-os-layout","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@msaelices/nativescript-radiobutton":{"name":"@msaelices/nativescript-radiobutton","version":"0.3.0","license":"Apache 2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wikitudearchitectview":{"name":"nativescript-wikitudearchitectview","version":"0.4.6","license":"MIT","readme":"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nstudio/nativescript-audio-recorder":{"name":"@nstudio/nativescript-audio-recorder","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview-crypto":{"name":"nativescript-webview-crypto","version":"0.1.5","license":"MIT","readme":"

      nativescript-webview-crypto

      \n

      \"npm\"\n\"Dependency

      \n

      This brings window.Crypto to your Native Script application. It does this\nby communicating with a hidden WebView, which performs the actual\ncomputation.

      \n

      Refer to the webview-crypto\nrepo for most of the code and some cavaets.

      \n

      If you are using Angular2 with Nativescript, you should use\nnativescript-angular-webview-crypto.

      \n

      This project is funded by Burke Software and Consulting LLC for passit. We are available for hire for any improvement and integration needs on this project. Open an issue to start a conversation or email info @ burke software dot come.

      \n

      Install

      \n

      This requires being setup properly with NativeScript\nfirst. Then install this as a plugin:

      \n
      tns plugin add nativescript-webview-crypto
      \n\n

      Quickstart

      \n

      Rendering the PolyfillCrypto components will start up a WebView to\ntransparently proxy all the crypto calls to. It will also set the crypto\nglobal variable.

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:WebViewCrypto=\"nativescript-webview-crypto\">
        <WebViewCrypto:WebViewCrypto />
        ...
      </Page>
      \n

      Now, in any of your code, you can access window.Crypto, just like you would\nin a browser.

      \n

      You can look at an example repo\nrunning this example for symmetric encryption\nin NativeScript.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-wear-os-box-inset-layout":{"name":"nativescript-wear-os-box-inset-layout","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-fetch":{"name":"nativescript-fetch","version":"0.0.1","license":"MIT","readme":"

      NativeScript Fetch

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-instagram-auth":{"name":"nativescript-instagram-auth","version":"1.0.0","license":"Apache-2.0","readme":"

      nativescript-instagram-auth

      \n

      Easily integrate Instagram login for your NativeScript app (ready only for apps made with angular at the moment)

      \n

      Installation

      \n
      tns plugin add nativescript-instagram-auth
      \n

      Configuration

      \n

      Register the module and configure it with your credentials

      \n

      Note: the redirect uri need to be the same you set on the instagram developers website > manage clients > security

      \n
      import {InstagramAuthModule} from \"nativescript-instagram-auth/angular\";
      // ...
      // Register this module to your angular app
      InstagramAuthModule.forRoot({
      \tclientId: 'YOUR_CLIENT_ID',
      \tredirectUri: 'A_VALID_REDIRECT_URL'
      })
      \n

      Launch the login screen (as a modal only)

      \n
      private igLogin(): Promise<InstagramLoginResponse> {
      \tconst options: ModalDialogOptions = {
      \t\tviewContainerRef: this.vcRef,
      \t        context: {},
      \t        fullscreen: true
              };
              return this.modalService.showModal(LoginComponent, options);
      }

      ngOnInit(): void {
      \tthis.igLogin().then(({error, token}) => {
      \t\tif (error) {
                      // the user cancelled the login process or an error raised
      \t\t} else {
      \t\t\tconsole.log(`access token: ${token}`);
      \t\t}
              });
          }
      \n

      Example

      \n

      Full example available in demo-angular folder

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@microexcel-csd/nativescript-create-pdf":{"name":"@microexcel-csd/nativescript-create-pdf","version":"1.1.1","license":"ISC","readme":"

      Nativescript Create PDF

      \n

      A plugin to help create and save a PDF file to the users device that includes text and images.

      \n

      Prerequisites / Requirements

      \n

      Install the Nativescript-permissions plugin from: https://www.npmjs.com/package/nativescript-permissions

      \n
      npm i nativescript-permissions
      \n

      Your PDF will not be written without permission to READ and WRITE to the filesystem.

      \n

      Installation

      \n
      tns plugin add @microexcel-csd/nativescript-create-pdf
      \n

      Usage

      \n

      Import the plugin into your component

      \n
      import { CreatePdf } from \"@microexcel-csd/nativescript-create-pdf\";
      \n

      Init the plugin

      \n
      createPdf = new CreatePdf();
      \n

      Request proper Android permissions:

      \n
       ngOnInit(): void {
              permissions.requestPermission([
                  \"android.permission.READ_EXTERNAL_STORAGE\",
                  \"android.permission.WRITE_EXTERNAL_STORAGE\",
              ], \"We need these permissions to save pdf\")
              .then(function (res) {
              })
              .catch(function () {
              });
          }
      \n

      Create your PDF file settings:

      \n
      fileSettings = {
              orientation: 'portrait',
              units: 'mm',
              paperSize: 'Letter',
              fileName: 'pdf-export.pdf', // Name your file with the extension
              folderName: 'App-Exports' // Name the folder being created where your pdf will be saved
          }
      \n

      Add your text:

      \n
      text = [
          {
              data: 'Page 1 Sample Text', // this is what appears on the page
              xPos: 10, // x coordinate from top left
              yPos: 20, // y coordinate from top left
              fontSize: 18,
              pageNum: 1 // the page your text will appear on
          },
          {
              data: 'Page 2 Sample Text',
              xPos: 10,
              yPos: 20,
              fontSize: 14,
              pageNum: 2
          }
      ];
      \n

      Change font color:

      \n

      Add fontColor to your text object with your RGB color values in an array. If fontColor is not included the default color is black.

      \n
      fontColor: [8, 134, 255]
      \n

      Add your images:

      \n
      images = [
          {
              path: './app/assets/image.jpg', // where your image is located
              type: 'JPEG', // img type
              xPos: 10, // x coordinate from top left
              yPos: 40, // y coordinate from top left
              width: 30, // width of your image in same unit size as your file settings (mm in this example)
              height: 30, // height of your image in same unit size as your file settings (mm in this example)
              alias: null,
              compression: 'FAST',
              pageNum: 1 // the page your image will appear on
          },
          {
              path: './app/assets/image.jpg',
              type: 'JPEG',
              xPos: 10,
              yPos: 40,
              width: 100,
              height: 125,
              alias: null,
              compression: 'FAST',
              pageNum: 2
          }
      ];
      \n

      Pass data and create your pdf:

      \n
      this.createPdf.create(this.fileSettings, this.text, this.images);
      // this will create your pdf and write it to the device
      \n

      Credits

      \n

      https://www.npmjs.com/package/jspdf\nhttps://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html

      \n

      ISC License

      \n

      Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

      \n

      THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

      \n

      Support Our Packages

      \n

      \"paypal\"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-android":{"name":"tns-android","version":"6.5.3","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nawah/nativescript":{"name":"@nawah/nativescript","version":"2.0.0-a5","readme":"

      nativescript

      \n

      This library was generated with Nx.

      \n

      Running unit tests

      \n

      Run nx test nativescript to execute the unit tests.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-ng-tutorial":{"name":"nativescript-template-ng-tutorial","version":"6.0.0","readme":"

      NativeScript Tutorial Angular Template

      \n

      This repo serves as the starting point for NativeScript’s Angular Getting Started Guide.

      \n

      Please file any issues with this template on the NativeScript/docs repository, which is where the tutorial content lives.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-document-picker":{"name":"nativescript-document-picker","version":"1.0.7","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-file-loader":{"name":"nativescript-dev-file-loader","version":"0.1.2","license":"Apache-2.0","readme":"

      File-loader like hook for NativeScript

      \n

      This provides the functionality to import normal files as modules (url string) in NativeScript.

      \n

      Currently, only files with jpg, png, gif and svg extension is processed.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-navigation-tabbar":{"name":"nativescript-navigation-tabbar","version":"0.1.2","license":"ISC","readme":"

      NavigationTabBar

      \n

      This is a nativescript port of Devlight's Android TabBar Implementation

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-slider-test":{"name":"nativescript-slider-test","version":"1.0.0-test","license":{"type":"Apache-2.0"},"readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-bcryptjs":{"name":"nativescript-bcryptjs","version":"1.0.1","license":"GNU General Public License 3","readme":"

      nativescript-bcrypt.js

      \n

      A nativescript plugin that integrate bcrypt.js plugin in order to hash, compare passwords...

      \n

      Author

      \n\n

      How to use it

      \n
      import {bcrypt} from ('nativescript-bcryptjs');
      let salt = bcrypt.genSaltSync(10);
      let hash2 = bcrypt.hashSync(\"password\", salt);
      let hash = bcrypt.hashSync(\"password\", 4);
      let comp = bcrypt.compareSync(\"password\", hash);
      bcrypt.genSalt(10, (err, salt) => {
          bcrypt.hash(\"B4c0/\\/\", salt, (err, hash) => {
              bcrypt.compare(\"B4c0/\\/\", hash, function (err, res) {
              });
          });
      });
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-generator":{"name":"nativescript-app-generator","version":"0.0.2","license":"ISC","readme":"

      \"Build

      \n

      generate npm package

      \n

      This is cli to create boiler plate for npm package project.

      \n

      Getting Started

      \n

      Installation

      \n

      npm install -g nativescript-app-generator

      \n

      Usage

      \n

      $ nativescript-app-generator

      \n

      \"create\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      OptionsDefaultDescription
      project namecreate-npm-packagenpm package name or project name
      semacntic releeasefalse or Noadd semantic denpendencies
      travis setupfalse or Noconfig travis setup .travis.yml
      install dependenciesfalse or Noinstall project dependencies after creating project
      \n

      Semantic Release

      \n
      npm install -g semantic-release-cli
      cd your-module
      semantic-release-cli setup
      \n\"semantic\"\n

      Travis CI Setup

      \n

      Project Structure

      \n

      \"project\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      File/FolderDescriptions
      project/index.jsentry file while creating npm module.
      src/lib/index.jsmain file that you want to publish in npm.
      src/lib/index.spec.jstest file for above file.
      styles/folder for styles if you are creating UI npm module.
      test/index.jsfor testing build files after build.
      .travis.ymlfor Travis CI
      \n

      Commands

      \n
        \n
      • \n

        Run project ( will start project with watch-bootstrap and watch-custom ) webpack.dev.config.js
        \nnpm start

        \n
        • \n
      • \n

        Run Test ( will run test for src/lib/index.spec.js )
        \nnpm run test

        \n
        • \n
      • \n

        Build ( will bundle the src/lib/index.js to /build folder ) webpack.prod.config.js
        \nnpm run build

        \n
        • \n
      • \n

        Test Build ( will test the build module /build/index.js )
        \nnpm run test-build

        \n
        • \n
      \n

      Create Simple NPM package

      \n

      cd your-module

      \n

      Install Dependencies

      \n

      npm installl

      \n

      Add Git Link

      \n

      package.json

      \n
      \"repository\": {
          \"type\": \"git\",
          \"url\": \"git_repository_link\"
      }
      \n

      npm publish - Using Semanctic Release

      \n
      npm install -g commitizen
      npm run commit
      git push
      \n

      npm publish - without Semantic Release LInk

      \n
      npm build
      npm login
      npm publish
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-fab":{"name":"nativescript-vue-fab","version":"2.0.4","license":"Apache-2.0","readme":"

      nativescript-vue-fab

      \n

      A Vue component that shows Material Design Fab button

      \n

      Installation

      \n
      npm i --save vue-clock-simple
      \n
      import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
      import CardViewPlugin from 'nativescript-material-cardview/vue';
      import FabPlugin from 'nativescript-vue-fab';
      Vue.use(ButtonPlugin);
      Vue.use(CardViewPlugin);
      Vue.use(FabPlugin);
      \n

      You also need to import the css style from your app style file. The reason is that this way you can easily override any css class.

      \n
      @import '../node_modules/nativescript-vue-fab/style';
      \n

      Usage

      \n

      Once installed, it can be used in a template as simply as:

      \n
      <Fab title=\"test\" iconClass=\"mdi\" :icon=\"'mdi-plus' | fonticon\" :iconOn=\"'mdi-share-variant' | fonticon\" @tap=\"onTap('main', $event)\">
          <FabItem title=\"test6\" iconClass=\"mdi\" icon=\"e\" color=\"red\" @tap=\"onTap('test6', $event)\" />
          <FabItem title=\"test5\" iconClass=\"mdi\" icon=\"d\" color=\"red\" @tap=\"onTap('test5', $event)\" />
          <FabItem title=\"test4\" iconClass=\"mdi\" icon=\"c\" color=\"red\" @tap=\"onTap('test4', $event)\" />
          <FabItem title=\"test3\" iconClass=\"mdi\" icon=\"b\" color=\"red\" @tap=\"onTap('test3', $event)\" />
          <FabItem title=\"test\" iconClass=\"mdi\" icon=\"a\" color=\"blue\" @tap=\"onTap('test', $event)\" />
      </Fab>
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-five-sdk":{"name":"nativescript-five-sdk","version":"1.0.0","license":"Apache-2.0","readme":"

      NativeScript Five Sdk

      \n

      (Optional) Prerequisites / Requirements

      \n

      NativeScript 5.4 above.

      \n

      Installation

      \n
      tns plugin add nativescript-five-sdk
      \n

      Add following dependencies to your app.gradle

      \n
      implementation 'com.google.android.gms:play-services-ads-identifier:+'
      \n

      Usage

      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ali":{"name":"nativescript-ali","version":"0.0.1","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-drawer-ts":{"name":"nativescript-template-drawer-ts","version":"1.4.0","license":"MIT","readme":"

      NativeScript Drawer Template

      \n

      A quick-and-dirty template for starting a new NativeScript app with drawer navigation pre-scaffolded in TypeScript.

      \n

      Full credit to TJ Van Toll for the original JavaScript version of this template.

      \n

      Usage

      \n

      tns create my-project-name --template nativescript-template-drawer-ts

      \n

      Screenshots

      \n

      \"\"\n\"\"

      \n
      \n

      \"\"\n\"\"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-appsee-ios":{"name":"nativescript-appsee-ios","version":"0.0.1","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-vue-externals":{"name":"nativescript-vue-externals","version":"0.2.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ylprogressbar":{"name":"nativescript-ylprogressbar","version":"0.0.5","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"jsx-to-nativescript":{"name":"jsx-to-nativescript","version":"0.0.1","license":"MIT","readme":"

      WIP.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@pekevski/typeorm":{"name":"@pekevski/typeorm","version":"1.0.8","license":"Apache-2.0","readme":"

      @pekevski/typeorm

      \n

      Usage

      \n
        \n
      1. \n

        Install the dependencies for nativescript sqlite and typeorm in your Nativescript project.

        \n
        npm i typeorm reflect-metadata nativescript-sqlite
        ns plugin add @pekevski/typeorm
        \n
        2. \n
      2. \n

        Create a database connection in your applications entry point eg. main.ts

        \n
        let driver = require('nativescript-sqlite');

        // use an iife to run it before angular starts
        (async () => {
            console.log('START APP')
            try {
                const connection = await createConnection({
                    database: 'test.db',
                    type: 'nativescript',
                    driver,
                    entities: [
                        User,
                        // ... more models here
                    ],
                    logging: true
                })

                // Dangerously drops all tables on app start if true
                // connection.synchronize(true);

                console.log(\"Connection Created\")
            } catch (err) {
                console.error(err)
            }
        })();
        \n
        3. \n
      3. \n

        Then follow the instructions on how to use TypeOrm

        \n
        4. \n
      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-tools":{"name":"ns-tools","version":"0.0.3","license":"ISC","readme":"

      NativeScript Tools

      \n

      Convenience Tools for working with NativeScript

      \n

      Install

      \n

      npm install -g ns-tools

      \n

      Usage

      \n
        Usage: nst [options] <cmd> <subCmd> [param...]

        Options:

          -h, --help         output usage information
          -V, --version      output the version number
          --css              Create CSS file only
          --js               Create JS file only
          --xml              Create XML file only
          --force-overwrite  Force overwrite existing files. !!USE WITH CAUTION!!
      \n

      Create new controller

      \n

      nst create controller test/newpage

      \n

      Results:

      \n
        Created: test/newpage.js
        Created: test/newpage.css
        Created: test/newpage.xml
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-pose":{"name":"nativescript-pose","version":"0.0.1","license":"ISC","readme":"

      Work in Progress

      \n

      Don't hesitate, if you want to contribute, your help is welcome :)

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-list-item":{"name":"nativescript-list-item","version":"1.0.0","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-template-drawer":{"name":"nativescript-template-drawer","version":"1.3.1","license":"MIT","readme":"

      NativeScript Drawer Template

      \n

      A quick-and-dirty template for starting a new NativeScript JavaScript app with drawer navigation pre-scaffolded.

      \n
      \n

      NOTE: Want to use TypeScript instead? Check out @ignaciofuentes’ TypeScript drawer template.

      \n
      \n

      Usage

      \n

      tns create my-project-name --template nativescript-template-drawer

      \n

      Screenshots

      \n

      \"\"\n\"\"

      \n
      \n

      \"\"\n\"\"

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-limp":{"name":"ns-limp","version":"6.1.0-dev","license":"Apache-2.0","readme":"

      ns-limp

      \n

      Official NativeScript Angular SDK for LIMP.

      \n

      Quick Start

      \n

      The current SDK has two dependencies:

      \n
        \n
      • jsrasgin
        • \n
      • nativescript-websockets\nThe dependencies should be automatically installed with the library.
        • \n
      \n

      Install ns-limp for NativeScript

      \n
      tns plugin add ns-limp
      \n

      How to Use

      \n
        \n
      1. Initiate the API, in your component, using :
        2. \n
      \n
      import { Component, OnInit } from '@angular/core';

      import { ApiService, Res } from 'ns-limp/api.service';

      @Component({
      \tselector: 'app-root',
      \ttemplateUrl: './app.component.html',
      \tstyleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {

      \tconstructor(private api: ApiService) {}

      \tngOnInit() {
      \t\tthis.api.init({
      \t\t\tapi: 'ws://localhost:8081/ws',
      \t\t\tanonToken: '__ANON',
      \t\t\tauthAttrs: ['email']
      \t\t});
      \t}
      }
      \n

      SDK Config

      \n

      When initialising the SDK, you should pass an object matching the interface SDKConfig, which has the following attributes:

      \n
        \n
      1. api (Required): The URI of LIMP app you are connecting to.
        2. \n
      2. anonToken (Required): LIMP app ANON_TOKEN.
        3. \n
      3. authAttrs (Required): As of LIMP APIv5.8, LIMP apps don't have strict User module attrs structure. This includes the authentication attrs that are set per app. This attribute represents an Array<string> referring to the same authentication attrs of the app.
        4. \n
      4. debug (Optional): A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.
        5. \n
      5. fileChunkSize (Optional): A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to LIMP app. Default 512000.
        6. \n
      6. authHashLevel (Optional): Either 5.0 or 5.6. With the change to auth hash generation introduced in APIv5.6 of LIMP, some legacy apps are left without the ability to upgrade to APIv5.6 and beyond due to hashes difference. SDKv5.7 is adding authHashLevel to allow developers to use higher APIs and SDKs with legacy apps. Default 5.6;
        7. \n
      \n

      Best Practices

      \n

      You can use the SDK 100% per your style of development, however we have some tips:

      \n

      Session Reauth

      \n

      The best practice to handle a reauth scenario is by attempting to checkAuth as soon as the connection with LIMP app is made. This can be made by subscribing to inited$ subject which notifies subscriptions about any changes to SDK initialisation status reflected as inited attribute in the SDK. Which can be done like:

      \n
      this.api.inited$.subscribe((init: boolean) => {
      \tif (init) {
      \t\t// SDK is inited and ready for your calls:
      \t\ttry {
      \t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
      \t\t\tthis.api.checkAuth();
      \t\t} catch { }
      \t}
      }, (err: Res<Doc>) => {
      \tconsole.log('inited$.err', err);
      });
      \n

      Auth State Detection

      \n

      Although, you can detect the user auth state in the subscription of the calls auth, reauth and checkAuth, the best practice is to use the global authed$ state Subject. You can do this by subscripting to authed$ in the same component (usually AppComponent) you are initiating the SDK at. This assures a successful checkAuth as part of the api.init subscription can be handled. The model suggested is:

      \n
      this.api.authed$.subscribe((session: Doc) => {
      \tif (session) {
      \t\tconsole.log('We are having an `auth` condition with session:', session);
      \t} else {
      \t\tconsole.log('We just got unauthenticated');
      \t}
      });
      \n

      Reconnecting on Disconnects

      \n

      Websockets are always-alive connections. A lot can go wrong here resulting in the connection with your LIMP app. To make sure you can always get reconnected recall SDK init method upon SDK becoming not inited:

      \n
      import { Component, OnInit } from '@angular/core';

      import { ApiService, Res } from 'ns-limp/api.service';

      @Component({
      \tselector: 'app-root',
      \ttemplateUrl: './app.component.html',
      \tstyleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {

      \tconstructor(private api: ApiService) {
      \t\tthis.api.inited$.subscribe((init: boolean) => {
      \t\t\tif (init) {
      \t\t\t\t// SDK is inited and ready for your calls:
      \t\t\t\ttry {
      \t\t\t\t\t// Wrap in try..catch to handle error thrown if no credentials cached
      \t\t\t\t\tthis.api.checkAuth();
      \t\t\t\t} catch { }
      \t\t\t} else {
      \t\t\t\t// SDK just got not inited, let's init SDK again:
      \t\t\t\tthis.init();
      \t\t\t}
      \t\t}, (err: Res<Doc>) => {
      \t\t\tconsole.log('      inited$.err', err);
      \t\t});
      \t}

      \tngOnInit() {
      \t\tthis.init();
      \t}

      \tinit(): void {
      \t\tthis.api.init({
      \t\t\tapi: '      ws://localhost:8081/ws',
      \t\t\tanonToken: '      __ANON',
      \t\t\tauthAttrs: ['      email']
      \t\t});
      \t}
      }
      \n

      API Reference

      \n

      debug

      \n

      A Boolean representing the debug mode status on the SDK. If true, you would see verbose messages in the browser console about messages transferred are received. Default false.

      \n

      fileChunkSize

      \n

      A Number representing the chunk size in bytes of the files being uploaded as part of the process of pushing binary data to LIMP app. Default 512000.

      \n

      session

      \n

      A Doc object representing the current session. It has value only when the user is authenticated.

      \n

      authed

      \n

      A Boolean storing the current state of user authentication.

      \n

      authed$

      \n

      A Subject<Boolean | Doc> you can subscribe to handle changes to state of user authentication.

      \n

      init()

      \n

      The base method to initiate a connection with LIMP app. This method returns an Observable for chain subscription if for any reason you need to read every message being received from the API, however subscribing to it is not required. Method definition:

      \n
      init(api: String, anonToken: String): Observable<Res<Doc>> { /*...*/ }
      \n

      close()

      \n

      The method to close current connection with LIMP app. This method returns an Observable for chain subscription if for any reason you need to read the resposne of the close call, however subscribing to it is not required. Method definition:

      \n
      close(): Observable<Res<Doc>> { /*...*/ }
      \n

      auth()

      \n

      The method you can use to authenticate the user. This method returns an Observable for chain subscription if for any reason you need to read the response of the auth call, however subscribing to it is not required. Method definition:

      \n
      auth(authVar: string, authVal: string, password: string): Observable<Res<Doc>> { /*...*/ }
      \n

      reauth()

      \n

      The method you can use to reauthenticate the user. The method would fail if no sid and token attrs are cached from earlier successful authentication call. This method is not supposed to be called directly, rather use checkAuth(). This method returns an Observable for chain subscription if for any reason you need the response of the reauth call, however subscribing to it is not required. Method definition:

      \n
      reauth(sid: string = this.cache.get('sid'), token: string = this.cache.get('token')): Observable<Res<Doc>> { /*...*/ }
      \n

      signout()

      \n

      The method you can use to signout the current user. Upon success, this methods removes all the cached attrs of the session. This method returns an Observable for chain subscription if for any reason you need the response of the signout call, however subscribing to it is not required. Method definition:

      \n
      signout(): Observable<Res<Doc>> { /*...*/ }
      \n

      checkAuth()

      \n

      The method to check whether there is a cached session and attempt to reauthenticate the user. This method would throw an error if no credentials are cached, thus you need to always wrap it in try..catch. This method returns an Observable for chain subscription if for any reason you need the response of the checkAuth call, however subscribing to it is not required. Method definition:

      \n
      checkAuth(): Observable<Res<Doc>> { /*...*/ }
      \n

      generateAuthHash()

      \n

      The method to use to generate authentication hashes. This is used internally for the auth() call. However, you also need this to generate the values when creating a user. Method definition:

      \n
      generateAuthHash(authVar: string, authVal: string, password: string): string { /*...*/ }
      \n

      deleteWatch()

      \n

      The method to delete a watch in progress. You can pass the watch ID you want to delete or __all to delete all watches. This method returns an Observable for chain subscription if for any reason you need the response of the deleteWatch call, however subscribing to it is not required. Method definition:

      \n
      deleteWatch(watch: string | '__all'): Observable<Res<Doc>> { /*...*/ }
      \n

      call()

      \n

      The most important method in the SDK. This is the method you use to call different endpoints in your LIMP app. Although the callArgs object in the params is having full definition of all call attrs, you still usually only need to pass either query and/or doc in most of the cases. Third param awaitAuth specify wheter the call should be queued until session is authed. Method definition:

      \n
      call(endpoint: string, callArgs: callArgs, awaitAuth: boolean = false): Observable<Res<Doc>> { /*...*/ }
      \n

      Contribution Guidelines

      \n

      Thank you for your interest in ns-limp.

      \n

      Please refer to Contribution Guidelines for more details on contributing to this project.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ngx-fusion-icon":{"name":"nativescript-ngx-fusion-icon","version":"0.1.3","license":"Apache 2.0","readme":"

      Develop a NativeScript plugin \"Build

      \n
      \n

      This repo is heavily based on @NathanWalker's Plugin Seed. Thanks Nathan!

      \n
      \n\n\n\n\n

      TL;DR

      \n

      The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

      \n
        \n
      1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript--yourplugin is the name of your plugin.
        2. \n
      2. cd nativescript-yourplugin/src
        3. \n
      3. npm run postclone
        4. \n
      4. npm run demo.ios or npm run demo.android to run the demo.
        5. \n
      5. In another command prompt/terminal npm run plugin.tscwatch to watch to typescript changes in the plugin and to autmatically apply them in the demo.
        6. \n
      \n

      Long Description

      \n

      What is NativeScript plugin seed?

      \n

      The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things presented here.\nWhat does the seed give you out of the box?

      \n
        \n
      • the plugin structure with option for easy development and debugging (see Development setup section below)
        • \n
      • a simple working plugin
        • \n
      • a demo project working with the plugin. It is useful during development and for running tests via Travis CI
        • \n
      • plugin tests
        • \n
      • a guideline how to structure your plugin README file that will be published to NPM
        • \n
      • a shell script to create your plugin package
        • \n
      • a proper .gitignore to keep GitHub tidy
        • \n
      • a proper .npmignore to ensure everyone is happy when you publish your plugin to NPM.
        • \n
      \n

      \"Plugin

      \n

      Plugin folder structure

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Folder/File nameDescription
      demoThe plugin demo source code
      demo/testsThe tests for your plugin
      srcThe plugin source code
      src/platform/androidPlugin Android specific configuration
      src/platform/iosPlugin ios specific configuration
      src/READMEYour plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
      src/scriptsThe postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
      publishContains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section
      \n

      Getting started

      \n
        \n
      1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript--yourplugin is the name of your plugin..
        2. \n
      2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
        3. \n
      3. Execute npm run postclone to:\n
          \n
        • configure your github username - it will be changed in the package.json for you
          • \n
        • configure your plugin name - all files and classes in the seed will be renamed for you
          • \n
        • stub your plugin README.md file
          • \n
        • create a new repository for your plugin
          • \n
        • npm link your plugin the demo app - this will install the plugin dependencies and will add a sym link to the plugin code in the demo project allowing you to do changes and review them in the demo without adding/removing the plugin every time you make a change. Read more about npm link. If you encounter an "EACCES" permission denied error, please fix you global npm permissions, which is perfectly explained here.
          • \n
        \n
        4. \n
      \n

      Now you can continue with the development of your plugin by using the Development setup described below.

      \n

      Development setup

      \n

      For easier development and debugging purposes continue with the following steps:

      \n
        \n
      1. Open a command prompt/terminal, navigate to src folder and run npm run demo.ios or npm run demo.android to run the demo.
        2. \n
      2. Open another command prompt/terminal, navigate to src folder and run npm run plugin.tscwatch to watch for file changes in your plugin.
        3. \n
      \n

      Now go and make a change to your plugin. It will be automatically applied to the demo project.

      \n

      NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario you need to use tns plugin add ../src from the demo so that the native libraries and changes in the above mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using npm run plugin.link from the src.

      \n

      Linking to CocoaPod or Android Arsenal plugins

      \n

      You will want to create these folders and files in the src folder in order to use native APIs:

      \n
      platforms --
        ios --
          Podfile
        android --
          include.gradle
      \n

      Doing so will open up those native apis to your plugin :)

      \n

      Take a look at these existing plugins for how that can be done very simply:

      \n\n

      Clean plugin and demo files

      \n

      Sometimes you may need to wipe away the node_modules and demo/platforms folders to reinstall them fresh.

      \n
        \n
      1. Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.
        2. \n
      \n

      Unittesting

      \n

      The plugin seed automatically adds Jasmine-based unittest support to your plugin.\nOpen demo/app/tests/tests.js and adjust its contents so the tests become meaningful in the context of your plugin and its features.

      \n

      You can read more about this topic here.

      \n

      Once you're ready to test your plugin's API go to src folder and execute one of these commands:

      \n
      npm run test.ios
      npm run test.android
      \n

      Publish to NPM

      \n

      When you have everything ready to publish:

      \n
        \n
      • Bump the version number in src/package.json
        • \n
      • Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)
        • \n
      \n

      If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

      \n

      NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

      \n

      TravisCI

      \n

      The plugin structure comes with fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from UnitTesting section. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is commited to a branch TravisCI will trigger a build testing the code.

      \n

      To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-unit-test-runner-essent":{"name":"nativescript-unit-test-runner-essent","version":"0.3.6","license":"Apache-2.0","readme":"

      Unit test runner for NativeScript

      \n

      Refer to the documentation of NativeScript CLI's tns test init command for usage.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-vuex-persist":{"name":"ns-vuex-persist","version":"0.1.0","license":"MIT","readme":"

      ns-vuex-persist

      \n

      A Vuex plugin that enables you to save the state of your NativeScript app to the SharedPreferences on Android and NSUserDefaults on iOS via the Application Settings module

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-coffeescript":{"name":"nativescript-dev-coffeescript","version":"0.0.6","license":"Apache-2.0","readme":"

      CoffeeScript support for NativeScript projects

      \n

      \"npm

      \n

      How to use

      \n
      $ tns install coffeescript
      \n

      The above command installs this module and installs the necessary hooks. CoffeeScript processing of all .coffee files inside app folder happens when the project is prepared for build.

      \n

      More info at http://coffeescript.org/.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-windowed-observable-array":{"name":"nativescript-windowed-observable-array","version":"0.0.1","license":"MIT","readme":"

      Observable Windowed FIFO Array

      \n

      Based in original NativeScript Observable Array.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-doorbell.io":{"name":"nativescript-doorbell.io","version":"0.0.6","readme":"

      nativescript-doorbell.io

      \n

      Doorbell.io plugin for nativescript

      \n

      Installation

      \n

      tns plugin add nativescript-doorbell.io

      \n

      Usage

      \n
      import { showDoorbellFeedback } from 'nativescript-doorbell.io';
      import { isIOS } from 'tns-core-modules/platform';

      const viewController = isIOS ? this.feedbackContainer.nativeElement.ios.viewController : null;
      showDoorbellFeedback(appId, appKey, viewController);
      \n

      FeedbackContainer is a StackLayout in the html of the page where the function is called from. It does not need to have any particular alignment. It is only used by iOS.

      \n

      appId and appKey can be obtained from Doorbell.io

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"speigg-nativescript-geolocation":{"name":"speigg-nativescript-geolocation","version":"0.0.9-patch.0","readme":"

      Welcome to the nativescript-geolocation plugin for NativeScript framework

      \n

      Prerequisites

      \n\n

      Install nativescript-geolocation plugin.

      \n

      Navigate to project folder and run NativeScript-CLI command tns plugin add nativescript-geolocation.

      \n

      This project can be used as an example how to use nativescript-geolocation and nativescript-googlemaps plugins.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-firebase":{"name":"nativescript-firebase","version":"0.1.1","license":{"type":"MIT"},"readme":"

      nativescript-firebase

      \n

      This is a Nativescript-compatible wrapper for the Firebase node.js SDK.

      \n

      License

      \n

      This module is licensed under the MIT license. Firebase and other modules have different licenses.

      \n

      Installation

      \n
      tns plugin add nativescript-firebase \n
      \n

      Usage

      \n

      Exactly the same as Firebase for node.js:

      \n
      var Firebase = require(\"nativescript-firebase\");

      var fb = new Firebase(\"some-app.firebaseio.com\");
      \n

      This module uses the actual Firebase node.js SDK (see package.json dependencies).

      \n

      How it works

      \n

      This module provides some dependencies required by the Firebase node.js SDK in the form of bundled modules. Versions 0.0.1 and 0.0.2 used a modified require function but I changed this because around version 1.5.0 of Nativescript it seems they replaced the global require with a parameter supplied to each module, meaning it couldn't be overwritten.

      \n

      The bundled modules are mostly just wrappers around other modules, or internal Nativescript functionality. They are:

      \n
        \n
      • _stream_duplex (uses readable-stream)
        • \n
      • _stream_readable (uses readable-stream)
        • \n
      • _stream_writable (uses readable-stream)
        • \n
      • emitter (uses tiny-emitter which is Nativescript compatible)
        • \n
      • faye-websocket (uses nativescript-websockets - see below)
        • \n
      • https (uses https-browserify which in turn uses Nativescript's XMLHttpRequest)
        • \n
      • inherits (uses inherits-browser.js)
        • \n
      \n

      I've set the version number of the faye-websocket and inherits wrappers to 999.9.9 to override the modules in deeper dependencies.

      \n

      The following modules are also used, and are Nativescript-compatible out of the box:

      \n
        \n
      • buffer
        • \n
      • events
        • \n
      • util (requires custom inherits)
        • \n
      \n

      The following global variables are also created to make the modified modules and Firebase work:

      \n
        \n
      • process with version, nextTick, platform and env
        • \n
      • window with XMLHttpRequest
        • \n
      • buffer using the buffer module
        • \n
      \n

      This is made possible by a modified version of NathanaelA's nativescript-websockets module, with a workaround for an SSL issue. This module is the substitute for the faye-websocket module required by Firebase.

      \n

      Limitations and warnings

      \n

      This module hasn't been rigorously tested. Here's what's working for me:

      \n
        \n
      • Logging in with a master key
        • \n
      • Logging in with an OAuth token (requires the https module)
        • \n
      • Retrieving some data with once() and on()
        • \n
      • Setting data with push()
        • \n
      \n

      Most features should be working, but there might be more bugfixes to come. I'm using this in a project of mine so it'll get further tested as I use it more.

      \n

      Note that this might have problems with Nativescript 1.5.1 due to this issue.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-cucumber":{"name":"nativescript-dev-cucumber","version":"0.1.4","license":"MIT","readme":"

      nativescript-dev-cucumber

      \n

      A helper package to make running E2E Appium tests in NativeScript apps easier.

      \n

      Usage

      \n

      Install it with:

      \n

      $ tns install cumcumber

      \n

      It will produce a sample test below the features dir. Now, run it with:

      \n
      $ npm run cucumber-android
      \n

      or

      \n
      $ npm run cucumber-ios-simulator
      \n

      The tests are standard Cumcumber.js tests.

      \n

      Getting started

      \n

      Create a new NativeScript Application (if necessary):

      \n

      $ tns create cucumberSample --ng

      \n

      Update the template to add "automationText" attributes (for Angular2 NS applications).

      \n

      app.component.html:

      \n
      <StackLayout>
          <Label text=\"Tap the button\" class=\"title\"></Label>
          
          <Button text=\"TAP\" (tap)=\"onTap()\" automationText=\"tapButton\"></Button>

          <Label [text]=\"message\" class=\"message\" textWrap=\"true\" automationText=\"messageLabel\"></Label>
      </StackLayout>
      \n

      Install cucumber:

      \n

      $ tns install cucumber

      \n

      Execute tests:

      \n
      $ npm run cucumber-android
      \n

      or

      \n
      $ npm run cucumber-ios-simulator
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@finalsite/rich-text-editor":{"name":"@finalsite/rich-text-editor","version":"0.1.1","license":"Apache-2.0","readme":"

      @finalsite/rich-text-editor

      \n
      ns plugin add @finalsite/rich-text-editor
      \n

      Installation

      \n

      Copy the assets folder to your project. You can choose to only copy the contenteditable or ckeditor4 files if your only going to use one or the other. Avoid updating these files in case of future updates. (The js file is the code that bridges the button commands to the chosen editor and the html file sets up the editor in the webview.)

      \n

      For NS8

      \n

      Add the following to your webpack.config.js

      \n
        webpack.Utils.addCopyRule({
          from: '@finalsite/rich-text-editor/assets/html/default.html',
          to: 'assets/html',
          context: webpack.Utils.project.getProjectFilePath('node_modules'),
        });

        webpack.Utils.addCopyRule({
          from: '@finalsite/rich-text-editor/assets/js/contenteditable.js',
          to: 'assets/js',
          context: webpack.Utils.project.getProjectFilePath('node_modules'),
        });
      \n

      For NS7

      \n

      e.g

      \n
      cp node_modules/@finalsite/rich-text-editor/assets/html/contenteditable.html app/assets/html/
      cp node_modules/@finalsite/rich-text-editor/assets/js/contenteditable.js app/assets/js/
      \n

      Using the default icon set

      \n
      cp node_modules/@finalsite/rich-text-editor/fonts/MaterialIcons-Regular.ttf app/fonts/
      \n

      And include the css file

      \n
      @import '~@finalsite/rich-text-editor/css/default.css';
      \n

      Goals

      \n
        \n
      • Provide a native UI for editing html with a webview containing a contenteditable
        • \n
      • Flexible for use with other WYSIWIG editors (CKEditor, tinyMCE)
        • \n
      • Accessible
        • \n
      \n

      Usage (Core)

      \n

      Important In order for the toolbar to display correctly you must use a GridLayout or RootLayout as your root layout

      \n

      See demo for usage

      \n

      Usage (Angular)

      \n

      // TODO

      \n

      Dependencies/Credit

      \n

      Depends on https://github.com/Notalib/nativescript-webview-ext for communicating with the web view

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-jade":{"name":"nativescript-dev-jade","version":"0.0.6","license":"Apache-2.0","readme":"

      Jade support for NativeScript projects.

      \n

      How to use

      \n
      $ tns install jade
      \n

      The above command installs this module and installs the necessary hooks. Jade processing of all .jade files inside app folder happens when the project is prepared for build.

      \n

      Example:

      \n
      Page(xmlns=\"http://schemas.nativescript.org/tns.xsd\")
        StackLayout
          Label(text=\"This is Label\")
          Button(text=\"This is Button\")
      \n

      Result:

      \n
      <Page xmlns=\"http://schemas.nativescript.org/tns.xsd\">
        <StackLayout>
          <Label text=\"This is Label\"></Label>
          <Button text=\"This is Button\"></Button>
        </StackLayout>
      </Page>
      \n

      More info at http://jade-lang.com/.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/ng2-balloon-msg-ns":{"name":"@synerty/ng2-balloon-msg-ns","version":"0.4.3","license":"MIT","readme":"

      Angular2 Balloon Message

      \n

      What it does : Shows a baloon on the top right corner\nof the screen to the user.

      \n

      It has 4 types of messages Success, Info, Warning and Error.

      \n

      The Error requires clicking on it before it will dismiss

      \n

      This balloon message NPM is written in TypeScript for Angular2 and uses bootstrap3 classes for style.

      \n

      Setup and example usgage usage :

      \n

      build file - angular-cli.json

      \n

      Add the bootstrap css file to your package builder file, in the case of angular-cli, add it to the apps.styles array

      \n
      {\n  ...\n  "apps": [\n    {\n      ...\n\n      "styles": [\n        ...\n        "../node_modules/bootstrap/dist/css/bootstrap.min.css"\n      ],\n
      \n

      app.component.html

      \n

      Add the following in your main component.html

      \n
      <ng2-balloon-msg></ng2-balloon-msg>\n
      \n

      app.module.ts

      \n

      Add the following lines to your apps main module imports (app.module.ts?)

      \n
      import { Ng2BalloonMsgModule, Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";\n
      \n

      Again, in the main module, Add Ng2BalloonMsgModule to the "imports" array.

      \n
      Ng2BalloonMsgModule\n
      \n

      And finally, Ng2BalloonMsgService to the "providers" array

      \n
      Ng2BalloonMsgService\n
      \n

      Example:

      \n
      @NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    Ng2BalloonMsgModule\n  ],\n  providers: [Ng2BalloonMsgService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n
      \n

      where-ever.component.ts

      \n

      To use the balloon service anywhere in your app :

      \n

      Import the service

      \n
      import {Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";\n
      \n

      Add it to your component constructor.

      \n
      constructor(private msgService: Ng2BalloonMsgService) {\n
      \n

      Now call the show functions

      \n
          this.msgService.showSuccess("This is a test SUCCESS");\n    this.msgService.showInfo("This is a test info");\n    this.msgService.showWarning("This is a test warning");\n    this.msgService.showError("This is a test error");\n
      \n

      You can also create modal dialogs

      \n
          let p = this.msgService.showMessage(\n        "This is a Error Confirm Cancel.",\n        UsrMsgLevel.Error,\n        UsrMsgType.ConfirmCancel, {\n            confirmText: "OK Confirm",      // Optional\n            cancelText: "Cancel xx",        // Optional\n            dialogTitle: "Awesome title"    // Optional\n    \n        }\n    );\n    \n    p.catch(err => {\n        console.log("Ignoring reject call from promise for this test.");\n    });\n
      \n

      Scaffold

      \n

      This project was generated with angular-cli version 1.0.0-beta.20-4.

      \n

      The default angular-cli test app was used as a test bed to show the messages.\nBelow are the standard instructions for the angular-cli usage.

      \n

      Development server

      \n

      Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

      \n

      Code scaffolding

      \n

      Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

      \n

      Build

      \n

      Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

      \n

      Running unit tests

      \n

      Run ng test to execute the unit tests via Karma.

      \n

      Running end-to-end tests

      \n

      Run ng e2e to execute the end-to-end tests via Protractor.\nBefore running the tests make sure you are serving the app via ng serve.

      \n

      Deploying to Github Pages

      \n

      Run ng github-pages:deploy to deploy to Github Pages.

      \n

      Further help

      \n

      To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nsprogresshud":{"name":"nsprogresshud","version":"1.0.1","license":"Apache-2.0","readme":"

      NSProgressHud

      \n

      Installation

      \n
      tns plugin add NSProgressHud
      \n

      API

      \n
          import { NSProgressHud } from 'NSProgressHud';

      export class DemoComponent implements OnInit {
          private hud: NSProgressHud;
          constructor() {}

          ngOnInit() {
              this.hud = new NSProgressHud();
          }


          show(type: string) {
              if (type === 'indeterminate') {
              this.hud.showProgress(null, { progressType: 'indeterminate', size: {height: 150, width: 150}});

              setTimeout(() => {
                  this.hud.dismiss();
              }, 2000);
              }

              if (type === 'determinate') {
              this.hud.showProgress(null, {hudColor: '#080452', progressType: 'determinate', size: {height: 150, width: 150}});
              }

              if (type === 'bar') {
              this.hud.showProgress(null, {hudColor: '#080452', progressType: 'bar', size: {height: 150, width: 150}});
              }

              if (type === 'annular') {
              this.hud.showProgress(null, {hudColor: '#080452', progressType: 'annular', size: {height: 150, width: 150}});
              }
          }

          showWithTimer() {
              let progress = 0;
              const taskWithTime = new BehaviorSubject({progress});
              this.hud.showProgress('Loading', {progressType: 'annular', size: {height: 150, width: 150}}. taskWithTime);
              setTimeout(() => {
                  progress += 1;
                  taskWithTime.next({progress})
              }, 1000)
          }
      }

              // Example Typing
          showProgress(message?: String, options?: ColorOption, progressStatus?: BehaviorSubject<{progress: number}>);

          export interface ColorOption {
              backgroundColor?: string;
              hudColor?: string;
              activityColor?: string;
              tintColor?: string;
              labelColor?: string;
              progressTick?: number;
              minShowTime?: number;
              tickInterval?: number;
              backgroundOpacity?: number;
              size?: {width: number, height: number};
              progressType: 'annular' | 'determinate' | 'bar' | 'indeterminate';
          }
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-jade-html":{"name":"nativescript-dev-jade-html","version":"0.0.7","license":"Apache-2.0","readme":"

      Jade support for NativeScript projects.

      \n

      How to use

      \n
      $ tns install jade
      \n

      The above command installs this module and installs the necessary hooks. Jade processing of all .jade files inside app folder happens when the project is prepared for build.

      \n

      Example:

      \n
      StackLayout
        Label(text=\"This is Label\")
        Button(text=\"This is Button\")
      \n

      Result:

      \n
      <StackLayout>
        <Label text=\"This is Label\"></Label>
        <Button text=\"This is Button\"></Button>
      </StackLayout>
      \n

      More info at http://jade-lang.com/.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-notification":{"name":"nativescript-notification","version":"0.0.1","license":"MIT","readme":"

      nativescript-notification

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"chimp-bits-teco-nativescript":{"name":"chimp-bits-teco-nativescript","version":"0.1.2","license":"MIT","readme":"

      Chimp Bits Template Compiler - Nativescript

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tests-hook":{"name":"nativescript-tests-hook","version":"0.0.1","license":"MIT","readme":"

      Nativescript tests hook

      \n

      Nativescript plugin that lets you handling your Nativescript tests like the angular style guide

      \n

      Nativescript is configured by default to let you put all your tests into tests folder but sometimes it can be a little annoying, as apps grow in size and components, having unit-tests next to implementations makes easier maintaining these tests, when we do development for web version of angular application, we put the test files in respective feature folders with .spec.ts or .spec.js suffix as per the angular style guide.

      \n

      Example

      \n
      app
      |-- myFeature
           |- myFeature.component.html
           |- myFeature.component.ts
           |- myFeature.component.spec.ts
      \n

      Just keep your .spec.ts or .spec.js files next to implementations and that's it. It moves all your tests from wherever they are into app to tests folder at tns' before-prepare hook time.

      \n

      Installation

      \n

      Npm

      \n
      npm install nativescript-tests-hook --save-dev
      \n

      Configuration

      \n

      The only thing you need to be aware of is when importing file dependencies in your tests you have to reference them as loading files from the app bundle according to Nativescript's Location Rules Docs to keep their references when they will move.

      \n

      Example

      \n
      import { MyFeatureComponent } from '~/myFeature/myFeature.component';
      import { AppComponent } from '~/app.component';

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-regions":{"name":"nativescript-plugin-regions","version":"1.0.2","license":"MIT","readme":"

      nativescript-plugin-regions

      \n

      This module installs a NativeScript after prepare hook that gives you full control about the development region and\nknown regions which are set in the auto generated platforms/ios/app-name.xcodeproj/project.pbxproj file.

      \n

      How to use

      \n

      Install

      \n
      tns plugin install nativescript-plugin-regions
      \n

      Configuration

      \n

      Create a file called region.nativescript.json in your project directory:

      \n
      {
        \"developmentRegion\": \"de\",
        \"knownRegions\": [
          \"de\"
        ]
      }
      \n

      Apply your configuration. Multiple known regions are supported.

      \n

      Please also make sure that you apply correct config inside your app/App_Resources/iOS/Info.plist file.\nAn example for the above region config would be:

      \n
      <key>CFBundleDevelopmentRegion</key>
      <string>de</string>
      <key>CFBundleLocalizations</key>
      <array>
        <string>de</string>
      </array>
      \n

      Usage

      \n

      You will need to execute tns platform clean ios in the CLI and tns prepare ios for the changes to take effect.

      \n

      Example workflow for a release build

      \n
      tns platform clean ios
      tns prepare ios --release
      tns build ios --bundle --env.uglify --env.aot  --release --forDevice
      \n

      Manual steps after project has been built

      \n

      This step is only required if you target a single language.

      \n

      In order to make iTunes Connect recognize a single language only you will need to open up your\nplatforms/ios/app-name.xcodeproj file, or platforms/ios/app-name.xcworkspace if available, with Xcode.

      \n

      Within Xcode apply the changes described in the following graphic.

      \n

      \"Manual

      \n

      You will only have to make these manual changes when you are creating an archive for iTunes Connect.\nIt doesn't really matter during development.

      \n

      License

      \n

      The NativeScript plugin nativescript-plugin-regions is open-sourced software licensed under the MIT license.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-universal-links":{"name":"nativescript-plugin-universal-links","version":"2.0.0","license":"MIT","readme":"

      Nativescript plugin Universal Links

      \n

      Universal links (IOS) and App Links (Android) support for NativeScript apps.

      \n

      When a user clicks a link to a website, it opens in the default web browser (Safari/Chrome). Universal linking allows your app to open instead of the web browser.

      \n

      Apple calls this Universal Links and Google calls it App Links, but they mean the same thing.

      \n

      Install this plugin using:\nnpm install nativescript-plugin-universal-links

      \n

      Implementing Universal Links

      \n

      Both iOS (9.0 and newer) and Android (all versions) provide good APIs for universal linking.

      \n

      IOS

      \n

      Apple introduced a new deep linking API in iOS 9.0 called “Universal Links”. It provides a better user experience than the hacky deep linking options that existed in iOS 8.0 and below.

      \n

      First step is to add a file to the root of your website called apple-app-site-association. This is a JSON file and it looks like this:

      \n
      {
          \"applinks\": {
              \"apps\": [],
              \"details\": [
                  {
                      \"appID\": \"your-team-id.com.example\",
                      \"paths\": [ \"/blog/*\"]
                  }
              ]
          }
      }
      \n
        \n
      • this file will be downloaded automatically by every single user that installs or upgrades your iOS app.
        • \n
      • it MUST be served over HTTPS with a valid SSL certificate. If you need to test this, I recommend using https://ngrok.io
        • \n
      • because this file is only fetched once when the user first installs or upgrades the app, this file must be live on your website before your app is released. This also means that you can’t add new deep linking url patterns to your app until you push out a new app update to force users to refresh the file.
        • \n
      \n

      Check out Apples' docs for more info.

      \n

      Next, you need to add the Associated Domains to your IOS project, either using XCode or manually adding the following code to your App_Resources/IOS/app.entitlements file. Please note the applinks: prefix, it won't work without it.

      \n
      <key>com.apple.developer.associated-domains</key>
      <array>
        <string>applinks:www.example.com</string>
      </array>
      \n

      Android

      \n

      In Android, universal linking is implemented using Intent Filters. By adding a BROWSABLE intent filter, you are saying that your app can be started by a user clicking on a website url.

      \n

      You don't need any server side changes for Android, only modify your app to add the Intent Filter.\nAdd this code to your App_Resources/Android/src/main/AndroidManifest.xml file:

      \n
      <activity
          android:name=\"com.tns.NativeScriptActivity\"
          android:label=\"@string/title_activity_kimera\" >

          <!-- Add this new section to your Activity -->
          <intent-filter>
              <action android:name=\"android.intent.action.VIEW\" />
              <category android:name=\"android.intent.category.DEFAULT\" />
              <category android:name=\"android.intent.category.BROWSABLE\" />

              <!-- Handle urls starting with \"https://www.example.com/blog\" -->
              <data android:scheme=\"https\"
                    android:host=\"www.example.com\"
                    android:pathPrefix=\"/blog\" />
          </intent-filter>
      </activity>
      \n

      Using the plugin

      \n

      Call the registerUniversalLinkCallback in your AppComponent's ngOnInit method to provide a callback method which will receive an Universal Link object every time your app is opened by a website link:

      \n
      import { Component, OnInit } from \"@angular/core\";
      import { registerUniversalLinkCallback } from \"nativescript-plugin-universal-links\";

      @Component({
        selector: \"my-app\",
        template: \"<page-router-outlet></page-router-outlet>\"
      })
      export class AppComponent {
        constructor() {}

        ngOnInit() {
          registerUniversalLinkCallback(ul => {
            // use the router to navigate to the screen
          });
        }
      }
      \n

      The universal link object has the following structure:

      \n
      {
        \"href\": \"https://www.example.com/blog?title=welcome\",
        \"origin\": \"https://www.example.com\",
        \"pathname\": \"/blog\",
        \"query\": \"?title=welcome\"
      }
      \n

      There is also a getUniversalLink() method that will return the last universal link which opened the app. This is useful in scenarios where your app is protected by a login screen. Check if the user is authenticated and then navigate to the desired path.

      \n
      import { getUniversalLink } from \"nativescript-plugin-universal-links\";

      const ul = getUniversalLink();
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-image-preview":{"name":"nativescript-image-preview","version":"0.1.0","readme":"

      NativeScript Image Preview

      \n

      A lightweight NativeScript plugin that wraps the JTSImageViewController CocoaPod.

      \n

      Installation

      \n
      tns install nativescript-image-preview
      \n

      Usage

      \n
      var imagePreview = require(\"nativescript-image-preview\");
      imagePreview.showImage(\"https://i.imgur.com/sKh7Z6R.png\");
      \n

      You can alternatively just use JTSImageViewController APIs documented on http://cocoadocs.org/docsets/JTSImageViewController/. This plugin makes them all available.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-filter-modules":{"name":"nativescript-hook-filter-modules","version":"1.0.5","license":{"type":"MIT","url":"https://github.com/markosko/nativescript-hook-filter-modules/blob/master/LICENSE"},"readme":"

      NativeScript-hook-filter-modules

      \n

      Shrinking size of built application by deleting defined set of node_modules inside tns_modules

      \n

      License

      \n

      This plugin is licensed under the MIT license by Marek Maszay

      \n

      Installation

      \n
      tns plugin add nativescript-hook-filter-modules
      \n

      Usages

      \n

      You don't use all the modules exposed by NativeScript in the core-modules. By default they're bundled with your application during a build.\nThis leads to a larger file size in the end. This hook will remove those modules during the build phase to reduce the overall application size.\nThis isn't as sophisticated as webpack but it works and is pretty simple to setup and use to reduce your app size on the device.

      \n

      The more you remove the smaller the final build will be of course. Remove only what you don't need or the app will crash if it tries to require a module.\nThis is easily fixed by updating the filter-modules.json and rebuilding your application.

      \n

      Example

      \n
      filter-modules.json
      \n

      In this example the hook will remove the connectivity module from your built application.

      \n
      {
          \"to_be_deleted\": [
              \"connectivity\"
          ],
          \"to_be_kept\": [

          ]
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-hello-world-ts":{"name":"tns-template-hello-world-ts","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript TypeScript Template

      \n

      This template creates a NativeScript app with the NativeScript hello world example,\nhowever, in this template the example is built with TypeScript.

      \n

      You can create a new app that uses this template with either the --template option.

      \n
      tns create my-hello-world-ts --template tns-template-hello-world-ts
      \n

      Or the --tsc shorthand.

      \n
      tns create my-hello-world-ts --tsc
      \n
      \n

      Note: Both commands will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-hello-world-ts).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-hello-world-ts --template nativescript-app-templates/packages/template-hello-world-ts
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-vue":{"name":"tns-template-blank-vue","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript Vue Blank Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-blank-vue --template tns-template-blank-vue
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-blank-vue --template nativescript-app-templates/packages/template-blank-vue
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      There is a single blank component located in:

      \n
        \n
      • /app/components/Home.vue - sets up an empty page layout.
        • \n
      \n

      Home page has the following components:

      \n
        \n
      • ActionBar - It holds the title of the page.
        • \n
      • GridLayout - The main page layout that should contains all the page content.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swift-3.0":{"name":"nativescript-swift-3.0","version":"1.0.0","readme":"

      NativeScript Swift 3.0

      \n

      A NativeScript plugin that sets Swift version to 3.0

      \n
      npm install --save nativescript-swift-3.0
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-carousel":{"name":"nativescript-ng2-carousel","version":"0.1.0","license":"MIT","readme":"

      {N} + Angular Carousel Slider

      \n

      A simple NativeScript + Angular images carousel for iOS and Android.

      \n

      Tested on:

      \n
        \n
      • Nativescript 4
        • \n
      • Typescript 3
        • \n
      • Angular 6
        • \n
      \n

      You can download older versions here for previous versions of Angular and Nativescript.

      \n

      I would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue.

      \n

      Demo

      \n

      You can check a reference application here created to show how to integrate the "{N} + Angular Carousel Slider".

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n
      iOsAndroid
      \"\"\"\"
      \n

      Getting started

      \n

      See demo for further details.

      \n
        \n
      1. Download and install the module via npm to your Nativescript project:
        2. \n
      \n
      \ncd your_tns_project_path/\nnpm install nativescript-ng2-carousel --save\n
      \n
        \n
      1. Add the CarouselDirective class to the declarations NgMoudle metadata:
        2. \n
      \n
      \n@NgModule({\n    declarations: [AppComponent, CarouselDirective],\n    bootstrap: [AppComponent],\n    imports: [NativeScriptModule],\n    schemas: [NO_ERRORS_SCHEMA]\n})\n
      \n
        \n
      1. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
        2. \n
      \n
      \n<GridLayout [carousel]=\"images\" carouselLabelOverlay=\"true\" carouselSpeed=\"2000\">\n    \n</GridLayout>\n
      \n

      Add images from URL to your component:

      \n
      \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
      \n

      You can also add images from your assets folder or resources folder using file attribute instead of url attribute:

      \n
      \n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },\n            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n
      \n
        \n
      1. CSS styling:
        2. \n
      \n
      \n/** Slider image */\n.slider-image {\n\n}\n\n/** Slider title format */\n.slider-title {\n    color: #fff;\n    font-weight: bold;\n    background-color: rgba(125, 125, 125);\n    padding: 8;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n/** Arrows */\n.arrow {\n    color: #ffffff;\n    font-size: 32;\n    vertical-align: middle;\n    padding: 10;\n}\n\n/** Arrow left wrapper */\n.arrow.arrow-left {\n\n}\n\n/** Arrow right */\n.arrow.arrow-right {\n\n}\n
      \n

      Supported attributes

      \n

      Currently directive supported attributes:

      \n
        \n
      • carousel list of images as JSON or CarouselSlide class, accepted parameters (title?, url?, file?)
        • \n
      • carouselSpeed (optional) defines the interval (number in ms) to wait before the next slide is shown
        • \n
      • carouselAnimationSpeed (optional) defines the animation speed (number in ms)
        • \n
      • carouselArrows (optional) arrow type, accepted values none, small, normal, bold or narrow (default normal)
        • \n
      • carouselLabelOverlay (optional) silde title over image, accepted values true or false (default false)
        • \n
      \n

      Changelog

      \n

      Version 0.1.0

      \n
        \n
      • Fix bug "Unable to find directive"
        • \n
      • Demo folder moved https://github.com/alcoceba/ngCarouselDirectiveDemo
        • \n
      • Improved documentation
        • \n
      • Added requiered dependencies
        • \n
      • Updated to Nativescript 4 + Angular 6
        • \n
      \n

      Version 0.0.5

      \n
        \n
      • Possibility to load images from resources folder in Android and iOS
        • \n
      \n

      Version 0.0.4

      \n
        \n
      • Updated to Nativescript 3 + Angular 4
        • \n
      \n

      Version 0.0.3

      \n
        \n
      • Package.json fixes
        • \n
      • Minor fixes
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"4dev-nativescript-admob":{"name":"4dev-nativescript-admob","version":"0.0.5","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@alexkunin/loopback-sdk-builder":{"name":"@alexkunin/loopback-sdk-builder","version":"2.3.2","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-swift-2.3":{"name":"nativescript-swift-2.3","version":"1.0.0","readme":"

      NativeScript Swift 2.3

      \n

      A NativeScript plugin that sets Swift version to 2.3

      \n
      npm install --save nativescript-swift-2.3
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-ajax":{"name":"tns-ajax","version":"0.0.5","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-hook-env-files":{"name":"nativescript-hook-env-files","version":"0.1.1","readme":"

      nativescript-hook-env-files

      \n

      A nativescript hook to replace file according to NODE_ENV value.\nInspired by nativescript-hook-debug-production

      \n

      Example

      \n

      Project directory structure

      \n
      app
      ├ env.development.json # {\"production\": false}
      ├ env.production.json  # {\"production\": true}
      ├ main.ts
      ├ ...
      \n

      In your app code

      \n
      const env = require('./env.json');

      console.log(env.production); // 'true' if tns build or run with NODE_ENV=production, otherwise 'false'.
      \n

      Webpack+Angular support

      \n

      Add hostReplacementPaths option to NativescriptAngularCompilerPlugin in your webpack.config.js.

      \n
      // utility method for getting replacement targets.
      const { getReplacementPaths } = require('nativescript-hook-env-files/webpack');
      \n
      new nsWebpack.NativeScriptAngularCompilerPlugin({
          entryModule: resolve(appPath, \"app.module#AppModule\"),
          tsConfigPath: join(__dirname, \"tsconfig.esm.json\"),
          skipCodeGeneration: !aot,
          platformOptions: {
              platform,
              platforms,
          },
          hostReplacementPaths: getReplacementPaths(appFullPath, process.env.NODE_ENV || 'development'), // add this line
      }),
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@lupascudan/loopback-sdk-builder":{"name":"@lupascudan/loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-template-js":{"name":"ns-template-js","version":"6.0.0","license":"Apache-2.0","readme":"

      NativeScript Core Blank Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-blank-js --template ns-template-js
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/ns-template-js).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone repo locally
      git clone git@github.com:shiv19/ns-js-template.git

      # create app template from local source
      tns create my-blank-js --template ns-template-js
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root component is located at:

      \n
        \n
      • app-root.xml - sets up a Frame that lets you navigate between pages.
        • \n
      \n

      There is a single blank component located in:

      \n
        \n
      • /home/home-page.js - sets up an empty page layout.
        • \n
      \n

      Home page has the following components:

      \n
        \n
      • ActionBar - It holds the title of the page.
        • \n
      • GridLayout - The main page layout that should contains all the page content.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"loopback-sdk-builder-ny":{"name":"loopback-sdk-builder-ny","version":"2.3.1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-places":{"name":"nativescript-google-places","version":"0.0.3","readme":"

      nativescript-gplaces

      \n

      Read Google Places API Documentation at https://developers.google.com/places/android-api/?hl=pt-br

      \n

      All Credits for https://github.com/mobilemindtec/nativescript-google-places

      \n

      Api Configuration

      \n

      Create a new key to Google Places Api Web Service

      \n

      Use in app

      \n
        var GPlaces = require(\"nativescript-gplaces\");
        GPlaces.init({
                      googleServerApiKey: 'your_api_Key',
                      language: 'es',
                      radius: '100000',
                      location: '20.651130,-103.426464',
                      errorCallback: function(text){console.log(text)}
                     );
      \n

      Place autocomplete

      \n
        // run autocomplete
        GPlaces.queryAutoComplete(textSearch.text, types).then(function(result){
            // predictions list
        })
      \n

      Place search

      \n
        // run search
        GPlaces.search(textSearch.text, types).then(function(result){
            // search list
        })
      \n

      Get place details

      \n
       // get place details
        GPlaces.details(placeId).then(function(place){
            // place result
        })
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"herbecon-loopback-sdk-builder":{"name":"herbecon-loopback-sdk-builder","version":"2.3.1","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-flex-nativescript":{"name":"ns-flex-nativescript","version":"0.0.4","license":"ISC","readme":"

      \"Build

      \n

      generate npm package

      \n

      This is cli to create boiler plate for npm package project.

      \n

      Getting Started

      \n

      Installation

      \n

      npm install -g ns-flex-nativescript

      \n

      Usage

      \n

      $ ns-flex-nativescript

      \n

      \"create\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      OptionsDefaultDescription
      project namecreate-npm-packagenpm package name or project name
      semacntic releeasefalse or Noadd semantic denpendencies
      travis setupfalse or Noconfig travis setup .travis.yml
      install dependenciesfalse or Noinstall project dependencies after creating project
      \n

      Semantic Release

      \n
      npm install -g semantic-release-cli
      cd your-module
      semantic-release-cli setup
      \n\"semantic\"\n

      Travis CI Setup

      \n

      Project Structure

      \n

      \"project\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      File/FolderDescriptions
      project/index.jsentry file while creating npm module.
      src/lib/index.jsmain file that you want to publish in npm.
      src/lib/index.spec.jstest file for above file.
      styles/folder for styles if you are creating UI npm module.
      test/index.jsfor testing build files after build.
      .travis.ymlfor Travis CI
      \n

      Commands

      \n
        \n
      • \n

        Run project ( will start project with watch-bootstrap and watch-custom ) webpack.dev.config.js
        \nnpm start

        \n
        • \n
      • \n

        Run Test ( will run test for src/lib/index.spec.js )
        \nnpm run test

        \n
        • \n
      • \n

        Build ( will bundle the src/lib/index.js to /build folder ) webpack.prod.config.js
        \nnpm run build

        \n
        • \n
      • \n

        Test Build ( will test the build module /build/index.js )
        \nnpm run test-build

        \n
        • \n
      \n

      Create Simple NPM package

      \n

      cd your-module

      \n

      Install Dependencies

      \n

      npm installl

      \n

      Add Git Link

      \n

      package.json

      \n
      \"repository\": {
          \"type\": \"git\",
          \"url\": \"git_repository_link\"
      }
      \n

      npm publish - Using Semanctic Release

      \n
      npm install -g commitizen
      npm run commit
      git push
      \n

      npm publish - without Semantic Release LInk

      \n
      npm build
      npm login
      npm publish
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"angular-oidc-client":{"name":"angular-oidc-client","version":"1.0.9","license":"Apache-2.0","readme":"

      # Angular OIDC Client

      \n

      Universal OpenID Connect Client library for Angular

      \n

      Installation:

      \n

      npm install angular-oidc-client --save

      \n

      Usage

      \n

      auth.ts (NativeScript)

      \n
      import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        text=""\n        textWrap="true"\n        class="icon-moon rotating"\n        verticalAlignment="middle"\n        style="font-size: 30; display: inline-block;"\n        horizontalAlignment="center">\n    </Label>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
      \n

      auth.ts (Web)

      \n
      declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router, ActivatedRoute } from "@angular/router";\nimport { HttpClient } from "@angular/common/http";\nimport * as url from "urlparser";\nimport { AuthService } from "angular-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private http: HttpClient,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""]);\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"]);\n                },\n                clientId: "...",\n                clientSecret: "...",\n                REDIRECT: "...",\n                openIdConfig: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    public ngOnInit() {\n        this.pageRoute.queryParams\n        .subscribe((params) => {\n        let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n        });\n        this.loadStarted({url: window.location.href });\n    }\n\n    private parseURLCode(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return code;\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e) {\n        let authCode = this.parseURLCode(e.url);\n        if (authCode) {\n            this.loading = true;\n            this.authService.init(authCode);\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
      \n

      app.module.ts

      \n
      ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService, AuthInterceptor } from "angular-oidc-client";\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
      \n

      Notes:

      \n

      Please setup the Redirect Condition OpenID setting to equal "*" (Any)

      \n

      Copyright (C)2018 @medozs Apache-2.0 License

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"react-nativescript-date-picker":{"name":"react-nativescript-date-picker","version":"1.0.2","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mobile-nativescript":{"name":"mobile-nativescript","version":"0.0.1","license":"ISC","readme":"

      \"Build

      \n

      generate npm package

      \n

      This is cli to create boiler plate for npm package project.

      \n

      Getting Started

      \n

      Installation

      \n

      npm install -g mobile-nativescript

      \n

      Usage

      \n

      $ mobile-nativescript

      \n

      \"create\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      OptionsDefaultDescription
      project namecreate-npm-packagenpm package name or project name
      semacntic releeasefalse or Noadd semantic denpendencies
      travis setupfalse or Noconfig travis setup .travis.yml
      install dependenciesfalse or Noinstall project dependencies after creating project
      \n

      Semantic Release

      \n
      npm install -g semantic-release-cli
      cd your-module
      semantic-release-cli setup
      \n\"semantic\"\n

      Travis CI Setup

      \n

      Project Structure

      \n

      \"project\"

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      File/FolderDescriptions
      project/index.jsentry file while creating npm module.
      src/lib/index.jsmain file that you want to publish in npm.
      src/lib/index.spec.jstest file for above file.
      styles/folder for styles if you are creating UI npm module.
      test/index.jsfor testing build files after build.
      .travis.ymlfor Travis CI
      \n

      Commands

      \n
        \n
      • \n

        Run project ( will start project with watch-bootstrap and watch-custom ) webpack.dev.config.js
        \nnpm start

        \n
        • \n
      • \n

        Run Test ( will run test for src/lib/index.spec.js )
        \nnpm run test

        \n
        • \n
      • \n

        Build ( will bundle the src/lib/index.js to /build folder ) webpack.prod.config.js
        \nnpm run build

        \n
        • \n
      • \n

        Test Build ( will test the build module /build/index.js )
        \nnpm run test-build

        \n
        • \n
      \n

      Create Simple NPM package

      \n

      cd your-module

      \n

      Install Dependencies

      \n

      npm installl

      \n

      Add Git Link

      \n

      package.json

      \n
      \"repository\": {
          \"type\": \"git\",
          \"url\": \"git_repository_link\"
      }
      \n

      npm publish - Using Semanctic Release

      \n
      npm install -g commitizen
      npm run commit
      git push
      \n

      npm publish - without Semantic Release LInk

      \n
      npm build
      npm login
      npm publish
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-blank-crank":{"name":"tns-template-blank-crank","version":"6.5.3","license":"Apache-2.0","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-stylus":{"name":"nativescript-dev-stylus","version":"0.0.3","license":"Apache-2.0","readme":"

      Stylus for NativeScript

      \n

      How to use

      \n
      $ tns install stylus
      \n

      The above command installs this module and installs the necessary hooks. Stylus CSS pre-processing of all .styl files inside app folder happens when the project is prepared for build.\nThis is based off the less plugin.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"oauth2-oidc-client":{"name":"oauth2-oidc-client","version":"1.2.3","license":"Apache-2.0","readme":"

      # OAUTH2/OIDC Client

      \n

      Universal OAUTH2/OpenID Connect Client library

      \n

      Installation:

      \n

      npm install oauth2-oidc-client --save

      \n

      Usage

      \n

      auth.ts (Angular NativeScript)

      \n
      import { Component, OnInit } from "@angular/core";\nimport { RouterExtensions, PageRoute } from "nativescript-angular/router";\nimport * as webViewModule from "tns-core-modules/ui/web-view";\nimport * as url from "urlparser";\nimport { AuthService } from "oauth2-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport { map, filter, switchMap, timeout } from "rxjs/operators";\nimport "rxjs/add/operator/switchMap";\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <ActivityIndicator row="1" #activityIndicator [busy]="loading" width="100" height="100" class="activity-indicator"></ActivityIndicator>\n    <WebView\n        visibility="{{ !loading ? 'visible' : 'collapsed' }}"\n        [src]="authURL"\n        (loadStarted)="loadStarted($event)"></WebView>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: RouterExtensions,\n        private pageRoute: PageRoute,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                // username: "?...",\n                // password: "?...",\n                // REDIRECT: "?...",\n                // SCOPE: "openid+email+profile", // default\n                // state: Math.random().toString(36).substring(7),\n                // nonce: "?...",\n                oauth2Config: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    // authorization_code login authentication\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                this.login();\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLData(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let state = parsedURL.query ? parsedURL.query.params["state"] : null;\n        let nonce = parsedURL.query ? parsedURL.query.params["nonce"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return {code, state, nonce};\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        this.authURL = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        this.authURL = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }\n\n    public loadStarted(e: webViewModule.LoadEventData) {\n        let authData = this.parseURLData(e.url);\n        if (authData && authData.state === this.authService.config.state) {\n            this.loading = true;\n            this.authURL = "";\n            this.authService.init(authData.code); //  null for password grant\n        }\n    }\n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { NativeScriptRouterModule } from "nativescript-angular/router";\nimport { NativeScriptCommonModule } from "nativescript-angular/common";\nimport { NativeScriptFormsModule } from "nativescript-angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        NativeScriptFormsModule,\n        NativeScriptCommonModule,\n        NativeScriptRouterModule,\n        NativeScriptRouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
      \n

      auth.ts (Angular Web)

      \n
      declare var document;\nimport { Component, OnInit } from "@angular/core";\nimport { Router } from "@angular/router";\nimport * as url from "urlparser";\nimport { AuthService } from "oauth2-oidc-client";\nimport { timer } from "rxjs/observable/timer";\nimport "rxjs/add/operator/switchMap";\n\n@Component({\n    moduleId: module.id,\n    template: // html\n    `\n    <style>\n        .icon-moon {\n            font-family: "icomoon";\n        }\n        @keyframes rotating {\n            from {\n            transform: rotate(0deg);\n            }\n            to {\n            transform: rotate(360deg);\n            }\n        }\n        .rotating {\n            animation: rotating 2s linear infinite;\n        }\n    </style>\n    <Label\n        visibility="{{ loading ? 'visible' : 'collapsed' }}"\n        class="icon-moon rotating"\n        innerText=""\n        style="\n        font-size: 30;\n        display: inline-block;\n        position: absolute;\n        top:50%;\n        left:50%;">\n    </Label>\n    `\n})\nexport class AuthComponent implements OnInit {\n    public authURL;\n    public loading: boolean = true;\n    public constructor(\n        private router: Router,\n        private pageRoute: ActivatedRoute,\n        private authService: AuthService) {\n            this.authService.config = {\n                authRoute: () => {\n                    this.router.navigate([""], { clearHistory: true });\n                },\n                homeRoute: () => {\n                    this.router.navigate(["/home"], { clearHistory: true });\n                },\n                clientId: "...",\n                clientSecret: "...",\n                // username: "?...",\n                // password: "?...",\n                REDIRECT: window.location.href,\n                // SCOPE: "openid+email+profile", // default\n                // state: Math.random().toString(36).substring(7),\n                // nonce: "?...",\n                oauth2Config: {\n                    "issuer": "...",\n                    "authorization_endpoint": "...",\n                    "token_endpoint": "...",\n                    "token_introspection_endpoint": "...",\n                    "userinfo_endpoint": "...",\n                    "end_session_endpoint": "..."\n                }\n            };\n    }\n\n    // authorization_code login authentication\n    public ngOnInit() {\n        this.pageRoute.activatedRoute\n        .switchMap(activatedRoute => activatedRoute.queryParams)\n        .forEach((params) => {\n            let action = params["action"];\n            if (action == null || action === "login") {\n                let authData = this.parseURLData(window.location.href);\n                if (authData && authData.state === this.authService.config.state) {\n                    this.loading = true;\n                    this.authURL = "";\n                    this.authService.init(authData.code); //  null for password grant\n                } else { \n                    this.login();\n                }\n            } else if (action === "logout") {\n                this.logout();\n            }\n            });\n    }\n\n    private parseURLData(urlstr) {\n        let parsedURL = url.parse(urlstr);\n        let code = parsedURL.query ? parsedURL.query.params["code"] : null;\n        let state = parsedURL.query ? parsedURL.query.params["state"] : null;\n        let nonce = parsedURL.query ? parsedURL.query.params["nonce"] : null;\n        let redirectName = parsedURL.path.base;\n        if (code && redirectName.match(`\\\\w*/?${this.authService.config.REDIRECT}`)) {\n            return {code, state, nonce};\n        } else {\n            return null;\n        }\n    }\n\n    public login() {\n        window.location.href = this.authService.login();\n        timer(1000).subscribe(x => { this.loading = false; });\n    }\n\n    public logout() {\n        this.loading = true;\n        window.location.href = this.authService.logout();\n        timer(1000).subscribe(x => this.login());\n    }\n\n    public getUser() {\n        this.authService.getUser().subscribe(x => console.log(JSON.stringify(x)));\n    }        \n}\n\nimport { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";\nimport { RouterModule } from "@angular/router";\nimport { CommonModule } from "@angular/common";\nimport { FormsModule } from "@angular/forms";\nimport { Route } from "@angular/router";\n\nexport const routerConfig: Route[] = [\n    {\n        path: "",\n        component: AuthComponent\n    }\n];\n@NgModule({\n    schemas: [NO_ERRORS_SCHEMA],\n    imports: [\n        FormsModule,\n        CommonModule,\n        RouterModule,\n        RouterModule.forChild(routerConfig)\n    ],\n    declarations: [AuthComponent]\n})\n\nexport class AuthModule {\n    constructor() { }\n}\n
      \n

      app.module.ts (Angular)

      \n
      ...\nimport { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";\nimport { AuthService } from "oauth2-oidc-client";\n\nimport {\n    HttpRequest,\n    HttpHandler,\n    HttpEvent,\n    HttpInterceptor,\n    HttpHeaders\n} from "@angular/common/http;\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n    constructor(private authService: AuthService) {}\n    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n\n        const token = `Bearer ${this.authService.getToken()}`;\n        req = req.clone({\n        setHeaders: {\n            Authorization: token\n        }\n        });\n        return next.handle(req);\n    }\n}\n\n@NgModule({\n    schemas: [...],\n    declarations: [\n        ...,\n    ],\n    bootstrap: [..],\n    imports: [\n        ...,\n    ],\n    providers: [\n        AuthService,\n        {\n            provide: HTTP_INTERCEPTORS,\n            useClass: AuthInterceptor,\n            multi: true\n        }\n    ]\n})\nexport class AppModule { }\n...\n
      \n

      Auth.js (Web)

      \n
      const authService = new (require("oauth2-oidc-client").AuthService)();\nauthService.config = {...}\nauthService.init(/*code*/);\nvar token = authService.getToken();\n...........\n
      \n

      Notes:

      \n
      Please setup the Redirect Condition OAuth2/OpenID setting to equal "*" (Any)  \n
      \n

      Copyright (C)2018 @medozs Apache-2.0 License

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"surplus-nativescript":{"name":"surplus-nativescript","version":"1.0.1","license":"ISC","readme":"

      surplus-nativescript

      \n

      Nativescript and s.js entegration. An example project is here

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@jadoux/loopback-sdk-builder":{"name":"@jadoux/loopback-sdk-builder","version":"2.3.3","license":"MIT","readme":"

      LoopBack SDK Builder

      \n
      \n

      Disclaimer: This project is not longer directly extended or improved by the author Jonathan Casarrubias, though any PRs improving or extending the SDK Builder are continuously being accepted and integrated in a weekly basis. Therefore, this module keeps growing as long as the community keeps sending patches.

      \n
      \n

      The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2+.

      \n

      The LoopBack SDK Builder will explore your LoopBack Application and will automatically build everything you need to start writing your Angular 2 Applications right away. From Interfaces and Models to API Services and Real-time communications.

      \n

      NOTE: This sdk builder is not compatible with LoopBack 4.

      \n

      Installation

      \n
      $ cd to/loopback/project
      $ npm install --save-dev @mean-expert/loopback-sdk-builder
      \n

      Documentation

      \n

      LINK TO WIKI DOCUMENTATION

      \n

      Contribute

      \n

      Most of the PRs fixing any reported issue or adding a new functionality are being accepted.

      \n

      Use the development branch to create a new branch from. If adding new features a new unit test will be expected, though most of the patches nowadays are small fixes or tweaks that usually won't require a new test.

      \n

      OIDC-SSO Service

      \n

      A new campaing to call developers to register as beta testers for the OnixJS Single Sign-On Service is active now. This campaing will be running during the month of June 2018, allowing all of those registered users to have early access during closed beta.

      \n
        \n
      • Closed beta access will be active starting from July 2018.
        • \n
      \n

      Register now and get the chance to have an unlimited annual enterprise membership for free.

      \n

      [REQUEST EARLY ACCESS HERE]

      \n

      Technology References:

      \n
        \n
      • OnixJS: Enterprise Grade NodeJS Platform implementing Industry Standards & Patterns in order to provide the best Connectivity, Stability, High-Availability and High-Performance.
        • \n
      • Single Sign-On (SSO): Is a property of access control of multiple related, yet independent, software systems. With this property, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.
        • \n
      • OpenID Connect (OIDC): OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner.
        • \n
      \n

      Contact

      \n

      Discuss features and ask questions on @johncasarrubias at Twitter.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"install-nativescript":{"name":"install-nativescript","version":"0.3.3","license":"Apache 2.0","readme":"

      install-nativescript

      \n

      Package that helps you install Node.js, npm and nativescript-cli from within an Electron app. Works only on Windows and Mac.

      \n

      Usage

      \n
        \n
      1. First install the package:
        2. \n
      \n
      npm install --save install-nativescript
      \n
        \n
      1. Now use it in your code:
        2. \n
      \n
      const installNativeScript = require(\"install-nativescript\");

      installNativeScript.ensureNode()
          .then(() => {
              return installNativeScript.ensureCLI();
          })
      \n

      Public API

      \n\n

      ensureNode

      \n

      The ensureNode method checks if node is installed on the machine. In case it cannot detect it, the method downloads a node installer and runs it. You can pass a specific node version to install. In case it is not provided, the method installs version 10.15.3.

      \n

      Note: This method changes process.env so that after it succeeds, you can install and detect globally installed npm modules.

      \n

      Usage:

      \n
      const installNativeScript = require(\"install-nativescript\");

      installNativeScript.ensureNode();
      \n

      ensureCLI

      \n

      The ensureCLI method checks if you have NativeScript CLI installed globally on your machine.

      \n
        \n
      • In case it cannot detect it, the method installs it globally using npm. You can pass a specific NativeScript CLI version to install. In case it is not provided, the method installs the latest official version.
        • \n
      • In case it detects a version, the method will update it in case you pass a specific versionRange and the current version does not satisfy the requirement. Again, in case a specific version is not provided, the method installs the latest official version.
        • \n
      \n

      Usage:

      \n
      const installNativeScript = require(\"install-nativescript\");

      installNativeScript.ensureCLI();
      \n

      getNPMFoldersWithMissingPermissions

      \n

      One of the reasons why ensureCLI method may fail on Mac machines, is in case some npm folders require root access. This method can help you detect this case. Just pass the error from ensureCLI and it will return an array of folders that might require root access. In case the array is empty, the error is not related to missing permissions.

      \n

      Usage:

      \n
      const installNativeScript = require(\"install-nativescript\");

      installNativeScript.ensureCLI()
          .catch((error) => {
              const permissionsFolders = installNativeScript.getNPMFoldersWithMissingPermissions(error);
          });
      \n

      fixMissingNPMPermissions

      \n

      The fixMissingNPMPermissions method accepts an array of folders and tries to change their permissions.

      \n

      Usage:

      \n
      const installNativeScript = require(\"install-nativescript\");

      installNativeScript.ensureCLI()
          .catch((error) => {
              const permissionsFolders = installNativeScript.getNPMFoldersWithMissingPermissions(error);

              if (permissionsFolders.length === 0) {
                  return Promise.reject(error);
              }

              // It is a good idea to ask the user at this point if they approve the change and then change the permissions.

              return installNativeScript.fixMissingNPMPermissions(permissionsFolders)
                  .then(() => {
                      return installNativeScript.ensureCLI();
                  });
          });
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ns-navigation-tabbar":{"name":"ns-navigation-tabbar","version":"0.1.2","license":"ISC","readme":"

      NavigationTabBar

      \n

      This is a nativescript port of Devlight's Android TabBar Implementation

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@vishnuchd/nativescript-woocommerce-api":{"name":"@vishnuchd/nativescript-woocommerce-api","version":"1.0.2","license":"Apache-2.0","readme":"

      @vishnuchd/nativescript-woocommerce-api

      \n

      A wrapper that connects Nativescript to the WooCommerce API

      \n

      Installation

      \n
      ns plugin add @vishnuchd/nativescript-woocommerce-api
      \n

      License

      \n

      Apache License Version 2.0

      \n

      Setup

      \n

      You will need a consumer key and consumer secret to call your store's WooCommerce API. You can find instructions here

      \n

      Include the 'NativescriptWoocommerceApi' module within your script and instantiate it with a config:

      \n
      import { NativescriptWoocommerceApi} from '@vishnuchd/nativescript-woocommerce-api';

      const WooCommerceAPI = {
        url: 'https://yourstore.com', // Your store URL
        ssl: true,
        consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
        consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
        wpAPI: true, // Enable the WP REST API integration
        version: 'wc/v3', // WooCommerce WP REST API version
        queryStringAuth: true
      };
      \n

      Instantiating a WooCommerceAPI instance without a url, consumerKey or secret will result in an error being thrown

      \n

      Calling the API

      \n

      Your WooCommerce API can be called once the WooCommerceAPI object has been instantiated (see above).

      \n

      GET

      \n
      let WooCommerceAPI = new NativescriptWoocommerceApi(options)
      WooCommerceAPI.invokeGet('products')
                .then(data => {
                \tconsole.log(data);
                })
                .catch(error => {
                \tconsole.log(error);
                });
      \n

      GET WITH PARAMETER

      \n
      WooCommerceAPI.invokeGet('orders', { customer: userID, per_page: 100 })
                .then(data => {
                \tconsole.log(data);
                })
                .catch(error => {
                \tconsole.log(error);
                });
      \n

      POST

      \n

      For this example you have a Order object.

      \n
      WooCommerceAPI.invokePost('products', {
        product: {
          title: 'Premium Quality',
          type: 'simple',
          regular_price: '21.99'
          }
        })
        .then(data => {
                \tconsole.log(data);
                })
        .catch(error => {
                \tconsole.log(error);
                });
      \n

      PUT

      \n
      WooCommerceAPI.invokePut('orders/123', {
        order: {
          status: 'completed'
        }
        })
        .then(data => {
                \tconsole.log(data);
                })
        .catch(error => {
                \tconsole.log(error);
                });
      \n

      DELETE

      \n
      WooCommerceAPI.invokeDelete('coupons/123')
      .then(data => {
                \tconsole.log(data);
                })
        .catch(error => {
                \tconsole.log(error);
                });
      });
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey":{"name":"tns-template-master-detail-kinvey","version":"6.5.0","license":"Apache-2.0","readme":"

      NativeScript Core Master-Detail App Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Editable master-detail interface
        • \n
      • Integration with Kinvey database
        • \n
      • Works offline
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-master-detail-kinvey-js --template tns-template-master-detail-kinvey
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-master-detail-kinvey --template nativescript-app-templates/packages/template-master-detail-kinvey
      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root module is located at:

      \n
        \n
      • /app/app-root - sets up a Frame that lets you navigate between pages.
        • \n
      \n

      The template has the following page modules:

      \n
        \n
      • /app/cars/cars-list-page - the master list page. It gets the data and displays it in a list. On item tap, it navigates to the item details page.
        • \n
      • /app/cars/car-detail-page/car-detail-page - the item details page. Displays the details of the tapped item. Has an Edit button that leads to the edit page.
        • \n
      • /app/cars/car-detail-edit-page/car-detail-edit-page - the item details edit page. Provides edit options for the selected item. The Done button saves the changes.
        • \n
      \n

      There is one model to represent the data items:

      \n
        \n
      • /app/cars/shared/car-model
        • \n
      \n

      The template also provides a data service:

      \n
        \n
      • /app/cars/shared/car-service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
        • \n
      \n

      Kinvey integration

      \n

      The templates uses the {N} Kinvey plugin. The initialization is done before the app starts in the /app/app.js file. The initialization script is located at /app/shared/kinvey.common.js.

      \n

      [Optional] Kinvey database setup

      \n

      By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Each component has 3 style files located in its folder:

      \n
        \n
      • ../_{page-name}-common.scss - the component common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • ../{page-name}.android.scss - the component Android style sheet. These style rules are applied to Android only.
        • \n
      • ../{page-name}.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-youtubesdk":{"name":"nativescript-youtubesdk","version":"0.0.2","license":{"type":"MIT"},"readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-drawer-navigation-ng":{"name":"tns-template-drawer-navigation-ng","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript with Angular Drawer Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Side drawer navigation
        • \n
      • Five blank pages hooked to the drawer navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-drawer-ng --template tns-template-drawer-navigation-ng
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to npm.

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-drawer-ng --template nativescript-app-templates/packages/template-drawer-navigation-ng
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The RadSideDrawer component is set up as an application root view in:

      \n
        \n
      • /src/app/app-component - sets up the side drawer content and defines a page router outlet for the pages.
        • \n
      \n

      RadSideDrawer has the following component structure:

      \n
        \n
      • RadSideDrawer - The component to display a drawer on the page.
        • \n
      • tkDrawerContent directive - Marks the component that will hold the drawer content.
        • \n
      • tkMainContent directive - Marks the component that will hold the app main content.
        • \n
      \n

      There are five blank components located in these folders:

      \n
        \n
      • /src/app/browse/browse.component
        • \n
      • /src/app/featured/featured.component
        • \n
      • /src/app/home/home.component
        • \n
      • /src/app/search/search.component
        • \n
      • /src/app/settings/settings.component
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"ios-um":{"name":"ios-um","version":"0.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-react":{"name":"nativescript-react","version":"0.0.2","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-device-contacts":{"name":"nativescript-device-contacts","version":"1.0.0-alpha.2.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-breeze":{"name":"nativescript-breeze","version":"0.0.4","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-livesync":{"name":"nativescript-plugin-livesync","version":"0.17.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-tab-navigation-ng":{"name":"tns-template-tab-navigation-ng","version":"6.5.4","license":"Apache-2.0","readme":"

      NativeScript with Angular Tab Navigation Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      App template featuring a TabView component for navigation.

      \n

      \n

      Key Features

      \n
        \n
      • Tab navigation
        • \n
      • Five blank pages hooked to the tab navigation
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-tab-ng --template tns-template-tab-navigation-ng
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-tab-navigation-ng).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-tab-ng --template nativescript-app-templates/packages/template-tab-navigation-ng
      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n

      Walkthrough

      \n

      Architecture

      \n

      The tab navigation is set up in the application component:

      \n
        \n
      • /src/app/app.component - sets up the tab navigation and defines page router outlets for its items.
        • \n
      \n

      There are four components used for the tab content items located in these folders:

      \n
        \n
      • /src/app/home/home.component - the master home page. Displays a list of items and navigates to the item details page on item tap.
        • \n
      • /src/app/home/item-detail/item-detail.component - the item details page. Displays the details of the tapped item.
        • \n
      • /src/app/browse/browse.component - blank page
        • \n
      • /src/app/search/search.component - blank page
        • \n
      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-plugin-livepatch":{"name":"nativescript-plugin-livepatch","version":"1.0.2","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-webview":{"name":"nativescript-webview","version":"0.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-ng2-meteor":{"name":"nativescript-ng2-meteor","version":"1.0.3","license":"MIT","readme":"

      NativeScript ng2 Meteor

      \n

      Deprecated, use nativescript-meteor-client

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-rfid":{"name":"nativescript-rfid","version":"0.3.6","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-vivmer-ng":{"name":"tns-template-vivmer-ng","version":"1.0.2","license":"Apache-2.0","readme":"

      NativeScript Angular Template - VIVMER Architecture

      \n

      This template creates a "Hello, world" NativeScript app using Angular following the VIVMER architecture.

      \n

      You can create a new app that uses this template with either the --template option.

      \n
      tns create my-app --template tns-template-vivmer-ng
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey-ts":{"name":"tns-template-master-detail-kinvey-ts","version":"6.5.0","license":"Apache-2.0","readme":"

      NativeScript Core with TypeScript Master Detail Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Editable master-detail interface
        • \n
      • Integration with Kinvey database
        • \n
      • Works offline
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-master-detail-kinvey-ts --template tns-template-master-detail-kinvey-ts
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey-ts).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-master-detail-kinvey-ts --template nativescript-app-templates/packages/template-master-detail-kinvey-ts
      \n

      Walkthrough

      \n

      Architecture

      \n

      The application root module is located at:

      \n
        \n
      • /app/app-root - sets up a Frame that lets you navigate between pages.
        • \n
      \n

      The template has the following page modules:

      \n
        \n
      • /app/cars/cars-list-page - the master list page. It gets the data and displays it in a list. On item tap, it navigates to the item details page.
        • \n
      • /app/cars/car-detail-page/car-detail-page - the item details page. Displays the details of the tapped item. Has an Edit button that leads to the edit page.
        • \n
      • /app/cars/car-detail-edit-page/car-detail-edit-page - the item details edit page. Provides edit options for the selected item. The Done button saves the changes.
        • \n
      \n

      There is one model to represent the data items:

      \n
        \n
      • /app/cars/shared/car-model
        • \n
      \n

      The template also provides a data service:

      \n
        \n
      • /app/cars/shared/car-service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
        • \n
      \n

      Kinvey integration

      \n

      The templates uses the {N} Kinvey plugin. The initialization is done before the app starts in the /app/app.ts file. The initialization script is located at /app/shared/kinvey.common.ts.

      \n

      [Optional] Kinvey database setup

      \n

      By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /app/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /app/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /app/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Each component has 3 style files located in its folder:

      \n
        \n
      • ../_{page-name}-common.scss - the component common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • ../{page-name}.android.scss - the component Android style sheet. These style rules are applied to Android only.
        • \n
      • ../{page-name}.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@synerty/peek-ns-update":{"name":"@synerty/peek-ns-update","version":"0.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-test-xss2":{"name":"nativescript-test-xss2","version":"0.0.5","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-app-sync-sdk":{"name":"nativescript-app-sync-sdk","version":"1.0.1","license":"MIT","readme":"

      NativeScript AppSync Management SDK

      \n

      Please refer to the NativeScript plugin docs.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-code-push-cli":{"name":"nativescript-code-push-cli","version":"1.0.7","license":"MIT","readme":"

      NativeScript CodePush Management CLI

      \n

      Please refer to the NativeScript plugin docs.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"pf_nsa_styleguide":{"name":"pf_nsa_styleguide","version":"0.0.0-alpha.2","license":"SEE LICENSE IN ","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-less":{"name":"nativescript-dev-less","version":"0.0.12","license":"Apache-2.0","readme":"

      LESS CSS pre-processor for NativeScript projects.

      \n

      How to use

      \n
      $ tns install less
      \n

      The above command installs this module and installs the necessary hooks. LESS CSS pre-processing of all .less files inside app folder happens when the project is prepared for build.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@triarensplugins/drplugin":{"name":"@triarensplugins/drplugin","version":"0.0.1","license":"Apache-2.0","readme":"

      @triarensplugins/drplugin

      \n
      npm install @triarensplugins/drplugin
      \n

      Usage

      \n

      // TODO

      \n

      License

      \n

      Apache License Version 2.0

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-dev-xmlxsd":{"name":"nativescript-dev-xmlxsd","version":"0.1.0","license":"Apache-2.0","readme":"

      XML validation against XSD schema for NativeScript projects.

      \n

      How to use

      \n
      $ tns install xmlxsd
      \n

      The above command installs this module and installs the necessary hooks. XSD validation of all XML files inside app folder happens when the project is prepared for build.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-windows":{"name":"tns-windows","version":"0.1.0","license":"Apache-2.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mwz-ns-apple-signin":{"name":"mwz-ns-apple-signin","version":"1.0.1","license":"mwz","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@toolisticon/nativescript-buildhelper":{"name":"@toolisticon/nativescript-buildhelper","version":"0.4.0","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"rosen-test-ns-extension":{"name":"rosen-test-ns-extension","version":"0.1.0","license":"Apache-2.0","readme":"

      rosen-test-ns-extension

      \n

      just a test

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-textfield-ng":{"name":"nativescript-textfield-ng","version":"0.0.2","readme":"

      nativescript-textfield-ng

      \n

      nativescript textfield with focus event handler, but without ngModel support %)

      \n

      Installation

      \n

      tns plugin add textfield-ng

      \n

      or as local:

      \n

      cd ${ns_project}\ngit clone https://github.com/syncro/nativescript-textfield-ng.git\ntns plugin add nativescript-textfield-ng

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-paythunder":{"name":"nativescript-paythunder","version":"0.0.1","readme":"

      PayThunder Plugin

      \n

      Installing the plugin

      \n
      tns plugin add <path>\\PaythunderPlugin
      \n
      \n

      Using the plugin

      \n
      var PaythunderPlugin = require(\"nativescript-paythunder\");

      public payWithPayThunder() {
          PaythunderPlugin.launchPayThunder();
      }
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"mcms-node-beacons":{"name":"mcms-node-beacons","version":"0.0.1","license":"MIT","readme":"

      Some docs

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-tweenjs":{"name":"nativescript-tweenjs","version":"0.9.0","license":{"type":"MIT","url":"https://github.com/tralves/nativescript-tweenjs/blob/master/LICENSE"},"readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@drifters/nativescript-notification":{"name":"@drifters/nativescript-notification","version":"0.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-ava-ts":{"name":"tns-template-ava-ts","version":"1.0.8","license":"MIT","readme":"

      NativeScript Application

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-sass":{"name":"nativescript-sass","version":"0.1.1","license":"Apache-2.0","readme":"

      Sorry I ate the README!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@bigin/ns-firebase":{"name":"@bigin/ns-firebase","version":"11.1.2","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-remote-builds":{"name":"nativescript-remote-builds","version":"1.1.1","license":"SEE LICENSE IN LICENSE","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-cordova":{"name":"nativescript-cordova","version":"0.1.3","license":"Apache-2.0","readme":"

      Nativescript Cordova

      \n

      Add Cordova as a dependency for you {N} app.

      \n

      Installation

      \n
      tns plugin add nativescript-cordova
      \n

      Usage

      \n

      Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example.

      \n
      ```javascript\nUsage code snippets here\n```)\n
      \n

      API

      \n

      Describe your plugin methods and properties here. See nativescript-feedback for example.

      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      PropertyDefaultDescription
      some propertyproperty default valueproperty description, default values, etc..
      another propertyproperty default valueproperty description, default values, etc..
      \n

      License

      \n

      Apache License Version 2.0, January 2004

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-generator":{"name":"tns-generator","version":"1.0.14","license":"ISC","readme":"

      Scaffolder for Nativscript Apps

      \n

      How to use

      \n

      Install: (might need to install with -g if it doesn't work)

      \n
      $ npm install tns-generator
      \n

      Usage:

      \n
      $ ng2gen -f folder -n componentname
      $ ng2gen -f components -n home
      \n

      This will create a folder: app/foldername/name with three files:

      \n
        \n
      • componentname.html
        • \n
      • componentname-common.css
        • \n
      • componentname.js
        • \n
      \n

      It will check for tns-dev-stylus, tns-dev-jade and tns-dev-typescript and generate\nvariants, .jade, .styl and .ts if needed.

      \n

      If you are using typescript, it will also generate a component template for you.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-mytoast":{"name":"nativescript-mytoast","version":"1.1.1","readme":"

      NativeScript myToast

      \n

      Apprendre

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@altech/keepup-interfaces-tns":{"name":"@altech/keepup-interfaces-tns","version":"4.0.0","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@mrtechsupport/firebase":{"name":"@mrtechsupport/firebase","version":"1.0.5","license":"MIT","readme":"

      No README found.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@melonwd/melonalert":{"name":"@melonwd/melonalert","version":"1.4.5","license":"MIT","readme":"

      MelonAlerts

      \n

      The purpose of this repo and library is to swap out functionality provided by SweetAlert2 at transpile time and provide Nativescript friendly code/views.

      \n

      Installation

      \n

      Install the package with

      \n

      npm install @melonwd/melonalert

      \n

      and then in the correct tsconfig.json you need to define the following path:

      \n
      \"sweetalert2\":[
      \t\"node_modules/@melonwd/melonalerts\"
      ]
      \n

      After this, whenever you require or import something from sweetalert2 it will instead grab the member out of the melonalerts library instead.

      \n

      Usage

      \n

      Once the above has been done, you should be able to use swal normally (with limited functionality.)

      \n

      You need to import MelonAlertModule and place it within your app.module.ts.

      \n

      You need to put <mwd-alert></mwd-alert> in the root of your project.

      \n

      Supported Alert Flags

      \n

      title - Title of which to be shown in the alert

      \n

      text - Text to be shown underneath the paragraph

      \n

      confirmButtonText - Text shown on the confirmation button

      \n

      cancelButtonText - Text shown on the cancellation button

      \n

      showConfirmButton - If the confirmation button should display.

      \n

      showCancelButton - If the cancellation button should display.

      \n

      cancelButtonStyle - Object of styles to apply to the cancellation button.

      \n

      confirmButtonStyle - Object of styles to apply to the confirmation button.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@fallen90/nativescript-template-generate":{"name":"@fallen90/nativescript-template-generate","version":"0.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-simplecam":{"name":"nativescript-simplecam","version":"0.6.0","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-starter-kits":{"name":"nativescript-starter-kits","version":"0.3.5","license":"Apache-2.0","readme":"

      nativescript-starter-kits

      \n

      A NativeScript CLI extension for managing templates

      \n

      Automatic Installation

      \n

      You can install this extension using the Nativescript CLI

      \n
      $ tns extension install nativescript-starter-kits
      \n

      Manual Installation and Development

      \n

      Download the GIT repository in you favorite projects directory

      \n
      $ git clone git@github.com:NativeScript/nativescript-starter-kits.git
      \n

      Run the following commands to install all dependencies, transpile all Ts files and to pack the extension.

      \n
      $ npm i --ignore-scripts
      $ npm i -g grunt-cli (only in case you do not have it installed globally)

      $ grunt
      $ grunt pack
      \n

      These commands will create a .tgz file in the extension folder

      \n

      Install the npm package

      \n
      $ tns extension install <path to nativescript-starter-kits>.tgz
      \n

      Public API

      \n

      Get proper nativescript reference

      \n
      const pathToPackage = require(\"global-modules-path\").getPath(\"nativescript\", \"tns\");
      const tns = require(pathToPackage);
      \n

      Load all available extensions

      \n
      /**
           * @name loadExtensions
           * @description Loads all currently installed extensions
           * @return {Promise<any>[]} - On Success: Array of Promises, one for each installed extension
      */
      Promise.all(tns.extensibilityService.loadExtensions()).then((loadedExtensions) => {
          console.log(\"All extensions loaded successfully!\");
      }).catch((error) => {
          console.error(error);
      });
      \n
      Get details for all installed templates
      \n
      /**
           * @name getTemplates
           * @description List all available templates
           * @return {Promise<Array<any>>} - On Success: Array of Objects with Details about each template
      */
      tns.templateService.getTemplates().then((templates) => {
          console.log(templates);
      }).catch((error) => {
          console.error(error);
      });
      \n
      Get details for a single App template
      \n
      /**
           * @name getAppTemplateDetails
           * @description The method returns details about a single app template.
           * @param {string} templateName - The name of the template
           * @returns {Promise<any>} - Object with details about the app template
           */
          getAppTemplateDetails(templateName: string): any;
          
      tns.templateService.getAppTemplateDetails(\"templateName\").then((details) => {
          console.log(details);
      }).catch((error) => {
          console.error(error);
      });
      \n

      Run tests

      \n

      Before running the test you need to transpile all files and dependencies.

      \n
      $ grunt pack
      $ npm run test
      \n

      Issues

      \n

      If you have found an issue with this extension, please report the problem in the Issues section.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-activity-detection":{"name":"nativescript-activity-detection","version":"0.1.1","license":"ISC","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@7isys/loopback-sdk-builder":{"name":"@7isys/loopback-sdk-builder","version":"2.3.11","license":"MIT","readme":"

      LoopBack SDK Builder

      \n

      Please do not use this repository. There are some personal projects specific changes.

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-onyxbeacon":{"name":"nativescript-onyxbeacon","version":"1.0.5","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"acs-bluetooth":{"name":"acs-bluetooth","version":"1.0.0","license":"MIT","readme":"

      #ACSBluetooth

      \n

      An Android module for native script that can be used for scanning for and connecting to ACS Bluetooth readers

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-google-maps-utils-fork":{"name":"nativescript-google-maps-utils-fork","version":"0.1.0","license":"License","readme":"

      nativescript-google-maps-utils-fork

      \n

      NativeScript Google Maps SDK utility library to support features such as marker clustering, heatmap, ...

      \n

      \"Andoird\n\"Andoird\n\"Andoird\n\"Andoird

      \n

      State

      \n

      Android implemented.

      \n

      iOS not implemented.

      \n

      Dependencies

      \n\n

      Install

      \n
      tns plugin add nativescript-google-maps-utils-fork
      \n

      Usage

      \n
      var GoogleMaps = require('nativescript-google-maps-sdk');
      var GoogleMapsUtils = require('nativescript-google-maps-utils-fork');


      function onMapReady(args) {

        var mapView = args.object;

      \tvar positionSet = [ /* GoogleMaps.Position... */ ];

      \tGoogleMapsUtils.setupHeatmap(mapView, positionSet);


      \tvar markerSet = [ /* GoogleMaps.Marker... */ ];

      \tGoogleMapsUtils.setupMarkerCluster(mapView, makerSet);

      }
      ...
      \n

      Usage with TypeScript

      \n

      import using either of

      \n
        \n
      • import GoogleMapsUtils = require("nativescript-google-maps-utils-fork")
        • \n
      • import * as GoogleMapsUtils from "nativescript-google-maps-utils-fork"
        • \n
      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"nativescript-oauth2-forked":{"name":"nativescript-oauth2-forked","version":"2.4.3","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/appsync":{"name":"@nativescript/appsync","version":"3.0.1","license":"MIT","readme":"

      ERROR: No README data found!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript/ionic":{"name":"@nativescript/ionic","version":"0.0.3","readme":"

      @nativescript/ionic

      \n

      NativeScript for Ionic

      \n

      Install

      \n
      npm install @nativescript/ionic
      npx cap sync
      \n

      Docs: Coming Soon

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"@nativescript-vue/runtime":{"name":"@nativescript-vue/runtime","version":"3.0.0-dev.4","license":"MIT","readme":"

      @nativescript-vue/runtime

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}},"tns-template-master-detail-kinvey-ng":{"name":"tns-template-master-detail-kinvey-ng","version":"6.5.0","license":"SEE LICENSE IN ","readme":"

      NativeScript with Angular Master Detail Template

      \n

      App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.

      \n

      This Master-Detail template is a fundamental building block for any app that displays collection of objects and their details and need to work both in online and offline mode while utilizing Kinvey as a backend. The template uses a RadListView component to display the master list. The RadListView component is part of Progress NativeScript UI.

      \n

      \n

      Key Features

      \n
        \n
      • Editable master-detail interface
        • \n
      • Integration with Kinvey database
        • \n
      • Works offline
        • \n
      • Customizable theme
        • \n
      • UX and development best practices
        • \n
      • Easy to understand code
        • \n
      \n

      Quick Start

      \n

      Execute the following command to create an app from this template:

      \n
      tns create my-master-detail-kinvey-ng --template tns-template-master-detail-kinvey-ng
      \n
      \n

      Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm] (https://www.npmjs.com/package/tns-template-master-detail-kinvey-ng).

      \n
      \n

      If you want to create a new app that uses the source of the template from the master branch, you can execute the following:

      \n
      # clone nativescript-app-templates monorepo locally
      git clone git@github.com:NativeScript/nativescript-app-templates.git

      # create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
      tns create my-master-detail-kinvey-ng --template nativescript-app-templates/packages/template-master-detail-kinvey-ng
      \n

      Walkthrough

      \n

      Architecture

      \n

      The application component:

      \n
        \n
      • /src/app/app.component - sets up a page router outlet that lets you navigate between pages.
        • \n
      \n

      The template has the following components:

      \n
        \n
      • /src/app/cars/car-list.component - the master list component. It gets the data and displays it in a list. On item tap, it navigates to the item details component.
        • \n
      • /src/app/cars/car-detail/car-detail.component - the item details component. Displays the details of the tapped item. Has an Edit button that leads to the edit component.
        • \n
      • /src/app/cars/car-detail-edit/car-detail-edit.component - the item details edit component. Provides edit options for the selected item. The Done button saves the changes.
        • \n
      \n

      There is one model to represent the data items:

      \n
        \n
      • /src/app/cars/shared/car.model
        • \n
      \n

      The template also provides a data service:

      \n
        \n
      • /src/app/cars/shared/car.service - serves as a data layer for the master-detail data items. Wraps the functions that are used to make operations on the database.
        • \n
      \n

      Kinvey integration

      \n

      The template uses the {N} Kinvey plugin. The initialization is done in the src/app/app.module.ts file with the KinveyModule import.

      \n

      [Optional] Kinvey database setup

      \n

      By design the app is connected to a read-only copy of the sample data in Kinvey. If you want to see the "edit" functionality in action you will have to clone the sample data and update the app configuration to point to your own Kinvey setup. You can find detailed instructions how to achieve that here.

      \n

      Styling

      \n

      This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the documentation to understand how to customize it.

      \n

      It has 3 global style files that are located at the root of the app folder:

      \n
        \n
      • /src/_app-common.scss - the global common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • /src/app.android.scss - the global Android style sheet. These style rules are applied to Android only.
        • \n
      • /src/app.ios.scss - the global iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Each component has 3 style files located in its folder:

      \n
        \n
      • ../_{page-name}.component.scss - the component common style sheet. These style rules are applied to both Android and iOS.
        • \n
      • ../{page-name}.component.android.scss - the component Android style sheet. These style rules are applied to Android only.
        • \n
      • ../{page-name}.component.ios.scss - the component iOS style sheet. These style rules are applied to iOS only.
        • \n
      \n

      Get Help

      \n

      The NativeScript framework has a vibrant community that can help when you run into problems.

      \n

      Try joining the NativeScript community Slack. The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

      \n

      If you have found an issue with this template, please report the problem in the NativeScript repository.

      \n

      Contributing

      \n

      We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

      \n

      NB: Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!

      \n","downloadStats":{"lastDay":0,"lastWeek":0,"lastMonth":0}}} \ No newline at end of file diff --git a/src/data/plugins.json b/src/data/plugins.json index 8810d008..5a4dfe49 100644 --- a/src/data/plugins.json +++ b/src/data/plugins.json @@ -509,9 +509,9 @@ } ], "downloadStats": { - "lastDay": 4, - "lastWeek": 15, - "lastMonth": 965 + "lastDay": 13, + "lastWeek": 25, + "lastMonth": 970 } }, { @@ -560,9 +560,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 42, - "lastMonth": 295 + "lastDay": 2, + "lastWeek": 41, + "lastMonth": 285 } }, { @@ -687,9 +687,9 @@ } ], "downloadStats": { - "lastDay": 23, - "lastWeek": 273, - "lastMonth": 1210 + "lastDay": 34, + "lastWeek": 268, + "lastMonth": 1167 } }, { @@ -772,8 +772,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 135 } }, { @@ -1249,8 +1249,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 30 } }, { @@ -1330,8 +1330,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 46 } }, { @@ -1369,9 +1369,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 4, + "lastWeek": 14, + "lastMonth": 151 } }, { @@ -1410,8 +1410,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 141 } }, { @@ -1611,9 +1611,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 87 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 88 } }, { @@ -1855,9 +1855,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 10, - "lastMonth": 240 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 226 } }, { @@ -1897,8 +1897,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 8, - "lastMonth": 88 + "lastWeek": 7, + "lastMonth": 85 } }, { @@ -1938,8 +1938,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, - "lastMonth": 44 + "lastWeek": 4, + "lastMonth": 41 } }, { @@ -1979,7 +1979,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 4, "lastMonth": 90 } }, @@ -3050,9 +3050,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 177 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 178 } }, { @@ -3137,9 +3137,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 15, - "lastMonth": 132 + "lastDay": 7, + "lastWeek": 22, + "lastMonth": 139 } }, { @@ -3726,8 +3726,8 @@ ], "downloadStats": { "lastDay": 85, - "lastWeek": 426, - "lastMonth": 1695 + "lastWeek": 442, + "lastMonth": 1685 } }, { @@ -4445,9 +4445,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 5, - "lastMonth": 132 + "lastDay": 2, + "lastWeek": 7, + "lastMonth": 85 } }, { @@ -4959,7 +4959,7 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 3, "lastWeek": 0, "lastMonth": 0 } @@ -5083,8 +5083,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 67 } }, { @@ -5167,8 +5167,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 70 } }, { @@ -6321,8 +6321,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 40 } }, { @@ -6410,9 +6410,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 3, + "lastMonth": 53 } }, { @@ -8369,9 +8369,9 @@ } ], "downloadStats": { - "lastDay": 64, - "lastWeek": 211, - "lastMonth": 1435 + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 } }, { @@ -10398,9 +10398,9 @@ } ], "downloadStats": { - "lastDay": 6, - "lastWeek": 48, - "lastMonth": 422 + "lastDay": 10, + "lastWeek": 57, + "lastMonth": 419 } }, { @@ -11110,9 +11110,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 2, - "lastMonth": 41 + "lastMonth": 40 } }, { @@ -11408,7 +11408,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 1, - "lastMonth": 0 + "lastMonth": 24 } }, { @@ -11594,9 +11594,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 3, - "lastMonth": 106 + "lastMonth": 95 } }, { @@ -12184,8 +12184,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, - "lastMonth": 24 + "lastWeek": 2, + "lastMonth": 22 } }, { @@ -12656,7 +12656,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 5, - "lastMonth": 157 + "lastMonth": 156 } }, { @@ -13219,6 +13219,46 @@ "lastMonth": 0 } }, + { + "name": "@jorwoody/nativescript-contacts", + "scope": "jorwoody", + "version": "1.1.0", + "description": "A temporary fork of 'nativescript-contacts' plugin by Ryan Lebel. Allows adding of contacts without 'Account' on Android.", + "keywords": [ + "NativeScript", + "Contacts", + "Address Book", + "Contact Directory", + "nativescript", + "contacts" + ], + "date": "2019-04-08T15:36:16.662Z", + "links": { + "npm": "https://www.npmjs.com/package/%40jorwoody%2Fnativescript-contacts", + "homepage": "https://github.com/jorwoody/nativescript-contacts", + "repository": "https://github.com/jorwoody/nativescript-contacts", + "bugs": "https://github.com/jorwoody/nativescript-contacts/issues" + }, + "author": { + "name": "jorwoody", + "username": "jorwoody" + }, + "publisher": { + "username": "jorwoody", + "email": "jordan.wood@johnstongroup.ca" + }, + "maintainers": [ + { + "username": "jorwoody", + "email": "jordan.wood@johnstongroup.ca" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "@juit/nativescript-barcodeview", "scope": "juit", @@ -13336,9 +13376,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 9, + "lastWeek": 18, + "lastMonth": 181 } }, { @@ -13384,9 +13424,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 2, - "lastMonth": 149 + "lastMonth": 140 } }, { @@ -13477,9 +13517,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 129, - "lastMonth": 1341 + "lastDay": 28, + "lastWeek": 137, + "lastMonth": 1296 } }, { @@ -13998,8 +14038,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 55 } }, { @@ -14575,49 +14615,6 @@ "lastMonth": 0 } }, - { - "name": "@matty0005/nativescript-camera-plus", - "scope": "matty0005", - "version": "4.1.3", - "description": "An advanced, embeddable camera for NativeScript.", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "iOS", - "Camera", - "Camera Plus", - "nativescript", - "camera", - "plus" - ], - "date": "2022-05-26T02:48:15.708Z", - "links": { - "npm": "https://www.npmjs.com/package/%40matty0005%2Fnativescript-camera-plus", - "homepage": "https://github.com/matty0005/nativescript-plugins", - "repository": "https://github.com/matty0005/nativescript-plugins", - "bugs": "https://github.com/matty0005/nativescript-plugins/issues" - }, - "author": { - "name": "matty0005", - "username": "matty0005" - }, - "publisher": { - "username": "matty0005", - "email": "matt@matthewgilpin.com" - }, - "maintainers": [ - { - "username": "matty0005", - "email": "matt@matthewgilpin.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "@maximl/nativescript-dev-appium", "scope": "maximl", @@ -15321,9 +15318,9 @@ "username": "nativescript-community" }, "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 107 } }, { @@ -15541,9 +15538,9 @@ } ], "downloadStats": { - "lastDay": 71, - "lastWeek": 371, - "lastMonth": 1711 + "lastDay": 73, + "lastWeek": 396, + "lastMonth": 1693 } }, { @@ -15663,9 +15660,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 10, - "lastMonth": 308 + "lastDay": 8, + "lastWeek": 15, + "lastMonth": 311 } }, { @@ -15780,9 +15777,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 44, - "lastMonth": 860 + "lastDay": 22, + "lastWeek": 57, + "lastMonth": 874 } }, { @@ -15996,9 +15993,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 7, - "lastMonth": 158 + "lastDay": 1, + "lastWeek": 6, + "lastMonth": 159 } }, { @@ -16120,9 +16117,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 2, "lastWeek": 4, - "lastMonth": 36 + "lastMonth": 37 } }, { @@ -16344,9 +16341,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 8, + "lastWeek": 13, + "lastMonth": 127 } }, { @@ -16808,9 +16805,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 2, + "lastMonth": 86 } }, { @@ -17036,9 +17033,9 @@ } ], "downloadStats": { - "lastDay": 90, - "lastWeek": 495, - "lastMonth": 2436 + "lastDay": 96, + "lastWeek": 481, + "lastMonth": 2466 } }, { @@ -17147,9 +17144,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 21, - "lastMonth": 399 + "lastDay": 20, + "lastWeek": 38, + "lastMonth": 419 } }, { @@ -17266,9 +17263,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 210, - "lastMonth": 1224 + "lastDay": 76, + "lastWeek": 267, + "lastMonth": 1297 } }, { @@ -17491,9 +17488,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 8, + "lastWeek": 9, + "lastMonth": 44 } }, { @@ -17720,8 +17717,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 45 } }, { @@ -17834,7 +17831,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 118 } }, @@ -17942,9 +17939,9 @@ } ], "downloadStats": { - "lastDay": 74, - "lastWeek": 337, - "lastMonth": 1044 + "lastDay": 99, + "lastWeek": 403, + "lastMonth": 1083 } }, { @@ -18054,9 +18051,9 @@ } ], "downloadStats": { - "lastDay": 594, - "lastWeek": 2690, - "lastMonth": 11708 + "lastDay": 287, + "lastWeek": 2608, + "lastMonth": 11497 } }, { @@ -18276,8 +18273,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 5, + "lastMonth": 209 } }, { @@ -18384,9 +18381,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 237 + "lastDay": 8, + "lastWeek": 10, + "lastMonth": 245 } }, { @@ -18828,9 +18825,9 @@ } ], "downloadStats": { - "lastDay": 153, - "lastWeek": 678, - "lastMonth": 2647 + "lastDay": 21, + "lastWeek": 617, + "lastMonth": 2593 } }, { @@ -18942,9 +18939,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 23, + "lastWeek": 46, + "lastMonth": 395 } }, { @@ -19157,9 +19154,9 @@ } ], "downloadStats": { - "lastDay": 218, - "lastWeek": 1068, - "lastMonth": 5508 + "lastDay": 69, + "lastWeek": 1004, + "lastMonth": 5404 } }, { @@ -19269,9 +19266,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 27, - "lastMonth": 313 + "lastDay": 12, + "lastWeek": 22, + "lastMonth": 323 } }, { @@ -19632,9 +19629,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 49, - "lastMonth": 340 + "lastDay": 6, + "lastWeek": 35, + "lastMonth": 335 } }, { @@ -19868,8 +19865,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 7, - "lastMonth": 100 + "lastWeek": 5, + "lastMonth": 97 } }, { @@ -19980,9 +19977,9 @@ } ], "downloadStats": { - "lastDay": 70, - "lastWeek": 671, - "lastMonth": 3370 + "lastDay": 72, + "lastWeek": 632, + "lastMonth": 3339 } }, { @@ -20094,9 +20091,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 234, - "lastMonth": 1537 + "lastDay": 10, + "lastWeek": 192, + "lastMonth": 1543 } }, { @@ -20214,7 +20211,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 3, "lastMonth": 546 } }, @@ -20326,9 +20323,9 @@ } ], "downloadStats": { - "lastDay": 35, - "lastWeek": 171, - "lastMonth": 2262 + "lastDay": 24, + "lastWeek": 175, + "lastMonth": 2228 } }, { @@ -20456,9 +20453,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 13, - "lastMonth": 106 + "lastDay": 11, + "lastWeek": 23, + "lastMonth": 117 } }, { @@ -20586,9 +20583,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 446, - "lastMonth": 2448 + "lastDay": 28, + "lastWeek": 295, + "lastMonth": 2456 } }, { @@ -20700,8 +20697,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 117, - "lastMonth": 401 + "lastWeek": 54, + "lastMonth": 402 } }, { @@ -20812,9 +20809,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 242, - "lastMonth": 1521 + "lastDay": 5, + "lastWeek": 123, + "lastMonth": 1522 } }, { @@ -20927,9 +20924,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 56, + "lastWeek": 946, + "lastMonth": 4013 } }, { @@ -21052,9 +21049,9 @@ } ], "downloadStats": { - "lastDay": 48, - "lastWeek": 316, - "lastMonth": 1725 + "lastDay": 70, + "lastWeek": 353, + "lastMonth": 1783 } }, { @@ -21170,9 +21167,9 @@ } ], "downloadStats": { - "lastDay": 17, - "lastWeek": 110, - "lastMonth": 2414 + "lastDay": 37, + "lastWeek": 131, + "lastMonth": 2317 } }, { @@ -21290,8 +21287,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 6, - "lastMonth": 955 + "lastWeek": 4, + "lastMonth": 865 } }, { @@ -21402,9 +21399,9 @@ } ], "downloadStats": { - "lastDay": 172, - "lastWeek": 766, - "lastMonth": 4246 + "lastDay": 36, + "lastWeek": 722, + "lastMonth": 4179 } }, { @@ -21518,9 +21515,9 @@ } ], "downloadStats": { - "lastDay": 192, - "lastWeek": 983, - "lastMonth": 4370 + "lastDay": 65, + "lastWeek": 903, + "lastMonth": 4292 } }, { @@ -21635,9 +21632,9 @@ } ], "downloadStats": { - "lastDay": 38, - "lastWeek": 167, - "lastMonth": 793 + "lastDay": 65, + "lastWeek": 230, + "lastMonth": 839 } }, { @@ -21751,9 +21748,9 @@ } ], "downloadStats": { - "lastDay": 11, + "lastDay": 13, "lastWeek": 262, - "lastMonth": 3795 + "lastMonth": 3799 } }, { @@ -21873,9 +21870,9 @@ } ], "downloadStats": { - "lastDay": 204, - "lastWeek": 1217, - "lastMonth": 6720 + "lastDay": 212, + "lastWeek": 1265, + "lastMonth": 6708 } }, { @@ -21995,9 +21992,9 @@ } ], "downloadStats": { - "lastDay": 47, - "lastWeek": 400, - "lastMonth": 4336 + "lastDay": 66, + "lastWeek": 455, + "lastMonth": 4397 } }, { @@ -22111,9 +22108,9 @@ } ], "downloadStats": { - "lastDay": 86, - "lastWeek": 796, - "lastMonth": 5367 + "lastDay": 122, + "lastWeek": 831, + "lastMonth": 5395 } }, { @@ -22227,9 +22224,9 @@ } ], "downloadStats": { - "lastDay": 23, - "lastWeek": 302, - "lastMonth": 3794 + "lastDay": 15, + "lastWeek": 299, + "lastMonth": 3799 } }, { @@ -22343,9 +22340,9 @@ } ], "downloadStats": { - "lastDay": 16, - "lastWeek": 260, - "lastMonth": 3892 + "lastDay": 9, + "lastWeek": 258, + "lastMonth": 3893 } }, { @@ -22456,9 +22453,9 @@ } ], "downloadStats": { - "lastDay": 438, - "lastWeek": 2566, - "lastMonth": 12184 + "lastDay": 336, + "lastWeek": 2586, + "lastMonth": 12145 } }, { @@ -22570,9 +22567,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 229, + "lastWeek": 1789, + "lastMonth": 7845 } }, { @@ -22686,8 +22683,8 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 235, + "lastDay": 12, + "lastWeek": 232, "lastMonth": 3735 } }, @@ -22803,8 +22800,8 @@ ], "downloadStats": { "lastDay": 13, - "lastWeek": 264, - "lastMonth": 3997 + "lastWeek": 265, + "lastMonth": 3998 } }, { @@ -22918,9 +22915,9 @@ } ], "downloadStats": { - "lastDay": 21, - "lastWeek": 249, - "lastMonth": 4132 + "lastDay": 15, + "lastWeek": 255, + "lastMonth": 4138 } }, { @@ -23034,9 +23031,9 @@ } ], "downloadStats": { - "lastDay": 103, - "lastWeek": 623, - "lastMonth": 5105 + "lastDay": 78, + "lastWeek": 654, + "lastMonth": 5090 } }, { @@ -23150,9 +23147,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 298, - "lastMonth": 3843 + "lastDay": 7, + "lastWeek": 295, + "lastMonth": 3848 } }, { @@ -23266,9 +23263,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 277, - "lastMonth": 3843 + "lastDay": 15, + "lastWeek": 279, + "lastMonth": 3846 } }, { @@ -23382,9 +23379,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 180, - "lastMonth": 2875 + "lastDay": 4, + "lastWeek": 177, + "lastMonth": 2870 } }, { @@ -23498,9 +23495,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 32, - "lastMonth": 406 + "lastDay": 4, + "lastWeek": 26, + "lastMonth": 410 } }, { @@ -23614,9 +23611,9 @@ } ], "downloadStats": { - "lastDay": 334, - "lastWeek": 1658, - "lastMonth": 8985 + "lastDay": 180, + "lastWeek": 1651, + "lastMonth": 8925 } }, { @@ -23730,9 +23727,9 @@ } ], "downloadStats": { - "lastDay": 42, - "lastWeek": 472, - "lastMonth": 5072 + "lastDay": 31, + "lastWeek": 449, + "lastMonth": 5043 } }, { @@ -23846,9 +23843,9 @@ } ], "downloadStats": { - "lastDay": 12, - "lastWeek": 256, - "lastMonth": 4183 + "lastDay": 5, + "lastWeek": 250, + "lastMonth": 4175 } }, { @@ -23961,7 +23958,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 221 } }, @@ -24087,9 +24084,9 @@ } ], "downloadStats": { - "lastDay": 178, - "lastWeek": 784, - "lastMonth": 4160 + "lastDay": 43, + "lastWeek": 729, + "lastMonth": 4106 } }, { @@ -24215,9 +24212,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 18, - "lastMonth": 245 + "lastDay": 1, + "lastWeek": 16, + "lastMonth": 240 } }, { @@ -24329,7 +24326,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 38 } }, @@ -24452,9 +24449,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 68, + "lastMonth": 519 } }, { @@ -24578,8 +24575,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 9, - "lastMonth": 148 + "lastWeek": 7, + "lastMonth": 149 } }, { @@ -24695,9 +24692,9 @@ } ], "downloadStats": { - "lastDay": 290, - "lastWeek": 1355, - "lastMonth": 5591 + "lastDay": 137, + "lastWeek": 1297, + "lastMonth": 5520 } }, { @@ -24819,14 +24816,14 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 2, "lastMonth": 102 } }, { "name": "@nativescript-community/ui-share-file", "scope": "nativescript-community", - "version": "1.3.1", + "version": "1.3.2", "description": "Send/share file to other apps.", "keywords": [ "NativeScript", @@ -24839,7 +24836,7 @@ "share", "file" ], - "date": "2023-02-27T15:06:33.252Z", + "date": "2023-10-27T14:58:42.475Z", "links": { "npm": "https://www.npmjs.com/package/%40nativescript-community%2Fui-share-file", "homepage": "https://github.com/nativescript-community/ui-share-file", @@ -25158,9 +25155,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 330, - "lastMonth": 1343 + "lastDay": 45, + "lastWeek": 312, + "lastMonth": 1358 } }, { @@ -25271,8 +25268,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 41 } }, { @@ -25397,9 +25394,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 80, - "lastMonth": 717 + "lastDay": 9, + "lastWeek": 82, + "lastMonth": 693 } }, { @@ -25511,7 +25508,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 297 } }, @@ -25628,9 +25625,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 12, - "lastMonth": 890 + "lastDay": 10, + "lastWeek": 19, + "lastMonth": 802 } }, { @@ -25746,9 +25743,9 @@ } ], "downloadStats": { - "lastDay": 44, - "lastWeek": 313, - "lastMonth": 1642 + "lastDay": 36, + "lastWeek": 284, + "lastMonth": 1613 } }, { @@ -25969,7 +25966,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 71 } }, @@ -26078,8 +26075,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 66 } }, { @@ -26189,7 +26186,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 480 } }, @@ -26316,8 +26313,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, - "lastMonth": 164 + "lastWeek": 2, + "lastMonth": 162 } }, { @@ -26359,9 +26356,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 11, - "lastMonth": 535 + "lastDay": 1, + "lastWeek": 10, + "lastMonth": 534 } }, { @@ -26406,7 +26403,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 2, "lastMonth": 78 } }, @@ -26497,7 +26494,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 2, "lastMonth": 108 } }, @@ -26542,9 +26539,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 6, - "lastMonth": 272 + "lastDay": 1, + "lastWeek": 5, + "lastMonth": 273 } }, { @@ -27149,9 +27146,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 935, - "lastWeek": 4064, - "lastMonth": 18447 + "lastDay": 628, + "lastWeek": 4101, + "lastMonth": 18067 } }, { @@ -27222,9 +27219,9 @@ } ], "downloadStats": { - "lastDay": 572, - "lastWeek": 2621, - "lastMonth": 13469 + "lastDay": 360, + "lastWeek": 2583, + "lastMonth": 13357 } }, { @@ -28541,115 +28538,6 @@ "lastMonth": 0 } }, - { - "name": "@nativescript/canvas-babylon", - "scope": "nativescript", - "version": "1.1.0", - "description": "```javascript ns plugin add @nativescript/canvas-babylon ```", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "canvas", - "babylon" - ], - "date": "2023-02-09T16:15:17.973Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Fcanvas-babylon", - "homepage": "https://github.com/NativeScript/canvas", - "repository": "https://github.com/NativeScript/canvas", - "bugs": "https://github.com/NativeScript/canvas/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "@nativescript/canvas-media", "scope": "nativescript", @@ -29406,9 +29294,9 @@ } ], "downloadStats": { - "lastDay": 240, - "lastWeek": 482, - "lastMonth": 2488 + "lastDay": 44, + "lastWeek": 467, + "lastMonth": 2483 } }, { @@ -29593,9 +29481,9 @@ } ], "downloadStats": { - "lastDay": 2108, - "lastWeek": 7194, - "lastMonth": 50795 + "lastDay": 1104, + "lastWeek": 7403, + "lastMonth": 50837 } }, { @@ -29808,9 +29696,9 @@ } ], "downloadStats": { - "lastDay": 281, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 175, + "lastWeek": 1300, + "lastMonth": 5305 } }, { @@ -30243,9 +30131,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 306, + "lastWeek": 1980, + "lastMonth": 9364 } }, { @@ -30355,9 +30243,9 @@ } ], "downloadStats": { - "lastDay": 194, - "lastWeek": 950, - "lastMonth": 3933 + "lastDay": 81, + "lastWeek": 893, + "lastMonth": 3852 } }, { @@ -30459,9 +30347,9 @@ } ], "downloadStats": { - "lastDay": 62, - "lastWeek": 314, - "lastMonth": 1555 + "lastDay": 44, + "lastWeek": 274, + "lastMonth": 1513 } }, { @@ -30567,9 +30455,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 426 + "lastDay": 2, + "lastWeek": 43, + "lastMonth": 408 } }, { @@ -30788,9 +30676,9 @@ } ], "downloadStats": { - "lastDay": 4, - "lastWeek": 11, - "lastMonth": 1761 + "lastDay": 10, + "lastWeek": 20, + "lastMonth": 1760 } }, { @@ -30901,9 +30789,9 @@ } ], "downloadStats": { - "lastDay": 141, - "lastWeek": 714, - "lastMonth": 5047 + "lastDay": 156, + "lastWeek": 749, + "lastMonth": 4994 } }, { @@ -31016,9 +30904,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 17, - "lastMonth": 1687 + "lastDay": 1, + "lastWeek": 15, + "lastMonth": 1683 } }, { @@ -31132,9 +31020,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 3, - "lastMonth": 828 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 826 } }, { @@ -31255,9 +31143,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 45, - "lastMonth": 1890 + "lastDay": 24, + "lastWeek": 57, + "lastMonth": 1884 } }, { @@ -31384,9 +31272,9 @@ } ], "downloadStats": { - "lastDay": 204, - "lastWeek": 1217, - "lastMonth": 7185 + "lastDay": 229, + "lastWeek": 1219, + "lastMonth": 7121 } }, { @@ -31500,9 +31388,9 @@ } ], "downloadStats": { - "lastDay": 55, - "lastWeek": 372, - "lastMonth": 3102 + "lastDay": 67, + "lastWeek": 368, + "lastMonth": 3083 } }, { @@ -31616,9 +31504,9 @@ } ], "downloadStats": { - "lastDay": 2, + "lastDay": 6, "lastWeek": 13, - "lastMonth": 1620 + "lastMonth": 1619 } }, { @@ -31730,9 +31618,9 @@ } ], "downloadStats": { - "lastDay": 40, - "lastWeek": 246, - "lastMonth": 2715 + "lastDay": 24, + "lastWeek": 235, + "lastMonth": 2641 } }, { @@ -31849,9 +31737,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 44, - "lastMonth": 1893 + "lastDay": 23, + "lastWeek": 53, + "lastMonth": 1897 } }, { @@ -31961,9 +31849,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 5, "lastWeek": 9, - "lastMonth": 1586 + "lastMonth": 1585 } }, { @@ -32077,9 +31965,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 53, - "lastMonth": 1653 + "lastDay": 11, + "lastWeek": 61, + "lastMonth": 1654 } }, { @@ -32188,9 +32076,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 18, - "lastMonth": 1711 + "lastDay": 6, + "lastWeek": 21, + "lastMonth": 1690 } }, { @@ -32301,9 +32189,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 198, + "lastWeek": 1044, + "lastMonth": 6405 } }, { @@ -32415,9 +32303,9 @@ } ], "downloadStats": { - "lastDay": 190, - "lastWeek": 1083, - "lastMonth": 5528 + "lastDay": 204, + "lastWeek": 1087, + "lastMonth": 5493 } }, { @@ -32528,9 +32416,9 @@ } ], "downloadStats": { - "lastDay": 34, - "lastWeek": 104, - "lastMonth": 2003 + "lastDay": 28, + "lastWeek": 121, + "lastMonth": 2000 } }, { @@ -32645,9 +32533,9 @@ } ], "downloadStats": { - "lastDay": 24, - "lastWeek": 120, - "lastMonth": 2150 + "lastDay": 19, + "lastWeek": 129, + "lastMonth": 2144 } }, { @@ -32766,9 +32654,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 6, "lastWeek": 14, - "lastMonth": 1876 + "lastMonth": 1863 } }, { @@ -32893,9 +32781,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 2, "lastWeek": 3, - "lastMonth": 147 + "lastMonth": 146 } }, { @@ -33111,9 +32999,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 2064, - "lastMonth": 0 + "lastDay": 263, + "lastWeek": 2086, + "lastMonth": 7023 } }, { @@ -33224,9 +33112,9 @@ } ], "downloadStats": { - "lastDay": 13, - "lastWeek": 72, - "lastMonth": 1003 + "lastDay": 6, + "lastWeek": 68, + "lastMonth": 986 } }, { @@ -33334,8 +33222,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 20, - "lastMonth": 142 + "lastWeek": 13, + "lastMonth": 144 } }, { @@ -33442,9 +33330,9 @@ } ], "downloadStats": { - "lastDay": 14, + "lastDay": 7, "lastWeek": 53, - "lastMonth": 696 + "lastMonth": 668 } }, { @@ -33552,8 +33440,8 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 6, + "lastDay": 0, + "lastWeek": 4, "lastMonth": 66 } }, @@ -33763,9 +33651,9 @@ } ], "downloadStats": { - "lastDay": 509, - "lastWeek": 2429, - "lastMonth": 9906 + "lastDay": 219, + "lastWeek": 2284, + "lastMonth": 9759 } }, { @@ -33974,9 +33862,9 @@ } ], "downloadStats": { - "lastDay": 34, - "lastWeek": 99, - "lastMonth": 561 + "lastDay": 21, + "lastWeek": 93, + "lastMonth": 582 } }, { @@ -34080,8 +33968,8 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, + "lastDay": 533, + "lastWeek": 4158, "lastMonth": 0 } }, @@ -34297,9 +34185,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 227, + "lastWeek": 1628, + "lastMonth": 7375 } }, { @@ -34519,7 +34407,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 4, + "lastWeek": 3, "lastMonth": 98 } }, @@ -34627,9 +34515,9 @@ } ], "downloadStats": { - "lastDay": 228, - "lastWeek": 1100, - "lastMonth": 4970 + "lastDay": 209, + "lastWeek": 1085, + "lastMonth": 4899 } }, { @@ -34845,9 +34733,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 59, + "lastWeek": 934, + "lastMonth": 4230 } }, { @@ -34954,9 +34842,9 @@ } ], "downloadStats": { - "lastDay": 199, - "lastWeek": 1038, - "lastMonth": 4397 + "lastDay": 63, + "lastWeek": 942, + "lastMonth": 4272 } }, { @@ -35176,8 +35064,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 329 } }, { @@ -35286,8 +35174,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 305 } }, { @@ -35395,9 +35283,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 4, + "lastWeek": 5, + "lastMonth": 328 } }, { @@ -35506,8 +35394,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 322 } }, { @@ -35616,8 +35504,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 295 } }, { @@ -35726,8 +35614,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 332 } }, { @@ -35834,9 +35722,9 @@ } ], "downloadStats": { - "lastDay": 364, - "lastWeek": 1778, - "lastMonth": 8118 + "lastDay": 167, + "lastWeek": 1694, + "lastMonth": 7985 } }, { @@ -35948,9 +35836,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 36, - "lastMonth": 316 + "lastDay": 9, + "lastWeek": 35, + "lastMonth": 319 } }, { @@ -36377,115 +36265,6 @@ "lastMonth": 0 } }, - { - "name": "@nativescript/rive", - "scope": "nativescript", - "version": "1.0.1", - "description": "Rive for NativeScript", - "keywords": [ - "NativeScript", - "JavaScript", - "TypeScript", - "iOS", - "Android", - "Rive", - "rive" - ], - "date": "2023-08-13T16:08:23.553Z", - "links": { - "npm": "https://www.npmjs.com/package/%40nativescript%2Frive", - "homepage": "https://github.com/NativeScript/ui-kit", - "repository": "https://github.com/NativeScript/ui-kit", - "bugs": "https://github.com/NativeScript/ui-kit/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - "maintainers": [ - { - "username": "nativescript-user", - "email": "nativescript@telerik.com" - }, - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "tachev", - "email": "nevermindd7@gmail.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "rosen_vladimirov", - "email": "rosen.vladimirov.91@gmail.com" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "davecoffin", - "email": "dave@davecoffin.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "multishiv19", - "email": "sp@shiv19.com" - }, - { - "username": "eddyverbruggen", - "email": "eddyverbruggen@gmail.com" - }, - { - "username": "edusperoni", - "email": "edusperoni@gmail.com" - }, - { - "username": "facetious", - "email": "Ian.MacDonald.facetious@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 2, - "lastMonth": 38 - } - }, { "name": "@nativescript/schematics-executor", "scope": "nativescript", @@ -36666,9 +36445,9 @@ } ], "downloadStats": { - "lastDay": 150, - "lastWeek": 714, - "lastMonth": 2497 + "lastDay": 211, + "lastWeek": 857, + "lastMonth": 2608 } }, { @@ -36884,9 +36663,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 87, + "lastWeek": 1024, + "lastMonth": 4399 } }, { @@ -37326,7 +37105,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 9, - "lastMonth": 448 + "lastMonth": 447 } }, { @@ -37438,8 +37217,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 6, - "lastMonth": 598 + "lastWeek": 5, + "lastMonth": 597 } }, { @@ -37548,9 +37327,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 14, + "lastMonth": 523 } }, { @@ -37889,7 +37668,7 @@ ], "downloadStats": { "lastDay": 9, - "lastWeek": 157, + "lastWeek": 158, "lastMonth": 784 } }, @@ -38114,9 +37893,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 4, - "lastMonth": 480 + "lastMonth": 481 } }, { @@ -38230,9 +38009,9 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 33, - "lastMonth": 594 + "lastDay": 4, + "lastWeek": 32, + "lastMonth": 591 } }, { @@ -38315,9 +38094,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 25, - "lastMonth": 433 + "lastDay": 2, + "lastWeek": 26, + "lastMonth": 428 } }, { @@ -38543,8 +38322,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 13, - "lastMonth": 498 + "lastWeek": 14, + "lastMonth": 499 } }, { @@ -38658,9 +38437,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 13, - "lastMonth": 637 + "lastDay": 0, + "lastWeek": 10, + "lastMonth": 636 } }, { @@ -38773,9 +38552,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 8, - "lastMonth": 484 + "lastDay": 3, + "lastWeek": 10, + "lastMonth": 487 } }, { @@ -38890,9 +38669,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 6, - "lastMonth": 458 + "lastDay": 3, + "lastWeek": 8, + "lastMonth": 460 } }, { @@ -39001,9 +38780,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 66, - "lastMonth": 697 + "lastDay": 10, + "lastWeek": 71, + "lastMonth": 702 } }, { @@ -39112,9 +38891,9 @@ } ], "downloadStats": { - "lastDay": 17, - "lastWeek": 97, - "lastMonth": 1133 + "lastDay": 18, + "lastWeek": 104, + "lastMonth": 1142 } }, { @@ -39335,9 +39114,9 @@ } ], "downloadStats": { - "lastDay": 5, + "lastDay": 3, "lastWeek": 31, - "lastMonth": 586 + "lastMonth": 584 } }, { @@ -39562,9 +39341,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 5, - "lastMonth": 368 + "lastDay": 3, + "lastWeek": 7, + "lastMonth": 371 } }, { @@ -39679,7 +39458,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 4, "lastMonth": 487 } }, @@ -39792,9 +39571,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 3, - "lastMonth": 371 + "lastMonth": 372 } }, { @@ -39911,7 +39690,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 5, - "lastMonth": 381 + "lastMonth": 382 } }, { @@ -40023,9 +39802,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 11, - "lastMonth": 469 + "lastMonth": 471 } }, { @@ -40140,8 +39919,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 12, - "lastMonth": 0 + "lastWeek": 8, + "lastMonth": 616 } }, { @@ -40254,9 +40033,9 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 10, - "lastMonth": 477 + "lastMonth": 479 } }, { @@ -40372,8 +40151,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 11, - "lastMonth": 479 + "lastWeek": 12, + "lastMonth": 469 } }, { @@ -40734,7 +40513,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 160 } }, @@ -40836,9 +40615,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 829, - "lastWeek": 3712, - "lastMonth": 15468 + "lastDay": 622, + "lastWeek": 3767, + "lastMonth": 15376 } }, { @@ -40940,9 +40719,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 835, - "lastWeek": 3726, - "lastMonth": 15552 + "lastDay": 633, + "lastWeek": 3791, + "lastMonth": 15469 } }, { @@ -41044,9 +40823,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 829, - "lastWeek": 3718, - "lastMonth": 15521 + "lastDay": 632, + "lastWeek": 3779, + "lastMonth": 15439 } }, { @@ -41148,9 +40927,9 @@ "username": "nativescript" }, "downloadStats": { - "lastDay": 1, - "lastWeek": 12, - "lastMonth": 353 + "lastDay": 4, + "lastWeek": 14, + "lastMonth": 355 } }, { @@ -41927,7 +41706,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 112 } }, @@ -42083,7 +41862,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 9, - "lastMonth": 3082 + "lastMonth": 3083 } }, { @@ -42375,9 +42154,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 5, - "lastMonth": 1607 + "lastDay": 0, + "lastWeek": 2, + "lastMonth": 1605 } }, { @@ -42577,9 +42356,9 @@ } ], "downloadStats": { - "lastDay": 374, - "lastWeek": 1438, - "lastMonth": 6999 + "lastDay": 84, + "lastWeek": 1348, + "lastMonth": 6909 } }, { @@ -42928,9 +42707,9 @@ } ], "downloadStats": { - "lastDay": 373, - "lastWeek": 1424, - "lastMonth": 6962 + "lastDay": 70, + "lastWeek": 1317, + "lastMonth": 6857 } }, { @@ -42998,7 +42777,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 2, "lastMonth": 37 } }, @@ -43068,7 +42847,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, + "lastWeek": 2, "lastMonth": 179 } }, @@ -43369,9 +43148,9 @@ } ], "downloadStats": { - "lastDay": 34, - "lastWeek": 213, - "lastMonth": 1782 + "lastDay": 26, + "lastWeek": 189, + "lastMonth": 1781 } }, { @@ -43866,9 +43645,9 @@ } ], "downloadStats": { - "lastDay": 246, - "lastWeek": 1043, - "lastMonth": 4545 + "lastDay": 73, + "lastWeek": 947, + "lastMonth": 4420 } }, { @@ -44150,8 +43929,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 48 } }, { @@ -44365,9 +44144,78 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 14, - "lastMonth": 111 + "lastDay": 3, + "lastWeek": 11, + "lastMonth": 112 + } + }, + { + "name": "@nstudio/nativescript-intercom", + "scope": "nstudio", + "version": "1.0.0", + "description": "Intercom SDK for NativeScript", + "keywords": [ + "NativeScript", + "JavaScript", + "TypeScript", + "iOS", + "Android", + "nativescript", + "intercom" + ], + "date": "2021-12-20T17:53:28.825Z", + "links": { + "npm": "https://www.npmjs.com/package/%40nstudio%2Fnativescript-intercom", + "homepage": "https://github.com/nstudio/nativescript-plugins", + "repository": "https://github.com/nstudio/nativescript-plugins", + "bugs": "https://github.com/nstudio/nativescript-plugins/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + "maintainers": [ + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "multishiv19", + "email": "sp@shiv19.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "alexziskind1", + "email": "alex@nuvious.com" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "davecoffin", + "email": "dave@davecoffin.com" + }, + { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 } }, { @@ -44436,8 +44284,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 3, + "lastMonth": 22 } }, { @@ -44575,9 +44423,9 @@ } ], "downloadStats": { - "lastDay": 283, - "lastWeek": 1356, - "lastMonth": 6157 + "lastDay": 107, + "lastWeek": 1242, + "lastMonth": 6027 } }, { @@ -45271,7 +45119,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 6, + "lastWeek": 3, "lastMonth": 42 } }, @@ -45482,8 +45330,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 5, - "lastMonth": 69 + "lastWeek": 2, + "lastMonth": 68 } }, { @@ -45693,9 +45541,9 @@ } ], "downloadStats": { - "lastDay": 283, - "lastWeek": 618, - "lastMonth": 5398 + "lastDay": 58, + "lastWeek": 646, + "lastMonth": 5386 } }, { @@ -45850,9 +45698,9 @@ } ], "downloadStats": { - "lastDay": 539, - "lastWeek": 2152, - "lastMonth": 10485 + "lastDay": 246, + "lastWeek": 2110, + "lastMonth": 10363 } }, { @@ -45924,9 +45772,9 @@ } ], "downloadStats": { - "lastDay": 527, - "lastWeek": 2165, - "lastMonth": 10360 + "lastDay": 316, + "lastWeek": 2200, + "lastMonth": 10273 } }, { @@ -46239,7 +46087,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 2, "lastWeek": 5, "lastMonth": 256 } @@ -46282,7 +46130,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 1, "lastMonth": 205 } }, @@ -46327,7 +46175,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 3, + "lastWeek": 1, "lastMonth": 34 } }, @@ -46404,9 +46252,9 @@ } ], "downloadStats": { - "lastDay": 155, - "lastWeek": 687, - "lastMonth": 3609 + "lastDay": 21, + "lastWeek": 630, + "lastMonth": 3554 } }, { @@ -49325,7 +49173,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 1, "lastMonth": 19 } @@ -49362,7 +49210,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 5, "lastMonth": 194 } @@ -51029,8 +50877,8 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 2, + "lastDay": 1, + "lastWeek": 1, "lastMonth": 26 } }, @@ -51203,9 +51051,9 @@ } ], "downloadStats": { - "lastDay": 123, - "lastWeek": 656, - "lastMonth": 3208 + "lastDay": 86, + "lastWeek": 612, + "lastMonth": 3106 } }, { @@ -51475,9 +51323,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 11, + "lastWeek": 87, + "lastMonth": 644 } }, { @@ -52537,9 +52385,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 2, + "lastMonth": 33 } }, { @@ -52594,9 +52442,9 @@ } ], "downloadStats": { - "lastDay": 175, - "lastWeek": 858, - "lastMonth": 3369 + "lastDay": 39, + "lastWeek": 777, + "lastMonth": 3283 } }, { @@ -52653,9 +52501,9 @@ } ], "downloadStats": { - "lastDay": 32, - "lastWeek": 198, - "lastMonth": 799 + "lastDay": 21, + "lastWeek": 185, + "lastMonth": 760 } }, { @@ -52765,8 +52613,8 @@ ], "downloadStats": { "lastDay": 22, - "lastWeek": 166, - "lastMonth": 711 + "lastWeek": 150, + "lastMonth": 680 } }, { @@ -52821,9 +52669,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 111, - "lastMonth": 722 + "lastDay": 23, + "lastWeek": 120, + "lastMonth": 719 } }, { @@ -52993,9 +52841,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 2, - "lastMonth": 25 + "lastMonth": 26 } }, { @@ -53035,9 +52883,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 5, - "lastMonth": 43 + "lastDay": 1, + "lastWeek": 4, + "lastMonth": 44 } }, { @@ -53077,9 +52925,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 19 } }, { @@ -53118,9 +52966,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 1, - "lastMonth": 103 + "lastMonth": 104 } }, { @@ -53159,9 +53007,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 1, - "lastMonth": 55 + "lastMonth": 56 } }, { @@ -54287,9 +54135,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 9, - "lastMonth": 112 + "lastDay": 2, + "lastWeek": 10, + "lastMonth": 114 } }, { @@ -54603,7 +54451,7 @@ "username": "daravind" }, "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 3, "lastMonth": 28 } @@ -54674,9 +54522,9 @@ "advanced" ], "downloadStats": { - "lastDay": 4, - "lastWeek": 29, - "lastMonth": 179 + "lastDay": 9, + "lastWeek": 35, + "lastMonth": 185 } }, { @@ -54832,9 +54680,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 126 } }, { @@ -55048,9 +54896,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 113, - "lastMonth": 924 + "lastDay": 7, + "lastWeek": 118, + "lastMonth": 926 } }, { @@ -55279,8 +55127,8 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 57, - "lastMonth": 240 + "lastWeek": 59, + "lastMonth": 235 } }, { @@ -55454,9 +55302,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 28, + "lastMonth": 125 } }, { @@ -57407,8 +57255,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 31 } }, { @@ -57565,9 +57413,9 @@ } ], "downloadStats": { - "lastDay": 503, - "lastWeek": 4557, - "lastMonth": 28346 + "lastDay": 2288, + "lastWeek": 5111, + "lastMonth": 30133 } }, { @@ -57653,7 +57501,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 8, + "lastWeek": 7, "lastMonth": 29 } }, @@ -57885,50 +57733,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 36, - "lastMonth": 126 - } - }, - { - "name": "nativescript-acs-bluetooth", - "scope": "unscoped", - "version": "2.2.9", - "description": "NativeScript ASB bluetooth card reader interface", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "ACS", - "Bluetooth", - "nativescript", - "acs", - "bluetooth" - ], - "date": "2020-03-06T01:18:30.316Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-acs-bluetooth", - "homepage": "https://github.com/luciditysoftware/ACSBluetooth", - "repository": "https://github.com/luciditysoftware/ACSBluetooth", - "bugs": "https://github.com/luciditysoftware/ACSBluetooth/issues" - }, - "author": { - "name": "luciditysoftware", - "username": "luciditysoftware" - }, - "publisher": { - "username": "luciditysoftware", - "email": "software@luciditysoftware.com.au" - }, - "maintainers": [ - { - "username": "luciditysoftware", - "email": "software@luciditysoftware.com.au" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 120 } }, { @@ -58402,9 +58208,9 @@ } ], "downloadStats": { - "lastDay": 92, - "lastWeek": 370, - "lastMonth": 1437 + "lastDay": 43, + "lastWeek": 328, + "lastMonth": 1388 } }, { @@ -59306,8 +59112,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 12 } }, { @@ -59593,9 +59399,9 @@ } ], "downloadStats": { - "lastDay": 52, - "lastWeek": 1007, - "lastMonth": 3869 + "lastDay": 49, + "lastWeek": 1006, + "lastMonth": 3836 } }, { @@ -59630,9 +59436,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 24, + "lastMonth": 60 } }, { @@ -60926,9 +60732,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 36, - "lastMonth": 188 + "lastDay": 18, + "lastWeek": 49, + "lastMonth": 194 } }, { @@ -61048,9 +60854,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 50, - "lastMonth": 151 + "lastDay": 1, + "lastWeek": 51, + "lastMonth": 152 } }, { @@ -61465,46 +61271,6 @@ "lastMonth": 0 } }, - { - "name": "nativescript-appurl-handler", - "scope": "unscoped", - "version": "1.6.1", - "description": "Register custom URLs for your NativeScript app (IOS fix included)", - "keywords": [ - "NativeScript", - "URL-Handler", - "Deep links", - "nativescript", - "appurl", - "handler" - ], - "date": "2020-08-13T18:29:41.549Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-appurl-handler", - "homepage": "https://github.com/mikykonst/nativescript-appurl-handler", - "repository": "https://github.com/mikykonst/nativescript-appurl-handler", - "bugs": "https://github.com/mikykonst/nativescript-appurl-handler/issues" - }, - "author": { - "name": "mikykonst", - "username": "mikykonst" - }, - "publisher": { - "username": "mikykonst", - "email": "mikykonst66@gmail.com" - }, - "maintainers": [ - { - "username": "mikykonst", - "email": "mikykonst66@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-appversion", "scope": "unscoped", @@ -61543,9 +61309,9 @@ } ], "downloadStats": { - "lastDay": 80, - "lastWeek": 436, - "lastMonth": 1668 + "lastDay": 88, + "lastWeek": 454, + "lastMonth": 1689 } }, { @@ -61644,7 +61410,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 10, - "lastMonth": 80 + "lastMonth": 79 } }, { @@ -62132,6 +61898,55 @@ "lastMonth": 0 } }, + { + "name": "nativescript-audio-v2", + "scope": "unscoped", + "version": "5.0.4", + "description": "NativeScript plugin to record and play audio.", + "keywords": [ + "NativeScript", + "JavaScript", + "TypeScript", + "Android", + "iOS", + "music", + "microphone", + "recorder", + "audio", + "nStudio", + "bradmartin", + "nathanwalker", + "nativescript", + "audio", + "v2" + ], + "date": "2019-08-30T09:52:59.094Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-audio-v2", + "homepage": "https://github.com/bradmartin/nativescript-audio", + "repository": "https://github.com/bradmartin/nativescript-audio", + "bugs": "https://github.com/bradmartin/nativescript-audio/issues" + }, + "author": { + "name": "dieyne", + "username": "dieyne" + }, + "publisher": { + "username": "dieyne", + "email": "dieynedrame@gmail.com" + }, + "maintainers": [ + { + "username": "dieyne", + "email": "dieynedrame@gmail.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-audio-with-pitch", "scope": "unscoped", @@ -62605,7 +62420,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 16 } }, { @@ -63497,8 +63312,8 @@ ], "downloadStats": { "lastDay": 4, - "lastWeek": 50, - "lastMonth": 329 + "lastWeek": 46, + "lastMonth": 324 } }, { @@ -63571,44 +63386,9 @@ "push" ], "downloadStats": { - "lastDay": 0, - "lastWeek": 19, - "lastMonth": 107 - } - }, - { - "name": "nativescript-baidu-push-ins", - "scope": "unscoped", - "version": "1.4.9", - "description": "The code for the Push Plugin for NativeScript.", - "date": "2018-10-16T04:20:41.434Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-baidu-push-ins" - }, - "author": { - "name": "vanphuc06t1", - "username": "vanphuc06t1" - }, - "publisher": { - "username": "vanphuc06t1", - "email": "vanphuc06t1@gmail.com" - }, - "maintainers": [ - { - "username": "vanphuc06t1", - "email": "vanphuc06t1@gmail.com" - } - ], - "keywords": [ - "nativescript", - "baidu", - "push", - "ins" - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 4, + "lastMonth": 108 } }, { @@ -63744,9 +63524,9 @@ } ], "downloadStats": { - "lastDay": 27, - "lastWeek": 257, - "lastMonth": 701 + "lastDay": 32, + "lastWeek": 268, + "lastMonth": 719 } }, { @@ -64471,8 +64251,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 8 } }, { @@ -64517,9 +64297,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 7, + "lastWeek": 27, + "lastMonth": 210 } }, { @@ -64609,8 +64389,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 9, + "lastMonth": 20 } }, { @@ -65433,8 +65213,8 @@ ], "downloadStats": { "lastDay": 11, - "lastWeek": 94, - "lastMonth": 601 + "lastWeek": 92, + "lastMonth": 563 } }, { @@ -66095,9 +65875,9 @@ } ], "downloadStats": { - "lastDay": 19, - "lastWeek": 78, - "lastMonth": 394 + "lastDay": 37, + "lastWeek": 113, + "lastMonth": 418 } }, { @@ -66749,8 +66529,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 44 } }, { @@ -67035,9 +66815,9 @@ } ], "downloadStats": { - "lastDay": 187, - "lastWeek": 825, - "lastMonth": 3194 + "lastDay": 136, + "lastWeek": 832, + "lastMonth": 3159 } }, { @@ -67108,9 +66888,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 157, - "lastMonth": 517 + "lastDay": 7, + "lastWeek": 154, + "lastMonth": 505 } }, { @@ -67192,9 +66972,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 11, - "lastMonth": 36 + "lastDay": 0, + "lastWeek": 9, + "lastMonth": 35 } }, { @@ -67558,8 +67338,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 24, + "lastMonth": 76 } }, { @@ -67727,8 +67507,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 12, + "lastMonth": 38 } }, { @@ -67836,8 +67616,8 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 197, + "lastDay": 0, + "lastWeek": 101, "lastMonth": 304 } }, @@ -69969,9 +69749,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 17, + "lastWeek": 381, + "lastMonth": 1181 } }, { @@ -70831,9 +70611,9 @@ "xcode" ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 401, + "lastWeek": 2304, + "lastMonth": 9977 } }, { @@ -70980,7 +70760,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 2, + "lastWeek": 1, "lastMonth": 7 } }, @@ -71109,9 +70889,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 8, + "lastMonth": 103 } }, { @@ -71977,7 +71757,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 23, - "lastMonth": 141 + "lastMonth": 137 } }, { @@ -72016,9 +71796,9 @@ } ], "downloadStats": { - "lastDay": 120, - "lastWeek": 542, - "lastMonth": 2254 + "lastDay": 68, + "lastWeek": 502, + "lastMonth": 2178 } }, { @@ -72143,8 +71923,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 20 } }, { @@ -72187,8 +71967,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 20 } }, { @@ -72647,6 +72427,51 @@ "lastMonth": 0 } }, + { + "name": "nativescript-email", + "scope": "unscoped", + "version": "1.6.0", + "description": "Email plugin for your NativeScript app", + "keywords": [ + "ecosystem:NativeScript", + "NativeScript", + "Mail", + "Email", + "E-mail", + "Draft", + "Compose", + "MailComposer", + "Attachment", + "nativescript", + "email" + ], + "date": "2020-03-02T14:00:05.402Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-email", + "homepage": "https://github.com/eddyverbruggen/nativescript-email", + "repository": "https://github.com/EddyVerbruggen/nativescript-email", + "bugs": "https://github.com/eddyverbruggen/nativescript-email/issues" + }, + "author": { + "name": "Eddy Verbruggen", + "username": "eddyverbruggen" + }, + "publisher": { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + "maintainers": [ + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + } + ], + "downloadStats": { + "lastDay": 10, + "lastWeek": 58, + "lastMonth": 214 + } + }, { "name": "nativescript-emoji", "scope": "unscoped", @@ -72683,8 +72508,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 7, + "lastMonth": 35 } }, { @@ -72800,9 +72625,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 32, + "lastMonth": 100 } }, { @@ -74140,9 +73965,9 @@ } ], "downloadStats": { - "lastDay": 119, - "lastWeek": 540, - "lastMonth": 2210 + "lastDay": 98, + "lastWeek": 527, + "lastMonth": 2179 } }, { @@ -74421,9 +74246,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 6, + "lastMonth": 130 } }, { @@ -74512,9 +74337,9 @@ } ], "downloadStats": { - "lastDay": 7, - "lastWeek": 60, - "lastMonth": 265 + "lastDay": 6, + "lastWeek": 55, + "lastMonth": 263 } }, { @@ -75175,9 +75000,9 @@ } ], "downloadStats": { - "lastDay": 199, - "lastWeek": 1012, - "lastMonth": 4031 + "lastDay": 67, + "lastWeek": 937, + "lastMonth": 3929 } }, { @@ -75619,7 +75444,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 23 + "lastMonth": 20 } }, { @@ -75737,9 +75562,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 96, - "lastMonth": 391 + "lastDay": 8, + "lastWeek": 94, + "lastMonth": 364 } }, { @@ -76020,6 +75845,48 @@ "lastMonth": 0 } }, + { + "name": "nativescript-gmaps", + "scope": "unscoped", + "version": "8.0.3", + "description": "Google Maps for NativeScript", + "keywords": [ + "Nativescript", + "Google", + "Maps", + "Google Maps", + "API", + "SDK", + "nativescript", + "gmaps" + ], + "date": "2022-07-02T00:54:48.705Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-gmaps", + "homepage": "https://github.com/PackagedCat/nativescript-google-maps", + "repository": "https://github.com/PackagedCat/nativescript-google-maps", + "bugs": "https://github.com/PackagedCat/nativescript-google-maps/issues" + }, + "author": { + "name": "Shamsuddin Dzhamalov", + "username": "packagedcat" + }, + "publisher": { + "username": "packagedcat", + "email": "packagedcat@outlook.com" + }, + "maintainers": [ + { + "username": "packagedcat", + "email": "packagedcat@outlook.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-GMImagePicker", "scope": "unscoped", @@ -76273,7 +76140,7 @@ } ], "downloadStats": { - "lastDay": 12, + "lastDay": 3, "lastWeek": 109, "lastMonth": 370 } @@ -77071,9 +76938,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 7 } }, { @@ -77114,8 +76981,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 49, + "lastMonth": 217 } }, { @@ -78953,9 +78820,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 1, + "lastWeek": 115, + "lastMonth": 412 } }, { @@ -79170,9 +79037,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 32, + "lastMonth": 174 } }, { @@ -79727,9 +79594,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 128, - "lastMonth": 537 + "lastDay": 10, + "lastWeek": 120, + "lastMonth": 516 } }, { @@ -80342,6 +80209,48 @@ "lastMonth": 0 } }, + { + "name": "nativescript-insomnia", + "scope": "unscoped", + "version": "2.0.0", + "description": "Make the screen not dim (and eventually lock the device) while Insomnia is active", + "keywords": [ + "NativeScript", + "Insomnia", + "Screen dim", + "dim", + "lock", + "sleep", + "nativescript", + "insomnia" + ], + "date": "2020-09-16T07:19:58.866Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-insomnia", + "homepage": "https://github.com/eddyverbruggen/nativescript-insomnia", + "repository": "https://github.com/eddyverbruggen/nativescript-insomnia", + "bugs": "https://github.com/eddyverbruggen/nativescript-insomnia/issues" + }, + "author": { + "name": "Eddy Verbruggen", + "username": "eddyverbruggen" + }, + "publisher": { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + }, + "maintainers": [ + { + "username": "eddyverbruggen", + "email": "eddyverbruggen@gmail.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-instagram-auth", "scope": "unscoped", @@ -82935,9 +82844,9 @@ } ], "downloadStats": { - "lastDay": 10, - "lastWeek": 130, - "lastMonth": 467 + "lastDay": 8, + "lastWeek": 123, + "lastMonth": 450 } }, { @@ -83348,9 +83257,9 @@ } ], "downloadStats": { - "lastDay": 11, - "lastWeek": 68, - "lastMonth": 262 + "lastDay": 2, + "lastWeek": 69, + "lastMonth": 258 } }, { @@ -84712,8 +84621,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 2, + "lastMonth": 8 } }, { @@ -85258,53 +85167,6 @@ "lastMonth": 0 } }, - { - "name": "nativescript-microsoft-appcenter-v2", - "scope": "unscoped", - "version": "3.0.4", - "description": "Microsoft App Center plugin for NativeScript.", - "keywords": [ - "NativeScript", - "JavaScript", - "Android", - "iOS", - "Microsoft", - "AppCenter", - "Analytics", - "CrashReport", - "Diagnostics", - "Push", - "nativescript", - "microsoft", - "appcenter", - "v2" - ], - "date": "2020-11-19T09:50:38.501Z", - "links": { - "npm": "https://www.npmjs.com/package/nativescript-microsoft-appcenter-v2", - "homepage": "https://github.com/benediktveith/nativescript-microsoft-appcenter", - "bugs": "https://github.com/benediktveith/nativescript-microsoft-appcenter/issues" - }, - "author": { - "name": "Benedikt Veith", - "username": "benediktveith" - }, - "publisher": { - "username": "benediktveith", - "email": "benedikt.veith@scherer-software.de" - }, - "maintainers": [ - { - "username": "benediktveith", - "email": "benedikt.veith@scherer-software.de" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "nativescript-midi", "scope": "unscoped", @@ -85682,7 +85544,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 9, + "lastWeek": 8, "lastMonth": 26 } }, @@ -86334,7 +86196,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 24 } }, { @@ -87926,7 +87788,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 34, + "lastWeek": 26, "lastMonth": 110 } }, @@ -88010,8 +87872,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 59, + "lastMonth": 194 } }, { @@ -88091,9 +87953,9 @@ } ], "downloadStats": { - "lastDay": 8, - "lastWeek": 54, - "lastMonth": 109 + "lastDay": 7, + "lastWeek": 50, + "lastMonth": 115 } }, { @@ -88410,8 +88272,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 40, + "lastMonth": 127 } }, { @@ -89082,7 +88944,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, + "lastWeek": 1, "lastMonth": 0 } }, @@ -89378,9 +89240,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 7, + "lastWeek": 28, + "lastMonth": 108 } }, { @@ -89629,7 +89491,7 @@ ], "downloadStats": { "lastDay": 2, - "lastWeek": 10, + "lastWeek": 12, "lastMonth": 33 } }, @@ -90552,8 +90414,8 @@ ], "downloadStats": { "lastDay": 8, - "lastWeek": 122, - "lastMonth": 432 + "lastWeek": 18, + "lastMonth": 425 } }, { @@ -90787,7 +90649,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 29, + "lastWeek": 26, "lastMonth": 78 } }, @@ -91442,9 +91304,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 18, + "lastWeek": 179, + "lastMonth": 684 } }, { @@ -92188,6 +92050,58 @@ "lastMonth": 0 } }, + { + "name": "nativescript-phaser", + "scope": "unscoped", + "version": "1.0.0-alpha2", + "description": "Build awesome 2D games with Phaser.js and NativeScript", + "keywords": [ + "NativeScript", + "JavaScript", + "Android", + "iOS", + "native", + "phaser-ce", + "phaser", + "game", + "gl", + "graphics", + "opengl", + "2d", + "pixi", + "pixi.js", + "sprite", + "flash", + "nativescript", + "phaser" + ], + "date": "2020-07-01T18:14:29.243Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-phaser", + "homepage": "https://github.com/triniwiz/nativescript-phaser", + "repository": "https://github.com/triniwiz/nativescript-phaser", + "bugs": "https://github.com/triniwiz/nativescript-phaser/issues" + }, + "author": { + "name": "Osei Fortune", + "username": "triniwiz" + }, + "publisher": { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + }, + "maintainers": [ + { + "username": "triniwiz", + "email": "fortune.osei@yahoo.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "nativescript-phaser-ce", "scope": "unscoped", @@ -92281,9 +92195,9 @@ } ], "downloadStats": { - "lastDay": 260, - "lastWeek": 1358, - "lastMonth": 5340 + "lastDay": 109, + "lastWeek": 1260, + "lastMonth": 5253 } }, { @@ -92502,7 +92416,7 @@ "downloadStats": { "lastDay": 1, "lastWeek": 16, - "lastMonth": 90 + "lastMonth": 91 } }, { @@ -93119,8 +93033,8 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 48, + "lastDay": 0, + "lastWeek": 42, "lastMonth": 152 } }, @@ -93384,9 +93298,9 @@ } ], "downloadStats": { - "lastDay": 26, - "lastWeek": 349, - "lastMonth": 1479 + "lastDay": 13, + "lastWeek": 325, + "lastMonth": 1425 } }, { @@ -94686,8 +94600,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 8, + "lastMonth": 36 } }, { @@ -94731,6 +94645,50 @@ "lastMonth": 0 } }, + { + "name": "nativescript-purchase", + "scope": "unscoped", + "version": "2.0.14", + "description": "A NativeScript plugin for making in-app purchases", + "keywords": [ + "NativeScript", + "iap", + "in-app purchase", + "in-app billing", + "vending", + "payment", + "subscription", + "tangra", + "nativescript", + "purchase" + ], + "date": "2020-09-04T10:11:06.953Z", + "links": { + "npm": "https://www.npmjs.com/package/nativescript-purchase", + "homepage": "https://github.com/PeterStaev/nativescript-purchase#readme", + "repository": "https://github.com/PeterStaev/nativescript-purchase", + "bugs": "https://github.com/PeterStaev/nativescript-purchase/issues" + }, + "author": { + "name": "Peter Staev", + "username": "pstaev" + }, + "publisher": { + "username": "pstaev", + "email": "peter@tangrasoft.com" + }, + "maintainers": [ + { + "username": "pstaev", + "email": "peter@tangrasoft.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 31, + "lastMonth": 167 + } + }, { "name": "nativescript-push", "scope": "unscoped", @@ -95954,9 +95912,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 77, + "lastWeek": 509, + "lastMonth": 2183 } }, { @@ -96900,9 +96858,9 @@ } ], "downloadStats": { - "lastDay": 15, - "lastWeek": 83, - "lastMonth": 548 + "lastDay": 26, + "lastWeek": 87, + "lastMonth": 546 } }, { @@ -97190,9 +97148,9 @@ } ], "downloadStats": { - "lastDay": 2, - "lastWeek": 15, - "lastMonth": 71 + "lastDay": 4, + "lastWeek": 17, + "lastMonth": 72 } }, { @@ -98417,7 +98375,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 52, - "lastMonth": 171 + "lastMonth": 169 } }, { @@ -98548,8 +98506,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 20, + "lastMonth": 60 } }, { @@ -98728,7 +98686,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 61, + "lastWeek": 60, "lastMonth": 190 } }, @@ -99096,9 +99054,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 102, - "lastMonth": 461 + "lastDay": 10, + "lastWeek": 104, + "lastMonth": 457 } }, { @@ -99145,7 +99103,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 0, - "lastMonth": 0 + "lastMonth": 5 } }, { @@ -99567,9 +99525,9 @@ } ], "downloadStats": { - "lastDay": 105, - "lastWeek": 626, - "lastMonth": 1793 + "lastDay": 151, + "lastWeek": 705, + "lastMonth": 1868 } }, { @@ -100108,8 +100066,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 18, - "lastMonth": 68 + "lastWeek": 4, + "lastMonth": 69 } }, { @@ -100151,9 +100109,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 15, - "lastMonth": 33 + "lastDay": 1, + "lastWeek": 16, + "lastMonth": 32 } }, { @@ -100320,9 +100278,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 3, + "lastWeek": 39, + "lastMonth": 174 } }, { @@ -100665,8 +100623,8 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 46, + "lastDay": 0, + "lastWeek": 6, "lastMonth": 148 } }, @@ -100956,8 +100914,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 10, + "lastMonth": 52 } }, { @@ -101042,9 +101000,9 @@ } ], "downloadStats": { - "lastDay": 0, + "lastDay": 1, "lastWeek": 5, - "lastMonth": 17 + "lastMonth": 18 } }, { @@ -101469,8 +101427,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 23 } }, { @@ -101516,8 +101474,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 10, + "lastMonth": 45 } }, { @@ -102005,9 +101963,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 11, - "lastMonth": 30 + "lastDay": 3, + "lastWeek": 3, + "lastMonth": 33 } }, { @@ -102316,8 +102274,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 4, + "lastMonth": 15 } }, { @@ -102529,9 +102487,9 @@ } ], "downloadStats": { - "lastDay": 5, - "lastWeek": 68, - "lastMonth": 398 + "lastDay": 11, + "lastWeek": 59, + "lastMonth": 380 } }, { @@ -102731,9 +102689,9 @@ "core" ], "downloadStats": { - "lastDay": 457, - "lastWeek": 2012, - "lastMonth": 8616 + "lastDay": 206, + "lastWeek": 1923, + "lastMonth": 8411 } }, { @@ -103125,9 +103083,9 @@ } ], "downloadStats": { - "lastDay": 25, - "lastWeek": 127, - "lastMonth": 543 + "lastDay": 27, + "lastWeek": 139, + "lastMonth": 553 } }, { @@ -103296,9 +103254,9 @@ } ], "downloadStats": { - "lastDay": 1, - "lastWeek": 123, - "lastMonth": 379 + "lastDay": 5, + "lastWeek": 118, + "lastMonth": 374 } }, { @@ -104463,9 +104421,9 @@ } ], "downloadStats": { - "lastDay": 26, - "lastWeek": 211, - "lastMonth": 1004 + "lastDay": 17, + "lastWeek": 196, + "lastMonth": 962 } }, { @@ -104541,9 +104499,9 @@ } ], "downloadStats": { - "lastDay": 246, - "lastWeek": 1137, - "lastMonth": 4355 + "lastDay": 108, + "lastWeek": 1106, + "lastMonth": 4295 } }, { @@ -104619,9 +104577,9 @@ } ], "downloadStats": { - "lastDay": 238, - "lastWeek": 1119, - "lastMonth": 4557 + "lastDay": 158, + "lastWeek": 1007, + "lastMonth": 4489 } }, { @@ -104697,9 +104655,9 @@ } ], "downloadStats": { - "lastDay": 772, - "lastWeek": 3465, - "lastMonth": 13730 + "lastDay": 582, + "lastWeek": 3496, + "lastMonth": 13689 } }, { @@ -104775,9 +104733,9 @@ } ], "downloadStats": { - "lastDay": 9, - "lastWeek": 104, - "lastMonth": 486 + "lastDay": 7, + "lastWeek": 102, + "lastMonth": 474 } }, { @@ -104853,9 +104811,9 @@ } ], "downloadStats": { - "lastDay": 97, - "lastWeek": 381, - "lastMonth": 1445 + "lastDay": 39, + "lastWeek": 339, + "lastMonth": 1402 } }, { @@ -104974,9 +104932,9 @@ } ], "downloadStats": { - "lastDay": 258, - "lastWeek": 1398, - "lastMonth": 5681 + "lastDay": 252, + "lastWeek": 1414, + "lastMonth": 5651 } }, { @@ -105052,9 +105010,9 @@ } ], "downloadStats": { - "lastDay": 462, - "lastWeek": 2073, - "lastMonth": 8284 + "lastDay": 240, + "lastWeek": 1988, + "lastMonth": 8113 } }, { @@ -106031,7 +105989,7 @@ "downloadStats": { "lastDay": 0, "lastWeek": 9, - "lastMonth": 1188 + "lastMonth": 1115 } }, { @@ -106250,9 +106208,9 @@ } ], "downloadStats": { - "lastDay": 17, + "lastDay": 20, "lastWeek": 132, - "lastMonth": 607 + "lastMonth": 606 } }, { @@ -106350,9 +106308,9 @@ } ], "downloadStats": { - "lastDay": 175, - "lastWeek": 779, - "lastMonth": 3433 + "lastDay": 52, + "lastWeek": 733, + "lastMonth": 3372 } }, { @@ -106446,8 +106404,8 @@ ], "downloadStats": { "lastDay": 1, - "lastWeek": 44, - "lastMonth": 150 + "lastWeek": 45, + "lastMonth": 151 } }, { @@ -106778,9 +106736,9 @@ } ], "downloadStats": { - "lastDay": 313, - "lastWeek": 1511, - "lastMonth": 6185 + "lastDay": 296, + "lastWeek": 1611, + "lastMonth": 6221 } }, { @@ -107657,9 +107615,9 @@ "username": "yerol" }, "downloadStats": { - "lastDay": 5, - "lastWeek": 40, - "lastMonth": 125 + "lastDay": 1, + "lastWeek": 39, + "lastMonth": 124 } }, { @@ -108614,9 +108572,9 @@ } ], "downloadStats": { - "lastDay": 125, - "lastWeek": 531, - "lastMonth": 2084 + "lastDay": 58, + "lastWeek": 488, + "lastMonth": 2001 } }, { @@ -110111,9 +110069,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 5077, + "lastWeek": 35219, + "lastMonth": 153838 } }, { @@ -110353,9 +110311,9 @@ } ], "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastDay": 2, + "lastWeek": 11, + "lastMonth": 103 } }, { @@ -111963,8 +111921,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 7, + "lastMonth": 38 } }, { @@ -112492,7 +112450,7 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 9, + "lastWeek": 7, "lastMonth": 27 } }, @@ -113214,8 +113172,8 @@ ], "downloadStats": { "lastDay": 5, - "lastWeek": 76, - "lastMonth": 321 + "lastWeek": 30, + "lastMonth": 323 } }, { @@ -113291,9 +113249,9 @@ } ], "downloadStats": { - "lastDay": 3, - "lastWeek": 22, - "lastMonth": 176 + "lastDay": 2, + "lastWeek": 21, + "lastMonth": 174 } }, { @@ -113373,8 +113331,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 5, + "lastMonth": 20 } }, { @@ -113406,9 +113364,9 @@ "username": "seankelly369" }, "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 6 + "lastDay": 1, + "lastWeek": 1, + "lastMonth": 7 } }, { @@ -113600,9 +113558,9 @@ } ], "downloadStats": { - "lastDay": 33, - "lastWeek": 270, - "lastMonth": 1337 + "lastDay": 24, + "lastWeek": 259, + "lastMonth": 1294 } }, { @@ -113764,8 +113722,8 @@ ], "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 6, + "lastMonth": 13 } }, { @@ -113801,7 +113759,7 @@ } ], "downloadStats": { - "lastDay": 3, + "lastDay": 0, "lastWeek": 18, "lastMonth": 49 } @@ -113844,7 +113802,7 @@ } ], "downloadStats": { - "lastDay": 1, + "lastDay": 0, "lastWeek": 4, "lastMonth": 19 } @@ -114003,8 +113961,8 @@ }, "downloadStats": { "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 + "lastWeek": 1, + "lastMonth": 17 } }, { @@ -114590,44 +114548,6 @@ "lastMonth": 0 } }, - { - "name": "tns-core-modules-xml", - "scope": "unscoped", - "version": "2.1.0", - "description": "Telerik NativeScript Core Modules", - "date": "2016-07-15T15:20:19.179Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-core-modules-xml", - "homepage": "https://www.nativescript.org", - "repository": "https://github.com/NativeScript/NativeScript", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "publisher": { - "username": "spike1292", - "email": "spike1292@gmail.com" - }, - "maintainers": [ - { - "username": "spike1292", - "email": "spike1292@gmail.com" - } - ], - "keywords": [ - "tns", - "core", - "modules", - "xml" - ], - "author": { - "name": "spike1292", - "username": "spike1292" - }, - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "tns-core-modules-xsd-schema", "scope": "unscoped", @@ -115331,6 +115251,95 @@ "lastMonth": 0 } }, + { + "name": "tns-platform-declarations", + "scope": "unscoped", + "version": "6.5.15", + "description": "Platform-specific TypeScript declarations for NativeScript for accessing native objects", + "keywords": [ + "NativeScript", + "TypeScript", + "declarations", + "native", + "platform-specific", + "tns", + "ts", + "ns", + "tns", + "platform", + "declarations" + ], + "date": "2020-08-12T05:01:07.590Z", + "links": { + "npm": "https://www.npmjs.com/package/tns-platform-declarations", + "homepage": "https://github.com/NativeScript/NativeScript#readme", + "repository": "https://github.com/NativeScript/NativeScript", + "bugs": "https://github.com/NativeScript/NativeScript/issues" + }, + "author": { + "name": "NativeScript Team", + "username": "nativescript" + }, + "publisher": { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + "maintainers": [ + { + "username": "tns-bot", + "email": "nativescript@telerik.com" + }, + { + "username": "rosen-vladimirov", + "email": "vladimirov@progress.com" + }, + { + "username": "stoskov", + "email": "s.toskov@gmail.com" + }, + { + "username": "lini", + "email": "bit@gbg.bg" + }, + { + "username": "walkerrunpdx", + "email": "walkerrunpdx@gmail.com" + }, + { + "username": "rigor789", + "email": "shout@igor-randjelovic.com" + }, + { + "username": "nativescript-bot", + "email": "oss@nativescript.org" + }, + { + "username": "bradmartin", + "email": "bradwaynemartin@gmail.com" + }, + { + "username": "tdermendjiev", + "email": "tdermendjievft@gmail.com" + }, + { + "username": "sis0k0", + "email": "stanimira.vlaeva@gmail.com" + }, + { + "username": "hdeshev", + "email": "hristo@deshev.com" + }, + { + "username": "panayot.cankov", + "email": "panayot.cankov@telerik.com" + } + ], + "downloadStats": { + "lastDay": 0, + "lastWeek": 0, + "lastMonth": 0 + } + }, { "name": "tns-template-ava-ts", "scope": "unscoped", @@ -115501,88 +115510,6 @@ "lastMonth": 0 } }, - { - "name": "tns-template-blank-ng", - "scope": "unscoped", - "version": "6.5.4", - "description": "Blank template for NativeScript apps using Angular", - "keywords": [ - "nstudio", - "nativescript", - "mobile", - "angular", - "{N}", - "tns", - "template", - "category-general", - "tns", - "template", - "blank", - "ng" - ], - "date": "2020-06-07T16:19:25.906Z", - "links": { - "npm": "https://www.npmjs.com/package/tns-template-blank-ng", - "homepage": "https://github.com/NativeScript/nativescript-app-templates", - "repository": "https://github.com/NativeScript/nativescript-app-templates", - "bugs": "https://github.com/NativeScript/NativeScript/issues" - }, - "author": { - "name": "NativeScript Team", - "username": "nativescript" - }, - "publisher": { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - "maintainers": [ - { - "username": "tns-bot", - "email": "nativescript@telerik.com" - }, - { - "username": "rosen-vladimirov", - "email": "vladimirov@progress.com" - }, - { - "username": "stoskov", - "email": "s.toskov@gmail.com" - }, - { - "username": "lini", - "email": "bit@gbg.bg" - }, - { - "username": "walkerrunpdx", - "email": "walkerrunpdx@gmail.com" - }, - { - "username": "rigor789", - "email": "shout@igor-randjelovic.com" - }, - { - "username": "nativescript-bot", - "email": "oss@nativescript.org" - }, - { - "username": "bradmartin", - "email": "bradwaynemartin@gmail.com" - }, - { - "username": "tdermendjiev", - "email": "tdermendjievft@gmail.com" - }, - { - "username": "sis0k0", - "email": "stanimira.vlaeva@gmail.com" - } - ], - "downloadStats": { - "lastDay": 0, - "lastWeek": 0, - "lastMonth": 0 - } - }, { "name": "tns-template-blank-ts", "scope": "unscoped",